/* ============================================================================ tm_design/tokens.css — T.M. ERP Designsprache Stand 2026-08-20 · Version 3 DIE EINZIGE DATEI, DIE MAN ZUM UMFAERBEN ANFASST. Kein Baustein in components.css kennt einen Farbwert — alles laeuft ueber var(...). Wer eine Farbe aendern will, aendert sie hier, einmal, fuer alle Seiten. Zwei Modi: Hell :root (Entwurf B "Farbig") Dunkel [data-theme="dark"] (Entwurf C "Nachtwarm") Umschalten: setzen. theme.js macht das und merkt sich die Wahl pro Benutzer. FARBROLLEN — jede Familie mit fuenf Auspraegungen: --x Volltonfarbe fuer Text und Symbole --x-soft Hintergrund fuer Chips, Felder, weiche Flaechen --x-on-soft Textfarbe AUF --x-soft (immer AA-geprueft) --x-grad Verlauf fuer Kacheln und Balken --x-shadow farbiger Schattenwurf Familien (Stand V3.3.0, 02.09.2026 — zehn statt fuenf): gold (Marke) Auftraege, Picks, Benutzer info (blau) System, Verwaltung, Bildbearbeitung good (petrol) erledigt, verfuegbar, positiv crit (rot) negativ, ueberfaellig, Fehler plum (flieder) Rollen, Stammdaten, Marken teal (petrol- Zeit, Arbeitszeit, Stundenkonto, Anwesenheit cyan) amber (brand- offen, wartet, unerledigt orange) rose (magenta) Urlaub, Krank, Abwesenheit slate (blaugrau)neutrale Zaehler ohne Wertung indigo (tiefblau)Kunden, Parteien WELCHE FARBE WOFUER steht in components.css, Abschnitt „V3.3.0 — FARBFAMILIEN". Die Farbe ist eine Aussage, keine Zierde: dieselbe Bedeutung traegt auf jeder Seite dieselbe Familie. ============================================================================ */ /* V3.8.0 (14.09.2026): derselbe Block gilt zusaetzlich fuer JEDES Element mit [data-theme="light"], nicht nur fuer das . Nur dadurch laesst sich ein Ausschnitt einer Seite ausdruecklich hell zeichnen, waehrend die Seite dunkel steht — die Referenz TM_Designsystem.html zeigt damit jeden neuen Baustein hell UND dunkel nebeneinander (Abnahme D6). Kein neuer Farbwert, dieselbe Liste, nur ein zweiter Waehler mit derselben Spezifitaet; der Dunkelblock weiter unten schlaegt ihn am wie bisher. */ :root,[data-theme="light"]{ color-scheme:light; /* ---------- Flaechen ---------- */ --page:#f4f1fa; --surface:#ffffff; --surface-2:#fbfaff; --surface-3:#f3f0fb; --surface-sunken:#eae6f4; /* ---------- Tinte ---------- */ --ink:#1e1b29; --ink-2:#5d5872; --muted:#6e6887; --on-accent:#ffffff; /* Text auf Vollton-/Verlaufsflaechen */ /* ---------- Linien ---------- */ --line:#eceaf4; --line-2:#dedaea; /* ---------- Marke: Gold ---------- */ --gold:#d9ad55; --gold-deep:#a67f2c; --gold-text:#7c5d1c; --gold-soft:#fbf1da; --gold-on-soft:#7c5d1c; --gold-grad:linear-gradient(140deg,#e7c274,#b98c2c); --gold-shadow:0 12px 28px rgba(185,140,44,.32); --gold-ink:#33260a; /* Text auf Gold */ /* ---------- Info: Blau ---------- */ --info:#3d7dd6; --info-soft:#e2ecfb; --info-on-soft:#2a5fa8; --info-grad:linear-gradient(140deg,#2670d2,#17458f); --info-shadow:0 12px 28px rgba(23,69,143,.32); /* ---------- Gut: Petrol ---------- */ --good:#1c8468; --good-soft:#dcf2ef; --good-on-soft:#15756a; --good-grad:linear-gradient(140deg,#1b8265,#0d5a47); --good-shadow:0 12px 28px rgba(13,90,71,.32); /* ---------- Kritisch: Rot ---------- */ --crit:#c9483a; --crit-soft:#fce6e1; --crit-on-soft:#ab4433; --crit-grad:linear-gradient(140deg,#cf412d,#932614); --crit-shadow:0 12px 28px rgba(147,38,20,.32); /* ---------- Zusatz: Flieder ---------- */ --plum:#6d4aa5; --plum-soft:#eee7f9; --plum-on-soft:#5f3f92; --plum-grad:linear-gradient(140deg,#8253cf,#553490); --plum-shadow:0 12px 28px rgba(85,52,144,.32); /* ====================================================================== V3.3.0 (02.09.2026, Auftrag Haris) — fuenf weitere Familien. Alle gedeckt gehalten, gleiche Helligkeitsstufe wie die fuenf oberen: der helle Verlaufsanfang liegt bei jeder Familie so tief, dass weisser Text darauf mindestens 4.5:1 erreicht (wie good #1b8265 und info #2670d2). Deshalb kein Ton heller als noetig — grelle Kacheln waeren der eine Ausreisser, den man auf der Startseite sofort sieht. ====================================================================== */ /* ---------- Zeit: Petrol-Cyan ---------- Blauer als --good, damit „Arbeitszeit" und „erledigt" nebeneinander unterscheidbar bleiben. */ --teal:#1b7d92; --teal-soft:#dcf0f5; --teal-on-soft:#14606f; --teal-grad:linear-gradient(140deg,#1b7d92,#0d5568); --teal-shadow:0 12px 28px rgba(13,85,104,.32); /* ---------- Offen: Brandorange ---------- Klar von Gold getrennt: Gold ist eine helle Messingflaeche mit dunkler Schrift, Amber eine tiefe, orangere Flaeche mit weisser Schrift. */ /* V3.4.3 (Haris, 02.09.2026, Farbprobe Variante A „Mandarine"): kraeftiges Orange statt Braun */ --amber:#d9640f; --amber-soft:#fde9d7; --amber-on-soft:#9a4308; --amber-grad:linear-gradient(140deg,#ee7a1f,#c24d06); --amber-shadow:0 12px 28px rgba(194,77,6,.32); /* ---------- Abwesenheit: Magenta ---------- Nach Magenta gezogen, nicht nach Ziegelrot: --crit soll das einzige Alarmsignal bleiben. */ --rose:#b03f80; --rose-soft:#fbe3f0; --rose-on-soft:#97356d; --rose-grad:linear-gradient(140deg,#b8478a,#87275f); --rose-shadow:0 12px 28px rgba(135,39,95,.32); /* ---------- Neutral: Blaugrau ---------- Fuer Zahlen ohne Wertung. Bewusst die stillste Kachel der Reihe. */ --slate:#5b6478; --slate-soft:#e7e9ef; --slate-on-soft:#4c5568; --slate-grad:linear-gradient(140deg,#606a80,#3b4356); --slate-shadow:0 12px 28px rgba(59,67,86,.32); /* ---------- Kunden: Tiefblau ---------- Sitzt zwischen --info (Himmelblau) und --plum (Violett) und ist von beiden getrennt. */ --indigo:#4a55b8; --indigo-soft:#e5e7fa; --indigo-on-soft:#3f49a4; --indigo-grad:linear-gradient(140deg,#4d58bd,#2c3486); --indigo-shadow:0 12px 28px rgba(44,52,134,.32); /* ---------- Warnung = Goldfamilie (eigener Name fuer Lesbarkeit) ------- */ --warn:var(--gold-deep); --warn-soft:var(--gold-soft); --warn-on-soft:var(--gold-on-soft); --warn-grad:var(--gold-grad); /* ---------- Kennzahl-Kacheln ---------- Hell: Vollfarbkachel mit Verlauf und weissem Text. Dunkel: ruhige Flaeche, Zahl leuchtet in der Akzentfarbe. Die Bausteine lesen nur diese Variablen — nie die Farben direkt. */ /* Werte stehen weiter unten auf .tm-tile — siehe Hinweis dort. */ /* ---------- Schiene (Modulnavigation) ---------- */ --rail-bg:transparent; --rail-ink:var(--ink-2); --rail-hover:var(--surface-sunken); --rail-active-bg:var(--surface); --rail-active-ink:var(--ink); --rail-active-shadow:0 2px 6px rgba(40,30,70,.07),0 10px 24px rgba(40,30,70,.07); --rail-count-bg:var(--surface-sunken); --rail-count-ink:var(--ink-2); --rail-logo-bg:linear-gradient(145deg,#2b3335,#1d2426); /* ---------- Tabellenzeilen ---------- */ --row-bg:var(--surface-2); --row-hover:var(--surface-3); --row-sel:var(--gold-soft); /* ---------- Erhebung ---------- */ --shadow-1:0 1px 2px rgba(40,30,70,.05),0 4px 12px rgba(40,30,70,.05); --shadow-2:0 2px 6px rgba(40,30,70,.05),0 12px 32px rgba(40,30,70,.07); --shadow-3:0 8px 20px rgba(40,30,70,.10),0 24px 60px rgba(40,30,70,.14); /* ---------- V3.3.1 (02.09.2026): feste Kopfzeile ---------- --kopf-raum Hoehe des Streifens, den die stehende Kopfzeile oben belegt: 20 px Innenabstand von .tm-main + 44 px Kopfhoehe. Alles, was sich sonst an den oberen Fensterrand haengt (Ordnerbaum, Auswahlleiste, Sprungmarken), rechnet damit. --band-schatten Nur im gescrollten Zustand. Bewusst am unteren Rand des Sichtbaren: eine Haarlinie plus ein sehr weicher Abfall. Im Ruhezustand traegt das Band gar keinen Schatten. V3.7.4 (04.09.2026): EIN Schatten fuer BEIDE Haelften des Bandes — unter dem Logoblock (Menue gescrollt) und unter der Kopfzeile (Inhalt gescrollt). Beide holen ihn hier; wer ihn aendert, aendert beide. --band-auslauf ist die Hoehe des weichen Auslaufs darunter, ebenfalls fuer beide Seiten dieselbe. */ --kopf-raum:84px; /* V3.4.2 (02.09.2026): Kopfband = Hoehe des Logoblocks (20 + 44 + 20) — links und rechts identisch */ --band-schatten:0 1px 0 var(--line-2),0 14px 22px -16px rgba(40,30,70,.34); --band-auslauf:18px; --kopf-schatten:var(--band-schatten); /* alter Name aus V3.3.1, gleicher Wert */ /* ---------- V3.7.4 (04.09.2026): Breiten der Schiene ---------- --rail-w RASTERbreite (Spalte in .tm-app) — bleibt in der Vorschau bei 74 px, damit der Inhalt nicht ruckt. --rail-breite SICHTBARE Breite der Schiene selbst. In der Vorschau laufen die beiden bewusst auseinander (Raster 74, Schiene 250). */ /* V3.8.0 (Nachtrag 14.09.2026, B3): die offene Schiene ist breiter als die 250 px bis V3.7 — die langen Namen stehen voll da, ohne Auslassung. Nachlauf 14.09.2026 (Entscheidung Haris): 290 statt 270 px. Bei 270 px passten alle deutschen Namen, aber nicht „Purchasing & containers" — die englische Beschriftung brauchte 159 px, es standen 140 px zur Verfuegung. 290 px geben jeder Sprache Luft; geprueft wird beides (Pruefstand D4, deutsche und englische Sicht). */ --rail-offen:290px; --rail-zu:74px; --rail-breite:var(--rail-offen); /* V3.8.0: --rail-w hatte bisher keinen Wert im :root; die Rasterspalte kam aus dem Rueckfall `var(--rail-w,250px)` in .tm-app. Damit waere die Spalte stehen geblieben, waehrend die Schiene selbst waechst. Ab hier steht der Wert EINMAL hier und die Spalte folgt dem Token; die Zustandsregeln (html[data-rail="zu"] 74 px, Vorschau 74 px) sind spezifischer und schlagen ihn wie bisher. */ --rail-w:var(--rail-offen); /* ---------- V3.7.25 (BP-31 M1, 04.09.2026): Schleier ---------- Die abgedunkelte Flaeche unter einer Ueberlagerung — unter 900 px liegt sie zwischen der ausgeklappten Schiene und dem Inhalt (.tm-schleier), spaeter unter jedem Blatt-Dialog. Derselbe Wert, den .tm-modal-bg heute fest im Code stehen hat; er steht ab hier hier, damit es EINE Quelle gibt. */ --schleier:rgba(15,12,25,.55); /* ---------- Form ---------- */ --r-xl:24px; /* Karten, Kacheln */ --r-lg:15px; /* Zeilen, Icon-Felder */ --r-md:12px; /* Eingaben */ --r-pill:999px;/* Buttons, Chips, Balken */ --gutter:24px; --maxw:1500px; /* ---------- Abstaende (V3.8.0, Nachtrag 14.09.2026, B9) ---------- Acht Stufen, 4 px Raster. Jeder NEUE Baustein nimmt seine Abstaende von hier; bestehende Abstaende bleiben, wie sie sind (Nicht-Ziel der Runde: kein Umbau alter Masse). */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; /* ---------- Schrift ---------- Plus Jakarta Sans ist die Entwurfsschrift. Bitte SELBST HOSTEN, nicht per Google-Fonts-Link einbinden (Uebermittlung der Nutzer-IP in die USA). Faellt die Datei aus, greift sauber die Systemschrift. */ --font:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* ---------- Bewegung ---------- */ --t-fast:.15s cubic-bezier(.4,0,.2,1); --t:.2s cubic-bezier(.4,0,.2,1); /* V3.7.4 (04.09.2026): Die Schiene klappt mit einer Ausklang-Kurve auf und zu (schnell los, weich aus) — nicht mit der symmetrischen Standardkurve, sonst wirkt das Aufklappen schlagartig. --t-rail-text ist das kurze Ein- und Ausblenden der Beschriftungen darin. */ --t-rail:.22s cubic-bezier(.2,.8,.2,1); --t-rail-text:.12s cubic-bezier(.2,.8,.2,1); } /* ========================================================================== DUNKELMODUS — warm statt blaugrau. Der Grund hat einen Violettstich, damit Gold darauf nicht schmutzig wirkt. NUR AM BILDSCHIRM (`@media screen`, Regel „Druckansichten farbig", Haris 04.09.2026): Auf Papier gelten immer die Werte des Hellmodus. Der Dunkelmodus wird im Druck also nicht uebersetzt, sondern gar nicht erst eingeschaltet — dieselbe Seite druckt aus hell und dunkel byteidentisch, und zwar farbig (Gold bleibt Gold, Blau bleibt Blau). Das ist die „Token-Umschaltung im Druck" aus der Designsprache: sie steht hier, in der einen Datei fuer Farben, und nicht als Sonderregel in components.css. ========================================================================== */ @media screen{ [data-theme="dark"]{ color-scheme:dark; --page:#191722; --surface:#22202c; --surface-2:#292735; --surface-3:#302d3f; --surface-sunken:#2c2a3a; --ink:#f2f0f7; --ink-2:#a8a3bb; --muted:#8b879d; --on-accent:#171522; --line:#2e2b3b; --line-2:#383445; --gold:#e5c079; --gold-deep:#c9a047; --gold-text:#e5c079; --gold-soft:rgba(229,192,121,.16); --gold-on-soft:#e5c079; --gold-grad:linear-gradient(145deg,#e5c079,#c9a047); --gold-shadow:0 8px 22px rgba(201,160,71,.32); --gold-ink:#2c2208; --info:#79aef0; --info-soft:rgba(121,174,240,.16); --info-on-soft:#79aef0; --info-grad:linear-gradient(90deg,#79aef0,#4a83d6); --info-shadow:none; --good:#54cfa4; --good-soft:rgba(84,207,164,.16); --good-on-soft:#54cfa4; --good-grad:linear-gradient(90deg,#54cfa4,#2aa87c); --good-shadow:none; --crit:#f2897a; --crit-soft:rgba(242,137,122,.16); --crit-on-soft:#f2897a; --crit-grad:linear-gradient(90deg,#f2897a,#d75f4c); --crit-shadow:none; --plum:#b290e8; --plum-soft:rgba(178,144,232,.16); --plum-on-soft:#b290e8; --plum-grad:linear-gradient(90deg,#b290e8,#8a63c9); --plum-shadow:none; /* ---- V3.3.0 (02.09.2026): dieselben fuenf Familien im Dunkeln ---- Gleiches Muster wie oben: der Grundton wird aufgehellt (er traegt im Dunkeln die Zahl und den Icon-Grund), --x-soft ist immer derselbe Ton mit 16 % Deckung, --x-on-soft gleich dem Grundton, der Verlauf flach von hell nach mittel, kein Schatten. Die dezente Kacheltoenung entsteht daraus automatisch: .tm-tile mischt im Dunkeln 14 % --acc in die Flaeche (Abschnitt KACHELROLLEN unten) — dafuer ist ausser dem Grundton nichts je Familie zu setzen. */ --teal:#63c8dc; --teal-soft:rgba(99,200,220,.16); --teal-on-soft:#63c8dc; --teal-grad:linear-gradient(90deg,#63c8dc,#35a0b8); --teal-shadow:none; --amber:#f59e4a; /* V3.4.3: Mandarine, dunkle Fassung */ --amber-soft:rgba(245,158,74,.16); --amber-on-soft:#f59e4a; --amber-grad:linear-gradient(90deg,#f59e4a,#d3620f); --amber-shadow:none; --rose:#eb8fc4; --rose-soft:rgba(235,143,196,.16); --rose-on-soft:#eb8fc4; --rose-grad:linear-gradient(90deg,#eb8fc4,#c9639f); --rose-shadow:none; --slate:#9fb0cc; --slate-soft:rgba(159,176,204,.16); --slate-on-soft:#9fb0cc; --slate-grad:linear-gradient(90deg,#9fb0cc,#74849e); --slate-shadow:none; --indigo:#93a0f0; --indigo-soft:rgba(147,160,240,.16); --indigo-on-soft:#93a0f0; --indigo-grad:linear-gradient(90deg,#93a0f0,#6a78d4); --indigo-shadow:none; --rail-bg:transparent; --rail-ink:var(--ink-2); --rail-hover:#242231; --rail-active-bg:linear-gradient(120deg,rgba(229,192,121,.19),rgba(229,192,121,.07)); --rail-active-ink:#ffffff; --rail-active-shadow:none; --rail-count-bg:#2c2a3a; --rail-count-ink:var(--ink-2); --rail-logo-bg:linear-gradient(145deg,rgba(229,192,121,.24),rgba(229,192,121,.06)); --row-bg:var(--surface-2); --row-hover:var(--surface-3); --row-sel:rgba(229,192,121,.14); --shadow-1:none; --shadow-2:none; --shadow-3:0 24px 60px rgba(0,0,0,.55); /* V3.7.4: derselbe eine Schatten wie hell, nur dunkel abgestimmt — beide Haelften des Kopfbandes holen ihn aus diesem einen Token. */ --band-schatten:0 1px 0 var(--line-2),0 16px 26px -18px rgba(0,0,0,.8); --kopf-schatten:var(--band-schatten); /* V3.7.25 (BP-31 M1): Der Schleier ist im Dunkeln tiefer — der Grund darunter ist schon dunkel, ein aufgehellter Schleier wuerde ihn nur flau machen. */ --schleier:rgba(0,0,0,.62); } } /* Weicher Lichtschleier im Hintergrund — nur auf dem Seitengrund, nie auf Inhalten. Gibt der Flaeche Tiefe, ohne dass etwas blendet. V3.3.1 (02.09.2026): der Schleier steht jetzt als eigenes Token, weil ihn ausser dem Seitengrund noch die stehende Kopfzeile braucht. Sie legt sich beim Scrollen ueber den Inhalt und muss dabei genau denselben Grund zeigen — sonst zeichnet sich oben ein Rechteck ab. Beide nehmen background-attachment:fixed, dadurch sitzt der Schleier in Kopfzeile und Seitengrund an derselben Stelle im Fenster und wandert beim Scrollen nicht. */ :root{ --page-glow: radial-gradient(760px 400px at 8% -6%,var(--glow-a,rgba(217,173,85,.10)) 0,transparent 70%), radial-gradient(700px 380px at 96% 4%,var(--glow-b,rgba(61,125,214,.09)) 0,transparent 70%); } .tm{ background-color:var(--page); background-image:var(--page-glow); background-attachment:fixed; } @media screen{ [data-theme="dark"] .tm{ --glow-a:rgba(229,192,121,.11); --glow-b:rgba(93,150,228,.11); } } /* --------------------------------------------------------------------------- KACHELROLLEN Diese Variablen MUESSEN auf .tm-tile stehen, nicht im :root: sie greifen auf --acc-* zu, das erst die Farbfamilienklasse (.a-gold, .a-info, …) auf der Kachel setzt. Im :root waeren sie leer, die Kachel bliebe weiss. Hell: Vollfarbkachel mit Verlauf, weisser Text. Dunkel: ruhige Flaeche, Zahl leuchtet in der Akzentfarbe. --------------------------------------------------------------------------- */ .tm-tile{ --tile-bg:var(--acc-grad); --tile-ink:var(--tile-on,#fff); --tile-label:var(--tile-on,#fff); /* voll deckend: 84 % Weiss fiel unter 4.5 */ --tile-value:var(--tile-on,#fff); --tile-note:var(--tile-on,#fff); --tile-icon-bg:rgba(255,255,255,.22); --tile-icon-ink:var(--tile-on,#fff); --tile-shadow:var(--acc-shadow); --tile-blob-bg:rgba(255,255,255,.13); --tile-blob-blur:0px; --tile-blob-opacity:1; } @media screen{ [data-theme="dark"] .tm-tile{ /* V3.1.1 (31.08.2026, Wahl Haris): ganze Kachel dezent in der Familienfarbe. Blase als Radialverlauf statt filter:blur — der Weichzeichner erzeugte in Safari eine sichtbare Beschnittkante und Flackern beim Hover. */ --tile-bg:color-mix(in srgb, var(--acc) 14%, var(--surface)); --tile-ink:var(--ink); --tile-label:var(--ink-2); --tile-value:var(--acc); --tile-note:var(--muted); --tile-icon-bg:var(--acc); --tile-icon-ink:#171522; --tile-shadow:none; --tile-blob-bg:radial-gradient(circle, var(--acc) 0%, transparent 68%); --tile-blob-blur:0px; --tile-blob-opacity:.18; } } /* Rueckwaertskompatibilitaet */ /* ---------- Rueckwaertskompatibilitaet ---------- Namen aus tm_ui.css V1/V2, damit bestehende Seiten nicht brechen. */ :root,[data-theme="dark"]{ --dark:var(--ink); --dark-2:var(--ink-2); --gold-strong:var(--gold-text); --gold-light:var(--gold); --good-bg:var(--good-soft); --warn-bg:var(--warn-soft); --crit-bg:var(--crit-soft); --info-bg:var(--info-soft); --radius:var(--r-xl); --radius-sm:var(--r-md); --shadow:var(--shadow-2); --c1:#c99a3c; --c2:#2c5fb0; --c3:#c9483a; --c4:#1c8468; --c5:#6d4aa5; --c6:#4c8b2e; }