/* DATEI: signalkompass/dashboard/static/css/tokens.css
   BESCHREIBUNG:
     Zentrale Design-Tokens in drei Schichten (Design-System B-6) — Single Source
     of Truth fuer Farben/Themes. Von allen Templates per <link> eingebunden.

       SCHICHT 1  PRIMITIVE (--ref-*)  Rohpalette, theme-unabhaengig. Reine Farbwerte
                                       ohne Bedeutung; nur Schicht 2/3 verweisen darauf.
       SCHICHT 2  SEMANTIC             Bedeutung (--bg, --txt, --accent, --status-*).
                                       Zeigt auf Primitive; das Theme re-mappt HIER.
       SCHICHT 3  COMPONENT            Komponenten-Tokens (--btn-*, --badge-* ...).
                                       Zeigen auf Semantic; wo eine Komponente in Dark
                                       und Light eigenstaendig ist, re-mappt das Theme
                                       das Component-Token direkt auf ein Primitive.

     Dark = :root (Standard), Light = [data-theme="light"]. Ein neuer Skin = ein
     weiterer [data-theme="…"]-Block, der Semantic (+ abweichende Component) re-mappt.
     Token-NAMEN sind stabil (Komponenten-CSS/JS haengt daran); pixelgleich zu der
     zuvor flachen Fassung (verifiziert). Siehe docs/rules/designsystem.md. */

/* ===== SCHICHT 1 — PRIMITIVE / REF-TOKENS (Rohpalette, theme-unabhaengig) ===== */
:root {
  /* amber */
  --ref-amber-25: #5c4a22;
  --ref-amber-53: #d2b13a;
  --ref-amber-56: #fbbf24;
  --ref-amber-65: #fcd34d;
  --ref-amber-77: #fde68a;
  --ref-amber-89: #fef3c7;
  --ref-amber-96: #fffbeb;
  /* blue */
  --ref-blue-15: #102a3a;
  --ref-blue-22: #22344d;
  --ref-blue-25: #1d4a63;
  --ref-blue-48: #1d4ed8;
  --ref-blue-49: #3a7bbf;
  --ref-blue-53: #2563eb;
  --ref-blue-60: #3b82f6;
  --ref-blue-64: #4f8bf9;
  --ref-blue-68: #5ec1ff;
  --ref-blue-68b: #60a5fa;
  --ref-blue-72: #7aa2f7;
  --ref-blue-78: #93c5fd;
  --ref-blue-83: #bfd1e7;
  --ref-blue-87: #cfe0ee;
  --ref-blue-93: #dbeafe;
  /* gray */
  --ref-gray-00: #000000;
  --ref-gray-13: #222222;
  --ref-gray-33: #555555;
  --ref-gray-96: #f1f5f9;
  --ref-gray-98: #f8fafc;
  --ref-gray-100: #ffffff;
  /* green */
  --ref-green-14: #10391f;
  --ref-green-19: #154a28;
  --ref-green-22: #1c5233;
  --ref-green-22b: #234e30;
  --ref-green-27: #1f6b3d;
  --ref-green-29: #15803d;
  --ref-green-36: #16a34a;
  --ref-green-39: #10b981;
  --ref-green-40: #2e9e57;
  --ref-green-52: #34d399;
  --ref-green-58: #4ade80;
  --ref-green-62: #5ee08a;
  --ref-green-69: #7fe0a0;
  --ref-green-73: #86efac;
  --ref-green-85: #bbf7d0;
  --ref-green-93: #dcfce7;
  /* orange */
  --ref-orange-15: #3a2410;
  --ref-orange-15b: #3a2a10;
  --ref-orange-26: #6b4a18;
  --ref-orange-31: #92400e;
  --ref-orange-37: #b45309;
  --ref-orange-40: #c2410c;
  --ref-orange-44: #d97706;
  --ref-orange-50: #f59e0b;
  --ref-orange-65: #ff9d4e;
  --ref-orange-68: #ffc05e;
  --ref-orange-77: #ffd58b;
  --ref-orange-92: #ffedd5;
  /* red */
  --ref-red-24: #5a2020;
  --ref-red-42: #b91c1c;
  --ref-red-45: #a8423f;
  --ref-red-51: #dc2626;
  --ref-red-53: #c0504e;
  --ref-red-60: #ef4444;
  --ref-red-71: #f87171;
  --ref-red-74: #ff7a7a;
  --ref-red-89: #fecaca;
  --ref-red-94: #fee2e2;
  /* pink (Sekundaer-Akzent fuer Strategie-Visuals; bewusst NICHT in der Signal-Ampel belegt) */
  --ref-pink-45: #db2777;
  --ref-pink-66: #e879f9;
  /* slate */
  --ref-slate-07: #0b0f19;
  --ref-slate-08: #10151b;
  --ref-slate-09: #0e1422;
  --ref-slate-10: #121821;
  --ref-slate-10b: #221a10;
  --ref-slate-11: #0f172a;
  --ref-slate-11b: #141a22;
  --ref-slate-12: #131a2a;
  --ref-slate-12b: #161d26;
  --ref-slate-12c: #2b2112;
  --ref-slate-14: #1c2a1f;
  --ref-slate-15: #182235;
  --ref-slate-15b: #1c3320;
  --ref-slate-15c: #3a1414;
  --ref-slate-16: #15243d;
  --ref-slate-16b: #1b2a38;
  --ref-slate-16c: #1d2733;
  --ref-slate-16d: #23292f;
  --ref-slate-17: #1c263b;
  --ref-slate-17b: #1e293b;
  --ref-slate-18: #1b2a40;
  --ref-slate-19: #23303d;
  --ref-slate-20: #273142;
  --ref-slate-21: #243147;
  --ref-slate-24: #2c3e4f;
  --ref-slate-26: #2c5a3a;
  --ref-slate-27: #334155;
  --ref-slate-27b: #3a4350;
  --ref-slate-28: #33405a;
  --ref-slate-35: #475569;
  --ref-slate-46: #6b7681;
  --ref-slate-47: #64748b;
  --ref-slate-60: #8d99a5;
  --ref-slate-65: #94a3b8;
  --ref-slate-68: #9fb0be;
  --ref-slate-77: #b7c4d4;
  --ref-slate-84: #cbd5e1;
  --ref-slate-91: #e2e8f0;
  /* sepia (warmes Lese-/Papier-Theme; Skin [data-theme="sepia"]) */
  --ref-sepia-bg: #ece0c8;          --ref-sepia-bg-rgb: 236,224,200;
  --ref-sepia-panel: #f6efdf;       --ref-sepia-panel-rgb: 246,239,223;
  --ref-sepia-panel-hover: #e6d9bf;
  --ref-sepia-surface: #f0e8d5;
  --ref-sepia-field: #faf4e7;
  --ref-sepia-line: #d8c7a3;        --ref-sepia-line-rgb: 216,199,163;
  --ref-sepia-line-soft: #e3d6b8;
  --ref-sepia-txt: #40331f;         --ref-sepia-txt-rgb: 64,51,31;
  --ref-sepia-mut: #8a7a5a;
  --ref-sepia-accent: #9c5a2b;      --ref-sepia-accent-rgb: 156,90,43;
  --ref-sepia-accent-hover: #82491f;
  /* aktienampel — warmes Individualdesign (Skin [data-design="aktienampel"]) */
  /* hell (Pergament) */
  --ref-ampel-bg: #f5f1e9;          --ref-ampel-bg-rgb: 245,241,233;
  --ref-ampel-panel: #ffffff;       --ref-ampel-panel-rgb: 255,255,255;
  --ref-ampel-panel-hover: #efe9dc;
  --ref-ampel-surface: #f1ebde;
  --ref-ampel-field: #fcfaf4;
  --ref-ampel-line: #e0d6c2;        --ref-ampel-line-rgb: 224,214,194;
  --ref-ampel-line-soft: #ece4d5;
  --ref-ampel-txt: #221a15;         --ref-ampel-txt-rgb: 34,26,21;
  --ref-ampel-mut: #6b5d52;
  --ref-ampel-accent: #43352e;      --ref-ampel-accent-rgb: 67,53,46;
  --ref-ampel-accent-hover: #2f251f;
  --ref-ampel-on-accent: #f7f1e5;
  --ref-ampel-gold: #d9a92e;        --ref-ampel-gold-rgb: 217,169,46;
  /* dunkel (Espresso) */
  --ref-ampeld-bg: #271e18;         --ref-ampeld-bg-rgb: 39,30,24;
  --ref-ampeld-panel: #342a20;      --ref-ampeld-panel-rgb: 52,42,32;
  --ref-ampeld-panel-hover: #42352c;
  --ref-ampeld-surface: #2e241c;
  --ref-ampeld-field: #2b211a;
  --ref-ampeld-line: #4a3d31;       --ref-ampeld-line-rgb: 74,61,49;
  --ref-ampeld-line-soft: #3c3127;
  --ref-ampeld-txt: #f2ecdc;        --ref-ampeld-txt-rgb: 242,236,220;
  --ref-ampeld-mut: #b5a697;
  --ref-ampeld-accent: #c8975a;     --ref-ampeld-accent-rgb: 200,151,90;
  --ref-ampeld-accent-hover: #d8a968;
  --ref-ampeld-on-accent: #241a14;
  --ref-ampeld-gold: #f6dd7a;       --ref-ampeld-gold-rgb: 246,221,122;

  /* --- Aktienampel-Skin: Delta-Primitives lt. Spec + Feedback-Iteration 2
     (2026-07-10: untere Bereiche/Tabellen behalten die Original-Hintergründe; NUR die Kopf-Zone
     bekommt einen Mittelwert-Ton alt<->Spec) + warme Feedback-Palette (docs/aktienampel-design-spec.md
     §4.4). Der bisherige Skin bleibt als Admin-Vergleich bestehen. --- */
  --ref-ampeln-surface: #ede6d7;    /* Kopf-Zone hell: Mittel aus alt #f1ebde und Spec #e9e1cf */
  --ref-ampeln-warn-bg: #f6ead2;    --ref-ampeln-warn-border: #d9b877;  --ref-ampeln-warn-txt: #8a6420;
  --ref-ampeln-ok-bg: #e6eedd;      --ref-ampeln-ok-bg-stark: #d5e4c8;
  --ref-ampeln-ok-border: #a9c78f;  --ref-ampeln-ok-txt: #3f6b31;
  --ref-ampeln-info-bg: #eae7d9;    --ref-ampeln-info-border: #b8ac8d;
  --ref-ampeln-danger-bg: #f3ded6;  --ref-ampeln-danger-border: #d99a85; --ref-ampeln-danger-hover: #c24a33;
  --ref-ampelnd-surface: #2d231a;   /* Kopf-Zone dunkel: Mittel aus alt #2e241c und Spec #2b2118 */
  --ref-ampelnd-warn-bg: #3d2f1a;   --ref-ampelnd-warn-border: #8a6a2f;  --ref-ampelnd-warn-txt: #e8c477;
  --ref-ampelnd-ok-bg: #2c3823;     --ref-ampelnd-ok-bg-stark: #37452c;
  --ref-ampelnd-ok-border: #5c7a48; --ref-ampelnd-ok-txt: #a8cf8e;
  --ref-ampelnd-info-bg: #332e22;   --ref-ampelnd-info-border: #6e6248;
  --ref-ampelnd-danger-bg: #3f261d; --ref-ampelnd-danger-border: #96543f; --ref-ampelnd-danger-hover: #e07a5f;
  /* Mesh-Grund (F-84): zwei zusätzliche Rohtöne für die weichen Farbwolken hinter dem Dashboard.
     Alle übrigen Wolken mischen bereits vorhandene Primitives (Gold, Bernstein, Pergament, Espresso). */
  --ref-ampeln-mesh-cool-rgb: 158,156,164;   /* kühler Grauschleier — gibt dem Pergament unten Tiefe */
  --ref-ampelnd-mesh-deep-rgb: 20,14,10;     /* dunkler Kern — schattet den Espresso-Grund ab */
  /* Kühlgrau als Gegenpol zur durchgehend warmen Skin-Palette — bewusst EIN Wert für BEIDE Themes.
     Nötig, weil zwei warme Töne nebeneinander verschmelzen: Im Track-Record-Chart lagen Strategie
     (--accent) und Benchmark (--mut) in derselben Familie und waren kaum trennbar (Espresso #c8975a
     vs. #b5a697: 3° Farbton-, 1,10:1 Helligkeitsabstand). Die kühle Note ist im Skin bereits
     etabliert (Mesh-Grauschleier), hier nur als Linie statt als Wolke.
     Der Wert liegt mittig, trägt daher auf beiden Glasflächen und bleibt in beiden Themes DUNKLER
     als die Strategie-Linie -> die Benchmark tritt zurück, statt sie zu überstrahlen. Gemessen
     (Kontrast, sRGB): Pergament 3,84 gegen die Karte / 2,79 gegen die Strategie; Espresso 3,09 /
     1,61 — beide über der 3:1-Schwelle für grafische Objekte gegen ihren Grund.
     NICHT heller wählen: #9e9ca4 träfe zwar den Mesh-Ton exakt, käme im Espresso aber auf 1,04:1
     gegen das Gold — die Trennung hinge dann allein am Farbton und bräche auf schlechten Displays
     oder bei Farbfehlsichtigkeit zusammen. */
  --ref-ampel-cool: #7c7a86;

  /* RGB-Tripel fuer rgba()-Nutzung (transparente Component-Tokens) */
  --ref-amber-56-rgb: 251,191,36;
  --ref-amber-77-rgb: 253,230,138;
  --ref-blue-53-rgb: 37,99,235;
  --ref-blue-60-rgb: 59,130,246;
  --ref-blue-68-rgb: 94,193,255;
  --ref-blue-83-rgb: 191,209,231;
  --ref-gray-00-rgb: 0,0,0;
  --ref-gray-100-rgb: 255,255,255;
  --ref-gray-98-rgb: 248,250,252;
  --ref-green-36-rgb: 22,163,74;
  --ref-green-39-rgb: 16,185,129;
  --ref-orange-44-rgb: 217,119,6;
  --ref-orange-50-rgb: 245,158,11;
  --ref-orange-68-rgb: 255,192,94;
  --ref-red-51-rgb: 220,38,38;
  --ref-red-60-rgb: 239,68,68;
  --ref-slate-11-rgb: 15,23,42;
  --ref-slate-12-rgb: 19,26,42;
  --ref-slate-17-rgb: 28,38,59;
  --ref-slate-35-rgb: 71,85,105;
  --ref-slate-47-rgb: 100,116,139;
  --ref-slate-65-rgb: 148,163,184;
  --ref-slate-84-rgb: 203,213,225;
  --ref-slate-91-rgb: 226,232,240;
}

