/* ================= LebensFEELfalt — seite.css =================
 * Die Lese-Ebene aller Unterseiten. Laedt IMMER nach base.css und darf deshalb
 * gezielt ueberschreiben. Vorlage:
 * docs/superpowers/specs/2026-08-05-unterseiten-designsystem.md, Abschnitt 1.2.
 *
 * Das hier ist das alte css/ort.css ohne die Bloecke, die jetzt aus base.css
 * kommen. Entfernt, jeweils mit Grund:
 *   - :root            → base.css. Das war die Quelle des zweiten Gruens #35634f.
 *                        Ab jetzt ist --sage-deep ueberall #3c7059.
 *   - * { margin: 0 }  → base.css hat denselben Reset.
 *   - body { … }       → base.css. Die Lese-Schriftgroesse wandert auf .wrap,
 *                        damit Nav-Pille und Fusszeile ihre eigenen Grade behalten.
 *   - .top, .foot      → ersetzt durch .nav und .footer aus base.css.
 *   - .eyebrow         → base.css.
 *   - .sec, .sec--tint → base.css, Abschnitt 6.1. Zwei Definitionen derselben
 *                        Sache driften auseinander, genau so ist das zweite Gruen
 *                        entstanden. (Abweichung von der reinen Vier-Block-Liste
 *                        der Vorlage, hier begruendet.)
 *   - a/button:focus-visible → base.css setzt :focus-visible global, identisch.
 *   - prefers-reduced-motion → base.css, aus sections.css uebernommen.
 *
 * Bleibt und wird weiterverwendet: .wrap, .crumb, h1/h2/h3, .lead, ul-Punkte,
 * .facts, .steps, .ptable, .quals, .certs/.cert, .cta/.cta__b.
 * Neu aus Abschnitt 5.5: .split und .cards.
 *
 * Typografie nach den Lesewerten der Vorgabe: das sind LESE-Seiten, keine Buehne.
 * Grosse vw-Grade waeren hier falsch.
 */

img { max-width: 100%; height: auto; display: block; }

/* Lesespalte. 680px, plus harter Deckel auf Absaetze: sonst laeuft ein Absatz auf
   1840px ueber die volle Breite und hat 150 Zeichen pro Zeile. */
/* Das Innenmass zaehlt, nicht das Aussenmass. Mit 6vw Innenabstand blieben von den
   680px auf einem 1440er Schirm nur 508px Textbreite uebrig, und die H1 brach auf
   fuenf Zeilen um. Der Abstand bleibt deshalb konstant klein und wird nur auf
   schmalen Geraeten gebraucht, wo er ohnehin die volle Wirkung hat. */
/* Der Lesegrad sitzt hier und nicht auf dem body: sonst erben ihn die Nav-Pille
   und die Fusszeile, die eigene, kleinere Grade haben. */
.wrap {
  max-width: 680px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 28px);
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.wrap p, .wrap li { max-width: 68ch; }
.sec--wide .wrap { max-width: 1180px; }

/* Textlinks in der Lesespalte.
   Bewusst NICHT global auf `a`: base.css setzt a{color:inherit} und
   a{text-decoration:none}, damit Nav und Fusszeile ihre eigenen Toene tragen. Ein
   globales sage-deep wuerde auch die Fusszeilenlinks umfaerben, und #3c7059 auf
   #1f2c27 ist unlesbar. Dunkle Abschnitte sind ausgenommen, dort gilt
   `.sec--dark a` aus base.css.
   Die Unterstreichung kommt zurueck, weil ein Textlink im Fliesstext sonst nur an
   der Farbe zu erkennen waere. */
.sec:not(.sec--dark) .wrap p a,
.sec:not(.sec--dark) .wrap li a,
.sec:not(.sec--dark) .wrap dd a { color: var(--sage-deep); }
.wrap p a, .wrap li a, .wrap dd a, .ptable__k a {
  text-decoration: underline; text-underline-offset: .18em;
}

