/* Erscheinungsbild des Portals nach dem Design System „Punktlandung Passau“ (30.09.2026).
 *
 * Grundlage sind die Tokens in static/design/ (unverändert aus dem Design System, dazu
 * dunkel.css für die Systemeinstellung und schriften.css für die lokalen Schriften).
 * Diese Datei ordnet den bestehenden Klassen der Vorlagen die Bausteine des Design
 * Systems zu. Farben, Abstände, Radien und Schatten stehen ausschließlich als Token;
 * ein Farbwert als Literal ist ein Fehler (tests/test_designsystem.py).
 *
 * Gliederung: 1 Grundlagen · 2 Rahmen · 3 Bausteine · 4 Formulare · 5 Listen und
 * Tabellen · 6 Bereiche · 7 Betreiber-Backend · 8 schmale Bildschirme.
 */

/* ===== 1 Grundlagen ======================================================== */

/* Portal-Tokens. Das Design System setzt an einigen Stellen feste Palettenwerte
 * (Silber 25 für Hover, Tinte für gefüllte Zähler und Schrittpunkte). Die schalten im
 * dunklen Schema nicht um: Hover-Flächen würden fast weiß, Tintenflächen unsichtbar.
 * Deshalb stehen Palettenwerte nur hier, mit dunkler Entsprechung; die Regeln danach
 * verwenden ausschließlich diese oder die semantischen Tokens (tests/test_designsystem.py). */
:root {
  --flaeche-hover: var(--silver-25);
  --tinte-flaeche: var(--ink);
  --auf-tinte: var(--silver-0);
  --tinte-gedaempft: var(--silver-700);
  --flaeche-gesperrt: var(--silver-300);
  --text-gesperrt: var(--silver-700);
  --rand-hover: var(--silver-500);
  --balken: var(--silver-400);
  --balken-kraeftig: var(--silver-500);
  --balken-leicht: var(--silver-300);
  --auswahl: var(--donau-100);
  --marke-hervor-rand: var(--red-200);
  --toast-erfolg: var(--success-200);
  --toast-info: var(--donau-300);
  --logo-flaeche: var(--ink);
  --logo-punkt: var(--red-600);
  --logo-linie: var(--silver-0);
  --bild-grund: var(--silver-0);
  --schwaerzung: var(--ink);
  --fehler-kraeftig: var(--error-600);
}
[data-theme="dark"] {
  --flaeche-hover: var(--surface-muted);
  --tinte-flaeche: var(--text-body);
  --auf-tinte: var(--text-inverse);
  --tinte-gedaempft: var(--text-muted);
  --flaeche-gesperrt: var(--surface-muted);
  --text-gesperrt: var(--text-subtle);
  --rand-hover: var(--border-strong);
  --balken: var(--border-strong);
  --balken-kraeftig: var(--text-subtle);
  --balken-leicht: var(--border-default);
  --auswahl: var(--status-info-border);
  --marke-hervor-rand: var(--surface-brand-subtle);
  --toast-erfolg: var(--success-700);
  --toast-info: var(--donau-700);
  --logo-flaeche: var(--red-600);
  --logo-punkt: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --flaeche-hover: var(--surface-muted);
    --tinte-flaeche: var(--text-body);
    --auf-tinte: var(--text-inverse);
    --tinte-gedaempft: var(--text-muted);
    --flaeche-gesperrt: var(--surface-muted);
    --text-gesperrt: var(--text-subtle);
    --rand-hover: var(--border-strong);
    --balken: var(--border-strong);
    --balken-kraeftig: var(--text-subtle);
    --balken-leicht: var(--border-default);
    --auswahl: var(--status-info-border);
    --marke-hervor-rand: var(--surface-brand-subtle);
    --toast-erfolg: var(--success-700);
    --toast-info: var(--donau-700);
    --logo-flaeche: var(--red-600);
    --logo-punkt: var(--ink);
  }
}
/* Ende Portal-Tokens */

html { scroll-padding-top: var(--space-6); }
body { font: var(--type-body); color: var(--text-body); background: var(--surface-page); }
main h1 { font: var(--type-h3); letter-spacing: var(--tracking-tight); margin: 0; }
main h2 { font: var(--type-h5); letter-spacing: -0.01em; margin: var(--space-8) 0 var(--space-3); }
main h3 { font: 600 var(--fs-16)/1.35 var(--font-sans); letter-spacing: 0; margin: var(--space-5) 0 var(--space-2); }
main h4 { font: 600 var(--fs-14)/1.35 var(--font-sans); letter-spacing: 0; margin: var(--space-4) 0 var(--space-2); }
p, li, dd, td, th { overflow-wrap: anywhere; }
code, kbd, samp { font-family: var(--font-mono); font-size: .88em; background: var(--surface-sunken); border: 1px solid var(--border-subtle); padding: 1px 5px; border-radius: var(--radius-xs); color: var(--text-body); }
pre { font-family: var(--font-mono); font-size: var(--fs-14); }
hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-6) 0; }
strong, b { font-weight: 600; }
mark { background: var(--annotation-highlight); color: inherit; border-radius: var(--radius-xs); }
::selection { background: var(--auswahl); }
.pl-sr-only, .visuell-versteckt, .statistik-visuell-versteckt, .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: var(--space-2); top: -100px; z-index: var(--z-tooltip); background: var(--surface-inverse); color: var(--text-inverse); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font: var(--type-ui); text-decoration: none; }
.skip-link:focus { top: var(--space-2); color: var(--text-inverse); }

/* Icons: 1em-Quadrat, erben die Textfarbe; stehen immer neben dem Wort. */
svg.zeichen { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
a > svg.zeichen:first-child { margin-right: .3em; }
h1 svg.zeichen, h2 svg.zeichen, h3 svg.zeichen { margin-right: .35em; vertical-align: -0.14em; color: var(--text-muted); }
.z-gut { color: var(--status-success-fg); } .z-warnung { color: var(--status-warning-fg); }
.z-fehler { color: var(--status-error-fg); } .z-grau { color: var(--text-muted); }
td .z-gut svg.zeichen, td .z-warnung svg.zeichen, td .z-fehler svg.zeichen, td .z-grau svg.zeichen { margin-right: .3em; }

.hinweis, .hilfetext, .feldhilfe, .helptext { font: var(--type-small); color: var(--text-muted); }
.metazeile { font: var(--type-caption); color: var(--text-muted); margin: 0 0 var(--space-1); }
.augenbraue { display: inline-block; font: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.textlink { font-weight: 500; }
.herkunft { font: var(--type-caption); color: var(--text-muted); white-space: nowrap; }
.viele { color: var(--status-error-fg); font-weight: 600; }
.pl-num, .kennziffer, .kurscode { font-variant-numeric: var(--num-tabular); }
.kennziffer, .kurscode { font-family: var(--font-mono); }

/* ===== 2 Rahmen ============================================================ */

.portal-layout { display: flex; min-height: 100vh; }
.portal-workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Seitenleiste: weiße Fläche, Haarlinie, Logo-Lockup, Bereichsangabe, Navigation. */
.portal-sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-5) var(--space-3); background: var(--surface-card); border-right: 1px solid var(--border-default); }
.navigation-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-2); }
.portal-marke { display: inline-flex; color: var(--text-body); text-decoration: none; border-radius: var(--radius-md); }
.portal-marke:hover { color: var(--text-body); }
.portal-logo { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.portal-logo svg { display: block; flex: none; width: 34px; height: 34px; }
.portal-logo .logo-flaeche { fill: var(--logo-flaeche); }
.portal-logo .logo-fluss { fill: none; stroke: var(--logo-linie); }
.portal-logo .logo-ausfluss { fill: var(--logo-linie); }
.portal-logo .logo-punkt { fill: var(--logo-punkt); }
.portal-logo-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.portal-logo-wort { font: 700 18.7px/.9 var(--font-sans); letter-spacing: -0.02em; color: var(--text-body); white-space: nowrap; }
.portal-logo-wort span { color: var(--brand); }
.portal-logo-produkt { font: 500 11px/1 var(--font-sans); color: var(--text-muted); white-space: nowrap; }
.nav-bereich { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-2); margin: 0; }
.nav-bereich > span:first-child { font: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.nav-bereich > span + span { font: 500 var(--fs-14)/1.3 var(--font-sans); color: var(--text-body); overflow-wrap: anywhere; }
.hauptnavigation { display: flex; flex-direction: column; gap: 2px; }
.hauptnavigation a { position: relative; display: flex; align-items: center; gap: 10px; padding: var(--space-2) 10px; border-radius: var(--radius-md); font: var(--type-ui); color: var(--text-muted); text-decoration: none; }
.hauptnavigation a:hover { background: var(--surface-sunken); color: var(--text-body); }
.hauptnavigation a.aktiv { background: var(--surface-muted); color: var(--text-body); }
.hauptnavigation a.aktiv::before { content: ""; position: absolute; left: -12px; top: 10px; width: 6px; height: 16px; border-radius: 0 3px 3px 0; background: var(--brand); }
.hauptnavigation svg.zeichen { width: 18px; height: 18px; margin: 0; vertical-align: 0; }
.hauptnavigation .navzahl { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 9px; background: var(--surface-muted); color: var(--text-body); font: 600 11px/18px var(--font-sans); text-align: center; font-variant-numeric: var(--num-tabular); }
.hauptnavigation a.aktiv .navzahl { background: var(--surface-card); }
.sidebar-unten { margin-top: auto; padding: var(--space-3) var(--space-2) 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--space-2); font: var(--type-small); }
.sidebar-unten a { display: flex; align-items: center; gap: 10px; color: var(--text-muted); text-decoration: none; padding: var(--space-1) 0; }
.sidebar-unten a:hover { color: var(--text-body); }
.sidebar-unten a.aktiv { color: var(--text-body); font-weight: 500; }
.sidebar-unten svg.zeichen { width: 18px; height: 18px; margin: 0; }
.sidebar-unten form { margin: 0; }
.sidebar-unten .abmelden-knopf { width: 100%; min-height: 0; justify-content: flex-start; gap: 10px; padding: var(--space-1) 0; border: 0; background: transparent; color: var(--text-muted); font: var(--type-small); }
.sidebar-unten .abmelden-knopf:hover { background: transparent; color: var(--text-body); }
.navigation-schalter { display: none; }

/* Kopfzeile: Brotkrumen links, Darstellung, Nachrichten und Konto rechts. */
.portal-topbar { min-height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6); background: var(--surface-card); border-bottom: 1px solid var(--border-default); position: relative; z-index: var(--z-sticky); }
.topbar-pfad { flex: 1; min-width: 0; }
.topbar-aktionen { display: flex; align-items: center; gap: var(--space-1); }
.portalpfad { margin: 0; font: var(--type-small); color: var(--text-muted); }
.portalpfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.portalpfad li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.portalpfad li + li::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--text-subtle); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.portalpfad a { color: var(--text-muted); text-decoration: none; }
.portalpfad a:hover { color: var(--text-body); text-decoration: underline; }
.portalpfad [aria-current] { color: var(--text-body); font-weight: 500; }

/* Quadratische Symbolschaltfläche (IconButton). */
.symbolknopf { width: var(--control-h-md); height: var(--control-h-md); min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--text-body); cursor: pointer; position: relative; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard); }
.symbolknopf:hover { background: var(--surface-muted); color: var(--text-body); }
.symbolknopf.sekundaer { border-color: var(--border-strong); background: var(--surface-card); }
.symbolknopf.klein { width: var(--control-h-sm); height: var(--control-h-sm); }
.symbolknopf svg.zeichen { width: 20px; height: 20px; margin: 0; vertical-align: 0; }
.symbolknopf.klein svg.zeichen { width: 16px; height: 16px; }
.symbolknopf[aria-pressed="true"] { background: var(--surface-muted); }
.symbolknopf:disabled { background: transparent; border-color: transparent; color: var(--text-subtle); opacity: .6; }
.symbolknopf.sekundaer:disabled { border-color: var(--border-default); }
.zaehlmarke { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--brand); color: var(--text-on-brand); font: 600 10px/16px var(--font-sans); text-align: center; pointer-events: none; font-variant-numeric: var(--num-tabular); }
.darstellung-umschalter form { margin: 0; display: flex; }
.darstellung-umschalter .nur-dunkel { display: none; }
[data-theme="dark"] .darstellung-umschalter .nur-hell { display: none; }
[data-theme="dark"] .darstellung-umschalter .nur-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .darstellung-umschalter .nur-hell { display: none; }
  :root:not([data-theme="light"]) .darstellung-umschalter .nur-dunkel { display: block; }
}

/* Nachrichten: Glocke mit Zähler, Aufklappliste, Nachrichtenseite. Ungelesen = roter
 * Punkt und fette Zeile; gelesene Nachrichten stehen ruhig. */
