/* ============================================================
   ZENTRALE DESIGN-TOKENS — Single Source of Truth
   ============================================================

   Warum eine eigene Datei und nicht app.css:
   Die Standalone-Seiten (Graph-Vollbild, 3D-Ansicht, geteiltes
   Organigramm, Login, Tracking, Change-Report) laden app.css
   bewusst NICHT, brauchen die Tokens aber genauso. Eine zweite
   Definition in deren <style>-Bloecken waere ein Klon mit
   garantiertem Drift. Deshalb: eine Datei, ueberall verlinkt.

   Reihenfolge beachten: muss NACH bootstrap.min.css geladen
   werden, sonst gewinnen die Bootstrap-Defaults im :root.

   Aenderung der App-Rundung = genau zwei Werte hier anfassen.
   Aenderung der App-Hintergrundfarbe = genau ein Wert hier.
   ============================================================ */

/* Serif-Titel entfallen (Design-Entscheidung Milko 2026-08-30,
   docs/mockups/design_entscheidung.html Block 5): der frueher hier
   selbst gehostete @font-face "Source Serif 4" und das Token
   --font-serif sind entfernt; alle Titel laufen ueber die
   Schrifttreppe unten in der Grundschrift. */

:root {
  /* Hintergrund der App-Grundflaeche hinter dem Inhalt (body).
     Flat, kein Verlauf — Cards/Container setzen ihr eigenes Weiss. */
  --bg-app: var(--bg-seite); /* Stufe 2: Alias auf den WF-Seitengrund (WF:203) */

  /* Zeilenschnitt in Tabellen und Listen (Design-Standard 2026-08-30,
     Checkliste t): EINZIGE Quelle fuer Trennlinien; jede Roh-Hex-Linie
     ist ein Verstoss. EXAKTE Uebernahme aus WebFinance (Entscheid
     Milko 2026-08-30): Farbe WebFinance/styles.css:20, Staerke :622.
     Konsumenten u.a.: .tbl-std (unten in dieser Datei), .page-body,
     .btn-quiet, .segmented. */
  --line: #c8c8c8;
  --line-w: 0.5px;

  /* Tabellen-Standard — EXAKTE WebFinance-Werte (styles.css dort):
     Kopf-Linie :620 (1.5px #b0b0b0), Kopf-Flaeche :183 (--th-bg
     #e9fac8, OpenColor lime-1), Kopf-Text :184/:617-618 (#37500d,
     12px, 700, uppercase, letter-spacing 0.04em). Konsument: .tbl-std
     (seit 2026-09-03 unten in dieser Datei). */
  --tbl-head-line:   #b0b0b0;
  --tbl-head-line-w: 1.5px;
  --tbl-head-bg:     var(--th-bg);   /* Stufe 2: Alias (WF:183) */
  --tbl-head-text:   var(--th-text); /* Stufe 2: Alias (WF:184) */
  --tbl-head-font-size: 12px;
  --tbl-head-font-weight: 700;
  --tbl-head-letter-spacing: 0.04em;

  /* Karten-Rahmen — EXAKTE WebFinance-Vorgabe ("exakte Vorgabe",
     styles.css:236 dort): 1px #c0c0c0. Felder/Buttons behalten
     --line-strong (Checkliste u). */
  --card-line: #c0c0c0;

  /* Akzent-Blau — seit 2026-09-03 hier statt in app.css (dort stand die
     Familie im Block "Akzent-Farb-Tokens", Refactor-Commit "zentrale
     Akzent-Farb-Tokens"). Grund wie bei --brand: die Standalone-Seite
     login_select.html braucht die Werte fuer .klickbar (Hover-Flaeche,
     Fokus-Rahmen; Block unten in dieser Datei) und fuer den Kuerzel-
     Kreis der Mandanten-Tabelle, der zuvor #dbeafe als Hex-Kopie trug.
     Die uebrigen Akzent-Familien (Gruen, Orange, Rot, Gelb) bleiben in
     app.css — sie haben keinen Standalone-Konsumenten. Werte
     unveraendert uebernommen. */
  --accent-blue-bg:      #dbeafe;
  --accent-blue-border:  #3b82f6;
  /* +1 Stufe ggue. -bg (Blau-200): Hover/aktive Zeile auf getoentem Panel. */
  --accent-blue-bg-strong: #bfdbfe;
  /* Lesbares Dunkelblau (Blau-800, ~6.9:1 auf -bg) fuer Text auf Akzent-Blau.
     Vorher Roh-Hex #1e40af in .hpc-result-list-item (app.css) — bei
     naechstem Touch dort migrierbar. */
  --accent-blue-text:    #1e40af;

  /* ==========================================================
     WEBFINANCE-:root EXAKT UEBERNOMMEN (Stufe 2, Entscheid Milko
     2026-08-30). Quelle je Wert: WebFinance/styles.css:<Zeile>.
     AUSGENOMMEN (Abweichungen Arionosys): Tuerkis-Familie
     (--accent :178, --accent-hauch :179, --akzent-kraeftig :95,
     --akzent-hover :96, --link :100, --feld-rahmen :174), Radius
     (WF hat keine Radius-Tokens; 6/8 bleibt), Akzent Gelb.
     Bestehende Arionosys-Tokens gleicher Bedeutung sind unten als
     Aliase auf diese Originalnamen umgestellt (Option 1).
     ========================================================== */
  --inhalt-max: 1600px;                    /* WF:5 */
  --text: #262626;                         /* WF:6 */
  --text-muted: #6a6a6a;                   /* WF:18 */
  --text-gedaempft: #808080;               /* WF:19 */
  --text-stark: #1a1a1a;                   /* WF:104 */
  --summe-bg: #f1f3f5;                     /* WF:23 */
  --summe-linie: #dee2e6;                  /* WF:154 */
  --jahr-spalte-bg: #fafafa;               /* WF:30 */
  --aufklapp-bg: #eef1f2;                  /* WF:36 */
  --edit-bg: #e0e4e6;                      /* WF:37 */
  --gruppe-bg: #e7f5ff;                    /* WF:49 */
  --detail-bg: var(--gruppe-bg);           /* WF:50 */
  --gruppe-linie: #a5d8ff;                 /* WF:59 */
  --karten-feld-hoehe: calc(1.4 * 13px + 14px); /* WF:68 */
  --feld-hoehe: 34px;                      /* WF:74 */
  --feld-b-schmal: 110px;                  /* WF:82 */
  --feld-b-mittel: 150px;                  /* WF:83 */
  --feld-b-breit: 190px;                   /* WF:84 */
  --feld-b-auswahl: 220px;                 /* WF:85 */
  --feld-b-name: 240px;                    /* WF:88 */
  --feld-abstand: 24px;                    /* WF:90 */
  --detail-karte-linie: #d8dcde;           /* WF:106 */
  --aktionen-abstand: 24px;                /* WF:107 */
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.25' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); /* WF:115 */
  --status-ok-bg: #eaf5ee;                 /* WF:121 */
  --offen-bg: #fdeeb8;                     /* WF:127 */
  --offen-linie: #d9a800;                  /* WF:128 */
  --offen-text: #7a5c00;                   /* WF:129 */
  --erfolg-bg: #e9f7ef;                    /* WF:130 */
  --erfolg-linie: #b7dfc5;                 /* WF:131 */
  --erfolg-text: #1e8449;                  /* WF:132 */
  --fehler-bg: #fdedec;                    /* WF:133 */
  --fehler-linie: #f2c4bd;                 /* WF:134 */
  --fehler-text: #c0392b;                  /* WF:135 */
  --pille-gruen-bg: #d4edda;               /* WF:142 */
  --pille-gruen-linie: #1e8449;            /* WF:143 */
  --pille-gruen-text: #14572f;             /* WF:144 */
  --pille-gelb-bg: var(--offen-bg);        /* WF:145 */
  --pille-gelb-linie: var(--offen-linie);  /* WF:146 */
  --pille-gelb-text: var(--offen-text);    /* WF:147 */
  --pille-rot-bg: #f8d7d3;                 /* WF:148 */
  --pille-rot-linie: #c0392b;              /* WF:149 */
  --pille-rot-text: #7c231a;               /* WF:150 */
  --pille-grau-bg: #f1f3f5;                /* WF:151 */
  --pille-grau-linie: #b0b0b0;             /* WF:152 */
  --pille-grau-text: #6a6a6a;              /* WF:153 */
  --zahlung-bg: #e9f2f1;                   /* WF:159 */
  --zahlung-linie: #d5e5e3;                /* WF:160 */
  --herleitung-kopf-bg: #ffe8cc;           /* WF:166 */
  --herleitung-kopf-linie: #ffd8a8;        /* WF:167 */
  --nav-badge-bg: #c0392b;                 /* WF:172 */
  --nav-badge-radius: 9px;                 /* WF:173 */
  --th-bg: #e9fac8;                        /* WF:183 */
  --th-text: #37500d;                      /* WF:184 */
  --th-zusatz: #566f36;                    /* WF:185 */
  --th-hover: #d8f5a2;                     /* WF:189 */
  --wiso-gruppe: #1c5f9e;                  /* WF:200 */
  --wiso-zeile: #1c5f9e;                   /* WF:201 */
  --bg: #ffffff;                           /* WF:202 */
  --bg-seite: #f5f5f5;                     /* WF:203 */
  --bg-soft: #fafafa;                      /* WF:204 */
  --chart-1: #339af0;                      /* WF:208 */
  --chart-2: #20c997;                      /* WF:209 */
  --chart-3: #94d82d;                      /* WF:210 */
  --chart-4: #ff922b;                      /* WF:211 */
  --chart-5: #f06595;                      /* WF:212 */
  --chart-6: #845ef7;                      /* WF:213 */
  --chart-7: #5c7cfa;                      /* WF:214 */
  --chart-8: #22b8cf;                      /* WF:215 */
  --chart-9: #51cf66;                      /* WF:216 */
  --chart-10: #fcc419;                     /* WF:217 */
  --chart-11: #ff6b6b;                     /* WF:218 */
  --chart-12: #cc5de8;                     /* WF:219 */

  /* Tinte-Stufen und kraeftige Linie fuer die Core-Seiten (Mockup
     docs/mockups/mockup_gesellschaft_detail.html: ink-3 #8A94A2,
     line-strong #CFD4DA — auf die Slate-Stufen des Projekts gemappt:
     #94a3b8 = Slate-400, bereits als Roh-Hex in .chip.chip-add, .cell-muted,
     .prof-table-Spalten; #cbd5e1 = Slate-300, bereits in .chip.chip-off,
     .btn-test-icon, .btn-load-users). --ink (#0f172a) und --muted (#64748b)
     leben in app.css :root und dienen als Stufe 1 und 2; hier nur die
     fehlende dritte Stufe und die kraeftige Linie — neue Namen, weil die
     bestehenden Vorkommen entweder Roh-Hex oder komponentengebunden
     (--popover-header-fg) sind. */
  --ink-3: var(--text-gedaempft); /* Stufe 2: Alias auf WF --text-gedaempft (WF:19) */
  /* Kraeftige Linie der Core-Seiten = Kontrast-Gebot docs/design.md §6 (Linien/
     Rahmen/Icons >= 3:1 auf ihrem Hintergrund; halb Sichtbares ist verboten).
     #7f8a99 (zwischen Slate-400 und -500 abgeleitet): 3.50:1 auf Weiss, 3.27:1
     auf --bg-app, 3.38:1 auf --accent-yellow-tint, 3.14:1 auf --accent-yellow-bg.
     Vorher #cbd5e1 (Slate-300, 1.48:1) — ungenutzt, Wert ersetzt statt neues
     Token. --line (1.23:1) bleibt fuer app-weite Haarlinien ausserhalb der
     Core-Seiten. */
  --line-strong: #7f8a99;
  /* Rolle von --line-strong seit dem Design-Standard 2026-08-30
     (Checkliste t/u): RAHMEN von Karten und Buttons im
     Ruhezustand — Farbe am Rahmen ist ein Interaktions-Signal
     (Hover/Fokus/aktiv), kein Ruhezustand. Dokumentierte
     Ausnahme seit Paket 1 (Entscheid Milko 2026-08-30, Block 1):
     EINGABEFELDER tragen in Ruhe den Akzentrahmen --feld-rahmen
     (wie WebFinance), damit sie als Felder erkennbar sind. */

  /* ----------------------------------------------------------
     STATUS-DREIER (Design-Standard 2026-08-30, Checkliste x):
     je Rolle bg/line/text; abgeleitet aus den bestehenden
     Akzent-Paaren in app.css (--accent-red/-yellow/-green/-blue).
     Text-Stufen gemessen auf ihrem bg (>= 4,5:1 gefordert):
     danger 5,30:1 · warning 6,15:1 · success 6,29:1 · info 7,15:1. */
  --danger-bg:    var(--fehler-bg);    /* Stufe 2: Aliase auf die WF-Status-Dreier */
  --danger-line:  var(--fehler-linie);
  --danger-text:  var(--fehler-text);
  --warning-bg:   var(--offen-bg);
  --warning-line: var(--offen-linie);
  --warning-text: var(--offen-text);
  --success-bg:   var(--erfolg-bg);
  --success-line: var(--erfolg-linie);
  --success-text: var(--erfolg-text);
  --info-bg:      #dbeafe;
  --info-line:    #3b82f6;
  --info-text:    #1e40af;

  /* Abstands-Skala (Checkliste y): 4/8/12/16/24/32/48 px — Werte
     ausserhalb der Skala sind ein Verstoss. Benannte Rollen: */
  --space-feld:     var(--feld-abstand);      /* Stufe 2: Alias (WF:90) */
  --space-aktionen: var(--aktionen-abstand);  /* Stufe 2: Alias (WF:107) */

  /* Genau EINE Schattenstufe fuer Karten (Checkliste aa); jeder andere
     Schatten ist ein Verstoss. Migration der Bestands-Karten seitenweise. */
  --shadow-card: 0 1px 3px rgba(2, 6, 23, 0.08);

  /* Menuepanels (Benutzermenue und seine Untermenues, header.html):
     Overlay-Schatten und Zeilen-Hover. docs/design.md nimmt Overlay-,
     Modal-, Toast- und Tooltip-Schatten ausdruecklich von der EINEN
     Kartenschattenstufe aus ("eigene Rollen, behalten ihre Werte") —
     der Wert ist deshalb kein neuer, sondern der bestehende aus
     header.html, hier nur zentral benannt. Grund: Menues ausserhalb
     des Headers (Konto-Dialog, "+ Mandant hinzufuegen") koennen ihn
     so SPIEGELN statt kopieren. Der Weg ueber tokens.css statt ueber
     die header.html-Regeln ist Absicht — deren <style> haengt
     header.js erst nach dem Laden von /header-fragment in den <head>,
     tokens.css liegt von Anfang an an (gleiche Begruendung wie beim
     Sidebar-Block weiter unten). */
  --shadow-menue: 0 8px 24px rgba(2, 6, 23, .06),
                  0 0 0 1px rgba(37, 99, 235, .18) inset;
  --menue-hover: #eaf0ff;

  /* Kartenflaeche (Paket 2 "Flaechen", Entscheid Milko 2026-08-30,
     Frage 1): NICHT Weiss wie in WebFinance, sondern der helle
     Blauton, der VOR der Korrektur die Flaeche des Konto-Dialogs war
     (damals gemessen: #acctDetailModal .modal-content mit
     var(--accent-blue-bg) = #dbeafe, der .modal-body-Wert war per
     !important tot). Der Dialog selbst ist seit der Entblau-Korrektur
     neutral (--bg-seite) — der gemessene Wert lebt hier als EIGENES
     Token weiter — seit Punkt 10 (Grundregel weiss) als
     BLOCKTON der entschiedenen Blau-Flaechen (Konto-Dialog-Bloecke,
     Kontenuebersicht), nicht mehr als allgemeine Kartenflaeche;
     Standalone-Seiten sehen ihn mit. */
  --karte-bg: #dbeafe;

  /* Mandanten-Chip (Korrektur zu Paket 2, Entscheid Milko
     2026-08-30): eigene Orange-Familie statt der gelben Rundpillen.
     Gemessen: Text #9a3412 auf #ffedd5 = 6,38:1 (Gebot >= 4,5:1),
     Linie #f97316 = 2,80:1 auf Weiss (kraeftigste Stufe der
     Familie). Konsument: .chip-mandant in app.css — seit 2026-09-01
     nur noch als Rueckfallebene, wenn das Produkt des Mandanten
     unbekannt ist; sonst gelten die --produkt-*-Farben unten. */
  --chip-mandant-bg:   #ffedd5;
  --chip-mandant-line: #f97316;
  --chip-mandant-text: #9a3412;

  /* Produkt-Chip (Produkttrennung Teil 2): die Farben sind KEINE
     Design-Wahl, sondern die Tag-Werte der beiden Produkt-Lockups
     — abgelesen aus static/img/arionosys_lockup_connect_app.svg
     (Tag-Rechteck #EBB936, Tag-Schrift #1F3A5F) und
     arionosys_lockup_core_app.svg (#1F3A5F / #FFFFFF). Damit trifft
     der Chip die Marke exakt; ein eigener Hex waere Drift.
     Gemessen: Connect 6,30:1, Core 11,48:1 (Gebot >= 4,5:1).
     Die Rahmenfarbe ist bewusst die Flaechenfarbe (Entscheid Milko
     2026-08-31, Frage 2): die Logo-Tags sind rahmenlos, das
     Box-Modell bleibt trotzdem deckungsgleich mit .chip-mandant.
     Konsumenten: .produkt-chip weiter unten und (seit 2026-09-01)
     .chip-mandant-connect/-core in app.css. */
  --produkt-connect-bg:   #EBB936;
  --produkt-connect-text: #1F3A5F;
  --produkt-core-bg:      #1F3A5F;
  --produkt-core-text:    #FFFFFF;

  /* Akzent-Blau der Parameterbloecke (Blau-500): bisher Roh-Hex #3b82f6
     verteilt in accounts.html (Blocktitel-Unterstrich, Karten-/Feld-
     Rahmen). Token-Konsumenten zunaechst nur der Unterstrich der
     Blocktitel und der weisse Einleger der Mandanten-Karten; die
     uebrigen Roh-Hex-Vorkommen ziehen beim naechsten Farb-Refactor um. */
  --accent-blue: #3b82f6;

  /* ----------------------------------------------------------
     LEITFARBE BLAU (Paket 1 Bedienelemente, Entscheid Milko
     2026-08-30: Frage 1 Option 1 — --brand #2563eb ist die
     Aktionsfarbe, nicht das hellere --accent-blue; weisse
     13px-Schrift liest darauf 5,17:1 gegen 3,68:1).
     --brand lag bis Paket 1 in app.css :root und ist hierher
     gezogen, damit die Standalone-Seiten (login) sie sehen.
     Die Stufen: Blue-600 Ruhe, Blue-700 Hover, Blue-800 Aktiv
     und Feld-Fokus. */
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-aktiv: #1e40af;

  /* Eingabefelder tragen den Akzentrahmen in RUHE (Finance-Regel
     Block 1, Entscheid Milko 2026-08-30) — die dokumentierte
     Ausnahme der Ruhe-grau-Regel unten bei --line-strong; Fokus
     ist die dunklere Stufe, kein Glow. Analog WF --feld-rahmen
     (dort Tuerkis, hier Blau). */
  --feld-rahmen: var(--brand);
  --feld-rahmen-fokus: var(--brand-aktiv);
  /* Neben-Grau fuer Meta-/Hilfstext der Core-Seiten (Drei-Farben-Regel,
     docs/design.md): Slate-600, Kontrast 7.6:1 auf Weiss — erfuellt das
     Minimum 4.5:1 deutlich. --ink-3 (Slate-400, 2.6:1) ist dafuer zu hell
     und auf den Core-Seiten seit dem Kontrast-Gebot (docs/design.md §6)
     nicht mehr in Verwendung. */
  --ink-2: var(--text-muted); /* Stufe 2: Alias auf WF --text-muted (WF:18) */
  /* Heller Gelb-Ton fuer Eingabefelder im Inline-Editor der Core-Seiten
     (docs/design.md 2a: Edit-Felder klar erkennbar — deutlicher Rahmen plus
     dezenter gelber Hintergrund). --accent-yellow-bg (#fef3c7, Amber-100) ist
     das Etikett-/Balken-Gelb und fuer eine Eingabeflaeche zu kraeftig; hier
     Amber-50 aus derselben Familie. */
  --accent-yellow-tint: #fffbeb;

  /* ----------------------------------------------------------
     SCHRIFTTREPPE — feste px-Rollen, app-weit (Design-Entscheidung
     Milko 2026-08-30, alle sechs Bloecke Finance-Regel; Quelle
     WebFinance/styles.css: Seitentitel :515, Kartentitel :599,
     Fliesstext/Tabelle :612, Label :559, Meta :516).
     Konsumenten: .page-title h2/p, .card-section-header,
     .meta-counter, .text-arbeit in app.css sowie .label-versal
     weiter unten in dieser Datei (seit Paket 1 hier, damit die
     Standalone-Seiten sie sehen). Kein Konsument setzt eigene
     Zahlen. */
  --schrift-seitentitel: 26px;   /* 700, letter-spacing -0.01em */
  --schrift-kartentitel: 16px;   /* 700 */
  --schrift-text:        14px;   /* Fliesstext und Tabellen */
  --schrift-arbeitstext: 13px;   /* Hinweis-/Arbeitszeilen */
  --schrift-meta:        12px;   /* Meta, Untertitel, Zaehler */
  --schrift-label:       11px;   /* Feld-Label, 500, versal */
  /* Chip-Stufe: unterhalb der regulaeren Skala, ausschliesslich fuer
     die Kennzeichnungs-Chips (.produkt-chip hier, .chip-mandant in
     app.css). Bekam 2026-09-01 ein Token, weil seither BEIDE Chips
     dieselbe Groesse tragen — ohne Token stuende die 9 an zwei
     Stellen und driftete beim naechsten Touch auseinander. */
  --schrift-chip:         9px;   /* Kennzeichnungs-Chips, 500, versal */

  /* Maximale Inhaltsbreite der Core-Datensatz-Seiten (docs/design.md §5,
     "kompakte Akte"): Detailansicht linksbuendig auf diese Breite begrenzt,
     Rest bleibt Hintergrund. Kein bestehendes Token im Bereich 960-1040px
     vorhanden (geprueft app.css/tokens.css), daher hier als neues Token. */
  --content-max-core: 1000px;
  /* Detailansicht der Gesellschaft (Entscheid Milko 2026-09-07): der
     Stammdaten-Block ist ein Kartenraster statt Fliesstext — drei Karten je
     Zeile brauchen mehr Breite als eine Akte. Eigener, hoeherer Deckel fuer
     die GESAMTE Detailansicht (Bereichs-Menue, Block, Historie, Loesch-Link),
     damit beim Bereichswechsel nichts springt; --content-max-core bleibt fuer
     alle anderen Core-Seiten unveraendert. Nicht ganz aufgehoben, weil auf
     sehr breiten Monitoren sonst vier oder fuenf Spalten entstuenden. */
  --content-max-stamm: 1400px;

  /* ----------------------------------------------------------
     BEREICHSKARTEN (Stammdaten Gesellschaft, docs/design.md §5). Palette aus
     dem Schwesterprojekt, uebernommen 2026-09-07 — dies ist die EINZIGE
     Definitionsquelle, ueberall sonst nur die Variable. Praefix --bereich-,
     bewusst getrennt vom globalen Blockton --karte-bg. Je Farbe zwei Rollen:
       -bg     Kartenflaeche; Text darauf laeuft ueber die globalen Rollen
               --ink (Werte, 15.93:1) und --ink-2 (Ueberschrift, Label,
               Stift, Fusslink, 4.83:1), Rahmen --line-strong (3.12:1) —
               Entscheid Milko 2026-09-07, keine karteneigenen Textfarben
       -akzent kraeftiger Ton — NUR fuer spaetere Diagrammflaechen vorgesehen,
               NICHT fuer Text: auf der eigenen Flaeche nur 2.6:1, unter dem
               Text-Gebot 4.5:1 (§6); im Seiten-CSS heute ohne Nutzer
     Reduktion auf EINE Flaeche (Entscheid Milko 2026-09-07, vorher sieben, dann
     drei Toene): alle neun Bereiche tragen Blau. Limette, Indigo, Rosé, Orange,
     Violett, Mint und Grau sind entfernt (jeweils ohne Nutzer ausserhalb des
     Fragments, Befunde 2026-09-07); damit entfaellt die Ausnahme von der
     Lila-Regel. */
  --bereich-blau-bg:        #EAF3FD;
  --bereich-blau-akzent:    #549AEB;

  /* Grosse Container: Cards, Panels, Modals, Dropdowns, Popover. */
  --radius-card: 8px;
  /* Bedienelemente: Buttons, Inputs, Selects, Pills, Badges, Chips. */
  --radius-control: 6px;

  /* Bootstrap zieht mit (Buttons, Inputs, Dropdowns, Modals, Cards).
     Ohne diese Zuweisung behielten alle nicht ueberschriebenen
     Bootstrap-Komponenten ihre 0.375rem/0.5rem-Defaults. */
  --bs-border-radius:     var(--radius-control);
  --bs-border-radius-sm:  var(--radius-control);
  --bs-border-radius-lg:  var(--radius-card);
  --bs-border-radius-xl:  var(--radius-card);
  --bs-border-radius-2xl: var(--radius-card);

  /* ----------------------------------------------------------
     BEDIENELEMENT-GROESSE — Buttons, Inputs, Selects
     ----------------------------------------------------------
     Eine Stellschraube fuer die gesamte Bedienelement-Ebene.
     Konsumenten: der .btn-Block weiter unten (ueber die
     --bs-btn-*-Variablen) und die .form-control/.form-select-
     Regeln in app.css. Kein Konsument setzt eigene Zahlen.

     Warum px und nicht rem: die Zielgroesse ist eine absolute —
     Schrifttreppe und Bedienelemente sind viewportunabhaengig
     (der fruehere 1200px-Schriftsprung html{font-size:17px} in
     app.css ist mit der Schrifttreppe 2026-08-30 entfallen). Das
     ist die bewusste Ausnahme von "Tokens statt Direktwerte", und
     sie steht genau hier in der Token-Datei, nicht verteilt in
     den Konsumenten. */
  /* Feld-Stufe seit Paket 1 (Finance-Regel Block 1): 13px auf
     fester Hoehe --feld-hoehe (34px) — die Hoehe kommt aus dem
     height-Wert der zentralen Feld-Regel in app.css, nicht mehr
     aus dem Padding; --control-padding-y ist damit entfallen. */
  --control-font-size:    13px;
  --control-padding-x:    10px;

  --control-font-size-sm: 12.5px;
  --control-padding-y-sm:    4px;
  --control-padding-x-sm:    9px;

  /* ----------------------------------------------------------
     AKTIONS-STUFE — jeder ausfuehrende Button, app-weit
     ----------------------------------------------------------
     Grundsatzentscheidung: es gibt genau EINE Groesse fuer
     Buttons, die etwas ausfuehren — die kompakte. Die groessere
     Stufe (--control-* ohne Suffix, 37px) gehoert ab jetzt
     ausschliesslich den Formularzeilen: .form-control,
     .form-select, deren Klone (.cr-input, .tk-input, .tk-select)
     und den Zustands-Schaltern (.segmented), die buendig
     daneben stehen muessen.

     Eigene Namen statt direkter Verwendung von --control-*-sm:
     die Werte sind heute dieselben, die ABSICHT ist eine andere.
     Ein Konsument, der "Aktions-Button" meint, soll das auch
     schreiben — sonst liest sich jede kuenftige Aenderung an der
     kleinen Formular-Stufe versehentlich als Button-Aenderung.

     Konsumenten: der .btn-Block weiter unten (ueber die
     --bs-btn-*-Variablen), die drei zentralen Button-Klassen
     .btn-primaer/.btn-rahmen(.btn-gefahr) in app.css, die
     Filter-Trigger (.filter-btn, .cr-filter-btn, .tk-filter-btn)
     und .confirm-btn in toast.css. Kein Konsument setzt eigene
     Zahlen.

     Werte seit Paket 1 (Finance-Regel Block 6, Entscheid Milko
     2026-08-30): 13px, Padding 6/14, Zielhoehe --karten-feld-hoehe
     (1.4 * 13px + 14px = 32.2px — deshalb gehoert zur Stufe die
     line-height 1.4, gesetzt im .btn-Block unten und in den drei
     Button-Klassen). */
  --action-font-size: 13px;
  --action-padding-y: 6px;
  --action-padding-x: 14px;

  /* Rechte Innenkante von .form-select — dort sitzt der Caret. Bootstrap
     zeichnet ihn als Hintergrundbild (background-position: right .75rem
     center, background-size: 16px 12px), also 12px vom Rand und 16px breit;
     mit 8px Luft davor ergibt das 36px. Das ist derselbe Platz wie Bootstraps
     eigenes padding-right von 2.25rem, nur in px — fest, waehrend der Caret
     an seinen 12px/16px festhaelt (der fruehere 1200px-Schriftsprung ist mit
     der Schrifttreppe 2026-08-30 entfallen).
     Konsument: der .form-select-Block in app.css. */
  --control-padding-x-caret: 36px;

  /* Abgeleitete Hoehen fuer Elemente, die sich nicht ueber Padding
     aufspannen, sondern eine feste Kante brauchen (quadratische
     Icon-Buttons). Formel = Zeilenhoehe (Bootstrap --bs-btn-line-
     height: 1.5) + 2x Padding + 2x Rahmen; dieselbe Rechnung fuer die
     Formular-Stufe steht direkt darunter als --control-h.
     Der Rahmen ist mit 1px
     angesetzt: die 1.5px-Rahmen im Projekt (.btn-brand,
     .form-control) rendern auf DPR-1-Displays ohnehin als 1px.
     Auf hochaufloesenden Displays bleibt dadurch eine Differenz
     von unter 1px zwischen 1px- und 1.5px-gerahmten Elementen —
     das ist der Bestand, nicht neu eingefuehrt. */
  --control-h-sm: calc(var(--control-font-size-sm) * 1.5 + 2 * var(--control-padding-y-sm) + 2px);

  /* Formular-Stufe = die EINE Feldhoehe (Paket 1: 34px statt der
     frueheren 37px-Padding-Formel). Gebraucht, seit Aktions-Buttons
     kleiner sind als die Inputs daneben: in gemischten Zeilen
     bekommt der Button-Platz diese Hoehe und zentriert den Button
     darin. Konsumenten: .cr-filter-wrapper/.cr-actions
     (change_report), .tk-filter-wrapper/.tk-actions (tracking),
     .segmented (app.css). */
  --control-h: var(--feld-hoehe);

  /* Hoehe eines Aktions-Buttons = die WF-Knopfhoehe
     --karten-feld-hoehe (32.2px), seit Paket 1 (Finance-Regel
     Block 6). Eigener Name aus demselben Grund, aus dem es
     --action-* gibt: Absicht statt Groesse.

     Das vollstaendige Rezept fuer Nicht-Bootstrap-Button-Klassen
     ist vierzeilig: font-size, padding-y, padding-x UND
     min-height: var(--action-h). Die vierte Zeile ist Pflicht, nicht
     Kosmetik: Buttons ohne Rahmen (border: none, z.B. .confirm-btn
     in toast.css) rechnen sonst 2px flacher, weil die 2x1px Rahmen
     in der Hoehe fehlen. Da Bootstrap global box-sizing: border-box
     setzt, deckelt min-height den Unterschied exakt ab. */
  --action-h: var(--karten-feld-hoehe);

  /* Extra-kompakte Tabellenzeilen-Variante (.btn-compact in
     accounts/profiles). Bewusst kleiner als --control-h-sm — die
     Zeilendichte der Kontenlisten haengt daran. */
  --control-h-compact: 24px;
}

