/* ============================================================
   GERACH EVENT · Emotionen erleben
   Theme: dunkles Grau, gesperrt (Marken-Entscheidung: Festivalnacht).
   Formsystem: durchgehend scharfkantig, keine Radien.
   Akzent: ein Grün (#3d7b2f, CI), sonst neutral.
   ============================================================ */

@font-face{
  font-family:"Anton";
  src:url("../assets/fonts/anton-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --ink:#1a1d1e;          /* Seitengrund, dunkles Neutralgrau */
  --ink-2:#24282a;        /* angehobene Fläche */
  --paper:#f2f3ef;        /* Text, off-white */
  --mute:rgba(242,243,239,.6);
  --line:rgba(242,243,239,.16);
  /* CI-Grün exakt nach Vorgabe (#3d7b2f). Für Flächen: Buttons, Tor,
     Balken. Auf Weiß trägt es Text, auf Dunkelgrund ist es mit 3,7:1
     zu schwach dafür, deshalb --green-txt: gleicher Farbton (106°),
     nur aufgehellt, damit kleine Schrift lesbar bleibt. */
  --green:#3d7b2f;        /* CI-Grün, Logo-Original */
  --green-txt:#59aa41;    /* aufgehellt, ausschließlich für Text auf Dunkelgrund */
  --display:"Anton",Impact,sans-serif;
  --body:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --pad:clamp(1.25rem,4vw,4rem);
  --section:clamp(6rem,11vw,10rem);
  /* Starke Kurven statt CSS-Defaults (animations.dev) */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
::selection{background:var(--green);color:#fff}
@media (min-width:861px){
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:var(--ink)}
  ::-webkit-scrollbar-thumb{background:#33383a;border:2px solid var(--ink)}
  ::-webkit-scrollbar-thumb:hover{background:var(--green)}
}
/* Feines Korn über allem: fixiert, ohne Pointer-Events, kein Repaint-Kostenfaktor */
body::after{
  content:"";position:fixed;inset:0;z-index:65;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Lesefortschritt ganz oben */
.pagebar{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;pointer-events:none}
.pagebar i{display:block;height:100%;width:100%;background:var(--green);
  transform:scaleX(0);transform-origin:left}

/* ============================================================
   AMBIENTE
   Gegen den harten Schnitt zwischen kräftigen Fotos und totem
   Schwarz: Sektionen bekommen Lichtstimmung. Farbe blutet aus
   den Bildern in den Grund, statt an der Bildkante zu enden.
   ============================================================ */
/* overflow:clip haelt Waesche und Lichtkegel in ihrer Sektion. Vorher ragte
   die Waesche mit inset:-14% bei den hohen Sektionen mehrere hundert Pixel
   in die Nachbarn und legte einen grauen Schleier ueber Kacheln, Text und
   Grund (gemessen: Partner-Grund 54,60,60 statt 26,29,30). Die Rand-
   verlaeufe unten decken die geklemmte Kante ab. */
.amb{position:relative;isolation:isolate;overflow:clip}
/* Farbwäsche: stark geblurrter Ausschnitt des Sektionsbildes. */
.amb__wash{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-size:cover;background-position:center;
  filter:blur(90px) saturate(1.5) brightness(.42);
  opacity:.5;
}
/* Grüner Lichtkegel hinter Überschriften. Liegt unter den Randverlaeufen
   (-1), damit an der geklemmten Sektionskante keine harte Linie steht. */
.amb__glow{
  position:absolute;z-index:-2;pointer-events:none;
  width:min(70vw,900px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(61,123,47,.30) 0%,rgba(61,123,47,.10) 42%,transparent 70%);
}
.amb__glow--tl{top:-18%;left:0}
.amb__glow--tr{top:-22%;right:0}
.amb__glow--br{bottom:-24%;right:0}
/* Weiche Auflösung: Sektionen gehen ineinander über statt zu stoßen */
.amb::before,.amb::after{
  content:"";position:absolute;left:0;right:0;height:170px;z-index:-1;pointer-events:none;
}
.amb::before{top:0;background:linear-gradient(to bottom,var(--ink),transparent)}
.amb::after{bottom:0;background:linear-gradient(to top,var(--ink),transparent)}

/* Bilder lösen sich nach unten in den Grund auf statt hart zu enden */
.fade-b{-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
        mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------- Typo-Bausteine ---------- */
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,7vw,5.5rem);
  line-height:.95;letter-spacing:.01em;
  text-transform:uppercase;
}
.h2 b,.hero__claim b,.footer__claim b{color:var(--green-txt);font-weight:inherit}
.kicker{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-txt);font-weight:600;margin-bottom:1.1rem;
}
.ico{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.18em}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:.85rem 1.9rem;
  font-weight:700;font-size:.95rem;letter-spacing:.04em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--ease-out),background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn--solid{background:var(--green);color:var(--paper)}
.btn--solid:hover{background:#4a9639}
.btn--ghost{border-color:var(--line);color:var(--paper)}
.btn--ghost:hover{border-color:var(--green-txt);color:var(--green-txt)}
.qa summary{transition:color .18s ease}
.qa summary:hover{color:var(--green-txt)}

/* ============================================================
   NAV
   ============================================================ */
/* Schwebende Glaspille, vom oberen Rand abgehoben (Terminal-Referenz,
   aber durchgehend oval statt abgerundetem Rechteck) */
.nav{
  position:fixed;inset:22px 0 auto 0;z-index:40;
  display:flex;justify-content:center;padding:0 var(--pad);
  pointer-events:none;
  transition:transform .45s var(--ease-out),opacity .3s var(--ease-out);
}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}
/* Liquid Glass: nahezu klar. Keine Graufüllung, nur ein Hauch Weiß,
   dafür Sättigung und Helligkeit im Backdrop plus ein Lichtrand,
   der die Kante brechen lässt. Echte Refraktion kann CSS nicht,
   der Randlichter-Trick trägt den Eindruck. */
.nav__pill{
  pointer-events:auto;position:relative;isolation:isolate;
  display:flex;align-items:center;gap:clamp(.75rem,1.8vw,1.6rem);
  height:60px;padding:0 8px 0 22px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px) saturate(1.9) brightness(1.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.9) brightness(1.14);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(255,255,255,.22),
    inset 1px 0 1px rgba(255,255,255,.28),
    inset -1px 0 1px rgba(255,255,255,.28),
    0 8px 32px rgba(0,0,0,.22);
  transition:background .35s ease,box-shadow .35s ease;
}
/* Lichtreflex folgt dem Zeiger über die ganze Leiste */
.nav__pill::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.16),transparent 70%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.nav__pill:hover::after{opacity:1}
.nav.is-scrolled .nav__pill{
  background:rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.6),
    inset 0 -1px 1px rgba(255,255,255,.25),
    inset 1px 0 1px rgba(255,255,255,.3),
    inset -1px 0 1px rgba(255,255,255,.3),
    0 12px 40px rgba(0,0,0,.34);
}
/* Gleitender Glas-Indikator: wandert weich von Link zu Link */
.nav__glide{
  position:absolute;top:50%;left:0;height:38px;width:0;
  transform:translate(var(--x,0px),-50%) scaleX(var(--sx,1));
  border-radius:999px;pointer-events:none;z-index:-1;opacity:0;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -1px 1px rgba(255,255,255,.2);
  transition:transform .42s var(--ease-out),width .42s var(--ease-out),opacity .3s ease;
}
.nav__pill.glide-on .nav__glide{opacity:1}
.nav__brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.nav__mark{width:20px;height:22px;color:var(--paper)}
.nav__word{font-family:var(--display);font-size:1rem;letter-spacing:.06em;white-space:nowrap}
.nav__word em{font-style:normal;color:var(--green-txt);margin-left:.35em}
.nav__links{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
.nav__links>a:not(.btn){
  position:relative;font-size:.95rem;font-weight:600;
  color:rgba(242,243,239,.82);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  padding:.5rem .8rem;border-radius:999px;
  transition:color .2s ease;
}
.nav__links>a:not(.btn):hover{color:#fff}
/* ------------------------------------------------------------
   AUFKLAPPMENUE "EVENTS"
   Der Auslöser ist ein <button>, kein Link: er springt nirgendwohin,
   er klappt auf. Der Sprung zur Eventsektion steht als erster
   Eintrag im Panel, damit er nicht verlorengeht.
   ------------------------------------------------------------ */
.drop{position:relative;display:inline-flex}
.drop__btn{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:inherit;font-size:.95rem;font-weight:600;
  color:rgba(242,243,239,.82);text-shadow:0 1px 10px rgba(0,0,0,.5);
  padding:.5rem .8rem;border:0;border-radius:999px;background:none;cursor:pointer;
  transition:color .2s ease;
}
.drop__btn:hover{color:#fff}
.drop__chev{width:15px;height:15px;transition:transform .25s var(--ease-out)}
.drop__btn[aria-expanded="true"] .drop__chev{transform:rotate(180deg)}

.drop__panel{
  position:absolute;top:calc(100% + 20px);left:50%;z-index:10;
  min-width:270px;padding:.5rem;
  display:grid;gap:2px;
  /* Volldeckend, kein Glas. Das Panel haengt in einem Element mit
     backdrop-filter (Nav-Pille bzw. Unterseiten-Leiste), und ein
     Backdrop-Filter im Backdrop-Filter laesst in Chrome den Grund
     durchscheinen - der Seitentitel stand lesbar hinter dem Menue. */
  background:#15191a;
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  /* visibility, nicht nur opacity: sonst bleiben die sechs Links im
     geschlossenen Menue mit der Tabtaste erreichbar und der Fokus
     springt in ein unsichtbares Feld. Die Verzoegerung sorgt dafuer,
     dass die Ausblendblende noch zu sehen ist, bevor es verschwindet. */
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-8px);
  transition:opacity .2s ease,transform .24s var(--ease-out),visibility 0s linear .24s;
}
.drop__panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
.drop__panel a{
  display:grid;gap:.1rem;padding:.6rem .8rem;border-radius:9px;
  color:var(--paper);transition:background .18s ease;
}
.drop__panel a:hover{background:rgba(255,255,255,.08)}
.drop__day{color:var(--green-txt);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.drop__name{font-size:.98rem;font-weight:600;line-height:1.2}
.drop__all{font-size:.92rem;font-weight:600;color:var(--mute) !important;border-bottom:1px solid var(--line);border-radius:9px 9px 0 0}
.drop__all:hover{color:var(--paper) !important}
/* Public Viewing gehoert dazu, ist aber kein Festival Day - deshalb abgesetzt. */
.drop__pv{margin-top:2px;border-top:1px solid var(--line);border-radius:0 0 9px 9px}

.nav__cta{flex:0 0 auto;padding:.72rem 1.5rem;border-radius:999px;font-size:.9rem}
.nav__burger{display:none}

@media (max-width:860px){
  .nav{inset:14px 0 auto 0}
  .nav__pill{width:100%;height:56px;padding:0 8px 0 18px;justify-content:space-between}
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{
    display:block;position:relative;z-index:41;flex:0 0 auto;
    width:44px;height:44px;background:none;border:0;cursor:pointer;
  }
  .nav__burger span{
    position:absolute;left:10px;right:10px;height:2px;background:var(--paper);
    transition:transform .25s ease,opacity .25s ease;
  }
  .nav__burger span:nth-child(1){top:17px}
  .nav__burger span:nth-child(2){bottom:17px}
  .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
  .nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
}

/* ------------------------------------------------------------
   MOBILES MENUE
   Eigenes Element am Body, nicht in der Nav-Pille: die Pille hat
   backdrop-filter und wuerde als Bezugsrahmen fuer position:fixed
   dienen. Deshalb liegt das Overlay hier frei und inset:0 meint
   wieder wirklich den Viewport. 100dvh statt 100vh, damit die
   Adressleiste von Mobile Safari nichts abschneidet.
   ------------------------------------------------------------ */
.navmenu{display:none}
@media (max-width:860px){
  .navmenu{
    display:flex;position:fixed;inset:0;z-index:39;
    flex-direction:column;align-items:center;justify-content:flex-start;gap:1.5rem;
    height:100dvh;overflow-y:auto;
    /* Oben bleibt die Nav-Leiste frei, sonst laeuft der erste Punkt
       dahinter, sobald das Events-Menue aufgeklappt ist und der Inhalt
       waechst. */
    padding:clamp(88px,13vh,120px) 1.25rem 2.5rem;
    background:rgba(10,12,11,.94);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .22s ease,visibility 0s linear .22s;
  }
  .navmenu.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  /* Zentriert, solange Platz ist; bei aufgeklapptem Untermenue scrollt es
     stattdessen sauber, statt oben abgeschnitten zu werden. Mit
     justify-content:center wuerde genau das passieren. */
  .navmenu>*:first-child{margin-top:auto}
  .navmenu>*:last-child{margin-bottom:auto}
  .navmenu>a:not(.btn){font-family:var(--display);font-size:2rem;color:var(--paper)}
  /* Menuepunkte laufen gestaffelt ein (40ms-Kaskade) */
  .navmenu>a{
    opacity:0;transform:translateY(14px);
    transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
  }
  .navmenu.is-open>a{opacity:1;transform:none}
  .navmenu.is-open>a:nth-child(1){transition-delay:.02s}
  .navmenu.is-open>a:nth-child(2){transition-delay:.06s}
  .navmenu.is-open>a:nth-child(3){transition-delay:.10s}
  .navmenu.is-open>a:nth-child(4){transition-delay:.14s}
  .navmenu.is-open>a:nth-child(5){transition-delay:.18s}
  /* Mobil klappt das Menue im Fluss auf statt zu schweben: ein
     schwebendes Panel wuerde im Vollbildmenue ueber den anderen
     Punkten liegen und man verliert die Orientierung. */
  .drop--m{display:grid;justify-items:center;width:100%}
  .drop--m .drop__btn{font-family:var(--display);font-size:2rem;color:var(--paper);gap:.5rem}
  .drop--m .drop__chev{width:22px;height:22px}
  .drop--m .drop__panel{
    position:static;transform:none;opacity:1;pointer-events:auto;
    min-width:0;width:min(320px,86vw);margin-top:.9rem;
    background:rgba(255,255,255,.05);box-shadow:none;
    display:none;
  }
  .drop--m .drop__panel.is-open{display:grid;transform:none}
  .drop--m .drop__name{font-size:1.05rem}
  .navmenu__cta{margin-top:.6rem;padding:.9rem 2.2rem;font-size:1rem}
  /* Solange das Menue offen ist, scrollt die Seite darunter nicht mit. */
  body.menu-open{overflow:hidden}
}

/* ============================================================
   HERO · Scroll-Film v2
   Laufweg 400vh, Phasen: Claim-Exit -> Film -> Slow-Mo-Plateau
   mit Panel -> Sturzflug -> Logo -> Vorhang (Sponsoren).
   Zeit-Mapping und Choreografie in js/main.js (segmentInOut).
   ============================================================ */
.hero{position:relative;height:320vh}
@media (max-width:860px){.hero{height:290vh}}
/* z-index 2: Die Bühne liegt über dem Manifest, das per negativem
   Randabstand unter sie geschoben ist (siehe .manifest). Ohne das
   würde das Manifest den Film schon während des Heros überdecken. */
.hero__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink);z-index:2}
/* Nach dem Hero gibt die Bühne die Fläche frei, damit das grüne Loch
   auf das Manifest öffnet und nicht auf das stehengebliebene Logo.
   Umgeschaltet wird, während das Grün voll deckt: unsichtbar. */
.hero.is-spent .hero__stage{opacity:0}
.hero__bgblur{display:none}
/* Film randlos bis an alle Kanten */
.hero__film{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero__video,.hero__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__poster{z-index:2;will-change:opacity}
.hero__video{z-index:1}
.hero__scrim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 42%,transparent 52%,rgba(8,10,9,.5) 100%),
    linear-gradient(to bottom,rgba(8,10,9,.42) 0%,transparent 30%,transparent 60%,rgba(8,10,9,.66) 100%);
}
/* Titel-Bühne: zentriert, dezenter gesetzt, unteres Drittel */
.hero__intro{
  position:absolute;z-index:4;left:var(--pad);right:var(--pad);
  bottom:clamp(9vh,13vh,17vh);text-align:center;
  will-change:opacity;pointer-events:none;
}
.hero__claim{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,7.6vw,6.4rem);line-height:.94;letter-spacing:.012em;
  text-shadow:0 4px 50px rgba(0,0,0,.55);
  will-change:transform,opacity;
}
.hero__claim .line{display:block;overflow:hidden}
.hero__claim .line i{display:block;font-style:normal}
.hero__sub{
  margin:1.6rem auto 0;max-width:46ch;
  font-size:clamp(.95rem,1.5vw,1.1rem);color:rgba(242,243,239,.88);
  text-shadow:0 2px 24px rgba(0,0,0,.6);
  will-change:transform,opacity;
}
/* Plateau-Panel: erscheint mitten im Flug auf dem Feuerwerks-Peak */
.hero__panel{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  text-align:center;opacity:0;pointer-events:none;
  will-change:opacity,transform;padding:0 var(--pad);
}
.hero__panel-line{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,7.5vw,6rem);line-height:.95;color:var(--paper);
  text-shadow:0 6px 50px rgba(0,0,0,.65);
}
.hero__panel b{color:var(--green-txt);font-weight:inherit}
.is-static .hero__panel{display:none}
/* Logo-Bühne: vier Bänder, gestapelt ergeben sie das exakte Logo.
   Die Gruppe zoomt am Ende ins grüne Dreieck (transform-origin per JS). */
