/* ==========================================================================
   Film (#film), neu am 12.09.2026
   Nach dem Vorbild von anthropic.com: Der Rahmen steht zentriert und groß da,
   wächst beim Scrollen und zieht sich zum Schluss über die ganze Breite, bis er
   unter der Kopfzeile den Bildschirm füllt (js/film.js).
   Die Bewegung läuft über clip-path statt über Breite oder Skalierung: Das
   Layout darunter verschiebt sich nicht, und die Ecken bleiben scharf.
   Ohne JavaScript oder bei „reduzierter Bewegung“ steht der Endzustand da.
   ========================================================================== */

.film__caption {
  display: grid;
  justify-items: center;
  text-align: center;
}

.film__title {
  color: var(--heading);
  font-size: var(--step-4);
  font-variation-settings: "SOFT" 100;
}

.film__note {
  max-width: 48ch;
  margin-top: var(--space-2xs);
  color: var(--fg-soft);
}

.film__stage {
  margin-top: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  /* hat keine Fläche, liefert js/film.js nur den Startradius in Pixeln */
  border-radius: var(--radius-film);
}

.film__frame {
  display: grid;
  place-items: center;
  width: 100%;
  /* 16:9 über die volle Breite, aber nie höher als der Platz unter der Leiste */
  height: min(56.25vw, 100svh - var(--header-h));
  /* dasselbe Blau, eine Spur tiefer: sonst hätte der Rahmen keine Kante */
  background-color: var(--sea-deep);
  will-change: clip-path;
}

.film__play {
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 3rem + 2vw, 5rem);
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--paper);
}

.film__play svg {
  margin-left: 0.15em; /* das Dreieck sitzt sonst optisch links */
}