Release 1.22.5

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-3fc9a10171d3/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",

VERSION

@@ -1 +1 @@
-1.21.8
+1.22.5

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.

docs/STATUS.md

@@ -1,5 +1,76 @@
 # Projektstatus
 
+## Fassung 1.22.5: alte Browserchecks wieder grün, Kopfbereich von kant-it.de wieder bearbeitbar (22.09.2026)
+
+**Anlass:** Umut: „räum den Strukturbaum-Fehler auch auf und Release 1.22.5“.
+
+- **Strukturbaum:** `test:admin`, `test:buttons` und `test:navigation-ux` klickten direkt in den Strukturbaum. Seit 1.11 zeigt die Seitenleiste aber eine Ansicht auf einmal, Standard „Elemente“, und der Baum war versteckt. Jetzt wählen die Checks den Reiter „Struktur“, dann den Baustein und „Bearbeiten“, wie `editor-check.mjs`. Der Editor selbst war richtig.
+- **Echter Fehler, dabei gefunden:** Der Kopfbereich in `var/kantit.db` (und damit vermutlich auf kant-it.de) trägt die Hamburger-Umschaltung (`collapse`) bei Schema v19, erlaubt ist sie erst ab v22. Die Website zeigt ihn, aber der Editor bekam für die Vorschau „Unbekannte Hamburger-Umschaltung oder Dokumentschema vor v22“, und Speichern wäre ebenso abgelehnt worden: Der Bereich war nicht bearbeitbar. Jetzt hebt `repairSchema()` (editor-model.js) ein geladenes Dokument auf die Fassung, die seine Bausteine und Eigenschaften verlangen. Das ist dieselbe Hebung, die der Editor beim Einstellen ohnehin macht. Die Umstellung auf formatierten Text (v12/v17) kommt nie von selbst, weil sie die Bedeutung ändert. Beim nächsten Speichern ist das Dokument korrigiert. Alle anderen lokalen Installationen hatten keine solchen Dokumente (geprüft mit dem Validator über alle Seiten und Bereiche).
+- **Weitere veraltete Stellen in `test:admin`:** Der Knopf „Bewegung testen“ heißt seit 1.11 „Bewegung in der Vorschau abspielen“ (`#preview-motion`), auch ein Hilfetext im Editor nannte noch den alten Namen. Der Slider-Teil erwartete, dass „Bewegung reduzieren“ die Automatik anhält. Seit 1.11 gilt das nur mit „Systemvorgabe beachten“. Der Check prüft jetzt das Verhalten, das die Einstellung der Website verspricht.
+
+**Geprüft:** `test:admin` (vollständig, auch der öffentliche Teil), `test:buttons`, `test:navigation-ux` und `test:editor` grün. Neuer Einheitstest für `repairSchema` in `tests/editor-model.test.mjs`.
+
+## Fassung 1.22.4: Ziehknopf im Menü neben der Zusammenfassung (22.09.2026)
+
+**Anlass:** Umut: „ja räum das auf und Release 1.22.4“ – die bekannte axe-Meldung `nested-interactive` im Menü-Editor.
+
+- Der Ziehknopf eines Menüeintrags stand in der `<summary>`, also ein Knopf in einem Knopf. Screenreader lesen so etwas unzuverlässig vor, und die Tastatur erreicht es nicht sauber. Jetzt steht er als Geschwister vor `<details>`, per CSS über die linke Ecke der Zusammenfassung gelegt (`menu-entry.html.twig`, `createRow` in `menu-editor.js`). Aussehen und Bedienung bleiben gleich: Ziehen mit Maus, Stift und Finger, Pfeiltasten auf dem Knopf.
+- Der Hinweis zu fehlenden Sprungzielen im Menü und die Hilfe zum Feld „Sprungziel“ im Editor nennen jetzt die richtige Stelle (Sektion, Zeile oder Spalte) und den Weg über die Auswahl im Menü.
+- `test:admin`: Die Fehlermeldung nach einem abgewiesenen Speichern wurde direkt nach der Serverantwort abgefragt, sie erscheint aber erst, nachdem die Antwort gelesen ist. Jetzt wartet der Test auf sie. Der Check scheitert weiterhin an der älteren Stelle beim Klick in den Strukturbaum des Editors.
+
+**Geprüft:** Die Editor-Prüfung prüft die ganze Menüseite mit axe, ohne Ausnahme. Sie stellt sicher, dass in keiner Zusammenfassung ein Knopf steht, und verschiebt einen Eintrag per Pfeiltaste (Fokus bleibt auf dem Knopf). Bildschirmfoto `reports/editor/menu-editor.png` angesehen.
+
+## Fassung 1.22.3: die übrigen abgetippten Adressen (22.09.2026)
+
+**Anlass:** Umut: „die offenen Punkte auch umsetzen und Release 1.22.3“ – die drei Reste aus 1.22.2.
+
+- **Sprungziel im Menü:** Eine Auswahl aus den Ankern der verknüpften Seite, beschriftet mit der ersten Überschrift des Bausteins, etwa „So erreichen Sie uns (#kontakt)“. Die Liste liefert `GET /admin/api/sprungziele/{id}` (Rolle wie die Menüs). Wechselt die Seite, lädt die Liste neu. Ein gespeicherter Anker, den es nicht mehr gibt, bleibt als „(auf der Seite nicht gefunden)“ sichtbar. Ohne Skript bleibt das Textfeld.
+- **Linkfelder in der Plugin-Verwaltung und die Adresse eines eigenen Menülinks:** Das Textfeld bleibt, weil eine fremde Adresse getippt wird. Daneben stehen „Seite wählen“ und „PDF wählen“ (`link-field.js`, Markup `data-link-field`/`data-link-input`).
+- **Kategorien und Schlagwörter eines Beitrags:** Die vorhandenen Namen stehen als Knöpfe unter dem Feld. Ein Klick nimmt einen Namen auf oder heraus (`term-chips.js`), neue Namen tippt man weiter ein. So entstehen nicht „Projekt“ und „Projekte“ nebeneinander.
+
+**Bekannt, nicht neu:** axe meldet im Menü-Editor `nested-interactive`, weil der Ziehknopf in der Zusammenfassung jedes Eintrags steckt. Die Editor-Prüfung prüft dort nur die neuen Felder.
+
+**Geprüft:** neue Tests `EditorSecurityTest::testMenuAnchorsAndPostTermsAreOfferedForChoosing` und `…testPluginSettingsForLinksAndImagesAreChosenNotTyped`. Die Editor-Prüfung wählt im Menü eine Seite als eigenen Link, prüft die Sprungziel-Auswahl eines neuen Seitenlinks, legt einen Beitrag mit Kategorie an und nimmt die Kategorie per Klick auf und wieder heraus (jeweils mit axe).
+
+## Fassung 1.22.2: Auswahl statt abgetippter Kennungen und Adressen (22.09.2026)
+
+**Anlass:** Umut zu den Beitragseinstellungen: „nicht dein ernst? ID aus Mediathek? schöne auswahl rein! auch bei Beitragsbild“, dann: „Andere bereiche prüfen ob es sowas noch gibt!“
+
+Die ganze Verwaltung und der Editor wurden nach Feldern durchsucht, in die man eine Kennung, eine Adresse oder einen technischen Namen tippen musste, der auf etwas anderes zeigt. Umgebaut:
+
+- **Vorschaubild beim Teilen und Beitragsbild** (Seiten und Beiträge → Einstellungen): Bildfeld mit Vorschau, „Bild wählen oder hochladen“ im Mediathek-Dialog, „Entfernen“ (`admin/media-field.html.twig`, `media-field.js`, Twig-Funktion `kant_media`). Die Kennung steht nur noch im versteckten Feld.
+- **Plugin-Einstellungen der Art Bild:** dasselbe Bildfeld statt „Kennung aus der Mediathek“.
+- **Editor, Formular-Baustein, Sektions-Baustein, Beitragsliste (Kategorie, Schlagwort):** Auswahllisten statt Adressen. Die Listen kommen mit `/api/design` (`choices`). Eine gespeicherte Adresse, die es nicht mehr gibt, bleibt als „(nicht mehr vorhanden)“ sichtbar.
+- **Linkziele im Editor** (Button, Bild, Symbolkarte, CTA, Symbol, Link-Felder von Plugins) und **Links im Textbaustein:** „Seite wählen“ mit Seitensuche (`openPageDialog` in `page-picker.js`) neben „PDF aus Mediathek wählen“. Freie Adressen bleiben möglich. Der Schalter „In neuem Tab öffnen“ erscheint bei Plugin-Feldern nicht mehr, deren Schema kennt ihn nicht.
+- **Weiterleitungen, neue Adresse:** Seitensuche. Ein anderer Pfad (etwa `kategorie/projekte`) lässt sich weiter eintippen (`data-free` im Seitenwähler).
+- **Formular-Editor:** „Antwortadresse aus Feld“ wählt aus den E-Mail-Feldern, „Nur zeigen, wenn“ aus den Auswahlfeldern weiter oben, mit Kästchen für die Antworten. „Bild je Option“ öffnet den Mediathek-Dialog mit Vorschau statt einer Aufklappliste. Ohne Skript bleiben die Textfelder, die gespeichert werden.
+
+**Bewusst getippt bleibt:** was an der Stelle erst entsteht (Adresse einer neuen Seite, eines Formulars, einer Sektion, Farb- und Schriftschlüssel, technischer Feldname, Anker), die alte Adresse einer Weiterleitung, Einbettungsadressen, Schlüssel für Turnstile. Noch offen: Link-Einstellungen von Plugins in der Plugin-Verwaltung (Textfeld), Sprungziel im Menü, Vorschläge vorhandener Kategorien und Schlagwörter in den Beitragseinstellungen.
+
+**Geprüft:** neue Tests `EditorSecurityTest::testImageSettingsOfAPostArePickedFromTheLibraryNotTypedAsAnId` und `…testTheEditorPicksFormsSectionsAndTermsFromListsInsteadOfTypedAddresses`. Die Editor-Prüfung (`npm run test:editor`) wählt jetzt im Browser ein Vorschaubild und speichert es. Sie wählt eine Seite als Linkziel (mit axe) und prüft, dass Formular, Kategorie und Schlagwort Auswahlfelder sind. Im Formular-Editor wählt sie Bedingung, Antwortadresse und ein Optionsbild, legt das Formular an und liest es wieder (mit axe).
+
+## Fassung 1.22.1: vergrößerbare Galerie mit einem Haken (22.09.2026)
+
+**Anlass:** Umut: „Bei Klick vergrößern bei Galerie muss man da alles einzeln machen? kann man bei Galerie das mit einem Klick für alle elemente machen?“
+
+- 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).
@@ -1071,7 +1142,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