.hero__logo{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  pointer-events:none;
}
.hero__logo-group{
  width:clamp(240px,30vw,400px);
  will-change:transform;
}
.hero__logo-group .lg{
  display:block;width:100%;opacity:0;
  will-change:transform,opacity;
}
/* Grünes Tor: seitenweit fixiert. Flutet am Ende des Dreieck-Zooms
   den Screen und öffnet sich dann als Loch aus der Mitte, sodass die
   Manifest-Sektion daraus hervortritt. Liegt unter der Navigation. */
.greengate{
  position:fixed;inset:0;z-index:38;background:var(--green);
  opacity:0;pointer-events:none;will-change:opacity,mask-image;
  --r:0%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1.5%));
  mask-image:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1.5%));
}
.is-static .greengate{display:none}
@media (prefers-reduced-motion:reduce){.greengate{display:none}}
/* Solange Grün den Screen füllt, wird die grüne Ticketpille unsichtbar */
.nav.on-green .nav__cta{background:var(--ink);color:var(--paper)}

/* Über der hellen Partnerwand: Glas und Schrift umkehren, sonst
   steht weiße Schrift auf Weiß. Kontrast geht vor Effekt. */
.nav.on-light .nav__pill{
  background:rgba(13,15,14,.055);
  box-shadow:
    inset 0 1px 1px rgba(13,15,14,.16),
    inset 0 -1px 1px rgba(13,15,14,.07),
    inset 1px 0 1px rgba(13,15,14,.09),
    inset -1px 0 1px rgba(13,15,14,.09),
    0 8px 26px rgba(13,15,14,.14);
}
.nav.on-light .nav__word,
.nav.on-light .nav__mark{color:var(--ink)}
.nav.on-light .nav__links>a:not(.btn){
  color:rgba(13,15,14,.72);text-shadow:none;
}
.nav.on-light .nav__links>a:not(.btn):hover{color:var(--ink)}
.nav.on-light .nav__glide{
  background:rgba(13,15,14,.07);
  box-shadow:inset 0 1px 1px rgba(13,15,14,.14),inset 0 -1px 1px rgba(13,15,14,.06);
}
.nav.on-light .nav__burger span{background:var(--ink)}
/* Abdunkler: blendet den Film am Ende nach Schwarz */
.hero__dim{
  position:absolute;inset:0;z-index:4;background:#0a0c0b;
  opacity:0;pointer-events:none;will-change:opacity;
}

