/* ============================================================
   FARBWELTEN

   Eine zweite Ebene ueber hell/dunkel -- NICHT statt dessen.

   `data-theme` bleibt, was es war: hell oder dunkel. An ihm haengen in
   style.css Dutzende Regeln (Dropdowns, Tabellen, Hinweise,
   Umriss-Knoepfe). Eine Farbwelt, die `data-theme` ersetzte, wuerde sie
   alle wegreissen.

   `data-farbwelt` setzt deshalb NUR Farbvariablen. Jede Welt sagt in
   `theme.js`, auf welcher Grundlage sie sitzt -- Tageslicht auf hell, alle
   uebrigen auf dunkel.

   IM PARTNERRAHMEN GIBT ES KEINE FARBWELT. `layout.html` setzt das Attribut
   dort nicht; damit greift keine dieser Regeln, und die Einfaerbung des
   Partners bleibt allein zustaendig. Das ist auch der Grund, warum die
   Glas-Gestaltung im Dashboard an `[data-farbwelt]` haengt: kein Attribut,
   kein Glas.

   WARUM `html[data-farbwelt=...]` UND NICHT NUR `[data-farbwelt=...]`
   Der <style>-Block im Kopf von layout.html setzt `:root { --primary-color:
   ... }` und steht NACH diesem Stilblatt. Bei gleicher Spezifitaet gewinnt
   die spaetere Regel -- die Farbwelt waere also wirkungslos gewesen (der
   Akzent blieb blau, nachgemessen am 07.09.2026). Mit dem vorangestellten
   `html` ist es eine Spezifitaet mehr, und die Reihenfolge spielt keine
   Rolle mehr.

   WELCHE VARIABLEN
   Die ersten sind die vorhandenen aus style.css. Die `--welt-*` kommen neu
   dazu und beschreiben den Raum: Grund, Raster, Lichtstellen, Glasflaechen,
   Lichtkanten. dashboard_styles.css liest sie.
   ============================================================ */

/* ---------- Bernstein (Vorgabe, dunkle Grundlage) ---------- */
html[data-farbwelt="bernstein"] {
    --bg-body: #12161c;
    --bg-sidebar: #1a1f27;
    --bg-surface: #1e242e;
    --bg-surface-secondary: #262d38;
    --border-color: rgba(255, 255, 255, .09);

    --primary-color: #d98324;
    --primary-dark: #b96c17;
    --primary-light: #f0a44e;
    --accent-color: #d98324;

    --text-body: #e8ecf1;
    --text-muted: #98a2b0;
    --text-auf-gestell: #e8ecf1;
    --text-auf-gestell-leise: #98a2b0;
    --feld-auf-gestell: #161b22;

    --bs-body-color: #e8ecf1;
    --bs-body-bg: #12161c;

    --welt-auf-akzent: #12161c;
    --welt-akzent-schwach: rgba(217, 131, 36, .16);
    --welt-rand-stark: rgba(255, 255, 255, .24);
    --welt-grund: #0a0d12;
    --welt-raster: rgba(255, 255, 255, .028);
    --welt-licht1: rgba(217, 131, 36, .16);
    --welt-licht2: rgba(120, 90, 50, .16);
    --welt-glas: rgba(30, 36, 46, .55);
    --welt-glas-leicht: rgba(18, 22, 28, .55);
    --welt-kante: rgba(255, 255, 255, .13);
    --welt-senke: rgba(8, 11, 15, .45);
}

/* ---------- Signalgruen (dunkle Grundlage) ---------- */
html[data-farbwelt="signalgruen"] {
    --bg-body: #0e1011;
    --bg-sidebar: #16191b;
    --bg-surface: #1a1e20;
    --bg-surface-secondary: #22272a;
    --border-color: rgba(255, 255, 255, .08);

    --primary-color: #3ddc84;
    --primary-dark: #2bb36a;
    --primary-light: #6ef0a8;
    --accent-color: #3ddc84;

    --text-body: #e6e9ea;
    --text-muted: #8f9aa0;
    --text-auf-gestell: #e6e9ea;
    --text-auf-gestell-leise: #8f9aa0;
    --feld-auf-gestell: #121516;

    --bs-body-color: #e6e9ea;
    --bs-body-bg: #0e1011;

    --welt-auf-akzent: #0e1011;
    --welt-akzent-schwach: rgba(61, 220, 132, .15);
    --welt-rand-stark: rgba(255, 255, 255, .22);
    --welt-grund: #07090a;
    --welt-raster: rgba(255, 255, 255, .03);
    --welt-licht1: rgba(61, 220, 132, .13);
    --welt-licht2: rgba(30, 90, 70, .16);
    --welt-glas: rgba(26, 30, 32, .55);
    --welt-glas-leicht: rgba(14, 16, 17, .55);
    --welt-kante: rgba(255, 255, 255, .12);
    --welt-senke: rgba(5, 7, 8, .45);
}

