Release 1.22.4

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

.claude/launch.json

@@ -25,9 +25,9 @@
       "runtimeArgs": [
         "-NoProfile",
         "-Command",
-        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/browser-tests/pilot-1d19ca1bb9ca/pilot.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantit-media'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8091 -t public bin/dev-router.php"
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/browser-tests/pilot-a1c96276da5c/pilot.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantit-media'; & C:/php84/php.exe -d upload_max_filesize=24M -d post_max_size=26M -d memory_limit=256M -S 127.0.0.1:8092 -t public bin/dev-router.php"
       ],
-      "port": 8091
+      "port": 8092
     },
     {
       "name": "elektro-bernhard",
@@ -79,6 +79,26 @@
       ],
       "port": 8094
     },
+    {
+      "name": "ebsolar",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/ebsolar.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/ebsolar-media'; $env:SITE_ORIGIN='http://127.0.0.1:8096'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8096 -t public bin/dev-router.php"
+      ],
+      "port": 8096
+    },
+    {
+      "name": "ebsolar-prod",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/ebsolar.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/ebsolar-media'; $env:SITE_ORIGIN='http://127.0.0.1:8097'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8097 -t public bin/dev-router.php"
+      ],
+      "port": 8097
+    },
     {
       "name": "immobilien-deeg-prod",
       "runtimeExecutable": "powershell",
@@ -88,6 +108,26 @@
         "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/immobilien-deeg.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/immobilien-deeg-media'; $env:SITE_ORIGIN='http://127.0.0.1:8095'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8095 -t public bin/dev-router.php"
       ],
       "port": 8095
+    },
+    {
+      "name": "kantarci-immobilien",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $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:8098'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8098 -t public bin/dev-router.php"
+      ],
+      "port": 8098
+    },
+    {
+      "name": "kantarci-immobilien-prod",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$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
     }
   ]
 }

README.md

@@ -284,7 +284,7 @@ Unter Linux/macOS `npm` und `npx` ohne `.cmd`; in CI `npx playwright install --w
 
 Die Verwaltung liegt unter `/admin`. `php bin/console cms:admin:path meine-verwaltung` legt sie auf eine andere Adresse: der Wert landet in `.env`, gilt für Routen, Firewall und Schutzkopfzeilen, und wird in der `robots.txt` bewusst nicht genannt. Ohne Argument zeigt der Befehl die aktuelle Adresse.
 
-Die öffentliche Adresse der Website steht als `SITE_ORIGIN` in `.env` – mit oder ohne `www`, so wie sie in Canonical, Sitemap, Feed und strukturierten Daten stehen soll. `php bin/console cms:site:origin https://www.meine-firma.de` prüft und schreibt sie; ohne Argument zeigt der Befehl die aktuelle. Die jeweils andere Schreibweise (`meine-firma.de` ↔ `www.meine-firma.de`) leitet die Anwendung selbst mit 301 auf die eingetragene um, mit Pfad und Abfrage, auch für die Verwaltung. Ein ganz anderer Host – die Vorschauadresse des Hosters, eine IP-Adresse, `localhost` – bleibt erreichbar, damit eine falsch eingetragene Adresse niemanden aussperrt; der Bildschirm „System“ zeigt dann, unter welcher Adresse die Verwaltung gerade läuft und welche eingetragen ist. HTTPS erzwingt die Anwendung nicht; dafür bleiben die drei Zeilen in `public/.htaccess`.
+Die öffentliche Adresse der Website steht als `SITE_ORIGIN` in `.env` – mit oder ohne `www`, so wie sie in Canonical, Sitemap, Feed und strukturierten Daten stehen soll. `php bin/console cms:site:origin https://www.meine-firma.de` prüft und schreibt sie; ohne Argument zeigt der Befehl die aktuelle. Dasselbe geht in der Verwaltung unter „System“, mit einem Link auf die andere Schreibweise. Dort wird vorher geprüft, ob die Website unter der neuen Adresse antwortet. Die jeweils andere Schreibweise (`meine-firma.de` ↔ `www.meine-firma.de`) leitet die Anwendung selbst mit 301 auf die eingetragene um, mit Pfad und Abfrage, auch für die Verwaltung. Ein ganz anderer Host – die Vorschauadresse des Hosters, eine IP-Adresse, `localhost` – bleibt erreichbar, damit eine falsch eingetragene Adresse niemanden aussperrt; der Bildschirm „System“ zeigt dann, unter welcher Adresse die Verwaltung gerade läuft und welche eingetragen ist. HTTPS erzwingt die Anwendung nicht; dafür bleiben die drei Zeilen in `public/.htaccess`.
 
 `composer format` formatiert PHP. `composer build` wärmt den Symfony-Produktionscache; öffentliche CSS-Dateien sind direkt auslieferbar, es ist kein Frontend-Bundler nötig. Bei Änderungen an `public/assets/design-tokens.json` einmal `npm.cmd run build:design` ausführen und die erzeugte CSS-Datei mitliefern; Node ist auf dem Hosting nicht erforderlich. Nach Änderungen an Produktionskonfiguration/Templates `php bin/console cache:clear --env=prod --no-debug` ausführen. Falls lokale Tests alte Templates verwenden, vor PHPUnit auch `php bin/console cache:clear --env=test --no-debug` ausführen.
 
@@ -377,6 +377,14 @@ Der Nachbau von maler-drews.com (Malermeister Axel Drews, Gernsbach) liegt in `v
 
 Der Onepager „DEEG – Immobilien & Hausverwaltung in Freudenstadt“ (Deeg Hausverwaltung und Immobilien GmbH) liegt in `var/immobilien-deeg.db` mit Medien in `var/immobilien-deeg-media`; die Startkonfiguration `immobilien-deeg` in `.claude/launch.json` nutzt Port 8094, `immobilien-deeg-prod` denselben Bestand im Produktionsmodus auf Port 8095 zum Messen. `scripts/seed-immobilien-deeg.php <Bilderordner>` baut Gestaltung, Kopf- und Fußbereich, Startseite, Impressum, Datenschutz, 404, Menü, Einstellungen und zwei Formulare auf – `kontakt` und `bewertung` (Bewertungsanfrage mit Auswahl Wohnung, Haus, Mehrfamilienhaus, Grundstück); `sh scripts/reset-immobilien-deeg.sh [Bilderordner]` (Standard `var/immobilien-deeg-assets`: Logo und zwei Architekturfotos aus dem gelieferten Paket) wirft die Installation weg und baut sie neu auf. Die Vorlage nutzt Arial, es gibt keine Schrift zu holen. Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts.
 
+### Sechste lokale Referenzwebsite: EB Solar
+
+Der Redesign-Entwurf von ebsolar.de (Elektro Bernhard Regenerative Energie GmbH, Baden-Baden) liegt in `var/ebsolar.db` mit Medien in `var/ebsolar-media`; die Startkonfiguration `ebsolar` in `.claude/launch.json` nutzt Port 8096, `ebsolar-prod` denselben Bestand im Produktionsmodus auf Port 8097 zum Messen. `scripts/seed-ebsolar.php <Bilderordner>` baut Gestaltung, Kopf- und Fußbereich, den Kontaktbereich als wiederverwendbare Sektion, Startseite, Projektübersicht, Solarcheck, Impressum, Datenschutz, 404, acht Projektbeiträge mit Galerie und Bildbetrachter, Menü, Einstellungen und zwei Formulare auf – `kontakt` und `solarcheck` (acht Schritte wie das Original auf ebsolar.de, die fünf Auswahlfragen als Bildkarten – gezeichnet und gerastert von `node scripts/build-ebsolar-options.mjs`); `sh scripts/reset-ebsolar.sh [Bilderordner]` (Standard `var/ebsolar-assets`: Logo, Favicon, Startbild, sechs Herstellerlogos, 31 Projektfotos und `projects.json` aus dem gelieferten Paket) wirft die Installation weg und baut sie neu auf. Die Vorlage nutzt Arial, es gibt keine Schrift zu holen. Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts.
+
+### Siebte lokale Referenzwebsite: KANTARCI Immobilien (Landingpage)
+
+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.
+
 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.21.2
+1.22.4

config/services.yaml

@@ -38,6 +38,9 @@ services:
     App\Content\MediaLibrary:
         arguments:
             $directory: '%env(projectdir:MEDIA_DIRECTORY)%'
+    App\Content\DocumentLibrary:
+        arguments:
+            $directory: '%env(projectdir:MEDIA_DIRECTORY)%'
     # Die Schriften liegen im oeffentlichen Ordner: sie sollen vom Webserver direkt ausgeliefert
     # werden, ohne PHP dazwischen - das ist der Punkt der Uebung.
     # Die Stellen, die wissen muessen, wie die Verwaltung heisst.
@@ -79,6 +82,11 @@ services:
             $projectDir: '%kernel.project_dir%'
             $adminPath: '%kant.admin_path%'
             $environment: '%kernel.environment%'
+    # Eigene kurze Zeitgrenzen statt des Download-Dienstes mit denen fuer Releasearchive.
+    App\Ops\OriginCheck:
+        arguments:
+            $secret: '%kernel.secret%'
+            $download: null
     App\Command\SiteOriginCommand:
         arguments:
             $projectDir: '%kernel.project_dir%'

docs/ARCHITECTURE.md

@@ -128,7 +128,7 @@ Umut wollte für die DEEG-Website „kein Kontaktformular weiteres, sondern so e
 
 **Anlass:** Umut: „URL sollte aus env kommen, www oder ohne, die Seite sollte dann darauf reagieren.“ Bis dahin stand die Umleitung auskommentiert in `public/.htaccess` und musste von Hand zur Einstellung `SITE_ORIGIN` passen (LIVEGANG, Punkt 3). Zwei Stellen für eine Entscheidung laufen auseinander – und dann nennt jede Seite in Canonical, Sitemap und Feed eine Adresse, die weiterleitet.
 
-**Entscheidung:** `SITE_ORIGIN` in `.env` ist die einzige Quelle. `CanonicalHostSubscriber` (`kernel.request`, Priorität 48, also vor Wartungszustand und Installer) vergleicht den Host der Anfrage mit dem von `SITE_ORIGIN` und schickt die jeweils andere Schreibweise – `example.de` ↔ `www.example.de` – mit 301 auf die eingetragene, mit Pfad und Abfrage, Schema und Port aus `SITE_ORIGIN`. Das gilt auch für die Verwaltung: ein Host, ein Sitzungscookie. Die Antwort trägt `Cache-Control: public, max-age=3600`, damit ein Browser die Umleitung behält, ohne dass eine Korrektur der Einstellung ein Jahr lang unsichtbar bliebe. Der www-Block in `.htaccess` ist weg; die Datei erklärt, wer es jetzt macht. `php bin/console cms:site:origin <adresse>` prüft (Schema, Host, kein Pfad) und schreibt die Einstellung, wie `cms:admin:path` es für die Verwaltung tut. Der Bildschirm „System“ zeigt die eingetragene Adresse, ihre Quelle und einen Hinweis, wenn die Verwaltung gerade unter einem anderen Host läuft.
+**Entscheidung:** `SITE_ORIGIN` in `.env` ist die einzige Quelle. `CanonicalHostSubscriber` (`kernel.request`, Priorität 48, also vor Wartungszustand und Installer) vergleicht den Host der Anfrage mit dem von `SITE_ORIGIN` und schickt die jeweils andere Schreibweise – `example.de` ↔ `www.example.de` – mit 301 auf die eingetragene, mit Pfad und Abfrage, Schema und Port aus `SITE_ORIGIN`. Das gilt auch für die Verwaltung: ein Host, ein Sitzungscookie. Die Antwort trägt `Cache-Control: public, max-age=3600`, damit ein Browser die Umleitung behält, ohne dass eine Korrektur der Einstellung ein Jahr lang unsichtbar bliebe. Der www-Block in `.htaccess` ist weg; die Datei erklärt, wer es jetzt macht. `php bin/console cms:site:origin <adresse>` prüft (Schema, Host, kein Pfad) und schreibt die Einstellung, wie `cms:admin:path` es für die Verwaltung tut. Der Bildschirm „System“ zeigt die eingetragene Adresse, ihre Quelle und einen Hinweis, wenn die Verwaltung gerade unter einem anderen Host läuft. Seit 1.21.8 lässt sie sich dort auch ändern, wie die „WordPress-Adresse“: Das Feld schreibt über `Environment::write` in `.env`, aber erst nachdem `OriginCheck` die Installation unter der neuen Adresse erreicht hat (`GET /.well-known/kantsites-origin` liefert einen HMAC aus `APP_SECRET`). Eine Umstellung auf www ohne DNS oder Zertifikat würde sonst jede Seite samt Verwaltung ins Leere leiten. „Trotzdem übernehmen“ erscheint erst nach einer Ablehnung. Kommt `SITE_ORIGIN` aus der Server-Umgebung, gibt es kein Feld.
 
 **Bewusst nicht:** ein fremder Host wird nicht umgeleitet. Die Vorschauadresse des Hosters, eine IP-Adresse, `localhost`, eine Subdomain – alles bleibt erreichbar, auch wenn `SITE_ORIGIN` etwas anderes nennt. Sonst sperrte eine falsch eingetragene Adresse jeden aus, samt der Verwaltung, die man bräuchte, um es zu bemerken. Nur lesende Anfragen (GET, HEAD) werden umgeleitet: ein 301 macht aus einem POST ein GET und verwirft die Eingabe. Und HTTPS erzwingt die Anwendung nicht: hinter einem Proxy sieht PHP oft nur `http`, ohne konfigurierte vertrauenswürdige Proxys wäre das eine Schleife. Die drei Zeilen dafür bleiben in `.htaccess`, wo der Webserver die Verbindung wirklich kennt.
 
@@ -1054,7 +1054,7 @@ Umut: „dann brauchen wir Favicon-Möglichkeit zum Festlegen“. Ein Favicon is
 
 Naheliegend wäre gewesen, die WebP-Varianten der Mediathek zu verwenden. Dagegen sprechen zwei Dinge: die kleinste Variante ist 480 px breit (für ein 32-px-Symbol zwei Größenordnungen zu viel), und ein Favicon ist **quadratisch** – ein breites Logo würde gestaucht oder zur Briefmarke.
 
-**Deshalb entstehen die Symboldateien beim Speichern der Einstellung, nicht beim Aufruf**: ein mittiger quadratischer Ausschnitt in 32 px (Reiter) und 180 px (Startbildschirm), als PNG, weil das jeder Browser liest. Schlägt das fehl, wird die Einstellung gar nicht erst gespeichert – ein Verweis auf ein Symbol, das es nicht gibt, wäre schlechter als das alte Symbol. Ausgeliefert werden sie unter `/favicon.png` und `/apple-touch-icon.png`, mit der Bildkennung als Version am Verweis, damit ein Wechsel im Browser ankommt.
+**Deshalb entstehen die Symboldateien beim Speichern der Einstellung, nicht beim Aufruf**: ein quadratischer Ausschnitt in 32 px (Reiter), 180 px (Startbildschirm) sowie 48 und 192 px (Google nimmt nur Vielfache von 48), als PNG, weil das jeder Browser liest. Schlägt das fehl, wird die Einstellung gar nicht erst gespeichert – ein Verweis auf ein Symbol, das es nicht gibt, wäre schlechter als das alte Symbol. Ausgeliefert werden sie unter `/favicon.png`, `/favicon-192.png`, `/favicon.ico` (48 px) und `/apple-touch-icon.png`, mit der Bildkennung als Version am Verweis, damit ein Wechsel im Browser ankommt. Auch `/favicon.svg` beantwortet die Anwendung: ohne eigenes Symbol das mitgelieferte Zeichen, mit eigenem ein 302 auf das 192er – als Datei in `public/` hätte der Webserver immer das mitgelieferte Zeichen ausgeliefert, und Suchmaschinen hätten es behalten.
 
 Nebenwirkung, die die Tests fanden: `SiteSettings` fragt die Datenbank jetzt auch aus der Nicht-gefunden-Seite heraus – und **vor** der Installation gibt es die Tabelle noch nicht. Eine gezielt gefangene `TableNotFoundException` liefert dort die Standardwerte; jeder andere Datenbankfehler bleibt ein Fehler.
 

docs/STATUS.md

@@ -1,5 +1,141 @@
 # Projektstatus
 
+## 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?“
+
+- Der Haken „Bilder vergrößerbar“ an der Galerie gilt jetzt für jedes Bild darin, das unter „Beim Klick“ nichts selbst gewählt hat. Das gilt auch für später hinzugefügte Bilder. Bisher schaltete er nur das Blättern im Popup ein, und jedes Bild musste einzeln auf „Bild vergrößern“ gestellt werden.
+- Eine eigene Wahl geht vor: „Nichts tun“ bleibt still, ein Link bleibt ein Link. „Nie eingestellt“ und „Nichts tun“ sind im Dokument unterscheidbar, weil der Editor `click` erst beim Ändern speichert. Bestehende Galerien ändern sich deshalb nur dort, wo der Haken gesetzt ist und ein Bild noch nie eingestellt wurde.
+- Der Editor zeigt bei einem solchen Bild „Bild vergrößern“ als aktuelle Wahl, nach derselben Regel wie die Vorlage (`galleryZoom` in `blocks/block.html.twig`).
+
+**Geprüft:** neuer Test `CmsTest::testAZoomableGalleryMakesEveryImageWithoutItsOwnChoiceZoomable` (ohne Wahl, „Nichts tun“, Link, Galerie ohne Haken), volle Kette vor dem Release.
+
+## PDFs in der Mediathek, als Linkziel und im Betrachter (22.09.2026)
+
+**Anlass:** Umut: „kann man aktuell PDFs hochladen und als Button verlinken? … und ein Inline PDF Viewer wie Bild-Popup“, danach: „ja setz um, einfacher Browser-Betrachter“.
+
+- **Hochladen:** Das Upload-Feld der Mediathek nimmt jetzt neben JPEG, PNG und WebP auch PDFs bis 20 MB an. Ob eine Datei ein PDF ist, entscheidet ihr Inhalt (`%PDF-` in den ersten 1024 Bytes), nicht die Endung. Die PDFs stehen in einer eigenen Tabelle `document` (Migration `20260917000100`) und nicht in `media`. Jede Bildauswahl erwartet dort Varianten mit Breite und Höhe. Die Datei liegt unverändert als `<id>.pdf` im Medienordner und geht deshalb mit jeder Sicherung mit. Die Mediathek zeigt die PDFs unter den Bildern, mit Titel und Archivieren.
+- **Ausliefern:** `/media/<id>.pdf` kommt mit `Content-Type: application/pdf`, `nosniff`, `inline` und dem Titel als Dateinamen, `X-Robots-Tag: noindex` und `frame-ancestors 'self'`: Einbetten darf es nur die eigene Website. Archivierte PDFs bleiben erreichbar, wie Bilder.
+- **Verlinken:** Jedes Linkziel (Button, Bild, Symbolkarte, CTA, Symbol) hat den Knopf „PDF aus Mediathek wählen“ mit einer Liste, Suche und Hochladen direkt im Dialog. Ins Feld kommt die Adresse `/media/<id>.pdf`, ein gewöhnlicher lokaler Pfad, also ohne neue Schemaversion.
+- **Betrachter:** `public/assets/lightbox.js` (dieselbe Datei wie der Bildbetrachter, damit eine Seite kein Skript mehr lädt) zeigt ein verlinktes PDF in einem `<dialog>` mit `<iframe>` und nutzt dafür den PDF-Betrachter des Browsers, dazu Herunterladen, „Im neuen Tab“ und Schließen. Wo der Browser keinen eingebauten Betrachter hat (`navigator.pdfViewerEnabled`) oder das Gerät ein Touchgerät ist, öffnet sich das PDF im neuen Tab: Android-Chrome hat keinen Betrachter, iOS-Safari zeigt im Rahmen nur die erste Seite. Ist „In neuem Tab öffnen“ gesetzt oder das Skript nicht geladen, bleibt es ein normaler Link. Skript und `frame-src 'self'` kommen nur auf Seiten, deren Dokumente (auch Kopf, Fuß, Sektionen und Fließtext) auf ein PDF der Mediathek zeigen.
+- **Grenzen:** Hochgeladene PDFs sind über ihre Adresse öffentlich. Kein PDF.js, also sieht der Betrachter je nach Browser anders aus. Chrome zeigt im Kopf des Betrachters die Kennung aus der Adresse, nicht den Titel. PDFs werden nicht gelöscht, nur archiviert.
+
+**Geprüft:** zwei neue Tests (`CmsTest::testAPdfFromTheLibraryIsALinkTargetAndOpensInTheViewer`, `EditorSecurityTest::testPdfsGoThroughTheMediaUploadAndTheEditorPicker`: Ablehnung von Nicht-PDFs, Kopfzeilen, 404, Skript und Richtlinie nur mit PDF-Link, Formular-Upload, API mit Token, Archiv). Im Browser mit der Pilotkopie: Klick auf den Button öffnet das zweiseitige PDF im Popup, Schließen gibt den Fokus an den Button zurück, bei 375 px mit Touch öffnet es einen neuen Tab. Der Auswahldialog im Editor ist nur per Syntaxprüfung geprüft, nicht im Browser. Dafür wäre eine Anmeldung nötig.
+
+## Siebte Installation: Landingpage „KANTARCI Immobilien – Mietanfrage“ (18.09.2026)
+
+**Anlass:** Umut: „neues Projekt wir brauchen eine einfache landingpage nach gleichem prinzip. einfache landingpage impressum und datenschutz notwendig? baus ein“ – dazu das Paket `KANTARCI-Immobilien-Landingpage.zip` (Next.js/Vinext für Cloudflare mit D1-Datenbank: Kopf, dunkler Hero, Werteleiste, Mietanfrage, Fuß, ein Banner als einziges Bild). Später: „Formular gefällt mir noch nicht kannst du ein multipage formular machen ggfls mit icon checkbox“ und die Anbieterdaten (Geschäftsführer Ridvan Kantarci, Ooser Hauptstr. 51, 76532 Baden-Baden, info@kantarci-immo.de).
+
+**Neu.** Datenbank `var/kantarci-immobilien.db`, Medien `var/kantarci-immobilien-media`, Bildquellen `var/kantarci-immobilien-assets` (das Banner, daraus zugeschnitten Logo, Hausmotiv und Seitensymbol, dazu `options/` mit 14 Bildkarten), Startkonfigurationen `kantarci-immobilien` (Port 8098, dev) und `kantarci-immobilien-prod` (Port 8099). `sh scripts/reset-kantarci-immobilien.sh` schneidet die Bilder zu (`scripts/build-kantarci-assets.php`, GD), zeichnet die Bildkarten (`node scripts/build-kantarci-options.mjs`, Chromium), migriert und baut mit `scripts/seed-kantarci-immobilien.php` Gestaltung, Kopf, Fuß, Startseite, Impressum, Datenschutz, 404, Einstellungen und das Formular `mietanfrage` auf. Schriften Arial und Georgia (System).
+
+- **Impressum und Datenschutz sind Pflicht:** geschäftlicher Auftritt (§ 5 DDG) und ein Formular mit personenbezogenen Daten (Art. 13 DSGVO). Offen und im Text als „NOCH ZU PRÜFEN“ markiert: Handelsregister, Telefonnummer, USt-IdNr., Erlaubnis nach § 34c GewO (nur bei Vermittlung/Verwaltung für Dritte), Urheber des Hausfotos, Hosting- und Mail-Auftragsverarbeiter, Löschfrist.
+- **Mietanfrage in drei Schritten** mit Zusammenfassung: Haushalt (Bildkarten Allein, Zu zweit, Familie mit Kindern, Wohngemeinschaft; Personenzahl nur bei den beiden letzten), Wohnwünsche (Zimmer als Bildkarten, Ausstattung als Mehrfachauswahl mit sechs Bildkarten, Einzug, Warmmiete, Objekt), Kontaktdaten. Der Einzug ist eine Auswahl statt eines Datums – der Formularbaukasten kennt kein Datumsfeld.
+- **E-Mail:** Die Vorlage nennt `immo@kantarci-immobilien.de`, die Domain existiert aber nicht (kein DNS, 18.09.2026). Überall steht jetzt `info@kantarci-immo.de` (MX vorhanden), auch als Empfänger der Anfrage.
+- **CMS-Lücken beim Aufbau:** eigenes CSS kennt kein `@media` – Raster, die am Telefon einspaltig werden sollen, laufen über `repeat(auto-fill,minmax(…))`. Verschachtelte Selektoren erlauben keine Umlaute, also auch kein `[data-label="Gewünschter Einzug"]` (Feld heißt deshalb „Einzugstermin“). Die Zusammenfassung ist selbst ein `.form-step`; wer die Schritte zweispaltig setzt, muss `.form-summary-body` über beide Spalten legen. `<small>` in einem Textbaustein wird entfernt. Die Fehlermeldung des Formulars duzt („Bitte prüfe …“), die Seite siezt.
+
+**Geprüft:** Aufbau per Reset-Skript fehlerfrei; Startseite, Impressum, Datenschutz 200, unbekannte Adresse 404; im Browser (1280 px und 375 px, kein seitliches Scrollen) alle drei Schritte, Bedingung Personenzahl, Zusammenfassung und Absenden – die Anfrage liegt vollständig in `form_submission`. Mailversand ist lokal nicht eingerichtet. Lighthouse und axe noch nicht gelaufen.
+
+## Adresse der Website in der Verwaltung (21.09.2026)
+
+**Anlass:** Umut: „ja bau die Einstellung in der Verwaltung ein sodass es in die env eingetragen wird und übernommen wird“ – mit oder ohne www wie die „WordPress-Adresse“, statt nur über `cms:site:origin` oder die `.env` von Hand.
+
+- **System → Diese Installation → Adresse** hat ein Feld „Adresse der Website“ und einen Link, der direkt auf die andere Schreibweise (mit/ohne www) umstellt. Gespeichert wird `SITE_ORIGIN` in `.env` über `Environment::write`. Das gilt ab der nächsten Anfrage, weil `%env()%` zur Laufzeit gelesen wird. Kommt `SITE_ORIGIN` aus der Server-Umgebung, gibt es kein Feld, und ein POST wird abgewiesen.
+- **Schutz vor dem Aussperren:** Vor dem Speichern fragt die Installation sich selbst unter der neuen Adresse an (`OriginCheck`, `GET /.well-known/kantsites-origin`). Zurückkommen muss ein HMAC aus `APP_SECRET`, den nur diese Installation kennt. Ohne DNS-Eintrag oder Zertifikat für www wird nichts geändert – sonst leitete die andere Schreibweise ins Leere, die Verwaltung eingeschlossen. Erst nach einer Ablehnung erscheint „Trotzdem übernehmen“ (etwa wenn der Server sich selbst nicht erreicht, oder bei http im lokalen Betrieb). Die Prüfadresse ist auch im Wartungszustand erreichbar.
+- Wechselt die Verwaltung dadurch den Host, ist dort eine neue Anmeldung nötig. Das Sitzungscookie gilt nur für die Schreibweise, unter der es entstand. Die Meldung sagt das.
+
+**Geprüft:** zwei neue Tests in `SystemScreenTest` (Server-Umgebung ohne Feld, Ablehnung einer nicht erreichbaren Adresse ohne Schreiben in `.env`, falsche Eingaben, Prüfadresse; `OriginCheck` mit fremder und eigener Kennung). Im Browser mit der Pilotkopie bei 1280 und 375 px (kein seitliches Scrollen) Feld, Ablehnung und „Trotzdem übernehmen“ angesehen.
+
+## Favicon auch für die Google-Suche (21.09.2026)
+
+**Anlass:** Umut: Google zeigt bei Elektro Bernhard weiter das KantSites-K, obwohl ein eigenes Symbol gesetzt ist – „mach das im Kern sobald man Favicon setzt alles ersetzen“.
+
+- **Ursache:** Das eigene Symbol gab es nur in 32 und 180 px, Google nimmt nur Vielfache von 48 px. Und `/favicon.svg` lag als Datei in `public/`, der Webserver lieferte also immer das K aus – dort hatte Google es beim ersten Besuch gefunden.
+- **Neu:** `FAVICON_SIZES` sind 32, 48, 180 und 192. Der Kopf verweist zusätzlich auf `/favicon-192.png` (`sizes="192x192"`). `/favicon.ico` liefert das 48er-PNG. `/favicon.svg` beantwortet jetzt die Anwendung: ohne eigenes Symbol das mitgelieferte Zeichen (liegt jetzt unter `public/assets/favicon.svg`), mit eigenem ein 302 auf `/favicon-192.png`. Fehlen bei älteren Installationen die neuen Größen, entstehen sie beim ersten Abruf aus der gespeicherten Einstellung. Wird das Symbol entfernt, gelten die liegengebliebenen PNGs nicht mehr.
+- **Update:** Das Archiv-Update kopiert `public/` nur hinzu; `ENTFALLEN_IN_PUBLIC` löscht deshalb die alte `public/favicon.svg`, sonst bliebe sie auf dem Server und überdeckte die Route.
+- **Danach bei Google:** In der Search Console die Startseite unter „URL prüfen“ neu zur Indexierung einreichen. Google holt Favicons selten neu ab, das kann trotzdem Tage bis Wochen dauern.
+
+**Geprüft:** neuer Test `testGoogleGetsTheOwnSiteIconUnderEveryAddress` und der bisherige Favicon-Test grün, Update-Tests unverändert (eine vorbestehende Warnung), php-cs-fixer sauber; lokal (ohne eigenes Symbol) `/favicon.svg` 200, `/favicon.ico` → `/favicon.svg`.
+
+## Favicon mit Zuschnitt, Pflichtseiten per Suche, neueste zuerst (18.09.2026)
+
+**Anlass:** Umut: „Was ein Dropdown? nicht dein ernst? Sofort fixen über Mediathek auswählbar machen zurecht schneidbar machen und auch uploadbar dort machen!“ – dazu „Genauso Adresse Datenschutz und Impressum über search felder auswählbar machen“ und „Beiträge und Seiten sortieren absteigend also neueste zuerst“.
+
+- **Symbol der Website** hat einen eigenen Abschnitt in den Einstellungen statt einer Auswahlliste am Ende der Unternehmensdaten. Der Knopf öffnet die Mediathek (dort auch Upload), danach folgt ein Zuschnitt: Quadrat ziehen, Größe an der Ecke, per Regler oder mit +/−, Pfeiltasten zum Verschieben, Vorschau in 180 und 32 px. Gespeichert wird `faviconCrop` als `links,oben,kante` in Anteilen (links/oben von Breite/Höhe, Kante von der kürzeren Seite), `renderFavicon()` schneidet daraus die PNGs. `faviconVersion` hängt am Verweis; ohne Zuschnitt bleibt es bei den ersten acht Zeichen der Bildkennung, bestehende Verweise ändern sich also nicht.
+- `openMedia()` kennt `needsAlt: false`: Für das Symbol wird kein Alternativtext verlangt. Die Stile des Mediathek-Dialogs stehen jetzt in `media-dialog.css` statt in `editor.css`, damit der Dialog auch außerhalb des Editors funktioniert.
+- **Datenschutz und Impressum** werden über die Inhaltssuche gewählt wie die 404-Seite. Die Suche kann jetzt statt der Kennung den Pfad speichern (`valueKey: 'path'` bzw. `data-value="path"`), gespeichert wird also weiter die Adresse.
+- **Seiten- und Beitragsliste** der Verwaltung sortieren nach Anlagedatum absteigend. Die Einrückung der Unterseiten ist dort entfallen – ohne Baumreihenfolge hätte sie eine falsche Elternseite angedeutet.
+
+## Sechste Installation: der Redesign-Entwurf „EB Solar“ (16.09.2026)
+
+**Anlass:** Umut: „bitte redesign aufsetzen ebsolar.de achte auf die richtlinien wie immer machs wie die anderen tagespflege, elektro-baernhard co“ – dazu das Paket `ebsolar-redesign.zip` (statische Website: Startseite, Projektübersicht, acht Projektseiten, eigene SVG-Symbole, Kontaktformular per `mailto`).
+
+**Neu.** Neben Kant-IT, Elektro Bernhard, Tagespflege Moldovan, Maler Drews und DEEG steht jetzt **EB Solar** (Elektro Bernhard Regenerative Energie GmbH, Baden-Baden): Datenbank `var/ebsolar.db`, Medien `var/ebsolar-media`, Bildquellen `var/ebsolar-assets` (Logo, Favicon, Startbild, sechs Herstellerlogos, 31 Projektfotos, `projects.json`), Startkonfigurationen `ebsolar` (Port 8096, dev) und `ebsolar-prod` (Port 8097, `APP_ENV=prod` zum Messen). `scripts/seed-ebsolar.php` baut Gestaltung, Kopf- und Fußbereich, den Kontaktbereich als **wiederverwendbare Sektion**, Startseite, Projektübersicht, Solarcheck, Impressum, Datenschutz, 404, acht Projektbeiträge, Menü und zwei Formulare; `sh scripts/reset-ebsolar.sh` wirft weg, migriert und baut neu. Schrift ist Arial (System) wie in der Vorlage, es gibt nichts zu holen.
+
+**Aus der Vorlage übernommen:** Farben (`#b52c2c` Rot, `#252b30` Tinte, `#f5f6f6` helle Fläche, `#e6e8e8` Linie), Schriftgrößen, Abstände, Wortlaut und die Reihenfolge der Abschnitte – Hero mit Bildunterschrift über dem Foto, die vier Zusicherungen zwischen zwei Linien, drei Schritte, „Gutes Handwerk. Neue Energie.“ auf heller Fläche, Projektraster, Herstellerleiste, „Was kann Ihr Dach?“.
+
+**Bewusste Abweichungen.**
+- Das Kontaktformular der Vorlage öffnet nur das E-Mail-Programm des Besuchers. Hier ist es das serverseitige Formular `kontakt`; die Anfrage liegt in der Verwaltung und geht an pv@elektro-bernhard.de.
+- Der **Solarcheck** ist im Paket nur ein Verweis auf ebsolar.de. Hier ist er eine eigene Seite mit dem Formular `solarcheck`: dieselben acht Schritte und dieselben Fragen wie im Original (abgerufen 16.09.2026), nur der Schieberegler für den Jahresverbrauch ist ein Zahlenfeld – ein Schieberegler ist im Formularbaustein nicht vorgesehen.
+- Die acht Projektseiten sind **Beiträge** der Kategorie „Projekte“ mit Galerie und Bildbetrachter; `/projekte` ist eine Beitragsliste. Die Projektart („Photovoltaik“, „Terrassenmontage · SolarEdge“) steht als **Schlagwort** am Beitrag und nicht als Kategorie: „vorheriges/nächstes Projekt“ folgt der ersten Kategorie, und die muss bei allen acht dieselbe sein, sonst führt die Navigation an Rheinstetten vorbei. Die Beitragsliste zeigt nur Kategorien, deshalb tragen die Karten anders als in der Vorlage keine Artzeile.
+- Impressum und Datenschutz sind eigene Seiten (Angaben vom Impressum der laufenden Website); was nur Elektro Bernhard beantworten kann, steht als „NOCH ZU PRÜFEN“ im Text.
+- Kein Cookie-Banner: es wird nichts von Dritten geladen.
+
+**Bildkarten im Solarcheck (17.09.2026).** Umut: „du kannst so schöne svg's erstellen kannst du bitte noch schöne icons für den solarcheck machen statt checkboxe schöne bilder?“ Die fünf Auswahlfragen (Personen, Dachform, Dachfläche, Eindeckung, Speicher) zeigen jetzt Bildkarten statt Optionsfelder – 20 Symbole in Tinte und Rot auf heller Fläche, im Stil der übrigen Symbole der Website. `scripts/build-ebsolar-options.mjs` zeichnet sie als SVG und rastert sie mit Chromium auf 800×600 (4:3 wie die Karte), weil die Mediathek kein SVG nimmt; SVG und PNG liegen in `var/ebsolar-assets/options/`, das Aufbauskript hängt die PNGs per `images` an die Felder. Lighthouse `/solarcheck` danach: Leistung 98/98, Barrierefreiheit, Best Practices, SEO 100.
+
+**Im Kern behoben: Pfeile waren Schriftzeichen.** Der Button haengte ein `↗` an, die Beitragsnavigation ein `←`/`→` – Buchstaben also, die je nach Schrift anders aussehen und mit der Schriftstaerke nicht mitwachsen. Der Symbolsatz (`templates/blocks/icon.html.twig`, `DocumentValidator::ICONS`) kennt jetzt drei Pfeile: `arrow-right`, `arrow-left`, `arrow-up-right`, gezeichnet wie die uebrigen 17 Symbole. Button und Beitragsnavigation setzen sie als eingebettetes SVG in denselben `<span aria-hidden>` wie bisher – `& span{display:none}` nimmt den Pfeil also weiterhin weg, wo eine Vorlage keinen will (DEEG). Die Groesse haengt an der Schrift des Knopfs (`.button-arrow>svg{width:1.15em}`), nicht an einer festen Zahl. Auf EB Solar tragen auch die Textlinks ihren Pfeil als Symbolbaustein neben dem Text; er zeigt auf dieselbe Adresse und ist als Schmuck von Vorlesesoftware und Tastatur ausgenommen.
+
+**Im Kern behoben: zweimal derselbe Selektor in eigenem CSS loeschte die erste Regel.** `CustomCode::parse()` legte die Deklarationen je Selektor in einem Array ab – `$rules[$suffix] = …`. Standen `& .post-card{border:0}` und `& .post-card{transform:none}` untereinander, gewann die zweite, und `border:0` verschwand ohne Meldung; im Projektraster von EB Solar kam dadurch der 1-px-Rahmen des Kerns zurueck. In CSS ist zweimal derselbe Selektor eine Kaskade, kein Widerruf: die Deklarationen werden jetzt in der Reihenfolge zusammengefuegt, in der sie standen. Dasselbe galt fuer `&{…}` neben den Eigenschaften des Elements selbst – auch das ging vorher verloren.
+
+**Im Kern behoben: das vorgezogene Bild wurde nicht vorab geholt.** Für ein Hintergrundbild des ersten Abschnitts schreibt `page.html.twig` längst ein `<link rel="preload" as="image">` (`heroBackground`). Für ein gewöhnliches `<img>` über der Falz fehlte das Gegenstück – der Browser fand es erst, wenn das Stylesheet geparst war, und diese Rundreise ging auf die Startseite von EB Solar (deren Startbild ein Bild und kein Hintergrund ist) direkt in die LCP-Zeit. Neu liefert `PageController::heroImage()` Quelle, Variantensatz und Größenangabe genau so, wie `blocks/block.html.twig` sie an das `img` schreibt (sonst lädt der Browser zweimal), und die Vorlage schreibt daraus die Vorabladung – aber nur, wenn nicht ohnehin schon ein Hintergrundbild vorgeholt wird.
+
+**Und eine Regel fürs Aufbauen:** eine Einblendung auf dem größten Element über der Falz kostet fast eine Sekunde LCP (gemessen: 916 ms „element render delay“, mobil 92 statt 99). Das Startbild blendet deshalb nicht ein; Kleinzeile, Überschrift, Text und Knöpfe daneben schon.
+
+**Geprüft:** `npm run test:links` gegen Port 8096: 17 Adressen in der Sitemap, 48 Seiten, 127 Adressen, kein toter Verweis. `npm run test:browser` (`PHP_BINARY=C:/php84/php.exe`): sechs Seiten-/Viewport-Prüfungen mit axe, Tastatur und ohne JavaScript bestanden, **keine redaktionellen Befunde**; Ladebudget der Startseite 14 Anfragen, 17 Abfragen. Lighthouse 13.4.1 (`scripts/audit.mjs`, je drei Läufe mobil und Desktop, Mediane) gegen den Produktionsmodus auf Port 8097 für `/`, `/projekte`, `/solarcheck`, `/michelbach`, `/rheinstetten`, `/impressum`, `/datenschutz`: **Barrierefreiheit, Best Practices und SEO überall 100**, Leistung 99–100, agentisches Browsing überall 100 außer `/solarcheck` mobil (98). Startseite LCP 2,1 s mobil / 0,8 s Desktop, CLS 0, TBT 0 ms; Berichte in `reports/lighthouse-ebsolar/`. Bildbetrachter der Galerie geöffnet und geblättert („1 von 4“), Beitragsnavigation stimmt mit der Reihenfolge der Vorlage überein (Michelbach ← Rheinstetten, → Au am Rhein), 404 und Solarcheck im Browser angesehen, Desktop und 375 px. PHP-Tests **581 grün** (PHP 8.4), php-cs-fixer und Twig-Lint ohne Befund.
+
+**Stolperstein beim Messen:** Im Produktionsmodus liegen die uebersetzten Twig-Vorlagen in `var/cache/prod`. Nach einer Aenderung an `blocks/icon.html.twig` warf jede Seite mit Pfeil dort **500** („Key ‚arrow-right‘ … does not exist“), waehrend der Entwicklungsserver auf 8096 laengst richtig lieferte. `APP_ENV=prod … bin/console cache:clear` raeumt das auf; wer im Produktionsmodus misst, muss das nach jeder Vorlagenaenderung tun.
+
+**Bekannt:** `/solarcheck` mobil hat CLS 0,08 (agentisches Browsing 98). Das Formularskript blendet nach dem Laden alle Schritte bis auf den ersten aus – ohne Skript stehen sie untereinander, mit Skript springt die Seite einmal. Der Wert liegt unter dem Ziel von 0,1, aber die Bewegung ist sichtbar; sie gehört in den Kern (Schritte serverseitig zusammenfalten), nicht ins Aufbauskript.
+
+
 ## Startseite nach der Installation: eine Baustellenseite statt einer Anleitung (16.09.2026)
 
 **Anlass:** Umut: „Kannst du bitte für die Erstseite bzw. nach der Installation eine schöne Erstseite erstellen – Under Construction oder so, ohne Details mit ‚melde dich an‘ usw. Am besten auch noch Logo von KantSites: ‚Hier entsteht eine neue Webpräsenz mit KantSites‘.“
