/* ============================================================
   RANDORI-PRO · Fitness-Hub — Scroll-Kapitel (additiv)
   Portiert aus dem Scroll-Lab:
   · Exp. 16 „Schritt für Schritt" → Milon-Scrollytelling (fs-milon)
   · Exp. 12 „Versatz" → Kraft-Claim vor „Das unterscheidet uns" (fs-power)
   Plus: Bild-Slots in den Format-Karten (fh-fcard__ph).
   Basis-Zustand ist statisch lesbar; Motion nur unter body.js-motion
   (wird von fitness-hub.js gesetzt, respektiert Reduced-Motion).
   Aktiv ausschließlich unter body.bv3.fh.
   ============================================================ */

/* ── Format-Karten · Bild-Slot ─────────────────────────────── */
.bv3.fh .fh-fcard__ph { position: relative; aspect-ratio: 16/7; border-radius: 14px; overflow: hidden; margin: 0 0 22px; }
.bv3.fh .fh-fcard__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--kb-ease); }
.bv3.fh .fh-fcard:hover .fh-fcard__ph img { transform: scale(1.04); }
.bv3.fh .fh-fcard__ph .kb-ph__note { font-size: 10.5px; line-height: 1.6; width: 92%; }
.bv3.fh .fh-fcard__ph .kb-ph__tag { left: 12px; bottom: 12px; }
.bv3.fh .fh-fcard__more { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: -8px 0 24px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: 0.03em; color: var(--kb-rot-akzent); border-bottom: 1px solid transparent; transition: border-color 200ms; }
.bv3.fh .fh-fcard__more:hover { border-color: var(--kb-rot-akzent); }

/* ============================================================
   3b · SO LÄUFT DER MILON-ZIRKEL · WEISS · Sticky-Scrollytelling
   Links laufen vier Schritte vorbei, rechts bleibt der Bild-Slot
   stehen und wechselt zum passenden Moment.
   ============================================================ */
.bv3.fh .fs-milon { background: #fff; color: var(--kb-body); padding: clamp(96px, 12vw, 152px) 0 0; scroll-margin-top: 70px; }
/* Nachzug zum Randabstand (Punkt 4): .fs-milon__head sitzt als
   einziger Sektionskopf der Seite auf dem .b-wrap-Element selbst.
   Das max-width:880px hat damit die Zentrierung des Wraps (margin:
   0 auto) geerbt — der Kopf stand bei JEDER Breite 300px rechts von
   seinen eigenen Schritten und von allen anderen Sektionsköpfen
   (gemessen 320/560/880 statt 40/260/580).
   Der Kopf bekommt jetzt wieder die Wrap-Geometrie; die Textbreite
   bleibt mit 800px exakt wie vorher, die Zeilenumbrüche ändern sich
   also nicht. */
.bv3.fh .fs-milon__head { max-width: 1480px; }
.bv3.fh .fs-milon__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.03em; color: var(--kb-rot-anker); margin: 0 0 22px; max-width: 20ch; text-wrap: balance; }
.bv3.fh .fs-milon__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--kb-rot-akzent); }
.bv3.fh .fs-milon__lede { font-size: 18px; line-height: 1.7; color: var(--kb-ink); margin: 0; max-width: 62ch; }
.bv3.fh .fs-milon__lede strong { color: var(--kb-rot-anker); font-weight: 700; }
/* Textbreite auf dem bisherigen Wert halten (der 880er-Kopf liess
   800px Inhalt zu) — die Zeilenumbrüche bleiben damit unverändert,
   nur die Ausrichtung wandert nach links. Muss NACH den beiden
   Regeln oben stehen, sonst gewinnen deren 20ch/62ch. */
.bv3.fh .fs-milon__h, .bv3.fh .fs-milon__lede { max-width: 800px; }

.bv3.fh .fs-milon__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); padding-bottom: clamp(64px, 8vw, 110px); }
/* Abstand zwischen den vier Schritten halbiert (vorher 78vh).
   Die Schritthoehe steuert zugleich die Scrollytelling-Mechanik in
   js/fitness-scrolly.js (Schaltpunkte gegen vh*0.55/0.75/0.18). */
