/* =========================================================
   WIESN AFTERWORK BERLIN 2026 – Stylesheet
   ========================================================= */

:root {
  --color-cream: #F6F1E8;
  --color-white: #FFFDFC;
  --color-green: #183F32;
  --color-green-dark: #102D24;
  --color-yellow: #F2B72E;
  --color-pink: #D95B7B;
  --color-espresso: #1D1916;
  --color-wood: #7A5035;
  --color-border: rgba(24, 63, 50, 0.18);
  --raute-base: #FCFDFE;
  --raute-blue: #E4EEF8;

  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  --max-width: 1320px;
  /* Eigener, größerer Breiten-Budget nur für die drei "Bühnen" Hero/Stimmung/
     Location — bewusst von --max-width getrennt, damit Header, Footer,
     Ticketbereich und FAQ unverändert bleiben. Zusammen mit der zusätzlichen
     Höhe in .hero-wood-date wachsen Breite und Höhe im selben Verhältnis wie
     die ursprüngliche Bühne (~1264 x 505px), statt die Fläche nur in die
     Breite zu ziehen. */
  --stage-width: 1380px;
  --radius-btn: 7px;
  --radius-card: 14px;

  --space-section: 108px;
  --space-section-s: 80px;
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Direkter Sprung statt animiertem Smooth-Scroll: verhindert, dass eine
   laufende Scroll-Animation durch Trackpad-/Mausrad-Eingaben währenddessen
   unterbrochen wird und der Bildschirm sichtbar an eine falsche Position
   "zurückspringt". */
html { scroll-behavior: auto; }

/* Echtes Stoff-Rauten-Foto (Bayernfahne, Satin) statt SVG-Kachel — moderner,
   texturierter Look, stark aufgehellt (~78% weiß eingemischt), damit es als
   dezenter Hintergrund funktioniert statt als Flaggenmotiv zu wirken.
   Als Vollbild (nicht gekachelt, sonst verzerren sich die Diagonalen der
   Seide) mit fixed attachment: das Bild bleibt exakt an derselben Stelle
   hinter der ganzen Seite, dadurch bleiben body/Header/Mobilmenü optisch
   immer deckungsgleich (kein Versatz beim Scrollen). */
body,
.site-header,
.mobile-menu {
  background-color: var(--raute-base);
  /* Sehr leichter weißer Schleier (≈5%) über der Textur, damit das
     Rautenmuster global etwas ruhiger/kontrastärmer wirkt, ohne andere
     Elemente (die eigene Hintergründe/Bilder haben) davon zu beeinflussen. */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
    url("images/bg-raute-fabric.jpg?v=3");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  margin: 0;
  padding-bottom: 40px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-espresso);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-green);
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.01em;
}

a { color: var(--color-green); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.container-narrow { max-width: 860px; }

.section { padding: var(--space-section) 0; }

/* Anchor-Ziele: Abstand zum sticky Header, damit die Überschrift beim
   Sprung per Navigation nicht darunter verschwindet. */
#termine, #stimmung, #location, #faq { scroll-margin-top: 92px; }

.eyebrow {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-wood);
}

.section-subline {
  max-width: 620px;
  margin: 0 0 40px;
  color: rgba(29, 25, 22, 0.78);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-green);
  color: var(--color-cream);
  padding: 10px 18px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--color-yellow);
  color: var(--color-espresso);
}
.btn-primary:hover { background: #E5A81C; transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--color-green);
  border-color: var(--color-green);
}
.btn-secondary:hover { background: rgba(24, 63, 50, 0.07); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Deckendes Rautenmuster (siehe geteilte Regel oben) statt teiltransparentem
     Glass-Effekt — verhindert, dass beim Scrollen zwei versetzte Rauten-Ebenen
     (Header-Muster + durchscheinendes Seiteninhalt-Muster) sichtbar gegeneinander
     verrutschen. */
  border-bottom: 1px solid var(--color-border);
  overflow: visible;
}

.header-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  /* Rechter Innenabstand um 5mm reduziert, damit Ticket-Button +
     Sprachumschalter zusammen 5mm weiter nach rechts rutschen. */
  padding: 14px calc(28px - 5mm) 18px 28px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 20px;
  min-height: 64px;
  overflow: visible;
}

.main-nav {
  min-width: 0;
}

.main-nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 16px;
}

/* FAQ insgesamt 3mm weiter nach links als die ursprüngliche Position:
   reines visuelles Verschieben (transform), damit Termine/Stimmung/Location
   (per justify-content: space-between) exakt an ihrer bisherigen Position
   bleiben — eine echte margin/Breiten-Änderung würde sonst alle vier Links
   proportional neu verteilen. */
.main-nav-faq { transform: translateX(-3mm); }

.main-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-espresso);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover { border-bottom-color: var(--color-pink); }

/* Große Sprechblase rechts im Header — fest integriert, bleibt beim Scrollen
   immer sichtbar (sicherster Standard für die Ticket-CTA). */
.header-cta {
  position: relative;
  z-index: 5;
  justify-self: end;
  /* 10% größer als zuvor (88px -> ~97px) und um 1cm nach links gerückt,
     damit rechts davon Platz für den DE/EN-Umschalter entsteht. */
  height: 97px;
  min-height: 97px;
  margin-bottom: -40px;
  /* Um 8mm nach rechts verschoben (margin-left addiert, margin-right um
     denselben Betrag reduziert): macht links Platz für den etwas weiter
     nach rechts gerückten FAQ-Link, ohne die eigene Distanz zum DE/EN-
     Umschalter rechts zu verändern (Netto-Breite dieser Spalte bleibt
     gleich, siehe .main-nav-faq). */
  margin-left: 8mm;
  margin-right: calc(1cm - 8mm);
  padding: 0 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.41rem;
  letter-spacing: 0.01em;
  border-radius: 33px;
  background: linear-gradient(180deg, #FFF6D6 0%, #FCE7A0 100%);
  color: var(--color-espresso);
  border: 3px solid #E8AE28;
  box-shadow: 0 8px 20px rgba(122, 80, 53, 0.18);
  animation: ctaPulse 2.2s ease-in-out infinite;
}
.header-cta:hover {
  background: linear-gradient(180deg, #FFF0C0 0%, #F5D878 100%);
  border-color: #D9A01C;
  transform: translateY(-1px);
}
/* Kurze Sprechblasen-Zunge, nur angedeutet (Richtung Logo/O). */
.header-cta-tongue {
  position: absolute;
  left: 29%;
  top: 100%;
  width: 22px;
  height: 14px;
  margin-left: -11px;
  background: #E8AE28;
  clip-path: polygon(0 0, 100% 0, 45% 100%);
  transform: rotate(8deg);
  transform-origin: top center;
  pointer-events: none;
}
.header-cta-tongue::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 16px;
  height: 10px;
  background: #FCE7A0;
  clip-path: polygon(0 0, 100% 0, 45% 100%);
}
.header-cta:hover .header-cta-tongue { background: #D9A01C; }
.header-cta:hover .header-cta-tongue::after { background: #F5D878; }

@keyframes ctaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(122, 80, 53, 0.18);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(242, 183, 46, 0.42);
  }
}

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--color-green);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Menü */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 100px 32px 40px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu ul { list-style: none; margin: 0 0 32px; padding: 0; }
.mobile-menu li + li { border-top: 1px solid var(--color-border); }
.mobile-menu a:not(.btn) {
  display: block;
  padding: 18px 4px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--color-green);
}
.mobile-menu-cta { width: 100%; }

