/* ============================================================================
 * eris-theme.css — Dunkel- & Präsentationsmodus (warm), Theme-Umschalter,
 *                  systematische Leerzustände.
 *
 * Entwurf: Designstudien „Dunkelmodus" (Punkt 1) + „Leerzustände" (Punkt 2),
 * 2026-09-01. Nutzer-Entscheidungen: 3 Modi (Hell/Dunkel/Präsentation), manuell
 * übersteuerbar; Dunkel-
 * Grundton WARM (Braun-Schwarz), damit der editoriale „Aktenpapier"-Charakter
 * des Hell-Themes erhalten bleibt. Linien-Icons in Leerzuständen.
 *
 * 🔴 STANDARD IST HELL (Nutzer-Entscheidung 29.09.2026: „default der seite ist hell").
 * Bis dahin folgte eine Person OHNE eigene Wahl dem Betriebssystem — auf einem dunkel
 * eingestellten Rechner war ERIS also dunkel, ohne dass je jemand „Dunkel“ gewählt hatte.
 * Seitdem gilt die Automatik nur noch, wenn „System“ AUSDRÜCKLICH gewählt ist:
 * eris-theme.js setzt dann `data-theme="auto"`, und nur daran hängen die Blöcke unter
 * `@media (prefers-color-scheme: dark)`. Ohne Attribut (keine Wahl, oder bevor das
 * Skript läuft) ist die Seite hell — ohne dunkles Aufblitzen.
 * ⚠ Die Auto-Blöcke tragen deshalb `:root[data-theme="auto"]`, NIE wieder
 * `:root:not([data-theme="light"])` — das machte das fehlende Attribut zu „dunkel“.
 *
 * WARUM ZENTRAL: Alle 36 Cockpit-Seiten definieren eigene :root-Tokens. Bis zum
 * 06.09.2026 in ZWEI Vokabularen — Cluster A (--text/--text-muted/…) und
 * Cluster B (--ink/--muted/…), die hier doppelt mit identischen Werten standen.
 * Cluster B ist aufgeloest: 625 Verwendungen umbenannt, die Doppelung hier
 * entfernt. --line/--hair bleiben als eigene Rollen (drei Linienstaerken:
 * --border 0,11 · --line 0,13 · --border-mid 0,18). --paper ist am 06.09.
 * ebenfalls aufgeloest: die Seiten nutzten es als FLAECHE, diese Ebene setzte
 * es aber gleich --bg — im Dunkeln hatten Karten dadurch keinen Kontrast zum
 * Grund. Jetzt --surface. --paper-2 war ein ZWEITNAME von --surface-2 (in
 * Dunkel und Praesentation wertgleich) und ist am 16.09.2026 aufgeloest;
 * ebenso --line-soft (= --hair) und --ink-faint (= --text-faint).
 * Dieses Stylesheet wird von
 * main.py (_render_seite_mit_includes) FOUC-frei vor </head> jeder Seite
 * eingehängt und überschreibt BEIDE Vokabulare. Höhere Selektor-Spezifität
 * (:root[data-theme=…]) gewinnt gegen die
 * seitn­eigenen :root{}-Blöcke, unabhängig von der Ladereihenfolge.
 *
 * NICHT umgethemt (bewusst): Radien (--r), Fonts (--font-*), reine Datenfarben
 * (--frau/--mann/--teal-Serien) — die tragen auf hellem wie dunklem Grund.
 * ==========================================================================*/

/* ---- DIE MARKE ------------------------------------------------------------
 * Die Kachelzeichnung steht als einzige Quelle in frontend/partials/marke.html
 * und wird serverseitig eingebunden (<!--@include partials/marke.html-->).
 * Hier bekommt sie ihre Groesse und ihre Farben.
 *
 * Die vier Fuellungen ziehen aus Toenungs-Variablen mit dem bisherigen Hexwert
 * als Rueckfall — dasselbe Muster wie --blue-flaeche / --t-gruen-bg. Im Hellen
 * bleibt alles wie gehabt; im Dunkeln und in der Praesentation hellen sie auf,
 * weil die festen Werte dort verschwinden: gemessen auf dem dunklen Topbar-Grund
 * #221d16 las sich der Schriftzug mit 13,47:1, die Kacheln nur mit 1,35 / 1,39 /
 * 1,39 / 2,14:1. Der Schriftzug daneben zieht aus --text und hellte schon immer
 * auf — das Zeichen konnte es nicht.
 *
 * Export und Druck sind bewusst NICHT beteiligt (erx-head in eris-core.js,
 * Deckblatt in risiko-bericht.js): dort steht die Marke fest, weil das Papier
 * immer weiss ist. --------------------------------------------------------- */
.eris-marke { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.login-header .eris-marke { width: 38px; height: 38px; }
/* Startseite: oeffentlicher Auftritt, die Marke darf mitwachsen. Masse aus der
   frueheren CSS-Konstruktion uebernommen, damit sich am Seitenbild nichts aendert. */
.lockup .eris-marke { width: clamp(46px, 7.5vw, 82px); height: clamp(46px, 7.5vw, 82px); }

/* Hell: die Werte, die bisher fest im Markup standen. */
:root {
  --marke-tief:    #163268;
  --marke-neutral: #3d3529;
  --marke-hell:    #1a5296;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --marke-tief:    #5b86c9;
    --marke-neutral: #8a7d68;
    --marke-hell:    #6ba3e8;
  }
}
:root[data-theme="dark"], :root[data-theme="presentation"] {
  --marke-tief:    #5b86c9;
  --marke-neutral: #8a7d68;
  --marke-hell:    #6ba3e8;
}

/* ---- Dunkel · warm : Token-Werte (einmal definiert, zweimal angewandt) ---- */
/* (CSS kennt kein @apply — der Block ist bewusst dupliziert: Media-Pfad + manuell.) */

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    /* Flächen */
    --bg:#191510; --surface:#221d16; --surface-2:#2a241b; --chamois:#2a241b;
    /* Text / Ink (beide Vokabulare) */
    --text:#ede6d8; --text-soft:#d6cdbb; --text-muted:#a89d89; --sort-ruhend:#756c5c;
    /* Linien / Ränder */
    --border:rgba(210,180,130,0.11); --border-mid:rgba(210,180,130,0.18);
    --line:rgba(210,180,130,0.13); --hair:rgba(210,180,130,0.10);
    /* Akzent Blau (aufgehellt für Kontrast auf dunklem Grund) */
    --blue:#6ea6dd; --blue-hover:#8ab8e6; --blue-mid:#5a90c8; --blue-d:#8ab8e6; --blue-deep:#8ab8e6;
    --blue2:#6ea6dd; --blue3:#7cc0e6; --blue-light:rgba(110,166,221,0.22); --blue-faint:rgba(110,166,221,0.12);
    /* Teal / Cyan (wo als Akzent genutzt) */
    --teal:#4bc2c2; --teal-light:rgba(75,194,194,0.22); --teal-faint:rgba(75,194,194,0.12); --cyan:#4bc2c2;
    /* Semantik */
    --green:#93b062; --green-bg:rgba(147,176,98,0.14);
    --amber:#e0ad4c; --amber-bg:rgba(224,173,76,0.15);
    --red:#ec6a7d; --red-bg:rgba(236,106,125,0.14); --neg:#ec6a7d; --on:#93b062;
    --hinweis:#c98bb5; --hinweis-tint:rgba(201,139,181,0.14);
    /* Tabs */
    --tab-active:#221d16; --tab-inactive:#2a241b; --tab-border:rgba(210,180,130,0.13);
    /* Schatten (auf dunklem Grund kräftiger, kühl-neutral) */
    --shadow-xs:0 1px 3px rgba(0,0,0,0.35);
    --shadow-sm:0 2px 8px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.30);
    --shadow:0 2px 10px rgba(0,0,0,0.45); --shadow-small:0 1px 3px rgba(0,0,0,0.35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#191510; --surface:#221d16; --surface-2:#2a241b; --chamois:#2a241b;
  --text:#ede6d8; --text-soft:#d6cdbb; --text-muted:#a89d89; --sort-ruhend:#756c5c;
  --border:rgba(210,180,130,0.11); --border-mid:rgba(210,180,130,0.18);
  --line:rgba(210,180,130,0.13); --hair:rgba(210,180,130,0.10);
  --blue:#6ea6dd; --blue-hover:#8ab8e6; --blue-mid:#5a90c8; --blue-d:#8ab8e6; --blue-deep:#8ab8e6;
  --blue2:#6ea6dd; --blue3:#7cc0e6; --blue-light:rgba(110,166,221,0.22); --blue-faint:rgba(110,166,221,0.12);
  --teal:#4bc2c2; --teal-light:rgba(75,194,194,0.22); --teal-faint:rgba(75,194,194,0.12); --cyan:#4bc2c2;
  --green:#93b062; --green-bg:rgba(147,176,98,0.14);
  --amber:#e0ad4c; --amber-bg:rgba(224,173,76,0.15);
  --red:#ec6a7d; --red-bg:rgba(236,106,125,0.14); --neg:#ec6a7d; --on:#93b062;
  --hinweis:#c98bb5; --hinweis-tint:rgba(201,139,181,0.14);
  --tab-active:#221d16; --tab-inactive:#2a241b; --tab-border:rgba(210,180,130,0.13);
  --shadow-xs:0 1px 3px rgba(0,0,0,0.35);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.30);
  --shadow:0 2px 10px rgba(0,0,0,0.45); --shadow-small:0 1px 3px rgba(0,0,0,0.35);
}

/* ---- Präsentation : nur manuell, hoher Kontrast fürs Sitzungs-/Beamerbild ---- */
:root[data-theme="presentation"] {
  color-scheme: dark;
  --bg:#0c0e12; --surface:#14171d; --surface-2:#191d25; --chamois:#191d25;
  --text:#f6f7f9; --text-soft:#dfe3e9; --text-muted:#aeb4bd; --sort-ruhend:#7b828c;
  --border:rgba(255,255,255,0.08); --border-mid:rgba(255,255,255,0.14);
  --line:rgba(255,255,255,0.10); --hair:rgba(255,255,255,0.07);
  --blue:#6fb0ff; --blue-hover:#8fc2ff; --blue-mid:#5a97e6; --blue-d:#8fc2ff; --blue-deep:#8fc2ff;
  --blue2:#6fb0ff; --blue3:#7cc0ff; --blue-light:rgba(111,176,255,0.24); --blue-faint:rgba(111,176,255,0.14);
  --teal:#5ad4d4; --teal-light:rgba(90,212,212,0.24); --teal-faint:rgba(90,212,212,0.14); --cyan:#5ad4d4;
  --green:#86d162; --green-bg:rgba(134,209,98,0.14);
  --amber:#f0b64e; --amber-bg:rgba(240,182,78,0.15);
  --red:#ff7089; --red-bg:rgba(255,112,137,0.15); --neg:#ff7089; --on:#86d162;
  --hinweis:#e0a0cd; --hinweis-tint:rgba(224,160,205,0.16);
  --tab-active:#14171d; --tab-inactive:#191d25; --tab-border:rgba(255,255,255,0.10);
  --shadow-xs:0 1px 4px rgba(0,0,0,0.5);
  --shadow-sm:0 2px 12px rgba(0,0,0,0.6),0 1px 2px rgba(0,0,0,0.4);
  --shadow:0 2px 14px rgba(0,0,0,0.6); --shadow-small:0 1px 4px rgba(0,0,0,0.5);
}

/* Native Controls / Scrollleisten im gewählten Modus */
:root[data-theme="light"] { color-scheme: light; }

/* ---- Seiten-spezifische Bespoke-Tokens: Dark-Angleich ----------------------
 * Einige Cockpits definieren eigene Light-Tint-/Flächen-/Linien-Tokens jenseits
 * des gemeinsamen Vokabulars (finanzgespraech, position-trends, kalender,
 * finanzbericht, startseite, kappungssimulator …). Ohne Angleich blieben sie im
 * Dunkeln als helle Flecken stehen. Hier die eindeutig farbtragenden; die
 * restlichen (Chart-Paletten --ch-… und --chart-…, strukturelle --pad/--mark-size,
 * ⚠ KEIN `--ch-*` mit folgendem Schraegstrich in einem Kommentar: die Folge `*` + `/`
 *   SCHLIESST den Kommentar. Bis 11.09.2026 stand hier genau das — der Resttext wurde
 *   zum ungueltigen Selektor und riss die GANZE Regel darunter mit. Gemessen: in
 *   `data-theme="presentation"` fehlten SAEMTLICHE Bespoke-Tokens (--paper-2, --tile,
 *   --blue-tint, --teal-bg, --warn, --gold, --rost …), und in `data-theme="dark"`
 *   ebenso, sobald das BETRIEBSSYSTEM hell steht. Unbemerkt blieb es, weil die
 *   @media-Kopie darunter den Dunkelmodus auf dunklem System auffing.
 * mehrdeutige --korridor/--sw/--b-1..5) sind als per-Seite-Feinschliff im
 * CHANGELOG als TODO vermerkt und brauchen die laufende App zum Prüfen.
 * Zwei Kopien: (a) manuell dunkel + präsentation, (b) Auto-Dunkel via @media. */
:root[data-theme="dark"], :root[data-theme="presentation"] { --tile:#221d16; --tile2:#2a241b;
  --blue-tint:rgba(110,166,221,0.12); --blue-tint2:rgba(110,166,221,0.18); --blue-l:#8ab8e6; --blue-2:#6ea6dd;
  /* Schrift AUF --blue-l: das ist ein HELLES Blau, weisse Schrift ergab darauf
     2,08 : 1 (Praesentation 1,85). Der Grundton des Modus traegt dort 8,72 bzw.
     10,42 - `var(--bg)` nimmt ihn in beiden Modi von selbst. */
  --blue-l-auf:var(--bg);
  --amber-tint:rgba(224,173,76,0.15); --amber-ink:#e0ad4c;
  --green-tint:rgba(147,176,98,0.14); --red-tint:rgba(236,106,125,0.14);
  --neg-tint:rgba(236,106,125,0.14); --neg-soft:rgba(236,106,125,0.22);
  --teal-bg:rgba(75,194,194,0.12); --teal-hover:#5fd0d0;
  --hair-soft:rgba(210,180,130,0.08);
  --border-fein:rgba(210,180,130,0.10); --border-strong:rgba(210,180,130,0.24);
  --muted-2:#8f8676; --grey:#a89d89;
  --navy:#2a3a52; --uniblau:#6ea6dd; --warn:#e0ad4c; --gold:#d8b45a; --rost:#c98a5a;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --tile:#221d16; --tile2:#2a241b;
    --blue-tint:rgba(110,166,221,0.12); --blue-tint2:rgba(110,166,221,0.18); --blue-l:#8ab8e6; --blue-2:#6ea6dd;
  /* Schrift AUF --blue-l: das ist ein HELLES Blau, weisse Schrift ergab darauf
     2,08 : 1 (Praesentation 1,85). Der Grundton des Modus traegt dort 8,72 bzw.
     10,42 - `var(--bg)` nimmt ihn in beiden Modi von selbst. */
  --blue-l-auf:var(--bg);
    --amber-tint:rgba(224,173,76,0.15); --amber-ink:#e0ad4c;
    --green-tint:rgba(147,176,98,0.14); --red-tint:rgba(236,106,125,0.14);
    --neg-tint:rgba(236,106,125,0.14); --neg-soft:rgba(236,106,125,0.22);
    --teal-bg:rgba(75,194,194,0.12); --teal-hover:#5fd0d0;
    --hair-soft:rgba(210,180,130,0.08);
    --border-fein:rgba(210,180,130,0.10); --border-strong:rgba(210,180,130,0.24);
    --muted-2:#8f8676; --grey:#a89d89;
    --navy:#2a3a52; --uniblau:#6ea6dd; --warn:#e0ad4c; --gold:#d8b45a; --rost:#c98a5a;
  }
}