.nachrichtenmenue { position: relative; margin: 0; border: 0; background: none; border-radius: 0; }
.nachrichtenmenue > summary.symbolknopf { list-style: none; padding: 0; font: inherit; }
.nachrichtenmenue > summary::-webkit-details-marker { display: none; }
.nachrichtenmenue > summary::before { display: none; }
.nachrichtenmenue[open] > summary { background: var(--surface-muted); border-bottom: 0; }
.nachrichtenliste-klein { width: min(24rem, calc(100vw - 2 * var(--space-4))); max-height: 70vh; overflow-y: auto; }
.nachrichtenliste-klein .menue-kopf { font: var(--type-small); color: var(--text-muted); }
.nachrichtenliste-klein .menue-kopf strong { color: var(--text-body); }
.nachricht-eintrag { display: flex; gap: 10px; align-items: flex-start; padding: var(--space-2) 10px; border-radius: var(--radius-md); color: var(--text-body); text-decoration: none; }
.nachricht-eintrag:hover { background: var(--surface-sunken); color: var(--text-body); }
.nachricht-punkt { width: 8px; height: 8px; flex: none; margin-top: 6px; border-radius: var(--radius-full); background: transparent; }
.ungelesen > a > .nachricht-punkt, .nachricht-eintrag.ungelesen > .nachricht-punkt { background: var(--brand); }
.nachricht-inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nachricht-inhalt strong { font: 500 var(--fs-14)/1.35 var(--font-sans); }
.ungelesen .nachricht-inhalt strong, .nachricht-eintrag.ungelesen strong { font-weight: 600; }
.nachricht-inhalt > span { font: var(--type-small); color: var(--text-muted); }
.nachricht-inhalt small { font: var(--type-caption); color: var(--text-muted); }
.menue-leer { margin: 0; padding: var(--space-3) 10px; font: var(--type-small); color: var(--text-muted); }
.nachrichtenmenue-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-1) 10px var(--space-2); font: var(--type-small); }
.nachrichtenmenue-fuss form { margin: 0; }
.nachrichtenmenue-fuss .textknopf { width: auto; min-height: 0; padding: 0; font: var(--type-small); }
.nachrichtenliste { list-style: none; margin: 0; padding: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.nachrichtenliste li { border-top: 1px solid var(--border-subtle); }
.nachrichtenliste li:first-child { border-top: 0; }
.nachrichtenliste a { display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px var(--space-4); color: var(--text-body); text-decoration: none; }
.nachrichtenliste a:hover { background: var(--flaeche-hover); color: var(--text-body); }
.nachrichtenliste a > svg.zeichen { margin: 4px 0 0; color: var(--text-subtle); }
.ungelesen-wort { color: var(--text-brand); font-weight: 500; }

/* Kontomenü: Avatar mit Initialen, Name, Rollenchip; Aufklappliste als schwebende Ebene. */
.profilmenue { position: relative; margin: 0 0 0 var(--space-2); padding-left: var(--space-3); border: 0; border-left: 1px solid var(--border-default); background: none; border-radius: 0; }
.profilmenue > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); }
.profilmenue > summary::-webkit-details-marker { display: none; }
.profilmenue > summary:hover { background: var(--surface-sunken); }
.avatar { width: 32px; height: 32px; flex: none; border-radius: var(--radius-full); background: var(--surface-muted); color: var(--text-body); display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-sans); text-transform: uppercase; }
.profil-angaben { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profil-name { font: 500 var(--fs-14)/1.2 var(--font-sans); max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-zeile { display: flex; align-items: center; gap: var(--space-2); }
.sitzungsuhr-anzeige { display: inline-flex; align-items: center; gap: 3px; font: 500 11px/1 var(--font-sans); color: var(--text-muted); font-variant-numeric: var(--num-tabular); }
.sitzungsuhr-anzeige svg.zeichen { width: 12px; height: 12px; vertical-align: 0; }
.sitzungsuhr.knapp { color: var(--status-warning-fg); font-weight: 700; }
.profilmenue .aufklappzeichen { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-standard); }
.profilmenue[open] .aufklappzeichen { transform: rotate(180deg); }
.profilmenue-inhalt, .aufklappmenue { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: var(--z-dropdown); min-width: 15rem; padding: var(--space-2); display: grid; gap: 2px; background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); animation: pl-in var(--dur-base) var(--ease-standard); }
.profilmenue-inhalt > a, .profilmenue-inhalt button, .aufklappmenue > a, .aufklappmenue button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: var(--space-2) 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-body); font: var(--type-ui); text-align: left; text-decoration: none; cursor: pointer; justify-content: flex-start; }
.profilmenue-inhalt > a:hover, .profilmenue-inhalt button:hover, .aufklappmenue > a:hover, .aufklappmenue button:hover { background: var(--surface-sunken); color: var(--text-body); }
.profilmenue-inhalt form { margin: 0; }
.profilmenue-inhalt .menue-trenner { height: 1px; background: var(--border-subtle); margin: var(--space-1) 0; }
.profilmenue-inhalt .menue-kopf { padding: var(--space-2) 10px; font: var(--type-caption); color: var(--text-muted); overflow-wrap: anywhere; }
.rollenchip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-body); font: 500 11px/1 var(--font-sans); white-space: nowrap; max-width: 100%; width: max-content; }
.rollenchip svg.zeichen { width: 12px; height: 12px; vertical-align: 0; }
.rollenchip .geltungsbereich { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

/* Arbeitsfläche und Seitenkopf. */
main#inhalt { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 32px 64px; min-width: 0; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: 0 0 var(--space-6); }
.seitenkopf > div:first-child { flex: 1; min-width: min(100%, 280px); display: flex; flex-direction: column; gap: 6px; }
.seitenkontext { font: var(--type-small); color: var(--text-muted); margin: 0; }
.seitenkontext a { color: var(--text-muted); }
.seitenkopf p:not(.seitenkontext) { margin: 0; font: var(--type-small); color: var(--text-muted); max-width: 72ch; }
.seitenkopf p:not(.seitenkontext) + p { margin-top: var(--space-1); }
.seitenaktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.hilfe-seitenzugang { display: flex; margin: 0; }

.portal-fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 32px; padding: var(--space-4) 0 var(--space-6); border-top: 1px solid var(--border-subtle); font: var(--type-caption); color: var(--text-muted); }
.portal-fuss .wortmarke-klein { font: 700 12px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--text-body); }
.portal-fuss .wortmarke-klein span { color: var(--brand); }

/* Zugangsseiten ohne Anmeldung: ruhige Karte auf Warmweiß, Logo darüber. */
.zugangsseite .portal-layout { display: block; }
.zugangsseite .portal-workspace { min-height: 100vh; align-items: center; padding: 0 var(--space-4); }
.zugangsseite .portal-topbar { background: transparent; border: 0; width: 100%; max-width: 32rem; min-height: 0; padding: clamp(24px, 7vh, 72px) 0 var(--space-5); justify-content: center; flex-direction: column; gap: var(--space-2); z-index: auto; }
.zugangsseite .portal-logo svg { width: 40px; height: 40px; }
.zugangsseite .portal-logo-wort { font-size: 22px; }
.zugangsseite .portal-logo-produkt { font-size: 12px; }
.zugang-hinweis { font: var(--type-small); color: var(--text-muted); text-align: center; }
.zugangsseite main#inhalt { flex: initial; width: 100%; max-width: 32rem; margin: 0 auto; padding: var(--space-8); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.zugangsseite main#inhalt:has(.zugangsnavigation) { max-width: 40rem; }
.zugangsseite .seitenkopf { margin-bottom: var(--space-5); }
.zugangsseite main h1 { font: var(--type-h4); }
.zugangsseite form input:not([type=checkbox]):not([type=radio]) { width: 100%; }
.zugangsseite form button[type=submit]:not(.passkey-direktknopf):not(.sekundaer):not(.tertiaer) { width: 100%; margin-top: var(--space-3); }
.zugangsseite main > p { font: var(--type-small); color: var(--text-muted); }
.zugangsseite .portal-fuss { margin: auto 0 0; width: 100%; max-width: 32rem; border: 0; justify-content: center; text-align: center; }

/* Fehlerseiten: eigenständig (ohne Datenbank), im Rahmen der Zugangsseiten. */
.fehlerseite main#inhalt { max-width: 40rem; }
.fehlerseite main h1 { margin: var(--space-2) 0 var(--space-3); }
.fehler-weiteres { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-5) 0 var(--space-2); font: var(--type-small); }
.fehler-weiteres a { display: inline-flex; align-items: center; gap: 6px; }
.fehlerseite textarea { width: 100%; font-family: var(--font-mono); font-size: var(--fs-14); margin: var(--space-3) 0; }

/* Leisten über dem Inhalt: betreute Ansicht, Mandantenfokus. */
.betreuung-hinweis { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-3) var(--space-6); background: var(--status-warning-bg); color: var(--text-body); border-bottom: 1px solid var(--status-warning-border); font: var(--type-small); }
.betreuung-hinweis div { display: grid; gap: 2px; flex: 1 1 20rem; }
.betreuung-hinweis strong { display: flex; align-items: center; gap: var(--space-2); color: var(--status-warning-fg); font: 600 var(--fs-14)/1.4 var(--font-sans); }
.betreuung-hinweis small { color: var(--text-muted); }
.betreuung-hinweis form { margin: 0; }
.mandantenwahl-leiste { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 10px 14px; margin: 0 0 var(--space-5); background: var(--status-info-bg); border: 1px solid var(--status-info-border); border-radius: var(--radius-md); font: var(--type-small); }
.mandantenwahl-leiste a { white-space: nowrap; }

/* Toasts: Erfolg und Info unten rechts, Fehler und Warnungen bleiben im Inhalt.
 * Ohne JavaScript (keine Klasse .js) stehen sie im Fluss und bleiben lesbar. */
.meldungen:empty, .toastbereich:empty { display: none; }
.toastbereich { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-5); }
.js .toastbereich { position: fixed; margin: 0; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); max-width: calc(100vw - 2 * var(--space-4)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: var(--space-3); align-items: flex-start; width: 380px; max-width: 100%; padding: var(--space-3) 14px; border-radius: var(--radius-lg); background: var(--surface-inverse); color: var(--text-inverse); box-shadow: var(--shadow-lg); animation: pl-in var(--dur-slow) var(--ease-standard); font: 600 var(--fs-14)/1.4 var(--font-sans); }
.toast > svg.zeichen { width: 20px; height: 20px; margin-top: 1px; vertical-align: 0; color: var(--toast-erfolg); }
.toast.info > svg.zeichen { color: var(--toast-info); }
.toast > span { flex: 1; min-width: 0; }
.toast button { min-height: 0; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.toast button:hover { opacity: 1; background: transparent; }
.toast button svg.zeichen { width: 18px; height: 18px; margin: 0; }
.toast.verschwindet { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-base) var(--ease-exit), transform var(--dur-base) var(--ease-exit); }

/* ===== 3 Bausteine ========================================================= */

/* Schaltflächen (Button): primary Rot nur für die eine Haupthandlung, secondary Kontur,
 * tertiary textartig, destructive Rost-Kontur. Höhen 32 · 40 · 48. */
button, .knopf, input[type=submit], input[type=button] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h-md); max-width: 100%; padding: 0 var(--space-4); border: 1px solid var(--brand); border-radius: var(--radius-md); background: var(--brand); color: var(--text-on-brand); font: 500 var(--fs-14)/1.25 var(--font-sans); text-align: center; text-decoration: none; white-space: normal; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
button:hover, .knopf:hover, input[type=submit]:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-on-brand); text-decoration: none; }
button:active, .knopf:active, input[type=submit]:active { background: var(--brand-active); border-color: var(--brand-active); transform: translateY(1px); }
button:disabled, .knopf[aria-disabled="true"], input[type=submit]:disabled { background: var(--flaeche-gesperrt); border-color: var(--flaeche-gesperrt); color: var(--text-gesperrt); cursor: not-allowed; transform: none; }
button > svg.zeichen, .knopf > svg.zeichen { width: 18px; height: 18px; margin: 0; vertical-align: 0; }
.aktionstext { min-width: 0; overflow-wrap: anywhere; }
.knopf.sekundaer, button.sekundaer, .knopf.leise { background: var(--surface-card); color: var(--text-body); border-color: var(--border-strong); }
.knopf.sekundaer:hover, button.sekundaer:hover, .knopf.leise:hover { background: var(--surface-sunken); border-color: var(--border-strong); color: var(--text-body); }
.knopf.sekundaer:active, button.sekundaer:active { background: var(--surface-muted); }
.knopf.tertiaer, button.tertiaer { background: transparent; color: var(--text-body); border-color: transparent; }
.knopf.tertiaer:hover, button.tertiaer:hover { background: var(--surface-muted); border-color: transparent; color: var(--text-body); }
.knopf.gefahr, button.gefahr { background: var(--surface-card); color: var(--status-error-fg); border-color: var(--status-error-fg); }
.knopf.gefahr:hover, button.gefahr:hover { background: var(--status-error-bg); color: var(--status-error-fg); border-color: var(--status-error-fg); }
.knopf.gefahr:active, button.gefahr:active { background: var(--status-error-border); }
.knopf.klein, button.klein { min-height: var(--control-h-sm); padding: 0 var(--space-3); }
.knopf.klein > svg.zeichen, button.klein > svg.zeichen { width: 16px; height: 16px; }
.knopf.gross, button.gross { min-height: var(--control-h-lg); padding: 0 22px; font-size: var(--fs-16); }
.knopf.primaer, button.primaer { background: var(--brand); color: var(--text-on-brand); border-color: var(--brand); }
button:focus-visible, .knopf:focus-visible, .symbolknopf:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Textschaltflächen ohne Rahmen (z. B. Passkey-Direktanmeldung). */
.textknopf, button.textknopf { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--text-link); text-decoration: underline; text-underline-offset: .18em; font: inherit; }
.textknopf:hover, button.textknopf:hover { background: transparent; color: var(--text-link-hover); text-decoration-thickness: 2px; }

/* Badges: Status nie nur über Farbe — Icon und Wort stehen im Markup. */
.statusmarke, .marke { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--surface-muted); color: var(--text-body); font: 500 var(--fs-12)/1.3 var(--font-sans); white-space: normal; overflow-wrap: anywhere; font-variant-numeric: var(--num-tabular); vertical-align: middle; width: max-content; max-width: 100%; }
.statusmarke svg.zeichen, .marke svg.zeichen { width: 13px; height: 13px; margin: 0; vertical-align: 0; }
.statusmarke.klein, .marke.klein { min-height: 20px; padding: 1px 6px; font-size: 11px; }
.statusmarke.positiv, .statusmarke.erfolg, .statusmarke.erledigt, .marke.erfolg { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.statusmarke.warnung, .marke.warnung { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-border); }
.statusmarke.fehler, .marke.fehler { background: var(--status-error-bg); color: var(--status-error-fg); border-color: var(--status-error-border); }
.statusmarke.info, .marke.info { background: var(--status-info-bg); color: var(--status-info-fg); border-color: var(--status-info-border); }
.statusmarke.neutral, .marke.neutral { background: var(--surface-muted); color: var(--text-body); border-color: var(--border-default); }
.statusmarke.kontur, .marke.kontur { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.statusmarke.marke-hervor, .marke.hervor { background: var(--surface-brand-subtle); color: var(--text-brand); border-color: var(--marke-hervor-rand); }
.anzahl { display: inline-flex; align-items: center; min-width: 20px; justify-content: center; padding: 3px 6px; border-radius: var(--radius-full); background: var(--surface-muted); color: var(--text-muted); font: 500 11px/1 var(--font-sans); font-variant-numeric: var(--num-tabular); }
.schrittstatus { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 var(--space-3); min-height: 24px; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--status-warning-border); background: var(--status-warning-bg); color: var(--status-warning-fg); font: 500 var(--fs-12)/1.3 var(--font-sans); }
.schrittstatus.erledigt { border-color: var(--status-success-border); background: var(--status-success-bg); color: var(--status-success-fg); }
.material-pruefstatus { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; margin: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid; font: 500 var(--fs-12)/1.3 var(--font-sans); }
.material-pruefstatus.ist-geprueft { color: var(--status-success-fg); background: var(--status-success-bg); border-color: var(--status-success-border); }
.material-pruefstatus.ist-offen { color: var(--status-warning-fg); background: var(--status-warning-bg); border-color: var(--status-warning-border); }
.abzeichen { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 7px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); font: 500 11px/1.3 var(--font-sans); color: var(--text-body); background: var(--surface-card); }

