/* tageszeit.css — der Abend rueckt naeher (js/tageszeit.js).
   ---------------------------------------------------------------------------
   Zwei Schichten ueber der Seite, beide `pointer-events: none`, beide mit `multiply`:

     .tageslicht-warm   Bernstein von unten     — das Licht im Raum, abends am staerksten
     .tageslicht-tief   Indigo an den Raendern  — die Tiefe, nachts am staerksten

   WARUM MULTIPLY UND NICHT EINFACH EINE FARBE DRUEBER
   Multiply nimmt jedem Bildpunkt Helligkeit weg und faerbt ihn zugleich ein — genau das, was
   ein warmes Zimmerlicht mit einem Raum macht. Eine gewoehnliche Deckschicht wuerde stattdessen
   alles gleichmaessig aufhellen und die Seite ausbleichen.

   *** JEDE SCHICHT HAENGT EINZELN AM BODY — NIEMALS IN EINER GEMEINSAMEN HUELLE ***
   Zuerst steckten beide in einem <div class="tageslicht"> mit z-index 50. Das sah ordentlich aus
   und war falsch: Ein Element mit z-index bildet einen Stapelkontext, und ein Stapelkontext ist
   beim Mischen eine abgeschlossene Gruppe. `multiply` mischte sich damit nur INNERHALB der Huelle,
   also gegen nichts — uebrig blieb eine gewoehnliche helle Flaeche mit zusammen 26 % Deckung
   ueber der Seite. Bjoern am 30.09.2026: „der Kontrast ist nicht mehr so hoch … als ob da so ein
   leichter Schleier auf dem Bild waere. Und es ist sehr hell."
   Wer hier eine Huelle, `isolation: isolate`, `contain: paint`, `filter` oder `opacity` auf einem
   Vorfahren einbaut, schaltet die Mischung wieder ab — und zwar lautlos, es sieht nur falsch aus.

   WARUM DIE MITTE FREI BLEIBT
   Die Tiefen-Schicht ist in der Bildmitte durchsichtig und zieht erst nach aussen an. Dort steht
   der Text. Waere sie gleichmaessig, saenke der Kontrast ueberall — so sinkt er nur da, wo
   ohnehin nichts zu lesen ist.

   DIE ZAHLEN
   .17 und .24 als Obergrenze. Der Textkontrast muss auch um drei Uhr nachts ueber 4,5 bleiben;
   wer daran dreht, misst nach (docs/STYLEGUIDE.md §5). */

.tageslicht-warm,
.tageslicht-tief {
  position: fixed;
  inset: 0;
  z-index: 50;                 /* ueber der Kopfleiste (40), unter dem Tueroeffner (60) */
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Warmes Licht von unten — als kaeme es aus der Kegelbahn herein. */
.tageslicht-warm {
  background: radial-gradient(150% 95% at 50% 118%,
    #ffcf9a 0%, #ffe7cc 40%, #fff 74%);
  opacity: calc(var(--tag-warm, 0) * .17);
}

/* Tiefe an den Raendern — die Mitte bleibt weit frei, dort steht der Text. */
.tageslicht-tief {
  background: radial-gradient(135% 140% at 50% 46%,
    #fff 56%, #d7d2e2 84%, #9d97b4 100%);
  opacity: calc(var(--tag-tief, 0) * .24);
}

/* Wer hohen Kontrast eingestellt hat, will keine Farbabweichung. */
@media (prefers-contrast: more) {
  .tageslicht-warm,
  .tageslicht-tief { display: none; }
}