/* ============================================================
   RANDORI PRO · Standort Mariendorf v2 „High End"
   Additiv zu tokens.css + standort.css + mariendorf.css und
   standort-v3.css (Glas-Header, Progress, Glanz, Reveals, FAQ).
   Aktiv ausschließlich unter body.v3.

   ENTKOPPELT AM 01.08.2026 — von Dominik freigegeben.
   Teil 1 dieser Datei ist aus css/steglitz-v3.css übernommen
   (Mariendorf lud die Datei vorher mit). Teil 2 ist die schon
   vorher bestehende Mariendorf-Politur. Damit hat Mariendorf das
   normale Hausmuster: mariendorf.css + mariendorf-v3.css.
   Siehe docs/offene-punkte.md, 01.08.2026, Mariendorf Punkt 3.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   TEIL 1 — übernommen aus css/steglitz-v3.css (01.08.2026)
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   WICHTIG · Steps-Neutralisierung
   Mariendorf bringt eine EIGENE Ablauf-Choreografie mit (Nodes,
   Verbindungslinie, Spark, Staffelung aus mariendorf.css). Die
   Waltersdorf-Pfadlinien-Styles aus standort-v3.css werden hier
   exakt zurückgenommen, damit nichts doppelt animiert.
   ════════════════════════════════════════════════════════════ */
.v3 .s-steps--steglitz .s-step { padding-top: 0; }
.v3 .s-steps--steglitz .s-step::before,
.v3 .s-steps--steglitz .s-step::after { content: none; }
.v3 .s-steps--steglitz .s-step__num {
  font-family: var(--font-mono); font-weight: 500; font-size: 15px;
  line-height: 1; letter-spacing: 0.12em; color: #fff;
  -webkit-text-stroke: 0; margin: 0 0 32px;
  display: grid; place-items: center;
}
/* Eigene Steps-Reveals der Seite haben Vorrang — v3-Reveal hier aus */
.v3 .s-steps--steglitz [data-rv] { opacity: 1; transform: none; transition: none; }

/* ── Hero · Bild auf eigener Ebene (Parallax via JS) ───────── */
.v3 .c-hero__bg img { will-change: transform; }

/* ── Kacheln & Karten · Politur (immer aktiv) ──────────────── */
.v3 .c-feature { transition: box-shadow 500ms var(--ease-standard); }
.v3 .c-feature:hover { box-shadow: 0 36px 80px -40px rgba(45, 8, 14, 0.55); }
.v3 .c-hood__media img { transition: transform 900ms var(--v3-ease); }
.v3 .c-hood__media:hover img { transform: scale(1.04); }
.v3 .c-voices__arrow { transition: background 260ms var(--ease-standard), border-color 260ms var(--ease-standard), transform 260ms var(--v3-ease); }
.v3 .c-voices__arrow:hover { transform: translateY(-2px); }

/* ============================================================
   MOTION — nur bei prefers-reduced-motion: no-preference
   (Keyframes v3-rise / v3-fade kommen aus standort-v3.css)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero-Entrance · gestaffeltes Aufsteigen */
  .v3 .c-hero .s-kicker { animation: v3-rise 900ms var(--v3-ease) 500ms backwards; }
  .v3 .c-hero__h1 { animation: v3-rise 1000ms var(--v3-ease) 630ms backwards; }
  .v3 .c-hero__row { animation: v3-rise 1000ms var(--v3-ease) 810ms backwards; }

  /* ── AKZENT · Community-Signatur: „man kennt sich" ─────────
     Die Willkommens-Zeile blendet ein, danach der Schriftzug
     (die Gesichter davor sind im Oktober 2026 entfallen).
     Läuft einmalig beim Laden des Heros. */
  .v3 .c-welcome { animation: v3-fade 600ms var(--ease-standard) 150ms backwards; }
  .v3 .c-welcome__txt { animation: v3-fade 700ms var(--ease-standard) 1000ms backwards; }


  /* Kicker-Linie · auch für c-Sektionen (Selektor aus standort-v3
     greift bereits auf .s-kicker innerhalb [data-rv]) */
}

/* ════════════════════════════════════════════════════════════
   TEIL 2 — Mariendorf-eigene Politur (bestand schon vorher)
   ════════════════════════════════════════════════════════════ */

/* ── Hero · nur noch EIN Button ────────────────────────────────
   Der zweite Hero-Button („Kursangebot ansehen") ist entfallen,
   ebenso die Meta-Zeile. Unter dem verbliebenen Button steht nur
   noch „Kostenlos & unverbindlich" — mittig darunter, Desktop wie
   Mobil. Steht unbedingt, ohne :has()-Vorbehalt: mariendorf.css
   enthält dieselbe Regel an :only-child geknüpft, diese hier gilt
   unabhängig davon weiter, falls je ein zweiter Button dazukommt.
   Gleichlautend, daher konfliktfrei. */
.v3 .c-hero--steglitz .c-hero__cta-wrap{align-items:center}

/* Hinweis Kicker-Kontrast: Der WCAG-AA-Fix für die Kickerzeile sitzt
   seit dem 01.08.2026 in .c-hero__bg::after in css/mariendorf.css —
   dort, wo ihn der Hausvorschlag aus dem Spandau-Durchgang vorsieht.
   Hier steht bewusst nichts, damit es nur EINE Stelle gibt. */

/* ── Feature-Kachel · Flächenlink statt äußerem Anker ───────────
   Der Beschreibungstext verlinkt die Altersgruppen; ein <a> um die
   ganze Kachel hätte verschachtelte Anker ergeben. Der Wrapper ist
   deshalb ein <div>, und der Anker in .c-feature__name spannt sich
   per ::after über die gesamte Kachel.
   .c-feature__body wird dafür auf position:static gesetzt — es ist
   Flex-Kind von .c-feature, sein z-index:2 bleibt also wirksam, und
   das ::after bezieht sich damit auf .c-feature statt auf den Body.
   Die Textlinks liegen mit z-index über der Fläche und bleiben
   einzeln anklickbar. */