/* Sprachumschalter DE/EN: kleine Pille, aktive Sprache hervorgehoben,
   passt sich der bestehenden Button-/Nav-Optik an statt neue UI-Muster
   einzuführen. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border: 1.5px solid var(--color-pink);
  border-radius: 20px;
  background: var(--color-cream);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-green);
  cursor: pointer;
  justify-self: center;
  box-shadow: 0 2px 6px rgba(217, 91, 123, 0.22);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.lang-switch:hover { background: #fff; box-shadow: 0 3px 9px rgba(217, 91, 123, 0.32); }
.lang-switch:active { transform: translateY(1px); }

/* Header-Instanz sitzt jetzt rechts neben dem (höheren) Ticket-Button,
   auf dessen vertikale Mitte ausgerichtet. Zusätzlicher Rechts-Versatz von
   insgesamt ca. 11mm — bei schmaleren Desktop-Fenstern (961-1439px) ist
   rechts vom Umschalter aber kein Platz mehr frei (.header-inner nutzt dort
   die volle Fensterbreite), der volle 11mm-Versatz würde ihn über den Rand
   hinaus schieben. Deshalb dort nur ein reduzierter, sicherer Versatz; der
   volle Versatz gilt erst ab 1440px, wo .header-inner genug Leerraum links/
   rechts der zentrierten max-width hat. */
.header-inner .lang-switch { transform: translateY(28px) translateX(2.2mm); }
.header-inner .lang-switch:active { transform: translateY(29px) translateX(2.2mm); }

@media (min-width: 1440px) {
  .header-inner .lang-switch { transform: translateY(28px) translateX(11mm); }
  .header-inner .lang-switch:active { transform: translateY(29px) translateX(11mm); }
}
.lang-switch-sep { opacity: 0.5; }
.lang-switch-opt { opacity: 0.55; transition: opacity 0.2s ease, color 0.2s ease; }
.lang-switch.is-de .lang-switch-de,
.lang-switch.is-en .lang-switch-en {
  opacity: 1;
  color: var(--color-pink);
}

.lang-switch-mobile {
  margin: 0 0 22px;
  justify-self: auto;
}

/* ---------- Hero-Einblendanimationen ---------- */

@keyframes heroPhotoIn {
  from { opacity: 0; transform: translateX(-30px) scale(1.15); }
  to   { opacity: 1; transform: translateX(0) scale(1.15); }
}

@keyframes heroLogoPop {
  0%   { opacity: 0; transform: translateX(10%) scale(0.6); }
  60%  { opacity: 1; transform: translateX(10%) scale(1.08); }
  80%  { transform: translateX(10%) scale(0.97); }
  100% { opacity: 1; transform: translateX(10%) scale(1); }
}

@keyframes heroLogoPopMobile {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  80%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes heroCaptionIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroCaptionInMobile {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroLebkuchenIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(-24px) rotate(-8deg) scale(0.805); }
  70%  { opacity: 1; transform: translate(-50%, -50%) translateX(0) rotate(-8deg) scale(1.22); }
  100% { opacity: 1; transform: translate(-50%, -50%) translateX(0) rotate(-8deg) scale(1.15); }
}

