/*
* GO:BETTER — Semantikflächen (Familie A), freigegeben am 11.10.2026 im Design
* System. Jeweils die vorhandene Semantikfarbe mit fester Deckkraft. Text auf
* den Flächen in --color-positive bzw. --color-negative; gemessen laut Design
* System: Text mind. 4,65 : 1, Rahmen mind. 3,51 : 1, hell und dunkel.
* Gleiche Werte im Export: .claude/skills/go-better-design/tokens/.
*
* Die App: :root = hell, body.dark = dunkel (wie die Variablenblöcke der Seiten).
* Hoheit: Das Design System bestimmt diese Werte. Die Variablenblöcke der Seiten
* setzen keinen dieser Namen selbst (Wächter: tests/js/design_tokens_step1_test.mjs).
* Flächenregel: Semantikfläche nur mit Text, der dasselbe sagt (Bauplan,
* „Festlegungen zur Darstellung").
*/
/* Geist Mono, selbst gehostet (SIL Open Font License, frontend/fonts/OFL.txt).
Nur 400 und 500, wie im Design System. */
@font-face{font-family:'Geist';font-weight:400;font-style:normal;font-display:swap;src:url('/static/fonts/geist-400.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:500;font-style:normal;font-display:swap;src:url('/static/fonts/geist-500.woff2') format('woff2')}
@font-face{font-family:'Geist';font-weight:600;font-style:normal;font-display:swap;src:url('/static/fonts/geist-600.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:400;font-style:normal;font-display:swap;src:url('/static/fonts/geist-mono-400.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:500;font-style:normal;font-display:swap;src:url('/static/fonts/geist-mono-500.woff2') format('woff2')}
:root{
/* Maße aus dem Export (12.10.2026): Eckradius Abzeichen/Checkbox, Bedienhöhen (48 = Mindestmaß Touch) */
/* Radien (Design System, tokens/radius-border.css): 0 Tabellen/Diagramme · 2 Abzeichen · 4 Schaltfläche/Feld/Karte ·
6 Dialog/Screenshot · 999 Punkte. Keine Seite überschreibt sie (Wächter design_radien_test). */
--radius-0:0;--radius-1:2px;--radius-2:4px;--radius-3:6px;--radius-full:999px;--control-h-s:32px;--control-h-m:40px;--control-h-l:48px;
/* Abstände und Beschriftung aus dem Export (12.10.2026): Kennzahlen-Gruppen */
--space-3:12px;--space-5:24px;--space-6:32px;--space-7:48px;--type-label-track:0.08em;
/* Seitenraster (Entscheidung 10, 12.10.2026): Seitenrand 32 px, unter 720 px 20 px; Seitenleiste 240 / 200 px. */
--page-margin:32px;--sidebar-w:280px; /* Seitenleiste 280 / 240 px (Entscheidung 10, geändert 12.10.2026 nach Test) */
--font-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
--font-mono:'Geist Mono',ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
--font-numeric-features:"tnum" 1,"lnum" 1,"zero" 1; /* gleich breite Ziffern, geschlitzte Null */
/* Grundwerte (Festlegung 8, 12.10.2026): ein Grundton für alle drei Werkzeuge, Werte aus dem Export.
Seiten definieren Flächen, Rahmen und Text nicht mehr selbst. */
--color-bg:#F7F8FA;--color-bg-translucent:rgba(247,248,250,0.92);
--color-surface:#FFFFFF;--color-surface-2:#EEF0F3;
--color-border:#DEE1E6;
--color-text:#111317;
--color-neutral:#555A62;
/* Akzent: Fair Value Pro als Vorgabe; Tracker und Planner setzen ihre Produktwerte (Export, [data-product]). */
--color-product-fvp:#10C27F;--color-product-td:#3B7BFF;
--color-accent:#10C27F;--color-accent-soft:rgba(16,194,127,0.12);--color-accent-border:rgba(16,194,127,0.55);--color-accent-contrast:#0B0D10;
/* Brücke zum Bestand: Sekundärtext aus dem App-Kit (--kit-text-2). */
--text-2:#3F444B;
--color-positive:#2A7453;
--color-negative:#B8352D;
--color-positive-soft:rgba(42,116,83,0.10);
--color-positive-border:rgba(42,116,83,0.80);
--color-negative-soft:rgba(184,53,45,0.10);
--color-negative-border:rgba(184,53,45,0.80);
--color-warning-soft:rgba(158,74,18,0.10);
--color-warning-border:rgba(158,74,18,0.80);
--color-info-soft:rgba(79,95,119,0.10);
--color-info-border:rgba(79,95,119,0.80);
--color-surface-selected:#E2E5EA;
/* Aus dem Export übernommen (11.10.2026): Text der Warn- und Hinweisflächen,
Rahmen von Bedienelementen, Text auf Tinte. */
--color-warning:#9E4A12;
--color-info:#4F5F77;
--color-border-strong:#7E858F;
--color-text-inverse:#F7F8FA;
/* Beschriftungen, Sekundärtext (aus dem Export, 11.10.2026) */
--color-text-muted:#555A62;
/* Nur für deaktivierte Elemente (aus dem Export, 12.10.2026); von der 4,5:1-Regel ausgenommen. */
--color-text-disabled:#A3A8AF;
/* Akzent bzw. Produktfarbe als Schrift (aus dem Export, 11.10.2026). --color-accent-text ist der
Kalkulator-Wert; Tracker und Planner verweisen in ihrem Verweisblock auf ihren Produktwert. */
--color-accent-text:#0A7A52;
--color-product-fvp-text:#0A7A52;
/* Tracker-Produktfarbe Gold (Claude Design, 12.10.2026): beide Modi #F0B42A; im Hellen nie als Schrift. */
--color-product-pt:#F0B42A;
--color-product-pt-text:#111317;
--color-product-td-text:#2459D6;
/* Fokus (aus dem Export, 11.10.2026): 2 px Abstand in Grundfarbe, 2 px Ring in --color-focus */
--color-focus:#111317;
--focus-ring:0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
/* Tiefe (aus dem Export, 11.10.2026): Schatten nur für schwebende Ebenen — --shadow-1 Menü, Liste,
Kurzmeldung, Hinweis; --shadow-2 Dialog und Seitenpanel. --color-overlay hinter Dialogen. */
--shadow-1:0 4px 16px rgba(17,19,23,0.08), 0 0 0 1px var(--color-border);
--shadow-2:0 16px 48px rgba(17,19,23,0.14), 0 0 0 1px var(--color-border);
--color-overlay:rgba(17,19,23,0.32);
/* Diagramme (aus dem Export, 12.10.2026): Reihen 1 durchgezogen, 2 gestrichelt 6 4, 3 gepunktet 2 3,
4 strichpunkt 8 3 2 3, 5 Vergleich/Benchmark dünn; Bezug = Fairer Wert, Kaufschwelle. */
--chart-series-1:#111317;--chart-series-2:#2F5E9E;--chart-series-3:#8A6414;--chart-series-4:#6A4FA3;--chart-series-5:#7E858F;
/* Depot-Farben (Export 19.10.2026): Marken und Depotlinien, getrennt von Produkt-, Signal- und Diagrammfarben;
Linien und Marken ≥ 3 : 1 zum Grund. 1 Blau · 2 Sand · 3 Orchidee · 4 Türkis · 5 Gelb · 6 Violett · 7 Rosé · 8 Lindgrün. */
--color-depot-1:#2F5E9E;--color-depot-2:#B87A3E;--color-depot-3:#B547B0;--color-depot-4:#0E97A6;
--color-depot-5:#A88A00;--color-depot-6:#5B43B8;--color-depot-7:#D6457F;--color-depot-8:#5C9A1A;
--chart-grid:#E9EBEF;--chart-axis:#C4C9D0;--chart-reference:#7E858F;
--chart-estimate-opacity:0.55; /* Schätz-/Prognosejahre (mit „e“) */
--chart-area-opacity:0.08; /* Fläche unter Σ Vermögen und Zonenbalken der Bewertungsskala (umbenannt 13.10.2026) */
}
body.dark{
--color-bg:#0B0D10;--color-bg-translucent:rgba(11,13,16,0.92);
--color-surface:#12151A;--color-surface-2:#191D23;
--color-border:#262B33;
--color-text:#ECEDEF;
--color-neutral:#9A9FA7;
--color-product-fvp:#2EE59D;--color-product-td:#5B8CFF;
--color-accent:#2EE59D;--color-accent-soft:rgba(46,229,157,0.12);--color-accent-border:rgba(46,229,157,0.40);--color-accent-contrast:#0B0D10;
--text-2:#B9BCC0;
--color-positive:#7FC0A2;
--color-negative:#EF7B72;
--color-positive-soft:rgba(127,192,162,0.20);
--color-positive-border:rgba(127,192,162,0.65);
--color-negative-soft:rgba(239,123,114,0.20);
--color-negative-border:rgba(239,123,114,0.65);
--color-warning-soft:rgba(237,161,95,0.20);
--color-warning-border:rgba(237,161,95,0.65);
--color-info-soft:rgba(159,176,200,0.20);
--color-info-border:rgba(159,176,200,0.65);
--color-surface-selected:#232830;
--color-warning:#EDA15F;
--color-info:#9FB0C8;
--color-border-strong:#68707B;
--color-text-inverse:#0B0D10;
--color-text-muted:#9A9FA7;
--color-text-disabled:#5A6068;
--color-accent-text:#2EE59D;
--color-product-fvp-text:#2EE59D;
--color-product-pt:#F0B42A;
--color-product-pt-text:#F0B42A;
--color-product-td-text:#5B8CFF;
--color-focus:#ECEDEF;
--focus-ring:0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);
--shadow-1:0 4px 16px rgba(0,0,0,0.40), 0 0 0 1px var(--color-border);
--shadow-2:0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px var(--color-border);
--color-overlay:rgba(5,6,8,0.64);
--chart-series-1:#ECEDEF;--chart-series-2:#8FB3E6;--chart-series-3:#D8B878;--chart-series-4:#B4A1DC;--chart-series-5:#9A9FA7;
--color-depot-1:#8AA8F8;--color-depot-2:#C9A27A;--color-depot-3:#D88FD8;--color-depot-4:#3FD0DA;
--color-depot-5:#E8DC50;--color-depot-6:#A88CF5;--color-depot-7:#F5A6D0;--color-depot-8:#A6D85A;
--chart-grid:#1E2229;--chart-axis:#3A4049;--chart-reference:#68707B;
}
/* Brücke zum Bestand: Altnamen lesen die System-Token (in :root und body.dark, damit Dunkel greift). */
:root, body.dark{--text-4:var(--color-text-muted);--border-light:var(--color-border);}
/* Tarif-Abzeichen GO · PRO · MAX (entschieden 11.10.2026, Familie B): eine Quelle
für alle Seiten. GO nur Schrift, PRO mit Umriss, MAX gefüllt in Tinte. Geist Mono,
Großbuchstaben, +8 % Laufweite, Radius 2. Nie anklickbar.
GO in --color-text-muted (Design System, Abschnitt 6). Stufe als Klasse t-free | t-pro | t-premium. */
.tarif-abz{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:500;line-height:1.4;
letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:1px 6px;border-radius:var(--radius-1);
border:1px solid transparent;background:transparent;color:var(--color-text);cursor:default;pointer-events:none}
.tarif-abz.t-free{padding-left:0;padding-right:0;color:var(--color-text-muted)}
.tarif-abz.t-pro{border-color:var(--color-border-strong)}
.tarif-abz.t-premium{background:var(--color-text);border-color:var(--color-text);color:var(--color-text-inverse)}
/* Neutrales Abzeichen (Design System, Badge „neutral“; Schrift nach der Abzeichen-Regel):
Kennung oder Zustand ohne Aussage über Daten. Rahmen --color-border, Text --color-text-muted. */
.abz{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:500;line-height:1.4;
letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:1px 6px;border-radius:var(--radius-1);
border:1px solid var(--color-border);background:transparent;color:var(--color-text-muted)}
/* Links (Design System, readme „Hover“): Schrift --color-text, Unterstreichung 1 px mit 4 px Abstand —
nie Produktfarbe. Grundregel für Links ohne eigene Farbe (sonst Browser-Blau). */
a{color:var(--color-text);text-decoration-thickness:1px;text-underline-offset:4px}
/* Tastaturfokus (Design System, tokens.css des Exports): Ring statt Browser-Umriss. Den Radius des
Exports (radius-2) setzen wir hier nicht: runde Knöpfe und Kreise behalten ihre Form. */
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Kontrollkästchen, app-weit (Claude Design, 12.10.2026; „überall“ entschieden 12.10.2026): 14×14, --radius-1,
Rahmen 1px --color-border-strong, leer transparent; angehakt Fläche und Rahmen --color-text, Häkchen
--color-text-inverse; Fokus --focus-ring. Klickfläche: die ganze Zeile (label). */
input[type="checkbox"]{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:14px;height:14px;display:inline-grid;
place-content:center;vertical-align:middle;border:1px solid var(--color-border-strong);border-radius:var(--radius-1);
background:transparent;cursor:pointer}
input[type="checkbox"]::before{content:"";width:8px;height:8px;background:var(--color-text-inverse);transform:scale(0);
clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
input[type="checkbox"]:checked{background:var(--color-text);border-color:var(--color-text)}
input[type="checkbox"]:checked::before{transform:scale(1)}
input[type="checkbox"]:focus-visible{outline:none;border-color:var(--color-text);box-shadow:var(--focus-ring)}
/* Optionsfeld, app-weit (Export 12.10.2026, components/forms/Radio): 14×14, --radius-full, Rahmen 1px
--color-border-strong, leer transparent; gewählt Rahmen und Punkt 6 px in --color-text; Fokus --focus-ring.
Immer in einer Gruppe mit sichtbarer Legende, Klickfläche die ganze Zeile. */
input[type="radio"]{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:14px;height:14px;display:inline-grid;
place-content:center;vertical-align:middle;border:1px solid var(--color-border-strong);border-radius:var(--radius-full);
background:transparent;cursor:pointer}
input[type="radio"]::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-text);transform:scale(0)}
input[type="radio"]:checked{border-color:var(--color-text)}
input[type="radio"]:checked::before{transform:scale(1)}
input[type="radio"]:focus-visible{outline:none;border-color:var(--color-text);box-shadow:var(--focus-ring)}
/* Deaktiviert (Export 12.10.2026, Checkbox und Radio): leer Fläche --color-surface-2, Rahmen --color-border;
Kästchen angehakt Fläche und Rahmen --color-text-disabled, ✓ --color-text-inverse; Optionsfeld gewählt Rahmen und
Punkt --color-text-disabled; Beschriftung --color-text-disabled. */
input[type="checkbox"]:disabled,input[type="radio"]:disabled{background:var(--color-surface-2);border-color:var(--color-border);cursor:not-allowed}
input[type="checkbox"]:disabled:checked{background:var(--color-text-disabled);border-color:var(--color-text-disabled)}
input[type="radio"]:disabled:checked{border-color:var(--color-text-disabled)}
input[type="radio"]:disabled::before{background:var(--color-text-disabled)}
label:has(> input[type="checkbox"]:disabled),label:has(> input[type="radio"]:disabled){color:var(--color-text-disabled);cursor:not-allowed}
/* Schrift (Festlegung 7, 12.10.2026): Text in Geist 400/500/600, nie fetter als 600. Zahlen in Geist Mono mit
Tabellenziffern in Tabellen, Kennzahlen, Eingabefeldern, Achsen, Abzeichen, Legenden und Tooltip-Werten;
Zahlen im Fließtext bleiben in Geist. Spalten mit Zahlen tragen .right bzw. .num. */
/* iOS Safari vergrößert Text sonst eigenmächtig (Text-Autosizing) — die Kopfleiste war dadurch auf Startseite,
Kalkulator und Planner größer als im Tracker, der das als einzige Seite abschaltete (13.10.2026). Eine Regel für alle. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
b,strong{font-weight:600}
/* hidden gilt immer, auch gegen display aus Klassenregeln (z. B. .pl-sec{display:flex}); Fehler in #1118:
die Einstiegsplan-Maske war trotz hidden offen. Wächter: tests/js/hidden_sichtbarkeit_test.mjs (Browser). */
[hidden]{display:none !important}
/* Kennzahlen Regular, nicht fett — die Zahl wirkt durch Größe (readme, Typografie). */
.num,td.right,th.right,td.num,
.kpi-value,.kpi-val,.zr-kpi-val,.cmp-val,.stat-value,.depot-stat-val,
input[type="number"],input[inputmode="decimal"],input[inputmode="numeric"]{font-family:var(--font-mono);font-feature-settings:var(--font-numeric-features)}
/* Normale Tabellen (Festlegung 3, Regel-README §7, 13.10.2026): Zellen 14 px, Kopf als Label (Mono 11, 400,
Versalien, Laufweite --type-label-track, gedämpft). Gleich auf allen Breiten — unter 720 px scrollt der
Tabellenrahmen (.gb-tbl-scroll), es wird nichts verkleinert. Dichte Tabellen (.tk-tbl, Importvorschau,
Lot-Editor) bleiben bei 12 px und stehen nicht in dieser Liste. Die Seiten setzen hier keine Schriftgrößen. */
.cmp-tbl,.cmp-cf-tbl,.alloc-table,.zr-table,.ep-table,.sens-table,.qc-cmp,.doc-table{font-size:14px;line-height:1.4}
:is(.cmp-tbl,.cmp-cf-tbl,.alloc-table,.zr-table,.ep-table,.sens-table,.qc-cmp,.doc-table) th{font-family:var(--font-mono);
font-size:11px;line-height:1.4;font-weight:400;text-transform:uppercase;letter-spacing:var(--type-label-track);color:var(--color-text-muted)}
.ep-table input{font-size:14px}
/* Kennzahlwerte (Daten L, 13.10.2026): Mono 28 / 1,1 / 400 / −2 %, auf allen Breiten — auch in der Kennzahl-Zeile
des Kalkulators (Pro und Minimal, Entscheidung 14). Die kompakte Reihe „Relative Bewertung“ (.five-col) bleibt bei
15 px; Admin hat eigene Karten. */
.kpi-value,.kpi-val:not(.text),.zr-kpi-val,.cmp-val{font-size:28px;line-height:1.1;font-weight:400;letter-spacing:-0.02em}
/* App-Footer (Entscheidung 9 und 10, 12.10.2026): eine Zeile am Seitenende, volle Fensterbreite ohne Maximalbreite,
Links ab dem Seitenrand (dieselbe Kante wie Werkzeugtitel und Seitenleiste), nicht fixiert. Inhalt aus
frontend/app-footer.html ({{APP_FOOTER}}, eingesetzt in api._serve_html). Vertragslinks in --color-text. */
.app-footer{position:relative;z-index:210;background:var(--color-bg);border-top:1px solid var(--color-border)}
.app-footer-in{box-sizing:border-box;min-height:var(--control-h-l);padding:14px var(--page-margin);
display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-family:var(--font-sans);font-size:13px;line-height:1.5;font-weight:400}
.app-footer a{color:var(--color-text-muted);text-decoration:none;border-radius:var(--radius-1)}
.app-footer a.app-footer-vertrag{color:var(--color-text)}
@media (hover:hover){.app-footer a:hover{color:var(--color-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}}
.app-footer a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Kennzahlkarten unter 720 px (12.10.2026, alle Werkzeuge gleich): eine Karte pro Zeile über die volle Breite,
Abstand 12 px; Werte, Schrift und Innenabstand wie auf breiten Bildschirmen (keine Handy-Verkleinerung).
:root erhöht die Spezifität, weil die Seiten ihr Raster nach tokens.css setzen. */
@media (max-width:719px){:root .kpi-grid,:root .kpi-row,:root .zr-kpi-grid{grid-template-columns:1fr;gap:12px}}
/* Die beiden Vertragslinks sind eine Gruppe, die nie getrennt umbricht. */
.app-footer-vertraege{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:8px 20px}
/* Unter 720 px (geändert 12.10.2026): fließende, umbrechende Zeile, Abstand 4 / 16 px, jeder Link min. 24 × 24 px
Trefferfläche (WCAG 2.5.8); die Vertragslinks bilden die eigene letzte Zeile. Padding 12 20 plus Safe Area. */
@media (max-width:719px){
.app-footer-in{gap:4px 16px;padding:12px var(--page-margin) calc(12px + env(safe-area-inset-bottom))}
.app-footer a{display:inline-flex;align-items:center;min-height:24px;min-width:24px}
.app-footer-vertraege{flex-basis:100%;gap:4px 16px}
}
/* Bewegung über Zeit (Festlegung 6, 12.10.2026): Signalfarbe nur zusammen mit ▲ / ▼ — Kurs heute, Rendite, G/V,
Veränderung zwischen zwei Daten. Alles ohne Zeitbezug (Cashflows, Erträge/Kosten, Abweichung vom Ziel, Abstand zum
Fairen Wert, ROIC − WACC) steht in Textfarbe. 0 bleibt neutral (±0,0 %). Der Pfeil kommt aus dem CSS, damit keine
Stelle ihn vergessen kann; das Vorzeichen steht im Text. */
/* !important: Pfeil und Farbe gehören zusammen; eine Kontextregel (z. B. .kpi-val{color}) darf die Farbe nicht still
überschreiben, sonst stünde ▲ in Textfarbe. */
.mv-pos{color:var(--color-positive)!important}
.mv-neg{color:var(--color-negative)!important}
.mv-pos::before,.mv-neg::before{font-family:var(--font-mono);font-size:.75em;margin-right:.3em;vertical-align:.08em}
.mv-pos::before{content:"▲"}
.mv-neg::before{content:"▼"}
/* Rückmeldungen (12.10.2026): Erfolg in Textfarbe mit ✓, Fehler mit ✕, Prüfhinweis mit ! — Fehler und Hinweis in
--color-warning (Regel-README: „Prüfhinweis und Fehler, immer mit ! oder ✕“). Nie Signalfarbe; die gehört der Bewegung
über Zeit. Das Zeichen kommt aus dem CSS, damit keine Meldung es vergisst. */
.fb-ok{color:var(--color-text)}
.fb-err,.fb-warn{color:var(--color-warning)}
.fb-ok::before{content:"✓\00a0"}
.fb-err::before{content:"✕\00a0"}
.fb-warn::before{content:"!\00a0"}
/* Legendensymbol einer Linie (Regel-README §8, 12.10.2026): 18 px Linienstück in Farbe, Strichstärke und Muster der
Linie, als Inline-SVG (stroke-dasharray trifft die Muster 6 4, 2 3, 8 3 2 3 genau; CSS dashed nicht). */
.leg-line{display:inline-block;flex:none;width:18px;height:8px;overflow:visible;vertical-align:middle}
/* Depot-Marke (19.10.2026): 18 × 10, Linienstück 2 px in Depot-Farbe und Muster (GBLegend.depotMark). */
.leg-mark{display:inline-block;flex:none;width:18px;height:10px;vertical-align:middle}
/* Diagramm-Tooltip (Ludmila 14.10.2026): Geist, Zahlen tabular-nums, Fläche und Rahmen wie .gb-tip; Verhalten in
header.js (GBChartTip, eine Einstellung für alle Chart.js-Diagramme). Linienstück bzw. Quadrat wie in der Legende. */
.gb-charttip{position:absolute;z-index:100000;pointer-events:none;opacity:0;transition:opacity .1s;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2);box-shadow:var(--shadow-1);padding:8px 10px;max-width:320px;font-family:var(--font-sans);font-size:12px;line-height:1.45;color:var(--color-text-muted);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.gb-charttip.an{opacity:1}
.gb-charttip-t{color:var(--color-text);font-weight:500}
.gb-charttip-z{display:flex;align-items:center;gap:6px;white-space:nowrap}
.gb-charttip-z.is-betont{font-weight:500} /* Hauptaussage eines Diagramms (Reihe mit _betont, z. B. „Fairer Wert (heute)“) */
.gb-charttip-n{font-size:11px}
.gb-charttip .leg-sq{display:inline-block;flex:none;width:8px;height:8px;border-radius:var(--radius-1)}
/* Schlusstext (Keine Anlageberatung, Datenhoheit, Methodik) — ein Baustein für Kalkulator, Tracker und Planner
(Ludmila 18.10.2026): Linie über die Inhaltsbreite, 24 px darunter der Text (max. 680 px, Body S, gedämpft),
48 px Abstand nach oben und zur Fußzeile. Im Druck des Kalkulators ausgeblendet (Text steht im Seitenfuß). */
.page-hint{max-width:1600px;font-size:13px;line-height:1.5;color:var(--color-text-muted);margin:48px 0;padding-top:24px;border-top:1px solid var(--color-border)}
.page-hint p{margin:0;max-width:680px}
/* Seitenraster der Werkzeuge (Entscheidung 10): volle Fensterbreite, Seitenrand --page-margin, kein zentrierter Körper. */
@media (max-width:1099px){:root{--sidebar-w:240px}}
@media (max-width:719px){:root{--page-margin:20px}}
/* Seitenkopf: gleiche Komponente in allen drei Werkzeugen, oben links am Seitenrand, 24 px unter der Navigation. */
.tool-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding:var(--space-5) 0 0;margin:var(--app-nav-h,50px) 0 var(--space-5)} /* Seitenrand gibt der umgebende Rahmen */
.tool-hd-txt{display:flex;flex-direction:column;gap:8px;min-width:0}
.tool-hd-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;line-height:1.4;
letter-spacing:var(--type-label-track);text-transform:uppercase;color:var(--text-2)}
.tool-hd-label::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-accent);flex:none}
.tool-hd h1{margin:0;font-size:26px;font-weight:500;letter-spacing:-0.02em;line-height:1.2;color:var(--color-text)}
/* Sofort-Tooltip ⓘ (Festlegung 5, 12.10.2026) — ein Baustein für alle Seiten, Verhalten in ui.js.
Auslöser: „i“ in Mono 11 im 16-px-Kreis, Rahmen --color-border-strong, Zeichen --color-text-muted;
Trefferfläche 24 px, Touch 44 px (unsichtbares ::before). Tabellenköpfe tragen den Kreis als ::after.
Text-transform:none, damit die Großschreibung einer Beschriftung das „i“ nicht zu „I“ macht. */
.tip-i,.tk-tbl th[data-tip]::after{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
width:16px;height:16px;border:1px solid var(--color-border-strong);border-radius:var(--radius-full);background:none;
font:400 11px/1 var(--font-mono);color:var(--color-text-muted);text-transform:none;letter-spacing:0;font-style:normal;
vertical-align:middle;user-select:none;-webkit-user-select:none}
.tip-i{position:relative;cursor:help;margin-left:4px}
.tip-i::before{content:"";position:absolute;inset:-4px}
@media (pointer:coarse){.tip-i::before{inset:-14px}}
.tip-i[aria-describedby~="gbTip"]{color:var(--color-text)}@media (hover:hover){.tip-i:hover{color:var(--color-text)}}
.tk-tbl th[data-tip]{cursor:help}
.tk-tbl th[data-tip]::after{content:"i";margin-left:4px}
/* Fläche: --color-surface, --shadow-1, --radius-2, Padding 10 12, max. 280 px, kein Pfeil. Erklärtexte sind
Fließtext → Geist 13 / 1,45 in --color-text, ausdrücklich gesetzt (nicht geerbt: im Tabellenkopf stünde sonst Mono).
Mono nur für reine Werte, etwa im Diagramm-Tooltip (Chart.js), nie für den Erklärsatz. */
/* Ebene über allem, auch über Dialogen (99998) und Kurzmeldungen (99999) — sonst liegt das ⓘ im Dialog verdeckt.
Wächter: tests/js/tooltip_ebene_test.mjs. */
.gb-tip{position:fixed;left:0;top:0;z-index:100000;box-sizing:border-box;max-width:min(280px,calc(100vw - 16px));
padding:10px 12px;background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-1);
border-radius:var(--radius-2);font-family:var(--font-sans);font-size:13px;line-height:1.45;font-weight:400;
font-style:normal;text-transform:none;letter-spacing:normal;text-align:left;white-space:normal;
overflow-wrap:break-word;pointer-events:none}
.gb-tip[hidden]{display:none}
.gb-tip-sub{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--color-text-muted)}
/* Aufstellung im Tooltip (Entwurf „Tracker Herkunft Teile“, 28.10.2026): je Teil Name und Betrag (Mono) in einer Zeile, darunter
die Herkunft 12 px gedämpft (✎ bei „von Hand“), nach einer Linie die Summe in 500. Gebaut in ui.js (_tipAufstellung). */
.gb-tip-ag{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px}
.gb-tip-ag-b{text-align:right;font-family:var(--font-mono);font-feature-settings:var(--font-numeric-features);white-space:nowrap}
.gb-tip-ag-h{grid-column:1/-1;display:flex;align-items:center;gap:4px;margin:0 0 6px;font-size:12px;line-height:1.4;color:var(--color-text-muted)}
.gb-tip-ag-h svg{flex:none}
.gb-tip-ag-hr{grid-column:1/-1;border-top:1px solid var(--color-border);margin:2px 0 6px}
.gb-tip-ag-s{font-weight:500}
.gb-tip--zeilen{white-space:pre-line;max-width:min(360px,calc(100vw - 16px))}
/* Namen (Depotnamen, Ludmila 19.10.2026, Entscheidung 26): Umbruch nur an Wortgrenzen, höchstens zwei Zeilen, dann „…“;
ein Wort, das nicht in die Spalte passt, endet in „…“, nie zerschnitten. Einzeilig mit .gb-name--1. Gebaut von
FVP.nameHtml (ui.js); der volle Name steht beim Überfahren/Antippen im Tooltip, nur wenn gekürzt. */
.gb-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-width:0;
max-width:100%;overflow-wrap:normal;word-break:normal;hyphens:manual;-webkit-hyphens:manual}
.gb-name--1{-webkit-line-clamp:1;line-clamp:1}
.gb-name{white-space:normal;text-align:left}
/* Eingepasst (ui.js _nameEinpassen): Wörter jenseits der letzten Zeile ausgeblendet, das letzte sichtbare trägt das „…“. */
.gb-name--gepasst{display:block;-webkit-line-clamp:none;line-clamp:none}
.gb-name .gb-name-w--weg{display:none}
.gb-name-w--mehr::after{content:'…'}
/* In Tabellen eine feste Höchstbreite: sonst machte ein langes Wort die Spalte so breit wie das Wort. */
td .gb-name,th .gb-name{max-width:16em}
.gb-name-w{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.gb-tip--name{max-width:min(420px,calc(100vw - 16px))}
/* Reiter (Festlegung 4, 12.10.2026) — drei Varianten, eine Quelle für alle Seiten. Ausgewählt trägt die Schrift den
Zustand (Textfarbe 500; der Akzent hat hell nur 2,2 : 1), dazu die 2-px-Linie bzw. der Rahmen in Produktfarbe.
.ui-tabs--line Bereiche einer Seite (Kalkulator, Hilfe, Konto): 40 px, Padding 0 14, Hover --color-surface-2.
.ui-tabs--seg Ansichten derselben Daten (Tracker): Behälter --color-surface mit Rahmen, Padding 3; Eintrag 13 px,
Padding 7 12, ausgewählt --color-surface-selected.
.ui-tabs--range Zeiträume im Diagramm (1J … Max): Mono 11, Padding 5 9, ausgewählt 1 px Rahmen in Produktfarbe. */
.ui-tab{font-family:var(--font-sans);font-weight:400;color:var(--color-text-muted);background:none;border:none;margin:0;
cursor:pointer;white-space:nowrap;box-sizing:border-box;text-transform:none;letter-spacing:normal}
@media (hover:hover){.ui-tab:hover{color:var(--color-text)}}
.ui-tab.active{color:var(--color-text);font-weight:500}
.ui-tab:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ui-tab:disabled,.ui-tab[aria-disabled="true"]{color:var(--color-text-disabled);background:none;cursor:default}
.ui-tab[hidden]{display:none}
.ui-tabs--line{display:flex;gap:4px;border-bottom:1px solid var(--color-border);overflow-x:auto;scrollbar-width:none}
.ui-tabs--line::-webkit-scrollbar{display:none}
.ui-tabs--line::-webkit-scrollbar{display:none}
.ui-tabs--line .ui-tab{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 14px;font-size:14px;
border-radius:var(--radius-2) var(--radius-2) 0 0}
@media (hover:hover){.ui-tabs--line .ui-tab:hover{background:var(--color-surface-2)}}
.ui-tabs--line .ui-tab.active{box-shadow:inset 0 -2px 0 var(--color-accent)}
.ui-tabs--line .ui-tab.active:focus-visible{box-shadow:inset 0 -2px 0 var(--color-accent),var(--focus-ring)}
.ui-tabs--seg{display:inline-flex;gap:4px;padding:3px;background:var(--color-surface);border:1px solid var(--color-border);
border-radius:var(--radius-2);max-width:100%;overflow-x:auto;scrollbar-width:none;box-sizing:border-box}
.ui-tabs--seg::-webkit-scrollbar{display:none}
.ui-tabs--seg .ui-tab{flex:none;padding:7px 12px;font-size:13px;line-height:1.3;border-radius:3px; /* Spezifikation Reiter: Radius 3 */}
.ui-tabs--seg .ui-tab.active{background:var(--color-surface-selected);box-shadow:inset 0 -2px 0 var(--color-accent)}
/* Deaktivierter Umschalter (Planner-Gerüst 6, z. B. Rebalancing beim Bearbeiten): Werte nach „Deaktivierte
Auswahlelemente“ — Fläche --color-surface-2, Rahmen --color-border, Text --color-text-disabled, not-allowed; das gewählte
Segment bleibt nicht blass-gewählt stehen. */
.ui-tabs--seg:has(.ui-tab:disabled){background:var(--color-surface-2);border-color:var(--color-border)}
.ui-tabs--seg .ui-tab:disabled,.ui-tabs--seg .ui-tab.active:disabled{background:none;box-shadow:none;color:var(--color-text-disabled);cursor:not-allowed}
.ui-tabs--range{display:inline-flex;gap:4px}
.ui-tabs--range .ui-tab{padding:5px 9px;font-family:var(--font-mono);font-size:11px;line-height:1.3;
font-feature-settings:var(--font-numeric-features);border:1px solid transparent;border-radius:3px; /* Spezifikation Reiter: Radius 3 */}
.ui-tabs--range .ui-tab.active{border-color:var(--color-accent);font-weight:400}
@media (pointer:coarse){.ui-tabs--line .ui-tab{height:44px}.ui-tabs--seg .ui-tab,.ui-tabs--range .ui-tab{min-height:44px}}
/* Aufklappmenü (Festlegung 5, 12.10.2026) — eine Quelle für Depot-, Zeilen-, Konto-, Teilen- und Verlaufsmenü.
Wie die Liste der Auswahl: --color-surface, --shadow-1, Radius --radius-2, Padding 4, min. 200 px. Einträge 36 px,
Padding 0 10, Radius 3, Hover --color-surface-2, aktueller Eintrag ✓ (.gb-menu-check). Gruppen trennt 1 px
--color-border. Entfernen-Einträge zuletzt, --color-warning mit ✕ (.danger), immer mit Rückfrage. Lage für alle Menüs
über FVP.menueLage (ui.js): am body, fest am Fenster, unten oder oben, nie abgeschnitten. Öffnen regelt die Stelle. */
.gb-menu{box-sizing:border-box;min-width:200px;padding:4px;background:var(--color-surface);border:none;
border-radius:var(--radius-2);box-shadow:var(--shadow-1);font-family:var(--font-sans);font-size:13px;line-height:1.35;
color:var(--color-text);text-align:left}
.gb-menu-item,.gb-menu>button,.gb-menu>a{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;
min-height:36px;margin:0;padding:0 10px;border:none;background:transparent;border-radius:3px; /* Spezifikation Aufklappmenü: Eintrag Radius 3 */
font:inherit;color:var(--color-text);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
@media (hover:hover){.gb-menu-item:hover,.gb-menu>button:hover,.gb-menu>a:hover{background:var(--color-surface-2)}}
.gb-menu-item:focus-visible,.gb-menu>button:focus-visible,.gb-menu>a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.gb-menu .danger{color:var(--color-warning)}
/* Gesperrter Eintrag (Regel-README, Aufklappmenü, festgelegt 18.10.2026): sichtbar an seiner Stelle, Text
--color-text-disabled, keine Hover-Fläche, Zeiger default, aria-disabled (Fokus bleibt stehen, Klick ohne Wirkung, Menü
bleibt offen). Der Grund steht als Unterzeile im Eintrag (.gb-menu-grund, 12 / 1,4, gedämpft, ein Satz), nicht im ⓘ,
und ist über aria-describedby verknüpft; der Eintrag wächst dafür über 36 px. */
.gb-menu [aria-disabled="true"]{color:var(--color-text-disabled);background:none;cursor:default}@media (hover:hover){.gb-menu [aria-disabled="true"]:hover{color:var(--color-text-disabled);background:none;cursor:default}}
.gb-menu [aria-disabled="true"]:has(.gb-menu-grund){flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;height:auto;min-height:36px;padding-top:6px;padding-bottom:6px}
.gb-menu-grund{font-size:12px;line-height:1.4;color:var(--color-text-muted);white-space:normal}
/* Eintrag mit Beschreibung als zweiter Zeile (Entscheidung 39, Entwurf „Wege E39“, 27.10.2026): nur dort, wo ein Eintrag
einen eigenen Weg von einem gleichnamigen unterscheidet; derselbe Unterzeilen-Baustein wie beim gesperrten Eintrag. */
.gb-menu .gb-menu-zwei{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;height:auto;min-height:36px;padding-top:6px;padding-bottom:6px;max-width:280px}
.gb-menu-sep{height:1px;background:var(--color-border);margin:4px -4px}
.gb-menu-lbl{font-family:var(--font-mono);font-size:11px;line-height:1.4;letter-spacing:var(--type-label-track);
text-transform:uppercase;color:var(--color-text-muted);padding:6px 10px 2px}
.gb-menu-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-menu-meta{color:var(--color-text-muted)}
.gb-menu-check{width:14px;flex:none;text-align:right;color:var(--color-text)}
.gb-menu-empty{padding:8px 10px;color:var(--color-text-muted)}
@media (pointer:coarse){.gb-menu-item,.gb-menu>button,.gb-menu>a{min-height:44px}}
/* Kalender (Festlegung 5, 12.10.2026) — Flatpickr in Tracker und Planner, Verhalten in ui.js (FVP.initDatePickers).
Fläche --color-surface, --shadow-1, --radius-2, Padding 12, kein Pfeil. Kopf: Monat Geist 15 / 500, vor/zurück als
tertiäre Schaltflächen 32 px. Woche ab Montag, Wochentage Mo … So in Mono 11 gedämpft. Tage Mono 13 mit
Tabellenziffern, Zelle 36 px (Touch 44), Radius --radius-2. Heute: Rahmen 1 px --color-border-strong. Gewählt:
Fläche --color-text, Ziffer --color-text-inverse. Zeitraum dazwischen --color-surface-selected. Nicht wählbar und
andere Monate --color-text-disabled. !important, weil flatpickr.min.css dieselben Selektoren setzt. */
.flatpickr-calendar{--cal-cell:36px;box-sizing:content-box!important;width:calc(7 * var(--cal-cell))!important;padding:12px!important;
background:var(--color-surface)!important;border:none!important;border-radius:var(--radius-2)!important;box-shadow:var(--shadow-1)!important;
font-family:var(--font-sans)!important;color:var(--color-text)!important}
@media (pointer:coarse){.flatpickr-calendar{--cal-cell:44px}}
.flatpickr-calendar:before,.flatpickr-calendar:after{display:none!important}
.flatpickr-months{align-items:center;margin-bottom:8px}
.flatpickr-months .flatpickr-month{height:32px!important;background:none!important;color:var(--color-text)!important;fill:var(--color-text)!important}
.flatpickr-current-month{position:static!important;width:auto!important;left:auto!important;height:32px!important;padding:0!important;
display:flex!important;align-items:center;justify-content:center;gap:6px;font-size:15px!important;font-weight:500!important;color:var(--color-text)!important}
.flatpickr-current-month .flatpickr-monthDropdown-months,.flatpickr-current-month input.cur-year{font:inherit!important;color:var(--color-text)!important;
background:transparent!important;margin:0!important;padding:0 2px!important}
.flatpickr-current-month input.cur-year{font-family:var(--font-mono)!important;font-feature-settings:var(--font-numeric-features)}
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background:var(--color-surface)!important;color:var(--color-text)!important}
.flatpickr-current-month .numInputWrapper span{display:none!important}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{position:static!important;flex:none;display:flex!important;
align-items:center;justify-content:center;width:32px!important;height:32px!important;padding:0!important;border-radius:var(--radius-2);
color:var(--color-text-muted)!important;fill:var(--color-text-muted)!important}
@media (hover:hover){.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{background:var(--color-surface-2)!important;color:var(--color-text)!important}}
.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:12px!important;height:12px!important;fill:currentColor!important}
@media (hover:hover){.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:currentColor!important}}
.flatpickr-weekdays{height:24px!important;background:none!important}
.flatpickr-weekdaycontainer{width:100%}
span.flatpickr-weekday{background:none!important;color:var(--color-text-muted)!important;font-family:var(--font-mono)!important;font-size:11px!important;font-weight:400!important}
.flatpickr-days,.dayContainer{width:calc(7 * var(--cal-cell))!important;min-width:calc(7 * var(--cal-cell))!important;max-width:calc(7 * var(--cal-cell))!important;
background:none!important;border:none!important}
.flatpickr-day{flex-basis:var(--cal-cell)!important;max-width:var(--cal-cell)!important;width:var(--cal-cell)!important;height:var(--cal-cell)!important;
line-height:calc(var(--cal-cell) - 2px)!important;margin:0!important;border:1px solid transparent!important;border-radius:var(--radius-2)!important;
background:transparent!important;color:var(--color-text)!important;font-family:var(--font-mono)!important;font-size:13px!important;
font-feature-settings:var(--font-numeric-features)!important;box-shadow:none!important}
.flatpickr-day:focus{background:var(--color-surface-2)!important;outline:none}@media (hover:hover){.flatpickr-day:hover{background:var(--color-surface-2)!important;outline:none}}
.flatpickr-day:focus-visible{box-shadow:var(--focus-ring)!important}
.flatpickr-day.today{border-color:var(--color-border-strong)!important}
.flatpickr-day.inRange{background:var(--color-surface-selected)!important;box-shadow:none!important}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected:focus{background:var(--color-text)!important;border-color:var(--color-text)!important;color:var(--color-text-inverse)!important}@media (hover:hover){.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover{background:var(--color-text)!important;border-color:var(--color-text)!important;color:var(--color-text-inverse)!important}}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed{color:var(--color-text-disabled)!important;background:transparent!important}@media (hover:hover){.flatpickr-day.flatpickr-disabled:hover{color:var(--color-text-disabled)!important;background:transparent!important}}
/* Tabellen unter 720 px (12.10.2026, Variante A, alle Tabellen in Tracker und Planner): jede Tabelle steht in einem
eigenen Rahmen .gb-tbl-scroll, der waagerecht scrollt — nie die Seite, keine eigene Höhe. Spalten nehmen die Breite
ihres Inhalts (table-layout:auto, max-content), nichts bricht um oder überlappt die Nachbarspalte; die erste Spalte
bleibt links stehen. Vorher liefen in Cashflow, Erträge & Kosten und Pro Jahr Köpfe und Beträge ineinander
(„Σ EINZAHLUNGAUSZAHLUNG“, „-2.344,61 €73,47 €“), weil feste Prozentbreiten die Spalten zu schmal machten.
Wächter: tools/handy_check.mjs (misst Überlappen, Abschneiden und umbrochene Beträge am Text). */
/* Auf allen Breiten: passt eine Tabelle nicht (z. B. Renditeübersicht mit vielen Depots in 14 px), scrollt ihr
Rahmen waagerecht, statt über die Karte hinauszulaufen. */
/* position:relative: absolut gesetzte Inhalte (z. B. .sr-only „Aktionen“ im Tabellenkopf) beziehen sich auf den Rahmen und
werden mit ihm beschnitten — sonst verbreitern sie die ganze Seite (Watchlist/Einstiegsplan, 13.10.2026). */
.gb-tbl-scroll{overflow-x:auto;max-width:100%;position:relative}
@media (max-width:719px){
.gb-tbl-scroll{overflow-x:auto;max-height:none;-webkit-overflow-scrolling:touch;max-width:100%}
.gb-tbl-scroll > table{width:max-content!important;min-width:100%!important;table-layout:auto!important}
.gb-tbl-scroll > table th,.gb-tbl-scroll > table td{white-space:nowrap}
.gb-tbl-scroll > table col{width:auto!important}
/* Fläche der festen Spalte = Fläche dahinter: in Karten --color-surface (Standard), auf dem Seitengrund setzt die
Seite --tbl-fest-bg (z. B. flache Planner-Module, 13.10.2026) — sonst stünde eine weiße Spalte auf grauem Grund. */
.gb-tbl-scroll > table tr > :first-child{position:sticky;left:0;z-index:1;background:var(--tbl-fest-bg, var(--color-surface));box-shadow:inset -1px 0 0 var(--color-border)}
.gb-tbl-scroll > table thead tr > :first-child{z-index:3}
/* Textfelder in der Zeile wachsen mit ihrem Inhalt, statt ihn abzuschneiden (mindestens 160 px). */
.gb-tbl-scroll > table input[type=text]{field-sizing:content;min-width:160px}
}
/* Neutraler Zustand, bis der Server die Sitzung entschieden hat (auth.js/header.js, Ludmila 14.10.2026):
weder Anmeldefenster noch Gast- oder PRO-Ansicht; die Kopfleiste zeigt dann keinen Kontobereich. */
html.auth-pruefen #authGate{display:none!important}
html.auth-pruefen body > :not(.app-nav):not(script):not(style):not(link){visibility:hidden}
/* Ladeanzeige (ColonLoader aus dem Design System, components/brand/ColonLoader.jsx): pulsierender Doppelpunkt in
--color-text, 1,4 s, unterer Punkt 0,35 s versetzt, Deckkraft 0,18 → 1, bei reduzierter Bewegung statisch. Nur bei
Berechnungen über 400 ms (Kalkulator, KI-Import im Tracker, KI-Assistent). Markup:
Listen und Seiten laden mit Skeleton-Flächen (.gb-skel, --color-surface-2), nicht mit dem Loader. Eine Quelle für alle Seiten. */
@keyframes gb-pulse{0%,100%{opacity:.18}35%{opacity:1}}
.gb-loader{display:inline-block;flex:none}
.gb-loader circle{fill:var(--color-text);animation:gb-pulse 1.4s ease-in-out infinite}
.gb-loader circle:last-child{animation-delay:.35s}
@media (prefers-reduced-motion:reduce){.gb-loader circle{animation:none;opacity:1}}
.gb-skel{display:block;height:12px;border-radius:var(--radius-1);background:var(--color-surface-2)}
/* KI-Knopf ✦ (freigegeben 25.10.2026, Entwurf ui_kits/app/KI-Knopf.html): EIN Baustein für jede KI-Aktion an einer Karte
oder einem Eintrag („✦ Erklären“ im Kalkulator, „✦ KI-Hinweise anfordern“ und „✦ Begründung prüfen“ im Trade Journal).
Pille mit Fläche, kein Rahmen: 28 px (Handy 32 px, Trefferfläche 44 × 44), Innenabstand 0 12 (Handy 0 14),
--color-surface-2, Geist 13 / 500, ✦ in --color-text-muted, Abstand 6. Hover --color-border mit ✦ in Textfarbe (120 ms),
Fokus --focus-ring. Lädt (aria-busy): ColonLoader 12 px statt ✦, Text gedämpft. Gesperrt (aria-disabled oder disabled):
Schrift und ✦ --color-text-disabled, Fläche bleibt, not-allowed. Steht rechts im Kopf (.gb-ki-kopf) auf einer Linie mit
dem Label. Markup und Zustände über FVP.kiKnopf / FVP.kiLaedt / FVP.kiFertig (ui.js). „✦ KI-Assistent“ im Seitenkopf
ist kein KI-Knopf, sondern ein sekundärer Knopf (Entscheidung 35), weil er eine Ansicht öffnet. */
.gb-ki-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:28px}
.gb-ki-kopf > :first-child{min-width:0}
.gb-ki{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;box-sizing:border-box;border:0;
border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text);font-family:var(--font-sans);
font-size:13px;font-weight:500;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;cursor:pointer;
flex:none;position:relative;transition:background-color 120ms cubic-bezier(0.2,0,0,1)}
.gb-ki .gb-ki-st{font-size:12px;color:var(--color-text-muted)}
@media (hover:hover){.gb-ki:hover{background:var(--color-border)}}
@media (hover:hover){.gb-ki:hover .gb-ki-st{color:var(--color-text)}}
.gb-ki:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.gb-ki[aria-busy="true"]{color:var(--color-text-muted);cursor:progress}
.gb-ki .gb-loader circle{fill:currentColor}
/* Ladeanzeige in einem gesperrten Knopf (Titel ergänzen, „Holt Stammdaten …“, Entwurf 26.10.2026): Punkte gedämpft. */
.gb-loader.gb-loader-gesperrt circle{fill:var(--color-text-disabled)}
.gb-ki:is([aria-disabled="true"],:disabled){background:var(--color-surface-2);color:var(--color-text-disabled);cursor:not-allowed}@media (hover:hover){.gb-ki:is([aria-disabled="true"],:disabled):hover{background:var(--color-surface-2);color:var(--color-text-disabled);cursor:not-allowed}}
.gb-ki:is([aria-disabled="true"],:disabled) .gb-ki-st{color:var(--color-text-disabled)}
.gb-ki[hidden]{display:none}
@media (max-width:719px){
.gb-ki{height:32px;padding:0 14px}
.gb-ki::after{content:"";position:absolute;left:-6px;right:-6px;top:-6px;bottom:-6px}
}
@media print{.gb-ki{display:none!important}}
/* Lade-Overlay (Entscheidung 27, Fassung B, freigegeben 19.10.2026): nur wenn eine Verarbeitung die ganze Seite sperrt und
länger als 2 s dauert (Tracker-Import „Dokument an die KI senden & lesen …“); sonst ColonLoader inline. Abdunklung
--color-overlay, Fläche --color-surface (Radius 6, --shadow-2, Innenabstand 32, max. 400 px), ColonLoader 32 px,
Überschrift 17 / 500, Hinweis 13. Erst nach 400 ms, dann 200 ms Einblenden (die Fläche sperrt schon vorher);
.gb-busy--sofort für Zustände, die sofort stehen müssen (Fehler). Über allem außer Kurzmeldungen (#fvp-toast-host
99999) und Dialogen (99998). Reduzierte Bewegung: kein Einblenden, Loader statisch (.gb-loader). */
@keyframes gb-busy-in{from{opacity:0}to{opacity:1}}
.gb-busy{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--color-overlay);animation:gb-busy-in var(--motion-base,200ms) cubic-bezier(0.2,0,0,1) 400ms both}
@media (prefers-reduced-motion:reduce){.gb-busy{animation-duration:1ms}}
.gb-busy.gb-busy--sofort{animation:none}
.gb-busy-box{background:var(--color-surface);border-radius:var(--radius-3);box-shadow:var(--shadow-2);padding:32px;max-width:400px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;color:var(--color-text)}
.gb-busy-t{display:flex;flex-direction:column;gap:6px}
.gb-busy-step{font-size:17px;line-height:1.4;font-weight:500;color:var(--color-text)}
.gb-busy-hint{font-size:13px;line-height:1.5;color:var(--color-text-muted);text-wrap:pretty}
@media (max-width:719px){.gb-busy-box{padding:24px}}
/* Aufklappbarer Abschnitt (Entscheidung 29, freigegeben 19.10.2026): EIN Baustein für Kalkulator und Tracker. Kopf als