/* ==========================================================================
   Etappe 3 – Film (#film)
   Der Rahmen hält den Platz, bis das Video da ist. Die gestrichelte Kante sagt
   ohne Worte: hier fehlt noch etwas.
   ========================================================================== */

.film__figure {
  margin: 0;
}

.film__frame {
  display: grid;
  place-items: center;
  max-width: 60rem;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-media);
  background-color: var(--sea-deep);
}

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

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

.film__caption {
  max-width: 60rem;
  margin-top: var(--space-m);
}

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

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