/* =========================================================================
   Gestaltungssystem der Lernplattform
   Keine externen Schriften, keine externen Ressourcen.

   Die Farben, Rundungen und Schriften unten sind der Plattformstandard.
   Ein Mandant mit eigenem Branding ueberschreibt eine Handvoll dieser
   Variablen ueber einen :root-Block, der nach dieser Datei ausgeliefert
   wird -- siehe app/Branding/ThemeTokens.php.

   Nicht ueberschreibbar sind die Statusfarben (Erfolg, Warnung, Fehler,
   Info) und alles, was kein Markenmerkmal ist: Abstaende, Schatten,
   Schriftgroessen, Zeilenhoehen.
   ========================================================================= */

:root {
    /* --- Farben: Flächen und Text ---------------------------------------
       Die ersten elf Werte überschreibt ein Mandant über sein Branding.
       Alles darunter ist System und bleibt, wie es ist. */
    --farbe-hintergrund: #f6f7f9;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-gedimmt: #f0f2f5;
    --farbe-rand: #e2e6ec;
    --farbe-rand-stark: #cbd2dc;
    /* Umrandung von Bedienelementen: 3,04:1 auf Weiss (WCAG 1.4.11).
       Bewusst getrennt von --farbe-rand-stark, das Trennlinien zeichnet
       und dafür heller sein darf. */
    --farbe-rand-bedienung: #8a95a3;

    --farbe-text: #1b2430;
    --farbe-text-gedimmt: #5a6675;
    --farbe-text-leise: #68727f;

    --farbe-primaer: #1d4ed8;
    --farbe-primaer-dunkel: #1739a8;
    --farbe-primaer-hell: #eaf0ff;

    /* --- Statusfarben -----------------------------------------------------
       Bewusst nicht überschreibbar und bewusst sparsam eingesetzt. Ein
       Zustand darf nie allein an der Farbe hängen: jeder Statuschip trägt
       zusätzlich ein Zeichen und ein Wort. Deshalb ist „abgeschlossen" auch
       kein grüner Block, sondern eine neutrale Fläche mit grünem Haken --
       sonst wäre bei einer grünen Marke nicht mehr unterscheidbar, ob eine
       Fläche einen Zustand meint oder das Erscheinungsbild. */
    --farbe-erfolg: #12805c;
    --farbe-erfolg-hell: #e3f5ee;
    --farbe-warnung: #a35a00;
    --farbe-warnung-hell: #fdf1e0;
    --farbe-fehler: #b3261e;
    --farbe-fehler-hell: #fdecea;
    --farbe-info: #1d4ed8;
    --farbe-info-hell: #eaf0ff;

    /* --- Abstände ---------------------------------------------------------
       Eine Skala, keine freien Werte. Wer einen Zwischenwert braucht,
       braucht meist eine andere Struktur. */
    --abstand-xxs: 0.125rem;
    --abstand-xs: 0.25rem;
    --abstand-s: 0.5rem;
    --abstand-m: 1rem;
    --abstand-l: 1.5rem;
    --abstand-xl: 2.25rem;
    --abstand-xxl: 3.5rem;
    --abstand-xxxl: 5rem;

    /* --- Radien und Höhe --------------------------------------------------
       Schatten sehr zurückhaltend: eine Karte liegt auf dem Papier, sie
       schwebt nicht darüber. */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --radius-rund: 999px;

    --schatten-s: 0 1px 2px rgba(20, 30, 26, 0.05);
    --schatten-m: 0 1px 2px rgba(20, 30, 26, 0.05), 0 10px 24px -14px rgba(20, 30, 26, 0.16);
    --schatten-l: 0 2px 4px rgba(20, 30, 26, 0.04), 0 24px 48px -24px rgba(20, 30, 26, 0.20);

    /* --- Typografie -------------------------------------------------------
       Eine Skala mit neun Stufen. Fliesstext liegt bei 15,5 px: gross genug
       zum Lesen, klein genug, dass eine Übersicht auch eine bleibt. */
    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

    --text-display: 2.5rem;
    --text-h1: 1.875rem;
    --text-h2: 1.375rem;
    --text-h3: 1.0625rem;
    --text-gross: 1.0625rem;
    --text-body: 0.96875rem;
    --text-klein: 0.84375rem;
    --text-label: 0.75rem;
    --text-metrik: 2.125rem;

    --zeile-eng: 1.2;
    --zeile-normal: 1.55;
    --zeile-lesen: 1.7;

    /* --- Breiten ----------------------------------------------------------
       Drei Bahnen. Fliesstext bleibt schmal, weil eine 200 Zeichen lange
       Zeile niemand liest; Verwaltungstabellen dürfen breit sein. */
    --breite-lesen: 46rem;
    --breite-inhalt: 1180px;
    --breite-weit: 1420px;

    /* --- App Shell -------------------------------------------------------- */
    --breite-seitenleiste: 250px;
    --hoehe-kopf: 64px;
    --hoehe-topbar: 64px;
}

/* ---------- Grundlagen ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: var(--text-body);
    line-height: var(--zeile-normal);
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--brand-font-heading, var(--schrift));
    margin: 0 0 var(--abstand-s);
    line-height: var(--zeile-eng);
    font-weight: 640;
    letter-spacing: -0.015em;
    color: var(--farbe-text);
    text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-body); }

/* Die Schriftgrössenklassen der Skala – für alles, was keine Überschrift
   ist, aber trotzdem eine Stufe braucht. */
.t-display {
    font-family: var(--brand-font-heading, var(--schrift));
    font-size: var(--text-display);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 640;
    margin: 0 0 var(--abstand-m);
    text-wrap: balance;
}

.t-gross { font-size: var(--text-gross); line-height: var(--zeile-lesen); }
.t-klein { font-size: var(--text-klein); }

.t-label {
    font-size: var(--text-label);
    line-height: 1.3;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--farbe-text-leise);
}

.t-metrik {
    font-family: var(--brand-font-heading, var(--schrift));
    font-size: var(--text-metrik);
    line-height: 1.05;
    font-weight: 640;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: block;
}

.t-gedimmt { color: var(--farbe-text-gedimmt); }
.t-leise { color: var(--farbe-text-leise); }

p { margin: 0 0 var(--abstand-m); }

a {
    color: var(--farbe-primaer);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover { color: var(--farbe-primaer-dunkel); }

ul, ol { margin: 0 0 var(--abstand-m); padding-left: 1.35rem; }
li { margin-bottom: 0.35rem; }

hr {
    border: 0;
    border-top: 1px solid var(--farbe-rand);
    margin: var(--abstand-l) 0;
}

code {
    font-family: var(--schrift-mono);
    font-size: 0.9em;
    background: var(--farbe-flaeche-gedimmt);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

pre {
    font-family: var(--schrift-mono);
    font-size: 0.85rem;
    background: #1b2430;
    color: #e6eaf0;
    padding: var(--abstand-m);
    border-radius: var(--radius-m);
    overflow-x: auto;
}

blockquote {
    margin: var(--abstand-m) 0;
    padding: var(--abstand-m) var(--abstand-l);
    background: var(--farbe-primaer-hell);
    border-left: 3px solid var(--farbe-primaer);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    font-size: 1.03rem;
}

blockquote p:last-child { margin-bottom: 0; }

/* Fokus – deutlich sichtbar, für Tastaturbedienung */
:focus-visible {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Sprunglink für Screenreader und Tastatur */
.sprunglink {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--farbe-primaer);
    color: #fff;
    padding: var(--abstand-s) var(--abstand-m);
    z-index: 100;
    border-radius: 0 0 var(--radius-s) 0;
}

.sprunglink:focus {
    left: 0;
}

.nur-screenreader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- App Shell ----------------------------------------------------
   Desktop: feste Seitenleiste links, Inhalt rechts. Mobil: Schublade.

   Die Seitenleiste trägt Marke und Navigation, die Topbar den Ort, die
   Suche und das Konto. Beides zusammen beantwortet zwei Fragen, ohne dass
   man sie stellen muss: Wo bin ich, und was gibt es hier sonst noch?
   ------------------------------------------------------------------------ */

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--breite-seitenleiste) minmax(0, 1fr);
}

.shell__haupt {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--farbe-hintergrund);
}

/* --- Seitenleiste --- */

.seitenleiste {
    grid-row: 1;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--farbe-flaeche);
    border-right: 1px solid var(--farbe-rand);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Die Verwaltung sitzt sichtbar woanders: dieselbe Struktur, ruhigerer
   Grund. Man soll auf den ersten Blick wissen, ob man lernt oder verwaltet
   -- ohne dass es zwei Anwendungen werden. */
.seitenleiste--verwaltung {
    background: #101a16;
    border-right-color: #1e2c26;
    color: #d9e2dd;
}

.seitenleiste__kopf {
    display: flex;
    align-items: center;
    min-height: var(--hoehe-kopf);
    padding: 0 var(--abstand-m);
    border-bottom: 1px solid var(--farbe-rand);
}

.seitenleiste--verwaltung .seitenleiste__kopf { border-bottom-color: #1e2c26; }

.seitenleiste__nav {
    flex: 1;
    padding: var(--abstand-m) var(--abstand-s);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-l);
}

.navgruppe { display: block; }

.navgruppe__titel {
    font-size: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--farbe-text-leise);
    padding: 0 var(--abstand-s) var(--abstand-xs);
    margin: 0;
}

.seitenleiste--verwaltung .navgruppe__titel { color: #7d9187; }

.navgruppe__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.navgruppe__liste li { margin: 0; }

.navlink {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-s);
    color: var(--farbe-text-gedimmt);
    text-decoration: none;
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.3;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.navlink:hover {
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text);
}

.navlink.is-active {
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    font-weight: 600;
}

.navlink__symbol {
    flex: none;
    width: 18px;
    height: 18px;
    color: currentColor;
    opacity: 0.85;
}

.navlink__zaehler {
    margin-left: auto;
    font-size: var(--text-label);
    font-weight: 650;
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text-gedimmt);
    border-radius: var(--radius-rund);
    padding: 0.1rem 0.42rem;
    font-variant-numeric: tabular-nums;
}

.navlink.is-active .navlink__zaehler {
    background: var(--farbe-primaer);
    color: #fff;
}