/* Testmodus-Urteile und Betriebsstufen: Das Wort steht im Markup, der Punkt ist Zierde. */
.bestanden { color: var(--status-success-fg); font-weight: 600; }
.gefehlt { color: var(--status-error-fg); font-weight: 600; }
.unmessbar { color: var(--status-warning-fg); font-weight: 600; }
.rot, .gelb, .gr\00fcn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rot::before, .gelb::before, .gr\00fcn::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); flex: none; }
.rot { color: var(--status-error-fg); } .rot::before { background: var(--status-error-fg); }
.gelb { color: var(--status-warning-fg); } .gelb::before { background: var(--status-warning-fg); }
.gr\00fcn { color: var(--status-success-fg); } .gr\00fcn::before { background: var(--status-success-fg); }

/* Hinweise (Alert): Fläche, Linie und Icon im Ton, Titel in der Tonfarbe. */
.meldungen { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.meldungen li, .hinweisbox, .vorbehalt, .warnung:not(.statusmarke):not(.marke):not(.hinweisbox), .datenschutz-hinweis, .schema-befund, .formularfehler, .hilfe-kurztext, .speicherstatus:not(:empty) { display: block; padding: var(--space-3) 14px; border-radius: var(--radius-md); border: 1px solid var(--status-info-border); background: var(--status-info-bg); color: var(--text-body); font: var(--type-small); }
.meldungen li { display: flex; gap: var(--space-3); align-items: flex-start; }
.meldungen li > svg.zeichen { width: 20px; height: 20px; margin-top: 0; vertical-align: 0; color: var(--status-info-fg); }
.meldungen li.error, .formularfehler { border-color: var(--status-error-border); background: var(--status-error-bg); }
.meldungen li.error > svg.zeichen, .formularfehler h2 { color: var(--status-error-fg); }
.meldungen li.warning, .vorbehalt, .warnung:not(.statusmarke):not(.marke):not(.hinweisbox), .schema-befund { border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.meldungen li.warning > svg.zeichen { color: var(--status-warning-fg); }
.meldungen li.success { border-color: var(--status-success-border); background: var(--status-success-bg); }
.meldungen li.success > svg.zeichen { color: var(--status-success-fg); }
.hinweisbox { display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-4) 0; }
.hinweisbox > svg.zeichen { width: 20px; height: 20px; flex: none; margin-top: 1px; vertical-align: 0; color: var(--status-info-fg); }
.hinweisbox > div { flex: 1; min-width: 0; }
.hinweisbox > div > strong:first-child, .hinweisbox .hinweistitel { display: block; font: 600 var(--fs-14)/1.4 var(--font-sans); color: var(--status-info-fg); }
.hinweisbox p { margin: 2px 0 0; }
.hinweisbox.erfolg { border-color: var(--status-success-border); background: var(--status-success-bg); }
.hinweisbox.erfolg > svg.zeichen, .hinweisbox.erfolg .hinweistitel, .hinweisbox.erfolg > div > strong:first-child { color: var(--status-success-fg); }
.hinweisbox.warnung { border-color: var(--status-warning-border); background: var(--status-warning-bg); }
.hinweisbox.warnung > svg.zeichen, .hinweisbox.warnung .hinweistitel, .hinweisbox.warnung > div > strong:first-child { color: var(--status-warning-fg); }
.hinweisbox.fehler { border-color: var(--status-error-border); background: var(--status-error-bg); }
.hinweisbox.fehler > svg.zeichen, .hinweisbox.fehler .hinweistitel, .hinweisbox.fehler > div > strong:first-child { color: var(--status-error-fg); }
.vorbehalt, .warnung:not(.statusmarke):not(.marke):not(.hinweisbox) { margin: var(--space-4) 0; }
.vorbehalt em { font-style: normal; }
.formularfehler { margin: 0 0 var(--space-5); padding: 14px var(--space-4); }
.formularfehler h2 { margin: 0 0 var(--space-1); font: 600 var(--fs-14)/1.4 var(--font-sans); }
.formularfehler ul { margin: 0; padding-left: var(--space-5); }
.formularfehler a { color: var(--status-error-fg); }
.datenschutz-hinweis { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); }
.datenschutz-hinweis h2 { margin-top: 0; font: 600 var(--fs-16)/1.35 var(--font-sans); }
.schema-befund { margin: var(--space-5) 0; }
.schema-befund p:last-child { margin-bottom: 0; }
.speicherstatus:not(:empty) { border-color: var(--status-success-border); background: var(--status-success-bg); }
.speicherstatus[role="alert"] { border-color: var(--status-warning-border); background: var(--status-warning-bg); }

/* KI-Kennzeichnung (Art. 50 AI Act): Hinweisleiste mit info-Icon, kein eigenes KI-Symbol. */
.ki-kennzeichen { position: relative; display: block; padding: var(--space-2) 14px var(--space-2) 38px; margin: var(--space-4) 0; background: var(--status-info-bg); color: var(--status-info-fg); border: 1px solid var(--status-info-border); border-radius: var(--radius-md); font: var(--type-small); }
.ki-kennzeichen svg.zeichen { position: absolute; left: 14px; top: calc(var(--space-2) + 2px); width: 16px; height: 16px; margin: 0; }
.ki-kennzeichen strong { color: inherit; }
.ki-kennzeichen.demo { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-border); }
.ki-marke { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--status-info-border); background: var(--status-info-bg); color: var(--status-info-fg); font: 500 11px/1.3 var(--font-sans); }

/* Karten und Tafeln: weiß, Haarlinie, Radius 10, ohne Schatten im Ruhezustand. */
.inhaltspanel, .formular-karte, .ergebniskarte, .bereichskarte, .fachdetails, .ablaufkarte, .lernabschnitt, .hilfe-start, .hilfe-artikel, .kontextkarte, .einzelkonto-panel, .kurseinladung, .material-struktur, .beitrittskarte, .zugangsinhalt { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); min-width: 0; }
.inhaltspanel { margin: 0 0 var(--space-5); padding: var(--space-5); overflow: hidden; }
.inhaltspanel > h2:first-child, .formular-karte > h2:first-child, .inhaltspanel > .abschnittskopf:first-child h2 { margin-top: 0; }
.inhaltspanel:has(> .panelkopf) { padding: 0; }
.inhaltspanel:has(> .panelkopf) > :not(.panelkopf):not(.klausurzeile):not(.leerzustand):not(.objektliste):not(.tabellenbereich):not(.kurs-einladung) { margin-left: var(--space-5); margin-right: var(--space-5); }
.panelkopf, .abschnittskopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.panelkopf { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); }
.panelkopf h2, .abschnittskopf h2 { margin: 0; }
.abschnittskopf { margin: 0 0 var(--space-4); }
.abschnittskopf p, .abschnittskopf > span { font: var(--type-small); color: var(--text-muted); margin: 2px 0; }
.panelkopf > a:not(.knopf), .abschnittskopf > a:not(.knopf) { font: var(--type-small); display: inline-flex; align-items: center; gap: 4px; }
.panelkopf > a:not(.knopf) svg.zeichen, .abschnittskopf > a:not(.knopf) svg.zeichen { order: 2; margin: 0; width: 16px; height: 16px; }
.formular-karte { padding: var(--space-6); margin: 0 0 var(--space-5); }
.formular-karte > h2 { margin: 0 0 var(--space-5); }
.kontextkarte { padding: var(--space-6); background: var(--surface-sunken); border-color: var(--border-subtle); }
.kontextkarte h2 { font: var(--type-h4); margin: var(--space-2) 0 var(--space-4); }
.fachdetails { padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; }
.fachdetails > summary { font: 600 var(--fs-16)/1.35 var(--font-sans); }
.fachdetails[open] > summary { margin-bottom: var(--space-4); }
.fachdetails table { margin-bottom: var(--space-5); }

/* Klickbare Karten (CourseCard): Linie stärker und leiser Schatten beim Zeigen. */
.kursraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-8); }
.kurskarte { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: 18px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); min-width: 0; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.kurskarte:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.kurskarte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.kurskarte-kopf > svg.zeichen { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--text-subtle); transition: color var(--dur-fast); }
.kurskarte:hover .kurskarte-kopf > svg.zeichen { color: var(--text-body); }
.kurskarte .augenbraue { margin: 0 0 4px; }
.kurs-institution, .kurskarte-fuss > span { display: inline-flex; align-items: center; gap: 6px; }
.kurs-institution svg.zeichen, .kurskarte-fuss svg.zeichen { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.kurs-symbol { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle); color: var(--text-body); font: 600 var(--fs-20)/1 var(--font-serif); }
.kurs-symbol svg.zeichen { width: 20px; height: 20px; margin: 0; }
.kurskarte h3 { font: 600 var(--fs-20)/1.25 var(--font-serif); letter-spacing: var(--tracking-tight); margin: 0; }
.kurskarte h3 a { color: var(--text-body); text-decoration: none; }
.kurskarte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kurskarte h3 a:hover { text-decoration: underline; }
.kurskarte a:not(h3 a), .kurskarte button, .kurskarte form { position: relative; z-index: 1; }
.kurs-institution { font: var(--type-small); color: var(--text-muted); margin: 0; }
.kurskarte-fuss { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font: var(--type-caption); color: var(--text-muted); }
.kurskarte .neue-klausur { display: inline-block; font: var(--type-small); }

/* Kennzahlen (StatCard). */
.kennzahlen, .kennzahlenleiste, .statistik-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); padding: 0; }
.kennzahlen > div, .kennzahlen > a, .kennzahlenleiste > div, .statistik-kennzahlen article { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 18px; margin: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); color: var(--text-body); text-decoration: none; min-width: 0; }
.kennzahlen > a:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: var(--text-body); }
.kennzahlen span, .kennzahlenleiste dt, .statistik-kennzahlen article > span, .statistik-kennzahlen h2, .statistik-kennzahlen h3 { display: flex; align-items: center; gap: var(--space-2); font: var(--type-small); color: var(--text-muted); margin: 0; }
.kennzahlen strong, .kennzahlenleiste dd, .statistik-kennzahlen strong { display: block; margin: 0; font: 600 var(--fs-30)/1.1 var(--font-sans); letter-spacing: -0.01em; color: var(--text-body); font-variant-numeric: var(--num-tabular); }
.kennzahlen strong small { font: var(--type-small); color: var(--text-muted); margin-left: 4px; }
.kennzahlen strong.kennzahl-text, .kennzahlen .textwert { font: 600 var(--fs-18)/1.35 var(--font-sans); }
.kennzahlen strong.kurscode { font: 500 var(--fs-18)/1.35 var(--font-mono); }
.kennzahlen small, .statistik-kennzahlen small { font: var(--type-caption); color: var(--text-muted); }

/* Leerzustand (EmptyState): gestrichelte Linie, Symbolkreis mit rotem Zielpunkt. */
.leerzustand { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px var(--space-6); margin: var(--space-5) 0; background: var(--surface-card); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); color: var(--text-muted); font: var(--type-small); }
.leerzustand::before { content: ""; width: 56px; height: 56px; flex: none; border-radius: var(--radius-full); background: var(--surface-sunken); order: -2; }
.leerzustand::after { content: ""; position: absolute; top: 46px; left: calc(50% + 14px); width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand); }
.leerzustand > svg.zeichen { position: absolute; top: 56px; left: 50%; margin: 0 0 0 -12px; width: 24px; height: 24px; color: var(--text-muted); }
.leerzustand h2, .leerzustand h3 { font: var(--type-h5); color: var(--text-body); margin: var(--space-1) 0 0; }
.leerzustand p { max-width: 380px; margin: 0; color: var(--text-muted); }
.leerzustand .knopf, .leerzustand button, .leerzustand form { margin-top: var(--space-2); }
.leerzustand.kompakt { border: 0; margin: 0; padding: var(--space-6) var(--space-5); background: transparent; }
.leerzustand.kompakt::before { width: 40px; height: 40px; }
.leerzustand.kompakt::after { top: 28px; left: calc(50% + 8px); width: 6px; height: 6px; }
.leerzustand.kompakt > svg.zeichen { top: 34px; margin-left: -10px; width: 20px; height: 20px; }

/* Fortschritt und Laden (ProgressBar, Spinner). */
.fortschrittsbalken { width: 100%; height: 8px; overflow: hidden; background: var(--grade-track); border-radius: var(--radius-full); margin: var(--space-2) 0 var(--space-8); }
.fortschrittsbalken span { display: block; width: 35%; height: 100%; background: var(--grade-fill); border-radius: var(--radius-full); animation: einlesebalken 1.8s var(--ease-standard) infinite; }
@keyframes einlesebalken { from { transform: translateX(-105%); } to { transform: translateX(390%); } }
.ladeindikator { width: 32px; height: 32px; border: 3px solid var(--grade-track); border-top-color: var(--brand); border-radius: var(--radius-full); animation: pl-spin 800ms linear infinite; margin-bottom: var(--space-5); }
progress { appearance: none; -webkit-appearance: none; width: min(100%, 360px); height: 8px; border: 0; border-radius: var(--radius-full); background: var(--grade-track); overflow: hidden; accent-color: var(--tinte-flaeche); }
progress::-webkit-progress-bar { background: var(--grade-track); border-radius: var(--radius-full); }
progress::-webkit-progress-value { background: var(--grade-fill); border-radius: var(--radius-full); }
progress::-moz-progress-bar { background: var(--grade-fill); border-radius: var(--radius-full); }
meter { width: 100%; min-width: 4rem; height: 8px; accent-color: var(--balken-kraeftig); }
meter::-webkit-meter-bar { background: var(--grade-track); border: 0; border-radius: var(--radius-full); height: 8px; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--balken-kraeftig); border-radius: var(--radius-full); }
meter::-moz-meter-bar { background: var(--balken-kraeftig); border-radius: var(--radius-full); }
.fortschritt { display: flex; flex-direction: column; gap: 6px; }
.fortschritt-kopf { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--type-small); }
.fortschritt-kopf span:last-child { color: var(--text-muted); font-variant-numeric: var(--num-tabular); }
.fortschritt-spur { height: 4px; border-radius: var(--radius-full); background: var(--grade-track); overflow: hidden; }
.fortschritt-spur > span { display: block; height: 100%; background: var(--grade-fill); border-radius: var(--radius-full); }

