/* Hell und Dunkel fuer alle Seiten.
 *
 * Die Seiten benennen ihre Farben bereits ueber Merkmale (--paper, --ink,
 * --pine ...). Umgeschaltet wird deshalb nur der Satz Werte, nicht die
 * Bausteine. Drei Zustaende sind zu bedienen:
 *   1. keine Wahl getroffen  -> was das Geraet vorgibt
 *   2. ausdruecklich hell    -> hell, auch auf einem dunklen Geraet
 *   3. ausdruecklich dunkel  -> dunkel, auch auf einem hellen Geraet
 * Deshalb steht der helle Satz auf blankem :root, und die beiden anderen
 * Faelle ueberschreiben ihn getrennt.
 */

/* --- Ergaenzungen zum hellen Satz -------------------------------------
   Werte, die bisher fest im Stylesheet standen. Als Merkmal benannt,
   damit der dunkle Satz sie mitnehmen kann. */
:root{
  --head:#F4EEE1;          /* Kopfleiste, etwas heller als das Papier */
  --field:#FCF9F1;         /* Eingabefelder */
  --paper-2:#E7DECC;
  --on-pine:#fff;          /* Schrift AUF gruenem Grund */
  --on-gold:#fff;          /* Schrift AUF goldenem Grund */
  --warn:#8A6A1F;
  --warn-soft:#F1E4C4;
  --zebra:rgba(231,222,204,.45);   /* jede zweite Tabellenzeile */
  --zeile-hover:rgba(31,92,61,.10);
  --schatten:rgba(42,38,32,.10);
  color-scheme:light;
}

/* --- Der dunkle Satz ---------------------------------------------------
   Kein neutrales Grau: der Grund behaelt einen warmen Stich, damit die
   Seite dieselbe bleibt und nicht wie ein fremdes Programm wirkt. Gruen
   wird aufgehellt, weil das dunkle Tannengruen auf schwarzem Grund nicht
   mehr lesbar ist - dafuer bekommt die Schrift AUF gruenem Grund einen
   dunklen Ton statt Weiss. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131110;--paper-2:#1B1815;--card:#1C1917;--field:#232019;
    --ink:#EDE6D8;--ink-soft:#A2978A;--hair:#332E29;
    --pine:#5CBB86;--pine-soft:#183527;--on-pine:#07180F;
    --gold:#D8AC55;--on-gold:#1B1305;
    --bad:#E37B63;--bad-soft:#3B221C;
    --clay:#D9765C;--clay-soft:#3B231C;
    --head:#191614;
    --warn:#E9CC84;--warn-soft:#3B3116;
    --zebra:rgba(255,255,255,.03);
    --zeile-hover:rgba(92,187,134,.10);
    --schatten:rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#131110;--paper-2:#1B1815;--card:#1C1917;--field:#232019;
  --ink:#EDE6D8;--ink-soft:#A2978A;--hair:#332E29;
  --pine:#5CBB86;--pine-soft:#183527;--on-pine:#07180F;
  --gold:#D8AC55;--on-gold:#1B1305;
  --bad:#E37B63;--bad-soft:#3B221C;
  --clay:#D9765C;--clay-soft:#3B231C;
  --head:#191614;
  --warn:#E9CC84;--warn-soft:#3B3116;
  --zebra:rgba(255,255,255,.03);
  --zeile-hover:rgba(92,187,134,.10);
  --schatten:rgba(0,0,0,.45);
  color-scheme:dark;
}

/* Der Knopf sieht aus wie der Sprachknopf daneben. */
.themebtn{border:1.5px solid var(--hair);background:var(--card);color:var(--ink-soft);
  font:inherit;font-weight:700;font-size:14px;line-height:1;padding:0;
  width:40px;height:40px;min-height:40px;border-radius:999px;cursor:pointer;
  flex:0 0 auto;display:inline-grid;place-items:center;}
.themebtn:hover{border-color:var(--pine);color:var(--pine);}
/* Auf der Anmeldekarte sitzt er neben dem Sprachumschalter, der dort
   absolut positioniert ist. */
.langsw .themebtn{width:30px;height:26px;min-height:0;border-radius:7px;
  font-size:12px;margin-left:6px;}