/* ==========================================================================
   HINTERGRUND-VERLAUF
   Version: 1.0.0

   Weisse Seiten wirkten flach. Zwei sehr weiche Farbwolken geben der Fläche
   Tiefe: unten links ein Hauch Markengrün, oben rechts ein Hauch des
   Akzentviolets — dieselben Töne wie im übrigen Design.

   ── Warum eine eigene Datei ────────────────────────────────────────────
   Der Verlauf liegt hinter allem und wird nur dort sichtbar, wo die
   Sektionen ihn durchlassen. Etliche Sektionen setzen aber einen eigenen
   weissen Grund — und weil `sections-home.css`, `sections-about.css`,
   `blog.css` und `produkt.css` NACH `main.css` geladen werden, gewinnen
   deren Regeln. Ein erster Versuch in main.css blieb deshalb auf der
   Startseite, im Lesestoff und auf den Produktseiten wirkungslos.

   Diese Datei wird als letzte geladen und macht die Sektionsflächen
   durchlässig. Karten, Kacheln und Formularflächen bleiben weiss — sie
   sollen sich vom Grund abheben, das ist ja der Zweck des Verlaufs.
   ========================================================================== */

/* Der Verlauf braucht eine durchsichtige Bühne. `body` trug bisher Weiss
   und hätte ihn verdeckt. */
body {
    background-color: var(--color-gray-50);
}

/* `position: fixed`: Der Verlauf bleibt beim Scrollen stehen, statt bei
   jeder Sektion neu anzusetzen. `z-index: -1` und `pointer-events: none`
   halten ihn vollständig aus der Interaktion heraus. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            65rem 50rem at 6% 94%,
            rgba(101, 175, 2, 0.115) 0%,
            rgba(101, 175, 2, 0.052) 40%,
            rgba(101, 175, 2, 0.014) 62%,
            rgba(101, 175, 2, 0) 78%
        ),
        radial-gradient(
            60rem 45rem at 95% 5%,
            rgba(75, 2, 175, 0.095) 0%,
            rgba(75, 2, 175, 0.042) 42%,
            rgba(75, 2, 175, 0.012) 64%,
            rgba(75, 2, 175, 0) 80%
        );
}


/* ── Sektionsflächen durchlässig machen ─────────────────────────────────
   Die Wrapper unterscheiden sich je Template — `page.php` legt die
   Sektionen in `.page-content`, `front-page.php` in `.home-page`,
   `single.php` in `.single-post__sections`. Ein Selektor über den Wrapper
   müsste also für jedes Template nachgezogen werden.

   Deshalb direkt am Element: Jede Sektion trägt die Klasse `.section`.
   `section.section` hat eine Spezifität von (0,1,1) und schlägt damit die
   Regeln der Sektions-Stylesheets, die durchweg (0,1,0) sind — und weil
   diese Datei zuletzt geladen wird, gewinnt sie auch bei Gleichstand.

   Ausgenommen sind die bewusst abgesetzten Flächen: graue und dunkle
   Sektionen als Zäsur im Seitenrhythmus, die Kopfbereiche mit eigenem
   Bild und dunklem Grund als Rückfallebene. */
section.section:not(.section--gray):not(.section--dark):not(.hero):not(.page-hero):not(.pr-hero),
section.pr-block,
div.pr-block {
    background-color: transparent;
}

/* Graue Sektionen: Statt einer deckenden Fläche eine durchscheinende
   Abdunklung. Der Wechsel hell/grau als Rhythmus der Seite bleibt
   erhalten — aber der Verlauf läuft jetzt durch die ganze Seite, statt
   an jeder grauen Sektion abzureissen.
   (Ein deckendes `--color-gray-50` wäre ausserdem identisch mit dem neuen
   Seitengrund und damit gar nicht mehr zu erkennen.) */
.section--gray {
    background-color: rgba(17, 24, 39, 0.038);
}

/* Blog-Listen und Archiv öffnen; die einzelnen Beitragskarten
   (`.post-card`) bleiben weiss, sie sollen sich abheben. */
.blog-main,
.blog-archive,
.lesestoff,
.blog-list {
    background-color: transparent;
}

/* Lesefläche eines Artikels: leicht durchscheinend statt deckend.
   Sie ist auf einem langen Beitrag rund 4000 px hoch — deckend weiss
   schluckt sie den Verlauf auf fast der ganzen Seite. Bei 75 % Deckkraft
   bleibt sie als eigene Fläche erkennbar und der Verlauf schimmert
   durch; für den Text ändert sich nichts, er steht weiterhin auf
   nahezu Weiss. */
section.single-post--with-hero > .container,
section.single-post > .container {
    background-color: rgba( 255, 255, 255, 0.75 );
}

@media (prefers-reduced-transparency: reduce) {
    body::before {
        display: none;
    }
}