/* ========================================================================== tokens.css -- die gemeinsame Werteschicht ========================================================================== WOZU DIESE DATEI Gemessen am 26.08. ueber alle Arbeitsflaechen (werkzeuge/stil_pruefen.py): 292 Hex-Werte, davon 93 ausserhalb jedes Tokenblocks 71 verschiedene Abstaende -- von 1px bis 104px 17 verschiedene Radien -- 1 2 3 4 6 7 8 9 10 11 12 13 14 16 20 22 99 34 verschiedene Schattendefinitionen 40 verschiedene Schriftgroessen Eine Oberflaeche mit 71 verschiedenen Abstaenden hat kein System, sie hat eine Geschichte. Der Unterschied zwischen 10px und 11px ist keine Entscheidung, er ist ein Zufall, den niemand mehr ruecknehmen kann, weil niemand mehr weiss, ob er gemeint war. WAS DIESE DATEI IST UND WAS NICHT Sie ist REIN ADDITIV. Sie wird VOR allen anderen geladen und nimmt nichts weg: jedes bestehende Token bleibt, wo es ist, mit dem Wert, den es hat. Wer nach dieser Datei laedt, gewinnt jeden Konflikt. Deshalb kann sie nichts kaputtmachen und deshalb kollidiert sie mit keiner anderen Arbeit. SEIT DEM 16.09.2026 TRAEGT DIESE DATEI AUCH DIE FARBEN. Der Umbau auf das Verwaltungs-System (docs/polaris-redesign-2026-09-16.md, DESIGN.md) hat eine einzige Werteschicht fuer ALLE Seiten gebraucht: die --ds-* Tokens am Ende dieser Datei. Die alten Namen der einzelnen Dateien (--accent, --text, --wk-* ...) bleiben bestehen, zeigen aber auf --ds-*, statt eigene Werte zu tragen. Wer eine Farbe aendert, aendert sie HIER. Schrift: Inter fuer alles Bedienbare und Lesbare, JetBrains Mono fuer Kennungen. Beide liegen selbst gehostet in static/fonts.css. JEDER WERT HAT EINE BEGRUENDUNG. Ein Token ohne Grund ist kein System, sondern dieselbe Beliebigkeit mit einem schoeneren Namen. ========================================================================== */ :root{ /* ====================================================================== DICHTE -- drei Zeilenhoehen, mehr nicht ====================================================================== GEMESSEN, nicht geschaetzt, am 26.08. im Browser (1920x1080, /live2 mit 24 Dokumenten): .wk-zeile-el 58px hoch, Schrittweite 58,5px mit Befundnotiz 113px Inhalt beginnt bei 319px (Topbar 52 + Titelblock 116 + Suche/Chips 100 + Gruppenkopf 46) nutzbar 761px --> 13 Zeilen auf einem 1080er-Bildschirm Der Befund dahinter ist der eigentliche: werkstatt.css erklaert --wk-zeile:44px ausfuehrlich und ueberzeugend -- und die Zeile ist 58px hoch. Das Token beschreibt die Oberflaeche nicht. Es gilt fuer eine EINZEILIGE Zeile; die Dokumentzeile traegt zwei Zeilen (Titel 21px + Dateiname 20px + 16px Polsterung = 57-58px). WIEVIELE SOLLTEN ES SEIN? Bei einzeiliger Zeile auf 44px waeren es 17 statt 13 -- ein Drittel mehr Bestand pro Blick. Die vierte Zeile kostet aber den vollen Dateinamen, und der ist eine Produkt- entscheidung (docs/ui-review-werkstatt.md: "voller Dateiname, 44px Zeile bei 14px Schrift, Lesebrille"), keine Gestaltungsfrage. Deshalb wird sie hier NICHT still getroffen: die Leiter bietet beides an, die Vorgabe fuer eine zweizeilige Liste bleibt --zeile-weit, und der Vorschlag steht im Bericht. Drei Stufen, weil drei Arbeitsweisen vorkommen: ueberfliegen, arbeiten, lesen. Eine vierte waere keine vierte Arbeitsweise. */ /* Ueberfliegen: einzeilig, dichteste vertretbare Stufe. Attio und Linear fahren hier ~36px; darunter wird das Ziel fuer die Maus zu klein. */ --zeile-eng:36px; /* Arbeiten: einzeilig mit Platz fuer ein 24px-Bedienelement in der Zeile. Der Wert, den werkstatt.css begruendet und den es meint. */ --zeile-normal:44px; /* Lesen: zweizeilig (Titel + Unterzeile). Der gemessene Ist-Zustand der Dokument- und Befundlisten -- als Stufe benannt statt als Zufall. */ --zeile-weit:58px; /* ====================================================================== ABSTAND -- eine Leiter auf 4px-Basis ====================================================================== Heute 71 verschiedene Werte. Sieben Stufen decken alles ab, was eine Oberflaeche wirklich unterscheiden muss; was danebenliegt, wird eingefangen. Die Sprungweite waechst nach oben (4-4-4-8-8-16), weil grosse Abstaende gröber unterschieden werden als kleine: zwischen 4 und 8 liegt eine sichtbare Entscheidung, zwischen 44 und 48 nicht. */ --raum-1:4px; /* innerhalb eines Bauteils: Glyphe zu Wort */ --raum-2:8px; /* Polsterung einer Zeile, Abstand verwandter Zeilen */ --raum-3:12px; /* Polsterung eines Bedienelements */ --raum-4:16px; /* Polsterung einer Karte, Spalte zu Spalte */ --raum-5:24px; /* Bauteil zu Bauteil */ --raum-6:32px; /* Abschnitt zu Abschnitt */ --raum-7:48px; /* Bereich zu Bereich, Seitenrand */ /* ====================================================================== RADIUS -- drei Stufen, und eine Form ====================================================================== Heute 17 verschiedene Radien. Drei reichen, und sie folgen derselben 4px-Leiter wie die Abstaende -- ein Radius ist ein Abstand von der Ecke, keine eigene Groessenwelt. */ /* Seit dem Umbau auf das Verwaltungs-System (16.09.): 8 / 12 / 16. Die alten 6 / 10 / 14 sind je eine Stufe weicher geworden, damit Knopf, Karte und Dialog dieselbe Leiter fahren wie --ds-r-* weiter unten. */ --r-klein:var(--ds-r-2); /* Eingabefelder, Chips, Pillen, Glyphenfelder */ --r-karte:var(--ds-r-3); /* Karten, Panels, Menues */ --r-flaeche:var(--ds-r-4); /* grosse Flaechen: Dialog, Blattrand, Vorschau */ /* KEINE vierte Stufe, sondern eine FORM: 999px ist keine Groessenangabe, sondern die Anweisung "halbkreisfoermige Enden". Sie steht hier, damit Zaehler nicht wieder mit 99, 100 und 999 in drei Dateien auftauchen. */ --r-pille:999px; /* ====================================================================== LINIE -- zwei, nach Aufgabe getrennt ====================================================================== Getrennt wird durch Abstand und hoechstens eine Haarlinie. Zwei Aufgaben, zwei Toene: haar trennt ZEILEN IN einer Liste. Sie muss sichtbar sein, ohne die Liste zu vergittern -- bei 20 Zeilen untereinander addiert sich jede Linie zur Unruhe. kante trennt BEREICHE voneinander (Seitenleiste zu Inhalt, Kopfzeile zu Tabelle). Sie darf deutlicher sein, weil sie einmal vorkommt und nicht zwanzigmal. DIE TOENE SIND NICHT NEU. Es sind die aus werkstatt.css, dort gerechnet und gegen ein Referenzband geprueft (Stripe 1,232 · Notion 1,216 · Linear 1,295 · GitHub 1,453): --wk-linie 1,455:1 auf der Karte, --wk-linie-stark eine Stufe darueber. Sie werden hier nicht neu erfunden, sondern aus der einen Datei, die sie belegt hat, in die gemeinsame Schicht gehoben. */ --linie-ton-haar:var(--ds-rand); --linie-ton-kante:var(--ds-rand-hover); --linie-haar:1px solid var(--linie-ton-haar); --linie-kante:1px solid var(--linie-ton-kante); /* ====================================================================== SCHATTEN -- genau einer ====================================================================== Heute 34 verschiedene Definitionen, von `0 1px 2px rgba(...,.06)` bis `0 40px 90px rgba(0,0,0,.5)`. Ein Schatten sagt: DIESES LIEGT UEBER JENEM. Das ist genau EINE Aussage, und sie kommt genau an EINER Stelle vor -- bei einer Ueberlagerung (Menue, Dialog, Schwebekarte). Eine Karte, die auf einer Seite liegt, liegt nicht ueber ihr; sie traegt ihre Ebene durch die eigene Flaeche. werkstatt.css hat das fuer sich schon entschieden und den alten 30px-Schlagschatten dabei verloren -- er musste eine Ordnung behaupten, die es inzwischen wirklich gibt. Zwei Lagen, beide weich: die enge Lage zeichnet die Kante, die weite traegt die Hoehe. Kein dritter Wert, keine farbige Lage. */ --schatten-ueberlagerung:var(--ds-schatten-ueber); /* ====================================================================== SCHRIFT -- fuenf Stufen mit ihren Zeilenhoehen ====================================================================== Heute 40 verschiedene Groessen, 58 % davon unter 13px. Der Nutzer traegt Lesebrille (DESIGN.md). 14px ist die Arbeitsgroesse, und nichts Kritisches steht darunter. Es sind woertlich die fuenf Stufen, die werkstatt.css seit ihrer Neufassung faehrt (24/17/14/13/12) -- keine sechste Skala, sondern die bereits begruendete, in die gemeinsame Schicht gehoben. Die Zeilenhoehe faellt mit steigender Groesse: 1,5 traegt einen Fliesstext, unter einer 24px-Ueberschrift reisst sie die Zeilen auseinander. */ --schrift-mini:12px; --zh-mini:1.4; /* Beschriftung, die daneben im Klartext steht */ --schrift-neben:13px; --zh-neben:1.45; /* Unterzeile, Zeitangabe, Herkunft */ --schrift-basis:14px; --zh-basis:1.5; /* die Arbeitsgroesse */ --schrift-kopf:17px; --zh-kopf:1.35; /* Abschnittskopf */ --schrift-titel:24px; --zh-titel:1.25; /* Bildschirmtitel, genau einer je Ansicht */ /* ZIFFERN SIND EINE KOLONNE. Eine Spalte mit Betraegen muss man von oben nach unten lesen koennen, ohne zu springen. Dafuer muessen alle Ziffern gleich breit sein -- sonst wandert das Komma von Zeile zu Zeile. `tabular-nums` schaltet das um; `"tnum" 1` ist derselbe Schalter fuer Schriften, die die hoehere Ebene nicht anbieten. Beides, weil beides vorkommt. */ --ziffern:tabular-nums; --ziffern-feature:"tnum" 1; } /* -------------------------------------------------------------------------- Dunkelmodus -- nur die Toene, die sich wirklich umdrehen. Masse drehen sich nicht um: ein Abstand von 16px ist dunkel derselbe Abstand. Umgedreht werden die zwei Linientoene (dunkel liegt die Linie HELLER als die Flaeche, nicht dunkler) und der Schatten (auf dunklem Grund traegt ein Schatten aus 6 % Schwarz nichts mehr; er braucht mehr Deckung und weniger Streuung). `data-theme` wird von jeder Seite dieses Projekts ausdruecklich gesetzt (templates/live2.html, dashboard.js, admin.js, live.js) -- deshalb genuegt dieser eine Block, und es braucht keinen zweiten fuer prefers-color-scheme. -------------------------------------------------------------------------- */ [data-theme="dark"]{ /* Linien und Schatten folgen seit dem 16.09. den --ds-* Werten; die Umkehr steht dort im Dunkelblock. */ } /* -------------------------------------------------------------------------- Eine einzige Hilfsklasse, und zwar fuer die Ziffern. Sie steht hier statt in jeder Datei einzeln, weil sie in jeder Datei dasselbe tut und weil `font-variant-numeric` und `font-feature-settings` zusammengehoeren -- getrennt gesetzt vergisst man die zweite Haelfte, und dann stimmt die Kolonne in genau den Schriften nicht, die es betrifft. Die Familie steht bewusst NICHT drin: JetBrains Mono heisst in den Dateien --mono, --wk-mono und --wk-mono. Die Klasse setzt nur, was ueberall gleich ist. -------------------------------------------------------------------------- */ .ziffern{ font-variant-numeric:var(--ziffern); font-feature-settings:var(--ziffern-feature); } /* -------------------------------------------------------------------------- Aufbau -- ein Diagramm laeuft EINMAL hoch, beim ersten Erscheinen WARUM HIER UND NICHT IN werkstatt.css. Der Auftrag nannte werkstatt.css als Ort fuer die gemeinsame Mechanik. Nachgemessen laedt die aber nur EIN Template (live2.html) -- Admin und Dashboard sehen sie nie: admin.html tokens.css admin.css fonts.css admin_user.html tokens.css admin.css fonts.css dashboard.html tokens.css dashboard.css fonts.css live2.html tokens.css werkstatt.css fonts.css tokens.css ist die einzige Datei, die alle vier laden -- und sie ist genau dafuer da: "die gemeinsame Werteschicht", rein additiv, vor allen anderen geladen (siehe Kopf dieser Datei). WAS DIE KLASSE TUT UND WAS NICHT. Sie traegt NUR den Uebergang. Start- und Zielwert setzt static/aufbau.js; der Zielwert ist immer der, der ohnehin schon im Markup steht. Ohne JS passiert nichts und jedes Diagramm ist sofort vollstaendig -- diese Klasse steht dann an keinem Element. DIE KLASSE WIRD WIEDER ABGENOMMEN, sobald der Aufbau durch ist. Bliebe sie stehen, bekaeme jede spaetere Aenderung von width/height ungefragt 0,85 s. An einem Live-Fortschrittsbalken waere das genau der Fehler, den der Kommentar an .kat-progress (dashboard.css) schon einmal beschrieben hat. DIE ZEITEN waren aus static/marketing.css:489-497 und static/marketing.js:171 uebernommen. Seit dem 27.08. laufen sie auseinander: dort 0,85 s, hier 1,3 s. Der Grund steht bei DAUER_MS in static/aufbau.js. ZU DESIGN.md "Bewegung 150-250 ms". Diese Regel gilt dem WECHSEL eines Zustands: ein Balken, der von 41 % auf 43 % rueckt. Sie gilt nicht dem einmaligen AUFTRITT eines fertigen Bildes -- dafuer stehen die 0,7-1,8 s, die im Repo an mehreren Stellen bereits laufen. Hergeleitet und mit Zeilen belegt in docs/diagramme-bewegung-27-08.md. -------------------------------------------------------------------------- */ :root{ /* DIESE ZAHL UND static/aufbau.js DAUER_MS SIND DIESELBE ZAHL. Sie stehen an zwei Stellen, weil die eine den Uebergang faehrt und die andere die Uhr stellt, die die Klasse wieder abnimmt -- laufen sie auseinander, bleibt die Klasse entweder zu frueh weg (der Balken springt auf den Endwert) oder zu lange stehen (Regel 3 gebrochen). Wer eine aendert, aendert beide. WARUM 1,3 s UND NICHT MEHR 0,85 s: die Herleitung steht bei DAUER_MS in static/aufbau.js. Kurz: die Kurve unten legt 90 % des Wegs in den ersten 44 % der Zeit zurueck, 0,85 s waren also rund 370 ms sichtbare Bewegung. Die Marketing-Seite (marketing.css:495) bleibt bewusst bei 0,85 s -- auch das steht dort begruendet. */ --aufbau-dauer:1.3s; /* Kein Bounce, kein Elastic -- DESIGN.md verbietet beides. Der zweite Kontrollpunkt liegt bei 1, nicht darueber. Dieselbe Kurve wie .viz-bar-fill in dashboard.css. */ --aufbau-kurve:cubic-bezier(.2,.7,.2,1); } /* FUER GENAU EINEN FRAME: was hier steht, wird GESETZT und nicht angefahren. Der Grund ist auf /admin gemessen worden. .balken-fuell traegt bereits `transition: height .2s` -- der eigene Takt der Seite fuer den WECHSEL eines Werts. Setzt aufbau.js darauf den Startwert 0, wird der nicht uebernommen, sondern ueber 200 ms ANGEFAHREN. Beim erzwungenen Umbruch einen Sekunden- bruchteil spaeter steht die Saeule deshalb noch fast auf ihrem Endwert, und der Aufbau hat nichts mehr zu tun: die Klasse sitzt, transition-duration sagt 0,85 s, und sichtbar passiert nichts. Das !important ist hier das Mittel der Wahl und keine Bequemlichkeit: diese Regel muss JEDE Komponentenregel schlagen, egal welcher Spezifitaet, und sie steht genau einen Frame lang am Element. */ .aufbau-halt{transition:none !important} /* Der Verzug steht als eigene Variable am Element, weil ihn aufbau.js je Element rechnet: die Vorlage sagt 0,09 s, aber bei 30 Saeulen ist die Summe die Zahl, die zaehlt. Begruendung in aufbau.js, Funktion `versatz`. stroke-dashoffset STEHT NEBEN stroke-dasharray, seit der Ring auffaechert. Ein Ringsegment ist durch seine Laenge (dasharray) UND seine Lage (dashoffset) bestimmt; nur die Laenge zu fahren laesst jedes Segment dort wachsen, wo es ohnehin sitzt. Beides zusammen laesst sie bei 0 Uhr starten und auffaechern (aufbau.js, Art "ring"). FUER DEN DONUT IM DASHBOARD-CHAT (Art "strich") aendert diese Zeile nichts: dort ruehrt aufbau.js den dashoffset nicht an, also faehrt auch nichts. */ .aufbau-laeuft{ transition:width var(--aufbau-dauer) var(--aufbau-kurve), height var(--aufbau-dauer) var(--aufbau-kurve), flex-basis var(--aufbau-dauer) var(--aufbau-kurve), flex-grow var(--aufbau-dauer) var(--aufbau-kurve), stroke-dasharray var(--aufbau-dauer) var(--aufbau-kurve), stroke-dashoffset var(--aufbau-dauer) var(--aufbau-kurve); transition-delay:var(--aufbau-verzug,0s); } /* Bewegungsarmer Betrieb: aufbau.js setzt bei `reduce` schon gar keinen Startwert, die Klasse landet also nie an einem Element. Diese Regel ist der zweite Riegel -- fuer den Fall, dass jemand die Klasse spaeter von Hand ins Markup schreibt. Der Endzustand steht sofort. */ @media (prefers-reduced-motion:reduce){ .aufbau-laeuft{transition:none} } /* ========================================================================== --ds-* DAS VERWALTUNGS-SYSTEM (seit 16.09.2026) ========================================================================== Eine Werteschicht fuer jede Seite: Werkstatt, Projekte, Konto, Admin, Anmeldung und die oeffentlichen Seiten. Der Stil folgt einer nuechternen Verwaltungsoberflaeche: graue Seite, weisse Karten mit feiner Kante, ein dunkler Hauptknopf, Farbe nur fuer Zustand und Verweis. Nachgebaut nach Mass und Wirkung, nicht abgeschrieben: jede Zeile hier ist eigener Code (Hintergrund und Grenze: docs/polaris-redesign-2026-09-16.md). DIE LEITER Graustufen #fff #fdfdfd #fafafa #f7f7f7 #f3f3f3 #f1f1f1 #ebebeb #e3e3e3 #d4d4d4 #ccc #b5b5b5 #8a8a8a #616161 #4a4a4a #303030 #1a1a1a Abstand 4px-Raster (--raum-* oben), Karte 16px innen, 16px Luecke Radius 4 / 8 / 12 / 16 / rund Schrift Inter; 11 / 12 / 13 / 14 / 20 / 24 / 30 / 36 px Gewichte 450 / 500 / 600 / 700 WARUM DIE ARBEITSSCHRIFT 14px BLEIBT. Das Vorbild setzt Fliesstext auf 13px. Die Werkstatt bleibt bei 14px (--schrift-basis), weil der Nutzer mit Lesebrille arbeitet (DESIGN.md, docs/ui-review-werkstatt.md). 14px ist die grosse Fliesstextstufe derselben Skala, keine eigene Groesse. ========================================================================== */ :root{ color-scheme:light; /* --- Schrift --------------------------------------------------------- */ --ds-schrift:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --ds-schrift-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ds-gew-normal:450; --ds-gew-mittel:500; --ds-gew-halbfett:600; --ds-gew-fett:700; /* Groesse / Zeilenhoehe je Stufe */ --ds-t-xs:11px; --ds-zh-xs:12px; --ds-t-sm:12px; --ds-zh-sm:16px; --ds-t-md:13px; --ds-zh-md:20px; --ds-t-lg:14px; --ds-zh-lg:20px; --ds-t-h-lg:20px; --ds-zh-h-lg:24px; /* Seitentitel */ --ds-t-h-xl:24px; --ds-zh-h-xl:32px; /* Kennzahl, grosse Ueberschrift */ --ds-t-h-2xl:30px; --ds-zh-h-2xl:40px; --ds-t-h-3xl:36px; --ds-zh-h-3xl:48px; --ds-sperr-dicht:-0.2px; --ds-sperr-dichter:-0.3px; --ds-sperr-am-dichtesten:-0.54px; /* --- Radius ---------------------------------------------------------- */ --ds-r-1:4px; --ds-r-2:8px; /* Knopf, Feld, Abzeichen, Menuepunkt */ --ds-r-3:12px; /* Karte, Popover */ --ds-r-4:16px; /* Dialog */ --ds-r-voll:9999px; /* --- Masse von Bauteilen -------------------------------------------- */ --ds-knopf-hoehe:28px; --ds-knopf-hoehe-gross:36px; --ds-knopf-hoehe-klein:24px; --ds-feld-hoehe:32px; --ds-kopfleiste-hoehe:56px; --ds-nav-breite:240px; --ds-nav-zeile:32px; --ds-karte-innen:16px; --ds-karte-luecke:16px; --ds-zelle-innen:6px 12px; --ds-seite-breite-schmal:662px; /* einspaltige Seite (Drive) */ --ds-seite-breite:998px; /* schmale Seite (Formular, Einstellungen) */ --ds-seite-breite-weit:1200px; /* --- Flaechen -------------------------------------------------------- */ --ds-grund:#f1f1f1; /* die Seite */ --ds-flaeche:#ffffff; /* Karte */ --ds-flaeche-hover:#f7f7f7; --ds-flaeche-aktiv:#f3f3f3; --ds-flaeche-gewaehlt:#f1f1f1; --ds-flaeche-2:#f7f7f7; /* Tabellenkopf, Nebenbereich einer Karte */ --ds-flaeche-2-hover:#f1f1f1; --ds-flaeche-3:#f3f3f3; /* Zitat, Codeblock, Leerfeld */ --ds-flaeche-invers:#303030; /* Tooltip */ --ds-kopfleiste:#1a1a1a; --ds-kopfleiste-text:#e3e3e3; --ds-kopfleiste-feld:#303030; --ds-kopfleiste-hover:rgba(227,227,227,.12); --ds-kopfleiste-linie:rgba(227,227,227,.22); --ds-kopfleiste-platzhalter:#b5b5b5; --ds-kopfleiste-text-2:#b5b5b5; --ds-nav-grund:#ebebeb; --ds-nav-hover:#f1f1f1; --ds-nav-gewaehlt:#fafafa; --ds-schleier:rgba(0,0,0,.71); /* --- Fuellungen (Knoepfe) ------------------------------------------- */ --ds-fuell:#ffffff; --ds-fuell-hover:#fafafa; --ds-fuell-aktiv:#f7f7f7; --ds-fuell-gewaehlt:#cccccc; --ds-fuell-primaer:#303030; --ds-fuell-primaer-hover:#1a1a1a; --ds-fuell-primaer-aktiv:#1a1a1a; --ds-fuell-primaer-aus:rgba(0,0,0,.17); --ds-fuell-transparent-hover:rgba(0,0,0,.05); --ds-fuell-transparent-aktiv:rgba(0,0,0,.08); --ds-fuell-aus:rgba(0,0,0,.05); --ds-fuell-neutral:rgba(0,0,0,.06); /* neutrales Abzeichen */ --ds-fuell-leiste:#e3e3e3; /* Fortschritt, Spur */ /* --- Schrift und Symbol --------------------------------------------- */ --ds-text:#303030; --ds-text-2:#616161; --ds-text-3:#6a6a6a; /* stillste lesbare Schrift, 5,3:1 auf Weiss */ --ds-text-aus:#b5b5b5; --ds-text-auf-primaer:#ffffff; --ds-text-auf-krit:#ffffff; --ds-toast-grund:#1a1a1a; --ds-toast-text:#e3e3e3; --ds-link:#005bd3; --ds-link-hover:#004299; --ds-link-aktiv:#002e6a; --ds-icon:#4a4a4a; --ds-icon-2:#8a8a8a; /* --- Linien ---------------------------------------------------------- */ --ds-rand:#e3e3e3; --ds-rand-2:#ebebeb; --ds-rand-hover:#cccccc; /* LINIEN AUF DER SEITE statt auf der Karte (17.09.2026, docs/widgets- aufloesen-2026-09-17.md). Eine Liste liegt seitdem flach auf dem Grau, nicht mehr in einer weissen Karte. --ds-rand ist fuer Weiss gerechnet und verschwindet fast auf #f1f1f1. Diese beiden halten auf dem Grau dieselbe Staerke wie --ds-rand / --ds-rand-2 auf Weiss: --ds-linie-grund 1,31:1 auf --ds-grund (--ds-rand auf Weiss 1,28) --ds-linie-grund-2 1,20:1 auf --ds-grund (--ds-rand-2 auf Weiss 1,19) --ds-rand auf dem Grau: 1,14:1. */ --ds-linie-grund:#d4d4d4; /* Kopf- und Gruppenlinie einer flachen Liste */ --ds-linie-grund-2:#dddddd; /* Linie zwischen zwei Zeilen */ --ds-rand-feld:#8a8a8a; --ds-rand-feld-hover:#616161; --ds-rand-feld-aktiv:#1a1a1a; --ds-rand-fokus:#005bd3; --ds-feld-grund:#fdfdfd; --ds-feld-grund-hover:#fafafa; /* --- Zustaende: Flaeche / Schrift / Rand / Symbol / Abzeichen --------- */ --ds-info-flaeche:#eaf4ff; --ds-info-text:#003a5a; --ds-info-rand:#a8d8ff; --ds-info-icon:#0094d5; --ds-info-abz:#d5ebff; --ds-info-fuell:#91d0ff; --ds-erfolg-flaeche:#cdfed4; --ds-erfolg-text:#014b40; --ds-erfolg-rand:#92fcac; --ds-erfolg-icon:#047b5d; --ds-erfolg-abz:#affebf; --ds-erfolg-fuell:#047b5d; --ds-achtung-flaeche:#fff8db; --ds-achtung-text:#4f4700; --ds-achtung-rand:#ffeb78; --ds-achtung-icon:#998a00; --ds-achtung-abz:#ffeb78; --ds-achtung-fuell:#ffe600; --ds-warn-flaeche:#fff1e3; --ds-warn-text:#5e4200; --ds-warn-rand:#ffc879; --ds-warn-icon:#b28400; --ds-warn-abz:#ffd6a4; --ds-warn-fuell:#ffb800; --ds-krit-flaeche:#fee8eb; --ds-krit-text:#8e0b21; --ds-krit-rand:#fec1c7; --ds-krit-icon:#e22c38; --ds-krit-abz:#fed1d7; --ds-krit-fuell:#c70a24; --ds-krit-fuell-hover:#a30a24; --ds-betont-flaeche:#f0f2ff; --ds-betont-text:#005bd3; --ds-betont-rand:#005bd3; --ds-betont-fuell:#005bd3; --ds-betont-fuell-hover:#004299; /* --- Diagramme ------------------------------------------------------ */ /* Reihenfolge der Reihen. Kraeftig genug fuer 3:1 gegen Weiss, klar unterscheidbar auch nebeneinander. Achse und Gitter bleiben grau. */ --ds-diagramm-1:#0094d5; --ds-diagramm-2:#8051ff; --ds-diagramm-3:#00a198; --ds-diagramm-4:#e30c76; --ds-diagramm-5:#b28400; --ds-diagramm-6:#616161; /* Die drei Zustaende liegen im Ring und im Segmentbalken AUF der Spur (--ds-fuell-leiste, #e3e3e3) und muessen dort 3:1 halten, nicht nur gegen Weiss. Reihe 1 und 5 kaemen auf 2,64:1; deshalb je eine Stufe dunkler: ok 3,19:1 gegen die Spur (4,09:1 gegen Weiss), warn 3,06:1 (3,93:1), krit 3,52:1 (4,52:1). Dunkel halten die Reihenwerte schon. */ --ds-diagramm-ok:#0085c2; /* erkannt */ --ds-diagramm-warn:#a37a00; /* in Pruefung */ --ds-diagramm-krit:#e22c38; /* fehlt */ --ds-diagramm-gitter:#ebebeb; --ds-diagramm-achse:#8a8a8a; --ds-diagramm-beschriftung:#616161; --ds-diagramm-tooltip:#ffffff; /* --- Schatten -------------------------------------------------------- */ /* Karte: eine Haarkante rundum, unten eine Spur kraeftiger, dazu 1px Bodenschatten. So liegt die weisse Karte auf dem grauen Grund, ohne dass eine Linie das Bild vergittert. */ --ds-schatten-karte:0 1px 0 0 rgba(26,26,26,.07), inset 0 -1px 0 0 rgba(0,0,0,.17), inset 1px 0 0 0 rgba(0,0,0,.13), inset -1px 0 0 0 rgba(0,0,0,.13), inset 0 1px 0 0 rgba(204,204,204,.5); --ds-schatten-1:0 1px 0 0 rgba(26,26,26,.07); --ds-schatten-2:0 3px 1px -1px rgba(26,26,26,.07); --ds-schatten-3:0 4px 6px -2px rgba(26,26,26,.2); --ds-schatten-4:0 8px 16px -4px rgba(26,26,26,.22); --ds-schatten-5:0 12px 20px -8px rgba(26,26,26,.24); --ds-schatten-6:0 20px 20px -8px rgba(26,26,26,.28); --ds-schatten-ueber:0 0 0 1px rgba(0,0,0,.08), 0 4px 6px -2px rgba(26,26,26,.2); --ds-schatten-dialog:0 0 0 1px rgba(0,0,0,.08), 0 20px 20px -8px rgba(26,26,26,.28); --ds-schatten-eingedrueckt:inset 0 1px 2px 0 rgba(26,26,26,.15), inset 0 1px 1px 0 rgba(26,26,26,.15); --ds-schatten-knopf:inset 0 -1px 0 0 #b5b5b5, inset 0 0 0 1px rgba(0,0,0,.1), inset 0 .5px 0 1.5px #fff; --ds-schatten-knopf-hover:inset 0 1px 0 0 #ebebeb, inset -1px 0 0 0 #ebebeb, inset 1px 0 0 0 #ebebeb, inset 0 -1px 0 0 #ccc; --ds-schatten-knopf-aktiv:inset -1px 0 1px 0 rgba(26,26,26,.122), inset 1px 0 1px 0 rgba(26,26,26,.122), inset 0 2px 1px 0 rgba(26,26,26,.2); --ds-schatten-primaer:inset 0 -1px 0 1px rgba(0,0,0,.8), inset 0 0 0 1px #303030, inset 0 .5px 0 1.5px rgba(255,255,255,.25); --ds-schatten-primaer-hover:inset 0 1px 0 0 rgba(255,255,255,.24), inset 1px 0 0 0 rgba(255,255,255,.2), inset -1px 0 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 #000, 0 -1px 0 1px #1a1a1a; --ds-schatten-primaer-aktiv:inset 0 3px 0 0 #000; --ds-schatten-krit:inset 0 -1px 0 1px rgba(142,31,11,.8), inset 0 0 0 1px rgba(181,38,11,.8), inset 0 .5px 0 1.5px rgba(255,255,255,.35); --ds-glanz-primaer:linear-gradient(180deg, rgba(48,48,48,0) 63.53%, rgba(255,255,255,.15) 100%); --ds-fokus-ring:0 0 0 2px var(--ds-flaeche), 0 0 0 4px var(--ds-rand-fokus); /* --- Bewegung -------------------------------------------------------- */ --ds-zeit-kurz:100ms; --ds-zeit:150ms; --ds-zeit-lang:250ms; --ds-kurve:cubic-bezier(.25,.1,.25,1); } /* -------------------------------------------------------------------------- Dunkel. Die Seite wird fast schwarz, die Karte eine Stufe heller; der Hauptknopf dreht sich um (weiss mit dunkler Schrift). Zustandsfarben werden gedaempfte Flaechen mit heller Schrift, damit ein rotes Abzeichen nachts nicht leuchtet. -------------------------------------------------------------------------- */ [data-theme="dark"]{ color-scheme:dark; --ds-grund:#1a1a1a; --ds-flaeche:#303030; --ds-flaeche-hover:#3a3a3a; --ds-flaeche-aktiv:#424242; --ds-flaeche-gewaehlt:#424242; /* --ds-text-2 darauf 4,9:1 */ --ds-flaeche-2:#2a2a2a; --ds-flaeche-2-hover:#353535; --ds-flaeche-3:#262626; --ds-flaeche-invers:#e3e3e3; --ds-kopfleiste:#0f0f0f; --ds-kopfleiste-text:#e3e3e3; --ds-kopfleiste-feld:#262626; --ds-nav-grund:#1f1f1f; --ds-nav-hover:#2a2a2a; --ds-nav-gewaehlt:#303030; --ds-schleier:rgba(0,0,0,.8); --ds-fuell:#3a3a3a; --ds-fuell-hover:#424242; --ds-fuell-aktiv:#4a4a4a; --ds-fuell-gewaehlt:#616161; --ds-fuell-primaer:#ffffff; --ds-fuell-primaer-hover:#f3f3f3; --ds-fuell-primaer-aktiv:#ebebeb; --ds-fuell-primaer-aus:rgba(255,255,255,.22); --ds-fuell-transparent-hover:rgba(255,255,255,.08); --ds-fuell-transparent-aktiv:rgba(255,255,255,.14); --ds-fuell-aus:rgba(255,255,255,.05); --ds-fuell-neutral:rgba(255,255,255,.11); --ds-fuell-leiste:#4a4a4a; --ds-text:#e3e3e3; --ds-text-2:#b5b5b5; --ds-text-3:#a3a3a3; --ds-text-aus:#6f6f6f; --ds-text-auf-primaer:#303030; --ds-text-auf-krit:#ffffff; --ds-toast-grund:#e3e3e3; --ds-toast-text:#1a1a1a; --ds-link:#91b8ff; --ds-link-hover:#c5d0ff; --ds-link-aktiv:#dbe1ff; --ds-icon:#cccccc; --ds-icon-2:#8a8a8a; --ds-rand:#474747; --ds-rand-2:#3d3d3d; --ds-rand-hover:#5c5c5c; --ds-linie-grund:#3a3a3a; /* 1,53:1 auf --ds-grund (--ds-rand auf der Karte 1,42) */ --ds-linie-grund-2:#303030; /* 1,32:1 auf --ds-grund */ --ds-rand-feld:#7a7a7a; --ds-rand-feld-hover:#9a9a9a; --ds-rand-feld-aktiv:#e3e3e3; --ds-rand-fokus:#6fa3ff; --ds-feld-grund:#262626; --ds-feld-grund-hover:#2c2c2c; --ds-info-flaeche:#0c2a3d; --ds-info-text:#bfe3ff; --ds-info-rand:#1f5577; --ds-info-icon:#51c0ff; --ds-info-abz:#133b54; --ds-info-fuell:#51c0ff; --ds-erfolg-flaeche:#0b2e25; --ds-erfolg-text:#aff5c4; --ds-erfolg-rand:#1b5e4a; --ds-erfolg-icon:#2ced83; --ds-erfolg-abz:#0f4034; --ds-erfolg-fuell:#18bf79; --ds-achtung-flaeche:#2e2a05; --ds-achtung-text:#fff4bf; --ds-achtung-rand:#5f560a; --ds-achtung-icon:#e1cb00; --ds-achtung-abz:#423c06; --ds-achtung-fuell:#e1cb00; --ds-warn-flaeche:#33250a; --ds-warn-text:#ffe4c6; --ds-warn-rand:#6b4f12; --ds-warn-icon:#ffb800; --ds-warn-abz:#4a360d; --ds-warn-fuell:#ffb800; --ds-krit-flaeche:#3a0f16; --ds-krit-text:#fed1d7; --ds-krit-rand:#7a1f2d; --ds-krit-icon:#f78086; --ds-krit-abz:#551520; --ds-krit-fuell:#c70a24; --ds-krit-fuell-hover:#a30a24; --ds-betont-flaeche:#16213d; --ds-betont-text:#a9bfff; --ds-betont-rand:#6f8fff; --ds-betont-fuell:#4188ff; --ds-betont-fuell-hover:#6b9dff; --ds-diagramm-1:#51c0ff; --ds-diagramm-2:#aa95ff; --ds-diagramm-3:#2ce0d4; --ds-diagramm-4:#fe8eb1; --ds-diagramm-5:#e5a500; --ds-diagramm-6:#b5b5b5; --ds-diagramm-ok:#51c0ff; --ds-diagramm-warn:#e5a500; --ds-diagramm-krit:#f78086; --ds-diagramm-gitter:#3d3d3d; --ds-diagramm-achse:#8a8a8a; --ds-diagramm-beschriftung:#b5b5b5; --ds-diagramm-tooltip:#3a3a3a; --ds-schatten-karte:0 1px 0 0 rgba(0,0,0,.3), inset 0 -1px 0 0 rgba(204,204,204,.08), inset 1px 0 0 0 rgba(204,204,204,.08), inset -1px 0 0 0 rgba(204,204,204,.08), inset 0 1px 0 0 rgba(204,204,204,.16); --ds-schatten-1:0 1px 0 0 rgba(0,0,0,.3); --ds-schatten-2:0 3px 1px -1px rgba(0,0,0,.3); --ds-schatten-3:0 4px 6px -2px rgba(0,0,0,.5); --ds-schatten-4:0 8px 16px -4px rgba(0,0,0,.55); --ds-schatten-5:0 12px 20px -8px rgba(0,0,0,.6); --ds-schatten-6:0 20px 20px -8px rgba(0,0,0,.65); --ds-schatten-ueber:0 0 0 1px rgba(255,255,255,.1), 0 4px 6px -2px rgba(0,0,0,.5); --ds-schatten-dialog:0 0 0 1px rgba(255,255,255,.1), 0 20px 20px -8px rgba(0,0,0,.65); --ds-schatten-knopf:inset 0 1px 0 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.1); --ds-schatten-knopf-hover:inset 0 1px 0 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.16); --ds-schatten-knopf-aktiv:inset 0 2px 1px 0 rgba(0,0,0,.4); --ds-schatten-primaer:inset 0 -1px 0 0 #b5b5b5, inset 0 0 0 1px rgba(0,0,0,.1); --ds-schatten-primaer-hover:inset 0 -1px 0 0 #cccccc, inset 0 0 0 1px rgba(0,0,0,.1); --ds-schatten-primaer-aktiv:inset 0 2px 1px 0 rgba(26,26,26,.25); --ds-glanz-primaer:linear-gradient(transparent, transparent); }