/* ═══════════════════════════════════════════════════════════
   GTA VI — Countdown nach Vice City
   Farbwelt & Typo-Rhythmus abgeleitet von rockstargames.com/VI
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Grund */
  --bg:        #0b1124;   /* dunkelblaue Grundfarbe, angelehnt an rockstargames.com/VI */
  --bg2:       #111a33;
  --surf:      #17203d;
  --surf2:     #1e294a;
  --surf3:     #27345c;
  --line:      rgba(255,255,255,.10);
  --line2:     rgba(255,255,255,.18);

  /* Marke */
  --cream:     #fff9cb;   /* Rockstar Headline-Creme */
  --pink:      #ffb2c6;   /* Pre-Order-Pill */
  --ink:       #0c0d1b;   /* Text auf Pink */
  --vice:      #e8548c;   /* Vice-City-Magenta */
  --vice-hot:  #ff4fa3;
  --cyan:      #45e0da;
  --orange:    #ff9a4d;
  --lav:       #ccc2f5;   /* Newswire-Lavendel */
  --lav-hi:    #e5ddff;
  --red:       #e50914;   /* Netflix */

  /* Karten-Tints der offiziellen Seite */
  --tint-blue: #2c3868;
  --tint-plum: #4b2f54;
  --tint-navy: #243152;

  /* Text */
  --fg:        #f4f2f7;
  --fg-mid:    rgba(244,242,247,.72);
  --fg-dim:    rgba(244,242,247,.50);

  /* Typo */
  /* Rockstar setzt die hauseigene "GTAArtDeco" ein. Nächstliegende freie
     Entsprechungen: Barlow Condensed ExtraBold für die Condensed-Headlines,
     Figtree für Fließtext und Bold-Zwischentitel. */
  --f-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-label:   "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Raster */
  --wrap: 1280px;
  --pad: clamp(20px, 5vw, 72px);
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 40px;
  --s5: 64px; --s6: 96px;  --s7: 140px;
  --r: 14px;
  --nav-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:17.6px;   /* gleicht die 4 % kleinere Versalhöhe von Figtree aus */
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img,video{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--vice); color:#fff; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:9999;
  background:var(--cream); color:#111; padding:10px 16px;
  border-radius:999px; font-weight:700; transform:translateY(-200%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:none; }

/* ══════════ Typo-Bausteine ══════════ */
.h-display{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.8rem, 8vw, 7rem);
  line-height:.9;
  letter-spacing:-.004em;
  text-transform:uppercase;
  margin:0 0 var(--s3);
  color:var(--cream);
}
.kicker{
  font-family:var(--f-label);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--vice);
  margin:0 0 var(--s2);
  font-weight:700;
}
.lead{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--fg); }
p{ color:var(--fg-mid); margin:0 0 1.1em; }
p strong{ color:var(--fg); font-weight:700; }