@keyframes heroLebkuchenInMobile {
  0%   { opacity: 0; transform: rotate(-8deg) scale(0.7); }
  70%  { opacity: 1; transform: rotate(-8deg) scale(1.06); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

@keyframes heroBadgeIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}


/* ---------- Hero ---------- */

/* Kein Cream-Puffer mehr unter dem Holzband nötig: die nächste Sektion
   (dunkles Grün) übernimmt direkt und liefert selbst genug Abstand nach oben
   — dadurch wirkt der Übergang Holz → Grün bewusst und kompakt statt eine
   leere Fläche dazwischen zu haben. Oben dagegen bewusst ein kleiner
   Abstand zum Header (~4mm, um 7mm von ursprünglich ~1cm reduziert): das
   Rautenmuster blitzt dort kurz durch und der Header wirkt dadurch luftiger,
   statt dass das Holz direkt an der Kopfzeile klebt. */
.hero { padding: 11px 0 0; text-align: center; }

/* Holzband beginnt direkt unter dem Header. Das Padding der ursprünglichen
   Komposition (Herz/Fotos/Logo) liegt bewusst auf .hero-wood-content, nicht
   auf .hero-wood-band selbst: so bleibt die %-Positionierung der Collage
   exakt unverändert, auch wenn das Band unten für die Datumszeile wächst.
   Breite/Rundung folgen jetzt demselben Muster wie alle anderen
   Hintergrund-Flächen der Seite (Holz- und Bildbänder) — siehe .media-band. */
.hero-wood-band {
  position: relative;
  background: url("images/holz.jpg") center/cover;
}
/* Hero + Stimmung: die beiden Holzbänder nutzen absichtlich das größere
   --stage-width-Budget (siehe :root) — dadurch wirken beide Flächen ca.
   15-20% größer und der Rautenmuster-Hintergrund daneben entsprechend
   kleiner. Seitenabstand (56px) bleibt unverändert wie bisher. .site-footer
   bleibt bewusst bei --max-width, siehe eigene Regel darunter. */
.hero-wood-band,
.mood-wood {
  width: calc(100% - 56px);
  max-width: var(--stage-width);
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.site-footer {
  width: calc(100% - 56px);
  max-width: calc(var(--max-width) - 56px);
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (max-width: 480px) {
  .hero-wood-band,
  .mood-wood,
  .site-footer {
    width: calc(100% - 40px);
    max-width: calc(var(--max-width) - 40px);
  }
}
/* Hinweis: die einzelnen Block-Deklarationen von .hero-wood-band, .mood-wood
   und .site-footer weiter unten dürfen KEINE eigenen width/max-width/margin
   mehr setzen, sonst überschreiben sie diese gemeinsame Regel. */
/* ::before statt ::after: muss UNTER der Collage (Fotos/Logo/Herz/Badge-Loch)
   liegen, sonst würde dieser leichte Abdunkler auch über dem Rautenmuster im
   Badge-"Loch" liegen und es sichtbar dunkler/anders färben als das echte
   Seiten-Rautenmuster außerhalb der Holzfläche. */
.hero-wood-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 25, 22, 0.18);
}

.hero-wood-content {
  position: relative;
  /* .hero-wood-band (Elternelement) ist jetzt selbst auf --max-width
     gedeckelt (siehe gemeinsame .hero-wood-band/.mood-wood/.site-footer-
     Regel oben) — dadurch bleibt auch das Breite/Höhe-Verhältnis der
     Collage (Herz/Fotos, %-positioniert) auf jeder Bildschirmgröße
     konsistent, ganz ohne einen zusätzlichen Cap auf dieser Ebene. */
  padding: 34px 28px 26px;
}

/* Lebkuchenherz-Sticker: liegt als drittes Element der Collage über der linken
   unteren Ecke des kleineren Fassadenfotos. */
.hero-lebkuchen {
  position: absolute;
  z-index: 3;
  /* Gesamte Collage (Herz + Fotos) auf Desktop ca. 2,5cm nach links und
     5mm nach oben verschoben (≈125px / 25px bei 14"-MacBook-Logikauflösung
     127ppi) — Anordnung der Elemente zueinander bleibt dabei unverändert. */
  left: calc(22% - 125px);
  top: calc(66.4% - 25px);
  width: 8.37%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: heroLebkuchenIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
.hero-lebkuchen img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.hero-wood-photo-wrap {
  position: absolute;
  z-index: 1;
  left: calc(23% - 125px);
  top: calc(51.2% - 25px);
  width: 24.15%;
  height: 37.7%;
  opacity: 0;
  animation: heroPhotoIn 0.7s ease-out 0.1s both;
}

/* Medaillon "Spreewiesn im Hofbräu Wirtshaus Berlin": sitzt in der freien
   Holzfläche zwischen Foto-Collage und Figur, auf Höhe der Fotos, als gelbe
   Linienzeichnung direkt ins Holz "eingebrannt" (transparentes PNG, keine
   eigene Kreisfläche/Hintergrund). Klickbar, führt zur Location-Sektion. Nur
   auf Desktop (≥ 960px) sichtbar — im mobilen Layout liegen Fotos und Figur
   anders zueinander, dort gibt es keine passende freie Fläche dafür. */
.hero-badge {
  display: block;
  position: absolute;
  z-index: 2;
  left: 57%;
  top: 74%;
  width: 13.9%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  animation: heroBadgeIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.hero-badge img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(29, 25, 22, 0.5));
}
@media (hover: hover) {
  .hero-badge:hover,
  .hero-badge:focus-visible {
    filter: brightness(1.06);
  }
  .hero-badge:hover img,
  .hero-badge:focus-visible img {
    transform: scale(1.03);
  }
}

.hero-wood-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 3px solid var(--color-cream);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Collage-Foto: liegt oben links über dem Haupt-Foto, ca. 40% seiner Größe.
   Relativ zum Foto-Wrapper positioniert, damit das Verhältnis bei jeder
   Breite gleich bleibt. */
.hero-facade-photo {
  position: absolute;
  z-index: 2;
  left: -20%;
  top: -22%;
  width: 50.4%;
  aspect-ratio: 1330 / 949;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid var(--color-cream);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
  transform: rotate(-5deg);
}

.hero-logo {
  position: relative;
  z-index: 1;
  width: min(760px, 92%);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
  opacity: 0;
  transform: translateX(10%) scale(0.6);
  animation: heroLogoPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

/* Datumszeile jetzt integriert im unteren Holzbereich: reine Typografie in
   Markengelb, kein Badge/Box/Hintergrund. Das Band wird dafür nur um die
   Höhe dieses Absatzes verlängert (siehe .hero-wood-date), die Collage
   darüber bleibt davon unberührt. */
.hero-wood-date {
  position: relative;
  z-index: 2;
  margin: 0;
  /* Zusätzliches Innen-Polster macht die gesamte Bühne höher (u.a. +1cm
     Tiefe), passend zur größeren --stage-width — ohne die %-positionierte
     Collage in .hero-wood-content zu berühren (deren Positionierung bezieht
     sich ausschließlich auf die Höhe von .hero-wood-content selbst, nicht
     auf .hero-wood-date). Stimmung/Location übernehmen diese Höhe 1:1 über
     --stage-height (siehe script.js), bleiben also automatisch identisch. */
  padding: 47px 20px 53px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.11rem, 3.58vw, 2.54rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #fff;
  /* Poster-Look: dünne dunkle Kontur (em-basiert, skaliert mit der
     Schriftgröße) statt reinem Weichschatten – bleibt dadurch auch bei
     kleineren Mobile-Schriftgrößen fein und lesbar. */
  -webkit-text-stroke: 0.065em var(--color-espresso);
  text-stroke: 0.065em var(--color-espresso);
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 var(--color-espresso);
  opacity: 0;
  transform: translateY(10px);
  animation: heroCaptionIn 0.7s ease-out 1.05s both;
}
.hero-wood-date-sep { display: inline; }
.hero-wood-date-break { display: none; }

/* ---------- Neues Zuhause ---------- */

/* Hero-artige Editorial-Komposition: das Location-Foto füllt nahezu die
   gesamte Sektionsbreite und bekommt großzügige Höhe, Text liegt direkt
   darüber (kein Kasten, keine Card). Ein zweiteiliger, dezenter Verlauf
   schafft Kontrast links (für den Text) und unten (für Aufzählung/Adresse),
   ohne das Bild stark abzudunkeln oder weichzuzeichnen. */
.section-home {
  position: relative;
  /* Nur der untere Abstand (Übergang zu Herz/Tickets) wird kompakter; der
     obere Sektionsabstand zum Stimmungsbereich bleibt unverändert (weiterhin
     --space-section aus der generischen .section-Regel). */
  padding-bottom: calc(var(--space-section) * 0.82);
}

/* Übergangszeile Stimmung → Location: exakt dieselbe Technik wie
   .anniversary-line zwischen Hero und Stimmung (siehe dort) — verzichtet
   auf eigenes Top-Padding, die Zeile + der Scroll-Hinweis darunter füllen
   den bestehenden Freiraum über ihre eigenen Margins. */
.section-home { padding-top: 0; }

/* Location-Foto (.home-media) soll dieselbe größere Bühnenbreite wie Hero
   und Stimmung bekommen (--stage-width statt --max-width) — dafür bekommt
   nur der .container dieser Sektion ein größeres Breiten-Budget; die
   56px sind die beiden 28px-Innenabstände von .container selbst. */
.section-home .container {
  max-width: calc(var(--stage-width) + 56px);
}

.home-container {
  position: relative;
}

.home-media {
  position: relative;
  width: 100%;
  min-height: clamp(460px, 62vw, 640px);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.home-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  /* Nur leicht beruhigt statt weichgezeichnet oder ausgewaschen: die
     Location bleibt klar als echter Raum erkennbar. */
  filter: saturate(0.86) contrast(0.95) brightness(0.99);
  /* Linke Bildkante um ca. 10% beschnitten: rechte Kante bleibt Anker,
     der Zoom wächst nach links (von overflow: hidden am .home-media
     abgeschnitten) — funktioniert unabhängig vom jeweiligen
     Seitenverhältnis der Sektion bei jeder Fensterbreite. */
  transform: scale(1.112);
  transform-origin: 100% 50%;
}
/* Links dunkler (Lesbarkeit für den Text), unten ein zweiter, separater
   Verlauf für Aufzählung/Adresse — die Bildmitte rechts bleibt frei und
   zeigt das Foto praktisch unverändert. Bewusst warmer Grünton statt
   reinem Schwarz, damit kein hartes Cinematic-Overlay entsteht. */
.home-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 28, 22, 0.62) 0%, rgba(16, 28, 22, 0.32) 38%, rgba(16, 28, 22, 0) 62%, rgba(16, 28, 22, 0.55) 100%),
    linear-gradient(100deg, rgba(16, 28, 22, 0.58) 0%, rgba(16, 28, 22, 0.36) 30%, rgba(16, 28, 22, 0.14) 48%, rgba(16, 28, 22, 0) 64%);
  pointer-events: none;
}

