/* ===========================================================================
   Praxisportal — Oberfläche im kbs-Erscheinungsbild.

   Gestaltungsregeln aus dem Design-System:
   · Gelb ist Fläche und Linie, niemals Schriftfarbe auf Weiß.
   · Alle Ecken eckig. Kreise nur für Punkte und Marker.
   · Tiefe entsteht durch Haarlinien und die 6px-Gelblinie, nicht durch Schatten.
   · Großbuchstaben nur in der Navigation.
   =========================================================================== */

/* ---------------------------------------------------------------- Grundriss */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { display: flex; flex-direction: column; min-height: 100vh; }

.huelle {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.huelle--schmal { max-width: var(--container-narrow); }

main { flex: 1 0 auto; padding: var(--space-9) 0 var(--space-11); }

.sprungmarke {
  position: absolute; left: -9999px;
  background: var(--kbs-ink); color: var(--text-inverse);
  padding: var(--space-3) var(--space-5); z-index: 100;
}
.sprungmarke:focus { left: var(--space-4); top: var(--space-4); }

/* -------------------------------------------------------------------- Kopf */
.kopf { background: var(--surface-page); border-bottom: var(--rule-height) solid var(--rule-brand-strong); }
.kopf__inhalt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-5) 0; flex-wrap: wrap;
}
.kopf__marke { display: flex; align-items: center; gap: var(--space-4); border: 0; }
.kopf__marke:hover { border: 0; }
/* Bewusst eine gelbe Fläche und kein Punkte-Zeichen: die vier Punkte sind das
   geschützte kbs-Markenzeichen und dürfen nicht nachgebaut werden. Wer das
   Original einsetzen möchte, legt es als public/img/kbs-logo.png ab. */
.kopf__flaeche { width: 34px; height: 34px; background: var(--kbs-yellow); flex: none; }
.kopf__wort { display: flex; flex-direction: column; line-height: 1.05; }
.kopf__wort b {
  font: var(--fw-din-extrabold) 25px/1 var(--font-display);
  color: var(--kbs-grey-800); letter-spacing: -0.01em;
}
.kopf__wort span {
  font: var(--fw-din-regular) var(--text-2xs) / 1.3 var(--font-display);
  color: var(--text-muted); letter-spacing: var(--tracking-wide); margin-top: 3px;
}

.navi { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.navi a {
  font: var(--type-nav); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-body); border-bottom: var(--rule-height) solid transparent;
  padding-bottom: 6px; transition: var(--transition-hover);
}
.navi a:hover { color: var(--kbs-ink); border-bottom-color: var(--rule-brand); }
.navi a.ist-aktiv { color: var(--kbs-ink); border-bottom-color: var(--rule-brand-strong); }
.navi__trenner { width: 1px; height: 22px; background: var(--border-hairline); }
.navi__person { font: var(--type-body-sm); color: var(--text-muted); }

/* -------------------------------------------------------------------- Fuß */
.fuss {
  flex: none; background: var(--surface-subtle);
  border-top: var(--border-width) solid var(--border-hairline);
  padding: var(--space-8) 0; margin-top: auto;
}
.fuss__inhalt {
  display: flex; justify-content: space-between; gap: var(--space-6);
  flex-wrap: wrap; font: var(--type-body-sm); color: var(--text-muted);
}
.fuss a { color: var(--text-muted); }

/* ------------------------------------------------------------- Seitenkopf */
.seitenkopf { margin-bottom: var(--space-8); }
.seitenkopf__marke {
  font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted); display: block; margin-bottom: var(--space-3);
}
.seitenkopf h1 { font: var(--type-display); color: var(--kbs-ink); }
.seitenkopf__unter { font-size: var(--text-md); color: var(--text-muted); margin-top: var(--space-3); max-width: 70ch; }
.seitenkopf__linie { height: var(--rule-height); background: var(--rule-brand-strong); width: 120px; margin-top: var(--space-5); }

.abschnitt { margin-bottom: var(--space-10); }
.abschnitt__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  border-bottom: var(--rule-height) solid var(--rule-brand);
  padding-bottom: var(--space-3); margin-bottom: var(--space-6);
}
/* Deutlicher Sprung von Überschrift zu Fließtext: 34px gegen 17px.
   Vorher lagen beide zu dicht beieinander, nichts führte das Auge. */
.abschnitt__kopf h2 { color: var(--kbs-ink); font-size: var(--text-2xl); }
@media (max-width: 640px) { .abschnitt__kopf h2 { font-size: var(--text-xl); } }
.abschnitt__hinweis { font: var(--type-body-sm); color: var(--text-muted); }

