/* =============================================================
   video-splash.css — Vollbild-Intro-Video Overlay
   Owner-Wunsch 2026-05-12. Video hat eigenen Fadeout → KEIN
   CSS-Fadeout/Transition auf dem Container.
   ============================================================= */

#video-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  /* WICHTIG: keine opacity-Transition — Video bringt seinen eigenen Fadeout mit */
}

#video-splash video {
  width: 100%;
  height: 100%;
  /* `contain` zeigt das ganze Video ohne Crop. `cover` würde Ränder beschneiden.
     Bei einem 16:9 Intro auf einem Mobile 9:16 Viewport entsteht oben/unten
     schwarzer Rand — passt visuell, da Hintergrund eh #000 ist. */
  object-fit: contain;
  object-position: center center;
  background: #000;
  pointer-events: none; /* Klicks gehen an den Container (Skip) */
}

/* Reduced-Motion: Video würde via JS gar nicht erst gemountet,
   aber CSS-Fallback für den seltenen Fall dass es doch im DOM landet */
@media (prefers-reduced-motion: reduce) {
  #video-splash { display: none !important; }
}