/* =====================================================================
   riccardo-design.css - zuschaltbares Shop-Design fuer das Dashboard
   Vorgabe: DESIGN.md. Erzeugt von tok/build.py aus tok/mapping.py und
   tok/komponenten.css - Aenderungen bitte dort, nicht hier.
   <html data-design="alt">                         heutiges Aussehen (Standard)
   <html data-design="neu" data-rz-theme="light">   Shop-Look hell
   <html data-design="neu" data-rz-theme="dark">    Shop-Look dunkel
   Zuordnung aller Farben: arbeit/TOKENS.md
   Nachtrag Pruefbefunde (Kontrast, Heatmap, Praefix): direkt in dieser Datei
   und in TOKENS.md eingetragen; tok/mapping.py + tok/komponenten.css muessen
   vor dem naechsten build.py-Lauf nachgezogen werden.
   ===================================================================== */

/* 1. Schriften (Barlow, OFL-Lizenz: /static/fonts/OFL-LICENSE.txt) */
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url('/static/fonts/barlow-condensed-latin-700-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url('/static/fonts/barlow-condensed-latin-800-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/static/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: italic; font-weight: 900; font-display: swap; src: url('/static/fonts/barlow-condensed-latin-900-italic.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }

/* 2. ALT = exakt die Originalwerte. Name = Originalwert (DESIGN.md 2). */
:root {
    --c-000000: #000000;  /* #000 */
    --c-0369a1: #0369a1;
    --c-0a0a0a: #0a0a0a;
    --c-0b0b0d: #0b0b0d;
    --c-0d0d0d: #0d0d0d;
    --c-0e0e11: #0e0e11;
    --c-0e1420: #0e1420;
    --c-101013: #101013;
    --c-111111: #111111;  /* #111, #111111 */
    --c-121216: #121216;
    --c-12351f: #12351f;
    --c-123a2c: #123a2c;
    --c-141418: #141418;
    --c-141419: #141419;
    --c-141a24: #141a24;
    --c-14b8a6: #14b8a6;
    --c-15151a: #15151a;
    --c-161619: #161619;
    --c-16161a: #16161a;
    --c-16a085: #16a085;
    --c-171717: #171717;
    --c-18181d: #18181d;
    --c-1a0505: #1a0505;
    --c-1a0a0a: #1a0a0a;
    --c-1a1a1a: #1a1a1a;
    --c-1a1a20: #1a1a20;
    --c-1a2230: #1a2230;
    --c-1a2a3c: #1a2a3c;
    --c-1a3a5c: #1a3a5c;
    --c-1c1c22: #1c1c22;
    --c-1e1e1e: #1e1e1e;
    --c-1e2430: #1e2430;
    --c-1e2530: #1e2530;
    --c-1e2833: #1e2833;
    --c-200808: #200808;
    --c-20202a: #20202a;
    --c-2196f3: #2196f3;
    --c-222222: #222222;  /* #222 */
    --c-229ed9: #229ed9;
    --c-232329: #232329;
    --c-242424: #242424;
    --c-24242c: #24242c;
    --c-252525: #252525;
    --c-26262c: #26262c;
    --c-26262d: #26262d;
    --c-26262e: #26262e;
    --c-26303c: #26303c;
    --c-27ae60: #27ae60;
    --c-2a0a0a: #2a0a0a;
    --c-2a2412: #2a2412;
    --c-2a2420: #2a2420;
    --c-2a2438: #2a2438;
    --c-2a2a2a: #2a2a2a;
    --c-2a2a32: #2a2a32;
    --c-2a3140: #2a3140;
    --c-2a4a6c: #2a4a6c;
    --c-2c2c34: #2c2c34;
    --c-2c3e70: #2c3e70;
    --c-2e9e5b: #2e9e5b;
    --c-2ecc71: #2ecc71;
    --c-2f5fb0: #2f5fb0;
    --c-2f80ed: #2f80ed;
    --c-303030: #303030;
    --c-303039: #303039;
    --c-30303a: #30303a;
    --c-333333: #333333;  /* #333 */
    --c-33333d: #33333d;
    --c-3498db: #3498db;
    --c-388e3c: #388e3c;
    --c-3a1515: #3a1515;
    --c-3a1a1a: #3a1a1a;
    --c-3a2438: #3a2438;
    --c-3a2e12: #3a2e12;
    --c-3a3a44: #3a3a44;
    --c-3a4a5f: #3a4a5f;
    --c-3fb96b: #3fb96b;
    --c-43a047: #43a047;
    --c-444444: #444444;  /* #444 */
    --c-4a3f1e: #4a3f1e;
    --c-4a9eff: #4a9eff;
    --c-4caf50: #4caf50;
    --c-555555: #555555;  /* #555 */
    --c-595962: #595962;
    --c-5a6578: #5a6578;
    --c-5dade2: #5dade2;
    --c-64b5f6: #64b5f6;
    --c-666666: #666666;  /* #666 */
    --c-66bb6a: #66bb6a;
    --c-6a8fb5: #6a8fb5;
    --c-6c3a8b: #6c3a8b;
    --c-6f6f78: #6f6f78;
    --c-70402c: #70402c;
    --c-777777: #777777;  /* #777 */
    --c-7a7a85: #7a7a85;
    --c-7c7c86: #7c7c86;
    --c-7ee0a0: #7ee0a0;
    --c-7f8fa6: #7f8fa6;
    --c-7fb3ff: #7fb3ff;
    --c-7fe0b0: #7fe0b0;
    --c-888888: #888888;  /* #888 */
    --c-8a6a1e: #8a6a1e;
    --c-8a8a93: #8a8a93;
    --c-8ab4dd: #8ab4dd;
    --c-8b0000: #8b0000;
    --c-96e6a8: #96e6a8;
    --c-999999: #999999;  /* #999 */
    --c-9a9aa2: #9a9aa2;
    --c-9b59b6: #9b59b6;
    --c-aa3333: #aa3333;  /* #a33 */
    --c-aaaaaa: #aaaaaa;  /* #aaa */
    --c-aec7ff: #aec7ff;
    --c-af7ac5: #af7ac5;
    --c-b30000: #b30000;
    --c-bbbbbb: #bbbbbb;  /* #bbb */
    --c-c0392b: #c0392b;
    --c-c20000: #c20000;
    --c-c2c2c9: #c2c2c9;
    --c-c99a2e: #c99a2e;
    --c-c9b6ff: #c9b6ff;
    --c-cccccc: #cccccc;  /* #ccc */
    --c-d40000: #d40000;
    --c-d7d7dd: #d7d7dd;
    --c-d8d8de: #d8d8de;
    --c-dd4444: #dd4444;  /* #d44 */
    --c-dddddd: #dddddd;  /* #ddd */
    --c-e0922b: #e0922b;
    --c-e0e0e0: #e0e0e0;
    --c-e0f2fe: #e0f2fe;
    --c-e23b3b: #e23b3b;
    --c-e2b93b: #e2b93b;
    --c-e53935: #e53935;
    --c-e5e5ea: #e5e5ea;
    --c-e60000: #e60000;
    --c-e67e22: #e67e22;
    --c-e6a6ff: #e6a6ff;
    --c-e6e6e6: #e6e6e6;
    --c-e6e6ea: #e6e6ea;
    --c-e74c3c: #e74c3c;
    --c-f0b429: #f0b429;
    --c-f1c40f: #f1c40f;
    --c-f39c12: #f39c12;
    --c-ff3333: #ff3333;
    --c-ff3b3b: #ff3b3b;
    --c-ff5a5a: #ff5a5a;
    --c-ff6a6a: #ff6a6a;
    --c-ff6b6b: #ff6b6b;
    --c-ff8a8a: #ff8a8a;
    --c-ff9800: #ff9800;
    --c-ff9a9a: #ff9a9a;
    --c-ffb74d: #ffb74d;
    --c-ffc7ae: #ffc7ae;
    --c-ffd479: #ffd479;
    --c-ffffff: #ffffff;  /* #fff */
    --c-rgba-0-0-0-3: rgba(0,0,0,0.3);
    --c-rgba-0-0-0-4: rgba(0,0,0,0.4);
    --c-rgba-0-0-0-45: rgba(0,0,0,0.45);
    --c-rgba-0-0-0-5: rgba(0,0,0,0.5);
    --c-rgba-0-0-0-6: rgba(0,0,0,0.6);
    --c-rgba-0-0-0-72: rgba(0,0,0,0.72);
    --c-rgba-0-0-0-75: rgba(0,0,0,0.75);
    --c-rgba-0-0-0-78: rgba(0,0,0,0.78);  /* rgba(0,0,0,.78) */
    --c-rgba-100-100-100-12: rgba(100,100,100,0.12);
    --c-rgba-17-17-17-85: rgba(17,17,17,0.85);
    --c-rgba-212-0-0-0: rgba(212,0,0,0);
    --c-rgba-212-0-0-04: rgba(212,0,0,0.04);
    --c-rgba-212-0-0-05: rgba(212,0,0,0.05);  /* rgba(212, 0, 0, .05) */
    --c-rgba-212-0-0-06: rgba(212,0,0,0.06);
    --c-rgba-212-0-0-08: rgba(212,0,0,0.08);
    --c-rgba-212-0-0-12: rgba(212,0,0,0.12);
    --c-rgba-212-0-0-15: rgba(212,0,0,0.15);
    --c-rgba-212-0-0-16: rgba(212,0,0,0.16);
    --c-rgba-212-0-0-18: rgba(212,0,0,0.18);
    --c-rgba-212-0-0-22: rgba(212,0,0,0.22);
    --c-rgba-212-0-0-25: rgba(212,0,0,0.25);
    --c-rgba-212-0-0-3: rgba(212,0,0,0.3);
    --c-rgba-212-0-0-4: rgba(212,0,0,0.4);
    --c-rgba-212-0-0-45: rgba(212,0,0,0.45);
    --c-rgba-212-0-0-5: rgba(212,0,0,0.5);
    --c-rgba-212-0-0-55: rgba(212,0,0,0.55);
    --c-rgba-212-0-0-6: rgba(212,0,0,0.6);
    --c-rgba-230-0-0-7: rgba(230,0,0,0.7);
    --c-rgba-230-0-0-85: rgba(230,0,0,0.85);
    --c-rgba-255-152-0-15: rgba(255,152,0,0.15);
    --c-rgba-255-255-255-018: rgba(255,255,255,0.018);
    --c-rgba-255-255-255-025: rgba(255,255,255,0.025);
    --c-rgba-255-255-255-04: rgba(255,255,255,0.04);
    --c-rgba-255-255-255-045: rgba(255,255,255,0.045);
    --c-rgba-255-255-255-05: rgba(255,255,255,0.05);
    --c-rgba-255-255-255-06: rgba(255,255,255,0.06);
    --c-rgba-255-255-255-08: rgba(255,255,255,0.08);
    --c-rgba-255-255-255-085: rgba(255,255,255,0.085);
    --c-rgba-255-255-255-09: rgba(255,255,255,0.09);
    --c-rgba-255-255-255-35: rgba(255,255,255,0.35);
    --c-rgba-255-51-51-6: rgba(255,51,51,0.6);
    --c-rgba-33-150-243-15: rgba(33,150,243,0.15);
    --c-rgba-34-197-94-08: rgba(34,197,94,0.08);  /* rgba(34, 197, 94, .08) */
    --c-rgba-34-197-94-35: rgba(34,197,94,0.35);  /* rgba(34, 197, 94, .35) */
    --c-rgba-76-175-80-08: rgba(76,175,80,0.08);
    --c-rgba-76-175-80-12: rgba(76,175,80,0.12);

    /* Schrift und Form fuer ALT: heutige Werte */
    --f-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  /* index.html:10, login.html:17, produkttests.html:13 */
    --f-head: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  /* wie f-body */
    --f-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  /* wie f-body */
    --f-num: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  /* wie f-body; neu: KPI-Zahlen Barlow Semi Condensed 700 (DESIGN.md 3) */
    --f-mono: monospace;  /* index.html:386 */
    --r-badge: 4px;  /* index.html:310/337 */
    --r-btn: 9px;  /* index.html:934 */
    --r-input: 9px;  /* index.html:1000 */
    --r-kpi: 12px;  /* index.html:56 */
    --r-card: 16px;  /* index.html:90 */
    --r-modal: 14px;  /* index.html:3883 */
    --shadow-card: 0 10px 34px var(--c-rgba-0-0-0-45);  /* index.html:906 */
    --shadow-hover: 0 8px 22px var(--c-rgba-0-0-0-45);  /* index.html:897 */
    --shadow-modal: 0 24px 60px var(--c-rgba-0-0-0-5);  /* index.html:3883 */
}

/* 3. NEU hell: Shop-Tokens + Belegung jeder --c-* Variable nach ihrer Rolle */
[data-design="neu"] {
    /* Negative Werte (JS-Inline, 28.09.2026): im alten Dashboard teilten sich Marken-Akzent und
       "negativ" das Literal #d40000. Im neuen Design bekommen negative Zahlen die Gefahr-Farbe,
       der Akzent bleibt Marken-Rot. Im alten Design ist --rz-neg nicht gesetzt -> Rueckfall #d40000. */
    --rz-neg: var(--rz-danger);

    /* Shop-Tokens hell */
    --rz-red: #E30613;  /* DESIGN.md 3 */
    --rz-red-dark: #B8050F;  /* DESIGN.md 3 */
    --rz-red-soft: #FDEEEE;  /* DESIGN.md 3 */
    --rz-ink: #1D1D1B;  /* DESIGN.md 3 */
    --rz-ink-static: #16110F;  /* DESIGN.md 3 (kippt nicht) */
    --rz-ink-2: #3A3A37;  /* DESIGN.md 3 */
    --rz-muted: #6E6B66;  /* DESIGN.md 3 */
    --rz-faint: var(--rz-muted);  /* nur noch Alias (besetzung.html); eigener Wert lag unter 4.5:1 */
    --rz-line: #E9E5DF;  /* DESIGN.md 3 */
    --rz-line-strong: #D8D3CB;  /* DESIGN.md 3 */
    --rz-page: #F7F5F2;  /* DESIGN.md 3 */
    --rz-surface: #FFFFFF;  /* DESIGN.md 3 */
    --rz-surface-2: #FFFFFF;  /* DESIGN.md 3 (hell: Ergaenzung = surface) */
    --rz-tile: #F3F1ED;  /* DESIGN.md 3 */
    --rz-sand: #EDE8E1;  /* DESIGN.md 3 */
    --rz-panel: #16110F;  /* DESIGN.md 3 */
    --rz-bar: #FFFFFF;  /* DESIGN.md 3 (hell: Kopfzeile weiss wie Shop) */
    --rz-mix: #FFFFFF;  /* base.scss:56 / 2994 */
    --rz-field: var(--rz-surface);  /* Ergaenzung: Eingabeflaeche (base.scss:3046-3050) */
    --rz-green: #1B7F4B;  /* DESIGN.md 3 */
    --rz-info: #2B5F8A;  /* DESIGN.md 3 (dunkel aufgehellt) */
    --rz-warn: #B25E00;  /* DESIGN.md 3 (dunkel aufgehellt) */
    --rz-danger: #C8102E;  /* DESIGN.md 3 (dunkel aufgehellt) */
    --rz-green-text: #166B3F;  /* Ergaenzung: Gruen fuer kleine Schrift (Kachel 5.8, Tint 5.6:1) */
    --rz-warn-text: #8F4B00;  /* Ergaenzung: Warnung fuer kleine Schrift (Kachel/Tint 5.9:1) */
    --rz-violet: #6A4C9C;  /* Ergaenzung: Admin-/Neu-Badges, Diagramm */
    --rz-teal: #0E7C72;  /* Ergaenzung: Knopf-Akzent Lager, Heatmap */
    --rz-gold: #946800;  /* Ergaenzung: Knopf-Akzent Kosten/Historie */
    --rz-green-soft: #E6F2EB;  /* Ergaenzung: Badge-Flaeche */
    --rz-info-soft: #E6EEF5;  /* Ergaenzung: Badge-Flaeche */
    --rz-warn-soft: #FBF0E0;  /* Ergaenzung: Badge-Flaeche */
    --rz-danger-soft: #FBE7EA;  /* Ergaenzung: Badge-Flaeche */
    --rz-violet-soft: #EFEAF7;  /* Ergaenzung: Badge-Flaeche */
    --rz-danger-bg: #C8102E;  /* Ergaenzung: Gefahr-Knopf (weisse Schrift, fest) */
    --rz-warn-bg: #B25E00;  /* Ergaenzung: Warn-Knopf (weisse Schrift, fest) */
    --rz-btn-border: rgba(22,17,15,.16);  /* DESIGN.md 3 Umriss-Knopf */
    --rz-focus: rgba(227,6,19,.18);  /* overrides.scss:22 ($input-btn-focus-color) */
    --rz-overlay: rgba(22,17,15,.45);  /* Ergaenzung: Modal-Hintergrund */
    --rz-hm-0: #C8102E;  /* Ergaenzung: Heatmap < 50 % */
    --rz-hm-1: #E06A1B;  /* Ergaenzung: Heatmap 50-70 % */
    --rz-hm-2: #E8B23A;  /* Ergaenzung: Heatmap 70-90 % */
    --rz-hm-3: #7BB661;  /* Ergaenzung: Heatmap 90-110 % */
    --rz-hm-4: #2E9A5E;  /* Ergaenzung: Heatmap 110-130 % */
    --rz-hm-5: #0E7C72;  /* Ergaenzung: Heatmap >= 130 % */
    --rz-radius-sm: 8px;
    --rz-radius: 14px;
    --rz-radius-lg: 22px;
    --rz-shadow: 0 1px 2px rgba(29,29,27,.04), 0 4px 16px rgba(29,29,27,.06);
    --rz-shadow-hover: 0 2px 4px rgba(29,29,27,.06), 0 12px 32px rgba(29,29,27,.10);
    --rz-shadow-modal: 0 24px 60px rgba(29,29,27,.18);
    --rz-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --rz-font-head: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
    --rz-display: 'Barlow Condensed', 'Barlow Semi Condensed', sans-serif;

    /* Schrift und Form NEU */
    --f-body: var(--rz-font-body);
    --f-head: var(--rz-font-head);
    --f-display: var(--rz-display);
    --f-num: var(--rz-font-head);
    --f-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
    --r-badge: 999px;
    --r-btn: var(--rz-radius);
    --r-input: var(--rz-radius-sm);
    --r-kpi: var(--rz-radius);
    --r-card: var(--rz-radius-lg);
    --r-modal: var(--rz-radius-lg);
    --shadow-card: var(--rz-shadow);
    --shadow-hover: var(--rz-shadow-hover);
    --shadow-modal: var(--rz-shadow-modal);

    /* 01 Seitenhintergrund */
    --c-0a0a0a: var(--rz-page);
    --c-0b0b0d: var(--rz-page);

    /* 02 Flaeche (Karte/Modal/Kopf) */
    --c-0d0d0d: var(--rz-surface);
    --c-0e0e11: var(--rz-surface);
    --c-0e1420: var(--rz-surface);
    --c-111111: var(--rz-surface);
    --c-121216: var(--rz-surface);
    --c-15151a: var(--rz-surface);
    --c-1a0a0a: var(--rz-surface);
    --c-1c1c22: var(--rz-surface);
    --c-1e2430: var(--rz-surface);
    --c-2a0a0a: var(--rz-surface);

    /* 03 Dunkle Akzentkarte (Prognose) */
    --c-1a0505: var(--rz-panel);
    --c-200808: var(--rz-panel);

    /* 04 Kachel / erhoehte Flaeche */
    --c-101013: var(--rz-tile);
    --c-141418: var(--rz-tile);
    --c-141419: var(--rz-tile);
    --c-141a24: var(--rz-tile);
    --c-171717: var(--rz-tile);
    --c-1a1a1a: var(--rz-tile);
    --c-1a1a20: var(--rz-tile);
    --c-1e2833: var(--rz-tile);
    --c-252525: var(--rz-sand);
    --c-26262c: var(--rz-tile);
    --c-rgba-0-0-0-3: var(--rz-tile);
    --c-rgba-212-0-0-04: var(--rz-tile);
    --c-rgba-212-0-0-05: var(--rz-tile);

    /* 05 Eingabeflaeche */
    --c-161619: var(--rz-field);
    --c-16161a: var(--rz-field);

    /* 06 Linie */
    --c-18181d: var(--rz-line);
    --c-1e1e1e: var(--rz-line);
    --c-1e2530: var(--rz-line);
    --c-20202a: var(--rz-line);
    --c-222222: var(--rz-line);
    --c-232329: var(--rz-line);
    --c-242424: var(--rz-line);
    --c-26262d: var(--rz-line);
    --c-26262e: var(--rz-line);
    --c-2a3140: var(--rz-line);
    --c-2c2c34: var(--rz-line);
    --c-30303a: var(--rz-line);
    --c-33333d: var(--rz-line);

    /* 07 Linie stark / Spur */
    --c-1a2230: var(--rz-line-strong);
    --c-24242c: var(--rz-line-strong);
    --c-2a2a2a: var(--rz-line-strong);
    --c-2a2a32: var(--rz-line-strong);
    --c-303030: var(--rz-line-strong);
    --c-303039: var(--rz-line-strong);
    --c-333333: var(--rz-line-strong);
    --c-3a3a44: var(--rz-line-strong);
    --c-3a4a5f: var(--rz-line-strong);
    --c-rgba-255-255-255-09: var(--rz-line-strong);

    /* 08 Text stark */
    --c-d7d7dd: var(--rz-ink);
    --c-d8d8de: var(--rz-ink);
    --c-e0e0e0: var(--rz-ink);
    --c-e5e5ea: var(--rz-ink);
    --c-e6e6e6: var(--rz-ink);
    --c-e6e6ea: var(--rz-ink);
    --c-ffffff: var(--rz-ink);

    /* 09 Text */
    --c-bbbbbb: var(--rz-ink-2);
    --c-c2c2c9: var(--rz-ink-2);
    --c-cccccc: var(--rz-ink-2);
    --c-dddddd: var(--rz-ink-2);

    /* 10 Text gedaempft */
    --c-555555: var(--rz-muted);
    --c-666666: var(--rz-muted);
    --c-6f6f78: var(--rz-muted);
    --c-777777: var(--rz-muted);
    --c-7a7a85: var(--rz-muted);
    --c-7c7c86: var(--rz-muted);
    --c-7f8fa6: var(--rz-muted);
    --c-888888: var(--rz-muted);
    --c-8a8a93: var(--rz-muted);
    --c-999999: var(--rz-muted);
    --c-9a9aa2: var(--rz-muted);
    --c-aaaaaa: var(--rz-muted);

    /* 11 Text schwach (jetzt wie gedaempft: --rz-faint lag unter 4.5:1) */
    --c-444444: var(--rz-muted);
    --c-595962: var(--rz-muted);
    --c-5a6578: var(--rz-muted);

    /* 12 Akzent Rot (Marke) */
    --c-8b0000: var(--rz-red-dark);
    --c-b30000: var(--rz-red-dark);
    --c-c20000: var(--rz-red-dark);
    --c-d40000: var(--rz-red);
    --c-e23b3b: var(--rz-red);
    --c-e60000: var(--rz-red);
    --c-ff3333: var(--rz-red-dark);
    --c-ff3b3b: var(--rz-red-dark);
    --c-ff6a6a: var(--rz-red);

    /* 13 Akzent Rot transparent */
    --c-rgba-212-0-0-0: color-mix(in srgb, var(--rz-red) 0%, transparent);
    --c-rgba-212-0-0-06: color-mix(in srgb, var(--rz-red) 6%, transparent);
    --c-rgba-212-0-0-16: color-mix(in srgb, var(--rz-red) 16%, transparent);
    --c-rgba-212-0-0-18: color-mix(in srgb, var(--rz-red) 18%, transparent);
    --c-rgba-212-0-0-22: color-mix(in srgb, var(--rz-red) 22%, transparent);
    --c-rgba-212-0-0-25: color-mix(in srgb, var(--rz-red) 25%, transparent);
    --c-rgba-212-0-0-3: color-mix(in srgb, var(--rz-red) 30%, transparent);
    --c-rgba-212-0-0-4: color-mix(in srgb, var(--rz-red) 40%, transparent);
    --c-rgba-212-0-0-45: color-mix(in srgb, var(--rz-red) 45%, transparent);
    --c-rgba-212-0-0-5: color-mix(in srgb, var(--rz-red) 50%, transparent);
    --c-rgba-212-0-0-55: color-mix(in srgb, var(--rz-red) 55%, transparent);
    --c-rgba-212-0-0-6: color-mix(in srgb, var(--rz-red) 60%, transparent);
    --c-rgba-230-0-0-7: color-mix(in srgb, var(--rz-red) 70%, transparent);
    --c-rgba-230-0-0-85: color-mix(in srgb, var(--rz-red) 85%, transparent);
    --c-rgba-255-51-51-6: color-mix(in srgb, var(--rz-red-dark) 60%, transparent);

    /* 14 Fokusring */
    --c-rgba-212-0-0-15: var(--rz-focus);

    /* 15 Glas / Tinte transparent */
    --c-rgba-100-100-100-12: color-mix(in srgb, var(--rz-muted) 8%, transparent);
    --c-rgba-17-17-17-85: color-mix(in srgb, var(--rz-surface) 90%, transparent);
    --c-rgba-255-255-255-018: color-mix(in srgb, var(--rz-ink) 3%, transparent);
    --c-rgba-255-255-255-025: color-mix(in srgb, var(--rz-ink) 4%, transparent);
    --c-rgba-255-255-255-04: color-mix(in srgb, var(--rz-ink) 4%, transparent);
    --c-rgba-255-255-255-045: color-mix(in srgb, var(--rz-ink) 4.5%, transparent);
    --c-rgba-255-255-255-05: color-mix(in srgb, var(--rz-ink) 5%, transparent);
    --c-rgba-255-255-255-06: color-mix(in srgb, var(--rz-ink) 6%, transparent);
    --c-rgba-255-255-255-08: color-mix(in srgb, var(--rz-ink) 8%, transparent);
    --c-rgba-255-255-255-085: color-mix(in srgb, var(--rz-ink) 8.5%, transparent);
    --c-rgba-255-255-255-35: rgba(255,255,255,.35);

    /* 16 Schatten */
    --c-rgba-0-0-0-4: rgba(29,29,27,.08);
    --c-rgba-0-0-0-45: rgba(29,29,27,.08);
    --c-rgba-0-0-0-5: rgba(29,29,27,.10);
    --c-rgba-0-0-0-6: rgba(29,29,27,.12);

    /* 17 Overlay */
    --c-rgba-0-0-0-72: var(--rz-overlay);
    --c-rgba-0-0-0-75: var(--rz-overlay);
    --c-rgba-0-0-0-78: var(--rz-overlay);

    /* 18 Positiv (Schrift -> --rz-green-text, Knopf/Diagramm -> --rz-green) */
    --c-27ae60: var(--rz-green-text);
    --c-2e9e5b: var(--rz-green);
    --c-2ecc71: var(--rz-green);
    --c-388e3c: var(--rz-green);
    --c-3fb96b: var(--rz-green-text);
    --c-43a047: var(--rz-green);
    --c-4caf50: var(--rz-green-text);
    --c-66bb6a: var(--rz-green-text);
    --c-7ee0a0: var(--rz-green-text);
    --c-7fe0b0: var(--rz-green-text);
    --c-96e6a8: var(--rz-green-text);

    /* 19 Positiv-Flaeche */
    --c-12351f: var(--rz-green-soft);
    --c-123a2c: var(--rz-green-soft);
    --c-rgba-34-197-94-08: color-mix(in srgb, var(--rz-green) 8%, transparent);
    --c-rgba-34-197-94-35: color-mix(in srgb, var(--rz-green) 35%, transparent);
    --c-rgba-76-175-80-08: color-mix(in srgb, var(--rz-green) 8%, transparent);
    --c-rgba-76-175-80-12: color-mix(in srgb, var(--rz-green) 12%, transparent);

    /* 20 Negativ / Gefahr */
    --c-aa3333: var(--rz-danger);
    --c-c0392b: var(--rz-danger);
    --c-dd4444: var(--rz-danger);
    --c-e53935: var(--rz-danger);
    --c-e74c3c: var(--rz-danger);
    --c-ff5a5a: var(--rz-danger);
    --c-ff6b6b: var(--rz-danger);
    --c-ff8a8a: var(--rz-danger);
    --c-ff9a9a: var(--rz-danger);

    /* 21 Negativ-Flaeche */
    --c-3a1515: var(--rz-danger-soft);
    --c-3a1a1a: var(--rz-danger-soft);
    --c-rgba-212-0-0-08: color-mix(in srgb, var(--rz-danger) 8%, transparent);
    --c-rgba-212-0-0-12: color-mix(in srgb, var(--rz-danger) 12%, transparent);

    /* 22 Warnung (Schrift -> --rz-warn-text, Knopf-Akzent -> --rz-warn) */
    --c-e0922b: var(--rz-warn);
    --c-e2b93b: var(--rz-warn-text);
    --c-e67e22: var(--rz-warn-text);
    --c-f1c40f: var(--rz-warn-text);
    --c-f39c12: var(--rz-warn-text);
    --c-ff9800: var(--rz-warn-text);
    --c-ffb74d: var(--rz-warn-text);
    --c-ffc7ae: var(--rz-warn-text);
    --c-ffd479: var(--rz-warn-text);

    /* 23 Warnung-Flaeche */
    --c-2a2412: var(--rz-warn-soft);
    --c-2a2420: var(--rz-warn-soft);
    --c-3a2e12: var(--rz-warn-soft);
    --c-4a3f1e: color-mix(in srgb, var(--rz-warn) 35%, transparent);
    --c-70402c: var(--rz-warn-soft);
    --c-rgba-255-152-0-15: color-mix(in srgb, var(--rz-warn) 15%, transparent);

    /* 24 Info / Diagramm blau */
    --c-0369a1: var(--rz-info);
    --c-2196f3: var(--rz-info);
    --c-229ed9: var(--rz-info);
    --c-2f5fb0: var(--rz-info);
    --c-2f80ed: var(--rz-info);
    --c-3498db: var(--rz-info);
    --c-4a9eff: var(--rz-info);
    --c-5dade2: var(--rz-info);
    --c-64b5f6: var(--rz-info);
    --c-6a8fb5: var(--rz-info);
    --c-7fb3ff: var(--rz-info);
    --c-8ab4dd: var(--rz-info);
    --c-aec7ff: var(--rz-info);

    /* 25 Info-Flaeche */
    --c-1a2a3c: var(--rz-info-soft);
    --c-1a3a5c: var(--rz-info-soft);
    --c-26303c: var(--rz-info-soft);
    --c-2a4a6c: color-mix(in srgb, var(--rz-info) 35%, transparent);
    --c-2c3e70: var(--rz-info-soft);
    --c-e0f2fe: var(--rz-info-soft);
    --c-rgba-33-150-243-15: color-mix(in srgb, var(--rz-info) 15%, transparent);

    /* 26 Lila (Admin/Neu, Diagramm) */
    --c-6c3a8b: var(--rz-violet);
    --c-9b59b6: var(--rz-violet);
    --c-af7ac5: var(--rz-violet);
    --c-c9b6ff: var(--rz-violet);
    --c-e6a6ff: var(--rz-violet);

    /* 27 Lila-Flaeche */
    --c-2a2438: var(--rz-violet-soft);
    --c-3a2438: var(--rz-violet-soft);

    /* 28 Petrol (Knopf-Akzent/Heatmap) */
    --c-14b8a6: var(--rz-teal);
    --c-16a085: var(--rz-teal);

    /* 29 Gold (Knopf-Akzent/Historie) */
    --c-8a6a1e: color-mix(in srgb, var(--rz-gold) 70%, var(--rz-ink-static));
    --c-c99a2e: var(--rz-gold);
    --c-f0b429: var(--rz-gold);

    /* 30 Maske (fest) */
    --c-000000: #000000;
}

/* 4. NEU dunkel: Shop-Tokens dunkel + Abweichungen einzelner --c-* Variablen */
[data-design="neu"][data-rz-theme="dark"] {
    --rz-red: #F51726;
    --rz-red-dark: #FF4250;
    --rz-red-soft: #3A1A1C;
    --rz-ink: #EDEAE4;
    --rz-ink-2: #CFCAC2;
    --rz-muted: #A39D95;
    --rz-line: rgba(255,255,255,.14);
    --rz-line-strong: rgba(255,255,255,.26);
    --rz-page: #1F1D1C;
    --rz-surface: #2A2827;
    --rz-surface-2: #332F2D;
    --rz-tile: #262322;
    --rz-sand: #322E2B;
    --rz-panel: #0E0D0C;
    --rz-bar: #000000;
    --rz-mix: #221F1E;
    --rz-field: var(--rz-surface-2);
    --rz-green: #4FD08A;
    --rz-info: #7FB2E5;
    --rz-warn: #F0A646;
    --rz-danger: #FF6B76;
    --rz-green-text: var(--rz-green);
    --rz-warn-text: var(--rz-warn);
    --rz-violet: #C3AEFF;
    --rz-teal: #3FC9B8;
    --rz-gold: #E3B54F;
    --rz-green-soft: #1B3326;
    --rz-info-soft: #1D2B3A;
    --rz-warn-soft: #3A2B14;
    --rz-danger-soft: #3D1C20;
    --rz-violet-soft: #2C2540;
    --rz-btn-border: var(--rz-line-strong);
    --rz-focus: rgba(245,23,38,.32);
    --rz-overlay: rgba(0,0,0,.72);
    --rz-hm-0: #E5484D;
    --rz-hm-1: #EE8A3C;
    --rz-hm-2: #F4D77A;  /* Stufen nach Helligkeit gestaffelt, Nachbarn >= 1.45:1 */
    --rz-hm-3: #7FC06A;
    --rz-hm-4: #2E9A62;
    --rz-hm-5: #1C7A70;
    --rz-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
    --rz-shadow-hover: 0 2px 6px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.5);
    --rz-shadow-modal: 0 24px 60px rgba(0,0,0,.5);

    /* Rollen, die im Dunkeln anders belegt werden */
    --c-1a1a1a: var(--rz-surface-2);  /* 04 Kachel / erhoehte Flaeche */
    --c-rgba-0-0-0-4: rgba(0,0,0,.4);  /* 16 Schatten */
    --c-rgba-0-0-0-45: rgba(0,0,0,.45);  /* 16 Schatten */
    --c-rgba-0-0-0-5: rgba(0,0,0,.5);  /* 16 Schatten */
    --c-rgba-0-0-0-6: rgba(0,0,0,.6);  /* 16 Schatten */
    --c-rgba-212-0-0-12: color-mix(in srgb, var(--rz-danger) 8%, transparent);  /* 21 Negativ-Flaeche: Badge-Schrift 4.46 -> 4.76:1 */
}

/* 5. Elemente nur fuer das neue Design */
[data-design="alt"] .rz-only,
:root:not([data-design]) .rz-only { display: none !important; }

/* =====================================================================
   6. KOMPONENTEN - NUR fuer das neue Design
   Die Datei wird VOR den <style>-Bloecken der Templates geladen. Damit die
   Regeln hier trotzdem gewinnen, beginnt jeder Selektor mit
   [data-design="neu"] (eine Attribut-Stufe mehr als im Original).
   Gegen Inline-style="" hilft nur !important - das steht nur dort, wo das
   Original Farbe/Form per style-Attribut setzt.
   Optik nach shop/scss/base.scss (Stellen jeweils angegeben).
   ===================================================================== */

/* --------------------------------------------------------------- Seite */
[data-design="neu"] { color-scheme: light; }
[data-design="neu"][data-rz-theme="dark"] { color-scheme: dark; }   /* base.scss:3014 */

[data-design="neu"] body {
    font-family: var(--f-body);
    background: var(--rz-page);
    color: var(--rz-ink);
    -webkit-font-smoothing: antialiased;                              /* base.scss:65 */
}
[data-design="neu"] ::selection { background: var(--rz-red); color: #fff; }
[data-design="neu"] a { text-underline-offset: .2em; }                /* base.scss:74 */

/* ------------------------------------------------------ Logo / Marke */
/* Die Flamme bleibt im alten Design, im neuen ersetzt sie das Logo (DESIGN.md 3 Logo). */
[data-design="neu"] .header-flame,
[data-design="neu"] .brand-flame { display: none; }
[data-design="neu"] .rz-logo { display: inline-block; height: 44px; width: auto; flex-shrink: 0; }
[data-design="neu"] .rz-logo--dunkel { display: none; }
[data-design="neu"][data-rz-theme="dark"] .rz-logo--hell { display: none; }
[data-design="neu"][data-rz-theme="dark"] .rz-logo--dunkel { display: inline-block; }

/* ---------------------------------------------------------- Ueberschriften
   Markenzeichen: Barlow Condensed 900 kursiv GROSS, letter-spacing -.005em,
   line-height .88 (base.scss:1443-1461). NICHT fuer Zahlen und Tabellen. */
[data-design="neu"] .header-title,
[data-design="neu"] .shop-title-area h2,
[data-design="neu"] #onlineHomePanel h2,
[data-design="neu"] .detail-title,
[data-design="neu"] .prognose-title,
[data-design="neu"] .sd-modal h3,
[data-design="neu"] .set-head h3,
[data-design="neu"] .chat-head h3,
[data-design="neu"] .tg-box h3,
[data-design="neu"] .brand h1,
[data-design="neu"] .brand-name,
[data-design="neu"] .section-title h2,
[data-design="neu"] .login-logo h1,
[data-design="neu"] .reveal li {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.005em;
    line-height: .88;
    padding-top: .1em;                                                /* Luft fuer Umlautpunkte, base.scss:1452-1461 */
}
[data-design="neu"] .header-title { font-size: 34px; }
[data-design="neu"] .shop-title-area h2,
[data-design="neu"] #onlineHomePanel h2 { font-size: 28px; }
[data-design="neu"] .detail-title { font-size: 30px; }
[data-design="neu"] .prognose-title { font-size: 30px; }
[data-design="neu"] .sd-modal h3,
[data-design="neu"] .set-head h3,
[data-design="neu"] .chat-head h3 { font-size: 24px; }
[data-design="neu"] .tg-box h3 { font-size: 18px; }
[data-design="neu"] .brand h1 { font-size: 36px; }
[data-design="neu"] .brand-name { font-size: 28px; }
[data-design="neu"] .section-title h2 { font-size: 24px; }
[data-design="neu"] .login-logo h1 { font-size: 30px; }
/* Zusatzangaben in Ueberschriften (z. B. "(JTL - REST-API)") bleiben Fliesstext */
[data-design="neu"] .shop-title-area h2 span,
[data-design="neu"] #onlineHomePanel h2 span,
[data-design="neu"] .detail-title span,
[data-design="neu"] .tg-box h3 span {
    font-family: var(--f-body);
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;                               /* Zahlen/Datum nie kursiv (DESIGN.md 3) */
}
/* Unter- und Abschnittstitel: Barlow Semi Condensed (DESIGN.md 3) */
[data-design="neu"] .header-subtitle,
[data-design="neu"] .shop-title-area .subtitle,
[data-design="neu"] .detail-subtitle,
[data-design="neu"] .prognose-subtitle,
[data-design="neu"] .set-sec-title,
[data-design="neu"] .sd-chart-title,
[data-design="neu"] .live-stats-label {
    font-family: var(--f-head);
}
[data-design="neu"] .header-subtitle { font-weight: 700; letter-spacing: .12em; }

/* ------------------------------------------------------------ Zahlen
   KPI-Werte Barlow Semi Condensed 700, tabular-nums, nie kursiv (DESIGN.md 3 Charakter) */
[data-design="neu"] .kpi-value,
[data-design="neu"] .live-time,
[data-design="neu"] .prognose-tag-value,
[data-design="neu"] .prognose-kpi-value,
[data-design="neu"] .article-trend-info-value,
[data-design="neu"] .sd-stat-value,
[data-design="neu"] .sd-za-netto,
[data-design="neu"] .sd-za-summary strong,
[data-design="neu"] .hm-row-sum,
[data-design="neu"] .yesterday-row strong,
[data-design="neu"] .prognose-today-values strong {
    font-family: var(--f-num);
    font-weight: 700;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
[data-design="neu"] .kpi-value { font-size: 24px; }
[data-design="neu"] .live-time { font-size: 34px; }

/* ------------------------------------------------------------ Kopfzeile
   Weisse Leiste wie .header-main im Shop (base.scss:123-126, 1902), oben ein
   roter Balken (DESIGN.md 3 Charakter). Im Dunkeln schwarz (base.scss:3017). */
[data-design="neu"] .header {
    background: var(--rz-bar);
    color: var(--rz-ink);                                             /* Original: color: white (index.html:19) */
    border-top: 4px solid var(--rz-red);
    border-bottom: 1px solid var(--rz-line);
    box-shadow: var(--rz-shadow);
    border-radius: 0 0 var(--rz-radius-lg) var(--rz-radius-lg);
}
[data-design="neu"] .header-title span { color: var(--rz-red); }
[data-design="neu"] .live-stats-label { opacity: 1; color: var(--rz-muted); font-weight: 700; }
/* Kopf-Links (Inline-Styles index.html:1112) als dunkle Pillen wie .header-cart-btn
   im Shop (base.scss:1919-1929, dunkel base.scss:3153-3154) */
[data-design="neu"] .header-top > div:last-child > a {
    border-radius: 999px !important;
    font-family: var(--f-head);
    font-weight: 700;
    padding: 5px 13px !important;
    background: var(--rz-panel) !important;
    color: #FFFFFF !important;
    transition: background-color .18s ease;
}
[data-design="neu"][data-rz-theme="dark"] .header-top > div:last-child > a {
    background: var(--rz-surface-2) !important;
    color: var(--rz-ink) !important;
}
[data-design="neu"] .header-top > div:last-child > a:hover,
[data-design="neu"][data-rz-theme="dark"] .header-top > div:last-child > a:hover {
    background: #E30613 !important;                                   /* weiss darauf 4.9:1 */
    color: #FFFFFF !important;
}
/* produkttests.html Kopf */
[data-design="neu"] .brand p { color: var(--rz-muted); }

/* ------------------------------------------- Mond-Knopf + "altes Design"
   wie .rz-theme-toggle im Shop (base.scss:3270-3288) */
[data-design="neu"] .rz-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rz-ink);
    cursor: pointer;
    vertical-align: middle;
}
[data-design="neu"] .rz-theme-toggle:hover { background: var(--rz-tile); }
[data-design="neu"] .rz-theme-toggle svg,
[data-design="neu"] .rz-theme-icon { width: 20px; height: 20px; }
[data-design="neu"] .rz-theme-icon--light { display: none; }
[data-design="neu"][data-rz-theme="dark"] .rz-theme-toggle .rz-theme-icon--dark { display: none; }
[data-design="neu"][data-rz-theme="dark"] .rz-theme-toggle .rz-theme-icon--light { display: inline; }
[data-design="neu"] .rz-design-link {
    font-family: var(--f-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--rz-muted);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}
[data-design="neu"] .rz-design-link:hover { color: var(--rz-red); }
[data-design="neu"] .rz-head-tools { display: inline-flex; align-items: center; gap: 8px; }

/* ----------------------------------------------------------- KPI-Kacheln */
[data-design="neu"] .kpi-card {
    background: var(--rz-tile);
    border: 1px solid var(--rz-line);
    border-left: 3px solid var(--rz-red);
    border-radius: var(--rz-radius);
    backdrop-filter: none;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
[data-design="neu"] .kpi-card:hover {
    border-color: var(--rz-line-strong);
    border-left-color: var(--rz-red);
    box-shadow: var(--rz-shadow-hover);
    transform: translateY(-2px);
}
/* Online-KPIs tragen inline 'box-shadow:inset 3px 0 0 blau' (index.html:1148-1149):
   statt Doppelstreifen nur der linke Rand, in Info-Blau */
[data-design="neu"] .kpi-card[style*="inset 3px"] { box-shadow: none !important; border-left-color: var(--rz-info); }
[data-design="neu"] .kpi-card[style*="inset 3px"]:hover { box-shadow: var(--rz-shadow-hover) !important; border-left-color: var(--rz-info); }
[data-design="neu"] .kpi-label,
[data-design="neu"] .article-trend-info-label,
[data-design="neu"] .sd-stat-label,
[data-design="neu"] .prognose-kpi-label,
[data-design="neu"] .prognose-tag-label {
    font-family: var(--f-body);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rz-muted);
}
[data-design="neu"] .kpi-sub,
[data-design="neu"] .kpi-pct { opacity: 1; color: var(--rz-muted); }
/* produkttests.html: KPI-Karten */
[data-design="neu"] .kpis .card { border-left: 3px solid var(--rz-red); }

/* ----------------------------------------------------------- Karten */
[data-design="neu"] .shop-card,
[data-design="neu"] .card,
[data-design="neu"] .login-container {
    background: var(--rz-surface);
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius-lg);
    box-shadow: var(--rz-shadow);
}
[data-design="neu"] .yesterday-row,
[data-design="neu"] .article-trend-info-card,
[data-design="neu"] .sd-stat,
[data-design="neu"] .sd-chart-wrap,
[data-design="neu"] .sd-za-wrap,
[data-design="neu"] .tg-box,
[data-design="neu"] .hm-legend,
[data-design="neu"] .detail-box {
    background: var(--rz-tile);
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius);
}
[data-design="neu"] .article-trend-chart-container,
[data-design="neu"] .hm-table-wrap {
    border-radius: var(--rz-radius);
    border-color: var(--rz-line);
}
[data-design="neu"] .yesterday-label,
[data-design="neu"] .yesterday-values span { opacity: 1; color: var(--rz-muted); }
[data-design="neu"] .yesterday-row strong { color: var(--rz-ink); }
[data-design="neu"] .set-form { background: var(--rz-tile); border-color: var(--rz-line); border-radius: var(--rz-radius); }