.crumb { font-size: .78rem; color: var(--slate); padding-top: 1.6rem; }
/* Die Trefferflaeche war 14px hoch. Padding vergroessert sie auf 44px, das negative
   Margin haelt die Grundlinie exakt dort, wo sie vorher stand — die Optik aendert
   sich also nicht, nur die Treffbarkeit. */
.crumb a {
  text-decoration: none; display: inline-block;
  padding: .95rem .4rem; margin: -.95rem -.4rem;
  color: var(--sage-deep);
}
.crumb span { opacity: .6; margin: 0 .35rem; }

h1 {
  font-family: var(--display); font-weight: 400; letter-spacing: -.01em; line-height: 1.06;
  font-size: clamp(34px, 4.4vw, 58px); color: var(--slate-deep);
}

/* Deutsche Komposita sind laenger als jede Spalte. Gemessen: "Ernaehrungsberatung"
   ist bei 34px 367px breit und stand damit 25px ueber der 342px-Spalte des Handys
   hinaus — die Seite liess sich seitlich schieben. Silbentrennung loest das an der
   richtigen Stelle; das Umbrechen mitten im Wort bleibt nur die Notbremse, falls
   ein Browser keine Trennmuster fuer die Sprache hat. lang="de" steht im <html>,
   ohne das greift hyphens:auto nicht. */
h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
h2 {
  font-family: var(--display); font-weight: 400; line-height: 1.15;
  font-size: clamp(24px, 2.2vw, 34px); color: var(--slate-deep); margin-bottom: 1rem;
}
h3 { font-family: var(--display); font-weight: 400; font-size: 1.22rem; color: var(--slate-deep); margin-bottom: .4rem; }
.lead { margin-top: 1.4rem; font-size: 1.12em; color: var(--slate); }
p + p, p + ul, ul + p, h3 + p { margin-top: 1.1rem; }
/* Auch nach dem Faktenkasten, nicht nur nach einem Absatz: der Kasten ist ein div,
   und ohne diese Regel klebte die naechste Zwischenueberschrift direkt an ihm. */
.sec p + h3, .facts + h3 { margin-top: 2.4rem; }

ul { list-style: none; display: grid; gap: .7rem; margin-top: 1.2rem; }
ul li { position: relative; padding-left: 1.3rem; color: var(--slate); }
ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sage);
}
/* .creds aus base.css ist ebenfalls eine ul und traegt ihre Nachweise in einem
   eigenen Kasten mit Kante links. Ohne diese Zeile setzt die Basisregel darueber
   noch einen Punkt hinein. Gleiche Bauart wie .quals li::before weiter unten. */
.creds li::before { content: none; }

/* Faktenkasten. Alles darin ist gegen eine oeffentliche Quelle geprueft. */
.facts {
  margin-top: 1.6rem; padding: 1.4rem 1.5rem;
  background: rgba(107, 178, 155, .12); border: 1px solid rgba(107, 178, 155, .3);
  border-radius: var(--r-md);
}
.facts dl { display: grid; gap: .75rem; }
.facts dt { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-deep); }
.facts dd { color: var(--slate-deep); }
/* Die Quellenangabe ist kein Kleingedrucktes: sie ist der Beleg dafuer, dass die
   Zahlen darueber stimmen. 0.78rem waren 12,5px und damit zu klein zum Lesen. */
.facts__src { margin-top: 1.2rem; font-size: .87rem; line-height: 1.6; color: var(--slate); }

/* Nummerierte Ablauf-Schritte. Bewusst <ol class="steps">, nicht <ul>: die
   Basisregel oben stylt jede ul mit Punkt-Markern und wuerde sich beissen. */
.steps { list-style: none; counter-reset: s; display: grid; gap: 1.15rem; margin-top: 1.4rem; padding: 0; }
.steps li { position: relative; padding-left: 3.1rem; counter-increment: s; color: var(--slate); max-width: 62ch; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -0.15em;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--sage-deep); color: var(--cream);
  display: grid; place-items: center; font-weight: 600; font-size: .85rem;
}
.steps li strong { color: var(--slate-deep); }

