/* Tag und Nacht (Test, 21.10.2026). Jonah: „einen Toggle-Button … schlau platziert, der zwischen Dark- und White-Mode wechselt … einfach
   mal zum Testen.“ Die Seite ist dunkel gebaut; skripte/bauen.py legt beim Bauen eine dünne Schicht darüber: jede Sand- und Nachtfarbe in CSS
   und auf den Leinwänden läuft über diese drei Kanäle (Vordergrund, Grund, Tafelgrund). Hell heißt: Text in sand-900, Grund sand-100,
   Tafeln sand-200, Sonne bleibt Fläche und Zustand, als Schrift sun-700 (DESIGN, „Hell ist die Basis“, 05.08.2026). */
:root { --vg-k: 253 244 236; --hg-k: 12 9 8; --hg2-k: 16 13 11; }
html.hell { --vg-k: 39 32 27; --hg-k: 253 244 236; --hg2-k: 245 235 226; --nacht-800: #f5ebe2; --fokus: var(--sonne-700); color-scheme: light; }
html.hell .titel, html.hell .ankunft-titel { font-weight: 300; }   /* auf hellem Grund die leichtere Stufe (auf dunklem 320) */
html.hell .logo img { filter: brightness(.16); }   /* die Logos liegen in Sand vor, auf hellem Grund in Tinte */

/* Umschalter in der Kopfleiste: eine Sonne über der Wasserlinie. Nacht: sie ist untergegangen, nur ein Rand schaut heraus;
   Tag: sie steht über der Linie. Die Wasserlinie ist dieselbe wie die Kante der Kopfleiste aus dem Lader. */
.thema-knopf { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; cursor: pointer;
               border: 1px solid var(--linie-stark); border-radius: var(--radius); background: transparent; color: var(--sand);
               transition: border-color .3s var(--aus), background-color .3s var(--aus); }
.thema-knopf:hover { border-color: rgb(var(--vg-k) / .6); background: rgb(var(--vg-k) / .06); }
.thema-knopf:active { scale: .96; }
.thema-knopf svg { width: 24px; height: 24px; overflow: visible; }
.thema-knopf .linie, .thema-zeile .linie { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.thema-knopf .spiegel, .thema-zeile .spiegel { fill: none; stroke: var(--sonne); stroke-width: 1.4; stroke-linecap: round; opacity: .9; transition: opacity .3s var(--aus); }
.thema-knopf .sonne, .thema-zeile .sonne { fill: var(--sonne); translate: 0 5.5px; transition: translate .7s cubic-bezier(.34, 1.3, .5, 1); }
html.hell :is(.thema-knopf, .thema-zeile) .sonne { translate: 0 -1.5px; }
html.hell :is(.thema-knopf, .thema-zeile) .spiegel { opacity: 0; }
@media (max-width: 860px) { .thema-knopf { width: 40px; height: 40px; } }

/* Wechsel: der neue Stand öffnet sich als Kreis aus dem Knopf, wie die Intro aus dem Ziel (View Transitions; ohne sie sofort) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .thema-knopf .sonne { transition: none; } }

/* Tag und Nacht als Zeile im Handy-Menü (26.10.2026): gleicher Schalter, gleiches Zeichen, sichtbar nur bei offenem Menü (basis.css) */
.thema-zeile { display: none; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; border: 0; background: none;
               color: inherit; font: 500 20px/1.2 var(--schrift); text-align: left; cursor: pointer; }
.thema-zeile svg { width: 26px; height: 26px; flex: none; overflow: visible; }
.thema-zeile:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; }