:root {
  --bg: #0b1220;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.085);
  --border: rgba(255, 255, 255, 0.12);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.7);
  --muted2: rgba(255, 255, 255, 0.55);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --radius: 18px;
  --radius-sm: 14px;
  --accent: #8b5cf6;
  --accent2: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --focus: 0 0 0 4px rgba(139, 92, 246, 0.35);
  /* Theme-fähige Hintergründe */
  --grad1: rgba(139, 92, 246, 0.25);
  --grad2: rgba(34, 197, 94, 0.2);
  --grad3: rgba(59, 130, 246, 0.18);
  --input-bg: rgba(10, 16, 30, 0.55);
  --card-bg: rgba(10, 16, 30, 0.6);
  --input-border: rgba(255, 255, 255, 0.14);
  --placeholder: rgba(255, 255, 255, 0.35);
  --login-bg: rgba(15, 23, 42, 0.9);
  /* Oberflächen (Buttons, Chips, Icon-Btns, Badges) */
  --surface: rgba(255, 255, 255, 0.06);
  --surface-border: rgba(255, 255, 255, 0.14);
  --surface-text: rgba(255, 255, 255, 0.85);
  --divider: rgba(255, 255, 255, 0.08);
  --badge-bg: rgba(139, 92, 246, 0.14);
  --badge-border: rgba(255, 255, 255, 0.14);
  --badge-text: rgba(255, 255, 255, 0.88);
  --pill-bg: rgba(10, 16, 30, 0.5);
  /* Modal */
  --modal-bg: linear-gradient(180deg, #020617, #020617f5);
  --modal-border: rgba(148, 163, 184, 0.8);
  --modal-divider: rgba(148, 163, 184, 0.45);
  --modal-preview-bg: rgba(15, 23, 42, 0.7);
  --modal-backdrop: rgba(15, 23, 42, 0.75);
}

/* Dark Purple (Standard) – explizit als dark1, damit Design-System zuverlässig Textfarbe etc. setzt */
[data-theme="dark1"] {
  --bg: #0b1220;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.085);
  --border: rgba(255, 255, 255, 0.12);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.7);
  --muted2: rgba(255, 255, 255, 0.55);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --radius: 18px;
  --radius-sm: 14px;
  --accent: #8b5cf6;
  --accent2: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --focus: 0 0 0 4px rgba(139, 92, 246, 0.35);
  --grad1: rgba(139, 92, 246, 0.25);
  --grad2: rgba(34, 197, 94, 0.2);
  --grad3: rgba(59, 130, 246, 0.18);
  --input-bg: rgba(10, 16, 30, 0.55);
  --card-bg: rgba(10, 16, 30, 0.6);
  --input-border: rgba(255, 255, 255, 0.14);
  --placeholder: rgba(255, 255, 255, 0.35);
  --login-bg: rgba(15, 23, 42, 0.9);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-border: rgba(255, 255, 255, 0.14);
  --surface-text: rgba(255, 255, 255, 0.85);
  --divider: rgba(255, 255, 255, 0.08);
  --badge-bg: rgba(139, 92, 246, 0.14);
  --badge-border: rgba(255, 255, 255, 0.14);
  --badge-text: rgba(255, 255, 255, 0.88);
  --pill-bg: rgba(10, 16, 30, 0.5);
  --modal-bg: linear-gradient(180deg, #020617, #020617f5);
  --modal-border: rgba(148, 163, 184, 0.8);
  --modal-divider: rgba(148, 163, 184, 0.45);
  --modal-preview-bg: rgba(15, 23, 42, 0.7);
  --modal-backdrop: rgba(15, 23, 42, 0.75);
}

/* ═══ Themes ═══════════════════════════════════════════════════════════════ */
[data-theme="dark2"] {
  --bg: #0d1b2e;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.1);
  --input-bg: rgba(5, 15, 30, 0.6);
  --card-bg: rgba(5, 15, 30, 0.65);
  --input-border: rgba(255, 255, 255, 0.12);
  --accent: #0ea5e9;
  --focus: 0 0 0 4px rgba(14, 165, 233, 0.35);
  --grad1: rgba(14, 165, 233, 0.2);
  --grad2: rgba(34, 197, 94, 0.15);
  --grad3: rgba(99, 102, 241, 0.15);
  --badge-bg: rgba(14, 165, 233, 0.14);
}

[data-theme="dark3"] {
  --bg: #0f0f14;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-strong: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --input-bg: rgba(20, 20, 28, 0.7);
  --card-bg: rgba(20, 20, 28, 0.65);
  --input-border: rgba(255, 255, 255, 0.1);
  --accent: #10b981;
  --focus: 0 0 0 4px rgba(16, 185, 129, 0.3);
  --grad1: rgba(16, 185, 129, 0.18);
  --grad2: rgba(59, 130, 246, 0.15);
  --grad3: rgba(139, 92, 246, 0.12);
  --badge-bg: rgba(16, 185, 129, 0.14);
}