.v3 .c-sports .c-feature__body{position:static}
.v3 .c-sports .c-feature__name a{color:inherit;text-decoration:none}
.v3 .c-sports .c-feature__name a::after{content:"";position:absolute;inset:0;z-index:4}
.v3 .c-sports .c-feature__name a:focus-visible{outline:2px solid var(--rp-beige);outline-offset:3px}
.v3 .c-sports .c-feature__sub a{position:relative;z-index:6}

/* ── Sportarten-Kacheln · kleine Bild-Thumbs (aus Asset-DB) ── */
.v3 .c-tile--thumb{flex-direction:row;align-items:stretch;gap:16px}
.v3 .c-tile--thumb .c-tile__body{display:flex;flex-direction:column;justify-content:space-between;gap:18px;flex:1;min-width:0}
.v3 .c-tile__thumb{width:112px;min-height:88px;border-radius:12px;overflow:hidden;flex-shrink:0;position:relative}
.v3 .c-tile__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--c-grade);transition:transform 700ms var(--v3-ease)}
.v3 .c-tile:hover .c-tile__thumb img{transform:scale(1.07)}
@media (max-width:520px){.v3 .c-tile__thumb{width:92px}}

/* ── Stimmen · echte Google-Zitate mit Symbolfoto ──────────── */
.v3 .c-voice__q{font-size:clamp(20px,2.6vw,34px)}
.c-voice__stars{display:flex;align-items:center;gap:14px;margin:0 0 20px}
.c-voice__stars .st{color:var(--rp-rot-akzent);font-size:15px;letter-spacing:3px}
.c-voice__stars .src{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rp-grau-muted)}
.c-voice__cap{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-anker);background:rgba(255,255,255,.86);padding:4px 9px;border-radius:999px;pointer-events:none}

/* ── Finaler CTA · Kanji-Wasserzeichen (Markentiefe, statisch) ── */
.v3 .s-final--steglitz{position:relative;overflow:hidden}
.v3 .s-final--steglitz .s-final__inner{position:relative;z-index:1}
.md-kanji{position:absolute;right:clamp(-30px,2vw,48px);bottom:-9%;width:clamp(200px,24vw,400px);opacity:.09;pointer-events:none;user-select:none;z-index:0}

/* ── Kennzahlen · Akzentlinie über den Zellen ──────────────── */
.v3 .c-stat__cell{position:relative;border-top-color:rgba(255,255,255,.14)}
.v3 .c-stat__cell::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--rp-rot-akzent),rgba(212,201,181,.65));transform-origin:0 50%}

@media (prefers-reduced-motion: no-preference){
  /* 1 · Hero-Bild setzt sich beim Laden (kein Parallax) */
  .v3 .c-hero__bg img{animation:md-hero-settle 2600ms var(--v3-ease) both}
  @keyframes md-hero-settle{from{transform:scale(1.07)}to{transform:scale(1)}}

  /* 2 · Vorhang-Reveal · beige Blende wischt nach rechts weg.
     Nur bei aktivem JS (body.js-motion); ersetzt dort den
     Standard-Fade dieser Elemente (keine Doppel-Animation). */
  .v3.js-motion .md-unveil{position:relative}
  .v3.js-motion .md-unveil::before{content:"";position:absolute;inset:0;background:var(--rp-beige-deep);z-index:5;transform-origin:100% 50%;transition:transform 950ms var(--v3-ease) 60ms;pointer-events:none}
  .v3.js-motion .md-unveil.is-unveiled::before{transform:scaleX(0)}
  .v3.js-motion .md-unveil[data-rv]{opacity:1;transform:none;transition:none}

  /* 3 · Kennzahlen-Linie zeichnet sich zellenweise */
  .v3.js-motion .c-stat__cell::before{transform:scaleX(0)}
  .v3.js-motion .c-stat.is-lit .c-stat__cell::before{transform:scaleX(1);transition:transform 900ms var(--v3-ease)}
  .v3.js-motion .c-stat.is-lit .c-stat__grid .c-stat__cell:nth-child(2)::before{transition-delay:140ms}
  .v3.js-motion .c-stat.is-lit .c-stat__grid .c-stat__cell:nth-child(3)::before{transition-delay:280ms}
  .v3.js-motion .c-stat.is-lit .c-stat__grid .c-stat__cell:nth-child(4)::before{transition-delay:420ms}
}

/* ── Trainer · zwei Karten ordentlich setzen (06.10.2026) ────────
   Das Standard-Raster hat drei Spalten. Mit zwei Karten blieb am
   Computer rechts eine leere Spalte. Gilt nur, solange genau zwei
   Karten im Raster stehen (:has) — kommen weitere Trainer dazu,
   greift wieder das normale Dreier-Raster.
   · Computer: zwei Spalten in Dreier-Spaltenbreite, mittig.
   · Tablet (601–900px): nebeneinander statt untereinander.
   · Handy: unverändert untereinander. */
@media (min-width: 901px) {
  .v3 .s-trainers__grid:has(> .s-trainer:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, calc((100% - 96px) / 3)));
    justify-content: center;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .v3 .s-trainers__grid:has(> .s-trainer:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px; gap: 40px;
    margin-left: auto; margin-right: auto;
  }
}

/* ── 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 umbrochen. Schrift dort etwas kleiner. */
@media (max-width: 420px) {
  .v3 .s-final__h { font-size: min(42px, calc((100vw - 48px) / 7.9)); }
}