/* ------------------------------------------------------------------ Raster */
.raster { display: grid; gap: var(--space-6); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.raster--seitlich { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
@media (max-width: 900px) { .raster--seitlich { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Karten */
.karte { background: var(--surface-card); border: var(--border-card); padding: var(--card-pad); }
.karte--eng { padding: var(--card-pad-tight); }
.karte--gelb { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--text-on-brand); }
.karte--gelb h1, .karte--gelb h2, .karte--gelb h3, .karte--gelb h4 { color: var(--text-on-brand); }
.karte--gelb a { color: var(--text-on-brand); border-bottom-color: rgba(44, 46, 53, 0.35); }
.karte--gelb a:hover { border-bottom-color: var(--kbs-ink); }
.karte--sanft { background: var(--surface-brand-soft); border-color: var(--kbs-yellow-tint-strong); }
.karte--dunkel { background: var(--surface-ink); border-color: var(--surface-ink); color: var(--text-inverse); }
.karte--dunkel h1, .karte--dunkel h2, .karte--dunkel h3 { color: var(--text-inverse); }
.karte--dunkel a { color: var(--kbs-yellow); border-bottom-color: rgba(255, 217, 0, 0.5); }
.karte--flaeche { background: var(--surface-subtle); border-color: var(--surface-subtle); }
.karte__linie { height: var(--rule-height); background: var(--rule-brand-strong); margin: var(--card-pad) calc(var(--card-pad) * -1) calc(var(--card-pad) * -1); }
.karte__titel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }

.kennzahl { display: block; }
.kennzahl__wert { font: var(--fw-din-extrabold) var(--text-3xl) / 1 var(--font-display); color: var(--kbs-ink); }
.kennzahl__wert small { font: var(--fw-din-demi) var(--text-md) / 1 var(--font-display); color: var(--text-muted); }
.kennzahl__text {
  font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted); margin-top: var(--space-3); display: block;
}

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--fw-bold) var(--text-sm) / 1 var(--font-sans);
  padding: 13px var(--space-6); border: var(--border-width-thick) solid transparent;
  background: var(--action-primary-bg); color: var(--action-primary-text);
  cursor: pointer; border-radius: 0; transition: var(--transition-hover);
  text-align: center; text-decoration: none;
}
.knopf:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-text); border-color: transparent; }
.knopf:active { background: var(--action-primary-bg-active); }
.knopf:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.knopf[disabled], .knopf.ist-gesperrt {
  background: var(--action-disabled-bg); color: var(--action-disabled-text); cursor: not-allowed;
}
.knopf--zweit {
  background: transparent; color: var(--action-secondary-text);
  border-color: var(--action-secondary-border);
}
.knopf--zweit:hover { background: var(--action-secondary-bg-hover); color: var(--kbs-ink); border-color: var(--kbs-grey-700); }
.knopf--still { background: transparent; border-color: transparent; color: var(--text-muted); padding-left: 0; padding-right: 0; }
.knopf--still:hover { background: transparent; color: var(--kbs-ink); }
.knopf--gefahr { background: transparent; color: var(--status-err); border-color: var(--kbs-grey-300); }
.knopf--gefahr:hover { background: var(--status-err-bg); color: var(--status-err); border-color: var(--status-err); }
.knopf--klein { font-size: var(--text-xs); padding: 8px var(--space-4); }
.knopf--breit { width: 100%; justify-content: center; }
.knopfreihe { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ Marken */
.marke {
  display: inline-block; font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); padding: 5px 10px;
  background: var(--surface-subtle); color: var(--text-strong); white-space: nowrap;
}
.marke--gelb { background: var(--kbs-yellow); color: var(--kbs-ink); }
.marke--sanft { background: var(--kbs-yellow-tint); color: var(--kbs-ink); }
.marke--dunkel { background: var(--kbs-ink); color: var(--text-inverse); }
.marke--rand { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
.marke--ok { background: var(--status-ok-bg); color: var(--status-ok); }
.marke--warn { background: var(--status-warn-bg); color: var(--status-warn); }
.marke--err { background: var(--status-err-bg); color: var(--status-err); }
.markenreihe { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Hinweise */
.hinweis {
  display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  border-left: var(--rule-height) solid var(--rule-brand-strong);
  background: var(--surface-subtle); margin-bottom: var(--space-4);
  font: var(--type-body-sm);
}
.hinweis--erfolg { background: var(--status-ok-bg); border-left-color: var(--status-ok); color: var(--status-ok); }
.hinweis--fehler { background: var(--status-err-bg); border-left-color: var(--status-err); color: var(--status-err); }
.hinweis--info { background: var(--kbs-yellow-tint); border-left-color: var(--kbs-yellow); color: var(--kbs-ink); }
.hinweisbereich { margin-bottom: var(--space-6); }

.merker {
  padding: var(--space-4) var(--space-5); background: var(--kbs-yellow-tint);
  border-left: var(--rule-height) solid var(--kbs-yellow);
  font: var(--type-body-sm); color: var(--kbs-ink); margin-bottom: var(--space-6);
}
.merker strong { color: var(--kbs-ink); }

/* --------------------------------------------------------------- Formulare */
.feld { margin-bottom: var(--space-5); }
.feld > label, .feld__beschriftung {
  display: block; font: var(--fw-bold) var(--text-sm) / 1.3 var(--font-sans);
  color: var(--text-strong); margin-bottom: var(--space-2);
}
.feld__hilfe { font: var(--type-caption); font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="file"], select, textarea {
  width: 100%; font: var(--type-body); color: var(--text-strong);
  background: var(--surface-page); border: var(--border-width) solid var(--border-strong);
  padding: 11px var(--space-4); border-radius: 0; transition: var(--transition-hover);
}
textarea { min-height: 130px; resize: vertical; line-height: var(--leading-relaxed); font-family: var(--font-sans); }
input:hover, select:hover, textarea:hover { border-color: var(--kbs-grey-700); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--kbs-grey-700);
}
input[type="file"] { padding: var(--space-3); background: var(--surface-subtle); cursor: pointer; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--kbs-grey-700) 50%),
                    linear-gradient(135deg, var(--kbs-grey-700) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: var(--space-9);
}