/* ---------- Petrol (dunkle Grundlage) ---------- */
html[data-farbwelt="petrol"] {
    --bg-body: #0d1517;
    --bg-sidebar: #132022;
    --bg-surface: #17262a;
    --bg-surface-secondary: #1e3238;
    --border-color: rgba(255, 255, 255, .09);

    --primary-color: #2dd4bf;
    --primary-dark: #14b8a6;
    --primary-light: #5eead4;
    --accent-color: #2dd4bf;

    --text-body: #e3edee;
    --text-muted: #8ba3a7;
    --text-auf-gestell: #e3edee;
    --text-auf-gestell-leise: #8ba3a7;
    --feld-auf-gestell: #101c1f;

    --bs-body-color: #e3edee;
    --bs-body-bg: #0d1517;

    --welt-auf-akzent: #0d1517;
    --welt-akzent-schwach: rgba(45, 212, 191, .16);
    --welt-rand-stark: rgba(255, 255, 255, .24);
    --welt-grund: #070f11;
    --welt-raster: rgba(255, 255, 255, .03);
    --welt-licht1: rgba(45, 212, 191, .14);
    --welt-licht2: rgba(20, 90, 100, .18);
    --welt-glas: rgba(23, 38, 42, .55);
    --welt-glas-leicht: rgba(13, 21, 23, .55);
    --welt-kante: rgba(255, 255, 255, .12);
    --welt-senke: rgba(5, 10, 12, .45);
}

/* ---------- Tiefblau (dunkle Grundlage) ---------- */
html[data-farbwelt="tiefblau"] {
    --bg-body: #0f1620;
    --bg-sidebar: #16202c;
    --bg-surface: #1b2634;
    --bg-surface-secondary: #223040;
    --border-color: rgba(255, 255, 255, .10);

    --primary-color: #3b82f6;
    /* HELLER als der Grundton, nicht dunkler -- entgegen dem Namen.
       `--primary-dark` ist nur noch der Ueberfahren-Ton (zwei Stellen in
       style.css). Mit #2563eb kam die dunkle Schrift darauf auf 3,5:1;
       heller sind es 6,6:1, bei gleich starkem Helligkeitssprung. In den
       uebrigen dunklen Welten reicht der dunklere Ton (7,0 bis 7,4:1). */
    --primary-dark: #5b9bff;
    --primary-light: #7cb0fb;
    --accent-color: #3b82f6;

    --text-body: #e6edf5;
    --text-muted: #93a4b8;
    --text-auf-gestell: #e6edf5;
    --text-auf-gestell-leise: #93a4b8;
    --feld-auf-gestell: #131c26;

    --bs-body-color: #e6edf5;
    --bs-body-bg: #0f1620;

    --welt-auf-akzent: #0f1620;
    --welt-akzent-schwach: rgba(59, 130, 246, .18);
    --welt-rand-stark: rgba(255, 255, 255, .26);
    --welt-grund: #080d14;
    --welt-raster: rgba(255, 255, 255, .03);
    --welt-licht1: rgba(59, 130, 246, .18);
    --welt-licht2: rgba(20, 90, 150, .16);
    --welt-glas: rgba(27, 38, 52, .55);
    --welt-glas-leicht: rgba(15, 22, 32, .55);
    --welt-kante: rgba(255, 255, 255, .13);
    --welt-senke: rgba(6, 10, 15, .45);
}

/* ---------- Tageslicht (HELLE Grundlage) ----------

   Die einzige Welt auf `data-theme="light"`. Deshalb sind hier die
   Lichtkanten dunkel statt hell und das Raster dunkel statt hell -- eine
   helle Kante auf hellem Grund saehe man nicht. */
html[data-farbwelt="tageslicht"] {
    --bg-body: #eef1f5;
    --bg-sidebar: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-secondary: #e4e9f0;
    --border-color: rgba(16, 24, 40, .12);

    --primary-color: #1f5fd0;
    --primary-dark: #174ba6;
    --primary-light: #174ba6;
    --accent-color: #1f5fd0;

    --text-body: #16202b;
    --text-muted: #5a6675;
    --text-auf-gestell: #16202b;
    --text-auf-gestell-leise: #5a6675;
    --feld-auf-gestell: #f7f9fb;

    --bs-body-color: #16202b;
    --bs-body-bg: #eef1f5;

    --welt-auf-akzent: #ffffff;
    --welt-akzent-schwach: rgba(31, 95, 208, .12);
    --welt-rand-stark: rgba(16, 24, 40, .28);
    --welt-grund: #e6ebf2;
    --welt-raster: rgba(16, 24, 40, .045);
    --welt-licht1: rgba(31, 95, 208, .13);
    --welt-licht2: rgba(120, 160, 220, .16);
    --welt-glas: rgba(255, 255, 255, .66);
    --welt-glas-leicht: rgba(255, 255, 255, .62);
    --welt-kante: rgba(16, 24, 40, .10);
    --welt-senke: rgba(230, 235, 242, .60);
}