/* =============================================================================
   Zusätzliche Designs – wählbar unter Einrichten → Mein Konto → Design.

   „Hell" ist die Grundgestaltung aus styles.css und braucht diese Datei nicht.
   Für jedes weitere Design setzt app.js (designAnwenden) am <html> das Merkmal
   data-design. Voreingestellt ist „Glas" (STANDARD_DESIGN in app.js und fest in
   index.html). Aufbau dieser Datei:

     1. Farbwerte je Design         – wer ein Design anpassen will, ändert hier.
     2. Gemeinsame Ebene            – ersetzt jede in styles.css fest eingetragene
                                      Farbe durch einen Wert aus 1.
     3. Eigenheiten je Design       – Glas, Leuchten, runde Ecken.
     4. Auswahl-Kacheln             – die vier Vorschaubilder unter „Einrichten".

   Ein neues Design braucht also nur einen Block in 1 und einen Eintrag in DESIGNS
   (app.js); 2 gilt automatisch.
   ============================================================================= */


/* --- 1. Farbwerte ------------------------------------------------------------ */

html[data-design="nacht"] {
  color-scheme: dark;
  --canvas: #0b0d12;
  --panel: #151821;
  --panel-2: #1c202b;
  --panel-dim: #10131a;
  --pop-bg: #191c26;
  --ink: #f2f4f8;
  --muted: #9ba3b4;
  --muted-2: #6f7789;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);
  --navy: #f2f4f8;
  --blue: #7fb0ff;
  --blue-soft: rgba(79,140,255,.16);
  --blue-ink: #a8c8ff;
  --accent: #2f6bff;
  --accent-grad: linear-gradient(135deg,#3d7bff,#5b54f5);
  --accent-hover: linear-gradient(135deg,#5189ff,#6c65ff);
  --accent-glow: rgba(61,123,255,.42);
  --hero-grad: linear-gradient(135deg,#2f6bff 0%,#5b54f5 60%,#8a4dff 100%);
  --on-accent: #ffffff;
  --inverse-ink: #0b0d12;
  --focus: rgba(95,150,255,.45);
  --info: #7fb0ff;
  --info-soft: rgba(79,140,255,.16);
  --info-ink: #a8c8ff;
  --green: #4ade80;
  --green-soft: rgba(48,209,88,.15);
  --green-ink: #74e59e;
  --orange: #ffb347;
  --orange-soft: rgba(255,159,10,.16);
  --orange-ink: #ffc477;
  --red: #ff6b61;
  --red-soft: rgba(255,69,58,.17);
  --red-ink: #ff958c;
  --yellow-soft: rgba(255,214,10,.14);
  --yellow-ink: #f3d667;
  --purple-soft: rgba(191,90,242,.17);
  --purple-ink: #dcaafa;
  --fill: rgba(255,255,255,.07);
  --fill-2: rgba(255,255,255,.12);
  --fill-3: rgba(255,255,255,.035);
  --input-bg: rgba(255,255,255,.045);
  --seg: rgba(255,255,255,.15);
  --seg-shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --ring: 0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.4);
  --ring-hover: 0 0 0 1px rgba(127,176,255,.4), 0 14px 36px rgba(0,0,0,.5);
  --pop-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.09);
  --overlay: rgba(2,4,8,.66);
  --sidebar-bg: rgba(14,16,22,.84);
  --sidebar-line: rgba(255,255,255,.06);
  --sidebar-ink: #e9ecf2;
  --sidebar-muted: #8e96a8;
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active: rgba(79,140,255,.17);
  --sidebar-active-ink: #ffffff;
  --sidebar-icon-active: #7fb0ff;
  --sidebar-card: rgba(255,255,255,.05);
  --sidebar-card-ring: 0 0 0 1px rgba(255,255,255,.07);
  --topbar-bg: rgba(11,13,18,.72);
  --subnav-bg: rgba(11,13,18,.8);
  --toast-bg: rgba(44,49,63,.97);
  --toast-ink: #ffffff;
  --avatar-bg: linear-gradient(180deg,#4a5165,#343a4a);
  --switch-off: rgba(255,255,255,.18);
  --ok: #30d158;
  --badge: #ff453a;
  --heat: 255,159,10;
}

html[data-design="aurora"] {
  --canvas: #f3f1fb;
  --panel: rgba(255,255,255,.68);
  --panel-2: rgba(255,255,255,.82);
  --panel-dim: rgba(255,255,255,.38);
  --pop-bg: #fdfcff;
  --ink: #1c1a2e;
  --muted: #5f5c78;
  --muted-2: #7f7c99;
  --line: rgba(60,40,120,.10);
  --line-strong: rgba(60,40,120,.19);
  --navy: #1c1a2e;
  --blue: #6344f0;
  --blue-soft: rgba(106,77,244,.11);
  --blue-ink: #4c33c9;
  --accent: #6344f0;
  --accent-grad: linear-gradient(135deg,#5f48f2,#a243ea);
  --accent-hover: linear-gradient(135deg,#6f59f6,#b052f0);
  --accent-glow: rgba(140,80,240,.34);
  --hero-grad: linear-gradient(135deg,#5b46f0 0%,#a243ea 52%,#e2508f 100%);
  --on-accent: #ffffff;
  --inverse-ink: #ffffff;
  --focus: rgba(106,77,244,.30);
  --info: #2f6fe0;
  --info-soft: rgba(47,111,224,.11);
  --info-ink: #1f55b8;
  --green: #128a4a;
  --green-soft: rgba(24,160,88,.14);
  --green-ink: #0e6e3a;
  --orange: #b25a00;
  --orange-soft: rgba(255,149,0,.16);
  --orange-ink: #8a4300;
  --red: #d4183d;
  --red-soft: rgba(230,30,70,.11);
  --red-ink: #b01033;
  --yellow-soft: rgba(245,190,0,.22);
  --yellow-ink: #7a5600;
  --purple-soft: rgba(170,70,220,.13);
  --purple-ink: #7a2ea8;
  --fill: rgba(80,60,150,.08);
  --fill-2: rgba(80,60,150,.14);
  --fill-3: rgba(80,60,150,.04);
  --input-bg: rgba(255,255,255,.72);
  --seg: #ffffff;
  --seg-shadow: 0 2px 8px rgba(70,50,140,.15);
  --shadow: 0 18px 50px rgba(70,50,140,.17);
  --ring: 0 0 0 1px rgba(255,255,255,.8), 0 6px 26px rgba(70,50,140,.08);
  --ring-hover: 0 0 0 1px rgba(255,255,255,.95), 0 16px 40px rgba(90,60,180,.19);
  --pop-shadow: 0 30px 90px rgba(50,30,110,.3);
  --overlay: rgba(40,28,80,.3);
  --sidebar-bg: rgba(255,255,255,.56);
  --sidebar-line: rgba(255,255,255,.85);
  --sidebar-ink: #1c1a2e;
  --sidebar-muted: #6a6784;
  --sidebar-hover: rgba(255,255,255,.6);
  --sidebar-active: #ffffff;
  --sidebar-active-ink: #1c1a2e;
  --sidebar-icon-active: #6344f0;
  --sidebar-card: rgba(255,255,255,.7);
  --sidebar-card-ring: 0 0 0 1px rgba(255,255,255,.9), 0 4px 16px rgba(70,50,140,.07);
  --topbar-bg: rgba(255,255,255,.5);
  --subnav-bg: rgba(246,244,253,.66);
  --toast-bg: rgba(36,28,66,.94);
  --toast-ink: #ffffff;
  --avatar-bg: linear-gradient(135deg,#5f48f2,#e2508f);
  --switch-off: rgba(80,60,150,.2);
  --ok: #22b866;
  --badge: #f0346a;
  --heat: 255,138,0;
  --radius: 22px;
}

html[data-design="wald"] {
  --canvas: #f3efe6;
  --panel: #fffdf8;
  --panel-2: #fffdf8;
  --panel-dim: #f9f5ec;
  --pop-bg: #fffdf8;
  --ink: #18261f;
  --muted: #5c685f;
  --muted-2: #727d75;
  --line: #e8e1d3;
  --line-strong: #d6cebd;
  --navy: #18261f;
  --blue: #1d6b4f;
  --blue-soft: #e1eee5;
  --blue-ink: #14523c;
  --accent: #1d6b4f;
  --accent-grad: #1d6b4f;
  --accent-hover: #175a42;
  --accent-glow: rgba(29,107,79,.28);
  --hero-grad: radial-gradient(130% 150% at 100% 0%,#2f9069 0%,#1d6b4f 42%,#15332a 100%);
  --on-accent: #ffffff;
  --inverse-ink: #ffffff;
  --focus: rgba(29,107,79,.30);
  --info: #2b6c8f;
  --info-soft: #e0edf3;
  --info-ink: #1f5673;
  --green: #2f7d32;
  --green-soft: #e3f1dc;
  --green-ink: #2a6a2c;
  --orange: #a85a00;
  --orange-soft: #fbeed6;
  --orange-ink: #874800;
  --red: #c4302b;
  --red-soft: #fbe6e1;
  --red-ink: #a52520;
  --yellow-soft: #f8efc4;
  --yellow-ink: #775a00;
  --purple-soft: #efe4f3;
  --purple-ink: #6f3a8a;
  --fill: rgba(60,50,20,.07);
  --fill-2: rgba(60,50,20,.125);
  --fill-3: rgba(60,50,20,.035);
  --input-bg: #fffefb;
  --seg: #fffdf8;
  --seg-shadow: 0 1px 3px rgba(40,30,10,.15);
  --shadow: 0 16px 44px rgba(40,34,16,.13);
  --ring: 0 0 0 1px rgba(60,50,20,.075), 0 2px 6px rgba(40,34,16,.04);
  --ring-hover: 0 0 0 1px rgba(29,107,79,.3), 0 14px 34px rgba(40,34,16,.12);
  --pop-shadow: 0 30px 90px rgba(24,38,31,.32);
  --overlay: rgba(21,51,42,.42);
  --sidebar-bg: #15332a;
  --sidebar-line: transparent;
  --sidebar-ink: #eef3ea;
  --sidebar-muted: #9db3a6;
  --sidebar-hover: rgba(255,255,255,.07);
  --sidebar-active: rgba(255,255,255,.13);
  --sidebar-active-ink: #ffffff;
  --sidebar-icon-active: #c5ee7d;
  --sidebar-card: rgba(255,255,255,.07);
  --sidebar-card-ring: none;
  --topbar-bg: rgba(243,239,230,.84);
  --subnav-bg: rgba(243,239,230,.9);
  --toast-bg: rgba(21,51,42,.96);
  --toast-ink: #ffffff;
  --avatar-bg: #1d6b4f;
  --switch-off: rgba(60,50,20,.2);
  --ok: #2f9a4a;
  --badge: #e5484d;
  --heat: 214,125,10;
  --radius: 22px;
}


/* Leitstand: wie der Leitstand einer Produktion – Graphit, Signal-Bernstein für alles,
   was zählt, Cyan für reine Hinweise. Knöpfe tragen dunkle Schrift auf Bernstein. */
html[data-design="leitstand"] {
  color-scheme: dark;
  --canvas: #0c0e11;
  --panel: #14171c;
  --panel-2: #191d23;
  --panel-dim: #101317;
  --pop-bg: #171a20;
  --ink: #eef0f3;
  --muted: #98a0ab;
  --muted-2: #6c7480;
  --line: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.15);
  --navy: #eef0f3;
  --blue: #ffb020;
  --blue-soft: rgba(255,176,32,.13);
  --blue-ink: #ffcf73;
  --accent: #ffb020;
  --accent-grad: linear-gradient(180deg,#ffc247,#ffa50a);
  --accent-hover: linear-gradient(180deg,#ffcd66,#ffb126);
  --accent-glow: rgba(255,170,20,.34);
  --hero-grad: linear-gradient(135deg,#ffc94f 0%,#ffab12 52%,#ff8f00 100%);
  --on-accent: #1a1203;
  --inverse-ink: #0c0e11;
  --focus: rgba(255,176,32,.38);
  --info: #4fd1e8;
  --info-soft: rgba(79,209,232,.13);
  --info-ink: #8fe3f2;
  --green: #3ddc84;
  --green-soft: rgba(61,220,132,.13);
  --green-ink: #7aeaa9;
  --orange: #ff9a3c;
  --orange-soft: rgba(255,140,40,.15);
  --orange-ink: #ffbb7d;
  --red: #ff5a52;
  --red-soft: rgba(255,80,70,.16);
  --red-ink: #ff918a;
  --yellow-soft: rgba(255,214,10,.13);
  --yellow-ink: #f5d76a;
  --purple-soft: rgba(176,132,255,.15);
  --purple-ink: #cdb4ff;
  --fill: rgba(255,255,255,.065);
  --fill-2: rgba(255,255,255,.11);
  --fill-3: rgba(255,255,255,.03);
  --input-bg: rgba(255,255,255,.04);
  --seg: rgba(255,255,255,.14);
  --seg-shadow: 0 1px 2px rgba(0,0,0,.45);
  --shadow: 0 18px 50px rgba(0,0,0,.6);
  --ring: 0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.45);
  --ring-hover: 0 0 0 1px rgba(255,176,32,.45), 0 14px 36px rgba(0,0,0,.55);
  --pop-shadow: 0 30px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.09);
  --overlay: rgba(3,4,6,.7);
  --sidebar-bg: #090b0d;
  --sidebar-line: rgba(255,255,255,.06);
  --sidebar-ink: #e6e9ed;
  --sidebar-muted: #7f8792;
  --sidebar-hover: rgba(255,255,255,.055);
  --sidebar-active: rgba(255,176,32,.12);
  --sidebar-active-ink: #ffffff;
  --sidebar-icon-active: #ffb020;
  --sidebar-card: rgba(255,255,255,.045);
  --sidebar-card-ring: 0 0 0 1px rgba(255,255,255,.06);
  --topbar-bg: rgba(12,14,17,.76);
  --subnav-bg: rgba(12,14,17,.84);
  --toast-bg: rgba(30,34,41,.97);
  --toast-ink: #ffffff;
  --avatar-bg: linear-gradient(180deg,#3a414c,#272c34);
  --switch-off: rgba(255,255,255,.17);
  --ok: #2fcf73;
  --badge: #ff453a;
  --heat: 255,160,20;
  --radius: 14px;
}


/* Glas: hell und klar, Flächen wie aus Glas mit Lichtkante – angelehnt an Apples neueste
   Gestaltung. Anders als „Aurora“ bleibt der Grund ruhig und kühl; das Glas lebt von der
   hellen Oberkante, nicht von bunten Farben. */
html[data-design="glas"] {
  --canvas: #eef2f7;
  --panel: rgba(255,255,255,.68);
  --panel-2: rgba(255,255,255,.74);
  --panel-dim: rgba(255,255,255,.5);
  --pop-bg: rgba(251,252,254,.95);
  --ink: #0b0d12;
  --muted: #5b6372;
  --muted-2: #7a8291;
  --line: rgba(15,23,42,.08);
  --line-strong: rgba(15,23,42,.14);
  --navy: #0b0d12;
  --blue: #0a6cff;
  --blue-soft: rgba(10,108,255,.1);
  --blue-ink: #0052cc;
  --accent: #0a6cff;
  --accent-grad: linear-gradient(180deg,#3d8dff,#0a66ff);
  --accent-hover: linear-gradient(180deg,#559bff,#1c73ff);
  --accent-glow: rgba(10,102,255,.3);
  --hero-grad: radial-gradient(120% 130% at 0% 0%, rgba(255,255,255,.38), transparent 46%), linear-gradient(135deg,#3a95ff 0%,#0a5cff 48%,#5a3cff 100%);
  --on-accent: #ffffff;
  --inverse-ink: #ffffff;
  --focus: rgba(10,108,255,.26);
  --info: #0a84c6;
  --info-soft: rgba(10,132,198,.11);
  --info-ink: #066a9e;
  --green: #1f9d4b;
  --green-soft: rgba(52,199,89,.15);
  --green-ink: #15773a;
  --orange: #c25e00;
  --orange-soft: rgba(255,149,0,.16);
  --orange-ink: #9c4a00;
  --red: #e5372e;
  --red-soft: rgba(255,59,48,.12);
  --red-ink: #c0241b;
  --yellow-soft: rgba(255,204,0,.2);
  --yellow-ink: #765900;
  --purple-soft: rgba(175,82,222,.13);
  --purple-ink: #7a33a6;
  --fill: rgba(118,118,128,.12);
  --fill-2: rgba(118,118,128,.2);
  --fill-3: rgba(118,118,128,.06);
  --input-bg: rgba(255,255,255,.72);
  --seg: #ffffff;
  --seg-shadow: 0 3px 10px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.04);
  --shadow: 0 20px 50px rgba(30,40,70,.14);
  --ring: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(255,255,255,.65), 0 10px 30px rgba(30,45,90,.07), 0 1px 2px rgba(30,45,90,.06);
  --ring-hover: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(10,108,255,.35), 0 16px 40px rgba(30,45,90,.13);
  --pop-shadow: 0 40px 110px rgba(20,30,60,.28), 0 0 0 1px rgba(255,255,255,.7);
  --overlay: rgba(205,214,230,.42);
  --sidebar-bg: rgba(255,255,255,.56);
  --sidebar-line: rgba(255,255,255,.8);
  --sidebar-ink: #0b0d12;
  --sidebar-muted: #6b7381;
  --sidebar-hover: rgba(118,118,128,.1);
  --sidebar-active: #ffffff;
  --sidebar-active-ink: #0b0d12;
  --sidebar-icon-active: #0a6cff;
  --sidebar-card: rgba(255,255,255,.62);
  --sidebar-card-ring: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(255,255,255,.7);
  --topbar-bg: rgba(238,242,247,.58);
  --subnav-bg: rgba(238,242,247,.62);
  --toast-bg: rgba(22,26,34,.86);
  --toast-ink: #ffffff;
  --avatar-bg: linear-gradient(180deg,#4f8fff,#2a5fe6);
  --switch-off: rgba(120,120,128,.24);
  --ok: #34c759;
  --badge: #ff3b30;
  --heat: 255,149,0;
  --radius: 24px;
}

/* --- 2. Gemeinsame Ebene ----------------------------------------------------- */

[data-design] ::selection { background: var(--focus); }
[data-design] :is(button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-design] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
[data-design] .measure-list input { accent-color: var(--ok); }

/* Seitenleiste */
[data-design] .sidebar { color: var(--sidebar-ink); border-right-color: var(--sidebar-line); background: var(--sidebar-bg); }
[data-design] .brand-mark { color: var(--on-accent); background: var(--accent-grad); box-shadow: 0 4px 14px var(--accent-glow); }
[data-design] .sidebar .brand-copy strong { color: var(--sidebar-ink); }
[data-design] .sidebar .brand-copy span { color: var(--sidebar-muted); }
[data-design] .role-box { background: var(--sidebar-card); box-shadow: var(--sidebar-card-ring); }
[data-design] .role-box label { color: var(--sidebar-muted); }
[data-design] .role-box select, [data-design] .user-line { color: var(--sidebar-ink); }
[data-design] .user-line span { color: var(--sidebar-muted); }
[data-design] .nav-label, [data-design] .sidebar-footer { color: var(--sidebar-muted); }
[data-design] .nav-item { color: var(--sidebar-ink); }
[data-design] .nav-item .icon { color: var(--sidebar-muted); }
[data-design] .nav-item:hover { color: var(--sidebar-ink); background: var(--sidebar-hover); }
[data-design] .nav-item.active { color: var(--sidebar-active-ink); background: var(--sidebar-active); }
[data-design] .nav-item.active .icon { color: var(--sidebar-icon-active); }
[data-design] .nav-item .count, [data-design] .nav-item .count.warn { color: #fff; background: var(--badge); }
[data-design] .audit-button { color: var(--sidebar-muted); background: transparent; }
[data-design] .audit-button:hover { color: var(--sidebar-ink); background: var(--sidebar-hover); }
[data-design] .audit-button span:last-child { background: var(--sidebar-hover); }

/* Kopfleiste und Suche */
[data-design] .topbar { border-bottom-color: var(--line); background: var(--topbar-bg); }
[data-design] .search-input { color: var(--ink); background: var(--fill); }
[data-design] .search-input:focus { background: var(--pop-bg); box-shadow: 0 0 0 4px var(--focus); }
[data-design] :is(.search-input, .input, .textarea)::placeholder { color: var(--muted-2); }
[data-design] .search-results { background: var(--pop-bg); box-shadow: var(--pop-shadow); }
[data-design] .search-result { color: var(--ink); border-top-color: var(--line); background: transparent; }
[data-design] .search-result:hover { background: var(--fill); }
[data-design] .suche-treffer { color: var(--ink); }
[data-design] .suche-treffer:hover, [data-design] .suche-treffer:focus-visible { background: var(--fill); }
[data-design] .suche-stelle b, [data-design] .suche-alle kbd { color: var(--muted); background: var(--fill); }
[data-design] .icon-button { color: var(--muted); background: var(--fill); }
[data-design] .icon-button:hover { color: var(--ink); background: var(--fill-2); }
[data-design] .icon-button .dot { border-color: var(--panel); }
[data-design] .help-button { color: var(--blue); }
[data-design] .avatar { color: #fff; background: var(--avatar-bg); }
[data-design] .subnav { background: var(--subnav-bg); }
[data-design] .subnav button.active { color: var(--ink); border-bottom-color: var(--blue); }
[data-design] .subnav .count { color: var(--muted); background: var(--fill); }
[data-design] .subnav button.active .count { color: var(--blue-ink); background: var(--blue-soft); }

/* Knöpfe */
[data-design] .button { color: var(--on-accent); background: var(--accent-grad); }
[data-design] .button:hover { background: var(--accent-hover); }
[data-design] .button.secondary { color: var(--ink); background: var(--fill); box-shadow: none; }
[data-design] .button.secondary:hover { background: var(--fill-2); }
[data-design] .button.danger, [data-design] .button.danger:hover { color: var(--red-ink); background: var(--red-soft); box-shadow: none; }
[data-design] .button.success, [data-design] .button.success:hover { color: var(--green-ink); background: var(--green-soft); box-shadow: none; }
[data-design] .sidebar .button.secondary { color: var(--sidebar-ink); background: var(--sidebar-hover); }
[data-design] .sidebar .button.secondary:hover { background: var(--sidebar-active); }
[data-design] .delete-icon, [data-design] .delete-icon:hover { color: var(--red-ink); background: var(--red-soft); }
[data-design] :is(.button.danger, .button.success, .delete-icon):hover { filter: brightness(.95) saturate(1.2); }

/* Flächen, Listen, Tabellen */
[data-design] .card { background: var(--panel); box-shadow: var(--ring); }
[data-design] .auth-card, [data-design] .month-bar { box-shadow: var(--shadow), var(--ring); }
[data-design] .metric-button:hover { box-shadow: var(--ring-hover); }
[data-design] .metric-button.selected { background: var(--blue-soft); box-shadow: 0 0 0 2px var(--blue); }
[data-design] .list-icon, [data-design] .empty-icon { color: var(--muted); background: var(--fill); }
[data-design] th { color: var(--muted); background: transparent; }
[data-design] th[data-table-sort]:hover { color: var(--blue); background: var(--fill-3); }
[data-design] .table-filter-row th, [data-design] .table-tools { background: transparent; }
[data-design] td { color: var(--ink); }
[data-design] tbody tr.clickable:hover { background: var(--fill-3); }
[data-design] .quick-action, [data-design] .project-card { color: var(--ink); border-color: var(--line); background: var(--panel-2); }
[data-design] .quick-action:hover { border-color: var(--blue); box-shadow: var(--ring-hover); }
[data-design] .board-column { border-color: var(--line); background: var(--fill-3); }
[data-design] .board-header, [data-design] .permission-role label { color: var(--muted); }
[data-design] :is(.progress, .stock-level .bar, .weekday-bar) { background: var(--fill); }
[data-design] .progress > span { background: var(--accent); }
[data-design] .timeline-dot { border-color: var(--pop-bg); background: var(--accent); box-shadow: 0 0 0 1px var(--blue-soft); }
[data-design] .tree-row { color: var(--ink); }
[data-design] .tree-row:hover, [data-design] .tree-row.active { color: var(--blue-ink); background: var(--blue-soft); }
[data-design] .asset-mark { color: var(--blue); background: var(--blue-soft); }
[data-design] :is(.vehicle-photo, .vehicle-placeholder) { color: var(--blue); background: linear-gradient(145deg, var(--blue-soft), var(--fill-3)); }
[data-design] .vehicle-body .annual-cost :is(dt, dd) { color: var(--green-ink); }
[data-design] .note-box, [data-design] .detail-description, [data-design] .measure-list label, [data-design] .service-history summary { color: var(--ink); }
[data-design] :is(.note-box, .plan-zeile, .uebergabe-notizen li, .planer-zelle.fremd) { background: var(--fill-3); }
[data-design] :is(.help-steps li, .help-grid article, .cost-module, .service-history, .help-logic) { border-color: var(--line); background: var(--fill-3); }
[data-design] :is(.help-logic > p, .help-linking p, .help-steps p, .help-list li) { color: var(--muted); }
[data-design] .help-steps li::before { color: var(--on-accent); background: var(--accent); }
[data-design] .logic-chain span { border-color: var(--line-strong); color: var(--ink); background: var(--panel-2); }
[data-design] .logic-chain b { color: var(--muted-2); }
[data-design] .help-linking { border-top-color: var(--line); }
[data-design] .help-linking strong { color: var(--ink); }

/* Schilder und Hinweise */
[data-design] .status, [data-design] .status.blue, [data-design] .source-badge, [data-design] .defect-priority.p-d { color: var(--info-ink); background: var(--info-soft); }
[data-design] .status.red, [data-design] .priority.kritisch, [data-design] .priority.hoch, [data-design] .defect-priority.p-a, [data-design] .source-badge.abgelaufen { color: var(--red-ink); background: var(--red-soft); }
[data-design] .status.orange, [data-design] .priority.mittel, [data-design] .defect-priority.p-b, [data-design] .signalwort, [data-design] .wartet-zahl { color: var(--orange-ink); background: var(--orange-soft); }
[data-design] .status.green, [data-design] .priority.niedrig { color: var(--green-ink); background: var(--green-soft); }
[data-design] .status.neutral, [data-design] .priority, [data-design] .defect-priority.p-x { color: var(--muted); background: var(--fill); }
[data-design] .defect-priority.p-c { color: var(--yellow-ink); background: var(--yellow-soft); }
[data-design] .source-badge.external { color: var(--purple-ink); background: var(--purple-soft); }
[data-design] .signalwort.gefahr { color: #fff; background: #e30613; }
[data-design] .teilnehmer.offen small { color: var(--orange-ink); }
[data-design] .attention-strip, [data-design] .attention-strip strong { color: var(--orange-ink); }
[data-design] .attention-strip { background: var(--orange-soft); }
[data-design] .attention-strip.external, [data-design] .attention-strip.external strong, [data-design] .external-service-card, [data-design] .external-service-card p { color: var(--purple-ink); }
[data-design] .attention-strip.external, [data-design] .external-service-card { border-color: transparent; background: var(--purple-soft); }
[data-design] .external-service-card .mode-icon { color: var(--purple-ink); background: var(--purple-soft); }
[data-design] .source-strip, [data-design] .source-strip strong, [data-design] .scope-notice { color: var(--info-ink); }
[data-design] .source-strip, [data-design] .scope-notice { border-color: transparent; background: var(--info-soft); }
[data-design] .defect-asset-name { border-left-color: var(--info); background: var(--info-soft); }
[data-design] .defect-asset-name .link-button { color: var(--info-ink); }
[data-design] .delete-warning, [data-design] .delete-warning p { color: var(--red-ink); }
[data-design] .delete-warning { border-color: transparent; background: var(--red-soft); }
[data-design] .loesung-hinweis > strong { color: var(--green-ink); }

/* Umschalter und Eingaben */
[data-design] .view-toggle, [data-design] .settings-tabs { background: var(--fill); }
[data-design] :is(.view-toggle button, .settings-tabs button, .view-toggle.planer-art label) { color: var(--ink); }
[data-design] :is(.view-toggle button, .settings-tabs button, .view-toggle.planer-art label).active { color: var(--ink); background: var(--seg); box-shadow: var(--seg-shadow); }
[data-design] :is(.input, .select, .textarea) { color: var(--ink); border-color: var(--line-strong); background: var(--input-bg); }
[data-design] :is(.input, .select, .textarea):focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--focus); }
[data-design] :is(.input[readonly], .input:disabled, .select:disabled, .textarea:disabled, .calculated-field) { border-color: var(--line); color: var(--muted); background: var(--fill); }
[data-design] :is(.camera-choice, .upload-zone) { border-color: var(--line-strong); background: var(--fill-3); }
[data-design] .camera-choice:hover { border-color: var(--blue); background: var(--blue-soft); }
[data-design] .upload-zone strong { color: var(--ink); }
[data-design] .ghs-knopf:has(input:checked) { box-shadow: 0 0 0 3px var(--focus); }
[data-design] .schalter { background: var(--switch-off); }
[data-design] .schalter.an, [data-design] .schritte i.erreicht { color: #fff; background: var(--ok); }
[data-design] .schritte i { color: var(--muted); background: var(--fill-2); }

/* Fenster, Seitenfach, Meldungen */
[data-design] :is(.modal-backdrop, .drawer-backdrop, .sidebar-scrim) { background: var(--overlay); }
[data-design] .modal { background: var(--pop-bg); box-shadow: var(--pop-shadow); }
[data-design] :is(.modal-header, .modal-footer, .drawer, .drawer-header) { background: var(--pop-bg); }
[data-design] .drawer { box-shadow: var(--pop-shadow); }
[data-design] .toast, [data-design] .toast.success { color: var(--toast-ink); background: var(--toast-bg); }
[data-design] .mobile-bottom-nav { border-top-color: var(--line); background: var(--topbar-bg); }
[data-design] .mobile-nav-item.active { color: var(--blue); background: transparent; }
[data-design] .fab { color: var(--on-accent); background: var(--accent-grad); box-shadow: 0 8px 24px var(--accent-glow); }

/* Startseite */
[data-design] .start-knopf, [data-design] .safety-kachel { color: var(--ink); background: var(--panel); box-shadow: var(--ring); }
[data-design] .start-knopf:hover, [data-design] .safety-kachel:hover { box-shadow: var(--ring-hover); }
[data-design] .start-knopf .icon { color: var(--blue); }
[data-design] .start-knopf:first-child, [data-design] .melde-kachel { color: var(--on-accent); background: var(--hero-grad); }
[data-design] .start-knopf:first-child .icon { color: var(--on-accent); }
[data-design] .start-knopf:first-child span { color: var(--on-accent); opacity: .88; }
[data-design] .melde-kachel p { color: var(--on-accent); opacity: .88; }
[data-design] .plan-wahl .start-knopf { color: var(--ink); background: var(--blue-soft); box-shadow: none; }
[data-design] .plan-wahl .start-knopf .icon { color: var(--blue); }
[data-design] .plan-wahl .start-knopf span { color: var(--muted); opacity: 1; }

/* Störeinsätze: Kalenderblatt */
[data-design] :is(.calendar-cell.stufe-1 .calendar-day, .legend-box.stufe-1) { border-color: rgba(var(--heat),.24); background: rgba(var(--heat),.11); }
[data-design] :is(.calendar-cell.stufe-2 .calendar-day, .legend-box.stufe-2) { border-color: rgba(var(--heat),.36); background: rgba(var(--heat),.22); }
[data-design] :is(.calendar-cell.stufe-3 .calendar-day, .legend-box.stufe-3) { border-color: rgba(var(--heat),.5); background: rgba(var(--heat),.36); }
[data-design] :is(.calendar-cell.stufe-4 .calendar-day, .legend-box.stufe-4) { border-color: rgba(var(--heat),.7); background: rgba(var(--heat),.54); }

/* Lageplan. Der Plan selbst ist eine helle Zeichnung und bleibt in jedem Design weiß –
   deshalb behalten auch die Namensschilder darauf ihre dunkle Schrift. */
[data-design] .plan-rahmen { box-shadow: var(--ring); }
[data-design] .plan-rahmen.setzen { box-shadow: 0 0 0 3px var(--blue); }
[data-design] .plan-name { color: #1d1d1f; }
[data-design] .plan-chip { color: var(--ink); background: var(--panel); box-shadow: var(--ring); }
[data-design] .plan-chip.active { color: var(--inverse-ink); background: var(--ink); }
[data-design] .plan-chip.active b { color: inherit; opacity: .7; }

/* Planer und Schichtübergabe */
[data-design] .plan-muster.fest { background: var(--accent); }
[data-design] .plan-muster.termin { background: var(--fill-2); }
[data-design] :is(.planer-tag, .uebergabe-hinweis, .loesung) { background: var(--panel); box-shadow: var(--ring); }
[data-design] .planer-tag.wochenende { background: var(--panel-dim); }
[data-design] .planer-tag.heute { box-shadow: 0 0 0 2px var(--blue); }
[data-design] :is(.planer-tag:hover .planer-plus, .planer-plus:focus-visible) { background: var(--fill); }
[data-design] .plan-eintrag.erledigt { color: var(--muted); background: var(--fill); }
[data-design] .plan-eintrag.termin { color: var(--ink); background: var(--fill); }
[data-design] .plan-eintrag.termin.faellig { color: var(--red-ink); background: var(--red-soft); }
[data-design] .planer-zelle.heute .planer-tagzahl { color: var(--on-accent); background: var(--accent); }
[data-design] .planer-ziel-aktiv { box-shadow: 0 0 0 2px var(--blue), 0 0 0 6px var(--focus) !important; }
[data-design] .uebergabe-zahl { background: var(--fill); }
[data-design] .loesung-hinweis .loesung { box-shadow: none; }
[data-design] .bestell-gruppe .table-scroll { box-shadow: var(--ring); }

/* Das QR-Etikett wird gedruckt und gescannt: immer schwarz auf weiß. */
[data-design] .qr-etikett { color: #1d1d1f; border-color: #c7c7cc; background: #fff; }
[data-design] .qr-etikett :is(span, em) { color: #6e6e73; }


/* --- 3a. Nacht: dunkel, mit leuchtendem Akzent --------------------------------- */

[data-design="nacht"] body { background: transparent; }
[data-design="nacht"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 480px at 80% -8%, rgba(61,123,255,.22), transparent 62%),
    radial-gradient(720px 440px at 6% 108%, rgba(124,92,255,.15), transparent 60%),
    var(--canvas); }
[data-design="nacht"] :is(input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"]) { color-scheme: dark; }
[data-design="nacht"] .card:where(:not(.melde-kachel, .metric-button.selected)) { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 130px), var(--panel); }
[data-design="nacht"] .page-header h1 { width: fit-content; max-width: 100%; color: transparent; background: linear-gradient(90deg,#ffffff 20%,#a8c8ff); -webkit-background-clip: text; background-clip: text; }
[data-design="nacht"] .nav-item { position: relative; }
[data-design="nacht"] .nav-item.active::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--blue); box-shadow: 0 0 12px 1px var(--blue); }
[data-design="nacht"] .button:not(.secondary, .danger, .success) { box-shadow: 0 6px 20px rgba(61,123,255,.3), inset 0 1px 0 rgba(255,255,255,.18); }
[data-design="nacht"] :is(.start-knopf:first-child, .melde-kachel) { box-shadow: 0 18px 48px rgba(61,123,255,.36), inset 0 1px 0 rgba(255,255,255,.2); }
[data-design="nacht"] :is(.start-knopf, .safety-kachel) { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0)), var(--panel); }
[data-design="nacht"] .toast { box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); }
[data-design="nacht"] .modal-footer { border-top-color: var(--line); }
/* Planer: kräftige Farbe für feste Einträge, helle Schrift für vorgemerkte. */
[data-design="nacht"] .plan-eintrag.projekt { --farbe: #2f6bff; --hell: rgba(79,140,255,.16); --schrift: #a8c8ff; }
[data-design="nacht"] .plan-eintrag.mangel { --farbe: #d9480f; --hell: rgba(255,120,60,.16); --schrift: #ffb38f; }
[data-design="nacht"] .plan-eintrag.auftrag { --farbe: #1f9d4d; --hell: rgba(48,209,88,.15); --schrift: #74e59e; }
[data-design="nacht"] .plan-eintrag.wartung { --farbe: #7a55e0; --hell: rgba(150,110,255,.18); --schrift: #c5b0ff; }
[data-design="nacht"] .plan-eintrag.sonstiges { --farbe: #5b6274; --hell: rgba(255,255,255,.07); --schrift: #c9cfdb; }
[data-design="nacht"] .plan-eintrag.vorgemerkt { color: var(--schrift); border-color: var(--schrift); }
[data-design="nacht"] .plan-eintrag.vorgemerkt b { background: rgba(255,255,255,.12); }
[data-design="nacht"] .plan-muster.vorgemerkt { border-color: #a8c8ff; }


/* --- 3b. Aurora: farbiger Hintergrund, Flächen wie Milchglas -------------------- */

[data-design="aurora"] body { background: transparent; }
[data-design="aurora"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 52vh at 6% 0%, rgba(167,139,250,.58), transparent 62%),
    radial-gradient(52vw 46vh at 96% 6%, rgba(125,211,252,.6), transparent 62%),
    radial-gradient(56vw 52vh at 88% 100%, rgba(249,168,212,.55), transparent 60%),
    radial-gradient(46vw 46vh at 8% 98%, rgba(134,239,172,.3), transparent 60%),
    var(--canvas); }
/* Die Seitenleiste schwebt als eigene Glasfläche vor dem Hintergrund. */
[data-design="aurora"] .sidebar { inset: 12px auto 12px 12px; border: 1px solid var(--sidebar-line); border-radius: 26px; box-shadow: 0 12px 40px rgba(70,50,140,.14); backdrop-filter: saturate(170%) blur(30px); -webkit-backdrop-filter: saturate(170%) blur(30px); }
[data-design="aurora"] .main-shell { margin-left: calc(var(--sidebar) + 12px); }
[data-design="aurora"] .topbar { border-bottom-color: rgba(255,255,255,.7); }
[data-design="aurora"] .subnav { border-bottom-color: var(--line); }
[data-design="aurora"] .nav-item { border-radius: 13px; }
[data-design="aurora"] .nav-item.active { box-shadow: 0 4px 16px rgba(70,50,140,.12); }
[data-design="aurora"] .page-header h1 { width: fit-content; max-width: 100%; color: transparent; background: linear-gradient(90deg,#3b2fc9 0%,#8a3fe0 55%,#d6438a 100%); -webkit-background-clip: text; background-clip: text; padding-bottom: .08em; }
[data-design="aurora"] .button { border-radius: 13px; }
[data-design="aurora"] .button:not(.secondary, .danger, .success) { box-shadow: 0 6px 18px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25); }
[data-design="aurora"] .button.small { border-radius: 10px; }
[data-design="aurora"] .button.secondary { background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(60,40,120,.1); }
[data-design="aurora"] .button.secondary:hover { background: #fff; }
[data-design="aurora"] .sidebar .button.secondary { background: rgba(80,60,150,.08); box-shadow: none; }
[data-design="aurora"] :is(.start-knopf, .safety-kachel) { border-radius: 24px; }
[data-design="aurora"] :is(.start-knopf:first-child, .melde-kachel) { box-shadow: 0 18px 44px rgba(150,70,220,.34), inset 0 1px 0 rgba(255,255,255,.3); }
[data-design="aurora"] .metric-icon, [data-design="aurora"] .list-icon { border-radius: 12px; }
[data-design="aurora"] .list-icon { color: var(--blue); background: var(--blue-soft); }
[data-design="aurora"] .modal { border-radius: 26px; }
[data-design="aurora"] .search-input, [data-design="aurora"] .icon-button { background: rgba(255,255,255,.62); box-shadow: 0 0 0 1px rgba(60,40,120,.07); }
[data-design="aurora"] .icon-button:hover { background: #fff; }
[data-design="aurora"] .delete-icon, [data-design="aurora"] .delete-icon:hover { background: var(--red-soft); box-shadow: none; }
[data-design="aurora"] .plan-eintrag.projekt { --farbe: #6344f0; --hell: #ece8fe; }

@media (max-width: 760px) {
  [data-design="aurora"] .sidebar { inset: 0 auto 0 0; border-width: 0 1px 0 0; border-radius: 0 26px 26px 0; background: rgba(255,255,255,.9); }
  [data-design="aurora"] .main-shell { margin-left: 0; }
}


/* --- 3c. Wald: warmes Papier, tiefes Grün, runde Knöpfe ------------------------- */

/* Der Inhalt liegt wie ein Blatt mit runden Ecken an der grünen Leiste. Die zwei Ecken
   sind feste Flächen in der Farbe der Leiste, damit sie auch beim Blättern stehen bleiben. */
[data-design="wald"] .main-shell::before, [data-design="wald"] .main-shell::after { content: ""; position: fixed; left: var(--sidebar); z-index: 31; width: 26px; height: 26px; pointer-events: none; }
[data-design="wald"] .main-shell::before { top: 0; background: radial-gradient(circle at 100% 100%, transparent 25.5px, var(--sidebar-bg) 26px); }
[data-design="wald"] .main-shell::after { bottom: 0; background: radial-gradient(circle at 100% 0%, transparent 25.5px, var(--sidebar-bg) 26px); }
[data-design="wald"] .sidebar { border-right: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-design="wald"] .topbar { padding-left: 34px; border-bottom-color: transparent; }
[data-design="wald"] .brand-mark { color: #15332a; background: #c5ee7d; box-shadow: none; }
[data-design="wald"] .auth-card .brand-mark { color: #fff; background: var(--accent); }
[data-design="wald"] .nav-item { border-radius: 14px; }
[data-design="wald"] .button { border-radius: 999px; padding-left: 20px; padding-right: 20px; }
[data-design="wald"] .button.small { border-radius: 999px; padding-left: 15px; padding-right: 15px; }
[data-design="wald"] :is(.search-input, .icon-button, .view-toggle, .settings-tabs, .view-toggle button, .settings-tabs button, .view-toggle.planer-art label) { border-radius: 999px; }
/* Die Reiterleiste bricht bei vielen Reitern um – dann wäre eine ganz runde Leiste zu bauchig. */
[data-design="wald"] .settings-tabs { padding: 4px; border-radius: 22px; }
[data-design="wald"] .search-input { background: rgba(60,50,20,.075); }
[data-design="wald"] :is(.start-knopf, .safety-kachel) { border-radius: 26px; }
[data-design="wald"] .start-knopf:first-child .icon, [data-design="wald"] .melde-kachel .metric-icon { color: #c5ee7d; }
[data-design="wald"] :is(.start-knopf:first-child, .melde-kachel) { box-shadow: 0 16px 40px rgba(21,51,42,.28); }
[data-design="wald"] .page-header h1 { letter-spacing: -.032em; }
[data-design="wald"] .wartet-zahl { border-radius: 999px; }
[data-design="wald"] .modal { border-radius: 28px; }
[data-design="wald"] .plan-eintrag.projekt { --farbe: #2b6c8f; --hell: #e0edf3; }
[data-design="wald"] .plan-eintrag.auftrag { --farbe: #1d6b4f; --hell: #e1eee5; }
[data-design="wald"] .mobile-nav-item.active { color: var(--accent); }

@media (max-width: 760px) {
  [data-design="wald"] .main-shell::before, [data-design="wald"] .main-shell::after { content: none; }
  [data-design="wald"] .topbar { padding-left: 14px; border-bottom-color: var(--line); }
  [data-design="wald"] .modal, [data-design="wald"] .modal.wide { border-radius: 28px 28px 0 0; }
}


/* --- 3d. Leitstand: Graphit, Raster, Signal-Bernstein ---------------------------- */

/* Feines Messraster wie auf einem Leitstand-Bildschirm, dazu ein warmer Schein oben rechts.
   Alles steht still – kein Flackern, keine Bewegung. */
[data-design="leitstand"] body { background: transparent; }
[data-design="leitstand"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(820px 460px at 92% -10%, rgba(255,160,20,.16), transparent 64%),
    radial-gradient(640px 420px at 0% 110%, rgba(79,209,232,.07), transparent 62%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--canvas); }
[data-design="leitstand"] :is(input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"]) { color-scheme: dark; }

/* Seitenleiste: fast schwarz, das aktive Ziel mit leuchtender Signalkante. */
[data-design="leitstand"] .brand-mark { color: #1a1203; background: var(--accent-grad); box-shadow: 0 0 0 1px rgba(255,200,90,.5), 0 6px 18px rgba(255,160,20,.35); }
[data-design="leitstand"] .nav-item { position: relative; border-radius: 10px; }
[data-design="leitstand"] .nav-item.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px 2px rgba(255,170,20,.55); }
[data-design="leitstand"] .nav-label { letter-spacing: .14em; }

/* Überschriften: klar und hell; die kleine Zeile darüber als Kennung in Bernstein. */
[data-design="leitstand"] .page-header h1 { letter-spacing: -.03em; }
[data-design="leitstand"] .page-header .eyebrow { color: var(--accent); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* Flächen: Haarlinie statt Schatten, oben ein Hauch Licht. */
[data-design="leitstand"] .card:where(:not(.melde-kachel, .metric-button.selected)) { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 120px), var(--panel); }
[data-design="leitstand"] .modal-footer { border-top-color: var(--line); }
[data-design="leitstand"] .modal { border-radius: 18px; }

/* Zahlen wie auf einer Anzeige: gleich breite Ziffern, damit Spalten sauber stehen. */
[data-design="leitstand"] :is(.metric-number, .puls-kopf strong, td, .wartet-zahl, .uebergabe-zahl) { font-variant-numeric: tabular-nums; }
[data-design="leitstand"] .metric-number { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; letter-spacing: -.04em; }
[data-design="leitstand"] .metric-icon { border-radius: 9px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); }

/* Status als kleine Leuchtdiode. */
[data-design="leitstand"] .status::before { box-shadow: 0 0 7px 1px currentColor; }
[data-design="leitstand"] .status { border-radius: 7px; }

/* Knöpfe: Bernstein mit dunkler Schrift, kantiger als in den anderen Designs. */
[data-design="leitstand"] .button { border-radius: 10px; font-weight: 600; }
[data-design="leitstand"] .button:not(.secondary, .danger, .success) { box-shadow: 0 6px 20px rgba(255,160,20,.22), inset 0 1px 0 rgba(255,255,255,.35); }
[data-design="leitstand"] .button.secondary { box-shadow: inset 0 0 0 1px var(--line); }
[data-design="leitstand"] :is(.search-input, .icon-button) { box-shadow: inset 0 0 0 1px var(--line); }

/* Der große Melde-Knopf als Signalfläche – mit Warnstreifen am Rand wie an der Maschine. */
[data-design="leitstand"] :is(.start-knopf:first-child, .melde-kachel) { position: relative; overflow: hidden; box-shadow: 0 18px 48px rgba(255,150,10,.28), inset 0 1px 0 rgba(255,255,255,.45); }
[data-design="leitstand"] :is(.start-knopf:first-child, .melde-kachel)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(26,18,3,.16) 0 9px, transparent 9px 18px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
[data-design="leitstand"] :is(.start-knopf, .safety-kachel) { border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--panel); }
[data-design="leitstand"] .start-knopf:first-child { background: var(--hero-grad); }

/* Werkspuls als Anzeige aus Leuchtsegmenten. */
[data-design="leitstand"] { --puls-rot: #ff5a52; --puls-orange: #ff9a3c; --puls-gelb: #ffd23f; --puls-gruen: #2fcf73; }
[data-design="leitstand"] .puls-name { color: var(--accent); font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .16em; }
[data-design="leitstand"] .puls-punkt { box-shadow: 0 0 12px 2px var(--puls-farbe, var(--puls-gruen)); }
[data-design="leitstand"] .puls-balken { border-radius: 4px; overflow: visible; }
[data-design="leitstand"] .puls-balken i { border-radius: 3px; background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(12,14,17,.6) 6px 8px); }
[data-design="leitstand"] i.puls-rot { box-shadow: 0 0 14px -3px var(--puls-rot); }
[data-design="leitstand"] i.puls-orange { box-shadow: 0 0 14px -3px var(--puls-orange); }
[data-design="leitstand"] i.puls-gelb { box-shadow: 0 0 14px -3px var(--puls-gelb); }
[data-design="leitstand"] i.puls-gruen { box-shadow: 0 0 14px -3px var(--puls-gruen); }

[data-design="leitstand"] .toast { box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); }
[data-design="leitstand"] .mobile-nav-item.active { color: var(--accent); }

/* Planer: dieselben dunklen Farben wie bei „Nacht", Projekte in Cyan. */
[data-design="leitstand"] .plan-eintrag.projekt { --farbe: #1596ad; --hell: rgba(79,209,232,.14); --schrift: #8fe3f2; }
[data-design="leitstand"] .plan-eintrag.mangel { --farbe: #d9480f; --hell: rgba(255,120,60,.16); --schrift: #ffb38f; }
[data-design="leitstand"] .plan-eintrag.auftrag { --farbe: #1f9d4d; --hell: rgba(48,209,88,.15); --schrift: #74e59e; }
[data-design="leitstand"] .plan-eintrag.wartung { --farbe: #7a55e0; --hell: rgba(150,110,255,.18); --schrift: #c5b0ff; }
[data-design="leitstand"] .plan-eintrag.sonstiges { --farbe: #5b6274; --hell: rgba(255,255,255,.07); --schrift: #c9cfdb; }
[data-design="leitstand"] .plan-eintrag.vorgemerkt { color: var(--schrift); border-color: var(--schrift); }
[data-design="leitstand"] .plan-eintrag.vorgemerkt b { background: rgba(255,255,255,.12); }
[data-design="leitstand"] .plan-muster.vorgemerkt { border-color: #8fe3f2; }


/* --- 3e. Glas: schwebende Glasflächen mit Lichtkante, Kapsel-Knöpfe ---------------- */

/* Ruhiger, kühler Grund mit drei weichen Lichtfeldern – genug, damit das Glas wirkt. */
[data-design="glas"] body { background: transparent; }
[data-design="glas"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62vw 56vh at 4% -6%, rgba(140,190,255,.72), transparent 64%),
    radial-gradient(54vw 50vh at 100% 4%, rgba(150,230,220,.6), transparent 62%),
    radial-gradient(60vw 54vh at 70% 108%, rgba(190,182,255,.55), transparent 62%),
    var(--canvas); }

/* Seitenleiste als eigene, schwebende Glasscheibe. */
[data-design="glas"] .sidebar { inset: 12px auto 12px 12px; border: 1px solid var(--sidebar-line); border-radius: 30px;
  box-shadow: inset 0 1px 0 #fff, 0 18px 50px rgba(30,45,90,.13);
  backdrop-filter: saturate(180%) blur(36px); -webkit-backdrop-filter: saturate(180%) blur(36px); }
[data-design="glas"] .main-shell { margin-left: calc(var(--sidebar) + 12px); }
[data-design="glas"] .brand-mark { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(10,102,255,.3); }
[data-design="glas"] .nav-item { border-radius: 999px; }
[data-design="glas"] .nav-item.active { box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(0,0,0,.05), 0 4px 14px rgba(30,45,90,.12); }

/* Kopfzeile durchsichtig; Suche und Knöpfe als Glaskapseln. */
[data-design="glas"] .topbar { border-bottom-color: transparent; }
[data-design="glas"] .subnav { border-bottom-color: var(--line); }
[data-design="glas"] :is(.search-input, .icon-button) { border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15,23,42,.06), 0 2px 8px rgba(30,45,90,.06); }
[data-design="glas"] .icon-button:hover { background: #fff; }

/* Große, kräftige Überschriften. */
[data-design="glas"] .page-header h1 { font-size: 38px; font-weight: 700; letter-spacing: -.038em; }
[data-design="glas"] :is(.card-header h2, .section-title) { letter-spacing: -.022em; }

/* Knöpfe als Kapseln; der Hauptknopf mit Glanz oben und Tiefe unten. */
[data-design="glas"] .button { border-radius: 999px; padding-left: 20px; padding-right: 20px; }
[data-design="glas"] .button.small { border-radius: 999px; padding-left: 15px; padding-right: 15px; }
[data-design="glas"] .button:not(.secondary, .danger, .success) { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.12), 0 6px 18px rgba(10,102,255,.28); }
[data-design="glas"] .button.secondary { background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(15,23,42,.08), 0 2px 6px rgba(30,45,90,.06); }
[data-design="glas"] .button.secondary:hover { background: #fff; }
[data-design="glas"] .sidebar .button.secondary { background: rgba(255,255,255,.6); }
[data-design="glas"] :is(.view-toggle, .settings-tabs) { border-radius: 999px; }
[data-design="glas"] :is(.view-toggle button, .settings-tabs button, .view-toggle.planer-art label) { border-radius: 999px; }
[data-design="glas"] .settings-tabs { padding: 4px; border-radius: 22px; }
[data-design="glas"] :is(.input, .select, .textarea) { border-radius: 14px; box-shadow: inset 0 1px 2px rgba(15,23,42,.04); }

/* Flächen: Glas mit heller Oberkante. */
[data-design="glas"] .card { border: 1px solid rgba(255,255,255,.7); }
[data-design="glas"] :is(.start-knopf, .safety-kachel) { border-radius: 28px; }
[data-design="glas"] :is(.metric-icon, .list-icon) { border-radius: 12px; }

/* Zahlen in der runden Schrift von Apple – wie in Fitness und Health. */
[data-design="glas"] .metric-number { font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; }

/* Der Melde-Knopf als flüssiges Glas: Farbverlauf, Glanzlicht, Lichtkante. */
[data-design="glas"] :is(.start-knopf:first-child, .melde-kachel) { position: relative; overflow: hidden; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12), 0 20px 46px rgba(10,92,255,.32); }
[data-design="glas"] :is(.start-knopf:first-child, .melde-kachel)::after { content: ""; position: absolute; inset: 0 0 52% 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }

/* Werkspuls: glänzende Kapseln in den klaren Systemfarben. */
[data-design="glas"] { --puls-rot: #ff3b30; --puls-orange: #ff9500; --puls-gelb: #ffcc00; --puls-gruen: #34c759; }
[data-design="glas"] .puls-balken { height: 12px; gap: 4px; }
[data-design="glas"] .puls-balken i { background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 65%); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.06); }

/* Fenster: großes Glas, der Hintergrund wird hell verwischt statt abgedunkelt. */
[data-design="glas"] .modal-backdrop { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
[data-design="glas"] .modal { border-radius: 32px; border: 1px solid rgba(255,255,255,.8); }
[data-design="glas"] .modal-footer { background: rgba(251,252,254,.82); }
[data-design="glas"] .drawer { border-left: 1px solid rgba(255,255,255,.8); }
[data-design="glas"] .toast { border-radius: 999px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 14px 40px rgba(20,30,60,.25); }
[data-design="glas"] .status { border-radius: 999px; }

@media (max-width: 760px) {
  [data-design="glas"] .sidebar { inset: 0 auto 0 0; border-width: 0 1px 0 0; border-radius: 0 30px 30px 0; background: rgba(255,255,255,.88); }
  [data-design="glas"] .main-shell { margin-left: 0; padding-bottom: 104px; }
  [data-design="glas"] .page-header h1 { font-size: 32px; }
  /* Am Telefon schwebt die Leiste unten als Glaskapsel über dem Inhalt. */
  [data-design="glas"] .mobile-bottom-nav { inset: auto 14px calc(14px + env(safe-area-inset-bottom)) 14px; height: 66px; padding: 6px; border: 1px solid rgba(255,255,255,.85); border-radius: 999px;
    background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 #fff, 0 14px 36px rgba(20,30,60,.18);
    backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); }
  [data-design="glas"] .mobile-nav-item { border-radius: 999px; }
  [data-design="glas"] .mobile-nav-item.active { color: var(--blue); background: rgba(118,118,128,.13); }
  [data-design="glas"] .modal, [data-design="glas"] .modal.wide { border-radius: 32px 32px 0 0; }
}


/* --- 4. Auswahl-Kacheln unter „Einrichten" -------------------------------------
   Jede Kachel zeigt ein kleines Bild des Designs: links die Leiste, rechts drei
   Flächen. Die Farben stehen fest an der Kachel, damit jedes Bild in jedem Design
   gleich aussieht. */
.design-wahl-liste { padding: 0 22px 22px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.design-wahl { padding: 10px 10px 13px; border: 0; border-radius: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--ink); background: transparent; box-shadow: 0 0 0 1px var(--line-strong); text-align: left; transition: box-shadow .15s, transform .12s; }
.design-wahl:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-strong), 0 10px 26px rgba(0,0,0,.1); }
.design-wahl.aktiv { box-shadow: 0 0 0 2.5px var(--blue); }
.design-wahl strong { margin: 9px 4px 0; display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 600; }
.design-wahl.aktiv strong .icon { color: var(--blue); }
.design-wahl > span:last-child { margin: 0 4px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.design-bild { position: relative; aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden; display: block; background: var(--b-grund); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.design-bild i, .design-bild b, .design-bild em, .design-bild u { position: absolute; display: block; }
.design-bild i { inset: var(--b-rand, 0) auto var(--b-rand, 0) var(--b-rand, 0); width: 25%; border-radius: var(--b-leiste-rund, 0); background: var(--b-leiste); }
.design-bild i::before, .design-bild i::after { content: ""; position: absolute; left: 16%; right: 16%; height: 9%; border-radius: 4px; }
.design-bild i::before { top: 26%; background: var(--b-aktiv); }
.design-bild i::after { top: 43%; right: 34%; height: 24%; border-radius: 0; background: repeating-linear-gradient(180deg, var(--b-strich) 0 20%, transparent 20% 50%); opacity: .55; }
.design-bild b { top: 22%; left: 33%; width: 27%; height: 30%; border-radius: var(--b-rund, 6px); background: var(--b-akzent); box-shadow: 0 5px 12px var(--b-schein, transparent); }
.design-bild em { top: 22%; left: 65%; width: 27%; height: 30%; border-radius: var(--b-rund, 6px); background: var(--b-karte); box-shadow: 0 0 0 1px var(--b-kante); }
.design-bild u { top: 60%; left: 33%; right: 8%; bottom: -8%; border-radius: var(--b-rund, 6px); background: var(--b-karte); box-shadow: 0 0 0 1px var(--b-kante); }
.design-bild u::before, .design-bild u::after { content: ""; position: absolute; left: 9%; height: 3px; border-radius: 2px; background: var(--b-strich); }
.design-bild u::before { top: 24%; width: 42%; }
.design-bild u::after { top: 48%; width: 62%; opacity: .5; }
.design-bild-hell { --b-grund: #f5f5f7; --b-leiste: #fbfbfd; --b-aktiv: rgba(0,0,0,.09); --b-strich: #b9b9c0; --b-akzent: linear-gradient(180deg,#1a86ff,#0068d6); --b-karte: #fff; --b-kante: rgba(0,0,0,.06); }
.design-bild-nacht { --b-grund: radial-gradient(90% 80% at 85% 0%, #1b2b55, #0b0d12 70%); --b-leiste: #11141b; --b-aktiv: rgba(79,140,255,.35); --b-strich: #5d667a; --b-akzent: linear-gradient(135deg,#3d7bff,#7a4dff); --b-schein: rgba(61,123,255,.5); --b-karte: #1a1e29; --b-kante: rgba(255,255,255,.09); }
.design-bild-aurora { --b-grund: radial-gradient(70% 70% at 0% 0%, #c9b8ff, transparent 70%), radial-gradient(70% 70% at 100% 0%, #b3e3ff, transparent 70%), radial-gradient(70% 70% at 100% 100%, #ffc2de, transparent 70%), #f3f1fb; --b-rand: 5%; --b-leiste-rund: 7px; --b-leiste: rgba(255,255,255,.7); --b-aktiv: #fff; --b-strich: #a39cc4; --b-akzent: linear-gradient(135deg,#5b46f0,#a243ea 55%,#e2508f); --b-schein: rgba(150,70,220,.4); --b-karte: rgba(255,255,255,.72); --b-kante: rgba(255,255,255,.9); --b-rund: 8px; }
.design-bild-wald { --b-grund: #f3efe6; --b-leiste: #15332a; --b-aktiv: #c5ee7d; --b-strich: #9db3a6; --b-akzent: radial-gradient(130% 150% at 100% 0%,#2f9069,#1d6b4f 45%,#15332a); --b-karte: #fffdf8; --b-kante: rgba(60,50,20,.09); --b-rund: 9px; }
.design-bild-wald u::before, .design-bild-wald u::after { background: #cfc7b4; }
.design-bild-glas { --b-grund: radial-gradient(70% 70% at 0% 0%, #b9d7ff, transparent 70%), radial-gradient(70% 70% at 100% 0%, #c4efe9, transparent 70%), #eef2f7; --b-rand: 5%; --b-leiste-rund: 8px; --b-leiste: rgba(255,255,255,.75); --b-aktiv: #fff; --b-strich: #a7b0bf; --b-akzent: radial-gradient(120% 130% at 0% 0%, rgba(255,255,255,.4), transparent 50%), linear-gradient(135deg,#3a95ff,#0a5cff 50%,#5a3cff); --b-schein: rgba(10,92,255,.4); --b-karte: rgba(255,255,255,.75); --b-kante: rgba(255,255,255,.95); --b-rund: 9px; }
.design-bild-leitstand { --b-grund: radial-gradient(80% 70% at 90% 0%, rgba(255,160,20,.32), transparent 70%), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 9px 9px, linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 9px 9px, #0c0e11; --b-leiste: #07080a; --b-aktiv: rgba(255,176,32,.5); --b-strich: #6c7480; --b-akzent: repeating-linear-gradient(-45deg, rgba(26,18,3,.18) 0 4px, transparent 4px 8px) right / 40% 100% no-repeat, linear-gradient(135deg,#ffc94f,#ff9a00); --b-schein: rgba(255,160,20,.45); --b-karte: #181b21; --b-kante: rgba(255,255,255,.09); --b-rund: 5px; }

@media (max-width: 900px) { .design-wahl-liste { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .design-wahl-liste { padding: 0 16px 16px; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); } .design-wahl strong { font-size: 15px; } }