/* Dunkles Erscheinungsbild für alle internen Module (Simon 130495, 08.09.2026). Dieselbe Farbwelt wie im Flotten-Chat, dieselbe Schaltweise: manuell über data-theme am , sonst folgt die Seite dem System. Der Umschalter sitzt im Profilmenü und merkt sich die Wahl unter demselben Schlüssel wie der Chat (fc_theme), damit sie überall gilt. In fleet-control sind zwei Token-Sätze gewachsen: die --n-Skala (Sales-Engine-Module) und --bg/--card/--ink (Chat und Verwandte). Beide werden hier bedient, damit eine Datei reicht. */ :root{color-scheme:light; /* Leichte Tönungen für Eventbox- und Verlaufs-Karten. Hell sind sie fast weiß, im Dunkeln eine Spur heller als die Karte — der Unterschied bleibt, die Helligkeit dreht mit. */ --ton-mail:#fbfdff;--ton-ereignis:#fffdf7;--ton-raus:#f6fbf8; /* In mehreren Modulen benutzt, aber nirgends definiert — ohne Wert erben die Texte die Elternfarbe und die Abstufung fällt weg (Design-Prüfung 08.09.2026). */ --n-600:hsl(222 13% 38%);--n-800:hsl(222 28% 22%); /* Gefüllte Akzentfläche getrennt von der Akzent-Schrift: im Dunkeln ziehen die Rollen auseinander. */ --brand-fill:hsl(220 100% 30%);--on-brand:#fff} /* ── Die dunklen Werte, einmal definiert ─────────────────────────────────── */ @media all { html[data-theme="dark"]{ /* Chat-Familie */ --bg:#0f1420;--card:#171e2e;--panel:#171e2e;--line:#2a3346;--ink:#e7ecf5;--muted:#8b96ab; --brand:#5b7cff;--brand-soft:#1c2740;--own:#1e2c4a;--own-border:#2f4370;--shadow:rgba(0,0,0,.55); --danger:#ff7a7a;--danger-soft:#3a1e22;--danger-border:#5c2a30;--due-bg:#2a1a1e;--due-glow:#43242b;--off-lamp:#3a4356; --ok:#4ade80;--ok-soft:#17301f;--ok-border:#2b5b40;--ok-ink:#0f1420;--warn:#fbbf24;--warn-soft:#3a2a12;--warn-border:#6b4e1a; /* Sales-Engine-Skala: von hell nach dunkel gedreht, Kontraste bleiben erhalten */ --n-0:#131a28;--n-25:#151d2c;--n-50:#1e2839;--n-100:#2a3346;--n-200:#38445c;--n-300:#4d5b78; --n-400:#8b96ab;--n-500:#a3adc0;--n-700:#d3dae7;--n-900:#e7ecf5; --blue-50:#1c2740;--blue-500:#5b7cff;--blue-600:#7a94ff; /* Akzent als EINE Rampe: Fläche → Rand → Schrift. Vorher war --brand-50 grün und die Schrift darauf dunkelblau — 1,3:1 und damit unlesbar (Simon 130572). */ --brand-50:#1e2a47;--brand-100:#33447a;--brand-600:#a8bcff;--brand-fill:#5b7cff;--on-brand:#0f1420; --n-600:#b9c2d2;--n-800:#dfe6f2;--eng:#5b7cff;--warn-50:#3a2a12;--n-line:#2a3346; --sh-1:0 1px 2px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4); --sh-2:0 2px 4px rgba(0,0,0,.5),0 6px 16px -2px rgba(0,0,0,.5); --ring:inset 0 1px 0 rgba(255,255,255,.04); /* Weitere helle Flächen-Token aus einzelnen Modulen: gleiche Farbfamilie, dunkle Helligkeit (Terminal-Erfolgskasten, Omni-Zeilen, Wurzelwerk-Marker, Kundenportal-Gold …). */ --acc-soft:hsl(214 40% 16%);--accent-50:hsl(38 35% 15%);--amber-soft:hsl(42 40% 15%);--bad-50:hsl(4 40% 16%);--blau-soft:hsl(214 40% 16%);--blue-100:hsl(222 35% 28%);--brand-100:hsl(222 30% 28%);--bub-aus:hsl(107 25% 16%);--gold-100:hsl(222 30% 28%);--gold-50:hsl(222 35% 16%);--grau-soft:hsl(214 16% 18%);--gruen-50:hsl(150 30% 14%);--mb-aus:hsl(222 35% 15%);--mb-aus-kopf:hsl(222 35% 17%);--mb-aus-line:hsl(222 30% 28%);--mb-kopf:hsl(222 22% 16%);--ok-50:hsl(145 35% 14%);--on-navy:hsl(222 25% 88%);--rot-50:hsl(354 35% 16%);--wa-av-bg:hsl(145 25% 20%);--wa-fond:hsl(44 14% 13%);--wa-kopf:hsl(150 20% 15%);--wa-punkt:hsl(44 14% 22%);--z-mail:hsl(222 35% 16%);--z-mail-hov:hsl(222 38% 21%);--z-wa:hsl(145 30% 15%); /* Dunkle Schriftfarben, die es nur hell gab: Navy-Skala, --fg, Marken-Grün, Gold, Rot. Diese Namen tragen in den Kundenseiten Flächen — die laden dieses Stylesheet aber nicht. */ --navy:#e7ecf5;--navy-2:#dbe3f0;--navy-600:#c3cddd;--navy-700:#d3dae7;--navy-800:#e0e6f2;--navy-900:#e7ecf5;--fg:#e7ecf5;--brand-700:#4ade80;--brand-dark:#4ade80;--gold-600:#e2c178;--gold-400:#e2c178;--rot:#ff7a7a; color-scheme:dark; } } @media(prefers-color-scheme:dark){ html:not([data-theme="light"]){ --bg:#0f1420;--card:#171e2e;--panel:#171e2e;--line:#2a3346;--ink:#e7ecf5;--muted:#8b96ab; --brand:#5b7cff;--brand-soft:#1c2740;--own:#1e2c4a;--own-border:#2f4370;--shadow:rgba(0,0,0,.55); --danger:#ff7a7a;--danger-soft:#3a1e22;--danger-border:#5c2a30;--due-bg:#2a1a1e;--due-glow:#43242b;--off-lamp:#3a4356; --ok:#4ade80;--ok-soft:#17301f;--ok-border:#2b5b40;--ok-ink:#0f1420;--warn:#fbbf24;--warn-soft:#3a2a12;--warn-border:#6b4e1a; --n-0:#131a28;--n-25:#151d2c;--n-50:#1e2839;--n-100:#2a3346;--n-200:#38445c;--n-300:#4d5b78; --n-400:#8b96ab;--n-500:#a3adc0;--n-700:#d3dae7;--n-900:#e7ecf5; --blue-50:#1c2740;--blue-500:#5b7cff;--blue-600:#7a94ff; /* Akzent als EINE Rampe: Fläche → Rand → Schrift. Vorher war --brand-50 grün und die Schrift darauf dunkelblau — 1,3:1 und damit unlesbar (Simon 130572). */ --brand-50:#1e2a47;--brand-100:#33447a;--brand-600:#a8bcff;--brand-fill:#5b7cff;--on-brand:#0f1420; --n-600:#b9c2d2;--n-800:#dfe6f2;--eng:#5b7cff;--warn-50:#3a2a12;--n-line:#2a3346; --sh-1:0 1px 2px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4); --sh-2:0 2px 4px rgba(0,0,0,.5),0 6px 16px -2px rgba(0,0,0,.5); --ring:inset 0 1px 0 rgba(255,255,255,.04); /* Weitere helle Flächen-Token aus einzelnen Modulen: gleiche Farbfamilie, dunkle Helligkeit (Terminal-Erfolgskasten, Omni-Zeilen, Wurzelwerk-Marker, Kundenportal-Gold …). */ --acc-soft:hsl(214 40% 16%);--accent-50:hsl(38 35% 15%);--amber-soft:hsl(42 40% 15%);--bad-50:hsl(4 40% 16%);--blau-soft:hsl(214 40% 16%);--blue-100:hsl(222 35% 28%);--brand-100:hsl(222 30% 28%);--bub-aus:hsl(107 25% 16%);--gold-100:hsl(222 30% 28%);--gold-50:hsl(222 35% 16%);--grau-soft:hsl(214 16% 18%);--gruen-50:hsl(150 30% 14%);--mb-aus:hsl(222 35% 15%);--mb-aus-kopf:hsl(222 35% 17%);--mb-aus-line:hsl(222 30% 28%);--mb-kopf:hsl(222 22% 16%);--ok-50:hsl(145 35% 14%);--on-navy:hsl(222 25% 88%);--rot-50:hsl(354 35% 16%);--wa-av-bg:hsl(145 25% 20%);--wa-fond:hsl(44 14% 13%);--wa-kopf:hsl(150 20% 15%);--wa-punkt:hsl(44 14% 22%);--z-mail:hsl(222 35% 16%);--z-mail-hov:hsl(222 38% 21%);--z-wa:hsl(145 30% 15%); /* Dunkle Schriftfarben, die es nur hell gab: Navy-Skala, --fg, Marken-Grün, Gold, Rot. Diese Namen tragen in den Kundenseiten Flächen — die laden dieses Stylesheet aber nicht. */ --navy:#e7ecf5;--navy-2:#dbe3f0;--navy-600:#c3cddd;--navy-700:#d3dae7;--navy-800:#e0e6f2;--navy-900:#e7ecf5;--fg:#e7ecf5;--brand-700:#4ade80;--brand-dark:#4ade80;--gold-600:#e2c178;--gold-400:#e2c178;--rot:#ff7a7a; color-scheme:dark; } } /* ── Was die Module hart codiert haben, wird im Dunkeln nachgezogen ──────── Viele Seiten schreiben #fff, #f7f9fc oder feste Grautöne direkt ins CSS. Diese Regeln fangen die häufigsten Fälle ab, ohne die Struktur anzufassen. */ html[data-theme="dark"]{background:#0f1420} html[data-theme="dark"] body{background:var(--bg);color:var(--ink)} html[data-theme="dark"] .card,html[data-theme="dark"] .panel,html[data-theme="dark"] .box, html[data-theme="dark"] .mod,html[data-theme="dark"] .pk,html[data-theme="dark"] .kachel{background:var(--card);border-color:var(--line);color:var(--ink)} html[data-theme="dark"] .topbar,html[data-theme="dark"] header{background:var(--card);border-color:var(--line);color:var(--ink)} html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:var(--n-50);border-color:var(--line);color:var(--ink)} html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--muted)} html[data-theme="dark"] table th{color:var(--muted);border-color:var(--line)} html[data-theme="dark"] table td{border-color:var(--line)} html[data-theme="dark"] hr{border-color:var(--line)} html[data-theme="dark"] a{color:var(--blue-500)} html[data-theme="dark"] .muted,html[data-theme="dark"] small{color:var(--muted)} html[data-theme="dark"] img[src$=".svg"]{filter:none} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]){background:#0f1420} html:not([data-theme="light"]) body{background:var(--bg);color:var(--ink)} html:not([data-theme="light"]) .card,html:not([data-theme="light"]) .panel,html:not([data-theme="light"]) .box, html:not([data-theme="light"]) .mod,html:not([data-theme="light"]) .pk,html:not([data-theme="light"]) .kachel{background:var(--card);border-color:var(--line);color:var(--ink)} html:not([data-theme="light"]) .topbar,html:not([data-theme="light"]) header{background:var(--card);border-color:var(--line);color:var(--ink)} html:not([data-theme="light"]) input,html:not([data-theme="light"]) textarea,html:not([data-theme="light"]) select{background:var(--n-50);border-color:var(--line);color:var(--ink)} html:not([data-theme="light"]) input::placeholder,html:not([data-theme="light"]) textarea::placeholder{color:var(--muted)} html:not([data-theme="light"]) table th{color:var(--muted);border-color:var(--line)} html:not([data-theme="light"]) table td{border-color:var(--line)} html:not([data-theme="light"]) hr{border-color:var(--line)} html:not([data-theme="light"]) a{color:var(--blue-500)} html:not([data-theme="light"]) .muted,html:not([data-theme="light"]) small{color:var(--muted)} } /* Der Umschalter im Profilmenü */ .pm-theme{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:14px;font-weight:600; background:transparent;border:0;color:inherit;padding:9px 12px;border-radius:9px;cursor:pointer;text-align:left} .pm-theme:hover{background:var(--n-50,rgba(127,127,127,.12))} /* Häufige Bausteine, die #fff fest verdrahtet haben — im Dunkeln nachgezogen. Bewusst als Liste konkreter Klassen statt einer Holzhammer-Regel, damit nichts überschrieben wird, das absichtlich hell bleiben soll (Logos, Statusfarben). */ html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .karte, html[data-theme="dark"] .tab,html[data-theme="dark"] .filter,html[data-theme="dark"] .spalte, html[data-theme="dark"] .liste,html[data-theme="dark"] .zeile,html[data-theme="dark"] .row, html[data-theme="dark"] .item,html[data-theme="dark"] .block,html[data-theme="dark"] details, html[data-theme="dark"] .modal,html[data-theme="dark"] .dialog,html[data-theme="dark"] .popup, html[data-theme="dark"] .menu,html[data-theme="dark"] .dropdown,html[data-theme="dark"] .pm-menu{background:var(--card);border-color:var(--line);color:var(--ink)} html[data-theme="dark"] .pm-menu a{color:var(--ink)} html[data-theme="dark"] .pm-menu a:hover{background:var(--n-50)} html[data-theme="dark"] .pm-avatar{background:var(--brand-soft);color:var(--brand);border-color:var(--own-border)} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) .btn.ghost,html:not([data-theme="light"]) .karte, html:not([data-theme="light"]) .tab,html:not([data-theme="light"]) .filter,html:not([data-theme="light"]) .spalte, html:not([data-theme="light"]) .liste,html:not([data-theme="light"]) .zeile,html:not([data-theme="light"]) .row, html:not([data-theme="light"]) .item,html:not([data-theme="light"]) .block,html:not([data-theme="light"]) details, html:not([data-theme="light"]) .modal,html:not([data-theme="light"]) .dialog,html:not([data-theme="light"]) .popup, html:not([data-theme="light"]) .menu,html:not([data-theme="light"]) .dropdown,html:not([data-theme="light"]) .pm-menu{background:var(--card);border-color:var(--line);color:var(--ink)} html:not([data-theme="light"]) .pm-menu a{color:var(--ink)} html:not([data-theme="light"]) .pm-menu a:hover{background:var(--n-50)} html:not([data-theme="light"]) .pm-avatar{background:var(--brand-soft);color:var(--brand);border-color:var(--own-border)} } /* Sicherheitsnetz: Überschriften und Beschriftungen, die ihre Farbe fest im Element tragen. Nur dort, wo der Hintergrund dunkel ist — auf farbigen Flächen (Knöpfe, Pillen) nicht anfassen. */ html[data-theme="dark"] .card [style*="color:#1"],html[data-theme="dark"] .card [style*="color:#0"], html[data-theme="dark"] .box [style*="color:#1"],html[data-theme="dark"] .box [style*="color:#0"]{color:var(--n-900)!important} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) .card [style*="color:#1"],html:not([data-theme="light"]) .card [style*="color:#0"], html:not([data-theme="light"]) .box [style*="color:#1"],html:not([data-theme="light"]) .box [style*="color:#0"]{color:var(--n-900)!important} } /* Letztes Netz für weiße Flächen, die noch im Element stehen. Die Mail-Vorschau ist ausgenommen: sie zeigt die echte Mail, so wie sie beim Kunden ankommt, und bleibt deshalb weiß. */ html[data-theme="dark"] [style*="background:#fff"]:not(iframe):not(.mail-papier):not(.mail-papier *), html[data-theme="dark"] [style*="background: #fff"]:not(iframe):not(.mail-papier):not(.mail-papier *), html[data-theme="dark"] [style*="background:white"]:not(iframe):not(.mail-papier):not(.mail-papier *){background:var(--card)!important} html[data-theme="dark"] .mail-papier,html[data-theme="dark"] .mail-papier *{background:#fff} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) [style*="background:#fff"]:not(iframe):not(.mail-papier):not(.mail-papier *), html:not([data-theme="light"]) [style*="background: #fff"]:not(iframe):not(.mail-papier):not(.mail-papier *), html:not([data-theme="light"]) [style*="background:white"]:not(iframe):not(.mail-papier):not(.mail-papier *){background:var(--card)!important} html:not([data-theme="light"]) .mail-papier,html:not([data-theme="light"]) .mail-papier *{background:#fff} } /* Abschnitte und Details-Blöcke, die keine .card-Klasse tragen */ html[data-theme="dark"] section,html[data-theme="dark"] details,html[data-theme="dark"] summary, html[data-theme="dark"] fieldset,html[data-theme="dark"] .sec,html[data-theme="dark"] .abschnitt{background:transparent;color:var(--ink);border-color:var(--line)} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) section,html:not([data-theme="light"]) details,html:not([data-theme="light"]) summary, html:not([data-theme="light"]) fieldset,html:not([data-theme="light"]) .sec,html:not([data-theme="light"]) .abschnitt{background:transparent;color:var(--ink);border-color:var(--line)} } /* Toast: heller Kasten auf dunklem Grund braucht dunkle Schrift (er dreht sich mit --n-900 mit). */ html[data-theme="dark"] .toast{color:var(--n-0)} @media(prefers-color-scheme:dark){html:not([data-theme="light"]) .toast{color:var(--n-0)}} /* Tönungen im Dunkeln */ html[data-theme="dark"]{--ton-mail:#1b2437;--ton-ereignis:#232232;--ton-raus:#18262a} @media(prefers-color-scheme:dark){html:not([data-theme="light"]){--ton-mail:#1b2437;--ton-ereignis:#232232;--ton-raus:#18262a}} /* ── Modulübersicht (/module) ─────────────────────────────────────────────── Die Startseite wird im Server gebaut und hat ihre Farben teils fest verdrahtet. Diese Seite nutzt ein grünes Marken-Grün, während die Chat-Familie Blau führt — deshalb bekommt das Freigeschaltet-Zeichen hier ausdrücklich sein Grün zurück. */ html[data-theme="dark"] .book,html[data-theme="dark"] .archbtn, html[data-theme="dark"] .archpanel,html[data-theme="dark"] .archrow button{background:var(--card);border-color:var(--line);color:var(--ink)} html[data-theme="dark"] .archrow{border-color:var(--line)} html[data-theme="dark"] .pill.on{background:var(--ok-soft);color:var(--ok)} html[data-theme="dark"] .pill.off{background:var(--n-50);color:var(--muted)} html[data-theme="dark"] .ic{background:var(--blue-50)} html[data-theme="dark"] .archov{background:rgba(0,0,0,.6)} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) .book,html:not([data-theme="light"]) .archbtn, html:not([data-theme="light"]) .archpanel,html:not([data-theme="light"]) .archrow button{background:var(--card);border-color:var(--line);color:var(--ink)} html:not([data-theme="light"]) .archrow{border-color:var(--line)} html:not([data-theme="light"]) .pill.on{background:var(--ok-soft);color:var(--ok)} html:not([data-theme="light"]) .pill.off{background:var(--n-50);color:var(--muted)} html:not([data-theme="light"]) .ic{background:var(--blue-50)} html:not([data-theme="light"]) .archov{background:rgba(0,0,0,.6)} } /* Der Überblick-Kasten auf der Startseite: seine Zeilen liegen hell auf hellem Grund. */ html[data-theme="dark"] .ins .z:hover{background:var(--n-100)} html[data-theme="dark"] .ins .z.top{background:var(--card)} html[data-theme="dark"] .ins .rest{background:var(--card);border-color:var(--n-200)} html[data-theme="dark"] .ins .leer{color:var(--ok)} html[data-theme="dark"] .ins{background:var(--n-25);border-color:var(--line)} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) .ins .z:hover{background:var(--n-100)} html:not([data-theme="light"]) .ins .z.top{background:var(--card)} html:not([data-theme="light"]) .ins .rest{background:var(--card);border-color:var(--n-200)} html:not([data-theme="light"]) .ins .leer{color:var(--ok)} html:not([data-theme="light"]) .ins{background:var(--n-25);border-color:var(--line)} } /* Aufgaben-ID-Chip und Abhaken-Knopf in den Zeilen (seit 12.09.) sowie das Aufgaben-Popup: alle mit weißem Grund gebaut — im Dunkeln leuchtende Flecken, in denen man nichts mehr liest (Simon 131646). */ html[data-theme="dark"] .ins .z .id,html[data-theme="dark"] .ins .z .ok,html[data-theme="dark"] .pdlg .idz{background:var(--card);border-color:var(--n-200)} html[data-theme="dark"] .ins .z .id:hover,html[data-theme="dark"] .ins .z .ok:hover,html[data-theme="dark"] .pdlg .idz:hover{color:var(--ink);border-color:var(--n-300)} html[data-theme="dark"] .ins .z .ok.frag{background:var(--warn);border-color:var(--warn);color:var(--n-0)} html[data-theme="dark"] .pdlg,html[data-theme="dark"] .pdlg .zahlen div,html[data-theme="dark"] .pdlg .akt button,html[data-theme="dark"] .pdlg .akt a,html[data-theme="dark"] .pdlg .frei .r button,html[data-theme="dark"] .pdlg .fuss .bl button{background:var(--card);color:var(--ink)} html[data-theme="dark"] .pdlg{box-shadow:var(--sh-2)} html[data-theme="dark"] .pdlg .akt button.pri{background:var(--n-900);color:var(--n-0);border-color:var(--n-900)} html[data-theme="dark"] .pdlg .akt button.gr,html[data-theme="dark"] .pdlg .frei .r button.ja{background:var(--brand-fill);color:var(--on-brand);border-color:var(--brand-fill)} html[data-theme="dark"] .pdlg .akt button.frag{background:var(--warn);color:var(--n-0);border-color:var(--warn)} html[data-theme="dark"] .pdlg .frei .r button,html[data-theme="dark"] .pdlg .fuss .bl button{color:var(--n-500)} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) .ins .z .id,html:not([data-theme="light"]) .ins .z .ok,html:not([data-theme="light"]) .pdlg .idz{background:var(--card);border-color:var(--n-200)} html:not([data-theme="light"]) .ins .z .id:hover,html:not([data-theme="light"]) .ins .z .ok:hover,html:not([data-theme="light"]) .pdlg .idz:hover{color:var(--ink);border-color:var(--n-300)} html:not([data-theme="light"]) .ins .z .ok.frag{background:var(--warn);border-color:var(--warn);color:var(--n-0)} html:not([data-theme="light"]) .pdlg,html:not([data-theme="light"]) .pdlg .zahlen div,html:not([data-theme="light"]) .pdlg .akt button,html:not([data-theme="light"]) .pdlg .akt a,html:not([data-theme="light"]) .pdlg .frei .r button,html:not([data-theme="light"]) .pdlg .fuss .bl button{background:var(--card);color:var(--ink)} html:not([data-theme="light"]) .pdlg{box-shadow:var(--sh-2)} html:not([data-theme="light"]) .pdlg .akt button.pri{background:var(--n-900);color:var(--n-0);border-color:var(--n-900)} html:not([data-theme="light"]) .pdlg .akt button.gr,html:not([data-theme="light"]) .pdlg .frei .r button.ja{background:var(--brand-fill);color:var(--on-brand);border-color:var(--brand-fill)} html:not([data-theme="light"]) .pdlg .akt button.frag{background:var(--warn);color:var(--n-0);border-color:var(--warn)} html:not([data-theme="light"]) .pdlg .frei .r button,html:not([data-theme="light"]) .pdlg .fuss .bl button{color:var(--n-500)} } /* Knöpfe, die als Verweis gebaut sind: die allgemeine Verweis-Farbe würde ihre weiße Schrift auf blauem Grund überschreiben und den Text unsichtbar machen. */ html[data-theme="dark"] a.open, html[data-theme="dark"] a.go, html[data-theme="dark"] a.btn, html[data-theme="dark"] a.prim, html[data-theme="dark"] a.cta, html[data-theme="dark"] a.b-du, html[data-theme="dark"] a.out, html[data-theme="dark"] a.send, html[data-theme="dark"] a.neu, html[data-theme="dark"] a.sendbtn, html[data-theme="dark"] a.deploy-btn, html[data-theme="dark"] a.mess-btn, html[data-theme="dark"] a.gross{color:#fff} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) a.open, html:not([data-theme="light"]) a.go, html:not([data-theme="light"]) a.btn, html:not([data-theme="light"]) a.prim, html:not([data-theme="light"]) a.cta, html:not([data-theme="light"]) a.b-du, html:not([data-theme="light"]) a.out, html:not([data-theme="light"]) a.send, html:not([data-theme="light"]) a.neu, html:not([data-theme="light"]) a.sendbtn, html:not([data-theme="light"]) a.deploy-btn, html:not([data-theme="light"]) a.mess-btn, html:not([data-theme="light"]) a.gross{color:#fff} } /* ── Helle Flächen, die als hsl() direkt in den Seiten stehen ─────────────── Der Weiß-Filter greift nur bei #-Werten; diese hier sind einzeln nachgezogen. */ html[data-theme="dark"] .fehler{background:hsl(4 40% 16%);border-color:hsl(4 35% 30%);color:#ffb4b4} html[data-theme="dark"] .p-offen{background:hsl(38 40% 15%)} html[data-theme="dark"] .anfordern-btn:hover{background:hsl(38 40% 22%)} html[data-theme="dark"] .bub.rolle{background:hsl(150 10% 17%);color:var(--ink)} html[data-theme="dark"] .karte.konkurrenz{background:hsl(222 22% 15%)} html[data-theme="dark"] .mailz.wa:hover{background:hsl(145 28% 18%)} html[data-theme="dark"] .bulkleiste{background:hsl(222 30% 17%)} html[data-theme="dark"] pre{background:var(--n-50);color:var(--ink)} html[data-theme="dark"] thead th{background:var(--n-50)} html[data-theme="dark"] .wissen{background:var(--n-25)} html[data-theme="dark"] .n-kein{background:hsl(354 32% 16%)} html[data-theme="dark"] .tag.luecke{background:hsl(354 32% 16%)} @media(prefers-color-scheme:dark){ html:not([data-theme="light"]) .fehler{background:hsl(4 40% 16%);border-color:hsl(4 35% 30%);color:#ffb4b4} html:not([data-theme="light"]) .p-offen{background:hsl(38 40% 15%)} html:not([data-theme="light"]) .anfordern-btn:hover{background:hsl(38 40% 22%)} html:not([data-theme="light"]) .bub.rolle{background:hsl(150 10% 17%);color:var(--ink)} html:not([data-theme="light"]) .karte.konkurrenz{background:hsl(222 22% 15%)} html:not([data-theme="light"]) .mailz.wa:hover{background:hsl(145 28% 18%)} html:not([data-theme="light"]) .bulkleiste{background:hsl(222 30% 17%)} html:not([data-theme="light"]) pre{background:var(--n-50);color:var(--ink)} html:not([data-theme="light"]) thead th{background:var(--n-50)} html:not([data-theme="light"]) .wissen{background:var(--n-25)} html:not([data-theme="light"]) .n-kein{background:hsl(354 32% 16%)} html:not([data-theme="light"]) .tag.luecke{background:hsl(354 32% 16%)} } /* Ein Knopf mit rotem Grund braucht im Dunkeln dunkle Schrift (--rot ist jetzt hell). */ html[data-theme="dark"] button.gefahr{color:#2a1113} @media(prefers-color-scheme:dark){html:not([data-theme="light"]) button.gefahr{color:#2a1113}} /* Fettungen im Konzept trugen die Navy-Schrift — hier die Karten-Schrift. */ html[data-theme="dark"] .doku strong,html[data-theme="dark"] .doku tbody td:first-child{color:var(--ink)} @media(prefers-color-scheme:dark){html:not([data-theme="light"]) .doku strong,html:not([data-theme="light"]) .doku tbody td:first-child{color:var(--ink)}}