/* Farben und Schriften des CRM. Die einzige Stelle, an der Markenwerte stehen. * * Zwei Saetze: dunkel ist die Voreinstellung und steht in :root, hell haengt * an [data-thema="hell"] am . Die Namen sind in beiden Saetzen gleich, * stil.css kennt nur die Namen und keinen einzigen Hex-Wert. * * Markenfarben ausgelesen aus dem CSS von visualepoche.de (WordPress, Theme * "Axios" mit Child-Theme), 70 Stylesheets, Stand 16.09.2026. * * ACHTUNG: Die Elementor-Variablen --e-global-color-primary (#6ec1e4) und * -accent (#61ce70) auf der Website sind unveraendert die Werkseinstellungen * von Elementor und KEINE Markenfarben. */ :root { /* ------------------------------------------------ Marke, in beiden Saetzen */ --marke-akzent: #c9f31d; /* Limette, 301 Vorkommen in 24 Dateien */ /* Schwarzblau, 286 Vorkommen in 20 Dateien. Steht hier als Markenwert, auch wenn die Oberflaeche seit dem dunklen Entwurf mit --grund und --kachel arbeitet. */ --marke-dunkel: #10171e; /* Aus dem Logo ausgelesen (rundes Bildzeichen auf visualepoche.de): das Lila des Schraegstrichs und der tiefe Lila-Grund dahinter. Nur fuer Markenflaechen wie die Anmeldeseite, nie fuer Warnungen oder Status. */ --marke-lila: #7f32f6; --marke-lila-tief: #390070; --auf-lila: #f1eafe; /* Schrift auf tiefem Lila, kein reines Weiss */ /* Die geschwungenen Linien der Website (Anmeldeseite). */ --marke-schwung: #6c62e2; /* ------------------------------------------------------------- Formgebung */ --radius-kachel: 14px; --radius-feld: 10px; --radius-pille: 999px; --luft: 14px; /* Abstand zwischen den Kacheln */ /* Hoehe der Tabellenzeilen. Dunkle Flaechen brauchen mehr Luft als helle. 7px ergeben 36px Zeilenhoehe. Hier an einer Stelle nachstellbar. */ --zeilenluft: 7px; /* --------------------------------------------------------------- Schrift */ --schrift-marke: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --schrift-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ====================================================== DUNKEL, Vorgabe == */ --grund: #0d1117; /* Seitenhintergrund */ --kachel: #161b22; /* Flaeche davor */ --kachel-hoch: #1c2430; /* angehoben: Hover, sekundaerer Knopf */ --linie: #222a33; /* Trennlinie, ersetzt jeden Rahmen */ --hover: #1c2430; --text: #c9d1d9; /* kein reines Weiss, das flimmert */ --text-stark: #e6edf3; --text-leise: #8b949e; /* Auf dunklem Grund traegt die Limette selbst als Textfarbe, 13,44:1. */ --akzent-text: #c9f31d; --akzent-flaeche: #c9f31d; --auf-akzent: #0d1117; /* Schrift auf limettener Flaeche */ /* Warnungen. Benannt nach ihrer Bedeutung, nicht nach ihrer Farbe: der mittlere Ton war einmal Bernstein und ist jetzt Violett, ein Name wie "gelb" wuerde spaetestens beim naechsten Wechsel luegen. --warn-*-voll Symbol und Streifen an der Zeile (Richtwert 3:1) --warn-* Text der Marke im Kanban (Richtwert 4,5:1) --warn-*-grund Flaeche hinter diesem Text Kein Bernstein mehr: der sitzt farblich zwischen Rot und Limette und hat bei Deuteranopie nur ΔE 27 zur Limette und 24 zum Rot. Violett haelt dort 143 und 101. */ /* Kalenderfarben je Benutzer. Sechs Toepfe, fest an der Benutzerkennung. Bewusst nicht die Warnfarben: eine Person ist keine Warnung. Sie muessen sich nur voneinander unterscheiden, nicht von Rot oder Violett. */ --person-a: #79c0ff; --person-b: #7ee2a8; --person-c: #ffd479; --person-d: #e0a3ff; --person-e: #5ddde8; --person-f: #ffa07a; --person-ohne: #6e7681; --warn-verbot: #ff8f8f; --warn-verbot-grund: #3d1412; --warn-verbot-voll: #ff5757; /* 5,56:1 auf der Kachel */ --warn-achtung: #c4b0ff; --warn-achtung-grund: #241a45; --warn-achtung-voll: #a78bfa; /* 6,36:1 */ --warn-neutral: #a8b3bf; --warn-neutral-grund: #242b33; --warn-neutral-voll: #6e7681; /* 3,77:1 */ --pille-blau-text: #79c0ff; --pille-blau-grund: #122b41; --pille-gruen-text: #7ee787; --pille-gruen-grund: #123524; /* Abgeschlossen ohne Gewinn: bewusst ohne Flaeche. Dreissig gleiche Pillen untereinander sind die unwichtigste Information auf der Seite. */ --pille-grau-text: #8b949e; --pille-grau-grund: transparent; /* Der Ball liegt beim Kunden. Kraeftiges Tuerkis: die Flaeche hebt sich mit 3,23:1 von der Kachel ab statt mit 1,19:1 wie das gedaempfte Blau der uebrigen aktiven Phasen. Tuerkis und nicht Blau, weil Blau dem Violett der Warnungen bei Protanopie auf ΔE 23 nahekommt; Tuerkis haelt 43. */ --pille-nachfassen-text: #e0f7fb; --pille-nachfassen-grund: #0e7490; /* Prioritaet. Bewusst keine neue Farbfamilie, sondern eine Stufung aus der vorhandenen Palette: hoch traegt den Akzent, mittel ist neutral, niedrig tritt zurueck. Rot und Bernstein sind hier tabu, die gehoeren den Warnungen. */ --prio-hoch-text: #c9f31d; --prio-hoch-grund: #1e2a10; --prio-mittel-text: #c9d1d9; --prio-mittel-grund: #1c2430; --prio-niedrig-text: #8b949e; --prio-niedrig-grund: transparent; } /* ========================================================== HELL ========== */ :root[data-thema="hell"] { --grund: #f2f4f6; --kachel: #ffffff; --kachel-hoch: #eceff2; --linie: #e6e9ec; --hover: #f7f8f9; --text: #2f3438; --text-stark: #10171e; /* #6b7278 schafft auf dem hellen Seitengrund nur 4,43:1, deshalb eine Stufe dunkler: 5,13:1 auf Grund, 4,90:1 auf der angehobenen Flaeche. */ --text-leise: #61686e; /* Auf hellem Grund hat die Limette nur 1,29:1 und ist dort ausschliesslich Flaeche. Fuer Text gilt die abgedunkelte Variante. #5a6d0d war unter Deuteranopie nur DeltaE 1,2 vom Warnrot entfernt, also praktisch dieselbe Farbe. #6c7000 liegt gleich hell, etwas gelbiger, und kommt mit dem neuen Warnrot auf 23,1. Kontrast 4,82:1 auf dem Seitengrund. */ --akzent-text: #6c7000; --akzent-flaeche: #c9f31d; --auf-akzent: #10171e; /* Dieselben Rollen, fuer hellen Grund abgedunkelt. Die hellen Toene von oben haetten hier 1,7 bis 2,5:1. Das Warnrot geht bewusst ins Magenta und ist dunkler als ein uebliches Alarmrot: Unter Deuteranopie trennt Rot und Oliv nur die Helligkeit, und ein Rot in normaler Helligkeit kam mit keinem brauchbaren Gruenton auf 20. Naeheres im Commit zu dieser Aenderung. */ /* Dieselben sechs Rollen, fuer hellen Grund abgedunkelt. */ --person-a: #1c4f77; --person-b: #1f6b3f; --person-c: #7a5200; --person-d: #6d28d9; --person-e: #06404e; --person-f: #94421a; --person-ohne: #5f6772; --warn-verbot: #7a0039; --warn-verbot-grund: #fdeff5; --warn-verbot-voll: #7a0039; /* 11,13:1 auf der Kachel */ --warn-achtung: #5b21b6; --warn-achtung-grund: #f1ecfe; --warn-achtung-voll: #6d28d9; /* 7,10:1 */ --warn-neutral: #5f6772; --warn-neutral-grund: #f2f2f2; --warn-neutral-voll: #656d78; /* 5,23:1 */ --pille-blau-text: #1c4f77; --pille-blau-grund: #e8f0f7; --pille-gruen-text: #1f6b3f; --pille-gruen-grund: #e6f3ea; --pille-grau-text: #61686e; --pille-grau-grund: transparent; /* Vom Blaucyan ins Blaugruen gedreht: gegen das neue Warnrot kam #06404e unter Protanopie nur auf 6,3. 20 ist hier nicht erreichbar, im hellen Satz konkurrieren schon sechs dunkle Toene; 13,5 ist das Beste, und die Pille traegt ohnehin immer den Phasennamen als Text. */ --pille-nachfassen-text: #004c47; --pille-nachfassen-grund: #cfeeea; --prio-hoch-text: #6c7000; --prio-hoch-grund: #f2fad0; --prio-mittel-text: #2f3438; --prio-mittel-grund: #eceff2; --prio-niedrig-text: #61686e; --prio-niedrig-grund: transparent; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/schrift/space-grotesk-regular.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/schrift/space-grotesk-500.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/schrift/space-grotesk-700.woff2") format("woff2"); }