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

CLAUDE.md

@@ -119,7 +119,18 @@ Funktion, sie ist die einzige Stelle, an der aus JSON HTML entsteht.
   Quelle für Termine-Badges und Hero-Beschriftung) und `upcoming_highlights(3)` (die nächsten
   Termine für den Startseiten-Hero, s. Hero-Regel).
 - **CSS:** 6 Dateien als `<link>` in fester Reihenfolge: tokens → reset → base → layout → components →
-  utilities. Kein `@import`, kein Inline-Style. Komponenten-Styles in `components.css` mit
+  utilities. Kein `@import`, **kein Inline-Style — die CSP erzwingt das, und zwar nur in
+  Produktion.** `default-src 'self'` ohne `style-src` heißt: der Browser verwirft jedes
+  `style`-Attribut und jeden `<style>`-Block stillschweigend. Lokal fällt das **nie** auf,
+  weil `php -S` keine `.htaccess` liest. Genau so blieben die Banner-Slides beim ersten
+  Deploy schwarz (31.07.2026): die Komponente setzte `style="--banner-bg: url(…)"`.
+  **Die zwei Auswege, wenn ein Wert aus `data/*.json` ins Aussehen muss:**
+  ein **Bild** wird ein `<img>` (die CSP erlaubt `img-src 'self' data:`, und `srcset`
+  gibt es gratis dazu), eine **Farbe** wird ein Token in `tokens.css` plus eine Klasse in
+  `components.css`, und die JSON nennt nur den Namen (`"accent": "breadcrumb"`).
+  `bin/preflight.php` bricht mit Fehler ab, wenn irgendwo unter `app/` ein `style`-Attribut
+  auftaucht. Per JavaScript gesetzte Styles (`element.style.…`) sind nicht betroffen.
+  Komponenten-Styles in `components.css` mit
   Banner-Kommentaren (`/* === hero === */`).
   **Kontext-Regeln setzen Custom Properties, kein Layout.** Wenn eine Komponente in einem Kontext
   anders aussehen soll, gehört auf `.kontext .komponente` nur die Variable (`--crest-size`,