/* ============================================================
   RANDORI PRO · Startseite Bold v2 „High End"
   Additiv zu tokens.css + site.css + Inline-Styles (b-*).
   Keine neuen Farben, Schriften oder Komponenten — nur
   Verfeinerung & Motion. Aktiv ausschließlich unter body.bv3.
   Alle Animationen respektieren prefers-reduced-motion.
   ============================================================ */

:root {
  --bv3-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bv3-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.bv3 ::selection { background: var(--rp-rot-akzent); color: #fff; }

/* ── Scroll-Progress (2px, dezent) ─────────────────────────── */
.bv3-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; background: var(--rp-rot-akzent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ── Header · fixiert, wird beim Scrollen zur Glasleiste ───── */
.bv3 .b-header { position: fixed; transition: background 360ms var(--ease-standard), padding 360ms var(--ease-standard), box-shadow 360ms var(--ease-standard); }
.bv3 .b-header.is-scrolled { background: rgba(20, 16, 15, 0.72); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); padding: 14px 0; box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px -18px rgba(0,0,0,0.6); }
.bv3 .b-header img.b-logo { transition: height 360ms var(--ease-standard); }
.bv3 .b-header.is-scrolled img.b-logo { height: 30px; }

/* ── Hero · Bild auf eigener Ebene (Parallax via JS) ───────── */
.bv3 .b-hero:has(.b-hero__bg) { background: var(--rp-tiefschwarz); }
.bv3 .b-hero__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(20,16,15,0.55) 0%, rgba(20,16,15,0.15) 30%, rgba(20,16,15,0.85) 100%), url('../assets/fotos/sportarten-mich-verteidigen-koennen.webp') center 35% / cover no-repeat; will-change: transform; }

/* ── Marquee · pausiert bei Hover ──────────────────────────── */
.bv3 .b-marquee:hover .b-marquee__track { animation-play-state: paused; }

/* ── Buttons · Glanzkante + tiefer Schatten ────────────────── */
.bv3 .b-btn { position: relative; overflow: hidden; }
.bv3 .b-btn--big { box-shadow: 0 18px 44px -16px rgba(220, 13, 29, 0.5); }
.bv3 .b-btn--big:hover { box-shadow: 0 24px 54px -16px rgba(220, 13, 29, 0.6); }
.bv3 .b-btn--ghost, .bv3 .b-btn--ghost-dark { box-shadow: none; }

/* ── Hover-Politur (reine Zustandswechsel, immer aktiv) ────── */
.bv3 .b-founder__portrait img { transition: filter 400ms var(--ease-standard), transform 500ms var(--bv3-ease); }
.bv3 .b-founder__portrait:hover img { filter: grayscale(0) contrast(1.02); transform: scale(1.05); }
.bv3 .b-voice { transition: transform 300ms var(--bv3-ease), box-shadow 300ms var(--ease-standard); }
.bv3 .b-voice:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -30px rgba(26, 20, 20, 0.4); }
.bv3 .b-q__btn span:first-child { transition: color 220ms var(--ease-standard); }
.bv3 .b-q__btn:hover span:first-child { color: var(--rp-rot-akzent); }
.bv3 .b-q__a { transition: max-height 460ms var(--ease-standard); }
.bv3 .b-map-wrap { transition: box-shadow 500ms var(--ease-standard); }
.bv3 .b-map-wrap:hover { box-shadow: 0 40px 100px -44px rgba(0, 0, 0, 0.75); }

/* Reduced Motion · auch Bestands-Loops stilllegen */
@media (prefers-reduced-motion: reduce) {
  .bv3 .b-marquee__track { animation: none; }
  .bv3 .b-pin { animation: none; }
}

/* ============================================================
   MOTION — nur bei prefers-reduced-motion: no-preference
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero-Entrance · gestaffeltes Aufsteigen */
  .bv3 .b-header { animation: bv3-head-in 800ms var(--bv3-ease) 100ms backwards; }
  .bv3 .b-variant-switch { animation: bv3-fade 800ms var(--ease-standard) 200ms backwards; }
  .bv3 .b-hero .b-kicker { animation: bv3-rise 900ms var(--bv3-ease) 150ms backwards; }
  .bv3 .b-hero__h1 { animation: bv3-rise 1000ms var(--bv3-ease) 280ms backwards; }
  .bv3 .b-hero__row { animation: bv3-rise 1000ms var(--bv3-ease) 460ms backwards; }
  .bv3 .b-hero__corner { animation: bv3-fade 900ms var(--ease-standard) 750ms backwards; }
  .bv3 .b-marquee { animation: bv3-fade 900ms var(--ease-standard) 900ms backwards; }

  @keyframes bv3-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes bv3-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bv3-head-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }

  /* Scroll-Reveals · JS vergibt data-rv + is-in · straff (F20: ~450ms) */
  .bv3 [data-rv] { opacity: 0; transform: translateY(24px); transition: opacity 400ms var(--bv3-ease), transform 400ms var(--bv3-ease); }
  .bv3 [data-rv].is-in { opacity: 1; transform: translateY(0); }

  /* Kicker-Linie zeichnet sich beim Reveal */
  .bv3 [data-rv] .b-kicker::before, .bv3 [data-rv].b-kicker::before { width: 0; transition: width 500ms var(--bv3-ease) 150ms; }
  .bv3 [data-rv].is-in .b-kicker::before, .bv3 [data-rv].is-in.b-kicker::before { width: 40px; }

  /* Button-Glanz läuft bei Hover durch */
  .bv3 .b-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.22), transparent); transform: skewX(-18deg); transition: transform 800ms var(--bv3-ease); pointer-events: none; }
  .bv3 .b-btn:hover::before { transform: skewX(-18deg) translateX(340%); }

  /* Programm-Karten & Duo-Tiles · sanfter Lift */
  .bv3 .b-prog { transition: transform 300ms var(--bv3-ease), box-shadow 300ms var(--ease-standard); }
  .bv3 .b-prog:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.65); }
  .bv3 .b-duo-tile { transition: transform 300ms var(--bv3-ease), box-shadow 300ms var(--ease-standard); }
  .bv3 .b-duo-tile:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.6); }

  /* ── AKZENT · Standort-Pins landen nacheinander ────────────
     JS setzt .is-pins auf .b-map-wrap, sobald die Karte
     sichtbar ist. Ohne JS (kein .js-motion) bleiben die Pins
     statisch sichtbar. */
  .bv3.js-motion .b-map-wrap .b-pin { opacity: 0; transform: translate(-50%, -50%) scale(0); transition: transform 650ms var(--bv3-spring), opacity 250ms var(--ease-standard); }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin:hover { transform: translate(-50%, -50%) scale(1.2); }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin:nth-of-type(1) { transition-delay: 150ms, 150ms; }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin:nth-of-type(2) { transition-delay: 270ms, 270ms; }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin:nth-of-type(3) { transition-delay: 390ms, 390ms; }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin:nth-of-type(4) { transition-delay: 510ms, 510ms; }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin:nth-of-type(5) { transition-delay: 630ms, 630ms; }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin:nth-of-type(6) { transition-delay: 750ms, 750ms; }
  .bv3.js-motion .b-map-wrap.is-pins .b-pin:nth-of-type(7) { transition-delay: 870ms, 870ms; }
}