/* ============================================================
   Scroll-Video Hero — Apple-style scroll-scrubbed intro
   Die Sektion wird von ScrollTrigger gepinnt; das Video wird
   über die Scrollposition (currentTime) vor- und zurückgespult.
   ============================================================ */

#videoHero{position:relative;background:var(--brown)}

.vh-stage{
  position:relative;
  height:100vh;
  height:100svh; /* mobile browser chrome */
  overflow:hidden;
}

.vh-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

/* Dezente Vignette für Textlesbarkeit — kein schweres Overlay */
.vh-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(30,18,10,.52) 0%,rgba(30,18,10,.10) 30%,rgba(30,18,10,.10) 62%,rgba(30,18,10,.58) 100%),
    radial-gradient(130% 95% at 50% 45%,transparent 52%,rgba(30,18,10,.38) 100%);
}

/* ---------- Text-Szenen ---------- */
.vh-caption{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:0 clamp(20px,6vw,64px);
  opacity:0;visibility:hidden;   /* GSAP (autoAlpha) steuert Ein-/Ausblenden */
  pointer-events:none;
  will-change:transform,opacity;
}
.vh-kicker{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}
.vh-kicker::before,.vh-kicker::after{content:'';width:44px;height:1px;background:var(--gold)}
.vh-caption h1,
.vh-caption h2{
  font-family:'Playfair Display',serif;font-weight:700;
  color:var(--cream);
  font-size:clamp(2rem,5.2vw,4.2rem);
  line-height:1.12;letter-spacing:-.03em;
  max-width:20ch;
  text-shadow:0 2px 30px rgba(30,18,10,.45);
}

/* ---------- Finale Szene: CTA + Bewertungs-Badge ---------- */
.vh-cta{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.vh-final .btn{pointer-events:auto}
.vh-badge{
  display:flex;align-items:center;gap:14px;margin-top:34px;
  background:rgba(250,245,238,.10);border:1px solid rgba(250,245,238,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:100px;padding:10px 22px;color:var(--cream);
}
.vh-badge b{font-family:'Playfair Display',serif;font-size:1.3rem}
.vh-stars{color:var(--gold);letter-spacing:2px;font-size:.95rem;display:block;line-height:1.2}
.vh-badge small{font-size:.7rem;opacity:.75;letter-spacing:.05em}

/* Scroll-Hinweis (nutzt .scroll-hint-Basisstyles aus index.html) */
.vh-hint{z-index:3;will-change:opacity}

/* ---------- Statischer Fallback ----------
   Aktiv bei prefers-reduced-motion oder Video-Ladefehler:
   kein Pinning, Poster + finale Szene stehen fest. */
.vh-static .vh-caption{display:none}
.vh-static .vh-caption.vh-final{
  display:flex;opacity:1;visibility:visible;pointer-events:auto;
}
.vh-static .vh-hint{display:none}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .vh-caption h1,
  .vh-caption h2{font-size:clamp(1.7rem,7.5vw,2.4rem);max-width:16ch}
  .vh-kicker{font-size:.68rem;letter-spacing:.26em}
  .vh-kicker::before,.vh-kicker::after{width:26px}
  .vh-badge{margin-top:26px;padding:8px 18px}
}