/* ══════════ Buttons ══════════ */
.btn{
  --btn-bg:transparent; --btn-fg:var(--fg); --btn-bd:var(--line2);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:11px 22px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:999px;
  font-weight:700; font-size:.94rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--pink{ --btn-bg:var(--pink); --btn-fg:var(--ink); --btn-bd:var(--pink); }
.btn--pink:hover{ --btn-bg:#ffc9d8; box-shadow:0 10px 30px -10px rgba(255,178,198,.6); }
.btn--red{ --btn-bg:var(--red); --btn-fg:#fff; --btn-bd:var(--red); }
.btn--red:hover{ --btn-bg:#ff1420; }
.btn--ghost{ --btn-bg:rgba(255,255,255,.06); }
.btn--ghost:hover{ --btn-bg:rgba(255,255,255,.13); --btn-bd:var(--line2); }
.btn--lg{ min-height:52px; padding:14px 30px; font-size:1rem; }

/* ══════════ Nav ══════════ */
/* Bleibt dauerhaft transparent — nur ein weicher Verlauf sichert die Lesbarkeit
   über hellen Bildern, ohne einen sichtbaren Balken zu erzeugen. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--s3);
  padding:0 var(--pad);
  background-image:linear-gradient(180deg, rgba(8,13,29,.66) 0%, rgba(8,13,29,.34) 52%, rgba(8,13,29,0) 100%);
}
.nav__logo{ flex:none; line-height:0; display:block; }
.vi-mark{
  display:block; height:30px; width:auto; fill:#fff;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.65));
  transition:height .3s var(--ease), transform .3s var(--ease), fill .25s var(--ease);
}
.nav__logo:hover .vi-mark{ transform:scale(1.07); fill:var(--pink); }

.nav__links{ display:flex; gap:2px; margin-left:auto; }
.nav__links a{
  position:relative; padding:9px 14px; border-radius:999px;
  font-size:.86rem; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.80); text-decoration:none;
  text-shadow:0 1px 10px rgba(8,13,29,.85);
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.nav__links a:hover{ color:var(--fg); background:rgba(255,255,255,.07); }
.nav__links a.is-active{ color:var(--cream); }
.nav__links a.is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px;
  height:2px; background:var(--vice); border-radius:2px;
}

.nav__right{ display:flex; align-items:center; gap:var(--s2); }
.nav__mini{
  font-family:var(--f-label); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; color:var(--cream); text-transform:uppercase;
  padding:6px 13px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  background:rgba(8,13,29,.35); white-space:nowrap;
  text-shadow:0 1px 8px rgba(8,13,29,.8);
}
/* Sprachwahl DE | EN — dieselbe Pillenform wie der Countdown daneben */
.lang{
  display:inline-flex; align-items:center; flex:none; gap:2px; padding:3px;
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  background:rgba(8,13,29,.35);
}
.lang__btn{
  position:relative;
  min-width:34px; height:26px; padding:0 8px;
  border:0; border-radius:999px; background:transparent; cursor:pointer;
  font-family:var(--f-label); font-size:.68rem; font-weight:700; letter-spacing:.12em;
  color:rgba(255,255,255,.72); text-shadow:0 1px 8px rgba(8,13,29,.8);
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
/* Die Pille ist schmal — die Trefferfläche reicht trotzdem auf 44 px */
.lang__btn::after{ content:""; position:absolute; inset:-9px -1px; }
.lang__btn[aria-pressed="true"]{
  background:var(--cream); color:var(--ink); text-shadow:none; cursor:default;
}
@media (hover:hover){
  .lang__btn[aria-pressed="false"]:hover{ color:var(--fg); background:rgba(255,255,255,.1); }
}

/* Englisch: unsichtbar, bis i18n.js die Texte eingesetzt hat — sonst
   blitzt kurz Deutsch auf. Beim Wechsel blendet die Seite weich aus. */
html.i18n-warte body{ visibility:hidden; }
html.lang-wechsel body{ opacity:0; transition:opacity .18s var(--ease); }

.nav__burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;
}
.nav__burger span{
  display:block; width:22px; height:2px; background:var(--fg); border-radius:2px;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:105;
  background:rgba(11,17,36,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  padding:var(--s4) var(--pad) var(--s5);
  display:flex; flex-direction:column; gap:var(--s4);
  animation:menuIn .28s var(--ease-out);
}
.mobile-menu[hidden]{ display:none; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-12px);} }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mobile-menu nav a{
  font-family:var(--f-display); font-weight:800; font-size:2.2rem; text-transform:uppercase;
  color:var(--cream); text-decoration:none; padding:12px 0;
  border-bottom:1px solid var(--line);
}
.mobile-menu nav a:hover{ color:var(--vice); }
.mobile-menu__cd{
  font-family:var(--f-label); font-size:.78rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-dim); margin:0; font-weight:600;
}
.mobile-menu__cd span{
  font-family:var(--f-display); font-weight:800; font-size:1.5rem;
  letter-spacing:0; color:var(--cream); margin-right:8px;
}

/* ══════════ Sections ══════════ */
.sec{ position:relative; }
.sec--pad{
  padding:var(--s7) var(--pad);
  max-width:var(--wrap); margin-inline:auto;
}
.sec__head{ max-width:760px; margin-bottom:var(--s5); }
.sec__intro{ font-size:1.06rem; max-width:60ch; }

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ══════════ 1 · HERO — gepinnt, gestaffeltes Ausblenden ══════════ */
/* Der Abschnitt ist absichtlich hoch: solange man durch ihn scrollt, kommt
   nichts Neues nach, stattdessen blendet erst der Textblock und danach das
   Logo aus. Die Werte dafür setzt main.js als CSS-Variablen auf .hero. */
.hero{ position:relative; z-index:0; height:320vh; background:var(--bg); }
.hero__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
  padding:calc(var(--nav-h) + 30px) var(--pad) 84px;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:-6% -2%; z-index:-3; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06) translate3d(0,0,0);
  will-change:transform;
}
.hero__pin::after{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(135% 95% at 50% 30%, transparent 24%, rgba(11,17,36,.48) 72%, rgba(11,17,36,.9) 100%),
    linear-gradient(180deg, rgba(11,17,36,.62) 0%, rgba(11,17,36,.05) 30%, rgba(11,17,36,.34) 58%, rgba(11,17,36,.94) 88%, var(--bg) 100%);
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; opacity:.16; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* Deckt den Hero am Ende der Sequenz ab, damit der Übergang ins Video sitzt */
.hero__fadeout{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:var(--bg); opacity:var(--h-out, 0);
}

.hero__inner{ position:relative; z-index:2; text-align:center; max-width:940px; }
.hero__inner::before{
  content:""; position:absolute; inset:-14% -22% -10%; z-index:-1;
  background:radial-gradient(58% 52% at 50% 56%, rgba(8,13,29,.66), rgba(8,13,29,.24) 62%, transparent 82%);
  opacity:var(--h-body, 1); pointer-events:none;
}
.hero__title{
  margin:0; display:flex; justify-content:center;
  opacity:var(--h-logo, 1);
  transform:scale(var(--h-logo-s, 1)) translate3d(0,0,0);
  will-change:opacity, transform;
}
.hero__logo{
  width:min(380px, 62vw); height:auto;
  filter:drop-shadow(0 22px 58px rgba(0,0,0,.75)) drop-shadow(0 0 90px rgba(232,84,140,.28));
  animation:logoIn 1.1s var(--ease-out) both;
}
@keyframes logoIn{ from{ opacity:0; transform:translateY(24px) scale(.965); } }

.hero__body{
  opacity:var(--h-body, 1);
  transform:translate3d(0, var(--h-body-y, 0px), 0);
  will-change:opacity, transform;
}
.hero__sub{
  font-size:clamp(1rem,1.9vw,1.24rem);
  color:#fff; margin:var(--s2) auto var(--s3); max-width:44ch;
  font-weight:500;
  text-shadow:0 2px 18px rgba(8,13,29,.95), 0 1px 3px rgba(8,13,29,.9);
}
.hero__sub em{ color:var(--vice-hot); font-style:normal; font-weight:800; }

/* Countdown */
.countdown{
  display:inline-flex; align-items:flex-start; gap:clamp(4px,1.4vw,16px);
  padding:clamp(12px,1.9vw,18px) clamp(16px,3vw,32px);
  border:1px solid var(--line2); border-radius:18px;
  background:rgba(11,17,36,.52);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09);
}
.cd__unit{ display:flex; flex-direction:column; align-items:center; min-width:clamp(52px,9vw,86px); }
.cd__num{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.6rem,7.6vw,5rem);
  line-height:.95; color:var(--cream);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 34px rgba(255,249,203,.28);
}
.cd__unit--sec .cd__num{ color:var(--vice-hot); text-shadow:0 0 34px rgba(255,79,163,.4); }
.cd__lab{
  font-family:var(--f-label); font-size:.6rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,242,247,.78); margin-top:8px;
}
.cd__sep{
  font-family:var(--f-display); font-weight:800; color:var(--fg-dim);
  font-size:clamp(1.7rem,4.4vw,3.2rem); line-height:1.1;
  animation:blink 2s steps(1,end) infinite;
}
@keyframes blink{ 50%{ opacity:.25; } }
.countdown__note{
  font-family:var(--f-label); font-size:.74rem; letter-spacing:.1em; font-weight:600;
  color:rgba(244,242,247,.66); text-shadow:0 1px 10px rgba(8,13,29,.9);
  margin:14px 0 var(--s3); text-transform:uppercase;
}
.countdown__note strong{ color:var(--cream); }

.hero__actions{ display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; }
.hero__platforms{
  list-style:none; display:flex; gap:var(--s3); justify-content:center;
  padding:0; margin:var(--s3) 0 0;
  font-family:var(--f-label); font-size:.7rem; letter-spacing:.2em; font-weight:600;
  text-transform:uppercase; color:rgba(244,242,247,.72);
  text-shadow:0 1px 10px rgba(8,13,29,.9);
}
.hero__platforms li + li{ padding-left:var(--s3); border-left:1px solid var(--line); }

