/* ============================================================
   RANDORI PRO · Standortseite v2 „High End"
   Additiv zu tokens.css + standort.css — keine neuen Farben,
   Schriften oder Komponenten. Nur Verfeinerung & Motion.
   Aktiv ausschließlich unter body.v3.
   Alle Animationen respektieren prefers-reduced-motion.
   ============================================================ */

:root {
  --v3-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

/* ── Scroll-Progress (2px, dezent) ─────────────────────────── */
.v3-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 ───── */
.v3 .s-header { position: fixed; transition: background 360ms var(--ease-standard), padding 360ms var(--ease-standard), box-shadow 360ms var(--ease-standard); }
.v3 .s-header.is-scrolled { background: rgba(16, 12, 12, 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); }
.v3 .s-header img.s-logo { transition: height 360ms var(--ease-standard); }
.v3 .s-header.is-scrolled img.s-logo { height: 30px; }

/* ── Hero · Bild auf eigener Ebene (Parallax via JS) ───────── */
.v3 .s-hero:has(.s-hero__bg) { background: var(--rp-tiefschwarz); }
.v3 .s-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 ──────────────────────────── */
.v3 .s-marquee:hover .s-marquee__track { animation-play-state: paused; }

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

/* ── FAQ · weicheres Öffnen, Plus dreht sich zum Minus ─────── */
.v3 .s-q__a { transition: max-height 460ms var(--ease-standard); }
.v3 .s-q__plus { transition: transform 420ms var(--v3-ease); }
.v3 .s-q.is-open .s-q__plus { transform: rotate(90deg); }
/* Basis kollabiert ::after (vertikal) — unter der Rotation bliebe ein
   senkrechter Strich. Invertiert: ::before kollabiert, ::after bleibt
   und liest sich rotiert als Minus. */
.v3 .s-q.is-open .s-q__plus::after { transform: translate(-50%, -50%); }
.v3 .s-q.is-open .s-q__plus::before { transform: translate(-50%, -50%) scaleX(0); }
.v3 .s-q__btn h3 { transition: color 220ms var(--ease-standard); }
.v3 .s-q__btn:hover h3 { color: var(--rp-rot-akzent); }
.v3 .s-faq--light .s-q__btn:hover h3 { color: var(--rp-rot-anker); }

/* ── Trainer · Porträts färben sich bei Hover ein ──────────── */
.v3 .s-trainer__portrait { box-shadow: 0 24px 50px -30px rgba(26, 20, 20, 0.45); }
.v3 .s-trainer__portrait img { transition: filter 600ms var(--ease-standard), transform 900ms var(--v3-ease); }
.v3 .s-trainer:hover .s-trainer__portrait img { filter: grayscale(0) contrast(1.02); transform: scale(1.045); }

/* ── Ablauf · „In drei Schritten auf die Matte" ────────────── */
.v3 .s-steps__h em { font-style: normal; color: var(--rp-rot-akzent); }
.v3 .s-step { position: relative; padding-top: 46px; }
/* Knoten auf der Linie */
.v3 .s-step::before { content: ""; position: absolute; top: -7px; left: 0; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; background: var(--rp-rot-akzent); border: 2px solid var(--rp-rot-akzent); z-index: 1; }
/* Rote Pfadlinie · überbrückt das Grid-Gap zum nächsten Schritt */
.v3 .s-step::after { content: ""; position: absolute; top: -2px; left: 0; height: 3px; width: 100%; background: var(--rp-rot-akzent); transform-origin: 0 50%; }
.v3 .s-step:not(:last-child)::after { width: calc(100% + 24px); }
/* Ghost-Ziffern statt kleiner Mono-Nummer */
.v3 .s-step__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 6.5vw, 100px); line-height: 0.9; letter-spacing: -0.04em; color: rgba(255,255,255,0.16); margin: 0 0 22px; display: block; }
@supports (-webkit-text-stroke: 1px #fff) {
  .v3 .s-step__num { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.28); transition: -webkit-text-stroke-color 320ms var(--ease-standard); }
  .v3 .s-step:hover .s-step__num { -webkit-text-stroke-color: rgba(220,13,29,0.85); }
}
@media (max-width: 900px) {
  .v3 .s-step:not(:last-child)::after { width: 100%; }
}

