/* Themes: Farben, Schriften und Radien über Bootstrap-Variablen. Auswahl unter Verwaltung → Aussehen,
   gesetzt als data-theme auf <html>; hell/dunkel kommt weiterhin aus data-bs-theme. */

[data-theme="vinyl"] { --app-display-font: 'DM Serif Display', Georgia, serif; --bs-body-font-family: 'DM Sans', system-ui, sans-serif; --bs-border-radius: 6px; --bs-border-radius-sm: calc(6px * .75); --bs-border-radius-lg: calc(6px * 1.25); }
[data-theme="vinyl"] {
  --bs-body-bg: #f4eee4; --bs-body-bg-rgb: 244, 238, 228;
  --bs-body-color: #2a2420; --bs-body-color-rgb: 42, 36, 32;
  --bs-emphasis-color: #2a2420;
  --bs-secondary-color: #7d7168; --bs-secondary-color-rgb: 125, 113, 104;
  --bs-tertiary-color: #7d7168;
  --bs-secondary-bg: #ece4d7; --bs-secondary-bg-rgb: 236, 228, 215;
  --bs-tertiary-bg: #ece4d7; --bs-tertiary-bg-rgb: 236, 228, 215;
  --bs-border-color: #e6dccd; --bs-border-color-translucent: #e6dccd;
  --bs-primary: #b8461b; --bs-primary-rgb: 184, 70, 27;
  --bs-link-color: #b8461b; --bs-link-color-rgb: 184, 70, 27;
  --bs-link-hover-color: #2a2420; --bs-link-hover-color-rgb: 42, 36, 32;
  --bs-success-rgb: 47, 107, 79;
  --bs-heading-color: #2a2420;
  --app-surface: #fffcf6; --app-accent-text: #ffffff;
  --app-nav-bg: #2a2420; --app-nav-text: #f4eee4; --app-nav-text-rgb: 244, 238, 228;
}
[data-theme="vinyl"][data-bs-theme="dark"] {
  --bs-body-bg: #1b1816; --bs-body-bg-rgb: 27, 24, 22;
  --bs-body-color: #f1e9dd; --bs-body-color-rgb: 241, 233, 221;
  --bs-emphasis-color: #f1e9dd;
  --bs-secondary-color: #a4988c; --bs-secondary-color-rgb: 164, 152, 140;
  --bs-tertiary-color: #a4988c;
  --bs-secondary-bg: #2f2926; --bs-secondary-bg-rgb: 47, 41, 38;
  --bs-tertiary-bg: #2f2926; --bs-tertiary-bg-rgb: 47, 41, 38;
  --bs-border-color: #3a332f; --bs-border-color-translucent: #3a332f;
  --bs-primary: #e8933a; --bs-primary-rgb: 232, 147, 58;
  --bs-link-color: #e8933a; --bs-link-color-rgb: 232, 147, 58;
  --bs-link-hover-color: #f1e9dd; --bs-link-hover-color-rgb: 241, 233, 221;
  --bs-success-rgb: 95, 174, 134;
  --bs-heading-color: #f1e9dd;
  --app-surface: #262120; --app-accent-text: #1b1816;
  --app-nav-bg: #12100f; --app-nav-text: #f1e9dd; --app-nav-text-rgb: 241, 233, 221;
}

