/* ==========================================================
   LANDINGPAGES — gemeinsames Stylesheet
   ==========================================================
   Wird von BEIDEN Landingpages geladen: kids-landing.html und
   erwachsene-landing.html. Bewusst NICHT in style.css mit eingebaut:
   diese Regeln gelten nur für die beiden Landingpages.
   Sie so in einer eigenen Datei zu halten heißt, style.css bleibt für
   den Rest der Website unverändert - kein Risiko, dass ein neues
   Landingpage-spezifisches Detail versehentlich irgendwo anders auf der
   Seite mit auftaucht. Nutzt weiterhin dieselben Design-Variablen
   (--color-mint, --color-dark usw.) aus style.css, das diese Seite
   zusätzlich lädt - keine doppelte Farbpalette.
   ========================================================== */

/* ---------- Cursor-Spotlight-Effekt ----------
   Auf dunklen Flächen folgt ein sehr sanfter, heller "Lichtkreis" der
   Maus - kein Farbwechsel, nur eine leichte Aufhellung genau um den
   Cursor herum. Technisch: kids-landing.js schreibt bei jeder
   Mausbewegung die aktuelle Cursor-Position in zwei CSS-Variablen
   (--spot-x/--spot-y) auf das jeweilige Element; ein radialer
   Farbverlauf (::before, per Pseudo-Element statt echtem DOM-Element,
   damit kein zusätzlicher HTML-Tag nötig ist) zentriert sich auf genau
   diese Position. "pointer-events: none" ist entscheidend - ohne das
   würde der Lichtkreis selbst Klicks/Hover auf den Buttons darunter
   blockieren. Reagiert automatisch NICHT, wenn prefers-reduced-motion
   gesetzt ist (siehe ganz unten in dieser Datei) - der Effekt bewegt
   zwar nichts Großes, aber "etwas folgt der Maus" kann für manche
   Nutzer trotzdem unangenehm sein. */
.spotlight {
  position: relative;
  overflow: hidden;
}
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    600px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(255, 255, 255, 0.06),
    transparent 60%
  );
  opacity: 0; /* erst sichtbar, sobald sich die Maus tatsächlich über der
    Fläche befindet (siehe .spotlight--active in kids-landing.js) -
    verhindert einen fest sichtbaren Lichtkreis in der Bildschirmmitte,
    bevor überhaupt jemand die Maus bewegt hat */
  transition: opacity 0.4s ease;
}
.spotlight--active::before { opacity: 1; }
/* Der eigentliche Sektionsinhalt muss über dem Lichtkreis-Pseudo-
   Element liegen, sonst würde der (obwohl pointer-events:none) den
   Text optisch überdecken. */
.spotlight > * { position: relative; z-index: 2; }

/* ---------- Scroll-Reveal ----------
   Abschnitte blenden sanft ein, sobald sie beim Scrollen in den
   sichtbaren Bereich kommen (siehe IntersectionObserver in
   kids-landing.js) - ein einziger, ruhiger Effekt statt vieler kleiner
   Einzel-Animationen, damit es hochwertig statt unruhig wirkt. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Das eigentliche Sicherheitsnetz für "kein JavaScript" steht als
   noscript-Block direkt im head-Bereich von kids-landing.html - eine
   reine CSS-Datei wie diese hier kann selbst nicht wissen, ob
   JavaScript aktiv ist, das kann nur der Browser beim Auswerten des
   noscript-Blocks im HTML-Dokument selbst entscheiden.

   WICHTIG, nicht wieder ändern: In dieser Datei darf nirgends - auch
   nicht in einem Kommentar wie diesem - die wörtliche Zeichenfolge für
   ein schließendes style-Tag stehen. Sobald dieses Stylesheet irgendwo
   direkt in eine HTML-Seite eingebettet wird (z.B. für eine
   Vorschau-Version, in der alle Dateien zu einer einzigen
   zusammengefasst werden), beendet der Browser den Style-Bereich exakt
   an dieser Stelle - alles danach gilt dann nicht mehr als CSS und die
   halbe Seite steht ungestaltet da. Genau das ist hier schon einmal
   passiert. */

/* ---------- Hero ---------- */
.kl-hero {
  position: relative;
  background: var(--color-dark);
  color: var(--color-white);
  overflow: hidden;
  /* Füllt beim Ankommen nahezu den ganzen Bildschirm - der erste
     Eindruck ist dadurch EIN geschlossenes Bild statt eines Ausschnitts,
     bei dem schon der nächste Abschnitt hereinlugt. Nach oben begrenzt,
     damit es auf sehr hohen Monitoren nicht ins Leere läuft. */
  min-height: min(94vh, 940px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kl-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Das Foto liegt bewusst nur sehr schwach darunter: Der Bereich soll
   auch dann vollständig wirken, wenn noch gar kein echtes Foto im
   bilder/-Ordner liegt - getragen wird er vom dunklen Grund, dem warmen
   Lichtkegel und dem Schriftzug, nicht vom Bild. */
.kl-hero-bg .media-img { opacity: 0.45; }
/* Dunkler Verlauf über dem Foto, damit Überschrift und Button auf JEDEM
   Motiv lesbar bleiben - egal wie hell die Bildstelle darunter ist. */
.kl-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--color-dark) 4%, rgba(16, 25, 42, 0.55) 60%, rgba(16, 25, 42, 0.85) 100%);
}
/* Solange das Foto fehlt, darf hier KEIN grauer Platzhalter durch-
   scheinen (den .media--missing sonst überall anzeigt) - im dunklen Hero
   sähe das aus wie ein Darstellungsfehler. Sobald die Bilddatei
   existiert, greift sie automatisch, ohne Änderung an dieser Stelle. */
