/* AUS landingpage.html GESCHNITTEN - nicht von Hand aendern.
Neu erzeugen mit: python werkzeuge/token-schneiden.py */
:root{
/* ============================================================
HELL ist die Grundlage, DUNKEL ein eigener Bereich.
============================================================
Der Nutzer will beides umschaltbar (28.07.2026). Aufgebaut nach
der Regel aus artifact-design: Die Systemeinstellung wird beachtet,
ABER der Schalter auf der Seite gewinnt — in beide Richtungen.
Deshalb drei Ebenen:
:root -> hell (Grundlage)
@media dark + :not([data-theme=light]) -> System sagt dunkel
:root[data-theme=dark] -> Schalter sagt dunkel
Gedreht werden weiterhin nur die TOKEN. Die rund 70 Regeln, die
var(--ink) und var(--sheet) benutzen, bleiben unangetastet.
============================================================ */
--anthrazit:oklch(24% 0.018 252);
--anthrazit-2:oklch(29% 0.02 252);
--ink:oklch(25% 0.02 252);
--ink-soft:oklch(44% 0.018 252);
--ink-faint:oklch(58% 0.015 252);
--sheet:oklch(97.5% 0.004 252);
--sheet-2:oklch(94.5% 0.006 252);
--line:oklch(84% 0.012 252);
--line-dark:oklch(38% 0.02 252);
--signal:oklch(67% 0.185 45);
--signal-deep:oklch(52% 0.17 45);
--signal-bg:oklch(95% 0.03 45);
--on-dark:oklch(96% 0.005 252);
--on-dark-soft:oklch(80% 0.015 252);
--ok:oklch(48% 0.13 155); --ok-bg:oklch(94% 0.04 155);
--warn:oklch(52% 0.12 80); --warn-bg:oklch(95% 0.04 85);
--risk:oklch(50% 0.15 30); --risk-bg:oklch(95% 0.03 25);
--blue:oklch(45% 0.13 250); --blue-bg:oklch(94% 0.04 250);
--riss:oklch(56% 0.022 252);
--r:10px;
--maxw:1140px;
--ease:cubic-bezier(.16,1,.3,1);
--z-sticky:20; --z-toast:40;
}
/* System sagt dunkel — und der Schalter widerspricht nicht. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--sheet:oklch(15.5% 0.014 252);
--sheet-2:oklch(20% 0.017 252);
--anthrazit:oklch(15.5% 0.014 252);
--anthrazit-2:oklch(20% 0.017 252);
--ink:oklch(95% 0.006 252);
--ink-soft:oklch(74% 0.014 252);
--ink-faint:oklch(58% 0.016 252);
--on-dark:oklch(95% 0.006 252);
--on-dark-soft:oklch(74% 0.014 252);
/* Nachgemessen: Bei 38% lagen die Rahmen bei 1,80:1 — kaum zu sehen.
Fuer Umrisse gilt 3:1 als Grenze. 52% ergibt 3,55 auf dem Grund und
3,28 auf den Kacheln, also ueberall ueber der Grenze. */
--line:oklch(52% 0.022 252);
--line-dark:oklch(58% 0.024 252);
--riss:oklch(52% 0.022 252);
--signal:oklch(67% 0.185 45);
--signal-deep:oklch(74% 0.17 45);
--signal-bg:oklch(28% 0.07 45);
--ok:oklch(72% 0.15 155); --ok-bg:oklch(26% 0.05 155);
--warn:oklch(80% 0.13 85); --warn-bg:oklch(28% 0.05 85);
--risk:oklch(70% 0.16 25); --risk-bg:oklch(28% 0.06 25);
--blue:oklch(72% 0.11 250); --blue-bg:oklch(26% 0.05 250);
}
}
/* Schalter sagt dunkel — gewinnt immer. */
:root[data-theme="dark"]{
--sheet:oklch(15.5% 0.014 252);
--sheet-2:oklch(20% 0.017 252);
--anthrazit:oklch(15.5% 0.014 252);
--anthrazit-2:oklch(20% 0.017 252);
--ink:oklch(95% 0.006 252);
--ink-soft:oklch(74% 0.014 252);
--ink-faint:oklch(58% 0.016 252);
--on-dark:oklch(95% 0.006 252);
--on-dark-soft:oklch(74% 0.014 252);
/* Nachgemessen: Bei 38% lagen die Rahmen bei 1,80:1 — kaum zu sehen.
Fuer Umrisse gilt 3:1 als Grenze. 52% ergibt 3,55 auf dem Grund und
3,28 auf den Kacheln, also ueberall ueber der Grenze. */
--line:oklch(52% 0.022 252);
--line-dark:oklch(58% 0.024 252);
--riss:oklch(52% 0.022 252);
--signal:oklch(67% 0.185 45);
--signal-deep:oklch(74% 0.17 45);
--signal-bg:oklch(28% 0.07 45);
--ok:oklch(72% 0.15 155); --ok-bg:oklch(26% 0.05 155);
--warn:oklch(80% 0.13 85); --warn-bg:oklch(28% 0.05 85);
--risk:oklch(70% 0.16 25); --risk-bg:oklch(28% 0.06 25);
--blue:oklch(72% 0.11 250); --blue-bg:oklch(26% 0.05 250);
}
/* Und die Gegenrichtung, ausdruecklich und als LETZTES: Waehlt der Nutzer
hell, gilt hell — auch wenn das Betriebssystem dunkel meldet. Ohne
diesen Block verliess sich alles auf ein :not() in der Medienabfrage;
gemessen kam dabei unter data-theme="light" trotzdem der dunkle Wert
heraus (--ink 95% statt 25%), und die Schnellcheck-Beschriftungen
standen weiss auf hell. */
:root[data-theme="light"]{
--anthrazit:oklch(24% 0.018 252);
--anthrazit-2:oklch(29% 0.02 252);
--ink:oklch(25% 0.02 252);
--ink-soft:oklch(44% 0.018 252);
--ink-faint:oklch(58% 0.015 252);
--sheet:oklch(97.5% 0.004 252);
--sheet-2:oklch(94.5% 0.006 252);
--line:oklch(84% 0.012 252);
--line-dark:oklch(38% 0.02 252);
--signal-deep:oklch(52% 0.17 45);
--signal-bg:oklch(95% 0.03 45);
--on-dark:oklch(96% 0.005 252);
--on-dark-soft:oklch(80% 0.015 252);
--ok:oklch(48% 0.13 155); --ok-bg:oklch(94% 0.04 155);
--warn:oklch(52% 0.12 80); --warn-bg:oklch(95% 0.04 85);
--risk:oklch(50% 0.15 30); --risk-bg:oklch(95% 0.03 25);
--blue:oklch(45% 0.13 250); --blue-bg:oklch(94% 0.04 250);
--riss:oklch(56% 0.022 252);
}
@supports not (color: oklch(50% 0 0)){
:root{
--anthrazit:#1c232d; --anthrazit-2:#262f3b; --ink:#1e2630; --ink-soft:#59646f;
--ink-faint:#8b97a2; --sheet:#f5f7f9; --sheet-2:#e9edf1; --line:#d2d9df;
--line-dark:#414d5a; --signal:#e8600a; --signal-deep:#bf4a00; --signal-bg:#fdf0e7;
--on-dark:#f2f5f7; --on-dark-soft:#b7c1ca; --riss:#79838f;
--ok:#1f7a4d; --ok-bg:#e5f2ec; --warn:#a37b17; --warn-bg:#f9f1dd;
--risk:#a03a20; --risk-bg:#f7e9e6; --blue:#1d4e89; --blue-bg:#e7eef6;
}
:root[data-theme="dark"]{
--anthrazit:#14181e; --anthrazit-2:#1c222a; --ink:#eef1f4; --ink-soft:#a8b2bc;
--ink-faint:#7d8791; --sheet:#14181e; --sheet-2:#1c222a; --line:#5b6874;
--line-dark:#68757f; --on-dark:#eef1f4; --on-dark-soft:#a8b2bc; --riss:#69737d;
--signal-deep:#ff8a3d; --signal-bg:#4a2410;
--ok:#5fc98d; --ok-bg:#16331f; --warn:#e0b84a; --warn-bg:#332a12;
--risk:#f08a70; --risk-bg:#3a1c16; --blue:#7aaef0; --blue-bg:#16243a;
}
}
/* Diese Klammer schliesst den @supports-Block oben. Sie fehlte:
Browser schliessen am Dateiende von selbst, deshalb fiel es nicht
auf — aber alles, was hier ANGEHAENGT wird, landete sonst
unbemerkt IM Ausweichblock und galt nur fuer Browser ohne oklch.
Gefunden am 04.09.2026 durch Zaehlen der Klammern. */