/* Atmosphäre – zwei feste Schichten, nie klickbar (Stand 06.10.2026 nach Leons Rückmeldung).
   1. Glutnebel (canvas.atmo-nebel): weiche Rot-/Orange-Wolken, folgen der Maus (atmosphaere.js).
      Liegt HINTER den Inhalten: z-index −1, über den Abschnittsgründen (seite.css: .abschnitt--*::before, z-index −2),
      unter Text, Karten, Bildern, Videos, Logos, Kopfleiste, Hero. Er färbt nur den Hintergrund.
   2. Nachtlicht (.atmo-nachtlicht): kräftiger Blaulichtfilter wie Windows-Nachtlicht, ÜBER allem (multiply).
   Bewusst kein filter auf body/html: das würde jedes Video-Frame durch einen Filterdurchlauf schicken.

   ---------- API ----------
   <body data-atmo="hell">   helle Seite: zarter Pfirsich-/Apricot-Nebel per multiply (färbt statt aufzuhellen).
   <body data-atmo="aus">    kein Nebel, nur Nachtlicht.
   (ohne Attribut)           dunkle Seite: Glutnebel per screen.
   [data-atmo-aus]           Element samt Kindern bekommt nie Nebel (wird aus dem Canvas ausgespart).
                             Automatisch ausgespart: .kopf.fest, .hero, .b-hero, .ball, .raum, Karten/Kacheln
                             (.b-kachel, .t-karte, .person, .figur, .b-assi, … und alles mit „karte“/„kachel“/„tafel“ im Klassennamen).
   Abschnittsfarben:         über --abschnitt-grund setzen (wird im ::before gemalt, liegt dann unter dem Nebel).
                             Ein direktes background auf dem Abschnitt liegt ÜBER dem Nebel und verdeckt ihn dort.
   --atmo-staerke            Nebelstärke 0–1 (Standard 1 = schon gedämpfte Grundstärke).
   --atmo-nachtlicht-staerke Nachtlicht 0–1 (0 = aus, 1 = volle Farbe --atmo-nachtlicht-voll).
   Klasse .atmo-nebel nicht umbenennen: start-v2/uebergang.css blendet sie beim Seitenübergang aus. */

:root {
  /* Nachtlicht = orange Blaufilter-Folie (07.10.2026, Leon): Farbe aus dem Android-Nachtmodus-Vergleich, volle Stärke. */
  --atmo-nachtlicht-voll: rgb(255, 176, 104);
  --atmo-nachtlicht-staerke: 1;
  --atmo-staerke: 1;
}

/* body als eigener Stapelkontext: so liegen Nebel und Abschnittsgründe (negative z-index) immer über dem
   body-Hintergrund, auch wenn html eigene Hintergrundfarbe bekommt (z. B. html.ankunft). */
body { isolation: isolate; }

/* 07.10.2026, Leon (wichtigster Punkt): die KOMPLETTE Website liegt unter einer orangen „Blaufilter-Folie“ wie der
   Nachtmodus von Windows/Android. Start war der Android-Nachtmodus (Weiß → rgb(254,193,132)); Leon wollte es noch orangener: jetzt Weiß → rgb(255,176,104), also R ×1, G ×0,69, B ×0,41.
   Gilt auf allen Seiten gleich stark, auch auf den hellen. Die frühere Abschwächung auf hellen Seiten ist aufgehoben. */

.atmo-nebel,
.atmo-nachtlicht {
  position: fixed;
  inset: 0;
  pointer-events: none;
  contain: strict;
}

/* ---------- Nachtlicht ---------- */
.atmo-nachtlicht {
  z-index: 2147483647;
  background: color-mix(in srgb, var(--atmo-nachtlicht-voll) calc(var(--atmo-nachtlicht-staerke) * 100%), #fff);
  mix-blend-mode: multiply;
}

/* ---------- Glutnebel ---------- */
.atmo-nebel {
  z-index: -1;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen; /* dunkel: Schwarz neutral, hellt nur den Grund auf */
  opacity: 0;
  transition: opacity 2.4s cubic-bezier(.65, 0, .25, 1);
}
body[data-atmo="hell"] .atmo-nebel { mix-blend-mode: multiply; } /* hell: Weiß neutral, färbt zart warm */
body[data-atmo="aus"] .atmo-nebel { display: none; }
.atmo-nebel.atmo-an { opacity: 1; }
/* Sparmodus (vom Skript gesetzt, wenn die Bildrate einbricht, z. B. ohne GPU): Nebel aus, Nachtlicht bleibt. */
.atmo-nebel.atmo-sparsam { display: none; }

/* Sofort ab dem ersten Bild (bevor atmosphaere.js die Schicht anlegt): gleiche Folie als html::after. */
html:not(:has(.atmo-nachtlicht))::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483647;
  background: color-mix(in srgb, var(--atmo-nachtlicht-voll) calc(var(--atmo-nachtlicht-staerke) * 100%), #fff);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .atmo-nebel { transition: none; }
}

@media print {
  .atmo-nebel, .atmo-nachtlicht { display: none; }
  html::after { content: none !important; }
}