/* =====================================================================
   Ersatzteil-Konfigurator 2.0 – zentrales Gestaltungssystem
   ---------------------------------------------------------------------
   Wirkung: präzises Profi-Werkzeug. Ruhige Flächen, feine Linien,
   Markenblau als Aktion, Petrol als Akzent. Hell und dunkel.
   Alle Farben/Formen kommen von hier (Tokens). Neue Gestaltung bitte
   nur über diese Tokens und Bausteine, nicht über style="..." im HTML.
   Wird als letzte Stylesheet-Datei geladen.
   ===================================================================== */

:root {
    color-scheme: light;

    /* Flächen */
    --canvas: #eef1f5;          /* Seitenhintergrund */
    --surface: #ffffff;         /* Karten, Fenster */
    --surface-2: #f6f8fb;       /* abgesetzte Bereiche in Karten */
    --surface-3: #eaf0f6;       /* Hover, ausgewählte Zeilen */
    --paper: #ffffff;           /* Zeichenfläche der Skizze (immer hell) */

    /* Linien */
    --line: #dde3ea;
    --line-strong: #c3ccd7;

    /* Text */
    --text: #1d2733;
    --text-2: #3d4b5c;
    --text-muted: #5f6b7a;
    --text-on-accent: #ffffff;

    /* Aktion & Akzent */
    --accent: #005596;
    --accent-hover: #00467c;
    --accent-soft: #e6f0f8;
    --accent-line: #b9d3ea;
    --petrol: #087f8c;
    --petrol-soft: #e3f3f4;

    /* Status */
    --ok: #1a7f45;
    --ok-soft: #eaf6ef;
    --warn: #b45309;
    --warn-soft: #fff7ed;
    --danger: #c0392b;
    --danger-soft: #fdf1ef;
    --info: #1f6fa8;

    /* Form */
    --radius-s: 6px;
    --radius: 10px;
    --radius-l: 14px;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.10);
    --shadow-3: 0 20px 48px rgba(16, 24, 40, 0.18);
    --focus: 0 0 0 3px rgba(0, 85, 150, 0.28);

    /* Schrift */
    --font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Roboto, Arial, sans-serif;
    --font-head: 'Manrope', 'Segoe UI', system-ui, Arial, sans-serif;

    /* Bestehende Variablen auf das neue System abbilden */
    --hormann-blue: var(--accent);
    --hormann-hover: var(--accent-hover);
    --brand-blue: #005596;
    --text-dark: var(--text);
    --bg-light: var(--surface-2);
    --border-color: var(--line);
    --friendly-green: var(--ok);
    --error-red: var(--danger);
    --alert-orange: var(--warn);
    --warning-surface: var(--warn-soft);
    --info-blue: var(--info);
}

/* ---------------- Dunkelmodus ---------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    --canvas: #0f1620;
    --surface: #16202c;
    --surface-2: #1b2734;
    --surface-3: #223142;
    --paper: #f4f6f9;

    --line: #2a3a4c;
    --line-strong: #3a4d62;

    --text: #e4eaf1;
    --text-2: #c2ccd8;
    --text-muted: #94a2b3;
    --text-on-accent: #ffffff;

    --accent: #3d8fd6;
    --accent-hover: #5aa3e3;
    --accent-soft: #1b3045;
    --accent-line: #2f5679;
    --petrol: #2bb3c0;
    --petrol-soft: #143238;

    --ok: #3fbf7a;
    --ok-soft: #13301f;
    --warn: #f0a24a;
    --warn-soft: #33250f;
    --danger: #f07a6c;
    --danger-soft: #3a1b18;
    --info: #6fb3ea;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 48px rgba(0, 0, 0, 0.6);
    --focus: 0 0 0 3px rgba(61, 143, 214, 0.45);

    --brand-blue: #6fb3ea;
    --brand-tagline: #94a2b3;
    --error-red-hover: #e0604f;
    --friendly-green-hover: #34a96a;
    --color-tools: #1d8a96;
    --color-br40: #5aa3e3;
    --color-br30: #f39a5c;
    --color-br20: #3fbf7a;
}

/* ---------------- Grundlage ---------------- */
html,
body {
    background: var(--canvas);
}

body {
    color: var(--text);
    font-family: var(--font-ui) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--accent-soft);
    color: var(--text);
}

a {
    color: var(--accent);
}

h1, h2, h3, h4 {
    color: var(--text);
}

hr {
    border: none;
    border-top: 1px solid var(--line);
}

/* ---------------- Kopf ---------------- */
.header-layout {
    border-bottom: 1px solid var(--line) !important;
}

.main-header.ek-brand h1 {
    color: var(--brand-blue);
}

#userProfile > div > div > button,
#userProfile button[title="Profil"],
#userProfile button[title="Support & Tickets"],
#updateBadge,
.ek-theme-toggle {
    background: var(--surface) !important;
    color: var(--accent) !important;
    box-shadow: var(--shadow-1) !important;
    border: 1px solid var(--line) !important;
}

.ek-theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.ek-theme-toggle .ek-icon {
    width: 19px;
    height: 19px;
}

.ek-theme-toggle .ek-icon-sun { display: none; }
html[data-theme="dark"] .ek-theme-toggle .ek-icon-sun { display: inline-block; }
html[data-theme="dark"] .ek-theme-toggle .ek-icon-moon { display: none; }

/* Reiter */
.tab-btn {
    color: var(--text-muted);
}

.tab-btn:hover {
    color: var(--text);
}

.door-type-toggle {
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
}