.seitenleiste--verwaltung .navlink { color: #b3c3bb; }

.seitenleiste--verwaltung .navlink:hover {
    background: #1a2721;
    color: #f2f6f4;
}

.seitenleiste--verwaltung .navlink.is-active {
    background: #1e3329;
    color: #fff;
    font-weight: 600;
}

.seitenleiste__fuss {
    padding: var(--abstand-s);
    border-top: 1px solid var(--farbe-rand);
}

.seitenleiste--verwaltung .seitenleiste__fuss { border-top-color: #1e2c26; }

/* --- Topbar --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    min-height: var(--hoehe-topbar);
    padding: 0 var(--abstand-l);
    background: color-mix(in srgb, var(--farbe-flaeche) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--farbe-rand);
}

.topbar__ort {
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--farbe-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__suche {
    margin-left: auto;
    display: flex;
    align-items: center;
    max-width: 22rem;
    flex: 1 1 12rem;
}

.topbar__aktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
}

.suchfeld {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.suchfeld__symbol {
    position: absolute;
    left: 0.6rem;
    width: 16px;
    height: 16px;
    color: var(--farbe-text-leise);
    pointer-events: none;
}

.suchfeld input {
    width: 100%;
    height: 36px;
    padding: 0 0.7rem 0 2rem;
    font-size: var(--text-klein);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-rund);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
}

.suchfeld input:focus {
    background: var(--farbe-flaeche);
    border-color: var(--farbe-primaer);
    outline: none;
    box-shadow: 0 0 0 3px var(--farbe-primaer-hell);
}

/* --- Konto --- */

.konto {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.konto__zeichen {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-rund);
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    display: grid;
    place-items: center;
    font-size: var(--text-klein);
    font-weight: 650;
}

.konto__text {
    min-width: 0;
    line-height: 1.25;
}

.konto__name {
    display: block;
    font-size: var(--text-klein);
    font-weight: 600;
    color: var(--farbe-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.konto__rolle {
    display: block;
    font-size: var(--text-label);
    color: var(--farbe-text-leise);
    white-space: nowrap;
}

.seitenleiste--verwaltung .konto__name { color: #f2f6f4; }
.seitenleiste--verwaltung .konto__rolle { color: #7d9187; }

.seitenleiste--verwaltung .konto__zeichen {
    background: #1e3329;
    color: #cfe3d8;
}

/* Dezente Kennzeichnung, dass dies ein Demo-Mandant ist (§78). */
.demomarke {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-rund);
    padding: 0.12rem 0.45rem;
}

/* --- Inhaltsbahnen --- */

.inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: var(--abstand-xl) var(--abstand-l) var(--abstand-xxl);
}

.inhalt--schmal { max-width: 820px; }
.inhalt--mittel { max-width: 980px; }
.inhalt--lesen { max-width: var(--breite-lesen); }
.inhalt--weit { max-width: var(--breite-weit); }

/* --- Schublade auf kleinen Schirmen --- */

.shell__schalter {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-s);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    cursor: pointer;
}

.shell__schleier {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 26, 22, 0.45);
    z-index: 45;
}

/* ---------- Marke ---------- */

.marke {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 650;
    font-size: 1.02rem;
    color: var(--farbe-text);
    text-decoration: none;
    white-space: nowrap;
}

.marke__zeichen {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-s);
    background: var(--brand-secondary, var(--farbe-primaer));
    color: var(--brand-secondary-contrast, #fff);
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.seitenleiste--verwaltung .marke { color: #f2f6f4; }

/* Einfaches Seitengerüst für Anmeldung, Installer und Interview – überall
   dort, wo es keine Navigation gibt. */
.seite {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Karten ---------- */

.karte {
    /* Auch auf einem <a>: Eine Karte ist ein Block. Das steht bewusst hier
       auf der Klasse und nicht auf `a.karte` -- ein Elementselektor wäre
       spezifischer als jede Klasse und würde jede Karte, die eine Flexbox
       sein möchte, still wieder zum Block machen. */
    display: block;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-l);
    padding: var(--abstand-l);
    box-shadow: var(--schatten-s);
}

.karte + .karte { margin-top: var(--abstand-l); }

.karte--flach { box-shadow: none; }
.karte--gedimmt { background: var(--farbe-flaeche-gedimmt); border-color: transparent; }
.karte--eng { padding: var(--abstand-m); }
.karte--weit { padding: var(--abstand-xl); }

.karte--hervorgehoben {
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 3px var(--farbe-primaer-hell);
}

.karte__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-m);
    margin-bottom: var(--abstand-m);
}

.karte__titel { margin: 0; font-size: 1.1rem; }

.karte__untertitel {
    margin: 0.15rem 0 0;
    color: var(--farbe-text-gedimmt);
    font-size: 0.9rem;
}

/* Klickbare Karte */
a.karte {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

a.karte:hover {
    border-color: var(--farbe-rand-stark);
    box-shadow: var(--schatten-m);
}

/* ---------- Raster ---------- */

.raster { display: grid; gap: var(--abstand-l); }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster--seitlich { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.raster--eng { gap: var(--abstand-m); }

/* ---------- Seitenkopf ---------- */

.seitenkopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--abstand-l);
    margin-bottom: var(--abstand-xl);
    flex-wrap: wrap;
}

.seitenkopf__text { max-width: 62ch; }
.seitenkopf h1 { margin-bottom: 0.35rem; }

.seitenkopf__beschreibung {
    margin: 0;
    color: var(--farbe-text-gedimmt);
    font-size: 1.02rem;
}

.rubrik {
    display: block;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
    margin-bottom: 0.35rem;
}

/* ---------- Schaltflächen ---------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 550;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    background: var(--farbe-primaer);
    color: #fff;
    transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}

.knopf:hover { background: var(--farbe-primaer-dunkel); color: var(--brand-primary-contrast, #fff); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.knopf--zweitrangig {
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    border-color: var(--farbe-rand-stark);
}

.knopf--zweitrangig:hover {
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text);
    border-color: var(--farbe-text-leise);
}

.knopf--leise {
    background: transparent;
    color: var(--farbe-text-gedimmt);
    padding-inline: 0.7rem;
}

.knopf--leise:hover { background: var(--farbe-flaeche-gedimmt); color: var(--farbe-text); }

.knopf--gefahr { background: var(--farbe-fehler); }
.knopf--gefahr:hover { background: #8f1e17; }

.knopf--gross { padding: 0.82rem 1.6rem; font-size: 1.02rem; }
.knopf--klein { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.knopf--voll { width: 100%; }

.knopfgruppe {
    display: flex;
    gap: var(--abstand-s);
    flex-wrap: wrap;
    align-items: center;
}

.knopfgruppe--rechts { justify-content: flex-end; }

/* ---------- Formulare ---------- */

.feld { margin-bottom: var(--abstand-m); }

.feld__beschriftung {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--farbe-text);
}

.feld__hinweis {
    display: block;
    font-size: 0.84rem;
    color: var(--farbe-text-gedimmt);
    margin-top: 0.3rem;
}

.feld__fehler {
    display: block;
    font-size: 0.86rem;
    color: var(--farbe-fehler);
    margin-top: 0.3rem;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 0.58rem 0.75rem;
    font-family: inherit;
    font-size: 0.97rem;
    color: var(--farbe-text);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand-bedienung);
    border-radius: var(--radius-s);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:hover, select:hover, textarea:hover { border-color: var(--farbe-text-leise); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 3px var(--farbe-primaer-hell);
}

input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--farbe-fehler);
}

textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
textarea.gross { min-height: 220px; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a6675'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 16px;
    padding-right: 2rem;
}

fieldset {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    padding: var(--abstand-m);
    margin: 0 0 var(--abstand-m);
}

legend {
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0 0.4rem;
}

/* Auswahloptionen als Karten */
.optionsliste { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.optionsliste li { margin: 0; }

.option {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--farbe-rand-bedienung);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.option:hover { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }

.option input { width: auto; margin: 0.25rem 0 0; flex-shrink: 0; accent-color: var(--farbe-primaer); }

.option__text { flex: 1; font-size: 0.97rem; }

.option--richtig {
    border-color: var(--farbe-erfolg);
    background: var(--farbe-erfolg-hell);
}

.option--falsch {
    border-color: var(--farbe-fehler);
    background: var(--farbe-fehler-hell);
}

.option--markiert { border-width: 2px; }

.option__marke {
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.option--richtig .option__marke { color: var(--farbe-erfolg); }
.option--falsch .option__marke { color: var(--farbe-fehler); }

.option__erklaerung {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.86rem;
    color: var(--farbe-text-gedimmt);
}

/* Auswahl als Segmentschalter */
.segmente { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.segment {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--farbe-rand-bedienung);
    border-radius: 999px;
    font-size: 0.9rem;
    cursor: pointer;
    background: var(--farbe-flaeche);
    transition: all 0.12s ease;
}

.segment input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.segment:hover { border-color: var(--farbe-primaer); }

.segment:has(input:checked) {
    background: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    color: #fff;
    font-weight: 550;
}

.segment:has(input:focus-visible) {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 2px;
}

/* Kontrollkästchen als Zeile */
.kontrollzeile {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.94rem;
}

.kontrollzeile input {
    width: auto;
    margin-top: 0.28rem;
    accent-color: var(--farbe-primaer);
}

/* ---------- Meldungen ---------- */

.meldung {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-m);
    border: 1px solid;
    margin-bottom: var(--abstand-m);
    font-size: 0.94rem;
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.meldung p:last-child { margin-bottom: 0; }
.meldung__symbol { flex-shrink: 0; font-weight: 700; }

.meldung--erfolg { background: var(--farbe-erfolg-hell); border-color: #a9dcc9; color: #0b5c42; }
.meldung--fehler  { background: var(--farbe-fehler-hell);  border-color: #f0bfbc; color: #8f1e17; }
.meldung--warnung { background: var(--farbe-warnung-hell); border-color: #f0d3a8; color: #7d4500; }
.meldung--info    { background: var(--farbe-info-hell);    border-color: #c3d3f8; color: #16358f; }

/* ---------- Etiketten ---------- */

.etikett {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text-gedimmt);
    white-space: nowrap;
}

.etikett--primaer { background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel); }
.etikett--erfolg  { background: var(--farbe-erfolg-hell);  color: var(--farbe-erfolg); }
.etikett--warnung { background: var(--farbe-warnung-hell); color: var(--farbe-warnung); }
.etikett--fehler  { background: var(--farbe-fehler-hell);  color: var(--farbe-fehler); }

/* ---------- Fortschritt ---------- */

.fortschritt {
    height: 8px;
    background: var(--farbe-flaeche-gedimmt);
    border-radius: 999px;
    overflow: hidden;
}

.fortschritt--schlank { height: 5px; }
.fortschritt--dick { height: 12px; }

.fortschritt__balken {
    height: 100%;
    background: var(--brand-accent, var(--farbe-primaer));
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fortschritt__balken--erfolg  { background: var(--farbe-erfolg); }
.fortschritt__balken--warnung { background: var(--farbe-warnung); }
.fortschritt__balken--fehler  { background: var(--farbe-fehler); }

/* Kompetenzzeile */
.kompetenz { display: grid; gap: 0.35rem; margin-bottom: var(--abstand-m); }

.kompetenz__kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--abstand-s);
    font-size: 0.92rem;
}

.kompetenz__name { font-weight: 550; }
.kompetenz__wert { font-variant-numeric: tabular-nums; font-weight: 650; }

/* Ringdiagramm für den Gesamtfortschritt */
.ring { display: flex; align-items: center; gap: var(--abstand-l); }

.ring__grafik {
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    transform: rotate(-90deg);
}

.ring__spur { fill: none; stroke: var(--farbe-flaeche-gedimmt); stroke-width: 11; }

.ring__wert {
    fill: none;
    stroke: var(--farbe-primaer);
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ring__zahl {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ring__beschriftung { color: var(--farbe-text-gedimmt); font-size: 0.92rem; }

/* ---------- Kennzahlen ---------- */

.kennzahl { text-align: left; }

.kennzahl__wert {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kennzahl__beschriftung {
    font-size: 0.86rem;
    color: var(--farbe-text-gedimmt);
    margin-top: 0.2rem;
}

.kennzahl__trend { font-size: 0.82rem; font-weight: 600; margin-top: 0.2rem; }
.kennzahl__trend--auf { color: var(--farbe-erfolg); }
.kennzahl__trend--ab  { color: var(--farbe-fehler); }

/* ---------- Tabellen ---------- */

.tabellenrahmen {
    /* Verankert absolut positionierte Nachfahren – ohne das entkommen
       Elemente wie .nur-screenreader dem Scrollbereich und dehnen auf
       schmalen Displays das gesamte Dokument in die Breite. */
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche);
}

table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }

th, td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--farbe-rand);
    vertical-align: top;
}

th {
    font-weight: 650;
    font-size: 0.84rem;
    color: var(--farbe-text-gedimmt);
    background: var(--farbe-flaeche-gedimmt);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--farbe-flaeche-gedimmt); }

/* Tabellen innerhalb von Lerninhalten */
/* Tabellen in Lerninhalten kommen aus dem Redaktionstext und lassen sich
   deshalb nicht in einen Rahmen wickeln. Damit sie auf schmalen Displays
   nicht gequetscht oder abgeschnitten werden, wird die Tabelle selbst zum
   waagerecht scrollbaren Container. Passt der Inhalt, ist die Regel wirkungslos. */
.lerninhalt table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: var(--abstand-m);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
}

