/* ============================================================
   RANDORI-PRO · Sportartenseite „Kickboxen für Kinder"
   Template A „Eltern-Überzeuger" · Stimmung 1 „Warm & Hell"
   — freundlich, hell, weiche, runde Formsprache. KEIN dunkler
   Vollbild-Hero. Eltern-Du durchgehend („dein Kind").

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

   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 Stimmen (helles Beige)             · HELL
   5 Was lernt dein Kind? (Weiß)        · HELL  ← Wachstums-Animation
   6 Das unterscheidet uns (ANKER 2)    · DUNKEL
   7 FAQ (Hellgrau #f3f3f3)             · HELL
   8 Standorte (Weiß)                   · HELL
   9 Finaler CTA (ANKER 3, Schwarz)     · DUNKEL
   ============================================================ */

:root {
  --kk-rot-anker:  var(--rp-rot-anker);   /* #6D1723 */
  --kk-cream:      #faf6ee;                /* helles, warmes Beige (Hero/§4) */
  --kk-grau:       #f3f3f3;                /* Hellgrau (FAQ) */
  --kk-r:          24px;                   /* großzügiger Radius (oberes Ende) */
  --kk-r-card:     22px 22px 36px 36px;    /* Kinder-Karten · oben kleiner, unten stärker gerundet (identisch mit Frühförderung) */
  --kk-r-sm:       16px;
}

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

/* Anker-Ziele laufen nicht unter den fixed Glas-Header */
#was-ist, #fuer-wen, #lernen, #unterschied, #faq, #standorte, #cta { scroll-margin-top: 96px; }

/* Container-Breite 1480px wie auf den übrigen Sportartenseiten
   (kickboxen.css, karate.css, judo.css, grappling.css …). Vorher 1320px
   — dadurch stand der Inhalt auf großen Monitoren unnötig weit rechts.
   Hero (.kk-hero__inner) ist auf denselben Wert gesetzt, damit Hero und
   Folgesektionen exakt dieselbe linke Kante haben. */
.b-wrap { max-width: 1480px; 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(--kk-rot-anker); }
.b-kicker--anker::before { background: var(--kk-rot-anker); }
.b-kicker--beige { color: var(--rp-beige); }
.b-kicker--beige::before { background: var(--rp-beige); }
.b-kicker--center { justify-content: center; }

/* ── Buttons (weichere, rundere Form) ──────────────────────── */
.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(--kk-rot-anker); color: var(--kk-rot-anker); }
.b-btn--ghost:hover { background: var(--kk-rot-anker); color: #fff; transform: translateY(-2px); }

/* ── 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(--kk-rot-anker); border-color: var(--kk-rot-anker); }

/* Platzhalter-Marker (sichtbar, kontrastsicher) ───────────── */
.kk .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; } }

/* ============================================================
   1 · HERO · HELLES BEIGE · Foto-dominant, freundlich, KEIN
   dunkler Vollbild-Hero. Text links, großer Foto-Platzhalter
   rechts (weicher, kreisnaher Crop).
   ============================================================ */
.kk-hero { position: relative; background: var(--kk-cream); padding: clamp(132px, 17vh, 188px) 0 clamp(72px, 9vw, 116px); overflow: hidden; }
.kk-hero::before { content: ""; position: absolute; top: -18%; right: -8%; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(220,13,29,0.06), transparent 70%); pointer-events: none; }
.kk-hero__inner { position: relative; z-index: 2; max-width: 1480px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.kk-hero__text { max-width: 640px; }
.kk-hero__h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5.2vw, 70px); line-height: 1.04; letter-spacing: -0.03em; color: var(--kk-rot-anker); margin: 0 0 26px; text-wrap: balance; }
.kk-hero__h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.kk-hero__sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--rp-tiefschwarz); margin: 0 0 28px; max-width: 56ch; }
.kk-hero__cta { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; }
.kk-arrowlink { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-rot-anker); display: inline-flex; align-items: center; gap: 8px; transition: gap 220ms var(--ease-standard); }
.kk-arrowlink::after { content: "↓"; transition: transform 220ms var(--ease-standard); }
.kk-arrowlink:hover { gap: 12px; }
.kk-hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--rp-grau-7012); }
.kk-hero__trust span { white-space: nowrap; }
.kk-hero__trust b { color: var(--kk-rot-anker); }
.kk-hero__trust .star { color: var(--rp-rot-akzent); }
.kk-hero__trust i { color: var(--rp-grau-muted); font-style: normal; }

