From a3cfd4941df5ab2771f544b0ae91333e51ef433b Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 16:50:43 +0200 Subject: [PATCH] =?UTF-8?q?Banner-Hintergr=C3=BCnde=20CSP-fest:=20=20?= =?UTF-8?q?statt=20Inline-Variable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 ü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) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- CLAUDE.md | 13 ++++- app/components/banner-slider.php | 53 ++++++++++++----- bin/preflight.php | 43 ++++++++++++++ data/banners.json | 31 ++++++++-- public/assets/css/components.css | 54 +++++++++++++----- public/assets/css/tokens.css | 8 +++ .../img/banners/breadcrumb-hero-1000.jpg | Bin 0 -> 49922 bytes .../img/banners/breadcrumb-hero-640.jpg | Bin 0 -> 25445 bytes 8 files changed, 169 insertions(+), 33 deletions(-) create mode 100644 public/assets/img/banners/breadcrumb-hero-1000.jpg create mode 100644 public/assets/img/banners/breadcrumb-hero-640.jpg diff --git a/CLAUDE.md b/CLAUDE.md index c2d1ed9..e26acb5 100644 --- a/CLAUDE.md +++ b/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 `` 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 `