/* ===== FOUNDATION-TOKENS (theme-unabhaengige Typo-/Spacing-/Motion-Basis) ===== */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 11.5px;
  --font-size-sm: 12.5px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-tight: 1.2;
  --line-normal: 1.45;
  --line-relaxed: 1.6;

  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 22px;
  --space-12: 24px;
  --space-14: 28px;
  --space-15: 30px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --space-40: 80px;
  --space-48: 96px;

  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-pill: 999px;

  /* Semantische Radiusleiter für verschachtelte Flächen: Jede tiefere Ebene wird kleiner.
     Sonderformen wie Modals, Pills und interaktive Tabellenzeilen behalten eigene Rollen. */
  --radius-surface-outer: var(--radius-xl);
  --radius-surface-inner: var(--radius-lg);
  --radius-surface-deep: var(--radius-md);

  --duration-fast: .12s;
  --duration-normal: .15s;
  --duration-slow: .25s;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-pop: cubic-bezier(.175,.885,.32,1.275);

  --z-popover: 50;
  --z-feedback: 900;
  --z-feedback-panel: 910;
  --z-modal: 1000;
  --z-toast: 1100;       /* fluechtige Toasts: ueber Modals, unter Screenshot-Overlay */
  --z-screenshot: 2000;
  --z-floating: 9999;
  /* Dashboard-Organismus-Ebenen (Haupt-Stacking-Kontext; bestehende Werte pixelgleich benannt) */
  --z-table-cell-pinned: 20;
  --z-table-header: 30;
  --z-table-header-pinned: 40;
  --z-sticky-detail: 45;
  --z-menu: 60;
  --z-drag-hint: 99;
  --z-drag: 100;
  --z-popover-fixed: 9999;
}

/* ===== SCHICHT 2 — SEMANTIC (Bedeutung; Theme re-mappt hier) ===== */
:root {
  --bg: var(--ref-slate-07);
  --panel: var(--ref-slate-12);
  --panel-hover: var(--ref-slate-17);
  --line: var(--ref-slate-21);
  --txt: var(--ref-gray-96);
  --mut: var(--ref-slate-65);
  --accent: var(--ref-blue-60);
  --accent-hover: var(--ref-blue-53);
  --on-accent: var(--ref-gray-100);
  --emphasis-gold: var(--ref-amber-56);
  --on-emphasis-gold: var(--ref-slate-11);
  --white: var(--ref-gray-100);
  --black: var(--ref-gray-00);
  --status-kaufen: var(--ref-green-62);
  --status-verkaufen: var(--ref-red-74);
  --status-halten: var(--ref-blue-68);
  --status-warnung: var(--ref-orange-68);
  --status-neutral: var(--ref-slate-46);
  --status-beobachten: var(--ref-slate-68);
}