[data-theme="dark4"] {
  --bg: #05030a;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(248, 148, 37, 0.6);
  --text: rgba(252, 252, 252, 0.94);
  --muted: rgba(252, 211, 166, 0.8);
  --muted2: rgba(248, 179, 99, 0.7);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
  --accent: #f97316;
  --focus: 0 0 0 4px rgba(249, 115, 22, 0.45);
  --grad1: rgba(249, 115, 22, 0.25);
  --grad2: rgba(249, 168, 37, 0.18);
  --grad3: rgba(248, 113, 113, 0.18);
  --input-bg: rgba(15, 15, 25, 0.85);
  --card-bg: rgba(15, 15, 25, 0.92);
  --input-border: rgba(249, 115, 22, 0.55);
  --placeholder: rgba(248, 179, 99, 0.65);
  --login-bg: radial-gradient(circle at top, #1e1305 0, #05030a 55%);
  --surface: rgba(249, 115, 22, 0.11);
  --surface-border: rgba(248, 179, 99, 0.6);
  --surface-text: rgba(252, 252, 252, 0.94);
  --divider: rgba(248, 179, 99, 0.4);
  --badge-bg: rgba(248, 148, 37, 0.28);
  --badge-border: rgba(248, 148, 37, 0.7);
  --badge-text: rgba(255, 244, 230, 0.96);
  --pill-bg: rgba(15, 15, 25, 0.95);
  --modal-bg: linear-gradient(180deg, #05030a, #1a0b05);
  --modal-border: rgba(248, 148, 37, 0.85);
  --modal-divider: rgba(248, 179, 99, 0.6);
  --modal-preview-bg: rgba(15, 15, 25, 0.9);
  --modal-backdrop: rgba(15, 10, 5, 0.85);
}

[data-theme="light1"] {
  color-scheme: light;
  --bg: #eef2f8;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: rgba(255, 255, 255, 0.92);
  --border: rgba(0, 0, 0, 0.1);
  --text: rgba(15, 23, 42, 0.92);
  --muted: rgba(15, 23, 42, 0.6);
  --muted2: rgba(15, 23, 42, 0.45);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  --accent: #7c3aed;
  --focus: 0 0 0 4px rgba(124, 58, 237, 0.22);
  --grad1: rgba(124, 58, 237, 0.08);
  --grad2: rgba(34, 197, 94, 0.06);
  --grad3: rgba(59, 130, 246, 0.07);
  --input-bg: rgba(255, 255, 255, 0.85);
  --card-bg: rgba(255, 255, 255, 0.75);
  --input-border: rgba(0, 0, 0, 0.12);
  --placeholder: rgba(15, 23, 42, 0.35);
  --login-bg: rgba(230, 235, 245, 0.92);
  --surface: rgba(0, 0, 0, 0.05);
  --surface-border: rgba(0, 0, 0, 0.1);
  --surface-text: rgba(15, 23, 42, 0.85);
  --divider: rgba(0, 0, 0, 0.08);
  --badge-bg: rgba(124, 58, 237, 0.1);
  --badge-border: rgba(124, 58, 237, 0.28);
  --badge-text: rgba(15, 23, 42, 0.88);
  --pill-bg: rgba(255, 255, 255, 0.65);
  --modal-bg: linear-gradient(180deg, #f5f8ff, rgba(238, 242, 248, 0.97));
  --modal-border: rgba(0, 0, 0, 0.12);
  --modal-divider: rgba(0, 0, 0, 0.08);
  --modal-preview-bg: rgba(210, 220, 240, 0.55);
  --modal-backdrop: rgba(100, 120, 160, 0.35);
}

[data-theme="light2"] {
  color-scheme: light;
  --bg: #fdf6e3;
  --panel: rgba(255, 249, 225, 0.8);
  --panel-strong: rgba(255, 249, 225, 0.96);
  --border: rgba(120, 80, 0, 0.14);
  --text: rgba(55, 35, 5, 0.92);
  --muted: rgba(55, 35, 5, 0.6);
  --muted2: rgba(55, 35, 5, 0.45);
  --shadow: 0 20px 60px rgba(100, 60, 0, 0.12);
  --accent: #c2410c;
  --focus: 0 0 0 4px rgba(194, 65, 12, 0.22);
  --grad1: rgba(194, 65, 12, 0.09);
  --grad2: rgba(34, 197, 94, 0.07);
  --grad3: rgba(214, 158, 11, 0.1);
  --input-bg: rgba(255, 253, 235, 0.9);
  --card-bg: rgba(255, 253, 235, 0.82);
  --input-border: rgba(120, 80, 0, 0.18);
  --placeholder: rgba(55, 35, 5, 0.35);
  --login-bg: rgba(245, 235, 195, 0.92);
  --surface: rgba(0, 0, 0, 0.05);
  --surface-border: rgba(120, 80, 0, 0.14);
  --surface-text: rgba(55, 35, 5, 0.85);
  --divider: rgba(120, 80, 0, 0.08);
  --badge-bg: rgba(194, 65, 12, 0.1);
  --badge-border: rgba(194, 65, 12, 0.28);
  --badge-text: rgba(55, 35, 5, 0.88);
  --pill-bg: rgba(255, 249, 215, 0.75);
  --modal-bg: linear-gradient(180deg, #fffbee, rgba(253, 246, 227, 0.97));
  --modal-border: rgba(120, 80, 0, 0.18);
  --modal-divider: rgba(120, 80, 0, 0.1);
  --modal-preview-bg: rgba(245, 235, 195, 0.55);
  --modal-backdrop: rgba(160, 120, 40, 0.25);
}

[data-theme="light3"] {
  color-scheme: light;
  --bg: #f0f4f8;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: rgba(255, 255, 255, 0.95);
  --border: rgba(0, 0, 0, 0.09);
  --text: rgba(30, 41, 59, 0.92);
  --muted: rgba(30, 41, 59, 0.58);
  --muted2: rgba(30, 41, 59, 0.42);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  --accent: #0d9488;
  --focus: 0 0 0 4px rgba(13, 148, 136, 0.2);
  --grad1: rgba(13, 148, 136, 0.07);
  --grad2: rgba(34, 197, 94, 0.06);
  --grad3: rgba(59, 130, 246, 0.06);
  --input-bg: rgba(255, 255, 255, 0.9);
  --card-bg: rgba(255, 255, 255, 0.8);
  --input-border: rgba(0, 0, 0, 0.1);
  --placeholder: rgba(30, 41, 59, 0.38);
  --login-bg: rgba(226, 232, 240, 0.94);
  --surface: rgba(0, 0, 0, 0.04);
  --surface-border: rgba(0, 0, 0, 0.09);
  --surface-text: rgba(30, 41, 59, 0.88);
  --divider: rgba(0, 0, 0, 0.06);
  --badge-bg: rgba(13, 148, 136, 0.1);
  --badge-border: rgba(13, 148, 136, 0.25);
  --badge-text: rgba(30, 41, 59, 0.88);
  --pill-bg: rgba(255, 255, 255, 0.7);
  --modal-bg: linear-gradient(180deg, #f8fafc, rgba(240, 244, 248, 0.98));
  --modal-border: rgba(0, 0, 0, 0.1);
  --modal-divider: rgba(0, 0, 0, 0.06);
  --modal-preview-bg: rgba(226, 232, 240, 0.5);
  --modal-backdrop: rgba(100, 116, 139, 0.3);
}

[data-theme="light4"] {
  color-scheme: light;
  --bg: #fff7ed;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-strong: rgba(255, 255, 255, 0.98);
  --border: rgba(248, 148, 37, 0.4);
  --text: rgba(26, 20, 10, 0.96);
  --muted: rgba(87, 64, 33, 0.78);
  --muted2: rgba(120, 82, 38, 0.6);
  --shadow: 0 22px 70px rgba(248, 148, 37, 0.18);
  --accent: #ea580c;
  --focus: 0 0 0 4px rgba(234, 88, 12, 0.34);
  --grad1: rgba(248, 148, 37, 0.16);
  --grad2: rgba(251, 191, 36, 0.16);
  --grad3: rgba(248, 113, 113, 0.14);
  --input-bg: rgba(255, 255, 255, 0.96);
  --card-bg: rgba(255, 247, 237, 0.96);
  --input-border: rgba(248, 148, 37, 0.55);
  --placeholder: rgba(120, 82, 38, 0.55);
  --login-bg: radial-gradient(circle at top, #fed7aa 0, #fff7ed 60%);
  --surface: rgba(248, 148, 37, 0.07);
  --surface-border: rgba(248, 148, 37, 0.55);
  --surface-text: rgba(26, 20, 10, 0.96);
  --divider: rgba(248, 179, 99, 0.5);
  --badge-bg: rgba(248, 148, 37, 0.22);
  --badge-border: rgba(248, 148, 37, 0.7);
  --badge-text: rgba(26, 20, 10, 0.96);
  --pill-bg: rgba(255, 255, 255, 0.9);
  --modal-bg: linear-gradient(180deg, #fff7ed, rgba(255, 247, 237, 0.98));
  --modal-border: rgba(248, 148, 37, 0.7);
  --modal-divider: rgba(248, 179, 99, 0.6);
  --modal-preview-bg: rgba(255, 237, 213, 0.85);
  --modal-backdrop: rgba(249, 115, 22, 0.2);
}