/* ============================================================
   RANDORI-PRO · Sportartenseite „Frühförderung — Fit Kids & Budo Minis"
   Template A „Eltern-Überzeuger" · Stimmung 1 „Warm & Hell"
   — am weichen, jüngsten Ende der ganzen Website (Zielgruppe 2–5).
   Noch größere Rundungen, mehr cremige Beige-/Weißflächen, sanfteste
   Bewegung. Eltern-Du durchgehend („dein Kind").

   Basisschicht (ohne Motion). Baut auf tokens.css + site.css auf und
   übernimmt das b-*-Komponentensystem (Header, Kicker, Buttons, Link,
   FAQ, Footer) — keine neuen Farben, Schriften oder Komponenten.
   Seitenspezifische Sektionen tragen das Präfix .ff-.

   Bewusste Abgrenzung zur Kickboxen-Kinder-Seite (gleiches Template /
   gleiche Stimmung): organischer Blob-Hero statt Kreis, „Für wen" als
   versetzte Bild-Text-Blöcke statt drei Karten, und als markante
   Akzent-Animation die ALTERSSTUFEN-REISE (geschwungener Weg) statt
   der vertikalen Wachstums-Stufenleiter.

   Farbrhythmus (Drei-Anker, Stimmung 1 — hell/warm dominiert):
   1 Hero (helles Beige #faf6ee)        · HELL
   2 Was ist das? (Weiß)                · HELL
   3 Für wen? (ANKER 1, Dunkelrot)      · DUNKEL
   4 Testimonial (helles Beige)         · HELL
   5 Was lernt dein Kind? (Weiß)        · HELL  ← Altersstufen-Reise
   6 Das unterscheidet uns (ANKER 2)    · DUNKEL
   7 FAQ (Hellgrau #f3f3f3)             · HELL
   8 Standorte (Weiß)                   · HELL
   9 Finaler CTA (ANKER 3, Schwarz)     · DUNKEL
   ============================================================ */

:root {
  --ff-rot-anker:  var(--rp-rot-anker);   /* #6D1723 */
  --ff-cream:      #faf6ee;                /* helles, warmes Beige (Hero/§4) */
  --ff-cream-2:    #f6efe1;                /* zweite, tiefere Cremestufe */
  --ff-grau:       #f3f3f3;                /* Hellgrau (FAQ) */
  --ff-r:          36px;                   /* noch großzügigerer Radius (jüngste Seite) */
  --ff-r-card:     22px 22px 36px 36px;    /* Kinder-Karten · oben kleiner, unten stärker gerundet (identisch mit Kickboxen) */
  --ff-r-sm:       22px;
}

/* Helle, warme Grundbühne */
body.ff { background: var(--rp-white); color: var(--rp-grau-7012); font-family: var(--font-body); }

.b-wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.b-wrap--narrow { max-width: 1040px; }
@media (max-width: 720px){ .b-wrap{ padding: 0 24px; } }

/* ── Kicker (Drei-Anker-Rhythmus) ──────────────────────────── */
.b-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rp-rot-akzent); margin: 0 0 28px; display: flex; align-items: center; gap: 14px; }
.b-kicker::before { content:""; width: 40px; height: 1px; background: var(--rp-rot-akzent); flex-shrink: 0; }
.b-kicker--anker { color: var(--ff-rot-anker); }
.b-kicker--anker::before { background: var(--ff-rot-anker); }
.b-kicker--beige { color: var(--rp-beige); }
.b-kicker--beige::before { background: var(--rp-beige); }
.b-kicker--center { justify-content: center; }

/* ── Buttons (weiche, runde Pillen) ────────────────────────── */
.b-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--rp-rot-akzent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 20px 38px; border-radius: 999px; transition: background 220ms var(--ease-standard), transform 220ms var(--ease-standard); }
.b-btn:hover { background: #c40b1a; transform: translateY(-2px); }
.b-btn--big { padding: 24px 48px; font-size: 15px; }
.b-btn--ghost { background: transparent; border: 1px solid var(--ff-rot-anker); color: var(--ff-rot-anker); }
.b-btn--ghost:hover { background: var(--ff-rot-anker); color: #fff; transform: translateY(-2px); }
@media (max-width: 420px){ .b-btn--big { padding: 18px 32px; font-size: 14px; } }

/* ── Textlink ──────────────────────────────────────────────── */
.b-link { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-rot-akzent); display: inline-flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rp-rot-akzent); padding-bottom: 6px; }
.b-link::after { content: "→"; transition: transform 220ms var(--ease-standard); }
.b-link:hover::after { transform: translateX(6px); }
.b-link--anker { color: var(--ff-rot-anker); border-color: var(--ff-rot-anker); }

