/* ===========================================================================
   Tageslicht — Tor G4 Teil 4 (Andi, 08.10.2026, Punkt 1 und 2)

   Die eine Stelle für alle Farben von A. Grundlage ist
   entwurf/relaunch-2026-10/TAGESLICHT-VORSCHLAG.html; die Richtung ist fest:
     Morgen  hell und fast weiß, klares Licht von links, kühle Schatten
     Tag     unbewölkter blauer Himmel, volle Sonne von oben
     Abend   Sonnenuntergang: oben Dämmerblau, unten Glut (die Glut liegt
             hinter dem Haus, nicht hinter dem Text), Licht warm von rechts
     Nacht   Vollmondnacht in tiefem Blau, kühles Mondlicht, warme Fenster
   Verfeinert gegenüber dem Vorschlag: der Morgen heller, der Abend ohne den
   Mauveton in der Mitte (kein Lila-Blau-Verlauf), Schrift und Minus so, dass
   sie an jeder Tageszeit ohne Nachziehen ihr Soll erreichen.

   Je Tageszeit ein Block über data-palette (mockup.js). Der Zeitraffer
   (zeitraffer.js) liest dieselben Blöcke und mischt nach der Uhr
   (farbweg.js: Nacht 1 Uhr, Morgen 7, Tag 13, Abend 19).

   Das Haus (haus-licht.js) trägt echte Farben, die „Werkstoffe“ unten, und
   wird vom Licht der Tageszeit beleuchtet:
     --h-licht, --h-licht-k        Sonne oder Mond: Farbe und Stärke
     --h-umgebung, --h-umgebung-k  Himmelslicht, das auch im Schatten liegt
     --h-tusche                    die dünnen Linien (1 px), ohne Schein
     --h-schatten, --h-schatten-k  Schlagschatten am Boden
     --h-fenster-an, --h-nachbar-an  Anteil der hellen Fenster (Haus, Nachbarn)
     --h-laterne                   Straßenlaternen an (0 bis 1)
     --h-sterne, --h-sterne-k      Sterne am Himmel um das Haus
     --h-nebel, --h-nebel-licht    Rand der Szene (nebel.js, Tor G4 Teil 5):
                                   Farbe des Nebels und seiner Lichtseite;
     --h-nebel-licht-2             der Schein auf halbem Weg zur Lichtseite
                                   (am Abend rosé, zur Sonne golden)
     --h-nebel-k, --h-nebel-licht-k  Dichte und Stärke des Lichts darauf
     --h-nebel-boden, -schleier, -bausch  Anteil der drei Formen: flache
                                   Bodennebelbänke, dünne Schleier, Wolkenbausche
                                   im Ring. Morgen Bodennebel, Tag Schleier
                                   und Dunst, Abend warmer Dunst im Gegenlicht,
                                   Nacht Nebel im Mondlicht.

   Bedeutung bleibt: Rot ist zu jeder Zeit das Minus, Grün das Plus, der
   Akzent das Bedienbare und nie rot oder grün.

   Der Wähler mit :is(*, #_) hebt die Gewichtung auf die eines id-Wählers,
   damit kein Wähler aus tokens.css (etwa mit data-ton) einen Wert hier
   überschreibt.
   =========================================================================== */

[data-palette="morgen"]:is(*, #_) {
    --himmel-oben: #DDE7EF; --himmel-mitte: #F0F2F3; --horizont: #F8DFC8;
    --text: #18232F; --leise: #47535F; --akzent: #24557F; --schlecht: #A3271E; --gut: #1E6B47; --feld-text: #18232F; --feld-leise: #47535F;
    --strich: rgba(24, 35, 47, .2); --strich-leise: rgba(24, 35, 47, .12); --unterstrich: rgba(24, 35, 47, .45);
    --fuehrung: rgba(24, 35, 47, .5); --fuehrung-punkt: #24557F;
    --jelly-a: rgba(230, 240, 250, .95); --jelly-b: rgba(200, 219, 240, .9); --jelly-rand: rgba(24, 35, 47, .14);
    --jelly-kante: #FFFFFF; --jelly-licht: rgba(255, 255, 255, 1); --jelly-glimm: rgba(36, 85, 127, .1); --jelly-schatten: rgba(30, 50, 75, .3);
    --jelly-fleck: rgba(255, 255, 255, .9); --jelly-glimm-stark: rgba(36, 85, 127, .2);
    --knopf-a: #2E6592; --knopf-b: #1F4C73; --knopf-text: #FFFFFF; --knopf-kante: rgba(255, 255, 255, .32); --knopf-tief: rgba(0, 20, 40, .45); --knopf-schein: rgba(30, 60, 95, .45);

    --h-licht: #FFE6CB; --h-licht-k: .95; --h-umgebung: #CBD8E5; --h-umgebung-k: .72;
    --h-tusche: rgba(52, 64, 78, .55); --h-schatten: #3C4E66; --h-schatten-k: .2;
    --h-fenster-an: .08; --h-nachbar-an: .03; --h-laterne: 0; --h-sterne: #FFFFFF; --h-sterne-k: 0;
    --h-nebel: #ECEEF0; --h-nebel-licht: #FFF2E0; --h-nebel-licht-2: #FBF1E8; --h-nebel-k: .95; --h-nebel-licht-k: 1;
    --h-nebel-boden: 1; --h-nebel-schleier: .25; --h-nebel-bausch: .45;
}

