/* s01 · Hero (Meisterwerk, Nacht)
   Nacht ist der Raum: links an K0 Wortmarke (--gold), Claim in drei Zeilen („Handlung.“ gold-hell), Kernaussage (.lead, 500, hell-text)
   und Unterzeile (.text, seit Fixrunde 2 am 11.10. ebenfalls hell-text: kein Ausgrauen im Besprechungsraum). Rechts das Lichtfenster
   .fenster.halb.kino.weich (system.css §18): das Glas-∞ als 16:9-Band in
   voller Spaltenbreite, senkrecht zentriert, --kino-zoom 1.1 (das ∞ füllt 80 % der Bildbreite, 4,5 % Rand je Seite bleiben), Kanten
   weich in die Nacht. Kein Text liegt auf dem Film, deshalb kein Scrim.
   Bewegung: nach hl:start Vorhang 1,4 s (film.js setzt .da) und der Film startet (3,6 s, halt auf dem vollen ∞); Claim-Zeilen
   0 / 0,12 / 0,24 s, dann Kernaussage und Unterzeile. Unter 1100 px steht das Fenster oben (16:10), der Text darunter. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.hero-fenster{--kino-zoom:1.1;background:var(--nacht) url(../assets/film/inf-licht-poster.jpg) 50% 50%/110% auto no-repeat;
  /* Beamer-Gamma (Advisor-Gate 11.10.): radiale Maske auf dem Band statt Kanten-Gradient; Ellipse = Bandmaß (Breite der Spalte,
     Höhe 9/16 × 1,1), Lichtkern bis 78 % (das ∞ bei 80 % Breite bleibt ≥ 90 %), Kanten und Ecken des 16:9-Kastens werden Nacht */
  -webkit-mask-image:radial-gradient(ellipse 50% calc(var(--halb) * 100vw * .309) at 50% 50%,#000 78%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 50% calc(var(--halb) * 100vw * .309) at 50% 50%,#000 78%,rgba(0,0,0,0) 100%)}   /* Poster liegt unter dem Film (Bild vor dem Laden; Prüfvertrag: ein Bild in s01) */
/* Fortsetzungs-Hinweis wie V8 (.scroll-hint .line): wortlose 1-px-Goldlinie, 44 px hoch, 40 px über dem Boden in der Mitte; zieht einmal
   nach dem Filmende (Start ≈ 1,7 s + 3,6 s Film), bei html.ruhig und ohne JS steht sie */
.hero::after{content:'';position:absolute;left:50%;bottom:40px;width:1px;height:44px;background:var(--gold);transform-origin:50% 0;z-index:1}
.js:not(.ruhig) .hero::after{transform:scaleY(0)}
.js:not(.ruhig).gestartet .hero::after{animation:s01-linie 1.1s var(--ease) 4.6s both}
@keyframes s01-linie{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hero-kopf{padding:clamp(22px,4.4vh,56px) var(--rand) 0}
.hero-text{flex:1;display:flex;flex-direction:column;justify-content:center;width:calc(100% * (1 - var(--halb)));padding:clamp(24px,4vh,64px) max(40px,2vw) clamp(40px,8vh,120px) var(--rand)}
.hero h1 .z{display:block}
@media (min-width:1280px){.hero h1 .z{white-space:nowrap}}   /* „Aus Unternehmenswissen“: Source Serif 900 px, Palatino 993 px bei 2200 in 1012 px Spalte */
.hero h1 .gold{color:var(--gold-hell)}
.hero .kern{margin-top:var(--r5);font-weight:500;color:var(--hell-text)}
.hero .unter{margin-top:var(--r3);color:var(--hell-text)}

/* Aufbau nach dem Lader: selbstlaufende CSS-Animationen mit fill both (Endzustand ohne JS-Timing).
   Meisterwerk-Fable (11.10.): nur ohne html.ruhig. Vorher lief die Animation bei reduzierter Bewegung mit 0,01 ms und stand in einem
   Headless-Browser ohne Bildtakt 100 ms lang bei t = 0 (Deckkraft 0, playState running); jetzt gibt es dort keine Animation. */
.js:not(.ruhig) .hero h1 .z,.js:not(.ruhig) .hero .kern,.js:not(.ruhig) .hero .unter,.js:not(.ruhig) .hero-kopf{opacity:0}
.js:not(.ruhig).gestartet .hero h1 .z{animation:zeile .8s var(--ease) both}
.js:not(.ruhig).gestartet .hero h1 .z:nth-child(2){animation-delay:.08s}
.js:not(.ruhig).gestartet .hero h1 .z:nth-child(3){animation-delay:.16s}
.js:not(.ruhig).gestartet .hero .kern{animation:heben .6s var(--ease) .3s both}
.js:not(.ruhig).gestartet .hero .unter{animation:heben .6s var(--ease) .42s both}
.js:not(.ruhig).gestartet .hero-kopf{animation:heben .6s var(--ease) .05s both}

@media (max-width:1099px){
  .hero-text{width:auto;padding-right:var(--rand);justify-content:flex-start}
  .hero-kopf{order:-1}
}