/* ---- Tönungen (--t-*): feste Hellwerte in Bauteilen umschaltbar machen --------
 * Viele kleine Bauteile — Chips, Badges, Sterne, Info-Knöpfe, die Overlays, die
 * eris-core.js auf jeder Seite baut — tragen feste Hex-Werte aus der Zeit vor dem
 * Dunkelmodus und stünden im Dunkeln als weiße Flecken. Statt jede Regel zweimal
 * zu schreiben, trägt das Bauteil eine Tönung mit seinem bisherigen Wert als
 * RÜCKFALL — in CSS wie im `data-style`-Attribut, das eris-core.js anwendet:
 *
 *     .fi.xl{background:var(--t-gruen-bg,#e8f5e9)}
 *     data-style="background:var(--t-flaeche,#fff);color:var(--t-titel,#1a1810)"
 *
 * Im Hellen ist die Tönung nicht gesetzt → der Rückfall greift, das Bild bleibt
 * unverändert. Hier unten gilt sie für Dunkel und Präsentation und zieht aus dem
 * gemeinsamen Vokabular, ist also je Modus stimmig.
 *
 * NEUES BAUTEIL MIT FESTER HELLFARBE? Hier eine Tönung wählen (oder anlegen),
 * statt einen zweiten Regelsatz je Modus zu schreiben. Das gilt besonders für
 * `data-style`: Inline-Style schlägt jede Regel, ohne Tönung bleibt es hell.
 * Zwei Kopien wie oben: (a) manuell gewählt, (b) Auto-Dunkel via @media. */
:root[data-theme="dark"], :root[data-theme="presentation"] {
  /* Gefuellte Flaechen: eigenes, tieferes Blau/Gruen/Rot/Amber. Das aufgehellte
     --blue & Co. tragen als SCHRIFT auf dunklem Grund; als FLAECHE unter weisser
     Schrift ergaeben sie nur 2,6:1. Diese Werte halten weisse Schrift ueber 4,5:1
     und heben sich zugleich von der Karte ab (>3:1). */
  --blue-flaeche:#3574b5; --blue-flaeche-hover:#3a79ba;
  --gruen-flaeche:#4a7f22; --rot-flaeche:#c2415e; --amber-flaeche:#9e6b00; --teal-flaeche:#1f7a7a;
  /* Kalender-Kategorien als FLAECHE unter weisser Schrift: die aufgehellten
     --rost/--gold tragen als Schrift, als Fuellung ergaben sie 2,89 bzw. 1,98 : 1.
     Abgedunkelt bis weisse 9px-Schrift traegt (4,62 / 4,64), Farbton unveraendert. */
  --rost-flaeche:#9b6a45; --gold-flaeche:#897239;
  /* Blau */
  --t-blau-bg:var(--blue-faint); --t-blau-bd:var(--blue-light); --t-blau-fg:var(--blue); --t-blau-voll:var(--blue-flaeche);
  /* Grün · Rot · Amber · Lila (Hinweis) · Rost (PDF) */
  --t-gruen-bg:var(--green-bg); --t-gruen-fg:var(--green); --t-gruen-voll:var(--gruen-flaeche);
  --t-rot-bg:var(--red-bg); --t-rot-fg:var(--red); --t-rot-voll:var(--rot-flaeche);
  --t-amber-bg:var(--amber-bg); --t-amber-bd:var(--amber); --t-amber-fg:var(--amber); --t-amber-voll:var(--amber-flaeche);
  --t-gruen-bd:var(--green); --t-rot-bd:var(--red); --t-teal-fg:var(--teal); --t-teal-bg:var(--teal-bg);
  --t-lila-bg:var(--hinweis-tint); --t-lila-fg:var(--hinweis); --t-lila-bd:var(--hinweis);
  --t-rost-bg:rgba(201,138,90,.16); --t-rost-fg:var(--rost,#dda179);
  /* Flächen · Schrift · Linien */
  --t-flaeche:var(--surface); --t-neutral-bg:var(--surface-2); --t-neutral-fg:var(--text-muted);
  --t-kal-we:var(--bg);   /* Kalender-Wochenende: eigene Fläche, sonst = Werktag (12b) */
  --t-titel:var(--text); --t-fliess:var(--text-soft); --t-gedaempft:var(--text-muted); --t-schwach:var(--text-muted);
  --t-linie:var(--border); --t-feld-bd:var(--border-mid); --t-feld-bg:var(--surface-2); --t-auf-farbe:#fff;   /* Schrift auf gefuellter Flaeche */
  /* Einzelstücke: Favoritenstern, Positionsspur, Kacheltitel, Sparkline */
  --t-stern-bg:var(--surface-2); --t-stern-bd:var(--border-mid); --t-stern-fg:var(--text-muted);
  --t-stern-on-bg:var(--amber-bg); --t-stern-on-bd:var(--amber);
  --t-stern-on-fg:var(--amber); --t-stern-on-fill:var(--amber);
  --t-spur-bg:var(--surface-2); --t-spur-fg:var(--text-muted);
  --t-kachel-titel:var(--text-soft); --t-spark:var(--blue);
  /* Diagramm-Graustufen: Vergleichsgroesse (Brutto-Balken) und neutrale
     Auspraegung (gleichbleibend, erfasst). Im Dunkeln aufgehellt, sonst
     verschwaende der Balken im Grund. */
  --t-grau-referenz:#7d7264; --t-grau-neutral:#a89d89;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    /* Gefuellte Flaechen: eigenes, tieferes Blau/Gruen/Rot/Amber. Das aufgehellte
       --blue & Co. tragen als SCHRIFT auf dunklem Grund; als FLAECHE unter weisser
       Schrift ergaeben sie nur 2,6:1. Diese Werte halten weisse Schrift ueber 4,5:1
       und heben sich zugleich von der Karte ab (>3:1). */
    --blue-flaeche:#3574b5; --blue-flaeche-hover:#3a79ba;
    --gruen-flaeche:#4a7f22; --rot-flaeche:#c2415e; --amber-flaeche:#9e6b00; --teal-flaeche:#1f7a7a;
  /* Kalender-Kategorien als FLAECHE unter weisser Schrift: die aufgehellten
     --rost/--gold tragen als Schrift, als Fuellung ergaben sie 2,89 bzw. 1,98 : 1.
     Abgedunkelt bis weisse 9px-Schrift traegt (4,62 / 4,64), Farbton unveraendert. */
  --rost-flaeche:#9b6a45; --gold-flaeche:#897239;
    /* Blau */
    --t-blau-bg:var(--blue-faint); --t-blau-bd:var(--blue-light); --t-blau-fg:var(--blue); --t-blau-voll:var(--blue-flaeche);
    /* Grün · Rot · Amber · Lila (Hinweis) · Rost (PDF) */
    --t-gruen-bg:var(--green-bg); --t-gruen-fg:var(--green); --t-gruen-voll:var(--gruen-flaeche);
    --t-rot-bg:var(--red-bg); --t-rot-fg:var(--red); --t-rot-voll:var(--rot-flaeche);
    --t-amber-bg:var(--amber-bg); --t-amber-bd:var(--amber); --t-amber-fg:var(--amber); --t-amber-voll:var(--amber-flaeche);
    --t-gruen-bd:var(--green); --t-rot-bd:var(--red); --t-teal-fg:var(--teal); --t-teal-bg:var(--teal-bg);
    --t-lila-bg:var(--hinweis-tint); --t-lila-fg:var(--hinweis); --t-lila-bd:var(--hinweis);
    --t-rost-bg:rgba(201,138,90,.16); --t-rost-fg:var(--rost,#dda179);
    /* Flächen · Schrift · Linien */
    --t-flaeche:var(--surface); --t-neutral-bg:var(--surface-2); --t-neutral-fg:var(--text-muted);
    --t-kal-we:var(--bg);   /* Kalender-Wochenende: eigene Fläche, sonst = Werktag (12b) */
    --t-titel:var(--text); --t-fliess:var(--text-soft); --t-gedaempft:var(--text-muted); --t-schwach:var(--text-muted);
    --t-linie:var(--border); --t-feld-bd:var(--border-mid); --t-feld-bg:var(--surface-2); --t-auf-farbe:#fff;   /* Schrift auf gefuellter Flaeche */
    /* Einzelstücke: Favoritenstern, Positionsspur, Kacheltitel, Sparkline */
    --t-stern-bg:var(--surface-2); --t-stern-bd:var(--border-mid); --t-stern-fg:var(--text-muted);
    --t-stern-on-bg:var(--amber-bg); --t-stern-on-bd:var(--amber);
    --t-stern-on-fg:var(--amber); --t-stern-on-fill:var(--amber);
    --t-spur-bg:var(--surface-2); --t-spur-fg:var(--text-muted);
    --t-kachel-titel:var(--text-soft); --t-spark:var(--blue);
    /* Diagramm-Graustufen: Vergleichsgroesse (Brutto-Balken) und neutrale
       Auspraegung (gleichbleibend, erfasst). Im Dunkeln aufgehellt, sonst
       verschwaende der Balken im Grund. */
    --t-grau-referenz:#7d7264; --t-grau-neutral:#a89d89;
  }
}

/* ---- Präsentation: dieselben Bespoke-Tokens, aber KÜHL ---------------------
 * Der Block darüber gilt für Dunkel UND Präsentation und ist im WARMEN Dunkelton
 * gehalten (#2a241b, Beige-Linien, warme Graustufen). Der Präsentationsmodus hat
 * aber eine eigene, KÜHLE Grundpalette (--bg:#0c0e12, --surface:#14171d, weiße
 * Linien, blaugraue Textskala). Ohne diesen Nachsatz standen die Bespoke-Token
 * warm in einem kühlen Theme — sichtbar vor allem in kalender, finanzgespraech,
 * position-trends und strategiewerkstatt.
 *
 * ⚠ ABGELEITET, NICHT GEWÄHLT. Jeder Wert kommt aus derselben ROLLE der
 *   Präsentations-Grundpalette oben, nach vier Regeln:
 *     (1) Flächen  -> --surface / --surface-2 dieses Modus
 *     (2) Tönungen -> --blue-faint / --amber-bg / --green-bg / --red-bg /
 *                     --teal-faint dieses Modus (Farbe UND dort gepflegte Deckkraft)
 *     (3) Linien   -> weiß statt Beige, Deckkraft × 0,74 (das Verhältnis, das die
 *                     Grundpalette selbst vorgibt: .11→.08, .18→.14, .13→.10, .10→.07)
 *     (4) Graustufen -> dieselbe Stufe der Präsentations-Textskala (interpoliert:
 *                     --muted-2 liegt bei t=0,49)
 *
 * ⚠ DREI TOKEN SIND KATEGORIEFARBEN UND BEHALTEN IHREN FARBTON: --gold und
 *   --rost stehen im Kalender für „Routine" und „Frist", --navy im Finanzgespräch
 *   für zentrale Mittel. Ein Farbton trägt dort Bedeutung — geändert wird nur die
 *   Helligkeit, mit dem Faktor 1,083, der aus den sechs Grundfarben dieses Modus
 *   gemessen ist (blau, teal, grün, amber, rot, hinweis; 18 Kanäle).
 *
 * ⚠ --navy WIRD NICHT AUFGEHELLT, SONDERN KONTRASTGLEICH GEHALTEN — und wird
 *   dadurch DUNKLER (#2a3a52 → #27364c). Es ist eine Füllfläche, und der
 *   Präsentationsgrund liegt tiefer (#0c0e12 gegen #191510). Gemessen bleibt der
 *   Abstand zum Grund gleich (1,579 → 1,581), weiße Schrift darauf 11,50 → 12,22.
 *   Blindes Aufhellen hätte die Fläche vom Grund abgehoben, statt sie zu halten.
 *
 * ⚠ Nur EINE Kopie nötig: der Automatik-Modus (@media) schließt die Präsentation
 *   ausdrücklich aus (`:not([data-theme="presentation"])`), sie wird immer
 *   manuell gewählt.
 * ⚠ Die MARKE bleibt unberührt (--marke-*): ihre Farben sind eine Markenfrage,
 *   keine Theme-Frage. */
:root[data-theme="presentation"] {
  /* (0) Ruhender Favoritenstern: HIER steht eine EIGENE Zahl, keine Textrolle.
     ⚠ Der Block darüber hebt ihn für Dunkel auf --text-muted, weil er dort mit
     der schwächeren Rolle nur 2,97 : 1 erreichte (Schwelle 3 für Bedienelemente).
     In der Präsentation ist es umgekehrt: mit --text-muted käme er auf 8,09 und
     stünde damit STÄRKER da als der GESETZTE Stern (7,28).
     Das ist die Rangfolge-Falle vom 08.09.2026: eine gestiegene Kontrastzahl kann
     die Aussage umkehren. Bei Zuständen immer BEIDE messen, nicht nur den
     beanstandeten.
     ⚠ Bis zum 16.09.2026 lief die Rücknahme über --text-faint. Diese Rolle ist
     aufgelöst (sie war im Hellmodus von --text-muted nicht mehr zu unterscheiden),
     also trägt die Stelle den Wert selbst: #828a94 ergibt 4,83 — über der
     Bedienschwelle und unter dem gesetzten Stern. Das gehört an die
     TÖNUNGSROLLE, nicht an eine fünfte Textstufe. */
  --t-stern-fg:#828a94;
  /* (1) Flächen */ --tile:#14171d; --tile2:#191d25;
  /* (2) Tönungen — Farbe und Deckkraft aus der Grundpalette dieses Modus */
  --blue-tint:rgba(111,176,255,0.14); --blue-tint2:rgba(111,176,255,0.20);
  --blue-l:#8fc2ff; --blue-2:#6fb0ff;
  --amber-tint:rgba(240,182,78,0.15); --amber-ink:#f0b64e;
  --green-tint:rgba(134,209,98,0.14); --red-tint:rgba(255,112,137,0.15);
  --neg-tint:rgba(255,112,137,0.15); --neg-soft:rgba(255,112,137,0.24);
  --teal-bg:rgba(90,212,212,0.14); --teal-hover:#72e3e3;
  /* (3) Linien — weiß statt Beige */
  --hair-soft:rgba(255,255,255,0.06);
  --border-fein:rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.18);
  /* (4) Graustufen — Stufen der Präsentations-Textskala */
  --muted-2:#959ba5; --grey:#aeb4bd;
  /* Rollen, die schlicht die Grundfarbe dieses Modus tragen */
  --uniblau:#6fb0ff; --warn:#f0b64e;
  /* Kategoriefarben: Farbton bleibt, Helligkeit × 1,083 */
  --gold:#eac361; --rost:#da9561;
  /* Füllfläche: kontrastgleich zum tieferen Grund (s. o.) */
  --navy:#27364c;
  /* Rost-Tönung zieht mit, sonst stünde sie warm unter kühlem Rost */
  --t-rost-bg:rgba(218,149,97,.16);
}

/* ============================================================================
 * Theme-Umschalter (von eris-theme.js aufgebaut; hier nur Optik).
 * Nutzt Fallback-Ketten, damit er in BEIDEN Token-Vokabularen korrekt sitzt.
 * ==========================================================================*/
