From ba56add6789c233a74219318818f3f4b1c71c00b Mon Sep 17 00:00:00 2001
From: Umut Kantarci <info@kant-it.de>
Date: Sat, 12 Sep 2026 14:16:08 +0200
Subject: [PATCH] Browsertests wiederhergestellt; drei echte Fehler gefunden
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Playwright-Editortest war durch den Editorumbau kaputt: er
steuerte die abgeschafften Auswahllisten. Umgeschrieben auf die
freien Bedienelemente - Einheitenfelder, Vererbung über drei Geräte,
einzelnes Zurücksetzen, Palettenfarbe, Abstand je Seite, Hover-Regel,
freie Rasterspalten und die weiter vorhandenen Bewegungseffekte.

Dabei kamen drei Fehler heraus, die ohne Browserlauf unsichtbar sind:

1. Die frei gestalteten Werte wirkten in der Editorvorschau gar
   nicht. Ein srcdoc-Iframe erbt die Richtlinie des einbettenden
   Dokuments, und die Verwaltung verbietet Inline-Styles - das
   erzeugte style-Element wurde stillschweigend verworfen.
   Ausgeliefert wurde es korrekt, nur die Vorschau log. Jetzt als
   inertes template plus adoptedStyleSheets.
2. Die Einrückung der Unterseiten in der Seitenliste hat nie
   funktioniert; sie lief über ein style-Attribut, das dieselbe
   Richtlinie verwirft. Jetzt über Klassen.
3. Das Theme setzte alle Links auf die Akzentfarbe und überschrieb
   die kontextabhängigen Farben: 3,08:1 auf dunklem Grund. Die Regel
   gilt jetzt nur für Links in Textblöcken, die voreingestellte
   Linkfarbe liegt auf allen hellen Tönen über 4,5:1.

Geprüft: 155 PHP-Tests / 579 Assertions unter PHP 8.2.12 und 8.4.22,
15 JavaScript-Modelltests, vollständiger Editortest mit axe (null
Verstöße) und Lighthouse 13.4.1 mit je drei Läufen mobil und Desktop,
alle fünf Kategorien 100.

Offen: npm run test:browser schlägt wegen eines Inhalts fehl -
/grundlagen trägt einen im Editor gesetzten Textblock mit 2,75:1.
Nicht verändert, weil es eine Nutzerentscheidung ist.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/ARCHITECTURE.md                          | 12 +++
 docs/QUALITY.md                               | 15 ++++
 docs/STATUS.md                                | 17 ++--
 public/assets/admin.css                       |  2 +
 public/assets/design-panel.js                 | 15 ++--
 public/assets/editor.js                       | 30 +++++--
 scripts/editor-check.mjs                      | 83 ++++++++++++++++---
 src/Content/Theme.php                         |  7 +-
 src/Controller/EditorController.php           |  4 +-
 .../AdminHeadersSubscriber.php                |  4 +-
 templates/admin/pages.html.twig               |  4 +-
 templates/page.html.twig                      |  8 +-
 12 files changed, 169 insertions(+), 32 deletions(-)

diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
index da26799..9880908 100644
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -256,3 +256,15 @@ Welche Blöcke direkt bearbeitbar sind, steht in einer Tabelle: Überschrift und
 **Kontrast ist eine Warnung, kein Verbot.** Der Plan verlangt eine Kontrastprüfung, nicht Bevormundung. Das Panel berechnet das Verhältnis zwischen wirksamer Text- und Hintergrundfarbe nach WCAG 2.1 – Palettenverweise werden dafür aufgelöst – und meldet drei Stufen: ab 4,5:1 in Ordnung, ab 3:1 nur für großen Text, darunter zu wenig. Gespeichert wird trotzdem, was eingestellt wurde.
 
 **Gestaltungsvorlagen liegen im Theme**, nicht im Dokument, denn sie gelten seitenübergreifend. Eine Vorlage wird mit demselben Compiler geprüft wie ein Blockstil, sodass über diesen Weg kein Wert hereinkommt, für den ein Block abgewiesen würde. Das Speichern der Palette lässt die Vorlagen unberührt und umgekehrt. Zusätzlich lässt sich eine Gestaltung innerhalb der Sitzung von Block zu Block kopieren; beides ersetzt die Gestaltung des Ziels vollständig, statt sie zu vermischen – ein halb übernommener Look wäre schwerer zu verstehen als ein ganzer.
+
+## ADR 021 – Die erzeugten Stile in der Editorvorschau (12.09.2026)
+
+Beim Wiederherstellen des Browsertests kam heraus, dass **die frei gestalteten Werte in der Editorvorschau überhaupt nicht wirkten**. Der Grund liegt an einer Stelle, die man ohne Browserlauf nicht sieht: ein `srcdoc`-Iframe erbt die Sicherheitsrichtlinie des einbettenden Dokuments. Die Verwaltung verbietet Inline-Styles, also wurde das erzeugte `<style>` in der Vorschau stillschweigend verworfen. Ausgeliefert wurde es korrekt, nur die Vorschau log.
+
+Die Vorschau liefert das Stylesheet deshalb als **inertes `<template>`**, das keine Richtlinie verletzt, und der Editor wendet es als *constructed stylesheet* über `adoptedStyleSheets` an. Das ist keine Quelle im Sinne der Richtlinie, braucht also weder `unsafe-inline` noch einen Hash, und die Konsole bleibt sauber. Öffentliche Seiten bekommen weiterhin ein echtes `<style>`, erlaubt über seinen eigenen Hash.
+
+Die Verwaltung erlaubt zusätzlich die Schrifthosts, damit die Vorschau dieselbe Schrift zeigt wie die veröffentlichte Seite. Alles andere bleibt so eng wie auf der öffentlichen Seite.
+
+Zwei weitere Fehler derselben Ursache wurden dabei gefunden: die Einrückung der Unterseiten in der Seitenliste lief über ein `style`-Attribut und wurde ebenfalls verworfen – die Hierarchie sah immer flach aus. Sie nutzt jetzt Klassen. Und das Theme setzte **alle** Links auf die Akzentfarbe und überschrieb damit die kontextabhängigen Farben; auf dunklem Grund ergab das 3,08:1. Die Regel gilt jetzt nur für Links in Textblöcken, und die Voreinstellung für Linkfarbe ist ein dunklerer Verwandter des Akzents, der auf allen hellen Tönen über 4,5:1 liegt.
+
+Bewegungseffekte bleiben als eigener Abschnitt im Panel für jeden Block erhalten: Schatten-, Hover- und Einblendungsvorlagen sind Keyframes und lassen sich mit den freien Deklarationen nicht ausdrücken. Die alten Tokenwerte erscheinen dagegen nur noch dort, wo eine Seite sie schon trägt.
diff --git a/docs/QUALITY.md b/docs/QUALITY.md
index b905945..53b6f54 100644
--- a/docs/QUALITY.md
+++ b/docs/QUALITY.md
@@ -1,5 +1,20 @@
 # Qualitätsbericht – erster ausführbarer Prototyp
 