.kl-hero-bg.media--missing {
  background: none;
  box-shadow: none;
}

/* Warmer Lichtkegel, der von unten in die dunkle Fläche hineinstrahlt.
   Als eigenes Element hinter dem Inhalt (::after am Abschnitt selbst),
   damit er über das Foto UND dessen Abdunklung gelegt wird. Die Farbe
   ist bewusst SOKAIs bestehendes Akzent-Rostrot (--color-kicker) und
   keine neue Farbe - dadurch wirkt der Effekt wie Teil der Marke und
   nicht wie eine fremde Vorlage. */
.kl-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34%;
  width: min(1500px, 150%);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(193, 68, 14, 0.55) 0%,
    rgba(193, 68, 14, 0.3) 28%,
    rgba(193, 68, 14, 0.1) 48%,
    transparent 68%
  );
}

/* Der große Schriftzug im Hintergrund. Sehr geringe Deckkraft: Er soll
   als Struktur spürbar sein, aber nie mit der Überschrift konkurrieren. */
/* Licht UND Schriftzug wandern gemeinsam diagonal von einer
   Ecke zur anderen und wieder zurueck ("alternate"). Beide benutzen
   BEWUSST dieselben Keyframes mit derselben Dauer - dadurch bewegen sie
   sich exakt im Gleichschritt, das Licht bleibt also immer an derselben
   Stelle des Schriftzugs.

   Wichtiges Detail: die Verschiebung laeuft ueber die eigenstaendige
   CSS-Eigenschaft "translate" und NICHT ueber "transform". Beide
   Elemente brauchen "transform" naemlich schon fuer ihre Zentrierung -
   wuerde die Animation dieselbe Eigenschaft ueberschreiben, wuerden sie
   im selben Moment aus der Mitte springen. So laufen Zentrierung und
   Bewegung sauber nebeneinander.

   Die Wegstrecke ist in vw/vh angegeben (also in Bildschirmgroessen),
   damit sich beide um exakt dieselbe Pixelzahl bewegen - obwohl der
   Lichtkegel um ein Vielfaches groesser ist als die Schrift. Mit
   Prozentwerten wuerde sich jedes Element an SEINER eigenen Groesse
   orientieren und die beiden wuerden auseinanderlaufen. */
@keyframes kl-drift {
  from { translate: -4vw -10vh; }
  to { translate: 4vw 10vh; }
}
.kl-hero::after,
.kl-hero-watermark {
  animation: kl-drift 7s ease-in-out infinite alternate;
}
/* Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat (z.B. weil
   ihm von Bewegung schlecht wird), bekommt das ruhige Standbild. */
@media (prefers-reduced-motion: reduce) {
  .kl-hero::after,
  .kl-hero-watermark { animation: none; }
}

.kl-hero-watermark {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 23vw, 21rem);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.075);
  pointer-events: none;
  user-select: none;
}

/* Mittig statt linksbündig - wie im Vorbild. Die gesamte Aufmerksamkeit
   läuft dadurch auf einer einzigen senkrechten Achse zusammen:
   Überschrift, Trennlinie, Claim, Button. */
.kl-hero-inner {
  position: relative;
  z-index: 3;
  padding: 104px 0 120px;
  max-width: 760px;
  text-align: center;
}
.kl-hero .kicker { color: var(--color-mint); }
.kl-hero h1 {
  color: var(--color-white);
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.06;
  margin: 16px 0 0;
  text-wrap: balance;
}
.kl-hero h1 em {
  font-style: normal;
  color: var(--color-mint);
}

.kl-hero-rule {
  display: block;
  width: min(420px, 60%);
  height: 3px;
  margin: 34px auto 26px;
  border-radius: 2px;
  /* Läuft zu beiden Seiten weich aus, statt hart abzubrechen. */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Der Marken-Slogan als eigene, betonte Zeile - in der Akzentfarbe und
   mit weitem Buchstabenabstand, damit er sich klar vom erklaerenden Satz
   darunter abhebt und nicht wie ein zweiter Untertitel wirkt. */
.kl-hero-slogan {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--color-mint);
  margin: 0 0 10px;
}
.kl-hero-slogan span { color: var(--color-kicker); }

.kl-hero-claim {
  color: var(--color-white);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 600;
  margin: 0 0 40px;
}

/* Der zentrale Button. Zwei Zeilen (Versprechen groß, Begründung klein)
   und ein weicher Schein in der Button-Farbe - dadurch wirkt er wie eine
   leuchtende Fläche im dunklen Bereich statt wie ein flaches Rechteck. */
.kl-hero-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 17px 46px;
  border-radius: 14px;
  background: var(--color-mint);
  color: var(--color-dark);
  box-shadow:
    0 0 0 3px rgba(140, 230, 196, 0.18),
    0 20px 50px -14px rgba(140, 230, 196, 0.75);
  transition:
    transform 0.25s var(--ease-smooth),
    box-shadow 0.25s var(--ease-smooth);
}
.kl-hero-cta strong {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.kl-hero-cta small {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.75;
}
.kl-hero-cta:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(140, 230, 196, 0.28),
    0 28px 64px -14px rgba(140, 230, 196, 0.95);
}