.lerninhalt table td,
.lerninhalt table th {
    min-width: 7rem;
}

/* ---------- Lerninhalte ---------- */

.lerninhalt { font-size: 1.02rem; line-height: 1.68; }
.lerninhalt > *:last-child { margin-bottom: 0; }
.lerninhalt h4 { margin-top: var(--abstand-l); font-size: 1.02rem; }
.lerninhalt h4:first-child { margin-top: 0; }
.lerninhalt ul, .lerninhalt ol { margin-bottom: var(--abstand-m); }
.lerninhalt li { margin-bottom: 0.45rem; }

.abschnittsart {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: var(--abstand-m);
}

.abschnittsart--content     { background: var(--farbe-flaeche-gedimmt); color: var(--farbe-text-gedimmt); }
.abschnittsart--example     { background: var(--farbe-info-hell);       color: var(--farbe-info); }
.abschnittsart--key_message { background: var(--farbe-warnung-hell);    color: var(--farbe-warnung); }
.abschnittsart--practice    { background: var(--farbe-erfolg-hell);     color: var(--farbe-erfolg); }
.abschnittsart--summary     { background: var(--farbe-primaer-hell);    color: var(--farbe-primaer-dunkel); }

/* ---------- Karteikarten ---------- */

.karteikarte {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: var(--abstand-xl);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-m);
}

.karteikarte__vorderseite { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.015em; }

.karteikarte__rueckseite {
    margin-top: var(--abstand-l);
    padding-top: var(--abstand-l);
    border-top: 1px solid var(--farbe-rand);
    text-align: left;
}

.karteikarte__definition { font-size: 1.08rem; font-weight: 550; margin-bottom: var(--abstand-m); }
.karteikarte__erklaerung { color: var(--farbe-text-gedimmt); font-size: 0.96rem; }

.karteikarte__beispiel {
    margin-top: var(--abstand-m);
    padding: 0.75rem 1rem;
    background: var(--farbe-flaeche-gedimmt);
    border-radius: var(--radius-m);
    font-size: 0.93rem;
}

.ist-versteckt { display: none !important; }

/* Sanfte Einblendung */
.einblenden { animation: einblenden 0.28s ease both; }

@keyframes einblenden {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Interview ---------- */

.interview-kopf {
    background: var(--farbe-flaeche);
    border-bottom: 1px solid var(--farbe-rand);
    padding: var(--abstand-m) var(--abstand-l);
}

.interview-kopf__innen {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    flex-wrap: wrap;
}

.interview-kopf__titel { font-size: 0.98rem; font-weight: 650; margin: 0; }
.interview-kopf__meta { font-size: 0.84rem; color: var(--farbe-text-gedimmt); }

.interview-buehne { max-width: 880px; margin: 0 auto; padding: var(--abstand-xl) var(--abstand-l) var(--abstand-xxl); }

.interviewer {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: var(--abstand-l);
}

.interviewer__zeichen {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.interviewer__name { font-weight: 600; font-size: 0.96rem; line-height: 1.3; }
.interviewer__rolle { font-size: 0.85rem; color: var(--farbe-text-gedimmt); }

.interviewfrage {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    margin-bottom: var(--abstand-m);
}

.interviewfrage__kontext {
    font-size: 0.95rem;
    color: var(--farbe-text-gedimmt);
    margin-bottom: var(--abstand-l);
    padding-left: var(--abstand-m);
    border-left: 2px solid var(--farbe-rand);
}

.antwortfeld { min-height: 220px; font-size: 1rem; }

.interview-fusszeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    margin-top: var(--abstand-m);
    flex-wrap: wrap;
}

.zeitmesser {
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem;
    color: var(--farbe-text-leise);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.zeitmesser--warnung { color: var(--farbe-warnung); font-weight: 600; }
.zeitmesser--kritisch { color: var(--farbe-fehler); font-weight: 600; }

/* Verlaufsanzeige des Gesprächs */
.verlauf {
    display: flex;
    gap: 3px;
    margin-top: var(--abstand-s);
}

.verlauf__schritt {
    height: 4px;
    flex: 1;
    background: var(--farbe-rand);
    border-radius: 2px;
}

.verlauf__schritt--erledigt { background: var(--farbe-primaer); }
.verlauf__schritt--aktuell { background: var(--farbe-primaer); opacity: 0.5; }

/* ---------- Bewertungen ---------- */

.bewertung { display: grid; gap: 0.7rem; }

.bewertung__zeile {
    display: grid;
    grid-template-columns: minmax(120px, 1.3fr) minmax(0, 2fr) 46px;
    align-items: center;
    gap: var(--abstand-m);
    font-size: 0.92rem;
}

.bewertung__punkte {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.feedbackliste { list-style: none; padding: 0; margin: 0; }

.feedbackliste li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.55rem;
    font-size: 0.95rem;
}

.feedbackliste li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.feedbackliste--gut li::before { content: "+"; color: var(--farbe-erfolg); }
.feedbackliste--verbessern li::before { content: "→"; color: var(--farbe-warnung); }
.feedbackliste--pruefung li::before { content: "•"; color: var(--farbe-text-leise); }

/* ---------- Diagramme ---------- */

.diagramm { width: 100%; overflow-x: auto; }
.diagramm svg { display: block; max-width: 100%; height: auto; }

.diagramm__linie { fill: none; stroke: var(--farbe-primaer); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.diagramm__flaeche { fill: var(--farbe-primaer); opacity: 0.08; }
.diagramm__punkt { fill: var(--farbe-flaeche); stroke: var(--farbe-primaer); stroke-width: 2.5; }
.diagramm__gitter { stroke: var(--farbe-rand); stroke-width: 1; }
.diagramm__text { fill: var(--farbe-text-leise); font-size: 11px; font-family: var(--schrift); }
.diagramm__balken { fill: var(--farbe-primaer); }

/* ---------- Listen mit Trennlinien ---------- */

.liste { list-style: none; margin: 0; padding: 0; }

.liste__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--farbe-rand);
    margin: 0;
}

.liste__eintrag:last-child { border-bottom: 0; }
.liste__inhalt { min-width: 0; flex: 1; }
.liste__titel { font-weight: 550; margin-bottom: 0.1rem; }
.liste__meta { font-size: 0.86rem; color: var(--farbe-text-gedimmt); }

/* ---------- Leerer Zustand ---------- */

.leer {
    text-align: center;
    padding: var(--abstand-xl) var(--abstand-l);
    color: var(--farbe-text-gedimmt);
}

.leer__titel { font-weight: 600; color: var(--farbe-text); margin-bottom: 0.3rem; }

/* ---------- Hilfsklassen ---------- */

.gedimmt { color: var(--farbe-text-gedimmt); }
.leise { color: var(--farbe-text-leise); font-size: 0.88rem; }
.klein { font-size: 0.88rem; }
.gross { font-size: 1.1rem; }
.fett { font-weight: 650; }
.mittig { text-align: center; }
.rechts { text-align: right; }
.zahlen { font-variant-numeric: tabular-nums; }

.abstand-0 { margin: 0 !important; }
.abstand-oben-xs { margin-top: var(--abstand-xs); }
.abstand-oben-s { margin-top: var(--abstand-s); }
.abstand-oben-m { margin-top: var(--abstand-m); }
.abstand-oben-l { margin-top: var(--abstand-l); }
.abstand-oben-xl { margin-top: var(--abstand-xl); }
.abstand-unten-s { margin-bottom: var(--abstand-s); }
.abstand-unten-m { margin-bottom: var(--abstand-m); }
.abstand-unten-l { margin-bottom: var(--abstand-l); }
.abstand-unten-xl { margin-bottom: var(--abstand-xl); }

.reihe { display: flex; gap: var(--abstand-m); align-items: center; flex-wrap: wrap; }
.reihe--zwischen { justify-content: space-between; }
.reihe--oben { align-items: flex-start; }
.spalte { display: flex; flex-direction: column; gap: var(--abstand-s); }

.trennung {
    border-top: 1px solid var(--farbe-rand);
    margin-top: var(--abstand-l);
    padding-top: var(--abstand-l);
}

/* ---------- Anmeldung und Installer ---------- */

.zentrierte-seite {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-l);
    background: linear-gradient(160deg, var(--farbe-flaeche-gedimmt) 0%, var(--farbe-hintergrund) 55%);
}

.anmeldekarte {
    width: 100%;
    max-width: 420px;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-l);
    padding: var(--abstand-xl);
    box-shadow: var(--schatten-l);
}

.anmeldekarte__marke {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--abstand-l);
    font-weight: 650;
}

.installer { max-width: 780px; margin: 0 auto; padding: var(--abstand-xl) var(--abstand-l) var(--abstand-xxl); }

.schrittleiste {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 var(--abstand-xl);
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.schritt {
    flex: 1;
    min-width: 92px;
    padding-top: 0.55rem;
    border-top: 3px solid var(--farbe-rand);
    font-size: 0.8rem;
    color: var(--farbe-text-leise);
}

.schritt--aktiv { border-top-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); font-weight: 650; }
.schritt--erledigt { border-top-color: var(--farbe-erfolg); color: var(--farbe-erfolg); }

.pruefliste { list-style: none; margin: 0; padding: 0; }

.pruefliste li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--farbe-rand);
    font-size: 0.93rem;
    margin: 0;
}

.pruefliste li:last-child { border-bottom: 0; }

.pruefmarke { font-weight: 700; flex-shrink: 0; width: 1.4rem; }
.pruefmarke--ok { color: var(--farbe-erfolg); }
.pruefmarke--fehler { color: var(--farbe-fehler); }
.pruefmarke--hinweis { color: var(--farbe-warnung); }

.prueftext { flex: 1; min-width: 0; }
.pruefwert { color: var(--farbe-text-gedimmt); font-size: 0.86rem; }

/* ---------- Fußzeile ---------- */

.fuss {
    border-top: 1px solid var(--farbe-rand);
    padding: var(--abstand-l);
    text-align: center;
    font-size: 0.84rem;
    color: var(--farbe-text-leise);
    background: var(--farbe-flaeche);
}

.fuss a { color: var(--farbe-text-gedimmt); }

/* ---------- Admin ---------- */

.adminnav {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: var(--abstand-xl);
    padding-bottom: var(--abstand-m);
    border-bottom: 1px solid var(--farbe-rand);
}

.adminnav__link {
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-s);
    font-size: 0.9rem;
    color: var(--farbe-text-gedimmt);
    text-decoration: none;
}

.adminnav__link:hover { background: var(--farbe-flaeche-gedimmt); color: var(--farbe-text); }
.adminnav__link.is-active { background: var(--farbe-text); color: var(--brand-surface, #fff); font-weight: 550; }

.filterleiste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--abstand-s);
    align-items: end;
    margin-bottom: var(--abstand-l);
}

.filterleiste .feld { margin-bottom: 0; }

.blaetterung {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    align-items: center;
    margin-top: var(--abstand-l);
    flex-wrap: wrap;
}

.blaetterung__link {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--farbe-rand-stark);
    border-radius: var(--radius-s);
    font-size: 0.88rem;
    text-decoration: none;
    color: var(--farbe-text-gedimmt);
    background: var(--farbe-flaeche);
}

