/* ════════════════════════════════════════════════════════════
   STYLE.CSS  –  Design der Hochzeitshomepage
   ════════════════════════════════════════════════════════════

   Inhaltsverzeichnis:
   1.  CSS-Variablen (Farben, Schriften, Abstände)
   2.  Reset & Grundstile
   3.  Typografie (Schriften, Überschriften, Text)
   4.  Buttons
   5.  Navigation / Navbar
   6.  Hero-Sektion
   7.  Allgemeine Sektions-Styles
   8.  Sektion: Unsere Geschichte (Timeline)
   9.  Sektion: Datum & Ort (Karten)
   10. Sektion: Ablauf (Schedule)
   11. Sektion: RSVP-Formular
   12. Sektion: Kontakt
   13. Footer
   14. Responsive Design (Mobilgeräte)

   CSS-Grundbegriffe:
   - Selektor      → bestimmt, welche Elemente gestylt werden
   - Eigenschaft   → was gestylt wird (z.B. color, font-size)
   - Wert          → wie es aussieht (z.B. red, 16px)
   - Klasse (.name)  → wiederverwendbarer Stil
   - ID (#name)    → einmaliger Stil
   - Pseudo-Klasse → besonderer Zustand (:hover, :focus)
   ════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────
   1. CSS-VARIABLEN
   Mit var(--name) können diese Werte überall verwendet werden.
   Änderst du hier eine Farbe, ändert sie sich auf der ganzen Seite.
   ──────────────────────────────────────────────────────────── */
:root {
  /* ── Farbpalette (Beige-Töne + Akzente) ─────────────────── */
  --color-beige-lightest: #fdf8f0;  /* sehr heller Hintergrund         */
  --color-beige-light:    #f5ebe0;  /* heller Beige                    */
  --color-beige:          #e8d5b7;  /* mittlerer Beige (Haupt)         */
  --color-beige-dark:     #c9a87c;  /* dunkler Beige / Gold            */
  --color-beige-darkest:  #8b6c42;  /* tiefes Braun-Gold               */
  --color-accent:         #a67c52;  /* Akzentfarbe für Buttons etc.    */
  --color-accent-hover:   #8b6340;  /* Akzent dunkler beim Hover       */
  --color-text:           #3d2b1f;  /* Haupttextfarbe (dunkelbraun)    */
  --color-text-light:     #7a6152;  /* hellerer Text (z.B. Untertitel) */
  --color-white:          #ffffff;

  /* ── Schriften ──────────────────────────────────────────── */
  --font-heading: "Playfair Display", Georgia, serif;  /* Überschriften */
  --font-body:    "Lato", Arial, sans-serif;            /* Fließtext     */

  /* ── Abstände ───────────────────────────────────────────── */
  --spacing-xs:  0.5rem;   /*  8px – sehr klein  */
  --spacing-sm:  1rem;     /* 16px – klein       */
  --spacing-md:  2rem;     /* 32px – mittel      */
  --spacing-lg:  4rem;     /* 64px – groß        */
  --spacing-xl:  6rem;     /* 96px – sehr groß   */

  /* ── Sonstiges ──────────────────────────────────────────── */
  --navbar-height: 70px;
  --border-radius: 8px;
  --shadow:        0 4px 20px rgba(139, 108, 66, 0.15);
  --transition:    0.3s ease;  /* Standard-Übergangszeit für Animationen */
}


/* ────────────────────────────────────────────────────────────
   2. RESET & GRUNDSTILE
   Browser haben eigene Standard-Styles – diese werden hier
   "zurückgesetzt" für ein einheitliches Erscheinungsbild.
   ──────────────────────────────────────────────────────────── */

/* Der * Selektor trifft ALLE Elemente */
*,
*::before,  /* Pseudo-Elemente ::before */
*::after {  /* Pseudo-Elemente ::after  */
  /* box-sizing: border-box → Padding und Border werden in die Breite eingerechnet */
  box-sizing: border-box;
  /* Standard-Abstände (margin/padding) aller Elemente auf 0 setzen */
  margin: 0;
  padding: 0;
}

