/* ==========================================================================
   assets/css/tokens.css — EINZIGE Quelle der Wahrheit für Farbe, Typo, Maß.
   Wird als ERSTES Stylesheet auf allen Seiten geladen (index.php Dashboard,
   index.php?view=tablet, mobile.php, archiv.php, widget.php, admin.php).
   Danach base.css (gemeinsame Komponenten), danach genau EIN Seiten-Stylesheet
   (style.css | tablet.css | mobile.css | archiv.css). Diese Datei enthält
   ausschliesslich Custom Properties — keine einzige Regel mit Selektor-Wirkung
   ausser :root/[data-*].

   Orthogonale Achsen (alle als Attribut, nie als Klasse):
     <html data-theme="dark|light">        Nutzerwunsch (system/auto werden im
                                           <head>-Bootstrap zu dark|light aufgelöst)
     <html data-density="desktop|mobile|kiosk">
     <html data-dim="0|1|2|3">             Kiosk-Nachtstufen
     <html data-nightpal="blau|bernstein"> Kiosk-Nachtpalette
     <html data-contrast="normal|hoch">    Sonnenlicht-Modus (Handy)
     <body data-wx="stable|rain|thunder|improving|worsening|changing">
     <body data-alarm="none|info|warn|danger">
     <body data-scene="now|today|outlook|night">   nur Kiosk
     [data-stale="0|1|2"] auf .app/.tablet/.m-app  Datenfrische-Entwertung

   Ebenen: 1 Primitive (nie direkt in Komponenten) → 2 Semantik (das, was
   Komponenten benutzen) → 3 Dichte. Kein rohes rgba()/#hex in Ebene 2.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- 1. PRIMITIVE — Flächen (Blau-Graustufen) ------------------- */
  --p-n-950:#080c14; --p-n-900:#0d1420; --p-n-850:#121a28; --p-n-800:#17202f;
  --p-n-750:#1e293c; --p-n-700:#23304a; --p-n-600:#37476a; --p-n-500:#4f6188;
  --p-n-300:#8494ac; --p-n-200:#a9b8ce; --p-n-100:#e8eef8; --p-n-000:#ffffff;
  /* Hell-Seite derselben Achse */
  --p-l-050:#e6ecf4; --p-l-075:#eef3f9; --p-l-100:#f2f6fb; --p-l-150:#e6edf7;
  --p-l-200:#d3dce9; --p-l-300:#b3c1d6; --p-l-600:#5b6c86; --p-l-700:#3b4c66;
  --p-l-900:#101c2e;

  /* ---------- 1. PRIMITIVE — Buntfarben --------------------------------- */
  --p-blue-400:#58a8ff;  --p-blue-500:#2389e2;  --p-blue-700:#0274c7;
  --p-green-400:#3ddc9a; --p-green-500:#17a478; --p-green-700:#067f5c;
  --p-amber-400:#f7b73c; --p-amber-500:#b98c06; --p-amber-700:#a1790c;
  --p-red-400:#ff7b7b;   --p-red-500:#d05040;   --p-red-700:#b63325;
  --p-cyan-400:#6cc9ff;  --p-cyan-500:#0aa0d2;
  --p-orange-400:#ff9a68;--p-orange-500:#e86545;
  --p-violet-500:#8851d1;--p-violet-700:#702abc;
  --p-teal-500:#00a0a1;
  --p-ink-on-color:#05121f;

  /* ---------- 2. SEMANTIK — Flächen & Linien ---------------------------- */
  --bg:          var(--p-n-950);        /* Seitengrund                      */
  --bg-elev:     var(--p-n-900);        /* Chart-/Kartengrund für Validierung*/
  --surface-1:   var(--p-n-850);        /* Karte (DECKEND – kein Glas)      */
  --surface-2:   var(--p-n-800);        /* Kachel in der Karte              */
  --surface-3:   var(--p-n-750);        /* Hover / aktives Segment          */
  --surface-glass: rgb(18 26 40 / .72); /* NUR topbar + m-tabs + Sheets     */
  --line:        var(--p-n-700);
  --line-strong: var(--p-n-600);
  --bg-grad: radial-gradient(1200px 800px at 78% -10%,
             #17253d 0%, var(--bg-elev) 55%, var(--bg) 100%);

  /* ---------- 2. SEMANTIK — Text ---------------------------------------- */
  --txt:   var(--p-n-100);              /* 15,4:1 auf --surface-1           */
  --txt-2: var(--p-n-200);              /*  7,1:1                           */
  --txt-3: var(--p-n-300);              /*  4,8:1 — Minimum für 11–12 px    */

  /* ---------- 2. SEMANTIK — Status (mit lesbarem Vordergrund DARAUF) ---- */
  --acc:    var(--p-blue-400); --acc-fg: var(--p-ink-on-color); --acc-soft:#142c48;
  --ok:     var(--p-green-400);--ok-fg:#042015;                 --ok-soft:#0f3328;
  --warn:   var(--p-amber-400);--warn-fg:#201502;               --warn-soft:#3a2b0b;
  --danger: var(--p-red-400);  --danger-fg:#220707;             --danger-soft:#3d1618;
  --cold:   var(--p-cyan-400);
  --hot:    var(--p-orange-400);

  /* ---------- 2. SEMANTIK — Datenfrische (tragende Rolle) --------------- */
  --age-fresh: var(--ok);      /* letzter erfolgreicher Fetch < 2× Intervall */
  --age-stale: var(--warn);    /* < connection.stale_minutes                 */
  --age-dead:  var(--danger);  /* darüber / kein Kontakt                     */
  --stale-opacity: 1;          /* wird von [data-stale] gesetzt              */
  --stale-gray: 0;

  /* ---------- 3. DIAGRAMM — Gerüst -------------------------------------- */
  --chart-grid:       #1c2740;   /* recessiv, nur waagrecht                 */
  --chart-axis:       var(--line);
  --chart-tick:       var(--txt-3);
  --chart-tooltip-bg: #101827;
  --chart-tooltip-fg: var(--txt);
  --chart-band:       rgb(35 137 226 / .16);  /* Min/Max-Fläche             */
  --chart-nodata:     repeating-linear-gradient(45deg,
                      transparent 0 5px, var(--line) 5px 6px); /* Lücken    */

  /* ---------- 3. DIAGRAMM — Messgrössen (semantisch verankert) ---------- */
  --c-temp:#e86545;  --c-temp-max:#d05040; --c-temp-min:#0aa0d2;
  --c-dew:#00a0a1;   --c-feels:#b76b1c;
  --c-pres:#2389e2;  --c-hum:#17a478;
  --c-wind:#31a0d0;  --c-gust:#8851d1;
  --c-rain:#1a83db;  --c-rain-cum:#8fc4f1;   /* gleiche Grösse, hellere Stufe */
  --c-uv:#a34ec6;    --c-solar:#b98c06;
  --c-avg:   var(--p-n-200);                 /* Gleitmittel, neutral         */
  --c-normal:var(--p-n-300);                 /* Klimanormal, gestrichelt     */

  /* ---------- 3. DIAGRAMM — Vergleichsserien (KATEGORIAL, feste Reihen-
     folge, nie zyklisch. Validiert: Lightness-Band, Chroma, CVD, Kontrast.
     Deutan/Protan-Abstand s3↔s2 = 13,3 → Direktbeschriftung Pflicht.) ----- */
  --c-s1:#2389e2; --c-s2:#a35303; --c-s3:#35ae5c;
  --c-s4:#8851d1; --c-s5:#b18c00; --c-s6:#ca4b85;

  /* ---------- 3. DIAGRAMM — DIVERGIERENDE Rampe (Temperaturanomalie)
     zwei Hues + NEUTRALER Mittelpunkt. Neutral ist themenabhängig (dunkel im
     Dunkelmodus), damit der Normaltag zurücktritt statt zu leuchten. ------ */
  --c-a-4:#2b6ab5; --c-a-3:#4a86cd; --c-a-2:#7aa8dd; --c-a-1:#adc9e9;
  --c-a-0:#38414f;                       /* Neutral = Abweichung ~0         */
  --c-a1:#e8b58a;  --c-a2:#dd8f5c;  --c-a3:#c9633a;  --c-a4:#ab3c26;

  /* ---------- 3. DIAGRAMM — SEQUENZIELLE Rampen (ein Hue, monoton) ------ */
  --c-r-0:#16202f; --c-r-1:#17395e; --c-r-2:#1c5590; --c-r-3:#2a7fc4; --c-r-4:#63aee8; /* Regen  */
  --c-sun-0:#1d2130; --c-sun-1:#4a3d12; --c-sun-2:#7a6412; --c-sun-3:#ab8b0d; --c-sun-4:#e0b81f; /* Sonne */

  /* ---------- 4. TYPOGRAFIE — 10 Stufen mit Rolle ----------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: var(--font);         /* überall font-variant-numeric: tabular-nums */
  --fs-1:  11px;    /* Achsenbeschriftung, Fusszeile, Rechtliches          */
  --fs-2:  12.5px;  /* Label, Kachelkopf, Versal-Kleintext                 */
  --fs-3:  14px;    /* Fliesstext, Listen                                  */
  --fs-4:  16px;    /* Lead, Warntext, Analysesätze                        */
  --fs-5:  20px;    /* kleiner Wert, Kachel-Subwert                        */
  --fs-6:  26px;    /* Kachelwert                                          */
  --fs-7:  34px;    /* Kernwert im Jetzt-Streifen                          */
  --fs-8:  46px;    /* Sekundär-Grosswert (Kiosk-Seitenspalte)             */
  --fs-9:  64px;    /* Uhr im Kiosk                                        */
  --fs-10: 88px;    /* Hero-Temperatur                                     */
  --lh-tight: 1.05; /* Grossziffern                                        */
  --lh:       1.45; /* Fliesstext                                          */
  --ls-caps:  .06em;/* uppercase-Label                                     */
  --ls-hero: -.02em;/* optische Korrektur an Displaygrössen                */

  /* ---------- 4. ZAHLENPRÄZISION (vom Renderer ausgelesen) -------------- */
  --nk-temp:1; --nk-wind:1; --nk-pres:1; --nk-rain:1; --nk-rate:1;
  --nk-hum:0;  --nk-uv:1;   --nk-solar:0;

  /* ---------- 5. RASTER & ABSTÄNDE (8-stufig) --------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;
  --gap:      var(--sp-4);
  --pad-card: var(--sp-5);
  --pad-x:    var(--sp-6);
  --app-max:  clamp(1180px, 94vw, 1840px);   /* stufenlos statt fix 1480px  */

  /* ---------- 6. FORM ---------------------------------------------------- */
  --r-xs:8px; --r-s:12px; --r-m:16px; --r-l:20px; --r-pill:999px;
  --e-1: 0 1px 0 rgb(255 255 255 / .04), 0 6px 18px rgb(0 0 0 / .30);
  --e-2: 0 1px 0 rgb(255 255 255 / .05), 0 18px 44px rgb(0 0 0 / .42);
  --stroke-ic: 1.75;   /* Strichstärke des Icon-Sprites, an Radien gekoppelt */

  /* ---------- 7. INTERAKTION -------------------------------------------- */
  --tap: 44px;
  /* Doppelter Ring: liest auf Karte, Kachel UND Akzentfläche gleichermassen */
  --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--acc);
  --dur-fast:120ms; --dur:240ms; --dur-slow:600ms; --dur-scene:600ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* ---------- 8. KIOSK-SPEZIFISCH (Grundwerte, s. data-density=kiosk) ---- */
  --scale: 1;            /* Leseabstand-Regler 0.85 | 1 | 1.2 | 1.4         */
  --burn-reserve: 0px;   /* Kantenreserve für den Pixel-Orbit               */
  --burn-x: 0px; --burn-y: 0px;
  --veil: 0;             /* Nachtschleier-Deckkraft 0…0.55                  */

  /* ---------- 9. RÜCKWÄRTSKOMPATIBLE ALIASE (NICHT ENTFERNEN) -----------
     Halten style.css / mobile.css / tablet.css am ersten Tag unverändert
     lauffähig; werden erst gelöscht, wenn keine Datei sie mehr nutzt.      */
  --bg-0: var(--bg);          --bg-1: var(--bg-elev);
  --card: var(--surface-1);   --card-solid: var(--surface-1);
  --card-2: var(--surface-2); --mut: var(--txt-3);
  --acc-2: var(--c-wind);
  --radius: var(--r-l);       --radius-s: var(--r-s);
  --shadow: var(--e-2);       --shadow-s: var(--e-1);
  --pad-top: var(--sp-6);     --nav-h: 64px;
  --t-bg-0: var(--bg);        --t-bg-1: var(--bg-elev);
  --t-txt: var(--txt);        --t-txt-2: var(--txt-2);
  --t-line: var(--line);      --t-card: var(--surface-2);
  --t-acc: var(--acc);        --t-ok: var(--ok);
  --t-warn: var(--warn);      --t-danger: var(--danger);
  --t-hot: var(--hot);        --t-cold: var(--cold);
}

