/* Cambium Klammer — Produktschicht über dem Designsystem.
 *
 * Reihenfolge der Einbindung, verbindlich:
 *     tokens.css   die Variablen          (byte-identische Kopie aus @cambium/design-tokens)
 *     werkbund.css die Bauteile           (byte-identische Kopie)
 *     fonts.css    die Schriftbindung     (byte-identische Kopie)
 *     schale.css   DIESE DATEI            (eigen, Klammer)
 *
 * ── ZWEI NAMENSRÄUME, BEWUSST GETRENNT ─────────────────────────────────────────────────
 *
 *   `cmb-*`  gehört dem Designsystem. Wird hier BENUTZT, nie ergänzt und nie überschrieben —
 *            die Datei, in der es steht, ist eine bewachte Kopie. Wer sie anfasst, bekommt ROT.
 *   `kl-*`   gehört der Klammer. Alles, was eine Bedienoberfläche braucht und eine
 *            Landingpage nicht: Seitentitel in fester Größe, Formularfelder, Tabellen, Chips.
 *
 * Ein dritter Namensraum entstünde, wenn man `cmb-*` „nur ein bisschen" erweitert. Genau so
 * sind die drei konkurrierenden Farbwahrheiten von 2026-07-11 entstanden.
 *
 * ── REGISTER PRODUKT ───────────────────────────────────────────────────────────────────
 *
 * Die Vorlage ist für eine Landingpage gebaut. Hier gilt: feste Typoskala statt `clamp()`,
 * Bewegung nur als Zustandsanzeige (150–250 ms), gleiche Schaltfläche auf jedem Bildschirm.
 * Public Sans erscheint ausschließlich in Titeln und Zahlen — im Fließtext und auf
 * Bedienelementen steht IBM Plex Sans, sonst stehen zwei Grotesken nebeneinander und
 * streiten.
 */

/* ── Grundlage ──────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* werkbund.css setzt Fließtext auf 16,5px/1.64. Bedienelemente erben das nicht — sie tragen
   die feste Oberflächenstaffel, sonst laufen Formularzeilen und Tabellen auseinander. */
input, select, textarea, button {
  font-family: var(--font-body);
  font-size: var(--ui-md);
  line-height: var(--ui-line);
}

/* ── Typografie der Oberfläche ──────────────────────────────────────────────────────── */

.kl-rubrik {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .22em;
  text-transform: uppercase;   /* nie im Markup — sonst buchstabieren Vorleseprogramme */
  color: var(--accent-brass);
}

.kl-seitentitel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--ui-page-title);
  line-height: 1.12;
  letter-spacing: var(--display-tracking);
  color: var(--text-primary);
  text-wrap: balance;
}

.kl-abschnittstitel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--ui-title);
  line-height: 1.16;
  letter-spacing: var(--display-tracking);
  color: var(--text-primary);
  text-wrap: balance;
}

.kl-lauftext {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.64;
  color: var(--text-secondary);
  max-width: 68ch;             /* Lesbarkeitsgrenze; darüber springt das Auge in die falsche Zeile */
  text-wrap: pretty;
}
.kl-lauftext strong { font-weight: 600; color: var(--text-primary); }

.kl-hilfstext {
  margin: 0;
  font-size: var(--ui-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ── Bühne und Karte — die angemeldeten Vorstufen (Aktivierung, Anmeldung) ───────────
   Der Grund ist in beiden Themenmodi dunkel; die Karte ist die helle Fläche darauf. Das ist
   die Vorlage aus den Entwürfen 01/02 und zugleich das Richtige: eine Seite, auf der man
   nichts tut als ein Passwort setzen, soll den Blick auf genau eine Fläche zwingen.

   Die zwei Flächenrollen kippen im Dunkelmodus die Rollen — im Hellen ist die Karte die
   hellste Fläche, im Dunklen die angehobene. Deshalb hier zwei lokale Variablen statt zwei
   verstreuter Themenregeln. */
/* `werkbund.css` färbt Körper und Wurzel mit `--surface-page`. Auf der Bühne ist das falsch:
   beim Überziehen am Rand blitzte sonst die helle Seitenfläche hinter dem dunklen Grund auf. */
body.kl-auf-buehne { background: var(--surface-buehne); }

.kl-buehne {
  --kl-karte: var(--surface-page);
  --kl-feld: var(--surface-raised);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface-buehne);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4.5vw, 64px);
}
[data-theme="dark"] .kl-buehne {
  --kl-karte: var(--surface-raised);
  --kl-feld: var(--surface-page);
}