.wahl { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); cursor: pointer; }
.wahl input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--kbs-yellow-deep); }
.wahl span { font: var(--type-body-sm); }
.wahl strong { display: block; }

.wahlkarte {
  display: flex; gap: var(--space-4); align-items: flex-start;
  border: var(--border-card); padding: var(--space-4) var(--space-5); cursor: pointer;
  margin-bottom: var(--space-3); transition: var(--transition-hover); background: var(--surface-page);
}
.wahlkarte:hover { border-color: var(--kbs-grey-700); }
.wahlkarte input { margin-top: 3px; flex: none; accent-color: var(--kbs-yellow-deep); }
.wahlkarte:has(input:checked) { border-color: var(--kbs-ink); background: var(--kbs-yellow-tint); }

.feldreihe { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* --------------------------------------------------------------- Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }
.tabelle th {
  text-align: left; font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted);
  padding: var(--space-3) var(--space-4); border-bottom: var(--border-width-thick) solid var(--kbs-grey-400);
  white-space: nowrap;
}
.tabelle td { padding: var(--space-4); border-bottom: var(--border-width) solid var(--border-hairline); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--surface-subtle); }
.tabelle--fest { table-layout: fixed; }
.tabellenrahmen { overflow-x: auto; border: var(--border-card); background: var(--surface-card); }
.tabelle__zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -------------------------------------------------------------- Zeitstrahl */
.zeitstrahl { list-style: none; margin: 0; padding: 0; }
.zeitstrahl__eintrag {
  display: grid; grid-template-columns: 84px 1fr; gap: var(--space-5);
  padding: var(--space-5) 0; border-bottom: var(--border-width) solid var(--border-hairline);
  margin: 0;
}
.zeitstrahl__eintrag:last-child { border-bottom: 0; }
.zeitstrahl__nr {
  font: var(--fw-din-extrabold) var(--text-2xl) / 1 var(--font-display);
  color: var(--kbs-grey-400); text-align: right;
}
.zeitstrahl__nr small {
  display: block; font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-top: 6px;
}
.zeitstrahl__eintrag--praxis .zeitstrahl__nr { color: var(--kbs-yellow-deep); }
.zeitstrahl__eintrag--pruefung .zeitstrahl__nr { color: var(--kbs-ink); }
.zeitstrahl__eintrag--jetzt { background: var(--kbs-yellow-tint); }
.zeitstrahl__kopf { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--space-2); }
.zeitstrahl__titel { font: var(--type-h3); color: var(--kbs-ink); }
.zeitstrahl__datum { font: var(--type-body-sm); color: var(--text-muted); }
.zeitstrahl__text { font: var(--type-body-sm); color: var(--text-body); margin: 0; max-width: 78ch; }
@media (max-width: 640px) {
  .zeitstrahl__eintrag { grid-template-columns: 56px 1fr; gap: var(--space-4); }
  .zeitstrahl__nr { font-size: var(--text-xl); }
}

/* ------------------------------------------------------- Sprechstunde
   Soll auffallen, ohne die Marke zu verlassen: eine gelbe Fläche, harte
   Kanten, Text in Ink. Ist die Sprechstunde gerade offen, wechselt die
   Fläche auf Ink mit gelbem Puls — dann ist sie das Auffälligste der Seite. */