/* Aufklappbereiche. */
details { border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin: var(--space-2) 0; background: var(--surface-card); }
summary { padding: var(--space-3) var(--space-4); cursor: pointer; font: 500 var(--fs-14)/1.4 var(--font-sans); border-radius: inherit; list-style: none; display: flex; align-items: center; gap: var(--space-2); }
summary::-webkit-details-marker { display: none; }
details:not(.profilmenue):not(.baumzweig) > summary::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--text-muted); transition: transform var(--dur-fast) var(--ease-standard); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
details[open]:not(.profilmenue):not(.baumzweig) > summary::before { transform: rotate(90deg); }
summary:hover { color: var(--text-body); }
details[open] > summary { border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
details > :not(summary) { margin-left: var(--space-4); margin-right: var(--space-4); }
details.fachdetails > :not(summary), details.schnellzugriffe > :not(summary), details.profilmenue > :not(summary), .strukturbaum details > :not(summary), details.andere-anmeldewege > :not(summary), details.diagrammdaten > :not(summary), details.ergebnis-historie > :not(summary), details.speicherfristen > :not(summary), details.material-fussnoten > :not(summary), [data-editor-bereich] > :not(summary) { margin-left: 0; margin-right: 0; }
details.fachdetails[open] > summary, details.schnellzugriffe[open] > summary, .strukturbaum details[open] > summary, details.andere-anmeldewege[open] > summary, details.diagrammdaten[open] > summary, details.ergebnis-historie[open] > summary { border-bottom: 0; }
.schnellzugriffe { border: 0; background: none; margin: var(--space-1) 0 0; font: var(--type-caption); }
.schnellzugriffe summary { padding: 0; color: var(--text-muted); font: var(--type-caption); }
.schnellzugriffe > div, .schnellzugriffe > p, .schnellzugriffe > form { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-2) 0 0; margin: 0; }
.speicherfristen { padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; }
.speicherfristen summary { padding: 0; font-weight: 600; }
.ergebnis-historie { border: 0; background: none; padding-top: var(--space-2); }
.ergebnis-historie summary { padding: 0; color: var(--text-link); font: var(--type-small); }
.diagrammdaten { border: 0; margin: var(--space-2) 0 0; padding: 0; background: transparent; font: var(--type-small); }
.diagrammdaten summary { color: var(--text-muted); padding: var(--space-1) 0; font: var(--type-small); }

/* Dialog (Modal): Radius 16, großer Schatten, Überlagerung Tinte 48 %. */
dialog { border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-lg); padding: 22px var(--space-6); max-width: min(34rem, calc(100vw - 32px)); }
dialog::backdrop { background: var(--surface-overlay); }
dialog h2 { font: var(--type-h4); margin: 0 0 var(--space-2); }
dialog p { color: var(--text-muted); }
dialog p.hinweis { font: var(--type-small); }
#sitzungswarnung { width: calc(100% - 2rem); }
dialog .formularaktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); border-top: 1px solid var(--border-subtle); margin: var(--space-4) calc(-1 * var(--space-6)) -22px; padding: 14px var(--space-6); background: var(--surface-sunken); border-radius: 0 0 var(--radius-xl) var(--radius-xl); justify-content: flex-end; }
#sitzungswarnung-fehler:empty { display: none; }

/* ===== 4 Formulare ========================================================= */

input[type=text], input[type=email], input[type=number], input[type=password], input[type=search], input[type=url], input[type=tel], input[type=date], input[type=datetime-local], input[type=time], textarea, select { min-height: var(--control-h-md); max-width: 100%; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-body); font: var(--type-body); outline: none; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
textarea { padding: 10px var(--space-3); line-height: 1.5; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7078' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; cursor: pointer; }
select[multiple] { background-image: none; padding: var(--space-2); }
input:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus) { border-color: var(--rand-hover); }
input:focus, textarea:focus, select:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 25%, transparent); }
input:disabled, textarea:disabled, select:disabled, input[readonly], textarea[readonly] { background: var(--surface-sunken); color: var(--text-muted); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"], .formularfeld.fehler input, .errorlist + input, .errorlist + select, .errorlist + textarea { border-color: var(--status-error-fg); box-shadow: 0 0 0 1px var(--status-error-fg); }
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--tinte-flaeche); margin: 2px 0 0; flex: none; cursor: pointer; }
input[type=file] { display: block; width: 100%; padding: var(--space-5); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-sunken); color: var(--text-muted); font: var(--type-small); cursor: pointer; }
input[type=file]:hover { border-color: var(--rand-hover); }
input[type=file]::file-selector-button { margin-right: var(--space-3); min-height: var(--control-h-sm); padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-body); font: 500 var(--fs-14)/1 var(--font-sans); cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--surface-sunken); }
label { font: 500 var(--fs-14)/1.3 var(--font-sans); color: var(--text-body); }
.formularfeld, form > p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-5); }
.formularfeld > label, form > p > label { display: block; }
.formularfeld input:not([type=checkbox]):not([type=radio]), .formularfeld textarea, .formularfeld select { width: 100%; }
.formularfeld .hilfetext, .formularfeld .feldhilfe, .formularfeld .helptext { margin: 0; }
.feldhilfe { margin: 6px 0 0; }
.errorlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font: var(--type-small); color: var(--status-error-fg); }
.errorlist li { display: flex; gap: 6px; align-items: flex-start; }
.errorlist li::before { content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center/contain no-repeat; }
.formularaktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-4); margin-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.formularaktionen > a:not(.knopf) { font: var(--type-small); }
.formular-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr); gap: var(--space-6); align-items: start; max-width: 1080px; }
.schalterfeld, .einstellungscheckbox, .privat-einwilligung label, .problem-bestaetigung { display: flex; align-items: flex-start; gap: 10px; }
.schalterfeld { padding: var(--space-4); background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.schalterfeld label, .einstellungscheckbox label { display: inline; margin: 0; font: var(--type-body); }
.einstellungsgruppe { margin: 0 0 var(--space-6); padding: var(--space-5) 0 0; border: 0; border-top: 1px solid var(--border-default); min-width: 0; scroll-margin-top: var(--space-5); }
.einstellungsgruppe legend { font: var(--type-h5); padding: 0 var(--space-3) 0 0; }
.einstellungsgruppe > p { margin: 0 0 var(--space-5); }
.einstellungsgruppe > p > .hinweis { max-width: 850px; }
.einstellungsgruppe > p > input:not([type=checkbox]), .einstellungsgruppe > p > select, .einstellungsgruppe > p > textarea { width: 100%; max-width: 640px; }
.formular-abschnitte, .bereichsreiter { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-6); padding: 4px; width: fit-content; max-width: 100%; background: var(--surface-muted); border-radius: var(--radius-md); }
.formular-abschnitte a, .bereichsreiter a { padding: 6px var(--space-3); border-radius: var(--radius-sm); font: var(--type-ui); color: var(--text-muted); text-decoration: none; }
.formular-abschnitte a:hover, .bereichsreiter a:hover { background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-sm); }
form.inline { display: inline-block; max-width: 100%; vertical-align: middle; margin: 0 var(--space-2) 0 0; }
.rechte-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.rechte-matrix > div { display: contents; }
.rechte-matrix label { display: flex; align-items: flex-start; gap: var(--space-2); font: var(--type-small); }
.semester-auswahl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); }
.semester-auswahl label { display: block; margin: 0 0 6px; font: var(--type-small); color: var(--text-muted); }
.semester-auswahl select { width: 100%; }

/* Filterleisten und Suche. */
.listenfilter, .statistik-filter { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); min-width: 0; }
.filterfelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3) var(--space-4); align-items: start; }
.filterfelder > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.filterfelder input, .filterfelder select { width: 100%; }
.filteraktionen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font: var(--type-small); }
.filterhinweis { color: var(--text-muted); }
.filteranzahl { margin-left: auto; color: var(--text-muted); font-variant-numeric: var(--num-tabular); }
.statistik-filter { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
.statistik-filter > div { min-width: 10rem; flex: 1 1 10rem; display: flex; flex-direction: column; gap: 6px; }
.statistik-filter select, .statistik-filter input { width: 100%; }
.statistik-filter .statistik-filter-aktionen { flex-direction: row; align-items: center; gap: var(--space-3); }
.listensuche, .hilfe-suche { margin: 0 0 var(--space-5); max-width: 48rem; }
.listensuche label, .hilfe-suche label { display: block; margin-bottom: 6px; }
.listensuche > div, .hilfe-suche > div { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.listensuche input, .hilfe-suche input { flex: 1 1 260px; min-width: 0; margin: 0; padding-left: 38px; background: var(--surface-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7078' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center / 18px; }
.lehrfilter, .lernfilter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
.lehrfilter input, .lehrfilter select { width: auto; max-width: 100%; min-width: 12rem; }
.lernfilter > div { flex: 1 1 20rem; max-width: 32rem; display: flex; flex-direction: column; gap: 6px; }
.lernfilter select { width: 100%; }

/* ===== 5 Listen und Tabellen ============================================== */

table { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--space-4) 0 var(--space-5); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); font: var(--type-small); font-variant-numeric: var(--num-tabular); }
caption { caption-side: top; text-align: left; padding: 0 0 var(--space-2); font: var(--type-small); color: var(--text-muted); }
th, td { text-align: left; vertical-align: top; padding: 10px var(--space-3); border-bottom: 1px solid var(--border-subtle); }
thead th { font: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); background: var(--surface-sunken); border-bottom-color: var(--border-default); white-space: nowrap; }
thead th:first-child { border-top-left-radius: var(--radius-lg); }
thead th:last-child { border-top-right-radius: var(--radius-lg); }
tbody th { font: 500 var(--fs-14)/1.45 var(--font-sans); color: var(--text-body); }
tbody tr:last-child > td, tbody tr:last-child > th, tfoot tr:last-child > * { border-bottom: 0; }
tbody tr:hover > td, tbody tr:hover > th { background: var(--flaeche-hover); }
tfoot th, tfoot td { background: var(--surface-sunken); font-weight: 600; border-top: 1px solid var(--border-default); }
td.zahl, th.zahl, td.num { text-align: right; }
.tabellenbereich, .tabellen-scroll, .tabelle-scroll, .statistik-tabelle, .hilfe-tabelle { max-width: 100%; overflow-x: auto; margin: var(--space-4) 0 var(--space-5); }
.tabellenbereich { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); }
.tabellenbereich table, .tabellen-scroll table, .tabelle-scroll table, .statistik-tabelle table, .hilfe-tabelle table { margin: 0; }
.tabellenbereich table { border: 0; }
/* Die Beschriftung steht im Rahmen der Tabelle — mit Innenabstand, sonst liegt sie auf der Linie. */
.tabellenbereich > table > caption { padding: var(--space-3) var(--space-4) var(--space-2); }
.tabellenbereich:focus-visible, .hilfe-tabelle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.inhaltspanel > table:last-child, .inhaltspanel > .tabellenbereich:last-child { margin-bottom: 0; }