.hero__scroll{
  position:absolute; bottom:26px; left:50%; z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--fg-dim); text-decoration:none;
  font-family:var(--f-label); font-size:.62rem; letter-spacing:.28em;
  font-weight:600; text-transform:uppercase;
  opacity:var(--h-body, 1);
  transition:color .2s var(--ease);
}
.hero__scroll:hover{ color:var(--cream); }
.hero__scroll svg{ animation:bob 2.2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

/* ══════════ 3 · SCROLL-VIDEO ══════════ */
/* Ein echter Clip, dessen Wiedergabe an der Scrollposition hängt. Im letzten
   Drittel schiebt sich der Story-Abschnitt von unten darüber. */
/* Der Abschnitt beginnt eine Bildschirmhöhe früher als der Trailer endet.
   Dadurch liegt das Video schon hinter den letzten Trailer-Karten und wird
   beim Scrollen langsam eingeblendet. */
/* svh statt vh: auf dem Desktop identisch, auf dem Handy passt die Höhe
   dann zum margin-top in svh. Bei gemischten Einheiten hinge das freie
   Fenster für das Video an der URL-Leiste. Rechnung dazu siehe M6. */
.scrub{ position:relative; z-index:0; height:400svh; margin-top:-100svh; }
.scrub__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  opacity:var(--v-in, 1);
}
/* Ultimate und alles nach den Karten liegen über der Video-Ebene */
#ultimate{ position:relative; z-index:1; }
#charaktere, #leonida, #galerie, .finale, .footer{
  position:relative; z-index:2;
}
.scrub__sticky::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--bg); opacity:var(--s-out, 0);
}
.scrub__frame{
  position:absolute; inset:0;
  transform:scale(var(--z, 1)) translate3d(0,0,0);
  transform-origin:50% 48%;
  will-change:transform;
}
.scrub__video{
  width:100%; height:100%;
  object-fit:cover; background:#000;
}
.scrub__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(125% 90% at 50% 45%, transparent 46%, rgba(8,13,29,.5) 100%),
    linear-gradient(180deg, rgba(8,13,29,.55) 0%, transparent 20%, transparent 74%, rgba(8,13,29,.85) 100%);
}
/* ══════════ 3 · STORY ══════════ */
/* Fährt beim Scrollen von unten über das Video */
/* Abgerundete Box, die beim Scrollen von unten über das Video fährt.
   An den Seiten bleibt das Video sichtbar — dadurch liest sie sich als Karte
   und nicht als schwarze Fläche. */
.rise-card{
  position:relative; z-index:2;
  width:min(100% - clamp(16px,3vw,48px)*2, var(--wrap));
  max-width:var(--wrap);
  margin:calc(var(--rise, 100) * -1svh) auto 0;
  border-radius:clamp(20px,2.4vw,32px);
  overflow:hidden;
  background:transparent;
}
/* Eigene Fläche, damit der Hintergrund unabhängig vom Inhalt einblenden kann */
.rise-card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bg2);
  border:1px solid rgba(255,255,255,.09);
  border-radius:inherit;
  box-shadow:0 -26px 70px -18px rgba(0,0,0,.85);
  opacity:var(--card-bg, 1);
}
/* Innenabstand schrumpft mit, weil die Karte schmaler ist als die Seite */
.rise-card > *{ position:relative; }
.rise-card.sec--pad{ padding-inline:clamp(20px,3.4vw,56px); }
/* Karten hinter den Video-Abschnitten starten früher — schon ab rund drei
   Vierteln des Clips, damit das Video dabei weiterläuft. */
#story, #news{ --rise:130; }
.story{ padding:var(--s7) clamp(20px,3.4vw,56px); }
.story__grid{
  display:grid; gap:var(--s5);
  grid-template-columns:1.05fr .95fr; align-items:center;
  max-width:var(--wrap); margin-inline:auto;
}

.story__media{
  position:relative; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
}
.story__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 45%, rgba(232,84,140,.20));
  mix-blend-mode:screen; pointer-events:none;
}
.story__media img{ width:100%; height:112%; object-fit:cover; will-change:transform; }

.story__facts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-top:var(--s4);
}
.story__facts > div{
  background:var(--surf); padding:18px 20px;
  display:flex; flex-direction:column; gap:4px;
}
.fact__k{ font-family:var(--f-label); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); }
.fact__v{ font-family:var(--f-display); font-size:1.75rem; font-weight:800; color:var(--cream); text-transform:uppercase; }

/* ══════════ 4 · CHARAKTERE ══════════ */
/* Die Karten sind Links auf charakter.html?c=<id> — display:block und das
   Zurücksetzen von Farbe/Unterstreichung holen die Optik der früheren
   <article>-Kacheln zurück. */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-bottom:var(--s3); }
.duo__card{
  display:block; text-decoration:none; color:inherit;
  position:relative; aspect-ratio:16/11; border-radius:var(--r); overflow:hidden;
  cursor:pointer; border:1px solid var(--line); background:var(--surf);
  transition:transform .5s var(--ease-out), border-color .3s var(--ease), box-shadow .5s var(--ease-out);
}
.duo__card:hover, .duo__card:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(255,178,198,.5);
  box-shadow:0 34px 70px -34px rgba(232,84,140,.55);
}
.duo__vid{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.duo__card:hover .duo__vid{ transform:scale(1.05); }
.duo__grad{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,13,29,.94) 4%, rgba(8,13,29,.45) 42%, transparent 72%);
}
.duo__txt{ position:absolute; left:0; right:0; bottom:0; padding:clamp(20px,3vw,34px); }
.duo__tag{
  display:inline-block; font-family:var(--f-label); font-size:.62rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--pink); margin-bottom:10px;
}
.duo__txt h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.3rem,5.2vw,4.1rem); line-height:.88;
  text-transform:uppercase; margin:0 0 10px; color:var(--cream);
}
.duo__txt p{
  font-style:italic; color:var(--fg); margin:0 0 14px;
  font-size:.98rem; max-width:34ch;
}
.duo__more{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--vice-hot); font-weight:700;
}
.duo__more::after{ content:"→"; transition:transform .25s var(--ease); }
.duo__card:hover .duo__more::after{ transform:translateX(5px); }

.cast{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.ccard{
  display:block; text-decoration:none; color:inherit;
  position:relative; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden;
  cursor:pointer; border:1px solid var(--line); background:var(--surf);
  transition:transform .45s var(--ease-out), border-color .3s var(--ease);
}
.ccard:hover, .ccard:focus-visible{ transform:translateY(-5px); border-color:var(--line2); }
.ccard video, .ccard img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .4s var(--ease), transform .8s var(--ease-out);
}
.ccard video{ opacity:0; }
.ccard.is-playing video{ opacity:1; }
.ccard.is-playing img{ opacity:0; }
.ccard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,13,29,.93) 2%, rgba(8,13,29,.28) 46%, transparent 70%);
}
.ccard__txt{ position:absolute; left:0; right:0; bottom:0; padding:20px; z-index:2; }
.ccard__txt h3{
  font-family:var(--f-display); font-weight:800; font-size:1.8rem; line-height:.94;
  text-transform:uppercase; margin:0 0 5px; color:var(--cream);
}
.ccard__txt span{
  font-family:var(--f-label); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lav);
}
.ccard__ring{
  position:absolute; inset:auto 16px 16px auto; z-index:2;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line2); background:rgba(11,17,36,.6);
  display:grid; place-items:center; color:var(--cream);
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.ccard:hover .ccard__ring{ background:var(--pink); color:var(--ink); border-color:var(--pink); }

