Release 1.24.0

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.claude/launch.json

@@ -128,6 +128,46 @@
         "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/kantarci-immobilien.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantarci-immobilien-media'; $env:SITE_ORIGIN='http://127.0.0.1:8099'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8099 -t public bin/dev-router.php"
       ],
       "port": 8099
+    },
+    {
+      "name": "kantarci-markt",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/kantarci-markt.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantarci-markt-media'; $env:SITE_ORIGIN='http://127.0.0.1:8100'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8100 -t public bin/dev-router.php"
+      ],
+      "port": 8100
+    },
+    {
+      "name": "kantarci-markt-prod",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/kantarci-markt.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantarci-markt-media'; $env:SITE_ORIGIN='http://127.0.0.1:8101'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8101 -t public bin/dev-router.php"
+      ],
+      "port": 8101
+    },
+    {
+      "name": "huefner",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/huefner.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/huefner-media'; $env:SITE_ORIGIN='http://127.0.0.1:8102'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8102 -t public bin/dev-router.php"
+      ],
+      "port": 8102
+    },
+    {
+      "name": "huefner-prod",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/huefner.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/huefner-media'; $env:SITE_ORIGIN='http://127.0.0.1:8103'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8103 -t public bin/dev-router.php"
+      ],
+      "port": 8103
     }
   ]
-}
+}

README.md

@@ -216,6 +216,8 @@ Unter `http://127.0.0.1:8080/admin` eine Seite auswählen. Links Blöcke hinzuf
 
 **Links und Bildvorschauen (ab 1.7.3):** Unter Linkziel steht **In neuem Tab öffnen** – für Buttons, verlinkte Bilder, Symbole, Symbolkarten und Aufruf-Bänder. Im Text zuerst den Link über die Werkzeugleiste öffnen; bei Menüeinträgen steht das Häkchen in den aufgeklappten Einstellungen. Ausgewählte Bilder und Galerie-/Logobilder zeigen eine Vorschau mit Entfernen-Funktion. „Bild entfernen“ entfernt das Bild aus dem Inhalt; die Datei bleibt in der Mediathek. Rückgängig stellt die Verwendung wieder her. Design → Hintergrund zeigt auch geerbte Bilder: Entfernen blendet das Bild auf dem aktiven und kleineren Geräten aus, Zurücksetzen stellt die Vererbung wieder her. Bildaustausch erhält Link, Bildunterschrift und eingestellte Größe. Prüfung mit isolierter Kant-IT-Kopie: `npm run test:link-media`, Bericht und Screenshots unter `reports/link-media/`. Datenvertrag und Rückweg: ADR 081 in `docs/ARCHITECTURE.md`.
 
+**Symbol am Button (Schema v25):** Button auswählen → Inhalt → **Symbol**. Die Kacheln zeigen jedes Symbol als Vorschau, geordnet nach Pfeilen, Kontakt und Allgemein; „Kein Symbol“ steht vorn. Darunter **Symbol steht: Vor dem Text / Nach dem Text**. Ohne eigene Wahl trägt ein Button wie bisher den schrägen Pfeil ↗. Die Kacheln bedienen sich auch mit den Pfeiltasten. Symbol und Symbolkarte wählen ihr Symbol mit derselben Auswahl. Prüfung mit isolierter Kant-IT-Kopie: `npm run test:button-icons`, Screenshots unter `reports/button-icons/`. Datenvertrag: ADR 108.
+
 Blöcke per Drag-and-drop verschieben: auf einen Container ziehen, um hineinzuverschieben; auf einen Text-/Bild-/Linkblock ziehen, um davor einzufügen. Alternativ unten am Strukturbaum die Schaltflächen für Auf/Ab, Verschachteln und Herausheben verwenden. Duplizieren vergibt neue Block-IDs und wandelt eine kopierte H1 in H2 um. Löschen lässt sich rückgängig machen. Jede speicherbare Seite benötigt genau eine H1.
 
 Undo/Redo gilt für die lokale Bearbeitung, `Strg+S` speichert den Entwurf. `Strg+Z`/`Strg+Umschalt+Z` gelten außerhalb der Texteingaben für das Dokument; Texteingaben behalten ihr natives Undo. Erst speichern, dann separat veröffentlichen. Die Bestätigungsdialoge unterstützen Escape und Fokus-Rückkehr. Reine Redakteure können nicht veröffentlichen; was Redakteur, Veröffentlicher und Administrator dürfen, steht unter Benutzer bei jeder Rolle und im Abschnitt „Rollen“ oben.