/* ============================================================
   BEDIENELEMENT-GROESSE — Bootstrap-Buttons
   ============================================================
   Bootstrap definiert die Button-Variablen NICHT auf :root,
   sondern auf .btn selbst. Eine :root-Zuweisung wie oben beim
   Radius bliebe hier deshalb wirkungslos — die Zuweisung muss
   auf demselben Selektor stehen.

   Seit der Grundsatzentscheidung "eine Groesse fuer Aktions-
   Buttons" tragen .btn und .btn-sm dieselben Werte, deshalb eine
   gemeinsame Regel. Die frueher noetige Reihenfolge (.btn zuerst,
   .btn-sm danach, sonst haette .btn Bootstraps eigenes .btn-sm
   ueberstimmt) ist damit gegenstandslos.

   .btn-sm bleibt trotzdem in der Selektorliste stehen, statt sich
   auf .btn zu verlassen: Bootstraps eigene .btn-sm-Regel setzt die
   Variablen auf .25rem/.5rem/.875rem und liegt vor dieser Datei.
   Ohne den expliziten Eintrag gewaenne sie bei jedem Element, das
   beide Klassen traegt — und das sind die meisten Buttons im
   Projekt. Aus demselben Grund bleibt .btn-group-sm > .btn (0-2-0)
   drin; ein blosses .btn (0-1-0) verlaere dagegen.

   Die rund 300 vorhandenen .btn-sm im Markup bleiben gueltig und
   werden NICHT aufgeraeumt: die Klasse sagt weiterhin "kompakt",
   sie ist nur nicht mehr noetig, um es zu erreichen.

   Die Standalone-Seiten (graph, graph3d, graph_shared) laden
   tokens.css, aber kein Bootstrap und bringen eigene .btn-Regeln
   mit. Dort sind diese Zuweisungen folgenlos: reine Variablen
   ohne Konsument.

   btn-lg bleibt bewusst auf dem Bootstrap-Default — die Klasse
   kommt projektweit nicht vor (geprueft), eine Zielgroesse waere
   geraten. */