/* ============================================================
   SPONSOREN-BANDEROLE
   Nur die durchlaufende Leiste. Heller Grund, weil Firmenlogos
   für Weiß gebaut sind und ihre Originalfarben auf Schwarz
   zerfallen. Einziger Hell-Umbruch der Seite.
   ============================================================ */
.sponsors{
  position:relative;z-index:6;
  background:var(--paper);color:var(--ink);
  padding:clamp(2rem,3.6vw,3rem) 0;
}
/* Die dunkle Seite läuft oben und unten in das Band aus */
.sponsors::before,.sponsors::after{
  content:"";position:absolute;left:0;right:0;height:38px;
  pointer-events:none;opacity:.1;z-index:2;
}
.sponsors::before{top:0;background:linear-gradient(to bottom,var(--ink),transparent)}
.sponsors::after{bottom:0;background:linear-gradient(to top,var(--ink),transparent)}

.lg{
  display:flex;align-items:center;flex:0 0 auto;
  transition:transform .25s var(--ease-out),opacity .25s var(--ease-out);
}
.lg:hover{transform:translateY(-2px)}
.lg img{display:block;height:40px;width:auto}
.sponsors .lg img{height:clamp(58px,6vw,86px)}
/* Wortmarke als vollwertiger Logo-Ersatz, kein Platzhalterkasten */
.lg__type{
  font-family:var(--display);font-weight:400;
  font-size:1.45rem;letter-spacing:.02em;line-height:1;
  color:var(--ink);white-space:nowrap;
}
.lg__type em{font-style:normal;color:rgba(13,15,14,.55)}

.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{
  display:flex;width:max-content;
  animation:marquee var(--marquee-dur,34s) linear infinite;
}
.marquee__group{
  display:flex;align-items:center;gap:clamp(3rem,7vw,7rem);
  padding-right:clamp(3rem,7vw,7rem);
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(var(--group-w,50%) * -1))}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;width:auto}
  .marquee__group{flex-wrap:wrap;justify-content:center}
  .marquee__group[aria-hidden="true"]{display:none}
}
.is-static .marquee__track{animation:none;width:auto}
.is-static .marquee__group{flex-wrap:wrap;justify-content:center}
.is-static .marquee__group[aria-hidden="true"]{display:none}
@media (max-width:700px){
  .lg__type{font-size:1.2rem}
}

/* ============================================================
   MANIFEST + ZAHLEN
   ============================================================ */
/* ============================================================
   MANIFEST · Variante B: die Zahl ist die Bühne
   Bild scheint durch die Ziffern, alles andere ordnet sich unter.
   ============================================================ */
.manifest{
  position:relative;overflow:clip;min-height:100svh;
  display:grid;place-items:center;padding:var(--section) var(--pad);
  /* EIGENER STAPELKONTEXT (z-index statt auto) ist Pflicht, nicht Kosmetik:
     Ohne ihn konkurriert das Kind .manifest__inner (z-index 2) direkt mit
     .hero__stage (z-index 2) - und gewinnt als späteres DOM-Element. Dann
     zeichnen Trennlinie und Textblock des Manifests sichtbar über den
     laufenden Hero-Film. Mit z-index 1 hängt die ganze Sektion samt Kindern
     geschlossen unter der Bühne. */
  z-index:1;
  /* NEGATIVER RANDABSTAND = der eigentliche Trick der Übergabe.
     Die Hero-Bühne ist sticky und gibt ihr Sticky auf, sobald die
     Hero-Unterkante den Viewport-Unterrand erreicht. Bis die nächste
     Sektion oben ansteht, vergeht danach strukturbedingt IMMER genau
     eine Bildschirmhöhe - egal wie hoch der Hero ist. Genau dort lag
     früher eine tote Bildschirmhöhe Vollgrün.
     Um 100svh hochgezogen fallen beide Punkte exakt zusammen: Das
     Manifest steht bildschirmfüllend oben, GENAU wenn der Film endet.
     Erst dadurch kann das grüne Loch auf die Sektion öffnen statt auf
     die noch sichtbare Hero-Bühne. Die Bühne liegt per z-index 2
     darüber und wird danach ausgeblendet. */
  margin-top:-100svh;
}
/* Oben BÜNDIG (0): das ist das Maximum an Kopffreiheit, weiter oben
   existiert kein Bildmaterial mehr. Der gesamte Überstand liegt
   unten, wo nur Bühne und Publikum wegfallen. Wichtig: Der Parallax
   darf sich von hier aus nur NACH OBEN bewegen, sonst reißt oben
   eine Lücke auf (siehe manifestParallax in main.js). */