/* ── Full-Bleed-Foto-Hero (Variante --photo) ─────────────────
   Bild füllt den gesamten Hero; Text links auf dunklem Scrim. */
/* Höhe: kein harter Pixel-Deckel mehr bei 700px — der griff auf jedem
   Monitor über 900px Höhe und ließ die Hero flach abschneiden.
   Volle Viewport-Höhe statt der 92svh aus dem Auftrag: bei 92svh blieb
   auf 2560x1440 ein 115px hoher weißer Streifen der Folgesektion
   stehen, der genau wie der beanstandete flache Abschnitt aussah.
   svh statt vh, damit mobile Browserleisten nicht dazwischenfunken;
   vh davor als Fallback für ältere Engines. Ist der Inhalt höher als
   der Viewport (Handy, flache Fenster), wächst die Hero mit — deshalb
   min-height, nicht height. */
.kk-hero--photo { background: var(--rp-tiefschwarz); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: clamp(140px, 18vh, 200px) 0 clamp(64px, 8vw, 104px); }
.kk-hero--photo .kk-hero__inner { width: 100%; }
.kk-hero--photo::before { display: none; }
.kk-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; z-index: 0; }
/* Scrim nachgezogen (04.08.2026): Die Textspalte liegt auf großen
   Monitoren bei 22–60% der Breite; dort fiel die alte Kurve schon auf
   0,28 ab. Gemessen (glyphgenau, WCAG) fielen Kicker und das rote
   Kursiv im H1 dadurch unter AA. Die Mittelstopps sind angehoben, der
   rechte Rand bleibt fast offen, damit das Foto frei bleibt. */
.kk-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20,10,12,0.88) 0%, rgba(20,10,12,0.80) 40%, rgba(20,10,12,0.52) 64%, rgba(20,10,12,0.12) 100%), linear-gradient(180deg, rgba(20,10,12,0.34) 0%, transparent 30%, rgba(20,10,12,0.42) 100%); }
/* Echte Hero-Fotos (Oktober 2026) sind hochkant; die Kinder stehen in der
   Bildmitte. Vollflächig lagen sie unter Text und Schleier. Ab 900px sitzt
   das Foto deshalb als rechte Bildfläche ab 44 % neben dem Text, der
   Schleier blendet die linke Kante weich in den dunklen Grund ein.
   Gilt für Kickboxen Kinder und MMA Kinder (beide nutzen diese Datei). */
