/* =============================================================================
   Dyck Food GmbH — film.css
   Der Zubereitungsfilm. Ab 62em randloses Vollbild (100svh), Text als heller
   Schleier darauf, Wortmarke mittig; bis 62em eine Platte wie jede andere
   Sektion (Bild 16:9, Text darunter, danach der Hero).

   AUTORENREGEL: Das Vollbild ab 62em ist der BASISZUSTAND und braucht kein
   JavaScript, kein laufendes Video und keine Autoplay-Erlaubnis — sonst sieht
   ein blockiertes Autoplay wie ein kaputtes Video aus (war ein echter Fehler).
   .film-aktiv (setzt film.js, sobald das Video SPIELT) schaltet nur die
   Standzeit --film-weg zu, nie Geometrie.

   Breit muss die RUHEPOSITION der Buehne ihrer KLEBEPOSITION entsprechen,
   sonst springt sie beim ersten Pixel: margin-top: -(Kopfhoehe), --film-oben: 0.

   KONTRAST: Das Video hat einen Schnitt auf nahezu Schwarz (8,25–8,46 s) und
   lange dunkle Passagen. Alle Deckungen unten sind dort per Canvas-Sampling
   GEMESSEN. Wer abschwaecht, misst an den dunklen Stellen nach, nicht am
   ersten Bild.
   ========================================================================== */

/* --- 1. Die Platte: Basis fuer schmale Fenster, Kontrastmodus und Druck --- */
.film {
  position: relative;
  --film-oben: var(--kopf-ist, calc(var(--kopfhoehe) + 1rem));
  --film-weg: 0px;
}
.film-strecke { height: var(--film-weg); }

.film-buehne {
  position: sticky; top: var(--film-oben);
  display: flex; flex-direction: column;
  margin-inline: var(--plattenrand);
  overflow: hidden;                    /* haelt das Video im Radius */
  border-radius: var(--r-4);
  background: var(--grund-0);
  box-shadow: var(--hebung-3), var(--kante-licht);
  isolation: isolate;                  /* Safari rundet Videokanten sonst nicht mit */
  z-index: 1;                          /* ueber der spaeter folgenden Hero-Platte */
}

