/* onfyr.de — Erklärfilm-Abschnitt unter dem Hero + eigener Spieler (Zettel UPDATE_2026-10-23_ONFYR-Erklaerfilm-Einbau-Startseite.md).
   Dock = Kopie des eyeris-Spielers (.sp*), Farben aus CD v2.1 (tokens.css): Gold 500 für Play/Fortschritt mit Tiefgrün-Symbol (6,96:1),
   Dock Teal 900 halbtransparent mit Gold-Kante .22, Schrift Outfit, Radius 10 px. Kein eyeris-Rot. */
.sektion--film{padding-top:clamp(2.5rem,6vw,4.5rem)}
.film{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,3vw,2.6rem);align-items:center}
@media (max-width:1023px){.film__rahmen{order:-1}}   /* Handy/Tablet: der Film zuerst, gleich unter dem Hero — der Text folgt */
@media (min-width:1024px){.film{grid-template-columns:minmax(0,5fr) minmax(0,8fr)}}
.film__text h2{margin-top:0}
.film__text .lead{margin-top:1rem}
.film__text .held__wege{margin-top:1.6rem}
.film__fussnote{margin-top:1.1rem;font-size:.84rem;line-height:1.5;color:var(--c-text-2);max-width:34rem}

/* Rahmen 16:9 — Plakat liegt im <video poster>, Bild 0 des Films */
.film__rahmen{position:relative;margin:0;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--c-teal);
  border:1px solid var(--c-kante);box-shadow:0 24px 60px rgba(0,0,0,.45);--sp-akzent:var(--c-gold);--sp-akzent-tief:var(--c-gold-300);
  --sp-symbol:var(--c-dunkel-text);--sp-dock-grund:rgba(27,58,63,.82);--sp-kante:var(--c-kante);--sp-schrift:var(--font)}
.film__rahmen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--c-tief)}
.film__rahmen:focus-visible{outline:2px solid var(--c-gold);outline-offset:4px}
.film__entwurf{position:absolute;left:.8rem;top:.8rem;z-index:4;padding:.3rem .7rem;border-radius:999px;background:rgba(13,31,34,.82);
  border:1px solid var(--c-kante);color:var(--c-warm);font-size:.74rem;font-weight:500;letter-spacing:.04em;pointer-events:none}
.film__ohne-js{position:absolute;inset:auto 0 0 0;margin:1rem auto;width:max-content}
.film__rahmen [hidden]{display:none!important}   /* eigene display-Regeln (inline-flex/grid) heben sonst das hidden-Attribut auf */

/* „Mit Ton ansehen (1:19)“ — echter Knopf mittig unten, Gold wie der Haupt-CTA */
.film__mit-ton{position:absolute;left:50%;bottom:clamp(.8rem,3.5%,1.6rem);z-index:3;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.7rem;
  min-height:52px;padding:.45rem 1.3rem .45rem .45rem;border:0;border-radius:999px;background:rgba(13,31,34,.78);color:var(--c-warm);
  font-family:var(--font);font-size:1rem;font-weight:500;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);white-space:nowrap;
  transition:background .25s var(--kurve),transform .25s var(--kurve)}