/* Preisliste: eine Zeile je Angebot, Name links (verlinkt), Preis rechts. */
.ptable { display: grid; gap: .8rem; margin-top: 1.6rem; }
.ptable__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; padding: 1.05rem 1.3rem;
  background: rgba(107, 178, 155, .12); border: 1px solid rgba(107, 178, 155, .3);
  border-radius: var(--r-md);
}
.ptable__k { font-weight: 600; color: var(--slate-deep); }
.ptable__k a { color: inherit; }
.ptable__v { color: var(--slate-deep); white-space: nowrap; }
.ptable__s { flex-basis: 100%; font-size: .85rem; color: var(--slate); }

/* ---- Qualifikationen ----
   Jede Zeile ein Nachweis: Titel, Aussteller, Jahr. Die Jahreszahl steht rechts
   und bricht nicht um, damit die Spalte auch bei langen Ausstellernamen haelt. */
.quals { display: grid; gap: .9rem; margin-top: 1.5rem; list-style: none; padding: 0; }
.quals li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; padding: 1.05rem 1.3rem;
  background: rgba(107, 178, 155, .12); border: 1px solid rgba(107, 178, 155, .3);
  border-radius: var(--r-md);
}
.quals li::before { content: none; }          /* Basis-ul setzt sonst einen Punkt */
.quals__t { font-weight: 600; color: var(--slate-deep); }
.quals__y { color: var(--sage-deep); font-size: .85rem; white-space: nowrap; }
.quals__b { flex-basis: 100%; font-size: .88rem; color: var(--slate); }

/* ---- Urkunden ----
   Bewusst schmal und mit Rahmen: ein Dokument soll wie ein Dokument aussehen,
   nicht wie ein Deko-Bild. */
.certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; margin-top: 1.8rem; }
.cert { margin: 0; }
.cert img {
  width: 100%; border: 1px solid rgba(31, 44, 39, .16); border-radius: 6px;
  background: #fff; box-shadow: 0 2px 14px rgba(31, 44, 39, .08);
}
.cert figcaption { margin-top: .6rem; font-size: .82rem; line-height: 1.5; color: var(--slate); }

/* ---- Zweispalter Bild und Text (Vorlage 5.5 b) ----
   Verlangt .sec--wide am Abschnitt, sonst steht das Bild in der 680px-Lesespalte.
   Bilder: AVIF oder WebP, hoechstens 120 KB, width und height immer gesetzt,
   unterhalb der Falz zusaetzlich loading="lazy" und decoding="async". */
.split { display: grid; grid-template-columns: 0.85fr 1fr; gap: 4vw; align-items: center; }
.split__img img { width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow-soft); }
.split__text p { max-width: 52ch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2.4rem; } }

/* ---- Kartenreihe (Vorlage 5.5 c) ----
   Erbt .offer aus base.css. Die Karte braucht im Markup zwingend auch .glass:
   ohne sie faellt der Stacking-Context weg, den backdrop-filter aufmacht, und alle
   Kartenbilder rutschen hinter den Sektionshintergrund.
   Das Hintergrundbild kommt inline als --img und loest gegen DIESES Stylesheet
   auf, also url('../img/…'). Ein schlichtes url('img/…') landet bei /css/img/…
   und liefert 404. */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2vw; margin-top: 6vh; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* ---- CTA ----
   Immer der letzte Abschnitt vor der Fusszeile, immer .sec--sage, immer nur EIN
   Button. Zwei Buttons nebeneinander halbieren die Entscheidung. */