/* Platzhalter-Marker (sichtbar, kontrastsicher) ───────────── */
.ff .s-ph { color: var(--rp-rot-akzent); font-style: normal; }

/* ============================================================
   HEADER (b-header) · helle Variante über hellem Hero.
   Glas-Verhalten in bold-v3.css; helle Glasleiste in -v3.css.
   ============================================================ */
.b-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 24px 0; }
.b-header__inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; }
.b-header img.b-logo { height: 38px; display: block; transition: filter 360ms var(--ease-standard); }
.b-nav { display: flex; gap: 34px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.b-nav a { color: var(--rp-tiefschwarz); transition: color 200ms; }
.b-nav a:hover { color: var(--rp-rot-akzent); }
.b-nav .b-nav-cta { background: var(--rp-rot-akzent); color: #fff; padding: 11px 22px; border-radius: 999px; font-weight: 700; letter-spacing: 0.08em; transition: background 200ms, transform 200ms; }
.b-nav .b-nav-cta:hover { background: #c40b1a; color: #fff; transform: translateY(-1px); }
@media (max-width: 900px){ .b-nav a:not(.b-nav-cta){ display:none; } .b-header__inner{ padding: 0 24px; } }

/* ── Foto-/Bild-Platzhalter (warm, hell · reines CSS) ───────── */
.s-ph-photo { --st-a: #efe7d6; --st-b: #e7ddc8; position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--st-a) 0 18px, var(--st-b) 18px 36px);
  border: 1px solid rgba(109,23,35,0.12); }
.s-ph-photo__note { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(80%, 420px); text-align: center; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: #8a6b54; margin: 0; }
.s-ph-photo__tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-rot-anker); background: rgba(255,255,255,0.78); border: 1px solid rgba(109,23,35,0.18); padding: 7px 12px; border-radius: 999px; }
.s-ph-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   1 · HERO · HELLES BEIGE · organischer Blob-Foto-Crop, sehr weich.
   Bewusst KEIN Kreis (Abgrenzung Kickboxen-Kinder) — Blob + sanft
   schwebende Cremepunkte für die verspielteste Anmutung der Website.
   ============================================================ */
.ff-hero { position: relative; background: var(--ff-cream); padding: clamp(132px, 17vh, 188px) 0 clamp(76px, 9vw, 120px); overflow: hidden; }
.ff-hero::before { content: ""; position: absolute; top: -22%; right: -10%; width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(220,13,29,0.05), transparent 70%); pointer-events: none; }
.ff-hero__inner { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.ff-hero__text { max-width: 660px; }
.ff-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5.2vw, 70px); line-height: 1.03; letter-spacing: -0.03em; color: var(--ff-rot-anker); margin: 0 0 26px; text-wrap: balance; }
.ff-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.ff-hero__sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; color: var(--rp-tiefschwarz); margin: 0 0 36px; max-width: 58ch; }
.ff-hero__cta { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; }
.ff-arrowlink { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-rot-anker); display: inline-flex; align-items: center; gap: 8px; transition: gap 220ms var(--ease-standard); }
.ff-arrowlink::after { content: "↓"; transition: transform 220ms var(--ease-standard); }
.ff-arrowlink:hover { gap: 12px; }
.ff-hero__micro { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-grau-muted); }
.ff-hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--rp-grau-7012); }
.ff-hero__trust b { color: var(--ff-rot-anker); }
.ff-hero__trust .star { color: var(--rp-rot-akzent); }
.ff-hero__trust i { color: var(--rp-grau-muted); font-style: normal; }

/* Hero-Foto · organischer Blob (Stimmung 1, am weichsten) */
.ff-hero__media { position: relative; }
.ff-hero__photo { position: relative; aspect-ratio: 1/1.04; border-radius: 58% 42% 47% 53% / 52% 56% 44% 48%; overflow: hidden; box-shadow: 0 54px 120px -54px rgba(109,23,35,0.42); }
.ff-hero__media::after { content: ""; position: absolute; inset: -12px; border-radius: 58% 42% 47% 53% / 52% 56% 44% 48%; border: 1px dashed rgba(109,23,35,0.20); pointer-events: none; }
@media (max-width: 900px){
  .ff-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .ff-hero__media { max-width: 460px; }
  .ff-hero__photo { aspect-ratio: 4/3.4; border-radius: var(--ff-r); }
  .ff-hero__media::after { border-radius: var(--ff-r); inset: -10px; }
}

