From 7dc0be30ab5ad44be0a41adf55a4658e74fe0b50 Mon Sep 17 00:00:00 2001
From: Jan Sroka <github@jansroka.com>
Date: Wed, 8 Jul 2026 22:16:40 +0200
Subject: [PATCH 1/3] refactor(csp): remove inline styles and tighten style-src
 to 'self'

Moves the 6 inline style="..." attributes into CSS classes so the CSP can
drop 'unsafe-inline' from style-src:
- 5 per-project background tints on .projekt-block cards (projekte.html) ->
  .projekt-block--{impfen,labhive,coronika,dw,did} in custom.css
- text-align:end on the letter date (offenerbrief) -> .text-end
Colours/alignment unchanged.

CSP style-src is now `'self'` (was `'self' 'unsafe-inline'`). Verified: the
built _site has zero inline style attributes, on*= handlers, <style> blocks or
javascript: URIs, so nothing else needs the inline allowance. The new classes
survive PurgeCSS (they are referenced in the HTML). Build, html-proofer, and
prettier all pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 _includes/head.html               | 12 ++++++------
 _pages/offenerbrief-epa-2025.html |  2 +-
 _pages/projekte.html              | 10 +++++-----
 assets/css/custom.css             | 24 ++++++++++++++++++++++++
 4 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index 7e7c330..e028c2e 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -15,11 +15,11 @@
   embeds, and only same-origin CSS/images (verified at time of writing: no
   <script> tags, no external iframes, all assets under /assets/...).
 
-  style-src includes 'unsafe-inline' because several Webflow-exported pages
-  in _pages/ use inline style="..." attributes (e.g. _pages/projekte.html,
-  _pages/offenerbrief-epa-2025.html for background-color/text-align). A
-  stricter style-src without 'unsafe-inline' would break their layout, and a
-  CSP that breaks styling is worse than no CSP.
+  style-src is 'self' only (no 'unsafe-inline'): all styling lives in the
+  same-origin stylesheets. The few inline styling attributes that used to be on
+  Webflow-exported pages were moved into classes in custom.css so this
+  directive could be tightened. Do NOT reintroduce inline styling attributes,
+  inline style blocks, or on*= handlers — they would be blocked.
 
   X-Content-Type-Options, X-Frame-Options, and the CSP `frame-ancestors`
   directive are deliberately NOT included here: they are only honored by
@@ -34,7 +34,7 @@
 -->
 <meta
   http-equiv="Content-Security-Policy"
-  content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'">
+  content="default-src 'self'; img-src 'self' data:; style-src 'self'; font-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'">
 <meta name="referrer" content="strict-origin-when-cross-origin">
 
 <!-- title -->
diff --git a/_pages/offenerbrief-epa-2025.html b/_pages/offenerbrief-epa-2025.html
index 91c6436..3470765 100644
--- a/_pages/offenerbrief-epa-2025.html
+++ b/_pages/offenerbrief-epa-2025.html
@@ -18,7 +18,7 @@ <h1 class="single-page-title">
   <div class="block-content">
     <div class="">
       <div class="content-box">
-        <p style="text-align: end">14. Januar 2025</p>
+        <p class="text-end">14. Januar 2025</p>
         <p class="insurance-paragraph">Sehr geehrter Herr Bundesminister Lauterbach,</p>
 
         <p class="insurance-paragraph">
diff --git a/_pages/projekte.html b/_pages/projekte.html
index 6093b9b..8d5114c 100644
--- a/_pages/projekte.html
+++ b/_pages/projekte.html
@@ -35,7 +35,7 @@ <h3 class="insurance-title">Die Datenschnittstelle des Gesundheitsamts</h3>
       </div>
       <!-- block end -->
       <!-- block start -->
-      <div class="projekt-block" style="background-color: #fceed5;">
+      <div class="projekt-block projekt-block--impfen">
         <img src="/assets/images/impfen.png" height="60" width="63" alt="" class="_0margin">
         <h3 class="insurance-title">Impfterminvermittlung</h3>
         <p class="insurance-paragraph">