.blaetterung__link:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.blaetterung__link.is-active { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: var(--brand-primary-contrast, #fff); font-weight: 600; }

/* ---------- Aufklappbereiche ---------- */

details {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    padding: 0.75rem 1rem;
    margin-bottom: var(--abstand-m);
    background: var(--farbe-flaeche);
}

details[open] { padding-bottom: var(--abstand-m); }

summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    list-style-position: outside;
}

summary:hover { color: var(--farbe-primaer); }

details > *:not(summary) { margin-top: var(--abstand-m); }

/* ---------- Responsiv ---------- */

@media (max-width: 1024px) {
    .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raster--seitlich { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .hauptnav { display: none; }
    .mobilnav { display: block; }

    body { padding-bottom: 62px; }

    .kopf__aktionen { margin-left: auto; border-left: 0; padding-left: 0; }
    .benutzer { display: none; }

    .inhalt { padding: var(--abstand-l) var(--abstand-m) var(--abstand-xl); }

    h1 { font-size: 1.5rem; }
    .interviewfrage { font-size: 1.25rem; }
    .karteikarte__vorderseite { font-size: 1.35rem; }
}

@media (max-width: 640px) {
    .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }

    .karte { padding: var(--abstand-m); border-radius: var(--radius-m); }
    .karte--weit { padding: var(--abstand-l); }

    .seitenkopf { flex-direction: column; align-items: stretch; gap: var(--abstand-m); }
    .seitenkopf .knopfgruppe { justify-content: stretch; }
    .seitenkopf .knopf { flex: 1; }

    .ring { flex-direction: column; align-items: flex-start; gap: var(--abstand-m); }
    .ring__grafik { width: 104px; height: 104px; }

    .bewertung__zeile { grid-template-columns: minmax(100px, 1fr) minmax(0, 1.4fr) 40px; gap: 0.6rem; font-size: 0.86rem; }

    .kennzahl__wert { font-size: 1.5rem; }

    .interview-buehne { padding: var(--abstand-l) var(--abstand-m) var(--abstand-xl); }

    .schrittleiste { gap: 0.2rem; }
    .schritt { min-width: 0; font-size: 0.66rem; }
}

/* ---------- Bewegungsreduktion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Druck ---------- */

@media print {
    .kopf, .mobilnav, .fuss, .knopfgruppe, .knopf { display: none !important; }
    body { background: #fff; }
    .karte { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    .inhalt { max-width: none; padding: 0; }
}

/* ---------- Markenlogo ----------
   Ein hochgeladenes Logo kann hoch, breit oder quadratisch sein. Das Layout
   darf daran nicht zerbrechen: feste Hoehe, begrenzte Breite, object-fit. */

.marke__logo {
    height: 30px;
    max-width: 190px;
    width: auto;
    object-fit: contain;
    display: block;
}

.anmeldekarte__marke .marke__logo {
    height: 38px;
    max-width: 220px;
}

.anmeldebild {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--radius-m);
    margin-bottom: var(--abstand-l);
}

@media (max-width: 640px) {
    .marke__logo { max-width: 130px; }
}
/* ---------- Brandingvorschau ----------
   Nur in der Verwaltung. Die Vorschau setzt ihre Farben als Inline-Styles aus
   den aufgeloesten Tokens; hier stehen nur Abstaende und Anordnung. */

.vorschau {
    padding: var(--abstand-l);
    border: 1px solid var(--farbe-rand);
}

.vorschau__karte {
    padding: var(--abstand-l);
    max-width: 520px;
}

.vorschau__kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--abstand-m);
}

.vorschau__aktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    margin: var(--abstand-m) 0;
}

.vorschau__knopf {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.vorschau input[type="text"] {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font: inherit;
}

/* =========================================================================
   Sprint 010 — Komponenten

   Alles hier benutzt ausschliesslich die Variablen von oben. Kein fester
   Farbwert, der eine Marke meint: was der Mandant bestimmt, kommt über
   --farbe-primaer und die übrigen Brückenvariablen an.
   ========================================================================= */

/* ---------- Kartenhierarchie ---------------------------------------------
   Drei Stufen statt einer. Wenn jede Fläche gleich stark ist, ist keine
   stark -- und eine Übersicht wird zur Kartensuppe.

     .karte            Standard: Rand, kein Schatten
     .karte--erhoben   trägt den Blick: leichter Schatten, kein harter Rand
     .flaeche          gar keine Karte: nur Abstand und eine Trennlinie
   ------------------------------------------------------------------------ */

.karte {
    box-shadow: none;
}

.karte--erhoben {
    border-color: transparent;
    box-shadow: var(--schatten-m);
}

.karte--verbunden { border-radius: var(--radius-m); }

.flaeche { display: block; }
.flaeche + .flaeche { margin-top: var(--abstand-xl); }

a.karte:hover { transform: translateY(-1px); }

/* ---------- Abschnitte ---------------------------------------------------- */

.abschnitt { margin-bottom: var(--abstand-xxl); }
.abschnitt:last-child { margin-bottom: 0; }

.abschnittskopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--abstand-m);
    margin-bottom: var(--abstand-m);
    flex-wrap: wrap;
}

.abschnittskopf h2 {
    margin: 0;
    font-size: var(--text-h2);
}

.abschnittskopf__hinweis {
    margin: 0;
    color: var(--farbe-text-gedimmt);
    font-size: var(--text-klein);
}

/* ---------- Hero ---------------------------------------------------------
   Der Einstieg einer Seite. Eine Aussage, ein Satz, eine Handlung -- keine
   zehn Kennzahlen. */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--abstand-l);
    margin-bottom: var(--abstand-xl);
}

.hero__text { max-width: 46ch; }

.hero__titel {
    font-family: var(--brand-font-heading, var(--schrift));
    font-size: var(--text-h1);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 640;
    margin: 0 0 var(--abstand-xs);
}

.hero__satz {
    margin: 0;
    color: var(--farbe-text-gedimmt);
    font-size: var(--text-gross);
    line-height: 1.5;
}

.hero__aktion { display: flex; gap: var(--abstand-s); align-items: center; }

/* ---------- Kacheln (kleine Kennzahlen) ---------------------------------- */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--abstand-m);
}

.kachel {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    padding: var(--abstand-m);
    min-width: 0;
}

.kachel__wert {
    display: block;
    font-family: var(--brand-font-heading, var(--schrift));
    font-size: 1.75rem;
    line-height: 1.1;
    font-weight: 640;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--farbe-text);
}

.kachel__wert small {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--farbe-text-leise);
}

.kachel__label {
    display: block;
    margin-top: var(--abstand-xs);
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
    line-height: 1.35;
}

/* ---------- Statuschips --------------------------------------------------
   Jeder Chip trägt Zeichen UND Wort. Farbe ist die dritte Information, nie
   die einzige (§10, §73). Deshalb ist „abgeschlossen" auch keine grüne
   Fläche: bei einer grünen Marke wäre sonst nicht mehr unterscheidbar, ob
   eine Farbe einen Zustand meint oder das Erscheinungsbild. */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.5rem;
    border-radius: var(--radius-rund);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text-gedimmt);
    vertical-align: middle;
}

.chip__symbol { width: 12px; height: 12px; flex: none; }

.chip--pflicht {
    background: var(--farbe-text);
    border-color: var(--farbe-text);
    color: var(--farbe-flaeche);
}

.chip--freiwillig {
    background: transparent;
    border-style: dashed;
}

.chip--fertig {
    background: var(--farbe-flaeche);
    border-color: var(--farbe-rand-stark);
    color: var(--farbe-text);
}

.chip--fertig .chip__symbol { color: var(--farbe-erfolg); }

.chip--laeuft {
    background: var(--farbe-info-hell);
    border-color: transparent;
    color: var(--farbe-info);
}

.chip--ueberfaellig {
    background: var(--farbe-fehler-hell);
    border-color: transparent;
    color: var(--farbe-fehler);
}

.chip--gesperrt {
    background: var(--farbe-warnung-hell);
    border-color: transparent;
    color: var(--farbe-warnung);
}

.chip--entwurf { border-style: dashed; }

.chip--gross { font-size: var(--text-klein); padding: 0.28rem 0.65rem; }

.chipreihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-xs);
    align-items: center;
}

/* ---------- Fortschritt -------------------------------------------------- */

.balken {
    height: 6px;
    border-radius: var(--radius-rund);
    background: var(--farbe-flaeche-gedimmt);
    overflow: hidden;
}

.balken__wert {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--farbe-primaer);
    transition: width 0.4s ease;
}

.balken--stark { height: 10px; }
.balken--fertig .balken__wert { background: var(--farbe-erfolg); }

.fortschrittszeile {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
    font-variant-numeric: tabular-nums;
}

.fortschrittszeile .balken { flex: 1; min-width: 4rem; }

/* ---------- Sequenz (Lernpfad) -------------------------------------------
   Eine Abfolge, keine U-Bahn-Karte. Erledigt, aktuell, offen -- und man
   sieht auf einen Blick, wo man steht. */

.sequenz {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sequenz__punkt {
    position: relative;
    display: flex;
    gap: var(--abstand-m);
    padding: 0 0 var(--abstand-m) 0;
    margin: 0;
}

.sequenz__punkt::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: 0;
    width: 2px;
    background: var(--farbe-rand);
}

.sequenz__punkt:last-child { padding-bottom: 0; }
.sequenz__punkt:last-child::before { display: none; }

.sequenz__zeichen {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-rund);
    border: 2px solid var(--farbe-rand-stark);
    background: var(--farbe-flaeche);
    display: grid;
    place-items: center;
    color: var(--farbe-text-leise);
    z-index: 1;
}

.sequenz__zeichen svg { width: 12px; height: 12px; }

.sequenz__punkt--fertig .sequenz__zeichen {
    border-color: var(--farbe-erfolg);
    background: var(--farbe-erfolg);
    color: #fff;
}

.sequenz__punkt--aktuell .sequenz__zeichen {
    border-color: var(--farbe-primaer);
    color: var(--farbe-primaer);
    box-shadow: 0 0 0 4px var(--farbe-primaer-hell);
}

.sequenz__text { min-width: 0; padding-top: 1px; }

.sequenz__titel {
    display: block;
    font-weight: 550;
    color: var(--farbe-text);
    line-height: 1.4;
}

.sequenz__punkt--fertig .sequenz__titel { color: var(--farbe-text-gedimmt); }

.sequenz__hinweis {
    display: block;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
    margin-top: 1px;
}

/* ---------- Modulkarte ---------------------------------------------------- */

.modulkarte {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-s);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-l);
    padding: var(--abstand-l);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
    min-width: 0;
}

.modulkarte:hover {
    border-color: var(--farbe-rand-stark);
    box-shadow: var(--schatten-m);
    transform: translateY(-1px);
    color: inherit;
}

.modulkarte__kopf {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-s);
    justify-content: space-between;
}

.modulkarte__titel {
    margin: 0;
    font-size: var(--text-h3);
    line-height: 1.35;
}

.modulkarte__text {
    margin: 0;
    color: var(--farbe-text-gedimmt);
    font-size: var(--text-klein);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.modulkarte__fuss {
    margin-top: auto;
    padding-top: var(--abstand-s);
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.modulkarte__inhalt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.7rem;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.modulkarte__inhalt span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.modulkarte__inhalt svg { width: 13px; height: 13px; opacity: 0.75; }

/* ---------- Wissenskarte -------------------------------------------------
   Bewertet und unbewertet sind zwei Zustände, nicht ein Wert und eine Null.
   Ein unbewertetes Gebiet bekommt deshalb keinen Balken -- es bekommt einen
   Satz. */

.wissenskarte {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    padding: var(--abstand-m);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-s);
    min-width: 0;
}

.wissenskarte__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--abstand-s);
}

.wissenskarte__name {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1.35;
}

.wissenskarte__wert {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    font-size: var(--text-gross);
    color: var(--farbe-text);
    white-space: nowrap;
}

.wissenskarte__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-s);
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.wissenskarte--offen {
    background: var(--farbe-flaeche-gedimmt);
    border-style: dashed;
    border-color: var(--farbe-rand-stark);
}

.wissenskarte--offen .wissenskarte__name { color: var(--farbe-text-gedimmt); }

.wissenskarte__offen {
    margin: 0;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
    line-height: 1.5;
}

/* ---------- Medaillon (Abzeichen) ---------------------------------------- */

.medaillons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--abstand-m);
}

.medaillon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--abstand-xs);
    padding: var(--abstand-m) var(--abstand-s);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
}

