/* ============================================================================ Cockpit — Design-System (Umsetzung von docs/STYLEGUIDE.md) Identität: Swiss precision + financial trust. Deep-Teal, warme Teal-Grau- Neutrale, ruhige Elevation, ein Semantik-Set. Nur Tokens in Komponenten- Regeln, keine Inline-Styles, @layer-Ordnung, BEM-nah, erweitern-nicht- duplizieren. Living-Demo: /styleguide. ============================================================================ */ @layer reset, base, tokens, layout, components, utilities; /* Inter (B-58) — selbst gehostet (wwwroot/fonts, SIL OFL), Variable Font 100-900. Bewusst KEIN CDN: die App ist lokal/offline-first. @font-face bleibt ausserhalb der Layer. */ @font-face { font-family: 'Inter'; src: url('fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/InterVariable-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ==================== TOKENS ==================== */ @layer tokens { :root { /* Flächen & Rahmen */ --bg: #eef2f5; --surface: #ffffff; --surface-2: #f4f7f9; --border: #dce3e9; /* Text */ --text: #15212b; --text-muted: #4c5c6a; --text-faint: #7e8e9b; --on-accent: #ffffff; /* Akzent (Deep-Teal) */ --accent: #0d6e78; --accent-ink: #0a565e; --accent-soft: #d8ecee; /* Allokations-Tonleiter (B-99, Teal-Familie) — Vermögensaufteilung/Donut, grösste Position = dunkelster Ton */ --alloc-1: #0a565e; --alloc-2: #0d6e78; --alloc-3: #3f9aa4; --alloc-4: #78bcc4; --alloc-5: #aedadf; /* Netzwerk-Knotentypen (B-105): Aliase auf die bestehende Palette (Teal-Familie, Hypothek = Passivum rot, Dokument neutral). Dark-Mode erbt automatisch über die referenzierten Tokens. */ --node-person: var(--accent-ink); --node-firma: var(--accent); --node-liegenschaft: var(--alloc-3); --node-vorsorge: var(--ok); --node-kontodepot: var(--alloc-2); --node-fahrzeug: var(--open); --node-police: var(--warn); --node-hypothek: var(--crit); --node-beteiligung: var(--alloc-4); --node-dokument: var(--surface-2); /* Semantik: ok / warn / crit / open (neutral) — je Vollton/Soft/Ink */ --ok: #2f8a4e; --ok-soft: #dcefe1; --ok-ink: #1f6b3a; --warn: #b7791f; --warn-soft: #f6ecd6; --warn-ink: #875812; --crit: #c0392b; --crit-soft: #f6ddd9; --crit-ink: #8f271c; --open: #5c6f7e; --open-soft: #e6ebee; --open-ink: #41515d; /* Typo */ --font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace; --font-sans: 'Inter', "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 20px; --fs-xl: 28px; /* Spacing (4-Punkt-Raster) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Radien */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* EINE Symbolgroesse (B-181, R-015853). Gemessen am 13.10.2026 auf /dokumente trugen die Symbole vier verschiedene Groessen -- 13px der Blitz im Spaltenkopf, 16px der Schalter der Seitenleiste, 17px das Abmelden, 18px die sieben der Navigation -- jede von ihrer Komponente selbst erfunden. 18px ist der Wert, den 7 von 10 schon trugen; die anderen folgen ihm. Bewacht von SymbolGroesseTests, damit die naechste Komponente ihn erbt statt sich einen auszudenken. */ --icon-size: 18px; /* B-163/B-133: der Pillen-Radius. 999px und 99px standen beide im Stylesheet; benannt wird nur die 999 -- die vier 99er zu vereinheitlichen waere eine Entscheidung, keine Benennung. */ --r-pill: 999px; /* Rahmenbreite. 1px kam 72x roh vor und hatte kein Token; `outline-offset: 1px` ist bewusst NICHT gemeint -- ein Abstand ist keine Breite. */ --border-width: 1px; /* Content-Breite: hoher Container-Cap (nur gegen absurde Ultrawide-Streckung, deckelt NICHT die datendichten Seiten) + Lesbarkeits-Mass für Fliesstext (Zeilenlänge ~66–75 Zeichen). */ --content-max: 1600px; --measure: 68ch; /* Schatten */ --shadow-1: 0 1px 2px rgba(16, 33, 43, .05), 0 10px 30px -18px rgba(16, 33, 43, .25); --shadow-2: 0 2px 6px rgba(16, 33, 43, .08), 0 18px 40px -20px rgba(16, 33, 43, .32); --shadow-3: 0 8px 24px rgba(0, 0, 0, .12); /* Overlay-Hintergrund (Dokument-Viewer B-63) */ --backdrop: rgba(16, 33, 43, .5); /* Fokus */ --focus: 2px solid var(--accent); /* Marken-Panel (B-57, Login-Split): dunkler als --accent, eigener Token statt Inline-Berechnung */ --brand-panel: #0a3a40; /* Text AUF dem Marken-Panel. Eigene Tokens, weil --on-accent hier nicht passt: das Panel bleibt in beiden Themes nahezu schwarz, --on-accent wird im Dark Mode aber dunkel (#06232a) -- es waere dort dunkel auf dunkel und damit unlesbar. In app.css standen deshalb die einzigen rohen Farbwerte ausserhalb des tokens-Layers; diese zwei Tokens ersetzen sie wertgleich, also ohne jede sichtbare Aenderung. */ --on-brand-panel: #ffffff; --on-brand-panel-muted: rgba(255, 255, 255, .8); } /* B-174 (R-015526): Die Dark-Palette haengt am Attribut, NICHT an der Media-Query. Warum nicht beides: die Palette ist ein Block von rund 40 Tokens, und CSS kann denselben Block nicht an eine Media-Query UND einen Attribut-Selektor haengen, ohne ihn zu doppeln. Zwei Kopien laufen auseinander, und die zweite waere die ungepflegte. Deshalb loest der Browser die Einstellung "System" selbst zu "hell" oder "dunkel" auf (matchMedia, inkl. Nachfuehrung bei Aenderung) und setzt data-theme auf einen konkreten Wert -- das Stylesheet kennt nur noch zwei Zustaende und fuehrt die Palette genau einmal. Gesetzt wird das Attribut von einem Inline-Skript im , also VOR dem ersten Zeichnen; ohne das blitzte bei jedem Aufruf kurz das helle Thema auf. */ :root[data-theme="dark"] { --bg: #0c141b; --surface: #141f28; --surface-2: #1b2933; --border: #293a46; --text: #e8eef2; --text-muted: #a9b9c5; --text-faint: #7a92a1; --on-accent: #06232a; --accent: #3fb6c2; --accent-ink: #8ad6dd; --accent-soft: #123840; --alloc-1: #3fb6c2; --alloc-2: #2f97a2; --alloc-3: #3f7f88; --alloc-4: #4d6d74; --alloc-5: #5c6f7e; --ok: #57c07a; --ok-soft: #12301f; --ok-ink: #8ed9a5; --warn: #e0aa4b; --warn-soft: #33270f; --warn-ink: #efc987; --crit: #e8776a; --crit-soft: #331812; --crit-ink: #f0a99f; --open: #8ea4b3; --open-soft: #1c2a34; --open-ink: #b2c4d0; --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 34px -18px rgba(0, 0, 0, .7); --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 20px 46px -20px rgba(0, 0, 0, .8); --shadow-3: 0 8px 24px rgba(0, 0, 0, .55); --backdrop: rgba(0, 0, 0, .65); --brand-panel: #041418; /* Unveraendert weiss: das Panel ist im Dark Mode noch dunkler, nicht heller. */ --on-brand-panel: #ffffff; --on-brand-panel-muted: rgba(255, 255, 255, .8); } } /* ==================== RESET / Framework-Boilerplate ==================== */ @layer reset { * { box-sizing: border-box; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: var(--border-width) solid var(--ok); } .invalid { outline: var(--border-width) solid var(--crit); } .validation-message { color: var(--crit); } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--crit); padding: 1rem 1rem 1rem 3.7rem; color: var(--on-accent); } .blazor-error-boundary::after { content: "An error has occurred."; } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--text-faint); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } } /* ==================== BASE ==================== */ @layer base { body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.55; } /* Formularfelder — einheitliche Höhe/Padding (B-25) für input/select/textarea. */ input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], select, textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-md); line-height: 1.4; padding: 9px 11px; border: var(--border-width) solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); background-position: calc(100% - 17px) center, calc(100% - 12px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select::-ms-expand { display: none; } input[type=text]:focus, input[type=number]:focus, input[type=date]:focus, input[type=password]:focus, input[type=email]:focus, select:focus, textarea:focus { outline: var(--focus); outline-offset: 1px; border-color: var(--accent); } } /* ==================== LAYOUT ==================== */ @layer layout { /* UI-05: minmax(0, 1fr) statt 1fr — dieselbe Ursache wie B-114, nur eine Ebene hoeher. `1fr` ist `minmax(auto, 1fr)`, und das automatische Minimum ist die Min-Content-Breite des Inhalts. Eine zu breite Tabelle liess die Spalte deshalb ueber den Viewport hinauswachsen und zog die Seite — samt Sidebar — in den horizontalen Scroll. Mit einem Minimum von 0 bleibt die Spalte begrenzt und `.datagrid-wrap.table-scroll` scrollt, wie vorgesehen, selbst. */ .app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; } /* UI-29: vorher scrollte die GANZE Seitenleiste, sobald ihr Inhalt nicht mehr passte — bei 800 px Fensterhoehe 159 px Ueberschuss, und die Benutzerkarte unten verschwand aus dem Bild. Durch die Gruppen-Ueberschriften (UI-25) wurde das schlimmer, nicht besser. Jetzt scrollt nur die Linkliste; Marke oben und Benutzerkarte unten bleiben in jeder Fensterhoehe stehen. */ /* UI-B170a (09.10.2026): `.sidebar` statt des blanken `aside`. Gemessen am laufenden System: diese Regel traf auch