[data-theme="studio"] { --app-display-font: 'Space Grotesk', system-ui, sans-serif; --bs-body-font-family: 'IBM Plex Sans', system-ui, sans-serif; --bs-border-radius: 4px; --bs-border-radius-sm: calc(4px * .75); --bs-border-radius-lg: calc(4px * 1.25); }
[data-theme="studio"] {
  --bs-body-bg: #eef2f5; --bs-body-bg-rgb: 238, 242, 245;
  --bs-body-color: #10202b; --bs-body-color-rgb: 16, 32, 43;
  --bs-emphasis-color: #10202b;
  --bs-secondary-color: #5b6b77; --bs-secondary-color-rgb: 91, 107, 119;
  --bs-tertiary-color: #5b6b77;
  --bs-secondary-bg: #e3e9ee; --bs-secondary-bg-rgb: 227, 233, 238;
  --bs-tertiary-bg: #e3e9ee; --bs-tertiary-bg-rgb: 227, 233, 238;
  --bs-border-color: #d7e0e6; --bs-border-color-translucent: #d7e0e6;
  --bs-primary: #0f766e; --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: #0f766e; --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #10202b; --bs-link-hover-color-rgb: 16, 32, 43;
  --bs-success-rgb: 15, 118, 110;
  --bs-heading-color: #10202b;
  --app-surface: #ffffff; --app-accent-text: #ffffff;
  --app-nav-bg: #10202b; --app-nav-text: #e3edf2; --app-nav-text-rgb: 227, 237, 242;
}
[data-theme="studio"][data-bs-theme="dark"] {
  --bs-body-bg: #0f1a20; --bs-body-bg-rgb: 15, 26, 32;
  --bs-body-color: #e3edf2; --bs-body-color-rgb: 227, 237, 242;
  --bs-emphasis-color: #e3edf2;
  --bs-secondary-color: #8fa3af; --bs-secondary-color-rgb: 143, 163, 175;
  --bs-tertiary-color: #8fa3af;
  --bs-secondary-bg: #1d2d36; --bs-secondary-bg-rgb: 29, 45, 54;
  --bs-tertiary-bg: #1d2d36; --bs-tertiary-bg-rgb: 29, 45, 54;
  --bs-border-color: #25363f; --bs-border-color-translucent: #25363f;
  --bs-primary: #2dd4bf; --bs-primary-rgb: 45, 212, 191;
  --bs-link-color: #2dd4bf; --bs-link-color-rgb: 45, 212, 191;
  --bs-link-hover-color: #e3edf2; --bs-link-hover-color-rgb: 227, 237, 242;
  --bs-success-rgb: 45, 212, 191;
  --bs-heading-color: #e3edf2;
  --app-surface: #16242c; --app-accent-text: #0f1a20;
  --app-nav-bg: #0a1216; --app-nav-text: #e3edf2; --app-nav-text-rgb: 227, 237, 242;
}

[data-theme="library"] { --app-display-font: 'Playfair Display', Georgia, serif; --bs-body-font-family: 'Source Sans 3', system-ui, sans-serif; --bs-border-radius: 2px; --bs-border-radius-sm: calc(2px * .75); --bs-border-radius-lg: calc(2px * 1.25); }
[data-theme="library"] {
  --bs-body-bg: #f3eee5; --bs-body-bg-rgb: 243, 238, 229;
  --bs-body-color: #1f1a17; --bs-body-color-rgb: 31, 26, 23;
  --bs-emphasis-color: #1f1a17;
  --bs-secondary-color: #6f655c; --bs-secondary-color-rgb: 111, 101, 92;
  --bs-tertiary-color: #6f655c;
  --bs-secondary-bg: #ebe4d7; --bs-secondary-bg-rgb: 235, 228, 215;
  --bs-tertiary-bg: #ebe4d7; --bs-tertiary-bg-rgb: 235, 228, 215;
  --bs-border-color: #dfd6c8; --bs-border-color-translucent: #dfd6c8;
  --bs-primary: #7f1d1d; --bs-primary-rgb: 127, 29, 29;
  --bs-link-color: #7f1d1d; --bs-link-color-rgb: 127, 29, 29;
  --bs-link-hover-color: #1f1a17; --bs-link-hover-color-rgb: 31, 26, 23;
  --bs-success-rgb: 77, 107, 60;
  --bs-heading-color: #1f1a17;
  --app-surface: #fbf8f2; --app-accent-text: #ffffff;
  --app-nav-bg: #fbf8f2; --app-nav-text: #1f1a17; --app-nav-text-rgb: 31, 26, 23;
}
[data-theme="library"][data-bs-theme="dark"] {
  --bs-body-bg: #14110f; --bs-body-bg-rgb: 20, 17, 15;
  --bs-body-color: #ece4d8; --bs-body-color-rgb: 236, 228, 216;
  --bs-emphasis-color: #ece4d8;
  --bs-secondary-color: #9d9286; --bs-secondary-color-rgb: 157, 146, 134;
  --bs-tertiary-color: #9d9286;
  --bs-secondary-bg: #26201d; --bs-secondary-bg-rgb: 38, 32, 29;
  --bs-tertiary-bg: #26201d; --bs-tertiary-bg-rgb: 38, 32, 29;
  --bs-border-color: #332c28; --bs-border-color-translucent: #332c28;
  --bs-primary: #d97a63; --bs-primary-rgb: 217, 122, 99;
  --bs-link-color: #d97a63; --bs-link-color-rgb: 217, 122, 99;
  --bs-link-hover-color: #ece4d8; --bs-link-hover-color-rgb: 236, 228, 216;
  --bs-success-rgb: 143, 174, 116;
  --bs-heading-color: #ece4d8;
  --app-surface: #1e1917; --app-accent-text: #14110f;
  --app-nav-bg: #0f0d0b; --app-nav-text: #ece4d8; --app-nav-text-rgb: 236, 228, 216;
}