html {
  /* scroll-behavior: smooth → sanftes Scrollen bei Anker-Links */
  scroll-behavior: smooth;
  /* Scrollleiste reserviert Platz, damit kein Sprung beim Einblenden */
  scrollbar-gutter: stable;
}

body {
  font-family:      var(--font-body);
  font-size:        1rem;
  line-height:      1.7;
  color:            var(--color-text);
  background-color: var(--color-beige-lightest);
  overflow-x:       hidden;
  /* Versteckt bis JavaScript die Texte eingefügt hat.
     Wird in main.js auf "visible" gesetzt. */
  visibility:       hidden;
}

/* Bilder und Videos sollen nie breiter als ihr Container werden */
img, video {
  max-width: 100%;
  display:   block;
}

/* Links: Farbe und kein Unterstrich standardmäßig */
a {
  color:           var(--color-accent);
  text-decoration: none;
  transition:      color var(--transition);
}

a:hover {
  color: var(--color-accent-hover);
}

/* Listen-Punkte entfernen */
ul {
  list-style: none;
}


/* ────────────────────────────────────────────────────────────
   3. TYPOGRAFIE
   ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family:  var(--font-heading);
  font-weight:  700;
  line-height:  1.2;
  color:        var(--color-beige-darkest);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }  /* clamp(min, ideal, max) */
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

/* Abschnittsüberschrift mit Zentrierter Ausrichtung */
.section-title {
  text-align:    center;
  margin-bottom: var(--spacing-sm);
}

/* Dekorative Trennlinie unter Überschriften */
.section-divider {
  width:            60px;
  height:           2px;
  background-color: var(--color-beige-dark);
  margin:           0 auto var(--spacing-md);
}

/* Einleitungstext unter der Überschrift */
.section-intro {
  text-align:    center;
  font-size:     1.1rem;
  color:         var(--color-text-light);
  margin-bottom: var(--spacing-md);
  max-width:     600px;
  margin-left:   auto;
  margin-right:  auto;
}


/* ────────────────────────────────────────────────────────────
   4. BUTTONS
   ──────────────────────────────────────────────────────────── */

.btn {
  display:         inline-block;
  padding:         0.85rem 2.2rem;
  border:          none;
  border-radius:   var(--border-radius);
  font-family:     var(--font-body);
  font-size:       1rem;
  font-weight:     700;
  letter-spacing:  0.05em;  /* leicht gesperrter Text */
  cursor:          pointer;  /* Hand-Cursor beim Hover */
  text-transform:  uppercase;
  transition:      background-color var(--transition),
                   transform var(--transition),
                   box-shadow var(--transition);
}

/* Primär-Button (Haupt-Call-to-Action) */
.btn-primary {
  background-color: var(--color-accent);
  color:            var(--color-white);
  box-shadow:       0 2px 8px rgba(166, 124, 82, 0.4);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  color:            var(--color-white);
  transform:        translateY(-2px);  /* leichtes Anheben beim Hover */
  box-shadow:       0 6px 16px rgba(166, 124, 82, 0.5);
}

.btn-primary:active {
  transform: translateY(0);  /* Beim Klicken zurück */
}

/* Klasse um Elemente unsichtbar zu machen (wird per JS entfernt) */
.hidden {
  display: none !important;
}


/* ────────────────────────────────────────────────────────────
   5. NAVIGATION / NAVBAR
   position: fixed → bleibt beim Scrollen oben
   ──────────────────────────────────────────────────────────── */

#navbar {
  position:   fixed;       /* aus dem Dokumentfluss heraus, immer oben */
  top:        0;
  left:       0;
  right:      0;
  height:     var(--navbar-height);
  z-index:    1000;         /* über allen anderen Elementen */
  /* opacity und transform werden für die Ein-/Ausblend-Animation genutzt */
  transition: background-color var(--transition),
              box-shadow var(--transition),
              opacity var(--transition),
              transform var(--transition);
}

