:root {
  /* Nebentext (Meta, Fundstelle, Hilfetext) — DESIGN_SYSTEM.md §2.4 */
  --font-size-sm: 0.8125rem;
  /* Anlage-Farben (DESIGN_SYSTEM.md §2.1 „Anlage-Farblogik“, fest, nie tauschen) */
  --anlage-fondspolice: #1767ff;
  --anlage-depot: #f59e0b;
  --anlage-avdepot: #ea580c;
  --anlage-rurup: #22c55e;
  /* Bootstrap-Primary an die Design-/Accent-Farbe koppeln: deckt .text-primary,
     .btn-primary, .bg-primary und alle var(--bs-primary)-Nutzungen ab. Ohne
     Accent = Standardblau (#0d6efd). Anlageform-Farben sind hardcoded und davon
     unberührt. */
  --bs-primary: var(--accent-color, #0d6efd);
  --bs-primary-rgb: var(--accent-rgb, 13, 110, 253);
  --white-bg: #ffffff;
  /* Soft-Surface-Grauton fuer Hauptbereich-Container, Header, Sekundaer-
     Buttons. Identischer Wert an allen drei Stellen. */
  --surface-soft-bg: #f5f5f7;
  /* Anlage-Picker (Sidebar-Anlagefinder): Aliased auf surface-soft-bg, sodass
     die Anlageklassen-Haelfte des Pickers spaeter leicht auf eine andere Color
     umgeschaltet werden kann (z.B. Whitelabeling). */
  --picker-anlage-bg: var(--surface-soft-bg);
  /* Generisches Hover-Glow: dezenter dunkler BG-Tint + 3px-Halo. Greift auf
     Topbar-Toggle, Sidebar-Pills (inaktiv), Tarifauswahl-Button und
     Sekundaer-Button. Werte gespiegelt am Info-Icon-Hover (--info-icon-hover-*). */
  --hover-glow-bg: rgba(0, 0, 0, 0.06);
  --hover-glow-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
  --white-bg-soft: #ecf1ff;
  --white-surface: #ffffff;
  --white-surface-muted: #f4f6fb;
  --white-border: rgba(15, 42, 97, 0.08);
  --white-border-strong: rgba(15, 42, 97, 0.16);
  --white-shadow-soft: 0 10px 30px rgba(15, 42, 97, 0.08);
  --white-shadow-xs: 0 3px 10px rgba(15, 42, 97, 0.06);
  /* Float-Halo fuer .main-area-container & verwandte Surface-Cards auf dem
     hellen App-BG. Bewusst eigener Token neben --white-shadow-soft (anderes
     Profil: dort 10px Y / 30px Blur fuer hoeher schwebend, hier 2px Y / 16px
     Blur fuer flach floatend). Dark-Pendant in dark.css = none. */
  --surface-shadow-soft: 0 2px 16px rgba(15, 42, 97, 0.08);
  /* Radius-Tokens */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  /* Bootstrap-Override: Komponenten ohne projekteigene Radius-Regel */
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
  --white-text: #0b1f44;
  --white-text-muted: #4d5f7c;
  --white-text-soft: #7a8ba7;
  --white-link: var(--accent-color, #1767ff);
  --white-link-hover: var(--accent-color, #0f4ed8);
  --white-accent: var(--accent-color, #1767ff);
  --white-accent-strong: var(--accent-color, #0f4ed8);
  --white-accent-soft: rgba(var(--accent-rgb, 23, 103, 255), 0.12);
  --white-success: #1f9d55;
  --white-success-soft: rgba(31, 157, 85, 0.10);
  --white-warning: #f59f00;
  --white-danger: #e03131;
  --app-html-height: auto;
  --app-html-min-height: 100%;
  --app-html-background: var(--white-bg);
  --app-font-size: 0.925rem;
  /* TEST: EIN radialer Verlauf (statt Zwei-Layer-Konstrukt) — weisser Kern
     oben strahlend, Blau klingt nach unten und in die Ecken ab. Blau =
     #5c98ff (= --nav-tabs-link-active-color). Kreis-Center oben-mittig
     deutlich ueber dem Viewport (50% / -85%), Radius "farthest-corner"
     (= bis zur entferntesten Box-Ecke; explizit notiert, da "circle <%>"
     nach CSS Images L3 invalid ist — Prozent-Radius nur fuer ellipse).
     Stops: bis 80% in der Basisfarbe (#FDFDFD) — grosses weisses Plateau
     fuer dominanten Kugel-Schein, dann schmaler Blau-Saum bei
     85/90/94/97/100% ueber #f3f7ff → #e4edff → #cdddff → #b8d0ff bis
     #a6c6ff. Farben bewusst BLASSER (Richtung Weiss gemischt, kein voll
     gesaettigtes #5c98ff am Ende), damit der Verlauf weniger penetrant
     wirkt — auch fuer kraeftige Custom-Accents.
     Revert: --app-background zurueck auf var(--surface-soft-bg),
     --image: none, --size: 100% 100%, 20px 20px, --position: center, 0 0,
     --repeat: no-repeat, repeat.
     TODO Whitelabel (Schuld 16): selbe Geometrie ist in buildOverrides()
     (base_base.html ~Z.929 ff.) mit variabler Reglerfarbe gespiegelt —
     beide Stellen synchron halten. */
  --app-background: #FDFDFD;
  --app-background-image:
      radial-gradient(circle farthest-corner at 50% -125%,
          #FDFDFD 0%,
          #FDFDFD 72%,
          #f2f6ff 80%,
          #e3ecff 87%,
          #d0e0ff 93%,
          #bcd5ff 97%,
          #aecbff 100%);
  --app-background-repeat: no-repeat;
  --app-background-size: 100% 100%;
  --app-background-position: center;
  --app-text-color: var(--white-text);
  --pdf-preview-background: rgba(255, 255, 255, 0.98);
  --app-body-height: auto;
  --app-body-min-height: 100vh;
  --app-letter-spacing: 0.01em;
  --app-line-height: 1.55;
  --auto-calc-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 247, 255, 0.96) 52%, rgba(var(--accent-rgb, 23, 103, 255), 0.18) 100%);
  --auto-calc-border: rgba(var(--accent-rgb, 23, 103, 255), 0.28);
  --auto-calc-text: #0b1f44;
  --auto-calc-subtext: rgba(11, 31, 68, 0.6);
  --auto-calc-ring: rgba(var(--accent-rgb, 23, 103, 255), 0.95);
  --auto-calc-ring-secondary: rgba(11, 31, 68, 0.85);
  --auto-calc-glow: rgba(var(--accent-rgb, 23, 103, 255), 0.32);
  --auto-calc-card-shadow-base: 0 18px 38px -18px rgba(var(--accent-rgb, 23, 103, 255), 0.26), 0 12px 26px -20px rgba(11, 31, 68, 0.18);
  --auto-calc-card-shadow-peak: 0 26px 46px -16px rgba(var(--accent-rgb, 23, 103, 255), 0.32), 0 14px 28px -18px rgba(11, 31, 68, 0.14);
  --auto-calc-sheen-gradient: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2) 38%, rgba(var(--accent-rgb, 23, 103, 255), 0.32) 58%, rgba(255, 255, 255, 0.18) 75%, transparent 92%);
  --auto-calc-sheen-start: -150%;
  --auto-calc-sheen-end: 150%;
  --auto-calc-sheen-opacity: 0.6;
  --auto-calc-spinner-secondary-opacity: 0.8;
  --nav-height: 60px;
  --nav-brand-color: #0b1f44;
  --nav-brand-hover-color: var(--accent-color, #0f4ed8);
  --nav-link-color: rgba(0, 0, 0, 0.7);
  --nav-link-hover-color: var(--accent-color, rgb(13, 110, 253));
  --nav-link-active-color: var(--accent-color, rgb(13, 110, 253));
  --nav-dropdown-toggle-color: rgba(0, 0, 0, 0.7);
  --nav-dropdown-hover-color: rgba(0, 0, 0, 0.7);
  /* Header (.navbar.navbar-dark) auf Weiß — saubere Trennung vom Soft-Surface. */
  --nav-dark-background: #ffffff;
  --nav-header-border: #d0d0d6;
  --nav-header-shadow: 0 2px 16px rgba(15, 42, 97, 0.08);
  --nav-dark-link-color: rgb(108, 117, 125);
  --nav-dark-link-hover-color: var(--white-link-hover, #0f4ed8);
  --nav-dark-brand-color: #0b1f44;
  --nav-dark-brand-hover-color: var(--accent-color, #0f4ed8);
  --nav-tabs-link-color: rgba(0, 0, 0, 0.7);
  --nav-tabs-link-hover-color: var(--accent-color, rgb(13, 110, 253));
  --nav-tabs-link-active-color: var(--accent-color, rgb(13, 110, 253));
  --nav-tabs-link-active-border: var(--accent-color, rgb(13, 110, 253));
  --nav-tabs-link-active-border-width: 2px;
  --nav-tabs-link-active-weight: 600;
  --nav-tabs-icon-color: currentColor;
  --nav-pills-active-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 13, 110, 253), 0.7), rgba(var(--accent-rgb, 13, 110, 253), 1));
  --nav-tool-font-size: 14px;
  --nav-tool-hover-font-size: 14px;
  --nav-tool-color: #6c757d;
  --nav-tool-hover-color: var(--accent-color, rgb(13, 110, 253));
  --nav-tool-active-color: var(--accent-color, rgb(15, 76, 154));
  --nav-bottom-background: transparent;
  --nav-bottom-color: rgb(188, 197, 201);
  --nav-bottom-hover-color: var(--white-link-hover, #0f4ed8);
  --nav-sidebar-background: #ffffff;
  --nav-sidebar-border: rgba(0, 0, 0, 0.1);
  --nav-sidebar-link-color: inherit;
  --nav-sidebar-hover-bg: rgba(var(--accent-rgb, 13, 110, 253), 0.2);
  --nav-sidebar-hover-color: rgba(var(--accent-rgb, 13, 110, 253), 1);
  --form-focus-border: rgba(var(--accent-rgb, 23, 103, 255), 0.65);
  --form-focus-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb, 23, 103, 255), 0.18);
  --form-control-bg: rgba(255, 255, 255, 0.92);
  --form-control-bg-focus: #ffffff;
  /* TEST: Border-Token auf #d0d0d6 — kräftigerer neutraler Grauton.
     Revert-Optionen: #dedee2 (mittel), #e8e8eb (sanft),
     rgba(15, 42, 97, 0.24) (Original mit Blau-Stich). */
  --form-control-border: #d0d0d6;
  /* Vorberechneter Wert: form-control-border rgba(15,42,97,0.24) gemischt
     ueber Weiss. Solid statt transparent, weil die Trennlinie ohne eigenen
     Backdrop direkt auf dem App-Dot-Pattern liegt — semi-transparent wuerde
     punktweise dunkler durchschlagen und dicker wirken. Bei Aenderung der
     form-control-border-Opacity manuell mitziehen. */
  /* TEST: Sidebar-Divider konsistent mit form-control-border auf
     #d0d0d6. Aktuell durch display:none-Test eh unsichtbar,
     hier nur konsistent gehalten.
     Revert: zurück auf #c5ccd9 (Original). */
  --sidebar-divider-color: #d0d0d6;
  --form-control-color: #0b1f44;
  --form-control-placeholder: rgba(10, 10, 20, 0.6);
  --form-control-placeholder-focus: rgba(10, 10, 20, 0.45);
  --form-control-disabled-bg: rgba(246, 247, 252, 0.9);
  --form-control-disabled-color: #4d5f7c;
  --form-control-autofill-bg: rgba(255, 255, 255, 0.85);
  --form-control-autofill-color: #0a0a14;
  --locked-input-opacity: 0.55;
  --locked-input-bg: rgba(240, 242, 248, 0.95);
  --locked-input-color: #6b7a8f;
  --locked-input-border: rgba(15, 42, 97, 0.2);
  --locked-input-overlay: rgba(200, 210, 230, 0.12);
  --form-check-label-color: #6c757d;
  --form-check-link-color: #0b1f44;
  --form-check-link-hover-color: #337eff;
  --form-check-label-hover-color: #0b1f44;
  --range-thumb-bg: var(--accent-color, rgb(13, 110, 253));
  --range-thumb-border: hidden;
  --range-thumb-shadow: none;
  --custom-control-label-color: #6c757d;
  --custom-control-label-hover-color: #0b1f44;
  --custom-control-border-color: rgba(15, 42, 97, 0.18);
  --custom-control-background: rgba(255, 255, 255, 0.9);
  --custom-control-shadow: none;
  --custom-control-checked-background: #0a74da;
  --custom-control-checked-border: #0a74da;
  --custom-control-focus-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb, 13, 110, 253), 0.22);
  /* Switch OFF state - solid gray background */
  --switch-track-solid-bg: #b8bfc6;
  --switch-track-bg: linear-gradient(135deg, #b8bfc6 0%, #a8b0b9 100%);
  --switch-track-border: #9ca3ab;
  --switch-track-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  --switch-track-hover-solid-bg: #a8b0b9;
  --switch-track-hover-bg: linear-gradient(135deg, #a8b0b9 0%, #98a1aa 100%);
  --switch-track-hover-border: #8c949d;
  --switch-track-hover-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 0.2rem rgba(108, 117, 125, 0.15);
  --switch-track-focus-border: #7c858e;
  --switch-track-focus-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 0.25rem rgba(108, 117, 125, 0.2);
  /* Switch ON state - blue background */
  --switch-track-checked-solid-bg: var(--accent-color, #0f62ff);
  --switch-track-checked-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 47, 123, 255), 0.85), var(--accent-color, #0f62ff));
  --switch-track-checked-border: var(--accent-color, #0f62ff);
  /* TEST: weisser Rim entfaellt — checked uebernimmt 1:1 den
     --switch-track-shadow vom OFF-Zustand (Z.159). Beide Zustaende haben
     damit dieselbe Tiefen-Optik (oberer dunkler Inset + dezenter Outer-
     Drop), nur die Farbe wechselt. Konsistenter Look, kein heller
     Highlight-Rim mehr.
     Revert: zurueck auf inset 0 0 0 1px rgba(255,255,255,0.45). */
  --switch-track-checked-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  --switch-track-checked-hover-solid-bg: var(--accent-color, #1d4ed8);
  --switch-track-checked-hover-bg: linear-gradient(135deg, var(--accent-color, #0f62ff), var(--accent-color, #1d4ed8));
  --switch-track-disabled-shadow: inset 0 1px 2px rgba(11, 31, 68, 0.1);
  --switch-track-disabled-opacity: 0.65;
  /* Switch thumb - white circle */
  --switch-thumb-bg: linear-gradient(145deg, #ffffff 15%, #f0f2f5 90%);
  --switch-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
  --switch-thumb-hover-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.12);
  --switch-thumb-checked-bg: linear-gradient(145deg, #ffffff 10%, #e8f1ff 95%);
  --switch-thumb-checked-shadow: 0 3px 10px -2px rgba(13, 80, 255, 0.4), 0 2px 6px -2px rgba(15, 42, 97, 0.3);
  --wl-surface-bg: #ffffff;
  --wl-surface-border: #d0d7de;
  --wl-surface-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  --wl-surface-hover-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
  --wl-surface-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.32) 30%, rgba(var(--accent-rgb, 23, 103, 255), 0.18) 65%, transparent 100%);
  --wl-editor-bg: #ffffff;
  --wl-editor-text: #1f2933;
  --wl-editor-border: #d0d7de;
  --wl-editor-placeholder: #6c757d;
  --wl-editor-caret: var(--accent-color, #0d6efd);
  --wl-editor-focus-border: var(--accent-color, #0d6efd);
  --wl-editor-focus-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb, 13, 110, 253), 0.2);
  --wl-toolbar-bg: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.95));
  --wl-toolbar-border: #e2e8f0;
  --wl-toolbar-button-bg: transparent;
  --wl-toolbar-button-color: #1f2933;
  --wl-toolbar-button-hover-bg: #e8f1ff;
  --wl-toolbar-button-hover-border: #c2d5ff;
  --wl-toolbar-button-hover-color: var(--accent-color, #0d6efd);
  --wl-toolbar-button-active-bg: var(--accent-color, #0d6efd);
  --wl-toolbar-button-active-border: var(--accent-color, #0d6efd);
  --wl-toolbar-button-active-color: #ffffff;
  --wl-toolbar-button-active-shadow: 0 6px 14px rgba(var(--accent-rgb, 13, 110, 253), 0.25);
  --wl-toolbar-button-focus-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb, 13, 110, 253), 0.25);
  --wl-toolbar-dropdown-bg: #ffffff;
  --wl-toolbar-dropdown-border: #d0d7de;
  --wl-toolbar-dropdown-color: #1f2933;
  --wl-toolbar-divider: rgba(15, 42, 97, 0.1);
  --wl-toolbar-button-shadow: 0 2px 6px rgba(15, 42, 97, 0.08);
  --wl-toolbar-button-hover-shadow: 0 10px 20px rgba(var(--accent-rgb, 23, 103, 255), 0.18);
  --wl-toolbar-glyph-bg: rgba(var(--accent-rgb, 23, 103, 255), 0.06);
  --wl-toolbar-glyph-hover-bg: rgba(var(--accent-rgb, 23, 103, 255), 0.18);
  --wl-select-border: #d0d7de;
  --wl-select-background: #ffffff;
  --wl-select-color: #1f2933;
  --wl-select-focus-border: var(--accent-color, #0d6efd);
  --wl-select-focus-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb, 13, 110, 253), 0.25);
  --wl-dropzone-bg: linear-gradient(180deg, #ffffff, #f8fafc);
  --wl-dropzone-border: #cbd5e1;
  --wl-dropzone-color: #4a5568;
  --wl-dropzone-hover-bg: #ffffff;
  --wl-dropzone-hover-border: var(--accent-color, #0d6efd);
  --wl-dropzone-hover-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb, 13, 110, 253), 0.15);
  --wl-meta-bg: rgba(248, 250, 255, 0.9);
  --wl-meta-color: rgba(71, 85, 105, 0.8);
  --wl-meta-subtle: rgba(71, 85, 105, 0.55);
  --wl-meta-count: var(--accent-color, #0d6efd);
  --wl-meta-warning: #e03131;
  --wl-meta-warning-bg: rgba(224, 49, 49, 0.08);
  --wl-editor-scrollbar-thumb: rgba(var(--accent-rgb, 23, 103, 255), 0.35);
  --wl-editor-scrollbar-track: rgba(23, 40, 82, 0.06);
  --wl-editor-link: var(--accent-color, #1767ff);
  --sub-accordion-background: #ffffff;
  --sub-accordion-border: #dee2e6;
  --sub-accordion-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --sub-accordion-blur: blur(0px);
  --sub-accordion-text: inherit;
  --accordion-bg: var(--white-surface, #ffffff);
  --accordion-bg-active: var(--white-bg-soft, #ecf1ff);
  --accordion-hover-bg: var(--white-accent-soft, rgba(var(--accent-rgb, 23, 103, 255), 0.12));
  --accordion-border: var(--white-border, rgba(15, 42, 97, 0.08));
  --accordion-text: var(--white-text, #0b1f44);
  --accordion-hover-text: var(--white-text, #0b1f44);
  --accordion-body-bg: var(--white-surface, #ffffff);
  --accordion-body-text: var(--body-text-color, rgba(30, 46, 80, 0.88));
  --accordion-list-bg: var(--color-surface, rgba(255, 255, 255, 0.98));
  --accordion-list-hover-bg: rgb(238, 245, 255);
  --accordion-list-text: rgb(79, 80, 84);
  --accordion-list-hover-text: var(--white-text, #0b1f44);
  --accordion-icon-filter: none;
  --accordion-icon-opacity: 0.7;
  --accordion-icon-active-filter: drop-shadow(0 0 6px rgba(var(--accent-rgb, 23, 103, 255), 0.45));
  --accordion-icon-active-opacity: 1;
  --badge-strong-text-color: #ffffff;
  --badge-soft-text-color: #0b1f44;
  --heading-color: #0b1f44;
  --heading-weight: 600;
  --heading-h1-color: #0b1f44;
  --heading-h2-color: #133064;
  --heading-h3-color: #2c3f66;
  --heading-h456-color: #4d5f7c;
  --heading-hover-color: var(--accent-color, #1767ff);
  --body-text-color: rgba(30, 46, 80, 0.88);
  --lead-font-size: 1.0625rem;
  --lead-text-color: rgba(30, 46, 80, 0.88);
  --section-title-color: #0b1f44;
  --section-subtitle-color: var(--accent-color, #1767ff);
  --strikethrough-line-width: 2px;
  --mini-info-color: rgba(108, 117, 125, 0.95);
  --mini-info-margin-right: 170px;
  --mini-info-hover-color: #0b1f44;
  --back-to-top-color: inherit;
  --back-to-top-hover-color: inherit;
  --legend-item-gap: 20px;
  --legend-circle-size: 15px;
  --legend-circle-margin: 5px;
  --legend-alpha-color: rgb(220, 53, 69);
  --legend-beta-color: rgb(13, 110, 253);
  --legend-gamma-color: rgb(117, 126, 133);
  --legend-rent-color: rgb(111, 66, 193);
  --plot-add-color: rgb(76, 154, 15);
  --plot-delete-color: rgb(154, 76, 15);
  --plot-ins-delete-color: rgb(50, 50, 50);
  --plot-action-hover-color: var(--white-text, #0b1f44);
  --plot-add-offset: 0px;
  --plot-delete-offset: 3px;
  --plot-ins-delete-offset: 3px;
  --multi-plot-carousel-height: 100vh;
  --multi-plot-carousel-max-height: 100vh;
  --theme-switch-icon-color: rgba(0, 0, 0, 0.7);
  --theme-switch-sun-color: #ffffff;
  --theme-switch-moon-color: #ffffff;
  --carousel-control-filter: none;
  --carousel-control-size: 30px;
  --carousel-icon-size: 30px;
  --carousel-prev-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  --carousel-next-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
  --sidebar-title-color: #0b1f44;
  --sidebar-link-color: rgba(30, 46, 80, 0.8);
  --sidebar-link-hover-bg: rgba(var(--accent-rgb, 23, 103, 255), 0.15);
  --sidebar-link-hover-color: #0b1f44;
  --sidebar-links-gap: 10px;
  --sidebar-link-padding: 5px 10px;
  --sidebar-submenu-gap: 10px;
  --sidebar-submenu-indent: 10px;
  --content-padding: 12px;
  --content-padding-top: 4px;
  --content-padding-right: calc(var(--content-padding, 12px) + 6px);
  --content-padding-left: calc(var(--content-padding, 12px) + 6px);
  --info-icon-color: rgba(120, 130, 140, 1);
  --info-icon-hover-bg: rgba(0, 0, 0, 0.06);
  --info-icon-hover-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
  --info-icon-hover-color: #000000;
  --info-icon-danger-color: #dc3545;
  --info-icon-danger-hover-bg: rgba(220, 53, 69, 0.15);
  --info-icon-danger-hover-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
  --card-radius: var(--radius-md);
  --card-border-width: 1px;
  --card-border: var(--form-control-border);
  --card-padding: 18px;
  --card-background: #ffffff;
  --card-overlay: none;
  --card-overlay-secondary: none;
  --card-overlay-opacity: 0;
  --card-overlay-secondary-opacity: 0;
  --card-overlay-hover-opacity: 0;
  --card-overlay-secondary-hover-opacity: 0;
  --card-overlay-inset: 0;
  --card-overlay-transform: none;
  --card-overlay-secondary-transform: none;
  --card-overlay-hover-transform: none;
  --card-overlay-secondary-hover-transform: none;
  --card-hover-transform: none;
  --card-backdrop-filter: none;
  --card-shadow: 0 10px 24px -18px rgba(15, 42, 97, 0.1);
  --card-shadow-hover: var(--card-shadow);
  --card-color: #0b1f44;
  --av-effect-card-bg: rgba(255, 255, 255, 0.98);
  --av-effect-card-border: rgba(15, 42, 97, 0.08);
  --av-effect-card-foreground: #0b1f44;
  --av-effect-card-muted: rgba(77, 95, 124, 0.76);
  --av-effect-card-positive: #1f9d55;
  --av-effect-footnote-color: rgba(125, 136, 155, 0.75);
  --av-effect-card-shadow: 0 18px 38px -22px rgba(15, 42, 97, 0.18);
  --flash-border-radius: 14px;
  --flash-border-color: var(--white-border-strong, rgba(15, 42, 97, 0.16));
  --flash-background-color: rgba(255, 255, 255, 0.96);
  --flash-text-color: var(--white-text);
  --flash-shadow: 0 14px 32px -24px rgba(15, 42, 97, 0.18);
  --flash-shadow-hover: 0 20px 40px -28px rgba(15, 42, 97, 0.2);
  --flash-default-accent: var(--accent-color, #1767ff);
  --flash-link-color: var(--white-link, #1767ff);
  --flash-link-hover-color: var(--white-link-hover, #0f4ed8);
  --flash-close-filter: invert(0);
  --flash-close-hover-bg: rgba(15, 42, 97, 0.12);
  --flash-close-focus-ring: rgba(var(--accent-rgb, 23, 103, 255), 0.32);
  --flash-success-background: rgba(31, 157, 85, 0.12);
  --flash-success-border: rgba(31, 157, 85, 0.28);
  --flash-success-text: #1f472c;
  --flash-warning-background: rgba(245, 159, 0, 0.12);
  --flash-warning-border: rgba(245, 159, 0, 0.28);
  --flash-warning-text: #6b4800;
  --flash-danger-background: rgba(224, 49, 49, 0.12);
  --flash-danger-border: rgba(224, 49, 49, 0.28);
  --flash-danger-text: #5c1111;
  --flash-info-background: rgba(var(--accent-rgb, 23, 103, 255), 0.12);
  --flash-info-border: rgba(var(--accent-rgb, 23, 103, 255), 0.28);
  --flash-info-text: #0b1f44;
  /* Neutrales Hellgrau identisch zur App-Base-Color (--white-bg = #f5f5f7).
     NICHT var(--app-background), weil das ein Gradient ist — auf einer
     kleinen Box wirkt der Gradient seltsam. */
  --payout-highlight-bg: var(--app-background);
  --payout-highlight-border: #BEC4D2;
  --payout-highlight-text: #0b1f44;
  --payout-highlight-title: #0b1f44;
  --payout-highlight-sub: rgba(11, 31, 68, 0.55);
  --payout-chip-bg: rgba(255, 255, 255, 0.9);
  --payout-chip-border: rgba(11, 31, 68, 0.08);
  --payout-chip-color: #112a4b;
  --payout-chip-hover-shadow: 0 6px 16px rgba(var(--accent-rgb, 13, 110, 253), 0.15);
  --payout-chip-net-bg: rgba(25, 135, 84, 0.15);
  --payout-chip-net-border: rgba(25, 135, 84, 0.28);
  --payout-chip-net-color: #0f5132;
  --payout-chip-brut-bg: rgba(var(--accent-rgb, 13, 110, 253), 0.15);
  --payout-chip-brut-border: rgba(var(--accent-rgb, 13, 110, 253), 0.26);
  --payout-chip-brut-color: #0b3a87;
  --dropdown-bg: #ffffff;
  --dropdown-border: #d0d0d6;
  --dropdown-item-color: #0b1f44;
  --dropdown-item-hover-bg: #5c98ff;
  --dropdown-item-hover-color: #ffffff;
  --dropdown-item-active-bg: #5c98ff;
  --dropdown-item-active-color: #ffffff;
  --dropdown-divider-color: rgba(var(--accent-rgb, 13, 110, 253), 0.12);
  --dropdown-toggle-color: #0b1f44;
  --dropdown-toggle-border: rgba(224, 226, 244, 1);
  --dropdown-toggle-hover-bg: rgba(var(--accent-rgb, 13, 110, 253), 0.1);
  --dropdown-toggle-hover-color: #0b1f44;
  --dropdown-arrow-color: #ffffff;
  /* Anlagefinder-Sidebar Buttons */
  --sidebar-pill-active-bg: var(--accent-color, #1767ff);
  --sidebar-pill-active-color: #ffffff;
  /* Sekundaerbuttons (Depot/Erweiterte Einstellungen) tragen exakt den
     Container-Card-Grauton. Hover faellt auf gemeinsames Hover-Glow zurueck
     (siehe .btn-sidebar-secondary:hover in buttons.css). */
  --btn-sidebar-secondary-bg: #E4E7EF;
  --btn-sidebar-secondary-color: #0b1f44;
  --btn-sidebar-secondary-hover-bg: var(--surface-soft-bg);
  --sidebar-element-gap: 24px;
  --sidebar-element-height: 45px;
  --btn-shared-radius: 14px;
  --btn-shared-padding: 0.65rem 1.3rem;
  --btn-shared-gap: 0.4rem;
  --btn-shared-font-size: 0.95rem;
  --btn-shared-weight: 600;
  --btn-shared-letter-spacing: 0.01em;
  --btn-border-width: 1px;
  --btn-focus-ring: 0 0 0 3px rgba(var(--accent-rgb, 23, 103, 255), 0.25);
  --btn-active-translate: 0;
  --btn-hover-translate: -2px;
  --btn-sm-padding: 0.45rem 0.95rem;
  --btn-sm-font-size: 0.85rem;
  --btn-lg-padding: 0.95rem 1.8rem;
  --btn-lg-font-size: 1.08rem;
  --btn-icon-size: 1.05em;
  --btn-shadow: none;
  --btn-custom-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(236, 244, 255, 0.95));
  --btn-custom-border: rgba(var(--accent-rgb, 23, 103, 255), 0.22);
  --btn-custom-color: rgba(11, 31, 68, 0.85);
  --btn-custom-hover-border: rgba(var(--accent-rgb, 23, 103, 255), 0.42);
  --btn-custom-hover-bg: linear-gradient(135deg, rgba(236, 244, 255, 0.98), rgba(200, 221, 255, 0.98));
  --btn-custom-hover-color: rgba(11, 31, 68, 0.98);
  --btn-primary-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 23, 103, 255), 0.92), rgba(51, 126, 255, 0.98));
  --btn-primary-color: #ffffff;
  --btn-primary-border: transparent;
  --btn-primary-shadow: 0 18px 44px -22px rgba(var(--accent-rgb, 23, 103, 255), 0.4);
  --btn-primary-hover-bg: linear-gradient(135deg, rgba(51, 126, 255, 0.98), rgba(var(--accent-rgb, 23, 103, 255), 0.92));
  --btn-primary-hover-shadow: 0 24px 54px -24px rgba(var(--accent-rgb, 23, 103, 255), 0.44);
  --btn-secondary-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 23, 103, 255), 0.22), rgba(82, 143, 255, 0.32));
  --btn-secondary-color: rgba(255, 255, 255, 0.95);
  --btn-secondary-before-bg: radial-gradient(circle, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 65%);
  --btn-secondary-before-opacity: 0.65;
  --btn-secondary-hover-bg: linear-gradient(135deg, rgba(51, 126, 255, 0.38), rgba(var(--accent-rgb, 23, 103, 255), 0.46));
  --btn-secondary-hover-color: #ffffff;
  --btn-secondary-hover-shadow: 0 16px 32px -20px rgba(15, 42, 97, 0.35), 0 0 18px rgba(var(--accent-rgb, 23, 103, 255), 0.32);
  --btn-secondary-before-hover-opacity: 0.85;
  --btn-secondary-active-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 23, 103, 255), 0.5), rgba(var(--accent-rgb, 13, 110, 253), 0.62));
  --btn-secondary-active-shadow: 0 6px 14px rgba(15, 42, 97, 0.28);
  --btn-outline-border-width: 2px;
  --btn-outline-backdrop: blur(8px);
  --btn-outline-shadow: 0 12px 26px -20px rgba(15, 42, 97, 0.28);
  --btn-outline-primary-border: rgba(var(--accent-rgb, 23, 103, 255), 0.7);
  --btn-outline-primary-color: rgba(var(--accent-rgb, 23, 103, 255), 0.95);
  --btn-outline-primary-hover-bg: linear-gradient(135deg, rgba(51, 126, 255, 0.95), rgba(var(--accent-rgb, 23, 103, 255), 1));
  --btn-outline-primary-hover-color: #ffffff;
  --btn-outline-primary-hover-shadow: 0 18px 38px -24px rgba(var(--accent-rgb, 23, 103, 255), 0.45);
  --btn-outline-success-border: rgba(40, 167, 69, 0.7);
  --btn-outline-success-color: rgba(40, 167, 69, 0.95);
  --btn-outline-success-shadow: 0 12px 26px -20px rgba(40, 167, 69, 0.3);
  --btn-outline-success-hover-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.95));
  --btn-outline-success-hover-color: #ffffff;
  --btn-outline-success-hover-shadow: 0 18px 36px -24px rgba(40, 167, 69, 0.35);
  --btn-outline-warning-color: rgba(207, 138, 0, 0.95);
  --btn-outline-warning-border: rgba(255, 193, 7, 0.75);
  --btn-outline-warning-hover-bg: linear-gradient(135deg, rgba(255, 193, 7, 0.92), rgba(255, 177, 0, 0.95));
  --btn-outline-warning-hover-color: rgba(11, 31, 68, 0.92);
  --btn-outline-warning-hover-shadow: 0 18px 36px -24px rgba(255, 193, 7, 0.4);
  --btn-outline-warning-focus-shadow: 0 0 0 0.22rem rgba(255, 193, 7, 0.38);
  --btn-outline-danger-color: rgba(224, 49, 49, 0.92);
  --btn-outline-danger-border: rgba(224, 49, 49, 0.7);
  --btn-outline-danger-hover-bg: linear-gradient(135deg, rgba(224, 49, 49, 0.9), rgba(250, 82, 82, 0.95));
  --btn-outline-danger-hover-color: #ffffff;
  --btn-outline-danger-hover-shadow: 0 18px 36px -24px rgba(224, 49, 49, 0.45);
  --btn-outline-danger-focus-shadow: 0 0 0 0.22rem rgba(224, 49, 49, 0.35);
  --btn-outline-info-color: rgba(var(--accent-rgb, 13, 110, 253), 0.9);
  --btn-outline-info-border: rgba(var(--accent-rgb, 13, 110, 253), 0.7);
  --btn-outline-info-hover-bg: linear-gradient(135deg, rgba(51, 126, 255, 0.92), rgba(var(--accent-rgb, 13, 110, 253), 1));
  --btn-outline-info-hover-color: #ffffff;
  --btn-outline-info-hover-shadow: 0 18px 36px -24px rgba(var(--accent-rgb, 13, 110, 253), 0.42);
  --btn-outline-info-focus-shadow: 0 0 0 0.22rem rgba(var(--accent-rgb, 13, 110, 253), 0.35);
  --btn-outline-light-color: rgba(11, 31, 68, 0.85);
  --btn-outline-light-border: rgba(11, 31, 68, 0.28);
  --btn-outline-light-hover-bg: rgba(255, 255, 255, 0.9);
  --btn-outline-light-hover-color: rgba(11, 31, 68, 0.9);
  --btn-outline-light-hover-shadow: 0 16px 34px -24px rgba(11, 31, 68, 0.18);
  --btn-outline-light-focus-shadow: 0 0 0 0.22rem rgba(var(--accent-rgb, 23, 103, 255), 0.18);
  --support-fab-size: 66px;
  --support-fab-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --support-fab-color: #ffffff;
  --support-fab-border: rgba(118, 75, 162, 0.3);
  --support-fab-shadow: 
    0 8px 32px -8px rgba(102, 126, 234, 0.4),
    0 4px 16px -4px rgba(118, 75, 162, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  --support-fab-hover-bg: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  --support-fab-hover-border: rgba(255, 255, 255, 0.8);
  --support-fab-hover-shadow: 
    0 12px 40px -8px rgba(102, 126, 234, 0.5),
    0 8px 24px -4px rgba(118, 75, 162, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  --support-fab-bottom: 28px;
  --support-fab-right: 28px;
  --support-fab-z-index: 1080;
  --support-fab-icon-size: 26px;
  --btn-outline-secondary-padding: 10px;
  --btn-outline-secondary-color: rgba(23, 43, 78, 0.9);
  --btn-outline-secondary-border-width: 2px;
  --btn-outline-secondary-border: rgba(var(--accent-rgb, 23, 103, 255), 0.42);
  --btn-outline-secondary-bg: linear-gradient(140deg, rgba(var(--accent-rgb, 23, 103, 255), 0.12), rgba(82, 143, 255, 0.09));
  --btn-outline-secondary-backdrop: blur(14px);
  --btn-outline-secondary-font-weight: 600;
  --btn-outline-secondary-font-size: 0.95rem;
  --btn-outline-secondary-shadow: 0 22px 42px -30px rgba(15, 42, 97, 0.26), 0 0 0 1px rgba(var(--accent-rgb, 23, 103, 255), 0.16);
  --btn-outline-secondary-before-bg: radial-gradient(circle, rgba(var(--accent-rgb, 23, 103, 255), 0.25), rgba(var(--accent-rgb, 23, 103, 255), 0) 72%);
  --btn-outline-secondary-before-opacity: 0.54;
  --btn-outline-secondary-before-hover-opacity: 0.78;
  --btn-outline-secondary-hover-color: #ffffff;
  --btn-outline-secondary-hover-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 23, 103, 255), 0.78), rgba(82, 143, 255, 0.92));
  --btn-outline-secondary-hover-border: rgba(255, 255, 255, 0.65);
  --btn-outline-secondary-hover-shadow: 0 30px 58px -32px rgba(15, 42, 97, 0.38), 0 0 16px rgba(var(--accent-rgb, 23, 103, 255), 0.38);
  --btn-outline-secondary-hover-backdrop: blur(24px);
  /* TEST: Warnbanner-Tokens global auf Fonder-Orange (#f59e0b). component_colors.css
     .alert.alert-warning:not(.flash-message) nutzt diese Tokens direkt. Vorher
     waren die Tokens im Light nicht gesetzt → Fallback Bootstrap-Yellow
     (#fff3cd / #ffecb5 / #664d03) aus der Regel. Revert: diesen Block entfernen. */
  --alert-warning-background: rgba(245, 158, 11, 0.10);
  --alert-warning-border: #f59e0b;
  --alert-warning-text: #f59e0b;
  --table-text-color: #0b1f44;
  /* TEST: Tabellen-Grunddesign Etappe 2 — weiß + Trennlinien statt Zebra.
     Revert: --table-row-bg/--table-row-alt-bg auseinanderziehen, --table-
     backdrop-filter wieder "blur(20px) brightness(1.1)", --table-row-
     hover-bg wieder "rgba(var(--accent-rgb, 13, 110, 253), 0.1)". */
  --table-background: #ffffff;
  --table-header-bg: #ffffff;
  --table-header-color: #0b1f44;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #ffffff;
  --table-row-hover-bg: var(--hover-glow-bg);
  --table-row-divider: var(--form-control-border);
  --table-link-color: #5c98ff;
  --table-link-hover-color: #337eff;
  /* table-box-shadow: 2026-05-13 global auf none gestellt — Tabellen-
     Design wird später separat überarbeitet. Re-Aktivieren: alten Wert
     "0 8px 20px rgba(0, 0, 0, 0.3)" zurücksetzen. */
  --table-box-shadow: none;
  --table-backdrop-filter: none;
  --modal-radius: 20px;
  /* TEST: Modal-Pattern auf weiß+grau+border-color umgestellt.
     Modal-Content/Header/Footer weiß, Body grau (siehe modals.css),
     Trennlinien in --form-control-border-Farbe.
     Revert: Werte zurück auf alte Gradient/Blau-Tinted-Werte. */
  --modal-bg: #ffffff;
  --modal-border: rgba(var(--accent-rgb, 23, 103, 255), 0.16);
  --modal-shadow: 0 34px 70px -32px rgba(15, 42, 97, 0.24), 0 0 0 1px rgba(var(--accent-rgb, 23, 103, 255), 0.12);
  --modal-backdrop-filter: none;
  --modal-backdrop-bg: rgba(11, 31, 68, 0.65);
  --modal-backdrop-bg-center: rgba(11, 31, 68, 0.35);
  --modal-header-bg: #ffffff;
  --modal-header-color: rgba(11, 31, 68, 0.95);
  --modal-body-color: rgba(30, 46, 80, 0.88);
  --modal-footer-bg: #ffffff;
  --modal-divider-color: var(--form-control-border);
  --modal-close-color: rgba(11, 31, 68, 0.7);
  /* TEST: Close-Button-Hover auf neutrales Hover-Glow-Grau,
     konsistent mit Info-Icon und Zahnrad-Buttons.
     Revert: alte rgba-Werte. */
  --modal-close-hover-bg: var(--hover-glow-bg);
  --modal-close-hover-color: #000000;
  --modal-close-filter: none;
  --modal-close-hover-filter: brightness(1.05);
  --icon-feather-size: 14px;
  --icon-menu-size: 32px;
  --icon-menu-color: rgba(0, 0, 0, 0.7);
  --icon-chat-size: 42px;
  --icon-chat-color: rgba(var(--accent-rgb, 13, 110, 253), 1);
  --icon-chat-hover-color: rgba(var(--accent-rgb, 13, 110, 253), 0.5);
  --range-switch-track-bg: #ddd;
  --range-switch-thumb-default-bg: gray;
  --range-switch-thumb-active-bg: var(--accent-color, rgb(13, 110, 253));
  --binary-switch-background: rgba(233, 238, 255, 0.9);
  --binary-switch-border: rgba(var(--accent-rgb, 13, 110, 253), 0.22);
  --binary-switch-color: rgba(17, 42, 75, 0.65);
  --binary-switch-focus-border: rgba(var(--accent-rgb, 13, 110, 253), 0.5);
  --binary-switch-focus-shadow: 0 0 0 3px rgba(var(--accent-rgb, 13, 110, 253), 0.18);
  --binary-switch-indicator-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 13, 110, 253), 0.24), rgba(var(--accent-rgb, 13, 110, 253), 0.12));
  --binary-switch-indicator-shadow: 0 6px 18px rgba(var(--accent-rgb, 13, 110, 253), 0.2);
  --binary-switch-active-color: #0b3a87;
  --cookie-banner-padding: 24px;
  --cookie-banner-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 255, 0.95));
  --cookie-banner-text: rgba(11, 31, 68, 0.92);
  --cookie-banner-border: rgba(var(--accent-rgb, 23, 103, 255), 0.5);
  --cookie-banner-border-width: 4px;
  --cookie-banner-shadow: rgba(15, 42, 97, 0.18);
  --cookie-banner-backdrop: blur(16px);
  --cookie-banner-highlight: linear-gradient(120deg, rgba(var(--accent-rgb, 23, 103, 255), 0.18), transparent 70%);
  --cookie-banner-highlight-opacity: 1;
  --cookie-banner-pattern: radial-gradient(140% 130% at 0% 0%, rgba(var(--accent-rgb, 23, 103, 255), 0.14), transparent 62%);
  --cookie-banner-pattern-opacity: 0.35;
  --cookie-banner-pattern-transform: rotate(10deg);
  --cookie-heading-color: rgba(11, 31, 68, 0.95);
  --cookie-paragraph-color: rgba(30, 46, 80, 0.85);
  --cookie-category-bg: rgba(255, 255, 255, 0.92);
  --cookie-category-border: rgba(var(--accent-rgb, 23, 103, 255), 0.18);
  --cookie-category-shadow: 0 18px 42px -28px rgba(15, 42, 97, 0.16);
  --cookie-category-backdrop: blur(10px);
  --cookie-category-heading-color: rgba(11, 31, 68, 0.95);
  --cookie-button-color: rgba(11, 31, 68, 0.85);
  --cookie-button-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 23, 103, 255), 0.1), rgba(var(--accent-rgb, 23, 103, 255), 0.2));
  --cookie-button-border: rgba(var(--accent-rgb, 23, 103, 255), 0.28);
  --cookie-button-shadow: 0 12px 28px -22px rgba(15, 42, 97, 0.25);
  --cookie-button-hover-shadow: 0 18px 36px -24px rgba(15, 42, 97, 0.3);
  --cookie-button-accept-bg: linear-gradient(135deg, rgba(76, 175, 80, 0.28), rgba(46, 204, 113, 0.45));
  --cookie-button-accept-color: #ffffff;
  --cookie-button-accept-border: rgba(46, 204, 113, 0.48);
  --cookie-button-accept-shadow: 0 18px 40px -26px rgba(46, 204, 113, 0.42);
  --cookie-button-accept-hover-bg: linear-gradient(135deg, rgba(46, 204, 113, 0.55), rgba(33, 150, 83, 0.72));
  --cookie-button-reject-bg: linear-gradient(135deg, rgba(249, 94, 94, 0.28), rgba(239, 65, 65, 0.45));
  --cookie-button-reject-color: #ffffff;
  --cookie-button-reject-border: rgba(239, 65, 65, 0.48);
  --cookie-button-reject-shadow: 0 18px 40px -26px rgba(239, 65, 65, 0.42);
  --cookie-button-reject-hover-bg: linear-gradient(135deg, rgba(239, 65, 65, 0.6), rgba(224, 49, 49, 0.78));
  --cookie-button-settings-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(236, 244, 255, 0.32));
  --cookie-button-settings-color: rgba(11, 31, 68, 0.8);
  --cookie-button-settings-border: rgba(15, 42, 97, 0.12);
  --cookie-button-settings-shadow: 0 16px 32px -24px rgba(15, 42, 97, 0.22);
  --cookie-button-settings-hover-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(236, 244, 255, 0.58));
  --cookie-button-settings-hover-color: rgba(11, 31, 68, 0.85);
  --cookie-button-info-bg: linear-gradient(135deg, rgba(var(--accent-rgb, 23, 103, 255), 0.12), rgba(51, 126, 255, 0.22));
  --cookie-button-info-color: rgba(var(--accent-rgb, 23, 103, 255), 0.85);
  --cookie-button-info-border: rgba(var(--accent-rgb, 23, 103, 255), 0.35);
  --cookie-button-info-shadow: 0 16px 32px -24px rgba(var(--accent-rgb, 23, 103, 255), 0.32);
  --cookie-button-info-hover-bg: linear-gradient(135deg, rgba(51, 126, 255, 0.4), rgba(var(--accent-rgb, 23, 103, 255), 0.55));
  --cookie-button-info-hover-color: #ffffff;
  --cookie-check-filter: brightness(1.2);
  --cookie-icon-spacing: 6px;
  --loom-overlay-bg: rgba(0, 0, 0, 0.1);
  --loom-spinner-border: rgba(0, 0, 0, 0.25);
  --loom-spinner-border-top: #007bff;
  --loom-loading-text-color: #666666;
  --embed-consent-bg: #f1f5f9;
  --embed-consent-border: #94a3b8;
  --embed-consent-title-color: #0f172a;
  --embed-consent-text-color: #475569;
  --chart-loader-overlay-bg: radial-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.15));
  --chart-loader-overlay-alt-bg: radial-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.05));
  --chart-spinner-border: rgba(0, 0, 0, 0.25);
  --chart-spinner-border-top: var(--accent-color, #0d6efd);

  /* Beratungsflow / Endkunden-Rentencheck (DESIGN_SYSTEM.md §5.15, aus fonder-v6): EINE Karte fuer die Flow-Seiten.
     Stufe 1 = Karte auf dem Seitenhintergrund, Stufe 2 = Kasten in einer Karte (flach). */
  --strategie-karte-bg: var(--white-surface);
  --v6-karte-bg: #ffffff;
  --v6-karte-rand: rgba(15, 42, 97, 0.10);
  --v6-karte-schatten: 0 2px 16px rgba(15, 42, 97, 0.08);
  --v6-kasten-bg: #ffffff;
  --v6-hinweis-bg: rgba(0, 0, 0, 0.02);
  --v6-hinweis-text: #6c757d;
  --white-warning-soft: rgba(245, 159, 0, 0.12);
}