.cta { text-align: center; }
.cta h2 { margin-bottom: .8rem; }
.cta p { margin: 0 auto; color: var(--slate); }
.cta__b {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; margin-top: 1.8rem; padding: .95rem 2rem;
  background: var(--sage-deep); color: var(--cream); border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
.cta__b:hover { background: var(--slate-deep); }

/* ---- Risikosatz unter dem Knopf ----
   Angelegt am 17.08.2026. Vorher stand auf zehn von elf Seiten kein einziges
   "kostenlos" oder "unverbindlich" in der Naehe des Knopfes. Die Zusagen gab es
   durchaus, nur standen sie einen ganzen Abschnitt hoeher im Faktenkasten oder
   in den haeufigen Fragen. Der Zweifel kommt aber nicht dort, sondern in der
   halben Sekunde vor dem Klick, und dort war die Antwort nicht da.

   Bewusst KEIN neues Aussehen: derselbe Grauton wie .cta p, nur kleiner gesetzt,
   damit die Zeile eine Fussnote zum Knopf bleibt und ihm nicht die
   Aufmerksamkeit wegnimmt. Zwei gleich laute Elemente nebeneinander heben sich
   gegenseitig auf.

   max-width in ch statt rem, weil die Zeile nach etwa einem Satz umbrechen soll
   und nicht nach einer festen Pixelbreite. */
.cta__risk {
  margin: .9rem auto 0;
  max-width: 46ch;
  color: var(--slate);
  font-size: .82rem;
  line-height: 1.5;
  opacity: .85;
}

/* ================= KONTAKTFORMULAR =================
   Nur auf kontakt.html. Die neun anderen Seiten behalten .cta__b oben, deshalb
   bleiben diese Regeln getrennt statt sie zusammenzulegen.

   Warum nicht die Formularstile aus sections.css wiederverwendet: die lädt nur
   index.html. Ein zweites Stylesheet für alle Unterseiten zu laden, nur damit
   ein Formular auf EINER Seite passt, kostet mehr, als diese Zeilen wiegen. */
/* Nur auf kontakt.html: seit dem 19.08.2026 folgt das Formular direkt auf den
   Hero, ohne die drei Info-Bloecke davor. Das volle .hero-sub-Padding plus das
   volle .sec-Padding von #schreiben zusammen schoben das erste Eingabefeld
   ("Dein Name") im ersten Bildschirm exakt in die Zone des fixen Termin-Docks
   (siehe cta-dock in style.css/site.js, sichtbar ab dem ersten Bildschirm auf
   allen Unterseiten). Beide Regeln sind bewusst zusaetzliche Klassen bzw. eine
   ID-Regel, NICHT Aenderungen an .hero-sub oder .sec selbst: die traegt jede
   der anderen 14 Unterseiten mit, und dort besteht dieses Platzproblem nicht. */
.hero-sub--kompakt { padding-bottom: 3vh; }
@media (max-width: 900px) { .hero-sub--kompakt { padding-top: 10vh; padding-bottom: 2vh; } }
#schreiben { padding-top: clamp(32px, 4vw, 60px); }

.kf { max-width: 34rem; margin: 2.2rem auto 0; text-align: left; }

/* ---- Fortschrittspunkte ----
   Drei Punkte, keine Prozentleiste: es gibt keine getrennten Bildschirme, die
   Felder decken sich nur nacheinander auf. Eine Leiste haette eine Praezision
   vorgetaeuscht, die hier nicht existiert. Aktiv/erledigt schaltet kfProg() in
   kontakt.js, synchron zu denselben Bedingungen wie pruefeStufen(). */
.kf__prog { max-width: 34rem; margin: 0 auto 1.3rem; display: flex; gap: .5rem; }
.kf__dot {
  height: 6px; flex: 1; border-radius: 999px; background: rgba(63, 124, 103, .18);
  transition: background .3s ease;
}
.kf__dot.is-done { background: var(--sage-deep); }
.kf__dot.is-active { background: rgba(63, 124, 103, .5); }

/* ---- Schrittweises Aufdecken ----
   OHNE DIE ERSTE ZEILE BLEIBEN AUSGEBLENDETE STUFEN SICHTBAR, SOBALD JEMAND
   .kf__stufe ein display gibt. Genau dieser Fehler hat im August schon einmal
   die ganze Startseite lahmgelegt: .chk trug display:grid, und eine
   Autorenregel schlaegt die Browserregel [hidden]{display:none}. Die Zeile
   steht deshalb vorsorglich da und kostet nichts. */
.kf__stufe[hidden] { display: none; }

/* Aufblenden beim Erscheinen. Bewusst kurz und ohne Huepfen: das Feld soll
   auftauchen, nicht auf sich aufmerksam machen. Wer gerade tippt, wird sonst
   abgelenkt. */
@keyframes kfAuf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.kf__stufe--neu { animation: kfAuf .38s cubic-bezier(.22, 1, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .kf__stufe--neu { animation: none; }
}

.kf__f { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.kf__f > span {
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--slate);
}
.kf__f input, .kf__f textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r-md);
  border: 1px solid rgba(63, 80, 100, .22); background: rgba(255, 255, 255, .72);
  font-family: inherit; color: var(--ink); line-height: 1.5;
  /* 1rem, nicht kleiner: Safari auf dem iPhone zoomt beim Fokus in ein Feld
     die ganze Seite heran, sobald die Schrift unter 16px liegt. */
  font-size: 1rem;
}
.kf__f textarea { resize: vertical; min-height: 7rem; }
.kf__f input:focus-visible, .kf__f textarea:focus-visible {
  outline: 3px solid var(--sage-deep); outline-offset: 2px; border-color: var(--sage-deep);
}