+## Ergänzung: Browsertests wiederhergestellt, 12.09.2026
+
+- **155 PHP-Tests / 579 Assertions** unter PHP 8.2.12 und PHP 8.4.22, **15 JavaScript-Modelltests** und erstmals seit dem Editorumbau wieder der **vollständige Playwright-Editortest**.
+- Der Editortest war durch den Umbau kaputt: er steuerte die abgeschafften Auswahllisten. Er wurde auf die freien Bedienelemente umgeschrieben und prüft jetzt Einheitenfelder, Vererbung über drei Geräte, einzelnes Zurücksetzen, Palettenfarbe, Abstand je Seite, die Hover-Regel, freie Rasterspalten und die Bewegungseffekte.
+- **axe-core: null Verstöße** auf Login, Seitenliste, Editor in Desktop- und Mobilbreite, Medienauswahl und der bearbeiteten veröffentlichten Seite.
+- **Lighthouse 13.4.1: je drei Läufe mobil und Desktop auf der Startseite, alle fünf Kategorien 100** – mit Theme-System, gehashtem Stylesheet und den neuen Blöcken.
+
+**Drei echte Fehler, die nur der Browserlauf gezeigt hat:**
+
+1. **Die frei gestalteten Werte wirkten in der Editorvorschau überhaupt nicht.** Ein `srcdoc`-Iframe erbt die Richtlinie des einbettenden Dokuments; die Verwaltung verbietet Inline-Styles, also wurde das erzeugte `<style>` stillschweigend verworfen. Ausgeliefert wurde es korrekt – die Vorschau log. Behoben über ein inertes `<template>` plus `adoptedStyleSheets`.
+2. **Die Einrückung der Unterseiten in der Seitenliste hat nie funktioniert**, weil sie über ein `style`-Attribut lief, das dieselbe Richtlinie verwirft. Die Hierarchie sah immer flach aus. Jetzt über Klassen.
+3. **Das Theme setzte alle Links auf die Akzentfarbe** und überschrieb die kontextabhängigen Farben: 3,08:1 auf dunklem Grund, 4,36:1 im Fußbereich. Die Regel gilt jetzt nur für Links in Textblöcken, und die voreingestellte Linkfarbe liegt auf allen hellen Tönen über 4,5:1.
+
+**Eine offene Feststellung im Inhalt:** `npm run test:browser` schlägt fehl, weil `/grundlagen` einen im Editor gesetzten Textblock in `#d08080` auf hellem Grund trägt – 2,75:1, unter der AA-Schwelle. Die Revisionen stammen aus dieser Sitzung und nicht aus einem Testlauf (die Tests arbeiten auf eigenen Datenbanken). Die Farbe wurde **nicht** verändert, weil sie eine Nutzerentscheidung ist. Die Kontrastwarnung im Editor meldet genau diesen Fall.
+
 ## Ergänzung: Direktbearbeitung, Kontrastwarnung, Vorlagen, 12.09.2026
 
 - **155 PHP-Tests / 579 Assertions** unter PHP 8.2.12 und PHP 8.4.22 erfolgreich, dazu **15 JavaScript-Modelltests**.
diff --git a/docs/STATUS.md b/docs/STATUS.md
index 05b0d6b..18994ce 100644
--- a/docs/STATUS.md
+++ b/docs/STATUS.md
@@ -1,6 +1,6 @@
 # Projektstatus
 
-Stand: 12.09.2026. Arbeitstitel Kant CMS. **Direktbearbeitung in der Vorschau, Kontrastwarnung, Gestaltungsvorlagen und Bildauswahl für Hintergrundbilder. Der Editor gestaltet frei statt über feste Auswahllisten: eigene Farbpalette, Schriften, und jede Eigenschaft je Block, je Gerät und für den Hover-Zustand frei einstellbar (Dokumentschema v10). SEO-Grundlage mit Sitemap, robots.txt, Weiterleitungen und strukturierten Daten (Arbeitspaket E). Formulare mit serverseitiger Validierung, Einwilligung, E-Mail-Versand und Spamschutz (Arbeitspaket D). Tabs als fortschreitende Verbesserung mit JavaScript (Dokumentschema v7). Zehn neue Blöcke für die Abschnitte der Pilotstartseite (Arbeitspaket C). Beiträge mit Datum, Autor, Auszug, Beitragsbild, Kategorien, Schlagwörtern, Archiven, einbettbarer Beitragsliste und RSS (Arbeitspaket B). Menüs mit Seiten-, Anker- und externen Zielen ersetzen die fest verdrahtete Navigation (Arbeitspaket A). Seiten und Beiträge lassen sich im Browser anlegen und löschen, mit Adresshierarchie bis vier Ebenen.** Die vollständige Phase-1-Abnahme bleibt wegen des fehlenden UX-Builder-Referenzabgleichs offen.
+Stand: 12.09.2026. Arbeitstitel Kant CMS. **Browsertests wiederhergestellt und erweitert; dabei drei echte Fehler gefunden und behoben, darunter die in der Vorschau wirkungslose Gestaltung. Direktbearbeitung in der Vorschau, Kontrastwarnung, Gestaltungsvorlagen und Bildauswahl für Hintergrundbilder. Der Editor gestaltet frei statt über feste Auswahllisten: eigene Farbpalette, Schriften, und jede Eigenschaft je Block, je Gerät und für den Hover-Zustand frei einstellbar (Dokumentschema v10). SEO-Grundlage mit Sitemap, robots.txt, Weiterleitungen und strukturierten Daten (Arbeitspaket E). Formulare mit serverseitiger Validierung, Einwilligung, E-Mail-Versand und Spamschutz (Arbeitspaket D). Tabs als fortschreitende Verbesserung mit JavaScript (Dokumentschema v7). Zehn neue Blöcke für die Abschnitte der Pilotstartseite (Arbeitspaket C). Beiträge mit Datum, Autor, Auszug, Beitragsbild, Kategorien, Schlagwörtern, Archiven, einbettbarer Beitragsliste und RSS (Arbeitspaket B). Menüs mit Seiten-, Anker- und externen Zielen ersetzen die fest verdrahtete Navigation (Arbeitspaket A). Seiten und Beiträge lassen sich im Browser anlegen und löschen, mit Adresshierarchie bis vier Ebenen.** Die vollständige Phase-1-Abnahme bleibt wegen des fehlenden UX-Builder-Referenzabgleichs offen.
 
 Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt. Noch kein Remote und kein Push.
 