.medaillon__scheibe {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-rund);
    display: grid;
    place-items: center;
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    border: 1px solid color-mix(in srgb, var(--farbe-primaer) 25%, transparent);
    margin-bottom: var(--abstand-xs);
}

.medaillon__scheibe svg { width: 24px; height: 24px; }

.medaillon__name {
    font-size: var(--text-klein);
    font-weight: 650;
    line-height: 1.3;
}

.medaillon__text {
    margin: 0;
    font-size: var(--text-label);
    color: var(--farbe-text-gedimmt);
    line-height: 1.4;
}

.medaillon__datum {
    font-size: var(--text-label);
    color: var(--farbe-text-leise);
    font-variant-numeric: tabular-nums;
}

/* ---------- Missionskarte ------------------------------------------------- */

.mission {
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    padding: var(--abstand-m);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-s);
}

.mission__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-s);
}

.mission__titel { margin: 0; font-size: var(--text-body); font-weight: 650; }

.mission__text {
    margin: 0;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
    line-height: 1.5;
}

.mission__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-s);
    font-size: var(--text-label);
    color: var(--farbe-text-leise);
    flex-wrap: wrap;
}

/* ---------- Regelgruppen (Zielgruppenbau) --------------------------------
   Der Screen, an dem sich entscheidet, ob jemand die Zielgruppenlogik
   versteht. UND steht innerhalb, ODER dazwischen -- und beides muss man
   sehen, nicht lesen. */

.regelgruppe {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche);
    overflow: hidden;
}

.regelgruppe__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-s);
    padding: var(--abstand-s) var(--abstand-m);
    background: var(--farbe-flaeche-gedimmt);
    border-bottom: 1px solid var(--farbe-rand);
}

.regelgruppe__name {
    font-size: var(--text-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 650;
    color: var(--farbe-text-gedimmt);
}

.regelgruppe__koerper { padding: var(--abstand-m); }

.regel {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-s);
    padding: var(--abstand-s) 0;
    min-width: 0;
}

.regel + .regel { border-top: 1px dashed var(--farbe-rand); }

.regel__und {
    flex: none;
    width: 2.6rem;
    font-size: var(--text-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--farbe-text-leise);
    padding-top: 0.28rem;
}

.regel__text { min-width: 0; flex: 1; }

.regel__dimension {
    display: block;
    font-size: var(--text-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.regel__werte { display: flex; flex-wrap: wrap; gap: var(--abstand-xs); }

.regel__wert {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.55rem;
    border-radius: var(--radius-s);
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    font-size: var(--text-klein);
    font-weight: 600;
}

.oder {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    margin: var(--abstand-m) 0;
}

.oder::before,
.oder::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--farbe-rand-stark);
}

.oder__wort {
    font-size: var(--text-klein);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--farbe-text-gedimmt);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand-stark);
    border-radius: var(--radius-rund);
    padding: 0.2rem 0.9rem;
}

/* ---------- Vorschau der Zielgruppe --------------------------------------- */

.treffer {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    padding: var(--abstand-s) 0;
}

.treffer + .treffer { border-top: 1px solid var(--farbe-rand); }

.treffer__zeichen {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-rund);
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    display: grid;
    place-items: center;
    font-size: var(--text-klein);
    font-weight: 650;
}

.treffer__text { min-width: 0; line-height: 1.3; }
.treffer__name { display: block; font-weight: 600; font-size: var(--text-body); }

.treffer__zusatz {
    display: block;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Leerzustand --------------------------------------------------- */

.leerzustand {
    text-align: center;
    padding: var(--abstand-xl) var(--abstand-l);
    border: 1px dashed var(--farbe-rand-stark);
    border-radius: var(--radius-l);
    background: var(--farbe-flaeche);
}

.leerzustand__zeichen {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--abstand-s);
    color: var(--farbe-text-leise);
    opacity: 0.6;
}

.leerzustand__titel { margin: 0 0 var(--abstand-xs); font-size: var(--text-h3); }

.leerzustand p {
    margin: 0 auto;
    max-width: 40ch;
    color: var(--farbe-text-gedimmt);
    font-size: var(--text-klein);
}

.leerzustand .knopfgruppe { justify-content: center; margin-top: var(--abstand-m); }

/* ---------- Hinweisblöcke -------------------------------------------------- */

.hinweisblock {
    display: flex;
    gap: var(--abstand-s);
    padding: var(--abstand-m);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche-gedimmt);
    border: 1px solid var(--farbe-rand);
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
    line-height: 1.55;
}

.hinweisblock svg { width: 16px; height: 16px; flex: none; margin-top: 2px; opacity: 0.7; }
.hinweisblock p { margin: 0; }
.hinweisblock p + p { margin-top: var(--abstand-xs); }

/* ---------- Icons --------------------------------------------------------- */

.sym {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sym--gross { width: 20px; height: 20px; }

/* ---------- Tabellen: Ergänzungen ----------------------------------------- */

.tabelle tbody tr:hover { background: var(--farbe-flaeche-gedimmt); }

.tabelle--ruhig th {
    font-size: var(--text-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
}

.tabellenrahmen {
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    overflow-x: auto;
    background: var(--farbe-flaeche);
}

.tabellenrahmen > .tabelle { margin: 0; }

/* ---------- Responsiv: App Shell ------------------------------------------ */

@media (max-width: 1100px) {
    .shell { grid-template-columns: 1fr; }

    .seitenleiste {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(84vw, 300px);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 50;
        box-shadow: var(--schatten-l);
    }

    .shell.is-offen .seitenleiste { transform: translateX(0); }
    .shell.is-offen .shell__schleier { display: block; }

    .shell__schalter { display: inline-flex; }
}

@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; align-items: start; }
    .hero__aktion .knopf { flex: 1; }
    .topbar__suche { display: none; }
    .topbar { padding-inline: var(--abstand-m); }
    .inhalt { padding: var(--abstand-l) var(--abstand-m) var(--abstand-xxl); }
}

@media (max-width: 640px) {
    :root { --text-h1: 1.6rem; --text-display: 2rem; --text-metrik: 1.85rem; }

    .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .medaillons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .konto__text { display: none; }
    .regel { flex-direction: column; gap: var(--abstand-xs); }
    .regel__und { padding-top: 0; }
}

/* ---------- Bewegung ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .seitenleiste { transition: none; }
    .balken__wert { transition: none; }
    a.karte:hover, .modulkarte:hover { transform: none; }
}

/* ---------- Marke in der Seitenleiste -------------------------------------
   Ein Plattformname kann lang sein. Er darf zweizeilig werden; abschneiden
   wäre die schlechtere Antwort, weil dann niemand mehr liest, wo er ist. */

.seitenleiste__kopf .marke {
    font-size: var(--text-body);
    line-height: 1.25;
    white-space: normal;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: var(--abstand-s) 0;
}

.seitenleiste__kopf .marke > span:last-child {
    overflow-wrap: anywhere;
}

.seitenleiste__kopf .marke__zeichen { flex: none; }

/* ---------- Verpflichtungskarte ------------------------------------------- */

.verpflichtung__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-m);
}

.verpflichtung__titel { min-width: 0; }
.verpflichtung__titel h3 { font-size: var(--text-h3); line-height: 1.35; }
.verpflichtung__titel a { color: inherit; text-decoration: none; }
.verpflichtung__titel a:hover { text-decoration: underline; }

.verpflichtung__frist {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    flex: none;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
    text-align: right;
}

.verpflichtung__frist svg { width: 15px; height: 15px; opacity: 0.65; }
.verpflichtung__frist .t-label { display: block; }
.verpflichtung__frist strong { font-variant-numeric: tabular-nums; }
.verpflichtung__frist.is-ueberfaellig { color: var(--farbe-fehler); }
.verpflichtung__frist.is-ueberfaellig svg { opacity: 1; }

.verpflichtung__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    margin-top: var(--abstand-m);
    padding-top: var(--abstand-m);
    border-top: 1px solid var(--farbe-rand);
    flex-wrap: wrap;
}

.verpflichtung__naechstes {
    min-width: 0;
    font-size: var(--text-klein);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.verpflichtung__naechstes .t-label { flex: none; }
.verpflichtung__naechstes svg { width: 15px; height: 15px; color: var(--farbe-erfolg); }

@media (max-width: 640px) {
    .verpflichtung__kopf { flex-direction: column; gap: var(--abstand-s); }
    .verpflichtung__frist { text-align: left; }
    .verpflichtung__frist .t-label { display: inline; }
    .verpflichtung__fuss .knopf { width: 100%; }
}

/* ---------- Vorschlag (Empfehlungskarte) ---------------------------------- */

.vorschlag {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    padding: var(--abstand-m);
    text-decoration: none;
    color: inherit;
}

.vorschlag__symbol {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-s);
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text-gedimmt);
    display: grid;
    place-items: center;
}

.vorschlag__symbol svg { width: 18px; height: 18px; }

.vorschlag__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vorschlag__text strong { font-weight: 600; line-height: 1.35; }

.vorschlag__pfeil {
    margin-left: auto;
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--farbe-text-leise);
}

.vorschlag:hover .vorschlag__symbol {
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
}

/* ---------- Lernreise ------------------------------------------------------ */

.spalte--weit { gap: var(--abstand-l); }

.verpflichtung--blank { display: block; }

.sequenzblock {
    margin-top: var(--abstand-m);
    padding-top: var(--abstand-m);
    border-top: 1px solid var(--farbe-rand);
}

.sequenzblock > summary {
    cursor: pointer;
    font-size: var(--text-klein);
    font-weight: 600;
    color: var(--farbe-text-gedimmt);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
}

.sequenzblock > summary::-webkit-details-marker { display: none; }

.sequenzblock > summary::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
    flex: none;
}

.sequenzblock[open] > summary::before { transform: rotate(90deg); }
.sequenzblock > summary:hover { color: var(--farbe-text); }
.sequenzblock .sequenz { margin-top: var(--abstand-m); }

/* ---------- Modulraster ----------------------------------------------------
   Drei Spalten auf grossen Schirmen, zwei auf mittleren, eine auf kleinen.
   Die Karten sind bewusst gleichförmig: Der Unterschied zwischen zwei
   Personen soll an der Zahl der Karten sichtbar werden, nicht daran, dass
   jede Karte anders aussieht. */

.modulraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: var(--abstand-m);
    align-items: stretch;
}

@media (max-width: 640px) {
    .modulraster { grid-template-columns: 1fr; }
}

/* ---------- Stufenbanner (Erfolge) -----------------------------------------
   Ein ruhiger Kopf statt eines Pokals. Die Zahl ist gross, weil sie die
   Aussage ist; alles daneben bleibt klein. */

.stufenbanner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--abstand-xl);
    padding: var(--abstand-l);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-l);
}

.stufenbanner__zahl { display: flex; flex-direction: column; gap: 2px; }
.stufenbanner__zahl .t-metrik { color: var(--farbe-primaer); }

.stufenbanner__balken { min-width: 0; }

.stufenbanner__serie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-left: var(--abstand-xl);
    border-left: 1px solid var(--farbe-rand);
    text-align: center;
}

.stufenbanner__serie svg { color: var(--farbe-primaer); }
.stufenbanner__serie .t-metrik { font-size: 1.6rem; }

@media (max-width: 860px) {
    .stufenbanner {
        grid-template-columns: 1fr;
        gap: var(--abstand-m);
    }

    .stufenbanner__serie {
        flex-direction: row;
        align-items: center;
        gap: var(--abstand-s);
        padding-left: 0;
        padding-top: var(--abstand-m);
        border-left: 0;
        border-top: 1px solid var(--farbe-rand);
        text-align: left;
    }
}

/* ---------- Zielgruppen-Baukasten ------------------------------------------
   Regelwerk links, Wirkung rechts. Die Vorschau bleibt beim Scrollen stehen,
   weil sie die Frage beantwortet, die man beim Bauen dauernd hat. */