.film-bild { position: relative; margin: 0; aspect-ratio: 16 / 9; background: #E9EDED; }
/* absolut statt height:100%: Prozent gegen flexberechnete Hoehe ist in aelterem Safari nicht aufloesbar */
.film-video {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  background: #E9EDED;
}

.film-text { padding: var(--f3) clamp(1rem, 4vw, 2.5rem); border-top: 1px solid var(--rand-trenner); }
.film-text .kicker { margin-bottom: .3rem; }
.film-claim {
  margin: 0;
  font: 400 var(--t-2)/1.22 var(--font-body);
  font-variation-settings: "wght" 480, "wdth" var(--wdth-schmal);
  color: var(--text-ueber);
  text-wrap: balance;
}

/* --- Die Wortmarke auf dem Film -----------------------------------------
   Liegt IM <figure>, damit sie ueber dem Bild sitzt, nicht ueber Bild plus
   Textleiste. Einzige Antiqua der Seite (--font-marke); font-variation-
   settings muss auf normal, sonst erbt eine variable Systemantiqua fremde
   Achsenwerte. Farbe --druck-petrol #00434F; Kontrast gegen die Vignette:
   Kern rgb(184,184,184) 5,53:1, Plateaurand rgb(173,173,173) 4,88:1 — ueber
   der Grossschriftschwelle 3:1 und ueber 4,5:1. Der Schatten gibt Tiefe, die
   Vignette (::before) traegt den Kontrast. */
.film-marke {
  position: absolute; inset: 0; z-index: 1;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  /* Rand und Boden getrennt, weil die Vignette den INHALTSKASTEN treffen muss;
     nur dann faellt ihr Mittelpunkt mit der Textmitte zusammen. */
  --marke-rand:  clamp(1rem, 4vw, 3rem);
  --marke-boden: var(--marke-rand);
  padding: var(--marke-rand) var(--marke-rand) var(--marke-boden);
  font: 700 clamp(2rem, 7.5vw, 5.5rem)/1.02 var(--font-marke);
  font-variation-settings: normal;
  letter-spacing: -.005em;
  text-align: center;
  color: var(--druck-petrol);
  text-shadow:
    0 0     .02em rgba(0, 67, 79, .34),
    0 .03em .06em rgba(0, 67, 79, .24),
    0 .08em .18em rgba(0, 67, 79, .16);
  pointer-events: none;
}

/* Die weisse Vignette: haelt ihren Kern nur, solange Buchstaben darauf stehen,
   und laeuft dann ueber mehrere Stufen auf Null aus. Masse in em (der Kasten
   wechselt sein Seitenverhaeltnis, die Textbreite ist an die Schrift gekoppelt:
   4,93 em breit, 1,35 em hoch). Schmale Fassung ohne Ring, weil die Platte bis
   62em nur 3,6–5,9 em Halbbreite bietet; das Plateau (73 % von 3,5 em = 2,56 em)
   traegt die halbe Textbreite von 2,46 em. z-index: -1 bleibt im Stapelkontext
   der Marke — unter der Schrift, aber ueber dem Video. */
.film-marke::before {
  content: ""; position: absolute; z-index: -1;
  inset: var(--marke-rand) var(--marke-rand) var(--marke-boden);
  background: radial-gradient(ellipse 3.5em 1.5em at 50% 50%,
      rgba(255, 255, 255, .72)   0%,
      rgba(255, 255, 255, .68)  73%,
      rgba(255, 255, 255, .40)  86%,
      rgba(255, 255, 255, 0)   100%);
}

/* Scrollblende: die Marke hellt in den ersten 55 svh von .65 auf 1 auf. Der
   Zustand AUSSERHALB des @supports ist der FERTIGE (volle Deckung) — ein
   opacity < 1 dort liesse die Marke ohne Scroll-Timelines dauerhaft blass.
   .65 statt .45: die Blende dimmt auch die Vignette, .45 ergab 2,25:1 gegen
   den schwarzen Schnitt, .65 rund 3,4:1. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .film-marke {
      animation: marke-aufhellen linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 55svh;
    }
    @keyframes marke-aufhellen { from { opacity: .65; } to { opacity: 1; } }
  }
}

/* Kontrastmodus erzwingt color/background-color, aber weder text-shadow noch
   background-image: die Vignette muss ausdruecklich weg, sonst steht ein
   weisser Fleck hinter weisser Schrift. */
@media (forced-colors: active) {
  .film-marke {
    background: Canvas; color: CanvasText; text-shadow: none;
    inset: auto 0 0 0; padding: .5rem; font-size: 1.5rem;
    animation: none; opacity: 1;
  }
  .film-marke::before { display: none; }
}

/* --- 2. Ab 62em: randloses Vollbild — BEDINGUNGSLOS ---------------------- */
@media (min-width: 62em) {
  .film {
    --film-oben: 0px;
    margin-top: calc(-1 * var(--kopf-ist, calc(var(--kopfhoehe) + 1rem)));
  }
  .film-buehne { height: 100vh; height: 100svh; margin-inline: 0; border-radius: 0; box-shadow: none; }
  .film-bild { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }

  /* Text auf dem Video. Das Video geht dahinter auf rgb(2,2,2); der 12,5 px
     grosse Kicker braucht 4,5:1 = mindestens Alpha 0,77 hinter seinen Zeilen.
     0,80 = gemessen 5,0:1. Die Blende liegt komplett UEBER dem Kicker (oberste
     16 px, der Kicker beginnt bei 18 px). Unter Alpha 0,77 faellt er durch. */
  .film-text {
    position: absolute; inset: auto 0 0 0; z-index: 1;
    padding: 1.125rem clamp(1rem, 4vw, 2.5rem) 1rem;
    border-top: 0;
    background: linear-gradient(to top,
                rgba(255,255,255,.80) 0,
                rgba(255,255,255,.80) calc(100% - 16px),
                rgba(255,255,255,.30) calc(100% - 6px),
                rgba(255,255,255,0)   100%);
  }
  .film-claim { max-width: 68ch; }     /* einzeilig; Reissleine fuer sehr breite Schirme */

  /* Wortmarke rund ein Drittel der Fensterbreite (gemessen 33,0 % bei 992 und
     1440 px; ab 1600 px greift der Deckel 6.7rem). */
  .film-marke {
    font-size: clamp(2.3rem, 6.7vw, 6.7rem);
    --marke-boden: clamp(3rem, 7vh, 5.5rem);   /* Platz fuer die Textleiste, steuert den Sitz der Vignette */
  }
  /* Breite Vignette: das Vollbild bietet mindestens 6,87 em Halbbreite, der
     6,6em-Ring passt also. Zweite Lage: Akzentring in Pantone 577 C
     (#B7D287), im Zentrum transparent (setzt erst bei 42 % ein, ausserhalb der
     Buchstaben) — unter der Schrift liegt weiter reines Weiss, die
     Kontrastwerte aus Abschnitt 1 gelten unveraendert. */
  .film-marke::before {
    background:
      radial-gradient(ellipse 6.6em 2.3em at 50% 50%,
        rgba(183, 210, 135, 0)    42%,
        rgba(183, 210, 135, .18)  66%,
        rgba(183, 210, 135, .10)  84%,
        rgba(183, 210, 135, 0)   100%),
      radial-gradient(ellipse 5.2em 1.75em at 50% 50%,
        rgba(255, 255, 255, .72)   0%,
        rgba(255, 255, 255, .68)  55%,
        rgba(255, 255, 255, .42)  74%,
        rgba(255, 255, 255, .16)  88%,
        rgba(255, 255, 255, 0)   100%);
  }
}

/* --- 3. Laufender Film: Standzeit ------------------------------------------
   --film-weg ist die einzige Stellschraube: so lange bleibt die Buehne im
   Bild, bevor die Seite sie nach oben schiebt. An einem STEHENDEN Posterbild
   vorbeizuscrollen saehe aus wie ein Haenger, deshalb haengt sie am
   laufenden Video. Bis 62em KEINE Standzeit und KEIN Unterlaufen: die Hero-H1
   wurde dort an der Plattenkante mitten durch die Buchstaben geschnitten. */
.film-aktiv { --film-weg: 80svh; }
@media (max-width: 61.99em) {
  .film-aktiv { --film-weg: 0px; margin-bottom: 0; }
}

/* --- 4. Die Kopfleiste ueber dem Vollbild ----------------------------------
   Ohne Flaeche stuende die Wortmarke auf dem dunklen Video bei 1,07:1. Die
   Kopfpille traegt ihre Flaeche deshalb vom ersten Bild an, deckender als
   sonst. ZWEI WEGE, absichtlich getrennt notiert: html.film-kopf setzt
   film.js, html:has(.film) greift ohne JavaScript. NICHT in eine
   Selektorliste — ein Browser ohne :has() wirft sonst die ganze Regel weg. */
@media (min-width: 62em) {
  html.film-kopf .kopf-innen { background: rgba(255, 255, 255, .93); box-shadow: var(--glas-kante), 0 4px 16px -6px rgba(0,52,59,.16); }
  html:has(.film) .kopf-innen { background: rgba(255, 255, 255, .93); box-shadow: var(--glas-kante), 0 4px 16px -6px rgba(0,52,59,.16); }
  html.film-kopf[data-gescrollt] .kopf-innen { background: rgba(255, 255, 255, .78); }
  html[data-gescrollt]:has(.film) .kopf-innen { background: rgba(255, 255, 255, .78); }
}
@supports (backdrop-filter: blur(12px)) {
  @media (min-width: 62em) {
    html.film-kopf .kopf-innen { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); }
    html:has(.film) .kopf-innen { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); }
    html.film-kopf[data-gescrollt] .kopf-innen { background: rgba(255, 255, 255, .62); }
    html[data-gescrollt]:has(.film) .kopf-innen { background: rgba(255, 255, 255, .62); }
  }
}