/* Anfangs unsichtbar (auf der Hero-Sektion) */
#navbar {
  background-color: transparent;
  opacity:          0;           /* vollständig durchsichtig */
  transform:        translateY(-10px); /* leicht nach oben verschoben */
  pointer-events:   none;        /* Klicks gehen durch die unsichtbare Navbar */
}

/* Wenn nach unten gescrollt wurde (.scrolled wird per JS hinzugefügt) */
#navbar.scrolled {
  background-color: rgba(253, 248, 240, 0.97);
  box-shadow:       0 2px 15px rgba(0, 0, 0, 0.08);
  backdrop-filter:  blur(10px);
  opacity:          1;           /* vollständig sichtbar */
  transform:        translateY(0); /* zurück an die richtige Position */
  pointer-events:   auto;        /* Klicks funktionieren wieder */
}

/* Innerer Container: Inhalt begrenzt und zentriert */
.nav-container {
  max-width:      1100px;
  margin:         0 auto;
  height:         100%;
  padding:        0 var(--spacing-md);
  display:        flex;          /* Flexbox: Elemente nebeneinander */
  align-items:    center;        /* vertikal zentriert */
  justify-content:space-between; /* Abstände verteilen */
  gap:            var(--spacing-sm);
}

/* Logo / Brautpaar-Name */
.nav-logo {
  font-family:  var(--font-heading);
  font-size:    1.5rem;
  font-style:   italic;
  color:        var(--color-beige-darkest);
  white-space:  nowrap;
}

#navbar.scrolled .nav-logo {
  color: var(--color-beige-darkest);
}

/* Navigationslinks */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-sm);
}

.nav-links a {
  font-size:     0.9rem;
  font-weight:   700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:         var(--color-white);
  padding:       0.3rem 0;
  /* Unterstrich-Animation beim Hover */
  position:      relative;
}

/* Navbar hat Hintergrund → dunkle Links */
#navbar.scrolled .nav-links a {
  color: var(--color-text-light);
}

/* Unterstrich-Animation: ::after ist ein unsichtbares Pseudo-Element */
.nav-links a::after {
  content:    "";
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;           /* anfangs 0 breit */
  height:     2px;
  background: var(--color-beige-dark);
  transition: width var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;  /* beim Hover auf volle Breite ausdehnen */
}

/* Sprachumschalter */
.lang-switcher {
  display:    flex;
  gap:        0.3rem;
  flex-shrink:0;  /* darf nicht schrumpfen */
}

.lang-btn {
  background:    transparent;
  border:        1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  color:         var(--color-white);
  font-size:     1.1rem;
  line-height:   1;
  padding:       0.15rem 0.3rem;
  cursor:        pointer;
  transition:    background-color var(--transition),
                 border-color var(--transition);
}

#navbar.scrolled .lang-btn {
  border-color: var(--color-beige-dark);
  color:        var(--color-text-light);
}

.lang-btn:hover,
.lang-btn.active {
  background-color: var(--color-beige-dark);
  border-color:     var(--color-beige-dark);
  color:            var(--color-white);
}

/* Hamburger-Button (nur mobil sichtbar) */
.nav-hamburger {
  display:        none;  /* standardmäßig versteckt */
  flex-direction: column;
  justify-content:space-between;
  width:          28px;
  height:         20px;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  padding:        0;
}

/* Die drei Striche */
.nav-hamburger span {
  display:          block;
  width:            100%;
  height:           2px;
  background-color: var(--color-white);
  border-radius:    2px;
  transition:       transform var(--transition),
                    opacity var(--transition);
}

#navbar.scrolled .nav-hamburger span {
  background-color: var(--color-text);
}

/* Hamburger → X Animation wenn geöffnet */
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}


/* ────────────────────────────────────────────────────────────
   6. HERO-SEKTION
   ──────────────────────────────────────────────────────────── */