@@ -898,8 +898,14 @@ details.card > summary:hover { background: #fafbf8 }
 .field-card-condition .field-help { grid-column: 1 / -1 }
 .field-card-images { grid-column: 1 / -1 }
 .field-image-pickers { display: grid; gap: 6px; margin-top: 6px }
-.field-image-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center; font-size: 13px }
-.field-image-picker select { margin: 0 }
+.field-image-picker { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13px }
+.field-image-picker-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #eef1eb }
+.field-image-picker-thumb[hidden] { display: block; visibility: hidden }
+.field-image-picker-name { color: var(--muted); overflow-wrap: anywhere; min-width: 0 }
+@media (max-width: 767px) { .field-image-picker { grid-template-columns: 64px minmax(0, 1fr); } .field-image-picker-option { grid-column: 1 / -1; font-weight: 650 } }
+.field-condition-picker { display: grid; gap: 6px; grid-column: 1 / -1 }
+.field-condition-values { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px }
+.field-condition-values legend { font-size: 13px; font-weight: 650; margin-bottom: 4px; padding: 0 }
 .form-preview-empty { margin: 0; font-size: 13px }
 .form-preview + .contrast-note { margin-top: 10px }
 .form-preview .cms-button { justify-self: start; pointer-events: none }
@@ -975,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-model.js