@@ -25,6 +25,10 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 - Auf ausdrücklichen Nutzerwunsch lokalen Administrator `umut` mit zufälligem Passwort angelegt und im In-App-Browser erfolgreich angemeldet. Das Passwort steht in keiner Projektdatei; nur der Hash in der lokalen Datenbank. Keine Browser-Passwortspeicherung ausgelöst.
 - Seitenerstellung und -löschung im Browser: `POST /admin/pages` (ab `ROLE_EDITOR`) legt Seite oder Beitrag mit gültigem Startdokument als privaten Entwurf an; `POST /admin/pages/{id}/delete` (nur `ROLE_ADMIN`) entfernt eine Seite mit allen Revisionen. Beide mit CSRF-Token, Fehlermeldungen als Flash und ohne JavaScript bedienbar.
 - Adresshierarchie: neue Spalten `path`, `parent_id`, `type`, `created_at` über Migration `20260912000400`; websiteweit eindeutiger Pfad statt eindeutigem Slug, Tiefe bis vier Ebenen, Beiträge ohne Unterseiten, reservierte Adressen und Adressableitung aus dem Titel. Öffentliche Route bedient verschachtelte Pfade wie `/leistungen/webdesign`; ein Lookahead hält `/admin`, `/media` und `/assets` aus dem Auffangmuster.
+- **Die erzeugten Stile wirkten in der Editorvorschau nicht.** Ein `srcdoc`-Iframe erbt die Richtlinie der Verwaltung, die Inline-Styles verbietet; das Stylesheet wurde stillschweigend verworfen. Die Vorschau liefert es jetzt als inertes `<template>`, der Editor wendet es über `adoptedStyleSheets` an. Ausgeliefert wurde es die ganze Zeit korrekt – nur die Vorschau log.
+- **Die Einrückung der Unterseiten in der Seitenliste hat nie funktioniert**: sie lief über ein `style`-Attribut, das dieselbe Richtlinie verwirft. Jetzt über Klassen.
+- **Das Theme überschrieb alle Linkfarben** und erzeugte damit 3,08:1 auf dunklem Grund. Die Regel gilt jetzt nur für Links in Textblöcken; die voreingestellte Linkfarbe `#a4510f` liegt auf allen hellen Tönen über 4,5:1.
+- Bewegungseffekte (Schatten, Hover, Einblendung) bleiben als eigener Panelabschnitt für jeden Block: sie sind Keyframes und lassen sich mit freien Deklarationen nicht ausdrücken. Die alten Tokenwerte erscheinen nur noch, wo eine Seite sie trägt.
 - **Direktbearbeitung in der Vorschau:** Doppelklick auf Überschrift, Text, Zitat, Aufruf-Band, Symbolkarte, Akkordeon-Eintrag, Tab-Titel oder Kennzahl bearbeitet den Text an Ort und Stelle; Escape beendet, Eingaben werden zu einem Undo-Schritt zusammengefasst. Die Vorschau führt dabei weiterhin kein eigenes JavaScript aus – der Editor greift in ihr Dokument. Eine Schaltfläche im Panel startet dasselbe ohne Maus.
 - **Kontrastwarnung** im Designpanel: Verhältnis zwischen wirksamer Text- und Hintergrundfarbe nach WCAG 2.1 mit drei Stufen. Eine Warnung, kein Verbot.
 - **Gestaltungsvorlagen** im Theme: eine Gestaltung unter einem Namen speichern und auf jedem Block jeder Seite anwenden, dazu Kopieren und Einfügen zwischen Blöcken innerhalb der Sitzung. Vorlagen werden mit demselben Compiler geprüft wie Blockstile.
@@ -44,9 +48,11 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 
 ## Geprüft
 
-- 155 PHP-Tests / 579 Assertions unter PHP 8.2.12 und 8.4.22 erfolgreich; zusätzlich 15 JavaScript-Modelltests. Abgedeckt sind Migration/Erhaltung, Versionen, ungültige Geräte-/Typ-/Design-/Effektwerte, Vererbung/Reset/Undo, Vorlage-/Galerie-IDs, Uploadvalidierung und Neuencodierung, Metadatenkonflikte, Archivierung sowie sichere Bildquellen.
+- 155 PHP-Tests / 579 Assertions unter PHP 8.2.12 und 8.4.22 erfolgreich; zusätzlich 15 JavaScript-Modelltests und der vollständige Playwright-Editortest. Abgedeckt sind Migration/Erhaltung, Versionen, ungültige Geräte-/Typ-/Design-/Effektwerte, Vererbung/Reset/Undo, Vorlage-/Galerie-IDs, Uploadvalidierung und Neuencodierung, Metadatenkonflikte, Archivierung sowie sichere Bildquellen.
 - Neu geprüft (15 Tests): privater Entwurf nach dem Anlegen, verschachtelte Pfade mit gleichem Slug unter verschiedenen Eltern, abgewiesene Adressen (Großbuchstaben, Schrägstrich, leer, reserviert, unbekannter Typ, fehlendes Elternteil) ohne Schreibzugriff, doppelte Adresse, Tiefengrenze, Beiträge ohne Unterseiten, Löschen mit allen Revisionen samt Schutz für Elternseiten und veraltete Versionen, sowie dass die CMS-Routen nicht vom öffentlichen Auffangmuster verschluckt werden. Über HTTP zusätzlich: anonyme Schreibversuche, CSRF für Anlegen und Löschen, Adressableitung aus dem Titel, kein Löschangebot und HTTP 403 für die Editorrolle, erfolgreiches Löschen als Administrator.
