/* ─────────────────────────────────────────────────────────────
   Hopp Scrub-Hero (Modul) – scroll-gesteuertes Video mit Textbändern
   Präfix .sh-  |  wird nur auf Seiten mit Scrub-Block geladen
   Engine: assets/js/hopp-scrub.js
   ───────────────────────────────────────────────────────────── */
:root {
  --sh-top: 61px;           /* Höhe der sticky Site-Header, wird per JS gemessen */
  --sh-ease: cubic-bezier(.22,.61,.36,1);
  --sh-ease-out: cubic-bezier(.16,1,.3,1);
  --sh-shadow: 0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8);
}

.sh { position: relative; height: calc(var(--sh-vh, 450) * 1vh); z-index: 1; background: #0d0b0a; color: var(--poster-ink); }
.sh-stage { position: sticky; top: var(--sh-top); height: calc(100vh - var(--sh-top)); height: calc(100svh - var(--sh-top)); overflow: hidden; background: #0d0b0a; }
.sh-poster { position: absolute; inset: 0; background: #0d0b0a 50% 30% / cover no-repeat; }
.sh-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .9s var(--sh-ease); will-change: transform; transform: translateZ(0); }
.sh-stage.is-ready video { opacity: 1; }
.sh-stage.is-failed video { display: none; }
.sh-scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,10,18,0) 35%, rgba(10,10,18,.62) 100%); }
.sh-ring { position: absolute; right: 28px; bottom: 28px; width: 36px; height: 36px; color: var(--accent); opacity: .9; transform: rotate(-90deg); transition: opacity .6s var(--sh-ease); }
.sh-stage.is-ready .sh-ring { opacity: 0; }
.sh-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: var(--poster-ink); opacity: .75; font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 8px; text-shadow: var(--sh-shadow); transition: opacity .6s var(--sh-ease); }
.sh-cue svg { width: 18px; height: 18px; animation: sh-cuebob 2.6s ease-in-out infinite; }
@keyframes sh-cuebob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(6px) } }
.sh-stage.is-deep .sh-cue { opacity: 0; }

/* Textbänder */
.sh-band { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr); align-items: center; padding: 0 clamp(24px,6vw,96px); opacity: 0; pointer-events: none; text-shadow: var(--sh-shadow); --k: 0; }
.sh-band .hero-cta { text-shadow: none; }
.sh-band .sh-col { grid-column: 1; max-width: min(38ch, 100%); }
.sh-band.is-right .sh-col { grid-column: 2 / 4; justify-self: end; text-align: right; max-width: min(40ch, 100%); }
.sh-band::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: -8%; width: 66%; pointer-events: none; opacity: calc(.25 + .75 * var(--k, 1)); background: radial-gradient(ellipse 50% 66% at 42% 50%, rgba(5,5,10,.86) 0%, rgba(5,5,10,.64) 40%, rgba(5,5,10,0) 78%); }
.sh-band.is-right::before { left: auto; right: -8%; background: radial-gradient(ellipse 50% 66% at 58% 50%, rgba(5,5,10,.86) 0%, rgba(5,5,10,.64) 40%, rgba(5,5,10,0) 78%); }
.sh-band.is-both::after { content: ""; position: absolute; top: -10%; bottom: -10%; right: -8%; width: 66%; pointer-events: none; opacity: calc(.25 + .75 * var(--k, 1)); background: radial-gradient(ellipse 50% 66% at 58% 50%, rgba(5,5,10,.86) 0%, rgba(5,5,10,.64) 40%, rgba(5,5,10,0) 78%); }
.sh-band .sh-col { position: relative; z-index: 1; }
.sh-band::before, .sh-band.is-both::after { z-index: 0; }
.sh-band.is-both .sh-col.sh-cta { grid-column: 3; justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.sh-band.is-active { pointer-events: auto; }
.sh-kick { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; display: block; white-space: nowrap; }
.sh-band h2, .sh-band h1 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: .9; font-size: clamp(36px, 4.6vw, 78px); color: var(--poster-ink); margin: 0; }
.sh-band p.sh-sub { margin: 14px 0 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; color: var(--poster-ink); max-width: 34ch; }
.sh-band .sh-em { color: var(--accent); }
.sh-w { display: inline-block; white-space: nowrap; }
.sh-c { display: inline-block; }
/* Einstiege */
.sh-band.is-drift .sh-w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * -28px)); }
.sh-band.is-punch .sh-w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1); --ks: clamp(0, (var(--k, 0) - var(--th, 0) - var(--sd, .1)) * var(--ss, 3.2), 1); opacity: var(--kc); transform: scale(calc(0.6 + (0.4 + var(--ov, .12)) * var(--kc) - var(--ov, .12) * var(--ks))); transform-origin: center; }
.sh-band.is-punch .sh-w.sh-em { --ov: .24; --sd: .16; --ss: 2.6; }
.sh-band.is-right .sh-w { transform-origin: right center; }
.sh-band.is-rise h1 .sh-w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 22px)); }
.sh-band.is-rise .sh-sub { --ks: clamp(0, (var(--k, 0) - .5) * 4, 1); opacity: var(--ks); transform: translateY(calc((1 - var(--ks)) * 14px)); }
.sh-band.is-rise .sh-ctas { --kb: clamp(0, (var(--k, 0) - .62) * 4, 1); opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 14px)); }
.sh-band .sh-kick { --kk: clamp(0, var(--k, 0) * 2.2, 1); opacity: var(--kk); transform: translateY(calc((1 - var(--kk)) * -10px)); }
.sh-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.sh-band.is-both .sh-ctas { justify-content: flex-end; }