/* Der Honigtopf. NICHT display:none — manche Bots erkennen das und lassen das
   Feld dann bewusst leer. Aus dem Bild geschoben wirkt zuverlässiger, und für
   Vorleseprogramme ist es über aria-hidden ohnehin weg. */
.kf__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.kf__ok {
  display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start;
  margin-top: .2rem; padding: .85rem .95rem; border-radius: var(--r-md);
  border: 1px solid rgba(63, 80, 100, .16); background: rgba(255, 255, 255, .5);
  cursor: pointer; min-height: 44px;
}
.kf__ok:hover { border-color: var(--sage-deep); }
.kf__ok input { width: 24px; height: 24px; margin: 0; accent-color: var(--sage-deep); cursor: pointer; }
.kf__ok input:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 2px; }
.kf__ok span { font-size: .8rem; line-height: 1.55; color: var(--slate); }
.kf__ok a { color: var(--sage-deep); text-decoration: underline; }

.kf__err {
  margin: 1rem 0 0; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: rgba(176, 58, 46, .1); border: 1px solid rgba(176, 58, 46, .35);
  font-size: .85rem; line-height: 1.5; color: #8d2f26;
}
.kf__err[hidden] { display: none; }

.kf__go {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; margin-top: 1.4rem; padding: .95rem 2rem;
  background: var(--sage-deep); color: var(--cream); border: 0; border-radius: 999px;
  font-family: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
  transition: background .35s ease;
}
.kf__go:hover { background: var(--slate-deep); }
.kf__go:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 3px; }
.kf__go[disabled] { opacity: .42; cursor: not-allowed; background: var(--slate-deep); }

.kf__done {
  max-width: 34rem; margin: 2.2rem auto 0; padding: 1.1rem 1.25rem; text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--sage-deep);
  background: rgba(255, 255, 255, .62);
  font-size: .95rem; line-height: 1.65; color: var(--slate);
}
.kf__done[hidden] { display: none; }
.kf__done:focus-visible { outline: 3px solid var(--sage-deep); outline-offset: 3px; }

.kf__alt {
  max-width: 34rem; margin: 1.4rem auto 0;
  font-size: .82rem; line-height: 1.6; color: var(--slate-soft);
}
.kf__alt a { color: var(--sage-deep); text-decoration: underline; }

/* ---- Kursplan (kurse.html) ----
   Patricks Vorlage ist ein Raster aus sechs Tagen mal 26 Halbstunden-Zeilen,
   von denen neun Zellen gefuellt sind. Als Tabelle nachgebaut waere das auf dem
   Handy unlesbar (sechs Spalten auf 390px) und zu 96 % leer. Deshalb nach Tagen
   gruppiert: nur die vier Tage, an denen ueberhaupt etwas stattfindet, jeder mit
   seinen Terminen untereinander. Gleiche Information, ein Bruchteil der
   Flaeche, auf jedem Geraet ohne Querscrollen lesbar.
   Angelegt am 21.08.2026. */