/* ============================================================
   2 · WAS IST FRÜHFÖRDERUNG? · Weiß · Editorial + Foto
   ============================================================ */
.ff-def { background: var(--rp-white); padding: clamp(88px, 11vw, 144px) 0; }
.ff-def__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.ff-def__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(31px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ff-rot-anker); margin: 0 0 24px; max-width: 18ch; text-wrap: balance; }
.ff-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.ff-def__lede { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2vw, 26px); line-height: 1.5; color: var(--rp-tiefschwarz); margin: 0 0 30px; max-width: 54ch; }
.ff-def__body p { font-size: 17px; line-height: 1.76; color: var(--rp-grau-7012); margin: 0 0 22px; max-width: 60ch; }
.ff-def__body p:last-child { margin-bottom: 0; }
.ff-def__body strong { color: var(--ff-rot-anker); font-weight: 700; }
/* „Mehr lesen" · sekundärer Absatz nur mobil einklappbar (Pattern: Inline-Collapse) */
.ff-morelink { display: none; margin-top: 2px; background: none; border: 0; padding: 10px 0 6px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-rot-anker); border-bottom: 1px solid var(--ff-rot-anker); }
@media (max-width: 720px){
  .ff-def__more.is-collapsible { display: none; }
  .ff-def__more.is-collapsible.is-open { display: block; }
  .ff-morelink:not([hidden]) { display: inline-block; }
}
.ff-def__media { position: relative; border-radius: var(--ff-r-card); overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 44px 96px -54px rgba(109,23,35,0.4); position: sticky; top: 108px; }
@media (max-width: 900px){ .ff-def__grid{ grid-template-columns: 1fr; gap: 36px; } .ff-def__media{ position: relative; top: 0; aspect-ratio: 16/11; order: -1; } }

/* ============================================================
   3 · FÜR WEN? · ANKER 1 · Dunkelrot · DREI VERSETZTE BILD-TEXT-
   BLÖCKE (Abgrenzung Kickboxen-Kinder: dort drei Karten nebeneinander)
   ============================================================ */
.ff-fit { background: var(--ff-rot-anker); color: #fff; padding: clamp(92px, 12vw, 156px) 0; position: relative; overflow: hidden; }
.ff-fit::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 86% 2%, rgba(220,13,29,0.22), transparent 56%); pointer-events: none; }
.ff-fit__inner { position: relative; z-index: 1; }
.ff-fit__head { max-width: 860px; margin-bottom: clamp(48px, 6vw, 76px); }
.ff-fit__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.06; letter-spacing: -0.03em; color: #fff; margin: 0 0 22px; max-width: 18ch; text-wrap: balance; }
.ff-fit__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ff-fit__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.62; color: rgba(255,255,255,0.9); margin: 0; max-width: 62ch; }