/* Text-Block nimmt die volle verfügbare Höhe zwischen Bildoberkante und
   Footer (Adresse) ein und zentriert Headline + Copy darin vertikal —
   statt oben gedrängt zu stehen und darunter ungenutzte Bildfläche frei
   zu lassen. Schriftgrößen von Headline und Fließtext nochmal ca. 30%
   kleiner als die vorherige, zu große Zwischenstufe. */
.home-text {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 730px;
  padding: 10px 40px 0;
  text-align: left;
}

/* Eyebrow und Copy links bekommen bewusst exakt Schriftart und -größe des
   Adressnamens unten rechts ("Hofbräu Wirtshaus Berlin") — ein einheitlicher,
   ruhiger Serif-Auftritt für den linken Text in dieser Sektion. Die Headline
   selbst bleibt davon ausgenommen: sie ist die erste Zeile und muss weiterhin
   deutlich größer/hervorgehoben wirken statt in der kleinen Fließtext-Größe
   zu verschwinden. */
.section-home .eyebrow {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.home-text .home-headline {
  color: #fff;
  font-size: clamp(2.03rem, 3.5vw, 2.52rem);
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 0.16em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.4);
}

/* Der zweite Absatz bekommt spürbar mehr Luft zum ersten, statt beide
   Absätze fast nahtlos aneinanderzureihen — der freigewordene Platz durch
   die entfernte Benefits-Zeile fließt gezielt in diesen Abstand. Schrift
   etwas größer/kräftiger als reiner Fließtext, damit der linke Text auf
   dem Foto präsenter wirkt. */
.home-text .home-copy p {
  margin: 28px 0 0;
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.4);
}
/* Eine Zeile mehr Abstand zwischen Überschrift und den beiden Absätzen. */
.home-text .home-copy p:first-child { margin-top: 34px; }
/* Zweiter Absatz zwei Zeilen tiefer als der reguläre Absatzabstand. */
.home-text .home-copy p:last-child { margin-top: calc(28px + 3.8rem); }

/* Aufzählung: reduzierte, horizontale Informationszeile statt einzelner
   Karten — sitzt am unteren Bildrand, dieselbe Ebene wie die Adresse. */
.home-media-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 0 40px 14px;
}

.home-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  max-width: 640px;
}
.home-benefits li {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.home-benefits li + li { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.4); }

/* Adresse als ruhiges typografisches Element unten rechts über dem Bild:
   kein Hintergrund, kein Rahmen, keine Card — Hierarchie über Größe,
   Gewicht und Farbe, an die helle Overlay-Zone angepasst. */
.home-address {
  display: block;
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  font-style: normal;
}

.home-address-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.4);
}

.home-address-street {
  display: block;
  margin-top: 3px;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.home-address-district {
  display: block;
  margin-top: 3px;
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.home-address-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px -4px -4px;
  padding: 4px 4px 5px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.65);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.home-address-link:hover,
.home-address-link:focus-visible {
  color: var(--color-yellow);
  border-bottom-color: var(--color-yellow);
}
.home-address-link span { transition: transform 0.15s ease; }
.home-address-link:hover span { transform: translate(1px, -1px); }

/* ---------- Termine ---------- */

/* Kein eigener Hintergrund mehr: das Rautenmuster (body) läuft bis direkt an
   den ersten Termin heran; erst die Terminliste selbst ist wieder weiß. */
.section-dates { padding: 16px 0 26px; }

/* Lebkuchenherz als dekoratives Blickfang-Element über der Terminliste —
   übernimmt die Rolle der entfernten Überschrift. Kompakt gehalten, damit
   Herz + Terminliste + Ticketinfos möglichst ohne Scrollen Platz finden. */
.dates-lebkuchen {
  display: flex;
  justify-content: center;
  margin: 0 0 4px;
}
.dates-lebkuchen img {
  display: block;
  width: clamp(165px, 18.19vw, 297px);
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.18));
}

.dates-intro {
  max-width: 820px;
  margin: 0 auto 8px;
  text-align: center;
  color: rgba(29, 25, 22, 0.78);
}

/* Gemeinsamer weißer Ticket-Container: links kompakter Terminplan (60%),
   rechts Ticketinformation/Firmenanfrage (40%) — eine ruhige Fläche statt
   mehrerer einzelner Cards, dezente vertikale Trennlinie statt Schatten. */
.dates-panel {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: auto 1fr;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: grid-template-columns 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Kleine Kopfzeile über der Terminliste: Einlass/Beginn stehen hier genau
   einmal zentral, statt bei jedem einzelnen Termin wiederholt zu werden —
   der Nutzer erfasst die Uhrzeiten einmal und vergleicht danach nur noch
   die Termine selbst. Spannt bewusst beide Spalten, damit sie klar als
   Kopf der gesamten Terminübersicht wirkt (nicht nur der linken Spalte). */
.dates-panel-header {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-cream);
}
.dates-panel-title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-green);
}
.dates-panel-times {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-espresso);
}
.dates-panel-time .lbl {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(29, 25, 22, 0.55);
}
.dates-panel-time .val { color: var(--color-espresso); }
.dates-panel-time-sep { color: rgba(29, 25, 22, 0.3); }

.dates-grid {
  grid-column: 1;
  grid-row: 2;
  list-style: none;
  margin: 0;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
}

.dates-aboutix {
  min-width: 0;
  padding: 2px 0;
}

.dates-aboutix aboutix-widget,
.dates-aboutix .aboutix-widget {
  display: block;
  width: 100%;
  max-width: none;
}

#termine .dates-aboutix .aboutix-widget:has(.aboutix-widget-event-list) {
  max-width: none;
}

/* Jeder Termin als klare, kompakte horizontale Zeile statt einer eigenen
   Card: Datum links, Status in der Mitte, CTA rechts — feine Trennlinien
   zwischen den Zeilen statt Schatten/Rundungen pro Termin. Feste dritte
   Spalte, damit alle Ticket-Buttons exakt gleich breit sind. */
