/*
 * Karriere-Check (kc). Aus einer Feder mit dem Kursfinder: Flaeche getoent, ein
 * gerahmter weisser Kasten, Antworten als native Radios mit der Optik auf dem Label.
 * Nur Tokens. Orange 300 ist Flaeche der gewaehlten Antwort, nie Textfarbe auf Weiss.
 *
 * Ohne JavaScript: alle Fragen untereinander, Submit-Knopf sichtbar, Fortschritt und
 * Weiter/Zurueck bleiben `hidden`. Mit JavaScript (Klasse kc--js) eine Frage je Ansicht.
 */
/* overflow:hidden, weil das Hintergrundbild-Pseudoelement aus shared.css (min-width 1400px)
   zwischen 768 und 1399px sonst horizontal ueber den Rand laeuft. Gemessen im Pruefstand bei 1199px. */
/* hidden gewinnt gegen jede eigene display-Regel: sonst stehen Zurueck/Weiter schon bei Frage 1 (Audit 09.09.2026). */
.kc [hidden]{display:none !important}
.kc{background-color:var(--bg-color,var(--background-light-beige));padding:96px 0;overflow-x:clip;scroll-margin-top:calc(var(--hh,64px) + 74px)}
@media (max-width:900px){
  .kc{padding:52px 0}
}
.kc__kasten{background:var(--background-white);border:1px solid var(--background-borders);border-radius:32px;padding:clamp(28px,4.2vw,64px)}
/* Browser-Oberflaechen aus der Palette: Textauswahl, Cursor, Fokusring, Ziffern. */
.kc ::selection{background:var(--orange-200);color:var(--typography-black)}
.kc{caret-color:var(--primary-400)}
.kc a:focus-visible,.kc button:focus-visible{outline:2px solid var(--typography-black);outline-offset:3px;border-radius:4px}
.kc .button:focus-visible{border-radius:24px}
.kc__fortschritt,.kc__meta,.kc__frage-nr{font-variant-numeric:tabular-nums}

/* Kopf */
/* Fragenzustand: Kasten als 58/42-Raster wie die Ergebnis-Buehne, links Kopf und Fragen, rechts der statische Freisteller. */
.kc__wurzel:not(.kc--ergebnis) .kc__kasten{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:0;padding:0;overflow:hidden;min-height:640px}
.kc__fragen-spalte{padding:clamp(32px,4.5vw,64px) 40px clamp(32px,4.5vw,64px) clamp(28px,4.5vw,64px);box-sizing:border-box;min-width:0}
.kc__quiz-bild-spalte{position:relative;display:block;align-self:stretch;min-height:640px}
.kc__quiz-bild{position:absolute;inset:0;width:100%;height:100%;max-width:none;padding:40px 24px 0;box-sizing:border-box;object-fit:contain;object-position:50% 100%}
.kc--ergebnis .kc__fragen-spalte{display:contents}
.kc--ergebnis .kc__quiz-bild-spalte{display:none}
@media (max-width:900px){
  .kc__wurzel:not(.kc--ergebnis) .kc__kasten{grid-template-columns:1fr;min-height:0}
  .kc__fragen-spalte{padding:28px 20px 32px}
  .kc__quiz-bild-spalte{display:none}
}
.kc__kopf{text-align:left;max-width:60ch;margin:0}
.kc__h2{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h1);line-height:1.15;color:var(--typography-black);margin:0;text-wrap:balance}
.kc__intro{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);margin:14px 0 0}
.kc__meta{font-family:var(--font4);font-weight:500;font-size:14px;line-height:1.4;color:var(--typography-dark-grey);margin:12px 0 0}

/* Fortschritt: Zeile plus nativer <progress>, Farbe ueber accent-color. */
.kc__quiz{margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3.2vw,40px);border-top:1px solid var(--background-borders)}
.kc__stand{display:flex;flex-direction:column;gap:8px;margin:0 0 28px}
.kc__fortschritt{font-family:var(--font4);font-weight:600;font-size:14px;line-height:1.4;color:var(--typography-black);margin:0}
.kc__progress{width:100%;height:8px;border:0;border-radius:999px;overflow:hidden;background:var(--background-light-beige);accent-color:var(--primary-400)}
.kc__progress::-webkit-progress-bar{background:var(--background-light-beige);border-radius:999px}
.kc__progress::-webkit-progress-value{background:var(--primary-400);border-radius:999px}
.kc__progress::-moz-progress-bar{background:var(--primary-400);border-radius:999px}

/* Fragen */
.kc__fragen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:32px}
.kc__frage{outline:none}
.kc__feld{border:0;margin:0;padding:0;min-width:0}
.kc__frage-text{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h3);line-height:1.25;color:var(--typography-black);margin:0 0 6px;padding:0;display:flex;gap:12px;align-items:baseline}
.kc__frage-nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--orange-200);font-family:var(--font4);font-weight:600;font-size:14px;color:var(--typography-black);transform:translateY(-3px)}
.kc__frage-hinweis{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.5;color:var(--typography-dark-grey);margin:0 0 6px 44px}

