/* ═══════════════════════════════════════════════════════════════════════════ gk-belegfarben.css — die EINE Quelle für Belegfarben im ganzen Haus. Georg 22.08.2026: „Das alles bitte so machen dass es wirklich global über das ganze System funktioniert." DIE REGEL IN EINEM SATZ: Farbe sagt, WAS ein Beleg ist. Form sagt, WIE WEIT er ist. ⚠️ WARUM EINE DATEI UND NICHT JE ANSICHT: gemessen am 22.08. gab es zwei Chip-Systeme mit eigenen Farben — `.bf-chip` in `gk-belegfluss.js` (8 interne Seiten) und `.fchip` im Kundenportal. Dieselbe Belegart hatte in beiden einen eigenen Ton, und niemand hätte es gemerkt, wenn sie auseinanderlaufen. Hier stehen die WERTE; die Klassennamen der Ansichten bleiben, sie lesen sie nur. ⚠️ DER MODUS FÜR ROT-GRÜN-SCHWÄCHE IST KEINE SIMULATION. Er stellt die Palette auf Töne um, die bei Deuteranopie und Protanopie unterscheidbar bleiben — der Benutzer sieht dann MEHR, nicht weniger. Eingeschaltet wird er je Benutzer (`gk-belegfarben.js`), nicht vom System erraten. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Belegarten: je Grund / Schrift / Rand ────────────────────────────── Diese sieben Töne sind der Bestand — sie sind gelernt und bleiben. */ --gkb-auf-g:#fef3da; --gkb-auf-t:#7a5f10; --gkb-auf-r:#e3c377; /* Auftrag */ --gkb-bes-g:#e6ecf6; --gkb-bes-t:#3a4d75; --gkb-bes-r:#bdc9de; /* Bestellung */ --gkb-lie-g:#d8f0dd; --gkb-lie-t:#1a5e30; --gkb-lie-r:#a4d4b3; /* Lieferschein */ --gkb-rec-g:#dbe9f7; --gkb-rec-t:#17456e; --gkb-rec-r:#a6c4e4; /* Rechnung */ --gkb-gut-g:#ede4f7; --gkb-gut-t:#523281; --gkb-gut-r:#c9b1e4; /* Gutschrift */ --gkb-rek-g:#fde8e6; --gkb-rek-t:#96291f; --gkb-rek-r:#f0b5ad; /* Reklamation */ --gkb-ret-g:#fdeccd; --gkb-ret-t:#7d5000; --gkb-ret-r:#eecd93; /* Retoure */ --gkb-neu-g:#f4f6f8; --gkb-neu-t:#98a2ad; --gkb-neu-r:#e2e7ec; /* noch nichts */ /* ── Fortschritt: vier Stufen (Georgs Entscheid 22.08.) ───────────────── 0 angelegt · 1 in Produktion · 2 geliefert · 3 abgerechnet. Die HÖHE trägt die Aussage, die Farbe bestätigt sie. */ --gkb-f0:#8593a3; --gkb-f1:#e8a020; --gkb-f2:#2e9e5b; --gkb-f3:#1f7a45; --gkb-f0-h:12%; --gkb-f1-h:40%; --gkb-f2-h:72%; --gkb-f3-h:100%; --gkb-spur:#e6eaef; /* ungefüllter Teil des Balkens */ --gkb-schraffur:rgba(0,0,0,.055); } /* ── Dunkles Erscheinungsbild ────────────────────────────────────────────── ⚠️ Nur die Werte werden neu gesetzt, nie eine Regel: eine Farbe, die es nur innerhalb dieses Blocks gibt, fehlt im hellen Bild vollständig. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gkb-auf-g:#3a2f12; --gkb-auf-t:#f0cd7e; --gkb-auf-r:#6b5620; --gkb-bes-g:#1e2a3f; --gkb-bes-t:#a8bcdd; --gkb-bes-r:#3a4a66; --gkb-lie-g:#153524; --gkb-lie-t:#8ddba6; --gkb-lie-r:#2a5a3c; --gkb-rec-g:#152a3f; --gkb-rec-t:#95c2ea; --gkb-rec-r:#2b4a69; --gkb-gut-g:#2a1f3d; --gkb-gut-t:#c6a8ea; --gkb-gut-r:#4a3868; --gkb-rek-g:#3a1c19; --gkb-rek-t:#f0a89e; --gkb-rek-r:#6b342c; --gkb-ret-g:#3a2c10; --gkb-ret-t:#f0c982; --gkb-ret-r:#6b5220; --gkb-neu-g:#1b2733; --gkb-neu-t:#7b8896; --gkb-neu-r:#2c3a48; --gkb-spur:#2a3a4b; --gkb-schraffur:rgba(255,255,255,.07); } } :root[data-theme="dark"] { --gkb-auf-g:#3a2f12; --gkb-auf-t:#f0cd7e; --gkb-auf-r:#6b5620; --gkb-bes-g:#1e2a3f; --gkb-bes-t:#a8bcdd; --gkb-bes-r:#3a4a66; --gkb-lie-g:#153524; --gkb-lie-t:#8ddba6; --gkb-lie-r:#2a5a3c; --gkb-rec-g:#152a3f; --gkb-rec-t:#95c2ea; --gkb-rec-r:#2b4a69; --gkb-gut-g:#2a1f3d; --gkb-gut-t:#c6a8ea; --gkb-gut-r:#4a3868; --gkb-rek-g:#3a1c19; --gkb-rek-t:#f0a89e; --gkb-rek-r:#6b342c; --gkb-ret-g:#3a2c10; --gkb-ret-t:#f0c982; --gkb-ret-r:#6b5220; --gkb-neu-g:#1b2733; --gkb-neu-t:#7b8896; --gkb-neu-r:#2c3a48; --gkb-spur:#2a3a4b; --gkb-schraffur:rgba(255,255,255,.07); } /* ═══════════════════════════════════════════════════════════════════════════ ROT-GRÜN-SCHWÄCHE — eine eigene Palette, keine Simulation ═══════════════════════════════════════════════════════════════════════════ ⚠️ Bei Deuteranopie (~6 % der Männer) und Protanopie (~1 %) fallen Rot und Grün auf dieselbe bräunliche Achse. Unterscheidbar bleiben BLAU, GELB und die HELLIGKEIT. Deshalb: · Lieferschein wechselt von Grün auf Türkis-Blau · Reklamation wechselt von Rot auf ein kräftiges Orange · Retoure wird Braun, damit sie nicht mit der Reklamation verschmilzt · Auftrag bleibt Gelb, Rechnung bleibt Blau, Gutschrift bleibt Violett Zusätzlich trennt die HELLIGKEIT die drei Blautöne: Bestellung hell, Lieferschein mittel, Rechnung dunkel. Wer den Ton nicht sieht, sieht den Kontrast — und liest im Zweifel das Präfix der Belegnummer. ⚠️ `html` statt `:root`, damit dieselbe Regel auch bei gesetztem `data-theme` greift (gleiche Spezifität, spätere Position gewinnt). */ html.gkb-cvd { /* ⚠️ DIESE WERTE SIND GERECHNET, NICHT GEWÄHLT. Mein erster Entwurf (Türkis statt Grün, Orange statt Rot) war kaum besser als der Bestand: gemessen über die Deuteranopie-Matrix blieben 6 von 21 Farbpaaren unter ΔE 10, das engste war mit 2,0 sogar SCHLECHTER als vorher (2,3). Grund: sieben blasse Pastelltöne fallen bei Rot-Grün-Schwäche auf eine schmale Achse zusammen — die Sättigung reicht nicht für Abstand. Diese Palette wurde über 6.000 Durchläufe so gesucht, dass der KLEINSTE Abstand unter BEIDEN Sehweisen (Deuteranopie und Protanopie) am größten wird. Ergebnis: 3 von 21 Paaren unter ΔE 10, kleinster Abstand 7,0 statt 2,3. Jede Textfarbe hat mindestens 4,5:1 Kontrast zu ihrem Grund (WCAG AA). ⚠️ EHRLICH GESAGT bleibt es eine Annäherung: sieben helle Töne lassen sich bei Rot-Grün-Schwäche nicht sauber trennen — das ist eine physikalische Grenze. Der eigentliche Schutz ist das PRÄFIX der Belegnummer (AU, ND, R, RK …), das ohnehin dasteht, und die Zustandsform. Die Farbe ist die dritte Sicherung, nicht die erste. */ --gkb-auf-g:#f3efcc; --gkb-auf-t:#776b03; --gkb-auf-r:#ece181; /* Gelb L*94 */ --gkb-bes-g:#ccd4d8; --gkb-bes-t:#2a5f79; --gkb-bes-r:#93b0bf; /* Graublau L*84 */ --gkb-lie-g:#d7edf0; --gkb-lie-t:#0e7381; --gkb-lie-r:#93d9e2; /* Türkis L*92 */ --gkb-rec-g:#bacae2; --gkb-rec-t:#1750a6; --gkb-rec-r:#769cd5; /* Blau L*81 */ --gkb-gut-g:#f1e8f2; --gkb-gut-t:#92249e; --gkb-gut-r:#d7addc; /* Violett L*93 */ --gkb-rek-g:#f3d4b7; --gkb-rek-t:#954a04; --gkb-rek-r:#f1aa67; /* Orange L*87 */ --gkb-ret-g:#dcd7c8; --gkb-ret-t:#705c1f; --gkb-ret-r:#c7b88c; /* Braun L*86 */ --gkb-neu-g:#f4f6f8; --gkb-neu-t:#98a2ad; --gkb-neu-r:#e2e7ec; /* Der Fortschritt läuft auf der Blau-Gelb-Achse statt Grau→Grün */ --gkb-f0:#8593a3; --gkb-f1:#c8890e; --gkb-f2:#2b7d9e; --gkb-f3:#14496b; } @media (prefers-color-scheme: dark) { html.gkb-cvd:not([data-theme="light"]) { --gkb-auf-g:#3a3012; --gkb-auf-t:#f2d488; --gkb-auf-r:#6e5a20; --gkb-bes-g:#232e3c; --gkb-bes-t:#b2c0d2; --gkb-bes-r:#3d4b5c; --gkb-lie-g:#123039; --gkb-lie-t:#7fd0e2; --gkb-lie-r:#255a6b; --gkb-rec-g:#161f42; --gkb-rec-t:#a3b6ee; --gkb-rec-r:#2e3f7a; --gkb-gut-g:#2a1f3d; --gkb-gut-t:#c6a8ea; --gkb-gut-r:#4a3868; --gkb-rek-g:#40260d; --gkb-rek-t:#f5b478; --gkb-rek-r:#7a4a1c; --gkb-ret-g:#33291f; --gkb-ret-t:#d6bb98; --gkb-ret-r:#5e4c38; --gkb-f2:#4fa8c8; --gkb-f3:#2a6f96; } } html.gkb-cvd[data-theme="dark"] { --gkb-auf-g:#3a3012; --gkb-auf-t:#f2d488; --gkb-auf-r:#6e5a20; --gkb-bes-g:#232e3c; --gkb-bes-t:#b2c0d2; --gkb-bes-r:#3d4b5c; --gkb-lie-g:#123039; --gkb-lie-t:#7fd0e2; --gkb-lie-r:#255a6b; --gkb-rec-g:#161f42; --gkb-rec-t:#a3b6ee; --gkb-rec-r:#2e3f7a; --gkb-gut-g:#2a1f3d; --gkb-gut-t:#c6a8ea; --gkb-gut-r:#4a3868; --gkb-rek-g:#40260d; --gkb-rek-t:#f5b478; --gkb-rek-r:#7a4a1c; --gkb-ret-g:#33291f; --gkb-ret-t:#d6bb98; --gkb-ret-r:#5e4c38; --gkb-f2:#4fa8c8; --gkb-f3:#2a6f96; } /* ═══════════════════════════════════════════════════════════════════════════ DIE KLASSEN — anwendbar in jeder Ansicht ═══════════════════════════════════════════════════════════════════════════ */ /* Belegart — nur Farbe, keine Form. Die Ansicht bringt Größe und Abstände mit. */ .gkb-auf { background:var(--gkb-auf-g); color:var(--gkb-auf-t); border-color:var(--gkb-auf-r); } .gkb-bes { background:var(--gkb-bes-g); color:var(--gkb-bes-t); border-color:var(--gkb-bes-r); } .gkb-lie { background:var(--gkb-lie-g); color:var(--gkb-lie-t); border-color:var(--gkb-lie-r); } .gkb-rec { background:var(--gkb-rec-g); color:var(--gkb-rec-t); border-color:var(--gkb-rec-r); } .gkb-gut { background:var(--gkb-gut-g); color:var(--gkb-gut-t); border-color:var(--gkb-gut-r); } .gkb-rek { background:var(--gkb-rek-g); color:var(--gkb-rek-t); border-color:var(--gkb-rek-r); } .gkb-ret { background:var(--gkb-ret-g); color:var(--gkb-ret-t); border-color:var(--gkb-ret-r); } .gkb-neu { background:var(--gkb-neu-g); color:var(--gkb-neu-t); border-color:var(--gkb-neu-r); } /* Zustand — nur FORM, keine zweite Farbe. ⚠️ Genau hier liegt der Gewinn: ein Beleg bleibt lesbar, wenn die Farbe nicht ankommt — im Ausdruck, auf einem schlechten Bildschirm, bei Farbenschwäche. */ .gkb-fertig { border-width:2px; border-style:solid; } .gkb-problem { border-width:2px; border-style:dashed; } .gkb-storno { opacity:.5; text-decoration:line-through; text-decoration-thickness:1.5px; } /* ⚠️ TEST liegt ÜBER der Belegfarbe, ersetzt sie nicht. Georgs Regel vom 22.08.: „auch die Rechnung die zum Testauftrag gehört bleibt blau, weil Rechnung ist Rechnung." Eine eigene Testfarbe hätte genau das verhindert. */ .gkb-test { background-image:repeating-linear-gradient(135deg, var(--gkb-schraffur) 0 5px, transparent 5px 10px); } /* Das Zustandszeichen vor der Nummer (✓ ! ) */ .gkb-z { font-weight:700; font-size:.92em; margin-right:1px; } /* Fortschritt als Füllstand — vier Stufen. ⚠️ Die HÖHE ist die Aussage, nicht die Farbe: wer die Töne nicht unterscheidet, sieht trotzdem, welcher Auftrag am weitesten ist. */ .gkb-balken { display:block; width:7px; flex:none; align-self:stretch; min-height:30px; background:linear-gradient(to top, var(--gkb-fa, var(--gkb-f0)) 0 var(--gkb-fp, 12%), var(--gkb-spur) var(--gkb-fp, 12%) 100%); } .gkb-s0 { --gkb-fa:var(--gkb-f0); --gkb-fp:var(--gkb-f0-h); } .gkb-s1 { --gkb-fa:var(--gkb-f1); --gkb-fp:var(--gkb-f1-h); } .gkb-s2 { --gkb-fa:var(--gkb-f2); --gkb-fp:var(--gkb-f2-h); } .gkb-s3 { --gkb-fa:var(--gkb-f3); --gkb-fp:var(--gkb-f3-h); } /* ⚠️ Bewegung nur, wo sie gewünscht ist. */ @media (prefers-reduced-motion: reduce) { .gkb-balken { transition:none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ SENDUNGSVERFOLGUNG — in unserer Gestaltung, nicht in den Farben der Zusteller ═══════════════════════════════════════════════════════════════════════════ Georg 22.08.: „in unserer CI schön anzeigen". ⚠️ Ein Beleg mit DHL-Gelb, UPS-Braun und DPD-Rot nebeneinander sieht aus wie eine Litfaßsäule — der Zusteller steht als NAME da, die Farbe bleibt die des Hauses. */ .gkt { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 8px 3px 6px; border-radius:5px; text-decoration:none; background:var(--gkb-trk-g); border:1px solid var(--gkb-trk-r); color:var(--gkb-trk-t); font-size:11px; line-height:1.3; } a.gkt:hover { background:var(--gkb-trk-gh); border-color:var(--gkb-trk-rh); } a.gkt:focus-visible { outline:2px solid #e8a020; outline-offset:1px; } .gkt-i { font-size:12px; flex:none; } .gkt-z { font-weight:700; letter-spacing:.02em; flex:none; } /* ⚠️ Die Nummer ist eine Kennung — sie gehört in eine Schrift mit gleichen Ziffernbreiten, sonst kann man zwei Sendungen nicht untereinander vergleichen. `min-width:0` erlaubt das Kürzen in einer engen Zelle (die `1fr`-Falle). */ .gkt-n { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gkt-p { opacity:.55; font-size:10px; flex:none; } /* Ohne Verfolgungslink: sichtbar, aber nicht klickbar — kein Klick ins Leere. */ .gkt-tot { opacity:.7; cursor:default; } :root { --gkb-trk-g:#eef2f7; --gkb-trk-gh:#e3eaf3; --gkb-trk-t:#2c4462; --gkb-trk-r:#d5deea; --gkb-trk-rh:#bcccdf; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gkb-trk-g:#1c2836; --gkb-trk-gh:#243347; --gkb-trk-t:#a8bcd4; --gkb-trk-r:#2f3f52; --gkb-trk-rh:#3e5470; } } :root[data-theme="dark"] { --gkb-trk-g:#1c2836; --gkb-trk-gh:#243347; --gkb-trk-t:#a8bcd4; --gkb-trk-r:#2f3f52; --gkb-trk-rh:#3e5470; }