.date-row {
  display: grid;
  grid-template-columns: 66px 1fr 150px;
  align-items: center;
  column-gap: 16px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.15s ease;
}
.date-row:last-child { border-bottom: none; }
.date-row:hover { background: var(--color-cream); }

.date-row.is-ausverkauft { opacity: 0.6; }

/* Datums-Chip: Wochentag klein/ruhig, Datum darunter deutlich größer und
   stärker — auf einen Blick als Termin erkennbar, ohne Kalenderoptik.
   Mittwoch und Donnerstag wechseln sich farblich dezent ab. */
.date-chip {
  display: block;
  line-height: 1.1;
  text-align: left;
}
.date-chip .dow {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-wood);
}
.date-chip.dow-mittwoch .dow { color: var(--color-green); }
.date-chip.dow-donnerstag .dow { color: var(--color-pink); }
.date-chip .ddate {
  display: block;
  margin-top: 1px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--color-espresso);
  line-height: 1.1;
}

/* Feste Spaltenbreite (siehe grid-template-columns oben): der Status bleibt
   dadurch bei jeder Statuslänge (Verfügbar / Gut gebucht / Ausverkauft)
   exakt in derselben Spalte untereinander. Grün bewusst zurückhaltend,
   damit der Status sichtbar, aber nicht stärker als der Ticket-Button ist. */
.date-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
  justify-self: start;
}
.status-verfuegbar     { color: var(--color-green); background: rgba(90, 168, 129, 0.22); }
.status-gut-gebucht    { color: #8a6400; background: rgba(242, 183, 46, 0.2); }
.status-wenige-tickets { color: var(--color-pink); background: rgba(217, 91, 123, 0.13); }
.status-ausverkauft    { color: rgba(29,25,22,0.6); background: rgba(29, 25, 22, 0.08); }

/* Gezielte, dezente Verknappungshinweise für einzelne Termine — bewusst
   im selben warmen Gelb-/Creme-Ton wie „Gut gebucht“ statt einer eigenen
   Warnfarbe, damit die Wirkung hochwertig und nicht aggressiv bleibt. */
.status-halb-verkauft,
.status-oft-ausverkauft { color: #8a6400; background: rgba(242, 183, 46, 0.2); }

/* Ticket-CTA in ruhigem, mattem Rosa (Markenfarbe) statt Verlauf/Glow —
   bewusst nur für diese Buttons in der Terminliste. Feste Spaltenbreite +
   width:100% sorgt dafür, dass alle Buttons exakt gleich breit sind und
   rechts fluchten. */
.date-row-btn {
  width: 100%;
  min-height: 40px;
  padding: 0 19px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  background: #E4A1B4;
  color: var(--color-green);
  box-shadow: none;
}
.date-row-btn:hover {
  background: #D98FA6;
  transform: translateY(-1px);
}

.date-row-btn[aria-disabled="true"] {
  background: rgba(29, 25, 22, 0.12);
  color: rgba(29, 25, 22, 0.5);
  box-shadow: none;
  pointer-events: none;
}

/* Rechte Spalte: Ticketinformation + Firmenanfrage. Füllt die volle Höhe
   des Panels (Grid-Stretch) und verteilt die drei Ticket-Karten mittig im
   verfügbaren Raum, statt oben zu kleben und unten leer zu laufen. Jede
   Ticket-Art bekommt eine eigene, dezent getönte Karte mit Marken-Akzentfarbe
   (Grün/Rosa/Gold) für bessere Lesbarkeit und schnelle Unterscheidung. */
.dates-info {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  padding: 18px 26px;
  border-left: 1px solid var(--color-border);
  background: var(--color-white);
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.32s ease;
}

.dates-info.is-away {
  transform: translateX(56px);
  opacity: 0;
  pointer-events: none;
}

.dates-panel.is-ticketshop {
  grid-template-columns: minmax(0, 1fr) 0fr;
}

.dates-panel.is-ticketshop .dates-grid {
  grid-column: 1;
}

.dates-panel.is-ticketshop .dates-aboutix {
  padding: 12px 20px 20px;
}

.dates-info-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-green);
}

.ticket-type-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: center;
  gap: 10px;
}

/* Ticket-Karten bewusst flach statt als eigene Box: mehr Wirkung über
   Typografie/Weißraum statt Schatten, da die Karten sonst als „Box in der
   Box“ auf dem ohnehin weißen Panel wirken. Nur die Early-Bird-Zeile bekommt
   eine sehr dezente Tönung, um weiterhin hervorzustechen. */
.ticket-type-card {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--color-border);
}
/* Negative Margin gleicht das seitliche Padding aus: die Zeile beginnt
   dadurch exakt an derselben Stelle wie die beiden Ticket-Zeilen darüber
   (kein zeilenversetzter Beginn mehr), nur oben/unten etwas Luft für die
   Tönung + den Badge darüber. */
.ticket-type-card--highlight {
  margin: 2px -12px 0;
  padding: 0 12px 10px;
  background: rgba(242, 183, 46, 0.08);
  border-bottom: none;
  border-radius: 10px;
}
.ticket-type-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-green);
  background: rgba(24, 63, 50, 0.08);
}
.ticket-type-card--highlight .ticket-type-icon { background: rgba(242, 183, 46, 0.28); color: #8a6400; }
.ticket-type-body h4 { margin: 0 0 2px; font-size: 0.86rem; font-weight: 700; color: var(--color-espresso); }
.ticket-type-body p { margin: 0; font-size: 0.82rem; line-height: 1.4; color: rgba(29, 25, 22, 0.72); }
.ticket-type-body strong { display: inline-block; margin-top: 2px; color: var(--color-green); }
.ticket-type-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  background: var(--color-yellow);
  color: var(--color-espresso);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dates-info-divider {
  height: 1px;
  margin: 12px 0 10px;
  background: var(--color-border);
}

.dates-info-cta { margin-top: 14px; min-height: 42px; padding: 10px 22px; font-size: 0.9rem; }

/* Alternative Reservierung per E-Mail: eigene dezente Karte, damit sie nicht
   wie ein loser Nachtrag am unteren Rand wirkt, sondern bewusst als letzter
   Baustein der Übersicht gelesen wird. */
.ticket-type-alt {
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-cream);
}
.ticket-type-alt-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-green);
}
.ticket-type-alt p { font-size: 0.82rem; margin: 0 0 6px; color: rgba(29, 25, 22, 0.72); }
.ticket-type-alt p:last-child { margin-bottom: 0; }

.ticket-type-alt-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 6px;
}

.dates-info-mail,
.dates-info-phone {
  display: inline-block;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-green);
  word-break: break-word;
}
.dates-info-mail:hover,
.dates-info-phone:hover { color: var(--color-pink); }

/* WhatsApp-Grün ist bewusst kein Website-Marken-Farbton, sondern die
   allgemein erkannte Plattformfarbe – sorgt dafür, dass der Button sofort
   als WhatsApp-Kontaktweg erkennbar ist. */