[data-theme="neon"] { --app-display-font: 'Sora', system-ui, sans-serif; --bs-body-font-family: 'Manrope', system-ui, sans-serif; --bs-border-radius: 12px; --bs-border-radius-sm: calc(12px * .75); --bs-border-radius-lg: calc(12px * 1.25); }
[data-theme="neon"] {
  --bs-body-bg: #f5f4fb; --bs-body-bg-rgb: 245, 244, 251;
  --bs-body-color: #17152b; --bs-body-color-rgb: 23, 21, 43;
  --bs-emphasis-color: #17152b;
  --bs-secondary-color: #6b6788; --bs-secondary-color-rgb: 107, 103, 136;
  --bs-tertiary-color: #6b6788;
  --bs-secondary-bg: #eceaf6; --bs-secondary-bg-rgb: 236, 234, 246;
  --bs-tertiary-bg: #eceaf6; --bs-tertiary-bg-rgb: 236, 234, 246;
  --bs-border-color: #e2e0f0; --bs-border-color-translucent: #e2e0f0;
  --bs-primary: #6d28d9; --bs-primary-rgb: 109, 40, 217;
  --bs-link-color: #6d28d9; --bs-link-color-rgb: 109, 40, 217;
  --bs-link-hover-color: #17152b; --bs-link-hover-color-rgb: 23, 21, 43;
  --bs-success-rgb: 77, 124, 15;
  --bs-heading-color: #17152b;
  --app-surface: #ffffff; --app-accent-text: #ffffff;
  --app-nav-bg: #ffffff; --app-nav-text: #17152b; --app-nav-text-rgb: 23, 21, 43;
}
[data-theme="neon"][data-bs-theme="dark"] {
  --bs-body-bg: #0e0c1a; --bs-body-bg-rgb: 14, 12, 26;
  --bs-body-color: #ebe8ff; --bs-body-color-rgb: 235, 232, 255;
  --bs-emphasis-color: #ebe8ff;
  --bs-secondary-color: #9c97bd; --bs-secondary-color-rgb: 156, 151, 189;
  --bs-tertiary-color: #9c97bd;
  --bs-secondary-bg: #1f1b36; --bs-secondary-bg-rgb: 31, 27, 54;
  --bs-tertiary-bg: #1f1b36; --bs-tertiary-bg-rgb: 31, 27, 54;
  --bs-border-color: #2a2545; --bs-border-color-translucent: #2a2545;
  --bs-primary: #a78bfa; --bs-primary-rgb: 167, 139, 250;
  --bs-link-color: #a78bfa; --bs-link-color-rgb: 167, 139, 250;
  --bs-link-hover-color: #ebe8ff; --bs-link-hover-color-rgb: 235, 232, 255;
  --bs-success-rgb: 190, 242, 100;
  --bs-heading-color: #ebe8ff;
  --app-surface: #17142a; --app-accent-text: #0e0c1a;
  --app-nav-bg: #0a0814; --app-nav-text: #ebe8ff; --app-nav-text-rgb: 235, 232, 255;
}