.manifest__bg{position:absolute;inset:0 0 -21% 0;z-index:0}
.manifest__bg img,.manifest__bg video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.4;will-change:transform;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 52%,#000 24%,transparent 72%);
  mask-image:radial-gradient(115% 85% at 50% 52%,#000 24%,transparent 72%);
}
.manifest__bg video{z-index:1;opacity:0;transition:opacity .5s ease}
/* Sobald der Clip sein erstes Bild gemalt hat, übernimmt er vom Standbild */
.manifest__bg.fog-ready video{opacity:.4}
.manifest__bg.fog-ready img{opacity:0}
.is-static .manifest__bg video{display:none}
@media (prefers-reduced-motion:reduce){.manifest__bg video{display:none}}
.manifest::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(70% 60% at 50% 48%,rgba(74,166,63,.15),transparent 68%),
    linear-gradient(to bottom,var(--ink),transparent 16%,transparent 70%,var(--ink));
}
.manifest__inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;text-align:center}
.manifest__eyebrow{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.08em;font-size:clamp(1.05rem,2.3vw,1.9rem);
  color:rgba(242,243,239,.92);text-shadow:0 3px 26px rgba(0,0,0,.6);
}
.manifest__eyebrow b{color:var(--green-txt);font-weight:inherit}
.manifest__hero{
  font-family:var(--display);font-size:clamp(6rem,22vw,19rem);line-height:.8;
  letter-spacing:-.01em;margin:.45rem 0 .25rem;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,rgba(242,243,239,.42) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.manifest__heroLabel{
  font-size:clamp(.9rem,1.5vw,1.12rem);color:var(--green-txt);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
/* Datum als eigene, ruhigere Zeile unter dem Claim (Kundenwunsch) */
.manifest__heroDate{
  margin-top:.55rem;font-size:clamp(.82rem,1.3vw,1rem);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(242,243,239,.75);
}
/* Vierte Kachel traegt nur die Zahl, ohne Unterzeile. Ausgleich, damit sie
   auf der gleichen Grundlinie sitzt wie die drei mit Beschreibung. */
.manifest__solo dt{padding-bottom:calc(.3rem + 1.2em)}
.manifest__rest{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(1.4rem,5vw,4.5rem);
  margin:clamp(2.2rem,5vw,4rem) auto 0;padding-top:1.8rem;
  border-top:1px solid rgba(242,243,239,.14);max-width:820px;
}
.manifest__rest div{text-align:center}
.manifest__rest dt{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,2.2rem);line-height:1}
.manifest__rest dd{margin:.3rem 0 0;font-size:.82rem;color:var(--mute)}

/* ============================================================
   ZWEI WELTEN
   ============================================================ */
.worlds{display:flex;min-height:88vh;border-top:1px solid var(--line)}
.world{
  position:relative;flex:1;overflow:hidden;display:flex;align-items:flex-end;
  transition:flex .55s cubic-bezier(.22,.8,.24,1);
}
@media (hover:hover){.worlds:has(.world:hover) .world:hover{flex:1.9}}
.world__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.8,.24,1);
}
.world:hover .world__img{transform:scale(1.05)}
.world__veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,10,9,.86) 0%,rgba(8,10,9,.28) 45%,rgba(8,10,9,.12) 100%);
  transition:background .4s ease;
}
.world__body{position:relative;padding:clamp(1.5rem,3.5vw,3.5rem);max-width:34rem}
.world__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,7vw,6.5rem);line-height:1;letter-spacing:.01em;
}
.world__line{margin-top:.8rem;color:rgba(242,243,239,.82);max-width:36ch}
.world__link{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.2rem;
  font-weight:700;font-size:.95rem;color:var(--green-txt);
}
.world__link .ico{transition:transform .25s ease}
.world:hover .world__link .ico{transform:translate(3px,-3px)}
@media (max-width:860px){
  .worlds{flex-direction:column;min-height:0}
  .world{min-height:62vh}
}

/* ============================================================
   EVENTS 2027
   ============================================================ */
.events{padding:var(--section) var(--pad)}
.events__head{max-width:1200px;margin:0 auto clamp(3rem,6vw,5rem)}
/* Vier Termine in zwei Reihen. Jede Reihe traegt eine grosse und eine
   kleine Karte, wechselnd versetzt (oben links gross, unten rechts gross).
   Beim Zeigen wandert das Gewicht zur Karte unter der Maus, die Nachbarin
   gibt nach: dieselbe Mechanik wie bei den zwei Welten weiter oben, nur
   dass hier die Ruhelage schon ungleich ist. Alles Flex und :has, kein JS. */
.events__grid{
  display:grid;gap:clamp(1rem,2.5vw,2rem);
  max-width:1200px;margin:0 auto;
}
.events__row{display:flex;gap:clamp(1rem,2.5vw,2rem)}
.events__row .card{flex:1 1 0;min-width:0;transition:flex .55s cubic-bezier(.22,.8,.24,1)}
.events__row .card--big{flex:1.45 1 0}
@media (hover:hover){
  .events__row:has(.card:hover) .card{flex:1 1 0}
  .events__row:has(.card:hover) .card:hover{flex:1.45 1 0}
}
@media (prefers-reduced-motion:reduce){.events__row .card{transition:none}}
.card{
  position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(400px,54vh,520px);
}
.card__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.8,.24,1);
}
.card:hover .card__bg{transform:scale(1.045)}
.card__veil{
  position:absolute;inset:0;
  /* Kräftiger als zuvor: Die Karten tragen jetzt bewegte Bilder, darunter
     das helle Dämmerungsmotiv von Tropical Beach. Auf dem alten, für
     Nachtfotos gebauten Verlauf war der Fließtext dort nicht mehr lesbar. */
  background:linear-gradient(to top,rgba(8,10,9,.95) 0%,rgba(8,10,9,.72) 42%,rgba(8,10,9,.36) 78%,rgba(8,10,9,.6) 100%);
}
.card__body{position:relative;padding:clamp(1.4rem,3vw,2.6rem);width:100%}
/* Das Datum sitzt oben in der Karte, nicht im Textblock. Die vier
   Karten tragen unterschiedlich viel Inhalt (mit und ohne Logo, mit und
   ohne Button); im Fluss stuende die Terminzeile deshalb bei jeder Karte
   auf einer anderen Hoehe und die Reihe wirkte unruhig. Oben steht sie
   auf einer Linie und die Terminfolge ist auf einen Blick lesbar. */
/* Das Datum ist auf Kundenwunsch deutlich groesser und fetter (24.08. war
   es 0,76rem und ging im Bild unter). Mit dem Gewicht muss die Sperrung
   runter: gesperrte Versalien in 800 zerfasern sonst zur Buchstabenreihe.
   Der Schatten traegt bei der Groesse nicht mehr allein, deshalb steht
   jetzt ein weicher Verlauf hinter der Zeile. */
.card__date{
  position:absolute;top:clamp(1.1rem,2.2vw,1.6rem);left:clamp(1.4rem,3vw,2.6rem);
  z-index:2;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-txt);font-weight:800;line-height:1;
  text-shadow:0 2px 10px rgba(8,10,9,.95),0 0 26px rgba(8,10,9,.7);
}
.card__logo{width:clamp(74px,7vw,104px);margin-bottom:.9rem}
.card__logo--tb{width:clamp(56px,5.4vw,80px)}
/* Trompeter-Aufnahme (Coming Soon + Kids & Family-Platzhalter): der Mann
   steht am rechten Bildrand, deshalb rechts verankern, sonst schneidet
   object-fit:cover ihn ab, sobald die Karte schmaler wird. */
.card--trumpet .card__bg,.card--trumpet .vloop{object-position:100% 50%}
.card__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,3.4vw,3rem);line-height:1;
}
.card__desc{margin-top:.7rem;color:rgba(242,243,239,.85);max-width:42ch}
.card__meta{margin-top:.9rem;font-size:.88rem;color:var(--mute)}
.card .btn{margin-top:1.3rem}
/* Zwei Aktionen pro Karte: Tickets und die Unterseite zum Tag. Der
   Abstand sitzt an der Zeile, nicht mehr an den Buttons, sonst
   springt der zweite Button beim Umbruch aus der Flucht. */
.card__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.card__acts .btn{margin-top:0}
.banner{
  position:relative;display:flex;align-items:center;overflow:hidden;
  max-width:1200px;margin:clamp(1rem,2.5vw,2rem) auto 0;min-height:240px;
}
.banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.8,.24,1)}
.banner:hover .banner__bg{transform:scale(1.04)}
.banner__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,9,.92) 25%,rgba(8,10,9,.4) 75%)}
.banner__body{position:relative;padding:clamp(1.4rem,3vw,2.6rem)}
.banner__title{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.5vw,2.8rem);line-height:1}
.banner__sub{margin-top:.5rem;color:rgba(242,243,239,.8)}
.banner .world__link{margin-top:.9rem}
@media (max-width:640px){
  .events__row{flex-direction:column}
  .events__row .card,.events__row .card--big{flex:none}
}

/* ============================================================
   FILMISCHES ZWISCHENBAND
   Eigene Layout-Familie zwischen den Karten-Sektionen: volle
   Breite, Bild trägt die Aussage, kein Container.
   ============================================================ */