.ff-blocks { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.ff-block { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.ff-block:nth-child(odd)  { margin-right: clamp(0px, 7vw, 120px); }
.ff-block:nth-child(even) { margin-left: clamp(0px, 7vw, 120px); }
.ff-block:nth-child(even) .ff-block__media { order: 2; }
.ff-block__media { position: relative; aspect-ratio: 5/4; border-radius: var(--ff-r-card); overflow: hidden; box-shadow: 0 44px 90px -52px rgba(0,0,0,0.55); }
.ff-block__media .s-ph-photo { --st-a:#e7ddc8; --st-b:#ddd0b6; position:absolute; inset:0; }
.ff-block__body { min-width: 0; }
.ff-block__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--rp-beige); margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.ff-block__num::before { content:""; width: 30px; height: 1px; background: var(--rp-beige); }
.ff-block__lead { font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 2.3vw, 31px); line-height: 1.16; letter-spacing: -0.02em; color: #fff; margin: 0 0 16px; text-wrap: balance; }
.ff-block__p { font-size: 16.5px; line-height: 1.68; color: rgba(255,255,255,0.86); margin: 0; max-width: 52ch; }
@media (max-width: 820px){
  .ff-block { grid-template-columns: 1fr; gap: 24px; margin: 0 !important; }
  .ff-block:nth-child(even) .ff-block__media { order: -1; }
  .ff-block__media { aspect-ratio: 16/10; }
}

/* ============================================================
   4 · WAS ELTERN SAGEN · helles Beige · Pull-Quote
   Nur echt veröffentlichen — schriftliche Freigabe nach KUG §22.
   ============================================================ */
.ff-voice { background: var(--ff-cream); padding: clamp(88px, 12vw, 150px) 0; }
.ff-voice__inner { max-width: 1040px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.ff-voice__media { width: clamp(180px, 22vw, 280px); aspect-ratio: 1/1; border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%; overflow: hidden; flex-shrink: 0; box-shadow: 0 44px 90px -54px rgba(109,23,35,0.4); }
.ff-voice__body { min-width: 0; }
.ff-voice__mark { font-family: var(--font-serif); font-size: 90px; line-height: 0.5; color: rgba(109,23,35,0.22); display: block; margin: 0 0 6px; }
.ff-voice__q { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(21px, 2.8vw, 38px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ff-rot-anker); margin: 0 0 28px; text-wrap: balance; }
.ff-voice__q .s-ph { color: var(--rp-rot-akzent); font-style: normal; font-family: var(--font-mono); font-size: 0.5em; }
.ff-voice__attr { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-grau-7012); }
.ff-voice__attr::before { content: ""; width: 44px; height: 1px; background: var(--ff-rot-anker); flex-shrink: 0; }
.ff-voice__attr .s-ph { color: var(--rp-rot-akzent); }
.ff-voice__note { margin: 26px 0 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; letter-spacing: 0.06em; color: var(--rp-grau-muted); max-width: 80ch; }
@media (max-width: 760px){ .ff-voice__inner{ grid-template-columns: 1fr; gap: 28px; } .ff-voice__media{ width: clamp(140px, 40vw, 200px); } }

/* ============================================================
   5 · WAS PASSIERT IN DEN ERSTEN WOCHEN? · Weiß
   Vier Bausteine (2×2 weiche Cremekarten) + markante
   ALTERSSTUFEN-REISE (geschwungener Weg, Animation in -v3).
   ============================================================ */
.ff-grow { background: var(--rp-white); padding: clamp(88px, 11vw, 144px) 0; }
.ff-grow__head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 64px); }
.ff-grow__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(31px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ff-rot-anker); margin: 0 0 22px; max-width: 18ch; text-wrap: balance; }
.ff-grow__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.ff-grow__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.66; color: var(--rp-tiefschwarz); margin: 0; max-width: 62ch; }

.ff-bausteine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ff-baustein { background: var(--ff-cream); border: 1px solid rgba(109,23,35,0.1); border-radius: var(--ff-r-card); padding: clamp(28px, 2.8vw, 40px); display: flex; flex-direction: column; }
.ff-baustein__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rp-rot-akzent); display: block; margin-bottom: 16px; }
.ff-baustein__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.16; letter-spacing: -0.015em; color: var(--ff-rot-anker); margin: 0 0 12px; text-wrap: balance; }
.ff-baustein__p { font-size: 16px; line-height: 1.68; color: var(--rp-grau-7012); margin: 0; }
@media (max-width: 720px){ .ff-bausteine{ grid-template-columns: 1fr; } }

/* ── ALTERSSTUFEN-REISE · geschwungener Weg mit vier Stationen ──
   Botschaft: „ein Zuhause, in dem dein Kind über Jahre mitwächst."
   Ohne JS bleibt der Weg vollständig gezeichnet & lesbar. */
.ff-journey { margin-top: clamp(56px, 7vw, 92px); }
.ff-journey__intro { max-width: 64ch; margin: 0 0 clamp(36px, 5vw, 60px); }
.ff-journey__intro p { font-size: 17px; line-height: 1.76; color: var(--rp-grau-7012); margin: 0; }
.ff-journey__intro strong { color: var(--ff-rot-anker); font-weight: 700; }

.ff-journey__map { position: relative; }
.ff-journey__track { position: relative; aspect-ratio: 1200 / 360; width: 100%; }
.ff-journey__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* zwei Pfade: ein verspielter, gepunkteter Leitpfad (statisch) und der
   solide Weg darüber, der sich beim Scrollen zeichnet (-v3). */
