/* ===========================================================================
   background/background.css - Die Grundfläche der Seite.
   ===========================================================================

   Hier stand ein bewegter Farbverlauf über den ganzen Bildschirm. Er ist weg, und das ist die
   grösste einzelne Änderung an dieser Fassung.

   WARUM
   Eine Veranstaltungsliste wird gelesen, nicht betrachtet. Ein Hintergrund, der ständig die
   Farbe unter dem Text wechselt, macht jede Zeile unterschiedlich gut lesbar - und weil die
   Karten deshalb kräftig abgesetzt sein mussten, wurden sie gross und es passten fünf
   Veranstaltungen auf einen Bildschirm.

   Was bleibt, ist die Papierfläche und eine sehr feine Struktur, die dem Grossflächigen etwas
   Tiefe gibt, ohne mit dem Inhalt zu konkurrieren: ein kaum sichtbarer Verlauf nach unten. Er
   ist so schwach, dass er auf einem schlechten Bildschirm einfach verschwindet - und das ist in
   Ordnung, denn er trägt keine Information.

   background.js baut hier nichts mehr hinein. Die Datei bleibt, weil index.html sie lädt und
   master.js das Element beim Scrollen leicht mitschiebt. */

.bg-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--papier);
    pointer-events: none;
}

/* Der Hauch von Tiefe: oben eine Spur heller als unten. In der dunklen Fassung umgekehrt,
   damit die Kopfzeile nicht im Nichts hängt. */
.bg-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0) 340px);
}

:root[data-theme="dark"] .bg-canvas::after {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.035) 0%,
        rgba(255, 255, 255, 0) 340px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bg-canvas::after {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.035) 0%,
            rgba(255, 255, 255, 0) 340px);
    }
}

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt hier ohnehin keine mehr - die Regel
   steht als Erinnerung, dass an dieser Stelle nichts wieder anfangen darf zu wabern. */
@media (prefers-reduced-motion: reduce) {
    .bg-canvas { transition: none; }
}