/* ═══════════════════════════════════════════════════════════════ Toloro Desktop Design System — Tokens & Base Farbwelt = Toloro App (global.css): Navy #15293F + Orange #E87A2A. Datei-Aufbau: tokens.css → layout.css → components.css → pages.css ═══════════════════════════════════════════════════════════════ */ /* ── Fonts ───────────────────────────────────────────────────── */ /* Inter kommt vom eigenen Server (#1802). Bis zum 05.09.2026 stand hier ein @import auf fonts.googleapis.com — mit zwei Folgen: Ohne Weg zu Google fiel der ganze Desktop auf die Systemschrift zurück, und bei jedem Seitenaufruf ging die IP-Adresse des Anwenders an Google. Für ein Produkt, das beim Kunden im Netz steht, ist beides nicht in Ordnung. Es sind die unveränderten WOFF2-Dateien von Google Fonts (Inter v20, Stand 05.09.2026) — variable Schriften: EINE Datei je Zeichensatz deckt den gesamten Bereich 100–900 ab. Google lieferte für die fünf angeforderten Schnitte 400/500/600/700/800 ohnehin fünfmal dieselbe Datei aus; deshalb steht hier `font-weight: 100 900` statt fünf gleichlautender Blöcke. Herkunft und Prüfsummen: static/desktop/vendor/HERKUNFT.md. Nur latin und latin-ext: Google schickte zusätzlich Kyrillisch, Griechisch und Vietnamesisch mit — in unseren Oberflächen kommt davon kein Zeichen vor. Die `unicode-range`-Angaben sind unverändert übernommen; sie sagen dem Browser, für welches Zeichen er welche Datei überhaupt holen muss (deutsche Umlaute und ß liegen in latin). `font-display: swap` unverändert wie im bisherigen Google-Aufruf: Der Text steht sofort in der Ersatzschrift da (--font-sans unten) und wird nachträglich ausgetauscht, statt einen Moment lang unsichtbar zu sein. Der Service Worker legt beide Dateien in seine Offline-Schale (STATIC_ASSETS in static/desktop/sw.js). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/desktop/187408c82171/fonts/inter-variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/desktop/187408c82171/fonts/inter-variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Alpine.js ──────────────────────────────────────────────── */ [x-cloak] { display: none !important; } /* ── hidden-Attribut durchsetzen ─────────────────────────────── */ /* Das `hidden`-Attribut kommt nur aus dem Browser-Default-Stylesheet ([hidden] { display: none }) und verliert damit gegen jede eigene Regel mit display — eine Klasse wie `.alert { display: flex }` oder ein Inline-`style="display:flex"` gewinnt. Genau daran hingen die globalen Hinweis-Balken in fragments/desktop-layout.html: sie standen auf `hidden`, waren aber trotzdem dauerhaft sichtbar (leerer roter Foto-Balken auf jeder Desktop-Seite, gefunden 05.08.2026). Diese eine Zeile macht `hidden` wieder verlässlich. */ [hidden] { display: none !important; } /* ── Custom Properties ───────────────────────────────────────── */ :root { /* Toloro-Markenfarben (toloro.de, identisch zur Toloro App): Navy als Primärfarbe, Orange als Akzent. */ --primary: #15293F; --primary-hover: #0D1D2F; --primary-soft: #E8EDF3; --accent: #E87A2A; --accent-hover: #C9621C; --accent-soft: #FCEBDD; /* Orange als TEXT und als Knopffläche mit weißer Schrift (toloro#4498). Die Markenfarbe --accent (#E87A2A) bleibt, was sie ist: Akzentlinie, Abzeichenfläche, Orange auf Navy (dort 5,10:1). Als Textfarbe auf Weiß hält sie nur 2,90:1, und weiße Schrift auf ihr ebenfalls nur 2,90:1 — `.btn-accent` war damit der am schlechtesten lesbare Knopf im Haus. Dieselbe Trennung wie bei --warning/--warning-text. Rechenweg wie dort: relative Leuchtdichte L, Verhältnis (L1+0,05)/(L2+0,05), Flächen L(--bg) = 1,0, L(--bg-subtle) = 0,9536, L(--bg-muted) = 0,9085, L(--accent-soft) = 0,8533. --accent-text #9A4A0C (gleicher Farbton, dunkler): L = 0,1179 → 6,25 auf --bg, 5,98 auf --bg-subtle, 5,71 auf --bg-muted, 5,38 auf --accent-soft. Auf Navy taugt er NICHT (2,36:1) — dort bleibt --accent (Seitenleiste, Wortmarke). --accent-strong #B5560F ist die Knopffläche: L = 0,1651, weiße Schrift darauf 4,88:1; beim Überfahren --accent-strong-hover (= der Textton #9A4A0C, 6,25:1). */ --accent-text: #9A4A0C; --accent-strong: #B5560F; --accent-strong-hover: #9A4A0C; /* Status */ --success: #10B981; --success-soft: #D1FAE5; /* Hover-Ton für den vollflächigen `.btn-success` (toloro#2062), gleiche Herleitung wie `--danger-hover`: ein Schritt dunkler auf derselben Tailwind-Statusfarben-Skala (`--success` = `green-500`, `--success-hover` deren `green-600`), keine eigene Berechnung. */ --success-hover: #059669; /* Grün als TEXT und als Knopffläche (toloro#4498). --success (#10B981) hält als Textfarbe auf Weiß nur 2,54:1, auf --success-soft 2,24:1; weiße Schrift auf ihm ebenfalls 2,54:1. Er bleibt Flächen-, Rand- und Symbolton. --success-text #166534 (Tailwind green-800): L = 0,0973 → 7,13 auf --bg, 6,81 auf --bg-subtle, 6,51 auf --bg-muted, 6,29 auf --success-soft (L = 0,8758). --success-strong #15803D (green-700) ist die Fläche von `.btn-success`: L = 0,1593, weiße Schrift 5,02:1; Überfahren --success-strong-hover #166534 (7,13:1). */ --success-text: #166534; --success-strong: #15803D; --success-strong-hover: #166534; --warning: #F59E0B; --warning-soft: #FEF3C7; /* Der Warnton als TEXTFARBE (toloro#2069). `--warning` ist ein Flächen- und Rahmenton: #F59E0B erreicht auf Weiß nur 2,15:1 und auf --warning-soft (#FEF3C7) sogar nur 1,93:1 — weit unter den 4,5:1, die lesbarer Text braucht (WCAG AA). Genau so stand er aber an 96 Stellen als `color:` da (94 davon umgestellt, zwei bleiben — siehe unten), unter anderem an der Fälligkeit in der Lead-Zeile und an jedem „unvollständig"-Hinweis der Buchhaltung: also ausgerechnet an den Sätzen, die jemand lesen soll. #B45309 ist derselbe Schritt wie bei --danger-hover und --success-hover: zwei Stufen dunkler auf derselben Tailwind-Statusfarben-Skala (--warning = amber-500, hier amber-700), keine eigene Berechnung. Rechenweg: relative Leuchtdichte L(#B45309) = 0,1591; gegen L(#FFFFFF) = 1,0 sind das 5,02:1, gegen die Seitenfläche --bg-subtle (0,9536) 4,80:1 und gegen --warning-soft (0,8931) 4,51:1 — die drei Flächen, auf denen Warntext im Bestand wirklich steht. Die Trennung ist Absicht: Ein einziger dunkler Warnton für beides nähme dem Abzeichen und dem Rahmen ihr Signal, und die 4,5:1 lassen sich auf --warning-soft nicht heller erreichen. Faustregel: `background`/`border` nehmen --warning, `color` nimmt --warning-text. Die eine Ausnahme sind die zwei Knöpfe des Impersonier-Balkens auf schwarzem Grund — dort ist der HELLE Ton der kontrastreiche (9,8:1 gegen 4,2:1); sie stehen namentlich im Wächter fokus-und-kontrast.test.js. */ --warning-text: #B45309; --danger: #EF4444; --danger-soft: #FEE2E2; /* Hover-Ton für den vollflächigen `.btn-danger` (toloro#2010), im selben Verhältnis wie `--primary-hover`/`--accent-hover` — ein Schritt dunkler auf derselben Palette. `--danger` folgt (wie `--success`, `--warning`, `--info`) Tailwinds Statusfarben-Skala (dort: `red-500`); `--danger-hover` ist deren `red-600`, keine eigene Berechnung. */ --danger-hover: #DC2626; /* Rot als TEXT und als Knopffläche (toloro#4498). --danger (#EF4444, red-500) hält als Textfarbe auf Weiß nur 3,76:1, auf --danger-soft 3,08:1; weiße Schrift auf ihm ebenfalls 3,76:1 — das war der Löschen-Knopf jeder Rückfrage. Er bleibt Flächen-, Rand- und Symbolton. --danger-text #B91C1C (red-700): L = 0,1123 → 6,47 auf --bg, 6,18 auf --bg-subtle, 5,91 auf --bg-muted, 5,30 auf --danger-soft (L = 0,8095). --danger-strong #DC2626 (red-600, der Wert von --danger-hover) ist die Fläche von `.btn-danger`: L = 0,1674, weiße Schrift 4,83:1; Überfahren --danger-strong-hover #B91C1C (6,47:1). */ --danger-text: #B91C1C; --danger-strong: #DC2626; --danger-strong-hover: #B91C1C; --info: #6366F1; --info-soft: #E0E7FF; /* Blau-Violett als TEXT (toloro#4498). --info (#6366F1, indigo-500) hält auf Weiß 4,47:1 und auf --info-soft 3,63:1 — knapp vorbei ist auch vorbei. --info-text #4338CA (indigo-700): L = 0,0829 → 7,90 auf --bg, 7,55 auf --bg-subtle, 7,21 auf --bg-muted, 6,41 auf --info-soft (L = 0,8022). */ --info-text: #4338CA; /* Der FARBLOSE Stand (toloro#2376). `SchriftverkehrStand` baut aus seinem Farbnamen beides zusammen — das Abzeichen (`badge-neutral`) und die Fläche des Zeichens links in der Zeile (`var(--neutral-soft)` / `var(--neutral)`). Für „liegt im Ordner" gibt es keine Abweichung zu färben: Die Datei ist da, mehr sagt der Stand nicht. Die Werte sind wörtlich die von `--text-secondary` und `--bg-muted`, mit denen `.badge-neutral` seit jeher gezeichnet wird (components.css) — als eigene Namen, damit die Farbfamilie vollständig ist und der Stand nicht als einziger auf zwei fremde Token zeigen muss. Seit toloro#2269 (23.09.2026) mit #607086 — begründet bei --text-muted. */ --neutral: #607086; --neutral-soft: #F1F5F9; /* Neutrals */ --text: #1E293B; --text-secondary: #607086; /* --text-muted trug bis zum 05.09.2026 #94A3B8. Das sind auf Weiß 2,56:1 und auf der Seitenfläche --bg-subtle 2,45:1 — deutlich unter den 4,5:1, die lesbarer Fließtext braucht (WCAG AA). Die Farbe stand an rund 500 Stellen, unter anderem an Datums- und Statuszeilen, die man wirklich lesen muss (#1805). Der neue Wert #64748B bringt 4,76:1 auf Weiß und 4,55:1 auf --bg-subtle. Rechenweg: relative Leuchtdichte L(#64748B) = 0,1706, L(#FFFFFF) = 1,0, L(#F8FAFC) = 0,9536; Verhältnis (L1+0,05)/(L2+0,05). Damit ist er identisch mit --text-secondary — und das ist Absicht, keine Schlamperei: Für einen DRITTEN, helleren Textton bleibt in dieser Palette kein Platz. Die Schranke ist die Seitenfläche #F8FAFC; sie verlangt L ≤ 0,1730, und #64748B liegt mit 0,1706 schon dicht darunter. Jeder sichtbar hellere Ton fiele unter 4,5:1. Die Abstufung „weniger wichtig" trägt deshalb ab jetzt Größe und Strichstärke, nicht mehr die Farbe. Das Token bleibt als eigener Name stehen, damit eine spätere Gestaltungsentscheidung (etwa ein zweiter Farbton auf dunklerem Grund) genau eine Stelle hat. Seit dem 23.09.2026 (toloro#2269) tragen --text-secondary, --text-muted und --neutral #607086 statt #64748B. Der alte Wert hielt 4,5:1 nur auf Weiß und --bg-subtle, auf --bg-muted (#F1F5F9) waren es 4,34:1 — und genau dort steht er: in jedem Tabellenkopf (`.table th`), im Abzeichen `.badge-neutral`, in `.role-table thead th`, `.spiegel-gruppe td`, `.tp-hinweis` und `.tag-derived`. Die Schranke ist damit nicht mehr --bg-subtle, sondern --bg-muted: L(#F1F5F9) = 0,9085 verlangt L ≤ 0,1630. #607086 ist derselbe Farbton (215°) mit derselben Sättigung (16 %), nur 1,75 Prozentpunkte dunkler (Helligkeit 45,1 % statt 46,9 %) — der kleinste Schritt dieser Tonlage mit etwas Reserve: L = 0,1580, also 4,61:1 auf --bg-muted, 4,83:1 auf --bg-subtle, 5,05:1 auf Weiß. (#617187 käme knapp auf 4,54:1 und ließe keinen Spielraum.) Der Abstand zu --text (#1E293B) bleibt groß, die Abstufung wie gehabt über Größe und Strichstärke. Grau bleibt grau: Keine Bedeutung hängt an diesem Ton, also berührt die Änderung die Farbfehlsichtigkeits- Regel nicht. */ --text-muted: #607086; --bg: #FFFFFF; --bg-subtle: #F8FAFC; --bg-muted: #F1F5F9; /* Alias für ältere/abweichende Variablennamen: --surface / --background spiegeln den Karten-/Panel-Hintergrund. Ohne diese Aliase fielen Panels/Karten auf transparent zurück (siehe #214 Side-Panel-Bug). */ --surface: #FFFFFF; --background: #FFFFFF; --border: #E2E8F0; --border-active: #CBD5E1; /* Der Rand eines BEDIENELEMENTS (toloro#4498): Eingabefeld, Auswahl, Textbereich. --border (#E2E8F0) ist eine Trennlinie und darf leise sein; als Rand eines Felds hält er auf Weiß nur 1,23:1 — man sieht kaum, wo man tippen kann. WCAG 1.4.11 verlangt für die Grenze eines Bedienelements 3:1. #7A8A9C (Farbton der Grautöne, 215°): L = 0,2471 → 3,53 auf --bg, 3,38 auf --bg-subtle, 3,23 auf --bg-muted. Bewusst nicht dunkler: slate-500 #64748B (4,76:1) läge schon auf der Höhe der Nebentexte und machte jede Maske zum Gitter. */ --border-control: #7A8A9C; /* Sidebar (dunkle Navy-Fläche wie App-Brand-Header) */ --sidebar-bg: #15293F; --sidebar-bg-deep: #0D1D2F; --sidebar-text: rgba(255, 255, 255, 0.72); --sidebar-text-active: #FFFFFF; --sidebar-heading: rgba(255, 255, 255, 0.42); --sidebar-hover: rgba(255, 255, 255, 0.06); --sidebar-active: rgba(255, 255, 255, 0.10); --sidebar-border: rgba(255, 255, 255, 0.08); /* Tastatur-Fokus (#1805) — EIN Ring für die ganze Büro-Anwendung. Wer im Büro sitzt, arbeitet mit der Tabulatortaste; ohne sichtbaren Fokus weiß niemand, worauf Enter gleich wirkt. Der Wert ist der, den die vier bereits vorhandenen `:focus-visible`-Regeln von Hand geschrieben haben (Passwort-Auge, Wert-Knopf, Wochenraster, Terminplanung) — hier zusammengezogen, damit es beim nächsten Mal nicht wieder abgeschrieben wird. Navy #15293F auf Weiß sind 14,8:1, auf --bg-subtle 14,1:1 — weit über den 3:1, die ein Fokus-Merkmal braucht. Auf DUNKLEM Grund (Seitenleiste, Navy-Knöpfe) verschwände er; dort gilt --focus-ring-hell. Der Abstand hält den Ring AUSSERHALB des Elements, damit er auch auf einer navyfarbenen Fläche noch gegen die helle Seite steht. */ --focus-ring: 2px solid var(--primary); --focus-ring-hell: 2px solid #FFFFFF; --focus-ring-abstand: 2px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14); /* Spacing & Radii */ --radius: 10px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 9999px; /* Typography */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-sans); /* Eine Stufe unter --text-xs, bewusst nur für Marken NEBEN Text: kleine Abzeichen (.badge-sm) in Tabellenzellen und Listenzeilen (toloro#2269). Kein Fließtext dieser Größe — der beginnt bei --text-xs. */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; /* Layout */ --header-height: 56px; --sidebar-width: 264px; --content-max: 640px; --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ── Reset ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-sans); color: var(--text); background: var(--bg-subtle); line-height: 1.5; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); } img, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; }