.section-hero {
  /* min-height: 100vh → mindestens so hoch wie der Bildschirm */
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         var(--spacing-xl) var(--spacing-md);

  /* Hintergrundbild: Das echte Foto, darunter ein dunkler Gradient.
     Zwei Werte bei background-image sind möglich – der erste liegt oben.
     Der Gradient macht den Text lesbar, ohne das Foto zu verdecken. */
  background-image:    linear-gradient(
                         to bottom,
                         rgba(30, 18, 10, 0.45) 0%,
                         rgba(30, 18, 10, 0.25) 50%,
                         rgba(30, 18, 10, 0.50) 100%
                       ),
                       url("../hero.JPEG");
  background-size:      cover;
  background-position:  center 65%;
  background-attachment:fixed;
  position:            relative;
}

/* ::before wird nicht mehr benötigt – der Gradient im background-image
   übernimmt die Abdunklung. Das Element bleibt leer. */
.section-hero::before {
  content: "";
}

/* Inhalt über dem Overlay */
.hero-content {
  position:   relative;  /* über dem ::before Overlay */
  z-index:    1;
  max-width:  700px;
  animation:  fadeInUp 1.2s ease;
  /* Nach unten versetzt → schiebt den Text optisch nach oben.
     Wert erhöhen = weiter nach oben. */
  margin-bottom: 15vh;
}

/* Keyframe-Animation: von unten nach oben einblenden */
@keyframes fadeInUp {
  from {
    opacity:   0;
    transform: translateY(30px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.hero-subtitle {
  font-family:   var(--font-heading);
  font-style:    italic;
  font-size:     clamp(1rem, 2.5vw, 1.4rem);
  color:         rgba(255, 255, 255, 0.9);
  letter-spacing:0.15em;
  text-transform:uppercase;
  margin-bottom: var(--spacing-sm);
}

.hero-title {
  color:         var(--color-white);
  text-shadow:   0 2px 20px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--spacing-sm);
}

.hero-date {
  display:       block;
  font-family:   var(--font-heading);
  font-size:     clamp(1rem, 2vw, 1.3rem);
  color:         rgba(255, 255, 255, 0.85);
  letter-spacing:0.1em;
  margin-bottom: var(--spacing-xs);
}

.hero-location {
  font-size:     1rem;
  color:         rgba(255, 255, 255, 0.75);
  letter-spacing:0.08em;
  margin-bottom: var(--spacing-md);
}

/* Countdown-Streifen unter dem Hero-Bild */
.countdown-bar {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5rem;
  background-color: var(--color-beige-dark);
  padding:          0.9rem var(--spacing-md);
}

.countdown-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      70px;
}

.countdown-number {
  font-family: var(--font-heading);
  font-size:   clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color:       var(--color-white);
  line-height: 1;
}

.countdown-label {
  font-size:     0.55rem;
  color:         rgba(255, 255, 255, 0.75);
  text-transform:uppercase;
  letter-spacing:0.15em;
  margin-top:    0.35rem;
}

.countdown-sep {
  font-size:     1.5rem;
  color:         rgba(255, 255, 255, 0.4);
  padding-bottom:1rem;
  user-select:   none;
}

/* Scroll-Pfeil am unteren Rand der Hero-Sektion */
.hero-scroll-arrow {
  position:   absolute;
  bottom:     2rem;
  left:       50%;
  transform:  translateX(-50%);
  font-size:  2rem;
  color:      rgba(255, 255, 255, 0.6);
  /* Auf-Ab Animation */
  animation:  bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

.hero-scroll-arrow:hover {
  color: var(--color-white);
}


/* ────────────────────────────────────────────────────────────
   7. ALLGEMEINE SEKTIONS-STYLES
   ──────────────────────────────────────────────────────────── */

.section {
  padding: var(--spacing-xl) var(--spacing-md);
}

/* Innerer Container: Inhalt begrenzt und zentriert */
.section-container {
  max-width: 900px;
  margin:    0 auto;
}

/* Abwechselnde Hintergrundfarben für mehr Abwechslung */
.section-story   { background-color: var(--color-white); }
.section-details { background-color: var(--color-beige-lightest); }
.section-schedule{ background-color: var(--color-white); }
.section-faq     { background-color: var(--color-beige-lightest); }
.section-contact { background-color: var(--color-white); }


/* ────────────────────────────────────────────────────────────
   8. SEKTION: UNSERE GESCHICHTE (ZEITSTRAHL / TIMELINE)
   ──────────────────────────────────────────────────────────── */

.timeline {
  position:     relative;
  padding-left: 2rem;
  /* Die senkrechte Linie des Zeitstrahls */
  border-left:  2px solid var(--color-beige);
  margin-top:   var(--spacing-md);
}

.timeline-item {
  position:      relative;
  margin-bottom: var(--spacing-md);
  padding-left:  var(--spacing-md);
}

/* Kreisförmiger Punkt auf der Zeitstrahl-Linie */
.timeline-dot {
  position:         absolute;
  left:             calc(-2rem - 7px);  /* zentriert auf der linken Linie */
  top:              0.4rem;
  width:            14px;
  height:           14px;
  border-radius:    50%;  /* 50% = Kreis */
  background-color: var(--color-beige-dark);
  border:           3px solid var(--color-white);
  box-shadow:       0 0 0 2px var(--color-beige-dark);
}

.timeline-year {
  display:       inline-block;
  font-family:   var(--font-heading);
  font-size:     0.9rem;
  font-weight:   700;
  color:         var(--color-beige-dark);
  letter-spacing:0.1em;
  margin-bottom: 0.3rem;
}

.timeline-content h3 {
  margin-bottom: 0.4rem;
}

.timeline-content p {
  color:     var(--color-text-light);
  font-size: 0.95rem;
}


/* ────────────────────────────────────────────────────────────
   9. KARTEN-GRID (für Datum & Ort und Kontakt)
   ──────────────────────────────────────────────────────────── */

/* CSS Grid: gleichmäßige Spalten, mindestens 220px breit */
.cards-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   var(--spacing-md);
  margin-top:            var(--spacing-md);
}

.card {
  background:    var(--color-white);
  border:        1px solid var(--color-beige);
  border-radius: var(--border-radius);
  padding:       var(--spacing-md);
  text-align:    center;
  box-shadow:    var(--shadow);
  transition:    transform var(--transition), box-shadow var(--transition);
}

.card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 8px 30px rgba(139, 108, 66, 0.2);
}