@@ -996,7 +1132,7 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 ## Bekannte Einschränkungen
 
 - Gestaltung über geprüfte Tokens, keine beliebigen Pixelwerte, eigenen Schriften oder freien Farben. Noch keine Inline-Textbearbeitung, Formulare, dynamischen Menüs, Plugin-/Themeverwaltung oder WordPress-Import. Abschnittsvorlagen sind lokale Blockrezepte, keine globale Templateverwaltung.
-- Mediathek derzeit für statische Bilder: keine Videos/PDFs/SVGs, Lightbox/Slideshow, freie Bildzuschnitte, Ordner, Paginierung oder physische Löschung. Bild-URLs sind öffentlich; Archivieren schützt keine vertraulichen Dateien. Originale werden durch optimierte Varianten ersetzt. Einblendungen starten beim Laden, nicht beim Scrollen.
+- Mediathek derzeit für statische Bilder und PDFs (seit 22.09.2026): keine Videos/SVGs, Lightbox/Slideshow, freie Bildzuschnitte, Ordner, Paginierung oder physische Löschung. Bild-URLs sind öffentlich; Archivieren schützt keine vertraulichen Dateien. Originale werden durch optimierte Varianten ersetzt. Einblendungen starten beim Laden, nicht beim Scrollen.
 - Sektionen bieten die vorhandenen Farb-/Breitentokens geräteübergreifend. Benutzerverwaltung und Passwortänderung sind noch nicht als Browseroberfläche verfügbar.
 - **Der Aufgabenplan ist von Anfragen abhängig.** Ohne Besucher und ohne geöffnetes Backend läuft nichts; minutengenau ist nur ein echter Cronjob oder der URL-Cronjob des Hosters. Unter Apache mit mod_php belegt eine laufende Aufgabe einen PHP-Prozess, nachdem die Seite beim Besucher ist (dort gibt es kein `fastcgi_finish_request()`) – deshalb sind die Grenzen je Seitenaufruf klein (2 Aufgaben, 20 Sekunden) und der Auslöser abschaltbar. Die Sicherung ist die schwerste Aufgabe und läuft trotzdem mit: eine tägliche Sicherung ist mehr wert als keine. **Nicht geprüft:** das Verhalten unter mod_php und unter echter Last – hier lief alles gegen den eingebauten PHP-Server.
 - **Offene redaktionelle Feststellung:** `/grundlagen` trägt einen im Editor gesetzten Textblock in `#d08080` auf hellem Grund – 2,75:1, unter der AA-Schwelle. Die Farbe wurde **nicht** verändert, weil sie eine Nutzerentscheidung ist; die Prüfung nennt sie bei jedem Lauf, und die Kontrastwarnung im Editor meldet sie ebenfalls.

migrations/Version20260917000100.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260917000100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Dokumente: PDFs in der Mediathek, zum Verlinken und fuer den Betrachter.';
+    }
+
+    public function isTransactional(): bool
+    {
+        return false;
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Eine eigene Tabelle statt einer Art-Spalte in media: jede Stelle, die ein Bild sucht,
+        // erwartet Varianten mit Breite und Hoehe. Ein PDF dort waere ein Bild ohne Bild - an
+        // einem Dutzend Stellen. Getrennt kann keine Bildauswahl je ein Dokument finden.
+        $document = $schema->createTable('document');
+        $document->addColumn('id', 'string', ['length' => 32]);
+        $document->addColumn('title', 'string', ['length' => 160]);
+        $document->addColumn('bytes', 'integer');
+        $document->addColumn('archived', 'boolean', ['default' => false]);
+        $document->addColumn('version', 'integer', ['default' => 1]);
+        $document->addColumn('created_at', 'datetime_immutable');
+        $document->setPrimaryKey(['id']);
+    }
+
+    public function down(Schema $schema): void
+    {
+        $schema->dropTable('document');
+    }
+}

public/assets/admin.css

@@ -684,6 +684,14 @@ details.card > summary:hover { background: #fafbf8 }
 .facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 20px; margin: 14px 0 0; font-size: 13px }
 .facts dt { color: var(--muted) }
 .facts dd { margin: 0; overflow-wrap: anywhere }
+/* Die Adresse der Website auf der Systemseite: Feld und Knopf in einer Zeile, am Telefon untereinander. */
+.origin-form { margin-top: 4px; max-width: 560px }
+.origin-form label:first-of-type { margin-top: 10px }
+.origin-row { display: flex; flex-wrap: wrap; gap: 8px }
+.origin-row input { flex: 1 1 240px; width: auto; box-sizing: border-box; min-height: 40px; height: 40px }
+.card-body .origin-row .secondary { margin: 0 }
+.origin-form .check-label { margin-top: 10px }
+.link-button { border: 0; background: none; padding: 0; min-height: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer }
 .check-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.55 }
 .check-list li { display: flex; gap: 11px; align-items: flex-start }
 .check-list li > span { min-width: 0; overflow-wrap: anywhere }
@@ -751,9 +759,25 @@ details.card > summary:hover { background: #fafbf8 }
 .install-details > summary { padding: 14px 0; font-size: 13px; font-weight: 600; cursor: pointer }
 .install-details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 6px }
 
-.favicon-field{display:flex;align-items:center;gap:12px}
-.favicon-field select{flex:1}
+.favicon-field{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
+.favicon-current{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
+.favicon-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 .favicon-preview{border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
+.favicon-editor{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:start;margin-top:14px}
+.favicon-editor[hidden]{display:none}
+.favicon-stage{position:relative;justify-self:start;max-width:100%;line-height:0;background:repeating-conic-gradient(#eef1eb 0% 25%,#fff 0% 50%) 0 0/16px 16px;user-select:none;touch-action:none}
+.favicon-stage img{display:block;max-width:100%;max-height:360px;width:auto;height:auto}
+.favicon-frame{position:absolute;box-sizing:border-box;border:2px solid #fff;outline:1px solid rgba(0,0,0,.6);box-shadow:0 0 0 9999px rgba(20,30,25,.55);cursor:move}
+.favicon-stage{overflow:hidden}
+.favicon-frame:focus-visible{outline:3px solid var(--accent);outline-offset:0}
+.favicon-handle{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#fff;border:1px solid rgba(0,0,0,.6);border-radius:3px;cursor:nwse-resize}
+.favicon-side input[type=range]{width:100%}
+.favicon-samples{display:flex;align-items:flex-end;gap:16px;margin:12px 0}
+.favicon-samples figure{margin:0;text-align:center;font-size:11px;color:var(--muted)}
+.favicon-samples canvas{display:block;margin:0 auto 6px;border-radius:8px;background:repeating-conic-gradient(#eef1eb 0% 25%,#fff 0% 50%) 0 0/12px 12px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
+.favicon-sample-large{width:90px;height:90px}
+.favicon-sample-small{width:32px;height:32px;border-radius:4px!important}
+@media(max-width:700px){.favicon-editor{grid-template-columns:1fr}}
 
 .color-field { display: flex; gap: 8px; align-items: center }
 .color-field input[type="text"], .color-field > input:not([type="color"]) { flex: 1; min-width: 0 }
@@ -874,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 }
@@ -951,3 +981,26 @@ details.card > summary:hover { background: #fafbf8 }
 .theme-save .muted { font-size: 12px }
 .theme-form .button-defaults { margin: 0; background: var(--paper) }
 @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/editor.css

@@ -11,31 +11,6 @@ dialog::backdrop{background:#172e2966}
 dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 
-/* ---- media library dialog (unchanged) ---------------------------------------------------- */
-.media-launch{margin-top:14px;white-space:normal}
-.media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}
-.media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
-.media-heading h2{margin:0}
-.media-heading .eyebrow{margin-bottom:8px}
-.media-tools{display:grid;grid-template-columns:1fr 1fr;gap:24px}
-.media-tools label{margin-top:10px}
-.media-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
-.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;max-height:430px;overflow:auto;padding:4px}
-.media-card{border:2px solid var(--line);border-radius:9px;padding:7px;background:white;color:var(--ink);display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}
-.media-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
-.media-card img{width:100%;height:115px;object-fit:cover;border-radius:5px}
-.media-card strong{font-size:12px;overflow-wrap:anywhere}
-.media-card span{font-size:11px;color:var(--muted)}
-.media-details{padding-left:22px;border-left:1px solid var(--line)}
-.media-details button,.media-details a{margin-top:12px;display:block}
-.media-details input{font-size:13px}
-.media-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
-.media-footer label{margin:0;font-size:12px}
-#media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
-#media-status{font-size:12px;margin-block:15px}
-.media-dialog> .panel-hint{margin-top:20px}
-.media-details>p{font-size:12px}
-@media(max-width:767px){.media-dialog{padding:18px}.media-tools,.media-layout{grid-template-columns:1fr}.media-details{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.media-grid{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}.media-footer{align-items:stretch;flex-direction:column}.media-heading{gap:8px}}
 
 /* ---- shell ------------------------------------------------------------------------------- */
 html:has(>.editor-body){overflow:hidden;height:100%}

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, createMediaPreview } from './media.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';
@@ -330,7 +331,20 @@ 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') field('In neuem Tab öffnen', 'newTab', block.props.newTab === true, { checkbox: true, container });
+    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 => 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 });
+    }
   };
   if (!block) {
     field('Seitentitel', 'title', history.document.title, { maxLength: 160 });
@@ -339,6 +353,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.
@@ -373,7 +402,7 @@ function renderContent(block, panel) {
     field('Symbol', 'icon', block.props.icon, { choices: Object.fromEntries(ICONS.map(name => [name, name])) });
     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.' });
+    field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse – oder ein PDF.' });
   }
   if (block.type === 'stat') {
     field('Zahl', 'value', block.props.value, { maxLength: 16, help: 'Zum Beispiel 15+, 24/7 oder 100 %.' });
@@ -389,7 +418,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.' });
+    field('Linkziel', 'href', block.props.href, { help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse – oder ein PDF.' });
   }
   if (block.type === 'contact') {
     field('Telefon', 'phone', block.props.phone || '', { maxLength: 80, help: 'Wird als anrufbarer Link ausgegeben.' });
@@ -403,14 +432,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])) });
     // 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.' });
+    field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse – 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.' });
@@ -483,7 +512,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.' });
@@ -501,7 +530,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.' });
@@ -519,24 +548,27 @@ 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.' });
+  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 === 'image') {
     renderImageWidth(block, panel);
     imagePreview = createMediaPreview({ src: block.props.sources?.[0]?.src || block.props.src, label: block.props.alt || block.props.caption });
     panel.append(imagePreview.element);
     const linkOptions = document.createElement('div'); linkOptions.className = 'image-link-options';
     const showLinkOptions = value => { linkOptions.hidden = value !== 'link'; };
-    const clickAction = block.props?.click || (block.props?.href ? 'link' : 'keine');
+    // Ohne eigene Wahl folgt das Bild seiner Galerie - dieselbe Regel wie in der Vorlage.
+    const holder = locate(history.document.blocks, block.id)?.parent;
+    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. Für ein Logo im Kopfbereich meist /.' });
+    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 /.' });
     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);
@@ -551,7 +583,7 @@ function renderContent(block, panel) {
     field('Bildunterschrift', 'caption', block.props.caption || '', { multiline: true, maxLength: 500 });
   }
   if (block.type === 'gallery') {
-    field('Bilder vergrößerbar', 'lightbox', block.props?.lightbox === true, { checkbox: true, help: 'Ein Klick öffnet das Bild über der Seite, mit Blättern durch die Galerie. Die einzelnen Bilder brauchen dafür „Beim Klick: Bild vergrößern".' });
+    field('Bilder vergrößerbar', 'lightbox', block.props?.lightbox === true, { checkbox: true, help: 'Gilt für alle Bilder der Galerie: ein Klick öffnet das Bild über der Seite, mit Blättern durch die Galerie. Ein Bild mit eigener Einstellung unter „Beim Klick“ behält sie.' });
     const hint = document.createElement('p'); hint.className = 'panel-hint'; hint.textContent = `${block.children?.length || 0} Bilder · Bilder im Strukturbaum auswählen, beschriften und mit den Pfeilen sortieren. Spalten und Abstände stehen unter Design.`;
     const picker = document.createElement('button'); picker.className = 'primary'; picker.textContent = 'Galeriebilder auswählen';
     picker.addEventListener('click', () => chooseMedia(true)); panel.append(hint, picker);
@@ -764,7 +796,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' });
   }
 }
 

public/assets/favicon-field.js

@@ -0,0 +1,137 @@
+import { openMedia } from './media.js';
+
+/*
+ * The site icon in the settings: an image from the media library (uploads happen right there in
+ * the dialog), then a square cut-out chosen by dragging. The crop is stored as fractions -
+ * left and top of the width and height, the edge of the shorter side - so it holds for every
+ * variant of the image, and the server cuts the PNG files from it when the form is saved.
+ */
+const field = document.querySelector('[data-favicon-field]');
+if (field) setup(field);
+
+function setup(field) {
+  const idInput = field.querySelector('[name="faviconMediaId"]');
+  const cropInput = field.querySelector('[name="faviconCrop"]');
+  const choose = field.querySelector('[data-favicon-choose]');
+  const remove = field.querySelector('[data-favicon-remove]');
+  const current = field.querySelector('.favicon-current');
+  const base = document.querySelector('meta[name="admin-base"]').content;
+
+  const editor = document.createElement('div'); editor.className = 'favicon-editor'; editor.hidden = true;
+  editor.innerHTML = `<div class="favicon-stage"><img alt="" draggable="false"><div class="favicon-frame" tabindex="0" role="application" aria-label="Ausschnitt für das Symbol. Mit den Pfeiltasten verschieben, mit Umschalt in großen Schritten, mit Plus und Minus die Größe ändern."><span class="favicon-handle" aria-hidden="true"></span></div></div>
+    <div class="favicon-side">
+      <label for="favicon-size">Größe des Ausschnitts</label>
+      <input id="favicon-size" type="range" min="2" max="100" step="1" value="100">
+      <p class="field-help">Quadrat im Bild verschieben, an der Ecke oder mit dem Regler vergrößern und verkleinern.</p>
+      <div class="favicon-samples" aria-label="Vorschau">
+        <figure><canvas width="180" height="180" class="favicon-sample-large"></canvas><figcaption>Startbildschirm</figcaption></figure>
+        <figure><canvas width="32" height="32" class="favicon-sample-small"></canvas><figcaption>Browser-Reiter</figcaption></figure>
+      </div>
+      <button type="button" class="text-button" data-favicon-center>Mittig ausrichten</button>
+    </div>`;
+  field.after(editor);
+  const stage = editor.querySelector('.favicon-stage');
+  const image = stage.querySelector('img');
+  const frame = stage.querySelector('.favicon-frame');
+  const size = editor.querySelector('#favicon-size');
+  const large = editor.querySelector('.favicon-sample-large');
+  const small = editor.querySelector('.favicon-sample-small');
+
+  let crop = { x: 0, y: 0, s: 1 };
+  const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+  const edge = () => crop.s * Math.min(image.naturalWidth, image.naturalHeight);
+
+  /** Keep the square inside the picture, then show it and write it into the form. */
+  const apply = () => {
+    const w = image.naturalWidth, h = image.naturalHeight; if (!w || !h) return;
+    crop.s = clamp(crop.s, 0.02, 1);
+    const e = edge();
+    crop.x = clamp(crop.x, 0, (w - e) / w); crop.y = clamp(crop.y, 0, (h - e) / h);
+    Object.assign(frame.style, { left: `${crop.x * 100}%`, top: `${crop.y * 100}%`, width: `${e / w * 100}%`, height: `${e / h * 100}%` });
+    size.value = Math.round(crop.s * 100);
+    cropInput.value = [crop.x, crop.y, crop.s].map(value => String(Math.round(value * 1e6) / 1e6)).join(',');
+    for (const canvas of [large, small]) {
+      const context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height);
+      context.imageSmoothingQuality = 'high';
+      context.drawImage(image, crop.x * w, crop.y * h, e, e, 0, 0, canvas.width, canvas.height);
+    }
+  };
+  const center = () => {
+    const w = image.naturalWidth, h = image.naturalHeight, e = edge();
+    crop.x = (w - e) / 2 / w; crop.y = (h - e) / 2 / h; apply();
+  };
+  /** Resize around the middle of the square, so the slider and the keys do not drift it away. */
+  const resize = s => {
+    const w = image.naturalWidth, h = image.naturalHeight, before = edge();
+    crop.s = clamp(s, 0.02, 1); const after = edge();
+    crop.x += (before - after) / 2 / w; crop.y += (before - after) / 2 / h; apply();
+  };
+
+  const load = (src, initial) => new Promise((resolve, reject) => {
+    image.onload = () => { editor.hidden = false; crop = initial || { x: 0, y: 0, s: 1 }; if (initial) apply(); else center(); resolve(); };
+    image.onerror = () => reject(new Error('Das Bild konnte nicht geladen werden.'));
+    image.src = src;
+  });
+  const largest = item => item.variants.at(-1).src;
+
+  const showCurrent = label => {
+    current.replaceChildren(); current.append(document.createTextNode(label));
+    choose.textContent = idInput.value ? 'Anderes Bild wählen' : 'Bild wählen oder hochladen';
+    remove.hidden = !idInput.value;
+  };
+
+  choose.addEventListener('click', () => openMedia({ needsAlt: false, onChoose: async items => {
+    if (!items.length) return;
+    idInput.value = items[0].id; cropInput.value = '';
+    showCurrent(`Neues Symbol aus „${items[0].title}“ – wird beim Speichern übernommen.`);
+    try { await load(largest(items[0])); frame.focus({ preventScroll: true }); editor.scrollIntoView({ block: 'nearest' }); }
+    catch (error) { showCurrent(error.message); }
+  } }));
+  remove.addEventListener('click', () => {
+    idInput.value = ''; cropInput.value = ''; editor.hidden = true; image.removeAttribute('src');
+    showCurrent('Mitgeliefertes Zeichen – wird beim Speichern übernommen.'); choose.focus();
+  });
+  editor.querySelector('[data-favicon-center]').addEventListener('click', center);
+  size.addEventListener('input', () => resize(size.value / 100));
+
+  // Drag to move, drag the corner to resize. Pointer events cover mouse, pen and touch alike.
+  let drag = null;
+  frame.addEventListener('pointerdown', event => {
+    event.preventDefault(); frame.setPointerCapture(event.pointerId); frame.focus({ preventScroll: true });
+    drag = { mode: event.target.classList.contains('favicon-handle') ? 'resize' : 'move', startX: event.clientX, startY: event.clientY, crop: { ...crop }, rect: stage.getBoundingClientRect() };
+  });
+  frame.addEventListener('pointermove', event => {
+    if (!drag) return;
+    const w = image.naturalWidth, h = image.naturalHeight, { rect } = drag;
+    const dx = (event.clientX - drag.startX) / rect.width, dy = (event.clientY - drag.startY) / rect.height;
+    if (drag.mode === 'move') { crop.x = drag.crop.x + dx; crop.y = drag.crop.y + dy; }
+    else {
+      // The corner follows the larger of both movements, measured in image pixels.
+      const grow = Math.max(dx * w, dy * h), shorter = Math.min(w, h);
+      const room = Math.min(w - drag.crop.x * w, h - drag.crop.y * h);
+      crop.x = drag.crop.x; crop.y = drag.crop.y;
+      crop.s = clamp(drag.crop.s * shorter + grow, 0.02 * shorter, room) / shorter;
+    }
+    apply();
+  });
+  const stop = () => { drag = null; };
+  frame.addEventListener('pointerup', stop); frame.addEventListener('pointercancel', stop);
+  frame.addEventListener('keydown', event => {
+    const step = event.shiftKey ? 0.1 : 0.01;
+    const moves = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+    if (moves[event.key]) { event.preventDefault(); crop.x += moves[event.key][0]; crop.y += moves[event.key][1]; apply(); }
+    else if (['+', '='].includes(event.key)) { event.preventDefault(); resize(crop.s + step); }
+    else if (event.key === '-') { event.preventDefault(); resize(crop.s - step); }
+  });
+
+  // An icon that is already set opens with its picture and its cut-out.
+  if (/^[a-f0-9]{32}$/.test(idInput.value)) {
+    fetch(`${base}/api/media/${idInput.value}`, { credentials: 'same-origin' })
+      .then(response => { if (!response.ok || response.redirected) throw new Error(); return response.json(); })
+      .then(({ item }) => {
+        const parts = cropInput.value.split(',').map(Number);
+        return load(largest(item), parts.length === 3 && parts.every(Number.isFinite) ? { x: parts[0], y: parts[1], s: parts[2] } : null);
+      })
+      .catch(() => {});
+  }
+}

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/lightbox.js

