/* =====================================================================
 * Videos
 *
 * Die drei Filme der alten Seite sind Hochformat im Verhaeltnis 9 zu 16.
 * Sie stehen an denselben Stellen wie frueher: im Hero, in der
 * Studio-Sektion und in der Kindersektion. Das Standbild ist jeweils das
 * Foto, das vorher an dieser Stelle stand, es geht also kein Bild
 * verloren.
 * ===================================================================== */

/* Die Hoehe fuehrt, nicht die Breite.
 * Mit width: 100% und einer Deckelung der Hoehe waere das Seitenverhaeltnis
 * faktisch aufgehoben, und object-fit haette das Hochformat auf ein
 * Querformat beschnitten. So steht der Film in seinem eigenen Format
 * mittig in der Spalte, genau wie auf der alten Seite. */
.fy-hero-media .fy-video,
.fy-media-frame .fy-video,
.fy-media-frame-oak .fy-video,
.fy-media-frame-crimson .fy-video {
  display: block;
  aspect-ratio: 9 / 16;
  height: min(74vh, 700px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  background-color: var(--fy-ink-sunken);
  border-radius: var(--fy-r-md);
  object-fit: cover;
}

.fy-hero-media .fy-video {
  border-radius: var(--fy-r-lg);
}

/* Ohne dieses Feld springt die Seite, sobald der Film geladen ist:
 * bis dahin kennt der Browser die Groesse nicht. */
.fy-video {
  contain-intrinsic-size: 480px 848px;
}

.fy-video-caption {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--fy-font-util), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fy-mist);
}

html[data-fy-theme="light"] .fy-video-caption {
  color: var(--fy-slate);
}

/* Die rote Sektion traegt weisse Schrift, die Bildunterschrift dort
 * ebenfalls. */
.fy-section-crimson .fy-video-caption {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767px) {
  .fy-hero-media .fy-video,
  .fy-media-frame .fy-video,
  .fy-media-frame-oak .fy-video,
  .fy-media-frame-crimson .fy-video {
    height: auto;
    width: 100%;
    max-height: 72vh;
  }
}