/* Lichtpunkte links/rechts (Signatur) */
.sh-bulbs { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
.sh-bulbs.is-l { left: clamp(8px, 1.6vw, 22px); } .sh-bulbs.is-r { right: clamp(8px, 1.6vw, 22px); }
.sh-bulbs span { width: 8px; height: 8px; border-radius: 50%; background: rgba(200,149,31,.18); position: relative; }
.sh-bulbs span::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 3px rgba(200,149,31,.55); opacity: clamp(0, (var(--hk, 0) * var(--n, 12) - var(--i, 0)) * 2.4, 1); }

/* Statischer Hero (Handy, Reduced Motion, Video fehlt) */
.sh-static { display: none; position: absolute; inset: 0; padding: 24px clamp(20px, 6vw, 64px) 40px; flex-direction: column; justify-content: flex-end; text-shadow: var(--sh-shadow); background: linear-gradient(to top, rgba(10,8,8,.88) 0%, rgba(10,8,8,.45) 45%, rgba(10,8,8,.15) 100%); }
.sh-static-h { margin: 0; }
.sh-static-title { display: block; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: .9; font-size: clamp(44px, 11vw, 88px); color: var(--poster-ink); margin: 0; }
.sh-static p { margin: 12px 0 0; font-size: 17px; line-height: 1.4; color: var(--poster-ink); max-width: 34ch; }
.sh-static .sh-ctas { justify-content: flex-start; margin-top: 20px; }
.sh-static .hero-cta { text-shadow: none; }

/* Gerätegates – müssen exakt den GATES in hopp-scrub.js entsprechen.
   Heroes mit Mobile-Video (.has-mobile) scrubben auch auf dem Handy. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px) {
  .sh:not(.has-mobile) { height: auto; }
  .sh:not(.has-mobile) .sh-stage { position: relative; top: 0; height: calc(100vh - var(--sh-top)); height: calc(100svh - var(--sh-top)); min-height: 520px; }
  .sh:not(.has-mobile) .sh-poster { background-image: var(--sh-static-img); }
  .sh:not(.has-mobile) .sh-band, .sh:not(.has-mobile) .sh-ring, .sh:not(.has-mobile) .sh-cue, .sh:not(.has-mobile) .sh-bulbs, .sh:not(.has-mobile) .sh-stage video { display: none; }
  .sh:not(.has-mobile) .sh-static { display: flex; }
}
/* Bewegung reduzieren: immer statisch, auch mit Mobile-Video */
@media (prefers-reduced-motion: reduce) {
  .sh, .sh.has-mobile { height: auto; }
  .sh-stage { position: relative; top: 0; height: calc(100vh - var(--sh-top)); height: calc(100svh - var(--sh-top)); min-height: 520px; }
  .sh-poster { background-image: var(--sh-static-img); }
  .sh-band, .sh-ring, .sh-cue, .sh-bulbs, .sh-stage video { display: none; }
  .sh-static { display: flex; }
}
@media (max-height: 560px) { .sh-cue, .sh-bulbs { display: none; } }
/* Video fehlt, abgebrochen oder Datensparmodus: statischer Hero ohne Leerlauf-Scroll */
.sh.is-static, .sh.has-mobile.is-static { height: auto; }
.sh.is-static .sh-stage { position: relative; top: 0; height: calc(100vh - var(--sh-top)); height: calc(100svh - var(--sh-top)); min-height: 520px; }
.sh-stage.is-failed .sh-poster { background-image: var(--sh-static-img); }
.sh-stage.is-failed .sh-band, .sh-stage.is-failed .sh-ring, .sh-stage.is-failed .sh-cue, .sh-stage.is-failed .sh-bulbs, .sh-stage.is-failed video { display: none; }
.sh-stage.is-failed .sh-static { display: flex; }