.sprechstunde { background: var(--surface-brand); color: var(--text-on-brand); padding: var(--card-pad); }
.sprechstunde--offen { background: var(--surface-ink); color: var(--text-inverse); }
.sprechstunde__kopf { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.sprechstunde__punkt {
  width: 12px; height: 12px; border-radius: var(--radius-pill); flex: none;
  background: rgba(44, 46, 53, .35);
}
.sprechstunde--offen .sprechstunde__punkt { background: var(--kbs-yellow); animation: pulsieren 2.4s ease-in-out infinite; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sprechstunde__punkt { animation: none !important; } }
.sprechstunde__zustand {
  font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.sprechstunde--offen .sprechstunde__zustand { color: var(--kbs-yellow); }
.sprechstunde h3 { color: inherit; margin-bottom: var(--space-2); }
.sprechstunde__zeit {
  font: var(--fw-din-extrabold) var(--text-xl) / 1.1 var(--font-display);
  display: block; margin-bottom: var(--space-4);
}
.sprechstunde p { font: var(--type-body-sm); }
.sprechstunde--offen p { color: rgba(255, 255, 255, .85); }
.sprechstunde .knopf { background: var(--kbs-ink); color: var(--text-inverse); }
.sprechstunde .knopf:hover { background: #14161c; color: var(--text-inverse); }
.sprechstunde--offen .knopf { background: var(--kbs-yellow); color: var(--kbs-ink); }
.sprechstunde--offen .knopf:hover { background: var(--kbs-yellow-deep); color: var(--kbs-ink); }
.sprechstunde__fein { font-size: var(--text-2xs); opacity: .7; margin: var(--space-3) 0 0; }

/* --------------------------------------------------------- Fortschritt
   Beantwortet die Frage, die eine Orientierungsseite beantworten muss:
   Wo stehe ich gerade? */
.stand {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-6);
  align-items: center; padding: var(--card-pad-tight) var(--card-pad);
  background: var(--surface-ink); color: var(--text-inverse);
}
.stand__jetzt { display: flex; align-items: baseline; gap: var(--space-3); }
.stand__nummer { font: var(--fw-din-extrabold) var(--text-3xl) / 1 var(--font-display); color: var(--kbs-yellow); }
.stand__text { font: var(--type-body-sm); color: rgba(255, 255, 255, .85); }
.stand__text b { color: var(--kbs-white); display: block; font-size: var(--text-base); }
.stand__balken { height: 10px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.stand__balken i { display: block; height: 100%; background: var(--kbs-yellow); }
.stand__zahl { text-align: right; white-space: nowrap; }
.stand__zahl b { font: var(--fw-din-extrabold) var(--text-xl) / 1 var(--font-display); color: var(--kbs-white); }
.stand__zahl span { display: block; font-size: var(--text-2xs); color: rgba(255, 255, 255, .6); margin-top: 4px; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
@media (max-width: 760px) {
  .stand { grid-template-columns: 1fr; gap: var(--space-4); }
  .stand__zahl { text-align: left; }
}

/* ------------------------------------------------------- Verlauf (Raster)
   Module als Zeilen, Blockwochen als Spalten. Damit wird der Rhythmus der
   Weiterbildung auf einen Blick sichtbar: Unterricht, Unterricht,
   Praxiswoche, Prüfung. */
.verlauf { overflow-x: auto; padding-bottom: var(--space-3); }
.verlauf__gitter {
  display: grid;
  grid-template-columns: 116px repeat(var(--wochen, 18), minmax(46px, 1fr));
  gap: 3px;
  min-width: 980px;
}
.verlauf__ecke { }
.verlauf__woche {
  text-align: center; padding: var(--space-2) 0 var(--space-3);
  border-bottom: var(--border-width-thick) solid var(--kbs-grey-300);
}
.verlauf__woche b {
  display: block; font: var(--fw-din-demi) var(--text-sm) / 1 var(--font-display); color: var(--text-strong);
}
.verlauf__woche span { display: block; font-size: 9px; color: var(--text-muted); margin-top: 3px; letter-spacing: .02em; }
.verlauf__woche--jetzt { border-bottom-color: var(--kbs-yellow); background: var(--kbs-yellow-tint); }
.verlauf__woche--jetzt b { color: var(--kbs-ink); }

.verlauf__modul {
  display: flex; flex-direction: column; justify-content: center;
  padding-right: var(--space-3); border-right: var(--border-width) solid var(--border-hairline);
}
.verlauf__modul b { font: var(--fw-din-extrabold) var(--text-md) / 1 var(--font-display); color: var(--kbs-ink); }
.verlauf__modul span { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
a.verlauf__modul, a.verlauf__modul:hover { border-bottom: 0; }

.verlauf__feld {
  min-height: 42px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font: var(--fw-din-demi) 10px/1.1 var(--font-display);
  background: var(--kbs-grey-100); color: var(--text-muted);
  border: var(--border-width) solid transparent;
}
.verlauf__feld--leer { background: transparent; border-color: transparent; }
/* Die laufende Spalte durchgehend hervorheben — auch dort, wo nichts steht.
   Erst dadurch liest man die Spalte als „hier stehe ich gerade". */
.verlauf__feld--spalte-jetzt.verlauf__feld--leer { background: var(--kbs-yellow-tint); }
.verlauf__woche--jetzt { position: relative; }
.verlauf__woche--jetzt::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 5px solid var(--kbs-ink);
}
.verlauf__marke {
  grid-column: 2 / -1; display: flex; align-items: center; gap: var(--space-3);
  font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted); padding-bottom: var(--space-2);
}
.verlauf__feld--unterricht { background: var(--kbs-grey-100); border-color: var(--kbs-grey-200); color: var(--text-body); }
.verlauf__feld--praxis { background: var(--kbs-yellow); color: var(--kbs-ink); }
.verlauf__feld--pruefung { background: var(--kbs-ink); color: var(--text-inverse); }
.verlauf__feld b { font-weight: var(--fw-din-extrabold); font-size: 11px; }
.verlauf__feld small { font-size: 9px; opacity: .75; margin-top: 1px; }
.verlauf__extern {
  width: 5px; height: 5px; border-radius: var(--radius-pill);
  background: var(--kbs-yellow-deep); margin-top: 3px;
}
.verlauf__feld--praxis .verlauf__extern,
.verlauf__feld--pruefung .verlauf__extern { background: currentColor; }

/* Zusammenfassende Zeile eines aufklappbaren Moduls */
.modulzeile { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.modulzeile__code {
  font: var(--fw-din-extrabold) var(--text-lg) / 1 var(--font-display);
  color: var(--kbs-ink); min-width: 62px; flex: none;
}
.modulzeile > span { font-weight: var(--fw-regular); color: var(--text-strong); }
.modulzeile small {
  display: block; font-weight: var(--fw-regular); color: var(--text-muted);
  font-size: var(--text-xs); margin-top: 3px;
}
@media (max-width: 700px) {
  .aufklappen > summary { flex-wrap: wrap; }
  .modulzeile { gap: var(--space-3); }
}

.legende { display: flex; gap: var(--space-5); flex-wrap: wrap; font: var(--type-body-sm); color: var(--text-muted); }
.legende > span { display: flex; align-items: center; gap: var(--space-2); }
.legende i { width: 18px; height: 18px; display: inline-block; flex: none; font-style: normal; }
.legende i.u { background: var(--kbs-grey-100); border: 1px solid var(--kbs-grey-200); }
.legende i.p { background: var(--kbs-yellow); }
.legende i.x { background: var(--kbs-ink); }
.legende i.e { background: var(--kbs-yellow-deep); border-radius: var(--radius-pill); width: 10px; height: 10px; }

/* ------------------------------------------------------------- Modulkarten */
.modulkarte { display: flex; flex-direction: column; background: var(--surface-card); border: var(--border-card); }
.modulkarte:hover { border-color: var(--kbs-grey-700); }
.modulkarte__kopf { padding: var(--card-pad-tight) var(--card-pad-tight) var(--space-4); }
.modulkarte__code { font: var(--fw-din-extrabold) var(--text-2xl) / 1 var(--font-display); color: var(--kbs-ink); }
.modulkarte__art {
  font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted); display: block; margin-bottom: var(--space-2);
}
.modulkarte__titel { font: var(--type-h3); color: var(--kbs-ink); margin-top: var(--space-3); }
.modulkarte__leiste {
  margin-top: auto; display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--card-pad-tight);
  border-top: var(--border-width) solid var(--border-hairline);
  font: var(--type-body-sm); color: var(--text-muted); flex-wrap: wrap;
}
.modulkarte__linie { height: var(--rule-height); background: var(--rule-brand-strong); }
.modulkarte__linie--grau { background: var(--kbs-grey-300); }
a.modulkarte, a.modulkarte:hover { border-bottom: 0; }

/* ---------------------------------------------------------------- Aufgaben */
.aufgabe { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-5); align-items: start; }
@media (max-width: 700px) { .aufgabe { grid-template-columns: 1fr; } }
.aufgabe__nr {
  font: var(--fw-din-extrabold) var(--text-3xl) / 0.9 var(--font-display); color: var(--kbs-yellow-deep);
}
.aufgabe__nr small {
  display: block; font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-top: 6px;
}
.aufgabe__titel { font: var(--type-h2); color: var(--kbs-ink); }
.aufgabe__unter { font: var(--type-body-sm); color: var(--text-muted); margin-top: 2px; }

.baustein { border: var(--border-card); background: var(--surface-card); margin-bottom: var(--space-5); }
.baustein__kopf {
  display: grid; grid-template-columns: 60px 1fr; gap: var(--space-5);
  padding: var(--card-pad-tight); background: var(--surface-subtle);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.baustein__kennung {
  font: var(--fw-din-extrabold) var(--text-2xl) / 1 var(--font-display);
  color: var(--kbs-ink); background: var(--kbs-yellow);
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
}
.baustein__titel { font: var(--type-h3); color: var(--kbs-ink); }
.baustein__meta { font: var(--type-body-sm); color: var(--text-muted); margin-top: 2px; }
.baustein__koerper { padding: var(--card-pad-tight); }
.baustein__leitfrage {
  border-left: var(--rule-height) solid var(--rule-brand-strong);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  margin-bottom: var(--space-5); font-size: var(--text-md); color: var(--kbs-ink);
}
.baustein__leitfrage b {
  display: block; font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-bottom: var(--space-2);
}

/* --------------------------------------------------------- Sprungleiste
   Bleibt beim Scrollen oben stehen. Auf einer Seite, die über mehrere
   Bildschirmhöhen geht, ist das der Unterschied zwischen Übersicht und
   Verlorengehen. */
.sprungleiste {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface-page);
  border-bottom: var(--rule-height) solid var(--rule-brand);
  margin-bottom: var(--space-8);
  overflow-x: auto;
}
.sprungleiste__inhalt { display: flex; gap: var(--space-5); padding: var(--space-4) 0; white-space: nowrap; }
.sprungleiste a {
  font: var(--type-nav); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted); border-bottom: 3px solid transparent; padding-bottom: 5px;
  transition: var(--transition-hover);
}
.sprungleiste a:hover { color: var(--kbs-ink); border-bottom-color: var(--rule-brand); }
.sprungleiste a.ist-aktiv { color: var(--kbs-ink); border-bottom-color: var(--rule-brand-strong); }
/* Sprungziele nicht unter die Leiste rutschen lassen */
[id^="baustein-"], #worum, #pruefung, #unterlagen, #ablauf { scroll-margin-top: 84px; }