.btn,
.btn-group-sm > .btn,
.btn-sm {
  --bs-btn-font-size: var(--action-font-size);
  --bs-btn-padding-y: var(--action-padding-y);
  --bs-btn-padding-x: var(--action-padding-x);
  /* 1.4 gehoert zur Aktions-Stufe: 13px * 1.4 + 2*6px + 2*1px
     = exakt --karten-feld-hoehe (32.2px). Mit Bootstraps 1.5
     staende jeder Button 1.3px hoeher als die Zielhoehe. */
  --bs-btn-line-height: 1.4;
}

/* ============================================================
   LABEL-ROLLE DER SCHRIFTTREPPE
   ============================================================
   Feld-Label: 11px, versal, Gewicht 500, gedaempft, UEBER dem
   Feld mit 4px Abstand (WF-Standard "Label ueber dem Feld").
   Liegt hier statt in app.css, weil die Standalone-Seiten
   (login) die Rolle genauso brauchen — dasselbe Muster wie der
   .btn-Block oben. Mit Paket 1 (2026-08-30) ersetzt die Klasse
   .field-label, .form-label-compact und die seitenlokalen
   Label-Klassen (.js-label u.a.). */
.label-versal {
  display: block;
  font-size: var(--schrift-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* ============================================================
   PRODUKT-CHIP (Connect / Core)
   ============================================================
   EIN Muster fuer alle Produkt-Kennzeichnungen: Mandanten-
   Untermenue, Konto-Dialog, "+ Mandant hinzufuegen", Profil-Liste
   und die Mandanten-Auswahlseite nach dem Login.

   Liegt hier statt in app.css aus demselben Grund wie der
   .btn-Block und .label-versal oben: login_select.html laedt
   tokens.css, aber bewusst KEIN app.css — eine zweite Regel in
   deren <style> waere ein Klon mit garantiertem Drift.

   Masse ab 2026-08-31 kleiner als zuvor (der Produkt-Chip ist eine
   Kennzeichnung, keine Bedienflaeche — in der alten Groesse las er
   sich als Button). Die damalige Notiz, die Deckungsgleichheit mit
   .chip-mandant gelte NICHT mehr, ist ueberholt: seit 2026-09-01
   (Entscheid Milko) traegt .chip-mandant (app.css) DASSELBE Mass —
   9px Schrift, 18px Hoehe, Polster 0 6px, letter-spacing 0.04em,
   keine min-width. Beide Chips sind damit wieder deckungsgleich im
   Box-Modell und unterscheiden sich nur in der Farbfamilie. Wo sie
   nebeneinander stehen (Konto-Dialog, "+ Mandant hinzufuegen"),
   zentriert die Zeile sie weiterhin ueber align-items.

   Die Schriftgroesse liegt unterhalb der regulaeren Skala (die endet
   bei --schrift-label, 11px) und laeuft seit 2026-09-01 ueber
   --schrift-chip weiter oben in dieser Datei — vorher stand die 9
   hier literal, was mit dem zweiten Konsumenten .chip-mandant zu
   zwei Quellen geworden waere. Ein Sondermass je Ort bleibt ein
   Verstoss.

   min-width ist entfallen: die 48px haetten den kleinen Chip um
   "CORE" herum leer aufgeblaeht. Die Chips richten sich ueber die
   Spaltenlogik der jeweiligen Zeile aus, nicht ueber eine
   Mindestbreite. Gilt seit 2026-09-01 auch fuer .chip-mandant.

   Der Text kommt IMMER aus shared/produkt.py bzw. dessen
   Frontend-Spiegel (PRODUKT_ANZEIGENAME) — nie als Literal im
   Markup.

   Seit 2026-09-02 teilt sich .tenant-chip (Mandanten-Schalter im
   Seitenleisten-Fuss, static/header.html) diesen Maszstab ueber den
   Gruppen-Selektor — Format, Rundung, Laufweite und Gewicht stehen
   damit weiterhin nur EINMAL im Projekt. Der Mandanten-Chip weicht dort
   nur in drei Punkten ab, jeweils mit Begruendung an Ort und Stelle:
   Hoehe, Schriftgroesse und Versalien (er zeigt einen NAMEN, keine
   Kennzeichnung). */
.produkt-chip,
.tenant-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-control);
  font-size: var(--schrift-chip);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;   /* Farbe je Variante = Flaechenfarbe */
  white-space: nowrap;
}