/* Antworten: eine Spalte, jede Antwort eine Karte mit 44px Mindesthoehe. Das Radio
   bleibt im DOM und fokussierbar, die Optik liegt auf dem Label (Muster kv__pille). */
.kc__antworten{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0 0 44px}
@media (max-width:620px){
  .kc__antworten,.kc__frage-hinweis{margin-left:0}
}
.kc__antwort{position:relative;display:flex;align-items:center;min-height:56px;padding:14px 18px;border:1px solid var(--background-borders);border-radius:20px;background:var(--background-white);font-family:var(--font4);font-size:16px;line-height:1.4;color:var(--typography-black);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.kc__antwort input{position:absolute;width:1px;height:1px;opacity:0}
/* Der Zustand haengt nicht allein an der Farbe: ein Ring, der sich beim Waehlen fuellt.
   Reine Geometrie, kein Icon. */
.kc__antwort::before{content:"";flex:0 0 auto;width:20px;height:20px;margin-right:14px;border:2px solid var(--background-borders);border-radius:50%;background:var(--background-white);transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.kc__antwort:hover{background:var(--orange-100);border-color:var(--orange-200)}
.kc__antwort:hover::before{border-color:var(--primary-400)}
.kc__antwort:has(input:checked){background:var(--primary-300);border-color:var(--primary-300)}
.kc__antwort:has(input:checked)::before{border-color:var(--typography-black);background:var(--typography-black);box-shadow:inset 0 0 0 4px var(--primary-300)}
.kc__antwort:has(input:focus-visible){outline:2px solid var(--typography-black);outline-offset:3px}
/* B2: kein font-weight beim Waehlen mehr (liess lange Antworten umbrechen, Kastenhoehe sprang).
   Der gewaehlte Zustand steht schon ueber Flaeche, Kontur und gefuelltem Ring. Diese Regel hatte
   hoehere Spezifitaet als .kc__antwort:has(input:checked) oben und griff unabhaengig von
   :has()-Unterstuetzung -- deshalb komplett gestrichen, nicht nur die :has()-Zeile. */
@media (prefers-reduced-motion:reduce){
  .kc__antwort,.kc__antwort::before,.kc__progress::-webkit-progress-value{transition:none}
}

/* Insight: ein Satz nach der Wahl, Beige-Kachel, kein Icon. */
.kc__insight{margin:12px 0 0 44px;padding:12px 16px;border-radius:12px;background:var(--orange-100);font-family:var(--font4);font-size:16px;line-height:1.5;color:var(--typography-black)}
@media (max-width:620px){
  .kc__insight{margin-left:0}
}

/* Navigation */
.kc__nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:34px}
.kc__zurueck,.kc__neustart,.kc__aendern{background:none;border:0;min-height:44px;display:inline-flex;align-items:center;padding:0;font-family:var(--font4);font-size:var(--schrift-16);color:var(--typography-black);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--background-borders);cursor:pointer}
.kc__zurueck:hover,.kc__neustart:hover,.kc__aendern:hover{text-decoration-color:var(--primary-300)}
.kc__weiter,.kc__absenden{margin-left:auto}
.kc__weiter:disabled{opacity:.45;cursor:not-allowed}
.kc__weiter-sperre{font-family:var(--font4);font-size:14px;line-height:1.4;color:var(--typography-dark-grey);margin:0}
.kc__noscript{font-family:var(--font4);font-size:14px;color:var(--typography-dark-grey);margin:14px 0 0}

/* Ergebnis-Karte: Text links, Motiv rechts, unter 900px gestapelt (Motiv zuerst). */
.kc__ergebnisse{margin-top:clamp(26px,3vw,34px)}
.kc__profil{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,3vw,40px);align-items:start;padding:clamp(22px,3vw,36px);border-radius:20px;background:var(--background-light-beige)}
.kc__profil[hidden]{display:none}
@media (max-width:900px){
  .kc__profil{grid-template-columns:1fr}
  /* B-mobil: kein order:-1 mehr, siehe die ausfuehrliche Begruendung bei .kc--ergebnis weiter
     unten -- diese Regel hier gilt (ohne .kc--ergebnis-Vorbedingung) fuer dieselben Elemente
     und hatte das order:-1 der spezifischeren Regel unbemerkt wiederhergestellt. */
}
.kc__eyebrow{font-family:var(--font8);font-weight:400;font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--typography-dark-grey);margin:0 0 8px}
.kc__profil-titel{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h2);line-height:1.15;color:var(--typography-black);margin:0;text-wrap:balance}
.kc__profil-absatz{font-family:var(--font4);font-size:16px;line-height:1.6;color:var(--typography-dark-grey);margin:14px 0 0;max-width:58ch}
/* object-position oben: Hochformat-Freisteller (Pfleger.png, 1080x1350) verlieren beim
   4:3-Zuschnitt sonst den Kopf. Gemessen auf Stage, 08.09.2026. */