@@ -99,3 +99,86 @@
         }
     });
 })();
+
+/*
+ * Der PDF-Betrachter - in derselben Datei wie der Bildbetrachter, damit eine Seite mit beidem
+ * nicht zwei Skripte laedt.
+ *
+ * Ohne dieses Skript ist ein Link auf ein PDF ein gewöhnlicher Link: der Browser öffnet die
+ * Datei. Das Skript zeigt sie stattdessen in einem Rahmen über der Seite, mit dem Betrachter,
+ * den der Browser ohnehin mitbringt - kein eigener Nachbau, der ein Megabyte wiegt.
+ *
+ * Wo der Browser keinen solchen Betrachter hat oder ihn im Rahmen nur halb zeigt, bleibt es beim
+ * neuen Tab: Chrome auf Android hat keinen, und Safari auf dem iPhone zeigt im Rahmen nur die
+ * erste Seite. Ein Link mit „In neuem Tab öffnen“ bleibt ohnehin, was er ist.
+ */
+(() => {
+    const PDF = /^\/media\/[a-f0-9]{32}\.pdf$/;
+    const links = [...document.querySelectorAll('a[href]')].filter(link => {
+        const url = new URL(link.href, location.href);
+
+        return url.origin === location.origin && PDF.test(url.pathname) && '_blank' !== link.target;
+    });
+    if (0 === links.length) {
+        return;
+    }
+    const eingebettet = false !== navigator.pdfViewerEnabled && !matchMedia('(pointer: coarse)').matches;
+
+    let dialog = null;
+    let rahmen = null;
+    let titel = null;
+    let laden = null;
+
+    const baue = () => {
+        dialog = document.createElement('dialog');
+        dialog.className = 'pdf-dialog';
+        dialog.setAttribute('aria-labelledby', 'pdf-dialog-title');
+        dialog.innerHTML = `
+            <div class="pdf-bar">
+                <p class="pdf-title" id="pdf-dialog-title"></p>
+                <a class="pdf-action pdf-download" download>Herunterladen</a>
+                <a class="pdf-action pdf-open" target="_blank" rel="noopener">Im neuen Tab</a>
+                <button class="pdf-close" type="button" aria-label="Schließen">×</button>
+            </div>
+            <iframe class="pdf-frame" title="PDF-Dokument"></iframe>
+        `;
+        document.body.append(dialog);
+        rahmen = dialog.querySelector('.pdf-frame');
+        titel = dialog.querySelector('.pdf-title');
+        laden = [dialog.querySelector('.pdf-download'), dialog.querySelector('.pdf-open')];
+        dialog.querySelector('.pdf-close').addEventListener('click', () => dialog.close());
+        dialog.addEventListener('click', event => {
+            if (event.target === dialog) {
+                dialog.close();
+            }
+        });
+        // Der Rahmen wird geleert, sonst läuft ein eingebettetes Video oder Audio im PDF weiter
+        // und das nächste Öffnen zeigt kurz das vorige Dokument.
+        dialog.addEventListener('close', () => rahmen.removeAttribute('src'));
+    };
+
+    for (const link of links) {
+        link.addEventListener('click', event => {
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || 1 === event.button) {
+                return;
+            }
+            event.preventDefault();
+            if (!eingebettet) {
+                window.open(link.href, '_blank', 'noopener');
+
+                return;
+            }
+            if (null === dialog) {
+                baue();
+            }
+            const name = (link.getAttribute('aria-label') || link.textContent || '').trim();
+            titel.textContent = name || 'Dokument';
+            rahmen.title = name ? `PDF: ${name}` : 'PDF-Dokument';
+            for (const aktion of laden) {
+                aktion.href = link.href;
+            }
+            rahmen.src = link.href;
+            dialog.showModal();
+        });
+    }
+})();

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

@@ -0,0 +1,44 @@
+/* The media library dialog. Loaded by the editor and by every screen that picks an image from
+   the library (the site icon in the settings), so it does not rely on editor.css. */
+.media-dialog{padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 80px #1b2a2433}
+.media-dialog::backdrop{background:#172e2966}
+.media-dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
+.media-dialog .panel-hint{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 12px}
+.media-launch{margin-top:14px;white-space:normal}
+.media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}
+.media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
+.media-heading h2{margin:0}
+.media-heading .eyebrow{margin-bottom:8px}
+.media-tools{display:grid;grid-template-columns:1fr 1fr;gap:24px}
+.media-tools label{margin-top:10px}
+.media-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
+.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;max-height:430px;overflow:auto;padding:4px}
+.media-card{border:2px solid var(--line);border-radius:9px;padding:7px;background:white;color:var(--ink);display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}
+.media-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
+.media-card img{width:100%;height:115px;object-fit:cover;border-radius:5px}
+.media-card strong{font-size:12px;overflow-wrap:anywhere}
+.media-card span{font-size:11px;color:var(--muted)}
+.media-details{padding-left:22px;border-left:1px solid var(--line)}
+.media-details button,.media-details a{margin-top:12px;display:block}
+.media-details input{font-size:13px}
+.media-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
+.media-footer label{margin:0;font-size:12px}
+#media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
+#media-status{font-size:12px;margin-block:15px}
+.media-dialog> .panel-hint{margin-top:20px}
+.media-details>p{font-size:12px}
+@media(max-width:767px){.media-dialog{padding:18px}.media-tools,.media-layout{grid-template-columns:1fr}.media-details{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.media-grid{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}.media-footer{align-items:stretch;flex-direction:column}.media-heading{gap:8px}}
+/* PDFs: eine Liste statt eines Rasters - es gibt nichts zu sehen außer dem Titel. */
+.document-dialog{max-width:720px}
+.document-list{display:grid;gap:8px;max-height:360px;overflow:auto;padding:4px}
+.document-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;border:2px solid var(--line);border-radius:9px;padding:10px 12px;background:white;color:var(--ink);text-align:left}
+.document-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
+.document-card strong{font-size:13px;overflow-wrap:anywhere}
+.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-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-drop.js

@@ -1,5 +1,5 @@
 /**
- * Dragging images onto the upload field, and saying which files are about to go up.
+ * Dragging images and PDFs onto the upload field, and saying which files are about to go up.
  *
  * Everything here is an addition. Without this script the field is still a file input with a
  * label: clicking it opens the file picker and the form submits the same way. The script never
@@ -9,19 +9,19 @@ const zone = document.querySelector('[data-dropzone]');
 const input = zone?.querySelector('input[type="file"]');
 const chosen = document.querySelector('[data-chosen]');
 if (zone && input && chosen) {
-  const ACCEPTED = ['image/jpeg', 'image/png', 'image/webp'];
+  const ACCEPTED = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'];
 
   const describe = (files, ignored = 0) => {
     if (!files.length) {
       chosen.textContent = ignored
-        ? `Keine Bilddatei dabei. ${ignored} Datei(en) übersprungen – erlaubt sind JPEG, PNG und WebP.`
+        ? `Keine passende Datei dabei. ${ignored} Datei(en) übersprungen – erlaubt sind JPEG, PNG, WebP und PDF.`
         : 'Noch keine Datei gewählt.';
       return;
     }
     const names = [...files].map(file => file.name).join(', ');
     const size = [...files].reduce((total, file) => total + file.size, 0);
     chosen.textContent = `${files.length} Datei(en) gewählt (${(size / 1048576).toFixed(1)} MB): ${names}`
-      + (ignored ? ` · ${ignored} Datei(en) übersprungen, erlaubt sind JPEG, PNG und WebP.` : '');
+      + (ignored ? ` · ${ignored} Datei(en) übersprungen, erlaubt sind JPEG, PNG, WebP und PDF.` : '');
   };
 
   input.addEventListener('change', () => describe(input.files));

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/media.js

@@ -40,7 +40,8 @@ export function createMediaPreview(initial = {}) {
   return { element: wrap, update };
 }
 
-export function openMedia({ multiple = false, onChoose } = {}) {
+/** needsAlt: false for images that never appear as content, such as the site icon. */
+export function openMedia({ multiple = false, onChoose, needsAlt = true } = {}) {
   const opener = document.activeElement;
   const dialog = element('dialog', '', 'media-dialog'); dialog.id = 'media-dialog';
   dialog.setAttribute('aria-labelledby', 'media-title');
@@ -128,15 +129,81 @@ export function openMedia({ multiple = false, onChoose } = {}) {
     }
     $('#media-upload').value = ''; lock(false); render(); details(); error(failures.join(' · '));
   });
-  $('#media-insert').hidden = !onChoose; $('#decorative-choice').hidden = !onChoose;
+  $('#media-insert').hidden = !onChoose; $('#decorative-choice').hidden = !onChoose || !needsAlt;
   $('#media-insert').addEventListener('click', () => {
     const chosen = [...selected].map(id => items.find(item => item.id === id)).filter(item => item && !item.archived);
     const decorative = $('#media-decorative').checked;
-    if (!decorative && chosen.some(item => !item.alt.trim())) { error('Bitte für die gewählten Bilder einen Alternativtext speichern oder die dekorative Verwendung wählen.'); return; }
+    if (needsAlt && !decorative && chosen.some(item => !item.alt.trim())) { error('Bitte für die gewählten Bilder einen Alternativtext speichern oder die dekorative Verwendung wählen.'); return; }
     onChoose(chosen.map(item => ({ ...item, decorative }))); dialog.close();
   });
   dialog.showModal(); lock(true);
   api().then(data => { items = data.items; token = data.csrfToken; lock(false); render(); }).catch(err => { lock(false); error(err.message || 'Medien konnten nicht geladen werden. Bitte erneut öffnen.'); });
 }
 
+/**
+ * Ein PDF aus der Mediathek wählen - oder eines hochladen und gleich wählen.
+ *
+ * Ein eigener, schmaler Dialog statt einer Betriebsart des Bilderdialogs: ein PDF hat keine
+ * Vorschau, keinen Alternativtext und keine Mehrfachauswahl. Gewählt wird die Adresse, die dann
+ * im Linkziel steht.
+ */
+export function openDocuments({ onChoose } = {}) {
+  const opener = document.activeElement;
+  const dialog = element('dialog', '', 'media-dialog document-dialog');
+  dialog.setAttribute('aria-labelledby', 'document-title');
+  dialog.innerHTML = `<div class="media-heading"><div><p class="eyebrow">DOKUMENTE</p><h2 id="document-title">PDF wählen</h2></div><button class="secondary" id="document-close">Schließen</button></div>
+    <p class="panel-hint">PDF bis 20 MB. Es wird unverändert abgelegt und ist über seine Adresse öffentlich erreichbar – nichts Vertrauliches hochladen. Ohne „In neuem Tab öffnen“ zeigt die Website es in einem Betrachter über der Seite.</p>
+    <div class="media-tools"><div><label for="document-search">PDFs suchen</label><input id="document-search" type="search" placeholder="Titel"></div><div><label for="document-upload">PDF hochladen</label><input id="document-upload" type="file" accept="application/pdf,.pdf" disabled></div></div>
+    <p id="document-status" role="status" aria-live="polite">Wird geladen …</p><p id="document-error" class="media-error" role="alert" hidden></p>
+    <div id="document-list" class="document-list" role="group" aria-label="PDF auswählen"></div>
+    <div class="media-footer"><span></span><button id="document-insert" class="primary" disabled>PDF übernehmen</button></div>`;
+  document.body.append(dialog);
+  const $ = selector => dialog.querySelector(selector);
+  let items = [], chosen = null, token;
+  const error = message => { $('#document-error').textContent = message; $('#document-error').hidden = !message; };
+  const size = bytes => `${(bytes / 1048576).toLocaleString('de', { maximumFractionDigits: 1, minimumFractionDigits: 1 })} MB`;
+  const base = document.querySelector('meta[name="admin-base"]').content + '/api/dokumente';
+  function render() {
+    const query = $('#document-search').value.toLocaleLowerCase('de');
+    const visible = items.filter(item => !item.archived && item.title.toLocaleLowerCase('de').includes(query));
+    $('#document-list').replaceChildren();
+    for (const item of visible) {
+      const card = element('button', '', 'document-card'); card.type = 'button';
+      card.setAttribute('aria-pressed', String(chosen?.id === item.id));
+      card.append(element('span', 'PDF', 'document-badge'), element('strong', item.title), element('span', size(item.bytes)));
+      card.addEventListener('click', () => { chosen = item; render(); card.focus(); });
+      card.addEventListener('dblclick', () => { chosen = item; $('#document-insert').click(); });
+      $('#document-list').append(card);
+    }
+    if (!visible.length) $('#document-list').append(element('p', items.length ? 'Kein PDF mit diesem Titel.' : 'Noch keine PDFs. Lade oben eines hoch.', 'muted'));
+    $('#document-status').textContent = `${items.filter(item => !item.archived).length} PDFs${chosen ? ` · gewählt: ${chosen.title}` : ''}`;
+    $('#document-insert').disabled = !chosen;
+  }
+  $('#document-search').addEventListener('input', render);
+  $('#document-close').addEventListener('click', () => dialog.close());
+  dialog.addEventListener('close', () => { dialog.remove(); if (opener?.isConnected) opener.focus(); });
+  $('#document-upload').addEventListener('change', async () => {
+    const file = $('#document-upload').files[0]; if (!file) return;
+    error('');
+    if (file.size > 20 * 1024 * 1024) { error(`${file.name}: größer als 20 MB`); $('#document-upload').value = ''; return; }
+    $('#document-status').textContent = `Wird hochgeladen: ${file.name}`;
+    try {
+      const form = new FormData(); form.append('file', file);
+      const response = await fetch(base + '/upload', { method: 'POST', headers: { 'X-CSRF-Token': token }, body: form });
+      if (response.redirected) throw new Error('Sitzung abgelaufen. Bitte erneut anmelden.');
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(data.error || `Upload fehlgeschlagen (${response.status}).`);
+      items.unshift(data.item); chosen = data.item;
+    } catch (err) { error(`${file.name}: ${err.message || 'Verbindung unterbrochen'}`); }
+    $('#document-upload').value = ''; render();
+  });
+  $('#document-insert').addEventListener('click', () => { if (chosen) { onChoose?.(chosen); dialog.close(); } });
+  dialog.showModal();
+  fetch(base, { credentials: 'same-origin' }).then(async response => {
+    if (!response.ok || response.redirected) throw new Error('PDFs konnten nicht geladen werden. Bitte neu anmelden.');
+    // Hochladen erst mit Token - sonst weist der Server eine zu früh gewählte Datei ab.
+    const data = await response.json(); items = data.items; token = data.csrfToken; $('#document-upload').disabled = false; render();
+  }).catch(err => { $('#document-status').textContent = ''; error(err.message); });
+}
+
 document.querySelector('#open-media-library')?.addEventListener('click', () => openMedia());

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

@@ -11,7 +11,8 @@ export function setupPicker(picker, onSelect = () => {}) {
     input.removeAttribute('aria-activedescendant'); current = -1;
   };
   const select = item => {
-    value.value = item?.id ?? '';
+    // Most fields store the page id; a setting that keeps an address asks for the path instead.
+    value.value = item?.[picker.dataset.value || 'id'] ?? '';
     input.value = item ? `${item.title} (/${item.path === 'home' ? '' : item.path})` : '';
     input.setCustomValidity(''); status.textContent = item ? 'Ausgewählt.' : '';
     close(); value.dispatchEvent(new Event('change', { bubbles: true })); onSelect(item);
@@ -51,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);
   });
@@ -65,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

@@ -44,6 +44,11 @@ p{hyphens:auto}
 
 /* Blocks introduced with schema v6. No JavaScript: the accordion is details/summary. */
 .block-icon{flex-shrink:0;display:block}