.kl-hero-trust {
  margin-top: 36px;
  justify-content: center; /* mittig, passend zum zentrierten Aufbau */
}

/* Ab Tablet-/Desktop-Breite schwebt die Probetraining-Karte rechts oben
   über der Seite (position: fixed, siehe .probe-widget in style.css).
   Ohne diese Zeile würde die mittig gesetzte Überschrift genau darunter
   verschwinden. Der zusätzliche Innenabstand rechts nimmt der Karte
   ihren Platz aus dem Hero heraus, sodass sich der Inhalt in der
   verbleibenden Fläche zentriert statt sich mit ihr zu überlappen.
   320px Kartenbreite + 24px Randabstand + etwas Luft. */
/* 721px ist bewusst KEINE frei gewaehlte Zahl, sondern exakt die
   Grenze, ab der die Karte laut style.css wieder schwebt
   (dort: @media (max-width: 720px) macht sie zum normalen Seiteninhalt).
   Beide Werte muessen zusammenpassen - waere die Grenze hier hoeher
   angesetzt, gaebe es genau dazwischen ein Fenster, in dem die Karte
   schon schwebt, der Hero ihr aber noch keinen Platz freihaelt und die
   Ueberschrift darunter verschwindet. Genau das war hier der Fall. */
@media (min-width: 721px) {
  /* 320px Kartenbreite + 24px Randabstand + etwas Luft. */
  .kl-hero { padding-right: 368px; }
}
/* Im schmalen Teil dieses Bereichs bleibt neben der Karte wenig Platz -
   dort darf die Ueberschrift ruhig etwas kleiner ausfallen, damit sie
   nicht in sehr viele kurze Zeilen zerfaellt. */
@media (min-width: 721px) and (max-width: 1023px) {
  .kl-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
  .kl-hero-inner { padding: 88px 0 96px; }
}

/* ---------- Programm-Auswahl ---------- */
.kl-programs {
  padding: 96px 0;
  background: var(--color-cream);
}
.kl-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.kl-program-card {
  position: relative; /* Anker fuer den Streifen an der Oberkante */
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
  display: flex;
  flex-direction: column;
}
.kl-program-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 3;
  background: var(--color-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}
.kl-program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.kl-program-card:hover::before { transform: scaleX(1); }
.kl-program-photo { aspect-ratio: 4 / 3; }
.kl-program-photo .media-img { transition: transform 0.6s var(--ease-smooth); }
.kl-program-card:hover .kl-program-photo .media-img { transform: scale(1.05); }
.kl-program-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.kl-program-body h3 { margin-bottom: 8px; }
.kl-program-body p { flex: 1; margin-bottom: 16px; }

/* ---------- Der SOKAI-Moment (3 Etappen) ---------- */
.kl-moment {
  padding: 96px 0;
  background: var(--color-dark);
  color: var(--color-white);
}
.kl-moment .kicker { color: var(--color-mint); }
.kl-moment h2 { color: var(--color-white); }
.kl-moment-copy { color: rgba(255, 255, 255, 0.72); max-width: 60ch; }
.kl-moment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.kl-moment-step { text-align: left; }
.kl-moment-photo {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.kl-moment-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-mint);
  margin-bottom: 10px;
}
.kl-moment-step h3 { color: var(--color-white); margin-bottom: 8px; }
.kl-moment-step p { color: rgba(255, 255, 255, 0.68); margin: 0; }

/* ---------- Statement-Zeile ("Und dann passiert es.") ---------- */
.kl-statement {
  padding: 88px 0;
  background: var(--color-mint);
  text-align: center;
}
.kl-statement h2 {
  color: var(--color-dark);
  font-size: clamp(2rem, 4.4vw, 3rem);
  margin: 0;
}

/* ---------- 4 Gründe ---------- */
.kl-reasons { padding: 96px 0; }
.kl-reasons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
/* Die vier Karten waren schlichte, flache Rechtecke ohne Rangfolge -
   alles darin gleich wichtig, nichts fuehrt das Auge. Drei Eingriffe:

   1. Weisser Grund mit feiner Linie statt cremefarbener Flaeche: die
      Karte hebt sich dadurch ueberhaupt erst vom Abschnitt ab.
   2. Ein farbiger Streifen an der Oberkante, der beim Zeigen von links
      nach rechts aufzieht - die Karte reagiert, statt still zu stehen.
   3. Ein leichtes Anheben beim Zeigen, wie schon bei den Programm-
      karten - dadurch wirken beide Kartenarten wie EIN System statt
      wie zwei zufaellig verschiedene Bausteine. */