-- **Im laufenden Editor durchgespielt** (Nutzerwunsch, erstmals für den neuen Editor): Doppelklick setzt das Element auf `contenteditable="plaintext-only"`, eine Eingabe landet im Modell (Speicherstatus wechselt auf „Ungespeicherte Änderungen“, der Strukturbaum zeigt den neuen Text), und das Verlassen beendet die Bearbeitung sauber. Die Kontrastwarnung meldete bei `#cccccc` auf `#ffffff` korrekt „Kontrast 1.6:1 – zu wenig“. Die Schaltflächen zum Kopieren und Einfügen erscheinen mit richtigem Aktivierungszustand. Die Teständerungen wurden verworfen und nicht gespeichert.
+- **Der vollständige Browser-End-to-End-Test läuft wieder und deckt jetzt das neue System ab.** `npm run test:editor` war durch den Umbau kaputt (er steuerte die abgeschafften Auswahllisten) und wurde auf die freien Bedienelemente umgeschrieben: Einheitenfelder, Vererbung über drei Geräte, einzelnes Zurücksetzen, Palettenfarbe, Abstand je Seite, Hover-Regel über den Template-Weg, freie Rasterspalten und die weiterhin vorhandenen Bewegungseffekte. **axe meldet null Verstöße** auf Login, Seitenliste, Editor in Desktop- und Mobilbreite, Medienauswahl und der bearbeiteten veröffentlichten Seite.
+- **Lighthouse 13.4.1 auf der Startseite mit dem neuen Theme-System: je drei Läufe mobil und Desktop, alle fünf Kategorien 100.** Das ist die erste Messung seit dem Umbau des Editors.
+- **Im laufenden Editor durchgespielt:** Doppelklick setzt das Element auf `contenteditable="plaintext-only"`, eine Eingabe landet im Modell (Speicherstatus wechselt auf „Ungespeicherte Änderungen“, der Strukturbaum zeigt den neuen Text), und das Verlassen beendet die Bearbeitung sauber. Die Kontrastwarnung meldete bei `#cccccc` auf `#ffffff` korrekt „Kontrast 1.6:1 – zu wenig“. Die Schaltflächen zum Kopieren und Einfügen erscheinen mit richtigem Aktivierungszustand. Die Teständerungen wurden verworfen und nicht gespeichert.
 - Gestaltungsvorlagen über HTTP geprüft: anonymer Zugriff führt zur Anmeldung, CSRF-Token ist Pflicht, ein Stil mit eingeschleuster Deklaration und ein leerer Name werden mit HTTP 422 abgewiesen ohne zu schreiben, Speichern und Entfernen funktionieren, und das Designpanel erhält Vokabular, Palette und Vorlagen aus einer Quelle.
 - Freie Gestaltung geprüft: ein v10-Dokument mit Farben, Abständen je Seite, Ecken je Ecke, Schatten, Hover und eigenem Mobilwert wird unverändert gespeichert und zu blockgenauem CSS samt Media Query und Hover-Regel. **Vierzehn abgewiesene Eingaben** schreiben nichts: unbekannte Eigenschaft, unbekanntes Gerät, Farbe als Wort, Farbe als Funktion, Länge ohne Einheit, Länge als `calc()`, ein eingeschleustes `;position:fixed`, Auswahlwert außerhalb der Liste, Zahl außerhalb des Bereichs, Seitenwert als Einzelwert, unbekannte Seite, Hover auf einer Eigenschaft ohne Hover, Schriftschlüssel mit Anführungszeichen und Hintergrundbild als Pfad. Zusätzlich geprüft, dass freie Stile Schema v10 verlangen.
 - Sicherheitsrichtlinie geprüft: das erzeugte Stylesheet wird über seinen eigenen SHA-256-Hash erlaubt, `unsafe-inline` kommt nicht vor und Skripte bleiben aus. Ohne Google-Schrift wird kein fremder Host erlaubt und keiner kontaktiert; mit Google-Schrift erscheinen `fonts.googleapis.com` in `style-src` und `fonts.gstatic.com` in `font-src`.
@@ -79,7 +85,8 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 - Gestaltung über geprüfte Tokens, keine beliebigen Pixelwerte, eigenen Schriften oder freien Farben. Noch keine Inline-Textbearbeitung, Formulare, dynamischen Menüs, Plugin-/Themeverwaltung oder WordPress-Import. Abschnittsvorlagen sind lokale Blockrezepte, keine globale Templateverwaltung.
 - Mediathek derzeit für statische Bilder: keine Videos/PDFs/SVGs, Lightbox/Slideshow, freie Bildzuschnitte, Ordner, Paginierung oder physische Löschung. Bild-URLs sind öffentlich; Archivieren schützt keine vertraulichen Dateien. Originale werden durch optimierte Varianten ersetzt. Einblendungen starten beim Laden, nicht beim Scrollen.
 - Sektionen bieten die vorhandenen Farb-/Breitentokens geräteübergreifend. Benutzerverwaltung und Passwortänderung sind noch nicht als Browseroberfläche verfügbar.
-- Der neue Editor ist über das DOM und über gezielte Abläufe geprüft, aber **nach wie vor ohne axe- und Lighthouse-Messung** und ohne Erprobung mit einem Screenreader. Bei der Direktbearbeitung wiegt das besonders: dass der Fokus sinnvoll wandert und der Zustandswechsel angekündigt wird, ist nicht nachgewiesen.
+- **`npm run test:browser` schlägt derzeit fehl** – nicht wegen des Codes, sondern wegen eines Inhalts: die Seite `/grundlagen` trägt einen im Editor gesetzten Textblock in `#d08080` auf hellem Grund, 2,75:1, unter der AA-Schwelle. Die Kontrastwarnung im Editor meldet genau das. Die Farbe wurde bewusst **nicht** verändert, weil sie eine Nutzerentscheidung ist.
+- Weiterhin keine Erprobung mit einem Screenreader. Bei der Direktbearbeitung wiegt das: dass der Fokus sinnvoll wandert und der Zustandswechsel angekündigt wird, ist durch axe nicht abgedeckt.
 - Gestaltungsvorlagen lassen sich in der Oberfläche nur anlegen und anwenden, nicht umbenennen; das Entfernen geht bisher nur über die Schnittstelle. Es gibt keine Vorschau einer Vorlage.
 - SEO-Titel und -Beschreibung sind weiterhin die Dokumentfelder; getrennte SEO-Titel gibt es nicht. Das Vorschaubild wird über seine Mediathek-ID eingetragen und noch nicht als `og:image` aufgelöst. Weiterleitungen werden nur bei genauer Übereinstimmung des Pfades gefunden, ohne Muster und ohne Berücksichtigung von Abfrageparametern; Seiten umbenennen erzeugt noch keine automatische Weiterleitung (Paket F).
 - **Dateiuploads in Formularen fehlen** – Anhänge brauchen einen nicht öffentlichen Ablageort mit Zugriffsschutz und eine eigene Typprüfung; Begründung in ADR 017. Ebenfalls offen: Formulare lassen sich nicht löschen oder umbenennen, Einsendungen nicht exportieren oder löschen, und es gibt keine Aufbewahrungsfrist. Der tatsächliche E-Mail-Versand ist nie ausgeführt worden: die Tests nutzen einen Transport, der nichts sendet.