/* Volle Höhe statt 78vh: Bei 78vh schnitt der Cover-Zuschnitt oben den
   Bogen der Fontäne und unten das Publikum weg - also genau die beiden
   Dinge, die dem Feuerwerk Maßstab geben. Bei 100svh liegt das 3:2-Bild
   fast unbeschnitten im Rahmen. */
.strip{
  position:relative;min-height:100svh;overflow:hidden;
  /* z-index 1 gegen die FOLGESEKTION, nicht gegen die eigene.
     .amb setzt isolation:isolate, bildet also einen Stapelkontext: Die
     komplette nachfolgende .gallery.amb zeichnet als Block über diesem
     Band, samt ihrer .amb__wash, die per inset:-14% nach oben ragt. Bei
     der sehr hohen Galerie reichen 14% aus, um das ganze Feuerwerk mit
     einem 50%-Weichzeichner plus grünem Lichtkegel zuzudecken. Gemessen:
     Der Nachthimmel wurde dadurch von rgb(29,29,31) auf rgb(62,67,64)
     angehoben, also mehr als verdoppelt. Das war der Milchschleier. */
  z-index:1;
  /* Zeile unten links statt mittig. Der Brennpunkt der Explosion liegt in
     der Bildmitte; beides dort zu stapeln zwang zu einem flächigen
     Schleier, und genau der hat das Feuerwerk erschlagen. Unten links
     liegt die dunkle Publikumssilhouette, dort trägt der Text von selbst. */
  display:grid;place-items:end start;
  padding:var(--pad) var(--pad) clamp(2.5rem,7vh,5rem);
}
.strip__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;
}
/* Liegt deckungsgleich über dem Standbild und wird erst sichtbar, wenn
   wirklich Bilder laufen (Klasse .is-playing aus main.js). Ohne Video,
   ohne JS und bei reduzierter Bewegung bleibt es auf 0 und die Sektion
   sieht aus wie zuvor. */
.strip__video,.vloop{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease-out);
  will-change:transform,opacity;pointer-events:none;
}
.strip__video.is-playing,.vloop.is-playing{opacity:1}
@media (prefers-reduced-motion:reduce){.strip__video,.vloop{display:none}}
/* Bewegt sich beim Hover mit dem Standbild, sonst laufen Bild und Video
   beim Zeigen auseinander. */
.card:hover .vloop,.banner:hover .vloop{transform:scale(1.045)}
.vloop{transition:opacity .5s var(--ease-out),transform .8s cubic-bezier(.22,.8,.24,1)}
/* Kantenblende statt Flächenschleier: Die Bildmitte bleibt vollständig
   unangetastet, damit Schwarz wieder Schwarz und die Fontänen wieder hell
   sind. Abgedunkelt wird nur, wo der Text steht, und an den Rändern, wo
   die Sektion nach --ink überblenden muss. */
/* Das Motiv ist jetzt ein helles Tagbild: heller Himmel, helles Konfetti.
   Die alte Kantenblende reichte fuer Nachtfotos, hier stuende weisse
   Schrift auf hellem Grund. Deshalb eine kraeftigere Blende von unten
   links, wo der Text sitzt, plus eine flache Grunddaempfung ueber alles. */
.strip__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top right,rgba(16,18,19,.94) 0%,rgba(16,18,19,.72) 30%,rgba(16,18,19,.12) 62%),
    linear-gradient(to bottom,var(--ink) 0%,rgba(16,18,19,.2) 18%,rgba(16,18,19,.3) 55%,var(--ink) 100%);
}
/* Aeusserer Rahmen laeuft auf 1200px wie die Ueberschriften der anderen
   Sektionen (Events, Aftermovie), damit die Zeile auf derselben Linie
   beginnt. Der innere Block begrenzt nur den Umbruch. */
.strip__body{position:relative;width:100%;max-width:1200px;margin:0 auto}
/* Umbruch steuern die <br> im Markup, deshalb keine Breitengrenze.
   Die fruehere 24ch-Grenze rechnete mit der Fliesstextgroesse des
   Elternelements (~200px) und brach die Zeile in fuenf Stuecke. */
.strip__text{max-width:none}
.strip__line{
  text-align:left;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4.8vw,4rem);line-height:.98;
  text-shadow:0 8px 50px rgba(0,0,0,.8);
}
.strip__sub{
  margin-top:1rem;max-width:34ch;
  font-size:clamp(1rem,1.5vw,1.2rem);color:rgba(242,243,239,.9);
  text-shadow:0 4px 30px rgba(0,0,0,.85);
}
.strip__line b{color:var(--green-txt);font-weight:inherit}
/* Hochformat: Cover würde bei voller Höhe seitlich so stark beschneiden,
   dass von der Fontäne nur ein Streifen bliebe. Niedrigere Sektion, und
   der Bildausschnitt sitzt etwas höher, wo die Explosion steht. */
@media (max-width:860px){
  .strip{min-height:62svh}
  .strip__img{object-position:50% 38%}
}

/* ============================================================
   RÜCKBLICK · horizontale Strecke
   ============================================================ */
/* Die Bildstrecke sitzt seit dem Zusammenlegen unter den Filmen in
   derselben Sektion. Sie zieht seitlich ueber den Inhaltsrahmen hinaus,
   deshalb der negative Aussenabstand gegen das Sektionspolster. */
.gallery__pin{
  margin:clamp(3rem,7vw,6rem) calc(var(--pad) * -1) 0;
  position:relative;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.gallery__track{
  display:flex;gap:clamp(1rem,2.2vw,2rem);align-items:center;
  padding:0 var(--pad);width:max-content;will-change:transform;
}
/* Auslauf, damit das letzte Bild frei stehen kann */
.gallery__track::after{content:"";flex:0 0 30vw}
.slide{flex:0 0 auto;width:min(60vw,680px);overflow:hidden}
.slide--tall{width:min(32vw,380px)}
.slide--wide{width:min(74vw,860px)}
.slide img{
  width:100%;height:min(56vh,540px);object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.8,.24,1);
}
.slide:hover img{transform:scale(1.035)}
.slide figcaption{margin-top:.7rem;font-size:.88rem;color:var(--mute)}
.gallery__progress{
  position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(1.5rem,4.5vh,3rem);height:2px;background:var(--line);
}
.gallery__progress i{display:block;height:100%;width:0;background:var(--green)}
@media (max-width:860px){
  .gallery__pin{height:auto;display:block}
  .gallery__track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:1.5rem}
  .gallery__track::after{flex:0 0 var(--pad)}
  .slide{scroll-snap-align:center;width:78vw}
  .slide--tall{width:56vw}
  .slide--wide{width:86vw}
  .slide img{height:48vh}
  .gallery__progress{display:none}
}

/* ============================================================
   AFTERMOVIES
   ============================================================ */