.card-icon {
  font-size:     2.5rem;
  margin-bottom: var(--spacing-sm);
}

.card h3 {
  margin-bottom: var(--spacing-xs);
  font-size:     1.1rem;
}

.card p {
  color:     var(--color-text-light);
  font-size: 0.95rem;
  line-height:1.6;
}

/* Karten-Hintergrundfarbe für die beige Sektionen anpassen */
.section-details .card {
  background: var(--color-white);
}

/* Karten in der Kontaktsektion */
.section-contact .cards-grid {
  max-width: 600px;
  margin:    var(--spacing-md) auto 0;
}

/* Karten-Links */
.card a {
  font-size: 0.9rem;
}

/* Google Maps Pin Icon unter der Adresse */
.map-link {
  display:    inline-block;
  margin-top: var(--spacing-xs);
  transition: transform var(--transition);
}

.map-link:hover {
  transform: scale(1.15);
}

.map-pin-svg {
  width:  36px;
  height: 36px;
  /* Schatten passend zur Pin-Form */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* Kalender-Link in der Datumskarte */
.cal-link {
  display:     inline-flex;
  align-items: center;
  gap:         var(--spacing-xs);
  margin-top:  var(--spacing-sm);
  color:       var(--color-accent);
  text-decoration: none;
  font-size:   0.85rem;
  font-family: var(--font-body);
  transition:  color var(--transition), transform var(--transition);
}

.cal-link:hover {
  color:     var(--color-accent-hover);
  transform: translateY(-1px);
}

.cal-icon {
  width:      20px;
  height:     20px;
  flex-shrink: 0;
}



/* ────────────────────────────────────────────────────────────
   10. SEKTION: ABLAUF (SCHEDULE)
   ──────────────────────────────────────────────────────────── */

.schedule-list {
  margin-top: var(--spacing-md);
}

.schedule-item {
  display:       flex;           /* Uhrzeit und Info nebeneinander */
  align-items:   flex-start;
  gap:           var(--spacing-md);
  padding:       var(--spacing-md) 0;
  /* Trennlinie zwischen den Einträgen */
  border-bottom: 1px solid var(--color-beige-light);
}

.schedule-item:last-child {
  border-bottom: none;
}

/* Uhrzeitanzeige */
.schedule-time {
  font-family:  var(--font-heading);
  font-size:    1.3rem;
  font-weight:  700;
  color:        var(--color-beige-dark);
  min-width:    70px;   /* feste Breite damit Info-Texte fluchten */
  padding-top:  0.1rem;
}

.schedule-info strong {
  display:     block;
  font-size:   1.05rem;
  color:       var(--color-beige-darkest);
  margin-bottom:0.3rem;
}

.schedule-info p {
  color:     var(--color-text-light);
  font-size: 0.95rem;
}


/* ────────────────────────────────────────────────────────────
   11. SEKTION: FAQ
   <details> und <summary> sind native HTML-Elemente –
   kein JavaScript nötig, der Browser macht das Auf-/Zuklappen.
   ──────────────────────────────────────────────────────────── */

.faq-list {
  margin-top: var(--spacing-md);
  display:    flex;
  flex-direction: column;
  gap:        var(--spacing-sm);
}

.faq-item {
  background:    var(--color-white);
  border:        1px solid var(--color-beige);
  border-radius: var(--border-radius);
  overflow:      hidden;  /* runde Ecken auch für den Inhalt */
}

/* summary = die klickbare Frage-Zeile */
.faq-question {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         1.1rem 1.4rem;
  font-family:     var(--font-heading);
  font-size:       1.05rem;
  font-weight:     700;
  color:           var(--color-beige-darkest);
  cursor:          pointer;
  list-style:      none;  /* Standard-Dreieck des Browsers entfernen */
  transition:      background-color var(--transition);
}

/* Standard-Pfeil in WebKit-Browsern (Safari, Chrome) entfernen */
.faq-question::-webkit-details-marker { display: none; }

.faq-question:hover {
  background-color: var(--color-beige-light);
}

/* Plus-Zeichen rechts – wird per CSS zu einem Minus wenn geöffnet */
.faq-question::after {
  content:     "+";
  font-size:   1.4rem;
  font-weight: 300;
  color:       var(--color-beige-dark);
  flex-shrink: 0;
  transition:  transform var(--transition);
  line-height: 1;
}

/* Wenn <details> offen ist: Plus → Minus */
.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}