/* ------------------------------------------------- Bausteine im Überblick */
.stufen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.stufe {
  display: block; border: var(--border-card); background: var(--surface-card);
  padding: var(--card-pad-tight); transition: var(--transition-hover);
}
a.stufe, a.stufe:hover { border-bottom: var(--border-width) solid var(--border-hairline); }
a.stufe:hover { border-color: var(--kbs-grey-700); }
.stufe__kopf { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.stufe__kennung {
  width: 34px; height: 34px; flex: none; background: var(--kbs-yellow); color: var(--kbs-ink);
  display: flex; align-items: center; justify-content: center;
  font: var(--fw-din-extrabold) var(--text-md) / 1 var(--font-display);
}
.stufe__titel { font: var(--fw-bold) var(--text-sm) / 1.25 var(--font-sans); color: var(--kbs-ink); }
.stufe__produkt { font-size: var(--text-xs); color: var(--text-body); }
.stufe__produkt b { display: block; font: var(--type-label); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-bottom: 4px; }
.stufe__umfang { font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-3); }

/* ------------------------------------------------- Bereit zum Absenden? */
.checkstand { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.checkstand li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) 0; border-bottom: var(--border-width) solid rgba(255, 255, 255, .15);
  font: var(--type-body-sm);
}
.checkstand li:last-child { border-bottom: 0; }
.checkstand__zeichen {
  flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font: var(--fw-din-extrabold) 12px/1 var(--font-display); margin-top: 1px;
}
.checkstand__zeichen--fertig { background: var(--kbs-yellow); color: var(--kbs-ink); }
.checkstand__zeichen--offen { border: var(--border-width-thick) solid var(--kbs-grey-500); color: transparent; }
.checkstand li.ist-offen { opacity: .75; }