.media{padding:var(--section) var(--pad);border-top:1px solid var(--line)}
.media__head{max-width:1200px;margin:0 auto clamp(2.5rem,5vw,4rem)}
.media__intro{margin-top:1rem;color:var(--mute);max-width:52ch}
.media__grid{
  display:grid;grid-template-columns:1.6fr 1fr;grid-auto-rows:minmax(220px,auto);
  gap:clamp(1rem,2.2vw,1.8rem);max-width:1200px;margin:0 auto;
}
.movie{position:relative;overflow:hidden;background:var(--ink-2)}
.movie--feature{grid-row:span 2}
.movie img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.24,1);min-height:220px}
.movie:hover img{transform:scale(1.04)}
.movie figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.4rem;
  background:linear-gradient(to top,rgba(8,10,9,.9),transparent);
  display:flex;flex-direction:column;gap:.2rem;pointer-events:none;
}
.movie__label{font-family:var(--display);font-size:1.25rem;letter-spacing:.03em}
.movie--feature .movie__label{font-size:1.7rem}
.movie__note{font-size:.88rem;color:var(--mute);max-width:52ch}
.movie__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(8,10,9,.14);border:0;cursor:pointer;color:var(--paper);
  transition:background .25s ease;
}
.movie__play:hover{background:rgba(8,10,9,.02)}
.movie__play svg{
  width:64px;height:64px;padding:18px;box-sizing:content-box;
  background:color-mix(in srgb,var(--ink) 55%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);
  transition:transform .25s ease,background .25s ease;
}
.movie__play:hover svg{transform:scale(1.07);background:var(--green);color:var(--paper)}
.movie__play:active svg{transform:scale(.95)}
.movie iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
/* Läuft der Player, verschwinden Poster und Beschriftung */
.movie.is-loading img,.movie.is-loading figcaption{opacity:0;transition:opacity .3s ease}
.movie.is-loading{background:#000}
.movie__play[hidden]{display:none}
/* Ladezustand: Puls statt totem Klick */
.movie.is-loading::after{
  content:"";position:absolute;left:50%;top:50%;z-index:2;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  border:2px solid rgba(242,243,239,.25);border-top-color:var(--green);
  animation:spin .9s linear infinite;
}
.movie.is-playing::after{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:860px){
  .media__grid{grid-template-columns:1fr}
  .movie--feature{grid-row:auto}
}

/* ============================================================
   PARTNER / B2B
   Eine Kachel in Inhaltsbreite mit dem VIP-Foto als Grund, darauf der
   ganze Text; darunter die Reichweite als Karte. Beide mit demselben
   Radius: der einzige bewusste Bruch mit dem scharfkantigen Formsystem,
   weil die Vorlage der Kundin so aussieht und die beiden zusammengehoeren.
   ============================================================ */
/* Die Sektion selbst laeuft ueber die volle Breite. Die Hintergrund-
   schichten von .amb (Randverlaeufe, Waesche) haengen an der Sektionsbox;
   war die Box nur 1200px breit, standen ihre Kanten als grauer Kasten
   im Bild. Der Rahmen sitzt deshalb eine Ebene tiefer. */
.b2b{--r:20px;padding:var(--section) var(--pad);border-top:1px solid var(--line)}
.b2b__inner{display:grid;gap:clamp(1.2rem,2.5vw,2rem);max-width:1200px;margin:0 auto}
.b2b__tile{
  position:relative;overflow:hidden;border-radius:var(--r);
  display:flex;align-items:flex-end;
  min-height:clamp(480px,66vh,700px);
  border:1px solid rgba(242,243,239,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
/* vip-zelt-kachel.jpg ist bereits auf das Kachelformat zugeschnitten und rechts
   gekuerzt: dort stand ein Rollup einer fremden Agentur ("Imagefilm"),
   das nicht auf die Seite gehoert. */
.b2b__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Das Zelt ist hell. Der Text sitzt links unten, dort deckt der Schleier
   fast ganz; nach rechts oben laeuft er aus, damit vom Raum etwas bleibt. */
.b2b__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(8,10,10,.96) 0%,rgba(8,10,10,.9) 36%,rgba(8,10,10,.55) 56%,rgba(8,10,10,.06) 80%),
    linear-gradient(to top,rgba(8,10,10,.45) 0%,transparent 40%);
}
/* 2 cm Puffer rundum (76px bei 96 dpi), auf kleinen Schirmen weniger */
.b2b__text{position:relative;padding:clamp(1.5rem,5.3vw,4.75rem);max-width:66ch}
.b2b .h2{font-size:clamp(2.2rem,4vw,3.4rem)}
.b2b__copy{margin-top:1.4rem;color:var(--paper);max-width:52ch}
.b2b__list{margin:1.6rem 0 0;padding:0;list-style:none}
.b2b__list li{
  padding:.85rem 0;border-top:1px solid rgba(242,243,239,.18);
  font-weight:600;
}
.b2b__list li:last-child{border-bottom:1px solid rgba(242,243,239,.18)}
.b2b .btn{margin-top:1.8rem}
.b2b .btn--ghost{border-color:rgba(242,243,239,.35)}

/* ---------- Reichweite in Zahlen ----------
   Aufbau nach der Vorlage der Kundin: dunkle Karte, gruene Zeile links,
   Kanaele rechts, drei fette Zahlen mit Erklaerung. Als Text statt Bild,
   damit es scharf bleibt, umbricht und vorgelesen wird. */
.reach{
  border-radius:var(--r);background:#111314;
  border:1px solid rgba(242,243,239,.1);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding:clamp(1.8rem,3.5vw,3rem) clamp(1.6rem,3.5vw,3rem);
}
.reach__head{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.6rem 1.5rem;margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.reach__eyebrow{
  font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--green-txt);font-weight:700;
}
.reach__channels{font-size:.9rem;color:var(--mute)}
.reach__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.6rem,3.5vw,3rem);
}
.reach__grid dt{
  font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1;
  font-variant-numeric:tabular-nums;
}
/* Kurzes Aufgluehen, wenn der Zaehler seinen Endwert erreicht (Klasse aus main.js) */
.reach__grid dt.is-lit{animation:reachGlow .9s var(--ease-out)}
@keyframes reachGlow{
  0%{color:var(--paper);text-shadow:none}
  25%{color:#8fe07a;text-shadow:0 0 28px rgba(89,170,65,.9),0 0 60px rgba(89,170,65,.5)}
  100%{color:var(--paper);text-shadow:none}
}
.reach__grid dd{margin:.7rem 0 0;font-size:1rem;line-height:1.5;color:rgba(242,243,239,.72);max-width:30ch}
@media (max-width:860px){
  .b2b__veil{background:linear-gradient(to top,rgba(16,18,19,.96) 0%,rgba(16,18,19,.86) 55%,rgba(16,18,19,.5) 100%)}
  .b2b__tile{min-height:0}
}
@media (max-width:720px){.reach__grid{grid-template-columns:1fr;gap:1.6rem}}

/* ============================================================
   SOCIAL MEDIA
   Instagram-Beitraege als statische Karten. Optik folgt dem Instagram-
   Post (Kopf, Bild 4:5, Aktionsleiste, Likes, Text, Datum), Farben und
   Schrift bleiben die der Seite. Radius wie in der Partner-Sektion.
   ============================================================ */
/* Sitzt innerhalb der Aftermovie-Sektion zwischen Filmen und Bildstrecke,
   deshalb kein eigenes Sektionspolster, nur Abstand nach oben; die
   Bildstrecke bringt ihren eigenen mit. Ueberschrift eine Stufe kleiner
   als die Sektionsueberschrift darueber. */
.social{--r:16px;margin-top:clamp(4rem,8vw,7rem)}
.social__inner{max-width:1200px;margin:0 auto}
.social__head{margin-bottom:clamp(2rem,4vw,3rem)}
.social__head .h2{font-size:clamp(2.1rem,4vw,3.4rem)}
.social__intro{margin-top:1rem;color:var(--mute);max-width:52ch}
.social__group{margin-bottom:clamp(2.5rem,5vw,4rem)}

/* Profilzeile: Avatar, Handle, Name + Follower, Folgen-Button */
.profile{
  display:flex;align-items:center;gap:1rem;
  padding:0 0 1.2rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line);
}
.profile__avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.profile__text{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.profile__user{font-weight:700;display:inline-flex;align-items:center;gap:.4rem}
.profile__user .ico,.profile__user svg{width:1.1em;height:1.1em}
.profile__name{font-size:.9rem;color:var(--mute)}
.profile__btn{padding:.6rem 1.4rem;font-size:.88rem}
.profile:hover .profile__btn{background:#4a9639}

.social__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.6rem)}