.eris-theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 8000;
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-mid, var(--line, rgba(80,60,30,0.16)));
  border-radius: 22px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.15));
  font-family: var(--font-sans, 'Source Sans 3', system-ui, sans-serif);
}
.eris-theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: none; cursor: pointer;
  background: none; border-radius: 50%;
  color: var(--text-muted, #6e675e);
  transition: background .15s, color .15s;
}
.eris-theme-toggle button svg { width: 16px; height: 16px; display: block; }
.eris-theme-toggle button:hover {
  color: var(--text, #28231c);
  background: var(--blue-faint, rgba(26,82,150,0.08));
}
.eris-theme-toggle button[aria-pressed="true"] {
  color: #fff; background: var(--blue-flaeche, var(--blue, #1a5296));
}
.eris-theme-toggle button:focus-visible {
  outline: 2px solid var(--blue, #1a5296); outline-offset: 2px;
}
.eris-theme-toggle.eris-tt-collapsed button:not([aria-pressed="true"]) { display: none; }
@media (max-width: 640px) { .eris-theme-toggle { right: 10px; bottom: 10px; } }
@media print { .eris-theme-toggle { display: none !important; } }

/* ============================================================================
 * Leerzustände (von eris-empty.js aufgebaut). Vier Klassen; Fallback-Ketten
 * für beide Vokabulare. Dezente einfarbige Linien-Icons.
 * ==========================================================================*/
.eris-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2px; padding: 34px 24px 30px;
  font-family: var(--font-sans, 'Source Sans 3', system-ui, sans-serif);
}
.eris-empty__icon {
  width: 46px; height: 46px; margin-bottom: 12px;
  color: var(--text-muted, #6e675e);
}
.eris-empty__icon svg {
  width: 100%; height: 100%; display: block;
  stroke: currentColor; stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.eris-empty__title {
  font-family: var(--font-serif, 'Lora', Georgia, serif);
  font-size: 16px; font-weight: 600; margin-bottom: 4px;
  color: var(--text, #28231c); text-wrap: balance;
}
.eris-empty__why {
  font-size: 13px; line-height: 1.5; max-width: 40ch;
  color: var(--text-muted, #6e675e);
}
.eris-empty__chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.eris-empty__chip {
  font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-faint, rgba(26,82,150,0.06));
  color: var(--blue, #1a5296);
  border: 1px solid var(--blue-light, rgba(26,82,150,0.18));
}
.eris-empty__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.eris-empty__btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; text-decoration: none;
}
.eris-empty__btn--primary { background: var(--blue-flaeche, var(--blue, #1a5296)); color: #fff; }
.eris-empty__btn--ghost {
  background: none; color: var(--text-muted, #6e675e);
  border-color: var(--border-mid, var(--line, rgba(80,60,30,0.16)));
}
.eris-empty__btn[disabled], .eris-empty__btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.eris-empty__hint {
  font-size: 11px; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-muted, #6e675e);
}
.eris-empty__hint svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Klassen-Akzente: Icon (und bei „gut" Titel) in der Klassenfarbe */
.eris-empty--start   .eris-empty__icon { color: var(--blue, #1a5296); }
.eris-empty--filter  .eris-empty__icon { color: var(--text-muted, #6e675e); }
.eris-empty--good    .eris-empty__icon,
.eris-empty--good    .eris-empty__title { color: var(--green, #3d6e1a); }
.eris-empty--missing .eris-empty__icon { color: var(--amber, #9e6b00); }
/* Der gescheiterte Abruf traegt ROT, obwohl Rot im Haus sonst der Ampel gehoert:
   hier ist es keine Bewertung der Daten, sondern die Aussage, dass gar keine
   ankamen. Amber waere daneben zu leise - es steht schon fuer nicht-eingerichtet
   (missing) und fuer die Netzleiste, die eine Stoerung meldet, waehrend die
   Zahlen noch dastehen. Hier steht nichts mehr da.
   Fuer gefuellte Flaechen gilt --rot-flaeche; als SCHRIFT/Icon reicht --red. */
.eris-empty--fehler  .eris-empty__icon { color: var(--red, #8c2060); }
.eris-empty--fehler  .eris-empty__title { color: var(--text, #241f1a); }

@media (prefers-reduced-motion: reduce) {
  .eris-theme-toggle button { transition-duration:.01ms; }
}

/* ── Angedockter Umschalter (Sidebar-Fuß oder Topbar) ───────────────────────
   Basis global hier, damit er auf JEDER Seite an fester Stelle sitzt statt frei
   unten rechts zu schweben. Die Rail-Variante steht unten im Rail-Block (sie zeigt
   zugeklappt nur das aktive Symbol und ausgeklappt alle vier). */
.eris-theme-toggle.eris-tt-docked {
  position: static; right: auto; bottom: auto; z-index: auto;
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 0; gap: 2px; align-items: center;
}
/* Variante in der Topbar der Report-Seiten: kompakt, nur das aktive Symbol —
   die übrigen erscheinen beim Überfahren, damit die Leiste ruhig bleibt. */
.eris-theme-toggle.eris-tt-bar {
  border: 1px solid var(--border-mid, var(--line, rgba(80,60,30,0.16)));
  border-radius: 999px; padding: 2px 2px;
}
.eris-theme-toggle.eris-tt-bar button { width: 24px; height: 24px; }
.eris-theme-toggle.eris-tt-bar button svg { width: 14px; height: 14px; }
.eris-theme-toggle.eris-tt-bar button:not([aria-pressed="true"]) { display: none; }
.eris-theme-toggle.eris-tt-bar:hover button,
.eris-theme-toggle.eris-tt-bar:focus-within button { display: inline-flex; }

/* ── PORTAL-RAIL — EINE QUELLE ──────────────────────────────────────────────
   Sie trägt vier Seiten: Portal, Administration, Risikomanagement, Wissensdatenbank
   (`<aside class="sidebar" id="sidebar">` im jeweiligen HTML). Bis 2026-09-04 stand
   dieser Block VIERMAL — in controlling.css, admin.css, risiko.css und
   wissensdatenbank.css, mit kleinen Abweichungen (mal mit, mal ohne
   `text-decoration:none`, mal mit Hexwert-Rückfall). Eine Änderung an der Leiste war
   damit vier Änderungen. Jetzt steht sie hier; die vier Seiten-CSS tragen nur noch
   einen Verweis.

   ⚠️ KEIN AUSKLAPPEN BEIM ÜBERFAHREN MEHR (Nutzer-Entscheidung 04.09.). Die Rail
   sprang bei jedem Zeiger, der nach links driftete, von 52 auf 220 px auf und legte
   sich über den Text. Auf einem Cockpit fällt das kaum auf, auf der Wissensdatenbank
   (Lesespalte 860 px) stört es. Geöffnet wird jetzt über die **Lasche** — derselbe
   Griff wie an der schmalen Leiste der Berichte. ⚠ Seit 29.09.2026 merkt sich keine
   der beiden ihren Zustand mehr: jede Seite beginnt eingeklappt, und die Leiste klappt
   nach dem Benutzen wieder ein (Nutzer-Entscheidung, eris-sidebar.js).

   ⚠️ Die Lasche steht als GESCHWISTER neben der Rail, nicht darin: die Rail trägt
   `overflow:hidden` (das klemmt die Beschriftungen im zugeklappten Zustand ab) und
   würde sie sonst schlucken. Deshalb `.sidebar.expanded + .sb-lasche` — der Griff
   muss unmittelbar auf das `<aside>` folgen; eris-sidebar.js hängt ihn genau dort ein.
   -------------------------------------------------------------------------- */
/* ⚠ `top` folgt der KOPFZEILE, nicht einer festen 50. Die Kopfzeile bricht seit
   dem Layout-Umbau um: bei 360px ist sie 119,5px hoch (drei Zeilen, gemessen auf
   controlling.html) — die Rail lag dann ueber ihren unteren zwei Zeilen und
   verdeckte Marke, Plakette und Seitennamen. `--eris-kopf-unten` setzt
   eris-sidebar.js an der Wurzel und misst nach (ResizeObserver, resize, load).
   Ohne das Modul greift der Rueckfall 50px — der Zustand von vorher. */
.sidebar{position:fixed;left:0;top:var(--eris-kopf-unten,50px);bottom:0;width:52px;background:var(--surface,#fff);
  border-right:1px solid var(--border,var(--line,#e3ddd2));z-index:60;display:flex;
  flex-direction:column;overflow:hidden;transition:width .2s ease;flex-shrink:0}
.sidebar.expanded{width:220px;box-shadow:3px 0 16px rgba(40,30,10,.10)}

/* 134 = 50 + 84: die Lasche sass 84px unter der Kopfzeile. Der Abstand bleibt,
   die Basis wandert mit (die Lasche ist `fixed` und kann der Rail nicht folgen —
   sie steht als Geschwister daneben, siehe oben). */
.sb-lasche{position:fixed;left:52px;top:calc(var(--eris-kopf-unten,50px) + 84px);width:15px;height:46px;padding:0;cursor:pointer;
  background:var(--surface,#fff);border:1px solid var(--border,var(--line,#e3ddd2));
  border-left:none;border-radius:0 7px 7px 0;color:var(--text-muted,#6e675e);
  display:flex;align-items:center;justify-content:center;z-index:61;
  box-shadow:2px 1px 5px rgba(0,0,0,.06);transition:left .2s ease}
.sb-lasche:hover{color:var(--blue,#1a5296)}
.sb-lasche svg{width:9px;height:9px;display:block;transition:transform .18s ease}
.sidebar.expanded + .sb-lasche{left:220px}
.sidebar.expanded + .sb-lasche svg{transform:rotate(180deg)}

.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;scrollbar-width:none}
.sb-scroll::-webkit-scrollbar{display:none}
.sb-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;border:none;
  background:none;text-decoration:none;font-family:var(--font-sans);font-size:12px;
  font-weight:500;color:var(--text-muted);width:100%;text-align:left;
  transition:background .13s,color .13s;white-space:nowrap;min-height:40px;border-radius:0}
.sb-item:hover{background:var(--blue-faint,#e8f0f8);color:var(--blue)}
.sb-item.active{background:var(--blue-faint,#e8f0f8);color:var(--blue);font-weight:600}
.sb-item.active .sb-icon{color:var(--blue)}
.sb-item.dragging{opacity:.4}
.sb-item.drag-over{box-shadow:inset 0 2px 0 var(--blue)}
.sb-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;color:var(--text-muted);transition:color .13s}
.sb-item:hover .sb-icon{color:var(--blue)}
.sb-label{flex:1;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateX(-6px);
  transition:opacity .18s,transform .18s;pointer-events:none}
.sidebar.expanded .sb-label{opacity:1;transform:translateX(0)}
.sb-sep{height:1px;background:var(--border);margin:4px 10px}
.sb-section{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);padding:10px 14px 4px;white-space:nowrap;overflow:hidden;
  opacity:0;transition:opacity .18s}
.sidebar.expanded .sb-section{opacity:1}
.sb-fav-empty{font-size:11px;color:var(--text-muted);padding:2px 14px 6px;line-height:1.35;
  white-space:nowrap;overflow:hidden;opacity:0;transition:opacity .18s}
.sidebar.expanded .sb-fav-empty{opacity:1}

/* Fuß der Rail: Mount für den Darstellungs-Umschalter (angedockt statt schwebend).
   Zugeklappt nur das aktive Symbol, ausgeklappt alle vier nebeneinander. */
.sb-foot{flex-shrink:0;border-top:1px solid var(--border);display:flex;
  justify-content:center;align-items:center;padding:6px 0}
.sb-foot .eris-theme-toggle.eris-tt-docked{flex-direction:row;gap:2px;padding:4px 0;
  justify-content:center;width:100%}
.sb-foot .eris-theme-toggle.eris-tt-docked button{width:28px;height:28px}
.sb-foot .eris-theme-toggle.eris-tt-docked button:not([aria-pressed="true"]){display:none}
.sidebar.expanded .eris-theme-toggle.eris-tt-docked button{display:inline-flex}

/* ── AUFKLAPPEN BEIM UEBERFAHREN — NUR CONTROLLING.HTML ────────────────────
   Ausnahme zur Regel darueber, auf Wunsch des Nutzers (04.09.). Gilt allein fuer
   `<body data-rail="hover">`, und das steht nur in controlling.html: dort ist die
   Flaeche ein Cockpit aus Kacheln, ueber das die Leiste kurz gleiten darf. Auf
   admin.html, risiko.html und wissensdatenbank.html bleibt es beim Klick auf die
   Lasche — dort liegt Text, und genau darueber legte sich die Rail.
   Die Zwillinge unten sind wortgleich zu den `.expanded`-Regeln; wer eine davon
   aendert, muss BEIDE aendern. Zusammenfassen zu `.sidebar.expanded, … :hover`
   ginge nicht: die Hover-Haelfte muss hinter dem Attribut bleiben, sonst gaelte
   sie wieder ueberall.
   `@media (hover:hover) and (pointer:fine)`: auf Zeigegeraeten ohne echtes
   Ueberfahren (Finger) bleibt `:hover` nach der Beruehrung haengen — dort soll
   weiter nur die Lasche schalten.
   ⚠ `:not(.sb-ruht)` (29.09.2026, Nutzer: „immer eingeklappt, auch bei Reiterwechseln"):
   nach dem Klick auf einen Reiter liegt der Zeiger noch auf der Leiste. eris-sidebar.js
   setzt dann `sb-ruht` und nimmt es erst wieder weg, wenn der Zeiger die Leiste verlaesst
   — sonst bliebe sie ueber dem gerade geoeffneten Bereich stehen. Gehoert an ALLE sieben. */
@media (hover:hover) and (pointer:fine){
  [data-rail="hover"] .sidebar:not(.sb-ruht):hover{width:220px;box-shadow:3px 0 16px rgba(40,30,10,.10)}
  [data-rail="hover"] .sidebar:not(.sb-ruht):hover .sb-label{opacity:1;transform:translateX(0)}
  [data-rail="hover"] .sidebar:not(.sb-ruht):hover .sb-section{opacity:1}
  [data-rail="hover"] .sidebar:not(.sb-ruht):hover .sb-fav-empty{opacity:1}
  [data-rail="hover"] .sidebar:not(.sb-ruht):hover + .sb-lasche{left:220px}
  [data-rail="hover"] .sidebar:not(.sb-ruht):hover + .sb-lasche svg{transform:rotate(180deg)}
  [data-rail="hover"] .sidebar:not(.sb-ruht):hover .eris-theme-toggle.eris-tt-docked button{display:inline-flex}
}

@media print{.sb-lasche{display:none}}
@media (prefers-reduced-motion:reduce){
  .sidebar,.sb-lasche,.sb-lasche svg,.sb-label,.sb-section{transition-duration:.01ms;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NACHSCHLAGEN (Taste W) — liegt ueber jeder ERIS-Seite
   Bauteil in eris-core.js; die Optik steht hier, weil das Fenster ueber Seiten
   liegt, die der Nutzer dunkel gestellt haben kann. Deshalb Toenungen statt
   fester Hellwerte — anders als der aeltere Postfach-Dialog.
   ═══════════════════════════════════════════════════════════════════════════ */
.wb-nach-bg{position:fixed;inset:0;background:rgba(40,30,10,.42);z-index:99995;
 display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.wb-nach{width:100%;max-width:760px;background:var(--t-flaeche,#fff);
 border:1px solid var(--t-feld-bd,#d4d1ca);border-radius:10px;
 box-shadow:0 20px 60px rgba(40,30,10,.34);overflow:hidden;
 font-family:'Source Sans 3','Gill Sans',system-ui,sans-serif;
 color:var(--t-titel,#28231c);display:flex;flex-direction:column;max-height:76vh}

.wb-nach-kopf{display:flex;align-items:center;gap:12px;padding:0 20px;height:56px;
 border-bottom:1px solid var(--t-linie,#e6e2d9);flex-shrink:0}
.wb-nach-lupe{color:var(--t-gedaempft,#6e675e);flex-shrink:0}
.wb-nach-feld{flex:1;min-width:0;border:none;background:none;outline:none;
 font-size:16px;font-family:inherit;color:var(--t-titel,#28231c)}
.wb-nach-feld::placeholder{color:var(--t-schwach,#6e675e)}
.wb-nach-zahl{font-size:12px;color:var(--t-schwach,#6e675e);flex-shrink:0;white-space:nowrap}

.wb-nach-koerper{display:flex;align-items:stretch;flex:1;min-height:0}
.wb-nach-liste{width:330px;flex-shrink:0;border-right:1px solid var(--t-linie,#e6e2d9);
 padding:8px 0;overflow-y:auto}
.wb-nach-vorschau{flex:1;min-width:0;padding:20px 24px 22px;overflow-y:auto}

.wb-nach-gruppe{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 color:var(--t-schwach,#6e675e);padding:8px 20px 4px}
.wb-nach-zeile{padding:8px 20px 8px 22px;cursor:pointer;border-left:3px solid transparent}
.wb-nach-zeile.aktiv{background:var(--t-blau-bg,#eef3fb);border-left-color:var(--t-blau-fg,#1a5296);
 padding-left:20px}
.wb-nach-titel{font-size:13px;font-weight:600;color:var(--t-titel,#28231c)}
.wb-nach-zeile.aktiv .wb-nach-titel{color:var(--t-blau-fg,#1a5296)}
.wb-nach-def{font-size:12px;color:var(--t-gedaempft,#6e675e);margin-top:1px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-nach-hinweis{padding:22px 20px;font-size:12px;color:var(--t-gedaempft,#6e675e);line-height:1.5}

.wb-nach-v-art{font-size:11px;color:var(--t-schwach,#6e675e);letter-spacing:.06em;
 text-transform:uppercase;font-weight:600}
.wb-nach-v-titel{font-family:'Lora',Georgia,serif;font-size:20px;font-weight:600;margin-top:4px;
 line-height:1.25;color:var(--t-titel,#28231c)}
.wb-nach-v-def{font-size:14px;line-height:1.6;color:var(--t-titel,#28231c);margin-top:10px}
.wb-nach-v-fuss{font-size:12px;color:var(--t-gedaempft,#6e675e);margin-top:12px;
 padding-top:12px;border-top:1px solid var(--t-linie,#e6e2d9)}

.wb-nach-fuss{display:flex;align-items:center;gap:18px;padding:10px 20px;flex-shrink:0;
 background:var(--t-neutral-bg,#faf8f4);border-top:1px solid var(--t-linie,#e6e2d9);
 font-size:11px;color:var(--t-gedaempft,#6e675e)}
.wb-nach-fuss-rechts{margin-left:auto}

/* Schmales Fenster: die Vorschau kostet mehr Platz als sie bringt, die Liste
   bekommt die volle Breite. Die Definition steht dann in der Zeile selbst. */
@media (max-width:720px){
  .wb-nach-bg{padding:8vh 10px 10px}
  .wb-nach-vorschau{display:none}
  .wb-nach-liste{width:100%;border-right:none}
  .wb-nach-def{white-space:normal}
}

/* ============================================================================
   AUSWAHLFELD DER REPORT-KOPFZEILE (.scope-select) — EINE QUELLE
   Sechs Reports fuehren dieses Feld — professuren, studierendenprofil,
   gleichstellung, internationalisierung, finanzgespraech, kapazitaet — und bis
   zum 08.09.2026 stand seine Optik FUENFMAL da, einmal je Seite. Vier Kopien
   waren zeichengleich, die fuenfte (finanzgespraech) wich in zwei Punkten ab,
   ohne dass es je etwas bewirkt haette: `font:inherit` statt
   `font-family:inherit` (gleiches Ergebnis, weil `font-size` direkt danach
   wieder gesetzt wurde) und `max-width:340px`, das die Anpassungsebene mit
   `html .topbar-right .scope-select{max-width:100%}` ohnehin schlaegt. Genau so
   entsteht Drift: eine Korrektur erreicht eine Datei und nicht die anderen vier.
   Nachgemessen vor dem Zusammenlegen: alle sechs Seiten lieferten in Hell UND
   Dunkel identische berechnete Werte — das Zusammenlegen aendert kein Pixel.

   ⚠ Die MASSE stehen weiter in eris-responsive.css
     (`html .topbar-right .scope-select` — max-width/min-width und das
     Flex-Verhalten der umbrechenden Kopfzeile unter 880/560 px). Hier steht,
     wie das Feld AUSSIEHT; dort, wie es sich in den Platz fuegt.
   ⚠ Praefix `html` (0,1,1) mit Absicht: auf den Portal-Shells ohne literales
     </head> haengt main.py dieses Stylesheet VORN ein, ein blosses
     `.scope-select` wuerde dort von der Seiten-CSS geschlagen. Eigenschaften,
     die eine Seite hier nicht setzt, kann sie weiterhin muehelos ergaenzen.
   ⚠ Farben ueber Tokens mit Rueckfall — `--surface`/`--text`/`--line` stellt
     die Theme-Ebene je Modus um, der Rueckfall haelt das Feld sichtbar, falls
     eine Seite die Tokens einmal nicht deklariert.
   ⚠ Wachhund: backend/tests/test_frontend_kopfzeile.py
     (`test_scope_select_steht_nur_zentral`). Nicht in eine Seiten-CSS
     zurueckschreiben.
   ============================================================================ */
html .scope-select{
  font-family:inherit;
  font-size:var(--fs-gross,14px);
  padding:6px 10px;
  border:1px solid var(--line,#e3ddd2);
  border-radius:6px;
  background:var(--surface,#fff);
  color:var(--text,#28231c);
}

/* ============================================================================
   DATENTABELLE (.datentabelle) — EINE QUELLE
   ⚠ HIESS BIS 12.09.2026 `.rk` („Rangliste“). Der Name beschrieb das Bauteil zu eng:
   es traegt Gruppenkoepfe, Summenzeilen und Pflegetabellen, nicht nur Ranglisten —
   wer nach der Tabellen-Optik suchte, suchte unter dem falschen Wort. Umbenannt in
   16 Selektoren, 17 Markup-Stellen und der Variablen `--datentabelle-erste-spalte`.
   `.rk-tile`/`.rk-group`/`.rk-logo-*` in ranking.css sind ein ANDERES Bauteil und
   unberuehrt geblieben.
   Bis zum 10.09.2026 stand dieses Bauteil DREIMAL: studierendenprofil.css (11
   Tabellen), internationalisierung.css (2) und — seit demselben Tag —
   gleichstellung.css (1). Und es war echte Drift: die Gleichstellung hatte die
   Klasse aus einer fremden Seiten-CSS GEBORGT, die sie gar nicht lädt; dort traf
   deshalb keine einzige Regel (16 px Schrift, kein Rahmen, linksbündige Zahlen).
   Genau davor schuetzt eine zentrale Quelle.

   Uebernommen ist der Mehrheits- und Hausstand; die drei Abweichungen sind
   entschieden, nicht verschluckt:
     · Kopf 12 px (war im Studierendenprofil 11) — wie `.bt`/`.gl` es fuehrten,
       die seit dem 10.09.2026 selbst in dieser Quelle aufgegangen sind.
     · Kopf mit 2-px-Grundstrich (war in der Internationalisierung 1 px) — der
       Kopf soll sich vom Koerper absetzen.
     · `tabular-nums` fuer alle (kam aus der Gleichstellung): Ziffern gleicher
       Breite sind die Grundlage jeder Zahlenkante.

   ⚠ Die ERSTE Spalte traegt Text und darf deshalb umbrechen (`--datentabelle-erste-spalte`,
     Vorgabe `normal`). Wer dort Ellipsis statt Umbruch braucht — die
     Internationalisierung kuerzt lange Laendernamen —, setzt an der Tabelle
     `--datentabelle-erste-spalte:nowrap`. Ueber eine VARIABLE, nicht ueber eine
     Ueberschreibung: dieses Stylesheet wird NACH der Seiten-CSS eingehaengt und
     gewaenne sonst jeden Gleichstand.
   ⚠ Seitenspezifische Zusaetze bleiben lokal und sind kein Teil dieser Quelle:
     `.land` (Internationalisierung), `.ab`/`.sort-th`/`.sort-ind`
     (Studierendenprofil).
   ⚠ Am 10.09.2026 kamen `.bt` (professuren, 1 Tabelle) und `.gl` (gleichstellung 2,
     internationalisierung 1) dazu — dasselbe Bauteil unter zwei weiteren Namen. Das
     MARKUP traegt jetzt ueberall `rk`; die alten Namen gibt es nicht mehr.
     ⚠ Der Name `rk` ist historisch („Rangliste") und beschreibt das Bauteil zu eng —
       es ist die allgemeine Datentabelle des Hauses. Umbenannt wurde NICHT: das
       waeren 18 Markup-Stellen fuer einen reinen Namensgewinn. Steht als offener
       Punkt im CHANGELOG 10.09. (5).
   ⚠ NICHT hier: `table.mx` (Heatmap-Matrix, professuren) und `table.diag`
     (position-trends) sind eigene Bauteile mit eigener Optik — zentriert, 12 px,
     klebende erste Spalte. Gleiches Aussehen ist kein gleiches Bauteil.
   ⚠ Wachhund: backend/tests/test_frontend_rk_tabelle.py. Nicht in eine
     Seiten-CSS zurueckschreiben.
   ============================================================================ */
html table.datentabelle{width:100%;border-collapse:collapse;font-size:var(--fs-basis,13px)}
html table.datentabelle th,html table.datentabelle td{
  padding:6px 8px;
  text-align:right;
  border-bottom:1px solid var(--line,#e3ddd2);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
html table.datentabelle th:first-child,html table.datentabelle td:first-child{
  text-align:left;
  white-space:var(--datentabelle-erste-spalte,normal);
}
html table.datentabelle thead th{
  color:var(--text-muted,#6e675e);
  font-weight:600;
  font-size:var(--fs-klein,12px);
  border-bottom:2px solid var(--line,#e3ddd2);
}
/* Textspalte, die NICHT die erste ist (Abschluss, „Zu Fächergruppe" …).
   ⚠ Die Klasse gehoert an KOPF UND ZELLE. Bis zum 11.09.2026 stand hier nur `td.fac`:
     die Werte standen links, der Kopf darueber rechts — vom Nutzer als „verrutschte
     Tabellenkoepfe" gemeldet (Internationalisierung, beide Studiengang-Tabellen).
     Ein zweiter, ungemeldeter Fall stand in der Fachwechsel-Tabelle des
     Studierendenprofils. `th:first-child` braucht die Klasse nicht, das ist ohnehin
     links — sie faellt deshalb nur ab Spalte zwei auf. */
html table.datentabelle th.fac,html table.datentabelle td.fac{text-align:left}

/* Mehrzeilige Köpfe aus `erisSort.kopf` (01.10.2026): Umbruch am `\n` des Labels,
   eine optionale Gruppenzeile darüber. Die Köpfe stehen auf der Grundlinie, damit
   ein einzeiliger Kopf neben einem zweizeiligen an der Zahl darunter steht.
   ⚠ Die Gruppenlinie hängt am `<span>`, nicht an der Zelle: mit `border-collapse`
     liefen die Linien zweier benachbarter Gruppen sonst ineinander, und man sähe
     nicht, wo die eine aufhört. */
html table.datentabelle thead.kopf-mehrzeilig th{vertical-align:bottom}
html table.datentabelle thead tr.kopf-gruppen th{border-bottom:0;padding-bottom:2px;text-align:center}
html table.datentabelle th.kopf-gruppe > span{display:block;margin:0 4px;padding-bottom:4px;
  border-bottom:1px solid var(--line,#e3ddd2);font-weight:600;white-space:normal}

/* Enge Variante (Nutzer-Entscheidung 02.10.2026): 6 statt 8 px seitlicher Zellrand, für breite
   Tabellen mit vielen Zahlenspalten. Erste Nutzerin: „Wo fehlt es?“ (Personal – Lehre – Kosten,
   13 Spalten) — dort spart sie 48 px. ⚠ Eine KLASSE an der Tabelle, keine Seitenregel: so steht
   die Datentabelle weiter an einer Stelle, und andere Tabellen können sie übernehmen. */
html table.datentabelle.eng th,html table.datentabelle.eng td{padding-left:6px;padding-right:6px}

/* Hervorgehobene Zeilen. ZWEI Bedeutungen, deshalb zwei Optiken:
   `tr.total` = Summenzeile (neutral, mit Trennstrich darueber),
   `tr.ob`    = Kopf einer Gruppe (blau), `.vt` als zweite Gruppe (gruen).
   ⚠ Getoent ueber die `--t-*`-Rollen, NICHT ueber feste Hellwerte. Genau daran
     scheiterten die drei Seitenfassungen: `#f6f3ec` / `#eef2f7` / `#eef5ea` sind
     eingefrorene Hellflaechen, und im Dunkelmodus stand darauf die aufgehellte
     Theme-Schrift. Gemessen am 10.09.2026 auf dem Server: Summenzeile
     **1,12 : 1** (weisser Text auf fast weissem Grund — unlesbar), Gruppenkopf
     **2,29 : 1**. Beide Seiten laufen dort im Dunkelmodus. */
html table.datentabelle tr.total td{
  font-weight:700;
  border-top:2px solid var(--line,#e3ddd2);
  background:var(--t-neutral-bg,#f6f3ec);
}
html table.datentabelle tr.ob td{
  background:var(--t-blau-bg,#eef2f7);
  font-weight:600;
  color:var(--t-blau-fg,var(--blue,#1a5296));
}
html table.datentabelle tr.ob.vt td{background:var(--t-gruen-bg,#eef5ea)}

/* ── ZELLEN MIT ZWEI GRÖSSEN (.zwei) ────────────────────────────────────────
   Jede Groesse in einer Zelle bekommt ihre eigene Kante. In einer rechtsbuendigen
   Zelle haengt nur das LETZTE Zeichen fest — alles davor wird von der Breite
   seines rechten Nachbarn verschoben (dieselbe Mechanik wie bei `.fv-feld` im
   FactSheet). Gemessen am 10.09.2026: Startkante eines Balkens streute 26,3 px
   (professuren) bzw. 52,0 px (gleichstellung), eine Anzahl 27,2 px.
   ⚠ Es braucht FESTE Breiten je Teil; eine rechtsbuendige Huelle genuegt nicht.
   ⚠ `min-width` statt `width`: ein ungewoehnlich breiter Wert soll die Spalte
     lieber weiten als abgeschnitten werden.
   ⚠ Die Breite der Hauptzahl haengt am WERTEBEREICH und ist deshalb ein Regler:
     `--z-haupt` (Vorgabe 2.4em reicht bis „112"). Die Gleichstellung zaehlt bis
     10.468 und setzt an ihrer Tabelle 3.4em. Ueber eine Variable, weil diese
     Datei NACH der Seiten-CSS eingehaengt wird und jeden Gleichstand gewaenne. */
html .zwei{display:inline-flex;align-items:center;gap:8px}
html .zwei .z-wert{min-width:var(--z-wert,4.2em);text-align:right}
html .zwei .z-haupt{min-width:var(--z-haupt,2.4em);text-align:right}
html .zwei .z-neben{min-width:var(--z-neben,5em);text-align:right}

/* ── FUSSZEILE EINER AUFKLAPPBAREN LISTE (.mehr-wrap / .mehr-btn) ──────────
   „Weitere N anzeigen" / „Reduzieren" unter einer gekuerzten Liste. Stand bis zum
   11.09.2026 NUR in `studierendenprofil.css` — dort trug es acht Listen, aber jede
   andere Seite haette die Klasse nur GEBORGT und damit ungestylte Knoepfe bekommen
   (dieselbe Falle wie die Datentabelle — damals `.rk` — in der Gleichstellung am
   10.09.2026: eine geborgte
   Klasse traegt nur, solange die Seite die fremde CSS auch laedt). Anlass war die
   aufklappbare Studiengang-Tabelle im Internationalisierungsmonitoring.
   ⚠ Dabei kam ein PRODUKTIVER Fehler mit: die Flaeche stand als eingefrorener
     Hellwert `#eef2f7` da. Im Dunkeln lag darauf die aufgehellte Blau-Schrift
     — gemessen 2,29 : 1 (dunkel) und 2,00 : 1 (Praesentation), der Knopf war
     also praktisch unlesbar, und der Server laeuft im Dunkelmodus. Jetzt ueber die
     `--t-blau-*`-Toenungen: 5,35 / 6,23. HELL bleibt unveraendert bei 6,94 — der
     bisherige Wert steht als Rueckfall in jeder Deklaration.
   ⚠ Der HOVER aendert im Dunkeln die RANDfarbe statt der Flaeche: eine kraeftigere
     Toenung (`--t-blau-bd`, Alpha 0,22) haette die Schrift auf 4,42 : 1 gedrueckt
     — unter die 4,5 fuer 13-px-Text. Im Hellen bleibt der bisherige Flaechenwechsel.
   ⚠ Groessenzusaetze bleiben lokal (`.fg-admin-row .mehr-btn` im Studierendenprofil).
   ⚠ Wachhund: backend/tests/test_frontend_mehr_fusszeile.py. Nicht in eine
     Seiten-CSS zurueckschreiben. */
html .mehr-wrap{text-align:center;margin-top:10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
html .mehr-btn{
  background:var(--t-blau-bg,#eef2f7);
  color:var(--t-blau-fg,var(--blue,#1a5296));
  border:1px solid var(--line,#e3ddd2);
  border-radius:6px;
  padding:6px 16px;
  font-size:var(--fs-basis,13px);
  font-family:inherit;
  cursor:pointer;
}
html .mehr-btn:hover{
  background:var(--t-blau-bg,#e2eaf3);
  border-color:var(--t-blau-bd,var(--blue-light,#c3d3e6));
}
html .mehr-btn.reduce-btn{background:transparent;color:var(--text-muted,#6e675e);border-color:transparent}
html .mehr-btn.reduce-btn:hover{color:var(--t-blau-fg,var(--blue,#1a5296));background:var(--t-blau-bg,#eef2f7)}

/* ============================================================================
   SORTIER-ANZEIGE EINER TABELLE (.sort-th / .sort-ind) — EINE QUELLE
   Bis zum 10.09.2026 stand dieses Bauteil DREIFACH, unter zwei Namen:
     · kapaz-gemeinsam.css — die am 08.09. bewusst gestaltete Fassung (Farbe statt
       Deckkraft), die aber nur die zwei Kapazitaetsseiten laden.
     · studierendenprofil.css — `opacity:.5`, also genau das am 08.09. VERWORFENE
       Mittel; gemessen ergab das fuer die inaktive Anzeige 2,5 : 1.
     · eris-core.js (`erisMakeSortable`) — dritter Name (`.eris-sort-ind`) und die
       Deckkraft als INLINE-Style (`.4` / `.9`), der jede Regel schlaegt. Dieses
       Bauteil laeuft app-weit: gris, nds-monitor, ranking, risiko-cockpit,
       risikomanagement.

   ⚠ GEDAEMPFT WIRD UEBER DIE FARBE, NICHT UEBER `opacity` (Festlegung 08.09.):
     Deckkraft zieht die Schrift zum Untergrund, unabhaengig davon, was darunter
     liegt, und laesst sich in keinem Theme nachjustieren. `--text-muted` dreht
     mit dem Theme.
   ⚠ Fuer ein ZUSTANDSSYMBOL gilt 3 : 1, nicht 4,5 (WCAG 1.4.11, nicht-textliche
     Bedienelemente) — ein Sortierpfeil ist kein Fliesstext.
   ⚠ Die RANGFOLGE ist Teil der Aussage: der aktive Pfeil muss staerker wirken als
     der inaktive. Bei Zustaenden immer BEIDE messen, nie nur den beanstandeten.
     Genau daran waere diese Fassung fast gescheitert: mit `--text-muted` in allen
     drei Themes stand der RUHENDE Pfeil in der Praesentation bei **8,60** und der
     aktive nur bei **7,97** — die Rangfolge war umgekehrt (derselbe Fall wie am
     08.09. bei den Kapazitaetsseiten). Deshalb der Regler **`--sort-ruhend`**:
     Vorgabe `--text-muted` (hell), in Dunkel und Praesentation eine EIGENE,
     schwaechere Zahl (#756c5c bzw. #7b828c). ⚠ Bis zum 16.09.2026 stand dort die
     Rolle `--text-faint`; die ist aufgeloest, die Werte bleiben — ein
     Sortierpfeil ist ein BEDIENELEMENT (Schwelle 3), kein Fliesstext, und die
     Rangfolge zaehlt mehr als die absolute Hoehe.
     Nachgerechnet ruhend/aktiv: hell 4,74/7,80 · dunkel 3,23/6,50 ·
     praesentation 4,63/7,97 — ueberall ueber 3 und ueberall in der richtigen
     Reihenfolge.
   ⚠ `--blue-d` waere der naheliegende Weg gewesen (kraeftigeres Blau fuer den
     aktiven) und ist FALSCH: das Token ist nur in 8 von 44 Seiten-CSS deklariert,
     im Hellmodus waere es fast ueberall eine tote Verwendung.
   ⚠ Die Farbe traegt die Aussage NICHT allein — die Richtung steht im Zeichen
     (`↕` / `▲` / `▼`).
   ⚠ Aktiv-Zustand ueber `th.sort-asc` / `th.sort-desc`, nicht ueber eine zweite
     Klasse an der Anzeige: so ist der Zustand auch fuer Tests und fuer eine
     kuenftige Kopfzeilen-Hervorhebung sichtbar.
   ⚠ Wachhund: backend/tests/test_frontend_sortier_anzeige.py.
     Nicht in eine Seiten-CSS zurueckschreiben.
   ============================================================================ */
html th.sort-th{cursor:pointer;user-select:none;white-space:nowrap}
html th.sort-th:hover{color:var(--text,#28231c)}
html .sort-ind{
  font-size:10px;
  margin-left:4px;
  vertical-align:middle;
  color:var(--sort-ruhend,var(--text-muted,#6e675e));
}
html th.sort-asc .sort-ind,html th.sort-desc .sort-ind{
  color:var(--t-blau-fg,var(--blue,#1a5296));
  font-weight:700;
}

/* ============================================================================
   AVATAR UND NAME DER KOPFZEILE (.avatar / .user-name) — EINE QUELLE
   Der Zugang zu „Meiner Seite" steht in 38 Kopfzeilen, und seine Optik stand
   bis zum 08.09.2026 in 30 Stylesheets — mit echter Drift, nicht nur
   Formatierungsunterschieden. Ausgezaehlt (nur Deklarationen, nicht Dateien):

     Avatar-Flaeche   20× getoent hellblau  ·  6× gefuellt Teal  ·  5× gefuellt Blau
     Avatar-Schrift   19× blau (getoent)    ·  11× weiss (auf gefuellter Flaeche)
     cursor:pointer   20× gesetzt           ·  11× vergessen (Knopf ohne Zeigerhand)
     Name-Farbe       23× --text · 4× --text-soft · 1× --text-muted · 1× #eaf1fa

   Kein dokumentierter Grund fuer die drei Flaechen — dasselbe Bild wie bei den
   Kopfzeilen-MASSEN am 06.09.: jede neue Seite fror den Stand ihres Tages ein.
   Uebernommen ist deshalb der Mehrheitsstand: getoente Flaeche mit blauer
   Schrift. Er zieht ohnehin schon aus den Toenungen und traegt damit in allen
   drei Themes, waehrend die gefuellten Varianten weisse Schrift brauchen.

   ⚠ MIT DIESEM BLOCK AENDERT SICH DAS BILD auf den 11 Seiten, die vorher
     gefuellt waren (admin, risiko, wissensdatenbank, kalender, controlling,
     baumonitoring, entgelttransparenz, fakultaets-factsheets, finanzbericht,
     lehrdeputat, steuerung). Das ist der Zweck, nicht ein Nebeneffekt.
   ⚠ Nebenbei repariert: `amtliche-statistik` faerbte den Namen `#eaf1fa` —
     fast weiss auf der weissen Leiste, rechnerisch 1,2:1. Der Name war dort
     schlicht unsichtbar.
   ⚠ Die MASSE stehen weiter in eris-responsive.css (Block „2b · Kopfzeilen-
     MASSE": width/height/font-size des Avatars, font-size des Namens) — und
     controlling.html ist dort als Portal-Shell ausgenommen und behaelt seine
     26 px. Hier steht, wie beide AUSSEHEN; dort, wie gross sie sind.
   ⚠ Praefix `html` (0,1,1): auf den Portal-Shells ohne literales </head> haengt
     main.py dieses Stylesheet VORN ein — ein blosses `.avatar` verloere dort.
   ⚠ `overflow:hidden` bleibt in profil.css: dort kann im Avatar ein echtes
     Profilbild stecken.
   ⚠ Wachhund: backend/tests/test_frontend_kopfzeile.py
     (`test_avatar_optik_steht_nur_zentral`). Nicht zurueckschreiben.
   ============================================================================ */
html .avatar{
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-weight:700;
  cursor:pointer;
  background:var(--t-blau-bg,#dce7f5);
  color:var(--t-blau-fg,var(--blue,#1a5296));
}
/* `font-weight:400` ausdruecklich: 25 der 31 Regeln liessen es weg (also normal),
   6 setzten 600. Der Mehrheitsstand steht jetzt da, statt sich aus dem Fehlen zu
   ergeben — sonst haette eine geerbte Fettung wieder freie Bahn. */
html .user-name{ cursor:pointer; color:var(--text,#28231c); font-weight:400; }

/* ============================================================================
   ZEILEN-HOVER IN TABELLEN — EINE QUELLE
   Nutzer-Festlegung 2026-09-07: in langen Tabellen soll die Zeile unter dem
   Mauszeiger sichtbar sein, damit man beim Lesen nicht verrutscht. Gilt fuer
   GANZ ERIS, nicht je Seite.

   ⚠ Die Toenung liegt auf dem <tr>, NICHT auf den Zellen. Zellen mit eigener
   Farbe (Heatmap, Baender, Zwischensummen) toenen mit `color-mix(…, transparent)`
   und lassen den Zeilengrund durchscheinen — ein Hintergrund auf `td` wuerde ihre
   Farbe dagegen ERSETZEN und die Heatmap beim Ueberfahren ausloeschen.
   ⚠ `color-mix` statt eines festen Hellwerts: mischt gegen den tatsaechlichen
   Untergrund und traegt damit in Hell, Dunkel und Praesentation. Zwei Seiten
   hatten hier ein hartes #faf7f1 stehen — im Dunkelmodus ein weisser Balken.
   ⚠ Nur fuer echte Zeigergeraete (`hover: hover`): auf dem Touchscreen bliebe
   die zuletzt beruehrte Zeile sonst dauerhaft hervorgehoben.
   ⚠ Niedrige Spezifitaet (0,0,3) mit Absicht — eine Seite, die fuer ihre Tabelle
   etwas Staerkeres braucht (Auswahl, Warnzeile), schlaegt die Regel muehelos.
   ============================================================================ */
@media screen and (hover: hover) and (pointer: fine) {
  table tbody tr:hover {
    background: transparent;
    background: color-mix(in srgb, var(--text-muted, #6b7280) 7%, transparent);
  }
  /* Zeilen, die selbst klickbar sind, duerfen etwas deutlicher antworten. */
  table tbody tr[data-act]:hover,
  table tbody tr[onclick]:hover {
    background: transparent;
    background: color-mix(in srgb, var(--blue, #1a5296) 8%, transparent);
  }
}

/* ============================================================================
   ZEIGEFINGER FUER KLICKBARES — EINE QUELLE
   Nutzer-Festlegung 2026-09-15. Anlass: im Datenradar stand über „im Modul
   ansehen“ der TEXTcursor. Das war kein Versehen einer Seite, sondern eine
   Fehlerklasse: ein `<a>` OHNE `href` (der Sprung läuft über `data-act`) bekommt
   vom Browser weder Zeigefinger noch Linkfarbe — die UA-Regeln hängen an
   `:link`. Dasselbe gilt für jedes `div`/`span`/`tr` mit `data-act`.
   Gemessen über alle Seiten: 1.008 `data-act`-Stellen, davon 44 auf
   `div`/`span`/`a`/`tr` OHNE eigene Klasse.
   ⚠ `:where()` hat Spezifität NULL — mit Absicht. Die Regel ist ein Rückfall,
   den JEDE Seitenregel schlägt, unabhängig von der Ladereihenfolge — und die ist
   im Haus NICHT einheitlich: gemessen steht dieses Stylesheet in
   `wissensdatenbank.html` VOR der Seiten-CSS, in `datenradar.html` DAHINTER.
   Mit Spezifität 1 hätte die Regel `.tags-input-wrap` (`cursor:text`, ebenfalls
   Spezifität 1) je nach Seite gekippt.
   ⚠ Gemessen: 11 Regeln setzen auf einer `data-act`-Klasse einen anderen Cursor
   (`.chip.cur`, `.btn:disabled`, `.jm-day.empty`, `.tags-input-wrap` …) — alle
   behalten ihn.
   ⚠ `data-change-act` (131 Stellen, durchweg Eingabefelder) ist ein ANDERES
   Attribut und wird NICHT getroffen; ein echtes `data-act` trägt gemessen kein
   einziges Eingabefeld außer einer Checkbox.
   ⚠ Gesperrtes bleibt ohne Zeigefinger — sonst behauptet der Zeiger eine
   Bedienbarkeit, die es nicht gibt.
   🔴 DIE DRITTE ZEILE IST DER TEUERSTE TEIL: `cursor` WIRD VERERBT. Die 39
   Dialog-Hintergründe tragen `data-act` (Klick daneben schließt) UND den Dialog
   als Kind — ohne sie stünde der Zeigefinger über jedem Formular darin. Die
   Ausnahme ist ABGELEITET, nicht gepflegt: `data-self-only` sagt bereits, dass
   die Aktion nur beim Treffer auf das Element SELBST feuert; gemessen tragen es
   ausschließlich Overlays (35× `.modal-bg`, 2× `.modal-bg-ctrl`, 2 ohne Klasse).
   `auto` statt `default`, damit dort exakt der bisherige Zustand bleibt.
   ============================================================================ */
:where([data-act]){cursor:pointer}
:where([data-act]:disabled),:where([data-act][aria-disabled="true"]){cursor:default}
:where([data-act][data-self-only]){cursor:auto}

/* ============================================================================
   BAND-TOENUNGEN AUFHELLEN (Personalmonitoring-Heatmaps)
   Gemessen 2026-09-08: die Heatmaps toenen mit der SEMANTISCHEN Palette
   (`ERIS_FARBEN`, `Object.freeze`) — feste Hexwerte, die sich anders als
   `--text-muted` oder `--blue` NICHT je Theme anpassen koennen. Bei gleichem
   Alpha entscheidet aber der Abstand zwischen Bandfarbe und Untergrund: gegen
   Weiss ist er gross, gegen den warmen Dunkelgrund klein. Folge im Dunkeln:
   die sichtbare Spannweite fiel auf 26–77 % der Hell-Spanne, am staerksten
   beim dunkelsten Band (Gruen #3d6e1a, 26 %) — „% MTV" verteilte 32 Stufen
   auf 34 RGB-Einheiten und war praktisch einfarbig.
   ⚠ Der Hebel sitzt bewusst HIER und nicht im JS: die Toenung entsteht als
   Inline-Style beim Render, eine Theme-Abfrage in JS wuerde beim Umschalten
   erst nach dem naechsten Render greifen. Als CSS-Variable rechnet der Browser
   sie sofort neu. 0 % ergibt exakt die Originalfarbe — Hell bleibt unberuehrt.
   ⚠ Wirkt nur auf die DOM-Toenungen. Chart.js-Farben lesen `_PM_BAND_FARBE`
   weiter als Hexwert; `var()` koennte Chart.js nicht aufloesen.
   ============================================================================ */
:root { --pm-band-hell: 0%; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --pm-band-hell: 50%; }
}
:root[data-theme="dark"] { --pm-band-hell: 50%; }
:root[data-theme="presentation"] { --pm-band-hell: 55%; }

/* ============================================================================
   ANSICHTS-REITER EINER REPORT-SEITE (.tabbar > .tab) — EINE QUELLE
   Umschalter zwischen den ANSICHTEN derselben Seite. Stand bis 2026-09-08
   siebenmal unter sieben Namen (.tab, .pm-tab, .nds-tab, .sw-btn, .r-subtab
   sowie die Container .tabbar/.tabs/#pmon-tabs/.nds-subnav/.switcher), mit
   VIER Aktivklassen (.active/.act/.on/.r-subtab-active) und drei Optiken:
   gefuellte Pille, gefuellte Kachel, Unterstrich. Jetzt eine Form.
   Gewaehlt ist der Unterstrich (vorher schon Landesformel, Lehrdeputat und
   Risiko-Cockpit): er traegt keine Flaeche und laesst sich deshalb nicht mit
   den gefuellten Schaltern verwechseln, die auf vielen Reports direkt
   darunter stehen (Datenquelle, Ebene, Diagramm-Option).

   ⚠ Was hier NICHT hineingehoert, obwohl es aehnlich aussieht:
   • Segment-Gruppen mit gemeinsamem Rahmen (.bm-seg, .zoom-seg, .sb-seg,
     .seg) — eine Wahl zwischen gleichrangigen Optionen, kein Ansichtswechsel.
   • .eq-tab (sl-kennzahlen) — Rechenweg-Variante innerhalb einer Karte.
   • .pm-tab — heisst so, ist aber nur noch der „Alle auf-/zuklappen"-Knopf
     im Personalmonitoring; er borgt sich die Knopf-Optik, ist kein Reiter.
   • Die Navigation der Portal-RAHMEN (.stab, .sec-tab, .sub-tab,
     .wb-subnav-item) — eigene Sprache des Rahmens, nicht der Seite.

   ⚠ Der Praefix `html` ist noetig, nicht schmueckend: auf den Portal-Shells
   ohne literales </head> haengt main.py dieses Stylesheet VORN ein — ein
   blosses `.tabbar` verloere dort gegen die Seiten-CSS.
   ⚠ Rueckfallketten, weil die Seiten unterschiedliche Token-Namen fuehren
   (`--line` bzw. `--border`).
   ============================================================================ */
html .tabbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  border-bottom:2px solid var(--line,var(--border,#e3ddd2));margin:0 0 18px}
/* Ruhender Reiter: --text-muted, in ALLEN drei Modi.
   ⚠ Bis zum 16.09.2026 stand hier ein eigener Hellwert (#6b6459) — und der
   Kommentar nannte den Grund selbst: --text-muted ergab auf dem Seitengrund
   nur 4,06:1, zu wenig fuer 13-px-Schrift. Seit die Rolle einen Schritt
   dunkler ist (#6e675e, 4,78 auf dem Seitengrund), hat die Ausnahme ihren
   Grund verloren; eine Ausnahme, die bleibt, behauptet eine Vielfalt, die es
   nicht gibt.
   ⚠ Die Rangfolge traegt weiter: ruhend 4,78 gegen aktiv 6,69 — der aktive
   Reiter steht staerker da, und genau darum ging es. Bei Zustaenden immer
   beide messen. */
:root{ --reiter-ruhend:var(--text-muted,#6e675e); }
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{ --reiter-ruhend:var(--text-muted,#a89d89); }
}
:root[data-theme="dark"], :root[data-theme="presentation"]{ --reiter-ruhend:var(--text-muted,#a89d89); }
html .tabbar > .tab{background:none;border:none;border-bottom:3px solid transparent;
  margin-bottom:-2px;padding:8px 14px;font-family:inherit;
  font-size:var(--fs-basis,13px);font-weight:600;color:var(--reiter-ruhend,#6e675e);
  cursor:pointer;white-space:nowrap;transition:color .14s,border-color .14s}
html .tabbar > .tab:hover{color:var(--text,#28231c)}
html .tabbar > .tab.active{color:var(--t-blau-fg,var(--blue,#1a5296));
  border-bottom-color:var(--t-blau-fg,var(--blue,#1a5296))}
/* Gesperrt: der Hover darf keine Anfassbarkeit vortaeuschen. */
html .tabbar > .tab.disabled{opacity:.38;cursor:not-allowed}
html .tabbar > .tab.disabled:hover{color:var(--reiter-ruhend,#6e675e)}


/* ══ KARTEN (Leaflet) — STAPELKONTEXT ════════════════════════════════════════
   Leaflet legt seine Ebenen auf z-index 200–1000 (Kacheln 200, Marker 600,
   Tooltip 650, Popup 700, Steuerung 1000). Die Kopfzeile liegt auf 20. Ohne
   eigenen Stapelkontext am Kartencontainer stehen diese Ebenen deshalb im
   Wurzelkontext und schieben sich beim Scrollen UEBER die Kopfzeile statt
   dahinter — am 09.09.2026 im Studierendenprofil gemeldet.
   ⚠ `isolation:isolate` statt `position:relative;z-index:0`: es erzeugt den
   Stapelkontext, ohne an Position oder Layout der Karte zu ruehren.
   ⚠ Zentral, nicht je Seite — sonst holt sich die naechste Karte denselben
   Fehler. Betrifft heute studierendenprofil und controlling. */
html .leaflet-container{isolation:isolate}

/* ══ BESCHRIFTETER SCHALTER IN DER KOPFZEILE (`.tb-schalter`) — EINE QUELLE ═══
   Ein `.tsw` mit einem Wort davor („Studierende", „Daten"). Steht auf sechs
   Report-Seiten in der Kopfzeile und hiess dort bis 09.09.2026 `.ck-tog-l` —
   ein Name aus `kapaz-gemeinsam.css`, die aber nur die beiden Kapazitaetsseiten
   laden. Auf `studierendenprofil` und `fakultaets-factsheets` war die
   Beschriftung deshalb UNGESTYLT: sie erbte die Topbar-Schrift, statt klein und
   gedaempft neben dem Schalter zu stehen. Nicht in eine Seiten-CSS zurueck-
   schreiben; eine neue Seite mit Schalter nimmt diese Klassen.
   ============================================================================ */
html .tb-schalter{display:flex;align-items:center;gap:8px;flex:0 0 auto}
html .tb-schalter > .tsw{min-width:206px}
html .tb-schalter-l{font-size:var(--fs-mikro,11px);font-weight:600;white-space:nowrap;
  color:var(--text-muted,#6e675e)}

/* ══ ZWEIWEGE-SCHALTER (`.tsw`) — EINE QUELLE ═════════════════════════════════
   Zwei gleichrangige Zustände, zwischen denen ein Knopf hin- und hergleitet:
   Formel/Beispiel im Rechenweg, amtlich/intern beim Personal-Datenmodus.
   ⚠ Kein Reiter — er wechselt keine ANSICHT, sondern eine Lesart derselben
   Ansicht. Deshalb steht er auch nicht in `.tabbar`.
   ⚠ Bis 09.09. lag die Optik in `kapaz-gemeinsam.css` und war damit an die
   Kapazitätsseiten gebunden. Nicht dorthin zurückschreiben.
   Markup: <div class="tsw"><span class="tsw-knob"></span>
             <span class="tsw-opt on" …>Links</span><span class="tsw-opt" …>Rechts</span></div>
   Rechts aktiv = zusätzlich `on-right` an `.tsw`. */
/* ⚠ `user-select:none` ist hier kein Feinschliff: die Optionen sind <span>, und ohne
   die Regel markiert jeder Klick ihren Text — sichtbar als blinkender Cursor und blaue
   Auswahl auf dem Schalter. Ein Schalter ist kein Fließtext. */
.tsw{position:relative;display:inline-flex;background:var(--t-neutral-bg,#e4dfd5);
  border-radius:999px;padding:2px;cursor:pointer;min-width:172px;
  -webkit-user-select:none;user-select:none}
.tsw-opt{flex:1;text-align:center;padding:4px 12px;font-size:11px;color:var(--text-muted);
  white-space:nowrap;border-radius:999px;position:relative;z-index:1;transition:color .16s}
.tsw-opt.on{color:var(--t-auf-farbe,#fff);font-weight:600}
/* ⚠ Fokus MUSS sichtbar sein: seit 09.09. ist der Schalter tastaturbedienbar
   (role=radiogroup, Pfeiltasten), und ohne Ring wüsste niemand, wo er steht.
   `:focus-visible` statt `:focus` — sonst leuchtet der Ring auch nach einem Mausklick.
   Der Ring liegt AUSSEN (`outline-offset`), damit er den gleitenden Knopf nicht
   überdeckt. */
.tsw-opt:focus{outline:none}
.tsw-opt:focus-visible{outline:2px solid var(--t-blau-voll,var(--blue));outline-offset:2px;
  border-radius:999px}
.tsw-knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);
  background:var(--blue-flaeche,var(--blue));border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s ease}
.tsw.on-right .tsw-knob{left:50%}
.tsw-val{font-size:12px;color:var(--blue);font-weight:600;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tsw-knob{transition-duration:.01ms;}}

/* ══ REIHEN-CHIPS (`.eris-reihen-chip`) — EINE QUELLE ═════════════════════════
   Klickbare Auswahl, welche Reihen ein Diagramm zeigt: Farbpunkt der Reihe, Name, Zahl
   (Nutzer 04.10.2026, „solche Designs haben wir schon in anderen Bereichen"). Bis dahin
   stand dasselbe Bauteil zweimal je Seite — `.ent-item` (Landesformel) und `.pm-kat-item`
   (Personalmonitoring, Stil inline), dazu drei weitere Fassungen: `.ent-it` (FactSheets),
   inline (Kapazitätsplanung) und der Finanzierungsfilter der Strukturdiagnose. Leser heute:
   Landesformel (Entwicklung, Parameter, Einheiten), Personalmonitoring (Langzeitanalyse,
   Finanzierungsfilter), FactSheets und Kapazitätsplanung (Ausschöpfungsentwicklung),
   Professurenplanung (Zeitstrahl, Fakultätsbalken).
   ⚠ Markup NUR über `erisReihenChip()` in eris-core.js — nicht von Hand nachbauen.
   ⚠ Der Zustand steht am ZEICHEN, nicht nur an der Farbe: an = gefüllter Punkt, aus =
     leerer Ring (für farbfehlsichtige Leser lesbar), dazu `aria-pressed` für den Screenreader.
   ⚠ „Aus" wird NICHT über `opacity` gedämpft: Deckkraft zieht die Schrift mit unter 4,5:1
     (die Fassung im Personalmonitoring stand bei .55).
   ⚠ Die Reihenfarbe kommt als `--chip-farbe` (data-style) — hier steht keine. Sehr helle oder sehr dunkle
     Reihenfarben stehen am Grund unter 3:1 (gemessen 1,64 bis 2,82) — deshalb trägt der Punkt einen feinen
     Rand aus der Textfarbe, der in jedem Theme ≥ 3:1 hält; die Farbe selbst bleibt die der Reihe.
   Varianten: `.betont` (Summenreihe, eigene Hochschule: kräftiger Rahmen — als innere Kontur, damit Größe und
   der 2-px-Abstandsrhythmus bleiben) · `.gruppe` (Schnellwahl ohne Punkt). */
.eris-reihen-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.eris-reihen-chip{display:inline-flex;align-items:center;gap:6px;margin:0;padding:2px 10px;
  border:1px solid var(--t-feld-bd,#d8d3c8);border-radius:14px;
  background:var(--t-neutral-bg,#f2efe9);color:var(--text-muted,#6e675e);
  font:inherit;font-size:var(--fs-klein,12px);line-height:1.5;white-space:nowrap;cursor:pointer;
  -webkit-user-select:none;user-select:none}
.eris-reihen-chip[aria-pressed="true"]{background:var(--t-flaeche,var(--surface,#fff));
  color:var(--text,#1a1810);border-color:var(--chip-farbe,var(--blue))}
.eris-reihen-chip .sw{flex:0 0 auto;width:10px;height:10px;box-sizing:border-box;border-radius:50%;
  border:2px solid var(--chip-farbe,var(--text-muted,#6e675e));background:transparent;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--text,#1a1810) 55%,transparent)}
.eris-reihen-chip[aria-pressed="true"] .sw{background:var(--chip-farbe,var(--blue))}
.eris-reihen-chip .ev{font-weight:600;font-variant-numeric:tabular-nums}
.eris-reihen-chip.betont{font-weight:600;box-shadow:inset 0 0 0 1px var(--t-feld-bd,#d8d3c8)}
.eris-reihen-chip.betont[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--chip-farbe,var(--blue))}
.eris-reihen-chip.gruppe[aria-pressed="true"]{border-color:var(--t-blau-fg,var(--blue));
  background:var(--t-blau-bg,#eef4fb);color:var(--t-blau-fg,var(--blue));font-weight:600}
.eris-reihen-chip:hover{border-color:var(--chip-farbe,var(--t-blau-fg,var(--blue)))}
.eris-reihen-chip:focus{outline:none}
.eris-reihen-chip:focus-visible{outline:2px solid var(--t-blau-voll,var(--blue));outline-offset:2px}
.eris-reihen-trenner{flex:0 0 1px;align-self:stretch;margin:2px 2px;background:var(--t-linie,var(--border,#e6e2d9))}

/* ══ QUOTE MIT RECHENWEG (`.eris-quote`) — EINE QUELLE ════════════════════════
   Jede Quote im Haus traegt seit 10.09.2026 Zaehler und Nenner als Mouseover
   (`title`, gesetzt ueber `erisQuote` in eris-core.js). Damit man den Griff
   findet, ohne ihn zu suchen, bekommt die Zahl eine gepunktete Unterlinie und
   den Hilfe-Zeiger — dieselbe Sprache, die `<abbr>` seit je spricht.
   ⚠ Die Unterlinie ist bewusst KEINE Farbe: Farbe traegt im Haus Bedeutung
   (Ampel, Bandfarben), und ein zweiter Farbcode fuer „hier steckt was dahinter"
   wuerde die vorhandenen ueberdecken. Deshalb `currentColor` — die Zahl behaelt
   ihre Aussage, die Linie ist nur ein Griff.
   ⚠ `text-decoration-color` gedaempft ueber `color-mix`, nicht ueber `opacity`:
   Deckkraft zieht die ZAHL mit zum Untergrund (siehe die Sortierpfeil-Regel).
   ⚠ Nicht in eine Seiten-CSS zurueckschreiben. */
.eris-quote{cursor:help;text-decoration:underline dotted;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset:2px;text-decoration-thickness:1px;
  text-decoration-skip-ink:none}
@media print{.eris-quote{text-decoration:none}}

/* ══ NATIVE EINGABEFELDER (input · select · textarea) — EINE QUELLE ═══════════
   Gemessen 2026-09-11: fuer Native Controls setzte die Theme-Ebene bislang nur
   `color-scheme`. Das traegt die UA-Voreinstellungen (Scrollleisten, Datums-
   waehler, Platzhalter) — aber NICHT gegen eine Seitenregel, die `background`
   ausdruecklich auf einen Hellwert schreibt. Genau das taten acht Reports:
   das Feld blieb WEISS, die Schrift kam aus `var(--text)` und hellte im Dunkeln
   auf. Gemessen 1,24 : 1 (Praesentation 1,07 : 1) auf benchmark, kalender,
   kappungssimulator, landesformel, ranking, strategiewerkstatt,
   amtliche-statistik und im Controlling-Portal — auf dem Kappungssimulator eine
   ganze Tabelle weisser Bloecke, und der Server laeuft im Dunkelmodus.

   ⚠ DIE SPEZIFITAET IST HIER DER GANZE PUNKT, nicht ein Detail. Die Seiten-
   regeln reichen bis (0,2,1) (`.pgrid input.changed`, `.steuer .seg button`).
   Eine Regel, die nur den Gleichstand gewinnt, haelt beim naechsten Bauteil
   nicht mehr. Der Praefix `html:root[data-theme=…]` plus das `:not(…)` ergibt
   (0,3,2) und schlaegt sie ausdruecklich.

   ⚠ NUR native Felder, KEINE Knoepfe. `.btn-primary` & Co. sind gefuellte
   Flaechen mit eigener Rolle (`--*-flaeche`); eine pauschale Button-Regel
   ueberschriebe sie und naehme der Seite die Aussage. Ein Knopf mit fester
   Hellfarbe nimmt eine Toenung (`var(--t-flaeche,#fff)`), so wie oben
   beschrieben.

   ⚠ Ausgenommen sind Ankreuz-, Auswahl- und Schieberegler-Felder: dort ist die
   Flaeche das Bedienelement selbst, eine eigene Farbe zerstoerte das Haekchen.

   ⚠ Im HELLMODUS greift hier NICHTS — der Block gilt nur fuer Dunkel und
   Praesentation. Das helle Bild bleibt unveraendert, es gibt nichts nachzu-
   messen. Zwei Kopien wie im Token-Block: (a) manuell gewaehlt, (b) Auto-Dunkel.
   ⚠ Nicht in eine Seiten-CSS zurueckschreiben. */
html:root[data-theme="dark"] input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=button],[type=submit],[type=reset],[type=image]),
html:root[data-theme="dark"] select,
html:root[data-theme="dark"] textarea,
html:root[data-theme="presentation"] input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=button],[type=submit],[type=reset],[type=image]),
html:root[data-theme="presentation"] select,
html:root[data-theme="presentation"] textarea{
  background-color:var(--t-feld-bg);
  color:var(--text);
}
@media (prefers-color-scheme: dark){
  html:root[data-theme="auto"] input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=button],[type=submit],[type=reset],[type=image]),
  html:root[data-theme="auto"] select,
  html:root[data-theme="auto"] textarea{
    background-color:var(--t-feld-bg);
    color:var(--text);
  }
}

/* Gesperrtes Feld: die zentrale Regel oben schlaegt auch die Seiten-Fassung des
   DEAKTIVIERTEN Zustands — ohne diesen Nachsatz saehe ein gesperrtes Feld im
   Dunkeln genauso aus wie ein bedienbares, und die Seite verloere eine Aussage,
   die sie im Hellen trifft (z. B. `.ks-bud:disabled` im Kappungssimulator).
   Zurueckgenommen wird das ueber den GRUND (`--bg`, tiefer als das aktive Feld
   `--surface-2`) plus gedaempfte Schrift — dieselbe Rangfolge wie im Hellen.
   ⚠ WCAG nimmt gesperrte Bedienelemente vom Kontrastmindestwert aus (1.4.3,
   „inactive UI components"); lesbar bleiben soll es trotzdem. */
html:root[data-theme="dark"] input:disabled,
html:root[data-theme="dark"] select:disabled,
html:root[data-theme="dark"] textarea:disabled,
html:root[data-theme="presentation"] input:disabled,
html:root[data-theme="presentation"] select:disabled,
html:root[data-theme="presentation"] textarea:disabled{
  background-color:var(--bg);
  color:var(--text-muted);
}
@media (prefers-color-scheme: dark){
  html:root[data-theme="auto"] input:disabled,
  html:root[data-theme="auto"] select:disabled,
  html:root[data-theme="auto"] textarea:disabled{
    background-color:var(--bg);
    color:var(--text-muted);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRUNGMARKE — EINE QUELLE
   ═══════════════════════════════════════════════════════════════════════════
   Erzeugt von eris-a11y.js als erstes Element im Body. Wer die Seite mit der
   Tastatur bedient, läuft sonst auf JEDER Seite erst durch Kopfzeile und
   Seitenleiste, bevor der Inhalt kommt.
   ⚠ Sie wird über `top` aus dem Bild geschoben, nicht über `left:-9999px`:
     eine negative Position nach links erzeugt sonst waagerechten Überlauf —
     genau das, wogegen `eris-responsive.css` zentral `overflow-x:clip` setzt.
     Über die Höhe zu verstecken kollidiert mit nichts.
   ⚠ Gefüllte Fläche mit weißer Schrift ⇒ `--blue-flaeche`, nicht `--blue`:
     das aufgehellte `--blue` ist als SCHRIFT gebaut und ergibt als FLÄCHE
     unter Weiß nur 2,6:1 (Hausregel seit 03.09.).                            */
.eris-skip{
  position:fixed;left:8px;top:-100px;z-index:10000;
  padding:10px 16px;border-radius:6px;
  background:var(--blue-flaeche,var(--blue,#1a5296));color:#fff;
  font-family:var(--font-sans,system-ui,sans-serif);
  font-size:var(--fs-gross,14px);font-weight:600;line-height:1.2;
  text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:top .12s ease-out;
}
.eris-skip:focus{top:8px}
@media (prefers-reduced-motion: reduce){.eris-skip{transition-duration:.01ms;}}
@media print{.eris-skip{display:none !important}}

/* ─── ANSAGE-REGION ───────────────────────────────────────────────────────────
   Erzeugt von eris-a11y.js (`window.erisAnsage`). Nimmt flüchtige Meldungen auf,
   deren eigener Behälter erst mit dem Text entsteht und deshalb nicht zuverlässig
   vorgelesen wird (Controlling-Portal, Datenradar, Position & Trends).
   ⚠ NICHT `display:none` und NICHT `hidden`: beides nimmt die Region auch dem
     Screenreader weg — dann ist sie für niemanden da. Sie bleibt im Textfluss und
     wird nur auf einen Punkt zusammengezogen (die übliche „visually hidden"-Technik).
   ⚠ `clip` steht neben `clip-path`, weil ältere Engines nur ersteres kennen.       */
.eris-ansage{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERKLÄRUNG ALS POPOVER (`.eris-hinweis`) — EINE QUELLE
   ═══════════════════════════════════════════════════════════════════════════
   Erzeugt von eris-hinweis.js. Zeigt den Text eines `title` auf Tippen/Klicken,
   weil ein nativer Tooltip auf dem Touchscreen nie erscheint — und damit der
   Rechenweg-Nachweis genau in der Sitzung fehlt, in der über die Zahlen
   gesprochen wird.
   ⚠ Der Kasten liegt ÜBER den Dialogen (`z-index` 12100): eine Erklärung kann in
     einem Dialog stehen, und ein Popover, das hinter dem Dialog landet, ist so
     gut wie keines. Über den Meldungen (12000) liegt er ebenfalls — sie sind
     flüchtig, die Erklärung wartet auf den Leser.
   ⚠ `position:fixed` — das Modul rechnet gegen den Viewport. Wer das auf
     `absolute` ändert, muss dort die Scroll-Position mit einrechnen.            */
.eris-hinweis{
  position:fixed;z-index:12100;max-width:min(92vw,340px);
  background:var(--surface,#fff);color:var(--text,#241f1a);
  border:1px solid var(--border,rgba(80,60,30,.18));border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  padding:10px 12px;
  font-family:var(--font-sans,system-ui,sans-serif);
  font-size:var(--fs-basis,13px);line-height:1.5;
}
.eris-hinweis-text{padding-right:14px;overflow-wrap:anywhere}
.eris-hinweis-x{
  float:right;background:none;border:0;cursor:pointer;
  color:var(--text-muted,#6e675e);
  font-size:var(--fs-lead,16px);line-height:1;margin:-2px -4px 0 6px;padding:2px 4px;
}
.eris-hinweis-x:hover{color:var(--text,#241f1a)}
@media print{.eris-hinweis{display:none !important}}

/* ═══════════════════════════════════════════════════════════════════════════
   SITZUNG ABGELAUFEN — EINE QUELLE
   ═══════════════════════════════════════════════════════════════════════════
   Erzeugt von eris-core.js, wenn ein Speichern-Versuch an einer abgelaufenen
   Sitzung scheitert UND ungespeicherte Eingaben vorliegen. Statt hart auf die
   Anmeldung zu springen bleibt die Seite stehen; die Anmeldung öffnet in einem
   neuen Tab, danach lässt sich hier erneut speichern.
   ⚠ Die Optik steht HIER und nicht in `steuerung.css`: dort stünde sie nur den
     Seiten zur Verfügung, die diese Datei laden — die Theme-Ebene wird dagegen
     in jede Seite eingehängt. Ein Dialog, der auf der Hälfte der Seiten
     unsichtbar wäre, hilft genau dort nicht, wo gerade Arbeit auf dem Spiel steht.
   ⚠ Das Element trägt zusätzlich `.modal-bg`, damit eris-a11y.js es als Dialog
     erkennt (Rolle, Fokus-Falle, Escape) — deshalb hier eine eigene Klasse für
     die Sichtbarkeit statt der `.open`-Mechanik der Seiten-CSS.                */
html .eris-sitzung-bg{
  position:fixed;inset:0;z-index:12200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);padding:16px;
}
html .eris-sitzung{
  background:var(--surface,#fff);color:var(--text,#241f1a);
  border:1px solid var(--border,rgba(80,60,30,.18));border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
  padding:20px 22px;max-width:min(94vw,440px);
  font-family:var(--font-sans,system-ui,sans-serif);
}
html .eris-sitzung .modal-title{
  margin:0 0 8px;font-size:var(--fs-titel,18px);
  font-family:var(--font-serif,Lora,serif);color:var(--text,#241f1a);
}
html .eris-sitzung-text{
  margin:0 0 16px;font-size:var(--fs-basis,13px);line-height:1.55;
  color:var(--text-soft,#4a443c);
}
html .eris-sitzung-knoepfe{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* ⚠ Gefüllte Fläche mit weißer Schrift ⇒ `--blue-flaeche` (Hausregel 03.09.):
   das aufgehellte `--blue` ist als SCHRIFT gebaut und ergibt als FLÄCHE unter
   Weiß nur 2,6:1. Die Knopfklassen der Seiten-CSS gelten hier nicht überall,
   deshalb bringt der Dialog seine eigenen mit.                                */
html .eris-sitzung-knoepfe .btn{
  padding:8px 14px;border-radius:6px;cursor:pointer;
  font-family:inherit;font-size:var(--fs-basis,13px);
  border:1px solid var(--border,rgba(80,60,30,.18));
  background:var(--surface-2,#f7f4ef);color:var(--text,#241f1a);
}
html .eris-sitzung-knoepfe .btn-primary{
  background:var(--blue-flaeche,var(--blue,#1a5296));color:#fff;border-color:transparent;
}
@media print{.eris-sitzung-bg{display:none !important}}

/* ═══════════════════════════════════════════════════════════════════════════
   NETZAUSFALL-LEISTE (`.eris-netz`) — EINE QUELLE
   ═══════════════════════════════════════════════════════════════════════════
   Erzeugt vom Block „NETZAUSFALL" in eris-core.js, sobald die Leitung fehlt.
   ⚠ OBEN und über die volle Breite, nicht unten als Toast: ein Toast ist
     flüchtig und sagt „zur Kenntnis genommen". Hier gilt ein Zustand fort —
     solange die Leiste steht, sind die Zahlen auf dem Schirm möglicherweise
     veraltet, und genau das muss sichtbar bleiben, während man sie liest.
     Unten liegt außerdem der Darstellungs-Umschalter (fixed) im Weg.
   ⚠ Amber, nicht Rot: es ist kein Fehler der Daten, sondern eine unterbrochene
     Leitung. Rot ist im Haus der Ampel vorbehalten.
   ⚠ Gefüllte Fläche mit heller Schrift ⇒ eigener Flächenton, nicht `--amber`
     (das ist als SCHRIFT gebaut; Hausregel 03.09.).
   ⚠ `position`/`z-index` setzt das Modul INLINE — auf Seiten ohne literales
     `</head>` hängt main.py die Theme-Ebene vorn ein und verlöre gegen die
     Seiten-CSS (am 11.09. am Sitzungsdialog gemessen).                        */
html .eris-netz{
  top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:8px 16px;
  /* ⚠ FESTER Wert, ausnahmsweise, und mit Grund: `--amber-flaeche` ist nur im
     Dunkel- und Präsentationsmodus definiert (gemessen 11.09.), im Hellen
     griffe der Rückfall — die Leiste sähe je Modus anders aus. Sie ist aber
     kein Datenelement, das mit dem Theme wandert, sondern ein Ausnahme-
     zustand: sie soll überall gleich und maximal lesbar sein. #8a5d00 unter
     Weiß ergibt gemessen 5,76:1 (das Token läge bei 4,65). */
  background:#8a5d00;color:#fff;
  font-family:var(--font-sans,system-ui,sans-serif);
  font-size:var(--fs-basis,13px);line-height:1.4;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
html .eris-netz-text{max-width:70ch}
html .eris-netz-btn{
  flex:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.45);border-radius:6px;
  padding:4px 12px;font:inherit;
}
html .eris-netz-btn:hover{background:rgba(255,255,255,.26)}
@media print{html .eris-netz{display:none !important}}

/* ═══════════════════════════════════════════════════════════════════════════
   DRUCKEN — EINE QUELLE
   ═══════════════════════════════════════════════════════════════════════════
   Gemessen 2026-09-11: von 44 Stylesheets hatten 9 einen `@media print`-Block,
   zusammen 10 Regeln — und die blendeten samt und sonders EINZELNE Bauteile aus.
   Keine einzige regelte Farben, Seitenumbrueche oder Tabellenkoepfe. Es gibt
   einen Export-Knopf, aber was Leute tun, ist Strg+P.

   🔴 DER SCHWERSTE FEHLER WAR DER DUNKELMODUS. Browser drucken Hintergruende
      standardmaessig NICHT, die Schriftfarbe aber schon. Am Server gemessen
      steht `--text` im Dunkeln auf `rgb(237,230,216)` — nahezu weiss. Wer dunkel
      arbeitet und druckt, bekam ein praktisch leeres Blatt, ohne dass irgendwo
      etwas kaputt aussah. Deshalb wird hier die HELLE Palette erzwungen, und
      zwar mit den tatsaechlich gemessenen Hellwerten, nicht mit geratenen.

   ⚠ DIE SELEKTOREN MUESSEN DIE DUNKEL-BLOECKE SCHLAGEN. Die stehen als
     `:root[data-theme="dark"]` (0,2,0) und unter `@media (prefers-color-scheme:
     dark)` als `:root[data-theme="auto"]`. Der `html`-Praefix hier ergibt
     (0,2,1) und gewinnt; dass dieser Block am Dateiende steht, entscheidet den
     Rest. Wer ihn nach oben schiebt, nimmt ihm die Wirkung.

   ⚠ `--text-faint` BRAUCHT HIER SEIT DEM 16.09.2026 KEINEN SONDERWERT MEHR.
     Bis dahin stand hier #8a8378 gegen #aea89f am Bildschirm, mit der
     Begruendung, die Rolle liege dort auf einer getoenten Flaeche und
     verschwinde erst auf dem ungetoenten Papier. **Gemessen war sie auch am
     Bildschirm zu schwach** (1,92-2,36 : 1, auf jeder Flaeche) und ist deshalb
     hausweit angehoben; der Bildschirmwert #6e675e traegt auf Papier ohnehin.
     Alle Rollen behalten hier exakt ihren Bildschirm-Hellwert.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  html,
  html:root[data-theme="dark"],
  html:root[data-theme="presentation"],
  html:root[data-theme="auto"] {
    color-scheme: light;
    --bg:#fff; --surface:#fff; --surface-2:#faf8f4;
    --paper:#fff; --tile:#fff;
    --text:#28231c; --text-soft:#3d3529; --text-muted:#6e675e;
    --border:rgba(80,60,30,.20); --line:rgba(80,60,30,.22); --hair:rgba(80,60,30,.18);
    --blue:#1a5296;
  }
  html, html body { background:#fff !important; color:#28231c !important; }

  /* Bedienelemente gehoeren nicht aufs Papier. `#toast` stand als einziges
     fixed-Element ohne Regel da (gemessen) — eine stehengebliebene Meldung waere
     mitgedruckt worden. */
  #toast, .eris-netz, .eris-hinweis, .eris-sitzung-bg, .eris-skip,
  .eris-theme-toggle, .sb-lasche, .eris-sb, .sidebar,
  .gs-btn, .gs-field, .notif-bell, .eris-mik,
  [data-eris-skel], .eris-ob-catch {
    display:none !important;
  }

  /* Die Kopfzeile bleibt — sie traegt den Seitennamen und den Stand —, aber
     nicht klebend: sonst steht sie im schlimmsten Fall auf jeder Seite mitten
     im Text. */
  .topbar { position:static !important; box-shadow:none !important; }

  /* Die Breite ist am Bildschirm gedeckelt (`--report-max`); auf Papier
     entscheidet das Blatt. */
  .main, .wrap, .sheet, .layout, .content { max-width:none !important; width:auto !important; }

  /* ⚠ Der wichtigste Umbruch-Punkt: `thead` als Tabellenkopf-GRUPPE wiederholt
     die Spaltenueberschriften auf jeder Folgeseite. Ohne das steht ab Blatt zwei
     eine Zahlenkolonne ohne Beschriftung — bei einem Bericht, den jemand in eine
     Sitzung mitnimmt, ist das der teuerste Druckfehler ueberhaupt. */
  thead { display:table-header-group; }
  tfoot { display:table-footer-group; }
  tr, .kcard, .minicard { break-inside:avoid; }
  .card, [class*="-card"] { break-inside:avoid; }
  h1, h2, h3, .card-title, .ct { break-after:avoid; }

  /* Diagramme haben feste Pixelmasse aus Chart.js und ragen sonst ueber das
     Blatt hinaus. */
  canvas, img, svg { max-width:100% !important; height:auto !important; }

  /* ⚠ Aufklappbares wird NICHT hier geoeffnet: `<details>` haengt am `open`-
     Attribut, per CSS ist es nicht aufzuklappen — und `summary` auszublenden
     naehme dem offenen Block seine Ueberschrift. Das erledigt `onbeforeprint`
     in eris-core.js. */

  @page { margin:14mm 12mm; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BEWEGUNG REDUZIEREN — EINE QUELLE
   ═══════════════════════════════════════════════════════════════════════════
   `prefers-reduced-motion: reduce` ist eine Betriebssystem-Einstellung, die
   Menschen mit vestibulaeren Stoerungen setzen: Bewegung auf dem Schirm loest
   bei ihnen Schwindel und Uebelkeit aus. Gemessen 2026-09-11: 29 von 44
   Stylesheets setzen `transition`, 9 setzen Animationen — und nur 5
   respektierten die Einstellung.

   ⚠ ES WIRD NICHT AUF NULL GESETZT, SONDERN AUF 0,01 ms. Ein `transition:none`
     unterdrueckt das `transitionend`-Ereignis; Code, der darauf wartet (Aufraeumen
     nach einer Einblendung), liefe dann nie zu Ende — die Bewegung waere weg und
     die Funktion gleich mit. Mit einer verschwindend kurzen Dauer feuert alles
     wie gewohnt, nur ohne sichtbare Bewegung. Dasselbe fuer `animation`.

   ⚠ AUSGENOMMEN SIND LADE-ANZEIGER (`.eris-spin-fallback`). Ein Spinner, der
     sich einmal dreht und dann steht, liest sich als „haengt" — das ist
     schlechter als gar keiner. Er ist klein, ortsfest und funktional; die
     Einstellung zielt auf grossflaechige und dekorative Bewegung. Die beiden
     grossen Dauerbewegungen des Hauses (Schimmer des Ladezustands, huepfende
     Punkte der KI-Wartanzeige) sind Web-Animationen und werden im JavaScript
     abgeschaltet — eine CSS-Regel erreicht `el.animate()` nicht.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }
  html, html body { scroll-behavior: auto !important; }
  /* Der Lade-Spinner bleibt in Bewegung — siehe Kopfkommentar. */
  html .eris-spin-fallback {
    animation-duration: .7s !important;
    animation-iteration-count: infinite !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   STERN AN EINER KENNZAHL (.kfav-star) — EINE QUELLE
   Stand bis 14.09.2026 in controlling.css und trug damit nur im Portal. Erzeugt wird
   der Stern aber von `erisKpiFavStern()` in eris-core.js, also ZENTRAL — und damit
   auf jeder Seite, die ihn ruft (seit 14.09. auch das Kennzahlen-Grid).
   ⚠ EINE GELIEHENE KLASSE TRAEGT NUR, SOLANGE DIE SEITE DIE FREMDE CSS AUCH LAEDT.
     Genau daran ist am 10.09.2026 die Zugangsweg-Tabelle (`.rk`) gescheitert: sie
     stand ungestylt da, weil die Gleichstellungsseite `studierendenprofil.css` nicht
     laedt. Ein zentral erzeugtes Bauteil braucht zentrale Optik.
   ⚠ KONTRASTE SIND GEMESSEN, NICHT GEWAEHLT (13.09.2026, alle drei Themes):
     ruhend 4,66 / 5,74 / 4,35 · gesetzt 4,43 / 6,05 / 7,28. Ein Wachhund rechnet sie
     nach (test_frontend_stern_optik.py) — er liest DIESE Datei UND controlling.css,
     weil `.fav-star` (Board-Kacheln) dort steht und beide dieselben Rueckfaelle
     tragen muessen.
   ⚠ DIE PLATZIERUNG IST KONTEXTSACHE und darf je Seite anders sein: im Portal sitzt
     der Stern neben dem Info-Knopf der Kachel, im Grid oben rechts. Ueberschrieben
     wird deshalb nur `bottom`/`right`, nie die Farben.
   ══════════════════════════════════════════════════════════════════════════ */
html .kfav-star{position:absolute;bottom:7px;right:29px;width:22px;height:22px;display:flex;
  align-items:center;justify-content:center;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--t-stern-bd,var(--border));background:var(--t-stern-bg,rgba(255,255,255,.95));
  color:var(--t-stern-fg,#6e675e);transition:color .12s,background .12s,border-color .12s,transform .12s}
html .kfav-star svg{width:14px;height:14px;fill:none}
html .kfav-star:hover{color:var(--amber);border-color:var(--amber);transform:scale(1.12)}
html .kfav-star.on{color:var(--t-stern-on-fg,#9e6b00);border-color:var(--t-stern-on-bd,#f0cf7a);
  background:var(--t-stern-on-bg,#fffaf0)}
html .kfav-star.on svg{fill:var(--t-stern-on-fill,#9e6b00)}

/* ============================================================================
   BEISPIELDATEN-BAND — EINE QUELLE (Audit U-04)
   ----------------------------------------------------------------------------
   Vor dem 17.09.2026 trugen VIER Seiten je eine eigene Fassung derselben Sache
   (`.badge.mock` in zwei Stylesheets, `.mockbadge`, `.mock-badge`) — zwei
   verschiedene Optiken, alle mit dem Wort „Mock-Daten“, und eine fuenfte Seite
   (Baumonitoring) trug gar keine Kennzeichnung. Erzeugt wird das Band von
   `erisBeispielband()`, also gehoert seine Optik hierher: eine Seite setzt
   hoechstens die Platzierung, nie die Farben.
   ⚠ Toenung statt festem Hellwert — eine feste helle Flaeche ohne feste dunkle
   Schrift faellt im Dunkelmodus aus. Der Fliesstext steht auf `--text` (voller
   Kontrast), nur die Zeile darueber traegt die Signalfarbe.
   ══════════════════════════════════════════════════════════════════════════ */
html .eris-beispielband{display:flex;gap:10px;align-items:flex-start;
  margin:0 0 16px;padding:10px 14px;border-radius:8px;
  border:1px solid var(--t-amber-bd,var(--amber,#9e6b00));
  background:var(--t-amber-bg,rgba(224,173,76,0.15));
  font-size:var(--fs-klein,12px);line-height:1.45}
html .eris-beispielband .ebb-ico{flex:0 0 auto;font-size:var(--fs-lead,16px);line-height:1.2;
  color:color-mix(in srgb,var(--t-amber-fg,var(--amber,#9e6b00)) 72%,var(--text,#28231c))}
html .eris-beispielband .ebb-body{min-width:0}
/* ⚠ Signalfarbe mit --text gemischt (24.09.2026): reines Amber auf der Amber-Toenung
   trug im Hellmodus nur 3,64. --text dreht mit dem Theme, die Mischung hebt also hell
   UND dunkel. Gilt fuer JEDE Seite mit diesem Band. */
html .eris-beispielband b{display:block;font-size:var(--fs-basis,13px);
  color:color-mix(in srgb,var(--t-amber-fg,var(--amber,#9e6b00)) 72%,var(--text,#28231c));margin-bottom:2px}
html .eris-beispielband .ebb-txt{color:var(--text,#28231c)}

/* ============================================================================
 * VOLLBILD (Lupe) für Diagramme UND Tabellen — Nutzer-Entscheidung 23.09.2026.
 * Aufgebaut von eris-core.js (`erisZoomChart` / `erisZoomTabelle`); hier nur Optik.
 * Anlass: Reports auf dem Präsentationsmonitor im Besprechungsraum zu klein.
 * ZWEI GESTALTEN (Nutzer 29.09.2026: „nur für Präsentation … im normalen Modus nur
 * eine Vergrößerung, so wie früher“):
 *   · Grundform = DIALOG über der abgedunkelten Seite, 92 % × 88 %, gedeckelt auf
 *     1400 px — die Maße von vor dem 23.09., jetzt auf Theme-Tokens statt fest #fff
 *     (im Dunkeln stand darauf damals helle Achsenschrift).
 *   · `.eris-vb--leinwand` = PRÄSENTATION: die ganze Leinwand, ohne Rand und Schatten.
 *     Die Klasse setzt eris-core.js (`_vbOeffnen`) — nur dort wird entschieden.
 * ⚠ KEINE vw/vh: die Box bemisst sich in % der Schicht (`inset:0`) — im
 *   Browser-Vollbild ist die Schicht die Leinwand, ein vw/vh-Deckel ließe Rand stehen.
 * ==========================================================================*/
.eris-vb {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center;
  background: rgba(20,15,5,.55); padding: 0;
}
.eris-vb-box {
  width: min(92%, 1400px); height: 88%;
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface, #fff); color: var(--text, #28231c);
  border: 1px solid var(--border, rgba(80,60,30,.18)); border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 14px 16px 16px; box-sizing: border-box;
}
.eris-vb-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex: none; }
.eris-vb-titel {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-serif, 'Lora', Georgia, serif); font-weight: 600;
  font-size: var(--fs-titel, 18px); color: var(--text, #28231c);
}
.eris-vb-zu {
  flex: none; width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer;
  background: none; color: var(--text-muted, #6e675e); font-size: 26px; line-height: 1;
}
/* Präsentation: EINE Karte auf der ganzen Leinwand (Nutzer 23.09. und 27.09.). */
.eris-vb.eris-vb--leinwand {
  align-items: stretch; justify-content: stretch; background: var(--bg, #f2ede4);
}
.eris-vb--leinwand .eris-vb-box {
  flex: 1; width: auto; height: auto; border: none; border-radius: 0; box-shadow: none;
  padding: 16px 24px 20px;
}
.eris-vb--leinwand .eris-vb-kopf { margin-bottom: 10px; }
.eris-vb--leinwand .eris-vb-titel { font-size: var(--fs-h1, 26px); }
.eris-vb--leinwand .eris-vb-zu { width: 40px; height: 40px; font-size: 30px; }
.eris-vb-zu:hover { background: var(--blue-faint, rgba(26,82,150,0.08)); color: var(--text, #28231c); }
.eris-vb-zu:focus-visible { outline: 2px solid var(--blue, #1a5296); outline-offset: 2px; }
.eris-vb-inhalt { position: relative; flex: 1; min-height: 0; overflow: auto; }
/* ⚠ Bei Tabellen die Scrollspur VORHALTEN (29.09.2026 gemessen): der Faktor wird an
   der noch kurzen Kopie bemessen, erst die vergrößerte Tabelle ist hoch genug für den
   senkrechten Balken — der nahm dann 15 px weg, und 4 von 7 Tabellen des
   Finanzberichts ragten 6–8 px über (ein waagerechter Balken für nichts). */
.eris-vb--tabelle .eris-vb-inhalt { scrollbar-gutter: stable; }
/* Die Tabellen-Kopie: seiteneigene Regeln über Ids/Eltern greifen hier nicht mehr,
   deshalb eine schlichte Grundform mit Spezifität 0 — Klassenregeln der Seite
   (z. B. `.datentabelle`) schlagen sie. */
.eris-vb-tabelle { width: max-content; max-width: none; margin: 0 auto; }
.eris-vb-tabelle :where(table) { border-collapse: collapse; color: var(--text, #28231c); }
.eris-vb-tabelle :where(th, td) { padding: 4px 10px; border-bottom: 1px solid var(--line, rgba(80,60,30,.13)); }
.eris-vb-tabelle :where(th) { text-align: left; font-weight: 600; color: var(--text-soft, #3d3529); }
/* Aufklappbar in der Kopie: der Klick wird auf das ORIGINAL gespiegelt (eris-core.js).
   Ohne den Zeigefinger sieht niemand, dass die Zeile etwas tut — und ein Hover auf
   einer NICHT klickbaren Zelle täuschte umgekehrt Bedienbarkeit vor. */
.eris-vb-tabelle [data-vb-auf] { cursor: pointer; }

/* Der Knopf an Diagrammen (je Diagramm) und an Tabellen (einer, schwebend). */
.eris-vb-knopf {
  z-index: 20; width: 26px; height: 26px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-mid, var(--line, rgba(80,60,30,0.16))); border-radius: 7px;
  background: var(--surface, #fff); color: var(--blue, #1a5296);
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,.12));
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.eris-vb-knopf-diagramm { position: absolute; top: 6px; right: 6px; }
.eris-vb-knopf-tabelle { position: fixed; z-index: 7000; }
.eris-vb-knopf.an, .eris-vb-knopf:focus-visible { opacity: .9; pointer-events: auto; }
.eris-vb-knopf:hover { opacity: 1; }
.eris-vb-knopf:focus-visible { outline: 2px solid var(--blue, #1a5296); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .eris-vb-knopf { transition-duration: .01ms; } }
@media print { .eris-vb, .eris-vb-knopf { display: none !important; } }

/* ============================================================================
   KI-BELEGE — was unter einer KI-Antwort steht (27.09.2026)
   Suche (Strg+K) und KI-Frage-Fenster zeigen dieselben Belege
   (`_erisKiBelege` in eris-core.js; der Inhalt kommt aus services/ki_belege.py).
   ⚠ Die Tabelle ist die Datentabelle des Hauses (`.datentabelle`) — hier stehen nur
     Karte, Beschriftungen und Links. Farben aus den Tokens, jeweils mit Rückfall.
   ============================================================================ */
.eris-ki-belege { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.eris-ki-belege:empty { display: none; }
.eris-ki-belege-h {
  font-size: var(--fs-mikro, 11px); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted, #6e675e);
}
.eris-ki-beleg {
  background: var(--surface, #fff); border: 1px solid var(--line, rgba(80,60,30,.13));
  border-radius: 8px; padding: 10px 12px; color: var(--text, #28231c);
}
.eris-ki-beleg-titel { font-weight: 600; font-size: var(--fs-basis, 13px); }
.eris-ki-beleg-unter { margin-top: 2px; font-size: var(--fs-mikro, 11px); color: var(--text-muted, #6e675e); }
.eris-ki-beleg-text { margin: 6px 0 0; font-size: var(--fs-basis, 13px); line-height: 1.5; white-space: normal; }
.eris-ki-beleg-text + .eris-ki-beleg-text { color: var(--text-soft, #4a443b); }
.eris-ki-tabwrap { margin-top: 6px; overflow-x: auto; }
.eris-ki-beleg-hinweis {
  margin-top: 6px; font-size: var(--fs-klein, 12px); line-height: 1.45; color: var(--text-muted, #6e675e);
}
.eris-ki-beleg-fuss {
  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  font-size: var(--fs-klein, 12px);
}
.eris-ki-beleg-fuss .eris-ki-l { color: var(--text-muted, #6e675e); }
.eris-ki-vermerk { color: var(--text-muted, #6e675e); font-style: italic; }
.eris-ki-link { color: var(--blue, #1a5296); text-decoration: none; }
.eris-ki-link:hover { text-decoration: underline; }
.eris-ki-link:focus-visible { outline: 2px solid var(--blue, #1a5296); outline-offset: 2px; }