.kl-buehne-kopf {
  width: 100%;
  max-width: 496px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.kl-buehne-kopf img { display: block; width: 182px; height: auto; }

.kl-karte {
  width: 100%;
  max-width: 496px;
  background: var(--kl-karte);
  border: 1px solid var(--border-hairline);
  padding: clamp(32px, 4vw, 48px);
}

/* Vertikaler Rhythmus in der Karte — als Fluss, nicht als Abstand an jedem einzelnen Element.
   `* + *` greift NUR zwischen Geschwistern, nie an der ersten oder letzten Kante; damit bleibt
   das Kartenpolster die einzige Kante und niemand muss Abstände gegeneinander aufrechnen.

   Warum das hier steht und nicht als `style`-Attribut im Markup: die Inhaltsrichtlinie der
   Klammer erlaubt `style-src 'self'` OHNE `unsafe-inline`. Ein einziges `style`-Attribut zwänge
   die Aufweichung für die ganze Seite — für einen Abstand. Ein Test bewacht das. */
.kl-karte > * + *                        { margin-top: 14px; }
.kl-karte > * + .kl-seitentitel          { margin-top: 16px; }
.kl-karte > * + .kl-formular             { margin-top: 28px; }
.kl-karte > * + .kl-fehler               { margin-top: 24px; }
.kl-karte > .kl-formular + .kl-hilfstext { margin-top: 22px; }

/* Ein Auftritt, kein Vorspann. Die Vorgabe ist der SICHTBARE Zustand — die Bewegung wird nur
   dort zugeschaltet, wo sie erwünscht ist. Wer es umgekehrt baut, liefert eine leere Seite
   aus, sobald Animationen nicht laufen (Vorschaubilder, Hintergrundtabs). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes kl-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .kl-karte { animation: kl-auf .24s var(--ease) both; }
}

.kl-fussnote {
  width: 100%;
  max-width: 496px;
  margin: 0;
  font-size: var(--ui-sm);
  line-height: 1.5;
  color: var(--text-on-brand-soft);
  text-align: center;
}

/* ── Themenschalter ─────────────────────────────────────────────────────────────────────
   In der Schale steht er auf der Seitenfläche und nimmt deren Rollenfarben. Auf der Bühne
   steht er IMMER auf dunklem Grund, unabhängig vom Modus — dort feste helle Werte, sonst wäre
   er im Hellmodus unsichtbar. 34px Höhe liegt unter den 44px für Fingerziele; auf schmalen
   Fenstern wächst er deshalb (unten). */
.kl-thema {
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: .55em 1.1em;
  min-height: 34px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.kl-thema:hover { color: var(--text-primary); border-color: var(--text-primary); }
/* Gedrückter Zustand sichtbar, nicht nur für Vorleseprogramme (`aria-pressed`). */
.kl-thema[aria-pressed="true"] { background: var(--surface-tint); color: var(--text-primary); }

.kl-buehne .kl-thema {
  color: rgba(237, 238, 240, .78);
  border-color: rgba(237, 238, 240, .55);
}
.kl-buehne .kl-thema:hover { color: #EDEEF0; border-color: #EDEEF0; }
.kl-buehne .kl-thema[aria-pressed="true"] {
  background: rgba(237, 238, 240, .16); color: #EDEEF0; border-color: #EDEEF0;
}

/* ── Formular ──────────────────────────────────────────────────────────────────────── */

.kl-formular {
  margin: 0;   /* der Abstand kommt aus dem Kartenfluss, nicht von hier */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kl-feldgruppe { display: flex; flex-direction: column; gap: 8px; }

/* Eine Reihe Handlungsknöpfe, NICHT ein Formular.
   `.kl-formular` stapelt in einer Spalte — richtig für Eingabefelder, falsch für einen
   Aufruf zum Handeln: dort dehnt es den Knopf auf die volle Breite, und er sieht aus wie
   ein Absenden-Knopf ohne Formular davor. Im Browser gesehen, auf der Landing. */
.kl-aktionen { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

.kl-etikett {
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.kl-feld {
  width: 100%;
  background: var(--kl-feld, var(--surface-raised));
  color: var(--text-primary);
  border: 1px solid var(--border-strong);   /* 3,8:1 — Grenze eines Bedienelements, WCAG 1.4.11 */
  border-radius: var(--radius-none);
  padding: .85em 1em;
  min-height: 48px;
}
.kl-feld::placeholder { color: var(--text-muted); }   /* 5,6:1 — kein hellgraues Raten */
.kl-feld:hover { border-color: var(--accent); }
.kl-feld[aria-invalid="true"] { border-color: var(--status-offen); border-width: 2px; }
.kl-feld:disabled { background: var(--surface-tint); color: var(--text-muted); cursor: not-allowed; }

/* Fehler nennt Ursache und Weg, entschuldigt sich nicht. Er trägt zusätzlich zur Farbe eine
   Linie und ein Zeichen — Farbe allein trägt keine Aussage (WCAG 1.4.1). */
.kl-fehler {
  margin: 0;   /* der Abstand kommt aus dem Kartenfluss */
  padding: 14px 16px;
  background: var(--surface-tint);
  border-top: 2px solid var(--status-offen);
  color: var(--text-primary);
  font-size: var(--ui-md);
  line-height: 1.5;
}
/* Die Rubrik benennt, WAS nicht ging — sie steht im Markup, nicht in dieser Datei, weil sie
   je Fall verschieden ist. Ein generisches „Fehler" über einem Text, der den Fehler ohnehin
   erklärt, sagt nichts. */
.kl-fehler-rubrik {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--status-offen);
}
.kl-fehler p { margin: 0; }

/* ── Schaltflächen ───────────────────────────────────────────────────────────────────
   Die Form kommt aus `werkbund.css` (`.cmb-btn`, `.cmb-btn--outline`). Hier steht nur, was
   ein Formular zusätzlich braucht: volle Breite, Fingerziel-Höhe, gesperrter Zustand. */
.cmb-btn { min-height: 48px; }
.kl-btn-voll { width: 100%; justify-content: center; min-height: 52px; }
.cmb-btn:disabled,
.cmb-btn[aria-disabled="true"] {
  background: var(--surface-tint);
  color: var(--text-muted);
  border-color: var(--border-hairline);
  cursor: not-allowed;
}

/* ── Schmale Fenster ────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   DIE SCHALE — Kopfzeile, Navigation, Inhaltsbahn, Fussleiste
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* Erster Fokus der Seite: für Tastaturnutzer der Weg an der Navigation vorbei. Sichtbar erst
   im Fokus, aber dann vollständig, nicht als 1px-Splitter. */
.kl-sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  padding: .8em 1.4em;
  font-size: var(--ui-md);
  font-weight: 600;
  text-decoration: none;
}
.kl-sprungmarke:focus { left: 0; }

/* Die Kopfzeile klebt (Bauteil `.cmb-header` aus dem Designsystem: Unschärfe, 91 % Deckung,
   Haarlinie, z-index 50). Voraussetzung dafür ist, dass sie DIREKTES Kind der Seitenwurzel
   bleibt und kein Vorfahr `overflow`, `transform` oder eine feste Höhe trägt. */
.kl-kopf-innen {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.kl-wortmarke { display: inline-flex; align-items: center; flex: 0 0 auto; }
.kl-wortmarke img { width: 182px; height: auto; }
/* Zwei Fassungen der Wortmarke, eine je Themenmodus. Ohne Skript: die Umschaltung ist eine
   Darstellungsfrage, keine Verhaltensfrage.

   ACHTUNG SPEZIFITÄT — hier stand ein Fehler, im Browser gesehen: `[data-logo-dark]` allein
   (0,1,0) verliert gegen `.kl-wortmarke img` (0,1,1), und im Hellmodus standen BEIDE
   Wortmarken nebeneinander. Im Dunkelmodus fiel es nicht auf, weil dort die Regel mit zwei
   Attributen (0,2,0) gewinnt. Deshalb tragen jetzt alle drei Regeln denselben Anker. */
.kl-wortmarke [data-logo-dark] { display: none; }
.kl-wortmarke [data-logo-light] { display: block; }
[data-theme="dark"] .kl-wortmarke [data-logo-light] { display: none; }
[data-theme="dark"] .kl-wortmarke [data-logo-dark] { display: block; }

.kl-navigation { flex: 1 1 auto; }
.kl-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 28px);
}
.kl-navigation a {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  font-size: var(--ui-md);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: .5em 0;
  border-bottom: 2px solid transparent;
}
.kl-navigation a:hover { color: var(--text-primary); border-bottom-color: var(--border-strong); }
/* Die aktuelle Seite trägt eine Linie in der Akzentfarbe UND ein `aria-current` im Markup.
   Farbe allein trägt die Aussage nie (WCAG 1.4.1). */
.kl-navigation a[aria-current="page"] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.kl-kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.kl-abmelden { margin: 0; }

/* Ein Knopf, der wie ein Link aussieht — für Aktionen, die einen POST brauchen (Abmelden),
   aber keine Hauptaktion sind. Er bleibt ein `<button>`, damit Tastatur und Vorleseprogramm
   ihn als Aktion und nicht als Ziel lesen. */
.kl-textknopf {
  background: none;
  border: none;
  padding: .5em 0;
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
}
.kl-textknopf:hover { color: var(--accent-brass); }

/* ── Inhaltsbahn ────────────────────────────────────────────────────────────────────────
   Der Wert `--section-pad` der Vorlage geht bis 128px — das ist Landingpage-Grosszügigkeit.
   In einer Bedienoberfläche schiebt es den Inhalt unter die Falz, ohne etwas zu gewinnen. */
.kl-inhalt { min-height: 60vh; }

.kl-bahn {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(56px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}
/* Schmale Seiten (Rechtstexte) verengen den INHALT, nicht die Bahn. Verengte man die Bahn,
   rutschte sie in die Mitte des Fensters und fluchtete nicht mehr mit Kopfzeile und Fussleiste
   — im Browser gesehen. */
.kl-bahn--schmal > * { max-width: 76ch; }

.kl-seitenkopf { display: flex; flex-direction: column; gap: 12px; }

/* ── Kachelraster der Bereiche ──────────────────────────────────────────────────────────
   Grundform ist der Setzkasten des Designsystems (`.cmb-tilegrid` + `.cmb-eco`): 3px Fugen,
   1px Kontur, volle Markenfläche. Ein ruhender Bereich tauscht NUR die Fläche gegen
   `--surface-tint` und bekommt die Rubrik „In Vorbereitung" in derselben Mikroschrift wie
   jede andere Rubrik. Keine Schraffur, kein Warnschild, keine abweichende Ecke. */
/* Eine einzelne Kachel füllt bei `auto-fit` die ganze Bahn — und stand dann mit dem Inhalt
   links und einer leeren rechten Hälfte da (im Browser gesehen). Statt die Bahn zu verengen
   nutzt die Kachel ihre Breite: Text links, Kennzahlen rechts, sobald SIE breit genug ist.

   Container-Abfrage, nicht Ansichtsfenster-Abfrage: massgeblich ist die Breite der KACHEL.
   Bei drei gebuchten Domänen sind drei Kacheln nebeneinander schmal, obwohl das Fenster breit
   ist — eine Fensterabfrage träfe dort die falsche Entscheidung. Ohne Unterstützung bleibt es
   beim gestapelten Aufbau, und der ist vollständig bedienbar. */
/* Der Setzkasten ist schmaler als die Bahn. Bei EINER gebuchten Domäne dehnt `auto-fit` die
   Kachel sonst auf volle 1300px, und zwischen Text links und Zahlen rechts steht ein Loch.
   60rem trägt drei Kacheln zu je 320px — genau die Untergrenze des Rasters. */
.kl-bereiche { max-width: 60rem; }
.kl-bereiche > .cmb-eco { container-type: inline-size; }

@container (min-width: 34rem) {
  .kl-bereiche > .cmb-eco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(24px, 5cqi, 64px);
    align-items: start;
  }
  .kl-eco-text { grid-column: 1; }
  .kl-bereiche > .cmb-eco > .kl-kennzahlen {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-top: 4px;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    text-align: right;
  }
  .kl-kachelweg { grid-column: 1; }
}

.kl-eco--ruht {
  background: var(--surface-tint);
  color: var(--text-primary);
}
.kl-eco--ruht:hover { background: var(--surface-tint); transform: none; }
.kl-rubrik--ruht { color: var(--text-muted); }
.kl-rubrik--auf-marke { color: var(--accent-on-dark); }

.kl-kacheltitel {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--ui-title);
  line-height: 1.14;
  letter-spacing: var(--display-tracking);
}
.kl-kacheltext {
  margin: 8px 0 0;
  font-size: var(--ui-md);
  line-height: 1.55;
  max-width: 44ch;
}
.cmb-eco .kl-kacheltext { color: var(--text-on-brand-soft); }
.kl-eco--ruht .kl-kacheltext { color: var(--text-secondary); }

/* Kennzahlen. Der Gedankenstrich steht dort, wo eine Zahl stünde — nie eine erfundene Zahl.
   Er ist bewusst NICHT gross gesetzt: eine Riesen-Leerstelle liest sich wie ein Defekt. */
.kl-kennzahlen {
  margin: auto 0 0;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.kl-kennzahlen div { display: flex; flex-direction: column; gap: 2px; }
.kl-kennzahlen dt {
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: inherit;
  opacity: .72;
}
.kl-kennzahlen dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--ui-title-sm);
  letter-spacing: var(--display-tracking);
  font-variant-numeric: tabular-nums;
}
.kl-kennzahlen--breit { padding-top: 20px; gap: 12px 44px; }

.kl-kachelweg { margin: 18px 0 0; }
.cmb-eco .cmb-link { color: var(--accent-on-dark); border-bottom-color: var(--accent-on-dark); }
.kl-eco--ruht .cmb-link { color: var(--accent-brass); border-bottom-color: var(--accent-brass); }

/* ── Flächen, Listen, Angaben ───────────────────────────────────────────────────────────
   Keine Karten mit Schatten: Hierarchie über Flächenfarbe und Haarlinie, wie im System. */
.kl-flaeche {
  background: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kl-flaeche--ruht { background: var(--surface-tint); }

.kl-liste { margin: 0; padding-left: 1.2em; font-size: var(--ui-md); line-height: 1.6; }

/* ── Anwendungen einer Domäne, jede mit ihrem Weg ────────────────────────────────────────
   Die Liste trägt hier nicht nur Namen, sondern je Zeile eine Aktion (der Übergang in die
   Anwendung). Deshalb kein Aufzählungspunkt, sondern eine Zeile: Name links, Knopf rechts.
   Auf schmalen Geräten bricht sie um, statt den Knopf zu quetschen — ein 48px-Fingerziel
   (`.cmb-btn`) neben einem Namen passt unter 380px nicht mehr nebeneinander. */
.kl-anwendungen { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 14px; }
.kl-anwendung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kl-uebergang { margin: 0; }

.kl-angaben { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.kl-angaben div { display: flex; flex-direction: column; gap: 3px; }
.kl-angaben dt {
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kl-angaben dd { margin: 0; font-size: var(--ui-md); color: var(--text-primary); }
.kl-angaben code { font-family: var(--font-mono); font-size: var(--ui-sm); }

/* ── Risikomatrix ───────────────────────────────────────────────────────────────────────
   Die Achsen tragen `feststellbarkeit` (x) und `verbindlichkeit` (y) — zwei Katalogfelder,
   beide ohne Rechtsgutachten bestimmbar. NICHT Eintrittswahrscheinlichkeit x Schadenshöhe:
   das wäre eine Rechtsfolgenabschätzung und ist ausgeschlossen. */

.kl-matrix-rahmen { gap: 20px; }

.kl-matrix {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  max-width: 48rem;
}

/* Die Achsenbeschriftungen sind rein dekorativ (`aria-hidden`): was sie sagen, steht im
   Fliesstext darüber. Eine gedrehte Beschriftung ist für Vorleseprogramme wertlos. */
.kl-matrix-achse {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kl-matrix-achse--y {
  grid-column: 1;
  grid-row: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.kl-matrix-achse--x { grid-column: 2; grid-row: 2; }

.kl-matrix-feld {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  aspect-ratio: 1 / .82;
  min-height: 300px;
  background: var(--surface-page);
  border: 1px solid var(--border-strong);
}

/* Das Raster ist Millimeterpapier, kein Inhalt: Haarlinien, sechs mal sechs. */
.kl-matrix-raster {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border-hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-hairline) 1px, transparent 1px);
  background-size: 16.6667% 16.6667%;
}

/* Die zwei kräftigeren Mittelachsen trennen die vier Quadranten — als echte Elemente, nicht
   als Verlauf im Hintergrund.

   HIER STAND EIN FEHLER, im Browser gesehen: eine prozentuale `background-position` bezieht
   sich auf (Containerbreite MINUS Bildbreite), nicht auf den Container. `50%` bei einem
   50 % breiten Verlauf landet deshalb bei 25 % — die Quadrantengrenzen sassen sichtbar
   schief, und die Matrix log über die Lage jeder künftigen Blase. */
.kl-matrix-raster::before,
.kl-matrix-raster::after {
  content: "";
  position: absolute;
  background: var(--border-strong);
}
.kl-matrix-raster::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.kl-matrix-raster::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }

.kl-matrix-quadrant {
  position: absolute;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kl-matrix-quadrant--lo { left: 10px; top: 8px; }
.kl-matrix-quadrant--ro { right: 10px; top: 8px; text-align: right; }
.kl-matrix-quadrant--lu { left: 10px; bottom: 8px; }
.kl-matrix-quadrant--ru { right: 10px; bottom: 8px; text-align: right; }
/* Oben rechts ist „Sofort handeln" — der einzige Quadrant, der sich abhebt. */
.kl-matrix-quadrant--scharf { color: var(--status-offen); font-weight: 500; }

/* ── Legende der Zustände ───────────────────────────────────────────────────────────────
   Drei Bedeutungen, drei Mittel: Position sagt, wie kritisch die Pflicht ist; Farbe, wie es
   steht; Grösse, wie viel Arbeit darin steckt.

   „Nicht geprüft" bekommt ZUSÄTZLICH eine eigene Form — hohl mit gestrichelter Kontur, nicht
   nur eine andere Farbe. Auflage aus dem Dashboard-Konzept (Entscheidung C): eine kritische
   Pflicht, über die wir nichts wissen, darf nie beruhigender aussehen als eine offene. Gelb
   als mittlere Ampelfarbe liesse sie als „halb so schlimm" lesen — der fail-to-high, den E4
   ausschliesst. Farbe allein trägt hier also nicht nur aus WCAG-Gründen keine Aussage. */
.kl-legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.kl-legende li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--ui-md);
  color: var(--text-secondary);
}

.kl-blase {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
}
.kl-blase--offen { background: var(--status-offen); }
.kl-blase--erfuellt { background: var(--status-erfuellt); }
.kl-blase--ungeprueft {
  background: transparent;
  border: 2px dashed var(--status-ungeprueft);
}

/* ── Tabelle ────────────────────────────────────────────────────────────────────────────
   Dichte Daten dürfen dichter laufen als Fliesstext; die Oberflächenstaffel gilt. */
.kl-tabellenrahmen {
  border: 1px solid var(--border-hairline);
  background: var(--surface-raised);
  overflow-x: auto;
}
.kl-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-md);
  line-height: var(--ui-line);
}
.kl-tabelle caption {
  caption-side: top;
  text-align: left;
  padding: var(--card-pad-sm) var(--card-pad-sm) 0;
}
.kl-tabelle th,
.kl-tabelle td {
  text-align: left;
  padding: 12px var(--card-pad-sm);
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
}
.kl-tabelle thead th {
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.kl-tabelle .kl-spalte-nr { width: 3.5rem; font-variant-numeric: tabular-nums; }
.kl-tabelle .kl-tabelle-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; }