.zielgruppenraster {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: var(--abstand-xl);
    align-items: start;
}

.zielgruppenvorschau {
    position: sticky;
    top: calc(var(--hoehe-topbar) + var(--abstand-l));
    display: flex;
    flex-direction: column;
    gap: var(--abstand-m);
}

.trefferzahl {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    margin-bottom: var(--abstand-s);
}

.trefferzahl .t-metrik { color: var(--farbe-primaer); }

.trefferliste {
    margin-top: var(--abstand-m);
    border-top: 1px solid var(--farbe-rand);
    max-height: 22rem;
    overflow-y: auto;
}

.regel__wert svg { opacity: 0.65; margin-right: 0.3rem; }

.regel__wert--aus {
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text-gedimmt);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.regel__wert--zusatz {
    background: transparent;
    border: 1px dashed var(--farbe-rand-stark);
    color: var(--farbe-text-leise);
    font-weight: 500;
}

.regelformular { margin-top: var(--abstand-s); }

.regelformular > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-klein);
    font-weight: 600;
    color: var(--farbe-primaer);
    cursor: pointer;
    padding: 0.3rem 0;
    list-style: none;
}

.regelformular > summary::-webkit-details-marker { display: none; }
.regelformular > summary::before { content: "+"; font-weight: 700; }
.regelformular[open] > summary::before { content: "−"; }

.regelformular > form {
    margin-top: var(--abstand-s);
    padding: var(--abstand-m);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche-gedimmt);
}

.stammdaten > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--abstand-s);
    cursor: pointer;
    list-style: none;
}

.stammdaten > summary::-webkit-details-marker { display: none; }

@media (max-width: 1080px) {
    .zielgruppenraster { grid-template-columns: 1fr; }
    .zielgruppenvorschau { position: static; }
}

/* ---------- Kleinteile, die mehrere Verwaltungsseiten brauchen ------------- */

.brotkrume {
    margin: 0 0 0.35rem;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.brotkrume a { color: inherit; text-decoration: none; }
.brotkrume a:hover { color: var(--farbe-primaer); text-decoration: underline; }

.seitenkopf__aktionen {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    flex-wrap: wrap;
}

.karte__hinweis {
    margin: 0.2rem 0 0;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.leerzustand--eng {
    padding: var(--abstand-l) var(--abstand-m);
    border: 0;
    background: transparent;
}

.leerzustand--eng .leerzustand__zeichen { width: 26px; height: 26px; }

.schalterzeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: var(--abstand-m) 0;
    font-size: var(--text-body);
}

.schalterzeile input { margin: 0; }

.knopf--breit { width: 100%; justify-content: center; }

.sym--klein { width: 14px; height: 14px; }

/* ---------- Verwaltungsübersicht ------------------------------------------ */

.kacheln--5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.kachel--klickbar {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.kachel--klickbar:hover {
    border-color: var(--farbe-primaer);
    transform: translateY(-1px);
}

.kachel__wert--wort { font-size: 1.5rem; }

.bestandskarte {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: inherit;
}

.bestandskarte__symbol { width: 18px; height: 18px; color: var(--farbe-text-leise); }
.bestandskarte__wert { font-size: 1.5rem; font-weight: 640; line-height: 1.1; }

.bestandskarte__label {
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.bestandskarte:hover { border-color: var(--farbe-primaer); }
.bestandskarte:hover .bestandskarte__symbol { color: var(--farbe-primaer); }

/* ---------- Organisationsbaum ----------------------------------------------
   Die Einrückung ist eine Variable auf dem Knoten, damit die Linie mitwandert
   und nicht als leeres Element im Markup steht. */

.chip--warnung {
    background: var(--farbe-warnung-hell, var(--farbe-flaeche-gedimmt));
    border-color: transparent;
    color: var(--farbe-warnung, var(--farbe-text-gedimmt));
}

.chip--fehler {
    background: var(--farbe-fehler-hell);
    border-color: transparent;
    color: var(--farbe-fehler);
}

.baum { border-top: 1px solid var(--farbe-rand); }

.baum__knoten { border-bottom: 1px solid var(--farbe-rand); }

.baum__zeile {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    padding: 0.6rem var(--abstand-s);
    cursor: pointer;
    list-style: none;
    min-width: 0;
}

.baum__zeile::-webkit-details-marker { display: none; }
.baum__zeile:hover { background: var(--farbe-flaeche-gedimmt); }

.baum__einzug {
    flex: none;
    width: calc(var(--tiefe, 0) * 1.35rem);
    height: 1px;
}

.baum__knoten[style*="--tiefe: 0"] .baum__einzug { display: none; }

.baum__name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    min-width: 0;
}

.baum__symbol { width: 15px; height: 15px; color: var(--farbe-text-leise); flex: none; }

.baum__art {
    font-size: var(--text-label);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
}

.baum__personen {
    margin-left: auto;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
    white-space: nowrap;
}

/* Eine Untereinheit bekommt eine Linie nach links, damit die Zugehörigkeit
   sichtbar ist und nicht nur aus dem Abstand erraten werden muss. */
.baum__knoten:not([style*="--tiefe: 0"]) .baum__name::before {
    content: "";
    width: 0.75rem;
    height: 1px;
    background: var(--farbe-rand-stark);
    flex: none;
}

.baum__inhalt {
    padding: var(--abstand-m);
    padding-left: calc(var(--tiefe, 0) * 1.35rem + var(--abstand-m));
    background: var(--farbe-flaeche-gedimmt);
    border-top: 1px dashed var(--farbe-rand);
}

@media (max-width: 720px) {
    .baum__art { display: none; }
    .baum__inhalt { padding-left: var(--abstand-m); }
}

/* Aufklappbare Elemente ohne eigenen Rahmen: Der Grundstil für `details`
   zeichnet eine Box: richtig für ein einzelnes Ausklappfeld im Formular,
   falsch für eine Baumzeile und für ein Unterformular, das bereits in einer
   Karte steht. */
.baum__knoten,
.regelformular {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}

.baum__knoten { border-bottom: 1px solid var(--farbe-rand); }

.baum__knoten > *:not(summary),
.regelformular > *:not(summary) { margin-top: 0; }

/* ---------- Modulverwaltung ------------------------------------------------
   Links wird gebaut, rechts steht die Wirkung. */

.modulraster--verwaltung {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: var(--abstand-xl);
    align-items: start;
}

.modulseitenspalte {
    position: sticky;
    top: calc(var(--hoehe-topbar) + var(--abstand-l));
    display: flex;
    flex-direction: column;
    gap: var(--abstand-m);
}

.wahlkarten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--abstand-s);
    margin-bottom: var(--abstand-m);
}

.wahlkarte {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: var(--abstand-m);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.wahlkarte:hover { border-color: var(--farbe-rand-stark); }

.wahlkarte:has(input:checked) {
    border-color: var(--farbe-primaer);
    background: var(--farbe-primaer-hell);
}

.wahlkarte input { margin-top: 0.2rem; flex: none; }
.wahlkarte__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.inhaltsliste { margin: var(--abstand-m) 0; border-top: 1px solid var(--farbe-rand); }

.inhaltszeile {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--farbe-rand);
    flex-wrap: wrap;
}

.inhaltszeile__text { flex: 1; min-width: 12rem; font-size: var(--text-body); }
.inhaltszeile__aktionen { display: flex; gap: 0.35rem; margin-left: auto; }

.zufuegen {
    display: flex;
    align-items: flex-end;
    gap: var(--abstand-s);
    margin-top: var(--abstand-m);
    flex-wrap: wrap;
}

.zufuegen .feld { flex: 1; min-width: 12rem; }

.zielgruppenliste { margin: var(--abstand-s) 0; }

.zielgruppenzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-s);
    padding: 0.45rem 0;
    font-size: var(--text-body);
}

.zielgruppenzeile + .zielgruppenzeile { border-top: 1px solid var(--farbe-rand); }

.knopfgruppe--gestapelt {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: var(--abstand-m);
}

.hinweisblock--warnung {
    background: var(--farbe-warnung-hell);
    border-color: transparent;
    color: #7d4500;
}

@media (max-width: 1080px) {
    .modulraster--verwaltung { grid-template-columns: 1fr; }
    .modulseitenspalte { position: static; }
}

.tabelle__titel {
    font-weight: 600;
    color: var(--farbe-text);
    text-decoration: none;
}

.tabelle__titel:hover { color: var(--farbe-primaer); text-decoration: underline; }

/* `.knopfgruppe` zentriert seine Elemente; gestapelt sollen sie die volle
   Breite haben -- sonst steht eine Spalte schmaler Knöpfe in der Mitte. */
.knopfgruppe--gestapelt { align-items: stretch; }
.knopfgruppe--gestapelt form { display: block; }

.trefferzahl { gap: 0.15rem; }

/* ---------- Pfadsequenz (Verwaltung) --------------------------------------
   Dieselbe Idee wie die Sequenz beim Lernenden, aber mit Werkzeugen: die
   Nummer trägt die Reihenfolge, die Chips tragen die Bedeutung. */

.pfadsequenz {
    list-style: none;
    margin: var(--abstand-m) 0 0;
    padding: 0;
    counter-reset: none;
}

.pfadschritt {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-m);
    padding: var(--abstand-s) 0;
    border-top: 1px solid var(--farbe-rand);
    flex-wrap: wrap;
}

.pfadschritt:last-child { border-bottom: 1px solid var(--farbe-rand); }

.pfadschritt__nummer {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-rund);
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    display: grid;
    place-items: center;
    font-size: var(--text-klein);
    font-weight: 650;
    margin-top: 2px;
}

.pfadschritt__text {
    flex: 1;
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pfadschritt__titel {
    font-weight: 600;
    color: var(--farbe-text);
    text-decoration: none;
}

.pfadschritt__titel:hover { color: var(--farbe-primaer); text-decoration: underline; }

.pfadschritt__aktionen {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.fortschrittszeile--eng { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 7rem; }
.fortschrittszeile--eng .balken { width: 4rem; }

/* Eine Schrittnummer vor einer Überschrift: macht aus mehreren Karten einen
   erkennbaren Ablauf, ohne dass daraus ein Wizard mit eigener Logik wird. */
.schrittnummer {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-rund);
    background: var(--farbe-primaer);
    color: #fff;
    font-size: var(--text-label);
    font-weight: 700;
    vertical-align: 1px;
    margin-right: 0.35rem;
}

/* Bausteinkarte: ein Verweis auf einen eigenen Verwaltungsbereich. */
.bausteinkarte {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    text-decoration: none;
    color: inherit;
}

.bausteinkarte__symbol {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--farbe-primaer);
}

.bausteinkarte__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bausteinkarte__pfeil { width: 16px; height: 16px; margin-left: auto; color: var(--farbe-text-leise); }
.bausteinkarte:hover { border-color: var(--farbe-primaer); }

td code.t-label { margin-left: 0.4rem; font-size: 0.7rem; }

/* ---------- Erscheinungsbild: Formular links, Wirkung rechts --------------- */

.brandingraster {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
    gap: var(--abstand-xl);
    align-items: start;
}

.brandingvorschau {
    position: sticky;
    top: calc(var(--hoehe-topbar) + var(--abstand-l));
}

/* Eine angedeutete Kopfleiste, damit die Vorschau nach Anwendung aussieht
   und nicht nach Farbmuster. */
.vorschau__leiste {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    margin-bottom: var(--abstand-m);
}

.vorschau__punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.65;
}

@media (max-width: 1080px) {
    .brandingraster { grid-template-columns: 1fr; }
    .brandingvorschau { position: static; }
}

/* ---------- Lesen ----------------------------------------------------------
   Eine Lektion ist Text, kein Datensatz. Also keine Karte um den Text, eine
   begrenzte Zeilenlänge und alles Beiwerk an den Rand. */