/* ══════════ 5 · LEONIDA ══════════ */
.leonida{ position:relative; }
.leonida::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(80% 55% at 12% 0%, rgba(69,224,218,.09), transparent 62%);
}
.places__tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s4);
  padding-bottom:4px;
}
.ptab{
  padding:10px 18px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  color:var(--fg-mid); font-weight:600; font-size:.88rem;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ptab:hover{ background:rgba(255,255,255,.11); color:var(--fg); }
.ptab[aria-selected="true"]{
  background:var(--cream); color:#12121a; border-color:var(--cream); font-weight:700;
}
.places__stage{ position:relative; }
.pane{
  display:grid; grid-template-columns:1.15fr 1fr; gap:var(--s4);
  animation:fadeUp .5s var(--ease-out);
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} }
.pane__hero{
  position:relative; border-radius:var(--r); overflow:hidden;
  aspect-ratio:16/10; border:1px solid var(--line);
}
.pane__hero img{ width:100%; height:100%; object-fit:cover; }
.pane__hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,13,29,.8), transparent 55%);
}
.pane__badge{
  position:absolute; left:18px; top:18px; z-index:2;
  font-family:var(--f-label); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); background:var(--cream);
  padding:6px 12px; border-radius:999px; font-weight:700;
}
.pane__info h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.3rem,4.7vw,3.6rem); line-height:.92; text-transform:uppercase;
  margin:0 0 6px; color:var(--cream);
}
.pane__sub{
  font-family:var(--f-label); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--vice); margin:0 0 var(--s3);
}
.pane__thumbs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:var(--s3);
}
.pane__thumbs button{
  padding:0; border:1px solid var(--line); border-radius:9px; overflow:hidden;
  background:none; cursor:pointer; aspect-ratio:16/10;
  transition:border-color .2s var(--ease), transform .3s var(--ease-out);
}
.pane__thumbs button:hover{ border-color:var(--pink); transform:translateY(-3px); }
.pane__thumbs img{ width:100%; height:100%; object-fit:cover; }

/* ══════════ 6 · TRAILER ══════════ */
.trailers{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.tcard{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:var(--tint, var(--surf)); border:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.tcard:hover{ transform:translateY(-5px); box-shadow:0 30px 66px -34px rgba(0,0,0,.9); }
.tcard--wide{ grid-column:1 / -1; flex-direction:row; align-items:stretch; min-height:min(46vh,400px); }
.tcard--wide > img{ flex:0 0 52%; width:52%; min-width:0; height:auto; object-fit:cover; }
.tcard--wide .tcard__body{ flex:1 1 auto; min-width:0; }
.tcard > img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.tcard--wide > img{ aspect-ratio:auto; }
.tcard__body{ padding:clamp(20px,2.6vw,34px); display:flex; flex-direction:column; gap:10px; justify-content:center; }
.tcard__body h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.85rem,3.7vw,3rem); line-height:.94;
  text-transform:uppercase; margin:0; color:var(--cream);
}
.tcard__body p{ margin:0; color:rgba(255,255,255,.78); font-size:.95rem; }
.tcard__badge{
  align-self:flex-start;
  font-family:var(--f-label); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lav); border:1px solid var(--line2); padding:5px 11px; border-radius:999px;
}
.tcard__badge--live{ color:#fff; background:var(--red); border-color:var(--red); }
.tcard__acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.tcard__play{
  position:absolute; left:50%; top:calc(50% - 42px); transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.94); color:#111; border:0;
  display:grid; place-items:center; padding-left:4px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  transition:transform .28s var(--ease), background-color .2s var(--ease);
}
.tcard:hover .tcard__play{ transform:translate(-50%,-50%) scale(1.09); background:#fff; }

/* ══════════ 7 · ULTIMATE ══════════ */
.ultimate{ position:relative; }
.ultimate__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 45% at 82% 12%, rgba(232,84,140,.16), transparent 62%),
    radial-gradient(55% 45% at 8% 70%, rgba(69,224,218,.09), transparent 62%);
}
.ue-top{
  display:grid; grid-template-columns:minmax(280px,420px) 1fr;
  gap:var(--s5); align-items:center; margin-bottom:var(--s5);
}

/* 3D-Hülle */
.case-wrap{
  position:relative; perspective:1400px; padding:30px 0 50px;
  display:grid; place-items:center;
}
.case{
  position:relative; width:min(260px,62vw); aspect-ratio:0.71;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,-8deg)) rotateY(var(--ry,-26deg));
  transition:transform .18s var(--ease);
  cursor:grab;
}
.case.is-idle{ animation:caseSpin 16s linear infinite; }
.case:active{ cursor:grabbing; }
@keyframes caseSpin{
  0%{ transform:rotateX(-8deg) rotateY(-26deg); }
  50%{ transform:rotateX(-8deg) rotateY(-8deg); }
  100%{ transform:rotateX(-8deg) rotateY(-26deg); }
}
.case__face{ position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; }
.case__face img{ width:100%; height:100%; object-fit:cover; }
.case__front{
  transform:translateZ(11px);
  border-radius:3px 8px 8px 3px;
  box-shadow:inset 2px 0 0 rgba(0,0,0,.5), inset -1px 0 0 rgba(255,255,255,.14);
}
.case__back{
  transform:rotateY(180deg) translateZ(11px);
  border-radius:8px 3px 3px 8px; filter:brightness(.55) saturate(.8);
}
.case__spine{
  width:22px; left:-11px;
  transform:rotateY(-90deg) translateZ(0px);
  transform-origin:right center;
  background:linear-gradient(180deg,#2b1240,#5a1f5e 40%,#a53a7e);
  display:grid; place-items:center;
}
.case__spine span{
  font-family:var(--f-display); font-weight:800; font-size:.62rem; letter-spacing:.14em;
  color:var(--cream); white-space:nowrap;
  transform:rotate(90deg); text-transform:uppercase;
}
.case__spine2{
  width:22px; right:-11px; left:auto;
  transform:rotateY(90deg); transform-origin:left center;
  background:linear-gradient(180deg,#14141c,#0a0a10);
}
.case__top, .case__bottom{
  height:22px; inset:auto 0 auto 0;
  background:linear-gradient(90deg,#1a1a24,#0d0d14);
}
.case__top{ top:-11px; transform:rotateX(90deg); transform-origin:center bottom; }
.case__bottom{ bottom:-11px; transform:rotateX(-90deg); transform-origin:center top; }
.case__shadow{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  width:66%; height:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(232,84,140,.42), transparent 74%);
  filter:blur(9px);
}
.case__hint{
  font-family:var(--f-label); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-dim); margin:var(--s2) 0 0;
}

.ue-facts{
  list-style:none; padding:0; margin:var(--s3) 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.ue-facts li{
  background:var(--surf); padding:16px 14px; text-align:center;
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--f-label); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim);
}
.ue-facts li span{
  font-family:var(--f-display); font-weight:800; font-size:1.75rem; letter-spacing:0;
  color:var(--cream); text-transform:none;
}
.ue-note{ font-size:.84rem; color:var(--fg-dim); }
.ue-note em{ color:var(--fg-mid); font-style:normal; }

.ue-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2);
  margin-bottom:var(--s5);
}
.ue-item{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--surf);
  cursor:pointer; text-align:left; padding:0;
  transition:transform .35s var(--ease-out), border-color .25s var(--ease);
}
.ue-item:hover{ transform:translateY(-4px); border-color:var(--pink); }
.ue-item img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.ue-item__t{ display:block; padding:14px 16px 16px; }
.ue-item__t b{ display:block; font-size:.95rem; color:var(--cream); font-weight:700; margin-bottom:3px; }
.ue-item__t span{
  font-family:var(--f-label); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim);
}

.vvcp{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s4);
  align-items:center; padding:var(--s4);
  background:linear-gradient(135deg, rgba(75,47,84,.55), rgba(36,49,82,.42));
  border:1px solid var(--line); border-radius:var(--r);
}
.vvcp__img{ border-radius:10px; overflow:hidden; aspect-ratio:16/10; }
.vvcp__img img{ width:100%; height:100%; object-fit:cover; }
.vvcp__txt h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.95rem,3.9vw,3.1rem); line-height:.93;
  text-transform:uppercase; margin:10px 0 12px; color:var(--cream);
}
.vvcp__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:var(--s2); }
.vvcp__thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:7px; border:1px solid var(--line); }

/* ══════════ 8 · GALERIE ══════════ */
.gal-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s4); }
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.gitem{
  display:block; width:100%; margin:0; padding:0;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--surf); cursor:pointer;
  transition:border-color .2s var(--ease), transform .35s var(--ease-out);
}
.gitem:hover{ border-color:var(--pink); transform:translateY(-3px); }
.gitem img{ width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; }
.gal-more{ display:block; margin:var(--s4) auto 0; }
.gal-more[hidden]{ display:none; }

/* ══════════ 9 · NEWS ══════════ */
.news{ position:relative; }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); align-items:start; }
.news-col__h{
  font-family:var(--f-label); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--vice); margin:0 0 var(--s2); font-weight:700;
}
.nitem{
  display:block; padding:20px; margin-bottom:12px; text-decoration:none;
  background:var(--surf); border:1px solid var(--line); border-radius:12px;
  transition:background-color .22s var(--ease), border-color .22s var(--ease), transform .3s var(--ease-out);
}
.nitem:hover{ background:var(--surf2); border-color:var(--line2); transform:translateX(4px); }
.nitem time{
  font-family:var(--f-label); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lav); display:block; margin-bottom:8px;
}
.nitem strong{ display:block; color:var(--lav-hi); font-size:1.02rem; line-height:1.34; margin-bottom:7px; }
.nitem p{ margin:0 0 10px; font-size:.88rem; }
.nitem__go{
  font-family:var(--f-label); font-size:.62rem; letter-spacing:.14em;
  color:var(--vice-hot); text-transform:uppercase;
}
.nitem__go::after{ content:" ↗"; }

.leak{ background:var(--surf); border:1px solid var(--line); border-radius:12px; padding:22px; }
.leak__status{ display:flex; gap:12px; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line); }
.leak__status strong{ display:block; color:var(--fg); font-size:1rem; }
.leak__status span{ font-family:var(--f-label); font-size:.64rem; letter-spacing:.1em; color:var(--fg-dim); }
.dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.dot--red{ background:#ff4646; box-shadow:0 0 0 0 rgba(255,70,70,.6); animation:pulse 2s infinite; }
.dot--green{ background:#3ddc84; box-shadow:0 0 0 0 rgba(61,220,132,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 11px rgba(255,70,70,0);} 100%{ box-shadow:0 0 0 0 rgba(255,70,70,0);} }
.leak__list{ list-style:none; padding:0; margin:16px 0; display:grid; gap:11px; }
.leak__list li{
  font-size:.88rem; color:var(--fg-mid); line-height:1.5;
  padding-left:14px; border-left:2px solid var(--line2);
}
.leak__list b{
  font-family:var(--f-label); font-size:.66rem; letter-spacing:.1em;
  color:var(--cream); display:block; margin-bottom:2px; text-transform:uppercase;
}
.leak__warn{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,70,70,.09); border:1px solid rgba(255,70,70,.28);
  border-radius:9px; padding:13px 15px; margin:0 0 14px;
  font-size:.82rem; color:#ffc9c9; line-height:1.5;
}
.leak__warn svg{ flex:none; margin-top:2px; color:#ff6b6b; }
.leak__srcs{ display:flex; gap:8px; flex-wrap:wrap; }
.leak__srcs a{
  font-family:var(--f-label); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 11px; border:1px solid var(--line); border-radius:999px;
  color:var(--fg-dim); text-decoration:none; transition:color .2s, border-color .2s;
}
.leak__srcs a:hover{ color:var(--cream); border-color:var(--line2); }

.xfeed{
  display:block; padding:20px; margin-bottom:12px; text-decoration:none;
  background:linear-gradient(135deg, rgba(44,56,104,.55), rgba(22,22,31,.9));
  border:1px solid var(--line); border-radius:12px;
  transition:border-color .22s var(--ease), transform .3s var(--ease-out);
}
.xfeed:hover{ border-color:var(--cyan); transform:translateY(-3px); }
.xfeed__live{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:9px;
  font-family:var(--f-label); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:#3ddc84;
}
.xfeed strong{ display:block; color:var(--fg); font-size:1.02rem; margin-bottom:6px; }
.xfeed p{ margin:0; font-size:.86rem; }

.xlist{ display:grid; gap:8px; }
.xrow{
  display:flex; align-items:center; gap:12px; padding:13px 16px; text-decoration:none;
  background:var(--surf); border:1px solid var(--line); border-radius:10px;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .25s var(--ease-out);
}
.xrow:hover{ background:var(--surf2); border-color:var(--line2); transform:translateX(4px); }
.xrow__av{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:1.1rem;
  color:#fff; background:linear-gradient(135deg,var(--vice),#6b2f8f);
}
.xrow__b{ min-width:0; flex:1; }
.xrow__b b{ display:block; font-size:.9rem; color:var(--fg); }
.xrow__b span{
  font-family:var(--f-label); font-size:.66rem; color:var(--fg-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;
}
.xrow__go{ color:var(--fg-dim); flex:none; }
.xnote{ font-size:.76rem; color:var(--fg-dim); margin-top:14px; }

/* ══════════ Finale ══════════ */
.finale{
  position:relative; min-height:76vh; display:grid; place-items:center;
  text-align:center; padding:var(--s7) var(--pad); overflow:hidden;
}
.finale__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 26%;
  z-index:-2; filter:saturate(.85);
}
.finale::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(11,17,36,.62) 40%, rgba(11,17,36,.9) 100%);
}
.finale__inner{ position:relative; }
.finale .kicker{ color:var(--pink); }
.finale .kicker span{ font-family:var(--f-display); font-weight:800; font-size:1.65rem; color:var(--cream); letter-spacing:0; }