/* Orbit: Sci-Fi-HUD mit Raster im Hintergrund und leichtem Leuchten an Karten */
[data-theme="orbit"] { --app-display-font: 'Orbitron', system-ui, sans-serif; --bs-body-font-family: 'Exo 2', system-ui, sans-serif; --bs-border-radius: 3px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 4px; }
[data-theme="orbit"] {
  --bs-body-bg: #eef3f7; --bs-body-bg-rgb: 238, 243, 247;
  --bs-body-color: #0c1a26; --bs-body-color-rgb: 12, 26, 38;
  --bs-emphasis-color: #0c1a26;
  --bs-secondary-color: #5a6f80; --bs-secondary-color-rgb: 90, 111, 128;
  --bs-tertiary-color: #5a6f80;
  --bs-secondary-bg: #e2ebf1; --bs-secondary-bg-rgb: 226, 235, 241;
  --bs-tertiary-bg: #e2ebf1; --bs-tertiary-bg-rgb: 226, 235, 241;
  --bs-border-color: #c9dbe6; --bs-border-color-translucent: #c9dbe6;
  --bs-primary: #0e7490; --bs-primary-rgb: 14, 116, 144;
  --bs-link-color: #0e7490; --bs-link-color-rgb: 14, 116, 144;
  --bs-link-hover-color: #0c1a26; --bs-link-hover-color-rgb: 12, 26, 38;
  --bs-success-rgb: 63, 143, 47;
  --bs-heading-color: #0c1a26;
  --app-surface: #ffffff; --app-accent-text: #ffffff;
  --app-nav-bg: #0c1a26; --app-nav-text: #e6f6fb; --app-nav-text-rgb: 230, 246, 251;
}
[data-theme="orbit"][data-bs-theme="dark"] {
  --bs-body-bg: #060b14; --bs-body-bg-rgb: 6, 11, 20;
  --bs-body-color: #dcf4fb; --bs-body-color-rgb: 220, 244, 251;
  --bs-emphasis-color: #dcf4fb;
  --bs-secondary-color: #7fa0b3; --bs-secondary-color-rgb: 127, 160, 179;
  --bs-tertiary-color: #7fa0b3;
  --bs-secondary-bg: #0f1c2a; --bs-secondary-bg-rgb: 15, 28, 42;
  --bs-tertiary-bg: #0f1c2a; --bs-tertiary-bg-rgb: 15, 28, 42;
  --bs-border-color: #173042; --bs-border-color-translucent: #173042;
  --bs-primary: #22d3ee; --bs-primary-rgb: 34, 211, 238;
  --bs-link-color: #22d3ee; --bs-link-color-rgb: 34, 211, 238;
  --bs-link-hover-color: #dcf4fb; --bs-link-hover-color-rgb: 220, 244, 251;
  --bs-success-rgb: 163, 230, 53;
  --bs-heading-color: #dcf4fb;
  --app-surface: #0b1320; --app-accent-text: #06121a;
  --app-nav-bg: #040810; --app-nav-text: #dcf4fb; --app-nav-text-rgb: 220, 244, 251;
}
[data-theme="orbit"] body {
  background-image: linear-gradient(rgba(var(--bs-primary-rgb), .07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--bs-primary-rgb), .07) 1px, transparent 1px);
  background-size: 28px 28px; }
[data-theme="orbit"] h1, [data-theme="orbit"] h2, [data-theme="orbit"] .h3, [data-theme="orbit"] .h5 { text-transform: uppercase; letter-spacing: .08em; }
[data-theme="orbit"] .card, [data-theme="orbit"] .list-group, [data-theme="orbit"] .table-responsive {
  box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .18), inset 0 0 24px rgba(var(--bs-primary-rgb), .06); }
