Release 1.22.5

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

VERSION

@@ -1 +1 @@
-1.22.0
+1.22.5

docs/STATUS.md

@@ -1,5 +1,64 @@
 # 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“.

public/assets/admin.css

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

public/assets/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, 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,13 +331,19 @@ function renderContent(block, panel) {
     input.addEventListener('blur', () => { history.mergeKey = null; });
     if (options.checkbox) container.append(labelEl); else container.append(labelEl, input);
     if (options.help) { const help = document.createElement('p'); help.className = 'field-help'; help.id = `${id}-help`; help.textContent = options.help; input.setAttribute('aria-describedby', help.id); container.append(help); }
-    if (key === 'href') {
+    if (key === 'href' || options.link) {
       // Ein PDF ist ein Linkziel wie jedes andere: seine Adresse steht danach im Feld. Ohne neuen
       // Tab zeigt die Website es im Betrachter über der Seite.
+      // Eine eigene Seite sucht man, statt ihren Pfad zu kennen.
+      const choose = value => { input.value = value; applyValue(); history.mergeKey = null; };
+      const pages = document.createElement('button'); pages.type = 'button'; pages.className = 'secondary href-document'; pages.textContent = 'Seite wählen';
+      pages.addEventListener('click', () => openPageDialog({ onChoose: item => choose(item.path === 'home' ? '/' : `/${item.path}`) }));
       const pdf = document.createElement('button'); pdf.type = 'button'; pdf.className = 'secondary href-document'; pdf.textContent = 'PDF aus Mediathek wählen';
-      pdf.addEventListener('click', () => openDocuments({ onChoose: item => { input.value = item.src; applyValue(); history.mergeKey = null; } }));
-      container.append(pdf);
-      field('In neuem Tab öffnen', 'newTab', block.props.newTab === true, { checkbox: true, container });
+      pdf.addEventListener('click', () => openDocuments({ onChoose: item => choose(item.src) }));
+      const row = document.createElement('div'); row.className = 'href-pickers'; row.append(pages, pdf);
+      container.append(row);
+      // Den Schalter kennen nur die Linkbausteine des Kerns; ein Plugin legt seine Felder selbst fest.
+      if (key === 'href' && !options.plugin) field('In neuem Tab öffnen', 'newTab', block.props.newTab === true, { checkbox: true, container });
     }
   };
   if (!block) {
@@ -346,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.
@@ -410,7 +432,7 @@ 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".
@@ -490,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.' });
@@ -508,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.' });
@@ -526,8 +548,8 @@ 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 });
@@ -541,7 +563,10 @@ function renderContent(block, panel) {
     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 – oder ein PDF. Für ein Logo im Kopfbereich meist /.' });
     showLinkOptions(clickAction); panel.append(linkOptions);
@@ -558,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);
@@ -743,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);
 }
 
 /**
@@ -771,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' });
   }
 }
 
@@ -1071,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/link-field.js

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

public/assets/media-dialog.css

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

public/assets/media-field.js

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

public/assets/menu-editor.js

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

public/assets/page-picker.js

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

public/assets/rich-text.js

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

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

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

scripts/navigation-ux-check.mjs

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

src/Controller/EditorController.php

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

src/Controller/MenuController.php

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

src/Twig/PluginExtension.php

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

templates/admin/content-picker.html.twig

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

templates/admin/content-results.html.twig

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

templates/admin/forms.html.twig

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

templates/admin/media-field.html.twig

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

templates/admin/menu-entry.html.twig

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

templates/admin/menus.html.twig

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

templates/admin/pages.html.twig

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

templates/admin/plugins.html.twig

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

templates/admin/settings.html.twig

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

templates/blocks/block.html.twig

@@ -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:

tests/CmsTest.php

@@ -1154,6 +1154,36 @@ 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

tests/EditorSecurityTest.php

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

tests/editor-model.test.mjs

@@ -642,3 +642,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);
+});