/* Aufzählungen in Tabellenzellen tragen keinen Punkt: die Zelle ist schon die Gruppierung. */
.kl-marken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kl-marken li { font-family: var(--font-mono); font-size: var(--ui-sm); color: var(--text-secondary); }

/* Ein Rollenliteral ist ein technischer Wert und wird als solcher gesetzt — nicht übersetzt.
   Wer hier steht, arbeitet mit dem Vokabular aus `common/roles.py`. */
.kl-rolle {
  font-family: var(--font-mono);
  font-size: var(--ui-sm);
  color: var(--text-primary);
  background: var(--surface-tint);
  padding: 2px 7px;
  white-space: nowrap;
}

.kl-verwaltung-name { font-size: var(--ui-md); font-weight: 600; color: var(--text-primary); }
.kl-tabelle tbody tr:last-child td { border-bottom: none; }
.kl-tabelle-leer td { color: var(--text-secondary); max-width: 68ch; }

/* ── Einrichtung: Fortschritt und Fragen ────────────────────────────────────────────────
   Die Fortschrittsanzeige führt NUR die Stufen, die nach den bisherigen Antworten überhaupt
   vorkommen. „Schritt 2 von 5", das später auf 4 springt, ist schlimmer als keine Anzeige. */
.kl-fortschritt ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.kl-fortschritt li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kl-fortschritt-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
/* Der aktuelle Schritt trägt Farbe UND `aria-current` — Farbe allein trägt keine Aussage. */
.kl-fortschritt--hier { color: var(--text-primary); }
.kl-fortschritt--hier .kl-fortschritt-nr {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-brand);
}
.kl-fortschritt--fertig .kl-fortschritt-nr {
  background: var(--surface-tint);
  border-color: var(--border-hairline);
}