.ff-path { fill: none; stroke-linecap: round; }
.ff-path-track { stroke: rgba(220,13,29,0.28); stroke-width: 3; stroke-dasharray: 2 16; }
.ff-path-draw { stroke: var(--rp-rot-akzent); stroke-width: 4; }
/* Station · der Punkt sitzt exakt auf dem Wegpunkt; Beschriftung darüber/darunter */
.ff-station { position: absolute; transform: translate(-50%, -50%); }
.ff-station__dot { width: clamp(54px, 5vw, 72px); height: clamp(54px, 5vw, 72px); border-radius: 50%; background: var(--rp-white); border: 4px solid var(--rp-rot-akzent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2vw, 28px); color: var(--ff-rot-anker); box-shadow: 0 16px 36px -18px rgba(220,13,29,0.55); }
.ff-station--soon .ff-station__dot { border-style: dashed; color: var(--rp-grau-muted); border-color: rgba(109,23,35,0.4); font-size: clamp(22px, 2.2vw, 30px); }
.ff-station__cap { position: absolute; left: 50%; transform: translateX(-50%); width: max-content; max-width: clamp(140px, 16vw, 210px); text-align: center; }
.ff-station--below .ff-station__cap { top: calc(100% + 14px); }
.ff-station--above .ff-station__cap { bottom: calc(100% + 14px); }
.ff-station__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -0.01em; color: var(--ff-rot-anker); margin: 0 0 4px; }
.ff-station__age { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-grau-7012); margin: 0; }
.ff-station--soon .ff-station__name { color: var(--rp-grau-muted); }

/* Mobile · vertikaler, gestufter Weg statt geschwungener Kurve */
.ff-journey__steps { display: none; }
@media (max-width: 820px){
  .ff-journey__track { display: none; }
  .ff-journey__steps { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
  .ff-jstep { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding-bottom: 30px; }
  .ff-jstep:last-child { padding-bottom: 0; }
  .ff-jstep__rail { position: relative; display: flex; justify-content: center; }
  .ff-jstep__rail::before { content: ""; position: absolute; top: 56px; bottom: -30px; left: 50%; transform: translateX(-50%); width: 3px; background: var(--rp-rot-akzent); border-radius: 3px; opacity: 0.5; }
  .ff-jstep:last-child .ff-jstep__rail::before { display: none; }
  .ff-jstep__dot { width: 52px; height: 52px; border-radius: 50%; background: var(--rp-white); border: 4px solid var(--rp-rot-akzent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--ff-rot-anker); }
  .ff-jstep--soon .ff-jstep__dot { border-style: dashed; color: var(--rp-grau-muted); border-color: rgba(109,23,35,0.4); }
  .ff-jstep__name { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ff-rot-anker); margin: 8px 0 4px; }
  .ff-jstep__age { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rp-grau-7012); margin: 0; }
}

.ff-grow__close { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.2vw, 28px); line-height: 1.42; color: var(--ff-rot-anker); margin: clamp(48px, 6vw, 76px) 0 0; max-width: 34ch; text-wrap: balance; }
.ff-grow__cta { margin-top: 32px; }
.ff-grow__cta-note { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rp-grau-muted); }

/* ============================================================
   6 · DAS UNTERSCHEIDET UNS · ANKER 2 · Dunkelrot · Prosa + Count-up
   ============================================================ */
.ff-diff { background: var(--ff-rot-anker); color: #fff; padding: clamp(92px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.ff-diff::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 14% 8%, rgba(220,13,29,0.24), transparent 56%); pointer-events: none; }
.ff-diff__inner { position: relative; z-index: 1; }
.ff-diff__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 60px); }
.ff-diff__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(31px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.03em; color: #fff; margin: 0 0 22px; max-width: 17ch; text-wrap: balance; }
.ff-diff__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ff-diff__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.62; color: rgba(255,255,255,0.9); margin: 0; max-width: 64ch; }
.ff-diff__list { list-style: none; margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 56px; }
.ff-diff__item { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.16); }
.ff-diff__idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--rp-beige); padding-top: 6px; }
.ff-diff__it-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; }
.ff-diff__it-p { font-size: 15.5px; line-height: 1.64; color: rgba(255,255,255,0.82); margin: 0; }

