Release 1.21.5

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

.claude/launch.json

@@ -79,6 +79,26 @@
       ],
       "port": 8094
     },
+    {
+      "name": "ebsolar",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/ebsolar.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/ebsolar-media'; $env:SITE_ORIGIN='http://127.0.0.1:8096'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8096 -t public bin/dev-router.php"
+      ],
+      "port": 8096
+    },
+    {
+      "name": "ebsolar-prod",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/ebsolar.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/ebsolar-media'; $env:SITE_ORIGIN='http://127.0.0.1:8097'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8097 -t public bin/dev-router.php"
+      ],
+      "port": 8097
+    },
     {
       "name": "immobilien-deeg-prod",
       "runtimeExecutable": "powershell",

README.md

@@ -4,9 +4,13 @@ Selbst betreibbares Block-CMS für PHP-Webhosting mit visuellem Editor nach dem
 
 Die übernommenen Originaldokumente sind `AGENTS.md` und `ENTWICKLUNGSPLAN.md`. Den tatsächlichen Stand enthält `docs/STATUS.md`, Entscheidungen und Datenmodell stehen in `docs/ARCHITECTURE.md`.
 
+## Bildecken unter Design (ab 1.21.0)
+
+Wie stark die Ecken der Bilder gerundet sind, steht jetzt unter **Design → Bildecken** und gilt für die ganze Website – Bilder, Galerien, Logoleisten und Beitragslisten. Vorgabe ist `12px` wie bisher, `0px` macht sie eckig. Ein einzelnes Bild lässt sich davon abweichend einstellen: im Editor beim ausgewählten Bild unter **Design → Bild → Bildecken**, dort auch je Gerät und je Ecke. Vorher stand die Rundung fest im Stylesheet und war in keinem Feld zu finden.
+
 ## Kaufmännisches Und und Zeilenumbrüche bleiben, wie sie sind (ab 1.20.1)
 
-**Behoben.** Ein Text ohne Auszeichnung wurde beim Speichern doppelt kodiert: aus `&` wurde `&amp;`, beim nächsten Speichern `&amp;amp;` – irgendwann stand die Entity sichtbar auf der Seite. Ebenso wuchsen Zeilenumbrüche: jedes zweite Speichern machte aus einem `<br>` zwei. Beides ist behoben, und wiederholtes Speichern ändert einen Text jetzt nicht mehr. Was bereits falsch gespeichert ist, räumt `php scripts/repair-doubled-entities.php` auf (erst Trockenlauf, dann `--schreiben`).
+**Behoben.** Ein Text ohne Auszeichnung wurde beim Speichern doppelt kodiert: aus `&` wurde `&amp;`, beim nächsten Speichern `&amp;amp;` – irgendwann stand die Entity sichtbar auf der Seite. Ebenso wuchsen Zeilenumbrüche: jedes zweite Speichern machte aus einem `<br>` zwei. Beides ist behoben, und wiederholtes Speichern ändert einen Text jetzt nicht mehr. Was bereits falsch gespeichert ist, räumt `php bin/console cms:repair:entities` auf: ohne Option zeigt er nur, was sich ändern würde, mit `--schreiben` wendet er es an. Angefasst werden die veröffentlichte Fassung und der Entwurf jeder Seite sowie die Bereiche; ältere Fassungen bleiben Historie.
 
 ## Eigenes HTML und eingebettete Seiten (ab 1.20.0)
 
@@ -373,6 +377,10 @@ Der Nachbau von maler-drews.com (Malermeister Axel Drews, Gernsbach) liegt in `v
 
 Der Onepager „DEEG – Immobilien & Hausverwaltung in Freudenstadt“ (Deeg Hausverwaltung und Immobilien GmbH) liegt in `var/immobilien-deeg.db` mit Medien in `var/immobilien-deeg-media`; die Startkonfiguration `immobilien-deeg` in `.claude/launch.json` nutzt Port 8094, `immobilien-deeg-prod` denselben Bestand im Produktionsmodus auf Port 8095 zum Messen. `scripts/seed-immobilien-deeg.php <Bilderordner>` baut Gestaltung, Kopf- und Fußbereich, Startseite, Impressum, Datenschutz, 404, Menü, Einstellungen und zwei Formulare auf – `kontakt` und `bewertung` (Bewertungsanfrage mit Auswahl Wohnung, Haus, Mehrfamilienhaus, Grundstück); `sh scripts/reset-immobilien-deeg.sh [Bilderordner]` (Standard `var/immobilien-deeg-assets`: Logo und zwei Architekturfotos aus dem gelieferten Paket) wirft die Installation weg und baut sie neu auf. Die Vorlage nutzt Arial, es gibt keine Schrift zu holen. Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts.
 
+### Sechste lokale Referenzwebsite: EB Solar
+
+Der Redesign-Entwurf von ebsolar.de (Elektro Bernhard Regenerative Energie GmbH, Baden-Baden) liegt in `var/ebsolar.db` mit Medien in `var/ebsolar-media`; die Startkonfiguration `ebsolar` in `.claude/launch.json` nutzt Port 8096, `ebsolar-prod` denselben Bestand im Produktionsmodus auf Port 8097 zum Messen. `scripts/seed-ebsolar.php <Bilderordner>` baut Gestaltung, Kopf- und Fußbereich, den Kontaktbereich als wiederverwendbare Sektion, Startseite, Projektübersicht, Solarcheck, Impressum, Datenschutz, 404, acht Projektbeiträge mit Galerie und Bildbetrachter, Menü, Einstellungen und zwei Formulare auf – `kontakt` und `solarcheck` (acht Schritte wie das Original auf ebsolar.de, die fünf Auswahlfragen als Bildkarten – gezeichnet und gerastert von `node scripts/build-ebsolar-options.mjs`); `sh scripts/reset-ebsolar.sh [Bilderordner]` (Standard `var/ebsolar-assets`: Logo, Favicon, Startbild, sechs Herstellerlogos, 31 Projektfotos und `projects.json` aus dem gelieferten Paket) wirft die Installation weg und baut sie neu auf. Die Vorlage nutzt Arial, es gibt keine Schrift zu holen. Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts.
+
 Zusätzliche Prüfung mit den lokalen Kant-IT-Inhalten: `node scripts/admin-quality-check.mjs` (PHP über `PHP_BINARY` wählbar). Das Skript benötigt `var/kantit.db` und `var/kantit-media`, erstellt eine eigene Datenbankkopie und ein zufälliges Testkonto darin; es ändert die Pilotdatenbank nicht. Screenshots und Bericht landen in `reports/admin-quality/`.
 
 Die Livesuche prüft `npm run test:search` mit derselben isolierten Pilotkopie: Eingabe ohne Enter, langsame Antworten, Fehler/Wiederholen, Filter, Browserhistorie, Mediathek, Tastaturfokus, mobile Ansicht und axe. Ergebnisse stehen in `reports/live-search/`. Die allgemeine Verwaltungsprüfung ohne erneuten öffentlichen Bewegungstest startet `npm run test:admin -- --admin-only`.

VERSION

@@ -1 +1 @@
-1.20.1
+1.21.5

docs/STATUS.md

@@ -1,5 +1,61 @@
 # Projektstatus
 
+## Sechste Installation: der Redesign-Entwurf „EB Solar“ (16.09.2026)
+
+**Anlass:** Umut: „bitte redesign aufsetzen ebsolar.de achte auf die richtlinien wie immer machs wie die anderen tagespflege, elektro-baernhard co“ – dazu das Paket `ebsolar-redesign.zip` (statische Website: Startseite, Projektübersicht, acht Projektseiten, eigene SVG-Symbole, Kontaktformular per `mailto`).
+
+**Neu.** Neben Kant-IT, Elektro Bernhard, Tagespflege Moldovan, Maler Drews und DEEG steht jetzt **EB Solar** (Elektro Bernhard Regenerative Energie GmbH, Baden-Baden): Datenbank `var/ebsolar.db`, Medien `var/ebsolar-media`, Bildquellen `var/ebsolar-assets` (Logo, Favicon, Startbild, sechs Herstellerlogos, 31 Projektfotos, `projects.json`), Startkonfigurationen `ebsolar` (Port 8096, dev) und `ebsolar-prod` (Port 8097, `APP_ENV=prod` zum Messen). `scripts/seed-ebsolar.php` baut Gestaltung, Kopf- und Fußbereich, den Kontaktbereich als **wiederverwendbare Sektion**, Startseite, Projektübersicht, Solarcheck, Impressum, Datenschutz, 404, acht Projektbeiträge, Menü und zwei Formulare; `sh scripts/reset-ebsolar.sh` wirft weg, migriert und baut neu. Schrift ist Arial (System) wie in der Vorlage, es gibt nichts zu holen.
+
+**Aus der Vorlage übernommen:** Farben (`#b52c2c` Rot, `#252b30` Tinte, `#f5f6f6` helle Fläche, `#e6e8e8` Linie), Schriftgrößen, Abstände, Wortlaut und die Reihenfolge der Abschnitte – Hero mit Bildunterschrift über dem Foto, die vier Zusicherungen zwischen zwei Linien, drei Schritte, „Gutes Handwerk. Neue Energie.“ auf heller Fläche, Projektraster, Herstellerleiste, „Was kann Ihr Dach?“.
+
+**Bewusste Abweichungen.**
+- Das Kontaktformular der Vorlage öffnet nur das E-Mail-Programm des Besuchers. Hier ist es das serverseitige Formular `kontakt`; die Anfrage liegt in der Verwaltung und geht an pv@elektro-bernhard.de.
+- Der **Solarcheck** ist im Paket nur ein Verweis auf ebsolar.de. Hier ist er eine eigene Seite mit dem Formular `solarcheck`: dieselben acht Schritte und dieselben Fragen wie im Original (abgerufen 16.09.2026), nur der Schieberegler für den Jahresverbrauch ist ein Zahlenfeld – ein Schieberegler ist im Formularbaustein nicht vorgesehen.
+- Die acht Projektseiten sind **Beiträge** der Kategorie „Projekte“ mit Galerie und Bildbetrachter; `/projekte` ist eine Beitragsliste. Die Projektart („Photovoltaik“, „Terrassenmontage · SolarEdge“) steht als **Schlagwort** am Beitrag und nicht als Kategorie: „vorheriges/nächstes Projekt“ folgt der ersten Kategorie, und die muss bei allen acht dieselbe sein, sonst führt die Navigation an Rheinstetten vorbei. Die Beitragsliste zeigt nur Kategorien, deshalb tragen die Karten anders als in der Vorlage keine Artzeile.
+- Impressum und Datenschutz sind eigene Seiten (Angaben vom Impressum der laufenden Website); was nur Elektro Bernhard beantworten kann, steht als „NOCH ZU PRÜFEN“ im Text.
+- Kein Cookie-Banner: es wird nichts von Dritten geladen.
+
+**Bildkarten im Solarcheck (17.09.2026).** Umut: „du kannst so schöne svg's erstellen kannst du bitte noch schöne icons für den solarcheck machen statt checkboxe schöne bilder?“ Die fünf Auswahlfragen (Personen, Dachform, Dachfläche, Eindeckung, Speicher) zeigen jetzt Bildkarten statt Optionsfelder – 20 Symbole in Tinte und Rot auf heller Fläche, im Stil der übrigen Symbole der Website. `scripts/build-ebsolar-options.mjs` zeichnet sie als SVG und rastert sie mit Chromium auf 800×600 (4:3 wie die Karte), weil die Mediathek kein SVG nimmt; SVG und PNG liegen in `var/ebsolar-assets/options/`, das Aufbauskript hängt die PNGs per `images` an die Felder. Lighthouse `/solarcheck` danach: Leistung 98/98, Barrierefreiheit, Best Practices, SEO 100.
+
+**Im Kern behoben: Pfeile waren Schriftzeichen.** Der Button haengte ein `↗` an, die Beitragsnavigation ein `←`/`→` – Buchstaben also, die je nach Schrift anders aussehen und mit der Schriftstaerke nicht mitwachsen. Der Symbolsatz (`templates/blocks/icon.html.twig`, `DocumentValidator::ICONS`) kennt jetzt drei Pfeile: `arrow-right`, `arrow-left`, `arrow-up-right`, gezeichnet wie die uebrigen 17 Symbole. Button und Beitragsnavigation setzen sie als eingebettetes SVG in denselben `<span aria-hidden>` wie bisher – `& span{display:none}` nimmt den Pfeil also weiterhin weg, wo eine Vorlage keinen will (DEEG). Die Groesse haengt an der Schrift des Knopfs (`.button-arrow>svg{width:1.15em}`), nicht an einer festen Zahl. Auf EB Solar tragen auch die Textlinks ihren Pfeil als Symbolbaustein neben dem Text; er zeigt auf dieselbe Adresse und ist als Schmuck von Vorlesesoftware und Tastatur ausgenommen.
+
+**Im Kern behoben: zweimal derselbe Selektor in eigenem CSS loeschte die erste Regel.** `CustomCode::parse()` legte die Deklarationen je Selektor in einem Array ab – `$rules[$suffix] = …`. Standen `& .post-card{border:0}` und `& .post-card{transform:none}` untereinander, gewann die zweite, und `border:0` verschwand ohne Meldung; im Projektraster von EB Solar kam dadurch der 1-px-Rahmen des Kerns zurueck. In CSS ist zweimal derselbe Selektor eine Kaskade, kein Widerruf: die Deklarationen werden jetzt in der Reihenfolge zusammengefuegt, in der sie standen. Dasselbe galt fuer `&{…}` neben den Eigenschaften des Elements selbst – auch das ging vorher verloren.
+
+**Im Kern behoben: das vorgezogene Bild wurde nicht vorab geholt.** Für ein Hintergrundbild des ersten Abschnitts schreibt `page.html.twig` längst ein `<link rel="preload" as="image">` (`heroBackground`). Für ein gewöhnliches `<img>` über der Falz fehlte das Gegenstück – der Browser fand es erst, wenn das Stylesheet geparst war, und diese Rundreise ging auf die Startseite von EB Solar (deren Startbild ein Bild und kein Hintergrund ist) direkt in die LCP-Zeit. Neu liefert `PageController::heroImage()` Quelle, Variantensatz und Größenangabe genau so, wie `blocks/block.html.twig` sie an das `img` schreibt (sonst lädt der Browser zweimal), und die Vorlage schreibt daraus die Vorabladung – aber nur, wenn nicht ohnehin schon ein Hintergrundbild vorgeholt wird.
+
+**Und eine Regel fürs Aufbauen:** eine Einblendung auf dem größten Element über der Falz kostet fast eine Sekunde LCP (gemessen: 916 ms „element render delay“, mobil 92 statt 99). Das Startbild blendet deshalb nicht ein; Kleinzeile, Überschrift, Text und Knöpfe daneben schon.
+
+**Geprüft:** `npm run test:links` gegen Port 8096: 17 Adressen in der Sitemap, 48 Seiten, 127 Adressen, kein toter Verweis. `npm run test:browser` (`PHP_BINARY=C:/php84/php.exe`): sechs Seiten-/Viewport-Prüfungen mit axe, Tastatur und ohne JavaScript bestanden, **keine redaktionellen Befunde**; Ladebudget der Startseite 14 Anfragen, 17 Abfragen. Lighthouse 13.4.1 (`scripts/audit.mjs`, je drei Läufe mobil und Desktop, Mediane) gegen den Produktionsmodus auf Port 8097 für `/`, `/projekte`, `/solarcheck`, `/michelbach`, `/rheinstetten`, `/impressum`, `/datenschutz`: **Barrierefreiheit, Best Practices und SEO überall 100**, Leistung 99–100, agentisches Browsing überall 100 außer `/solarcheck` mobil (98). Startseite LCP 2,1 s mobil / 0,8 s Desktop, CLS 0, TBT 0 ms; Berichte in `reports/lighthouse-ebsolar/`. Bildbetrachter der Galerie geöffnet und geblättert („1 von 4“), Beitragsnavigation stimmt mit der Reihenfolge der Vorlage überein (Michelbach ← Rheinstetten, → Au am Rhein), 404 und Solarcheck im Browser angesehen, Desktop und 375 px. PHP-Tests **581 grün** (PHP 8.4), php-cs-fixer und Twig-Lint ohne Befund.
+
+**Stolperstein beim Messen:** Im Produktionsmodus liegen die uebersetzten Twig-Vorlagen in `var/cache/prod`. Nach einer Aenderung an `blocks/icon.html.twig` warf jede Seite mit Pfeil dort **500** („Key ‚arrow-right‘ … does not exist“), waehrend der Entwicklungsserver auf 8096 laengst richtig lieferte. `APP_ENV=prod … bin/console cache:clear` raeumt das auf; wer im Produktionsmodus misst, muss das nach jeder Vorlagenaenderung tun.
+
+**Bekannt:** `/solarcheck` mobil hat CLS 0,08 (agentisches Browsing 98). Das Formularskript blendet nach dem Laden alle Schritte bis auf den ersten aus – ohne Skript stehen sie untereinander, mit Skript springt die Seite einmal. Der Wert liegt unter dem Ziel von 0,1, aber die Bewegung ist sichtbar; sie gehört in den Kern (Schritte serverseitig zusammenfalten), nicht ins Aufbauskript.
+
+
+## Startseite nach der Installation: eine Baustellenseite statt einer Anleitung (16.09.2026)
+
+**Anlass:** Umut: „Kannst du bitte für die Erstseite bzw. nach der Installation eine schöne Erstseite erstellen – Under Construction oder so, ohne Details mit ‚melde dich an‘ usw. Am besten auch noch Logo von KantSites: ‚Hier entsteht eine neue Webpräsenz mit KantSites‘.“
+
+**Was los war.** `DemoContent::starterPage()` lieferte zwei Abschnitte mit Arbeitsanweisungen an die Betreiberin oder den Betreiber: „Melde dich an, öffne sie im Editor …“ und „Die nächsten Schritte“ mit Design, Menüs und Einstellungen. Das stand auf der einzigen Seite, die bis zum ersten Bearbeiten **öffentlich** erreichbar ist – gelesen hat es also der Besucher, nicht der Betreiber. Für den stehen dieselben Schritte längst auf dem letzten Installerbildschirm (`templates/install/done.html.twig`) und in der Verwaltung.
+
+**Neu.** Eine Baustellenseite, die genau das sagt und sonst nichts: das KantSites-Zeichen (`public/assets/kantsites-logo.svg`, dieselbe Form wie das Favicon), die Kleinzeile „In Arbeit“ in der Akzentfarbe, als einzige H1 der Name der Website, darunter „Hier entsteht eine neue Webpräsenz.“, ein kurzer Trennstrich und die Zeile „Erstellt mit KantSites“. Der Abschnitt ist ein Flex-Container mit `min-height: 70vh` und einem Verlauf von `@paper` nach `@mint`, stellt den Inhalt also mittig auf den Bildschirm; die Farben sind Palettenverweise und folgen jedem Designwechsel. Alles sind gewöhnliche Bausteine mit gewöhnlichen Stilwerten – im Editor also vollständig änder- und löschbar. Die Seitenbeschreibung ist jetzt ein echter Satz statt „NOCH AUSZUFÜLLEN“, damit eine frisch installierte Website in Suchergebnissen nicht mit einem Platzhalter steht.
+
+**Unverändert:** Kopf- und Fußbereich, die beiden Rechtsseiten als Gerüst mit markierten Pflichtangaben, Menüs.
+
+**Geprüft:** `tests/InstallFlowTest.php` (Installation über die sechs Bildschirme, danach liefert `/` die neue Seite), `php vendor/bin/phpunit` 579 von 579. Im Browser angesehen: eine frisch migrierte Datenbank mit dem Inhalt einer Neuinstallation, Desktop und 375 px.
+
+## Fassung 1.21.0: Bildecken gehören dem Designbereich (16.09.2026)
+
+**Anlass:** Umut zum Hero-Bild von DEEG: „Das sollte abgerundet sein, aber wurde von irgendwo gemacht, und die Ecken sehen komisch aus. Es gibt auch im Editor gar nicht Bildecken abrunden, oder?“
+
+**Was los war.** `.block-image{border-radius:12px}` stand fest in `enhancements.css` – jedes Bild jeder Installation war gerundet, ohne dass ein Feld das gesagt hätte. Auf DEEG (eine durchgehend eckige Vorlage) fiel es auf, weil über dem gerundeten Bild eckige Elemente liegen: der dunkle Verlauf, das Schild, die blaue Aufruf-Fläche. An den Ecken schaute deshalb die eckige Fläche aus der Rundung heraus.
+
+**Behoben.** Die Ecken sind jetzt eine Einstellung unter **Design → Bildecken** (`theme.base.imageRadius`, geprüft wie die Inhaltsbreite, ausgegeben als `--k-image-radius`). Vorgabe bleibt `12px`, damit bestehende Websites gleich aussehen; `0px` macht alle Bilder eckig. Für ein einzelnes Bild gab es die Einstellung schon immer – im Editor unter **Design → Bild → Bildecken** (`imageRadius` im Stilschema, für Bild, Galerie, Logoleiste und Beitragsliste); sie überschreibt den Wert der Website.
+
+**DEEG:** `imageRadius` auf `0px`, im Aufbauskript und in der Installation. Das Hero-Bild ist damit eckig wie die Vorlage, und die Ecken stimmen wieder.
+
+**Geprüft:** neuer Test in `tests/CmsTest.php`: Vorgabe ist `12px`, eine Seite mit Bild trägt `--k-image-radius:12px`, nach dem Speichern von `0px` trägt sie `--k-image-radius:0px`, und „rund“ wird abgewiesen wie jede andere Nicht-Größenangabe.
+
 ## Fassung 1.20.1: das kaufmännische Und, das bei jedem Speichern wuchs (16.09.2026)
 
 **Anlass:** Umut: „Beim Startseitenbild wird der Text & umgewandelt, aber in der Ansicht nach dem Speichern wird &amp; daraus.“
@@ -8,9 +64,9 @@
 
 **Behoben.** Der Zweig dekodiert jetzt zuerst (`html_entity_decode`) und escaped danach, und er ersetzt den Umbruch, statt ihn zu ergänzen. Damit endet er bei derselben Darstellung wie der DOM-Zweig, und beide sind unveränderlich gegenüber wiederholtem Speichern.
 
-**Bestand.** `scripts/repair-doubled-entities.php` räumt auf, was schon gespeichert ist: veröffentlichte Fassung und Entwurf jeder Seite sowie die Bereiche, mit Trockenlauf und `--schreiben`, jede Änderung gegen den Validator geprüft. Ältere Fassungen bleiben Historie. Auf DEEG angewandt (eine Stelle im Entwurf der Startseite). **Offen: kant-it.de** – dort stehen zwei dreifach kodierte Stellen im Entwurf der Startseite; das Skript gehört nach dem Update dort einmal ausgeführt, sonst steht der Murks beim nächsten Veröffentlichen live.
+**Bestand.** Der Konsolenbefehl `bin/console cms:repair:entities` räumt auf, was schon gespeichert ist: veröffentlichte Fassung und Entwurf jeder Seite sowie die Bereiche, mit Trockenlauf und `--schreiben`, jede Änderung gegen den Validator geprüft (Seiten wie beim Speichern, Bereiche ohne Überschriftspflicht). Als Befehl und nicht als Skript unter `scripts/`, weil dieser Ordner nicht ins Releasearchiv geht – eine Installation ohne Git hätte das Skript sonst nie gesehen. Ältere Fassungen bleiben Historie. Auf DEEG angewandt (eine Stelle im Entwurf der Startseite). **Offen: kant-it.de** – dort stehen zwei dreifach kodierte Stellen im Entwurf der Startseite; das Skript gehört nach dem Update dort einmal ausgeführt, sonst steht der Murks beim nächsten Veröffentlichen live.
 
-**Geprüft:** neuer Test in `tests/CmsTest.php`: sechs Eingaben (Entity, nacktes Und, `<`, Zeilenumbruch, Markup, wörtliche Tags) dreimal hintereinander durch `sanitise()` – jedes Mal dasselbe Ergebnis; dazu eine Seite, die dreimal gespeichert und veröffentlicht wird und danach immer noch ein einziges `&amp;` trägt.
+**Geprüft:** `tests/RepairEntitiesCommandTest.php` (Trockenlauf ändert nichts; Schreiben entschachtelt drei Stufen und lässt ein richtiges `&amp;` stehen; ein zweiter Lauf findet nichts mehr) und ein neuer Test in `tests/CmsTest.php`: sechs Eingaben (Entity, nacktes Und, `<`, Zeilenumbruch, Markup, wörtliche Tags) dreimal hintereinander durch `sanitise()` – jedes Mal dasselbe Ergebnis; dazu eine Seite, die dreimal gespeichert und veröffentlicht wird und danach immer noch ein einziges `&amp;` trägt.
 
 **Nebenbei (DEEG):** Das Favicon zeigte den mittigen Ausschnitt des Logos, also „EE“ aus dem Schriftzug. Neu ist ein eigenes quadratisches Zeichen: der Dachgiebel aus dem Logo, weiß auf Logo-Blau, gerendert aus `logo-deeg.png` von `scripts/set-immobilien-deeg-favicon.php`. Vier Entwürfe standen zur Wahl (Doppeldach, Giebel, Dach blau auf weiß, Buchstabe D), Umut hat den Giebel gewählt.
 

public/assets/enhancements.css

@@ -1,4 +1,4 @@
-.block-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:24px}.block-gallery>.block-image{min-width:0;margin:0}.block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.block-image figcaption{font-size:14px;line-height:1.5;padding:12px 0;color:inherit}.fx-shadow-none{box-shadow:none}.fx-shadow-soft{box-shadow:0 8px 24px #142e251f}.fx-shadow-strong{box-shadow:0 16px 40px #142e2540}.block-image{border-radius:12px}.block-image img{border-radius:inherit}.block-gallery:empty{min-height:32px}.fx-hover-zoom{overflow:hidden}.fx-hover-zoom img{transform-origin:center}.tone-ink figure{color:var(--paper)}
+.block-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:24px}.block-gallery>.block-image{min-width:0;margin:0}.block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.block-image figcaption{font-size:14px;line-height:1.5;padding:12px 0;color:inherit}.fx-shadow-none{box-shadow:none}.fx-shadow-soft{box-shadow:0 8px 24px #142e251f}.fx-shadow-strong{box-shadow:0 16px 40px #142e2540}.block-image{border-radius:var(--k-image-radius,12px)}.block-image img{border-radius:inherit}.block-gallery:empty{min-height:32px}.fx-hover-zoom{overflow:hidden}.fx-hover-zoom img{transform-origin:center}.tone-ink figure{color:var(--paper)}
 @media(max-width:1024px){.block-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media(max-width:767px){.block-gallery{grid-template-columns:minmax(0,1fr);gap:16px}}
 .fx-hover-lift,.fx-hover-zoom img{transition:transform .25s ease}.fx-hover-lift:hover,.fx-hover-lift:focus-within{transform:translateY(-4px)}.fx-hover-zoom:hover img,.fx-hover-zoom:focus-within img{transform:scale(1.035)}

public/assets/kantsites-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128"><rect width="128" height="128" rx="32" fill="#182d2b"/><path d="M36 28h16v42l26-28h22L68 76l34 28H78L52 82v22H36z" fill="#e5f0b6"/></svg>

public/assets/site.css

@@ -44,6 +44,11 @@ p{hyphens:auto}
 
 /* Blocks introduced with schema v6. No JavaScript: the accordion is details/summary. */
 .block-icon{flex-shrink:0;display:block}
+/* Der Pfeil am Button und in der Beitragsnavigation ist dasselbe Symbol wie ueberall sonst -
+   frueher stand dort ein Schriftzeichen, das je nach Schrift anders aussah. Er waechst mit der
+   Schrift des Knopfs, statt eine eigene Groesse zu haben. */
+.button-arrow,.nav-arrow{display:inline-flex;align-items:center}
+.button-arrow>svg,.nav-arrow>svg{width:1.15em;height:1.15em}
 .block-iconcard{display:grid;gap:12px;padding:26px;border:1px solid currentColor;border-radius:12px}
 .block-iconcard + .block-iconcard,.block-quote + .block-quote,.block-cta + .block-cta,.block-iconcard + .block-quote,.block-quote + .block-iconcard{margin-top:18px}
 /* Gestapelt brauchen Karten den Abstand; nebeneinander in einer Zeile macht er die zweite bis
@@ -438,9 +443,14 @@ body.consent-open{padding-bottom:320px}
 .kant .width-full>.section-inner{width:100%;max-width:none;margin-inline:0}
 @media (max-width:767px){.kant .width-wide>.section-inner{width:calc(100% - 36px)}}
 
-/* A section that is a flex container centres its content box; the inner container must then be
-   allowed to grow, or a full height section would show a strip in the middle. */
-.block-section>.section-inner{flex:1 1 auto}
+/* Ein Abschnitt, der ein Flex-Kasten ist, reiht seinen Inhaltskasten als Flex-Element ein.
+   Wachsen darf der dabei nicht: die Laufrichtung ist voreingestellt die Zeile, und dort frisst
+   das Wachsen die Randluft des Containers. Auf dem Telefon stand der Text eines Hero-Abschnitts
+   damit hart an der Kante, waehrend Kopf und alle uebrigen Abschnitte ihre 18 px hatten - am
+   Schreibtisch fiel es nicht auf, weil dort die Hoechstbreite des Designs vorher bremst.
+   Die Hoehe braucht das Wachsen nicht: quer zur Laufrichtung dehnt sich ein Flex-Element
+   ohnehin ueber die volle Hoehe, und steht "Ausrichtung: Mitte", ist die Mitte gewollt. */
+.block-section>.section-inner{flex:0 1 auto}
 
 /* Menu kinds. Horizontal is the default; vertical stacks; burger is a details element, so it
    opens without a script - a menu that needs one would not open on a page that runs none. */
@@ -472,9 +482,13 @@ body.consent-open{padding-bottom:320px}
    weder faerben noch abschalten. Linie und Schatten kommen dann aus Rahmen und Wirkung. */
 .site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none}
 .site-header .menu-burger[open]>summary{border-radius:8px}
+/* Die Flaeche malt ihren eigenen Untergrund, also setzt sie auch ihre eigene Schriftfarbe.
+   Ohne das erbte sie die Farbe des Kopfbereichs: bei einem Kopf, der ueber einem dunklen Bild
+   schwebt und deshalb weiss schreibt, stand das aufgeklappte Menue weiss auf weiss. */
 .site-header .menu-burger-body{position:absolute;left:0;right:0;top:100%;z-index:30;
   padding:15px max(16px,calc((100% - var(--k-container,1180px)) / 2 + 16px)) 25px;
-  background:var(--paper);box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)}
+  background:var(--paper);color:var(--ink);
+  box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)}
 .site-header .menu-burger-body .menu-list{gap:0}
 .site-header .menu-burger-body .menu-list a{padding:12px 10px;font-size:16px}
 /* Visibility never overwrites the block's grid/flex/display settings. */