/* ===== SCHICHT 3 — COMPONENT (zeigt auf Semantic, sonst Primitive) ===== */
:root {
  --accent-hell: var(--ref-blue-64);
  --accent2: var(--accent-hover);
  --archiv-bg: var(--ref-slate-11b);
  --badge-beobachten-bg: rgba(var(--ref-slate-65-rgb), 0.15);
  --badge-beobachten-border: rgba(var(--ref-slate-65-rgb), 0.2);
  --badge-folgt-border: rgba(var(--ref-amber-56-rgb), 0.4);
  --badge-folgt-txt: var(--ref-amber-56);
  --badge-halten-bg: rgba(var(--ref-blue-60-rgb), 0.15);
  --badge-halten-border: rgba(var(--ref-blue-60-rgb), 0.2);
  --badge-halten-txt: var(--ref-blue-68b);
  --badge-kaufen-bg: rgba(var(--ref-green-39-rgb), 0.15);
  --badge-kaufen-border: rgba(var(--ref-green-39-rgb), 0.2);
  --badge-kaufen-txt: var(--ref-green-52);
  --badge-ki-signal-bg: rgba(var(--ref-orange-50-rgb), 0.15);
  --badge-ki-signal-border: rgba(var(--ref-orange-50-rgb), 0.35);
  --badge-ki-signal-txt: var(--ref-amber-56);
  --badge-meiden-bg: rgba(var(--ref-slate-35-rgb), 0.15);
  /* Roter Rand als Wiedererkennung zum Meiden-PUNKT im Chart, der seine Signalfarbe ebenfalls im
     Umriss traegt (Flaeche bleibt neutral). Bewusst die volle Signalfarbe statt der gedaempften
     rgba-Variante der anderen Badge-Raender — die Linienstaerke bleibt bei 1 px (`.ui-badge`), der
     2-px-Ring des Chart-Punkts wird NICHT uebernommen. Semantic-Token, folgt damit jedem Theme und
     Skin (`--status-verkaufen` ist in allen Theme-Bloecken gesetzt). */
  --badge-meiden-border: var(--status-verkaufen);
  --badge-meiden-txt: var(--ref-slate-47);
  --badge-reduzieren-bg: rgba(var(--ref-orange-50-rgb), 0.15);
  --badge-reduzieren-border: rgba(var(--ref-orange-50-rgb), 0.2);
  --badge-reduzieren-txt: var(--ref-amber-56);
  --badge-status-bg: rgba(var(--ref-slate-65-rgb), 0.14);
  --badge-status-border: rgba(var(--ref-slate-65-rgb), 0.3);
  --badge-status-txt: var(--ref-slate-68);
  --badge-verkaufen-bg: rgba(var(--ref-red-60-rgb), 0.15);
  --badge-verkaufen-border: rgba(var(--ref-red-60-rgb), 0.2);
  --badge-verkaufen-txt: var(--ref-red-71);
  --auth-card-top-bg: linear-gradient(90deg, var(--accent), var(--badge-halten-txt), var(--accent2));
  --auth-page-bg: radial-gradient(900px 500px at 50% -10%, rgba(var(--ref-blue-60-rgb), .12), transparent 60%), var(--bg);
  --bar-bg: var(--ref-slate-12b);
  --bg-darker: var(--ref-slate-08);
  --bg-lighter: var(--ref-slate-17b);
  --block-alt-bg: var(--ref-slate-16c);
  --block-bg: var(--ref-slate-16b);
  --border-light: rgba(var(--ref-gray-100-rgb), 0.05);
  --border-lighter: rgba(var(--ref-gray-100-rgb), 0.02);
  --btn-bg: var(--ref-slate-19);
  --btn-bg-hover: var(--ref-slate-24);
  --btn-grau-bg: var(--ref-slate-28);
  --btn-haupt-bg: var(--accent);
  --btn-haupt-hover: var(--accent-hover);
  --btn-haupt-txt: var(--on-accent);
  --btn-gold-bg: var(--emphasis-gold);
  --btn-gold-hover: var(--ref-amber-65);
  --btn-gold-txt: var(--on-emphasis-gold);
  --btn-txt: var(--ref-blue-87);
  --chart-mid: var(--ref-amber-53);
  --chart-neg: var(--ref-red-53);
  --chart-neutral: var(--ref-blue-49);
  --chart-pos: var(--ref-green-40);
  --chart-event-outline: var(--ref-gray-100);
  /* Track-Record-Sparklines (Landingpage): Strategie gegen passives Vergleichsdepot. Eigene
     Component-Tokens, damit Linie UND Legenden-Swatch aus EINER Quelle kommen — vorher standen die
     Werte doppelt in landing.css und konnten auseinanderlaufen. Bewusst KEINE Ampelfarben: grün/rot
     sind der Signal-Semantik vorbehalten, hier geht es um Serien-Unterscheidung.
     Basis bildet den Bestand 1:1 ab (--accent/--mut) und resolvt je Theme -> Standard-Skin
     unverändert. Der Aktienampel-Skin überschreibt nur die Benchmark-Linie (siehe dort). */
  --track-line-eq: var(--accent);
  --track-line-bench: var(--mut);
  --signal-card-kachel-hover-bg: var(--ref-gray-100);
  --signal-card-kachel-hover-txt: var(--ref-ampel-txt);
  --signal-card-kachel-hover-mut: var(--ref-ampel-mut);
  --fehler-border: var(--ref-red-24);
  --field-bg: var(--ref-slate-09);
  --field-placeholder: var(--ref-slate-60);
  --floating-bar-bg: var(--ref-gray-100);
  --floating-bar-border: var(--ref-slate-84);
  --floating-bar-btn-hover-bg: rgba(var(--ref-gray-00-rgb), 0.06);
  --floating-bar-btn-txt: var(--ref-slate-27);
  --floating-bar-count-txt: var(--ref-blue-53);
  --floating-bar-danger-hover-bg: rgba(var(--ref-red-51-rgb), 0.08);
  --floating-bar-danger-txt: var(--ref-red-51);
  --floating-bar-divider: var(--ref-slate-91);
  --floating-bar-icon: var(--ref-slate-35);
  --floating-bar-txt: var(--ref-slate-17b);
  --focus-ring: 0 0 0 3px rgba(var(--ref-blue-60-rgb), .22);
  --gefahr-hover-bg: var(--ref-red-45);
  --gflag-info-bg: var(--ref-blue-15);
  --gflag-verkaufen-bg: var(--ref-slate-15c);
  --gflag-warnung-bg: var(--ref-orange-15b);
  --info-border: var(--ref-blue-25);
  --meta-txt: var(--ref-slate-60);
  --neu-row-bg: var(--ref-slate-16);
  --neu-tag-txt: var(--ref-blue-72);
  --notification-bg: var(--status-verkaufen);
  --notification-txt: var(--on-accent);
  --notification-size: 22px;
  --notification-size-sm: 18px;
  --notification-dot-size: 10px;
  --notification-shadow: 0 6px 14px rgba(var(--ref-red-60-rgb), .32);
  --ok-bg: var(--ref-green-14);
  --ok-bg-stark: var(--ref-green-19);
  --ok-border: var(--ref-green-22);
  --ok-border-stark: var(--ref-green-27);
  --ok-treffer-bg: var(--ref-slate-15b);
  --overview-bg: var(--ref-blue-22);
  --overview-line: rgba(var(--ref-blue-83-rgb), 0.26);
  --overview-mut: var(--ref-slate-77);
  --overview-panel: var(--ref-slate-15);
  --overview-panel-soft: var(--ref-slate-18);
  --overview-subtle: var(--ref-slate-68);
  --modal-bg: var(--panel);
  --modal-border: var(--line);
  --modal-radius: var(--radius-xl);
  --modal-shadow: 0 20px 60px var(--shadow-strong);
  --modal-width-sm: 420px;
  --modal-width-md: 520px;
  --modal-width-lg: 720px;
  --modal-width-xl: 900px;
  --modal-max-height: calc(100vh - 80px);
  --modal-body-max-height: calc(100vh - 190px);
  --feature-header-bg: var(--overview-panel);
  --feature-header-border: var(--overview-line);
  --feature-header-accent: var(--emphasis-gold);
  --nav-active-bg: var(--txt);
  --nav-active-text: var(--bg);
  --nav-action-hover: var(--panel-hover);
  --nav-border: var(--line);
  --nav-surface: var(--panel);
  --nav-scroll-overlay: var(--panel);
  --nav-scroll-overlay-hover: var(--panel-hover);
  --nav-surface-hover: var(--panel-hover);
  --nav-text: var(--txt);
  --overlay-bg: rgba(var(--ref-gray-00-rgb), .55);
  --pkt-leer: var(--ref-slate-27b);
  --pop-bg: var(--ref-gray-13);
  --pop-border: var(--ref-gray-33);
  --pop-txt-hell: var(--ref-gray-98);
  --reakt-bg: var(--ref-slate-14);
  --reakt-bg-hover: var(--ref-green-22b);
  --reakt-border: var(--ref-slate-26);
  --reakt-txt: var(--ref-green-69);
  --selected-bg: rgba(var(--ref-blue-60-rgb), 0.12);
  --selected-bg-hover: rgba(var(--ref-blue-60-rgb), 0.18);
  --selected-sticky-bg: rgba(var(--ref-slate-12-rgb), 0.95);
  --shadow-accent: 0 4px 12px rgba(var(--ref-blue-60-rgb), .25);
  --shadow-accent-hover: 0 6px 16px rgba(var(--ref-blue-60-rgb), .4);
  --shadow-auth: 0 20px 60px rgba(var(--ref-gray-00-rgb), .45);
  --shadow-card: 0 4px 6px rgba(var(--ref-gray-00-rgb), .15);
  --shadow-control-inset: inset 0 1px 3px rgba(var(--ref-gray-00-rgb), .35);
  --shadow-floating: 0 -2px 16px rgba(var(--ref-gray-00-rgb), .18), 0 4px 24px rgba(var(--ref-gray-00-rgb), .22);
  --shadow-menu: rgba(var(--ref-gray-00-rgb), 0.45);
  --shadow-selected-sticky: -8px 0 12px -6px rgba(var(--ref-blue-60-rgb), 0.15);
  --shadow-strong: rgba(var(--ref-gray-00-rgb), 0.8);
  --status-soft-info-bg: rgba(var(--ref-blue-60-rgb), .06);
  --status-soft-warn-bg: rgba(var(--ref-orange-50-rgb), .08);
  --tab-active-bg: rgba(var(--ref-blue-60-rgb), 0.05);
  --slate-bullet: var(--ref-slate-84);
  --slate-hover: var(--ref-slate-27);
  --slate-line: var(--ref-slate-35);
  --switch-bg: var(--ref-slate-21);
  --switch-bullet: var(--ref-slate-65);
  --table-detail-bg: var(--ref-slate-10);
  --tag-bg: var(--ref-slate-16d);
  --th-bg: rgba(var(--ref-slate-12-rgb), 0.85);
  --th-bg-hover: rgba(var(--ref-slate-17-rgb), 0.95);
  --warn-aktion-bg: var(--ref-slate-12c);
  --warn-aktion-border: var(--ref-orange-26);
  --warn-aktion-txt: var(--ref-orange-77);
  --warn-bg: var(--ref-slate-10b);
  --warn-border: var(--ref-amber-25);
  --warn-kpi-txt: var(--ref-orange-50);
  --hinweis-txt: var(--ref-amber-56);
  --warn-vix-bg: var(--ref-orange-15);
  --warn-vix-txt: var(--ref-orange-65);
  --tacho-active-extreme-fear-bg: var(--status-verkaufen);
  --tacho-segment-extreme-fear-bg: var(--gflag-verkaufen-bg);
  /* Aktiv-Segment-Fuellungen des Marktstimmungs-Tachos (weisse Segment-Schrift -> Fuellung muss
     dunkel genug sein). Standard-Skins mappen auf die bisherigen Werte (kein sichtbarer Wechsel);
     die Aktienampel-Skins ueberschreiben mit warmen Dunkeltoenen (s. dort). */
  --tacho-fill-fear2: var(--tacho-segment-extreme-fear-bg);
  --tacho-fill-fear: var(--warn-vix-bg);
  --tacho-fill-greed: var(--gflag-info-bg);
  --tacho-fill-greed2: var(--ok-bg);
  /* Strategie-Visuals (B-6): Blau primaer, Pink sekundaer; Marker nutzen die Signal-Ampel-Tokens */
  --viz-line: var(--accent);
  --viz-accent: var(--ref-pink-66);
  --viz-grid: var(--line);
  --viz-muted: var(--mut);
  /* ===== B-6 Restschuld (Finale): KPI/Metric/Popover/Callout ===== */
  --chart-crosshair: rgba(var(--ref-gray-100-rgb), 0.4);
  --logo-filter: none;  /* skin-getriebene Logo-Invertierung (Dark: keine) */
  --metric-bg: var(--border-lighter);
  --metric-bg-hover: rgba(var(--ref-gray-100-rgb), 0.04);
  --metric-border: var(--line);
  --metric-border-hover: var(--slate-hover);
  --kpi-bg: var(--panel);
  --kpi-border: var(--line);
  --kpi-shadow: rgba(var(--ref-gray-00-rgb), 0.15);
  --kpi-shadow-hover: rgba(var(--ref-gray-00-rgb), 0.25);
  --popover-bg: var(--pop-bg);
  --popover-txt: var(--pop-txt-hell);
  --popover-border: var(--pop-border);
  --popover-shadow: rgba(var(--ref-gray-00-rgb), 0.5);
  --popover-separator: var(--ref-slate-27);
  --popover-muted: var(--ref-slate-84);
  --callout-info-bg: var(--gflag-info-bg);
  --callout-info-border: var(--info-border);
  --callout-info-txt: var(--status-halten);
  --callout-warn-bg: var(--warn-bg);
  --callout-warn-border: var(--warn-border);
  --callout-warn-txt: var(--status-warnung);
  --callout-danger-bg: var(--gflag-verkaufen-bg);
  --callout-danger-border: var(--fehler-border);
  --callout-danger-txt: var(--status-verkaufen);
  --distribution-track: var(--bar-bg);
  --distribution-fill: var(--accent);
  --distribution-fill-warning: var(--status-warnung);
  --meter-track: var(--distribution-track);
  --meter-fill-accent: var(--accent);
  --meter-fill-good: var(--status-kaufen);
  --meter-fill-warning: var(--status-warnung);
  --meter-fill-danger: var(--status-verkaufen);
  --meter-fill-neutral: var(--status-neutral);
  --meter-marker: var(--txt);
  --level-scale-track: var(--bar-bg);
  --level-scale-point: var(--accent);
  --level-scale-label: var(--mut);
  --status-marker-good: var(--status-kaufen);
  --status-marker-warning: var(--status-warnung);
  --status-marker-danger: var(--status-verkaufen);
  --status-marker-neutral: var(--status-neutral);
  /* Combobox (F-48): das native <select>-Popup zeichnet das Betriebssystem, deshalb bekommt die
     ersetzende Listbox eigene Flaechen-Tokens. Sie zeigen auf dieselben Semantic-Werte wie die
     uebrigen aufklappenden Flaechen — jeder Skin erbt sie damit automatisch. */
  --combo-liste-bg: var(--panel);
  --combo-liste-border: var(--line);
  --combo-liste-shadow: var(--popover-shadow);
  --combo-option-hover-bg: var(--panel-hover);
  --combo-option-selected-bg: var(--selected-bg);
  --combo-option-selected-txt: var(--accent);
  --combo-pfeil: var(--mut);
  /* ===== F-68 Restschuld: Dashboard-Flaechen, Schatten, Scrollbar, Tab-Drag =====
     Alle Werte sind 1:1 die vorher hartkodierten Literale aus dashboard.css/components.css/
     dashboard.html — sie galten dort fuer JEDES Theme. Deshalb stehen sie hier nur im :root und
     werden bewusst von keinem Skin ueberschrieben: der Wechsel ist pixelgleich. Ein zweiter Skin
     (Light-Mode / „zweites Theme") kann sie ab jetzt gezielt re-mappen. */
  /* Scrollbar (global): Firefox-Farbpaar + WebKit-Thumb inkl. Hover */
  --scrollbar-thumb: rgba(var(--ref-slate-65-rgb), 0.3);
  --scrollbar-thumb-webkit: rgba(var(--ref-slate-65-rgb), 0.25);
  --scrollbar-thumb-hover: rgba(var(--ref-slate-65-rgb), 0.5);
  /* Schatten: nur der Farbanteil ist Theme; Offset/Blur bleiben an der Komponente */
  --overview-kpi-shadow: rgba(var(--ref-gray-00-rgb), 0.12);
  --overview-kpi-shadow-hover: rgba(var(--ref-gray-00-rgb), 0.14);
  --switch-knob-shadow: rgba(var(--ref-gray-00-rgb), 0.45);
  --add-form-shadow: rgba(var(--ref-gray-00-rgb), 0.2);
  --collapse-btn-shadow: rgba(var(--ref-gray-00-rgb), 0.12);
  --collapse-btn-shadow-hover: rgba(var(--ref-gray-00-rgb), 0.25);
  /* Flaechen mit eigener Transparenz (bewusst nicht die vollflaechigen Warn-Tokens) */
  --unknown-bg: rgba(var(--ref-orange-68-rgb), 0.15);
  --unknown-border: rgba(var(--ref-orange-68-rgb), 0.2);
  --strategie-warnung-bg: rgba(var(--ref-orange-68-rgb), 0.08);
  --signal-grund-bg: rgba(var(--ref-blue-68-rgb), 0.06);
  --ampel-punkt-border: rgba(var(--ref-gray-00-rgb), 0.12);
  --chip-bg: rgba(var(--ref-slate-65-rgb), 0.1);
  --chip-border: rgba(var(--ref-slate-65-rgb), 0.2);
  --lauf-balken-bg: rgba(var(--ref-gray-100-rgb), 0.1);
  --glossar-sidebar-bg: rgba(var(--ref-gray-00-rgb), 0.1);
  --glossar-sidebar-shadow: rgba(var(--ref-gray-00-rgb), 0.3);
  /* Risiko-Skala: die Marke sitzt auf der Farbskala -> heller Punkt mit Halo, skin-unabhaengig */
  --rs-marke-bg: var(--ref-gray-100);
  --rs-marke-ring: rgba(var(--ref-gray-100-rgb), 0.35);
  /* Laender-Flaggen: Rahmen/Schatten/Grundflaeche sind Theme, die Flaggenfarben selbst NICHT
     (Nationalfarben sind Ikonografie und bleiben in dashboard.css hartkodiert). */
  --flag-icon-bg: var(--ref-slate-20);
  --flag-icon-border: rgba(var(--ref-gray-100-rgb), 0.24);
  --flag-icon-shadow: rgba(var(--ref-gray-00-rgb), 0.25);
  /* Tab-Drag (Long-Press-Umsortierung der Strategie-Reiter) */
  --tab-drag-ghost-shadow: rgba(var(--ref-blue-60-rgb), 0.45);
  --tab-drag-hint-border: rgba(var(--ref-blue-60-rgb), 0.3);
  /* Logo-Plakette: die vollen Logos sind transparente PNGs und brauchen eine helle Flaeche */
  --logo-plakette-bg: var(--ref-gray-100);
  /* Marktstimmungs-Tacho: das neutrale Mittelsegment fehlte in der --tacho-fill-*-Reihe (es war
     hart weiss); Beschriftung ist hell auf den dunklen Aktiv-Fuellungen und invers auf dem hellen
     Neutral-Segment. --tacho-wert-txt ist die grosse Zahl auf dem Zentrumskreis. */
  --tacho-fill-neutral: var(--ref-gray-100);
  --tacho-label-txt: var(--ref-gray-100);
  --tacho-label-txt-invers: var(--ref-slate-07);
  --tacho-wert-txt: var(--ref-gray-100);
}

