/* ============================================================ Alpha Power Tool — Design System Alpha Brand · #c8d300 · Dunkel (Standard) + Hell UMSCHALTEN: `data-theme` am — "dunkel" (oder fehlend) | "hell" | "auto" (folgt dem Betriebssystem). Gesetzt wird es serverseitig aus `User.theme`, siehe base.html. REGEL FÜR NEUEN CODE: keine Hex-Werte mehr in Vorlagen, nur noch diese Token. Die Zuordnung der früher fest eingetragenen Werte steht in der Tabelle unten — sie ist zugleich die Ersetzungsliste des Skripts `werkzeuge/farben_auf_token.py`. ============================================================ */ :root { /* ── Flächen ────────────────────────────────────────────── früher hart: #1e1e1e #2a2a2a #333333 #3a3a3a #222222 */ --color-bg: #1e1e1e; --color-surface: #2a2a2a; --color-surface-2: #333333; --color-surface-3: #3a3a3a; --color-sidebar: #222222; /* Karten und Zwischentöne, die es als Token noch nicht gab */ --color-card: #1a1a1a; /* früher #1a1a1a — die häufigste Kartenfläche */ --color-card-2: #242424; /* früher #242424 */ --color-surface-2b: #2e2e2e; /* früher #2e2e2e */ --color-line: #444444; /* früher #444 */ --color-line-2: #4a4a4a; /* früher #4a4a4a */ --color-border: rgba(255,255,255,0.07); --color-border-hover: rgba(200,211,0,0.25); /* ── Akzent ─────────────────────────────────────────────── `--color-accent` ist die FLÄCHENfarbe (Knöpfe, Balken, Punkte). Für Text und Symbole `--color-accent-text` nehmen: auf Weiß hat #c8d300 nur rund 1,7:1 Kontrast und ist damit unlesbar. */ --color-accent: #c8d300; --color-accent-text: #c8d300; --color-accent-dim: rgba(200,211,0,0.12); --color-accent-mid: rgba(200,211,0,0.25); /* Schrift AUF der Akzentfläche. Steht bewusst nur hier und nicht je Palette: die Fläche ist in beiden Schemata dasselbe Lime, also ist die Schrift darauf auch immer dieselbe. Wer stattdessen `--color-surface` nimmt, bekommt im Hellmodus Hellgrau auf Lime (1,3:1) — genau das stand bis 2026-08-10 in `alpha_wiki/_style.html`. Kontrast hier: 12,4:1. */ --color-on-accent: #1a1a1a; /* ── Text ───────────────────────────────────────────────── früher hart: #fff #eee #ddd #ccc #aaa #888 #666 #555 */ --color-text: #ffffff; --color-text-1b: #eeeeee; --color-text-2: rgba(255,255,255,0.65); --color-text-2b: #cccccc; --color-text-2c: #dddddd; --color-text-3: rgba(255,255,255,0.35); --color-text-3b: #aaaaaa; --color-text-4: rgba(255,255,255,0.2); --color-text-4b: #888888; --color-text-5: #666666; --color-text-6: #555555; /* Menü-Schrift, 15% heller als die globalen Textstufen (nur Hauptmenü). Stand bis 05.08.2026 hart in main.css und blieb dadurch im Hellmodus weiß auf weiß — die Menüpunkte waren schlicht unsichtbar. */ --sb-text-2: rgba(255,255,255,0.75); --sb-text-3: rgba(255,255,255,0.40); --sb-text-4: rgba(255,255,255,0.23); /* Zarte Auflagen für Hover und Zebrastreifen — auf hellem Grund müssen sie abdunkeln statt aufzuhellen, sonst passiert sichtbar nichts. */ --tint-1: rgba(255,255,255,0.02); --tint-2: rgba(255,255,255,0.04); --tint-3: rgba(255,255,255,0.06); --tint-4: rgba(255,255,255,0.10); /* ── Status in CI-Werten ────────────────────────────────── Die vier Werte, die in den Vorlagen tatsächlich stehen (und die die Root-CLAUDE.md als CI führt). Sie sind NICHT identisch mit den --color-success/-warning/-danger/-info darunter — die stammen aus einer älteren Palette und werden nur von main.css benutzt. Auch hier: Fläche und Textfarbe getrennt, wegen des Kontrasts auf Weiß. */ --color-ok: #28c840; --color-ok-text: #28c840; --color-warn: #febc2e; --color-warn-text: #febc2e; --color-err: #ff5f57; --color-err-text: #ff5f57; --color-hint: #4a9eff; --color-hint-text: #4a9eff; /* Getönte Flächen (Erfolgs-/Fehler-Kästen). Bewusst als rgba und nur EINMAL definiert: eine 14%-Tönung wirkt auf dunklem wie auf hellem Grund richtig — dunkelgrün auf Schwarz, blassgrün auf Weiß. */ --color-ok-dim: rgba(40,200,64,0.14); --color-warn-dim: rgba(254,188,46,0.14); --color-err-dim: rgba(255,95,87,0.14); --color-hint-dim: rgba(74,158,255,0.14); /* ── Kundenkategorien (Bonitätsskala Key → E, dazu L=Lead, P=Privat) ── Eigene Token, weil die Skala in beiden Paletten unterschiedlich sein MUSS: die hellen Töne (#8bd96a & Co.) haben auf weißem Grund 1,7–2,3:1 und verschwinden schlicht. Die hellen Werte sind abgedunkelt, behalten aber Farbton und Reihenfolge der Skala. */ --kat-key: #28c840; --kat-a: #8bd96a; --kat-b: #b56800; --kat-c: #ff9142; --kat-d: #ff8a80; --kat-e: #b83227; --kat-l: #4a9eff; --kat-p: #20c9c9; /* ── Gehirn-Graph (Netzansicht des Claude-Gedächtnisses) ────────────── Eigener Satz statt der --kat-*: jene sind die Bonitätsskala der Kundenkategorien und dürfen nicht zweckentfremdet werden. Wie dort gilt auch hier: die hellen Werte sind abgedunkelt, weil die dunkel-Töne auf weißem Grund verschwinden — Farbton und Zuordnung bleiben gleich. */ --gh-feedback: #c8d300; --gh-feature: #28c840; --gh-bugfix: #ff5f57; --gh-plan: #4a9eff; --gh-referenz: #20c9c9; --gh-regel: #ff9142; --gh-offen: #febc2e; --gh-sessionmemory: #a78bfa; --gh-nutzer: #f472b6; --gh-sicherheit: #94a3b8; --gh-sonstiges: #8a8a80; --gh-session: #6f7784; --gh-claudemd: #d9c58a; --gh-geist: #8a8a80; --gh-speiche: rgba(232,232,220,0.10); --gh-sehne: rgba(232,232,220,0.09); --gh-sehne-hell: rgba(232,232,220,0.85); --gh-kern: #3a3a37; --gh-kern-rand: rgba(232,232,220,0.34); /* Einzelfall: der Lila-Ton der Prognose-Karte in der Datenanalyse. */ --color-lila-text: #d9c2ff; /* Status (ältere Palette, von main.css genutzt) */ --color-success: #1D9E75; --color-success-dim: rgba(29,158,117,0.12); --color-warning: #BA7517; --color-warning-dim: rgba(186,117,23,0.12); --color-danger: #D85A30; --color-danger-dim: rgba(216,90,48,0.12); --color-info: #378ADD; --color-info-dim: rgba(55,138,221,0.12); /* Modul-Farben */ --color-mod-1: #c8d300; /* DataPilot */ --color-mod-2: #378ADD; /* Shopify */ --color-mod-3: #9090e0; /* ERP */ --color-mod-4: #1D9E75; /* PIM */ --color-mod-5: #BA7517; /* Wiederk. Aufträge */ --color-mod-6: #D85A30; /* Reklamationen */ --color-mod-7: #D4537E; /* Kundenanfragen */ --color-mod-8: #1D9E75; /* Field Sales */ /* Typografie */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Abstände */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Radien */ --radius-sm: 4px; --radius-md: 7px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 9999px; /* Schatten */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); /* Sidebar */ --sidebar-width: 220px; --topbar-height: 52px; /* Transitions */ --transition: 0.15s ease; } /* ============================================================ Helle Palette ============================================================ Nur die Farb-Token werden neu belegt — Abstände, Radien und Schriftarten bleiben gleich. Bauteile stylen ausschließlich über die Token, nie direkt in diesem Block; sonst laufen die beiden Paletten auseinander. Die Neutraltöne sind bewusst leicht Richtung Lime gezogen (Gelbstich statt reinem Grau), damit sie zum Akzent gehören statt daneben zu stehen. ============================================================ */ :root[data-theme="hell"] { --color-bg: #f5f5f1; --color-surface: #f0f0ea; --color-surface-2: #e8e8e0; --color-surface-3: #dcdcd2; --color-sidebar: #ffffff; --color-card: #ffffff; --color-card-2: #fafaf7; --color-surface-2b: #eaeae3; --color-line: #cfcfc4; --color-line-2: #c4c4b8; --color-border: rgba(0,0,0,0.10); --color-border-hover: rgba(200,211,0,0.55); /* Fläche bleibt Lime, Text wird abgedunkelt — #c8d300 auf Weiß hat nur 1,7:1 Kontrast und ist als Schrift unbrauchbar. */ --color-accent: #c8d300; --color-accent-text: #666d00; --color-accent-dim: rgba(200,211,0,0.20); --color-accent-mid: rgba(200,211,0,0.42); --color-text: #1c1c17; --color-text-1b: #26261f; --color-text-2: rgba(0,0,0,0.72); --color-text-2b: #45453a; --color-text-2c: #35352c; --color-text-3: rgba(0,0,0,0.55); --color-text-3b: #5f5f52; --color-text-4: rgba(0,0,0,0.45); --color-text-4b: #67675a; --color-text-5: #7d7d6e; --color-text-6: #8b8b7b; --sb-text-2: rgba(0,0,0,0.78); --sb-text-3: rgba(0,0,0,0.58); --sb-text-4: rgba(0,0,0,0.45); --tint-1: rgba(0,0,0,0.025); --tint-2: rgba(0,0,0,0.05); --tint-3: rgba(0,0,0,0.07); --tint-4: rgba(0,0,0,0.12); --color-ok: #28c840; --color-ok-text: #0f6b26; --color-warn: #febc2e; --color-warn-text: #7d5700; --color-err: #ff5f57; --color-err-text: #c2291a; --color-hint: #4a9eff; --color-hint-text: #1160bf; --color-lila-text: #6b45a8; --kat-key: #0b6b21; --kat-a: #3f8c1c; --kat-b: #b56800; --kat-c: #d1590a; --kat-d: #b52d20; --kat-e: #7d1810; --kat-l: #1160bf; --kat-p: #0d7373; --gh-feedback: #7d8a00; --gh-feature: #0b6b21; --gh-bugfix: #b52d20; --gh-plan: #1160bf; --gh-referenz: #0d7373; --gh-regel: #b56800; --gh-offen: #8a6100; --gh-sessionmemory: #5b3fc4; --gh-nutzer: #a11d63; --gh-sicherheit: #475569; --gh-sonstiges: #6b6b60; --gh-session: #828994; --gh-claudemd: #7a6320; --gh-geist: #8e8e84; --gh-speiche: rgba(40,40,32,0.12); --gh-sehne: rgba(40,40,32,0.11); --gh-sehne-hell: rgba(30,30,24,0.85); --gh-kern: #ffffff; --gh-kern-rand: rgba(40,40,32,0.32); --color-success: #0f6b26; --color-success-dim: rgba(18,122,44,0.12); --color-warning: #7d5700; --color-warning-dim: rgba(138,97,0,0.12); --color-danger: #c2291a; --color-danger-dim: rgba(194,41,26,0.12); --color-info: #1160bf; --color-info-dim: rgba(17,96,191,0.12); /* Schatten dürfen auf hellem Grund nicht so hart sein wie auf dunklem */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.13); } /* „Automatisch" = dieselbe helle Palette, aber nur wenn das Betriebssystem hell steht. Die Regel steht bewusst NACH dem hell-Block, damit eine ausdrückliche Wahl sie nicht überschreibt. */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --color-bg: #f5f5f1; --color-surface: #f0f0ea; --color-surface-2: #e8e8e0; --color-surface-3: #dcdcd2; --color-sidebar: #ffffff; --color-card: #ffffff; --color-card-2: #fafaf7; --color-surface-2b: #eaeae3; --color-line: #cfcfc4; --color-line-2: #c4c4b8; --color-border: rgba(0,0,0,0.10); --color-border-hover: rgba(200,211,0,0.55); --color-accent-text: #666d00; --color-accent-dim: rgba(200,211,0,0.20); --color-accent-mid: rgba(200,211,0,0.42); --color-text: #1c1c17; --color-text-1b: #26261f; --color-text-2: rgba(0,0,0,0.72); --color-text-2b: #45453a; --color-text-2c: #35352c; --color-text-3: rgba(0,0,0,0.55); --color-text-3b: #5f5f52; --color-text-4: rgba(0,0,0,0.45); --color-text-4b: #67675a; --color-text-5: #7d7d6e; --color-text-6: #8b8b7b; --sb-text-2: rgba(0,0,0,0.78); --sb-text-3: rgba(0,0,0,0.58); --sb-text-4: rgba(0,0,0,0.45); --tint-1: rgba(0,0,0,0.025); --tint-2: rgba(0,0,0,0.05); --tint-3: rgba(0,0,0,0.07); --tint-4: rgba(0,0,0,0.12); --color-ok-text: #0f6b26; --color-warn-text: #7d5700; --color-err-text: #c2291a; --color-hint-text: #1160bf; --color-lila-text: #6b45a8; --kat-key: #0b6b21; --kat-a: #3f8c1c; --kat-b: #b56800; --kat-c: #d1590a; --kat-d: #b52d20; --kat-e: #7d1810; --kat-l: #1160bf; --kat-p: #0d7373; --gh-feedback: #7d8a00; --gh-feature: #0b6b21; --gh-bugfix: #b52d20; --gh-plan: #1160bf; --gh-referenz: #0d7373; --gh-regel: #b56800; --gh-offen: #8a6100; --gh-sessionmemory: #5b3fc4; --gh-nutzer: #a11d63; --gh-sicherheit: #475569; --gh-sonstiges: #6b6b60; --gh-session: #828994; --gh-claudemd: #7a6320; --gh-geist: #8e8e84; --gh-speiche: rgba(40,40,32,0.12); --gh-sehne: rgba(40,40,32,0.11); --gh-sehne-hell: rgba(30,30,24,0.85); --gh-kern: #ffffff; --gh-kern-rand: rgba(40,40,32,0.32); --color-lila-text: #6b45a8; --color-success: #0f6b26; --color-warning: #7d5700; --color-danger: #c2291a; --color-info: #1160bf; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.13); } }