+/* Der Pfeil am Button und in der Beitragsnavigation ist dasselbe Symbol wie ueberall sonst -
+   frueher stand dort ein Schriftzeichen, das je nach Schrift anders aussah. Er waechst mit der
+   Schrift des Knopfs, statt eine eigene Groesse zu haben. */
+.button-arrow,.nav-arrow{display:inline-flex;align-items:center}
+.button-arrow>svg,.nav-arrow>svg{width:1.15em;height:1.15em}
 .block-iconcard{display:grid;gap:12px;padding:26px;border:1px solid currentColor;border-radius:12px}
 .block-iconcard + .block-iconcard,.block-quote + .block-quote,.block-cta + .block-cta,.block-iconcard + .block-quote,.block-quote + .block-iconcard{margin-top:18px}
 /* Gestapelt brauchen Karten den Abstand; nebeneinander in einer Zeile macht er die zweite bis
@@ -492,6 +497,13 @@ body.consent-open{padding-bottom:320px}
 @media (min-width:1025px){.visibility-tablet,.visibility-mobile,.visibility-hide-desktop{display:none!important}}
 @media (min-width:768px) and (max-width:1024px){.visibility-desktop,.visibility-mobile,.visibility-hide-tablet{display:none!important}}
 @media (max-width:767px){.visibility-desktop,.visibility-tablet,.visibility-hide-mobile{display:none!important}}
+/* Das Sprungziel des Knopfs „nach oben“, ein leerer <span> am Anfang von <body>.
+   WebKit springt nicht zu einem Ziel, dessen Box inline ist und keine Flaeche hat - der Tipp
+   kam an, #seitenanfang stand in der Adresse, und die Seite blieb stehen. Auf dem iPhone,
+   und ebenso in Safari auf dem Mac; Chromium ist toleranter, deshalb fiel es am Schreibtisch
+   nie auf. Ein leerer Block ohne Hoehe reicht WebKit, es ist die Inline-Box, die stoert.
+   Nachgestellt in Playwright-WebKit mit iPhone-Profil: inline bleibt bei 1500, block springt. */
+#seitenanfang{display:block}
 /* Der Knopf „nach oben". Ein Anker, kein Skript: er springt an den Anfang der Seite, und das
    kann ein Browser seit jeher allein. Eingeblendet wird er beim Scrollen über eine Scroll-
    Zeitachse - dieselbe Technik wie bei den Einblendungen. Wo es die nicht gibt (heute noch
@@ -545,6 +557,19 @@ html.kant-top-armed.kant-top-shown .scroll-top{opacity:1;visibility:visible;tran
     .zoom-close,.zoom-prev,.zoom-next{width:46px;height:46px}
     .zoom-prev{left:8px}.zoom-next{right:8px}
 }
+/* Der PDF-Betrachter: fast bildschirmfüllend, mit einer schmalen Leiste darüber. Den Rest macht
+   der Betrachter des Browsers - Blättern, Zoom, Drucken. */
+.pdf-dialog{border:0;padding:0;width:min(96vw,1200px);height:94vh;max-width:none;max-height:none;background:#1b212c;color:#fff;border-radius:12px;overflow:hidden}
+.pdf-dialog[open]{display:flex;flex-direction:column}
+.pdf-dialog::backdrop{background:rgba(8,12,20,.88)}
+.pdf-bar{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px}
+.pdf-title{flex:1;min-width:0;margin:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
+.pdf-action{color:#fff;font-size:13px;text-decoration:none;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}
+.pdf-action:hover{background:rgba(255,255,255,.24)}
+.pdf-close{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
+.pdf-close:hover{background:rgba(255,255,255,.26)}
+.pdf-action:focus-visible,.pdf-close:focus-visible{outline:3px solid #fff;outline-offset:2px}
+.pdf-frame{flex:1;width:100%;border:0;background:#525659}
 
 .has-anchor{position:relative}.block-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:110px}.nav-label{display:inline-flex;align-items:center;gap:.5em}.nav-label>.block-icon{width:1.1em;height:1.1em;color:inherit;flex:none}
 

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

@@ -143,7 +143,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 +155,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');

scripts/build-ebsolar-options.mjs

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

scripts/build-kantarci-assets.php

@@ -0,0 +1,40 @@
+<?php
+
+/**
+ * Schneidet aus dem gelieferten Banner (kantarci-banner.jpeg, 901 × 458) die Bilder der
+ * KANTARCI-Landingpage zu: das Logo, das Hausmotiv und ein quadratisches Seitensymbol.
+ * Die Mediathek nimmt kein SVG, deshalb entsteht das Symbol als PNG.
+ *
+ * Aufruf: php scripts/build-kantarci-assets.php <banner.jpeg> <zielordner>
+ */
+
+[$_, $banner, $ziel] = $argv + [null, null, null];
+if (!is_file((string) $banner) || null === $ziel) {
+    fwrite(STDERR, "Aufruf: php scripts/build-kantarci-assets.php <banner.jpeg> <zielordner>\n");
+    exit(1);
+}
+if (!is_dir($ziel)) {
+    mkdir($ziel, 0777, true);
+}
+$quelle = imagecreatefromjpeg($banner);
+
+$zuschnitt = static function (int $x, int $y, int $b, int $h, int $faktor = 1) use ($quelle) {
+    $bild = imagecreatetruecolor($b * $faktor, $h * $faktor);
+    imagecopyresampled($bild, $quelle, 0, 0, $x, $y, $b * $faktor, $h * $faktor, $b, $h);
+
+    return $bild;
+};
+
+// Logo: Bildmarke und Schriftzug oben links, auf Weiß.
+imagepng($zuschnitt(22, 8, 396, 104), $ziel.'/logo-kantarci.png', 9);
+
+// Hausmotiv: der Fotoanteil rechts, oberhalb des goldenen Bands.
+imagejpeg($zuschnitt(500, 0, 401, 334), $ziel.'/haus.jpg', 90);
+
+// Seitensymbol: die Bildmarke mittig auf Weiß, 256 × 256.
+$symbol = imagecreatetruecolor(256, 256);
+imagefill($symbol, 0, 0, imagecolorallocate($symbol, 255, 255, 255));
+imagecopyresampled($symbol, $quelle, 28, 28, 26, 12, 200, 200, 80, 80);
+imagepng($symbol, $ziel.'/symbol-kantarci.png', 9);
+
+echo "Bilder geschrieben nach $ziel\n";

scripts/build-kantarci-options.mjs

@@ -0,0 +1,83 @@
+/*
+ * Zeichnet die Bildkarten der KANTARCI-Mietanfrage und rastert sie zu PNG.
+ *
+ * Die Formularbausteine zeigen eine Auswahl als Bildkarten, sobald eine Option ein Bild aus der
+ * Mediathek hat - und die Mediathek nimmt kein SVG. Deshalb entstehen die Symbole hier als SVG
+ * und werden mit Chromium auf 800 × 600 (4:3 wie die Karte) gerastert. Stil der Landingpage:
+ * dünne Linie in Navy, runde Enden, ein goldener Akzent, warme helle Fläche dahinter.
+ *
+ *   node scripts/build-kantarci-options.mjs   → var/kantarci-immobilien-assets/options/*.png und *.svg
+ */
+import { chromium } from 'playwright';
+import { mkdir, writeFile } from 'node:fs/promises';
+
+const ziel = process.argv[2] || 'var/kantarci-immobilien-assets/options';
+const NAVY = '#142535', GOLD = '#b49a66', HELL = '#f5f3ee', PAPIER = '#ffffff';
+
+const bild = (inhalt) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
+<rect width="800" height="600" fill="${HELL}"/>
+<g fill="none" stroke="${NAVY}" stroke-width="14" stroke-linecap="round" stroke-linejoin="round">${inhalt}</g>
+</svg>`;
+
+/** Eine Person: Kopf und Schultern. */
+const person = (x, y, s = 1, farbe = NAVY) => `
+<circle cx="${x}" cy="${y - 120 * s}" r="${46 * s}" stroke="${farbe}"/>
+<path d="M${x - 88 * s} ${y + 70 * s}v-${30 * s}a${88 * s} ${88 * s} 0 0 1 ${176 * s} 0v${30 * s}" stroke="${farbe}"/>`;
+
+/** Ein Grundriss: Außenwand, dazu Innenwände; der jeweils letzte Raum ist golden hinterlegt. */
+const grundriss = (waende, akzent) => `
+${akzent ? `<path d="${akzent}" fill="${GOLD}" fill-opacity=".22" stroke="none"/>` : ''}
+<rect x="170" y="130" width="460" height="340" rx="8"/>
+${waende}`;
+
+const bilder = {
+    // Wer zieht ein?
+    'haushalt-allein': person(400, 330, 1.3),
+    'haushalt-zu-zweit': person(275, 330, 1.1) + person(525, 330, 1.1, GOLD),
+    'haushalt-familie': person(250, 320, 1.1) + person(550, 320, 1.1) + person(400, 400, .7, GOLD),
+    'haushalt-wg': person(200, 340, .9) + person(400, 340, .9, GOLD) + person(600, 340, .9),
+
+    // Wie viele Zimmer?
+    'zimmer-1': grundriss('<path d="M340 470v-50" />', 'M177 137h446v326H177z'),
+    'zimmer-2': grundriss('<path d="M400 130v230M400 420v50"/>', 'M407 137h216v326H407z'),
+    'zimmer-3': grundriss('<path d="M360 130v230M360 420v50M360 300h270"/>', 'M367 307h256v156H367z'),
+    'zimmer-4': grundriss('<path d="M400 130v340M170 300h170M460 300h170"/>', 'M407 307h216v156H407z')
+        + `<path d="M690 110v80M650 150h80" stroke="${GOLD}"/>`,
+
+    // Was ist Ihnen wichtig?
+    'ausstattung-balkon': `
+<path d="M250 110h300v230H250z"/><path d="M400 110v230"/>
+<path d="M170 340h460M170 340v150M630 340v150M170 490h460" stroke="${GOLD}"/>
+<path d="M245 340v150M320 340v150M400 340v150M480 340v150M555 340v150" stroke="${GOLD}" stroke-width="10"/>`,
+    'ausstattung-aufzug': `
+<rect x="230" y="100" width="340" height="400" rx="12"/><path d="M400 100v400"/>
+<path d="M620 210l40-50 40 50z" fill="${GOLD}" stroke="${GOLD}"/><path d="M620 300l40 50 40-50z" fill="${GOLD}" stroke="${GOLD}"/>`,
+    'ausstattung-stellplatz': `
+<rect x="230" y="110" width="340" height="380" rx="40"/>
+<path d="M340 420V180h80a60 60 0 0 1 0 120h-80" stroke="${GOLD}" stroke-width="22"/>`,
+    'ausstattung-kueche': `
+<rect x="180" y="200" width="440" height="290" rx="10"/><path d="M180 270h440"/>
+<circle cx="300" cy="235" r="14" fill="${NAVY}" stroke="none"/><circle cx="360" cy="235" r="14" fill="${NAVY}" stroke="none"/>
+<rect x="250" y="320" width="300" height="120" rx="8" stroke="${GOLD}"/>
+<path d="M300 140c0-30 30-30 30-60M400 140c0-30 30-30 30-60M500 140c0-30 30-30 30-60" stroke="${GOLD}" stroke-width="10"/>`,
+    'ausstattung-barrierefrei': `
+<circle cx="380" cy="130" r="36" stroke="${GOLD}"/>
+<path d="M380 180v130h120l50 110" stroke="${GOLD}"/><path d="M380 240h100"/>
+<path d="M330 260a120 120 0 1 0 170 150"/>`,
+    'ausstattung-haustier': `
+<path d="M400 330c-70 0-130 70-130 120 0 40 40 50 70 40s50-10 60-10 30 0 60 10 70 0 70-40c0-50-60-120-130-120z" fill="${GOLD}" fill-opacity=".25" stroke="${GOLD}"/>
+<ellipse cx="260" cy="270" rx="42" ry="55"/><ellipse cx="350" cy="190" rx="42" ry="58"/>
+<ellipse cx="450" cy="190" rx="42" ry="58"/><ellipse cx="540" cy="270" rx="42" ry="55"/>`,
+};
+
+await mkdir(ziel, { recursive: true });
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 800, height: 600 }, deviceScaleFactor: 1 });
+for (const [name, inhalt] of Object.entries(bilder)) {
+    const svg = bild(inhalt);
+    await writeFile(`${ziel}/${name}.svg`, svg);
+    await page.setContent(`<!doctype html><body style="margin:0;background:${PAPIER}">${svg}</body>`);
+    await page.locator('svg').screenshot({ path: `${ziel}/${name}.png`, omitBackground: false });
+    console.log('gezeichnet:', name);
+}
+await browser.close();

scripts/editor-check.mjs

@@ -360,8 +360,43 @@ try {
     const previous = document.querySelector('#preview').contentDocument?.querySelector(`#${id}`)?.previousElementSibling;
     return Boolean(previous?.classList.contains('button'));
   }, headingId);
+  // Ein PDF als Linkziel: im Dialog hochladen, übernehmen, die Adresse steht im Feld.
+  await page.getByRole('button', { name: 'PDF aus Mediathek wählen', exact: true }).click();
+  const documentDialog = page.locator('dialog.document-dialog');
+  await documentDialog.waitFor();
+  await documentDialog.locator('#document-upload:enabled').waitFor({ state: 'attached' });
+  await documentDialog.locator('#document-upload').setInputFiles({ name: 'Preisliste.pdf', mimeType: 'application/pdf', buffer: Buffer.from('%PDF-1.4\n%%EOF\n') });
+  await documentDialog.locator('.document-card[aria-pressed="true"]').waitFor();
+  assert.equal(await documentDialog.locator('#document-error').isHidden(), true, 'the PDF upload reports no error');
+  const pdfAxe = await new AxeBuilder({ page }).include('dialog.document-dialog').withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']).analyze();
+  assert.deepEqual(pdfAxe.violations.map(v => v.id), [], 'the PDF dialog has no accessibility violations');
+  await documentDialog.getByRole('button', { name: 'PDF übernehmen', exact: true }).click();
+  await documentDialog.waitFor({ state: 'detached' });
+  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 ---------------------------------------------
@@ -1014,7 +1049,10 @@ try {
   // looked at from a visitor's browser: the banner has to appear, and the embed must not load.
   await page.goto(origin + '/admin/settings');
   await page.getByLabel('Einwilligungshinweis anzeigen', { exact: true }).check();
-  await page.getByLabel('Adresse der Datenschutzseite', { exact: true }).fill('grundlagen');
+  // The privacy page is chosen by search, the way the 404 page is: type, then take the hit.
+  await page.getByLabel('Datenschutzseite', { exact: true }).fill('grundlagen');
+  await page.locator('#privacyPath-results [role=option]').filter({ hasText: '/grundlagen' }).first().click();
+  assert.equal(await page.locator('.content-picker:has(#privacyPath) .picker-value').inputValue(), 'grundlagen');
   await page.getByRole('button', { name: 'Einstellungen speichern', exact: true }).click();
   await page.locator('.notice.ok').waitFor();
 
@@ -1089,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/reset-ebsolar.sh

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

scripts/reset-kantarci-immobilien.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+# Wirft die KANTARCI-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-immobilien.db"
+export MEDIA_DIRECTORY="$root/var/kantarci-immobilien-media"
+rm -f "$root/var/kantarci-immobilien.db"
+rm -rf "$root/var/kantarci-immobilien-media"
+"$php" vendor/bin/doctrine-migrations migrate --no-interaction -q
+assets="${1:-$root/var/kantarci-immobilien-assets}"
+# Logo, Hausmotiv und Symbol sind Zuschnitte aus dem gelieferten Banner, die Bildkarten
+# der Mietanfrage zeichnet Chromium (Playwright).
+"$php" scripts/build-kantarci-assets.php "$assets/kantarci-banner.jpeg" "$assets"
+node scripts/build-kantarci-options.mjs "$assets/options"
+# Die Vorlage nutzt Arial und Georgia; es gibt keine Schrift zu holen.
+"$php" -d memory_limit=512M scripts/seed-kantarci-immobilien.php "$assets"

scripts/seed-kantarci-immobilien.php

@@ -0,0 +1,733 @@
+<?php
+
+/**
+ * Baut die Landingpage „KANTARCI Immobilien – Mietanfrage“ als Inhalt dieses CMS auf.
+ *
+ * Vorlage ist das gelieferte Paket „KANTARCI-Immobilien-Landingpage.zip“ (18.09.2026): eine
+ * Next.js-Seite (app/page.tsx, app/globals.css) mit Kopf, dunklem Hero, Werteleiste, Mietanfrage
+ * und Fuß. Wortlaut, Farben (Navy #102333, Gold #b49a66), Georgia für Überschriften und Arial
+ * für den Text sind daraus übernommen. Gebaut ist alles aus gewöhnlichen Bausteinen – kein
+ * eigener Baustein, kein Plugin, keine externe Schrift.
+ *
+ * Bewusste Abweichungen:
+ *  - Die Mietanfrage ist das serverseitige Formular „mietanfrage“ dieses CMS statt der
+ *    Cloudflare-D1-Anbindung: Eingänge landen in der Verwaltung und per E-Mail. Auf Umuts Wunsch
+ *    in drei Schritten mit Bildkarten (Haushalt, Zimmer, Ausstattung) und Zusammenfassung statt
+ *    einer langen Seite. Der Einzug ist eine Auswahl statt eines Datumsfelds (der Baukasten
+ *    kennt kein Datum).
+ *  - E-Mail überall info@kantarci-immo.de: die Domain der Vorlage gibt es nicht.
+ *  - Neu sind Impressum und Datenschutz, beide Pflicht: Die Seite ist ein geschäftlicher
+ *    Auftritt (§ 5 DDG) und das Formular verarbeitet personenbezogene Daten (Art. 13 DSGVO).
+ *    Anschrift, Geschäftsführer und E-Mail hat Umut am 18.09.2026 genannt; was offen ist
+ *    (Register, Telefon, § 34c), steht als „NOCH ZU PRÜFEN“ im Text.
+ *  - Logo und Hausmotiv sind Zuschnitte aus dem Banner (scripts/build-kantarci-assets.php).
+ *  - Die Symbole der Werteleiste kommen aus dem Symbolsatz des Kerns (kein Blatt, kein Herz).
+ *
+ * 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-immobilien.sh).
+ * Erstes Argument: der Ordner mit logo-kantarci.png, haus.jpg und symbol-kantarci.png.
+ */
+
+require dirname(__DIR__).'/config/bootstrap.php';
+
+use App\Content\DocumentValidator;
+use App\Content\FormRepository;
+use App\Content\MediaLibrary;
+use App\Content\MenuRepository;
+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-immobilien')) {
+    fwrite(STDERR, "Sicherung: DATABASE_URL muss auf die KANTARCI-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());
+$menus = new MenuRepository($db, $settings);
+$forms = new FormRepository($db);
+$theme = new Theme($db);
+
+$firma = 'KANTARCI Immobilien GmbH';
+// Die Vorlage nennt immo@kantarci-immobilien.de; die Domain gibt es nicht (18.09.2026, kein
+// DNS-Eintrag). Umut hat info@kantarci-immo.de für Impressum und Datenschutz genannt, die Domain
+// hat Mailserver - deshalb steht sie überall, auch als Empfänger der Mietanfrage.
+$mail = 'info@kantarci-immo.de';
+$gf = 'Ridvan Kantarci';
+$strasse = 'Ooser Hauptstraße 51';
+$ort = '76532 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'];
+$nurUnten = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => $w, 'left' => '0px'];
+
+$section = static function (string $id, array $children, array $style = [], ?string $anchor = null): array {
+    $block = ['id' => $id, 'type' => 'section', 'children' => $children, 'style' => $style];
+    if (null !== $anchor) {
+        $block['anchor'] = $anchor;
+    }
+
+    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 – Kleinzeile, Werteleiste, Kopf, Fuß. */
+$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 $sichtbarkeit = 'all', string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'column', 'children' => $children];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ('all' !== $sichtbarkeit) {
+        $block['layout'] = ['visibility' => $sichtbarkeit];
+    }
+    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, der Verlauf über dem Hausbild. */
+$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: die Vorlage kommt ohne Pfeile aus. */
+$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 = ''): 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';
+    }
+
+    $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 = ['desktop' => ['fontSize' => '12px', 'fontWeight' => '700', 'letterSpacing' => '0.17em', 'lineHeight' => 1.6, 'margin' => ['bottom' => '20px']], 'mobile' => ['fontSize' => '11px']];
+$linkCss = "& a{color:#102333;text-decoration:underline;text-underline-offset:3px}\n& a:hover{color:#88703f}";
+// Die Mietanfrage in drei Schritten: volle Breite statt der 640 px des Kerns, zwei Spalten dort,
+// wo zwei kurze Felder nebeneinander passen. Eigenes CSS kennt kein @media: die Raster füllen
+// deshalb mit auto-fill, am Telefon bleibt so eine Spalte. Felder über `data-label`, weil es kein
+// :nth-child kennt; Deckkraft der Nebentexte auf 1, sonst fallen sie unter 4,5:1.
+$formularCss = '& .block-form{max-width:none}
+& .form-step{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));column-gap:16px;row-gap:18px}
+& .form-step>.form-field{grid-column:1/-1}
+& .form-step>.form-step-title{grid-column:1/-1}
+& .form-step>.form-step-intro{grid-column:1/-1}
+& .form-step>[data-label="Vorname"]{grid-column:span 1}
+& .form-step>[data-label="Nachname"]{grid-column:span 1}
+& .form-step>[data-label="Einzugstermin"]{grid-column:span 1}
+& .form-step>[data-label="Max. Warmmiete pro Monat"]{grid-column:span 1}
+& .form-step-title{font-family:Georgia,serif;font-size:22px;font-weight:400;color:#142535;margin-bottom:4px}
+& .form-step-intro{font-size:14px;color:#5f6b74;opacity:1}
+& .form-progress-step{opacity:1;color:#5f6b74}
+& .form-progress-step[aria-current]{color:#142535}
+& .form-field{align-content:start}
+& .form-field label{font-size:14px;font-weight:600;color:#142535}
+& .form-field input{background:#fcfcfc;border:1px solid #dce0e2;border-radius:3px;padding:12px 13px;font-size:16px;color:#142535}
+& .form-field select{background:#fcfcfc;border:1px solid #dce0e2;border-radius:3px;padding:12px 13px;font-size:16px;color:#142535}
+& .form-field textarea{background:#fcfcfc;border:1px solid #dce0e2;border-radius:3px;padding:12px 13px;font-size:16px;color:#142535;min-height:110px}
+& .form-choice legend{font-size:14px;font-weight:600;color:#142535}
+& .form-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
+& [data-label="Ausstattung"] .form-choice-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:10px}
+& .form-step>.form-summary-body{grid-column:1/-1}
+& .form-summary-title{font-family:Arial,sans-serif;font-size:15px;font-weight:700;letter-spacing:0}
+& .form-summary-step{border-color:#dce0e2;border-radius:6px}
+& .form-choice-card label{border-color:#dce0e2;border-radius:6px;font-size:14px}
+& .field-note{font-size:13px;color:#5f6b74;opacity:1}
+& .required-mark{color:#88703f}
+& .check-row label{font-weight:400;font-size:14px;line-height:1.65;color:#576570}
+& .cms-button{justify-content:center;background:#142535;color:#fff;border-radius:3px}
+& .cms-button:hover{background:#234256;color:#fff}';
+
+/** Die Kleinzeile in Versalien, wahlweise mit dem kurzen Goldstrich davor. */
+$kleinzeile = static function (string $id, string $inhalt, string $farbe = '@gold-text', bool $strich = false) use ($text, $zeile, $flaeche, $kleinStil): array {
+    $zeilenText = $text($id.'-text', $inhalt, ['desktop' => [...$kleinStil['desktop'], 'color' => $farbe, 'margin' => ['bottom' => '0px']], 'mobile' => $kleinStil['mobile']]);
+    if (!$strich) {
+        return [...$zeilenText, 'id' => $id, 'style' => ['desktop' => [...$kleinStil['desktop'], 'color' => $farbe], 'mobile' => $kleinStil['mobile']]];
+    }
+
+    return $zeile($id, [
+        $flaeche($id.'-strich', ['desktop' => ['width' => '27px', 'height' => '1px', 'backgroundColor' => '@gold', 'flexShrink' => 0]], 'min-height:0'),
+        $zeilenText,
+    ], '12px', ['margin' => ['top' => '0px', 'bottom' => '20px']]);
+};
+
+// ---------------------------------------------------------------------------------------------
+// Website, Gestaltung, Medien, Formular
+// ---------------------------------------------------------------------------------------------
+
+$db->insert('website', ['id' => 'default', 'name' => 'KANTARCI Immobilien', 'default_locale' => 'de', 'theme' => '{}']);
+
+$theme->save(
+    [
+        ['key' => 'navy', 'name' => 'Navy', 'value' => '#102333'],
+        ['key' => 'tinte', 'name' => 'Schrift', 'value' => '#142535'],
+        ['key' => 'gold', 'name' => 'Gold (Linien, Flächen)', 'value' => '#b49a66'],
+        ['key' => 'gold-knopf', 'name' => 'Gold als Knopf', 'value' => '#bda16a'],
+        ['key' => 'gold-hell', 'name' => 'Gold auf Navy', 'value' => '#cbb17b'],
+        ['key' => 'gold-text', 'name' => 'Gold als Schrift auf Weiß', 'value' => '#88703f'],
+        ['key' => 'text', 'name' => 'Fließtext', 'value' => '#5f6b74'],
+        ['key' => 'text-navy', 'name' => 'Fließtext auf Navy', 'value' => '#d1d8de'],
+        ['key' => 'hell', 'name' => 'Helle Fläche', 'value' => '#f1f3f3'],
+        ['key' => 'linie', 'name' => 'Trennlinie', 'value' => '#e1e4e5'],
+        ['key' => 'papier', 'name' => 'Papier', 'value' => '#ffffff'],
+    ],
+    [
+        // Die Vorlage lädt keine Webschrift: Arial für Text, Georgia für Überschriften.
+        ['key' => 'body', 'name' => 'Fließtext', 'family' => 'Arial', 'source' => 'system', 'weights' => [400, 600, 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' => '@tinte', 'backgroundColor' => '@papier', 'linkColor' => '@tinte', 'containerWidth' => '1140px', 'headingScale' => 1.25, 'linkUnderline' => false, 'imageRadius' => '0px'],
+    ['shape' => 'square', 'appearance' => 'solid', 'size' => 'normal', 'fontFamily' => 'inherit', 'fontSize' => 15, 'fontWeight' => 700, 'letterSpacing' => 0, 'textTransform' => 'none', 'backgroundColor' => '@gold-knopf', 'color' => '@navy', 'hoverBackgroundColor' => '#d0b582', 'hoverColor' => '@navy'],
+);
+echo "Farben, Schriften und Buttons gesetzt\n";
+
+$medien = [];
+foreach ([
+    'logo' => ['logo-kantarci.png', 'KANTARCI Immobilien GmbH'],
+    'haus' => ['haus.jpg', 'Modernes Wohnhaus mit begrünten Balkonen'],
+    'symbol' => ['symbol-kantarci.png', 'Bildmarke von KANTARCI Immobilien'],
+    // Die Bildkarten der Mietanfrage (scripts/build-kantarci-options.mjs).
+    'haushalt-allein' => ['options/haushalt-allein.png', 'Symbol: eine Person'],
+    'haushalt-zu-zweit' => ['options/haushalt-zu-zweit.png', 'Symbol: zwei Personen'],
+    'haushalt-familie' => ['options/haushalt-familie.png', 'Symbol: zwei Erwachsene und ein Kind'],
+    'haushalt-wg' => ['options/haushalt-wg.png', 'Symbol: drei Personen'],
+    'zimmer-1' => ['options/zimmer-1.png', 'Grundriss mit einem Zimmer'],
+    'zimmer-2' => ['options/zimmer-2.png', 'Grundriss mit zwei Zimmern'],
+    'zimmer-3' => ['options/zimmer-3.png', 'Grundriss mit drei Zimmern'],
+    'zimmer-4' => ['options/zimmer-4.png', 'Grundriss mit vier Zimmern'],
+    'ausstattung-balkon' => ['options/ausstattung-balkon.png', 'Symbol: Balkon'],
+    'ausstattung-aufzug' => ['options/ausstattung-aufzug.png', 'Symbol: Aufzug'],
+    'ausstattung-stellplatz' => ['options/ausstattung-stellplatz.png', 'Symbol: Parkplatz'],
+    'ausstattung-kueche' => ['options/ausstattung-kueche.png', 'Symbol: Küche'],
+    'ausstattung-barrierefrei' => ['options/ausstattung-barrierefrei.png', 'Symbol: Rollstuhl'],
+    'ausstattung-haustier' => ['options/ausstattung-haustier.png', 'Symbol: Pfote'],
+] 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";
+}
+
+// Drei Schritte: wer einzieht, wie gewohnt werden soll, wie wir Sie erreichen. Haushalt, Zimmer
+// und Ausstattung sind Bildkarten; die Personenzahl fragt das Formular nur, wo sie offen ist.
+$karten = static fn (array $zuordnung): array => array_map(static fn (string $schluessel): string => $medien[$schluessel]['id'], $zuordnung);
+$forms->save('mietanfrage', 'Mietanfrage', [
+    ['name' => 'schritt_haushalt', 'type' => 'step', 'label' => 'Ihr Haushalt', 'help' => 'Wer zieht in die neue Wohnung ein?'],
+    ['name' => 'haushalt', 'type' => 'radio', 'label' => 'Wer zieht ein?', 'required' => true, 'options' => ['Allein', 'Zu zweit', 'Familie mit Kindern', 'Wohngemeinschaft'],
+        'images' => $karten(['Allein' => 'haushalt-allein', 'Zu zweit' => 'haushalt-zu-zweit', 'Familie mit Kindern' => 'haushalt-familie', 'Wohngemeinschaft' => 'haushalt-wg'])],
+    ['name' => 'personen', 'type' => 'number', 'label' => 'Personen im Haushalt', 'required' => true, 'min' => 2, 'max' => 30,
+        'showIf' => ['field' => 'haushalt', 'values' => ['Familie mit Kindern', 'Wohngemeinschaft']]],
+
+    ['name' => 'schritt_wohnen', 'type' => 'step', 'label' => 'Ihre Wohnwünsche', 'help' => 'Alles hier ist freiwillig – je mehr wir wissen, desto besser passt unser Vorschlag.'],
+    ['name' => 'zimmer', 'type' => 'radio', 'label' => 'Wie viele Zimmer?', 'required' => false, 'options' => ['1 Zimmer', '2 Zimmer', '3 Zimmer', '4 und mehr'],
+        'images' => $karten(['1 Zimmer' => 'zimmer-1', '2 Zimmer' => 'zimmer-2', '3 Zimmer' => 'zimmer-3', '4 und mehr' => 'zimmer-4'])],
+    ['name' => 'ausstattung', 'type' => 'checkboxes', 'label' => 'Ausstattung', 'required' => false, 'help' => 'Was ist Ihnen wichtig? Mehrfachauswahl möglich.',
+        'options' => ['Balkon oder Terrasse', 'Aufzug', 'Stellplatz', 'Einbauküche', 'Barrierefrei', 'Haustier erlaubt'],
+        'images' => $karten(['Balkon oder Terrasse' => 'ausstattung-balkon', 'Aufzug' => 'ausstattung-aufzug', 'Stellplatz' => 'ausstattung-stellplatz', 'Einbauküche' => 'ausstattung-kueche', 'Barrierefrei' => 'ausstattung-barrierefrei', 'Haustier erlaubt' => 'ausstattung-haustier'])],
+    ['name' => 'einzug', 'type' => 'select', 'label' => 'Einzugstermin', 'required' => false, 'options' => ['Ab sofort', 'In 1 bis 3 Monaten', 'In 3 bis 6 Monaten', 'Später oder flexibel']],
+    ['name' => 'warmmiete', 'type' => 'number', 'label' => 'Max. Warmmiete pro Monat', 'required' => false, 'min' => 1, 'max' => 100000, 'unit' => '€'],
+    ['name' => 'objekt', 'type' => 'text', 'label' => 'Gewünschte Wohnung / Objektadresse', 'required' => false, 'help' => 'Noch kein bestimmtes Objekt? Lassen Sie das Feld einfach frei.'],
+
+    ['name' => 'schritt_kontakt', 'type' => 'step', 'label' => 'Ihre Kontaktdaten', 'help' => 'Damit wir uns persönlich bei Ihnen melden können.'],
+    ['name' => 'vorname', 'type' => 'text', 'label' => 'Vorname', 'required' => true],
+    ['name' => 'nachname', 'type' => 'text', 'label' => 'Nachname', 'required' => true],
+    ['name' => 'email', 'type' => 'email', 'label' => 'E-Mail-Adresse', 'required' => true],
+    ['name' => 'telefon', 'type' => 'phone', 'label' => 'Telefonnummer', 'required' => false, 'help' => 'Für eine persönliche Rückmeldung'],
+    ['name' => 'anschrift', 'type' => 'text', 'label' => 'Aktuelle Anschrift', 'required' => false, 'help' => 'Straße, Hausnummer, PLZ und Ort'],
+    ['name' => 'nachricht', 'type' => 'textarea', 'label' => 'Ihre Nachricht', 'required' => false, 'help' => 'Was ist Ihnen beim Wohnen sonst noch wichtig?'],
+    ['name' => 'datenschutz', 'type' => 'consent', 'label' => 'Ich bin einverstanden, dass KANTARCI meine Angaben zur Bearbeitung meiner Mietanfrage speichert und mich kontaktiert.'],
+], ['recipient' => $mail, 'subject' => 'Neue Mietanfrage über die Landingpage', 'success' => 'Vielen Dank für Ihr Interesse. Ihre Mietanfrage ist angekommen – wir melden uns persönlich bei Ihnen.', 'replyToField' => 'email', 'buttonLabel' => 'Mietanfrage absenden', 'summary' => true], 0);
+echo "Formular angelegt: mietanfrage\n";
+
+// ---------------------------------------------------------------------------------------------
+// Kopf- und Fußbereich
+// ---------------------------------------------------------------------------------------------
+
+$kopf = [
+    'schemaVersion' => $SCHEMA, 'title' => 'Kopfbereich', 'description' => 'Erscheint auf jeder Seite über dem Inhalt.',
+    'blocks' => [
+        $section('kopf', [
+            $zeile('kopf-zeile', [
+                $column('kopf-marke', [
+                    $bild('kopf-logo', $medien['logo'], 'KANTARCI Immobilien GmbH – zur Startseite', [
+                        'desktop' => ['maxWidth' => '300px', 'margin' => $seiten('0px')],
+                        'mobile' => ['maxWidth' => '220px'],
+                    ], '/'),
+                ], ['desktop' => ['flexShrink' => 1, 'minWidth' => '0']]),
+                $column('kopf-kontakt', [
+                    $zeile('kopf-kontakt-zeile', [
+                        $symbol('kopf-kontakt-symbol', 'mail', 20, ['desktop' => ['color' => '@navy', 'flexShrink' => 0]]),
+                        $text('kopf-kontakt-link', '<a href="mailto:'.$mail.'">Kontakt aufnehmen</a>', ['desktop' => ['fontSize' => '14px', 'fontWeight' => '600', 'margin' => ['bottom' => '0px']]], "& a{color:#102333}\n& a:hover{color:#88703f}"),
+                    ], '10px'),
+                ], ['desktop' => ['flexShrink' => 0]], 'hide-mobile'),
+            ], '24px', ['justifyContent' => 'space-between']),
+        ], [
+            'desktop' => ['backgroundColor' => '@papier', 'padding' => ['top' => '22px', 'bottom' => '22px']],
+            'mobile' => ['padding' => ['top' => '16px', 'bottom' => '16px']],
+        ]),
+    ],
+];
+
+$fuss = [
+    'schemaVersion' => $SCHEMA, 'title' => 'Fußbereich', 'description' => 'Erscheint auf jeder Seite unter dem Inhalt.',
+    'blocks' => [
+        $section('fuss', [
+            $zeile('fuss-oben', [
+                $column('fuss-marke', [
+                    $text('fuss-name', 'KANTARCI', ['desktop' => ['fontFamily' => 'heading', 'fontSize' => '22px', 'letterSpacing' => '0.14em', 'lineHeight' => 1.3, 'color' => '@papier', 'margin' => ['bottom' => '0px']]]),
+                    $text('fuss-zusatz', 'IMMOBILIEN GMBH', ['desktop' => ['fontSize' => '10px', 'letterSpacing' => '0.22em', 'color' => '@gold-hell', 'margin' => ['bottom' => '0px']]]),
+                ]),
+                $column('fuss-spruch', [
+                    $text('fuss-spruch-text', 'Lebensraum schaffen. Zukunft bauen.', ['desktop' => ['fontSize' => '13px', 'color' => '#bac4cd', 'margin' => ['bottom' => '0px']]]),
+                ]),
+                $column('fuss-mail', [
+                    $text('fuss-mail-text', '<a href="mailto:'.$mail.'">'.$mail.'</a>', ['desktop' => ['fontSize' => '13px', 'margin' => ['bottom' => '0px']]], "& a{color:#bac4cd;overflow-wrap:anywhere}\n& a:hover{color:#fff;text-decoration:underline}"),
+                ]),
+            ], '24px', ['justifyContent' => 'space-between', 'flexWrap' => 'wrap', 'padding' => ['top' => '34px', 'bottom' => '26px'], 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#243a4c'],
+                ['flexDirection' => 'column', 'alignItems' => 'flex-start', 'gap' => '12px']),
+            $zeile('fuss-unten', [
+                $text('fuss-copyright', '© 2026 '.$firma, ['desktop' => ['fontSize' => '12px', 'color' => '#bac4cd', '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' => '12px', 'gap' => '4px', 'color' => '#bac4cd']],
+                        'css' => "& a{color:#bac4cd}\n& a:hover{color:#fff}"],
+                    $text('fuss-agentur', '<a href="https://kant-it.de">Website by Kant-IT Solutions</a>', ['desktop' => ['fontSize' => '12px', 'margin' => ['bottom' => '0px']]], "& a{color:#bac4cd}\n& a:hover{color:#fff}"),
+                ], '22px', ['flexWrap' => 'wrap'], ['rowGap' => '10px', 'columnGap' => '18px']),
+            ], '24px', ['justifyContent' => 'space-between', 'flexWrap' => 'wrap', 'padding' => ['top' => '20px', 'bottom' => '26px']],
+                ['flexDirection' => 'column', 'alignItems' => 'flex-start', 'gap' => '12px']),
+        ], [
+            'desktop' => ['backgroundColor' => '@navy', 'color' => '#bac4cd', 'padding' => ['top' => '0px', 'bottom' => '0px']],
+        ]),
+    ],
+];
+
+$partials->create('header', 'default', 'Kopfbereich', $kopf);
+$partials->create('footer', 'default', 'Fußbereich', $fuss);
+echo "Kopf- und Fußbereich angelegt\n";
+
+/** Eine Rechtsseite: Kleinzeile, Titel und Vorspann auf Navy, 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', true),
+        $heading($praefix.'-h1', $titel, 1, [
+            'desktop' => ['fontSize' => '52px', 'lineHeight' => 1.1, 'letterSpacing' => '-0.025em', 'color' => '@papier', 'margin' => ['bottom' => '20px']],
+            'mobile' => ['fontSize' => '38px'],
+        ]),
+        $text($praefix.'-vorspann', $vorspann, [
+            'desktop' => ['maxWidth' => '640px', 'fontSize' => '17px', 'lineHeight' => 1.75, 'color' => '@text-navy', 'margin' => ['bottom' => '0px']],
+            'mobile' => ['fontSize' => '16px'],
+        ]),
+    ], [
+        'desktop' => ['backgroundColor' => '@navy', 'color' => '@papier', 'padding' => ['top' => '72px', 'bottom' => '64px']],
+        'mobile' => ['padding' => ['top' => '44px', 'bottom' => '40px']],
+    ]);
+
+    $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' => '@tinte', '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' => '@linie', '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];
+};
+
+// ---------------------------------------------------------------------------------------------
+// Startseite
+// ---------------------------------------------------------------------------------------------
+
+$wertStil = ['desktop' => ['fontSize' => '14px', 'margin' => ['bottom' => '0px']], 'mobile' => ['fontSize' => '12px', 'textAlign' => 'center', 'lineHeight' => 1.5]];
+$wert = static fn (string $id, string $icon, string $label): array => $zeile('wert-'.$id, [
+    $symbol('wert-'.$id.'-symbol', $icon, 24, ['desktop' => ['color' => '@gold-text', 'flexShrink' => 0]]),
+    $text('wert-'.$id.'-text', $label, $wertStil),
+], '13px', [], ['flexDirection' => 'column', 'gap' => '9px', 'flexGrow' => 1, 'flexBasis' => '0']);
+
+$schritt = static fn (string $n, string $titel, string $inhalt): array => $zeile('schritt-'.$n, [
+    $text('schritt-'.$n.'-nummer', $n, ['desktop' => ['fontFamily' => 'heading', 'fontSize' => '22px', 'lineHeight' => 1.2, 'color' => '@gold-text', 'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#c9b58e', 'padding' => ['top' => '8px'], 'margin' => ['bottom' => '0px'], 'flexShrink' => 0]]),
+    $text('schritt-'.$n.'-text', '<strong>'.$titel.'</strong>'.$inhalt, ['desktop' => ['fontSize' => '14px', 'lineHeight' => 1.65, 'color' => '@text', 'maxWidth' => '290px', 'margin' => ['top' => '5px', 'bottom' => '0px']]],
+        '& strong{display:block;color:#102333;font-size:15px;margin-bottom:4px}'),
+], '17px', ['alignItems' => 'flex-start', 'margin' => ['top' => '22px']]);
+
+$startseite = [
+    'schemaVersion' => $SCHEMA,
+    'title' => 'Mietanfrage',
+    'description' => 'Ihr neues Zuhause beginnt hier. Melden Sie Ihr Interesse an einer Mietwohnung bei KANTARCI Immobilien an – persönlich und unverbindlich.',
+    'blocks' => [
+        // 1 – Hero: Navy, Text links, das Haus rechts mit Verlauf und Bildzeile.
+        $section('hero', [
+            $row('hero-zeile', [
+                $column('hero-text', [
+                    $kleinzeile('hero-label', 'KANTARCI IMMOBILIEN', '#d1bb90', true),
+                    $heading('hero-titel', 'Hier beginnt Ihr<br><em>neues Zuhause.</em>', 1, [
+                        'desktop' => ['fontSize' => '62px', 'lineHeight' => 1.09, 'letterSpacing' => '-0.025em', 'color' => '@papier', 'margin' => ['bottom' => '25px']],
+                        'tablet' => ['fontSize' => '45px'],
+                        'mobile' => ['fontSize' => '42px'],
+                    ], '& em{font-style:normal;color:#cbb17b}'),
+                    $text('hero-intro', 'Ein Ort zum Ankommen. Raum für Ihr Leben. Entdecken Sie neue Mietwohnungen und teilen Sie uns mit, wie Sie wohnen möchten.', [
+                        'desktop' => ['maxWidth' => '450px', 'fontSize' => '16px', 'lineHeight' => 1.85, 'color' => '@text-navy', 'margin' => ['bottom' => '30px']],
+                        'mobile' => ['fontSize' => '15px'],
+                    ]),
+                    $button('hero-knopf', 'Jetzt Mietinteresse anmelden', '#mietanfrage', ['desktop' => ['margin' => ['top' => '0px']]]),
+                    $text('hero-notiz', 'Unverbindlich. Persönlich. In wenigen Minuten.', ['desktop' => ['fontSize' => '12px', 'color' => '#b1bec7', 'margin' => ['top' => '14px', 'bottom' => '0px']]]),
+                ], [
+                    'desktop' => ['display' => 'flex', 'flexDirection' => 'column', 'alignItems' => 'flex-start', 'justifyContent' => 'center', 'padding' => ['top' => '64px', 'bottom' => '60px']],
+                    'tablet' => ['padding' => ['top' => '44px', 'bottom' => '44px']],
+                    'mobile' => ['padding' => ['top' => '40px', 'bottom' => '8px']],
+                ]),
+                $column('hero-visual', [
+                    $bild('hero-bild', $medien['haus'], 'Modernes Wohnhaus mit begrünten Balkonen', [
+                        'desktop' => ['imageHeight' => '480px', 'objectFit' => 'cover', 'objectPosition' => 'top left', 'margin' => $seiten('0px')],
+                        'tablet' => ['imageHeight' => '460px'],
+                        'mobile' => ['imageHeight' => '280px'],
+                    ], null, '& img{display:block;width:100%}'),
+                    $flaeche('hero-verlauf', ['desktop' => ['position' => 'absolute', 'left' => '0px', 'right' => '0px', 'bottom' => '0px', 'width' => 'auto', 'height' => 'auto', 'zIndex' => 1]], 'top:45%;min-height:0;background:linear-gradient(transparent,rgba(16,35,51,.88));pointer-events:none'),
+                    $column('hero-bildzeile', [
+                        $text('hero-bildzeile-klein', 'RAUM FÜR MORGEN', ['desktop' => ['fontSize' => '11px', 'letterSpacing' => '0.18em', 'color' => '#f2e4c6', 'margin' => ['bottom' => '4px']]]),
+                        $text('hero-bildzeile-satz', 'Wohnen. Wohlfühlen. Ankommen.', ['desktop' => ['fontFamily' => 'heading', 'fontSize' => '25px', 'lineHeight' => 1.3, 'color' => '@papier', 'margin' => ['bottom' => '0px']], 'mobile' => ['fontSize' => '21px']]),
+                    ], ['desktop' => ['position' => 'absolute', 'left' => '32px', 'right' => '32px', 'bottom' => '28px', 'zIndex' => 2], 'mobile' => ['left' => '20px', 'bottom' => '18px']]),
+                ], [
+                    'desktop' => ['position' => 'relative', 'overflow' => 'hidden', 'backgroundColor' => '#d9dde0', 'minHeight' => '480px'],
+                    'tablet' => ['minHeight' => '460px'],
+                    'mobile' => ['minHeight' => '280px'],
+                ]),
+            ], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '56px', 'alignItems' => 'stretch', 'margin' => ['top' => '0px']],
+                'tablet' => ['gap' => '28px'],
+                'mobile' => ['gap' => '24px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '@navy', 'color' => '@papier', 'padding' => ['top' => '0px', 'bottom' => '0px']],
+            'mobile' => ['padding' => ['top' => '0px', 'bottom' => '24px']],
+        ], 'start'),
+
+        // 2 – Die Werteleiste aus dem Banner.
+        $section('werte', [
+            $zeile('werte-zeile', [
+                $wert('modern', 'star', 'Modern & nachhaltig'),
+                $wert('komfort', 'home', 'Zeitgemäßer Wohnkomfort'),
+                $wert('leben', 'people', 'Zuhause für jedes Leben'),
+            ], '20px', ['justifyContent' => 'space-between', 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e4e6e7', 'padding' => ['top' => '26px', 'bottom' => '26px']],
+                ['alignItems' => 'flex-start', 'gap' => '14px', 'padding' => ['top' => '22px', 'bottom' => '22px']]),
+        ], ['desktop' => ['padding' => ['top' => '0px', 'bottom' => '0px']]]),
+
+        // 3 – Mietanfrage: Einleitung links, Formularkarte rechts.
+        $section('anfrage', [
+            $row('anfrage-zeile', [
+                $column('anfrage-text', [
+                    $kleinzeile('anfrage-label', 'IHRE MIETANFRAGE'),
+                    $heading('anfrage-h2', 'Ein paar Angaben.<br>Viele Möglichkeiten.', 2, [
+                        'desktop' => ['fontSize' => '38px', 'lineHeight' => 1.2, 'letterSpacing' => '-0.02em', 'margin' => ['bottom' => '22px']],
+                        'tablet' => ['fontSize' => '33px'],
+                        'mobile' => ['fontSize' => '34px'],
+                    ]),
+                    $text('anfrage-intro', 'Sie interessieren sich für eine bestimmte Wohnung oder suchen noch das passende Zuhause? Erzählen Sie uns kurz von Ihren Wünschen.', [
+                        'desktop' => ['maxWidth' => '350px', 'fontSize' => '16px', 'lineHeight' => 1.8, 'color' => '@text', 'margin' => ['bottom' => '12px']],
+                        'mobile' => ['maxWidth' => '100%'],
+                    ]),
+                    $schritt('01', 'Anfrage ausfüllen', 'Haushalt, Wohnwünsche und Kontaktdaten – in drei kurzen Schritten.'),
+                    $schritt('02', 'Persönlich ins Gespräch kommen', 'Wir melden uns bei Ihnen, um die Möglichkeiten zu besprechen.'),
+                    $zeile('anfrage-direkt', [
+                        $symbol('anfrage-direkt-symbol', 'mail', 24, ['desktop' => ['color' => '@gold-text', 'flexShrink' => 0]]),
+                        $text('anfrage-direkt-text', '<strong>Lieber direkt schreiben?</strong><a href="mailto:'.$mail.'">'.$mail.'</a>', ['desktop' => ['fontSize' => '14px', 'lineHeight' => 1.6, 'margin' => ['bottom' => '0px']]],
+                            "& strong{display:block;color:#102333}\n& a{color:#5f6b74;overflow-wrap:anywhere}\n& a:hover{color:#88703f;text-decoration:underline}"),
+                    ], '15px', ['borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '26px'], 'margin' => ['top' => '38px']], ['margin' => ['top' => '26px'], 'padding' => ['top' => '20px']]),
+                ], ['desktop' => ['padding' => ['top' => '14px']], 'mobile' => ['padding' => ['top' => '0px']]]),
+                $column('anfrage-karte', [
+                    $zeile('anfrage-karte-kopf', [
+                        $column('anfrage-karte-titel', [
+                            $heading('anfrage-karte-h3', 'Ihr Weg zum neuen Zuhause', 3, ['desktop' => ['fontFamily' => 'body', 'fontSize' => '20px', 'fontWeight' => '600', 'letterSpacing' => '-0.015em', 'lineHeight' => 1.35, 'margin' => ['bottom' => '5px']]]),
+                            $text('anfrage-karte-pflicht', 'In drei kurzen Schritten. Pflichtfelder sind mit * markiert.', ['desktop' => ['fontSize' => '13px', 'color' => '@text', 'margin' => ['bottom' => '0px']]]),
+                        ]),
+                        $symbol('anfrage-karte-symbol', 'home', 32, ['desktop' => ['color' => '@gold-text', 'flexShrink' => 0]]),
+                    ], '16px', ['justifyContent' => 'space-between', 'alignItems' => 'flex-start', 'margin' => ['top' => '0px', 'bottom' => '28px'], 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#edf0f0', 'padding' => ['bottom' => '22px']]),
+                    ['id' => 'anfrage-formular', 'type' => 'form', 'props' => ['form' => 'mietanfrage'], 'css' => $formularCss],
+                    $text('anfrage-hinweis', 'Ihre Angaben werden nur für Ihre Mietanfrage verwendet – mehr dazu in den <a href="/datenschutz">Datenschutzhinweisen</a>. Bitte senden Sie hier keine Ausweiskopien oder anderen vertraulichen Unterlagen.', [
+                        'desktop' => ['fontSize' => '13px', 'lineHeight' => 1.65, 'color' => '@text', 'margin' => ['top' => '18px', 'bottom' => '0px']],
+                    ], $linkCss),
+                    $text('anfrage-unverbindlich', '✓ Unverbindliche Anfrage – kein Mietvertragsabschluss.', ['desktop' => ['fontSize' => '12px', 'color' => '@text', 'textAlign' => 'center', 'margin' => ['top' => '12px', 'bottom' => '0px']]]),
+                ], [
+                    'desktop' => ['backgroundColor' => '@papier', 'borderWidth' => $seiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e2e5e6', 'borderRadius' => ['topLeft' => '7px', 'topRight' => '7px', 'bottomRight' => '7px', 'bottomLeft' => '7px'], 'padding' => ['top' => '32px', 'right' => '34px', 'bottom' => '32px', 'left' => '34px'], 'shadowY' => '12px', 'shadowBlur' => '40px', 'shadowColor' => '#14253510'],
+                    'tablet' => ['padding' => ['top' => '26px', 'right' => '24px', 'bottom' => '26px', 'left' => '24px']],
+                    'mobile' => ['padding' => ['top' => '25px', 'right' => '20px', 'bottom' => '25px', 'left' => '20px']],
+                ]),
+            ], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '65px', 'alignItems' => 'flex-start', 'margin' => ['top' => '0px']],
+                'tablet' => ['gap' => '32px'],
+                'mobile' => ['gap' => '26px'],
+            ]),
+        ], [
+            'desktop' => ['padding' => ['top' => '74px', 'bottom' => '84px']],
+            'tablet' => ['padding' => ['top' => '55px', 'bottom' => '60px']],
+            'mobile' => ['padding' => ['top' => '44px', 'bottom' => '48px']],
+        ], 'mietanfrage'),
+    ],
+];
+
+// ---------------------------------------------------------------------------------------------
+// Seiten anlegen und veröffentlichen
+// ---------------------------------------------------------------------------------------------
+
+$erstellt = [];
+$anlegen = static function (string $slug, array $dokument, string $seoTitel = '', string $teilbild = '') use ($pages, $db, &$erstellt): 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']);
+    $erstellt[$slug] = $id;
+    echo 'Seite angelegt: /'.$db->fetchOne('SELECT path FROM page WHERE id = ?', [$id])."\n";
+
+    return $id;
+};
+
+// Der Text des Hero spielt beim Laden, das Hausbild bleibt ohne Einblendung (LCP).
+$startseite = $einblenden($startseite, [
+    'hero-label' => ['fade'],
+    'hero-titel' => ['rise', 'short'],
+    'hero-intro' => ['rise', 'medium'],
+    'hero-knopf' => ['rise', 'long'],
+    'hero-notiz' => ['fade', 'long'],
+    'anfrage-text' => ['rise'],
+    'anfrage-karte' => ['rise', 'short'],
+]);
+
+$anlegen('home', $startseite, 'Mietanfrage | KANTARCI Immobilien GmbH', $medien['haus']['id']);
+
+$pruefen = static fn (string $was): string => '<strong>NOCH ZU PRÜFEN:</strong> '.$was;
+
+$anlegen('impressum', [
+    'schemaVersion' => $SCHEMA, 'title' => 'Impressum',
+    'description' => 'Anbieterangaben der KANTARCI Immobilien GmbH.',
+    'blocks' => [
+        ...$rechtsseite('impressum', 'RECHTLICHE ANGABEN', 'Impressum', 'Angaben gemäß § 5 DDG und § 18 Abs. 2 MStV.', [
+            ['Anbieterin', $firma.'<br>'.$strasse.'<br>'.$ort],
+            ['Vertreten durch', $gf.', Geschäftsführer'],
+            ['Registereintrag', $pruefen('Handelsregisternummer (HRB …) und Registergericht (Amtsgericht …).')],
+            ['Kontakt', "E-Mail: <a href=\"mailto:$mail\">$mail</a><br>".$pruefen('Telefonnummer ergänzen – das Gesetz verlangt neben der E-Mail einen zweiten schnellen Kontaktweg.')],
+            ['Umsatzsteuer', $pruefen('Umsatzsteuer-Identifikationsnummer nach § 27a UStG, falls vorhanden.')],
+            ['Aufsichtsbehörde', $pruefen('Wer Wohnungen für Dritte vermittelt oder verwaltet, braucht eine Erlaubnis nach § 34c GewO; dann die zuständige Erlaubnisbehörde hier eintragen. Vermietet die GmbH nur eigene Wohnungen, entfällt die Angabe.')],
+            ['Verantwortlich für den Inhalt', $gf.', 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 und Hausmotiv: '.$firma.'. '.$pruefen('Urheber und Lizenz des Hausfotos eintragen, falls es nicht von KANTARCI selbst stammt.')],
+        ]),
+    ],
+], 'Impressum | '.$firma);
+
+$anlegen('datenschutz', [
+    'schemaVersion' => $SCHEMA, 'title' => 'Datenschutz',
+    'description' => 'Wie die KANTARCI Immobilien GmbH Daten beim Besuch der Website und bei einer Mietanfrage verarbeitet.',
+    'blocks' => [
+        ...$rechtsseite('datenschutz', 'IHRE DATEN', 'Datenschutzhinweise', 'Hier erfahren Sie, welche Daten beim Besuch dieser Website und bei Ihrer Mietanfrage verarbeitet werden – und welche Rechte Sie haben.', [
+            ['1. Verantwortliche', "$firma, $strasse, $ort, vertreten durch den Geschäftsführer $gf. E-Mail <a href=\"mailto:$mail\">$mail</a>."],
+            ['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. Mietanfrage', 'Wenn Sie das Formular absenden, verarbeiten wir Ihre Kontaktdaten (Name, E-Mail, auf Wunsch Telefon und Anschrift) und Ihre Wohnwünsche (etwa Haushaltsgröße, Zimmerzahl, Einzug, Mietobergrenze und Ihre Nachricht), um Ihre Anfrage zu bearbeiten und Ihnen passende Wohnungen anzubieten. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO (Anbahnung eines Mietvertrags). Pflichtangaben sind nur Name, E-Mail und Haushaltsgröße; ohne sie können wir die Anfrage nicht bearbeiten. Das Formular schützt sich gegen automatisierte Eingaben, ohne dafür Dienste Dritter zu laden.'],
+            ['5. Wie lange wir speichern', 'Anfragedaten löschen wir, sobald sie für die Bearbeitung nicht mehr nötig sind – spätestens sechs Monate nach der letzten Kontaktaufnahme, wenn kein Mietverhältnis entsteht. Entsteht ein Mietverhältnis, gelten für die dann anfallenden Unterlagen die gesetzlichen Aufbewahrungsfristen.<br><br>'.$pruefen('Frist mit der Praxis abgleichen.')],
+            ['6. Empfänger', 'Ihre Angaben erreichen uns per E-Mail und liegen in der Verwaltung dieser Website. Darüber hinaus geben wir sie nicht weiter, außer wir sind dazu gesetzlich verpflichtet.<br><br>'.$pruefen('E-Mail-Anbieter und Hostingdienst als Auftragsverarbeiter benennen.')],
+            ['7. 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. Eine erteilte Einwilligung können Sie jederzeit mit Wirkung für die Zukunft widerrufen.'],
+            ['8. 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 | '.$firma);
+
+$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-hell', true),
+            $heading('fehler-titel', 'Diese Seite<br><em>gibt es nicht.</em>', 1, [
+                'desktop' => ['fontSize' => '52px', 'lineHeight' => 1.1, 'letterSpacing' => '-0.025em', 'color' => '@papier', 'margin' => ['bottom' => '22px']],
+                'mobile' => ['fontSize' => '38px'],
+            ], '& em{font-style:normal;color:#cbb17b}'),
+            $text('fehler-text', 'Vielleicht hat sich ein Tippfehler in die Adresse geschlichen. Über die Startseite finden Sie zurück.', [
+                'desktop' => ['maxWidth' => '460px', 'fontSize' => '17px', 'lineHeight' => 1.8, 'color' => '@text-navy', 'margin' => ['bottom' => '28px']],
+            ]),
+            $button('fehler-knopf', 'Zur Startseite', '/', ['desktop' => ['margin' => ['top' => '0px']]]),
+        ], [
+            'desktop' => ['backgroundColor' => '@navy', 'color' => '@papier', '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' => $firma,
+    'description' => 'KANTARCI Immobilien GmbH: neue Mietwohnungen – modern, nachhaltig, mit zeitgemäßem Wohnkomfort. Mietinteresse unverbindlich anmelden.',
+    'email' => $mail,
+    'street' => $strasse, 'postalCode' => '76532', 'city' => 'Baden-Baden', 'country' => 'DE',
+    'localBusiness' => true, '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

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

src/Content/DocumentLibrary.php

@@ -0,0 +1,122 @@
+<?php
+
+namespace App\Content;
+
+use App\Domain\StaleWrite;
+use Doctrine\DBAL\Connection;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+/**
+ * PDFs neben den Bildern der Mediathek.
+ *
+ * Ein Bild wird beim Hochladen neu berechnet und nur in dieser Fassung ausgeliefert - was auch
+ * immer in der Datei steckte, ist danach weg. Bei einem PDF geht das nicht: es wird so
+ * ausgeliefert, wie es kam. Deshalb die Pruefung am Anfang der Datei statt an der Endung, und
+ * beim Ausliefern Kopfzeilen, die den Browser nichts anderes darin sehen lassen als ein PDF.
+ *
+ * Die Dateien liegen im Medienordner, als <id>.pdf - so gehen sie mit jeder Sicherung mit.
+ */
+final class DocumentLibrary
+{
+    /** Ein Prospekt oder eine Preisliste, kein Katalog mit tausend Fotos. */
+    public const MAX_BYTES = 20 * 1024 * 1024;
+
+    /** Die Adresse eines Dokuments. So steht sie auch in einem Link-Feld. */
+    public const PATH = '#^/media/([a-f0-9]{32})\.pdf$#D';
+
+    public function __construct(private Connection $db, private string $directory)
+    {
+    }
+
+    /** @return list<array<string, mixed>> neueste zuerst */
+    public function list(bool $withArchived = true): array
+    {
+        return array_map($this->present(...), $this->db->fetchAllAssociative(
+            'SELECT * FROM document'.($withArchived ? '' : ' WHERE archived = 0').' ORDER BY created_at DESC, id DESC',
+        ));
+    }
+
+    public function find(string $id): ?array
+    {
+        if (!preg_match('/^[a-f0-9]{32}$/D', $id)) {
+            return null;
+        }
+        $row = $this->db->fetchAssociative('SELECT * FROM document WHERE id = ?', [$id]);
+
+        return $row ? $this->present($row) : null;
+    }
+
+    public function upload(UploadedFile $file): array
+    {
+        if (!$file->isValid() || $file->getSize() > self::MAX_BYTES) {
+            throw new \InvalidArgumentException('Upload fehlgeschlagen. Maximal 20 MB pro PDF; das PHP-Hosting kann ein kleineres Limit setzen.');
+        }
+        // Ein PDF beginnt mit %PDF- - in den ersten 1024 Bytes, so lesen es auch die Betrachter.
+        // Die Endung oder der Typ, den der Browser mitschickt, sagen darueber nichts.
+        $head = (string) file_get_contents($file->getPathname(), false, null, 0, 1024);
+        if (!str_contains($head, '%PDF-')) {
+            throw new \InvalidArgumentException('Das ist kein PDF. Bitte eine PDF-Datei wählen.');
+        }
+        if (!is_dir($this->directory) && !mkdir($this->directory, 0775, true) && !is_dir($this->directory)) {
+            throw new \RuntimeException('Medienordner ist nicht beschreibbar.');
+        }
+        $id = bin2hex(random_bytes(16));
+        $path = $this->path($id);
+        if (!@copy($file->getPathname(), $path) || !is_file($path)) {
+            throw new \RuntimeException('Das Dokument konnte nicht gespeichert werden.');
+        }
+        try {
+            $name = pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME);
+            $title = mb_strcut(preg_replace('/[\x00-\x1F\x7F]/u', '', $name) ?: 'Dokument', 0, 160, 'UTF-8');
+            $row = ['id' => $id, 'title' => $title, 'bytes' => (int) filesize($path), 'archived' => 0, 'version' => 1, 'created_at' => gmdate('Y-m-d H:i:s')];
+            $this->db->insert('document', $row);
+        } catch (\Throwable $error) {
+            unlink($path);
+            throw $error;
+        }
+
+        return $this->present($row);
+    }
+
+    public function update(string $id, array $data): array
+    {
+        if (!is_string($data['title'] ?? null) || '' === trim($data['title']) || strlen($data['title']) > 160 || !is_bool($data['archived'] ?? null) || !is_int($data['version'] ?? null)) {
+            throw new \InvalidArgumentException('Titel (max. 160 Bytes) und Version prüfen.');
+        }
+        $count = $this->db->executeStatement('UPDATE document SET title = ?, archived = ?, version = version + 1 WHERE id = ? AND version = ?', [$data['title'], (int) $data['archived'], $id, $data['version']]);
+        if (1 !== $count) {
+            throw new StaleWrite();
+        }
+
+        return $this->find($id) ?? throw new StaleWrite();
+    }
+
+    /** Die Datei eines Dokuments, oder null. Archivierte werden weiter ausgeliefert, wie Bilder. */
+    public function file(string $id): ?string
+    {
+        if (null === $this->find($id)) {
+            return null;
+        }
+        $path = $this->path($id);
+
+        return is_file($path) ? $path : null;
+    }
+
+    private function path(string $id): string
+    {
+        return $this->directory.'/'.$id.'.pdf';
+    }
+
+    private function present(array $row): array
+    {
+        return [
+            'id' => $row['id'],
+            'title' => $row['title'],
+            'bytes' => (int) $row['bytes'],
+            'archived' => (bool) $row['archived'],
+            'version' => (int) $row['version'],
+            'created_at' => $row['created_at'],
+            'src' => '/media/'.$row['id'].'.pdf',
+        ];
+    }
+}

src/Content/DocumentValidator.php

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

src/Content/MediaLibrary.php

@@ -215,18 +215,27 @@ final class MediaLibrary
         return [...$data, 'id' => $id, 'version' => $data['version'] + 1];
     }
 
-    /** Die Größen, die ein Favicon braucht: der Reiter im Browser und das Symbol auf dem Startbildschirm. */
-    public const FAVICON_SIZES = [32, 180];
+    /**
+     * Die Größen, die ein Favicon braucht: 32 für den Reiter im Browser, 180 für den
+     * Startbildschirm, 48 und 192 für die Google-Suche - Google nimmt nur Vielfache von 48 und
+     * behielt sonst das zuerst gefundene Symbol, bei Elektro Bernhard das mitgelieferte K.
+     */
+    public const FAVICON_SIZES = [32, 48, 180, 192];
 
     /**
      * Erzeugt aus einem Bild der Mediathek die Symboldateien der Website.
      *
      * Ein Favicon ist quadratisch, winzig und wird von den Browsern bis heute am zuverlässigsten
-     * als PNG gelesen - deshalb hier PNG statt der WebP-Varianten und ein mittiger quadratischer
+     * als PNG gelesen - deshalb hier PNG statt der WebP-Varianten und ein quadratischer
      * Ausschnitt statt eines gestauchten Bildes. Erzeugt wird einmal beim Speichern der
      * Einstellung, nicht bei jedem Aufruf.
+     *
+     * $crop ist der im Zuschnitt gewählte Ausschnitt als [links, oben, Kante]: links und oben als
+     * Anteil von Breite und Höhe, die Kante als Anteil der kürzeren Seite. Ohne Angabe die Mitte.
+     *
+     * @param array{0: float, 1: float, 2: float}|null $crop
      */
-    public function renderFavicon(string $mediaId): void
+    public function renderFavicon(string $mediaId, ?array $crop = null): void
     {
         // Ueber die Varianten, die dieses Bild tatsaechlich hat, nicht ueber die vier Regelbreiten:
         // ein 192 px breites Zeichen hat genau eine Variante mit 192 - und die Suche nach 480
@@ -244,10 +253,18 @@ final class MediaLibrary
             throw new \RuntimeException('Das Bild für das Symbol konnte nicht gelesen werden.');
         }
         try {
-            // Mittiger quadratischer Ausschnitt: ein breites Logo würde sonst zur Briefmarke.
-            $kante = min(imagesx($source), imagesy($source));
-            $links = (int) ((imagesx($source) - $kante) / 2);
-            $oben = (int) ((imagesy($source) - $kante) / 2);
+            // Quadratischer Ausschnitt: ein breites Logo würde sonst zur Briefmarke. Die Anteile
+            // gelten für jede Variante gleich; gerechnet wird in der größten, die es gibt.
+            $breite = imagesx($source);
+            $hoehe = imagesy($source);
+            $kante = min($breite, $hoehe);
+            $links = (int) (($breite - $kante) / 2);
+            $oben = (int) (($hoehe - $kante) / 2);
+            if (null !== $crop) {
+                $kante = max(1, min($kante, (int) round($crop[2] * min($breite, $hoehe))));
+                $links = max(0, min($breite - $kante, (int) round($crop[0] * $breite)));
+                $oben = max(0, min($hoehe - $kante, (int) round($crop[1] * $hoehe)));
+            }
             foreach (self::FAVICON_SIZES as $size) {
                 $target = imagecreatetruecolor($size, $size);
                 try {

src/Content/PageRepository.php

@@ -459,8 +459,9 @@ final class PageRepository
         $total = (int) (clone $qb)->select('COUNT(*)')->executeQuery()->fetchOne();
         $pages = max(1, (int) ceil($total / $limit));
         $page = max(1, min($pages, $page));
-        $items = $qb->select('p.*', 'r.document')->orderBy('post' === $type ? 'p.created_at' : 'p.path', 'post' === $type ? 'DESC' : 'ASC')
-            ->addOrderBy('p.id')->setFirstResult(($page - 1) * $limit)->setMaxResults($limit)->executeQuery()->fetchAllAssociative();
+        $items = $qb->select('p.*', 'r.document')->orderBy('p.created_at', 'DESC')
+            // Neueste zuerst, bei Seiten wie bei Beiträgen (Umut: „absteigend also neueste zuerst“).
+            ->addOrderBy('p.id', 'DESC')->setFirstResult(($page - 1) * $limit)->setMaxResults($limit)->executeQuery()->fetchAllAssociative();
 
         return ['items' => $items, 'total' => $total, 'page' => $page, 'pages' => $pages, 'limit' => $limit];
     }

src/Content/SiteSettings.php

@@ -50,6 +50,10 @@ final class SiteSettings
         // Das Symbol der Website im Browser-Reiter: ein Bild aus der Mediathek, aus dem beim
         // Speichern quadratische PNG-Dateien entstehen. Leer heißt: das mitgelieferte Zeichen.
         'faviconMediaId' => '',
+        // Der Zuschnitt dazu als "links,oben,kante" in Anteilen, leer heißt: die Mitte. Die Version
+        // hängt am Verweis, damit ein neuer Ausschnitt im Browser ankommt.
+        'faviconCrop' => '',
+        'faviconVersion' => '',
         // Der Knopf „nach oben". Aus, weil eine kurze Seite ihn nicht braucht; alles daran ist
         // einstellbar, weil er auf jeder Seite in der Ecke klebt und deshalb zur Gestaltung
         // passen muss. Eingeblendet wird er beim Scrollen - ohne eine Zeile JavaScript.
@@ -229,6 +233,14 @@ final class SiteSettings
         $values['stickyHeader'] = (bool) ($input['stickyHeader'] ?? false);
         $values['headerOverlay'] = (bool) ($input['headerOverlay'] ?? false);
         $favicon = trim((string) ($input['faviconMediaId'] ?? ''));
+        $crop = '' === $favicon ? '' : trim((string) ($input['faviconCrop'] ?? ''));
+        $anteile = null;
+        if ('' !== $crop) {
+            $anteile = array_map('floatval', explode(',', $crop));
+            if (1 !== preg_match('/^[01](?:\.\d{1,6})?,[01](?:\.\d{1,6})?,[01](?:\.\d{1,6})?$/D', $crop) || max($anteile) > 1 || $anteile[2] < 0.02) {
+                throw new InvalidPage('Der Ausschnitt für das Symbol ist ungültig. Bitte das Bild neu zuschneiden.');
+            }
+        }
         if ('' !== $favicon) {
             if (1 !== preg_match('/^[a-f0-9]{32}$/D', $favicon) || null === $this->media->find($favicon)) {
                 throw new InvalidPage('Das gewählte Symbolbild gibt es nicht (mehr).');
@@ -237,12 +249,15 @@ final class SiteSettings
             // die Einstellung gar nicht erst gespeichert - ein Verweis auf ein fehlendes Symbol
             // wäre schlimmer als das alte Symbol.
             try {
-                $this->media->renderFavicon($favicon);
+                $this->media->renderFavicon($favicon, $anteile);
             } catch (\RuntimeException $error) {
                 throw new InvalidPage('Aus diesem Bild konnte kein Symbol erzeugt werden: '.$error->getMessage());
             }
         }
         $values['faviconMediaId'] = $favicon;
+        $values['faviconCrop'] = $crop;
+        // Ohne Zuschnitt die Kennung wie bisher, damit bestehende Verweise gleich bleiben.
+        $values['faviconVersion'] = '' === $favicon ? '' : ('' === $crop ? substr($favicon, 0, 8) : substr(md5($favicon.'|'.$crop), 0, 8));
         foreach (['turnstileSiteKey' => 100, 'turnstileSecret' => 100] as $key => $max) {
             $wert = trim((string) ($input[$key] ?? ''));
             if ('' !== $wert && 1 !== preg_match('/^[A-Za-z0-9_:.-]{8,'.$max.'}$/D', $wert)) {

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/MediaController.php

@@ -2,19 +2,22 @@
 
 namespace App\Controller;
 
+use App\Content\DocumentLibrary;
 use App\Content\MediaLibrary;
+use App\Content\SiteSettings;
 use App\Domain\StaleWrite;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\BinaryFileResponse;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpFoundation\ResponseHeaderBag;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;
 
 final class MediaController extends AbstractController
 {
-    public function __construct(private MediaLibrary $media, private CsrfTokenManagerInterface $csrf)
+    public function __construct(private MediaLibrary $media, private CsrfTokenManagerInterface $csrf, private SiteSettings $siteSettings, private DocumentLibrary $documents)
     {
     }
 
@@ -26,7 +29,7 @@ final class MediaController extends AbstractController
         $archived = $request->query->getBoolean('archiv');
         $query = mb_substr(trim($request->query->getString('q')), 0, 160);
         $library = $this->media->page($request->query->getInt('seite', 1), $archived, query: $query);
-        $view = ['library' => $library, 'archived' => $archived, 'query' => $query];
+        $view = ['library' => $library, 'archived' => $archived, 'query' => $query, 'documents' => $this->documents->list($archived)];
         if ($request->isXmlHttpRequest()) {
             return $this->json([
                 'html' => $this->renderView('admin/media-results.html.twig', $view),
@@ -52,16 +55,18 @@ final class MediaController extends AbstractController
         $done = 0;
         foreach ($files as $file) {
             try {
-                $this->media->upload($file);
+                // Bilder und PDFs gehen durch dasselbe Feld. Welche Art es ist, entscheidet der
+                // Inhalt der Datei; die Endung zaehlt nur, wenn der Inhalt nichts sagt.
+                $this->isPdf($file) ? $this->documents->upload($file) : $this->media->upload($file);
                 ++$done;
             } catch (\InvalidArgumentException $error) {
-                return $this->back($request, sprintf('%s (%s)%s', $error->getMessage(), $file->getClientOriginalName(), $done > 0 ? sprintf(' %d Bild(er) davor wurden hochgeladen.', $done) : ''));
+                return $this->back($request, sprintf('%s (%s)%s', $error->getMessage(), $file->getClientOriginalName(), $done > 0 ? sprintf(' %d Datei(en) davor wurden hochgeladen.', $done) : ''));
             } catch (\RuntimeException) {
-                return $this->back($request, 'Das Bild konnte nicht verarbeitet werden. GD/WebP und die Schreibrechte des Medienordners prüfen.');
+                return $this->back($request, sprintf('%s konnte nicht verarbeitet werden. GD/WebP und die Schreibrechte des Medienordners prüfen.', $file->getClientOriginalName()));
             }
         }
 
-        return $this->back($request, sprintf('%d Bild(er) hochgeladen.', $done), 'success');
+        return $this->back($request, sprintf('%d Datei(en) hochgeladen.', $done), 'success');
     }
 
     #[Route('/%kant.admin_path%/media/{id}', name: 'admin_media_save', requirements: ['id' => '[a-f0-9]{32}'], methods: ['POST'])]
@@ -90,6 +95,38 @@ final class MediaController extends AbstractController
         return $this->back($request, 'Die Bildangaben wurden gespeichert.', 'success');
     }
 
+    #[Route('/%kant.admin_path%/media/dokument/{id}', name: 'admin_document_save', requirements: ['id' => '[a-f0-9]{32}'], methods: ['POST'])]
+    public function formUpdateDocument(Request $request, string $id): Response
+    {
+        $this->denyAccessUnlessGranted('ROLE_EDITOR');
+        if (!$this->isCsrfTokenValid('media-form', $request->request->getString('_csrf_token'))) {
+            return $this->back($request, 'Deine Sitzung ist abgelaufen. Bitte melde dich erneut an.');
+        }
+        if (!$this->documents->find($id)) {
+            throw $this->createNotFoundException();
+        }
+        try {
+            $this->documents->update($id, [
+                'title' => $request->request->getString('title'),
+                'archived' => $request->request->getBoolean('archived'),
+                'version' => $request->request->getInt('version'),
+            ]);
+        } catch (StaleWrite) {
+            return $this->back($request, 'Das Dokument wurde inzwischen anderswo geändert. Lade die Seite neu und trage die Angaben erneut ein.');
+        } catch (\InvalidArgumentException $error) {
+            return $this->back($request, $error->getMessage());
+        }
+
+        return $this->back($request, 'Die Angaben zum Dokument wurden gespeichert.', 'success');
+    }
+
+    private function isPdf(UploadedFile $file): bool
+    {
+        $mime = $file->getMimeType();
+
+        return 'application/pdf' === $mime || (!str_starts_with((string) $mime, 'image/') && 'pdf' === strtolower($file->getClientOriginalExtension()));
+    }
+
     /** Back to the page the form was on, so a change does not jump to the first page. */
     private function back(Request $request, string $message, string $type = 'error'): Response
     {
@@ -111,6 +148,53 @@ final class MediaController extends AbstractController
         return $this->json(['items' => $this->media->list(), 'csrfToken' => $this->csrf->getToken('media')->getValue()]);
     }
 
+    /** Die PDFs fuer die Auswahl im Link-Feld. Wenige genug, um sie auf einmal zu schicken. */
+    #[Route('/%kant.admin_path%/api/dokumente', methods: ['GET'])]
+    public function listDocuments(): Response
+    {
+        $this->denyAccessUnlessGranted('ROLE_EDITOR');
+
+        return $this->json(['items' => $this->documents->list(), 'csrfToken' => $this->csrf->getToken('media')->getValue()]);
+    }
+
+    #[Route('/%kant.admin_path%/api/dokumente/upload', methods: ['POST'])]
+    #[Route('/%kant.admin_path%/api/dokumente/{id}', requirements: ['id' => '[a-f0-9]{32}'], methods: ['POST'])]
+    public function writeDocument(Request $request, ?string $id = null): Response
+    {
+        $this->denyAccessUnlessGranted('ROLE_EDITOR');
+        if (!$this->isCsrfTokenValid('media', $request->headers->get('X-CSRF-Token'))) {
+            return $this->json(['error' => 'Sitzung abgelaufen. Bitte erneut anmelden.'], 403);
+        }
+        try {
+            if (null === $id) {
+                $file = $request->files->get('file');
+                if (!$file instanceof UploadedFile) {
+                    throw new \InvalidArgumentException('Keine Datei empfangen. Bitte das PHP-Uploadlimit und die Dateigröße prüfen.');
+                }
+
+                return $this->json(['item' => $this->documents->upload($file)], 201);
+            }
+            if (!$this->documents->find($id)) {
+                throw $this->createNotFoundException();
+            }
+            if (strlen($request->getContent()) > 4096) {
+                throw new \InvalidArgumentException('Angaben zum Dokument sind zu groß.');
+            }
+            $data = json_decode($request->getContent(), true, 16, JSON_THROW_ON_ERROR);
+            if (!is_array($data)) {
+                throw new \InvalidArgumentException('Ungültige Angaben zum Dokument.');
+            }
+
+            return $this->json(['item' => $this->documents->update($id, $data)]);
+        } catch (StaleWrite) {
+            return $this->json(['error' => 'Das Dokument wurde inzwischen geändert. Die Auswahl bitte neu öffnen.'], 409);
+        } catch (\InvalidArgumentException|\JsonException $error) {
+            return $this->json(['error' => $error->getMessage()], 422);
+        } catch (\RuntimeException) {
+            return $this->json(['error' => 'Das Dokument konnte nicht gespeichert werden. Schreibrechte des Medienordners prüfen.'], 503);
+        }
+    }
+
     #[Route('/%kant.admin_path%/api/media/{id}', requirements: ['id' => '[a-f0-9]{32}'], methods: ['GET'])]
     public function read(string $id): Response
     {
@@ -159,21 +243,79 @@ final class MediaController extends AbstractController
     }
 
     /**
-     * Das Symbol der Website, in den beiden Größen, die Browser abfragen.
+     * Das Symbol der Website, in den Größen, die Browser und Suchmaschinen abfragen.
      *
      * Ohne eingestelltes Bild gibt es die Dateien nicht - dann bleibt es beim mitgelieferten
-     * favicon.svg, auf das die Seiten weiterhin verweisen.
+     * Zeichen unter /favicon.svg. /favicon.ico fragen Crawler auf gut Glück ab; es bekommt das
+     * 48er-PNG, das liest jeder Browser auch unter diesem Namen.
      */
-    #[Route('/favicon.png', name: 'favicon_png', methods: ['GET'])]
-    #[Route('/apple-touch-icon.png', name: 'favicon_touch', methods: ['GET'])]
-    public function favicon(Request $request): Response
+    #[Route('/favicon.png', name: 'favicon_png', defaults: ['size' => 32], methods: ['GET'])]
+    #[Route('/favicon-192.png', name: 'favicon_192', defaults: ['size' => 192], methods: ['GET'])]
+    #[Route('/favicon.ico', name: 'favicon_ico', defaults: ['size' => 48], methods: ['GET'])]
+    #[Route('/apple-touch-icon.png', name: 'favicon_touch', defaults: ['size' => 180], methods: ['GET'])]
+    public function favicon(int $size): Response
     {
-        $size = 'favicon_touch' === $request->attributes->get('_route') ? 180 : 32;
-        $path = $this->media->faviconFile($size) ?? throw $this->createNotFoundException();
+        $path = $this->faviconFile($size);
+        if (null === $path) {
+            if (48 === $size) {
+                return $this->redirect('/favicon.svg');
+            }
+            throw $this->createNotFoundException();
+        }
 
         return new BinaryFileResponse($path, headers: ['Content-Type' => 'image/png', 'X-Content-Type-Options' => 'nosniff', 'Cache-Control' => 'public, max-age=604800', 'Content-Security-Policy' => "default-src 'none'"]);
     }
 
+    /**
+     * Das mitgelieferte Zeichen - aber nur, solange kein eigenes Symbol gesetzt ist.
+     *
+     * Früher lag es als Datei in public/ und kam damit immer, auch nach dem Wechsel. Google hatte
+     * es beim ersten Besuch gefunden und zeigte es weiter. Jetzt führt die Adresse zum eigenen
+     * Symbol, vorübergehend (302), damit ein Zurückwechseln im Browser wieder ankommt.
+     */
+    #[Route('/favicon.svg', name: 'favicon_svg', methods: ['GET'])]
+    public function faviconSvg(): Response
+    {
+        if (null !== $this->faviconFile(192)) {
+            $response = $this->redirect('/favicon-192.png?v='.$this->siteSettings->load()['faviconVersion'], 302);
+            $response->headers->set('Cache-Control', 'public, max-age=3600');
+
+            return $response;
+        }
+
+        return new BinaryFileResponse($this->getParameter('kernel.project_dir').'/public/assets/favicon.svg', headers: ['Content-Type' => 'image/svg+xml', 'X-Content-Type-Options' => 'nosniff', 'Cache-Control' => 'public, max-age=3600']);
+    }
+
+    /**
+     * Eine Symboldatei, oder null ohne eigenes Symbol.
+     *
+     * Die Größen 48 und 192 kamen später dazu. Wer sein Symbol vorher gesetzt hat, hat nur 32
+     * und 180 - die fehlenden entstehen beim ersten Abruf aus derselben Einstellung, statt dass
+     * erst jemand die Einstellungen neu speichern muss.
+     */
+    private function faviconFile(int $size): ?string
+    {
+        // Zuerst die Einstellung: wird das Symbol entfernt, bleiben die Dateien liegen, gelten
+        // aber nicht mehr.
+        $settings = $this->siteSettings->load();
+        $favicon = (string) ($settings['faviconMediaId'] ?? '');
+        if ('' === $favicon) {
+            return null;
+        }
+        $path = $this->media->faviconFile($size);
+        if (null !== $path || !in_array($size, MediaLibrary::FAVICON_SIZES, true) || null === $this->media->find($favicon)) {
+            return $path;
+        }
+        $crop = (string) ($settings['faviconCrop'] ?? '');
+        try {
+            $this->media->renderFavicon($favicon, '' === $crop ? null : array_map('floatval', explode(',', $crop)));
+        } catch (\RuntimeException) {
+            return null;
+        }
+
+        return $this->media->faviconFile($size);
+    }
+
     #[Route('/media/{id}/{width}', requirements: ['id' => '[a-f0-9]{32}', 'width' => '\d{1,4}'], methods: ['GET'])]
     public function serve(string $id, int $width): Response
     {
@@ -181,4 +323,29 @@ final class MediaController extends AbstractController
 
         return new BinaryFileResponse($path, headers: ['Content-Type' => 'image/webp', 'X-Content-Type-Options' => 'nosniff', 'Cache-Control' => 'public, max-age=31536000, immutable', 'Content-Security-Policy' => "default-src 'none'"]);
     }
+
+    /**
+     * Ein PDF, so wie es hochgeladen wurde.
+     *
+     * inline, damit der Browser es anzeigt statt es abzulegen - mit dem Titel als Dateinamen fuer
+     * den Fall, dass jemand es speichert. Einbetten darf es nur die eigene Website: der
+     * Betrachter zeigt es in einem Rahmen, eine fremde Seite soll das nicht koennen.
+     */
+    #[Route('/media/{id}.pdf', name: 'document_serve', requirements: ['id' => '[a-f0-9]{32}'], methods: ['GET'])]
+    public function serveDocument(string $id): Response
+    {
+        $path = $this->documents->file($id) ?? throw $this->createNotFoundException();
+        $name = trim(preg_replace('/[\\\\\/\x00-\x1F\x7F"]+/u', ' ', $this->documents->find($id)['title'])).'.pdf';
+        $fallback = trim(preg_replace('/[^A-Za-z0-9 ._-]+/', '-', (string) iconv('UTF-8', 'ASCII//TRANSLIT//IGNORE', $name)), '- ');
+        $response = new BinaryFileResponse($path, headers: [
+            'Content-Type' => 'application/pdf',
+            'X-Content-Type-Options' => 'nosniff',
+            'Cache-Control' => 'public, max-age=86400',
+            'Content-Security-Policy' => "frame-ancestors 'self'",
+            'X-Robots-Tag' => 'noindex',
+        ]);
+        $response->setContentDisposition(ResponseHeaderBag::DISPOSITION_INLINE, $name, str_ends_with($fallback, '.pdf') && '.pdf' !== $fallback ? $fallback : 'dokument.pdf');
+
+        return $response;
+    }
 }

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/Controller/PageController.php

@@ -31,6 +31,9 @@ final class PageController extends AbstractController
     {
     }
 
+    /** Dieselbe Groessenangabe, die `blocks/block.html.twig` einem Bild ohne feste Breite gibt. */
+    private const IMAGE_SIZES = '(max-width: 650px) 100vw, (max-width: 1024px) 50vw, 800px';
+
     // A segment is a slug; up to four of them form the public path. The leading lookahead keeps
     // the CMS routes (/admin, /media, /assets) out of the catch-all, which matches before them.
     private const PATH = '(?!admin(?:/|$)|media/|assets/|kategorie/|schlagwort/|beitraege(?:/|$)|einwilligung$|feed\.xml$|sitemap\.xml$|robots\.txt$|llms\.txt$)[a-z0-9]+(?:-[a-z0-9]+)*(?:/[a-z0-9]+(?:-[a-z0-9]+)*){0,3}';
@@ -127,6 +130,10 @@ final class PageController extends AbstractController
         // Stylesheet und Skript eines Plugin-Bausteins kommen nur dorthin, wo er vorkommt.
         $pluginAssets = $this->plugins->assetsFor($documents);
         $needsZoom = (bool) array_filter($documents, fn (array $doc): bool => $this->hasZoom($doc));
+        // Ein Link auf ein PDF der Mediathek - in einem Button, einem Bild oder im Fliesstext.
+        // Gesucht wird im gespeicherten Dokument als Text: so findet sich auch ein Link, den
+        // jemand in einen formatierten Absatz geschrieben hat.
+        $needsDocument = (bool) array_filter($documents, static fn (array $doc): bool => 1 === preg_match('#/media/[a-f0-9]{32}\.pdf#', json_encode($doc, JSON_UNESCAPED_SLASHES) ?: ''));
         // Only the header changes with the scroll position; a scrolled value anywhere in it asks
         // for the small script that marks the page as scrolled.
         // Den Nach-oben-Knopf blendet dasselbe Skript ein; ohne es bleibt er dauerhaft sichtbar.
@@ -195,6 +202,9 @@ final class PageController extends AbstractController
             // Ein Bild, das sich vergroessern laesst, ist ohne Skript ein Verweis auf die
             // grosse Fassung. Das Skript kommt nur dazu, wo es etwas zu tun hat.
             'needsZoom' => $needsZoom,
+            // Der PDF-Betrachter, nach demselben Muster und im selben Skript: ohne es ein
+            // gewoehnlicher Link.
+            'needsDocument' => $needsDocument,
             // Own scripts arrive as one file per page, never inline, so the policy can stay
             // hash based and no page without a script loses its strict setting.
             'pageScript' => [] === $this->code->scriptsOf($page['document']) ? null : '/assets/seite/'.$page['id'].'.js',
@@ -209,10 +219,14 @@ final class PageController extends AbstractController
             // Das grosse Bild ueber der Falz - es soll zuerst geladen werden. Gesucht wird nur
             // im ersten Abschnitt des Inhalts: ein Bild weiter unten waere die falsche
             // Eile, und das Logo im Kopfbereich ist klein und laedt ohnehin sofort.
-            'eagerImage' => $this->firstImage(['blocks' => array_slice($page['document']['blocks'] ?? [], 0, 1)]),
+            'eagerImage' => $eagerImage = $this->firstImage(['blocks' => array_slice($page['document']['blocks'] ?? [], 0, 1)]),
             // Und das Gegenstueck fuer den haeufigeren Fall: Das grosse Bild ueber der Falz
             // ist gar kein Bild, sondern der Hintergrund des ersten Abschnitts.
-            'heroBackground' => $this->heroBackground($areas['header'] ?? null, $page['document']),
+            'heroBackground' => $heroBackground = $this->heroBackground($areas['header'] ?? null, $page['document']),
+            // Ist es doch ein gewoehnliches Bild, wird auch das vorab geholt - sonst findet der
+            // Browser es erst, wenn das Stylesheet steht, und diese Rundreise geht direkt in die
+            // LCP-Zeit. Nur eines von beiden: zwei grosse Bilder vorab kosten mehr, als sie bringen.
+            'heroImage' => [] === $heroBackground ? $this->heroImage($page['document'], $eagerImage) : null,
             'pageStyles' => $styles,
             'localFonts' => $localFonts,
             'styleBundle' => $this->bundle->url([] !== $localFonts),
@@ -221,7 +235,7 @@ final class PageController extends AbstractController
         // Die Pruefung braucht ein Skript von Cloudflare und einen Rahmen dafuer. Beides wird nur
         // dort erlaubt, wo tatsaechlich ein Formular steht - nicht auf jeder Seite der Website.
         $mitTurnstile = $this->turnstile->isActive() && (bool) array_filter($documents, fn (array $doc): bool => $this->hasType($doc, 'form'));
-        $wantsScript = ($mitTurnstile || $needsTabs || $needsFormScript || [] !== $pluginAssets['scripts'] || [] !== $areaScripts || $needsSlider || $needsMotion || $needsScrolled || $needsZoom || [] !== $this->code->scriptsOf($page['document']));
+        $wantsScript = ($mitTurnstile || $needsTabs || $needsFormScript || [] !== $pluginAssets['scripts'] || [] !== $areaScripts || $needsSlider || $needsMotion || $needsScrolled || $needsZoom || $needsDocument || [] !== $this->code->scriptsOf($page['document']));
         $frames = $this->frameHosts($request, $page['document'], ...array_values($areas), ...array_values($sections));
         if ($mitTurnstile) {
             $frames[] = 'challenges.cloudflare.com';
@@ -231,7 +245,7 @@ final class PageController extends AbstractController
             $response->headers->set('X-Robots-Tag', 'noindex, follow');
         }
 
-        return $this->shell($response, $wantsScript, $styles, $frames);
+        return $this->shell($response, $wantsScript, $styles, $frames, $needsDocument);
     }
 
     /**
@@ -245,8 +259,9 @@ final class PageController extends AbstractController
      * @param list<string> $frameHosts Hosts of embeds that are actually rendered on this response.
      *                                 Nothing is added to the policy for an embed still waiting
      *                                 for consent.
+     * @param bool         $frameSelf  whether the page may frame its own PDFs (the viewer)
      */
-    private function shell(Response $response, bool $allowScript = false, string $styles = '', array $frameHosts = []): Response
+    private function shell(Response $response, bool $allowScript = false, string $styles = '', array $frameHosts = [], bool $frameSelf = false): Response
     {
         $styleSources = ["'self'"];
         if ('' !== $styles) {
@@ -273,7 +288,9 @@ final class PageController extends AbstractController
             implode(' ', $scriptSources),
             implode(' ', $styleSources),
             implode(' ', $fontSources),
-            [] === $frameHosts ? "'none'" : implode(' ', array_map(static fn (string $host): string => 'https://'.$host, $frameHosts)),
+            // Der PDF-Betrachter zeigt eine Datei dieser Website in einem Rahmen - nur dort, wo
+            // eine Seite auf ein PDF verlinkt, und nur von hier.
+            [] === $frameHosts && !$frameSelf ? "'none'" : implode(' ', [...($frameSelf ? ["'self'"] : []), ...array_map(static fn (string $host): string => 'https://'.$host, $frameHosts)]),
         ));
 
         return $response;
@@ -772,6 +789,55 @@ final class PageController extends AbstractController
         return [];
     }
 
+    /**
+     * Das vorgezogene Bild als Vorabladung im Kopf der Seite.
+     *
+     * Die Angaben sind dieselben, die `blocks/block.html.twig` an das `img` schreibt - Quelle,
+     * Satz der Varianten und die Groessenangabe. Weicht eines davon ab, waehlt der Browser fuer
+     * die Vorabladung eine andere Variante als fuer das Bild und laedt zweimal.
+     *
+     * @return array{src: string, srcset: string, sizes: string}|null
+     */
+    private function heroImage(array $document, ?string $eagerImage): ?array
+    {
+        if (null === $eagerImage) {
+            return null;
+        }
+        $block = $this->blockById($document['blocks'] ?? [], $eagerImage);
+        $props = $block['props'] ?? [];
+        if (null === $block || 'image' !== ($block['type'] ?? null) || '' === (string) ($props['src'] ?? '')) {
+            return null;
+        }
+        $varianten = [];
+        foreach (is_array($props['sources'] ?? null) ? $props['sources'] : [] as $quelle) {
+            if (is_array($quelle) && isset($quelle['src'], $quelle['width'])) {
+                $varianten[] = $quelle['src'].' '.$quelle['width'].'w';
+            }
+        }
+        $feste = (string) ($block['style']['desktop']['maxWidth'] ?? '');
+
+        return [
+            'src' => (string) $props['src'],
+            'srcset' => implode(', ', $varianten),
+            'sizes' => str_ends_with($feste, 'px') ? $feste : self::IMAGE_SIZES,
+        ];
+    }
+
+    private function blockById(array $blocks, string $id): ?array
+    {
+        foreach ($blocks as $block) {
+            if ($id === ($block['id'] ?? null)) {
+                return $block;
+            }
+            $inside = $this->blockById($block['children'] ?? [], $id);
+            if (null !== $inside) {
+                return $inside;
+            }
+        }
+
+        return null;
+    }
+
     private function firstImage(array ...$documents): ?string
     {
         foreach ($documents as $document) {

src/Controller/SettingsController.php

@@ -4,7 +4,6 @@ namespace App\Controller;
 
 use App\Content\Consent;
 use App\Content\DemoContent;
-use App\Content\MediaLibrary;
 use App\Content\NotFoundPage;
 use App\Content\PageRepository;
 use App\Content\RedirectRepository;
@@ -20,7 +19,7 @@ use Symfony\Component\Routing\Attribute\Route;
 
 final class SettingsController extends AbstractController
 {
-    public function __construct(private SiteSettings $settings, private RedirectRepository $redirects, private PageRepository $pages, private MediaLibrary $media, private Theme $theme, private NotFoundPage $notFoundPage)
+    public function __construct(private SiteSettings $settings, private RedirectRepository $redirects, private PageRepository $pages, private Theme $theme, private NotFoundPage $notFoundPage)
     {
     }
 
@@ -31,8 +30,22 @@ final class SettingsController extends AbstractController
         // Veroeffentlichers, die Unternehmensdaten samt Einwilligung und Spamschutz die des
         // Administrators - der Bildschirm blendet den Teil aus, den die Rolle nicht aendern darf.
         $this->denyAccessUnlessGranted('ROLE_PUBLISHER');
+        $settings = $this->settings->load();
         $choosable = [];
+        // Datenschutz und Impressum werden per Suche gewählt; das Feld zeigt Titel und Adresse der
+        // gespeicherten Seite. Eine Adresse ohne Seite bleibt sichtbar, statt still zu verschwinden.
+        $legal = ['privacyPath' => null, 'imprintPath' => null];
+        foreach (array_keys($legal) as $key) {
+            if ('' !== $settings[$key]) {
+                $legal[$key] = ['path' => $settings[$key], 'title' => $settings[$key]];
+            }
+        }
         foreach ($this->pages->listForEditor() as $page) {
+            foreach ($legal as $key => $selection) {
+                if (null !== $selection && $selection['path'] === $page['path']) {
+                    $legal[$key]['title'] = json_decode($page['document'] ?? '{}', true, 512, JSON_THROW_ON_ERROR)['title'] ?? $page['path'];
+                }
+            }
             // Only a published page can serve as the root; a draft would answer every visit with 404.
             if ('page' === $page['type'] && null !== $page['published_revision_id']) {
                 $document = json_decode($page['document'] ?? '{}', true, 512, JSON_THROW_ON_ERROR);
@@ -41,15 +54,14 @@ final class SettingsController extends AbstractController
         }
 
         return $this->render('admin/settings.html.twig', [
-            'settings' => $this->settings->load(),
+            'settings' => $settings,
+            'legalSelection' => $legal,
             'notFoundSelection' => $this->notFoundPage->selected(),
             'redirects' => $this->redirects->all($request->query->getInt('seite', 1)),
             'choosableHome' => $choosable,
             'consentGroups' => Consent::GROUPS,
             'missingLegal' => $this->settings->missingLegalPages(),
             'consentGroupHelp' => Consent::GROUP_HELP,
-            // Für das Symbol der Website: die Mediathek zur Auswahl, die neuesten zuerst.
-            'images' => $this->media->page(1, false, 96)['items'],
             // Fuer die Farbfelder: dieselbe Palette, die auch der Editor anbietet.
             'palette' => $this->theme->load()['colors'],
             'socialNetworks' => SocialProfiles::NETWORKS,

src/Controller/SystemController.php

@@ -2,10 +2,13 @@
 
 namespace App\Controller;
 
+use App\Command\SiteOriginCommand;
 use App\Domain\InvalidPage;
 use App\Ops\ArchiveUpdate;
 use App\Ops\Backup;
+use App\Ops\Environment;
 use App\Ops\Installation;
+use App\Ops\OriginCheck;
 use App\Ops\Updater;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
@@ -21,7 +24,7 @@ use Symfony\Component\Routing\Attribute\Route;
  */
 final class SystemController extends AbstractController
 {
-    public function __construct(private Updater $updater, private Backup $backup, private ArchiveUpdate $archive, private Installation $installation, private string $adminPath, private string $databaseUrl, private string $mediaDirectory, private string $projectDir, private string $siteOrigin)
+    public function __construct(private Updater $updater, private Backup $backup, private ArchiveUpdate $archive, private Installation $installation, private string $adminPath, private string $databaseUrl, private string $mediaDirectory, private string $projectDir, private string $siteOrigin, private OriginCheck $originCheck)
     {
     }
 
@@ -55,6 +58,7 @@ final class SystemController extends AbstractController
             // ein ganz anderer Host (Vorschauadresse des Hosters, IP) bleibt erreichbar und
             // bekommt hier den Hinweis, dass die Website woanders eingetragen ist.
             'origin' => $this->originFacts($request),
+            'originRejected' => $request->getSession()->remove('origin_rejected'),
         ]);
     }
 
@@ -258,6 +262,62 @@ final class SystemController extends AbstractController
             : 'Der Wartungszustand ist aufgehoben.', 'success');
     }
 
+    /**
+     * Die Adresse der Website, wie „WordPress-Adresse“ in WordPress: sie landet in .env als
+     * SITE_ORIGIN und gilt ab der nächsten Anfrage.
+     *
+     * Vorher fragt die Installation sich selbst unter der neuen Adresse an. Eine Umstellung auf
+     * www ohne DNS-Eintrag leitete sonst jede Seite ins Leere, die Verwaltung eingeschlossen.
+     * Wer weiß, was er tut (Server erreicht sich selbst nicht, http im lokalen Betrieb), kann die
+     * Prüfung ausdrücklich übergehen.
+     */
+    #[Route('/%kant.admin_path%/system/adresse', name: 'admin_system_origin', methods: ['POST'])]
+    public function origin(Request $request): Response
+    {
+        $this->denyAccessUnlessGranted('ROLE_ADMIN');
+        if (!$this->isCsrfTokenValid('system', $request->request->getString('_csrf_token'))) {
+            return $this->back('Deine Sitzung ist abgelaufen. Bitte melde dich erneut an.');
+        }
+        if ('.env' !== $this->environmentSource('SITE_ORIGIN')) {
+            return $this->back('Die Adresse ist in der Server-Umgebung gesetzt und hat dort Vorrang. Sie lässt sich nur beim Hoster ändern.');
+        }
+        try {
+            $neu = SiteOriginCommand::normalize($request->request->getString('origin'));
+        } catch (\InvalidArgumentException $error) {
+            return $this->back($error->getMessage());
+        }
+        if ($neu === rtrim(trim($this->siteOrigin), '/')) {
+            return $this->back('Die Adresse ist unverändert.', 'success');
+        }
+        if (!$request->request->getBoolean('force') && null !== $problem = $this->originCheck->problem($neu)) {
+            $request->getSession()->set('origin_rejected', $neu);
+
+            return $this->back($problem.' Nichts geändert.');
+        }
+        try {
+            Environment::write($this->projectDir, ['SITE_ORIGIN' => $neu]);
+        } catch (\RuntimeException $error) {
+            return $this->back($error->getMessage());
+        }
+
+        // Die Anmeldung gilt nur für die Schreibweise, unter der sie entstand. Wechselt die
+        // Verwaltung dadurch den Host, ist dort eine neue Anmeldung fällig - das sagt die Meldung,
+        // solange sie noch auf dem alten Host steht.
+        return $this->back(sprintf(
+            'Die Website ist jetzt eingetragen als %s. Canonical, Sitemap und Feed nennen diese Adresse, die Schreibweise %s www leitet dorthin um.%s',
+            $neu,
+            str_starts_with((string) parse_url($neu, PHP_URL_HOST), 'www.') ? 'ohne' : 'mit',
+            strtolower($request->getHost()) !== strtolower((string) parse_url($neu, PHP_URL_HOST)) ? ' Unter der neuen Adresse ist eine neue Anmeldung nötig.' : '',
+        ), 'success');
+    }
+
+    /** Die Gegenstelle zur Prüfung oben: öffentlich, und sie verrät nichts als diese Kennung. */
+    #[Route(OriginCheck::PATH, name: 'site_origin_probe', methods: ['GET'], priority: 10)]
+    public function originProbe(): Response
+    {
+        return new Response($this->originCheck->token(), 200, ['Content-Type' => 'text/plain; charset=UTF-8', 'Cache-Control' => 'no-store', 'X-Robots-Tag' => 'noindex']);
+    }
+
     private function back(string $message, string $type = 'error'): Response
     {
         $this->addFlash($type, $message);

src/EventSubscriber/MaintenanceSubscriber.php

@@ -35,7 +35,7 @@ final class MaintenanceSubscriber implements EventSubscriberInterface
             return;
         }
         $path = $event->getRequest()->getPathInfo();
-        if (preg_match('#^/('.preg_quote($this->adminPath, '#').'|assets/|media/|favicon)#', $path)) {
+        if (preg_match('#^/('.preg_quote($this->adminPath, '#').'|assets/|media/|favicon|\.well-known/kantsites-origin)#', $path)) {
             return;
         }
         $since = @file_get_contents($this->projectDir.'/'.Updater::MAINTENANCE_FILE);

src/Ops/ArchiveUpdate.php

@@ -29,6 +29,16 @@ final class ArchiveUpdate
     /** Was innerhalb von public/ dem Betreiber gehört und deshalb stehen bleibt. */
     private const EIGENES_IN_PUBLIC = ['assets/fonts', 'assets/build'];
 
+    /**
+     * Was frühere Fassungen in public/ mitbrachten und jetzt die Anwendung beantwortet.
+     *
+     * Das Zusammenführen kopiert nur hinzu. Bliebe favicon.svg liegen, lieferte der Webserver
+     * sie weiter selbst aus - das mitgelieferte Zeichen, auch wenn ein eigenes Symbol gesetzt ist.
+     * Gelöscht wird in finish(): Das Kopieren erledigt noch der Code der alten Fassung, der
+     * diese Liste nicht kennt.
+     */
+    private const ENTFALLEN_IN_PUBLIC = ['favicon.svg'];
+
     /**
      * Die Marke zwischen den beiden Schritten.
      *
@@ -306,6 +316,9 @@ final class ArchiveUpdate
         @unlink($this->root.'/'.self::MARKE);
         $this->updater->maintenance(false);
         $this->protokoll('ok     Migrationen: '.$schritte[0]['detail']);
+        foreach (self::ENTFALLEN_IN_PUBLIC as $eintrag) {
+            @unlink($this->root.'/public/'.$eintrag);
+        }
         $schritte[] = ['step' => 'Aufräumen', 'ok' => true, 'detail' => $this->aufraeumen()];
         $schritte[] = ['step' => 'Fertig', 'ok' => true, 'detail' => sprintf(
             'Fassung %s läuft. Der vorherige Stand liegt unter var/update/ (die zwei jüngsten bleiben).',

src/Ops/OriginCheck.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Ops;
+
+/**
+ * Prüft, ob eine neue Adresse der Website wirklich bei dieser Installation ankommt.
+ *
+ * Die Adresse entscheidet, wohin die Schreibweise mit oder ohne www umgeleitet wird - für die
+ * Website und für die Verwaltung. Stellt jemand auf www um, und www hat keinen DNS-Eintrag oder
+ * kein Zertifikat, leitet danach jede Seite ins Leere, und in die Verwaltung kommt man nur noch
+ * über FTP. Deshalb wird vor dem Speichern angefragt: Unter der neuen Adresse muss eine Kennung
+ * zurückkommen, die nur diese Installation kennt - abgeleitet aus APP_SECRET, ohne es zu verraten.
+ */
+class OriginCheck
+{
+    public const PATH = '/.well-known/kantsites-origin';
+
+    private Download $download;
+
+    public function __construct(private string $secret, ?Download $download = null)
+    {
+        // Kurz: die Anfrage geht an den eigenen Server und hält die Verwaltung so lange auf.
+        $this->download = $download ?? new Download(5, 10);
+    }
+
+    public function token(): string
+    {
+        return hash_hmac('sha256', 'site-origin', $this->secret);
+    }
+
+    /** Null, wenn die Adresse hier ankommt - sonst der Grund in einem Satz. */
+    public function problem(string $origin): ?string
+    {
+        if (!str_starts_with($origin, 'https://')) {
+            return 'Geprüft werden nur HTTPS-Adressen. Eine Adresse mit http:// lässt sich nur mit „Trotzdem übernehmen“ speichern.';
+        }
+        $antwort = $this->download->get($origin.self::PATH);
+        if (null === $antwort) {
+            $grund = $this->download->reason();
+
+            return 'Unter '.$origin.' antwortet diese Website nicht'.('' !== $grund ? ': '.rtrim($grund, '.').'.' : '.').' DNS-Eintrag und Zertifikat für diese Domain prüfen.';
+        }
+        if (!hash_equals($this->token(), trim($antwort))) {
+            return 'Unter '.$origin.' antwortet eine andere Website. Zeigt die Domain auf diesen Server?';
+        }
+
+        return null;
+    }
+}

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/content-picker.html.twig

@@ -1,11 +1,11 @@
 {% 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' }}">
+<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 ~ ')' : '' }}">
         <button type="button" class="subtle picker-clear" aria-label="{{ label|default('Seite') }}: Auswahl entfernen">✕</button>
     </div>
-    <input type="hidden" class="picker-value" name="{{ name }}" value="{{ selected ? selected.id : '' }}">
+    <input type="hidden" class="picker-value" name="{{ name }}" value="{{ selected ? attribute(selected, valueKey|default('id')) : '' }}">
     <div id="{{ id }}-results" class="picker-results" role="listbox" aria-label="Suchergebnisse" hidden></div>
     <p class="picker-status field-help" role="status"></p>
 </div>

templates/admin/content-results.html.twig

@@ -3,9 +3,9 @@
 {% include 'admin/pager.html.twig' with {route: listRoute, params: {q: query, status: status, limit: result.limit}, previousLabel: 'Zurück', nextLabel: 'Weiter', label: 'Ergebnisseiten oben'} %}
 <div class="rows">
 {% for page in pages %}
-    {# Indentation by class, not by style attribute: the administration forbids inline styles, so
-       an attribute here would simply be dropped and the tree would look flat. #}
-    <article class="row row-stack depth-{{ min(page.depth, 3) }}">
+    {# Newest first, not as a tree: indenting subpages here would suggest a parent that is not
+       the row above. The address in the row shows where a page sits. #}
+    <article class="row row-stack">
         <div class="row-line">
             <span class="row-icon" aria-hidden="true">{{ page.type == 'post' ? '✎' : '▤' }}</span>
             <div class="row-main">
@@ -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/editor.html.twig

@@ -4,7 +4,7 @@
 {% set listRoute = area ? 'admin_partials' : (page.type == 'post' ? 'admin_posts' : 'admin_pages') %}
 {% block title %}{{ subject.title }} bearbeiten{% endblock %}
 {% block body_class %}editor-body{% endblock %}
-{% block styles %}<link rel="stylesheet" href="/assets/editor.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/button-controls.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}">{% endblock %}
+{% block styles %}<link rel="stylesheet" href="/assets/editor.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/media-dialog.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/button-controls.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}">{% endblock %}
 {% block scripts %}<script type="module" src="/assets/editor.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block body %}
 {# The API base decides what is edited. An area is shared, so it has no draft and no

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/media.html.twig

@@ -3,7 +3,7 @@
 {% block title %}Mediathek{% endblock %}
 {% block scripts %}<script type="module" src="/assets/media-drop.js?v={{ kant_version() }}"></script><script type="module" src="/assets/live-search.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block heading %}Mediathek{% endblock %}
-{% block lead %}Alle Bilder, neueste zuerst. Beim Hochladen wird jedes Bild in WebP umgewandelt und in mehreren Breiten abgelegt; die Seite liefert dann die passende aus.{% endblock %}
+{% block lead %}Alle Bilder und PDFs, neueste zuerst. Beim Hochladen wird jedes Bild in WebP umgewandelt und in mehreren Breiten abgelegt; die Seite liefert dann die passende aus. PDFs bleiben, wie sie sind, und lassen sich in jedem Linkziel wählen.{% endblock %}
 {% block content %}
 
 {% if is_granted('ROLE_EDITOR') %}
@@ -19,13 +19,13 @@
     <div class="dropzone" data-dropzone>
         <label class="dropzone-label" for="files">
             <span class="dropzone-icon" aria-hidden="true">▩</span>
-            <strong>Bilder hierher ziehen</strong>
+            <strong>Bilder oder PDFs hierher ziehen</strong>
             <span class="dropzone-hint">oder klicken, um Dateien zu wählen</span>
         </label>
-        <input id="files" name="files[]" type="file" accept="image/jpeg,image/png,image/webp" multiple class="dropzone-input">
+        <input id="files" name="files[]" type="file" accept="image/jpeg,image/png,image/webp,application/pdf,.pdf" multiple class="dropzone-input">
     </div>
     <p class="dropzone-chosen" data-chosen role="status">Noch keine Datei gewählt.</p>
-    <p class="field-help">JPEG, PNG oder WebP, höchstens 8 MB je Bild. Mehrere Dateien sind möglich; das Hosting kann ein kleineres Limit setzen.</p>
+    <p class="field-help">JPEG, PNG oder WebP bis 8 MB je Bild, PDF bis 20 MB. Mehrere Dateien sind möglich; das Hosting kann ein kleineres Limit setzen. Hochgeladene Dateien sind über ihre Adresse öffentlich – nichts Vertrauliches hochladen.</p>
     <button class="primary" type="submit">Hochladen</button>
 </form>
 {% endif %}
@@ -38,4 +38,51 @@
 </form>
 {% include 'admin/search-feedback.html.twig' %}
 <div id="list-results" class="stack" role="region" aria-label="Suchergebnisse" tabindex="-1">{% include 'admin/media-results.html.twig' %}</div>
+
+{# Die PDFs stehen unter den Bildern und ohne Suche: es sind wenige, und ein Titel reicht, um
+   eines wiederzufinden. Der Schalter für das Archiv oben gilt auch hier. #}
+<section class="stack" aria-labelledby="documents-heading">
+    <div class="section-head">
+        <h2 id="documents-heading">Dokumente <span class="count">{{ documents|length }}</span></h2>
+    </div>
+    {% if documents is empty %}
+    <div class="empty">
+        <h3>Keine PDFs in der Mediathek.</h3>
+        <p>{{ is_granted('ROLE_EDITOR') ? 'Lade oben ein PDF hoch. Danach lässt es sich in jedem Linkziel wählen – etwa für einen Button „Preisliste“.' : 'Ein Redakteur kann PDFs hochladen.' }}</p>
+    </div>
+    {% else %}
+    <div class="rows">
+        {% for item in documents %}
+        <article class="row row-stack">
+            <div class="row-line">
+                <span class="row-icon row-icon-text" aria-hidden="true">PDF</span>
+                <div class="row-main">
+                    <h3><a href="{{ item.src }}" target="_blank" rel="noopener">{{ item.title }}</a></h3>
+                    <p class="muted">{{ (item.bytes / 1048576)|number_format(1, ',') }} MB · <code>{{ item.src }}</code>{% if item.archived %} · archiviert{% endif %}</p>
+                </div>
+            </div>
+            {% if is_granted('ROLE_EDITOR') %}
+            <details class="sheet">
+                <summary aria-label="Angaben zu {{ item.title }}">Angaben</summary>
+                <div class="sheet-body">
+                    <form action="{{ path('admin_document_save', {id: item.id}) }}" method="post">
+                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('media-form') }}">
+                        <input type="hidden" name="version" value="{{ item.version }}">
+                        <input type="hidden" name="seite" value="{{ library.page }}"><input type="hidden" name="q" value="{{ query }}">
+                        <input type="hidden" name="archiv" value="{{ archived ? '1' : '' }}">
+                        <label for="document-title-{{ item.id }}">Titel</label>
+                        <input id="document-title-{{ item.id }}" name="title" maxlength="160" required value="{{ item.title }}">
+                        <p class="field-help">Wird zum Dateinamen, wenn jemand das PDF speichert, und steht über dem Betrachter.</p>
+                        <label class="check-label" for="document-archived-{{ item.id }}"><input id="document-archived-{{ item.id }}" name="archived" type="checkbox" value="1"{{ item.archived ? ' checked' : '' }}> Archiviert</label>
+                        <p class="field-help">Archivierte PDFs erscheinen nicht mehr in der Auswahl, bleiben aber erreichbar – ein Link darauf geht nicht ins Leere.</p>
+                        <button class="primary" type="submit">Angaben speichern</button>
+                    </form>
+                </div>
+            </details>
+            {% endif %}
+        </article>
+        {% endfor %}
+    </div>
+    {% endif %}
+</section>
 {% endblock %}

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

@@ -3,7 +3,8 @@
 {% block title %}Einstellungen{% endblock %}
 {% block heading %}Unternehmen und Adressen{% endblock %}
 {% block lead %}Aus diesen Angaben entstehen die strukturierten Daten der Startseite. Was hier steht, ist genau das, was Suchmaschinen lesen – es gibt keine zweite, unsichtbare Fassung.{% endblock %}
-{% block scripts %}<script type="module" src="/assets/page-picker.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/page-picker.js?v={{ kant_version() }}"></script><script type="module" src="/assets/favicon-field.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block content %}
 
 {% if missingLegal is not empty %}
@@ -129,15 +130,19 @@
         <p class="field-help">Braucht mindestens Straße und Ort. Sinnvoll bei einem Standort mit Kundenverkehr.</p>
         <label class="check-label" for="llmsTxt"><input id="llmsTxt" name="llmsTxt" type="checkbox" value="1"{{ settings.llmsTxt ? ' checked' : '' }}> <code>llms.txt</code> ausliefern</label>
         <p class="field-help">Eine maschinenlesbare Liste der veröffentlichten, indexierbaren Seiten. Optional. Kein Rankingfaktor und keine Voraussetzung für irgendeine Suchfunktion; ohne Aktivierung antwortet die Adresse mit 404.</p>
-        <label for="faviconMediaId">Symbol der Website</label>
-        <div class="favicon-field">
-            {% if settings.faviconMediaId %}<img class="favicon-preview" src="/favicon.png?v={{ settings.faviconMediaId|slice(0, 8) }}" alt="" width="32" height="32">{% endif %}
-            <select id="faviconMediaId" name="faviconMediaId">
-                <option value="">Mitgeliefertes Zeichen</option>
-                {% for image in images %}<option value="{{ image.id }}"{{ settings.faviconMediaId == image.id ? ' selected' : '' }}>{{ image.title }}</option>{% endfor %}
-            </select>
+        <div class="section-head"><h2 id="favicon-title">Symbol der Website</h2><span class="muted">Favicon im Browser-Reiter und auf dem Startbildschirm</span></div>
+        <div class="favicon-field" data-favicon-field aria-labelledby="favicon-title" role="group">
+            <input type="hidden" name="faviconMediaId" value="{{ settings.faviconMediaId }}">
+            <input type="hidden" name="faviconCrop" value="{{ settings.faviconCrop }}">
+            <div class="favicon-current">
+                {% if settings.faviconMediaId %}<img class="favicon-preview" src="/favicon.png?v={{ settings.faviconVersion ?: settings.faviconMediaId|slice(0, 8) }}" alt="" width="32" height="32"> <span>Eigenes Symbol</span>{% else %}<img class="favicon-preview" src="/favicon.svg" alt="" width="32" height="32"> <span>Mitgeliefertes Zeichen</span>{% endif %}
+            </div>
+            <div class="favicon-actions">
+                <button type="button" class="secondary" data-favicon-choose>{{ settings.faviconMediaId ? 'Anderes Bild wählen' : 'Bild wählen oder hochladen' }}</button>
+                <button type="button" class="text-button danger-text" data-favicon-remove{{ settings.faviconMediaId ? '' : ' hidden' }}>Mitgeliefertes Zeichen verwenden</button>
+            </div>
         </div>
-        <p class="field-help">Das Bild im Browser-Reiter und auf dem Startbildschirm. Aus dem gewählten Bild entsteht beim Speichern ein quadratischer Ausschnitt aus der Mitte in 32 und 180 Pixeln – ein Logo mit viel Rand wird darin klein, ein quadratisches Zeichen funktioniert am besten.</p>
+        <p class="field-help">Das Bild kommt aus der Mediathek, dort kann es auch gleich hochgeladen werden. Danach das Quadrat auf den gewünschten Ausschnitt ziehen und die Größe einstellen. Beim Speichern entstehen daraus PNG-Dateien in 32 und 180 Pixeln.</p>
         <div class="section-head"><h2>Knopf „nach oben"</h2><span class="muted">Erscheint beim Scrollen, in der Ecke</span></div>
         <label class="check-label" for="scrollTop"><input id="scrollTop" name="scrollTop" type="checkbox" value="1"{{ settings.scrollTop ? ' checked' : '' }}> Knopf „nach oben" anzeigen</label>
         <p class="field-help">Springt an den Seitenanfang. Er braucht kein JavaScript: In Browsern mit Scroll-Zeitachse blendet er sich beim Scrollen ein, in den übrigen steht er von Anfang an da.</p>
@@ -261,13 +266,11 @@
         </fieldset>
         <div class="fields">
             <div>
-                <label for="privacyPath">Adresse der Datenschutzseite</label>
-                <input id="privacyPath" name="privacyPath" maxlength="400" value="{{ settings.privacyPath }}" placeholder="datenschutz">
+                {% include 'admin/content-picker.html.twig' with {id: 'privacyPath', name: 'privacyPath', type: 'page', valueKey: 'path', label: 'Datenschutzseite', selected: legalSelection.privacyPath} only %}
                 <p class="field-help">Pflicht, sobald der Hinweis an ist, und die Seite muss existieren.</p>
             </div>
             <div>
-                <label for="imprintPath">Adresse des Impressums</label>
-                <input id="imprintPath" name="imprintPath" maxlength="400" value="{{ settings.imprintPath }}" placeholder="impressum">
+                {% include 'admin/content-picker.html.twig' with {id: 'imprintPath', name: 'imprintPath', type: 'page', valueKey: 'path', label: 'Impressum', selected: legalSelection.imprintPath} only %}
             </div>
         </div>
         <p class="field-help">Die Entscheidung liegt in einem Cookie dieser Website, ein halbes Jahr lang, ohne Kennung und ohne Übermittlung. Unter <code>/einwilligung</code> kann sie jederzeit geändert werden; auf jeder Seite steht dafür ein Link.</p>
@@ -289,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/admin/system.html.twig

@@ -40,9 +40,28 @@
                 {% if origin.passt %}
                 <span class="muted">– Canonical, Sitemap und Feed nennen sie; die Schreibweise {{ origin.adresse matches '{^https?://www\.}' ? 'ohne' : 'mit' }} www leitet hierher um.</span>
                 {% else %}
-                <br><span class="check-bad"><strong>Diese Verwaltung läuft gerade unter <code>{{ origin.host }}</code>.</strong> Canonical, Sitemap und Feed nennen trotzdem die eingetragene Adresse. Stimmt die nicht mehr: <code>php bin/console cms:site:origin https://…</code> oder <code>SITE_ORIGIN</code> in <code>.env</code> ändern.</span>
+                <br><span class="check-bad"><strong>Diese Verwaltung läuft gerade unter <code>{{ origin.host }}</code>.</strong> Canonical, Sitemap und Feed nennen trotzdem die eingetragene Adresse. Stimmt die nicht mehr, unten ändern.</span>
+                {% endif %}
+                {% if origin.quelle == '.env' %}
+                {# Wie „WordPress-Adresse“: eine Stelle für mit oder ohne www. Vor dem Speichern fragt
+                   die Installation sich selbst unter der neuen Adresse an. #}
+                {% set host = origin.adresse|split('://')|last|split(':')|first %}
+                {% set twin = host starts with 'www.' ? host|slice(4) : 'www.' ~ host %}
+                <form class="origin-form" action="{{ path('admin_system_origin') }}" method="post">
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('system') }}">
+                    <label for="origin">Adresse der Website</label>
+                    <div class="origin-row">
+                        <input id="origin" name="origin" type="url" inputmode="url" maxlength="200" required placeholder="https://www.meine-firma.de" value="{{ originRejected ?: origin.adresse }}" aria-describedby="origin-help">
+                        <button class="secondary" type="submit">Adresse speichern</button>
+                    </div>
+                    {% if originRejected %}
+                    <label class="check-label" for="origin-force"><input id="origin-force" type="checkbox" name="force" value="1"> Trotzdem übernehmen – ich habe DNS und Zertifikat geprüft</label>
+                    {% endif %}
+                    <p class="field-help" id="origin-help">Nur Schema und Domain. Vor dem Speichern wird geprüft, ob die Website unter der neuen Adresse antwortet – sonst leitete die andere Schreibweise ins Leere, die Verwaltung eingeschlossen.{% if origin.adresse and host matches '/^[a-z0-9-]+(\.[a-z0-9-]+)+$/' and not (host matches '/^[0-9.]+$/') %} Umstellen auf <button class="link-button" type="submit" name="origin" value="{{ origin.adresse|split('://')|first }}://{{ twin }}" formnovalidate>{{ twin }}</button>.{% endif %}</p>
+                </form>
+                {% else %}
+                <br><span class="muted">Eingestellt in der Server-Umgebung; sie hat Vorrang vor <code>.env</code> und lässt sich nur beim Hoster ändern.</span>
                 {% endif %}
-                <br><span class="muted">Eingestellt in <code>{{ origin.quelle }}</code>; Server-Umgebungsvariablen haben Vorrang.</span>
             </dd>
             {% if state.worktree %}
             <dt>Stand</dt><dd><code>{{ state.describe }}</code>{% if state.commit != 'unbekannt' %} · Commit <code>{{ state.commit }}</code>{% endif %}</dd>

templates/blocks/block.html.twig

@@ -26,7 +26,7 @@
     {% endif %}
 {% elseif type == 'button' %}
     {% for device, settings in layout.button|default({}) %}{% for key, value in settings %}{% set designClasses = designClasses ~ ' b-' ~ device ~ '-' ~ key ~ '-' ~ value %}{% endfor %}{% endfor %}
-    <a id="{{ block.id }}" class="button cms-button{{ designClasses }}" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.text }} <span aria-hidden="true">↗</span></a>
+    <a id="{{ block.id }}" class="button cms-button{{ designClasses }}" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.text }} <span class="button-arrow" aria-hidden="true">{% include 'blocks/icon.html.twig' with {name: 'arrow-up-right'} only %}</span></a>
 {% elseif type == 'image' %}
     {# Wie breit das Bild tatsaechlich erscheint. Steht im Block eine feste Breite - ein Logo mit
        190px, ein Symbol mit 72px -, dann ist das die Antwort, und der Browser laedt die kleine
@@ -39,7 +39,9 @@
        für Browser, die „auto“ noch nicht kennen (heute Safari). #}
     {% set annahme = '(max-width: 650px) 100vw, (max-width: 1024px) 50vw, 800px' %}
     {% set imageSizes = festeBreite ends with 'px' ? festeBreite : (eager or inHeader|default(false) ? annahme : 'auto, ' ~ annahme) %}
-    {% set klick = props.click|default(props.href|default('') ? 'link' : 'keine') %}
+    {# Ohne eigene Wahl folgt ein Bild seiner Galerie: ist sie vergrößerbar, ist es das Bild auch.
+       Eine eigene Wahl - auch „Nichts tun“ - geht vor, ebenso ein Link. #}
+    {% set klick = props.click|default(props.href|default('') ? 'link' : (galleryZoom|default(false) ? 'vergroessern' : 'keine')) %}
     {% set imageLinked = klick == 'link' and props.href|default('') %}
     {% set grossesBild = props.sources|default([]) ? props.sources|last.src : props.src %}
     <figure id="{{ block.id }}" class="block-image{{ designClasses }}">
@@ -284,7 +286,7 @@
     </nav>
 {% elseif type == 'gallery' %}
     <div id="{{ block.id }}" class="block-gallery{{ designClasses }}" role="group" aria-label="Bildergalerie"{% if props.lightbox|default(false) %} data-zoom-group{% endif %}>
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, galleryZoom: props.lightbox|default(false), editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
     </div>
 {% elseif kant_plugin_block(type) %}
     {# Ein Baustein eines aktiven Plugins. Die Vorlage bekommt nur, was der Kern geprüft hat:

templates/blocks/icon.html.twig

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

templates/blocks/post-nav.html.twig

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

templates/favicon.html.twig

@@ -1,9 +1,13 @@
 {# Das Symbol der Website. Eigenes Bild aus den Einstellungen, sonst das mitgelieferte Zeichen.
-   Die Kennung hängt als Version am Verweis, damit ein Wechsel im Browser auch ankommt. #}
-{% set favicon = siteSettings.load().faviconMediaId|default('') %}
+   Die Kennung hängt als Version am Verweis, damit ein Wechsel im Browser auch ankommt.
+   Das 192er ist für die Google-Suche: sie nimmt nur Vielfache von 48 px. #}
+{% set site = siteSettings.load() %}
+{% set favicon = site.faviconMediaId|default('') %}
+{% set version = site.faviconVersion|default('') ?: favicon|slice(0, 8) %}
 {% if favicon %}
-    <link rel="icon" href="/favicon.png?v={{ favicon|slice(0, 8) }}" type="image/png" sizes="32x32">
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png?v={{ favicon|slice(0, 8) }}">
+    <link rel="icon" href="/favicon.png?v={{ version }}" type="image/png" sizes="32x32">
+    <link rel="icon" href="/favicon-192.png?v={{ version }}" type="image/png" sizes="192x192">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png?v={{ version }}">
 {% else %}
     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 {% endif %}

templates/page.html.twig

@@ -34,6 +34,10 @@
        drei Abfragen trifft zu - und zwar auf dieselbe Variante, die auch die Regel nimmt. #}
     {% for bild in heroBackground|default([]) %}<link rel="preload" as="image" href="{{ bild.src }}" media="{{ bild.media }}" fetchpriority="high">
     {% endfor %}
+    {# Und derselbe Dienst fuer das gewoehnliche Bild ueber der Falz: ohne diese Zeile faengt der
+       Browser es erst an zu holen, wenn er das Stylesheet geparst hat. #}
+    {% if heroImage|default(null) %}<link rel="preload" as="image" href="{{ heroImage.src }}"{% if heroImage.srcset %} imagesrcset="{{ heroImage.srcset }}" imagesizes="{{ heroImage.sizes }}"{% endif %} fetchpriority="high">
+    {% endif %}
     {% if localFonts|default([]) %}
     {# Jeder Schnitt, den das Theme nennt, vorab - und zwar alle. Fehlt einer, laedt er erst,
        wenn das Stylesheet geparst ist, und die Ueberschrift springt sichtbar von der
@@ -58,7 +62,7 @@
     {% if needsSlider|default(false) %}<script type="module" src="/assets/slider.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsMotion|default(false) %}<script type="module" src="/assets/motion.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsScrolled|default(false) %}<script type="module" src="/assets/scrolled.js?v={{ kant_version() }}"></script>{% endif %}
-    {% if needsZoom|default(false) %}<script src="/assets/lightbox.js?v={{ kant_version() }}" defer></script>{% endif %}
+    {% if needsZoom|default(false) or needsDocument|default(false) %}<script src="/assets/lightbox.js?v={{ kant_version() }}" defer></script>{% endif %}
     {% if not editing|default(false) %}{% for src in pluginScripts|default([]) %}<script src="{{ src }}" defer></script>{% endfor %}{% endif %}
     {# Own scripts of this page, as a file. Never rendered in the editor preview: the preview must
        show the layout, not run code that could change the page under the editor's hands. #}

tests/CmsTest.php

@@ -5,6 +5,7 @@ namespace App\Tests;
 use App\Content\Consent;
 use App\Content\CustomCode;
 use App\Content\DemoContent;
+use App\Content\DocumentLibrary;
 use App\Content\DocumentValidator;
 use App\Content\FontLibrary;
 use App\Content\FormRepository;
@@ -1153,6 +1154,91 @@ final class CmsTest extends TestCase
         self::assertStringContainsString("script-src 'none'", (string) $zweite->headers->get('Content-Security-Policy'));
     }
 
+    public function testAZoomableGalleryMakesEveryImageWithoutItsOwnChoiceZoomable(): void
+    {
+        // Umut: „Bei Galerie muss man da alles einzeln machen? kann man das mit einem Klick für
+        // alle Elemente machen?" Der Haken an der Galerie gilt jetzt für jedes Bild darin, das
+        // selbst nichts gewählt hat. Eine eigene Wahl und ein Link gehen vor.
+        $bild = static fn (string $id, array $props): array => ['id' => $id, 'type' => 'image', 'props' => [
+            'src' => '/media/'.str_repeat('a', 32).'/480', 'alt' => 'Motiv '.$id, 'decorative' => false, 'width' => 480, 'height' => 270, ...$props,
+        ]];
+        $document = DemoContent::starter('Startseite');
+        $document['schemaVersion'] = 19;
+        $document['blocks'][] = ['id' => 'galerie', 'type' => 'gallery', 'props' => ['lightbox' => true], 'children' => [
+            $bild('frei1', []),
+            $bild('frei2', []),
+            $bild('still', ['click' => 'keine']),
+            $bild('verlinkt', ['click' => 'link', 'href' => '/kontakt']),
+        ]];
+        $document['blocks'][] = ['id' => 'ohne', 'type' => 'gallery', 'props' => [], 'children' => [$bild('ruhig', [])]];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+
+        $html = $this->request('/')->getContent();
+        self::assertMatchesRegularExpression('#<figure id="frei1"[^>]*>\s*<a class="image-link image-zoom"#', $html);
+        self::assertMatchesRegularExpression('#<figure id="frei2"[^>]*>\s*<a class="image-link image-zoom"#', $html);
+        self::assertMatchesRegularExpression('#<figure id="still"[^>]*><img#', $html);
+        self::assertMatchesRegularExpression('#<figure id="verlinkt"[^>]*>\s*<a class="image-link" href="/kontakt"#', $html);
+        // Eine Galerie ohne Haken bleibt, wie sie war.
+        self::assertMatchesRegularExpression('#<figure id="ruhig"[^>]*><img#', $html);
+        self::assertSame(2, substr_count($html, 'image-zoom'));
+        self::assertStringContainsString('<script src="/assets/lightbox.js?v=', $html);
+    }
+
+    public function testAPdfFromTheLibraryIsALinkTargetAndOpensInTheViewer(): void
+    {
+        // Umut: „PDFs hochladen und als Button verlinken - und ein Inline-PDF-Viewer wie das
+        // Bild-Popup." Das PDF bleibt, wie es kam; geprüft wird, dass es eines ist.
+        $documents = new DocumentLibrary($this->db, $this->path.'-media');
+        $file = tempnam(sys_get_temp_dir(), 'kant-pdf-');
+        try {
+            file_put_contents($file, '<svg xmlns="http://www.w3.org/2000/svg"><script>alert(1)</script></svg>');
+            try {
+                $documents->upload(new UploadedFile($file, 'preisliste.pdf', test: true));
+                self::fail('Eine Datei, die kein PDF ist, darf nicht als PDF durchgehen.');
+            } catch (\InvalidArgumentException) {
+            }
+            self::assertSame(0, (int) $this->db->fetchOne('SELECT COUNT(*) FROM document'));
+
+            file_put_contents($file, "%PDF-1.4\n1 0 obj << /Type /Catalog >> endobj\ntrailer << /Root 1 0 R >>\n%%EOF\n");
+            $item = $documents->upload(new UploadedFile($file, 'Preisliste 2026.pdf', test: true));
+        } finally {
+            @unlink($file);
+        }
+        self::assertSame('Preisliste 2026', $item['title']);
+        self::assertSame('/media/'.$item['id'].'.pdf', $item['src']);
+
+        // Ausgeliefert als PDF, zum Anzeigen, mit dem Titel als Dateinamen, und einbetten darf es
+        // nur die eigene Website.
+        $antwort = $this->request($item['src']);
+        self::assertSame(200, $antwort->getStatusCode());
+        self::assertSame('application/pdf', $antwort->headers->get('Content-Type'));
+        self::assertSame('nosniff', $antwort->headers->get('X-Content-Type-Options'));
+        self::assertSame("frame-ancestors 'self'", $antwort->headers->get('Content-Security-Policy'));
+        self::assertStringStartsWith('inline;', (string) $antwort->headers->get('Content-Disposition'));
+        self::assertStringContainsString('Preisliste 2026.pdf', (string) $antwort->headers->get('Content-Disposition'));
+        self::assertSame(404, $this->request('/media/'.str_repeat('a', 32).'.pdf')->getStatusCode());
+
+        // Ein Button zeigt auf das PDF - ein gewöhnlicher lokaler Pfad, ohne neues Schema.
+        $document = DemoContent::starter('Startseite');
+        $document['blocks'][] = ['id' => 'preise', 'type' => 'button', 'props' => ['text' => 'Preisliste', 'href' => $item['src']]];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+        $seite = $this->request('/');
+        $html = $seite->getContent();
+        self::assertStringContainsString('href="'.$item['src'].'"', $html);
+        self::assertStringContainsString('<script src="/assets/lightbox.js?v=', $html);
+        $csp = (string) $seite->headers->get('Content-Security-Policy');
+        self::assertStringContainsString("frame-src 'self'", $csp);
+        self::assertStringContainsString("script-src 'self'", $csp);
+
+        // Ohne Link auf ein PDF bleibt es beim alten: kein Skript, kein Rahmen.
+        $ohne = DemoContent::starter('Startseite');
+        $version = $this->pages->findForEditor('page-1')['version'];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $ohne, $version), $version + 1);
+        $zweite = $this->request('/');
+        self::assertStringNotContainsString('lightbox.js', $zweite->getContent());
+        self::assertStringContainsString("frame-src 'none'", (string) $zweite->headers->get('Content-Security-Policy'));
+    }
+
     public function testLegalLinksAppearOnlyWhereAnAuthorPlacesThem(): void
     {
         // Die hinterlegten Adressen erzeugen keine zusätzliche Leiste unter dem Footer.
@@ -1398,8 +1484,11 @@ final class CmsTest extends TestCase
         $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
         $html = $this->request('/')->getContent();
 
-        // Genau ein Bild wird vorgezogen, und zwar das erste im ersten Abschnitt.
-        self::assertSame(1, substr_count($html, 'fetchpriority="high"'));
+        // Genau ein Bild wird vorgezogen, und zwar das erste im ersten Abschnitt. Es wird
+        // zweimal genannt: einmal als Vorabladung im Kopf, einmal als das Bild selbst.
+        self::assertSame(1, substr_count($html, '<link rel="preload" as="image"'));
+        self::assertMatchesRegularExpression('#<link rel="preload" as="image" href="[^"]+" imagesrcset="[^"]*480w[^"]*" imagesizes="\(max-width: 650px\) 100vw[^"]*" fetchpriority="high">#', $html);
+        self::assertSame(2, substr_count($html, 'fetchpriority="high"'));
         self::assertMatchesRegularExpression('#<figure id="gross".{0,400}fetchpriority="high"#s', $html);
         self::assertMatchesRegularExpression('#<figure id="weiter-unten".{0,400}loading="lazy"#s', $html);
         // Ein Block mit fester Breite fragt nach genau dieser Breite.
@@ -1589,6 +1678,19 @@ final class CmsTest extends TestCase
         self::assertSame([32, 32], [$size[0], $size[1]], 'Quadratisch, nicht gestaucht.');
         self::assertSame(200, $this->request('/apple-touch-icon.png')->getStatusCode());
 
+        // Der Zuschnitt aus dem Werkzeug: links oben, ein Viertel der kurzen Seite. Der Verweis
+        // bekommt eine neue Version, sonst hielte der Browser am alten Ausschnitt fest.
+        $this->site->save(['country' => 'DE', 'homePath' => 'home', 'faviconMediaId' => $item['id'], 'faviconCrop' => '0,0,0.25']);
+        self::assertSame('0,0,0.25', $this->site->load()['faviconCrop']);
+        self::assertStringContainsString('/favicon.png?v='.substr(md5($item['id'].'|0,0,0.25'), 0, 8), $this->request('/')->getContent());
+        foreach (['2,0,0.5', '0,0,0.01', 'mitte'] as $falsch) {
+            try {
+                $this->site->save(['country' => 'DE', 'homePath' => 'home', 'faviconMediaId' => $item['id'], 'faviconCrop' => $falsch]);
+                self::fail('Ein ungültiger Ausschnitt muss abgelehnt werden: '.$falsch);
+            } catch (InvalidPage) {
+            }
+        }
+
         // Ein winziges quadratisches Zeichen hat keine einzige der vier Regelbreiten - genau so
         // sieht ein echtes Favicon aus, und genau daran ist die erste Fassung gescheitert.
         $klein = tempnam(sys_get_temp_dir(), 'kant-zeichen-');
@@ -1610,6 +1712,52 @@ final class CmsTest extends TestCase
         self::assertSame($kleines['id'], $this->site->load()['faviconMediaId']);
     }
 
+    public function testGoogleGetsTheOwnSiteIconUnderEveryAddress(): void
+    {
+        // Umut: Google zeigte bei Elektro Bernhard nach dem Wechsel weiter das KantSites-K. Das
+        // eigene Symbol gab es nur in 32 px (Google will Vielfache von 48), und /favicon.svg lag
+        // als Datei in public/ und lieferte immer das mitgelieferte Zeichen.
+        self::assertFileDoesNotExist(__DIR__.'/../public/favicon.svg');
+        $ohne = $this->request('/favicon.svg');
+        self::assertSame(200, $ohne->getStatusCode());
+        self::assertSame('image/svg+xml', $ohne->headers->get('Content-Type'));
+        self::assertSame('/favicon.svg', $this->request('/favicon.ico')->headers->get('Location'));
+        self::assertSame(404, $this->request('/favicon-192.png')->getStatusCode());
+
+        $media = new MediaLibrary($this->db, $this->path.'-media');
+        $file = tempnam(sys_get_temp_dir(), 'kant-symbol-');
+        $image = imagecreatetruecolor(300, 300);
+        imagepng($image, $file);
+        imagedestroy($image);
+        $item = $media->upload(new UploadedFile($file, 'zeichen.png', test: true));
+        @unlink($file);
+        $this->site->save(['country' => 'DE', 'homePath' => 'home', 'faviconMediaId' => $item['id']]);
+        $version = substr($item['id'], 0, 8);
+
+        self::assertStringContainsString('<link rel="icon" href="/favicon-192.png?v='.$version.'" type="image/png" sizes="192x192">', $this->request('/')->getContent());
+        foreach (['/favicon-192.png' => 192, '/favicon.ico' => 48] as $adresse => $kante) {
+            $antwort = $this->request($adresse);
+            self::assertSame(200, $antwort->getStatusCode(), $adresse);
+            self::assertSame('image/png', $antwort->headers->get('Content-Type'));
+            $size = getimagesizefromstring((string) file_get_contents($this->path.'-media/favicon-'.$kante.'.png'));
+            self::assertSame([$kante, $kante], [$size[0], $size[1]]);
+        }
+        $svg = $this->request('/favicon.svg');
+        self::assertSame(302, $svg->getStatusCode());
+        self::assertSame('/favicon-192.png?v='.$version, $svg->headers->get('Location'));
+
+        // Wer sein Symbol vor den neuen Größen gesetzt hat, bekommt sie beim ersten Abruf.
+        unlink($this->path.'-media/favicon-48.png');
+        unlink($this->path.'-media/favicon-192.png');
+        self::assertSame(200, $this->request('/favicon-192.png')->getStatusCode());
+        self::assertFileExists($this->path.'-media/favicon-48.png');
+
+        // Symbol entfernt: die Dateien liegen noch da, gelten aber nicht mehr.
+        $this->site->save(['country' => 'DE', 'homePath' => 'home', 'faviconMediaId' => '']);
+        self::assertSame(200, $this->request('/favicon.svg')->getStatusCode());
+        self::assertSame(404, $this->request('/favicon.png')->getStatusCode());
+    }
+
     public function testUnderlinedLinksAreAChoiceAndOnlyApplyToRunningText(): void
     {
         // Umut: „links haben alle underlined“. Im Menü, auf Karten und über Bildern hat ein
@@ -1944,7 +2092,8 @@ final class CmsTest extends TestCase
         $template = (string) file_get_contents(__DIR__.'/../templates/blocks/icon.html.twig');
         foreach (DocumentValidator::ICONS as $icon) {
             self::assertMatchesRegularExpression(
-                '/\R\s{4}'.preg_quote($icon, '/').": '[^']{4,}',?\R/",
+                // Ein Name mit Bindestrich braucht in Twig Anfuehrungszeichen um den Schluessel.
+                '/\R\s{4}\'?'.preg_quote($icon, '/')."'?: '[^']{4,}',?\R/",
                 $template,
                 sprintf('Das Symbol „%s“ steht in der Liste, hat aber keine Zeichnung.', $icon),
             );
@@ -2983,6 +3132,12 @@ final class CmsTest extends TestCase
         yield 'descendant keeps its space' => ['& .block-text { font-size: 20px }', '#b1 .block-text{font-size:20px}'];
         yield 'child combinator' => ['& > p { margin: 0 }', '#b1 > p{margin:0}'];
         yield 'local image' => ['background: url(/bild.png)', '#b1{background:url(/bild.png)}'];
+        // Zweimal derselbe Selektor ist eine Kaskade, kein Widerruf: vorher gewann die letzte
+        // Regel, und was nur in der ersten stand, verschwand ohne Meldung.
+        yield 'same selector twice' => ['& .card { border: 0 }
+& .card { transform: none }', '#b1 .card{border:0;transform:none}'];
+        yield 'element rule after a nested one' => ['& { color: red }
+display: flex', '#b1{display:flex;color:red}'];
     }
 
     #[DataProvider('ownCssCases')]

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');
@@ -738,6 +843,47 @@ final class EditorSecurityTest extends WebTestCase
         }
     }
 
+    public function testPdfsGoThroughTheMediaUploadAndTheEditorPicker(): void
+    {
+        $client = $this->login('editor');
+        $crawler = $client->request('GET', '/admin/media');
+        $token = $crawler->filter('form[action="/admin/media/upload"] input[name="_csrf_token"]')->attr('value');
+        $path = tempnam(sys_get_temp_dir(), 'kant-form-pdf-');
+        try {
+            file_put_contents($path, "%PDF-1.7\n%%EOF\n");
+            // Dasselbe Feld wie für Bilder: der Inhalt entscheidet, wohin die Datei geht.
+            $client->request('POST', '/admin/media/upload', ['_csrf_token' => $token], ['files' => [new UploadedFile($path, 'Flyer.pdf', test: true)]]);
+            self::assertResponseRedirects('/admin/media');
+            self::assertSame(0, (int) $this->db->fetchOne('SELECT COUNT(*) FROM media'));
+            self::assertSame('Flyer', $this->db->fetchOne('SELECT title FROM document'));
+            $crawler = $client->followRedirect();
+            self::assertStringContainsString('1 Datei(en) hochgeladen', $crawler->filter('.notice.ok')->text());
+            self::assertCount(1, $crawler->filter('section[aria-labelledby="documents-heading"] .row'));
+
+            // Die Auswahl im Editor: Liste mit Token, Hochladen nur mit Token.
+            $client->request('GET', '/admin/api/dokumente');
+            self::assertResponseIsSuccessful();
+            $data = json_decode($client->getResponse()->getContent(), true);
+            self::assertSame('Flyer', $data['items'][0]['title']);
+            $client->request('POST', '/admin/api/dokumente/upload', files: ['file' => new UploadedFile($path, 'zweites.pdf', test: true)]);
+            self::assertResponseStatusCodeSame(403);
+            file_put_contents($path, '<?php echo 1;');
+            $client->request('POST', '/admin/api/dokumente/upload', files: ['file' => new UploadedFile($path, 'getarnt.pdf', test: true)], server: ['HTTP_X_CSRF_TOKEN' => $data['csrfToken']]);
+            self::assertResponseStatusCodeSame(422);
+            self::assertSame(1, (int) $this->db->fetchOne('SELECT COUNT(*) FROM document'));
+
+            // Archivieren nimmt es aus der Auswahl-Übersicht, die Datei bleibt erreichbar.
+            $id = $data['items'][0]['id'];
+            $client->request('POST', '/admin/api/dokumente/'.$id, server: ['CONTENT_TYPE' => 'application/json', 'HTTP_X_CSRF_TOKEN' => $data['csrfToken']], content: json_encode(['title' => 'Flyer 2026', 'archived' => true, 'version' => 1]));
+            self::assertResponseIsSuccessful();
+            self::assertCount(0, $client->request('GET', '/admin/media')->filter('section[aria-labelledby="documents-heading"] .row'));
+            $client->request('GET', '/media/'.$id.'.pdf');
+            self::assertResponseIsSuccessful();
+        } finally {
+            unlink($path);
+        }
+    }
+
     public function testMediaPreviewReadsSmallAndArchivedImagesWithoutListingTheLibrary(): void
     {
         $id = str_repeat('a', 32);
@@ -785,7 +931,7 @@ final class EditorSecurityTest extends WebTestCase
             $crawler = $client->followRedirect();
             self::assertCount(2, $crawler->filter('.library-tile'));
             self::assertCount(1, $crawler->filter('.notice.ok'));
-            self::assertStringContainsString('2 Bild(er) hochgeladen', $crawler->filter('.notice.ok')->text());
+            self::assertStringContainsString('2 Datei(en) hochgeladen', $crawler->filter('.notice.ok')->text());
 
             $id = (string) $this->db->fetchOne('SELECT id FROM media LIMIT 1');
             $client->request('POST', '/admin/media/'.$id, ['_csrf_token' => $token, 'title' => 'Bergblick', 'alt' => 'Grüne Berglandschaft', 'archived' => '1', 'version' => 1]);

tests/SystemScreenTest.php

@@ -14,6 +14,7 @@ use App\Ops\ArchiveUpdate;
 use App\Ops\Backup;
 use App\Ops\CommandRunner;
 use App\Ops\Download;
+use App\Ops\OriginCheck;
 use App\Ops\Updater;
 use Doctrine\DBAL\Connection;
 use Symfony\Bundle\FrameworkBundle\KernelBrowser;
@@ -133,7 +134,7 @@ final class SystemScreenTest extends WebTestCase
         $html = (string) $client->getResponse()->getContent();
         self::assertStringContainsString('https://cms.test', $html);
         self::assertStringContainsString('läuft gerade unter <code>localhost</code>', $html);
-        self::assertStringContainsString('cms:site:origin', $html, 'Der Weg, es zu aendern, steht dabei.');
+        self::assertStringContainsString('Stimmt die nicht mehr, unten ändern.', $html);
 
         // Unter der eingetragenen Adresse selbst: kein Hinweis, dafuer die Richtung der Umleitung.
         $client->request('GET', 'https://cms.test/admin/login');
@@ -149,6 +150,85 @@ final class SystemScreenTest extends WebTestCase
         self::assertSame('https://cms.test/admin/system', $client->getResponse()->headers->get('Location'));
     }
 
+    public function testTheAddressIsSetInTheAdministrationButOnlyWhereItReallyArrives(): void
+    {
+        // Umut: „bau die Einstellung in der Verwaltung ein sodass es in die env eingetragen wird“ -
+        // wie die WordPress-Adresse. Im Test kommt SITE_ORIGIN aus der Server-Umgebung; dort hat
+        // sie Vorrang, also gibt es kein Feld, und auch ein POST ändert nichts.
+        $client = $this->login();
+        $client->request('GET', '/admin/system');
+        $html = (string) $client->getResponse()->getContent();
+        self::assertStringContainsString('lässt sich nur beim Hoster ändern', $html);
+        self::assertStringNotContainsString('name="origin"', $html);
+        $token = (string) $client->getCrawler()->filter('form[action$="/system/wartung"] input[name=_csrf_token]')->attr('value');
+        $client->request('POST', '/admin/system/adresse', ['_csrf_token' => $token, 'origin' => 'https://www.cms.test']);
+        $client->followRedirect();
+        self::assertStringContainsString('in der Server-Umgebung gesetzt', (string) $client->getResponse()->getContent());
+
+        // Steht sie in .env, gibt es das Feld samt Umschalter auf die andere Schreibweise.
+        $geladen = $_SERVER['SYMFONY_DOTENV_VARS'] ?? null;
+        $_SERVER['SYMFONY_DOTENV_VARS'] = 'SITE_ORIGIN';
+        try {
+            $client->request('GET', '/admin/system');
+            $html = (string) $client->getResponse()->getContent();
+            self::assertStringContainsString('name="origin" type="url"', $html);
+            self::assertStringContainsString('value="https://www.cms.test" formnovalidate>www.cms.test</button>', $html);
+
+            // Eine Adresse, unter der diese Website nicht antwortet, wird nicht gespeichert - sonst
+            // leitete die andere Schreibweise ins Leere. Das Feld behält sie, und erst jetzt
+            // erscheint „Trotzdem übernehmen“.
+            $client->request('POST', '/admin/system/adresse', ['_csrf_token' => $token, 'origin' => 'https://kein-server.invalid/']);
+            $client->followRedirect();
+            $html = (string) $client->getResponse()->getContent();
+            self::assertStringContainsString('Unter https://kein-server.invalid antwortet diese Website nicht', $html);
+            self::assertStringContainsString('Nichts geändert.', $html);
+            self::assertStringContainsString('value="https://kein-server.invalid"', $html);
+            self::assertStringContainsString('name="force"', $html);
+            foreach (['https://cms.test/start' => 'ohne Pfad', 'ftp://cms.test' => 'beginnt mit https://'] as $falsch => $meldung) {
+                $client->request('POST', '/admin/system/adresse', ['_csrf_token' => $token, 'origin' => $falsch]);
+                $client->followRedirect();
+                self::assertStringContainsString($meldung, (string) $client->getResponse()->getContent());
+            }
+        } finally {
+            if (null === $geladen) {
+                unset($_SERVER['SYMFONY_DOTENV_VARS']);
+            } else {
+                $_SERVER['SYMFONY_DOTENV_VARS'] = $geladen;
+            }
+        }
+        self::assertStringContainsString('SITE_ORIGIN', (string) file_get_contents(dirname(__DIR__).'/.env'));
+        self::assertStringNotContainsString('kein-server', (string) file_get_contents(dirname(__DIR__).'/.env'));
+
+        // Die Gegenstelle der Prüfung: öffentlich, ohne Anmeldung, und nur die Kennung.
+        $client->request('GET', '/.well-known/kantsites-origin');
+        self::assertSame(200, $client->getResponse()->getStatusCode());
+        self::assertSame(hash_hmac('sha256', 'site-origin', 'isolated-test-secret'), $client->getResponse()->getContent());
+    }
+
+    public function testTheAddressCheckWantsThisInstallationsOwnAnswer(): void
+    {
+        $antwort = null;
+        $download = new class($antwort) extends Download {
+            public function __construct(private ?string &$antwort)
+            {
+                parent::__construct();
+            }
+
+            public function get(string $url): ?string
+            {
+                return $this->antwort;
+            }
+        };
+        $check = new OriginCheck('geheim', $download);
+        self::assertStringContainsString('antwortet diese Website nicht', (string) $check->problem('https://www.example.de'));
+        $antwort = hash_hmac('sha256', 'site-origin', 'anderes-geheimnis');
+        self::assertStringContainsString('antwortet eine andere Website', (string) $check->problem('https://www.example.de'));
+        $antwort = $check->token().'
+';
+        self::assertNull($check->problem('https://www.example.de'));
+        self::assertStringContainsString('nur HTTPS', (string) $check->problem('http://www.example.de'));
+    }
+
     public function testTheScreenShowsWhatTheArchiveUpdaterDidInsteadOfDyingOnIt(): void
     {
         // Der Fehler, den Umut auf seinem Hosting gesehen hat: Das Update lief, legte seine

tests/TestSchema.php

@@ -21,6 +21,7 @@ use DoctrineMigrations\Version20260913000100;
 use DoctrineMigrations\Version20260914000100;
 use DoctrineMigrations\Version20260915000100;
 use DoctrineMigrations\Version20260916000100;
+use DoctrineMigrations\Version20260917000100;
 use Psr\Log\NullLogger;
 
 /**
@@ -53,6 +54,7 @@ final class TestSchema
             Version20260914000100::class,
             Version20260915000100::class,
             Version20260916000100::class,
+            Version20260917000100::class,
         ] as $migration) {
             (new $migration($db, new NullLogger()))->up($schema);
         }