/* ===== LIGHT-THEME — re-mappt Semantic + eigenstaendige Component-Tokens ===== */
[data-theme="light"] {
  /* Semantic */
  --bg: var(--ref-gray-98);
  --panel: var(--ref-gray-100);
  --panel-hover: var(--ref-gray-96);
  --line: var(--ref-slate-91);
  --txt: var(--ref-slate-11);
  --mut: var(--ref-slate-47);
  --accent: var(--ref-blue-53);
  --accent-hover: var(--ref-blue-48);
  --white: var(--ref-slate-11);
  --black: var(--ref-gray-100);
  --status-kaufen: var(--ref-green-36);
  --status-verkaufen: var(--ref-red-51);
  --status-halten: var(--ref-blue-53);
  --status-warnung: var(--ref-orange-44);
  --status-neutral: var(--ref-slate-35);
  --status-beobachten: var(--ref-slate-47);

  /* Component (nur wo in Light eigenstaendig) */
  --accent-hell: var(--ref-blue-68b);
  --archiv-bg: var(--ref-gray-98);
  --badge-beobachten-bg: rgba(var(--ref-slate-47-rgb), 0.1);
  --badge-beobachten-border: rgba(var(--ref-slate-47-rgb), 0.2);
  --badge-folgt-border: rgba(var(--ref-orange-44-rgb), 0.4);
  --badge-folgt-txt: var(--ref-orange-37);
  --badge-halten-bg: rgba(var(--ref-blue-53-rgb), 0.1);
  --badge-halten-border: rgba(var(--ref-blue-53-rgb), 0.2);
  --badge-halten-txt: var(--ref-blue-48);
  --badge-kaufen-bg: rgba(var(--ref-green-36-rgb), 0.1);
  --badge-kaufen-border: rgba(var(--ref-green-36-rgb), 0.2);
  --badge-kaufen-txt: var(--ref-green-29);
  --badge-ki-signal-bg: rgba(var(--ref-orange-44-rgb), 0.12);
  --badge-ki-signal-border: rgba(var(--ref-orange-44-rgb), 0.35);
  --badge-ki-signal-txt: var(--ref-orange-37);
  --badge-meiden-bg: rgba(var(--ref-slate-35-rgb), 0.1);
  --badge-meiden-txt: var(--ref-slate-27);
  --badge-reduzieren-bg: rgba(var(--ref-orange-44-rgb), 0.1);
  --badge-reduzieren-border: rgba(var(--ref-orange-44-rgb), 0.2);
  --badge-reduzieren-txt: var(--ref-orange-37);
  --badge-status-bg: rgba(var(--ref-slate-47-rgb), 0.1);
  --badge-status-border: rgba(var(--ref-slate-47-rgb), 0.28);
  --badge-status-txt: var(--ref-slate-27);
  --badge-verkaufen-bg: rgba(var(--ref-red-51-rgb), 0.1);
  --badge-verkaufen-border: rgba(var(--ref-red-51-rgb), 0.2);
  --badge-verkaufen-txt: var(--ref-red-42);
  --auth-page-bg: radial-gradient(900px 500px at 50% -10%, rgba(var(--ref-blue-53-rgb), .10), transparent 60%), var(--bg);
  --bar-bg: var(--ref-slate-91);
  --bg-darker: var(--ref-gray-96);
  --bg-lighter: var(--ref-gray-100);
  --block-alt-bg: var(--ref-gray-98);
  --block-bg: var(--ref-gray-100);
  --border-light: rgba(var(--ref-gray-00-rgb), 0.05);
  --border-lighter: rgba(var(--ref-gray-00-rgb), 0.02);
  --btn-bg: var(--ref-slate-91);
  --btn-bg-hover: var(--ref-slate-84);
  --btn-grau-bg: var(--ref-slate-47);
  --btn-txt: var(--ref-slate-27);
  --chart-mid: var(--ref-orange-44);
  --chart-neg: var(--ref-red-51);
  --chart-neutral: var(--ref-blue-53);
  --chart-pos: var(--ref-green-36);
  --fehler-border: var(--ref-red-89);
  --field-bg: var(--ref-gray-100);
  --field-placeholder: var(--ref-slate-47);
  --focus-ring: 0 0 0 3px rgba(var(--ref-blue-53-rgb), .22);
  --gefahr-hover-bg: var(--ref-red-42);
  --gflag-info-bg: var(--ref-blue-93);
  --gflag-verkaufen-bg: var(--ref-red-94);
  --gflag-warnung-bg: var(--ref-amber-89);
  --info-border: var(--ref-blue-78);
  --meta-txt: var(--ref-slate-47);
  --neu-row-bg: var(--ref-blue-93);
  --neu-tag-txt: var(--ref-blue-53);
  --notification-shadow: 0 6px 14px rgba(var(--ref-red-51-rgb), .24);
  --ok-bg: var(--ref-green-93);
  --ok-bg-stark: var(--ref-green-85);
  --ok-border: var(--ref-green-73);
  --ok-border-stark: var(--ref-green-58);
  --ok-treffer-bg: var(--ref-green-93);
  --overview-bg: var(--ref-slate-91);
  --overview-line: rgba(var(--ref-slate-11-rgb), 0.15);
  --overview-mut: var(--ref-slate-47);
  --overview-panel: var(--ref-gray-98);
  --overview-panel-soft: var(--ref-gray-96);
  --overview-subtle: var(--ref-slate-65);
  --overlay-bg: rgba(var(--ref-gray-00-rgb), .42);
  --pkt-leer: var(--ref-slate-84);
  --pop-bg: var(--ref-gray-100);
  --pop-border: var(--ref-slate-91);
  --pop-txt-hell: var(--ref-slate-11);
  --reakt-bg: var(--ref-green-93);
  --reakt-bg-hover: var(--ref-green-85);
  --reakt-border: var(--ref-green-73);
  --reakt-txt: var(--ref-green-29);
  --selected-bg: rgba(var(--ref-blue-53-rgb), 0.1);
  --selected-bg-hover: rgba(var(--ref-blue-53-rgb), 0.16);
  --selected-sticky-bg: rgba(var(--ref-gray-100-rgb), 0.95);
  --shadow-accent: 0 4px 12px rgba(var(--ref-blue-53-rgb), .22);
  --shadow-accent-hover: 0 6px 16px rgba(var(--ref-blue-53-rgb), .34);
  --shadow-auth: 0 20px 60px rgba(var(--ref-gray-00-rgb), .16);
  --shadow-card: 0 4px 6px rgba(var(--ref-gray-00-rgb), .08);
  --shadow-control-inset: inset 0 1px 3px rgba(var(--ref-gray-00-rgb), .12);
  --shadow-floating: 0 -2px 16px rgba(var(--ref-gray-00-rgb), .12), 0 4px 24px rgba(var(--ref-gray-00-rgb), .16);
  --shadow-menu: rgba(var(--ref-gray-00-rgb), 0.1);
  --shadow-selected-sticky: -8px 0 12px -6px rgba(var(--ref-blue-53-rgb), 0.12);
  --shadow-strong: rgba(var(--ref-gray-00-rgb), 0.15);
  --status-soft-info-bg: rgba(var(--ref-blue-53-rgb), .06);
  --status-soft-warn-bg: rgba(var(--ref-orange-44-rgb), .08);
  --tab-active-bg: rgba(var(--ref-blue-53-rgb), 0.06);
  --slate-bullet: var(--ref-slate-47);
  --slate-hover: var(--ref-slate-91);
  --slate-line: var(--ref-slate-84);
  --switch-bg: var(--ref-blue-53);
  --switch-bullet: var(--ref-gray-100);
  --table-detail-bg: var(--ref-gray-96);
  --tag-bg: var(--ref-slate-91);
  --th-bg: rgba(var(--ref-gray-98-rgb), 0.85);
  --th-bg-hover: rgba(var(--ref-slate-91-rgb), 0.95);
  --warn-aktion-bg: var(--ref-amber-89);
  --warn-aktion-border: var(--ref-amber-65);
  --warn-aktion-txt: var(--ref-orange-31);
  --warn-bg: var(--ref-amber-96);
  --warn-border: var(--ref-amber-77);
  --warn-kpi-txt: var(--ref-orange-37);
  --hinweis-txt: var(--ref-orange-37);
  --warn-vix-bg: var(--ref-orange-92);
  --warn-vix-txt: var(--ref-orange-40);
  --logo-filter: invert(1) hue-rotate(180deg);
  /* Strategie-Visuals: kraeftigeres Pink fuer hellen Hintergrund (--viz-line/-grid/-muted erben) */
  --viz-accent: var(--ref-pink-45);
  /* B-6 Restschuld (Finale): Light-Overrides (Schatten/Slate) */
  --metric-bg-hover: rgba(var(--ref-gray-00-rgb), 0.03);
  --chart-crosshair: rgba(var(--ref-gray-00-rgb), 0.4);
  --kpi-shadow: rgba(var(--ref-gray-00-rgb), 0.08);
  --kpi-shadow-hover: rgba(var(--ref-gray-00-rgb), 0.14);
  --popover-separator: var(--ref-slate-91);
  --popover-muted: var(--ref-slate-47);
  --popover-shadow: rgba(var(--ref-gray-00-rgb), 0.18);
}

