/* FehabLabs Hero und Film. Medienebene (Paket A1, 4. Oktober 2026), unverändert: .cinema-hero, .cinema-backdrop, .ambient-video und .cinema-tint.
   Prüfung: brand/07-umsetzung/hero-medien-vorher.json. Die Markenebene darüber (Titel, Knöpfe, Ablaufleiste) steht in launch-home.css.
   Marke «Klartext» (5. Oktober 2026): Filmdialog in Nacht, Kopfzeile über dem Film nur noch transparent; Farben und Knopf der Kopfzeile kommen aus site.css. */
.cinema-hero{position:relative;min-height:720px;height:94svh;max-height:1080px;overflow:hidden;color:#fff;background:#182129;font-size:18px;line-height:1.65}
/* Vererbte Werte der alten Kaskade (body 18px/1.65, p 1.7), damit der Hero nicht von den Textmassen in site.css abhängt; :where() hält die Spezifität bei «p». */
:where(.cinema-hero) p{line-height:1.7}
.cinema-backdrop,.cinema-tint{position:absolute;inset:0}
.cinema-backdrop>img,.cinema-backdrop>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-video-focus,50% center)}
.cinema-backdrop>img{animation:none}
.cinema-backdrop>video{opacity:0;transition:opacity 1s}
.cinema-backdrop>video.video-ready{opacity:1}
.cinema-tint{background:linear-gradient(90deg,#09121e8f,#09121e25 78%),linear-gradient(0deg,#071321ac,transparent 65%,#07132150)}
/* Filmdialog: Nacht, Radius wie Gerätebilder, Kopf mit Titel und «Film schliessen» (Kreuz aus CSS, kein Zeichen). Öffnen 240 ms (site.js). */
body.film-open{overflow:hidden}
.film-dialog{width:min(1240px,94vw);max-width:none;max-height:94dvh;padding:0;border:0;border-radius:var(--radius-geraet);overflow:auto;background:var(--nacht);color:var(--papier);--text-1:var(--papier);--text-2:var(--nebel);--q-voll:var(--holz);--fokus-ring:var(--papier);--fokus-halo:var(--nacht);--focus:var(--papier)}
.film-dialog::backdrop{background:rgba(11,22,32,.9)}
.film-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:12px 12px 12px 24px;border-bottom:1px solid var(--linie-dunkel)}
.film-dialog-top h2{min-width:0;margin:0;font:600 16px/1.3 var(--sans);letter-spacing:0;color:var(--papier)}
.film-close{position:relative;display:inline-flex;align-items:center;flex-shrink:0;min-height:44px;padding:0 44px 0 16px;color:var(--papier);font:500 16px/1 var(--sans);box-shadow:inset 0 0 0 1.5px var(--linie-dunkel);transition:box-shadow var(--dauer-kurz) linear}
.film-close::before,.film-close::after{content:'';position:absolute;right:16px;top:50%;width:14px;height:1.5px;margin-top:-.75px;background:currentColor;transform:rotate(45deg)}
.film-close::after{transform:rotate(-45deg)}
.film-close:hover{box-shadow:inset 0 0 0 1.5px var(--nebel)}
.film-dialog>video{display:block;width:100%;max-height:72dvh;aspect-ratio:16/9;background:var(--nacht)}
.film-dialog>p{margin:0;padding:14px 24px 18px;font:var(--fw-meta) var(--fs-meta)/var(--lh-meta) var(--sans);letter-spacing:var(--ls-meta);color:var(--nebel)}
/* Kopfzeile über dem Film: transparent, bis der Hero unter der Kopfzeile verschwindet (.scrolled aus site.js). Farben, Wortmarke und Knopf: site.css. */
.home-page .site-header{margin-bottom:calc(-1 * var(--header-h));background:transparent;color:var(--papier);border-bottom-color:transparent}
.home-page .site-header.scrolled{background:var(--papier);color:var(--tinte);border-bottom-color:var(--linie)}
/* Schutzverlauf hinter Wortmarke und Navigation (Markenebene, nicht die Abtönung des Films): Über dem hellen Fenster im Film fiel weisse
   Navigation auf 2.7:1 (Messung 5. Oktober 2026, Ring um die Glyphen); mit dem Verlauf liegt sie über 4.5:1. Verschwindet mit .scrolled. */
.home-page .site-header:not(.scrolled)::before{content:'';position:absolute;inset:0 0 -56px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--nacht) 62%,transparent) 0%,color-mix(in srgb,var(--nacht) 48%,transparent) 55%,transparent 100%)}
body.menu-open.home-page .site-header::before{content:none}
@media(max-width:520px){
 .film-dialog-top{gap:var(--space-3);padding:10px 10px 10px 16px}
 .film-dialog>p{padding:12px 16px 16px}
}