/* Toolbox: Darkside-Modus. Darkside ist Standard; der Schalter setzt html[data-theme="dunkel"]. */
html[data-theme="dunkel"]{
  color-scheme:dark;
  --hell:#12132b; --flaeche:#1d1f45; --flaeche-2:#252858;
  --text:#d6d8ee; --muted:#a9acca; --nacht:#f3f1fa; --linie:#30346a; --zart:#2b2456;
  --beere:#f27ab0; --violett:#c99be8; --beere-dark:#e99bc4; --gelb:#fed23a;
  --gruen:#3fb47a; --gruen-hell:#16342a; --ampelgelb:#f6c453; --gelb-hell:#372d12;
  --rot:#f06363; --rot-hell:#3a1b24;
}
html[data-theme="dunkel"] body{
  background:
    radial-gradient(60rem 30rem at 15% -10%, rgba(125,29,84,.35), transparent 60%),
    radial-gradient(50rem 26rem at 95% 0%, rgba(105,34,123,.35), transparent 55%),
    var(--hell);
}
/* weiße Flächen → dunkle Karten */
html[data-theme="dunkel"] :is(.karte, form, ul.themen li, .bereits, button.zweit, .zweit, .details,
  .kopieren, .reiter button, .feld, .erklaerung, .beitrag, .aktionen .zweit){
  background:var(--flaeche); box-shadow:0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="dunkel"] :is(.karte, form, .bereits, .details, .feld, .erklaerung, .beitrag){border-color:var(--linie)}
html[data-theme="dunkel"] .karte:hover{border-color:var(--violett); box-shadow:0 16px 40px rgba(0,0,0,.5)}
html[data-theme="dunkel"] .karte.v{background:rgba(29,31,69,.55); border-color:#5a5f92}
html[data-theme="dunkel"] .reiter button:hover,
html[data-theme="dunkel"] .reiter button[aria-selected="true"]{background:var(--zart)}
html[data-theme="dunkel"] :is(input, textarea, select){background:var(--flaeche-2); border-color:var(--linie); color:var(--text)}
html[data-theme="dunkel"] :is(input, textarea)::placeholder{color:#8a8db0}
html[data-theme="dunkel"] :is(footer, .schloss, .ergebnis){border-color:var(--linie)}
html[data-theme="dunkel"] .wuerfel rect{fill:var(--flaeche-2)}
html[data-theme="dunkel"] .avatar{box-shadow:0 0 0 3px var(--flaeche), 0 0 0 5px var(--gelb)}
html[data-theme="dunkel"] .hinweis-aus{background:var(--gelb-hell)}
html[data-theme="dunkel"] .ampel{box-shadow:0 10px 30px rgba(0,0,0,.35)}
html[data-theme="dunkel"] .ampel.grau{background:#24263f; border-color:#6b708f}
html[data-theme="dunkel"] .ampel.grau h2{color:#c3c6dc}
html[data-theme="dunkel"] pre{background:#0b0c1f; border:1px solid var(--linie)}
/* dunkle Schrift auf Gelb behalten */
html[data-theme="dunkel"] :is(.beta, .tag.gelb, .zeichen.gelb, .ampel.gelb .punkt){color:#26285b}
/* Hauptknopf: kräftiger Verlauf statt der aufgehellten Akzentfarben */
:where(html[data-theme="dunkel"]) button{background:linear-gradient(100deg,#a8286f 10%,#7b3a9a 90%)}
:where(html[data-theme="dunkel"]) button:hover{background:#8c1f5c}
html[data-theme="dunkel"] :is(button.zweit, .zweit, .kopieren, .aktionen .zweit):hover{background:var(--zart)}

/* Schalter */
button.dm-schalter{position:fixed; top:.9rem; right:.9rem; z-index:1000; display:inline-flex; align-items:center; gap:.4rem;
  font:inherit; font-size:.85rem; font-weight:700; line-height:1; padding:.5rem .85rem; width:auto; margin:0;
  border-radius:99px; border:1px solid #dbe3ef; background:rgba(255,255,255,.9); color:#26285b;
  box-shadow:0 2px 10px rgba(38,40,91,.12); cursor:pointer; backdrop-filter:blur(6px)}
button.dm-schalter:hover{background:#F4ECF7; border-color:#69227b}
button.dm-schalter:focus-visible{outline:3px solid #f5a524; outline-offset:2px}
button.dm-schalter .dm-symbol{font-size:1rem}
html[data-theme="dunkel"] button.dm-schalter{background:rgba(29,31,69,.9); border-color:var(--linie); color:var(--nacht); box-shadow:0 2px 12px rgba(0,0,0,.4)}
html[data-theme="dunkel"] button.dm-schalter:hover{background:var(--zart); border-color:var(--violett)}
@media print{button.dm-schalter{display:none}}
html[data-theme="dunkel"] .zustand.an{color:var(--gruen)}
html[data-theme="dunkel"] .zustand.an::before{background:var(--gruen)}
html[data-theme="dunkel"] .zustand.aus{color:var(--rot)}
html[data-theme="dunkel"] .zustand.aus::before{background:var(--rot)}
html[data-theme="dunkel"] .zustand::before{background:#5a5f92}