/* Zeilenlisten (Objektlisten, Klausurzeilen): Haarlinien statt gestapelter Karten. */
.klausurzeile { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.klausurzeile:last-child { border-bottom: 0; }
.klausurzeile:hover { background: var(--flaeche-hover); }
.klausurzeile-text { flex: 1; min-width: 0; }
.klausurzeile-text h3 { margin: 0 0 2px; font: 600 var(--fs-16)/1.35 var(--font-sans); }
.klausurzeile-text h3 a { color: var(--text-body); text-decoration: none; }
.klausurzeile-text h3 a:hover { text-decoration: underline; }
.klausurzeile-text p { margin: 0; font: var(--type-small); color: var(--text-muted); }
.klausurzeile-text > .statusmarke { margin-top: var(--space-2); }
.dokument-symbol { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle); color: var(--text-muted); }
.dokument-symbol svg.zeichen { width: 20px; height: 20px; margin: 0; }
.objektliste { display: grid; }
.objektzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-subtle); color: var(--text-body); text-decoration: none; min-width: 0; }
.objektzeile:last-child { border-bottom: 0; }
a.objektzeile:hover, .objektzeile:hover { background: var(--flaeche-hover); color: var(--text-body); }
.objektzeile > span:first-child { flex: 1; min-width: 0; }
.objektzeile strong { display: block; font: 500 var(--fs-14)/1.4 var(--font-sans); }
.objektzeile small { display: block; font: var(--type-caption); color: var(--text-muted); margin-top: 2px; }
.objektzeile > span:not(:first-child) { font: var(--type-caption); color: var(--text-muted); }
.zeilenpfeil, .zeilenziel { display: inline-flex; align-items: center; gap: 4px; color: var(--text-subtle); white-space: nowrap; }
.zeilenpfeil svg.zeichen, .zeilenziel svg.zeichen, .baumzweig > summary > a svg.zeichen, .baumblatt svg.zeichen { width: 16px; height: 16px; margin: 0; }
a.objektzeile:hover .zeilenpfeil, a.objektzeile:hover .zeilenziel { color: var(--text-body); }
.baumzweig > summary > a { display: inline-flex; align-items: center; gap: 2px; }
.lehrliste { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-8); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); overflow: hidden; }
.lehrliste > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, .55fr) auto; gap: var(--space-5); align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.lehrliste > li:last-child { border-bottom: 0; }
.lehrliste > li:hover { background: var(--flaeche-hover); }
.lehrliste h2, .lehrliste h3 { font: 600 var(--fs-16)/1.35 var(--font-sans); margin: 0 0 2px; }
.lehrliste p { font: var(--type-small); color: var(--text-muted); margin: 2px 0; }
.lehrliste a:not(.knopf) { text-decoration: none; color: var(--text-body); }
.lehrliste a:not(.knopf):hover { text-decoration: underline; }
.lehrlisten-titel { min-width: 0; overflow-wrap: anywhere; }
.lehrlisten-stand { display: grid; gap: 4px; font: var(--type-small); }
.lehrliste > .lehrliste-leer { display: block; }
.arbeitsbedarf { color: var(--status-warning-fg); font-weight: 500; }
.datenpaar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: var(--space-2) var(--space-4); margin: 0; }
.datenpaar dt { font: var(--type-small); color: var(--text-muted); }
.datenpaar dd { margin: 0; font: var(--type-small); color: var(--text-body); }
.aufgabensteckbrief { margin: 0 0 var(--space-8); max-width: 65rem; }
.aufgabensteckbrief h2 { margin: 0 0 var(--space-3); }
.aufgabensteckbrief dl { margin: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.aufgabensteckbrief dl > div { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr); gap: var(--space-5); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.aufgabensteckbrief dl > div:last-child { border-bottom: 0; }
.aufgabensteckbrief dt { font: var(--type-small); color: var(--text-muted); }
.aufgabensteckbrief dd { margin: 0; font: var(--type-small); }
.aufgabenpruefung { max-width: 65rem; }
.aufgabenpruefung li { margin-bottom: var(--space-1); }
.kontoadressen { padding: 0; margin: 0; list-style: none; }
.kontoadressen li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
.kontoadressen li:last-child { border-bottom: 0; }
.problemliste article { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.problemliste article:last-child { border-bottom: 0; }
.problemliste h3 { margin: 0; font: 600 var(--fs-14)/1.35 var(--font-sans); }
.problemliste p { margin: 2px 0; font: var(--type-small); }
.problemliste small { font: var(--type-caption); color: var(--text-muted); }
.problemzeichen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--status-warning-bg); border: 1px solid var(--status-warning-border); color: var(--status-warning-fg); font: 700 var(--fs-14)/1 var(--font-sans); }
.problemzeichen svg.zeichen { width: 16px; height: 16px; margin: 0; }
.problemzeichen.erledigt { background: var(--status-success-bg); border-color: var(--status-success-border); color: var(--status-success-fg); }
.problemverlauf-eintrag { padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
.problemverlauf-eintrag:last-child { border-bottom: 0; }
.problemverlauf-eintrag h3 { margin: var(--space-1) 0; }
.problemverlauf-eintrag .hilfetext { margin: 0; }
.seitennavigation { display: flex; justify-content: center; align-items: center; gap: var(--space-4); margin: var(--space-4) 0; font: var(--type-small); }

/* Reiter (Tabs): Linie mit rotem Unterstrich; Unterreiter als Pill-Leiste. */
.fachnavigation, .zugangsnavigation, .klausurnav { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0 0 var(--space-5); padding: 0; border-bottom: 1px solid var(--border-default); min-width: 0; }
.fachnavigation > a, .fachnavigation > span, .zugangsnavigation a, .klausurnav a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font: var(--type-ui); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.fachnavigation > a:hover, .zugangsnavigation a:hover, .klausurnav a:hover { color: var(--text-body); }
.fachnavigation > a.aktiv, .fachnavigation > [aria-current], .zugangsnavigation a.aktiv, .zugangsnavigation a[aria-current], .klausurnav a.aktiv { border-bottom-color: var(--brand); color: var(--text-body); }
.fachnavigation svg.zeichen, .klausurnav svg.zeichen { width: 16px; height: 16px; margin: 0; vertical-align: 0; }
.fachnavigation .anzahl, .klausurnav .anzahl { background: var(--surface-muted); }
.fachnavigation > .aktiv .anzahl, .fachnavigation > [aria-current] .anzahl { background: var(--tinte-flaeche); color: var(--auf-tinte); }
.fachunternavigation, .objektreiter, .workflow-register, .ansichtswahl, .arbeitsfilter, .ablaufschritte { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--space-6); padding: 4px; width: fit-content; max-width: 100%; list-style: none; background: var(--surface-muted); border: 0; border-radius: var(--radius-md); }
.fachunternavigation > a, .objektreiter a, .workflow-register a, .ansichtswahl a, .arbeitsfilter a, .ablaufschritte li { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; font: var(--type-ui); color: var(--text-muted); text-decoration: none; }
.fachunternavigation > a:hover, .objektreiter a:hover, .workflow-register a:hover, .ansichtswahl a:hover, .arbeitsfilter a:hover { color: var(--text-body); }
.fachunternavigation > a.aktiv, .fachunternavigation > [aria-current], .objektreiter a[aria-current], .workflow-register a[aria-current], .workflow-register .aktiv, .ansichtswahl [aria-current], .arbeitsfilter a.aktiv, .ablaufschritte [aria-current] { background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-sm); font-weight: 500; }
.arbeitsfilter a span { display: inline-flex; min-width: 18px; justify-content: center; padding: 2px 6px; border-radius: var(--radius-full); background: var(--surface-card); font: 500 11px/1 var(--font-sans); color: var(--text-muted); font-variant-numeric: var(--num-tabular); }
.arbeitsfilter a.aktiv span { background: var(--tinte-flaeche); color: var(--auf-tinte); }
.fachabschnittnav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: calc(-1 * var(--space-2)) 0 var(--space-6); font: var(--type-small); }
.fachabschnittnav > a { color: var(--text-muted); text-decoration: none; padding: var(--space-1) 0; }
.fachabschnittnav > a:hover { color: var(--text-body); text-decoration: underline; }
.klausur-weitere { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6); }
.klausur-weitere a { display: inline-flex; align-items: center; gap: 6px; font: var(--type-caption); color: var(--text-muted); text-decoration: none; }
.klausur-weitere a:hover { color: var(--text-body); text-decoration: underline; }

/* Fortschrittsschritte (Abgabeablauf): nummerierte Punkte, erledigte mit Häkchen,
 * der aktuelle Schritt in Tinte — das Ziel ist der rote Punkt am Ende. */
.studiennavigation { counter-reset: none; }
.studiennavigation > a, .studiennavigation > span { gap: var(--space-2); }
.schrittnummer { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: var(--radius-full); border: 1.5px solid var(--border-strong); background: var(--surface-card); color: var(--text-muted); font: 600 12px/1 var(--font-sans); font-variant-numeric: var(--num-tabular); }
.studiennavigation .erledigt .schrittnummer { border-color: var(--tinte-flaeche); background: var(--tinte-flaeche); color: var(--auf-tinte); }
.studiennavigation [aria-current] .schrittnummer { border-color: var(--tinte-flaeche); color: var(--text-body); box-shadow: 0 0 0 3px var(--surface-muted); }
.studiennavigation .ausstehend { color: var(--text-subtle); }
.studiennavigation .erledigt { color: var(--text-body); }

/* Fortschrittsschritte (Abgabeablauf): nummerierte Punkte auf einer Linie, erledigte
 * mit Häkchen in Tinte, der aktuelle mit Ring; das Ziel trägt den roten Punkt. */
.schrittleiste { margin: 0 0 var(--space-6); }
.schrittleiste ol { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.schrittleiste li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: 0 var(--space-1) var(--space-1); }
.schrittleiste li + li::before { content: ""; position: absolute; top: 13px; right: calc(50% + 18px); left: calc(-50% + 18px); height: 2px; background: var(--border-default); }
.schrittleiste li.erledigt + li::before { background: var(--tinte-flaeche); }
.schrittleiste li > a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.schrittleiste li > a:hover .schritttext { text-decoration: underline; color: var(--text-body); }
.schrittpunkt { position: relative; z-index: 1; width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: 1.5px solid var(--border-strong); background: var(--surface-card); color: var(--text-muted); font: 600 12px/1 var(--font-sans); font-variant-numeric: var(--num-tabular); }
.schrittpunkt svg.zeichen { width: 15px; height: 15px; margin: 0; }
.schrittleiste .erledigt .schrittpunkt { background: var(--tinte-flaeche); border-color: var(--tinte-flaeche); color: var(--auf-tinte); }
.schrittleiste .aktuell .schrittpunkt { border-color: var(--tinte-flaeche); color: var(--text-body); box-shadow: 0 0 0 4px var(--surface-muted); }
.schrittleiste .ziel.aktuell .schrittpunkt::after, .schrittleiste .ziel.erledigt .schrittpunkt::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--brand); border: 2px solid var(--surface-page); }
.schritttext { font: var(--type-ui); color: var(--text-muted); text-align: center; }
.schrittleiste .aktuell .schritttext, .schrittleiste .erledigt .schritttext { color: var(--text-body); }
.schrittleiste .aktuell .schritttext { font-weight: 600; }
.schrittleiste + .fachunternavigation { margin-top: calc(-1 * var(--space-2)); }

/* Baumansicht (Organisation, Gliederung). */
.strukturbaum { margin: 0; padding: 0; list-style: none; }
.strukturbaum > li { list-style: none; margin: 0; border-bottom: 1px solid var(--border-subtle); }
.strukturbaum > li:last-child { border-bottom: 0; }
.strukturbaum .baumzweig { border: 0; border-radius: 0; margin: 0; padding: 0; background: transparent; }
.baumzweig > summary { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-2); list-style: none; font: var(--type-body); border-radius: var(--radius-md); }
.baumzweig > summary::-webkit-details-marker { display: none; }
.baumzweig > summary::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--text-muted); transition: transform var(--dur-fast) var(--ease-standard); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.baumzweig[open] > summary::before { transform: rotate(90deg); }
.baumzweig > summary:hover { background: var(--flaeche-hover); }
.baumtitel { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.baumtitel small { display: block; font: var(--type-caption); color: var(--text-muted); margin-top: 2px; }
.baumzweig > summary > a { font: var(--type-small); white-space: nowrap; padding: var(--space-1) var(--space-2); }
.baumkinder { margin-left: 15px; padding-left: var(--space-4); border-left: 1px solid var(--border-default); }
.baumkinder > .baumstatus { padding: var(--space-4) 0; }
.baumblatt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 10px var(--space-2); color: var(--text-body); text-decoration: none; border-radius: var(--radius-md); }
.baumblatt:hover { background: var(--flaeche-hover); color: var(--text-body); }
.baumleer { color: var(--text-muted); font: var(--type-small); padding: var(--space-4); }
.baumhilfe { margin-bottom: var(--space-5); }
.organisationsebene.ebene-1 { padding-left: 44px; }
.organisationsebene.ebene-2 { padding-left: 68px; }
.gliederungsbaum { list-style: none; padding-left: var(--space-4); }
.gliederungsbaum li { margin: var(--space-2) 0; }
.gliederungsbaum a { overflow-wrap: anywhere; }

/* ===== 6 Bereiche ========================================================== */

/* Studierende: nächste Aufgabe, Ergebnisse, Beitritt. */
.naechste-aufgabe, .freigabeband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); margin: 0 0 var(--space-6); background: var(--surface-card); border: 1px solid var(--border-default); border-left: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.naechste-aufgabe { position: relative; }
.naechste-aufgabe::after { content: ""; position: absolute; top: var(--space-5); right: var(--space-5); width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--brand); }
.naechste-aufgabe h2 { margin: var(--space-1) 0; }
.naechste-aufgabe p:last-child { margin-bottom: 0; }
.naechste-aktionen, .studi-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.studi-aktionen { margin: var(--space-4) 0; }
.freigabeband p { margin: 2px 0 0; font: var(--type-small); color: var(--text-muted); }
.freigabeband-titel { flex: 1; min-width: min(100%, 220px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.freigabeband-titel > strong { font: var(--type-h4); }
.freigabeband form { margin: 0; }
.vorschlagsmarke { display: inline-block; margin-left: var(--space-2); padding: 4px 6px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font: 500 var(--fs-12)/1 var(--font-sans); color: var(--text-muted); vertical-align: 1px; }
/* Reiter als Segmente (Design System, Tabs variant="pill"). */
.pillenreiter { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 var(--space-5); padding: 4px; background: var(--surface-muted); border-radius: var(--radius-md); }
.pillenreiter a { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--space-3); border-radius: var(--radius-sm); font: var(--type-ui); color: var(--text-muted); text-decoration: none; }
.pillenreiter a:hover { color: var(--text-body); }
.pillenreiter a[aria-selected="true"] { background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-sm); }
.lern-einstieg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6); margin: 0 0 var(--space-8); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); }
.lern-einstieg h2 { font: var(--type-h4); margin: var(--space-2) 0; }
.lern-einstieg p { max-width: 530px; font: var(--type-body); color: var(--text-muted); margin: 0 0 var(--space-5); }
.lern-zahlen { display: flex; gap: var(--space-8); padding: 0; }
.lern-zahlen strong { display: block; font: 600 var(--fs-38)/1.1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: var(--num-tabular); }
.lern-zahlen span { font: var(--type-small); color: var(--text-muted); }
.offene-klausur { border-top: 1px solid var(--border-subtle); margin-top: var(--space-4); padding: var(--space-4) 0; }
.offene-klausur strong, .offene-klausur a { display: block; font: var(--type-small); }
.offene-klausur a { margin-top: var(--space-1); }
.beitrittskarte { max-width: 760px; padding: var(--space-6); }
.beitrittskarte h2 { margin-top: 0; }
.kopierstatus { display: block; margin-top: 6px; font: var(--type-caption); color: var(--status-success-fg); }
.ergebnisliste { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.ergebniskarte { padding: var(--space-5); }
.ergebniskopf { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-4); }
.ergebniskopf h2 { font: 600 var(--fs-20)/1.25 var(--font-serif); letter-spacing: var(--tracking-tight); margin: 2px 0 var(--space-2); }
.ergebniswerte { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5) var(--space-8); margin: var(--space-4) 0 var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.ergebniswerte > div > span { display: block; font: var(--type-caption); color: var(--text-muted); }
.ergebniswerte > div > span.notenstufe { font: 500 var(--fs-14)/1.3 var(--font-serif); color: var(--text-body); margin-top: 2px; }
.ergebniswerte strong { font: 600 var(--fs-24)/1.1 var(--font-sans); font-variant-numeric: var(--num-tabular); }
.ergebniswerte strong small { font: var(--type-small); color: var(--text-muted); }
.ergebniswerte .knopf { margin-left: auto; }
.notenzahl { font: 600 var(--fs-24)/1.1 var(--font-sans); font-variant-numeric: var(--num-tabular); }
.notenzahl small { font: var(--type-small); color: var(--text-muted); font-weight: 400; }
.notenstufe { font: 500 var(--fs-14)/1.2 var(--font-serif); }
.reklamationskasten, .remonstrationskasten { padding: var(--space-4) var(--space-5); margin: var(--space-4) 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.reklamationskasten h2, .remonstrationskasten h2 { margin-top: 0; font: 600 var(--fs-16)/1.35 var(--font-sans); }
.rueckfrage-formular { margin-top: var(--space-5); }
/* Rückfragen (Design System, Studierendenansicht: Rückfrage und Einwand). */
.rueckfrageliste { list-style: none; margin: 0; padding: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.rueckfrage { display: flex; flex-direction: column; gap: 6px; padding: 14px var(--space-4); border-top: 1px solid var(--border-subtle); }
.rueckfrage:first-child { border-top: 0; }
.rueckfrage-kopf { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.rueckfrage-art { font: 500 var(--fs-14)/1.3 var(--font-sans); flex: 1; }
.rueckfrage-marken { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rueckfrage-bezug { margin: 0; font: var(--type-caption); color: var(--text-muted); }
.rueckfrage-bezug a { color: var(--text-muted); }
.rueckfrage-frage, .rueckfrage-ergebnis { margin: 0; font: var(--type-small); }
.rueckfrage-frage > span, .rueckfrage-ergebnis > span { color: var(--text-muted); }
.rueckfrage p { margin: 0; }

/* Korrekturkopf (Design System, Studierendenansicht): Titel, Fassung, Note, Rohpunkte,
 * Downloads und KI-Kennzeichnung — ohne JavaScript vollständig. */
.korrekturkopf { margin: calc(-1 * 28px) calc(-1 * 32px) 0; background: var(--surface-card); border-bottom: 1px solid var(--border-default); }
.korrekturkopf-ersetzt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: var(--space-2) var(--space-6); background: var(--status-warning-bg); border-bottom: 1px solid var(--status-warning-border); color: var(--status-warning-fg); font: var(--type-small); }
.korrekturkopf-ersetzt svg.zeichen { width: 16px; height: 16px; }
.korrekturkopf-ersetzt a { color: inherit; font-weight: 600; }
.korrekturkopf-haupt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-4) var(--space-6) 14px; }
.korrekturkopf-titel { flex: 1; min-width: min(100%, 280px); display: flex; flex-direction: column; gap: 6px; }
.korrekturkopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.korrekturkopf h1 { font: var(--type-h4); margin: 0; }
.korrekturkopf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); font: var(--type-small); color: var(--text-muted); }
.korrekturkopf-meta .kennziffer { font-size: 12px; }
.korrekturkopf-ergebnis { display: flex; align-items: center; gap: var(--space-5); }
.korrekturkopf-note, .korrekturkopf-rohpunkte { display: flex; flex-direction: column; gap: 2px; }
.korrekturkopf-note .wert, .korrekturkopf-rohpunkte .wert { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: var(--num-tabular); }
.korrekturkopf-note strong { font: 600 28px/1 var(--font-sans); letter-spacing: -0.02em; }
.korrekturkopf-note .wert span, .korrekturkopf-rohpunkte .wert span { font: 500 11px/1 var(--font-sans); color: var(--text-muted); }
.korrekturkopf-note .notenstufe { font: 500 var(--fs-14)/1.2 var(--font-serif); }
.korrekturkopf-rohpunkte { border-left: 1px solid var(--border-default); padding-left: var(--space-5); }
.korrekturkopf-rohpunkte strong { font: 600 var(--fs-18)/1 var(--font-sans); }
.korrekturkopf-rohpunkte > span:last-child { font: var(--type-caption); color: var(--text-muted); }
.korrekturkopf-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.korrekturkopf .ki-kennzeichen { margin: 0; border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; padding: var(--space-2) var(--space-6) var(--space-2) 46px; font: var(--type-caption); }
.korrekturkopf .ki-kennzeichen svg.zeichen { left: var(--space-6); top: 10px; width: 14px; height: 14px; }