[data-palette="tag"]:is(*, #_) {
    --himmel-oben: #5CA0E0; --himmel-mitte: #9BCBF0; --horizont: #D6ECFA;
    --text: #0B1A2A; --leise: #1A2F47; --akzent: #0B3157; --schlecht: #861612; --gut: #08331F; --feld-text: #0B1A2A; --feld-leise: #3F4E5E;
    --strich: rgba(11, 26, 42, .22); --strich-leise: rgba(11, 26, 42, .14); --unterstrich: rgba(11, 26, 42, .5);
    --fuehrung: rgba(11, 26, 42, .55); --fuehrung-punkt: #0B3157;
    --jelly-a: rgba(224, 238, 250, .95); --jelly-b: rgba(194, 216, 240, .9); --jelly-rand: rgba(11, 26, 42, .14);
    --jelly-kante: #FFFFFF; --jelly-licht: rgba(255, 255, 255, 1); --jelly-glimm: rgba(11, 49, 87, .1); --jelly-schatten: rgba(10, 40, 80, .32);
    --jelly-fleck: rgba(255, 255, 255, .9); --jelly-glimm-stark: rgba(11, 49, 87, .2);
    --knopf-a: #164573; --knopf-b: #0B3157; --knopf-text: #FFFFFF; --knopf-kante: rgba(255, 255, 255, .3); --knopf-tief: rgba(0, 10, 30, .5); --knopf-schein: rgba(10, 40, 80, .45);

    --h-licht: #FFF3DC; --h-licht-k: 1.3; --h-umgebung: #AFCBEA; --h-umgebung-k: .55;
    --h-tusche: rgba(40, 52, 66, .55); --h-schatten: #2C4466; --h-schatten-k: .26;
    --h-fenster-an: 0; --h-nachbar-an: 0; --h-laterne: 0; --h-sterne: #FFFFFF; --h-sterne-k: 0;
    --h-nebel: #E6EFF8; --h-nebel-licht: #FFFFFF; --h-nebel-licht-2: #F6FAFE; --h-nebel-k: .85; --h-nebel-licht-k: .9;
    --h-nebel-boden: .1; --h-nebel-schleier: 1; --h-nebel-bausch: .4;
}

[data-palette="abend"]:is(*, #_) {
    --himmel-oben: #1F2A47; --himmel-mitte: #3E4457; --horizont: #E8925A;
    --text: #FBF0E4; --leise: #D9CCBE; --akzent: #F7BA80; --schlecht: #FF9F8A; --gut: #86DDB0; --feld-text: #FBF0E4; --feld-leise: #D9CCBE;
    --strich: rgba(251, 240, 228, .24); --strich-leise: rgba(251, 240, 228, .13); --unterstrich: rgba(251, 240, 228, .45);
    --fuehrung: rgba(251, 222, 190, .55); --fuehrung-punkt: #F7BA80;
    --jelly-a: rgba(78, 72, 86, .98); --jelly-b: rgba(44, 42, 56, .97); --jelly-rand: rgba(255, 236, 214, .16);
    --jelly-kante: rgba(255, 240, 222, .5); --jelly-licht: rgba(255, 244, 230, .5); --jelly-glimm: rgba(247, 186, 128, .18); --jelly-schatten: rgba(0, 0, 0, .6);
    --jelly-fleck: rgba(255, 228, 196, .3); --jelly-glimm-stark: rgba(247, 186, 128, .28);
    --knopf-a: #FAD0A4; --knopf-b: #EFA466; --knopf-text: #2A1A12; --knopf-kante: rgba(255, 255, 255, .6); --knopf-tief: rgba(140, 70, 20, .4); --knopf-schein: rgba(240, 150, 80, .4);

    --h-licht: #FFA35E; --h-licht-k: 1.15; --h-umgebung: #4A6790; --h-umgebung-k: .42;
    --h-tusche: rgba(20, 26, 44, .6); --h-schatten: #141C33; --h-schatten-k: .3;
    --h-fenster-an: .55; --h-nachbar-an: .3; --h-laterne: 1; --h-sterne: #FFF3E6; --h-sterne-k: .15;
    --h-nebel: #5A6884; --h-nebel-licht: #FAC88A; --h-nebel-licht-2: #EDA99C; --h-nebel-k: .6; --h-nebel-licht-k: 1;
    --h-nebel-boden: .35; --h-nebel-schleier: .6; --h-nebel-bausch: .55;
}