.btn-whatsapp {
  width: 100%;
  margin-top: 2px;
  min-height: 32px;
  padding: 6px 20px;
  font-size: 0.86rem;
  background: #23A75B;
  color: #fff;
}
.btn-whatsapp:hover { background: #1E9350; transform: translateY(-1px); }

.dates-info-list {
  margin: 0 0 8px;
  padding: 0 0 0 18px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(29, 25, 22, 0.75);
}
.dates-info-list li { margin: 0 0 2px; }

/* Firmenanfrage: kompakte, horizontal organisierte CTA-Einheit unterhalb des
   Terminplans statt Teil der rechten Ticket-Info-Spalte — bewusst niedrig
   und einzeilig wirkend (Überschrift + Text links, Button rechts), damit sie
   wie ein gezielter Call-to-Action wirkt statt wie ein leerer Container. */
.dates-company {
  margin-top: 10px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-align: left;
}
.dates-company-copy { min-width: 0; }
.dates-company h4 {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-green);
}
.dates-company p {
  margin: 0;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(29, 25, 22, 0.75);
}
.dates-company .dates-info-cta { flex: none; margin-top: 0; white-space: nowrap; }

/* ---------- Stimmung ---------- */

/* Die Sektion selbst bleibt ohne eigenen Hintergrund (durchgehendes
   Rautenmuster von <body>, siehe oben) — dadurch bleibt der normale
   Sektionsabstand (.section-Padding) oben/unten sichtbar als blau-weißer
   Rand zur Startseite bzw. zur nächsten Sektion. Nur ein knapp zugeschnittenes
   Holzband direkt um Überschrift + Bilder/Liste sorgt für den warmen Akzent. */
/* Reduziert (statt 0.8): der Freiraum zwischen Holzpanel und der
   „Unser neues Zuhause"-Übergangszeile darunter wird knapper, damit diese
   Zeile + Scroll-Pfeil exakt mittig im Gesamtabstand zwischen dem
   Stimmungs-Holzpanel (oben) und dem Location-Foto (unten) steht — siehe
   passende .anniversary-scroll-hint--yellow-Anpassung weiter unten, die den
   dadurch gewonnenen Freiraum unten wieder auffängt (Gesamtabstand bleibt
   gleich, nur symmetrisch verteilt). */
.section-mood { padding-bottom: calc(var(--space-section) * 0.4 - 8px); }

/* 20-Jahre-Jubiläumszeile: nutzt den bestehenden Leerraum zwischen Hero und
   dieser Sektion, statt ihn zu vergrößern. .section-mood verzichtet dafür
   auf ihr eigenes Top-Padding (siehe .section) — Zeile + Scroll-Hinweis
   darunter übernehmen diesen Freiraum über eigene Margins, die proportional
   zu --space-section skaliert sind. Gesamthöhe Hero→„Raus aus dem Büro"
   wächst dadurch nur minimal (Platz für den kleinen Pfeil). */
.section-mood { padding-top: 0; }

.anniversary-line {
  margin: calc(var(--space-section) / 2 - 10px) 0 10px;
  padding: 0 20px;
  text-align: center;
  color: var(--color-green);
}

/* Dezenter Scroll-Hinweis: reiner CSS-Chevron (kein Icon-Asset), sanft
   pulsierend, signalisiert „hier geht's weiter nach unten" ohne aufdringlich
   zu wirken. Äußerer Wrapper trägt die Bounce-Animation, der innere Pfeil
   bleibt davon unrotiert getrennt (sonst würde translateY im rotierten
   Koordinatensystem schräg statt senkrecht wirken). */
.anniversary-scroll-hint {
  display: block;
  width: 20px;
  height: 16px;
  margin: 0 auto calc(var(--space-section) / 2 - 26px);
  animation: anniversaryHintBounce 1.8s ease-in-out infinite;
}
.anniversary-scroll-hint-arrow {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto;
  border-right: 2px solid var(--color-green);
  border-bottom: 2px solid var(--color-green);
  transform: rotate(45deg);
  opacity: 0.5;
}
@keyframes anniversaryHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .anniversary-scroll-hint { animation: none; }
}

/* Gleiche Übergangszeile zwischen Stimmung und Location: Text identisch zu
   .anniversary-line, nur der Scroll-Pfeil wird hier in Markengelb statt
   Grün eingefärbt (zur Unterscheidung der beiden Übergänge). */
.anniversary-scroll-hint--yellow .anniversary-scroll-hint-arrow {
  border-right-color: var(--color-yellow);
  border-bottom-color: var(--color-yellow);
}

/* Größerer Nachlauf nur bei diesem zweiten Übergang (Stimmung → Location):
   gleicht die oben verknappte .section-mood-Padding wieder aus, damit
   „Unser neues Zuhause" + Pfeil exakt mittig zwischen Holzpanel und
   Location-Foto steht (gleicher Abstand nach oben wie nach unten). */
.anniversary-scroll-hint--yellow {
  margin-bottom: calc(var(--space-section) * 0.9 - 18px);
}

/* Vollbreites Holzband, das eng um Überschrift und Grid geschnitten ist:
   oben nur wenig Luft vor der Überschrift, unten ca. 1 cm nach den beiden
   unteren Kästchen (Foto- und Punkte-Box) — der Rest der Sektion bleibt
   Rautenmuster. Dieselbe Holztextur wie im Hero, kräftiger abgetönt, damit
   sie ruhiger wirkt als das Hero-Holz. */
.mood-wood {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: url("images/holz.jpg") center/cover;
  padding: 28px 0 38px;
}
.mood-wood::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(29, 25, 22, 0.4);
}
.mood-wood .container {
  position: relative;
  z-index: 1;
  /* Kein eigener Breiten-Deckel: der innere Inhalt soll die neue, größere
     Breite von .mood-wood (--stage-width) voll ausfüllen, statt an der
     alten, kleineren --max-width-Grenze zu enden und ungenutztes Holz an
     den Seiten übrig zu lassen. */
  max-width: none;
}

/* Mehr Schwung/CTA-Wirkung für den emotionalen Einstieg: kräftigere Type,
   der zweite Halbsatz in Marken-Gelb als spürbarer Aufruf. Cremeweiß statt
   Waldgrün, damit die Überschrift auf dem Holz gut lesbar bleibt. */
.mood-headline {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.7rem);
  letter-spacing: -0.015em;
  color: var(--color-cream);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.mood-headline .accent { color: var(--color-yellow); }

.mood-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  margin-top: 40px;
}

.mood-main { margin: 0; grid-row: 1 / 3; overflow: hidden; border-radius: var(--radius-card); }
.mood-main img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }

/* Bewusst object-fit: contain statt cover: das kleinere Foto zeigt alle drei
   Personen komplett, statt links/rechts angeschnitten zu werden — der freie
   Rand links/rechts gibt dabei den Blick auf die Holzmaserung im Hintergrund
   frei (wirkt wie ein eingerahmtes Foto), die Box selbst bleibt unverändert. */