.produkt-chip-connect {
  background-color: var(--produkt-connect-bg);
  border-color: var(--produkt-connect-bg);
  color: var(--produkt-connect-text);
}

.produkt-chip-core {
  background-color: var(--produkt-core-bg);
  border-color: var(--produkt-core-bg);
  color: var(--produkt-core-text);
}

/* Der Rollen-Chip .rollen-chip ist am 2026-09-02 entfallen (Entscheid
   Milko): die Rolle des angemeldeten Benutzers steht im Seitenleisten-Fuss
   jetzt als ruhige Textzeile unter dem Namen statt als gerahmter Chip
   (Regel .app-header .user-role in static/header.html). Die Klasse hatte
   danach keinen Konsumenten mehr; ihr Mass kam per Gruppen-Selektor von
   .produkt-chip, das dort unveraendert steht. */

/* ============================================================
   TABELLEN-STANDARD (.tbl-std)
   ============================================================
   Zentrale Tabellen-Klasse (Design-Standard, exakte WebFinance-Werte —
   Quellen in den Tokens oben). Seit Paket 2 "Flaechen" (Entscheid Milko
   2026-08-30, Finance-Regel Block 2) traegt sie das VOLLE Grundgeruest:
   14px Grundschrift, Finance-Zellabstaende (td 10px 12px 10px 0,
   Erstspalte 12px links), Kopf OBEN ausgerichtet, erste Inhaltsspalte
   Gewicht 500, Zahlen rechts ueber .num (app.css). Lokale Kopien dieser
   Aspekte je Seite sind ein Verstoss; seitenlokal bleiben nur echte
   Struktur-Sonderwerte (Spaltenbreiten, sticky, colgroup).
   Opt-outs: .tbl-erstspalte-normal an der Tabelle, wenn die erste
   Spalte kein Name ist (Checkbox-/Icon-Spalten); Formulartabellen
   (Eingabezeilen) nutzen Kopf + Linien, behalten aber ihre Dichte.

   Liegt seit 2026-09-03 hier statt in app.css — aus demselben Grund
   wie .btn, .label-versal und .produkt-chip oben: die Mandanten-
   Auswahlseite (login_select.html) zeigt die Mandanten als
   .tbl-std-Tabelle, laedt aber bewusst kein app.css. Regeln
   unveraendert VERSCHOBEN, nicht kopiert. Die Kopf-Filter
   (.filter-btn/.filter-header-btn im thead) bleiben in app.css: sie
   gehoeren zu App-Bedienelementen, die keine Standalone-Seite kennt.
   Kaskade geprueft: tokens.css laedt vor app.css; app.css enthaelt
   keine gleichspezifische thead-th-/tbody-td-Regel, die dadurch die
   Oberhand bekaeme. */
