/*
 * Dunkelmodus.
 *
 * Voreinstellung ist das, was das Gerät sagt (prefers-color-scheme). Wer will,
 * stellt mit dem Knopf oben rechts um: Automatisch → Hell → Dunkel → Automatisch.
 * Die Wahl liegt im Browser des Besuchers und wird nirgends übertragen.
 *
 * Die Farben sind nicht einfach invertiert. Reines Weiß auf reinem Schwarz
 * flimmert; Grün auf Dunkel wirkt matt. Deshalb ein leicht grünstichiges
 * Anthrazit als Grund und ein aufgehelltes Grün als Akzent — beides über
 * 7:1 Kontrast, damit Zahlen scharf bleiben.
 */

/* light dark heißt: das Betriebssystem entscheidet. Stand hier nur „light“,
   blieben Auswahlfelder, Bildlaufleisten und Datumsfelder weiß — mitten in
   einer dunklen Seite. */
:root{ color-scheme:light dark }
html[data-thema="dunkel"]{ color-scheme:dark }
html[data-thema="hell"]{ color-scheme:light }

/* ------------------------------------------------ die dunkle Farbtafel */
html[data-thema="dunkel"] .page,
html[data-thema="dunkel"] .kf-start,
html[data-thema="dunkel"] .kf-fenster,
html[data-thema="dunkel"] .kf-menu,
html[data-thema="dunkel"] .kf-konto-ecke,
html[data-thema="dunkel"] body,
html[data-thema="dunkel"]{
  --paper:#12191b;      --kf-paper:#12191b;
  --ink:#eef3f2;        --kf-ink:#eef3f2;
  --ink-2:#b3c2c0;      --kf-ink-2:#b3c2c0;
  --ink-3:#8b9c99;      --kf-ink-3:#8b9c99;
  --rule:#2a3639;       --kf-rule:#2a3639;
  --rule-2:#1d2729;
  --wash:#1a2325;       --kf-wash:#1a2325;
  --accent:#5fc3ae;     --kf-accent:#5fc3ae;
  --accent-2:#7fd3c0;   --kf-accent-2:#7fd3c0;
  --accent-3:#4aa593;
  --accent-4:#33716a;   --kf-accent-4:#33716a;
  --accent-soft:#1b2f2c;
  --pos:#4fc98a;        --kf-pos:#4fc98a;
  --neg:#ff7a6b;        --kf-neg:#ff7a6b;
  --kat-1:#5c7f78; --kat-2:#527069; --kat-3:#48615c;
  --kat-4:#3e5450; --kat-5:#354644; --kat-6:#2c3a38;
}

