/* Startseiten-Werbefilm: Standbild im Seitenfluss, Film im ganzen Fenster. Bauteile (.film-buehne, .film-plakat,
   .film-knopf, .film-wort, .film-dauer, .film-schleier) aus style.css. */
.wfilm .film-buehne { aspect-ratio: 16 / 9; }
.wfilm-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wfilm .film-schleier { background: radial-gradient(70% 60% at 50% 50%, rgba(4, 4, 7, .55) 0%, rgba(4, 4, 7, .28) 55%, rgba(4, 4, 7, .05) 100%); }
/* Hochkant-Bildschirm: das hohe Standbild, und nie höher als der Schirm */
@media (max-aspect-ratio: 1/1) {
  .wfilm .film-buehne { aspect-ratio: 9 / 16; width: min(100%, calc(82vh * 9 / 16)); margin-inline: auto; }
  .wfilm .film-knopf { width: 84px; height: 84px; }
  .wfilm .film-wort { font-size: 17px; }
}
/* Der Film selbst. Direkt unter <body>: .container-content ist ein eigener Stapelkontext, darin läge er unter Logo
   und Lichtschleiern (intro: html.film-voll). */
html.wfilm-an, html.wfilm-an body { overflow: hidden; }
.wfilm-fenster { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 2147483000; background: #000; display: flex; align-items: center; justify-content: center; }
.wfilm-fenster video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.wfilm-zu { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; }
.wfilm-zu:hover, .wfilm-zu:focus-visible { background: rgba(255, 255, 255, .22); outline: none; }
.wfilm-zu svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2; fill: none; display: block; }