.kl-reason-card {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(16, 25, 42, 0.07);
  border-radius: var(--radius-lg);
  padding: 30px 24px 28px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.35s var(--ease-smooth),
    box-shadow 0.35s var(--ease-smooth);
}
.kl-reason-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-mint);
  /* scaleX(0) statt width: 0 - der Browser kann eine Skalierung auf der
     Grafikkarte bewegen, ohne das Layout neu zu berechnen. Das laeuft
     spuerbar fluessiger, gerade auf schwaecheren Handys. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}
.kl-reason-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.kl-reason-card:hover::before { transform: scaleX(1); }
.kl-reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Groesser als vorher (52px Kachel, 26px Symbol): Bei der alten
     Groesse verschwanden die Symbole zwischen Ueberschrift und Text,
     statt den Blick zu fuehren. Der kraeftigere Strich unten sorgt
     dafuer, dass sie auch auf dem Handy klar bleiben - duenne Linien
     franst die Bildschirmdarstellung dort sichtbar aus. */
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(193, 68, 14, 0.09);
  color: var(--color-kicker);
  margin-bottom: 20px;
}
.kl-reason-icon svg { width: 30px; height: 30px; stroke-width: 1.8; }
.kl-reason-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.kl-reason-card p { font-size: 0.92rem; margin: 0; }

/* ---------- Identität (4 Quadranten um ein Zitat) ---------- */
.kl-identity {
  padding: 96px 0;
  background: var(--color-dark);
  color: var(--color-white);
}
.kl-identity .kicker { color: var(--color-mint); }
.kl-identity h2 { color: var(--color-white); }
.kl-identity-copy { color: rgba(255, 255, 255, 0.72); max-width: 60ch; }
.kl-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.kl-identity-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.kl-identity-tag { color: var(--color-mint); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.kl-identity-card h3 { color: var(--color-white); margin: 8px 0; font-size: 1.05rem; }
.kl-identity-card p { color: rgba(255, 255, 255, 0.68); margin: 0; font-size: 0.92rem; }

/* ---------- Realitäts-Check ---------- */
.kl-reality { padding: 96px 0; background: var(--color-cream); }
.kl-reality-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.kl-reality-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kl-reality-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.kl-reality-list li { display: flex; align-items: flex-start; gap: 12px; }
.kl-reality-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.kl-reality-check svg { width: 14px; height: 14px; }

/* ---------- Mobile ---------- */
@media (max-width: 960px) {
  .kl-hero-inner { max-width: 100%; }
  .kl-programs-grid { grid-template-columns: repeat(2, 1fr); }
  .kl-moment-grid { grid-template-columns: 1fr; }
  .kl-reasons-grid { grid-template-columns: repeat(2, 1fr); }
  .kl-reality-inner { grid-template-columns: 1fr; gap: 32px; }
  /* Grid-Kinder haben als Default min-width: auto statt 0 - dadurch
     weigern sie sich, unter die intrinsische Breite ihres Inhalts zu
     schrumpfen (hier: der Button-Text "Kostenloses Probetraining
     sichern"). Auf schmalen Bildschirmen reicht das, um die ganze
     Spalte über die Bildschirmbreite hinauswachsen zu lassen und
     dadurch horizontales Scrollen auf der GESAMTEN Seite zu erzwingen -
     genau das gleiche Muster wie bei .hero-text in style.css. */
  .kl-reality-text { min-width: 0; }
}
@media (max-width: 640px) {
  .kl-programs-grid { grid-template-columns: 1fr; }
  .kl-reasons-grid { grid-template-columns: 1fr; }
  .kl-identity-grid { grid-template-columns: 1fr; }
  .kl-hero-inner { padding: 64px 0 72px; }
}

/* Wer keine Bewegungseffekte möchte, bekommt auch keine - weder den
   wandernden Lichtkreis noch die Einblend-Animation (Inhalte sind dann
   einfach sofort vollständig sichtbar, ohne Übergang). */
@media (prefers-reduced-motion: reduce) {
  .spotlight::before { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ---------- Marken-Lockup in der Kopfzeile ----------
   Logo und Slogan als EINE Einheit, durch einen senkrechten Strich
   getrennt. Der Strich ist eine Rahmenlinie am Slogan selbst und
   verschwindet damit automatisch mit, wenn der Slogan auf schmalen
   Bildschirmen ausgeblendet wird - es bleibt also nie ein Strich ohne
   Text stehen. */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* darf schrumpfen, damit die Kopfzeile auf mittleren
                   Breiten nicht ueber den Button hinauswaechst */
}
.logo-slogan {
  padding-left: 12px;
  border-left: 1px solid rgba(16, 25, 42, 0.15);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  white-space: nowrap;
}
/* Auf schmalen Bildschirmen wird der Platz neben dem Button knapp -
   dort bleibt nur das Logo stehen. Im Hero ist der Slogan ja ohnehin
   gross und deutlich zu sehen, er geht also nicht verloren. */
@media (max-width: 620px) {
  .logo-slogan { display: none; }
}

/* ---------- Team-Raster auf sehr schmalen Handys ----------
   Gilt NUR fuer diese Landingpage (die Datei wird ja nur hier geladen) -
   style.css und damit die uebrigen Seiten bleiben unangetastet.

   Das gemeinsame .team-grid steht bis ganz unten hin auf zwei Spalten.
   Auf sehr schmalen Geraeten (360px) passen zwei Karten samt Abstand
   aber nicht mehr nebeneinander: die Karten koennen wegen ihrer Inhalte
   nicht beliebig schmal werden, wachsen also ueber den Bildschirmrand
   hinaus - und schieben damit die GESAMTE Seite seitlich verschiebbar.
   Darum hier ab 520px abwaerts eine Spalte.

   min-width: 0 ist der zweite Teil: Raster-Kinder duerfen von sich aus
   nicht unter die natuerliche Breite ihres Inhalts schrumpfen. Diese
   Zeile hebt genau diese Sperre auf und aendert sonst nichts. */
.team-member { min-width: 0; }

@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr; }
}