@@ -97,7 +104,7 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 
 ## Nächster konkreter Schritt
 
-Den Editor mit axe und einem Screenreader prüfen, Gestaltungsvorlagen in der Oberfläche verwalten und die Direktbearbeitung auf weitere Textstellen ausdehnen. Danach Arbeitspaket F aus `docs/AUSBAUPLAN.md`: Seiten umbenennen und verschieben mit Aktualisierung aller Kindpfade und automatischer Weiterleitung, frei wählbare Startseite, geplantes Veröffentlichen, Revisionsliste mit Wiederherstellung und ein Papierkorb statt sofortigem Löschen.
+Die Textfarbe auf `/grundlagen` mit Umut klären, damit die öffentliche Prüfung wieder grün ist. Danach den Editor mit einem Screenreader prüfen, Gestaltungsvorlagen in der Oberfläche verwalten und die Direktbearbeitung auf weitere Textstellen ausdehnen. Danach Arbeitspaket F aus `docs/AUSBAUPLAN.md`: Seiten umbenennen und verschieben mit Aktualisierung aller Kindpfade und automatischer Weiterleitung, frei wählbare Startseite, geplantes Veröffentlichen, Revisionsliste mit Wiederherstellung und ein Papierkorb statt sofortigem Löschen.
 
 `kant-it.de` ist seit 12.09.2026 als Pilotwebsite bestimmt. Der öffentliche Bestand wurde erhoben (WordPress 7.1, Flatsome 3.20.9 mit eigenem Child-Theme, WPForms Lite, Complianz, Google-Rezensionen, eigenes Plugin `kant-nova-chat`) und die noch offene Arbeit daraus in `docs/AUSBAUPLAN.md` in elf Arbeitspakete aufgeschlüsselt. Erhoben wurde ausschließlich die öffentlich ausgelieferte Startseite; ohne Backendzugang sind Beitragsbestand, Formularkonfiguration, Benutzer und Flatsome-Shortcodes nicht inventarisierbar. Keine externe Veröffentlichung erfolgt.
 
diff --git a/public/assets/admin.css b/public/assets/admin.css
index 9997ca3..626c282 100644
--- a/public/assets/admin.css
+++ b/public/assets/admin.css
@@ -70,3 +70,5 @@
 .design-reuse button,.design-reuse select{width:100%}
 #preset-dialog label{margin-top:18px}
 #preset-dialog .field-error{margin:10px 0 0;font-size:12px;color:#8b2f22;font-weight:600}
+
+.page-card.depth-1{margin-left:28px}.page-card.depth-2{margin-left:56px}.page-card.depth-3{margin-left:84px}
diff --git a/public/assets/design-panel.js b/public/assets/design-panel.js
index 2f297f6..271f4f7 100644
--- a/public/assets/design-panel.js
+++ b/public/assets/design-panel.js
@@ -222,14 +222,19 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
 
   /** A warning, never a prohibition: the plan asks for a contrast check, not for tutelage. */
   const contrastNotice = (block, deviceName) => {
-    const foreground = resolveColor(effectiveStyle(block, deviceName, 'color').value);
-    const background = resolveColor(effectiveStyle(block, deviceName, 'backgroundColor').value);
+    const ownForeground = resolveColor(effectiveStyle(block, deviceName, 'color').value);
+    const ownBackground = resolveColor(effectiveStyle(block, deviceName, 'backgroundColor').value);
+    const foreground = ownForeground ?? resolveColor(schema.base.color);
+    const background = ownBackground ?? resolveColor(schema.base.backgroundColor);
     if (!foreground || !background) return null;
     const ratio = contrastRatio(foreground, background);
     const rounded = Math.round(ratio * 10) / 10;
-    if (ratio >= 4.5) return element('p', 'contrast-note contrast-ok', `Kontrast ${rounded}:1 – erfüllt AA für jede Textgröße.`);
-    if (ratio >= 3) return element('p', 'contrast-note contrast-warn', `Kontrast ${rounded}:1 – reicht nur für großen Text ab 24 px oder 18,7 px fett. Für Fließtext werden 4,5:1 verlangt.`);
-    return element('p', 'contrast-note contrast-bad', `Kontrast ${rounded}:1 – zu wenig. AA verlangt 4,5:1 für Fließtext und 3:1 für großen Text.`);
+    // Say what was compared: an ancestor section may set a different background than the theme,
+    // which this panel cannot see. A wrong-looking number is worse than an honest one.
+    const basis = ownBackground ? `Kontrast ${rounded}:1` : `Kontrast ${rounded}:1 gegen die Grundfarbe der Website`;
+    if (ratio >= 4.5) return element('p', 'contrast-note contrast-ok', `${basis} – erfüllt AA für jede Textgröße.`);
+    if (ratio >= 3) return element('p', 'contrast-note contrast-warn', `${basis} – reicht nur für großen Text ab 24 px oder 18,7 px fett. Für Fließtext werden 4,5:1 verlangt.`);
+    return element('p', 'contrast-note contrast-bad', `${basis} – zu wenig. AA verlangt 4,5:1 für Fließtext und 3:1 für großen Text.`);
   };
 
   const mediaControl = (key, value, apply) => {
diff --git a/public/assets/editor.js b/public/assets/editor.js
index 65a928f..f7e0638 100644
--- a/public/assets/editor.js
+++ b/public/assets/editor.js
@@ -252,17 +252,26 @@ function renderDesign(block, panel) {
   } else {
     panel.append(Object.assign(document.createElement('p'), { className: 'panel-note', textContent: 'Gestaltungsoptionen werden geladen …' }));
   }
-  const hasLegacy = Boolean(block.layout?.design) || Boolean(block.layout?.effects);
-  if (!hasLegacy) return;
+  // Entrance animations and the preset effects have no equivalent in the free system: they are
+  // keyframes, not declarations. They stay available for every block.
+  const effects = document.createElement('details'); effects.className = 'design-group';
+  const effectsSummary = document.createElement('summary'); effectsSummary.textContent = 'Bewegung und Effekte';
+  const effectsBody = document.createElement('div'); effectsBody.className = 'design-group-body';
+  effects.append(effectsSummary, effectsBody);
+  renderLegacyEffects(block, effectsBody);
+  panel.append(effects);
+
+  // The token values are superseded by the free panel and only shown where a page still has them.
+  if (!block.layout?.design) return;
   const details = document.createElement('details'); details.className = 'design-group';
   const summary = document.createElement('summary'); summary.textContent = 'Klassische Werte dieser Seite';
   const body = document.createElement('div'); body.className = 'design-group-body';
   details.append(summary, body);
-  renderLegacyDesign(block, body);
+  renderLegacyTokens(block, body);
   panel.append(details);
 }
 
