/* ============================================================
   RANDORI-PRO · Frühförderung „High End" — Motion-Layer
   Additiv zu fruehfoerderung.css + bold-v3.css. Aktiv nur unter
   body.bv3.ff. bold-v3.css/js liefern die geteilten Mechaniken
   (Progress, Glas-Header, [data-rv]-Reveals, Button-Glanz);
   hier kommen die seitenspezifischen Stücke dazu: helle Glasleiste,
   gestaffelte, besonders sanfte Hero-Entrance, weiche Hover-Lifts und
   die markante ALTERSSTUFEN-REISE (der geschwungene Weg zeichnet sich,
   Stationen erscheinen nacheinander).
   Alles respektiert prefers-reduced-motion; ohne JS ist die Seite
   vollständig statisch und lesbar.
   ============================================================ */

/* ── Header · helle Glasleiste (überschreibt die dunkle aus bold-v3) ─ */
.bv3.ff .b-header.is-scrolled { background: rgba(250, 247, 238, 0.82); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); padding: 14px 0; box-shadow: 0 1px 0 rgba(26,20,20,0.06), 0 12px 40px -20px rgba(26,20,20,0.18); }
.bv3.ff .b-header.is-scrolled .b-nav a { color: var(--rp-tiefschwarz); }
.bv3.ff .b-header.is-scrolled .b-nav a:hover { color: var(--rp-rot-akzent); }
.bv3.ff .b-header.is-scrolled .b-nav .b-nav-cta { color: #fff; }

/* ── Hero-Foto · Parallax-Ebene ────────────────────────────── */
.bv3.ff .ff-hero__photo .s-ph-photo { will-change: transform; }

/* ── Sanfte Hover-Lifts (immer aktiv, reine Zustandswechsel) ─ */
.bv3.ff .ff-baustein { transition: transform 300ms var(--bv3-ease), box-shadow 300ms var(--ease-standard); }
.bv3.ff .ff-baustein:hover { transform: translateY(-6px); box-shadow: 0 34px 66px -40px rgba(109,23,35,0.4); }
.bv3.ff .ff-loc { transition: transform 300ms var(--bv3-ease), box-shadow 300ms var(--ease-standard); }
.bv3.ff .ff-loc:hover { transform: translateY(-6px); box-shadow: 0 36px 72px -44px rgba(109,23,35,0.45); }
.bv3.ff .ff-def__media img, .bv3.ff .ff-voice__media img, .bv3.ff .ff-block__media img { transition: transform 500ms var(--bv3-ease); }
.bv3.ff .ff-def__media:hover img, .bv3.ff .ff-voice__media:hover img, .bv3.ff .ff-block__media:hover img { transform: scale(1.04); }
.bv3.ff .b-q__btn h3 { transition: color 220ms var(--ease-standard); }
.bv3.ff .b-q__btn:hover h3 { color: var(--rp-rot-akzent); }
.bv3.ff .ff-station__dot { transition: transform 420ms var(--bv3-spring); }
.bv3.ff .ff-station:hover .ff-station__dot { transform: scale(1.06); }

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

  /* Hero-Entrance · gestaffeltes, sehr sanftes Aufsteigen */
  .bv3.ff .ff-hero__text .b-kicker { animation: ff-rise 950ms var(--bv3-ease) 160ms backwards; }
  .bv3.ff .ff-hero__h1 { animation: ff-rise 1050ms var(--bv3-ease) 300ms backwards; }
  .bv3.ff .ff-hero__sub { animation: ff-rise 1050ms var(--bv3-ease) 470ms backwards; }
  .bv3.ff .ff-hero__cta { animation: ff-rise 1050ms var(--bv3-ease) 620ms backwards; }
  .bv3.ff .ff-hero__trust { animation: ff-fade 1050ms var(--ease-standard) 800ms backwards; }
  .bv3.ff .ff-hero__media { animation: ff-media-in 1300ms var(--bv3-ease) 240ms backwards; }

  @keyframes ff-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes ff-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ff-media-in { from { opacity: 0; transform: translateY(34px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

  /* ── AKZENT · ALTERSSTUFEN-REISE ───────────────────────────
     JS misst die Weglänge und setzt .is-drawn auf .ff-journey__map,
     sobald sie sichtbar wird. Der solide Weg zeichnet sich von links
     nach rechts; die Stationen poppen weich nacheinander auf. Ohne JS
     (kein .js-motion) bleibt alles als fertiger Weg sichtbar. */
  .bv3.ff.js-motion .ff-path-draw { stroke-dashoffset: var(--ff-path-len, 0); transition: stroke-dashoffset 2400ms var(--bv3-ease); }
  .bv3.ff.js-motion .ff-journey__map.is-drawn .ff-path-draw { stroke-dashoffset: 0; }

  .bv3.ff.js-motion .ff-station { opacity: 0; transform: translate(-50%, -50%) scale(0.55); transition: opacity 420ms var(--ease-standard), transform 620ms var(--bv3-spring); }
  .bv3.ff.js-motion .ff-journey__map.is-drawn .ff-station { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .bv3.ff.js-motion .ff-journey__map.is-drawn .ff-station:nth-of-type(1) { transition-delay: 360ms, 360ms; }
  .bv3.ff.js-motion .ff-journey__map.is-drawn .ff-station:nth-of-type(2) { transition-delay: 980ms, 980ms; }
  .bv3.ff.js-motion .ff-journey__map.is-drawn .ff-station:nth-of-type(3) { transition-delay: 1600ms, 1600ms; }
  .bv3.ff.js-motion .ff-journey__map.is-drawn .ff-station:nth-of-type(4) { transition-delay: 2120ms, 2120ms; }
}

/* ── HERO · füllendes Foto statt Blob (High End, additiv) ────
   Bild deckt den gesamten Hero; der dekorative Kreis entfällt.
   Ein cremefarbener Verlauf blendet links (Textzone) und am
   unteren Rand ein, damit die Überschrift lesbar bleibt und der
   Übergang zur nächsten Sektion weich ist. */
.bv3.ff .ff-hero--photo { min-height: clamp(600px, 88vh, 840px); display: flex; align-items: center; }
.bv3.ff .ff-hero--photo::before { display: none; } /* dekorativer Kreis entfernt */
.bv3.ff .ff-hero--photo .ff-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bv3.ff .ff-hero--photo .ff-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
.bv3.ff .ff-hero--photo .ff-hero__veil { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--ff-cream) 0%, rgba(250,246,238,0) 26%),
    linear-gradient(98deg, var(--ff-cream) 0%, var(--ff-cream) 27%, rgba(250,246,238,0.86) 43%, rgba(250,246,238,0.32) 60%, rgba(250,246,238,0) 74%); }
.bv3.ff .ff-hero--photo .ff-hero__inner { width: 100%; grid-template-columns: 1fr; }
.bv3.ff .ff-hero--photo .ff-hero__text { max-width: 620px; }

/* Echtes Hero-Foto (Oktober 2026) ist hochkant und zeigt die Kinder mittig.
   Am Desktop sitzt es deshalb als rechte Bildfläche neben dem Text; ein
   Verlauf blendet die linke Kante weich in die Cremefläche ein. So stehen
   die Kinder nicht hinter Überschrift und Schleier. Mobil bleibt das Foto
   die weiche Bühne unter dem Text (siehe unten). */
@media (min-width: 901px) {
  .bv3.ff .ff-hero--photo .ff-hero__bg { left: 46%; }
  .bv3.ff .ff-hero--photo .ff-hero__veil {
    background:
      linear-gradient(to top, var(--ff-cream) 0%, rgba(250,246,238,0) 22%),
      linear-gradient(90deg, var(--ff-cream) 0%, rgba(250,246,238,0.55) 14%, rgba(250,246,238,0) 34%); }
}
/* Tablet quer und kleine Laptops (bis 1280 px): Text ist relativ breiter →
   Bildfläche etwas weiter rechts, damit die Überschrift nicht ins Foto läuft */
@media (min-width: 901px) and (max-width: 1280px) {
  .bv3.ff .ff-hero--photo .ff-hero__bg { left: 54%; }
  .bv3.ff .ff-hero--photo .ff-hero__veil {
    background:
      linear-gradient(to top, var(--ff-cream) 0%, rgba(250,246,238,0) 22%),
      linear-gradient(90deg, var(--ff-cream) 0%, var(--ff-cream) 14%, rgba(250,246,238,0) 40%); }
}

@media (min-width: 901px) {
  .bv3.ff.js-motion .ff-hero--photo .ff-hero__img { animation: ff-hero-photo-in 1500ms var(--bv3-ease) 120ms backwards; }
  @keyframes ff-hero-photo-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
}

@media (max-width: 900px) {
  .bv3.ff .ff-hero--photo { min-height: 0; padding-top: clamp(140px, 22vh, 200px); }
  /* Auf Schmal-Screens sitzt das Foto als weiche Bühne unter dem Text */
  .bv3.ff .ff-hero--photo .ff-hero__img { object-position: 64% 38%; }
  .bv3.ff .ff-hero--photo .ff-hero__veil {
    background:
      linear-gradient(to top, var(--ff-cream) 4%, rgba(250,246,238,0) 40%),
      linear-gradient(to bottom, var(--ff-cream) 6%, rgba(250,246,238,0.62) 30%, rgba(250,246,238,0.2) 52%, rgba(250,246,238,0) 66%); }
  .bv3.ff .ff-hero--photo .ff-hero__text { max-width: none; }
  /* Echtes Hero-Foto (Oktober 2026): dunkle Anzüge mitten in der Textzone →
     Schleier dort etwas dichter, damit Absatz und Button gut lesbar bleiben. */
  .bv3.ff .ff-hero--photo .ff-hero__veil {
    background:
      linear-gradient(to top, var(--ff-cream) 4%, rgba(250,246,238,0) 40%),
      linear-gradient(to bottom, var(--ff-cream) 6%, rgba(250,246,238,0.80) 30%, rgba(250,246,238,0.72) 66%, rgba(250,246,238,0) 84%); }
}
/* Schmales Tablet (769–900 px): Das Hochkant-Foto ist hier höher als der
   Hero. Bildausschnitt so legen, dass die Gesichter der Kinder zwischen
   Navigation und Kicker-Zeile stehen (Augen etwa 120 px unter der Oberkante,
   nie mit Lücke unten), und den Schleier nur in diesem Streifen öffnen.
   Ab der Kicker-Zeile (Oberkante 200 px) bleibt er so dicht wie oben. */
@media (min-width: 769px) and (max-width: 900px) {
  .bv3.ff .ff-hero--photo .ff-hero__img { --fp-t: 50% max(120px - 58.5vw, 100%); }
  .bv3.ff .ff-hero--photo .ff-hero__veil {
    background:
      linear-gradient(to top, var(--ff-cream) 4%, rgba(250,246,238,0) 40%),
      linear-gradient(to bottom, var(--ff-cream) 20px, rgba(250,246,238,0.3) 88px, rgba(250,246,238,0.3) 168px, rgba(250,246,238,0.80) 198px, rgba(250,246,238,0.72) 66%, rgba(250,246,238,0) 84%); }
}

/* ============================================================
   CTA-MIKROZEILE · „Kostenlos & unverbindlich" zentriert direkt
   unter dem Button — an beiden Stellen (Hero + „erste Wochen").
   Umgesetzt als Grid: Spalte 1 ist so breit wie der Button,
   die Mikrozeile sitzt in derselben Spalte darunter und wird
   darin zentriert. „Mehr erfahren" bleibt daneben in Spalte 2.
   ============================================================ */
.bv3.ff .ff-hero__cta {
  display: grid;
  grid-template-columns: minmax(0, max-content) max-content;
  justify-content: start;
  justify-items: center;
  align-items: center;
  column-gap: clamp(20px, 3vw, 36px);
  row-gap: 12px;
}
.bv3.ff .ff-hero__cta > .b-btn { grid-column: 1; grid-row: 1; }
.bv3.ff .ff-hero__cta > .ff-hero__micro { grid-column: 1; grid-row: 2; margin: 0; text-align: center; }
.bv3.ff .ff-hero__cta > .ff-arrowlink { grid-column: 2; grid-row: 1; }

@media (max-width: 640px) {
  .bv3.ff .ff-hero__cta { grid-template-columns: minmax(0, max-content); }
  .bv3.ff .ff-hero__cta > .ff-arrowlink { grid-column: 1; grid-row: 3; justify-self: start; }
}

.bv3.ff .ff-grow__cta {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  justify-content: start;
  justify-items: center;
  row-gap: 14px;
}
.bv3.ff .ff-grow__cta > .ff-grow__cta-note { margin: 0; text-align: center; }

/* ============================================================
   SCHWEBENDER PROBETRAININGS-BUTTON (.sticky-cta)
   Grundstil kommt aus site.css + mobile-nav.css (einheitliche
   Pille, projektweit). Hier nur die zwei seitenspezifischen
   Korrekturen:
   1) css/fruehfoerderung.css blendet den Button ab 721px per
      `display:none !important` aus — deshalb war er auf Desktop
      unsichtbar. Wird hier zurückgenommen.
   2) Weil dieses Zurücknehmen auch `.sticky-cta.hidden{display:none}`
      aus site.css aushebelt, wird der Aus-Zustand des JS hier über
      opacity/transform/pointer-events abgebildet.
   ============================================================ */
.bv3.ff .sticky-cta {
  display: inline-flex !important;
  min-height: 44px;
  z-index: 80;
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard), background 220ms var(--ease-standard);
}
.bv3.ff .sticky-cta.hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
.bv3.ff .sticky-cta:focus-visible { outline: 3px solid var(--rp-tiefschwarz); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .bv3.ff .sticky-cta { transition: none; }
}

/* ── STANDORT-KARTEN · Foto-Thumbnail je Kachel (additiv) ─── */
.bv3.ff .ff-loc { overflow: hidden; }
.bv3.ff .ff-loc__thumb { display: block; margin: -28px -28px 20px; aspect-ratio: 16/10; overflow: hidden; background: #ece3d2; border-bottom: 1px solid rgba(109,23,35,0.08); }
.bv3.ff .ff-loc__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 620ms var(--bv3-ease); }
.bv3.ff .ff-loc:hover .ff-loc__thumb img { transform: scale(1.05); }
.bv3.ff .ff-loc__thumb--ph { display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(135deg, #efe7d7, #efe7d7 9px, #e9dfce 9px, #e9dfce 18px); }
.bv3.ff .ff-loc__thumb--ph span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rp-grau-muted); padding: 4px 10px; background: rgba(250,246,238,0.82); border-radius: 6px; }
@media (max-width: 520px) {
  .bv3.ff .ff-loc__thumb { grid-column: 1 / -1; margin: -18px -20px 14px; aspect-ratio: 16/7; }
}