/* ---------- Der wandernde Schriftzug auf dem Handy ----------
   Auf dem Handy war von dem Effekt schlicht nichts zu sehen, und das
   hatte einen messbaren Grund: Die Schrift skaliert mit der
   Bildschirmbreite, landete auf einem 390px breiten Geraet also bei nur
   96px Hoehe - ein schmales Baendchen quer durch die Mitte, bei 7,5%
   Deckkraft ueber einem Foto praktisch unsichtbar. Am grossen Monitor
   sind es dagegen ueber 300px, dort funktioniert genau derselbe Wert.

   Deshalb bekommt das Handy hier eigene Werte statt einfach kleinerer:
   die Schrift wird im Verhaeltnis zum Bildschirm groesser gesetzt (sie
   ragt dann bewusst links und rechts aus dem Bild heraus - der Hero
   schneidet das sauber ab und genau dieser Anschnitt laesst sie erst
   richtig gross wirken) und etwas kraeftiger. Der Lichtkegel wird
   ebenfalls vergroessert, sonst bliebe er auf dem schmalen Bildschirm
   ein kleiner Fleck am unteren Rand statt einer Flaeche, durch die
   etwas hindurchwandert. */
@media (max-width: 640px) {
  /* "Kickboxen bei SOKAI" stiess bei 390px Bildschirmbreite links und
     rechts genau an den Rand - kein Ueberlauf, aber optisch gequetscht.
     Etwas kleiner gesetzt bleibt links und rechts wieder Luft. */
  .kl-hero h1 { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }

  .kl-hero-watermark {
    font-size: clamp(9rem, 40vw, 15rem);
    color: rgba(255, 255, 255, 0.115);
  }
  .kl-hero::after {
    width: min(1100px, 210%);
    bottom: -26%;
  }
}

/* ==========================================================
   ZAHLENBAND
   ==========================================================
   Ersetzt das frühere, fast leere mintgrüne Band. Große Zahlen in
   kräftiger Akzentfarbe geben dem Scrollen einen Taktwechsel: nach
   zwei textlastigen Abschnitten kommt eine Zeile, die man in einer
   halben Sekunde erfasst. Genau dieser Wechsel zwischen "lesen" und
   "erfassen" ist es, was hochwertige Seiten von gleichförmigen
   unterscheidet. */
.kl-zahlen {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 64px 0;
}
.kl-zahlen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.kl-zahl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* Raster-Kinder dürfen sonst nicht unter ihre
                   Inhaltsbreite schrumpfen - siehe gleiche Zeile beim
                   Team-Raster weiter oben */
  padding-left: 18px;
  border-left: 2px solid rgba(140, 230, 196, 0.35);
}
.kl-zahl-wert {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-mint);
}
.kl-zahl-text {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-muted-on-dark);
}

/* ==========================================================
   ZWISCHEN-CTA "LIEBER SPRECHEN"
   ==========================================================
   Bewusst dunkel statt mintgrün: Vorher sahen das mittlere und das
   abschließende Banner fast gleich aus, und Wiederholung ist eines der
   sichersten Kennzeichen einer billig wirkenden Seite. */
.kl-direkt {
  background: var(--color-dark-soft);
  color: var(--color-white);
  padding: 72px 0;
}
.kl-direkt-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.kl-direkt-text h2 { color: var(--color-white); margin-bottom: 12px; }
.kl-direkt-text p:last-child { margin-bottom: 0; }
.kl-direkt-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.kl-direkt-actions .btn { justify-content: center; }

/* Heller Umriss-Button für dunkle Flächen - als ruhigere Zweitwahl
   neben dem mintgrünen Hauptbutton. Zwei gleich kräftige Buttons
   nebeneinander würden sich gegenseitig die Wirkung nehmen. */
