/* ============================================================
   Anfragen-Film (Startseite, Nachtbild zwischen Hero und „Was wir machen“)
   Szene 1 und 2 des Markenfilms als stummer Videoausschnitt (assets/anfragen-film.js).
   Grundzustand dieser Datei = ENDBILD (<img>, alles beantwortet): so steht es ohne JS, bei
   prefers-reduced-motion, im Datensparmodus und bei „Bewegung anhalten“ da.
   Ebenen im Rahmen von unten nach oben: Endbild, Film, Schleier (Navy), Knopf „Noch einmal“.
   Das Skript schaltet nur Klassen auf der figure:
   .dunkel   = Schleier ein (Endbild dunkelt ab; der Film beginnt selbst in Navy)
   .ist-film = Film-Ebene sichtbar
   .fertig   = Film zu Ende, Knopf sichtbar
   Der Knopf sitzt IM Bild und ändert die Seitenhöhe nie (kein Springen, kein CLS).
   Alle Klassen tragen das Präfix anf-.
   ============================================================ */

.anfragen{
  position:relative;isolation:isolate;overflow:hidden;color:#E8EEF9;--fokus:var(--gold-bright);
  border-top:1px solid rgba(196,154,59,.22);
  background:
    radial-gradient(ellipse 62% 70% at 76% 52%,rgba(22,51,92,.62),rgba(10,26,51,0) 72%),
    linear-gradient(180deg,var(--navy-deep),var(--navy-2) 55%,var(--navy-deep));
}
.anfragen::before{ /* leises Korn wie bei .nacht */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background:var(--korn-hell) 0 0/240px 240px;
}

/* ---------- Anordnung: Überschrift oben, Film darunter in Containerbreite ---------- */
.anf-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,52px)}
.anf-text{max-width:44rem}

/* ---------- Film ---------- */
.anf-film{margin:0}
.anf-film:focus{outline:none}
.anf-rahmen{
  position:relative;overflow:hidden;aspect-ratio:16/9;
  border-radius:var(--r-lg);background:#081628;
  border:1px solid rgba(196,154,59,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 44px 80px -40px rgba(2,8,18,.9),0 0 0 6px rgba(8,22,40,.55);
}
.anf-rahmen picture,.anf-ende,.anf-video,.anf-schleier{position:absolute;inset:0;display:block;width:100%;height:100%}
.anf-ende,.anf-video{object-fit:cover}
.anf-video{opacity:0;background:#081628}
.anf-film.ist-film .anf-video{opacity:1}

/* Schleier: gleiche Farbe wie das erste Filmbild (#081628), darum ist der Wechsel Endbild → Film nahtlos */
.anf-schleier{z-index:1;background:#081628;opacity:0;pointer-events:none;transition:opacity .3s ease}
.anf-film.dunkel .anf-schleier{opacity:1}

/* Bildunterschrift: lesbar auch dort, wo die Pille im Film zu klein wird */
.anf-film figcaption{margin-top:16px;font-size:.9375rem;line-height:1.5;color:#B9C6DA}

/* Knopf unten rechts im Bild, nur nach dem Ende sichtbar (die Ecke ist im Endbild leer) */
.anf-nochmal{
  position:absolute;z-index:2;right:clamp(10px,1.6vw,18px);bottom:clamp(10px,1.6vw,18px);
  display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 16px;min-height:44px;
  background:rgba(8,22,40,.76);border:1px solid rgba(196,154,59,.5);border-radius:3px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#E8EEF9;font-family:var(--font-body);font-size:.9rem;line-height:1.2;cursor:pointer;
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease-premium),visibility 0s linear .28s,border-color var(--t-hover) var(--ease-premium),color var(--t-hover) var(--ease-premium);
}
.anf-film.fertig .anf-nochmal{opacity:1;visibility:visible;transition-delay:.12s,0s,0s,0s}
.anf-nochmal svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold-bright);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.anf-nochmal:hover{border-color:var(--gold-bright);color:#fff}

/* ---------- schmal: Hochformat-Ausschnitt 4:5 ---------- */
@media (max-width:700px){
  .anf-rahmen{aspect-ratio:4/5;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .anf-schleier,.anf-nochmal{transition:none}
}