Banner-Hintergründe CSP-fest: <img> statt Inline-Variable

Beim ersten Deploy blieben die Slides des Banner-Sliders schwarz. Ursache war
kein fehlendes Bild, sondern die CSP: public/.htaccess setzt
default-src 'self' ohne style-src, der Browser verwirft damit jedes
style-Attribut — und die Komponente lieferte Bild und Akzentfarbe genau so
(style="--banner-bg: url(…); --banner-accent: #6cbbbc"). Lokal war das
unsichtbar, weil php -S keine .htaccess liest.

Der Hintergrund ist jetzt ein <img class="ad-banner__bg"> über die bestehende
img-Komponente (CSP erlaubt img-src) und bringt srcset mit: das Handy lädt die
640er statt der 1600er, die erste Slide lädt eager mit fetchpriority. Der
dunkle Leseverlauf liegt auf ::before statt im background-image.

Die Akzentfarbe kann als beliebiger Hex-Wert nicht ohne Inline-Style in die
Seite. Sie steht deshalb als Token in tokens.css (wo Farben laut CLAUDE.md
hingehören), components.css bildet den Namen darauf ab, und banners.json nennt
nur noch "accent": "breadcrumb".

bin/preflight.php bricht ab, wenn unter app/ wieder ein style-Attribut
auftaucht — der Fehler wäre sonst erneut erst in Produktion sichtbar. Beim
Bauen dieser Wache zweimal selbst hineingetappt: ein Muster mit [^>]* bricht an
jedem schließenden PHP-Tag ab, und die Zeichenfolge dieses Tags beendet den
PHP-Modus auch in einem //-Kommentar (preflight gab ab dort seinen eigenen
Quelltext aus, php -l meldete nichts).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
2026-07-31 16:50:43 +02:00
parent e8296a465b
commit a3cfd4941d
8 changed files with 169 additions and 33 deletions

View File

@@ -11,6 +11,14 @@
--clr-accent-hsl: 356.7 94.8% 45.5%; /* dasselbe Rot als H S L */
--clr-accent-h: 356.7; /* nur der Farbton — die Dateiablage (/dateien)
leitet daraus ihre Flächen ab, siehe dateien.css */
/* Akzentfarben einzelner Werbe-Banner (Sponsor-CI statt Vereins-Rot).
Sie stehen hier und nicht in data/banners.json, weil ein Hex-Wert aus der JSON
nur per Inline-Style in die Seite käme — und den verwirft die CSP
(default-src 'self', kein style-src). Die JSON nennt nur den Namen
("accent": "breadcrumb"), components.css bildet ihn auf dieses Token ab.
Neuer Sponsor mit eigener CI = eine Zeile hier plus eine Klasse dort. */
--clr-banner-accent-breadcrumb: #6cbbbc;
--clr-bg: #222222; /* Grund-Hintergrund (mit Textur) */
--clr-bg-deep: #161616; /* abgesetzte Sektionen */
--clr-bg-footer: #000000;