.btn-ghost-light {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================
   FESTE AKTIONSLEISTE AM UNTEREN RAND (nur Handy)
   ==========================================================
   Am Desktop bleibt sie aus - dort schwebt die Formular-Karte ohnehin
   dauerhaft mit. Sie erscheint erst nach dem Hero (gesteuert von
   initStickyBar() in kids-landing.js). */
.kl-sticky-bar { display: none; }

@media (max-width: 720px) {
  .kl-sticky-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160; /* über dem Seiteninhalt, aber unter den Popups (200) */
    gap: 10px;
    padding: 12px 16px;
    /* Zusätzlich der Sicherheitsabstand am unteren Rand moderner
       Handys (Home-Leiste beim iPhone) - ohne das läge der untere Teil
       der Buttons dort unerreichbar unter der Systemleiste. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 25, 42, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .kl-sticky-bar .btn {
    flex: 1;
    justify-content: center;
    padding: 13px 16px;
    font-size: 0.9rem;
  }
  /* Der Cookie-Hinweis sitzt ebenfalls unten am Rand - ohne diesen
     Abstand würden sich beide überlagern. */
  .cookie-banner { padding-bottom: 84px; }

  .kl-zahlen-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .kl-direkt-inner { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 960px) and (min-width: 721px) {
  .kl-zahlen-grid { grid-template-columns: repeat(2, 1fr); }
  .kl-direkt-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================
   GROSSE AUSSAGE — der typografische Taktwechsel
   ==========================================================
   Der einzige Ort auf der Seite, an dem die Schrift deutlich größer ist
   als überall sonst und ein Abschnitt fast nur aus Weißraum besteht.
   Genau dieser eine Ausreißer nimmt der Seite die Gleichförmigkeit -
   mehrere solcher Momente würden sich dagegen gegenseitig entwerten. */
.kl-aussage {
  background: var(--color-cream-soft);
  padding: 120px 0;
}
.kl-aussage-inner {
  /* Breite und Schriftgröße müssen zusammenpassen: Mit 780px Spalte und
     70px Schrift zerfiel der Satz in fünf kurze, zerhackte Zeilen - das
     wirkt gedrängt statt großzügig, also genau das Gegenteil des
     beabsichtigten Effekts. Breitere Spalte plus etwas kleinere Schrift
     ergibt die zwei ruhigen Zeilen, für die die festen Umbrüche im HTML
     gedacht sind. */
  max-width: var(--container-width);
  text-align: center;
}
/* Kurzer mintgrüner Strich über dem Zitat statt eines Anführungszeichen-
   Symbols: ein Zeichen, das nichts sagt, aber dem Auge einen Startpunkt
   gibt. Riesige Anführungszeichen sind das Klischee an dieser Stelle. */
.kl-aussage-marke {
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 32px;
  border-radius: 2px;
  background: var(--color-mint);
}
.kl-aussage blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  /* Der Größenunterschied IST hier der ganze Effekt - also muss er
     auch deutlich ausfallen. Erster Versuch mit max. 3.2rem ergab am
     Desktop gemessen 51px gegenüber 46px bei einer normalen
     Überschrift: fünf Pixel Unterschied sieht niemand, das wirkt eher
     wie ein Versehen als wie Absicht. Mit 4.4rem sind es 70px gegen
     46px - erst dieser Sprung liest sich als bewusst gesetzter
     Moment. */
  font-size: clamp(1.9rem, 3.9vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--color-text);
  /* KEIN text-wrap: balance hier. Der Umbruch ist im HTML bewusst von
     Hand gesetzt, damit der Satz genau an der Stelle bricht, an der er
     auch gesprochen eine Pause hat. "balance" verteilt die Wörter
     dagegen gleichmäßig auf die Zeilen und macht daraus drei mittellange
     statt zwei sinnvolle - hier arbeiten beide gegeneinander. Auf dem
     Handy sind die festen Umbrüche ausgeblendet (siehe unten), dort
     bricht der Satz wieder ganz normal um. */
}
/* Bewusst sehr klein und zurückhaltend - der Abstand zwischen der großen
   Zeile darüber und dieser kleinen darunter erzeugt die Spannung. */
.kl-aussage-quelle {
  margin: 28px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (max-width: 640px) {
  .kl-aussage { padding: 80px 0; }
  /* Auf dem Handy bricht das Zitat ohnehin um - die festen Umbrüche aus
     dem HTML würden dort zu sehr kurzen, zerhackten Zeilen führen. */
  .kl-aussage blockquote br { display: none; }
}

/* ==========================================================
   GESTALTUNG FÜR DIE DREI VORBEREITETEN ABSCHNITTE
   ==========================================================
   Vertrauensleiste, Preise und die Knappheits-Zeile im Hero sind im
   HTML noch auskommentiert, weil dort echte Zahlen fehlen. Ihre
   Gestaltung steht hier aber schon vollständig - dadurch ist das
   Aktivieren später wirklich nur noch "Kommentarzeichen entfernen",
   ohne dass jemand nochmal ans CSS muss. Ungenutzte Regeln kosten
   nichts: Was im HTML nicht vorkommt, wird vom Browser ignoriert. */

/* ---------- Vertrauensleiste (direkt unter dem Hero) ---------- */
.kl-vertrauen {
  background: var(--color-white);
  border-bottom: 1px solid rgba(16, 25, 42, 0.08);
  padding: 32px 0;
}
.kl-vertrauen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.kl-vertrauen-punkt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kl-vertrauen-punkt strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
}
.kl-vertrauen-punkt span {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-muted);
}

/* ---------- Preise ---------- */
.kl-preis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.kl-preis-karte {
  background: var(--color-white);
  border: 1px solid rgba(16, 25, 42, 0.07);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.kl-preis-karte h3 { margin-bottom: 10px; }
.kl-preis-karte p { font-size: 0.92rem; margin: 0; }
.kl-preis-wert {
  font-family: var(--font-display);
  font-size: 2.1rem !important;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
  margin-bottom: 8px !important;
}
/* Das "/Monat" bewusst klein und grau: Der Betrag soll das Auge
   zuerst treffen, die Einheit erst danach. */
.kl-preis-wert span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-muted);
}
.kl-preis-hinweis {
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* ---------- Knappheits-Zeile im Hero ---------- */
.kl-hero-knappheit {
  display: inline-block;
  margin: 22px 0 0;
  padding: 8px 16px;
  border: 1px solid rgba(140, 230, 196, 0.4);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-mint);
}

@media (max-width: 960px) {
  .kl-vertrauen-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .kl-preis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kl-vertrauen-grid { grid-template-columns: 1fr; }
}


