/* Dunkles Design der Zeiterfassung (Schalter im Kontomenü). Gilt nur mit data-theme="dunkel" am <html>-Element (design.js) und tauscht
   vor allem Variablen; die Werte sind dieselben wie im dunklen Design des Leads-Cockpits. Das helle Design steht unverändert in
   klarglas.css und app.css – hier stehen nur die Stellen, die dort ein festes Weiß oder eine feste Textfarbe haben.
   Text mindestens 4,5 : 1 auf Schwarz und auf dem dunklen Glas. */
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --ink: #F3F5FB; --muted: #AAB3CC; --faint: #8E98B4; --err: #FF8F80;
  --bg: #000000;
  --hair: rgba(255, 255, 255, .12); --fill: rgba(255, 255, 255, .06); --fill-2: rgba(255, 255, 255, .10); --tint: rgba(120, 170, 255, .14);
  --shadow-1: 0 1px 1px rgba(0, 0, 0, .5), 0 14px 32px -14px rgba(0, 0, 0, .8);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .6), 0 34px 80px -26px rgba(0, 0, 0, .9);
  --glas-fuellung: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .04));
  --glas-fuellung-dicht: linear-gradient(180deg, rgba(34, 36, 46, .94), rgba(22, 24, 32, .94));
  --glas-kante: linear-gradient(135deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .07) 30%, rgba(255, 255, 255, .02) 58%, rgba(255, 255, 255, .24) 100%);
  --glas-licht: inset 0 1px 0 rgba(255, 255, 255, .10);
  --glas-tiefe: inset 0 -12px 20px -16px rgba(0, 0, 0, .6);
  --glas-aussen: 0 0 0 1px rgba(255, 255, 255, .10);
}
:root[data-theme="dunkel"] body {
  background:
    radial-gradient(900px 560px at -4% 106%, rgba(255, 255, 255, .05), transparent 62%),
    radial-gradient(760px 520px at 104% -6%, rgba(90, 110, 170, .20), transparent 60%),
    linear-gradient(165deg, #0B0C10 0%, #000000 100%);
  background-attachment: fixed;
}
:root[data-theme="dunkel"] a { color: #9CC0FF; }

/* Logo: dunkelblaue Schrift gibt es nur hell; im Dunkeln steht die helle Fassung (Markenfarben bleiben, nur das Navy ist aufgehellt) */
:root:not([data-theme="dunkel"]) .logo-dunkel { display: none; }   /* stärker als .marke img und .anmelde-karte .logo */
:root[data-theme="dunkel"] .logo-hell { display: none; }
:root[data-theme="dunkel"] .logo-dunkel { display: block; }

/* Bausteine aus klarglas.css mit festem Weiß */
:root[data-theme="dunkel"] button.sec, :root[data-theme="dunkel"] .btn.sec, :root[data-theme="dunkel"] button.danger { background: rgba(255, 255, 255, .08); }
:root[data-theme="dunkel"] button.sec:hover, :root[data-theme="dunkel"] .btn.sec:hover { background: rgba(255, 255, 255, .14); }
:root[data-theme="dunkel"] button.ghost { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
:root[data-theme="dunkel"] button.ghost:hover { background: rgba(255, 255, 255, .08); }
:root[data-theme="dunkel"] a.btn { color: #fff; }   /* Link-Knöpfe: weiße Schrift auf Blau statt der hellblauen Linkfarbe */
:root[data-theme="dunkel"] a.btn.sec { color: var(--ink); }
:root[data-theme="dunkel"] a.btn.ghost { color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
:root[data-theme="dunkel"] a.btn.ghost:hover { background: rgba(255, 255, 255, .08); }
:root[data-theme="dunkel"] button.danger { color: #FF9A8C; }
:root[data-theme="dunkel"] button.danger:hover { background: rgba(214, 80, 63, .18); }
:root[data-theme="dunkel"] button:disabled { background: rgba(255, 255, 255, .06); }
:root[data-theme="dunkel"] input, :root[data-theme="dunkel"] select, :root[data-theme="dunkel"] textarea {
  background-color: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .12); }
:root[data-theme="dunkel"] input:hover, :root[data-theme="dunkel"] select:hover, :root[data-theme="dunkel"] textarea:hover { background-color: rgba(255, 255, 255, .10); }
:root[data-theme="dunkel"] input:focus, :root[data-theme="dunkel"] select:focus, :root[data-theme="dunkel"] textarea:focus {
  background-color: rgba(255, 255, 255, .10); box-shadow: 0 0 0 1px rgba(var(--akzent), .9), 0 0 0 5px rgba(var(--akzent), .3); }
:root[data-theme="dunkel"] .chip { background: rgba(255, 255, 255, .10); color: var(--ink); }
:root[data-theme="dunkel"] .chip.ok { background: rgba(var(--gruen), .18); color: #79E0A6; }
:root[data-theme="dunkel"] .chip.warn { background: rgba(var(--warn), .16); color: #F5CB68; }
:root[data-theme="dunkel"] .chip.bad { background: rgba(214, 80, 63, .18); color: #FF9A8C; }
:root[data-theme="dunkel"] .chip.info { background: rgba(var(--akzent), .22); color: #9CC0FF; }
:root[data-theme="dunkel"] .chip.still { background: rgba(255, 255, 255, .08); color: var(--muted); }
:root[data-theme="dunkel"] .dialog-scrim { background: rgba(0, 0, 0, .55); }

/* Bausteine aus app.css mit festem Weiß oder fester Textfarbe */
:root[data-theme="dunkel"] .nav, :root[data-theme="dunkel"] .monat-nav, :root[data-theme="dunkel"] .tabs { background: rgba(255, 255, 255, .08); }
:root[data-theme="dunkel"] a.tab:hover { background: rgba(255, 255, 255, .08); }
:root[data-theme="dunkel"] a.tab.on { background: rgba(255, 255, 255, .16); }
:root[data-theme="dunkel"] .nav.nav-unten { background: var(--glas-fuellung-dicht); }
:root[data-theme="dunkel"] .monat-nav button:hover { background: rgba(255, 255, 255, .12); }
:root[data-theme="dunkel"] .konto .menu { background: rgba(26, 28, 36, .97); }
:root[data-theme="dunkel"] .menu button.rot { color: #FF9A8C; }
:root[data-theme="dunkel"] .avatar { color: #9CC0FF; background: rgba(var(--akzent), .22); box-shadow: inset 0 0 0 1px rgba(var(--akzent), .35); }
:root[data-theme="dunkel"] .ikon { color: #9CC0FF; background: rgba(var(--akzent), .20); }
:root[data-theme="dunkel"] .ikon.gruen { color: #79E0A6; background: rgba(var(--gruen), .18); }
:root[data-theme="dunkel"] .ikon.gold { color: #F5CB68; background: rgba(var(--warn), .18); }
:root[data-theme="dunkel"] .ikon.rot { color: #FF9A8C; background: rgba(214, 80, 63, .18); }
:root[data-theme="dunkel"] .ikon.grau { color: var(--muted); background: rgba(255, 255, 255, .08); }
:root[data-theme="dunkel"] .plus, :root[data-theme="dunkel"] .kpi .n.plus { color: #79E0A6; }
:root[data-theme="dunkel"] .minus, :root[data-theme="dunkel"] .kpi .n.minus { color: #FF9A8C; }
:root[data-theme="dunkel"] .zeile-l.klick:hover, :root[data-theme="dunkel"] button.drop-kopf:hover { background: rgba(255, 255, 255, .06); }
:root[data-theme="dunkel"] .tabelle tr.frei td { background: rgba(255, 255, 255, .02); }
:root[data-theme="dunkel"] .tabelle tfoot td { background: rgba(255, 255, 255, .04); }
:root[data-theme="dunkel"] .wahl-tage span { background: rgba(255, 255, 255, .07); }
:root[data-theme="dunkel"] .wahl-tage input:checked + span { color: #9CC0FF; background: rgba(var(--akzent), .25); }
:root[data-theme="dunkel"] .stat, :root[data-theme="dunkel"] .adresse code { background: rgba(255, 255, 255, .07); }
:root[data-theme="dunkel"] .zeitleiste .seg.pause { background: repeating-linear-gradient(135deg, rgba(170, 179, 204, .45) 0 5px, rgba(170, 179, 204, .22) 5px 10px); }
:root[data-theme="dunkel"] .legende i.pause { background: rgba(170, 179, 204, .45); }
:root[data-theme="dunkel"] .zeitleiste .seg.arbeit, :root[data-theme="dunkel"] .legende i.arbeit { background: rgba(90, 145, 255, .9); }

/* Barrierefreiheit */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dunkel"] .card, :root[data-theme="dunkel"] .kpi, :root[data-theme="dunkel"] .sheet, :root[data-theme="dunkel"] .dialog,
  :root[data-theme="dunkel"] .menu, :root[data-theme="dunkel"] .kopf, :root[data-theme="dunkel"] .hinweis { background: #14161C; }
}
@media (prefers-contrast: more) {
  :root[data-theme="dunkel"] { --hair: rgba(255, 255, 255, .5); --muted: #D5DBEC; --faint: #C0C8DE; --err: #FFB4A8;
    --glas-kante: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)); --glas-aussen: 0 0 0 1px rgba(255, 255, 255, .6); }
}