/* ============================================================ sm-theme-dark.css — dunkles Farbschema Aktiv über (gesetzt von js/sm-optik.js). ANSATZ: Das Projekt hat ein Token-System (--mb-*), das über 9.000 Farbangaben in 132 Stylesheets speist. Statt jede Datei anzufassen, werden hier die Tokens umdefiniert — damit färbt sich alles um, was sie benutzt. Ergänzend werden die häufigsten FEST eingetragenen Farben (#fff, #1a202c, #6b7280 …) für die Standard-Bausteine überschrieben. SPEZIFITÄT: 24 Stylesheets definieren die Tokens jeweils selbst in `:root`. `html[data-theme="dark"]` ist spezifischer als `:root` und gewinnt daher unabhängig von der Ladereihenfolge. Diese Datei wird von js/sm-optik.js dynamisch geladen und ist deshalb in der SHELL_CSS-Liste von js/sm-router.js eingetragen (sonst würde der Soft-Nav sie beim Seitenwechsel als „fremd" entfernen). ============================================================ */ html[data-theme="dark"] { /* ── Flächen & Text ───────────────────────────────── */ --mb-bg: #0b0d18; --mb-surface: #14172a; --mb-surface-2: #1b1f36; --mb-border: #262b45; --mb-border-strong: #323858; --mb-text: #f2f3f9; --mb-text-2: #b3b8cc; --mb-text-3: #7f86a0; --mb-text-soft: #b3b8cc; /* ── Akzente: Grundton bleibt, Flächen/Text gedreht ── */ --mb-primary: #818cf8; --mb-primary-deep: #6366f1; --mb-violet: #a78bfa; --mb-green: #34d399; --mb-green-deep: #10b981; --mb-green-bg: #0e2b23; --mb-green-border: #17513f; --mb-green-text: #6ee7b7; --mb-red: #f87171; --mb-red-deep: #ef4444; --mb-red-bg: #2c1618; --mb-red-border: #5b2326; --mb-red-text: #fca5a5; --mb-amber: #fbbf24; --mb-amber-bg: #2e2311; --mb-amber-border: #5a4318; --mb-amber-text: #fcd34d; --mb-blue: #60a5fa; --mb-blue-bg: #10203c; --mb-blue-border: #1e3a63; --mb-blue-text: #93c5fd; --mb-cyan: #22d3ee; --mb-cyan-bg: #0c2b31; /* ── Graustufen-Tokens ────────────────────────────── */ --gray-50: #1b1f36; --gray-100: #222741; --gray-200: #2b3050; --gray-300: #3a4064; --gray-400: #6b7290; --gray-500: #9aa0b4; --gray-600: #b3b8cc; --gray-700: #d3d7e4; --gray-800: #e8eaf2; --gray-900: #f2f3f9; color-scheme: dark; /* Scrollbalken, Formularelemente, Auswahlfelder */ } /* ════════════════════════════════════════════════════════════ Grundfläche + Shell ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] body { background: var(--mb-bg); color: var(--mb-text); } html[data-theme="dark"] .sidebar, html[data-theme="dark"] .sm-sidebar, html[data-theme="dark"] #sidebarContainer:empty { background: var(--mb-surface); border-right-color: var(--mb-border); } html[data-theme="dark"] .sm-sidebar__header { border-bottom-color: var(--mb-border); } html[data-theme="dark"] .topbar, html[data-theme="dark"] #headerContainer:empty { background: var(--mb-surface); border-bottom-color: var(--mb-border); } /* Menüpunkte */ html[data-theme="dark"] .menu-item, html[data-theme="dark"] .sm-sidebar__item { color: var(--mb-text-2); } html[data-theme="dark"] .menu-item:hover, html[data-theme="dark"] .sm-sidebar__item:hover { background: var(--mb-surface-2); color: var(--mb-text); } /* Aktiver Punkt behält seinen Farbverlauf */ /* ════════════════════════════════════════════════════════════ Standard-Bausteine (fest eingetragene Farben überschreiben) ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .panel, html[data-theme="dark"] .cs-panel-card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .chart-card, html[data-theme="dark"] .presets-card, html[data-theme="dark"] .tp-card, html[data-theme="dark"] .tp-summary-card, html[data-theme="dark"] .geraet-card, html[data-theme="dark"] .team-member-card, html[data-theme="dark"] .mb-card, html[data-theme="dark"] .ck-card, html[data-theme="dark"] .sb-panel, html[data-theme="dark"] .sa-panel, html[data-theme="dark"] [class*="-slide-panel"], html[data-theme="dark"] [class*="-detail-panel"], html[data-theme="dark"] [class$="-panel"] { background: var(--mb-surface); border-color: var(--mb-border); color: var(--mb-text); } html[data-theme="dark"] .panel-header, html[data-theme="dark"] .cs-panel-card-header, html[data-theme="dark"] .tp-card-header, html[data-theme="dark"] [class*="-panel-header"] { background: var(--mb-surface-2); border-bottom-color: var(--mb-border); color: var(--mb-text); } /* Überschriften und Fließtext */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] .panel-title, html[data-theme="dark"] .cs-panel-card-title, html[data-theme="dark"] .stat-value, html[data-theme="dark"] .page-title { color: var(--mb-text); } html[data-theme="dark"] p, html[data-theme="dark"] .cs-text-muted, html[data-theme="dark"] .stat-label, html[data-theme="dark"] .page-subtitle, html[data-theme="dark"] .mb-panel-desc { color: var(--mb-text-2); } /* Formularelemente */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .input, html[data-theme="dark"] .cs-input, html[data-theme="dark"] .search-input { background: var(--mb-surface-2); border-color: var(--mb-border); color: var(--mb-text); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--mb-text-3); } /* Sekundäre Schaltflächen (primäre behalten ihren Verlauf) */ html[data-theme="dark"] .cs-btn-outline, html[data-theme="dark"] .cs-btn-ghost, html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .filter-btn, html[data-theme="dark"] .topbar-icon { background: var(--mb-surface-2); border-color: var(--mb-border); color: var(--mb-text-2); } html[data-theme="dark"] .cs-btn-outline:hover, html[data-theme="dark"] .cs-btn-ghost:hover, html[data-theme="dark"] .topbar-icon:hover { background: var(--mb-border); color: var(--mb-text); } /* Tabellen */ html[data-theme="dark"] table { color: var(--mb-text); } html[data-theme="dark"] th { background: var(--mb-surface-2); color: var(--mb-text-2); border-bottom-color: var(--mb-border); } html[data-theme="dark"] td { border-bottom-color: var(--mb-border); } html[data-theme="dark"] tbody tr:hover { background: var(--mb-surface-2); } /* Trennlinien */ html[data-theme="dark"] hr { border-color: var(--mb-border); } /* Der dezente Ladezustand */ html[data-theme="dark"] .sm-loader-text { color: var(--mb-text-2); } html[data-theme="dark"] .sm-loader-ring { border-color: var(--mb-border); border-top-color: var(--mb-primary); } /* Untere Navigation */ html[data-theme="dark"] .smbn-nav, html[data-theme="dark"] [class*="bottom-nav"] { background: var(--mb-surface); border-top-color: var(--mb-border); } /* Bilder und Diagramme nicht aufhellen, aber Screenshots entschärfen */ html[data-theme="dark"] img[src*="screenshot"], html[data-theme="dark"] .shop-screenshot img { filter: brightness(.88) contrast(1.03); } /* ════════════════════════════════════════════════════════════ HART VERDRAHTETE HELLE FLÄCHEN ──────────────────────────────────────────────────────────── 48 Regeln im Projekt kombinieren einen FEST eingetragenen hellen Hintergrund (#fff, #f3f4f6, #e5e7eb …) mit tokenisiertem Text (color: var(--mb-text-2)). Im dunklen Schema wird der Text hell, der Hintergrund bleibt aber hell — Ergebnis: unlesbar (Kontrast bis 1,0:1). Betroffen sind vor allem Filter- und Umschaltknöpfe, Zähler-Abzeichen, Auswahlfelder und Ergebniszeilen. Aufgefallen ist das beim Prüflauf des Barrierefreiheitsmodus, der den Effekt durch noch hellere Textfarben verschärfte — die Ursache liegt aber im dunklen Schema selbst, deshalb wird sie hier behoben. ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .aal-fenster-btn, html[data-theme="dark"] .aal-filter-btn, html[data-theme="dark"] .ac-btn, html[data-theme="dark"] .ac-monat select, html[data-theme="dark"] .ae-fenster-btn, html[data-theme="dark"] .ae-filter-btn, html[data-theme="dark"] .aie-fenster-btn, html[data-theme="dark"] .aie-filter-btn, html[data-theme="dark"] .au-btn-neutral, html[data-theme="dark"] .au-filter-btn, html[data-theme="dark"] .au-form input, html[data-theme="dark"] .au-form textarea, html[data-theme="dark"] .au-jahr-btn, html[data-theme="dark"] .au-suche-zeile input, html[data-theme="dark"] .cc-copy-btn, html[data-theme="dark"] .cc-field select, html[data-theme="dark"] .cc-focus select, html[data-theme="dark"] .cc-focus-text, html[data-theme="dark"] .cc-mini select, html[data-theme="dark"] .cc-plat-btn, html[data-theme="dark"] .cc-season input, html[data-theme="dark"] .cc-season select, html[data-theme="dark"] .cc-tab, html[data-theme="dark"] .ccc-detail-cat-count, html[data-theme="dark"] .ccc-results-info, html[data-theme="dark"] .cr-refresh, html[data-theme="dark"] .cseo-tab-count, html[data-theme="dark"] .fb-btn, html[data-theme="dark"] .fb-col-head span, html[data-theme="dark"] .fb-empty, html[data-theme="dark"] .fb-select, html[data-theme="dark"] .fb-tab.is-active, html[data-theme="dark"] .ibe-disabled::after, html[data-theme="dark"] .ibe-in, html[data-theme="dark"] .ibe-steps li, html[data-theme="dark"] .ibe-steps-n, html[data-theme="dark"] .ibx-btn, html[data-theme="dark"] .ld-akt-btn, html[data-theme="dark"] .ld-btn-sekundaer, html[data-theme="dark"] .ld-feld input, html[data-theme="dark"] .ld-feld textarea, html[data-theme="dark"] .ld-filter-btn, html[data-theme="dark"] .ld-notiz-alt, html[data-theme="dark"] .ld-status-btn, html[data-theme="dark"] .osc-detail-cat-count, html[data-theme="dark"] .osseo-tab-count, html[data-theme="dark"] .push-form select, html[data-theme="dark"] .tb-kanban-col-count { background: var(--mb-surface-2) !important; border-color: var(--mb-border); } /* ════════════════════════════════════════════════════════════ KOPFZEILEN-SYMBOLE, DIE BILDDATEIEN SIND ════════════════════════════════════════════════════════════ Glocke und Abmelden sind ``. Eine externe Bilddatei nimmt weder `color` noch `currentColor` an — die beiden blieben im dunklen Schema schwarz auf schwarzem Grund und waren schlicht nicht zu sehen. Eine passende Regel existierte sogar bereits (css/dashboard.css:514), haengt aber an `body.dark-mode` — dem Selektor des ALTEN Dark-Systems, das nie aktiviert wurde. Im Projekt liegen rund 298 solcher Regeln als toter Code; das aktuelle System schaltet ueber `html[data-theme="dark"]`. `img` steht bewusst davor: der Barrierefreiheits-Knopf daneben ist ein INLINE-SVG mit `currentColor` und faerbt sich bereits richtig — ein Filter wuerde ihn kaputtmachen. ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] img.topbar-icon-svg { filter: brightness(0) invert(1); opacity: .72; } html[data-theme="dark"] .topbar-icon:hover img.topbar-icon-svg { opacity: 1; } /* ════════════════════════════════════════════════════════════ KONTRASTFALLEN AUS DEM PRUEFLAUF VOM 02.08.2026 ════════════════════════════════════════════════════════════ Dieselbe Fehlerklasse wie im Block darueber, nur breiter erfasst: eine Regel traegt eine HART eingetragene helle Flaeche, waehrend ihre Schrift ueber ein Token laeuft. Im dunklen Schema dreht der Text mit, die Flaeche nicht — Ergebnis ist hell auf hell, teils bei 1,1:1. 193 Faelle wurden gemeldet, jeder einzeln gegengerechnet und auf Wirksamkeit geprueft (ueberschreibt ihn eine spaetere Regel ohnehin?). Der Nutzer hat den Fehler an den Umschaltern gesehen; die Suche hat ihn ueber 67 Stylesheets hinweg gefunden — die meisten davon im RUHEZUSTAND, nicht nur beim Hover. Die Zielflaeche ist bewusst NICHT einheitlich grau: farbige Hinweisflaechen behalten ihre Bedeutung (gruen = gut, rot = Problem, gelb = Achtung), sonst ginge die Farbcodierung verloren, die diese Bausteine tragen. Nur `background` wird gesetzt. Die Schriftfarben sind bereits richtig — sie waren nie das Problem, sondern die Flaeche darunter. ════════════════════════════════════════════════════════════ */ /* ── Weisse Flaechen (72) ── */ html[data-theme="dark"] .ab-body-preview, html[data-theme="dark"] .ab-drawer-card, html[data-theme="dark"] .ab-modal-card, html[data-theme="dark"] .acs-modal-content, html[data-theme="dark"] .ad-card, html[data-theme="dark"] .ad-section, html[data-theme="dark"] .au-panel-head, html[data-theme="dark"] .bs-leer-zustand, html[data-theme="dark"] .cc-card, html[data-theme="dark"] .cc-drop-menu, html[data-theme="dark"] .cc-merk, html[data-theme="dark"] .cc-row, html[data-theme="dark"] .cmp-empty-state h2, html[data-theme="dark"] .cq-card, html[data-theme="dark"] .cs-confirm-modal, html[data-theme="dark"] .cs-tabs, html[data-theme="dark"] .csm-modal, html[data-theme="dark"] .cust-explainer-body p, html[data-theme="dark"] .fb-card, html[data-theme="dark"] .fb-card.is-pinned, html[data-theme="dark"] .fb-modal, html[data-theme="dark"] .fb-rcard, html[data-theme="dark"] .gdpr-modal-content, html[data-theme="dark"] .ib-ki-fehler, html[data-theme="dark"] .ib-signal-panel, html[data-theme="dark"] .ib-stat-card, html[data-theme="dark"] .ib-subtool-btn, html[data-theme="dark"] .ibe-push-mock, html[data-theme="dark"] .ibe-sec, html[data-theme="dark"] .ibx-card, html[data-theme="dark"] .item-row, html[data-theme="dark"] .kpi-card:hover, html[data-theme="dark"] .ld-modal-box, html[data-theme="dark"] .ma-empty, html[data-theme="dark"] .main-content, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .onb-card, html[data-theme="dark"] .pagination-btn, html[data-theme="dark"] .pp-produkt-header, html[data-theme="dark"] .ret-explainer-body p, html[data-theme="dark"] .sb-time-btn, html[data-theme="dark"] .sb-time-btn--disabled:hover, html[data-theme="dark"] .sb-time-dropdown, html[data-theme="dark"] .se-cal-cell, html[data-theme="dark"] .se-confirm-box, html[data-theme="dark"] .se-task-card, html[data-theme="dark"] .se-time-btn, html[data-theme="dark"] .se-tracker-card, html[data-theme="dark"] .se-tracker-kpi, html[data-theme="dark"] .se-view-btn.active, html[data-theme="dark"] .shp-explainer-body p, html[data-theme="dark"] .sp-null-chip, html[data-theme="dark"] .spc-period-setup, html[data-theme="dark"] .spc-placeholder, html[data-theme="dark"] .str-page-col, html[data-theme="dark"] .str-page-col-desc, html[data-theme="dark"] .tb-comment-input:focus, html[data-theme="dark"] .tb-filter-select, html[data-theme="dark"] .tg-stats-grid, html[data-theme="dark"] .timeline-date-header, html[data-theme="dark"] .tl-empty-state h2, html[data-theme="dark"] .tl-explainer-body p, html[data-theme="dark"] .ur-ai-loading h3, html[data-theme="dark"] .ur-ai-section, html[data-theme="dark"] .ur-empty-state h2, html[data-theme="dark"] .ur-explainer-body p, html[data-theme="dark"] .ura-empty-state h3, html[data-theme="dark"] .urd-code-table td, html[data-theme="dark"] .uro-empty-state h2, html[data-theme="dark"] .uro-panel, html[data-theme="dark"] .urt-country-table td { background: var(--mb-surface); } /* ── Sehr helle Grautoene (#f8fafc, #fafbff, #f3f4f6 …) (53) ── */ html[data-theme="dark"] .au-ki-kopf:hover, html[data-theme="dark"] .au-ki-monat, html[data-theme="dark"] .au-konto, html[data-theme="dark"] .au-panel-close:hover, html[data-theme="dark"] .au-verb, html[data-theme="dark"] .au-verwaist-item, html[data-theme="dark"] .cc-empty-actions .cc-btn:not, html[data-theme="dark"] .cc-merk-close:hover, html[data-theme="dark"] .cc-merk-item:hover, html[data-theme="dark"] .cc-pill, html[data-theme="dark"] .cc-primary, html[data-theme="dark"] .cc-prompt, html[data-theme="dark"] .cc-setting, html[data-theme="dark"] .cc-tab-n, html[data-theme="dark"] .ccc-activity-row:hover, html[data-theme="dark"] .ccc-detail-row:hover, html[data-theme="dark"] .ci-panel-body, html[data-theme="dark"] .ci-ql-add-btn:hover, html[data-theme="dark"] .ci-tabs (Fläche) mit .ci-tab / .ci-tab:hover, html[data-theme="dark"] .cmp-section-header h2, html[data-theme="dark"] .comp-card:hover .comp-metric, html[data-theme="dark"] .cpp-activity-row:hover, html[data-theme="dark"] .cr-row-rot, html[data-theme="dark"] .cs-radio-item input:checked + .cs-radio-label, html[data-theme="dark"] .cs-radio-label:hover, html[data-theme="dark"] .css-sub-row td, html[data-theme="dark"] .css-sub-row:hover td, html[data-theme="dark"] .ct-product-row:hover, html[data-theme="dark"] .cust-section-header h2, html[data-theme="dark"] .cvp-table thead th:hover, html[data-theme="dark"] .fb-modal-close, html[data-theme="dark"] .filters-reset:hover, html[data-theme="dark"] .ib-signal-item:hover, html[data-theme="dark"] .ibe-sv-answer, html[data-theme="dark"] .ld-notiz-eintrag, html[data-theme="dark"] .ma-section-header h2, html[data-theme="dark"] .main-content, html[data-theme="dark"] .osc-results-info, html[data-theme="dark"] .osv-table thead th:hover, html[data-theme="dark"] .related-pages-show-all-btn:hover, html[data-theme="dark"] .se-note-card, html[data-theme="dark"] .section-issue-row, html[data-theme="dark"] .sp-explainer, html[data-theme="dark"] .sp-section-header h2, html[data-theme="dark"] .spc-explainer, html[data-theme="dark"] .spc-section-header h2, html[data-theme="dark"] .spp-rec-text, html[data-theme="dark"] .spt-holiday-banner, html[data-theme="dark"] .tcm-toggle-btn:hover, html[data-theme="dark"] .tl-section-header h2, html[data-theme="dark"] .ur-section-header h2, html[data-theme="dark"] .ura-section-header h2, html[data-theme="dark"] .uro-section-header h2 { background: var(--mb-surface-2); } /* ── Gruene Hinweisflaechen (28) ── */ html[data-theme="dark"] .ccc-stat--green, html[data-theme="dark"] .ccc-struct-row.nav, html[data-theme="dark"] .ccl-stat--red, html[data-theme="dark"] .cpl-stat--green, html[data-theme="dark"] .cpp-stat--green, html[data-theme="dark"] .cseo-article-seo-item.ok, html[data-theme="dark"] .cseo-stat--green, html[data-theme="dark"] .ct-stat--green, html[data-theme="dark"] .cvp-stat--green, html[data-theme="dark"] .event-card.utilized, html[data-theme="dark"] .osc-activity-row:hover, html[data-theme="dark"] .osc-detail-row:hover, html[data-theme="dark"] .osc-kpi-tile:hover, html[data-theme="dark"] .osc-mkpi-card:hover, html[data-theme="dark"] .osc-modal-timeline-row:hover, html[data-theme="dark"] .osc-stat--green, html[data-theme="dark"] .osc-struct-row.nav, html[data-theme="dark"] .osl-modal-description, html[data-theme="dark"] .osl-stat--red, html[data-theme="dark"] .osp-product-item:hover, html[data-theme="dark"] .osp-stat--green, html[data-theme="dark"] .osseo-article-seo-item.ok, html[data-theme="dark"] .osseo-table-row:hover, html[data-theme="dark"] .ost-product-info-box, html[data-theme="dark"] .ost-product-row:hover, html[data-theme="dark"] .ost-stat--blue, html[data-theme="dark"] .osv-stat--green, html[data-theme="dark"] .tstat-orange { background: var(--mb-green-bg); } /* ── Blaue Hinweisflaechen (6) ── */ html[data-theme="dark"] .ccc-structure-card-header.competitor, html[data-theme="dark"] .cpp-score-bar, html[data-theme="dark"] .filter-group.active .filter-select, html[data-theme="dark"] .svd-explainer, html[data-theme="dark"] .ur-ai-content p, html[data-theme="dark"] .ur-ai-placeholder h3 { background: var(--mb-blue-bg); } /* ── Rote Hinweisflaechen (4) ── */ html[data-theme="dark"] .ccl-modal-count, html[data-theme="dark"] .ccl-panel-violation-item.ccl-sev-critical, html[data-theme="dark"] .osl-modal-count, html[data-theme="dark"] .osl-panel-violation-item.osl-sev-critical { background: var(--mb-red-bg); } /* ── Gelbe Hinweisflaechen (1) ── */ html[data-theme="dark"] .mb-lock-badge { background: var(--mb-amber-bg); }