@media (min-width: 900px){
  .kk-hero--photo .kk-hero__bg { left: 44%; width: 56%; }
  .kk-hero--photo .kk-hero__scrim { background:
      linear-gradient(90deg, rgba(20,10,12,1) 0%, rgba(20,10,12,1) 44%, rgba(20,10,12,0.5) 48%, rgba(20,10,12,0.15) 56%, rgba(20,10,12,0) 68%),
      linear-gradient(180deg, rgba(20,10,12,0.34) 0%, transparent 30%, rgba(20,10,12,0.42) 100%); }
}
/* Tablet: Die Überschrift läuft hier bis gut 60 % der Breite → Bildfläche ab 56 %. */
@media (min-width: 900px) and (max-width: 1100px){
  .kk-hero--photo .kk-hero__bg { left: 56%; width: 44%; }
  .kk-hero--photo .kk-hero__scrim { background:
      linear-gradient(90deg, rgba(20,10,12,1) 0%, rgba(20,10,12,1) 56%, rgba(20,10,12,0.5) 61%, rgba(20,10,12,0.15) 68%, rgba(20,10,12,0) 78%),
      linear-gradient(180deg, rgba(20,10,12,0.34) 0%, transparent 30%, rgba(20,10,12,0.42) 100%); }
}
.kk-hero--photo .kk-hero__inner { display: block; }
.kk-hero--photo .kk-hero__text { max-width: 620px; margin-right: auto; text-align: left; }
.kk-hero--photo .kk-hero__sub { max-width: 46ch; }
.kk-hero--photo .kk-hero__h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.kk-hero--photo .kk-hero__h1 em { color: #ff5a4d; }
.kk-hero--photo .b-kicker--anker { color: #E2DAC9; }
.kk-hero--photo .kk-hero__sub { color: rgba(255,255,255,0.9); text-shadow: 0 1px 14px rgba(0,0,0,0.3); }
.kk-hero--photo .kk-arrowlink { color: #fff; }
.kk-hero--photo .kk-hero__trust { color: rgba(255,255,255,0.82); }
.kk-hero--photo .kk-hero__trust b { color: #fff; }
/* Trenner-Punkte der Trust-Zeile: 0,4 Deckkraft ergab über dem Foto nur
   3,8:1 und blieb damit als einziges Element der Zeile unter WCAG AA
   (4,5:1 bei 12px). 0,62 hebt sie über die Schwelle, ohne dass die
   Punkte gegenüber den Fakten in den Vordergrund treten. */
.kk-hero--photo .kk-hero__trust i { color: rgba(255,255,255,0.62); }
@media (max-width: 760px){
  .kk-hero__bg { object-position: 72% 38%; }
  /* Mobil liegt der Text mitten auf dem Foto, ohne seitliche Abdunklung.
     Mit 0,35 im Kopfbereich kamen Fließtext (2,9:1) und Kicker (2,8:1)
     deutlich unter AA. Jetzt durchgehend kräftig, unten am kräftigsten. */
  .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.72) 0%, rgba(20,10,12,0.78) 45%, rgba(20,10,12,0.94) 100%); }
  /* Auf dem Handy zählt jede Zeile: knapperes Kopfpolster und die
     kleinere H1-Stufe, damit Kicker bis Trust-Zeile ohne Scrollen
     im Bild bleiben. Die Desktop-Werte oben bleiben unberührt. */
  .kk-hero--photo { padding: clamp(104px, 13vh, 132px) 0 clamp(48px, 8vw, 72px); }
  .kk-hero__h1 { font-size: 34px; margin-bottom: 22px; }
}
/* Kickboxen Kinder, Handy und schmales Tablet (Oktober 2026): Das
   Hochkant-Foto füllt hier die Höhe, verschieben lässt es sich nicht.
   Gesicht und Tritt lagen so hinter Kicker und Überschrift. Das Foto
   wird deshalb etwas größer gezogen und unten angelegt, damit das
   Gesicht der Tretenden über dem Text steht. Der Schleier bleibt oben
   offen und dunkelt erst kurz vor dem Kicker kräftig ab. Nur im
   Hochformat; quer gehaltene Handys behalten den gleichmäßigen Schleier.
   MMA Kinder nutzt diese Datei auch, hat aber eigene Werte (mma-kinder.css). */
@media (max-width: 768px) and (orientation: portrait){
  .kk:not(.mk) .kk-hero__bg { top: -30%; height: 130%; }
  .kk:not(.mk) .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 10%, rgba(20,10,12,0.2) 18%, rgba(20,10,12,0.8) 23%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
}
/* Kurze Handys (bis 760px Höhe): Der Kicker steht hier schon bei gut
   17 % der Höhe, der Schleier dunkelt deshalb früher ab. */
@media (max-width: 768px) and (max-height: 760px) and (orientation: portrait){
  .kk:not(.mk) .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 6%, rgba(20,10,12,0.2) 10%, rgba(20,10,12,0.8) 16%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
}
@media (min-width: 769px) and (max-width: 899px) and (orientation: portrait){
  .kk:not(.mk) .kk-hero__bg { top: -24%; height: 124%; }
  .kk:not(.mk) .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 12%, rgba(20,10,12,0.2) 23%, rgba(20,10,12,0.8) 29%, rgba(20,10,12,0.86) 60%, rgba(20,10,12,0.92) 100%); }
}
/* Tablet im Hochformat (900–1100px, z. B. iPad 1024×1366): Als schmale
   rechte Bildfläche blieb das Foto ein Streifen neben viel dunkler Fläche.
   Hier deshalb vollflächig wie auf dem Handy: Foto etwas größer gezogen
   und unten angelegt, die Gesichter stehen über dem Kicker, der Schleier
   dunkelt erst kurz davor kräftig ab. Gilt für Kickboxen Kinder und
   MMA Kinder; das body-Präfix schlägt die Tablet-Regel in mma-kinder.css.
   Quer gehaltene Tablets behalten die Bildfläche rechts. */