/* ------------------------------------------------------------ Textformate */
.md-h { color: var(--kbs-ink); margin: var(--space-6) 0 var(--space-3); font-size: var(--text-md); font-weight: var(--fw-bold); }
.md-h:first-child { margin-top: 0; }
.md-liste { padding-left: var(--space-6); }
.md-liste li { margin-bottom: var(--space-2); }
.fliesstext { max-width: 78ch; }
.fliesstext p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Dateien */
.datei {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border: var(--border-card); margin-bottom: var(--space-3);
  background: var(--surface-card);
}
.datei__symbol {
  flex: none; width: 44px; height: 44px; background: var(--surface-subtle);
  display: flex; align-items: center; justify-content: center;
  font: var(--fw-din-demi) var(--text-2xs) / 1 var(--font-display);
  text-transform: uppercase; color: var(--text-strong); letter-spacing: 0.04em;
}
.datei__symbol--gelb { background: var(--kbs-yellow); color: var(--kbs-ink); }
.datei__inhalt { flex: 1; min-width: 0; }
.datei__name { font-weight: var(--fw-bold); color: var(--text-strong); word-break: break-word; }
.datei__meta { font: var(--type-caption); font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.datei__aktion { flex: none; display: flex; gap: var(--space-2); align-items: center; }

/* ------------------------------------------------------------- Fortschritt */
.balken { height: 10px; background: var(--kbs-grey-200); overflow: hidden; }
.balken__wert { height: 100%; background: var(--kbs-yellow); }
.balken__wert--voll { background: var(--kbs-ink); }

/* --------------------------------------------------------------- Checkbox */
.pruefliste { list-style: none; padding: 0; margin: 0; }
.pruefliste li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border-hairline);
  font: var(--type-body-sm);
}
.pruefliste li:last-child { border-bottom: 0; }
.pruefliste__kasten {
  flex: none; width: 18px; height: 18px; border: var(--border-width-thick) solid var(--kbs-grey-400);
  margin-top: 3px;
}

