/* ===========================================================================
   Get A Snack — umschaltbarer Hell-/Dunkelmodus
   ===========================================================================
   Vorher folgte die Seite ausschliesslich der Betriebssystemeinstellung
   (@media prefers-color-scheme). Das ist die richtige Voreinstellung, aber
   es gibt keinen Weg, sie zu uebergehen — und Leute wollen das: nachts vor
   dem Automaten lieber dunkel, auch wenn das Telefon auf hell steht.

   DIESE DATEI IST AUSSCHLIESSLICH ERGAENZEND. Sie aendert keine
   bestehende Regel und wird hinten angehaengt. Der Grund ist nicht
   Bequemlichkeit: die sechs Seiten auf dem VPS wurden nach meiner letzten
   Auslieferung veraendert (Fussbereich, Rechtsangaben, Markenbalken).
   Wuerde ich site.css oder die Seiten neu schreiben, ueberschriebe ich
   fremde, richtige Arbeit. Ergaenzen statt ersetzen.

   WIE DIE UEBERSTEUERUNG FUNKTIONIERT, ohne Reihenfolgeprobleme:
   Ein Attributselektor :root[data-thema="hell"] hat die Spezifitaet 0,2,0;
   ein :root in einer Media Query hat 0,1,0 — Media Queries erhoehen die
   Spezifitaet nicht. Deshalb gewinnt diese Datei unabhaengig davon, ob sie
   vor oder nach den bestehenden Regeln geladen wird, und auch gegen die
   Regeln, die auf der Kartenseite INLINE im <style>-Block stehen.
   Das ist der Grund, warum kein Umbau der bestehenden Bloecke noetig ist.

   Beide Vorlagen sind vollstaendig aufgefuehrt, nicht nur die Unterschiede.
   Eine halbe Palette ist die Art Fehler, die erst bei einer Unterseite
   auffaellt, die man beim Pruefen nicht geoeffnet hat.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   DUNKEL, ausdruecklich gewaehlt — auch wenn das System hell sagt
   --------------------------------------------------------------------------- */