/* ==========================================================================
   HELL — überschreibt nur Werte, nie Struktur.
   „system" und „auto" werden im <head>-Bootstrap zu dark|light aufgelöst;
   deshalb gibt es hier bewusst KEINEN zweiten @media-Block (kein Duplikat).
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          var(--p-l-050);
  --bg-elev:     var(--p-l-075);
  --surface-1:   var(--p-n-000);
  --surface-2:   var(--p-l-100);
  --surface-3:   var(--p-l-150);
  --surface-glass: rgb(255 255 255 / .78);
  --line:        var(--p-l-200);
  --line-strong: var(--p-l-300);
  --bg-grad: radial-gradient(1200px 800px at 78% -10%,
             #d3e2f6 0%, #eaf1f9 55%, var(--bg) 100%);

  --txt:   var(--p-l-900);
  --txt-2: var(--p-l-700);
  --txt-3: var(--p-l-600);                /* 4,9:1 auf Weiss                */

  --acc:    var(--p-blue-700); --acc-fg:#fff; --acc-soft:#e2edfc;
  --ok:     var(--p-green-700);--ok-fg:#fff;  --ok-soft:#e0f5ec;
  --warn:#a76c00;              --warn-fg:#fff;--warn-soft:#fdf0d6;
  --danger:#c62d2d;            --danger-fg:#fff;--danger-soft:#fbe4e4;
  --cold:#1f7fb8; --hot:#c65a24;

  --chart-grid:#e0e7f1; --chart-axis: var(--line); --chart-tick: var(--txt-2);
  --chart-tooltip-bg:#fff; --chart-tooltip-fg: var(--txt);
  --chart-band: rgb(2 116 199 / .14);

  --c-temp:#cb4a2a;  --c-temp-max:#b63325; --c-temp-min:#007ca5;
  --c-dew:#008283;   --c-feels:#a75c00;
  --c-pres:#006ebe;  --c-hum:#067f5c;
  --c-wind:#007fac;  --c-gust:#702abc;
  --c-rain:#066bb8;  --c-rain-cum:#6dabdf;
  --c-uv:#8627a8;    --c-solar:#a1790c;
  --c-avg: var(--p-l-700); --c-normal: var(--p-l-600);

  --c-s1:#0274c7; --c-s2:#d67523; --c-s3:#007834;
  --c-s4:#702abc; --c-s5:#a38207; --c-s6:#bf2f77;

  --c-a-4:#2f5fbc; --c-a-3:#5187d6; --c-a-2:#8ab6e6; --c-a-1:#c3daf1;
  --c-a-0:#cbd5e1;                          /* helles Neutral im Hellmodus  */
  --c-a1:#f5cfa4;  --c-a2:#eda36c;  --c-a3:#dd6f3f;  --c-a4:#b8371f;

  --c-r-0:#eef3f9; --c-r-1:#cfe0f2; --c-r-2:#96c0e4; --c-r-3:#4c8fcd; --c-r-4:#1a5f9e;
  --c-sun-0:#f6f3e8; --c-sun-1:#f0e2ac; --c-sun-2:#e0c45c; --c-sun-3:#b8961a; --c-sun-4:#8a6f00;

  --e-1: 0 1px 2px rgb(30 50 80 / .08), 0 6px 16px rgb(30 50 80 / .08);
  --e-2: 0 2px 4px rgb(30 50 80 / .10), 0 18px 40px rgb(30 50 80 / .12);
  --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--acc);
}