@@ -49,7 +49,7 @@ <h3 class="insurance-title">Impfterminvermittlung</h3>
       </div>
       <!-- block end -->
       <!-- block start -->
-      <div class="projekt-block" style="background-color: rgba(129, 198, 255, 0.61);">
+      <div class="projekt-block projekt-block--labhive">
         <img src="/assets/images/logo-green.bda867af.svg" height="60" width="189" alt="" class="_0margin">
         <h3 class="insurance-title">Testkapazitäten im Blick behalten</h3>
         <p class="insurance-paragraph">
@@ -59,7 +59,7 @@ <h3 class="insurance-title">Testkapazitäten im Blick behalten</h3>
       </div>
       <!-- block end -->
       <!-- block start -->
-      <div class="projekt-block" style="background-color: rgba(214, 205, 208, 0.61);">
+      <div class="projekt-block projekt-block--coronika">
         <img src="/assets/images/Element-4coronika.svg" height="60" width="184" alt="" class="_0margin">
         <h3 class="insurance-title">Ein Kontakttagebuch für die Gesundheit aller</h3>
         <p class="insurance-paragraph">
@@ -72,7 +72,7 @@ <h3 class="insurance-title">Ein Kontakttagebuch für die Gesundheit aller</h3>
       <!-- block end -->
       <!-- block start -->
 
-      <div class="projekt-block" style="background-color: #f2feff;">
+      <div class="projekt-block projekt-block--dw">
         <img src="/assets/images/Element-1dw.svg" height="60" width="173" alt="" class="_0margin">
         <h3 class="insurance-title">Meldepflicht. Einfach. Online.</h3>
         <p class="insurance-paragraph">
@@ -83,7 +83,7 @@ <h3 class="insurance-title">Meldepflicht. Einfach. Online.</h3>
       </div>
       <!-- block end -->
       <!-- block start -->
-      <div class="projekt-block" style="background-color: rgba(40, 0, 219, 0.09);">
+      <div class="projekt-block projekt-block--did">
         <img src="/assets/images/DID-Logo.svg" height="102" width="234" alt="" class="_0margin">
         <h3 class="insurance-title">Schnell. Einfach. Regional.</h3>
         <p class="insurance-paragraph">
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 4249d7f..4d942d0 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -17,3 +17,27 @@
 .skip-link:focus {
   left: 0;
 }
+
+/* Per-project card tints. Extracted from inline style="background-color: …"
+   attributes on the .projekt-block cards in _pages/projekte.html so the CSP
+   can drop 'unsafe-inline' from style-src. Colours are unchanged. */
+.projekt-block--impfen {
+  background-color: #fceed5;
+}
+.projekt-block--labhive {
+  background-color: rgba(129, 198, 255, 0.61);
+}
+.projekt-block--coronika {
+  background-color: rgba(214, 205, 208, 0.61);
+}
+.projekt-block--dw {
+  background-color: #f2feff;
+}
+.projekt-block--did {
+  background-color: rgba(40, 0, 219, 0.09);
+}
+
+/* Text alignment utility (was inline style="text-align: end"). */
+.text-end {
+  text-align: end;
+}

From d9f754b189ec52cf94bdd9edf4e588ae54ed81c3 Mon Sep 17 00:00:00 2001
From: Jan Sroka <github@jansroka.com>
Date: Wed, 8 Jul 2026 22:21:35 +0200
Subject: [PATCH 2/3] refactor(csp): remove unused Webflow icon font; tighten
 font-src to 'self'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The webflow-icons @font-face embedded a ~2.6 KB base64 TTF as a data: URI,
which was the only reason font-src needed `data:`. That icon font is unused:
no `w-icon-` class exists in any page (verified in source and built _site),
and PurgeCSS already strips it from production CSS.

Removed the @font-face block from webflow.css (the inert `.w-icon-*` rules are
left as-is — they match nothing and are purged in prod) and dropped `data:`
from font-src. All remaining fonts are the same-origin Inter webfont under
/assets/fonts/, so font-src is now `'self'`.

Verified: webflow.css still balanced/valid, Inter fonts intact, build +
purge-css + html-proofer + prettier pass, no data: font remains in _site, and
the project-card colours are unchanged in the purged production CSS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 _includes/head.html    | 8 +++++---
 assets/css/webflow.css | 7 -------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/_includes/head.html b/_includes/head.html