.faq-item[open] .faq-question {
  background-color: var(--color-beige-light);
  border-bottom:    1px solid var(--color-beige);
}

/* Die Antwort unter der Frage */
.faq-answer {
  padding:    1rem 1.4rem 1.2rem;
  color:      var(--color-text-light);
  font-size:  0.95rem;
  line-height:1.7;
}


/* ────────────────────────────────────────────────────────────
   12. SEKTION: KONTAKT (bereits durch Karten abgedeckt)
   ──────────────────────────────────────────────────────────── */

/* Keine zusätzlichen Styles nötig – die .card Klasse reicht */


/* ────────────────────────────────────────────────────────────
   12. FOOTER
   ──────────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--color-beige-darkest);
  color:            rgba(255, 255, 255, 0.8);
  text-align:       center;
  padding:          var(--spacing-md);
  font-size:        0.9rem;
  letter-spacing:   0.05em;
}


/* ────────────────────────────────────────────────────────────
   14. RESPONSIVE DESIGN
   @media-Regeln: Styles, die nur ab/bis einer bestimmten
   Bildschirmbreite gelten.

   Breakpoints:
   - max-width: 768px  → Tablet und kleiner
   - max-width: 480px  → Smartphone
   ──────────────────────────────────────────────────────────── */

/* ── Tablet & kleiner (≤ 768px) ──────────────────────────── */
@media (max-width: 768px) {

  /* Navigation: Hamburger-Button einblenden */
  .nav-hamburger {
    display:        flex;
    order:          3;
  }

  /* Navbar auf Mobile immer sichtbar (nicht erst nach Scroll) */
  #navbar {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
  }

  /* iOS unterstützt background-attachment: fixed nicht – deaktivieren */
  .section-hero {
    background-attachment: scroll;
    background-position:   center center;
  }

  /* Nav-Container braucht position:relative damit das Logo absolut positioniert werden kann */
  .nav-container {
    position: relative;
  }

  /* Logo aus dem Flex-Fluss herausnehmen (sonst schiebt es den Hamburger off-screen).
     Es schwebt absolut zentriert in der Navbar. */
  .nav-logo {
    position:   absolute;
    left:       50%;
    transform:  translateX(-50%);
    opacity:    0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
  }

  /* Logo einblenden sobald das Menü offen ist */
  #navbar.open-logo .nav-logo {
    opacity:    1;
    visibility: visible;
  }

  /* Sprachauswahl ausblenden wenn Logo sichtbar ist (verhindert Überlappung) */
  #navbar.open-logo .lang-switcher {
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transition:     none;
  }

  /* Navigationslinks: standardmäßig komplett versteckt.
     visibility: hidden  → kein Platz, keine Klicks, unsichtbar
     opacity: 0          → transparent (ermöglicht sanfte Animation)
     pointer-events: none → Klicks gehen durch das versteckte Menü */
  .nav-links {
    position:         fixed;
    top:              var(--navbar-height);
    left:             0;
    right:            0;
    background-color: rgba(253, 248, 240, 0.98);
    flex-direction:   column;
    align-items:      center;
    padding:          var(--spacing-md);
    gap:              var(--spacing-sm);
    box-shadow:       0 8px 20px rgba(0,0,0,0.1);
    visibility:       hidden;
    opacity:          0;
    transform:        translateY(-8px);
    transition:       opacity 0.3s ease,
                      visibility 0.3s ease,
                      transform 0.3s ease;
    pointer-events:   none;
  }

  /* Geöffnetes Menü (.open wird per JS gesetzt) */
  .nav-links.open {
    visibility:     visible;
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
  }

  .nav-links a {
    color:     var(--color-text);
    font-size: 1rem;
    padding:   0.5rem 0;
  }

  /* Abstände verkleinern */
  .section {
    padding: var(--spacing-lg) var(--spacing-sm);
  }

  /* Zeitstrahl-Einrückung anpassen */
  .timeline {
    padding-left: 1.5rem;
  }

  .timeline-item {
    padding-left: var(--spacing-sm);
  }

  /* Punkt neu zentrieren: passt sich dem reduzierten padding-left (1.5rem) an */
  .timeline-dot {
    left: calc(-1.5rem - 7px);
  }

  /* Ablauf: Uhrzeit über dem Text */
  .schedule-item {
    flex-direction: column;
    gap:            0.5rem;
  }

  .schedule-time {
    font-size: 1.1rem;
    min-width: unset;
  }

  /* Radio-Gruppe untereinander auf kleinen Screens */
  .radio-group {
    flex-direction: column;
    gap:            var(--spacing-xs);
  }

  /* Countdown auf Tablets kompakter */
  .countdown-number {
    font-size: 1.6rem;
  }

  .countdown-item {
    min-width: 55px;
  }

  .countdown-bar {
    padding: 1.2rem var(--spacing-sm);
    gap:     0.3rem;
  }

  /* Kalender-Icon auf Tablets verkleinern */
  .cal-icon {
    width:  16px;
    height: 16px;
  }

  .cal-link {
    font-size: 0.8rem;
  }
}


/* ── Smartphone (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {

  /* Hero: Abstände verkleinern */
  .hero-content {
    padding: 0 var(--spacing-xs);
  }

  /* Karten: eine Spalte */
  .cards-grid {
    grid-template-columns: 1fr;
  }

  /* Sprachbuttons etwas kompakter */
  .lang-btn {
    font-size: 0.7rem;
    padding:   0.15rem 0.4rem;
  }

  /* Kalender-Icon auf Mobilgeräten verkleinern */
  .cal-icon {
    width:  14px;
    height: 14px;
  }

  .cal-link {
    font-size: 0.75rem;
  }
}