/* ==========================================================================
   DICHTESTUFEN — dieselben Rollen, andere Maße. Ersetzt drei Stylesheets.
   ========================================================================== */
:root[data-density="mobile"] {
  --tap: 48px;                       /* behebt 34–40-px-Ziele              */
  --gap: var(--sp-3); --pad-card: var(--sp-4); --pad-x: var(--sp-4);
  --r-l: var(--r-m);
  --fs-7: 28px; --fs-8: 40px; --fs-9: 56px;
  --fs-10: clamp(64px, 21vw, 92px);
  --nk-temp:1; --nk-wind:0; --nk-pres:0; --nk-rain:1;
  --app-max: 100%;
}

:root[data-density="kiosk"] {
  --tap: clamp(56px, 9vmin, 104px);
  /* vmin, NICHT vw: dieselbe Lesegrösse in Quer- und Hochformat.          */
  --fs-1:  calc(clamp(11px, 1.6vmin, 26px) * var(--scale));
  --fs-2:  calc(clamp(12px, 1.9vmin, 30px) * var(--scale));
  --fs-3:  calc(clamp(14px, 2.3vmin, 34px) * var(--scale));
  --fs-4:  calc(clamp(16px, 2.9vmin, 42px) * var(--scale));
  --fs-5:  calc(clamp(19px, 3.6vmin, 54px) * var(--scale));
  --fs-6:  calc(clamp(23px, 4.6vmin, 70px) * var(--scale));
  --fs-7:  calc(clamp(30px, 6.2vmin, 96px) * var(--scale));
  --fs-8:  calc(clamp(38px, 8.4vmin, 132px) * var(--scale));
  --fs-9:  calc(clamp(52px,12.5vmin, 200px) * var(--scale));
  --fs-10: calc(clamp(96px,26.0vmin, 420px) * var(--scale));
  --gap: clamp(8px, 1.6vmin, 26px);
  --pad-card: clamp(10px, 2.0vmin, 34px);
  --pad-x: clamp(12px, 2.4vmin, 38px);
  --r-l: clamp(12px, 1.8vmin, 26px); --r-m: clamp(10px, 1.5vmin, 22px);
  --burn-reserve: 2.4vmin;           /* Kantenreserve, sonst beschneidet    */
  --nk-temp:0; --nk-wind:0; --nk-pres:0; --nk-rain:1;
  /* Im 24/7-Dauerbetrieb keine Wert-Animationen: kein Flackern, kein
     Repaint-Rauschen auf schwacher Tablet-GPU. Szenenwechsel bleibt weich. */
  --dur-fast: 0ms; --dur: 0ms;
}