.tbl-std {
  border-collapse: collapse;
  font-size: var(--schrift-text); /* 14px Fliesstext/Tabelle */
}

.tbl-std thead th {
  background: var(--tbl-head-bg);
  color: var(--tbl-head-text);
  font-size: var(--tbl-head-font-size);
  font-weight: var(--tbl-head-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--tbl-head-letter-spacing);
  border-bottom: var(--tbl-head-line-w) solid var(--tbl-head-line);
  /* Alle Titel auf einer OBEREN Linie — Zusatzzeilen haengen darunter. */
  vertical-align: top;
  padding: 8px 12px 8px 0;
}
.tbl-std thead th:first-child { padding-left: 12px; }

.tbl-std tbody td {
  border-bottom: var(--line-w) solid var(--line);
  padding: 10px 12px 10px 0;
  vertical-align: middle;
}
.tbl-std tbody td:first-child { padding-left: 12px; }

/* Erste Inhaltsspalte (Name) Gewicht 500; Opt-out fuer Tabellen,
   deren erste Spalte kein Name ist. */
.tbl-std:not(.tbl-erstspalte-normal) tbody td:first-child { font-weight: 500; }

/* Kopf-Hover NUR auf sortierbaren Tabellen (Kopf-Klick hat dort eine
   Funktion; auf reinen Datentabellen waere der Hover ein falsches
   Klick-Signal — bewusste Praezisierung der Finance-Regel, im
   Umsetzungsvermerk dokumentiert). :has: die App laeuft auf Chrome. */