@supports (backdrop-filter:blur(10px)){.film__mit-ton{background:rgba(13,31,34,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.film__mit-ton-kreis{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c-gold);color:var(--c-dunkel-text);
  box-shadow:0 0 24px rgba(202,158,103,.35);transition:background .25s var(--kurve)}
.film__mit-ton-kreis svg{width:22px;height:22px;margin-left:2px}
.film__mit-ton:hover{transform:translateX(-50%) scale(1.03)}
.film__mit-ton:hover .film__mit-ton-kreis{background:var(--c-gold-300)}
.film__mit-ton:focus-visible,.film__pause:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
.film__mit-ton[disabled]{opacity:.5;cursor:default}
/* Pause-Knopf des Teasers (WCAG 2.2.2): klein, oben rechts, immer erreichbar */
.film__pause{position:absolute;right:.7rem;top:.7rem;z-index:3;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--c-kante);
  border-radius:50%;background:rgba(13,31,34,.7);color:var(--c-warm);cursor:pointer;transition:background .2s}
.film__pause svg{width:20px;height:20px}
.film__pause:hover{background:rgba(27,58,63,.95)}
.film__fehler{position:absolute;left:1rem;right:1rem;top:1rem;z-index:4;margin:0;padding:.6rem .9rem;border-radius:var(--radius);background:rgba(13,31,34,.9);color:var(--c-warm);font-size:.9rem}

/* ---------- Dock (eyeris-Muster, ONFYR-Farben) ---------- */
.sp{--sp-dock:4.6rem;--sp-rand:.9rem}
.sp__leiste{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:3.2rem var(--sp-rand) var(--sp-rand);background:linear-gradient(to top,rgba(13,31,34,.85),rgba(13,31,34,.35) 55%,transparent);transition:opacity .25s var(--kurve),transform .25s var(--kurve)}
.sp__dock{display:flex;align-items:center;gap:.3rem;padding:.4rem .55rem;border:1px solid var(--sp-kante);border-radius:999px;background:var(--sp-dock-grund);box-shadow:0 10px 30px rgba(0,0,0,.45);color:var(--c-warm);font-family:var(--sp-schrift)}
@supports (backdrop-filter:blur(10px)){.sp__dock{background:rgba(27,58,63,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.sp--ruhig .sp__leiste,.sp:not(.sp--gestartet) .sp__leiste{opacity:0;transform:translateY(8px);pointer-events:none}
.sp__knopf{display:inline-grid;place-items:center;flex:0 0 auto;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--c-warm);cursor:pointer;transition:background .2s,transform .25s var(--kurve)}
.sp__knopf svg{width:26px;height:26px}
.sp__knopf:hover{background:rgba(245,241,235,.12)}
.sp__play{background:var(--sp-akzent);color:var(--sp-symbol);box-shadow:0 6px 18px rgba(202,158,103,.3)}
.sp__play:hover{background:var(--sp-akzent-tief);transform:scale(1.06)}
.sp__play svg{width:28px;height:28px;margin-left:2px}
.sp__play[aria-pressed="true"] svg{margin-left:0}
.sp__knopf:focus-visible,.sp__lauf:focus-visible,.sp__laut:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
.sp__cc[aria-pressed="true"]{color:var(--c-gold);background:rgba(202,158,103,.16)}
.sp__zeit{flex:0 0 auto;min-width:2.9em;font-size:.84rem;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-align:center;color:var(--c-warm)}
.sp__lauf-huelle{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;height:48px;margin:0 .2rem}
.sp__lauf{position:relative;z-index:1;width:100%;height:48px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.sp__lauf::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:rgba(245,241,235,.22)}
.sp__lauf::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:var(--sp-akzent);box-shadow:0 0 0 3px rgba(202,158,103,.28)}
.sp__lauf::-moz-range-track{height:5px;border-radius:3px;background:rgba(245,241,235,.22)}
.sp__lauf::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--sp-akzent);box-shadow:0 0 0 3px rgba(202,158,103,.28)}
.sp__lauf-fuellung{position:absolute;left:0;top:50%;width:0;height:5px;margin-top:-2.5px;border-radius:3px;background:var(--sp-akzent);pointer-events:none}
.sp__laut{flex:0 0 auto;width:76px;height:48px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.sp__laut::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(245,241,235,.35)}
.sp__laut::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:var(--c-warm)}
.sp__laut::-moz-range-track{height:3px;border-radius:2px;background:rgba(245,241,235,.35)}
.sp__laut::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--c-warm)}
.sp__untertitel{position:absolute;left:50%;bottom:1rem;z-index:2;max-width:82%;transform:translateX(-50%);text-align:center;pointer-events:none;transition:bottom .25s var(--kurve)}
.sp--gestartet:not(.sp--ruhig) .sp__untertitel{bottom:calc(var(--sp-dock) + var(--sp-rand) + .4rem)}
.sp__untertitel-text{display:inline-block;padding:.38em .9em;border-radius:var(--radius);background:rgba(13,31,34,.86);color:var(--c-warm);font-family:var(--sp-schrift);font-weight:500;font-size:clamp(1rem,1.9vw,1.35rem);line-height:1.35;letter-spacing:.01em}
.sp:fullscreen{border-radius:0;border:0}
.sp:fullscreen .sp__untertitel-text{font-size:clamp(1.2rem,2.2vw,1.9rem)}
.sp video::cue{color:#F5F1EB;background:rgba(13,31,34,.86);font-family:"Outfit",system-ui,sans-serif}   /* nur im nativen iOS-Vollbild sichtbar */
@media (hover:none),(max-width:599px){.sp{--sp-dock:4.1rem;--sp-rand:.6rem}.sp__laut{display:none}.sp__zeit--gesamt{display:none}.sp__knopf{width:44px;height:44px}.sp__knopf svg{width:24px;height:24px}.sp__lauf-huelle,.sp__lauf{height:44px}.sp__dock{padding:.3rem .4rem;gap:.15rem}.sp__untertitel{max-width:92%}}
@media (max-width:599px){.film__mit-ton{font-size:.92rem;padding-right:1rem;gap:.55rem}.film__entwurf{font-size:.68rem;left:.55rem;top:.55rem}.film__pause{right:.5rem;top:.5rem}}
@media (max-width:359px){.film__mit-ton-wort{font-size:.86rem}}
@media (prefers-reduced-motion:reduce){.sp__leiste,.sp__untertitel,.sp__knopf,.film__mit-ton,.film__mit-ton-kreis{transition:none}}