[data-theme="orbit"] .navbar { border-bottom-color: rgba(var(--bs-primary-rgb), .35) !important; box-shadow: 0 1px 12px rgba(var(--bs-primary-rgb), .15); }
[data-theme="orbit"] .btn-primary { box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), .35); }

/* Nova: helle Raumstation, weiche Blau-Violett-Lichter, dünne Linien */
[data-theme="nova"] { --app-display-font: 'Rajdhani', system-ui, sans-serif; --bs-body-font-family: 'Titillium Web', system-ui, sans-serif; --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 14px; }
[data-theme="nova"] {
  --bs-body-bg: #f7f8fd; --bs-body-bg-rgb: 247, 248, 253;
  --bs-body-color: #161a33; --bs-body-color-rgb: 22, 26, 51;
  --bs-emphasis-color: #161a33;
  --bs-secondary-color: #6b7194; --bs-secondary-color-rgb: 107, 113, 148;
  --bs-tertiary-color: #6b7194;
  --bs-secondary-bg: #eceef9; --bs-secondary-bg-rgb: 236, 238, 249;
  --bs-tertiary-bg: #eceef9; --bs-tertiary-bg-rgb: 236, 238, 249;
  --bs-border-color: #e3e6f5; --bs-border-color-translucent: #e3e6f5;
  --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: #4f46e5; --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: #161a33; --bs-link-hover-color-rgb: 22, 26, 51;
  --bs-success-rgb: 47, 158, 107;
  --bs-heading-color: #161a33;
  --app-surface: #ffffff; --app-accent-text: #ffffff;
  --app-nav-bg: #ffffff; --app-nav-text: #161a33; --app-nav-text-rgb: 22, 26, 51;
}
[data-theme="nova"][data-bs-theme="dark"] {
  --bs-body-bg: #0b0f2a; --bs-body-bg-rgb: 11, 15, 42;
  --bs-body-color: #e8eaff; --bs-body-color-rgb: 232, 234, 255;
  --bs-emphasis-color: #e8eaff;
  --bs-secondary-color: #9aa0cc; --bs-secondary-color-rgb: 154, 160, 204;
  --bs-tertiary-color: #9aa0cc;
  --bs-secondary-bg: #1a2049; --bs-secondary-bg-rgb: 26, 32, 73;
  --bs-tertiary-bg: #1a2049; --bs-tertiary-bg-rgb: 26, 32, 73;
  --bs-border-color: #232a58; --bs-border-color-translucent: #232a58;
  --bs-primary: #a5b4fc; --bs-primary-rgb: 165, 180, 252;
  --bs-link-color: #a5b4fc; --bs-link-color-rgb: 165, 180, 252;
  --bs-link-hover-color: #e8eaff; --bs-link-hover-color-rgb: 232, 234, 255;
  --bs-success-rgb: 110, 231, 183;
  --bs-heading-color: #e8eaff;
  --app-surface: #12173a; --app-accent-text: #0b0f2a;
  --app-nav-bg: #080b20; --app-nav-text: #e8eaff; --app-nav-text-rgb: 232, 234, 255;
}
[data-theme="nova"] body { background-image: radial-gradient(900px 420px at 85% -10%, rgba(var(--bs-primary-rgb), .16), transparent 60%); background-attachment: fixed; }
[data-theme="nova"] h1, [data-theme="nova"] h2, [data-theme="nova"] .h3, [data-theme="nova"] .h5, [data-theme="nova"] .navbar-brand { letter-spacing: .02em; font-weight: 600; }
[data-theme="nova"] .card, [data-theme="nova"] .list-group, [data-theme="nova"] .table-responsive {
  box-shadow: 0 8px 30px rgba(var(--bs-primary-rgb), .08), 0 0 0 1px rgba(var(--bs-primary-rgb), .10); }
[data-theme="nova"] .navbar { box-shadow: 0 1px 16px rgba(var(--bs-primary-rgb), .10); }
[data-theme="nova"] .btn-primary { box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), .30); }

