/* * Die Marke, als CSS-Eigenschaften. * * Quelle der Werte ist die App „Geht sich aus!": * ~/Code/KostenRadar/theme/theme.ts (Farben, Richtung A „Tresor") * Begründungen stehen dort in docs/strategie/design/DESIGN-SYSTEM.md. * * Bewusst abgeschrieben und nicht importiert: Die App liegt in einem anderen * Repo. Eine Werkzeugkette, die über Repo-Grenzen hinweg Dateien zieht, ist für * eine statische Seite mit sieben Unterseiten der falsche Aufwand. Wer hier * eine Farbe ändert, ändert sie auch dort, und umgekehrt. * * Die eine Regel, die aus der App mitkommt und die hier genauso gilt: * Grün, Bernstein und Rot gehören ausschließlich dem Zustand. Die Markenfarbe * liegt außerhalb der Ampel, damit eine blaue Fläche nie als Wertung gelesen * wird. Deshalb ist auf dieser Seite kein Grün als Schmuckfarbe zu finden. * * Aufbau der Datei: * 1. die Palette, die reinen Werte aus der App * 2. die Rollen, also wofür ein Wert auf dieser Seite steht * 3. Schrift und Maße * Die Gestaltung in styles.css greift ausschließlich auf Rollen zu, nie auf * die Palette. Wer eine Ausnahme braucht, legt eine Rolle an. * * Die frühere feste Größenskala (--s-klein bis --s-riesig, --a-xs bis --a-block) * ist am 01.08.2026 mit der Neugestaltung entfallen. Die Seite setzt ihre * Schriftgrößen jetzt durchgehend mit clamp(), also stufenlos zwischen Telefon * und großem Bildschirm. Eine feste Stufenleiter daneben wäre totes Gewicht * gewesen, und die Hälfte ihrer Werte wurde nirgends mehr benutzt. */ :root { /* ---------- 1. Die Palette (hell) ---------- */ --grund: #f4f7fb; --flaeche: #ffffff; --rand: #dfe6f0; --text: #0f1b33; --text-leise: #5b6880; --marke: #1e4fd8; --marke-blass: #e3eafc; --marke-gedaempft: #5c7dd0; --auf-marke: #ffffff; /* Zustand, nur für Zustand */ --gut: #15803d; --gut-blass: #dcfce7; --achtung: #b45309; --achtung-blass: #fef5e2; --schlecht: #b91c1c; --schlecht-blass: #fde4e4; /* Schattenfarbe, immer mit Alpha verwendet */ --schatten: 15 27 51; /* ---------- 2. Die Rollen ---------- */ /* Der Grund, auf dem der Beleg liegt. */ --papier: var(--grund); /* Der Beleg selbst. Die einzige erhobene Fläche der Seite. */ --beleg: var(--flaeche); /* Die Haarlinie. Sie trägt die gesamte Struktur, es gibt keine zweite Kartenform und keinen zweiten Linientyp. */ --buchungslinie: var(--rand); /* Der Abschlussblock, die einzige gesättigte Fläche der Seite. */ --abschluss-grund: var(--marke); --abschluss-text: var(--auf-marke); --abschluss-leise: color-mix(in srgb, var(--auf-marke) 80%, var(--marke)); --abschluss-linie: color-mix(in srgb, var(--auf-marke) 34%, var(--marke)); --abschluss-siegel: color-mix(in srgb, var(--auf-marke) 16%, var(--marke)); --knopf-grund: var(--auf-marke); --knopf-text: var(--marke); /* Eingabefelder. Der Umriss braucht --marke-gedaempft und nicht die Haarlinie: gegen die Belegfläche erreicht die Haarlinie nur 1,26:1, WCAG 1.4.11 verlangt für ein Bedienelement 3:1. Gemessen sind es so 3,80:1 gegen die Feldfläche. */ --feld-grund: color-mix(in srgb, var(--grund) 60%, var(--flaeche)); --feld-rand: var(--marke-gedaempft); --fokus: var(--marke); /* Fokusring auf der gesättigten Fläche, wo --marke unsichtbar wäre. */ --fokus-hell: var(--auf-marke); /* ---------- 3. Schrift und Maße ---------- */ /* Keine fremden Schriften. Weder Google Fonts noch eine mitgelieferte Datei: Das spart eine Anfrage, eine Lizenzfrage und den Moment, in dem die Seite in der falschen Schrift aufblitzt. Die Wirkung kommt aus Skala, Gewicht, Laufweite und Rhythmus. */ --grotesk: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Für alles, was eine Zahl ist. Beträge stehen dadurch mit gleichen Ziffernbreiten untereinander. */ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --breite: 74rem; --r-klein: 3px; --r-beleg: 4px; } /* * Dunkelmodus, gestaltet statt invertiert. Dieselben Werte wie `darkTheme` in * der App, damit die Seite und die App auch nachts dieselbe Marke tragen. * * Neu belegt werden hier ausschließlich Palette und Rollen. In dieser Media * Query steht keine einzige Komponentenregel. Dadurch kann der Dunkelmodus * nicht auseinanderlaufen: Wer eine Komponente ändert, ändert sie für beide. */ @media (prefers-color-scheme: dark) { :root { --grund: #0a1120; --flaeche: #121c2e; --rand: #22304a; --text: #e7edf8; --text-leise: #94a2bc; --marke: #7099ff; --marke-blass: #1b2a47; --marke-gedaempft: #5679c4; --auf-marke: #0a1120; --gut: #4ade80; --gut-blass: #14331f; --achtung: #fbbf24; --achtung-blass: #38290c; --schlecht: #f87171; --schlecht-blass: #3a1a1a; --schatten: 0 0 0; /* Der Abschlussblock trägt nachts nicht das volle Kobalt: Der helle Akzent #7099ff als große Fläche würde den ruhigen Grund erschlagen und die Seite zum Leuchtkasten machen. Die erste Fassung setzte deshalb blaue Schrift auf die blasse Markenfläche (#1b2a47). Rechnerisch war das mit 5,24:1 in Ordnung, im Auge aber nicht: Der Block war nachts sichtbar schwächer als tags, und das ist ausgerechnet die Stelle, an der das Argument der Seite steht. Ein Feld, das hell die Seite trägt und dunkel zurücktritt, ist nicht zweimal dieselbe Gestaltung. Jetzt trägt er dieselbe Bauart wie am Tag: gesättigte Fläche, helle Schrift darauf. Der Grund ist Kobalt in den Seitengrund gemischt, damit er dunkel bleibt (Helligkeit 4,4 Prozent) und trotzdem als einzige gesättigte Fläche der Seite lesbar ist. Gemessen 9,5:1 für die Summe, 6,2:1 für die leisen Zeilen. Beide Werte stammen weiterhin ausschließlich aus der Palette, es kommt keine Farbe dazu, die die App nicht kennt. */ --abschluss-grund: color-mix(in srgb, var(--marke) 30%, var(--grund)); --abschluss-text: var(--text); --abschluss-leise: color-mix(in srgb, var(--text) 76%, var(--abschluss-grund)); --abschluss-linie: color-mix(in srgb, var(--text) 30%, var(--abschluss-grund)); --abschluss-siegel: color-mix(in srgb, var(--text) 16%, var(--abschluss-grund)); --knopf-grund: var(--marke); --knopf-text: var(--auf-marke); --feld-grund: color-mix(in srgb, var(--grund) 55%, var(--flaeche)); /* Blau auf blauem Grund wäre nachts ein schwacher Ring, deshalb hell. */ --fokus-hell: var(--text); } }