/* ── Testimonial · Sichtbarkeit & Kontrast ─────────────────── */
.v3 .s-quote::before { background: radial-gradient(ellipse at 20% 8%, rgba(220,13,29,0.5), transparent 58%), radial-gradient(ellipse at 85% 100%, rgba(0,0,0,0.35), transparent 55%); }
.v3 .s-quote__mark { color: rgba(212,201,181,0.95); text-shadow: 0 4px 30px rgba(0,0,0,0.35); }
.v3 .s-quote__q { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.3); }
.v3 .s-quote__q em { font-style: inherit; color: var(--rp-beige); }
.v3 .s-quote__attr { color: rgba(255,255,255,0.95); }
/* .s-ph (Platzhalter-Marker) neutralisieren — der KUG-§22-Hinweis darunter
   bleibt als Kennzeichnung des unfreigegebenen Inhalts bestehen */
.v3 .s-quote__q .s-ph, .v3 .s-quote__attr .s-ph { color: inherit; font-style: inherit; }

/* ── Karte · weicher Schatten-Lift bei Hover ───────────────── */
.v3 .s-facts__map { transition: box-shadow 500ms var(--ease-standard); }
.v3 .s-facts__map:hover { box-shadow: 0 40px 100px -44px rgba(0, 0, 0, 0.55); }

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

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

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

  /* Scroll-Reveals · JS vergibt data-rv + is-in */
  .v3 [data-rv] { opacity: 0; transform: translateY(20px); transition: opacity 420ms var(--v3-ease), transform 420ms var(--v3-ease); }
  .v3 [data-rv].is-in { opacity: 1; transform: translateY(0); }

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

  /* Button-Glanz läuft bei Hover durch */
  .v3 .s-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(--v3-ease); pointer-events: none; }
  .v3 .s-btn:hover::before { transform: skewX(-18deg) translateX(340%); }

  /* Programm-Karten · sanfter Lift (nach Reveal aktiv) */
  .v3 .s-prog { transition: transform 600ms var(--v3-ease), box-shadow 600ms var(--ease-standard); }
  .v3 .s-prog:hover { transform: translateY(-6px); box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.55); }

  /* Ablauf · Pfadlinie zeichnet sich Schritt für Schritt,
     Knoten leuchten nacheinander auf (JS setzt body.js-motion + .is-lit) */
  .v3.js-motion .s-steps .s-step::after { transform: scaleX(0); transition: transform 700ms linear; }
  .v3.js-motion .s-steps.is-lit .s-step::after { transform: scaleX(1); }
  .v3.js-motion .s-steps.is-lit .s-step:nth-child(1)::after { transition-delay: 200ms; }
  .v3.js-motion .s-steps.is-lit .s-step:nth-child(2)::after { transition-delay: 950ms; }
  .v3.js-motion .s-steps.is-lit .s-step:nth-child(3)::after { transition-delay: 1700ms; }
  .v3.js-motion .s-steps .s-step::before { background: var(--rp-tiefschwarz); border-color: rgba(255,255,255,0.35); transition: background 320ms var(--ease-standard), border-color 320ms var(--ease-standard), box-shadow 600ms var(--ease-standard); }
  .v3.js-motion .s-steps.is-lit .s-step::before { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); box-shadow: 0 0 0 6px rgba(220, 13, 29, 0.16); }
  .v3.js-motion .s-steps.is-lit .s-step:nth-child(1)::before { transition-delay: 150ms; }
  .v3.js-motion .s-steps.is-lit .s-step:nth-child(2)::before { transition-delay: 900ms; }
  .v3.js-motion .s-steps.is-lit .s-step:nth-child(3)::before { transition-delay: 1650ms; }

  /* Testimonial · Wort-für-Wort-Reveal (JS zerlegt das Zitat in .v3-w) */
  .v3.js-motion .s-quote__q .v3-w { display: inline-block; opacity: 0; transform: translateY(0.5em); filter: blur(5px); transition: opacity 650ms var(--v3-ease), transform 650ms var(--v3-ease), filter 650ms var(--v3-ease); }
  .v3.js-motion .s-quote.is-in .s-quote__q .v3-w { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── Finaler CTA · langes Schlusswort auf schmalen Handys (06.10.2026)
   „auszuprobieren." ist bei 42px breiter als die Zeile auf 320–375px und
   wurde mitten im Wort getrennt. Schrift dort so weit kleiner, dass das
   Wort in eine Zeile passt (dieselbe Regel steht schon seitenweise für
   Mariendorf, Steglitz und Tegel). */
@media (max-width: 420px) {
  .v3 .s-final__h { font-size: min(42px, calc((100vw - 48px) / 7.9)); }
}