/* ---- theme.css ---- */ /* Token-Fundament nach design-tokens.md (Design-Paket, Freigabe 28.08.2026). EINE Wahrheitsquelle: alle Tokens stehen HIER, nicht in app.css. Wer dort ein :root aufmacht, baut eine zweite Quelle — genau das war der Grund fuer das doppelte --spring (app.css) und das im Grau-Theme fehlende --zebra. Bestandsnamen (--green/--amber/--red/--surface/--border/--chart-*) bleiben die kanonischen Namen: app/views/charts.js liest sie zur Laufzeit per getComputedStyle, app/lib/svg.js schreibt sie als var(--x) in serverseitige SVG, app/views/bericht.js fuehrt eine EIGENE Kopie derselben Namen (PDF, ohne Zugriff auf diese Datei). NICHT umbenennen — ein neuer Name faende dort keine Definition und die Farbe fiele auf initial zurueck. Die Spec-Vokabeln (--card/--ok/--warn/--bad/--d1…, --font, --mono, --r-sm bis --r-pill, --focus, --t1…) sind Aliase fuer NEUE Komponenten und loesen ueber die Bestandsnamen auf. TOTER CODE, NOTIERT (03.09.2026): bis auf --mono und --card-2 hat KEINER dieser Aliasnamen einen Leser — dasselbe gilt fuer --d1…--d4, --d1-soft…--d4-soft und --chart-bg. Sie bleiben vorerst stehen, weil das Baustein-Stylesheet (sr-bausteine.css) noch waechst; das Aufraeumen ist eine eigene Aufgabe, keine Nebenwirkung. ABSTANDSRASTER --s1…--s7 IST SEIT DEM 03.09.2026 IN GEBRAUCH. Es stand fuenf Tage lang hier und wurde von keiner einzigen Regel gelesen, waehrend die drei Stylesheets 226 verschiedene Pixelwerte fuehrten. Es ist jetzt das verbindliche Raster (plus --s0 4px und --s-2 2px fuer Chips und Haarlinien) und bleibt bewusst bei 6/10/16/26/38/58/88 statt beim 4px-Raster der Spec. Aus demselben Grund gibt es KEIN --s8: 64px waere in dieser Skala kleiner als --s7 (88px) und damit eine Falle. ACHTUNG, falsche Freunde: die Leit-Screens benutzen DIESELBEN Namen mit ANDEREN Werten (--s4 dort 16px, hier 26px). Wer eine Komponente aus einem Leit-Screen uebernimmt, rechnet die Abstaende um — er uebertraegt NICHT das var(--s4) aus der Vorlage. BFSG-KONTRAST (30.08.2026) — drei Toene nachgezogen, alle nachgerechnet gegen die --surface des JEWEILIGEN Themes (WCAG-2.x-Formel; scripts/ css-pruefen.js rechnet es bei jedem Lauf nach und schlaegt Alarm): · --text-3 traegt durchgehend Kleintext von 11 bis 14,5 px (.projekt-domain, .chart-hinweis, .diff-zeit, .cluster-sub, .sr-kpi-label, .nav-group …) und muss deshalb die 4,5:1 fuer Fliesstext halten, nicht die 3:1 fuer Grosstext. Grau lag bei 4,16:1, Dunkel bei 4,31:1 — beide durchgefallen. Beide jetzt #9ea5b1: Grau 5,25:1, Dunkel 6,31:1. Hell lag bei 4,70:1 auf --surface und galt damit als erledigt — die Rechnung stand aber nur gegen --surface. Am 30.08.2026 wurde am laufenden DOM nachgesehen, worauf --text-3 im hellen Thema TATSAECHLICH steht: auf vier Flaechen, nicht auf einer. --surface #ffffff 4,70:1 erfuellt --surface-2 #f6f7f9 4,38:1 (.kc, .section-num, .ct, 10 Klassen) --bg #f3f4f6 4,27:1 (.unterkapitel-tab-num/-text, 108 Vorkommen) --hover #eceef2 4,04:1 (.delta-neutral) --bg-deep #e9ebef 3,94:1 Vier von fuenf durchgefallen. Hell jetzt #5f6673: 5,78 / 5,39 / 5,25 / 4,97 / 4,84 — und selbst mit Zebra-Zeile darunter nirgends unter 4,57:1. Die Pruefung in scripts/css-pruefen.js rechnet seither gegen --surface, --surface-2, --bg und --bg-deep statt nur gegen --surface. Der Wert liegt bewusst etwas ueber dem naheliegenden #99a0ac (Grau 4,95:1): #99a0ac faellt auf --surface-2 auf 4,33:1 zurueck, und genau dort stehen .cluster-sub und .section-num. #9ea5b1 haelt die 4,5:1 auch dort (Grau 4,60:1, Dunkel 5,67:1). · --link im HELLEN Theme war der Hausakzent #00abd7 — 2,69:1 auf --surface, 2,44:1 auf --bg. Ein Link, den man nur an der Farbe erkennt, muss 4,5:1 halten; jetzt #00738f (5,46:1 auf --surface, 4,96:1 auf --bg, schlechtester Fall 4,57:1 auf --bg-deep). Grau (#2fc0e2) und Dunkel (#cdeffb) lagen bereits deutlich darueber. · --focus-ton siehe unten am Token. NICHT geaendert (bewusst): --accent selbst bleibt #00abd7. Er traegt Flaechen (Knoepfe, Indikatoren, Balken) und Grosstext, nie Fliesstext — die beiden Rollen, an denen er zu hell war (Link, Fokusring), haben jetzt eigene Toene. · 'Inter' steht dem Systemschrift-Stack voran und wird seit dem 03.09.2026 auch AUSGELIEFERT: @font-face direkt darunter, Datei app/assets/fonts/inter-latin.woff2 (48 KB, variable Achse wght 100-900, Inter 4.001, SIL OFL 1.1 — Lizenztext liegt daneben), Route GET /assets/font/:datei in app/server.js, CSP `font-src 'self'`. Vorher stand die Schrift nur im Stack, ohne Datei: gerendert wurde auf jedem Geraet eine andere Systemschrift, und app/views/bericht.js (eigener Stilbaum, gleicher Stack) bekam beim PDF-Druck die Ersatzschrift des Servers. */ /* EINE Datei, EINE Achse. Die variable woff2 traegt die Gewichte 100-900 stufenlos; die vier Gewichte des Designsystems (450 Text, 600 Bedienung, 700 Titel, 800 Wortmarke/Score) kommen damit ohne zweite Datei aus. font-display:swap — die Seite steht sofort in der Systemschrift und tauscht nach, statt unsichtbaren Text zu zeigen (FOIT). */ @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url('/assets/font/inter-latin.woff2') format('woff2')} :root{--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;--font-num:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--theme-background-primary:#00abd7; /* MARKENFARBE DES MANDANTEN. Hier steht nur der Rueckfall auf die Hausfarbe; den echten Wert setzt app/views/layout.js je Seite aus design.primary des Mandanten (Inline-Style mit Nonce, direkt hinter diesem Blatt und damit staerker). Wer die Farbe des Kunden braucht — etwa der Fuellbogen der Donut-Ringe im Cockpit — nimmt diese Variable und nicht --sr-acc: --sr-acc ist die Hausfarbe und bleibt es auch bei einem Mandanten mit eigenem Design. */ --sr-marke:var(--sr-acc); --ease:cubic-bezier(.23,1,.32,1);--spring:cubic-bezier(.34,1.56,.64,1);--ease-in:cubic-bezier(.55,0,1,.45);--t-fast:120ms;--t-med:200ms;--t-slow:300ms; --header-h:100px; /* ABSTANDSRASTER (Designsystem „SEO-Radar", Fassung 03.09.2026, Kapitel Layout). Die Skala stand seit dem 28.08.2026 hier und wurde von KEINER Regel benutzt (Inventar 03.09.2026: --s1 bis --s7 mit 0 Verwendungen) — die Dateien setzten stattdessen 226 verschiedene Pixelwerte. Sie ist jetzt das verbindliche Raster; --s0 und --s-2 kommen fuer Chips und Haarlinien dazu, weil 6 px als kleinster Wert fuer ein 1-px-Abzeichen zu grob ist. ACHTUNG, falsche Freunde: die Leit-Screens des Design-Pakets benutzen DIESELBEN Namen mit ANDEREN Werten (--s4 dort 16px, hier 26px). */ --s-2:2px;--s0:4px;--s1:6px;--s2:10px;--s3:16px;--s4:26px;--s5:38px;--s6:58px;--s7:88px; /* RADIEN (Designsystem, Kapitel Shapes). Fuenf Stufen, sonst keine: 4 Badges/Chips · 6 Knoepfe/Felder/Reiter · 8 Karten/Kacheln · 10 Modal/Drawer · 999 echte Pille. Die Bestandsnamen --rsm/--rmd/--rlg/--rpill zeigen auf dieselben Werte, damit app.css nicht Zeile fuer Zeile umgeschrieben werden muss; --rmd war 9px, --rlg 12px — beide Sonderwerte sind damit weg. */ --sr-r-xs:3px;--sr-r-sm:5px;--sr-r-md:7px;--sr-r-lg:9px;--sr-r-pill:999px; --rsm:var(--sr-r-sm);--rmd:var(--sr-r-md);--rlg:var(--sr-r-lg);--rpill:var(--sr-r-pill); /* TYPO-SKALA (Designsystem, Kapitel Typography). Feste Groessen und Werte statt clamp(): die alten sieben clamp()-Stufen lieferten je nach Fenster eine andere Zahl, und daneben standen 47 einzeln gesetzte Groessen bis hinunter zu 12,92 px. Eine Skala, die man nicht nennen kann, ist keine. Die frueheren Bestandsnamen --fs-xs/sm/md/lg/xl/num sind ersatzlos weg: sie waren ein zweiter Name fuer dieselbe Stufe, und ein zweiter Name ist die haeufigste Art, wie eine Skala wieder auseinanderlaeuft. */ --fs-label:11.5px;--fs-small:12.5px;--fs-ui:13px;--fs-body:14px;--fs-h2:17px; --fs-h1:22px;--fs-kpi-compact:26px;--fs-kpi-standard:32px;--fs-kpi-hero:40px; --fs-kpi:var(--fs-kpi-standard);--fs-mono:12.5px; /* KPI-Stufen: kompakte Kacheln 26 px, Standard 32 px, grosse Scores 40 px. */ --fs-score:var(--fs-kpi-hero); /* AUSNAHME, begruendet: Kleinsttext IN den serverseitig gezeichneten SVGs (.chart-axis, .chart-grenzwert-label, .chart-marke-nummer und der Legenden-Chip daneben). Diese Grafiken haben eine FESTE viewBox, und app/lib/svg.js rechnet Randbreiten und Markerkreise auf diese Schriftgroesse — die Marker-Nummer sitzt in einem Kreis mit r=7,5 (svg.js:390). Auf --fs-mono (12,5 px) waeren zwei Ziffern so breit wie der Kreis. */ --fs-svg:11px; /* Gewichte: Hierarchie kommt aus Gewicht und Groesse, nicht aus Farbe. */ --fw-body:450;--fw-ui:600;--fw-bold:700;--fw-black:800; /* Zeilenhoehen je Rolle (Designsystem, Tabelle Hierarchie). */ --lh-h1:1.2;--lh-h2:1.25;--lh-body:1.5;--lh-ui:1.2;--lh-label:1.3;--lh-small:1.45;--lh-kpi:1.05;--lh-score:1;--lh-mono:1.5; --content-max:min(1180px,100%);--inhalt-breite:90%;--inhalt-faktor:.9; /* --inhalt-faktor ist DERSELBE Wert wie --inhalt-breite, nur einheitenlos (87 % -> .87). Er wird gebraucht, weil calc() nicht durch einen Prozentwert teilen darf: die Stufen unten rechnen den Schieber in die feste Buehnenbreite hinein (siehe sr.css, Punkt 2 vom 04.09.2026). Gesetzt wird er zusammen mit --inhalt-breite in theme.js und app.js. */ /* GESTAFFELTE INHALTSBREITEN (01.09.2026). Bis hierher hatte JEDE Seite dieselbe Breite -- gemessen 1.212 px bei 1440 px Fenster, auf einem 1920er entsprechend mehr. Eine Zeile Fliesstext lief damit ueber die doppelte lesbare Laenge, waehrend die Tabellen genau so viel Platz bekamen wie das Konto-Formular. Die drei Werte sind Stufen nach ZWECK, nicht nach Seitentyp: lesen = Fliesstext und Formulare, uebersicht = Kacheln und schmale Tabellen, arbeit = breite Tabellen mit Diagrammen. Wer KEINE Stufe setzt, behaelt die volle Breite -- das ist der Fall fuer die Verwaltungslisten und die Anbindungen (8-9 Spalten). Gesetzt wird die Stufe in app/server.js je Route (breite:'lesen'| 'uebersicht'|'arbeit'), gerendert in layout.js, angewandt in sr.css. */ --sr-breite-lesen:672px;--sr-breite-uebersicht:1024px;--sr-breite-arbeit:1136px; --accent:#00abd7;--accent-deep:#0089ad;--on-accent:#04242e; /* KI-Bot-Kategorien: Training = Blau, KI-Suche = Gelb, Live-Nutzerfrage = Rot. Verlauf, Legende und Bot-Balken lesen diese Rollen. */ --ki-bot-training:#2a78d6;--ki-bot-suche:#9a7b00;--ki-bot-nutzer:#cf3535; /* BFSG/WCAG 1.4.11 (Kontrast von Bedienelementen, 30.08.2026): der Fokusring lief bisher auf --accent. Im HELLEN Theme steht #00abd7 nur bei 2,44-2,69:1 gegen die Inhaltsflaechen und verfehlt die geforderten 3:1 -- der Ring war dort also da, aber nicht zuverlaessig sichtbar. --focus-ton ist deshalb ein EIGENER Ton je Theme (siehe die drei Theme-Bloecke unten): hell der tiefere Hausakzent --accent-deep #0089ad (3,40-4,05:1), grau und dunkel unveraendert #00abd7 (4,24-6,89:1). Kein neuer Farbwert, nur der jeweils tragfaehige der beiden Hausakzente. Die Fokus-Umrisse in app.css nutzen denselben Token. */ --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--focus-ton); /* Spec-Schreibweisen als Alias — die Leit-Screens des Design-Pakets sind in diesen Namen geschrieben, der App-Bestand in den kurzen. Beide gelten. */ --font:var(--font-body);--mono:var(--font-mono);--r-sm:var(--rsm);--r-md:var(--rmd);--r-lg:var(--rlg);--r-pill:var(--rpill);--focus:var(--focus-ring);--t1:var(--t-fast);--t2:var(--t-med);--t3:var(--t-slow); --card:var(--surface);--card-2:var(--surface-2);--ok:var(--green);--warn:var(--amber);--bad:var(--red);--ok-soft:var(--green-dim);--warn-soft:var(--amber-dim);--bad-soft:var(--red-dim);--d1:var(--chart-t1);--d2:var(--chart-t2);--d3:var(--chart-t3);--d4:var(--chart-t4);--chart-bg:var(--chart-flaeche); /* Flaechenvarianten der Datenfarben (Spec: 18 % Alpha). Abgeleitet statt abgeschrieben — so folgen sie jedem Theme-Wechsel und jeder kuenftigen Palettenkorrektur von selbst. Faellt color-mix aus (Browser vor 2023), bleibt der Token undefiniert und die Flaeche schlicht ungefuellt; kein Bestandscode haengt daran. */ --d1-soft:color-mix(in srgb,var(--chart-t1) 18%,transparent);--d2-soft:color-mix(in srgb,var(--chart-t2) 18%,transparent);--d3-soft:color-mix(in srgb,var(--chart-t3) 18%,transparent);--d4-soft:color-mix(in srgb,var(--chart-t4) 18%,transparent)} [data-theme="dark"]{--bg:var(--sr-bg);--bg-deep:var(--sr-bg);--surface:var(--sr-surface);--surface-2:var(--sr-soft);--hover:var(--sr-soft);--border:var(--sr-hair);--border-l:var(--sr-hair);--line:rgba(255,255,255,.08);--scrim:rgba(8,8,10,.58);--accent-soft:rgba(0,171,215,.16);--focus-ton:var(--sr-acc-line);--glow-a:rgba(0,171,215,.22);--accent-glow:radial-gradient(closest-side,var(--glow-a),transparent 70%);--zebra:rgba(255,255,255,.035);--scroll-schatten:rgba(0,0,0,.7);--e1:0 1px 2px rgba(0,0,0,.28),0 2px 12px rgba(0,0,0,.30);--e2:0 4px 10px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.42);--e3:0 10px 24px rgba(0,0,0,.45),0 40px 96px rgba(0,0,0,.55);--edge:inset 0 0 0 1px rgba(255,255,255,.055);--text:var(--sr-ink);--text-2:var(--sr-mut);--text-3:var(--sr-mut);--link:var(--sr-acc-ink);--blue:#7aa2ff;--blue-dim:rgba(122,162,255,.14);--green:var(--sr-ok-ink);--green-dim:rgba(74,222,128,.14);--red:var(--sr-err-ink);--red-dim:rgba(248,113,113,.14);--amber:var(--sr-warn-ink);--amber-dim:rgba(251,191,36,.14);--header-bg:#0c0d10;--thead-bg:var(--sr-surface);--thead-fg:var(--sr-mut);--chapter-bar:#8b93a3;--rule:#454b57} /* SEO-Radar-Anpassung (Bauplan 26.08.2026, E6/O4; Palette 27.08.2026 an den Cortex-„dim"-Modus angelehnt, Betreiber-Wunsch): dritter Zustand „Grau" (medium). Bis zum 06.09.2026 ein helles Mittelgrau mit dunkler Schrift; seitdem — wie der Cortex-„dim"-Modus selbst — ein DUNKLES Grau mit heller Schrift, einen Tick heller als Cortex (Flaechen im Block [data-theme="medium"] weiter unten). Gehoert zur App, nicht zur Haus-Vorlage. */ [data-theme="medium"]{--bg:var(--sr-bg);--bg-deep:var(--sr-bg);--surface:var(--sr-surface);--surface-2:var(--sr-soft);--hover:var(--sr-soft);--border:var(--sr-hair);--border-l:var(--sr-hair);--line:rgba(255,255,255,.09);--scrim:rgba(10,11,13,.52);--accent-soft:rgba(0,171,215,.16);--focus-ton:var(--sr-acc-line);--glow-a:rgba(0,171,215,.22);--accent-glow:radial-gradient(closest-side,var(--glow-a),transparent 70%);--zebra:rgba(255,255,255,.035);--scroll-schatten:rgba(0,0,0,.7);--e1:0 1px 2px rgba(0,0,0,.28),0 2px 12px rgba(0,0,0,.30);--e2:0 4px 10px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.42);--e3:0 10px 24px rgba(0,0,0,.45),0 40px 96px rgba(0,0,0,.55);--edge:inset 0 0 0 1px rgba(255,255,255,.055);--text:var(--sr-ink);--text-2:var(--sr-mut);--text-3:var(--sr-mut);--link:var(--sr-acc-ink);--blue:#82a5f5;--blue-dim:rgba(130,165,245,.14);--green:var(--sr-ok-ink);--green-dim:rgba(87,214,141,.13);--red:var(--sr-err-ink);--red-dim:rgba(244,124,124,.13);--amber:var(--sr-warn-ink);--amber-dim:rgba(245,184,61,.14);--header-bg:#1b1d21;--thead-bg:var(--sr-surface);--thead-fg:#c9ced6;--chapter-bar:#8b93a3;--rule:#5c626c} [data-theme="light"]{--bg:var(--sr-bg);--bg-deep:var(--sr-bg);--surface:var(--sr-surface);--surface-2:var(--sr-soft);--hover:var(--sr-soft);--border:var(--sr-hair);--border-l:var(--sr-hair);--line:rgba(23,26,32,.08);--scrim:rgba(16,18,22,.38);--accent-soft:rgba(0,171,215,.10);--focus-ton:var(--sr-acc-line);--glow-a:rgba(0,171,215,.18);--accent-glow:radial-gradient(closest-side,var(--glow-a),transparent 70%);--zebra:rgba(16,20,27,.03);--scroll-schatten:rgba(0,0,0,.28);--e1:0 1px 2px rgba(18,22,29,.05),0 2px 10px rgba(18,22,29,.06);--e2:0 2px 6px rgba(18,22,29,.07),0 12px 32px rgba(18,22,29,.12);--e3:0 8px 20px rgba(18,22,29,.12),0 32px 80px rgba(18,22,29,.20);--edge:inset 0 0 0 1px var(--line);--text:var(--sr-ink);--text-2:var(--sr-mut);--text-3:var(--sr-mut);--link:var(--sr-acc-ink);--blue:#2563eb;--blue-dim:rgba(37,99,235,.09);--green:var(--sr-ok-ink);--green-dim:rgba(40,111,62,.11);--red:var(--sr-err-ink);--red-dim:rgba(220,38,38,.09);--amber:var(--sr-warn-ink);--amber-dim:rgba(180,83,9,.11);--header-bg:#0a0a0a;--thead-bg:var(--sr-surface);--thead-fg:var(--sr-mut);--chapter-bar:#0a0a0a;--rule:#c2c7d0} /* ===================================================================== R3 Design-Paket „SEO-Radar R3" (30.08.2026) — eigene Farbwelt, ein Akzent. Alle Tokens tragen das Praefix --sr-, damit sie sich nicht mit den Bestandsnamen beissen (--line heisst im Bestand eine rgba-Haarlinie, im Paket eine deckende Rahmenfarbe). ABWEICHUNGEN VOM PAKET, alle aus derselben Ursache: die gelieferten Toene verfehlen an 14 Stellen die Kontrastvorgaben, gegen die dieses Projekt seit dem 30.08. automatisch prueft. Betreiber-Entscheid 30.08.2026: „Toene nachziehen, Gate bleibt scharf". Geaendert wurde ausschliesslich die HELLIGKEIT von Textfarben — Farbton und Saettigung bleiben, die Flaechen (--sr-bg/--sr-nav/--sr-surface/--sr-soft/--sr-line/--sr-hair) und der Akzent #00abd7 sind unveraendert aus dem Paket uebernommen. Paket korrigiert warum --mut --sr-mut 4,21:1 auf --bg (hell), 3,35:1 (medium) --acc-ink --sr-acc-ink 4,34:1 auf --bg (hell), 2,01:1 (medium) --ok/warn/ --sr-*-ink Badge-Text auf 12-15 % Eigenfarbe: 1,64-3,40:1 err/info (deshalb je ein eigener Textton zur Flaeche) --tabmut --sr-tabmut medium: weiss auf --bg nur 2,23:1 — im mittleren Thema tragen die Seiten-Tabs deshalb den dunklen Textton statt weiss. (neu) --sr-acc-line Zustandsanzeiger brauchen 3:1 (WCAG 1.4.11). #00abd7 haelt das nur im dunklen Thema. (neu) --sr-feld-line Rahmen von Eingabefeldern, ebenfalls 3:1. --sr-line (1,23:1) ist eine Trennlinie, kein Bedienelement-Rahmen — zwei Rollen, zwei Toene. Die weisse Schrift auf den vollflaechigen Statuskacheln (Severity !/i) haelt auf keiner der drei Statusfarben 4,5:1 (2,17-3,96). Sie traegt deshalb --sr-auf-status (dunkel); nur --sr-info ist hell genug fuer weiss. */ :root{ /* Die R3-Rollennamen zeigen auf die Radius-Skala oben statt eigene Zahlen zu fuehren. --sr-r-pill hiess 9 px und war damit keine Pille — der Name ist jetzt --sr-r-tag (Zaehler-Chip, Glocken-Zahl, Punkt), und --sr-r-pill oben ist die echte Pille (999 px). */ --sr-r-card:var(--sr-r-md);--sr-r-modal:var(--sr-r-lg);--sr-r-ctl:var(--sr-r-sm);--sr-r-badge:1px;--sr-r-tag:8px; /* KNOPFTEXT IST DUNKEL, DIE FLAECHE IST DER AKZENT (Designsystem 03.09.2026, Kapitel Akzent — „Weiss auf Cyan liegt bei 2,7:1 und ist verboten"). Bis dahin lief es andersherum: der Knopf bekam eine eigene, tiefere Flaeche (#0081a2), damit WEISS darauf 4,50:1 haelt — exakt auf der Grenze, und eine zweite Knopffarbe im Haus. Jetzt traegt der Knopf das Haus-Cyan #00abd7 mit --sr-on-acc #04242e (6,0:1) wie Cortex und Ackermann Online, Hover --sr-acc-deep #0089ad (4,0:1 — nur der Hover-Moment, nie Ruhezustand). Der Rand in --sr-acc-line bleibt: die Flaeche allein haelt gegen den Seitengrund nicht ueberall 3:1, und ein gefuellter Knopf ohne erkennbare Kante ist ein Bedienelement ohne Umriss. */ --sr-auf-status:#10141a;--sr-auf-info:#ffffff;--sr-on-acc:#04242e;--sr-acc-knopf:#00abd7; /* Hover des Primaerknopfs — eine Stufe tiefer, Text bleibt --sr-on-acc. */ --sr-acc-deep:#0089ad; /* KNOEPFE: WEISS AUF BLAU, OHNE RAND, MIT SCHATTEN (Betreiber-Vorgabe 06.09.2026, „IMMER weisse Schrift auf Blau (hell/grau/dunkel), niemals Rand, immer Schlagschatten, animiert bei Benutzung mit leichtem Schwebeeffekt"). Das Haus-Cyan #00abd7 traegt Weiss nur mit 2,7:1 und scheidet als Knopfflaeche aus. Das Knopfblau ist der TIEFERE Ton derselben Hausfarbe (SuperStyler-Stellungnahme 06.09.2026, gemessen): #007fa0 haelt Weiss mit 4,62:1 (AA), Hover #006d89 5,9:1, gedrueckt #005f77 7,2:1 — in allen drei Themen dieselben Werte, weil die Flaeche selbst die Kontrastbasis ist. Der Schatten traegt den Blauton (kein Grau), damit der Knopf „leuchtet" statt zu kleben; der Fokusring bleibt (--focus-ton), er sitzt AUSSEN. Dunkle Themen: gleiche Geometrie, Schattenfarbe Schwarz (unten je Thema). */ --knopf-blau:#007fa0;--knopf-blau-hover:#006d89;--knopf-blau-aktiv:#005f77;--auf-knopf:#ffffff; --knopf-schatten:0 1px 2px rgba(0,63,80,.20),0 4px 10px rgba(0,63,80,.16); --knopf-schatten-hover:0 2px 4px rgba(0,63,80,.22),0 8px 18px rgba(0,63,80,.20); --knopf-schatten-aktiv:0 1px 2px rgba(0,63,80,.24); --knopf-rot:#c53030;--knopf-rot-hover:#a82727; --knopf-rot-schatten:0 1px 2px rgba(197,48,48,.28),0 4px 12px rgba(197,48,48,.28); --sr-nav-w:240px;--sr-gap:var(--s4);--sr-gap-kpi:16px; /* Hoehe des klebenden Seitenkopfs. Der Wert hier ist nur der Startwert fuer den Fall, dass kein JavaScript laeuft — app.js MISST den Kopf und schreibt die tatsaechliche Hoehe ans fort (Baustein 18b). sr.css rechnet daraus den Versatz jedes Ankersprungs. */ --sr-kopf-h:96px; /* Vorschaufarben der drei Theme-Kreise. Sie zeigen ein ANDERES Thema als das gerade aktive und koennen deshalb nicht aus den Theme-Tokens kommen — sonst waeren alle drei Kreise gleich. Werte = --bg des jeweiligen Themas. */ --sr-vorschau-light:#f2f3f5;--sr-vorschau-medium:#2b2e34;--sr-vorschau-dark:#191c20; /* ------------------------------------------------- Toene auf DUNKLEM Grund * Es gibt drei Stellen, die in JEDEM Theme dunkel bleiben: der alte * Kopfbalken samt Burger und Themenschalter (Altbestand, siehe unten), die * Log-Konsole der Anbindungen und der QR-Kasten der Zwei-Faktor-Einrichtung. * Sie standen bis zum 03.09.2026 mit 55 festen Farbwerten in app.css und im * Basisteil dieser Datei — also ausserhalb jeder Token-Pruefung. Sie sind * KEINE Theme-Tokens (sie wechseln nicht mit dem Theme), aber sie sind * benannt und stehen an einer Stelle. */ --auf-dunkel:#ffffff; --auf-dunkel-stark:rgba(255,255,255,.84); --auf-dunkel-schwach:rgba(255,255,255,.52); --auf-dunkel-flaeche:rgba(255,255,255,.08); --auf-dunkel-fein:rgba(255,255,255,.16); --auf-dunkel-kante:rgba(255,255,255,.07); --auf-dunkel-hauch:rgba(255,255,255,.06); --nav-aktiv-schatten:rgba(0,0,0,.22); --regler-schatten:0 1px 3px rgba(0,0,0,.4); /* Der QR-Code ist ein Schwarz/Weiss-Bild und bleibt bewusst weiss — im Dunkelmodus waere er sonst schlechter scanbar (siehe .zwei-faktor-qr). */ --qr-grund:#ffffff; /* Log-Konsole der Anbindungen: eine bewusst dunkle Flaeche in jedem Theme, weil dort ein Terminalstrom laeuft. */ --konsole-grund:#10151b;--konsole-kopf:#171e26; --konsole-text:#cfe0d8;--konsole-mut:#7f93a5;--konsole-titel:#8fa3b3; --konsole-chip:rgba(255,255,255,.09);--konsole-chip-hover:rgba(255,255,255,.17); --konsole-chip-text:#b9c7d3;--konsole-chip-text-hover:#e6eef5; --konsole-ok:#4cc667;--konsole-ok-flaeche:rgba(63,185,80,.2); --konsole-warn:#ffb020;--konsole-warn-flaeche:rgba(255,176,32,.18); --konsole-err:#ff7b72;--konsole-err-text:#ff9b93;--konsole-err-flaeche:rgba(248,81,73,.2); /* Ladering im Knopf (.anb-btn.laedt) — Akzent mit 30 % Deckung. */ --akzent-ring:rgba(0,171,215,.3); /* Druckausgabe: Papier kennt kein Theme. */ --druck-grund:#ffffff;--druck-tinte:#000000;--druck-tinte-2:#333333; --druck-linie:#cccccc;--druck-flaeche:#eeeeee} [data-theme="light"]{ --ki-bot-training:#2a78d6;--ki-bot-suche:#9a7b00;--ki-bot-nutzer:#cf3535; --sr-acc:#00abd7;--sr-acc-ink:#006b86;--sr-acc-line:#0092b8; --sr-bg:#f2f3f5;--sr-nav:#fafbfc;--sr-surface:#ffffff;--sr-soft:#f5f6f8; /* Trenner und Rahmen sind ZWEI Rollen (Designsystem, Kapitel Colors) — und seit dem 04.09.2026 auch zwei WERTE: --sr-line ist „Line" (#7d8897, 3,5:1 auf Surface, WCAG 1.4.11) fuer Rahmen, die etwas bedeuten (Feldrahmen, Status-Ringe), --sr-hair ist „Hairline" (#dfe3e9) fuer Trenner. Bis dahin lagen beide auf dem Hairline-Wert (SuperStyler-Befund 03.09.: „heute harmlos, der naechste bedeutungstragende Rahmen fiele auf 1,3:1"). --sr-feld-line bleibt als Alias fuer bestehende Aufrufer. */ --sr-line:#7d8897;--sr-hair:#dfe3e9;--sr-feld-line:var(--sr-line); --sr-ink:#24282e;--sr-mut:#636b76;--sr-tabmut:#636b76; --sr-ok:#3ba55d;--sr-warn:#e0a100;--sr-err:#d9534f;--sr-info:#5b7a8c; --sr-ok-ink:#286f3e;--sr-warn-ink:#825e00;--sr-err-ink:#b72c28;--sr-info-ink:#4a6371; --sr-hell:#e4e7ec;--sr-auf-hell:#24282e; --knopf-schatten:0 1px 2px rgba(0,63,80,.20),0 4px 10px rgba(0,63,80,.16); --knopf-schatten-hover:0 2px 4px rgba(0,63,80,.22),0 8px 18px rgba(0,63,80,.20); --knopf-schatten-aktiv:0 1px 2px rgba(0,63,80,.24); /* BETA-Chip (Betreiber-Wunsch 06.09.2026): transparent, oranger Rahmen, grell oranger Text, pulsierend. „SO GRELL WIE MÖGLICH" HEISST JE THEMA ETWAS ANDERES, und das ist keine Geschmacksfrage: der Chip ist transparent, sein Grund also die Kartenfläche. Auf Weiß hält ein #ff7a18 nur 2,6:1 — als Text unlesbar. Gemessen wurde deshalb der GRELLSTE Ton, der 4,5:1 noch schafft: hell #d44000 (4,63:1), grau #bd3400 (4,55:1), dunkel #ff7a18 (5,54:1). Im dunklen Thema, wo Daniel arbeitet, ist das ein echtes Signalorange. */ --beta-ink:#d44000;--beta-rand:rgba(212,64,0,.5);--beta-rand-ruhe:rgba(212,64,0,.26); --beta-glow:rgba(212,64,0,.5);--beta-glow-weit:rgba(212,64,0,.24); --beta-flaeche-peak:rgba(212,64,0,.12); --sr-int-i:#7a6fd0;--sr-int-t:#c05c8a; /* Serienfarben der Diagramme (Designsystem, Kapitel Diagramme; identisch mit Cortex). FESTE Reihenfolge, nie zyklisch. Sie kommen ausschliesslich in Diagrammen vor — eine Serie ist kein Status und ein Status keine Serie. */ --series-1:#2a78d6;--series-2:#eb6834;--series-3:#1baf7a;--series-4:#eda100; --series-5:#e87ba4;--series-6:#008300;--series-7:#4a3aa7;--series-8:#e34948; /* Ordinale Blau-Rampe fuer die Positionsbaender (1-3 / 4-10 / 11-20 / 21-50 / 51-100). Vorher trugen die fuenf Baender Gruen/Blau/Amber/Rot/Grau — eine Rangfolge in Statusfarben, bei Rot-Gruen-Schwaeche nicht lesbar (Veto 2). */ --ord-1:#86b6ef;--ord-2:#5598e7;--ord-3:#2a78d6;--ord-4:#1c5cab;--ord-5:#104281; --sr-e1:0 1px 2px rgba(20,24,28,.06);--sr-e-modal:0 16px 48px rgba(10,12,15,.35); --sr-scrim:rgba(15,18,22,.45)} /* GRAU = DUNKELGRAU WIE DER CORTEX-GRAUMODUS (Betreiber-Auftrag 06.09.2026: „Graues Thema wie Cortex-Graumodus, einen Tick heller bzw. manche Optionen in Hellgrau — nicht grossflaechig"). Bis heute war „Grau" ein HELLES Thema mit dunkler Schrift (Grund #a2a8b0, Karten #e2e5e9). Cortex fuehrt seinen Graumodus (`dim`) als dunkles Grau: Grund #24262b, Karten #2e3138/#454a54, helle Schrift. Hier dasselbe Bild, jede Flaeche einen Tick heller (Grund #2a2d33 statt #24262b, Karten #383c44), und die „hellgrauen Optionen" sind gezielt gesetzt: Tabellenkoepfe und Gruppen- labels (--thead-fg, unten) in Hellgrau #c9ced6, nicht die Flaechen. ALLE Tinten sind gegen die neuen Flaechen gemessen (Karte #383c44): Ink 8,8:1, Mut 4,8:1, Ok 5,4:1, Warn 5,6:1, Err 4,9:1, Info 4,9:1, Akzent-Tinte 5,4:1, BETA #ff8c38 4,8:1, Feldrahmen 3,7:1. Die Serien- und Rampenfarben sind die des dunklen Themas — gegen die Diagrammflaeche #2f333a nachgemessen; nur --series-6 (#008300 lag bei 2,6:1) ist auf #12a012 (3,7:1) angehoben. */ [data-theme="medium"]{ --ki-bot-training:#82a5f5;--ki-bot-suche:#eac54f;--ki-bot-nutzer:#ff7373; /* Akzent-Tinte heller als im dunklen Thema (#3cc4e4): auf dem helleren Grau plus 14 % Akzentflaeche plus Zebra haelt erst #8be1f3 die 4,5:1 (gemessen 4,72:1; #45c8e6 lag bei 3,55:1). */ --sr-acc:#00abd7;--sr-acc-ink:#8be1f3;--sr-acc-line:#00abd7; --sr-bg:#2b2e34;--sr-nav:#32363d;--sr-surface:#3a3f47;--sr-soft:#444a53; /* Hellgrau-Inseln (Betreiber: „manche Optionen in Hellgrau — nicht grossflaechig"): aktives Zeitraum-Segment, Tabellenkopf beim Sortieren, Chips. Schrift darauf #24282e (10,9:1). Nie als Karten- oder Seitengrund. */ --sr-hell:#d9dde2;--sr-auf-hell:#24282e; /* Tinten GEGEN DIE HELLSTE FLAECHE gemessen (scripts/css-pruefen.js prueft jede Tinte auch auf --sr-soft + Zebra, #4b5059): Mut 4,6:1, Feldrahmen 3,1:1 — die Werte der SuperStyler-Tabelle (#a9b0b9 / #8d95a1) hielten dort nur 4,35 bzw. 2,96:1. */ --sr-line:#98a3ae;--sr-hair:#4a4f59;--sr-feld-line:var(--sr-line); --sr-ink:#e9ebee;--sr-mut:#bcc6d0;--sr-tabmut:#bcc6d0; /* Knopfschatten in den dunklen Themen: Schwarz statt Blau. */ --knopf-schatten:0 1px 2px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.40); --knopf-schatten-hover:0 2px 4px rgba(0,0,0,.50),0 8px 18px rgba(0,0,0,.45); --knopf-schatten-aktiv:0 1px 2px rgba(0,0,0,.55); --sr-ok:#3ba55d;--sr-warn:#e0a100;--sr-err:#d9534f;--sr-info:#5b7a8c; /* Badge-Tinten heller als im dunklen Thema: der Badge-Grund (15 % Status auf der hellsten Flaeche) ist hier heller, 4,5:1 brauchen mehr Licht. */ --sr-ok-ink:#96e5a6;--sr-warn-ink:#fbd37a;--sr-err-ink:#ffbcb5;--sr-info-ink:#83d8ff; --beta-ink:#ff8c38;--beta-rand:rgba(255,140,56,.55);--beta-rand-ruhe:rgba(255,140,56,.3); --beta-glow:rgba(255,140,56,.7);--beta-glow-weit:rgba(255,140,56,.4); --beta-flaeche-peak:rgba(255,140,56,.15); --sr-int-i:#a79ce8;--sr-int-t:#e090b4; --series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500; --series-5:#d55181;--series-6:#12a012;--series-7:#9085e9;--series-8:#e66767; --ord-1:#b7d3f6;--ord-2:#86b6ef;--ord-3:#5598e7;--ord-4:#2a78d6;--ord-5:#1c5cab; --sr-e1:0 1px 2px rgba(0,0,0,.30);--sr-e-modal:0 16px 48px rgba(0,0,0,.55); --sr-scrim:rgba(6,8,11,.58)} [data-theme="dark"]{ --ki-bot-training:#7aa2ff;--ki-bot-suche:#eac54f;--ki-bot-nutzer:#ff7373; --sr-acc:#00abd7;--sr-acc-ink:#3cc4e4;--sr-acc-line:#00abd7; --sr-bg:#191c20;--sr-nav:#1f2328;--sr-surface:#252a30;--sr-soft:#2b3138; --sr-hell:#d9dde2;--sr-auf-hell:#24282e; --knopf-schatten:0 1px 2px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.40); --knopf-schatten-hover:0 2px 4px rgba(0,0,0,.50),0 8px 18px rgba(0,0,0,.45); --knopf-schatten-aktiv:0 1px 2px rgba(0,0,0,.55); --sr-line:#768392;--sr-hair:#2d3339;--sr-feld-line:var(--sr-line); --sr-ink:#e6e9ec;--sr-mut:#99a2ac;--sr-tabmut:#99a2ac; /* Statusflaechen sind in allen drei Themen DIESELBEN (Designsystem, Tabelle Status): nur die Tinte wechselt. Dunkel fuehrte bis zum 03.09.2026 eigene, hellere Flaechen (#4cb56d/#d9a940/#e06661) — damit hiess „Gruen" je nach Thema etwas anderes. */ --sr-ok:#3ba55d;--sr-warn:#e0a100;--sr-err:#d9534f;--sr-info:#5b7a8c; --sr-ok-ink:#75c68f;--sr-warn-ink:#ddb255;--sr-err-ink:#ea9692;--sr-info-ink:#9ab0bd; /* Dunkel trägt das Leuchten am weitesten — deshalb hier die kräftigsten Alpha-Werte: auf #252a30 ist ein Halo sichtbar, auf Weiß verschluckt ihn der Grund. */ --beta-ink:#ff7a18;--beta-rand:rgba(255,122,24,.55);--beta-rand-ruhe:rgba(255,122,24,.3); --beta-glow:rgba(255,122,24,.8);--beta-glow-weit:rgba(255,122,24,.45); --beta-flaeche-peak:rgba(255,122,24,.15); --sr-int-i:#a79ce8;--sr-int-t:#e090b4; /* Eigene Serien-Abstimmung auf die dunkle Diagrammflaeche (#202229): alle acht halten dort >= 3:1. */ --series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500; --series-5:#d55181;--series-6:#008300;--series-7:#9085e9;--series-8:#e66767; --ord-1:#b7d3f6;--ord-2:#86b6ef;--ord-3:#5598e7;--ord-4:#2a78d6;--ord-5:#1c5cab; --sr-e1:0 1px 2px rgba(0,0,0,.35);--sr-e-modal:0 16px 48px rgba(0,0,0,.60); --sr-scrim:rgba(4,6,9,.62)} /* ============================ MONOCHROME BLAU-PALETTE (05.09.2026) ========= Betreiber-Wunsch: „nur sehr monoton vom Ackermann-Blau über gewöhnlich und royalblau bis hin zu einem helleren Blauton bis weiß-blau gestaffelt" — und zwar auf ALLEN Seiten und in ALLEN Charts. SIE HÄNGT AN EINEM ATTRIBUT, NICHT AN EINER ENGINE: `data-palette="blau"` am (aus mandanten.darstellung_json). Damit greift sie in einem Zug für die drei Chart-Engines und für die serverseitigen SVGs — alle drei lesen dieselben Tokens --series-1…8 und --ord-1…5 (app/lib/svg.js, app/views/charts.js themeFarben()). Es gibt keinen zweiten Ort, an dem Chartfarben entstehen. DIE STUFEN SIND GEMESSEN, NICHT GEWÄHLT. Jede Stufe hält mindestens 3,2:1 gegen die Diagrammfläche ihres Themas (--chart-flaeche: hell #f9fafd, grau #e2e5e9, dunkel #202229) — die 3:1-Schwelle für Grafikobjekte aus WCAG 1.4.11 plus Puffer. Deshalb reicht die Rampe im HELLEN Thema NICHT bis weiß-blau: ein Ton, der dort noch 3:1 hält, ist kein Weiß-Blau mehr. Im dunklen Thema geht sie bis #d3e1f8, weil Weiß-Blau dort der kontrast- stärkste Ton ist. ZWEI ANORDNUNGEN, WEIL ZWEI AUFGABEN: Die Positionsbänder (--ord-*) laufen MONOTON (Band 1 hell, Band 5 dunkel, Richtung wie bisher) — eine Rangfolge muss man ablesen können. Die freien Serien (--series-*) sind dagegen GESPREIZT: Serie 1 ist der kräftigste Ton, Serie 2 springt in die obere Hälfte der Rampe, Serie 3 wieder nach unten. Läge auch dort eine glatte Rampe, sähen zwei Linien nebeneinander fast gleich aus — gemessen am 05.09.2026 an „Besucher gegen Seitenaufrufe": zwei benachbarte Rampenstufen trennt nur 1,2:1. Die Spreizung bringt die ersten beiden Serien auf 2,1:1 und hält im schlechtesten Nachbarpaar noch 1,4:1. WAS SIE NICHT ANFASST: Statusfarben (--green/--amber/--red) und die Akzentfarbe. Ein Status ist keine Serie; eine rote Warnkante bleibt rot, auch wenn die Kurven daneben einfarbig laufen. */ [data-palette="blau"]{ --series-1:#091935;--series-2:#1b5885;--series-3:#0d2649;--series-4:#2681ab; --series-5:#11355e;--series-6:#2d97be;--series-7:#164672;--series-8:#216c99; --ord-1:#2d97be;--ord-2:#22719d;--ord-3:#184f7b;--ord-4:#103159;--ord-5:#091935} /* Grau ist seit dem 06.09.2026 dunkel (siehe [data-theme="medium"] oben): dieselbe Rampe wie im dunklen Thema, gegen #2f333a nachgemessen — nur die kraeftigste Stufe (#247a99, 2,6:1) ist auf #2d94b8 (3,7:1) gehoben. */ [data-palette="blau"][data-theme="medium"]{ --series-1:#2d94b8;--series-2:#73aee4;--series-3:#2a8cba;--series-4:#b3cdf2; --series-5:#3699d4;--series-6:#d3e1f8;--series-7:#54a3dc;--series-8:#93bceb; --ord-1:#d3e1f8;--ord-2:#9bc0ed;--ord-3:#64a8e0;--ord-4:#2e97d2;--ord-5:#2d94b8} [data-palette="blau"][data-theme="dark"]{ --series-1:#247a99;--series-2:#73aee4;--series-3:#2a8cba;--series-4:#b3cdf2; --series-5:#3699d4;--series-6:#d3e1f8;--series-7:#54a3dc;--series-8:#93bceb; --ord-1:#d3e1f8;--ord-2:#9bc0ed;--ord-3:#64a8e0;--ord-4:#2e97d2;--ord-5:#247a99} /* ========================== WEITERE PALETTEN (06.09.2026) ================== Betreiber-Auftrag: „Standardfarben · Pastellfarben · Einfarbig" je Chart, „Einfarbig" in drei Lautstaerken „grell · normal · light". Dieselbe Mechanik wie die Blau-Palette oben: EIN Attribut (data-palette am fuer die Mandanten-Vorgabe, ODER an einem Messknoten, ueber den app/views/charts.js die Tokens einer ANDEREN Palette fuer ein einzelnes Chart abliest), dieselben Tokens --series-1…8 und --ord-1…5. ALLE WERTE SIND GEMESSEN (Werkzeug: OKLCH-Rampe + WCAG-Kontrast, siehe Sitzung 06.09.2026): jede Stufe haelt >= 3,05:1 gegen die Diagrammflaeche ihres Themas (--chart-flaeche: hell #f9fafd, grau #e2e5e9, dunkel #202229). Daraus folgt, was „pastell" und „light" im HELLEN Thema bedeuten koennen: ein echtes Pastell auf Weiss liegt bei 1,5–2:1 und ist als Kurve nicht zu sehen. Pastell ist dort deshalb ein GEDAEMPFTER Mittelton (Chroma 0,085 statt 0,19), Light ein weiches Blau um L 0,46–0,61. Im dunklen Thema sind beide, was ihr Name sagt: helle, weiche Toene, weil Hell auf Dunkel der kontraststarke Fall ist. NACHBARN LIEGEN DICHT (1,1–1,7:1). Das ist bei acht Stufen EINER Farbe unvermeidlich — und deshalb waehlt app/views/charts.js bei einfarbigen Paletten die Stufen NACH ANZAHL DER SERIEN aus der nach Helligkeit sortierten Rampe (zwei Serien: die Enden; drei: Enden + Mitte …). Die Reihenfolge der Tokens hier folgt derselben Spreizung wie bei „blau" (Serie 1 kraeftig, Serie 2 in die andere Haelfte …), damit das Fallback- SVG des Servers, das nur den Index kennt, brauchbar bleibt. Statusfarben und Akzent bleiben unberuehrt — dieselbe Regel wie bei „blau". */ /* „standard" AUSDRUECKLICH (06.09.2026): ein Chart, das gegen die Mandanten-Vorgabe „blau" die bunte Palette waehlt, liest seine Tokens an einem Messknoten mit data-palette="standard" — ohne diesen Block erbte der Knoten die Blau-Werte des und die Wahl bliebe wirkungslos. */ [data-palette="standard"]{ --series-1:#2a78d6;--series-2:#eb6834;--series-3:#1baf7a;--series-4:#eda100; --series-5:#e87ba4;--series-6:#008300;--series-7:#4a3aa7;--series-8:#e34948; --ord-1:#86b6ef;--ord-2:#5598e7;--ord-3:#2a78d6;--ord-4:#1c5cab;--ord-5:#104281} [data-palette="standard"][data-theme="medium"]{ --series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500; --series-5:#d55181;--series-6:#12a012;--series-7:#9085e9;--series-8:#e66767; --ord-1:#b7d3f6;--ord-2:#86b6ef;--ord-3:#5598e7;--ord-4:#2a78d6;--ord-5:#1c5cab} [data-palette="standard"][data-theme="dark"]{ --series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500; --series-5:#d55181;--series-6:#008300;--series-7:#9085e9;--series-8:#e66767; --ord-1:#b7d3f6;--ord-2:#86b6ef;--ord-3:#5598e7;--ord-4:#2a78d6;--ord-5:#1c5cab} [data-palette="pastell"]{ --series-1:#698fbf;--series-2:#b87b60;--series-3:#5b9c7a;--series-4:#a4884d;--series-5:#b5768f;--series-6:#6b9a6c;--series-7:#8b83bd;--series-8:#ba7872; --ord-1:#5d82b2;--ord-2:#496e9c;--ord-3:#335784;--ord-4:#1d406b;--ord-5:#072b54;} [data-palette="pastell"][data-theme="medium"]{ --series-1:#92c1fd;--series-2:#f4a988;--series-3:#82d2a8;--series-4:#dbb970;--series-5:#f2a3c1;--series-6:#95cf96;--series-7:#bcb3fa;--series-8:#f8a49d; --ord-1:#d5e6fc;--ord-2:#9fc7fb;--ord-3:#80a7d9;--ord-4:#6388b9;--ord-5:#5a7faf;} [data-palette="pastell"][data-theme="dark"]{ --series-1:#92c1fd;--series-2:#f4a988;--series-3:#82d2a8;--series-4:#dbb970;--series-5:#f2a3c1;--series-6:#95cf96;--series-7:#bcb3fa;--series-8:#f8a49d; --ord-1:#d5e6fc;--ord-2:#9fc7fb;--ord-3:#80a7d9;--ord-4:#6388b9;--ord-5:#4c719f;} [data-palette="blau-grell"]{ --series-1:#02458e;--series-2:#016abe;--series-3:#03528e;--series-4:#0d7cb6;--series-5:#085d90;--series-6:#0a73f3;--series-7:#0b6895;--series-8:#0c74b7; --ord-1:#0a7bda;--ord-2:#096dc1;--ord-3:#075ea9;--ord-4:#035397;--ord-5:#004885;} [data-palette="blau-grell"][data-theme="medium"]{ --series-1:#bedaff;--series-2:#3a9bfd;--series-3:#9dccfd;--series-4:#0186c5;--series-5:#70bffe;--series-6:#217bf4;--series-7:#0db4ff;--series-8:#088fe3; --ord-1:#bcdbff;--ord-2:#86bfff;--ord-3:#49a2fe;--ord-4:#0287f0;--ord-5:#057ee1;} [data-palette="blau-grell"][data-theme="dark"]{ --series-1:#bedaff;--series-2:#3a9bfd;--series-3:#9dccfd;--series-4:#0186c5;--series-5:#70bffe;--series-6:#076be3;--series-7:#0db4ff;--series-8:#088fe3; --ord-1:#bcdbff;--ord-2:#86bfff;--ord-3:#49a2fe;--ord-4:#0287f0;--ord-5:#0c72cb;} [data-palette="blau-light"]{ --series-1:#2d5b88;--series-2:#4871a2;--series-3:#375f8f;--series-4:#4f7eae;--series-5:#336893;--series-6:#5c86b8;--series-7:#3e6c9b;--series-8:#4579a6; --ord-1:#5887b7;--ord-2:#4c7bab;--ord-3:#416f9e;--ord-4:#356391;--ord-5:#2d5b88;} [data-palette="blau-light"][data-theme="medium"]{ --series-1:#e2f0ff;--series-2:#92bef4;--series-3:#cde4ff;--series-4:#76a6d8;--series-5:#b2d9fd;--series-6:#719bcf;--series-7:#9dccfd;--series-8:#7eb4e4; --ord-1:#e2f0ff;--ord-2:#badbfe;--ord-3:#94c6f9;--ord-4:#7fafe2;--ord-5:#6d9dce;} [data-palette="blau-light"][data-theme="dark"]{ --series-1:#e2f0ff;--series-2:#92bef4;--series-3:#cde4ff;--series-4:#76a6d8;--series-5:#b2d9fd;--series-6:#719bcf;--series-7:#9dccfd;--series-8:#7eb4e4; --ord-1:#e2f0ff;--ord-2:#badbfe;--ord-3:#94c6f9;--ord-4:#7fafe2;--ord-5:#6d9dce;} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px);overflow-x:clip} body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:var(--lh-body);font-size:var(--fs-body);font-weight:450;-webkit-font-smoothing:antialiased;padding-top:var(--header-h);overflow-x:clip} /* ALT-HUELLE ENTFALLEN (08.09.2026). Hier standen .header samt .header-left/ .brand-logo/.header-sep/.header-titles/.header-title/.header-sub, dazu .theme-toggle und .nav-burger — der fixierte dunkle Kopfbalken der Haus-Vorlage und seine beiden Knoepfe. Der R3-Umbau (30.08.2026) hat ihn ersetzt: die App rendert heute