/* Tiger — die Merkmale. Eine Datei, zwei Schemata, sonst nichts. * * Herkunft: prototypes/tiger-map.html, Variablenblock unverändert übernommen * (05.09.2026, Neubau der Oberfläche). Nicht angepasst, nicht nachgebessert, * auch dort nicht, wo ich es anders gemacht hätte — das war die Ansage. * * WAS SICH GEGENÜBER DER ALTEN FASSUNG ÄNDERT: alles. Die alte Datei stammte * aus einem anderen Entwurf (Indigo #6E7BFF auf #0A0C10). Dieser hier ist die * Notion-Palette: Gold #D9932F auf #17171A dunkel, #8A5A16 auf #F4F4F2 hell. * Die alten Merkmalsnamen stehen unten als Verweise weiter, damit der * Baukasten und die 29 Vorlagen währenddessen weiterlaufen. Sie zeigen auf die * neuen Werte; keiner von ihnen trägt eine eigene Farbe. * * NEUN VON ZEHN ENTWÜRFEN SIND HIER IDENTISCH. Die Ausnahmen stehen unten bei * »Was die Entwürfe uneins sagt«. */ :root{ /* ── Aus dem Entwurf, Zeichen für Zeichen ─────────────────────────────── */ --bg:#17171A;--text:#D6D6D4;--dim:#ADADAA;--faint:#939391;--sheet:#212124; /* ABWEICHUNG vom Entwurf, bewusst — Julian am 05.09.2026 entschieden. Der Entwurf setzt --dim #9B9B98 und --faint #7E7E7B. Das sind 4,20:1 und 3,42:1 im schlechtesten Fall, gegen 4,5:1 (WCAG AA, normaler Text). Betroffen ist jede leise Zeile: Herkunftsangaben, der Nenner unter einer Zahl, die Achsenbeschriftung der Diagramme — genau die Stellen, an denen laenger als eine Sekunde gelesen wird. Farbton und Saettigung unveraendert, nur aufgehellt. Der Weg dorthin war nicht Augenmass: verify_kontrast.py ist das Orakel, und jeder Wert wurde danach so weit wie moeglich zum Entwurf ZURUECKgeschoben, solange die Pruefung gruen blieb. Jetzt 6,19:1 und 4,52:1. */ --glass:rgba(255,255,255,.055);--solid:rgba(255,255,255,.035); --stroke:rgba(255,255,255,.10);--stroke-soft:rgba(255,255,255,.06); --hover:rgba(255,255,255,.05);--hover-2:rgba(255,255,255,.085); --shadow:0 1px 0 rgba(255,255,255,.05) inset,0 14px 34px -22px rgba(0,0,0,.8); --mulde:rgba(0,0,0,.26); --blur:22px;--accent:#D9932F;--auf:#1A1408; --mint:#84B67F;--warm:#E78F71;--amber:#DFA93C;--gold:#D9932F; --p-gr:rgba(127,176,122,.16);--p-gr-t:#A7CBA0;--p-ro:rgba(224,122,85,.16);--p-ro-t:#E7A08C; --p-ge:rgba(223,169,60,.16);--p-ge-t:#E3C589;--p-bl:rgba(147,183,221,.15);--p-bl-t:#9FBEDF; --p-gy:rgba(255,255,255,.07);--p-gy-t:#A6A6A3; --land:rgba(255,255,255,.045);--landline:rgba(255,255,255,.13); --grid:rgba(255,255,255,.09);--r:8px;--w1:rgba(255,255,255,.05);--w2:rgba(217,147,47,.06); /* Gewicht der Nebenschrift. Im Entwurf nur in zwei Dateien als Merkmal (--w-sub:400), sonst je Regel gesetzt. BRIEF §7: 300 dunkel, 400 hell. */ --w-sub:300; /* ── Maße. Aus dem Entwurf gelesen, nicht gewählt. ────────────────────── */ /* --r ist 8px und steht oben, weil es aus dem Entwurfsblock stammt. Die drei kleineren Radien kommen aus den Regeln der Entwürfe: 6px Knöpfe, Felder, Navigationspunkte · 7px das Bildzeichen · 3px die Zustandsmarken · 99px die runden Filter. */ --r-klein: 6px; --r-marke: 3px; --r-zeichen: 7px; --r-voll: 99px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 32px; --s-7: 48px; /* ── Schrift ──────────────────────────────────────────────────────────── */ --font: 'Plus Jakarta Sans', system-ui, sans-serif; /* Die Belege setzen DIN 2014; Barlow ist im Entwurf ausdrücklich nur der kostenlose Platzhalter für die Vorschau am Bildschirm. */ --font-beleg: 'Barlow', 'DIN 2014', 'DIN', system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Grundgröße 13px: acht der zehn Entwürfe. Die beiden Kundenbildschirme setzen 13,5px — siehe unten. */ --fs-body: 13px; --fs-9: 9.5px; /* Achsenbeschriftung in den Diagrammen */ --fs-10: 10px; /* Abschnittsmarken, Versalien mit Sperrung */ --fs-105: 10.5px; --fs-11: 11px; --fs-115: 11.5px; --fs-12: 12px; --fs-125: 12.5px; --fs-13: 13px; --fs-135: 13.5px; --fs-14: 14px; --fs-145: 14.5px; --fs-16: 16px; --fs-17: 17px; --fs-19: 19px; --fs-20: 20px; /* Seitentitel */ --fs-21: 21px; /* Gruß auf der Karte */ --fs-22: 22px; /* Gruß auf Heute */ --fs-24: 24px; --fs-29: 29px; /* Titel Kunden und Kundenakte */ --fs-30: 30px; /* Kacheln im Lager */ --fs-38: 38px; /* der Bestand */ --w-body: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --lh-body: 1.5; --lh-eng: 1.1; --ls-titel: -.025em; --ls-kopf: -.02em; --ls-zahl: -.02em; --ls-versal: .14em; /* ── Die schwebende Leiste ────────────────────────────────────────────── */ /* Der Entwurf: top:8px, Polsterung 5px, Inhalt 28px hoch. */ --bar-top: 8px; --bar-h: 38px; --bar-raum: calc(var(--bar-top) + var(--bar-h)); --focus: 2px solid var(--accent); /* ── Verweise für den alten Baukasten ─────────────────────────────────── */ /* Kein eigener Wert, nur ein anderer Name. Sie verschwinden, sobald die letzte Vorlage umgestellt ist. */ --text-2: var(--dim); --text-muted: var(--dim); --text-faint: var(--faint); --glass-bg: var(--glass); --glass-2: var(--solid); --glass-blur: var(--blur); --glass-line: var(--stroke); --surface: var(--solid); --surface-2: var(--hover); --surface-3: var(--hover-2); --line: var(--stroke); --line-soft: var(--stroke-soft); --track: var(--grid); --mark: var(--faint); --bloom-1: var(--w1); --bloom-2: var(--w2); --bloom-3: transparent; --bloom-1-satt: var(--w1); --bloom-2-satt: var(--w2); --karte-maske: radial-gradient(72% 66% at 52% 46%, #000 58%, transparent 100%); --shadow-sm: var(--shadow); --shadow-md: var(--shadow); --shadow-lg: var(--shadow); --accent-2: var(--accent); --on-accent: var(--auf); --chip-ink: var(--auf); --ok: var(--mint); --warn: var(--amber); --danger: var(--warm); --info: var(--p-bl-t); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-line: color-mix(in srgb, var(--accent) 35%, transparent); --ok-soft: var(--p-gr); --ok-line: color-mix(in srgb, var(--mint) 35%, transparent); --warn-soft: var(--p-ge); --warn-line: color-mix(in srgb, var(--amber) 35%, transparent); --danger-soft: var(--p-ro); --danger-line: color-mix(in srgb, var(--warm) 35%, transparent); --info-soft: var(--p-bl); --info-line: color-mix(in srgb, var(--p-bl-t) 35%, transparent); --sticky-bg: var(--bg); --nav-w: 232px; --topbar-h: var(--bar-h); --r-sm: var(--r); --r-md: var(--r); --r-lg: var(--r); --r-full: var(--r-voll); --w-secondary: var(--w-sub); --w-thin: 300; --w-display: 600; --fs-xs: var(--fs-11); --fs-sm: var(--fs-12); --fs-base: var(--fs-13); --fs-md: var(--fs-135); --fs-lg: var(--fs-19); --fs-xl: var(--fs-20); --fs-2xl: var(--fs-29); --fs-3xl: var(--fs-38); --lh-tight: var(--lh-eng); --ls-kennzahl: var(--ls-zahl); --ls-ueberschrift: -.01em; --ls-zeilenname: -.005em; } [data-theme="light"]{ /* ── Aus dem Entwurf, Zeichen für Zeichen ─────────────────────────────── */ --bg:#F4F4F2;--text:#37352F;--dim:#656562;--faint:#6B6A66;--sheet:#FFFFFF; /* ABWEICHUNG vom Entwurf, bewusst — dieselbe Entscheidung wie oben. Entwurf: --dim #787774 (3,75:1) und --faint #8B8A85 (2,90:1). Jetzt 4,90:1 und 4,54:1. UND: die beiden muessen unterscheidbar BLEIBEN. Der kleinste tragende Schritt allein haette #6B6A67 und #6B6A66 ergeben — zwei Textstufen, die derselbe Grauwert sind. --dim steht deshalb dunkler als noetig, damit --faint darueber Platz hat und die Reihenfolge der beiden erhalten bleibt: dim ist die staerkere Nebenschrift, faint die leisere. */ --glass:rgba(255,255,255,.72);--solid:rgba(55,53,47,.035); --stroke:rgba(55,53,47,.10);--stroke-soft:rgba(55,53,47,.065); --hover:rgba(55,53,47,.045);--hover-2:rgba(55,53,47,.08); --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 30px -20px rgba(15,15,15,.28); --mulde:rgba(55,53,47,.07); --blur:22px;--accent:#8A5A16;--auf:#FFFFFF; --mint:#3A7356;--warm:#B3443B;--amber:#88640F;--gold:#B0761F; /* ABWEICHUNG vom Entwurf, bewusst. Entwurf: --mint #448361 (3,77:1), --warm #C4554D (3,70:1) und --amber #8A6410 (4,50:1 auf blankem Grund, aber darunter auf der eigenen Toenung). Alle drei tragen Zustaende — »bezahlt«, »ueber dem Takt«, »Meldepunkt erreicht« —, und ein Zustand, den man nicht lesen kann, ist keiner. Jetzt 4,67:1 · 4,62:1 · 4,54:1. --accent und --gold bleiben unveraendert: sie tragen schon. */ --p-gr:#DBEDDB;--p-gr-t:#28684A;--p-ro:#FFE2DD;--p-ro-t:#A8362D; --p-ge:#FDECC8;--p-ge-t:#7A5B14;--p-bl:#D3E5EF;--p-bl-t:#245A79; --p-gy:rgba(55,53,47,.06);--p-gy-t:#636360; --land:rgba(55,53,47,.045);--landline:rgba(55,53,47,.16); --grid:rgba(55,53,47,.09);--r:8px;--w1:rgba(255,255,255,.9);--w2:rgba(176,118,31,.07); /* BRIEF §7: die Nebenschrift steht hell einen Schnitt fetter. */ --w-sub:400; /* Der Rand, an dem die Karte in den Grund uebergeht. Steht in beiden Schemata, weil hell und dunkel verschieden weit ausblenden muessen — hier heute mit demselben Wert, aber ausdruecklich gesetzt statt still geerbt (verify_baukasten: »Hell und Dunkel setzen dieselben Merkmale«). */ --karte-maske: radial-gradient(72% 66% at 52% 46%, #000 58%, transparent 100%); } /* ── Was die Entwürfe uneins sagt ───────────────────────────────────────── * * Drei der zehn Dateien weichen im Variablenblock ab. Ich folge tiger-map.html, * weil das die benannte Quelle ist, und schreibe die Abweichung hierhin statt * sie zu verschweigen: * * tiger-map.html --land / --landline zusätzlich. Übernommen — die Karte * braucht sie, und niemand sonst benutzt sie. * tiger-crm.html --r:10px statt 8px, --w-sub als Merkmal, Grundgröße * tiger-crm-liste.html 13,5px statt 13px, Titel 29px/700 statt 20px/600. * Das sind die zwei ältesten Dateien im Ordner. Radius * und Grundgröße folgen hier der Karte; die 29px des * Titels stehen als --fs-29 im Maßstab, damit die beiden * Kundenbildschirme ihre eigene Titelgröße behalten, * ohne eigene Werte zu setzen. */