@@ -152,6 +152,35 @@ export function createBlock(type) {
   return block;
 }
 
+/**
+ * Hebt ein geladenes Dokument auf die Fassung, die seine Bausteine und Eigenschaften verlangen.
+ *
+ * Normalerweise tut das der Editor in dem Moment, in dem jemand etwas einstellt. Ein Dokument,
+ * das ein Skript geschrieben hat, kann aber eine Eigenschaft tragen, die seine Fassung noch nicht
+ * kennt - der Kopfbereich von kant-it.de hatte die Hamburger-Umschaltung bei Fassung 19. Die
+ * Website zeigt so etwas, der Server lehnt Vorschau und Speichern aber ab, und der Bereich war im
+ * Editor nicht mehr zu bearbeiten. Nur Fassungen, die etwas hinzufügen, werden hier gehoben; die
+ * Umstellung auf formatierten Text (12, 17) ändert die Bedeutung und bleibt eine bewusste Wahl.
+ */
+export function repairSchema(document) {
+  const walk = blocks => {
+    for (const block of blocks || []) {
+      upgradeForType(document, block.type);
+      const props = block.props || {};
+      if ('caption' in props) upgradeDocument(document, 3);
+      if ('click' in props || 'lightbox' in props) upgradeDocument(document, 19);
+      if ('newTab' in props) upgradeDocument(document, 20);
+      if (Object.values(block.style || {}).some(values => values?.backgroundImage === 'none')) upgradeDocument(document, 20);
+      if (block.anchor) upgradeDocument(document, 21);
+      if ('collapse' in props) upgradeDocument(document, 22);
+      if ('faq' in props) upgradeDocument(document, 23);
+      walk(block.children);
+    }
+  };
+  walk(document.blocks);
+  return document;
+}
+
 /** Raises the document schema to the version that knows this block type. */
 export function upgradeForType(document, type) {
   if (type === 'gallery') upgradeDocument(document, 3);

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';
@@ -8,7 +9,7 @@ import { preview, rowPreview } from './library-previews.js';
 import { decorateContainers } from './preview-containers.js';
 import { initMotion } from './motion.js';
 import { initSliders } from './slider.js';
-import { VISIBILITY, setVisibility, registerPlugins, pluginDefinition, PLUGIN_PRESETS } from './editor-model.js';
+import { VISIBILITY, setVisibility, registerPlugins, pluginDefinition, PLUGIN_PRESETS, repairSchema } from './editor-model.js';
 
 // Mirrors DocumentValidator::ICONS; the server rejects anything outside this list.
 const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check', 'people', 'music', 'home'];
@@ -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);
@@ -736,7 +768,7 @@ function renderLegacyEffects(block, panel) {
     select.addEventListener('change', () => { history.change(doc => setEffect(doc, selected, key, select.value)); controls(); schedulePreview(); });
     panel.append(labelEl, select);
   }