@media (prefers-color-scheme:dark){
  html:not([data-thema="hell"]) .page,
  html:not([data-thema="hell"]) .kf-start,
  html:not([data-thema="hell"]) .kf-fenster,
  html:not([data-thema="hell"]) .kf-menu,
  html:not([data-thema="hell"]) .kf-konto-ecke,
  html:not([data-thema="hell"]) body,
  html:not([data-thema="hell"]){
    --paper:#12191b;      --kf-paper:#12191b;
    --ink:#eef3f2;        --kf-ink:#eef3f2;
    --ink-2:#b3c2c0;      --kf-ink-2:#b3c2c0;
    --ink-3:#8b9c99;      --kf-ink-3:#8b9c99;
    --rule:#2a3639;       --kf-rule:#2a3639;
    --rule-2:#1d2729;
    --wash:#1a2325;       --kf-wash:#1a2325;
    --accent:#5fc3ae;     --kf-accent:#5fc3ae;
    --accent-2:#7fd3c0;   --kf-accent-2:#7fd3c0;
    --accent-3:#4aa593;
    --accent-4:#33716a;   --kf-accent-4:#33716a;
    --accent-soft:#1b2f2c;
    --pos:#4fc98a;        --kf-pos:#4fc98a;
    --neg:#ff7a6b;        --kf-neg:#ff7a6b;
    --kat-1:#5c7f78; --kat-2:#527069; --kat-3:#48615c;
    --kat-4:#3e5450; --kat-5:#354644; --kat-6:#2c3a38;
  }
  html:not([data-thema="hell"]) body{ background:#12191b; color:#eef3f2 }
}

html[data-thema="dunkel"] body{ background:#12191b; color:#eef3f2 }

/* Der Wechsel selbst darf man sehen — aber nur kurz. */
body, .page, .kf-start, .kf-fenster, .card, .row, input, .edit{
  transition:background-color .28s ease, color .28s ease, border-color .28s ease;
}
@media (prefers-reduced-motion:reduce){
  body, .page, .kf-start, .kf-fenster, .card, .row, input, .edit{ transition:none }
}

/* ------------------------------------------------------- der Umschalter */
/*
 * Drei Felder nebeneinander, immer alle sichtbar: „wie dein Gerät“, „hell“,
 * „dunkel“. Ein Schieber gleitet unter das gewählte Feld — man sieht also
 * jederzeit, was eingestellt ist, ohne erst raten oder klicken zu müssen.
 */
.kf-thema{
  position:relative; display:inline-flex; align-items:center; gap:0;
  padding:3px; border-radius:999px;
  border:1px solid var(--kf-rule, var(--rule, #dbe1e0));
  background:var(--kf-wash, var(--wash, #f2f5f4));
}
.kf-thema > button{
  position:relative; z-index:1; width:30px; height:26px; padding:0; border:0;
  background:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  color:var(--kf-ink-3, var(--ink-3, #677376));
  border-radius:999px; transition:color .2s ease, transform .2s ease;
}
.kf-thema > button:hover{ color:var(--kf-ink, var(--ink, #101619)) }
.kf-thema > button[aria-pressed="true"]{ color:var(--kf-accent, var(--accent, #0f5b52)) }
.kf-thema > button:active{ transform:scale(.9) }
.kf-thema svg{ width:16px; height:16px }

/* Der Schieber. Seine Stelle setzt das Skript über --i (0, 1 oder 2). */
.kf-schieber{
  position:absolute; top:3px; left:3px; width:30px; height:26px; border-radius:999px;
  background:var(--kf-paper, var(--paper, #fff));
  box-shadow:0 1px 3px rgba(16,22,25,.16);
  transform:translateX(calc(var(--i, 0) * 30px));
  transition:transform .34s cubic-bezier(.34,1.4,.44,1);
}
html[data-thema="dunkel"] .kf-schieber{ box-shadow:0 1px 3px rgba(0,0,0,.6) }

/* Beim Wechsel dreht sich das gewählte Zeichen einmal kurz an. */
.kf-thema > button[aria-pressed="true"] svg{ animation:kf-dreh .42s cubic-bezier(.34,1.4,.44,1) }
@keyframes kf-dreh{ from{ transform:rotate(-40deg) scale(.7) } to{ transform:rotate(0) scale(1) } }

@media (prefers-reduced-motion:reduce){
  .kf-schieber{ transition:none }
  .kf-thema > button[aria-pressed="true"] svg{ animation:none }
}

/* ---------------------------- was im Dunkeln sonst nicht mehr stimmt ---- */
/* Der weiße Grund hinter dem Titelbereich und die Glaskarte. */
html[data-thema="dunkel"] .kf-held::before{ opacity:.5 }
html[data-thema="dunkel"] .kf-schau svg{ background:rgba(255,255,255,.03) }
html[data-thema="dunkel"] .kf-band-dunkel{ background:#0c1214 }
html[data-thema="dunkel"] .kf-fenster{ box-shadow:0 26px 54px -28px rgba(0,0,0,.8) }
html[data-thema="dunkel"] input,
html[data-thema="dunkel"] textarea,
html[data-thema="dunkel"] select{ background:var(--wash); color:var(--ink); border-color:var(--rule) }
html[data-thema="dunkel"] .ro{ background:var(--wash) }

/* Knöpfe im Dunkeln: das helle Mint leuchtet auf schwarzem Grund wie eine
   Lampe. Ein Ton dunkler mit weißer Schrift ist ruhiger und trotzdem klar. */
html[data-thema="dunkel"] .kf-cta,
html[data-thema="dunkel"] .kf-form > button,
html[data-thema="dunkel"] .kf-chat-form button,
html[data-thema="dunkel"] .edit .fertig,
html[data-thema="dunkel"] .years button[aria-pressed="true"],
html[data-thema="dunkel"] button.primary{
  background:#2e8875; color:#f2fbf8; border-color:#2e8875;
}
html[data-thema="dunkel"] .kf-cta:hover,
html[data-thema="dunkel"] .kf-form > button:hover,
html[data-thema="dunkel"] .kf-chat-form button:hover,
html[data-thema="dunkel"] .edit .fertig:hover{ background:#379c86; filter:none }
html[data-thema="dunkel"] .kf-sprech--du{ background:#2e8875; color:#f2fbf8 }

/* Die Glaskarte auf der Startseite: im Dunkeln kein Milchglas, sondern Rauch. */
html[data-thema="dunkel"] .kf-schau svg{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06) inset;
}
html[data-thema="dunkel"] .kf-fenster,
html[data-thema="dunkel"] .kf-menu{ background:var(--kf-paper) }
html[data-thema="dunkel"] .kf-menu a:hover,
html[data-thema="dunkel"] .kf-menu a:focus{ background:var(--kf-wash); color:var(--kf-accent) }
html[data-thema="dunkel"] .kf-band--gut{ background:#12312299; color:#8fe0b4; border-color:#2c5d43 }
html[data-thema="dunkel"] .kf-band--warn{ background:#3a1a1699; color:#ffb3a8; border-color:#6b302a }
html[data-thema="dunkel"] .kf-schau-wert b{ color:var(--kf-ink) }

@media (prefers-color-scheme:dark){
/* Knöpfe im Dunkeln: das helle Mint leuchtet auf schwarzem Grund wie eine
   Lampe. Ein Ton dunkler mit weißer Schrift ist ruhiger und trotzdem klar. */
html:not([data-thema="hell"]) .kf-cta,
html:not([data-thema="hell"]) .kf-form > button,
html:not([data-thema="hell"]) .kf-chat-form button,
html:not([data-thema="hell"]) .edit .fertig,
html:not([data-thema="hell"]) .years button[aria-pressed="true"],
html:not([data-thema="hell"]) button.primary{
  background:#2e8875; color:#f2fbf8; border-color:#2e8875;
}
html:not([data-thema="hell"]) .kf-cta:hover,
html:not([data-thema="hell"]) .kf-form > button:hover,
html:not([data-thema="hell"]) .kf-chat-form button:hover,
html:not([data-thema="hell"]) .edit .fertig:hover{ background:#379c86; filter:none }
html:not([data-thema="hell"]) .kf-sprech--du{ background:#2e8875; color:#f2fbf8 }
/* Die Glaskarte auf der Startseite: im Dunkeln kein Milchglas, sondern Rauch. */
html:not([data-thema="hell"]) .kf-schau svg{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06) inset;
}
html:not([data-thema="hell"]) .kf-fenster,
html:not([data-thema="hell"]) .kf-menu{ background:var(--kf-paper) }
html:not([data-thema="hell"]) .kf-menu a:hover,
html:not([data-thema="hell"]) .kf-menu a:focus{ background:var(--kf-wash); color:var(--kf-accent) }
html:not([data-thema="hell"]) .kf-band--gut{ background:#12312299; color:#8fe0b4; border-color:#2c5d43 }
html:not([data-thema="hell"]) .kf-band--warn{ background:#3a1a1699; color:#ffb3a8; border-color:#6b302a }
html:not([data-thema="hell"]) .kf-schau-wert b{ color:var(--kf-ink) }
}