.door-type-btn {
    color: var(--text-2);
}

.door-type-btn.active {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

.sub-nav-btn {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-2);
}

.sub-nav-btn:hover:not(.active) {
    background: var(--surface-3);
    color: var(--text);
}

.sub-nav-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

/* ---------------- Karten ---------------- */
.card-box {
    background: var(--surface) !important;
    /* Rahmen als Schatten-Linie: verbraucht keinen Platz, Inhalte (und PDF-Skizze) behalten ihre Größe */
    border: none !important;
    border-radius: var(--radius-l) !important;
    box-shadow: 0 0 0 1px var(--line), var(--shadow-1) !important;
}

.card-title {
    font-family: var(--font-head);
    color: var(--text) !important;
    border-bottom: 1px solid var(--line) !important;
    letter-spacing: -0.005em;
}

.card-badge {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-line);
    border-radius: 999px !important;
    padding: 2px 9px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
}

.controls h3,
.card-box h3 {
    color: var(--accent);
}

/* Verschachtelte Kästen in Karten: nur noch ruhige Fläche, kein zweiter Rahmen-Kasten */
.card-box .order-number-lookup,
.card-box .info-box-soft {
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    border-radius: var(--radius) !important;
}

/* ---------------- Felder ---------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea,
.admin-input {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    transition: border-color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.admin-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

/* ---------------- Tabellen ---------------- */
.catalog-table,
.admin-table {
    background: var(--surface);
    color: var(--text);
}

.catalog-table th,
.admin-table th {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
    border-bottom: 1px solid var(--line) !important;
    font-weight: 600;
}

.catalog-table td,
.admin-table td {
    border-bottom: 1px solid var(--line) !important;
}

.catalog-table tbody tr:hover,
.admin-table tbody tr:hover {
    background: var(--surface-3);
}

.sum-row {
    color: var(--text-2);
    border-color: var(--line) !important;
}

.sum-total {
    color: var(--text);
}

/* ---------------- Knöpfe ---------------- */
.btn-calc,
.btn-pdf {
    border-radius: var(--radius-s) !important;
    font-weight: 600 !important;
    letter-spacing: 0;
}

.btn-calc {
    background: var(--accent);
}

.btn-calc:hover {
    background: var(--accent-hover);
}

.export-btn-sec,
.export-icon-btn {
    background: var(--surface) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--accent) !important;
    border-radius: var(--radius-s) !important;
}

.export-btn-sec:hover,
.export-icon-btn:hover {
    background: var(--surface-3) !important;
}

.export-btn-main {
    border-radius: var(--radius-s) !important;
}

.ek-btn--secondary {
    background: var(--surface);
    border-color: var(--accent-line);
    color: var(--accent);
}

.ek-btn--secondary:hover:not(:disabled) {
    background: var(--accent-soft);
}

.ek-btn--danger {
    background: var(--surface);
}

.ek-btn--danger:hover:not(:disabled) {
    background: var(--danger-soft);
}

.ek-btn:disabled {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--text-muted);
}

/* ---------------- Fenster ---------------- */
.modal-overlay {
    background: rgba(12, 18, 26, 0.55);
}

.modal-content {
    background: var(--surface) !important;
    color: var(--text);
    border-radius: var(--radius-l) !important;
    box-shadow: var(--shadow-3) !important;
    border: 1px solid var(--line);
}

.close-btn {
    background: var(--surface) !important;
    color: var(--text-2) !important;
    border: 1px solid var(--line) !important;
}

.ek-dropdown {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--text);
}

.ek-toast {
    background: var(--surface);
    color: var(--text);
}

/* ---------------- Skizze ----------------
   Hell: weißes Zeichenpapier. Dunkel: die Tor-Zeichnung wird dunkel umgefärbt (Lamellen dunkelgrau,
   Linien hell), Auswahlpunkte und Klickfelder behalten ihre Farben. PDF/PNG werden immer hell erzeugt. */
.visual-wrapper {
    background: var(--paper) !important;
    border-radius: var(--radius);
}

html[data-theme="dark"] .visual-wrapper {
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
}

/* Dunkelmodus der Tor-Zeichnung: gezielt eingefärbt (Lamellen anthrazit, Beschläge metallisch,
   Rollen schwarz). Gilt nur am Bildschirm, PDF/PNG nutzen die hellen Grundfarben der Zeichnung. */
html[data-theme="dark"] .visual-wrapper svg.visual-img-bg {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)) !important;
}

html[data-theme="dark"] .visual-wrapper svg .g-panel {
    fill: #2a3441;
    stroke: #4a5a6d;
}

html[data-theme="dark"] .visual-wrapper svg .g-sicke {
    stroke: #3a4757;
}

html[data-theme="dark"] .visual-wrapper svg .g-seam {
    stroke: #0b1016;
}

html[data-theme="dark"] .visual-wrapper svg .g-plate {
    fill: #9aa7b6;
}

html[data-theme="dark"] .lamella-box {
    background: rgba(61, 143, 214, 0.10);
    border-color: rgba(111, 179, 234, 0.55);
    color: var(--accent);
}

html[data-theme="dark"] .lamella-box span {
    background: var(--surface) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
}

/* ---------------- Fußzeile ---------------- */
.app-footer {
    color: var(--text-muted);
    border-top: 1px solid var(--line) !important;
}

/* =====================================================================
   Dunkelmodus: Übergang für ältere Bereiche mit fest eingetragenen
   hellen Farben (style="..."). Wird mit dem Aufräumen nach und nach
   überflüssig.
   ===================================================================== */