index e028c2e..0ce8554 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -29,12 +29,14 @@
   fronting the site with something that can inject headers (e.g. Cloudflare
   Transform Rules / a Worker).
 
-  font-src allows data: because the Webflow CSS embeds an icon font as a
-  data:application/x-font-ttf URI.
+  All fonts are same-origin (the Inter webfont under /assets/fonts/), so
+  font-src is 'self'. The unused Webflow icon font that was embedded as a
+  data: URI has been removed from webflow.css, so no data: font allowance is
+  needed.
 -->
 <meta
   http-equiv="Content-Security-Policy"
-  content="default-src 'self'; img-src 'self' data:; style-src 'self'; font-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'">
+  content="default-src 'self'; img-src 'self' data:; style-src 'self'; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'">
 <meta name="referrer" content="strict-origin-when-cross-origin">
 
 <!-- title -->
diff --git a/assets/css/webflow.css b/assets/css/webflow.css
index edd871a..0609276 100755
--- a/assets/css/webflow.css
+++ b/assets/css/webflow.css
@@ -1,10 +1,3 @@
-@font-face {
-  font-family: "webflow-icons";
-  src: url("data:application/x-font-ttf;charset=utf-8;base64,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")
-    format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
 [class^="w-icon-"],
 [class*=" w-icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */

From d1d4d634ecbee70c804e87b7578fccf3a421390b Mon Sep 17 00:00:00 2001
From: Jan Sroka <github@jansroka.com>
Date: Wed, 8 Jul 2026 22:22:00 +0200
Subject: [PATCH 3/3] docs(memory): update csp-policy note to reflect
 style-src/font-src 'self'

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 memory/csp-policy.md | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/memory/csp-policy.md b/memory/csp-policy.md
index 77a7c6e..47c6ffc 100644
--- a/memory/csp-policy.md
+++ b/memory/csp-policy.md
@@ -5,17 +5,19 @@ The site has no HTTP-header control (GitHub Pages), so the CSP is a `<meta http-
 Current policy:
 
 ```
-default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline';
-font-src 'self' data:; object-src 'none'; base-uri 'self'; form-action 'self'
+default-src 'self'; img-src 'self' data:; style-src 'self';
+font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'
 ```
 
 Why each non-obvious part is there:
 
-- **`style-src 'unsafe-inline'`** — several Webflow-exported pages (`_pages/projekte.html`, `_pages/offenerbrief-epa-2025.html`) use inline `style=` attributes.
-  Removing it breaks their layout; a CSP that breaks styling is worse than none.
-- **`font-src 'self' data:`** — `webflow.css` embeds an icon font as a `data:application/x-font-ttf` URI. Without `data:` the font is blocked (was a real
-  console error after the CSP first shipped).
-- **`img-src 'self' data:`** — same reason (data-URI images in the CSS).
+- **`style-src 'self'`** — no inline styles. The Webflow-exported pages originally had inline `style=` attributes (per-project card tints on `projekte.html`, a
+  `text-align` on `offenerbrief`); these were moved into classes in `custom.css` (`.projekt-block--*`, `.text-end`) so `'unsafe-inline'` could be dropped. Do
+  NOT reintroduce inline styles / `<style>` blocks / `on*=` handlers.
+- **`font-src 'self'`** — all fonts are the same-origin Inter webfont under `/assets/fonts/`. `webflow.css` used to embed an unused `webflow-icons` font as a
+  `data:application/x-font-ttf` URI (which forced `font-src data:`); that `@font-face` was removed since no `w-icon-` class is used anywhere, so `data:` is no
+  longer needed.
+- **`img-src 'self' data:`** — data-URI images still appear in the CSS, so this one keeps `data:`.
 
 Cannot be enforced via a meta tag (header-only — omitted to avoid console noise / false sense of security): `X-Content-Type-Options`, `X-Frame-Options`, and CSP
 `frame-ancestors`. Enforcing those needs a header-capable front (e.g. Cloudflare).