/* ==========================================================================
   NACHT-DIMMSTUFEN (Kiosk) — Tokenebene statt filter:brightness().
   Jede Stufe hält ihren EIGENEN Innenkontrast (Text/Karte > 4,5:1); reduziert
   wird die Gesamthelligkeit, nicht die Lesbarkeit. Feinregelung zusätzlich
   über --veil (statischer Schleier, z-index 40, UNTER Warnband und Sheet).
   ========================================================================== */
:root[data-dim="1"] {              /* Dämmerung, ab Sonnenuntergang −30 min */
  --bg:#05080e; --bg-elev:#080d16;
  --surface-1:#0d141f; --surface-2:#111926; --surface-3:#16202e;
  --line:#1a2434;
  --txt:#c8d2e0; --txt-2:#8c99ad; --txt-3:#6b7789;
  --veil: .08;
}
:root[data-dim="2"] {              /* Nacht, ab Sonnenuntergang +60 min     */
  --bg:#02040a; --bg-elev:#050910;
  --surface-1:#080d15; --surface-2:#0b111a; --surface-3:#0f1622;
  --line:#131a26;
  --txt:#9aa5b6; --txt-2:#6a7688; --txt-3:#525d6d;
  --acc:#3b7cc4; --ok:#2a9b71; --cold:#4a8fb5; --hot:#b06a4c;
  --e-1:none; --e-2:none;
  --veil: .26;
}
:root[data-dim="3"] {              /* Tiefnacht (Ruhezeit, Vorgabe 23–06)   */
  --bg:#000205; --bg-elev:#000308;
  --surface-1:transparent;         /* Kartenflächen verschwinden ganz       */
  --surface-2:transparent; --surface-3:transparent;
  --line:#0d131c;
  --txt:#6e7889; --txt-2:#4c5665; --txt-3:#3b4450;
  --e-1:none; --e-2:none;
  --veil: .42;
}
/* Warnfarben folgen der Dimmung NIE — eine Sturmwarnung um 3 Uhr muss stechen. */
:root[data-dim="1"], :root[data-dim="2"], :root[data-dim="3"] {
  --danger:#ff8a8a; --warn:#f9c95a;
  --danger-soft: rgb(255 138 138 / .24); --warn-soft: rgb(249 201 90 / .20);
}

