/* Spicy – Hero-Video (Startseite) v1
   Vollflaechiger Video-Hintergrund hinter der bestehenden .buehne.
   Fallback ohne JS / bei Fehlern: Poster als CSS-Hintergrund (nur das passende wird geladen). */
.hero-video{position:relative;isolation:isolate;overflow:hidden;background:#0a0a0a center/cover no-repeat;
  background-image:url("assets/video/spicy-hero-desktop.jpg?v=1")}
@media (max-width:767px) and (orientation:portrait){
  .hero-video{background-image:url("assets/video/spicy-hero-mobil.jpg?v=1")}
}
.hero-video__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:-2;pointer-events:none;background:transparent}
/* Abdunkelung: Mitte (wo Text/Knoepfe stehen) staerker, unten weicher Uebergang in den Seitenhintergrund */
.hero-video__overlay{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%,rgba(10,10,10,.62),rgba(10,10,10,.30) 70%,rgba(10,10,10,.22)),
    linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,0) 22%,rgba(10,10,10,0) 70%,#0a0a0a 100%);
  transition:opacity .6s ease}
.hero-video .buehne{position:relative;z-index:1;background:transparent}
.hero-video .buehne h1,.hero-video .buehne p{text-shadow:0 2px 18px rgba(0,0,0,.65)}
.hero-video .knopf.leer{background:rgba(10,10,10,.45);border-color:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-video .buehne .runter{color:#d0d0d4}

/* Das Video zeigt sein eigenes Logo oben -> Seitenlogo ausblenden, solange das Video laeuft (Platz bleibt, kein Springen) */
.hero-video.hat-video .herologo{opacity:0}
@media (max-width:767px) and (orientation:portrait){
  .hero-video__overlay{background:
    linear-gradient(180deg,rgba(10,10,10,.30) 0%,rgba(10,10,10,.55) 35%,rgba(10,10,10,.62) 70%,#0a0a0a 100%)}
}

/* Endcard des Videos (Logo + Adressen): eigenen Hero-Text dann ausblenden, Knoepfe bleiben */
.hero-video .herologo,.hero-video .buehne h1,.hero-video .buehne p{transition:opacity .5s ease}
.hero-video.ist-endcard .herologo,
.hero-video.ist-endcard .buehne h1,
.hero-video.ist-endcard .buehne p{opacity:0 !important}
.hero-video.ist-endcard .hero-video__overlay{opacity:.35}
/* Handy hochkant: Endcard fuellt das ganze Bild -> auch Knoepfe kurz (ca. 4,6 s) ausblenden, damit Adressen/Zeiten lesbar sind */
@media (max-width:767px) and (orientation:portrait){
  .hero-video .knopfreihe,.hero-video .buehne .runter{transition:opacity .5s ease}
  .hero-video.ist-endcard .knopfreihe,
  .hero-video.ist-endcard .buehne .runter{opacity:0;pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-video__overlay,.hero-video .herologo,.hero-video .buehne h1,.hero-video .buehne p{transition:none}
}