[data-palette="nacht"]:is(*, #_) {
    --himmel-oben: #0A1220; --himmel-mitte: #14243C; --horizont: #24395A;
    --text: #E8EEF5; --leise: #B4C0CE; --akzent: #B9CDE8; --schlecht: #FF9C91; --gut: #8ADBB4; --feld-text: #E8EEF5; --feld-leise: #B4C0CE;
    --strich: rgba(232, 238, 245, .22); --strich-leise: rgba(232, 238, 245, .12); --unterstrich: rgba(232, 238, 245, .45);
    --fuehrung: rgba(200, 216, 236, .5); --fuehrung-punkt: #B9CDE8;
    --jelly-a: rgba(46, 60, 84, .98); --jelly-b: rgba(22, 32, 50, .97); --jelly-rand: rgba(200, 216, 236, .16);
    --jelly-kante: rgba(220, 232, 246, .45); --jelly-licht: rgba(230, 238, 248, .45); --jelly-glimm: rgba(185, 205, 232, .14); --jelly-schatten: rgba(0, 0, 0, .7);
    --jelly-fleck: rgba(220, 232, 246, .26); --jelly-glimm-stark: rgba(185, 205, 232, .24);
    --knopf-a: #D2E0F1; --knopf-b: #A9C2E2; --knopf-text: #0E1A2B; --knopf-kante: rgba(255, 255, 255, .6); --knopf-tief: rgba(40, 70, 120, .4); --knopf-schein: rgba(150, 180, 230, .3);

    --h-licht: #AFC4E6; --h-licht-k: .5; --h-umgebung: #2A3D5E; --h-umgebung-k: .42;
    --h-tusche: rgba(6, 12, 24, .6); --h-schatten: #050A14; --h-schatten-k: .22;
    --h-fenster-an: 1; --h-nachbar-an: .28; --h-laterne: 1; --h-sterne: #E8EEF8; --h-sterne-k: .85;
    --h-nebel: #2A3B55; --h-nebel-licht: #9FB3CF; --h-nebel-licht-2: #6F84A3; --h-nebel-k: .8; --h-nebel-licht-k: .75;
    --h-nebel-boden: .8; --h-nebel-schleier: .15; --h-nebel-bausch: .5;
}

/* Werkstoffe: die eigenen Farben der Dinge, bei weißem Licht. Das Licht der
   Tageszeit kommt in haus-licht.js dazu; hier ändert sich nichts. */
:root {
    --w-fassade: #EEE8DD; --w-fassade-turm: #E4E1DA; --w-sockel: #8F8B85; --w-dach: #7E848A; --w-attika: #B3B6B8;
    --w-rahmen: #F6F5F1; --w-glas: #34414F; --w-bank: #D9D5CC; --w-tuer: #3F444A; --w-rohr: #8C9196;
    --w-balkon: #DCD8D0; --w-gelaender: #9FB4C4; --w-vordach: #6E757C; --w-stufe: #C9C4BA; --w-schild: #C9A86A;
    --w-rasen: #93AD74; --w-rasen-2: #88A36C; --w-beet: #7A6550; --w-weg: #D2CBBE; --w-pflaster: #BDB6A9; --w-holz: #A97C55;
    --w-strasse: #868A8E; --w-gehweg: #BAB7B0; --w-bordstein: #DCD9D2; --w-markierung: #F3F1EB;
    --w-laub: #67895A; --w-laub-hell: #849F63; --w-laub-dunkel: #4F6F55; --w-nadel: #46654F; --w-busch: #6F8F58; --w-hecke: #5B7B4E; --w-stamm: #6B5542;
    --w-metall: #575D63; --w-solar: #26354A; --w-schirm: #E9DDC7; --w-tisch: #8A6A4C;
    --w-tonne: #5E6368; --w-tonne-blau: #2F5D8A; --w-tonne-braun: #6B4B30; --w-tonne-gelb: #D8B33E;
    --w-nachbar-1: #E7DCCA; --w-nachbar-2: #D8D6D0; --w-nachbar-3: #E9D3B9; --w-nachbar-4: #CDB9A5; --w-nachbar-5: #B98068;
    --w-ziegel: #9B5C46; --w-schiefer: #5C6168; --w-dach-hell: #8A817A;
    --w-fenster-licht: #FFD27C; --w-fenster-warm: #FFB866; --w-lampe: #FFD9A0;
    --w-sonne: #FFF7E0; --w-sonne-tief: #FF9E5C; --w-mond: #E8EEF8;
}

/* Am Wurzelelement trägt die Palette auch den Farbmodus der Bedienelemente. */
:root[data-palette="morgen"], :root[data-palette="tag"] { color-scheme: light; }
:root[data-palette="abend"], :root[data-palette="nacht"] { color-scheme: dark; }

/* Proben für den Zeitraffer: unsichtbar, nur zum Auslesen. */
.palette-probe { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }