/* ============================================================================
   SH_FILM_V1 — Scroll-gesteuertes Video-Scrollytelling (Hero der Startseite).
   16 Hochformat-Clips (9:16) werden beim Scrollen Kapitel für Kapitel abgespielt.
   Desktop = zentriertes Portrait-Panel, Copy in den dunklen Rändern (kein Overlap).
   Mobil = randlos füllend, der eingebrannte Clip-Text trägt die Mitte (kein Doppel-Text).
   Signatur = System-Telemetrie-Leiste + Ion-Eck-Ticks ums Panel ("überwachter Screen").
   Nutzt die Tokens der Startseite (--bg/--ion/--olive-t/--blue-t/--disp/--mono …).
   ========================================================================== */

/* padding:0 — der Film ist full-bleed unter der (fixen) Nav; die globale section-Polsterung
   (padding-top:92px) darf das Sticky-Stage NICHT nach unten schieben (sonst Skip/Telemetrie
   bei Scroll 0 unter der Falz). */
.film{position:relative;background:var(--bg);z-index:1;padding:0}
/* Slide-für-Slide-Snapping: ein Wisch = genau ein Clip, kein Überspringen.
   `proximity` (statt mandatory) → kein „Snap-Gefängnis" an der Film-Grenze
   (Content unter dem Film bleibt frei erreichbar, Skip landet sauber);
   `scroll-snap-stop:always` an den Markern verhindert trotzdem das Überspringen. */
html.film-snap{scroll-snap-type:y proximity}
.film__snaps{position:absolute;inset:0;pointer-events:none}
.film__snap{position:absolute;left:0;width:1px;height:1px;opacity:0;pointer-events:none;
  scroll-snap-align:start;scroll-snap-stop:always}
@media (prefers-reduced-motion:reduce){html.film-snap{scroll-snap-type:none}}
/* 16 Kapitel · ~60vh Scroll je Kapitel + ein Stage (100svh) Auslauf */
.film__track{position:relative;height:calc(16 * 60vh + 100svh)}
@media (max-width:820px){.film__track{height:calc(16 * 56vh + 100svh)}}
.film__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  background:radial-gradient(64% 58% at 50% 44%,rgba(74,110,150,.14),transparent 72%),var(--bg)}

/* Kontakt-Bubble im Film-Hero ausblenden (sie überlappte sonst Text/Telemetrie, v. a. mobil).
   Erscheint weich, sobald man aus dem Hero scrollt. */
#sh-contact{transition:opacity .4s var(--ease,ease),visibility .4s,transform .25s var(--ease,ease)}
/* !important schlägt die Puls-Animation der Bubble (die sonst opacity überschreibt) */
.film-hero-in #sh-contact{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}

/* ---- Video-Reel als iPhone-Screen: gestapelte Clips, nur der aktive sichtbar (Crossfade) ---- */
.film__reel{position:absolute;inset:0;z-index:0;border-radius:clamp(26px,2.6vw,40px);overflow:hidden;
  box-shadow:0 0 0 8px #0b0f14, 0 0 0 9px rgba(169,219,245,.16), 0 22px 54px -46px rgba(0,0,0,.8)}
.film__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .7s var(--ease,cubic-bezier(.22,.61,.36,1));background:var(--bg);
  will-change:opacity;pointer-events:none}
.film__vid.is-active{opacity:1}

/* iPhone-Rahmen-Overlay: Dynamic-Island oben + sichtbare Play-Pille „2 Min · mit Ton" unten.
   JS positioniert .film__frame deckungsgleich zum Reel (nur Desktop). */
.film__frame{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s ease}
.film.is-ready .film__frame{opacity:1}
/* Notch entfällt — sie überdeckte den eingebrannten Clip-Text oben. Runder Bezel reicht als Phone-Look. */
.film__island{display:none}
.film__play{position:absolute;left:50%;bottom:-104px;transform:translateX(-50%);pointer-events:auto;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(169,219,245,.55);background:rgba(9,13,17,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);transition:border-color .2s,background .2s,transform .2s}
.film__play:hover{border-color:var(--ion);background:rgba(9,13,17,.92);transform:translateX(-50%) translateY(-2px)}
.film__play-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ion);color:#0b0f14;font-size:9px;padding-left:1px}

/* Scanline-Textur + seitliche Vignette (Copy sitzt satt in den Rändern) */
.film__scan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
/* Rand-Vignette entfällt (Video sitzt jetzt rechts, Text links auf dunklem Grund → keine Abdunklung nötig) */
.film__edges{display:none}
.film__scrim{display:none}

/* ---- Kapitel-Copy ---- */
.film__copy{position:absolute;inset:0;z-index:4;pointer-events:none}
.film__chapter{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  align-content:center;column-gap:clamp(10px,1.2vw,20px);padding:96px max(28px, calc((100% - 1160px) / 2 + 28px)) 96px;
  visibility:hidden}
.film__chapter.is-visible{visibility:visible}
/* Text sitzt IMMER links (auf Logo-Höhe), das Video-Panel liegt rechts (per JS positioniert) */
.film__c{position:relative;grid-column:1 / 6;align-self:center}
.film__eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--ion);
  font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase}
.film__eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--ion),var(--olive-t));
  transform:scaleX(0);transform-origin:left;transition:transform .65s .1s var(--ease,cubic-bezier(.22,1,.36,1))}
.film__chapter.is-visible .film__eyebrow::before{transform:scaleX(1)}
.rv{overflow:hidden;padding-bottom:.08em}
.rv>span{display:block;transform:translateY(115%);transition:transform .78s var(--ease,cubic-bezier(.22,1,.36,1))}
.rv:nth-child(3)>span{transition-delay:.08s}
.rv:nth-child(4)>span{transition-delay:.15s}
.film__chapter.is-visible .rv>span{transform:translateY(0)}
.film__title{margin:0;font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:.96;
  color:var(--white);font-size:clamp(28px,2.7vw,52px);text-shadow:0 2px 34px rgba(7,11,15,.55)}
.film__title .ac{color:var(--blue-t)}
.film__title .sh{color:var(--ion)}
.film__deck{max-width:25rem;margin:22px 0 0;font-family:var(--body);font-size:clamp(15px,1.2vw,19px);
  line-height:1.45;color:var(--text)}
.film__deck .sh{color:var(--ion)}
.film__deck b{color:var(--white);font-weight:600}
.film__fact{display:inline-flex;align-items:baseline;gap:10px;margin-top:20px;padding:8px 14px;
  border:1px solid var(--line-strong);border-radius:999px;font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;color:var(--soft);background:rgba(74,110,150,.1)}
.film__fact b{color:var(--olive-t);font-weight:400}
.film__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;pointer-events:auto}

/* Alle Kapitel: Text links (grid-column 1/6), vertikal zentriert. Emphasis-Kapitel nur
   größere Headline — keine Rechts-Ausrichtung, kein Scrim mehr (Video bleibt rechts frei). */
.film__chapter--hero .film__title{font-size:clamp(34px,3.6vw,58px);line-height:.96}
.film__chapter--turn .film__title{font-size:clamp(32px,3.4vw,54px)}
.film__chapter--final .film__title{font-size:clamp(30px,3.1vw,50px)}

/* Buttons — an das Startseiten-System angelehnt, aber film-lokal (unabhängig) */
.film__btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:transform .25s var(--ease,ease),border-color .25s,background .25s,box-shadow .25s}
.film__btn .arw{font-family:var(--disp);font-size:16px}
.film__btn--primary{background:linear-gradient(120deg,var(--blue),#5a80ab);color:#fff;border:1px solid transparent}
.film__btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(169,219,245,.6)}
.film__btn--ghost{background:transparent;color:var(--ion);border:1px solid rgba(169,219,245,.5)}
.film__btn--ghost:hover{transform:translateY(-2px);border-color:var(--ion);box-shadow:0 0 22px -6px rgba(169,219,245,.5)}

/* ---- Skip-Control — DAUERHAFT sichtbar (auf allen Slides), unten links, Panel-frei ---- */
.film__skip{position:absolute;z-index:9;pointer-events:auto;
  left:max(28px, calc((100% - 1160px) / 2 + 28px));bottom:56px;
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-strong);background:rgba(15,21,26,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--soft);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  opacity:0;transition:opacity .5s,color .2s,border-color .2s,background .2s,transform .2s}
.film.is-ready .film__skip{opacity:1}
.film__skip span{font-family:var(--disp);font-size:13px;transition:transform .2s}
.film__skip:hover{color:var(--white);border-color:var(--ion);background:rgba(15,21,26,.85);transform:translateY(-1px)}
.film__skip:hover span{transform:translateY(2px)}
@media (max-width:820px){.film__skip{left:50%;right:auto;bottom:auto;top:max(88px,calc(env(safe-area-inset-top) + 82px));transform:translateX(-50%);padding:7px 13px;font-size:9.5px;gap:7px}
  .film__skip span{font-size:11.5px}
  .film__skip:hover{transform:translateX(-50%) translateY(-1px)}}

/* ---- Telemetrie-Leiste (Signatur) ---- */
.film__telemetry{position:absolute;left:clamp(20px,4.2vw,72px);right:clamp(20px,4.2vw,72px);
  bottom:max(18px,env(safe-area-inset-bottom));z-index:8;display:grid;
  grid-template-columns:auto minmax(70px,1fr) auto auto;align-items:center;gap:16px;pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.film__tel-chapter{min-width:13ch;color:var(--text)}
.film__tel-chapter .dot{color:var(--olive-t)}
.film__tel-track{position:relative;height:2px;background:rgba(201,210,218,.2);overflow:hidden}
.film__tel-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--ion));
  transform:scaleX(0);transform-origin:left;will-change:transform}
.film__tel-frame{color:var(--ion)}
.film__cue{display:inline-grid;grid-template-columns:auto 15px;align-items:center;gap:8px;color:var(--soft)}
.film__cue::after{content:"";width:15px;height:15px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-3px,3px);animation:filmcue 1.8s ease-in-out infinite}
@keyframes filmcue{0%,100%{transform:rotate(45deg) translate(-3px,3px);opacity:.35}50%{transform:rotate(45deg) translate(1px,7px);opacity:1}}

/* ---- Mobil: randlos füllend, nur Intro/Turn/Final + kompakte Caption ---- */
@media (max-width:820px){
  .film__vid{object-fit:cover}
  .film__reel{border-radius:0;box-shadow:none}
  .film__edges{display:none}
  /* Mobil: Play als kompakter runder ▶-Chip oben rechts — überdeckt keinen Clip-Text,
     bleibt auf allen Slides erreichbar (voller Text-Button steckt zusätzlich im Hero-Kapitel) */
  .film__frame{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;opacity:1}
  .film__island{display:none}
  /* unten rechts über der Telemetrie — die Ecke ist frei (Copy ~83% breit, Bubble im Hero aus) */
  .film__play{position:absolute;left:auto;right:14px;top:auto;bottom:max(64px,calc(env(safe-area-inset-bottom) + 58px));
    transform:none;width:44px;height:44px;padding:0;gap:0;justify-content:center;font-size:0;letter-spacing:0}
  .film__play:hover{transform:none}
  .film__play-ic{width:21px;height:21px;font-size:8px;padding-left:2px}
  /* Copy sitzt unten in einer DECKEND abgedunkelten Zone (unten voll opak → nach oben
     ausblendend) → kein „Text über bewegtem Video-Inhalt"; der Clip bleibt oben frei. */
  /* Textzone reicht bis ~60 % hoch (unten voll deckend), damit auch der Deck-Text
     lesbar auf Dunkel sitzt — der Clip bleibt in der oberen Hälfte frei. */
  .film__scrim{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 23%,rgba(11,16,21,.93) 40%,rgba(11,16,21,.62) 55%,rgba(11,16,21,.2) 70%,transparent 84%)}
  .film__chapter{grid-template-columns:repeat(6,minmax(0,1fr));align-content:end;padding:56px 20px 52px;text-align:left}
  /* Jedes Kapitel zeigt Eyebrow + Titel + Deck (volle Botschaft, nichts geht verloren).
     Nur die Zahlen-Chips bleiben aus (die stecken schon im Clip). */
  /* Copy auf ~83 % Breite → rechte untere Ecke bleibt frei für die Kontakt-Bubble */
  .film__chapter .film__c{grid-column:1 / 6;text-align:left;padding-bottom:0}
  .film__chapter--right .film__eyebrow{justify-content:flex-start}
  .film__chapter--right .film__deck,.film__chapter--right .film__actions{margin-left:0;margin-right:0}
  .film__chapter--left .film__fact,.film__chapter--right .film__fact{display:none}
  /* auf Mobil keine eigenen Kapitel-Scrims mehr (der gemeinsame .film__scrim macht das) */
  .film__chapter--hero,.film__chapter--turn,.film__chapter--final{background:none}
  .film__chapter--turn{align-content:end;text-align:left}
  .film__eyebrow{margin-bottom:11px}
  .film__title{font-size:clamp(24px,6.4vw,34px);line-height:1.05}
  .film__chapter--hero .film__title{font-size:clamp(28px,7.6vw,40px)}
  .film__chapter--turn .film__title{font-size:clamp(26px,7vw,36px)}
  .film__chapter--final .film__title{font-size:clamp(26px,7vw,36px)}
  .film__deck{max-width:34rem;margin-top:9px;font-size:13px;line-height:1.4}
  .film__actions{margin-top:15px}
  .film__btn{min-height:46px;font-size:11px;padding:0 16px}
  .film__telemetry{grid-template-columns:auto 1fr auto;gap:11px}
  .film__tel-chapter{min-width:9ch}
  .film__cue{display:none}
}
/* Mini-Caption wird nicht mehr gebraucht (jedes Kapitel zeigt jetzt seinen Titel) */
.film__caption{display:none}

/* ---- Statischer Fallback (reduced-motion): Poster-Reihe statt Pin/Autoplay ---- */
.film--static .film__track{height:auto!important}
.film--static .film__stage{position:relative;height:auto;padding:80px 0}
.film--static .film__reel{position:relative;height:auto;display:grid;gap:60px}
.film--static .film__vid{display:none}
.film--static .film__poster{display:block;width:100%;max-width:420px;margin:0 auto;border:1px solid var(--line);border-radius:12px}
.film--static .film__copy{position:relative}
.film--static .film__telemetry,.film--static .film__scan,.film--static .film__edges,.film--static .film__scrim{display:none}

@media (prefers-reduced-motion:reduce){
  .film__vid{transition:none}
  .film__cue::after{animation:none}
  .rv>span{transform:none;transition:none}
  .film__eyebrow::before{transform:scaleX(1)}
}