@media (min-width: 900px) and (max-width: 1100px) and (orientation: portrait){
  body.kk .kk-hero--photo .kk-hero__bg { left: 0; width: 100%; top: -20%; height: 120%; }
  body.kk .kk-hero--photo .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 10%, rgba(20,10,12,0.2) 28%, rgba(20,10,12,0.8) 34%, rgba(20,10,12,0.86) 60%, rgba(20,10,12,0.92) 100%); }
}
/* Fast quadratische Hochformat-Fenster: Der Kicker steht hier schon bei
   gut 31 % der Höhe, der Schleier dunkelt deshalb etwas früher ab. */
@media (min-width: 900px) and (max-width: 1100px) and (orientation: portrait) and (min-aspect-ratio: 4/5){
  body.kk .kk-hero--photo .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 9%, rgba(20,10,12,0.2) 24%, rgba(20,10,12,0.8) 29.5%, rgba(20,10,12,0.86) 60%, rgba(20,10,12,0.92) 100%); }
}
/* Aufgeklappter Hero-Text („Mehr lesen", nur bis 768px): Der längere
   Absatz schiebt den mittig stehenden Textblock um 40–65px nach oben.
   Der Kicker rutschte damit in die offene Zone des Schleiers, bei MMA
   Kinder quer über das Gesicht des blonden Jungen und den Rückenaufdruck.
   Im aufgeklappten Zustand dunkelt der Schleier deshalb früher ab. Die
   Grundregel ist auf jedem Hochformat-Handy sicher (Kicker ab 9,9 %);
   wo der Kicker tiefer steht, bleibt oben mehr vom Foto frei. Gilt für
   Kickboxen Kinder und MMA Kinder; die Spezifität schlägt die
   Ruhezustände hier und in mma-kinder.css. Gemessen 360×640 bis 768×1024. */
@media (max-width: 768px) and (orientation: portrait){
  body.kk .kk-hero:has(.rp-mehr.is-open) .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.55) 0%, rgba(20,10,12,0.3) 4%, rgba(20,10,12,0.82) 8.5%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
}
@media (min-width: 375px) and (max-width: 768px) and (min-height: 800px) and (orientation: portrait){
  body.kk:not(.mk) .kk-hero:has(.rp-mehr.is-open) .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 7%, rgba(20,10,12,0.2) 11.5%, rgba(20,10,12,0.8) 15.5%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
}
@media (min-width: 400px) and (max-width: 599px) and (min-height: 880px) and (orientation: portrait){
  body.kk.mk .kk-hero:has(.rp-mehr.is-open) .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 6%, rgba(20,10,12,0.2) 13%, rgba(20,10,12,0.8) 16.5%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
}
@media (min-width: 600px) and (max-width: 768px) and (min-height: 900px) and (orientation: portrait){
  body.kk:not(.mk) .kk-hero:has(.rp-mehr.is-open) .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 10%, rgba(20,10,12,0.2) 19%, rgba(20,10,12,0.8) 24%, rgba(20,10,12,0.86) 55%, rgba(20,10,12,0.92) 100%); }
  body.kk.mk .kk-hero:has(.rp-mehr.is-open) .kk-hero__scrim { background: linear-gradient(180deg, rgba(20,10,12,0.5) 0%, rgba(20,10,12,0.12) 12%, rgba(20,10,12,0.2) 22%, rgba(20,10,12,0.8) 26.5%, rgba(20,10,12,0.86) 60%, rgba(20,10,12,0.92) 100%); }
}

/* Hero-Foto · kreisnaher, weicher Crop (Stimmung 1) */
.kk-hero__media { position: relative; }
.kk-hero__photo { position: relative; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; box-shadow: 0 50px 110px -50px rgba(109,23,35,0.4); }
.kk-hero__media::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(109,23,35,0.22); pointer-events: none; }
@media (max-width: 1080px){
  .kk-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .kk-hero__media { max-width: 440px; }
  .kk-hero__photo { aspect-ratio: 4/3; border-radius: var(--kk-r); }
  .kk-hero__media::after { border-radius: var(--kk-r); }
}

