/*
 * Hero-Video (Loop, stumm) fuer die Landings: hero-video.js laedt bei
 * Sichtbarkeit, pausiert ausserhalb, Pause-Knopf (WCAG 2.2.2), bei
 * "Bewegung reduzieren" nur Poster. Eigene Fallback-Farben, damit es auf
 * Kit- und tm-alt-Seiten passt.
 *
 * Markup:
 *   <figure class="hv" [data-mobile-crop="left"]>
 *     <div class="hv-frame">
 *       <video class="hv-el" muted loop playsinline preload="none" width="1280" height="720"
 *         poster="…16x9.jpg" data-src="…16x9.mp4"
 *         [data-src-mobile="…1x1.mp4" data-poster-mobile="…1x1.jpg"] aria-label="…"></video>
 *       <button type="button" class="hv-toggle" aria-label="Video anhalten" hidden><span aria-hidden="true"></span></button>
 *     </div>
 *     <figcaption class="hv-cap">…</figcaption>
 *   </figure>
 */
.hv { margin: 0; }
.hv-frame { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--pl-border, rgba(0, 0, 0, .12)); box-shadow: var(--pl-shadow, 0 24px 48px -24px rgba(0, 0, 0, .45)); background: #fff; }
.hv-el { display: block; width: 100%; height: auto; }
.hv-cap { margin-top: 10px; font-size: 14px; color: var(--pl-muted, inherit); opacity: .9; }
.hv-toggle { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(10, 14, 16, .65); cursor: pointer; display: grid; place-items: center; }
.hv-toggle span { width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.hv-toggle.is-paused span { width: 0; height: 0; border: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.hv-toggle:focus-visible { outline: 3px solid var(--pl-accent, #ED6A3D); outline-offset: 2px; }
@media (max-width: 600px) {
  /* eigene Mobil-Datei (1:1) bzw. quadratischer Ausschnitt links */
  .hv.is-mobile-1x1 .hv-frame, .hv[data-mobile-crop="left"] .hv-frame { aspect-ratio: 1 / 1; }
  .hv.is-mobile-1x1 .hv-el, .hv[data-mobile-crop="left"] .hv-el { width: 100%; height: 100%; object-fit: cover; }
  .hv[data-mobile-crop="left"] .hv-el { object-position: 0 50%; }
}