.ff-stats { margin-top: clamp(48px, 6vw, 72px); padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.2); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.ff-stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 4.4vw, 64px); line-height: 0.92; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.ff-stat__n .pre { font-family: var(--font-mono); font-weight: 500; font-size: 0.3em; letter-spacing: 0.06em; vertical-align: 0.5em; margin-right: 0.2em; color: var(--rp-beige); text-transform: uppercase; }
.ff-stat__n .unit { font-size: 0.42em; font-weight: 800; color: var(--rp-beige); margin-left: 0.12em; }
.ff-stat__l { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.66); line-height: 1.5; }
@media (max-width: 900px){ .ff-diff__list{ grid-template-columns: 1fr; gap: 0; } .ff-stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } }

/* Block „Kleine Schritte für große Übergänge“ (Übergabe 07.10.) ·
   steht neben den verbliebenen zwei Kennzahlen, ersetzt die
   frühere Vierer-Reihe. Nur diese Seite lädt die Datei. */
.ff-uebergang { margin-top: clamp(48px, 6vw, 72px); padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.2); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ff-uebergang__text { background: rgba(255,255,255,0.06); border: 1px solid rgba(212,201,181,0.22); border-radius: 22px; padding: clamp(26px, 3vw, 40px); }
.ff-uebergang__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.14; letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; text-wrap: balance; }
.ff-uebergang__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ff-uebergang__p { font-size: clamp(15.5px, 1.3vw, 17px); line-height: 1.68; color: rgba(255,255,255,0.88); margin: 0; max-width: 62ch; }
.ff-uebergang .ff-stats--zwei { margin: 0; padding: 0; border: 0; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 900px){
  .ff-uebergang { grid-template-columns: 1fr; gap: 40px; }
  .ff-uebergang .ff-stats--zwei { gap: 20px; }
}

/* ============================================================
   7 · FAQ (b-faq / b-q) · Hellgrau-Variante · BLUF-Akkordeon
   ============================================================ */
.b-faq { background: var(--rp-tiefschwarz); color: #fff; padding: clamp(88px, 11vw, 144px) 0; }
.b-faq__head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 52px; }
.b-faq__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; max-width: 16ch; }
.b-faq__sub { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.7); max-width: 46ch; margin: 0; }
.b-faq__list { border-top: 1px solid rgba(255,255,255,0.14); }
.b-q { border-bottom: 1px solid rgba(255,255,255,0.14); }
.b-q__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 25px); letter-spacing: -0.01em; color: #fff; background: none; border: 0; cursor: pointer; }
.b-q__btn h3 { font: inherit; margin: 0; }
.b-q__plus { flex-shrink: 0; width: 32px; height: 32px; position: relative; }
.b-q__plus::before, .b-q__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--rp-rot-akzent); transition: transform 250ms; }
.b-q__plus::before { width: 22px; height: 2px; transform: translate(-50%, -50%); }
.b-q__plus::after { width: 2px; height: 22px; transform: translate(-50%, -50%); }
.b-q.is-open .b-q__plus::after { transform: translate(-50%, -50%) scaleY(0); }
.b-q__a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-standard); }
.b-q__a-inner { padding: 0 64px 28px 0; font-size: 16px; line-height: 1.68; color: rgba(255,255,255,0.78); max-width: 80ch; }
.b-q.is-open .b-q__a { max-height: 720px; }
.b-faq__foot { margin-top: 40px; }
@media (max-width: 900px){ .b-faq__head{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; } .b-q__a-inner{ padding-right: 0; } }

/* helle FAQ-Variante · warmes Creme statt kühlem Grau (Stimmung 1) */
.b-faq--light { background: var(--ff-cream-2); color: var(--rp-grau-7012); }
.b-faq--light .b-faq__h { color: var(--ff-rot-anker); }
.b-faq--light .b-faq__sub { color: var(--rp-grau-7012); }
.b-faq--light .b-faq__list { border-top-color: rgba(109,23,35,0.14); }
.b-faq--light .b-q { border-bottom-color: rgba(109,23,35,0.14); }
.b-faq--light .b-q__btn { color: var(--rp-tiefschwarz); }
.b-faq--light .b-q__a-inner { color: var(--rp-grau-7012); }
.b-faq--light .b-q__a-inner .s-ph { color: var(--rp-rot-akzent); }
.b-faq--light .b-q__a-inner a { color: var(--ff-rot-anker); font-weight: 700; border-bottom: 1px solid var(--ff-rot-anker); }