/* ===== SEPIA-SKIN — warmes Papier-Thema (Abnahmetest Skinnability); re-mappt nur Semantic + eigenstaendige Component-Tokens ===== */
[data-theme="sepia"] {
  --bg: var(--ref-sepia-bg);
  --panel: var(--ref-sepia-panel);
  --panel-hover: var(--ref-sepia-panel-hover);
  --line: var(--ref-sepia-line);
  --txt: var(--ref-sepia-txt);
  --mut: var(--ref-sepia-mut);
  --accent: var(--ref-sepia-accent);
  --accent-hover: var(--ref-sepia-accent-hover);
  --on-accent: var(--ref-gray-100);
  --white: var(--ref-sepia-txt);
  --black: var(--ref-sepia-panel);
  --status-kaufen: var(--ref-green-29);
  --status-verkaufen: var(--ref-red-42);
  --status-halten: var(--ref-blue-48);
  --status-warnung: var(--ref-orange-37);
  --status-neutral: var(--ref-sepia-mut);
  --status-beobachten: var(--ref-sepia-mut);
  --accent-hell: var(--ref-sepia-accent);
  --archiv-bg: var(--ref-sepia-surface);
  --badge-beobachten-bg: rgba(var(--ref-slate-47-rgb), 0.12);
  --badge-beobachten-border: rgba(var(--ref-slate-47-rgb), 0.25);
  --badge-folgt-border: rgba(var(--ref-orange-44-rgb), 0.4);
  --badge-folgt-txt: var(--ref-orange-37);
  --badge-halten-bg: rgba(var(--ref-blue-53-rgb), 0.12);
  --badge-halten-border: rgba(var(--ref-blue-53-rgb), 0.25);
  --badge-halten-txt: var(--ref-blue-48);
  --badge-kaufen-bg: rgba(var(--ref-green-36-rgb), 0.14);
  --badge-kaufen-border: rgba(var(--ref-green-36-rgb), 0.28);
  --badge-kaufen-txt: var(--ref-green-29);
  --badge-ki-signal-bg: rgba(var(--ref-orange-44-rgb), 0.16);
  --badge-ki-signal-border: rgba(var(--ref-orange-44-rgb), 0.38);
  --badge-ki-signal-txt: var(--ref-orange-37);
  --badge-meiden-bg: rgba(var(--ref-slate-35-rgb), 0.12);
  --badge-meiden-txt: var(--ref-slate-27);
  --badge-reduzieren-bg: rgba(var(--ref-orange-44-rgb), 0.14);
  --badge-reduzieren-border: rgba(var(--ref-orange-44-rgb), 0.28);
  --badge-reduzieren-txt: var(--ref-orange-37);
  --badge-status-bg: rgba(var(--ref-slate-47-rgb), 0.12);
  --badge-status-border: rgba(var(--ref-slate-47-rgb), 0.28);
  --badge-status-txt: var(--ref-slate-27);
  --badge-verkaufen-bg: rgba(var(--ref-red-51-rgb), 0.14);
  --badge-verkaufen-border: rgba(var(--ref-red-51-rgb), 0.28);
  --badge-verkaufen-txt: var(--ref-red-42);
  --auth-page-bg: radial-gradient(900px 500px at 50% -10%, rgba(var(--ref-sepia-accent-rgb), .12), transparent 60%), var(--bg);
  --bar-bg: var(--ref-sepia-line-soft);
  --bg-darker: var(--ref-sepia-surface);
  --bg-lighter: var(--ref-sepia-field);
  --block-alt-bg: var(--ref-sepia-surface);
  --block-bg: var(--ref-sepia-panel);
  --border-light: rgba(var(--ref-sepia-txt-rgb), 0.07);
  --border-lighter: rgba(var(--ref-sepia-txt-rgb), 0.035);
  --btn-bg: var(--ref-sepia-line-soft);
  --btn-bg-hover: var(--ref-sepia-line);
  --btn-grau-bg: var(--ref-sepia-mut);
  --btn-txt: var(--ref-sepia-txt);
  --chart-mid: var(--ref-orange-44);
  --chart-neg: var(--ref-red-51);
  --chart-neutral: var(--ref-blue-53);
  --chart-pos: var(--ref-green-36);
  --fehler-border: var(--ref-red-89);
  --field-bg: var(--ref-sepia-field);
  --field-placeholder: var(--ref-sepia-mut);
  --focus-ring: 0 0 0 3px rgba(var(--ref-sepia-accent-rgb), .28);
  --gefahr-hover-bg: var(--ref-red-42);
  --gflag-info-bg: var(--ref-blue-93);
  --gflag-verkaufen-bg: var(--ref-red-94);
  --gflag-warnung-bg: var(--ref-amber-89);
  --info-border: var(--ref-blue-78);
  --meta-txt: var(--ref-sepia-mut);
  --neu-row-bg: var(--ref-amber-89);
  --neu-tag-txt: var(--ref-orange-37);
  --notification-shadow: 0 6px 14px rgba(var(--ref-red-51-rgb), .24);
  --ok-bg: var(--ref-green-93);
  --ok-bg-stark: var(--ref-green-85);
  --ok-border: var(--ref-green-73);
  --ok-border-stark: var(--ref-green-58);
  --ok-treffer-bg: var(--ref-green-93);
  --overview-bg: var(--ref-sepia-surface);
  --overview-line: rgba(var(--ref-sepia-txt-rgb), 0.15);
  --overview-mut: var(--ref-sepia-mut);
  --overview-panel: var(--ref-sepia-panel);
  --overview-panel-soft: var(--ref-sepia-surface);
  --overview-subtle: var(--ref-sepia-mut);
  --overlay-bg: rgba(var(--ref-sepia-txt-rgb), .45);
  --pkt-leer: var(--ref-sepia-line);
  --pop-bg: var(--ref-sepia-panel);
  --pop-border: var(--ref-sepia-line);
  --pop-txt-hell: var(--ref-sepia-txt);
  --reakt-bg: var(--ref-green-93);
  --reakt-bg-hover: var(--ref-green-85);
  --reakt-border: var(--ref-green-73);
  --reakt-txt: var(--ref-green-29);
  --selected-bg: rgba(var(--ref-sepia-accent-rgb), 0.1);
  --selected-bg-hover: rgba(var(--ref-sepia-accent-rgb), 0.16);
  --selected-sticky-bg: rgba(var(--ref-sepia-panel-rgb), 0.95);
  --shadow-accent: 0 4px 12px rgba(var(--ref-sepia-accent-rgb), .22);
  --shadow-accent-hover: 0 6px 16px rgba(var(--ref-sepia-accent-rgb), .34);
  --shadow-auth: 0 20px 60px rgba(var(--ref-sepia-txt-rgb), .18);
  --shadow-card: 0 4px 6px rgba(var(--ref-sepia-txt-rgb), .1);
  --shadow-control-inset: inset 0 1px 3px rgba(var(--ref-sepia-txt-rgb), .14);
  --shadow-floating: 0 -2px 16px rgba(var(--ref-sepia-txt-rgb), .12), 0 4px 24px rgba(var(--ref-sepia-txt-rgb), .16);
  --shadow-menu: rgba(var(--ref-sepia-txt-rgb), 0.14);
  --shadow-selected-sticky: -8px 0 12px -6px rgba(var(--ref-sepia-accent-rgb), 0.16);
  --shadow-strong: rgba(var(--ref-sepia-txt-rgb), 0.2);
  --status-soft-info-bg: rgba(var(--ref-blue-53-rgb), .06);
  --status-soft-warn-bg: rgba(var(--ref-orange-44-rgb), .08);
  --tab-active-bg: rgba(var(--ref-sepia-accent-rgb), 0.08);
  --slate-bullet: var(--ref-sepia-mut);
  --slate-hover: var(--ref-sepia-line-soft);
  --slate-line: var(--ref-sepia-line);
  --switch-bg: var(--ref-sepia-accent);
  --switch-bullet: var(--ref-gray-100);
  --table-detail-bg: var(--ref-sepia-surface);
  --tag-bg: var(--ref-sepia-line-soft);
  --th-bg: rgba(var(--ref-sepia-bg-rgb), 0.9);
  --th-bg-hover: rgba(var(--ref-sepia-line-rgb), 0.95);
  --warn-aktion-bg: var(--ref-amber-89);
  --warn-aktion-border: var(--ref-amber-65);
  --warn-aktion-txt: var(--ref-orange-31);
  --warn-bg: var(--ref-amber-96);
  --warn-border: var(--ref-amber-77);
  --warn-kpi-txt: var(--ref-orange-37);
  --hinweis-txt: var(--ref-orange-37);
  --warn-vix-bg: var(--ref-orange-92);
  --warn-vix-txt: var(--ref-orange-40);
  --logo-filter: invert(1) hue-rotate(180deg);
  --viz-accent: var(--ref-pink-45);
  --metric-bg-hover: rgba(var(--ref-sepia-txt-rgb), 0.04);
  --chart-crosshair: rgba(var(--ref-sepia-txt-rgb), 0.4);
  --kpi-shadow: rgba(var(--ref-sepia-txt-rgb), 0.1);
  --kpi-shadow-hover: rgba(var(--ref-sepia-txt-rgb), 0.16);
  --popover-separator: var(--ref-sepia-line);
  --popover-muted: var(--ref-sepia-mut);
  --popover-shadow: rgba(var(--ref-sepia-txt-rgb), 0.2);
}