html[data-theme="dark"] :is([style*="background: #fff;"], [style*="background:#fff;"], [style*="background: #ffffff"], [style*="background:#ffffff"], [style*="background: white"], [style*="background:white"], [style*="background-color: #fff"], [style*="background-color: white"], [style*="background: #fdfdfd"], [style*="background:#fdfdfd"]):not(.visual-wrapper):not(.visual-wrapper *) {
    background: var(--surface) !important;
}

html[data-theme="dark"] :is([style*="background: #f8fafc"], [style*="background:#f8fafc"], [style*="background: #f9f9f9"], [style*="background:#f9f9f9"], [style*="background: #fafafa"], [style*="background:#fafafa"], [style*="background: #f1f5f9"], [style*="background:#f1f5f9"], [style*="background: #f5f5f5"], [style*="background-color: #f9f9f9"], [style*="background: #f0f2f5"], [style*="background:#f0f2f5"], [style*="background: #eee"], [style*="background:#eee"], [style*="background: #f3f8fc"], [style*="background: #f8f9fa"]):not(.visual-wrapper *) {
    background: var(--surface-2) !important;
}

html[data-theme="dark"] :is([style*="background: #eaf4fb"], [style*="background:#eaf4fb"], [style*="background: #eff6ff"], [style*="background:#eff6ff"], [style*="background: #e6f3f4"], [style*="background: #f5eef8"]):not(.visual-wrapper *) {
    background: var(--accent-soft) !important;
}

html[data-theme="dark"] :is([style*="background: #fff3cd"], [style*="background:#fff3cd"], [style*="background-color: #fff8e1"], [style*="background:#fff8e1"], [style*="background: #fef9e7"], [style*="background:#fef9e7"], [style*="background: var(--warning-surface)"], [style*="background:var(--warning-surface)"]) {
    background: var(--warn-soft) !important;
}

html[data-theme="dark"] :is([style*="background: #fee2e2"], [style*="background:#fee2e2"], [style*="background: #fef2f2"], [style*="background: #fdf2f2"], [style*="background:#fdf2f2"]) {
    background: var(--danger-soft) !important;
}

html[data-theme="dark"] :is([style*="background: #dcfce7"], [style*="background: #eafaf1"], [style*="background:#eafaf1"], [style*="background: #f0fdf4"], [style*="background: #e8f5e9"]) {
    background: var(--ok-soft) !important;
}

html[data-theme="dark"] :is([style*="color: #333"], [style*="color:#333"], [style*="color: #1e293b"], [style*="color:#1e293b"], [style*="color: #0f172a"], [style*="color:#0f172a"], [style*="color: #444"], [style*="color:#444"], [style*="color: #334155"], [style*="color:#334155"], [style*="color: #000"], [style*="color:#000"]):not(.visual-wrapper *):not([style*="background: #f1c40f"]) {
    color: var(--text) !important;
}

html[data-theme="dark"] :is([style*="color: #555"], [style*="color:#555"], [style*="color: #666"], [style*="color:#666"], [style*="color: #475569"], [style*="color:#475569"], [style*="color: #64748b"], [style*="color:#64748b"], [style*="color: #7f5200"]):not(.visual-wrapper *) {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] :is([style*="color: #005596"], [style*="color:#005596"], [style*="color: var(--hormann-blue)"], [style*="color:var(--hormann-blue)"]) {
    color: var(--accent) !important;
}

html[data-theme="dark"] :is([style*="border: 1px solid #ddd"], [style*="border:1px solid #ddd"], [style*="border: 1px solid #eee"], [style*="border: 1px solid #e2e8f0"], [style*="border: 1px solid #cbd5e1"], [style*="border:1px solid #cbd5e1"], [style*="border: 1px solid #ccc"], [style*="border:1px solid #ccc"], [style*="border-bottom: 1px solid #eee"], [style*="border-bottom:1px solid #eee"], [style*="border-top: 1px solid #eee"], [style*="border-top: 1px solid #e2e8f0"], [style*="border-bottom: 1px solid #e2e8f0"], [style*="border-bottom: 1px solid #ddd"], [style*="border-top: 1px solid #ddd"]) {
    border-color: var(--line) !important;
}

/* Klassen mit festen hellen Farben aus style.css */
html[data-theme="dark"] :is(.search-input-group, .pdf-settings-popout, .configuration-reset-button, .fitting-btn, .toggle-container, .cl-version-block, .cl-header, .login-info-box, .ek-login__note, .ek-login__card, .export-summary, .aufmass-pilot-strip, .av-erklaer-btn) {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] .fitting-btn.active {
    background-color: var(--accent-soft) !important;
    border-color: var(--accent) !important;
}

html[data-theme="dark"] .ek-login {
    background: var(--canvas) !important;
}

html[data-theme="dark"] .hint-text,
html[data-theme="dark"] small {
    color: var(--text-muted);
}

html[data-theme="dark"] .modal-content [style*="background: #f8fafc"],
html[data-theme="dark"] .modal-content [style*="background:#f8fafc"] {
    background: var(--surface-2) !important;
}

html[data-theme="dark"] .ek-toast--success { background: var(--ok-soft); }
html[data-theme="dark"] .ek-toast--error { background: var(--danger-soft); }
html[data-theme="dark"] .ek-toast--warning { background: var(--warn-soft); }
html[data-theme="dark"] .ek-toast--info { background: var(--accent-soft); }

