/* 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. Zwischen beiden Ebenen sitzt seit v3.61 eine dritte, die **nur manchmal da ist**: gehört der offene Kunde zu einer Auftragsfirma, schreibt base.html deren Schema als --f-hell-* und --f-dunkel-* an das Wurzelelement, und die Semantikebene liest es mit dem heutigen Wert als Rückfall. Zwei Sätze, weil der Server das Theme nicht kennt: es steht erst im Browser fest. Die Farben stehen in auftragsfirmen/paletten.py, nicht in der Datenbank. Wer hier ein Token neu anlegt, das eine Firma tragen können soll, gibt ihm dieselbe Form: var(--f--, ). Alles ohne diese Klammer bleibt in jedem Schema gleich, und das ist bei den Zustandsfarben Absicht: grün heißt gespeichert, rot heißt Fehler, in jeder Firma. 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; /* Schrift auf der Zustandsfarbe (Abzeichen). Hieß bis v3.61 --auf-teal und stand damit als einziges Token auf Ebene 1 unter einem Markennamen: sobald eine Firma ihre eigene Zustandsfarbe mitbringt, ist "auf Teal" die falsche Frage. Der alte Name lebt unten in der Brücke weiter. */ --auf-zustand: var(--f-hell-auf-zustand, #073B37); /* 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(--f-hell-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(--f-hell-zustand, var(--marke-teal)); /* hier stehst du */ /* 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: var(--f-hell-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(--f-hell-zweit, var(--marke-petrol)); --zweit-text: var(--f-hell-zweit-text, #FFFFFF); /* Kopfzeile und Seitenleiste. Sie waren bis v3.58 die einzige Stelle im Projekt, die --marke-petrol direkt benutzte; seitdem steht dieses Token dazwischen, damit ein Kunde einer Auftragsfirma die Oberfläche in deren Hausfarbe tragen kann (auftragsfirmen/service.darstellung). Die Vorgabe ist unverändert Petrol, in beiden Themes. Wer die Fläche überschreibt, überschreibt --kopf-text gleich mit: auf einer mittelhellen Farbe wie dem Wärmekraft-Pink ist Weiß nicht mehr zu lesen (3,2:1), die Schrift wird dort schwarz. Deshalb sind auch alle Schleier darunter aus --kopf-text gemischt statt fest weiß, sonst läge ein weißer Hover auf hellem Grund und der aktive Menüpunkt verschwände. */ --kopf: var(--f-hell-kopf, var(--marke-petrol)); --kopf-text: var(--f-hell-kopf-text, var(--auf-farbe)); /* Das hervorgehobene Wort der Marke, der Balken am aktiven Punkt, Abmelden. Auf Petrol ist das Teal; auf einer Firmenfarbe wäre es schrill und schlecht lesbar, dort setzt der Server es auf die Schriftfarbe. */ --kopf-akzent: var(--f-hell-kopf-akzent, var(--marke-teal)); --ok: #196B5C; --ok-bg: #E3F6F1; --warnung: #96600F; --warnung-bg: #FDF1DC; --gefahr: #C0392B; --gefahr-bg: #FBE6E3; --info: #1A61B8; --info-bg: #E7F0FB; /* Die Ampel der Tagesfenster (v3.190). Vier Stufen, wie oft dort schon vergeblich angerufen wurde: frei, ein bis zwei, drei bis vier, ab fünf. **Lila statt Rot** für die letzte Stufe (Chris, 22.09.2026): Rot heißt im CRM „kaputt oder überfällig", hier ist nur diese Uhrzeit verbrannt. Es ist dieselbe Signalfarbe wie die der Marke, und das ist kein Zufall: sie sagt „sieh hin", nicht „Fehler". */ --ampel-frei: #1E8E5A; --ampel-wenig: #B8860B; --ampel-viel: #D2691E; --ampel-voll: var(--dringend); /* „Sieh hin", ohne „kaputt" zu sagen (v3.192). Die Signalfarbe der Marke, für das, was liegen geblieben ist: der Rahmen einer überfälligen Kundenkarte, die Zeile darin, die letzte Stufe der Ampel darüber. Rot ist dafür die falsche Farbe und war es schon in v3.190: es heißt im CRM „kaputt", und eine Wiedervorlage von vorgestern ist nicht kaputt, sondern liegen geblieben. Die Farbe steht hier und nicht bei der Ampel, seit sie an zwei Stellen gebraucht wird; die Ampel greift sie ab. */ --dringend: var(--marke-signal); --dringend-bg: color-mix(in oklab, var(--marke-signal) 10%, #FFFFFF); /* Die Fuellung eines Knopfes, der gehalten werden will (`.halten-laeuft`, `static/lange-druecken.js`). Sie muss in einer halben Sekunde ins Auge fallen, sonst haelt man den Knopf fuer kaputt: genau das ist Chris am 23.09.2026 passiert. `--akzent-leise` stand hier bis v3.194 und hat mit 12 Prozent Farbe zu wenig gesagt. Gemischt gegen die Flaeche und nicht gegen Weiss, damit sie im dunklen Theme dieselbe Rechnung ist. */ --halten-fuellung: color-mix(in oklab, var(--akzent) 45%, var(--flaeche)); --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; /* --- Das Blatt einer fremden E-Mail ---------------------------------- Der Mailtext steht in einem abgeschotteten Rahmen (`schriftverkehr/`), einem eigenen Dokument: es erbt von hier **nichts**, die Werte werden ausgelesen und hineingeschrieben (`static/mail-lesen.js`). Es ist **immer hell**, in beiden Ansichten, aus demselben Grund wie die Buehne darueber: eine HTML-Mail ist auf weissem Papier entworfen und setzt ihre Textfarben oft selbst. Im Dunkeln stuende dann schwarze Schrift auf schwarzem Grund, und wir koennen fremdes CSS nicht umschreiben, ohne die Mail zu verfaelschen. Jeder Mailclient macht es so. */ --mail-grund: #FFFFFF; --mail-text: #111111; --mail-zitat: #555555; --mail-zitat-linie: #CCCCCC; 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: var(--f-dunkel-bg, #0A1413); --flaeche: var(--f-dunkel-flaeche, #10201E); --flaeche-2: var(--f-dunkel-flaeche-2, #172C29); --flaeche-ein: var(--f-dunkel-flaeche-ein, #0C1918); --flaeche-hover: var(--f-dunkel-flaeche-hover, #1B302D); --linie: var(--f-dunkel-linie, #23403C); --linie-stark: var(--f-dunkel-linie-stark, #34605B); --linie-feld: var(--f-dunkel-linie-feld, #4C7E77); --text: var(--f-dunkel-text, #E6F0EE); --text-leise: var(--f-dunkel-text-leise, #9BB4B0); --text-invers: #08201E; --akzent-marke: var(--f-dunkel-akzent-marke, var(--marke-signal)); --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); --auf-zustand: var(--f-dunkel-auf-zustand, #073B37); --zustand: var(--f-dunkel-zustand, #3FD3C9); --zustand-stark: var(--f-dunkel-zustand-stark, #3FD3C9); --zweit: var(--f-dunkel-zweit, #24807A); --zweit-text: var(--f-dunkel-zweit-text, #FFFFFF); /* Kopfzeile und Seitenleiste tragen in beiden Themes dieselbe Farbe. */ --kopf: var(--f-dunkel-kopf, var(--marke-petrol)); --kopf-text: var(--f-dunkel-kopf-text, var(--auf-farbe)); --kopf-akzent: var(--f-dunkel-kopf-akzent, var(--marke-teal)); --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); /* Ampel der Tagesfenster, im Dunkeln heller: eine Neonlinie auf schwarzem Grund braucht mehr Licht als auf weißem Papier. */ --ampel-frei: #3FBF85; --ampel-wenig: #E3B341; --ampel-viel: #FF9A4D; --ampel-voll: var(--dringend); /* Im Dunkeln heller, aus demselben Grund wie die Ampel darüber. */ --dringend: #A78BFA; --dringend-bg: #221B33; /* Im Dunkeln etwas kraeftiger, wie die Ampel darueber. */ --halten-fuellung: color-mix(in oklab, var(--akzent) 45%, var(--flaeche)); --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 { --auf-teal: var(--auf-zustand); --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. */ }