/* Reiter einer Seite (Tabs): mit JavaScript ein Feld sichtbar, ohne alle untereinander. */
.reiterleiste { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0 calc(-1 * 32px) var(--space-6); padding: 0 var(--space-6); background: var(--surface-card); border-bottom: 1px solid var(--border-default); }
.reiterleiste a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font: var(--type-ui); color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.reiterleiste a:hover { color: var(--text-body); }
.reiterleiste a[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--text-body); }
.reiterleiste a[aria-selected="true"] .anzahl { background: var(--tinte-flaeche); color: var(--auf-tinte); }
.reiterfeld { scroll-margin-top: var(--space-6); }
.reiterfeld + .reiterfeld { margin-top: var(--space-10); }
.js .reiterleiste[data-reiter-aktiv] ~ .reiterfeld, .js main .reiterfeld + .reiterfeld { margin-top: 0; }
.reiterfeld[hidden] { display: none; }

/* Ergebnis: Hauptspalte mit Punkten, Seitenspalte mit Hinweisen (Design System). */
.spalten-ergebnis { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.spalten-ergebnis .spalte-haupt { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.spalten-ergebnis .spalte-haupt > h2 { margin: var(--space-2) 0 0; }
.spalten-ergebnis .spalte-neben { flex: 1 1 280px; display: flex; flex-direction: column; gap: var(--space-4); }
.spalten-ergebnis .hinweisbox { margin: 0; }
.viewer-punkte .tabellenbereich { margin: 0; }
.infokarte { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.infokarte > .augenbraue { margin: 0; padding: 14px var(--space-4) var(--space-3); }
.infozeile { display: flex; gap: var(--space-3); padding: 14px var(--space-4); border-top: 1px solid var(--border-subtle); }
.infozeile > svg.zeichen { width: 18px; height: 18px; margin-top: 1px; color: var(--text-muted); }
.infozeile > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.infozeile strong { font: 600 var(--fs-14)/1.35 var(--font-sans); }
.infozeile span { font: var(--type-small); color: var(--text-muted); }
.infokarte-aktion { padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.infokarte-aktion strong { font: 600 var(--fs-14)/1.35 var(--font-sans); }
.infokarte-aktion span { font: var(--type-small); color: var(--text-muted); }
.remonstrationskasten { padding: 0; overflow: hidden; }
.remonstrationskasten-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px var(--space-4); border-bottom: 1px solid var(--border-default); }
.remonstrationskasten-kopf svg.zeichen { width: 18px; height: 18px; color: var(--text-body); }
.remonstrationskasten-kopf h2 { margin: 0; font: 600 var(--fs-16)/1.3 var(--font-sans); }
.remonstrationskasten table { border: 0; border-radius: 0; margin: 0; }
.remonstrationskasten-text { padding: 14px var(--space-4); display: flex; flex-direction: column; gap: 10px; font: var(--type-small); }
.remonstrationskasten-text p { margin: 0; }

/* Bearbeitung: Legende über dem Blatt. */
.viewer-legende { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin: 0 0 14px; font: var(--type-caption); color: var(--text-muted); }
.viewer-legende #viewer-zaehlung { font: var(--type-small); color: var(--text-body); margin-right: auto; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 6px; }
.legende-mangel, .legende-staerke, .legende-mehrfach { width: 20px; height: 10px; }
.legende-mangel { border-bottom: 2px solid var(--annotation-highlight-strong); }
.legende-staerke { border-bottom: 2px solid var(--status-success-fg); }
.legende-mehrfach { border-bottom: 3px double var(--annotation-highlight-strong); }

/* Rückfragen in der Korrektur: Liste links, Formular rechts. */
.rueckfragen-kopf { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.rueckfragen-kopf h2 { margin: 0; }
.spalten-rueckfragen { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-start; }
.spalten-rueckfragen > div { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.spalten-rueckfragen > div > .augenbraue { margin: 0; }
.spalten-rueckfragen .rueckfrage-formular { flex: 1 1 360px; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.rueckfrage-formular h3 { margin: 0; }
.rueckfrage-formular .formularfeld { margin: 0; }
.rueckfrage-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: 2px; }
.auswahlgruppe { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.auswahlgruppe legend { font: 500 var(--fs-14)/1.3 var(--font-sans); margin-bottom: 10px; padding: 0; }
.auswahlgruppe label { display: flex; gap: 10px; align-items: flex-start; font: var(--type-body); }
.auswahlgruppe label .hinweis { display: inline; }

/* Notenverteilung (GradeDistribution): Balken neutral grau, eigene Note in Tinte,
 * Durchschnitt als rote Linie. */
.notenverteilung { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.notenverteilung figcaption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.notenverteilung-titel { font: var(--type-h5); }
.notenverteilung-summe { font: var(--type-small); color: var(--text-muted); font-variant-numeric: var(--num-tabular); }
.notenverteilung-flaeche { position: relative; height: 200px; display: grid; grid-template-columns: repeat(19, 1fr); gap: 3px; align-items: end; border-bottom: 1px solid var(--border-strong); padding-top: var(--space-4); }
.notenverteilung-balken { position: relative; height: calc(var(--hoehe) * 0.92); min-height: 0; background: var(--balken); border-radius: 2px 2px 0 0; }
.notenverteilung-balken.eigene { background: var(--grade-achieved-bg); }
.notenverteilung-balken > span { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font: 500 10px/1.6 var(--font-sans); color: var(--text-muted); font-variant-numeric: var(--num-tabular); }
.notenverteilung-mittel { position: absolute; top: 0; bottom: 0; left: var(--lage); border-left: 1.5px solid var(--brand); z-index: 1; }
.notenverteilung-mittel > span { position: absolute; top: -2px; left: 4px; font: 600 11px/1 var(--font-sans); color: var(--text-brand); }
.notenverteilung-achse { display: grid; grid-template-columns: repeat(19, 1fr); gap: 3px; margin-top: -4px; font: 500 10px/1 var(--font-sans); color: var(--text-muted); text-align: center; font-variant-numeric: var(--num-tabular); }
.notenverteilung-stufen { display: grid; grid-template-columns: 1fr 3fr 3fr 3fr 3fr 3fr 3fr; gap: 3px; }
.notenverteilung-stufen span { border-top: 2px solid var(--balken-kraeftig); padding-top: 4px; font: 400 11px/1.2 var(--font-sans); color: var(--text-muted); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.notenverteilung-stufen span:nth-child(even) { border-top-color: var(--balken-leicht); }
.inhaltspanel > .notenverteilung + .hinweis { margin: var(--space-3) 0 0; }

/* Notenspiegel: neutrale Balken, keine Ampel; Tinte markiert die eigene Note. */
table.notenspiegel .balken { display: inline-block; height: 10px; background: var(--balken); border-radius: 2px; vertical-align: middle; }
table.notenspiegel tr.eigene .balken, table.notenspiegel .balken.eigene { background: var(--grade-achieved-bg); }
table.notenspiegel th[scope="row"] { text-align: right; }
table.notentabelle-eingabe { width: auto; }
table.notentabelle-eingabe th[scope="row"] { text-align: right; padding-right: var(--space-3); }
table.notentabelle-eingabe input.kurz { width: 6rem; text-align: right; }

/* Kurs: Einladung. */
.kurs-einladung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin: 0 var(--space-5) var(--space-5); background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.kurs-einladung > div { flex: 1 1 20rem; }
.kurs-einladung p { margin: var(--space-1) 0 0; }
.kurseinladung { padding: var(--space-5); margin-bottom: var(--space-5); }
.kurseinladung figure { margin: var(--space-4) 0; }
.kurseinladung img, #authenticator img { max-width: 100%; height: auto; background: var(--bild-grund); padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-default); }
.kurseinladung input[readonly] { width: 100%; font-family: var(--font-mono); }

/* Klausur: Einstellungen, Freigaben, Register. */
.klausureinstellungen { max-width: 1000px; }
.klausureinstellungen h2:not(:first-of-type) { border-top: 1px solid var(--border-default); padding-top: var(--space-6); margin-top: var(--space-8); }
.freigabekarte { margin-bottom: var(--space-6); }
.fachformular { max-width: 55rem; }
.fachformular .formular-karte { width: 100%; }
.material-arbeitsbereich { display: block; min-width: 0; }

/* Registerblatt: Typografie trägt die Hierarchie, Felder ruhen rahmenlos. */
tr.registerteil th { padding: var(--space-4) var(--space-2) 6px; font: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-default); background: none; }
td.ebene { color: var(--text-muted); text-align: center; }
td.einzug input { font-family: var(--font-mono); font-size: var(--fs-14); }
td.einzug-1 { padding-left: 1.6em; } td.einzug-2 { padding-left: 3em; } td.einzug-3 { padding-left: 4.4em; } td.einzug-4 { padding-left: 5.8em; }
tr.rz-ebene-0 td.bezeichnung input { font-weight: 600; }
tr.rz-ebene-0 td { background: var(--surface-sunken); }
tr.rz-ebene-2 td.bezeichnung input, tr.rz-ebene-3 td.bezeichnung input, tr.rz-ebene-4 td.bezeichnung input { font-size: var(--fs-14); color: var(--text-muted); }
td.punkte input { text-align: right; width: 6.5rem; }
/* Nr. und Gliederung so schmal wie ihr Inhalt; die Bezeichnung nimmt den Rest. Ohne
   Breiten bekamen alle Felder die Standardbreite, und die Bezeichnung wurde abgeschnitten. */
td.nr input { width: 4.5rem; }
tr.registerzeile td { vertical-align: middle; }
td.einzug input { width: 8rem; }
td.bezeichnung { width: 100%; }
td.bezeichnung input { width: 100%; min-width: 14rem; }
tr.registerzeile input[type=text], tr.registerzeile input[type=number] { border-color: transparent; background: transparent; box-shadow: none; }
tr.registerzeile:hover input[type=text], tr.registerzeile:hover input[type=number] { border-color: var(--border-strong); background: var(--surface-card); }
tr.registerzeile input[type=text]:focus, tr.registerzeile input[type=number]:focus { border-color: var(--focus-ring); background: var(--surface-card); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 25%, transparent); }
section.behoben { color: var(--text-muted); }
section.behoben h2 { color: var(--text-muted); font-size: var(--fs-16); }
section.behoben li { list-style: none; display: flex; align-items: flex-start; gap: var(--space-2); }
section.behoben li svg.zeichen { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--status-success-fg); }
.normzeile input[type=text], td input[type=text].kurz { width: 7rem; }

/* Abgabe prüfen: Prüffassung als Lesetext, Markierung persönlicher Angaben, Scan. */
.prueftext { font: var(--type-reading); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; }
.prueftext span:focus { background: var(--annotation-highlight-active); outline: 2px solid var(--focus-ring); }
.textdurchsicht { margin-top: var(--space-6); }
.einlesestatus { max-width: 720px; }
.scanvorschau img { display: block; max-width: 100%; height: auto; margin: var(--space-3) 0 var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bild-grund); }
.markierungswerkzeuge { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; background: var(--surface-page); border-bottom: 1px solid var(--border-default); }
.markierungswerkzeuge span { font: var(--type-small); color: var(--text-muted); }
#markierbarer-text { user-select: text; }
#markierbarer-text mark { background: var(--annotation-highlight); border-bottom: 2px solid var(--annotation-highlight-strong); }
#markierungsliste li { margin: var(--space-3) 0; overflow-wrap: anywhere; }
.ablaufkarte { padding: var(--space-4); margin-bottom: var(--space-6); }
.scan-markierflaeche { position: relative; width: fit-content; max-width: 100%; }
.scan-markierflaeche img { display: block; margin: 0; }
.scan-markierflaeche.markieren { touch-action: none; cursor: crosshair; user-select: none; }
.scan-auswahl { position: absolute; inset: 0; pointer-events: none; }
.scan-auswahl span { position: absolute; background: color-mix(in oklab, var(--schwaerzung) 70%, transparent); border: 2px solid var(--schwaerzung); }
.transkript-seite { margin-bottom: var(--space-6); }
.transkript-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.transkript-paar img { width: 100%; height: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bild-grund); }
.transkript-paar textarea { width: 100%; font: var(--fs-14)/1.55 var(--font-mono); padding: var(--space-3); }
.transkript-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }

/* Material. */
.materialtext, textarea.materialtext { display: block; width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-2) 0; padding: var(--space-3) var(--space-4); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); font: var(--type-body); }
textarea.materialtext { min-height: 16em; }
.material-struktur { margin: var(--space-4) 0; padding: var(--space-5); }
.material-vorschau { max-height: 640px; overflow: auto; padding: 4px var(--space-3) var(--space-3) 0; font: var(--fs-16)/1.7 var(--font-serif); }
.material-absatz, .material-hinweis > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.material-hinweis { margin: var(--space-4) 0; padding: var(--space-4); background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.material-hinweis .abzeichen { margin-bottom: var(--space-2); }
.material-fussnote { display: grid; grid-template-columns: minmax(24px, max-content) minmax(0, 1fr) auto; gap: var(--space-2); padding: 6px 4px; border-top: 1px solid var(--border-subtle); font: var(--type-small); overflow-wrap: anywhere; }
.material-fussnoten { margin: var(--space-3) 0 0; border: 0; border-top: 1px solid var(--border-default); border-radius: 0; background: transparent; }
.material-fussnoten > summary { padding: var(--space-3) 0; font-weight: 600; }
.material-notenzahl { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--surface-muted); font: 500 11px/1.6 var(--font-sans); }
.material-notenliste { max-height: 22rem; overflow: auto; overscroll-behavior: contain; }
.material-notenrueck { display: flex; gap: 3px; align-items: flex-start; flex-wrap: wrap; max-width: 76px; }
.material-rueckverweis { display: inline-flex; align-items: center; justify-content: center; width: 30px; min-height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border-default); }
.material-rueckverweis .zeichen { width: 14px; height: 14px; margin: 0; }
.material-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.material-werkzeuge > span { font: var(--type-small); color: var(--text-muted); }
.material-blockaktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.material-blockaktionen button { min-height: var(--control-h-sm); padding: 0 var(--space-3); background: var(--surface-card); color: var(--text-body); border-color: var(--border-strong); }
.material-blockaktionen button:hover { background: var(--surface-sunken); color: var(--text-body); border-color: var(--border-strong); }
[data-editor-bereich] > summary { padding: var(--space-3); font-weight: 600; }
[data-editor-bereich] form { padding: var(--space-4); }
[data-editor-bereich] textarea[name=text] { min-height: 360px; }
.material-fussnote:target, .material-vorschau sup:target { background: var(--annotation-highlight-active); outline: 2px solid var(--annotation-highlight-strong); }
.material-vorschau sup a { font-weight: 600; padding: 0 2px; }
[data-material-editor] details { margin: var(--space-3) 0; }
[data-material-editor] label { display: block; margin: 10px 0; }