.lesekopf {
    max-width: var(--breite-lesen);
    margin-bottom: var(--abstand-xl);
}

.lesekopf h1 { margin-bottom: 0.4rem; }

.lesekopf__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 var(--abstand-s);
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.lesekopf__beschreibung {
    margin: 0;
    color: var(--farbe-text-gedimmt);
    font-size: var(--text-gross);
}

.lesefortschritt {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    margin-top: var(--abstand-m);
}

.lesefortschritt .balken { flex: 1; max-width: 16rem; }

.leseraster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: var(--abstand-xl);
    align-items: start;
}

.lesespalte { min-width: 0; }
.lesetext { max-width: var(--breite-lesen); }

.lesetext__titel {
    font-size: var(--text-h2);
    margin: 0 0 var(--abstand-m);
}

.lesetext .lerninhalt { font-size: var(--text-gross); line-height: 1.7; }
.lesetext .lerninhalt p { margin: 0 0 1.1em; }
.lesetext .lerninhalt > *:last-child { margin-bottom: 0; }

.leseabschluss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    max-width: var(--breite-lesen);
    margin-top: var(--abstand-xl);
    padding-top: var(--abstand-l);
    border-top: 1px solid var(--farbe-rand);
    flex-wrap: wrap;
}

.leseabschluss__weiter {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
    margin-left: auto;
}

.lesespalte__rand {
    position: sticky;
    top: calc(var(--hoehe-topbar) + var(--abstand-l));
    display: flex;
    flex-direction: column;
    gap: var(--abstand-l);
}

.randblock__titel {
    margin: 0 0 var(--abstand-s);
    font-size: var(--text-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
    font-weight: 650;
}

.abschnittsliste { list-style: none; margin: 0; padding: 0; }

.abschnittslink a {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.32rem 0;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
    text-decoration: none;
    line-height: 1.35;
}

.abschnittslink a:hover { color: var(--farbe-primaer); }
.abschnittslink.is-active a { color: var(--farbe-text); font-weight: 600; }

.abschnittslink__marke {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-rund);
    border: 1px solid var(--farbe-rand-stark);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    color: var(--farbe-text-leise);
    margin-top: 1px;
}

.abschnittslink__marke svg { width: 11px; height: 11px; color: var(--farbe-erfolg); }
.abschnittslink.is-active .abschnittslink__marke { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }

.randliste {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
}

.randliste li { padding: 0.22rem 0; line-height: 1.4; }
.randliste li + li { border-top: 1px solid var(--farbe-rand); }

@media (max-width: 980px) {
    .leseraster { grid-template-columns: 1fr; }
    .lesespalte__rand { position: static; order: -1; }
}

/* ---------- Karteikarten: Bewertung ----------------------------------------
   Drei gleich grosse Flächen statt drei verschieden wichtiger Knöpfe. Die
   Bewertung ist eine Selbsteinschätzung -- keine davon ist die „richtige"
   Antwort, also sieht auch keine nach Hauptaktion aus. */

.karteikarte__kategorie {
    margin: 0 0 var(--abstand-m);
    font-size: var(--text-label);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
    font-weight: 650;
}

.knopfgruppe--mittig { justify-content: center; }

.knopf--gross { padding: 0.75rem 1.6rem; font-size: var(--text-gross); }

.bewertung { margin-top: var(--abstand-l); }

.bewertung__reihe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--abstand-s);
}

.bewertungsknopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.85rem 0.5rem;
    min-height: 64px;
    border: 1px solid var(--farbe-rand-bedienung);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.bewertungsknopf:hover { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }

.bewertungsknopf:focus-visible {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 2px;
}

.bewertungsknopf--sicher { border-color: var(--farbe-erfolg); }
.bewertungsknopf--sicher:hover { background: var(--farbe-erfolg-hell, var(--farbe-primaer-hell)); }

.bewertungsknopf__taste {
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--farbe-text-leise);
}

/* Ein aktiver Filter im Segmentband -- bisher stand das als Inline-Stil im
   Template und liess sich nicht mit dem Mandantenthema mitfärben. */
.segment.is-active {
    background: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
    color: #fff;
    font-weight: 550;
}

@media (max-width: 520px) {
    .bewertung__reihe { grid-template-columns: 1fr; }
}

/* ---------- Prüfen: Quiz, Test, Szenario -----------------------------------
   Eine schmale Bahn, in der nichts ablenkt. Die Frage ist die Überschrift der
   Seite; alles andere ist Werkzeug. */

.pruefungsbahn {
    max-width: 52rem;
    margin: 0 auto;
}

.pruefungskopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    margin-bottom: var(--abstand-s);
}

.fragetitel {
    font-size: var(--text-h2);
    line-height: 1.35;
    margin: 0 0 var(--abstand-m);
}

.option--fest { cursor: default; }
.option--fest:hover { border-color: var(--farbe-rand-stark); background: var(--farbe-flaeche); }
.option--fest.option--richtig:hover { border-color: var(--farbe-erfolg); background: var(--farbe-erfolg-hell); }
.option--fest.option--falsch:hover { border-color: var(--farbe-fehler); background: var(--farbe-fehler-hell); }

.option__marke svg { width: 16px; height: 16px; }
.option__marke { color: var(--farbe-text-leise); }

.option:has(input:checked) {
    border-color: var(--farbe-primaer);
    background: var(--farbe-primaer-hell);
}

.option:has(input:focus-visible) {
    outline: 3px solid var(--farbe-primaer);
    outline-offset: 2px;
}

/* Rückmeldung: farbig, aber ohne Ausrufezeichen. Eine falsche Antwort ist
   ein Zwischenstand und keine Verfehlung. */
.rueckmeldung {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: var(--abstand-m);
    border-radius: var(--radius-m);
    border: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche-gedimmt);
    margin-bottom: var(--abstand-m);
}

.rueckmeldung__symbol { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.rueckmeldung--richtig {
    background: var(--farbe-erfolg-hell);
    border-color: transparent;
}

.rueckmeldung--richtig .rueckmeldung__symbol { color: var(--farbe-erfolg); }
.rueckmeldung--offen .rueckmeldung__symbol { color: var(--farbe-text-leise); }
.rueckmeldung p { margin: 0; }

/* ---------- Suche ---------------------------------------------------------- */

.suchleiste {
    display: flex;
    align-items: flex-end;
    gap: var(--abstand-s);
    margin-bottom: var(--abstand-xl);
    max-width: 40rem;
}

.suchleiste .feld { flex: 1; min-width: 0; }

/* Ein Treffer als Zeile mit Typ, Titel, Kontext und einer Handlung. */
.treffer--karte {
    align-items: center;
    gap: var(--abstand-m);
    padding: var(--abstand-m);
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-m);
    background: var(--farbe-flaeche);
    flex-wrap: wrap;
}

.treffer--karte + .treffer--karte { border-top: 1px solid var(--farbe-rand); }

.treffer__symbol {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-s);
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text-gedimmt);
    display: grid;
    place-items: center;
}

.treffer__symbol svg { width: 17px; height: 17px; }

.treffer__inhalt {
    flex: 1;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.treffer__inhalt strong { font-weight: 600; line-height: 1.35; }
.treffer--karte .knopf { margin-left: auto; }

/* ---------- Fehlerseite ---------------------------------------------------- */

.fehlerseite {
    max-width: 34rem;
    margin: var(--abstand-xl) auto;
    text-align: center;
}

.fehlerseite__zeichen {
    width: 34px;
    height: 34px;
    color: var(--farbe-text-leise);
    margin-bottom: var(--abstand-m);
}

.fehlerseite__titel { font-size: var(--text-h1); margin: 0.2rem 0 var(--abstand-s); }

.fehlerseite__text {
    color: var(--farbe-text-gedimmt);
    margin: 0 0 var(--abstand-l);
}

/* ---------- Anmeldung -----------------------------------------------------
   Links Fläche, rechts Formular. Die Fläche entsteht vollständig aus den
   Farbtokens des Mandanten: ein Verlauf und ein feines Raster. Kein Bild,
   kein Logo, keine übernommene Bildsprache. */

.plainbahn { width: 100%; }

.anmeldeseite {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 0;
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--schatten-l);
    background: var(--farbe-flaeche);
    min-height: 460px;
}

.anmeldeflaeche {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: var(--abstand-xl);
    background:
        linear-gradient(150deg,
            var(--farbe-primaer-dunkel, var(--farbe-primaer)) 0%,
            var(--farbe-primaer) 55%,
            var(--farbe-primaer-dunkel, var(--farbe-primaer)) 100%);
    overflow: hidden;
}

/* Das Raster: zwei sehr schwache Linienscharen. Es soll Struktur andeuten,
   nicht sichtbar sein. */
.anmeldeflaeche::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: rotate(-8deg);
}

.anmeldeflaeche::after {
    content: "";
    position: absolute;
    right: -18%;
    top: -22%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
}

.anmeldeflaeche .anmeldebild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.anmeldeflaeche__text { position: relative; color: #fff; }

.anmeldeflaeche__name {
    margin: 0 0 0.4rem;
    font-family: var(--brand-font-heading, var(--schrift));
    font-size: var(--text-h1);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.anmeldeflaeche__satz {
    margin: 0;
    font-size: var(--text-gross);
    opacity: 0.86;
    max-width: 24ch;
}

.anmeldekarte {
    width: 100%;
    max-width: none;
    background: var(--farbe-flaeche);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--abstand-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.anmeldekarte__titel { font-size: var(--text-h2); margin: 0 0 0.2rem; }

@media (max-width: 820px) {
    .anmeldeseite {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Auf dem Telefon steht das Formular oben. Die Fläche wird zu einem
       schmalen Band, das die Marke trägt und nichts wegdrückt. */
    .anmeldeflaeche {
        order: 2;
        min-height: 120px;
        padding: var(--abstand-l);
        align-items: center;
    }

    .anmeldeflaeche__name { font-size: var(--text-h2); }
    .anmeldeflaeche__satz { font-size: var(--text-body); }
}

/* Rasterkinder dürfen schmaler werden als ihr Inhalt es gern hätte. Ohne das
   drückt eine lange Marke plus Demo-Chip die Anmeldung auf dem Telefon über
   den Bildschirmrand hinaus. */
.anmeldeseite > * { min-width: 0; }

.anmeldekarte__marke { flex-wrap: wrap; }
.anmeldekarte__marke .marke { min-width: 0; }
.anmeldekarte__marke .marke > span:last-child { overflow-wrap: anywhere; }

/* Bestandskarten sind klein; sie sollen auch auf dem Telefon zu zweit in eine
   Zeile passen statt vier Zeilen zu belegen. */
.bestandsraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--abstand-m);
}

/* Ein Segment ist ein Schalter, kein Fliesstextverweis. */
a.segment { text-decoration: none; }
a.segment:hover { text-decoration: none; }

/* Eine Werteliste: Beschriftung links, Wert rechts, ohne Einrückung. */
.werteliste {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.5rem var(--abstand-l);
    margin: 0;
}

.werteliste dt {
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.werteliste dd { margin: 0; font-size: var(--text-body); }

@media (max-width: 560px) {
    .werteliste { grid-template-columns: 1fr; gap: 0.15rem; }
    .werteliste dd { margin-bottom: var(--abstand-s); }
}

/* `.karte + .karte` gibt gestapelten Karten Abstand. In einem Raster oder
   einer Flexspalte erledigt das `gap` – dort schiebt die Regel die zweite
   Karte nur nach unten und die Reihe wird ungleich hoch. */
.raster > .karte + .karte,
.kacheln > .karte + .karte,
.bestandsraster > .karte + .karte,
.modulraster > .karte + .karte,
.spalte > .karte + .karte,
.wahlkarten > .karte + .karte,
.zielgruppenvorschau > .karte + .karte,
.modulseitenspalte > .karte + .karte,
.lesespalte__rand > .karte + .karte { margin-top: 0; }

/* ---------- Zeitachse (Onboarding) -----------------------------------------
   Die einzige neue Komponente aus Sprint 011. Sie ergänzt das System und
   ersetzt nichts: Zustände sind Chips, Fortschritt ist ein Balken, Symbole
   kommen aus derselben Sammlung.

   Der Unterschied zur Sequenz aus Sprint 010 steht in der linken Spalte:
   dort steht ein Datum, keine Nummer. Eine Sequenz ordnet, eine Zeitachse
   terminiert. */

.zeitachse {
    list-style: none;
    margin: var(--abstand-m) 0 0;
    padding: 0;
}

.zeitpunkt {
    display: grid;
    grid-template-columns: 5.5rem 28px minmax(0, 1fr);
    gap: var(--abstand-m);
    padding: var(--abstand-m) 0;
    position: relative;
}

/* Die durchgehende Linie durch alle Marken – sie macht aus Punkten eine
   Achse. Der letzte Punkt bekommt keine, sonst liefe sie ins Leere. */
.zeitpunkt::before {
    content: "";
    position: absolute;
    left: calc(5.5rem + var(--abstand-m) + 13px);
    top: calc(var(--abstand-m) + 26px);
    bottom: 0;
    width: 1px;
    background: var(--farbe-rand);
}

.zeitpunkt:last-child::before { display: none; }

.zeitpunkt__datum {
    text-align: right;
    line-height: 1.2;
    padding-top: 2px;
}

.zeitpunkt__tag {
    display: block;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.zeitpunkt__jahr {
    display: block;
    font-size: var(--text-klein);
    color: var(--farbe-text-leise);
}

.zeitpunkt__abstand {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--text-label);
    color: var(--farbe-text-leise);
}

.zeitpunkt__marke {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-rund);
    border: 1px solid var(--farbe-rand-stark);
    background: var(--farbe-flaeche);
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    color: var(--farbe-text-leise);
}

.zeitpunkt__marke svg { width: 14px; height: 14px; }

.zeitpunkt__inhalt { min-width: 0; }

.zeitpunkt__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--abstand-s);
    flex-wrap: wrap;
}