/* Bernstein-Nachtpalette — blaulichtarm, für Flur-/Schlafbereiche.
   Reiner Tokenblock, wirkt nur im Dunkeln und nur ab Dimmstufe 1.          */
:root[data-nightpal="bernstein"][data-dim="1"],
:root[data-nightpal="bernstein"][data-dim="2"],
:root[data-nightpal="bernstein"][data-dim="3"] {
  --txt:#e0a860; --txt-2:#b3854c; --txt-3:#8a6739;
  --acc:#e0a860; --acc-soft:#2a1c08;
  --cold:#d9a35f; --hot:#e8b06a;
  --chart-tick:#b3854c; --chart-grid:#3a2a15;
  --c-temp:#e8b06a; --c-temp-min:#c99a5c; --c-temp-max:#e8b06a;
  --c-pres:#c99a5c; --c-wind:#d1a267; --c-gust:#e8b06a; --c-rain:#bf9358;
  --c-dew:#b3854c; --c-uv:#d1a267; --c-solar:#e8b06a; --c-avg:#8a6739;
}

/* ==========================================================================
   ALARM — globale Achse, auf die jedes Medium reagiert.
   danger hebt jede Dimmung binnen 400 ms auf (Schleier + Stufe).
   Das JS spiegelt data-alarm auf <html> UND <body>, damit die Regel ohne
   :has() auskommt (alte Tablet-WebViews).
   ========================================================================== */