/* Eine Fragengruppe war zuerst ein `fieldset` mit `legend`. Im Browser gesehen: die `legend`
   schneidet die Trennlinie zwischen zwei Fragen auf, weil sie im Rahmen des `fieldset` eine
   Lücke erzeugt. `role="group"` mit `aria-labelledby` ist semantisch gleichwertig und stellt
   sich in allen Browsern gleich dar. */
/* Eine Nebenaktion zieht sich nicht über die volle Breite — das ist der Platz der Hauptaktion. */
.kl-formular > .cmb-btn--outline { align-self: flex-start; }

.kl-frage { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kl-frage + .kl-frage { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border-hairline); }
.kl-frage-text {
  padding: 0;
  font-size: var(--text-body);
  line-height: 1.55;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 60ch;
}

.kl-wahl { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.kl-wahl--liste { flex-direction: column; gap: 14px; }

/* Das ganze Feld ist anklickbar, nicht nur das Kästchen — 44px Fingerziel ohne eigene Höhe,
   weil die Beschriftung mitzählt. */
.kl-wahl-feld {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  font-size: var(--ui-md);
  line-height: 1.5;
  color: var(--text-primary);
  cursor: pointer;
  max-width: 64ch;
}
.kl-wahl-feld input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.kl-wahl-feld:hover { color: var(--accent); }

/* Die Erklärung zu EINEM Ankreuzpunkt — zugeklappt, weil sonst eine Wand entsteht.
   Das Bündel `buendel.datenwege` führt sieben Kästchen. Stünden darunter je drei Sätze offen,
   wäre aus der Ersparnis, für die die Bündelung gebaut wurde, eine Textseite geworden: der
   Leser überfliegt und kreuzt nach Gefühl an. Zugeklappt bleibt die Liste eine Liste, und wer
   bei einer Zeile stockt, klappt genau die eine auf.
   Das Element steht NEBEN dem `label`, nicht darin: ein Klick auf die Zusammenfassung würde
   sonst das Kästchen mitschalten. */
.kl-ankreuzpunkt + .kl-erklaerung { margin: -2px 0 10px 34px; }
.kl-erklaerung summary {
  cursor: pointer;
  font-size: var(--ui-sm);
  color: var(--text-muted);
  padding: 4px 0;
}
.kl-erklaerung summary:hover { color: var(--accent); }
.kl-erklaerung > .kl-hilfstext { margin-top: 4px; }

.kl-marken--block { flex-direction: column; gap: 6px; }

/* Eine Kriterien-Kennung ist eine technische Angabe. Sie steht dabei, weil sie den Bezug zum
   Referenzkatalog herstellt — aber leise, hinter der Begründung im Klartext. */
.kl-kennung {
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Interne Angaben, die ein Kunde nicht braucht, ein Betreiber aber schon. Zugeklappt, in
   Mikroschrift, ohne eigene Fläche — sichtbar für den, der sucht, unsichtbar für den Rest. */
.kl-technisch { font-size: var(--ui-sm); color: var(--text-muted); }
.kl-technisch summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kl-technisch p { margin: 8px 0 0; }
.kl-technisch code { font-family: var(--font-mono); }

/* Quellenangaben und Fussnoten in Mikroschrift — das Register des Designsystems für alles,
   was den Wahrheitsgehalt einer Aussage einordnet. */
.kl-quelle {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .1em;
  color: var(--text-muted);
  max-width: 70ch;
}

.kl-leerzustand { display: flex; flex-direction: column; gap: 12px; }

/* ── Abschnittsliste (Einrichtung, Verwaltung) ──────────────────────────────────────── */
.kl-abschnitte { display: flex; flex-direction: column; gap: 16px; }
.kl-abschnittsliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kl-abschnittsliste li {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  align-items: baseline;
  gap: 6px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--border-hairline);
}
.kl-abschnittsliste li:last-child { border-bottom: 1px solid var(--border-hairline); }
.kl-abschnittsliste a { font-size: var(--ui-md); font-weight: 600; color: var(--text-primary); text-decoration: none; }
.kl-abschnittsliste a:hover { color: var(--accent); }
.kl-abschnittstext { grid-column: 2; font-size: var(--ui-sm); color: var(--text-secondary); }

/* Die Rubrik „in Vorbereitung" — dieselbe Mikroschrift wie jede andere Rubrik, kein Warnschild. */
.kl-ruht {
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.kl-ruht-zeile a { color: var(--text-secondary); }

/* ── Fussleiste ─────────────────────────────────────────────────────────────────────── */
.kl-fussleiste {
  border-top: 1px solid var(--border-hairline);
  background: var(--surface-raised);
}
.kl-fussleiste-innen {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kl-fussleiste ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.kl-fussleiste a {
  font-family: var(--font-mono);
  font-size: var(--ui-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.kl-fussleiste a:hover { color: var(--accent-brass); border-bottom-color: var(--accent-brass); }
.kl-fussleiste-hinweis { margin: 0; font-size: var(--ui-sm); color: var(--text-muted); max-width: 70ch; }

/* ── Rechtstext ─────────────────────────────────────────────────────────────────────────
   Ein juristischer Text ist Fliesstext, kein Bedienelement: hier gilt die Lesegrösse der
   Vorlage, nicht die dichtere Oberflächenstaffel. */
.kl-rechtstext {
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  max-width: 68ch;
}

/* ── Schmale Fenster ────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .kl-kopf-innen { flex-wrap: wrap; row-gap: 6px; }
  .kl-navigation { order: 3; flex-basis: 100%; }
  .kl-navigation ul { gap: 6px 20px; }
  .kl-kopf-aktionen { gap: 10px; }
  .kl-abschnittsliste li { grid-template-columns: 1fr; }
  .kl-abschnittstext { grid-column: 1; }
}

@media (max-width: 420px) {
  /* Nicht untereinander stapeln: der Themenschalter zöge sich sonst über die volle Breite und
     wöge optisch so schwer wie die Hauptschaltfläche. Er bleibt rechts, wird nur größer. */
  .kl-buehne-kopf { flex-wrap: wrap; gap: 14px; }
  .kl-buehne-kopf img { width: 148px; }
  .kl-thema { min-height: 44px; padding: .55em .95em; }   /* volles Fingerziel */
  .kl-wortmarke img { width: 148px; }
}