.bv3.fh .fs-step { min-height: 39vh; display: flex; flex-direction: column; justify-content: center; }
.bv3.fh.js-motion .fs-step { opacity: 0.25; transform: translateY(14px); transition: opacity 450ms, transform 450ms var(--kb-ease); }
.bv3.fh .fs-step.is-on, .bv3.fh.js-motion .fs-step.is-on { opacity: 1; transform: none; }
.bv3.fh .fs-step__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--kb-rot-akzent); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bv3.fh .fs-step__num::after { content: ""; flex: 0 0 42px; height: 1px; background: var(--kb-rot-akzent); }
.bv3.fh .fs-step h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 52px); letter-spacing: -0.025em; line-height: 1.0; color: var(--kb-ink); margin: 0 0 18px; max-width: 15ch; text-wrap: balance; }
.bv3.fh .fs-step p { font-size: 16.5px; line-height: 1.65; margin: 0 0 22px; max-width: 44ch; color: var(--kb-body); }
.bv3.fh .fs-step__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #a89c84; }
.bv3.fh .fs-step__ph { display: none; }

.bv3.fh .fs-media { position: relative; }
.bv3.fh .fs-media__inner { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.bv3.fh .fs-media__frame { position: relative; width: min(100%, 520px); aspect-ratio: 4/4.6; border-radius: 24px; overflow: hidden; box-shadow: 0 50px 110px -50px rgba(26,20,20,0.45); }
.bv3.fh .fs-shot { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; opacity: 0; transform: scale(1.05); transition: opacity 550ms, transform 900ms var(--kb-ease); }
.bv3.fh .fs-shot:first-child { opacity: 1; transform: none; }
.bv3.fh.js-motion .fs-shot:first-child { opacity: 0; transform: scale(1.05); }
.bv3.fh .fs-shot.is-on, .bv3.fh.js-motion .fs-shot.is-on { opacity: 1; transform: none; }
.bv3.fh .fs-media__num { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #a89c84; }
.bv3.fh .fs-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .bv3.fh .fs-milon__body { grid-template-columns: 1fr; }
  .bv3.fh .fs-media { display: none; }
  .bv3.fh .fs-step, .bv3.fh.js-motion .fs-step { min-height: 0; padding: 44px 0; opacity: 1; transform: none; }
  .bv3.fh .fs-step__ph { display: block; aspect-ratio: 16/10; border-radius: 14px; margin: 0 0 22px; }
}

/* ============================================================
   3c · KRAFT-CLAIM · DUNKELROT · „Versatz"
   Drei Versprechen schieben sich in die Achse und füllen sich —
   läuft nahtlos in „Das unterscheidet uns" (gleiche Bühne).
   ============================================================ */
.bv3.fh .fs-power { position: relative; background: var(--kb-rot-anker); height: 230vh; }
.bv3.fh .fs-power__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.bv3.fh .fs-vline { display: block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 9.6vw, 164px); letter-spacing: -0.035em; line-height: 0.98; margin: 0; color: #fff; white-space: nowrap; will-change: transform; transition: color 350ms; }
.bv3.fh .fs-vline i { font-style: normal; color: var(--rp-beige); }
.bv3.fh.js-motion .fs-vline { color: transparent; -webkit-text-stroke: 1.5px rgba(250,246,238,0.4); }
.bv3.fh.js-motion .fs-vline i { color: transparent; }
.bv3.fh.js-motion .fs-vline.is-hot { color: #fff; -webkit-text-stroke-color: transparent; }
.bv3.fh.js-motion .fs-vline.is-hot i { color: var(--rp-beige); }
.bv3.fh .fs-power__sub { margin: 40px 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(17px, 2vw, 25px); color: rgba(250,246,238,0.85); }
.bv3.fh.js-motion .fs-power__sub { opacity: 0; transform: translateY(14px); transition: opacity 500ms, transform 500ms var(--kb-ease); }
.bv3.fh .fs-power__sub.is-on, .bv3.fh.js-motion .fs-power__sub.is-on { opacity: 1; transform: none; }
@media (max-width: 768px) { .bv3.fh .fs-vline { white-space: normal; text-align: center; } }

/* ── Reduced Motion: kompakt & statisch ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bv3.fh .fs-power { height: auto; }
  .bv3.fh .fs-power__sticky { position: static; height: auto; padding: clamp(80px, 10vw, 140px) 0; }
  .bv3.fh .fs-step { min-height: 0; padding: 40px 0; }
  .bv3.fh .fs-media__inner { position: static; height: auto; padding: 40px 0; }
}