/* ── 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(--kk-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; }

/* ============================================================
   2 · WAS IST KICKBOXEN FÜR KINDER? · Weiß · Editorial + Foto
   ============================================================ */
.kk-def { background: var(--rp-white); padding: clamp(88px, 11vw, 144px) 0; }
.kk-def__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.kk-def__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: var(--kk-rot-anker); margin: 0 0 24px; max-width: 18ch; text-wrap: balance; }
.kk-def__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.kk-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; }
.kk-def__body p { font-size: 17px; line-height: 1.74; color: var(--rp-grau-7012); margin: 0 0 22px; max-width: 60ch; }
.kk-def__body p:last-child { margin-bottom: 0; }
.kk-def__body strong { color: var(--kk-rot-anker); font-weight: 700; }

/* „Mehr lesen" · sekundärer Herkunfts-Absatz (Progressive Disclosure) */
.kk-more { margin-top: 4px; }
.kk-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-rot-anker); }
.kk-more summary::-webkit-details-marker { display: none; }
.kk-more summary::after { content: "+"; font-size: 16px; line-height: 1; transition: transform 220ms var(--ease-standard); }
.kk-more[open] summary::after { transform: rotate(45deg); }
.kk-more[open] summary { margin-bottom: 16px; }
.kk-more p { margin-bottom: 0 !important; }
.kk-def__media { position: relative; border-radius: var(--kk-r-card); overflow: hidden; aspect-ratio: 4/5; box-shadow: 0 40px 90px -52px rgba(109,23,35,0.4); position: sticky; top: 108px; }
.kk-def__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px){ .kk-def__grid{ grid-template-columns: 1fr; gap: 36px; } .kk-def__media{ position: relative; top: 0; aspect-ratio: 16/11; order: -1; } }

/* ============================================================
   3 · FÜR WEN? · ANKER 1 · Dunkelrot · drei Eltern-Karten
   ============================================================ */
.kk-fit { background: var(--kk-rot-anker); color: #fff; padding: clamp(92px, 12vw, 152px) 0; position: relative; overflow: hidden; }
.kk-fit::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 84% 4%, rgba(220,13,29,0.24), transparent 56%); pointer-events: none; }
.kk-fit__inner { position: relative; z-index: 1; }
.kk-fit__head { max-width: 880px; margin-bottom: clamp(40px, 5vw, 60px); }
.kk-fit__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.03em; color: #fff; margin: 0 0 22px; max-width: 18ch; text-wrap: balance; }
.kk-fit__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.kk-fit__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0; max-width: 60ch; }
.kk-fit__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 5vw, 60px); }
.kk-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--kk-r-card); padding: clamp(28px, 2.8vw, 40px); display: flex; flex-direction: column; }
.kk-card__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--rp-beige); margin: 0 0 18px; }
.kk-card__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.18; letter-spacing: -0.01em; color: #fff; margin: 0 0 14px; }
.kk-card__p { font-size: 16px; line-height: 1.62; color: rgba(255,255,255,0.86); margin: 0; }
.kk-fit__close { margin: clamp(40px, 5vw, 60px) 0 0; max-width: 80ch; }
.kk-fit__close p { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.9); margin: 0; }
.kk-fit__close strong { color: var(--rp-beige); font-weight: 700; }
@media (max-width: 1024px){ .kk-fit__cards{ grid-template-columns: 1fr; } }

/* ============================================================
   4 · STIMMEN AUS DER COMMUNITY · helles Beige · Pull-Quote
   ============================================================ */
.kk-voice { background: var(--kk-cream); padding: clamp(88px, 12vw, 150px) 0; }
.kk-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; }
.kk-voice__media { width: clamp(180px, 22vw, 280px); aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 40px 90px -54px rgba(109,23,35,0.4); }
.kk-voice__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kk-voice__attr .star { color: var(--rp-rot-akzent); letter-spacing: 0.04em; }
.kk-voice__body { min-width: 0; }
.kk-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; }
.kk-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(--kk-rot-anker); margin: 0 0 28px; text-wrap: balance; }
.kk-voice__q .s-ph { color: var(--rp-rot-akzent); font-style: normal; font-family: var(--font-mono); font-size: 0.5em; }
.kk-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); }
.kk-voice__attr::before { content: ""; width: 44px; height: 1px; background: var(--kk-rot-anker); flex-shrink: 0; }
.kk-voice__attr .s-ph { color: var(--rp-rot-akzent); }
.kk-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){ .kk-voice__inner{ grid-template-columns: 1fr; gap: 28px; } .kk-voice__media{ width: clamp(140px, 40vw, 200px); } }