/* Prognose = dunkle Akzentkarte (--rz-panel), in beiden Modi dunkel.
   Die Kinder lesen --c-* Variablen; hier werden sie fuer den dunklen Grund
   neu belegt (Custom Properties erben in den Karten-Teilbaum). */
[data-design="neu"] .prognose-card {
    --c-0d0d0d: var(--rz-panel);
    --c-ffffff: #FFFFFF;
    --c-777777: #A39D95;
    --c-rgba-212-0-0-3: transparent;
    --c-rgba-212-0-0-06: rgba(255,255,255,.06);
    --c-rgba-212-0-0-15: rgba(255,255,255,.12);
    --c-rgba-255-255-255-06: rgba(255,255,255,.12);
    --c-rgba-255-255-255-05: rgba(255,255,255,.12);
    --c-rgba-0-0-0-3: rgba(255,255,255,.06);
    --c-rgba-0-0-0-5: rgba(0,0,0,.25);
    --rz-ink: #FFFFFF;
    --rz-muted: #A39D95;
    background: var(--rz-panel);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--rz-radius-lg);
    box-shadow: var(--rz-shadow);
}
[data-design="neu"] .prognose-kpi { backdrop-filter: none; border-radius: var(--rz-radius); }
[data-design="neu"] .prognose-tag-value { color: #FF4250; }
/* Original-Deckkraft (.5 / .3, index.html:627-632, 708-713) auf dunklem Grund zu schwach */
[data-design="neu"] .prognose-tag-label,
[data-design="neu"] .prognose-footer { opacity: 1; color: var(--rz-muted); }   /* #A39D95 auf #16110F: 7.0:1 */

/* --------------------------------------------------- Reiter als Pillen
   Segment-Umschalter .toggle-group/.toggle-btn (index.html:978-995) und
   Chips .tf2-chip (index.html:1430-1431). Aktiv = dunkle Pille wie der
   dunkle Shop-Knopf (DESIGN.md 3: #0E0D0C / weisse Schrift). */
[data-design="neu"] .toggle-group {
    background: var(--rz-tile);
    border: 1px solid var(--rz-line);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
[data-design="neu"] .toggle-btn {
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--rz-muted);
    background: transparent;
    border-radius: 999px;
    padding: 7px 16px;
}
[data-design="neu"] .toggle-btn:hover:not(.active) { background: var(--rz-surface); color: var(--rz-ink); }
[data-design="neu"] .toggle-btn.active {
    background: var(--rz-panel);
    color: #FFFFFF;
    box-shadow: none;
}
[data-design="neu"] .tf2-chip {
    border-radius: 999px;
    border: 1px solid var(--rz-line-strong);
    background: var(--rz-surface);
    color: var(--rz-ink-2);
    font-weight: 600;
}
[data-design="neu"] .tf2-chip.on { background: var(--rz-panel); border-color: var(--rz-panel); color: #FFFFFF; }
/* Dunkel: #0E0D0C hebt sich kaum von der Spur ab (1.24:1) -> erhoehte Flaeche mit
   hellem Ring, wie .page-item.active im Shop (base.scss:3203) */
[data-design="neu"][data-rz-theme="dark"] .toggle-btn.active {
    background: var(--rz-surface-2);
    color: var(--rz-ink);
    box-shadow: inset 0 0 0 1px var(--rz-line-strong);
}
[data-design="neu"][data-rz-theme="dark"] .tf2-chip.on {
    background: var(--rz-surface-2);
    border-color: var(--rz-ink-2);
    color: var(--rz-ink);
}
[data-design="neu"] .tl-toggle { border-radius: 999px; background: var(--rz-tile); color: var(--rz-ink-2); font-weight: 600; }

/* ------------------------------------------------------------ Tabellen
   Ruhig und dicht, Zahlen tabular-nums, keine Kursive. */
[data-design="neu"] .shop-table,
[data-design="neu"] .set-tbl,
[data-design="neu"] .hm-table,
[data-design="neu"] table {
    font-variant-numeric: tabular-nums;
    font-style: normal;
}
[data-design="neu"] .shop-table thead th,
[data-design="neu"] .set-tbl th,
[data-design="neu"] .card th {
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rz-muted);
    border-bottom: 1px solid var(--rz-line-strong);
}
[data-design="neu"] .shop-table thead th.sortable:hover { color: var(--rz-ink); }
[data-design="neu"] .shop-table thead th.active-sort { color: var(--rz-ink); }
[data-design="neu"] .shop-table tbody td {
    padding-top: 9px;
    padding-bottom: 9px;
    color: var(--rz-ink-2);
}
[data-design="neu"] .shop-table tbody tr { border-bottom: 1px solid var(--rz-line); }
[data-design="neu"] .shop-table tbody td.shop-name { color: var(--rz-ink); font-weight: 600; }
[data-design="neu"] .shop-table tfoot td {
    background: var(--rz-tile);
    border-top: 1px solid var(--rz-line-strong);
    color: var(--rz-ink);
}
[data-design="neu"] .shop-table td .rank { color: var(--rz-muted); }
/* Negative Werte in der Gefahr-Farbe, nicht im Marken-Rot */
[data-design="neu"] .shop-table tbody td.ergebnis-neg,
[data-design="neu"] .shop-table tfoot td.ergebnis-neg,
[data-design="neu"] .abc-c,
[data-design="neu"] .fehlmenge-cell,
[data-design="neu"] .bestand-crit,
[data-design="neu"] .r2-low,
[data-design="neu"] .trend-down,
[data-design="neu"] .bew-flop { color: var(--rz-danger); }
[data-design="neu"] .soll-row-clickable:hover { background: var(--rz-tile) !important; }

/* ------------------------------------------------------------ Knoepfe
   Umriss-Knopf wie im Shop (DESIGN.md 3: Barlow Condensed 800, Rundung 14px,
   2px Rand rgba(22,17,15,.16)); Hover dunkel (base.scss:86-91, 3053-3054).
   Das Icon behaelt seine --accent-Farbe (index.html:937-942). */
[data-design="neu"] .btn-green,
[data-design="neu"] .btn-excel,
[data-design="neu"] .btn-back,
[data-design="neu"] a.button,
[data-design="neu"] .section-title button {
    font-family: var(--f-display);
    font-weight: 800;
    font-style: normal;
    font-size: 15px;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--rz-ink);
    background: var(--rz-surface);
    border: 2px solid var(--rz-btn-border);
    border-radius: var(--rz-radius);
    padding: 8px 14px;
    box-shadow: none;
}
[data-design="neu"][data-rz-theme="dark"] .btn-green,
[data-design="neu"][data-rz-theme="dark"] .btn-excel,
[data-design="neu"][data-rz-theme="dark"] .btn-back,
[data-design="neu"][data-rz-theme="dark"] a.button,
[data-design="neu"][data-rz-theme="dark"] .section-title button { background: transparent; }
[data-design="neu"] .btn-green:hover,
[data-design="neu"] .btn-excel:hover,
[data-design="neu"] .btn-back:hover,
[data-design="neu"] a.button:hover,
[data-design="neu"] .section-title button:hover {
    background: var(--rz-panel);
    border-color: var(--rz-panel);
    color: #FFFFFF;
    box-shadow: none;
    transform: translateY(-1px);
    filter: none;
}
/* Vollfarbige Knoepfe (Modals, Telegram, Kosten) -> dunkler Shop-Knopf */
[data-design="neu"] .set-btn,
[data-design="neu"] .tg-btn-small,
[data-design="neu"] .tg-save-btn,
[data-design="neu"] .chat-dl,
[data-design="neu"] .chat-foot button,
[data-design="neu"] .detail-btn,
[data-design="neu"] #kostenSaveBtn {
    font-family: var(--f-display);
    font-weight: 800;
    letter-spacing: .01em;
    background: var(--rz-panel) !important;                          /* Inline-Hintergrund index.html:1603, 3705 */
    color: #FFFFFF !important;
    border: 1px solid transparent;
    border-radius: var(--rz-radius-sm);
}
[data-design="neu"] .set-btn.primary,
[data-design="neu"] .chat-foot button,
[data-design="neu"] #kostenSaveBtn { border-radius: var(--rz-radius); font-size: 15px; }
[data-design="neu"][data-rz-theme="dark"] .set-btn,
[data-design="neu"][data-rz-theme="dark"] .tg-btn-small,
[data-design="neu"][data-rz-theme="dark"] .tg-save-btn,
[data-design="neu"][data-rz-theme="dark"] .chat-dl,
[data-design="neu"][data-rz-theme="dark"] .chat-foot button,
[data-design="neu"][data-rz-theme="dark"] .detail-btn,
[data-design="neu"][data-rz-theme="dark"] #kostenSaveBtn { border-color: var(--rz-line-strong); }
[data-design="neu"] .set-btn.del,
[data-design="neu"] .tg-btn-small.danger { background: var(--rz-danger-bg) !important; }
[data-design="neu"] .tg-btn-small.warn { background: var(--rz-warn-bg) !important; }
/* Hauptaktion rot wie .btn-primary im Shop (base.scss:80-85, 1487-1494) */
[data-design="neu"] .btn-login,
[data-design="neu"] button.primary {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: .01em;
    background: var(--rz-red);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--rz-radius);
    box-shadow: none;
}
[data-design="neu"] .btn-login:hover,
[data-design="neu"] button.primary:hover { background: var(--rz-red-dark); box-shadow: none; }
[data-design="neu"][data-rz-theme="dark"] .btn-login:hover,
[data-design="neu"][data-rz-theme="dark"] button.primary:hover { background: #B8050F; }

/* ------------------------------------------------------ Badges als Pillen
   border-radius 999px, Gewicht 600 (overrides.scss:32-35, DESIGN.md 3) */
[data-design="neu"] .abc-badge,
[data-design="neu"] .trend-badge,
[data-design="neu"] .bewertung-badge,
[data-design="neu"] .region-badge,
[data-design="neu"] .hours-badge,
[data-design="neu"] .closed-badge,
[data-design="neu"] .hm-region,
[data-design="neu"] .tf2-badge,
[data-design="neu"] .set-badge,
[data-design="neu"] .pill {
    border-radius: 999px;
    font-family: var(--f-body);
    font-weight: 600;
    font-style: normal;
    padding: .2em .7em;
    letter-spacing: .01em;
    opacity: 1;
}
/* .abc-badge hat im Original nur Textfarbe -> Pillenflaeche aus der Textfarbe */
[data-design="neu"] .abc-badge { background: color-mix(in srgb, currentColor 8%, transparent); }   /* 12 % -> 8 %: abc-c dunkel 4.46 -> 4.8:1 */
/* Tint 8 % -> 5 %: gedaempfte Schrift darauf hell 4.8, dunkel 4.75:1 */
[data-design="neu"] .closed-badge { background: color-mix(in srgb, var(--rz-ink) 5%, transparent); }
/* Gruen auf Gruen-Flaeche als Schrift-Ton: Besetzung (besetzung.html:125, 135) und
   Produkttests (produkttests.html:397-398, dort 0,3,0 -> hier span.pill.good 0,3,1) */
[data-design="neu"] .bz-pill--ok,
[data-design="neu"] .bz-stamp--ja,
[data-design="neu"] span.pill.good { color: var(--rz-green-text); }
[data-design="neu"] .tg-code-chip { border-radius: var(--rz-radius-sm); font-family: var(--f-mono); background: var(--rz-info-soft); color: var(--rz-info); }

/* ------------------------------------------------------------ Eingabefelder */
[data-design="neu"] input[type="date"],
[data-design="neu"] #datePicker,
[data-design="neu"] #datePickerVon,
[data-design="neu"] #datePickerBis,
[data-design="neu"] #sollIstMonat,
[data-design="neu"] .search-bar,
[data-design="neu"] .trend-shop-select,
[data-design="neu"] .tg-kv input,
[data-design="neu"] .tg-kv select,
[data-design="neu"] .set-form input,
[data-design="neu"] .set-form select,
[data-design="neu"] .chat-foot textarea,
[data-design="neu"] .form-group input,
[data-design="neu"] .filters input,
[data-design="neu"] .filters select {
    font-family: var(--f-body);
    background: var(--rz-field);
    border: 1px solid var(--rz-line-strong);
    border-radius: var(--rz-radius-sm);
    color: var(--rz-ink);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
[data-design="neu"] .search-bar { border-radius: 999px; }
[data-design="neu"] input::placeholder,
[data-design="neu"] textarea::placeholder { color: var(--rz-muted); }   /* wie Shop dunkel (base.scss) */
[data-design="neu"] input:focus,
[data-design="neu"] select:focus,
[data-design="neu"] textarea:focus,
[data-design="neu"] #datePicker:focus,
[data-design="neu"] #datePickerVon:focus,
[data-design="neu"] #datePickerBis:focus {
    border-color: var(--rz-ink);                                      /* base.scss:96 */
    box-shadow: 0 0 0 .2rem var(--rz-focus);                          /* overrides.scss:21-22 */
    outline: none;
}
[data-design="neu"] select option { background: var(--rz-field); color: var(--rz-ink); }
/* Kalender-Symbol: im Original invert(0.6) fuer dunklen Grund (index.html:1007) */
[data-design="neu"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-design="neu"] #datePicker::-webkit-calendar-picker-indicator,
[data-design="neu"] #datePickerVon::-webkit-calendar-picker-indicator,
[data-design="neu"] #datePickerBis::-webkit-calendar-picker-indicator { filter: none; cursor: pointer; }
[data-design="neu"][data-rz-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-design="neu"][data-rz-theme="dark"] #datePicker::-webkit-calendar-picker-indicator,
[data-design="neu"][data-rz-theme="dark"] #datePickerVon::-webkit-calendar-picker-indicator,
[data-design="neu"][data-rz-theme="dark"] #datePickerBis::-webkit-calendar-picker-indicator { filter: invert(.85); }

/* ------------------------------------------------------------ Fokusring */
[data-design="neu"] a:focus-visible,
[data-design="neu"] button:focus-visible,
[data-design="neu"] [tabindex]:focus-visible,
[data-design="neu"] label:focus-within {
    outline: .2rem solid var(--rz-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ Modals */
[data-design="neu"] .sd-modal,
[data-design="neu"] .set-modal,
[data-design="neu"] .chat-modal,
[data-design="neu"] .modal-panel {
    background: var(--rz-surface);
    border: 1px solid var(--rz-line);
    border-radius: var(--rz-radius-lg);
    box-shadow: var(--rz-shadow-modal);
}
[data-design="neu"] .sd-modal-close,
[data-design="neu"] .set-head .set-close,
[data-design="neu"] .chat-head .chat-close { color: var(--rz-muted); border-radius: 50%; }
[data-design="neu"] .sd-modal-close:hover,
[data-design="neu"] .set-head .set-close:hover,
[data-design="neu"] .chat-head .chat-close:hover { color: var(--rz-ink); }
[data-design="neu"] .chat-msg { border-radius: var(--rz-radius); }
[data-design="neu"] .chat-msg.user { background: var(--rz-panel); color: #FFFFFF; border-bottom-right-radius: 4px; }
[data-design="neu"] .chat-msg.bot { background: var(--rz-tile); color: var(--rz-ink); border-bottom-left-radius: 4px; }
[data-design="neu"] .chat-msg.err { background: var(--rz-danger-soft); color: var(--rz-danger); }

/* ------------------------------------------------ Balken / Diagramm-Teile */
/* Beschriftung auf den Balken: im Hellen ohne dunklen Schlagschatten */
[data-design="neu"] .soll-progress-label,
[data-design="neu"] .sd-za-bar-label { text-shadow: none; color: var(--rz-ink); }
[data-design="neu"] .soll-progress { border-radius: 999px; }
[data-design="neu"] .soll-progress-bar { border-radius: 999px; }
[data-design="neu"] .prognose-bar-track,
[data-design="neu"] .prognose-bar-fill,
[data-design="neu"] .bar,
[data-design="neu"] .sd-za-bar-wrap,
[data-design="neu"] .sd-za-bar { border-radius: 999px; }

/* Heatmap: eigene Stufen, die sich hell wie dunkel voneinander abheben
   (im Original teilen sie Literale mit Knopf- und Statusfarben) */
[data-design="neu"] .hm-cell { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(29,29,27,.10); }   /* Kante fuer helle Stufen auf der Kachel */
[data-design="neu"] .hm-cell.r-90 { background: var(--rz-hm-0); }
[data-design="neu"] .hm-cell.r-70 { background: var(--rz-hm-1); }
[data-design="neu"] .hm-cell.r-50 { background: var(--rz-hm-2); }
[data-design="neu"] .hm-cell.r-30 { background: var(--rz-hm-3); }
[data-design="neu"] .hm-cell.r-10 { background: var(--rz-hm-4); }
[data-design="neu"] .hm-cell.r-0  { background: var(--rz-hm-5); }
[data-design="neu"] .hm-cell.future,
[data-design="neu"] .hm-cell.closed { background: var(--rz-line-strong); opacity: .5; }

/* Ladeanzeige */
[data-design="neu"] .spinner { border-color: var(--rz-line); border-top-color: var(--rz-red); }

/* ------------------------------------------------------------ Scrollbalken */
[data-design="neu"],
[data-design="neu"] * {
    scrollbar-width: thin;
    scrollbar-color: var(--rz-line-strong) transparent;
}
[data-design="neu"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-design="neu"] ::-webkit-scrollbar-track { background: transparent; }
[data-design="neu"] ::-webkit-scrollbar-thumb {
    background: var(--rz-line-strong);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
[data-design="neu"] ::-webkit-scrollbar-thumb:hover { background: var(--rz-muted); background-clip: padding-box; }

/* ------------------------------------------------------------ Anmeldung */
[data-design="neu"] .hero-lead { color: var(--rz-muted); }
[data-design="neu"] .brand-name span,
[data-design="neu"] .login-logo h1 span { color: var(--rz-red); }
[data-design="neu"] .login-container { backdrop-filter: none; }
[data-design="neu"] .error-msg { border-radius: var(--rz-radius-sm); }

/* ------------------------------------------------------------ Mobil */
@media (max-width: 768px) {
    [data-design="neu"] .header { border-radius: 0 0 var(--rz-radius) var(--rz-radius); }
    [data-design="neu"] .header-title { font-size: 28px; }
    [data-design="neu"] .shop-card { border-radius: var(--rz-radius); }
    [data-design="neu"] .kpi-value { font-size: 20px; }
    [data-design="neu"] .shop-title-area h2,
    [data-design="neu"] #onlineHomePanel h2,
    [data-design="neu"] .detail-title,
    [data-design="neu"] .prognose-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    [data-design="neu"] .kpi-card:hover,
    [data-design="neu"] .btn-green:hover,
    [data-design="neu"] .btn-excel:hover,
    [data-design="neu"] .btn-back:hover { transform: none; }
}