/* Ab der Breite, ab der die Probetraining-Karte schwebt (721px, siehe
   style.css), braucht auch dieser Abschnitt rechts Platz für sie - sonst
   läuft die große Zeile unter der Karte hindurch. Gleiche Begründung und
   gleicher Wert wie beim Hero weiter oben. Betrifft alle Abschnitte, die
   über die volle Containerbreite gehen; hier ist es der einzige. */
@media (min-width: 721px) {
  .kl-aussage { padding-right: 368px; }
}

/* ==========================================================
   ALTERS-UMSCHALTER
   ========================================================== */

/* Die Programm-Karten sind jetzt Schaltflächen. Browser geben Buttons
   eigene Voreinstellungen mit (grauer Hintergrund, Rahmen, zentrierter
   Text, eigene Schrift) - die müssen zurückgesetzt werden, sonst sieht
   die Karte plötzlich aus wie ein Formularknopf. */
button.kl-program-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(16, 25, 42, 0.07);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  width: 100%;
}

/* Die gewählte Karte. Bewusst deutlich markiert: Wer nicht sofort sieht,
   WELCHE Gruppe gerade aktiv ist, versteht auch nicht, warum sich der
   Text darunter geändert hat. Der Streifen oben ist derselbe wie beim
   Zeigen - hier bleibt er dauerhaft ausgefahren. */
.kl-program-card.ist-aktiv {
  border-color: var(--color-mint);
  box-shadow: 0 0 0 2px var(--color-mint), var(--shadow-md);
}
.kl-program-card.ist-aktiv::before { transform: scaleX(1); }

/* Kleines "Auswählen" unten in der Karte, das beim Aktivieren zur
   Bestätigung wird - so ist ohne zusätzlichen Text klar, dass die
   Karte anklickbar ist und was der Klick bewirkt hat. */
.kl-program-waehlen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 2px;
  transition: gap 0.2s var(--ease-smooth);
}
.kl-program-card:hover .kl-program-waehlen { gap: 10px; }
.kl-program-card.ist-aktiv .kl-program-waehlen {
  color: var(--color-kicker);
  border-color: var(--color-kicker);
}
.kl-program-card.ist-aktiv .kl-program-waehlen span { display: none; }
.kl-program-card.ist-aktiv .kl-program-waehlen::after { content: "✓ Ausgewählt"; }
.kl-program-card.ist-aktiv .kl-program-waehlen { font-size: 0; }
.kl-program-card.ist-aktiv .kl-program-waehlen::after { font-size: 0.9rem; }

.kl-programs-hinweis {
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-kicker);
}

/* ---------- Detailbereich ---------- */
.kl-detail {
  background: var(--color-white);
  padding: 88px 0;
}
.kl-detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}
/* Ohne JavaScript stehen alle drei Fassungen untereinander - dann
   brauchen sie einen Abstand zueinander. Sobald der Umschalter läuft
   (Klasse am body, gesetzt von initAltersUmschalter), ist ohnehin immer
   nur eine sichtbar und der Abstand entfällt. */
.kl-detail-panel + .kl-detail-panel { margin-top: 72px; }
body.umschalter-aktiv .kl-detail-panel + .kl-detail-panel { margin-top: 0; }

.kl-detail-foto {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
}
.kl-detail-text { min-width: 0; }
.kl-detail-text h2 { margin-bottom: 14px; }

.kl-detail-liste {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kl-detail-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.97rem;
  color: var(--color-text);
}
.kl-detail-haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--color-mint);
  color: var(--color-dark);
}
.kl-detail-haken svg { width: 13px; height: 13px; }

.kl-detail-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.kl-faq-hinweis {
  margin-top: -4px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-kicker);
}