/* ============================================================
   5 · WAS LERNT DEIN KIND? · Weiß · AUFSTEIGENDE WACHSTUMS-
   ANIMATION (markante Akzent-Sektion). Statisch ohne JS sichtbar.
   ============================================================ */
.kk-grow { background: var(--rp-white); padding: clamp(88px, 11vw, 144px) 0; }
.kk-grow__head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 76px); }
.kk-grow__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; color: var(--kk-rot-anker); margin: 0 0 22px; max-width: 18ch; text-wrap: balance; }
.kk-grow__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.kk-grow__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: var(--rp-tiefschwarz); margin: 0; max-width: 60ch; }

/* Treppe · vier Stufen in Leserichtung (01 oben → 04 unten),
   Einrückung wächst pro Stufe, Linie wächst nach unten mit */
.kk-stairs { list-style: none; margin: 0 0 clamp(40px, 5vw, 56px); padding: 0; display: flex; flex-direction: column; gap: 0; }
.kk-stair { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: clamp(18px, 2.4vw, 32px); padding-bottom: clamp(34px, 4vw, 52px); margin-left: calc(var(--i, 0) * clamp(0px, 4.5vw, 88px)); }
.kk-stair:last-child { padding-bottom: 0; }
.kk-stair__rail { position: relative; display: flex; justify-content: center; }
/* vertikale Verbindungslinie zur nächsten Stufe (wächst nach unten) */
.kk-stair__seg { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); width: 3px; height: calc(100% + clamp(34px, 4vw, 52px)); background: var(--rp-rot-akzent); transform-origin: 50% 0%; border-radius: 3px; }
.kk-stair:last-child .kk-stair__seg { display: none; }  /* letzte Stufe: keine Linie darunter */
.kk-stair__node { position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 50%; background: var(--rp-white); border: 3px solid var(--rp-rot-akzent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--rp-rot-akzent); box-shadow: 0 10px 28px -14px rgba(220,13,29,0.5); flex-shrink: 0; align-self: flex-start; }
.kk-stair__card { background: var(--kk-cream); border: 1px solid rgba(109,23,35,0.1); border-radius: var(--kk-r-card); padding: clamp(24px, 2.4vw, 34px) clamp(26px, 2.6vw, 38px); }
.kk-stair__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-rot-akzent); display: block; margin-bottom: 12px; }
.kk-stair__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.14; letter-spacing: -0.015em; color: var(--kk-rot-anker); margin: 0 0 12px; text-wrap: balance; }
.kk-stair__p { font-size: 16px; line-height: 1.66; color: var(--rp-grau-7012); margin: 0; max-width: 56ch; }
.kk-stair__p .s-ph { color: var(--rp-rot-akzent); }
.kk-grow__close { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 2.2vw, 28px); line-height: 1.4; color: var(--kk-rot-anker); margin: 0; max-width: 30ch; text-wrap: balance; }
@media (max-width: 720px){
  .kk-stair { grid-template-columns: 44px 1fr; gap: 16px; margin-left: 0 !important; }
  .kk-stair__node { width: 44px; height: 44px; font-size: 16px; }
}

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

.kk-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; }
.kk-stats--lead { margin-top: clamp(36px, 4.5vw, 52px); padding-top: 0; border-top: 0; }
.kk-diff__item--full { grid-column: 1 / -1; max-width: 80ch; }
.kk-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; }
.kk-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; }
.kk-stat__n .unit { font-size: 0.42em; font-weight: 800; color: var(--rp-beige); margin-left: 0.12em; }
.kk-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){ .kk-diff__list{ grid-template-columns: 1fr; gap: 0; } .kk-stats{ grid-template-columns: 1fr 1fr; gap: 40px 20px; } }

