/* Design-Tokens des CRM. Diese Datei enthält ausschließlich Variablen, keine einzige Regel auf einem Element oder einer Klasse. Zwei Ebenen, und die Trennung ist die ganze Idee: 1. Marke (--marke-*): die Farben von mein-prozessheld.de. Sie sind in beiden Themes identisch und werden nie umgeschaltet. 2. Semantik (--bg, --flaeche, --text, --akzent, ...): was ein Bauteil tatsächlich benutzt. Nur diese Ebene wechselt zwischen hell und dunkel. Regel für alle anderen CSS-Dateien: ein Bauteil greift nur auf Ebene 2 zu. Wer --marke-petrol direkt benutzt, hängt fest und wird im dunklen Theme unlesbar. Ausnahme sind Kopfzeile und Seitenleiste, die bewusst in beiden Themes Petrol bleiben, damit das CRM im Dunkeln dasselbe Produkt ist. Das Theme steht als data-theme am . Gesetzt wird es von dem kurzen Skript im von base.html, noch bevor gezeichnet wird. Deshalb gibt es hier keinen prefers-color-scheme-Block: das Skript löst "System" bereits zu light oder dark auf, und diese Datei kennt nur die beiden Endzustände. */ :root { /* --- Ebene 1: Marke, themeunabhängig ------------------------------------ */ --marke-petrol: #0E3F3D; --marke-petrol-tief: #082624; --marke-petrol-hell: #1C6E6A; --marke-teal: #2BBFB6; --marke-signal: #7C3AED; /* Schrift auf einer farbigen Fläche (Kopfzeile, Seitenleiste, roter Knopf, Toast). Steht bewusst auf Ebene 1: sie ist in beiden Themes weiß, weil die Fläche darunter in beiden Themes dieselbe Farbe hat. */ --auf-farbe: #FFFFFF; --auf-teal: #073B37; /* Schrift auf Teal, dort wäre Weiß zu schwach */ /* Handlungsfarbe des Mandanten. base.html überschreibt sie am , wenn der Mandant eine eigene hinterlegt hat. Alles Weitere leitet sich ab, damit eine einzige Angabe für beide Themes reicht. */ --akzent-marke: var(--marke-signal); /* --- Ebene 2: semantisch, helles Theme ---------------------------------- */ --bg: #F7FAF9; /* Seitengrund */ --flaeche: #FFFFFF; /* Karte, Listenzeile, alles was auf dem Grund liegt */ --flaeche-2: #EEF4F3; /* eine Stufe höher: Kanban-Spalte, Chip, Code */ --flaeche-ein: #FFFFFF; /* versenkt: Eingabefeld */ --flaeche-hover: #F2F7F6; --linie: #E5EEEC; /* Trennlinie, rein zeichnerisch */ --linie-stark: #CBDCD9; /* sichtbare Kante an Karten und Chips */ /* Rand eines Eingabefeldes. Muss 3:1 zur Fläche haben, sonst ist nicht zu erkennen, wo man tippen kann. Deshalb dunkler als --linie-stark, das nur zeichnet. */ --linie-feld: #798F8B; --text: #0B1F1E; --text-leise: #5B716E; --text-invers: #FFFFFF; --akzent: var(--akzent-marke); /* Handlung: primärer Knopf, Link */ --akzent-text: #FFFFFF; /* Schrift auf der Handlungsfarbe */ --akzent-leise: color-mix(in oklab, var(--akzent-marke) 12%, #FFFFFF); --zustand: var(--marke-teal); /* hier stehst du, auf dunklem Grund */ /* Dasselbe auf heller Fläche: das Marken-Teal kommt dort nur auf 2.3:1 und ein 3px-Balken wäre kaum zu sehen. Für Balken und Fokusring deshalb die abgedunkelte Fassung. */ --zustand-stark: #14867F; --fokus: var(--zustand-stark); /* Zweite Handlung: speichern, hinzufügen, umschalten. Immer Petrol, aber im dunklen Theme angehoben, sonst steht ein fast schwarzer Knopf auf einer fast schwarzen Karte und man sieht nur die Schrift schweben. */ --zweit: var(--marke-petrol); --zweit-text: #FFFFFF; --ok: #196B5C; --ok-bg: #E3F6F1; --warnung: #96600F; --warnung-bg: #FDF1DC; --gefahr: #C0392B; --gefahr-bg: #FBE6E3; --info: #1A61B8; --info-bg: #E7F0FB; --schatten-1: 0 1px 3px rgba(11, 31, 30, .06); --schatten-2: 0 4px 18px rgba(11, 31, 30, .08); --schatten-3: 0 8px 26px rgba(11, 31, 30, .12); /* Hinter einem Fenster, das den Rest der Seite stilllegt. */ --schleier: rgba(11, 31, 30, .55); /* Fast blickdicht: hinter einem Foto in voller Größe. Ein durchscheinendes Formular daneben lenkt vom Bild ab. */ --schleier-voll: rgba(11, 31, 30, .92); /* --- Buehne und Werkzeugkasten --------------------------------------- Zwei Oberflaechen, die **immer dunkel** sind, in beiden Ansichten: unter einem Video und im Bildeditor des Aufmassbogens. Sie folgen der Ansicht absichtlich nicht. Ein Foto beurteilt man vor Schwarz, nicht vor Weiss, und ein Werkzeugkasten neben dem Bild soll nicht heller sein als das Bild selbst. Vorher trug jede der beiden Dateien ihre eigenen Hexwerte (#000, #111, #1c1c1c, #2a2a2a, ...), zehn Zahlen ohne Namen. */ --buehne: #000000; /* hinter Video und Foto */ --wz-grund: #111111; /* Flaeche des Editors */ --wz-flaeche: #1C1C1C; /* Leisten darin */ --wz-knopf: #2A2A2A; /* Knopf im Editor */ --wz-knopf-aktiv: #3A3A3A; --wz-linie: #444444; --wz-linie-stark: #555555; --wz-text: #EEEEEE; --wz-text-hell: #FFFFFF; color-scheme: light; /* --- Skalen, themeunabhängig -------------------------------------------- */ /* Abstände im 4px-Raster. */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; /* Schriftgrößen. Vorher standen sieben Werte zwischen .72 und .95rem nebeneinander, ohne dass ein Unterschied gemeint war. */ --txt-xs: .75rem; --txt-sm: .85rem; --txt-md: .95rem; --txt-lg: 1.15rem; --txt-xl: 1.45rem; --txt-2xl: 1.8rem; --txt-3xl: 2.4rem; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Ein Balken links am Element ist die einzige Zustandssprache des CRM. Die Farbe sagt was los ist, die Breite ist überall dieselbe. */ --balken: 3px; --z-leiste: 20; --z-sticky: 40; --z-overlay: 100; --z-dialog: 1000; --tempo: .15s; --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace; /* Grenze, ab der die Seitenleiste dauerhaft steht. Kann in Media-Queries nicht benutzt werden (CSS kann das nicht), steht hier aber als eine dokumentierte Stelle, auf die die Kommentare verweisen: 900px. */ } /* --- Dunkles Theme -------------------------------------------------------- Bewusst kein neutrales Dunkelgrau mit einem Neonakzent, wie es inzwischen jede zweite Oberfläche hat. Die Flächen sind grün getönt, es ist Petrol als Dunkel. Teal und die Handlungsfarbe werden aufgehellt, nicht invertiert. */ [data-theme="dark"] { --bg: #0A1413; --flaeche: #10201E; --flaeche-2: #172C29; --flaeche-ein: #0C1918; --flaeche-hover: #1B302D; --linie: #23403C; --linie-stark: #34605B; --linie-feld: #4C7E77; --text: #E6F0EE; --text-leise: #9BB4B0; --text-invers: #08201E; --akzent: color-mix(in oklab, var(--akzent-marke) 58%, #FFFFFF); --akzent-text: color-mix(in oklab, var(--akzent-marke) 22%, #000000); --akzent-leise: color-mix(in oklab, var(--akzent-marke) 22%, #10201E); --zustand: #3FD3C9; --zustand-stark: #3FD3C9; --zweit: #24807A; --zweit-text: #FFFFFF; --ok: #4ACFA5; --ok-bg: #10312A; --warnung: #E9B44C; --warnung-bg: #33280F; --gefahr: #FF7B6E; --gefahr-bg: #37191A; --info: #7BB0F7; --info-bg: #12253C; --schatten-1: 0 1px 3px rgba(0, 0, 0, .45); --schatten-2: 0 4px 18px rgba(0, 0, 0, .5); --schatten-3: 0 8px 26px rgba(0, 0, 0, .6); --schleier: rgba(0, 0, 0, .72); --schleier-voll: rgba(0, 0, 0, .94); color-scheme: dark; } /* --- Brücke auf die alten Namen ------------------------------------------- Bis 2026-08 hieß die Palette --petrol, --teal, --line und so weiter, ohne Unterscheidung zwischen Marke und Verwendung. Diese Namen stehen noch in den Feature-Dateien und in einigen Templates. Sie zeigen ab jetzt auf die semantische Ebene und schalten damit im dunklen Theme korrekt mit. Die Brücke ist zum Abreißen gebaut: jede Datei, die umgestellt wird, verliert ihre Nutzung, und wenn keine mehr übrig ist, fliegt dieser Block raus. Nichts Neues darf sie benutzen. */ :root { --petrol: var(--marke-petrol); --teal: var(--zustand); --signal: var(--akzent); --ink: var(--text); --paper: var(--bg); --line: var(--linie); --muted: var(--text-leise); --danger: var(--gefahr); --shadow: var(--schatten-2); /* --ok, --info, --radius, --font-body und --font-display heißen unverändert und stehen bereits oben, sie brauchen keine Brücke. */ }