/* ══════════════════════════════════════════════════════════════════════════ Der Seitenhintergrund: bewegter Farbverlauf (Fahrplan 153) Gehört zu static/js/verlauf.js und static/img/verlauf-standbild.webp. ══════════════════════════════════════════════════════════════════════════ Eine eigene Datei und kein Anhang an tailwind-input.css. Zwei Gründe: 1. tailwind-input.css ist eine eingetragene Ausnahme der 400-Zeilen-Grenze. Der Wächter (dashboard/tests/test_dateigroesse.py) sagt zu einer wachsenden Ausnahme wörtlich: "Aufteilen, nicht die Zahl hochsetzen." Recht hat er. 2. Das hier ist ein abgeschlossenes Thema mit eigenen Dateien daneben. Wer den Hintergrund sucht, findet ihn am Namen. Wird von base.html und base_public.html direkt NACH tailwind.css geladen. Die Palette (--color-bg-base) kommt von dort. ══════════════════════════════════════════════════════════════════════════ */ /* ── Der gemessene hellste Bildpunkt ────────────────────────────────────── KEINE Fläche, auf die man etwas legt, sondern ein Messwert. **Am 2026-08-26 neu gemessen**, für die Strömung im Gitter (grund.css, grund.js). Der Wert davor stammte von der Partikelwelle, die es seitdem nicht mehr gibt - geerbt wurde er nicht, er ist neu gemessen und kommt zufällig auf dieselbe Zahl. Gemessen wurde am gerenderten Bild, nicht aus Farben hergeleitet: Chrome headless, 1440x900, force-device-scale-factor=1, das Bild mit `window.adenaiGrund.zeitSetzen(20)` auf eine feste Sekunde festgehalten. Ohne das Festhalten misst jeder Lauf einen anderen Augenblick. Der Wert ist #ffffff, und das ist kein Rundungsfehler: die Punkte werden im dunklen Modus ADDITIV gemalt. Wo genug helle Punkte übereinander liegen, schlagen alle drei Kanäle an, und drei volle Kanäle sind Weiß. Es sind einzelne Funken, keine Flächen - aber ein Buchstabe kann auf einem stehen. Was die Zahl bedeutet: gegen sie erreicht text-primary 1,07:1, text-muted 3,75:1. **Die Mitte des Bildes ist kein zulässiger Textgrund** - was dort liegt, braucht eine deckende Fläche. ── Und jetzt der Unterschied zum Vorgänger ────────────────────────────── **Die Strömung ist ein Band, keine Fläche.** Der obige Wert gilt für die Bildmitte; oben und unten bleibt es nahezu schwarz, und dort trägt der Grund Text OHNE Hilfsmittel. Gemessen am 2026-08-26, jeweils der hellste EINZELNE Bildpunkt in der Zone (die strengste Lesart - ein einziger Funke zählt schon): Fenster text-muted (#7d858a) hält 4,5:1 ... text-primary hält 4,5:1 1440x900 oben 200 px (22 %), unten 200 px oben 345 px, unten 323 px 390x844 oben 223 px (26 %), unten 248 px oben 343 px, unten 336 px 320x640 oben 164 px (26 %), unten 181 px oben 260 px, unten 254 px **Das Band bleibt in seiner Bahn.** Sechs feste Zeitpunkte zwischen 0 und 600 Sekunden, 1440x900: die ruhige Zone oben lag bei 175 bis 218 px, unten bei 227 bis 255 px. Sie atmet um rund 40 px und wandert nicht. Wer eine Zusage darauf baut, nimmt den kleinsten Wert, nicht den gemessenen Mittelwert. Der helle Modus hat KEINE Leinwand (siehe grund.js), dort liegt nur der CSS-Verlauf. Sein hellster Bildpunkt ist #f8f8fe, und der trägt jeden hellen Textton frei (text-muted 5,81:1, text-secondary 7,43:1). Er steht hier nicht als Token, weil ihn niemand nachrechnet - und ein Token, das niemand liest, verwahrlost. Wer den Shader ändert oder an einem Schieber dreht, misst neu. */ :root { --color-bg-verlauf: #ffffff; } /* ── Der Grundton gehört an , nicht an ─────────────────────── Das ist keine Geschmacksfrage, sondern die Bedingung dafür, dass der Hintergrund überhaupt sichtbar ist. Die Malreihenfolge im Wurzel-Stapel ist: Wurzelhintergrund, dann alles mit negativem z-index, DANN die Hintergründe der Blöcke. Steht die Farbe auf dem , übermalt sie die Leinwand vollständig und man sieht nur Schwarz - **ohne einen Fehler in der Konsole**. Im Entwurf hat das nur das Auslesen der Bildpunkte gefunden, kein Test und kein Blick auf den Bildschirm. `html body` und nicht nur `body`: die Regel muss die body-Regel aus tailwind-input.css sicher schlagen, unabhängig davon, in welcher Reihenfolge und in welcher @layer der Tailwind-Build die beiden Dateien am Ende ablegt. Eine Spezifität, die nicht vom Zufall abhängt, ist hier mehr wert als die kürzere Schreibweise. Der Grundton steht ZUSÄTZLICH als Klasse am -Tag beider Basis- Templates. Doppelt gemoppelt ist Absicht: fällt diese Datei aus, ist die Seite dunkel und nicht weiß. */ html { background: var(--color-bg-base); } html body { background: transparent; } /* ── Die zwei Ebenen ────────────────────────────────────────────────────── .seiten-grund das Standbild als CSS-Hintergrund. Liegt IMMER da. .seiten-leinwand die WebGL-Leinwand darüber. Nur auf den öffentlichen Seiten, dort malt sie das Standbild bewegt zu. Warum das Standbild auch geladen wird, wenn der Shader läuft: es ist die Antwort auf jeden Zustand, in dem der Shader NICHT läuft, und die braucht keinen Umweg über eine Klasse, die JavaScript erst setzen müsste. ohne JavaScript die Leinwand bleibt leer und durchsichtig -> Standbild ohne WebGL verlauf.js entfernt die Leinwand -> Standbild reduzierte Bew. verlauf.js zeichnet EIN Bild, keine Schleife Bild fehlt background-color trägt den Grundton -> nie Weiß Preis: 25 KB, einmal, für die ganze Seite gecacht. Das Dashboard lädt dieselbe Datei - und damit gar kein WebGL. */ .seiten-grund, .seiten-leinwand { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; } .seiten-grund { z-index: -2; background-color: var(--color-bg-base); background-image: url("../img/verlauf-standbild.ef25d9dd4396.webp"); background-size: cover; background-position: center; } .seiten-leinwand { z-index: -1; } /* ── Im Dashboard: ruhig, und zwar messbar ──────────────────────────────── Adrians Vorgabe: bewegt auf den öffentlichen Seiten, ruhig im Dashboard - dort arbeitet der Kunde stundenlang mit Tabellen. base.html lädt deshalb kein verlauf.js, hier liegt nur das Standbild. Die Deckkraft ist der einzige Wert, bei dem ALLE DREI Textfarben frei auf dem Verlauf noch 4,5:1 erreichen. Gemessen am 2026-08-15 gegen den hellsten Bildpunkt (#3dddc9): Deckkraft Fläche text-primary text-secondary text-muted 1,00 #3dddc9 1,58 1,54 2,21 0,20 #10302d 13,18 5,41 3,77 0,14 #0d2321 15,27 6,27 4,37 0,12 #0c1f1d 15,90 6,53 4,55 <- gewählt 0,10 #0b1b1a 16,48 6,76 4,72 Warum so vorsichtig: das Dashboard ist der eine Ort, an dem NICHT vorher feststeht, was auf dem Hintergrund liegt. Jede eingeloggte Seite bringt eigenen Inhalt mit, und nicht jeder steht in einer Karte. Der Wert muss also für den ungünstigsten Fall stimmen, nicht für den, den man gerade vor sich hat. Wer den Verlauf dort kräftiger will, braucht zuerst eine deckende Fläche unter dem Inhalt - das ist eine Gestaltungsfrage, keine CSS-Zeile. */ .seiten-grund--ruhig { opacity: 0.12; } /* ── Alles hier ist für einen dunklen Grund gerechnet ────────────────── Der Shader in verlauf.js hat vier fest verdrahtete Farben, das Standbild ist ein Bild davon, und der gemessene hellste Bildpunkt ganz oben gilt genau für diese Fassung. Bis zum 2026-08-28 stand hier die Brücke zum hellen Modus: dort wurden Standbild und Leinwand abgeschaltet, und es blieb var(--color-bg-base). AdenAI ist seit Fahrplan 523 durchgehend dunkel, den Fall gibt es nicht mehr. */