/* ===== AKTIENAMPEL-SKIN · DUNKEL (Espresso) — Individualdesign, orthogonale data-design-Achse ===== */
/* Signale/Ampel erben aus dem Dark-Default (:root); hier nur warme Flaechen + Espresso-Akzent + Gold-Highlight + flache Karten-Schatten. */
/* Feinschliff/Abweichungen stehen in den Delta-Blöcken am Dateiende (Reihenfolge = Kaskade). */
[data-design="aktienampel"] {
  --bg: var(--ref-ampeld-bg);
  --panel: var(--ref-ampeld-panel);
  --panel-hover: var(--ref-ampeld-panel-hover);
  /* Kachel-Look (simplywall.st): Ruhe-Kachel = halbtransparentes Panel (rgba .5) -> der getoente
     Seiten-bg (Pergament/Espresso) scheint durch. Schatten weich/diffus OHNE Offset (0 0 <blur>) ->
     kein versetzter Rand/keine harte Kante unten, sondern ein gleichmaessiger zarter Halo rund um die
     Kachel; in Ruhe UND Hover identisch (Hover wechselt nur die Fuellung auf voll deckendes Panel).
     Schatten im Dark kraeftiger (traegt auf dunklem Grund kaum). */
  --ampel-tile-bg: rgba(var(--ref-ampeld-panel-rgb), 0.5);
  --ampel-tile-bg-hover: var(--ref-ampeld-panel);
  --ampel-tile-shadow: 0 0 18px rgba(var(--ref-gray-00-rgb), 0.19);
  --line: var(--ref-ampeld-line);
  --txt: var(--ref-ampeld-txt);
  --mut: var(--ref-ampeld-mut);
  --accent: var(--ref-ampeld-accent);
  --accent-hover: var(--ref-ampeld-accent-hover);
  --on-accent: var(--ref-ampeld-on-accent);
  --emphasis-gold: var(--ref-ampeld-gold);
  --on-emphasis-gold: var(--ref-ampeld-on-accent);
  --accent-hell: var(--ref-ampeld-accent-hover);
  --archiv-bg: var(--ref-ampeld-surface);
  --auth-page-bg: radial-gradient(900px 500px at 50% -10%, rgba(var(--ref-ampeld-accent-rgb), .12), transparent 60%), var(--bg);
  --bar-bg: var(--ref-ampeld-line-soft);
  --bg-darker: var(--ref-ampeld-surface);
  --bg-lighter: var(--ref-ampeld-panel-hover);
  --block-alt-bg: var(--ref-ampeld-surface);
  --block-bg: var(--ref-ampeld-panel);
  --border-light: rgba(var(--ref-ampeld-txt-rgb), 0.06);
  --border-lighter: rgba(var(--ref-ampeld-txt-rgb), 0.03);
  --btn-bg: var(--ref-ampeld-line-soft);
  --btn-bg-hover: var(--ref-ampeld-line);
  --btn-grau-bg: var(--ref-ampeld-mut);
  --btn-txt: var(--ref-ampeld-txt);
  --field-bg: var(--ref-ampeld-field);
  --field-placeholder: var(--ref-ampeld-mut);
  --focus-ring: 0 0 0 3px rgba(var(--ref-ampeld-accent-rgb), .32);
  --meta-txt: var(--ref-ampeld-mut);
  --neu-row-bg: var(--ref-ampeld-surface);
  --neu-tag-txt: var(--ref-ampeld-gold);
  --overview-bg: var(--ref-ampeld-surface);
  --overview-line: rgba(var(--ref-ampeld-txt-rgb), 0.14);
  --overview-mut: var(--ref-ampeld-mut);
  --overview-panel: var(--ref-ampeld-panel);
  --overview-panel-soft: var(--ref-ampeld-surface);
  --overview-subtle: var(--ref-ampeld-mut);
  --overlay-bg: rgba(0,0,0,.6);
  --pkt-leer: var(--ref-ampeld-line);
  --pop-bg: var(--ref-ampeld-panel);
  --pop-border: var(--ref-ampeld-line);
  --pop-txt-hell: var(--ref-ampeld-txt);
  --selected-bg: rgba(var(--ref-ampeld-accent-rgb), 0.18);
  --selected-bg-hover: rgba(var(--ref-ampeld-accent-rgb), 0.26);
  --selected-sticky-bg: rgba(var(--ref-ampeld-panel-rgb), 0.95);
  --slate-bullet: var(--ref-ampeld-mut);
  --slate-hover: var(--ref-ampeld-line-soft);
  --slate-line: var(--ref-ampeld-line);
  --switch-bg: var(--ref-ampeld-line);
  --switch-bullet: var(--ref-ampeld-mut);
  --table-detail-bg: var(--ref-ampeld-surface);
  --tag-bg: var(--ref-ampeld-line-soft);
  --th-bg: rgba(var(--ref-ampeld-panel-rgb), 0.9);
  --th-bg-hover: rgba(var(--ref-ampeld-panel-rgb), 0.95);
  --tab-active-bg: rgba(var(--ref-ampeld-accent-rgb), 0.10);
  --badge-beobachten-bg: rgba(var(--ref-ampeld-txt-rgb), 0.08);
  --badge-beobachten-border: rgba(var(--ref-ampeld-txt-rgb), 0.18);
  --badge-meiden-bg: rgba(var(--ref-ampeld-txt-rgb), 0.08);
  --badge-meiden-txt: var(--ref-ampeld-mut);
  --badge-status-bg: rgba(var(--ref-ampeld-txt-rgb), 0.08);
  --badge-status-border: rgba(var(--ref-ampeld-txt-rgb), 0.2);
  --badge-status-txt: var(--ref-ampeld-mut);
  --badge-folgt-border: rgba(var(--ref-ampeld-gold-rgb), 0.4);
  --badge-folgt-txt: var(--ref-ampeld-gold);
  --badge-ki-signal-bg: rgba(var(--ref-ampeld-gold-rgb), 0.14);
  --badge-ki-signal-border: rgba(var(--ref-ampeld-gold-rgb), 0.38);
  --badge-ki-signal-txt: var(--ref-ampeld-gold);
  --hinweis-txt: var(--ref-ampeld-gold);
  --chart-mid: var(--ref-ampeld-gold);
  --gflag-info-bg: var(--ref-ampeld-surface);
  --gflag-verkaufen-bg: var(--ref-ampeld-surface);
  --ok-treffer-bg: var(--ref-ampeld-surface);
  --reakt-bg: var(--ref-ampeld-surface);
  --reakt-border: var(--ref-ampeld-line);
  --warn-bg: var(--ref-ampeld-surface);
  --warn-aktion-bg: var(--ref-ampeld-surface);
  --shadow-card: none;
  --shadow-accent: none;
  --shadow-accent-hover: none;
  --kpi-shadow: transparent;
  --kpi-shadow-hover: rgba(0,0,0,0.25);
  --shadow-floating: 0 -2px 16px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.45);
  --shadow-menu: rgba(0,0,0,0.5);
  --shadow-strong: rgba(0,0,0,0.7);
  --shadow-auth: 0 20px 60px rgba(0,0,0,.5);
  --shadow-control-inset: inset 0 1px 3px rgba(0,0,0,.35);
  --popover-shadow: rgba(0,0,0,0.5);
  --popover-separator: var(--ref-ampeld-line);
  --popover-muted: var(--ref-ampeld-mut);
  --metric-bg-hover: rgba(var(--ref-ampeld-txt-rgb), 0.05);
  --chart-crosshair: rgba(var(--ref-ampeld-txt-rgb), 0.4);
  --tacho-active-extreme-fear-bg: var(--ref-red-45);
  --tacho-segment-extreme-fear-bg: var(--ref-red-45);
  /* Tacho-Aktiv-Fuellungen: warme Dunkeltoene (greed = dunkles Braun) -> weisse Segment-Schrift
     gut lesbar. Gilt fuer beide Aktienampel-Skins (Espresso hier; Pergament erbt diese Werte). */
  --tacho-fill-fear2: #7a2f28;
  --tacho-fill-fear: #7a4f1c;
  --tacho-fill-greed: #574122;
  --tacho-fill-greed2: #2f5f3a;
  /* warme Signal-Ampel (eingebettet; Erkennbarkeit vor Harmonie) */
  --status-kaufen: #6fbf8b;
  --status-verkaufen: #e07a5f;
  --status-halten: #79a6c0;
  --status-warnung: #e0a85a;
  --status-neutral: #b59c8c;
  --status-beobachten: #8fb6cc;
  --badge-kaufen-bg: rgba(111,191,139,.16);
  --badge-kaufen-border: rgba(111,191,139,.34);
  --badge-kaufen-txt: #9fd9b5;
  --badge-halten-bg: rgba(121,166,192,.16);
  --badge-halten-border: rgba(121,166,192,.34);
  --badge-halten-txt: #a9cfe0;
  --badge-verkaufen-bg: rgba(224,122,95,.16);
  --badge-verkaufen-border: rgba(224,122,95,.34);
  --badge-verkaufen-txt: #f0a892;
  --badge-reduzieren-bg: rgba(224,168,90,.16);
  --badge-reduzieren-border: rgba(224,168,90,.34);
  --badge-reduzieren-txt: #f0c98a;
  --chart-pos: #6fbf8b;
  --chart-neg: #e07a5f;
  --chart-neutral: #79a6c0;
  --logo-filter: none;
}