/* Theme-Wechsel: eine einzige Überblendung der ganzen Seite (View Transition) statt Tausender Einzel-Übergänge */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

/* Dunkelmodus: Bedienelemente mit festen hellen Farben aus style.css */
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] textarea {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
}

html[data-theme="dark"] :is(.number-control, .number-control button, .order-number-reset, .search-input-group select) {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
}

html[data-theme="dark"] .toggle-slider {
    background-color: var(--surface-3) !important;
}

html[data-theme="dark"] input:checked + .toggle-slider {
    background-color: var(--accent) !important;
}

html[data-theme="dark"] .export-btn-main:disabled,
html[data-theme="dark"] .ek-btn:disabled {
    background: var(--surface-3) !important;
    color: var(--text-muted) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] label:not([style*="color"]) {
    color: var(--text-2);
}

html[data-theme="dark"] button:not([class]):not([style*="background"]) {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--line-strong);
}

/* Dunkelmodus: Schwingtore (F80/N80) – Zeichnungen bleiben auf hellem "Papier" */
html[data-theme="dark"] :is(.f80-step-control, .f80-norm-note, .f80-result-strip, .f80-export-toolbar, .n80-results, .n80-choice, .f80-order-toolbar, .n80-placeholder) {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

/* Schnittzeichnungen im Dunkelmodus dunkel: Zeichnung wird umgefärbt (Farbtöne bleiben, z. B. rot/grün).
   Export (PDF/Bild) liest die Zeichnung direkt aus und bleibt deshalb hell. */
html[data-theme="dark"] :is(.f80-cad-section, .f80-height-section, .n80-cad-section) {
    background-color: #23282f !important; /* = umgefärbter Zeichnungsgrund, damit die Mitte-Abdeckung nicht als Balken auffällt */
    border-color: var(--line) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] :is(.f80-cad-section, .f80-height-section, .n80-cad-section) svg {
    background: #e9eef5;
    filter: invert(0.9) hue-rotate(180deg) saturate(1.2);
}
html[data-theme="dark"] :is(.f80-cad-section, .f80-height-section, .n80-cad-section) svg .ek-break-mask { fill: #e9eef5; }
html[data-theme="dark"] :is(.f80-cad-section, .f80-height-section, .n80-cad-section) svg .ek-break-mask-stroke { stroke: #e9eef5; }
/* Hell: Zeichnungsgrund reinweiß wie die Mitte-Abdeckung (kein weißer Streifen auf Grau) */
html:not([data-theme="dark"]) :is(.f80-cad-section, .f80-height-section, .n80-cad-section) { background-color: #fff; }
html[data-theme="dark"] :is(.f80-cad-foot, .f80-cad-section small, .f80-height-section small) { color: var(--text-muted) !important; }

html[data-theme="dark"] .f80-result-label { color: var(--text-muted) !important; }
html[data-theme="dark"] .f80-result-label span { color: var(--text-muted) !important; }
html[data-theme="dark"] .f80-result-value { color: var(--accent) !important; }

html[data-theme="dark"] .f80-norm-adopt {
    background: var(--ok-soft) !important;
    color: var(--ok) !important;
    border-color: var(--ok) !important;
}

html[data-theme="dark"] :is(.f80-overlap-valid, .n80-valid) {
    background: var(--ok-soft) !important;
    color: var(--ok) !important;
    border-color: var(--ok) !important;
}

html[data-theme="dark"] :is(.f80-overlap-invalid, .n80-invalid) {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    border-color: var(--danger) !important;
}

/* Dunkelmodus: Aufmaß-Ergebnisliste und Admin-Reiter */
html[data-theme="dark"] :is(.proposal-item, .proposal-item.active, .custom-radio, .admin-tab-btn) {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
}

html[data-theme="dark"] .proposal-item.active {
    border-color: var(--ok) !important;
    background-color: var(--ok-soft) !important;
}

html[data-theme="dark"] .admin-tab-btn.active {
    background-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

html[data-theme="dark"] .aufmass-pilot-strip,
html[data-theme="dark"] .aufmass-pilot-strip__more {
    color: var(--warn) !important;
    border-color: var(--warn) !important;
}

html[data-theme="dark"] :is(.n80-choices, .n80-norm:not(.n80-norm-available), #n80MountLabel, .nl-editor-col, .nl-toolbar, .nl-tool-btn, .nl-tab-btn, .nl-code-toggle, .nl-visual-editor) {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
}

html[data-theme="dark"] .nl-tab-btn.active {
    background-color: var(--accent) !important;
    color: var(--text-on-accent) !important;
}

html[data-theme="dark"] :is(#aufmassN80AppContainer, #aufmassF80AppContainer) :is(strong, b, h3, span):not([class*="valid"]):not([class*="badge"]) {
    color: var(--text);
}

/* Newsletter-Vorschau zeigt die E-Mail so, wie sie ankommt (hell) */
html[data-theme="dark"] :is(.nl-preview-container, .nl-preview-body) {
    color-scheme: light;
}

/* Anmeldung im Dunkelmodus */
html[data-theme="dark"] .ek-login .login-intro,
html[data-theme="dark"] .ek-login__terms,
html[data-theme="dark"] .ek-login__switch,
html[data-theme="dark"] .ek-login__consent {
    color: var(--text-2) !important;
}

html[data-theme="dark"] .ek-login__terms {
    border-top-color: var(--line) !important;
}

html[data-theme="dark"] .ek-login__terms summary,
html[data-theme="dark"] .ek-field__label {
    color: var(--text) !important;
}

/* helle Linienfarben aus älteren Fenstern */
html[data-theme="dark"] :is([style*="#dbe9f5"], [style*="#c2e0f4"], [style*="#9cc3e4"], [style*="#e2e8f0"], [style*="#d6d8db"]) {
    border-color: var(--line-strong) !important;
}

/* Reiter: alter Hover-Effekt aus style.css überschrieben */
.sub-nav-btn:hover:not(.disabled-nav):not(.active) {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--line-strong);
}

.sub-nav-btn.active,
.sub-nav-btn.active:hover:not(.disabled-nav) {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
    box-shadow: var(--shadow-1);
}

/* Dunkelmodus: Bausteine weiterer Ideen auf der Testseite (3D-Beschlag, Downloads, Testfälle) */
html[data-theme="dark"] :is(.b3d-switch, .aufmass-download-card, #avTestfaelle) {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

html[data-theme="dark"] .lamella-box.active span {
    color: var(--ok) !important;
}

/* Kopieren-Knöpfe mit Linien-Symbol statt Emoji */
.ek-btn-icon { display: inline-flex !important; align-items: center; gap: 6px; }
.copy-btn { display: inline-flex; align-items: center; padding: 2px; border-radius: 4px; }
.copy-btn .ek-icon { width: 15px; height: 15px; }
.copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Beschlagsart-Kacheln: voller Name unter dem Kürzel (Z/N/L) */
.fitting-btn .fit-name {
    display: block;
    margin-top: 1px;
    font-size: 0.66rem;
    line-height: 1.15;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    text-align: center;
    hyphens: manual;
    overflow-wrap: anywhere;
}
.fitting-btn.active .fit-name { color: var(--accent, #005596); }
.fitting-btn:not([id^="fitSel_"]) .fit-name { min-height: 2.3em; }

/* ===== Etappe 3: Admin-Bereiche ===== */
/* Aktionsknöpfe in Admin-Tabellen: ruhig, mit Rahmen und Linien-Symbol */
:is(.btn-edit, .btn-delete, .btn-approve-small, .btn-reject-small) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--line-strong, #cbd5e1);
    background: var(--surface, #fff);
    color: var(--text-muted, #475569);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-fast, .15s) ease, color var(--dur-fast, .15s) ease, border-color var(--dur-fast, .15s) ease;
}
:is(.btn-edit, .btn-delete, .btn-approve-small, .btn-reject-small) .ek-icon { width: 16px; height: 16px; }
.btn-edit:hover { color: var(--accent, #005596); border-color: var(--accent, #005596); background: var(--accent-soft, #eaf4fb); }
.btn-delete:hover, .btn-reject-small:hover { color: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); background: var(--danger-soft, #fee2e2); }
.btn-approve-small { color: var(--ok, #15803d); border-color: var(--ok, #15803d); }
.btn-approve-small:hover { background: var(--ok-soft, #dcfce7); }
.btn-reject-small { margin-right: 5px; }
:is(.btn-edit, .btn-delete, .btn-approve-small, .btn-reject-small):focus-visible { outline: 2px solid var(--accent, #005596); outline-offset: 2px; }

/* Symbole in Admin-Reitern, Knöpfen und Überschriften mittig ausrichten */
:is(.admin-tab-btn, .nl-btn, .nl-tab-btn, .nl-btn-small, .btn-pdf, .btn-calc) .ek-icon { width: 16px; height: 16px; vertical-align: -3px; }
#adminSearchInput + .ek-icon, label .ek-icon { vertical-align: -3px; }

/* ===== "Was ist neu?" – mitwachsendes Fenster, ruhige Markierungen ===== */
.modal-content.cl-modal {
    width: min(880px, 92vw);
    max-width: none;
    height: auto;
    max-height: min(84vh, 820px);
    padding: 28px 32px 24px;
}
.cl-modal__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    color: var(--accent);
    font-size: 1.35rem;
}
.cl-modal__list { overflow-y: auto; min-height: 0; padding: 14px 6px 4px 0; scrollbar-gutter: stable; }
.cl-modal .cl-version-block {
    margin: 0 0 14px;
    padding: 14px 16px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
}
.cl-modal .cl-header {
    background: none !important;
    border: 0 !important;
    padding: 0 0 8px;
    margin: 0 0 6px;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0;
    font-size: 1rem;
    color: var(--text);
    align-items: baseline;
}
.cl-modal .cl-date { font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cl-modal .cl-item {
    display: grid;
    grid-template-columns: 6.6rem 1fr;
    gap: 12px;
    align-items: baseline;
    margin: 0;
    padding: 6px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}
.cl-modal .cl-item + .cl-item { border-top: 1px dashed var(--line); }
.cl-modal .cl-tag {
    width: auto;
    justify-self: start;
    margin: 0;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    border: 1px solid transparent;
    position: relative;
    top: -1px;
}
.cl-modal .cl-new { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.cl-modal .cl-imp { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.cl-modal .cl-fix { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.cl-intern {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    vertical-align: 1px;
}
.cl-intern .ek-icon { width: 11px; height: 11px; }
@media (max-width: 560px) {
    .modal-content.cl-modal { padding: 20px 16px 16px; }
    .cl-modal .cl-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Meldung mit Aktionsknopf (z. B. "Rückgängig") */
.ek-toast__action {
    flex-shrink: 0;
    align-self: center;
    margin-left: 4px;
    padding: 5px 10px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.ek-toast__action:hover { background: var(--accent-soft); }
.ek-toast__action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* F80-Status (OK / Schwingtor zu klein / zu groß): Ampelfarben auch im Dunkelmodus */
html[data-theme="dark"] :is(#badgeF80UeberdeckungB, #badgeF80UeberdeckungH)[style*="rgb(22, 163, 74)"] {
    background: var(--ok-soft) !important; color: var(--ok) !important; border-color: var(--ok) !important;
}
html[data-theme="dark"] :is(#badgeF80UeberdeckungB, #badgeF80UeberdeckungH)[style*="rgb(220, 38, 38)"] {
    background: var(--danger-soft) !important; color: var(--danger) !important; border-color: var(--danger) !important;
}
/* Ermitteltes Montagesystem (Dübel / Klemm) im Dunkelmodus */
html[data-theme="dark"] #f80MontageBadge span[style*="#e6f7ec"] {
    background: var(--ok-soft) !important; color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent) !important;
}
html[data-theme="dark"] #f80MontageBadge span[style*="#eff6ff"] {
    background: var(--accent-soft) !important; color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
html[data-theme="dark"] :is(#badgeF80UeberdeckungB, #badgeF80UeberdeckungH, .n80-status, .f80-overlap-status, #f80MontageBadge span) :is(strong, b, span) {
    color: inherit !important;
}
/* N80: Hinweiszeilen im Dunkelmodus lesbar */
html[data-theme="dark"] :is(.n80-norm:not(.n80-norm-available), .n80-detail, #n80VisibleB, #n80VisibleH, #n80MountDetails dt, #n80MountDetails dd) {
    color: var(--text-muted) !important;
}

/* Normgröße getroffen (F80/N80): grüne Markierung auch im Dunkelmodus */
html[data-theme="dark"] :is(#aufmassF80AppContainer, #aufmassN80AppContainer) .f80-step-control input:is(.f80-norm-hit, .n80-norm-hit) {
    background-color: var(--ok-soft) !important;
    color: var(--ok) !important;
    border-color: color-mix(in srgb, var(--ok) 45%, transparent) !important;
}
html[data-theme="dark"] :is(#aufmassF80AppContainer .f80-norm-hint, #aufmassN80AppContainer .n80-norm-available) {
    background-color: var(--ok-soft) !important;
    color: var(--ok) !important;
}
html[data-theme="dark"] #aufmassN80AppContainer .n80-norm-button {
    background: var(--ok-soft) !important;
    color: var(--ok) !important;
    border-color: var(--ok) !important;
}

/* ===== Interne Tools im Dunkelmodus: Text-Konverter ===== */
html[data-theme="dark"] .text-converter :is(.tool-column-left, .tool-column-right, .checklist-card) {
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .text-converter :is(.text-converter__label, .tool-checklist-title, .tool-checklist-content) {
    color: var(--text) !important;
    border-color: var(--line) !important;
}
html[data-theme="dark"] .text-converter #toolOrderInput {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
}
html[data-theme="dark"] .text-converter #toolOrderInput::placeholder { color: var(--text-muted); }
html[data-theme="dark"] .text-converter .checklist-item { background: var(--surface) !important; border-color: var(--line) !important; color: var(--text); }
html[data-theme="dark"] .text-converter .checklist-item:hover { background: var(--surface-3, #223040) !important; }
html[data-theme="dark"] .text-converter .checklist-header-line { color: var(--accent) !important; }
html[data-theme="dark"] .text-converter :is(.text-converter__button--secondary, .text-converter__utility-button) {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--line-strong) !important;
}
html[data-theme="dark"] .text-converter .text-converter__utility-button--report { color: var(--danger) !important; border-color: var(--danger) !important; }
html[data-theme="dark"] .text-converter :is(.text-converter__empty-state, .text-converter__intro) { color: var(--text-muted) !important; }

/* ===== Interne Tools im Dunkelmodus: Profilzylinderberechnung ===== */
html[data-theme="dark"] :is(.pz-header h2, .pz-inputs h3, .pz-rowlabel, .pz-card b, .pz-dd-item, .pz-dd-btn) { color: var(--text) !important; }
html[data-theme="dark"] :is(.pz-header p, .pz-inputs small, .pz-hints, .pz-sub, .pz-field, .pz-hint, .pz-ph, .pz-btn em, .pz-card span, .pz-dd-btn em, .pz-dd-item em, .pz-result-label, .pz-result-value span, .pz-empty) { color: var(--text-muted) !important; }
html[data-theme="dark"] .pz-header { border-color: var(--line) !important; }
html[data-theme="dark"] :is(.pz-reset, .pz-btn, .pz-card, .pz-dd-btn) {
    background: var(--surface) !important;
    border-color: var(--line-strong) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] :is(.pz-btn, .pz-card, .pz-reset, .pz-dd-btn):hover { border-color: var(--accent) !important; }
html[data-theme="dark"] :is(.pz-btn.active, .pz-card.active) {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent) inset !important;
}
html[data-theme="dark"] .pz-card.active b { color: var(--accent) !important; }
html[data-theme="dark"] :is(.pz-result, .pz-result:not(.has-result), .pz-sonder) {
    background: var(--surface-2) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .pz-result-value, html[data-theme="dark"] .pz-chosen, html[data-theme="dark"] .pz-link { color: var(--accent) !important; }
html[data-theme="dark"] .pz-empty.warn { color: var(--warn) !important; }
html[data-theme="dark"] .pz-table { color: var(--text); }
html[data-theme="dark"] .pz-table .pz-sum td { border-color: var(--line-strong) !important; }
html[data-theme="dark"] .pz-row { border-color: var(--line) !important; }
html[data-theme="dark"] :is(.pz-field input, .pz-select) { background: var(--surface) !important; color: var(--text) !important; border-color: var(--line-strong) !important; }
html[data-theme="dark"] .pz-field input:disabled { background: var(--surface-2) !important; color: var(--text-muted) !important; }
html[data-theme="dark"] .pz-switch { background: var(--surface) !important; }
html[data-theme="dark"] .pz-switch button { color: var(--text-muted) !important; }
html[data-theme="dark"] .pz-switch button.active { color: #fff !important; }
html[data-theme="dark"] .pz-dd-list { background: var(--surface) !important; border-color: var(--line-strong) !important; box-shadow: 0 12px 32px rgba(0,0,0,.45) !important; }
html[data-theme="dark"] .pz-dd-item:hover { background: var(--surface-2) !important; }
html[data-theme="dark"] .pz-dd-item.selected { background: var(--accent-soft) !important; color: var(--accent) !important; }
html[data-theme="dark"] .pz-dd-chev { border-color: var(--text-muted) !important; }
html[data-theme="dark"] .pz-ok { background: var(--ok-soft) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent) !important; color: var(--ok) !important; }
/* Skizze: wie die Schwingtor-Zeichnungen umgefärbt, Farbtöne bleiben */
html[data-theme="dark"] .pz-skizze {
    background: #e9eef5 !important;
    border-color: var(--line) !important;
    filter: invert(0.9) hue-rotate(180deg) saturate(1.2);
}
html[data-theme="dark"] .pz-skizze .pzs-white { fill: #e9eef5; }

/* ===== Etappe 5: Gesamtprüfung Dunkelmodus (gefunden mit firebase/klicktest: npm run dunkel) ===== */
/* Impressum / Datenschutz: dunkle Schrift auf dunklem Grund */
html[data-theme="dark"] .legal-text,
html[data-theme="dark"] .legal-text :is(p, strong, h3, li, span) { color: var(--text) !important; }
html[data-theme="dark"] .legal-text h3 { border-color: var(--line) !important; }

/* Teileliste, Lamellen-Warenkorb, Mengenfeld */
html[data-theme="dark"] .table-scroll-container { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .qty-wrapper { background: var(--surface) !important; border-color: var(--line-strong) !important; }
html[data-theme="dark"] .qty-wrapper :is(input, button) { background: transparent !important; color: var(--text) !important; }

/* Baureihe 30: Baujahr-Auswahl */
html[data-theme="dark"] #br30_options { background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--text) !important; }
html[data-theme="dark"] #br30_options :is(label, span, strong) { color: var(--text) !important; }
html[data-theme="dark"] #br20_options span { color: var(--text) !important; }

/* Aufmaß-Pilot: Vorschlagsliste, Hinweise, Testmodul, "So funktioniert's" */
html[data-theme="dark"] :is(.proposal-title, .proposal-text-content span, .proposal-size, .proposal-size b) { color: var(--text) !important; }
html[data-theme="dark"] .proposal-size { color: var(--text-muted) !important; }
html[data-theme="dark"] .proposal-item.active .proposal-title { color: var(--ok) !important; }
html[data-theme="dark"] .aufmass-download-hint, html[data-theme="dark"] #avTestfaelle label { color: var(--text-muted) !important; }
html[data-theme="dark"] #aufmassFaqModal .modal-content,
html[data-theme="dark"] #aufmassFaqModal .modal-content :is(div, p, li, strong, span, b, h2, h3, h4) { color: var(--text) !important; }
html[data-theme="dark"] #aufmassFaqModal .modal-content div[style*="background"] { background: var(--surface-2) !important; border-color: var(--line) !important; }

/* Datei-Auswahlfelder (CSV, Newsletter-Anhang) */
html[data-theme="dark"] input[type="file"] { background: var(--surface) !important; color: var(--text) !important; border-color: var(--line-strong) !important; color-scheme: dark; }

/* Knöpfe mit festen, zu schwachen Farben: Schrift kräftig, Fläche aus den Farbbausteinen */
html[data-theme="dark"] .btn-calc[style*="95a5a6"], html[data-theme="dark"] .btn-calc[style*="#7f8c8d"], html[data-theme="dark"] .btn-calc[style*="#5d6d6e"] {
    background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important;
}
html[data-theme="dark"] .nl-hint, html[data-theme="dark"] #nlEditorHint { color: var(--text-muted) !important; }

/* Profilfenster und Profilmenü */
html[data-theme="dark"] #userProfilePopup :is(h3, h2, strong, span, p) { color: var(--text) !important; }
html[data-theme="dark"] #userSettingsModal :is(label, h3, h2, span, p) { color: var(--text) !important; }

/* Auftragsnummern prüfen */
html[data-theme="dark"] .order-gate-review__toolbar { background: var(--surface-2) !important; border-color: var(--line) !important; }
html[data-theme="dark"] :is(.order-gate-review__toolbar label, .order-gate-review__toolbar span, .order-gate-review__fields label) { color: var(--text) !important; }
html[data-theme="dark"] :is(.order-gate-review__header p, .order-gate-review__source, .order-gate-review__empty) { color: var(--text-muted) !important; }
html[data-theme="dark"] .order-gate-review__item { border-color: var(--line) !important; }
html[data-theme="dark"] .order-gate-review__reason { background: var(--warn-soft) !important; border-color: color-mix(in srgb, var(--warn) 45%, transparent) !important; color: var(--warn) !important; }
html[data-theme="dark"] .order-gate-review__header h2, html[data-theme="dark"] .order-gate-review__item h3 { color: var(--accent) !important; }

/* Projektzentrale */
html[data-theme="dark"] :is(.project-hub-area, .project-hub-logbook, .project-hub-publication, .project-hub-export-text, .project-hub-work-status, .project-hub-summary .project-hub-work-status, .project-hub-open, .project-hub-back) {
    background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--text) !important;
}
html[data-theme="dark"] :is(.project-hub-header h2, .project-hub-area h3, .project-hub-logbook-title, .project-hub-detail-section h4, .project-hub-details summary, .project-hub-log-more summary, .project-hub-facts dd) { color: var(--text) !important; }
html[data-theme="dark"] :is(.project-hub-status, .project-hub-help, .project-hub-empty, .project-hub-facts dt, .project-hub-log-date, #projectHubLoadStatus, .project-hub-publication p) { color: var(--text-muted) !important; }
html[data-theme="dark"] .project-hub-log-live { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 45%, transparent) !important; }
html[data-theme="dark"] :is(.project-hub-log-test, .project-hub-log-status, .project-hub-publication-status) { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: color-mix(in srgb, var(--warn) 45%, transparent) !important; }

/* Zargen-Finder (Produktfotos bleiben hell hinterlegt) */
html[data-theme="dark"] :is(.zargen-filter-step, .zargen-result-card, .zargen-profile-row, .zargen-card-note, .zargen-detail-placeholder, .zargen-empty, .zargen-empty--notice, .zargen-finder-footnote, .zargen-filter-btn, .zargen-finder-reset, .zargen-result-actions button, .zargen-standard-badge) {
    background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--text) !important;
}
html[data-theme="dark"] :is(.zargen-filter-btn, .zargen-finder-reset, .zargen-result-actions button) { background: var(--surface) !important; border-color: var(--line-strong) !important; }
html[data-theme="dark"] .zargen-filter-btn.active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
html[data-theme="dark"] :is(.zargen-finder-header h2, .zargen-detail-placeholder strong, .zargen-detail-row strong, .zargen-details summary, .zargen-profile-row strong, .zargen-feature-list, .zargen-subtype) { color: var(--text) !important; }
html[data-theme="dark"] :is(#zargenFinderSelection, .zargen-result-description, .zargen-finder-header p) { color: var(--text-muted) !important; }

/* Knöpfe mit Grün/Rot/Orange als Fläche: im Dunkelmodus kräftiger, damit die weiße Schrift lesbar bleibt */
html[data-theme="dark"] :is(button, .btn-calc, .btn-pdf):is([style*="friendly-green"]),
html[data-theme="dark"] :is(.btn-add-new, .nl-btn-primary, #btnSendNewsletter) {
    background: color-mix(in srgb, var(--ok) 48%, #000) !important; color: #fff !important;
}
html[data-theme="dark"] :is(button, .btn-calc, .btn-pdf):is([style*="error-red"]) {
    background: color-mix(in srgb, var(--danger) 55%, #000) !important; color: #fff !important;
}
html[data-theme="dark"] :is(button, .btn-calc, .btn-pdf):is([style*="alert-orange"]),
html[data-theme="dark"] .nl-btn-accent {
    background: color-mix(in srgb, var(--warn) 50%, #000) !important; color: #fff !important;
}
/* Graue "Abbrechen"-Knöpfe als ruhige Zweitknöpfe */
html[data-theme="dark"] :is(button, .btn-calc):is([style*="#94a3b8"], [style*="#bdc3c7"], [style*="#e2e8f0"]) {
    background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important;
}
/* Projektzentrale: Hinweiszeilen im Logbuch */
html[data-theme="dark"] :is(.project-hub-log-note, .project-hub-log-area) { color: var(--text-muted) !important; }
html[data-theme="dark"] span[style*="background:var(--friendly-green)"] { background: color-mix(in srgb, var(--ok) 48%, #000) !important; color: #fff !important; }
/* Festes Dunkelblau (#0369a1) aus eingebetteten Stilen: im Dunkelmodus helles Akzentblau */
html[data-theme="dark"] [style*="color:#0369a1"], html[data-theme="dark"] [style*="color: #0369a1"] { color: var(--accent) !important; }
html[data-theme="dark"] [style*="border:1px solid #0369a1"] { border-color: var(--accent) !important; }
/* Produkt-Verwaltung: Baureihen- und Beschlags-Markierungen im Dunkelmodus */
html[data-theme="dark"] span[style*="color:#005596"] { color: var(--accent) !important; background: var(--accent-soft) !important; }
html[data-theme="dark"] span[style*="color:#e67e22"] { color: var(--warn) !important; background: var(--warn-soft) !important; }
html[data-theme="dark"] span[style*="color:#27ae60"] { color: var(--ok) !important; background: var(--ok-soft) !important; }
html[data-theme="dark"] span[style*="color:#8e44ad"] { color: #c79be0 !important; background: #2a1f33 !important; }
/* Helles Design: zu blasse feste Farben kräftiger (Baureihen-Markierungen, grauer Abbrechen-Knopf) */
html:not([data-theme="dark"]) span[style*="color:#e67e22"] { color: #a4500f !important; }
html:not([data-theme="dark"]) span[style*="color:#27ae60"] { color: #1a7f45 !important; }
html:not([data-theme="dark"]) :is(button, .btn-calc)[style*="background: #94a3b8"] { background: #64748b !important; }