/* ============================================================
   8 · STANDORTE · Weiß · sieben Kacheln (ff-loc)
   ============================================================ */
.ff-locations { background: var(--rp-white); padding: clamp(88px, 11vw, 144px) 0; }
.ff-locations__head { max-width: 880px; margin-bottom: clamp(40px, 5vw, 56px); }
.ff-locations__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(31px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ff-rot-anker); margin: 0 0 22px; max-width: 16ch; text-wrap: balance; }
.ff-locations__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.ff-locations__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.64; color: var(--rp-tiefschwarz); margin: 0; max-width: 66ch; }
.ff-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ff-loc { background: var(--ff-cream); border: 1px solid rgba(109,23,35,0.1); border-radius: var(--ff-r-card); padding: 28px 28px 24px; display: flex; flex-direction: column; min-height: 204px; }
.ff-loc__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--rp-rot-akzent); }
.ff-loc__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.015em; color: var(--ff-rot-anker); margin: 14px 0 6px; line-height: 1.1; }
.ff-loc__bezirk { font-size: 14px; line-height: 1.5; color: var(--rp-grau-7012); margin: 0; }
.ff-loc__meta { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--rp-grau-muted); }
.ff-loc__meta .s-ph { color: var(--rp-rot-akzent); }
.ff-loc__arrow { margin-top: auto; align-self: flex-end; width: 46px; height: 46px; border: 1px solid rgba(109,23,35,0.16); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ff-rot-anker); transition: background 220ms, border-color 220ms, color 220ms, transform 220ms; }
.ff-loc:hover .ff-loc__arrow { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); color: #fff; transform: translateY(-2px); }
@media (max-width: 860px){ .ff-loc-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){
  .ff-loc-grid{ grid-template-columns: 1fr; gap: 12px; }
  .ff-loc{ min-height: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 14px; padding: 18px 20px; border-radius: 20px; }
  .ff-loc__num{ display: none; }
  .ff-loc__name{ margin: 0; grid-column: 1; }
  .ff-loc__bezirk{ margin: 2px 0 0; grid-column: 1; }
  .ff-loc__arrow{ grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; }
}

/* ============================================================
   9 · FINALER CTA · ANKER 3 · Tiefschwarz · Kante zu Kante
   ============================================================ */
.ff-final { background: var(--rp-tiefschwarz); color: #fff; padding: clamp(112px, 14vw, 176px) 24px; position: relative; overflow: hidden; text-align: center; }
.ff-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(109,23,35,0.55), transparent 62%); pointer-events: none; }
.ff-final__inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.ff-final__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.035em; margin: 26px 0; text-wrap: balance; }
.ff-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.ff-final__sub { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 auto 44px; max-width: 60ch; }
.ff-final__row { display: flex; justify-content: center; }
.ff-final__foot { margin-top: 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.ff-final__price { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.42); }

/* ============================================================
   FOOTER (b-foot) · systemweit
   ============================================================ */
.b-foot { background: #0a0808; color: #888; padding: 80px 0 40px; font-size: 12px; }
.b-foot__top { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 48px; padding-bottom: 64px; border-bottom: 1px solid #1f1818; }
.b-foot__brand img { height: 38px; filter: brightness(0) invert(1); opacity: 0.9; margin-bottom: 24px; }
.b-foot__brand p { color: #777; font-size: 13px; line-height: 1.55; max-width: 32ch; margin: 0; }
.b-foot__col h4 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-beige); margin: 0 0 18px; }
.b-foot__col ul { list-style: none; margin: 0; padding: 0; }
.b-foot__col li { line-height: 2; }
.b-foot__col a { color: #888; transition: color 200ms; }
.b-foot__col a:hover { color: #fff; }
.b-foot__bot { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: #555; }
.b-foot__bot a { color: #777; }
.b-foot__bot a:hover { color: #fff; }
@media (max-width: 900px){ .b-foot__top{ grid-template-columns: 1fr 1fr; gap: 32px; } .b-foot__bot{ flex-direction: column; gap: 12px; text-align: center; } }

/* ============================================================
   STICKY-CTA · mobil unten vollbreit, Desktop im Header
   ============================================================ */
@media (min-width: 721px){ body.ff .sticky-cta { display: none !important; } }