-function renderLegacyDesign(block, panel) {
+function renderLegacyTokens(block, panel) {
   // Token based values from documents written before schema v10. Shown only while a block
   // still carries them, so older pages stay editable without cluttering the new panel.
   const hint = document.createElement('p'); hint.className = 'design-scope';
@@ -290,7 +299,9 @@ function renderLegacyDesign(block, panel) {
     history.change(doc => { const current = locate(doc.blocks, selected).block; for (const key of Object.keys(current.layout?.design?.[device] || {})) setDesign(doc, selected, device, key, ''); });
     changed();
   }); panel.append(reset);
-  const heading = document.createElement('h3'); heading.className = 'preset-heading'; heading.textContent = 'Effekte · alle Geräte'; panel.append(heading);
+}
+
+function renderLegacyEffects(block, panel) {
   for (const [key, label, choices] of [
     ['shadow', 'Schatten', { none: 'Keiner', soft: 'Weich', strong: 'Kräftig' }],
     ['hover', 'Hover-Effekt', { none: 'Keiner', lift: 'Leicht anheben', zoom: 'Bild vergrößern' }],
@@ -432,6 +443,15 @@ async function updatePreview() {
       if (sequence !== previewSequence) return;
       const doc = frame.contentDocument;
       const style = doc.createElement('link'); style.rel = 'stylesheet'; style.href = '/assets/preview.css'; doc.head.append(style);
+      // The preview delivers the generated stylesheet as inert template text (see page.html.twig).
+      // Applying it as a constructed stylesheet is not a source in the sense of the policy, so the
+      // preview shows exactly what the published page shows, without a single blocked style.
+      const generated = doc.getElementById('kant-styles')?.content.textContent ?? '';
+      if (generated.trim()) {
+        const sheet = new doc.defaultView.CSSStyleSheet();
+        sheet.replaceSync(generated);
+        doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
+      }
       doc.addEventListener('click', event => {
         event.preventDefault();
         if (inlineEdit) return;
diff --git a/scripts/editor-check.mjs b/scripts/editor-check.mjs
index 08dd576..9b6806c 100644
--- a/scripts/editor-check.mjs
+++ b/scripts/editor-check.mjs
@@ -87,7 +87,7 @@ try {
   assert.equal(await page.locator('#structure [data-block-id="headline"]').isVisible(), true);
   await page.getByRole('button', { name: 'Alle öffnen', exact: true }).click();
   await page.getByRole('button', { name: 'Design', exact: true }).click();
-  await page.getByLabel('Schriftgröße', { exact: true }).selectOption('hero');
+
   const frameValue = async (selector, property, expected) => {
     await page.waitForFunction(({ selector, property, expected }) => {
       const doc = document.querySelector('#preview').contentDocument;
@@ -95,35 +95,81 @@ try {
       return element && doc.defaultView.getComputedStyle(element)[property] === expected;
     }, { selector, property, expected });
   };
+  // Free values: a number plus a unit, not a fixed list. Filling and blurring fires the change.
+  const setLength = async (id, value, unit = 'px') => {
+    await page.locator(`#${id}`).fill(String(value));
+    await page.locator(`#${id}`).blur();
+    if (unit !== 'px') await page.locator(`#${id}`).locator('xpath=following-sibling::select').selectOption(unit);
+  };
+  const openGroup = async name => {
+    const group = page.locator('.design-group').filter({ has: page.locator('summary', { hasText: name }) });
+    if (!(await group.first().evaluate(element => element.open))) await group.first().locator('summary').click();
+  };
+
+  await setLength('style-fontSize', 72);
   await frameValue('#headline', 'fontSize', '72px');
   assert.equal(await page.locator('#preview').evaluate(element => element.contentWindow.innerWidth), 1240);
+
+  // Tablet and mobile inherit until they get an own value, and a reset makes them inherit again.
   await page.getByRole('button', { name: 'Tablet', exact: true }).click();
   await frameValue('#headline', 'fontSize', '72px');
-  await page.getByLabel('Schriftgröße', { exact: true }).selectOption('display');
+  await setLength('style-fontSize', 52);
   await frameValue('#headline', 'fontSize', '52px');
   await page.getByRole('button', { name: 'Mobil', exact: true }).click();
   await frameValue('#headline', 'fontSize', '52px');
-  await page.getByLabel('Schriftgröße', { exact: true }).selectOption('title');
+  await setLength('style-fontSize', 36);
   await frameValue('#headline', 'fontSize', '36px');
-  await page.getByRole('button', { name: 'Mobil-Werte zurücksetzen', exact: true }).click();
+  await page.getByRole('button', { name: 'Mobil zurücksetzen', exact: true }).click();
   await frameValue('#headline', 'fontSize', '52px');
   await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
   await frameValue('#headline', 'fontSize', '36px');
+
+  // A single value can be reset on its own, without touching the rest of the device.
   await page.getByLabel('Ausrichtung', { exact: true }).selectOption('center');
   await frameValue('#headline', 'textAlign', 'center');
+  await page.getByRole('button', { name: 'Ausrichtung zurücksetzen', exact: true }).click();
+  await frameValue('#headline', 'textAlign', 'start');
   await page.getByRole('button', { name: 'Desktop', exact: true }).click();
   await frameValue('#headline', 'fontSize', '72px');
-  await frameValue('#headline', 'textAlign', 'start');
+
+  // Colours: a palette reference resolves to the theme variable, a hex value is taken as it is.
+  await page.locator('#style-color').locator('xpath=following-sibling::select').selectOption('@link');
+  await frameValue('#headline', 'color', 'rgb(164, 81, 15)');
+  const contrast = page.locator('.contrast-note');
+  await contrast.waitFor();
+  assert.match(await contrast.textContent(), /Kontrast \d/, 'The panel reports a contrast ratio.');
+
+  // Per side spacing on the section, and a hover rule that also covers keyboard focus.
   await page.locator('#structure [data-block-id="hero"]').click();
-  await page.getByLabel('Innenabstand oben / unten', { exact: true }).selectOption('huge');
+  await page.getByRole('button', { name: 'Design', exact: true }).click();
+  await setLength('style-padding-top', 96);
   await frameValue('#hero', 'paddingTop', '96px');
   await page.getByRole('button', { name: 'Mobil', exact: true }).click();
-  await page.getByLabel('Innenabstand oben / unten', { exact: true }).selectOption('medium');
+  await setLength('style-padding-top', 32);
   await frameValue('#hero', 'paddingTop', '32px');
+  await page.getByRole('button', { name: 'Desktop', exact: true }).click();
+  // The background group is collapsed by default, and the readable field next to the swatch is
+  // what a person types into.
+  await openGroup('Hintergrund');
+  const hoverColor = page.locator('#style-backgroundColor-hover').locator('xpath=following-sibling::input[contains(@class,"color-text")]');
+  await hoverColor.fill('#112233');
+  await hoverColor.blur();
+  // The preview carries its stylesheet as template text, applied by the editor as a constructed
+  // stylesheet; the hover rule has to arrive through that path, not as a style element.
+  await page.waitForFunction(() => {
+    const doc = document.querySelector('#preview').contentDocument;
+    const template = doc?.getElementById('kant-styles')?.content.textContent ?? '';
+    const adopted = [...(doc?.adoptedStyleSheets ?? [])].some(sheet => [...sheet.cssRules].some(rule => rule.selectorText?.includes('#hero:hover')));
+    return template.includes('#hero:hover,#hero:focus-within') && adopted;
+  });
+  checks.push({ name: 'free styles: units, inheritance, single reset, palette colour, per-side spacing, hover rule', passed: true });
+
   await page.locator('[data-preset="columns"]').click();
   const presetSection = await page.locator('#structure .tree-item[aria-pressed="true"]').getAttribute('data-block-id');
   const presetRow = `#${presetSection} .block-row`;
   await frame.locator(presetRow).waitFor();
+  // The preset carries its own responsive tokens: one column on mobile, two from tablet up.
+  await page.getByRole('button', { name: 'Mobil', exact: true }).click();
   const columnCount = async expected => {
     await page.waitForFunction(({ selector, expected }) => {
       const doc = document.querySelector('#preview').contentDocument;
@@ -177,15 +223,30 @@ try {
   await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
   await page.locator(`#structure [data-block-id="${galleryId}"]`).click();
   await page.getByRole('button', { name: 'Design', exact: true }).click();
-  await page.getByLabel('Spaltenaufteilung', { exact: true }).selectOption('two');
+  await openGroup('Layout');
+  await page.locator('#style-gridColumns').fill('2');
+  await page.locator('#style-gridColumns').blur();
+  const columnsOfGallery = async expected => {
+    await page.waitForFunction(({ id, expected }) => {
+      const doc = document.querySelector('#preview').contentDocument;
+      const element = doc?.querySelector(`#${id}`);
+      return element && doc.defaultView.getComputedStyle(element).gridTemplateColumns.split(' ').length === expected;
+    }, { id: galleryId, expected });
+  };
+  await columnsOfGallery(2);
+  // Motion presets are keyframes, which the free system cannot express, so they stay available.
+  await openGroup('Bewegung und Effekte');
   await page.getByLabel('Schatten', { exact: true }).selectOption('soft');
   await page.getByLabel('Hover-Effekt', { exact: true }).selectOption('lift');
   await page.getByLabel('Einblendung beim Laden', { exact: true }).selectOption('rise');
   await frame.locator(`#${galleryId}.fx-entrance-rise`).waitFor();
   await page.getByRole('button', { name: 'Mobil', exact: true }).click();
-  await page.getByLabel('Spaltenaufteilung', { exact: true }).selectOption('one');
-  await frame.locator(`#${galleryId}.d-mobile-columns-one`).waitFor();
+  await openGroup('Layout');
+  await page.locator('#style-gridColumns').fill('1');
+  await page.locator('#style-gridColumns').blur();
+  await columnsOfGallery(1);
   await page.getByRole('button', { name: 'Desktop', exact: true }).click();
+  await columnsOfGallery(2);
   await page.emulateMedia({ reducedMotion: 'reduce' });
   await frameValue(`#${galleryId}`, 'animationName', 'none');
   await frameValue(`#${galleryId}`, 'transform', 'none');
@@ -258,7 +319,7 @@ try {
   assert.equal(await publicPage.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true);
   await publicPage.screenshot({ path: 'reports/editor/designed-public-mobile.png', fullPage: true });
   const contentAudit = await new AxeBuilder({ page: publicPage }).withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'best-practice']).analyze();
-  assert.deepEqual(contentAudit.violations.map(v => v.id), []);
+  assert.deepEqual(contentAudit.violations.map(v => v.id), [], JSON.stringify(contentAudit.violations.map(v => ({ id: v.id, nodes: v.nodes.map(n => ({ target: n.target, summary: n.failureSummary?.split('\n')[1] })) })), null, 1));
   checks.push({ name: 'edited public renderer accessibility', violations: 0 });
   await publicPage.close();
   checks.push({ name: 'add, duplicate, move, delete, undo, exact reload, separate publication, dialog focus', passed: true });
diff --git a/src/Content/Theme.php b/src/Content/Theme.php
index e14e8c4..802d6f2 100644
--- a/src/Content/Theme.php
+++ b/src/Content/Theme.php
@@ -31,6 +31,9 @@ final class Theme
             ['key' => 'ink', 'name' => 'Tinte', 'value' => '#203b34'],
             ['key' => 'mint', 'name' => 'Mint', 'value' => '#e4efb9'],
             ['key' => 'accent', 'name' => 'Akzent', 'value' => '#b55b12'],
+            // Darker sibling of the accent: #b55b12 reaches only 4.37:1 on the light tones and
+            // would fail AA for normal text. This one passes on paper, mint and white.
+            ['key' => 'link', 'name' => 'Links', 'value' => '#a4510f'],
         ],
         'fonts' => [
             ['key' => 'body', 'name' => 'Fließtext', 'family' => '', 'source' => 'system', 'weights' => [400, 600], 'fallback' => 'system-ui'],
@@ -43,7 +46,7 @@ final class Theme
             'lineHeight' => 1.6,
             'color' => '@ink',
             'backgroundColor' => '@paper',
-            'linkColor' => '@accent',
+            'linkColor' => '@link',
             'containerWidth' => '1240px',
             'headingScale' => 1.25,
         ],
@@ -264,7 +267,7 @@ final class Theme
         return sprintf(
             ':root{%s;--k-size:%s}.kant{font-family:var(--kf-%s);font-size:var(--k-size);line-height:%s;color:%s;background:%s}'
             .'.kant h1,.kant h2,.kant h3,.kant h4,.kant h5,.kant h6{font-family:var(--kf-%s)}'
-            .'.kant a{color:%s}.kant .shell{max-width:var(--k-container)}%s',
+            .'.kant .block-text a,.kant .post-excerpt a{color:%s}.kant .shell{max-width:var(--k-container)}%s',
             implode(';', $variables),
             $base['fontSize'],
             $base['fontFamily'],
diff --git a/src/Controller/EditorController.php b/src/Controller/EditorController.php
index 7213a91..a466897 100644
--- a/src/Controller/EditorController.php
+++ b/src/Controller/EditorController.php
@@ -84,6 +84,7 @@ final class EditorController extends AbstractController
             'colors' => $theme['colors'],
             'fonts' => $theme['fonts'],
             'presets' => $theme['presets'],
+            'base' => $theme['base'],
             'csrfToken' => $this->csrf->getToken('editor')->getValue(),
         ]);
     }
@@ -218,12 +219,13 @@ final class EditorController extends AbstractController
                 }
                 $this->validator->validate($document);
 
+                $theme = $this->theme->load();
                 $navigation = [];
                 foreach ($this->menus->all() as $slot => $menu) {
                     $navigation[$slot] = $this->menus->resolve($menu['items'], (string) $page['path']);
                 }
 
-                return $this->render('page.html.twig', ['page' => [...$page, 'document' => $document], 'canonical' => '', 'editing' => true, 'navigation' => $navigation, 'needsTabs' => false, 'pageStyles' => $this->theme->css($this->theme->load()).$this->styles->compileDocument($document), 'googleFonts' => $this->theme->googleFontsUrl($this->theme->load())]);
+                return $this->render('page.html.twig', ['page' => [...$page, 'document' => $document], 'canonical' => '', 'editing' => true, 'navigation' => $navigation, 'needsTabs' => false, 'pageStyles' => $this->theme->css($theme).$this->styles->compileDocument($document), 'googleFonts' => $this->theme->googleFontsUrl($theme)]);
             }
             if (!isset($body['expectedVersion']) || !is_int($body['expectedVersion']) || $body['expectedVersion'] < 0) {
                 throw new \InvalidArgumentException();
diff --git a/src/EventSubscriber/AdminHeadersSubscriber.php b/src/EventSubscriber/AdminHeadersSubscriber.php
index 3037bbb..ca72e15 100644
--- a/src/EventSubscriber/AdminHeadersSubscriber.php
+++ b/src/EventSubscriber/AdminHeadersSubscriber.php
@@ -23,6 +23,8 @@ final class AdminHeadersSubscriber implements EventSubscriberInterface
         $headers->set('X-Robots-Tag', 'noindex, nofollow');
         $headers->set('X-Content-Type-Options', 'nosniff');
         $headers->set('Referrer-Policy', 'same-origin');
-        $headers->set('Content-Security-Policy', "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' https:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'");
+        // The preview must show the same typeface as the published page, so the font hosts are
+        // allowed here as well. Everything else stays as narrow as on the public side.
+        $headers->set('Content-Security-Policy', "default-src 'self'; script-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'");
     }
 }
diff --git a/templates/admin/pages.html.twig b/templates/admin/pages.html.twig
index 8415887..f707401 100644
--- a/templates/admin/pages.html.twig
+++ b/templates/admin/pages.html.twig
@@ -55,7 +55,9 @@
     <div class="section-heading"><h2>Seiten <span class="count">{{ pages|length }}</span></h2><span class="muted">Entwürfe bleiben bis zur Veröffentlichung privat.</span></div>
     <div class="page-list">
     {% for page in pages %}
-        <article class="page-card" style="margin-left:{{ page.depth * 28 }}px">
+        {# A class, not a style attribute: the administration forbids inline styles, so an attribute
+           here would simply be dropped and the hierarchy would look flat. #}
+        <article class="page-card depth-{{ min(page.depth, 3) }}">
             <div class="page-icon" aria-hidden="true">{{ page.type == 'post' ? '✎' : '▤' }}</div>
             <div class="page-info">
                 <h3><a href="{{ path('admin_editor', {id: page.id}) }}">{{ page.title }}</a></h3>
diff --git a/templates/page.html.twig b/templates/page.html.twig
index ec933c3..fddee4b 100644
--- a/templates/page.html.twig
+++ b/templates/page.html.twig
@@ -22,7 +22,13 @@
     {# A data block, not a script: CSP script-src does not apply to application/ld+json. #}
     {% for block in structuredData|default([]) %}<script type="application/ld+json">{{ block|json_encode(constant('JSON_UNESCAPED_SLASHES') b-or constant('JSON_UNESCAPED_UNICODE'))|raw }}</script>
     {% endfor %}
-    {% if pageStyles|default('') %}<style>{{ pageStyles|raw }}</style>{% endif %}
+    {% if pageStyles|default('') %}
+        {# In the editor the preview inherits the administration's policy, which forbids inline
+           styles. The stylesheet therefore travels as inert template text and the editor applies
+           it as a constructed stylesheet – same result, no policy violation and a clean console. #}
+        {% if editing|default(false) %}<template id="kant-styles">{{ pageStyles|raw }}</template>
+        {% else %}<style>{{ pageStyles|raw }}</style>{% endif %}
+    {% endif %}
 </head>
 <body class="kant">
     <a class="skip-link" href="#main">Zum Inhalt springen</a>