-  const note = document.createElement('p'); note.className = 'field-help'; note.textContent = 'Einblendungen starten, sobald das Element im Bildschirm erscheint. Mit „Bewegung testen“ lässt sich das in der Vorschau prüfen. Die Einstellung „Bewegung reduzieren“ wird berücksichtigt.'; panel.append(note);
+  const note = document.createElement('p'); note.className = 'field-help'; note.textContent = 'Einblendungen starten, sobald das Element im Bildschirm erscheint. Mit dem Abspielknopf über der Vorschau lässt sich das prüfen. Die Einstellung „Bewegung reduzieren“ wird berücksichtigt.'; panel.append(note);
 }
 
 /**
@@ -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' });
   }
 }
 
@@ -1064,7 +1096,9 @@ async function load() {
       designTokens = await response.json();
     }
     if (!designSchema) await loadDesignSchema();
-    history = new EditorHistory(data.document);
+    // Ein Dokument mit Eigenschaften einer neueren Fassung wird beim Laden gehoben, sonst lehnt
+    // der Server schon die Vorschau ab (siehe repairSchema).
+    history = new EditorHistory(repairSchema(data.document));
     ({ version, revisionId, publishedRevisionId, csrfToken } = data);
     // Die Bausteine der eingeschalteten Plugins kommen mit dem Dokument; der Werkzeugkasten
     // bekommt dafür eine eigene Gruppe.

public/assets/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

@@ -28,3 +28,17 @@
 .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

@@ -140,4 +140,70 @@ export function openMedia({ multiple = false, onChoose, needsAlt = 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

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

public/assets/rich-text.js

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

public/assets/site.css

@@ -557,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

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

scripts/button-check.mjs

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

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

scripts/navigation-ux-check.mjs

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

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/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,6 +2,7 @@
 
 namespace App\Controller;
 
+use App\Content\DocumentLibrary;
 use App\Content\MediaLibrary;
 use App\Content\SiteSettings;
 use App\Domain\StaleWrite;
@@ -10,12 +11,13 @@ 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, private SiteSettings $siteSettings)
+    public function __construct(private MediaLibrary $media, private CsrfTokenManagerInterface $csrf, private SiteSettings $siteSettings, private DocumentLibrary $documents)
     {
     }
 
@@ -27,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),
@@ -53,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'])]
@@ -91,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
     {
@@ -112,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
     {
@@ -240,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

@@ -130,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.
@@ -198,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',
@@ -228,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';
@@ -238,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);
     }
 
     /**
@@ -252,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) {
@@ -280,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;

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

templates/admin/content-results.html.twig

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

templates/admin/forms.html.twig

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

templates/admin/media-field.html.twig

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

templates/admin/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

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

templates/blocks/block.html.twig

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

@@ -62,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.

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/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);
         }

tests/editor-model.test.mjs

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