.tbl-std thead:has(th[data-sort]):hover th { background: var(--th-hover); }
.tbl-std thead th[data-sort] { cursor: pointer; }

/* ============================================================
   KLICKBARKEIT (.klickbar)
   ============================================================
   Klickbarkeit (Checkliste v): Optik UND Handler haengen an derselben
   Klasse — seitenlokale Hover-Regeln fuer Klickbares sind ein Verstoss.
   Fuer Tabellenzeilen greift die td-Variante (Zellen tragen dort den
   Hintergrund). Datenzeilen OHNE Klick: Hover --bg-app, kein Zeiger.

   Liegt seit 2026-09-03 hier statt in app.css (dort Block "DESIGN-
   STANDARD 2026-08-30"): die Mandanten-Auswahlseite braucht den
   Zeilen-Hover und den Fokus-Rahmen, laedt aber kein app.css. Regeln
   unveraendert verschoben. Kaskade geprueft: die einzige gleich- oder
   hoeherspezifische Hover-Regel auf einem .klickbar-Traeger in app.css
   (.status-pille-rot.klickbar:hover / .zaehler-rot.klickbar:hover)
   stand schon vorher NACH diesen Regeln und gewinnt unveraendert. */
.klickbar { cursor: pointer; }
.klickbar:hover { background-color: var(--accent-blue-bg); }
tr.klickbar:hover td { background-color: var(--accent-blue-bg); }
/* Ergaenzung 2026-09-01: Ein klickbarer Container faerbt sich NICHT,
   solange ein Element darin ueberfahren wird, das sich SELBST als
   eigenes Bedienziel ausweist. Sonst meldet die Zeile beim Hover ueber
   ein Element mit anderer Aktion ihre eigene Klickbarkeit mit, und der
   Nutzer sieht nicht, was ein Klick ausloest. Damit ist die
   Verschachtelung (klickbare Zeile + eigenes Ziel darin) ein
   definiertes Muster statt eines Regelkonflikts. Erster Nutzer: die
   Kopfzeile der Job-Karten (Aufklappen) mit Aktiv-Schalter
   (role="switch") und Trefferzahl (role="button" + .klickbar).

   Die Liste endet BEWUSST bei .klickbar und den beiden Rollen und
   nennt nicht auch button/a: die Mandanten-Zeile im Konto-Dialog
   (.acct-tenant-row.klickbar, accounts.js) traegt einen
   Papierkorb-BUTTON, und ein weiter gefasster Selektor haette dort das
   Hover-Verhalten mitgeaendert — ein Seiteneffekt auf einer Seite, die
   nicht Teil des Auftrags war. Wenn diese Zeile das Verhalten bekommen
   soll, ist das ein eigener kleiner Auftrag mit Sichtpruefung im
   Konto-Dialog.
   Ebenfalls NICHT abgedeckt: die Tabellenzeilen-Variante
   (tr.klickbar:hover td) — dort faerbt eine eigene Regel die Zellen,
   diese hier setzt nur den Hintergrund des Containers. */