/* ══════════ Footer ══════════ */
.footer{
  border-top:1px solid var(--line); background:var(--bg2);
  padding:var(--s5) var(--pad) var(--s4);
}
.footer__top{
  max-width:var(--wrap); margin:0 auto var(--s4);
  display:flex; gap:var(--s3); align-items:flex-start;
}
.vi-mark--foot{ height:26px; fill:rgba(255,255,255,.5); filter:none; }
.footer__top svg{ flex:none; margin-top:4px; }
.footer__top p{ font-size:.8rem; color:var(--fg-dim); max-width:76ch; margin:0; line-height:1.65; }
.footer__links{
  max-width:var(--wrap); margin:0 auto;
  display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center;
  padding-top:var(--s3); border-top:1px solid var(--line);
  font-size:.78rem;
}
/* min-height 24px: darunter liegt das Ziel unter der Mindestgröße für
   Zeigereingaben (WCAG 2.2, 2.5.8) — die Zeile war 21px hoch. */
.footer__links a{
  color:var(--fg-mid); text-decoration:none;
  display:inline-flex; align-items:center; min-height:24px;
}
.footer__links a:hover{ color:var(--cream); text-decoration:underline; }
.footer__esrb{ margin-left:auto; color:var(--fg-dim); font-family:var(--f-label); font-size:.66rem; }

/* ══════════ Overlays ══════════ */
.modal, .lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(7,12,27,.93);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:grid; place-items:center;
  padding:calc(var(--nav-h) + 20px) var(--pad) var(--s4);
  animation:ovIn .28s var(--ease-out);
}
.modal[hidden], .lightbox[hidden]{ display:none; }
@keyframes ovIn{ from{ opacity:0; } }
.modal__close{
  position:fixed; top:18px; right:var(--pad); z-index:6;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid var(--line2);
  display:grid; place-items:center; cursor:pointer; color:var(--fg);
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.modal__close:hover{ background:var(--pink); color:var(--ink); transform:rotate(90deg); }

.modal__panel{
  width:min(1060px,100%); max-height:100%; overflow-y:auto;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  animation:panelIn .35s var(--ease-out);
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(22px) scale(.985); } }

.modal--dark{ background:rgba(6,10,24,.97); }
.yt-wrap{
  width:min(1200px,100%); aspect-ratio:16/9; max-height:100%;
  display:grid;
}
/* Ohne eigene Höhe fällt das iframe auf seine Standardhöhe von 150px zurück */
#ytHolder{ width:100%; height:100%; min-height:0; }
.yt-wrap iframe{
  display:block; width:100%; height:100%;
  border:0; border-radius:10px; background:#000;
}

.lb__fig{ margin:0; display:grid; gap:14px; justify-items:center; max-height:100%; }
.lb__fig img{
  max-width:min(1500px,92vw); max-height:78vh; width:auto; height:auto;
  border-radius:8px; box-shadow:0 40px 100px -30px rgba(0,0,0,.95);
  animation:panelIn .3s var(--ease-out);
}
.lb__fig figcaption{
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-dim); text-align:center;
}
.lb__nav{
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.09); border:1px solid var(--line2);
  display:grid; place-items:center; color:var(--fg);
  transition:background-color .2s var(--ease);
}
.lb__nav:hover{ background:var(--pink); color:var(--ink); }
.lb__prev{ left:max(14px, calc(var(--pad) - 24px)); }
.lb__next{ right:max(14px, calc(var(--pad) - 24px)); }

