/* ============================================================================ * PROVIMEDIA ERP · DESIGN-TOKENS * ---------------------------------------------------------------------------- * Der EINE Ort fuer alles Visuelle: Farbe, Schrift, Abstand, Rundung, Tiefe, * Bewegung, Ebenen. Jede andere Datei liest von hier und legt nichts Eigenes fest. * * Warum das noetig war, gemessen am 20.09.2026 ueber 63 Oberflaechen: * 164 verschiedene Farben, 698 Farbwerte direkt im Markup, und die Textfarbe in * Karten kam auf 53 Seiten aus einer Alt-Regel statt aus der Designschicht. * * ZWEI REGELN, an denen alles haengt: * * 1. Ein THEME aendert nur Werte, nie Regeln. Damit ist jedes Theme — auch eine * spaetere Kundenmarke — eine Werteliste und kein zweites Stylesheet. * 2. Was hier keinen Token hat, hat auf einer Oberflaeche nichts zu suchen. Die * Zaehlung in tests/visual haelt das nach. * * DIESE FASSUNG AENDERT NICHTS AM AUSSEHEN. Sie traegt die Werte, die heute * gelten, damit der Umbau der Kaskade ohne einen einzigen sichtbaren Unterschied * geprueft werden kann. Die eigene Produkt-Optik kommt danach als zweiter Satz. * ========================================================================== */ /* ============================================================ 1 · SCHRIFTEN (self-hosted, kein Fremdserver) ============================================================ */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/plus-jakarta-sans-latin-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ======================================================== 2 · FARBE — Rollen, nicht Werte Der Name sagt, WOFUER die Farbe da ist. Welcher Wert dahintersteht, entscheidet das Theme weiter unten. ======================================================== */ /* Flaechen, von hinten nach vorne */ --ds-grund: #F4F3EF; /* der Untergrund der Anwendung */ --ds-flaeche: #FFFFFF; /* Karten, Tabellen, Eingaben */ --ds-flaeche-2: #FBFAF7; /* zweite Ebene: Kopfzeilen, Streifen */ --ds-flaeche-3: #F1EFE9; /* dritte Ebene: Vertiefungen, Rinnen */ --ds-band: #1F1E1C; /* dunkles Band: Seitenleiste */ /* Schrift */ --ds-text: #15161A; /* Fliesstext und Ueberschriften */ --ds-text-leise: #646B78; /* Sekundaeres: Labels, Hilfstexte */ --ds-text-leiser: #8A909B; /* Platzhalter, Randnotizen */ --ds-text-auf-band: rgba(255, 255, 255, 0.74); /* 9,57:1 auf dem Band */ /* 0,48 statt 0,45: bei 0,45 traegt der gedaempfte Text auf dem Band nur 4,40:1 und verfehlt die Schranke von 4,5:1 um Haaresbreite (gerechnet 20.09.2026 fuer BEIDE Baender). Mit 0,48 sind es 4,83:1. */ --ds-text-auf-band-leise: rgba(255, 255, 255, 0.48); --ds-text-auf-fuellung: #FFFFFF; /* Schrift auf gefuellten Flaechen */ /* Kanten */ --ds-kante: #E3E1DA; /* sichtbare Trennung */ --ds-kante-leise: #ECEAE3; /* angedeutete Trennung */ --ds-kante-stark: #D8D5CC; /* betonte Trennung */ --ds-kante-auf-band: rgba(255, 255, 255, 0.08); /* Die Kante eines BEDIENELEMENTS ist etwas anderes als eine dekorative Trennung: WCAG 1.4.11 verlangt fuer sie 3:1 gegen die Umgebung, weil man sonst nicht sieht, wo das Eingabefeld anfaengt. --ds-kante traegt das nicht und soll es auch nicht — sie trennt, sie umgrenzt nicht. Gemessen (aus dem Kundenportal uebernommen, wo dieser Wert schon steht): 3,55:1 gegen Weiss, 3,20:1 gegen den Grund, 3,40:1 gegen den Spaltenkopf. Die Probe hat 1,00:1 fuer Eingabefelder auf Anmeldung und Portal gemeldet — dieser Token ist die Antwort darauf. */ --ds-kante-bedienelement: #8C8879; /* Akzent: aktiv, Fokus, Erfolg, Fortschritt */ --ds-akzent: #1C6B5A; --ds-akzent-tief: #14564A; /* gedrueckt, Hover auf Fuellung */ --ds-akzent-zart: #E7F0ED; /* Tint-Flaeche */ --ds-akzent-auf-band: #4FB79C; /* Akzent im dunklen Band */ --ds-akzent-rgb: 28, 107, 90; --ds-akzent-auf-band-rgb: 79, 183, 156; /* Schleier auf dem dunklen Band: die Aufhellung beim Zeigen. Ein eigener Token, weil sie im Dunkelmodus nicht weiss bleiben kann. */ --ds-schleier-auf-band: rgba(255, 255, 255, 0.06); /* Bedeutung (entsaettigt, je mit zarter Flaeche) */ --ds-warnung: #B4791F; --ds-warnung-zart: #F5ECDA; --ds-warnung-tief: #8C5E17; --ds-gefahr: #B4433A; --ds-gefahr-zart: #F6E5E3; --ds-gefahr-tief: #9C3A32; --ds-hinweis: #646B78; --ds-hinweis-zart: #EDEEF0; --ds-hinweis-tief: #545A66; /* Dieselben drei als Zahlentripel — fuer rgba() mit eigener Deckkraft. Sie stehen hier, damit sie beim Themewechsel mitwandern; als Kopie in einer anderen Datei waeren sie genau die Sorte Wert, die zurueckbleibt. */ --ds-warnung-rgb: 180, 121, 31; --ds-gefahr-rgb: 180, 67, 58; --ds-hinweis-rgb: 100, 107, 120; /* ======================================================== 3 · SCHRIFT — Rollen und Skala ======================================================== */ --ds-schrift-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ds-schrift-display: 'Plus Jakarta Sans', 'Inter', -apple-system, 'Segoe UI', sans-serif; /* Eigene Rolle fuer die WORTMARKE: sie darf einen anderen Schnitt tragen als die Ueberschriften, ohne dass dafuer eine zweite Regel noetig waere. Im heutigen Thema faellt sie mit der Display-Schrift zusammen. */ --ds-schrift-marke: var(--ds-schrift-display); --ds-schrift-zahl: var(--ds-schrift-ui); /* Groessen: eine Leiter, kein Wildwuchs (gemessen waren 22 Abstands- und ueber ein Dutzend Schriftgroessen ohne erkennbare Schrittweite) */ --ds-text-xs: 0.72rem; /* Marken, Zaehler */ --ds-text-sm: 0.8125rem; /* Tabellen, Hilfstext */ --ds-text-md: 0.875rem; /* Bedienoberflaeche */ --ds-text-lg: 1rem; /* Fliesstext */ --ds-text-xl: 1.25rem; /* Abschnittstitel */ --ds-text-2xl: 1.5rem; /* Seitentitel */ --ds-text-3xl: 2rem; /* Kennzahlen */ --ds-fett-normal: 400; --ds-fett-halb: 500; --ds-fett-kraeftig: 600; --ds-fett-schwer: 700; --ds-zeilen-eng: 1.25; --ds-zeilen-mittel: 1.45; --ds-zeilen-weit: 1.6; --ds-sperrung-display: -0.01em; --ds-sperrung-marke: 0.14em; /* die gesperrte Grossbuchstaben-Marke */ /* ======================================================== 4 · ABSTAND — eine Leiter auf 4-Pixel-Basis ======================================================== */ --ds-abstand-1: 0.25rem; /* 4px */ --ds-abstand-2: 0.5rem; /* 8px */ --ds-abstand-3: 0.75rem; /* 12px */ --ds-abstand-4: 1rem; /* 16px */ --ds-abstand-5: 1.5rem; /* 24px */ --ds-abstand-6: 2rem; /* 32px */ --ds-abstand-7: 3rem; /* 48px */ --ds-abstand-8: 4rem; /* 64px */ /* ======================================================== 5 · RUNDUNG ======================================================== */ --ds-rund-klein: 6px; --ds-rund-mittel: 8px; --ds-rund-gross: 10px; /* Knoepfe, Eingaben */ --ds-rund-flaeche: 14px; /* Karten, Modale */ --ds-rund-voll: 9999px; /* Marken, Fortschritt */ /* Die SILHOUETTE des Aktiv-Markers. Sie ist ein WERT, keine Regel — damit bleibt ein Thema eine Werteliste und braucht kein eigenes Stylesheet, um eine eigene Form zu tragen. Hier: ein schlichtes Rechteck, also das, was heute zu sehen ist. */ --ds-aktiv-silhouette: polygon(0 0, 100% 0, 100% 100%, 0 100%); --ds-aktiv-breite: 3px; /* ======================================================== 6 · TIEFE — knapp, gerichtet, getoent (nie ein schwarzer Hof) ======================================================== */ --ds-tiefe-ruhe: 0 1px 2px rgba(21, 22, 26, 0.04); --ds-tiefe-leicht: 0 2px 8px rgba(21, 22, 26, 0.06); --ds-tiefe-schwebt: 0 4px 16px rgba(21, 22, 26, 0.08); /* ======================================================== 7 · BEWEGUNG — kurz, ruhig, abschaltbar ======================================================== */ --ds-dauer-kurz: 120ms; --ds-dauer-mittel: 180ms; --ds-dauer-lang: 240ms; --ds-verlauf: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out, kein Zurueckfedern */ /* ======================================================== 8 · EBENEN — benannt statt geraten Die Werte entsprechen dem heutigen Stapel (Bootstrap + js/kanban-modal-stack.js); ein Test pinnt 1040/1050/1055. ======================================================== */ --ds-ebene-basis: 1; --ds-ebene-klebend: 1020; --ds-ebene-seitenleiste: 1030; --ds-ebene-schleier: 1040; --ds-ebene-modal: 1050; --ds-ebene-aufklapp: 1055; --ds-ebene-meldung: 1080; --ds-ebene-tooltip: 1090; } /* ============================================================ 9 · BEWEGUNG AUS, wenn das System es verlangt ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --ds-dauer-kurz: 0.01ms; --ds-dauer-mittel: 0.01ms; --ds-dauer-lang: 0.01ms; } }