/* ===== AKTIENAMPEL-SKIN · HELL (Pergament) — gleiche Token-Schluessel wie Dunkel (kein Wert-Leak) ===== */
/* Feinschliff siehe Delta-Blöcke am Dateiende (Reihenfolge = Kaskade). */
[data-design="aktienampel"][data-theme="light"] {
  --bg: var(--ref-ampel-bg);
  --panel: var(--ref-ampel-panel);
  --panel-hover: var(--ref-ampel-panel-hover);
  /* Kachel-Look (simplywall.st): Ruhe-Kachel = halbtransparentes Panel (rgba .5) -> der getoente
     Seiten-bg (Pergament/Espresso) scheint durch. Schatten weich/diffus OHNE Offset (0 0 <blur>) ->
     kein versetzter Rand/keine harte Kante unten, sondern ein gleichmaessiger zarter Halo rund um die
     Kachel; in Ruhe UND Hover identisch (Hover wechselt nur die Fuellung auf voll deckendes Panel).
     Schatten im Dark kraeftiger (traegt auf dunklem Grund kaum). */
  --ampel-tile-bg: rgba(var(--ref-ampel-panel-rgb), 0.5);
  --ampel-tile-bg-hover: var(--ref-ampel-panel);
  --ampel-tile-shadow: 0 0 16px rgba(var(--ref-gray-00-rgb), 0.03);
  --line: var(--ref-ampel-line);
  --txt: var(--ref-ampel-txt);
  --mut: var(--ref-ampel-mut);
  --accent: var(--ref-ampel-accent);
  --accent-hover: var(--ref-ampel-accent-hover);
  --on-accent: var(--ref-ampel-on-accent);
  --emphasis-gold: var(--ref-ampel-gold);
  --on-emphasis-gold: var(--ref-ampel-txt);
  --accent-hell: var(--ref-ampel-accent-hover);
  --archiv-bg: var(--ref-ampel-surface);
  --auth-page-bg: radial-gradient(900px 500px at 50% -10%, rgba(var(--ref-ampel-accent-rgb), .10), transparent 60%), var(--bg);
  --bar-bg: var(--ref-ampel-line-soft);
  --bg-darker: var(--ref-ampel-surface);
  --bg-lighter: var(--ref-ampel-field);
  --block-alt-bg: var(--ref-ampel-surface);
  --block-bg: var(--ref-ampel-panel);
  --border-light: rgba(var(--ref-ampel-txt-rgb), 0.07);
  --border-lighter: rgba(var(--ref-ampel-txt-rgb), 0.035);
  --btn-bg: var(--ref-ampel-line-soft);
  --btn-bg-hover: var(--ref-ampel-line);
  --btn-grau-bg: var(--ref-ampel-mut);
  --btn-txt: var(--ref-ampel-txt);
  --field-bg: var(--ref-ampel-field);
  --field-placeholder: var(--ref-ampel-mut);
  --focus-ring: 0 0 0 3px rgba(var(--ref-ampel-accent-rgb), .26);
  --meta-txt: var(--ref-ampel-mut);
  --neu-row-bg: var(--ref-ampel-surface);
  --neu-tag-txt: #8f6a16;
  --overview-bg: var(--ref-ampel-surface);
  --overview-line: rgba(var(--ref-ampel-txt-rgb), 0.15);
  --overview-mut: var(--ref-ampel-mut);
  --overview-panel: var(--ref-ampel-panel);
  --overview-panel-soft: var(--ref-ampel-surface);
  --overview-subtle: var(--ref-ampel-mut);
  --overlay-bg: rgba(var(--ref-ampel-txt-rgb), .45);
  --pkt-leer: var(--ref-ampel-line);
  --pop-bg: var(--ref-ampel-panel);
  --pop-border: var(--ref-ampel-line);
  --pop-txt-hell: var(--ref-ampel-txt);
  --selected-bg: rgba(var(--ref-ampel-accent-rgb), 0.10);
  --selected-bg-hover: rgba(var(--ref-ampel-accent-rgb), 0.16);
  --selected-sticky-bg: rgba(var(--ref-ampel-panel-rgb), 0.95);
  --slate-bullet: var(--ref-ampel-mut);
  --slate-hover: var(--ref-ampel-line-soft);
  --slate-line: var(--ref-ampel-line);
  --switch-bg: var(--ref-ampel-line);
  --switch-bullet: var(--ref-ampel-mut);
  --table-detail-bg: rgba(var(--ref-ampel-panel-rgb), 0.5);
  --tag-bg: var(--ref-ampel-line-soft);
  --th-bg: rgba(var(--ref-ampel-panel-rgb), 0.9);
  --th-bg-hover: rgba(var(--ref-ampel-line-rgb), 0.95);
  --tab-active-bg: rgba(var(--ref-ampel-accent-rgb), 0.06);
  --badge-beobachten-bg: rgba(var(--ref-ampel-txt-rgb), 0.06);
  --badge-beobachten-border: rgba(var(--ref-ampel-txt-rgb), 0.16);
  --badge-meiden-bg: rgba(var(--ref-ampel-txt-rgb), 0.06);
  --badge-meiden-txt: var(--ref-ampel-mut);
  --badge-status-bg: rgba(var(--ref-ampel-txt-rgb), 0.06);
  --badge-status-border: rgba(var(--ref-ampel-txt-rgb), 0.18);
  --badge-status-txt: var(--ref-ampel-mut);
  --badge-folgt-border: rgba(var(--ref-ampel-gold-rgb), 0.45);
  --badge-folgt-txt: #8f6a16;
  --badge-ki-signal-bg: rgba(var(--ref-ampel-gold-rgb), 0.16);
  --badge-ki-signal-border: rgba(var(--ref-ampel-gold-rgb), 0.4);
  --badge-ki-signal-txt: #8f6a16;
  --hinweis-txt: #8f6a16;
  --chart-mid: var(--ref-ampel-gold);
  --gflag-info-bg: var(--ref-ampel-surface);
  --gflag-verkaufen-bg: var(--ref-ampel-surface);
  --ok-treffer-bg: var(--ref-ampel-surface);
  --reakt-bg: var(--ref-ampel-surface);
  --reakt-border: var(--ref-ampel-line);
  --warn-bg: var(--ref-ampel-surface);
  --warn-aktion-bg: var(--ref-ampel-surface);
  --shadow-card: none;
  --shadow-accent: none;
  --shadow-accent-hover: none;
  --kpi-shadow: transparent;
  --kpi-shadow-hover: rgba(var(--ref-ampel-txt-rgb), 0.14);
  --shadow-floating: 0 -2px 16px rgba(var(--ref-ampel-txt-rgb), .10), 0 8px 24px rgba(var(--ref-ampel-txt-rgb), .14);
  --shadow-menu: rgba(var(--ref-ampel-txt-rgb), 0.14);
  --shadow-strong: rgba(var(--ref-ampel-txt-rgb), 0.2);
  --shadow-auth: 0 20px 60px rgba(var(--ref-ampel-txt-rgb), .16);
  --shadow-control-inset: inset 0 1px 3px rgba(var(--ref-ampel-txt-rgb), .12);
  --popover-shadow: rgba(var(--ref-ampel-txt-rgb), 0.2);
  --popover-separator: var(--ref-ampel-line);
  --popover-muted: var(--ref-ampel-mut);
  --metric-bg-hover: rgba(var(--ref-ampel-txt-rgb), 0.04);
  --chart-crosshair: rgba(var(--ref-ampel-txt-rgb), 0.4);
  --tacho-active-extreme-fear-bg: var(--ref-red-42);
  --tacho-segment-extreme-fear-bg: var(--ref-red-42);
  /* warme Signal-Ampel (eingebettet; Erkennbarkeit vor Harmonie) */
  --status-kaufen: #3c8c57;
  --status-verkaufen: #c24a33;
  --status-halten: #356680;
  --status-warnung: #c0892f;
  --status-neutral: #8a7468;
  --status-beobachten: #6e8ba0;
  --badge-kaufen-bg: rgba(60,140,87,.14);
  --badge-kaufen-border: rgba(60,140,87,.30);
  --badge-kaufen-txt: #2c6b41;
  --badge-halten-bg: rgba(53,102,128,.14);
  --badge-halten-border: rgba(53,102,128,.30);
  --badge-halten-txt: #2a5267;
  --badge-verkaufen-bg: rgba(194,74,51,.14);
  --badge-verkaufen-border: rgba(194,74,51,.30);
  --badge-verkaufen-txt: #933725;
  --badge-reduzieren-bg: rgba(192,137,47,.14);
  --badge-reduzieren-border: rgba(192,137,47,.30);
  --badge-reduzieren-txt: #8f6622;
  --chart-pos: #3c8c57;
  --chart-neg: #c24a33;
  --chart-neutral: #356680;
  --logo-filter: invert(1) hue-rotate(180deg);
}

/* ===== AKTIENAMPEL-NEU — DELTA-BLÖCKE DES FÜHRENDEN NUTZERDESIGNS =====
   Das Theme erbt die kompletten Aktienampel-Blöcke (Selektor-Erweiterung oben) und
   definiert hier NUR die Abweichungen lt. docs/aktienampel-design-spec.md, angepasst nach
   Nutzer-Feedback Iteration 2 (2026-07-10): untere Bereiche + Tabellen behalten die
   Original-Hintergründe, nur die Kopf-Zone (overview) liegt auf dem Mittelwert-Ton, die
   Header-Boxen bleiben helle Panels. Struktur-Abweichungen stehen in aktienampel.css;
   der bisherige Skin bleibt Admins für den direkten Vergleich zugänglich. */
[data-design="aktienampel"] {
  /* Strategie-Navigation: transluzentes Frosted Glass wie die KPI-Flächen; der Mesh-Grund scheint
     durch die helle Braunfläche. Der frühere dunkle Leistengrund markiert nur noch den aktiven
     Reiter. Inaktive Reiter und Bedienflächen tragen Dunkelbraun, Hover senkt die Deckung der
     hellen Gegenfarbe und wird dadurch sichtbar dunkler. */
  --nav-active-bg: var(--mesh-nav-bg);
  --nav-active-text: var(--ref-ampel-on-accent);
  --nav-action-hover: rgba(var(--ref-ampeld-txt-rgb), 0.66);
  --nav-action-hover-text: var(--ref-ampel-txt);
  --nav-surface: rgba(var(--ref-ampeld-txt-rgb), 0.78);
  --nav-scroll-overlay: rgba(var(--ref-ampeld-txt-rgb), 0.78);
  --nav-scroll-overlay-hover: rgba(var(--ref-ampeld-txt-rgb), 0.66);
  --nav-surface-hover: rgba(var(--ref-ampeld-txt-rgb), 0.66);
  --nav-surface-hover-text: var(--ref-ampel-txt);
  --nav-text: var(--ref-ampel-txt);
  /* --- Mesh-Grund (F-84, Espresso): weiche Farbwolken statt Volltonfläche hinter dem Dashboard.
     Bewusst rein statische radial-gradients (kein filter:blur, keine Animation) — optisch
     gleichwertig, aber ohne Laufzeitkosten. Eigene --mesh-*-Schlüssel statt Umdeutung von
     --overview-bg/--kpi-header-bg: die speisen auch Landingpage und Collapse-Buttons, dort soll
     sich nichts ändern. --mesh-workspace-bg ist der Schalter für den alten Volltongrund
     (auf var(--bg) setzen = Zustand vor F-84). --- */
  --mesh-base: var(--ref-ampeld-bg);
  /* Wolken-Reihenfolge = Stapelung (die erste liegt oben). Espresso trägt bewusst kräftigeres Gold
     als Pergament: der dunkle Grund schluckt den Farbeindruck, schwache Alphas wirken dort blass.
     Die helle Wolke oben links liegt ÜBER dem Gold und hellt den Marken-Bereich auf; das Gold sitzt
     bewusst 400px tiefer (fester px-Wert, damit es nicht mit der Fenstergröße wandert) und läuft
     von unten in die helle Wolke hinein. Die Gold-Wolke hat als einzige einen Zwischenstopp: der
     Farbwert fällt bis zur Hälfte des Radius steil ab und klingt dann über die volle Distanz aus
     (`transparent 100%` statt 70%) — das ergibt den ausgedehnten, kantenlosen „blurry" Halo, den ein
     einzelner linearer Verlauf nicht hinbekommt. */
  --mesh-bg:
    radial-gradient(51% 43% at 4% 2%,
      rgba(var(--ref-ampeld-txt-rgb), 0.19),
      rgba(var(--ref-ampeld-txt-rgb), 0.10) 46%,
      transparent 100%),
    radial-gradient(56% 50% at 3% 400px,
      rgba(var(--ref-ampeld-gold-rgb), 0.065),
      rgba(var(--ref-ampeld-gold-rgb), 0.03) 48%,
      transparent 100%),
    radial-gradient(60% 55% at 82% 10%, rgba(var(--ref-ampeld-gold-rgb), 0.35), transparent 70%),
    radial-gradient(45% 45% at 10% 18%, rgba(var(--ref-ampeld-accent-rgb), 0.42), transparent 70%),
    radial-gradient(55% 55% at 66% 86%, rgba(var(--ref-ampeld-txt-rgb), 0.10), transparent 70%),
    radial-gradient(50% 45% at 14% 90%, rgba(var(--ref-ampelnd-mesh-deep-rgb), 0.55), transparent 70%),
    radial-gradient(42% 42% at 46% 48%, rgba(var(--ref-ampeld-txt-rgb), 0.08), transparent 70%);
  /* Teil-Skalierung (theme-unabhängig, daher nur hier — das Light-Delta erbt den Wert):
     Die Wolken-Box folgt dem Viewport NICHT 1:1, sonst staucht sich beim Verkleinern das ganze
     Bild zusammen. Breite folgt zu 70 %, Höhe zu 50 % (Bezug 1440x900); der Rest bleibt fix, sodass
     überstehende Teile rechts/unten aus dem Sichtbereich laufen statt zu schrumpfen. `max(100v*)`
     verhindert, dass die Box auf großen Schirmen kleiner als der Viewport wird (sonst flacher Rand). */
  --mesh-size: max(100vw, 70vw + 432px) max(100vh, 50vh + 450px);
  --mesh-workspace-bg: transparent;               /* Arbeitsbereich: Mesh scheint voll durch */
  --mesh-zone-bg: transparent;                    /* Kopf-Zone ohne eigene Fläche (Nutzerwunsch) */
  --mesh-kpi-bg: rgba(var(--ref-ampeld-panel-rgb), 0.72);       /* Glas-KPI auf dem Mesh */
  --mesh-kpi-blur: 14px;
  --mesh-card-bg: rgba(var(--ref-ampeld-panel-rgb), 0.72);      /* Glas-Rasterkarten */
  /* Der frühere dunkle Leistengrund bleibt als aktive Fläche erhalten. Hohe Deckung verhindert,
     dass der Mesh den Dunkelbraun-Kontrast des aktiven Reiters aufhebt. */
  --mesh-nav-bg: rgba(var(--ref-ampelnd-mesh-deep-rgb), 0.80);
  --mesh-nav-blur: 12px;
  /* Glocke und Profil gehören NICHT zur Leiste: sie behalten ihr helles Kontrastverhältnis aus dem
     Kopf und bekommen nur das Glas dazu (Nutzerwunsch). */
  --mesh-headerbtn-bg: rgba(var(--ref-ampeld-panel-rgb), 0.55);
  --overview-bg: var(--ref-ampelnd-surface);      /* Kopf-Zone: Mittelwert alt<->Spec */
  --overview-panel-soft: var(--ref-ampeld-panel); /* FIX Ton-in-Ton: Boxen = panel, Zone = surface */
  --kpi-header-bg: var(--bg);                     /* KPI eine zarte Stufe dunkler als die Kopf-Zone */
  /* Iteration 3 (Nutzer-Feedback 2026-07-10): Halo etwas schwächer, aus dem Warmton statt
     neutralem Schwarz abgeleitet; Tabellen-Header ohne Hover-Hintergrund (Schriftwechsel reicht). */
  --ampel-tile-shadow: 0 0 16px rgba(15, 9, 5, 0.17);
  --th-bg-hover: var(--th-bg);
  /* Benchmark-Linie kühl statt warm (2026-07-15): Der Basiswert --mut ist im Espresso ein warmes
     Grau (#b5a697) und lag damit in derselben Familie wie die Gold-Strategie-Linie (#c8975a) —
     bei nahezu gleicher Helligkeit verschmolzen beide. Die Strategie behält das Gold (sie ist die
     Hauptaussage), die Benchmark tritt in die kühle Note zurück. */
  --track-line-bench: var(--ref-ampel-cool);
  /* Iteration 4 (Varianten-Erprobung 2026-07-10): Handschrift-Überschriften, violette Zähler-Badges,
     zarte ±Tönung der KPI-Kacheln (Espresso-Werte). */
  --font-display: 'Handlee', 'Comic Sans MS', cursive;
  --notification-bg: #8779ea;               /* violettes Zähler-Badge statt Alarm-Rot */
  --notification-txt: #ffffff;
  --notification-shadow: 0 6px 14px rgba(135,121,234,.34);
  --kpi-tint-pos: rgba(111,191,139,0.13);   /* aus --status-kaufen, sehr zart */
  --kpi-tint-neg: rgba(224,122,95,0.13);    /* aus --status-verkaufen, sehr zart */
  /* Warme Feedback-Palette (Spec 4.4): schließt die kalten Farblecks + differenziert die Flächen */
  --warn-bg: var(--ref-ampelnd-warn-bg);
  --warn-border: var(--ref-ampelnd-warn-border);
  --warn-aktion-bg: var(--ref-ampelnd-warn-bg);
  --warn-aktion-border: var(--ref-ampelnd-warn-border);
  --warn-aktion-txt: var(--ref-ampelnd-warn-txt);
  --warn-vix-bg: var(--ref-ampelnd-warn-bg);
  --warn-vix-txt: var(--ref-ampelnd-warn-txt);
  --gflag-warnung-bg: var(--ref-ampelnd-warn-bg);
  --ok-bg: var(--ref-ampelnd-ok-bg);
  --ok-bg-stark: var(--ref-ampelnd-ok-bg-stark);
  --ok-treffer-bg: var(--ref-ampelnd-ok-bg);
  --reakt-bg: var(--ref-ampelnd-ok-bg);
  --reakt-bg-hover: var(--ref-ampelnd-ok-bg-stark);
  --reakt-border: var(--ref-ampelnd-ok-border);
  --reakt-txt: var(--ref-ampelnd-ok-txt);
  --gflag-info-bg: var(--ref-ampelnd-info-bg);
  --info-border: var(--ref-ampelnd-info-border);
  --gflag-verkaufen-bg: var(--ref-ampelnd-danger-bg);
  --fehler-border: var(--ref-ampelnd-danger-border);
  --gefahr-hover-bg: var(--ref-ampelnd-danger-hover);
}