.mood-side { margin: 0; overflow: hidden; border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.12); }
.mood-side img { width: 100%; height: 100%; object-fit: contain; min-height: 200px; }

/* ---------- Desktop-Bühnenraster: Hero / Stimmung / Location ----------
   Hero, Stimmung und Location sollen auf Desktop als drei gleich große
   „Bühnen“ wirken (identische Außenbreite über --stage-width, siehe
   .hero-wood-band/.mood-wood-Regel und .section-home .container weiter
   oben – und identische Außenhöhe). Die Höhe wird von script.js aus der
   tatsächlich gerenderten Hero-Höhe gemessen und als --stage-height an
   <html> übergeben; der Hero
   selbst bleibt dadurch vollkommen unangetastet (nur Lesezugriff). Mood und
   Location füllen diese feste Höhe über Flexbox/Grid intern aus, statt eine
   eigene Höhe zu erzwingen – dadurch passt sich die Komposition robust an
   jede Breite an, ohne Inhalte abzuschneiden. Nur ab der bestehenden
   Desktop-Breakpoint (>960px) aktiv. */
@media (min-width: 961px) {
  .mood-wood {
    height: var(--stage-height, auto);
    padding-top: 24px;
    padding-bottom: 28px;
    display: flex;
    flex-direction: column;
  }
  .mood-wood .container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .mood-headline { flex: none; }
  .mood-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 26px;
    /* Foto-Zeile bekommt mehr Anteil als die Punkte-Zeile: die Aufzählung
       füllt ihre 50%-Zeile bislang nur zu gut der Hälfte (kurze Liste,
       vertikal zentriert) — dieser ungenutzte Freiraum wandert stattdessen
       ins Brezel-Foto, das dadurch spürbar größer/prominenter wirkt, ohne
       dass die Punkte-Liste eng oder gequetscht wird. */
    grid-template-rows: 3fr 2fr;
  }
  .mood-main,
  .mood-side { height: 100%; }
  .mood-main img,
  .mood-side img { min-height: 0; }

  .home-media {
    height: var(--stage-height, auto);
    min-height: 0;
  }
}

/* Ohne Kasten direkt auf dem Holz: cremeweißer Text (wie die Überschrift)
   mit denselben gelben Punkten als Akzent, dazu ein dezenter Schatten für
   Lesbarkeit auf der Holzmaserung. */
.mood-points {
  list-style: none;
  margin: 0;
  padding: 4px 6px;
  display: grid;
  align-content: center;
  gap: 14px;
  color: var(--color-cream);
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.mood-points li { padding-left: 22px; position: relative; }
.mood-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  background: var(--color-yellow);
  border-radius: 50%;
}

/* ---------- Gruppen ---------- */

/* ---------- FAQ ---------- */

/* Etwas straffer als der Standard-Sektionsabstand: der Accordion-Inhalt ist
   von Natur aus kompakt, ein 108px-Rahmen wirkte hier wie ein sehr langer,
   gemusterter Block. kein eigener Hintergrund: durchgehendes Rautenmuster
   von <body>, siehe oben. */
.section-faq { padding: calc(var(--space-section) * 0.78) 0 calc(var(--space-section) * 0.85); }
.section-faq .display { text-align: center; margin-bottom: 32px; }

.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.16rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-espresso);
  min-height: 48px;
}

.faq-icon {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--color-green);
  transition: transform 0.2s ease;
}
.faq-icon::before { left: 0; top: 10px; width: 22px; height: 2px; }
.faq-icon::after { left: 10px; top: 0; width: 2px; height: 22px; }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: scaleY(0); }

.faq-answer { padding: 0 4px 18px; margin: 0; color: rgba(29, 25, 22, 0.8); }
.faq-answer[hidden] { display: none; }

.placeholder-note { color: var(--color-wood); font-style: italic; }

/* ---------- Footer ---------- */

/* Schlussbild: Hütten-Holzwand mit Fenster/Fernsehturm statt Flächenfarbe —
   dunkler Verlauf sorgt dafür, dass Logo/Links/Copyright über der bislang
   leeren Holzfläche gut lesbar bleiben, während rechts der Fensterausblick
   noch erkennbar durchscheint. */
/* Schließt die Seite jetzt als kleinere, gerahmte Fotokarte ab (statt
   randabschneidend über die volle Breite): 15% schmaler/niedriger, mit
   denselben abgerundeten Ecken wie die übrigen Bildmodule der Website.
   Rundherum bleibt das Rautenmuster der Seite sichtbar (siehe body-Padding
   unten). */
.site-footer {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18, 12, 7, 0.14) 0%, rgba(18, 12, 7, 0.32) 100%),
    url("images/berlin-fenster.jpg") center 20%/cover no-repeat;
  color: var(--color-cream);
  padding: 61px 0 94px;
}

.footer-inner { text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }

.footer-logo { margin: 0 auto 28px; width: 213px; }

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 30px;
}
.footer-nav a {
  color: var(--color-cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.03rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.footer-nav a:hover { border-bottom-color: var(--color-yellow); }

.footer-claim {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-yellow);
}

.footer-copy { margin: 0; font-size: 0.92rem; color: rgba(246, 241, 232, 0.6); }

/* Zweite, sehr zurückhaltende 20-Jahre-Erwähnung: bewusst kleiner und
   blasser als .footer-copy selbst, damit sie klar sekundär gegenüber
   Navigation/Copyright bleibt. */
.footer-anniversary {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: rgba(246, 241, 232, 0.45);
}

/* Instagram/Facebook: letztes Element im Footer, aber in den jeweiligen
   Markenfarben (Instagram-Gradient / Facebook-Blau) und entsprechend größer,
   damit sie als Logos erkennbar sind statt nur als dezente Kontur-Icons. */
.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
  opacity: 1;
  transform: translateY(-1px) scale(1.06);
}

/* ---------- Sticky-CTA (Mobile) ---------- */

.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(246, 241, 232, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0s;
}
.sticky-cta .btn { width: 100%; }

.sticky-cta.is-over-termine {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.28s ease, opacity 0.22s ease, visibility 0s linear 0.28s;
}

/* ---------- Rechtsseiten ---------- */

.legal-page { padding: 72px 0 var(--space-section); }
.legal-page h1 { font-family: var(--font-display); font-weight: 400; color: var(--color-green); }
.legal-page .back-link {
  display: inline-block;
  margin-bottom: 28px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- 404 ---------- */

.error-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 60px 28px;
}
.error-page h1 { font-family: var(--font-display); font-weight: 400; color: var(--color-green); font-size: clamp(2rem, 5vw, 3rem); }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1200px) {
  :root { --space-section: 96px; }
}