:root[data-thema="dunkel"] {
  /* Inhaltsseiten (site.css) */
  --tinte:  #f7f0ea;
  --grau:   #a89e96;
  --creme:  #0e2b32;
  --papier: #16383f;
  --linie:  rgba(247,240,234,.16);
  --schatten: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);

  /* Kartenseite (inline im <style> von index.html) */
  --bg:     #0e2b32;
  --fg:     #f7f0ea;
  --panel:  #16383f;
  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
}
:where(:root[data-thema="dunkel"]) a { color: var(--gelb); }
:root[data-thema="dunkel"] .z-gut    { background:#14301c; color:#69db7c; }
:root[data-thema="dunkel"] .z-wenig  { background:#3a2410; color:#ffa94d; }
:root[data-thema="dunkel"] .z-leer   { background:#3b1518; color:#ff8787; }
:root[data-thema="dunkel"] .z-unklar { background:#2b2c31; color:#adb5bd; }
:root[data-thema="dunkel"] #danke    { background:#14301c; color:#69db7c; }

/* ---------------------------------------------------------------------------
   HELL, ausdruecklich gewaehlt — auch wenn das System dunkel sagt.
   Diese Werte muessen die Media Query aus site.css und aus dem
   Inline-Block der Kartenseite schlagen, deshalb stehen sie hier
   vollstaendig und nicht als Rueckfall auf den Vorgabewert.
   --------------------------------------------------------------------------- */
:root[data-thema="hell"] {
  --tinte:  #231a15;
  --grau:   #6b615b;
  --creme:  #fffaf5;
  --papier: #ffffff;
  --linie:  rgba(35,26,21,.12);
  --schatten: 0 1px 2px rgba(43,33,24,.06), 0 8px 24px rgba(43,33,24,.08);

  --bg:     #fffaf5;
  --fg:     #231a15;
  --panel:  #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.08);
}
/* ---------------------------------------------------------------------------
   Die Linkfarbe, und hier war der Fehler.
   ---------------------------------------------------------------------------
   Erste Fassung:
       :root[data-thema="hell"] a { color: var(--orange-d); }
   Spezifitaet 0,2,1 — und damit schlug sie JEDES Bauteil, das eine eigene
   Textfarbe hat:

       .cta            (0,1,0)  -> Dunkelrot auf Rot, Kontrast 1,23:1
       .cta.zweit      (0,2,0)  -> Linkfarbe statt Tinte
       .marke          (0,1,0)  -> Wortmarke in Linkfarbe
       .kopf nav a     (0,1,2)  -> Kopflinks in Linkfarbe
       .fuss-links a   (0,1,1)  -> Fusslinks in Linkfarbe

   Der schlimmste Fall war der Haupt-Knopf: 1,23:1 ist Dunkelrot auf Rot,
   praktisch unsichtbar. Aufgefallen ist es niemandem, weil die Regeln nur
   greifen, wenn data-thema gesetzt ist — im Auslieferungszustand steht
   "auto" und das Attribut fehlt. Der Fehler entsteht im Moment des ERSTEN
   Tippens. Gefunden von Aurelius, live.

   Und meine Kontrolle im Installer hat Gold auf Teal geprueft (6,83:1).
   Vorkommen tut Gold auf Rot (2,72:1). Ich habe das Paar geprueft, das ich
   im Kopf hatte, nicht das, das entsteht.

   DIE LOESUNG ist nicht eine Kette von :not(). Die waere unvollstaendig,
   sobald ein neues Bauteil dazukommt — derselbe Fehler nochmal, nur
   spaeter.
   :where() traegt NICHTS zur Spezifitaet bei, egal was darin steht. Damit
   hat die Regel unten genau 0,0,1 — identisch zur Grundregel "a { }" in
   site.css. Sie gewinnt ueber die Reihenfolge (theme.css wird nach
   site.css geladen) und verliert gegen jedes Bauteil mit eigener Farbe.
   Also genau das Verhalten der Regel, die sie uebersteuern soll.
   --------------------------------------------------------------------------- */
:where(:root[data-thema="hell"]) a { color: var(--orange-d); }
:root[data-thema="hell"] .z-gut    { background:#ebfbee; color:#2b8a3e; }
:root[data-thema="hell"] .z-wenig  { background:#fff4e6; color:#d9480f; }
:root[data-thema="hell"] .z-leer   { background:#fff5f5; color:#c92a2a; }
:root[data-thema="hell"] .z-unklar { background:#f1f3f5; color:#495057; }
:root[data-thema="hell"] #danke    { background:#ebfbee; color:#2b8a3e; }

/* ---------------------------------------------------------------------------
   Der Umschalter. theme.js setzt ihn selbst ein, damit die sechs Seiten
   kein eigenes Markup brauchen — siehe Kopf.
   --------------------------------------------------------------------------- */
.thema-knopf {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--fg, var(--tinte)); border-radius: 10px;
  display: inline-grid; place-items: center; line-height: 1;
}
.thema-knopf:hover { background: rgba(134,142,150,.18); }
.thema-knopf svg { width: 21px; height: 21px; display: block; }
/* Im Markenbalken der Karte ist es eng — dort etwas kleiner. */
#legende .thema-knopf { min-width: 30px; min-height: 30px; padding: 0; }
#legende .thema-knopf svg { width: 17px; height: 17px; }
/* Nur das Symbol des aktiven Zustands zeigen. */
.thema-knopf [data-zeig] { display: none; }
:root[data-thema="hell"]   .thema-knopf [data-zeig="hell"]   { display: block; }
:root[data-thema="dunkel"] .thema-knopf [data-zeig="dunkel"] { display: block; }
:root:not([data-thema="hell"]):not([data-thema="dunkel"])
  .thema-knopf [data-zeig="auto"] { display: block; }

/* ---------------------------------------------------------------------------
   Nebenwirkung des Umschalters: auf 375 px brach "Karte oeffnen" im Kopf
   zweizeilig um, weil der Knopf daneben Platz nimmt. Der Kopf war vorher
   einzeilig. Kein Ueberlauf, aber unschoen — und die Ursache steckt in
   dieser Datei, also gehoert die Behebung auch hierher.
   --------------------------------------------------------------------------- */
.kopf nav a { white-space: nowrap; }

/* ===========================================================================
   Anhang 2 (17.09.2026) — zwei Befunde in einem Nachtrag
   ===========================================================================
   A) KOPFZEILE UNTER 380 px
   Befund von Aurelius: das "white-space: nowrap" aus Anhang 1 hat den
   Zweizeilenumbruch beseitigt, aber den Knopf am Umbrechen gehindert —
   also wuchs der Kopf seitwaerts aus dem Bildschirm heraus statt in die
   Hoehe. Gemessen: 375 px gerade noch (1,6 px Rest), 360 px 13 px Ueberlauf,
   320 px 53 px. 360 px ist keine Randgroesse, das sind sehr viele
   Android-Geraete und das iPhone 12/13 mini.

   Entscheidung von Thomas: der Knopf schrumpft und bleibt einzeilig.
   Unter 344 px reicht auch das nicht, dort entfaellt der Schriftzug und
   das Logo traegt die Marke allein.

   Die Kuerzung der Wortmarke (min-width/ellipsis) ist die Bremse, nicht
   die Absicht: sollten meine Schriftmasse irgendwo abweichen, kuerzt der
   Schriftzug, statt die Seite seitwaerts scrollen zu lassen.
   --------------------------------------------------------------------------- */
@media (max-width: 379px) {
  .kopf-inner { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .marke { gap: 7px; min-width: 0; }
  .wortmarke { font-size: 16px; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
  .kopf nav { gap: 2px; flex: 0 0 auto; }
  .kopf nav a.knopf { font-size: 14px; padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 343px) {
  .wortmarke { display: none; }
}

/* ---------------------------------------------------------------------------
   B) SONNE UND MOND NACH DEM, WAS GERADE WIRKLICH AN IST
   Wunsch von Thomas: Sonne und Mond, schlicht — schwarz, weiss, grau.
   Also KEINE Farbe. Die Symbole behalten currentColor, das ist im
   Hellmodus die Tinte (#231a15, 16,46:1 auf Creme) und im Dunkelmodus
   das Creme (#f7f0ea auf #0e2b32, 11,52:1). Beides weit ueber den 3:1,
   die WCAG 1.4.11 fuer Bedienelemente verlangt.

   Geaendert wird nur die AUSWAHL des Symbols:
   Im Zustand "automatisch" zeigte der Knopf bisher einen Halbkreis. Jetzt
   zeigt er Sonne oder Mond — je nachdem, was das Betriebssystem gerade
   durchsetzt. Damit "automatisch" trotzdem unterscheidbar bleibt, sitzt
   dort ein kleiner grauer Punkt am Symbol; welcher der drei Zustaende
   aktiv ist, sagt ausserdem weiterhin der Titel des Knopfes (aria-label).

   theme.js bleibt unveraendert, die sechs Seiten bleiben unveraendert.
   --------------------------------------------------------------------------- */

/* Der Halbkreis entfaellt. Gleiche Spezifitaet wie die Regel weiter oben in
   dieser Datei, aber spaeter — deshalb gewinnt sie ohne !important. */
:root:not([data-thema="hell"]):not([data-thema="dunkel"])
  .thema-knopf [data-zeig="auto"] { display: none; }

/* Automatisch: das Symbol dessen, was gerade wirklich an ist. */
@media (prefers-color-scheme: light) {
  :root:not([data-thema="hell"]):not([data-thema="dunkel"])
    .thema-knopf [data-zeig="hell"] { display: block; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]):not([data-thema="dunkel"])
    .thema-knopf [data-zeig="dunkel"] { display: block; }
}

/* Kennzeichen fuer "automatisch": ein kleiner grauer Punkt am Symbol.
   Ohne ihn waere "automatisch" von der ausdruecklichen Wahl nicht zu
   unterscheiden, weil die Symbolwahl jetzt dem wirksamen Zustand folgt. */
.thema-knopf { position: relative; }
:root:not([data-thema="hell"]):not([data-thema="dunkel"]) .thema-knopf::after {
  content: ""; position: absolute; right: 7px; bottom: 7px;
  width: 4px; height: 4px; border-radius: 2px;
  background: currentColor; opacity: .5;
  pointer-events: none;
}
/* Im Markenbalken der Karte ist der Knopf 30 px klein — Punkt dichter an die
   Ecke. ":root" kann nicht Nachfahre von #legende sein, deshalb steht
   #legende hinten. */
:root:not([data-thema="hell"]):not([data-thema="dunkel"])
  #legende .thema-knopf::after { right: 2px; bottom: 2px; }