/* Die Karte */
.ig{
  background:#111314;border:1px solid rgba(242,243,239,.1);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease-out),border-color .3s ease;
}
.ig:hover{transform:translateY(-3px);border-color:rgba(242,243,239,.22)}
.ig__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem .9rem}
.ig__who{display:flex;align-items:center;gap:.65rem;min-width:0}
.ig__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.ig__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ig__user{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig__loc{font-size:.76rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig__follow{font-weight:700;font-size:.86rem;color:var(--green-txt);flex:0 0 auto}
.ig__follow:hover{text-decoration:underline;text-underline-offset:3px}
.ig__media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#000}
.ig__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.ig:hover .ig__media img{transform:scale(1.03)}
.ig__reel{position:absolute;top:.7rem;right:.7rem;color:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))}
.ig__reel svg{width:22px;height:22px}
.ig__actions{display:flex;align-items:center;gap:.9rem;padding:.75rem .9rem .35rem}
.ig__actions svg{width:24px;height:24px;display:block}
.ig__save{margin-left:auto}
.ig__likes{padding:0 .9rem;font-weight:700;font-size:.9rem}
.ig__cap{
  padding:.25rem .9rem 0;font-size:.9rem;line-height:1.45;color:rgba(242,243,239,.9);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ig__cap a{font-weight:700}
.ig__more{padding:.35rem .9rem 0;font-size:.86rem;color:var(--mute)}
.ig__more:hover{color:var(--paper)}
.ig__date{padding:.35rem .9rem 1rem;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-top:auto}

/* ---------- WhatsApp-Community ----------
   Gleicher Kartenaufbau wie die YouTube-Zeile, zusaetzlich der QR-Code
   als SVG (skaliert verlustfrei, keine externe Anfrage). Auf dem Handy
   faellt der Code weg: dort tippt man den Link, gescannt wird am Rechner. */
.wa{
  display:flex;align-items:center;gap:1.4rem;
  padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1.2rem,2.5vw,2rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
  background:#111314;border:1px solid rgba(242,243,239,.1);border-radius:var(--r);
  transition:transform .35s var(--ease-out),border-color .3s ease;
}
.wa:hover{transform:translateY(-3px);border-color:rgba(242,243,239,.22)}
.wa__ico{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:var(--paper)}
.wa__ico svg{width:30px;height:30px}
.wa__text{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.wa__title{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:.02em}
.wa__sub{font-size:.92rem;color:var(--mute)}
/* Der QR fuellt das weisse Feld. Wichtig ist die viewBox im SVG: ohne sie
   behaelt der Code seine Grundgroesse und sitzt oben links in der Ecke.
   Die weisse Ruhezone kommt aus dem Padding, nicht aus dem SVG.
   112px sind kein Zufall: 41 Module plus Rand ergeben so gut 2,2px je
   Modul -- darunter wird das Abscannen vom Bildschirm unzuverlaessig. */
.wa__qr{flex:0 0 auto;display:block;width:112px;height:112px;padding:8px;background:#fff;border-radius:8px}
.wa__qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.wa__btn{flex:0 0 auto}
@media (max-width:860px){.wa__qr{display:none}}

/* YouTube-Kanal als breite Karte */
.yt{
  display:flex;align-items:center;gap:1.4rem;
  padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1.2rem,2.5vw,2rem);
  background:#111314;border:1px solid rgba(242,243,239,.1);border-radius:var(--r);
  transition:transform .35s var(--ease-out),border-color .3s ease;
}
.yt:hover{transform:translateY(-3px);border-color:rgba(242,243,239,.22)}
.yt__ico{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:var(--paper)}
.yt__ico svg{width:30px;height:30px}
.yt__text{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.yt__title{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:.02em}
.yt__sub{font-size:.92rem;color:var(--mute)}
.yt__btn{flex:0 0 auto}
@media (max-width:1000px){.social__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .wa{flex-wrap:wrap}
  .wa__btn{width:100%;text-align:center}
  /* Neun Karten untereinander waeren eine endlose Strecke. Pro Konto eine
     Wischreihe mit Einrasten, wie die Bildstrecke im Rueckblick. Die
     negative Randbreite laesst die Reihe bis an den Bildschirmrand laufen. */
  .social__grid{
    display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;margin:0 calc(var(--pad) * -1);
    padding:0 var(--pad) .6rem;scrollbar-width:none;
  }
  .social__grid::-webkit-scrollbar{display:none}
  .social__grid .ig{flex:0 0 82vw;scroll-snap-align:center}
  .yt{flex-wrap:wrap}
  .yt__btn{width:100%;text-align:center}
}

/* ============================================================
   FAQ
   ============================================================ */
/* Volle Breite fuer die Sektion (siehe .b2b), 900px nur fuer den Inhalt */
.faq{padding:var(--section) var(--pad)}
.faq__inner{max-width:900px;margin:0 auto}
.faq>.h2{margin-bottom:clamp(2rem,4.5vw,3.5rem)}
.qa{border-top:1px solid var(--line)}
.faq__list .qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 0;cursor:pointer;list-style:none;
  font-weight:700;font-size:1.08rem;
}
.qa summary::-webkit-details-marker{display:none}
.qa__ico{position:relative;flex:0 0 16px;height:16px}
.qa__ico::before,.qa__ico::after{
  content:"";position:absolute;background:var(--green);
  transition:transform .2s var(--ease-out);
}
.qa__ico::before{left:0;right:0;top:7px;height:2px}
.qa__ico::after{top:0;bottom:0;left:7px;width:2px}
.qa[open] .qa__ico::after{transform:scaleY(0)}
.qa__body{overflow:hidden}
.qa__body p{padding:0 0 1.4rem;color:rgba(242,243,239,.78);max-width:62ch}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,4rem);
  max-width:1200px;margin:0 auto;padding:clamp(4rem,8vw,6rem) var(--pad) 2.5rem;
  border-top:1px solid var(--line);
}
.footer__brand .nav__mark{width:30px;height:33px}
.footer__claim{font-family:var(--display);font-size:1.6rem;margin-top:1.1rem;letter-spacing:.03em}
.footer__sub{margin-top:.5rem;color:var(--mute);font-size:.92rem;max-width:30ch}
.footer__head{font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:1.1rem}
.footer__col{display:flex;flex-direction:column;gap:.65rem;align-items:flex-start}
.footer__col a{color:rgba(242,243,239,.8);font-size:.96rem;display:inline-flex;align-items:center;gap:.5rem;transition:color .18s ease}
.footer__col a:hover{color:var(--green-txt)}
.footer__legal{
  grid-column:1/-1;margin-top:3rem;padding-top:1.5rem;
  border-top:1px solid var(--line);color:var(--mute);font-size:.85rem;
}
/* Unterseiten haben nur Marke + Rechtliches, deshalb zwei Spalten
   statt vier - sonst klaffte rechts die Haelfte des Rasters leer. */
.footer--sub{grid-template-columns:2fr 1fr}
@media (max-width:860px){.footer{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer{grid-template-columns:1fr}}

/* ============================================================
   REDUCED MOTION · Gesamtabschaltung
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero{height:100svh}
  .hero__stage{position:relative}
  .hero__video{display:none}
  .hero__poster{opacity:1!important}
  .hero__logo,.hero__green{display:none}
  .hero__film{clip-path:none}
  .world,.world__img,.card__bg,.banner__bg,.movie img{transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}
/* .is-static: gleicher Zustand, per URL ?static=1 erzwingbar (Fallback/Test) */
.is-static .hero{height:100svh}
.is-static .hero__stage{position:relative}
.is-static .hero__video,.is-static .hero__logo{display:none}
.is-static .hero__poster{opacity:1!important}

/* ============================================================
   TOUCH: Hover-Effekte neutralisieren (kein Sticky-Hover nach Tap)
   ============================================================ */
@media (hover:none),(pointer:coarse){
  .btn:hover{transform:none}
  .btn--solid:hover{background:var(--green)}
  .btn--ghost:hover{border-color:var(--line);color:var(--paper)}
  .world:hover .world__img,.card:hover .card__bg,.banner:hover .banner__bg,
  .movie:hover img,.slide:hover img{transform:none}
  .world:hover .world__link .ico{transform:none}
  .movie__play:hover svg{transform:none;background:color-mix(in srgb,var(--ink) 55%,transparent);color:var(--paper)}
  .nav__links>a:not(.btn):hover::after{right:100%}
  .chip:hover{color:var(--mute)}
  .qa summary:hover{color:var(--paper)}
  .marquee:hover .marquee__track{animation-play-state:running}
}

/* ============================================================
   RECHTSSEITEN · Impressum und Datenschutz
   Eigene, schlanke Seiten ohne Scroll-Choreografie: hier zählt
   Lesbarkeit, nicht Inszenierung.
   ============================================================ */
.legal{max-width:760px;margin:0 auto;padding:clamp(6rem,14vh,9rem) var(--pad) clamp(4rem,10vh,7rem)}
.legal__back{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:clamp(2rem,5vh,3.5rem);
  color:var(--green-txt);font-weight:700;font-size:.95rem;
}
.legal h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,3.6rem);line-height:1;margin-bottom:2.5rem;
}
.legal h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.1;
  margin:2.6rem 0 .8rem;
}
.legal p,.legal li{color:rgba(242,243,239,.78);line-height:1.65}
.legal p+p{margin-top:.8rem}
.legal ul{margin:.8rem 0 0 1.1rem;display:grid;gap:.45rem}
.legal a{color:var(--green-txt);text-decoration:underline;text-underline-offset:3px}
.legal address{font-style:normal;line-height:1.65;color:rgba(242,243,239,.78)}
/* Sichtbar markierte Lücke: fällt bei der Abnahme auf und kann nicht
   versehentlich live gehen. Nach dem Befüllen ersatzlos entfernen. */