@media (max-width: 960px) {
  :root { --space-section: 84px; --space-section-s: 68px; }

  .main-nav, .header-cta { display: none; }
  .header-inner .lang-switch { display: none; }
  .burger { display: flex; margin-left: auto; }

  /* Mobil: Logo bleibt Fluss-Element (bestimmt die Höhe der Bühne) und rahmt
     die Foto-Collage links darunter — die Textzeile oben und das Männchen
     rechts liegen als transparentes PNG über den Fotos. */
  .hero-wood-band {
    position: relative;
  }
  .hero-wood-content {
    position: relative;
    padding: 26px 16px 24px;
  }
  .hero-logo {
    position: relative;
    z-index: 2;
    width: min(480px, 96%);
    margin: 0 auto;
    display: block;
    animation: heroLogoPopMobile 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
  }
  .hero-lebkuchen {
    left: 10%;
    top: 64%;
    width: min(90px, 18.9%);
    z-index: 4;
  }
  .hero-badge {
    display: none;
  }
  .hero-wood-photo-wrap {
    left: 10%;
    top: 46%;
    width: min(230px, 48%);
    height: auto;
    aspect-ratio: 700 / 451;
  }
  .hero-wood-date {
    padding: 5px 20px 15px;
    font-size: clamp(1.76rem, 4.64vw, 2.05rem);
  }
  .hero-wood-date-sep { display: none; }
  .hero-wood-date-break { display: inline; }

  /* Mobile Terminzeile: Datum + Status kompakt in einer Zeile (eine
     zusammengehörige Einheit statt weit auseinandergezogener Elemente),
     Ticket-Button darunter über die volle Breite. */
  .date-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "chip status" "btn btn";
    row-gap: 10px;
    column-gap: 12px;
  }
  .date-chip { grid-area: chip; }
  .date-status { grid-area: status; justify-self: end; align-self: center; }
  .date-row-btn { grid-area: btn; width: 100%; margin-top: 2px; }

  /* Kopfzeile über der Terminliste: Label und Uhrzeiten untereinander statt
     nebeneinander, damit auf schmalen Screens nichts umbricht/quetscht. */
  .dates-panel-header { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Einspaltig: Terminplan zuerst, Ticketinfo/Firmenanfrage darunter,
     Trennlinie wandert von links nach oben. */
  .dates-panel { grid-template-columns: 1fr; }
  .dates-panel.is-ticketshop { grid-template-columns: 1fr; }
  .dates-grid { grid-column: 1; grid-row: 2; }
  .dates-info { grid-column: 1; grid-row: 3; border-left: none; border-top: 1px solid var(--color-border); }

  .dates-company { flex-direction: column; text-align: center; }
  .dates-company-copy { text-align: center; }
  .dates-company .dates-info-cta { width: 100%; }

  /* Neues Zuhause auf Mobile: Text NICHT über dem Bild — feste Reihenfolge
     Eyebrow/Headline/Text → großes Bild → Aufzählung → Adresse, jeweils in
     normaler Textfarbe auf dem Seitenhintergrund statt als Overlay. */
  .home-media {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    border-radius: var(--radius-card-s, var(--radius-card));
  }
  .home-media-shade { display: none; }

  .home-text {
    order: 1;
    position: static;
    z-index: auto;
    flex: none;
    display: block;
    max-width: none;
    padding: 0 0 22px;
  }
  .home-text .home-headline {
    color: var(--color-green);
    /* Die größere Desktop-Schrift (Overlay auf dem Bild) passt nicht auf
       die schmale Mobile-Spalte — hier bleibt die bisherige, kompaktere
       Mobile-Größe erhalten. */
    font-size: clamp(1.7rem, 6.4vw, 2.15rem);
    text-shadow: none;
  }
  .home-text .home-copy p {
    max-width: none;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.58;
    color: rgba(29, 25, 22, 0.85);
    text-shadow: none;
  }

  .home-media img {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    filter: saturate(0.9) contrast(0.96) brightness(1);
    /* Auf Mobile ungeschnitten: hier ist das Bild ein normales Fluss-Element
       ohne object-fit-Box, der Rechts-Zoom vom Desktop entfällt daher. */
    transform: none;
  }

  .home-media-footer {
    order: 3;
    position: static;
    z-index: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 0 0;
  }

  .home-benefits { max-width: none; }
  .home-benefits li {
    color: var(--color-espresso);
    text-shadow: none;
  }
  .home-benefits li + li { border-left-color: var(--color-border); }

  .home-address {
    margin-left: 0;
    text-align: left;
  }
  .home-address-name { color: var(--color-green); text-shadow: none; }
  .home-address-street { color: rgba(29, 25, 22, 0.78); text-shadow: none; }
  .home-address-district { color: var(--color-wood); text-shadow: none; }
  .home-address-link {
    color: var(--color-green);
    text-shadow: none;
    border-bottom-color: rgba(24, 63, 50, 0.35);
  }
  .home-address-link:hover,
  .home-address-link:focus-visible {
    color: var(--color-pink);
    border-bottom-color: var(--color-pink);
  }

  .mood-grid { grid-template-columns: 1fr; }
  .mood-main { grid-row: auto; }
}

@media (max-width: 720px) {
  :root { --space-section: 60px; --space-section-s: 52px; }

  body { font-size: 16px; }

  .sticky-cta { display: block; }
  .site-footer { padding-bottom: 140px; }

  .hero-wood-band {
    position: relative;
  }
  .hero-wood-content {
    position: relative;
    padding: 22px 14px 22px;
  }
  .hero-logo {
    position: relative;
    width: min(340px, 96%);
    margin: 0 auto;
  }
  .hero-lebkuchen {
    left: 10%;
    top: 64%;
    width: min(67.5px, 19.8%);
    z-index: 4;
  }
  .hero-wood-photo-wrap {
    left: 10%;
    top: 46%;
    width: min(170px, 50%);
    height: auto;
    aspect-ratio: 700 / 451;
  }
  .hero-wood-date {
    /* Weniger seitliches Padding als vorher: das Holzband ist jetzt selbst
       schmaler (Rand für das Rautenmuster), die Datumszeile braucht die
       Breite, um weiterhin in zwei Zeilen umzubrechen. */
    padding: 3px 6px 15px;
    font-size: clamp(1.6rem, 6.72vw, 1.89rem);
  }

  .date-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "chip status" "btn btn";
    row-gap: 10px;
    column-gap: 12px;
    padding: 14px 16px;
  }
  .date-chip { grid-area: chip; }
  .date-status { grid-area: status; justify-self: end; align-self: center; }
  .date-row-btn { grid-area: btn; width: 100%; margin-top: 2px; min-height: 44px; }

  .dates-panel-header { padding: 12px 16px; }
  .dates-info { padding: 22px 20px; }
  .dates-company { padding: 22px 20px; }
}

@media (max-width: 480px) {
  .container, .header-inner { padding-left: 20px; padding-right: 20px; }
  .date-date { font-size: 1.5rem; }
  .dates-panel-times { font-size: 0.78rem; }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero-wood-photo-wrap { opacity: 1; transform: scale(1.15); }
  .hero-lebkuchen { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1.15); }
  .hero-logo { opacity: 1; transform: translateX(10%); }
}

@media (prefers-reduced-motion: reduce) and (max-width: 960px) {
  .hero-logo { transform: none; }
}