@@ -483,6 +497,13 @@ body.consent-open{padding-bottom:320px}
 @media (min-width:1025px){.visibility-tablet,.visibility-mobile,.visibility-hide-desktop{display:none!important}}
 @media (min-width:768px) and (max-width:1024px){.visibility-desktop,.visibility-mobile,.visibility-hide-tablet{display:none!important}}
 @media (max-width:767px){.visibility-desktop,.visibility-tablet,.visibility-hide-mobile{display:none!important}}
+/* Das Sprungziel des Knopfs „nach oben“, ein leerer <span> am Anfang von <body>.
+   WebKit springt nicht zu einem Ziel, dessen Box inline ist und keine Flaeche hat - der Tipp
+   kam an, #seitenanfang stand in der Adresse, und die Seite blieb stehen. Auf dem iPhone,
+   und ebenso in Safari auf dem Mac; Chromium ist toleranter, deshalb fiel es am Schreibtisch
+   nie auf. Ein leerer Block ohne Hoehe reicht WebKit, es ist die Inline-Box, die stoert.
+   Nachgestellt in Playwright-WebKit mit iPhone-Profil: inline bleibt bei 1500, block springt. */
+#seitenanfang{display:block}
 /* Der Knopf „nach oben". Ein Anker, kein Skript: er springt an den Anfang der Seite, und das
    kann ein Browser seit jeher allein. Eingeblendet wird er beim Scrollen über eine Scroll-
    Zeitachse - dieselbe Technik wie bei den Einblendungen. Wo es die nicht gibt (heute noch

scripts/build-ebsolar-options.mjs

@@ -0,0 +1,114 @@
+/*
+ * Zeichnet die Bildkarten des Solarchecks von EB Solar und rastert sie zu PNG.
+ *
+ * Die Formularbausteine zeigen eine Auswahl als Bildkarten, sobald eine Option ein Bild aus der
+ * Mediathek hat - und die Mediathek nimmt JPEG, PNG und WebP, kein SVG. Deshalb entstehen die
+ * Symbole hier als SVG (leicht zu ändern, alles in einer Datei) und werden mit Chromium auf
+ * 800 × 600 gerastert, dem Seitenverhältnis 4:3 der Karte. Stil wie die übrigen Symbole der
+ * Website: dünne Linie in Tinte, runde Enden, ein roter Akzent, helle Fläche dahinter.
+ *
+ *   node scripts/build-ebsolar-options.mjs            → var/ebsolar-assets/options/*.png und *.svg
+ */
+import { chromium } from 'playwright';
+import { mkdir, writeFile } from 'node:fs/promises';
+
+const ziel = process.argv[2] || 'var/ebsolar-assets/options';
+const TINTE = '#252b30', ROT = '#b52c2c', HELL = '#f5f6f6', PAPIER = '#ffffff', GRAU = '#c9ced0';
+
+/** Ein Bild: 800 × 600, helle Fläche, Inhalt in der Mitte. */
+const bild = (inhalt) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
+<rect width="800" height="600" fill="${HELL}"/>
+<g fill="none" stroke="${TINTE}" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">${inhalt}</g>
+</svg>`;
+
+/** Eine Person: Kopf und Schultern. */
+const person = (x, y, s = 1, farbe = TINTE) => `
+<circle cx="${x}" cy="${y - 120 * s}" r="${46 * s}" stroke="${farbe}"/>
+<path d="M${x - 88 * s} ${y + 70 * s}v-${30 * s}a${88 * s} ${88 * s} 0 0 1 ${176 * s} 0v${30 * s}" stroke="${farbe}"/>`;
+
+/** Ein Haus: Wände plus Dach nach Angabe; das Dach ist der Akzent. */
+const haus = (dach) => `
+<path d="M190 520V300M610 520V300M150 520h500"/>
+<rect x="360" y="410" width="80" height="110" rx="6"/>
+${dach}`;
+
+/** Ein Dach als schräge Fläche mit Modulen im Raster. */
+const module = (spalten, zeilen) => {
+    const x0 = 160, y0 = 150, b = 480, h = 300, scher = 90;
+    const zellen = [];
+    for (let z = 0; z < zeilen; z++) {
+        for (let s = 0; s < spalten; s++) {
+            const bx = b / spalten, bh = h / zeilen;
+            const x = x0 + s * bx + (z * bh) * (scher / h), y = y0 + z * bh;
+            zellen.push(`<path d="M${x + 8} ${y + 8}h${bx - 16}l${(bh - 16) * scher / h} ${bh - 16}h-${bx - 16}z" fill="${ROT}" fill-opacity=".14" stroke="${ROT}" stroke-width="8"/>`);
+        }
+    }
+    return `<path d="M${x0} ${y0}h${b}l${scher} ${h}h-${b}z"/>${zellen.join('')}`;
+};
+
+const fragezeichen = (x, y, s = 1) => `<path d="M${x - 40 * s} ${y - 50 * s}a${40 * s} ${40 * s} 0 1 1 ${58 * s} ${36 * s}c-${14 * s} ${9 * s}-${18 * s} ${18 * s}-${18 * s} ${34 * s}" stroke="${ROT}"/><circle cx="${x}" cy="${y + 65 * s}" r="9" fill="${ROT}" stroke="none"/>`;
+
+const batterie = (inhalt, farbe = TINTE) => `
+<rect x="190" y="200" width="380" height="200" rx="26" stroke="${farbe}"/>
+<path d="M570 260h30a20 20 0 0 1 20 20v40a20 20 0 0 1-20 20h-30" stroke="${farbe}"/>
+${inhalt}`;
+
+const bilder = {
+    // Wie viele Personen leben im Haushalt?
+    'personen-1': person(400, 320, 1.3),
+    'personen-2': person(300, 320, 1.15) + person(500, 320, 1.15),
+    'personen-3-4': person(210, 330) + person(400, 330) + person(590, 330),
+    'personen-4-plus': person(160, 330, .85) + person(320, 330, .85) + person(480, 330, .85) + person(640, 330, .85)
+        + `<path d="M715 140v70M680 175h70" stroke="${ROT}"/>`,
+
+    // Welche Form hat Ihr Dach?
+    'dach-flach': haus(`<path d="M150 300h500" stroke="${ROT}"/><path d="M200 300v-40h400v40" stroke="${ROT}"/>`),
+    'dach-sattel': haus(`<path d="M140 320 400 120l260 200" stroke="${ROT}"/>`),
+    'dach-pult': haus(`<path d="M150 330 650 190" stroke="${ROT}"/><path d="M610 300v-95" />`),
+    'dach-versetzt': `
+<path d="M120 520h560M160 520V370M440 520V270M660 520V330"/>
+<rect x="260" y="420" width="70" height="100" rx="6"/>
+<path d="M120 380 290 250l150 120" stroke="${ROT}"/><path d="M440 290 560 180l130 140" stroke="${ROT}"/>`,
+    'dach-sonstiges': haus(`<path d="M140 320 400 120l260 200" stroke="${GRAU}"/>`) + fragezeichen(400, 250, 1.1),
+
+    // Wie groß ist Ihre Dachfläche?
+    'flaeche-50': module(2, 1),
+    'flaeche-100': module(3, 2),
+    'flaeche-200': module(5, 3),
+    'flaeche-200-plus': module(7, 4),
+    'flaeche-unsicher': `<path d="M160 150h480l90 300H160z" stroke="${GRAU}"/>` + fragezeichen(400, 300, 1.4),
+
+    // Aus welchem Material besteht die Dacheindeckung?
+    'eindeckung-ziegel': [0, 1, 2, 3].map(z => [0, 1, 2, 3, 4].map(s => {
+        if (z % 2 === 1 && s === 4) return '';
+        const x = 150 + s * 100 + (z % 2) * 50, y = 170 + z * 80;
+        return `<path d="M${x} ${y}a50 50 0 0 0 100 0" stroke="${z === 2 && s === 2 ? ROT : TINTE}"/>`;
+    }).join('')).join(''),
+    'eindeckung-bitumen': `
+<path d="M130 440h540v50H130z"/>
+<circle cx="250" cy="360" r="70"/><circle cx="250" cy="360" r="26"/>
+<path d="M320 400h340" stroke="${ROT}" stroke-width="22"/>
+<path d="M250 430h410" stroke="${ROT}" stroke-width="22" stroke-opacity=".35"/>`,
+    'eindeckung-blech': `
+<path d="M120 340h50l30-70h60l30 70h60l30-70h60l30 70h60l30-70h60l30 70h30"/>
+<path d="M120 420h50l30-70h60l30 70h60l30-70h60l30 70h60l30-70h60l30 70h30" stroke="${GRAU}"/>
+<path d="M120 340v80M680 340v80" stroke="${GRAU}"/>
+<path d="M350 340l30-70h60l30 70" stroke="${ROT}"/>`,
+    'eindeckung-anderes': `<rect x="200" y="150" width="400" height="300" rx="20" stroke="${GRAU}"/>` + fragezeichen(400, 300, 1.4),
+
+    // Wünschen Sie einen Stromspeicher?
+    'speicher-ja': batterie(`<path d="M420 230 350 310h60l-30 70 70-80h-60z" fill="${ROT}" stroke="${ROT}" stroke-width="10"/>`),
+    'speicher-nein': batterie('', GRAU) + `<path d="M190 470 610 130" stroke="${ROT}"/>`,
+};
+
+await mkdir(ziel, { recursive: true });
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 800, height: 600 }, deviceScaleFactor: 1 });
+for (const [name, inhalt] of Object.entries(bilder)) {
+    const svg = bild(inhalt);
+    await writeFile(`${ziel}/${name}.svg`, svg);
+    await page.setContent(`<!doctype html><body style="margin:0;background:${PAPIER}">${svg}</body>`);
+    await page.locator('svg').screenshot({ path: `${ziel}/${name}.png`, omitBackground: false });
+    console.log('gezeichnet:', name);
+}
+await browser.close();

scripts/repair-doubled-entities.php

@@ -1,127 +0,0 @@
-<?php
-
-/**
- * Repariert Texte, die durch das doppelte Kodieren in `RichText::sanitise()` verschachtelt wurden.
- *
- * Bis 1.20.0 hat der Zweig für Text ohne Tags die Eingabe nur escaped, statt sie vorher zu
- * dekodieren. Aus „Freudenstadt &amp; Umgebung“ wurde bei jedem Speichern eine Stufe mehr
- * (`&amp;amp;`, `&amp;amp;amp;` …), bis die Entity sichtbar auf der Seite stand. Der Fehler ist
- * behoben; dieses Skript räumt auf, was schon gespeichert ist.
- *
- * Angefasst werden die Dokumente, die tatsächlich in Gebrauch sind: die veröffentlichte und die
- * Entwurfsfassung jeder Seite sowie die Bereiche. Ältere Fassungen bleiben, wie sie sind – sie
- * sind Historie; wer eine davon zurückholt, speichert sie danach einmal, und der reparierte Kern
- * schreibt sie richtig.
- *
- * Aufruf: php scripts/repair-doubled-entities.php [--schreiben]
- * Ohne `--schreiben` wird nur gezeigt, was sich ändern würde.
- */
-require dirname(__DIR__).'/config/bootstrap.php';
-
-use App\Content\DocumentValidator;
-use App\Infrastructure\ConnectionFactory;
-
-$root = dirname(__DIR__);
-$schreiben = in_array('--schreiben', $argv, true);
-$url = str_replace('%kernel.project_dir%', str_replace('\\', '/', $root), (string) $_SERVER['DATABASE_URL']);
-$db = ConnectionFactory::create($url);
-$validator = new DocumentValidator();
-
-/** Entschachtelt eine doppelt kodierte Entity, so oft wie nötig: &amp;amp;amp; wird zu &amp;. */
-$entschachteln = static function (string $text): string {
-    $vorher = null;
-    // Nur eine Entity hinter einem &amp; ist ein Fehler - ein einzelnes &amp; ist richtig.
-    while ($vorher !== $text) {
-        $vorher = $text;
-        $text = preg_replace('/&amp;(amp|lt|gt|quot|apos|nbsp|#\d{1,6}|#x[0-9a-fA-F]{1,6});/', '&$1;', $text) ?? $text;
-    }
-
-    return $text;
-};
-
-/** Läuft durch die Bausteine und korrigiert die Texte; zählt die Änderungen. */
-$bausteine = function (array $liste, int &$zahl, array &$beispiele) use (&$bausteine, $entschachteln): array {
-    foreach ($liste as $index => $block) {
-        foreach (['text', 'caption', 'label', 'title', 'hint', 'provider'] as $feld) {
-            $wert = $block['props'][$feld] ?? null;
-            if (!is_string($wert) || '' === $wert) {
-                continue;
-            }
-            $neu = $entschachteln($wert);
-            if ($neu !== $wert) {
-                $liste[$index]['props'][$feld] = $neu;
-                ++$zahl;
-                if (count($beispiele) < 6) {
-                    $beispiele[] = mb_substr($wert, 0, 60).' → '.mb_substr($neu, 0, 60);
-                }
-            }
-        }
-        if (isset($block['children']) && is_array($block['children'])) {
-            $liste[$index]['children'] = $bausteine($block['children'], $zahl, $beispiele);
-        }
-    }
-
-    return $liste;
-};
-
-$gesamt = 0;
-$berichte = [];
-
-// Die aktiven Fassungen jeder Seite: veröffentlicht und Entwurf.
-$aktive = [];
-foreach ($db->fetchAllAssociative('SELECT id, path, published_revision_id, draft_revision_id FROM page') as $seite) {
-    foreach (['published_revision_id' => 'veröffentlicht', 'draft_revision_id' => 'Entwurf'] as $spalte => $was) {
-        if (!empty($seite[$spalte])) {
-            $aktive[(string) $seite[$spalte]] = '/'.$seite['path'].' ('.$was.')';
-        }
-    }
-}
-foreach ($aktive as $revision => $bezeichnung) {
-    $roh = $db->fetchOne('SELECT document FROM revision WHERE id = ?', [$revision]);
-    if (!is_string($roh)) {
-        continue;
-    }
-    $dokument = json_decode($roh, true, 512, JSON_THROW_ON_ERROR);
-    $zahl = 0;
-    $beispiele = [];
-    $dokument['blocks'] = $bausteine($dokument['blocks'] ?? [], $zahl, $beispiele);
-    if (0 === $zahl) {
-        continue;
-    }
-    $gesamt += $zahl;
-    $berichte[] = ['was' => $bezeichnung, 'zahl' => $zahl, 'beispiele' => $beispiele];
-    if ($schreiben) {
-        // Geprüft wird wie beim Speichern - eine Korrektur darf kein ungültiges Dokument hinterlassen.
-        $validator->validate($dokument, writing: true);
-        $db->executeStatement('UPDATE revision SET document = ? WHERE id = ?', [json_encode($dokument, JSON_THROW_ON_ERROR | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES), $revision]);
-    }
-}
-
-// Und die Bereiche (Kopf, Fuß, verknüpfte Sektionen).
-foreach ($db->fetchAllAssociative('SELECT id, kind, name, document FROM partial') as $bereich) {
-    $dokument = json_decode((string) $bereich['document'], true, 512, JSON_THROW_ON_ERROR);
-    $zahl = 0;
-    $beispiele = [];
-    $dokument['blocks'] = $bausteine($dokument['blocks'] ?? [], $zahl, $beispiele);
-    if (0 === $zahl) {
-        continue;
-    }
-    $gesamt += $zahl;
-    $berichte[] = ['was' => 'Bereich '.$bereich['kind'].' „'.$bereich['name'].'“', 'zahl' => $zahl, 'beispiele' => $beispiele];
-    if ($schreiben) {
-        $validator->validate($dokument, writing: true);
-        $db->executeStatement('UPDATE partial SET document = ? WHERE id = ?', [json_encode($dokument, JSON_THROW_ON_ERROR | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES), $bereich['id']]);
-    }
-}
-
-foreach ($berichte as $bericht) {
-    echo $bericht['was'], ': ', $bericht['zahl'], ' Stelle(n)', "\n";
-    foreach ($bericht['beispiele'] as $beispiel) {
-        echo '    ', $beispiel, "\n";
-    }
-}
-if (0 === $gesamt) {
-    echo "Nichts zu reparieren.\n";
-    exit(0);
-}
-echo $schreiben ? "$gesamt Stelle(n) repariert.\n" : "$gesamt Stelle(n) gefunden. Mit --schreiben anwenden.\n";

scripts/reset-ebsolar.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+# Wirft die EB-Solar-Installation weg und baut sie neu auf. Nur fuer den Aufbau gedacht.
+set -e
+root="C:/Django Project/KantSites"
+php="${PHP_BINARY:-C:/php84/php.exe}"
+export DATABASE_URL="sqlite:///$root/var/ebsolar.db"
+export MEDIA_DIRECTORY="$root/var/ebsolar-media"
+rm -f "$root/var/ebsolar.db"
+rm -rf "$root/var/ebsolar-media"
+"$php" vendor/bin/doctrine-migrations migrate --no-interaction -q
+assets="${1:-$root/var/ebsolar-assets}"
+# Die Vorlage nutzt Arial; es gibt keine Schrift zu holen.
+"$php" -d memory_limit=512M scripts/seed-ebsolar.php "$assets"

scripts/seed-immobilien-deeg.php

@@ -283,7 +283,7 @@ $theme->save(
         ['key' => 'body', 'name' => 'Fließtext', 'family' => 'Arial', 'source' => 'system', 'weights' => [400, 600, 700], 'fallback' => 'sans-serif'],
         ['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Arial', 'source' => 'system', 'weights' => [400, 700], 'fallback' => 'sans-serif'],
     ],
-    ['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '16px', 'lineHeight' => 1.6, 'color' => '@anthrazit', 'backgroundColor' => '@papier', 'linkColor' => '@anthrazit', 'containerWidth' => '1320px', 'headingScale' => 1.25, 'linkUnderline' => false],
+    ['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '16px', 'lineHeight' => 1.6, 'color' => '@anthrazit', 'backgroundColor' => '@papier', 'linkColor' => '@anthrazit', 'containerWidth' => '1320px', 'headingScale' => 1.25, 'linkUnderline' => false, 'imageRadius' => '0px'],
     ['shape' => 'square', 'appearance' => 'solid', 'size' => 'normal', 'fontFamily' => 'inherit', 'fontSize' => 14, 'fontWeight' => 600, 'letterSpacing' => 0, 'textTransform' => 'none', 'backgroundColor' => '@blau-tief', 'color' => '@papier', 'hoverBackgroundColor' => '@blau-dunkel', 'hoverColor' => '@papier'],
 );
 echo "Farben, Schriften und Buttons gesetzt\n";

src/Command/RepairEntitiesCommand.php

@@ -0,0 +1,152 @@
+<?php
+
+namespace App\Command;
+
+use App\Content\DocumentValidator;
+use Doctrine\DBAL\Connection;
+use Symfony\Component\Console\Attribute\AsCommand;
+use Symfony\Component\Console\Command\Command;
+use Symfony\Component\Console\Input\InputInterface;
+use Symfony\Component\Console\Input\InputOption;
+use Symfony\Component\Console\Output\OutputInterface;
+use Symfony\Component\Console\Style\SymfonyStyle;
+
+/**
+ * Räumt Texte auf, die vor 1.20.1 bei jedem Speichern eine Kodierungsstufe dazubekommen haben.
+ *
+ * `RichText::sanitise()` hat Text ohne ein einziges Tag nur escaped, statt ihn vorher zu
+ * dekodieren. Aus „Freudenstadt &amp; Umgebung“ wurde deshalb `&amp;amp;`, dann `&amp;amp;amp;`
+ * – bis die Entity sichtbar auf der Seite stand. Der Fehler ist behoben; dieser Befehl bringt in
+ * Ordnung, was schon in der Datenbank liegt.
+ *
+ * Angefasst wird, was in Gebrauch ist: die veröffentlichte und die Entwurfsfassung jeder Seite
+ * und die Bereiche. Ältere Fassungen bleiben Historie – wer eine zurückholt, speichert sie
+ * danach einmal, und der reparierte Kern schreibt sie richtig.
+ */
+#[AsCommand(name: 'cms:repair:entities', description: 'Repariert doppelt kodierte Texte (&amp;amp;) aus Fassungen vor 1.20.1.')]
+final class RepairEntitiesCommand extends Command
+{
+    public function __construct(private Connection $db, private DocumentValidator $validator)
+    {
+        parent::__construct();
+    }
+
+    protected function configure(): void
+    {
+        $this->addOption('schreiben', null, InputOption::VALUE_NONE, 'Die Korrekturen wirklich speichern. Ohne diese Option wird nur gezeigt, was sich ändern würde.');
+    }
+
+    protected function execute(InputInterface $input, OutputInterface $output): int
+    {
+        $io = new SymfonyStyle($input, $output);
+        $schreiben = (bool) $input->getOption('schreiben');
+        $gesamt = 0;
+        $zeilen = [];
+
+        // Die aktiven Fassungen jeder Seite: veröffentlicht und Entwurf.
+        $aktive = [];
+        foreach ($this->db->fetchAllAssociative('SELECT id, path, published_revision_id, draft_revision_id FROM page') as $seite) {
+            foreach (['published_revision_id' => 'veröffentlicht', 'draft_revision_id' => 'Entwurf'] as $spalte => $was) {
+                if (!empty($seite[$spalte])) {
+                    $aktive[(string) $seite[$spalte]] = '/'.$seite['path'].' ('.$was.')';
+                }
+            }
+        }
+        foreach ($aktive as $revision => $bezeichnung) {
+            $roh = $this->db->fetchOne('SELECT document FROM revision WHERE id = ?', [$revision]);
+            if (!is_string($roh)) {
+                continue;
+            }
+            $dokument = json_decode($roh, true, 512, JSON_THROW_ON_ERROR);
+            $zahl = 0;
+            $beispiele = [];
+            $dokument['blocks'] = $this->bausteine($dokument['blocks'] ?? [], $zahl, $beispiele);
+            if (0 === $zahl) {
+                continue;
+            }
+            $gesamt += $zahl;
+            $zeilen[] = [$bezeichnung, $zahl, implode(' · ', $beispiele)];
+            if ($schreiben) {
+                // Geprüft wie beim Speichern: eine Korrektur darf kein ungültiges Dokument hinterlassen.
+                $this->validator->validate($dokument, writing: true);
+                $this->db->executeStatement('UPDATE revision SET document = ? WHERE id = ?', [$this->json($dokument), $revision]);
+            }
+        }
+
+        foreach ($this->db->fetchAllAssociative('SELECT id, kind, name, document FROM partial') as $bereich) {
+            $dokument = json_decode((string) $bereich['document'], true, 512, JSON_THROW_ON_ERROR);
+            $zahl = 0;
+            $beispiele = [];
+            $dokument['blocks'] = $this->bausteine($dokument['blocks'] ?? [], $zahl, $beispiele);
+            if (0 === $zahl) {
+                continue;
+            }
+            $gesamt += $zahl;
+            $zeilen[] = ['Bereich '.$bereich['kind'].' „'.$bereich['name'].'“', $zahl, implode(' · ', $beispiele)];
+            if ($schreiben) {
+                // Ein Bereich traegt keine Ueberschrift - genau wie im PartialRepository.
+                $this->validator->validate($dokument, requireHeading: false, writing: true);
+                $this->db->executeStatement('UPDATE partial SET document = ? WHERE id = ?', [$this->json($dokument), $bereich['id']]);
+            }
+        }
+
+        if (0 === $gesamt) {
+            $io->success('Nichts zu reparieren: kein Text trägt eine doppelt kodierte Entity.');
+
+            return Command::SUCCESS;
+        }
+        $io->table(['Wo', 'Stellen', 'Beispiel'], $zeilen);
+        if ($schreiben) {
+            $io->success(sprintf('%d Stelle(n) repariert.', $gesamt));
+
+            return Command::SUCCESS;
+        }
+        $io->warning(sprintf('%d Stelle(n) gefunden. Mit --schreiben anwenden.', $gesamt));
+
+        return Command::SUCCESS;
+    }
+
+    /** @param array<int, array<string, mixed>> $liste */
+    private function bausteine(array $liste, int &$zahl, array &$beispiele): array
+    {
+        foreach ($liste as $index => $block) {
+            foreach (['text', 'caption', 'label', 'title', 'hint', 'provider'] as $feld) {
+                $wert = $block['props'][$feld] ?? null;
+                if (!is_string($wert) || '' === $wert) {
+                    continue;
+                }
+                $neu = $this->entschachteln($wert);
+                if ($neu !== $wert) {
+                    $liste[$index]['props'][$feld] = $neu;
+                    ++$zahl;
+                    if (count($beispiele) < 3) {
+                        $beispiele[] = mb_substr($wert, 0, 40).' → '.mb_substr($neu, 0, 40);
+                    }
+                }
+            }
+            if (isset($block['children']) && is_array($block['children'])) {
+                $liste[$index]['children'] = $this->bausteine($block['children'], $zahl, $beispiele);
+            }
+        }
+
+        return $liste;
+    }
+
+    /** Entschachtelt so oft wie nötig: aus &amp;amp;amp; wird &amp;. Ein einzelnes &amp; ist richtig und bleibt. */
+    private function entschachteln(string $text): string
+    {
+        $vorher = null;
+        while ($vorher !== $text) {
+            $vorher = $text;
+            $text = preg_replace('/&amp;(amp|lt|gt|quot|apos|nbsp|#\d{1,6}|#x[0-9a-fA-F]{1,6});/', '&$1;', $text) ?? $text;
+        }
+
+        return $text;
+    }
+
+    /** @param array<string, mixed> $dokument */
+    private function json(array $dokument): string
+    {
+        return json_encode($dokument, JSON_THROW_ON_ERROR | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    }
+}

src/Content/CustomCode.php

@@ -193,17 +193,34 @@ final class CustomCode
             if (1 !== preg_match('/^[a-zA-Z0-9 .:>+~_\[\]="\'-]*$/D', $suffix)) {
                 throw new InvalidDocument(sprintf('„&%s“ ist als verschachtelter Selektor nicht erlaubt.', $suffix));
             }
-            $rules[$suffix] = $this->declarations($match[2][0]);
+            // Zusammenfuegen statt ersetzen: zweimal derselbe Selektor ist in CSS eine Kaskade,
+            // nicht ein Widerruf. Vorher gewann die letzte Regel, und alles, was nur in der
+            // ersten stand, verschwand ohne Meldung - gefunden am Projektraster von EB Solar,
+            // wo `& .post-card{border:0}` und `& .post-card{transform:none}` nebeneinander
+            // standen und der Rahmen des Kerns wieder auftauchte.
+            $rules[$suffix] = $this->verbinden($rules[$suffix] ?? '', $this->declarations($match[2][0]));
             $rest = substr_replace($rest, '', $match[0][1], strlen($match[0][0]));
         }
         if (str_contains($rest, '{') || str_contains($rest, '}')) {
             throw new InvalidDocument('Eigenes CSS besteht aus Eigenschaften für dieses Element und aus verschachtelten Regeln, die mit & beginnen. Andere Selektoren sind nicht vorgesehen.');
         }
-        $rules[''] = $this->declarations($rest);
+        // Die Eigenschaften des Elements selbst stehen ueblicherweise vor den verschachtelten
+        // Regeln; eine Regel `&{…}` schreibt sie aber in denselben Schluessel.
+        $rules[''] = $this->verbinden($this->declarations($rest), $rules['']);
 
         return $rules;
     }
 
+    /** Zwei Deklarationslisten desselben Selektors, in der Reihenfolge, in der sie standen. */
+    private function verbinden(string $erste, string $zweite): string
+    {
+        if ('' === $erste || '' === $zweite) {
+            return '' === $erste ? $zweite : $erste;
+        }
+
+        return $erste.';'.$zweite;
+    }
+
     /** @throws InvalidDocument */
     private function declarations(string $block): string
     {

src/Content/DemoContent.php

@@ -122,34 +122,75 @@ final class DemoContent
         ];
     }
 
-    /**
-     * The header and footer a fresh installation starts with. They are ordinary block documents:
-     * everything in them can be changed, moved or removed in the editor. No main heading, because
-     * every page brings its own.
-     *
-     * @return array<string, array{name: string, document: array}>
-     */
     /**
      * The start page of a fresh installation - not demo content.
      *
-     * Short on purpose. Somebody who has just installed should find a page they can edit, not a
-     * brochure about the CMS they have to delete first. Exactly one H1, as every page requires.
+     * A website that is already reachable but not yet written needs a page that says exactly that:
+     * the name of the site, the notice that something is being built here, and nothing else. No
+     * instructions for the owner - those stand on the last screen of the installer and in the
+     * admin area, not on a page every visitor sees. Exactly one H1, as every page requires.
      */
     public static function starterPage(string $siteName): array
     {
         return [
-            'schemaVersion' => 16,
+            'schemaVersion' => 24,
             'title' => $siteName,
-            'description' => 'NOCH AUSZUFÜLLEN: ein Satz darüber, was es hier gibt. Er erscheint in Suchergebnissen.',
+            'description' => 'Hier entsteht eine neue Webpräsenz. Diese Seite wird gerade eingerichtet.',
             'blocks' => [
-                self::section('start-hero', [
-                    self::heading('start-heading', $siteName, 1),
-                    self::text('start-intro', 'Diese Seite ist der Anfang. Melde dich an, öffne sie im Editor und ersetze diesen Text durch deinen eigenen.'),
-                ], 'mint'),
-                self::section('start-body', [
-                    self::heading('start-next-heading', 'Die nächsten Schritte', 2),
-                    self::text('start-next', "Impressum und Datenschutzerklärung sind bereits angelegt und müssen noch ausgefüllt werden – die Pflichtangaben sind darin markiert.\n\nUnter „Design“ legst du Farben, Schriften und die Breite fest, unter „Menüs“ die Navigation, unter „Einstellungen“ den Namen und die Angaben zum Unternehmen."),
-                ], 'paper', 'narrow'),
+                [
+                    'id' => 'start-hero',
+                    'type' => 'section',
+                    'layout' => ['tone' => 'mint', 'width' => 'narrow'],
+                    'style' => [
+                        // Eine Seite ohne Inhalt: der Abschnitt füllt den Bildschirm und stellt das
+                        // Wenige, das dasteht, in die Mitte, statt es oben in eine Ecke zu setzen.
+                        'desktop' => [
+                            'display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center',
+                            'minHeight' => '70vh', 'textAlign' => 'center',
+                            'padding' => ['top' => '96px', 'bottom' => '96px'],
+                            'gradientFrom' => '@paper', 'gradientTo' => '@mint', 'gradientAngle' => 165,
+                        ],
+                        'mobile' => ['minHeight' => 'auto', 'padding' => ['top' => '64px', 'bottom' => '64px']],
+                    ],
+                    'children' => [
+                        [
+                            'id' => 'start-logo',
+                            'type' => 'image',
+                            'props' => ['src' => '/assets/kantsites-logo.svg', 'alt' => 'KantSites', 'decorative' => false, 'width' => 128, 'height' => 128],
+                            'style' => ['desktop' => ['maxWidth' => '86px', 'margin' => ['left' => 'auto', 'right' => 'auto', 'bottom' => '30px']]],
+                        ],
+                        [
+                            'id' => 'start-label',
+                            'type' => 'text',
+                            'props' => ['text' => 'In Arbeit'],
+                            'style' => ['desktop' => [
+                                'fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '2px',
+                                'textTransform' => 'uppercase', 'color' => '@accent', 'margin' => ['bottom' => '16px'],
+                            ]],
+                        ],
+                        self::heading('start-heading', $siteName, 1),
+                        [
+                            'id' => 'start-intro',
+                            'type' => 'text',
+                            'props' => ['text' => 'Hier entsteht eine neue Webpräsenz.'],
+                            'style' => ['desktop' => [
+                                'fontSize' => '21px', 'maxWidth' => '38ch',
+                                'margin' => ['left' => 'auto', 'right' => 'auto', 'bottom' => '0px'],
+                            ]],
+                        ],
+                        [
+                            'id' => 'start-rule',
+                            'type' => 'divider',
+                            'style' => ['desktop' => ['width' => '72px', 'margin' => ['top' => '40px', 'right' => 'auto', 'bottom' => '22px', 'left' => 'auto']]],
+                        ],
+                        [
+                            'id' => 'start-note',
+                            'type' => 'text',
+                            'props' => ['text' => 'Erstellt mit KantSites'],
+                            'style' => ['desktop' => ['fontSize' => '14px', 'letterSpacing' => '0.4px', 'margin' => ['bottom' => '0px']]],
+                        ],
+                    ],
+                ],
             ],
         ];
     }
@@ -164,6 +205,13 @@ final class DemoContent
         return $areas;
     }
 
+    /**
+     * The header and footer a fresh installation starts with. They are ordinary block documents:
+     * everything in them can be changed, moved or removed in the editor. No main heading, because
+     * every page brings its own.
+     *
+     * @return array<string, array{name: string, document: array}>
+     */
     public static function areas(): array
     {
         $row = static fn (string $id, array $children): array => [

src/Content/DocumentValidator.php

@@ -16,7 +16,7 @@ final class DocumentValidator
     /** Blocks introduced with schema v6 for the sections a marketing page actually needs. */
     public const V6_TYPES = ['iconcard', 'stat', 'quote', 'logos', 'cta', 'contact', 'divider', 'spacer', 'accordion', 'accordionitem'];
     /** Icons ship as inline SVG from this fixed list; no icon font and no external request. */
-    public const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check', 'people', 'music', 'home'];
+    public const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check', 'people', 'music', 'home', 'arrow-right', 'arrow-left', 'arrow-up-right'];
     public const SPACER_SIZES = ['small', 'medium', 'large', 'huge'];
     /** Schema v7: tabs, the one pattern that needs a script to become a real widget. */
     public const V7_TYPES = ['tabs', 'tabitem'];

src/Content/Theme.php

@@ -68,6 +68,10 @@ final class Theme
             'linkColor' => '@link',
             'containerWidth' => '1240px',
             'headingScale' => 1.25,
+            // Die Ecken jedes Bildes auf der Website. Stand bis 1.20.2 fest im Stylesheet -
+            // sichtbar gerundet, aber in keinem Feld zu finden. 12px bleibt die Vorgabe,
+            // damit bestehende Websites gleich aussehen; 0px macht Bilder eckig.
+            'imageRadius' => '12px',
             // Unterstrichene Links im Fließtext. An, weil ein Link, den nur die Farbe verrät,
             // für Menschen mit Farbsehschwäche kein Link ist. Wer eine ruhigere Seite will,
             // schaltet es hier ab - dann bleibt der Unterstrich beim Überfahren.
@@ -229,7 +233,7 @@ final class Theme
             }
             $base[$field] = $value;
         }
-        foreach (['fontSize', 'containerWidth'] as $field) {
+        foreach (['fontSize', 'containerWidth', 'imageRadius'] as $field) {
             $value = trim((string) ($input[$field] ?? $base[$field]));
             if (1 !== preg_match(StyleSchema::LENGTH, $value)) {
                 throw new InvalidPage(sprintf('„%s“ ist keine Größenangabe wie 18px oder 70rem.', $value));
@@ -338,6 +342,7 @@ final class Theme
         }
         $base = $theme['base'];
         $variables[] = sprintf('--k-container:%s', $base['containerWidth']);
+        $variables[] = sprintf('--k-image-radius:%s', $base['imageRadius']);
 
         $colour = static fn (string $v): string => str_starts_with($v, '@') ? sprintf('var(--k-%s)', substr($v, 1)) : $v;
 

src/Controller/PageController.php

@@ -31,6 +31,9 @@ final class PageController extends AbstractController
     {
     }
 
+    /** Dieselbe Groessenangabe, die `blocks/block.html.twig` einem Bild ohne feste Breite gibt. */
+    private const IMAGE_SIZES = '(max-width: 650px) 100vw, (max-width: 1024px) 50vw, 800px';
+
     // A segment is a slug; up to four of them form the public path. The leading lookahead keeps
     // the CMS routes (/admin, /media, /assets) out of the catch-all, which matches before them.
     private const PATH = '(?!admin(?:/|$)|media/|assets/|kategorie/|schlagwort/|beitraege(?:/|$)|einwilligung$|feed\.xml$|sitemap\.xml$|robots\.txt$|llms\.txt$)[a-z0-9]+(?:-[a-z0-9]+)*(?:/[a-z0-9]+(?:-[a-z0-9]+)*){0,3}';
@@ -209,10 +212,14 @@ final class PageController extends AbstractController
             // Das grosse Bild ueber der Falz - es soll zuerst geladen werden. Gesucht wird nur
             // im ersten Abschnitt des Inhalts: ein Bild weiter unten waere die falsche
             // Eile, und das Logo im Kopfbereich ist klein und laedt ohnehin sofort.
-            'eagerImage' => $this->firstImage(['blocks' => array_slice($page['document']['blocks'] ?? [], 0, 1)]),
+            'eagerImage' => $eagerImage = $this->firstImage(['blocks' => array_slice($page['document']['blocks'] ?? [], 0, 1)]),
             // Und das Gegenstueck fuer den haeufigeren Fall: Das grosse Bild ueber der Falz
             // ist gar kein Bild, sondern der Hintergrund des ersten Abschnitts.
-            'heroBackground' => $this->heroBackground($areas['header'] ?? null, $page['document']),
+            'heroBackground' => $heroBackground = $this->heroBackground($areas['header'] ?? null, $page['document']),
+            // Ist es doch ein gewoehnliches Bild, wird auch das vorab geholt - sonst findet der
+            // Browser es erst, wenn das Stylesheet steht, und diese Rundreise geht direkt in die
+            // LCP-Zeit. Nur eines von beiden: zwei grosse Bilder vorab kosten mehr, als sie bringen.
+            'heroImage' => [] === $heroBackground ? $this->heroImage($page['document'], $eagerImage) : null,
             'pageStyles' => $styles,
             'localFonts' => $localFonts,
             'styleBundle' => $this->bundle->url([] !== $localFonts),
@@ -772,6 +779,55 @@ final class PageController extends AbstractController
         return [];
     }
 
+    /**
+     * Das vorgezogene Bild als Vorabladung im Kopf der Seite.
+     *
+     * Die Angaben sind dieselben, die `blocks/block.html.twig` an das `img` schreibt - Quelle,
+     * Satz der Varianten und die Groessenangabe. Weicht eines davon ab, waehlt der Browser fuer
+     * die Vorabladung eine andere Variante als fuer das Bild und laedt zweimal.
+     *
+     * @return array{src: string, srcset: string, sizes: string}|null
+     */
+    private function heroImage(array $document, ?string $eagerImage): ?array
+    {
+        if (null === $eagerImage) {
+            return null;
+        }
+        $block = $this->blockById($document['blocks'] ?? [], $eagerImage);
+        $props = $block['props'] ?? [];
+        if (null === $block || 'image' !== ($block['type'] ?? null) || '' === (string) ($props['src'] ?? '')) {
+            return null;
+        }
+        $varianten = [];
+        foreach (is_array($props['sources'] ?? null) ? $props['sources'] : [] as $quelle) {
+            if (is_array($quelle) && isset($quelle['src'], $quelle['width'])) {
+                $varianten[] = $quelle['src'].' '.$quelle['width'].'w';
+            }
+        }
+        $feste = (string) ($block['style']['desktop']['maxWidth'] ?? '');
+
+        return [
+            'src' => (string) $props['src'],
+            'srcset' => implode(', ', $varianten),
+            'sizes' => str_ends_with($feste, 'px') ? $feste : self::IMAGE_SIZES,
+        ];
+    }
+
+    private function blockById(array $blocks, string $id): ?array
+    {
+        foreach ($blocks as $block) {
+            if ($id === ($block['id'] ?? null)) {
+                return $block;
+            }
+            $inside = $this->blockById($block['children'] ?? [], $id);
+            if (null !== $inside) {
+                return $inside;
+            }
+        }
+
+        return null;
+    }
+
     private function firstImage(array ...$documents): ?string
     {
         foreach ($documents as $document) {

templates/admin/theme.html.twig

@@ -162,6 +162,11 @@
                         <input id="base-scale" name="base[headingScale]" type="number" step="0.01" min="1" max="2" value="{{ theme.base.headingScale }}">
                         <p class="field-help">1,25 ergibt eine ruhige Staffelung, 1,5 eine sehr kontrastreiche.</p>
                     </div>
+                    <div>
+                        <label for="base-image-radius">Bildecken</label>
+                        <input id="base-image-radius" name="base[imageRadius]" value="{{ theme.base.imageRadius }}" placeholder="12px">
+                        <p class="field-help">Gilt für jedes Bild auf der Website – auch in Galerien, Logoleisten und Beitragslisten. <code>0px</code> macht sie eckig. Ein einzelnes Bild lässt sich im Editor unter <strong>Design → Bild → Bildecken</strong> abweichend einstellen.</p>
+                    </div>
                     <div>
                         <label for="base-container">Inhaltsbreite</label>
                         <input id="base-container" name="base[containerWidth]" value="{{ theme.base.containerWidth }}" placeholder="1240px">

templates/blocks/block.html.twig

@@ -26,7 +26,7 @@
     {% endif %}
 {% elseif type == 'button' %}
     {% for device, settings in layout.button|default({}) %}{% for key, value in settings %}{% set designClasses = designClasses ~ ' b-' ~ device ~ '-' ~ key ~ '-' ~ value %}{% endfor %}{% endfor %}
-    <a id="{{ block.id }}" class="button cms-button{{ designClasses }}" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.text }} <span aria-hidden="true">↗</span></a>
+    <a id="{{ block.id }}" class="button cms-button{{ designClasses }}" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.text }} <span class="button-arrow" aria-hidden="true">{% include 'blocks/icon.html.twig' with {name: 'arrow-up-right'} only %}</span></a>
 {% elseif type == 'image' %}
     {# Wie breit das Bild tatsaechlich erscheint. Steht im Block eine feste Breite - ein Logo mit
        190px, ein Symbol mit 72px -, dann ist das die Antwort, und der Browser laedt die kleine

templates/blocks/icon.html.twig

@@ -16,6 +16,9 @@
     check: 'm4 12.5 5.5 5.5L20 6',
     people: 'M9.5 11.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2.5 20v-1c0-3.3 3-5 7-5s7 1.7 7 5v1M16.5 5.3a3.2 3.2 0 0 1 0 6.4M18 14.4c2.1.7 3.5 2.1 3.5 4.1V20',
     music: 'M10 18V5.5L20 3v12.5M10 9.5 20 7M10 18a3 2.5 0 1 0-6 0 3 2.5 0 0 0 6 0ZM20 15.5a3 2.5 0 1 0-6 0 3 2.5 0 0 0 6 0Z',
-    home: 'm3 11.5 9-7.5 9 7.5M5.5 10v10h13V10M10 20v-6.5h4V20'
+    home: 'm3 11.5 9-7.5 9 7.5M5.5 10v10h13V10M10 20v-6.5h4V20',
+    'arrow-right': 'M4 12h15.5m-6.5-6.5 6.5 6.5-6.5 6.5',
+    'arrow-left': 'M20 12H4.5M11 5.5 4.5 12 11 18.5',
+    'arrow-up-right': 'M6.5 17.5 17.5 6.5M8.5 6.5h9v9'
 } %}
 <svg class="block-icon" viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="{{ paths[name] }}"/></svg>

templates/blocks/post-nav.html.twig

@@ -4,13 +4,13 @@
 <nav class="post-nav" aria-label="Weitere Beiträge">
     {% if previous %}
     <a class="post-nav-link post-nav-previous" href="{{ previous.href }}">
-        <span class="post-nav-label"><span aria-hidden="true">←</span> {{ previousLabel|default('Vorheriger Beitrag') }}</span>
+        <span class="post-nav-label"><span class="nav-arrow" aria-hidden="true">{% include 'blocks/icon.html.twig' with {name: 'arrow-left'} only %}</span> {{ previousLabel|default('Vorheriger Beitrag') }}</span>
         <span class="post-nav-title">{{ previous.title }}</span>
     </a>
     {% else %}<span></span>{% endif %}
     {% if next %}
     <a class="post-nav-link post-nav-next" href="{{ next.href }}">
-        <span class="post-nav-label">{{ nextLabel|default('Nächster Beitrag') }} <span aria-hidden="true">→</span></span>
+        <span class="post-nav-label">{{ nextLabel|default('Nächster Beitrag') }} <span class="nav-arrow" aria-hidden="true">{% include 'blocks/icon.html.twig' with {name: 'arrow-right'} only %}</span></span>
         <span class="post-nav-title">{{ next.title }}</span>
     </a>
     {% endif %}

templates/page.html.twig

@@ -34,6 +34,10 @@
        drei Abfragen trifft zu - und zwar auf dieselbe Variante, die auch die Regel nimmt. #}
     {% for bild in heroBackground|default([]) %}<link rel="preload" as="image" href="{{ bild.src }}" media="{{ bild.media }}" fetchpriority="high">
     {% endfor %}
+    {# Und derselbe Dienst fuer das gewoehnliche Bild ueber der Falz: ohne diese Zeile faengt der
+       Browser es erst an zu holen, wenn er das Stylesheet geparst hat. #}
+    {% if heroImage|default(null) %}<link rel="preload" as="image" href="{{ heroImage.src }}"{% if heroImage.srcset %} imagesrcset="{{ heroImage.srcset }}" imagesizes="{{ heroImage.sizes }}"{% endif %} fetchpriority="high">
+    {% endif %}
     {% if localFonts|default([]) %}
     {# Jeder Schnitt, den das Theme nennt, vorab - und zwar alle. Fehlt einer, laedt er erst,
        wenn das Stylesheet geparst ist, und die Ueberschrift springt sichtbar von der

tests/CmsTest.php

@@ -1398,8 +1398,11 @@ final class CmsTest extends TestCase
         $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
         $html = $this->request('/')->getContent();
 
-        // Genau ein Bild wird vorgezogen, und zwar das erste im ersten Abschnitt.
-        self::assertSame(1, substr_count($html, 'fetchpriority="high"'));
+        // Genau ein Bild wird vorgezogen, und zwar das erste im ersten Abschnitt. Es wird
+        // zweimal genannt: einmal als Vorabladung im Kopf, einmal als das Bild selbst.
+        self::assertSame(1, substr_count($html, '<link rel="preload" as="image"'));
+        self::assertMatchesRegularExpression('#<link rel="preload" as="image" href="[^"]+" imagesrcset="[^"]*480w[^"]*" imagesizes="\(max-width: 650px\) 100vw[^"]*" fetchpriority="high">#', $html);
+        self::assertSame(2, substr_count($html, 'fetchpriority="high"'));
         self::assertMatchesRegularExpression('#<figure id="gross".{0,400}fetchpriority="high"#s', $html);
         self::assertMatchesRegularExpression('#<figure id="weiter-unten".{0,400}loading="lazy"#s', $html);
         // Ein Block mit fester Breite fragt nach genau dieser Breite.
@@ -1944,7 +1947,8 @@ final class CmsTest extends TestCase
         $template = (string) file_get_contents(__DIR__.'/../templates/blocks/icon.html.twig');
         foreach (DocumentValidator::ICONS as $icon) {
             self::assertMatchesRegularExpression(
-                '/\R\s{4}'.preg_quote($icon, '/').": '[^']{4,}',?\R/",
+                // Ein Name mit Bindestrich braucht in Twig Anfuehrungszeichen um den Schluessel.
+                '/\R\s{4}\'?'.preg_quote($icon, '/')."'?: '[^']{4,}',?\R/",
                 $template,
                 sprintf('Das Symbol „%s“ steht in der Liste, hat aber keine Zeichnung.', $icon),
             );
@@ -2983,6 +2987,12 @@ final class CmsTest extends TestCase
         yield 'descendant keeps its space' => ['& .block-text { font-size: 20px }', '#b1 .block-text{font-size:20px}'];
         yield 'child combinator' => ['& > p { margin: 0 }', '#b1 > p{margin:0}'];
         yield 'local image' => ['background: url(/bild.png)', '#b1{background:url(/bild.png)}'];
+        // Zweimal derselbe Selektor ist eine Kaskade, kein Widerruf: vorher gewann die letzte
+        // Regel, und was nur in der ersten stand, verschwand ohne Meldung.
+        yield 'same selector twice' => ['& .card { border: 0 }
+& .card { transform: none }', '#b1 .card{border:0;transform:none}'];
+        yield 'element rule after a nested one' => ['& { color: red }
+display: flex', '#b1{display:flex;color:red}'];
     }
 
     #[DataProvider('ownCssCases')]
@@ -3111,6 +3121,34 @@ final class CmsTest extends TestCase
         $code->assertScriptsUnchanged($added, $before);
     }
 
+    public function testImageCornersComeFromTheDesignAreaAndCanBeSquare(): void
+    {
+        // Die Ecken jedes Bildes standen fest im Stylesheet: sichtbar gerundet, in keinem Feld
+        // zu finden, nur durch einen eigenen Wert am Block loszuwerden. Jetzt gehoeren sie dem
+        // Designbereich - mit derselben Vorgabe wie vorher, damit sich nichts veraendert.
+        $theme = $this->themes->load();
+        self::assertSame('12px', $theme['base']['imageRadius'], 'Die Vorgabe bleibt, was vorher im Stylesheet stand.');
+
+        $document = DemoContent::starter('Mit Bild');
+        $document['blocks'][0]['children'][] = ['id' => 'bild', 'type' => 'image', 'props' => ['src' => '/assets/image-placeholder.svg', 'alt' => 'Platzhalter', 'decorative' => false, 'width' => 1000, 'height' => 600]];
+        $id = $this->publishedPage('ecken', 'Ecken');
+        $stand = $this->pages->findForEditor($id);
+        $this->pages->publish($id, $this->pages->saveDraft($id, $document, $stand['version']), $this->pages->findForEditor($id)['version']);
+
+        self::assertStringContainsString('--k-image-radius:12px', $this->request('/ecken')->getContent());
+
+        // Eckig, wie es eine Vorlage ohne Rundungen braucht.
+        $this->themes->save($theme['colors'], $theme['fonts'], [...$theme['base'], 'imageRadius' => '0px']);
+        self::assertStringContainsString('--k-image-radius:0px', $this->request('/ecken')->getContent());
+
+        // Und was keine Groessenangabe ist, wird abgewiesen - wie bei der Inhaltsbreite.
+        try {
+            $this->themes->save($theme['colors'], $theme['fonts'], [...$theme['base'], 'imageRadius' => 'rund']);
+            self::fail('„rund“ ist keine Groessenangabe.');
+        } catch (InvalidPage) {
+        }
+    }
+
     public function testSavingTextTwiceKeepsAmpersandsAndLineBreaksAsTheyAre(): void
     {
         // Umut: „Beim Startseitenbild wird & umgewandelt, aber nach dem Speichern steht &amp;

tests/InstallFlowTest.php

@@ -98,7 +98,7 @@ final class InstallFlowTest extends TestCase
         $home = $this->request('/');
         self::assertSame(200, $home->getStatusCode());
         self::assertStringContainsString('Beispiel GmbH', $home->getContent());
-        self::assertStringContainsString('Diese Seite ist der Anfang.', $home->getContent());
+        self::assertStringContainsString('Hier entsteht eine neue Webpräsenz.', $home->getContent());
         // The public page is still a public page: no script, and the header carries the name.
         self::assertStringContainsString("script-src 'none'", (string) $home->headers->get('Content-Security-Policy'));
         self::assertSame(200, $this->request('/impressum')->getStatusCode());

tests/RepairEntitiesCommandTest.php

@@ -0,0 +1,107 @@
+<?php
+
+namespace App\Tests;
+
+use App\Command\RepairEntitiesCommand;
+use App\Content\DocumentValidator;
+use App\Infrastructure\ConnectionFactory;
+use Doctrine\DBAL\Connection;
+use PHPUnit\Framework\TestCase;
+use Symfony\Component\Console\Tester\CommandTester;
+
+/**
+ * `cms:repair:entities` räumt auf, was das doppelte Kodieren vor 1.20.1 hinterlassen hat.
+ *
+ * Geprüft wird beides: dass der Trockenlauf nichts anfasst, und dass das Schreiben genau die
+ * verschachtelten Entities entschachtelt – ein einzelnes `&amp;` ist richtig und muss bleiben.
+ */
+final class RepairEntitiesCommandTest extends TestCase
+{
+    private string $path;
+    private Connection $db;
+
+    protected function setUp(): void
+    {
+        $this->path = tempnam(sys_get_temp_dir(), 'kant-repair-');
+        $this->db = ConnectionFactory::create('sqlite:///'.str_replace('\\', '/', $this->path));
+        TestSchema::build($this->db);
+        $this->db->insert('website', ['id' => 'default', 'name' => 'KantSites', 'default_locale' => 'de', 'theme' => '{}']);
+    }
+
+    protected function tearDown(): void
+    {
+        $this->db->close();
+        gc_collect_cycles();
+        @unlink($this->path);
+    }
+
+    /** Legt eine Seite mit einem Text an und gibt die Kennung der Fassung zurück. */
+    private function seite(string $text): string
+    {
+        $dokument = [
+            'schemaVersion' => 17,
+            'title' => 'Start',
+            'description' => 'Eine Seite zum Reparieren.',
+            'blocks' => [['id' => 's1', 'type' => 'section', 'children' => [
+                ['id' => 'h1', 'type' => 'heading', 'props' => ['text' => 'Start', 'level' => 1]],
+                ['id' => 't1', 'type' => 'text', 'props' => ['text' => $text]],
+            ]]],
+        ];
+        // Erst die Seite, dann ihre Fassung: die Fassung zeigt per Fremdschluessel auf die Seite.
+        $revision = bin2hex(random_bytes(16));
+        $this->db->insert('page', ['id' => 'page-1', 'slug' => 'home', 'path' => 'home', 'type' => 'page', 'locale' => 'de', 'website_id' => 'default', 'version' => 1, 'created_at' => gmdate('Y-m-d H:i:s')]);
+        $this->db->insert('revision', ['id' => $revision, 'page_id' => 'page-1', 'document' => json_encode($dokument, JSON_THROW_ON_ERROR), 'created_at' => gmdate('Y-m-d H:i:s')]);
+        $this->db->update('page', ['published_revision_id' => $revision, 'draft_revision_id' => $revision], ['id' => 'page-1']);
+
+        return $revision;
+    }
+
+    private function text(string $revision): string
+    {
+        $dokument = json_decode((string) $this->db->fetchOne('SELECT document FROM revision WHERE id = ?', [$revision]), true, 512, JSON_THROW_ON_ERROR);
+
+        return $dokument['blocks'][0]['children'][1]['props']['text'];
+    }
+
+    private function tester(): CommandTester
+    {
+        return new CommandTester(new RepairEntitiesCommand($this->db, new DocumentValidator()));
+    }
+
+    public function testTheDryRunReportsWithoutChangingAnything(): void
+    {
+        $revision = $this->seite('Freudenstadt &amp;amp; Umgebung');
+        $tester = $this->tester();
+        $tester->execute([]);
+
+        self::assertStringContainsString('1 Stelle', $tester->getDisplay());
+        self::assertSame('Freudenstadt &amp;amp; Umgebung', $this->text($revision), 'Ohne --schreiben bleibt alles stehen.');
+    }
+
+    public function testWritingUnnestsEveryLevelAndLeavesASingleEntityAlone(): void
+    {
+        // Drei Stufen, wie sie auf einer Seite standen, die dreimal gespeichert wurde.
+        $revision = $this->seite('Projekte &amp;amp;amp; Lösungen, „Zitat&amp;quot;, und ein richtiges &amp; dazu');
+        $tester = $this->tester();
+        $tester->execute(['--schreiben' => true]);
+
+        self::assertStringContainsString('repariert', $tester->getDisplay());
+        self::assertSame('Projekte &amp; Lösungen, „Zitat&quot;, und ein richtiges &amp; dazu', $this->text($revision));
+
+        // Ein zweiter Lauf findet nichts mehr - und macht aus dem richtigen &amp; kein nacktes &.
+        $zweiter = $this->tester();
+        $zweiter->execute(['--schreiben' => true]);
+        self::assertStringContainsString('Nichts zu reparieren', $zweiter->getDisplay());
+        self::assertSame('Projekte &amp; Lösungen, „Zitat&quot;, und ein richtiges &amp; dazu', $this->text($revision));
+    }
+
+    public function testAnUntouchedInstallationSaysSoAndKeepsQuiet(): void
+    {
+        $revision = $this->seite('Alles gut &amp; sauber');
+        $tester = $this->tester();
+        $tester->execute(['--schreiben' => true]);
+
+        self::assertStringContainsString('Nichts zu reparieren', $tester->getDisplay());
+        self::assertSame('Alles gut &amp; sauber', $this->text($revision));
+    }
+}