/* ============================================================================ tokens.css — W4L-eigene Design-Tokens (Single Source of Truth) ---------------------------------------------------------------------------- NUR W4L-eigene Werte. Die FluentUI-Design-Tokens (--neutral-*, --accent-*, --success, …) verwaltet FluentDesignTheme zur Laufzeit — die NICHT hier deklarieren (siehe fluent.css für die IDE-Referenz). Farbtokens tragen EXAKT die Hex-Werte, die vorher verstreut hartcodiert waren, damit das Ersetzen `#xxxxxx` → `var(--w4l-…)` byte-neutral rendert. Diese Datei wird als ERSTE W4L-CSS geladen (nach FluentUI reboot), damit alle nachfolgenden Stylesheets die Tokens sehen. ============================================================================ */ :root { /* ── Layout ────────────────────────────────────────────────────────── */ /* App-Shell-Spalte (Header + Nav│Arbeitsbereich│Preview teilen sie via .content). 2026-07-14: 1910px → 2150px. 2026-07-15: 2150px → 2250px. Der Zuwachs kommt NICHT dem Arbeitsbereich zugute — der deckelt >1911px Viewport bei 1140px (components.css, .preview-columns) — sondern ausschliesslich der Preview-Spalte (487 → 822px am Cap). 2250 = 288px Nav + 1140px Arbeitsbereich + 822px Preview. */ --w4l-content-max-width: 2250px; --w4l-page-padding: 1.5rem; --w4l-header-height: 90px; /* Site-Header; ≤899px (Burger-Modus) → 50px, s.u. */ --gap-large: 2rem; /* Breite des offenen Side-Docks (BotChat / Live-Chat / Help). 0 = keines offen. Wird von `body:has(.w4l-sidepanel)` in base.css hochgesetzt und von ZWEI Stellen gelesen: dem Dock selbst (SidePanelHost.razor.css) und dem Content-Push (.content-container padding-right). Eine Quelle, damit beides nie auseinanderläuft. ALLE drei Docks sind gleich breit. Das ist Absicht: die Schwellen, ab denen der Content schrumpft bzw. die Preview stapelt, stehen in @media-Conditions — und die können keine Custom Property lesen. Eine zweite Dockbreite bedeutete einen zweiten Schwellensatz. (Help war als DialogService-Panel mal 380px — Erbstück, keine Design-Aussage.) */ --w4l-panel-width: 0px; /* ── Vertikale Abstands-Skala (VerticalSpacer + .w4l-stack) ──────────── Single Source of Truth für die vertikalen Abstände im Arbeitsbereich. VerticalSpacer.razor konsumiert diese Tokens (mit px-Fallback); ein globales «luftiger/dichter» ist damit ein Eingriff HIER statt an ~460 Razor-Stellen. Rollen-Zuordnung (wann welche Stufe) in Docs/Css.md «Vertikale Abstände». Historische Skala ohne L — XS/S/M/XL/XXL entsprechen den bisherigen hartcodierten Werten byte-neutral. XXXL (160px) ist bewusst KEIN Token: das ist kein Abstand, sondern ein Layout-Wunsch (9 Altstellen, Backlog). */ --w4l-space-xs: 8px; /* Label → Control, innerhalb eines Blocks */ --w4l-space-s: 16px; /* Titel → Inhalt; Block → Block in einer Subsektion */ --w4l-space-m: 32px; /* Standalone-Blöcke ohne Divider-Titel */ --w4l-space-xl: 48px; --w4l-space-xxl: 64px; /* ── Shell-Linien ────────────────────────────────────────────────────── Alle Regionsgrenzen der App-Shell — Navigation, Arbeitsbereich (Aussen- kanten), Preview und die Unterkanten der beiden Titelbereiche — beziehen ihre Farbe ausschliesslich über --w4l-shell-line, damit sie identisch wiegen (Docs/DesignBacklog.md: alle Shell-Kanten wiegen gleich). BEWUSST hier NICHT deklariert: der Wert kommt aus dem var()-FALLBACK an der Verwendungsstelle — `var(--w4l-shell-line, var(--neutral-stroke-rest))`. Grund: --neutral-stroke-rest wird von FluentDesignTheme zur Laufzeit auf dem Body gesetzt, nicht auf :root; ein Alias hier würde gegen :root auflösen und könnte ins Leere laufen. Der Fallback löst dagegen am Rand-Element selbst auf und bleibt damit theme-aware. Die Site-Setting «Linien anzeigen» (SiteSettingsService.ShellLineStyle) setzt --w4l-shell-line per Inline-Style auf .content-container in MainLayout auf `transparent`: die Linien verschwinden, die 1px-Geometrie bleibt stehen — kein Layout-Sprung beim Umschalten. */ /* ── Semantische Status-Farben (W4L-eigen) ───────────────────────────── Bewusst eigene Werte statt FluentUI --success/--error: die Charts/Bars nutzen diese festen Grün-/Rot-Töne für positive/negative Fit-Aussagen. */ --w4l-positive: #10b981; /* Fit gut / im Rahmen (fin-ok, fit-good) */ --w4l-negative: #ef4444; /* Über Limit / Warnung (fin-over, fit-caution) */ /* Heat-Lane-Farben (per-Jahr-Alpha-Zellen in Gantt-Lanes): bewusst eigene, gedecktere Töne als --w4l-positive/negative, deckungsgleich mit den Invest-/Withdraw-Lanes (InvestTimeline/WithdrawTimeline, BudgetPhaseLane). */ --w4l-lane-positive: #4b9e6a; /* Grün — überschüssige Sparrate / investiert */ --w4l-lane-negative: #dc2626; /* Rot — Cash-Verzehr / entnommen */ /* Gemeinsamer linker Gutter aller Timeline-Lanes (= --gantt-label-width in GanttTimeline.razor.css) UND der daran ausgerichteten Charts (YAxisWidthPx). Wert-Änderung hier muss mit den int-Parametern der Charts mitziehen — CSS-Variablen erreichen die Chart.js-Canvas nicht. */ --w4l-timeline-gutter: 220px; --w4l-warning: #c77700; /* Amber — gekürzt/nicht abzugsfähig (Bar-Editoren) */ --w4l-info: #3b82f6; /* Blau — informativ, kein Fehler (WEF-Tilgung in Bar-Editoren) */ --w4l-income-accent: #4f7d52; /* Einkommens-/Tragbarkeits-Zone (grün) */ /* ── Neutrale Paletten-Töne ────────────────────────────────────────── */ --w4l-category-default: #7a828e; /* Default-Kachelfarbe (CategoryTile) */ --w4l-bar-strong: #6b7a8f; /* Tragbarkeits-Bar: Zins-Segment */ --w4l-bar-mid: #9aa7b5; /* Tragbarkeits-Bar: Amortisations-Segment */ --w4l-bar-soft: #c4ccd6; /* Tragbarkeits-Bar: Unterhalts-Segment */ /* ── Preis-Leiter des Tragbarkeitsrechners (AffordabilityLadder, B1) ─── Drei semantische Zonen, ordinal von «bequem» nach «ausser Reichweite». Bewusst eigene, gedecktere Töne als --w4l-positive/negative: der Streifen ist eine grosse Fläche mit Text darauf, kein Statuspunkt. Die Zonen tragen IMMER auch ihr Label — die Farbe ist nie der einzige Träger der Aussage. Dark-Overrides im [data-w4l-dark]-Block unten. */ --w4l-ladder-comfort-bg: #dcefe2; --w4l-ladder-comfort-ink: #1f4b32; --w4l-ladder-stretch-bg: #fbeed2; --w4l-ladder-stretch-ink: #5c4410; --w4l-ladder-out-bg: #eceef1; --w4l-ladder-out-ink: #5b636e; } /* Dark-Varianten der Leiter-Zonen. Scope wie bei den --w4l-chrome-*-Tokens: themeMode.js setzt data-w4l-dark auf , sobald FluentDesignTheme dunkel auflöst (FluentUIs eigene Tokens hängen am Body und helfen hier nicht). */ :root[data-w4l-dark] { --w4l-ladder-comfort-bg: #21382b; --w4l-ladder-comfort-ink: #b6dcc3; --w4l-ladder-stretch-bg: #3d3320; --w4l-ladder-stretch-ink: #e8cf94; --w4l-ladder-out-bg: #2b2f35; --w4l-ladder-out-ink: #a3abb6; } /* Mobile-Header (Burger-Modus): gleiche Grenze wie die Shell-Umschaltung in base.css (@899px = md). Custom Properties sind in Media-CONDITIONS nicht erlaubt — in calc()-WERTEN schon; deshalb Token + Override statt Query-Variable. */ @media (max-width: 899px) { :root { --w4l-header-height: 50px; } } /* ============================================================================ Breakpoint-KONVENTION (dokumentierte Werte, keine Tokens — CSS-Variablen funktionieren nicht in @media-Conditions). Für neuen Code NUR diese Werte; Details + Migrationsregel in Docs/Css.md: xs @media (max-width: 479px) kleine Phones sm @media (max-width: 639px) Phones — Formzeilen stapeln md @media (max-width: 899px) Tablet portrait — Mehrspalter stapeln lg @media (max-width: 1279px) Tablet landscape — Preview-Pane stapelt touch @media (hover: none), (pointer: coarse) Touch-Targets ≥44px ============================================================================ */