@@ -385,6 +387,14 @@ Der Redesign-Entwurf von ebsolar.de (Elektro Bernhard Regenerative Energie GmbH,
 
 Die Landingpage „KANTARCI Immobilien – Mietanfrage“ (KANTARCI Immobilien GmbH, Baden-Baden) liegt in `var/kantarci-immobilien.db` mit Medien in `var/kantarci-immobilien-media`; die Startkonfiguration `kantarci-immobilien` in `.claude/launch.json` nutzt Port 8098, `kantarci-immobilien-prod` denselben Bestand im Produktionsmodus auf Port 8099 zum Messen. `sh scripts/reset-kantarci-immobilien.sh [Bilderordner]` (Standard `var/kantarci-immobilien-assets` mit `kantarci-banner.jpeg` aus dem gelieferten Paket) schneidet Logo, Hausmotiv und Seitensymbol aus dem Banner (`scripts/build-kantarci-assets.php`), zeichnet die Bildkarten der Mietanfrage (`node scripts/build-kantarci-options.mjs`), wirft die Installation weg und baut mit `scripts/seed-kantarci-immobilien.php` Gestaltung, Kopf- und Fußbereich, Startseite, Impressum, Datenschutz, 404, Einstellungen und das Formular `mietanfrage` (drei Schritte mit Bildkarten und Zusammenfassung) auf. Schriften sind Arial und Georgia, es gibt nichts zu holen. Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts.
 
+### Achte lokale Referenzwebsite: Kantarci Markt (Vorab-Seite zur Neueröffnung)
+
+Die Seite „Kantarci Markt – Neueröffnung“ (Wilhelm-Drapp-Straße, Baden-Baden) liegt in `var/kantarci-markt.db` mit Medien in `var/kantarci-markt-media`; die Startkonfiguration `kantarci-markt` in `.claude/launch.json` nutzt Port 8100, `kantarci-markt-prod` denselben Bestand im Produktionsmodus auf Port 8101 zum Messen. `sh scripts/reset-kantarci-markt.sh [Bilderordner]` (Standard `var/kantarci-markt-assets` mit `kantarci-markt-logo.png`, `market.jpg` und `vegetables.jpg` aus dem gelieferten Paket) schneidet das Logo zu und rastert Seitensymbol und Stempel (`node scripts/build-kantarci-markt-assets.mjs`), wirft die Installation weg, baut mit `scripts/seed-kantarci-markt.php` Gestaltung, Kopf- und Fußbereich, Startseite, Impressum, Datenschutz, 404 und Einstellungen auf und holt DM Sans auf den eigenen Server (`cms:fonts:fetch`, ersetzt in `fonts.css` nur die Regeln für DM Sans). Gemessen mit `MSYS_NO_PATHCONV=1 CMS_URL=http://127.0.0.1:8101 CMS_PATHS=/,/impressum,/datenschutz CMS_AUDIT_DIR=reports/lighthouse-kantarci-markt node scripts/audit.mjs` (in Git Bash verhindert `MSYS_NO_PATHCONV`, dass `/impressum` zu einem Windows-Pfad wird). Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts. Die Demo der Eröffnungsseite liegt unter `/eroeffnung` (noindex) und bettet die Angebote aus `app.kantarci-markt.de` ein; die App erlaubt das nur von `localhost`, deshalb misst man sie mit `CMS_HOST_RULES="MAP localhost 127.0.0.1" CMS_URL=http://localhost:8101 CMS_PATHS=/eroeffnung`.
+
+### Neunte lokale Referenzwebsite: Hüfner Gartenbau
+
+Die Website der Garten- und Landschaftsbau Hüfner GmbH (Iffezheim) liegt in `var/huefner.db` mit Medien in `var/huefner-media`; die Startkonfiguration `huefner` in `.claude/launch.json` nutzt Port 8102, `huefner-prod` denselben Bestand im Produktionsmodus auf Port 8103 zum Messen. `sh scripts/reset-huefner.sh [Entwurfsordner]` kopiert die Fotos aus dem gelieferten Entwurf nach `var/huefner-assets` und schneidet den Baum aus dem Logo als Seitensymbol (`scripts/build-huefner-assets.php`; ohne Argument nimmt es die schon vorbereiteten Bilder), wirft die Installation weg, baut mit `scripts/seed-huefner.php` Gestaltung, Kopf- und Fußbereich, Startseite, Impressum, Datenschutz, 404, Menü, Einstellungen und das Formular `anfrage` auf und holt Barlow und Barlow Condensed auf den eigenen Server. Gemessen mit `MSYS_NO_PATHCONV=1 CMS_URL=http://127.0.0.1:8103 CMS_PATHS=/,/impressum,/datenschutz npm run audit`. Die bewussten Abweichungen vom Entwurf 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.22.1
+1.24.0

docs/ARCHITECTURE.md

@@ -2,6 +2,32 @@
 
 Stand: 15.09.2026. Arbeitstitel KantSites; Produktname offen.
 
+## ADR 108 – Das Symbol am Button ist wählbar, ausgewählt wird mit Kacheln (07.10.2026)
+
+Umut: „Buttons mit Icon? Geht das, wenn ja wo? Und einfacher Button ist ein Pfeil, wie ändere ich das?“ – und dann: „Ein Satz Symbole, die man so alltäglich brauchen könnte, und schöne Vorschau-Auswahl, bitte kein Dropdown mit Suche.“ Bis hierher hängte `block.html.twig` jedem Button fest `arrow-up-right` an, auch dem Textlink. Ändern ging nur über eigenes CSS (Hüfner blendet den Pfeil so aus, EB Solar drehte ihn).
+
+**Datenvertrag (Schema v25).** Zwei neue, optionale Eigenschaften am Button: `icon` – ein Name aus `DocumentValidator::ICONS` oder `none` – und `iconPosition` – `start` oder `end`. Fehlt `icon`, bleibt es beim schrägen Pfeil (`BUTTON_DEFAULT_ICON`); fehlt `iconPosition`, steht das Symbol hinter dem Text. Ein Dokument ohne die beiden Felder sieht also genau aus wie vorher und braucht keinen Migrationsweg. Beide Felder verlangen v25, damit ein älterer Kern ein Dokument mit Symbolwahl ablehnt, statt es still mit Pfeil zu zeigen. Der Editor hebt das Dokument bei der ersten Wahl an, und `repairSchema` tut es beim Laden.
+
+**Kompatibilität mit eigenem CSS.** Die Hülle des Symbols heißt jetzt `button-icon`. Der Standardpfeil trägt zusätzlich weiter `button-arrow`, damit Regeln wie `& .button-arrow{display:none}` auf bestehenden Websites wirken wie bisher. Wer dort ein anderes Symbol wählt, bekommt es sichtbar – die alte Regel trifft es nicht. Die Farb- und Größenregeln aus ADR 107 gelten jetzt für `button-icon`.
+
+**Symbolsatz.** Dreizehn alltägliche Symbole kommen dazu: Pfeil nach unten, Winkel, Kalender, Nachricht, Senden, Download, Dokument, Abspielen, Suche, Herz, Info, Plus, Person. Sie stehen allen Bausteinen mit Symbol offen (Symbol, Symbolkarte, Button), nicht nur dem Button; das erweitert eine bestehende Liste und braucht wie ADR 107 kein neues Schema. Keine Markenzeichen (etwa WhatsApp): deren Logos haben eigene Nutzungsregeln.
+
+**Auswahl mit Kacheln.** `public/assets/icons.js` hält Pfade, deutsche Namen und die Gruppen (Pfeile, Kontakt, Allgemein; bei Symbol und Symbolkarte zusätzlich „Weitere“) und zeichnet die Auswahl: jedes Symbol ein Knopf mit seiner Zeichnung und `aria-pressed`, „Kein Symbol“ vorn, Pfeiltasten wandern, Tab verlässt die Gruppe. Die bisherige Auswahlliste mit englischen Schlüsseln bei Symbol und Symbolkarte ist durch dieselbe Kachelauswahl ersetzt. Die Stellung ist ein Umschalter aus zwei Knöpfen und erscheint nur, wenn ein Symbol gewählt ist. Die Pfade stehen damit zweimal (Twig für die Website, JS für die Vorschau); `tests/icons.test.mjs` hält beide und die Liste im Validator gleich.
+
+**Geprüft:** `CmsTest::testAButtonCarriesTheChosenIconBeforeOrAfterItsTextOrNone` (Standardpfeil mit `button-arrow`, Telefon vorn, kein Symbol), `testAButtonRejectsUnknownIconsAndOlderSchemas`, `tests/icons.test.mjs`, `repairSchema` hebt auf v25, `npm run test:button-icons` im Browser (Kachel, Stellung, Tastatur, Rückgängig, kein Symbol, Speichern als v25 und Neuladen).
+
+## ADR 107 – Knöpfe dürfen anrufen und schreiben, der Pfeil hat die Schriftfarbe (06.10.2026)
+
+Beim Aufbau von Hüfner Gartenbau fielen zwei Lücken auf, die Umut im Kern geschlossen haben wollte.
+
+**`tel:` und `mailto:` als Linkziel von Bausteinen.** Menüeinträge (`MenuRepository::url`), Links im formatierten Text (`RichText::safeHref`) und Plugin-Felder kannten beide längst. Nur die Linkziele der Bausteine – Button, Symbolkarte, Handlungsaufruf, Symbol, verlinktes Bild – liefen über `DocumentValidator::url()` und nahmen bloß Pfad, Sprungmarke und HTTPS. Ein Knopf „Jetzt anrufen“ ging deshalb nur als Textlink im Knopf-Aussehen. Jetzt prüft `link()` diese fünf Stellen: zuerst wie bisher, dazu `tel:` mit Ziffern, `+`, Klammern und Bindestrich (keine Leerzeichen, wie im Menü) und `mailto:` mit einer gültigen Adresse und höchstens einer prozentkodierten Abfrage (`?subject=…`). Bildquellen und eingebettete Inhalte bleiben bei `url()`: `tel:` ist dort kein sinnvolles Ziel.
+
+Das Dokumentschema bleibt bei v24. Die Änderung erlaubt nur zusätzliche Werte in einem bestehenden Feld und braucht keinen Migrationsweg. Ein Dokument mit `tel:` an einem Knopf lässt sich aber auf einem Kern vor dieser Fassung nicht speichern. Eine Installation, die solche Dokumente bekommt, braucht also zuerst das Update.
+
+**Der Pfeil im Knopf folgt der Schriftfarbe.** Das Pfeilsymbol trägt die Klasse `block-icon`, und die färbt jedes Symbol in der Akzentfarbe. Auf einem roten Knopf mit weißer Schrift stand so ein grüner Pfeil, und auch die Farbe beim Überfahren erreichte ihn nicht. `.button-arrow .block-icon{color:inherit}` in `site.css` setzt das richtig. Wo eine Website ihren Pfeil absichtlich anders färbt, tut sie das weiter über das eigene CSS des Knopfs; das geht vor.
+
+**Geprüft:** `CmsTest::testButtonsAndLinkedBlocksMayCallOrWrite` (speichern, ausgeben, Bildquelle mit `tel:` abgewiesen), neue Ungültig-Fälle in `invalidDocuments` (Buchstaben oder Leerzeichen in der Nummer, `mailto:` ohne Adresse oder mit Anführungszeichen bzw. `<`), `testTheButtonArrowTakesTheColourOfTheButtonText`.
+
 ## ADR 106 – „Eigenes HTML“ als Baustein, und warum der Rahmen trotzdem „Externer Inhalt“ bleibt (16.09.2026)
 
 Umut: „Als Baustein im Editor, dass man individuelles HTML einfügen kann. Z. B. möchte ich eine neue Angebotsseite bei DEEG, da soll ein iframe rein.“ Das sind zwei Wünsche, und nur einer davon fehlte.
@@ -711,6 +737,8 @@ Umut wollte an jedem Element eigenes CSS **und** eigenes Skript setzen können.
 
 Zwei echte Löcher kamen beim Testen heraus. `& .block-text` wurde zu `#id.block-text`, weil das führende Leerzeichen wegtrimmt wurde – aus dem Nachfahren wurde derselbe Knoten, die Regel traf das falsche Element. Und `url(//fremd.example/x.png)` kam durch, weil die Prüfung jedes `/` erlaubte: eine protokollrelative Adresse hätte über das Schema der Seite von Dritten geladen. Beides ist behoben und durch Tests abgedeckt.
 
+**Nachtrag 23.09.2026: `content` mit Text.** Werte durften bisher keine Anführungszeichen enthalten, damit gab es kein `::before` oder `::after` – beim Nachbau von Kantarci Markt fehlten dadurch der Verlauf über einem Foto, ein Goldstrich und ein Buchstabe als Wasserzeichen. Jetzt nimmt `content` einen Text in einfachen oder doppelten Anführungszeichen an, höchstens 40 Zeichen aus Buchstaben, Ziffern, Leerzeichen und `.,:!?·•–-`. Kein `<`, kein Backslash, kein zweites Anführungszeichen: Der Wert kann weder den String noch das `<style>` verlassen. Jede andere Eigenschaft bleibt ohne Anführungszeichen (also auch kein `font-family:'…'`). Folge: Dekoration, die Vorlesesoftware nicht vorlesen soll, gehört in ein Pseudo-Element statt in einen Textbaustein.
+
 ## ADR 029 – Verwaltung: ein Rahmen statt sieben Kopfzeilen (12.09.2026)
 
 Umuts Auftrag war „backend komplett neugestalten, einfacher schöner Bedienbarkeit komplett einfach“, mit ausdrücklicher Gestaltungsfreiheit. Das Problem war weniger die Optik als die Orientierung: jede Verwaltungsseite trug ihre eigene Kopfzeile und ihre eigene, unvollständige Liste von Links auf die anderen Seiten – die Seitenübersicht verlinkte sieben Bereiche, das Menü fünf, die Fassungen drei. Wo man war, stand nirgends.

docs/STATUS.md

@@ -1,5 +1,131 @@
 # Projektstatus
 
+## Fassung 1.24.0: Symbol am Button wählbar, Kachelauswahl für Symbole (07.10.2026)
+
+**Anlass:** Umut: „Buttons mit Icon? Geht das, wenn ja wo? Und einfacher Button ist ein Pfeil, wie ändere ich das?“ – dann: „Ja bitte umsetzen. Ein Satz Symbole, die man so alltäglich brauchen könnte, und schöne Vorschau-Auswahl, bitte kein Dropdown mit Suche usw.“
+
+**Neu (Kern, Schema v25, ADR 108):**
+
+- Button → Inhalt → **Symbol**: Kacheln mit Vorschau in drei Gruppen (Pfeile, Kontakt, Allgemein), „Kein Symbol“ vorn. Darunter **Symbol steht: Vor dem Text / Nach dem Text**, nur wenn ein Symbol gewählt ist. Ohne Wahl bleibt der schräge Pfeil hinter dem Text – bestehende Seiten sehen unverändert aus, eigenes CSS auf `.button-arrow` greift weiter.
+- 13 neue Symbole im gemeinsamen Satz (Pfeil nach unten, Winkel, Kalender, Nachricht, Senden, Download, Dokument, Abspielen, Suche, Herz, Info, Plus, Person), damit 33 insgesamt.
+- Symbol und Symbolkarte wählen ihr Symbol mit derselben Kachelauswahl statt der Liste mit englischen Namen.
+- `public/assets/icons.js` (Pfade, deutsche Namen, Gruppen, Auswahl), in der Importmap eingetragen. Stile in `button-controls.css`. `site.css`: Hülle heißt `button-icon`.
+
+**Geprüft:** PHPUnit vollständig (609 Tests) grün, darunter zwei neue Tests in `CmsTest` (Ausgabe mit Standardpfeil, Telefon vorn, kein Symbol; Ablehnung unbekannter Symbole und älterer Schemata). `npm test` (38) grün, dazu `tests/icons.test.mjs` (Twig, Editor und Validator kennen dieselben Symbole) und `repairSchema` hebt auf v25. `npm run test:button-icons` im Browser auf einer Kopie der Pilotdaten: Kachel wählen, Stellung umschalten, Pfeiltasten und Enter, Rückgängig/Wiederholen, kein Symbol, Speichern als v25, nach Neuladen gleich; keine Seitenfehler. Screenshots `reports/button-icons/`. php-cs-fixer und `lint:twig` ohne Befund. Nicht geprüft: Lighthouse und `test:browser` (die öffentliche Ausgabe ändert sich nur bei gewähltem Symbol um ein Inline-SVG gleicher Größe).
+
+**Bekannt:** Ein Dokument mit Symbolwahl lässt sich auf einem Kern vor dieser Fassung nicht speichern (Schema v25) – Installationen zuerst aktualisieren. Keine Markenlogos im Satz.
+
+**Nächster Schritt:** Push von `main` und Tag `v1.24.0`, Releasearchiv auf der Releaseseite veröffentlichen, dann die Installationen aktualisieren (vor Hüfner, damit dort Symbole gewählt werden können).
+
+## Fassung 1.23.1: neunte Installation „Hüfner Gartenbau“, Knöpfe mit tel: und mailto:, Pfeil in der Schriftfarbe (06.10.2026)
+
+**Anlass:** Umut: „Hier liegt ein Designentwurf für Hüfner Gartenbau. Kannst du mir db und media erstellen für KantSites bitte. […] Effekte rein. Nichts am Code ändern, sondern alles an KantSites-Designelementen anpassen/bauen. Falls was nicht geht, Rückmeldung.“ Vorlage: `Downloads/huefner-website/huefner-website` (statisches `index.html`, 16 Fotos, Logo).
+
+**Neu (nur Inhalt, kein Kerncode):** Datenbank `var/huefner.db`, Medien `var/huefner-media`, Bildquellen `var/huefner-assets`, Startkonfigurationen `huefner` (Port 8102, dev) und `huefner-prod` (Port 8103). `sh scripts/reset-huefner.sh <Ordner des Entwurfs>` kopiert die Bilder und schneidet den Baum aus dem Logo als Seitensymbol (`build-huefner-assets.php`), baut mit `seed-huefner.php` alles neu und holt Barlow und Barlow Condensed auf den eigenen Server. Ohne Argument nimmt es die schon vorbereiteten Bilder.
+
+- **Startseite** mit allen elf Abschnitten des Entwurfs: Hero mit Verlauf und Vorteilsband, Collage, Leistungs- und Referenzkacheln (Foto zoomt, Kachel bekommt Schatten), Chips, Ablauf mit gestrichelter Linie, Fuhrpark, Über uns, Karriere (Stellen als Links mit E-Mail-Betreff), Instagram-Raster, Abschlussband, Kontakt mit dem CMS-Formular `anfrage` (Versand an info@huefner-gartenbau.de). Dazu Impressum, Datenschutz, 404, Menü mit Sprungmarken, klebender Kopf, Einblendungen beim Scrollen.
+- **Inhaltliche Ergänzungen** statt der Platzhalter der Vorlage: Öffnungszeiten Mo–Fr 8–17, Sa 8–12 (von Umut, auch als strukturierte Daten), Firmengeschichte und Impressum aus dem Handelsregister (HRB 742159, AG Mannheim, GF Florian Hüfner; Simone Hüfner war nur bis 27.04.2026 Prokuristin), Hoster IONOS, alle Fotos eigene Aufnahmen. Kennzahlen „[XX] Jahre“/„[XXX] Projekte“ ersetzt durch Aussagen der Vorlage (100 % Detailarbeit, Bagger bis 15 t, ein Team). Keine USt-IdNr. bekannt, deshalb keine Zeile.
+
+**Grenzen des Kerns:**
+
+- Nachtrag, gleicher Tag – auf Umuts Wunsch im Kern behoben (ADR 107): Knöpfe und andere verlinkbare Bausteine nehmen `tel:` und `mailto:` an, und der Pfeil im Knopf hat die Schriftfarbe statt der Akzentfarbe. Die Anrufknöpfe bei Hüfner sind jetzt echte Knöpfe, der Pfeil braucht keine eigene Regel mehr. Vorher: Textlink im Knopf-Aussehen und `color:inherit` im CSS des Knopfs.
+- Kein LKW im Symbolsatz: Das Symbol steht als „Eigenes HTML“ mit dem SVG der Vorlage.
+- Leiste und Kopf kleben gemeinsam (die Einstellung gilt für den ganzen Kopfbereich).
+- Zeilen sind durchsichtig, farbige Karten deshalb Spalten mit Flex.
+- Eigenes CSS ohne `@media`/`*`: gerätespezifische Werte über die Gestaltungswerte (Bildhöhe, Raster-Spalten, Ränder je Gerät).
+- Das HTML-Budget von 150 KB (`test:browser`) war mit dem CSS je Kachel überschritten (152 KB). Die gemeinsamen Regeln stehen jetzt einmal am Abschnitt, Ergebnis 147,5 KB.
+
+**Geprüft:** Lighthouse im Produktionsmodus (Port 8103, je drei Läufe, Median): Startseite mobil 97 / Desktop 98, Impressum und Datenschutz 100 / 100; Barrierefreiheit, Best Practices, SEO und agentisches Browsing überall 100. `test:links` ohne toten Verweis, `test:browser` grün (axe in sechs Ansichten, Tastatur, ohne JavaScript, Budget). Ganzseitige Bildschirmfotos bei 1440, 820 und 375 px gegen den Entwurf verglichen, kein waagerechtes Scrollen, keine Konsolenfehler. Zoom, Schatten, Chip- und Knopf-Hover sowie das Klappmenü per Playwright nachgemessen. Keine Felddaten, kein INP. Das Formular wurde nicht abgeschickt (Mailversand nicht ausprobiert).
+
+**Nächster Schritt:** Livegang nach `docs/LIVEGANG.md` (Mailversand einmal echt testen). Die Hüfner-Datenbank braucht einen Kern mit ADR 107 (`tel:` an Knöpfen).
+
+## Kantarci Markt: Demo der Eröffnungsseite mit Angeboten aus der App (24.09.2026)
+
+**Anlass:** Umut: „Setze mal die demoseite um wie du es dir vorstellst ich überlasse dir alles. Links und logo zu playstore und ios app, wilhelm drapp str. in baden baden, Rest Platzhalter“. Die Angebote kommen aus der Web-Ansicht seiner App: `https://app.kantarci-markt.de/embed/angebote.php?ton=dunkel`, dazu sein Skript für die Höhe.
+
+**Neu (nur Inhalt, kein Kern):** `/eroeffnung` im Seed-Skript, veröffentlicht, aber `noindex` und nirgends verlinkt. Aufbau: Einstieg „Jetzt geöffnet“ mit zwei Wegen (Angebote, Anfahrt) und Öffnungszeiten, Angebote als eingebettete App-Ansicht, App-Bereich mit Knöpfen für App Store und Google Play, das Versprechen, Besuch (Adresse mit „Route planen“, Öffnungszeiten, Kontakt), Abschluss. Zur Eröffnung soll dieser Inhalt als geplanter Entwurf auf die Startseite, `/eroeffnung` fällt dann weg.
+
+- **Einwilligung:** keine nötig. `Consent::granted()` lässt jede Gruppe durch, solange die Website keine Einwilligungsleiste hat (bei Kantarci Markt aus). Meine frühere Aussage, der Baustein verlange immer eine Einwilligung, war falsch. Eine Option „Eigener Dienst“ braucht es erst, wenn die Seite einmal eine Leiste bekommt.
+- **Höhe:** Umuts Skript hängt als eigenes Skript am Baustein. Es lief zu spät: Die App meldet ihre Höhe beim Laden (gemessen 332 ms), das Skript lief als `defer`-Datei erst kurz vor DOMContentLoaded (402 ms), danach meldet die App nur noch Änderungen. Jetzt fragt das Skript nach dem Start per `km-angebote-height-request` nach und lädt den Rahmen als Rückfall nach 600 ms einmal neu, falls keine Meldung kam. Die App kennt die Nachfrage noch nicht, deshalb greift derzeit der Rückfall (zweiter Abruf der Web-Ansicht).
+- **Hintergrund:** Die Web-Ansicht ist für hellen Grund gebaut (dunkle Überschrift, weiße Karten), `ton=dunkel` und `ton=hell` liefern dieselbe Seite. Der Angebotsbereich steht deshalb auf Sand statt auf Waldgrün. `& iframe{border-radius:0;background:transparent}` am Baustein nimmt Rundung und Tönung aus `site.css`.
+- **Platzhalter:** Öffnungszeiten (Mo–Sa 8–20 Uhr, So geschlossen), „Telefon folgt“, Store-Links auf die Suche nach „Kantarci Markt“ im jeweiligen Store, Store-Knöpfe als eigene schwarze Knöpfe ohne die Logos von Apple und Google. Alles oben im Abschnitt des Seed-Skripts.
+- **`scripts/audit.mjs`** kennt `CMS_HOST_RULES` (etwa `MAP localhost 127.0.0.1`): Die App erlaubt das Einbetten nur von `kantarci-markt.de` und `http://localhost:*`, der Server lauscht auf 127.0.0.1.
+
+**Geprüft:** Lighthouse im Produktionsmodus über `localhost:8101`, Rahmen geladen: `/eroeffnung` mobil 96 / Desktop 100, Barrierefreiheit, Best Practices und agentisches Browsing 100. SEO 69 nur wegen des gewollten `noindex` (`is-crawlable`), keine Konsolenfehler. Die Startseite blieb bei 98 / 100 und überall sonst 100. Im Browser: Rahmen 448 px (Desktop) bzw. 971 px (375 px) hoch, kein Scrollbalken, kein waagerechtes Scrollen. Sicherheitsrichtlinie der Seite: `frame-src https://app.kantarci-markt.de`, `script-src 'self'`.
+
+**Nachtrag, gleicher Tag – Popup statt Link (App-Repository `C:\Django Project\Supermarkt`):** Umut: Angebote ohne Bild wirkten durchsichtig, „Unsere Angebote“ war weiß, und statt eines Links soll ein Popup die Einzelheiten hier zeigen. Die App-Ansicht hatte inzwischen `ton`, `titel`, `app`, `bg` bekommen; `ton=dunkel` machte die Überschrift weiß. Eingebunden ist sie jetzt mit `?titel=0&app=0` (eigene Überschrift der Seite, kein Knopf nach außen). In der App (`public/embed/angebote.php`, noch nicht committet, nicht ausgeliefert): Karten sind `<article>` mit einem Knopf im Namen statt `<a>`, ein natives `<dialog>` zeigt Bild, Kategorie, Name, Gültigkeit, Beschreibung und Preise auf Höhe der Karte (das iframe ist so hoch wie sein Inhalt) und meldet per `km-angebote-focus`, wo es steht. Die Ansicht beantwortet `km-angebote-height-request`, Angebote ohne Bild haben zartes Grün statt Creme, und ohne Datenbank gibt es die leere Ansicht statt eines Fatal Errors (`count(null)`). `embed/angebote.js` und das Skript im Seed kennen Nachfrage und Hinscrollen. Geprüft mit der lokalen App-Fassung (Anfragen im Browser umgeleitet, Beispieldaten im lokalen Cache): keine Links mehr, Popup im sichtbaren Bereich (auch nach Scrollen), Fokus auf „Schließen“ und zurück zur Karte, Esc und Klick auf den Rand schließen, axe ohne Befund, nur ein Abruf der Ansicht (kein Rückfall-Neuladen). Live wirkt es erst nach Push und App-Update auf dem Server.
+
+**Offen, von Umut:** echte Store-Adressen (und auf Wunsch die offiziellen Badges), Öffnungszeiten, Telefon, Eröffnungsdatum, Impressumsangaben. App-Änderungen committen, pushen und auf dem Server aktualisieren.
+
+## Fassung 1.23.0: achte Installation „Kantarci Markt – Neueröffnung“, content im eigenen CSS, Schriften ergänzt statt überschrieben (23.09.2026)
+
+**Anlass:** Umut: „erstellst du bitte bald verfügbar site nach dem prinzip kannst gerne dazu implementieren“ – dazu das Paket `Kantarci-Markt-Landingpage.zip` (statische Seite: Logo-Kopf, Hero „Frische bekommt eine neue Adresse.“ mit Marktfoto, Tomatenkarte und Stempel, Versprechen auf Waldgrün, Abschluss „Frische. Qualität. Faire Preise.“, Fuß).
+
+**Neu.** Datenbank `var/kantarci-markt.db`, Medien `var/kantarci-markt-media`, Bildquellen `var/kantarci-markt-assets`, Startkonfigurationen `kantarci-markt` (Port 8100, dev) und `kantarci-markt-prod` (Port 8101). `sh scripts/reset-kantarci-markt.sh` baut alles neu: `build-kantarci-markt-assets.mjs` (Logo zugeschnitten auf 600 px, Seitensymbol und Stempel als PNG über Chromium), `seed-kantarci-markt.php` (Startseite, Impressum, Datenschutz, 404, Kopf, Fuß, Einstellungen), dann DM Sans auf den eigenen Server. Alles aus gewöhnlichen Bausteinen, kein Plugin.
+
+- **Abweichungen:** Manrope entfällt (DM Sans an seiner Stelle, eine Schrift weniger). Die Bildzeile „Vorfreude auf frische Vielfalt.“ steht höher als in der Vorlage, weil Stempel und Tomatenkarte sie dort verdeckten. Das große „K“ im Abschluss ist ein Pseudo-Element, kein Text. Keine LocalBusiness-Daten, solange der Markt nicht geöffnet hat.
+- **Impressum und Datenschutz** sind Pflicht und angelegt. Offen, im Text als „NOCH ZU PRÜFEN“: Betreiber/Rechtsform, Hausnummer, Vertretung, Register, Telefon, USt-IdNr., ob `info@kantarci-markt.de` existiert (die Domain hat Mailserver), Quelle der beiden Fotos, Hosting.
+
+**Im Kern dazu gebaut:**
+
+- **Eigenes CSS: `content` mit kurzem Text** (`CustomCode`), damit `::before`/`::after` möglich sind. Eng begrenzt, siehe Nachtrag zu ADR 028.
+- **`fonts.css` wird ergänzt statt überschrieben** (`FontLibrary::combine`): Ein Abruf ersetzt nur die Regeln der geholten Familien. Vorher hätte das Holen von DM Sans Lato und Cormorant der anderen lokalen Installationen aus der gemeinsamen Datei gelöscht.
+- **Variable Schriften einmal statt je Schnitt:** DM Sans liefert Google als eine Datei für alle Schnitte. Der Kern verlinkte und lud sie dreimal vor (111 KB statt 37 KB), das kostete am Telefon den LCP. Jetzt eine `@font-face` mit Gewichtsbereich `400 700`, und `preload()` nennt nur Dateien, die `fonts.css` tatsächlich verlinkt.
+- Bekannt, nicht geändert: Zeilen sind im Kern immer durchsichtig (`.block-row{background:transparent!important}`). Die grüne Karte „Wir öffnen bald“ ist deshalb eine Spalte.
+
+**Geprüft:** Lighthouse im Produktionsmodus (Port 8101, je drei Läufe, Median): Startseite mobil 97 / Desktop 100, Impressum und Datenschutz 100 / 100; Barrierefreiheit, Best Practices, SEO und agentisches Browsing überall 100. Vorher 87 mobil wegen CLS 0,19 (Logo im Kopf bekam seine Breite erst nach dem Laden) und der dreifachen Schrift. Bildschirmfotos 1440 px und 375 px ohne waagerechtes Scrollen und ohne Konsolenfehler, Impressum und 404 angesehen. Neue Tests in `CmsTest` (`content` erlaubt/abgewiesen, `combine`, Preload bei variabler Schrift); volle PHPUnit-Suite (596) und `npm test` (36) grün. Keine Felddaten, kein INP.
+
+**Nächster Schritt:** Die offenen Angaben im Impressum von Umut bekommen; auf Wunsch ein Formular „Zur Eröffnung benachrichtigen“ (braucht dann Einwilligungstext und Datenschutzabsatz).
+
+## Fassung 1.22.5: alte Browserchecks wieder grün, Kopfbereich von kant-it.de wieder bearbeitbar (22.09.2026)
+
+**Anlass:** Umut: „räum den Strukturbaum-Fehler auch auf und Release 1.22.5“.
+
+- **Strukturbaum:** `test:admin`, `test:buttons` und `test:navigation-ux` klickten direkt in den Strukturbaum. Seit 1.11 zeigt die Seitenleiste aber eine Ansicht auf einmal, Standard „Elemente“, und der Baum war versteckt. Jetzt wählen die Checks den Reiter „Struktur“, dann den Baustein und „Bearbeiten“, wie `editor-check.mjs`. Der Editor selbst war richtig.
+- **Echter Fehler, dabei gefunden:** Der Kopfbereich in `var/kantit.db` (und damit vermutlich auf kant-it.de) trägt die Hamburger-Umschaltung (`collapse`) bei Schema v19, erlaubt ist sie erst ab v22. Die Website zeigt ihn, aber der Editor bekam für die Vorschau „Unbekannte Hamburger-Umschaltung oder Dokumentschema vor v22“, und Speichern wäre ebenso abgelehnt worden: Der Bereich war nicht bearbeitbar. Jetzt hebt `repairSchema()` (editor-model.js) ein geladenes Dokument auf die Fassung, die seine Bausteine und Eigenschaften verlangen. Das ist dieselbe Hebung, die der Editor beim Einstellen ohnehin macht. Die Umstellung auf formatierten Text (v12/v17) kommt nie von selbst, weil sie die Bedeutung ändert. Beim nächsten Speichern ist das Dokument korrigiert. Alle anderen lokalen Installationen hatten keine solchen Dokumente (geprüft mit dem Validator über alle Seiten und Bereiche).
+- **Weitere veraltete Stellen in `test:admin`:** Der Knopf „Bewegung testen“ heißt seit 1.11 „Bewegung in der Vorschau abspielen“ (`#preview-motion`), auch ein Hilfetext im Editor nannte noch den alten Namen. Der Slider-Teil erwartete, dass „Bewegung reduzieren“ die Automatik anhält. Seit 1.11 gilt das nur mit „Systemvorgabe beachten“. Der Check prüft jetzt das Verhalten, das die Einstellung der Website verspricht.
+
+**Geprüft:** `test:admin` (vollständig, auch der öffentliche Teil), `test:buttons`, `test:navigation-ux` und `test:editor` grün. Neuer Einheitstest für `repairSchema` in `tests/editor-model.test.mjs`.
+
+## Fassung 1.22.4: Ziehknopf im Menü neben der Zusammenfassung (22.09.2026)
+
+**Anlass:** Umut: „ja räum das auf und Release 1.22.4“ – die bekannte axe-Meldung `nested-interactive` im Menü-Editor.
+
+- Der Ziehknopf eines Menüeintrags stand in der `<summary>`, also ein Knopf in einem Knopf. Screenreader lesen so etwas unzuverlässig vor, und die Tastatur erreicht es nicht sauber. Jetzt steht er als Geschwister vor `<details>`, per CSS über die linke Ecke der Zusammenfassung gelegt (`menu-entry.html.twig`, `createRow` in `menu-editor.js`). Aussehen und Bedienung bleiben gleich: Ziehen mit Maus, Stift und Finger, Pfeiltasten auf dem Knopf.
+- Der Hinweis zu fehlenden Sprungzielen im Menü und die Hilfe zum Feld „Sprungziel“ im Editor nennen jetzt die richtige Stelle (Sektion, Zeile oder Spalte) und den Weg über die Auswahl im Menü.
+- `test:admin`: Die Fehlermeldung nach einem abgewiesenen Speichern wurde direkt nach der Serverantwort abgefragt, sie erscheint aber erst, nachdem die Antwort gelesen ist. Jetzt wartet der Test auf sie. Der Check scheitert weiterhin an der älteren Stelle beim Klick in den Strukturbaum des Editors.
+
+**Geprüft:** Die Editor-Prüfung prüft die ganze Menüseite mit axe, ohne Ausnahme. Sie stellt sicher, dass in keiner Zusammenfassung ein Knopf steht, und verschiebt einen Eintrag per Pfeiltaste (Fokus bleibt auf dem Knopf). Bildschirmfoto `reports/editor/menu-editor.png` angesehen.
+
+## Fassung 1.22.3: die übrigen abgetippten Adressen (22.09.2026)
+
+**Anlass:** Umut: „die offenen Punkte auch umsetzen und Release 1.22.3“ – die drei Reste aus 1.22.2.
+
+- **Sprungziel im Menü:** Eine Auswahl aus den Ankern der verknüpften Seite, beschriftet mit der ersten Überschrift des Bausteins, etwa „So erreichen Sie uns (#kontakt)“. Die Liste liefert `GET /admin/api/sprungziele/{id}` (Rolle wie die Menüs). Wechselt die Seite, lädt die Liste neu. Ein gespeicherter Anker, den es nicht mehr gibt, bleibt als „(auf der Seite nicht gefunden)“ sichtbar. Ohne Skript bleibt das Textfeld.
+- **Linkfelder in der Plugin-Verwaltung und die Adresse eines eigenen Menülinks:** Das Textfeld bleibt, weil eine fremde Adresse getippt wird. Daneben stehen „Seite wählen“ und „PDF wählen“ (`link-field.js`, Markup `data-link-field`/`data-link-input`).
+- **Kategorien und Schlagwörter eines Beitrags:** Die vorhandenen Namen stehen als Knöpfe unter dem Feld. Ein Klick nimmt einen Namen auf oder heraus (`term-chips.js`), neue Namen tippt man weiter ein. So entstehen nicht „Projekt“ und „Projekte“ nebeneinander.
+
+**Bekannt, nicht neu:** axe meldet im Menü-Editor `nested-interactive`, weil der Ziehknopf in der Zusammenfassung jedes Eintrags steckt. Die Editor-Prüfung prüft dort nur die neuen Felder.
+
+**Geprüft:** neue Tests `EditorSecurityTest::testMenuAnchorsAndPostTermsAreOfferedForChoosing` und `…testPluginSettingsForLinksAndImagesAreChosenNotTyped`. Die Editor-Prüfung wählt im Menü eine Seite als eigenen Link, prüft die Sprungziel-Auswahl eines neuen Seitenlinks, legt einen Beitrag mit Kategorie an und nimmt die Kategorie per Klick auf und wieder heraus (jeweils mit axe).
+
+## Fassung 1.22.2: Auswahl statt abgetippter Kennungen und Adressen (22.09.2026)
+
+**Anlass:** Umut zu den Beitragseinstellungen: „nicht dein ernst? ID aus Mediathek? schöne auswahl rein! auch bei Beitragsbild“, dann: „Andere bereiche prüfen ob es sowas noch gibt!“
+
+Die ganze Verwaltung und der Editor wurden nach Feldern durchsucht, in die man eine Kennung, eine Adresse oder einen technischen Namen tippen musste, der auf etwas anderes zeigt. Umgebaut:
+
+- **Vorschaubild beim Teilen und Beitragsbild** (Seiten und Beiträge → Einstellungen): Bildfeld mit Vorschau, „Bild wählen oder hochladen“ im Mediathek-Dialog, „Entfernen“ (`admin/media-field.html.twig`, `media-field.js`, Twig-Funktion `kant_media`). Die Kennung steht nur noch im versteckten Feld.
+- **Plugin-Einstellungen der Art Bild:** dasselbe Bildfeld statt „Kennung aus der Mediathek“.
+- **Editor, Formular-Baustein, Sektions-Baustein, Beitragsliste (Kategorie, Schlagwort):** Auswahllisten statt Adressen. Die Listen kommen mit `/api/design` (`choices`). Eine gespeicherte Adresse, die es nicht mehr gibt, bleibt als „(nicht mehr vorhanden)“ sichtbar.
+- **Linkziele im Editor** (Button, Bild, Symbolkarte, CTA, Symbol, Link-Felder von Plugins) und **Links im Textbaustein:** „Seite wählen“ mit Seitensuche (`openPageDialog` in `page-picker.js`) neben „PDF aus Mediathek wählen“. Freie Adressen bleiben möglich. Der Schalter „In neuem Tab öffnen“ erscheint bei Plugin-Feldern nicht mehr, deren Schema kennt ihn nicht.
+- **Weiterleitungen, neue Adresse:** Seitensuche. Ein anderer Pfad (etwa `kategorie/projekte`) lässt sich weiter eintippen (`data-free` im Seitenwähler).
+- **Formular-Editor:** „Antwortadresse aus Feld“ wählt aus den E-Mail-Feldern, „Nur zeigen, wenn“ aus den Auswahlfeldern weiter oben, mit Kästchen für die Antworten. „Bild je Option“ öffnet den Mediathek-Dialog mit Vorschau statt einer Aufklappliste. Ohne Skript bleiben die Textfelder, die gespeichert werden.
+
+**Bewusst getippt bleibt:** was an der Stelle erst entsteht (Adresse einer neuen Seite, eines Formulars, einer Sektion, Farb- und Schriftschlüssel, technischer Feldname, Anker), die alte Adresse einer Weiterleitung, Einbettungsadressen, Schlüssel für Turnstile. Noch offen: Link-Einstellungen von Plugins in der Plugin-Verwaltung (Textfeld), Sprungziel im Menü, Vorschläge vorhandener Kategorien und Schlagwörter in den Beitragseinstellungen.
+
+**Geprüft:** neue Tests `EditorSecurityTest::testImageSettingsOfAPostArePickedFromTheLibraryNotTypedAsAnId` und `…testTheEditorPicksFormsSectionsAndTermsFromListsInsteadOfTypedAddresses`. Die Editor-Prüfung (`npm run test:editor`) wählt jetzt im Browser ein Vorschaubild und speichert es. Sie wählt eine Seite als Linkziel (mit axe) und prüft, dass Formular, Kategorie und Schlagwort Auswahlfelder sind. Im Formular-Editor wählt sie Bedingung, Antwortadresse und ein Optionsbild, legt das Formular an und liest es wieder (mit axe).
+
 ## Fassung 1.22.1: vergrößerbare Galerie mit einem Haken (22.09.2026)
 
 **Anlass:** Umut: „Bei Klick vergrößern bei Galerie muss man da alles einzeln machen? kann man bei Galerie das mit einem Klick für alle elemente machen?“

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build:buttons": "node scripts/build-buttons.mjs",
     "test:buttons": "node scripts/button-check.mjs",
+    "test:button-icons": "node scripts/button-icon-check.mjs",
     "test:navigation-ux": "node scripts/navigation-ux-check.mjs",
     "test:responsive-navigation": "node scripts/responsive-navigation-check.mjs",
     "build:design": "node scripts/build-design.mjs",

public/assets/admin.css

@@ -898,8 +898,14 @@ details.card > summary:hover { background: #fafbf8 }
 .field-card-condition .field-help { grid-column: 1 / -1 }
 .field-card-images { grid-column: 1 / -1 }
 .field-image-pickers { display: grid; gap: 6px; margin-top: 6px }
-.field-image-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center; font-size: 13px }
-.field-image-picker select { margin: 0 }
+.field-image-picker { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13px }
+.field-image-picker-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #eef1eb }
+.field-image-picker-thumb[hidden] { display: block; visibility: hidden }
+.field-image-picker-name { color: var(--muted); overflow-wrap: anywhere; min-width: 0 }
+@media (max-width: 767px) { .field-image-picker { grid-template-columns: 64px minmax(0, 1fr); } .field-image-picker-option { grid-column: 1 / -1; font-weight: 650 } }
+.field-condition-picker { display: grid; gap: 6px; grid-column: 1 / -1 }
+.field-condition-values { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px }
+.field-condition-values legend { font-size: 13px; font-weight: 650; margin-bottom: 4px; padding: 0 }
 .form-preview-empty { margin: 0; font-size: 13px }
 .form-preview + .contrast-note { margin-top: 10px }
 .form-preview .cms-button { justify-self: start; pointer-events: none }
@@ -977,3 +983,24 @@ details.card > summary:hover { background: #fafbf8 }
 @media (max-width: 1000px) { .type-layout { grid-template-columns: 1fr } }
 /* Ein Dokument in der Mediathek: drei Buchstaben statt eines Zeichens. */
 .row-icon-text { font-size: 11px; font-weight: 700; letter-spacing: .04em }
+/* Ein Bild der Mediathek als Formularfeld: Vorschau, Name, Wählen und Entfernen. */
+.media-field-label { display: block; font-weight: 650; font-size: 13px; margin-bottom: 6px }
+.media-field { min-width: 0 }
+.media-field-current { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #fff }
+.media-field-thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #eef1eb }
+.media-field-name { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; min-width: 0 }
+.media-field-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px }
+/* Ein Linkfeld: die Adresse zum Tippen, darunter Seite oder PDF zum Wählen. */
+.link-field-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px }
+.link-field-actions .text-button { padding: 4px 0; font-size: 13px }
+/* Vorhandene Kategorien und Schlagwörter zum Anklicken. */
+.term-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
+.term-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer }
+.term-chip[aria-pressed="true"] { background: #edf4dc; border-color: var(--accent); font-weight: 650 }
+.term-chip[aria-pressed="true"]::before { content: '✓ '; }
+/* Der Ziehknopf eines Menüeintrags liegt über der linken Ecke der Zusammenfassung, gehört aber
+   nicht zu ihr - sonst stünde ein Knopf in einem Knopf. */
+.menu-entry { position: relative }
+.menu-entry > .menu-drag-handle { position: absolute; left: 14px; top: 10px; z-index: 1 }
+.menu-entry summary { padding-left: 58px; min-height: 60px }
+@media (max-width: 560px) { .menu-entry > .menu-drag-handle { left: 8px; top: 8px } .menu-entry summary { padding-left: 50px; min-height: 56px } }

public/assets/button-controls.css

@@ -1 +1 @@
-.button-designer{padding:16px 0;border-block:1px solid #dce4dc;margin-block:16px}.button-designer h3{margin:0 0 12px;font-size:15px}.button-state-previews{display:grid;gap:12px;padding:16px;background:#fff;border:1px solid #dce4dc;border-radius:12px;margin-bottom:16px}.button-state{display:grid;justify-items:start;gap:7px;min-width:0}.button-state>.field-help{margin:0}.button-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 16px}.button-preset{display:grid;justify-items:center;align-content:center;gap:9px;min-width:0;padding:12px 6px;background:#fff;border:1px solid #dce4dc;border-radius:10px;color:#203b34;cursor:pointer}.button-preset[aria-pressed=true]{border-color:#2c6b4f;box-shadow:inset 0 0 0 1px #2c6b4f;background:#f1f6ef}.button-preset:focus-visible{outline:3px solid #b55b12;outline-offset:2px}.button-preset .cms-button{font-size:12px!important;padding:6px 10px;min-height:34px;pointer-events:none}.button-preset-label{font-size:11px;line-height:1.4;text-align:center}.button-designer select{width:100%;margin-bottom:12px}.button-defaults{margin-block:24px;padding:24px;border:1px solid #dce4dc;border-radius:14px;min-width:0}.button-defaults legend{font-size:20px;font-weight:700;padding:0 8px}.button-defaults-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);gap:28px}.button-defaults .fields{align-content:start}.button-defaults .button-preview-column{min-width:0}.button-defaults .button-preview-column h3{font-size:15px;margin:0 0 12px}.button-defaults .color-field{margin:0}.button-defaults .color-trigger{width:100%}@media(max-width:900px){.button-defaults-layout{grid-template-columns:1fr}.button-defaults{padding:16px}}
+.button-designer{padding:16px 0;border-block:1px solid #dce4dc;margin-block:16px}.button-designer h3{margin:0 0 12px;font-size:15px}.button-state-previews{display:grid;gap:12px;padding:16px;background:#fff;border:1px solid #dce4dc;border-radius:12px;margin-bottom:16px}.button-state{display:grid;justify-items:start;gap:7px;min-width:0}.button-state>.field-help{margin:0}.button-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 16px}.button-preset{display:grid;justify-items:center;align-content:center;gap:9px;min-width:0;padding:12px 6px;background:#fff;border:1px solid #dce4dc;border-radius:10px;color:#203b34;cursor:pointer}.button-preset[aria-pressed=true]{border-color:#2c6b4f;box-shadow:inset 0 0 0 1px #2c6b4f;background:#f1f6ef}.button-preset:focus-visible{outline:3px solid #b55b12;outline-offset:2px}.button-preset .cms-button{font-size:12px!important;padding:6px 10px;min-height:34px;pointer-events:none}.button-preset-label{font-size:11px;line-height:1.4;text-align:center}.button-designer select{width:100%;margin-bottom:12px}.button-defaults{margin-block:24px;padding:24px;border:1px solid #dce4dc;border-radius:14px;min-width:0}.button-defaults legend{font-size:20px;font-weight:700;padding:0 8px}.button-defaults-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);gap:28px}.button-defaults .fields{align-content:start}.button-defaults .button-preview-column{min-width:0}.button-defaults .button-preview-column h3{font-size:15px;margin:0 0 12px}.button-defaults .color-field{margin:0}.button-defaults .color-trigger{width:100%}@media(max-width:900px){.button-defaults-layout{grid-template-columns:1fr}.button-defaults{padding:16px}}.icon-picker{margin:4px 0 16px}.icon-picker-label{margin:0 0 6px;font-size:13px;font-weight:700;color:#203b34}.icon-group-title{margin:10px 0 6px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#5b6b64}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}.icon-tile{display:grid;place-items:center;aspect-ratio:1;min-height:40px;padding:0;background:#fff;border:1px solid #dce4dc;border-radius:9px;color:#203b34;cursor:pointer;transition:border-color .15s,background-color .15s}.icon-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon-tile:hover{border-color:#8fb39f;background:#f7faf5}.icon-tile[aria-pressed=true]{border-color:#2c6b4f;box-shadow:inset 0 0 0 1px #2c6b4f;background:#e8f2e4;color:#1d4d37}.icon-tile:focus-visible{outline:3px solid #b55b12;outline-offset:2px}.icon-tile-none{grid-column:span 2;aspect-ratio:auto}.icon-tile-none::after{content:"Kein Symbol";font-size:12px;font-weight:600}.icon-tile-empty{display:none}.icon-position{margin:0 0 16px}.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dce4dc;border-radius:9px;overflow:hidden}.segmented button{min-height:38px;border:0;background:#fff;color:#203b34;font-size:13px;font-weight:600;cursor:pointer}.segmented button+button{border-left:1px solid #dce4dc}.segmented button[aria-pressed=true]{background:#2c6b4f;color:#fff}.segmented button:focus-visible{outline:3px solid #b55b12;outline-offset:-3px}

public/assets/editor-model.js

@@ -152,6 +152,36 @@ export function createBlock(type) {
   return block;
 }
 
+/**
+ * Hebt ein geladenes Dokument auf die Fassung, die seine Bausteine und Eigenschaften verlangen.
+ *
+ * Normalerweise tut das der Editor in dem Moment, in dem jemand etwas einstellt. Ein Dokument,
+ * das ein Skript geschrieben hat, kann aber eine Eigenschaft tragen, die seine Fassung noch nicht
+ * kennt - der Kopfbereich von kant-it.de hatte die Hamburger-Umschaltung bei Fassung 19. Die
+ * Website zeigt so etwas, der Server lehnt Vorschau und Speichern aber ab, und der Bereich war im
+ * Editor nicht mehr zu bearbeiten. Nur Fassungen, die etwas hinzufügen, werden hier gehoben; die
+ * Umstellung auf formatierten Text (12, 17) ändert die Bedeutung und bleibt eine bewusste Wahl.
+ */
+export function repairSchema(document) {
+  const walk = blocks => {
+    for (const block of blocks || []) {
+      upgradeForType(document, block.type);
+      const props = block.props || {};
+      if ('caption' in props) upgradeDocument(document, 3);
+      if ('click' in props || 'lightbox' in props) upgradeDocument(document, 19);
+      if ('newTab' in props) upgradeDocument(document, 20);
+      if (Object.values(block.style || {}).some(values => values?.backgroundImage === 'none')) upgradeDocument(document, 20);
+      if (block.anchor) upgradeDocument(document, 21);
+      if ('collapse' in props) upgradeDocument(document, 22);
+      if ('faq' in props) upgradeDocument(document, 23);
+      if (block.type === 'button' && ('icon' in props || 'iconPosition' in props)) upgradeDocument(document, 25);
+      walk(block.children);
+    }
+  };
+  walk(document.blocks);
+  return document;
+}
+
 /** Raises the document schema to the version that knows this block type. */
 export function upgradeForType(document, type) {
   if (type === 'gallery') upgradeDocument(document, 3);
@@ -313,7 +343,7 @@ export const devices = { desktop: 'Desktop', tablet: 'Tablet', mobile: 'Mobil' }
 // blieb bei 12 stehen, während Bausteine schon v13 bis v15 verlangten: in einem aktuellen Dokument
 // liess sich dann gar nichts mehr einfügen, und ein Symbol, ein Slider oder ein externer Inhalt
 // nirgends. Eine Zahl, an einer Stelle.
-export const SCHEMA_VERSION = 24;
+export const SCHEMA_VERSION = 25;
 
 export const VISIBILITY = { all: 'Auf allen Geräten', desktop: 'Nur Desktop', tablet: 'Nur Tablet', mobile: 'Nur Mobil', 'hide-desktop': 'Auf Desktop ausblenden', 'hide-tablet': 'Auf Tablet ausblenden', 'hide-mobile': 'Auf Mobil ausblenden', hidden: 'Überall ausblenden' };
 

public/assets/editor.js

@@ -1,5 +1,6 @@
 import { EditorHistory, labels, blockLabel, blockIcon, isPluginBlock, setStyle, effectiveStyle, locate, clone, isContainer, canContain, insertBlock, insertBlockAt, insertionTarget, moveBlockTo, duplicateBlock, moveBlock, devices, effectiveDesign, setDesign, blockPath, insertPreset, insertRow, insertRowAt, setEffect, insertMedia, upgradeDocument, CATEGORIES, ROW_COLUMNS, whyNot, dropList } from './editor-model.js';
 import { openMedia, openDocuments, createMediaPreview } from './media.js';
+import { openPageDialog } from './page-picker.js';
 import { createDesignPanel } from './design-panel.js';
 import { renderButtonControls, setButtonDesign } from './button-design.js';
 import { createRichText } from './rich-text.js';
@@ -8,10 +9,10 @@ import { preview, rowPreview } from './library-previews.js';
 import { decorateContainers } from './preview-containers.js';
 import { initMotion } from './motion.js';
 import { initSliders } from './slider.js';
-import { VISIBILITY, setVisibility, registerPlugins, pluginDefinition, PLUGIN_PRESETS } from './editor-model.js';
+import { VISIBILITY, setVisibility, registerPlugins, pluginDefinition, PLUGIN_PRESETS, repairSchema } from './editor-model.js';
 
-// Mirrors DocumentValidator::ICONS; the server rejects anything outside this list.
-const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check', 'people', 'music', 'home'];
+// Symbole, ihre deutschen Namen und die Kachelauswahl. Die Liste spiegelt DocumentValidator::ICONS.
+import { renderIconPicker, BUTTON_ICON_GROUPS, ALL_ICON_GROUPS } from './icons.js';
 const ICON_SIZES = [12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 120, 160, 200, 240];
 // Mirrors SocialProfiles::NETWORKS; the addresses themselves live in the settings.
 const SOCIAL_NETWORKS = { facebook: 'Facebook', instagram: 'Instagram', linkedin: 'LinkedIn', youtube: 'YouTube', tiktok: 'TikTok', x: 'X', threads: 'Threads', pinterest: 'Pinterest', xing: 'Xing', whatsapp: 'WhatsApp', google: 'Google-Unternehmensprofil' };
@@ -330,15 +331,36 @@ function renderContent(block, panel) {
     input.addEventListener('blur', () => { history.mergeKey = null; });
     if (options.checkbox) container.append(labelEl); else container.append(labelEl, input);
     if (options.help) { const help = document.createElement('p'); help.className = 'field-help'; help.id = `${id}-help`; help.textContent = options.help; input.setAttribute('aria-describedby', help.id); container.append(help); }
-    if (key === 'href') {
+    if (key === 'href' || options.link) {
       // Ein PDF ist ein Linkziel wie jedes andere: seine Adresse steht danach im Feld. Ohne neuen
       // Tab zeigt die Website es im Betrachter über der Seite.
+      // Eine eigene Seite sucht man, statt ihren Pfad zu kennen.
+      const choose = value => { input.value = value; applyValue(); history.mergeKey = null; };
+      const pages = document.createElement('button'); pages.type = 'button'; pages.className = 'secondary href-document'; pages.textContent = 'Seite wählen';
+      pages.addEventListener('click', () => openPageDialog({ onChoose: item => choose(item.path === 'home' ? '/' : `/${item.path}`) }));
       const pdf = document.createElement('button'); pdf.type = 'button'; pdf.className = 'secondary href-document'; pdf.textContent = 'PDF aus Mediathek wählen';
-      pdf.addEventListener('click', () => openDocuments({ onChoose: item => { input.value = item.src; applyValue(); history.mergeKey = null; } }));
-      container.append(pdf);
-      field('In neuem Tab öffnen', 'newTab', block.props.newTab === true, { checkbox: true, container });
+      pdf.addEventListener('click', () => openDocuments({ onChoose: item => choose(item.src) }));
+      const row = document.createElement('div'); row.className = 'href-pickers'; row.append(pages, pdf);
+      container.append(row);
+      // Den Schalter kennen nur die Linkbausteine des Kerns; ein Plugin legt seine Felder selbst fest.
+      if (key === 'href' && !options.plugin) field('In neuem Tab öffnen', 'newTab', block.props.newTab === true, { checkbox: true, container });
     }
   };
+  // Symbolwahl als Kacheln mit Vorschau. Nach der Wahl wird das Panel neu gezeichnet, damit die
+  // Markierung stimmt, und der Fokus bleibt auf der gewählten Kachel.
+  const choose = (key, next, version) => {
+    history.change(doc => {
+      const current = locate(doc.blocks, selected)?.block;
+      if (!current) return;
+      (current.props ??= {})[key] = next;
+      if (version) upgradeDocument(doc, version);
+    }, null);
+    renderProperties(); renderTree(); controls(); schedulePreview();
+    document.querySelector(key === 'iconPosition' ? `.icon-position [data-position="${next}"]` : `.icon-tile[data-icon="${next}"]`)?.focus({ preventScroll: true });
+  };
+  const iconField = (label, value, groups, options = {}) => panel.append(renderIconPicker({
+    label, value, groups, none: options.none, onChoose: name => choose('icon', name, options.version),
+  }));
   if (!block) {
     field('Seitentitel', 'title', history.document.title, { maxLength: 160 });
     field('Beschreibung für Suchmaschinen', 'description', history.document.description, { multiline: true, maxLength: 320 });
@@ -346,6 +368,21 @@ function renderContent(block, panel) {
   }
   const plugin = pluginDefinition(block);
   if (plugin) { renderPluginFields(block, panel, plugin, field); return; }
+  /*
+   * Eine Auswahl statt einer abgetippten Adresse, für alles, was ein Baustein nur verknüpft.
+   * Eine gespeicherte Adresse, die es nicht mehr gibt, bleibt sichtbar statt still zu
+   * verschwinden. Ohne die Liste (sie kommt mit dem Design-Schema) bleibt es ein Textfeld.
+   */
+  const pick = (kind, current, empty = null) => {
+    const list = designSchema?.choices?.[kind];
+    if (!list) return {};
+    const choices = {};
+    if (empty !== null) choices[''] = empty;
+    else if (!current) choices[''] = 'Bitte wählen …';
+    Object.assign(choices, list);
+    if (current && !(current in list)) choices[current] = `${current} (nicht mehr vorhanden)`;
+    return { choices };
+  };
   if (block.type === 'text') {
     // Formatted text with a toolbar and an HTML view. The document moves to v12 on the first
     // formatted save; until then it keeps plain text semantics and stays escaped when rendered.
@@ -363,6 +400,24 @@ function renderContent(block, panel) {
     panel.append(label, rich.element, help);
   }
   if (['heading', 'button'].includes(block.type)) field(block.type === 'button' ? 'Beschriftung' : 'Text', 'text', block.props.text, { multiline: block.type !== 'button' });
+  if (block.type === 'button') {
+    // Ohne eigene Wahl trägt ein Button den Pfeil, den er vor v25 immer hatte.
+    const icon = block.props.icon ?? 'arrow-up-right';
+    iconField('Symbol', icon, BUTTON_ICON_GROUPS, { none: 'Kein Symbol', version: 25 });
+    if (icon !== 'none') {
+      const position = block.props.iconPosition === 'start' ? 'start' : 'end';
+      const wrap = document.createElement('div'); wrap.className = 'icon-position';
+      const caption = document.createElement('p'); caption.className = 'icon-picker-label'; caption.id = 'icon-position-label'; caption.textContent = 'Symbol steht';
+      const group = document.createElement('div'); group.className = 'segmented'; group.setAttribute('role', 'group'); group.setAttribute('aria-labelledby', caption.id);
+      for (const [value, text] of [['start', 'Vor dem Text'], ['end', 'Nach dem Text']]) {
+        const option = document.createElement('button'); option.type = 'button'; option.dataset.position = value; option.textContent = text;
+        option.setAttribute('aria-pressed', String(value === position));
+        option.addEventListener('click', () => { if (value !== position) choose('iconPosition', value, 25); });
+        group.append(option);
+      }
+      wrap.append(caption, group); panel.append(wrap);
+    }
+  }
   if (block.type === 'button' && designSchema) buttonControls(block, panel);
   if (INLINE_TEXT[block.type]) {
     const inline = document.createElement('button');
@@ -377,10 +432,10 @@ function renderContent(block, panel) {
   }
   if (block.type === 'heading') field('Überschriftenebene', 'level', block.props.level, { number: true, choices: { 1: 'H1 · Hauptüberschrift', 2: 'H2 · Abschnitt', 3: 'H3 · Unterabschnitt', 4: 'H4', 5: 'H5', 6: 'H6' }, help: 'Jede Seite benötigt genau eine H1.' });
   if (block.type === 'iconcard') {
-    field('Symbol', 'icon', block.props.icon, { choices: Object.fromEntries(ICONS.map(name => [name, name])) });
+    iconField('Symbol', block.props.icon, ALL_ICON_GROUPS);
     field('Titel', 'title', block.props.title, { maxLength: 120 });
     field('Text', 'text', block.props.text, { multiline: true, maxLength: 600 });
-    field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse – oder ein PDF.' });
+    field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse, Telefon (tel:+49…) oder E-Mail (mailto:…) – oder ein PDF.' });
   }
   if (block.type === 'stat') {
     field('Zahl', 'value', block.props.value, { maxLength: 16, help: 'Zum Beispiel 15+, 24/7 oder 100 %.' });
@@ -396,7 +451,7 @@ function renderContent(block, panel) {
     field('Titel', 'title', block.props.title, { maxLength: 160 });
     field('Text', 'text', block.props.text, { multiline: true, maxLength: 600 });
     field('Beschriftung der Schaltfläche', 'buttonText', block.props.buttonText, { maxLength: 80 });
-    field('Linkziel', 'href', block.props.href, { help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse – oder ein PDF.' });
+    field('Linkziel', 'href', block.props.href, { help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse, Telefon (tel:+49…) oder E-Mail (mailto:…) – oder ein PDF.' });
   }
   if (block.type === 'contact') {
     field('Telefon', 'phone', block.props.phone || '', { maxLength: 80, help: 'Wird als anrufbarer Link ausgegeben.' });
@@ -410,14 +465,14 @@ function renderContent(block, panel) {
     field('Menü-Knopf', 'burgerLabel', block.props.burgerLabel || 'both', { choices: { both: 'Symbol und Text', text: 'Nur Text', icon: 'Nur Symbol' }, help: 'Wie der aufklappbare Knopf beschriftet ist. „Nur Symbol“ behält den Namen für Vorlesesoftware. Farben, Rahmen und Schriftgröße des Knopfes stehen unter Design → Menü-Knopf.' });
     field('Automatisch als Hamburger', 'collapse', block.props.collapse || 'tablet', { choices: { tablet: 'Tablet und Mobil (Standard)', mobile: 'Nur Mobil', never: 'Nie' }, help: 'Waagerechte Menüs wechseln standardmäßig bis 1024 px und auf Touchgeräten ohne Maus, auch großen iPads. „Nur Mobil“ gilt bis 767 px. Die Menüarten „Untereinander“ und „Burger“ bleiben unverändert.' });
   }
-  if (block.type === 'partialref') field('Adresse der Sektion', 'partial', block.props.partial, { help: 'Die Adresse aus der Bereichsverwaltung. Die Sektion wird verknüpft, nicht kopiert: eine Änderung dort wirkt auf allen Seiten, die sie einbinden.' });
+  if (block.type === 'partialref') field('Sektion', 'partial', block.props.partial, { ...pick('sections', block.props.partial), help: 'Die Sektion wird verknüpft, nicht kopiert: eine Änderung dort wirkt auf allen Seiten, die sie einbinden. Angelegt und bearbeitet wird sie unter „Bereiche“.' });
   if (block.type === 'icon') {
-    field('Symbol', 'icon', block.props.icon, { choices: Object.fromEntries(ICONS.map(name => [name, name])) });
+    iconField('Symbol', block.props.icon, ALL_ICON_GROUPS);
     // number, so the value is stored as a number: the server wants an int, not "48".
     field('Größe', 'size', String(block.props.size), { number: true, choices: Object.fromEntries(ICON_SIZES.map(size => [String(size), `${size} px`])), help: 'Feste Stufen, weil die Größe eine Klasse ist – ein freier Wert hätte keine und das Symbol wäre unsichtbar.' });
     field('Nur Dekoration', 'decorative', block.props.decorative, { checkbox: true, help: 'Dekorative Symbole werden Screenreadern verschwiegen. Trägt das Symbol eine Aussage, nimm das Häkchen weg und beschrifte es.' });
     if (!block.props.decorative) field('Beschriftung', 'label', block.props.label, { maxLength: 120 });
-    field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse – oder ein PDF.' });
+    field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse, Telefon (tel:+49…) oder E-Mail (mailto:…) – oder ein PDF.' });
   }
   if (block.type === 'social') {
     field('Größe', 'size', String(block.props.size), { number: true, choices: Object.fromEntries(ICON_SIZES.map(size => [String(size), `${size} px`])), help: 'Die Adressen stehen unter Einstellungen → Unternehmensdaten → Soziale Profile. Farbe, Abstand und Ausrichtung unter Design.' });
@@ -490,7 +545,7 @@ function renderContent(block, panel) {
       : 'Eigenes HTML kann nur ein Administrator ändern, weil es unverändert auf der veröffentlichten Seite landet. Der Inhalt ist hier nur zu sehen.';
     panel.append(label, input, note);
   }
-  if (block.type === 'form') field('Adresse des Formulars', 'form', block.props.form, { help: 'Die Adresse aus der Formularverwaltung, zum Beispiel kontakt. Felder, Empfänger und Einwilligungstext werden dort gepflegt, nicht hier.' });
+  if (block.type === 'form') field('Formular', 'form', block.props.form, { ...pick('forms', block.props.form), help: 'Felder, Empfänger und Einwilligungstext werden unter „Formulare“ gepflegt, nicht hier.' });
   if (block.type === 'tabitem') field('Titel', 'title', block.props.title, { maxLength: 160, help: 'Beschriftung des Tabs. In der Vorschau sind alle Tabs untereinander sichtbar, weil die Vorschau kein JavaScript ausführt.' });
   if (block.type === 'accordion') {
     field('Als FAQ auszeichnen', 'faq', block.props?.faq === true, { checkbox: true, help: 'Die Einträge erscheinen als Frage-Antwort-Paare in den strukturierten Daten (FAQPage): der Titel ist die Frage, die Textbausteine im Eintrag sind die Antwort.' });
@@ -508,7 +563,7 @@ function renderContent(block, panel) {
     add.textContent = '＋ Eintrag hinzufügen'; add.addEventListener('click', () => addAccordionEntry(block.id));
     panel.append(hint, entries, add);
   }
-  if (['section', 'row', 'column'].includes(block.type)) field('Sprungziel', 'anchor', block.anchor, { anchor: true, maxLength: 64, help: 'Zum Beispiel kontakt eingeben. Buttons und Menülinks mit #kontakt springen dann hierher; von anderen Seiten mit /seitenadresse#kontakt.' });
+  if (['section', 'row', 'column'].includes(block.type)) field('Sprungziel', 'anchor', block.anchor, { anchor: true, maxLength: 64, help: 'Zum Beispiel kontakt. Im Menü lässt es sich dann als Sprungziel dieser Seite auswählen, ein Button springt mit #kontakt hierher.' });
   if (block.type === 'accordionitem') {
     field('Titel', 'title', block.props.title, { maxLength: 160 });
     field('Beim Laden geöffnet', 'open', block.props.open, { checkbox: true, help: 'Gilt für die veröffentlichte Seite. Im Editor bleiben alle Einträge zum Bearbeiten geöffnet.' });
@@ -526,15 +581,15 @@ function renderContent(block, panel) {
   }
   if (block.type === 'postlist') {
     field('Anzahl Beiträge', 'count', block.props.count, { number: true, help: 'Zwischen 1 und 24. Die Beiträge selbst kommen beim Ausliefern dazu, nicht aus dem gespeicherten Inhalt.' });
-    field('Nur Kategorie', 'category', block.props.category || '', { help: 'Adresse der Kategorie, zum Beispiel projekte. Leer lassen für alle Beiträge.' });
-    field('Nur Schlagwort', 'tag', block.props.tag || '', { help: 'Adresse des Schlagworts. Leer lassen für alle Beiträge.' });
+    field('Nur Kategorie', 'category', block.props.category || '', { ...pick('categories', block.props.category, 'Alle Kategorien') });
+    field('Nur Schlagwort', 'tag', block.props.tag || '', { ...pick('tags', block.props.tag, 'Alle Schlagwörter'), help: 'Kategorien und Schlagwörter entstehen in den Einstellungen eines Beitrags.' });
     field('Darstellung', 'layout', block.props.layout || 'karten', { choices: { karten: 'Karten (Raster mit Bild oben)', liste: 'Liste (Bild links, Text rechts)', kompakt: 'Kompakt (nur Titel und Datum)', wechsel: 'Wechselseitig (Bild mal links, mal rechts)' }, help: 'Dieselben Beiträge, drei Darstellungen. Karten für eine Übersicht, Liste für ein Archiv, Kompakt für eine Randspalte.' });
     field('Blättern statt abschneiden', 'paginate', block.props.paginate === true, { checkbox: true, help: 'Für eine Übersichtsseite. Eine Auswahl auf der Startseite lässt man aus.' });
     field('Datum und Autor zeigen', 'showMeta', block.props.showMeta !== false, { checkbox: true });
     field('Auszug zeigen', 'showExcerpt', block.props.showExcerpt !== false, { checkbox: true });
     field('Kategorie zeigen', 'showTerms', block.props.showTerms !== false, { checkbox: true, help: 'Alle drei aus: ein Raster aus Bild und Titel, wie es zu Projekten passt.' });
   }
-  if (block.type === 'button') field('Linkziel', 'href', block.props.href, { help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse – oder ein PDF.' });
+  if (block.type === 'button') field('Linkziel', 'href', block.props.href, { help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse, Telefon (tel:+49…) oder E-Mail (mailto:…) – oder ein PDF.' });
   if (block.type === 'image') {
     renderImageWidth(block, panel);
     imagePreview = createMediaPreview({ src: block.props.sources?.[0]?.src || block.props.src, label: block.props.alt || block.props.caption });
@@ -546,7 +601,7 @@ function renderContent(block, panel) {
     const galleryZoom = holder?.type === 'gallery' && holder.props?.lightbox === true;
     const clickAction = block.props?.click || (block.props?.href ? 'link' : (galleryZoom ? 'vergroessern' : 'keine'));
     field('Beim Klick', 'click', clickAction, { choices: { keine: 'Nichts tun', vergroessern: 'Bild vergrößern', link: 'Zu einer Adresse führen' }, onInput: showLinkOptions });
-    field('Linkziel', 'href', block.props.href || '', { container: linkOptions, help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse – oder ein PDF. Für ein Logo im Kopfbereich meist /.' });
+    field('Linkziel', 'href', block.props.href || '', { container: linkOptions, help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse, Telefon (tel:+49…) oder E-Mail (mailto:…) – oder ein PDF. Für ein Logo im Kopfbereich meist /.' });
     showLinkOptions(clickAction); panel.append(linkOptions);
     const picker = document.createElement('button'); picker.className = 'secondary'; picker.textContent = 'Bild aus Mediathek wählen';
     picker.addEventListener('click', () => chooseMedia(false)); panel.append(picker);
@@ -746,7 +801,7 @@ function renderLegacyEffects(block, panel) {
     select.addEventListener('change', () => { history.change(doc => setEffect(doc, selected, key, select.value)); controls(); schedulePreview(); });
     panel.append(labelEl, select);
   }
-  const note = document.createElement('p'); note.className = 'field-help'; note.textContent = 'Einblendungen starten, sobald das Element im Bildschirm erscheint. Mit „Bewegung testen“ lässt sich das in der Vorschau prüfen. Die Einstellung „Bewegung reduzieren“ wird berücksichtigt.'; panel.append(note);
+  const note = document.createElement('p'); note.className = 'field-help'; note.textContent = 'Einblendungen starten, sobald das Element im Bildschirm erscheint. Mit dem Abspielknopf über der Vorschau lässt sich das prüfen. Die Einstellung „Bewegung reduzieren“ wird berücksichtigt.'; panel.append(note);
 }
 
 /**
@@ -774,7 +829,7 @@ function renderPluginFields(block, panel, plugin, field) {
       if (schema.help) { const help = document.createElement('p'); help.className = 'field-help'; help.textContent = schema.help; wrap.append(help); }
       panel.append(wrap);
     }
-    else field(schema.label, key, value, { ...options, maxLength: schema.maxLength });
+    else field(schema.label, key, value, { ...options, maxLength: schema.maxLength, plugin: true, link: schema.kind === 'url' });
   }
 }
 
@@ -1074,7 +1129,9 @@ async function load() {
       designTokens = await response.json();
     }
     if (!designSchema) await loadDesignSchema();
-    history = new EditorHistory(data.document);
+    // Ein Dokument mit Eigenschaften einer neueren Fassung wird beim Laden gehoben, sonst lehnt
+    // der Server schon die Vorschau ab (siehe repairSchema).
+    history = new EditorHistory(repairSchema(data.document));
     ({ version, revisionId, publishedRevisionId, csrfToken } = data);
     // Die Bausteine der eingeschalteten Plugins kommen mit dem Dokument; der Werkzeugkasten
     // bekommt dafür eine eigene Gruppe.

public/assets/fonts/LIZENZ.md

@@ -23,6 +23,15 @@ die Verwendung des reservierten Namens für eine geänderte Fassung.
 unter der SIL Open Font License 1.1, Text in `cormorant-garamond-OFL.txt`. Copyright 2015 The
 Cormorant Project Authors (github.com/CatharsisFonts/Cormorant), Reserved Font Name „Cormorant".
 
+**DM Sans** (Fließtext der Seite „Kantarci Markt") steht unter der SIL Open Font License 1.1, Text
+in `dm-sans-OFL.txt`. Copyright 2014 The DM Sans Project Authors (github.com/googlefonts/dm-fonts).
+DM Sans ist eine variable Schrift: `dm-sans-400-…`, `-500-…` und `-700-…` sind dieselbe Datei,
+`fonts.css` nennt nur die erste, mit dem Gewichtsbereich 400–700.
+
+**Barlow** und **Barlow Condensed** (Fließtext und Überschriften der Seite „Hüfner Gartenbau“)
+stehen unter der SIL Open Font License 1.1, Text in `barlow-OFL.txt` (für beide Familien gleich).
+Copyright 2017 The Barlow Project Authors (github.com/jpt/barlow).
+
 Wer hier andere Schriften ablegt, prüft deren Lizenz selbst: nicht jede Schrift, die Google Fonts
 ausliefert, steht unter der OFL – einige stehen unter der Apache-Lizenz 2.0, und eine gekaufte
 Schrift eines Schriftenhauses darf meist gar nicht weitergegeben werden. Die Lizenzdatei gehört in

public/assets/fonts/barlow-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/dm-sans-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014 The DM Sans Project Authors (https://github.com/googlefonts/dm-fonts)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/assets/fonts/fonts.css

@@ -14,3 +14,27 @@
 @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/cormorant-garamond-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
 /* latin */
 @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/cormorant-garamond-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
+/* latin-ext */
+@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/dm-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
+/* latin */
+@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/dm-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
+/* latin-ext */
+@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
+/* latin */
+@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
+/* latin-ext */
+@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
+/* latin */
+@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
+/* latin-ext */
+@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
+/* latin */
+@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
+/* latin-ext */
+@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
+/* latin */
+@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
+/* latin-ext */
+@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
+/* latin */
+@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

public/assets/form-editor.js

@@ -9,6 +9,7 @@
  */
 import { createColorControl } from './color-control.js';
 import { buttonSample } from './button-design.js';
+import { openMedia } from './media.js';
 
 const root = document.querySelector('[data-form-schema]');
 if (root) {
@@ -115,8 +116,10 @@ if (root) {
     const note = el('p', 'contrast-note'); note.hidden = true; note.setAttribute('role', 'status');
     preview.after(note);
 
-    // Statt Kennungen zu tippen: je Option eine Liste der Mediathek. Das Textfeld bleibt das
-    // gespeicherte Original und wird aus den Listen geschrieben; ohne Skript tippt man hinein.
+    // Statt Kennungen zu tippen: je Option ein Bild aus der Mediathek, gewählt im Dialog mit
+    // Vorschau und Hochladen. Das Textfeld bleibt das gespeicherte Original und wird aus der
+    // Auswahl geschrieben; ohne Skript tippt man hinein.
+    const bildVon = new Map(bilder.map(bild => [bild.id, bild]));
     const renderImagePickers = card => {
       const area = card.querySelector('[data-field-images-input]');
       const options = card.querySelector('[data-field-options-input]').value.split(',').map(o => o.trim()).filter(Boolean);
@@ -129,23 +132,124 @@ if (root) {
       const current = Object.fromEntries(area.value.split('\n').filter(l => l.includes('=')).map(l => l.split('=').map(x => x.trim())));
       box.dataset.signature = options.join('|');
       box.replaceChildren();
+      const write = () => {
+        const map = {};
+        for (const row of box.querySelectorAll('[data-option]')) if (row.dataset.media) map[row.dataset.option] = row.dataset.media;
+        area.value = Object.entries(map).map(([o, id]) => `${o} = ${id}`).join('\n');
+        renderPreview();
+      };
       for (const option of options) {
-        const row = el('label', 'field-image-picker');
-        row.append(el('span', 'field-image-picker-option', option));
-        const select = document.createElement('select');
-        select.append(new Option('Kein Bild', ''));
-        for (const bild of bilder) select.append(new Option(bild.title, bild.id, false, current[option] === bild.id));
-        select.dataset.option = option;
-        select.addEventListener('change', () => {
-          const map = {};
-          for (const picker of box.querySelectorAll('select')) if (picker.value) map[picker.dataset.option] = picker.value;
-          area.value = Object.entries(map).map(([o, id]) => `${o} = ${id}`).join('\n');
-          renderPreview();
-        });
-        row.append(select); box.append(row);
+        const row = el('div', 'field-image-picker'); row.dataset.option = option;
+        const thumb = document.createElement('img'); thumb.className = 'field-image-picker-thumb'; thumb.alt = ''; thumb.width = 64; thumb.height = 48;
+        const name = el('span', 'field-image-picker-name');
+        const choose = el('button', 'secondary', ''); choose.type = 'button';
+        const remove = el('button', 'text-button danger-text', 'Entfernen'); remove.type = 'button';
+        remove.setAttribute('aria-label', `Bild für „${option}“ entfernen`);
+        const show = id => {
+          row.dataset.media = id || '';
+          const bild = id ? bildVon.get(id) : null;
+          thumb.hidden = !bild; if (bild) thumb.src = bild.src; else thumb.removeAttribute('src');
+          name.textContent = id ? (bild?.title || 'Bild gewählt') : 'Kein Bild';
+          choose.textContent = id ? 'Anderes Bild' : 'Bild wählen';
+          choose.setAttribute('aria-label', `${id ? 'Anderes Bild' : 'Bild'} für „${option}“ wählen`);
+          remove.hidden = !id;
+        };
+        choose.addEventListener('click', () => openMedia({ needsAlt: false, onChoose: ([item]) => {
+          if (!item) return;
+          bildVon.set(item.id, { id: item.id, title: item.title, src: item.variants[0].src });
+          show(item.id); write();
+        } }));
+        remove.addEventListener('click', () => { show(''); write(); choose.focus(); });
+        show(current[option] || '');
+        row.append(el('span', 'field-image-picker-option', option), thumb, name, choose, remove); box.append(row);
       }
     };
 
+    /*
+     * Auswahl statt Feldnamen: die Bedingung eines Feldes nennt ein Auswahlfeld weiter oben und
+     * dessen Optionen, die Antwortadresse ein E-Mail-Feld. Die Textfelder bleiben das
+     * gespeicherte Original, versteckt, und werden aus der Auswahl geschrieben.
+     */
+    const fieldsBefore = card => {
+      const list = [];
+      for (const other of cards()) {
+        if (other === card) break;
+        const name = other.querySelector('[data-field-name]').value.trim();
+        const type = other.querySelector('[data-field-type]').value;
+        if (name && ['select', 'radio', 'checkboxes'].includes(type)) {
+          list.push({ name, label: other.querySelector('[data-field-label]').value.trim() || name,
+            options: other.querySelector('[data-field-options-input]').value.split(',').map(o => o.trim()).filter(Boolean) });
+        }
+      }
+      return list;
+    };
+    const renderCondition = card => {
+      const fieldInput = card.querySelector('[data-field-showif]');
+      const valuesInput = card.querySelector('[data-field-showvalues]');
+      const candidates = fieldsBefore(card);
+      const signature = JSON.stringify([candidates, fieldInput.value, valuesInput.value]);
+      let box = card.querySelector('[data-condition-picker]');
+      if (!box) {
+        box = el('div', 'field-condition-picker'); box.dataset.conditionPicker = '';
+        fieldInput.closest('div').hidden = true; valuesInput.closest('div').hidden = true;
+        fieldInput.closest('[data-field-condition]').prepend(box);
+        const help = box.parentElement.querySelector(':scope > .field-help');
+        if (help) help.textContent = 'Zur Wahl stehen Auswahlfelder weiter oben. Bei einem Schritt gilt die Bedingung für alle seine Felder.';
+      }
+      if (box.dataset.signature === signature) return;
+      box.dataset.signature = signature;
+      const focused = box.contains(document.activeElement) ? document.activeElement.dataset.key : null;
+      box.replaceChildren();
+      const id = `${fieldInput.id}-select`;
+      const label = el('label', '', 'Nur zeigen, wenn'); label.htmlFor = id;
+      const select = document.createElement('select'); select.id = id; select.dataset.key = 'field';
+      select.append(new Option('Immer zeigen', ''));
+      for (const candidate of candidates) select.append(new Option(candidate.label, candidate.name));
+      if (fieldInput.value && !candidates.some(c => c.name === fieldInput.value)) select.append(new Option(`${fieldInput.value} (nicht mehr weiter oben)`, fieldInput.value));
+      select.value = fieldInput.value;
+      select.addEventListener('change', () => { fieldInput.value = select.value; valuesInput.value = ''; refresh(); });
+      box.append(label, select);
+      const chosen = candidates.find(c => c.name === fieldInput.value);
+      if (chosen) {
+        const set = document.createElement('fieldset'); set.className = 'field-condition-values';
+        set.append(el('legend', '', '… eine dieser Antworten gewählt ist'));
+        const current = valuesInput.value.split(',').map(v => v.trim()).filter(Boolean);
+        chosen.options.forEach((option, index) => {
+          const check = el('label', 'check-label');
+          const box2 = document.createElement('input'); box2.type = 'checkbox'; box2.value = option; box2.checked = current.includes(option);
+          box2.dataset.key = `value-${index}`;
+          box2.addEventListener('change', () => {
+            valuesInput.value = [...set.querySelectorAll('input:checked')].map(input => input.value).join(', ');
+            refresh();
+          });
+          check.append(box2, document.createTextNode(` ${option}`)); set.append(check);
+        });
+        box.append(set);
+      }
+      if (focused) box.querySelector(`[data-key="${focused}"]`)?.focus();
+    };
+    const reply = form.querySelector('[name="replyToField"]');
+    const renderReply = () => {
+      if (!reply) return;
+      const emails = cards().map(card => ({ name: card.querySelector('[data-field-name]').value.trim(), label: card.querySelector('[data-field-label]').value.trim(), type: card.querySelector('[data-field-type]').value }))
+        .filter(field => field.name && field.type === 'email');
+      let select = form.querySelector('[data-reply-picker]');
+      if (!select) {
+        select = document.createElement('select'); select.dataset.replyPicker = ''; select.id = reply.id;
+        reply.id += '-value'; reply.type = 'hidden'; reply.after(select);
+        select.addEventListener('change', () => { reply.value = select.value; });
+      }
+      const signature = JSON.stringify([emails, reply.value]);
+      if (select.dataset.signature === signature) return;
+      select.dataset.signature = signature;
+      select.replaceChildren(new Option('Keine – Antworten gehen an den Absender der E-Mail', ''));
+      for (const field of emails) select.append(new Option(field.label || field.name, field.name));
+      if (reply.value && !emails.some(field => field.name === reply.value)) select.append(new Option(`${reply.value} (kein E-Mail-Feld mehr)`, reply.value));
+      select.value = reply.value;
+      const help = reply.parentElement.querySelector('.field-help');
+      if (help) help.textContent = 'Ein E-Mail-Feld des Formulars. Dann lässt sich auf die Nachricht direkt antworten.';
+    };
+
     const refresh = () => {
       cards().forEach((card, index) => {
         card.querySelector('[data-field-index]').textContent = String(index + 1);
@@ -153,6 +257,7 @@ if (root) {
         card.querySelector('[data-field-options]').hidden = !['select', 'radio', 'checkboxes'].includes(type);
         card.querySelector('[data-field-images]').hidden = !['radio', 'checkboxes'].includes(type);
         if (['radio', 'checkboxes'].includes(type)) renderImagePickers(card);
+        renderCondition(card);
         card.querySelector('[data-field-number]').hidden = type !== 'number';
         const remove = card.querySelector('[data-remove-field]');
         remove.hidden = false; remove.setAttribute('aria-label', `Feld ${index + 1} entfernen`);
@@ -162,6 +267,7 @@ if (root) {
         else if (type === 'step') { required.checked = false; required.disabled = true; }
         else required.disabled = false;
       });
+      renderReply();
       renderPreview();
     };
 

public/assets/icons.js

@@ -0,0 +1,144 @@
+// Die Zeichnungen der Symbole für die Auswahl im Editor. Die Website zeichnet dieselben Pfade aus
+// templates/blocks/icon.html.twig; ein Test hält beide Listen und DocumentValidator::ICONS gleich.
+export const ICON_PATHS = {
+  app: 'M7 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm4 17h2',
+  web: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 0c2.5 2.4 3.8 5.4 3.8 9s-1.3 6.6-3.8 9m0-18C9.5 5.4 8.2 8.4 8.2 12s1.3 6.6 3.8 9M3.2 9h17.6M3.2 15h17.6',
+  design: 'M4 20h16M6 16 18 4l3 3L9 19l-4 1Z',
+  network: 'M5 3h14v5H5Zm0 13h14v5H5Zm7-8v8M8 8v3h8V8',
+  hardware: 'M4 5h16v11H4Zm4 15h8m-4-4v4',
+  shop: 'M4 7h16l-1.4 11.2a2 2 0 0 1-2 1.8H7.4a2 2 0 0 1-2-1.8Zm4 0a4 4 0 0 1 8 0',
+  support: 'M12 3a7 7 0 0 0-7 7v5m14-5a7 7 0 0 0-7-7m7 7v5m-14 0a2 2 0 0 0 2 2h1v-5H5Zm14 0a2 2 0 0 1-2 2h-1v-5h3Z',
+  shield: 'M12 3 5 6v6c0 4.4 2.9 7.9 7 9 4.1-1.1 7-4.6 7-9V6Zm-2.5 9 2 2 4-4.5',
+  clock: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 4v5.5l3.5 2',
+  star: 'm12 3 2.7 5.9 6.3.7-4.7 4.3 1.3 6.1L12 17l-5.6 3 1.3-6.1L3 9.6l6.3-.7Z',
+  phone: 'M6 3h4l2 5-2.5 1.5a12 12 0 0 0 5 5L16 12l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2Z',
+  mail: 'M3 6h18v12H3Zm0 1 9 7 9-7',
+  pin: 'M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z',
+  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',
+  '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',
+  'arrow-down': 'M12 4v15.5m-6.5-6.5 6.5 6.5 6.5-6.5',
+  'chevron-right': 'm9 5.5 6.5 6.5L9 18.5',
+  calendar: 'M4 6h16v14H4Zm0 5h16M8 3.5v4m8-4v4',
+  chat: 'M4 5h16v11H9.5L5 19.5V16H4Z',
+  send: 'M21 3 10 14M21 3l-6.5 18-4.5-7-7-4.5Z',
+  download: 'M12 3.5v12m-5-5 5 5 5-5M4.5 20h15',
+  document: 'M6 3h8l4 4v14H6Zm8 0v4h4M9 12h6m-6 4h6',
+  play: 'M8 5.5v13l10-6.5Z',
+  search: 'M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm4.8 11.3L20 20',
+  heart: 'M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z',
+  info: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 8v5.5m0-9v.5',
+  plus: 'M12 5v14M5 12h14',
+  user: 'M12 11.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4.5 20.5c0-3.9 3.4-6 7.5-6s7.5 2.1 7.5 6',
+};
+
+export const ICON_LABELS = {
+  app: 'Smartphone', web: 'Globus', design: 'Stift', network: 'Netzwerk', hardware: 'Bildschirm',
+  shop: 'Einkaufstasche', support: 'Kopfhörer', shield: 'Schutz', clock: 'Uhr', star: 'Stern',
+  phone: 'Telefon', mail: 'E-Mail', pin: 'Ort', check: 'Häkchen', people: 'Personen', music: 'Musik',
+  home: 'Haus', 'arrow-right': 'Pfeil nach rechts', 'arrow-left': 'Pfeil nach links',
+  'arrow-up-right': 'Pfeil schräg', 'arrow-down': 'Pfeil nach unten', 'chevron-right': 'Winkel',
+  calendar: 'Kalender', chat: 'Nachricht', send: 'Senden', download: 'Download', document: 'Dokument',
+  play: 'Abspielen', search: 'Suche', heart: 'Herz', info: 'Info', plus: 'Plus', user: 'Person',
+};
+
+/** Die Auswahl am Button: die Symbole, die man an einem Knopf wirklich braucht, nach Zweck geordnet. */
+export const BUTTON_ICON_GROUPS = [
+  ['Pfeile', ['arrow-up-right', 'arrow-right', 'chevron-right', 'arrow-down', 'arrow-left']],
+  ['Kontakt', ['phone', 'mail', 'chat', 'send', 'calendar', 'pin']],
+  ['Allgemein', ['download', 'document', 'play', 'search', 'check', 'star', 'heart', 'info', 'plus', 'user', 'home', 'shop', 'clock']],
+];
+
+/** Alle Symbole für Symbol und Symbolkarte, in derselben Ordnung plus die übrigen. */
+export const ALL_ICON_GROUPS = [
+  ...BUTTON_ICON_GROUPS,
+  ['Weitere', ['app', 'web', 'design', 'network', 'hardware', 'support', 'shield', 'people', 'music']],
+];
+
+const svgNS = 'http://www.w3.org/2000/svg';
+
+export function iconSvg(name) {
+  const svg = document.createElementNS(svgNS, 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.setAttribute('focusable', 'false');
+  const path = document.createElementNS(svgNS, 'path');
+  path.setAttribute('d', ICON_PATHS[name] ?? '');
+  svg.append(path);
+  return svg;
+}
+
+/**
+ * Eine Kachelauswahl statt einer Liste aus Namen: jedes Symbol ist ein Knopf mit seiner Zeichnung,
+ * der gewählte ist markiert. Pfeiltasten wandern innerhalb der Gruppe, Tab verlässt die Auswahl.
+ *
+ * @param {{ label: string, value: string, groups: Array<[string, string[]]>, none?: string, onChoose: (name: string) => void }} options
+ */
+export function renderIconPicker({ label, value, groups, none, onChoose }) {
+  const wrap = document.createElement('div');
+  wrap.className = 'icon-picker';
+  const heading = document.createElement('p');
+  heading.className = 'icon-picker-label';
+  heading.id = `icon-picker-${Math.random().toString(36).slice(2, 8)}`;
+  heading.textContent = label;
+  wrap.append(heading);
+  const tiles = [];
+  const tile = name => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = name === 'none' ? 'icon-tile icon-tile-none' : 'icon-tile';
+    button.dataset.icon = name;
+    const text = name === 'none' ? none : ICON_LABELS[name];
+    button.title = text;
+    button.setAttribute('aria-label', text);
+    button.setAttribute('aria-pressed', String(name === value));
+    button.tabIndex = name === value ? 0 : -1;
+    if (name === 'none') {
+      const mark = document.createElement('span');
+      mark.className = 'icon-tile-empty';
+      mark.setAttribute('aria-hidden', 'true');
+      button.append(mark);
+    } else button.append(iconSvg(name));
+    button.addEventListener('click', () => onChoose(name));
+    tiles.push(button);
+    return button;
+  };
+  const group = document.createElement('div');
+  group.setAttribute('role', 'group');
+  group.setAttribute('aria-labelledby', heading.id);
+  if (none) {
+    const row = document.createElement('div');
+    row.className = 'icon-grid';
+    row.append(tile('none'));
+    group.append(row);
+  }
+  for (const [title, names] of groups) {
+    const caption = document.createElement('p');
+    caption.className = 'icon-group-title';
+    caption.textContent = title;
+    const grid = document.createElement('div');
+    grid.className = 'icon-grid';
+    for (const name of names) grid.append(tile(name));
+    group.append(caption, grid);
+  }
+  // Ohne gewählten Knopf in der Liste (etwa ein Symbol außerhalb der Gruppen) bleibt der erste
+  // erreichbar, sonst käme man mit Tab gar nicht hinein.
+  if (!tiles.some(button => button.tabIndex === 0)) tiles[0].tabIndex = 0;
+  group.addEventListener('keydown', event => {
+    const index = tiles.indexOf(document.activeElement);
+    if (index < 0) return;
+    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+    const target = event.key === 'Home' ? 0 : event.key === 'End' ? tiles.length - 1 : step ? (index + step + tiles.length) % tiles.length : null;
+    if (target === null) return;
+    event.preventDefault();
+    tiles[index].tabIndex = -1;
+    tiles[target].tabIndex = 0;
+    tiles[target].focus();
+  });
+  wrap.append(group);
+  return wrap;
+}

public/assets/link-field.js

@@ -0,0 +1,26 @@
+import { openPageDialog } from './page-picker.js';
+import { openDocuments } from './media.js';
+
+/*
+ * Ein Linkfeld in der Verwaltung: die Adresse bleibt ein Textfeld - eine fremde Seite tippt man
+ * ein -, daneben „Seite wählen“ und „PDF wählen“. Ohne Skript bleibt das Textfeld allein.
+ *
+ * Markup: <div data-link-field> mit einem <input data-link-input> darin. Felder, die später
+ * erscheinen (neue Menüeinträge), bekommen ihre Knöpfe beim ersten Fokus.
+ */
+const enhance = field => {
+  if (field.dataset.linkReady) return;
+  const input = field.querySelector('[data-link-input]');
+  if (!input) return;
+  field.dataset.linkReady = '1';
+  const row = document.createElement('div'); row.className = 'link-field-actions';
+  const choose = value => { input.value = value; input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); input.focus(); };
+  const page = document.createElement('button'); page.type = 'button'; page.className = 'text-button'; page.textContent = 'Seite wählen';
+  page.addEventListener('click', () => openPageDialog({ onChoose: item => choose(item.path === 'home' ? '/' : `/${item.path}`) }));
+  const pdf = document.createElement('button'); pdf.type = 'button'; pdf.className = 'text-button'; pdf.textContent = 'PDF wählen';
+  pdf.addEventListener('click', () => openDocuments({ onChoose: item => choose(item.src) }));
+  row.append(page, pdf); input.after(row);
+};
+const all = () => document.querySelectorAll('[data-link-field]').forEach(enhance);
+all();
+new MutationObserver(all).observe(document.body, { childList: true, subtree: true });

public/assets/media-dialog.css

@@ -37,4 +37,8 @@
 .document-card span{font-size:11px;color:var(--muted)}
 .document-card .document-badge{font-weight:700;color:#8b2f22;background:#fff0eb;border-radius:5px;padding:4px 6px;letter-spacing:.04em}
 .media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
-.href-document{margin:6px 0 4px}
+.href-pickers{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
+.href-document{margin:0}
+/* Seite als Linkziel wählen: schmal, die Trefferliste darf überstehen. */
+.page-dialog{max-width:560px;min-height:420px;overflow:visible}
+.page-dialog .content-picker{margin-top:16px}

public/assets/media-field.js

@@ -0,0 +1,31 @@
+import { openMedia } from './media.js';
+
+/*
+ * Bildfelder in Formularen der Verwaltung: Vorschaubild beim Teilen, Beitragsbild.
+ *
+ * Über den Dokumentknoten statt je Feld, weil die Suche in der Inhaltsliste die Ergebnisse
+ * austauscht - ein Feld, das danach erscheint, funktioniert trotzdem.
+ */
+document.addEventListener('click', event => {
+  const button = event.target.closest('[data-media-choose], [data-media-remove]');
+  const field = button?.closest('[data-media-field]');
+  if (!field) return;
+  const input = field.querySelector('input[type="hidden"]');
+  const thumb = field.querySelector('.media-field-thumb');
+  const name = field.querySelector('.media-field-name');
+  const choose = field.querySelector('[data-media-choose]');
+  const remove = field.querySelector('[data-media-remove]');
+  const show = item => {
+    input.value = item?.id ?? '';
+    thumb.hidden = !item;
+    if (item) thumb.src = item.variants[0].src; else thumb.removeAttribute('src');
+    name.textContent = item ? item.title : 'Kein Bild gewählt';
+    choose.textContent = item ? 'Anderes Bild wählen' : 'Bild wählen oder hochladen';
+    remove.hidden = !item;
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+  if (button.matches('[data-media-remove]')) { show(null); choose.focus(); return; }
+  // Kein Alternativtext nötig: das Bild erscheint als Vorschau beim Teilen oder in einer Karte,
+  // deren Titel schon sagt, worum es geht.
+  openMedia({ needsAlt: false, onChoose: ([item]) => { if (item) show(item); } });
+});

public/assets/menu-editor.js

@@ -1,4 +1,5 @@
 import { setupPicker } from './page-picker.js';
+import './link-field.js';
 
 const form = document.querySelector('#menu-editor');
 const list = form.querySelector('#menu-items');
@@ -74,8 +75,9 @@ function createRow(data) {
   for (const key of ['position', 'level', 'type']) field(key, data[key] ?? 0, '', 'hidden');
   const details = el('details'); const summary = el('summary');
   const { handle, chevron } = chrome();
-  summary.append(handle, el('strong', 'menu-entry-title', data.label), el('span', 'menu-entry-kind', data.type === 'page' ? 'Seitenlink' : 'Eigener Link'), chevron);
-  const body = el('div', 'menu-entry-fields'); details.append(summary, body); row.append(details);
+  // Der Ziehknopf steht neben der Zusammenfassung, nicht in ihr - kein Knopf in einem Knopf.
+  summary.append(el('strong', 'menu-entry-title', data.label), el('span', 'menu-entry-kind', data.type === 'page' ? 'Seitenlink' : 'Eigener Link'), chevron);
+  const body = el('div', 'menu-entry-fields'); details.append(summary, body); row.append(handle, details);
   const label = field('label', data.label, 'Beschriftung'); label.required = true; label.maxLength = 80;
   if (data.type === 'page') {
     const picker = form.querySelector('.menu-add .content-picker').cloneNode(true); delete picker.dataset.ready;
@@ -86,7 +88,8 @@ function createRow(data) {
     picker.querySelector('.picker-value').value = data.pageId || ''; picker.querySelector('.picker-status').textContent = '';
     body.append(picker); setupPicker(picker);
     field('anchor', data.anchor, 'Sprungziel (optional)').maxLength = 65;
-  } else { const url = field('url', data.url, 'Adresse'); url.required = true; url.maxLength = 2048; }
+    anchorChoice(row);
+  } else { const url = field('url', data.url, 'Adresse'); url.required = true; url.maxLength = 2048; linkButtons(url); }
   const newTab = field('newTab', '1', 'In neuem Tab öffnen', 'checkbox'); newTab.checked = data.newTab === true || data.newTab === '1';
   for (const [key, label, choices] of [['icon', 'Icon', { '': 'Kein Icon', ...Object.fromEntries(menuIcons.map(icon => [icon, iconNames[icon] || icon])) }], ['iconPosition', 'Icon-Position', { before: 'Vor dem Text', after: 'Nach dem Text' }]]) {
     const select = el('select'); select.dataset.key = key; select.id = `menu-${key}-${id}`;
@@ -101,6 +104,58 @@ function createRow(data) {
   row.append(actions); return row;
 }
 
+/*
+ * Das Sprungziel wird aus den Ankern der verknüpften Seite gewählt. Das Textfeld bleibt, was
+ * gespeichert wird - versteckt, und ohne Skript sichtbar zum Eintippen.
+ */
+const adminBase = document.querySelector('meta[name="admin-base"]').content;
+function anchorChoice(row) {
+  const input = row.querySelector('input[data-key="anchor"]');
+  const pageValue = row.querySelector('.picker-value');
+  if (!input || !pageValue || input.dataset.enhanced) return;
+  input.dataset.enhanced = '1';
+  const label = row.querySelector(`label[for="${input.id}"]`);
+  const select = el('select'); select.id = input.id; input.id += '-value'; input.type = 'hidden';
+  if (label) { label.htmlFor = select.id; label.textContent = 'Sprungziel'; }
+  input.after(select);
+  const help = el('p', 'field-help', ''); select.after(help);
+  let request = 0;
+  const load = async () => {
+    const mine = ++request, current = input.value;
+    select.replaceChildren(new Option('Seitenanfang', ''));
+    if (current) select.append(new Option(`#${current}`, current));
+    select.value = current;
+    help.textContent = '';
+    if (!pageValue.value) { select.disabled = true; return; }
+    select.disabled = false;
+    try {
+      const response = await fetch(`${adminBase}/api/sprungziele/${encodeURIComponent(pageValue.value)}`, { credentials: 'same-origin' });
+      if (!response.ok || response.redirected) throw new Error();
+      const { items } = await response.json();
+      if (mine !== request) return;
+      select.replaceChildren(new Option('Seitenanfang', ''));
+      for (const item of items) select.append(new Option(item.label, item.anchor));
+      if (current && !items.some(item => item.anchor === current)) select.append(new Option(`#${current} (auf der Seite nicht gefunden)`, current));
+      select.value = current;
+      help.textContent = items.length ? '' : 'Diese Seite hat keine Sprungziele. Im Editor lässt sich einer Sektion, Zeile oder Spalte ein Sprungziel geben.';
+    } catch {
+      if (mine === request) help.textContent = 'Sprungziele konnten nicht geladen werden.';
+    }
+  };
+  select.addEventListener('change', () => { input.value = select.value; input.dispatchEvent(new Event('change', { bubbles: true })); });
+  pageValue.addEventListener('change', () => { input.value = ''; load(); });
+  load();
+}
+list.querySelectorAll('.menu-entry').forEach(anchorChoice);
+function linkButtons(input) {
+  // Die Adresse eines eigenen Links: Seite oder PDF wählen, eine fremde Adresse tippen.
+  if (input.closest('[data-link-field]')) return;
+  input.dataset.linkInput = '';
+  const box = el('div', 'link-field'); box.dataset.linkField = '';
+  input.before(box); box.append(input);
+}
+list.querySelectorAll('input[data-key="url"]').forEach(linkButtons);
+
 function restore(value) {
   form.elements.name.value = value.name; list.replaceChildren(...value.rows.map(createRow)); refresh(); last = state();
 }

public/assets/page-picker.js

@@ -52,7 +52,11 @@ export function setupPicker(picker, onSelect = () => {}) {
   };
   input.addEventListener('focus', () => search(''));
   input.addEventListener('input', () => {
-    value.value = ''; input.setCustomValidity(input.value && !picker.closest('.menu-add') ? 'Bitte einen Suchtreffer auswählen oder die Suche leeren.' : '');
+    // Ein freies Feld (etwa das Ziel einer Weiterleitung) nimmt auch einen Pfad, der keine Seite
+    // ist; gewählt wird trotzdem am bequemsten aus der Suche.
+    const free = picker.dataset.free === '1';
+    value.value = free ? input.value.trim().replace(/^\/+/, '') : '';
+    input.setCustomValidity(input.value && !free && !picker.closest('.menu-add') ? 'Bitte einen Suchtreffer auswählen oder die Suche leeren.' : '');
     value.dispatchEvent(new Event('change', { bubbles: true }));
     controller?.abort(); clearTimeout(timer); timer = setTimeout(() => search(input.value), 180);
   });
@@ -66,3 +70,30 @@ export function setupPicker(picker, onSelect = () => {}) {
 }
 
 document.querySelectorAll('.content-picker').forEach(picker => setupPicker(picker));
+
+/**
+ * Eine Seite oder einen Beitrag für ein Linkziel wählen, in einem kleinen Dialog mit derselben
+ * Suche wie in den Menüs. onChoose bekommt den Treffer mit Titel und Pfad.
+ */
+export function openPageDialog({ onChoose } = {}) {
+  const opener = document.activeElement;
+  const dialog = document.createElement('dialog'); dialog.className = 'media-dialog page-dialog';
+  dialog.setAttribute('aria-labelledby', 'page-dialog-title');
+  const source = document.querySelector('meta[name="admin-base"]').content + '/api/content-choices';
+  dialog.innerHTML = `<div class="media-heading"><div><p class="eyebrow">LINKZIEL</p><h2 id="page-dialog-title">Seite wählen</h2></div><button type="button" class="secondary" data-close>Schließen</button></div>
+    <div class="content-picker">
+      <label for="page-dialog-search">Seite oder Beitrag suchen</label>
+      <div class="picker-input"><input id="page-dialog-search" type="search" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="page-dialog-results" placeholder="Titel oder Adresse …"><button type="button" class="subtle picker-clear" aria-label="Suche leeren">✕</button></div>
+      <input type="hidden" class="picker-value">
+      <div id="page-dialog-results" class="picker-results" role="listbox" aria-label="Suchergebnisse" hidden></div>
+      <p class="picker-status field-help" role="status"></p>
+    </div>`;
+  const picker = dialog.querySelector('.content-picker');
+  picker.dataset.source = source; picker.classList.add('menu-add');
+  document.body.append(dialog);
+  setupPicker(picker, item => { if (item) { onChoose?.(item); dialog.close(); } });
+  dialog.querySelector('[data-close]').addEventListener('click', () => dialog.close());
+  dialog.addEventListener('close', () => { dialog.remove(); if (opener?.isConnected) opener.focus(); });
+  dialog.showModal();
+  dialog.querySelector('#page-dialog-search').focus();
+}

public/assets/rich-text.js

@@ -9,6 +9,8 @@
  * the alternative would be a selection engine of our own. The formatting it produces is normalised
  * on the server anyway, so a browser quirk cannot store something unexpected.
  */
+import { openPageDialog } from './page-picker.js';
+import { openDocuments } from './media.js';
 
 /** Mirrors RichText::ALLOWED. Only used for the hint text and for cleaning up on paste. */
 export const ALLOWED_TAGS = ['p', 'br', 'strong', 'b', 'em', 'i', 'u', 's', 'code', 'mark', 'sup', 'sub', 'ul', 'ol', 'li', 'a'];
@@ -116,7 +118,12 @@ export function createRichText(value, apply, { label = 'Text', plain = false } =
     if ('Enter' === event.key) { event.preventDefault(); confirmLink(); }
     if ('Escape' === event.key) { event.preventDefault(); linkRow.hidden = true; surface.focus(); }
   });
-  linkRow.append(linkInput, newTabLabel, button('Übernehmen', 'Linkziel übernehmen', confirmLink, 'text-button'));
+  // Eine eigene Seite oder ein PDF wählt man, statt die Adresse zu kennen.
+  const fill = value => { linkInput.value = value; linkInput.focus(); };
+  linkRow.append(linkInput,
+    button('Seite …', 'Seite oder Beitrag als Linkziel wählen', () => openPageDialog({ onChoose: item => fill(item.path === 'home' ? '/' : `/${item.path}`) }), 'text-button'),
+    button('PDF …', 'PDF aus der Mediathek als Linkziel wählen', () => openDocuments({ onChoose: item => fill(item.src) }), 'text-button'),
+    newTabLabel, button('Übernehmen', 'Linkziel übernehmen', confirmLink, 'text-button'));
 
   bar.append(button('🔗', 'Link setzen oder entfernen', () => {
     const selection = window.getSelection();

public/assets/site.css

@@ -47,8 +47,8 @@ p{hyphens:auto}
 /* 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}
+.button-icon,.nav-arrow{display:inline-flex;align-items:center}
+.button-icon>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
@@ -267,6 +267,9 @@ body.consent-open{padding-bottom:320px}
 /* Das eingebettete SVG traegt dieselbe Klasse wie seine Huelle und setzte deshalb die
    Akzentfarbe erneut - eine am Symbolblock eingestellte Farbe kam nie an. */
 .block-icon .block-icon{color:inherit}
+/* Der Pfeil im Knopf ist dasselbe Symbol und nahm deshalb die Akzentfarbe statt der Schriftfarbe
+   des Knopfs: grün auf Rot, auch beim Überfahren (Hüfner, 06.10.2026). */
+.button-icon .block-icon{color:inherit}
 .icon-size-12{width:12px;height:12px}.icon-size-16{width:16px;height:16px}.icon-size-20{width:20px;height:20px}
 .icon-size-24{width:24px;height:24px}.icon-size-32{width:32px;height:32px}.icon-size-40{width:40px;height:40px}
 .icon-size-48{width:48px;height:48px}.icon-size-56{width:56px;height:56px}.icon-size-64{width:64px;height:64px}

public/assets/term-chips.js

@@ -0,0 +1,42 @@
+/*
+ * Kategorien und Schlagwörter eines Beitrags: das Textfeld mit der Liste durch Komma bleibt, was
+ * gespeichert wird. Darunter stehen die vorhandenen Namen zum Anklicken - ein Klick nimmt einen
+ * Namen auf oder heraus. Neue Namen tippt man weiter ein.
+ *
+ * Über den Dokumentknoten, weil die Suche in der Inhaltsliste die Ergebnisse austauscht.
+ */
+const split = value => value.split(',').map(name => name.trim()).filter(Boolean);
+const same = (a, b) => a.localeCompare(b, 'de', { sensitivity: 'base' }) === 0;
+
+const enhance = input => {
+  if (input.dataset.termReady) return;
+  let names = [];
+  try { names = JSON.parse(input.dataset.termInput || '[]'); } catch { names = []; }
+  input.dataset.termReady = '1';
+  if (!names.length) return;
+  const box = document.createElement('div'); box.className = 'term-chips'; box.setAttribute('role', 'group');
+  const label = document.querySelector(`label[for="${input.id}"]`)?.textContent || 'Vorhandene Namen';
+  box.setAttribute('aria-label', `${label}: vorhandene zum Übernehmen`);
+  const sync = () => {
+    const chosen = split(input.value);
+    for (const chip of box.children) chip.setAttribute('aria-pressed', String(chosen.some(name => same(name, chip.dataset.name))));
+  };
+  for (const name of names) {
+    const chip = document.createElement('button'); chip.type = 'button'; chip.className = 'term-chip'; chip.dataset.name = name; chip.textContent = name;
+    chip.addEventListener('click', () => {
+      const chosen = split(input.value);
+      const next = chosen.some(entry => same(entry, name)) ? chosen.filter(entry => !same(entry, name)) : [...chosen, name];
+      input.value = next.join(', ');
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+      sync();
+    });
+    box.append(chip);
+  }
+  input.addEventListener('input', sync);
+  const help = input.parentElement.querySelector('.field-help');
+  (help ?? input).after(box);
+  sync();
+};
+const all = () => document.querySelectorAll('[data-term-input]').forEach(enhance);
+all();
+new MutationObserver(all).observe(document.body, { childList: true, subtree: true });

scripts/admin-quality-check.mjs

@@ -76,9 +76,15 @@ try {
   await page.mouse.move(1, 1); await page.waitForTimeout(7700);
   assert.ok(Math.abs((await geometry()).left - manual.left) > 20, 'play resumes after manual operation');
   await page.emulateMedia({ reducedMotion: 'reduce' });
-  assert.equal(await controls.getByRole('button', { name: 'Wiedergabe: automatisch weiterblättern' }).isDisabled(), true);
+  // Seit 1.11 entscheidet die Website (Einstellungen → Bewegung): Standard ist „immer abspielen“,
+  // nur mit „Systemvorgabe beachten“ (Klasse motion-respect) hält „Bewegung reduzieren“ die
+  // Automatik an. Geprüft wird das Verhalten, das die Einstellung verspricht.
+  const respects = await page.evaluate(() => document.documentElement.classList.contains('motion-respect'));
+  const play = controls.locator('.slider-play');
+  assert.equal(await play.isDisabled(), respects, 'the play button follows the motion setting');
   const reduced = await geometry(); await page.waitForTimeout(7100);
-  assert.ok(Math.abs((await geometry()).left - reduced.left) < 2, 'reduced motion stops autoplay');
+  if (respects) assert.ok(Math.abs((await geometry()).left - reduced.left) < 2, 'reduced motion stops autoplay when the site respects it');
+  else assert.ok(Math.abs((await geometry()).left - reduced.left) > 20, 'autoplay keeps running when the site plays motion always');
   await controls.getByRole('button', { name: 'Vorherige Folie', exact: true }).click();
   assert.ok(Math.abs((await geometry()).left - reduced.left) > 20, 'manual navigation works with reduced motion');
   await page.emulateMedia({ reducedMotion: 'no-preference' });
@@ -143,7 +149,7 @@ try {
   await page.getByRole('button', { name: 'Link hinzufügen', exact: true }).click();
   assert.equal((await menuSave()).status(), 422);
   assert.equal(await entries.last().locator('[data-key="url"]').inputValue(), 'javascript:alert(1)');
-  assert.equal(await page.locator('#menu-error').isVisible(), true);
+  await page.locator('#menu-error').waitFor({ state: 'visible' });
   await entries.last().locator('summary').click();
   await entries.last().getByLabel('Adresse', { exact: true }).fill('/#kontakt');
   assert.equal((await menuSave()).status(), 200);
@@ -155,7 +161,7 @@ try {
   await page.getByLabel('Name des Menüs').fill('QA lokaler Stand');
   assert.equal((await menuSave()).status(), 409);
   assert.equal(await page.getByLabel('Name des Menüs').inputValue(), 'QA lokaler Stand');
-  assert.equal(await page.locator('#menu-error').isVisible(), true);
+  await page.locator('#menu-error').waitFor({ state: 'visible' });
   checks.push({ name: 'menu search by keyboard, add/nest/remove/undo/save, invalid URL and conflict retain input', passed: true });
 
   await page.goto(origin + '/admin/forms');
@@ -172,7 +178,10 @@ try {
   await page.getByLabel('Name', { exact: true }).fill('QA Gemeinsame Sektion');
   await page.getByRole('button', { name: 'Anlegen und bearbeiten', exact: true }).click();
   await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  // Die Sektion im Reiter „Struktur“ wählen, dann den Text aus „Elemente“ hineinsetzen.
+  await page.getByRole('tab', { name: 'Struktur', exact: true }).click();
   await page.locator('#structure .tree-item').first().click();
+  await page.getByRole('tab', { name: 'Elemente', exact: true }).click();
   await page.locator('#library [data-add="text"]').click();
   await page.getByLabel('Text', { exact: true }).fill('Dieser Inhalt wird als gemeinsame Sektion gespeichert.');
   await page.getByLabel('Text', { exact: true }).press('Tab');
@@ -197,7 +206,7 @@ try {
 
   await page.goto(origin + '/admin/pages/' + fixture.homeId);
   await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
-  await page.getByRole('button', { name: 'Bewegung testen', exact: true }).click();
+  await page.locator('#preview-motion').click();
   const preview = page.frameLocator('#preview'), previewSlider = preview.locator('#hero-slider');
   // Measure in the outer page: Playwright's in-frame animation stability check can stall in
   // a no-script sandbox while a Web Animation runs. Use a real pointer on verified geometry.
@@ -210,7 +219,10 @@ try {
   await page.waitForTimeout(800);
   assert.ok(await previewSlider.evaluate(slider => slider.scrollLeft > 20));
   assert.equal(await page.locator('#preview').getAttribute('sandbox'), 'allow-same-origin');
-  await page.getByRole('button', { name: 'Bewegung stoppen', exact: true }).click();
+  // Derselbe Knopf stoppt wieder; er sagt es in seiner Beschriftung und in aria-pressed.
+  assert.equal(await page.locator('#preview-motion').getAttribute('aria-label'), 'Bewegung in der Vorschau stoppen');
+  await page.locator('#preview-motion').click();
+  assert.equal(await page.locator('#preview-motion').getAttribute('aria-pressed'), 'false');
   assert.equal(await preview.locator('.slider-controls').count(), 0);
   checks.push({ name: 'sandboxed editor preview has opt-in working slider controls', passed: true });
 

scripts/audit.mjs

@@ -18,7 +18,9 @@ const portProbe = net.createServer();
 await new Promise(resolve => portProbe.listen(0, '127.0.0.1', resolve));
 const port = portProbe.address().port;
 await new Promise(resolve => portProbe.close(resolve));
-const chrome = await chromium.launch({ args: [`--remote-debugging-port=${port}`] });
+// CMS_HOST_RULES, etwa "MAP localhost 127.0.0.1": für eingebettete Seiten, die das Einbetten nur
+// von localhost erlauben, während der Server auf 127.0.0.1 lauscht (Kantarci-Markt-App).
+const chrome = await chromium.launch({ args: [`--remote-debugging-port=${port}`, ...(process.env.CMS_HOST_RULES ? [`--host-resolver-rules=${process.env.CMS_HOST_RULES}`] : [])] });
 const summary = [];
 try {
   for (const path of paths) {

scripts/build-huefner-assets.php

@@ -0,0 +1,45 @@
+<?php
+
+/**
+ * Bereitet die Bilder des Hüfner-Entwurfs für die Mediathek vor.
+ *
+ * Kopiert die Fotos und das Logo aus dem gelieferten Ordner (images/) und schneidet aus dem Logo
+ * den Baum mit den Steinen als quadratisches Seitensymbol (favicon.png) heraus. Der Baum ist im
+ * Logo links, der Schriftzug rechts; ein Favicon mit Schrift wäre in 32 px unlesbar.
+ *
+ * Aufruf: php scripts/build-huefner-assets.php <Quellordner mit images/> <Zielordner>
+ */
+$quelle = rtrim($argv[1] ?? '', '/\\');
+$ziel = rtrim($argv[2] ?? '', '/\\');
+if ('' === $quelle || '' === $ziel || !is_dir($quelle.'/images')) {
+    fwrite(STDERR, "Aufruf: php scripts/build-huefner-assets.php <Ordner mit images/> <Zielordner>\n");
+    exit(1);
+}
+if (!is_dir($ziel) && !mkdir($ziel, 0775, true)) {
+    fwrite(STDERR, "Zielordner lässt sich nicht anlegen: $ziel\n");
+    exit(1);
+}
+
+foreach (glob($quelle.'/images/*.{jpg,png}', GLOB_BRACE) ?: [] as $datei) {
+    copy($datei, $ziel.'/'.basename($datei));
+}
+
+// Baum und Steine: im 1600 x 607 px großen Logo etwa x 15–500, y 10–560.
+$logo = imagecreatefrompng($quelle.'/images/logo.png');
+if (false === $logo) {
+    fwrite(STDERR, "logo.png lässt sich nicht lesen.\n");
+    exit(1);
+}
+$kante = 512;
+$symbol = imagecreatetruecolor($kante, $kante);
+imagesavealpha($symbol, true);
+imagealphablending($symbol, false);
+imagefill($symbol, 0, 0, imagecolorallocatealpha($symbol, 0, 0, 0, 127));
+imagealphablending($symbol, true);
+[$x, $y, $b, $h] = [15, 10, 490, 550];
+$massstab = min(($kante - 24) / $b, ($kante - 24) / $h);
+$zb = (int) round($b * $massstab);
+$zh = (int) round($h * $massstab);
+imagecopyresampled($symbol, $logo, (int) (($kante - $zb) / 2), (int) (($kante - $zh) / 2), $x, $y, $zb, $zh, $b, $h);
+imagepng($symbol, $ziel.'/favicon.png');
+echo "Bilder kopiert, Seitensymbol geschnitten: $ziel\n";

scripts/build-kantarci-markt-assets.mjs

@@ -0,0 +1,82 @@
+/*
+ * Bereitet die Bilder der Seite „Kantarci Markt – Neueröffnung“ für die Mediathek vor.
+ *
+ * Die Mediathek nimmt kein SVG. Das Seitensymbol und der runde Stempel „Frische • Qualität •
+ * Vertrauen“ der Vorlage sind aber SVG (der Stempel mit Text auf einem Kreisbogen, das kann kein
+ * Baustein). Chromium rastert beide zu PNG. Das Logo der Vorlage (1536 × 1024, 1,3 MB) wird auf
+ * seinen sichtbaren Teil zugeschnitten und auf 600 px Breite verkleinert (doppelte Anzeigebreite),
+ * angezeigt wird es mit höchstens 300 px.
+ *
+ *   node scripts/build-kantarci-markt-assets.mjs [ordner]
+ *   → logo.png, symbol.png, stempel.png im Ordner (Standard var/kantarci-markt-assets)
+ */
+import { chromium } from 'playwright';
+import { readFile, writeFile } from 'node:fs/promises';
+
+const ordner = process.argv[2] || 'var/kantarci-markt-assets';
+const FORST = '#123b26', GOLD = '#a88332', GOLD_HELL = '#d2b978';
+
+const browser = await chromium.launch();
+const seite = await browser.newPage();
+
+// Logo: sichtbaren Bereich über den Alphakanal bestimmen, zuschneiden, verkleinern.
+const logo = (await readFile(`${ordner}/kantarci-markt-logo.png`)).toString('base64');
+const logoPng = await seite.evaluate(async (daten) => {
+    const bild = new Image();
+    bild.src = `data:image/png;base64,${daten}`;
+    await bild.decode();
+    const quelle = new OffscreenCanvas(bild.width, bild.height);
+    const q = quelle.getContext('2d');
+    q.drawImage(bild, 0, 0);
+    const { data } = q.getImageData(0, 0, bild.width, bild.height);
+    let [x0, y0, x1, y1] = [bild.width, bild.height, 0, 0];
+    for (let y = 0; y < bild.height; y++) {
+        for (let x = 0; x < bild.width; x++) {
+            // Der Schein um die Waage läuft sehr flach aus; erst ab etwa 8 % Deckkraft zählt er.
+            if (data[(y * bild.width + x) * 4 + 3] > 20) {
+                x0 = Math.min(x0, x); y0 = Math.min(y0, y); x1 = Math.max(x1, x); y1 = Math.max(y1, y);
+            }
+        }
+    }
+    const rand = 8;
+    x0 = Math.max(0, x0 - rand); y0 = Math.max(0, y0 - rand);
+    x1 = Math.min(bild.width - 1, x1 + rand); y1 = Math.min(bild.height - 1, y1 + rand);
+    const breite = x1 - x0 + 1, hoehe = y1 - y0 + 1;
+    const ziel = Math.min(600, breite);
+    const leinwand = new OffscreenCanvas(ziel, Math.round(hoehe * ziel / breite));
+    const z = leinwand.getContext('2d');
+    z.imageSmoothingQuality = 'high';
+    z.drawImage(bild, x0, y0, breite, hoehe, 0, 0, leinwand.width, leinwand.height);
+    const blob = await leinwand.convertToBlob({ type: 'image/png' });
+    const bytes = new Uint8Array(await blob.arrayBuffer());
+    let binaer = '';
+    for (const b of bytes) binaer += String.fromCharCode(b);
+    return { png: btoa(binaer), breite: leinwand.width, hoehe: leinwand.height, ausschnitt: [x0, y0, breite, hoehe] };
+}, logo);
+await writeFile(`${ordner}/logo.png`, Buffer.from(logoPng.png, 'base64'));
+console.log(`logo.png ${logoPng.breite} × ${logoPng.hoehe} (Ausschnitt ${logoPng.ausschnitt.join(', ')})`);
+
+const rastern = async (svg, groesse, datei) => {
+    await seite.setViewportSize({ width: groesse, height: groesse });
+    await seite.setContent(`<!doctype html><style>html,body{margin:0;background:transparent}svg{display:block}</style>${svg}`);
+    await seite.screenshot({ path: `${ordner}/${datei}`, omitBackground: true });
+    console.log(`${datei} ${groesse} × ${groesse}`);
+};
+
+// Seitensymbol: das K mit Blatt aus dem Favicon der Vorlage.
+await rastern(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="256" height="256">
+<rect width="64" height="64" rx="14" fill="#062f24"/>
+<path d="M19 43V18h7v10l10-10h9L33 30l13 13h-9L26 32v11z" fill="${GOLD}"/>
+<path d="M41 10c-7 2-10 6-9 13 6-1 10-5 9-13Z" fill="${GOLD}"/></svg>`, 256, 'symbol.png');
+
+// Stempel: goldene Scheibe, Umschrift auf dem Kreis, Blatt in der Mitte. Doppelte Größe für
+// scharfe Kanten auf hochauflösenden Bildschirmen (angezeigt mit 122 px).
+await rastern(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122 122" width="244" height="244">
+<circle cx="61" cy="61" r="61" fill="${GOLD_HELL}"/>
+<g transform="translate(10 10) scale(1.1333)">
+<defs><path id="kreis" d="M45,45 m-31,0 a31,31 0 1,1 62,0 a31,31 0 1,1 -62,0"/></defs>
+<text font-family="Arial, sans-serif" font-weight="700" font-size="8" letter-spacing="1.4" fill="${FORST}"><textPath href="#kreis">FRISCHE • QUALITÄT • VERTRAUEN • </textPath></text>
+<path d="M45 52c-2-16 6-25 22-26-1 16-8 24-22 26Zm0 0c-8-11-17-13-27-7 7 12 16 14 27 7Z" fill="${FORST}"/>
+</g></svg>`, 244, 'stempel.png');
+
+await browser.close();

scripts/button-check.mjs

@@ -30,6 +30,13 @@ try {
   browser = await chromium.launch();
   const context = await browser.newContext({ viewport: { width: 1600, height: 1050 } });
   page = await context.newPage(); page.setDefaultTimeout(15000); page.on('pageerror', error => errors.push(error.message));
+  // Ein Baustein wird im Reiter „Struktur“ gewählt und mit „Bearbeiten“ geöffnet - die
+  // Seitenleiste zeigt seit 1.11 nur eine Ansicht auf einmal.
+  const selectBlock = async id => {
+    await page.getByRole('tab', { name: 'Struktur', exact: true }).click();
+    await page.locator(`#structure [data-block-id="${id}"]`).click();
+    await page.locator(`#structure [data-edit-block="${id}"]`).click();
+  };
   await page.goto(origin + '/admin/login');
   await page.getByLabel('Benutzername').fill(fixture.username); await page.getByLabel('Passwort', { exact: true }).fill(fixture.password);
   await page.getByRole('button', { name: 'Anmelden', exact: true }).click(); await page.waitForURL(origin + '/admin');
@@ -53,7 +60,7 @@ try {
   checks.push('global typography, visual presets, normal/hover preview and actual form save including empty palette rows');
 
   await page.goto(`${origin}/admin/pages/${fixture.homeId}`);
-  await page.locator('#structure [data-block-id="qa-button"]').click();
+  await selectBlock('qa-button');
   await page.getByRole('button', { name: 'Button-Vorlage Abgerundet', exact: true }).click();
   const waitVariant = async (id, radius, background) => page.waitForFunction(({id,radius,background}) => {
     const doc = document.querySelector('#preview')?.contentDocument, el = doc?.getElementById(id);
@@ -75,7 +82,7 @@ try {
   await page.locator('[data-viewport="desktop"]').click(); await waitVariant('qa-button', '8px', false);
   await page.locator('.button-designer').screenshot({ path: `${report}/editor-controls.png` });
   await page.locator('#save').click(); await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
-  await page.reload(); await page.locator('#structure [data-block-id="qa-button"]').click(); await waitVariant('qa-button', '8px', false);
+  await page.reload(); await selectBlock('qa-button'); await waitVariant('qa-button', '8px', false);
   const stored = (await (await context.request.get(api)).json()).document;
   assert.equal(stored.schemaVersion, 21);
   assert.deepEqual(stored.blocks[0].children[1].props, { text: 'Mehr erfahren', href: '/kontakt' });

scripts/button-icon-check.mjs

@@ -0,0 +1,122 @@
+// Prüft die Symbolwahl am Button im echten Editor: Kachel wählen, Stellung umschalten, kein Symbol,
+// Tastatur, Rückgängig, Speichern und Neuladen - auf einer isolierten Kopie der Pilotdaten.
+import { chromium } from 'playwright';
+import assert from 'node:assert/strict';
+import { execFileSync, spawn } from 'node:child_process';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { randomBytes } from 'node:crypto';
+import net from 'node:net';
+
+const php = process.env.PHP_BINARY || 'php';
+const fixture = JSON.parse(execFileSync(php, ['tests/pilot-fixture.php'], { encoding: 'utf8', windowsHide: true }));
+const env = { ...process.env, APP_ENV: 'prod', APP_DEBUG: '0', APP_SECRET: randomBytes(32).toString('hex'), DATABASE_URL: fixture.databaseUrl, MEDIA_DIRECTORY: fixture.mediaDirectory };
+execFileSync(php, ['bin/console', 'cache:clear', '--env=prod', '--no-debug'], { stdio: 'ignore', windowsHide: true, env });
+const probe = net.createServer(); await new Promise(resolve => probe.listen(0, '127.0.0.1', resolve));
+const port = probe.address().port; await new Promise(resolve => probe.close(resolve));
+const origin = `http://127.0.0.1:${port}`;
+const server = spawn(php, ['-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`, '-t', 'public', 'bin/dev-router.php'], { windowsHide: true, stdio: 'ignore', env: { ...env, SITE_ORIGIN: origin } });
+const report = 'reports/button-icons'; await mkdir(report, { recursive: true });
+let browser, page;
+const checks = [], errors = [];
+
+try {
+  for (let attempt = 0; attempt < 60; attempt++) {
+    try { if ((await fetch(origin)).ok) break; } catch {}
+    if (attempt === 59) throw new Error('Pilot test server did not start');
+    await new Promise(resolve => setTimeout(resolve, 200));
+  }
+  browser = await chromium.launch();
+  const context = await browser.newContext({ viewport: { width: 1600, height: 1050 } });
+  page = await context.newPage(); page.setDefaultTimeout(15000); page.on('pageerror', error => errors.push(error.message));
+  const selectBlock = async id => {
+    await page.getByRole('tab', { name: 'Struktur', exact: true }).click();
+    await page.locator(`#structure [data-block-id="${id}"]`).click();
+    await page.locator(`#structure [data-edit-block="${id}"]`).click();
+  };
+  await page.goto(origin + '/admin/login');
+  await page.getByLabel('Benutzername').fill(fixture.username); await page.getByLabel('Passwort', { exact: true }).fill(fixture.password);
+  await page.getByRole('button', { name: 'Anmelden', exact: true }).click(); await page.waitForURL(origin + '/admin');
+  const api = `${origin}/admin/api/pages/${fixture.homeId}`;
+  const data = await (await context.request.get(api)).json();
+  const startVersion = data.document.schemaVersion;
+  data.document.blocks.unshift({ id: 'qa-icons', type: 'section', children: [
+    { id: 'qa-icon-button', type: 'button', props: { text: 'Jetzt anrufen', href: 'tel:+4972296992826' } },
+  ] });
+  assert.equal((await context.request.post(api + '/draft', { headers: { 'X-CSRF-Token': data.csrfToken }, data: { document: data.document, expectedVersion: data.version } })).status(), 200);
+
+  // Was die Vorschau im Button zeigt: Reihenfolge von Text und Symbol und die Zeichnung.
+  const preview = () => page.evaluate(() => {
+    const el = document.querySelector('#preview')?.contentDocument?.getElementById('qa-icon-button');
+    if (!el) return null;
+    return { first: el.firstElementChild?.className ?? null, text: el.textContent.trim(), path: el.querySelector('svg path')?.getAttribute('d') ?? null, firstNode: el.firstChild?.nodeType };
+  });
+  const waitPreview = async expected => page.waitForFunction(expected => {
+    const el = document.querySelector('#preview')?.contentDocument?.getElementById('qa-icon-button');
+    if (!el) return false;
+    const path = el.querySelector('svg path')?.getAttribute('d') ?? null;
+    const iconFirst = el.firstChild?.nodeType === 1;
+    return (expected.path === null ? path === null : path?.startsWith(expected.path)) && (expected.first === undefined || iconFirst === expected.first);
+  }, expected);
+
+  await page.goto(`${origin}/admin/pages/${fixture.homeId}`);
+  await selectBlock('qa-icon-button');
+  const picker = page.locator('.icon-picker');
+  await picker.waitFor();
+  // Ohne Wahl: der bisherige Pfeil ist markiert und steht in der Vorschau hinter dem Text.
+  assert.equal(await picker.locator('[aria-pressed="true"]').getAttribute('data-icon'), 'arrow-up-right');
+  await waitPreview({ path: 'M6.5 17.5', first: false });
+  assert.equal(await picker.locator('.icon-tile').count(), 25, 'Kein Symbol plus 24 Symbole in drei Gruppen');
+  assert.deepEqual(await picker.locator('.icon-group-title').allTextContents(), ['Pfeile', 'Kontakt', 'Allgemein']);
+  assert.equal(await page.locator('#property-icon').count(), 0, 'Keine Auswahlliste mehr');
+  await page.locator('.properties-panel, #properties, aside').first().screenshot({ path: `${report}/vorher.png` }).catch(() => {});
+  checks.push('ohne Wahl: Pfeil ↗ markiert und hinter dem Text, Kacheln statt Liste');
+
+  await picker.getByRole('button', { name: 'Telefon', exact: true }).click();
+  await waitPreview({ path: 'M6 3h4', first: false });
+  assert.equal(await page.locator('.icon-tile[data-icon="phone"]').getAttribute('aria-pressed'), 'true');
+  assert.equal(await page.evaluate(() => document.activeElement?.dataset.icon), 'phone', 'Fokus bleibt auf der gewählten Kachel');
+  await page.getByRole('button', { name: 'Vor dem Text', exact: true }).click();
+  await waitPreview({ path: 'M6 3h4', first: true });
+  checks.push('Telefon gewählt, dann vor den Text gestellt - Vorschau folgt');
+
+  // Tastatur: Pfeiltasten wandern durch die Kacheln, Enter wählt.
+  await page.locator('.icon-tile[data-icon="phone"]').focus();
+  await page.keyboard.press('ArrowRight');
+  assert.equal(await page.evaluate(() => document.activeElement?.dataset.icon), 'mail');
+  await page.keyboard.press('Enter');
+  await waitPreview({ path: 'M3 6h18', first: true });
+  checks.push('Pfeiltaste und Enter wählen E-Mail');
+
+  await page.locator('#undo').click(); await waitPreview({ path: 'M6 3h4', first: true });
+  await page.locator('#redo').click(); await waitPreview({ path: 'M3 6h18', first: true });
+  checks.push('Rückgängig und Wiederholen');
+
+  await page.getByRole('button', { name: 'Kein Symbol', exact: true }).click();
+  await waitPreview({ path: null });
+  assert.equal(await page.getByRole('button', { name: 'Vor dem Text', exact: true }).count(), 0, 'Ohne Symbol keine Stellung');
+  assert.equal((await preview()).text, 'Jetzt anrufen');
+  await page.locator('#undo').click(); await waitPreview({ path: 'M3 6h18', first: true });
+  await picker.getByRole('button', { name: 'Pfeil nach rechts', exact: true }).click();
+  await waitPreview({ path: 'M4 12h15.5', first: true });
+  await page.locator('.icon-picker').screenshot({ path: `${report}/auswahl.png` });
+  await page.locator('.icon-position').screenshot({ path: `${report}/stellung.png` });
+  checks.push('kein Symbol, dann Pfeil nach rechts');
+
+  await page.locator('#save').click(); await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
+  const stored = (await (await context.request.get(api)).json()).document;
+  assert.equal(stored.schemaVersion, 25, `vorher v${startVersion}`);
+  assert.deepEqual(stored.blocks[0].children[0].props, { text: 'Jetzt anrufen', href: 'tel:+4972296992826', icon: 'arrow-right', iconPosition: 'start' });
+  await page.reload(); await selectBlock('qa-icon-button');
+  await page.locator('.icon-picker').waitFor();
+  assert.equal(await page.locator('.icon-tile[aria-pressed="true"]').getAttribute('data-icon'), 'arrow-right');
+  assert.equal(await page.locator('.icon-position [aria-pressed="true"]').getAttribute('data-position'), 'start');
+  await waitPreview({ path: 'M4 12h15.5', first: true });
+  checks.push('gespeichert als Schema v25, nach Neuladen unverändert');
+
+  assert.deepEqual(errors, []);
+  await writeFile(`${report}/report.json`, JSON.stringify({ origin, checks }, null, 2));
+  console.log(checks.map(check => `✓ ${check}`).join('\n'));
+} finally {
+  await browser?.close();
+  server.kill();
+}

scripts/editor-check.mjs

@@ -375,9 +375,28 @@ try {
   assert.match(await page.locator('#property-href').inputValue(), /^\/media\/[a-f0-9]{32}\.pdf$/);
   await page.waitForFunction(() => /^\/media\/[a-f0-9]{32}\.pdf$/.test(document.querySelector('#preview').contentDocument?.querySelector('a.button')?.getAttribute('href') ?? ''));
   checks.push({ name: 'a PDF from the library as a link target', passed: true });
+  // Eine eigene Seite als Linkziel: gesucht und gewählt, nicht als Pfad abgetippt.
+  await page.getByRole('button', { name: 'Seite wählen', exact: true }).click();
+  const pageDialog = page.locator('dialog.page-dialog');
+  await pageDialog.locator('[role="option"]').first().waitFor();
+  const pageAxe = await new AxeBuilder({ page }).include('dialog.page-dialog').withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']).analyze();
+  assert.deepEqual(pageAxe.violations.map(v => v.id), [], 'the page dialog has no accessibility violations');
+  await pageDialog.locator('[role="option"]').first().click();
+  await pageDialog.waitFor({ state: 'detached' });
+  assert.match(await page.locator('#property-href').inputValue(), /^\/[a-z0-9\-/]*$/);
+  checks.push({ name: 'a page as a link target, picked by search', passed: true });
+  await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
   await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
   await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
   await page.waitForFunction(count => document.querySelectorAll('#structure [data-block-id]').length === count, beforeButtons);
+  // Verknüpfte Dinge kommen aus Listen: Formular, Kategorie und Schlagwort sind Auswahlfelder.
+  for (const [type, id] of [['form', 'property-form'], ['postlist', 'property-category'], ['postlist', 'property-tag']]) {
+    await addFromLibrary(`button[data-add="${type}"]`);
+    assert.equal(await page.locator(`#${id}`).evaluate(node => node.tagName), 'SELECT', `${id} is a choice, not a typed address`);
+    await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
+    await page.waitForFunction(count => document.querySelectorAll('#structure [data-block-id]').length === count, beforeButtons);
+  }
+  checks.push({ name: 'forms, categories and tags are picked from lists', passed: true });
   checks.push({ name: 'canvas toolbar, insert points and drag from the toolbox', passed: true });
   await page.screenshot({ path: 'reports/editor/canvas-overlay.png' });
   // --- Der Werkzeugkasten kennt den Zusammenhang ---------------------------------------------
@@ -1108,6 +1127,118 @@ try {
   await axe('mobile media library');
   await page.screenshot({ path: 'reports/editor/media-phone.png', fullPage: true });
   await page.getByRole('button', { name: 'Schließen', exact: true }).click();
+  // Das Vorschaubild einer Seite: aus der Mediathek gewählt, nicht als Kennung abgetippt.
+  await page.setViewportSize({ width: 1600, height: 1100 });
+  await page.goto(origin + '/admin');
+  const sheet = page.locator('details.sheet').first();
+  await sheet.locator('summary').click();
+  const ogField = sheet.locator('[data-media-field]').filter({ has: page.locator('input[name="ogMediaId"]') });
+  await ogField.getByRole('button', { name: 'Bild wählen oder hochladen', exact: true }).click();
+  await page.locator('#media-dialog [data-media-id]').first().click();
+  await page.locator('#media-insert').click();
+  await page.locator('#media-dialog').waitFor({ state: 'detached' });
+  const chosenOg = await ogField.locator('input[name="ogMediaId"]').inputValue();
+  assert.match(chosenOg, /^[a-f0-9]{32}$/);
+  assert.equal(await ogField.locator('.media-field-thumb').isVisible(), true, 'the chosen image is shown');
+  await axe('content settings with an image field');
+  await ogField.locator('xpath=ancestor::form').getByRole('button', { name: 'Speichern', exact: true }).click();
+  await page.waitForLoadState('load');
+  const savedOg = page.locator('input[name="ogMediaId"]').first();
+  assert.equal(await savedOg.inputValue(), chosenOg, 'the image survives saving');
+  checks.push({ name: 'image fields in the content settings pick from the library', passed: true });
+  // Formular-Editor: Bedingung, Antwortadresse und Bild je Option werden gewählt, nicht getippt.
+  await page.goto(origin + '/admin/forms');
+  const neu = page.locator('#neues-formular');
+  if (!(await neu.evaluate(details => details.open))) await neu.locator('summary').click();
+  await neu.locator('[name="name"]').fill('Anfrage Prüfung');
+  await neu.locator('[name="slug"]').fill('anfrage-pruefung');
+  await neu.locator('[name="recipient"]').fill('info@example.com');
+  const karte = index => neu.locator('[data-field-list] [data-field]').nth(index);
+  await karte(0).locator('[data-field-label]').fill('E-Mail');
+  await karte(0).locator('[data-field-type]').selectOption('email');
+  await neu.locator('[data-add-field]').click();
+  await karte(1).locator('[data-field-label]').fill('Art');
+  await karte(1).locator('[data-field-type]').selectOption('radio');
+  await karte(1).locator('[data-field-options-input]').fill('Wohnung, Haus');
+  await neu.locator('[data-add-field]').click();
+  await karte(2).locator('[data-field-label]').fill('Etage');
+  await karte(2).getByLabel('Nur zeigen, wenn', { exact: true }).selectOption({ label: 'Art' });
+  await karte(2).getByLabel('Wohnung', { exact: true }).check();
+  assert.equal(await karte(2).locator('[data-field-showif]').inputValue(), 'art');
+  assert.equal(await karte(2).locator('[data-field-showvalues]').inputValue(), 'Wohnung');
+  await neu.getByLabel('Antwortadresse aus Feld', { exact: true }).selectOption({ label: 'E-Mail' });
+  assert.equal(await neu.locator('input[name="replyToField"]').inputValue(), 'e_mail');
+  await karte(1).getByRole('button', { name: 'Bild für „Wohnung“ wählen', exact: true }).click();
+  await page.locator('#media-dialog [data-media-id]').first().click();
+  await page.locator('#media-insert').click();
+  await page.locator('#media-dialog').waitFor({ state: 'detached' });
+  assert.match(await karte(1).locator('[data-field-images-input]').inputValue(), /^Wohnung = [a-f0-9]{32}$/);
+  assert.equal(await karte(1).locator('.field-image-picker-thumb').first().isVisible(), true);
+  await axe('form editor with pickers');
+  await neu.getByRole('button', { name: 'Formular anlegen', exact: true }).click();
+  await page.waitForLoadState('load');
+  const gespeichert = page.locator('form[action$="/forms/anfrage-pruefung"]');
+  await gespeichert.waitFor({ state: 'attached' });
+  assert.equal(await gespeichert.locator('input[name="replyToField"]').inputValue(), 'e_mail');
+  assert.equal(await gespeichert.locator('[data-field-showif]').nth(2).inputValue(), 'art');
+  checks.push({ name: 'form editor: condition, reply address and option images are picked', passed: true });
+  // Menü: der eigene Link bekommt eine Seite per Suche, ein Seitenlink sein Sprungziel per Auswahl.
+  await page.goto(origin + '/admin/menus');
+  await page.locator('.menu-add details summary').click();
+  await page.locator('#link-url').locator('xpath=..').getByRole('button', { name: 'Seite wählen', exact: true }).click();
+  await page.locator('dialog.page-dialog [role="option"]').first().click();
+  await page.locator('dialog.page-dialog').waitFor({ state: 'detached' });
+  assert.match(await page.locator('#link-url').inputValue(), /^\/[a-z0-9\-/]*$/);
+  await page.locator('#link-label').fill('Eigener Prüflink');
+  await page.locator('#menu-add-url').click();
+  await page.locator('#menu-search').focus();
+  await page.locator('#menu-search-results [role="option"]').first().click();
+  await page.locator('#menu-add-page').click();
+  const neuerEintrag = page.locator('#menu-items .menu-entry').last();
+  const sprungziel = neuerEintrag.getByLabel('Sprungziel', { exact: true });
+  assert.equal(await sprungziel.evaluate(node => node.tagName), 'SELECT', 'the anchor is a choice');
+  assert.equal(await sprungziel.locator('option').first().textContent(), 'Seitenanfang');
+  // Die ganze Seite: seit der Ziehknopf neben der Zusammenfassung steht, gibt es keinen Knopf
+  // mehr in einem Knopf.
+  await neuerEintrag.locator('summary').click();
+  await axe('menu editor');
+  await page.screenshot({ path: 'reports/editor/menu-editor.png' });
+  assert.equal(await neuerEintrag.locator('summary [data-menu-drag]').count(), 0, 'no button inside the summary');
+  // Ziehknopf per Tastatur: Pfeil nach oben verschiebt den Eintrag.
+  const eintraege = page.locator('#menu-items .menu-entry');
+  const anzahl = await eintraege.count();
+  assert.ok(anzahl >= 2);
+  const titel = await neuerEintrag.locator('.menu-entry-title').textContent();
+  await eintraege.nth(anzahl - 1).locator('[data-menu-drag]').focus();
+  await page.keyboard.press('ArrowUp');
+  assert.equal(await eintraege.nth(anzahl - 2).locator('.menu-entry-title').textContent(), titel, 'the entry moved up');
+  assert.equal(await eintraege.nth(anzahl - 2).locator('[data-menu-drag]').evaluate(node => node === document.activeElement), true, 'the handle keeps focus');
+  checks.push({ name: 'menu: page search for own links, anchors as a choice', passed: true });
+  // Beitrag: vorhandene Kategorien stehen zum Anklicken am Feld.
+  await page.goto(origin + '/admin/posts');
+  await page.locator('summary').filter({ hasText: 'Neuen Beitrag anlegen' }).click();
+  await page.locator('#new-title').fill('Prüfbeitrag');
+  await page.locator('form.create-form button[type="submit"]').click();
+  await page.waitForLoadState('load');
+  await page.goto(origin + '/admin/posts');
+  let beitrag = page.locator('details.sheet').first();
+  await beitrag.locator('summary').click();
+  await beitrag.locator('input[name="categories"]').fill('Projekte');
+  await beitrag.locator('input[name="categories"]').locator('xpath=ancestor::form').getByRole('button', { name: 'Speichern', exact: true }).click();
+  await page.waitForLoadState('load');
+  await page.goto(origin + '/admin/posts');
+  beitrag = page.locator('details.sheet').first();
+  await beitrag.locator('summary').click();
+  const kategorie = beitrag.locator('input[name="categories"]');
+  await kategorie.fill('');
+  const vorschlag = beitrag.locator('.term-chip', { hasText: 'Projekte' }).first();
+  await vorschlag.click();
+  assert.equal(await kategorie.inputValue(), 'Projekte');
+  assert.equal(await vorschlag.getAttribute('aria-pressed'), 'true');
+  await vorschlag.click();
+  assert.equal(await kategorie.inputValue(), '');
+  await axe('post settings with term suggestions');
+  checks.push({ name: 'post settings suggest existing categories', passed: true });
   assert.deepEqual(errors, []);
   await writeFile('reports/editor/result.json', JSON.stringify({ checks, publicDataUntouched: true }, null, 2));
   console.log('Editor end-to-end checks passed; isolated database, production data unchanged.');

scripts/navigation-ux-check.mjs

@@ -34,7 +34,10 @@ try {
   data.document.blocks.push({ id: 'qa-anchor', type: 'section', children: [{ id: 'qa-anchor-title', type: 'heading', props: { text: 'Kontaktbereich', level: 2 } }] });
   assert.equal((await context.request.post(api + '/draft', { headers: { 'X-CSRF-Token': data.csrfToken }, data: { document: data.document, expectedVersion: data.version } })).status(), 200);
   await page.goto(`${origin}/admin/pages/${fixture.homeId}`);
+  // Im Reiter „Struktur“ wählen und mit „Bearbeiten“ öffnen, wie im Editor selbst.
+  await page.getByRole('tab', { name: 'Struktur', exact: true }).click();
   await page.locator('#structure [data-block-id="qa-anchor"]').click();
+  await page.locator('#structure [data-edit-block="qa-anchor"]').click();
   await page.locator('#property-anchor').fill('#kontakt-check'); await page.locator('#property-anchor').blur();
   await page.locator('#save').click(); await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
   await page.locator('#publish').click(); await page.locator('#confirm-publish').click(); await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();

scripts/reset-huefner.sh

@@ -0,0 +1,26 @@
+#!/bin/sh
+# Wirft die Hüfner-Installation weg und baut sie neu auf. Nur fuer den Aufbau gedacht.
+# Erstes Argument: der entpackte Entwurf (Ordner mit index.html und images/).
+set -e
+root="C:/Django Project/KantSites"
+php="${PHP_BINARY:-C:/php84/php.exe}"
+export DATABASE_URL="sqlite:///$root/var/huefner.db"
+export MEDIA_DIRECTORY="$root/var/huefner-media"
+assets="$root/var/huefner-assets"
+if [ -n "$1" ]; then
+  "$php" scripts/build-huefner-assets.php "$1" "$assets"
+fi
+if [ ! -f "$assets/favicon.png" ]; then
+  echo "Bilder fehlen: erst mit dem Ordner des Entwurfs als Argument aufrufen." >&2
+  exit 1
+fi
+rm -f "$root/var/huefner.db"
+rm -rf "$root/var/huefner-media"
+"$php" vendor/bin/doctrine-migrations migrate --no-interaction -q
+"$php" -d memory_limit=512M scripts/seed-huefner.php "$assets"
+# Barlow und Barlow Condensed vom eigenen Server; der Abruf ergaenzt fonts.css nur.
+if [ -f "$root/var/cacert.pem" ]; then
+  "$php" -d curl.cainfo="$root/var/cacert.pem" -d openssl.cafile="$root/var/cacert.pem" bin/console cms:fonts:fetch
+else
+  "$php" bin/console cms:fonts:fetch
+fi

scripts/reset-kantarci-markt.sh

@@ -0,0 +1,22 @@
+#!/bin/sh
+# Wirft die Kantarci-Markt-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/kantarci-markt.db"
+export MEDIA_DIRECTORY="$root/var/kantarci-markt-media"
+rm -f "$root/var/kantarci-markt.db"
+rm -rf "$root/var/kantarci-markt-media"
+"$php" vendor/bin/doctrine-migrations migrate --no-interaction -q
+assets="${1:-$root/var/kantarci-markt-assets}"
+# Logo zuschneiden, Seitensymbol und Stempel rastern (Chromium ueber Playwright).
+node scripts/build-kantarci-markt-assets.mjs "$assets"
+"$php" -d memory_limit=512M scripts/seed-kantarci-markt.php "$assets"
+# DM Sans vom eigenen Server. Der Abruf ersetzt in fonts.css nur die Regeln fuer DM Sans; die
+# Schriften der anderen Installationen bleiben stehen. Das PHP 8.4 hier kennt keine
+# Stammzertifikate; mit var/cacert.pem (https://curl.se/ca/cacert.pem) klappt der Abruf.
+if [ -f "$root/var/cacert.pem" ]; then
+  "$php" -d curl.cainfo="$root/var/cacert.pem" -d openssl.cafile="$root/var/cacert.pem" bin/console cms:fonts:fetch
+else
+  "$php" bin/console cms:fonts:fetch
+fi

scripts/seed-kantarci-markt.php

@@ -0,0 +1,919 @@
+<?php
+
+/**
+ * Baut die Vorab-Seite „Kantarci Markt – Neueröffnung“ als Inhalt dieses CMS auf.
+ *
+ * Vorlage ist das gelieferte Paket „Kantarci-Markt-Landingpage.zip“ (23.09.2026): eine statische
+ * Seite (index.html, styles.css) mit Logo-Kopf, Hero „Frische bekommt eine neue Adresse.“ mit zwei
+ * Fotos und Stempel, dem Versprechen (Frisch, Qualität, Vielfältig) auf Waldgrün, dem Abschluss
+ * „Frische. Qualität. Faire Preise.“ und einem schmalen Fuß. Wortlaut und Farben (Waldgrün
+ * #123b26, Gold #ad893b, Creme #fcf9f2) sind daraus übernommen. Gebaut ist alles aus gewöhnlichen
+ * Bausteinen – kein eigener Baustein, kein Plugin.
+ *
+ * Bewusste Abweichungen:
+ *  - DM Sans kommt vom eigenen Server (cms:fonts:fetch), nicht von Google. Manrope der Vorlage
+ *    (nur Kleinzeilen, Nummern und die Bildzeile) entfällt, dort steht DM Sans: eine Schrift
+ *    weniger zu laden. Überschriften in Georgia wie in der letzten Fassung der Vorlage.
+ *  - Der runde Stempel ist ein PNG (scripts/build-kantarci-markt-assets.mjs): Text auf einem
+ *    Kreisbogen kann kein Baustein, und die Mediathek nimmt kein SVG.
+ *  - Das große „K“ im Abschluss und der Goldstrich sind Pseudo-Elemente im eigenen CSS der
+ *    Sektion, damit Vorlesesoftware und KI-Leser kein einzelnes „K“ als Inhalt bekommen.
+ *  - Neu sind Impressum und Datenschutz, beide Pflicht für einen geschäftlichen Auftritt (§ 5 DDG,
+ *    Art. 13 DSGVO). Betreiber, Anschrift mit Hausnummer und Kontakt fehlen in der Vorlage; sie
+ *    stehen als „NOCH ZU PRÜFEN“ im Text.
+ *
+ * Das Skript schreibt ausschließlich in die Datenbank aus DATABASE_URL und in MEDIA_DIRECTORY,
+ * beide müssen auf eine frische, migrierte Installation zeigen (siehe reset-kantarci-markt.sh).
+ * Erstes Argument: der Ordner mit logo.png, symbol.png, stempel.png, market.jpg, vegetables.jpg.
+ */
+
+require dirname(__DIR__).'/config/bootstrap.php';
+
+use App\Content\DocumentValidator;
+use App\Content\MediaLibrary;
+use App\Content\PageRepository;
+use App\Content\PartialRepository;
+use App\Content\SiteSettings;
+use App\Content\Theme;
+use App\Infrastructure\ConnectionFactory;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+$root = dirname(__DIR__);
+$assets = $argv[1] ?? null;
+if (null === $assets || !is_dir($assets)) {
+    fwrite(STDERR, "Bitte den Ordner mit den Bildern als Argument angeben.\n");
+    exit(1);
+}
+$url = str_replace('%kernel.project_dir%', str_replace('\\', '/', $root), (string) $_SERVER['DATABASE_URL']);
+$mediaDirectory = str_replace('%kernel.project_dir%', $root, (string) $_SERVER['MEDIA_DIRECTORY']);
+if (!str_contains($url, 'kantarci-markt')) {
+    fwrite(STDERR, "Sicherung: DATABASE_URL muss auf die Kantarci-Markt-Datenbank zeigen.\n");
+    exit(1);
+}
+
+$db = ConnectionFactory::create($url);
+if (false !== $db->fetchOne('SELECT id FROM page LIMIT 1')) {
+    fwrite(STDERR, "Diese Datenbank enthält bereits Seiten. Abbruch, damit nichts überschrieben wird.\n");
+    exit(1);
+}
+
+$media = new MediaLibrary($db, $mediaDirectory);
+$settings = new SiteSettings($db, $media);
+$pages = new PageRepository($db, new DocumentValidator(), $settings);
+$partials = new PartialRepository($db, new DocumentValidator());
+$theme = new Theme($db);
+
+$name = 'Kantarci Markt';
+// Die Domain kantarci-markt.de hat Mailserver (23.09.2026). Ob es das Postfach info@ gibt, ist
+// nicht bestätigt – deshalb steht es nur im Impressum und dort als „NOCH ZU PRÜFEN“.
+$mail = 'info@kantarci-markt.de';
+$strasse = 'Wilhelm-Drapp-Straße';
+$plz = '76532';
+$ort = 'Baden-Baden';
+$SCHEMA = 24;
+
+// ---------------------------------------------------------------------------------------------
+// Bausteine
+// ---------------------------------------------------------------------------------------------
+
+$seiten = static fn (string $w): array => ['top' => $w, 'right' => $w, 'bottom' => $w, 'left' => $w];
+$nurOben = static fn (string $w): array => ['top' => $w, 'right' => '0px', 'bottom' => '0px', 'left' => '0px'];
+$nurLinks = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => '0px', 'left' => $w];
+$nurUnten = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => $w, 'left' => '0px'];
+$rund = static fn (string $w): array => ['topLeft' => $w, 'topRight' => $w, 'bottomRight' => $w, 'bottomLeft' => $w];
+
+$section = static function (string $id, array $children, array $style = [], ?string $anchor = null, string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'section', 'children' => $children, 'style' => $style];
+    if (null !== $anchor) {
+        $block['anchor'] = $anchor;
+    }
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+$row = static function (string $id, array $children, array $design = [], array $style = []): array {
+    $block = ['id' => $id, 'type' => 'row', 'children' => $children];
+    if ([] !== $design) {
+        $block['layout'] = ['design' => $design];
+    }
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+
+    return $block;
+};
+
+/** Eine Zeile, die nebeneinander stellt statt zu rastern. */
+$zeile = static function (string $id, array $children, string $gap, array $extra = [], array $mobil = [], array $tablet = []) use ($row): array {
+    $style = ['desktop' => ['display' => 'flex', 'alignItems' => 'center', 'gap' => $gap, 'margin' => ['top' => '0px'], ...$extra]];
+    if ([] !== $tablet) {
+        $style['tablet'] = $tablet;
+    }
+    if ([] !== $mobil) {
+        $style['mobile'] = $mobil;
+    }
+
+    return $row($id, $children, [], $style);
+};
+
+$column = static function (string $id, array $children, array $style = [], string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'column', 'children' => $children];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+$heading = static function (string $id, string $text, int $level, array $style = [], string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'heading', 'props' => ['text' => $text, 'level' => $level]];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+$text = static function (string $id, string $inhalt, array $style = [], string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'text', 'props' => ['text' => $inhalt]];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+/** Eine reine Fläche: der kurze Goldstrich vor der Kleinzeile. */
+$flaeche = static function (string $id, array $style, string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'spacer', 'props' => ['size' => 'small'], 'style' => $style];
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+/** Ein Button ohne den Pfeil des Bausteins. */
+$button = static function (string $id, string $text, string $href, array $style = []): array {
+    return ['id' => $id, 'type' => 'button', 'props' => ['text' => $text, 'href' => $href], 'style' => $style, 'css' => '& span{display:none}'];
+};
+
+$bild = static function (string $id, array $eintrag, string $alt, array $style = [], ?string $href = null, string $css = '', string $bildzeile = ''): array {
+    $gross = end($eintrag['variants']);
+    $props = [
+        'src' => $gross['src'], 'alt' => $alt, 'decorative' => '' === $alt, 'width' => $gross['width'], 'height' => $gross['height'],
+        'mediaId' => $eintrag['id'],
+        'sources' => array_map(static fn (array $v): array => ['src' => $v['src'], 'width' => $v['width']], $eintrag['variants']),
+    ];
+    if (null !== $href) {
+        $props['href'] = $href;
+        $props['click'] = 'link';
+    }
+    if ('' !== $bildzeile) {
+        $props['caption'] = $bildzeile;
+    }
+
+    $block = ['id' => $id, 'type' => 'image', 'props' => $props, 'style' => $style];
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+$symbol = static function (string $id, string $name, int $groesse, array $style = []): array {
+    return ['id' => $id, 'type' => 'icon', 'props' => ['icon' => $name, 'size' => $groesse, 'decorative' => true, 'label' => ''], 'style' => $style];
+};
+
+/**
+ * Setzt die Einblendungen nach einer Liste, statt sie über das ganze Dokument zu streuen.
+ *
+ * @param array<string, array{0: string, 1?: string}> $plan Block-ID => [Art, Verzögerung]
+ */
+$einblenden = static function (array $dokument, array $plan): array {
+    $gehen = function (array $bloecke) use (&$gehen, $plan): array {
+        foreach ($bloecke as $i => $block) {
+            if (isset($plan[$block['id'] ?? ''])) {
+                [$art, $verzug] = [...$plan[$block['id']], 'none'];
+                $bloecke[$i]['layout'] = [...($block['layout'] ?? []), 'effects' => ['entrance' => $art, 'delay' => $verzug]];
+            }
+            if (isset($block['children'])) {
+                $bloecke[$i]['children'] = $gehen($block['children']);
+            }
+        }
+
+        return $bloecke;
+    };
+    $dokument['blocks'] = $gehen($dokument['blocks']);
+
+    return $dokument;
+};
+
+// Wiederkehrende Gestaltungswerte der Vorlage.
+$kleinStil = ['fontSize' => '14px', 'fontWeight' => '700', 'letterSpacing' => '0.2em', 'lineHeight' => 1.2, 'textTransform' => 'uppercase'];
+$linkCss = "& a{color:#123b26;text-decoration:underline;text-underline-offset:3px}\n& a:hover{color:#806222}";
+
+/** Die Kleinzeile in Versalien mit dem kurzen Goldstrich davor („— NEUERÖFFNUNG“). */
+$kleinzeile = static function (string $id, string $inhalt, string $farbe, string $strichFarbe = '@gold') use ($text, $zeile, $flaeche, $kleinStil): array {
+    return $zeile($id, [
+        $flaeche($id.'-strich', ['desktop' => ['width' => '38px', 'height' => '2px', 'backgroundColor' => $strichFarbe, 'flexShrink' => 0]], 'min-height:0'),
+        $text($id.'-text', $inhalt, ['desktop' => [...$kleinStil, 'color' => $farbe, 'margin' => ['bottom' => '0px']]]),
+    ], '12px', ['margin' => ['top' => '0px', 'bottom' => '24px']]);
+};
+
+// ---------------------------------------------------------------------------------------------
+// Website, Gestaltung, Medien
+// ---------------------------------------------------------------------------------------------
+
+$db->insert('website', ['id' => 'default', 'name' => $name, 'default_locale' => 'de', 'theme' => '{}']);
+
+$theme->save(
+    [
+        ['key' => 'forst', 'name' => 'Waldgrün', 'value' => '#123b26'],
+        ['key' => 'tief', 'name' => 'Tiefgrün (Fuß)', 'value' => '#0b281a'],
+        ['key' => 'gold', 'name' => 'Gold (Linien)', 'value' => '#ad893b'],
+        ['key' => 'gold-hell', 'name' => 'Gold hell (Flächen, auf Grün)', 'value' => '#d2b978'],
+        ['key' => 'gold-text', 'name' => 'Gold als Schrift auf Creme', 'value' => '#806222'],
+        ['key' => 'gold-titel', 'name' => 'Gold in großen Überschriften', 'value' => '#8c6b27'],
+        ['key' => 'creme', 'name' => 'Creme', 'value' => '#fcf9f2'],
+        ['key' => 'sand', 'name' => 'Sand (Abschluss)', 'value' => '#f4efe3'],
+        ['key' => 'text', 'name' => 'Fließtext', 'value' => '#58685e'],
+        ['key' => 'text-gruen', 'name' => 'Fließtext auf Grün', 'value' => '#b7c8c1'],
+        ['key' => 'klein-gruen', 'name' => 'Kleinzeile auf Grün', 'value' => '#a9bdb4'],
+        ['key' => 'fuss-text', 'name' => 'Schrift im Fuß', 'value' => '#a9bab2'],
+        ['key' => 'papier', 'name' => 'Weiß', 'value' => '#ffffff'],
+    ],
+    [
+        ['key' => 'body', 'name' => 'Fließtext', 'family' => 'DM Sans', 'source' => 'google', 'weights' => [400, 500, 700], 'fallback' => 'sans-serif'],
+        ['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Georgia', 'source' => 'system', 'weights' => [400], 'fallback' => 'serif'],
+    ],
+    ['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '16px', 'lineHeight' => 1.6, 'color' => '@forst', 'backgroundColor' => '@creme', 'linkColor' => '@forst', 'containerWidth' => '1280px', 'headingScale' => 1.25, 'linkUnderline' => false, 'imageRadius' => '0px'],
+    ['shape' => 'square', 'appearance' => 'solid', 'size' => 'normal', 'fontFamily' => 'inherit', 'fontSize' => 15, 'fontWeight' => 700, 'letterSpacing' => 0, 'textTransform' => 'none', 'backgroundColor' => '@forst', 'color' => '@papier', 'hoverBackgroundColor' => '#1d5236', 'hoverColor' => '@papier'],
+);
+echo "Farben, Schriften und Buttons gesetzt\n";
+
+$medien = [];
+foreach ([
+    'logo' => ['logo.png', 'Kantarci Markt – grünes K mit goldener Waage'],
+    'symbol' => ['symbol.png', 'Bildmarke von Kantarci Markt'],
+    'stempel' => ['stempel.png', ''],
+    'markt' => ['market.jpg', 'Frisches Blattgemüse an einem Marktstand – Beispielbild'],
+    'tomaten' => ['vegetables.jpg', 'Frische Strauchtomaten – Beispielbild'],
+] as $schluessel => [$datei, $alt]) {
+    $pfad = rtrim($assets, '/\\').'/'.$datei;
+    if (!is_file($pfad)) {
+        fwrite(STDERR, "Bild fehlt: $pfad\n");
+        exit(1);
+    }
+    $eintrag = $media->upload(new UploadedFile($pfad, basename($datei), null, null, true));
+    $media->update($eintrag['id'], ['title' => pathinfo($datei, PATHINFO_FILENAME), 'alt' => $alt, 'archived' => false, 'version' => $eintrag['version']]);
+    $medien[$schluessel] = $media->find($eintrag['id']);
+    echo "Bild übernommen: $datei\n";
+}
+
+// ---------------------------------------------------------------------------------------------
+// Kopf- und Fußbereich
+// ---------------------------------------------------------------------------------------------
+
+$kopf = [
+    'schemaVersion' => $SCHEMA, 'title' => 'Kopfbereich', 'description' => 'Erscheint auf jeder Seite über dem Inhalt.',
+    'blocks' => [
+        $section('kopf', [
+            $zeile('kopf-zeile', [
+                $bild('kopf-logo', $medien['logo'], 'Kantarci Markt – zur Startseite', [
+                    // Volle Breite bis 300 px: sonst hängt die Breite in der zentrierten Zeile am
+                    // geladenen Bild, und der Kopf springt beim Laden (CLS).
+                    'desktop' => ['width' => '100%', 'maxWidth' => '300px', 'margin' => $seiten('0px')],
+                    'mobile' => ['maxWidth' => '230px'],
+                ], '/', '& img{display:block;width:100%;height:auto}'),
+            ], '0px', ['justifyContent' => 'center']),
+        ], [
+            'desktop' => ['backgroundColor' => '@creme', 'padding' => ['top' => '18px', 'bottom' => '18px'], 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@gold'],
+            'mobile' => ['padding' => ['top' => '14px', 'bottom' => '14px']],
+        ]),
+    ],
+];
+
+$fussLink = "& a{color:#a9bab2}\n& a:hover{color:#fff;text-decoration:underline}";
+$fuss = [
+    'schemaVersion' => $SCHEMA, 'title' => 'Fußbereich', 'description' => 'Erscheint auf jeder Seite unter dem Inhalt.',
+    'blocks' => [
+        $section('fuss', [
+            $zeile('fuss-zeile', [
+                $text('fuss-copyright', '© 2026 '.$name, ['desktop' => ['fontSize' => '14px', 'letterSpacing' => '0.08em', 'margin' => ['bottom' => '0px']]]),
+                $text('fuss-adresse', $strasse.' · '.$ort, ['desktop' => ['fontSize' => '14px', 'letterSpacing' => '0.08em', 'margin' => ['bottom' => '0px']]]),
+                $zeile('fuss-links', [
+                    // Impressum und Datenschutz kommen aus den Einstellungen, nicht aus einem Menü.
+                    ['id' => 'fuss-rechtliches', 'type' => 'legal', 'props' => ['label' => 'Rechtliches'],
+                        'style' => ['desktop' => ['fontSize' => '14px', 'gap' => '4px', 'color' => '@fuss-text']],
+                        'css' => $fussLink],
+                    $text('fuss-agentur', '<a href="https://kant-it.de">Website by Kant-IT Solutions</a>', ['desktop' => ['fontSize' => '14px', 'margin' => ['bottom' => '0px']]], $fussLink),
+                ], '22px', ['flexWrap' => 'wrap'], ['rowGap' => '10px', 'columnGap' => '18px']),
+            ], '20px', ['justifyContent' => 'space-between', 'flexWrap' => 'wrap'],
+                ['flexDirection' => 'column', 'alignItems' => 'flex-start', 'gap' => '12px']),
+        ], [
+            'desktop' => ['backgroundColor' => '@tief', 'color' => '@fuss-text', 'padding' => ['top' => '28px', 'bottom' => '28px']],
+        ]),
+    ],
+];
+
+$partials->create('header', 'default', 'Kopfbereich', $kopf);
+$partials->create('footer', 'default', 'Fußbereich', $fuss);
+echo "Kopf- und Fußbereich angelegt\n";
+
+// ---------------------------------------------------------------------------------------------
+// Startseite
+// ---------------------------------------------------------------------------------------------
+
+/** Ein Versprechen: Nummer, Titel, Satz – auf dem Telefon rückt der Satz unter den Titel. */
+$versprechen = static fn (string $n, string $titel, string $satz): array => $zeile('versprechen-'.$n, [
+    $text('versprechen-'.$n.'-nummer', $n, ['desktop' => ['fontSize' => '13px', 'fontWeight' => '700', 'color' => '@gold-hell', 'flexBasis' => '50px', 'flexShrink' => 0, 'margin' => ['bottom' => '0px']], 'mobile' => ['flexBasis' => '34px']]),
+    $zeile('versprechen-'.$n.'-inhalt', [
+        $heading('versprechen-'.$n.'-titel', $titel, 3, [
+            'desktop' => ['fontSize' => '34px', 'fontWeight' => '400', 'lineHeight' => 1.2, 'color' => '@papier', 'flexGrow' => 3, 'flexBasis' => '0', 'margin' => ['bottom' => '0px']],
+            'tablet' => ['fontSize' => '28px'],
+            'mobile' => ['fontSize' => '28px'],
+        ]),
+        $text('versprechen-'.$n.'-satz', $satz, ['desktop' => ['fontSize' => '16px', 'lineHeight' => 1.6, 'color' => '@text-gruen', 'maxWidth' => '390px', 'flexGrow' => 5, 'flexBasis' => '0', 'margin' => ['bottom' => '0px']]]),
+    ], '20px', ['alignItems' => 'baseline', 'flexGrow' => 1, 'flexBasis' => '0', 'minWidth' => '0'],
+        ['flexDirection' => 'column', 'alignItems' => 'flex-start', 'gap' => '8px']),
+], '20px', ['alignItems' => 'baseline', 'padding' => ['top' => '31px', 'bottom' => '31px'], 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#cfb57359']);
+
+$startseite = [
+    'schemaVersion' => $SCHEMA,
+    'title' => 'Neueröffnung',
+    'description' => 'Kantarci Markt eröffnet bald: Frische, Qualität und faire Preise in der Wilhelm-Drapp-Straße in Baden-Baden.',
+    'blocks' => [
+        // 1 – Hero: Text links, rechts das Marktfoto mit Bildzeile, die gedrehte Tomatenkarte und
+        // der Stempel.
+        $section('hero', [
+            $row('hero-zeile', [
+                $column('hero-text', [
+                    $kleinzeile('hero-label', 'Neueröffnung', '@gold-text'),
+                    $heading('hero-titel', 'Frische bekommt<br><em>eine neue Adresse.</em>', 1, [
+                        'desktop' => ['fontSize' => '80px', 'fontWeight' => '400', 'lineHeight' => 1.04, 'letterSpacing' => '-0.045em', 'color' => '@forst', 'margin' => ['bottom' => '0px']],
+                        'tablet' => ['fontSize' => '64px'],
+                        'mobile' => ['fontSize' => '44px', 'lineHeight' => 1.07],
+                    ], '& em{font-style:italic;color:#8c6b27}'),
+                    $text('hero-intro', 'Freuen Sie sich auf sorgfältig ausgewählte Produkte, echte Vielfalt und einen Markt, der Nachbarschaft neu denkt.', [
+                        'desktop' => ['maxWidth' => '600px', 'fontSize' => '20px', 'lineHeight' => 1.65, 'color' => '@text', 'margin' => ['top' => '32px', 'bottom' => '38px']],
+                        'mobile' => ['fontSize' => '17px', 'margin' => ['top' => '24px', 'bottom' => '30px']],
+                    ]),
+                    // Eine Spalte statt einer Zeile: Zeilen sind im Kern immer durchsichtig.
+                    $column('hero-termin', [
+                        $column('hero-termin-symbol', [
+                            $symbol('hero-termin-icon', 'shop', 24, ['desktop' => ['color' => '@forst']]),
+                        ], ['desktop' => ['display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center', 'width' => '50px', 'height' => '50px', 'flexShrink' => 0, 'backgroundColor' => '@gold-hell', 'borderRadius' => $rund('50%')]]),
+                        $column('hero-termin-text', [
+                            $text('hero-termin-klein', 'Wir öffnen bald', ['desktop' => ['fontSize' => '14px', 'letterSpacing' => '0.08em', 'textTransform' => 'uppercase', 'lineHeight' => 1.3, 'color' => '#bfd1c9', 'margin' => ['bottom' => '3px']]]),
+                            $text('hero-termin-satz', 'Eröffnungstermin folgt', ['desktop' => ['fontSize' => '16px', 'fontWeight' => '700', 'lineHeight' => 1.2, 'color' => '@papier', 'margin' => ['bottom' => '0px']]]),
+                        ]),
+                    ], [
+                        'desktop' => ['display' => 'flex', 'alignItems' => 'center', 'gap' => '17px', 'backgroundColor' => '@forst', 'borderWidth' => $seiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@gold',
+                        'borderRadius' => $rund('3px'), 'padding' => ['top' => '15px', 'right' => '24px', 'bottom' => '15px', 'left' => '15px'],
+                            'shadowY' => '18px', 'shadowBlur' => '50px', 'shadowColor' => '#062f2429'],
+                        'mobile' => ['gap' => '12px', 'padding' => ['top' => '14px', 'right' => '16px', 'bottom' => '14px', 'left' => '14px']],
+                    ]),
+                    $text('hero-adresse', 'Hier finden Sie uns bald<br><strong>'.$strasse.'</strong><br>'.$ort, [
+                        'desktop' => ['fontSize' => '16px', 'lineHeight' => 1.55, 'color' => '@text', 'borderWidth' => $nurLinks('3px'), 'borderStyle' => 'solid', 'borderColor' => '@gold', 'padding' => ['left' => '18px'], 'margin' => ['top' => '28px', 'bottom' => '0px']],
+                    ], "& strong{color:#123b26;font-weight:700}"),
+                ], [
+                    'desktop' => ['display' => 'flex', 'flexDirection' => 'column', 'alignItems' => 'flex-start', 'justifyContent' => 'center'],
+                ]),
+                $column('hero-visual', [
+                    $bild('hero-markt', $medien['markt'], 'Frisches Blattgemüse an einem Marktstand – Beispielbild', [
+                        'desktop' => ['position' => 'absolute', 'top' => '0px', 'right' => '4%', 'bottom' => '8%', 'left' => '5%', 'margin' => $seiten('0px'), 'overflow' => 'hidden', 'backgroundColor' => '@forst',
+                            'outlineWidth' => '1px', 'outlineStyle' => 'solid', 'outlineColor' => '@gold', 'outlineOffset' => '8px',
+                            'shadowY' => '24px', 'shadowBlur' => '60px', 'shadowColor' => '#021d162e'],
+                        'mobile' => ['right' => '0px', 'bottom' => '10%', 'left' => '0px'],
+                    ], null,
+                        "& img{display:block;width:100%;height:100%;object-fit:cover}\n"
+                        ."&::after{content:'';position:absolute;top:25%;right:0;bottom:0;left:0;background:linear-gradient(transparent,rgba(2,29,22,.85) 65%)}\n"
+                        ."& figcaption{position:absolute;z-index:1;bottom:150px;left:28px;right:28px;max-width:260px;margin:0;color:#fff;font-size:26px;font-weight:700;line-height:1.2;text-shadow:0 2px 14px rgba(2,29,22,.7)}",
+                        'Vorfreude auf frische Vielfalt.'),
+                    $bild('hero-tomaten', $medien['tomaten'], 'Frische Strauchtomaten – Beispielbild', [
+                        'desktop' => ['position' => 'absolute', 'width' => '49%', 'height' => '33%', 'right' => '-3%', 'bottom' => '-1%', 'margin' => $seiten('0px'), 'overflow' => 'hidden', 'rotate' => 4,
+                            'borderWidth' => $seiten('8px'), 'borderStyle' => 'solid', 'borderColor' => '@creme', 'shadowY' => '24px', 'shadowBlur' => '60px', 'shadowColor' => '#021d162e', 'zIndex' => 2],
+                        'mobile' => ['width' => '63%', 'height' => '39%', 'right' => '0px', 'borderWidth' => $seiten('7px')],
+                    ], null, '& img{display:block;width:100%;height:100%;object-fit:cover}'),
+                    $bild('hero-stempel', $medien['stempel'], '', [
+                        'desktop' => ['position' => 'absolute', 'maxWidth' => '122px', 'width' => '122px', 'left' => '-1%', 'bottom' => '9%', 'margin' => $seiten('0px'), 'rotate' => -12, 'zIndex' => 3,
+                            'borderRadius' => $rund('50%'), 'shadowY' => '8px', 'shadowBlur' => '24px', 'shadowColor' => '#123b2626'],
+                        'mobile' => ['maxWidth' => '96px', 'width' => '96px', 'left' => '-2%', 'bottom' => '5%'],
+                    ], null, '& img{display:block;width:100%;height:auto}'),
+                ], [
+                    'desktop' => ['position' => 'relative', 'minHeight' => '600px'],
+                    'tablet' => ['minHeight' => '520px'],
+                    'mobile' => ['minHeight' => '390px'],
+                ]),
+            ], ['desktop' => ['columns' => 'two'], 'tablet' => ['columns' => 'one'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '80px', 'alignItems' => 'center', 'margin' => ['top' => '0px'], 'columnWidths' => '51 49'],
+                'tablet' => ['gap' => '56px'],
+                'mobile' => ['gap' => '40px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '@creme', 'padding' => ['top' => '72px', 'bottom' => '84px'], 'overflow' => 'hidden'],
+            'tablet' => ['padding' => ['top' => '56px', 'bottom' => '72px']],
+            'mobile' => ['padding' => ['top' => '40px', 'bottom' => '64px']],
+        ], 'start'),
+
+        // 2 – Das Versprechen auf Waldgrün.
+        $section('versprechen', [
+            $row('versprechen-zeile', [
+                $zeile('versprechen-intro', [
+                    $text('versprechen-nummer', '01', ['desktop' => ['fontSize' => '13px', 'fontWeight' => '700', 'color' => '@gold-hell', 'flexBasis' => '52px', 'flexShrink' => 0, 'margin' => ['top' => '4px', 'bottom' => '0px']], 'mobile' => ['flexBasis' => '38px']]),
+                    $column('versprechen-titel', [
+                        $text('versprechen-klein', 'Unser Versprechen', ['desktop' => [...$kleinStil, 'letterSpacing' => '0.18em', 'color' => '@klein-gruen', 'margin' => ['bottom' => '20px']]]),
+                        $heading('versprechen-h2', 'Mehr als<br>einkaufen.', 2, [
+                            'desktop' => ['fontSize' => '80px', 'fontWeight' => '400', 'lineHeight' => 1.04, 'letterSpacing' => '-0.035em', 'color' => '@papier', 'margin' => ['bottom' => '0px']],
+                            'tablet' => ['fontSize' => '64px'],
+                            'mobile' => ['fontSize' => '48px'],
+                        ]),
+                    ]),
+                ], '0px', ['alignItems' => 'flex-start']),
+                $column('versprechen-liste', [
+                    $versprechen('01', 'Frisch', 'Ausgewählte Produkte, die jeden Einkauf ein bisschen besser machen.'),
+                    $versprechen('02', 'Qualität', 'Sorgfältig ausgewählt, mit Vertrauen gekauft. Gute Produkte zu fairen Preisen.'),
+                    $versprechen('03', 'Vielfältig', 'Ein Sortiment für den Alltag, besondere Momente und jeden Geschmack.'),
+                ], ['desktop' => ['borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#cfb573a6']]),
+            ], ['desktop' => ['columns' => 'two'], 'tablet' => ['columns' => 'one'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '120px', 'alignItems' => 'flex-start', 'margin' => ['top' => '0px'], 'columnWidths' => '3 5'],
+                'tablet' => ['gap' => '56px'],
+                'mobile' => ['gap' => '48px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '@forst', 'color' => '@papier', 'padding' => ['top' => '140px', 'bottom' => '140px'], 'borderWidth' => $nurOben('4px'), 'borderStyle' => 'solid', 'borderColor' => '@gold'],
+            'tablet' => ['padding' => ['top' => '100px', 'bottom' => '100px']],
+            'mobile' => ['padding' => ['top' => '80px', 'bottom' => '80px']],
+        ], 'unser-versprechen'),
+
+        // 3 – Abschluss: Handschrift links, Gruß rechts, das große K als Wasserzeichen.
+        $section('abschluss', [
+            $row('abschluss-zeile', [
+                $text('abschluss-spruch', 'Frische. Qualität.<br>Faire Preise.', [
+                    'desktop' => ['fontFamily' => 'heading', 'fontStyle' => 'italic', 'fontSize' => '84px', 'lineHeight' => 1.12, 'letterSpacing' => '-0.05em', 'color' => '@forst', 'margin' => ['bottom' => '0px']],
+                    'tablet' => ['fontSize' => '64px'],
+                    'mobile' => ['fontSize' => '48px'],
+                ]),
+                $column('abschluss-gruss', [
+                    $text('abschluss-gruss-text', 'Wir bereiten gerade alles für Sie vor.', ['desktop' => ['fontSize' => '17px', 'color' => '@text', 'margin' => ['bottom' => '10px']]]),
+                    $text('abschluss-gruss-satz', 'Bis ganz bald im Kantarci Markt.', ['desktop' => ['fontFamily' => 'heading', 'fontSize' => '34px', 'lineHeight' => 1.25, 'color' => '@forst', 'margin' => ['bottom' => '0px']], 'mobile' => ['fontSize' => '26px']]),
+                ], ['desktop' => ['maxWidth' => '390px', 'alignSelf' => 'center']]),
+            ], ['desktop' => ['columns' => 'two'], 'tablet' => ['columns' => 'one'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '40px', 'alignItems' => 'center', 'margin' => ['top' => '0px'], 'position' => 'relative', 'zIndex' => 2],
+                'tablet' => ['gap' => '56px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '@sand', 'position' => 'relative', 'overflow' => 'hidden', 'minHeight' => '450px', 'padding' => ['top' => '130px', 'bottom' => '130px'], 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@gold'],
+            'tablet' => ['padding' => ['top' => '100px', 'bottom' => '110px']],
+            'mobile' => ['padding' => ['top' => '80px', 'bottom' => '96px']],
+        ], 'bis-bald', "&::before{content:'K';position:absolute;right:3%;top:4%;font-family:Georgia,serif;font-size:min(30vw,480px);line-height:1;color:rgba(6,47,36,.045);pointer-events:none}\n"
+            ."&::after{content:'';position:absolute;right:7%;bottom:58px;width:180px;height:2px;background:#ad893b}"),
+    ],
+];
+
+// ---------------------------------------------------------------------------------------------
+// Seiten anlegen und veröffentlichen
+// ---------------------------------------------------------------------------------------------
+
+$anlegen = static function (string $slug, array $dokument, string $seoTitel = '', string $teilbild = '') use ($pages, $db): string {
+    $id = $pages->createPage($slug, null, 'page', $dokument);
+    if ('' !== $seoTitel) {
+        $db->executeStatement('UPDATE page SET seo_title = ? WHERE id = ?', [$seoTitel, $id]);
+    }
+    if ('' !== $teilbild) {
+        $db->executeStatement('UPDATE page SET og_media_id = ? WHERE id = ?', [$teilbild, $id]);
+    }
+    $seite = $db->fetchAssociative('SELECT draft_revision_id, version FROM page WHERE id = ?', [$id]);
+    $pages->publish($id, $seite['draft_revision_id'], (int) $seite['version']);
+    echo 'Seite angelegt: /'.$db->fetchOne('SELECT path FROM page WHERE id = ?', [$id])."\n";
+
+    return $id;
+};
+
+// Der Text des Hero spielt beim Laden; die Fotos bleiben ohne Einblendung (LCP).
+$startseite = $einblenden($startseite, [
+    'hero-label' => ['fade'],
+    'hero-titel' => ['rise', 'short'],
+    'hero-intro' => ['rise', 'medium'],
+    'hero-termin' => ['rise', 'long'],
+    'hero-adresse' => ['fade', 'long'],
+    'versprechen-intro' => ['rise'],
+    'versprechen-liste' => ['rise', 'short'],
+    'abschluss-spruch' => ['rise'],
+    'abschluss-gruss' => ['rise', 'short'],
+]);
+
+$anlegen('home', $startseite, 'Kantarci Markt – Neueröffnung in Baden-Baden', $medien['markt']['id']);
+
+// ---------------------------------------------------------------------------------------------
+// Eröffnungsseite (Demo, 24.09.2026)
+// ---------------------------------------------------------------------------------------------
+//
+// So sieht die Startseite aus, wenn der Markt geöffnet hat. Sie liegt vorerst unter
+// /eroeffnung, ist nicht verlinkt und steht auf noindex: Umut soll sie ansehen können, ohne dass
+// die Vorab-Seite verschwindet. Zur Eröffnung wandert ihr Inhalt als Entwurf auf die Startseite
+// (geplante Veröffentlichung), /eroeffnung wird danach gelöscht.
+//
+// Die Angebote kommen aus der Web-Ansicht der eigenen App (app.kantarci-markt.de). Die erlaubt
+// das Einbetten selbst (frame-ancestors) und meldet ihre Höhe per postMessage. Das Skript am
+// Baustein ist Umuts Gegenstück dazu (24.09.2026). Eine Einwilligung braucht es nicht, solange die
+// Website keine Einwilligungsleiste hat: Consent::granted() lässt dann jede Gruppe durch.
+//
+// Platzhalter, bis Umut die echten Werte schickt: Öffnungszeiten, Telefon, Store-Adressen (die
+// führen vorerst auf die Suche im jeweiligen Store) und die Store-Badges (eigene Knöpfe statt der
+// offiziellen Grafiken von Apple und Google).
+
+// Ohne eigene Überschrift und ohne Knopf zur App: Die Seite hat ihre Überschrift, und Umut will keine Links nach
+// außen (24.09.2026). Ein Klick auf ein Angebot öffnet ein Popup in der Ansicht. Heller Ton, weil der Abschnitt Sand ist.
+$angeboteUrl = 'https://app.kantarci-markt.de/embed/angebote.php?titel=0&app=0';
+$appStoreUrl = 'https://apps.apple.com/de/search?term=Kantarci%20Markt';
+$playStoreUrl = 'https://play.google.com/store/search?q=Kantarci%20Markt&c=apps';
+$oeffnungszeiten = [['Montag bis Freitag', '8:00 – 20:00 Uhr'], ['Samstag', '8:00 – 20:00 Uhr'], ['Sonntag und Feiertage', 'geschlossen']];
+$routeUrl = 'https://www.google.com/maps/dir/?api=1&destination='.rawurlencode($strasse.', '.$plz.' '.$ort);
+
+// Umuts Gegenstück aus der App, um zwei Dinge ergänzt. Erstens läuft es als eigene Datei (defer)
+// und damit oft erst, nachdem die App ihre Höhe schon einmal gemeldet hat - danach meldet sie nur
+// noch Änderungen. Deshalb fragt es nach dem Start nach ('km-angebote-height-request'); antwortet
+// die App nicht, lädt es den Rahmen als Rückfall einmal neu. Zweitens meldet die App beim Öffnen
+// eines Angebots, wo ihr Popup steht ('km-angebote-focus'); liegt das außerhalb des Sichtbaren,
+// scrollt die Seite dorthin.
+$hoehenSkript = <<<'JS'
+(function () {
+  var gemeldet = false;
+  function passend(f) {
+    try {
+      var src = new URL(f.src, location.href);
+      return src.pathname.indexOf('/embed/angebote') !== -1 ? src : null;
+    } catch (e) { return null; }
+  }
+  window.addEventListener('message', function (ev) {
+    if (!ev.data || (ev.data.type !== 'km-angebote-height' && ev.data.type !== 'km-angebote-focus')) return;
+    var frames = document.querySelectorAll('iframe');
+    for (var i = 0; i < frames.length; i++) {
+      var f = frames[i];
+      if (f.contentWindow !== ev.source) continue;
+      var src = passend(f);
+      if (!src || src.origin !== ev.origin) return;
+      if (ev.data.type === 'km-angebote-focus') {
+        var oben = f.getBoundingClientRect().top + Math.max(0, Math.min(20000, Number(ev.data.top) || 0));
+        var hoehe = Math.max(0, Math.min(20000, Number(ev.data.height) || 0));
+        if (oben < 16 || oben + Math.min(hoehe, window.innerHeight - 32) > window.innerHeight - 16) {
+          var still = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+          window.scrollTo({ top: window.scrollY + oben - 24, behavior: still ? 'auto' : 'smooth' });
+        }
+        return;
+      }
+      var h = Math.max(150, Math.min(20000, Number(ev.data.height) || 0));
+      f.style.height = (h + 2) + 'px';
+      f.style.minHeight = '0';
+      f.style.background = 'transparent';
+      f.setAttribute('scrolling', 'no');
+      gemeldet = true;
+      return;
+    }
+  });
+  var frames = document.querySelectorAll('iframe');
+  for (var i = 0; i < frames.length; i++) {
+    (function (f) {
+      var src = passend(f);
+      if (!src) return;
+      f.contentWindow.postMessage({ type: 'km-angebote-height-request' }, src.origin);
+      setTimeout(function () { if (!gemeldet) f.src = f.src; }, 600);
+    })(frames[i]);
+  }
+})();
+JS;
+
+/** Ändert Bausteine eines Baums nach ID, ohne ihn neu zu schreiben. */
+$aendern = static function (array $block, array $plan) use (&$aendern): array {
+    if (isset($plan[$block['id'] ?? ''])) {
+        $block = $plan[$block['id']]($block);
+    }
+    foreach ($block['children'] ?? [] as $i => $kind) {
+        $block['children'][$i] = $aendern($kind, $plan);
+    }
+
+    return $block;
+};
+$setzeText = static fn (string $inhalt): Closure => static function (array $b) use ($inhalt): array {
+    $b['props']['text'] = $inhalt;
+
+    return $b;
+};
+
+/** Ein Store-Knopf: schwarz, zweizeilig, wie die Badges der Stores, aber ohne deren Logos. */
+$storeKnopf = static fn (string $id, string $oben, string $unten, string $href): array => $text($id,
+    '<a href="'.htmlspecialchars($href, ENT_QUOTES).'">'.$oben.'<br><strong>'.$unten.'</strong></a>',
+    ['desktop' => ['margin' => ['bottom' => '0px']]],
+    "& a{display:inline-block;min-width:176px;padding:9px 20px 10px;border-radius:9px;background:#000;border:1px solid #a6a6a6;color:#fff;font-size:12px;line-height:1.25;text-decoration:none}\n"
+    ."& a:hover{background:#123b26;border-color:#d2b978}\n"
+    ."& a:focus-visible{outline:3px solid #ad893b;outline-offset:3px}\n"
+    .'& strong{display:block;font-size:21px;font-weight:500;letter-spacing:-0.01em}');
+
+$abschnittTitel = static fn (string $id, string $klein, string $titel, string $farbeKlein, string $farbeTitel, string $strich = '@gold', string $farbeBetont = '#8c6b27') => [
+    $kleinzeile($id.'-label', $klein, $farbeKlein, $strich),
+    $heading($id.'-h2', $titel, 2, [
+        'desktop' => ['fontSize' => '64px', 'fontWeight' => '400', 'lineHeight' => 1.06, 'letterSpacing' => '-0.035em', 'color' => $farbeTitel, 'margin' => ['bottom' => '22px']],
+        'tablet' => ['fontSize' => '52px'],
+        'mobile' => ['fontSize' => '40px'],
+    ], '& em{font-style:italic;color:'.$farbeBetont.'}'),
+];
+
+$eroeffnung = [
+    'schemaVersion' => $SCHEMA,
+    'title' => 'Jetzt geöffnet',
+    'description' => 'Kantarci Markt in der Wilhelm-Drapp-Straße in Baden-Baden: frische Produkte, echte Vielfalt, faire Preise und jede Woche neue Angebote.',
+    'blocks' => [
+        // 1 – Hero: wie die Vorab-Seite, aber mit Öffnungszeiten und zwei Wegen weiter.
+        $aendern($startseite['blocks'][0], [
+            'hero-label-text' => $setzeText('Jetzt geöffnet'),
+            'hero-titel' => $setzeText('Frische hat jetzt<br><em>eine Adresse.</em>'),
+            'hero-intro' => $setzeText('Sorgfältig ausgewählte Produkte, echte Vielfalt und faire Preise – ab sofort in der Wilhelm-Drapp-Straße in Baden-Baden.'),
+            'hero-termin-icon' => static function (array $b): array {
+                $b['props']['icon'] = 'clock';
+
+                return $b;
+            },
+            'hero-termin-klein' => $setzeText('Heute geöffnet'),
+            'hero-termin-satz' => $setzeText($oeffnungszeiten[0][1]),
+            'hero-adresse' => $setzeText('So finden Sie uns<br><strong>'.$strasse.'</strong><br>'.$plz.' '.$ort),
+            'hero-markt' => static function (array $b): array {
+                $b['props']['caption'] = 'Frische Vielfalt, jeden Tag.';
+
+                return $b;
+            },
+            'hero-text' => static function (array $b) use ($zeile, $button): array {
+                // Die beiden Wege stehen zwischen Einleitung und Öffnungszeiten.
+                array_splice($b['children'], 3, 0, [$zeile('hero-wege', [
+                    $button('hero-angebote', 'Aktuelle Angebote', '#angebote'),
+                    ['id' => 'hero-besuch', 'type' => 'button', 'props' => ['text' => 'Anfahrt & Öffnungszeiten', 'href' => '#besuch'],
+                        'css' => "background:transparent;color:#123b26;box-shadow:inset 0 0 0 1px #123b26\n& span{display:none}\n&:hover{background:#123b26;color:#fff}"],
+                ], '14px', ['flexWrap' => 'wrap', 'margin' => ['top' => '0px', 'bottom' => '30px']])]);
+
+                return $b;
+            },
+        ]),
+
+        // 2 – Angebote aus der App, auf Sand: Die Web-Ansicht ist für hellen Grund gestaltet
+        // (dunkle Überschrift, weiße Karten); `ton` ändert daran derzeit nichts (24.09.2026).
+        $section('angebote-bereich', [
+            $row('angebote-kopf', [
+                $column('angebote-kopf-titel', $abschnittTitel('angebote', 'Diese Woche', 'Aktuelle<br><em>Angebote.</em>', '@gold-text', '@forst')),
+                $column('angebote-kopf-text', [
+                    $text('angebote-intro', 'Direkt aus unserer App – jede Woche neu. Die Angebote gelten im Markt, solange der Vorrat reicht.', [
+                        'desktop' => ['maxWidth' => '420px', 'fontSize' => '17px', 'lineHeight' => 1.65, 'color' => '@text', 'margin' => ['bottom' => '0px']],
+                    ]),
+                ], ['desktop' => ['alignSelf' => 'flex-end']]),
+            ], ['desktop' => ['columns' => 'two'], 'tablet' => ['columns' => 'one'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '40px', 'alignItems' => 'flex-end', 'margin' => ['top' => '0px', 'bottom' => '44px']],
+                'mobile' => ['gap' => '8px', 'margin' => ['bottom' => '32px']],
+            ]),
+            ['id' => 'angebote-app', 'type' => 'embed',
+                'props' => ['group' => 'external', 'title' => 'Aktuelle Angebote von Kantarci Markt', 'provider' => 'Kantarci-Markt-App', 'url' => $angeboteUrl, 'hint' => '', 'height' => 900],
+                // Die Höhe setzt das Skript, sobald die App sie meldet; bis dahin gelten die 900 px.
+                'css' => '& iframe{border-radius:0;background:transparent}',
+                'script' => $hoehenSkript],
+        ], [
+            'desktop' => ['backgroundColor' => '@sand', 'padding' => ['top' => '110px', 'bottom' => '110px'], 'borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '1px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '@gold'],
+            'tablet' => ['padding' => ['top' => '84px', 'bottom' => '84px']],
+            'mobile' => ['padding' => ['top' => '64px', 'bottom' => '64px']],
+        ], 'angebote'),
+
+        // 3 – Die App: Text und Store-Knöpfe links, die Bildmarke als App-Symbol rechts.
+        $section('app-bereich', [
+            $row('app-zeile', [
+                $column('app-text', [
+                    ...$abschnittTitel('app', 'Die Kantarci-Markt-App', 'Angebote immer<br>in der Tasche.', '@gold-text', '@forst'),
+                    $text('app-intro', 'Mit unserer App haben Sie die aktuellen Angebote jederzeit dabei – auch unterwegs und vor dem Einkauf.', [
+                        'desktop' => ['maxWidth' => '520px', 'fontSize' => '18px', 'lineHeight' => 1.65, 'color' => '@text', 'margin' => ['bottom' => '30px']],
+                        'mobile' => ['fontSize' => '17px'],
+                    ]),
+                    $zeile('app-stores', [
+                        $storeKnopf('app-ios', 'Laden im', 'App Store', $appStoreUrl),
+                        $storeKnopf('app-android', 'Jetzt bei', 'Google Play', $playStoreUrl),
+                    ], '14px', ['flexWrap' => 'wrap']),
+                ]),
+                $column('app-symbol', [
+                    $bild('app-symbol-bild', $medien['symbol'], 'App-Symbol von Kantarci Markt', [
+                        'desktop' => ['maxWidth' => '200px', 'width' => '200px', 'margin' => $seiten('0px'), 'rotate' => -6,
+                            'shadowY' => '24px', 'shadowBlur' => '50px', 'shadowColor' => '#062f2440', 'borderRadius' => $rund('44px'), 'overflow' => 'hidden'],
+                        'mobile' => ['maxWidth' => '140px', 'width' => '140px', 'borderRadius' => $rund('31px')],
+                    ], null, '& img{display:block;width:100%;height:auto}'),
+                ], ['desktop' => ['display' => 'flex', 'justifyContent' => 'center', 'alignItems' => 'center']]),
+            ], ['desktop' => ['columns' => 'two'], 'tablet' => ['columns' => 'one'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '60px', 'alignItems' => 'center', 'margin' => ['top' => '0px'], 'columnWidths' => '3 2'],
+                'mobile' => ['gap' => '44px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '@creme', 'padding' => ['top' => '110px', 'bottom' => '110px']],
+            'tablet' => ['padding' => ['top' => '84px', 'bottom' => '84px']],
+            'mobile' => ['padding' => ['top' => '64px', 'bottom' => '72px']],
+        ], 'app'),
+
+        // 4 – Das Versprechen, wie auf der Vorab-Seite.
+        $startseite['blocks'][1],
+
+        // 5 – Besuch: Adresse mit Route, Öffnungszeiten, Kontakt.
+        $section('besuch-bereich', [
+            $row('besuch-kopf', [
+                $column('besuch-titel', $abschnittTitel('besuch', 'Besuchen Sie uns', 'Wir freuen uns<br>auf Sie.', '@gold-text', '@forst')),
+            ], [], ['desktop' => ['margin' => ['top' => '0px', 'bottom' => '40px']]]),
+            $row('besuch-spalten', [
+                $column('besuch-adresse', [
+                    $heading('besuch-adresse-h3', 'Adresse', 3, ['desktop' => ['fontFamily' => 'body', 'fontSize' => '14px', 'fontWeight' => '700', 'letterSpacing' => '0.18em', 'textTransform' => 'uppercase', 'color' => '@gold-text', 'margin' => ['bottom' => '14px']]]),
+                    $text('besuch-adresse-text', $name.'<br>'.$strasse.'<br>'.$plz.' '.$ort, ['desktop' => ['fontSize' => '18px', 'lineHeight' => 1.6, 'color' => '@forst', 'margin' => ['bottom' => '22px']]]),
+                    ['id' => 'besuch-route', 'type' => 'button', 'props' => ['text' => 'Route planen', 'href' => $routeUrl, 'newTab' => true], 'css' => '& span{display:none}'],
+                ]),
+                $column('besuch-zeiten', [
+                    $heading('besuch-zeiten-h3', 'Öffnungszeiten', 3, ['desktop' => ['fontFamily' => 'body', 'fontSize' => '14px', 'fontWeight' => '700', 'letterSpacing' => '0.18em', 'textTransform' => 'uppercase', 'color' => '@gold-text', 'margin' => ['bottom' => '14px']]]),
+                    $text('besuch-zeiten-text', implode('<br>', array_map(static fn (array $z): string => '<strong>'.$z[0].'</strong>'.$z[1], $oeffnungszeiten)), [
+                        'desktop' => ['fontSize' => '17px', 'lineHeight' => 1.6, 'color' => '@text', 'margin' => ['bottom' => '0px']],
+                    ], "& strong{display:block;margin-top:12px;color:#123b26;font-weight:700}\n& strong:first-child{margin-top:0}"),
+                ]),
+                $column('besuch-kontakt', [
+                    $heading('besuch-kontakt-h3', 'Kontakt', 3, ['desktop' => ['fontFamily' => 'body', 'fontSize' => '14px', 'fontWeight' => '700', 'letterSpacing' => '0.18em', 'textTransform' => 'uppercase', 'color' => '@gold-text', 'margin' => ['bottom' => '14px']]]),
+                    $text('besuch-kontakt-text', 'Telefon folgt<br>E-Mail: <a href="mailto:'.$mail.'">'.$mail.'</a>', [
+                        'desktop' => ['fontSize' => '17px', 'lineHeight' => 1.9, 'color' => '@text', 'margin' => ['bottom' => '0px']],
+                    ], $linkCss),
+                ]),
+            ], ['desktop' => ['columns' => 'three'], 'tablet' => ['columns' => 'one'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '48px', 'alignItems' => 'flex-start', 'margin' => ['top' => '0px'], 'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e4dcc8', 'padding' => ['top' => '36px']],
+                'mobile' => ['gap' => '36px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '@creme', 'padding' => ['top' => '110px', 'bottom' => '110px']],
+            'tablet' => ['padding' => ['top' => '84px', 'bottom' => '84px']],
+            'mobile' => ['padding' => ['top' => '64px', 'bottom' => '72px']],
+        ], 'besuch'),
+
+        // 6 – Abschluss wie auf der Vorab-Seite, mit neuem Gruß.
+        $aendern($startseite['blocks'][2], [
+            'abschluss-gruss-text' => $setzeText('Danke, dass Sie da sind.'),
+            'abschluss-gruss-satz' => $setzeText('Bis gleich im Kantarci Markt.'),
+        ]),
+    ],
+];
+
+$eroeffnung = $einblenden($eroeffnung, [
+    'hero-label' => ['fade'],
+    'hero-titel' => ['rise', 'short'],
+    'hero-intro' => ['rise', 'medium'],
+    'hero-wege' => ['rise', 'long'],
+    'hero-termin' => ['rise', 'long'],
+    'hero-adresse' => ['fade', 'long'],
+    'app-text' => ['rise'],
+    'app-symbol' => ['rise', 'short'],
+    'versprechen-intro' => ['rise'],
+    'versprechen-liste' => ['rise', 'short'],
+    'abschluss-spruch' => ['rise'],
+    'abschluss-gruss' => ['rise', 'short'],
+]);
+
+$eroeffnungId = $anlegen('eroeffnung', $eroeffnung, 'Kantarci Markt – frisch, vielfältig, fair in Baden-Baden', $medien['markt']['id']);
+// Nur zum Ansehen: nicht in Suchmaschinen, nicht in der Sitemap, nirgends verlinkt.
+$db->executeStatement('UPDATE page SET robots = ? WHERE id = ?', ['noindex', $eroeffnungId]);
+
+/** Eine Rechtsseite: Kleinzeile, Titel und Vorspann auf Waldgrün, dann Absätze mit Zwischenüberschriften. */
+$rechtsseite = static function (string $praefix, string $label, string $titel, string $vorspann, array $absaetze) use ($section, $row, $column, $kleinzeile, $heading, $text, $nurOben, $linkCss): array {
+    $kopf = $section($praefix.'-kopf', [
+        $kleinzeile($praefix.'-label', $label, '@gold-hell', '@gold-hell'),
+        $heading($praefix.'-h1', $titel, 1, [
+            'desktop' => ['fontSize' => '56px', 'fontWeight' => '400', 'lineHeight' => 1.1, 'letterSpacing' => '-0.03em', 'color' => '@papier', 'margin' => ['bottom' => '20px']],
+            'mobile' => ['fontSize' => '40px'],
+        ]),
+        $text($praefix.'-vorspann', $vorspann, [
+            'desktop' => ['maxWidth' => '640px', 'fontSize' => '18px', 'lineHeight' => 1.7, 'color' => '@text-gruen', 'margin' => ['bottom' => '0px']],
+            'mobile' => ['fontSize' => '16px'],
+        ]),
+    ], [
+        'desktop' => ['backgroundColor' => '@forst', 'color' => '@papier', 'padding' => ['top' => '76px', 'bottom' => '68px'], 'borderWidth' => $nurOben('4px'), 'borderStyle' => 'solid', 'borderColor' => '@gold'],
+        'mobile' => ['padding' => ['top' => '48px', 'bottom' => '44px']],
+    ]);
+
+    $punkte = [];
+    foreach ($absaetze as $i => [$zwischentitel, $inhalt]) {
+        $punkte[] = $row($praefix.'-punkt-'.$i, [
+            $column($praefix.'-punkt-'.$i.'-titel', '' === $zwischentitel ? [] : [
+                $heading($praefix.'-h2-'.$i, $zwischentitel, 2, [
+                    'desktop' => ['fontFamily' => 'body', 'fontSize' => '16px', 'fontWeight' => '700', 'lineHeight' => 1.5, 'letterSpacing' => '0', 'color' => '@forst', 'margin' => ['bottom' => '0px']],
+                ]),
+            ], [
+                'desktop' => ['flexBasis' => '260px', 'flexShrink' => 0],
+                'tablet' => ['flexBasis' => '200px'],
+                'mobile' => ['flexBasis' => 'auto'],
+            ]),
+            $column($praefix.'-punkt-'.$i.'-text', [
+                $text($praefix.'-p-'.$i, $inhalt, ['desktop' => ['fontSize' => '16px', 'lineHeight' => 1.75, 'color' => '@text', 'margin' => ['bottom' => '0px']]], $linkCss),
+            ], ['desktop' => ['flexGrow' => 1, 'flexBasis' => '0', 'minWidth' => '0'], 'mobile' => ['flexBasis' => 'auto']]),
+        ], [], [
+            'desktop' => ['display' => 'flex', 'alignItems' => 'flex-start', 'gap' => '44px', 'margin' => ['top' => '0px'],
+                'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e4dcc8', 'padding' => ['top' => '26px', 'bottom' => '26px']],
+            'tablet' => ['gap' => '28px'],
+            'mobile' => ['flexDirection' => 'column', 'gap' => '8px', 'padding' => ['top' => '20px', 'bottom' => '20px']],
+        ]);
+    }
+
+    $inhalt = $section($praefix, [
+        $column($praefix.'-inhalt', $punkte, ['desktop' => ['maxWidth' => '920px']]),
+    ], ['desktop' => ['padding' => ['top' => '48px', 'bottom' => '90px']], 'mobile' => ['padding' => ['top' => '24px', 'bottom' => '56px']]]);
+
+    return [$kopf, $inhalt];
+};
+
+$pruefen = static fn (string $was): string => '<strong>NOCH ZU PRÜFEN:</strong> '.$was;
+
+$anlegen('impressum', [
+    'schemaVersion' => $SCHEMA, 'title' => 'Impressum',
+    'description' => 'Anbieterangaben von Kantarci Markt, Baden-Baden.',
+    'blocks' => [
+        ...$rechtsseite('impressum', 'Rechtliche Angaben', 'Impressum', 'Angaben gemäß § 5 DDG und § 18 Abs. 2 MStV.', [
+            ['Anbieter', $name.'<br>'.$pruefen('Inhaber bzw. Firma mit Rechtsform (etwa „… GmbH“ oder „Inhaber …, e. K.“).').'<br>'.$strasse.' '.$pruefen('Hausnummer').'<br>'.$plz.' '.$ort],
+            ['Vertreten durch', $pruefen('Geschäftsführer bzw. Inhaber.')],
+            ['Registereintrag', $pruefen('Handelsregisternummer und Registergericht, falls eingetragen.')],
+            ['Kontakt', "E-Mail: <a href=\"mailto:$mail\">$mail</a><br>".$pruefen('Ob das Postfach existiert, und eine Telefonnummer als zweiten schnellen Kontaktweg ergänzen.')],
+            ['Umsatzsteuer', $pruefen('Umsatzsteuer-Identifikationsnummer nach § 27a UStG, falls vorhanden.')],
+            ['Verantwortlich für den Inhalt', $pruefen('Name der verantwortlichen Person, Anschrift wie oben.')],
+            ['Verbraucherstreitbeilegung', 'Wir sind nicht bereit und nicht verpflichtet, an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.'],
+            ['Haftung für Inhalte', 'Als Diensteanbieter sind wir für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Wir sind jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Bei Bekanntwerden von Rechtsverletzungen entfernen wir diese Inhalte umgehend.'],
+            ['Urheberrecht', 'Die von uns erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedürfen der schriftlichen Zustimmung.'],
+            ['Bildnachweis', 'Logo: '.$name.'. Die Fotos von Marktstand und Tomaten sind Beispielbilder. '.$pruefen('Quelle und Lizenz der beiden Fotos eintragen.')],
+        ]),
+    ],
+], 'Impressum | '.$name);
+
+$anlegen('datenschutz', [
+    'schemaVersion' => $SCHEMA, 'title' => 'Datenschutz',
+    'description' => 'Welche Daten beim Besuch der Website von Kantarci Markt verarbeitet werden.',
+    'blocks' => [
+        ...$rechtsseite('datenschutz', 'Ihre Daten', 'Datenschutzhinweise', 'Hier erfahren Sie, welche Daten beim Besuch dieser Website verarbeitet werden – und welche Rechte Sie haben.', [
+            ['1. Verantwortlicher', $name.', '.$strasse.', '.$plz.' '.$ort.". E-Mail <a href=\"mailto:$mail\">$mail</a>.<br><br>".$pruefen('Inhaber bzw. Firma wie im Impressum.')],
+            ['2. Besuch dieser Website', 'Beim Aufruf verarbeitet der Hostingdienst technisch erforderliche Verbindungsdaten: IP-Adresse, Zeitpunkt, angeforderte Adresse, Browserangaben und HTTP-Status. Das dient der sicheren Bereitstellung und der Fehlersuche. Rechtsgrundlage ist unser berechtigtes Interesse an einem störungsfreien Betrieb, Art. 6 Abs. 1 lit. f DSGVO.<br><br>'.$pruefen('Hostinganbieter benennen, Auftragsverarbeitungsvertrag abschließen und die Speicherdauer der Serverprotokolle eintragen.')],
+            ['3. Cookies und externe Dienste', 'Diese Website setzt keine Analyse- oder Werbecookies. Bilder, Schriften und Gestaltung kommen vom eigenen Server; es werden keine Karten, Videos oder Schriften von Dritten nachgeladen. Deshalb gibt es auch keinen Einwilligungsdialog.'],
+            ['4. Kontakt per E-Mail', 'Wenn Sie uns schreiben, verarbeiten wir Ihre Adresse und Ihre Nachricht, um Ihr Anliegen zu beantworten (Art. 6 Abs. 1 lit. b oder f DSGVO). Wir löschen die Nachricht, wenn sie erledigt ist und keine gesetzliche Aufbewahrungspflicht besteht.'],
+            ['5. Ihre Rechte', 'Sie haben unter den gesetzlichen Voraussetzungen das Recht auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung und Datenübertragbarkeit. Einer Verarbeitung auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO können Sie widersprechen.'],
+            ['6. Beschwerderecht', 'Sie können sich bei einer Datenschutz-Aufsichtsbehörde beschweren, für uns beim Landesbeauftragten für den Datenschutz und die Informationsfreiheit Baden-Württemberg.'],
+            ['', "Fragen zum Datenschutz beantworten wir gern unter <a href=\"mailto:$mail\">$mail</a>."],
+        ]),
+    ],
+], 'Datenschutz | '.$name);
+
+$fehlerId = $anlegen('404', [
+    'schemaVersion' => $SCHEMA, 'title' => 'Seite nicht gefunden',
+    'description' => 'Die gesuchte Seite gibt es nicht oder sie wurde verschoben.',
+    'blocks' => [
+        $section('fehler', [
+            $kleinzeile('fehler-label', 'Fehler 404', '@gold-text'),
+            $heading('fehler-titel', 'Diese Seite<br><em>gibt es nicht.</em>', 1, [
+                'desktop' => ['fontSize' => '64px', 'fontWeight' => '400', 'lineHeight' => 1.05, 'letterSpacing' => '-0.04em', 'color' => '@forst', 'margin' => ['bottom' => '22px']],
+                'mobile' => ['fontSize' => '42px'],
+            ], '& em{font-style:italic;color:#8c6b27}'),
+            $text('fehler-text', 'Vielleicht hat sich ein Tippfehler in die Adresse geschlichen. Über die Startseite finden Sie zurück.', [
+                'desktop' => ['maxWidth' => '460px', 'fontSize' => '18px', 'lineHeight' => 1.7, 'color' => '@text', 'margin' => ['bottom' => '28px']],
+            ]),
+            $button('fehler-knopf', 'Zur Startseite', '/', ['desktop' => ['margin' => ['top' => '0px']]]),
+        ], [
+            'desktop' => ['backgroundColor' => '@creme', 'padding' => ['top' => '110px', 'bottom' => '130px']],
+            'mobile' => ['padding' => ['top' => '64px', 'bottom' => '80px']],
+        ]),
+    ],
+]);
+$db->executeStatement('UPDATE page SET robots = ? WHERE id = ?', ['noindex', $fehlerId]);
+
+// ---------------------------------------------------------------------------------------------
+// Einstellungen, Konto
+// ---------------------------------------------------------------------------------------------
+
+$settings->assignNotFoundPage($fehlerId, '');
+$settings->save([
+    'legalName' => $name,
+    'description' => 'Kantarci Markt eröffnet bald in der Wilhelm-Drapp-Straße in Baden-Baden: frische Produkte, echte Vielfalt und faire Preise.',
+    'email' => '',
+    'street' => $strasse, 'postalCode' => $plz, 'city' => $ort, 'country' => 'DE',
+    // Noch kein Geschäft mit Öffnungszeiten: keine LocalBusiness-Angaben, bis der Markt öffnet.
+    'localBusiness' => false, 'llmsTxt' => true,
+    'faviconMediaId' => $medien['symbol']['id'],
+    'stickyHeader' => false, 'headerOverlay' => false,
+    'motion' => 'always',
+    'homePath' => 'home', 'imprintPath' => 'impressum', 'privacyPath' => 'datenschutz',
+    // Die Seite lädt nichts von Dritten; deshalb keine Einwilligungsleiste.
+    'consentBanner' => false, 'scrollTop' => false, 'postMetaHeader' => false,
+]);
+echo "Einstellungen gespeichert\n";
+
+$passwort = bin2hex(random_bytes(12));
+$db->insert('cms_user', ['id' => bin2hex(random_bytes(16)), 'username' => 'umut', 'password_hash' => password_hash($passwort, PASSWORD_BCRYPT), 'roles' => '["ROLE_ADMIN"]']);
+
+echo "\nFertig.\nVerwaltung: Benutzer „umut“, Passwort: $passwort\n";

src/Content/CustomCode.php

@@ -239,6 +239,14 @@ final class CustomCode
             if (1 !== preg_match('/^-{0,2}[a-z][a-z0-9-]{0,40}$/D', $property)) {
                 throw new InvalidDocument(sprintf('„%s“ ist kein CSS-Eigenschaftsname.', mb_substr($property, 0, 40)));
             }
+            // `content` braucht einen Text in Anfuehrungszeichen, sonst gibt es kein ::before und
+            // ::after fuer Striche, Verlaeufe oder ein Wasserzeichen. Erlaubt ist ein kurzer Text
+            // aus Buchstaben, Ziffern und wenigen Satzzeichen: kein <, kein Backslash, kein
+            // weiteres Anfuehrungszeichen, also kein Weg aus dem String oder dem <style>.
+            if ('content' === $property && 1 === preg_match('/^(["\'])[\p{L}\p{N} .,:!?·•–-]{0,40}\1$/uD', $value)) {
+                $out[] = $property.':'.$value;
+                continue;
+            }
             if ('' === $value || 1 !== preg_match('/^[a-zA-Z0-9 ,.%#()\/:_+*-]{1,300}$/D', $value)) {
                 throw new InvalidDocument(sprintf('Der Wert von „%s“ enthält Zeichen, die in eigenem CSS nicht vorgesehen sind.', $property));
             }

src/Content/DocumentValidator.php

@@ -16,7 +16,9 @@ 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', 'arrow-right', 'arrow-left', 'arrow-up-right'];
+    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', 'arrow-down', 'chevron-right', 'calendar', 'chat', 'send', 'download', 'document', 'play', 'search', 'heart', 'info', 'plus', 'user'];
+    /** Das Symbol eines Buttons, wenn keins gewählt ist: der Pfeil, den jeder Button vor v25 hatte. */
+    public const BUTTON_DEFAULT_ICON = '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'];
@@ -40,7 +42,7 @@ final class DocumentValidator
     public const V23_TYPES = ['social'];
     public const V24_TYPES = ['html'];
     /** Die aktuelle Fassung des Dokumentschemas - dieselbe Zahl wie SCHEMA_VERSION in editor-model.js. */
-    public const SCHEMA_VERSION = 24;
+    public const SCHEMA_VERSION = 25;
 
     /**
      * @param bool $requireHeading A page needs exactly one main heading. A header, a footer or a
@@ -236,14 +238,22 @@ final class DocumentValidator
             }
         }
         if ('button' === $type) {
-            $this->url($props['href'] ?? null);
+            $this->link($props['href'] ?? null);
+            // Schema v25: das Symbol am Button ist wählbar. Fehlt es, bleibt es beim Pfeil wie
+            // bisher - ältere Dokumente sehen also unverändert aus. "none" heißt ohne Symbol.
+            if (array_key_exists('icon', $props)) {
+                $this->require($schemaVersion >= 25 && ('none' === $props['icon'] || in_array($props['icon'], self::ICONS, true)), 'Unbekanntes Symbol am Button oder Dokumentschema vor v25.');
+            }
+            if (array_key_exists('iconPosition', $props)) {
+                $this->require($schemaVersion >= 25 && in_array($props['iconPosition'], ['start', 'end'], true), 'Das Symbol steht vor oder nach dem Text und braucht Schema v25.');
+            }
         }
         if ('iconcard' === $type) {
             $this->require(in_array($props['icon'] ?? null, self::ICONS, true), 'Unknown icon.');
             $this->text($props['title'] ?? null, 120);
             $this->text($props['text'] ?? null, 600, true);
             if ('' !== ($props['href'] ?? '')) {
-                $this->url($props['href']);
+                $this->link($props['href']);
             }
         }
         if ('stat' === $type) {
@@ -261,7 +271,7 @@ final class DocumentValidator
             $this->text($props['title'] ?? null, 160);
             $this->text($props['text'] ?? null, 600, true);
             $this->text($props['buttonText'] ?? null, 80);
-            $this->url($props['href'] ?? null);
+            $this->link($props['href'] ?? null);
         }
         if ('contact' === $type) {
             foreach (['phone', 'email', 'address'] as $field) {
@@ -329,7 +339,7 @@ final class DocumentValidator
             $this->text($props['label'] ?? null, 120, $props['decorative']);
             $this->require(!$props['decorative'] || '' === $props['label'], 'Ein dekoratives Symbol hat keine Beschriftung.');
             if ('' !== ($props['href'] ?? '')) {
-                $this->url($props['href']);
+                $this->link($props['href']);
             }
         }
         if ('social' === $type) {
@@ -414,7 +424,7 @@ final class DocumentValidator
             // Kopfbereich ohne Verweis auf die Startseite ist der erste Klick, den jeder sucht.
             if ('' !== ($props['href'] ?? '')) {
                 $this->require($schemaVersion >= 17, 'Ein verlinktes Bild braucht Schema v17.');
-                $this->url($props['href']);
+                $this->link($props['href']);
             }
             // Was ein Klick auf das Bild tut. Ohne Angabe: nichts - wie bisher.
             if (isset($props['click'])) {
@@ -498,6 +508,38 @@ final class DocumentValidator
         $this->require($local || $external || 1 === preg_match('/^#[a-zA-Z][a-zA-Z0-9_-]*$/D', $url), 'Only local paths, fragments and HTTPS URLs are allowed.');
     }
 
+    /**
+     * Ein Linkziel: alles, was url() erlaubt, dazu tel: und mailto: - dieselben Ziele, die Menü
+     * (MenuRepository::url) und formatierter Text (RichText::safeHref) schon kennen. Ein Knopf
+     * „Jetzt anrufen“ war sonst nur als Textlink im Knopf-Aussehen zu bauen (Hüfner, 06.10.2026).
+     * Bildquellen und eingebettete Inhalte bleiben bei url(): dort ist tel: kein Ziel.
+     */
+    private function link(mixed $url): void
+    {
+        if (is_string($url) && strlen($url) <= 2048 && !preg_match('/[\x00-\x20\\\\]/', $url)) {
+            if (1 === preg_match('/^tel:\+?[0-9()-]{3,32}$/D', $url)) {
+                return;
+            }
+            // Adresse vor dem ersten ?, danach höchstens Betreff und Text, prozentkodiert.
+            if (1 === preg_match('/^mailto:([^?]+)(\?[A-Za-z0-9%._~=&+-]{0,500})?$/D', $url, $teile)
+                && false !== filter_var(rawurldecode($teile[1]), FILTER_VALIDATE_EMAIL)) {
+                return;
+            }
+        }
+        $this->require(true === $this->isUrl($url), 'Erlaubt sind lokale Pfade, Sprungmarken, HTTPS-Adressen sowie tel: und mailto:.');
+    }
+
+    private function isUrl(mixed $url): bool
+    {
+        try {
+            $this->url($url);
+
+            return true;
+        } catch (InvalidDocument) {
+            return false;
+        }
+    }
+
     private function require(bool $condition, string $message): void
     {
         if (!$condition) {

src/Content/FontLibrary.php

@@ -84,21 +84,41 @@ final class FontLibrary
         $bytes = 0;
         foreach ($wanted as $family => $weights) {
             $css = $this->stylesheet($family, $weights);
+            // Eine variable Schrift (etwa DM Sans) liefert Google als eine Datei für alle
+            // Schnitte, mit einer @font-face-Regel je Schnitt. Die Datei liegt trotzdem je Schnitt
+            // im Ordner, damit missing() weiter nach Schnitten fragen kann, aber das Stylesheet
+            // nennt sie nur einmal, mit einem Gewichtsbereich. Sonst lädt der Browser dieselben
+            // Bytes je Schnitt einmal, und preload() holt sie dreimal vorab.
+            $groups = [];
             foreach ($this->parse($css, $family) as $face) {
                 $name = $this->slug($family).'-'.$face['weight'].'-'.$face['subset'].'.woff2';
                 $path = $this->directory.'/'.$name;
                 if (!is_file($path)) {
-                    file_put_contents($path, $this->download($face['url']));
-                    ++$files;
+                    if (isset($groups[$face['url']])) {
+                        copy($this->directory.'/'.$groups[$face['url']]['name'], $path);
+                    } else {
+                        file_put_contents($path, $this->download($face['url']));
+                        ++$files;
+                    }
+                }
+                if (isset($groups[$face['url']])) {
+                    $groups[$face['url']]['weights'][] = $face['weight'];
+                    continue;
                 }
                 $bytes += (int) filesize($path);
+                $groups[$face['url']] = ['name' => $name, 'weights' => [$face['weight']], 'face' => $face];
+            }
+            foreach ($groups as $group) {
+                $face = $group['face'];
+                $low = min($group['weights']);
+                $high = max($group['weights']);
                 $rules[] = sprintf(
-                    "/* %s */\n@font-face{font-family:'%s';font-style:%s;font-weight:%d;font-display:swap;src:url(/assets/fonts/%s) format('woff2');unicode-range:%s}",
+                    "/* %s */\n@font-face{font-family:'%s';font-style:%s;font-weight:%s;font-display:swap;src:url(/assets/fonts/%s) format('woff2');unicode-range:%s}",
                     $face['subset'],
                     $family,
                     $face['style'],
-                    $face['weight'],
-                    $name,
+                    $low === $high ? (string) $low : $low.' '.$high,
+                    $group['name'],
                     $face['range'],
                 );
             }
@@ -106,11 +126,40 @@ final class FontLibrary
         if ([] === $rules) {
             throw new \RuntimeException('Google Fonts hat keine passende Schriftdatei geliefert.');
         }
-        file_put_contents($this->directory.'/fonts.css', implode("\n", $rules)."\n");
+        $stylesheet = $this->directory.'/fonts.css';
+        $existing = is_file($stylesheet) ? (string) file_get_contents($stylesheet) : '';
+        file_put_contents($stylesheet, $this->combine($existing, $rules, array_keys($wanted)));
 
         return ['files' => $files, 'bytes' => $bytes, 'families' => array_keys($wanted)];
     }
 
+    /**
+     * Setzt fonts.css aus den neuen Regeln und den Regeln anderer Familien zusammen.
+     *
+     * Bisher schrieb jeder Abruf die Datei neu und nur mit den Familien des aktuellen Designs.
+     * Teilen sich mehrere Websites den Ordner (lokal alle Installationen) oder wechselt ein Design
+     * die Schrift und wieder zurück, verschwanden damit Schriften, deren Dateien noch daliegen.
+     * Regeln für Familien, die gerade neu geholt wurden, werden ersetzt; die übrigen bleiben.
+     * Eine unbenutzte @font-face-Regel kostet nichts: der Browser lädt die Datei erst, wenn Text
+     * in dieser Familie steht.
+     *
+     * @param list<string> $rules    je Regel ein Kommentar mit dem Bereich und die @font-face
+     * @param list<string> $families die Familien, zu denen $rules gehören
+     */
+    public function combine(string $existing, array $rules, array $families): string
+    {
+        $kept = [];
+        preg_match_all('~(?:/\*[^*]*\*/\s*)?@font-face\s*\{[^}]*\}~', $existing, $matches);
+        foreach ($matches[0] as $rule) {
+            if (1 !== preg_match("~font-family:\\s*'([^']+)'~", $rule, $family) || in_array($family[1], $families, true)) {
+                continue;
+            }
+            $kept[] = trim($rule);
+        }
+
+        return implode("\n", [...$kept, ...$rules])."\n";
+    }
+
     /**
      * Die Dateien, die für den ersten Eindruck vorab geholt werden sollen.
      *
@@ -124,11 +173,16 @@ final class FontLibrary
      */
     public function preload(array $theme): array
     {
+        // Nur Dateien, die das Stylesheet auch nennt: bei einer variablen Schrift steht dort eine
+        // Datei für alle Schnitte, die Kopien je Schnitt holt der Browser nie.
+        $stylesheet = is_file($this->directory.'/fonts.css') ? (string) file_get_contents($this->directory.'/fonts.css') : null;
         $preload = [];
         foreach ($this->wanted($theme) as $family => $weights) {
             foreach ($weights as $weight) {
                 $name = $this->slug($family).'-'.$weight.'-latin.woff2';
-                if (is_file($this->directory.'/'.$name)) {
+                $genannt = null === $stylesheet || !str_contains($stylesheet, '/assets/fonts/'.$this->slug($family).'-')
+                    || str_contains($stylesheet, '/assets/fonts/'.$name.')');
+                if (is_file($this->directory.'/'.$name) && $genannt) {
                     $preload[] = '/assets/fonts/'.$name;
                 }
             }

src/Controller/EditorController.php

@@ -64,6 +64,9 @@ final class EditorController extends AbstractController
             'contentType' => $type, 'result' => $result, 'query' => $query, 'status' => $status,
             'listRoute' => 'post' === $type ? 'admin_posts' : 'admin_pages',
             'areaChoices' => ['header' => $this->partials->choices('header'), 'footer' => $this->partials->choices('footer')],
+            // Vorhandene Kategorien und Schlagwoerter als Vorschlag - sonst entstehen „Projekt“
+            // und „Projekte“ nebeneinander.
+            'termNames' => 'post' === $type ? $this->termNames() : ['category' => [], 'tag' => []],
         ];
         if ($request->isXmlHttpRequest()) {
             return $this->json([
@@ -118,6 +121,19 @@ final class EditorController extends AbstractController
         return $this->redirectToRoute('admin_editor', ['id' => $id]);
     }
 
+    /** @return array{category: list<string>, tag: list<string>} */
+    private function termNames(): array
+    {
+        $names = ['category' => [], 'tag' => []];
+        foreach ($this->posts->allTerms() as $term) {
+            if (isset($names[$term['kind']])) {
+                $names[$term['kind']][] = $term['name'];
+            }
+        }
+
+        return $names;
+    }
+
     /** The editor reads the style vocabulary and the palette from here, so both stay in one place. */
     #[Route('/api/design', name: 'admin_design', methods: ['GET'])]
     public function design(): JsonResponse
@@ -139,9 +155,26 @@ final class EditorController extends AbstractController
             'buttonOptions' => \App\Content\ButtonDesign::OPTIONS,
             'buttonPresets' => \App\Content\ButtonDesign::PRESETS,
             'csrfToken' => $this->csrf->getToken('editor')->getValue(),
+            // Was ein Baustein per Adresse verknuepft, waehlt man aus einer Liste - niemand soll
+            // die Adresse eines Formulars oder einer Kategorie auswendig wissen muessen.
+            'choices' => $this->choices(),
         ]);
     }
 
+    /** @return array<string, array<string, string>> Adresse => Name, je Art */
+    private function choices(): array
+    {
+        $choices = ['forms' => [], 'sections' => $this->partials->choices('section'), 'categories' => [], 'tags' => []];
+        foreach ($this->forms->all() as $form) {
+            $choices['forms'][$form['slug']] = $form['name'];
+        }
+        foreach ($this->posts->allTerms() as $term) {
+            $choices['category' === $term['kind'] ? 'categories' : 'tags'][$term['slug']] = $term['name'];
+        }
+
+        return $choices;
+    }
+
     /** Saves or removes a reusable style, so a look can be applied to other blocks and pages. */
     #[Route('/api/style-presets', name: 'admin_style_preset', methods: ['POST'])]
     public function stylePreset(Request $request): JsonResponse

src/Controller/MenuController.php

@@ -7,6 +7,7 @@ use App\Content\PageRepository;
 use App\Domain\InvalidMenu;
 use App\Domain\StaleWrite;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
@@ -17,6 +18,47 @@ final class MenuController extends AbstractController
     {
     }
 
+    /**
+     * Die Sprungziele einer Seite, fuer die Auswahl im Menue: jeder Baustein mit eigenem Anker,
+     * beschriftet mit seiner ersten Ueberschrift. Wer ein Sprungziel setzt, soll es waehlen und
+     * nicht wissen muessen, wie es im Editor hiess.
+     */
+    #[Route('/%kant.admin_path%/api/sprungziele/{id}', name: 'admin_menu_anchors', requirements: ['id' => '[A-Za-z0-9_-]{1,64}'], methods: ['GET'])]
+    public function anchors(string $id): JsonResponse
+    {
+        $this->denyAccessUnlessGranted('ROLE_PUBLISHER');
+        $page = $this->pages->findForEditor($id);
+        if (null === $page) {
+            return $this->json(['items' => []], 404);
+        }
+        $items = [];
+        $heading = static function (array $block) use (&$heading): string {
+            if ('heading' === ($block['type'] ?? null)) {
+                return trim(html_entity_decode(strip_tags((string) ($block['props']['text'] ?? '')), ENT_QUOTES | ENT_HTML5, 'UTF-8'));
+            }
+            foreach ($block['children'] ?? [] as $child) {
+                $text = $heading($child);
+                if ('' !== $text) {
+                    return $text;
+                }
+            }
+
+            return '';
+        };
+        $walk = static function (array $blocks) use (&$walk, &$items, $heading): void {
+            foreach ($blocks as $block) {
+                if (is_string($block['anchor'] ?? null) && '' !== $block['anchor']) {
+                    $title = $heading($block);
+                    $items[] = ['anchor' => $block['anchor'], 'label' => '' === $title ? '#'.$block['anchor'] : mb_strimwidth($title, 0, 70, '…').' (#'.$block['anchor'].')'];
+                }
+                $walk($block['children'] ?? []);
+            }
+        };
+        $walk($page['document']['blocks'] ?? []);
+
+        return $this->json(['items' => $items]);
+    }
+
     #[Route('/%kant.admin_path%/menus', name: 'admin_menus', methods: ['GET'])]
     public function index(Request $request): Response
     {

src/Twig/PluginExtension.php

@@ -33,9 +33,19 @@ final class PluginExtension extends AbstractExtension
             new TwigFunction('kant_plugin_props', $this->props(...)),
             new TwigFunction('kant_plugin_media', $this->mediaItem(...)),
             new TwigFunction('kant_plugin_settings', $this->plugins->settingsOf(...)),
+            new TwigFunction('kant_media', $this->adminMedia(...)),
         ];
     }
 
+    /**
+     * Ein Bild fuer ein Bildfeld der Verwaltung - auch ein archiviertes: es ist noch gewaehlt und
+     * wird noch ausgeliefert, also soll es auch zu sehen sein.
+     */
+    public function adminMedia(string $id): ?array
+    {
+        return 1 === preg_match('/^[a-f0-9]{32}$/D', $id) ? $this->media->find($id) : null;
+    }
+
     /** Die geprüften Eigenschaften eines Bausteins - oder null, wenn sie nicht ins Schema passen. */
     public function props(array $block): ?array
     {

templates/admin/base.html.twig

@@ -18,7 +18,7 @@
        Importzeile sie kennen muss. Sie steht vor jedem Modul-Skript; spaeter geladen wirkt sie
        nicht mehr. #}
     <script type="importmap" nonce="{{ csp_nonce() }}">{"imports":{
-{%- for modul in ['editor-model', 'media', 'design-panel', 'button-design', 'color-control', 'rich-text', 'canvas-overlay', 'library-previews', 'preview-containers', 'page-picker', 'motion', 'slider', 'live-search'] %}
+{%- for modul in ['editor-model', 'media', 'design-panel', 'button-design', 'color-control', 'rich-text', 'canvas-overlay', 'library-previews', 'preview-containers', 'page-picker', 'motion', 'slider', 'live-search', 'icons'] %}
         "/assets/{{ modul }}.js": "/assets/{{ modul }}.js?v={{ kant_version() }}"{{ loop.last ? '' : ',' }}
 {%- endfor %}
     }}</script>

templates/admin/content-picker.html.twig

@@ -1,5 +1,5 @@
 {% set selected = selected|default(null) %}
-<div class="content-picker" data-source="{{ path('admin_content_choices') }}" data-type="{{ type|default('') }}" data-parents="{{ parents|default(false) ? '1' : '0' }}"{% if valueKey|default('id') != 'id' %} data-value="{{ valueKey }}"{% endif %}>
+<div class="content-picker" data-source="{{ path('admin_content_choices') }}" data-type="{{ type|default('') }}" data-parents="{{ parents|default(false) ? '1' : '0' }}"{% if valueKey|default('id') != 'id' %} data-value="{{ valueKey }}"{% endif %}{% if free|default(false) %} data-free="1"{% endif %}>
     <label for="{{ id }}">{{ label|default('Seite suchen') }}</label>
     <div class="picker-input">
         <input id="{{ id }}" type="search" autocomplete="off" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="{{ id }}-results" placeholder="Titel oder Adresse suchen …" value="{{ selected ? selected.title ~ ' (/' ~ selected.path ~ ')' : '' }}">

templates/admin/content-results.html.twig

@@ -53,8 +53,7 @@
                                 <p class="field-help">Nicht indexierte Seiten erscheinen auch nicht in der Sitemap.</p>
                             </div>
                             <div>
-                                <label for="og-{{ page.id }}">Vorschaubild beim Teilen</label>
-                                <input id="og-{{ page.id }}" name="ogMediaId" maxlength="32" value="{{ page.og_media_id }}" placeholder="ID aus der Mediathek">
+                                {% include 'admin/media-field.html.twig' with {id: 'og-' ~ page.id, name: 'ogMediaId', label: 'Vorschaubild beim Teilen', value: page.og_media_id|default(''), help: 'Erscheint, wenn jemand die Seite in sozialen Netzen oder Messengern teilt.'} only %}
                             </div>
                             {% if page.type == 'post' %}
                             <div>
@@ -67,16 +66,15 @@
                             </div>
                             <div>
                                 <label for="categories-{{ page.id }}">Kategorien</label>
-                                <input id="categories-{{ page.id }}" name="categories" value="{{ page.terms.category }}" placeholder="Projekte, Referenzen">
+                                <input id="categories-{{ page.id }}" name="categories" value="{{ page.terms.category }}" placeholder="Projekte, Referenzen" data-term-input="{{ termNames.category|default([])|json_encode|e('html_attr') }}">
                             </div>
                             <div>
                                 <label for="tags-{{ page.id }}">Schlagwörter</label>
-                                <input id="tags-{{ page.id }}" name="tags" value="{{ page.terms.tag }}" placeholder="WordPress, Migration">
+                                <input id="tags-{{ page.id }}" name="tags" value="{{ page.terms.tag }}" placeholder="WordPress, Migration" data-term-input="{{ termNames.tag|default([])|json_encode|e('html_attr') }}">
                                 <p class="field-help">Mehrere durch Komma trennen. Unbekannte Namen werden angelegt.</p>
                             </div>
                             <div>
-                                <label for="media-{{ page.id }}">Beitragsbild</label>
-                                <input id="media-{{ page.id }}" name="featuredMediaId" maxlength="32" value="{{ page.featured_media_id }}" placeholder="ID aus der Mediathek">
+                                {% include 'admin/media-field.html.twig' with {id: 'media-' ~ page.id, name: 'featuredMediaId', label: 'Beitragsbild', value: page.featured_media_id|default(''), help: 'Erscheint in Beitragslisten und im Feed.'} only %}
                             </div>
                             <div>
                                 <label for="excerpt-{{ page.id }}">Auszug</label>

templates/admin/forms.html.twig

@@ -2,7 +2,7 @@
 {% set nav = 'forms' %}
 {# Die Vorschau zeichnet den Absendeknopf mit dem Standardbutton der Website - dafuer braucht die
    Seite dessen Stylesheet, genau wie die Designseite. #}
-{% block styles %}<link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}">{% endblock %}
+{% block styles %}<link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/media-dialog.css?v={{ kant_version() }}">{% endblock %}
 {% block scripts %}<script type="module" src="/assets/form-editor.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block title %}Formulare{% endblock %}
 {% block heading %}Formulare{% endblock %}
@@ -105,7 +105,7 @@
         {% else %}
         <div class="card-head">
             <h2>{{ form.name }} <span class="count">{{ form.fields|length }} {{ form.fields|length == 1 ? 'Feld' : 'Felder' }}</span></h2>
-            <span class="muted">Im Editor als Formularblock mit der Adresse <code>{{ form.slug }}</code></span>
+            <span class="muted">Im Editor über den Formularblock wählbar · Adresse <code>{{ form.slug }}</code></span>
         </div>
         {% endif %}
         <div class="card-body form-editor">
@@ -120,7 +120,7 @@
                     <div>
                         <label for="slug-new">Adresse</label>
                         <input id="slug-new" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" required placeholder="kontakt">
-                        <p class="field-help">Wird im Formularblock eingetragen. Kleinbuchstaben, Ziffern, Bindestrich.</p>
+                        <p class="field-help">Kurzname des Formulars, etwa kontakt. Kleinbuchstaben, Ziffern, Bindestrich. Im Editor wird das Formular dann aus einer Liste gewählt.</p>
                     </div>
                     {% endif %}
                     <div>

templates/admin/media-field.html.twig

@@ -0,0 +1,17 @@
+{# Ein Bild aus der Mediathek als Formularfeld: Vorschau, Wählen oder Hochladen im Dialog,
+   Entfernen. Die Kennung steht nur im versteckten Feld - niemand soll sie abtippen müssen.
+   Erwartet: id, name, label, value, help (optional). #}
+{% set item = value ? kant_media(value) : null %}
+<div class="media-field" data-media-field role="group" aria-labelledby="{{ id }}-label">
+    <span class="media-field-label" id="{{ id }}-label">{{ label }}</span>
+    <input type="hidden" id="{{ id }}" name="{{ name }}" value="{{ value }}">
+    <div class="media-field-current">
+        <img class="media-field-thumb" alt="" width="96" height="64"{% if item %} src="{{ (item.variants|first).src }}"{% else %} hidden{% endif %}>
+        <span class="media-field-name" aria-live="polite">{{ item ? item.title : (value ? 'Bild nicht gefunden' : 'Kein Bild gewählt') }}</span>
+    </div>
+    <div class="media-field-actions">
+        <button type="button" class="secondary" data-media-choose>{{ value ? 'Anderes Bild wählen' : 'Bild wählen oder hochladen' }}</button>
+        <button type="button" class="text-button danger-text" data-media-remove{{ value ? '' : ' hidden' }}>Entfernen</button>
+    </div>
+    {% if help|default('') %}<p class="field-help">{{ help }}</p>{% endif %}
+</div>

templates/admin/menu-entry.html.twig

@@ -2,15 +2,18 @@
     <input type="hidden" data-key="position" name="items[{{ n }}][position]" value="{{ n }}">
     <input type="hidden" data-key="level" name="items[{{ n }}][level]" value="{{ row.level }}">
     <input type="hidden" data-key="type" name="items[{{ n }}][type]" value="{{ row.type }}">
+    {# Der Ziehknopf steht neben der Zusammenfassung, nicht in ihr: ein Knopf in einem Knopf ist
+       für Screenreader und Tastatur nicht bedienbar (axe: nested-interactive). #}
+    <button class="menu-drag-handle" type="button" data-menu-drag aria-label="{{ row.label }} verschieben" title="Ziehen · Pfeiltasten ändern Reihenfolge und Ebene"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="currentColor"><circle cx="8" cy="5" r="1.6"/><circle cx="16" cy="5" r="1.6"/><circle cx="8" cy="12" r="1.6"/><circle cx="16" cy="12" r="1.6"/><circle cx="8" cy="19" r="1.6"/><circle cx="16" cy="19" r="1.6"/></svg></button>
     <details>
-        <summary><button class="menu-drag-handle" type="button" data-menu-drag aria-label="{{ row.label }} verschieben" title="Ziehen · Pfeiltasten ändern Reihenfolge und Ebene"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="currentColor"><circle cx="8" cy="5" r="1.6"/><circle cx="16" cy="5" r="1.6"/><circle cx="8" cy="12" r="1.6"/><circle cx="16" cy="12" r="1.6"/><circle cx="8" cy="19" r="1.6"/><circle cx="16" cy="19" r="1.6"/></svg></button><strong class="menu-entry-title">{{ row.label }}</strong><span class="menu-entry-kind">{{ row.type == 'page' ? 'Seitenlink' : 'Eigener Link' }}</span><svg class="menu-chevron" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></summary>
+        <summary><strong class="menu-entry-title">{{ row.label }}</strong><span class="menu-entry-kind">{{ row.type == 'page' ? 'Seitenlink' : 'Eigener Link' }}</span><svg class="menu-chevron" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg></summary>
         <div class="menu-entry-fields">
             <label for="menu-label-{{ n }}">Beschriftung</label><input id="menu-label-{{ n }}" data-key="label" name="items[{{ n }}][label]" maxlength="80" required value="{{ row.label }}">
             {% if row.type == 'page' %}
                 {% include 'admin/content-picker.html.twig' with {id: 'menu-target-' ~ n, name: 'items[' ~ n ~ '][pageId]', label: 'Verknüpfter Inhalt', selected: row.page} %}
                 <label for="menu-anchor-{{ n }}">Sprungziel (optional)</label><input id="menu-anchor-{{ n }}" data-key="anchor" name="items[{{ n }}][anchor]" maxlength="65" value="{{ row.anchor }}" placeholder="kontakt">
             {% else %}
-                <label for="menu-url-{{ n }}">Adresse</label><input id="menu-url-{{ n }}" data-key="url" name="items[{{ n }}][url]" maxlength="2048" required value="{{ row.url }}" placeholder="https://… oder /kontakt">
+                <label for="menu-url-{{ n }}">Adresse</label><div class="link-field" data-link-field><input id="menu-url-{{ n }}" data-key="url" data-link-input name="items[{{ n }}][url]" maxlength="2048" required value="{{ row.url }}" placeholder="https://… oder /kontakt"></div>
             {% endif %}
             <label class="check-label" for="menu-newTab-{{ n }}"><input id="menu-newTab-{{ n }}" type="checkbox" data-key="newTab" name="items[{{ n }}][newTab]" value="1"{{ row.newTab|default(false) ? ' checked' : '' }}> In neuem Tab öffnen</label>
             <div class="menu-icon-fields"><div><label for="menu-icon-{{ n }}">Icon</label><select id="menu-icon-{{ n }}" data-key="icon" name="items[{{ n }}][icon]"><option value="">Kein Icon</option>{% for icon in menuIcons %}<option value="{{ icon }}"{{ row.icon|default('') == icon ? ' selected' : '' }}>{{ icon }}</option>{% endfor %}</select></div><div><label for="menu-iconPosition-{{ n }}">Icon-Position</label><select id="menu-iconPosition-{{ n }}" data-key="iconPosition" name="items[{{ n }}][iconPosition]"><option value="before"{{ row.iconPosition|default('before') == 'before' ? ' selected' : '' }}>Vor dem Text</option><option value="after"{{ row.iconPosition|default('before') == 'after' ? ' selected' : '' }}>Nach dem Text</option></select></div></div>

templates/admin/menus.html.twig

@@ -3,6 +3,7 @@
 {% block title %}Menüs{% endblock %}
 {% block heading %}Menüs{% endblock %}
 {% block lead %}Inhalte suchen und hinzufügen. Rechts bestimmst du Beschriftung, Reihenfolge und Unterpunkte.{% endblock %}
+{% block styles %}<link rel="stylesheet" href="/assets/media-dialog.css?v={{ kant_version() }}">{% endblock %}
 {% block scripts %}<script type="module" src="/assets/menu-editor.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block content %}
 {% include 'admin/menu-icons.html.twig' %}
@@ -16,7 +17,7 @@
         </section>
         <details class="card"><summary>Eigener Link</summary><div class="card-body">
             <label for="link-label">Beschriftung</label><input id="link-label" maxlength="80" placeholder="Kontakt">
-            <label for="link-url">Adresse</label><input id="link-url" maxlength="2048" placeholder="https://… oder /kontakt">
+            <label for="link-url">Adresse</label><div class="link-field" data-link-field><input id="link-url" maxlength="2048" placeholder="https://… oder /kontakt" data-link-input></div>
             <p class="field-help">Auch mailto: und tel: sind möglich.</p>
             <label class="check-label" for="link-new-tab"><input id="link-new-tab" type="checkbox"> In neuem Tab öffnen</label>
             <button type="button" class="secondary" id="menu-add-url">Link hinzufügen</button>

templates/admin/pages.html.twig

@@ -4,7 +4,8 @@
 {% set singular = contentType == 'post' ? 'Beitrag' : 'Seite' %}
 {% block title %}{{ plural }}{% endblock %}
 {% block heading %}{{ plural }}{% endblock %}
-{% block scripts %}<script type="module" src="/assets/live-search.js?v={{ kant_version() }}"></script>{% endblock %}
+{% block styles %}<link rel="stylesheet" href="/assets/media-dialog.css?v={{ kant_version() }}">{% endblock %}
+{% block scripts %}<script type="module" src="/assets/live-search.js?v={{ kant_version() }}"></script><script type="module" src="/assets/media-field.js?v={{ kant_version() }}"></script><script type="module" src="/assets/term-chips.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block lead %}{{ plural }} suchen, bearbeiten und veröffentlichen. Entwürfe bleiben bis zur Veröffentlichung privat.{% endblock %}
 {% block content %}
 

templates/admin/plugins.html.twig

@@ -2,21 +2,25 @@
 {% set nav = 'plugins' %}
 {% block title %}Plugins{% endblock %}
 {% block heading %}Plugins{% endblock %}
+{% block styles %}<link rel="stylesheet" href="/assets/media-dialog.css?v={{ kant_version() }}">{% endblock %}
+{% block scripts %}<script type="module" src="/assets/media-field.js?v={{ kant_version() }}"></script><script type="module" src="/assets/link-field.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block lead %}Erweiterungen bringen eigene Bausteine, Vorlagen und Adressen mit. Sie liegen als Ordner unter <code>plugins/</code>; hier schaltest du sie ein und aus und stellst sie ein. Ein ausgeschaltetes Plugin lässt seine Bausteine in den Seiten stehen, zeigt sie aber nicht mehr.{% endblock %}
 
 {# Ein Feld aus dem Schema eines Plugins - dieselben sieben Arten wie im Editor. #}
 {% macro feld(plugin, key, schema, value) %}
 {% set id = 'plugin-' ~ plugin ~ '-' ~ key %}
 {% set name = 'settings[' ~ key ~ ']' %}
-{% if schema.kind == 'boolean' %}
+{% if schema.kind == 'media' %}
+<div>{% include 'admin/media-field.html.twig' with {id: id, name: name, label: schema.label, value: value|default(''), help: schema.help|default('')} only %}</div>
+{% elseif schema.kind == 'boolean' %}
 <div><label class="check-label" for="{{ id }}"><input id="{{ id }}" type="checkbox" name="{{ name }}" value="1"{{ value ? ' checked' : '' }}> {{ schema.label }}</label>{% if schema.help %}<p class="field-help">{{ schema.help }}</p>{% endif %}</div>
 {% else %}
 <div>
     <label for="{{ id }}">{{ schema.label }}</label>
     {% if schema.kind == 'textarea' %}<textarea id="{{ id }}" name="{{ name }}" rows="3" maxlength="{{ schema.maxLength }}">{{ value }}</textarea>
     {% elseif schema.kind == 'select' %}<select id="{{ id }}" name="{{ name }}">{% for wert, text in schema.choices %}<option value="{{ wert }}"{{ value == wert ? ' selected' : '' }}>{{ text }}</option>{% endfor %}</select>
+    {% elseif schema.kind == 'url' %}<div class="link-field" data-link-field><input id="{{ id }}" name="{{ name }}" value="{{ value }}" maxlength="{{ schema.maxLength }}" placeholder="/kontakt oder https://…" data-link-input></div>
     {% elseif schema.kind == 'number' %}<input id="{{ id }}" name="{{ name }}" type="number" step="any" min="{{ schema.min }}" max="{{ schema.max }}" value="{{ value }}">
-    {% elseif schema.kind == 'media' %}<input id="{{ id }}" name="{{ name }}" value="{{ value }}" placeholder="Kennung aus der Mediathek" pattern="[a-f0-9]{32}">
     {% else %}<input id="{{ id }}" name="{{ name }}" value="{{ value }}" maxlength="{{ schema.maxLength }}">{% endif %}
     {% if schema.help %}<p class="field-help">{{ schema.help }}</p>{% endif %}
 </div>

templates/admin/settings.html.twig

@@ -292,9 +292,8 @@
                 <input id="from" name="from" maxlength="400" required placeholder="alte-seite">
             </div>
             <div>
-                <label for="to">Neue Adresse</label>
-                <input id="to" name="to" maxlength="400" placeholder="leistungen/webdesign">
-                <p class="field-help">Bei 410 leer lassen.</p>
+                {% include 'admin/content-picker.html.twig' with {id: 'to', name: 'to', label: 'Neue Adresse', valueKey: 'path', free: true} only %}
+                <p class="field-help">Seite suchen und wählen – oder einen anderen Pfad eintippen, etwa kategorie/projekte. Bei 410 leer lassen.</p>
             </div>
             <div>
                 <label for="status">Art</label>

templates/blocks/block.html.twig

@@ -26,7 +26,13 @@
     {% 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 class="button-arrow" aria-hidden="true">{% include 'blocks/icon.html.twig' with {name: 'arrow-up-right'} only %}</span></a>
+    {# Schema v25: Symbol wählbar. Ohne Angabe der Pfeil wie bisher; er behält die Klasse
+       button-arrow, damit eigenes CSS älterer Websites (ausblenden, drehen) weiter greift. #}
+    {% set buttonIcon = props.icon|default('arrow-up-right') %}
+    {% set iconMarkup = '' %}
+    {% if buttonIcon != 'none' %}{% set iconMarkup %}<span class="button-icon{{ buttonIcon == 'arrow-up-right' ? ' button-arrow' }}" aria-hidden="true">{% include 'blocks/icon.html.twig' with {name: buttonIcon} only %}</span>{% endset %}{% endif %}
+    {% set iconFirst = props.iconPosition|default('end') == 'start' %}
+    <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 %}>{% if iconMarkup and iconFirst %}{{ iconMarkup }} {% endif %}{{ props.text }}{% if iconMarkup and not iconFirst %} {{ iconMarkup }}{% endif %}</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

@@ -19,6 +19,19 @@
     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'
+    'arrow-up-right': 'M6.5 17.5 17.5 6.5M8.5 6.5h9v9',
+    'arrow-down': 'M12 4v15.5m-6.5-6.5 6.5 6.5 6.5-6.5',
+    'chevron-right': 'm9 5.5 6.5 6.5L9 18.5',
+    calendar: 'M4 6h16v14H4Zm0 5h16M8 3.5v4m8-4v4',
+    chat: 'M4 5h16v11H9.5L5 19.5V16H4Z',
+    send: 'M21 3 10 14M21 3l-6.5 18-4.5-7-7-4.5Z',
+    download: 'M12 3.5v12m-5-5 5 5 5-5M4.5 20h15',
+    document: 'M6 3h8l4 4v14H6Zm8 0v4h4M9 12h6m-6 4h6',
+    play: 'M8 5.5v13l10-6.5Z',
+    search: 'M10.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm4.8 11.3L20 20',
+    heart: 'M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.4 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z',
+    info: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 8v5.5m0-9v.5',
+    plus: 'M12 5v14M5 12h14',
+    user: 'M12 11.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM4.5 20.5c0-3.9 3.4-6 7.5-6s7.5 2.1 7.5 6'
 } %}
 <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>

tests/CmsTest.php

@@ -187,7 +187,10 @@ final class CmsTest extends TestCase
         $bad = $base;
         $bad['blocks'][] = $base['blocks'][0];
         yield 'duplicate IDs' => [$bad];
-        foreach (['javascript:alert(1)', 'data:text/html,hi', '//evil.test', '/\\evil.test', "https://example.test/\nfoo"] as $url) {
+        // tel: und mailto: sind Linkziele, aber nur in sauberer Form: keine Buchstaben in der
+        // Nummer, eine echte Adresse, kein Weg aus dem Attribut.
+        foreach (['javascript:alert(1)', 'data:text/html,hi', '//evil.test', '/\\evil.test', "https://example.test/\nfoo",
+            'tel:ruf-mich-an', 'tel:+49 7229 6992826', 'mailto:keine-adresse', 'mailto:a@b.de?subject="x"', 'mailto:a@b.de?subject=<script>'] as $url) {
             $bad = $base;
             $bad['blocks'][0]['children'][3]['props']['href'] = $url;
             yield $url => [$bad];
@@ -243,6 +246,87 @@ final class CmsTest extends TestCase
         yield 'missing meaningful alt' => [$bad];
     }
 
+    /**
+     * Ein Knopf darf anrufen oder eine E-Mail öffnen - wie ein Menüeintrag oder ein Link im Text.
+     * Vorher war „Jetzt anrufen“ nur als Textlink im Knopf-Aussehen zu bauen. Eine Bildquelle
+     * bleibt dagegen bei Pfad und HTTPS.
+     */
+    public function testButtonsAndLinkedBlocksMayCallOrWrite(): void
+    {
+        $document = DemoContent::pages()['home'];
+        $ziele = ['tel:+4972296992826', 'mailto:info@huefner-gartenbau.de', 'mailto:info@huefner-gartenbau.de?subject=Bewerbung%3A%20Helfer'];
+        foreach ($ziele as $i => $ziel) {
+            $document['blocks'][0]['children'][3]['props']['href'] = $ziel;
+            $this->pages->saveDraft('page-1', $document, $i);
+        }
+        $id = $this->pages->saveDraft('page-1', $document, 3);
+        $this->pages->publish('page-1', $id, 4);
+        $html = $this->request('/')->getContent();
+        self::assertStringContainsString('href="mailto:info@huefner-gartenbau.de?subject=Bewerbung%3A%20Helfer"', (string) $html);
+
+        $bild = DemoContent::pages()['home'];
+        $bild['blocks'][0]['children'][] = ['id' => 'bild-tel', 'type' => 'image', 'props' => ['src' => 'tel:+4972296992826', 'alt' => 'x', 'decorative' => false, 'width' => 10, 'height' => 10]];
+        $this->expectException(InvalidDocument::class);
+        $this->pages->saveDraft('page-1', $bild, 5);
+    }
+
+    public function testTheButtonArrowTakesTheColourOfTheButtonText(): void
+    {
+        // Der Pfeil ist ein Symbol (block-icon) und bekam die Akzentfarbe: grün auf einem roten Knopf.
+        self::assertStringContainsString('.button-icon .block-icon{color:inherit}', (string) file_get_contents(__DIR__.'/../public/assets/site.css'));
+    }
+
+    /**
+     * Schema v25: Umut wollte Buttons mit Symbol und den festen Pfeil ändern können. Ohne Wahl
+     * bleibt alles wie bisher - der Pfeil mit der Klasse button-arrow, auf die eigenes CSS älterer
+     * Websites zielt (Hüfner blendet ihn so aus).
+     */
+    public function testAButtonCarriesTheChosenIconBeforeOrAfterItsTextOrNone(): void
+    {
+        $document = DemoContent::pages()['home'];
+        $button = $document['blocks'][0]['children'][3];
+        self::assertSame('button', $button['type']);
+        $id = $this->pages->saveDraft('page-1', $document, 0);
+        $this->pages->publish('page-1', $id, 1);
+        $html = (string) $this->request('/')->getContent();
+        self::assertMatchesRegularExpression('/<a id="'.$button['id'].'"[^>]*>[^<]+ <span class="button-icon button-arrow" aria-hidden="true"><svg class="block-icon"[^>]*><path d="M6\.5 17\.5/', $html, 'Ohne Wahl: der schräge Pfeil hinter dem Text.');
+
+        $document['schemaVersion'] = 25;
+        $document['blocks'][0]['children'][3]['props'] += ['icon' => 'phone', 'iconPosition' => 'start'];
+        $id = $this->pages->saveDraft('page-1', $document, 2);
+        $this->pages->publish('page-1', $id, 3);
+        $html = (string) $this->request('/')->getContent();
+        self::assertMatchesRegularExpression('/<a id="'.$button['id'].'"[^>]*><span class="button-icon" aria-hidden="true"><svg class="block-icon"[^>]*><path d="M6 3h4l2 5[^"]*"\/><\/svg>\s*<\/span> '.preg_quote($button['props']['text'], '/').'<\/a>/', $html, 'Telefon vor dem Text, ohne die Pfeil-Klasse.');
+
+        $document['blocks'][0]['children'][3]['props']['icon'] = 'none';
+        $id = $this->pages->saveDraft('page-1', $document, 4);
+        $this->pages->publish('page-1', $id, 5);
+        $html = (string) $this->request('/')->getContent();
+        self::assertMatchesRegularExpression('/<a id="'.$button['id'].'"[^>]*>'.preg_quote($button['props']['text'], '/').'<\/a>/', $html, 'Kein Symbol: nur der Text.');
+    }
+
+    /**
+     * @return iterable<string, array{string, mixed}>
+     */
+    public static function rejectedButtonIcons(): iterable
+    {
+        yield 'Symbol vor v25' => ['icon', 'phone', 24];
+        yield 'unbekanntes Symbol' => ['icon', 'whatsapp', 25];
+        yield 'Symbol ist kein Text' => ['icon', ['phone'], 25];
+        yield 'Stellung vor v25' => ['iconPosition', 'start', 24];
+        yield 'unbekannte Stellung' => ['iconPosition', 'middle', 25];
+    }
+
+    #[DataProvider('rejectedButtonIcons')]
+    public function testAButtonRejectsUnknownIconsAndOlderSchemas(string $key, mixed $value, int $version): void
+    {
+        $document = DemoContent::pages()['home'];
+        $document['schemaVersion'] = $version;
+        $document['blocks'][0]['children'][3]['props'][$key] = $value;
+        $this->expectException(InvalidDocument::class);
+        (new DocumentValidator())->validate($document);
+    }
+
     #[DataProvider('invalidDocuments')]
     public function testRejectsInvalidDocumentsBeforeWriting(array $document): void
     {
@@ -1516,6 +1600,16 @@ final class CmsTest extends TestCase
         self::assertSame('https://fonts.gstatic.com/s/lato/latein.woff2', $faces[0]['url']);
         self::assertStringContainsString('U+0131', $faces[0]['range']);
 
+        // Ein neuer Abruf ersetzt nur die Regeln der geholten Familien; andere Familien, deren
+        // Dateien noch im Ordner liegen, bleiben im Stylesheet.
+        $vorher = "/* latin */\n@font-face{font-family:'Lato';font-weight:400;src:url(/assets/fonts/lato-400-latin.woff2)}\n"
+            ."/* latin */\n@font-face{font-family:'DM Sans';font-weight:400;src:url(/assets/fonts/alt.woff2)}\n";
+        $neu = $fonts->combine($vorher, ["/* latin */\n@font-face{font-family:'DM Sans';font-weight:400;src:url(/assets/fonts/dm-sans-400-latin.woff2)}"], ['DM Sans']);
+        self::assertStringContainsString('lato-400-latin.woff2', $neu);
+        self::assertStringContainsString('dm-sans-400-latin.woff2', $neu);
+        self::assertStringNotContainsString('alt.woff2', $neu);
+        self::assertSame(2, substr_count($neu, '@font-face'));
+
         // Ohne heruntergeladene Dateien bleibt es bei der Ersatzschrift - verlinkt wird Google
         // nie, denn das gäbe die IP jedes Besuchers an einen Dritten weiter.
         $theme = new Theme($this->db);
@@ -1547,6 +1641,11 @@ final class CmsTest extends TestCase
             '/assets/fonts/lato-700-latin.woff2',
             '/assets/fonts/lato-900-latin.woff2',
         ], $fonts->preload($theme->load()));
+
+        // Eine variable Schrift ist eine Datei für alle Schnitte: das Stylesheet nennt sie einmal
+        // mit Gewichtsbereich, und vorgeladen wird nur diese eine Datei statt dreimal dieselbe.
+        file_put_contents($this->path.'-fonts/fonts.css', "@font-face{font-family:'Lato';font-weight:400 900;src:url(/assets/fonts/lato-400-latin.woff2) format('woff2')}");
+        self::assertSame(['/assets/fonts/lato-400-latin.woff2'], $fonts->preload($theme->load()));
     }
 
     public function testTheStylesheetsGoOutAsOneFileWithoutComments(): void
@@ -3138,6 +3237,9 @@ final class CmsTest extends TestCase
 & .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}'];
+        // Ein Pseudo-Element braucht content: leer fuer Striche und Verlaeufe, ein Zeichen fuer ein Wasserzeichen.
+        yield 'empty content' => ["&::after { content: ''; height: 2px }", "#b1::after{content:'';height:2px}"];
+        yield 'short content' => ['&::before { content: "K" }', '#b1::before{content:"K"}'];
     }
 
     #[DataProvider('ownCssCases')]
@@ -3161,6 +3263,9 @@ display: flex', '#b1{display:flex;color:red}'];
         yield 'old expression syntax' => ['color: expression(alert(1))'];
         yield 'no value' => ['color'];
         yield 'nonsense property' => ['co lor: red'];
+        yield 'content leaving the style tag' => ['content: "</style><script>"'];
+        yield 'content with a second quote' => ["content: 'a' 'b'"];
+        yield 'quotes outside content' => ["font-family: 'Evil'"];
     }
 
     #[DataProvider('refusedOwnCss')]

tests/EditorSecurityTest.php

@@ -9,6 +9,7 @@ use App\Content\MediaLibrary;
 use App\Content\MenuRepository;
 use App\Content\PageRepository;
 use App\Content\PartialRepository;
+use App\Content\PostRepository;
 use App\Content\SiteSettings;
 use App\Content\Theme;
 use App\Domain\InvalidForm;
@@ -268,6 +269,35 @@ final class EditorSecurityTest extends WebTestCase
         }
     }
 
+    public function testImageSettingsOfAPostArePickedFromTheLibraryNotTypedAsAnId(): void
+    {
+        // Umut: „nicht dein ernst? ID aus Mediathek? schöne auswahl rein! auch bei Beitragsbild"
+        $client = $this->login('editor');
+        $pages = new PageRepository($this->db, new DocumentValidator(), new SiteSettings($this->db, new MediaLibrary($this->db, $this->path.'-media')));
+        $id = $pages->createPage('mit-bild', null, 'post', DemoContent::pages()['home']);
+        $media = str_repeat('c', 32);
+        $this->db->insert('media', ['id' => $media, 'title' => 'Klassenzimmer', 'alt' => '', 'variants' => json_encode([['src' => '/media/'.$media.'/480', 'width' => 480, 'height' => 320, 'bytes' => 1]]), 'archived' => 0, 'version' => 1, 'created_at' => gmdate('Y-m-d H:i:s')]);
+        $this->db->executeStatement('UPDATE page SET featured_media_id = ? WHERE id = ?', [$media, $id]);
+
+        $crawler = $client->request('GET', '/admin/posts');
+        self::assertResponseIsSuccessful();
+        self::assertStringNotContainsString('ID aus der Mediathek', $client->getResponse()->getContent());
+        self::assertCount(1, $crawler->filter('script[src^="/assets/media-field.js"]'));
+        // Das gewählte Beitragsbild: Kennung versteckt, Vorschau und Titel sichtbar.
+        $featured = $crawler->filter('input[name="featuredMediaId"]')->closest('[data-media-field]');
+        self::assertCount(1, $featured);
+        self::assertSame('hidden', $featured->filter('input[name="featuredMediaId"]')->attr('type'));
+        self::assertSame($media, $featured->filter('input[name="featuredMediaId"]')->attr('value'));
+        self::assertSame('/media/'.$media.'/480', $featured->filter('img')->attr('src'));
+        self::assertStringContainsString('Klassenzimmer', $featured->text());
+        self::assertStringContainsString('Anderes Bild wählen', $featured->text());
+        // Ohne Vorschaubild: Wählen statt Kennung eintippen.
+        $og = $crawler->filter('input[name="ogMediaId"]')->closest('[data-media-field]');
+        self::assertCount(1, $og);
+        self::assertStringContainsString('Bild wählen oder hochladen', $og->text());
+        self::assertNull($og->filter('img')->attr('src'));
+    }
+
     public function testLiveSearchReturnsFilteredEscapedResultsWithTheSamePermissionsAsTheFullScreen(): void
     {
         $client = $this->login('editor');
@@ -653,6 +683,81 @@ final class EditorSecurityTest extends WebTestCase
         self::assertSame('Kontakt', $this->db->fetchOne('SELECT name FROM form'));
     }
 
+    public function testTheEditorPicksFormsSectionsAndTermsFromListsInsteadOfTypedAddresses(): void
+    {
+        // Was ein Baustein nur verknüpft, kommt als Liste Adresse => Name - der Editor macht
+        // daraus Auswahlfelder statt Textfelder für Adressen.
+        $media = new MediaLibrary($this->db, $this->path.'-media');
+        $pages = new PageRepository($this->db, new DocumentValidator(), new SiteSettings($this->db, $media));
+        (new FormRepository($this->db))->save('anfrage', 'Anfrage', [['name' => 'email', 'type' => 'email', 'label' => 'E-Mail', 'required' => true, 'help' => '', 'options' => []]], ['recipient' => 'info@example.com'], 0);
+        $band = DemoContent::starter('Werbeband');
+        $band['blocks'] = [['id' => 'band-text', 'type' => 'text', 'props' => ['text' => 'Aktion']]];
+        (new PartialRepository($this->db, new DocumentValidator()))->create('section', 'band', 'Werbeband', $band);
+        $post = $pages->createPage('ein-beitrag', null, 'post', DemoContent::pages()['home']);
+        (new PostRepository($this->db, $media, new SiteSettings($this->db, $media)))->saveMetadata($post, [], ['Projekte'], ['Umbau'], $pages->findForEditor($post)['version']);
+
+        $client = $this->login('editor');
+        $client->request('GET', '/admin/api/design');
+        self::assertResponseIsSuccessful();
+        $choices = json_decode($client->getResponse()->getContent(), true)['choices'];
+        self::assertSame(['anfrage' => 'Anfrage'], $choices['forms']);
+        self::assertSame(['band' => 'Werbeband'], $choices['sections']);
+        self::assertSame(['projekte' => 'Projekte'], $choices['categories']);
+        self::assertSame(['umbau' => 'Umbau'], $choices['tags']);
+    }
+
+    public function testMenuAnchorsAndPostTermsAreOfferedForChoosing(): void
+    {
+        $media = new MediaLibrary($this->db, $this->path.'-media');
+        $pages = new PageRepository($this->db, new DocumentValidator(), new SiteSettings($this->db, $media));
+        $document = DemoContent::starter('Leistungen');
+        $document['schemaVersion'] = 21;
+        $document['blocks'][] = ['id' => 'kontakt-sektion', 'type' => 'section', 'anchor' => 'kontakt', 'children' => [
+            ['id' => 'kontakt-titel', 'type' => 'heading', 'props' => ['text' => 'So erreichen Sie uns', 'level' => 2]],
+        ]];
+        $id = $pages->createPage('leistungen', null, 'page', $document);
+
+        // Die Sprungziele einer Seite, beschriftet mit ihrer Überschrift - nur für Rollen, die
+        // Menüs bearbeiten.
+        $client = $this->login('editor');
+        $client->request('GET', '/admin/api/sprungziele/'.$id);
+        self::assertResponseStatusCodeSame(403);
+        $client = $this->login('admin', $client);
+        $client->request('GET', '/admin/api/sprungziele/'.$id);
+        self::assertResponseIsSuccessful();
+        self::assertSame([['anchor' => 'kontakt', 'label' => 'So erreichen Sie uns (#kontakt)']], json_decode($client->getResponse()->getContent(), true)['items']);
+        $client->request('GET', '/admin/api/sprungziele/gibt-es-nicht');
+        self::assertResponseStatusCodeSame(404);
+
+        // Vorhandene Kategorien und Schlagwörter stehen am Feld, damit man sie wählt statt neu tippt.
+        $post = $pages->createPage('beitrag', null, 'post', DemoContent::pages()['home']);
+        (new PostRepository($this->db, $media, new SiteSettings($this->db, $media)))->saveMetadata($post, [], ['Projekte'], ['Umbau'], $pages->findForEditor($post)['version']);
+        $crawler = $client->request('GET', '/admin/posts');
+        self::assertSame(['Projekte'], json_decode($crawler->filter('input[name="categories"]')->attr('data-term-input'), true));
+        self::assertSame(['Umbau'], json_decode($crawler->filter('input[name="tags"]')->attr('data-term-input'), true));
+        self::assertCount(1, $crawler->filter('script[src^="/assets/term-chips.js"]'));
+    }
+
+    public function testPluginSettingsForLinksAndImagesAreChosenNotTyped(): void
+    {
+        // Das Feld einer Plugin-Einstellung, direkt aus dem Makro der Plugin-Seite: ein Link
+        // bleibt ein Textfeld mit Knöpfen daneben, ein Bild wird das Bildfeld der Mediathek.
+        self::bootKernel();
+        $twig = static::getContainer()->get('twig');
+        $render = static fn (array $schema, string $value): string => $twig->createTemplate(
+            "{% import 'admin/plugins.html.twig' as f %}{{ f.feld('probe', 'ziel', schema, value) }}",
+        )->render(['schema' => $schema, 'value' => $value]);
+
+        $link = $render(['kind' => 'url', 'label' => 'Ziel', 'maxLength' => 200, 'help' => ''], '/kontakt');
+        self::assertStringContainsString('data-link-field', $link);
+        self::assertMatchesRegularExpression('#<input id="plugin-probe-ziel" name="settings\[ziel\]" value="/kontakt"[^>]*data-link-input#', $link);
+
+        $bild = $render(['kind' => 'media', 'label' => 'Bild', 'help' => ''], '');
+        self::assertStringContainsString('data-media-field', $bild);
+        self::assertStringContainsString('<input type="hidden" id="plugin-probe-ziel" name="settings[ziel]" value="">', $bild);
+        self::assertStringNotContainsString('Kennung aus der Mediathek', $bild);
+    }
+
     public function testStylePresetsNeedAnEditorRoleACsrfTokenAndAValidStyle(): void
     {
         $client = $this->login('editor');

tests/editor-model.test.mjs

@@ -642,3 +642,23 @@ test('registered plugin blocks get labels, defaults, container rules and presets
   assert.equal(pluginDefinition(bild), null);
   assert.equal(isContainer(galerie), false);
 });
+
+test('a loaded document is raised to the schema its blocks and properties need', async () => {
+  const { repairSchema } = await import('../public/assets/editor-model.js');
+  // So stand der Kopfbereich von kant-it.de da: Hamburger-Umschaltung bei Fassung 19.
+  const header = { schemaVersion: 19, title: 'Kopf', description: '', blocks: [
+    { id: 's', type: 'section', anchor: 'oben', children: [{ id: 'm', type: 'menu', props: { slot: 'header', collapse: 'tablet' } }] },
+  ] };
+  assert.equal(repairSchema(header).schemaVersion, 22);
+  // Nichts Neues darin: die Fassung bleibt - auch die Umstellung auf formatierten Text (12)
+  // kommt nie von allein.
+  const plain = { schemaVersion: 5, title: 'Alt', description: '', blocks: [{ id: 't', type: 'text', props: { text: 'a < b' } }] };
+  assert.equal(repairSchema(plain).schemaVersion, 5);
+  const faq = { schemaVersion: 10, title: 'F', description: '', blocks: [{ id: 'a', type: 'accordion', props: { faq: true }, children: [] }] };
+  assert.equal(repairSchema(faq).schemaVersion, 23);
+  // Ein Button mit gewähltem Symbol braucht v25; ohne Symbol bleibt er bei seiner Fassung.
+  const symbol = { schemaVersion: 24, title: 'S', description: '', blocks: [{ id: 'b', type: 'button', props: { text: 'Anrufen', href: 'tel:+49', icon: 'phone' } }] };
+  assert.equal(repairSchema(symbol).schemaVersion, 25);
+  const pfeil = { schemaVersion: 24, title: 'P', description: '', blocks: [{ id: 'b', type: 'button', props: { text: 'Mehr', href: '/' } }] };
+  assert.equal(repairSchema(pfeil).schemaVersion, 24);
+});

tests/icons.test.mjs

@@ -0,0 +1,29 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+import { ICON_PATHS, ICON_LABELS, BUTTON_ICON_GROUPS, ALL_ICON_GROUPS } from '../public/assets/icons.js';
+
+const read = path => readFileSync(new URL(path, import.meta.url), 'utf8');
+
+test('the editor draws the same icons the website renders and the server allows', () => {
+  // Drei Listen, ein Satz: die Zeichnungen der Website (Twig), die Vorschau im Editor und die
+  // erlaubten Namen im Validator. Weicht eine ab, zeigt die Auswahl ein anderes Symbol als die
+  // Seite - oder bietet eins an, das der Server beim Speichern ablehnt.
+  const twig = read('../templates/blocks/icon.html.twig');
+  const website = Object.fromEntries([...twig.matchAll(/^\s{4}'?([a-z-]+)'?: '([^']+)',?$/gm)].map(([, name, path]) => [name, path]));
+  assert.deepEqual(ICON_PATHS, website);
+  const validator = read('../src/Content/DocumentValidator.php');
+  const allowed = [...validator.match(/public const ICONS = \[([^\]]+)\]/)[1].matchAll(/'([a-z-]+)'/g)].map(([, name]) => name);
+  assert.deepEqual(Object.keys(ICON_PATHS).sort(), [...allowed].sort());
+});
+
+test('every icon has a German name and the pickers offer each icon exactly once', () => {
+  assert.deepEqual(Object.keys(ICON_LABELS).sort(), Object.keys(ICON_PATHS).sort());
+  const button = BUTTON_ICON_GROUPS.flatMap(([, names]) => names);
+  assert.equal(new Set(button).size, button.length, 'Ein Symbol steht doppelt in der Button-Auswahl.');
+  for (const name of button) assert.ok(ICON_PATHS[name], `${name} hat keine Zeichnung.`);
+  // Der bisherige Pfeil steht vorn: er ist das, was ein Button ohne eigene Wahl trägt.
+  assert.equal(button[0], 'arrow-up-right');
+  const all = ALL_ICON_GROUPS.flatMap(([, names]) => names);
+  assert.deepEqual([...all].sort(), Object.keys(ICON_PATHS).sort(), 'Symbol und Symbolkarte bieten jedes Symbol genau einmal an.');
+});