/* ============================================================
   7 · FAQ (b-faq / b-q) · Hellgrau-Variante
   ============================================================ */
.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 { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-standard); }
.b-q__a-inner { min-height: 0; overflow: hidden; padding: 0 64px 0 0; font-size: 16px; line-height: 1.66; color: rgba(255,255,255,0.78); max-width: 80ch; }
.b-q.is-open .b-q__a { grid-template-rows: 1fr; }
.b-q.is-open .b-q__a-inner { padding-bottom: 28px; }
.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 (Hellgrau #f3f3f3) */
.b-faq--light { background: var(--kk-grau); color: var(--rp-grau-7012); }
.b-faq--light .b-faq__h { color: var(--kk-rot-anker); }
.b-faq--light .b-faq__sub { color: var(--rp-grau-7012); }
.b-faq--light .b-faq__list { border-top-color: #e0ddd6; }
.b-faq--light .b-q { border-bottom-color: #e0ddd6; }
.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(--kk-rot-anker); font-weight: 700; border-bottom: 1px solid var(--kk-rot-anker); }

/* ============================================================
   8 · STANDORTE · Weiß · sechs Kacheln (kk-loc)
   ============================================================ */
.kk-locations { background: var(--rp-white); padding: clamp(88px, 11vw, 144px) 0; }
.kk-locations__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 56px); }
.kk-locations__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.03em; color: var(--kk-rot-anker); margin: 0 0 22px; max-width: 16ch; text-wrap: balance; }
.kk-locations__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-rot-akzent); }
.kk-locations__lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.62; color: var(--rp-tiefschwarz); margin: 0; max-width: 64ch; }
.kk-loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kk-loc { background: var(--kk-cream); border: 1px solid rgba(109,23,35,0.1); border-radius: var(--kk-r-card); padding: 14px 14px 24px; display: flex; flex-direction: column; min-height: 200px; overflow: hidden; }
.kk-loc__thumb { display: block; aspect-ratio: 16/10; border-radius: calc(var(--kk-r-card) - 6px); overflow: hidden; margin: 0 0 18px; background: rgba(109,23,35,0.06); }
.kk-loc__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-standard); }
.kk-loc:hover .kk-loc__thumb img { transform: scale(1.04); }
.kk-loc__thumb--ph { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(109,23,35,0.05) 0 10px, rgba(109,23,35,0.02) 10px 20px); }
.kk-loc__ph-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-grau-muted); }
.kk-loc__num, .kk-loc__name, .kk-loc__bezirk, .kk-loc__meta { padding-left: 14px; padding-right: 14px; }
.kk-loc__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--rp-rot-akzent); }
.kk-loc__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(23px, 2.2vw, 29px); letter-spacing: -0.015em; color: var(--kk-rot-anker); margin: 14px 0 6px; }
.kk-loc__bezirk { font-size: 14px; line-height: 1.5; color: var(--rp-grau-7012); margin: 0; }
.kk-loc__meta { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--rp-grau-muted); }
.kk-loc__meta .s-ph { color: var(--rp-rot-akzent); }
.kk-loc__arrow { margin-top: auto; align-self: flex-end; margin-right: 14px; 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(--kk-rot-anker); transition: background 220ms, border-color 220ms, color 220ms, transform 220ms; }
.kk-loc:hover .kk-loc__arrow { background: var(--rp-rot-akzent); border-color: var(--rp-rot-akzent); color: #fff; transform: translateY(-2px); }
@media (max-width: 980px){ .kk-loc-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .kk-loc-grid{ grid-template-columns: 1fr; } .kk-loc{ min-height: 0; } }

/* ============================================================
   9 · FINALER CTA · ANKER 3 · Tiefschwarz · Kante zu Kante
   ============================================================ */
.kk-final { background: var(--rp-tiefschwarz); color: #fff; padding: clamp(112px, 14vw, 176px) 24px; position: relative; overflow: hidden; text-align: center; }
.kk-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; }
.kk-final__inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.kk-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; }
.kk-final__h em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--rp-beige); }
.kk-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; }
.kk-final__row { display: flex; justify-content: center; }
.kk-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); }

/* ============================================================
   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 schwebend unten rechts
   Basis-Styles in site.css; JS toggelt .hidden nach dem Hero.
   ============================================================ */