/* ─── Scrub auf dem Handy (nur Heroes mit Mobile-Video) ─── */
@media (max-width: 720px), (orientation: portrait) and (pointer: coarse) {
  .sh.has-mobile:not(.is-static) { --sh-vh-m: 330; height: calc(var(--sh-vh-m) * 1vh); height: calc(var(--sh-vh-m) * 1svh); }
  .sh.has-mobile .sh-stage video, .sh.has-mobile .sh-poster { object-position: 50% 50%; background-position: 50% 50%; }
  .sh.has-mobile .sh-scrim { background: radial-gradient(ellipse 130% 70% at 50% 30%, rgba(10,10,18,0) 40%, rgba(10,10,18,.5) 100%); }
  .sh.has-mobile .sh-band { grid-template-columns: 1fr; align-content: end; align-items: end; padding: 0 20px calc(30px + env(safe-area-inset-bottom)); }
  .sh.has-mobile .sh-band .sh-col { grid-column: 1; max-width: none; }
  .sh.has-mobile .sh-band::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 96%; background: linear-gradient(to top, rgba(5,5,10,.95) 0%, rgba(5,5,10,.88) 26%, rgba(5,5,10,.6) 52%, rgba(5,5,10,0) 100%); }
  .sh.has-mobile .sh-band.is-both::after { display: none; }
  .sh.has-mobile .sh-band.is-both .sh-col.sh-cta { grid-column: 1; justify-self: start; text-align: left; align-items: flex-start; margin-top: 14px; }
  .sh.has-mobile .sh-band h1, .sh.has-mobile .sh-band h2 { font-size: clamp(30px, 8.8vw, 46px); }
  .sh.has-mobile .sh-band p.sh-sub { font-size: 16px; max-width: none; margin-top: 10px; }
  .sh.has-mobile .sh-kick { white-space: normal; font-size: 10px; letter-spacing: .12em; margin-bottom: 10px; }
  .sh.has-mobile .sh-ctas { justify-content: flex-start; margin-top: 16px; }
  .sh.has-mobile .sh-bulbs { display: none; }
  .sh.has-mobile .sh-cue { bottom: 12px; font-size: 10px; }
  .sh.has-mobile .sh-ring { right: 16px; bottom: 16px; }
  .sh.has-mobile .sh-stage.is-failed .sh-poster, .sh.has-mobile.is-static .sh-poster { background-image: var(--sh-static-img-m, var(--sh-static-img)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 720px) { .sh.has-mobile .sh-poster { background-image: var(--sh-static-img-m, var(--sh-static-img)); } }

/* ─── Reveal-Choreografie für Sektionen unter dem Hero ─── */
.sh-rv .sh-part { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--sh-ease-out), transform .9s var(--sh-ease-out); }
.sh-rv.is-in .sh-part { opacity: 1; transform: none; }
.sh-rv.is-in .sh-part:nth-child(1) { transition-delay: 0s } .sh-rv.is-in .sh-part:nth-child(2) { transition-delay: .1s } .sh-rv.is-in .sh-part:nth-child(3) { transition-delay: .2s } .sh-rv.is-in .sh-part:nth-child(4) { transition-delay: .3s } .sh-rv.is-in .sh-part:nth-child(5) { transition-delay: .4s } .sh-rv.is-in .sh-part:nth-child(6) { transition-delay: .5s }
.sh-rv.is-in.is-done .sh-part:nth-child(n) { transition-delay: 0s }

/* ─── Lichterkette als Trenner ─── */
.sh-lights { display: flex; justify-content: center; gap: 12px; padding: 0; margin: 0; list-style: none; }
.sh-lights span { width: 9px; height: 9px; border-radius: 50%; background: rgba(200,149,31,.16); position: relative; }
.sh-lights span::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 3px rgba(200,149,31,.5); opacity: 0; transition: opacity .5s var(--sh-ease); }
.sh-lights.is-in span::after { opacity: 1; }
.sh-lights.is-in span:nth-child(1)::after{transition-delay:0s}.sh-lights.is-in span:nth-child(2)::after{transition-delay:.07s}.sh-lights.is-in span:nth-child(3)::after{transition-delay:.14s}.sh-lights.is-in span:nth-child(4)::after{transition-delay:.21s}.sh-lights.is-in span:nth-child(5)::after{transition-delay:.28s}.sh-lights.is-in span:nth-child(6)::after{transition-delay:.35s}.sh-lights.is-in span:nth-child(7)::after{transition-delay:.42s}.sh-lights.is-in span:nth-child(8)::after{transition-delay:.49s}.sh-lights.is-in span:nth-child(9)::after{transition-delay:.56s}.sh-lights.is-in span:nth-child(10)::after{transition-delay:.63s}.sh-lights.is-in span:nth-child(11)::after{transition-delay:.7s}.sh-lights.is-in span:nth-child(12)::after{transition-delay:.77s}.sh-lights.is-in span:nth-child(13)::after{transition-delay:.84s}.sh-lights.is-in span:nth-child(14)::after{transition-delay:.91s}.sh-lights.is-in span:nth-child(15)::after{transition-delay:.98s}
.sh-lights.is-in.is-done span:nth-child(n)::after { transition-delay: 0s }
.sh-lights.is-on span:nth-child(odd)::after { animation: sh-twinkle 5.2s ease-in-out -1.3s infinite; }
.sh-lights.is-on span:nth-child(even)::after { animation: sh-twinkle 5.2s ease-in-out -3.9s infinite; }
@keyframes sh-twinkle { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* Tab im Hintergrund: Animationen pausieren */
body.sh-paused *, body.sh-paused *::before, body.sh-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .sh-rv .sh-part { opacity: 1; transform: none; transition: none; }
  .sh-lights span::after { opacity: 1; transition: none; animation: none !important; }
  .sh-cue svg { animation: none; }
}