.legal .todo,.legal blockquote{
  display:block;border-left:3px solid var(--green);
  background:rgba(74,166,63,.10);padding:.7rem .9rem;margin:.6rem 0;
  color:var(--paper);font-size:.92rem;
}
.legal__foot{
  margin-top:clamp(3rem,8vh,5rem);padding-top:1.4rem;
  border-top:1px solid var(--line);font-size:.9rem;color:var(--mute);
}

/* ============================================================
   OHNE BEWEGUNG · Navigation über dem hellen Markenband
   Ohne Motion läuft ScrollTrigger nicht, also schaltet die Leiste beim
   Überfahren des hellen Bandes nicht auf dunkle Schrift um und stünde
   dort weiß auf weiß. Statt dafür eine zweite Umschaltmechanik zu bauen,
   bekommt die Pille in diesem Modus dauerhaft einen dunklen Grund. Der
   Glaseffekt ist selbst ein Bewegungseffekt, sein Wegfall kostet hier
   nichts. Muss ans Dateiende: .nav.is-scrolled .nav__pill hat dieselbe
   Spezifität und würde sonst gewinnen.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .nav .nav__pill{
    background:rgba(26,29,30,.94);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}
.is-static .nav .nav__pill{
  background:rgba(26,29,30,.94);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ============================================================
   UNTERSEITEN  (Festival Days + Public Viewing)
   Aufbau 1:1 nach der Partnermappen-Seite der Kundin: Kicker,
   Titel, gruene Leadzeile, Fliesstext, drei Kennzahlen mit Linie
   darueber, "Highlights" als zweispaltige Rautenliste, grosses
   Bild, darunter Tickets und der Aftermovie-QR.
   Bewusst nachgebaut statt als Bild eingebunden: Text bleibt
   waehlbar, durchsuchbar, vorlesbar und bricht mobil um.
   ============================================================ */
.subnav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1rem;
  padding:1rem var(--pad);
  background:rgba(26,29,30,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.subnav__brand{display:flex;align-items:center;gap:.6rem}
.subnav__brand .nav__mark{width:20px;height:22px;color:var(--paper)}
.subnav__back{color:var(--mute);font-size:.92rem;font-weight:600;transition:color .2s ease}
.subnav__back:hover{color:var(--paper)}
.subnav .btn{padding:.6rem 1.3rem;font-size:.88rem}
/* Der aktuelle Punkt im Aufklappmenue: sichtbar, aber nicht klickbar. */
.drop__here{display:grid;gap:.1rem;padding:.6rem .8rem;border-radius:9px;background:rgba(255,255,255,.06);cursor:default}
.drop__here .drop__name{color:var(--mute)}
/* In der schlanken Unterseiten-Leiste haengt das Panel links an, nicht
   mittig: die Leiste ist linksbuendig, ein zentriertes Panel wuerde
   mobil ueber den Rand laufen. */
.subnav .drop__panel{left:0;transform:translateY(-8px)}
.subnav .drop__panel.is-open{transform:translateY(0)}
.subnav .drop{margin-right:auto}
.subnav__brand{margin-right:1.2rem}
@media (max-width:560px){
  .subnav__back{display:none}
  .subnav__brand .nav__word{display:none}
  /* Auf schmalen Displays haengt das Panel an der Leiste statt am Knopf:
     am Knopf ausgerichtet stiess es bei 375 px bündig an den rechten
     Rand. .subnav ist sticky und damit selbst schon Bezugsrahmen, es
     genuegt, den Bezug am .drop aufzuheben. */
  .subnav .drop{position:static}
  .subnav .drop__panel{left:var(--pad);min-width:0;width:calc(100vw - 2 * var(--pad))}
}

.sub{max-width:1180px;margin:0 auto;padding:clamp(2.5rem,6vw,5rem) var(--pad) 0}
.sub__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:.98;letter-spacing:.01em;
  margin:.5rem 0 0;text-transform:uppercase;
}
.sub__lead{
  margin-top:1.1rem;color:var(--green-txt);font-weight:700;
  font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.35;
}
.sub__copy{margin-top:1.4rem;max-width:70ch;display:grid;gap:1.1rem;color:rgba(242,243,239,.86)}
.sub__copy b,.sub__copy strong{color:var(--paper);font-weight:700}

/* Kennzahlen. Die Linie sitzt als Rahmen am Element, damit sie exakt
   so breit ist wie die Spalte - im PDF ist genau das das Raster. */
.keys{
  display:grid;gap:clamp(1.4rem,3vw,2.6rem);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(2.4rem,5vw,3.6rem);
}
.keys>div{border-top:2px solid var(--green-txt);padding-top:1rem}
.keys dt{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1;letter-spacing:.01em;
}
.keys dd{margin:.35rem 0 0;color:var(--mute);font-size:.95rem;line-height:1.35}
@media (max-width:640px){.keys{grid-template-columns:1fr;gap:1.4rem}}

.hl{margin-top:clamp(2.6rem,5vw,3.6rem)}
.hl__title{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);text-transform:uppercase}
.hl__list{
  list-style:none;padding:0;margin:1.2rem 0 0;
  display:grid;grid-template-columns:1fr 1fr;gap:.85rem clamp(1.5rem,4vw,3rem);
}
.hl__list li{position:relative;padding-left:1.5rem;line-height:1.45;color:rgba(242,243,239,.9)}
/* Raute wie in der Vorlage. Als gedrehtes Quadrat statt als Zeichen:
   traegt in jeder Schrift und bleibt exakt auf der ersten Zeile. */
.hl__list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:8px;height:8px;background:var(--green-txt);transform:rotate(45deg);
}
@media (max-width:700px){.hl__list{grid-template-columns:1fr}}

.sub__shot{margin:clamp(2.4rem,5vw,3.4rem) 0 0}
.sub__shot img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:10px;display:block}
.sub__shot figcaption{margin-top:.6rem;color:var(--mute);font-size:.86rem}

/* Tickets + Aftermovie-QR. Der QR ist fuer den Desktop gedacht (Handy
   davorhalten), der Button daneben fuer alle, die schon am Handy sind -
   den eigenen Bildschirm kann man nicht scannen. */
.cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:clamp(2rem,4vw,2.6rem);
  border-top:1px solid var(--line);
}
.cta__tickets{display:grid;gap:.5rem}
.cta__tickets .btn{justify-self:start}
.cta__note{color:var(--mute);font-size:.86rem}
.cta__movie{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.qrbox{
  flex:0 0 auto;display:block;width:128px;height:128px;padding:9px;
  background:#fff;border-radius:8px;
}
.qrbox svg,.qrbox img{width:100%;height:100%;display:block;shape-rendering:crispEdges}
/* Breite begrenzt, sonst zieht ein laengerer Begleittext (Ü30, Kids:
   "noch kein Aftermovie, hier ist der Kanal") den Block so breit, dass
   er neben den Tickets nicht mehr Platz findet und darunter rutscht. */
.cta__movieText{display:grid;gap:.45rem;max-width:34ch}
.cta__label{color:var(--green-txt);font-weight:800;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase}
.cta__movieText .btn{justify-self:start}
@media (max-width:700px){
  .cta__movie{margin-left:0}
  .qrbox{width:104px;height:104px}
}

/* Hinweis zu Foto- und Videoaufnahmen. Steht auf jeder Eventseite
   direkt beim Ticketkauf, weil er dort die Entscheidung betrifft. */
.notice{
  margin-top:clamp(2rem,4vw,2.8rem);padding:1.1rem 1.3rem;
  border-left:3px solid var(--green);background:var(--ink-2);
  color:rgba(242,243,239,.82);font-size:.92rem;line-height:1.5;border-radius:0 6px 6px 0;
}

/* Querverweise auf die uebrigen Tage */
.more{margin-top:clamp(3rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,4.5rem)}
.more__head{font-family:var(--display);font-weight:400;font-size:1.3rem;text-transform:uppercase;margin-bottom:1.1rem}
.more__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.more__grid a{
  display:grid;gap:.25rem;padding:1rem 1.1rem;
  background:var(--ink-2);border:1px solid var(--line);border-radius:8px;
  transition:border-color .2s ease,transform .2s var(--ease-out);
}
.more__grid a:hover{border-color:var(--green-txt);transform:translateY(-2px)}
.more__day{color:var(--green-txt);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.more__name{font-family:var(--display);font-weight:400;font-size:1.15rem;text-transform:uppercase;line-height:1.1}
@media (max-width:820px){.more__grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.more__grid{grid-template-columns:1fr}}