/* ══════════ Responsive ══════════ */
@media (max-width:1180px){
  .cast{ grid-template-columns:repeat(3,1fr); }
  .ue-grid{ grid-template-columns:repeat(3,1fr); }
  .gallery{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px){
  :root{ --s7:96px; --s6:72px; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__mini{ display:none; }
  .story__grid{ grid-template-columns:1fr; }
  .story__media{ aspect-ratio:16/10; }
  .pane{ grid-template-columns:1fr; }
  .news-grid{ grid-template-columns:1fr 1fr; }
  .news-col:last-child{ grid-column:1 / -1; }
  .ue-top{ grid-template-columns:1fr; }
  .case-wrap{ order:2; }
  .vvcp{ grid-template-columns:1fr; }

}
@media (max-width:860px){
  body{ font-size:16px; }
  .duo{ grid-template-columns:1fr; }
  .cast{ grid-template-columns:repeat(2,1fr); }
  .trailers{ grid-template-columns:1fr; }
  .tcard--wide{ flex-direction:column; }
  .tcard--wide > img{ flex:none; width:100%; aspect-ratio:16/9; }
  .ue-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }

  .hero{ height:280vh; }
}
@media (max-width:560px){
  :root{ --s7:72px; --s5:48px; }
  .ticker__track{ font-size:.58rem; }
  .hero__pin{ padding-bottom:112px; }
  .hero__logo{ width:min(300px,78vw); }
  .countdown{ gap:2px; padding:14px 10px; width:100%; justify-content:space-between; }
  .cd__unit{ min-width:auto; flex:1; }
  .cd__sep{ display:none; }
  .cd__num{ font-size:clamp(1.9rem,10vw,2.9rem); }
  .cd__lab{ font-size:.52rem; letter-spacing:.14em; }
  .hero__actions{ flex-direction:column; }
  .hero__actions .btn{ width:100%; }
  .story__facts{ grid-template-columns:1fr; }
  .ue-facts{ grid-template-columns:repeat(2,1fr); }
  .cast{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }

  .pane__thumbs{ grid-template-columns:repeat(2,1fr); }
  .vvcp__thumbs{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ flex-direction:column; }
  .footer__esrb{ margin-left:0; }
  .lb__nav{ width:44px; height:44px; }
  .lb__prev{ left:8px; } .lb__next{ right:8px; }
}

/* ══════════ Reduced Motion ══════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .ticker__track{ animation:none; }
  .case.is-idle{ animation:none; }
  .scrub{ height:auto; }
  .scrub__sticky{ position:relative; height:auto; aspect-ratio:16/9; }
  .scrub__frame{ transform:none; }
  .scrub{ margin-top:0; }
  .rise-card{ width:auto; margin:0; border-radius:0; background:var(--bg); }
  .rise-card::before{ display:none; }
  .hero{ height:auto; }
  .hero__pin{ position:relative; height:auto; min-height:100svh; }
  .hero__title, .hero__body, .hero__scroll{ opacity:1 !important; transform:none !important; }
  .hero__fadeout{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBIL & TOUCH
   ───────────────────────────────────────────────────────────────────────
   Alles ab hier greift ausschließlich auf schmalen Bildschirmen oder auf
   Geräten ohne echten Hover. Der Desktop-Zweig darüber bleibt unberührt.
   Reihenfolge: Hover → Gesten → Effekte → Nav → Hero → Video → Inhalte
   → Overlays → Querformat.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════ M1 · Hover-Zustände auf Touch abschalten ══════════ */
/* Android führt beim Tap einen synthetischen Hover aus. Ohne diesen Block
   bleibt die Karte nach dem Antippen dauerhaft angehoben stehen. */
@media (hover: none){
  .tcard:hover,
  .ccard:hover,
  .duo__card:hover,
  .ue-item:hover,
  .gitem:hover,
  .nitem:hover,
  .xrow:hover,
  .xfeed:hover,
  .pane__thumbs button:hover,
  .btn:hover{
    transform:none;
    box-shadow:none;
  }
  .btn--pink:hover{ --btn-bg:var(--pink); box-shadow:none; }
  .btn--red:hover{ --btn-bg:var(--red); }
  .btn--ghost:hover{ --btn-bg:rgba(255,255,255,.06); }
  .tcard:hover .tcard__play{ transform:translate(-50%,-50%); background:rgba(255,255,255,.94); }
  .duo__card:hover .duo__vid{ transform:none; }
  .duo__card:hover .duo__more::after{ transform:none; }
  .nav__logo:hover .vi-mark{ transform:none; fill:#fff; }
  .nav__links a:hover{ background:none; color:rgba(255,255,255,.80); }
  .mobile-menu nav a:hover{ color:var(--cream); }
  .modal__close:hover{ transform:none; background:rgba(255,255,255,.1); color:var(--fg); }
  .lb__nav:hover{ background:rgba(255,255,255,.09); color:var(--fg); }
  .ccard:hover .ccard__ring{ background:rgba(11,17,36,.6); color:var(--cream); border-color:var(--line2); }
  .ptab:hover{ background:rgba(255,255,255,.05); color:var(--fg-mid); }
  .ptab[aria-selected="true"], .ptab[aria-selected="true"]:hover{
    background:var(--cream); color:#12121a; border-color:var(--cream);
  }

  /* Stattdessen eine kurze Rückmeldung beim Antippen */
  .ccard:active,
  .duo__card:active,
  .gitem:active,
  .ue-item:active,
  .tcard:active,
  .nitem:active,
  .xrow:active,
  .xfeed:active,
  .pane__thumbs button:active,
  .ptab:active,
  .btn:active{
    transform:scale(.975);
    transition-duration:.09s;
  }

  a, button, [role="button"], [tabindex]{ -webkit-tap-highlight-color:transparent; }
}

/* ══════════ M2 · Gesten & Scroll-Verhalten ══════════ */
/* Die Hülle nimmt waagerechte Wischer für die Drehung, senkrechte gehen
   weiter an die Seite — ohne das lässt sich über der Hülle nicht scrollen. */
.case{ touch-action:pan-y; }
.modal, .lightbox{ overscroll-behavior:contain; }
.modal__panel{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
/* Kein Gummiband am Seitenende, das den gepinnten Hero verschiebt */
html{ overscroll-behavior-y:none; }
/* Ohne manipulation wartet Android nach jedem Tap 300 ms auf einen
   möglichen Doppeltipp — alles fühlt sich träge an. */
@media (hover: none){
  a, button, [role="button"]{ touch-action:manipulation; }
  .case{ touch-action:pan-y; }
}

/* ══════════ M3 · Aufwendige Effekte auf Touch entschärfen ══════════ */
/* backdrop-filter und mix-blend-mode kosten auf Mittelklasse-Android in
   jedem Frame Zeit. Genau dort, wo der Hero beim Scrollen ohnehin Deckkraft
   und Skalierung animiert, führt das zu sichtbarem Ruckeln. */
@media (hover: none){
  .countdown{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(11,17,36,.74);
  }
  .mobile-menu{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:var(--bg);
  }
  .modal, .lightbox{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(7,12,27,.985);
  }
  .hero__grain{ display:none; }
  .hero__logo{ filter:drop-shadow(0 14px 34px rgba(0,0,0,.7)); }
  .story__media::after{ mix-blend-mode:normal; opacity:.5; }
}

/* ══════════ M4 · Nav, Menü, Safe-Area ══════════ */
@media (max-width:1024px){
  :root{ --nav-h:62px; }
  .nav{
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
    gap:var(--s2);
  }
  .vi-mark{ height:25px; }
  .nav__right{ margin-left:auto; }
  .nav__burger{ margin-right:-9px; }

  .mobile-menu{
    padding-top:var(--s3);
    padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom));
    padding-left:max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
    gap:var(--s3);
    overflow-y:auto;
  }
  .mobile-menu nav a{ font-size:clamp(1.6rem,7.4vw,2.2rem); padding:11px 0; }
}
@media (max-width:380px){
  .nav{ padding-left:14px; padding-right:14px; }
}

/* ══════════ M5 · Hero auf dem Handy ══════════ */
/* Warum svh statt vh: Android blendet beim Scrollen die URL-Leiste aus.
   `100vh` ist dort die *große* Ansicht (Leiste weg), `100svh` die kleine.
   `.hero__pin` rechnet in svh — die Gesamthöhe muss mitziehen, sonst passt
   die Ausblend-Staffel nicht zur tatsächlichen Scrollstrecke.
   Zusätzlich ist die Strecke kürzer: 320vh sind am Handy gefühlt endlos. */
@media (max-width:860px){
  .hero{ height:240svh; }
}
@media (max-width:560px){
  .hero{ height:205svh; }
  .hero__pin{ padding:calc(var(--nav-h) + 12px) var(--pad) calc(84px + env(safe-area-inset-bottom)); }
  .hero__logo{ width:min(272px,68vw); }
  .hero__sub{ font-size:1rem; margin:12px auto 18px; max-width:32ch; }
  .countdown{ border-radius:15px; padding:12px 8px; }
  .cd__num{ font-size:clamp(1.75rem,9.4vw,2.7rem); }
  .cd__lab{ font-size:.5rem; margin-top:6px; }
  .countdown__note{ font-size:.63rem; letter-spacing:.06em; margin:11px 0 18px; }
  .hero__platforms{ gap:var(--s2); margin-top:var(--s2); font-size:.62rem; letter-spacing:.16em; }
  .hero__platforms li + li{ padding-left:var(--s2); }
  .hero__scroll{ bottom:calc(16px + env(safe-area-inset-bottom)); font-size:.56rem; }
}

/* ══════════ M6 · Scroll-Videos auf dem Handy ══════════ */
/* Bewusst KEINE kürzere Strecke auf dem Handy — die gab es hier einmal
   (250 bzw. 215 svh) und sie hat das Video komplett unsichtbar gemacht.

   Das freie Fenster, in dem das Video weder vom Abschnitt davor noch von
   der Karte danach verdeckt wird, ist:

       frei = Höhe − 200svh − --rise

   (100 svh gehen an den negativen margin-top, weitere 100 an die Karte,
   die schon ins Bild kommt, bevor sie oben ansteht.) Mit --rise 130 aus
   #story/#news ergab das auf dem Handy 215 − 200 − 130 = −115 svh: die
   Story lag über eine Bildschirmhöhe lang schon über dem Trailer, das
   Video dazwischen war nie zu sehen. Am Desktop — und im Desktop-Modus
   des Handys — sind es 400 − 200 − 130 = +70 svh.

   Die Höhe steht deshalb überall auf 400svh (siehe .scrub oben). Wer sie
   kürzen will, muss --rise im selben Zug senken, sonst verschwindet das
   Video wieder. */

/* ══════════ M7 · Inhalte ══════════ */
/* Filter- und Tab-Leisten werden zum wischbaren Streifen statt zu einem
   drei Zeilen hohen Block, der die halbe Bildhöhe frisst. */
@media (max-width:720px){
  .places__tabs, .gal-filter{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    padding-bottom:2px;
  }
  .places__tabs::-webkit-scrollbar, .gal-filter::-webkit-scrollbar{ display:none; }
  .ptab{ flex:0 0 auto; scroll-snap-align:start; }
}

@media (max-width:860px){
  .sec__head{ margin-bottom:var(--s4); }
  .sec__intro{ font-size:1rem; }
  .tcard--wide{ min-height:0; }
  .tcard__play{ width:60px; height:60px; top:calc(50% - 34px); }
  .story{ padding-inline:clamp(18px,4vw,32px); }
  .story__media{ aspect-ratio:4/3; }
  .rise-card.sec--pad{ padding-inline:clamp(18px,4vw,32px); }
  .news-grid{ grid-template-columns:1fr; }
  .news-col:last-child{ grid-column:auto; }
  .vvcp{ grid-template-columns:1fr; padding:var(--s3); }
  .ue-top{ gap:var(--s4); }
  .case-wrap{ padding:16px 0 34px; }
  .finale{ min-height:64svh; }
}

@media (max-width:560px){
  /* Zwei Spalten schlagen eine: 118 Bilder untereinander sind kein Stöbern */
  .gallery{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .cast{ grid-template-columns:repeat(2,1fr); gap:10px; }
  /* rechts Platz für den Pfeil-Ring, sonst läuft der Untertitel hinein */
  .ccard__txt{ padding:13px 44px 13px 13px; }
  .ccard__txt h3{ font-size:1.15rem; }
  .ccard__txt span{ font-size:.54rem; letter-spacing:.12em; }
  .ccard__ring{ inset:auto 10px 10px auto; width:28px; height:28px; }
  .ccard__ring svg{ width:12px; height:12px; }
  .duo__card{ aspect-ratio:4/3; }
  .duo__txt h3{ font-size:2rem; }
  .ue-grid{ gap:10px; }
  .ue-item__t{ padding:11px 12px 13px; }
  .ue-item__t b{ font-size:.86rem; }
  .leak, .nitem, .xfeed{ padding:16px; }
  .footer__links{ gap:var(--s2) var(--s3); }
  .footer__top p{ font-size:.76rem; }
}

/* ══════════ M8 · Overlays auf dem Handy ══════════ */
@media (max-width:860px){
  .modal, .lightbox{
    padding:calc(var(--nav-h) + 6px) 12px calc(12px + env(safe-area-inset-bottom));
  }
  .modal__close{
    top:calc(10px + env(safe-area-inset-top));
    right:12px; width:42px; height:42px;
  }
  .modal__panel{ border-radius:16px; }

  /* Die Pfeile lagen mittig über dem Bild — auf 390px verdecken sie es.
     Stattdessen stehen sie unter der Bildunterschrift. */
  .lightbox{
    grid-template-columns:1fr;
    grid-template-rows:1fr auto;
    grid-template-areas:"fig" "nav";
    align-content:center;
    justify-items:center;
    gap:12px;
  }
  .lb__fig{ grid-area:fig; align-self:center; gap:10px; }
  .lb__fig img{ max-width:100%; max-height:62dvh; }
  .lb__nav{
    position:static; transform:none; grid-area:nav;
    width:46px; height:46px; align-self:center;
  }
  .lb__prev{ justify-self:start; margin-left:16vw; }
  .lb__next{ justify-self:end; margin-right:16vw; }
}

/* ══════════ M9 · Querformat auf kleinen Geräten ══════════ */
/* Ein Handy im Querformat hat rund 375px Höhe — untereinander passt der
   Hero-Block dort nicht mehr. Stattdessen steht das Logo links und der
   Textblock rechts daneben; die überschüssige Breite ist ja vorhanden. */
@media (max-height:560px) and (orientation:landscape){
  :root{ --nav-h:54px; }
  .hero{ height:200svh; }
  .hero__pin{ padding:calc(var(--nav-h) + 6px) var(--pad) 26px; }

  .hero__inner{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:clamp(16px,4vw,44px);
    text-align:left;
    max-width:none;
    width:100%;
  }
  .hero__title{ justify-content:flex-start; }
  .hero__logo{ width:min(215px,26vw); }
  .hero__sub{ margin:0 0 10px; max-width:36ch; font-size:.86rem; }
  .countdown{ padding:8px 14px; border-radius:13px; }
  .cd__unit{ min-width:clamp(44px,6.4vw,62px); }
  .cd__num{ font-size:clamp(1.4rem,4.6vh,2rem); }
  .cd__lab{ font-size:.48rem; margin-top:3px; }
  .cd__sep{ display:none; }
  .countdown__note{ margin:8px 0 12px; font-size:.6rem; }
  .hero__actions{ flex-direction:row; justify-content:flex-start; gap:10px; }
  .hero__actions .btn{ width:auto; }
  .btn--lg{ min-height:40px; padding:9px 18px; font-size:.86rem; }
  .hero__platforms{ display:none; }
  .hero__scroll{ display:none; }

  /* Kein kürzeres .scrub im Querformat — 200 svh ergäben ein freies
     Fenster von −130 svh, das Video wäre unsichtbar (Rechnung in M6). */
  .lb__fig img{ max-height:70dvh; }
  .modal, .lightbox{ padding-top:calc(var(--nav-h) + 4px); }

}