.kc__profil-bild{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 12%;border-radius:20px}
/* Freisteller: Motiv sitzt unten an der Kartenkante, kein Zuschnitt, kein Radius (Regel:
   Freisteller an einer Kante verankert, nie schwebend). Fotos behalten den 4:3-Schnitt. */
.kc__profil--freisteller{padding-bottom:0;align-items:end}
.kc__profil--freisteller .kc__profil-text-spalte{padding-bottom:clamp(22px,3vw,36px)}
.kc__profil--freisteller .kc__profil-bild-spalte{align-self:end;display:flex;justify-content:center}
.kc__profil--freisteller .kc__profil-bild{aspect-ratio:auto;object-fit:contain;object-position:50% 100%;border-radius:0;max-height:440px;width:auto;max-width:100%}
@media (max-width:900px){
  .kc__profil--freisteller .kc__profil-bild{max-height:320px}
}
.kc__kurse-hinweis{font-family:var(--font4);font-size:16px;line-height:1.55;color:var(--typography-black);margin:22px 0 0;padding:14px 18px;border-radius:12px;background:var(--background-white)}
/* Haken wie in der Kursfinder-Nutzenzeile, damit die Form nur einmal auf der Seite existiert. */
.kc__kurse-titel{font-family:var(--font4);font-weight:600;font-size:var(--schrift-16);line-height:1.4;color:var(--typography-black);margin:32px 0 12px}
.kc__kurse{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:560px}
/* Textlinks statt Tabellenzeilen: die Liste ist die Auffangspur, das Panel darunter der naechste Schritt. */
.kc__kurse a{display:flex;flex-direction:column;gap:3px;padding:2px 0;border:0;border-radius:0;background:none;font-family:var(--font4);font-size:16px;line-height:1.4;color:var(--typography-black);text-decoration:none}
.kc__kurs-titel{font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--background-borders);transition:text-decoration-color .15s ease}
.kc__kurs-hinweis{font-size:14px;line-height:1.5;color:var(--typography-dark-grey)}
.kc__kurse a:hover .kc__kurs-titel{text-decoration-color:var(--primary-400)}
/* CTA als Panel (Muster .kv__karte--berater): eine Flaeche, ein Knopf, Hinweis direkt darunter. */
.kc__cta{margin-top:32px;padding:24px;border-radius:20px;background:var(--orange-100)}
.kc__cta-satz{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h4);line-height:1.3;color:var(--typography-black);margin:0 0 16px;max-width:30ch;text-wrap:balance}
.kc__cta .button{margin:0}
.kc__cta-hinweis{font-family:var(--font4);font-size:14px;line-height:1.5;color:var(--typography-dark-grey);margin:12px 0 0;max-width:46ch}
/* Tertiaere Aktionen: eine leise Zeile unter dem Button, gleich gestaltet, mit Mittelpunkt getrennt. */
.kc__aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;margin-top:24px;padding-top:18px;border-top:1px solid var(--background-borders)}
.kc__aktionen:not(:has(button:not([hidden]))){display:none}
.kc__neustart,.kc__aendern{margin:0;font-size:14px;color:var(--typography-dark-grey)}

/* Sanfte Enthuellung, 300 ms, ohne Bewegung bei reduced-motion. */
.kc--js .kc__profil--aktiv{animation:kc-reveal .3s ease-out}
@keyframes kc-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .kc--js .kc__profil--aktiv{animation:none}
}

/* Offene Uebersicht aller Typen = die Karriereleiter der Seite. Immer sichtbar, als
   Kartenraster statt Pillen-Schalter (Konzept 12 verbietet dauerhaft versteckte
   Tab-Inhalte; die alten .kc__weg-pille/-panel/-bild-spalte-Regeln sind ersatzlos raus). */
.kc__wege{margin-top:clamp(56px,7vw,96px)}
.kc__wege-titel{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h2);line-height:1.15;color:var(--typography-black);margin:0;text-align:center;text-wrap:balance}
.kc__wege-lead{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);margin:12px auto 0;max-width:60ch;text-align:center}
.kc__wege-box{margin-top:36px}

/* Kartenmuster uebernommen aus frontend/src/styles/components/_post-card.scss und
   _selected-posts.scss (.selected-posts__list .post-card): weisse Karte, Hairline
   --background-borders, Radius 20, Bild randlos oben ohne eigenen Radius, nur EINE
   Erhebung (Hairline, kein Schatten). Drei Spalten, ab 900px zwei, ab 620px eine. */