/* Bauteile, die Bootstrap nicht über die Root-Variablen abdeckt */
[data-theme] body { font-family: var(--bs-body-font-family); }
[data-theme] h1, [data-theme] h2, [data-theme] h3, [data-theme] h4, [data-theme] .h1, [data-theme] .h2, [data-theme] .h3, [data-theme] .h4,
[data-theme] .h5, [data-theme] .navbar-brand, [data-theme] .fs-2 { font-family: var(--app-display-font); }
[data-theme] .navbar { background-color: var(--app-nav-bg) !important;
  --bs-navbar-color: rgba(var(--app-nav-text-rgb), .75); --bs-navbar-hover-color: var(--app-nav-text);
  --bs-navbar-active-color: var(--app-nav-text); --bs-navbar-brand-color: var(--app-nav-text); --bs-navbar-brand-hover-color: var(--app-nav-text);
  --bs-navbar-toggler-border-color: rgba(var(--app-nav-text-rgb), .2);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(128,128,128,.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
[data-theme] .navbar .nav-link.active { font-weight: 600; }
[data-theme] .navbar .btn-outline-secondary { --bs-btn-color: rgba(var(--app-nav-text-rgb), .8); --bs-btn-border-color: rgba(var(--app-nav-text-rgb), .35);
  --bs-btn-hover-bg: rgba(var(--app-nav-text-rgb), .12); --bs-btn-hover-color: var(--app-nav-text); --bs-btn-hover-border-color: rgba(var(--app-nav-text-rgb), .5); }
[data-theme] .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: var(--app-accent-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, black); --bs-btn-hover-color: var(--app-accent-text);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black); --bs-btn-active-color: var(--app-accent-text);
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--app-accent-text); }
[data-theme] .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--app-accent-text); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-color: var(--app-accent-text); }
[data-theme] .card { --bs-card-bg: var(--app-surface); }
[data-theme] .list-group { --bs-list-group-bg: var(--app-surface); }
[data-theme] .dropdown-menu { --bs-dropdown-bg: var(--app-surface); }
[data-theme] .form-control, [data-theme] .form-select, [data-theme] .ts-control, [data-theme] .ts-dropdown, [data-theme] .input-group-text { background-color: var(--app-surface); color: var(--bs-body-color); border-color: var(--bs-border-color); }
[data-theme] .form-control:focus, [data-theme] .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
[data-theme] .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
[data-theme] .nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); --bs-nav-pills-link-active-color: var(--app-accent-text); }
[data-theme] .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-hover-bg: rgba(var(--bs-body-color-rgb), .04); --bs-table-hover-color: var(--bs-body-color); }
[data-theme] .breadcrumb { --bs-breadcrumb-divider-color: var(--bs-secondary-color); }
[data-theme] .settings-icon { color: var(--bs-primary); }
[data-theme] .alert-light { --bs-alert-bg: var(--app-surface); --bs-alert-color: var(--bs-body-color); --bs-alert-border-color: var(--bs-border-color); }
[data-theme] .badge.text-bg-light { background-color: var(--app-surface) !important; color: var(--bs-body-color) !important; }
[data-theme] .ts-dropdown .option.active { background-color: var(--bs-primary); color: var(--app-accent-text); }
[data-theme] .ts-control > .item { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); }

/* Tiefenfeld: eigenes Seitenlayout mit Symbolleiste links, Nebel und driftendem Sternenhimmel */
[data-theme="deepfield"] { --app-display-font: 'Michroma', system-ui, sans-serif; --bs-body-font-family: 'Exo 2', system-ui, sans-serif; --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 14px;
  --df-accent2: #0891b2; --df-glow: rgba(124, 58, 237, .28); --df-nebula1: rgba(124, 58, 237, .16); --df-nebula2: rgba(8, 145, 178, .14);
  --df-star: rgba(20, 24, 46, .45); --df-star-bright: rgba(20, 24, 46, .7); }