/* Hilfe. */
.hilfe-start { max-width: 900px; padding: var(--space-6); }
.hilfe-ueberblick { max-width: 65rem; }
.hilfe-gruppe { margin: var(--space-8) 0; }
.hilfe-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); }
.hilfe-karte { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); color: var(--text-body); text-decoration: none; }
.hilfe-karte:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: var(--text-body); }
.hilfe-karte > span { font: var(--type-small); color: var(--text-muted); }
.hilfe-karte .hilfe-weiter { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); color: var(--text-link); }
.hilfe-verzeichnis { list-style: none; padding: 0; margin: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.hilfe-verzeichnis li { margin: 0; border-bottom: 1px solid var(--border-subtle); }
.hilfe-verzeichnis li:last-child { border-bottom: 0; }
.hilfe-verzeichnis a { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1.5fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); color: var(--text-body); text-decoration: none; font-weight: 500; }
.hilfe-verzeichnis a:hover { background: var(--flaeche-hover); color: var(--text-body); }
.hilfe-verzeichnis a > span { font: var(--type-small); color: var(--text-muted); }
.hilfe-verzeichnis a > svg.zeichen { color: var(--text-subtle); }
.hilfe-dokument { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--space-10); align-items: start; }
.hilfe-dokument .hilfe-artikel { min-width: 0; max-width: 52rem; grid-column: 1; grid-row: 1; }
.hilfe-dokument .hilfe-inhalt { grid-column: 2; grid-row: 1; position: sticky; top: var(--space-6); }
.hilfe-artikel { max-width: 52rem; padding: clamp(20px, 4vw, 40px); font: var(--fs-16)/1.7 var(--font-sans); overflow-wrap: anywhere; }
.hilfe-artikel h2 { font: var(--type-h4); margin-top: var(--space-8); scroll-margin-top: var(--space-6); }
.hilfe-artikel h2:first-child { margin-top: 0; }
.hilfe-artikel li { margin: var(--space-2) 0; padding-left: 4px; }
.hilfe-artikel pre { white-space: pre-wrap; background: var(--surface-sunken); padding: var(--space-4); border-radius: var(--radius-md); }
.hilfe-inhalt { padding: var(--space-4); margin: var(--space-4) 0 var(--space-8); background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); font: var(--type-small); }
.hilfe-inhalt ul { columns: 2 20rem; margin: 0; padding-left: var(--space-5); }
.hilfe-dokument .hilfe-inhalt ul { columns: auto; }
.hilfe-inhalt li { padding: 2px 0; break-inside: avoid; margin: var(--space-1) 0; }
.hilfe-abbildung { margin: var(--space-8) 0; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); }
.hilfe-abbildung img { display: block; width: 100%; height: auto; }
.hilfe-abbildung figcaption { padding: var(--space-4) var(--space-5); font: var(--type-small); }
.hilfe-abbildung figcaption ol { margin-bottom: 0; }
.hilfe-screenshot { margin: var(--space-4) 0; }
.hilfe-screenshot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.hilfe-screenshot figcaption { font: var(--type-small); color: var(--text-muted); margin-top: var(--space-2); }
.hilfe-screenshot.platzhalter { padding: var(--space-5); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); font: var(--type-small); }
.hilfe-tabelle table { min-width: 640px; }
.hilfe-tabelle th, .hilfe-tabelle td { min-width: 100px; }
.hilfe-tabellenhinweis { font: var(--type-small); color: var(--text-muted); }
.hilfe-verwandte { max-width: 52rem; margin: var(--space-8) 0; padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.hilfe-verwandte li { margin: var(--space-2) 0; }
.hilfe-kurz { display: inline; font: var(--type-body); }
.hilfe-trigger { min-height: var(--control-h-sm); padding: 0 10px; margin: 0 4px; gap: 6px; background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-strong); font: 500 var(--fs-14)/1 var(--font-sans); vertical-align: middle; }
.hilfe-trigger:hover, .hilfe-trigger[aria-expanded=true] { background: var(--surface-sunken); color: var(--text-body); border-color: var(--border-strong); }
.hilfe-trigger svg.zeichen { width: 16px; height: 16px; }
.hilfe-kurztext { margin: var(--space-2) 0; text-align: left; font: var(--type-small); }
.hilfe-kurztext[hidden] { display: none; }
.hilfe-kurztext a { display: inline-block; margin-left: 6px; }

/* Konto und Zugang. */
.zugangsinhalt { max-width: 48rem; padding: clamp(20px, 3vw, 36px); }
.zugangsinhalt > .formular-karte { padding: 0; border: 0; background: transparent; }
.zugangsinhalt > p:first-child { margin-top: 0; }
.zugangsinhalt form { max-width: 38rem; }
.zugangsinhalt input[type=email], .zugangsinhalt input[type=text], .zugangsinhalt input[type=password], #passwort input[type=password] { width: 100%; }
.zugangsseite .zugangsinhalt { border: 0; border-radius: 0; padding: 0; background: transparent; }
.zugang-alternativen { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font: var(--type-small); }
.kontoseite > .inhaltspanel, .kontoseite > section, .kontoseite #kontobereiche > .inhaltspanel { margin-bottom: var(--space-6); }
.kontoseite > form { margin: var(--space-4) 0 var(--space-6); }
.kontoseite > .inhaltspanel, .kontoseite #kontobereiche > .inhaltspanel, .bereichskarte { padding: var(--space-6); }
.konto-kurszuordnung { margin: var(--space-5) 0; }
.konto-kurszuordnung h4 { margin: 0 0 var(--space-2); }
#kontoadressen form, #kontobereiche form { max-width: 42rem; }
.bereichsraster, .bereichsverzeichnis { display: grid; gap: var(--space-6); }
.bereichsraster > .bereichskarte { margin: 0; }
.bereichskarte > .augenbraue { margin-bottom: var(--space-2); }
.bereichskarte .klausurzeile { flex-wrap: wrap; padding-left: 0; padding-right: 0; }
.bereich-einreichungen { border-top: 1px solid var(--border-subtle); margin-top: var(--space-6); padding-top: var(--space-4); }
.privat-kontowahl fieldset { border: 0; padding: 0; margin: var(--space-5) 0; }
.privat-kontowahl legend { font: 600 var(--fs-14)/1.5 var(--font-sans); margin-bottom: var(--space-3); }
.privat-kontowahl #id_bestehendes_konto { display: grid; gap: var(--space-2); }
.privat-kontowahl #id_bestehendes_konto label { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; font: var(--type-body); }
.privat-kontowahl label:has(input:checked) { border-color: var(--tinte-flaeche); background: var(--surface-sunken); }
.privat-einwilligung { margin: var(--space-4) 0; }
.privat-einwilligung label { font: var(--type-small); cursor: pointer; }
.wiederherstellungscodes { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); background: var(--surface-sunken); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
#passkeys input[type=text] { display: block; width: 100%; max-width: 28rem; }
#sitzungsdauer .helptext { display: block; margin-top: var(--space-2); }
.anmeldung-einstieg { margin: var(--space-5) 0 var(--space-1); }
.anmeldeadresse { font-weight: 600; overflow-wrap: anywhere; }
.zugangsseite .passkey-direkt { margin: 0 0 var(--space-6); }
.passkey-direktknopf { min-height: 44px; padding: 0; background: transparent; color: var(--text-link); border: 0; text-decoration: underline; text-underline-offset: .18em; font: var(--type-small); width: auto; }
.passkey-direktknopf:hover { background: transparent; border: 0; color: var(--text-link-hover); text-decoration-thickness: 2px; }
.passkey-direktknopf:disabled { background: transparent; color: var(--text-muted); text-decoration: none; }
[data-passkey-status] { font: var(--type-small); color: var(--text-muted); }
[data-passkey-status]:empty { display: none; }
.andere-anmeldewege { border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; margin: var(--space-6) 0 0; padding-top: var(--space-2); background: transparent; }
.andere-anmeldewege > summary { padding: var(--space-2) 0; font: var(--type-small); color: var(--text-muted); }
.andere-anmeldewege > form { margin: var(--space-2) 0 var(--space-4); display: grid; gap: var(--space-2); }
.zugangsseite .andere-anmeldewege button { margin: 0; justify-content: flex-start; text-align: left; background: var(--surface-card); color: var(--text-body); border-color: var(--border-strong); }
.zugangsseite .andere-anmeldewege button:hover { background: var(--surface-sunken); }
.andere-anmeldewege > p { font: var(--type-small); margin: var(--space-4) 0 var(--space-1); }

