/* ══════════════════════════════════════════════════════════════════════════ Der Seitenhintergrund: Stroemung im Gitter Gehoert zu static/js/grund.js und templates/includes/grund.html. ══════════════════════════════════════════════════════════════════════════ Adrian hat diesen Hintergrund selbst als Vorlage gebaut (vorlage-backround4.html, 2026-08-26). Diese Datei ist seine Uebersetzung ins Produkt, keine Neufassung. Was hier anders ist als in der Vorlage, ist es aus einem technischen Grund, und der steht dabei. ── Drei Ebenen, von hinten nach vorn ──────────────────────────────────── z -3 .gr-flaeche der Grund. Drei radiale Lichter auf einem senkrechten Verlauf, statt einer Farbe. z -2 .gr-buehne die WebGL-Punktwolke. Nur im dunklen Modus. z -1 .gr-vignette zieht den Blick in die Mitte und dunkelt die Raender ab. Der Vorgaenger hatte sechs Ebenen, darunter zwei Dunstschichten mit einer 46-Sekunden-Schleife und zwei Farbebenen fuer einen 90-Sekunden-Wechsel. **Beides ist ersatzlos weg.** Eine Bewegung, die dauerhaft im Leerlauf weiterlaeuft, kostet auf jeder oeffentlichen Seite Rechenzeit und macht jeden Kontrastwert zum Zufallswert - dieselbe Textstelle mass mal 4,90 und mal 3,67, je nachdem, wann man hinsah. ── Der Punkt der ganzen Uebung: es ist ein BAND ──────────────────────── Die Stroemung fliesst durch die mittleren zwei Dritteln des Bildes. Oben und unten bleibt es nahezu schwarz, und das bleibt es auch waehrend sie fliesst - das Band bleibt in seiner Bahn. **Darauf kann Text ohne Schatten stehen.** Der Vorgaenger fuellte das ganze Bild mit Struktur; deshalb brauchte jede Ueberschrift auf der Startseite eine Gravur aus 25 gestapelten Schatten (startseite-gravur.css). Wie hoch die ruhigen Zonen wirklich sind, steht gemessen im Kopf von seiten-grund.css. ── Warum negative z-Werte und keine eigene Ebene ──────────────────────── Die Malreihenfolge im Wurzel-Stapel ist: Wurzelhintergrund, dann alles mit negativem z-index, DANN die Hintergruende der Bloecke. Genau deshalb steht der Grundton am und nicht am (siehe seiten-grund.css und den Kopf von base_public.html). Eine Farbe auf dem uebermalt die Leinwand vollstaendig - schwarzer Schirm, kein Fehler in der Konsole. ── Diese Datei traegt das Bild ALLEIN, wenn kein Shader laeuft ────────── Vier Faelle, und in allen vieren bleibt es bei dem, was hier steht: kein JavaScript die Leinwand bleibt leer und durchsichtig kein WebGL grund.js entfernt die Leinwand keine Importkarte (Safari unter 16.4) das Modul laedt gar nicht erst reduzierte Bew. grund.js zeichnet EIN Bild, dann Ruhe Deshalb ist der Auslieferungszustand hier vollstaendig: .gr-flaeche traegt die Aurora-Lichter mit voller Deckkraft. Wer nichts ausfuehrt, sieht einen ruhigen, dunklen Verlauf - und der sieht fuer sich schon gut aus. ── Immer dunkel ───────────────────────────────────────────────────────── AdenAI hat seit dem 2026-08-28 keinen hellen Modus mehr (Fahrplan 523, Adrians Entscheidung). `prefers-color-scheme` wird bewusst NICHT ausgewertet: wer sein System hell gestellt hat, sieht diesen Hintergrund trotzdem. Bis dahin trug jede Ebene hier eine zweite, helle Fassung unter `:root[data-theme="hell"]`; die sind mit dem Modus entfallen. Wird von base_public.html geladen, NACH tailwind.css. ══════════════════════════════════════════════════════════════════════════ */ /* ── Gemeinsame Lage ────────────────────────────────────────────────────── Alle Ebenen liegen fest im Sichtfeld und fangen keinen Zeigerklick ab. Das ist Flaeche, kein Inhalt - `pointer-events: none` ist hier Pflicht, sonst liegt eine unsichtbare Scheibe ueber jedem Knopf der Seite. */ .gr-flaeche, .gr-buehne, .gr-vignette { position: fixed; inset: 0; pointer-events: none; display: block; } /* ── Ebene 1: der Grund ─────────────────────────────────────────────────── Drei radiale Lichter - Gruen links, Blau in der Mitte, Lila rechts - auf einem senkrechten Verlauf. Alle drei sitzen auf halber Hoehe, also genau dort, wo auch das Band laeuft. Das ist kein Zufall: sie sind der Schein des Bandes auf dem Grund, und deshalb bleibt oben und unten Schwarz stehen. Die Werte stammen unveraendert aus Adrians Vorlage. */ .gr-flaeche { z-index: -3; background: radial-gradient(58% 48% at 22% 52%, rgba(0,255,168,.13) 0%, rgba(0,255,168,0) 64%), radial-gradient(62% 50% at 52% 48%, rgba(34,184,247,.15) 0%, rgba(34,184,247,0) 66%), radial-gradient(64% 54% at 84% 46%, rgba(168,85,247,.14) 0%, rgba(168,85,247,0) 68%), linear-gradient(180deg, #08080c 0%, #050506 55%, #030304 100%); } /* ── Ebene 2: die Leinwand ──────────────────────────────────────────────── `inset: 0` statt 100vw/100vh, und grund/stroemung.js liest ihre Groesse aus dem gerenderten Kasten (`clientWidth`/`clientHeight`) statt aus `innerWidth`. Beides zusammen ist der Grund, warum ein Bildlaufbalken das Bild nicht mehr streckt: `innerWidth` zaehlt ihn mit, der Kasten eines festen Elements nicht. Die Blende von 0,45 s ist die Dauer, mit der die Leinwand beim ersten Bild hereinkommt: grund.js setzt die Deckkraft auf 0, laesst zwei Bilder rechnen und gibt sie dann frei. Bis zum 2026-08-28 lief sie auch rueckwaerts, beim Wechsel nach hell - den gibt es nicht mehr. */ .gr-buehne { z-index: -2; /* **`width`/`height` sind hier Pflicht, `inset: 0` reicht NICHT.** Eine