.klickbar:has(:is(.klickbar, [role="switch"], [role="button"]):hover) {
  background-color: transparent;
}
.klickbar:focus-visible {
  outline: 2px solid var(--accent-blue-border);
  outline-offset: -2px;
}

/* ============================================================
   SUCHTREFFER: GETROFFENE NAMENSFORM
   ============================================================
   Sekundaertext hinter einem Suchtreffer ("Name · Kurzname: X" /
   "Alias: X"), nur wenn der Treffer nicht ueber den vollen Namen kam
   (ideen 155). Gemeinsam fuer die Grafik-Suche (graph.html,
   graph_shared.html, die nur tokens.css laden) und die Spaltenfilter
   der Beteiligungsseite. Der markierte Zustand der Grafik-Trefferliste
   (.search-result-item.highlighted) bleibt seitenlokal. Nur Tokens:
   --schrift-meta (Meta-Stufe), --ink-2 (Meta-Rolle). */
.search-result-meta { font-size: var(--schrift-meta); color: var(--ink-2); }

/* ============================================================
   SIDEBAR-BREITE
   ============================================================
   Nur die Werte, nicht die Wirkung: der Inhalts-Versatz selbst
   steht in app.css (Block "SIDEBAR-VERSATZ"). Grund fuer die
   Trennung — tokens.css laden auch Standalone-Seiten ohne
   Sidebar (login, graph, graph3d, graph_shared, und die
   Doppelnutzer change_report/tracking). Eine Variable allein
   aendert dort nichts; eine body-margin-Regel wuerde denen
   einen Leerrand in voller Sidebar-Breite (--sidebar-w)
   verpassen.

   Zuvor standen diese Definitionen im <style> von header.html
   und damit in einem Stylesheet, das header.js erst nach dem
   Laden von /header-fragment in den <head> haengt. Konsumenten
   sind .app-header (Breite) und #sidebarToggle (Position), beide
   weiterhin in header.html. Kein JS liest oder setzt diese
   Variablen — projektweit geprueft. */
:root {
  /* 2026-09-02 von 300px auf 280px verschmaelert. Gemessen brauchen der
     laengste Nav-Eintrag ("Beteiligungsstruktur") 181,43px und das
     gedeckelte Kundenlogo 200px; der Fuss mit Rollenzeile und
     Mandanten-Chip kommt auf 232,47px. Bei 280px stehen 255px
     Inhaltsbreite zur Verfuegung — alle drei passen ohne Umbruch und ohne
     Ellipse (nachgemessen: 13 Nav-Eintraege, keiner gekuerzt, alle
     einzeilig).

     Kein neuer Wert: 280px war zuvor schon der Wert der Mobile-Regel bis
     768px. Die ist mit der Umstellung wertgleich zum Grundwert geworden
     und ersatzlos entfallen; unterhalb von 375px bleibt es bei 260px. */
  --sidebar-w: 280px;
  /* Ohne Konsument: projektweit greppt nur diese Definition.
     Als Befund gemeldet, bewusst beim Umzug nicht entfernt. */
  --sidebar-w-collapsed: 72px;
}

@media (max-width: 375px) {
  :root { --sidebar-w: 260px; }   /* iPhone SE / iPod */
}