/* Zeichenfabrik -- Lehrgangs-Seiten (Übersicht + Detail), sektionsspezifische Stile.
   Leitplanken laut Lehrgang-Guide: scharfe 2px-Kanten, 1px-Linien statt Schatten im Fluss,
   Mono-Kicker, Terrakotta nur als seltener Höhepunkt; weiche Schatten nur für schwebende
   Ebenen (Sticky-Leiste, Testimonial). */

/* ---- Übersicht /lehrgaenge/ ---- */
.uebersicht-hero { padding: 40px 24px 32px; border-bottom: 1px solid var(--farbe-rand); }
.uebersicht-hero h1 { max-width: 16em; letter-spacing: -0.02em; }
.uebersicht-byline { margin: 20px 0 0; font-size: 18px; line-height: 1.55; color: #4A463F; max-width: 34em; }
@media (min-width: 1024px) { .uebersicht-hero { padding: 56px 56px 40px; } }

.lehrgaenge-liste { padding: 40px 24px 64px; display: grid; gap: 28px; }
@media (min-width: 1024px) { .lehrgaenge-liste { padding: 48px 56px 80px; } }
.lehrgang-karte {
  display: grid;
  gap: 0;
  border: 1px solid var(--farbe-rand);
  background: #fff;
}
@media (min-width: 768px) { .lehrgang-karte { grid-template-columns: 320px 1fr; } }
.lehrgang-karte-bild { display: flex; min-height: 200px; position: relative; }
.lehrgang-karte-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lehrgang-karte-text { padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lehrgang-karte-text h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.lehrgang-karte-text h2 a { text-decoration: none; }
.lehrgang-karte-text p { margin: 0; color: #4A463F; }
.lehrgang-karte-meta { font-family: var(--schrift-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--farbe-muted); }
.lehrgaenge-leer { color: var(--farbe-muted); }

/* ---- Vorschau-Banner (Entwurf über geheimen Link) ---- */
.lehrgang-vorschau-banner {
  background: #E7D3BE;
  color: #7A4D22;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 16px;
}

/* ---- Hero ---- */
.lehrgang-hero {
  display: grid;
  border-bottom: 1px solid var(--farbe-rand);
}
@media (min-width: 1024px) { .lehrgang-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); } }
.lehrgang-hero-text { padding: 40px 24px 48px; }
@media (min-width: 1024px) { .lehrgang-hero-text { padding: 56px 48px 64px 56px; } }
.lehrgang-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.lehrgang-badge-teal, .lehrgang-badge-sand {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.lehrgang-badge-teal { background: var(--farbe-teal-hell); color: #22403F; }
.lehrgang-badge-sand { background: #E7D3BE; color: #6B5C46; }
.lehrgang-hero h1 { margin: 0 0 14px; font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; max-width: 14em; }
@media (min-width: 1024px) { .lehrgang-hero h1 { font-size: 52px; } }
.lehrgang-untertitel { margin: 0 0 26px; font-size: 18px; line-height: 1.55; color: #4A463F; max-width: 30em; }
.lehrgang-eckdaten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--farbe-rand);
  border-bottom: 1px solid var(--farbe-rand);
  margin-bottom: 26px;
}
@media (min-width: 700px) { .lehrgang-eckdaten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Die Mindestteilnehmerzahl unter den Eckdaten (19.08.2026). Sie ist keine fünfte Eckdate,
   sondern eine ZUSAGE -- deshalb ein Satz und keine Kachel: „Der Lehrgang findet ab 8
   Anmeldungen statt." Die Eckdaten-Zeile hat oben und unten eine Linie; der Satz sitzt
   darunter, damit er nicht wie eine abgeschnittene fünfte Spalte wirkt. */
.lehrgang-mindestzahl {
  margin: -14px 0 26px;
  max-width: 34em;
  font-size: 14px;
  line-height: 1.55;
  color: var(--farbe-muted);
}
.lehrgang-mindestzahl strong { color: var(--farbe-text, #2A2723); }
.lehrgang-eckdaten-label {
  margin: 0 0 4px;
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-muted);
}
.lehrgang-eckdaten-wert { margin: 0; font-weight: 600; font-size: 15px; }
.lehrgang-hero-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lehrgang-hero-bild { position: relative; min-height: 280px; }
.lehrgang-hero-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Gemeinsame Sektionen ---- */
.lehrgang-sektion { padding: 48px 24px; border-bottom: 1px solid var(--farbe-rand); }
@media (min-width: 1024px) { .lehrgang-sektion { padding: 64px 56px; } }
.lehrgang-sektion h2, .lehrgang-prinzipien h2, .lehrgang-outcome h2 { margin: 0 0 22px; font-size: 30px; letter-spacing: -0.02em; }
.lehrgang-intro { max-width: 44em; font-size: 17px; line-height: 1.7; color: #37342D; }
.lehrgang-intro p { margin: 0 0 16px; }

/* ---- Prinzipien-Band (Design: nummerierte Spalten mit Oberstrich, keine Karten) ---- */
.lehrgang-prinzipien { padding: 48px 24px; background: #F4F1EA; border-bottom: 1px solid var(--farbe-rand); }
@media (min-width: 1024px) { .lehrgang-prinzipien { padding: 64px 56px; } }
.prinzipien-headline { margin: 0 0 16px; font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; max-width: 16em; }
@media (min-width: 1024px) { .prinzipien-headline { font-size: 44px; } }
.prinzipien-intro { margin: 0 0 36px; font-size: 16px; line-height: 1.6; color: #4A463F; max-width: 44em; }
.prinzipien-raster { display: grid; gap: 26px 40px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .prinzipien-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .prinzipien-raster { grid-template-columns: repeat(4, 1fr); } }
/* Die Spalten selbst kommen als gemeinsames Bauteil .nummern-spalte (basis.css). */
.wort-kringel { position: relative; display: inline-block; }
.wort-kringel svg { position: absolute; left: 0; right: 0; bottom: -0.16em; width: 100%; height: 0.34em; }

/* ---- Für wen / Das lernst du ---- */
.lehrgang-listen { display: grid; gap: 40px; }
@media (min-width: 900px) { .lehrgang-listen { grid-template-columns: 1fr 1fr; gap: 56px; } }
.liste-haken, .liste-pfeile { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 34em; }
.liste-haken li, .liste-pfeile li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; font-size: 15px; color: #37342D; }
.liste-haken .haken-svg { color: var(--farbe-teal); width: 20px; height: 15px; flex-shrink: 0; transform: translateY(2px); }
.liste-pfeile .pfeil-hand { color: var(--farbe-terrakotta); margin-left: 0; width: 22px; height: 12px; flex-shrink: 0; transform: translateY(3px); }
/* „Das lernst du": leichte Trenner zwischen den Punkten (Design: #EFECE5, 12px) */
.liste-pfeile li { border-top: 1px solid #EFECE5; padding-top: 12px; align-items: flex-start; }
.lehrgang-note { margin: 16px 0 0; font-size: 14px; color: var(--farbe-muted); max-width: 34em; }

/* ---- Lernpfad (Design-Vorlage: 44px-Knoten an EINER durchgehenden, geschwungenen Linie) ---- */
.lernpfad-intro { margin: 0 0 44px; font-size: 16px; line-height: 1.6; color: #4A463F; max-width: 46em; }
.lernpfad-start { margin: 0 0 6px 6px; display: flex; align-items: center; gap: 16px; }
.lernpfad-start .menue-hand { font-size: 26px; transform: rotate(-4deg); }
.lernpfad-ziel .menue-hand { font-size: 26px; transform: rotate(-2deg); }
.lernpfad-start .pfeil-hand { color: var(--farbe-terrakotta); margin-left: 0; }
.lernpfad { display: block; max-width: 860px; }
/* --- Die geschwungene Linie: FESTE KURVE + GERADER SCHWANZ je Zeile (14.08.2026, 2. Wurf) --
   ⚠️ DIE KURVE DARF SICH NIE STRECKEN. Der erste Wurf (ein Stück je Zeile, `height: 100%`)
   hielt zwar die ENDEN in den Knotenmitten, streckte aber den Schwung über die Zeilenhöhe:
   Beim Aufklappen von „Mehr zum Modul" wanderte der Bauch der Kurve sichtbar zur Seite --
   genau der Sprung, den der Inhaber gemeldet hat. Eine Kurve, deren Form von der Zeilenhöhe
   abhängt, springt bei JEDER Höhenänderung; die einzige Linie, die sich verlustfrei dehnt,
   ist eine gerade.

   Deshalb jetzt zweiteilig, beide Teile am KNOTEN verankert:
   1. Eine Kurve mit FESTER Höhe (200 px), beginnend in der Knotenmitte. Ihre Tangenten sind
      an beiden Enden senkrecht -- sie trifft Knoten und Schwanz ohne Knick.
   2. Ein gerader Schwanz (::after) von ihrem Ende bis 22 px in die nächste Zeile hinein --
      die Knotenmitte der Folgezeile. NUR er nimmt jede Höhenänderung auf.

   ⚠️ DIE ZAHL 22 IST DIE KNOTENMITTE: Der Knoten ist 44 px hoch und sitzt oben in seiner
   Zeile (`align-items: flex-start`). Keine Media-Query rührt an diesen Größen. */
.lernpfad-zeile { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 26px;
                  position: relative;
                  /* Sicherheitsnetz: Zeile nie kürzer als Knotenmitte + Kurve + Anschluss --
                     sonst ragte die feste Kurve in die Folgezeile. Echte Karten sind mit
                     400+ px weit darüber; die Regel greift nur, falls je eine Karte fast
                     leer ist. */
                  min-height: 244px; }
.lernpfad-strich { position: absolute; left: 0; top: 22px; width: 60px; height: 200px;
                   z-index: 0; }
/* Abwechselnd nach rechts und links -- die Schlangenlinie der Vorlage. Gespiegelt statt zweiter
   Pfad: Die 60-px-Spur ist symmetrisch, x=30 bleibt x=30. */
.lernpfad-strich--gegen { transform: scaleX(-1); }
/* Der Schwanz: 2,5 px breit wie der SVG-Strich, mittig auf x=30 (30 − 2,5/2 = 28,75). Er
   beginnt am Kurvenende (22 + 200) und endet 22 px in der Folgezeile -- deren Knotenmitte. */
.lernpfad-zeile::after { content: ""; position: absolute; left: 28.75px; width: 2.5px;
                         top: 222px; bottom: -22px; background: #B7C9C2; z-index: 0; }
/* Das Schlussstück zur Fahne: gerade von der Oberkante der Zielzeile bis zur Fahnenmitte.
   Die Fahne sitzt MITTIG in ihrer Zeile (`align-items: center`), also sind 50 % immer ihre
   Mitte -- auch wenn der Zieltext umbricht. */
.lernpfad-ziel::before { content: ""; position: absolute; left: 28.75px; width: 2.5px;
                         top: 0; height: 50%; background: #B7C9C2; }
.lernpfad-spur { width: 60px; flex: 0 0 auto; display: flex; justify-content: center; }
.lernpfad-knoten {
  position: relative; z-index: 1;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--farbe-teal);
  background: var(--farbe-creme);
  color: var(--farbe-teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--schrift-mono); font-size: 16px; font-weight: 800;
}
/* Pflicht-/Einstiegsknoten: teal gefüllt + weicher teal Halo (box-shadow, kein Ring) */
.lernpfad-knoten--fix { background: var(--farbe-teal); color: #fff; }
.lernpfad-spur--erster .lernpfad-knoten { box-shadow: 0 0 0 5px rgba(55, 101, 108, 0.14); }
.modul-karte {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--farbe-teal);
  background: #fff;
  padding: 22px 24px;
  transition: border-color 0.15s;
}
/* Pflichtmodul: 4px linker Akzent-Rahmen (Design) */
.lernpfad-zeile:not(.lernpfad-zeile--wahl) .modul-karte { border-left-width: 4px; }
/* Abgewählt: heller Rand, Inhalt entsättigt (kein Ausfaden), Toggle bleibt kräftig. */
.lernpfad-zeile--wahl.abgewaehlt .modul-karte { border-color: var(--farbe-rand); }
.lernpfad-zeile--wahl.abgewaehlt .modul-karte h3,
.lernpfad-zeile--wahl.abgewaehlt .modul-kurz,
/* ⚠️ Die Klappe „Mehr zum Modul" MUSS hier stehen: Diese Regel zählt ihre Bestandteile
   einzeln auf, und was fehlt, bleibt kräftig. Der Teal-Link leuchtete sonst als Einziger
   weiter, obwohl das Modul abgewählt ist. */
.lernpfad-zeile--wahl.abgewaehlt .modul-mehr summary,
.lernpfad-zeile--wahl.abgewaehlt .modul-mehr-text,
.lernpfad-zeile--wahl.abgewaehlt .modul-meta,
.lernpfad-zeile--wahl.abgewaehlt .modul-preis,
.lernpfad-zeile--wahl.abgewaehlt .modul-termin-text strong,
.lernpfad-zeile--wahl.abgewaehlt .modul-termin-text span { color: #A49E93; }
.lernpfad-zeile--wahl.abgewaehlt .modul-wochentag { background: #DAD5CC; color: #8C877D; }
.lernpfad-zeile--wahl.abgewaehlt .lernpfad-knoten { border-color: #C9C2B4; color: #B0A99C; }

/* ⚠️ `flex-wrap: wrap` IST HIER KEIN SCHÖNHEITSFEHLER, SONDERN DIE REGEL GEGEN SEITLICHES
   SCROLLEN (Befund 14.08.2026). Rechts steht entweder das Abzeichen „Fixer Bestandteil" oder
   der Schalter „Im Pfad" -- beide mit `white-space: nowrap`, also unschrumpfbar. Ohne Umbruch
   schoben sie sich am Telefon aus der Karte hinaus: gemessen 141 px Abzeichen plus 101 px Tags
   plus 12 px Abstand in einem 190 px breiten Kopf, und die SEITE lief mit (375 px sichtbar,
   390 px breit). Mit Umbruch rutscht das Abzeichen in die zweite Zeile. */
.modul-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
              flex-wrap: wrap; margin-bottom: 8px; }
.modul-kopf-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modul-etappe { font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8377; }
.modul-tag { font-family: var(--schrift-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; }
.modul-tag--pflicht { background: #E7D3BE; color: #7A4D22; }
.modul-tag--wahl { background: var(--farbe-teal-hell); color: #22403F; }
.modul-tag--empfohlen { border: 1px solid var(--farbe-terrakotta); color: var(--farbe-terrakotta); }

/* Toggle „Im Pfad" (wählbar) + Badge „Fixer Bestandteil" (verpflichtend) -- Design-Werte:
   Im Pfad = blassteal Pille + teal Feld mit weißem Haken; Fixer = cremefarbene Pille + graues Feld. */
.modul-wahl { display: inline-flex; cursor: pointer; }
.modul-wahl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.modul-wahl-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--farbe-rand); font-size: 12px; font-weight: 600; color: #6B665E; white-space: nowrap; }
.modul-wahl-box { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #B7AF9F; background: #fff; position: relative; flex-shrink: 0; }
.modul-wahl-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.modul-wahl input:checked ~ .modul-wahl-pill { background: #EEF5F5; border-color: var(--farbe-teal); color: var(--farbe-teal); }
.modul-wahl input:checked ~ .modul-wahl-pill .modul-wahl-box { background: var(--farbe-teal); border-color: var(--farbe-teal); }
.modul-wahl input:checked ~ .modul-wahl-pill .modul-wahl-box::after { opacity: 1; }
.modul-wahl input:focus-visible ~ .modul-wahl-pill { outline: 2px solid var(--farbe-teal); outline-offset: 2px; }
.modul-fix-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: #FBF6EC; border: 1px solid #E1D8C6; color: #7A6A4A; font-size: 12px; font-weight: 600; white-space: nowrap; }
.modul-fix-badge .modul-wahl-box { background: #8A8377; border-color: #8A8377; }
.modul-fix-badge .modul-wahl-box::after { opacity: 1; }

.modul-karte h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.modul-kurz { margin: 8px 0 0; color: #4A463F; font-size: 15px; line-height: 1.55; max-width: 42em; }

/* „Mehr zum Modul" (13.08.2026) -- die ausführliche Beschreibung, zugeklappt.
   Bewusst LEISER als die Kurstage-Klappe weiter unten: Diese hier ist ein Angebot, jene der
   Weg zu einer Zahl, die man beim Buchen braucht. Deshalb kein eigener Streifen, keine
   Grossbuchstaben, nur ein Link mit Pfeil. Zugeklappt kostet sie eine Zeile. */
.modul-mehr { margin: 2px 0 0; }
/* ⚠️ `min-height: 44px` ist das TIPPZIEL, nicht die Schriftgröße: Der Text bleibt 21 px hoch und
   sitzt mittig im Kästchen. Ohne das war die Klappe am Telefon 21 px hoch -- zu wenig für einen
   Daumen. Die Kurstage-Klappe daneben kommt über ihre Polsterung auf 56 px; diese hier soll
   leiser bleiben und trotzdem treffbar sein. */
.modul-mehr summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
                      min-height: 44px; gap: 6px; font-size: 14px; font-weight: 600;
                      color: var(--farbe-teal); }
.modul-mehr summary::-webkit-details-marker { display: none; }
.modul-mehr summary::after { content: "▾"; display: inline-block; transition: transform 0.18s; }
.modul-mehr[open] summary::after { transform: rotate(180deg); }
.modul-mehr summary:hover { text-decoration: underline; }
.modul-mehr .modul-mehr-auf { display: none; }
.modul-mehr[open] .modul-mehr-zu { display: none; }
.modul-mehr[open] .modul-mehr-auf { display: inline; }
.modul-mehr-text { margin: 10px 0 0; color: #4A463F; font-size: 15px; line-height: 1.6; max-width: 42em; }
.modul-mehr-text p { margin: 0 0 10px; }
.modul-mehr-text p:last-child { margin-bottom: 0; }
.modul-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 14px 0 0; font-size: 13px; color: #37342D; }
.modul-meta-eintraege { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.modul-meta-eintraege > span { display: inline-flex; align-items: center; gap: 7px; }
.modul-meta-label { font-family: var(--schrift-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #8A8377; }
.modul-meta-eintraege strong, .modul-meta-eintraege a { font-weight: 700; }
.modul-preis { margin-left: auto; font-family: var(--schrift-mono); font-size: 13px; font-weight: 600; color: var(--farbe-teal); white-space: nowrap; }

/* Termin-Box: Tages-Badge + Zeit/Details, darunter ausklappbare Kurstage (Design-Werte) */
.modul-termin-box { margin-top: 16px; border: 1px solid var(--farbe-rand); background: #FBFAF7; }
.modul-termin { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.modul-wochentag {
  background: var(--farbe-teal-hell); color: #22403F;
  width: 44px; height: 44px; flex-shrink: 0; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.modul-termin-text { flex: 1 1 0; min-width: 0; }
.modul-termin-text strong { display: block; font-weight: 700; font-size: 15px; color: #1A1815; white-space: nowrap; }
.modul-termin-text span { display: block; margin-top: 2px; font-size: 13px; color: #6B665E; }
.modul-frei { margin-left: auto; font-family: var(--schrift-mono); font-size: 11px; color: #8A8377; white-space: nowrap; }
/* Mobil: „N Plätze frei" nicht mittig neben den umbrechenden Datumstext quetschen, sondern
   in eine eigene Zeile unter Badge/Zeit setzen (flex-basis:100% erzwingt den Umbruch). */
@media (max-width: 520px) {
  .modul-termin { flex-wrap: wrap; }
  .modul-frei { flex-basis: 100%; margin: 2px 0 0 58px; }
}
.modul-kurstage summary { cursor: pointer; list-style: none; padding: 11px 16px; border-top: 1px solid #EFECE5; background: #FAF9F6; font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--farbe-teal); display: flex; align-items: center; justify-content: space-between; }
.modul-kurstage summary::-webkit-details-marker { display: none; }
.modul-kurstage summary::after { content: "▾"; margin-left: 12px; display: inline-block; transition: transform 0.18s; }
.modul-kurstage[open] summary::after { transform: rotate(180deg); }
.modul-kurstage .kurstage-label-auf { display: none; }
.modul-kurstage[open] .kurstage-label-zu { display: none; }
.modul-kurstage[open] .kurstage-label-auf { display: inline; }
.modul-kurstage ol { list-style: none; margin: 0; padding: 4px 16px 12px; border-top: 1px solid #EFECE5; }
.modul-kurstage li { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid #F1EEE8; }
.kurstag-nr { font-family: var(--schrift-mono); font-size: 11px; color: #B1936B; width: 26px; flex: 0 0 auto; }
.kurstag-info { flex: 1 1 0; font-size: 14px; font-weight: 600; color: #37342D; }
.kurstag-zeit { font-size: 14px; color: #37342D; white-space: nowrap; }

/* Ziel-Fahne im Kreis (terrakotta Halo) + handschriftliche Schlusszeile */
.lernpfad-ziel { display: flex; gap: 24px; align-items: center; position: relative; }
.lernpfad-ziel .lernpfad-spur { width: 60px; flex: 0 0 auto; display: flex; justify-content: center; }
.lernpfad-fahne-kreis { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--farbe-terrakotta); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 0 0 5px rgba(188, 107, 65, 0.15); }
.lernpfad-fahne { width: 20px; height: 20px; }

/* ---- Das nimmst du mit (dunkles Band -- Design-Werte) ---- */
.lehrgang-outcome { background: #16211F; color: #FAF9F6; padding: 56px 24px; }
@media (min-width: 1024px) { .lehrgang-outcome { padding: 60px 56px; } }
.lehrgang-outcome .kicker { color: var(--farbe-teal-hell); margin-bottom: 12px; }
.lehrgang-outcome h2 { max-width: 18em; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 32px; }
.outcome-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 60em; }
@media (min-width: 720px) { .outcome-raster { grid-template-columns: repeat(3, 1fr); gap: 16px 40px; } }
.outcome-raster li { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 14px; font-size: 15px; line-height: 1.5; }
.outcome-raster .haken-svg { color: var(--farbe-terrakotta); flex-shrink: 0; transform: translateY(1px); }
.lehrgang-outcome-hand { font-family: var(--schrift-hand); font-size: 27px; line-height: 1.35; color: #E7D3BE; margin: 32px 0 0; max-width: 20em; }

/* ---- Testimonial (Design-Vorlage: zentrierte, leicht gedrehte Karte mit Deko-„) ---- */
.lehrgang-testimonial-sektion { display: flex; justify-content: center; }
.lehrgang-testimonial {
  margin: 0;
  position: relative;
  background: #fff;
  padding: 40px 44px 34px;
  max-width: 42em;
  transform: rotate(-0.5deg);
  box-shadow: 0 24px 60px -20px rgba(20, 15, 10, 0.32), 0 6px 18px -8px rgba(20, 15, 10, 0.14);
}
.testimonial-deko { position: absolute; top: 16px; left: 32px; font-family: var(--schrift-hand); font-size: 74px; line-height: 0.4; color: var(--farbe-teal-hell); pointer-events: none; }
.lehrgang-testimonial .kicker { position: relative; margin-bottom: 14px; }
.lehrgang-testimonial blockquote { margin: 0; font-size: 21px; line-height: 1.5; font-weight: 500; color: #211C14; }
.testimonial-name { margin: 20px 0 0; display: flex; align-items: center; gap: 11px; font-size: 13px; color: #6B665E; }
.testimonial-name::before { content: ""; width: 28px; height: 2px; background: var(--farbe-terrakotta); flex: 0 0 auto; }

/* ---- Fixierte Pfad-Leiste (Design-Vorlage: 1200px-Wrapper, DEIN PFAD · Status · Preis) ---- */
.lernpfad-leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: #16211F;
  color: #FAF9F6;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.5);
}
.leiste-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 40px; }
.leiste-links { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.leiste-pfad { display: flex; flex-direction: column; gap: 2px; }
.leiste-label { font-family: var(--schrift-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.leiste-pfad strong { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.leiste-status { font-size: 13px; color: var(--farbe-teal-hell); }
.leiste-status.leiste-status--warnung { color: var(--farbe-terrakotta); }
.leiste-rechts { display: flex; align-items: center; gap: 20px; }
.leiste-preis-block { text-align: right; }
.leiste-preis { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.leiste-hinweis { display: block; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.btn-buchen { background: var(--farbe-terrakotta); color: #fff; border: 0; padding: 14px 24px; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.btn-buchen:hover { background: #A85C34; }
.btn-buchen:disabled { background: #3B4744; color: #7E8B87; cursor: default; }
/* Mobil: Status + Raten-Hinweis ausblenden, kompakter (Pfad + Preis + Button bleiben) */
@media (max-width: 720px) {
  .leiste-inner { gap: 12px; padding: 10px 16px; }
  .leiste-status, .leiste-hinweis { display: none; }
  .leiste-label { display: none; }
  .leiste-pfad strong { font-size: 15px; }
  .leiste-preis { font-size: 18px; white-space: nowrap; }
  .leiste-rechts { gap: 12px; }
  .btn-buchen { padding: 12px 14px; font-size: 14px; }
  /* ⚠️ DER KNOPF DARF NIE ABGESCHNITTEN WERDEN -- er ist der eine Weg zur Buchung. Gemessen
     am 14.08.2026: Die Leiste brauchte 465 px für 390, und „Lehrgang buchen" endete bei 450 --
     75 px außerhalb des Bildschirms. Sichtbar wurde es nicht als Scrollbalken, weil eine fest
     stehende Leiste (`position: fixed`) die Scrollbreite der Seite gar nicht vergrößert.

     Ursache: Der linke Text trägt `white-space: nowrap` und ein Flex-Kind darf ohne
     `min-width: 0` nicht unter seinen Inhalt schrumpfen -- er drückte den Rest hinaus. Jetzt
     kürzt der Text mit Auslassungspunkten, Preis und Knopf behalten ihre Größe. */
  .leiste-links { min-width: 0; }
  .leiste-pfad { min-width: 0; }
  .leiste-pfad strong { overflow: hidden; text-overflow: ellipsis; }
  .leiste-rechts { flex: 0 0 auto; }
  /* Die Stundenzahl weicht als Erstes -- sie ist die unwichtigste Angabe der Leiste und steht
     im Kopf des Lehrgangs ohnehin. Ohne sie passt „10 von 8–10 Modulen" ungekürzt. */
  .leiste-stunden { display: none; }
}
/* Auf schmalen Telefonen (gemessen bei 375 px) fehlten dem Modul-Satz noch 14 px, und die
   Auslassungspunkte hätten ihn mitten im Wort gekappt. Die Zahl kommt aus den ABSTÄNDEN, nicht
   aus dem Text -- zusammen rund 20 px. */
@media (max-width: 480px) {
  .leiste-inner { padding: 10px 12px; }
  .leiste-rechts { gap: 8px; }
  .btn-buchen { padding: 12px 10px; }
  /* Der Modul-Stand ist Nebeninformation neben Preis und Knopf -- kleiner gesetzt schafft er
     Reserve. 14 px passten bei 375 px auf den Pixel genau (132 von 132), und das kippt auf dem
     ersten Gerät mit anderer Schriftdarstellung. Die Auslassungspunkte bleiben als Netz:
     Sollte ein Lehrgang einmal längere Zahlen tragen, kappt es sauber, statt die Leiste zu
     sprengen. 13 px ist hier keine Ausnahme -- der Status daneben steht ebenfalls auf 13. */
  .leiste-pfad strong { font-size: 13px; }
}
/* Platz für die fixe Leiste, damit der Footer nicht verdeckt wird. Der Abstand liegt auf dem
   DUNKLEN .fusszeile-inner (nicht auf .fusszeile) -- sonst zeigt die Reserve das Creme des
   Seitenhintergrunds als Lücke zwischen Footer und Sticky-Leiste. */
body:has(.lernpfad-leiste) .fusszeile-inner { padding-bottom: 128px; }

/* Kein redundanter grauer Trenner direkt über dem Footer: die letzte Sektion (Testimonial)
   randlos, die Papierkante trennt bereits sichtbar zum Footer. */
/* ⚠️ DER UNTERE RAND SASS HIER, weil das Testimonial die letzte Sektion vor dem Fuß war. Seit
   20.08.2026 ist es der Kontaktblock (Wächtertest 11 des Handoffs) -- das Testimonial bekommt
   seinen Trenner zurück, und „kein Rand" wandert mit. Zwei Regeln, die einander widersprechen,
   wären schlimmer als eine geänderte. */
.lehrgang-kontakt { border-bottom: none; }

/* Erklärtext unter der Raten-Checkbox: EINE Rechnung, Teilbeträge mit Terminen auf der RG. */
.lehrgang-raten-hinweis { margin: -6px 0 14px 28px; font-size: 12.5px; line-height: 1.5; color: #8A8377; max-width: 40em; }

/* ---- Buchungsmodal: Auswahl-Übersicht (Schritt 1) -- nutzt sonst die buchung.css-Klassen ---- */
.lehrgang-modal-auswahl { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.lehrgang-modal-auswahl li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--farbe-rand);
  font-size: 15px;
}
.lehrgang-modal-auswahl li span:last-child { font-family: var(--schrift-mono); font-size: 13px; color: var(--farbe-muted); white-space: nowrap; }

/* Verweis auf die eigene Kursseite eines einzeln buchbaren Moduls (03.08.2026) -- die
   Gegenrichtung zum Auftakt-Block der Kursdetailseite. Zurueckhaltend gesetzt: Der Lernpfad
   soll den ganzen Weg erzaehlen, der Einzelbesuch ist die Ausnahme, nicht das Angebot. */
.modul-einzeln { margin: 6px 0 0; font-size: 14px; }
.modul-einzeln a { color: var(--farbe-teal); font-weight: 600; text-decoration: none; }
.modul-einzeln a:hover { text-decoration: underline; }

/* Gemeinsame Preis-Fussnote des Lernpfads + Material-Abweichung je Karte (03.08.2026). */
.lernpfad-preisfussnote { margin: 6px 0 0; font-size: 14px; color: #6B665E; }
.modul-material { margin: 6px 0 0; font-size: 14px; color: #6B665E; }

/* === Die Leitung (Design-Handoff 20.08.2026, Block 01) ===================================
   Porträt links, Text rechts; zwei Personen nebeneinander, unter ~940 px untereinander.

   ⚠️ DIE MASSE SIND MIT ABSICHT `minmax()` UND NICHT FEST (Spezifikation, im Entwurf bei 560,
   924, 1100 und 1440 px geprüft): Ein starres 176-px-Porträt neben `1fr` lässt die Textspalte
   unter 900 px auf zwei Wörter je Zeile zusammenfallen. Dasselbe gilt fürs Raster: `auto-fit`
   mit 440 px Mindestbreite bricht auf eine Spalte um, statt zwei enge zu quetschen.

   Keine neue Farbe, keine neue Komponente: Die Schwerpunkte tragen `.modul-tag--wahl` aus dem
   Lernpfad, die Linie über jeder Person ist die 2-px-Kante der Nummern-Spalte. */
.leitung-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 48px;
  margin-top: 36px;
}
@media (max-width: 520px) { .leitung-raster { grid-template-columns: 1fr; } }
.leitung-person {
  display: grid;
  grid-template-columns: minmax(140px, 176px) minmax(0, 1fr);
  gap: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--farbe-footer);
}
/* Die Bildfläche bleibt auch ohne Porträt stehen -- sonst rückte der Text in die erste Spalte
   und die zweite Person stünde anders da als die erste. */
.leitung-portraet {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  background: var(--farbe-rand);
}
.leitung-portraet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leitung-rolle {
  margin: 0 0 6px;
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--farbe-teal);
}
.leitung-person h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.leitung-kurz { margin: 0 0 14px; font-size: 15px; line-height: 1.5; font-weight: 600; color: #37342D; }
/* `text-wrap: pretty` verhindert das einzelne Wort in der letzten Zeile; wo der Browser es nicht
   kennt, ändert sich schlicht nichts. */
.leitung-vita { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #4A463F; text-wrap: pretty; }
.leitung-vita p { margin: 0; }
.leitung-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; padding: 0; list-style: none; }
.leitung-link { font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--farbe-teal-hell); }

/* ⚠️ AM TELEFON STEHT DAS PORTRÄT ÜBER DEM TEXT (nachgemessen bei 375 px): Als zwei Spalten
   blieben der Textspalte 134 px -- zwei Wörter je Zeile, und die Spezifikation verlangt
   mindestens 220 px. Das Bild bekommt dabei eine feste Breite statt der vollen Zeile: Ein
   375 px breites Porträt im Hochformat wäre 500 px hoch und schöbe den Text aus dem Bild.

   ⚠️ UND SIE STEHT AM ENDE, nicht oben bei `.leitung-raster`: Dort stand sie zuerst --
   VOR `.leitung-person`, mit demselben Gewicht. Bei gleicher Spezifität gewinnt die
   spätere Regel, also die Grundregel. Das Porträt wurde schmäler (die zweite Zeile griff),
   die Spalten blieben zwei. Im Browser gemessen, nicht gelesen. */
@media (max-width: 620px) {
  .leitung-person { grid-template-columns: 1fr; gap: 16px; }
  .leitung-portraet { width: 150px; }
}


/* === Fragen & Kontakt (Design-Handoff 20.08.2026, Block 03) ==============================
   Links die drei Wege, rechts die fünf Antworten. Letzte Sektion vor dem Fuß.

   ⚠️ `min(100%, 360px)` IST NICHT KOSMETIK (Spezifikation, nachgerechnet): Mit
   `minmax(0,1fr) minmax(320px,380px)` behält die rechte Spalte eine harte Mindestbreite und
   die linke fällt unter ~800 px auf 0 px zusammen. `auto-fit` mit einer Mindestbreite, die
   selbst bei 100 % deckelt, bricht stattdessen sauber auf eine Spalte um. */
.kontakt-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 56px;
  align-items: start;
}
.kontakt-wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 32px;
  margin-top: 32px;
}
.kontakt-weg-link { margin: 12px 0 0; font-size: 14px; font-weight: 700; }
.kontakt-weg-link a { text-decoration: none; border-bottom: 1px solid var(--farbe-teal-hell); }
/* Die Antworten stehen in einem eigenen Feld -- sie sind Nachschlagewerk, nicht Fließtext, und
   der Rahmen sagt das, ohne dass jemand es schreiben muss. */
.kontakt-faq {
  border: 1px solid var(--farbe-rand);
  background: #F4F1EA;
  padding: 28px;
}
.kontakt-faq dl { margin: 0; }
/* Trennlinie ÜBER jedem Paar außer dem ersten: Unten gezogen stünde eine Linie am Kastenrand. */
.kontakt-faq dt {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--farbe-rand);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.kontakt-faq dt:first-of-type { margin-top: 14px; padding-top: 0; border-top: 0; }
.kontakt-faq dd { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #4A463F; }
/* Die Stornofristen als kleine Tabelle im Fließtext: Drei Zeilen „Zeitraum -> Prozentsatz",
   die man nebeneinander lesen soll. Ohne Aufzählungspunkte -- es ist eine Staffel, keine
   Liste von Vorschlägen. Die Daten selbst rechnet Lehrgang.stornofristen(). */
.lehrgang-fristen {
  margin: 10px 0 12px;
  padding: 0;
  list-style: none;
}
.lehrgang-fristen li {
  padding: 5px 0;
  border-top: 1px solid var(--farbe-rand);
}
.lehrgang-fristen li:first-child { border-top: 0; }

/* Die Betrifft-Zeile im Kontaktformular, wenn jemand über die Lehrgangsseite kommt. */
.kontakt-bezug { margin: 0 0 14px; font-size: 14px; color: #4A463F; }