/* Pergament-Delta (führender Modus): gleiche Schlüssel wie das Dunkel-Delta (kein Wert-Leak). */
[data-design="aktienampel"][data-theme="light"] {
  /* Pergament: 10 % Dunkelbraun tönen den Mesh-Grund wie ein leichter Multiply-Eindruck; bei Hover
     steigt die Tönung auf 16 %. Die Fläche bleibt durchsichtig, der Hovertext wird maximal neutral
     dunkel, damit die stärkere Pille klar lesbar bleibt. */
  --nav-active-bg: var(--mesh-nav-bg);
  --nav-active-text: var(--ref-ampel-on-accent);
  --nav-action-hover: rgba(var(--ref-ampel-accent-rgb), 0.16);
  --nav-action-hover-text: var(--ref-gray-00);
  --nav-surface: rgba(var(--ref-ampel-accent-rgb), 0.10);
  --nav-scroll-overlay: rgba(var(--ref-ampel-accent-rgb), 0.10);
  --nav-scroll-overlay-hover: rgba(var(--ref-ampel-accent-rgb), 0.16);
  --nav-surface-hover: rgba(var(--ref-ampel-accent-rgb), 0.16);
  --nav-surface-hover-text: var(--ref-gray-00);
  --nav-text: var(--ref-ampel-txt);
  /* Mesh-Grund (F-84, Pergament) — Aufbau und Begründung siehe Dunkel-Delta oben. */
  --mesh-base: var(--ref-ampel-bg);
  --mesh-bg:
    radial-gradient(51% 43% at 4% 2%,
      rgba(var(--ref-gray-100-rgb), 0.96),
      rgba(var(--ref-gray-100-rgb), 0.52) 46%,
      transparent 100%),
    radial-gradient(56% 50% at 3% 400px,
      rgba(var(--ref-ampeld-gold-rgb), 0.125),
      rgba(var(--ref-ampeld-gold-rgb), 0.055) 48%,
      transparent 100%),
    radial-gradient(60% 55% at 82% 10%, rgba(var(--ref-ampeld-gold-rgb), 0.41), transparent 70%),
    radial-gradient(45% 45% at 10% 18%, rgba(var(--ref-ampel-gold-rgb), 0.20), transparent 70%),
    radial-gradient(55% 55% at 66% 86%, rgba(var(--ref-gray-100-rgb), 0.72), transparent 70%),
    radial-gradient(50% 45% at 14% 90%, rgba(var(--ref-ampeln-mesh-cool-rgb), 0.24), transparent 70%),
    radial-gradient(42% 42% at 46% 48%, rgba(var(--ref-gray-100-rgb), 0.60), transparent 70%);
  --mesh-workspace-bg: transparent;              /* Arbeitsbereich: Mesh scheint voll durch */
  --mesh-zone-bg: transparent;                   /* Kopf-Zone ohne eigene Fläche (Nutzerwunsch) */
  --mesh-kpi-bg: rgba(var(--ref-ampel-panel-rgb), 0.66);  /* Glas-KPI auf dem Mesh */
  --mesh-kpi-blur: 14px;
  --mesh-card-bg: rgba(var(--ref-ampel-panel-rgb), 0.66); /* Glas-Rasterkarten */
  /* Der bisherige dunkle Glasgrund wandert vom Gruppenhintergrund auf die aktive Fläche. */
  --mesh-nav-bg: rgba(var(--ref-ampel-accent-rgb), 0.88);
  --mesh-headerbtn-bg: rgba(var(--ref-ampel-line-rgb), 0.50);
  --mesh-nav-blur: 12px;
  --overview-bg: var(--ref-ampeln-surface);      /* Kopf-Zone: Mittelwert alt<->Spec */
  --overview-panel-soft: var(--ref-ampel-panel); /* FIX Ton-in-Ton: Boxen = panel, Zone = surface */
  --kpi-header-bg: rgba(var(--ref-ampel-txt-rgb), 0.05); /* zarte Dunkelbraun-Tönung auf der Kopf-Zone */
  /* Iteration 3: Halo etwas schwächer und aus dem Dunkelbraun (--ref-ampel-txt) abgeleitet
     statt neutralem Schwarz; Tabellen-Header ohne Hover-Hintergrund. */
  --ampel-tile-shadow: 0 2px 12px rgba(var(--ref-ampel-txt-rgb), 0.045);
  --th-bg-hover: var(--th-bg);
  /* Benchmark-Linie kühl statt warm — Begründung siehe Dunkel-Delta. Im Pergament standen
     --accent (#43352e) und --mut (#6b5d52) als zwei dunkle Brauntöne nebeneinander. */
  --track-line-bench: var(--ref-ampel-cool);
  /* Iteration 4 (Pergament-Werte): Handschrift-Überschriften, violette Zähler-Badges,
     zarte ±Tönung der KPI-Kacheln (dunklere, sattere Status-Töne für hellen Grund). */
  --font-display: 'Handlee', 'Comic Sans MS', cursive;
  --notification-bg: #6d5bd0;               /* satteres Violett für hellen Grund */
  --notification-txt: #ffffff;
  --notification-shadow: 0 6px 14px rgba(109,91,208,.28);
  --kpi-tint-pos: rgba(60,140,87,0.10);     /* aus --status-kaufen (hell), sehr zart */
  --kpi-tint-neg: rgba(194,74,51,0.10);     /* aus --status-verkaufen (hell), sehr zart */
  --warn-bg: var(--ref-ampeln-warn-bg);
  --warn-border: var(--ref-ampeln-warn-border);
  --warn-aktion-bg: var(--ref-ampeln-warn-bg);
  --warn-aktion-border: var(--ref-ampeln-warn-border);
  --warn-aktion-txt: var(--ref-ampeln-warn-txt);
  --warn-vix-bg: var(--ref-ampeln-warn-bg);
  --warn-vix-txt: var(--ref-ampeln-warn-txt);
  --gflag-warnung-bg: var(--ref-ampeln-warn-bg);
  --ok-bg: var(--ref-ampeln-ok-bg);
  --ok-bg-stark: var(--ref-ampeln-ok-bg-stark);
  --ok-treffer-bg: var(--ref-ampeln-ok-bg);
  --reakt-bg: var(--ref-ampeln-ok-bg);
  --reakt-bg-hover: var(--ref-ampeln-ok-bg-stark);
  --reakt-border: var(--ref-ampeln-ok-border);
  --reakt-txt: var(--ref-ampeln-ok-txt);
  --gflag-info-bg: var(--ref-ampeln-info-bg);
  --info-border: var(--ref-ampeln-info-border);
  --gflag-verkaufen-bg: var(--ref-ampeln-danger-bg);
  --fehler-border: var(--ref-ampeln-danger-border);
  --gefahr-hover-bg: var(--ref-ampeln-danger-hover);
}