/* ------------------------------------------------------ Argumentation
   Aufklappbarer Block auf der Praxisaufgaben-Seite: begründet den Wert der
   Praxiswochen gegenüber Teilnehmenden und deren Einrichtungsleitungen.
   Zugeklappt belegt er eine Zeile — die Seite bleibt aufgeräumt. */
.aussage {
  font: var(--fw-light) clamp(21px, 2.4vw, 30px) / 1.25 var(--font-sans);
  color: var(--kbs-ink); max-width: 30ch;
  border-left: var(--rule-height) solid var(--rule-brand-strong);
  padding-left: var(--space-6); margin: 0;
}

.argumente { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.argumente li {
  display: grid; grid-template-columns: 38px 1fr; gap: var(--space-4);
  padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--border-hairline);
}
.argumente li:last-child { border-bottom: 0; }
.argumente__nr {
  font: var(--fw-din-extrabold) var(--text-md) / 1.3 var(--font-display);
  color: var(--kbs-yellow-deep);
}
.argumente h4 { font-size: var(--text-base); color: var(--kbs-ink); margin-bottom: var(--space-2); }
.argumente p { margin: 0; font-size: var(--text-sm); }

/* ------------------------------------------------------------ Anmeldeseite */
.anmeldung { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 900px) { .anmeldung { grid-template-columns: 1fr; min-height: 0; } }
.anmeldung__bild {
  background: var(--kbs-yellow); color: var(--kbs-ink);
  padding: var(--space-11) var(--space-9); display: flex; flex-direction: column; justify-content: center;
}
.anmeldung__bild h1 { font: var(--type-campaign); font-size: clamp(34px, 4.5vw, 58px); color: var(--kbs-ink); }
.anmeldung__bild p { font-size: var(--text-md); max-width: 40ch; margin-top: var(--space-6); }
.anmeldung__marke {
  font: var(--fw-din-demi) var(--text-xs) / 1.2 var(--font-display);
  text-transform: uppercase; letter-spacing: var(--tracking-caps-wide);
  color: var(--kbs-ink); margin-bottom: var(--space-8);
  border-bottom: var(--rule-height) solid var(--kbs-ink);
  padding-bottom: var(--space-3); display: inline-block;
}
.anmeldung__liste { list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.anmeldung__liste li {
  padding: var(--space-3) 0; border-top: 1px solid rgba(44, 46, 53, 0.25);
  font-size: var(--text-sm);
}

/* Kennzahlen auf der Anmeldeseite — kompakt, damit die Seite auf einen
   Bildschirm passt. Die ausführliche Darstellung liegt unter /weiterbildung. */
.anmeldung__zahlen {
  display: flex; gap: var(--space-8); flex-wrap: wrap;
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid rgba(44, 46, 53, .25);
}
.anmeldung__zahlen b {
  display: block; font: var(--fw-din-extrabold) var(--text-2xl) / 1 var(--font-display);
}
.anmeldung__zahlen span > span {
  display: block; font-size: var(--text-2xs); margin-top: 4px; opacity: .75;
  letter-spacing: var(--tracking-wide);
}
.anmeldung__mehr {
  display: inline-block; margin-top: var(--space-7);
  font: var(--fw-bold) var(--text-sm) / 1.3 var(--font-sans);
  color: var(--kbs-ink); border-bottom: 3px solid rgba(44, 46, 53, .35);
  padding-bottom: 3px;
}
.anmeldung__mehr:hover { color: var(--kbs-ink); border-bottom-color: var(--kbs-ink); }
.anmeldung__formular { padding: var(--space-11) var(--space-9); display: flex; flex-direction: column; justify-content: center; }
.anmeldung__formular > div { width: 100%; max-width: 420px; margin: 0 auto; }
@media (max-width: 600px) {
  .anmeldung__bild, .anmeldung__formular { padding: var(--space-8) var(--space-5); }
}

/* Die Anmeldeseite soll ohne Scrollen auf einen Bildschirm passen. Bei
   niedrigen Fenstern — etwa auf einem 1366×768-Laptop — werden Schrift und
   Abstände gestaffelt kleiner, statt den Inhalt zu kürzen.
   Diese Regeln stehen bewusst am Ende: Sie müssen die Grundwerte oben
   überschreiben, und bei gleicher Gewichtung gewinnt die spätere Regel. */
@media (max-height: 820px) {
  .anmeldung__bild, .anmeldung__formular { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .anmeldung__bild h1 { font-size: clamp(30px, 3.6vw, 46px); }
  .anmeldung__bild p { font-size: var(--text-base); margin-top: var(--space-4); }
  .anmeldung__zahlen { margin-top: var(--space-5); padding-top: var(--space-4); gap: var(--space-6); }
  .anmeldung__zahlen b { font-size: var(--text-xl); }
  .anmeldung__mehr { margin-top: var(--space-5); }
}
@media (max-height: 700px) {
  .anmeldung__bild, .anmeldung__formular { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .anmeldung__bild h1 { font-size: clamp(26px, 3vw, 36px); }
  .anmeldung__marke { margin-bottom: var(--space-5); }
  .anmeldung__zahlen { margin-top: var(--space-4); padding-top: var(--space-4); }
  .anmeldung__zahlen b { font-size: var(--text-lg); }
  .anmeldung__formular h2 { font-size: var(--text-lg); margin-bottom: var(--space-4) !important; }
  .anmeldung__formular .feld { margin-bottom: var(--space-4); }
  .anmeldung__formular .haarlinie { margin: var(--space-4) 0; }
  .anmeldung__formular .oben-5 { margin-top: var(--space-3) !important; }
  .anmeldung__formular .oben-6 { margin-top: var(--space-4) !important; }
}

/* -------------------------------------------------------------- Kleinkram */
.still { color: var(--text-muted); }
.klein { font-size: var(--text-sm); }
.winzig { font-size: var(--text-xs); }
.stark { color: var(--text-strong); font-weight: var(--fw-bold); }
.mitte { text-align: center; }
.rechts { text-align: right; }
.oben-0 { margin-top: 0; }
.oben-3 { margin-top: var(--space-3); }
.oben-4 { margin-top: var(--space-4); }
.oben-5 { margin-top: var(--space-5); }
.oben-6 { margin-top: var(--space-6); }
.oben-8 { margin-top: var(--space-8); }
.unten-0 { margin-bottom: 0; }
.unten-3 { margin-bottom: var(--space-3); }
.unten-4 { margin-bottom: var(--space-4); }
.unten-5 { margin-bottom: var(--space-5); }
.unten-6 { margin-bottom: var(--space-6); }
.unten-8 { margin-bottom: var(--space-8); }
.reihe { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.reihe--zwischen { justify-content: space-between; }
.leer { padding: var(--space-9) var(--space-6); text-align: center; color: var(--text-muted); }
.leer strong { display: block; color: var(--text-strong); margin-bottom: var(--space-2); font-size: var(--text-md); }
.beschriftung {
  font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted); display: block; margin-bottom: var(--space-2);
}
.aufklappen { border: var(--border-card); margin-bottom: var(--space-3); background: var(--surface-card); }
.aufklappen > summary {
  padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: var(--fw-bold);
  color: var(--text-strong); list-style: none; display: flex; justify-content: space-between;
  gap: var(--space-4); align-items: center;
}
.aufklappen > summary::-webkit-details-marker { display: none; }
.aufklappen > summary::after { content: "+"; font: var(--fw-din-demi) var(--text-lg) / 1 var(--font-display); color: var(--text-muted); }
.aufklappen[open] > summary::after { content: "–"; }
.aufklappen[open] > summary { border-bottom: var(--border-width) solid var(--border-hairline); }
.aufklappen__inhalt { padding: var(--space-5); }

.trennlinie { height: var(--rule-height); background: var(--rule-brand); border: 0; margin: var(--space-8) 0; }
.haarlinie { height: 1px; background: var(--border-hairline); border: 0; margin: var(--space-6) 0; }

@media print {
  .kopf, .fuss, .knopf, .hinweisbereich { display: none !important; }
  body { font-size: 11pt; }
  .karte { border: 1px solid #999; break-inside: avoid; }
}