.kplan {
  display: grid; gap: 1.1rem; margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kplan__day {
  padding: 1.3rem 1.4rem;
  background: rgba(107, 178, 155, .12); border: 1px solid rgba(107, 178, 155, .3);
  border-radius: var(--r-md);
}
.kplan__name {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage-deep); margin-bottom: .95rem;
}
.kplan__list { list-style: none; display: grid; gap: .85rem; margin: 0; padding: 0; }
/* Der Kursplan ist eine ul und faengt sich damit zwei Regeln aus dieser Datei ein,
   die hier falsch sind: den Aufzaehlungspunkt aus `ul li::before` (gleiche Bauart
   wie die Ausnahme bei .creds weiter oben) und die Unterstreichung aus
   `.wrap li a`. Beides gilt fuer Fliesstextlisten, nicht fuer einen Terminplan in
   Karten — und auf der Startseite, wo sections.css ohne diese Grundregeln
   auskommt, sieht derselbe Baustein deshalb anders aus. Hier gleichgezogen
   (21.08.2026), damit Startseite und Unterseite identisch bleiben. */
.kplan__list li { padding-left: 0; }
.kplan__list li::before { content: none; }
.wrap .kplan__list a.kplan__kurs { text-decoration: none; }
/* Die Uhrzeit ist der Anker, nach dem man scannt: eigene Zeile, tabellarische
   Ziffern, damit 09:00 und 17:30 exakt untereinander stehen. */
.kplan__time {
  display: block; font-variant-numeric: tabular-nums;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--slate);
}
.kplan__kurs {
  display: inline-block; font-weight: 600; color: var(--slate-deep);
  border-bottom: 1px solid transparent; transition: border-color .25s ease;
}
.kplan__kurs:hover { border-bottom-color: var(--sage-deep); }
.kplan__min { display: block; font-size: .82rem; color: var(--slate-soft); }

/* Der Vorbehalt. Steht bewusst NICHT im Kleingedruckten: solange Stadt und GEMA
   nicht freigegeben haben, ist jede Uhrzeit auf dieser Seite eine Absicht und
   keine Zusage, und das muss lesen, wer sich etwas einplant. */
.khinweis {
  margin-top: 1.6rem; padding: 1rem 1.25rem;
  border-left: 3px solid var(--sage-deep); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(107, 178, 155, .14);
  font-size: .92rem; line-height: 1.65; color: var(--slate);
}
.khinweis strong { color: var(--slate-deep); }

/* ---- Buchen-Knopf direkt unter dem Kursplan (21.08.2026) ----
   Zwilling zu .kurse-sec__cta in sections.css. Der grosse Knopf am Seitenende
   reicht nicht: wer den Plan gelesen hat, will dort buchen, nicht erst an vier
   Kursbeschreibungen vorbeiscrollen. Bewusst kein zweiter fixierter Balken —
   .cta-dock steht auf dem Handy schon unten. */
.kplan-cta { max-width: 1180px; margin: 2.4rem auto 0; text-align: center; }
.kplan-cta__b {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 60px; padding: 1.15rem 3rem; border-radius: 999px;
  background: var(--sage-deep); color: var(--cream);
  font-size: .92rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 38px rgba(20, 44, 34, .28);
  transition: background .35s ease;
}
.kplan-cta__b i { font-style: normal; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.kplan-cta__b:hover { background: var(--slate-deep); }
.kplan-cta__b:hover i { transform: translateX(4px); }
.kplan-cta .cta__risk { margin-top: .9rem; }
@media (max-width: 560px) {
  .kplan-cta__b { width: 100%; padding: 1.15rem 1.4rem; font-size: .86rem; }
}

/* ---- Zusagen unter dem Absendeknopf (21.08.2026) ----
   Bis dahin trug ausgerechnet die Kontaktseite, also die Seite mit der hoechsten
   Kaufabsicht, am Knopf selbst keine einzige Zusage. Die Zeile ist bewusst die
   Fussnote zum Knopf und nicht sein Konkurrent: kleiner Grad, ruhige Farbe. */
.kf__zusagen {
  margin-top: .9rem;
  font-size: .78rem; line-height: 1.6; color: var(--slate); opacity: .9;
}