/* Betrieb: Arbeitsplatz, Aktivität. */
.arbeitsplatz-spalten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); }
.arbeitsplatz-formular { max-width: 850px; }
.aktivitaetsgrafik { margin: var(--space-4) 0 0; }
.aktivitaetsgrafik svg { width: 100%; max-height: 230px; fill: var(--balken); }
.aktivitaetsgrafik figcaption { display: flex; justify-content: space-between; font: var(--type-caption); color: var(--text-muted); }
.betreiber-einstieg p { font: var(--type-small); color: var(--text-muted); }
.einzelkonto-panel { padding: var(--space-6); }
.demo-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-4); }
.demo-profil { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.demo-profil h3, .demo-profil p { margin: 0; }
.demo-profil small { overflow-wrap: anywhere; font: var(--type-caption); color: var(--text-muted); }
.demo-profil form { margin-top: auto; padding-top: var(--space-2); }
.schrittliste { padding-left: var(--space-5); }
.schrittliste li { padding-left: var(--space-2); margin-bottom: var(--space-4); color: var(--text-muted); }
.schrittliste li::marker { font: 600 var(--fs-14)/1 var(--font-sans); color: var(--text-body); }
.schrittliste strong { display: block; font: 600 var(--fs-14)/1.4 var(--font-sans); color: var(--text-body); }
.schrittliste span { display: block; font: var(--type-small); color: var(--text-muted); margin-top: 2px; }

/* Alte Seitenleiste je Klausur (nur noch vereinzelt). */
.rumpf { display: flex; align-items: flex-start; min-height: 60vh; }
.rumpf > main { flex: 1 1 auto; min-width: 0; }
.seitennav { flex: 0 0 13.5rem; position: sticky; top: 0; align-self: stretch; display: flex; flex-direction: column; gap: 2px; padding: var(--space-5) var(--space-3); background: var(--surface-card); border-right: 1px solid var(--border-default); }
.seitennav-titel { margin: 0 0 var(--space-2); padding: 0 10px; font: 600 var(--fs-14)/1.35 var(--font-sans); overflow-wrap: anywhere; }
.seitennav a { display: flex; align-items: center; gap: 10px; padding: var(--space-2) 10px; border-radius: var(--radius-md); font: var(--type-ui); color: var(--text-muted); text-decoration: none; }
.seitennav a:hover { background: var(--surface-sunken); color: var(--text-body); }
.seitennav a.aktiv { background: var(--surface-muted); color: var(--text-body); }

/* ===== 7 Betreiber-Backend (Django-Admin im Portalrahmen) ================== */

.portal-formular { --primary: var(--tinte-flaeche); --secondary: var(--tinte-gedaempft); --accent: var(--brand); --primary-fg: var(--auf-tinte); --body-fg: var(--text-body); --body-bg: var(--surface-page); --body-quiet-color: var(--text-muted); --body-loud-color: var(--text-body); --header-color: var(--text-body); --header-branding-color: var(--text-body); --header-bg: var(--surface-card); --header-link-color: var(--text-body); --breadcrumbs-fg: var(--text-muted); --breadcrumbs-link-fg: var(--text-link); --breadcrumbs-bg: transparent; --link-fg: var(--text-link); --link-hover-color: var(--text-link-hover); --link-selected-fg: var(--text-body); --hairline-color: var(--border-subtle); --border-color: var(--border-default); --error-fg: var(--status-error-fg); --message-success-bg: var(--status-success-bg); --message-warning-bg: var(--status-warning-bg); --message-error-bg: var(--status-error-bg); --darkened-bg: var(--surface-sunken); --selected-bg: var(--surface-muted); --selected-row: var(--flaeche-hover); --button-fg: var(--text-on-brand); --button-bg: var(--brand); --button-hover-bg: var(--brand-hover); --default-button-bg: var(--brand); --default-button-hover-bg: var(--brand-hover); --close-button-bg: var(--rand-hover); --close-button-hover-bg: var(--tinte-gedaempft); --delete-button-bg: var(--status-error-fg); --delete-button-hover-bg: var(--fehler-kraeftig); --object-tools-fg: var(--text-body); --object-tools-bg: var(--surface-card); --object-tools-hover-bg: var(--surface-sunken); --font-family-primary: var(--font-sans); --font-family-monospace: var(--font-mono); }
.portal-formular #content { padding: 0; width: auto; min-width: 0; }
.portal-formular #content-main { float: none; width: 100%; min-width: 0; }
.portal-formular #content-related { float: none; width: 100%; margin: var(--space-4) 0; }
.portal-formular .breadcrumbs { background: transparent; padding: 0 0 var(--space-4); color: var(--text-muted); font: var(--type-small); }
.portal-formular .module { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow-x: auto; margin-bottom: var(--space-5); background: var(--surface-card); }
.portal-formular .module h2, .portal-formular .module caption, .portal-formular .inline-group h2 { background: var(--surface-sunken); color: var(--text-body); font: 600 var(--fs-14)/1.4 var(--font-sans); padding: var(--space-3) var(--space-4); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--border-default); }
.portal-formular .module .description { padding: var(--space-3) var(--space-4); color: var(--text-muted); }
.portal-formular .form-row { padding: var(--space-4); display: block; overflow: visible; border-bottom-color: var(--border-subtle); }
.portal-formular .aligned label { font: 500 var(--fs-14)/1.3 var(--font-sans); color: var(--text-body); }
.portal-formular .aligned .form-row input:not([type=checkbox]):not([type=radio]), .portal-formular .aligned .form-row textarea, .portal-formular .aligned .form-row select { max-width: 100%; }
.portal-formular .help, .portal-formular .help p { font: var(--type-small); color: var(--text-muted); }
.portal-formular .submit-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-6) 0; }
.portal-formular .submit-row > * { margin: 0 !important; float: none !important; }
.portal-formular .submit-row a.deletelink { display: inline-flex; align-items: center; min-height: var(--control-h-md); padding: 0 var(--space-4); border: 1px solid var(--status-error-fg); border-radius: var(--radius-md); background: var(--surface-card); color: var(--status-error-fg); font: 500 var(--fs-14)/1 var(--font-sans); }
.portal-formular .submit-row a.deletelink:hover { background: var(--status-error-bg); }
.portal-formular input[type=submit], .portal-formular .button, .portal-formular a.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h-md); padding: 0 var(--space-4); border-radius: var(--radius-md); font: 500 var(--fs-14)/1 var(--font-sans); text-decoration: none; }
.portal-formular input[type=submit]:not(.default), .portal-formular .button:not(.default) { background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-strong); }
.portal-formular input[type=submit]:not(.default):hover, .portal-formular .button:not(.default):hover { background: var(--surface-sunken); }
.portal-formular input[type=submit].default { background: var(--brand); color: var(--text-on-brand); border: 1px solid var(--brand); }
.portal-formular .object-tools { float: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; height: auto; }
.portal-formular .object-tools li { height: auto; margin: 0; }
.portal-formular .object-tools a { display: inline-flex; align-items: center; min-height: var(--control-h-md); padding: 0 var(--space-4); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-body); text-transform: none; letter-spacing: 0; font: 500 var(--fs-14)/1 var(--font-sans); }
.portal-formular .object-tools a:hover { background: var(--surface-sunken); }
.portal-formular #changelist { display: flex; flex-wrap: wrap; gap: var(--space-4); background: none; border: 0; box-shadow: none; }
.portal-formular #changelist .changelist-form-container { min-width: 0; flex: 1 1 550px; }
.portal-formular #changelist-filter { flex: 0 1 240px; position: static; max-height: none; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); min-width: 0; }
.portal-formular #changelist-filter h2 { background: var(--surface-sunken); color: var(--text-body); font: 600 var(--fs-14)/1.4 var(--font-sans); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.portal-formular #changelist-filter h3 { font: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.portal-formular #changelist-filter li.selected a { color: var(--text-body); font-weight: 600; }
.portal-formular #changelist .results { overflow-x: auto; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.portal-formular #changelist .results table { border: 0; margin: 0; }
.portal-formular #changelist .actions { padding: var(--space-3) 0; background: none; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; border: 0; }
.portal-formular #changelist .actions label { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.portal-formular #changelist .actions select { max-width: min(24rem, 100%); }
.portal-formular #changelist-search { padding: var(--space-3) 0; }
.portal-formular .paginator { background: none; border: 0; padding: var(--space-4) 0; font: var(--type-small); }
.portal-formular td, .portal-formular th { padding: 10px var(--space-3); line-height: 1.5; }
.portal-formular thead th, .portal-formular tfoot td { background: var(--surface-sunken); color: var(--text-muted); }
.portal-formular thead th a { color: var(--text-muted); }
.portal-formular .inline-group { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: auto; }
.portal-formular .selector { max-width: 100%; display: flex; flex-wrap: wrap; }
.portal-formular .selector-available, .portal-formular .selector-chosen { max-width: 100%; }
.portal-formular .selector-available h2, .portal-formular .selector-chosen h2 { background: var(--surface-sunken); color: var(--text-body); }
.portal-formular ul.messagelist li { border-radius: var(--radius-md); margin-bottom: var(--space-2); font: var(--type-small); color: var(--text-body); }
.portal-formular.popup .portal-sidebar, .portal-formular.popup .portal-topbar { display: none; }
.portal-formular.popup .portal-layout { display: block; }
.portal-formular .portalpfad li { list-style: none; padding: 0; }
.portal-formular .portalpfad ol { padding: 0; }

/* Startseite und Verzeichnis der Verwaltung */
.verwaltung-einleitung { font: var(--type-body); color: var(--text-muted); max-width: 72ch; margin: 0 0 var(--space-5); }
.verwaltung-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-8); }
.verwaltung-karten > section { display: flex; flex-direction: column; padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.verwaltung-kartentitel { display: flex; align-items: center; gap: var(--space-3); }
.verwaltung-kartentitel svg { color: var(--text-muted); flex: none; }
.verwaltung-kartentitel h2 { font: var(--type-h4); margin: 0; }
.verwaltung-karten p { flex: 1; color: var(--text-muted); font: var(--type-small); margin: var(--space-3) 0; }
.verwaltung-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.verwaltung-aktionen .button { gap: 6px; white-space: normal; }
.verwaltung-verzeichnis > summary { font: var(--type-ui); font-weight: 600; cursor: pointer; padding: var(--space-2) 0; }
.verwaltung-verzeichnis .module { margin: var(--space-4) 0; }

/* Betriebsseiten */
tr.alarm > td { background: var(--status-error-bg); }
tr.alarm strong { color: var(--status-error-fg); }
.detaildaten { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
.detaildaten > div { display: contents; }
.detaildaten dt { color: var(--text-muted); font: var(--type-small); }
.detaildaten dd { margin: 0; }
.einrichtungsschritte { display: grid; gap: var(--space-3); padding-left: var(--space-6); }
.einrichtungsschritte li::marker { color: var(--text-muted); font-variant-numeric: var(--num-tabular); }

/* ===== 8 Schmale Bildschirme =============================================== */

@media (max-width: 1100px) {
  .portal-sidebar { --sidebar-w: 216px; }
  .korrekturkopf { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; }
  .reiterleiste { margin-left: calc(-1 * var(--space-6)); margin-right: calc(-1 * var(--space-6)); }
  main#inhalt { padding: var(--space-6) var(--space-6) var(--space-12); }
  .portal-fuss { margin: 0 var(--space-6); }
  .arbeitsplatz-spalten, .formular-layout { grid-template-columns: 1fr; }
  .portal-formular .aligned label { float: none; display: block; width: auto; margin: 0 0 6px; }
  .portal-formular .aligned .help, .portal-formular .aligned .readonly { margin-left: 0 !important; padding-left: 0 !important; }
  .portal-formular .aligned p.file-upload { margin-left: 0; }
}
@media (max-width: 800px) {
  .transkript-paar { grid-template-columns: 1fr; }
  .hilfe-dokument { display: flex; flex-direction: column; gap: var(--space-4); }
  .hilfe-dokument .hilfe-inhalt { position: static; width: 100%; }
  .hilfe-verzeichnis a { grid-template-columns: 1fr auto; gap: 2px var(--space-4); }
  .hilfe-verzeichnis a > span { grid-column: 1; }
  .hilfe-verzeichnis a > svg { grid-column: 2; grid-row: 1 / 3; }
  .lehrliste > li { grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-4); }
  .lehrlisten-titel { grid-column: 1 / -1; }
  .lehrfilter input, .lehrfilter select { flex: 1 1 12rem; min-width: 0; }
  .lehrfilter label { flex-basis: 100%; }
}
@media (max-width: 760px) {
  .portal-layout { display: block; }
  .portal-sidebar { position: static; width: 100%; height: auto; flex-basis: auto; overflow: visible; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-right: 0; border-bottom: 1px solid var(--border-default); }
  .navigation-schalter:not([hidden]) { display: inline-flex; min-height: var(--control-h-sm); padding: 0 var(--space-3); background: var(--surface-card); color: var(--text-body); border-color: var(--border-strong); }
  .navigation-schalter:not([hidden]):hover { background: var(--surface-sunken); color: var(--text-body); }
  .portal-sidebar[data-menue-offen="false"] .hauptnavigation, .portal-sidebar[data-menue-offen="false"] .nav-bereich, .portal-sidebar[data-menue-offen="false"] .sidebar-unten { display: none; }
  .hauptnavigation a.aktiv::before { left: -4px; }
  .sidebar-unten { margin-top: 0; }
  .portal-topbar { padding: 0 var(--space-4); min-height: 56px; flex-wrap: wrap; }
  .topbar-pfad { order: 3; flex-basis: 100%; padding: 0 0 var(--space-2); }
  .topbar-pfad:empty { display: none; }
  .topbar-aktionen { margin-left: auto; }
  .profil-angaben { display: none; }
  main#inhalt { padding: var(--space-5) var(--space-4) var(--space-10); }
  .portal-fuss { margin: 0 var(--space-4); flex-direction: column; gap: var(--space-1); }
  .seitenkopf { flex-direction: column; align-items: stretch; }
  .formular-karte, .kontextkarte, .inhaltspanel { padding: var(--space-4); }
  .inhaltspanel:has(> .panelkopf) > :not(.panelkopf):not(.klausurzeile):not(.leerzustand):not(.objektliste):not(.tabellenbereich):not(.kurs-einladung) { margin-left: var(--space-4); margin-right: var(--space-4); }
  .panelkopf { padding: var(--space-4); }
  .klausurzeile { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); }
  .klausurzeile-text { flex-basis: calc(100% - 56px); }
  .klausurzeile > .knopf, .klausurzeile > .statusmarke, .klausurzeile > form { margin-left: 56px; }
  .klausurzeile > .feldhilfe { flex-basis: 100%; margin: 0; }
  .kennzahlen, .kennzahlenleiste, .statistik-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .naechste-aufgabe, .freigabeband, .lern-einstieg { align-items: flex-start; flex-direction: column; }
  .ergebniswerte { gap: var(--space-4); }
  .ergebniswerte .knopf { margin-left: 0; width: 100%; }
  .datenpaar, .aufgabensteckbrief dl > div, .rechte-matrix { grid-template-columns: 1fr; }
  .fachnavigation { gap: 0 var(--space-4); overflow-x: auto; flex-wrap: nowrap; }
  .schritttext { font-size: var(--fs-12); }
  .kurs-einladung { margin: 0 var(--space-4) var(--space-4); padding: var(--space-3); }
  .zugangsseite main#inhalt { padding: var(--space-5); }
  .korrekturkopf { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-4)) 0; }
  .korrekturkopf-haupt, .korrekturkopf-ersetzt { padding-left: var(--space-4); padding-right: var(--space-4); }
  .korrekturkopf .ki-kennzeichen { padding-left: calc(var(--space-4) + 22px); padding-right: var(--space-4); }
  .korrekturkopf .ki-kennzeichen svg.zeichen { left: var(--space-4); }
  .reiterleiste { margin: 0 calc(-1 * var(--space-4)) var(--space-5); padding: 0 var(--space-4); gap: 0 var(--space-4); overflow-x: auto; flex-wrap: nowrap; }
  .portal-formular #changelist-filter { flex-basis: 100%; }
  .toastbereich { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .toast { width: 100%; }
  .organisationsebene.ebene-1 { padding-left: 28px; }
  .organisationsebene.ebene-2 { padding-left: 36px; }
}
@media (max-width: 480px) {
  .kennzahlen, .kennzahlenleiste, .statistik-kennzahlen { grid-template-columns: 1fr; }
  .semester-auswahl, .filterfelder { grid-template-columns: 1fr; }
  .lehrliste > li { grid-template-columns: 1fr; }
  .formularaktionen > * { flex: 1 1 auto; }
  .objektzeile > span:not(:first-child):not(.statusmarke) { display: none; }
  .baumkinder { margin-left: 6px; padding-left: var(--space-2); }
}