[data-theme="deepfield"] {
  --bs-body-bg: #eef1fa; --bs-body-bg-rgb: 238, 241, 250;
  --bs-body-color: #14182e; --bs-body-color-rgb: 20, 24, 46;
  --bs-emphasis-color: #14182e;
  --bs-secondary-color: #5d6485; --bs-secondary-color-rgb: 93, 100, 133;
  --bs-tertiary-color: #5d6485;
  --bs-secondary-bg: #e3e7f6; --bs-secondary-bg-rgb: 227, 231, 246;
  --bs-tertiary-bg: #e3e7f6; --bs-tertiary-bg-rgb: 227, 231, 246;
  --bs-border-color: rgba(20, 24, 46, .16); --bs-border-color-translucent: rgba(20, 24, 46, .16);
  --bs-primary: #7c3aed; --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: #7c3aed; --bs-link-color-rgb: 124, 58, 237;
  --bs-link-hover-color: #14182e; --bs-link-hover-color-rgb: 20, 24, 46;
  --bs-success-rgb: 22, 163, 74;
  --bs-heading-color: #14182e;
  --app-surface: rgba(255, 255, 255, .62); --app-accent-text: #ffffff;
  --app-nav-bg: rgba(238, 241, 250, .55); --app-nav-text: #14182e; --app-nav-text-rgb: 20, 24, 46;
}
[data-theme="deepfield"][data-bs-theme="dark"] {
  --bs-body-bg: #070914; --bs-body-bg-rgb: 7, 9, 20;
  --bs-body-color: #e9ecff; --bs-body-color-rgb: 233, 236, 255;
  --bs-emphasis-color: #e9ecff;
  --bs-secondary-color: #8b93b8; --bs-secondary-color-rgb: 139, 147, 184;
  --bs-tertiary-color: #8b93b8;
  --bs-secondary-bg: rgba(255, 255, 255, .08); --bs-secondary-bg-rgb: 255, 255, 255;
  --bs-tertiary-bg: rgba(255, 255, 255, .08); --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-border-color: rgba(233, 236, 255, .14); --bs-border-color-translucent: rgba(233, 236, 255, .14);
  --bs-primary: #c084fc; --bs-primary-rgb: 192, 132, 252;
  --bs-link-color: #c084fc; --bs-link-color-rgb: 192, 132, 252;
  --bs-link-hover-color: #e9ecff; --bs-link-hover-color-rgb: 233, 236, 255;
  --bs-success-rgb: 74, 222, 128;
  --bs-heading-color: #e9ecff;
  --app-surface: rgba(255, 255, 255, .06); --app-accent-text: #1a0a2e;
  --app-nav-bg: rgba(7, 9, 20, .65); --app-nav-text: #e9ecff; --app-nav-text-rgb: 233, 236, 255;
  --df-accent2: #22d3ee; --df-glow: rgba(192, 132, 252, .4); --df-nebula1: rgba(192, 132, 252, .22); --df-nebula2: rgba(34, 211, 238, .18);
  --df-star: rgba(255, 255, 255, .85); --df-star-bright: #ffffff;
}