.zeitpunkt__titel {
    margin: 0;
    font-size: var(--text-h3);
    font-weight: 600;
}

.zeitpunkt__text {
    margin: 0.3rem 0 0;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
}

.zeitpunkt__ziel {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
}

.zeitpunkt__fuss {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    margin-top: var(--abstand-s);
    flex-wrap: wrap;
}

.zeitpunkt__fuss span { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Erledigt: die Marke trägt die Erfolgsfarbe, der Titel tritt zurück.
   Die Farbe verstärkt nur – das Wort steht als Chip daneben. */
.zeitpunkt--abgeschlossen .zeitpunkt__marke {
    border-color: var(--farbe-erfolg);
    color: var(--farbe-erfolg);
}

.zeitpunkt--abgeschlossen .zeitpunkt__titel { color: var(--farbe-text-gedimmt); }

.zeitpunkt--verfuegbar .zeitpunkt__marke {
    border-color: var(--farbe-primaer);
    color: var(--farbe-primaer);
    box-shadow: 0 0 0 4px var(--farbe-primaer-hell);
}

.zeitpunkt--ueberfaellig .zeitpunkt__marke {
    border-color: var(--farbe-fehler);
    color: var(--farbe-fehler);
}

.zeitpunkt--kommend { opacity: 0.75; }
.zeitpunkt--kommend .zeitpunkt__marke { border-style: dashed; }

.zeitpunkt--gesperrt .zeitpunkt__marke {
    border-color: var(--farbe-warnung);
    color: var(--farbe-warnung);
}

@media (max-width: 640px) {
    .zeitpunkt {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: var(--abstand-s);
    }

    .zeitpunkt::before { left: 13px; }

    /* Das Datum wandert über den Titel: In einer schmalen Spalte wäre eine
       eigene Datumsspalte die halbe Bildschirmbreite. */
    .zeitpunkt__datum {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
        padding-top: 0;
    }

    .zeitpunkt__tag, .zeitpunkt__jahr, .zeitpunkt__abstand { display: inline; margin: 0; }
    .zeitpunkt__marke { grid-column: 1; grid-row: 1 / span 2; }
    .zeitpunkt__inhalt { grid-column: 2; grid-row: 2; }
}

/* ---------- Vorlagenschritte und Blätterung -------------------------------- */

.vorlagenschritte { list-style: none; margin: var(--abstand-m) 0 0; padding: 0; }

.vorlagentag {
    margin-top: var(--abstand-m);
    padding-bottom: 0.3rem;
    font-size: var(--text-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
    font-weight: 650;
    border-bottom: 1px solid var(--farbe-rand);
}

.vorlagenschritt {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-s);
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--farbe-rand);
    flex-wrap: wrap;
}

.vorlagenschritt__symbol {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-s);
    background: var(--farbe-flaeche-gedimmt);
    color: var(--farbe-text-gedimmt);
    display: grid;
    place-items: center;
}

.vorlagenschritt__symbol svg { width: 15px; height: 15px; }

.vorlagenschritt__text {
    flex: 1;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vorlagenschritt__aktionen {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.blaetterung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-m);
    margin-top: var(--abstand-m);
}

/* Die Onboarding-Karte auf dem Dashboard: dieselbe Form wie ein Vorschlag,
   aber mit Fortschritt. */
.onboardingkarte {
    display: flex;
    align-items: center;
    gap: var(--abstand-m);
    padding: var(--abstand-m);
    text-decoration: none;
    color: inherit;
}

.onboardingkarte__symbol {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-s);
    background: var(--farbe-primaer-hell);
    color: var(--farbe-primaer-dunkel);
    display: grid;
    place-items: center;
}

.onboardingkarte__symbol svg { width: 18px; height: 18px; }

.onboardingkarte__text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.onboardingkarte__text .balken { max-width: 14rem; }

/* ==========================================================================
   Auswertungen
   ==========================================================================

   Vier Bausteine, alle serverseitig gerechnet: eine Kennzahlenkachel, eine
   Säulenreihe für Zeitverläufe, ein gestapelter Verteilungsbalken und die
   Legende dazu. Keine Diagrammbibliothek – was hier gebraucht wird, sind
   Rechtecke mit einer Höhe.

   Farbe trägt nie die Information allein: Jede Säule hat ihre Zahl in der
   Tabelle darunter, jeder Verteilungsteil trägt seinen Wert im Balken, und
   jede Reihe hat eine Textbeschreibung für Vorlesewerkzeuge. */

.filterleiste__scope {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
}

.filterleiste__scope svg { color: var(--farbe-primaer); }

.feld--aktion { display: flex; align-items: flex-end; }

.datenschutzhinweis {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
}

/* --- Kennzahlenkachel -------------------------------------------------- */

/* Sechs Kennzahlen ergeben zwei Reihen zu dritt statt fuenf und eine
   einsame. Die Kachel darf breiter sein: Sie traegt eine Erklaerung,
   keine blosse Zahl. */
.kacheln--vier { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.kachel--kennzahl { gap: 0.15rem; }

.kachel__zusatz {
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
}

.kachel__hinweis {
    margin-top: 0.35rem;
    font-size: var(--text-label);
    line-height: 1.45;
    color: var(--farbe-text-leise);
}

.kachel__wert--gesperrt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--farbe-text-gedimmt);
}

.kachel__wert--gesperrt svg { color: var(--farbe-text-leise); }

/* --- Säulenreihe ------------------------------------------------------- */

.saeulen {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    padding: var(--abstand-s) 0;
}

.saeule {
    flex: 1 1 0;
    min-width: 4px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.saeule__wert {
    display: block;
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: var(--farbe-primaer);
    min-height: 2px;
}

/* --- Verteilung -------------------------------------------------------- */

.verteilung {
    display: flex;
    width: 100%;
    min-width: 9rem;
    height: 22px;
    border-radius: var(--radius-s);
    overflow: hidden;
    background: var(--farbe-flaeche-gedimmt);
}

.verteilung__teil {
    display: grid;
    place-items: center;
    min-width: 1.4rem;
    font-size: var(--text-label);
    font-variant-numeric: tabular-nums;
    color: #fff;
}

/* Vier Stufen und „ohne Nachweis". Bewusst nicht vier Grünabstufungen: Wer
   Farben schlecht unterscheidet, sähe vier Mal dasselbe. Die Helligkeit
   steigt mit der Stufe, und die Zahl steht ohnehin im Balken. */
.verteilung__teil--s1 { background: #9aa5b1; }
.verteilung__teil--s2 { background: #5c7a99; }
.verteilung__teil--s3 { background: #2f6f5e; }
.verteilung__teil--s4 { background: var(--farbe-primaer); }
.verteilung__teil--ohne {
    background: repeating-linear-gradient(
        45deg,
        var(--farbe-flaeche-gedimmt),
        var(--farbe-flaeche-gedimmt) 4px,
        #e3e6e4 4px,
        #e3e6e4 8px
    );
    color: var(--farbe-text-gedimmt);
}

.legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-m);
    font-size: var(--text-klein);
    color: var(--farbe-text-gedimmt);
}

.legende__punkt { display: inline-flex; align-items: center; gap: 0.4rem; }

.legende__farbe {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.legende__farbe--s1 { background: #9aa5b1; }
.legende__farbe--s2 { background: #5c7a99; }
.legende__farbe--s3 { background: #2f6f5e; }
.legende__farbe--s4 { background: var(--farbe-primaer); }
.legende__farbe--ohne { background: #e3e6e4; border: 1px dashed var(--farbe-rand-bedienung); }

/* --- Kleinteile -------------------------------------------------------- */

.tabelle--klein td, .tabelle--klein th { padding: 0.4rem 0.6rem; }

.karte__fuss {
    margin: var(--abstand-m) 0 0;
    padding-top: var(--abstand-s);
    border-top: 1px solid var(--farbe-rand);
}

@media (max-width: 700px) {
    .saeulen { height: 90px; }
    .filterleiste { grid-template-columns: 1fr; }
    .feld--aktion { justify-content: flex-start; }
}

/* ============================================================
   Sprachwahl
   ------------------------------------------------------------
   Zwei Knöpfe, kein Auswahlfeld: bei zwei Sprachen ist ein Klick
   besser als drei. Der aktive Knopf trägt `aria-current` und ist
   nicht nur farblich, sondern auch über die Schriftstärke
   erkennbar -- Farbe allein wäre für Menschen mit Farbsehschwäche
   keine Information.
   ============================================================ */

.sprachwahl {
    display: flex;
    align-items: center;
    gap: var(--raum-s);
    flex-wrap: wrap;
    margin-top: var(--raum-m);
}

.sprachwahl__beschriftung {
    font-size: var(--text-label);
    color: var(--farbe-text-leise);
    text-transform: uppercase;
    letter-spacing: 0.075em;
}

.sprachwahl__knoepfe {
    display: inline-flex;
    gap: 2px;
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-s);
    padding: 2px;
    background: var(--farbe-flaeche);
}

.sprachwahl__knopf {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--farbe-text-leise);
    font: inherit;
    font-size: var(--text-klein);
    padding: 0.25rem 0.6rem;
    border-radius: calc(var(--radius-s) - 2px);
    cursor: pointer;
}

.sprachwahl__knopf:hover {
    color: var(--farbe-text);
    background: var(--farbe-flaeche-leise);
}

.sprachwahl__knopf--aktiv {
    background: var(--farbe-primaer);
    color: #fff;
    font-weight: 600;
}

.sprachwahl__knopf:focus-visible {
    outline: 2px solid var(--farbe-fokus);
    outline-offset: 2px;
}

/* Auf der Anmeldekarte steht die Wahl mittig unter dem Formular. */
.anmeldekarte .sprachwahl {
    justify-content: center;
    margin-top: var(--raum-l);
}