/* ══════════════════════════════════════════════════════════════════════════ 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-22 neu gemessen**, für die Partikelwelle (hintergrund.css, hintergrund.js). Der alte Wert #3dddc9 stammte vom bewegten Farbverlauf, den es seit dem 2026-08-21 nicht mehr gibt - geerbt wurde er deshalb nicht. Gemessen wurde am gerenderten Bild, nicht aus Farben hergeleitet: Chrome headless, 1360x860, force-device-scale-factor=1, die Palette mit `window.adenaiHintergrund.paletteSetzen(1)` auf Original festgehalten. Das ist der ungünstigste der beiden Zustände, und ohne das Festhalten müsste man auf den 90-Sekunden-Wechsel warten. 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. **Der Hintergrund ist kein zulässiger Textgrund** - alles, was auf ihm steht, braucht eine deckende Fläche. Genauso war es beim Vorgänger. Zum Einordnen, dieselbe Messung in gröberen Stufen (Original / Aurora): 99,9. Perzentil #fdfec3 / #79f0ff, hellster 8x8-Block #fdfdf8 / #7ef2f6. Auch die tragen keinen Text. Der helle Modus hat KEINE Leinwand (siehe hintergrund.js), dort liegt nur der CSS-Verlauf. Sein hellster Bildpunkt ist #f2f7fb, und der trägt jeden Textton frei (text-muted 5,69:1). Er steht hier nicht als Token, weil ihn niemand nachrechnet - und ein Token, das niemand liest, verwahrlost. Wer den Shader ändert, 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; } /* ── Im hellen Modus liegt hier nichts ──────────────────────────────────── Alles auf dieser Seite 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. Im hellen Modus werden Standbild und Leinwand deshalb abgeschaltet, es bleibt die Grundfläche var(--color-bg-base). **Die Regel dafür steht in `heller-modus.css`**, zusammen mit der Anleitung, wie man dort einen hellen Hintergrund einhängt. Sie steht dort und nicht hier, weil der ganze helle Modus in einer Datei liegen soll. Dieser Absatz ist die Brücke für den, der beim Hintergrund anfängt zu suchen - an dieser Datei ist dafür nichts zu tun. */