/* Sternenhimmel: fest hinter der ganzen App, driftet langsam, funkelt gelegentlich. Nur in diesem Theme sichtbar. */
[data-theme="deepfield"] .stars { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bs-body-bg); }
[data-theme="deepfield"] .stars::before {
  content: ""; position: absolute; inset: -10%;
  background-image: radial-gradient(60vw 44vh at 88% -6%, var(--df-nebula1), transparent 65%), radial-gradient(52vw 46vh at -4% 104%, var(--df-nebula2), transparent 65%);
}
[data-theme="deepfield"] .stars::after, [data-theme="deepfield"] .stars .layer, [data-theme="deepfield"] .stars .layer2 {
  content: ""; position: absolute; inset: -50%; background-repeat: repeat;
}
[data-theme="deepfield"] .stars::after {
  background-image:
    radial-gradient(1px 1px at 57% 71%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 99% 59%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 65%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 24%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 65%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 80%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 23%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 57%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 18%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 11% 68%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 81%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 76%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 57%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 94%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 83%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 79%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 1% 67%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 7%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 24%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 76%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 3% 99%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 59% 41%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 75%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 25% 66%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 29% 81%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 37% 63%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 0% 84%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 58%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 35%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 70%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 90%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 40%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 97% 29%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 36%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 3% 8%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 98%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 13% 51%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 13% 37%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 49% 8%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 2% 87%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 0% 27%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 26% 6%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 48%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 50%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 53% 9%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 80%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 25% 99%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 34%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 43% 11%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 39% 42%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 1% 52%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 97% 15%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 31%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 12%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 1% 7%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 59% 62%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 87%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 24%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 65%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 93%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 98% 16%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 53% 82%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 49% 14%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 53%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 0%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 75%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 2%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 26% 23%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 77%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 73%, var(--df-star) 50%, transparent 51%);
  background-size: 320px 320px; animation: df-drift-slow 260s linear infinite; opacity: .7;
}
[data-theme="deepfield"] .stars .layer {
  background-image:
    radial-gradient(1.6px 1.6px at 60% 34%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 84% 67%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 85% 44%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 18% 48%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 1% 47%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 61% 35%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 82% 58%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 88% 76%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 29% 71%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 0% 84%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 79% 18%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 56% 47%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 20% 43%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 26% 7%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 73% 25%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 9% 65%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 87% 43%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 87% 51%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 11% 2%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 7% 84%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 65% 28%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 11% 54%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 56% 14%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 84% 54%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 17% 69%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 40% 79%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 71% 20%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 89% 6%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 71% 21%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 64% 10%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 51% 77%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 53% 85%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 76% 60%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 61% 77%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 49% 69%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 3% 82%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 92% 10%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 24% 100%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 84% 33%, var(--df-star) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 45% 46%, var(--df-star) 50%, transparent 51%);
  background-size: 460px 460px; animation: df-drift-mid 190s linear infinite, df-twinkle 7s ease-in-out infinite;
}
[data-theme="deepfield"] .stars .layer2 {
  background-image:
    radial-gradient(2.4px 2.4px at 33% 37%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 87% 87%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 23% 83%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 29% 85%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 18% 28%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 82% 93%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 23% 16%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 9% 68%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 27% 95%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 37% 3%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 55% 16%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 87% 77%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 1% 35%, var(--df-star-bright) 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 18% 10%, var(--df-star-bright) 50%, transparent 51%);
  background-size: 640px 640px; animation: df-drift-fast 150s linear infinite reverse, df-twinkle 10s ease-in-out infinite;
}
@keyframes df-drift-slow { from { background-position: 0 0; } to { background-position: -600px 300px; } }
@keyframes df-drift-mid  { from { background-position: 0 0; } to { background-position: -900px 200px; } }
@keyframes df-drift-fast { from { background-position: 0 0; } to { background-position: -1400px 400px; } }
@keyframes df-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="deepfield"] .stars::after, [data-theme="deepfield"] .stars .layer, [data-theme="deepfield"] .stars .layer2 { animation: none; }
}

/* Navigationsleiste wie in den anderen Themes, nur durchscheinend über dem Sternenhimmel */
[data-theme="deepfield"] .navbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="deepfield"] .navbar-brand > .bi {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--bs-primary), var(--df-accent2)); color: #fff; font-size: 14px; box-shadow: 0 0 14px var(--df-glow); }

/* Glas-Karten und Leuchteffekte */
[data-theme="deepfield"] .card, [data-theme="deepfield"] .list-group, [data-theme="deepfield"] .table-responsive, [data-theme="deepfield"] .dropdown-menu {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--bs-border-color); }
[data-theme="deepfield"] .fs-2 { background: linear-gradient(90deg, var(--bs-primary), var(--df-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="deepfield"] h1, [data-theme="deepfield"] .h3, [data-theme="deepfield"] .h5, [data-theme="deepfield"] .navbar-brand { letter-spacing: .04em; }
[data-theme="deepfield"] .btn-primary { box-shadow: 0 0 18px var(--df-glow); }
[data-theme="deepfield"] .badge.text-bg-success { box-shadow: 0 0 10px var(--df-glow); }