.kc__wege-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){
  .kc__wege-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .kc__wege-karten{grid-template-columns:1fr}
}
.kc__weg-karte{display:flex;flex-direction:column;min-width:0;background:var(--background-white);border:1px solid var(--background-borders);border-radius:20px;overflow:hidden}
.kc__weg-karte:focus-within{outline:2px solid var(--typography-black);outline-offset:3px}
/* Auffangkarte 15.09.2026 (Denis: 'sieht lieblos aus'). Sie ist kein Weg, sondern der
   Ausweg, und braucht deshalb kein Foto. Statt eines leeren Bildbereichs traegt sie die
   ganze Flaeche in Orange 100, der Text steht mittig und der Titel so gross wie die
   Kartentitel daneben. Ein Scribble waere hier falsch: in einem 16:9-Feld laesst es sich
   nicht regelkonform anschneiden, es wuerde entweder schweben oder zur Farbflaeche.
   Denis setzt es bei Bedarf von Hand. */
.kc__weg-karte--still{background:var(--orange-100,#FDF1D7);border-color:var(--orange-200,#FAE0B0)}
.kc__weg-karte--still .kc__weg-karte-text{justify-content:center;gap:12px;padding:32px 28px}
.kc__weg-karte--still .kc__weg-karte-titel{font-size:var(--schrift-h3)}
.kc__weg-karte--still .kc__weg-karte-satz{color:var(--typography-black);font-size:16px}
.kc__weg-karte--still .kc__weg-karte-links{margin-top:20px;padding-top:0}
.kc__weg-karte-bild-spalte{aspect-ratio:16/9;background:var(--background-light-beige)}
.kc__weg-karte-bild{display:block;width:100%;height:100%;object-fit:cover}
.kc__weg-karte-text{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.kc__weg-karte-titel{font-family:var(--font3);font-weight:400;font-size:var(--schrift-h4);line-height:1.25;color:var(--typography-black);margin:0}
.kc__weg-karte-satz{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.55;color:var(--typography-dark-grey);margin:0}
.kc__weg-karte-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;padding-top:16px}
/* padding explizit, weil das Theme li{padding-left:1.5rem} setzt. */
.kc__fragen li,.kc__kurse li{margin:0;padding-left:0}
/* Tertiaerlink wie im Theme (Denis 09.09.: Textlinks raus, dafuer den Tertiaer-Button):
   seit 23.09.2026 der echte Theme-Button (button button_transparent icon-bg-yellow),
   keine eigene .tlink-Kopie mehr. Nur noch Layout-Abstand. */
.kc__cta-neben{margin-top:14px}
/* Liste der gewaehlten Richtungen (Zustand 'mehrere'/'eine'): kleine Karten in Weiss auf der
   beigen Ergebnisflaeche, wie .kc__insight/.kc__kurse-hinweis. Keine Richtung hervorgehoben. */
.kc__richtungsliste{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.kc__richtungsliste-item{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;background:var(--background-white)}
.kc__richtungsliste-titel{font-family:var(--font4);font-weight:600;font-size:16px;line-height:1.4;color:var(--typography-black)}
.kc__richtungsliste-taetigkeit{font-family:var(--font4);font-size:14px;line-height:1.5;color:var(--typography-dark-grey)}

/* Mit JavaScript: eine Frage je Ansicht, Submit versteckt (Weiter uebernimmt). */
.kc--js .kc__frage:not(.kc__frage--aktiv){display:none}
.kc--js .kc__absenden{display:none}
.kc--js .kc__frage{scroll-margin-top:calc(var(--hh,64px) + 24px)}

/* Ergebnis-Zustand: der Kasten wird zur Buehne (Denis 09.09.2026: kleine Figur, viel Leerflaeche). */
.kc--ergebnis .kc__kasten{padding:0;overflow:hidden}
.kc--ergebnis .kc__kopf{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.kc--ergebnis .kc__ergebnisse{margin-top:0}
.kc--ergebnis .kc__profil{grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:0;min-height:580px;padding:0;border-radius:0;background:transparent;align-items:stretch}
.kc--ergebnis .kc__profil-text-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-text-spalte{max-width:660px;padding:clamp(32px,4.5vw,64px) 40px clamp(32px,4.5vw,64px) clamp(28px,4.5vw,64px);box-sizing:border-box}
.kc--ergebnis .kc__profil-bild-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-bild-spalte{position:relative;display:block;min-height:640px;align-self:stretch}
.kc--ergebnis .kc__profil-bild{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 20%;border-radius:0}
.kc--ergebnis .kc__profil--freisteller .kc__profil-bild{inset:0;width:100%;height:100%;max-height:none;max-width:none;padding:40px 24px 0;box-sizing:border-box;object-fit:contain;object-position:50% 100%}
.kc--ergebnis .kc__profil-titel{font-size:var(--schrift-h1);line-height:1.1}
.kc--ergebnis .kc__cta{display:block}
@media (max-width:900px){
  .kc--ergebnis .kc__profil{grid-template-columns:1fr;min-height:0}
  /* B-mobil: kein order:-1 mehr -- das mobile Ergebnis beginnt mit Ueberschrift/Begruendung
     (DOM-Reihenfolge Text-Spalte vor Bild-Spalte), das Motiv folgt darunter. */
  .kc--ergebnis .kc__profil-bild-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-bild-spalte{min-height:0;height:320px;background:var(--background-light-beige)}
  .kc--ergebnis .kc__profil--freisteller .kc__profil-bild{padding:20px 16px 0;object-position:50% 100%}
  .kc--ergebnis .kc__profil-text-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-text-spalte{padding:22px 20px 24px;max-width:none}
}

/* Audit 09.09.2026, angepasst 15.09.2026 (Bauplan 3.5): Antwort-Spiegel steht seither in
   ALLEN Ergebniszustaenden wieder, das dreht die 09.09-Entscheidung "zu viel Text" um. */
.kc__fehler{font-family:var(--font4);font-size:var(--schrift-16);line-height:1.5;color:var(--typography-black);margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--orange-100)}
/* Leittext der gemeinsamen Zustaende 'mehrere'/'eine'/'offen' (kein Eyebrow, keine Kurzzeile
   davor, deshalb etwas praesenter als der optionale .kc__profil-absatz der Schwerpunkt-Karte). */
.kc__profil-lead{font-family:var(--font4);font-size:var(--schrift-20);line-height:1.6;color:var(--typography-dark-grey);margin:14px 0 0;max-width:58ch}
/* Ergebniskarte entschlackt (Denis 09.09.: zu viel Text, zu viele Klickziele): der lange
   Absatz der Schwerpunkt-Karte bleibt im Markup (Zustand ohne JS, Felder), ist aber im
   Ergebnis aus. cta_satz und der Spiegel sind seit 15.09.2026 wieder Teil des Ergebnisses. */
/* Der Absatz war im Ergebnis versteckt, weil davor noch Lead, Haken-Liste und
   Spiegel standen. Nach dem Entschlacken vom 15.09. ist er der EINZIGE erklaerende
   Satz der Karte und muss sichtbar sein. Nur die Lesehilfe .kc__sr bleibt versteckt. */
.kc--ergebnis .kc__sr{display:none}
.kc--ergebnis .kc__profil-absatz{font-size:var(--schrift-20);line-height:1.6;color:var(--typography-black);margin:18px 0 0;max-width:44ch}
/* Die passenden Weiterbildungen bleiben in der Karte (Denis 09.09.), aber als Tertiaer-Buttons ohne Untertexte. */
.kc--ergebnis .kc__kurse-titel{margin:34px 0 4px}
.kc--ergebnis .kc__kurse{gap:2px}
.kc--ergebnis .kc__kurse a{flex-direction:row;align-items:center;gap:12px;min-height:44px;padding:0;font-weight:400;font-size:var(--schrift-16);line-height:1.4}
.kc--ergebnis .kc__kurs-titel{font-weight:400;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--border-warm,#E4D6C4)}
/* B9: Versalien gehoeren nur Buttons und kurzen Text-Link-CTAs, nicht dem Fliesshinweis. */
.kc--ergebnis .kc__kurs-hinweis{text-transform:none}
.kc--ergebnis .kc__kurse a:hover .kc__kurs-titel{text-decoration-color:var(--primary-400)}
.kc--ergebnis .kc__cta{margin-top:36px}
.kc--ergebnis .kc__aktionen{border-top:0;padding-top:0;margin-top:18px}
.kc__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kc__profil-titel:focus{outline:none}
@media (max-width:620px){
  .kc__cta{padding:20px}
  .kc__cta-satz{font-size:var(--schrift-20)}
  .kc__cta .button{width:100%;justify-content:center}
  .kc__aktionen{flex-direction:column;align-items:flex-start;gap:4px 0}
}

/* =====================================================================================
   TYP- UND ABSTANDSSYSTEM 09.09.2026 (Design-Director-Audit, Denis: "zusammengestaucht").
   Sieben Typstufen: 50/56 H2, 37/44 H3, 24/36 Lead, 20/32 Fliesstext, 20/28 Listen, 14/20 Meta,
   Buttons versal. Alle Abstaende auf dem 8-Punkt-Raster. Beide Kasten-Zustaende im selben 7/5-Raster,
   Hoehe aus dem Inhalt, Bildspalte auf Beige. Diese Regeln stehen bewusst am Ende und ueberschreiben
   die krummen Werte weiter oben; beim Umzug ins Theme werden sie zusammengefuehrt.
   ===================================================================================== */
.kc{padding:96px 0}
.kc__wurzel:not(.kc--ergebnis) .kc__kasten{grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:0}
.kc__fragen-spalte{padding:64px 56px 64px 64px}
.kc__quiz-bild-spalte{min-height:0;background:var(--background-light-beige)}
.kc__quiz-bild{padding:48px 32px 0}
/* Foto statt Freisteller (Denis 09.09.: leere Flaeche ueber dem Freisteller, Beige-Block in der Umrandung): randlos, cover. */
.kc__quiz-bild-spalte--foto{background:none}
.kc__quiz-bild-spalte--foto .kc__quiz-bild{padding:0;object-fit:cover;object-position:50% 30%}
.kc__kopf{max-width:none;margin:0 0 40px}
/* Kopf steht ueber dem Kasten (Denis 09.09.); im Kasten beginnt die Fragen-Spalte direkt mit dem Fortschritt. */
.kc__quiz{margin-top:0;padding-top:0;border-top:0}
.kc__fragen-spalte{padding:48px 56px 48px 64px}
.kc__intro{max-width:55ch}
.kc__h2{font-size:50px;line-height:56px;max-width:20ch}
.kc__intro{font-size:24px;line-height:36px;margin:24px 0 0;max-width:34ch}
.kc__meta{font-size:14px;line-height:20px;margin:16px 0 0}
.kc__quiz{margin-top:40px;padding-top:32px}
.kc__stand{margin:0 0 32px;gap:8px}
.kc__fortschritt{font-size:14px;line-height:20px}
.kc__frage-text{font-size:37px;line-height:44px;margin:0 0 8px;align-items:center}
.kc__frage-hinweis{font-size:20px;line-height:28px;margin:0 0 8px 44px}
.kc__antworten{gap:12px;margin:24px 0 0 44px;max-width:560px}
.kc__antwort{font-size:20px;line-height:28px;padding:16px 20px}
.kc__insight{margin:16px 0 0 44px;padding:24px;font-size:20px;line-height:32px}
.kc__nav{margin-top:40px}
.kc__zurueck,.kc__neustart{font-size:14px;line-height:20px}
.kc__noscript{margin:16px 0 0}
/* Ergebnis: identischer Rahmen wie der Fragenzustand */
.kc--ergebnis .kc__profil{grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:0}
.kc--ergebnis .kc__profil-text-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-text-spalte{max-width:none;padding:64px 56px 64px 64px}
.kc--ergebnis .kc__profil-bild-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-bild-spalte{min-height:0;background:var(--background-light-beige)}
.kc--ergebnis .kc__profil--freisteller .kc__profil-bild{padding:48px 32px 0}
.kc__eyebrow{font-size:14px;margin:0 0 12px}
.kc--ergebnis .kc__profil-titel{font-size:50px;line-height:56px}
.kc--ergebnis .kc__kurse-titel{margin:40px 0 12px;font-size:14px;line-height:20px}
.kc--ergebnis .kc__kurse{gap:8px}
.kc--ergebnis .kc__cta{margin-top:40px;padding:32px}
.kc__cta-hinweis{font-size:14px;line-height:20px;margin:16px 0 0}
.kc--ergebnis .kc__aktionen{margin-top:24px}
/* Wege-Kopf: eine Achse (links) am Desktop, Kartenraster darunter. */
.kc__wege{margin-top:96px}
.kc__wege-titel{font-size:50px;line-height:56px;text-align:left;max-width:20ch}
.kc__wege-lead{font-size:24px;line-height:36px;margin:24px 0 0;max-width:55ch;text-align:left}
.kc__wege-box{margin-top:40px}
@media (max-width:1199px){
  .kc{padding:72px 0}
  .kc__fragen-spalte,.kc--ergebnis .kc__profil-text-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-text-spalte{padding:40px 32px 40px 40px}
  .kc__wege{margin-top:72px}
}
@media (max-width:900px){
  .kc__fragen-spalte,.kc--ergebnis .kc__profil-text-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-text-spalte{padding:32px 20px 40px}
  .kc__h2,.kc__wege-titel,.kc--ergebnis .kc__profil-titel{font-size:28px;line-height:32px}
  .kc__intro,.kc__wege-lead{font-size:var(--schrift-20);line-height:28px;margin-top:16px}
  .kc__frage-text{font-size:var(--schrift-h4);line-height:28px}
  .kc__frage-hinweis,.kc__antwort,.kc__insight{font-size:var(--schrift-16);line-height:28px}
  .kc__antworten{margin-left:0;max-width:none}
  .kc__frage-hinweis,.kc__insight{margin-left:0}
  .kc--ergebnis .kc__cta{padding:24px;margin-top:32px}
}
@media (max-width:767px){
  .kc{padding:56px 0}
  .kc__wege{margin-top:56px}
}
@media (max-width:620px){
  .kc__kasten,.kc__wurzel:not(.kc--ergebnis) .kc__kasten{border-radius:20px}
}
/* B7: unter 360px ragte die Antwortkarte ueber den Viewport (bei 320px rechte Kante bei 329px,
   overflow-x:clip verbarg es). Linker Einzug ist unter 900px bereits auf 0, hier zusaetzlich die
   Kartenpolsterung schmaler, damit auch 320px sauber ist. */
@media (max-width:360px){
  .kc__antwort{padding:16px 14px}
}
/* Kopf zentriert wie die Abschnittskoepfe des Themes (Denis 09.09.: Text zentriert). */
.kc__kopf{text-align:center;margin:0 auto 40px}
.kc__h2{margin-left:auto;margin-right:auto;max-width:24ch}
.kc__intro{margin-left:auto;margin-right:auto;max-width:60ch}
/* Wege-Kopf zentriert wie der Check-Kopf. */
.kc__wege-titel{text-align:center;margin-left:auto;margin-right:auto;max-width:24ch}
.kc__wege-lead{text-align:center;margin-left:auto;margin-right:auto;max-width:60ch}
.kc__wege-box{margin-top:48px}

/* Punkt 4b (LOOP RUNDE 3 10.09.2026): 66px Polster: Check-Sektion oben auf 72px (bei 1440
   bringt das 24px naeher, bei 390 die fehlenden 14px). */
@media (min-width:901px){
  .kc{padding-top:72px;padding-bottom:96px}
}
@media (max-width:900px){
  .kc{padding-top:72px;padding-bottom:56px}
}

/* =====================================================================================
   LOOP RUNDE 2 10.09.2026, Punkt 1: Fragen-Kasten steht am Handy in zwei Spalten, obwohl
   die Bildspalte ausgeblendet ist. Ursache: der Override-Block "TYP- UND ABSTANDSSYSTEM
   09.09.2026" wiederholt weiter oben in dieser Datei `grid-template-columns:minmax(0,7fr)
   minmax(0,5fr)` OHNE eigene Media Query und schlaegt damit die Mobilregel aus der Zeile
   `@media (max-width:900px){.kc__wurzel:not(.kc--ergebnis) .kc__kasten{grid-template-
   columns:1fr}}` aus, weil er spaeter in derselben Datei steht. Gemessen bei 390px:
   207.656px Fragenspalte, 148.328px leere Bildspalte. Hier gezielt zurueckgesetzt, die
   Mobilregel selbst bleibt unveraendert stehen.
   ===================================================================================== */
@media (max-width:900px){
  .kc__wurzel:not(.kc--ergebnis) .kc__kasten{grid-template-columns:1fr}
}

/* Punkt 7: Erste Frage bei 1440px stand bei 2021px, weil vor ihr Sektionspolster 96,
   H2 (50/56), Intro (24/36), 40px Kopfabstand und 48px Kastenpolster liegen. Der von der
   Direktion genannte Zielwert 1400px war bei erhaltenem Spiegel (840px) nicht erreichbar
   (Hero+Eckdaten+Sprungnav+Spiegel allein ergeben schon 1545px); realistisches Ziel ist
   unter 1900px. Zwei Griffe: Kopfabstand 40 -> 24px, Kastenpolster oben 48 -> 32px. */
.kc__kopf{margin-bottom:24px}
.kc__fragen-spalte{padding-top:32px}

/* =====================================================================================
   LOOP RUNDE 3 10.09.2026, Punkt 1: Ergebniskarte bricht am Handy nicht um. Derselbe Fehler
   wie Runde 2 Punkt 1, eine Zeile darueber im Block "TYP- UND ABSTANDSSYSTEM": Zeile 306
   wiederholt `grid-template-columns:minmax(0,7fr) minmax(0,5fr)` fuer `.kc--ergebnis
   .kc__profil` OHNE Media Query und schlaegt damit die Mobilregel bei max-width:900px aus
   (Zeile 233), Zeile 307 tut dasselbe mit dem Innenabstand der Textspalte. Gemessen bei
   390px: Textspalte 148px, nutzbarer Text 108px, CTA-Knopf 60px breit mit ueberlaufendem
   Label, Tertiaerlinks abgeschnitten. Werte 1:1 aus Zeile 233/236 uebernommen, nichts Neues.
   Die Bildspalte behaelt ihre Mobilwerte aus Zeile 234 (damals order:-1, height:320px), weil
   Zeile 308 nur min-height und background setzt, nicht order/height -- gegengeprueft.
   Nachtrag 15.09.2026 (B-mobil): order:-1 ist seither entfernt, das mobile Ergebnis beginnt
   mit der Aussage statt mit dem Motiv; height:320px gilt unveraendert weiter. */
@media (max-width:900px){
  .kc--ergebnis .kc__profil{grid-template-columns:1fr}
  .kc--ergebnis .kc__profil-text-spalte,.kc--ergebnis .kc__profil--freisteller .kc__profil-text-spalte{padding:22px 20px 24px;max-width:none}
}

/* =====================================================================================
   ABNAHME-RUNDE 10.09.2026 (Denis auf Stage): keine Hoehenspruenge, Ergebnis wie Fragen,
   Fortschritt und Nummer in der Primaerfarbe, Kurslinks nebeneinander.
   ===================================================================================== */
/* 1. Fragen stapeln in EINER Rasterzelle: der Kasten ist immer so hoch wie die laengste Frage,
      inaktive Fragen bleiben im Fluss, nur unsichtbar. Insights aller Antworten teilen sich eine Zeile. */
.kc--js .kc__fragen{display:grid;grid-template-columns:minmax(0,1fr)}
.kc--js .kc__frage{grid-row:1;grid-column:1}
.kc--js .kc__frage:not(.kc__frage--aktiv){display:block;visibility:hidden;pointer-events:none}
.kc--js .kc__feld{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
.kc--js .kc__frage-hinweis{grid-row:1;grid-column:1}
.kc--js .kc__antworten{grid-row:2;grid-column:1}
.kc--js .kc__insight{grid-row:3;grid-column:1}
.kc--js .kc__insight[hidden]{display:block !important;visibility:hidden}
/* 2. Fortschritt: Leiste in CI-Gelb, Nummer im Kreis in der Primaerfarbe. */
.kc__progress{appearance:none;-webkit-appearance:none;color:var(--primary-300);accent-color:var(--primary-300)}
.kc__progress::-webkit-progress-value{background:var(--primary-300)}
.kc__progress::-moz-progress-bar{background:var(--primary-300)}
.kc__frage-nr{background:var(--primary-300)}
/* 3. Ergebnis: Kopf bleibt stehen, rechts dasselbe randlose Foto wie bei den Fragen. */
.kc--ergebnis .kc__kopf{position:static;width:auto;height:auto;margin:0 auto 40px;padding:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;border:0}
.kc--ergebnis .kc__profil-bild-spalte--foto,.kc--ergebnis .kc__profil--freisteller .kc__profil-bild-spalte--foto{background:none;display:block;align-self:stretch}
.kc--ergebnis .kc__profil-bild-spalte--foto .kc__profil-bild,.kc--ergebnis .kc__profil--freisteller .kc__profil-bild-spalte--foto .kc__profil-bild{position:absolute;inset:0;width:100%;height:100%;max-height:none;max-width:none;padding:0;object-fit:cover;object-position:50% 30%;border-radius:0}
/* 4. Kurslinks nebeneinander statt untereinander (weniger Hoehe), Bauteil bleibt der Tertiaerlink. */
.kc--ergebnis .kc__kurse{display:flex;flex-wrap:wrap;gap:8px 32px}
@media (max-width:900px){
  .kc--ergebnis .kc__profil-bild-spalte--foto,.kc--ergebnis .kc__profil--freisteller .kc__profil-bild-spalte--foto{height:320px;background:none}
}
/* Navigation haengt per JS in der aktiven Frage (vierte Rasterzeile), nicht mehr unter dem Leerraum. */
.kc--js .kc__feld .kc__nav{grid-row:4;grid-column:1;margin-top:32px}
/* Reihenfolge Antworten -> Weiter -> Hinweis; die Nav-Zeile ist in JEDER Frage reserviert (sonst schwankt der Kasten um die Nav-Hoehe). */
.kc--js .kc__feld{grid-template-rows:auto auto minmax(76px,auto) auto}
.kc--js .kc__feld .kc__nav{grid-row:3;margin-top:24px}
.kc--js .kc__insight{grid-row:4}

/* FESTE BUEHNE 15.09.2026 (Denis: das Feld soll nicht springen).
   Der Ueberschreibungsblock vom 09.09. hatte min-height wieder auf 0 gesetzt, deshalb
   wuchs der Kasten mit dem Inhalt und sprang beim Wechsel von den Fragen ins Ergebnis
   sowie zwischen den vier Ergebnisarten. Ab 901 px liegt eine gemeinsame Hoehe fest (gemessen bei 1440: hoechste Frage 878,
   hoechstes Ergebnis 884, bei 1024 braucht der Fragenkasten 954, deshalb 960);
   darunter stapeln die Spalten ohnehin, dort waere eine feste Hoehe nur Leerraum. */
@media (min-width:901px){
  .kc__wurzel:not(.kc--ergebnis) .kc__kasten{min-height:960px}
  /* Die Ergebnisarten liegen gestapelt in derselben Rasterzelle, wie die Fragen es schon
     tun: dann bestimmt die hoechste die Hoehe und der Wechsel zwischen Schwerpunkt,
     mehreren Richtungen und offen bewegt nichts. Sonst haengt die Hoehe an der Zahl der
     Kurslinks. Die nicht gewaehlten bleiben im Fluss, aber unsichtbar und ohne Fokus. */
  .kc--ergebnis .kc__ergebnisse{display:grid}
  .kc--ergebnis .kc__profil{grid-area:1/1;min-height:960px}
  .kc--ergebnis .kc__profil[hidden]{display:grid;visibility:hidden;pointer-events:none}
  /* Die Buehne ist hoeher als die kuerzeste Karte. Ohne Zentrierung klebt der Text oben
     und darunter klafft die Reserve, die die feste Hoehe braucht. */
  .kc--ergebnis .kc__profil-text-spalte{display:flex;flex-direction:column;justify-content:center}
}