@media (min-width: 721px) {
  /* Gleiche Begründung wie beim Hero und beim Zitat: Platz für die
     schwebende Formular-Karte freihalten. */
  .kl-detail { padding-right: 368px; }
}
@media (max-width: 960px) {
  .kl-detail-panel { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .kl-detail { padding: 64px 0; }
  .kl-detail-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ==========================================================
   MITSCHALTENDE BEREICHE
   ==========================================================
   Drei-Schritte-Weg, vier Gründe und Zahlenband liegen jeweils in drei
   Fassungen im HTML - eine je Altersstufe, ausgezeichnet mit
   class="kl-variante" und data-alter. Sichtbar ist immer nur eine;
   das Umschalten übernimmt initAltersUmschalter() in kids-landing.js.

   Ohne JavaScript sind alle drei Fassungen untereinander sichtbar. Das
   ist gewollt: Die Seite bleibt vollständig, und Suchmaschinen lesen
   alle drei Texte statt nur einen. Der Abstand dazwischen wird deshalb
   nur dann gesetzt, wenn der Umschalter NICHT läuft. */
.kl-variante + .kl-variante { margin-top: 64px; }
body.umschalter-aktiv .kl-variante + .kl-variante { margin-top: 0; }

/* Das Zahlenband ist selbst schon das Raster - beim Wechsel darf es
   nicht seine Rastereigenschaften verlieren, deshalb hier noch einmal
   ausdrücklich (die Regel oben setzt sonst nur den Abstand). */
.kl-variante.kl-zahlen-grid[hidden] { display: none; }

/* ---------- Zahlenband: Wortwerte statt reiner Zahlen ----------
   Das Band war ursprünglich für kurze Zahlen gedacht ("3", "0 €").
   Seit dort auch Wörter stehen ("Stufensystem", "Ohne Wettkampf"), gibt
   es ein Problem, das bei Zahlen nie auftreten konnte: "Stufensystem"
   ist EIN Wort und kann nirgends umbrechen. Bei 390px Bildschirmbreite
   passte es nicht in eine der zwei Spalten und hat die ganze Seite
   seitlich verschiebbar gemacht.

   Deshalb auf schmalen Geräten nur noch EINE Spalte - dort steht die
   volle Breite zur Verfügung. Das Umbruch-Verhalten darunter ist das
   Sicherheitsnetz, falls später ein noch längeres Wort dazukommt:
   lieber ein umgebrochenes Wort als eine verschobene Seite. */
/* Kein "hyphens: auto" mehr: Es hat lange Wörter mitten im Wort
   getrennt ("Du bestimm-st"), und das sieht schlicht nach Fehler aus.
   Umbrechen darf ein Wort nur noch im äußersten Notfall - dafür sorgt
   overflow-wrap, das erst greift, wenn ein Wort allein breiter ist als
   seine Spalte. */
.kl-zahl-wert { overflow-wrap: break-word; }

/* Für Wortwerte statt Zahlen. Eine "3" oder "0 €" darf riesig sein,
   "Ohne Wettkampf" bei derselben Größe passt in keine Spalte mehr.
   Diese Klasse wird im HTML gesetzt, weil CSS die Länge eines Textes
   nicht kennt - eine Regel wie "wenn länger als 8 Zeichen" gibt es
   nicht. */
.kl-zahl-wert--lang { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }

@media (max-width: 480px) {
  .kl-zahlen-grid { grid-template-columns: 1fr; gap: 18px; }
  .kl-zahl-wert { font-size: 1.7rem; }
}

/* ==========================================================
   NUR AUF DER ERWACHSENEN-LANDINGPAGE
   ==========================================================
   Diese Abschnitte gibt es auf der Kinderseite nicht. Sie stehen
   trotzdem hier in der gemeinsamen Datei statt in einer eigenen: Beide
   Landingpages teilen sich sonst alles, und eine zweite Datei nur für
   drei Abschnitte würde bei jeder künftigen Änderung die Frage
   aufwerfen, wo etwas hingehört. Ungenutzte Regeln kosten nichts. */

/* Vier Karten statt drei - dieselbe Karte, nur ein anderes Raster. */
.kl-programs-grid--vier { grid-template-columns: repeat(4, 1fr); }

/* ---------- "Das denkst du gerade" ----------
   Dunkler Abschnitt, weil er inhaltlich der ernsteste der Seite ist:
   Hier werden Peinlichkeiten ausgesprochen. Ein heller, freundlicher
   Hintergrund würde das Thema kleinreden. */
.kl-huerden {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 96px 0;
}
.kl-huerden h2 { color: var(--color-white); }
.kl-huerden-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.kl-huerde {
  min-width: 0;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
/* Der gedachte Satz in der Farbe des Akzents und kursiv: Er soll sofort
   als fremde Stimme lesbar sein, nicht als unsere Aussage. */
.kl-huerde-gedanke {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-style: italic;
  color: var(--color-mint);
  margin: 0 0 12px;
}
.kl-huerde-antwort {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--color-muted-on-dark);
  margin: 0;
}

/* ---------- "Dein erster Abend" ---------- */
.kl-abend { padding: 96px 0; background: var(--color-cream); }
.kl-abend-liste {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
}
.kl-abend-schritt {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid rgba(16, 25, 42, 0.1);
}
.kl-abend-schritt:last-child { border-bottom: 1px solid rgba(16, 25, 42, 0.1); }
/* Große, ruhige Ziffer statt eines Icons: Sie zeigt Reihenfolge, ohne
   etwas zu behaupten, und gibt dem Abschnitt Rhythmus. */
.kl-abend-nr {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-mint-dark);
}
.kl-abend-schritt h3 { margin-bottom: 6px; }
.kl-abend-schritt p { margin: 0; font-size: 0.97rem; }

/* ---------- Eltern-Abschnitt ---------- */
.kl-eltern {
  background: var(--color-dark-soft);
  color: var(--color-white);
  padding: 72px 0;
}
.kl-eltern-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.kl-eltern-text h2 { color: var(--color-white); margin-bottom: 12px; }
.kl-eltern-text p:last-child { margin-bottom: 0; }
.kl-eltern-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kl-eltern-actions .btn { justify-content: center; }

@media (min-width: 721px) {
  /* Platz für die schwebende Formular-Karte - gleiche Begründung wie
     beim Hero, beim Zitat und beim Detailbereich. */
  .kl-huerden, .kl-abend { padding-right: 368px; }
}
@media (max-width: 1100px) {
  .kl-programs-grid--vier { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .kl-huerden-grid { grid-template-columns: 1fr; gap: 20px; }
  .kl-eltern-inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .kl-programs-grid--vier { grid-template-columns: 1fr; }
  .kl-huerden, .kl-abend { padding: 64px 0; }
  .kl-abend-schritt { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
  .kl-abend-nr { font-size: 1.6rem; }
}