/* Darstellung: Umschalter (System / Hell / Dunkel) und Dunkelmodus für alle Seiten.
   Wird nach den Band-Stylesheets geladen. data-farbe und data-band setzt /thema.js im <head>.
   Kein Gelb und kein Orange. Gedruckt wird immer hell. */

/* ---------------------------------------------------------------- Umschalter */
.thema-schalter { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); vertical-align: middle; }
.thema-schalter button { margin: 0; width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; box-shadow: none; }
.thema-schalter button:hover { background: var(--plaster); color: var(--ink); }
.thema-schalter button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.thema-schalter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thema-schalter button:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.foot-thema { display: flex; align-items: center; gap: 10px; flex-basis: 100%; margin-top: 10px; color: var(--muted); font-size: 0.9rem; }

@media screen {
  /* ---------------------------------------------------------------- Grundfarben dunkel */
  html[data-farbe="dunkel"] {
    color-scheme: dark;
    --plaster: #12171C;
    --paper:   #1A2128;
    --ink:     #E6EBEF;
    --muted:   #A6B1BB;
    --line:    #33404B;
    --sun-l:   #22303D;
    --feld:    #0F1418;
    --gut:     #74D196;
    --schlecht:#F0907A;
    --gut-bg:  #1C3A29;
    --mittel-bg: #263240;
    --schlecht-bg: #43261F;
    --dunkelflaeche: #0C1013;
  }
  /* Akzent je Band, heller für dunklen Grund. --brass-d bleibt kräftig genug für weiße Schrift auf Knöpfen. */
  html[data-farbe="dunkel"][data-band="b1"] { --brass: #34C47C; --brass-d: #0E7A45; --akzent: #6FDCA3; }
  html[data-farbe="dunkel"][data-band="b2"] { --brass: #4E9EEA; --brass-d: #155FA8; --akzent: #8DC1F2; }
  html[data-farbe="dunkel"][data-band="b3"] { --brass: #2DB5B5; --brass-d: #0F6B6B; --akzent: #6FD3D3; }
  html[data-farbe="dunkel"][data-band="b4"] { --brass: #7097BE; --brass-d: #3E6489; --akzent: #A9C3DE; }
  html[data-farbe="dunkel"][data-band="b5"] { --brass: #B474CE; --brass-d: #7A3999; --akzent: #D9AEEA; --rosa: #4A2A57; }

  html[data-farbe="dunkel"] body { background: var(--plaster); color: var(--ink); }
  html[data-farbe="dunkel"] a { color: var(--ink); }

  /* Eingabefelder und weiße Flächen */
  html[data-farbe="dunkel"] input[type="number"], html[data-farbe="dunkel"] input[type="text"], html[data-farbe="dunkel"] input[type="email"],
  html[data-farbe="dunkel"] input[type="search"], html[data-farbe="dunkel"] input[type="date"], html[data-farbe="dunkel"] input[type="month"],
  html[data-farbe="dunkel"] select, html[data-farbe="dunkel"] textarea { background: var(--feld); color: var(--ink); border-color: var(--line); }
  html[data-farbe="dunkel"] ::placeholder { color: #7D8892; }
  html[data-farbe="dunkel"] .btn2, html[data-farbe="dunkel"] fieldset.vertrag, html[data-farbe="dunkel"] .kal div, html[data-farbe="dunkel"] .brief,
  html[data-farbe="dunkel"] .prog, html[data-farbe="dunkel"] .sort-spalte, html[data-farbe="dunkel"] .wahl-k,
  html[data-farbe="dunkel"] .chip span, html[data-farbe="dunkel"] .ht-art-btn { background: var(--feld); color: var(--ink); }
  html[data-farbe="dunkel"] .btn2 { border-color: var(--ink); }
  html[data-farbe="dunkel"] .btn2:hover, html[data-farbe="dunkel"] .ht-art-btn:hover { background: var(--sun-l); color: var(--ink); }

  /* Flächen, die im hellen Modus die Textfarbe als Hintergrund nutzen */
  html[data-farbe="dunkel"] .wait { background: var(--dunkelflaeche); color: var(--ink); border-top: 1px solid var(--line); }
  html[data-farbe="dunkel"] .wait h2, html[data-farbe="dunkel"] .wait label, html[data-farbe="dunkel"] .wait .check a { color: var(--ink); }
  html[data-farbe="dunkel"] .wait .check, html[data-farbe="dunkel"] .wait .opt, html[data-farbe="dunkel"] .wait .fine { color: var(--muted); }
  html[data-farbe="dunkel"] .wait button { background: var(--brass-d); color: #fff; }
  html[data-farbe="dunkel"] .wait button:hover { background: var(--brass); color: #fff; }
  html[data-farbe="dunkel"] .chip input:checked + span, html[data-farbe="dunkel"] .ht-art-btn.an,
  html[data-farbe="dunkel"] .ht-art-btn.an:hover { background: var(--brass-d); border-color: var(--brass-d); color: #fff; }
  html[data-farbe="dunkel"] .ht-art { border-color: var(--line); }
  html[data-farbe="dunkel"] .gbar i, html[data-farbe="dunkel"] .ht-tag.heute .saeule i, html[data-farbe="dunkel"] .track-fill { background: var(--brass); }
  html[data-farbe="dunkel"] .ht-tag .saeule em { border-top-color: var(--ink); }
  html[data-farbe="dunkel"] .ht-hero { border-top-color: var(--brass); }
  html[data-farbe="dunkel"] .btn { background: var(--brass-d); color: #fff; }
  html[data-farbe="dunkel"] .tabs button[aria-selected="true"] { background: var(--brass-d); border-color: var(--brass-d); color: #fff; }
  html[data-farbe="dunkel"] .tabs button:hover { background: var(--sun-l); }

  /* Akzent als Schriftfarbe */
  html[data-farbe="dunkel"] .book svg, html[data-farbe="dunkel"] .ht-vormerk, html[data-farbe="dunkel"] .ht-hilfe summary,
  html[data-farbe="dunkel"] .linkbtn:hover, html[data-farbe="dunkel"] .price, html[data-farbe="dunkel"] .brand-key { color: var(--akzent); }
  html[data-farbe="dunkel"] .steps li::before { color: var(--akzent); }

  /* Gut / schlecht */
  html[data-farbe="dunkel"] .ok-tag, html[data-farbe="dunkel"] .big.plus, html[data-farbe="dunkel"] .kopiert,
  html[data-farbe="dunkel"] .ht-liste li.ein b { color: var(--gut); }
  html[data-farbe="dunkel"] .no-tag, html[data-farbe="dunkel"] .minus, html[data-farbe="dunkel"] table.nums td.minus,
  html[data-farbe="dunkel"] .big.minus, html[data-farbe="dunkel"] .weg, html[data-farbe="dunkel"] table.cmp td.leer,
  html[data-farbe="dunkel"] .luecke { color: var(--schlecht); }
  html[data-farbe="dunkel"] .weg:hover { color: #F7B4A4; }
  html[data-farbe="dunkel"] .track-fill.drueber, html[data-farbe="dunkel"] .ht-tag.drueber .saeule i { background: #C9583F; }
  html[data-farbe="dunkel"] .ampel.gut, html[data-farbe="dunkel"] .tag.good, html[data-farbe="dunkel"] .tiles .s,
  html[data-farbe="dunkel"] select.st-ja, html[data-farbe="dunkel"] .todo, html[data-farbe="dunkel"] table.cmp td.best { background: var(--gut-bg); color: #BDEBCB; }
  html[data-farbe="dunkel"] .ampel.knapp, html[data-farbe="dunkel"] .tag.bad, html[data-farbe="dunkel"] select.st-nein { background: var(--schlecht-bg); color: #F6C3B6; }
  html[data-farbe="dunkel"] .ampel.minus { background: #A0412D; color: #fff; }
  html[data-farbe="dunkel"] .tag.mid, html[data-farbe="dunkel"] .tiles .s.b, html[data-farbe="dunkel"] select.st-teils { background: var(--mittel-bg); color: var(--ink); }
  html[data-farbe="dunkel"] table.cmp tr.abw td, html[data-farbe="dunkel"] .stufen li.jetzt { background: var(--sun-l); }
  html[data-farbe="dunkel"] .wahl-k:has(input:checked) { background: var(--sun-l); }
  html[data-farbe="dunkel"] .sbar-teuer i { background: #9A5AB5; }

  /* Hinweiskästen und Startseite */
  html[data-farbe="dunkel"] .hinweis { background: var(--sun-l); }
  html[data-farbe="dunkel"] .heute-band { border-left-color: var(--brass); }
  html[data-farbe="dunkel"] .heute-band .btn { background: #3E6489; }
  html[data-farbe="dunkel"] .heute-band .btn:hover { background: #4F7AA6; }

  /* Bilder und Symbole mit fester heller Fläche etwas abdunkeln */
  html[data-farbe="dunkel"] img:not(.app-symbol) { filter: brightness(.92); }
}