/* --- 5. Der Anhalteschalter des Films (WCAG 2.2.2) --------------------------
   Erzeugt film.js, nur wenn das Video wirklich laeuft und der Seitenschalter
   aus fx-basis.js gerade nicht dasteht. */
.film-schalter {
  position: absolute; right: clamp(.75rem, 2vw, 1.25rem); bottom: clamp(.75rem, 2vw, 1.25rem);
  z-index: 2;                          /* ueber dem Verlauf (.film-text: 1) */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255,255,255,.82); color: var(--petrol);
  border: 0; border-radius: var(--r-pill);
  box-shadow: var(--glas-kante), var(--hebung-2);
  cursor: pointer;
}
@supports (backdrop-filter: blur(9px)) {
  .film-schalter { background: var(--glas-ton); -webkit-backdrop-filter: var(--glas-filter-s); backdrop-filter: var(--glas-filter-s); }
}
.film-schalter:hover { background: rgba(255,255,255,.94); }
.film-schalter svg { width: 20px; height: 20px; fill: currentColor; }
.fx-ohne-glas .film-schalter {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: rgba(255,255,255,.92);
}
@media (prefers-reduced-transparency: reduce) {
  .film-schalter {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: rgba(255,255,255,.92);
  }
}

/* --- 6. Abschaltungen ---------------------------------------------------- */
/* Bewegung raus (Kleben, Standzeit), Geometrie bleibt: das Vollbild steht still. */
@media (prefers-reduced-motion: reduce) {
  .film { --film-weg: 0px; }
  .film-aktiv { --film-weg: 0px; margin-bottom: 0; }
  .film-buehne { position: static; }
}
/* Kontrastmodus ersetzt background-image nicht: der weisse Verlauf bliebe
   hinter CanvasText stehen. Dort faellt der Film ganz auf die Platte zurueck. */
@media (forced-colors: active) {
  .film { margin-top: 0; --film-weg: 0px; margin-bottom: 0; }
  .film-buehne { position: static; height: auto; margin-inline: var(--plattenrand); border: 1px solid; }
  .film-bild { flex: none; aspect-ratio: 16 / 9; }
  .film-text { position: static; background: none; border-top: 1px solid; }
}
@media print { .film { display: none; } }