:root[data-alarm="danger"] { --veil: 0; }
:root[data-alarm="danger"] .veil, :root[data-alarm="danger"] .k-veil {
  transition: opacity 400ms linear;
}
body[data-alarm="warn"]   { --alarm-edge: var(--warn); }
body[data-alarm="danger"] { --alarm-edge: var(--danger); }
body[data-alarm="info"]   { --alarm-edge: var(--acc); }
body[data-alarm="none"]   { --alarm-edge: transparent; }

/* ==========================================================================
   DATENFRISCHE — Entwertung als Tokenwert, nicht als Sonderregel je Ansicht.
   [data-stale] wird auf den Ansichts-Wurzelknoten gesetzt (.app/.tablet/.m-app).
   ========================================================================== */
[data-stale="1"] { --stale-opacity: .62; --stale-gray: .45; }  /* veraltet   */
[data-stale="2"] { --stale-opacity: .42; --stale-gray: .75; }  /* tot        */

/* ==========================================================================
   SONNENLICHT-/HOCHKONTRASTMODUS (Handy, Schalter in „Mehr")
   Deckende Flächen, maximaler Textkontrast, keine Transparenz, +100 Gewicht.
   ========================================================================== */
:root[data-contrast="hoch"] {
  --surface-1:#ffffff; --surface-2:#ffffff; --surface-3:#e8eef7;
  --surface-glass:#ffffff;
  --bg:#ffffff; --bg-elev:#ffffff; --bg-grad:none;
  --txt:#000000; --txt-2:#16202e; --txt-3:#2c3849;
  --line:#8a97a8; --line-strong:#465468;
  --acc:#0b4f9e; --acc-fg:#ffffff;
  --danger:#a51616; --warn:#7a4a00; --ok:#00603f;
  --e-1:none; --e-2:none;
  --fw-boost:100;                 /* base.css: font-weight: calc(600 + var(--fw-boost,0)) */
}

/* ==========================================================================
   WETTERSTIMMUNG — setzt AUSSCHLIESSLICH --bg-grad um. Nie „background:"
   als Kurzschreibweise, sonst stirbt background-attachment/fixed erneut.
   ========================================================================== */
body[data-wx="rain"]      { --bg-grad: radial-gradient(1200px 800px at 78% -10%, #15314a 0%, #0d1a29 55%, var(--bg) 100%); }
body[data-wx="thunder"]   { --bg-grad: radial-gradient(1200px 800px at 78% -10%, #2a2140 0%, #131322 55%, var(--bg) 100%); }
body[data-wx="worsening"] { --bg-grad: radial-gradient(1200px 800px at 78% -10%, #1b2b41 0%, #101827 55%, var(--bg) 100%); }
body[data-wx="improving"] { --bg-grad: radial-gradient(1200px 800px at 78% -10%, #1d3552 0%, #101a2a 55%, var(--bg) 100%); }
body[data-wx="changing"]  { --bg-grad: radial-gradient(1200px 800px at 78% -10%, #23324e 0%, var(--bg-elev) 55%, var(--bg) 100%); }
/* „stable" nutzt den Grundverlauf aus :root — keine eigene Regel nötig. */