Release 1.22.1

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

.claude/launch.json

@@ -18,6 +18,116 @@
         "bin/dev-router.php"
       ],
       "port": 8080
+    },
+    {
+      "name": "kantsites-pilot",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/browser-tests/pilot-a1c96276da5c/pilot.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantit-media'; & C:/php84/php.exe -d upload_max_filesize=24M -d post_max_size=26M -d memory_limit=256M -S 127.0.0.1:8092 -t public bin/dev-router.php"
+      ],
+      "port": 8092
+    },
+    {
+      "name": "elektro-bernhard",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/elektro-bernhard.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/elektro-bernhard-media'; $env:SITE_ORIGIN='http://127.0.0.1:8088'; & php -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8088 -t public bin/dev-router.php"
+      ],
+      "port": 8088
+    },
+    {
+      "name": "tagespflege-moldovan",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/tagespflege-moldovan.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/tagespflege-moldovan-media'; $env:SITE_ORIGIN='http://127.0.0.1:8089'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8089 -t public bin/dev-router.php"
+      ],
+      "port": 8089
+    },
+    {
+      "name": "kantit",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/kantit.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantit-media'; $env:SITE_ORIGIN='http://127.0.0.1:8130'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8130 -t public bin/dev-router.php"
+      ],
+      "port": 8130
+    },
+    {
+      "name": "maler-drews",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/maler-drews.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/maler-drews-media'; $env:SITE_ORIGIN='http://127.0.0.1:8093'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8093 -t public bin/dev-router.php"
+      ],
+      "port": 8093
+    },
+    {
+      "name": "immobilien-deeg",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/immobilien-deeg.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/immobilien-deeg-media'; $env:SITE_ORIGIN='http://127.0.0.1:8094'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8094 -t public bin/dev-router.php"
+      ],
+      "port": 8094
+    },
+    {
+      "name": "ebsolar",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/ebsolar.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/ebsolar-media'; $env:SITE_ORIGIN='http://127.0.0.1:8096'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8096 -t public bin/dev-router.php"
+      ],
+      "port": 8096
+    },
+    {
+      "name": "ebsolar-prod",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/ebsolar.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/ebsolar-media'; $env:SITE_ORIGIN='http://127.0.0.1:8097'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8097 -t public bin/dev-router.php"
+      ],
+      "port": 8097
+    },
+    {
+      "name": "immobilien-deeg-prod",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/immobilien-deeg.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/immobilien-deeg-media'; $env:SITE_ORIGIN='http://127.0.0.1:8095'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8095 -t public bin/dev-router.php"
+      ],
+      "port": 8095
+    },
+    {
+      "name": "kantarci-immobilien",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/kantarci-immobilien.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantarci-immobilien-media'; $env:SITE_ORIGIN='http://127.0.0.1:8098'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8098 -t public bin/dev-router.php"
+      ],
+      "port": 8098
+    },
+    {
+      "name": "kantarci-immobilien-prod",
+      "runtimeExecutable": "powershell",
+      "runtimeArgs": [
+        "-NoProfile",
+        "-Command",
+        "$env:APP_ENV='prod'; $env:APP_DEBUG='0'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/kantarci-immobilien.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantarci-immobilien-media'; $env:SITE_ORIGIN='http://127.0.0.1:8099'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8099 -t public bin/dev-router.php"
+      ],
+      "port": 8099
     }
   ]
 }

.env

@@ -1,6 +0,0 @@
-APP_ENV=dev
-APP_DEBUG=1
-DATABASE_URL="sqlite:///%kernel.project_dir%/var/cms.db"
-SITE_ORIGIN=http://127.0.0.1:8080
-MEDIA_DIRECTORY="%kernel.project_dir%/var/media"
-MAILER_DSN=sendmail://default

.env.example

@@ -0,0 +1,17 @@
+# Vorlage: Der Installer erstellt daraus die Konfiguration .env.
+# .env gehört der Installation und wird bei Updates erhalten, nicht in Git gespeichert.
+# Installer, Setup und Admin-Pfad-Befehl schreiben ausschließlich in .env.
+# Ältere .env.local-Einstellungen werden einmalig mit Sicherung zusammengeführt.
+APP_ENV=prod
+APP_DEBUG=0
+DATABASE_URL="sqlite:///%kernel.project_dir%/var/cms.db"
+# Für MySQL stattdessen, mit den Zugangsdaten des Hostings:
+# DATABASE_URL="mysql://benutzer:passwort@127.0.0.1:3306/datenbank?charset=utf8mb4"
+# Die oeffentliche Adresse der Website, mit oder ohne www - so, wie sie in Sitemap, Feed und
+# Canonical stehen soll. Die andere Schreibweise leitet die Anwendung dorthin um.
+SITE_ORIGIN=https://example.de
+MEDIA_DIRECTORY="%kernel.project_dir%/var/media"
+MAILER_DSN=sendmail://default
+# Die Adresse der Verwaltung. Ohne Eintrag: /admin. Aenderbar mit
+# `php bin/console cms:admin:path <neu>` - der Befehl schreibt sie nach .env.
+#ADMIN_PATH=admin

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
       - run: php vendor/bin/doctrine-migrations migrate --no-interaction
       - run: php bin/console cms:seed-demo
       - run: php bin/console cms:seed-demo
-      - run: php bin/console lint:twig templates && php bin/console lint:yaml config && php bin/console lint:container
+      - run: php bin/console lint:twig templates && php bin/console lint:yaml config --parse-tags && php bin/console lint:container
       - run: composer build
   browser:
     runs-on: ubuntu-latest
@@ -83,3 +83,8 @@ jobs:
       - run: php vendor/bin/doctrine-migrations migrate --no-interaction
       - run: php bin/console cms:seed-demo
       - run: php bin/console cms:seed-demo
+      # Vorher hoerte der Job hier auf und sagte nichts ueber Sicherung und Betrieb auf MySQL.
+      - run: php bin/console cms:health
+      - run: php bin/console cms:backup --keep=2
+      - run: php bin/console cms:backup --list
+      - run: php vendor/bin/phpunit

.gitignore

@@ -3,9 +3,18 @@
 /var/
 /node_modules/
 /.env.local
+/.env
+/.env.lock
+/.env.*.tmp
 /.env.*.local
 /phpunit.cache/
 /reports/
 /.php-cs-fixer.cache
 *.log
 /config/reference.php
+/var/releases/
+
+# Die Schriften der Pilotwebsite liegen im Repository (siehe public/assets/fonts/LIZENZ.md),
+# damit auf einem frischen Server nichts fehlt und nichts von Google geladen wird. Andere
+# Installationen holen ihre eigenen mit `cms:fonts:fetch` - deren Dateien gehoeren nicht hierher.
+/public/assets/build/

README.md

@@ -1,9 +1,171 @@
 # KantSites
 
-Lokaler CMS-Prototyp für PHP-Webhosting mit erstem visuellen Editor. Symfony 7.4, Twig, Doctrine DBAL/Migrations; SQLite lokal, MySQL/MariaDB als Hostingziel. Drei gespeicherte Beispielseiten werden ohne JavaScript als HTML ausgeliefert. Anmeldung, geschützte Bearbeitung und getrennte Veröffentlichung sind implementiert; weitere Layoutwerkzeuge folgen.
+Selbst betreibbares Block-CMS für PHP-Webhosting mit visuellem Editor nach dem Bedienprinzip des Flatsome UX Builders. Symfony 7.4, Twig, Doctrine DBAL/Migrations; SQLite oder MySQL/MariaDB. Öffentliche Seiten kommen als fertiges HTML ohne Pflicht-JavaScript, mit Sitemap, Feed, strukturierten Daten und `llms.txt`. Webinstaller, Releasearchive mit Update aus der Verwaltung, Sicherung, Aufgabenplan, Formulare, Statistik und Einwilligung sind eingebaut. Fünf Websites laufen lokal als eigene Installationen (Kant-IT, Elektro Bernhard, Tagespflege Moldovan, Malerservice Drews, DEEG Immobilien), `web.kant-it.de` und das Drews-Hosting mit Releasearchiven.
 
 Die übernommenen Originaldokumente sind `AGENTS.md` und `ENTWICKLUNGSPLAN.md`. Den tatsächlichen Stand enthält `docs/STATUS.md`, Entscheidungen und Datenmodell stehen in `docs/ARCHITECTURE.md`.
 
+## Bildecken unter Design (ab 1.21.0)
+
+Wie stark die Ecken der Bilder gerundet sind, steht jetzt unter **Design → Bildecken** und gilt für die ganze Website – Bilder, Galerien, Logoleisten und Beitragslisten. Vorgabe ist `12px` wie bisher, `0px` macht sie eckig. Ein einzelnes Bild lässt sich davon abweichend einstellen: im Editor beim ausgewählten Bild unter **Design → Bild → Bildecken**, dort auch je Gerät und je Ecke. Vorher stand die Rundung fest im Stylesheet und war in keinem Feld zu finden.
+
+## Kaufmännisches Und und Zeilenumbrüche bleiben, wie sie sind (ab 1.20.1)
+
+**Behoben.** Ein Text ohne Auszeichnung wurde beim Speichern doppelt kodiert: aus `&` wurde `&amp;`, beim nächsten Speichern `&amp;amp;` – irgendwann stand die Entity sichtbar auf der Seite. Ebenso wuchsen Zeilenumbrüche: jedes zweite Speichern machte aus einem `<br>` zwei. Beides ist behoben, und wiederholtes Speichern ändert einen Text jetzt nicht mehr. Was bereits falsch gespeichert ist, räumt `php bin/console cms:repair:entities` auf: ohne Option zeigt er nur, was sich ändern würde, mit `--schreiben` wendet er es an. Angefasst werden die veröffentlichte Fassung und der Entwurf jeder Seite sowie die Bereiche; ältere Fassungen bleiben Historie.
+
+## Eigenes HTML und eingebettete Seiten (ab 1.20.0)
+
+Der Baustein **Eigenes HTML** (Werkzeugkasten, Gruppe „Seite und Daten“) nimmt Markup auf, das unverändert auf der Seite landet – eigene Tabellen, fremde Widgets, Auszeichnungen, die es als Baustein nicht gibt. Ändern darf ihn nur ein **Administrator**, genau wie das Feld „Eigenes Skript“; für alle anderen ist er sichtbar und schreibgeschützt, und der Server weist eine Änderung ohnehin ab. Zwei Tags nimmt er nicht an: `<script>` gehört unter „Erweitert“ in „Eigenes Skript“, und ein `<iframe>` in den Baustein **Externer Inhalt** – nur der fragt vorher um Einwilligung und trägt den Anbieter in die Sicherheitsrichtlinie ein (ADR 106).
+
+Am eingebetteten Rahmen lässt sich alles gestalten, was dieser Website gehört: Höhe als Eigenschaft, Abstände, Breite, Rand und Ecken über Design-Tokens und freie Stile, dazu eigenes CSS am Block (`& iframe{…}`) und für den Platzhalter vor der Einwilligung (`&.embed-blocked`, `& .embed-title`, `& .consent-button`). **Was im Rahmen steht, gehört dem Anbieter** – daran kommt kein CSS dieser Website heran, das trennt der Browser zwischen zwei Herkünften. Den Einwilligungsbalken selbst gestaltet man unter **Einstellungen** (Form und vier Farben).
+
+## Adresse mit oder ohne www, Rollen wie versprochen, Gesamtprüfung (ab 1.17.0)
+
+**Eine Adresse.** `SITE_ORIGIN` in `.env` entscheidet, ob die Website mit oder ohne `www` heißt; die andere Schreibweise leitet die Anwendung selbst mit 301 dorthin um (auch die Verwaltung), ein fremder Host bleibt erreichbar. `php bin/console cms:site:origin https://www.meine-firma.de` prüft und schreibt die Einstellung, der Bildschirm „System“ zeigt sie und warnt, wenn die Verwaltung gerade unter einer anderen Adresse läuft. Der www-Block in `public/.htaccess` ist weg.
+
+**Rollen.** Redakteure bearbeiten Entwürfe, laden Medien hoch und sehen die Statistik. Veröffentlicher dürfen zusätzlich veröffentlichen, Bereiche, Menüs, Formulare, Weiterleitungen und die 404-Seite pflegen. Administratoren allein ändern Design, Unternehmensdaten (samt Einwilligung und Spamschutz), Benutzer, System und eigene Skripte. Vorher genügte für Design, Einstellungen, Menüs, Bereiche und Formulare die Rolle Redakteur – entgegen der Rollenhilfe. Die Navigation zeigt nur, was die Rolle öffnen darf.
+
+**Behoben.** Nach `cms:admin:path` war keine Anmeldung möglich (Sitzungscookie blieb auf `/admin`). Der Installer öffnete sich wieder, sobald die Datenbank nicht antwortete. Ein MySQL-Passwort mit Sonderzeichen ließ den Container abbrechen (`resolve:`), ebenso ein SMTP-Passwort. Die Einwilligung nahm Entscheidungen von fremden Websites an und leitete auf `/\fremd.example` weiter. `</script>` in Titel oder FAQ zerriss die strukturierten Daten. Eigenes CSS konnte mit einem Komma den Block verlassen. Eine alte Fassung konnte ein Skript an der Administratorregel vorbei zurückholen. Im Editor ließen sich Menü, Beitragsliste und Slider in älteren Dokumenten nicht speichern (Schemafassung), „Gestaltung einfügen“ und „Als Vorlage speichern“ waren fälschlich aktiv, „Ausrücken“ und Baum-Drop umgingen die Elternregeln, ein Bild auf ein Akkordeon warf einen Fehler, abgelehnte Einfügungen hinterließen leere Verlaufsschritte. Dazu: Schatten bei Überfahren/Scrollen, Tabs und Bildbetrachter in Kopf, Fuß und Sektionen, Sitemap-`lastmod`, Feed-Zeitzone, Vollbild in eingebetteten Videos, Update-Downloads nur über HTTPS-Weiterleitungen, Composer- und PHP-Aufruf aus dem Web-Update unter php-fpm, unerwartete Fehler im Updater nehmen den Rückweg, eine geplante Veröffentlichung blockiert die anderen nicht mehr, keine Unterseite unter einer Seite im Papierkorb.
+
+## Spaltenbreiten einer Zeile durch Ziehen (ab 1.16.0)
+
+Wähle eine Zeile oder eine ihrer Spalten: auf jeder Grenze zwischen zwei Spalten liegt ein Griff. Ziehen macht die eine Spalte breiter und die andere schmaler, Loslassen ist ein Schritt für „Rückgängig“; die Pfeiltasten verschieben um fünf Prozentpunkte. Der Wert steht auch im Design-Bedienfeld der Zeile unter **Layout → Spaltenbreiten**, etwa `2 1` oder `25 50 25`, und gilt je Gerät. Wo die Spalten gestapelt sind, etwa auf dem Handy, gibt es keinen Griff und die Spalten bleiben untereinander.
+
+## Rückstände der Gesamtprüfung (unveröffentlicht)
+
+Archivseiten (`/beitraege`, Kategorien, Schlagwörter) sind jetzt gewöhnliche Seiten mit Kopf, Fuß, Sektionen, eigenem CSS und Nach-oben-Knopf; blätternde Beitragslisten tragen Canonical mit Seitenzahl und `rel=prev/next`. Formulare, Beitragslisten und Brotkrumen funktionieren auch in Kopf, Fuß und verknüpften Sektionen, eigene Skripte von Bereichen laufen. Eine zweimal verknüpfte Sektion bekommt beim zweiten Mal eigene Kennungen. Tablet und Telefon trennen sich überall bei 767 px. Dunkle Paletten färben Formularfelder, Fehlermeldungen, Skip-Link und Aufruf-Buttons mit; es gibt Druckstile. **Betrieb:** Sicherung, Wiederherstellung, Archiv-Update und Rückweg laufen auch auf MySQL/MariaDB (`mysqldump` und `mysql` müssen aufrufbar sein), Updates sperren sich gegenseitig (`var/update.lock`), das Archiv wird direkt in eine Datei geladen, `public/.htaccess` behält beim Archiv-Update eingeschaltete HTTPS- und HSTS-Zeilen, und nach dem Update werden `var/update/` (bis auf zwei) und alte Caches aufgeräumt. Der Editor zeigt in der Vorschau eigenes CSS, Bereichsstile und Formulare; frisch eingefügte Kontaktdaten, Formulare, verknüpfte Sektionen und externe Inhalte sind gültig, bis man sie füllt.
+
+## Plugins (unveröffentlicht)
+
+Erweiterungen liegen als Ordner unter `plugins/` mit einer `plugin.json`, Twig-Vorlagen und optional Stylesheet und Skript unter `assets/`. Unter **Plugins** (Administrator) werden sie ein- und ausgeschaltet; ihre Bausteine erscheinen dann im Editor unter „Erweiterungen“, mit einem Eigenschaftenpanel aus dem Schema des Manifests. Der Kern prüft die Eigenschaften beim Speichern und beim Rendern, liefert Stylesheet und Skript nur auf Seiten mit dem Baustein aus und lässt die Bausteine eines ausgeschalteten Plugins unangetastet in den Seiten stehen. Ein Plugin kann außerdem Container-Bausteine (mit Liste erlaubter Kinder), Einstellungen für den Betreiber (Formular auf dem Bildschirm „Plugins“), eigene Adressen wie `/vergleich/daten` (Twig-Vorlage, Antwort als html, json, text oder xml), und Seitenvorlagen für den Editor mitbringen. Farben, Schriften und Buttons fasst ein Plugin nicht an – die ändert man unter **Design** (ADR 105). PHP-Code bringt ein Plugin nicht mit – deshalb gibt es keine Hooks und keine eigenen Tabellen (ADR 103). Mitgeliefert ist **Bildvergleich** (`plugins/vergleich`: Bildvergleich, Vergleichsgalerie, Vorlage, Adresse, Einstellungen). Wie man ein Plugin schreibt, steht in `docs/PLUGINS.md`. Migrationen `20260915000100` und `20260916000100` legen die Tabelle `plugin` mit Einstellungen an.
+
+## Formulare in Schritten, mit Bedingungen und Zusammenfassung (unveröffentlicht)
+
+Unter **Formulare** gibt es drei neue Feldtypen – **Zahl** (mit Unter-, Obergrenze und Einheit wie m²), **Auswahl (Optionsfelder)** und **Mehrfachauswahl** – und den Typ **Neuer Schritt**: seine Beschriftung ist der Titel des Abschnitts, sein Hilfetext die Einleitung, alle Felder bis zum nächsten Schritt gehören dazu. Jedes Feld und jeder Schritt kann von einer früheren Auswahl abhängen („Nur zeigen, wenn das Feld `immobilienart` einen dieser Werte hat: Wohnung, Haus“); der Server verlangt und speichert es dann nur, wenn die Bedingung zutrifft. Bei Optionsfeldern und Mehrfachauswahl lässt sich je Option ein **Bild aus der Mediathek** wählen; sobald eine Option eines hat, zeigt die Website die Auswahl als anklickbare Bildkarten statt als Kästchen. Unter Zustellung schaltet „Zusammenfassung vor dem Absenden zeigen“ einen letzten Schritt mit allen Angaben und „Ändern“ je Schritt ein. Auf der Website zeigt ein kleines Skript einen Schritt nach dem anderen mit Fortschritt, „Zurück“ und „Weiter“; ohne JavaScript steht das Formular als Ganzes mit Abschnitten auf der Seite. Das Skript kommt nur auf Seiten, deren Formular Schritte, Bedingungen oder die Zusammenfassung hat. Beispiel: der Preisfinder der DEEG-Website (`scripts/seed-immobilien-deeg.php`, Formular `bewertung`).
+
+## Eigene Absenderadresse je Formular (ab 1.15.1)
+
+Unter **Formulare → Zustellung** gibt es neben dem Empfänger ein Feld **Absender**. Bisher ging jede Nachricht von der Empfängeradresse an sich selbst; das scheitert, sobald der Empfänger ein Postfach bei einem anderen Anbieter ist, weil viele Hoster nur zustellen, was von einer Adresse der eigenen Domain kommt. Leer heißt weiterhin: Absender ist der Empfänger. Die Antwortadresse aus dem Formularfeld bleibt davon unberührt.
+
+## Formulare, Statistik, Design und Seitenleiste überarbeitet (ab 1.15.0)
+
+**Formulare** sind ein Editor: jedes Feld eine Karte mit Nummer, Beschriftung, Typ, technischem Namen, Hilfetext und Pflicht-Schalter, dazu „Feld hinzufügen“ und ein Entfernen-Knopf je Karte. Der technische Name folgt der Beschriftung, bis du ihn selbst schreibst. Unter **Aussehen** bekommt jedes Formular eine Buttonbeschriftung sowie Rahmen- und Hintergrundfarbe der Felder, Button- und Buttonschriftfarbe – aus der Palette oder als eigener Wert, leer heißt „wie die Website“. Die Vorschau daneben folgt jeder Eingabe, zeichnet den Absendeknopf mit dem Standardbutton des Designs und nennt den Kontrast der Buttonschrift.
+
+**Die Statistik** beginnt mit Kennzahlen: Aufrufe mit Vergleich zum gleich langen Zeitraum davor, Schnitt je Tag, stärkster Tag, aufgerufene Seiten, Aufrufe über Verweise, nicht gefundene Adressen. Der Verlauf hat Rasterlinien, jeder Balken nennt beim Überfahren Tag und Zahl, der stärkste Tag ist hervorgehoben; neu ist ein Wochentagsdiagramm im Schnitt. Die Ranglisten tragen Rang und Anteilsbalken.
+
+**Im Design** ist die Palette eine Reihe von Farbkarten, deren Fläche der Farbwähler selbst ist. Sieben fertige Paletten (Wald, Ozean, Sand, Koralle, Schiefer, Olive, Nacht) lassen sich per Klick übernehmen; eigene Farben bleiben stehen. Text-, Seiten- und Linkfarbe wählst du aus der Palette oder trägst einen eigenen Wert ein. Jede Schrift zeigt eine Probe in sich selbst, die Schnitte sind Chips, und eine Typografie-Vorschau zeigt Schrift, Größe, Zeilenhöhe, Skala, Farben und Unterstreichung live.
+
+**Die Seitenleiste** endet in einer Kontokarte mit Avatar, Name, Rolle und Abmeldesymbol, darunter die Fassung mit dem Update-Hinweis. Auf Tablets bleiben Konto und Abmelden rechts im Bild, nur die Liste wischt.
+
+## Fußzeile des Einwilligungshinweises (ab 1.14.2)
+
+„Einzeln wählen“ steht links, Datenschutz und Impressum rechts auf einer Linie; aufgeklappt nimmt die Einzelwahl die volle Breite, die Links rutschen rechtsbündig darunter.
+
+## Einwilligungshinweis gestalten, Nach-oben-Knopf auch bei offener Frage (ab 1.14.1)
+
+**Der Einwilligungshinweis lässt sich gestalten**, unter **Einstellungen → Einwilligung → Aussehen des Hinweises**: Anordnung (Karte unten in der Mitte, Leiste über die volle Breite, kleine Karte rechts unten), Form (abgerundet, rund, eckig – gilt für Fläche und Knöpfe zusammen), eigene Überschrift und vier Farben (Fläche, Schrift, Knopf „Alle akzeptieren“, Schrift auf dem Knopf), jeweils als `#hex` oder `@schlüssel` aus der Palette. Leer heißt Papier, Tinte und Akzent aus dem Design. Die Fläche trägt einen schmalen Streifen und ein Symbol in der Knopffarbe; „Nur notwendige“ bleibt ein gleich großer Rahmenknopf daneben. Dieselben Farben gelten auf `/einwilligung` und in den Beitragsarchiven.
+
+**Der Nach-oben-Knopf** war ausgeblendet, solange die Einwilligungsfrage offen stand – auf dem Telefon bleibt sie das oft, und der Knopf kam dort nie. Jetzt setzt er sich auf die Oberkante der Leiste, wo sie die Ecke abdeckt; Browser ohne Ankerpositionierung blenden ihn dort weiter aus. Der reservierte Abstand unten reicht auf schmalen Bildschirmen wieder für die ganze Leiste.
+
+**Im Designbereich** sind belegte Eigenschaften jetzt in Orange beschriftet, nicht nur mit Punkt und Fettdruck; die Gerätechips D/T/M stehen weiter auseinander, und der Fokusring bleibt in der Lücke.
+
+## Schriften vom eigenen Server, Hinweise auf jedem Bildschirm (ab 1.14.0)
+
+**Schriften kommen ausschließlich von deinem Server.** Die Ausgabe verlinkt kein Stylesheet mehr von `fonts.googleapis.com` – weder die öffentliche Seite noch die Editorvorschau, die es bisher bei jedem Aufruf tat. Fehlen die Dateien, zeigt die Website die eingestellte Ersatzschrift und sagt es dir. Geholt werden sie wie bisher einmalig unter **Design → Schriften ausliefern**. Zusätzlich wird jetzt **jeder** Schnitt des Designs vorab geladen: bisher waren es die ersten zwei je Familie, weshalb die Überschriften sichtbar von der Ersatzschrift auf die richtige Schrift sprangen.
+
+**Offene Hinweise stehen auf jedem Verwaltungsbildschirm**, mit dem Knopf daneben: „Fassung X ist verfügbar“ → *Jetzt aktualisieren*, „Schriftdateien fehlen“ → *Schriften holen*. Keiner der beiden fragt beim Öffnen im Netz nach.
+
+**System und Update** ist auf dem Telefon benutzbar: Die Seite lief seitlich aus dem Bild, die Sicherungstabelle wird zu gestapelten Blöcken, und die Texte sind knapper – das Kleingedruckte steht zugeklappt.
+
+**Im Designbereich** zeigen die Gerätechips **D/T/M** jetzt in Orange, welches Gerät einen eigenen Wert trägt; das gerade bearbeitete Gerät hat einen Rahmen statt des bisherigen roten Rings, der am Rand der Spalte abgeschnitten wurde.
+
+## Öffnungszeiten, Einsatzgebiet und FAQ in den strukturierten Daten (ab 1.14.0)
+
+Unter **Einstellungen → Unternehmensdaten** gibt es **Öffnungszeiten** (je Wochentag Öffnen und Schließen; leer heißt geschlossen) und das **Einsatzgebiet** (ein Ort je Zeile). Beides erscheint in den strukturierten Daten der Startseite (`openingHoursSpecification`, `areaServed`); gleiche Zeiten werden zu einer Angabe zusammengefasst. Der sichtbare Text auf der Website bleibt unabhängig davon.
+
+Ein Akkordeon wird per Kästchen **Als FAQ auszeichnen** zur `FAQPage`: die Titel sind die Fragen, die Textbausteine im Eintrag die Antwort. Einträge ohne Text erscheinen nicht. Das gilt nur für Akkordeons mit gesetztem Kästchen – ein Akkordeon mit Leistungen bleibt ein Akkordeon.
+
+## Mehr Symbole, Menü-Knopf gestalten, Nach-oben-Knopf zuverlässig (ab 1.13.0)
+
+Der Symbolsatz hat drei Zeichnungen mehr: **Menschen**, **Musik** und **Haus**. Sie stehen überall zur Wahl, wo es Symbole gibt – Symbolbaustein, Symbolkarte und Menüeinträge. Eine am Symbolbaustein eingestellte **Farbe** wirkt jetzt auch wirklich auf die Zeichnung; bisher blieb sie in der Akzentfarbe der Website stecken.
+
+Der **Menü-Knopf** (der aufklappbare „Menü“-Knopf auf Tablet und Telefon) lässt sich gestalten: Navigation auswählen → **Inhalt → Menü-Knopf** wählt zwischen *Symbol und Text*, *Nur Text* und *Nur Symbol*; „Nur Symbol“ behält den Namen für Vorlesesoftware. Unter **Design → Menü-Knopf** stehen Schriftfarbe, Fläche, Rahmenfarbe, Rahmenstärke, Ecken und Schriftgröße, je Gerät und mit Palettenfarben. Das aufgeklappte Menü legt sich im Kopfbereich als Fläche über die volle Breite unter den Kopf, statt die Kopfzeile auseinanderzuschieben.
+
+Der **Nach-oben-Knopf** erscheint wieder überall. Er blendete sich über eine Scroll-Animation ein; Browser, die diese Eigenschaft zwar kennen, aber nicht ausführen, ließen ihn dauerhaft unsichtbar. Jetzt entscheidet eine Klasse, die das kleine Scroll-Skript setzt – und ohne JavaScript bleibt der Knopf einfach sichtbar.
+
+## Soziale Profile (ab 1.12.0)
+
+Unter **Einstellungen → Unternehmensdaten → Soziale Profile** je Netzwerk eine Adresse eintragen (Facebook, Instagram, LinkedIn, YouTube, TikTok, X, Threads, Pinterest, Xing, WhatsApp, Google-Unternehmensprofil). Das Element **Soziale Profile** (Werkzeugkasten → Bausteine) zeigt sie dann an jeder Stelle – im Kopf- oder Fußbereich, in einer Kontaktsektion – und bestimmt dort Größe, Form (nur Symbol, runde oder eckige Fläche), Anordnung, Beschriftung und ob nur bestimmte Netzwerke erscheinen. Farbe, Abstand und Ausrichtung wie bei jedem Element unter **Design**. Eine Adresse ändern heißt: überall geändert. Die Profile stehen automatisch in den strukturierten Daten (`sameAs`). Ohne Eintrag zeigt das Element auf der Website nichts.
+
+## Slider-Steuerung auf dem Bild (ab 1.11.4)
+
+Die Steuerung liegt jetzt auf dem Slider, wie beim Hero-Slider von kant-it.de: runde weiße Pfeile links und rechts in der Mitte, Punkte unten rechts mit dem aktiven Punkt als Strich in der Akzentfarbe, ein kleiner Pause-Knopf daneben, kein Zähler mehr (der bleibt für Vorlesesoftware). Auf Bildschirmen bis 600 px verschwinden die Pfeile, gewischt wird mit dem Finger. Unter **Design → Slider-Steuerung** gibt es zusätzlich „Aktiver Punkt“.
+
+## Farben der Slider-Steuerung (ab 1.11.3)
+
+Slider auswählen → **Design → Slider-Steuerung**: Farbe der Punkte, Farbe von Pfeilen und Zähler sowie Hintergrund der Knöpfe, je Gerät und mit Palettenfarben. Ohne eigene Werte sind die Punkte halbtransparent weiß und die Pfeile weiß mit Akzentfarbe. Die Farben gelten auch für die skriptfreien Punkte, die der Browser selbst zeichnet.
+
+## Slider auf dem iPhone (ab 1.11.2)
+
+Safari bricht sanftes Weiterblättern in einem einrastenden Slider ab und springt zur vorigen Folie zurück; die Automatik und die Pfeile stotterten deshalb auf dem iPhone. Während der Fahrt ist das Einrasten jetzt ausgeschaltet und wird bei Ankunft auf der Folie wieder eingeschaltet. Die Punkte unter dem Slider sind echte Punkte, der aktive gefüllt, bei unveränderter Trefffläche von 44 px.
+
+## Kopfbereich beim Scrollen und gleich hohe Karten (ab 1.11.1)
+
+Der Kopfbereich kann für die gescrollte Seite eigene Farben tragen, wie der transparente Header in Flatsome: Kopfbereich im Editor öffnen, die Sektion wählen, **Design → Hintergrund**. Dort steht unter „Hintergrundfarbe“ die Zeile **„Hintergrundfarbe beim Scrollen“**; dasselbe gibt es für Textfarbe, Rahmenfarbe, Schattenfarbe und Deckkraft. Der normale Wert gilt am Seitenanfang, der Scroll-Wert sobald die Seite mehr als 40 px bewegt wurde, mit weichem Übergang. Für einen durchsichtigen Kopf am Anfang `#ffffff00` als normale Hintergrundfarbe eintragen. Damit der Kopf über der ersten Sektion liegt statt darüber zu stehen, unter **Einstellungen** „Kopfbereich über dem Inhalt schweben lassen“ einschalten; zusammen mit „oben halten“ bleibt er beim Scrollen sichtbar. Ohne JavaScript behält der Kopf seine normalen Farben.
+
+Karten, Kundenstimmen und Aufruf-Bänder nebeneinander in einer Zeile sind wieder gleich hoch. Der Abstand, den gestapelte Karten in einer Spalte untereinander brauchen, hatte in der Zeile die zweite bis letzte Karte um 18 px niedriger gemacht.
+
+## Editor mit einer Seitenleiste und Bewegung wie Flatsome (ab 1.11.0)
+
+Der Editor folgt jetzt dem Aufbau des Flatsome UX Builders: eine dunkle Kopfzeile mit Gerätewahl in der Mitte, Rückgängig/Wiederholen, Bewegung abspielen, Speichern und Veröffentlichen; links **eine** Seitenleiste mit den Reitern **Elemente**, **Struktur** und **Seite**; rechts die Vorschau. Ein Klick auf ein Element in der Vorschau öffnet seine Optionen in der Seitenleiste: Name, Pfad (Seite › Sektion › Zeile), die Reiter Inhalt/Design/Erweitert, unten Verschieben, Duplizieren, Löschen. **‹** wählt das übergeordnete Element, **＋** fügt in einen Container ein oder direkt hinter das Element, **✕** oder Escape hebt die Auswahl auf. Rechtsklick in der Vorschau öffnet ein Kontextmenü mit denselben Aktionen. Entf löscht das gewählte Element, sofern kein Feld den Fokus hat.
+
+Die Elemente stehen als Kartenraster mit Symbol und Namen; was an der gewählten Stelle nicht passt, ist ausgegraut und sagt beim Überfahren warum. In der Struktur wählt ein Klick nur aus, **Bearbeiten** oder Doppelklick öffnet das Element. Die Sichtbarkeit je Gerät steht jetzt am Ende von Inhalt und Erweitert. Die verstellbaren Panelbreiten entfallen.
+
+**Bewegung:** Einblendungen, Hover-Bewegungen und Slider-Automatik spielen standardmäßig bei jedem Besucher, wie bei Flatsome und den meisten Websites. Manche Browser melden „Bewegung reduzieren“, ohne dass jemand es eingestellt hat; bisher blieb dann jede Einblendung aus. Unter **Einstellungen → Einblendungen und Hover-Bewegungen** lässt sich „Browservorgabe beachten“ wählen; dann trägt `<html>` die Klasse `motion-respect`, und Skript wie CSS halten sich wieder an die Vorgabe. Einblendungen verstecken einen Block, bis er ins Bild scrollt, und blenden ihn dann von unsichtbar ein; wer per Sprungmarke oder schnellem Scrollen an einem Block vorbeikommt, sieht ihn sofort. Ohne JavaScript ist alles sichtbar.
+
+Gezielt prüfen (isolierte Kopien; PHP mit SQLite3-Erweiterung):
+
+```powershell
+$env:PHP_BINARY = 'C:\php84\php.exe'
+node scripts/motion-check.mjs
+node scripts/editor-check.mjs
+npm.cmd test
+```
+
+## Formularbutton und Bewegungseffekte (ab 1.10.1)
+
+„Absenden“ übernimmt den Website-Standardbutton aus Design/Typografie: Form, Darstellung, Größe, Schrift und normale/Hover-Farben. Bestehende Formulare aktualisieren sich ohne erneutes Speichern; der Button hat seine natürliche Breite statt automatisch die gesamte Formularbreite. Formularfelder, Versand und Validierung bleiben unverändert.
+
+Einblendungen starten nach dem Wechsel von reduzierter zu erlaubter Bewegung wieder ohne Neuladen. Bereits gezeigte Elemente werden nicht erneut animiert. Im Editor zeigt eine Meldung, wenn der Browser Bewegung reduziert. Eine weiterhin aktive Browservorgabe wird beachtet; dieses Update überschreibt keine Besucherpräferenzen.
+
+## Sichtbarkeit und Hamburger-Menüs (ab 1.10.0)
+
+Element auswählen → **Sichtbarkeit**: auf allen Geräten, nur Desktop/Tablet/Mobil, auf einem Gerät ausblenden oder überall ausblenden. Die Auswahl steht in Inhalt, Design und Erweitert. Ausgeblendete Elemente bleiben links in der Struktur auswählbar; dort steht auch ihre Sichtbarkeit. „Auf allen Geräten“ setzt die Gerätebeschränkung zurück. Eigene Layoutwerte bleiben erhalten. Ausgeblendete Elternbereiche verbergen auch ihre Inhalte.
+
+Waagerechte Navigation wird automatisch auf Tablet und Mobil zum Hamburger, auch auf großen iPads mit Touchbedienung ohne Maus. Unter **Inhalt → Automatisch als Hamburger** lässt sich stattdessen „Nur Mobil“ oder „Nie“ wählen. Vertikale Menüs bleiben vertikal und die Menüart „Burger“ bleibt immer aufklappbar. Bereits getrennt angelegte Desktop- und Mobilmenüs lassen sich über **Sichtbarkeit** passend zuordnen. Das Menü funktioniert ohne JavaScript und lässt sich mit Enter oder Leertaste öffnen und schließen.
+
+Sichtbarkeitsgrenzen: Desktop ab 1025 px, Tablet 768–1024 px, Mobil bis 767 px. Undo/Redo, Speichern und Veröffentlichung gelten wie gewohnt. Neue Optionen verwenden Schema 22; Rückweg siehe ADR 088.
+
+Gezielt prüfen (isolierte Kopie der lokalen Kant-IT-Daten; PHP mit SQLite3-Erweiterung):
+
+```powershell
+$env:PHP_BINARY = 'C:\php84\php.exe'
+npm.cmd run test:responsive-navigation
+php vendor/bin/phpunit tests/ResponsiveVisibilityTest.php
+npm.cmd test
+```
+
+Bericht und Screenshots: `reports/responsive-navigation/`. Produktionsbuild: `composer build`.
+
+## Buttons, Sprungziele und Menüs (ab 1.9.0)
+
+Unter Design/Typografie konfiguriert „Standardbutton“ Form, Darstellung, Größe, Schrift und Farben für die Website. Acht Vorlagen zeigen das Ergebnis direkt, einschließlich Hover-Vorschau. Einzelne Buttons können im Editor davon abweichen, auch je Gerät: eckig, abgerundet, Pille, Rahmen, dezent oder Textlink. Eigene freie Designwerte können diese Vorgaben übersteuern.
+
+Sektionen, Zeilen und Spalten haben im Inhaltsbereich das Feld „Sprungziel“. Dort beispielsweise `kontakt` eintragen und einen Link auf `#kontakt` setzen. Ziele sind eindeutig; die internen Block-IDs bleiben erhalten. Duplikate erhalten kein kopiertes Sprungziel.
+
+Menüeinträge am Punktgriff ziehen oder per Pfeiltasten verschieben und einrücken. Optional ein Symbol vor oder nach dem Text auswählen. Änderungen anschließend mit „Menü speichern“ übernehmen. Neben der Fassung links erscheint für Administratoren ein Link, sobald die bestehende tägliche Updateprüfung eine neuere Version gefunden hat. Der Aufgaben-Worker muss dafür laufen; die Sidebar selbst führt keine Netzwerkanfrage aus.
+
+Gezielte Entwicklungsprüfungen: `npm run test:buttons` und `npm run test:navigation-ux` verwenden eine isolierte Kant-IT-Kopie. Responsive Button-CSS nach Änderungen mit `npm run build:buttons` erzeugen.
+
 ## Lokal starten
 
 Voraussetzungen: PHP ab 8.2 mit Composer 2, PDO SQLite, Ctype, Iconv, Session, XML und GD mit WebP-Unterstützung. EXIF wird für die automatische Ausrichtung von JPEG-Fotos empfohlen. Für Tests zusätzlich die von `composer install` geprüften Erweiterungen, insbesondere DOM, XMLWriter und Mbstring. Für Hosting eine aktuell gepflegte PHP-Patchversion verwenden. Node 24 wird für Browserprüfungen und das Generieren der Design-CSS gebraucht, nicht im Hostingbetrieb.
@@ -18,10 +180,28 @@ php -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0
 
 Danach `http://127.0.0.1:8080/` öffnen. Der Routerskript-Parameter ist nicht optional: der eingebaute PHP-Server liefert vorhandene Dateien selbst aus und antwortet für jeden fehlenden Pfad mit Dateiendung mit 404, sodass `/sitemap.xml`, `/robots.txt`, `/llms.txt` und `/feed.xml` den Frontcontroller nie erreichen. Auf echtem Hosting erledigt das `public/.htaccess`; `bin/dev-router.php` bildet dasselbe lokal nach. Unter Windows hier vorhanden: `C:\xampp\php\php.exe` (8.2.12) und `C:\php84\php.exe` (8.4.22). Die Befehle verwenden die PHP-Version im PATH; alternativ den vollständigen Pfad einsetzen. Diese vorhandenen Patchstände sind kein empfohlenes Produktionsimage.
 
-`bin/setup.php` erzeugt ein zufälliges lokales Secret und `var/`; bestehende `.env.local` bleibt erhalten. Die Datenbank liegt in `var/cms.db`. Wiederholtes Seeding erhält existierende Seiten einschließlich ihrer Bearbeitungen. Es gibt keinen öffentlichen Installer und keine Standardzugangsdaten. Editor-Endpunkte benötigen Anmeldung, Berechtigung und bei POST einen CSRF-Token.
+`bin/setup.php` erzeugt ein zufälliges Secret und `var/`. Die Konfiguration steht ausschließlich in der nicht versionierten `.env`; vorhandene Einstellungen und Secrets bleiben erhalten. Die Datenbank liegt in `var/cms.db`. Wiederholtes Seeding erhält existierende Seiten einschließlich ihrer Bearbeitungen. Standardzugangsdaten gibt es nicht.
+
+**Installation ohne Konsole** läuft über `/install`: Systemprüfung, Datenbank, Migration, Website, erstes Konto. Der Installer antwortet nur, solange keine Installation existiert – sobald ein Konto angelegt ist, liefert jede Adresse darunter 404, und die Sperre hängt am Zustand der Datenbank, nicht an einer Datei. Solange nichts installiert ist, führt jede Adresse dorthin. Davor genügt eine einzelne hochgeladene Datei: `install.php` aus einem Release lädt das Archiv von einer fest eingetragenen Adresse, vergleicht die SHA-256, entpackt es und löscht sich selbst. Ohne passende Prüfsumme wird nichts entpackt. Editor-Endpunkte benötigen Anmeldung, Berechtigung und bei POST einen CSRF-Token.
+
+## Eigene 404-Seite (ab 1.8.0)
+
+Unter **Einstellungen → 404-Seite** eine vorhandene Seite per Livesuche auswählen und **404-Zuordnung speichern**. Oder **404-Vorlage anlegen** anklicken, den angelegten Entwurf im Editor gestalten und veröffentlichen. Die Ausgabe übernimmt den Standard-Header, Standard-Footer, Schriften und Farben der Website. **404-Vorschau** öffnet die tatsächlich sichtbare Fehlerseite.
+
+Ohne veröffentlichte Auswahl erscheint automatisch eine Standard-404 im Website-Design. Entwürfe bleiben privat; Umbenennen erhält die Zuordnung, nach dem Löschen greift wieder der Standard. Das Entfernen der Auswahl setzt die Zuordnung zurück und erhält den Seiteninhalt. Die Zuordnung benötigt Veröffentlichungsrechte. Unbekannte URLs bleiben unverändert und antworten mit HTTP 404; die Fehlerseite wird nicht in Sitemap/llms.txt aufgenommen. Prüfung mit isolierter Kant-IT-Kopie: `npm run test:404`, Berichte und Screenshots unter `reports/not-found/`. Datenvertrag und Rückweg: ADR 082.
 
 ## Anmelden und bearbeiten
 
+**Scroll-Einblendungen prüfen:** Block auswählen → Design → Bewegung und Effekte → Einblendung beim Erscheinen → „Von links“ oder „Von rechts“. Anschließend speichern und veröffentlichen. Im Editor startet „Bewegung testen“ die Vorschauwiedergabe. Öffentliche Seiten animieren beim ersten Erscheinen; die Systemoption „Bewegung reduzieren“ unterdrückt Animationen. `node scripts/motion-check.mjs` prüft Scroll-Auslösung, beide Richtungen, Bewegungsreduktion und Ausgabe ohne JavaScript mit einer isolierten Kant-IT-Kopie. PHP mit SQLite3-Unterstützung über `PHP_BINARY` wählen, etwa in PowerShell `$env:PHP_BINARY='C:\php84\php.exe'`. Ergebnisse stehen unter `reports/motion/`.
+
+**Bildausrichtung (ab 1.8.4):** Bild auswählen → Design → Layout → **Eigene Ausrichtung quer: Mitte**. Zentriert den Bildblock und auch kleinere Bilder innerhalb des Rahmens. Funktioniert mit Prozentbreite, maximaler Breite und Bildlinks; Anfang/Ende und Gerätewerte werden ebenfalls berücksichtigt. In nebeneinander angeordneten Flex-Gruppen bleibt die Querachse vertikal. Prüfen: `npm run test:image-alignment` auf einer isolierten Kant-IT-Kopie; Screenshots unter `reports/image-alignment/`.
+
+**Akkordeon-Inhalte (ab 1.8.3):** Einträge bleiben im Editor geöffnet. Im Eintrag auf **Inhalt hinzufügen** klicken und links Text, Bild oder ein anderes Element auswählen; alternativ direkt in die sichtbare Inhaltsfläche ziehen. **Eintrag hinzufügen** steht unter dem Akkordeon und in dessen Inhaltsoptionen. Die Eintragsübersicht rechts und die Struktur links zeigen die Titel. **Beim Laden geöffnet** bestimmt ausschließlich den Zustand der veröffentlichten Seite. Prüfen: `npm run test:accordion`, Screenshots unter `reports/accordion/`.
+
+**Farbauswahl im Editor (ab 1.8.2):** Unter Design zeigt jedes Farbfeld eine Vorschau mit Palettenname und Hexwert. Anklicken öffnet die Website-Farben als Farbkacheln. Eigene Farben über den Farbwähler oder als Hexwert eingeben und mit Enter/✓ übernehmen. Transparente Hexfarben werden auf einem Schachbrett dargestellt. „Geerbten Wert verwenden“ entfernt die eigene Überschreibung für das aktive Gerät. Prüfen: `npm run test:colors` mit isolierten Kant-IT-Daten; Screenshots unter `reports/color-picker/`.
+
+**Footer-Links (ab 1.8.1):** Datenschutz, Impressum und weitere Links werden selbst im Footer oder Seiteninhalt platziert. Das CMS hängt keine zusätzliche Rechtszeile an. Der optionale Baustein „Rechtliches“ verwendet die Adressen aus den Einstellungen und erscheint nur an seiner eingefügten Position.
+
 Für eine neue Installation im interaktiven Terminal ein Konto anlegen:
 
 ```powershell
@@ -32,15 +212,29 @@ Das Passwort wird verdeckt zweimal abgefragt (14–72 Bytes). Bestehende Benutze
 
 Unter `http://127.0.0.1:8080/admin` eine Seite auswählen. Links Blöcke hinzufügen/auswählen, in der Mitte die Vorschau, rechts Eigenschaften. Die Auswahl ist zwischen Strukturbaum und Vorschau synchron. Sektion, Zeile, Spalte, Überschrift, Text, Bild, Button und Galerie sind vorhanden. Bilder können aus der Mediathek oder über vorhandene lokale/HTTPS-Adressen eingebunden werden.
 
+**Bild prozentual verkleinern (ab 1.7.2):** Bild auswählen → Inhalt → **Bildbreite (%)**. Regler oder Zahlenfeld setzen 1–100 % der verfügbaren Breite in Sektion/Spalte. Desktop, Tablet und Mobil können eigene Werte erhalten; kleinere Geräte übernehmen zunächst den Wert vom größeren Gerät. „Breite zurücksetzen“ entfernt den eigenen Wert und stellt die Vererbung beziehungsweise automatische Breite wieder her. Originalbreite/-höhe beschreiben weiterhin die Datei. Der Regler bearbeitet denselben Wert wie Design → Größe → Breite; eine dort gesetzte maximale Breite bleibt wirksam. Prüfung mit kopierten Kant-IT-Daten: `npm run test:image-size`, Bericht und Screenshots unter `reports/image-size/`.
+
+**Links und Bildvorschauen (ab 1.7.3):** Unter Linkziel steht **In neuem Tab öffnen** – für Buttons, verlinkte Bilder, Symbole, Symbolkarten und Aufruf-Bänder. Im Text zuerst den Link über die Werkzeugleiste öffnen; bei Menüeinträgen steht das Häkchen in den aufgeklappten Einstellungen. Ausgewählte Bilder und Galerie-/Logobilder zeigen eine Vorschau mit Entfernen-Funktion. „Bild entfernen“ entfernt das Bild aus dem Inhalt; die Datei bleibt in der Mediathek. Rückgängig stellt die Verwendung wieder her. Design → Hintergrund zeigt auch geerbte Bilder: Entfernen blendet das Bild auf dem aktiven und kleineren Geräten aus, Zurücksetzen stellt die Vererbung wieder her. Bildaustausch erhält Link, Bildunterschrift und eingestellte Größe. Prüfung mit isolierter Kant-IT-Kopie: `npm run test:link-media`, Bericht und Screenshots unter `reports/link-media/`. Datenvertrag und Rückweg: ADR 081 in `docs/ARCHITECTURE.md`.
+
 Blöcke per Drag-and-drop verschieben: auf einen Container ziehen, um hineinzuverschieben; auf einen Text-/Bild-/Linkblock ziehen, um davor einzufügen. Alternativ unten am Strukturbaum die Schaltflächen für Auf/Ab, Verschachteln und Herausheben verwenden. Duplizieren vergibt neue Block-IDs und wandelt eine kopierte H1 in H2 um. Löschen lässt sich rückgängig machen. Jede speicherbare Seite benötigt genau eine H1.
 
-Undo/Redo gilt für die lokale Bearbeitung, `Strg+S` speichert den Entwurf. `Strg+Z`/`Strg+Umschalt+Z` gelten außerhalb der Texteingaben für das Dokument; Texteingaben behalten ihr natives Undo. Erst speichern, dann separat veröffentlichen. Die Bestätigungsdialoge unterstützen Escape und Fokus-Rückkehr. Reine Redakteure können nicht veröffentlichen.
+Undo/Redo gilt für die lokale Bearbeitung, `Strg+S` speichert den Entwurf. `Strg+Z`/`Strg+Umschalt+Z` gelten außerhalb der Texteingaben für das Dokument; Texteingaben behalten ihr natives Undo. Erst speichern, dann separat veröffentlichen. Die Bestätigungsdialoge unterstützen Escape und Fokus-Rückkehr. Reine Redakteure können nicht veröffentlichen; was Redakteur, Veröffentlicher und Administrator dürfen, steht unter Benutzer bei jeder Rolle und im Abschnitt „Rollen“ oben.
 
 Ein Speicherkonflikt überschreibt nichts: lokale Änderungen als JSON sichern und den Serverstand bewusst neu laden. Auch Netzwerk-/Sitzungsfehler lassen den lokalen Stand erhalten. Die Vorschau behält bei ungültigen Eingaben die letzte gültige Ausgabe.
 
-Rechts zwischen **Inhalt** und **Design** wechseln. Unter Design je nach Block Abstände, Schriftgröße/-stärke, Zeilenhöhe, Ausrichtung, Spalten und Ecken wählen. Oben **Desktop/Tablet/Mobil** bestimmt das bearbeitete Gerät: Desktop ist die Basis, Tablet überschreibt bis 1024 px, Mobil bis 650 px. „Übernehmen“ entfernt einen eigenen Wert und stellt die Vererbung wieder her. Gerätewerte lassen sich gemeinsam zurücksetzen und rückgängig machen. Farben und Inhaltsbreite einer Sektion stehen unter Inhalt.
+Rechts zwischen **Inhalt** und **Design** wechseln. Unter Design je nach Block Abstände, Schriftgröße/-stärke, Zeilenhöhe, Ausrichtung, Spalten und Ecken wählen. Oben **Desktop/Tablet/Mobil** bestimmt das bearbeitete Gerät: Desktop ist die Basis, Tablet überschreibt bis 1024 px, Mobil bis 767 px. „Übernehmen“ entfernt einen eigenen Wert und stellt die Vererbung wieder her. Gerätewerte lassen sich gemeinsam zurücksetzen und rückgängig machen. Farben und Inhaltsbreite einer Sektion stehen unter Inhalt.
 
-Die Vorschau rendert mit echten 1240/768/390 px Layoutbreite und passt sich durch Skalierung an den verfügbaren Platz an. Links lassen sich fertige Intro-, Leistungs- und Kontaktabschnitte einfügen. Der Werkzeugkasten kann für mehr Platz geschlossen werden. Die Struktursuche findet Text oder Elementtypen und zeigt den Pfad zum Treffer; Dreiecke klappen Teilbäume ein. Oberhalb der Vorschau führen die Pfadschaltflächen direkt zum übergeordneten Element.
+Die Vorschau rendert auf Desktop mit mindestens 1240 px Layoutbreite und wächst bei mehr Platz mit. Tablet/Mobil verwenden 768/390 px; bei weniger Platz wird die Vorschau passend skaliert. Links lassen sich fertige Intro-, Leistungs- und Kontaktabschnitte einfügen. Der Werkzeugkasten kann für mehr Platz geschlossen werden. Die Struktursuche findet Text oder Elementtypen und zeigt den Pfad zum Treffer; Dreiecke klappen Teilbäume ein. Oberhalb der Vorschau führen die Pfadschaltflächen direkt zum übergeordneten Element.
+
+### Platz und Blockgestaltung im Editor (1.6.1)
+
+**Leere Layouts ab 1.6.2:** Sektionen und Spalten zeigen eine umrahmte Einfügefläche. In einer leeren Sektion direkt **1–4 Spalten** wählen; in einer Spalte **Inhalt hinzufügen** drücken und links das gewünschte Element auswählen. Alternativ ein Element auf die Fläche ziehen: die Markierung nennt das genaue Ziel, am Vorschaurand wird mitgescrollt. Neue Container werden in den sichtbaren Ausschnitt gebracht. Diese Hilfen erscheinen nur im Editor, verschwinden nach dem Befüllen und kehren bei Undo zurück.
+
+**Neue Sektion auf Seitenebene** steht dauerhaft oben links und fügt nach dem aktuellen Seitenabschnitt ein, unabhängig von der ausgewählten Verschachtelung oder einem gesetzten Plus-Einfügepunkt. Auch „Sektion“ im Werkzeugkasten verwendet ohne expliziten Einfügepunkt die Seitenebene. Verschachtelte Sektionen sind weiterhin über die Plus-Einfügepunkte oder Drag-and-drop möglich.
+
+Die Trennlinien links und rechts der Vorschau lassen sich ziehen. Mit Tab fokussieren und mit den Pfeiltasten ändern; Umschalt vergrößert den Schritt, Home/End wählen die Grenzen, Doppelklick setzt die jeweilige Breite zurück. Die Breiten werden im Browser behalten und bei schmalen Fenstern an den verfügbaren Platz angepasst. Auf dem Telefon stehen die Panels unter der Vorschau.
+
+Text und Überschriften nutzen die Containerbreite. Die Sektion wählt unter **Inhalt → Inhaltsbreite** zwischen Websitebreite und randloser Ausgabe. **Design → Größe → Maximale Breite** begrenzt ein einzelnes Element ausdrücklich, etwa auf `60ch`; „Ohne Begrenzung“ hebt einen eigenen Grenzwert auf. Der Feinschliff zeigt passende Optionen für Text, Bild oder Container zuerst. **Alle Eigenschaften anzeigen** macht die übrigen Optionen zugänglich. Bereits gespeicherte Werte bleiben sichtbar.
 
 ## Produktionsmodus lokal prüfen
 
@@ -55,11 +249,11 @@ Unter Linux dieselben PHP-Argumente mit vorangestelltem `APP_ENV=prod APP_DEBUG=
 
 ## Medien, Galerien und Effekte
 
-Links im Werkzeugkasten **Medienverwaltung öffnen** oder auf der Seitenübersicht **Medienverwaltung** wählen. JPEG/PNG/WebP hochladen, Titel und Alternativtext bearbeiten und speichern. Bilder lassen sich suchen, archivieren und wiederherstellen. Die Dateien werden als optimierte WebP-Varianten gespeichert; Originaldateien werden nicht aufgehoben. Uploadgrenzen: 8 MB, 12 Megapixel und 8000 px Kantenlänge; Hostinglimits können niedriger sein. Bild-URLs sind öffentlich erreichbar, auch wenn sie noch in keinem veröffentlichten Inhalt verwendet werden.
+Links im Werkzeugkasten **Medienverwaltung öffnen** oder auf der Seitenübersicht **Medienverwaltung** wählen. JPEG/PNG/WebP hochladen, Titel und Alternativtext bearbeiten und speichern. Bilder lassen sich suchen, archivieren und wiederherstellen. Die Dateien werden als optimierte WebP-Varianten in vier Breiten gespeichert (480, 960, 1600, 2400 px; ein schmaleres Bild bekommt weniger Stufen und wird nie hochskaliert). Originaldateien werden nicht aufgehoben. Bildbausteine liefern `srcset`, Hintergrundbilder wählen die Variante je Gerät. Uploadgrenzen: 8 MB, 12 Megapixel und 8000 px Kantenlänge; Hostinglimits können niedriger sein. Bild-URLs sind öffentlich erreichbar, auch wenn sie noch in keinem veröffentlichten Inhalt verwendet werden.
 
 Für ein einzelnes Bild **Bild aus Mediathek wählen** anklicken. Für eine Galerie den Block **Galerie** einfügen und **Galeriebilder auswählen** öffnen. Mehrere Bilder markieren, Alt-Texte speichern oder die dekorative Verwendung wählen und **Auswahl übernehmen**. Im Strukturbaum einzelne Bilder auswählen, beschriften und sortieren; Reihenfolge und Einfügen lassen sich rückgängig machen. Unter **Design** Spaltenzahl und Abstände pro Gerät einstellen.
 
-Unter **Design → Effekte** Schatten, Hover-Anheben/Bildzoom und Einblendung beim Laden wählen. Effekte gelten für alle Geräte; bei aktivierter Bewegungsreduktion werden Animationen abgeschaltet. Die öffentliche Seite benötigt dafür kein JavaScript. Lightbox, Slideshow, Video/PDF-Upload und Bildzuschnitt sind noch nicht enthalten.
+Unter **Design → Bewegung und Effekte** Schatten, Hover-Effekte und **Einblendung beim Erscheinen** wählen. Die gewählte Richtung, Zoom, Unschärfe oder Überblendung startet beim Eintreten in den Bildschirm. Das kleine Bewegungsmodul lädt nur auf Seiten mit Einblendungen; ohne JavaScript bleiben die Inhalte sichtbar. Slider haben Pfeile, optionale Punkte sowie bei aktivierter Automatik Pause/Wiedergabe. Manuelle Bedienung pausiert die Automatik, Wiedergabe setzt sie fort. Bewegungsreduktion schaltet Einblendungen und Automatik aus; manuelles Blättern bleibt möglich. Im Editor startet **Bewegung testen** diese Vorschau, **Bewegung stoppen** beendet sie. Die Vorschau-Sandbox bleibt ohne Skriptfreigabe.
 
 Medien liegen standardmäßig in `var/media`; mit `MEDIA_DIRECTORY` lässt sich ein absoluter Ordner außerhalb von `public` konfigurieren. Er muss für PHP beschreibbar sein. Auf dem Hosting `upload_max_filesize=8M`, `post_max_size=10M` und ausreichend Arbeitsspeicher (lokal 256M) einstellen, soweit der Tarif dies erlaubt. Datenbank und Medienordner gemeinsam sichern. Archivieren erhält Bild-URLs; es ist keine Dateilöschung.
 
@@ -77,6 +271,7 @@ composer build
 npm.cmd ci
 npx.cmd playwright install chromium
 npm.cmd run test:browser
+npm.cmd run test:links
 npm.cmd test
 npm.cmd run test:editor
 npm.cmd run test:editor -- --audit
@@ -85,9 +280,17 @@ npm.cmd run audit
 
 Unter Linux/macOS `npm` und `npx` ohne `.cmd`; in CI `npx playwright install --with-deps chromium`. `test:browser` und `audit` benötigen den laufenden lokalen Produktionsmodus auf Port 8080. Ein anderes Ziel lässt sich über `CMS_URL` konfigurieren. `test:editor` startet einen eigenen PHP-Prozess auf einem freien Port mit isolierter Datenbank und zufälligem Testkonto; es ändert keine echten Seiten oder Benutzer. `PHP_BINARY` kann dafür einen alternativen PHP-Pfad angeben. Testdaten bleiben unter `var/browser-tests`, Berichte/Screenshots unter `reports/`. Das Skript erneuert zuvor den Produktionscache.
 
+**Datenbank:** SQLite ab Fassung 3.16 (Doctrine liest das Schema mit Tabellenfunktionen, die es erst seit dieser Fassung gibt) oder MySQL/MariaDB. Auf älteren Systemen – manche Shared Hoster liefern noch SQLite 3.7 – bleibt MySQL; die Systemprüfung des Installers nennt die gefundene Fassung und bietet SQLite gar nicht erst an, wenn sie zu alt ist.
+
+Die Verwaltung liegt unter `/admin`. `php bin/console cms:admin:path meine-verwaltung` legt sie auf eine andere Adresse: der Wert landet in `.env`, gilt für Routen, Firewall und Schutzkopfzeilen, und wird in der `robots.txt` bewusst nicht genannt. Ohne Argument zeigt der Befehl die aktuelle Adresse.
+
+Die öffentliche Adresse der Website steht als `SITE_ORIGIN` in `.env` – mit oder ohne `www`, so wie sie in Canonical, Sitemap, Feed und strukturierten Daten stehen soll. `php bin/console cms:site:origin https://www.meine-firma.de` prüft und schreibt sie; ohne Argument zeigt der Befehl die aktuelle. Dasselbe geht in der Verwaltung unter „System“, mit einem Link auf die andere Schreibweise. Dort wird vorher geprüft, ob die Website unter der neuen Adresse antwortet. Die jeweils andere Schreibweise (`meine-firma.de` ↔ `www.meine-firma.de`) leitet die Anwendung selbst mit 301 auf die eingetragene um, mit Pfad und Abfrage, auch für die Verwaltung. Ein ganz anderer Host – die Vorschauadresse des Hosters, eine IP-Adresse, `localhost` – bleibt erreichbar, damit eine falsch eingetragene Adresse niemanden aussperrt; der Bildschirm „System“ zeigt dann, unter welcher Adresse die Verwaltung gerade läuft und welche eingetragen ist. HTTPS erzwingt die Anwendung nicht; dafür bleiben die drei Zeilen in `public/.htaccess`.
+
 `composer format` formatiert PHP. `composer build` wärmt den Symfony-Produktionscache; öffentliche CSS-Dateien sind direkt auslieferbar, es ist kein Frontend-Bundler nötig. Bei Änderungen an `public/assets/design-tokens.json` einmal `npm.cmd run build:design` ausführen und die erzeugte CSS-Datei mitliefern; Node ist auf dem Hosting nicht erforderlich. Nach Änderungen an Produktionskonfiguration/Templates `php bin/console cache:clear --env=prod --no-debug` ausführen. Falls lokale Tests alte Templates verwenden, vor PHPUnit auch `php bin/console cache:clear --env=test --no-debug` ausführen.
 
-Das Lighthouse-Skript misst die Startseite dreimal je Profil und prüft die Mediane gegen die Projektziele. `test:editor -- --audit` prüft die im isolierten Editortest gestaltete v3-Seite mit Abschnittsvorlage, Galerie, tatsächlichen Bildvarianten und Effekten; Berichte stehen unter `reports/lighthouse-editor`. Uploads und Datenbank des Tests liegen getrennt unter `var/browser-tests`. Diese kleinen Prototypseiten ersetzen nicht die spätere Referenzsuite mit Kundeninhalten, Fotos, Beitrag und Formular. Messgrenzen und Ergebnisse: `docs/QUALITY.md`.
+`test:links` folgt der Sitemap, sammelt jeden internen Verweis samt Bildern, Stylesheets und Hintergrundbildern und meldet jede Antwort ab 400 – gebaut, nachdem im Nachbau von kant-it.de vier Verweise ins Leere zeigten, die kein Test finden konnte.
+
+Das Lighthouse-Skript misst dreimal je Profil und prüft die Mediane gegen die Projektziele. Welche Adressen geprüft werden, sagt `CMS_PATHS` (mit Komma getrennt, Standard `/`); in der Git-Bash davor `MSYS_NO_PATHCONV=1` setzen, sonst wird aus `/` ein Windows-Pfad. `test:editor -- --audit` prüft die im isolierten Editortest gestaltete v3-Seite mit Abschnittsvorlage, Galerie, tatsächlichen Bildvarianten und Effekten; Berichte stehen unter `reports/lighthouse-editor`. Uploads und Datenbank des Tests liegen getrennt unter `var/browser-tests`. Diese kleinen Prototypseiten ersetzen nicht die spätere Referenzsuite mit Kundeninhalten, Fotos, Beitrag und Formular. Messgrenzen und Ergebnisse: `docs/QUALITY.md`.
 
 ## Inhalte und Entwicklung
 
@@ -95,8 +298,31 @@ Die Formate v1/v2/v3 und erlaubten Blöcke stehen in `src/Content/DocumentValida
 
 Ein JSON-Dokument lässt sich zusätzlich lokal über `php bin/console cms:save-draft PAGE_ID PFAD_ZUR_DATEI ERWARTETE_VERSION` speichern. Der Befehl gibt die neue Revisions-ID aus. Die redaktionelle Bearbeitung und Veröffentlichung erfolgen jetzt über den geschützten Editor.
 
+## Wiederkehrende Aufgaben
+
+Sicherung, geplante Veröffentlichung, Statistik verdichten, Updateprüfung und Aufräumen laufen über einen eingebauten Plan. Auf geteiltem Hosting gibt es oft keinen Cronjob – deshalb stößt hier **die Anfrage** die Arbeit an, nach der ausgelieferten Antwort (`kernel.terminate`), sodass kein Besucher darauf wartet. Der Bildschirm **Verwaltung → Aufgaben** zeigt Plan, letztes Ergebnis und Protokoll und schaltet jede Aufgabe einzeln.
+
+Vier Auslöser, in aufsteigender Verlässlichkeit:
+
+1. **Besuch** – jeder Seitenaufruf prüft, ob etwas fällig ist. Der Normalfall kostet eine gelesene Datei (`var/scheduler.json`) und keine Datenbankabfrage. Standardmäßig an.
+2. **Geöffnete Verwaltung** – das Backend fragt jede Minute nach, solange der Reiter sichtbar ist. Damit läuft der Plan auch auf einer Website ohne Besucher. Standardmäßig an.
+3. **URL-Cronjob** – wenn der Hoster nur das Aufrufen einer Adresse anbietet: die Adresse steht auf dem Bildschirm „Aufgaben“ (`/cms-cron/<Schlüssel>`, aus `APP_SECRET` abgeleitet), zum Beispiel alle fünf Minuten.
+4. **Konsole** – `php bin/console cms:tasks:run`, für einen echten Cronjob jede Minute:
+
+```
+* * * * *  cd /pfad/zur/installation && php bin/console cms:tasks:run
+```
+
+`cms:tasks` zeigt denselben Plan wie die Verwaltung (`--log` zusätzlich das Protokoll), `cms:tasks:run --task=backup` startet eine bestimmte Aufgabe sofort, `cms:tasks:run --loop=60 --max-time=3600` läuft als Dauerläufer unter einem Prozessverwalter. Die alten Einzelbefehle `cms:backup`, `cms:stats:prune` und `cms:publish-due` gibt es weiterhin; wer sie in einen Cronjob einträgt, schaltet die entsprechende Aufgabe im Plan besser ab, damit nicht beides läuft.
+
+**Die Grenze gehört dazu:** ohne Besuch und ohne geöffnetes Backend passiert nichts. Eine Aufgabe für 03:00 Uhr läuft auf einer stillen Website erst beim nächsten Aufruf, vielleicht um 07:15 Uhr. Wer Minutengenauigkeit braucht, richtet Weg 3 oder 4 ein und schaltet den Besuchs-Auslöser ab.
+
 ## PHP-Webhosting
 
+**Archiv-Updates prüfen:** `node scripts/archive-update-check.mjs <altes-release.zip> <neues-release.zip>` testet im Produktionsmodus den vollständigen HTTP-Updateablauf mit isolierter Kopie von `var/kantit.db`. PHP mit SQLite3 über `PHP_BINARY` wählen. Downloadtransport lokal, Originaldatenbank unverändert; Protokolle unter `var/archive-check-*`. Ein drittes Argument `500` prüft ausdrücklich den bekannten Altfehler samt Wiederaufnahme. Um den nächsten Updateaufruf des korrigierten 1.10.2-Pakets ohne Folgerelease zu testen, dasselbe Paket zweimal angeben und ausschließlich für diesen Test `UPDATE_SOURCE_VERSION=1.10.1` setzen; geändert wird nur die Versionsdatei der Wegwerfinstallation.
+
+**500 direkt nach einem Archiv-Update aus 1.10.1 oder älter:** `/admin/system` direkt öffnen und angebotene Migrationen abschließen. Der alte Updater kann nach erfolgreichem Dateitausch seinen eigenen Cache löschen und beim Antworten abbrechen. Ab 1.10.2 behalten laufende Anfragen ihren Cache; neue Releases erhalten ein eigenes Cacheverzeichnis. Details und Grenzen stehen in ADR 090. Nicht erneut installieren oder die Datenbank ersetzen.
+
 Anforderungen vor dem Pilotbetrieb beim Anbieter bestätigen:
 
 - Gepflegte PHP-Version ab 8.2, PDO MySQL und die Composer-Plattformanforderungen.
@@ -105,8 +331,60 @@ Anforderungen vor dem Pilotbetrieb beim Anbieter bestätigen:
 - Apache mit Rewrite-Unterstützung für `public/.htaccess` oder entsprechende FastCGI/Nginx-Konfiguration.
 - Schreibzugriff für PHP auf `var/`, HTTPS und eine Möglichkeit, Migrationen/Cache-Kommandos kontrolliert auszuführen.
 
-Serverkonfiguration über echte Umgebungsvariablen oder eine nicht öffentliche `.env.local`: `APP_ENV=prod`, `APP_DEBUG=0`, eigenes zufälliges `APP_SECRET`, `SITE_ORIGIN=https://eigene-domain.example` und `DATABASE_URL=mysql://USER:URL_ENCODED_PASSWORD@HOST:3306/DATABASE?charset=utf8mb4`. Das ist eine Vorlage, keine funktionierende Zugangskonfiguration.
+Serverkonfiguration über die nicht öffentliche `.env`; echte Server-Umgebungsvariablen dürfen sie gezielt überschreiben: `APP_ENV=prod`, `APP_DEBUG=0`, eigenes zufälliges `APP_SECRET`, `SITE_ORIGIN=https://eigene-domain.example` und `DATABASE_URL=mysql://USER:URL_ENCODED_PASSWORD@HOST:3306/DATABASE?charset=utf8mb4`. Das ist eine Vorlage, keine funktionierende Zugangskonfiguration.
 
-Deployment später mit `composer install --no-dev --optimize-autoloader`, Backup, Migration und Cacheaufbau. Composer darf auf einem geeigneten Build-Rechner laufen, sodass das Hosting weder Node noch Composer benötigt; CLI-Zugriff oder ein verlässlich dokumentierter Deploymentweg für Datenbankmigrationen bleibt zu klären. Keine Installation ins öffentlich erreichbare Projektstammverzeichnis.
+**Composer wird auf dem Hosting nicht vorausgesetzt.** Ein Release wird auf einem Rechner gebaut, der Composer hat: `php scripts/build-release.php` legt `var/releases/kantsites-<Fassung>.zip` samt `.sha256` an. Das Archiv enthält die Anwendung mit fertigem `vendor/` ohne Entwicklungspakete, aber keine Tests, keine Entwicklungsskripte und kein `var/`. Eine `.env` aus der unvertraulichen `.env.example` liegt für die Erstinstallation bei. Der Webinstaller schreibt die eigenen Werte in `.env`, migriert und legt das erste Benutzerkonto an. Beim Update die eigene `.env` erhalten und niemals mit der Vorlage aus dem Archiv überschreiben. Node wird dort ebenfalls nicht gebraucht. Keine Installation ins öffentlich erreichbare Projektstammverzeichnis.
 
-Ein Livegang, Hostzugriff, Restore-Test und Produktionsfreigabe sind nicht erfolgt. Bei bestehenden Installationen vor dem Update Datenbank und Medien sichern und `php vendor/bin/doctrine-migrations migrate --no-interaction` ausführen. Migration `20260912000200` ergänzt Benutzer, `20260912000300` die Medientabelle; beide verändern keine Seitendokumente. Migration `20260912001100` ergänzt drei Datumsspalten an `cms_user` (drei ADD COLUMN, kein Tabellenneubau). Benutzerverwaltung und Passwortänderung gibt es jetzt in der Oberfläche unter „Benutzer“ und „Mein Konto“; `php bin/console cms:user:create` bleibt der Weg, wenn kein Konto mehr funktioniert. Migration `20260912001200` legt die Zählertabelle der Statistik an (neue Tabelle, kein Eingriff in Bestehendes); `php bin/console cms:stats:prune` gehört danach in einen täglichen Cronjob. Der Abgleich mit der Pilotwebsite bleibt der nächste Schritt. Wie ein Update später über einen Git-Tag laufen soll, steht als Plan in `docs/UPDATE.md` – gebaut ist davon noch nichts.
+`web.kant-it.de` und das Drews-Hosting laufen mit Releasearchiven dieses Codes; die Domainumschaltung von kant-it.de, ein Restore-Test auf dem Hosting und der Formularversand über einen echten Mailserver stehen aus (`docs/LIVEGANG.md`). Bei bestehenden Installationen vor dem Update Datenbank und Medien sichern und `php vendor/bin/doctrine-migrations migrate --no-interaction` ausführen. Migration `20260912000200` ergänzt Benutzer, `20260912000300` die Medientabelle; beide verändern keine Seitendokumente. Migration `20260912001100` ergänzt drei Datumsspalten an `cms_user` (drei ADD COLUMN, kein Tabellenneubau). Benutzerverwaltung und Passwortänderung gibt es jetzt in der Oberfläche unter „Benutzer“ und „Mein Konto“; `php bin/console cms:user:create` bleibt der Weg, wenn kein Konto mehr funktioniert. Migration `20260912001300` ergänzt zwei Spalten an `page` für Kopf- und Fußbereich je Seite (zwei ADD COLUMN). Migration `20260914000100` legt die Tabelle des Aufgabenplans an (neue Tabelle, kein Eingriff in Bestehendes); ohne sie läuft der Plan nicht, meldet das aber, statt eine Seite zu zerstören. Migration `20260912001200` legt die Zählertabelle der Statistik an (neue Tabelle, kein Eingriff in Bestehendes); `php bin/console cms:stats:prune` und `php bin/console cms:backup` erledigt jetzt der eingebaute Aufgabenplan (Abschnitt „Wiederkehrende Aufgaben“); ohne Cronjob genügen Besuche und das geöffnete Backend – die Sicherung schreibt nach `var/backups/`, rotiert selbst und enthält Datenbank und Medien, aber weder `.env` noch `vendor/`. Zurückspielen: `php bin/console cms:restore <name>`. Der Code liegt auf `https://git.kant-it.de/kantarci/KantSites.git`; Fassungen sind Tags der Form `v1.0.1`, und die laufende Fassung steht in `VERSION`. Ein Update zieht `php bin/console cms:update` (mit `--check`, `--dry-run`, `--to=v1.2.0`) oder der Bildschirm „System“ in der Verwaltung; `--maintenance=an|aus` schaltet den Wartungszustand von Hand. Ändert ein Update die Abhängigkeiten (`composer.lock`) und ist Composer auf dem Server nicht aufrufbar, bricht der Updater ab und verweist auf das Releasearchiv; Updates ohne Abhängigkeitsänderung laufen auch ohne Composer durch. Ablauf und Grenzen stehen in `docs/UPDATE.md`. Der Abgleich mit der Pilotwebsite bleibt der nächste Schritt.
+
+## Verwaltung ab 1.7.0
+
+**Seiten** und **Beiträge** sind getrennte Menüpunkte. Suche, Status einschließlich Papierkorb und 20/50 Einträge begrenzen jede Ergebnisliste bereits in der Datenbank. Vor/Zurück erhält die Filter; übergeordnete Seiten lassen sich unabhängig von der aktuellen Ergebnisseite suchen.
+
+Ab **1.7.1** aktualisieren sich Seiten, Beiträge und Mediathek beim Tippen per AJAX, ohne Enter oder Neuladen. Status, Anzahl und Blättern reagieren ebenfalls direkt. Der Cursor bleibt im Suchfeld; Zurück/Vor im Browser stellt die Filter wieder her. Die Mediathek sucht in Titel und Alternativtext über alle Ergebnisseiten. Menüs, Seitenauswahl und Editor-Suchfelder reagieren ebenfalls beim Tippen. Bei Ladefehlern bleiben die bisherigen Treffer sichtbar und „Erneut suchen“ wiederholt die Anfrage. Ohne JavaScript bleibt das Suchformular mit „Anwenden“ benutzbar.
+
+Unter **Menüs** zuerst den Menüplatz wählen, links Inhalte suchen und zum Menü hinzufügen. Rechts lassen sich Beschriftung, Ziel, Reihenfolge und Unterpunkte bearbeiten. Pfeilbuttons sind per Tastatur erreichbar; Rückgängig stellt entfernte oder umgeordnete Einträge wieder her. Erst **Menü speichern** ändert die Website. Validierungs-, Verbindungs- und Versionsfehler erhalten die lokalen Eingaben. Ein paralleler Speicherstand muss bewusst neu geladen werden.
+
+**Bereiche** verwenden denselben Editor; Speichern wirkt sofort auf allen verknüpften Seiten. Unter **Formulare** ist die Meldung nach dem Absenden ein mehrzeiliges Feld über die verfügbare Formularbreite.
+
+### Konfigurationswechsel von älteren Fassungen
+
+Beim ersten Start von 1.7.0 wird eine vorhandene `.env.local` einmalig mit `.env` zusammengeführt. Die bisher wirksamen Werte aus `.env.local` bleiben dabei erhalten, insbesondere Datenbank, Medienordner und Secret. Beide Originale liegen anschließend unter `var/backups/environment-<Zeitpunkt>-<Kennung>/`; erst nach erfolgreichem Schreiben wird `.env.local` entfernt. Danach gelten Änderungen direkt in `.env`. System zeigt die tatsächlich genutzte Datenbank und die Quelle `.env` oder Server-Umgebung an.
+
+Weitere Symfony-Overlays (`.env.prod`, `.env.prod.local`, `.env.local.php`) werden nicht mehr automatisch geladen. Falls ein Hosting sie bewusst verwendet hat, deren gewünschte Werte vor dem Wechsel in `.env` oder echte Servervariablen übernehmen. Der Installer, Setup und der Admin-Pfad-Befehl erzeugen keine `.env.local` mehr. Rückweg: alten Code und die beiden gesicherten Konfigurationsdateien gemeinsam wiederherstellen.
+
+### Zweite lokale Referenzwebsite: Elektro Bernhard
+
+Neben dem Kant-IT-Piloten liegt eine vollständige Kundenwebsite in einer eigenen Installation: Datenbank `var/elektro-bernhard.db`, Medien in `var/elektro-bernhard-media`. Beide werden über Umgebungsvariablen gewählt, die Anwendung selbst bleibt unverändert:
+
+```
+DATABASE_URL="sqlite:///<Projektpfad>/var/elektro-bernhard.db" MEDIA_DIRECTORY="<Projektpfad>/var/elektro-bernhard-media" php -S 127.0.0.1:8088 -t public bin/dev-router.php
+```
+
+In der App-Vorschau erledigt das die Startkonfiguration `elektro-bernhard` in `.claude/launch.json` (Port 8088).
+
+Der Bestand wird nicht von Hand gepflegt, sondern aufgebaut: `scripts/seed-elektro-bernhard.php <Ordner mit den Originalbildern>` legt Gestaltung, Medien, Formular, Kopf- und Fußbereich, elf Seiten, vier Menüs, Einstellungen, Weiterleitungen und ein Administratorkonto an. Das Skript weigert sich, wenn die Datenbank schon Seiten enthält oder `DATABASE_URL` nicht auf diese Installation zeigt. `sh scripts/reset-elektro-bernhard.sh <Bilderordner>` wirft die Installation weg, migriert neu und baut sie wieder auf; das Passwort des Kontos steht am Ende der Ausgabe. Vorlage ist das statische Paket `Elektro-Bernhard-Website`; die drei Stellen, an denen der Nachbau bewusst abweicht, stehen in `docs/STATUS.md`.
+
+### Dritte lokale Referenzwebsite: Tagespflege Moldovan
+
+Der Onepager „Tagespflege Jacqueline Moldovan“ liegt in `var/tagespflege-moldovan.db` mit Medien in `var/tagespflege-moldovan-media`; die Startkonfiguration `tagespflege-moldovan` in `.claude/launch.json` nutzt Port 8089. Der Inhalt entsteht ausschließlich über `scripts/seed-tagespflege-moldovan.php <Ordner mit gemeinsam.webp, jacqueline-moldovan.png und marke.png>`; `sh scripts/reset-tagespflege-moldovan.sh [Ordner]` (Standard `var/tagespflege-moldovan-assets`) wirft die Installation weg, migriert neu und baut sie wieder auf. Vorlage war das gelieferte Paket `Tagespflege_Moldovan_Website.zip` (09.09.2026); die bewussten Abweichungen stehen im Kopf des Skripts.
+
+### Vierte lokale Referenzwebsite: Ihr Malerservice Drews
+
+Der Nachbau von maler-drews.com (Malermeister Axel Drews, Gernsbach) liegt in `var/maler-drews.db` mit Medien in `var/maler-drews-media`; die Startkonfiguration `maler-drews` in `.claude/launch.json` nutzt Port 8093. `scripts/seed-maler-drews.php <Bilderordner>` baut Gestaltung, Kopf- und Fußbereich, acht Seiten, 31 Beiträge in zwei Kategorien, Menüs, Formular, Einstellungen und Weiterleitungen auf; der Wortlaut der Beiträge, des Impressums und der Datenschutzerklärung steht in `scripts/seed-maler-drews-inhalte.php`. `sh scripts/reset-maler-drews.sh [Bilderordner]` (Standard `var/maler-drews-assets`, Zuordnung in `manifest.json`) wirft die Installation weg und baut sie neu auf; die Schriften Lato 400/700 und Cormorant Garamond 700 holt es nur, wenn die Cormorant-Dateien in `public/assets/fonts` fehlen, weil `cms:fonts:fetch` die geteilte `fonts.css` sonst nur für dieses Design neu schreibt (Kant-IT und Elektro Bernhard brauchen Lato 900). Für den Abruf liegt `var/cacert.pem` (curl.se) bereit, weil das PHP 8.4 auf diesem Rechner keine Stammzertifikate kennt. Die bewussten Abweichungen vom Original stehen im Kopf des Skripts.
+
+### Fünfte lokale Referenzwebsite: DEEG Immobilien & Hausverwaltung
+
+Der Onepager „DEEG – Immobilien & Hausverwaltung in Freudenstadt“ (Deeg Hausverwaltung und Immobilien GmbH) liegt in `var/immobilien-deeg.db` mit Medien in `var/immobilien-deeg-media`; die Startkonfiguration `immobilien-deeg` in `.claude/launch.json` nutzt Port 8094, `immobilien-deeg-prod` denselben Bestand im Produktionsmodus auf Port 8095 zum Messen. `scripts/seed-immobilien-deeg.php <Bilderordner>` baut Gestaltung, Kopf- und Fußbereich, Startseite, Impressum, Datenschutz, 404, Menü, Einstellungen und zwei Formulare auf – `kontakt` und `bewertung` (Bewertungsanfrage mit Auswahl Wohnung, Haus, Mehrfamilienhaus, Grundstück); `sh scripts/reset-immobilien-deeg.sh [Bilderordner]` (Standard `var/immobilien-deeg-assets`: Logo und zwei Architekturfotos aus dem gelieferten Paket) wirft die Installation weg und baut sie neu auf. Die Vorlage nutzt Arial, es gibt keine Schrift zu holen. Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts.
+
+### Sechste lokale Referenzwebsite: EB Solar
+
+Der Redesign-Entwurf von ebsolar.de (Elektro Bernhard Regenerative Energie GmbH, Baden-Baden) liegt in `var/ebsolar.db` mit Medien in `var/ebsolar-media`; die Startkonfiguration `ebsolar` in `.claude/launch.json` nutzt Port 8096, `ebsolar-prod` denselben Bestand im Produktionsmodus auf Port 8097 zum Messen. `scripts/seed-ebsolar.php <Bilderordner>` baut Gestaltung, Kopf- und Fußbereich, den Kontaktbereich als wiederverwendbare Sektion, Startseite, Projektübersicht, Solarcheck, Impressum, Datenschutz, 404, acht Projektbeiträge mit Galerie und Bildbetrachter, Menü, Einstellungen und zwei Formulare auf – `kontakt` und `solarcheck` (acht Schritte wie das Original auf ebsolar.de, die fünf Auswahlfragen als Bildkarten – gezeichnet und gerastert von `node scripts/build-ebsolar-options.mjs`); `sh scripts/reset-ebsolar.sh [Bilderordner]` (Standard `var/ebsolar-assets`: Logo, Favicon, Startbild, sechs Herstellerlogos, 31 Projektfotos und `projects.json` aus dem gelieferten Paket) wirft die Installation weg und baut sie neu auf. Die Vorlage nutzt Arial, es gibt keine Schrift zu holen. Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts.
+
+### Siebte lokale Referenzwebsite: KANTARCI Immobilien (Landingpage)
+
+Die Landingpage „KANTARCI Immobilien – Mietanfrage“ (KANTARCI Immobilien GmbH, Baden-Baden) liegt in `var/kantarci-immobilien.db` mit Medien in `var/kantarci-immobilien-media`; die Startkonfiguration `kantarci-immobilien` in `.claude/launch.json` nutzt Port 8098, `kantarci-immobilien-prod` denselben Bestand im Produktionsmodus auf Port 8099 zum Messen. `sh scripts/reset-kantarci-immobilien.sh [Bilderordner]` (Standard `var/kantarci-immobilien-assets` mit `kantarci-banner.jpeg` aus dem gelieferten Paket) schneidet Logo, Hausmotiv und Seitensymbol aus dem Banner (`scripts/build-kantarci-assets.php`), zeichnet die Bildkarten der Mietanfrage (`node scripts/build-kantarci-options.mjs`), wirft die Installation weg und baut mit `scripts/seed-kantarci-immobilien.php` Gestaltung, Kopf- und Fußbereich, Startseite, Impressum, Datenschutz, 404, Einstellungen und das Formular `mietanfrage` (drei Schritte mit Bildkarten und Zusammenfassung) auf. Schriften sind Arial und Georgia, es gibt nichts zu holen. Die bewussten Abweichungen vom Paket stehen im Kopf des Skripts.
+
+Zusätzliche Prüfung mit den lokalen Kant-IT-Inhalten: `node scripts/admin-quality-check.mjs` (PHP über `PHP_BINARY` wählbar). Das Skript benötigt `var/kantit.db` und `var/kantit-media`, erstellt eine eigene Datenbankkopie und ein zufälliges Testkonto darin; es ändert die Pilotdatenbank nicht. Screenshots und Bericht landen in `reports/admin-quality/`.
+
+Die Livesuche prüft `npm run test:search` mit derselben isolierten Pilotkopie: Eingabe ohne Enter, langsame Antworten, Fehler/Wiederholen, Filter, Browserhistorie, Mediathek, Tastaturfokus, mobile Ansicht und axe. Ergebnisse stehen in `reports/live-search/`. Die allgemeine Verwaltungsprüfung ohne erneuten öffentlichen Bewegungstest startet `npm run test:admin -- --admin-only`.

VERSION

@@ -1 +1 @@
-1.0.1
+1.22.1

bin/dev-router.php

@@ -11,6 +11,38 @@
 $path = parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?: '/';
 $file = __DIR__.'/../public'.$path;
 if ('/' !== $path && !str_contains($path, '..') && is_file($file)) {
+    // Dieselben Antwortkoepfe wie public/.htaccess sie auf einem Webserver setzt: Stylesheets,
+    // Skripte, Schriften und Bilder tragen ihre Fassung oder ihre Kennung in der Adresse und
+    // duerfen deshalb lange im Browser bleiben. Ohne das misst jede Messung hier etwas anderes
+    // als das, was spaeter ausgeliefert wird - und man optimiert an der falschen Stelle.
+    if (1 === preg_match('/\.(css|js|woff2|webp|png|jpe?g|gif|svg)$/', $path, $treffer) && !str_starts_with($path, '/assets/seite/')) {
+        header('Content-Type: '.match ($treffer[1]) {
+            'css' => 'text/css; charset=UTF-8',
+            'js' => 'text/javascript; charset=UTF-8',
+            'woff2' => 'font/woff2',
+            'svg' => 'image/svg+xml; charset=UTF-8',
+            'jpg', 'jpeg' => 'image/jpeg',
+            default => 'image/'.$treffer[1],
+        });
+        header('Cache-Control: public, max-age=31536000, immutable');
+        // Und ebenso die Komprimierung, die mod_deflate auf einem Webserver uebernimmt: ohne sie
+        // misst man hier eine Stylesheetgroesse, die es im Betrieb nie gibt.
+        $inhalt = (string) file_get_contents($file);
+        if (in_array($treffer[1], ['css', 'js', 'svg'], true) && str_contains($_SERVER['HTTP_ACCEPT_ENCODING'] ?? '', 'gzip')) {
+            $inhalt = (string) gzencode($inhalt, 6);
+            header('Content-Encoding: gzip');
+            header('Vary: Accept-Encoding');
+        }
+        header('Content-Length: '.strlen($inhalt));
+        echo $inhalt;
+
+        exit;
+    }
+
     return false; // Let the built-in server deliver the static file.
 }
+// Auch die Seiten selbst gehen komprimiert raus, wie auf einem Webserver mit mod_deflate.
+ini_set('zlib.output_compression', '1');
+ini_set('zlib.output_compression_level', '6');
+
 require __DIR__.'/../public/index.php';

bin/setup.php

@@ -1,13 +1,13 @@
 <?php
 
-// Only creates local state; never replaces an existing environment file.
+require dirname(__DIR__).'/vendor/autoload.php';
+
+use App\Ops\Environment;
+
 $root = dirname(__DIR__);
 if (!is_dir($root.'/var')) {
-    mkdir($root.'/var', 0775, true);
-}
-if (!file_exists($root.'/.env.local')) {
-    file_put_contents($root.'/.env.local', 'APP_SECRET='.bin2hex(random_bytes(32)).PHP_EOL);
-    echo "Created .env.local with a local secret.\n";
-} else {
-    echo "Existing .env.local preserved.\n";
+    mkdir($root.'/var', 0o775, true);
 }
+Environment::prepare($root);
+Environment::ensureSecret($root);
+echo ".env ist eingerichtet; bestehende Einstellungen und das Secret bleiben erhalten.\n";

config/bootstrap.php

@@ -1,13 +1,28 @@
 <?php
 
+use App\Ops\Environment;
 use Symfony\Component\Dotenv\Dotenv;
 
 require dirname(__DIR__).'/vendor/autoload.php';
-// PHP web hosts may omit E from variables_order. Honor real process configuration.
-foreach (['APP_ENV', 'APP_DEBUG', 'APP_SECRET', 'DATABASE_URL', 'SITE_ORIGIN', 'MEDIA_DIRECTORY'] as $name) {
+$root = dirname(__DIR__);
+Environment::prepare($root);
+// Server variables are explicit deployment overrides; other .env.* files are never loaded.
+$keys = array_keys((new Dotenv())->parse((string) file_get_contents($root.'/.env')));
+foreach (array_unique([...$keys, 'APP_ENV', 'APP_DEBUG', 'APP_SECRET', 'DATABASE_URL', 'SITE_ORIGIN', 'MEDIA_DIRECTORY', 'ADMIN_PATH', 'FONT_DIRECTORY', 'ASSET_DIRECTORY']) as $name) {
     $value = getenv($name, true);
     if (false !== $value && !isset($_SERVER[$name]) && !isset($_ENV[$name])) {
         $_SERVER[$name] = $_ENV[$name] = $value;
     }
 }
-(new Dotenv())->bootEnv(dirname(__DIR__).'/.env');
+(new Dotenv())->load($root.'/.env');
+$_SERVER['APP_ENV'] = $_ENV['APP_ENV'] = $_SERVER['APP_ENV'] ?? 'prod';
+$_SERVER['APP_DEBUG'] = $_ENV['APP_DEBUG'] = $_SERVER['APP_DEBUG'] ?? '0';
+if ('' === ($_SERVER['APP_SECRET'] ?? '')) {
+    try {
+        $secret = Environment::ensureSecret($root);
+    } catch (RuntimeException) {
+        // Keep the installer reachable: its system check names the missing permission.
+        $secret = bin2hex(random_bytes(32)).'-nicht-gespeichert';
+    }
+    $_SERVER['APP_SECRET'] = $_ENV['APP_SECRET'] = $secret;
+}

config/packages/framework.yaml

@@ -8,7 +8,9 @@ framework:
         cookie_httponly: true
         cookie_samesite: lax
         cookie_secure: auto
-        cookie_path: /admin
+        # Der Pfad folgt der Adresse der Verwaltung: hiesse sie anders und das Cookie weiter
+        # /admin, schickte der Browser es nie mit, und keine Anmeldung kaeme je an.
+        cookie_path: '/%kant.admin_path%'
         name: KANTSESSION
     router:
         utf8: true
@@ -19,6 +21,7 @@ framework:
         log: true
     mailer:
         # Default to the host's sendmail, which is what ordinary PHP hosting offers. Override with
-        # MAILER_DSN in .env.local for SMTP. Delivery failures never lose a submission: it is
+        # MAILER_DSN in .env for SMTP. Delivery failures never lose a submission: it is
         # stored first and stays visible as undelivered in the administration.
-        dsn: '%env(resolve:MAILER_DSN)%'
+        # Ohne `resolve:`: ein SMTP-Passwort mit Prozentzeichen ist kein Parametername.
+        dsn: '%env(MAILER_DSN)%'

config/packages/security.yaml

@@ -9,7 +9,7 @@ security:
         ROLE_PUBLISHER: ROLE_EDITOR
     firewalls:
         admin:
-            pattern: ^/admin(?:/|$)
+            pattern: ^/%kant.admin_path%(?:/|$)
             lazy: true
             provider: cms_users
             form_login:
@@ -25,5 +25,5 @@ security:
                 target: admin_login
                 enable_csrf: true
     access_control:
-        - { path: ^/admin/login$, roles: PUBLIC_ACCESS }
-        - { path: ^/admin, roles: ROLE_EDITOR }
+        - { path: ^/%kant.admin_path%/login$, roles: PUBLIC_ACCESS }
+        - { path: ^/%kant.admin_path%, roles: ROLE_EDITOR }

config/packages/twig.yaml

@@ -1,7 +1,13 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
+    # Die Vorlagen der Plugins (@plugins/<name>/...) registriert App\Twig\PluginExtension zur
+    # Laufzeit - nur wenn der Ordner plugins/ existiert; ein fester Pfad hier liesse Twig auf einer
+    # Installation ohne Plugins abbrechen.
     strict_variables: true
     globals:
         # Reading the decision needs the current request, so the templates ask the gate directly
         # instead of every controller passing the same three values along.
         consentGate: '@App\Content\Consent'
+        # Dasselbe für die Einstellungen der Website: der Kopfbereich fragt, ob er beim
+        # Scrollen kleben soll, und das steht in keinem Dokument.
+        siteSettings: '@App\Content\SiteSettings'

config/routes.yaml

@@ -1,3 +1,11 @@
-controllers:
+# Erst alle benannten Routen, dann die Auffangroute fuer oeffentliche Seiten. Ohne diese
+# Reihenfolge wuerde `/verwaltung/partials` als Seitenadresse gelesen, sobald die Verwaltung nicht
+# mehr `/admin` heisst - die Auffangroute schliesst nur den Standardnamen aus.
+verwaltung:
     resource: ../src/Controller/
     type: attribute
+    exclude: '../src/Controller/PageController.php'
+
+seiten:
+    resource: ../src/Controller/PageController.php
+    type: attribute

config/services.yaml

@@ -1,20 +1,64 @@
+parameters:
+    # Die Adresse der Verwaltung. Standard bleibt /admin; wer sie aendert, nimmt Scannern und
+    # Anmeldeversuchen das Ziel - erraten laesst sie sich nicht mehr. Sie steht in der Umgebung und
+    # nicht in der Datenbank, weil die Routen beim Start feststehen muessen. Geaendert wird sie
+    # ueber `php bin/console cms:admin:path <neu>`; der Befehl prueft und raeumt den Cache auf.
+    kant.admin_path: '%env(string:default:kant.admin_path_default:ADMIN_PATH)%'
+    kant.admin_path_default: 'admin'
+    # Wo Schriften und Stylesheets liegen. Im Normalfall im oeffentlichen Ordner; ueber
+    # FONT_DIRECTORY und ASSET_DIRECTORY umstellbar - die Tests nutzen das, damit sie nicht in
+    # das Projekt schreiben, und eine Installation mit schreibgeschuetztem public/ ebenfalls.
+    kant.fonts_dir: '%kernel.project_dir%/public/assets/fonts'
+    kant.asset_dir: '%kernel.project_dir%/public/assets'
+
 services:
     _defaults:
         autowire: true
         autoconfigure: true
+    # Jede Aufgabe traegt sich selbst in den Plan ein: eine Klasse, die App\Ops\Tasks\Task
+    # implementiert, bekommt das Etikett und liegt beim naechsten Abgleich in der Tabelle. Eine
+    # neue Aufgabe ist damit eine Datei und keine Liste, die man an drei Stellen nachfuehrt.
+    _instanceof:
+        App\Ops\Tasks\Task:
+            tags: ['kant.task']
     App\:
         resource: '../src/'
         exclude: '../src/{Kernel.php,Domain/}'
     Doctrine\DBAL\Connection:
         factory: ['App\Infrastructure\ConnectionFactory', 'create']
-        arguments: ['%env(resolve:DATABASE_URL)%']
+        arguments: ['%env(projectdir:DATABASE_URL)%', '@App\Infrastructure\QueryCounter']
     App\Controller\PageController:
         arguments:
             $secret: '%kernel.secret%'
             $siteOrigin: '%env(SITE_ORIGIN)%'
+    # Mit oder ohne www entscheidet SITE_ORIGIN; die andere Schreibweise leitet dorthin um.
+    App\EventSubscriber\CanonicalHostSubscriber:
+        arguments:
+            $siteOrigin: '%env(SITE_ORIGIN)%'
     App\Content\MediaLibrary:
         arguments:
-            $directory: '%env(resolve:MEDIA_DIRECTORY)%'
+            $directory: '%env(projectdir:MEDIA_DIRECTORY)%'
+    App\Content\DocumentLibrary:
+        arguments:
+            $directory: '%env(projectdir:MEDIA_DIRECTORY)%'
+    # Die Schriften liegen im oeffentlichen Ordner: sie sollen vom Webserver direkt ausgeliefert
+    # werden, ohne PHP dazwischen - das ist der Punkt der Uebung.
+    # Die Stellen, die wissen muessen, wie die Verwaltung heisst.
+    App\EventSubscriber\AdminHeadersSubscriber:
+        arguments:
+            $adminPath: '%kant.admin_path%'
+    App\EventSubscriber\PublicNotFoundSubscriber:
+        arguments:
+            $adminPath: '%kant.admin_path%'
+    App\Content\Statistics:
+        arguments:
+            $adminPath: '%kant.admin_path%'
+    App\Content\FontLibrary:
+        arguments:
+            $directory: '%env(default:kant.fonts_dir:FONT_DIRECTORY)%'
+    App\Content\StyleBundle:
+        arguments:
+            $assetDirectory: '%env(default:kant.asset_dir:ASSET_DIRECTORY)%'
     App\Controller\FormController:
         arguments:
             $secret: '%kernel.secret%'
@@ -22,13 +66,88 @@ services:
     App\Controller\SeoController:
         arguments:
             $siteOrigin: '%env(SITE_ORIGIN)%'
+            $adminPath: '%kant.admin_path%'
     App\Command\HealthCommand:
         arguments:
             $projectDir: '%kernel.project_dir%'
+    App\Controller\SystemController:
+        arguments:
+            $adminPath: '%kant.admin_path%'
+            $databaseUrl: '%env(DATABASE_URL)%'
+            $siteOrigin: '%env(SITE_ORIGIN)%'
+            $mediaDirectory: '%env(projectdir:MEDIA_DIRECTORY)%'
+            $projectDir: '%kernel.project_dir%'
+    App\Command\AdminPathCommand:
+        arguments:
+            $projectDir: '%kernel.project_dir%'
+            $adminPath: '%kant.admin_path%'
+            $environment: '%kernel.environment%'
+    # Eigene kurze Zeitgrenzen statt des Download-Dienstes mit denen fuer Releasearchive.
+    App\Ops\OriginCheck:
+        arguments:
+            $secret: '%kernel.secret%'
+            $download: null
+    App\Command\SiteOriginCommand:
+        arguments:
+            $projectDir: '%kernel.project_dir%'
+            $siteOrigin: '%env(SITE_ORIGIN)%'
+    App\Ops\ArchiveUpdate:
+        arguments:
+            $root: '%kernel.project_dir%'
     App\Ops\Updater:
         arguments:
             $root: '%kernel.project_dir%'
-            $databaseUrl: '%env(resolve:DATABASE_URL)%'
+            $databaseUrl: '%env(projectdir:DATABASE_URL)%'
+    App\EventSubscriber\InstallSubscriber:
+        arguments:
+            $projectDir: '%kernel.project_dir%'
     App\EventSubscriber\MaintenanceSubscriber:
         arguments:
             $projectDir: '%kernel.project_dir%'
+            $adminPath: '%kant.admin_path%'
+    App\Ops\Installation:
+        arguments:
+            $root: '%kernel.project_dir%'
+            $mediaDirectory: '%env(projectdir:MEDIA_DIRECTORY)%'
+            $secret: '%kernel.secret%'
+    App\Ops\Backup:
+        arguments:
+            $root: '%kernel.project_dir%'
+            $databaseUrl: '%env(projectdir:DATABASE_URL)%'
+            $mediaDirectory: '%env(projectdir:MEDIA_DIRECTORY)%'
+    # Der Aufgabenplan. Die Aufgaben kommen ueber ihr Etikett herein, damit diese Stelle nicht
+    # jedes Mal mitwaechst.
+    App\Ops\Scheduler:
+        arguments:
+            $tasks: !tagged_iterator kant.task
+            $projectDir: '%kernel.project_dir%'
+    App\Ops\Tasks\CleanupTask:
+        arguments:
+            $projectDir: '%kernel.project_dir%'
+    App\EventSubscriber\TaskWorkerSubscriber:
+        arguments:
+            $projectDir: '%kernel.project_dir%'
+            $adminPath: '%kant.admin_path%'
+    App\Controller\TaskController:
+        arguments:
+            $secret: '%kernel.secret%'
+    App\Controller\CronController:
+        arguments:
+            $secret: '%kernel.secret%'
+    App\Infrastructure\QueryCounter: ~
+    # `%env(projectdir:...)%`: ersetzt nur %kernel.project_dir%. Symfonys `resolve:` laese ein
+    # prozentkodiertes MySQL-Passwort (`p%40ss`) als Parameter und brauche den Container.
+    App\Infrastructure\ProjectDirEnvProcessor:
+        arguments:
+            $projectDir: '%kernel.project_dir%'
+    App\EventSubscriber\QueryHeaderSubscriber:
+        arguments:
+            $environment: '%kernel.environment%'
+
+    App\Plugin\PluginRegistry:
+        arguments:
+            $projectDir: '%kernel.project_dir%'
+
+    App\Twig\PluginExtension:
+        arguments:
+            $loader: '@twig.loader.native_filesystem'

docs/ARBEITSPLAN-ADMIN-QUALITAET.md

@@ -0,0 +1,62 @@
+# Arbeitsplan: Installation, Verwaltung und Bewegung
+
+Auftrag vom 14.09.2026. Ausgangspunkt: Release 1.6.2 plus bereits vorhandene lokale Änderungen an der Systemdiagnose. Diese bleiben erhalten und werden an den neuen Konfigurationsvertrag angepasst. Vorhandener Patch liegt lokal unter `var/work-before-usability/`.
+
+## 1. Fehler reproduzieren und Daten schützen
+
+- [x] Bereichsfehler auf den Seitenzugriff in der gemeinsamen Vorlage zurückführen und Öffnen/Vorschau/Speichern im Browser prüfen.
+- [x] Kant-IT-Datenbank für die Prüfung isoliert kopieren; echte Inhalte und Zugangsdaten nicht verändern.
+- [x] Slider und Einblendungen auf der Kant-IT-Startseite mit Positionen und Zeitverlauf prüfen.
+
+## 2. Eine eindeutige Installationskonfiguration
+
+- [x] `.env` ist die Konfigurationsdatei der Installation. Installer, Setup und Admin-Pfad-Befehl schreiben dort; keine neue `.env.local`.
+- [x] Bestehende wirksame Einstellungen aus älteren Installationen einmalig und mit Sicherung in `.env` zusammenführen. Datenbankverbindung und Secret erhalten; danach keine versteckte Überschreibung.
+- [x] Updates erhalten `.env`; echte Server-Umgebungsvariablen bleiben für Hosting/Testbetrieb möglich. Anzeige im Systembereich muss die tatsächliche Quelle nennen, ohne Passwörter auszugeben.
+- [x] Neuinstallation, bestehende Installation, wiederholtes Booten, Updateerhalt und Fehler beim Schreiben prüfen.
+
+## 3. Bereiche zuverlässig bearbeiten
+
+- [x] Gemeinsamen Editor ohne Zugriff auf nicht vorhandene Seitenvariablen rendern; benannte Routen auch bei geändertem Admin-Pfad verwenden.
+- [x] Kopf, Fuß und verknüpfte Sektion öffnen, Inhalt ändern, Vorschau prüfen, speichern und neu laden; Versionskonflikte erhalten.
+- [x] Sofort wirksames Speichern bei Bereichen in der Oberfläche korrekt benennen.
+
+## 4. Seiten und Beiträge übersichtlich verwalten
+
+- [x] Eigene Navigation und Ansichten für Seiten und Beiträge; passende Anlageformulare.
+- [x] Datenbankseitige Pagination, Suche, Statusfilter und Ergebniszahl; keine vollständigen Dokumentlisten für jede Bildschirmseite laden.
+- [x] Filter und Seitenzahl beim Blättern erhalten; leere Suche und ungültige Seitenzahlen behandeln. Papierkorb ebenfalls begrenzen.
+- [x] Übergeordnete Seiten bleiben unabhängig von der aktuellen Ergebnisseite wählbar.
+
+## 5. Menüeditor mit verständlichem Aufbau
+
+- [x] Seiten/Beiträge nach Titel oder Adresse suchen und mit eindeutiger Vorschau auswählen.
+- [x] Inhalt auswählen → zum Menü hinzufügen → Reihenfolge/Unterpunkte ändern → speichern. Eigene Links getrennt anbieten.
+- [x] Bestehende Ziele und Hierarchien erhalten, Umordnen auch mit Tastatur/Buttons; Speicherfehler und ungespeicherte Änderungen sichtbar behandeln.
+
+## 6. Formulare, Animationen und Slider
+
+- [x] Meldung nach dem Absenden als ausreichend breites mehrzeiliges Feld anbieten.
+- [x] Einblendungen sichtbar beim Eintreten in den Bildschirm starten; Effektauswahl tatsächlich unterscheiden. Inhalte ohne JavaScript lesbar lassen und Bewegungsreduktion respektieren.
+- [x] Slider mit sichtbarer Bedienung, funktionierendem Wechsel und nachvollziehbarer Pause/Automatik. Auf der realen Kant-IT-Seite über mehrere Wechsel prüfen.
+- [x] Bewegung in der Editorvorschau gezielt prüfbar machen, ohne die Sandbox für Inhaltsskripte zu öffnen.
+
+## 7. Abnahme und Übergabe
+
+- [x] Relevante PHP-/JavaScript-Tests und vollständige Browserabläufe, einschließlich Tastatur, Speicherung, Fehlerzuständen und unterschiedlichen Bildschirmbreiten.
+- [x] Änderungen der öffentlichen Ausgabe auf Kant-IT-Inhalten visuell und mit den passenden Qualitätsprüfungen kontrollieren; keine ungeprüften Scores behaupten.
+- [x] Tatsächliche Ergebnisse, Grenzen und Migration dokumentieren; Versionsnummer vor Veröffentlichung mit dem Repository abgleichen.
+
+Jeder Abschnitt wird erst als erledigt markiert, wenn seine Prüfung bestanden ist. Der Plan ersetzt keine Umsetzung; Befunde und Änderungen werden darin nachgeführt.
+
+## Ergebnis der Abnahme
+
+Umgesetzt als 1.7.0, ohne neues Datenbank- oder Dokumentformat. Begründungen und Konfigurationsmigration: ADR 076–078. Die ursprünglichen lokalen Änderungen an Systemdiagnose/STATUS wurden integriert, die veraltete lokale Versionsnummer 1.4.7 mit der bestehenden Releasefolge abgeglichen.
+
+Geprüft: PHP-Vollsuite 461/461, JavaScript 30/30, alle 43 Twig-Dateien und Produktionscontainer. Komplette Editorprüfung einschließlich unterschiedlicher Einblendungen und Bewegungsreduktion. Kant-IT-Browserabläufe mit 4 Seiten/29 Beiträgen, Menüfehlern und Versionskonflikt, mehrzeiliger Formularmeldung, Kopf/Fuß und neu angelegter Sektion samt echtem Textinhalt. Desktop, 1024 und 390 px; axe ohne Verstöße. Öffentliche Inhalte und Slider bleiben ohne JavaScript erreichbar.
+
+Kant-IT-Startseite, Produktionsmodus, Lighthouse 13.4.1: jeweils drei Läufe mobil/desktop, Leistungsmedian jeweils 99; Barrierefreiheit, Best Practices, SEO und Agentic Browsing jeweils 100. Lokale Labormessung, keine Felddaten/CWV-Abnahme für Kundenseiten. Messungen: `reports/admin-quality/lighthouse/`; Browserbericht und Bilder im übergeordneten Ordner. Der zusätzliche Updater-Test verändert die Datenbank vor einem Migrationsfehler, prüft echte Wiederherstellung und einen erhaltenen Wartungszustand, falls die Sicherung fehlt.
+
+Veröffentlichungsnachweis und bekannte Grenzen stehen im aktuellen Abschnitt von STATUS.md.
+
+**Veröffentlicht:** `495b268`, Tag `v1.7.0`, Release mit ZIP/Prüfsumme/Installer. Quellabgleich und anonyme Downloads geprüft; frischer Release-Installer antwortet mit HTTP 200 und erzeugt ausschließlich `.env`.

docs/ARCHITECTURE.md

@@ -1,6 +1,369 @@
 # Architekturentscheidungen
 
-Stand: 12.09.2026. Arbeitstitel KantSites; Produktname offen.
+Stand: 15.09.2026. Arbeitstitel KantSites; Produktname offen.
+
+## ADR 106 – „Eigenes HTML“ als Baustein, und warum der Rahmen trotzdem „Externer Inhalt“ bleibt (16.09.2026)
+
+Umut: „Als Baustein im Editor, dass man individuelles HTML einfügen kann. Z. B. möchte ich eine neue Angebotsseite bei DEEG, da soll ein iframe rein.“ Das sind zwei Wünsche, und nur einer davon fehlte.
+
+**Den Rahmen gab es schon.** Der Baustein `embed` („Externer Inhalt“, Schema v14) bettet eine fremde Seite ein: Adresse, Titel, Anbieter, Höhe – und davor die Einwilligungsfrage. Vor der Einwilligung wird nichts geladen, kein Bild und keine Anfrage; erst danach kommt der Host in `frame-src` der Sicherheitsrichtlinie. Ein `<iframe>`, das jemand als rohes Markup einfügt, hätte beides nicht: keine Frage, und der Browser lädt es gar nicht erst, weil `frame-src` den Host nicht kennt. Deshalb ist `<iframe>` im HTML-Baustein eine Fehlermeldung mit dem Weg zum richtigen Baustein – nicht etwas, das man einfügen kann und das dann schweigend nichts tut. Dasselbe gilt für `<script>`: das Feld „Eigenes Skript“ unter „Erweitert“ liefert es als eigene Datei aus, inline würde die Richtlinie es ohnehin blockieren.
+
+**Der Baustein (Schema v24).** `html` mit einer einzigen Eigenschaft: das Markup, bis 20.000 Zeichen, unverändert ausgegeben. Es gibt keine Filterliste – wer ihn setzen darf, ist die eigentliche Antwort, und die ist dieselbe wie beim eigenen Skript: **nur ein Administrator**. Geprüft wird wie dort gegen den gespeicherten Stand (`CustomCode::assertHtmlUnchanged()`), in beiden Controllern und auch beim Zurückholen einer alten Fassung – ein Redakteur kann eine Seite mit HTML also weiter bearbeiten, ohne das HTML anfassen zu können. Im Editor ist das Feld für ihn sichtbar und schreibgeschützt, wie das Skriptfeld.
+
+**Warum keine Filterung wie bei Rich Text.** Genau die Fälle, für die man den Baustein nimmt – ein fremdes Widget, eine eigene Tabelle, eine Auszeichnung, die es als Baustein nicht gibt – fallen durch jede Whitelist. Ein gefilterter HTML-Baustein hätte den Wunsch nicht erfüllt, sondern nur verschoben.
+
+**Folgen.** `README.md` nennt den Baustein und seine Rolle. Nicht gebaut: eine Vorschau, die fremde Skripte ausführt (die Editorvorschau führt keine aus, das bleibt so), und eine Ausnahme von der Administratorregel für einzelne Seiten.
+
+## ADR 105 – Designpakete in Plugins zurückgenommen: das Design gehört der Website (16.09.2026)
+
+Umut hatte auf der DEEG-Installation „Nachtblau“ eingeschaltet und wieder ausgeschaltet – und die Farben blieben. Die Ursache war nicht der Schalter (`activate()`/`deactivate()` fassen das Design nie an), sondern der zweite Knopf daneben: „Designpaket übernehmen“ schrieb die Palette des Plugins über `Theme::save()` endgültig in die Website. Technisch war das gewollt (ADR 103: ein Import, damit sich das Ergebnis unter Design weiter anpassen lässt und beim Ausschalten nichts verlorengeht) – in der Bedienung war es eine Falle: eine Aktion, die die gesamte Palette ersetzt, ohne Rückfrage und ohne Weg zurück, auf einem Bildschirm, wo daneben ein Schalter sitzt, den man gefahrlos umlegen kann.
+
+**Entscheidung: `theme` fällt aus dem Manifest.** Kein `themePackage()`, kein `applyTheme()`, keine Route `admin_plugin_theme`, kein Knopf auf dem Bildschirm „Plugins“, kein `plugins/nachtblau`. Ein Manifest braucht jetzt mindestens einen Baustein, eine Adresse oder eine Vorlage. Der Alternativweg – Sicherung der alten Palette plus „Design zurücksetzen“ – wäre eine Spalte, eine Migration und ein zweiter Zustand gewesen, um eine Funktion zu retten, die niemand vermisst: Farben, Schriften und Buttons ändert man unter **Design**, dort mit Vorschau und in einem Schritt rückgängig.
+
+**Folgen.** Ein Plugin kann das Aussehen der Website nur noch über das CSS seiner eigenen Bausteine beeinflussen – nie über die Palette. Der Test dazu heißt jetzt umgekehrt: Ein- und Ausschalten lässt Design **und** Inhalte unangetastet (`PluginTest::testSwitchingAPluginOnAndOffLeavesTheDesignAlone`). Bestehende Installationen behalten die Palette, die sie haben; wer ein übernommenes Paket loswerden will, setzt die Farben unter Design. Auf der DEEG-Installation ist die eigene Palette (Logo-Blau `#0081c7`, Anthrazit, Arial, eckige Buttons) aus dem Aufbauskript wieder eingespielt. Die Abnahme „Templatewechsel erhält die Inhalte“ aus dem Ausbauplan gilt damit als nicht gebaut; ein Templatewechsel gehört, wenn er kommt, in den Designbereich und nicht in ein Plugin.
+
+## ADR 104 – Die Rückstände der Gesamtprüfung abgearbeitet: Archiv als Seite, Bereiche vollständig, Palette bis in die Fehlerfarbe, Betrieb auf MySQL (16.09.2026)
+
+Umut: „Bitte umsetzen“ – die Liste aus ADR 100, die bis dahin nur dokumentiert war.
+
+**Archivseiten sind Seiten.** `/beitraege`, `/kategorie/…` und `/schlagwort/…` bauen ein Dokument aus Bausteinen (Kopfabschnitt mit Überschrift und Zahl, ein Abschnitt mit blätternder Beitragsliste) und geben es an `renderPage()` – dieselbe Aufbaukette wie jede Seite: Kopf und Fuß mit ihren Stilen, verknüpfte Sektionen, eigenes CSS, Schriften, Stylesheet-Bündel, Nach-oben-Knopf, Einwilligung, Skripte, Richtlinie. Die eigene Vorlage `archive.html.twig` ist weg. Ein Archiv hat den Typ `archive`; Brotkrumen führen „Beiträge → Kategorie“, und das steht als `BreadcrumbList` in den strukturierten Daten.
+
+**Blättern ist eine Folge von Seiten.** Hat eine Seite eine blätternde Beitragsliste, nennt die Canonical ab Seite 2 die Seitenzahl (`?seite=n`), und `<link rel="prev">`/`<link rel="next">` verbinden die Folge. Vorher hielt eine Suchmaschine Seite 3 für ein Duplikat von Seite 1.
+
+**Bereiche sind vollständig.** Formulare, Beitragslisten und Brotkrumen in Kopf, Fuß und verknüpften Sektionen werden jetzt wie im Inhalt aufgelöst; die Meldungen eines abgewiesenen Formulars finden ihren Block über die Formularadresse statt über die Block-ID, wo auch immer er steht. Eigene Skripte eines Bereichs laufen als `/assets/bereich/<id>.js` – vorher wurden sie gespeichert, geprüft und nie ausgeführt.
+
+**Mehrfach verknüpfte Sektionen ohne doppelte IDs.** `PartialRepository::expandRepeatedLinks()` zählt in Renderreihenfolge (Kopf, Inhalt, Fuß, verschachtelt bis zur Grenze) und gibt der zweiten und jeder weiteren Verknüpfung eine Kopie mit angehängten Kennungen (`id-2`) und ohne Sprungziele; ihre Stile werden mitkompiliert. Auch die Editorvorschau macht das.
+
+**Eine Grenze zwischen Tablet und Telefon: 767 px.** Design-Tokens, Website-Stile, Slider und Galerie sprangen bei 650, der Stilcompiler und die Sichtbarkeit bei 767 – zwischen 651 und 767 galt die Hälfte. Jetzt gilt überall 1024/767, wie es der Editor schon immer sagte.
+
+**Die Palette reicht bis in die Fehlerfarbe.** `color-scheme`, Skip-Link, Aufruf-Button, die Fehlerfarben der Formulare und der Text auf dunklen Abschnitten kommen aus Variablen; `Theme::css()` leitet aus der Leuchtdichte des Papiers ab, ob das Schema dunkel ist und welches Rot dort steht (`--k-scheme`, `--k-error`, `--k-error-bg`, `--k-error-line`). Buttons dunkeln beim Überfahren in die Tinte statt in Schwarz. Neu: Druckstile – Menü, Einwilligung, Nach-oben und Formularknöpfe bleiben weg, Verweise zeigen ihre Adresse.
+
+**Betrieb.** Sicherung und Wiederherstellung auf MySQL/MariaDB über `mysqldump --single-transaction --result-file` und `mysql --execute=source`; damit laufen Archiv-Update und Rückweg auch dort. Der Git-Updater sichert über `Backup` (VACUUM INTO bzw. Dump) statt mit einer rohen Dateikopie und spielt beim Rückweg dieselbe Sicherung ein. Eine Sperre (`var/update.lock`, flock) hält den zweiten Klick und den Archiv-Weg neben dem Git-Weg fern. Das Archiv wird direkt in eine Datei geladen (`Download::toFile()`), nicht mehr als Zeichenkette in den Speicher. `public/.htaccess` wird zusammengeführt: eingeschaltete HTTPS- und HSTS-Zeilen bleiben eingeschaltet. Nach einem gelungenen Update räumt `finish()` `var/update/` (bis auf die zwei jüngsten) und die Zwischenspeicher früherer Fassungen auf. Der MySQL-Job der CI prüft jetzt Gesundheit, Sicherung und die Tests.
+
+**Editor.** Die Vorschau zeigt eigenes CSS, Bereichs- und Sektionsstile und Formulare mit ihren Farben – „sieht in der Vorschau anders aus“ ist keine Ausrede mehr. Kontaktdaten, Formular, verknüpfte Sektion und externer Inhalt sind direkt nach dem Einfügen gültig: leer heißt „noch nichts gewählt“, der Editor sagt es, die Website zeigt nichts. Der Server gibt nach dem Speichern die bereinigte Fassung zurück, und der Editor übernimmt sie als gespeicherten Stand (`EditorHistory.adopt()`), statt sie erst nach dem Neuladen zu zeigen.
+
+**Kleines.** `legal.label` ist auf 60 Zeichen begrenzt, die verrutschten Docblocks in `PageController` stehen an ihren Methoden.
+
+**Folgen.** `tests/BacklogTest.php` hält alles fest. Nicht gebaut: eine Wiederherstellung auf MySQL ohne `mysql`-Client (dann liegt der Dump zum Einspielen von Hand bereit), Druckstile für Beiträge mit Bildkopf.
+
+## ADR 103 – Arbeitspaket H zu Ende: Container, Einstellungen, Adressen, Vorlagen und Designpakete für Plugins (Designpakete zurückgenommen, ADR 105) – und warum es keine PHP-Hooks gibt (16.09.2026)
+
+Umut: „Dann mach H.“ Der erste Teil (ADR 102) brachte Manifest, Schalter und geprüfte Bausteine. Offen waren Container, Einstellungen, eigene Routen, Tabellen, Hooks und Templates.
+
+**Grundentscheidung: ein Plugin bleibt Manifest plus Twig.** Es bringt keinen PHP-Code mit. Das ist kein Zufall, sondern die Antwort auf zwei Punkte des Entwicklungsplans zugleich: Ein Plugin ohne PHP kann nicht als „sandboxed“ bezeichnet werden müssen, weil es gar nichts ausführt, was der Kern nicht ohnehin ausführt (Twig mit `strict_variables`, ohne Zugriff auf Datenbank, Anfrage oder Dateisystem). Und ein Update des Kerns kann ein solches Plugin nicht brechen, solange die vier Übergaben stehen – `props`, `settings`, `children`, `block`. Damit fallen zwei Wünsche des Plans bewusst weg: **Hooks** in Speichern und Veröffentlichen und **eigene Tabellen**. Beides braucht Code, der im Kern läuft. Wer das braucht, baut einen Kernbaustein (ADR 049) oder wartet auf einen dritten Teil mit einer echten Erweiterungsschnittstelle in PHP – dann mit der Ehrlichkeit, dass er Installationscode ist.
+
+**Container.** `"container": true` am Baustein, optional `"children": [Typen]`. Der Kern rendert die Kinder selbst – mit demselben Kontextbündel wie jeden Kernbaustein – und reicht sie der Vorlage fertig als `children`. So kommt eine Plugin-Vorlage nie an Formulare, Beitragslisten oder die Navigation. Beim Schreiben prüft `DocumentValidator`, dass ein Nicht-Container keine Kinder trägt und ein Container nur die erlaubten; der Editor spiegelt die Regel in `canContain`, also im Werkzeugkasten und beim Ziehen.
+
+**Einstellungen.** `"settings": {Schlüssel: Schema}` mit denselben sieben Arten wie Eigenschaften. Der Bildschirm „Plugins“ zeigt für jedes aktive Plugin ein Formular daraus; gespeichert wird in der neuen Spalte `plugin.settings` (Migration `20260916000100`), geprüft gegen das Schema wie eine Eigenschaft – aus einem Formular kommen Zahlen und Schalter als Text, das wird umgewandelt. Vorlagen und Adressen bekommen die Werte als `settings`, fehlende Schlüssel mit ihrer Vorgabe.
+
+**Eigene Adressen.** `"routes": {name: {path, template, type}}`. Der Pfad hat die Form einer Seite (Slugs, bis zu vier Ebenen) und darf nichts belegen, was der Kern beantwortet; die Antwortart ist eine aus html, json, text, xml. `PageController::page()` fragt die Registry, wenn es zu einem Pfad keine veröffentlichte Seite gibt – eine Seite geht also immer vor, die Adresse kommt vor Weiterleitung und 404. Die Vorlage bekommt `settings`, die Abfrageparameter (nur saubere Namen, gekürzt) und die Route; die Antwort trägt dieselben Schutzkopfzeilen wie jede Seite, kein Skript, bei allem außer html `noindex`. Ausgeschaltet: 404.
+
+**Seitenvorlagen.** `"presets": {name: {label, blocks}}` – fertige Bausteine, die der Editor als Ganzes einfügt, hinter den eingebauten Vorlagen mit demselben Knopf. Jedes Einfügen vergibt frische Kennungen; geprüft wird beim Speichern wie jedes Dokument. Ein Plugin kann so seinen Baustein gleich im passenden Abschnitt anbieten.
+
+**Designpakete.** *(Zurückgenommen in ADR 105 – es gibt sie nicht mehr.)* `"theme": {colors, fonts, base, buttons}` im Format des Designbereichs. „Designpaket übernehmen“ auf dem Bildschirm „Plugins“ ruft `Theme::save()` – dieselbe Prüfung wie beim Speichern unter Design, dieselben Fehler. Inhalte bleiben unangetastet; genau das ist die Abnahme des Plans („Templatewechsel erhält die Inhalte“), und der Test wechselt auf einer Seite mit Plugin-Baustein das Paket und vergleicht das Dokument davor und danach. Ein Plugin darf nur aus einem Designpaket bestehen (`plugins/nachtblau`); übernehmen geht nur eingeschaltet.
+
+**Referenz.** `plugins/vergleich` 1.1.0 hat jetzt Einstellungen (Standardbeschriftungen, Griff), einen Container „Vergleichsgalerie“ nur für Bildvergleiche, die Vorlage „Vorher-Nachher-Abschnitt“ und die Adresse `/vergleich/daten` (JSON mit den Einstellungen). `plugins/nachtblau` war das Designpaket und ist mit ADR 105 entfallen.
+
+**Folgen.** `docs/PLUGINS.md` beschreibt alles. Nicht gebaut und nicht geplant, solange Plugins ohne PHP bleiben: Hooks, Tabellen, Ressourcen in der Verwaltung, eigene Verwaltungsbildschirme.
+
+## ADR 102 – Das Pluginsystem, erste Fassung: Manifest, Schalter, geprüfte Bausteine (15.09.2026)
+
+Umut: „Plugin hätte ich gerne aber umgesetzt. Also Möglichkeit.“ Bis hierher gab es nur den Erhaltungsvertrag aus ADR 011: ein Baustein mit Namensraum wurde aufbewahrt, aber nie gerendert. Jetzt gibt es die Laufzeit dazu – Arbeitspaket H, erster Teil.
+
+**Ein Plugin ist ein Ordner.** `plugins/<name>/plugin.json` beschreibt Titel, Fassung, kleinste KantSites-Fassung und die Bausteine: je Baustein Beschriftung, Symbol, Twig-Vorlage, optional ein Stylesheet und ein Skript unter `assets/`, und ein Schema der Eigenschaften mit sieben Arten (Text, mehrzeilig, Zahl mit Grenzen, an/aus, Auswahl, Adresse, Bild aus der Mediathek). Der Typ des Bausteins ist `<plugin>.<baustein>` – dieselbe Form, die der Erhaltungsvertrag seit Schema v4 kennt. `PluginRegistry` liest die Manifeste bei jedem Aufruf (ein Dutzend Dateien, kein Cache nötig) und meldet ein kaputtes Manifest mit Grund statt es zu übergehen; ein solches Plugin lässt sich nicht einschalten.
+
+**Der Schalter liegt in der Datenbank.** Migration `20260915000100` legt `plugin` an (Name, aktiv, Fassung beim Einschalten, Zeitpunkt). Ob ein Plugin läuft, entscheidet die Installation, nicht der Code – und nicht eine Datei, die ein Update überschreiben könnte. Der Bildschirm „Plugins“ (Administrator) zeigt jeden Ordner mit seinen Bausteinen und schaltet ein und aus; ein ausgeschaltetes Plugin lässt seine Bausteine unangetastet in den Dokumenten (Erhaltungsvertrag wie bisher).
+
+**Der Kern prüft, die Vorlage vertraut.** Beim Schreiben eines Dokuments prüft `DocumentValidator` die Eigenschaften eines Plugin-Bausteins gegen das Schema – so streng wie bei einem Kernbaustein, aber nur, wenn das Plugin aktiv ist. Beim *Lesen* nicht (`validate(..., writing: true)` nur an den Schreibstellen): ein Plugin, das nach dem Speichern eingeschaltet oder geändert wurde, darf eine gespeicherte Seite nicht unlesbar machen. Dass unpassende Werte trotzdem nie in die Ausgabe gelangen, sichert der Renderer: `kant_plugin_props(block)` prüft beim Rendern erneut und liefert bei einem Fehler null – dann steht ein Kommentar statt des Bausteins. Die Vorlage bekommt genau vier Dinge: die geprüften `props`, `block` (für die `id`), `designClasses` und `editing`, dazu `kant_plugin_media()` für Bilder. Keine Datenbank, keine Einstellungen, keine Anfrage. Unbekannte Eigenschaften in einem gespeicherten Dokument werden ignoriert, damit ein Plugin eine Eigenschaft streichen kann.
+
+**Dateien nur dort, wo der Baustein steht.** `PageController` sammelt aus allen Dokumenten der Seite die Plugin-Bausteine und verlinkt ihre Stylesheets und Skripte (`/plugin-assets/<name>/assets/...?v=<Fassung>`); ein Skript schaltet die Richtlinie auf `script-src 'self'`, sonst bleibt sie bei `'none'`. `PluginAssetController` liefert nur Dateien aktiver Plugins unter `assets/` mit erlaubter Endung, mit Typ, `nosniff` und einem Jahr Haltbarkeit; Manifest und Vorlagen sind nicht erreichbar. Plugins liegen bewusst außerhalb von `public/`. In der Editorvorschau wird das Stylesheet geladen, das Skript nicht – wie bei eigenem Code.
+
+**Der Editor kennt die Bausteine aus dem Dokumentaufruf.** Der Editor-Endpunkt liefert mit dem Dokument die Definitionen der aktiven Plugins; `registerPlugins()` trägt Beschriftung, Symbol und Vorgaben ein und gibt ihnen die Gruppe „Erweiterungen“ im Werkzeugkasten. Das Eigenschaftenpanel entsteht aus dem Schema mit derselben Feldfabrik wie für Kernbausteine; ein Bild geht über die Mediathek. Ein Baustein, dessen Plugin fehlt, bleibt der bekannte Platzhalter. Design-Tokens (Abstände, Ausrichtung, Ecken) gelten jetzt auch für Plugin-Bausteine – die Klassen sind allgemein, die Prüfung lässt namensraumhaltige Typen durch.
+
+**Kein Sandkasten, und das steht so da.** Eine Plugin-Vorlage läuft mit den Rechten der Anwendung. Der Entwicklungsplan verlangt, das nicht anders zu nennen; der Bildschirm „Plugins“ sagt es dem Betreiber.
+
+**Referenzplugin „Bildvergleich“** (`plugins/vergleich`): zwei Bilder übereinander, ein Regler dazwischen – Beschriftungen, Startposition, Ecken als Eigenschaften, ein Stylesheet, ein Skript, das nur `--pos` über das CSSOM setzt (Inline-Stile bleiben durch die Richtlinie verboten). Ohne Skript steht der Vergleich bei der Startposition, das native Bereichsfeld bleibt bedienbar.
+
+**Updates.** Das Releasearchiv enthält `plugins/`; das Archiv-Update übernimmt den Ordner Datei für Datei wie `public/`, sodass mitgelieferte Plugins aktualisiert werden und ein selbst installiertes stehen bleibt.
+
+**Nicht in dieser Fassung:** Container-Bausteine, eigene Routen, Einstellungen, Tabellen, Hooks in Speichern und Veröffentlichen, Ressourcen in der Verwaltung, Templates (der zweite Teil von H). Anleitung für Entwickler: `docs/PLUGINS.md`.
+
+## ADR 101 – Formulare mit Schritten und Bedingungen: der Preisfinder ist ein Formular, kein Plugin (15.09.2026)
+
+Umut wollte für die DEEG-Website „kein Kontaktformular weiteres, sondern so ein ausgebautes Form“ – den Preisfinder der laufenden Website: erst die Objektart, dann Eckdaten je Objektart, dann Kontakt, zum Schluss eine Zusammenfassung. Und er fragte, ob das ein eigenes Plugin braucht.
+
+**Warum kein Plugin.** Ein Plugin ist in diesem CMS bis heute nur der Erhaltungsvertrag aus ADR 011: ein Baustein mit Namensraum wird gespeichert, im Editor als Platzhalter gezeigt und öffentlich als Kommentar ausgegeben. Registrierung, Laufzeit, Eigenschaftenpanel und Ressourcenladen sind Arbeitspaket H und nicht gebaut. Ein Preisfinder als Plugin hätte zuerst das ganze Pluginsystem gebraucht – und wäre dann eine Hülle um genau das, was der Formularbaukasten schon kann: Felder prüfen, speichern, verschicken, anzeigen. Wie bei der Beitragsseite (ADR 049) ist die Antwort ein Ausbau des Kerns. Ein Formular, das in Schritten fragt und Felder je nach Antwort zeigt, braucht jede Kundenwebsite.
+
+**Was dazukam.** Drei Feldtypen: Zahl (mit Unter-, Obergrenze und Einheit), Auswahl als Optionsfelder und Mehrfachauswahl. Ein Feld vom Typ „Neuer Schritt“ eröffnet einen Abschnitt: seine Beschriftung ist der Titel, sein Hilfetext die Einleitung, alle Felder bis zum nächsten Schritt gehören dazu. Jedes Feld und jeder Schritt kann eine Bedingung tragen (`showIf: {field, values}`): es gilt nur, wenn ein *früheres* Auswahlfeld einen der Werte hat. Und eine Einstellung „Zusammenfassung vor dem Absenden“.
+
+**Der Server entscheidet, nicht das Skript.** `FormRepository::check()` geht die Felder in Reihenfolge durch und merkt sich die gewählten Optionen; ein Feld hinter einer Bedingung, die nicht zutrifft, wird weder verlangt noch geprüft noch gespeichert – auch wenn der Browser einen Wert mitschickt. Ein Schritt hinter einer Bedingung nimmt seine Felder mit. Beim Speichern der Definition wird jede Bedingung geprüft: das Feld muss davor stehen, ein Auswahlfeld sein, und jeder Wert eine seiner Optionen – sonst könnte die Bedingung nie zutreffen, und ein Pflichtfeld dahinter wäre unerreichbar oder immer offen. Optionen dürfen kein Komma enthalten, weil die Verwaltung daran trennt und die Mehrfachauswahl damit gespeichert wird.
+
+**Ohne Skript vollständig.** Die Vorlage rendert Schritte als `fieldset` mit `legend`, Optionsfelder und Mehrfachauswahl als Gruppen, Zahlen als `type="number"` mit Grenzen; Bedingungen stehen als Datenattribute am Feld. Ohne JavaScript steht das ganze Formular auf der Seite, jeder Schritt ein Abschnitt, alles absendbar – der Server prüft ohnehin selbst. `form-steps.js` kommt nur auf Seiten, deren Formular Schritte, Bedingungen oder die Zusammenfassung hat (`FormRepository::needsScript()`), und die Richtlinie erlaubt es dann; es zeigt einen Schritt nach dem anderen mit Fortschritt, „Zurück“ und „Weiter“, prüft den aktuellen Schritt mit der Browserprüfung, deaktiviert Felder hinter nicht zutreffenden Bedingungen (deaktiviert, nicht nur versteckt – sie werden nicht gesendet und nicht geprüft) und baut als letzten Schritt die Zusammenfassung aus den geltenden Feldern mit „Ändern“ je Schritt. Nach einer Ablehnung durch den Server öffnet es den ersten Schritt mit einem Fehler. Eine Pflicht-Mehrfachauswahl trägt `required` nicht am Kästchen – das hieße „alle ankreuzen“ – sondern als `data-required` an der Gruppe; Skript und Server prüfen sie dort.
+
+**Bildauswahl.** Umut zeigte den Solar-Rechner von Elektro Bernhard: „Wieviele Personen leben im Haushalt“ als vier Bildkarten, die gewählte mit Rahmen. Optionsfelder und Mehrfachauswahl tragen dafür je Option ein Bild aus der Mediathek (`images: {Option: Kennung}`); sobald eine Option eines hat, rendert die Vorlage die Auswahl als Karten mit Bild und Text. Das native Kästchen bleibt in der Karte – sichtbar oben links, mit Fokusring auf der Karte –, damit Tastatur und Vorlesesoftware dieselbe Auswahl bedienen wie die Maus. Die Seite holt die kleinsten Fassungen aller Optionsbilder eines Formulars mit einer Abfrage (`PageController::optionImages()`); ein gelöschtes Bild lässt die Karte mit Text stehen. In der Verwaltung wählt man das Bild je Option aus einer Liste der Mediathek; ohne Skript ist es eine Zeile „Option = Kennung“.
+
+**Rückweg.** Bestehende Definitionen bleiben gültig: `present()` ergänzt fehlende Schlüssel (`min`, `max`, `unit`, `images`, `showIf`, `summary`), es gibt keine Migration. Ein Formular ohne Schritte und Bedingungen rendert wie zuvor und lädt kein Skript. Die Höchstzahl der Felder steigt von 25 auf 40; ein Preisfinder mit vier Objektarten braucht sie.
+
+**Folgen.** Die Editorvorschau zeigt Formulare weiterhin nicht (bekannter Rückstand). Der Preisfinder der DEEG-Website ist damit ein gewöhnliches Formular `bewertung` mit drei Schritten, 20 Feldern und Zusammenfassung, angelegt im Aufbauskript und in der Verwaltung ohne Skript bearbeitbar. Nicht gebaut: Bedingungen auf Zahlenbereiche oder mehrere Felder, Dateiuploads, ein Schritt-für-Schritt-Ablauf ohne JavaScript.
+
+## ADR 100 – Gesamtprüfung: Rollen wie versprochen, Installer bleibt zu, Einwilligung nur von hier (15.09.2026)
+
+**Anlass:** Umut wollte eine umfangreiche Prüfung – Fehler, Durchgängigkeit, Sauberkeit – und ausdrücklich die Frage, ob jemand ohne Administrator etwas verändern kann. Sechs getrennte Durchsichten (Backend, Betrieb, Editor, öffentliche Ausgabe, Dokumentation, Autorisierung jeder Route) lieferten rund sechzig Befunde; die mit Wirkung auf Sicherheit oder Bedienbarkeit sind umgesetzt, der Rest steht in STATUS als Rückstand.
+
+**Rollen.** Die Rollenhilfe versprach „Design, Einstellungen: Administrator“ und „Redakteur: nur Entwürfe“, der Code verlangte für Design, Einstellungen, Bereiche, Menüs und Formulare aber nur `ROLE_EDITOR` – ein Redakteur konnte Kopf und Fuß live umschreiben, die Empfängeradresse der Formulare ändern, die Website per `robotsExtra` aus dem Index nehmen. Entscheidung: der Code folgt der Hilfe. **Redakteur** = Entwürfe von Seiten und Beiträgen, Medien, Statistik, eigenes Konto. **Veröffentlicher** = dazu veröffentlichen, Bereiche (Speichern ist dort Veröffentlichen), Menüs, Formulare, Weiterleitungen, 404-Seite, Einstellungen lesen. **Administrator** = dazu Design, Unternehmensdaten samt Einwilligung und Spamschutz, Benutzer, System, Aufgaben, eigene Skripte, endgültiges Löschen. Die Navigation zeigt je Rolle nur, was sie öffnen darf; die Unternehmensdaten sind für Veröffentlicher ein Hinweis statt eines Formulars. `tests/EditorSecurityTest.php` hält die Grenze mit einer Tabelle „Rolle, Route, 403“ fest, dazu die Navigation eines Redakteurs und den Weg ohne Anmeldung.
+
+**Installer.** `Installation::isInstalled()` las jede Ausnahme als „nicht installiert“ – auch eine tote Datenbankverbindung. Bei einer Wartung des Hosters oder einem gedrehten Passwort stand der Installer offen, und jeder Besucher hätte eine eigene Datenbank samt Administratorkonto eintragen können. Jetzt zählt die Marke `var/installed` immer, eine fehlende Tabelle heißt „leer“, eine fehlende Verbindung heißt „gestört“, sobald eine Datenbank eingetragen ist. `tests/InstallationTest.php` prüft alle vier Lagen.
+
+**Einwilligung.** `/einwilligung` hat keine Sitzung und deshalb kein CSRF-Token; ein fremdes Formular konnte jedem Besucher „alles akzeptiert“ ins Cookie schreiben. Die Route liest jetzt `Sec-Fetch-Site`, ersatzweise `Origin`/`Referer`, und merkt sich nur Entscheidungen von dieser Website; ohne Herkunftsangabe (alte Browser) bleibt sie beantwortbar. Der Rücksprung akzeptiert nur Pfade, die weder mit `//` noch mit `/\` beginnen – Browser lesen beide als protokollrelativ.
+
+**Ausgabe.** JSON-LD wird mit `JSON_HEX_TAG|JSON_HEX_AMP` kodiert: ein `</script>` in Titel oder FAQ-Antwort hätte den Datenblock beendet und den Rest des Kopfes als Markup gerendert. Eigenes CSS erlaubt im verschachtelten Selektor kein Komma mehr (`&,body{…}` wurde zu `#id,body{…}`). Eine Fassung wiederherstellen prüft Skripte wie das Speichern. Das Archiv escaped alte Klartext-Bereiche wie die Seiten. Tabs und Bildbetrachter in Kopf, Fuß oder verknüpfter Sektion bekommen Skript und Richtlinie.
+
+**Betrieb.** `%env(resolve:…)%` las prozentkodierte Zugangsdaten (`p%40ss`) als Parameter – der Container brach nach dem Installer bei jeder Anfrage ab. Ein eigener Prozessor `projectdir:` ersetzt nur `%kernel.project_dir%` (`src/Infrastructure/ProjectDirEnvProcessor.php`); `MAILER_DSN` kommt ohne Prozessor aus. Das Sitzungscookie folgt der Adresse der Verwaltung (`cookie_path: '/%kant.admin_path%'`) – nach `cms:admin:path` war vorher keine Anmeldung möglich. Downloads bleiben auch über Weiterleitungen bei HTTPS. Der Befehlsläufer gibt Composer und Git ein Zuhause (`HOME`, `COMPOSER_HOME`, `APPDATA`) und sucht die PHP-Kommandozeile, weil `PHP_BINARY` unter php-fpm der Server selbst ist. Ein unerwarteter Fehler im Updater nimmt den Rückweg statt den Wartungszustand stehen zu lassen.
+
+**Editor.** `upgradeForType` hob das Schema auf die Fassung, in der ein Typ auftauchte, nicht auf die, die seine heutigen Eigenschaften brauchen – Menü (v16), Beitragsliste (v18) und Slider (v17) waren in älteren Dokumenten sofort ungültig. `controls()` gab nach jedem Speichern alle Knöpfe des Bedienfelds frei, auch die, die das Design-Bedienfeld bewusst gesperrt hatte („Gestaltung einfügen“ ohne Zwischenablage löschte die Gestaltung, „Als Vorlage speichern“ ohne Gestaltung löschte eine Vorlage gleichen Namens); jetzt merkt sich die Sperre, was sie geschlossen hat. „Ausrücken“ und ein Zug neben ein Element der obersten Ebene folgen denselben Regeln wie jeder andere Zug. Einfügen prüft das Ziel, bevor es das Schema hebt, sonst blieb bei einer Ablehnung ein leerer Verlaufsschritt. Ein Bild auf ein Akkordeon meldet sich statt zu werfen. Klartext unter v12 wird beim Öffnen nicht als HTML gelesen.
+
+**Bewusst nicht in diesem Schritt:** Archivseiten auf dieselbe Aufbaukette wie Seiten (eigene Stile von Kopf/Fuß, Schriften, Sektionen), Formulare und Beitragslisten in Bereichen, doppelte Block-IDs bei mehrfach verknüpften Sektionen, die zwei Breakpoints (650/767 px), feste Farbwerte in dunklen Paletten, MySQL-Sicherung, `.htaccess` als Betreiberdatei beim Archiv-Update, Wachstum der Release-Caches, Druckstile, Canonical blätternder Listen – Umfang und Risiko rechtfertigen je einen eigenen Schritt (Rückstand in STATUS).
+
+## ADR 099 – Mit oder ohne www entscheidet SITE_ORIGIN, nicht der Webserver (15.09.2026)
+
+**Anlass:** Umut: „URL sollte aus env kommen, www oder ohne, die Seite sollte dann darauf reagieren.“ Bis dahin stand die Umleitung auskommentiert in `public/.htaccess` und musste von Hand zur Einstellung `SITE_ORIGIN` passen (LIVEGANG, Punkt 3). Zwei Stellen für eine Entscheidung laufen auseinander – und dann nennt jede Seite in Canonical, Sitemap und Feed eine Adresse, die weiterleitet.
+
+**Entscheidung:** `SITE_ORIGIN` in `.env` ist die einzige Quelle. `CanonicalHostSubscriber` (`kernel.request`, Priorität 48, also vor Wartungszustand und Installer) vergleicht den Host der Anfrage mit dem von `SITE_ORIGIN` und schickt die jeweils andere Schreibweise – `example.de` ↔ `www.example.de` – mit 301 auf die eingetragene, mit Pfad und Abfrage, Schema und Port aus `SITE_ORIGIN`. Das gilt auch für die Verwaltung: ein Host, ein Sitzungscookie. Die Antwort trägt `Cache-Control: public, max-age=3600`, damit ein Browser die Umleitung behält, ohne dass eine Korrektur der Einstellung ein Jahr lang unsichtbar bliebe. Der www-Block in `.htaccess` ist weg; die Datei erklärt, wer es jetzt macht. `php bin/console cms:site:origin <adresse>` prüft (Schema, Host, kein Pfad) und schreibt die Einstellung, wie `cms:admin:path` es für die Verwaltung tut. Der Bildschirm „System“ zeigt die eingetragene Adresse, ihre Quelle und einen Hinweis, wenn die Verwaltung gerade unter einem anderen Host läuft. Seit 1.21.8 lässt sie sich dort auch ändern, wie die „WordPress-Adresse“: Das Feld schreibt über `Environment::write` in `.env`, aber erst nachdem `OriginCheck` die Installation unter der neuen Adresse erreicht hat (`GET /.well-known/kantsites-origin` liefert einen HMAC aus `APP_SECRET`). Eine Umstellung auf www ohne DNS oder Zertifikat würde sonst jede Seite samt Verwaltung ins Leere leiten. „Trotzdem übernehmen“ erscheint erst nach einer Ablehnung. Kommt `SITE_ORIGIN` aus der Server-Umgebung, gibt es kein Feld.
+
+**Bewusst nicht:** ein fremder Host wird nicht umgeleitet. Die Vorschauadresse des Hosters, eine IP-Adresse, `localhost`, eine Subdomain – alles bleibt erreichbar, auch wenn `SITE_ORIGIN` etwas anderes nennt. Sonst sperrte eine falsch eingetragene Adresse jeden aus, samt der Verwaltung, die man bräuchte, um es zu bemerken. Nur lesende Anfragen (GET, HEAD) werden umgeleitet: ein 301 macht aus einem POST ein GET und verwirft die Eingabe. Und HTTPS erzwingt die Anwendung nicht: hinter einem Proxy sieht PHP oft nur `http`, ohne konfigurierte vertrauenswürdige Proxys wäre das eine Schleife. Die drei Zeilen dafür bleiben in `.htaccess`, wo der Webserver die Verbindung wirklich kennt.
+
+**Folgen:** `tests/CanonicalHostTest.php` (Paar, Fremdhost, Schema, Port, Methoden, Priorität), `tests/SiteOriginCommandTest.php`, je ein Fall in `CmsTest` (durch den Kernel) und `SystemScreenTest` (Anzeige und Hinweis). Die Startkonfigurationen der lokalen Installationen setzen `SITE_ORIGIN` auf ihre `127.0.0.1:<port>`-Adresse und sind davon nicht betroffen.
+
+## ADR 098 – Spaltenbreiten einer Zeile durch Ziehen (15.09.2026)
+
+**Anlass:** Umut: „bei Rows die Breite ändern – am besten per Drag and Drop im Editor.“ Bis dahin gab es nur gleich breite Spalten: die klassische Vorgabe `columns` (one/two/three/four) und die freie Eigenschaft `gridColumns` erzeugten beide `repeat(n, minmax(0, 1fr))`. Ein Symbol neben einem Text – die Karte aus seinem Beispiel – brauchte eine schmale und eine breite Spalte.
+
+**Entscheidung:** Eine neue freie Stileigenschaft `columnWidths` am **Zeilenblock**, Typ `fractions`: bis zu zwölf Zahlen mit Leerzeichen, `2 1` oder `66.7 33.3`, je Gerät wie jede andere freie Eigenschaft (`StyleSchema::FRACTIONS`, Prüfung in `StyleCompiler::scalar()`, null ist ausgeschlossen). Die Anteile liegen an der Zeile und nicht an den Spalten, weil eine Grenze immer zwei Spalten zugleich verändert und die Reihenfolge der Kinder die Zuordnung ist. Kein neues Dokumentschema: die Eigenschaft fällt unter die freien Stile ab v10.
+
+**CSS.** `StyleCompiler::columnTracks()` schreibt je Gerät `#id{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}`. Zwei Feinheiten: Fehlende Anteile (eine später eingefügte Spalte) bekommen den Durchschnitt, überzählige fallen weg, also passt die Regel immer zur Kinderzahl. Und die Desktop-Regel trägt eine ID und würde die Klasse `.d-mobile-columns-one` schlagen, mit der ein Handy die Spalten stapelt – deshalb bekommt ein Gerät, dessen wirksame Aufteilung `one` (klassisch) oder `gridColumns` 1 ist, unter seiner Medienabfrage `minmax(0,1fr)`. Die Abfragen sind die des Stilcompilers (1024/767 px), nicht die 650 px der klassischen Klassen; zwischen 651 und 767 px stapelt eine Zeile mit Anteilen also, wo sie ohne Anteile noch zwei Spalten hätte. Das ist gewollt: Querformat-Handys sind Handys.
+
+**Editor.** `canvas-overlay.js` zeichnet für die gewählte Zeile – oder die Zeile um die gewählte Spalte – einen Griff auf jede Grenze zwischen zwei nebeneinander liegenden Spalten (`.ov-resize`, ein Knopf mit Beschriftung „Breite zwischen Spalte 1 und 2 ändern“). Ausgangswert ist die **gemessene** Breite der Spalten, nicht der gespeicherte Wert, damit der Griff auch bei geerbten oder klassischen Aufteilungen dort anfängt, wo die Spalten wirklich stehen. Während des Ziehens wird die Zeile im Vorschaudokument inline umgestellt (`grid-template-columns`), erst beim Loslassen entsteht **ein** Verlaufsschritt (`onResize` → `setStyle(row, device, 'columnWidths')`); die Vorschau lädt danach vom Server neu. Pfeiltasten verschieben um fünf Punkte und behalten den Fokus auf dem Griff über die Neuzeichnung hinweg. Kein Griff, wo die Spalten gestapelt sind, und keiner während ein Element gezogen wird. Im Design-Bedienfeld steht derselbe Wert als Textfeld „Spaltenbreiten“ (Layout, nur bei Zeilen), für alle, die lieber Zahlen tippen.
+
+**Verworfen:** Anteile je Spalte (`span` aus zwölf) wie in Flatsome – zwei Werte je Grenze zu pflegen und eine Summe, die 12 ergeben muss, sind für ein Drag-Ergebnis unnötig streng; Anteile summieren sich beliebig. Eine eigene Klasse je Verhältnis (`1-3`, `2-3`) – deckt genau die Fälle ab, die jemand vorhergesehen hat, und das Ziehen erzeugt jeden anderen.
+
+## ADR 097 – Der Einwilligungshinweis bekommt ein Gesicht, und der Nach-oben-Knopf weicht ihm aus (15.09.2026)
+
+**Anlass.** Umut gefiel das Banner nicht: nicht gestaltbar, ein kantiger Kasten in Papierfarbe. Und der Nach-oben-Knopf „funktionierte auf dem Handy nicht“ – er war ausgeblendet, solange die Frage offen stand, und auf dem Telefon bleibt sie das oft.
+
+**Gestaltung aus den Einstellungen, nicht aus dem Editor.** Der Hinweis ist kein Baustein einer Seite, sondern eine Frage der Website; seine Gestaltung gehört deshalb neben seinen Text unter Einstellungen → Einwilligung: Anordnung (`karte`, `leiste`, `ecke`), Form (`weich`, `rund`, `eckig`), Überschrift, vier Farben (Fläche, Schrift, Knopf, Schrift auf dem Knopf). Die Farben nehmen `#hex` oder `@schlüssel` aus der Palette wie der Nach-oben-Knopf; `Theme::cssColor()` löst beides für beide auf. Ausgegeben wird das als `:root{--kant-consent-…}` im gehashten Stylesblock (`Consent::styles()`), die Anordnung als Klasse. Die Form setzt zwei Radien zugleich – Fläche und Knöpfe gehören zusammen; zwei Regler dafür wären zwei, die man gegeneinander verstellt. Leer heißt weiterhin Papier, Tinte und Akzent des Themes.
+
+**Was gleich bleibt, mit Absicht.** „Nur notwendige“ bleibt ein Rahmenknopf in der Schriftfarbe, genauso groß wie „Alle akzeptieren“, in derselben Zeile – die Farbe des Knopfes ist einstellbar, die Gleichwertigkeit der Antworten nicht. Kein Skript, keine Cookie-Wand.
+
+**Archiv und Einwilligungsseite.** Beide trugen bisher keine Palette im Kopf. Sie bekommen jetzt Theme- und Hinweisvariablen als gehashten Stylesblock; die Einwilligungsseite erweitert ihre Richtlinie um genau diesen einen Hash.
+
+**Der Nach-oben-Knopf.** Statt `display:none` bei offener Frage setzt er sich per Ankerpositionierung auf die Oberkante der Leiste (`anchor-name`, `bottom:calc(anchor(top) + 12px)`), wo sie die Ecke abdeckt: bis 799 px bei der Karte, auf jeder Breite bei Leiste und Ecke (`:has()`). Browser ohne Ankerpositionierung blenden ihn dort weiter aus. Damit die Leiste als Anker taugt, steht sie in `page.html.twig` vor dem Knopf. Der reservierte Abstand unten wächst auf 320 px bis 620 px, weil die Leiste dort mit Standardtext bis 290 px hoch ist.
+
+## ADR 096 – Schriften ausschließlich vom eigenen Server (15.09.2026)
+
+**Entscheidung.** Die Ausgabe verlinkt kein Stylesheet von `fonts.googleapis.com` mehr, in keinem Pfad. Liegen die Schriftdateien lokal, liefert die Website sie selbst; liegen sie nicht vor, zeigt sie die eingestellte Ersatzschrift. `Theme::googleFontsUrl()` entfällt, und die Richtlinien nennen keinen fremden Schrifthost mehr – öffentlich `font-src 'self'`, in der Verwaltung zusätzlich `style-src 'self'`. Das Herunterladen der Dateien bleibt, wo es hingehört: ein Knopf im Designbereich beziehungsweise `cms:fonts:fetch`, einmalig und von einem Menschen ausgelöst.
+
+**Warum.** ADR 037ff. hatten den Verweis auf Google als ausdrückliche Entscheidung Umuts stehen lassen, mit dem Selbsthosten als offenem Weg. Seit die Dateien lokal liegen können, ist der Rückfallpfad nur noch eine Falle: er greift genau dann, wenn niemand hinsieht, und gibt dann die IP-Adresse jedes Besuchers an einen Dritten weiter (LG München I, 3 O 17493/20). Vor allem betraf er die Editorvorschau, die `googleFonts` und **kein** `localFonts` bekam und die Schriften deshalb bei jedem Aufruf von Google holte – auf dem Bildschirm, an dem am meisten gearbeitet wird.
+
+**Folge.** Eine Installation, deren Schriften fehlen, sieht anders aus als vorher: Ersatzschrift statt Wunschschrift. Das ist beabsichtigt und sichtbar gemacht – der Designbereich nennt die fehlenden Schnitte, und seit derselben Fassung sagt es ein Hinweisstreifen auf jedem Verwaltungsbildschirm mit dem Knopf daneben. Ein stilles „lädt halt von Google“ wäre die schlechtere Überraschung.
+
+**Und das Vorabholen.** Es holte je Familie die ersten zwei Schnitte. Das Kant-IT-Theme nennt Lato 400, 700 und 900, die Überschriften stehen auf 800/900 und landen damit auf dem einzigen Schnitt ohne Vorabholen: er lud erst nach dem Stylesheet, und `font-display:swap` tauschte die Überschrift sichtbar. Jetzt wird jeder Schnitt des Themes vorab geholt, im lateinischen Grundbereich, und die Verweise stehen vor dem Stylesheet. Gemessen: alle Dateien sind vor dem ersten Zeichnen da.
+
+## ADR 095 – Öffnungszeiten, Einsatzgebiet und FAQ in den strukturierten Daten (14.09.2026)
+
+`LocalBusiness` nannte Name, Adresse, Telefon, E-Mail und Profile – nicht, wann jemand erreichbar ist und wo er arbeitet. Beides sind Angaben der Website, nicht einer Seite, deshalb stehen sie in den Einstellungen: `openingHours` als Liste `{day, opens, closes}` je Wochentag (Formular: sieben Zeilen mit Uhrzeitfeldern, leer heißt geschlossen; geprüft als `HH:MM`, Schließen nach Öffnen) und `areaServed` als Liste von Ortsnamen (ein Ort je Zeile, höchstens vierzig). `organisation()` fasst Tage mit gleichen Zeiten zu einer `OpeningHoursSpecification` zusammen – Mo–Fr 07:30–17:00 ist eine Angabe, nicht fünf – und gibt `areaServed` als Namensliste aus. Der Text auf der Website bleibt davon unabhängig; niemand soll zwei Wahrheiten pflegen müssen, aber das CMS erzwingt keine.
+
+Eine FAQ ist dagegen Inhalt einer Seite. Ein Akkordeon ist nicht automatisch eine – die Kennzeichnung `props.faq` (Schema v23, Kästchen „Als FAQ auszeichnen“) macht aus den Einträgen Frage-Antwort-Paare einer `FAQPage`: Titel als Frage, die Textbausteine des Eintrags ohne Auszeichnungen als Antwort; Einträge ohne Text fehlen. Nur was sichtbar auf der Seite steht, steht auch in den Daten – Google verlangt genau das, und eine erfundene Antwort im Markup wäre der schnellste Weg zu einer Abstrafung. Kein Datenbankwechsel; beide Einstellungen fallen auf leere Listen zurück, das Akkordeon ohne Kennzeichnung bleibt ein Akkordeon.
+## ADR 094 – Drei Symbole mehr, ein Menü-Knopf mit eigener Gestalt, ein Nach-oben-Knopf ohne Scroll-Animation (14.09.2026)
+
+**Symbole.** Der Satz hatte vierzehn Zeichnungen und keine für Menschen, Musik und Haus – drei Bilder, die eine Pflege- oder Vereinsseite als erstes braucht. Sie kommen als `people`, `music` und `home` hinzu, gezeichnet im selben Strich, weiter als reine Pfadangabe in `blocks/icon.html.twig`. Kein Schemawechsel: `ICONS` ist eine Werteliste, kein Bausteintyp; ein Dokument mit einem neuen Namen ist für ältere Fassungen ungültig, was für Werte dieser Art im Projekt bereits gilt. Ein Test hält Liste und Zeichnungen zusammen, denn ein fehlender Pfad ergibt ein leeres `<path d="">`: unsichtbar, ohne Fehlermeldung.
+
+**Die Farbe des Symbolbausteins.** Das eingebettete SVG trägt dieselbe Klasse `block-icon` wie seine Hülle und setzte damit `color:var(--accent)` erneut – eine am Block eingestellte Farbe erreichte die Zeichnung nie, und beide bisherigen Nachbauten haben sie mit eigenem CSS überschrieben. `.block-icon .block-icon{color:inherit}` löst es an der Wurzel und trifft ausschließlich das Paar aus Hülle und Zeichnung; Symbole in Karten, Kontaktangaben und Menüs liegen nicht ineinander und bleiben unberührt.
+
+**Der Menü-Knopf.** Er ist kein eigener Baustein, sondern der Knopf im Menüblock, und war bisher unveränderlich: Striche plus „Menü“, Rahmen in der Textfarbe, 8 px Ecken. Seine Beschriftung wird zu einer Eigenschaft (`burgerLabel`: `both`, `text`, `icon`) – „Nur Symbol“ behält den Namen als `visually-hidden`, denn ein Knopf ohne Namen ist für Vorlesesoftware ein Knopf ohne Zweck. Seine Farben werden zu freien Blockstilen der neuen Gruppe `menu` mit dem Ziel `burger`, wie `img` beim Bild und `controls` beim Slider: der Compiler schreibt `#id .menu-burger>summary{…}`. So bleibt die Gestaltung dort, wo jede andere Gestaltung liegt, statt eine zweite Einstellungsart zu erfinden.
+
+**Das aufgeklappte Menü im Kopfbereich.** Das `details` klappte inline auf, also innerhalb der schmalen Spalte neben der Marke, und schob den Kopf auseinander; auf dem Telefon sah es aus, als fehle das Menü. Im Kopfbereich – und nur dort, erkennbar an `.site-header` – liegt die geöffnete Fläche jetzt absolut unter dem Kopf über die volle Breite. Außerhalb des Kopfbereichs bleibt es beim Aufklappen im Fluss, weil ein Menü in einer Sektion keinen positionierten Anker hat, auf den es sich verlassen könnte.
+
+**Der Nach-oben-Knopf.** Er blendete sich über `animation-timeline: scroll(root)` ein, abgesichert mit `@supports`. Ein Browser, der die Eigenschaft kennt, die Zeitachse aber nicht ausführt, besteht die Abfrage und lässt den Knopf im ersten Bild der Animation stehen – bei `animation-fill-mode: both` heißt das dauerhaft unsichtbar. Statt einer Fähigkeitsabfrage entscheidet jetzt eine Klasse: `scrolled.js` setzt `kant-top-armed` sofort und `kant-top-shown` ab der eingestellten Entfernung, das Stylesheet blendet zwischen beiden Zuständen über. Ohne Skript bleibt der Knopf sichtbar – erreichbar ist besser als unsichtbar –, und das Skript wird jetzt auch geladen, wenn nur der Knopf es braucht.
+
+## ADR 093 – Soziale Profile: einmal gepflegt, überall gezeigt (Dokumentschema v23, 14.09.2026)
+
+Ein Link zu Instagram im Fuß, derselbe im Kopf, ein dritter in der Kontaktsektion – bisher wären das drei von Hand gesetzte Symbol-Links, und eine geänderte Adresse hätte drei Stellen zu finden. Deshalb gehören die Profile zur Website, nicht zur Seite: `SiteSettings` führt unter `social` je Netzwerk eine HTTPS-Adresse (`SocialProfiles::NETWORKS`, feste Liste, weil jedes Netzwerk ein gezeichnetes Symbol braucht), gepflegt unter Einstellungen → Unternehmensdaten. Der Baustein `social` (v23) trägt nur die Darstellung: Größe aus `ICON_SIZES` als Klasse, Form (Symbol, runde oder eckige Fläche), Anordnung, Beschriftung an oder aus, optional eine Teilmenge der Netzwerke und `newTab`. Farbe, Abstand und Ausrichtung kommen aus den freien Blockstilen wie überall. Die Vorlage liest die Profile über das Twig-Global `siteSettings`, darum braucht die Rekursion in `block.html.twig` keine neue Durchreichvariable. Ohne eingetragene Profile gibt der Block auf der öffentlichen Seite nichts aus und zeigt im Editor einen Hinweis, wo sie einzutragen sind. Die Adressen stehen zugleich in `sameAs` der strukturierten Daten – dieselbe Aussage, ohne zweite Pflege. Symbole sind eigene Umrisszeichnungen im Strich des vorhandenen Symbolsatzes, keine Markenbilder und keine fremde Datei. Kein Datenbankwechsel: `social` ist ein Schlüssel im Einstellungs-JSON und fällt auf eine leere Liste zurück.
+
+## ADR 092 – Der Kopfbereich kennt einen gescrollten Zustand (14.09.2026)
+
+Der transparente Header aus Flatsome ist zwei Dinge: ein Kopf, der über der ersten Sektion liegt, und Farben, die sich beim Scrollen ändern. Beides bleibt getrennt. Das Schweben ist eine Website-Einstellung (`headerOverlay` → `.site-header.is-overlay`, absolut, mit „oben halten“ fixiert), weil es das Layout jeder Seite betrifft. Die Farben sind Gestaltung des Kopfbereichs: neben `hover` gibt es je Gerät einen Block `scrolled`, beschränkt auf Farben, Schatten und Deckkraft (`StyleSchema::scrollable()`) – ein Kopf, der beim Scrollen wächst, würde die Seite unter dem Finger verschieben. Der Compiler gibt `html.is-scrolled #id{…}` plus einen Übergang aus; ein Skript von zehn Zeilen setzt die Klasse ab 40 px und wird nur geladen, wenn der Kopfbereich solche Werte hat, damit Seiten ohne sie ihre strenge Skriptrichtlinie behalten. Ohne Skript gilt der normale Zustand, eine lesbare Seite. Das Design-Panel zeigt die Zeilen „beim Scrollen“ nur im Kopfbereich, weil sie nur dort etwas bewirken; die Editor-Vorschau setzt die Klasse beim Scrollen selbst, da sie kein Skript ausführt. Kein Schemawechsel: `scrolled` ist ein optionaler Schlüssel, alte Dokumente bleiben gültig.
+
+**Kartenhöhen.** Die Stapelabstände `.block-iconcard + .block-iconcard` (und Zitat/CTA) galten auch im Raster einer Zeile; dort liegt der Rand im Rasterfeld und macht jede Karte außer der ersten um 18 px niedriger. Die Abstände bleiben für Spalten, in `.block-row` werden sie auf null gesetzt – das Raster hat sein eigenes `gap`.
+
+## ADR 091 – Eine Seitenleiste wie im Flatsome UX Builder; Bewegung spielt, bis die Website etwas anderes sagt (14.09.2026)
+
+**Editor.** Drei Panels nebeneinander – Werkzeugkasten und Struktur links, Vorschau, Eigenschaften rechts – zeigten immer alles und damit nichts; Umut fand sich nicht zurecht, im Flatsome UX Builder schon. Der Editor übernimmt dessen Rhythmus: eine Seitenleiste, die genau eine Sache zeigt. Reiter für Elemente, Struktur und Seite; ein gewähltes Element öffnet seine eigene Ansicht mit Name, Pfad, den drei Eigenschaftenreitern und den Aktionen am Fuß und gibt sie beim Abwählen wieder frei. Die Reiter bleiben dabei erreichbar, damit Bibliothek und Baum einen Klick entfernt sind. Die Struktur wählt beim Klick nur aus und öffnet erst über „Bearbeiten“; sonst verschwände der Baum bei jedem Schritt. Rechtsklick in der Vorschau öffnet ein Kontextmenü im Editor-Dokument, dessen Position einmal aus Rahmen und Maßstab umgerechnet wird. Tastenkürzel gelten auch, wenn der Fokus in der Vorschau liegt: derselbe Handler hängt am Fenster und an jedem Vorschau-Dokument. Die Auswahl scrollt nur das Vorschau-Fenster, nicht per `scrollIntoView` – das zog das Editor-Dokument mit und schob die Kopfzeile aus dem Bild. Die verstellbaren Panelbreiten entfallen; eine feste Leiste ist der einfachere Vertrag. Bestehende IDs (`#library`, `#structure`, `#properties`, `#preview`, `#save-status` …) bleiben, die Browserprüfung wechselt die Ansicht über Helfer statt über versteckte Elemente zu klicken.
+
+**Bewegung.** Bisher entschied allein die Browservorgabe `prefers-reduced-motion`, und die meldete Umuts Chrome als aktiv, ohne dass er sie gesetzt hatte; andere Websites bewegen sich bei ihm, weil sie die Vorgabe ignorieren. Die Entscheidung gehört der Website: Einstellung `motion` mit `always` (Standard, Flatsome-Verhalten) und `respect`. Der Server druckt bei `respect` die Klasse `motion-respect` auf `<html>`; `motion.js` und `slider.js` fragen `Klasse && Vorgabe`, das CSS schreibt die Hover-Fahrten unbedingt und nimmt sie in einem Überschreibblock `@media (prefers-reduced-motion: reduce) { html.motion-respect … { transform: none; transition: none } }` zurück – Farben und Schatten bleiben, nur die Fahrt fällt weg. Einblendungen verstecken einen wartenden Block per Inline-`opacity:0` (nur mit Skript, nur wenn Bewegung erlaubt ist) und blenden ihn mit `fill: backwards` von unsichtbar ein; ein `scroll`-Handler zeigt sofort, was oberhalb des Bildes liegt, weil ein Sprung per Sprungmarke oder Wiederherstellung sonst Blöcke dauerhaft unsichtbar ließe. Beim Abschalten (Präferenzwechsel unter `respect`, Editor-Stopp) werden alle versteckten Blöcke wieder eingeblendet. Barrierefreiheit: Einblendungen dauern unter einer Sekunde, blinken nicht und lassen sich per Einstellung an die Vorgabe binden; Lighthouse misst diese Vorgabe nicht. Kein Schema- und kein Datenbankwechsel: `motion` fällt bei fehlendem Wert auf `always` zurück.
+
+## ADR 090 – Releasecache bleibt für laufende Updateanfragen erhalten (14.09.2026)
+
+Der echte HTTP-Updatepfad von 1.10.0 nach 1.10.1 reproduziert Umuts 500 auf `/admin/system/archiv`: Die Dateien sind bereits erfolgreich ersetzt, dann entfernt `ArchiveUpdate` den gesamten `var/cache`. Symfony lädt beim Abschluss weitere Dienste aus dem kompilierten Container nach und findet deren PHP-Dateien nicht mehr. Eine frische Installation und isolierte Updater-Rückgabewerte decken diesen Fehler nicht ab.
+
+Der Kernel verwendet deshalb `var/cache/<Umgebung>/release-<SHA256-Präfix von VERSION>`. Er merkt sich diesen Pfad pro Kernelinstanz, damit das Überschreiben von VERSION während der Anfrage ihren Cachepfad nicht ändert. Der Archiv-Updater löscht keinen Cache mehr; die folgende Anfrage startet mit dem eigenen Container- und Twigcache der neuen Version. Alte Cacheverzeichnisse bleiben absichtlich erhalten. Sie können bei gestoppter Anwendung entfernt werden, nicht während eines laufenden Updates. Keine Datenmigration; ein Downgrade verwendet wieder den zu seiner Fassung gehörenden Cache und kann ihn bei Bedarf über die Konsole erneuern.
+
+**Übergang:** Ein bereits installierter Updater bis einschließlich 1.10.1 führt noch seinen alten Löschcode aus, auch wenn er 1.10.2 installiert. Dieser Updateaufruf kann einmalig weiterhin mit 500 enden. `/admin/system` direkt öffnen und die angebotenen Migrationen abschließen; die Marke in `var/update/offen.json` erhält den Fortschritt. Die Reparatur verhindert den Abbruch bei nachfolgenden Updates aus dem korrigierten Stand. Kein Erfolg der Produktionsmigrationen wird ohne Prüfung behauptet.
+
+**Regression:** `scripts/archive-update-check.mjs` installiert zwei vollständige Releasearchive in einem eigenen Verzeichnis und prüft den echten HTTP-POST, Wartungszustand, Weiterleitung, erhaltene Sitzung, Systemseite, Migrationsabschluss, Sicherung und öffentliche Ausgabe. Nur der Downloadtransport wird auf das lokale Zielarchiv umgestellt. `UPDATE_SOURCE_VERSION` erlaubt eine ausdrücklich synthetische vorherige Versionsnummer auf dem korrigierten Paket, um dessen nächsten Updateaufruf vor einem weiteren Release zu prüfen. Die Original-Pilotdatenbank bleibt unverändert.
+
+## ADR 089 – Formularaktionen nutzen den Website-Standardbutton (14.09.2026)
+
+Der öffentliche Absenden-Button erhält dieselbe Klasse `cms-button` wie normale Buttonblöcke. Die bisherigen formularspezifischen Farb- und Hover-Regeln entfallen; die bereits vorhandenen Theme-Variablen bestimmen Form, Darstellung, Größe, Schrift und Farben. `justify-self:start` verhindert das implizite Strecken durch das Formular-Grid. Es werden keine Designwerte in Formulardefinitionen kopiert: spätere Änderungen am Website-Standard wirken auch auf vorhandene Formulare. Nativer Submit-Typ, Beschriftung, Fokus, Validierung und Versand bleiben erhalten. Keine Daten-/Schemamigration; ein Code-Rückweg stellt das frühere Sonderdesign wieder her.
+
+## ADR 088 – Gerätesichtbarkeit und automatische Hamburger-Navigation (14.09.2026)
+
+`layout.visibility` enthält optional eine feste Auswahl: `all`, `desktop`, `tablet`, `mobile`, `hide-desktop`, `hide-tablet`, `hide-mobile`, `hidden`. Fehlend bedeutet überall sichtbar. Die Bedienidee wurde anhand der lokalen Flatsome-Dateien `inc/builder/shortcodes/commons/visibility.php` und `template-parts/header/header-main.php` geprüft; kein Fremdcode oder Asset wurde übernommen. Die Sichtbarkeit steht in allen Eigenschaftsansichten direkt am Element und wird im Strukturbaum benannt. Ausgeblendete Elemente bleiben dort auswählbar. Änderungen verwenden dieselbe History, Entwurfsspeicherung und Veröffentlichung wie andere Blockwerte.
+
+Vorschau und Öffentlichkeit verwenden dieselben CSS-Klassen. `display:none!important` entfernt ausgeblendete Elemente aus Layout, Tastaturreihenfolge und Accessibility Tree, ohne ihre eigenen Flex-/Grid-/Display-Werte umzuschreiben. Die Grenzen folgen dem bestehenden freien StyleCompiler: Mobil bis 767 px, Tablet 768–1024 px, Desktop ab 1025 px. Die Sichtbarkeit eines Elternbereichs gilt damit auch für seine Kinder. Wrapper von Logos, Tablinks und Sliderfolien erhalten dieselbe Auswahl; Tabs und Slider überspringen ausgeblendete Einträge bei der Bedienung. Sichtbarkeit entfernt Inhalte nicht aus dem HTML und ist keine Zugriffskontrolle.
+
+Waagerechte Menüblöcke wechseln standardmäßig bis 1024 px sowie bei `hover:none` und `pointer:coarse` zum Hamburger. Das umfasst auch große iPads ohne Maus bei mehr als 1024 CSS-Pixeln; es gibt keine User-Agent-Erkennung. `props.collapse` erlaubt `tablet` (Standard), `mobile` (nur bis 767 px) und `never`. Bewusst vertikale Menüs bleiben vertikal, explizite Burger bleiben aufklappbar. Die Automatik wirkt auch auf bisherige waagerechte Menüs ohne neue Speicherung. Bereits separat angelegte Menüblöcke bleiben eigenständige Elemente und können mit der neuen Sichtbarkeit zugeordnet werden.
+
+Die aufgeklappte Navigation verwendet native `details`/`summary` und benötigt kein öffentliches JavaScript. Der gemeinsame Menübaum wird für die breite und die aufklappbare Darstellung ausgegeben; CSS zeigt genau eine Variante, die andere fehlt auch in der Fokusreihenfolge. Das kostet etwas zusätzliches HTML, vermeidet aber eine skriptabhängige Navigation. Der Summary-Name bleibt „Menü“, der Browser vermittelt den Öffnungszustand. Im Editor wird der Öffnungszustand nur in der Vorschau umgeschaltet und nicht gespeichert.
+
+**Migration:** Schema 22 wird beim ersten Setzen einer neuen Sichtbarkeits- oder Hamburger-Option verwendet. Bestehende Dokumente bleiben unverändert lesbar; keine SQL-Migration. Der Validator weist unbekannte Werte und neue Optionen in alten Schemata ab.
+
+**Rückweg:** Vor einem Downgrade sichern. Schema-22-Dokumente exportieren, rekursiv `layout.visibility` und bei Menüs `props.collapse` entfernen, `schemaVersion` auf 21 setzen, mit dem alten Validator prüfen und importieren; alternativ die vorherige Sicherung wiederherstellen. Damit entfallen die neuen Gerätebeschränkungen und die automatische Umschaltung. Layout, Inhalt und stabile IDs bleiben erhalten.
+
+## ADR 087 – Button-System, benannte Sprungziele und Menübedienung (14.09.2026)
+
+Globale Button-Vorgaben liegen optional unter `theme.buttons`; Vorschau und öffentliche Ausgabe verwenden dasselbe kleine CSS-System mit Geräteklassen. Lokale Varianten stehen getrennt von Inhalt und freien Styles in `layout.button.<Gerät>`. Vorlagen ändern Form/Darstellung, erhalten Text, Link und Abstände und entfernen kollidierende freie Werte nur für die betroffene Einstellung am aktiven Gerät. Verbleibende eigene Styles können Varianten übersteuern. Die Bedienidee orientiert sich an der lokal bereitgestellten Flatsome-Button-Konfiguration (`inc/builder/shortcodes/button.php`); Implementierung und Assets wurden nicht übernommen.
+
+Benannte `anchor`-Werte sind nur an Sektion, Zeile und Spalte erlaubt und werden gegen alle Block-IDs, andere Ziele und reservierte IDs geprüft. Ein zusätzliches Zielelement erhält den Namen; die stabile Block-ID bleibt erhalten. Duplizieren entfernt benannte Ziele aus der Kopie. Native Fragmentlinks funktionieren ohne öffentliches JavaScript.
+
+Menüeinträge speichern optionale `icon`- und `iconPosition`-Werte aus der bestehenden SVG-Allowlist. Drag-and-drop verwendet denselben Baum und Undo-/Speicherweg wie Tastaturbefehle; Unterpunkte reisen mit dem Hauptpunkt. Die Versionsanzeige liest nur das vorhandene Ergebnis des täglichen Update-Workers. Dadurch entstehen beim Öffnen von Adminseiten keine zusätzlichen externen Anfragen.
+
+**Migration:** Validator und Editor unterstützen Schema 21 zusätzlich zu bisherigen Fassungen. Erst eine neue Button-Variante oder ein Sprungziel hebt das bearbeitete Dokument auf 21; vorhandene Dokumente werden nicht pauschal umgeschrieben. Globale Buttons und Menü-Icons sind optionale Konfigurationsfelder, keine SQL-Migration.
+
+**Rückweg:** Vor einem Downgrade eine Sicherung erstellen bzw. die Sicherung vor 1.9.0 wiederherstellen. Alternativ Schema-21-Dokumente exportieren, `anchor` und `layout.button` rekursiv entfernen und die Fassung auf 20 setzen, anschließend mit dem alten Validator prüfen/importieren. Alte Software kennt die neuen Konfigurationsfelder nicht; globale Button-Vorgaben/Icons gegebenenfalls aus der Sicherung entfernen, sie können beim alten Speichern verloren gehen. Sprunglinks auf entfernte Ziele müssen angepasst werden.
+
+## ADR 086 – Bildausrichtung berücksichtigt Rahmen, Bild und Layoutachse (14.09.2026)
+
+`align-self` allein hat in normalen Inhaltsbereichen keine Wirkung. Ein prozentual schmaler Bildrahmen blieb links; bei voller Rahmenbreite konnte zusätzlich das kleinere Bild im Rahmen links stehen. Der Browserfall mit einem 50-Prozent-Bild in einer gepolsterten Spalte reproduzierte die Abweichung trotz ausgewählter Mitte.
+
+Der gemeinsame StyleCompiler ergänzt bei Bildern mit eigener Ausrichtung horizontale Außenabstände am Rahmen und am enthaltenen Bild sowie `justify-self` für Raster. Verlinkte und vergrößerbare Bilder werden über dasselbe innere Bild erreicht. In horizontalen Flex-Gruppen bleiben die Außenabstände am Rahmen erhalten: Dort wirkt die vorhandene Einstellung auf der vertikalen Querachse und soll die horizontale Verteilung nicht verändern. Sektionen, Akkordeon-Einträge und Slider haben innere Inhaltswrapper, deren Blockfluss berücksichtigt wird.
+
+Bild- und Elterneinstellungen werden je Gerät geerbt. Änderungen der Flexrichtung werden deshalb auch bei unverändertem Bildwert wirksam. Auto, Strecken und Grundlinie entfernen die zusätzliche horizontale Bildausrichtung und stellen die jeweiligen selbst gesetzten Außenabstände wieder her. Originalmaße, Bildquellen, Bildbreite, Beschriftungen und Links werden nicht umgeschrieben. Beliebiges benutzerdefiniertes CSS kann diese Layoutannahmen weiterhin überschreiben.
+
+**Migration und Rückweg:** Keine Änderung am Dokument- oder Datenbankschema. Bestehende gespeicherte Ausrichtungswerte werden beim Rendern korrigiert, ohne erneutes Speichern. Vorschau und öffentliche Ausgabe verwenden denselben Compiler; kein zusätzliches öffentliches JavaScript. Ein Rückweg auf 1.8.3 erhält alle Daten, zeigt jedoch dessen bisherige Ausrichtung.
+
+## ADR 085 – Akkordeon-Inhalte sind im Editor direkt zugänglich (14.09.2026)
+
+Die bisherige Vorschau verhinderte Standard-Klickaktionen einschließlich des Öffnens von `<details>`. Einträge mit `props.open: false` blieben deshalb geschlossen; für leere Akkordeon-Einträge fehlten zusätzlich die Einfügehilfen. Ein Browserfall reproduzierte den geschlossenen Zustand nach Anklicken des Titels.
+
+`preview-containers.js` öffnet Akkordeon-Einträge ausschließlich im Vorschau-DOM. Leere Einträge zeigen eine Einfügefläche, gefüllte Einträge eine Schaltfläche zum Anhängen weiterer Inhalte. Eine eigene Aktion am Akkordeon legt Einträge an, auch wenn es vollständig leer ist. Die rechte Inhaltsansicht listet Einträge mit ihren Titeln und bietet dieselben Aktionen. Neu eingefügte Akkordeons wählen ihren ersten Eintrag und den Inhaltsbereich; Struktur und Struktursuche berücksichtigen Titel.
+
+Die Modellauswahl eines Akkordeons erlaubt direkt nur neue Einträge. Texte und andere Inhalte erfordern die Auswahl des Eintrags, damit sie nicht unbemerkt außerhalb des Akkordeons landen. Der gesonderte Befehl für neue Sektionen auf Seitenebene bleibt erhalten. Explizite Einfügepunkte und Drag-and-drop verwenden weiterhin die bestehenden Eltern-/Kindregeln; „Inhalt hinzufügen“ hängt innerhalb des angesprochenen Eintrags an.
+
+**Migration und Rückweg:** Kein Schemawechsel und keine Datenmigration. Öffnungszustand, Kinder, IDs und Reihenfolge bleiben normale Blockwerte. Vorschauhilfen werden nie gespeichert; die öffentliche Ausgabe und deren native Tastatur-/Mausbedienung bleiben unverändert. Älterer Code kann die Daten weiterhin lesen, zeigt jedoch wieder die bisherige eingeschränkte Vorschau. Alle Inhaltsänderungen laufen über den vorhandenen Undo-/Speicher-/Veröffentlichungsweg.
+
+## ADR 084 – Visuelle Palettenauswahl im Editor (14.09.2026)
+
+Alle Farbfelder des Designbereichs verwenden `color-control.js`: kompakte Vorschau mit Farbnamen und aufgelöstem Hexwert, aufklappbare Farbkacheln, nativer Farbwähler und validierte Hexeingabe. `@key` wird nur für die Darstellung aufgelöst; die gespeicherte Palettenreferenz bleibt erhalten. Gerätespezifische Vererbung und Hover-Werte größerer Geräte sind sichtbar. Ohne zuordenbaren Farbwert zeigt das Feld ein neutrales Schachbrett und „Übernehmen“; es erfindet keine schwarze Farbe. Achtstellige Hexwerte behalten ihren Alphakanal auch beim Ändern des Farbtons. Dreistellige Hexeingaben werden vor dem Speichern in sechsstellige Werte umgewandelt.
+
+Palettenwahl und bestätigte Texteingaben sind einzelne Undo-Schritte. Eine Bewegung im nativen Wähler aktualisiert die Vorschau mit einem gemeinsamen History-Schlüssel und erhält den DOM-Knoten bis zum Abschluss. Danach werden Gerätemarkierungen, Reset und Kontrasthinweis aktualisiert. Farbauswahl per Tastatur, Escape, Fokuswiederherstellung und lokale Fehlermeldung sind Teil desselben Bedienelements. Die Farbkacheln verwenden beschriftete Buttons mit Auswahlzustand; lange Paletten bleiben innerhalb des Panels scrollbar. Keine zusätzliche Bibliothek und kein öffentliches Skript. Das neue Modul steht in der versionierten Importmap.
+
+**Migration:** Keine Änderung an Datenbank oder Dokumentformat. Bereits erlaubte sechs-/achtstellige Hexwerte und Palettenreferenzen werden unverändert gespeichert. Ein Rückweg auf 1.8.1 zeigt dieselben Werte im früheren Farbfeld. Verwaltungsformulare außerhalb des visuellen Editors behalten ihre bisherigen Felder.
+
+## ADR 083 – Footer-Links werden redaktionell platziert (14.09.2026)
+
+Auf ausdrücklichen Wunsch von Umut entfällt die automatisch angehängte Rechtszeile vollständig. Seiten, Beiträge, Archive, Fehlerseiten und Editorvorschauen geben ausschließlich die selbst platzierten Footer-/Inhaltslinks aus. Die frühere Erkennung des speziellen `legal`-Blocks konnte normale Text- oder Menülinks nicht berücksichtigen; dadurch erschien unter einem vollständig gestalteten Footer ein zusätzlicher heller Streifen mit doppelten Links. Die Template-Ausgabe, ihre Erkennung im Controller und ungenutztes CSS sind entfernt.
+
+Normale Links, Menüs und bewusst eingefügte „Rechtliches“-Blöcke bleiben erhalten. Der optionale Block nutzt weiterhin die konfigurierten Seitenadressen und den Link zur Einwilligung. Einwilligungsdialog, Einstellungen und der Endpunkt `/einwilligung` behalten ihre Funktion. Keine Inhalte werden umgeschrieben, keine neue Schema- oder Datenbankmigration. Bei einem Rückweg auf ältere Versionen erscheint deren automatische Leiste wieder.
+
+Diese Entscheidung ersetzt die automatische Verlinkung aus ADR 033 und die bedingte Zusatzleiste aus ADR 062; Position und Gestaltung der Links liegen beim Autor.
+
+## ADR 082 – Zuweisbare 404-Seite im gemeinsamen Seitenrenderer (14.09.2026)
+
+`website.settings.notFoundPageId` verweist auf eine normale Seite über deren stabile ID. Eine eigene Einstellung mit Livesuche weist sie zu oder entfernt die Zuordnung; sie benötigt Veröffentlichungsrechte und CSRF-Schutz. Der erwartete bisherige Wert schützt gegen ein veraltetes Formular. Die Änderung liest die aktuellen Einstellungen innerhalb einer Transaktion, unter MySQL/MariaDB mit Zeilensperre, und schreibt nur die geänderte Zuordnung in den erhaltenen JSON-Inhalt. Das normale Unternehmensformular erhält diesen Wert unabhängig von seinen eigenen Feldern. Startseite und 404-Seite dürfen nicht dieselbe Seite sein.
+
+Ohne verwendbare veröffentlichte Zuordnung wird ein v10-Blockdokument im Speicher erzeugt. Öffentliche GETs legen keine Seiten an. „404-Vorlage anlegen“ erstellt eine bearbeitbare Kopie als Entwurf und weist sie zu; bis zur Veröffentlichung bleibt die Standardausgabe sichtbar. Vorhandene Adressen einschließlich Papierkorb werden erhalten; bei belegtem `/404` wird `/404-2` usw. gewählt. Wiederholtes Anlegen überschreibt keine Seite. Die erzeugte Vorlage erhält `noindex`. Erstellen und Zuweisen laufen in einer gemeinsamen Datenbanktransaktion.
+
+Normale Seiten, zugewiesene Fehlerseiten und der Standard verwenden denselben Renderer mit Theme-CSS, Schriften, Standard-Header/-Footer, Menüs, verknüpften Sektionen und Einwilligungsanzeige. Auf der Fehlerausgabe haben die Standardbereiche Vorrang vor eventuellen Bereichsabweichungen der ausgewählten Seite. Nur veröffentlichte Revisionen sind öffentlich sichtbar; Umbenennen erhält die Zuordnung, Löschen/nicht veröffentlichte Seiten führen auf den Standard zurück. Die Originaladresse bleibt stehen, die Antwort trägt HTTP 404 und `noindex, follow` in HTML und Header, ohne Canonical oder strukturierte Daten einer normalen Seite. Auch die eigene Adresse der zugewiesenen Seite antwortet mit 404. Sitemap und llms.txt schließen die zugewiesene ID zusätzlich aus, unabhängig von deren normalen Metadaten.
+
+Ein schmaler Exception-Subscriber übernimmt öffentliche HTML-GET/HEAD-Routingfehler außerhalb der Slug-Grammatik, etwa alte `.html`-Adressen oder tiefere Pfade. Fehler bestehender Controller, Verwaltung, Medien/Assets, Formulare, Installation, AJAX sowie maschinenlesbare Ressourcen bleiben ihren bisherigen Endpunkten überlassen. Normale Seiten- und Archivfehler rufen den Fehlerrenderer direkt auf. 301/410 werden vorher behandelt; 410 nutzt einen eigenen Standardtext und behält seinen Status.
+
+**Migration und Rückweg:** Keine Datenbankmigration und kein neues Dokumentschema. Fehlender/null Settings-Inhalt erhält beim Lesen den leeren Standardwert. Die Einstellung wird erst beim Zuweisen gespeichert. Die Vorlage nutzt bestehende v10-Blöcke. Älterer Code ignoriert die neue Zuordnung und verwendet wieder seine bisherige 404-Ausgabe; die angelegte Seite und ihre Revisionen bleiben normaler Inhalt. Vor einem Rückweg die Website-Einstellungen sichern, da ältere Einstellungsformulare unbekannte JSON-Schlüssel entfernen können. Kein automatisches Veröffentlichen oder Überschreiben vorhandener Seiten.
+
+## ADR 081 – Linkziel und sichtbare Medienauswahl (14.09.2026)
+
+Schema v20 ergänzt optionales `props.newTab: boolean` an Button, Bild, Symbolkarte, Aufruf-Band und Symbol. Fehlend/false öffnet wie bisher im aktuellen Tab; true erzeugt im gemeinsamen Renderer `target="_blank" rel="noopener"`. Derselbe Wert ist als optionales Feld in Menüeinträgen verfügbar; die bestehende Menüversion schützt weiterhin vor veralteten Schreibzugriffen. Der Rich-Text-Filter erlaubt ausschließlich `_blank` als Ziel und setzt `noopener` selbst. Andere Targets und fremde Attribute werden entfernt. Textlinks bleiben Teil des bisherigen HTML-Vertrags. Bei Bildern entscheidet die gewählte Klickaktion; eine hinterlegte Adresse bleibt bei „Nichts tun“ gespeichert, erzeugt aber keinen Link mehr.
+
+Bilder, Galerie-/Logobilder und Hintergründe zeigen kleine Vorschaubilder mit Lade-/Fehlerzustand. Für Hintergrund-IDs liefert eine authentifizierte einzelne Medienabfrage die tatsächlich vorhandene Bildvariante; auch kleine Originale und archivierte, weiterhin verwendete Dateien funktionieren. Die Bildauswahl verwendet denselben Vorschaucache. Späte Antworten ersetzen keine neuere Auswahl. Entfernen eines Inhaltsbildes löscht dessen Block aus dem Entwurf, ein Galerieeintrag bleibt eine einzelne Änderung; beide sind rückgängig zu machen. Die Mediendatei bleibt erhalten. Bildaustausch ersetzt Quelle und Bildmetadaten, erhält Link, Bildunterschrift, Block-ID und Gestaltung.
+
+Ein Hintergrund wird mit `style.<device>.backgroundImage: "none"` ausdrücklich ausgeblendet. Das ist von Zurücksetzen zu unterscheiden: Zurücksetzen entfernt den eigenen Wert und stellt Vererbung her. Der Compiler übernimmt Bild, Verlauf und Überlagerung schrittweise Desktop→Tablet→Mobil; dadurch erscheint ein auf Tablet entferntes Bild nicht auf Mobil wieder. Geerbte Verläufe bleiben beim Entfernen des Bildes erhalten. Vorschau und öffentliche Ausgabe verwenden dieselbe CSS-Erzeugung. Die neuen Bedienelemente gehören nur zum Editor; kein zusätzliches öffentliches JavaScript.
+
+**Migration:** Dokumente v1–19 bleiben lesbar und werden nicht beim Laden umgeschrieben. Das Editor-Modell hebt die Version erst beim Setzen eines neuen Block-Linkwerts oder eines ausdrücklichen Hintergrund-„none“ auf v20 an, einschließlich der bisherigen Schema-Upgrades. Die Validierung verlangt für diese Werte v20. Keine Datenbankmigration. Rückweg auf ältere Software: vor Bearbeitung mit v20 angelegte Revision/Export oder die Sicherung vor dem Update wiederherstellen; ältere Validatoren können v20 nicht speichern. Menüs benötigen ebenfalls die Sicherung, falls neue Tab-Einstellungen auf älterem Code erhalten bleiben sollen. Kein stilles Herabsetzen der Dokumentversion.
+
+**Korrektur 1.7.4:** Native Inhalts-Auswahlfelder verarbeiten `input` und `change`, identische aufeinanderfolgende Werte werden nur einmal übernommen. Jede Auswahl ist ein eigener Undo-Schritt. Die Bild-Klickaktion ersetzt beim Wechsel nicht mehr den ganzen Feinschliff: Linkziel und Tab-Häkchen werden in einer bestehenden Gruppe ein-/ausgeblendet. Das erhält Dropdown, Fokus und eingegebene Adresse. Ein Test mit ausschließlich `change` konnte das fehlende URL-Feld vor der Korrektur reproduzieren; native Auswahl und Speicherung werden zusätzlich geprüft. Keine Änderung des Datenvertrags.
+
+## ADR 080 – Prozentuale Bildbreite direkt bei den Bildoptionen (14.09.2026)
+
+Der Inhaltsbereich eines Bildes erhält oben einen Prozentregler und ein Zahlenfeld für 1–100 % der verfügbaren Containerbreite. Beide schreiben ausschließlich `style.<device>.width` über die bestehende `setStyle`-Transaktion. Die generische Breite unter Design und die direkte Bildsteuerung sind dadurch immer derselbe Wert. Originalmaße, Quelle, Varianten, Alternativtext und Bildunterschrift bleiben unverändert. Vorhandene maximale Breiten werden erhalten und im Hinweis genannt; Werte in anderen Einheiten bleiben sichtbar, bis bewusst eine Prozentbreite gesetzt wird. Keine neue Style-Eigenschaft, keine neue Schema- oder Datenbankmigration, keine Änderung am öffentlichen Renderer oder öffentlichen JavaScript.
+
+Die Steuerung verwendet das aktive Vorschaugerät und zeigt die Herkunft des Werts. Zurücksetzen entfernt nur die Breite dieses Geräts und stellt die bestehende Desktop→Tablet→Mobil-Vererbung wieder her. Eingaben aktualisieren die Vorschau, ohne das Feld zu ersetzen. Eine Ziehbewegung ist ein Undo-Schritt; Zahlenwerte außerhalb des Bereichs werden mit verständlicher Meldung abgelehnt und nicht gespeichert. Tastatur, Undo/Redo, Speichern/Laden und prozentuale Ausgabe ohne JavaScript werden am realen TeamViewer-Bild aus einer isolierten Kopie der Pilotdaten geprüft.
+
+## ADR 079 – Livesuche mit gemeinsamen HTML-Ergebnissen (14.09.2026)
+
+Seiten, Beiträge und Mediathek verwenden dieselben authentifizierten GET-Routen für vollständige Ansichten und AJAX. Der Header `X-Requested-With: XMLHttpRequest` fordert JSON mit einem serverseitig gerenderten Ergebnisfragment, Gesamtzahl und normalisierten Filtern an. Twig bleibt die einzige Darstellung für Listen, Berechtigungen, CSRF-Felder, leere Ergebnisse und Pagination. Suchformular sowie Anlegen/Hochladen bleiben außerhalb des austauschbaren Bereichs; vorhandene Formulare funktionieren weiter ohne JavaScript. Keine Schema- oder Inhaltsmigration.
+
+Das Verwaltungsmodul wartet beim Tippen 220 ms und ersetzt nur die Ergebnisliste. Eine neue Eingabe bricht die alte Anfrage sofort ab; eine zusätzliche Sequenzprüfung verwirft verspätete Antworten. IME-Eingaben werden erst nach der Komposition gesucht. Beginnt während einer ausstehenden Suche eine Bearbeitung in der Liste, wird die Suche angehalten, damit die Antwort keine Eingabe entfernt. Nach dem Austausch werden Seitenauswahlen initialisiert und die Rückkehrfilter aller Formulare aktualisiert. Fehler erhalten die bisherigen Ergebnisse und bieten Wiederholen an. Ergebniszahl und Ladezustand sind für Screenreader zugänglich; Tastaturfokus bleibt beim Tippen erhalten.
+
+URLs enthalten den Suchzustand. Tippen ersetzt den aktuellen Historieneintrag, Filterwahl und Blättern legen einen neuen an; `popstate` lädt passende Ergebnisse und stellt die Felder wieder her. Ohne JavaScript arbeitet das GET-Formular mit Submit und regulären Links. Das Modul gehört ausschließlich zum Admin-Paket.
+
+Die Mediathek filtert Titel und Alternativtext vor COUNT und LIMIT in der Datenbank, inklusive Archivfilter und wörtlicher Behandlung von `%`, `_` und `!`. SQLite erhält eine Unicode-fähige LOWER-Funktion über PDO/mb_strtolower, weil die eingebaute Funktion nur ASCII verarbeitet und etwa „über“ nicht zu „Über“ passte. MySQL verwendet weiterhin seine native Funktion. Die Korrektur gilt auch für Inhalts- und Menüsuche; bestehende Daten und Indizes werden nicht verändert.
+
+## ADR 078 – Kontrollierbare Slider und Einblendungen beim Erscheinen (14.09.2026)
+
+Ergänzung zur Laufzeit: Eine Änderung von reduzierter zu erlaubter Bewegung nimmt die Beobachtung noch nicht gezeigter Elemente wieder auf, auch wenn das Dokument schon mit reduzierter Bewegung gestartet ist. Die Aufräumfunktion entfernt denselben Präferenzlistener. Im Editor zeigt eine laufend aktualisierte Statusmeldung die tatsächlich gemeldete Browserpräferenz. Das CMS setzt diese weder aus einer Windows-Einstellung noch aus erfolgreichen Testprofilen voraus; es überschreibt sie nicht. Die Browsermeldung und ihre Ursache sind getrennt zu diagnostizieren.
+
+Die bisherige Scroll-Zeitachse ersetzte unterschiedliche Effekte durch dieselbe Aufwärtsbewegung. `motion.js` beobachtet stattdessen sichtbare Blöcke und spielt die gewählte Richtung/Überblendung/Skalierung/Unschärfe einmal mit der Web Animations API. Verzögerungen bleiben erhalten. Ohne JavaScript sind alle Inhalte sichtbar; reduzierte Bewegung unterbindet die Wiedergabe und bricht laufende Animationen ab. Nur Dokumente mit einem Effekt laden das Modul, einschließlich Kopf/Fuß und verknüpften Sektionen. Inhalt und Dokumentschema bleiben unverändert.
+
+Slider behalten Scroll-Snap als Grundlage. Ein kleines Modul ergänzt sichtbare Pfeile, Zähler, optionale Punkte sowie Pause/Wiedergabe bei Autoplay. Manuelle Bedienung stoppt auch einen bereits geplanten Timer. Automatik wartet bei Hover, außerhalb des Bildschirms oder in unsichtbaren Tabs; Bewegungsreduktion deaktiviert sie. Ohne Skript bleibt der Inhalt scrollbar. Im Editor startet der Benutzer diese Module ausdrücklich aus dem Elternfenster; die iframe-Sandbox bleibt `allow-same-origin` ohne `allow-scripts`. Neue Vorschauen räumen Observer, Timer und Ereignisse der alten Instanz auf.
+
+## ADR 077 – Begrenzte Inhaltslisten und Menüaufbau mit Suche (14.09.2026)
+
+Seiten und Beiträge erhalten getrennte Routen und Navigation. Die Datenbank führt Typ, Suche, Status, COUNT und LIMIT/OFFSET aus; nur 20 oder 50 Dokumente werden pro Ansicht dekodiert. Stabile Sortierung verhindert Überschneidungen bei identischen Zeitstempeln. Papierkorb und leere Suchergebnisse folgen demselben Vertrag. Keine Schemaänderung. Unterlagen mit Titeln und Pfaden werden höchstens in Gruppen von 20 als authentifizierte Suchvorschläge geliefert. Eine separate ID-Abfrage hält bereits ausgewählte Eltern unabhängig von der Ergebnisseite sichtbar.
+
+Der Menüeditor bearbeitet einen Menüplatz je Ansicht. Suche und eigene Links stehen links, Reihenfolge und Felder rechts. Hinzufügen, Haupt-/Unterpunkte, Umordnen und Entfernen sind per Buttons/Tastatur bedienbar und rückgängig zu machen. Haupteinträge ziehen ihre Kinder mit; beim Entfernen bleiben deren Links als Hauptpunkte erhalten. Speichern verwendet weiterhin die validierte Menüstruktur und erwartete Version, liefert bei JavaScript JSON und behält bei 422/409 oder Verbindungsfehlern die Eingaben. Keine neuen Datenformate.
+
+Der Fehler 500 bei Bereichen entstand durch einen unbedingten Zugriff auf `page.slug` in der gemeinsamen Editorvorlage. Bereiche haben keine Seite. Routen und öffentliche Links richten sich jetzt nach dem bearbeiteten Objekt; Speichern eines Bereichs ist sichtbar als sofort wirksame Änderung bezeichnet. Der API-Pfad wird aus benannten Routen abgeleitet, auch nach Verlegung der Verwaltung.
+
+## ADR 076 – Eine Installationsdatei und sichtbare Datenbankquelle (14.09.2026)
+
+`.env` ist die einzige automatisch geladene Konfigurationsdatei. Sie gehört zur Installation und wird nicht mehr von Git versioniert. Installer, Setup und Admin-Pfad-Befehl schreiben atomar und unter einer Dateisperre in diese Datei, ohne bestehende fremde Schlüssel zu verwerfen. Ein Marker unterscheidet eine vom Installer bestätigte Datenbank von der bloßen Vorlage. Echte Prozess-/Servervariablen bleiben bewusst höher priorisiert.
+
+Beim ersten Boot mit einer alten `.env.local` bleiben deren bisher wirksame Werte erhalten: beide Originale sichern, zusammengeführte `.env` schreiben, erst danach `.env.local` entfernen. Sicherungen liegen außerhalb des Webroots unter `var/backups/environment-*`. Secret und Datenbank werden nicht neu erzeugt oder gewechselt. Ein Schreibfehler bricht die Migration ab, statt still auf Standarddaten zu wechseln. Andere Symfony-Overlays werden nicht mehr implizit geladen; eine manuelle Nutzung benötigt vor dem Wechsel die Übernahme in `.env`/Servervariablen. Rückweg: Code und beide Konfigurationssicherungen gemeinsam wiederherstellen.
+
+Der Git-Updater sichert Konfigurationsinhalte vor dem Checkout und stellt sie vor jedem neuen PHP-Prozess wieder her, auch beim Rollback. Das behandelt ausdrücklich ältere Repositorys mit getrackter `.env`. Der Archiv-Updater nimmt diese Dateien weiterhin vom Dateiaustausch aus. Zusätzlich wurde ein vorhandener Rückwegfehler behoben: Der Git-Updater speicherte nur einen Beschreibungstext und leitete daraus einen ungültigen Datenbank-Sicherungspfad ab. Der tatsächliche Sicherungsordner wird jetzt getrennt geführt. Ein fehlgeschlagenes Zurückschreiben lässt den Wartungszustand aktiv; der Regressionstest verändert die Datenbank vor dem simulierten Migrationsfehler und prüft ihre Wiederherstellung. Bereits installierter alter Git-Updater-Code kann diesen neuen Schutz beim erstmaligen Wechsel noch nicht ausführen; daher diesen Übergang per Archiv-Update durchführen oder die Konfiguration vor dem manuellen Checkout sichern und anschließend wiederherstellen (UPDATE.md).
+
+Die bereits begonnene Systemdiagnose bleibt erhalten: tatsächliche Datenbankart, SQLite-Pfad/Größe/Schreibrecht beziehungsweise maskierte Serveradresse sowie die tatsächliche Quelle. Die Quelle stammt aus den vom Dotenv-Lader gesetzten Variablen; sie wird nicht aus der bloßen Existenz einer Datei geraten. Passwort und Secret werden nicht angezeigt.
+
+## ADR 075 – Leere Container sind Arbeitsflächen (14.09.2026)
+
+Leere Spalten hatten keine Höhe; leere Sektionen waren zwar durch Abstände vorhanden, aber weder als Container erkennbar noch mit einem direkten Einfügeweg versehen. Der lokale Flatsome-3.20.9-Quelltext verwendet für solche Zustände eine eigene sichtbare Inhaltsfläche mit Mindesthöhe und mittigem Einfügewerkzeug (konkrete Fundstellen in `docs/FLATSOME-ABGLEICH.md`).
+
+`preview-containers.js` ergänzt deshalb erst im vollständig geparsten Vorschau-DOM sichtbare Hilfsflächen für leere Sektionen, Zeilen und Spalten. Eine leere Sektion bietet außerdem Zeilenlayouts mit 1–4 Spalten. Die Hilfen sind echte Buttons mit Tastaturbedienung und eindeutigen Namen, etwa „Spalte 2 von 2: Inhalt hinzufügen“. Sie setzen einen genauen Einfügepunkt oder führen dieselbe Modelltransaktion wie der Werkzeugkasten aus. Abbrechen oder eine andere Auswahl hebt den Einfügepunkt auf.
+
+Die Editor-CSS gibt den Flächen mindestens 130 Layoutpixel Höhe. Der öffentliche Renderer und seine CSS bleiben unverändert; die Mindesthöhe ist eine Bearbeitungshilfe und wird nicht als Designwert gespeichert. Nach dem ersten Inhalt verschwindet die Hilfe automatisch, Undo stellt sie wieder her. Kein Schemawechsel und keine Datenmigration; bestehende leere Container erhalten die Hilfe allein beim Öffnen. `preview.css` und das neue Modul erhalten die Versionskennung 1.6.2, damit ein bestehender Browsercache die Funktion nicht verdeckt.
+
+Neu eingefügte Elemente werden nach dem Rendern sichtbar gescrollt. Die Vorschau gilt erst mit geparstem DOM und geladenen Hilfsstilen als bereit. Die Drop-Geometrie wird beim Scrollen und beim Loslassen neu ermittelt, Zielcontainer werden benannt, und nebeneinanderstehende Spalten werden horizontal eingeordnet; mobil gestapelte Spalten vertikal. Ein Ziehen nahe dem Vorschaurand scrollt den Frame, bis der Zeiger den Rand verlässt oder das Ziehen endet. Inhalt und Undo bleiben von bloßem Scrollen unberührt.
+
+Der Offen-/Geschlossen-Zustand von Feinschliff-Gruppen wird direkt aus ihren bisherigen DOM-Knoten übernommen. Ein verzögertes `toggle`-Ereignis allein reicht nicht: Ein schneller Neuaufbau nach einer Wertänderung kann den Knoten entfernen, bevor das Ereignis ankommt, und würde die gerade geöffnete Gruppe wieder schließen.
+
+## ADR 074 – Editorfläche, Seitenebene und kontextbezogene Gestaltung (14.09.2026)
+
+Textblöcke sowie H1/H2 hatten im Basis-CSS feste Höchstbreiten von 690/900/760 px. Sie folgen jetzt der Breite ihres Containers; ausdrücklich gespeicherte `maxWidth`-Werte bleiben wirksam. Sektionsbreiten und Theme-Container bleiben bewusste Layoutentscheidungen. Das verändert gegebenenfalls den Zeilenumbruch bestehender Seiten. Vorschau und öffentliche Ausgabe verwenden dieselbe CSS-Quelle. Kein Dokument wird dafür umgeschrieben, keine Schema- oder Datenbankmigration ist erforderlich. Rückweg: vorheriges Basis-CSS oder eine explizite maximale Breite am betreffenden Block.
+
+Ein Klick auf „Sektion“ erzeugt eine neue Sektion nach dem obersten Block der aktuellen Auswahl. Die dauerhaft sichtbare Aktion „Neue Sektion auf Seitenebene“ verwirft zuvor gesetzte Einfügepunkte. Bewusst gesetzte Plus-Einfügepunkte und Drag-and-drop dürfen weiterhin verschachteln. Die Einfügeauskunft und die Modellaktion verwenden denselben Zielermittler; Änderungen bleiben einzelne Undo-Schritte.
+
+Die Seitenleisten sind unabhängig zwischen 240/280 und 560 px verstellbar, soweit wenigstens 280 px für die Vorschau bleiben. Ziehen, Pfeiltasten, Home/End und Doppelklick sind unterstützt. Präferenzen liegen lokal im Browser, außerhalb von Inhalt, Revisionen und Undo. Schmalere Fenster reduzieren die sichtbaren Breiten vorübergehend; bis 850 px folgen die Panels der Vorschau, bis 560 px stehen sie untereinander. Die Vorschau hat keinen zusätzlichen Außenabstand; Desktop wächst oberhalb von 1240 px mit dem verfügbaren Platz, Tablet/Mobil behalten ihre definierten Layoutbreiten.
+
+Der Feinschliff filtert nach Blocktyp und ordnet passende Gruppen zuerst: Bildausschnitt bei Bildern, Typografie bei Text, Layout bei Containern. „Alle Eigenschaften anzeigen“ öffnet den vollständigen Vertrag. Bereits gespeicherte Eigenschaften bleiben auch außerhalb des üblichen Blockprofils auffindbar; Validierung und gespeichertes Schema ändern sich nicht. Beim Auswahlwechsel beginnt das Panel oben. `auto` beziehungsweise `none` sind für die passenden Größenfelder explizit auswählbar. VERSION 1.6.1 erneuert die Cachekennung aller Editor-Module.
 
 ## ADR 001 – PHP-Webhosting, Symfony 7.4
 
@@ -95,7 +458,7 @@ Migration `20260912000300` ergänzt ausschließlich die Tabelle `media`: stabile
 
 Uploads und Metadatenänderungen verlangen `ROLE_EDITOR` und einen eigenen CSRF-Token. Metadaten nutzen erwartete Versionen; konkurrierende Änderungen liefern 409. Bildtitel/Alt-Text im Medienkatalog sind Vorlagen für künftiges Einfügen. Bereits gespeicherte Seiten behalten ihre kontextbezogenen Texte, Beschriftungen und Bildvarianten. Archivieren blendet Bilder aus der normalen Auswahl aus und ist umkehrbar; bestehende URLs, Seiten und Undo-Stände bleiben funktionsfähig. Es gibt noch keine physische Löschung, Nutzungsübersicht, Ordner oder Katalog-Paginierung.
 
-Nur tatsächlich decodierbare JPEG-, PNG- und WebP-Dateien werden angenommen. Dateinamen und vom Browser gemeldete MIME-Typen bestimmen weder Speicherpfade noch Dateiformat. Maximal 8 MiB, 12 Millionen Pixel und 8000 px pro Kante; zusätzlich konservative Prüfung gegen das PHP-Speicherlimit. GD decodiert und erzeugt WebP-Varianten bis 480/960/1600 px Breite ohne Hochskalieren. Das hochgeladene Original wird nicht übernommen; Metadaten und angehängte Nutzdaten werden nicht in die Varianten kopiert. EXIF-Orientierung wird bei JPEG berücksichtigt, sofern die EXIF-Erweiterung vorhanden ist. Transparenz wird erhalten; animierte Bilder/Dateianhänge/SVG gehören nicht zum unterstützten Uploadvertrag. Grundlage: [PHP-Bilddecodierung](https://www.php.net/manual/en/function.imagecreatefromstring.php).
+Nur tatsächlich decodierbare JPEG-, PNG- und WebP-Dateien werden angenommen. Dateinamen und vom Browser gemeldete MIME-Typen bestimmen weder Speicherpfade noch Dateiformat. Maximal 8 MiB, 12 Millionen Pixel und 8000 px pro Kante; zusätzlich konservative Prüfung gegen das PHP-Speicherlimit. GD decodiert und erzeugt WebP-Varianten (Qualität 82) bis 480/960/1600/2400 px Breite ohne Hochskalieren; ein schmaleres Original bekommt entsprechend weniger Stufen, die letzte davon in seiner eigenen Breite. Das hochgeladene Original wird nicht übernommen; Metadaten und angehängte Nutzdaten werden nicht in die Varianten kopiert. EXIF-Orientierung wird bei JPEG berücksichtigt, sofern die EXIF-Erweiterung vorhanden ist. Transparenz wird erhalten; animierte Bilder/Dateianhänge/SVG gehören nicht zum unterstützten Uploadvertrag. Grundlage: [PHP-Bilddecodierung](https://www.php.net/manual/en/function.imagecreatefromstring.php).
 
 Dateien liegen unter `MEDIA_DIRECTORY`, standardmäßig `var/media` außerhalb des Webroots. Nur zufällige IDs und bekannte Variantengrößen gelangen über `/media/{id}/{width}` mit festem `image/webp`, `nosniff` und unveränderlichem Langzeitcache nach außen. Erweiterungslose URLs funktionieren auch über die Frontcontroller-Weiterleitung des lokalen PHP-Servers; Pfade mit nicht vorhandenen `.webp`-Dateien wurden dort als statische 404 behandelt. Bild-URLs sind öffentlich, auch vor Veröffentlichung einer Seite und nach Archivieren; der Uploaddialog benennt dies. Die Katalog-API bleibt geschützt. Dies ist keine private Dokumentablage.
 
@@ -195,7 +558,7 @@ Ein neuer Tab-Block bringt zwei Tabs mit: ein einzelner Tab ist keine Tabgruppe,
 
 ## ADR 017 – Formulare (Dokumentschema v8, 12.09.2026)
 
-Migration `20260912000700` legt `form` und `form_submission` an. **Ein Formularblock im Seiteninhalt enthält nur die Adresse des Formulars.** Felder, Empfänger, Betreff, Antwortadresse und Einwilligungstext liegen in der Datenbank. Ein gespeichertes Dokument kann dadurch weder ändern, wonach gefragt wird, noch wohin eine Anfrage geht – dieselbe Trennung wie beim Block `postlist`.
+Migration `20260912000700` legt `form` und `form_submission` an. **Ein Formularblock im Seiteninhalt enthält nur die Adresse des Formulars.** Felder, Empfänger, Absender (seit 1.15.1 wählbar, leer heißt Empfänger – manche Hoster stellen nur zu, was von einer Adresse der eigenen Domain kommt), Betreff, Antwortadresse und Einwilligungstext liegen in der Datenbank. Ein gespeichertes Dokument kann dadurch weder ändern, wonach gefragt wird, noch wohin eine Anfrage geht – dieselbe Trennung wie beim Block `postlist`.
 
 **Kein CSRF-Token und keine Sitzung auf dem öffentlichen Weg.** Symfonys CSRF-Schutz braucht eine Sitzung, und eine Sitzung bedeutet ein Cookie auf jeder öffentlichen Seite; das vermeidet das Projekt bewusst. Die Route ist anonym und ändert nichts, was einem Besucher gehört: eine gefälschte Anfrage könnte höchstens eine Nachricht senden, und genau dagegen wirkt der Spamschutz. Die Verwaltung der Formulardefinitionen bleibt dagegen sitzungsgebunden und CSRF-geschützt.
 
@@ -243,7 +606,7 @@ Das Stylesheet steht aus Geschwindigkeitsgründen inline und ist **über seinen
 
 `Theme` ist die Grundlage darüber: eine frei definierbare Farbpalette, Schriften und die Grundtypografie. Farben werden als `@schlüssel` referenziert und zu CSS-Variablen; eine Farbe zu ändern wirkt überall, wo sie benutzt wird. Die Überschriftengrößen entstehen aus einer modularen Skala, sodass eine Zahl die ganze Hierarchie verschiebt.
 
-**Google Fonts auf ausdrückliche Entscheidung von Umut.** Das bedeutet eine Anfrage an Google bei jedem Seitenaufruf, mit den bekannten Folgen für Datenschutz und Ladezeit – der Entwicklungsplan verlangt eigentlich lokale Schriften. Umgesetzt ist es so, dass nur die tatsächlich benötigten Schnitte geladen werden und die Richtlinie ihre Hosts nur dann öffnet, wenn wirklich eine Google-Schrift eingestellt ist. Der Weg zum Selbsthosten bleibt offen: es wäre ein zusätzlicher Quelltyp neben `system` und `google`.
+**Schriften von Google, aber nicht zur Laufzeit.** Eine Familie lässt sich weiterhin bei Google aussuchen; ausgeliefert wird sie aber ausschließlich vom eigenen Server. Die Dateien holt ein Knopf im Designbereich einmalig her, und die Ausgabe verlinkt nie ein fremdes Stylesheet – Näheres in ADR 096.
 
 Die alten Tokenwerte aus v2 bis v9 bleiben gültig und werden weiterhin gerendert. Blöcke, die noch welche tragen, zeigen sie im Editor in einem eingeklappten Bereich „Klassische Werte dieser Seite“, damit ältere Seiten bearbeitbar bleiben, ohne das neue Panel zu überladen.
 
@@ -281,7 +644,7 @@ Migration `20260912000900` ergänzt `page.publish_at`, `page.deleted_at` und `re
 
 `revision.seq` behebt einen echten Fehler, den erst ein Test gezeigt hat: `created_at` hat Sekundengenauigkeit, und mehrere Speichervorgänge fallen in dieselbe Sekunde. Die Reihenfolge im Verlauf war dadurch **nicht eindeutig** – sie richtete sich nach der zufälligen Revisions-ID. Jetzt trägt jede Fassung einen je Seite streng aufsteigenden Zähler; die Migration füllt ihn aus den vorhandenen Zeitstempeln.
 
-**Geplante Veröffentlichung** setzt `publish_at`. Ein Cron-Aufruf von `cms:publish-due` veröffentlicht, was fällig ist, und löscht den Zeitpunkt. Ohne Cron bleibt die Seite ein Entwurf – die sichere Richtung. Zeitpunkte sind UTC; das steht im Formular, weil ein `datetime-local`-Feld sonst die Zeitzone des Browsers unterstellt. Eine Seite im Papierkorb wird nie durch den Zeitplan veröffentlicht.
+**Geplante Veröffentlichung** setzt `publish_at`. Die Aufgabe `publish-due` veröffentlicht, was fällig ist, und löscht den Zeitpunkt (ADR 073); ohne einen Auslöser – Besuch, geöffnetes Backend, URL-Cron oder Konsole – bleibt die Seite ein Entwurf, die sichere Richtung. Zeitpunkte sind UTC; das steht im Formular, weil ein `datetime-local`-Feld sonst die Zeitzone des Browsers unterstellt. Eine Seite im Papierkorb wird nie durch den Zeitplan veröffentlicht.
 
 **Eine frei wählbare Startseite ist nicht umgesetzt.** Der Pfad `home` gilt an elf Stellen als Wurzel der Website – öffentliche Routen, Canonical, Sitemap, `llms.txt`, Menüauflösung. Das zu einer Einstellung zu machen ist ein eigener Schritt; bis dahin behält die Startseite ihre Adresse, statt dass die Hälfte des Systems der Änderung folgt und die andere nicht.
 
@@ -438,7 +801,556 @@ Vom Verweis bleibt nur der Host. Die vollständige Adresse, aus der jemand kam,
 
 **Der Preis steht auf dem Bildschirm.** Aufrufe statt Besucher, keine Verweildauer, keine Absprungrate, kein Klickweg, kein Land. Das ist keine Lücke, sondern die Folge der Entscheidung: all das braucht Wiedererkennung. Wer es braucht, braucht eine Einwilligung – die Gruppe `statistics` dafür gibt es schon, sie wäre dann ein eigener Baustein.
 
-**Aufbewahrung:** nach 60 Tagen werden die Stunden eines Tages zu einer Zeile verschmolzen, nach 425 Tagen wird gelöscht. Gut ein Jahr, damit ein Vergleich mit dem Vorjahresmonat möglich bleibt. `cms:stats:prune` macht beides und ist für einen Cronjob gedacht.
+**Aufbewahrung:** nach 60 Tagen werden die Stunden eines Tages zu einer Zeile verschmolzen, nach 425 Tagen wird gelöscht. Gut ein Jahr, damit ein Vergleich mit dem Vorjahresmonat möglich bleibt. `cms:stats:prune` macht beides; im Normalbetrieb erledigt das die Aufgabe `stats-prune` des Plans (ADR 073).
+
+## ADR 073 – Wiederkehrende Aufgaben ohne Cronjob: die Anfrage ist der Auslöser (14.09.2026)
+
+Bis hierher stand in vier Dokumenten derselbe Satz: „gehört in einen Cronjob". Das ist richtig – und auf dem Hosting, für das dieses CMS gebaut ist, oft nicht einlösbar. Kein SSH, kein Supervisor, manchmal nicht einmal ein Cron-Eintrag im Kundenmenü. Die Folge war nicht „läuft seltener", sondern **läuft nie**: keine Sicherung, keine geplante Veröffentlichung, eine Statistiktabelle, die nur wächst.
+
+**Die Entscheidung: Was ein Hosting immer hat, sind Anfragen.** Also arbeitet eine Anfrage die Aufgaben ab – in `kernel.terminate`, nach der ausgelieferten Antwort. Unter PHP-FPM ruft Symfony dort `fastcgi_finish_request()` auf: der Browser ist fertig, während hier noch gearbeitet wird. Das ist derselbe Weg, den WordPress (`wp-cron`) und Shopware gehen, und aus demselben Grund.
+
+Vier Auslöser, eine Mechanik:
+
+| Auslöser | Wer stößt an | Grenzen je Durchlauf |
+| --- | --- | --- |
+| Besuch | jeder Seitenaufruf | 2 Aufgaben, 20 s |
+| Verwaltung | das geöffnete Backend, im Minutentakt | 3 Aufgaben, 45 s |
+| URL-Cron | der Hoster ruft `/cms-cron/<Schlüssel>` | 20 Aufgaben, 240 s |
+| Konsole | `cms:tasks:run`, auch mit `--loop` | frei |
+
+**Was das nicht kann, steht auf dem Bildschirm und nicht im Kleingedruckten:** Ohne Besuch und ohne geöffnetes Backend passiert nichts. Eine Aufgabe für 03:00 Uhr läuft auf einer stillen Website erst um 07:15 Uhr. Für Sitemap, Aufräumen, Updateprüfung und Sicherung ist das brauchbar; für etwas Minutengenaues ist es das nicht, und dann ist einer der beiden unteren Wege die Antwort. Genau dieser Satz steht im Bildschirm „Aufgaben", weil die Alternative ist, dass jemand später an der falschen Stelle sucht.
+
+Drei Eigenschaften entscheiden darüber, ob das im Betrieb trägt:
+
+**1. Der Normalfall kostet keine Datenbankabfrage.** In `var/scheduler.json` steht, wann überhaupt das nächste Mal etwas ansteht, dazu die zwei Schalter. Liegt der Zeitpunkt in der Zukunft, ist der Abonnent nach einem `file_get_contents` fertig. Fehlt die Datei – frische Installation, geleertes `var/`, kein Schreibrecht –, wird die Datenbank gefragt und die Datei neu geschrieben: der teure Weg ist der Ausnahmefall, nicht der Normalfall, und ein schreibgeschütztes `var/` macht das System langsamer, aber nicht falsch.
+
+**2. Zwei Besucher führen eine Aufgabe nicht zweimal aus.** Wer sie ausführen darf, entscheidet ein bedingtes `UPDATE … WHERE next_run_at <= :jetzt AND (locked_until IS NULL OR locked_until <= :jetzt)`. Das ist auf MySQL wie auf SQLite atomar; wer keine Zeile verändert hat, war zu spät und geht weiter. Deshalb ist der Plan eine **Tabelle** und keine Datei: eine Dateisperre ist auf geteiltem Hosting nicht zuverlässig, ein bedingtes UPDATE ist es. Die Sperre verfällt nach 15 Minuten von selbst, denn ein Prozess, den das Hosting mitten im Lauf abschießt, kann sie nicht mehr aufräumen.
+
+**3. Eine Aufgabe darf niemals die Website mitreißen.** Der Abonnent fängt alles. Ein Fehlschlag wird zum sichtbaren Zustand mit wachsendem Abstand bis zum nächsten Versuch (Verdopplung, gedeckelt bei sechs Stunden) – sonst fängt eine Aufgabe, die nicht laufen *kann*, bei jedem Seitenaufruf neu an. Fehlt die Tabelle, weil Dateien hochgeladen und Migrationen noch nicht ausgeführt wurden, passiert schlicht nichts.
+
+**Die Sicherung läuft mit, obwohl sie die schwerste Aufgabe ist.** Sie kopiert Datenbank und Medien, und unter Apache mit mod_php belegt sie dabei einen Prozess, weil es dort kein `fastcgi_finish_request()` gibt – die Seite steht längst im Browser, der Prozess bleibt. Der Handel ist trotzdem eindeutig: eine tägliche Sicherung auf einem Hosting ohne Cron ist mehr wert als gar keine. Wer einen echten Cronjob hat, schaltet den Besuchs-Auslöser ab; der Bildschirm sagt auch das.
+
+**Der Schlüssel des URL-Cronjobs steht in keiner Datenbank.** Er wird aus `APP_SECRET` abgeleitet (`hash_hmac`, 40 Zeichen), ist damit auf jeder Installation ein anderer, überlebt jedes Update und wechselt genau dann, wenn das Geheimnis wechselt. Ein falscher Schlüssel bekommt 404 und nicht 403: wer probiert, soll nicht erfahren, dass es die Stelle gibt.
+
+**Eine neue Aufgabe ist eine Datei.** Wer `App\Ops\Tasks\Task` implementiert, bekommt über `_instanceof` ein Etikett, liegt beim nächsten Abgleich in der Tabelle und steht im Bildschirm – ohne eine Liste, die an drei Stellen nachzuführen wäre. Verschwindet die Klasse, verschwindet die Zeile. Mitgeliefert sind fünf: geplante Veröffentlichung (5 Minuten), Statistik verdichten, Sicherung, Updateprüfung und Aufräumen (je täglich).
+
+## ADR 072 – Drei Fehler einer Familie: dieses Hosting ist nicht mein Rechner (13.09.2026)
+
+Umut, während er 1.4.4 in Betrieb nahm: „Das buggt doch immer noch" und „Bei Sicherung anlegen kommt auch Fehler 500 – wieso ist das alles verbuggt?" Drei Befunde an einem Abend, und sie gehören zusammen: **Jeder einzelne war auf meinem Rechner unsichtbar.**
+
+**1. `git` installiert ist nicht dasselbe wie „Arbeitskopie".** `Updater::state()` gab unter dem Schlüssel `git` zurück, ob der *Befehl* `git` aufrufbar ist. Auf Umuts Hosting ist er das (Version 1.8.3.1), nur ist das Verzeichnis eine Installation aus dem Releasearchiv. Also lief jeder Git-Aufruf ins Leere, und in der Verwaltung stand dort, wo eine Fassungsnummer hingehört: `fatal: Not a git repository`. Dazu eine Vorprüfung voller roter Ausrufezeichen für Bedingungen, die für diese Installation gar nicht gelten. Die Software war in Ordnung und sah kaputt aus – für den Betreiber ist das dasselbe. Der Zustand heißt jetzt `worktree` und wird getrennt von `git` erhoben; ohne Arbeitskopie verschwinden die Git-Karten vollständig, und an ihrer Stelle steht ein Satz: „Eingerichtet über das Releasearchiv."
+
+**2. `VACUUM INTO` gibt es erst seit SQLite 3.27.** Die Sicherung benutzt es, weil eine Dateikopie während eines Schreibvorgangs unbrauchbar sein kann (ADR 038). Auf Umuts Hosting läuft eine ältere Fassung: alt genug für die Installation (die braucht 3.16, ADR aus 1.4.2), zu alt für die Sicherung. Ergebnis: 500 beim Knopf „Sicherung jetzt anlegen". Jetzt wird bei älteren Fassungen unter einer Schreibsperre kopiert – `PRAGMA wal_checkpoint`, `BEGIN IMMEDIATE`, kopieren, `COMMIT` –, und der Test setzt die Schwelle künstlich hoch, damit dieser Weg wirklich läuft und nicht nur auf fremden Servern.
+
+**3. Ein unerwarteter Fehler darf keine 500-Seite sein.** Der Sicherungsknopf fing `InvalidPage` ab, also die *erwarteten* Fälle. Alles andere – alte Datenbankfassung, fehlendes Schreibrecht, voller Datenträger – fiel durch. Genau das sind aber die Fälle, die nur auf fremden Servern auftreten. Der Knopf fängt jetzt jeden Fehler und sagt, woran es lag.
+
+**Was ich daraus mitnehme:** Jeder dieser Fehler war eine *Umgebungsdifferenz*, und keiner davon war durch mehr Tests auf meinem Rechner zu finden. Was hilft, ist zweierlei – eine nachgestellte Installation aus dem echten Releasearchiv (so wurde ADR 071 gefunden) und die Regel, dass ein Knopf in der Verwaltung **niemals** mit einer 500-Seite enden darf, sondern mit einem Satz. Das Zweite ist billiger und fängt auch die Fälle, an die ich nicht gedacht habe.
+
+## ADR 071 – Ein Buchstabe, der die ganze Funktion unbrauchbar machte (13.09.2026)
+
+Umut hat 1.4.3 installiert, den Updateknopf gedrückt und eine **500-Seite** bekommen. Sein Satz dazu: „Das gefällt mir alles ehrlich gesagt nicht. Ich möchte es so einfach wie WordPress." Beides berechtigt.
+
+Nachgestellt wurde es mit einer echten 1.4.3-Installation aus dem Releasearchiv, eigener Datenbank, eigenem Port. Der Fehler stand dann im Protokoll:
+
+```
+Twig\Error\RuntimeError: Key "step" for sequence/mapping with keys
+"label, ok, detail" does not exist in "admin/system.html.twig" at line 137
+```
+
+Der Updater über Git nennt einen Schritt `step`, der neue über das Archiv nannte ihn `label`, und beide legen ihr Ergebnis unter demselben Sitzungsschlüssel ab. Die Vorlage liest `step`. **Das Update lief vollständig durch** – alle neun Schritte in Ordnung, Dateien getauscht, `var/` und `.env` unberührt – und dann starb die Seite, die das berichten sollte. Damit war auch der zweite Knopf unerreichbar, der die Migrationen ausführt, und die Website blieb im Wartungszustand.
+
+**Warum kein Test das gefunden hat.** Zehn Tests prüfen den Archiv-Updater, und alle prüfen sein Rückgabe-Array. Keiner hat die Seite gerendert, die dieses Array anzeigt. Ein Ergebnis, das stimmt, und eine Anzeige, die es nicht lesen kann – das ist dieselbe Familie wie das `og:image`, das gespeichert wurde und nie ankam (ADR 056), und wie das Stylesheet, das nichts mehr tat (ADR 064). **Die Naht zwischen zwei richtigen Hälften ist die Stelle, an der es bricht.** Der Test dazu rendert jetzt `/admin/system` mit den Schritten eines echten Laufs in der Sitzung; gegengeprüft, indem der Fehler noch einmal eingebaut wurde – der Test wird rot.
+
+Der Schlüssel heißt jetzt in beiden Updatern `step`. Nicht die Vorlage wurde nachsichtig gemacht: Zwei Dinge derselben Art beschreiben sich gleich, sonst wiederholt sich das beim nächsten Anzeigeort.
+
+**Und der zweite Teil von Umuts Satz.** Nach dem Tausch stand die Verwaltung mit zwei Karten da, die beide dasselbe wollten – „Migrationen ausführen und freigeben" und „Migrationen stehen aus". Solange das Archiv-Update auf seinen zweiten Schritt wartet, gehört der Knopf an eine Stelle. Zwei Knöpfe, die dasselbe tun, sind eine Frage zu viel.
+
+## ADR 070 – Die zwei Lücken, die erst das Veröffentlichen zeigte (13.09.2026)
+
+Umut, kurz nach dem Release: „Wie spiele ich das Update manuell ein?" Die Frage war berechtigt, und die Antwort hatte zwei Lücken.
+
+**Erstens: Es gab keinen Weg, Migrationen im Browser auszuführen.** Wer die Dateien über FTP hochlädt – und das muss genau einmal jeder tun, dessen Installation die Updatekarte noch nicht kennt –, hat danach neuen Code und eine alte Datenbank. Dafür gab es nur die Konsole, also genau das, was auf geteiltem Hosting fehlt. Der Bildschirm „System" zeigt jetzt eine Karte, **sobald etwas aussteht**, nennt die Namen der Migrationen und führt sie auf Knopfdruck aus. Das Lesen der Liste ist gekapselt: Eine Datenbank, die die Migrationstabelle noch nicht hat, darf nicht der Grund sein, dass dieser Bildschirm gar nicht mehr erscheint.
+
+**Zweitens: „Die Releaseseite antwortet nicht" war drei Fehler in einem Satz.** Beim Gegenprüfen des frischen Releases holte der Updater von diesem Rechner gar nichts – nicht weil die Leitung zu wäre, sondern weil diesem PHP ein **Zertifikatsspeicher** fehlt (`curl.cainfo` leer). Auf einem Webhosting ist das der häufigste der drei Gründe und der einzige, den man in einer Minute behebt; er muss also dastehen. `Download` merkt sich seither, woran es lag, und der Schritt in der Verwaltung trägt den Grund mit.
+
+**Und daraus folgte gleich noch etwas:** Bei genau diesem Fehler lohnt der zweite Weg. Der Dateizeiger benutzt die Einstellungen von OpenSSL, und die sind manchmal gesetzt, wo curl nichts findet – auf diesem Rechner **funktioniert der Abruf dadurch jetzt**. Was nicht passiert, ist das Naheliegende: Die Prüfung wird nicht abgeschaltet. Ein Update, das ohne Zertifikatsprüfung geladen wird, kann unterwegs ausgetauscht worden sein, und dann installiert der Knopf fremden Code.
+
+## ADR 069 – Das größte Bild über der Falz ist gar kein Bild (13.09.2026)
+
+Nachgemessen vor dem Livegang, auf der Startseite des Piloten statt auf einer Testseite: **Leistung 96 (Desktop) und 98 (Mobil)**, alles andere 100. Der Grund stand im Bericht: `LCP request discovery` – das größte Element über der Falz ist dort kein `<img>`, sondern der **Hintergrund des ersten Abschnitts**.
+
+Das ist ein struktureller Unterschied, kein Zufall: Ein `<img>` steht im HTML, der Browser sieht es beim ersten Durchlesen und beginnt zu laden. Ein Hintergrundbild steht im Stylesheet – der Browser erfährt erst von ihm, wenn er das CSS geholt und geparst hat. Die Regel aus ADR 039 („das erste Bild einer Seite lädt sofort") griff genau deshalb nicht: Sie sucht nach einem Bildbaustein, und es gab keinen.
+
+**Drei Vorabverweise mit Medienabfragen, nicht ein `imagesrcset`.** Das war die einzige Entscheidung, die wirklich eine war. Ein `srcset` wählt nach Breite, die Regeln des Compilers wählen nach Gerät – bei einem 1200 px breiten Fenster nähme das eine die 1600er Datei und das andere die 1920er, und der Browser lüde **zwei** Bilder statt einem. Dann kostet das Vorabholen mehr, als es bringt – genau der Fehler, der in diesem Projekt schon einmal fünf Punkte gekostet hat. Die drei Verweise tragen deshalb dieselben Grenzen wie der Compiler (`StyleCompiler::PRELOAD_DEVICES`), und die Variantenwahl ist eine einzige öffentliche Methode, die beide Seiten benutzen. Der Test vergleicht nicht nur, dass Verweise da sind, sondern dass **jeder Verweis dieselbe Datei meint wie die Regel**.
+
+**Gemessen danach: Desktop 97, Mobil 99**, LCP 1,3 s → 1,1 s. Kein Sprung auf 100 – was bleibt, ist das blockierende Stylesheet (300 ms FCP), und das ist zum großen Teil der Entwicklungsserver ohne Kompression, siehe `docs/QUALITY.md`.
+
+**Und ein Nebenfund, der mehr brachte als der Hauptpunkt.** Der Kopf fragte die Mediathek nach demselben Bild, das der Compiler ohnehin schon dreimal gesucht hatte – je Gerät eine Regel, je Regel eine Abfrage. `MediaLibrary::find()` merkt sich jetzt, wonach es in dieser Anfrage schon gefragt wurde: **Startseite 19 → 15 Abfragen**, und zwar einschließlich der Abfrage, die der Vorabverweis neu gebracht hat. Der Merkzettel lebt nur so lange wie die Anfrage, also kann er nicht veralten; beim Hochladen und Ändern wird er trotzdem geleert, weil derselbe Aufruf danach noch liest.
+
+## ADR 068 – Update aus dem Releasearchiv, in zwei Schritten (13.09.2026)
+
+Umut: „Dann Updater für Hoster optimieren?!" Der Updater aus ADR 035 setzt eine Git-Arbeitskopie voraus. Auf geteiltem Hosting gibt es die nicht – dort wird über das Releasearchiv installiert, und die Verwaltung sagte danach „Dieses Verzeichnis ist keine Git-Arbeitskopie". Also kein Update, außer von Hand über FTP. Das ist genau der Fall, für den dieses CMS gedacht ist.
+
+`ArchiveUpdate` geht denselben Weg wie die Erstinstallation: Archiv laden, Prüfsumme vergleichen, entpacken, Dateien ersetzen, migrieren. Drei Unterschiede trennen ein Update von einer Installation, und jeder davon ist eine Entscheidung:
+
+**Was dem Betreiber gehört, wird nicht angefasst.** `var/`, `.env`, `.env.local`, die hochgeladenen Schriften und das erzeugte Stylesheet-Bündel bleiben stehen. Deshalb wird `public/` als einziges Verzeichnis **Datei für Datei zusammengeführt** statt ersetzt: dort liegen die Dateien der Anwendung und die des Betreibers nebeneinander. Ein `rename()` des ganzen Ordners wäre eine Zeile weniger Code und hätte die Schriften gelöscht.
+
+**Der alte Stand wird beiseitegelegt, nicht gelöscht.** Er liegt unter `var/update/<Zeitstempel>/alt/`, bis jemand ihn entfernt. Scheitert das Ersetzen mittendrin, schiebt der Updater zurück, was er schon bewegt hat, und nimmt den Wartungszustand wieder heraus.
+
+**Es sind zwei Knöpfe, und das ist kein Umweg.** Der erste ersetzt die Dateien, der zweite führt die Migrationen aus. Dazwischen liegt eine neue Anfrage – denn ein PHP-Prozess, der sich selbst ausgetauscht hat, arbeitet mit den Klassen weiter, die er beim Start geladen hat. Migrationen im selben Durchgang liefen mit dem Code der alten Fassung. Der Wartungszustand bleibt zwischen beiden Schritten an, und die Oberfläche sagt, dass er es tut.
+
+**Geprüft wird das ohne Netz.** Das Herunterladen ist in `Download` gewandert – eine Klasse, die genau eine Sache tut und die HTTPS-Pflicht an einer einzigen Stelle durchsetzt. Der Test stellt eine Releaseseite in den Speicher und lässt den Rest echt laufen: echte Zip-Archive, echte Prüfsummen, echte Umbenennungen. Die Frage, um die es dabei geht, ist nicht „läuft der Download", sondern: Steht die hochgeladene Schrift danach noch da? Ein Test, der wirklich `git.kant-it.de` abfragt, wäre rot, wenn der Server umzieht, und grün, wenn im Archiv Unsinn steht.
+
+Dazu kommt ein Test, der die Ersetzungsliste des Updaters gegen die Mitnahmeliste von `scripts/build-release.php` hält. Denselben Fehler gab es schon einmal andersherum: `migrations.php` fehlte im Archiv, und es fiel erst auf Umuts Hosting auf.
+
+## ADR 067 – Die Verwaltung auf dem Telefon, und eigene Symbole (13.09.2026)
+
+Umut: „Bitte Backend mobiloptimieren, das Menü ist schlecht." Und kurz darauf: „Machst du auch gleich eigene Icons statt die Web-Dinger zu nutzen – auf dem Smartphone kommen sonst Emojis."
+
+Zwei Beobachtungen, eine Ursache: Die Verwaltung war für einen breiten Bildschirm gebaut. Zwölf Navigationspunkte nebeneinander ergeben auf 390 px eine Zeile, die seitlich hinausläuft.
+
+**Das Menü ist jetzt ein `<details>`**, das ab 760 px Breite aufgeklappt und darunter zugeklappt startet; die Zusammenfassung nennt den Bereich, in dem man gerade steht. Kein Skript, kein Zustand, der verloren gehen kann – und mit Tastatur bedienbar, weil der Browser das mitbringt. Die Ziele sind 44 px hoch, was keine Gestaltungsfrage ist, sondern die Größe einer Fingerkuppe.
+
+**Die Symbole waren Unicode-Zeichen** (▤ ◫ ☰ ▩ ⚙). Auf dem Schreibtisch sehen sie aus wie Symbole; ein Telefon ersetzt sie durch **Emoji** – buntes Zahnrad, bunter Briefumschlag, jedes in einem anderen Stil, und nichts davon in der Schrift der Oberfläche. Jetzt sind es zwölf eigene SVG-Pfade in einer Vorlage: eine Linienstärke, `currentColor`, kein zusätzlicher Request, keine Symbolschrift. Ein Test sucht in der Navigationsvorlage nach Zeichen aus den Emoji-Bereichen und hält jeden verwendeten Namen gegen die Sammlung – ein fehlender Name würde sonst still das Ersatzsymbol zeichnen, und zwei Einträge sähen gleich aus. Genau das war der Fall: „Formulare" und „Benutzer" trugen denselben Pfad.
+
+## ADR 066 – Ein Farbfeld, das beides kann (13.09.2026)
+
+Umut: „Wieso kein Colorpicker?" Berechtigte Frage. Die Farbfelder im Designbereich waren Textfelder – wer Grün wollte, musste `#2e7d5b` wissen.
+
+Der Grund dafür war echt: Ein `<input type="color">` kann **nur** eine Farbe. Die Gestaltung dieses CMS kennt aber auch `@akzent` – einen Verweis auf die Palette, der sich ändert, wenn die Palette sich ändert. Ein Farbwähler hätte daraus beim ersten Klick einen festen Wert gemacht und die Verbindung stillschweigend gekappt.
+
+**Das Textfeld bleibt deshalb maßgeblich**, und daneben stehen ein Farbfeld und eine Auswahl der Palettenfarben. Wer im Farbfeld zieht, schreibt einen Hexwert in das Textfeld; wer `@akzent` tippt, behält den Verweis, und das Farbfeld zeigt daneben nur an, wie diese Farbe gerade aussieht. Aufgebaut wird das von einem kleinen Skript über das vorhandene Feld: Ohne JavaScript bleibt das Textfeld übrig und die Seite vollständig bedienbar.
+
+## ADR 056 – Das Vorschaubild beim Teilen, und die robots.txt als Bot-Steuerung (13.09.2026)
+
+Umut: „Hast du auch schon SEO und Siteindex usw. übernommen?“ Der Abgleich mit dem Original war die Antwort – und er förderte einen Fehler der eigenen Software zutage.
+
+**Das Feld „Vorschaubild beim Teilen“ gab es seit dem SEO-Paket, ausgegeben wurde es nie.** Im Kopf stand `{% if socialImage %}`, gesetzt hat `socialImage` kein Controller. Damit hatte **keine** mit KantSites gebaute Seite ein `og:image` – beim Teilen in WhatsApp, LinkedIn oder Slack erschien eine Karte ohne Bild. Jetzt wird es aufgelöst: erst das eigens gesetzte Vorschaubild, sonst bei einem Beitrag sein Beitragsbild, als absolute Adresse und in der Variante bis 1600 px. Dasselbe Bild steht im strukturierten Datensatz des Beitrags. Ohne Bild gibt es `twitter:card: summary` statt der großen Karte, die sonst eine leere Fläche wäre. Dazu `og:site_name` und `og:locale`, die schlicht fehlten.
+
+**Die robots.txt war zu eng gefasst.** Das Original pflegt eine Liste, welche KI-Crawler die Website lesen dürfen (GPTBot, ClaudeBot, PerplexityBot …) und welche nicht (Bytespider, Diffbot, omgili, ImagesiftBot) – rund siebzig Zeilen in Blöcken je Bot. Das Feld für eigene Zeilen nahm dreißig und warf Leerzeilen weg, machte also aus Blöcken einen Klumpen. Jetzt 200 Zeilen, Leerzeilen bleiben als Trenner erhalten. Die erlaubten Anweisungen bleiben dieselben: Kommentar, `User-agent`, `Allow`, `Disallow`, `Crawl-delay`.
+
+**Kein Sitemap-Index.** Das Original liefert einen (drei Teilkarten von Yoast), KantSites eine einzelne Datei mit allen Adressen. Ein Index ist erst ab 50.000 Adressen oder 50 MB vorgeschrieben; bei 35 Adressen wäre er eine Datei mehr ohne jeden Unterschied für eine Suchmaschine. Aufgeteilt wird, wenn es eine Website gibt, die das braucht – und dann automatisch, nicht als Einstellung.
+
+## ADR 059 – Cloudflare Turnstile: optional, und der Preis steht dabei (13.09.2026)
+
+Umut: „bei Formularen hätte ich gerne optional Cloudflare." Eingebaut sind drei Prüfungen ohne Dritte – ein verstecktes Feld, ein signierter Zeitstempel, fünf Absendungen je Absender und Stunde. Sie halten ab, was ein Skript ausfüllt; gegen jemanden, der einen echten Browser fernsteuert, helfen sie nicht.
+
+**Turnstile und nicht reCAPTCHA:** keine Cookies, keine Google-Anmeldung, keine Verhaltensauswertung über Websites hinweg. Ein Dritter bleibt es trotzdem – die IP-Adresse des Absenders geht an Cloudflare, und das gehört in die Datenschutzerklärung.
+
+Drei Entscheidungen, die nicht offensichtlich sind:
+
+**Aus, bis jemand sie einschaltet.** Eine Website ohne Spamwelle soll keinen Dritten einbinden. Eingeschaltet ohne Schlüssel wird abgelehnt: das wäre ein Formular, das jede Anfrage verschluckt.
+
+**Antwortet Cloudflare nicht, gilt die Absendung als bestanden.** Ein Ausfall bei einem Dritten darf keine Kundenanfrage kosten. Spam ist ärgerlich, eine verlorene Anfrage ist teurer.
+
+**Die Sicherheitsrichtlinie öffnet sich nur dort, wo ein Formular steht** – Skript und Rahmen von `challenges.cloudflare.com`, und das auch nur auf den betroffenen Seiten. Jede andere Seite behält `script-src 'none'`.
+
+Der Preis steht in der Verwaltung: das Widget braucht JavaScript. Ohne Skript ist das Formular dann nicht absendbar – genau die Art von Verschlechterung, die dieses Projekt sonst vermeidet. Deshalb steht im Formular ein `<noscript>`-Hinweis mit dem Weg über E-Mail.
+
+## ADR 065 – Die Verwaltung muss nicht /admin heißen (13.09.2026)
+
+Umut: „Erstelle mal Möglichkeit, Backend anzupassen. Also URL, Admin auf irgendwas."
+
+`/admin` ist die erste Adresse, die ein Scanner probiert, und jeder Anmeldeversuch, der dort ankommt, kostet Rechenzeit und Logzeilen. Ein anderer Name nimmt der Maschinerie das Ziel. **Er ersetzt kein gutes Passwort** – die Anmeldesperre nach fünf Versuchen bleibt die eigentliche Verteidigung –, aber er macht die Website für automatisierte Angriffe uninteressant.
+
+**Der Name steht in der Umgebung, nicht in der Datenbank.** Routen stehen fest, bevor die erste Datenbankabfrage läuft; eine Adresse, die erst beim Rendern bekannt wird, käme zu spät. `ADMIN_PATH` füllt einen Parameter, der als Präfix in jeder Verwaltungsroute steht (`#[Route('/%kant.admin_path%/media')]`), in der Firewall, in den Schutzkopfzeilen und in der Statistik.
+
+Drei Dinge, die dabei nicht offensichtlich sind:
+
+**Die robots.txt nennt den Namen nicht mehr.** Sie ist öffentlich und das erste, was ein Angreifer liest – ein `Disallow: /stiller-eingang` wäre ein Wegweiser. Beim Standardnamen bleibt die Zeile, weil diese Adresse ohnehin jeder kennt; bei jedem anderen entfällt sie. Vom Indexieren hält die Verwaltung ihr eigener Kopf `X-Robots-Tag: noindex` ab.
+
+**Die Auffangroute für Seiten steht jetzt zuletzt.** Sie schließt per Regex `/admin` aus – einen frei wählbaren Namen kann sie nicht kennen. Statt die Regex dynamisch zu machen, lädt `routes.yaml` erst alle benannten Routen und dann die Auffangroute. Das ist ohnehin die richtige Reihenfolge.
+
+**Der Befehl räumt den Zwischenspeicher auf, aber nicht den, in dem er selbst läuft.** Die Routen tragen den Namen einbetoniert; ohne Aufräumen gälte der alte weiter. Wer sich dabei den Boden unter den Füßen wegzieht, endet mit einem Fehler, obwohl alles geklappt hat – also bleibt die laufende Umgebung stehen, und der Befehl sagt, wie man sie leert.
+
+`php bin/console cms:admin:path` zeigt die aktuelle Adresse, mit Argument ändert er sie – nach einer Prüfung, dass der Name frei ist und keine Seite verdeckt.
+
+## ADR 064 – Ein Stylesheet, das nichts mehr tat (13.09.2026)
+
+Umut: „ganz unten Einwilligung ändern, Datenschutz usw. ist links, komplett bitte besser lösen." Das war kein Gestaltungswunsch, sondern ein Fehlerbericht: Der **Einwilligungsdialog stand ungestaltet unter dem Fuß**, linksbündig, ohne Rand, ohne Hintergrund.
+
+Die Ursache lag drei Veröffentlichungen zurück. Beim Entfernen alter Regeln war zweimal der Selektorrest stehen geblieben:
+
+```css
+.site-header
+.site-footer
+/* Kommentar */
+.legal-bar{padding:16px 20px;text-align:center;…}
+```
+
+CSS liest darüber hinweg: Der offene Selektor nimmt den nächsten mit, und aus zwei Regeln wird eine, die nirgends greift. Dasselbe war der `.consent-bar`-Regel passiert. **Ein Stylesheet beschwert sich nicht – es wirkt nur nicht mehr**, und beides blieb unbemerkt, weil kein Test das Aussehen dieser beiden Leisten prüft.
+
+Repariert, und ein Test liest jetzt jede CSS-Datei zeilenweise: Was wie ein Selektor beginnt, muss auch wie einer enden. Er findet den Fehler in beiden Fassungen, geprüft gegen den alten Stand.
+
+## ADR 063 – Der Bildbetrachter: ein Verweis, den ein Skript veredelt (13.09.2026)
+
+Umut: „Bilder vergrößern Funktion, ein Popup-Viewer – gerne auch auswählbar wie bei WordPress, ob man bei Klick Galerie anschauen möchte."
+
+Auswählbar heißt hier: Jedes Bild hat unter „Beim Klick" drei Möglichkeiten – nichts tun, vergrößern, zu einer Adresse führen –, und eine Galerie hat einen Schalter „Bilder vergrößerbar".
+
+**Die Grundlage ist ein gewöhnlicher Verweis auf die große Bildfassung.** Ohne JavaScript öffnet ein Klick sie, zurück führt die Zurück-Taste; nichts ist kaputt. Das Skript – geladen nur auf Seiten, die tatsächlich ein vergrößerbares Bild enthalten – fängt den Klick ab und zeigt das Bild über der Seite, mit Blättern innerhalb einer Galerie.
+
+Benutzt wird `<dialog>`: Fokusfang, Schließen mit Escape und die Auszeichnung als Dialog bringt der Browser mit. Eine nachgebaute Fassung aus `<div>` und Tastaturabfragen wäre mehr Code und weniger zugänglich. Mit gedrückter Zusatztaste bleibt es ein normaler Verweis – wer ein Bild in einem neuen Reiter öffnen will, soll das können.
+
+## ADR 062 – Zwei Dinge, die am Rand kleben: Knopf nach oben und Rechtszeile (13.09.2026)
+
+**Der Knopf „nach oben" ist ein Anker, kein Skript.** `<a href="#seitenanfang">` springt an den Seitenanfang – das kann ein Browser seit jeher allein. Eingeblendet wird er über eine Scroll-Zeitachse (`animation-timeline: scroll(root)`), dieselbe Technik wie bei den Einblendungen; wo es sie nicht gibt, steht er von Anfang an da. Sichtbar und nutzbar ist besser als unsichtbar. Alles daran ist einstellbar – Seite, Form, Größe, Farben, Schwelle, Beschriftung –, weil er auf jeder Seite in der Ecke klebt und deshalb zur Gestaltung passen muss. Solange der Einwilligungsdialog offen steht, tritt er zurück.
+
+**Die Rechtszeile wird ein Baustein.** Bisher hängte das System sie als eigene Leiste unter den Fuß: auf einer Website mit dunklem Fuß ein heller Streifen, den niemand dort haben wollte. Als Baustein steht sie im Fußbereich, erbt dessen Farben und lässt sich wie jeder andere Baustein gestalten. Die eingebaute Leiste erscheint weiterhin – aber nur, wenn die Seite den Baustein nicht enthält. Die Pflicht, Impressum und Datenschutz von jeder Seite aus erreichbar zu halten, bleibt damit erfüllt, ohne dass zweimal dasselbe dasteht.
+
+## ADR 061 – Die Vorschau zeigt nie eine Seite ohne ihre Gestaltung (13.09.2026)
+
+Umut, mit Blick auf einen Screenshot des Editors: „im Screenshot sind die Buttons nicht gleiche Farbe, es sollte exakt nachladen, die Vorschau soll wie das echte aussehen."
+
+**Nachgemessen: die Farben sind identisch.** Knopf, Hero-Hintergrund, Hintergrundbild und Textfarbe geben in der Vorschau und auf der veröffentlichten Seite exakt dieselben berechneten Werte. Was auf dem Bild zu sehen war, war ein Zwischenzustand – links oben stand „Vorschau wird aktualisiert …".
+
+Der Zwischenzustand war trotzdem ein Fehler, und ein langer: **1440 Millisekunden** lang war die Vorschau sichtbar und ungestaltet, gemessen an der nachgebauten Startseite. Der Grund liegt in einer Zeile: die erzeugten Stile wurden im `load`-Ereignis des Rahmens angewandt – und das feuert erst, wenn **das letzte Bild** geladen ist. Bei sechzehn Bildern sieht man bis dahin die Seite ohne eine einzige Farbe.
+
+Drei Änderungen, jede aus einem eigenen Fehlversuch:
+
+1. **Angewandt wird, sobald das Dokument geparst ist**, nicht wenn es fertig geladen ist. Für `srcdoc` gibt es dafür kein verlässliches Ereignis, also wird Bild für Bild nachgesehen, ob der Kopf schon da ist.
+2. **Der Rahmen bleibt verdeckt, bis die Gestaltung sitzt.** Eine leere Fläche für einen Moment ist besser als eine falsche Seite.
+3. **Nur das neue Dokument wird gestaltet.** Der erste Anlauf sah beim Warten das *alte* Dokument – es trägt dieselben Kennzeichen –, gestaltete es, schaltete sichtbar, und `srcdoc` ersetzte es gleich darauf durch den ungestalteten neuen Inhalt. Der Fehler war damit derselbe wie vorher, nur schneller.
+
+Gegen einen Rückfall prüft die Editorkontrolle nicht die Zeit, sondern das Verhalten: der Rahmen **muss** beim Aufbau verdeckt werden und danach wieder sichtbar. Eine Zeitmessung hätte auf der kleinen Testseite nichts gefunden – das Fenster ist dort zu kurz.
+
+## ADR 060 – Die Fehlerseite eines Formulars ist dieselbe Seite (13.09.2026)
+
+Beim Einbau von Turnstile gefunden: wer ein Pflichtfeld vergaß, bekam die Seite **ohne Gestaltung** zurück. Der Formularcode baute sie selbst ein zweites Mal auf und ließ dabei alles weg, was er nicht kannte – Theme, Blockstile, Schriften, das Stylesheet-Bündel. Zwei Renderwege für dieselbe Seite, und der zweite hinkte hinterher, seit es den ersten gibt.
+
+Jetzt geht auch dieser Weg durch den Seitencontroller. Die Meldungen und die eingetippten Werte reisen als Anfrageattribut mit; die Seite entsteht genau einmal, mit allem, was dazugehört. Eine Sonderregel blieb nötig: die Startseite leitet von ihrem eigenen Pfad auf `/` um, und diese Umleitung hätte die Meldungen verworfen – sie gilt für diesen Weg nicht.
+
+## ADR 058 – Bilder in der Größe, in der sie erscheinen (13.09.2026)
+
+Gemessen auf der nachgebauten Startseite: ein Telefon lud das Hintergrundbild des Hero mit **1920 Pixeln und 189 KB**. Zu sehen war davon nie mehr als ein Viertel. Die Ursache ist bauartbedingt: wer im Editor ein Hintergrundbild wählt, sitzt am Schreibtisch und setzt es unter „Desktop“; kleine Geräte erben diese Regel, und CSS kennt kein `srcset`.
+
+Die Regeln stehen aber ohnehin je Gerät da. Der Kompilierer ergänzt deshalb für Tablet und Telefon dieselbe Bildwahl, die entstünde, wenn jemand sie einzeln gesetzt hätte – samt Verlauf und Abdunkelung, denn ohne sie stünde heller Text plötzlich auf einem ungedämpften Bild. Ein ausdrücklich gesetztes Bild wird nie ersetzt. **189 KB → 40 KB auf dem Telefon.**
+
+Dasselbe Thema bei `<img>`: jedes Bild behauptete, 800 Pixel breit zu erscheinen – auch ein Logo, das 190 Pixel breit ist. Jetzt gilt: eine im Block gesetzte feste Breite ist die Antwort; sonst steht bei verzögert geladenen Bildern `sizes="auto"`, womit der Browser selbst nachmisst (Rückfallangaben dahinter für Safari). Das vorgezogene Bild behält die Annahme, weil seine Größe zum Zeitpunkt der Anfrage noch nicht feststeht.
+
+Und die Eile lag auf der falschen Stelle: `fetchpriority="high"` bekam das erste Bild überhaupt – das Logo im Kopfbereich. Es bekommt es jetzt das erste Bild im **ersten Abschnitt des Inhalts**; Bilder im Kopfbereich laden weiterhin sofort, aber ohne Vorrang.
+
+**Was nicht blieb:** ein Vorabladen des Hero-Hintergrunds (`<link rel="preload" as="image">`). Der Gedanke stimmt – ein Bild im Stylesheet wird spät entdeckt –, die Messung nicht: mobil **95 → 90**. Das Bild nimmt genau die Bandbreite weg, die der Text für den größten Aufbauschritt braucht. Wieder entfernt.
+
+## ADR 057 – Schriften vom eigenen Server (13.09.2026)
+
+Eine Schrift von `fonts.googleapis.com` kostet zweierlei. Technisch: der Browser holt erst das Stylesheet, findet darin die Adresse der Schriftdatei und holt dann diese – zwei fremde Verbindungen nacheinander, gemessen 820 ms, in denen keine Zeile in der richtigen Schrift steht. Rechtlich: ein Dritter erfährt die IP-Adresse jedes Besuchers, und dafür gibt es in Deutschland Abmahnungen (LG München I, 3 O 17493/20).
+
+Deshalb: **einmal holen, selbst ausliefern.** Ein Knopf im Designbereich (und `cms:fonts:fetch` auf der Konsole) lädt die gewählten Schnitte als WOFF2 nach `public/assets/fonts`, schreibt die `@font-face`-Regeln daneben und meldet, was geladen wurde. Die Lizenz erlaubt das ausdrücklich – Google Fonts stehen unter OFL oder Apache 2.0.
+
+Drei Entscheidungen dabei: **Kein neues Paket** – geholt wird mit curl, ersatzweise über `allow_url_fopen`, genau wie der Installer es tut; eine zusätzliche Abhängigkeit würde jedes Update auf einem Hosting ohne Composer scheitern lassen. **Nur Latein** – Kyrillisch und Vietnamesisch wären zwei Drittel der Bytes für nichts. **Nicht beim Seitenaufruf** – ein Besucher wartet nie auf einen fremden Server, auch nicht mittelbar. Liegen die Dateien nicht, bleibt es beim Verweis auf Google statt einer Seite ohne Schrift.
+
+## ADR 056 – Vier Stylesheets werden eines, und der Webserver bekommt Anweisungen (13.09.2026)
+
+Vor dem Livegang gemessen, nicht geschätzt. Jede der vier CSS-Dateien hält das Zeichnen der Seite auf, zusammen 46 KB. Sie sind getrennt, weil sie beim Schreiben Verschiedenes tun; beim Ausliefern ist das kein Argument. Ein Bündel trägt die Prüfsumme seines Inhalts im Namen, wird beim ersten Aufruf nach einer Änderung erzeugt und ohne Kommentare geschrieben. Minifiziert wird bewusst nur das: Kommentare und Einrückung. Ein Minifier, der Selektoren umbaut, spart Zeichen und kostet einen Abend Fehlersuche – in `calc(100% - 20px)` und `.a :hover` trägt ein Leerzeichen Bedeutung. Fehlt das Schreibrecht, werden die Quellen einzeln geladen: langsamer, aber heil.
+
+Dazu eine `public/.htaccess`, die diesen Namen verdient: Kompression (mod_deflate/mod_brotli), ein Jahr Cache für alles, was seine Fassung oder Kennung in der Adresse trägt – Stylesheets und Skripte bekommen dafür `?v=` mit der Programmfassung –, und ein Riegel vor Dateien, die niemanden angehen. HTTPS-Umleitung und HSTS stehen auskommentiert mit dem Grund dabei: eine Umleitung ohne Zertifikat ist eine Endlosschleife, und HSTS lässt sich ein halbes Jahr lang nicht zurücknehmen.
+
+**Der Entwicklungsserver sendet jetzt dieselben Kopfzeilen und komprimiert ebenso.** Ohne das misst man hier Größen, die es im Betrieb nie gibt: dieselbe Startseite ging von 90 auf 96 Punkte, ohne dass sich an ihr etwas geändert hätte.
+
+## ADR 055 – Das Symbol der Website entsteht aus einem Bild der Mediathek (13.09.2026)
+
+Umut: „dann brauchen wir Favicon-Möglichkeit zum Festlegen“. Ein Favicon ist der einzige Teil der Gestaltung, den ein Besucher sieht, bevor die Seite geladen ist – und bisher war es das mitgelieferte Zeichen, für jede mit KantSites gebaute Website dasselbe.
+
+Naheliegend wäre gewesen, die WebP-Varianten der Mediathek zu verwenden. Dagegen sprechen zwei Dinge: die kleinste Variante ist 480 px breit (für ein 32-px-Symbol zwei Größenordnungen zu viel), und ein Favicon ist **quadratisch** – ein breites Logo würde gestaucht oder zur Briefmarke.
+
+**Deshalb entstehen die Symboldateien beim Speichern der Einstellung, nicht beim Aufruf**: ein quadratischer Ausschnitt in 32 px (Reiter), 180 px (Startbildschirm) sowie 48 und 192 px (Google nimmt nur Vielfache von 48), als PNG, weil das jeder Browser liest. Schlägt das fehl, wird die Einstellung gar nicht erst gespeichert – ein Verweis auf ein Symbol, das es nicht gibt, wäre schlechter als das alte Symbol. Ausgeliefert werden sie unter `/favicon.png`, `/favicon-192.png`, `/favicon.ico` (48 px) und `/apple-touch-icon.png`, mit der Bildkennung als Version am Verweis, damit ein Wechsel im Browser ankommt. Auch `/favicon.svg` beantwortet die Anwendung: ohne eigenes Symbol das mitgelieferte Zeichen, mit eigenem ein 302 auf das 192er – als Datei in `public/` hätte der Webserver immer das mitgelieferte Zeichen ausgeliefert, und Suchmaschinen hätten es behalten.
+
+Nebenwirkung, die die Tests fanden: `SiteSettings` fragt die Datenbank jetzt auch aus der Nicht-gefunden-Seite heraus – und **vor** der Installation gibt es die Tabelle noch nicht. Eine gezielt gefangene `TableNotFoundException` liefert dort die Standardwerte; jeder andere Datenbankfehler bleibt ein Fehler.
+
+## ADR 054 – Unterstrichene Links: nur im Fließtext, und dort abschaltbar (13.09.2026)
+
+Umut: „und links haben alle underlined“. Stimmte: `a` hatte keine eigene Textdekoration, also entschied der Browser – und der unterstreicht alles. Sichtbar wurde das an Stellen, wo ein Unterstrich nur wie ein Fehler aussieht: im „Ansehen“-Streifen über einem Kartenbild, im Menü bei der aktuellen Seite, in der Rechtszeile des Fußes, neben dem Telefonsymbol im Kontaktblock.
+
+Die Trennlinie ist nicht Geschmack, sondern Funktion: **ein Link mitten im Fließtext ist ohne Unterstrich nur an seiner Farbe zu erkennen** – für Menschen mit Farbsehschwäche also gar nicht (WCAG 1.4.1). Ein Link, der als Karte, Knopf, Menüeintrag oder Kontaktzeile mit Symbol auftritt, ist an Form und Ort erkennbar und braucht keinen.
+
+Also: strukturelle Links ohne Unterstrich (beim Überfahren erscheint er), Fließtext mit – und für den Fließtext **ein Schalter im Designbereich** statt einer stillen Entscheidung, mit dem Hinweis, was man sich damit einhandelt. Die aktuelle Seite im Menü wird über das Schriftgewicht kenntlich und nicht mehr über die Akzentfarbe: die reichte im dunklen Fußmenü nicht für den Kontrast – gefunden von der Browserprüfung, nicht von mir.
+
+## ADR 053 – Eine Website ohne Beiträge redet nicht von Beiträgen (13.09.2026)
+
+Umut: „Können wir Beiträge optional machen? Wenn's keine gibt, überall ausblenden – ist das schon so?“ Teilweise: die Sitemap ließ das Archiv weg, `llms.txt` auch. Der Rest nicht – `/beitraege` antwortete mit einer leeren Seite, `/feed.xml` mit einem Feed ohne Einträge, jede Seite verwies im Kopf auf diesen Feed, und ein Beitragslisten-Baustein zeigte öffentlich den Kasten „Hier erscheinen die Beiträge, sobald welche veröffentlicht sind“.
+
+**Eine Adresse, die nichts zeigt, ist kein Inhalt, sondern eine Baustelle mit eigener Adresse.** Archiv und Feed antworten deshalb mit 404, solange sie nichts zu zeigen haben – das gilt auch für eine einzelne Kategorie, deren letzter Beitrag gelöscht wurde: der Begriff bleibt als wiederverwendbare Beschriftung bestehen, sein Archiv verschwindet. Der Verweis auf den Feed steht nur im Kopf, wenn es ihn gibt. Der Hinweiskasten bleibt – aber **nur im Editor**, denn dort erklärt er die leere Stelle, während er öffentlich nur ein Versprechen wäre.
+
+Beim Nachmessen fiel eine zweite Sache auf, die nichts mit Beiträgen zu tun hat: die Beitragsliste fragte **je Beitrag** nach seinem Bild und seinen Begriffen. Zwölf Beiträge kosteten 24 Abfragen, und `neighbours()` (Vor/Zurück) lädt bis zu 500 Beiträge. Bilder und Begriffe kommen jetzt in je einer Abfrage für die ganze Liste: die Startseite des Nachbaus fiel von 22 auf 16 Abfragen.
+
+## ADR 052 – Einblenden beim Scrollen, ohne eine Zeile JavaScript (13.09.2026)
+
+Umut: „Effekte gibt es keine, sind die aktiv aktuell?“ Nachgemessen statt geraten: die Zeigereffekte liefen alle (Karte −8 px, Bild 1,06×, Symbolkarte −4 px, Knopf −2 px, Titel in Akzentfarbe). Die **Einblendungen beim Laden** gab es seit Dokumentschema v3 – und **benutzt hatte sie niemand**. Ein Werkzeug, das im Kasten bleibt, ist kein Werkzeug.
+
+Der Grund, warum es im Kasten blieb, war ein echter: eine Animation, die beim *Laden* läuft, ist unterhalb der Falz wertlos – sie ist vorbei, bevor jemand hinsieht. Öffentliche Seiten laufen ohne JavaScript, also gab es bisher nichts, was den Scrollstand kennt.
+
+**Inzwischen kennt CSS ihn.** `animation-timeline: view()` bindet den Ablauf einer Animation an die Sichtbarkeit des Elements: dieselben Keyframes, aber sie laufen, wenn der Abschnitt in den Blick kommt. Dreifach abgesichert: hinter der Bewegungsschranke, hinter `@supports` (Firefox und Safari behalten heute die Fassung von vorher – Einblenden beim Laden, nichts fehlt), und mit einem Bereich, der endet, bevor der Abschnitt in der Bildschirmmitte steht.
+
+**Und dann hat die Prüfung etwas gefunden, das ich selbst gebaut hatte.** Eine Scroll-Zeitachse ist **umkehrbar**: ein Abschnitt außerhalb des Blicks steht wieder am Anfang der Kurve. Mit der ursprünglichen Kurve (`opacity: .35`) hieß das: alles unterhalb der Falz ist dauerhaft blass – und blasser Text ist kein Effekt, sondern schlechterer Kontrast. axe meldete prompt fünfzehn Verstöße. Der Versuch mit 0,85 half nicht: aus `#3d4d5c` wird bei 85 Prozent `#78838d`, also 3,86:1 statt 7,1:1.
+
+**Auf dem Scrollweg wird deshalb keine Deckkraft animiert, nur Bewegung.** 20 px für „rise“, 10 px für „fade“, Deckkraft bleibt 1. Der Effekt trägt trotzdem, und der Text ist an jeder Stelle lesbar – auch wenn er gerade nicht zu sehen ist. Beim Laden (ohne Scroll-Zeitachse) bleiben die alten Kurven mit Deckkraft, weil sie dort einmalig laufen und nicht zurückspulen.
+
+**Benutzt wird es jetzt auch:** alle drei Beitragsvorlagen bringen die Einblendung je Abschnitt mit, und der Nachbau von kant-it.de hat sie auf jeder Seite – im Hero gestaffelt, darunter je Abschnitt.
+
+## ADR 051 – Vier Darstellungen für dieselbe Beitragsliste (13.09.2026)
+
+Umut wollte auch für die Auflistung mehrere Formen. Dieselben Daten, dasselbe Markup – nur eine Klasse wechselt. Eine Darstellung kostet dadurch ein paar Regeln CSS und keine Zeile PHP.
+
+- **Karten** – Raster mit Bild oben. Für eine Übersicht.
+- **Liste** – Bild links, Titel und Auszug rechts. Für ein Archiv.
+- **Kompakt** – nur Titel und Datum, durch Linien getrennt, ohne Bilder. Für eine Randspalte oder ein langes Verzeichnis.
+- **Wechselseitig** – großes Bild, Text daneben, und bei jedem zweiten Beitrag die Seiten getauscht.
+
+**Die erste Fassung von „Wechselseitig" war ein umgedrehter Flexkasten und sah auch so aus.** Umut hat es zu Recht hässlich genannt. Was gefehlt hat, war nicht die Umkehrung, sondern alles andere: das Bild sitzt jetzt in einer Karte mit Ecken und weichem Schatten in festem Verhältnis 16:10, damit die Reihen gleich hoch sind; der Text bekommt eine Nummer aus einem CSS-Zähler, eine begrenzte Zeilenlänge und einen sichtbaren Verweis; zwischen den Reihen liegt eine feine Linie. Beim Zeigen zieht das Bild auf und der Titel nimmt die Akzentfarbe – die Reihe selbst bleibt stehen, denn sie ist keine Karte.
+
+**Zwei Details, die der Bau gelehrt hat:** die Karte *ist* das Listenelement, also zählt `:nth-child` auf ihr und nicht eine Ebene tiefer – die erste Fassung wechselte deshalb gar nicht. Und die Umkehrung läuft über `order` der beiden Spalten statt über `row-reverse`, weil sich damit auf schmalen Bildschirmen sauber wieder Bild-über-Text ergibt.
+
+**Die Nummer kommt aus einem Zähler, nicht aus dem Inhalt.** Auf Seite zwei beginnt sie wieder bei 01. Das ist ehrlich: der Beitrag weiß nicht, der wievielte er ist, und eine Nummer, die das behauptet, wäre erfunden.
+
+## ADR 050 – Drei Aufbauten für einen Beitrag (13.09.2026)
+
+Umut: „ich hätte gerne mehrere Designs zur Auswahl, 2–3 Stück für Beiträge.“
+
+**Warum das bei Beiträgen sinnvoll ist und bei Seiten nicht:** bei einer Seite weiß vorher niemand, was daraus wird – ein leeres Dokument ist dort die ehrliche Voreinstellung. Ein Beitrag hat dagegen fast immer dieselbe Form: Kopf, Text, Bilder, ein Weg weiter. Wer jedes Mal von vorn anfängt, baut jedes Mal etwas leicht anderes, und nach zwanzig Beiträgen sieht ein Archiv aus wie zwanzig Websites.
+
+**Die drei:** *Bildkopf* (Bild über die volle Breite, Titel darauf – für Projekte), *Klassisch* (Titel und Vorspann schmal, Bild darunter – für lange Texte), *Magazin* (Titel neben den Eckdaten – wenn Kunde, Leistung und Jahr zählen). Gewählt wird beim Anlegen, im selben Formular wie Titel und Adresse.
+
+**Es sind Startpunkte, keine Schablonen.** Jeder Block lässt sich danach verschieben, ändern und löschen wie jeder andere. Festgelegt wird nur die erste Entscheidung – und die ist die, die am schwersten nachzuholen ist.
+
+**Kein Aufbau verlässt sich auf ein Bild, das es noch nicht gibt.** Wo ein Beitragsbild hingehört, steht ein Platzhalter; der dunkle Kopf ohne Bild sieht schlicht aus statt kaputt. Ein Aufbau, der erst nach dem ersten Upload funktioniert, wäre beim Anlegen wertlos.
+
+**Und die Regel, die dabei gefallen ist:** der erste Textblock eines Abschnitts wurde automatisch zur Kleinbeschriftung in Akzentfarbe. Das gestaltet nach **Position statt nach Absicht** – im Fußbereich wurde daraus roter Versalientext für den Firmennamen, in der Magazin-Vorlage aus dem Einstiegsabsatz eine Kleinbeschriftung. Beides sah aus wie ein Fehler, weil es einer war. Wer eine Beschriftung will, stellt sie ein; dafür gibt es den Designbereich. Die Demoseite verliert dadurch ihre Versalienzeilen und wirkt ruhiger – dasselbe Ergebnis wie beim Rahmen der Spalten.
+
+## ADR 049 – Die Beitragsseite, und warum das kein Plugin wurde (Dokumentschema v18, 13.09.2026)
+
+Umut: „Beitragsseite gefällt mir nicht, sollte wie bei kant-it.de sein oder besser. Falls nötig Plugin bauen.“
+
+Nachgesehen: die Originalseite besteht aus Kopfbild, Text, **Bildergalerie**, **Vor/Zurück zwischen Projekten** und einem **Abschlussaufruf**. Galerie und Aufruf gab es als Bausteine längst – sie waren nur nicht benutzt. Die Navigation zwischen Beiträgen gab es nicht.
+
+**Warum das kein Plugin geworden ist.** Ein Plugin ist in diesem CMS ein Bausteintyp mit Namensraum, dessen Eigenschaften der Kern *aufbewahrt, aber nicht rendert* – genau damit eine abgeschaltete Erweiterung keine Seite unlesbar macht. Ein Plugin kann also nichts ausgeben, solange es keine Laufzeit dafür gibt (Arbeitspaket H). Und die Nachbarn eines Beitrags sind keine Fremdfunktion: sie stehen in derselben Tabelle wie die Beitragsliste, die der Kern schon füllt. Ein Plugin dafür wäre eine Hülle um eine Kernabfrage gewesen. Also ein Baustein: `postnav`, Dokumentschema v18.
+
+**Die Regel der Beitragsliste gilt auch hier: der gespeicherte Inhalt kennt keinen Beitrag.** Gespeichert sind zwei Beschriftungen, mehr nicht. Welcher Beitrag vorher und nachher kommt, entscheidet der Renderer beim Ausliefern – sonst könnte ein altes Dokument auf einen Beitrag zeigen, den es nicht mehr gibt oder der nie veröffentlicht wurde.
+
+**Gesucht wird innerhalb derselben Kategorie:** von einem Projekt führt man zum nächsten Projekt, nicht zur nächsten Pressemitteilung. **Am Rand wird nicht umgebrochen** – der neueste Beitrag hat keinen Vorgänger. Ein Ring wäre bequem zu programmieren und eine Falle für den Leser, der glaubt, er sei am Anfang.
+
+**Dabei zwei Dinge gelernt:** `present()` gibt für eine Liste bewusst keine Kennung heraus, nur Titel und Adresse – die Nachbarsuche vergleicht deshalb über die Adresse. Und die Abfrage kostet etwas, also läuft sie nur, wenn die Seite den Baustein wirklich enthält.
+
+**Was ich zusätzlich geändert habe, ohne gefragt zu werden:** die Absätze der übernommenen Projekttexte begannen mit dem wiederholten Titel und der Zwischenüberschrift, weil beides im selben Absatz stand – 20 Beiträge betroffen. Und schmale Abschnitte standen am linken Rand statt in der Mitte: `max-width` ohne `margin:auto` ist eine halbe Einstellung.
+
+## ADR 047 – Ein Slider, der von selbst weiterblättert (13.09.2026)
+
+Umut wollte die Autorotation. Die Regel „öffentliche Seiten laufen ohne JavaScript“ steht seit dem ersten Tag, und sie bleibt – **mit einer Ausnahme, die es schon gab**: die Tabs laden ein kleines Skript, aber nur auf Seiten, die Tabs enthalten. Der Slider folgt genau diesem Muster.
+
+**Die Einstellung sind Sekunden, kein Häkchen.** 0 heißt aus, unter drei Sekunden wäre es keine Hilfe mehr, sondern Hektik. Die Zahl steht im Baustein, nicht im Skript.
+
+**Was das Skript nicht tut, ist der interessantere Teil:**
+- Es läuft **gar nicht**, wenn das System weniger Bewegung verlangt.
+- Es hört **endgültig** auf, sobald jemand tippt, klickt, wischt oder von Hand scrollt. Nicht „pausiert kurz“ – aus. Wer selbst blättert, hat entschieden.
+- Es pausiert, solange der Zeiger darin ist, solange etwas darin den Fokus hat, solange der Tab im Hintergrund liegt und solange der Slider nicht zu sehen ist.
+
+**Ohne das Skript bleibt alles benutzbar**: wischen, scrollen, Tastatur, Punkte. Es kommt nur eine Bequemlichkeit dazu, es hängt nichts davon ab.
+
+**Und ein Fehler beim Bauen, der zeigt, warum man so etwas nachmisst:** die erste Fassung rechnete das Sprungziel aus `offsetLeft` und zog zusätzlich den Offset des Sliders ab – bei einem Slider, der selbst der Bezugsrahmen ist, kam dabei −78 heraus, also gar keine Bewegung. Gemessen wird jetzt über die Bildschirmrechtecke. Der Test dazu ist kein Schnappschuss, sondern ein Verlauf: 0 → 666 → 1332 → 1998 in drei Schritten, und nach einem Mausrad-Ereignis bleibt der Wert stehen.
+
+## ADR 048 – Eine Beitragsliste darf blättern (13.09.2026)
+
+Umut: „fehlt die Pagination bei Projekte? Es werden nur 12 angezeigt.“ Richtig, und es widersprach der eigenen Regel aus Arbeitspaket M: *eine feste Obergrenze ist kein Blättern, sie verschweigt, dass etwas fehlt.* Für die Verwaltung war das behoben, für die Beitragsliste einer Seite nicht.
+
+Der Unterschied ist absichtlich und heißt jetzt `paginate`: eine **Auswahl** auf der Startseite zeigt die neuesten vier und hört auf – dort will niemand blättern, dort will man weiter zur Übersicht. Eine **Übersichtsseite** blättert und sagt dabei, wie viele es insgesamt sind.
+
+Zwei Kleinigkeiten, die dabei wichtig waren: eine blätternde Liste nimmt die Seitenzahl aus der Anfrage, eine Auswahl immer die erste – sonst würden zwei Listen auf derselben Seite einander umblättern. Und eine Seitenzahl jenseits des Endes landet auf der letzten Seite statt im Leeren.
+
+**Beim Bauen zum zweiten Mal dieselbe Falle:** die Seitenzahl war in der Schließung, die die Blöcke durchläuft, nicht gebunden – genau wie vorgestern beim Filter für Überschriften. Diesmal fiel es sofort auf, weil die Seite mit 500 antwortete statt still das Falsche zu tun.
+
+## ADR 046 – Der eigene Blick: was ich vor einem Livegang ändern würde (13.09.2026)
+
+Umut: „schau selbst drüber, ohne zu vergleichen – würdest du so online gehen?“ Antwort: **so nicht.** Fünf Dinge sind mir aufgefallen, und drei davon waren Fehler im CMS, nicht im Inhalt.
+
+**1. Verborgener Text stand sichtbar auf der Seite.** `.visually-hidden` gibt es in `admin.css`, aber **nicht in `site.css`** – auf jeder öffentlichen Seite waren damit die Zusätze zu lesen, die nur für Vorlesesoftware gedacht sind: „Bewertung: 5 von 5“ neben den Sternen, „(Pflichtfeld)“ hinter jedem Formularfeld. Das ist der peinlichste Fund der Reihe, weil er seit dem ersten Formular dasteht und in keinem Test auffiel: axe prüft, ob etwas **angesagt** wird, nicht ob es fälschlich **sichtbar** ist.
+
+**2. Jede Spalte war ein Kasten.** `.block-column` brachte Rahmen, Ecken und 30 px Innenabstand mit. Eine Spalte ist aber ein Layoutmittel – wer damit zwei Textblöcke nebeneinander stellt, bekam zwei umrandete Kästchen und fragt sich, warum seine Seite aussieht wie ein Formular. Die Karte ist jetzt das, was sie sein sollte: eine Einstellung, kein Standard. Die Demoseite sieht dadurch ruhiger aus, nicht ärmer.
+
+**3. Der Knopf im Aufruf-Band war unsichtbar.** Er nahm die Tintenfarbe – auf einem dunklen Band also Tinte auf Tinte, ausgerechnet beim Handlungsaufruf. Aufruf-Band und Formular nehmen jetzt die Akzentfarbe.
+
+**4. Gestapelte Karten klebten aneinander.** In einer Zeile sorgt das Raster für Abstand, untereinander gab es keinen. Aufeinanderfolgende Karten bekommen 18 px.
+
+**5. Und mein eigener Inhalt:** die linke Spalte im Kontaktbereich war zur Hälfte leer, weil sie sich auf die Höhe des Formulars zog. Sie steht jetzt oben und trägt drei Karten, die die Frage beantworten, die man an dieser Stelle hat: was passiert, wenn ich abschicke?
+
+**Was ich bewusst gelassen habe:** die Einwilligung liegt weiterhin als Kasten mitten auf der Seite. Das ist richtig so – sie ist eine Entscheidung, keine Verzierung –, aber sie verdeckt auf jedem Bildschirmfoto den Inhalt dahinter. Wer die Seite abnimmt, sollte sie einmal wegklicken, bevor er urteilt.
+
+## ADR 045 – Der Zeigereffekt, und warum Feinschliff kein Zusatz ist (13.09.2026)
+
+Umut: „es gibt keinen Mausover-Effekt wenn man auf einen Beitrag geht, das fehlt … grob siehts ähnlich aus, aber im Detail fehlen viele Kleinigkeiten.“ Das ist die richtige Beobachtung: eine Karte, die sich beim Zeigen nicht rührt, wirkt kaputt, und zwar bevor jemand sagen kann, warum.
+
+**Die Beitragskarte reagiert jetzt**, und zwar wie im Original nachgemessen: die Karte hebt sich um 8 px, bekommt einen weichen Schatten, das Bild zieht auf 1,06 auf, und über dem Bild blendet ein Hinweis ein. Dauer und Kurven sind aus dem Original übernommen (0,28 s für die Karte, 0,5 s für das Bild, 0,3 s für den Hinweis).
+
+**Drei Entscheidungen dabei:**
+
+- **Die Bewegung steht vollständig hinter der Bewegungsschranke.** Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine sanftere Fahrt, sondern keine – aber den Hinweis über dem Bild trotzdem, denn der ist Information und keine Verzierung. Ein Test prüft genau diese Trennung: kein `translateY` außerhalb der Schranke.
+- **Auch mit der Tastatur.** Alles hängt zusätzlich an `:focus-within`, sonst wäre der Effekt eine Belohnung für Mausbenutzer.
+- **Der Hinweis ist für Vorlesesoftware ausgeblendet.** Er wiederholt nur, wohin der Titel darunter ohnehin führt; zweimal dasselbe Ziel anzusagen hilft niemandem.
+
+**Der Hero war das falsche Bild.** Im Original ist er kein Foto, sondern Marineblau mit einer Binärtextur bei 10 Prozent und einem roten Schein oben rechts. Nachgebaut mit den Mitteln, die der Designer hat: dasselbe Bild als Textur, die Überlagerung auf 93 Prozent, und ein Verlauf schräg darüber für den Schein. Die Augenbraue ist im Original eine **Pille** mit Rahmen, kein nackter Text – auch das ließ sich ohne neue Funktion bauen.
+
+**Und die Effekte, die es längst gibt, waren schlicht nicht benutzt.** `layout.effects` kennt Anheben, Zoom, Schatten und Einblenden seit Dokumentschema v3; im Nachbau standen sie auf „nichts“. Jetzt heben sich Leistungskarten und Lösungskarten beim Zeigen. Das ist keine Änderung am CMS, sondern die Antwort auf die Frage, warum es „im Detail“ fehlte: ein Werkzeug, das man nicht in die Hand nimmt, ist so gut wie nicht vorhanden.
+
+**Nebenbei entfernt:** der Leuchteffekt (`fx-hover-glow`) trug noch das Grün der Vorlage statt der Akzentfarbe der Website.
+
+**Nachgetragen am 13.09.2026:** Umut meinte den Kopf **beim Öffnen eines Beitrags**, nicht den der Startseite. Im Original füllt dort das Projektbild den ganzen Kopf (75 vh), darüber liegt ein Verlauf von fast durchsichtig oben nach fast deckend unten, und darin stehen ein Badge in der Akzentfarbe, der Titel und eine 60 × 4 Pixel kurze Linie. Nachgebaut mit den vorhandenen Mitteln – Hintergrundbild, Verlauf, Flexausrichtung –, der Text mittig gesetzt. Dabei fiel auf, dass die Zeile mit Datum, Autor und Kategorie oberhalb davon stand: bei einem Beitrag, der seinen Titel im Bild trägt, ist sie doppelt. Sie ist jetzt abschaltbar (`postMetaHeader`), Voreinstellung bleibt an.
+
+## ADR 044 – Genauer hinsehen: Punkte statt Rollleiste, Karten statt Zeilen (13.09.2026)
+
+Umut hat den Nachbau Detail für Detail mit dem Original verglichen, und er hatte in jedem Punkt recht. Was dabei herauskam, sind nicht Geschmacksfragen, sondern vier Stellen, an denen das CMS etwas nicht konnte oder etwas Falsches tat.
+
+**Ein Slider ist kein Schiebefeld.** Der Slider war ein Scrollbereich mit sichtbarer Rollleiste – im Hero sah das aus wie ein Versehen. Das Original hat Punkte. Punkte gibt es jetzt, und zwar **ohne Skript**: `scroll-marker-group` und `::scroll-marker` lassen den Browser je Folie einen Punkt zeichnen, der aktive ist über `:target-current` erkennbar, und ein Klick scrollt. Wo ein Browser das noch nicht kennt (heute Firefox und Safari), bleibt ein wisch- und tastaturbedienbares Schiebefeld – also kein Ausfall, nur weniger Komfort. Die Rollleiste ist dort ausgeblendet, wo Punkte die Orientierung übernehmen.
+
+**Pfeile gibt es bewusst nicht.** `::scroll-button()` existiert, aber Chrome legt die Knöpfe weder absolut noch klebend in den Slider, sondern an den Rand der Seite. Lieber keine Pfeile als ein Knopf, der am Seitenrand schwebt.
+
+**Was der Slider nicht kann, steht hier:** er rotiert nicht von selbst. Eine öffentliche Seite lädt kein JavaScript, und eine CSS-Animation, die sich nicht anhalten lässt, wäre ein Barrierefreiheitsproblem statt einer Lösung.
+
+**Eine Beitragskarte war keine Karte.** Sie war eine Spalte aus Bild, Überschrift und Text ohne Rahmen. Im Original ist sie eine Karte: weiß, 18 px Ecken, Bild bündig oben im Verhältnis 16:10, Text in einem eigenen Feld darunter. Genau so sieht sie jetzt aus – und zwar für jede Website, weil es die Darstellung des Bausteins ist und keine Einstellung dieser einen Seite.
+
+**Die Schriftgrößen der Bausteine verloren gegen die Theme-Skala.** `.kant h3` aus dem Theme und `.block-iconcard h3` aus `site.css` hatten dieselbe Spezifität, und der Themeblock steht später im Dokument – also gewann er. Jede Kartenüberschrift war so groß wie eine Abschnittsüberschrift, auf jeder Website mit eigener Schriftskala. Die Bausteinregeln tragen jetzt `.kant` davor und gewinnen wieder.
+
+**Eine Überschrift darf ein Wort hervorheben.** Im Original ist die zweite Zeile der Hauptüberschrift rot. Dafür dürfen Überschriften ab v17 Auszeichnungen tragen – durch denselben Filter wie jeder Text. **Dabei wäre beinahe eine Lücke entstanden:** die Fassung des Dokuments war in der Schliessung, die den Filter läuft, gar nicht vorhanden; der Filter lief nie, und der Inhalt wird unescaped ausgegeben. Der Test, der ein `<script>` in eine Überschrift schreibt, hat es sofort gezeigt – und er bleibt genau dafür stehen. Zusätzlich entscheidet die Ausgabe jetzt an einer eigenen Fahne (`richHeadings`), damit eine ältere Seite ihre Überschrift weiterhin wörtlich zeigt.
+
+## ADR 043 – Was beim Nachbauen noch fehlte (Dokumentschema v17, 13.09.2026)
+
+Umut hat den Nachbau angesehen und vier Dinge benannt: der Abstand zwischen den Lösungskarten und der Projektliste fehlt, die Karten sind zu hoch, die Beiträge sehen nicht aus wie im Original, und später: im Hero fehlen die letzten Projekte als Slider, der Kopfbereich klebt nicht beim Scrollen, das Logo verlinkt nicht auf die Startseite. Zwei davon waren mein Aufbau, vier waren fehlende Fähigkeiten.
+
+**Eine Beitragsliste kann jetzt ein Projektraster sein.** Im Original zeigt eine Projektkarte Bild und Titel. Die Beitragsliste zeigte immer zusätzlich Datum, Autor, Auszug und Kategorie – richtig für ein Blogarchiv, falsch für eine Projektseite, und nicht abstellbar. Drei Schalter (`showMeta`, `showExcerpt`, `showTerms`) beantworten das, mit den bisherigen Werten als Voreinstellung, damit bestehende Seiten sich nicht ändern.
+
+**Dabei wäre es beinahe schiefgegangen, und zwar lautlos:** `{{ block.props.showMeta|default(true) }}` gibt in Twig auch dann `true` zurück, wenn der Wert `false` ist – der `default`-Filter greift auf jeden leeren Wert, nicht nur auf einen fehlenden. Die Einstellung hätte sich speichern lassen und nichts getan. Mit `??` statt `|default()` bleibt `false` ein `false`. Der Test prüft beide Richtungen, weil nur die Gegenprobe diesen Fehler findet.
+
+**Ein Bild darf verlinken.** Klingt selbstverständlich und fehlte: ein Logo im Kopfbereich ohne Verweis auf die Startseite ist der erste Klick, den jeder sucht. Die Adresse geht durch dieselbe Prüfung wie jeder andere Link, also kein `javascript:`, kein `data:`, kein schemaloses `//fremd.test`.
+
+**Der Kopfbereich kann beim Scrollen oben bleiben.** Das ist bewusst eine Einstellung der Website und keine Eigenschaft eines Blocks: kleben kann nur das Element, das den Bereich umschließt (`.site-header`), und ein Abschnitt *innerhalb* davon würde nur solange kleben, wie sein Elternelement sichtbar ist – also gar nicht. Wer es im Designer an einem Abschnitt versucht hätte, hätte eine Einstellung gefunden, die nichts tut.
+
+**Der Slider im Hero** brauchte nichts Neues: vier Folien mit Bild und Titel im vorhandenen Slider-Baustein. Ehrlich dazugesagt: **er rotiert nicht von selbst.** Öffentliche Seiten laufen ohne JavaScript, und daran ändert eine Animation nichts – gewischt, gescrollt und mit der Tastatur bedient wird er, und er rastet je Folie ein. Eine automatische Rotation wäre als reine CSS-Animation möglich, aber sie wäre nicht anhaltbar, und ein Karussell, das sich nicht anhalten lässt, ist ein Barrierefreiheitsproblem.
+
+**Und ein Fehler, der größer ist als alles andere in diesem Paket:** die Liste bekannter Schemafassungen im Editor endete bei **12**, während Bausteine längst v13 bis v15 verlangten. Folge: **in einem aktuellen Dokument ließ sich im Editor gar kein Baustein mehr einfügen** – jeder Versuch endete mit „Unbekanntes Dokumentschema“ – und Symbol, Fortschritt, Slider und eingebetteter Inhalt nirgends. Der Playwright-Editortest hat es nicht gefunden, weil er auf einem alten Dokument arbeitet und die betroffenen Typen nicht einfügt. Jetzt steht die höchste Fassung als **eine Zahl an einer Stelle** (`SCHEMA_VERSION`), und ein Test fügt jeden Bausteintyp in Dokumente von v1 bis v17 ein.
+
+## ADR 042 – Der Nachbau von kant-it.de, und was er gefunden hat (12.09.2026)
+
+Umut: „Baue mal lokal kant-it.de komplett nach. Ich möchte sehen ob das funktioniert.“ Gebaut ist die Startseite mit allen neun Abschnitten, die Projekteseite, vier Projektbeiträge, Impressum und Datenschutzgerüst, Kopf- und Fußbereich, zwei Menüs, das Kontaktformular, zwölf Bilder und die Palette der echten Website – in einer eigenen Datenbank, damit die Entwicklungsinstallation unberührt bleibt.
+
+**Das Ergebnis der Übung sind nicht die Bilder, sondern fünf Fehler, die sonst ein Kunde gefunden hätte.** Eine echte Website zu bauen ist eine andere Prüfung als ein Test: sie benutzt alles gleichzeitig.
+
+**1. Die Gestaltung färbte die Bausteine nicht.** Symbole, Knöpfe, Rahmen, ruhiger Text und der Einwilligungsdialog kamen aus festen Token in `site.css` – eine Website mit roter Palette behielt das Grün der Vorlage. Die Farben ließen sich einstellen und taten nichts, dieselbe Familie wie Rahmenstärke und Bildrundung (ADR 036). Das Theme setzt jetzt `--ink`, `--paper`, `--accent`, `--muted`, `--line` und `--mint` selbst. Als Akzent dient die **Linkfarbe**, nicht ein Palettenname: dieses Token färbt auch kleine Beschriftungen, und eine helle Akzentfarbe wäre dort nicht mehr lesbar. `--muted` und `--line` werden aus Textton und Hintergrund gemischt; eine Palettenfarbe gleichen Namens gewinnt.
+
+**2. Der Einwilligungsdialog war grün**, unabhängig von der Website. Er nimmt jetzt die Primärfarbe – und lässt sich eigens färben, indem im Design eine Farbe mit dem Schlüssel `consent` angelegt wird. Kein zusätzlicher Schalter, nur eine Regel, die eine Palettenfarbe bevorzugt.
+
+**3. „Di-gitale Exzellenz“.** `hyphens:auto` galt für h1 bis h3. Im Fließtext ist Trennung nützlich, in einer 64-Pixel-Überschrift sieht sie nach einem Defekt aus – und genau dort fällt sie auf. Überschriften trennen nicht mehr.
+
+**4. Ruhiger Text auf dunklem Grund.** `.block-text` hatte fest `color:var(--muted)`, eine Farbe für helle Hintergründe. In einem dunkel gefärbten Abschnitt stand damit Grau auf Marineblau. Jetzt wird die Farbe aus der geerbten gemischt (`currentColor` zu 82 Prozent), womit dieselbe Regel auf hellem und dunklem Grund funktioniert. Dasselbe gilt für die automatische Kleinbeschriftung des ersten Textblocks: sie mischt den Akzent in die geerbte Farbe, statt ihn zu setzen.
+
+**5. Ein Kontrastfehler, den ich selbst eingebaut hatte.** Die erste Ableitung von `--muted` mischte zu 72 Prozent und ergab für eine Palette mit hellem Textton 4,09:1 statt 4,5:1. axe hat ihn im selben Durchlauf gefunden, in dem die Farben zum ersten Mal wirkten. Jetzt 80 Prozent.
+
+**Was sich nicht als Fehler herausstellte, aber auffällt:** Ecken und Seiten müssen einzeln angegeben werden (`borderRadius` als Kurzschreibweise wird abgewiesen) – der Designer schreibt das ohnehin so, von Hand ist es überraschend. Und die Beschriftung eines Einwilligungsfeldes ist auf 120 Zeichen begrenzt; der Einwilligungssatz der echten Website hat 148. Der Rest musste in den Hilfetext.
+
+**Was der Nachbau belegt:** die Seite läuft mit **null axe-Verstößen** auf vier Seiten in Desktop- und Handybreite, **ohne JavaScript**, mit Bildern als WebP in vier Breiten und einer Startseite, die dem Original so nahe kommt, dass der Unterschied in der Typografie liegt und nicht in der Technik. Was fehlt, ist ehrlich zu benennen: die vollständige Datenschutzerklärung (das Gerüst ist da, der Text der laufenden Website ist länger), die übrigen Projektbeiträge (vier von fünf Seiten Archiv) und die Unterseiten von HausKlar und KantTresor.
+
+## ADR 041 – Der Installer: sechs Bildschirme, und danach ist er weg (12.09.2026)
+
+Umut: „Einen Installer brauche ich noch wie wordpress schritt für schritt alles einrichten migration ausführen usw.“ und, später, „einen installer das eine php ist und alle dateien herunterladet“. Beides ist gebaut, und beides hängt an derselben Frage: was darf eine Datei dürfen, die auf einem leeren Webspace liegt und von jedem aufrufbar ist?
+
+**Der Ablauf schreibt jeden Schritt sofort**, statt Antworten in einer Sitzung zu sammeln. Nach dem Datenbankschritt gibt es `.env.local` (seit 1.7.0: `.env`, siehe ADR zur Umgebungsdatei), nach dem Migrationsschritt Tabellen, nach dem Websiteschritt Inhalte. Ein Neuladen, ein Zeitüberlauf, ein geschlossener Tab verliert damit nichts – der Installer sieht, was schon da ist, und macht an der nächsten fehlenden Stelle weiter. Wer eine spätere Adresse rät, wird zurückgeschickt, und zwar vom Server, nicht von einem Link.
+
+**Das Ende ist das erste Konto, und es ist ein Zustand der Datenbank, keine Datei.** Eine Datei, die den Installer sperrt, ist eine Datei, die jemand löschen kann – und dann steht auf einer laufenden Website wieder ein Formular, das ein Administratorkonto anlegt. Gibt es ein Konto, antwortet jede Adresse unter `/install` mit 404.
+
+**Kein Sitzungstoken, sondern eine Unterschrift.** Das Sitzungscookie dieser Anwendung gilt nur für `/admin` – eine bewusste Entscheidung, die öffentliche Seiten cachebar hält –, und für sechs Bildschirme wird sie nicht aufgeweicht. Jedes Formular trägt Schritt und Zeitpunkt, mit `APP_SECRET` unterschrieben, zwei Stunden gültig. Ehrlich dazugesagt: das ist kein CSRF-Schutz, denn wer den Installer erreicht, bekommt auch eine gültige Unterschrift. Der Schutz ist, dass es den Installer nach dem ersten Konto nicht mehr gibt – deshalb steht auf dem letzten Bildschirm, dass sofort nach dem Hochladen installiert werden soll.
+
+**Migrationen laufen im Prozess, nicht über die Konsole.** Auf geteiltem Hosting gibt es oft keine Shell, und `proc_open` ist ein häufiges Opfer einer gehärteten `php.ini`. Der Installer benutzt dieselbe `migrations.php` und dieselbe `DependencyFactory` wie das Konsolenkommando. Bricht der Browser ab, ist nichts kaputt: angewandte Migrationen sind vermerkt, ein erneuter Aufruf macht weiter.
+
+**Ein Huhn-Ei-Problem und seine Lösung:** ohne `APP_SECRET` bootet Symfony nicht – also nicht einmal die Seite, die erklären würde, warum. Deshalb erzeugt der erste Start das Geheimnis selbst und schreibt es nach `.env.local`. Geht das nicht, läuft die Anfrage trotzdem, und die Systemprüfung sagt in einem Satz, dass im Projektstamm das Schreibrecht fehlt. Eine weiße Seite wäre die Alternative gewesen.
+
+**Und eine Weiterleitung statt eines Fehlers:** solange keine Installation existiert, führt jede Adresse zu `/install`. Der erste Besuch auf einem frisch entpackten Webspace ist sonst ein 500 aus einer fehlenden Tabelle – genau der Moment, in dem jemand einen Satz braucht und keinen Stacktrace. Sobald ein Konto existiert, wird eine Marke unter `var/installed` geschrieben und keine Anfrage fragt die Datenbank noch einmal; die Marke schweigt nur diesen Subscriber, der Installer selbst fragt immer die Datenbank.
+
+**Die einzelne Datei davor** (`install.php`) lädt das Releasearchiv, prüft dessen SHA-256, entpackt es und löscht sich danach selbst. Adresse und Prüfsumme stehen **in der Datei**, eingetragen beim Bauen des Releases: ein Installer, der eine URL aus einem Formular entgegennimmt, ist eine Einladung, fremden Code auf den Server zu legen. Stimmt die Prüfsumme nicht, wird nicht entpackt – es gibt kein Häkchen daran vorbei. Jeder Archiveintrag wird gegen das Zielverzeichnis geprüft, bevor er geschrieben wird; geprüft wird nicht durch Suchen nach „..“, sondern indem der zusammengesetzte Zielpfad unterhalb des Ziels liegen muss. In ein Verzeichnis, in dem schon eine Installation liegt, arbeitet sie gar nicht erst.
+
+**Was der Installer anlegt, ist nicht die Demoseite.** Eine Startseite mit dem Namen der Website, Kopf- und Fußbereich mit Menü – und Impressum und Datenschutzerklärung als Gerüst mit markierten Lücken. Das Letzte ist kein Entgegenkommen: eine deutsche Unternehmenswebsite ohne beides ist ab dem ersten Tag ein Problem, und die Installation ist der einzige Moment, in dem mit Sicherheit jemand hinsieht.
+
+## ADR 040 – Bildgrößen, und ein Release für Hosting ohne Composer (12.09.2026)
+
+Zwei Fragen von Umut in einem Satz: „werden Bilder in verschiedenen Größen angelegt und in WebP umgewandelt?“ und „auf einem Hostingpaket ist kein Composer, meistens, oder?“ – die erste war zur Hälfte schon beantwortet, die zweite ist berechtigt und hatte bis heute keine Antwort.
+
+**Die Bilder: ja, und jetzt eine Stufe weiter.** Ein Upload wird nie im Original gespeichert. GD decodiert ihn, dreht ihn nach EXIF gerade, behandelt Transparenz und schreibt WebP mit Qualität 82 – bisher in drei Breiten, jetzt in **vier: 480, 960, 1600, 2400**. Die vierte Stufe ist keine Kosmetik: ein vollflächiges Startseitenbild auf einem zweifach skalierten Bildschirm wurde vorher aus 1600 px hochgezogen und sah entsprechend aus. Hochskaliert wird dabei nichts – ist die Quelle 1800 px breit, ist die letzte Stufe 1800 px, nicht 2400.
+
+Der Bildbaustein liefert `srcset` und `sizes`, der Browser wählt. **Ein Hintergrundbild kann das nicht**, denn CSS hat kein `srcset` – und genau da lag bisher die Lücke: ein Sektionshintergrund bekam immer die größte Variante, auch auf dem Telefon. Da die Gestaltung ohnehin je Gerät geschrieben wird, entscheidet nun das Gerät: Mobil 960, Tablet 1600, Desktop die größte vorhandene. Das ist die richtige Stelle dafür, weil die Regel ohnehin in einem `@media`-Block steht – es kostet kein Byte zusätzlich.
+
+Der Preis, ehrlich benannt: **vier Stufen kosten Rechenzeit und Platz beim Upload.** Deshalb bleibt die konservative Prüfung gegen das Speicherlimit vor dem Decodieren stehen; sie ist es, die ein Hosting mit 128 MB vor einem Abbruch mitten im Schreiben bewahrt. Ein Test hat das sofort gezeigt, als er im Rahmen der gesamten Suite lief und der Speicher schon halb belegt war – das war kein Testproblem, sondern die Schutzfunktion bei der Arbeit.
+
+**Composer: Umut hat recht, und das ändert den Auslieferweg.** Geteiltes Hosting hat in aller Regel keinen Composer, oft nicht einmal eine Shell. Die Frage stand seit `docs/UPDATE.md` offen („Composer auf dem Server oder `vendor/` im Tag?“). Sie ist jetzt entschieden: **es gibt ein Releasearchiv.** `scripts/build-release.php` läuft auf einem Rechner, der Composer hat, baut `vendor/` ohne Entwicklungspakete in eine Kopie des Projekts und schreibt `var/releases/kantsites-<Fassung>.zip` samt SHA-256. Im Archiv liegt die Anwendung und sonst nichts: keine Tests, keine Skripte, kein `var/`, kein `.env`. Das Git-Repository bleibt dabei frei von `vendor/` – wer entwickelt, bekommt keine 3000 fremden Dateien in den Diff.
+
+Daraus folgt eine Regel für den Updater, und sie ist wichtiger als das Archiv selbst: **ein Update, das `composer.lock` ändert, bricht ab, wenn Composer auf dem Server nicht aufrufbar ist.** Vorher hätte er den Code gewechselt und wäre mit einem `vendor/` weitergelaufen, das nicht mehr zum Code passt – der Fehler wäre erst beim ersten Seitenaufruf aufgetaucht, nach dem Rauchtest, als weiße Seite. Jetzt vergleicht der Updater die Prüfsumme der Datei vor und nach dem Checkout und sagt in einem Satz, was zu tun ist: das Releasearchiv einspielen, das `vendor/` mitbringt. Danach läuft der normale Rückweg.
+
+**Und ein Fehler, den erst der Browsertest zeigte:** der Dokumentprüfer erlaubte drei `sources` je Bild. Die vierte Variante machte damit **jedes Dokument mit einem Bild ungültig** – ohne sichtbare Meldung, denn eine abgewiesene Speicherung sieht aus wie nichts. Das ist dieselbe Familie wie Rahmenstärke und Bildrundung: eine Zahl an einer Stelle, die niemand mit der Stelle verbindet, an der sie herkommt. Die Grenze liest jetzt `MediaLibrary::WIDTHS`, damit sie sich mit der Pipeline bewegt.
+
+**Nebenbei gefunden:** `CommandRunner` konnte unter Windows `composer` nicht starten, weil das dort eine `.bat` ist und `CreateProcess` keine Stapeldatei ausführt. Ein Kandidat über `%COMSPEC% /c` behebt es – die Argumentliste bleibt fest, es kommt nichts aus einer Anfrage hinein.
+
+## ADR 039 – Messen statt vermuten: Abfragen, Ladebudget, Blättern (12.09.2026)
+
+Arbeitspaket M sagte „Abfragen je Seite zählen. Messen, dann zusammenfassen.“ Messen braucht ein Messgerät, also gibt es jetzt eines.
+
+**Ein Zähler als Doctrine-Middleware** zählt die Datenbankabfragen einer Anfrage, und außerhalb der Produktion steht die Zahl im Kopf `X-Kant-Queries`. Kein Profiler, kein Log – eine Zahl, damit „wie oft fragt diese Seite nach“ messbar statt geraten ist.
+
+Die erste Messung: **die Startseite brauchte 18 Abfragen.** Nicht wegen einer komplizierten Seite, sondern weil `SiteSettings::load()` und `Theme::load()` je Aufrufer einmal dieselbe Zeile holten – der Renderer, die strukturierten Daten, der Einwilligungsschalter, die Vorlagen. Beide merken sich ihr Ergebnis jetzt für die Dauer einer Anfrage. **Ergebnis: 18 → 8.**
+
+Dabei ist mir die klassische Falle des Merkens einmal selbst passiert, und der Test hat sie sofort gezeigt: ich habe den Merker am *Anfang* des Speicherns geleert. Das Speichern liest den Stand aber noch einmal (um die Vorlagen nicht zu verlieren), füllt den Merker damit erneut – und schreibt danach. Der Rest der Anfrage bekam den alten Stand. Geleert wird **nach** dem Schreiben.
+
+**Das Ladebudget wird gemessen, nicht behauptet.** Die Browserprüfung liest je Seite HTML-Größe, CSS-Größe, Anzahl Anfragen, Anzahl Skripte und die Abfragezahl und prüft Obergrenzen. Heute: Startseite 7,4 KB HTML, 22,7 KB CSS, 2 Anfragen, 8 Abfragen, **0 Skripte**. Die Null ist die wichtigste Zahl davon – sie hält die Zusage fest, dass eine öffentliche Seite ohne JavaScript vollständig ist, und zwar als Test statt als Absicht.
+
+**Das erste Bild einer Seite ist nicht mehr `lazy`.** Es ist meistens das größte Ding über der Falz, und es zu verzögern verzögert genau das Pixel, auf das jemand wartet. Der Renderer bestimmt es in Renderreihenfolge – Kopfbereich zuerst, dann der Seiteninhalt – und gibt ihm `loading="eager"` und `fetchpriority="high"`. Alles darunter bleibt `lazy`.
+
+**Eine feste Obergrenze ist kein Blättern.** Der Fassungsverlauf hörte bei dreißig auf, die Einsendungen bei fünfzig, die Weiterleitungen zeigten alle bis zu zweitausend auf einmal. Das Erste sieht aus wie „es gibt dreißig“ und ist das Einzige, was eine Historie nicht tun darf. Alle drei blättern jetzt, mit derselben Rechnung (`Pagination`) und demselben Pager wie Beitragsarchiv und Mediathek.
+
+## ADR 038 – Sicherung: die Wiederherstellung ist die Funktion (12.09.2026)
+
+Umut wollte eine Standard-Sicherungsfunktion. Gebaut ist sie so, dass der Teil im Mittelpunkt steht, den sonst niemand übt.
+
+**Die Datenbank wird nicht kopiert, sondern von SQLite ausgeschrieben.** Ein `copy()` der Datei während eines Schreibvorgangs ergibt eine Datei, die vorhanden aussieht und sich am Tag der Wiederherstellung nicht öffnen lässt. `VACUUM INTO` liefert einen vollständigen, konsistenten Stand – ohne Wartungszustand, weil SQLite das selbst kann.
+
+**Der Medienordner gehört dazu, `.env` nicht.** Ohne die Bilddateien stellt die Sicherung eine Website voller kaputter Bilder wieder her; die Dokumente verweisen nur auf IDs. `.env` dagegen enthält `APP_SECRET`, und eine Sicherung ist etwas, das heruntergeladen und weitergereicht wird. Sie wird zum Wiederherstellen von Inhalten auch nicht gebraucht. Im Manifest steht ausdrücklich, was **nicht** drin ist – damit niemand die Sicherung für vollständiger hält, als sie ist.
+
+**Jede Sicherung trägt ein Manifest** mit Zeitpunkt, Anlass, Fassung, Migrationsstand, Inhaltszahlen und der SHA-256 der Datenbank. Die Übersicht zeigt „unversehrt“ oder „Prüfsumme falsch“, und eine Sicherung mit falscher Prüfsumme wird nicht eingespielt. Eine Sicherung, von der man erst beim Zurückspielen erfährt, dass sie kaputt ist, ist schlimmer als keine.
+
+**Beim Zurückspielen:**
+
+- Eine Sicherung aus einer **neueren** Fassung wird abgewiesen – ihr Schema kennt der laufende Code nicht. Mit `--force` geht es trotzdem, weil es Fälle gibt, in denen genau das gewollt ist.
+- **Zuerst wird der aktuelle Stand gesichert.** Auch eine Wiederherstellung kann die falsche sein.
+- **Medien werden ergänzt, nicht ersetzt.** Eine Datei, die nach der Sicherung hochgeladen wurde, bleibt liegen: die Maßnahme gegen Datenverlust darf nicht selbst welchen verursachen.
+- Der Wartungszustand ist an, solange die Datenbank ersetzt wird.
+
+**Zurückspielen gibt es nur auf der Konsole.** In der Verwaltung steht die Liste mit Zustand und ein Knopf zum Anlegen – ein Knopf, der die ganze Datenbank ersetzt, gehört nicht neben einen, der eine Seite speichert.
+
+Ein kleiner Fall, der beim Testen auffiel: zwei Sicherungen in derselben Sekunde. Das ist nicht akademisch – eine Wiederherstellung legt eine Sicherheitskopie an, und die landet in derselben Sekunde wie die Sicherung, die gleich eingespielt wird. Der Name bekommt deshalb bei Bedarf eine Nummer, statt dass die zweite Sicherung fehlschlägt.
+
+## ADR 037 – Seitenbreite, Menüarten und Seiten ohne Kopfbereich (Dokumentschema v16, 12.09.2026)
+
+Drei Fragen von Umut, drei unterschiedliche Antworten.
+
+**Die globale Seitenbreite war einstellbar und wirkte nur in eine Richtung.** `base.containerWidth` gab es im Designbereich, aber `site.css` schrieb `width:min(1180px,…)` – jeder größere Wert wurde von der 1180 geschluckt. Schmaler ging, breiter nicht, und niemand hätte gesehen warum. Die Zahl kommt jetzt aus dem Theme (`min(var(--k-container,1180px),…)`). Das ist der dritte Fehler dieser Art an einem Tag: eine Einstellung, die sich speichern ließ und nichts tat. Alle drei hatten dieselbe Ursache – CSS, das nie gegen eine Erwartung geprüft wurde. Dagegen helfen die Datensatztests, die jetzt jede Deklaration nachrechnen.
+
+**Menüplätze und Menüarten sind zwei verschiedene Dinge**, und das war vermischt. *Wo* ein Menü steht, bestimmt der Menüblock – er kann in jedem Bereich und jeder Sektion stehen, das war immer so. *Welche Einträge* es zeigt, bestimmt der Platz, und davon gab es nur zwei; jetzt sind es vier (Hauptnavigation, zweite Navigation, Fußzeile, Rechtliches). *Wie* es aussieht, war überhaupt nicht einstellbar; jetzt gibt es drei Arten: waagerecht, untereinander und **aufklappbar als Burger**. Der Burger ist ein `details`-Element – ein Menü, das ein Skript zum Öffnen braucht, wäre auf einer Seite ohne Skript ein Menü, das nicht aufgeht.
+
+**„Seiten ohne Menü“ war nicht möglich**, und das ist der interessanteste Teil. Der Kopfbereich war ein einziges Dokument für alle Seiten. Jetzt wählt jede Seite: Standard, ein anderer Bereich, oder **keiner**. Dafür durfte die Regel „es gibt genau einen Kopf- und einen Fußbereich“ fallen – sie war richtig, solange niemand wählen konnte, und wurde falsch, sobald man wählen kann. Der erste Bereich behält die Adresse `default` und ist, was eine Seite ohne eigene Wahl bekommt.
+
+Zwei Entscheidungen dabei:
+
+- **Gespeichert wird die Wahl, nicht das Ergebnis.** `header_area` ist leer für „Standard“, `none` für „keiner“, sonst die Adresse. Ein Verweis auf einen gelöschten Bereich fällt auf den Standard zurück, statt die Seite stillschweigend ohne Kopf auszuliefern – eine fehlende Navigation ist schlimmer als eine unerwartete.
+- **Die Migration ist nicht umkehrbar.** Ein `down()` würde den Standardkopf auf Landingpages zurückbringen, die absichtlich keinen haben.
+
+## ADR 036 – Der Designer im Vergleich, und zwei Fehler, die er verdeckte (Dokumentschema v15, 12.09.2026)
+
+Umut fragte nach Zeilen, nach Rahmen und Rundungen – und ob der Designer so aufgestellt ist wie Flatsome. Der Vergleich steht in `docs/DESIGNER-VERGLEICH.md`, samt der Einschränkung, dass ich Flatsome nicht selbst öffnen konnte. Was die Frage an Code auslöste:
+
+**Zwei Fehler, die vorher niemand gesehen hat.** Eine Rahmenstärke je Seite wurde zu `border-width-top` – das ist kein CSS, der Browser verwirft die Zeile, und niemand bekommt eine Meldung. Rahmenstärken je Seite hatten damit **nie** eine Wirkung. Die Schreibweise steht jetzt als `sideCss` je Eigenschaft im Schema, weil `padding-top` dem Namen folgt und `border-top-width` nicht. Und eine Rundung auf einem Bildblock landete auf dem `figure`, während das Bild darin eckig blieb.
+
+**Eigenschaften können jetzt auf das Bild im Block zielen.** Ein `target: 'img'` im Schema, und der Compiler schreibt eine zweite Regel `#id img{…}`. Das ist der Grund, warum `object-fit` überhaupt etwas tun kann: auf einem `figure` tut es nichts. Damit kommen Bildausschnitt, Bildmitte, Seitenverhältnis, Bildhöhe, Bildecken und Bildrahmen.
+
+**Von 50 auf 93 Eigenschaften.** Dazu Positionierung mit z-index (freigestellte Elemente, wie in Flatsome-Bannern), getrennte Zeilen- und Spaltenabstände, Flex-Eigenschaften je Element, Innenschatten, Textschatten, acht Bildfilter als eine zusammengesetzte `filter`-Deklaration in fester Reihenfolge, Mischmodus und Mauszeiger. Neun Einblendungen mit Verzögerung, sieben Hover-Effekte – alle innerhalb von `prefers-reduced-motion`.
+
+**Drei neue Bausteine (v15).** Symbol als eigenes Element; Fortschritt mit `role="meter"` und dem Wert im Markup statt nur in der Balkenbreite; und ein **Slider ohne JavaScript** – ein Scrollbereich mit Einrasten, sichtbare Folien je Gerät, ohne Autoplay. Kein Autoplay ist eine Entscheidung: ein sich selbst bewegendes Karussell ist etwas, das Menschen anhalten wollen.
+
+Weil Inline-Stile verboten sind, sind Symbolgröße und Fortschrittswert **Klassen**. Beim Symbol heißt das: nur die Größen aus einer festen Liste sind erlaubt – ein freier Wert hätte keine Klasse, und ein SVG ohne Maße ist unsichtbar. Der Validator kennt die Liste, der Editor bietet genau sie an.
+
+**Zeilen waren nicht unauffindbar, sondern unbrauchbar leer.** „Zeile“ stand immer in der Elementliste, aber eine Zeile ohne Spalten sieht aus wie nichts. Jetzt gibt es „Zeile, 2/3/4 Spalten“ auf einen Klick und im Werkzeugkasten den Satz, wie der Aufbau gemeint ist: Sektion → Zeile → Spalte → Inhalt.
 
 ## ADR 035 – Der Updater: jeder Schritt prüft, der Rückweg ist Teil des Wegs (12.09.2026)
 

docs/AUSBAUPLAN.md

@@ -86,6 +86,8 @@ Abnahme: Die Startseite des Piloten ist ohne Code nachbaubar. Keine neue öffent
 
 ### D – Formulare — **erledigt am 12.09.2026, ohne Dateiuploads**
 
+**Ergänzt am 15.09.2026 (ADR 101):** Feldtypen Zahl, Optionsfelder und Mehrfachauswahl, Schritte, Bedingungen auf frühere Auswahlfelder und eine Zusammenfassung vor dem Absenden – für den Preisfinder der DEEG-Website, als Ausbau des Kerns statt als Plugin. Dateiuploads bleiben offen.
+
 *Braucht: nichts; das größte eigenständige Paket.*
 
 Umgesetzt: Feldtypen Text, E-Mail, Telefon, Mehrzeiliges, Auswahl und Einwilligung, serverseitige Validierung mit Meldung je Feld, Einwilligungszeitpunkt, E-Mail-Versand mit Antwortadresse, gespeicherte Einsendungen in der Verwaltung und Spamschutz aus Honeypot, signiertem Zeitstempel und Rate-Limit. **Offen geblieben:** Dateiuploads (eigener nicht öffentlicher Ablageort und Typprüfung, Begründung in ADR 017), Löschen und Umbenennen von Formularen, Export und Aufbewahrungsfrist für Einsendungen. Der tatsächliche Versand ist ungeprüft und gehört zu Paket J.
@@ -114,6 +116,12 @@ Seiten umbenennen und verschieben, mit Aktualisierung aller Kindpfade in einer T
 
 Abnahme: Eine Seite mit Unterseiten wird verschoben; alle alten Adressen leiten weiter, Menüs bleiben intakt.
 
+### G3 – Designer auf Flatsome-Niveau (Nutzerauftrag vom 12.09.2026) — **weitgehend erledigt am 12.09.2026** (ADR 036)
+
+Umuts Auftrag: „Prüfe es und baue alles wirklich alles genauso ein styles, effekte, und mehr.“ Der Vergleich steht in `docs/DESIGNER-VERGLEICH.md`. Gebaut: 93 statt 50 Eigenschaften, neun Einblendungen mit Verzögerung, sieben Hover-Effekte, Bild-Eigenschaften mit eigenem Ziel, Positionierung, Filter, Symbol, Fortschritt, Slider, Zeilenvorlagen.
+
+Offen und dort begründet: Sichtbarkeitsschalter je Gerät, Parallax, Video-Hintergrund, selbst gehostetes Video, Countdown, Popup, Einblendung beim Scrollen, soziale Symbole, Preistabelle, Teammitglied, Suche, Vorlagenbibliothek. Die vier mit Skriptbedarf (Countdown, Popup, Scroll-Einblendung, Autoplay) sind eine Entscheidung, keine Lücke – sie weichen `script-src 'none'` auf und werden nur auf Zuruf gebaut.
+
 ### G – Editor für die tägliche Arbeit
 
 *Braucht: C.*
@@ -133,7 +141,7 @@ Umut hat den Umfang von G erweitert. Vier Punkte, in dieser Reihenfolge:
 
 Abnahme: Kopf- und Fußbereich sind im Editor gestaltbar und öffentlich sichtbar. Eine verknüpfte Sektion auf zwei Seiten ändert sich an beiden Stellen gleichzeitig. Ein Textelement lässt sich formatiert und als HTML bearbeiten, und keine Auszeichnung außerhalb der Positivliste übersteht das Speichern. Eigenes CSS wirkt, eigenes Skript wirkt nur für Administratoren gesetzt und nur auf der veröffentlichten Seite. Die Verwaltung ist ohne Anleitung bedienbar.
 
-### H – Plugins und Templates
+### H – Plugins und Templates — **erledigt am 16.09.2026** (ADR 102 und 103: Manifest, Schalter, geprüfte Bausteine, Dateien je Seite, Editoranbindung, Container, Einstellungen, eigene Adressen, Seitenvorlagen; Referenzplugin „Bildvergleich“. Designpakete in Plugins am selben Tag wieder entfernt – das Design gehört der Website, ADR 105. Bewusst nicht: PHP-Hooks und eigene Tabellen – Plugins bleiben Manifest plus Twig, ADR 103)
 
 *Braucht: den Erhaltungsvertrag (erledigt).*
 
@@ -145,7 +153,7 @@ Abnahme: Templatewechsel erhält die Inhalte. Das Referenzplugin lässt sich akt
 
 *Braucht: nichts; teils vorziehbar.*
 
-~~Benutzerverwaltung und Passwortänderung in der Oberfläche.~~ — **erledigt am 12.09.2026** (ADR 030). Offen bleibt der Rest des Pakets: Inhaltscache mit gezielter Erneuerung beim Veröffentlichen. Bildformate und Ressourcenpakete prüfen. Sicherung und Wiederherstellung erproben. Updateverfahren mit Datenbankmigration und Rückfallstrategie dokumentieren — **geplant am 12.09.2026 in `docs/UPDATE.md`**: neue Version über einen Git-Tag ziehen, mit Vorprüfung, Sicherung, Wartungszustand, Migration, Rauchtest und Rückweg. Umsetzung offen; zwei Entscheidungen hängen am Hosting (Composer auf dem Server oder `vendor/` im Tag, und ob es Shell-Zugriff gibt).
+~~Benutzerverwaltung und Passwortänderung in der Oberfläche.~~ — **erledigt am 12.09.2026** (ADR 030). Offen bleibt der Rest des Pakets: Inhaltscache mit gezielter Erneuerung beim Veröffentlichen. ~~Bildformate prüfen.~~ — **erledigt am 12.09.2026** (ADR 040): WebP in vier Breiten, Hintergrundbilder je Gerät. Ressourcenpakete bleiben offen. ~~Sicherung und Wiederherstellung erproben~~ — **erledigt** in Arbeitspaket O: die Wiederherstellung ist im Test und von Hand nachgewiesen. Updateverfahren mit Datenbankmigration und Rückfallstrategie dokumentieren — **geplant am 12.09.2026 in `docs/UPDATE.md`**: neue Version über einen Git-Tag ziehen, mit Vorprüfung, Sicherung, Wartungszustand, Migration, Rauchtest und Rückweg. Umgesetzt am 12.09.2026 (ADR 035). Die Frage „Composer auf dem Server oder `vendor/` im Tag“ ist entschieden (ADR 040): ein Releasearchiv vom Build-Rechner bringt `vendor/` mit, und ein Update, das die Abhängigkeiten ändert, bricht ohne Composer ab statt halb durchzulaufen. Offen bleibt, ob das Hosting Shell-Zugriff hat.
 
 Abnahme: Veröffentlichen macht die Änderung sofort sichtbar und erneuert nur die betroffenen Einträge. Eine Wiederherstellung aus dem Backup ist nachgewiesen.
 
@@ -172,7 +180,7 @@ Umut: „Als todo noch statistik kannst du das einbauen. Wieviel wann wo wie die
 
 **Umsetzung:** ein Abonnent, der nach der Antwort zählt (nur `text/html`, nur Status 200/404, Verwaltung und Assets ausgenommen, Bots per User-Agent-Muster verworfen), ein Bildschirm „Statistik“ mit Tages- und Wochensicht als serverseitig gezeichnetes SVG-Balkendiagramm ohne JavaScript, Aufbewahrung 14 Monate mit Verdichtung auf Tageswerte nach 60 Tagen, und ein Export als CSV. Abnahme: ein Aufruf erhöht genau einen Zähler; ein Aufruf der Verwaltung erhöht keinen; die Tabelle enthält nach 1000 Aufrufen keine Spalte, aus der eine Person hervorgeht. **Alle drei erfüllt.** Umgesetzt ist zusätzlich der CSV-Export und `cms:stats:prune` für Verdichtung und Löschung. Abweichung vom Plan: die Gerätegrößen-Klasse entfällt, weil sie ohne Skript nicht feststellbar ist – das stand schon im Plan und ist so geblieben.
 
-### M – Inhalte und Ladeverhalten prüfen (Nutzerauftrag vom 12.09.2026)
+### M – Inhalte und Ladeverhalten prüfen (Nutzerauftrag vom 12.09.2026) — **weitgehend erledigt am 12.09.2026** (ADR 039)
 
 *Braucht: nichts.*
 
@@ -183,24 +191,66 @@ Umut: „alle inhalte prüfen immer pagination und minimal laden“. Als durchge
 - **Ein Ladebudget je Seite**, in der Browserprüfung nachgemessen statt geschätzt: HTML, CSS und Bilder je Seite mit einer Obergrenze, die bricht, wenn sie überschritten wird. Heute lädt eine öffentliche Seite kein JavaScript, zwei bis drei Stylesheets und die Bilder – das soll so bleiben und nachweisbar sein.
 - **Abfragen je Seite zählen.** Eine Seite mit zehn verknüpften Sektionen darf nicht zehn Einzelabfragen auslösen. Messen, dann zusammenfassen.
 
-Abnahme: keine Liste in der Verwaltung, die mehr Einträge hat als sie zeigt, ohne das zu sagen und ohne Blättern. Ein automatischer Test, der die Größe der Startseite und die Anzahl der Datenbankabfragen prüft.
+Abnahme: keine Liste in der Verwaltung, die mehr Einträge hat als sie zeigt, ohne das zu sagen und ohne Blättern. Ein automatischer Test, der die Größe der Startseite und die Anzahl der Datenbankabfragen prüft. **Beides erfüllt.** Offen bleibt aus diesem Paket: `srcset` ist für Bilder aus der Mediathek vorhanden, aber eine Seite mit vielen Bildern ist nie gegen das Budget gemessen worden, und die Benutzerliste blättert noch nicht (sie ist naturgemäß kurz).
 
-### N – Installer (Nutzerauftrag vom 12.09.2026)
+### N – Installer (Nutzerauftrag vom 12.09.2026) — **erledigt am 12.09.2026** (ADR 041), außer dem Download aus einer veröffentlichten Releaseadresse
 
-**Teilweise erledigt am 12.09.2026:** der *Updater* ist gebaut (ADR 035), der *Installer* nicht. Beide teilen die Systemprüfung, die jetzt existiert und dort wiederverwendet wird.
+**Gebaut:** der Browserinstaller unter `/install` mit sechs Bildschirmen und die einzelne `install.php`, die ein Buildskript mit Adresse und Prüfsumme versieht. Der Schritt „Datenbank“ fragt SQLite oder MySQL ab und prüft die Verbindung sofort; damit brauchte er die Hostingentscheidung aus Arbeitspaket J nicht mehr abzuwarten.
 
-*Braucht: die Hostingentscheidung aus Arbeitspaket J für den Schritt „Datenbank“.*
+**Offen bleibt:** ein echter Download (dazu muss ein Release unter seiner Adresse liegen), MySQL gegen einen echten Server, und eine Installation auf echtem Hosting.
 
 Umut: „Einen Installer brauche ich noch wie wordpress schritt für schritt alles einrichten migration ausführen usw.“ Heute braucht eine Installation `bin/setup.php` und Konsolenzugriff – auf geteiltem Hosting ist das genau die Hürde, an der es scheitert.
 
 **Ablauf, wie bei WordPress, aber ohne dessen Nachlässigkeiten:** eine Seite unter `/install`, die nur antwortet, solange keine Installation existiert, und danach dauerhaft 404 liefert. Schritte: (1) Systemprüfung – PHP-Version, benötigte Erweiterungen, Schreibrechte auf `var/` und den Medienordner, ob `public/` wirklich der Dokumentenstamm ist; jede Prüfung mit dem Satz, was zu tun ist, wenn sie fehlschlägt. (2) Datenbank – SQLite-Datei oder MySQL-Zugangsdaten, Verbindung sofort geprüft statt erst beim Speichern. (3) Migration ausführen, mit Ausgabe der angewandten Versionen. (4) Erstes Administratorkonto – Name und Passwort, dieselben Regeln wie in der Benutzerverwaltung. (5) Website – Name, Adresse, Sprache; dazu Kopf- und Fußbereich, Startseite sowie Datenschutz- und Impressumsgerüst anlegen. (6) Fertig: Anmeldung, und eine Liste dessen, was noch auszufüllen ist.
 
+**Davor steht ein einzelner Dateidownload** (Nutzerauftrag vom 12.09.2026: „einen installer das eine php ist und alle dateien herunterladet dann muss man nicht alles hochladen. Am besten zip herunterladen dann entpacken“). Eine Datei `install.php` per FTP hochladen, im Browser aufrufen, fertig – statt tausende Dateien einzeln zu übertragen. Das ist der Teil, der über Sicherheit entscheidet, deshalb die Regeln vorweg:
+
+- **Die Adresse steht in der Datei, nicht im Formular.** Ein Installer, der eine URL abfragt und den Inhalt entpackt, ist eine Einladung, fremden Code auf den Server zu legen. Geladen wird von einer festen Adresse des Releasearchivs.
+- **Die Prüfsumme steht ebenfalls in der Datei.** SHA-256 des Archivs, in `install.php` eingebacken und vor dem Entpacken verglichen. Stimmt sie nicht, wird abgebrochen – ohne Prüfsumme kein Entpacken, auch nicht mit Häkchen.
+- **HTTPS mit Zertifikatsprüfung**, kein `verify_peer => false`, kein Rückfall auf HTTP.
+- **Schutz gegen ZIP-Slip:** jeder Eintrag wird gegen das Zielverzeichnis geprüft, bevor er geschrieben wird. Ein Archiveintrag `../../.env` darf nichts außerhalb des Ziels anfassen.
+- **Nach dem Entpacken löscht sich die Datei selbst** und verweigert jeden weiteren Aufruf, sobald eine Installation existiert.
+- **Vorprüfung zuerst:** Schreibrechte, `ZipArchive` oder `PharData`, genug Platz, PHP-Version, und ob der Download überhaupt möglich ist (`allow_url_fopen` oder curl). Fehlt etwas, sagt die Seite welche Zeile in welcher Datei zu ändern ist – statt auf halbem Weg zu scheitern.
+- **`vendor/` ist im Archiv.** Damit ist die offene Frage aus Arbeitspaket J für diesen Weg entschieden: das Releasearchiv wird auf einem Build-Rechner erzeugt und bringt die Abhängigkeiten mit, weil geteiltes Hosting kein Composer hat.
+
+Danach übernimmt der eigentliche Installer unten: Systemprüfung, Datenbank, Migration, erstes Konto, Website.
+
 **Die drei Punkte, an denen WordPress-Installer regelmäßig zum Problem werden, und was hier anders läuft:**
 - **Der Installer schreibt `.env`,** braucht dafür Schreibrechte im Projektstamm und sagt es, statt die Datei stillschweigend nicht zu schreiben. `APP_SECRET` wird erzeugt, nicht abgefragt.
 - **Er ist nach dem ersten Durchlauf tot.** Gesperrt wird über den Zustand der Datenbank (existiert ein Konto?), nicht über eine Datei, die jemand löschen kann.
 - **Er legt keine Zugangsdaten in ein Protokoll und zeigt kein Passwort erneut an.**
 
-Abnahme: eine leere Installation ist im Browser in sechs Schritten betriebsbereit, ohne Konsole. Ein zweiter Aufruf von `/install` liefert 404. Die Systemprüfung schlägt bei fehlenden Schreibrechten fehl und sagt, welcher Pfad fehlt. Getestet gegen ein leeres Verzeichnis und eine leere Datenbank, nicht gegen die Entwicklungsinstallation.
+Abnahme: **eine einzelne hochgeladene PHP-Datei genügt**, um von einem leeren Webspace zu einer betriebsbereiten Installation zu kommen; eine leere Installation ist im Browser in sechs Schritten betriebsbereit, ohne Konsole. Ein manipuliertes Archiv (falsche Prüfsumme) wird abgelehnt, und ein Archiveintrag mit `..` im Pfad landet nirgends. Ein zweiter Aufruf von `/install` liefert 404. Die Systemprüfung schlägt bei fehlenden Schreibrechten fehl und sagt, welcher Pfad fehlt. Getestet gegen ein leeres Verzeichnis und eine leere Datenbank, nicht gegen die Entwicklungsinstallation.
+
+### O – Sicherung und Wiederherstellung als Funktion (Nutzerauftrag vom 12.09.2026) — **erledigt am 12.09.2026** (ADR 038), außer MySQL und dem Download über den Browser
+
+*Braucht: nichts. Für MySQL zusätzlich die Hostingentscheidung aus Arbeitspaket J.*
+
+Umut: „Todo aufnehmen. Standard backup funktion.“ Heute gibt es Sicherungen nur als Nebenprodukt: der Updater kopiert die Datenbank vor einem Update, und ich habe vor jeder Migration von Hand eine Kopie in `var/backups/` gelegt. Das ist keine Sicherungsfunktion, das ist Disziplin – und Disziplin fällt aus, sobald jemand anderes arbeitet.
+
+**Was in eine Sicherung gehört**, und was nicht:
+
+- **Die Datenbank.** Bei SQLite die Datei, und zwar konsistent: eine Kopie während eines Schreibvorgangs kann unbrauchbar sein, deshalb `VACUUM INTO` statt `copy()`. Bei MySQL `mysqldump`.
+- **Der Medienordner.** Ohne ihn ist die Sicherung wertlos: die Dokumente verweisen auf Bild-IDs, die Dateien liegen im Medienordner. Das ist auch der Teil, der groß wird.
+- **Ein Manifest**: Zeitpunkt, Fassung aus `VERSION`, höchste angewandte Migration, Anzahl Seiten, Fassungen und Medien, und eine Prüfsumme je Teil. Ohne das weiß man beim Zurückspielen nicht, ob die Sicherung zum Code passt.
+- **Nicht `.env`.** Darin steht `APP_SECRET`; eine Sicherung, die man herunterlädt und weitergibt, darf das nicht enthalten. Die Datei wird beim serverseitigen Aufbewahren mitkopiert (der Updater tut das schon), aber nicht in ein Archiv gelegt, das den Server verlässt. Beim Zurückspielen wird sie deshalb auch nicht überschrieben.
+
+**Ablauf einer Sicherung:** Wartungszustand ist *nicht* nötig – `VACUUM INTO` liefert einen konsistenten Stand, und Medien werden nur hinzugefügt, nie verändert. Geschrieben wird nach `var/backups/sicherung-<zeitstempel>/` mit Manifest; auf Wunsch als ein Archiv. `var/` liegt außerhalb des Dokumentenstamms (`public/`), also ist keine Sicherung über das Netz erreichbar – das muss die Systemprüfung nachweisen, nicht annehmen.
+
+**Aufbewahrung mit Rotation:** die letzten sieben täglichen, vier wöchentlichen, drei monatlichen. Ohne Rotation läuft die Platte voll und dann scheitert die nächste Sicherung genau dann, wenn man sie braucht.
+
+**Herunterladen:** in der Verwaltung, als Archiv, gestreamt. Mit zwei ehrlichen Hinweisen: ohne `.env`, und bei einem großen Medienordner bricht ein Browserdownload womöglich ab – dann ist die Konsole oder ein Dateizugriff der Weg. Kein Archiv im Speicher aufbauen.
+
+**Wiederherstellung** ist der Teil, der zählt, und der Teil, den niemand übt:
+
+1. `cms:restore <verzeichnis-oder-archiv>`, und in der Verwaltung nur die Anzeige, welche Sicherungen es gibt. Ein Knopf, der die Datenbank überschreibt, gehört nicht neben einen Knopf, der eine Seite speichert.
+2. Manifest gegen die laufende Installation prüfen: eine Sicherung aus einer **neueren** Fassung wird abgewiesen – deren Migrationen kennt der alte Code nicht. Eine ältere ist erlaubt, dann läuft danach die Migration.
+3. Wartungszustand an, **Sicherung des aktuellen Stands** anlegen (auch eine Wiederherstellung kann die falsche sein), Datenbank ersetzen, Medien ergänzen statt löschen, Migration, Cache, Rauchtest, Wartungszustand aus.
+4. Protokoll nach `var/backups.log`.
+
+**Was gebaut wird:** `src/Ops/Backup.php`, `cms:backup` (mit `--rotate`, `--archive`), `cms:restore` (mit `--force`), eine Übersicht im Bildschirm „System“ mit Größe, Zeitpunkt, Fassung und Prüfsummenstatus je Sicherung, und ein Eintrag im Cronjob-Abschnitt des README.
+
+**Abnahme – und hier liegt der offene Punkt aus Arbeitspaket I:** eine Wiederherstellung ist *nachgewiesen*. Nicht „die Funktion existiert“, sondern: eine Sicherung wird angelegt, die Datenbank wird nachweislich verändert (eine Seite gelöscht, ein Bild entfernt), die Sicherung wird zurückgespielt, und danach ist beides wieder da – geprüft im Test gegen eine wegwerfbare Installation und einmal von Hand auf der Entwicklungsinstallation. Eine Sicherungsfunktion, deren Wiederherstellung nie gelaufen ist, ist eine Vermutung.
 
 ### K – Migration von kant-it.de
 

docs/DESIGNER-VERGLEICH.md

@@ -0,0 +1,102 @@
+# Der Designer im Vergleich mit Flatsome (UX Builder)
+
+Stand: 12.09.2026.
+
+## Woran dieser Vergleich hängt
+
+Umut hat gefragt: „Ist der Designer vom Funktionsumfang so aufgestellt wie Flatsome?“ Zur Ehrlichkeit gehört, wie ich das geprüft habe – und wie nicht.
+
+**Nicht geprüft:** Flatsome selbst. Die Erweiterung ist hier nicht installiert, das WordPress-Backend des Piloten ist mir nicht zugänglich, und in der öffentlich ausgelieferten Startseite sieht man die Bausteine, nicht den Baukasten. Ich habe also **keinen Klick in UX Builder gemacht**.
+
+**Geprüft:** der eigene Designer, Eigenschaft für Eigenschaft, gegen den mir bekannten Funktionsumfang von UX Builder (Elementliste, Optionsgruppen je Element, Animations- und Hover-Sammlung). Das ist Wissen, keine Messung – wo es falsch ist, korrigiere mich, dann ziehe ich nach. Für die konkrete Pilotseite ist ohnehin der Abgleich aus Arbeitspaket K maßgeblich, und der braucht Backendzugang.
+
+## Gestaltungsoptionen
+
+Vor heute hatte der Designer 50 Eigenschaften, jetzt 93 – jede je Gerät (Desktop, Tablet, Mobil) und ein Teil zusätzlich für den Hover-Zustand.
+
+| Bereich | Flatsome (UX Builder) | KantSites |
+| --- | --- | --- |
+| Typografie | Schriftart, Größe, Gewicht, Zeilenhöhe, Laufweite, Ausrichtung, Schreibweise, Farbe | **11 Eigenschaften**, dazu Schriftlage, Textlinie, Wortabstand; Schriftart aus der Website-Palette (Systemschrift oder Google Fonts) |
+| Hintergrund | Farbe, Bild, Position, Größe, Wiederholung, Parallax, Überlagerung, Verlauf, Video | **11**: Farbe, Bild aus der Mediathek, Größe, Ausschnitt, Wiederholung, Scrollverhalten, Überlagerung mit Deckkraft, Verlauf mit Winkel. **Fehlt: Parallax und Video-Hintergrund** |
+| Abstand | Innen/Außen je Seite | **je Seite**, je Gerät |
+| Größe | Breite, Höhe, Mindesthöhe | **7**: Breite, Mindest-, Maximalbreite, Höhe, Mindest-, Maximalhöhe, Überlauf |
+| Rahmen | Stärke je Seite, Farbe, Art, Rundung je Ecke | **8**: alles davon, dazu ein zweiter Rahmen (outline) mit Abstand. **Heute behoben:** die Stärke je Seite erzeugte `border-width-top` statt `border-top-width` – ungültiges CSS, das der Browser stillschweigend verwarf. Rahmenstärken je Seite hatten damit nie eine Wirkung |
+| Bild | Rundung, Zuschnitt, Seitenverhältnis, Filter | **neu, 8 Eigenschaften**, die auf das Bild *im* Block wirken statt auf seinen Rahmen: Ausschnitt (object-fit), Bildmitte, Seitenverhältnis, Höhe, Ecken je Ecke, Rahmen. Vorher landete eine Rundung auf dem `figure` und das Bild blieb eckig – genau das, was Umut aufgefallen ist |
+| Layout | Spalten, Abstand, Verteilung, Ausrichtung | **20**: Anzeige, Flexrichtung, Umbruch, Verteilung, Ausrichtung, Spaltenzahl, Abstände (auch getrennt für Zeilen und Spalten), Reihenfolge, eigene Ausrichtung, Wachsen, Schrumpfen, Grundbreite, **Positionierung (auch freigestellt und klebend), Abstände zu allen vier Rändern, Ebene (z-index)** |
+| Wirkung | Schatten, Deckkraft, Animationen, Hover | **26**: Deckkraft, Schatten (auch **innen**), Textschatten, Verschieben, Skalieren, Drehen, Übergangsdauer, **Weichzeichnen, Helligkeit, Kontrast, Sättigung, Graustufen, Sepia, Farbdrehung, Umkehren, Mischmodus, Mauszeiger** |
+| Eigener Code | CSS je Element | **CSS je Element für alle, Skript je Element nur für Administratoren** (ADR 028) |
+| Sichtbarkeit je Gerät | „Hide on mobile/tablet/desktop“ | über `Anzeige: keine` je Gerät möglich, aber **nicht als eigener Schalter** – siehe „Was noch fehlt“ |
+| Abschnittsbreite | Normal, breit, randlos | **Normal (1180 px), schmal (800 px), breit (1600 px), randlos** – randlos heißt ohne Begrenzung und ohne Rand, für Bild oder Farbfläche von Kante zu Kante |
+| Globale Inhaltsbreite | im Theme einstellbar | **im Designbereich einstellbar** – und wirkt seit heute auch nach oben; vorher deckelte das Stylesheet bei 1180 px |
+| Volle Bildschirmhöhe | „Full screen“ je Abschnitt | über `Mindesthöhe: 100dvh` plus `Anzeige: flex` und `Ausrichtung quer: Mitte`; die Vorlage **„Vollbild-Hero“** setzt genau das auf einen Klick. Neu sind dafür die Einheiten **dvh, svh, lvh** – `100vh` ist auf dem Handy höher als der Bildschirm |
+
+### Bewegung
+
+| | Flatsome | KantSites |
+| --- | --- | --- |
+| Einblendungen | rund fünfzehn, beim Scrollen ausgelöst | **neun** (sanft, von unten, von oben, von links, von rechts, Heranzoomen, Kippen, aus der Unschärfe) mit **Verzögerung** in drei Stufen. **Sie laufen beim Laden der Seite, nicht beim Scrollen** – dafür bräuchte es JavaScript, und eine öffentliche Seite führt keines aus. Das steht so im Editor |
+| Hover | rund zehn | **sieben** (anheben, absenken, Bild vergrößern, Leuchten, Kippen, Rahmen einfahren) – dazu **frei**: jede Farbe, jeder Schatten, jede Verschiebung, jede Skalierung hat einen eigenen Hover-Wert |
+| „Bewegung reduzieren“ | teilweise berücksichtigt | **jede** Animation liegt in der Abfrage `prefers-reduced-motion`; wer weniger Bewegung wünscht, bekommt den Endzustand |
+
+## Bausteine
+
+| Flatsome-Element | KantSites |
+| --- | --- |
+| Section, Row, Column | Sektion, Zeile, Spalte – **neu: „Zeile, 2/3/4 Spalten“ auf einen Klick**, weil eine leere Zeile aussieht wie nichts und deshalb niemand sie gefunden hat |
+| Text, Headline | Text mit Werkzeugleiste und HTML-Ansicht, Überschrift |
+| Button | Button |
+| Image, Gallery | Bild, Galerie |
+| Icon, Icon Box | **neu: Symbol** als eigenes Element (vorher nur in der Symbolkarte), Symbolkarte |
+| Slider, Banner | **neu: Slider** als Scrollbereich mit Einrasten – ohne JavaScript, ohne Autoplay, mit Finger, Trackpad, Mausrad und Tastatur bedienbar. Sichtbare Folien je Gerät einstellbar |
+| Accordion, Tabs | Akkordeon, Tabs |
+| Progress bar | **neu: Fortschritt** – mit `role="meter"` und dem Wert im Markup, nicht nur in der Balkenbreite |
+| Testimonial | Kundenstimme mit Sternen |
+| Counter, Countdown | **fehlt** – braucht JavaScript |
+| Team member, Price table | **fehlt als eigenes Element**; aus Zeile, Spalte, Bild, Überschrift und Liste zusammensetzbar |
+| Video | **teils**: ein eingebettetes Video geht über „Externer Inhalt“ und lädt erst nach Einwilligung. Eine selbst gehostete Videodatei fehlt |
+| Google Map | über „Externer Inhalt“ – **und zwar richtig**: ohne Einwilligung wird keine Verbindung zu Google aufgebaut |
+| Social icons, Share | **fehlt als Element**; aus Symbolen mit Linkziel zusammensetzbar |
+| Contact form | Formular, serverseitig validiert, mit Einwilligung und Spamschutz |
+| Blog posts | Beitragsliste, nach Kategorie oder Schlagwort filterbar |
+| Shop-Elemente | **bewusst nicht** – kein Shop im Projekt |
+| Popup, Lightbox | **fehlt** – braucht JavaScript |
+| HTML, Custom CSS | eigenes CSS je Element für alle, eigenes Skript nur für Administratoren |
+| Divider, Gap | Trennlinie, Abstand |
+| Search | **fehlt** – es gibt keine Suche auf der Website (Arbeitspaket M) |
+| Breadcrumbs, Navigation | Brotkrumen, Navigation aus der Menüverwaltung – **vier Plätze** (Haupt, zweite, Fußzeile, Rechtliches) und **drei Arten**: waagerecht, untereinander, aufklappbar als Burger (ohne JavaScript) |
+| Kopfbereich je Seite („Hide header“) | **je Seite wählbar**: Standard, ein anderer Kopf- oder Fußbereich, oder keiner |
+| Verknüpfte Abschnitte | Verknüpfte Sektion – eine Änderung wirkt auf allen Seiten, die sie einbinden |
+
+## Was absichtlich anders ist
+
+Das ist kein Funktionsmangel, sondern eine Entscheidung:
+
+1. **Eine öffentliche Seite führt kein JavaScript aus** (`script-src 'none'`), außer sie enthält Tabs oder ein eigenes Skript. Deshalb gibt es kein Autoplay-Karussell, keinen Countdown und kein Popup. Der Preis: diese drei fehlen. Der Gegenwert: die Seite ist ohne Skript vollständig lesbar und schnell, und eine ganze Klasse von Fehlern und Angriffen entfällt.
+2. **Keine Inline-Stile.** Jede Gestaltung wird zu einem Stylesheet mit Hash zusammengefasst. Deshalb sind Symbolgrößen und Fortschrittswerte Klassen und keine `style`-Attribute.
+3. **Eingebettete Inhalte laden erst nach Einwilligung** – vorher steht nicht einmal die Adresse des Anbieters im HTML.
+4. **Jeder Wert wird serverseitig geprüft.** Was der Editor anbietet, ist genau das, was der Server annimmt; ein Muster oder eine feste Liste je Eigenschaft, keine freie CSS-Eingabe außer im ausdrücklich dafür gedachten Feld.
+5. **Kein Shop und keine Produktelemente.**
+
+## Was noch fehlt, nach Nutzen geordnet
+
+1. **Sichtbarkeit je Gerät als eigener Schalter.** Technisch über `Anzeige: keine` je Gerät schon möglich, aber niemand sucht es dort. Ein Häkchen „Auf diesem Gerät ausblenden“ im Designbereich – klein, hoher Nutzen.
+2. **Parallax und Video-Hintergrund.** Parallax geht in modernen Browsern rein mit CSS (`background-attachment: fixed` gibt es schon; echtes Parallax bräuchte `animation-timeline: scroll()`, das Safari und Firefox noch nicht können). Video-Hintergrund braucht ein `<video>`-Element und eine Entscheidung über Datenmenge und Einwilligung.
+3. **Selbst gehostetes Video** als Element, mit Vorschaubild und ohne Autoplay mit Ton.
+4. **Countdown und Popup.** Beide brauchen ein Skript. Machbar wie die Tabs: eine Seite, die eines enthält, bekommt `script-src 'self'` und lädt eine kleine Datei. Das ist eine bewusste Aufweichung – ich würde sie nur bauen, wenn du sie wirklich brauchst.
+5. **Einblendung beim Scrollen** statt beim Laden. Ohne Skript nur mit `animation-timeline: view()` möglich, das noch nicht überall funktioniert; mit Skript sofort.
+6. **Soziale Symbole, Preistabelle, Teammitglied** als eigene Elemente – heute zusammensetzbar, aber jedes Mal Handarbeit.
+7. **Suche auf der Website.**
+8. **Vorlagenbibliothek.** Flatsome bringt fertige Seitenvorlagen mit. Hier gibt es drei Abschnittsvorlagen und die Zeilenvorlagen; eine echte Sammlung gehört zu Arbeitspaket H (Templates).
+
+## Was heute dabei herauskam
+
+Neben dem Ausbau zwei echte Fehler, beide vorher unbemerkt:
+
+- **Rahmenstärken je Seite hatten nie eine Wirkung.** `border-width-top` ist kein CSS; der Browser verwirft die Zeile stillschweigend. Die Schreibweise steht jetzt je Eigenschaft im Schema, weil sie sich nicht erraten lässt.
+- **Eine Rundung auf einem Bildblock rundete den Rahmen, nicht das Bild.** Jetzt erbt das Bild die Rundung seines Rahmens, und die neuen Bild-Eigenschaften schreiben ohnehin direkt auf das Bild.
+
+## Offen: Menüart je Gerät (13.09.2026)
+
+Beim Nachbau von kant-it.de aufgefallen: die **Menüart** (`horizontal`, `vertikal`, `Burger`) gilt für alle Bildschirmgrößen. Gebraucht wird fast immer „auf dem Desktop nebeneinander, auf dem Telefon ein Burger". Heute geht das nur über **zwei Menüblöcke**, von denen je Gerät einer über `display: none` ausgeblendet wird – das funktioniert und ist barrierefrei (der ausgeblendete Block steht nicht im Zugänglichkeitsbaum), aber es ist eine Umgehung und keine Einstellung.
+
+Sauber wäre die Menüart als Wert je Gerät, wie es die Gestaltungseigenschaften ohnehin sind. Dafür müsste die Umschaltung ohne doppeltes Markup auskommen – `<details>` lässt sich per CSS nicht zuverlässig in allen Browsern aufklappen, also läuft es entweder auf ein Aufklappmuster ohne `details` hinaus oder auf zwei gerenderte Varianten, von denen eine verborgen ist. Die Entscheidung steht aus.

docs/FLATSOME-ABGLEICH.md

@@ -0,0 +1,117 @@
+# Abgleich mit dem Flatsome UX Builder
+
+## Bedienkorrektur für leere Layouts (14.09.2026, KantSites 1.6.2)
+
+Erneuter Quelltextabgleich mit dem von Umut genannten Ordner `C:\Users\UmutKantarci\Downloads\flatsome`, Theme-Version **3.20.9** laut `style.css`. Keine laufende WordPress-Installation dieses Pakets gestartet; die folgenden Aussagen stammen aus seinen tatsächlichen Builder-Dateien.
+
+| Beobachtung im Flatsome-Code | Umsetzung in KantSites |
+| --- | --- |
+| `assets/css/builder/core/content.css`: leeres `content` mit mindestens 90 px Höhe, getöntem Hintergrund und gepunktetem Rahmen | Vorschau-only-Flächen für leere Sektionen, Zeilen und Spalten mit realer Mindesthöhe, Rahmen und Typbezeichnung |
+| `tools-addable.is-empty` und `assets/js/builder/core/content.js`: Plus in der Mitte, eigener Einfüge-/Drop-Zustand für leere Container | „Inhalt hinzufügen“ im Zielbereich; Spalten werden nummeriert; der Einfügepunkt wird konkret markiert und benannt |
+| `inc/builder/shortcodes/row.php`: fertige Zeilen mit einer, zwei, drei und vier Spalten | Diese vier gleichmäßigen Layouts direkt in der leeren Sektion anbieten, einschließlich passender mobiler Stapelung |
+
+Zusätzlich: neue Container werden nach dem Rendern in den sichtbaren Ausschnitt gebracht, ein Auswahlwechsel löst alte Einfügepunkte, und beim Ziehen scrollt die Vorschau an den Rändern mit. Die Ablageanzeige nennt den Zielcontainer; beim Verschieben von Spalten entscheidet die horizontale Position. Editorhilfen entstehen ausschließlich im Vorschau-DOM, nicht im gespeicherten Dokument oder in der öffentlichen Ausgabe.
+
+Der ältere Gesamtabgleich unten bleibt eine historische Bestandsaufnahme. Diese Änderung übernimmt konkrete Bedienprinzipien für den Aufbau, keine vollständige Flatsome-Oberfläche und keine WordPress-/Shortcode-Abhängigkeit.
+
+Stand: 14.09.2026, KantSites 1.5.0 (Dokumentschema v19).
+Quelle des Vergleichs: Flatsome-Theme im Download-Ordner, `inc/builder/shortcodes/` (69 Definitionen)
+und `inc/shortcodes/`. Ziel laut Auftrag: alle Funktionen übernehmen und verbessern, die
+Bedienbarkeit übernehmen und verbessern, die Oberfläche mobil nutzbar machen — der Builder
+bleibt dabei Desktop-first.
+
+## 1. Wo KantSites heute schon besser ist
+
+Diese Punkte sind bereits gelöst und dürfen beim Nachbau nicht verschlechtert werden.
+
+| Thema | Flatsome | KantSites heute |
+| --- | --- | --- |
+| Datenhaltung | Shortcode-Text im `post_content`, per Regex geparst | Validierter Blockbaum mit stabilen IDs, versioniert (v19), Migrationsweg |
+| Gestaltung | Feste Optionslisten je Element, wenige Werte je Gerät | 93 freie Eigenschaften, je Block, je Gerät **und** für Hover |
+| Öffentliche Ausgabe | jQuery, mehrere Bundles, Slider/Tabs brauchen JS | Tabs/Slider/Fortschritt ohne JavaScript, Editorcode nicht im Frontend |
+| Entwurf/Live | Revisionen von WordPress | Entwurf und Veröffentlichung getrennt, Fassungsverlauf, geplante Veröffentlichung, Papierkorb |
+| Recht | Plugins nötig | Einwilligung mit echtem Zurückhalten, Statistik ohne Wiedererkennung, Pflichtseiten |
+| Eigener Code | `ux_html`-Element | CSS je Element für alle, Skript nur für Administratoren, als eigene Datei |
+
+**Folgerung:** Der Gestaltungsteil muss nicht nachgebaut werden. Zu tun sind der
+Elementkatalog und die Bedienung.
+
+## 2. Elementkatalog — Lücke
+
+Flatsome hat 69 Builder-Elemente, davon 12 reine Shop-Elemente (WooCommerce).
+KantSites hat 31 Blocktypen.
+
+### Bereits abgedeckt (21)
+
+`section` `row` `col` `title` `text` `ux_image` `button` `ux_gallery` `blog_posts`
+`featured_box` `testimonial` `accordion` `accordion_item` `tabgroup` `tab` `contact`
+`divider` `gap` `block` `ux_menu` `ux_slider`
+
+### Offen, ohne Shop (20)
+
+| Flatsome | Was es kann | Bewertung |
+| --- | --- | --- |
+| `ux_banner` | Bild/Video-Hintergrund, Overlay, Höhe, Parallax, Textposition | **hoch** — das meistgenutzte Element überhaupt |
+| `text_box` | frei positionierter Textkasten über einem Banner | **hoch** — gehört zu `ux_banner` |
+| `ux_stack` | Elemente nebeneinander, mit Abstand und Ausrichtung | **hoch** — löst viele Zeile/Spalte-Verrenkungen |
+| `ux_image_box` | Bild über Text als Karte | hoch |
+| `col_grid` / `ux_banner_grid` | Rasterlayout mit ungleichen Kacheln | mittel |
+| `message_box` | Hinweiskasten mit Symbol und Farbe | mittel |
+| `price_table` | Preistabelle | mittel |
+| `team_member` | Person mit Bild, Rolle, Sozialsymbolen | mittel |
+| `ux_pages` | Unterseiten dieser Seite auflisten | mittel |
+| `ux_video` | eingebettetes Video | teilweise über `embed` |
+| `video_button` | Video im Leuchtkasten öffnen | mittel |
+| `map` | Karte | teilweise über `embed` |
+| `follow` | Sozialsymbole zum Folgen | mittel |
+| `share` | Teilen-Symbole | niedrig |
+| `search` | Suchfeld | mittel |
+| `logo` | Logo der Website als Block | hoch (Kopfbereich) |
+| `scroll_to` | Ankerziel und Sprunglink | mittel |
+| `ux_countdown` | Countdown | niedrig |
+| `ux_hotspot` | Punkte auf einem Bild | niedrig |
+| `ux_lottie` / `ux_instagram_feed` / `ux_portfolio` | Animation, Instagram, Portfolio | niedrig |
+| `ux_the_title` | dynamischer Seitentitel | mittel (Vorlagen) |
+
+### Bewusst ausgelassen (12)
+
+Alle WooCommerce-Elemente (`products`, `ux_products`, `ux_products_list`,
+`ux_product_categories`, `ux_product_flip`, `ux_bestseller_products`, `ux_payment_icons`,
+`ux_product_gallery`, `woocommerce_cart`, `woocommerce_checkout`, `ux_badge`,
+`custom-product`). KantSites hat keinen Shop; ohne Warenkorb, Bestellung und Zahlung
+wären diese Blöcke leere Hüllen.
+
+## 3. Bedienung — die eigentliche Lücke
+
+Der Auftrag nennt die Bedienbarkeit ausdrücklich. Hier ist Flatsome heute voraus.
+
+| Flatsome | KantSites heute | Verbesserung |
+| --- | --- | --- |
+| Element aus der Liste **in die Vorschau ziehen**, mit Einfügemarke | Einfügen „hinter das gewählte Element“ | Ziehen mit sichtbarer Marke, **zusätzlich** die heutige Tastaturbedienung behalten |
+| **Werkzeugleiste am Element** in der Vorschau (bearbeiten, duplizieren, löschen, Elternelement) | nur über den Strukturbaum links | Leiste am Element, Auswahl bleibt mit dem Baum verbunden |
+| **Pluszeichen zwischen Elementen** | — | Einfügepunkt genau dort, wo geklickt wird |
+| Elementwahl als **Bilderraster** mit Suche | Textliste mit Symbolzeichen | Raster mit echten Vorschaubildern, Suche, Kategorien |
+| **Vorlagen je Element** mit Vorschaubild (Sektion: 20+) | 4 Textvorlagen gesamt | Vorlagen je Element, mit Bild, erweiterbar |
+| **Je Option ein Geräteschalter** | ein globaler Geräteschalter | Schalter direkt an der Option, zeigt wo ein abweichender Wert gesetzt ist |
+| **Zahl durch Ziehen ändern** (`scrubfield`) | Eingabefeld | Ziehen plus Eingabe plus Pfeiltasten |
+| **Innen-/Außenabstand als Rahmenbild** | vier Felder | Rahmenbild mit verbundenen Seiten |
+| **Spaltenbreite in der Vorschau ziehen** | Zahl eingeben | Ziehgriff zwischen Spalten |
+| Vorschau **sofort** (clientseitige Vorlagen) | Server-Neuladen, entprellt | Sofortige optimistische Anzeige, Server bleibt die Wahrheit |
+| Kopieren/Einfügen zwischen Seiten | — | Zwischenablage für Blöcke, seitenübergreifend |
+| Mobil | Builder nicht bedienbar | Verwaltung vollständig mobil; Builder mobil im Lesemodus mit Inhaltsbearbeitung |
+
+## 4. Vorgeschlagene Reihenfolge
+
+1. **Arbeitspaket H — Bedienung des Builders.** Ziehen und Ablegen, Werkzeugleiste am
+   Element, Einfügepunkte, Bilderraster, optimistische Vorschau. Größter Nutzen je Aufwand,
+   betrifft jedes vorhandene Element sofort.
+2. **Arbeitspaket I — Elementkatalog Stufe 1.** `banner`, `textbox`, `stack`, `imagebox`,
+   `logo`, `messagebox`. Die Blöcke, ohne die eine Startseite Umwege braucht.
+3. **Arbeitspaket J — Optionsbedienung.** Geräteschalter je Option, Ziehfelder,
+   Abstandsrahmen, Spaltenbreite ziehen, Vorlagen je Element.
+4. **Arbeitspaket K — Elementkatalog Stufe 2.** Raster, Preistabelle, Team, Unterseiten,
+   Video-Leuchtkasten, Suche, Sozialsymbole, Ankersprung.
+5. **Arbeitspaket L — Mobile Oberfläche.** Verwaltung und Builder auf dem Telefon.
+
+Jede Stufe endet mit einem prüfbaren Ergebnis und darf die Qualitätsziele aus AGENTS.md
+nicht verschlechtern.

docs/LIVEGANG.md

@@ -0,0 +1,55 @@
+# Livegang von kant-it.de
+
+Stand: 13.09.2026. Diese Liste trennt, was **geprüft ist**, von dem, was **nur auf dem echten Hosting geprüft werden kann** – und in welcher Reihenfolge umgeschaltet wird.
+
+## Geprüft (lokal, gegen den Nachbau)
+
+| Prüfung | Ergebnis |
+| --- | --- |
+| PHPUnit, PHP 8.2 und 8.4 | 409 Tests, 1791 Zusicherungen, grün |
+| JavaScript-Modelltests | grün |
+| Editor durchgespielt (Playwright + axe) | grün, isolierte Datenbank |
+| Öffentliche Seiten (Playwright + axe, 1440 px und 390 px) | keine Beanstandung |
+| Interne Verweise (`npm run test:links`) | 35 Seiten, 408 Adressen, kein toter Verweis |
+| Lighthouse, vier Adressen, je drei Läufe | Barrierefreiheit, Best Practices, SEO, agentic browsing **100** überall; Performance 100 außer Startseite (98 mobil / 96 Desktop) |
+| Sicherung (`cms:backup`) | angelegt: 33 Seiten, 100 Fassungen, 388 Mediendateien |
+| Weiterleitungen der alten WordPress-Adressen | 14 Stück angelegt, alle beantwortet mit 301 |
+
+Gemessen wurde im Produktionsmodus auf dem PHP-Entwicklungsserver, der dieselben Kopfzeilen sendet wie `public/.htaccess`. **Das ist kein Ersatz für eine Messung auf dem echten Hosting.**
+
+## Nicht geprüft – muss vor dem Umschalten passieren
+
+1. **E-Mail-Versand.** Nie ausgeführt, in keiner Umgebung. `MAILER_DSN=sendmail://default` funktioniert auf den meisten PHP-Hostings; verlangt der Anbieter SMTP, gehört dort eine Zeile der Form `smtp://benutzer:passwort@mailserver:587` hinein. **Nach dem Hochladen eine echte Anfrage über das Kontaktformular abschicken und prüfen, ob sie ankommt** – auch im Spam-Ordner. Die Anfrage wird vor dem Versand gespeichert; kommt keine Mail an, steht sie trotzdem unter „Formulare“ in der Verwaltung.
+2. **HTTPS.** Zertifikat einrichten, dann in `public/.htaccess` die drei Zeilen der HTTPS-Umleitung einschalten. **Erst wenn das eine Weile läuft**, die HSTS-Zeile aktivieren – sie lässt sich in einem Browser ein halbes Jahr lang nicht zurücknehmen.
+3. **www oder nicht.** Das alte kant-it.de ist kanonisch mit `www`. Die Entscheidung steht an einer Stelle: `SITE_ORIGIN` in `.env` (`php bin/console cms:site:origin https://www.kant-it.de`). Die jeweils andere Schreibweise leitet die Anwendung selbst mit 301 dorthin um; in `.htaccess` gibt es dafür keine Regel mehr. Der Bildschirm „System“ zeigt die eingetragene Adresse und warnt, wenn die Verwaltung gerade unter einer anderen läuft.
+4. **Datenbank.** Geprüft ist ausschließlich SQLite. Für MySQL ist alles vorbereitet, aber nichts erprobt – wer MySQL nimmt, sollte danach Seiten anlegen, veröffentlichen, Bilder hochladen und ein Formular absenden.
+5. **Wiederkehrende Aufgaben.** Sicherung, Statistik und geplante Veröffentlichung laufen nach dem Hochladen von selbst – angestoßen von Seitenaufrufen und vom geöffneten Backend (Verwaltung → Aufgaben). **Das genügt, ist aber nicht minutengenau:** ohne Besuch passiert nichts. Bietet der Hoster einen Cronjob, gehört `php bin/console cms:tasks:run` dorthin (jede Minute); bietet er nur einen URL-Cronjob, die Adresse vom Bildschirm „Aufgaben“ (alle fünf Minuten). Danach dort den Auslöser „Besuche der Website“ abschalten. **Nach dem Umzug einmal nachsehen**, ob in der Spalte „Zuletzt“ bei der Sicherung ein `ok` steht – ohne Sicherung gibt es keinen Rückweg.
+6. **Schriften.** Auf dem neuen Server einmal `php bin/console cms:fonts:fetch` ausführen oder im Designbereich den Knopf drücken – die Dateien liegen nicht im Repository. Bis dahin lädt die Seite die Schriften von Google, was sie nicht soll.
+7. **Rechtstexte.** Impressum und Datenschutzerklärung sind vom alten Auftritt übernommen. Der Abschnitt über Google Fonts wurde an die Wirklichkeit angepasst (die Schriften kommen jetzt vom eigenen Server), die Abschnitte über Google Maps und reCAPTCHA entfernt, weil beides nicht eingebunden ist. **Das ersetzt keine anwaltliche Prüfung**, und es ist die Verantwortung des Betreibers, nicht des CMS.
+8. **Texte.** Acht Projektbeschreibungen stammen nicht vom alten Auftritt, sondern sind neu geschrieben. Sie sollten gelesen werden, bevor sie öffentlich sind.
+
+## Optional: die Verwaltung umbenennen
+
+`/admin` ist die erste Adresse, die jeder Scanner probiert. `php bin/console cms:admin:path meine-verwaltung` legt sie woanders hin; der Name steht danach in `.env` und in keiner öffentlichen Datei. **Vorher notieren, wohin** – danach antwortet `/admin` mit 404 wie jede unbekannte Adresse. Zurück geht es mit `php bin/console cms:admin:path admin`.
+
+## Optional: Spamschutz mit Cloudflare
+
+Die Formulare haben drei eingebaute Prüfungen ohne Dritte. Kommt trotzdem Spam durch, gibt es unter
+Einstellungen → „Spamschutz für Formulare" Cloudflare Turnstile: Schlüsselpaar im Cloudflare-Konto
+anlegen (kostenlos), beide Schlüssel eintragen, Haken setzen. **Vorher wissen:** das Widget braucht
+JavaScript, und die IP-Adresse des Absenders geht an Cloudflare – beides gehört in die
+Datenschutzerklärung, bevor es scharf geschaltet wird.
+
+## Reihenfolge am Umzugstag
+
+1. Dateien auf das Hosting, `.env` mit `APP_ENV=prod`, `APP_DEBUG=0`, `DATABASE_URL`, `MEDIA_DIRECTORY`, `SITE_ORIGIN`, `MAILER_DSN` und einem neuen `APP_SECRET`.
+2. Datenbank und Medienordner einspielen (oder `php vendor/bin/doctrine-migrations migrate` auf einer leeren Datenbank und dann der Installer).
+3. `php bin/console cms:fonts:fetch`, danach eine Seite aufrufen und im Quelltext prüfen, dass nichts von `fonts.googleapis.com` geladen wird.
+4. Kontaktformular abschicken, Mail prüfen.
+5. **Jetzt erst** die Domain umstellen.
+6. Danach: `CMS_URL=https://www.kant-it.de npm run test:links` von einem Rechner mit Node, `robots.txt` und `sitemap.xml` im Browser aufrufen, die Sitemap in der Google Search Console neu einreichen, und drei bis vier alte Adressen von Hand aufrufen (etwa `/productsolutions/`, `/kanttresor-dsgvo-konforme-archivierung-fuer-moderne-unternehmen/`) – sie müssen mit 301 auf die neue Adresse führen.
+7. Eine Woche lang in der Search Console auf 404-Meldungen schauen; jede weitere alte Adresse bekommt eine Weiterleitung unter „Einstellungen → Weiterleitungen“.
+
+## Rückweg
+
+Das alte WordPress bleibt bis auf Weiteres bestehen. Geht etwas schief, wird die Domain dorthin zurückgestellt; die Inhalte des neuen Auftritts liegen unverändert in der Sicherung unter `var/backups/`.

docs/NEUE-WEBSITE.md

@@ -0,0 +1,228 @@
+# Eine neue Website mit KantSites bauen
+
+Diese Anleitung richtet sich an den, der die Arbeit macht – Mensch oder Assistent. Sie sagt, in
+welcher Reihenfolge etwas entsteht, welche Entscheidung wohin gehört und welche Fehler dieses
+Projekt schon einmal gemacht hat. Wer sie befolgt, kommt ohne Umwege zu einer Website, die die
+Prüfungen besteht.
+
+**Lies zuerst:** `AGENTS.md` (Projektregeln), `docs/STATUS.md` (was es gibt und was fehlt),
+`docs/ARCHITECTURE.md` (warum es so ist). Diese drei sind der Stand der Dinge; diese Datei hier ist
+das Kochbuch.
+
+---
+
+## 0. Die Grundregel
+
+**Alles, was eine Website ausmacht, steht in der Datenbank – nicht im Code.** Seiten, Kopf- und
+Fußbereich, Menüs, Formulare, Farben, Schriften, Einstellungen. Wer für eine neue Website eine
+Twig-Datei anfasst oder CSS in `public/assets/site.css` schreibt, hat sich verlaufen: dann ändert
+sich das Aussehen *aller* Installationen, und beim nächsten Update ist es weg.
+
+Ausnahme mit Ansage: eigenes CSS und eigenes Skript je Seite gibt es im Editor (Bereich „Code"),
+und es landet ebenfalls in der Datenbank.
+
+---
+
+## 1. Installation aufsetzen
+
+```bash
+# Eigene Datenbank und eigener Medienordner - nie gegen die Entwicklungsinstallation arbeiten.
+DATABASE_URL="sqlite:///…/var/kunde.db" php vendor/bin/doctrine-migrations migrate --no-interaction
+DATABASE_URL="sqlite:///…/var/kunde.db" MEDIA_DIRECTORY="…/var/kunde-media" php bin/console cms:user:create
+```
+
+Oder im Browser über `/install` – sechs Schritte, legt Startseite, Kopf, Fuß, Menü, Impressum und
+Datenschutzgerüst gleich mit an.
+
+**Die Verwaltung muss nicht `/admin` heißen.** `ADMIN_PATH` in `.env` setzt die Adresse; `php
+bin/console cms:admin:path <neu>` prüft, ändert und sagt, welcher Zwischenspeicher danach zu leeren
+ist. Bei einer Kundenwebsite lohnt das: `/admin` ist die erste Adresse, die ein Scanner probiert.
+
+Zum Ansehen ein eigener Server auf einem eigenen Port:
+
+```bash
+DATABASE_URL="sqlite:///…/var/kunde.db" MEDIA_DIRECTORY="…/var/kunde-media" \
+  SITE_ORIGIN=http://127.0.0.1:8090 php -S 127.0.0.1:8090 -t public bin/dev-router.php
+```
+
+`bin/dev-router.php` ist Pflicht: ohne ihn beantwortet der eingebaute Server `/sitemap.xml` und
+`/robots.txt` selbst, und die Dateien kommen ohne die Kopfzeilen, die später `public/.htaccess`
+setzt – jede Messung wäre dann falsch.
+
+---
+
+## 2. Inhalte anlegen: als Skript, nicht von Hand
+
+Eine vollständige Website besteht aus Dutzenden Blöcken mit Hunderten Gestaltungswerten. Das klickt
+niemand zweimal. **Schreibe ein Aufbauskript**, das Medien hochlädt, Dokumente zusammensetzt und
+veröffentlicht – Vorlage ist das Skript, mit dem kant-it.de nachgebaut wurde.
+
+Drei Eigenschaften, die ein solches Skript haben muss (alle drei sind aus Schaden gelernt):
+
+1. **Wiederholbar.** Ein zweiter Lauf aktualisiert vorhandene Seiten, statt sie zu überspringen –
+   sonst ändert eine Korrektur im Skript nichts an der Website. Bilder werden am Titel
+   wiedererkannt, sonst wächst die Mediathek mit jedem Lauf.
+2. **Eine Quelle für Adressen.** Verweise nie von Hand schreiben. Die Adresse eines Beitrags
+   entsteht aus derselben Funktion, die den Beitrag anlegt. Im Nachbau standen vier Links im Hero
+   von Hand darin – alle vier tot, weil die Beiträge längere Adressen bekamen.
+3. **Über die Repository-Klassen, nicht per SQL.** `PageRepository::saveDraft()` und `publish()`
+   prüfen das Dokument. Ein per `INSERT` eingeschmuggeltes Dokument kann Felder enthalten, die der
+   Editor nie wieder öffnen kann.
+
+Reihenfolge im Skript: Theme → Medien → Kopf- und Fußbereich → Seiten → Beiträge → Menüs →
+Formulare → Einstellungen.
+
+---
+
+## 3. Das Dokumentformat
+
+Ein Dokument ist `{schemaVersion, title, description, blocks: [...]}`. Ein Block ist
+`{id, type, props, style, layout, children}`.
+
+- **`id`** – höchstens 64 Zeichen, eindeutig im Dokument, erscheint als HTML-`id` und als
+  CSS-Selektor. Sprechend wählen (`hero-headline`, nicht `block-7`).
+- **`type`** – siehe Liste im Editor; `section`, `row`, `column`, `heading`, `text`, `image`,
+  `button`, `postlist`, `slider`, `tabs`, `form`, `contact`, `stat`, `quote`, `iconcard`, …
+- **`props`** – der Inhalt. Was hier steht, ist Text und Daten, nie Auszeichnung mit Wirkung.
+- **`style`** – `{desktop: {...}, tablet: {...}, mobile: {...}}`, jeder Wert aus `StyleSchema`.
+  Seiten, Abstände und Ecken sind **Objekte** (`['top' => '10px', …]`), keine Kurzschreibweise.
+- **`layout.effects`** – `{entrance: 'rise', delay: 'short'}` für das Einblenden beim Scrollen.
+
+**Setze `schemaVersion` auf die aktuelle Fassung** (siehe `DocumentValidator::SCHEMA_VERSION`),
+sonst sind neuere Bausteine und Eigenschaften nicht erlaubt – und der Editor kann in einem zu alten
+Dokument nichts einfügen.
+
+---
+
+## 4. Gestaltung
+
+**Erst das Theme, dann die Blöcke.** Farben und Schriften gehören in die Palette
+(`/admin/theme`): ein Block, der `@accent` sagt, ändert sich mit dem Theme; einer, der `#c1121f`
+sagt, nicht. Die Palette färbt auch Knöpfe, Symbole, Fokusringe und den Einwilligungsdialog.
+
+Jedes Farbfeld hat einen Farbwähler und die Palettenfarben zur Auswahl. **Das Textfeld daneben
+bleibt maßgeblich**: wer dort `@accent` stehen lässt, behält den Verweis auf die Palette; wer im
+Farbwähler zieht, schreibt einen festen Wert hinein und kappt ihn.
+
+Feste Größen nur, wo sie gemeint sind. `maxWidth` ohne `margin: auto` zentriert nichts – das war
+hier schon zweimal die Ursache eines „geht nicht".
+
+**Die Vorschau im Editor zeigt dieselbe Ausgabe wie die Website.** Was dort falsch aussieht, ist
+falsch – nicht „nur die Vorschau".
+
+---
+
+## 5. Bilder
+
+- Hochladen über `MediaLibrary::upload()`; daraus entstehen WebP-Varianten in 480/960/1600/2400 px
+  (nie größer als das Original). Das Original wird nicht behalten.
+- **Vor dem Hochladen prüfen:** über 12 Megapixel oder 8000 px Kantenlänge werden abgelehnt, und
+  ein Hostingpaket mit 128 MB Speicher schafft große Bilder nicht. Vorher auf 2400 px verkleinern.
+- Im Dokument immer alle `sources` mitgeben, damit `srcset` entsteht.
+- Ein Bild mit fester Anzeigebreite bekommt `style.desktop.maxWidth` – daraus entsteht das
+  `sizes`-Attribut, und der Browser lädt die kleine Variante. Ohne das lud ein 190-px-Logo die
+  960er Datei.
+- Hintergrundbilder werden je Gerät verkleinert, auch wenn sie nur einmal gesetzt wurden.
+- „Beim Klick" entscheidet je Bild, ob nichts passiert, ob es sich vergrößert oder ob es zu einer
+  Adresse führt; eine Galerie hat dafür einen Schalter. Zugrunde liegt ein gewöhnlicher Verweis
+  auf die große Fassung – ohne JavaScript öffnet ein Klick sie, nichts ist kaputt.
+
+---
+
+## 6. Beiträge
+
+Optional. Gibt es keine, verschwinden Archiv, Feed und Feedverweis von selbst; ein
+Beitragslisten-Baustein zeigt öffentlich nichts.
+
+Beim Anlegen wählt man einen von drei Aufbauten (`PostLayouts`: Bildkopf, Klassisch, Magazin), für
+die Liste eine von vier Darstellungen (Karten, Liste, Kompakt, Wechselseitig). Beides sind
+Startpunkte, keine Schablonen.
+
+---
+
+## 7. SEO
+
+Meistens fertig, wenn der Inhalt stimmt: Titel, Beschreibung, Canonical, Open Graph, strukturierte
+Daten, Sitemap, `robots.txt` entstehen aus dem, was dasteht. Zu setzen bleibt:
+
+- **Titel für Suchergebnisse** je Seite, wenn er sich vom Titel auf der Seite unterscheiden soll.
+- **Vorschaubild beim Teilen** – sonst nimmt ein Beitrag sein Beitragsbild und eine Seite gar nichts.
+- **Unternehmensdaten** unter Einstellungen; daraus entsteht der strukturierte Datensatz.
+- **Weiterleitungen**, wenn die Website eine alte ablöst. **Vor dem Umzug** die Adressliste der
+  alten Website besorgen (deren `sitemap.xml`) und für jede Adresse, die sich ändert, eine
+  Weiterleitung anlegen. Ohne das ist der Rang von Jahren weg.
+
+---
+
+## 8. Schriften
+
+Nach dem Aufsetzen **einmal** `php bin/console cms:fonts:fetch` (oder der Knopf im Designbereich).
+Ohne das lädt die Website die Schriften von Google – zwei fremde Verbindungen nacheinander und die
+IP-Adresse jedes Besuchers an einen Dritten. Die Dateien der Pilotwebsite liegen im Repository;
+wählt eine neue Website andere Schriften, holt dieser Befehl sie.
+
+---
+
+## 9. Prüfen
+
+In dieser Reihenfolge, gegen die neue Website:
+
+```bash
+CMS_URL=http://127.0.0.1:8090 npm run test:links     # kein toter Verweis
+CMS_URL=http://127.0.0.1:8090 npm run test:browser   # Barrierefreiheit, Tastatur, ohne JavaScript, Ladebudget
+MSYS_NO_PATHCONV=1 CMS_URL=http://127.0.0.1:8090 CMS_PATHS="/,/leistungen,/kontakt" npm run audit
+```
+
+Für `npm run audit` muss die Installation im **Produktionsmodus** laufen (`APP_ENV=prod`,
+`APP_DEBUG=0`), sonst misst man den Debugmodus.
+
+Am Code geändert? Dann zusätzlich `php vendor/bin/phpunit` (beide PHP-Fassungen),
+`npm run test:editor` und `composer format`.
+
+**Zielwerte:** Barrierefreiheit, Best Practices und SEO je 100. Performance mindestens 95, 100
+anstreben – eine bilderreiche Startseite mit Slider landet realistisch bei 96–98.
+
+Findet die Prüfung einen Kontrastmangel aus einer im Editor gesetzten Farbe, wird er **gemeldet und
+nicht behoben**: das ist eine Entscheidung des Redakteurs, keine des Codes.
+
+---
+
+## 10. Livegang
+
+`docs/LIVEGANG.md` ist die Liste. Die drei Dinge, die dort am häufigsten vergessen werden:
+E-Mail-Versand einmal wirklich ausprobieren, Schriften holen, und die Weiterleitungen der alten
+Adressen prüfen.
+
+---
+
+## 11. Updates dieser Installation
+
+Zwei Wege, und welcher gilt, entscheidet das Hosting:
+
+- **Mit Git** (eigener Server, Shell-Zugriff): Bildschirm „System" oder `php bin/console cms:update`.
+  Vorprüfung, Sicherung, Wartungszustand, Checkout, Migration, Rauchtest, Rückweg.
+- **Ohne Git** (geteiltes Hosting, über `install.php` installiert): im selben Bildschirm die Karte
+  „Update aus dem Releasearchiv" – zwei Knöpfe, der zweite führt die Migrationen aus. `var/`, `.env`,
+  hochgeladene Schriften und das erzeugte Stylesheet-Bündel bleiben unberührt.
+
+Beides steht ausführlich in `docs/UPDATE.md`. Wichtig für den, der eine Website baut: **nichts von
+dem, was diese Website ausmacht, liegt im Code**, also überlebt es beide Wege. Wer dafür doch eine
+Twig-Datei angefasst hat, verliert die Änderung beim ersten Update – siehe Abschnitt 0.
+
+---
+
+## Was in diesem Projekt immer wieder schiefging
+
+Wer diese fünf kennt, spart sich die Suche:
+
+1. **Eine Einstellung, die speichert und nichts tut.** Das Feld war da, die Ausgabe nicht – beim
+   Vorschaubild fürs Teilen zwei Monate lang. **Nach jedem neuen Feld nachsehen, ob es vorne
+   ankommt**, und einen Test schreiben, der genau das prüft.
+2. **`|default(true)` in Twig macht aus einem gespeicherten `false` ein `true`.** Für Schalter immer
+   `??` verwenden.
+3. **Die Prüfung lief gegen die Demo, nicht gegen die Website.** Feste Pfade und Linktexte in einem
+   Prüfskript prüfen nichts, sobald der Inhalt anders ist.
+4. **Messen statt vermuten.** Das Vorabladen des Hero-Bildes klang richtig und kostete fünf
+   Punkte. Jede Annahme über Geschwindigkeit wird gemessen, vorher und nachher.
+5. **Der Entwicklungsserver ist nicht das Hosting.** Ohne Kompression und Cache-Kopfzeilen misst
+   man 90 statt 96 – und optimiert an der falschen Stelle.

docs/PLUGINS.md

@@ -0,0 +1,183 @@
+# Plugins schreiben
+
+Ein Plugin bringt eigene Bausteine, Vorlagen und Adressen in den Editor und auf die
+Website. Farben, Schriften und Buttons fasst es nie an – das Design gehört der Website (ADR 105). Es ist ein Ordner unter `plugins/` mit einer `plugin.json`, Twig-Vorlagen und optional
+Stylesheets und Skripten. Eingeschaltet und eingestellt wird es in der Verwaltung unter **Plugins**
+(Administrator). Hintergrund und Grenzen: ADR 102 und ADR 103 in `docs/ARCHITECTURE.md`.
+
+**Ein Plugin bringt keinen PHP-Code mit.** Alles ist Manifest plus Twig. Deshalb gibt es keine
+Hooks in Speichern oder Veröffentlichen und keine eigenen Tabellen – und deshalb kann ein Update
+des Kerns ein Plugin nicht brechen, solange die Übergaben unten stehen.
+
+## Der Ordner
+
+```
+plugins/
+  vergleich/                      ← Name des Plugins: Kleinbuchstaben und Ziffern, mit Buchstabe beginnend
+    plugin.json                   ← das Manifest
+    blocks/bildvergleich.html.twig
+    blocks/galerie.html.twig
+    routes/daten.json.twig
+    assets/bildvergleich.css      ← nur unter assets/ liegt, was die Website ausliefert
+    assets/bildvergleich.js
+```
+
+Das mitgelieferte Plugin ist die Vorlage zum Abschreiben: `plugins/vergleich` (Bausteine,
+Container, Einstellungen, Adresse, Seitenvorlage).
+
+## Das Manifest
+
+```json
+{
+  "name": "vergleich",
+  "title": "Bildvergleich",
+  "description": "Vorher und nachher in einem Bild.",
+  "version": "1.1.0",
+  "requires": "1.17.0",
+  "settings": {
+    "labelBefore": { "kind": "text", "label": "Standardbeschriftung vorher", "default": "Vorher" }
+  },
+  "blocks": {
+    "bildvergleich": {
+      "label": "Bildvergleich",
+      "icon": "⇔",
+      "template": "blocks/bildvergleich.html.twig",
+      "css": "assets/bildvergleich.css",
+      "script": "assets/bildvergleich.js",
+      "props": {
+        "before":   { "kind": "media",   "label": "Bild vorher" },
+        "position": { "kind": "number",  "label": "Startposition (%)", "min": 5, "max": 95, "default": 50 }
+      }
+    },
+    "galerie": {
+      "label": "Vergleichsgalerie",
+      "template": "blocks/galerie.html.twig",
+      "container": true,
+      "children": ["vergleich.bildvergleich"],
+      "props": { "columns": { "kind": "select", "label": "Spalten", "choices": { "2": "Zwei", "3": "Drei" } } }
+    }
+  },
+  "presets": {
+    "abschnitt": { "label": "Vorher-Nachher-Abschnitt", "blocks": [ { "id": "s", "type": "section", "children": [ ] } ] }
+  },
+  "routes": {
+    "daten": { "path": "/vergleich/daten", "template": "routes/daten.json.twig", "type": "json" }
+  }
+}
+```
+
+- `name` muss dem Ordnernamen entsprechen. Der Typ eines Bausteins ist `name.baustein`, hier
+  `vergleich.bildvergleich`; so heißt er im Dokument und in der Ausgabe.
+- `version` in der Form `1.2.3`. Sie hängt an den Adressen der Dateien (`?v=1.1.0`), damit der
+  Browser nach einem Update die neue Fassung holt.
+- `requires` (optional): die kleinste KantSites-Fassung. Passt sie nicht, erscheint das Plugin in
+  der Verwaltung mit dem Grund und lässt sich nicht einschalten.
+- Ein Manifest braucht mindestens einen Baustein, eine Adresse oder eine Vorlage. Fehlt eine
+  genannte Datei, ist das Manifest ungültig.
+
+### Eigenschaften und Einstellungen (Schema)
+
+Eigenschaften (`props` eines Bausteins) und Einstellungen (`settings` des Plugins) haben dasselbe
+Schema: eine Art (`kind`), eine Beschriftung (`label`), optional `help` und `default`.
+
+| Art | Feld | Prüfung | Weitere Schlüssel |
+|---|---|---|---|
+| `text` | einzeilig | Text bis `maxLength` (Standard 200) | `maxLength` |
+| `textarea` | mehrzeilig | Text bis `maxLength` (Standard 2000) | `maxLength` |
+| `number` | Zahl | zwischen `min` und `max` | `min`, `max` |
+| `boolean` | Kästchen | an oder aus | – |
+| `select` | Liste | einer der Werte | `choices`: `{"wert": "Beschriftung"}` |
+| `url` | einzeilig | lokaler Pfad, `#sprungmarke`, `https://`, `mailto:`, `tel:` | `maxLength` |
+| `media` | Bild aus der Mediathek | Kennung eines Bildes oder leer | – |
+
+Höchstens 30 Eigenschaften je Baustein. Unbekannte Eigenschaften in einem gespeicherten Dokument
+werden ignoriert (so kann ein Plugin eine Eigenschaft streichen), bekannte müssen passen, sonst
+lässt sich die Seite nicht speichern. Einstellungen bearbeitet der Administrator auf dem Bildschirm
+„Plugins“; sie werden genauso geprüft.
+
+### Container
+
+`"container": true` macht einen Baustein zum Behälter. `"children"` (optional) zählt auf, was
+hinein darf – Kernbausteine wie `text` oder Bausteine des Plugins; ohne die Liste darf alles hinein.
+Der Editor zeigt die Regel im Werkzeugkasten, der Server prüft sie beim Speichern.
+
+### Seitenvorlagen (`presets`)
+
+Fertige Bausteine, die der Editor als Ganzes einfügt – hinter den eingebauten Vorlagen mit demselben
+Knopf. `blocks` ist eine Liste von Bausteinen wie in einem Dokument (höchstens 64 KiB); Kennungen
+vergibt der Editor bei jedem Einfügen neu, du kannst also feste schreiben.
+
+### Eigene Adressen (`routes`)
+
+`path` hat die Form einer Seite (`/name` oder `/name/unter/seite`, Slugs) und darf nichts belegen,
+was der Kern beantwortet (`/admin`, `/media`, `/assets`, `/formular`, `/beitraege` …). `type` ist
+`html`, `json`, `text` oder `xml`. Eine veröffentlichte Seite mit derselben Adresse geht vor.
+Ausgeschaltet antwortet die Adresse mit 404; alles außer `html` trägt `noindex`.
+
+### Was ein Plugin nicht kann: das Design
+
+Es gibt kein `theme` im Manifest. Ein Plugin gestaltet seine eigenen Bausteine über deren
+Stylesheet und die Design-Tokens des Kerns; Palette, Schriften und Buttons der Website ändert
+nur der Betreiber unter **Design**. So färbt kein Schalter eine Website um, und nichts, was dort
+eingestellt wurde, geht durch ein Plugin verloren (ADR 105).
+
+## Die Vorlagen
+
+### Bausteine
+
+Die Vorlage eines Bausteins bekommt genau sechs Dinge:
+
+- `props` – die geprüften Eigenschaften, jede vorhanden, fehlende mit ihrem Vorgabewert
+- `settings` – die Einstellungen des Plugins, jede vorhanden
+- `children` – bei einem Container die fertig gerenderten Kinder (leer sonst); ausgeben mit
+  `{{ children }}`
+- `block` – der Baustein selbst; `block.id` gehört als `id` an das Wurzelelement, sonst greifen
+  eigenes CSS und die Editorauswahl nicht
+- `designClasses` – Klassen aus Sichtbarkeit, Design-Tokens und Einblendungen, an die `class`
+  des Wurzelelements anhängen
+- `editing` – `true` in der Editorvorschau, für Hinweise wie „bitte ein Bild wählen“
+
+Dazu eine Funktion: `kant_plugin_media(kennung)` liefert ein Bild der Mediathek als
+`{id, title, alt, variants: [{src, width, height}, …]}` (kleinste Fassung zuerst) oder `null`.
+
+```twig
+{% set bild = props.before ? kant_plugin_media(props.before) : null %}
+<div id="{{ block.id }}" class="block-bildvergleich{{ designClasses }}" data-position="{{ props.position }}">
+  {% if bild %}<img src="{{ (bild.variants|last).src }}" alt="{{ props.alt ?: settings.labelBefore }}">{% endif %}
+  {{ children }}
+</div>
+```
+
+### Adressen
+
+Die Vorlage einer Adresse bekommt `settings`, `query` (die Abfrageparameter mit sauberen Namen,
+gekürzt) und `route`. Für `json` und `xml` schreibt sie die Antwort selbst, etwa mit `json_encode`.
+
+Was keine Vorlage bekommt: Datenbank, Einstellungen der Website, Anfrage. Sie läuft mit den
+Rechten der Anwendung – ein Sandkasten ist das nicht, und so wird es auch nicht genannt.
+
+## Stylesheet und Skript
+
+Beide werden nur auf Seiten geladen, auf denen der Baustein vorkommt, über
+`/plugin-assets/<name>/assets/...`. Die Content-Security-Policy erlaubt Skripte vom eigenen
+Ursprung, sobald die Seite eines braucht; Inline-Stile und Inline-Skripte bleiben verboten. Ein
+Skript setzt Werte deshalb über das CSSOM (`element.style.setProperty(...)`), nie über ein
+`style`-Attribut in der Vorlage. In der Editorvorschau wird das Stylesheet geladen, das Skript
+nicht – die Vorlage muss auch ohne Skript ein brauchbares Bild abgeben.
+
+## Was der Kern übernimmt
+
+- Speichern, Veröffentlichen, Fassungen, Undo/Redo – der Baustein ist ein gewöhnlicher Block.
+- Eigenes CSS je Block, Design-Tokens (Abstände, Ausrichtung, Ecken), Sichtbarkeit je Gerät,
+  Einblendungen – alles über `designClasses` und die `id`.
+- Der Editor: Eintrag im Werkzeugkasten unter „Erweiterungen“, Eigenschaftenpanel aus dem
+  Schema, Container-Regeln, Vorlagen, Vorschau über den Server.
+- Der Erhaltungsvertrag: ist das Plugin aus oder fehlt es, bleibt der Baustein im Dokument, der
+  Editor zeigt einen Platzhalter, die Website einen HTML-Kommentar. Nichts geht verloren.
+
+## Updates
+
+Mitgelieferte Plugins liegen im Releasearchiv und werden beim Archiv-Update Datei für Datei
+aktualisiert. Ein selbst installiertes Plugin bleibt dabei stehen, weil sein Ordner im Archiv
+nicht vorkommt. Beim Git-Update ist ein fremder Ordner unter `plugins/` nicht von Git verwaltet;
+`git checkout` lässt ihn in Ruhe. Die Einstellungen liegen in der Datenbank und überleben beides.

docs/QUALITY.md

@@ -1,5 +1,140 @@
 # Qualitätsbericht – erster ausführbarer Prototyp
 
+## Ergänzung: DEEG Immobilien & Hausverwaltung gemessen, 15.09.2026 (1.17.0)
+
+Lighthouse **13.4.1** (`scripts/audit.mjs`, je drei Läufe Mobil und Desktop, Mediane) gegen den lokalen Produktionsmodus der fünften Referenzwebsite „DEEG – Immobilien & Hausverwaltung in Freudenstadt“ (`var/immobilien-deeg.db`, Startkonfiguration `immobilien-deeg-prod`, Port 8095), drei Adressen: `/`, `/impressum`, `/datenschutz`. Ergebnis: **Leistung, Barrierefreiheit, Best Practices, SEO und agentisches Browsing überall 100**; Startseite LCP 1,8 s mobil und 0,5 s Desktop (das Startfoto als `img` im Hero), CLS 0, TBT 0 ms. Ladebudget der Startseite 157 KB mit 6 Anfragen und 11 Datenbankabfragen. Berichte unter `reports/lighthouse-immobilien-deeg/`. Voraussetzung für die 100 bei Barrierefreiheit: Blau mit weißer Schrift als `#0076b6` statt Logo-Blau `#0081c7`, kleine blaue Schrift `#006aa3`, Copyright-Zeile mit eigener Farbe. Nach dem Umbau der Bewertungsanfrage zum dreistufigen Preisfinder (ADR 101, zweites Skript `form-steps.js` auf der Startseite) erneut gemessen: `/` mobil und Desktop weiterhin in allen fünf Kategorien 100, Ladebudget 161 KB mit 7 Anfragen.
+
+## Ergänzung: Ihr Malerservice Drews gemessen, 15.09.2026 (1.16.0 + zwei unveröffentlichte Korrekturen)
+
+Lighthouse **13.4.1** (`scripts/audit.mjs`, je drei Läufe Mobil und Desktop, Mediane) gegen den lokalen Produktionsmodus der vierten Referenzwebsite „Ihr Malerservice Drews“ (`var/maler-drews.db`, Port 8092), sechs Adressen: `/`, `/aktuelles`, `/unsere-projekte`, `/kunstmalerei`, `/kontakt`, `/friedrichsbad-baden-baden`. Ergebnis: **Barrierefreiheit, Best Practices, SEO und agentisches Browsing überall 100**, Leistung 98–100 – Startseite 99 mobil und 98 Desktop, Kunstmalerei 99/99, Projekte und Beitrag 99 mobil, alle übrigen 100. Der Rest zur 100 ist überall das Foto hinter dem Seitenkopf als CSS-Hintergrund (LCP mobil 1,6–2,1 s, Desktop 0,6–1,0 s; CLS ≤ 0,01, TBT ≤ 7 ms). Berichte unter `reports/lighthouse-maler-drews/`.
+
+Drei Messrunden führten dorthin. Die erste zeigte Barrierefreiheit 91–93: das Gold `#c6a36b` der Vorlage erreicht auf Weiß 2,4:1 (Kleinzeilen, Datum, Links, weiße Buttonschrift auf Gold), die Beitragslisten sprangen von H1 auf H3, der Copyright-Link hob sich nur durch Farbe ab, und der Nach-oben-Knopf lag außerhalb jeder Landmarke (axe „region“, auf jeder Seite). Behoben durch `@gold-text` (`#8a6a2f`, 5,0:1) für Text auf hellem Grund, dunkle Buttonschrift (6:1), eine unsichtbare H2 vor den Listen, Unterstreichung, und im CMS ein `nav` um den Knopf. Die zweite Runde ließ noch den aktiven Menüpunkt (Gold auf Weiß) und graue Formularbeschriftungen (`#999`, 2,8:1) übrig. Für die Leistung: nur das erste Hintergrundbild einer Seite wird vorgeladen – der Slider der Startseite liegt eine Ebene tiefer, deshalb trägt der äußere Abschnitt dasselbe Foto; jede im Design genannte Schriftstärke wird vorgeladen, deshalb Lato nur 400/700 (ohne das 300 der Vorlage, 23 KB weniger vor dem größten Bild); Kacheln und Galeriebilder bekamen feste Breiten, weil ohne sie eine 270 px breite Kachel die 2400er Datei lud (108 KB Ersparnis auf der Startseite laut `image-delivery`).
+
+axe (WCAG 2.0/2.1 A+AA und Best-Practice-Regeln, Playwright, 1440 und 390 px, nach dem Durchscrollen und zwei Sekunden Wartezeit) auf neun Seiten einschließlich Impressum und Datenschutz: **null Verstöße** (`var/drews-axe.mjs`); die erste Runde hatte 58.
+
+Maschinenlesbar: `llms.txt` (8 Seiten, 31 Beiträge mit Beschreibung), `robots.txt`, `sitemap.xml` (41 Adressen), `feed.xml`, `LocalBusiness` mit Adresse, Telefon, Öffnungszeiten Mo–Do/Fr, Einsatzgebiet und Instagram als `sameAs`. Nicht gemessen: Felddaten (LCP/INP/CLS am 75. Perzentil), Screenreader, Firefox/Safari, ein echtes Touchgerät, das tatsächliche Hosting.
+
+## Ergänzung: Elektro Bernhard gemessen, 14.09.2026 (1.12.1)
+
+Lighthouse **13** (`scripts/audit.mjs`, je drei Läufe Mobil und Desktop, Mediane) gegen den lokalen Produktionsmodus der Referenzwebsite Elektro Bernhard (`var/elektro-bernhard.db`, Port 8090), vier Adressen: `/`, `/leistungen`, `/leistungen/notdienst`, `/kontakt`. Ergebnis nach den Korrekturen: **Barrierefreiheit, Best Practices, SEO und agentisches Browsing überall 100**, Leistung überall 100 bis auf die mobile Startseite mit **99** (LCP 2,1 s durch das Hero-Foto als Hintergrund unter Mobildrosselung; CLS 0, TBT 30 ms). Berichte unter `reports/lighthouse-elektro-bernhard-2/`; der erste Lauf davor (`reports/lighthouse-elektro-bernhard/`) zeigte Barrierefreiheit 95–97.
+
+axe (WCAG 2.0/2.1 A+AA und Best-Practice-Regeln, Playwright, 1440 und 390 px) auf sechs Seiten: **null Verstöße**. Vorher gab es drei echte Befunde, alle behoben: Markennamen `#9aa0a6` auf Weiß (2,6:1 → `#6b7178`, 4,7:1), der rote Link „Kant-IT Solutions“ im dunklen Fuß (3,0:1 → hell), und auf der Leistungsübersicht sprang die Gliederung von H1 auf H3 (jetzt eine H2 vor den Karten). Ein vierter Befund lag im CMS: der Pause-Knopf des Sliders hatte den sichtbaren Text „Pause“, aber den zugänglichen Namen „Automatische Wiedergabe pausieren“ (WCAG 2.5.3); der Name beginnt jetzt mit dem sichtbaren Text. Achtung beim Messen: unmittelbar nach dem Laden meldet axe Kontrastverstöße an Elementen, die gerade eingeblendet werden (halb transparente Zwischenzustände); erst nach dem Durchscrollen und zwei Sekunden Wartezeit sind die Befunde belastbar.
+
+Maschinenlesbar: `llms.txt`, `robots.txt`, `sitemap.xml` werden ausgeliefert, `LocalBusiness` mit drei `sameAs`-Profilen auf der Startseite, `BreadcrumbList` auf Unterseiten, `og:image` auf allen Inhaltsseiten. Nicht gemessen: Felddaten (LCP/INP/CLS am 75. Perzentil), Screenreader, Firefox/Safari, das tatsächliche Hosting.
+
+## Ergänzung: Sichtbare leere Layouts, 14.09.2026 (1.6.2)
+
+30 JavaScript-Tests und 27 PHP-Editor-/Sicherheitstests mit 312 Assertions bestanden. Vollständiger isolierter Chromium-Editortest einschließlich axe ohne Verstöße: direkte Tastatureinfügung in leere Sektionen/Spalten, genaues Drag-and-drop-Ziel und Scrollen am Rand, Spaltenreihenfolge auf Desktop und Mobil, Undo/Redo, Speichern/Neuladen, Veröffentlichung und Konflikte. Die Tests prüfen ausdrücklich, dass die neuen Editorhilfen weder im gespeicherten Blockbaum noch im öffentlichen HTML stehen. Desktop-, Mobil- und Drag-Screenshots visuell geprüft; Bericht unter `reports/editor/result.json`.
+
+Vergleich mit lokalen Flatsome-3.20.9-Quelldateien, keine laufende WordPress-Referenz geprüft. Kein neuer Lighthouse-Lauf, da der öffentliche Renderer und dessen CSS unverändert sind; die Messung von 1.6.1 ist weiterhin als solche zu lesen. Kein neuer Screenreader-, Firefox-, Safari-, Touchgeräte- oder Felddatennachweis.
+
+## Ergänzung: Flexible Editorfläche und Inhaltsbreiten, 14.09.2026 (1.6.1)
+
+`npm.cmd test`: 30 Modelltests; PHP 8.4.22: 452 Tests / 3476 Assertions. Der vollständige isolierte Playwright-Lauf einschließlich axe, Speichern/Neuladen, Veröffentlichung, Konfliktbehandlung und neuer Panel-/Sektionsprüfungen besteht. Bildschirmbreiten 390/850/1100/1920 px ohne horizontalen Überlauf geprüft. Screenshotprüfung für Desktop, Bildinspektor und Telefon; kein neuer Screenreader-Test.
+
+`PHP_BINARY=C:\php84\php.exe`, `npm.cmd run test:editor -- --audit`: Lighthouse **13.4.1**, lokaler Symfony-Produktionsmodus mit isolierter Datenbank und den vom Editortest erstellten Inhalten/Bildern. Je **drei** Läufe im Mobil- und Desktopprofil aus `scripts/audit.mjs`. Leistung, Barrierefreiheit, Best Practices, SEO und agentisches Browsing in jedem Lauf und damit in beiden Medianen **100**. Vollständige Geräte-/Drosselungs- und Umgebungseinstellungen sowie Ergebnisse stehen in `reports/lighthouse-editor/summary.json` und den sechs Einzelberichten; funktionale Ergebnisse in `reports/editor/result.json`.
+
+Die Messung prüft die gemeinsame öffentliche Ausgabe nach Entfernung der festen Text-/Überschriftenbreiten. Sie ist keine Abnahme aller Pilot- oder Kundenseiten. Felddaten zu LCP/INP/CLS wurden nicht erhoben; INP wird aus diesem Ladelauf nicht abgeleitet. GEO/Auffindbarkeit ist durch den Agentic-Browsing-Score nicht nachgewiesen.
+
+## Ergänzung: Autorotation, Blättern, eigene Texte, 13.09.2026
+
+- **395 PHP-Tests / 1672 Assertions** unter PHP 8.2.12 und 8.4.22, 18 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung. axe: null Verstöße auf Startseite, Projekteseite, Beitrag.
+- **Die Autorotation ist als Verlauf geprüft, nicht als Schnappschuss:** 0 → 666 → 1332 → 1998 in drei Schritten zu je sieben Sekunden, und nach einem Mausrad-Ereignis bleibt der Wert stehen. Dabei fiel der Fehler der ersten Fassung auf: das Sprungziel wurde aus `offsetLeft` berechnet und der Offset des Sliders doppelt abgezogen – Ergebnis −78, also keine Bewegung.
+- Belegt ist außerdem, dass das Skript **nur auf Seiten mit einem solchen Slider** geladen wird und die Richtlinie sonst bei `script-src 'none'` bleibt.
+- **Blättern in der Beitragsliste** mit sieben Beiträgen geprüft: erste Seite ohne „Neuere“, letzte ohne „Ältere“, Seite 99 landet auf der letzten, und ohne den Schalter bleibt es eine Auswahl ohne Leiste.
+- **Acht Projekttexte sind geschrieben, nicht übernommen** – für die Beiträge, die auf der laufenden Website keinen Text haben (zwei davon nicht einmal einen Auszug). Sie beschreiben Aufgabe, Weg und Ergebnis, ohne Zahlen, Namen oder Zusagen zu erfinden. **Sie gehören vor einem Livegang gegengelesen**, denn sie sind meine Formulierung über Umuts Projekte.
+- **Nicht geprüft:** die Autorotation auf einem echten Touchgerät und in Firefox oder Safari; gemessen ist sie im Chromium der Browserprüfung.
+
+## Ergänzung: Nachbau vollständig, 13.09.2026
+
+- **390 PHP-Tests / 1641 Assertions** unter PHP 8.2.12 und 8.4.22, 18 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung. **axe: null Verstöße** auf Startseite, Projekteseite, Datenschutzerklärung, Projektbeitrag und mobiler Projekteseite.
+- **Der Nachbau ist jetzt vollständig:** 29 Projektbeiträge mit den echten Bildern, Titeln, Auszügen und Texten der laufenden Website, die vollständige Datenschutzerklärung (27 Überschriften, rund 22.000 Zeichen), Impressum, Startseite, Projekteseite. 41 Medien, 33 Seiten.
+- **Ein Befund, der für den echten Umzug zählt:** **11 der 29 Projektbilder** hätte die Mediathek auf einem Hosting mit 128 MB abgewiesen, zwei davon (13,5 und 12,0 Megapixel) auch mit mehr Speicher – sie überschreiten die Pixelgrenze. Der Umzug muss solche Bilder vorher verkleinern; für den Nachbau ist genau das geschehen (9 Bilder auf 2400 px). Die Meldung der Mediathek ist dabei richtig und verständlich, sie kommt nur an einer Stelle, an der niemand mit ihr rechnet.
+- Die Größe der **Kennzahl** und der **Kundenstimme** ließ sich nicht einstellen: `.block-stat strong` und `.block-quote p` hatten feste Werte, gegen die eine Blockeinstellung nicht ankam. Beide erben jetzt vom Block – dieselbe Familie wie die Theme-Skala, die die Kartenüberschriften überschrieb.
+- Gemessen: Startseite 56 KB HTML mit 15 Bildern, Projekteseite 32 KB mit 13, Datenschutzerklärung 38 KB. **Kein ausführbares Skript** auf keiner Seite; das einzige `<script>` ist strukturierte Daten als `application/ld+json`, und die Richtlinie sendet weiterhin `script-src 'none'`.
+- **Nicht geprüft:** die Projektbeiträge sind inhaltlich übernommen, nicht redaktionell überarbeitet – einzelne Texte der laufenden Website sind kurz oder fehlen dort ganz (8 von 29 haben nur den Auszug). Und nichts davon steht auf echtem Hosting.
+
+## Ergänzung: Detailabgleich mit dem Original, 13.09.2026
+
+- **390 PHP-Tests / 1641 Assertions** unter PHP 8.2.12 und 8.4.22, 18 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung. **axe: null Verstöße** auf Startseite, Projekteseite und Handybreite des Nachbaus.
+- **Der ernsteste Fund ist eine beinahe entstandene Lücke:** beim Freigeben von Auszeichnungen in Überschriften war die Dokumentfassung in der Schliessung des Filters nicht gebunden – der Filter lief nie, während die Ausgabe schon unescaped war. Ein Test, der `<script>alert(1)</script>` in eine Überschrift schreibt, hat es im ersten Lauf gezeigt. Er prüft jetzt beides: das hervorgehobene Wort kommt durch, das Skript nicht.
+- Gegen das Original nachgemessen statt geschätzt: Kartenbreite 316 px (Original 324), Kartenhöhe 342 (330), Kartentitel 19 px/800 in beiden, Überschrift zweiter Ebene 44 px in beiden, Hauptüberschrift 66 px (68).
+- **Nicht geprüft:** Punkte am Slider in Firefox und Safari – dort greift der Rückfall auf ein wischbares Schiebefeld, gesehen habe ich ihn in diesen Browsern nicht.
+
+## Ergänzung: Nachbau überarbeitet, Dokumentschema v17, 13.09.2026
+
+- **389 PHP-Tests / 1636 Assertions** unter PHP 8.2.12 und 8.4.22, **18 JavaScript-Modelltests**, Playwright-Editortest, öffentliche Browserprüfung.
+- **Der schwerste Fund des Tages kommt aus dem Editor, nicht aus dem Nachbau:** in einem Dokument ab v13 ließ sich kein Baustein mehr einfügen, und Symbol, Fortschritt, Slider und eingebetteter Inhalt in gar keinem. Der bestehende Editortest hat das nicht bemerkt, weil er ein altes Dokument bearbeitet. Der neue Test fügt jeden Typ in Dokumente von v1 bis v17 ein.
+- **Ein zweiter, der nur in der Gegenprobe sichtbar wird:** `|default(true)` macht in Twig aus einem gespeicherten `false` ein `true`. Die neuen Anzeigeoptionen der Beitragsliste hätten sich speichern lassen und nichts getan – dieselbe Krankheit wie Rahmenstärke und Bildrundung. Der Test prüft beide Richtungen.
+- Neu geprüft: verlinktes Bild (mit denselben Linkregeln, sechs Fälle), klebender Kopfbereich als Einstellung, Projektraster gegen Blogarchiv.
+- Am Nachbau nachgemessen: Lösungskarte 213 px statt 300, Abstand zur Projektliste 54 px, Projektkarte 337 px mit Bild und Titel – das Original liegt bei 324 px.
+- **Nicht geprüft:** ob der klebende Kopfbereich auf einem Telefon mit dynamischer Adressleiste gut aussieht, und der Slider ist nicht auf einem echten Touchgerät gewischt worden.
+
+## Ergänzung: kant-it.de nachgebaut, 12.09.2026
+
+- **381 PHP-Tests / 1619 Assertions** unter PHP 8.2.12 und 8.4.22, 17 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung.
+- **Der Nachbau ist die Prüfung:** Startseite mit neun Abschnitten, Projekteseite, vier Beiträge, Impressum, Datenschutzgerüst, Kopf- und Fußbereich, zwei Menüs, Kontaktformular, zwölf Bilder, eigene Palette und Schrift – gegen eine eigene Datenbank und einen eigenen Medienordner, nicht gegen die Entwicklungsinstallation.
+- **Gefunden dabei: fünf Fehler** (ADR 042), darunter der größte: die Palette färbte Symbole, Knöpfe, Rahmen und den Einwilligungsdialog überhaupt nicht. Vier davon sind behoben und durch Tests abgesichert, der fünfte war mein eigener Kontrastfehler beim Beheben des ersten.
+- **axe: null Verstöße** auf Startseite, Projekteseite, Beitrag und Impressum, in 1440 px und 390 px – gemessen an der nachgebauten Seite, nicht an der Demo.
+- Gemessen am Nachbau: Startseite 45 KB HTML, 33 KB CSS, rund 430 KB Bilder in WebP, **0 Skripte**, 21 Abfragen. Die Abfragezahl ist die höchste bisher gemessene und erklärt sich aus der Beitragsliste; sie liegt unter der Obergrenze, ist aber der nächste Kandidat fürs Zusammenfassen.
+- **Nicht geprüft:** die vollständige Datenschutzerklärung der laufenden Website (nur das Gerüst), die restlichen Projektbeiträge, die Produktseiten von HausKlar und KantTresor, und nichts davon auf echtem Hosting. Der Nachbau ist ein Abbild, keine Migration: die Inhalte sind neu geschrieben, nicht aus WordPress exportiert.
+
+## Ergänzung: Installer, 12.09.2026
+
+- **379 PHP-Tests / 1606 Assertions** unter PHP 8.2.12 und 8.4.22, 17 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung.
+- **Die Abnahme des Pakets ist ein Test, kein Bericht:** ein Test geht die sechs Bildschirme durch die echte HTTP-Schicht, mit einem Kernel in einem wegwerfbaren Projektverzeichnis – leere Adresse → Weiterleitung auf `/install`, Datenbank, Migration, Website, Konto, fertig. Danach antwortet `/install` mit **404** und `/` mit **200**, und auf der Startseite steht der Name, den das Formular bekommen hat. Die Migrationen darin sind die echten.
+- **Von Hand im Browser nachgestellt**, gegen eine Kopie der Anwendung in einem leeren Verzeichnis mit leerer Datenbank: erste Anfrage 302 auf `/install`, Systemprüfung, Datenbank (SQLite), 13 Migrationen, Website „Tischlerei Berg“. Den letzten Schritt – das Konto – habe ich nicht im Browser ausgefüllt, sondern dem Test überlassen; ich tippe keine Passwörter in Formulare.
+- **axe auf allen vier erreichbaren Installationsbildschirmen: null Verstöße** (wcag2a, wcag2aa, wcag21a, wcag21aa).
+- **Das Releasearchiv wurde entpackt und gestartet**, nicht nur gebaut: `kantsites-1.3.0.zip` in ein leeres Verzeichnis, Server darauf, erste Anfrage → Installer. Damit ist belegt, dass `vendor/` vollständig ist und auf dem Zielsystem weder Composer noch eine Konsole gebraucht wird.
+- Die einzelne `install.php` ist dort geprüft, wo sie gefährlich wäre: neun Archiveinträge, die aus dem Zielverzeichnis ausbrechen wollen (`../`, absolut, Windows-Laufwerk, Rückwärtsschrägstrich, Nullbyte), landen nirgends – und ein Archiv mit einem solchen Eintrag bricht ab, ohne die Datei außerhalb anzulegen. Der Eintrag im Testarchiv ist echt: ZIP speichert `kantsites-1.2.0/../entwischt.txt` unverändert.
+- **Nicht geprüft:** der Download selbst. Solange das Archiv nicht unter seiner Adresse liegt, ist die Kette „Datei hochladen → lädt → entpackt“ nur bis zum Entpacken belegt. Ebenso ungeprüft: MySQL als Zieldatenbank im Installer (der Verbindungstest ist da, ein echter MySQL-Server war es nicht), echtes Hosting, und ein Screenreader.
+
+## Ergänzung: Bildgrößen und Releasearchiv, 12.09.2026
+
+- **352 PHP-Tests / 1479 Assertions** unter PHP 8.2.12 und 8.4.22, 17 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung.
+- **Der Browsertest hat den Fehler gefunden, den die Unittests nicht sehen konnten:** der Dokumentprüfer ließ höchstens **drei** `sources` je Bild zu. Mit der vierten Variante war jedes Dokument mit einem Bild darin ungültig – und eine abgewiesene Speicherung sieht im Editor so aus, als wäre nichts passiert. Gefunden wurde er, weil ein Galeriebild im Vorschaurahmen nicht erschien. Die Grenze hängt jetzt an `MediaLibrary::WIDTHS` statt an einer Zahl, und ein Test prüft beide Seiten: vier Quellen werden angenommen, fünf abgewiesen.
+- **Die Bildpipeline ist nachgerechnet, nicht behauptet:** ein Test lädt ein erzeugtes Foto hoch, öffnet jede entstandene Datei und prüft, dass sie WebP ist, dass die vier Breiten 480/960/1600/2400 entstehen und dass das Seitenverhältnis erhalten bleibt. Ein zweiter Upload mit 700 px Breite bekommt zwei Stufen – 480 und 700 –, womit „nie hochskalieren“ geprüft ist und nicht nur im Kommentar steht.
+- **Ein Testfehlschlag, der keiner war:** derselbe Test fiel um, sobald er in der gesamten Suite lief, mit der Meldung „dieses Bild benötigt mehr Arbeitsspeicher als das Hosting bereitstellt“. Das ist die Schutzprüfung vor dem Decodieren, die den bereits belegten Speicher mitrechnet – sie hat richtig gehandelt. Der Test benutzt jetzt eine kleinere Quelle und hebt das Limit für seine Dauer an, weil sein Gegenstand die Pipeline ist und nicht die Schutzprüfung.
+- Hintergrundbilder sind je Gerät geprüft: die Desktopregel nennt die größte Variante, die Regel im `max-width:767px`-Block die 960er.
+- **Das Releasearchiv ist gebaut, nicht geplant:** `kantsites-1.2.0.zip`, 3465 Dateien, 4,4 MB, SHA-256 `950eaa4c…`. Nachgesehen wurde, was **nicht** drin ist: kein PHPUnit, keine Tests, kein `var/`, kein `.env`.
+- Der Abbruch bei geänderten Abhängigkeiten ohne Composer ist mit zwei Tests belegt: geänderte `composer.lock` ohne Composer bricht ab und stellt den alten Stand wieder her; unveränderte `composer.lock` läuft durch.
+- **Nicht geprüft:** das Archiv ist auf keinem echten Hostingpaket entpackt und gestartet worden – das gehört zu den Arbeitspaketen J und N. Der Installer, der es herunterlädt, existiert noch nicht.
+
+## Ergänzung: Ladeverhalten, 12.09.2026
+
+- **347 PHP-Tests / 1422 Assertions** unter PHP 8.2.12 und 8.4.22, 17 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung mit neuem Ladebudget.
+- **Die Messung hat sofort etwas gefunden:** die Startseite brauchte 18 Datenbankabfragen, weil Einstellungen und Theme je Aufrufer erneut gelesen wurden. Mit einem Merker für die Dauer einer Anfrage sind es 8. Das ist der Unterschied zwischen „vermutlich in Ordnung“ und einer Zahl.
+- **Und die Messung hat einen Fehler von mir gefunden**, den ich beim Merken eingebaut hatte: der Merker wurde am Anfang des Speicherns geleert, das Speichern liest den Stand aber noch einmal und füllte ihn damit erneut – der Rest der Anfrage bekam den alten Stand. Ein bestehender Test über die Gestaltungsvorlagen fiel sofort um. Geleert wird jetzt nach dem Schreiben.
+- Das Ladebudget prüft je Seite HTML-Größe, CSS-Größe, Anzahl Anfragen, Anzahl Skripte und Abfragen gegen Obergrenzen. Heute: Startseite 7,4 KB HTML, 22,7 KB CSS, 2 Anfragen, 8 Abfragen, 0 Skripte; Beitragsübersicht 3,5 KB HTML, 29,8 KB CSS, 3 Anfragen, 13 Abfragen, 0 Skripte. **Die Null bei den Skripten ist die wichtigste Zahl** – sie hält als Test fest, was bisher nur Absicht war.
+- Blättern ist mit 30 Fassungen und 12 Weiterleitungen geprüft, einschließlich einer Seitenzahl jenseits des Endes.
+- **Nicht geprüft:** die Grenzen sind an der heutigen Demoseite gemessen; eine Seite mit vielen Bildern wird andere Zahlen haben, und die Obergrenzen müssen dann begründet angehoben werden statt stillschweigend. Auf echtem Hosting ist nichts davon gemessen (Arbeitspaket J).
+
+## Ergänzung: Sicherung und Wiederherstellung, 12.09.2026
+
+- **344 PHP-Tests / 1397 Assertions** unter PHP 8.2.12 und 8.4.22, 17 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung.
+- **Der Nachweis, um den es geht:** Sicherung anlegen, eine Seite und eine Bilddatei löschen, zurückspielen – beides ist wieder da. Einmal als Test gegen eine wegwerfbare Installation, einmal von Hand auf der Entwicklungsinstallation mit einer eigens angelegten Testseite (5 Seiten → gesichert → gelöscht, 4 → zurückgespielt, 5 → Testseite entfernt, 4). Damit ist der älteste offene Punkt aus Arbeitspaket I erledigt: „Eine Wiederherstellung ist nachgewiesen.“
+- Geprüft ist außerdem, dass die Kopie der Datenbank eine **benutzbare** Datenbank ist, nicht nur eine Datei, die existiert: der Test öffnet sie und zählt die Seiten darin.
+- Eine manipulierte Sicherung wird abgewiesen, bevor irgendetwas angefasst wird – nicht einmal die Sicherheitskopie entsteht. Eine Sicherung aus einer neueren Fassung wird abgewiesen, mit `--force` geht sie durch. Rotation behält die neuesten und meldet, was sie entfernt hat.
+- **Ein Fall, den erst der Test zeigte:** zwei Sicherungen in derselben Sekunde. Nicht akademisch, denn die Wiederherstellung legt selbst eine Sicherheitskopie an – die landet in derselben Sekunde wie die Sicherung, die gleich eingespielt wird. Statt die zweite scheitern zu lassen, bekommt der Name eine Nummer.
+- **Nicht geprüft:** MySQL (dort fehlt das Sichern über `mysqldump`, der Code sagt es), sehr große Medienordner, und ein Download der Sicherung über den Browser gibt es bewusst noch nicht.
+
+## Ergänzung: Breite, Menüs, Seiten ohne Kopfbereich, 12.09.2026
+
+- **336 PHP-Tests / 1354 Assertions** unter PHP 8.2.12 und 8.4.22, 17 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung.
+- **Ein bestehender Test ist absichtlich umgeschrieben worden**, und das ist erwähnenswert: er sicherte zu, dass ein zweiter Kopfbereich abgewiesen wird. Diese Regel war richtig, solange keine Seite wählen konnte, und wurde falsch, sobald sie es kann. Der Test prüft jetzt die neue Regel – mehrere Bereiche mit eigener Adresse, doppelte Adresse weiter abgewiesen, Standardbereich nicht löschbar.
+- **Der dritte Fehler des Tages aus derselben Familie:** die globale Seitenbreite ließ sich im Designbereich einstellen, aber `site.css` deckelte bei 1180 px. Schmaler wirkte, breiter nicht. Wie bei der Rahmenstärke und der Bildrundung: eine Einstellung, die sich speichern lässt und nichts tut, ohne jede Fehlermeldung. Ein Test liest jetzt die Regel aus `site.css` und prüft, dass sie den Theme-Wert nimmt.
+- Seitenbereiche sind über echte Auslieferung geprüft: mit „keiner“ steht weder `site-header` noch `site-footer` im HTML, der Seiteninhalt aber schon; ein Verweis auf einen gelöschten Bereich fällt auf den Standard zurück.
+- **Nicht geprüft:** der Burger ist nicht auf einem Touchgerät bedient worden, und kein Screenreader war beteiligt. Die vier Menüplätze sind im Test benutzt, aber nicht alle vier von Hand in der Menüverwaltung durchgeklickt.
+
+## Ergänzung: Designer ausgebaut, 12.09.2026
+
+- **315 PHP-Tests / 1309 Assertions** unter PHP 8.2.12 und 8.4.22, 16 JavaScript-Modelltests, Playwright-Editortest (axe auf dreizehn Bildschirmen, null Verstöße), öffentliche Browserprüfung.
+- Die Gestaltungseigenschaften sind nicht „vorhanden“, sondern einzeln nachgerechnet: 16 Datensätze vergleichen die erzeugte Deklaration Zeichen für Zeichen mit der erwarteten. Das ist die Prüfung, die die beiden Fehler unten gefunden hätte, wenn es sie vorher gegeben hätte.
+- **Zwei Fehler, die vorher niemand gesehen hat.** Erstens: eine Rahmenstärke je Seite wurde zu `border-width-top`. Das ist kein CSS, der Browser verwirft die Zeile stillschweigend – Rahmenstärken je Seite hatten **nie** eine Wirkung, und es gab keine Fehlermeldung, die darauf hingewiesen hätte. Zweitens: eine Rundung auf einem Bildblock landete auf dem `figure`, das Bild darin blieb eckig. Beides ist genau das, wonach Umut gefragt hat – er hat zwei echte Defekte gefunden, indem er die Funktion benutzen wollte.
+- Ein Test hält das Schema und das Editorpanel zusammen: jede Gruppe im Schema muss im Panel einen Namen haben, sonst landen ihre Eigenschaften in einem unbenannten Aufklappfeld.
+- Die drei neuen Bausteine sind über echte Seitenauslieferung geprüft, nicht nur über den Validator: Markup, Rollen, Klassen – und dass die Seite weiterhin `script-src 'none'` sendet, denn keiner von ihnen braucht ein Skript.
+- **Nicht geprüft:** kein Screenreader. Der Slider ist nicht mit Touch auf einem echten Gerät bedient worden, nur mit Tastatur und Mausrad im Browser. Und der Vergleich mit Flatsome ist Wissen, keine Messung – die Erweiterung war nicht installierbar, das steht so im Vergleichsdokument.
+
 ## Ergänzung: Updater, 12.09.2026
 
 - **285 PHP-Tests / 1244 Assertions** unter PHP 8.2.12 und 8.4.22, Playwright-Editortest (axe auf dreizehn Bildschirmen, null Verstöße), öffentliche Browserprüfung.
@@ -7,7 +142,8 @@
 - Der wichtigste davon ist der Fehlschlag: die neue Fassung bringt ein Migrationsskript, das mit Exitcode 1 endet. Geprüft wird danach, dass der Code auf dem alten Commit steht, die Datenbank den Inhalt von vor dem Update enthält, der Wartungszustand aufgehoben ist (weil der alte Stand antwortet) und im Protokoll `FEHLER` steht.
 - Die Reihenfolge der Schritte ist als Liste festgehalten, nicht nur ihr Ergebnis: Vorprüfung, Ziel, Sicherung, Wartung, Checkout, Fassung prüfen, Abhängigkeiten, Migration, Cache, Rauchtest, Fertig. Wer sie umstellt, bricht den Test.
 - Geprüft ist außerdem, dass die Sicherung vor dem Checkout entsteht, dass sie die Datenbank enthält und den Medienordner **nicht**, und dass Datenbank und Medienordner der Installation unverändert bleiben.
-- **Am echten Repository durchgespielt**, nicht nur im Test – siehe den Bericht in STATUS: Tag v1.0.0 auf `git.kant-it.de` gesetzt, Installation darauf gestellt, v1.0.1 veröffentlicht, Update ausgeführt.
+- **Am echten Repository durchgespielt**, nicht nur im Test: `git.kant-it.de/kantarci/KantSites`, Tag `v1.0.0` gesetzt, die Entwicklungsinstallation darauf gestellt (`git checkout v1.0.0`), `v1.0.1` veröffentlicht und `php bin/console cms:update` ausgeführt. Ergebnis: elf Schritte, alle ok, in dieser Reihenfolge – Vorprüfung, Ziel (v1.0.1 von 52f0ab38, Fassung 1.0.0), Sicherung (220 KB nach `var/backups/update-20260912-181159`, darin `cms.db`, `.env`, `.env.local`, kein Medienordner), Wartungszustand, Checkout, Fassung geprüft, Abhängigkeiten (Composer fehlt, vendor/ bleibt liegen), Migration („Already at the latest version“), Cache, Rauchtest („Datenbank erreichbar, Migration 20260912001200, Startseite /home lesbar, Fassung 1.0.1“), fertig. Danach: `VERSION` 1.0.1, `git describe` v1.0.1, kein Wartungszustand, `/` antwortet 200, `var/updates.log` enthält `OK v1.0.1 (11 Schritte)`.
+- Der Wartungszustand ist danach einzeln geprüft: eingeschaltet antwortet `/` mit **503 und `Retry-After: 600`** und der Wartungsseite, `/admin/login` mit 200; ausgeschaltet wieder 200.
 - **Nicht geprüft:** MySQL (dafür fehlt die Installation, siehe `docs/UPDATE.md`, „Was anders wurde“), ein Hosting ohne `proc_open` (die Vorprüfung meldet es, der Fall selbst ist nicht durchgespielt), und ein Update über die Weboberfläche unter einem knappen Zeitlimit.
 
 ## Ergänzung: Statistik, 12.09.2026
@@ -133,7 +269,7 @@
 - **154 PHP-Tests / 563 Assertions** unter PHP 8.2.12 und PHP 8.4.22 erfolgreich, dazu **15 JavaScript-Modelltests**.
 - Ein v10-Dokument mit Palettenfarbe, eigenem Farbwert, Abständen je Seite, Ecken je Ecke, Schatten, Buchstabenabstand, Hover-Zustand und eigenem Mobilwert wird Byte für Byte gespeichert und zu blockgenauem CSS: Regel für den Block, eigene Regel für `:hover,:focus-within` und eine Media Query für die schmale Breite.
 - **Vierzehn abgewiesene Eingaben schreiben nichts.** Darunter gezielt die Ausbruchsversuche: eine Farbe als Funktion (`rgb(1,2,3)`), eine Länge als Ausdruck (`calc(1px + 2px)`), eine angehängte Deklaration (`18px;position:fixed`), ein Schriftschlüssel mit Anführungszeichen und ein Hintergrundbild als Dateipfad. Jeder dieser Werte scheitert am verankerten Muster seines Typs, bevor er gespeichert wird.
-- **Die Sicherheitsrichtlinie wurde eigens geprüft:** das erzeugte Stylesheet ist über seinen eigenen SHA-256-Hash erlaubt, `unsafe-inline` kommt im Kopf nicht vor, und Skripte bleiben auf Seiten ohne Tabs abgeschaltet. Ohne eingestellte Google-Schrift wird kein fremder Host erlaubt und keiner kontaktiert.
+- **Die Sicherheitsrichtlinie wurde eigens geprüft:** das erzeugte Stylesheet ist über seinen eigenen SHA-256-Hash erlaubt, `unsafe-inline` kommt im Kopf nicht vor, und Skripte bleiben auf Seiten ohne Tabs abgeschaltet. Ein fremder Schrifthost wird nie erlaubt und nie kontaktiert: Schriften liefert seit 1.14.0 ausschliesslich der eigene Server (ADR 096).
 - **Acht ungültige Themes** werden abgewiesen, ohne das gespeicherte Theme zu verändern; danach liefert das Theme weiterhin die Voreinstellungen.
 - Im Editormodell geprüft: Vererbung, einzelnes Zurücksetzen, Entfernen leerer Reste, Kopieren ohne geteilte Objekte und vollständiges Undo.
 - **Im Browser geprüft wurde nur der Aufbau, nicht die Bedienung.** Im laufenden Editor wurde über das DOM bestätigt, dass das Designpanel aus dem Serverschema entsteht: sieben Gruppen, 58 Felder, 11 Farbwähler, 12 Schieberegler, 34 Einheitenauswahlen. **Es wurde kein Gestaltungsvorgang von Hand ausgeführt**, keine Tastaturbedienung erprobt und keine axe- oder Lighthouse-Messung gemacht. Für ein Werkzeug dieser Größe ist das ein erheblicher Vorbehalt.

docs/UPDATE.md

@@ -29,7 +29,7 @@ Jeder Schritt hat eine Abbruchbedingung. Bricht ein Schritt ab, bleibt der Wartu
 3. **Sichern.** Datenbank kopieren (bei SQLite Datei, bei MySQL `mysqldump`), dazu `.env` und den aktuellen Commit-Hash, nach `var/backups/update-<zeitstempel>/`. Der Medienordner wird **nicht** mitkopiert – er ist zu groß, und kein Update schreibt darin. Das steht auch so in der Oberfläche, damit niemand die Sicherung für vollständig hält.
 4. **Wartungszustand an.** Eine Datei `var/maintenance`. Öffentliche Anfragen antworten mit 503, einer erklärenden Seite und `Retry-After`; `/admin` bleibt erreichbar, sonst kann niemand das Update beenden. Suchmaschinen verstehen 503 als „später wieder“, nicht als „weg“.
 5. **Code wechseln.** `git checkout --force <tag>`. Danach prüfen, dass `VERSION` den erwarteten Wert hat – erst das beweist, dass der Wechsel wirklich stattgefunden hat.
-6. **Abhängigkeiten.** `composer install --no-dev --optimize-autoloader`, wenn Composer auf dem Server läuft. Wenn nicht – der wahrscheinliche Fall auf geteiltem Hosting – muss `vendor/` Teil des Tags sein. **Das ist die Entscheidung, die ansteht:** entweder Composer auf dem Server, oder ein Releasebranch, in dem `vendor/` mitgeliefert wird und den ein Build-Rechner erzeugt. Beides ist vertretbar, aber es muss vor dem ersten Livegang entschieden sein, weil der Updater danach anders aussieht.
+6. **Abhängigkeiten.** `composer install --no-dev --optimize-autoloader`, wenn Composer auf dem Server aufrufbar ist. Wenn nicht – der wahrscheinliche Fall auf geteiltem Hosting – gilt: **ändert dieses Update `composer.lock`, bricht der Updater hier ab** und verweist auf das Releasearchiv, das `vendor/` mitbringt (`scripts/build-release.php`). Ändert das Update die Abhängigkeiten nicht, läuft es ohne Composer durch. Der Vergleich läuft über die Prüfsumme der Datei vor und nach dem Checkout, nicht über Vertrauen.
 7. **Migrieren.** `doctrine-migrations migrate --no-interaction`. Die Migrationen sind bewusst nicht umkehrbar: `down()` würde Spalten entfernen, in denen Inhalte stehen. Der Rückweg ist die Sicherung aus Schritt 3, nicht ein `down()`.
 8. **Cache.** `cache:clear --env=prod` und Aufwärmen. Der Grund steht in `docs/QUALITY.md`: ein laufender Prozess kann einen älteren kompilierten Container halten und dann Seiten mit 500 beantworten, obwohl der Code richtig ist. Bei PHP-FPM gehört ein Neuladen dazu.
 9. **Rauchtest.** Intern `/`, `/admin/login` und `/sitemap.xml` abrufen und auf 200 prüfen, dazu eine Abfrage auf `page` und `revision`. Schlägt das fehl, gilt das Update als gescheitert, auch wenn jeder Schritt davor gemeldet hat, dass er fertig ist.
@@ -62,9 +62,58 @@ Der teuerste Fall ist ein Update, das durchläuft und erst Tage später als fals
 - Kein `down()`-Rückweg für Migrationen. Der Rückweg ist die Sicherung, und das ist eine Entscheidung, nicht eine Lücke.
 - Kein Update ohne Sicherung, auch nicht mit Häkchen „ich weiß, was ich tue“.
 
+## Der zweite Weg: Update aus dem Releasearchiv
+
+Alles bis hierhin setzt eine Git-Arbeitskopie voraus. Auf geteiltem Hosting gibt es die nicht – dort wird über `install.php` aus dem Releasearchiv installiert, und danach stand in der Verwaltung „Dieses Verzeichnis ist keine Git-Arbeitskopie". **`src/Ops/ArchiveUpdate.php` ist der Weg für genau diese Installationen** (ADR 068). Er steht im Bildschirm „System" als eigene Karte neben dem Update über Git.
+
+Der Ablauf ist derselbe wie oben, nur ohne `git`:
+
+1. **Fassung ermitteln.** Die Releaseliste nennt den neuesten Tag. Antwortet sie nicht – viele Hoster lassen keine ausgehenden Verbindungen zu –, endet es hier, und es wurde nichts angefasst.
+2. **Sichern.** Datenbank und Medien nach `var/backups/`, vor dem ersten Handgriff.
+3. **Archiv laden und Prüfsumme vergleichen.** Stimmt sie nicht, wird nicht entpackt. Die Adresse steht in der Konfiguration, nicht in der Anfrage.
+4. **Entpacken und auf Vollständigkeit prüfen.** Fehlen `VERSION` oder `vendor/`, ist es kein brauchbares Release – und das fällt auf, bevor der Wartungszustand angeht.
+5. **Wartungszustand an, Dateien ersetzen.** `bin`, `config`, `migrations`, `src`, `templates`, `vendor`, `composer.json`, `composer.lock`, `migrations.php`, `cli-config.php`, `VERSION`. Der alte Stand wandert nach `var/update/<zeitstempel>/alt/`, er wird nicht gelöscht.
+6. **`public/` wird zusammengeführt, nicht ersetzt.** Dort liegen Dateien der Anwendung und Dateien des Betreibers nebeneinander: `assets/fonts` (hochgeladene Schriften) und `assets/build` (das erzeugte Stylesheet-Bündel) bleiben unangetastet.
+7. **Zwischenspeicher leeren.**
+8. **Zweiter Knopf: Migrationen.** Sie laufen in einer **eigenen Anfrage**, weil ein PHP-Prozess, der sich selbst ausgetauscht hat, mit den Klassen weiterarbeitet, die er beim Start geladen hat. Erst danach geht der Wartungszustand aus.
+
+Unberührt bleiben in jedem Fall `var/`, `.env` und `.env.local`. Scheitert das Ersetzen mittendrin, schiebt der Updater zurück, was er bewegt hat, und nimmt den Wartungszustand wieder heraus.
+
+**Geprüft wird ohne Netz** (`tests/ArchiveUpdateTest.php`): eine Releaseseite im Speicher, echte Zip-Archive, echte Prüfsummen, echte Umbenennungen in einem Wegwerfverzeichnis. Ein Test hält zusätzlich die Ersetzungsliste gegen die Mitnahmeliste von `scripts/build-release.php`: Was neu ins Archiv kommt, muss beim Update auch ersetzt werden.
+
+## Der dritte Weg: von Hand über FTP
+
+Der Weg für den einen Fall, in dem die Karte im Bildschirm „System" noch nicht existiert: **das Update auf die Fassung, die sie mitbringt.** Eine Installation der Fassung 1.4.2 kennt sie nicht – sie muss einmal von Hand nachgezogen werden, danach gibt es den Knopf.
+
+1. **Sichern.** Verwaltung → System → „Sicherung anlegen". Zusätzlich per FTP `var/` und `.env` herunterladen. Migrationen sind nicht umkehrbar; der Rückweg ist die Sicherung.
+2. **Archiv holen und auspacken.** `kantsites-<fassung>.zip` von der Releaseseite, auf dem eigenen Rechner entpacken. Darin liegt ein Ordner `kantsites-<fassung>/`.
+3. **Wartungszustand einschalten.** Verwaltung → System → „Wartung". Sonst sieht ein Besucher währenddessen eine halb ersetzte Anwendung.
+4. **Diese Einträge hochladen und ersetzen:** `bin`, `config`, `migrations`, `src`, `templates`, `vendor`, `composer.json`, `composer.lock`, `migrations.php`, `cli-config.php`, `VERSION`. Verzeichnisse ersetzen, nicht hineinkopieren – eine Datei, die es in der neuen Fassung nicht mehr gibt, muss weg.
+5. **`public/` Datei für Datei** – und **`public/assets/fonts` und `public/assets/build` auslassen**. Dort liegen die hochgeladenen Schriften und das erzeugte Stylesheet-Bündel; beide gehören dem Betreiber und stehen in keinem Archiv.
+6. **Nicht anfassen:** `var/`, `.env`, `.env.local`. Dort stecken Inhalte, Medien und `APP_SECRET`.
+7. **`var/cache` vollständig löschen.** Sonst läuft die neue Fassung mit den Wegweisern der alten und antwortet mit 500, obwohl der Code richtig ist.
+8. **Migrationen ausführen.** Verwaltung → System → Karte „Migrationen stehen aus" → Knopf. Die Karte erscheint nur, wenn welche ausstehen. Wer eine Konsole hat, kann stattdessen `php vendor/bin/doctrine-migrations migrate --no-interaction` aufrufen.
+9. **Wartungszustand aus**, Startseite und Verwaltung einmal aufrufen, Fassungsnummer im Bildschirm „System" prüfen.
+
+Das ist einmalig: Ab 1.4.3 kennt jede Installation den Weg über das Archiv, und dann entfällt das alles. Dann steht im selben Bildschirm die Karte „Update aus dem Releasearchiv", und die Schritte 2 bis 8 erledigt sie selbst.
+
+## Ein Release veröffentlichen
+
+`php scripts/build-release.php` baut auf einem Rechner mit Composer das Archiv – Anwendung plus `vendor/` ohne Entwicklungspakete – und schreibt die SHA-256-Summe in eine Kopie von `install.php`. Beides gehört anschließend an das Git-Release des passenden Tags:
+
+```
+var/releases/kantsites-<fassung>.zip          → Release-Anhang
+var/releases/kantsites-<fassung>.zip.sha256   → Release-Anhang
+var/releases/install.php                      → Release-Anhang
+```
+
+`install.php` erwartet das Archiv unter `https://git.kant-it.de/kantarci/KantSites/releases/download/v<fassung>/kantsites-<fassung>.zip`. Genau dort landet es, wenn es als Anhang am Release dieses Tags hängt – eine andere Adresse lässt sich beim Bauen mit `--url=` setzen.
+
+**Ein privates Repository liefert diese Adresse nicht aus.** Ohne Anmeldung antwortet sie mit 404, und `install.php` kann nichts herunterladen; das ist der Zweck der Prüfsumme, nicht ihr Fehler. Damit die Installation auf einem fremden Hosting funktioniert, müssen Archiv und Installer ohne Anmeldung erreichbar sein – entweder weil das Repository öffentlich ist, oder weil beide Dateien auf einem eigenen Webspace liegen und das Release mit `--url=` darauf gebaut wurde.
+
 ## Offen, bevor das gebaut wird
 
-1. **Composer auf dem Server oder `vendor/` im Tag?** Hängt am Hosting aus Arbeitspaket J.
+1. ~~**Composer auf dem Server oder `vendor/` im Tag?**~~ Entschieden: `vendor/` gehört nicht ins Repository, sondern in ein Releasearchiv, das ein Build-Rechner erzeugt (`scripts/build-release.php`, SHA-256 daneben). Der Updater über Git bleibt für Installationen mit Composer und für Updates ohne Abhängigkeitsänderung.
 2. **Wie kommt der Code auf den Server?** Git-Klon im Projektstamm setzt Shell-Zugriff voraus. Gibt es den nicht, ist der Updater in dieser Form nicht möglich, und der Weg ist ein Deployment von außen (rsync eines Releaseverzeichnisses, Umschalten eines Symlinks). Das ist derselbe Ablauf, nur mit einem anderen Schritt 5.
 3. **Ein Repository oder zwei?** Für den Piloten reicht eines. Sobald mehrere Websites dasselbe CMS nutzen, gehört der Code in ein eigenes Repository und die Inhalte bleiben je Installation.
 
@@ -75,4 +124,16 @@ Der teuerste Fall ist ein Update, das durchläuft und erst Tage später als fals
 - **Die Datenbank wird nur zurückgeschrieben, wenn die Migration schon begonnen hatte.** Sonst würde der Rückweg Inhalte verlieren, die während des Updates entstanden sind.
 - **Der Rauchtest ist `cms:health`** und läuft als eigener Prozess, weil nur ein frischer Prozess den neuen Code ausführt.
 - **Noch offen:** MySQL wird gesichert, indem `mysqldump` aufgerufen wird – das ist **nicht** umgesetzt, weil noch keine MySQL-Installation existiert (Arbeitspaket J). Bei einer Datenbank, die nicht als Datei vorliegt, sichert der Updater derzeit nur die Umgebungsdateien und sagt das im Schritt „Sicherung“. Vor dem ersten Livegang mit MySQL muss das nachgezogen werden.
-- **Ebenfalls offen:** der Installer aus Arbeitspaket N. Die Systemprüfung, die er braucht, existiert jetzt.
+- **Inzwischen umgesetzt:** der Installer (`/install`, ADR 041) und der Weg ohne Git über das Releasearchiv (`scripts/install.php`, System → Update aus dem Archiv). Offen bleibt allein die MySQL-Sicherung.
+
+## Übergang auf 1.7.0: `.env` gehört zur Installation
+
+Der Archiv-Updater erhält die Konfiguration auch bei diesem Übergang. Der erste Start führt eine bestehende `.env.local` mit `.env` zusammen und sichert beide Originale in `var/backups/environment-*`. Danach ist allein `.env` maßgeblich; tatsächliche Servervariablen bleiben möglich. Datenbank, Medienordner und Secret bleiben die bisher wirksamen Werte. Siehe ADR 076 und README.
+
+In alten Git-Installationen war `.env` noch versioniert. Beim erstmaligen Wechsel kann ein alter Git-Updater diese neue Schutzlogik noch nicht besitzen. Nutze dafür den Archiv-Updater. Bei einem manuellen Git-Checkout zuerst `.env` und gegebenenfalls `.env.local` außerhalb des Checkout-Verzeichnisses sichern, beide nach dem Checkout wiederherstellen und erst danach Setup/Migration/Cache starten. Ab 1.7.0 erhält der Git-Updater die Dateien selbst vor dem ersten neuen PHP-Prozess. `.env` nicht erneut ins Repository aufnehmen.
+
+Bei FTP-Updates die `.env` aus dem neuen Archiv überspringen. Die Vorlage im Archiv ist ausschließlich für Erstinstallationen bestimmt. Ein Rückweg benötigt den alten Code plus die beiden gesicherten Konfigurationsdateien.
+
+## MySQL und MariaDB (seit 16.09.2026, ADR 104)
+
+Sicherung und Wiederherstellung brauchen auf einer MySQL-Installation die Clients `mysqldump` und `mysql` im Pfad des PHP-Prozesses (auf geteiltem Hosting beim Anbieter erfragen; ein voller Pfad lässt sich nicht eintragen, aber `mysqldump.phar`/`mysql.phar` im Projektstamm würden gefunden). Die Sicherung schreibt `datenbank.sql` mit `--single-transaction`; die Wiederherstellung spielt sie mit `mysql --execute=source` ein. Fehlt der Client zum Einspielen, sagt die Wiederherstellung das und nennt den Pfad des Dumps. Der Archiv-Updater und der Git-Updater sichern vorher über denselben Weg und spielen beim Rückweg dieselbe Sicherung ein. Beide Wege sperren sich gegenseitig über `var/update.lock`; ein zweiter Aufruf bekommt die Meldung „Ein anderes Update läuft gerade“.

docs/quality/kantit-lighthouse.json

@@ -0,0 +1,434 @@
+[
+  {
+    "path": "/",
+    "profile": "mobile",
+    "scores": {
+      "performance": 0.99,
+      "accessibility": 1,
+      "best-practices": 1,
+      "seo": 1,
+      "agentic-browsing": 1
+    },
+    "lighthouseVersion": "13.4.1",
+    "settings": {
+      "output": "json",
+      "maxWaitForFcp": 30000,
+      "maxWaitForLoad": 45000,
+      "pauseAfterFcpMs": 1000,
+      "pauseAfterLoadMs": 1000,
+      "networkQuietThresholdMs": 1000,
+      "cpuQuietThresholdMs": 1000,
+      "formFactor": "mobile",
+      "throttling": {
+        "rttMs": 150,
+        "throughputKbps": 1638.4,
+        "requestLatencyMs": 562.5,
+        "downloadThroughputKbps": 1474.5600000000002,
+        "uploadThroughputKbps": 675,
+        "cpuSlowdownMultiplier": 4
+      },
+      "throttlingMethod": "simulate",
+      "screenEmulation": {
+        "mobile": true,
+        "width": 412,
+        "height": 823,
+        "deviceScaleFactor": 1.75,
+        "disabled": false
+      },
+      "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Mobile Safari/537.36",
+      "auditMode": false,
+      "gatherMode": false,
+      "clearStorageTypes": [
+        "file_systems",
+        "shader_cache",
+        "service_workers",
+        "cache_storage"
+      ],
+      "disableStorageReset": false,
+      "debugNavigation": false,
+      "channel": "node",
+      "usePassiveGathering": false,
+      "disableFullPageScreenshot": false,
+      "skipAboutBlank": false,
+      "blankPage": "about:blank",
+      "ignoreStatusCode": false,
+      "locale": "en-US",
+      "blockedUrlPatterns": null,
+      "additionalTraceCategories": null,
+      "extraHeaders": null,
+      "precomputedLanternData": null,
+      "onlyAudits": null,
+      "onlyCategories": null,
+      "skipAudits": null
+    },
+    "environment": {
+      "networkUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Mobile Safari/537.36",
+      "hostUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/153.0.8010.12 Safari/537.36",
+      "benchmarkIndex": 5208.5,
+      "credits": {
+        "axe-core": "4.13.0"
+      }
+    },
+    "note": "Local prototype only. No customer-site acceptance or field-data claim."
+  },
+  {
+    "path": "/",
+    "profile": "desktop",
+    "scores": {
+      "performance": 0.97,
+      "accessibility": 1,
+      "best-practices": 1,
+      "seo": 1,
+      "agentic-browsing": 1
+    },
+    "lighthouseVersion": "13.4.1",
+    "settings": {
+      "output": "json",
+      "maxWaitForFcp": 30000,
+      "maxWaitForLoad": 45000,
+      "pauseAfterFcpMs": 1000,
+      "pauseAfterLoadMs": 1000,
+      "networkQuietThresholdMs": 1000,
+      "cpuQuietThresholdMs": 1000,
+      "formFactor": "desktop",
+      "throttling": {
+        "rttMs": 40,
+        "throughputKbps": 10240,
+        "requestLatencyMs": 0,
+        "downloadThroughputKbps": 0,
+        "uploadThroughputKbps": 0,
+        "cpuSlowdownMultiplier": 1
+      },
+      "throttlingMethod": "simulate",
+      "screenEmulation": {
+        "mobile": false,
+        "width": 1350,
+        "height": 940,
+        "deviceScaleFactor": 1,
+        "disabled": false
+      },
+      "emulatedUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
+      "auditMode": false,
+      "gatherMode": false,
+      "clearStorageTypes": [
+        "file_systems",
+        "shader_cache",
+        "service_workers",
+        "cache_storage"
+      ],
+      "disableStorageReset": false,
+      "debugNavigation": false,
+      "channel": "node",
+      "usePassiveGathering": false,
+      "disableFullPageScreenshot": false,
+      "skipAboutBlank": false,
+      "blankPage": "about:blank",
+      "ignoreStatusCode": false,
+      "locale": "en-US",
+      "blockedUrlPatterns": null,
+      "additionalTraceCategories": null,
+      "extraHeaders": null,
+      "precomputedLanternData": null,
+      "onlyAudits": null,
+      "onlyCategories": null,
+      "skipAudits": null
+    },
+    "environment": {
+      "networkUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36",
+      "hostUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/153.0.8010.12 Safari/537.36",
+      "benchmarkIndex": 5277.5,
+      "credits": {
+        "axe-core": "4.13.0"
+      }
+    },
+    "note": "Local prototype only. No customer-site acceptance or field-data claim."
+  },
+  {
+    "path": "/projekte",
+    "profile": "mobile",
+    "scores": {
+      "performance": 1,
+      "accessibility": 1,
+      "best-practices": 1,
+      "seo": 1,
+      "agentic-browsing": 1
+    },
+    "lighthouseVersion": "13.4.1",
+    "settings": {
+      "output": "json",
+      "maxWaitForFcp": 30000,
+      "maxWaitForLoad": 45000,
+      "pauseAfterFcpMs": 1000,
+      "pauseAfterLoadMs": 1000,
+      "networkQuietThresholdMs": 1000,
+      "cpuQuietThresholdMs": 1000,
+      "formFactor": "mobile",
+      "throttling": {
+        "rttMs": 150,
+        "throughputKbps": 1638.4,
+        "requestLatencyMs": 562.5,
+        "downloadThroughputKbps": 1474.5600000000002,
+        "uploadThroughputKbps": 675,
+        "cpuSlowdownMultiplier": 4
+      },
+      "throttlingMethod": "simulate",
+      "screenEmulation": {
+        "mobile": true,
+        "width": 412,
+        "height": 823,
+        "deviceScaleFactor": 1.75,
+        "disabled": false
+      },
+      "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Mobile Safari/537.36",
+      "auditMode": false,
+      "gatherMode": false,
+      "clearStorageTypes": [
+        "file_systems",
+        "shader_cache",
+        "service_workers",
+        "cache_storage"
+      ],
+      "disableStorageReset": false,
+      "debugNavigation": false,
+      "channel": "node",
+      "usePassiveGathering": false,
+      "disableFullPageScreenshot": false,
+      "skipAboutBlank": false,
+      "blankPage": "about:blank",
+      "ignoreStatusCode": false,
+      "locale": "en-US",
+      "blockedUrlPatterns": null,
+      "additionalTraceCategories": null,
+      "extraHeaders": null,
+      "precomputedLanternData": null,
+      "onlyAudits": null,
+      "onlyCategories": null,
+      "skipAudits": null
+    },
+    "environment": {
+      "networkUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Mobile Safari/537.36",
+      "hostUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/153.0.8010.12 Safari/537.36",
+      "benchmarkIndex": 5231,
+      "credits": {
+        "axe-core": "4.13.0"
+      }
+    },
+    "note": "Local prototype only. No customer-site acceptance or field-data claim."
+  },
+  {
+    "path": "/projekte",
+    "profile": "desktop",
+    "scores": {
+      "performance": 1,
+      "accessibility": 1,
+      "best-practices": 1,
+      "seo": 1,
+      "agentic-browsing": 1
+    },
+    "lighthouseVersion": "13.4.1",
+    "settings": {
+      "output": "json",
+      "maxWaitForFcp": 30000,
+      "maxWaitForLoad": 45000,
+      "pauseAfterFcpMs": 1000,
+      "pauseAfterLoadMs": 1000,
+      "networkQuietThresholdMs": 1000,
+      "cpuQuietThresholdMs": 1000,
+      "formFactor": "desktop",
+      "throttling": {
+        "rttMs": 40,
+        "throughputKbps": 10240,
+        "requestLatencyMs": 0,
+        "downloadThroughputKbps": 0,
+        "uploadThroughputKbps": 0,
+        "cpuSlowdownMultiplier": 1
+      },
+      "throttlingMethod": "simulate",
+      "screenEmulation": {
+        "mobile": false,
+        "width": 1350,
+        "height": 940,
+        "deviceScaleFactor": 1,
+        "disabled": false
+      },
+      "emulatedUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
+      "auditMode": false,
+      "gatherMode": false,
+      "clearStorageTypes": [
+        "file_systems",
+        "shader_cache",
+        "service_workers",
+        "cache_storage"
+      ],
+      "disableStorageReset": false,
+      "debugNavigation": false,
+      "channel": "node",
+      "usePassiveGathering": false,
+      "disableFullPageScreenshot": false,
+      "skipAboutBlank": false,
+      "blankPage": "about:blank",
+      "ignoreStatusCode": false,
+      "locale": "en-US",
+      "blockedUrlPatterns": null,
+      "additionalTraceCategories": null,
+      "extraHeaders": null,
+      "precomputedLanternData": null,
+      "onlyAudits": null,
+      "onlyCategories": null,
+      "skipAudits": null
+    },
+    "environment": {
+      "networkUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36",
+      "hostUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/153.0.8010.12 Safari/537.36",
+      "benchmarkIndex": 5272.5,
+      "credits": {
+        "axe-core": "4.13.0"
+      }
+    },
+    "note": "Local prototype only. No customer-site acceptance or field-data claim."
+  },
+  {
+    "path": "/impressum",
+    "profile": "mobile",
+    "scores": {
+      "performance": 1,
+      "accessibility": 1,
+      "best-practices": 1,
+      "seo": 1,
+      "agentic-browsing": 1
+    },
+    "lighthouseVersion": "13.4.1",
+    "settings": {
+      "output": "json",
+      "maxWaitForFcp": 30000,
+      "maxWaitForLoad": 45000,
+      "pauseAfterFcpMs": 1000,
+      "pauseAfterLoadMs": 1000,
+      "networkQuietThresholdMs": 1000,
+      "cpuQuietThresholdMs": 1000,
+      "formFactor": "mobile",
+      "throttling": {
+        "rttMs": 150,
+        "throughputKbps": 1638.4,
+        "requestLatencyMs": 562.5,
+        "downloadThroughputKbps": 1474.5600000000002,
+        "uploadThroughputKbps": 675,
+        "cpuSlowdownMultiplier": 4
+      },
+      "throttlingMethod": "simulate",
+      "screenEmulation": {
+        "mobile": true,
+        "width": 412,
+        "height": 823,
+        "deviceScaleFactor": 1.75,
+        "disabled": false
+      },
+      "emulatedUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Mobile Safari/537.36",
+      "auditMode": false,
+      "gatherMode": false,
+      "clearStorageTypes": [
+        "file_systems",
+        "shader_cache",
+        "service_workers",
+        "cache_storage"
+      ],
+      "disableStorageReset": false,
+      "debugNavigation": false,
+      "channel": "node",
+      "usePassiveGathering": false,
+      "disableFullPageScreenshot": false,
+      "skipAboutBlank": false,
+      "blankPage": "about:blank",
+      "ignoreStatusCode": false,
+      "locale": "en-US",
+      "blockedUrlPatterns": null,
+      "additionalTraceCategories": null,
+      "extraHeaders": null,
+      "precomputedLanternData": null,
+      "onlyAudits": null,
+      "onlyCategories": null,
+      "skipAudits": null
+    },
+    "environment": {
+      "networkUserAgent": "Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Mobile Safari/537.36",
+      "hostUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/153.0.8010.12 Safari/537.36",
+      "benchmarkIndex": 5205,
+      "credits": {
+        "axe-core": "4.13.0"
+      }
+    },
+    "note": "Local prototype only. No customer-site acceptance or field-data claim."
+  },
+  {
+    "path": "/impressum",
+    "profile": "desktop",
+    "scores": {
+      "performance": 1,
+      "accessibility": 1,
+      "best-practices": 1,
+      "seo": 1,
+      "agentic-browsing": 1
+    },
+    "lighthouseVersion": "13.4.1",
+    "settings": {
+      "output": "json",
+      "maxWaitForFcp": 30000,
+      "maxWaitForLoad": 45000,
+      "pauseAfterFcpMs": 1000,
+      "pauseAfterLoadMs": 1000,
+      "networkQuietThresholdMs": 1000,
+      "cpuQuietThresholdMs": 1000,
+      "formFactor": "desktop",
+      "throttling": {
+        "rttMs": 40,
+        "throughputKbps": 10240,
+        "requestLatencyMs": 0,
+        "downloadThroughputKbps": 0,
+        "uploadThroughputKbps": 0,
+        "cpuSlowdownMultiplier": 1
+      },
+      "throttlingMethod": "simulate",
+      "screenEmulation": {
+        "mobile": false,
+        "width": 1350,
+        "height": 940,
+        "deviceScaleFactor": 1,
+        "disabled": false
+      },
+      "emulatedUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36",
+      "auditMode": false,
+      "gatherMode": false,
+      "clearStorageTypes": [
+        "file_systems",
+        "shader_cache",
+        "service_workers",
+        "cache_storage"
+      ],
+      "disableStorageReset": false,
+      "debugNavigation": false,
+      "channel": "node",
+      "usePassiveGathering": false,
+      "disableFullPageScreenshot": false,
+      "skipAboutBlank": false,
+      "blankPage": "about:blank",
+      "ignoreStatusCode": false,
+      "locale": "en-US",
+      "blockedUrlPatterns": null,
+      "additionalTraceCategories": null,
+      "extraHeaders": null,
+      "precomputedLanternData": null,
+      "onlyAudits": null,
+      "onlyCategories": null,
+      "skipAudits": null
+    },
+    "environment": {
+      "networkUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36",
+      "hostUserAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/153.0.8010.12 Safari/537.36",
+      "benchmarkIndex": 5179.5,
+      "credits": {
+        "axe-core": "4.13.0"
+      }
+    },
+    "note": "Local prototype only. No customer-site acceptance or field-data claim."
+  }
+]

docs/quality/lighthouse-kantit.json

@@ -0,0 +1,106 @@
+[
+    {
+        "path": "/",
+        "profile": "mobile",
+        "scores": {
+            "performance": 0.98,
+            "accessibility": 1,
+            "best-practices": 1,
+            "seo": 1,
+            "agentic-browsing": 1
+        },
+        "lighthouseVersion": "13.4.1",
+        "note": "Lokale Messung gegen den Nachbau von kant-it.de im Produktionsmodus, PHP-Entwicklungsserver mit denselben Kopfzeilen wie public/.htaccess. Keine Felddaten."
+    },
+    {
+        "path": "/",
+        "profile": "desktop",
+        "scores": {
+            "performance": 0.96,
+            "accessibility": 1,
+            "best-practices": 1,
+            "seo": 1,
+            "agentic-browsing": 1
+        },
+        "lighthouseVersion": "13.4.1",
+        "note": "Lokale Messung gegen den Nachbau von kant-it.de im Produktionsmodus, PHP-Entwicklungsserver mit denselben Kopfzeilen wie public/.htaccess. Keine Felddaten."
+    },
+    {
+        "path": "/projekte",
+        "profile": "mobile",
+        "scores": {
+            "performance": 1,
+            "accessibility": 1,
+            "best-practices": 1,
+            "seo": 1,
+            "agentic-browsing": 1
+        },
+        "lighthouseVersion": "13.4.1",
+        "note": "Lokale Messung gegen den Nachbau von kant-it.de im Produktionsmodus, PHP-Entwicklungsserver mit denselben Kopfzeilen wie public/.htaccess. Keine Felddaten."
+    },
+    {
+        "path": "/projekte",
+        "profile": "desktop",
+        "scores": {
+            "performance": 1,
+            "accessibility": 1,
+            "best-practices": 1,
+            "seo": 1,
+            "agentic-browsing": 1
+        },
+        "lighthouseVersion": "13.4.1",
+        "note": "Lokale Messung gegen den Nachbau von kant-it.de im Produktionsmodus, PHP-Entwicklungsserver mit denselben Kopfzeilen wie public/.htaccess. Keine Felddaten."
+    },
+    {
+        "path": "/simplescan",
+        "profile": "mobile",
+        "scores": {
+            "performance": 1,
+            "accessibility": 1,
+            "best-practices": 1,
+            "seo": 1,
+            "agentic-browsing": 1
+        },
+        "lighthouseVersion": "13.4.1",
+        "note": "Lokale Messung gegen den Nachbau von kant-it.de im Produktionsmodus, PHP-Entwicklungsserver mit denselben Kopfzeilen wie public/.htaccess. Keine Felddaten."
+    },
+    {
+        "path": "/simplescan",
+        "profile": "desktop",
+        "scores": {
+            "performance": 1,
+            "accessibility": 1,
+            "best-practices": 1,
+            "seo": 1,
+            "agentic-browsing": 1
+        },
+        "lighthouseVersion": "13.4.1",
+        "note": "Lokale Messung gegen den Nachbau von kant-it.de im Produktionsmodus, PHP-Entwicklungsserver mit denselben Kopfzeilen wie public/.htaccess. Keine Felddaten."
+    },
+    {
+        "path": "/impressum",
+        "profile": "mobile",
+        "scores": {
+            "performance": 1,
+            "accessibility": 1,
+            "best-practices": 1,
+            "seo": 1,
+            "agentic-browsing": 1
+        },
+        "lighthouseVersion": "13.4.1",
+        "note": "Lokale Messung gegen den Nachbau von kant-it.de im Produktionsmodus, PHP-Entwicklungsserver mit denselben Kopfzeilen wie public/.htaccess. Keine Felddaten."
+    },
+    {
+        "path": "/impressum",
+        "profile": "desktop",
+        "scores": {
+            "performance": 1,
+            "accessibility": 1,
+            "best-practices": 1,
+            "seo": 1,
+            "agentic-browsing": 1
+        },
+        "lighthouseVersion": "13.4.1",
+        "note": "Lokale Messung gegen den Nachbau von kant-it.de im Produktionsmodus, PHP-Entwicklungsserver mit denselben Kopfzeilen wie public/.htaccess. Keine Felddaten."
+    }
+]

migrations/Version20260912001300.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260912001300 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Per page choice of header and footer area, including none at all.';
+    }
+
+    public function isTransactional(): bool
+    {
+        return false;
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Columns only: on SQLite an index change rebuilds the table, and this one holds the
+        // pages. NULL means "the standard area", the string 'none' means no area at all, and any
+        // other value is the address of another header or footer.
+        $page = $schema->getTable('page');
+        $page->addColumn('header_area', 'string', ['length' => 80, 'notnull' => false]);
+        $page->addColumn('footer_area', 'string', ['length' => 80, 'notnull' => false]);
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->throwIrreversibleMigrationException('Dropping these would silently put the standard header back onto landing pages that deliberately have none. Restore a verified backup with matching code.');
+    }
+}

migrations/Version20260913000100.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260913000100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'A separate title for search results, independent of the page title.';
+    }
+
+    public function isTransactional(): bool
+    {
+        return false;
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Der Titel in der Suche muss nicht der Titel der Seite sein: auf der Seite steht
+        // "Leistungen", im Suchergebnis hilft "IT-Leistungen für Mittelbaden – Kant-IT". NULL
+        // heisst: der Titel des Dokuments gilt, wie bisher.
+        $schema->getTable('page')->addColumn('seo_title', 'string', ['length' => 160, 'notnull' => false]);
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->throwIrreversibleMigrationException('Dropping this would silently discard every title written for search results. Restore a verified backup with matching code.');
+    }
+}

migrations/Version20260914000100.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260914000100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Der Aufgabenplan: eine Zeile je wiederkehrender Aufgabe, mit Faelligkeit, Sperre und letztem Ergebnis.';
+    }
+
+    public function isTransactional(): bool
+    {
+        return false;
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Warum eine Tabelle und keine Datei: die Sperre. Zwei Besucher koennen im selben
+        // Moment dieselbe Aufgabe faellig sehen, und nur einer darf sie ausfuehren. Ein
+        // bedingtes UPDATE ist auf MySQL wie auf SQLite atomar; zwei Prozesse, die eine Datei
+        // sperren, sind es auf geteiltem Hosting nicht zuverlaessig.
+        //
+        // Die Tabelle bleibt klein - eine Zeile je registrierter Aufgabe, heute fuenf. Deshalb
+        // steht hier kein Index: ein voller Durchlauf ueber fuenf Zeilen ist billiger als ein
+        // Index, den jede Aenderung mitpflegen muss.
+        $tasks = $schema->createTable('scheduled_task');
+        // Der technische Name aus dem Code, zum Beispiel `publish-due`. Er ist der Schluessel:
+        // verschwindet eine Aufgabe aus dem Code, verschwindet ihre Zeile beim naechsten Abgleich.
+        $tasks->addColumn('name', 'string', ['length' => 64]);
+        // Der Abstand zwischen zwei Laeufen. Kommt als Vorgabe aus dem Code und ist in der
+        // Verwaltung aenderbar, weil eine taegliche Sicherung auf der einen Installation
+        // richtig und auf der naechsten zu selten ist.
+        $tasks->addColumn('interval_seconds', 'integer', ['default' => 3600]);
+        $tasks->addColumn('enabled', 'boolean', ['default' => true]);
+        // Alle Zeitpunkte in UTC, als Zeichenkette verglichen - wie ueberall sonst im Projekt.
+        $tasks->addColumn('next_run_at', 'datetime_immutable');
+        $tasks->addColumn('last_run_at', 'datetime_immutable', ['notnull' => false]);
+        // Bis wann diese Aufgabe als "laeuft gerade" gilt. Danach darf sie ein anderer
+        // Durchlauf uebernehmen: ein Prozess, den das Hosting nach 30 Sekunden abgeschossen
+        // hat, kann seine Sperre nicht mehr selbst aufraeumen.
+        $tasks->addColumn('locked_until', 'datetime_immutable', ['notnull' => false]);
+        $tasks->addColumn('last_status', 'string', ['length' => 16, 'notnull' => false]);
+        $tasks->addColumn('last_message', 'string', ['length' => 500, 'default' => '']);
+        $tasks->addColumn('last_duration_ms', 'integer', ['default' => 0]);
+        // Wodurch der letzte Lauf ausgeloest wurde: besuch, verwaltung, cron, konsole, hand.
+        // Steht hier, weil die erste Frage bei einer Stoerung immer dieselbe ist: laeuft der
+        // Ausloeser ueberhaupt, den der Betreiber eingerichtet zu haben glaubt?
+        $tasks->addColumn('last_trigger', 'string', ['length' => 16, 'default' => '']);
+        // Aufeinanderfolgende Fehlschlaege. Sie verlaengern den Abstand bis zum naechsten
+        // Versuch, damit eine Aufgabe, die nicht laufen kann, nicht bei jedem Seitenaufruf
+        // wieder anfaengt.
+        $tasks->addColumn('failures', 'integer', ['default' => 0]);
+        $tasks->setPrimaryKey(['name']);
+    }
+
+    public function down(Schema $schema): void
+    {
+        // Faellt die Tabelle, faellt nur der Plan: Zeitpunkte und letzte Meldungen. Kein Inhalt,
+        // kein Konto, keine Datei. Beim naechsten Start legt der Abgleich sie neu an.
+        $schema->dropTable('scheduled_task');
+    }
+}

migrations/Version20260915000100.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260915000100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Plugins: eine Zeile je Erweiterung mit dem Schalter, ob sie aktiv ist.';
+    }
+
+    public function isTransactional(): bool
+    {
+        return false;
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Was ein Plugin kann, steht in seinem Manifest im Ordner plugins/. Hier steht nur, ob der
+        // Betreiber es eingeschaltet hat - eine Entscheidung der Installation, nicht des Codes,
+        // und deshalb in der Datenbank statt in einer Datei, die ein Update ueberschreiben koennte.
+        $plugin = $schema->createTable('plugin');
+        $plugin->addColumn('name', 'string', ['length' => 40]);
+        $plugin->addColumn('active', 'boolean', ['default' => false]);
+        $plugin->addColumn('activated_at', 'datetime_immutable', ['notnull' => false]);
+        // Die Fassung, mit der es zuletzt eingeschaltet wurde - damit die Verwaltung sagen kann,
+        // dass ein Plugin seit dem Einschalten aktualisiert wurde.
+        $plugin->addColumn('version', 'string', ['length' => 32, 'default' => '']);
+        $plugin->setPrimaryKey(['name']);
+    }
+
+    public function down(Schema $schema): void
+    {
+        $schema->dropTable('plugin');
+    }
+}

migrations/Version20260916000100.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260916000100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Plugins: die Einstellungen je Erweiterung, wie sie der Betreiber in der Verwaltung setzt.';
+    }
+
+    public function isTransactional(): bool
+    {
+        return false;
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Was ein Plugin einstellbar macht, steht in seinem Manifest; was der Betreiber gewaehlt
+        // hat, hier - als JSON, weil jedes Plugin andere Schluessel hat. Eine Spalte, kein
+        // Tabellenneubau: auf SQLite ist ADD COLUMN eine Zeile im Katalog.
+        $schema->getTable('plugin')->addColumn('settings', 'text', ['default' => '{}']);
+    }
+
+    public function down(Schema $schema): void
+    {
+        $schema->getTable('plugin')->dropColumn('settings');
+    }
+}

migrations/Version20260917000100.php

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

package.json

@@ -3,11 +3,26 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "build:buttons": "node scripts/build-buttons.mjs",
+    "test:buttons": "node scripts/button-check.mjs",
+    "test:navigation-ux": "node scripts/navigation-ux-check.mjs",
+    "test:responsive-navigation": "node scripts/responsive-navigation-check.mjs",
     "build:design": "node scripts/build-design.mjs",
     "test": "node --test tests/*.test.mjs",
     "test:editor": "node scripts/editor-check.mjs",
     "test:browser": "node scripts/browser-check.mjs",
-    "audit": "node scripts/audit.mjs"
+    "test:links": "node scripts/link-check.mjs",
+    "audit": "node scripts/audit.mjs",
+    "test:admin": "node scripts/admin-quality-check.mjs",
+    "test:search": "node scripts/live-search-check.mjs",
+    "test:image-size": "node scripts/image-size-check.mjs",
+    "test:image-alignment": "node scripts/image-alignment-check.mjs",
+    "test:link-media": "node scripts/link-media-check.mjs",
+    "test:404": "node scripts/not-found-check.mjs",
+    "test:colors": "node scripts/color-picker-check.mjs",
+    "test:accordion": "node scripts/accordion-check.mjs",
+    "test:motion": "node scripts/motion-check.mjs",
+    "test:archive-update": "node scripts/archive-update-check.mjs"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.0",

plugins/vergleich/assets/bildvergleich.css

@@ -0,0 +1,23 @@
+/* Bildvergleich. Die Position kommt als --pos (Prozent) vom Skript; ohne Skript gilt die Mitte. */
+.block-bildvergleich{--pos:50%;margin:0}
+.bildvergleich-buehne{position:relative;margin:0;overflow:hidden;user-select:none;-webkit-user-select:none}
+.bildvergleich-rund .bildvergleich-buehne{border-radius:12px}
+.bildvergleich-buehne img{display:block;width:100%;height:auto;border-radius:0}
+.bildvergleich-vorher{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
+.bildvergleich-linie{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
+.bildvergleich-linie::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#182d2b;display:grid;place-items:center;font-size:20px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
+.bildvergleich-etikett{position:absolute;top:14px;padding:6px 10px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
+.bildvergleich-etikett-vorher{left:14px}
+.bildvergleich-etikett-nachher{right:14px}
+.bildvergleich-regler{position:absolute;inset:0;display:block;cursor:ew-resize}
+.bildvergleich-regler input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
+.bildvergleich-regler input:focus-visible{opacity:1;appearance:none;-webkit-appearance:none;background:transparent;outline:3px solid #fff;outline-offset:-6px}
+.block-bildvergleich .block-unavailable{margin:0}
+/* Griff als Punkt statt Pfeile (Plugin-Einstellung). */
+.bildvergleich-griff-punkt .bildvergleich-linie::after{content:'';width:22px;height:22px}
+/* Die Vergleichsgalerie: ein Raster aus Bildvergleichen. */
+.block-vergleichsgalerie{margin:0}
+.vergleichsgalerie-titel{margin:0 0 18px}
+.vergleichsgalerie-raster{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
+.vergleichsgalerie-3 .vergleichsgalerie-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
+@media(max-width:767px){.vergleichsgalerie-raster,.vergleichsgalerie-3 .vergleichsgalerie-raster{grid-template-columns:1fr}}

plugins/vergleich/assets/bildvergleich.js

@@ -0,0 +1,14 @@
+/**
+ * Bildvergleich: der Regler setzt --pos auf der Bühne. Ohne dieses Skript steht der Vergleich
+ * bei der gespeicherten Startposition; Tastatur und Vorlesesoftware bedienen das native
+ * Bereichsfeld in beiden Fällen.
+ */
+(() => {
+  for (const block of document.querySelectorAll('[data-bildvergleich]')) {
+    const range = block.querySelector('input[type="range"]');
+    if (!range) continue;
+    const apply = () => block.style.setProperty('--pos', `${range.value}%`);
+    range.addEventListener('input', apply);
+    apply();
+  }
+})();

plugins/vergleich/blocks/bildvergleich.html.twig

@@ -0,0 +1,24 @@
+{# Bildvergleich: das Nachher-Bild liegt unten, das Vorher-Bild darüber und wird per clip-path
+   auf den linken Teil beschnitten. Der Regler ist ein natives Bereichsfeld – ohne Skript bleibt
+   er stehen, beide Bilder sind trotzdem zu sehen. Die Vorlage bekommt nur, was der Kern geprüft
+   hat: `props` nach dem Schema, `settings` des Plugins, `block.id`, `designClasses`. #}
+{% set vorher = props.before ? kant_plugin_media(props.before) : null %}
+{% set nachher = props.after ? kant_plugin_media(props.after) : null %}
+{% set labelVorher = props.labelBefore ?: settings.labelBefore|default('Vorher') %}
+{% set labelNachher = props.labelAfter ?: settings.labelAfter|default('Nachher') %}
+<div id="{{ block.id }}" class="block-bildvergleich{{ props.rounded ? ' bildvergleich-rund' : '' }} bildvergleich-griff-{{ settings.handle|default('pfeile') }}{{ designClasses }}" data-bildvergleich data-position="{{ props.position }}">
+{% if vorher and nachher %}
+    {% set gross = nachher.variants|last %}
+    <figure class="bildvergleich-buehne">
+        <img class="bildvergleich-nachher" src="{{ gross.src }}" srcset="{% for v in nachher.variants %}{{ v.src }} {{ v.width }}w{{ loop.last ? '' : ', ' }}{% endfor %}" sizes="(max-width: 1320px) 100vw, 1320px" width="{{ gross.width }}" height="{{ gross.height }}" alt="{{ props.alt ?: nachher.alt }}" loading="lazy" decoding="async">
+        {% set grossVorher = vorher.variants|last %}
+        <img class="bildvergleich-vorher" src="{{ grossVorher.src }}" srcset="{% for v in vorher.variants %}{{ v.src }} {{ v.width }}w{{ loop.last ? '' : ', ' }}{% endfor %}" sizes="(max-width: 1320px) 100vw, 1320px" width="{{ grossVorher.width }}" height="{{ grossVorher.height }}" alt="" loading="lazy" decoding="async">
+        <span class="bildvergleich-etikett bildvergleich-etikett-vorher" aria-hidden="true">{{ labelVorher }}</span>
+        <span class="bildvergleich-etikett bildvergleich-etikett-nachher" aria-hidden="true">{{ labelNachher }}</span>
+        <span class="bildvergleich-linie" aria-hidden="true"></span>
+        <label class="bildvergleich-regler"><span class="visually-hidden">{{ labelVorher }} und {{ labelNachher }} vergleichen: Regler verschieben</span><input type="range" min="0" max="100" value="{{ props.position }}" step="1"></label>
+    </figure>
+{% else %}
+    <p class="block-unavailable">{{ editing ? 'Bildvergleich: bitte unter Inhalt ein Bild für vorher und eines für nachher wählen.' : '' }}</p>
+{% endif %}
+</div>

plugins/vergleich/blocks/galerie.html.twig

@@ -0,0 +1,10 @@
+{# Die Vergleichsgalerie: ein Container. Seine Kinder kommen fertig gerendert als `children`
+   herein - der Kern hat sie mit demselben Kontext gerendert wie jeden anderen Baustein. #}
+<div id="{{ block.id }}" class="block-vergleichsgalerie vergleichsgalerie-{{ props.columns }}{{ designClasses }}">
+    {% if props.title %}<h3 class="vergleichsgalerie-titel">{{ props.title }}</h3>{% endif %}
+    {% if children|trim %}
+    <div class="vergleichsgalerie-raster">{{ children }}</div>
+    {% elseif editing %}
+    <p class="block-unavailable">Vergleichsgalerie: Bildvergleiche hier hineinziehen.</p>
+    {% endif %}
+</div>

plugins/vergleich/plugin.json

@@ -0,0 +1,63 @@
+{
+  "name": "vergleich",
+  "title": "Bildvergleich",
+  "description": "Vorher und nachher in einem Bild: ein Regler schiebt zwischen zwei Aufnahmen – für Renovierungen, Malerarbeiten, Sanierungen.",
+  "version": "1.1.0",
+  "requires": "1.17.0",
+  "settings": {
+    "labelBefore": { "kind": "text", "label": "Standardbeschriftung vorher", "default": "Vorher", "maxLength": 40 },
+    "labelAfter": { "kind": "text", "label": "Standardbeschriftung nachher", "default": "Nachher", "maxLength": 40 },
+    "handle": { "kind": "select", "label": "Griff des Reglers", "choices": { "pfeile": "Pfeile", "punkt": "Punkt" }, "default": "pfeile" }
+  },
+  "blocks": {
+    "bildvergleich": {
+      "label": "Bildvergleich",
+      "description": "Zwei Bilder übereinander, ein Regler dazwischen.",
+      "icon": "⇔",
+      "template": "blocks/bildvergleich.html.twig",
+      "css": "assets/bildvergleich.css",
+      "script": "assets/bildvergleich.js",
+      "props": {
+        "before": { "kind": "media", "label": "Bild vorher" },
+        "after": { "kind": "media", "label": "Bild nachher" },
+        "labelBefore": { "kind": "text", "label": "Beschriftung vorher", "help": "Leer: die Standardbeschriftung aus den Plugin-Einstellungen.", "maxLength": 40 },
+        "labelAfter": { "kind": "text", "label": "Beschriftung nachher", "maxLength": 40 },
+        "alt": { "kind": "text", "label": "Was die Bilder zeigen", "help": "Ein Satz für Vorlesesoftware, zum Beispiel „Fassade vor und nach dem Anstrich“.", "maxLength": 200 },
+        "position": { "kind": "number", "label": "Startposition des Reglers (%)", "min": 5, "max": 95, "default": 50 },
+        "rounded": { "kind": "boolean", "label": "Abgerundete Ecken", "default": true }
+      }
+    },
+    "galerie": {
+      "label": "Vergleichsgalerie",
+      "description": "Mehrere Bildvergleiche nebeneinander im Raster.",
+      "icon": "⊞",
+      "template": "blocks/galerie.html.twig",
+      "css": "assets/bildvergleich.css",
+      "container": true,
+      "children": ["vergleich.bildvergleich"],
+      "props": {
+        "columns": { "kind": "select", "label": "Spalten am Schreibtisch", "choices": { "2": "Zwei", "3": "Drei" }, "default": "2" },
+        "title": { "kind": "text", "label": "Überschrift der Galerie", "maxLength": 120 }
+      }
+    }
+  },
+  "presets": {
+    "abschnitt": {
+      "label": "Vorher-Nachher-Abschnitt",
+      "description": "Eine Sektion mit Überschrift, kurzem Text und einem Bildvergleich.",
+      "blocks": [
+        {
+          "id": "vergleich-abschnitt", "type": "section", "layout": { "tone": "paper", "width": "normal" },
+          "children": [
+            { "id": "vergleich-titel", "type": "heading", "props": { "text": "Vorher und nachher", "level": 2 } },
+            { "id": "vergleich-text", "type": "text", "props": { "text": "Ziehen Sie den Regler und sehen Sie den Unterschied." } },
+            { "id": "vergleich-bild", "type": "vergleich.bildvergleich", "props": { "before": "", "after": "", "labelBefore": "", "labelAfter": "", "alt": "", "position": 50, "rounded": true } }
+          ]
+        }
+      ]
+    }
+  },
+  "routes": {
+    "daten": { "path": "/vergleich/daten", "template": "routes/daten.json.twig", "type": "json" }
+  }
+}

plugins/vergleich/routes/daten.json.twig

@@ -0,0 +1,3 @@
+{# Eine eigene Adresse des Plugins: die Einstellungen als JSON - fuer eine App oder ein Skript,
+   das die Beschriftungen kennen will. Die Vorlage bekommt `settings`, `query` und `route`. #}
+{{ {plugin: 'vergleich', labels: {before: settings.labelBefore, after: settings.labelAfter}, handle: settings.handle, echo: query}|json_encode(constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES'))|raw }}

public/.htaccess

@@ -1,5 +1,73 @@
 DirectoryIndex index.php
 Options -Indexes -MultiViews
+
+# Alles, was keine Datei ist, beantwortet PHP.
 RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule ^ index.php [L]
+
+# HTTPS erzwingen. Auskommentiert, weil diese Datei auch in Installationen ohne Zertifikat
+# liegt und eine Endlosschleife schlimmer waere als fehlendes HTTPS. Vor dem Livegang mit
+# Zertifikat: die drei Zeilen einschalten - und erst danach die HSTS-Zeile weiter unten,
+# denn HSTS laesst sich in einem Browser ein halbes Jahr lang nicht zuruecknehmen.
+#RewriteCond %{HTTPS} !=on
+#RewriteCond %{HTTP:X-Forwarded-Proto} !=https
+#RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
+
+# Eine Domain, eine Adresse - mit oder ohne www. Das erledigt die Anwendung selbst nach der
+# Einstellung SITE_ORIGIN in .env: die jeweils andere Schreibweise antwortet mit 301 dorthin.
+# Hier braucht es dafuer keine Regel; eine zweite Stelle wuerde nur auseinanderlaufen.
+
+# Uebertragen wird komprimiert. HTML, CSS, JavaScript und XML schrumpfen dabei auf etwa ein
+# Viertel; Bilder und Schriften sind bereits komprimiert und bleiben aussen vor.
+<IfModule mod_deflate.c>
+    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
+    AddOutputFilterByType DEFLATE application/javascript application/json application/xml
+    AddOutputFilterByType DEFLATE application/rss+xml image/svg+xml
+</IfModule>
+<IfModule mod_brotli.c>
+    AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript image/svg+xml
+</IfModule>
+
+# Wie lange ein Browser eine Datei behalten darf.
+#
+# Bilder und Schriften tragen ihre Kennung im Namen: aendert sich der Inhalt, aendert sich die
+# Adresse. Sie duerfen deshalb ein Jahr bleiben. Stylesheets und Skripte tragen die Fassung als
+# Parameter, also ebenfalls ein Jahr. HTML wird nie zwischengespeichert - eine veroeffentlichte
+# Aenderung soll beim naechsten Aufruf sichtbar sein; die Seiten senden dafuer selbst no-store.
+<IfModule mod_expires.c>
+    ExpiresActive On
+    ExpiresByType image/webp "access plus 1 year"
+    ExpiresByType image/png "access plus 1 year"
+    ExpiresByType image/jpeg "access plus 1 year"
+    ExpiresByType image/svg+xml "access plus 1 year"
+    ExpiresByType font/woff2 "access plus 1 year"
+    ExpiresByType text/css "access plus 1 year"
+    ExpiresByType application/javascript "access plus 1 year"
+</IfModule>
+<IfModule mod_headers.c>
+    <FilesMatch "\.(webp|png|jpe?g|gif|svg|woff2|css|js)$">
+        Header set Cache-Control "public, max-age=31536000, immutable"
+    </FilesMatch>
+    # Schriften werden von derselben Adresse geladen; die Regel steht hier, damit sie auch dann
+    # gilt, wenn eine Installation die Dateien ueber ein CDN spiegelt.
+    <FilesMatch "\.woff2$">
+        Header set Access-Control-Allow-Origin "*"
+    </FilesMatch>
+    # Was der Server ueber sich selbst erzaehlt, geht niemanden etwas an: die genaue PHP-Fassung
+    # ist fuer einen Besucher wertlos und fuer einen Scanner eine Einkaufsliste.
+    Header always unset X-Powered-By
+    Header always unset X-AspNet-Version
+    # Erst einschalten, wenn HTTPS steht und bleiben soll (siehe oben).
+    #Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
+</IfModule>
+
+# Nichts ausliefern, was nur intern gebraucht wird - falls jemand das Paket versehentlich
+# vollstaendig in den oeffentlichen Ordner legt statt nur public/.
+<FilesMatch "^\.|\.(env|db|sqlite|lock|md|yaml|yml|dist|log)$">
+    Require all denied
+</FilesMatch>
+# Eine Ausnahme mit Grund: der Editor liest die Liste der Gestaltungswerte als JSON.
+<Files "design-tokens.json">
+    Require all granted
+</Files>

public/assets/admin.css

@@ -144,34 +144,64 @@ label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 }
 .nav-item:hover { background: #21362d }
 .nav-item[aria-current=page] { background: #2b4a3b; color: #fff; font-weight: 650 }
 .nav-item[aria-current=page] .nav-icon { color: var(--mint) }
-.nav-icon { width: 19px; text-align: center; font-size: 14px; color: var(--shell-muted); flex-shrink: 0 }
+.nav-icon { width: 18px; height: 18px; color: var(--shell-muted); flex-shrink: 0 }
 .nav-out::after { content: '↗'; margin-left: auto; color: var(--shell-muted); font-size: 11px }
 
-.shell-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid #2a3d35; display: grid; gap: 6px }
-.shell-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12px }
-.shell-user strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+/* Der Fuss der Leiste: Kontokarte, Abmeldesymbol, Fassung. Eine Einheit statt dreier Zeilen. */
+.shell-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #2a3d35; display: grid; gap: 8px }
+.shell-account {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 5px;
+    border-radius: 13px;
+    background: #ffffff0b;
+    border: 1px solid #ffffff10;
+}
+.shell-user {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px 7px;
+    border-radius: 9px;
+    text-decoration: none;
+    color: var(--shell-ink);
+}
+.shell-user:hover, .shell-user[aria-current=page] { background: #ffffff12 }
+.shell-user[aria-current=page] .shell-avatar { box-shadow: 0 0 0 2px var(--mint) }
+.shell-user-text { display: grid; min-width: 0; line-height: 1.3 }
+.shell-user-text strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.shell-user-text span { font-size: 11px; color: var(--shell-muted) }
 .shell-avatar {
     display: grid;
     place-items: center;
-    width: 28px; height: 28px;
+    width: 32px; height: 32px;
     border-radius: 50%;
-    background: #2b4a3b;
-    color: var(--mint);
-    font-size: 12px;
+    background: var(--mint);
+    color: var(--shell);
+    font-size: 13px;
     font-weight: 700;
     flex-shrink: 0;
 }
 .shell-foot form { margin: 0 }
-.shell-foot button {
-    width: 100%;
-    justify-content: flex-start;
+.shell-logout {
+    display: grid;
+    place-items: center;
+    width: 38px; height: 38px;
+    padding: 0;
+    border: 0;
+    border-radius: 9px;
+    background: transparent;
     color: var(--shell-muted);
-    font-size: 12px;
-    font-weight: 500;
-    min-height: 34px;
-    padding: 6px 10px;
 }
-.shell-foot button:hover { background: #21362d; color: var(--shell-ink) }
+.shell-logout .nav-icon { color: inherit }
+.shell-logout:hover { background: #ffffff14; color: #fff }
+.shell-logout:focus-visible { outline-color: var(--mint); outline-offset: -2px }
+.shell-version { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0 8px 2px; font-size: 11px; color: var(--shell-muted) }
+.shell-version a { text-decoration: none }
+.shell-version > a:hover { color: var(--shell-ink); text-decoration: underline }
 
 .brand {
     display: inline-flex;
@@ -211,13 +241,37 @@ label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 }
 .shell-heading p { font-size: 13px; margin: 7px 0 0; max-width: 62ch }
 .shell-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
 .shell-body { padding: 30px 38px 60px; max-width: 1180px; width: 100% }
-.stack { display: grid; gap: 20px }
+/* Eine Spalte, die nie breiter wird als der Bildschirm: ohne `minmax(0, 1fr)` waechst
+   die automatische Rasterspalte auf die Mindestbreite ihres breitesten Inhalts - auf dem
+   Handy schiebt eine einzige lange Pfadangabe dann die ganze Seite zur Seite. */
+.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px }
 
 .notice { padding: 13px 17px; border-radius: 8px; line-height: 1.6; font-size: 13px; margin: 0 }
 .notice.ok { background: #edf3dc; color: #2c5340; border: 1px solid #c5d89a }
 .error, .notice.error { background: #fff0eb; color: var(--danger); border: 1px solid #e2b2a7 }
 .shell-body > .notice { margin-bottom: 4px }
 
+/* Der Hinweisstreifen ueber jedem Verwaltungsbildschirm: eine Sache, die getan werden will, und
+   gleich daneben der Knopf, der sie tut. Warm statt rot - es ist eine Aufgabe, kein Fehler. */
+.shell-notice {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px 18px;
+    margin: 0 0 4px;
+    padding: 12px 14px 12px 17px;
+    border: 1px solid #e3cf9b;
+    border-radius: 10px;
+    background: #fdf6e4;
+    color: #5b4412;
+    line-height: 1.6;
+    font-size: 13px;
+}
+.shell-notice > span { min-width: 0; flex: 1 1 260px }
+.shell-notice .secondary { flex: none; border-color: #dcc48a; background: var(--paper); color: #5b4412 }
+.shell-notice .secondary:hover { background: #fbeecd; border-color: #cbb072 }
+
 /* ---- cards and sections ---------------------------------------------------------------- */
 
 .card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px }
@@ -232,7 +286,12 @@ label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 }
 }
 .card-head h2, .card-head h3 { margin: 0 }
 .card-head .muted { font-size: 12px }
-.card-body { padding: 8px 22px 24px }
+.card-body { padding: 8px 22px 24px; min-width: 0 }
+.card-body code { overflow-wrap: anywhere }
+/* Das Kleingedruckte einer Karte: zugeklappt, damit auf einem Handy der Knopf oben bleibt. */
+.hint { margin: 12px 0 0 }
+.hint > summary { font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px; display: flex; align-items: center }
+.hint[open] > summary { margin-bottom: 2px }
 /* A heading for a group of rows, outside any card. */
 .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin: 16px 2px -6px }
 .section-head h2 { margin: 0 }
@@ -428,7 +487,7 @@ details.card > summary:hover { background: #fafbf8 }
 .table .check-cell input { width: 18px; min-height: 18px }
 .table-new input, .table-new select { background: #fafbf8 }
 .table form { margin: 0 }
-/* Column widths per screen: the two tables carry different things. */
+/* Column widths per screen: the menu table carries text, links and switches. */
 .menu-table td:first-child input { width: 82px }
 .menu-table td:nth-child(2) select { width: 148px }
 .menu-table td:nth-child(3) input { min-width: 170px }
@@ -436,27 +495,23 @@ details.card > summary:hover { background: #fafbf8 }
 .menu-table td:nth-child(5) select { min-width: 190px }
 .menu-table td:nth-child(6) input { width: 130px }
 .menu-table td:nth-child(7) input { min-width: 190px }
-.field-table td:first-child input { width: 140px }
-.field-table td:nth-child(2) select { width: 150px }
-.field-table td:nth-child(3) input { min-width: 170px }
-.field-table td:nth-child(5) input { min-width: 180px }
-.field-table td:nth-child(6) input { min-width: 170px }
-.theme-table td input { width: 190px }
-.theme-table td select { width: 150px }
-.theme-table td input[type=color] { width: 52px }
-.theme-table .weights-cell { white-space: nowrap }
 .redirect-table td { padding: 8px 12px 8px 0; font-size: 12px }
+/* Der Aufgabenplan: die erste Spalte traegt Text, die schmalen tragen Zahlen und Schalter. */
+.tasks-table td:first-child { min-width: 220px; max-width: 340px }
+.tasks-table td input[type=number] { width: 92px }
+.tasks-table td .field-help { margin-top: 4px }
+.tasks-table .row-actions, .tasks-table td:last-child { white-space: nowrap }
 /* Headings inside a card separate its parts without a second border. */
 .card-body .section-head { margin: 28px 0 12px }
 .card-body .section-head:first-child { margin-top: 14px }
 .card-body > .primary, .card-body > .secondary { margin-top: 24px }
 
-/* A screen made of several equal sections (menu slots, form definitions). */
+/* A screen made of several equal sections (menu slots). */
 .stack-section { display: grid; gap: 10px }
-.menu-form > label:first-of-type, .form-def > label:first-of-type { margin-top: 16px }
+.menu-form > label:first-of-type { margin-top: 16px }
 .menu-form > input[name=name] { max-width: 420px }
-.menu-form .table, .form-def .table { margin-top: 22px }
-.menu-form .primary, .form-def .primary { margin-top: 20px }
+.menu-form .table { margin-top: 22px }
+.menu-form .primary { margin-top: 20px }
 
 .empty {
     padding: 34px;
@@ -474,10 +529,6 @@ details.card > summary:hover { background: #fafbf8 }
 .contrast-ok { background: #edf3dc; color: #2c5340; border: 1px solid #c5d89a }
 .contrast-warn { background: #fff6e2; color: #6f4e18; border: 1px solid #e6cf9c }
 .contrast-bad { background: #fff0eb; color: var(--danger); border: 1px solid #e2b2a7 }
-.theme-form .theme-swatch { width: 52px; min-height: 38px; padding: 2px; cursor: pointer }
-.theme-form .weights-cell { white-space: nowrap }
-.theme-form .weights-cell label { display: inline-flex; align-items: center; gap: 4px; margin: 0 9px 0 0; font-size: 11px; font-weight: 400 }
-.theme-form .weights-cell input { width: 14px; min-height: 14px }
 
 /* ---- submissions ----------------------------------------------------------------------- */
 
@@ -513,25 +564,33 @@ details.card > summary:hover { background: #fafbf8 }
 /* ---- narrow screens: the sidebar becomes a strip above the content --------------------- */
 
 @media (max-width: 1000px) {
-    .admin-shell { grid-template-columns: 1fr }
+    /* minmax(0, 1fr), nicht 1fr: sonst nimmt die Spalte die Mindestbreite der Leiste an und
+       schiebt die ganze Seite ueber den rechten Rand hinaus. */
+    .admin-shell { grid-template-columns: minmax(0, 1fr) }
     .shell-nav {
         position: static;
         height: auto;
+        min-width: 0;
         flex-direction: row;
         align-items: center;
         flex-wrap: nowrap;
-        overflow-x: auto;
+        overflow: visible;
         gap: 6px;
         padding: 11px 14px;
     }
+    /* Nur die Liste wischt; Konto und Abmelden bleiben rechts im Bild. */
+    .shell-menu { flex: 1 1 auto; min-width: 0; overflow-x: auto }
+    .shell-foot { flex: none }
     .shell-nav .brand { margin: 0 10px 0 0; font-size: 0 }
     .shell-nav .brand-icon { margin: 0; font-size: 15px }
     .nav-label { display: none }
     .nav-list { display: flex; gap: 4px }
     .nav-item { white-space: nowrap; padding: 8px 12px }
-    .shell-foot { margin: 0 0 0 auto; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid #2a3d35; display: flex; align-items: center }
-    .shell-user strong { display: none }
-    .shell-foot button { width: auto }
+    .shell-foot { margin: 0 0 0 auto; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid #2a3d35; display: flex; align-items: center; gap: 10px }
+    .shell-account { padding: 3px; gap: 2px }
+    .shell-user { padding: 3px }
+    .shell-user-text { display: none }
+    .shell-version { padding: 0 }
     .shell-top { padding: 22px 20px 18px }
     .shell-body { padding: 20px 20px 48px }
 }
@@ -545,6 +604,18 @@ details.card > summary:hover { background: #fafbf8 }
     .row.depth-1, .row.depth-2, .row.depth-3 { margin-left: 14px }
     .login-card { padding: 26px }
     .login-body { padding: 16px }
+    /* Zwei Rasterspalten aus Bezeichner und Wert sind auf einem Handy eine Spalte zu viel. */
+    .facts { grid-template-columns: minmax(0, 1fr); gap: 2px }
+    .facts dt { margin-top: 10px }
+    .facts dt:first-child { margin-top: 0 }
+    /* Eine sechsspaltige Tabelle passt auf kein Handy. Jede Zeile wird zu einem Block, und die
+       Spaltenueberschrift steht als Bezeichner vor ihrem Wert. */
+    .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
+    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100% }
+    .table-stack tr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-top: 10px }
+    .table-stack tbody tr + tr td { border-top: 0 }
+    .table-stack td { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; padding: 5px 0; text-align: right }
+    .table-stack td::before { content: attr(data-label); color: var(--muted); text-align: left; flex: none }
 }
 
 /* A group of related checkboxes needs a name of its own, not just a label per box. */
@@ -552,40 +623,78 @@ details.card > summary:hover { background: #fafbf8 }
 .field-set > legend { font-size: 12px; font-weight: 700; padding: 0 6px }
 .field-set .check-label { margin-top: 14px }
 
-/* ---- statistics: charts drawn by the server, styled by class ---------------------------- */
+/* ---- statistics: tiles, charts drawn by the server, ranked lists ------------------------ */
 
-.range-switch { display: flex; gap: 8px; flex-wrap: wrap }
-.range-switch a { font-size: 12px; padding: 8px 14px; min-height: 36px }
-.chart { display: block; width: 100%; height: 180px; overflow: visible }
+/* Der Zeitraum als eine Leiste mit einem gedrueckten Knopf, nicht vier lose Schaltflaechen. */
+.range-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper) }
+.range-switch a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 13px; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--muted) }
+.range-switch a:hover { color: var(--ink); background: #eef2ea }
+.range-switch a[aria-current=page] { background: var(--shell); color: #fff }
+/* Die Kennzahlen: eine grosse dunkle Kachel fuer die Summe, kleine helle fuer alles, was sie einordnet. */
+.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 12px }
+.stat-tile { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px }
+.stat-tile-main { grid-column: span 2; background: var(--shell); border-color: var(--shell); color: var(--shell-ink) }
+.stat-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted) }
+.stat-value { font-size: 28px; font-weight: 650; letter-spacing: -.8px; line-height: 1.1; font-variant-numeric: tabular-nums }
+.stat-note { font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere }
+.stat-tile-main .stat-label, .stat-tile-main .stat-note { color: var(--shell-muted) }
+.stat-tile-main .stat-value { font-size: 40px; color: #fff }
+.stat-tile-main .stat-up { color: #bfe3a5 }
+.stat-tile-main .stat-down { color: #f3b9a8 }
+.chart { display: block; width: 100%; height: 190px; overflow: visible }
+.chart-hours, .chart-weekdays { height: 150px }
 .chart-bar { fill: var(--accent) }
 .chart-bar:hover { fill: #1c4735 }
-.chart-axis { stroke: var(--line); stroke-width: 1 }
-.chart-legend { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 11px; color: var(--muted) }
+.chart-bar-peak { fill: var(--ring) }
+.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3 }
+.chart-axis { stroke: #c3cec7; stroke-width: 1 }
+.chart-legend { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 0; font-size: 11px; color: var(--muted) }
+.chart-legend-even span { flex: 1; text-align: center }
 .chart-table { margin-top: 18px }
 .chart-table > summary { cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 0 }
 .table-wrap { max-height: 320px; overflow: auto; margin-top: 10px }
 .stats-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px }
-.stats-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: rank }
+.stats-columns-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
+/* Rang, Name, Anteil am Spitzenwert als Balken, Zahl. */
+.stats-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px }
 .stats-list li {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 8px 0;
+    display: grid;
+    grid-template-columns: 22px minmax(0, 1fr) 72px auto;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 0;
     border-top: 1px solid #eef1ed;
     font-size: 13px;
 }
 .stats-list li:first-child { border-top: 0 }
-.stats-list span, .stats-list a { overflow-wrap: anywhere; min-width: 0 }
-.stats-list strong { font-variant-numeric: tabular-nums; white-space: nowrap }
+.stats-rank { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center }
+.stats-list span:not(.stats-rank), .stats-list a { overflow-wrap: anywhere; min-width: 0 }
+.stats-share { display: block; width: 100%; height: 6px; overflow: visible }
+.stats-share-bar { fill: var(--accent); opacity: .5 }
+.stats-list li:first-child .stats-share-bar { opacity: 1 }
+.stats-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right }
+@media (max-width: 620px) {
+    .stat-tile-main { grid-column: 1 / -1 }
+    .stats-list li { grid-template-columns: 22px minmax(0, 1fr) auto }
+    .stats-share { display: none }
+}
 
 /* ---- system: preflight, update steps, log ---------------------------------------------- */
 
-.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 14px 0 0; font-size: 13px }
+.facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 20px; margin: 14px 0 0; font-size: 13px }
 .facts dt { color: var(--muted) }
 .facts dd { margin: 0; overflow-wrap: anywhere }
+/* Die Adresse der Website auf der Systemseite: Feld und Knopf in einer Zeile, am Telefon untereinander. */
+.origin-form { margin-top: 4px; max-width: 560px }
+.origin-form label:first-of-type { margin-top: 10px }
+.origin-row { display: flex; flex-wrap: wrap; gap: 8px }
+.origin-row input { flex: 1 1 240px; width: auto; box-sizing: border-box; min-height: 40px; height: 40px }
+.card-body .origin-row .secondary { margin: 0 }
+.origin-form .check-label { margin-top: 10px }
+.link-button { border: 0; background: none; padding: 0; min-height: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer }
 .check-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.55 }
 .check-list li { display: flex; gap: 11px; align-items: flex-start }
+.check-list li > span { min-width: 0; overflow-wrap: anywhere }
 .check-mark {
     display: grid;
     place-items: center;
@@ -600,4 +709,271 @@ details.card > summary:hover { background: #fafbf8 }
 .check-bad { color: var(--danger) }
 .log-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px }
 .log-list code { font-size: 11px; overflow-wrap: anywhere }
-.shell-version { margin: 0 0 4px; padding: 0 10px; font-size: 10px; color: var(--shell-muted) }
+
+/* ---- the installer: six screens on an otherwise empty server ---------------------------- */
+
+.install-body {
+    min-height: 100dvh;
+    display: grid;
+    place-items: start center;
+    background: radial-gradient(ellipse at 20% 0%, #dfeab0, transparent 60%), var(--ground);
+    padding: 40px 20px 60px;
+}
+.install-shell { width: 100%; max-width: 640px }
+.install-shell .card { margin-top: 18px }
+.install-shell h1 { font-size: 24px }
+.install-shell form { margin-top: 4px }
+.install-shell .sheet-actions { margin-top: 24px }
+.install-shell h2 { font-size: 15px; margin: 30px 0 0 }
+
+/* The step list is the only orientation there is: no navigation exists yet. */
+.install-steps {
+    list-style: none;
+    margin: 14px 0 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    font-size: 12px;
+    color: var(--muted);
+}
+.install-steps li { display: flex; align-items: center; gap: 7px }
+.install-steps .current { color: var(--ink); font-weight: 700 }
+.install-step-number {
+    display: grid;
+    place-items: center;
+    width: 19px; height: 19px;
+    border-radius: 50%;
+    background: #e4e9df;
+    font-size: 11px;
+    font-weight: 700;
+}
+.install-steps .current .install-step-number { background: var(--accent); color: #fff }
+.install-steps .done .install-step-number { background: #e7f0d6; color: #2c5340 }
+
+/* A finding that is worth saying but does not block anything. */
+.check-warn .check-mark { background: #f3f0e2; color: #6b6550 }
+
+.button-link { text-decoration: none }
+.install-details { margin-top: 18px; border: 1px solid var(--line); border-radius: 10px; padding: 0 16px 16px }
+.install-details > summary { padding: 14px 0; font-size: 13px; font-weight: 600; cursor: pointer }
+.install-details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 6px }
+
+.favicon-field{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
+.favicon-current{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
+.favicon-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.favicon-preview{border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
+.favicon-editor{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:start;margin-top:14px}
+.favicon-editor[hidden]{display:none}
+.favicon-stage{position:relative;justify-self:start;max-width:100%;line-height:0;background:repeating-conic-gradient(#eef1eb 0% 25%,#fff 0% 50%) 0 0/16px 16px;user-select:none;touch-action:none}
+.favicon-stage img{display:block;max-width:100%;max-height:360px;width:auto;height:auto}
+.favicon-frame{position:absolute;box-sizing:border-box;border:2px solid #fff;outline:1px solid rgba(0,0,0,.6);box-shadow:0 0 0 9999px rgba(20,30,25,.55);cursor:move}
+.favicon-stage{overflow:hidden}
+.favicon-frame:focus-visible{outline:3px solid var(--accent);outline-offset:0}
+.favicon-handle{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#fff;border:1px solid rgba(0,0,0,.6);border-radius:3px;cursor:nwse-resize}
+.favicon-side input[type=range]{width:100%}
+.favicon-samples{display:flex;align-items:flex-end;gap:16px;margin:12px 0}
+.favicon-samples figure{margin:0;text-align:center;font-size:11px;color:var(--muted)}
+.favicon-samples canvas{display:block;margin:0 auto 6px;border-radius:8px;background:repeating-conic-gradient(#eef1eb 0% 25%,#fff 0% 50%) 0 0/12px 12px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
+.favicon-sample-large{width:90px;height:90px}
+.favicon-sample-small{width:32px;height:32px;border-radius:4px!important}
+@media(max-width:700px){.favicon-editor{grid-template-columns:1fr}}
+
+.color-field { display: flex; gap: 8px; align-items: center }
+.color-field input[type="text"], .color-field > input:not([type="color"]) { flex: 1; min-width: 0 }
+.color-field-swatch { width: 46px; min-height: 38px; padding: 2px; flex: 0 0 auto; cursor: pointer }
+.color-field-palette { flex: 0 0 auto; max-width: 40% }
+/* Die Verwaltung auf dem Telefon.
+
+   Bis 1000px stand die Navigation als waagerechte Wischleiste da - zwei Listen untereinander,
+   also zwei Zeilen, und der letzte Eintrag ausserhalb des Bildes. Auf einem Telefon ist ein
+   Klappmenue ehrlicher: eine Zeile im Ruhezustand, aufgeklappt die vollstaendige Liste mit
+   Flaechen, die ein Daumen trifft. Das details-Element macht das ohne Skript. */
+/* Der Schalter traegt seine Gestalt hier, nicht erst im Telefonabschnitt: am Schreibtisch
+   wird er ausgeblendet, aber nur dort, wo der Inhalt sicher sichtbar ist. */
+.shell-menu > summary {
+    display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
+    min-height: 44px; padding: 0 14px; border-radius: 10px;
+    background: #ffffff14; color: #fff; font-weight: 600; font-size: 15px;
+}
+.shell-menu > summary::-webkit-details-marker { display: none }
+.shell-menu > summary:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px }
+.shell-menu[open] > summary { margin-bottom: 8px }
+.shell-menu-icon { font-size: 17px }
+/* Am Schreibtisch steht die Liste dauerhaft da. Ein geschlossenes details-Element versteckt
+   seinen Inhalt aber von sich aus - der Schalter allein auszublenden loescht die Navigation.
+   Erst ::details-content holt sie zurueck. Kennt ein Browser die Regel nicht, faellt die
+   ganze Gruppe weg und der Schalter bleibt stehen: die Liste ist dann einen Klick entfernt
+   statt gar nicht da. */
+@supports selector(::details-content) {
+    .shell-menu > summary { display: none }
+    .shell-menu::details-content { content-visibility: visible; block-size: auto }
+}
+@media (max-width: 760px) {
+    .shell-nav { flex-wrap: wrap; padding: 10px 14px; gap: 10px; overflow: visible }
+    .shell-menu { flex: 1 1 100%; order: 3 }
+    .shell-menu > summary { display: flex }
+    .shell-menu nav { display: block }
+    .shell-menu:not([open]) nav { display: none }
+    .shell-menu:not([open])::details-content { content-visibility: hidden; block-size: 0 }
+    .nav-label { display: block; margin: 12px 4px 6px; font-size: 11px; letter-spacing: 1.4px; color: #9db3a8 }
+    .nav-list { display: grid; gap: 2px }
+    /* Vierundvierzig Pixel: die Flaeche, die ein Daumen zuverlaessig trifft. */
+    .nav-item { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; white-space: normal }
+    .shell-foot { margin-left: auto; border-left: 0; padding-left: 0 }
+    .shell-version { display: none }
+}
+
+/* Search and forms share usable widths throughout administration. */
+.field-wide{grid-column:1/-1;min-width:0}.field-wide textarea{width:100%;min-height:100px;resize:vertical}
+.selected-media-preview{margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff;min-width:0}.selected-media-preview img{display:block;width:100%;height:140px;object-fit:contain;background:repeating-conic-gradient(#eef1eb 0% 25%,#fff 0% 50%) 0 0/16px 16px}.selected-media-preview figcaption{font-size:12px;line-height:1.5;overflow-wrap:anywhere;margin-top:8px;color:var(--muted)}
+.live-search-ready .search-submit{display:none}.search-status{min-height:20px;margin:-12px 0 0}#list-results{scroll-margin-top:16px}#list-results>.section-head{margin-top:0}#list-results:focus-visible{outline:2px solid var(--accent);outline-offset:5px}#search-error p{margin-top:0}
+.list-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:14px;padding:18px;margin:24px 0;background:var(--paper,#fff);border:1px solid var(--line,#dce3da);border-radius:12px}
+.list-toolbar>div{min-width:140px}.list-toolbar .list-search{flex:1;min-width:220px}.list-toolbar input,.list-toolbar select{width:100%}
+.content-picker{position:relative;min-width:0}.picker-input{display:flex;gap:6px}.picker-input input{width:100%;min-width:0}.picker-input button{flex:none}
+.picker-results{position:absolute;z-index:30;top:100%;left:0;right:0;min-width:220px;max-height:300px;overflow-y:auto;background:white;border:1px solid #a7b9af;border-radius:8px;box-shadow:0 10px 30px #18382b24;padding:5px}
+.picker-results[hidden]{display:none}.picker-results button{display:flex;flex-direction:column;align-items:start;width:100%;padding:10px;text-align:left;color:#163d30;background:white;border:0;border-radius:5px}
+.picker-results button:hover,.picker-results button[aria-selected=true]{background:#e8f2e9}.picker-results span{font-size:12px;color:#496458;overflow-wrap:anywhere}.picker-status:empty{display:none}
+@media(max-width:650px){.list-toolbar>div,.list-toolbar .list-search{min-width:0;flex-basis:100%}.picker-results{min-width:0}.picker-input button{min-width:44px;min-height:44px}}
+
+/* One menu at a time: content picker on the left, ordered structure on the right. */
+.menu-slots{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}.menu-slots a{padding:10px 16px;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:white}.menu-slots a[aria-current=page]{background:var(--shell);color:white;border-color:var(--shell)}
+.menu-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.menu-add{display:grid;gap:16px;position:sticky;top:20px}.menu-add .card{margin:0}.menu-add .content-picker{margin-bottom:16px}.menu-structure{min-width:0}.menu-items{list-style:none;padding:0;margin:24px 0;display:grid;gap:12px}.menu-entry{border:1px solid var(--line);border-radius:9px;background:#fff;min-width:0}.menu-entry.menu-child{margin-left:32px;border-left:3px solid #8eaa99}.menu-entry summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;cursor:pointer}.menu-entry summary::after{content:'⌄';font-size:18px}.menu-entry-title{overflow-wrap:anywhere;flex:1}.menu-entry-fields{padding:0 16px 16px}.menu-entry-fields .content-picker{margin-top:14px}.menu-entry-actions{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px;border-top:1px solid var(--line);background:#f7f9f6;border-radius:0 0 9px 9px}.menu-entry-actions button{min-height:36px}.menu-entry-actions .danger-text{margin-left:auto}.menu-save{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}.menu-save [role=status]{font-size:13px;color:var(--muted)}
+@media(max-width:1100px){.menu-workspace{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}}
+@media(max-width:850px){.menu-workspace{grid-template-columns:1fr}.menu-add{position:static;grid-template-columns:1fr 1fr}.menu-add>p{grid-column:1/-1}}
+@media(max-width:560px){.menu-add{grid-template-columns:1fr}.menu-entry.menu-child{margin-left:18px}.menu-entry-actions button{min-height:44px}.menu-slots a{flex:1;min-width:130px}}
+
+/* Field definitions stay editable on narrow screens instead of stretching the entire page. */
+.form-def{min-width:0;margin:0}
+
+.version-update{display:inline-block;padding:4px 8px;border:1px solid #679576;border-radius:6px;color:#17452c;background:#e8f4e8;font-size:11px;font-weight:700;text-decoration:none}
+
+.menu-entry summary::after{content:none}.menu-entry summary{list-style:none;gap:10px;padding:10px 14px}.menu-entry summary::-webkit-details-marker{display:none}.menu-drag-handle{display:grid;place-items:center;width:36px;min-width:36px;height:40px;padding:0;border:0;background:transparent;color:#576e60;cursor:grab;touch-action:none}.menu-drag-handle:active{cursor:grabbing}.menu-chevron{flex:none;color:#52665a;transition:transform .15s}.menu-entry details[open] .menu-chevron{transform:rotate(180deg)}.menu-entry-kind{font-size:11px;border:1px solid #dae4dc;border-radius:5px;padding:3px 6px;color:#506659;background:#f7f9f6;white-space:nowrap}.menu-entry-title{display:flex;align-items:center;gap:8px;min-width:0}.menu-entry-title svg{width:19px;height:19px;flex:none}.menu-dragging{opacity:.6;box-shadow:0 4px 16px #203b3426;border-color:#2c6b4f}.menu-icon-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}@media(max-width:560px){.menu-entry summary{padding:8px}.menu-entry-kind{display:none}.menu-icon-fields{grid-template-columns:1fr}}
+
+/* ---- the form editor: a card per field, the look, and a preview beside it -------------- */
+
+.form-screens { display: grid; gap: 20px }
+.form-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 20px 36px; padding-top: 2px }
+.form-editor-main { min-width: 0 }
+.form-part { margin: 26px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--muted) }
+.form-editor-main > .form-part:first-child, .form-editor-preview .form-part, .type-preview-column .form-part { margin-top: 14px }
+.form-fields-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px }
+.form-fields-head .form-part { margin: 0 }
+.card-body .form-fields-head .secondary, .card-body .list-actions .secondary { margin: 0; min-height: 36px; padding: 6px 12px; font-size: 12px }
+.form-fields-head .secondary .nav-icon, .list-actions .secondary .nav-icon { width: 15px; height: 15px; color: var(--accent) }
+.field-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px }
+.field-card { position: relative; padding: 2px 16px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafbf8 }
+.field-card-new { border-style: dashed; background: var(--paper) }
+.field-card-head { display: grid; grid-template-columns: 26px minmax(0, 1fr) 190px 38px; gap: 0 12px; align-items: end }
+.field-card-index { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; background: #e4ebe2; color: var(--accent); font-size: 12px; font-weight: 700 }
+.field-card label { margin-top: 12px }
+.field-card-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; padding-left: 38px }
+.field-card-body .field-help { margin-top: 5px }
+.field-card-flags { align-self: end; padding-bottom: 11px }
+.field-card-flags .check-label { margin: 12px 0 0 }
+.field-remove { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 2px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted) }
+.field-remove .nav-icon { width: 17px; height: 17px; color: inherit }
+.field-remove:hover { background: #fff0eb; border-color: #e2b2a7; color: var(--danger) }
+/* Die Vorschau bleibt beim Blaettern durch lange Feldlisten im Bild. */
+.form-editor-preview { min-width: 0; position: sticky; top: 16px; align-self: start }
+/* Die Vorschau uebernimmt Text- und Seitenfarbe der Website per Skript; die Felder lesen dieselben
+   Variablen wie auf der Website selbst. */
+.form-preview { display: grid; gap: 16px; margin-top: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.5 }
+.form-preview-field { display: grid; gap: 6px }
+.form-preview-label { font-weight: 600 }
+.form-preview-input { display: block; min-height: 40px; padding: 9px 12px; border: 1px solid var(--form-border, currentColor); border-radius: 8px; background: var(--form-bg, #fff); color: inherit }
+.form-preview-select { display: flex; align-items: center; justify-content: space-between }
+.form-preview-select::after { content: '⌄'; font-size: 16px; line-height: 1 }
+.form-preview-area { min-height: 92px }
+.form-preview-check { display: flex; align-items: flex-start; gap: 9px }
+.form-preview-box { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--form-border, currentColor); border-radius: 4px; background: var(--form-bg, #fff) }
+.form-preview-help { font-size: 12px }
+.form-preview-step { padding-top: 6px; border-top: 1px solid var(--line); display: grid; gap: 2px }
+.form-preview-step-title { font-weight: 700; font-size: 15px }
+.form-preview-radio { border-radius: 50% }
+.form-preview-number { display: flex; align-items: center; justify-content: flex-end; opacity: .7 }
+.form-preview-conditional { padding-left: 10px; border-left: 2px dashed var(--line) }
+.field-card-number { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px }
+.field-card-condition { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px }
+.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 }
+.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 }
+.form-editor-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
+.form-editor-foot .muted { font-size: 12px }
+.form-look .color-control { margin-top: 0 }
+@media (max-width: 1100px) { .form-editor { grid-template-columns: 1fr } }
+@media (max-width: 700px) {
+    .field-card { padding-top: 8px }
+    .field-card-head { grid-template-columns: 26px minmax(0, 1fr) }
+    .field-card-title, .field-card-type { grid-column: 2 }
+    .field-card-head .field-remove { position: absolute; top: 8px; right: 8px }
+    .field-card-body { padding-left: 0 }
+}
+
+/* ---- design: palette cards, ready-made palettes, font cards, typography preview -------- */
+
+.theme-form > .card { margin: 0 }
+.palette-presets { margin-top: 14px }
+.palette-presets-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600 }
+.palette-preset-row { display: flex; flex-wrap: wrap; gap: 8px }
+.palette-preset { display: grid; gap: 6px; justify-items: center; padding: 8px 10px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 600 }
+.palette-preset svg { display: block; width: 90px; height: 24px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px #203b3426 }
+.palette-preset:hover { border-color: var(--accent); background: #f5f8f1 }
+.palette-presets .field-help { margin-top: 10px }
+.swatch-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px }
+.swatch-card { position: relative; display: grid; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden }
+.swatch-card-new { border-style: dashed }
+/* Der Farbwaehler ist die Flaeche selbst: nichts liegt dazwischen. */
+.swatch-well { position: relative; display: grid; margin: 0; cursor: pointer }
+.swatch-input { display: block; width: 100%; height: 76px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer }
+.swatch-input::-webkit-color-swatch-wrapper { padding: 0 }
+.swatch-input::-webkit-color-swatch { border: 0; border-radius: 0 }
+.swatch-input::-moz-color-swatch { border: 0 }
+.swatch-hex { position: absolute; left: 10px; bottom: 8px; padding: 2px 7px; border-radius: 5px; background: #ffffffe6; color: var(--ink); font-size: 11px; box-shadow: 0 1px 2px #0000001f }
+.swatch-fields { display: grid; padding: 0 12px 12px }
+.swatch-fields label { margin: 10px 0 4px; font-size: 11px }
+.swatch-fields input { min-height: 36px; padding: 6px 10px; font-size: 13px }
+.swatch-card .field-remove { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; background: #ffffffe6 }
+.list-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px }
+.list-actions .field-help { flex: 1 1 300px; margin: 0 }
+.font-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px }
+.font-card { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden }
+.font-card-new { border-style: dashed }
+/* Die Probe steht in der Schrift selbst - das Skript setzt die Familie, die Datei liegt auf dem Server. */
+.font-sample { display: flex; align-items: center; gap: 18px; min-height: 88px; padding: 18px 60px 18px 22px; background: #fafbf8; border-bottom: 1px solid var(--line) }
+.font-sample-big { flex: none; font-size: 44px; line-height: 1; font-weight: 500 }
+.font-sample-line { display: grid; gap: 6px; min-width: 0 }
+.font-sample-text { font-size: 19px; line-height: 1.3; overflow-wrap: anywhere }
+.font-sample-weights { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted) }
+.font-weight-100 { font-weight: 100 } .font-weight-200 { font-weight: 200 } .font-weight-300 { font-weight: 300 }
+.font-weight-400 { font-weight: 400 } .font-weight-500 { font-weight: 500 } .font-weight-600 { font-weight: 600 }
+.font-weight-700 { font-weight: 700 } .font-weight-800 { font-weight: 800 } .font-weight-900 { font-weight: 900 }
+.font-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; padding: 0 22px 18px }
+.font-fields label { margin-top: 12px }
+.font-weights { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; padding: 0; border: 0 }
+.font-weights legend { float: left; margin-right: 8px; padding: 0; font-size: 12px; font-weight: 600 }
+.chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); font-size: 12px; font-weight: 500; cursor: pointer }
+.chip input { width: 14px; min-height: 14px; margin: 0 }
+.chip:has(input:checked) { border-color: var(--accent); background: #edf4e8; color: #22553e }
+.font-card .field-remove { position: absolute; top: 10px; right: 10px }
+.type-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px 36px }
+.type-fields { min-width: 0 }
+.type-colors .color-control { margin-top: 0 }
+.type-preview-column { min-width: 0 }
+.type-preview { margin-top: 12px; padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden }
+.type-preview p { margin: 0 }
+.type-preview .type-preview-h1 { margin-bottom: 10px; font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px }
+.type-preview .type-preview-h2 { margin-bottom: 14px; font-size: 26px; font-weight: 600; line-height: 1.2 }
+.type-preview-p { font-size: 17px; line-height: 1.6 }
+.type-preview-link { text-decoration: underline; text-underline-offset: 3px }
+.theme-save { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
+.theme-save .muted { font-size: 12px }
+.theme-form .button-defaults { margin: 0; background: var(--paper) }
+@media (max-width: 1000px) { .type-layout { grid-template-columns: 1fr } }
+/* Ein Dokument in der Mediathek: drei Buchstaben statt eines Zeichens. */
+.row-icon-text { font-size: 11px; font-weight: 700; letter-spacing: .04em }

public/assets/button-controls.css

@@ -0,0 +1 @@
+.button-designer{padding:16px 0;border-block:1px solid #dce4dc;margin-block:16px}.button-designer h3{margin:0 0 12px;font-size:15px}.button-state-previews{display:grid;gap:12px;padding:16px;background:#fff;border:1px solid #dce4dc;border-radius:12px;margin-bottom:16px}.button-state{display:grid;justify-items:start;gap:7px;min-width:0}.button-state>.field-help{margin:0}.button-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 16px}.button-preset{display:grid;justify-items:center;align-content:center;gap:9px;min-width:0;padding:12px 6px;background:#fff;border:1px solid #dce4dc;border-radius:10px;color:#203b34;cursor:pointer}.button-preset[aria-pressed=true]{border-color:#2c6b4f;box-shadow:inset 0 0 0 1px #2c6b4f;background:#f1f6ef}.button-preset:focus-visible{outline:3px solid #b55b12;outline-offset:2px}.button-preset .cms-button{font-size:12px!important;padding:6px 10px;min-height:34px;pointer-events:none}.button-preset-label{font-size:11px;line-height:1.4;text-align:center}.button-designer select{width:100%;margin-bottom:12px}.button-defaults{margin-block:24px;padding:24px;border:1px solid #dce4dc;border-radius:14px;min-width:0}.button-defaults legend{font-size:20px;font-weight:700;padding:0 8px}.button-defaults-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);gap:28px}.button-defaults .fields{align-content:start}.button-defaults .button-preview-column{min-width:0}.button-defaults .button-preview-column h3{font-size:15px;margin:0 0 12px}.button-defaults .color-field{margin:0}.button-defaults .color-trigger{width:100%}@media(max-width:900px){.button-defaults-layout{grid-template-columns:1fr}.button-defaults{padding:16px}}

public/assets/button-design.js

@@ -0,0 +1,95 @@
+import { devices, effectiveStyle, hoverStyle, locate, upgradeDocument, setStyle } from './editor-model.js';
+
+export function effectiveButton(block, device, defaults) {
+  const result = { ...defaults };
+  for (const name of Object.keys(devices)) {
+    Object.assign(result, block.layout?.button?.[name]);
+    if (name === device) break;
+  }
+  return result;
+}
+
+/** Change appearance without touching copy, URL, typography, sizing or layout placement. */
+export function setButtonDesign(document, id, device, values) {
+  const block = locate(document.blocks, id)?.block;
+  if (block?.type !== 'button' || !Object.hasOwn(devices, device)) return;
+  if (Object.values(values).some(value => value !== '')) upgradeDocument(document, 21);
+  const target = ((block.layout ??= {}).button ??= {});
+  target[device] ??= {};
+  for (const [key, value] of Object.entries(values)) {
+    if (value === '') delete target[device][key]; else target[device][key] = value;
+    // A chosen shape/appearance must visibly take effect even on an older hand-styled button.
+    // Other groups (font, width, padding, margins, position) remain untouched. Undo is atomic.
+    const reset = key === 'shape' ? ['borderRadius'] : key === 'appearance' ? ['backgroundColor', 'backgroundImage', 'gradientFrom', 'gradientTo', 'color', 'borderColor', 'borderWidth', 'borderStyle'] : [];
+    for (const property of reset) {
+      setStyle(document, id, device, property, '');
+      setStyle(document, id, device, property, '', { hover: true });
+    }
+  }
+  if (!Object.keys(target[device]).length) delete target[device];
+  if (!Object.keys(target).length) delete block.layout.button;
+}
+
+const element = (tag, className, text) => {
+  const node = document.createElement(tag); if (className) node.className = className;
+  if (text !== undefined) node.textContent = text; return node;
+};
+const color = (value, schema) => value?.startsWith('@') ? schema.colors.find(row => row.key === value.slice(1))?.value || '#203b34' : value;
+
+export function previewVariables(node, values, schema) {
+  const set = (key, value) => node.style.setProperty(`--kb-${key}`, String(value));
+  set('fill', color(values.backgroundColor, schema)); set('ink', color(values.color, schema));
+  set('hover-fill', color(values.hoverBackgroundColor, schema)); set('hover-ink', color(values.hoverColor, schema));
+  const font = schema.fonts.find(font => font.key === values.fontFamily);
+  set('font', font ? `${font.family ? `"${font.family}",` : ''}${font.fallback}` : 'inherit');
+  set('font-size', `${values.fontSize}px`); set('weight', values.fontWeight);
+  set('tracking', `${values.letterSpacing}px`); set('transform', values.textTransform);
+}
+
+export function buttonSample(text, values, schema, hover = false) {
+  const sample = element('span', `cms-button b-desktop-shape-${values.shape} b-desktop-appearance-${values.appearance} b-desktop-size-${values.size}${hover ? ' is-hover' : ''}`, text || 'Button');
+  previewVariables(sample, values, schema);
+  return sample;
+}
+
+export function renderButtonControls(panel, { block, device, schema, apply }) {
+  const group = element('section', 'button-designer'); group.setAttribute('aria-label', 'Button-Gestaltung');
+  group.append(element('h3', null, 'Button-Gestaltung'));
+  const current = effectiveButton(block, device, schema.buttons);
+  const previews = element('div', 'button-state-previews');
+  for (const [label, hover] of [['Normal', false], ['Beim Überfahren', true]]) {
+    const state = element('div', 'button-state'); state.append(element('span', 'field-help', label));
+    const sample = buttonSample(block.props.text, current, schema, hover);
+    // Preview the block's own free styling as well as its variant and site defaults.
+    for (const [key, definition] of Object.entries(schema.properties)) {
+      if (!definition.css || definition.target || definition.sides || definition.corners || ['position','display','width','height','minWidth','maxWidth','minHeight','maxHeight'].includes(key)) continue;
+      let value = effectiveStyle(block, device, key).value;
+      if (hover) for (const name of Object.keys(devices)) { value = hoverStyle(block, name, key) ?? value; if (name === device) break; }
+      if (value !== undefined && value !== '') sample.style.setProperty(definition.css, definition.type === 'color' ? color(value, schema) : String(value));
+    }
+    state.append(sample); previews.append(state);
+  }
+  group.append(previews);
+  const cards = element('div', 'button-preset-grid'); cards.setAttribute('role', 'group'); cards.setAttribute('aria-label', 'Button-Vorlagen');
+  for (const [index, preset] of schema.buttonPresets.entries()) {
+    const choice = element('button', 'button-preset'); choice.type = 'button'; choice.id = `button-preset-${index}`;
+    choice.setAttribute('aria-label', `Button-Vorlage ${preset.name}`);
+    choice.setAttribute('aria-pressed', String(current.shape === preset.shape && current.appearance === preset.appearance));
+    const sample = buttonSample('Button', { ...schema.buttons, ...preset, size: 'small' }, schema); sample.setAttribute('aria-hidden', 'true');
+    choice.append(sample, element('span', 'button-preset-label', preset.name));
+    choice.addEventListener('click', () => apply({ shape: preset.shape, appearance: preset.appearance }, choice.id)); cards.append(choice);
+  }
+  group.append(cards);
+  for (const [key, options] of Object.entries(schema.buttonOptions)) {
+    const id = `button-${key}`, label = element('label', null, { shape: 'Form', appearance: 'Darstellung', size: 'Button-Größe' }[key]); label.htmlFor = id;
+    const select = element('select'); select.id = id;
+    select.append(new Option(`Übernehmen: ${options[current[key]]}`, ''));
+    for (const [value, name] of Object.entries(options)) select.append(new Option(name, value));
+    select.value = block.layout?.button?.[device]?.[key] ?? '';
+    select.addEventListener('change', () => apply({ [key]: select.value }, id)); group.append(label, select);
+  }
+  const reset = element('button', 'secondary full-width', device === 'desktop' ? 'Website-Standard übernehmen' : 'Größeres Gerät übernehmen'); reset.type = 'button'; reset.id = 'button-reset';
+  reset.addEventListener('click', () => apply({ shape: '', appearance: '', size: '' }, reset.id));
+  group.append(reset, element('p', 'field-help', `${devices[device]}: Form und Darstellung übernehmen die Website-Vorgaben, solange kein eigener Wert gesetzt ist. Vorlagen ersetzen eigene Füllung und Rahmen; Schrift, Breite und Abstände bleiben erhalten.`));
+  panel.append(group);
+}

public/assets/buttons.css

@@ -0,0 +1,28 @@
+/* Shared by the public renderer and the actual button samples in the editor. */
+.cms-button{display:inline-flex;align-items:center;justify-content:center;gap:.65em;max-width:100%;min-height:44px;padding:var(--b-py,var(--kb-py,15px)) var(--b-px,var(--kb-px,21px));border:2px solid var(--b-border,var(--kb-border,transparent));border-radius:var(--b-radius,var(--kb-radius,8px));background:var(--b-bg,var(--kb-bg,var(--kb-fill,var(--ink,#203b34))));color:var(--b-fg,var(--kb-fg,var(--kb-ink,var(--paper,#f6f7f4))));font-family:var(--kb-font,inherit);font-size:var(--kb-font-size,14px);font-weight:var(--kb-weight,600);letter-spacing:var(--kb-tracking,0);text-transform:var(--kb-transform,none);line-height:1.6;text-align:center;text-decoration:none;overflow-wrap:anywhere;box-sizing:border-box}
+.cms-button:hover,.cms-button:focus-visible,.cms-button.is-hover{background:var(--b-hover-bg,var(--kb-hover-bg,var(--kb-hover-fill,var(--ink,#203b34))));color:var(--b-hover-fg,var(--kb-hover-fg,var(--kb-hover-ink,var(--paper,#f6f7f4))));text-decoration:none}
+.cms-button:focus-visible{outline:3px solid currentColor;outline-offset:4px}
+.cms-button svg{width:1.15em;height:1.15em;flex:none}
+.cms-button:where(.b-desktop-shape-square){--b-radius:0px}.cms-button:where(.b-desktop-shape-rounded){--b-radius:8px}.cms-button:where(.b-desktop-shape-pill){--b-radius:999px}
+.cms-button:where(.b-desktop-size-small){--b-py:10px;--b-px:16px}.cms-button:where(.b-desktop-size-normal){--b-py:15px;--b-px:21px}.cms-button:where(.b-desktop-size-large){--b-py:19px;--b-px:30px}
+.cms-button:where(.b-desktop-appearance-solid){--b-bg:var(--kb-fill);--b-fg:var(--kb-ink);--b-border:transparent;--b-hover-bg:var(--kb-hover-fill);--b-hover-fg:var(--kb-hover-ink)}
+.cms-button:where(.b-desktop-appearance-outline){--b-bg:transparent;--b-fg:var(--kb-fill);--b-border:var(--kb-fill);--b-hover-bg:var(--kb-fill);--b-hover-fg:var(--kb-ink)}
+.cms-button:where(.b-desktop-appearance-soft){--b-bg:color-mix(in srgb,var(--kb-fill) 12%,transparent);--b-fg:var(--kb-fill);--b-border:transparent;--b-hover-bg:var(--kb-fill);--b-hover-fg:var(--kb-ink)}
+.cms-button:where(.b-desktop-appearance-link){--b-bg:transparent;--b-fg:var(--kb-fill);--b-border:transparent;--b-hover-bg:transparent;--b-hover-fg:var(--kb-hover-fill);text-decoration:underline;text-underline-offset:.25em}
+/* Responsive variants */
+@media(max-width:1024px){
+.cms-button:where(.b-tablet-shape-square){--b-radius:0px}.cms-button:where(.b-tablet-shape-rounded){--b-radius:8px}.cms-button:where(.b-tablet-shape-pill){--b-radius:999px}
+.cms-button:where(.b-tablet-size-small){--b-py:10px;--b-px:16px}.cms-button:where(.b-tablet-size-normal){--b-py:15px;--b-px:21px}.cms-button:where(.b-tablet-size-large){--b-py:19px;--b-px:30px}
+.cms-button:where(.b-tablet-appearance-solid){--b-bg:var(--kb-fill);--b-fg:var(--kb-ink);--b-border:transparent;--b-hover-bg:var(--kb-hover-fill);--b-hover-fg:var(--kb-hover-ink)}
+.cms-button:where(.b-tablet-appearance-outline){--b-bg:transparent;--b-fg:var(--kb-fill);--b-border:var(--kb-fill);--b-hover-bg:var(--kb-fill);--b-hover-fg:var(--kb-ink)}
+.cms-button:where(.b-tablet-appearance-soft){--b-bg:color-mix(in srgb,var(--kb-fill) 12%,transparent);--b-fg:var(--kb-fill);--b-border:transparent;--b-hover-bg:var(--kb-fill);--b-hover-fg:var(--kb-ink)}
+.cms-button:where(.b-tablet-appearance-link){--b-bg:transparent;--b-fg:var(--kb-fill);--b-border:transparent;--b-hover-bg:transparent;--b-hover-fg:var(--kb-hover-fill);text-decoration:underline;text-underline-offset:.25em}
+}
+@media(max-width:767px){
+.cms-button:where(.b-mobile-shape-square){--b-radius:0px}.cms-button:where(.b-mobile-shape-rounded){--b-radius:8px}.cms-button:where(.b-mobile-shape-pill){--b-radius:999px}
+.cms-button:where(.b-mobile-size-small){--b-py:10px;--b-px:16px}.cms-button:where(.b-mobile-size-normal){--b-py:15px;--b-px:21px}.cms-button:where(.b-mobile-size-large){--b-py:19px;--b-px:30px}
+.cms-button:where(.b-mobile-appearance-solid){--b-bg:var(--kb-fill);--b-fg:var(--kb-ink);--b-border:transparent;--b-hover-bg:var(--kb-hover-fill);--b-hover-fg:var(--kb-hover-ink)}
+.cms-button:where(.b-mobile-appearance-outline){--b-bg:transparent;--b-fg:var(--kb-fill);--b-border:var(--kb-fill);--b-hover-bg:var(--kb-fill);--b-hover-fg:var(--kb-ink)}
+.cms-button:where(.b-mobile-appearance-soft){--b-bg:color-mix(in srgb,var(--kb-fill) 12%,transparent);--b-fg:var(--kb-fill);--b-border:transparent;--b-hover-bg:var(--kb-fill);--b-hover-fg:var(--kb-ink)}
+.cms-button:where(.b-mobile-appearance-link){--b-bg:transparent;--b-fg:var(--kb-fill);--b-border:transparent;--b-hover-bg:transparent;--b-hover-fg:var(--kb-hover-fill);text-decoration:underline;text-underline-offset:.25em}
+}

public/assets/canvas-overlay.js

@@ -0,0 +1,506 @@
+import { blockLabel, locate, dropList, isContainer } from './editor-model.js';
+
+// ---------------------------------------------------------------------------------------------
+// The layer above the preview.
+//
+// The preview is a sandboxed iframe without scripts of its own, and every change replaces its
+// whole document. The selection tools therefore live outside it and get rebound after a refresh.
+// Empty-container hit areas are rebuilt separately inside the frame by preview-containers.js.
+// The outline, element toolbar, insert points and drop marker live in the editor document, in an
+// absolutely positioned layer that sits exactly on top of the frame.
+//
+// Geometry: the layer is the same box as the frame and carries the same scale transform, so a
+// rectangle measured inside the frame can be used here unchanged. Measurements come from
+// getBoundingClientRect, which is relative to the frame's own viewport - that is why scrolling
+// the preview only needs a re-measure and no offset arithmetic.
+// ---------------------------------------------------------------------------------------------
+
+/** Diameter of a plus sign, in the editor's own pixels. */
+const INSERT_SIZE = 22;
+
+/**
+ * What the toolbar offers, in the order it appears.
+ *
+ * Each label names the element it acts on - "Sektion duplizieren", not "Duplizieren". The
+ * sidebar carries the same five actions, and two controls with the same name on one screen are
+ * indistinguishable to anyone listening rather than looking. Naming the subject also says more
+ * than the generic verb did: the toolbar floats next to the element, the announcement should
+ * carry that context instead of assuming it was seen.
+ */
+const TOOLS = [
+  { action: 'parent', glyph: '⤴', title: label => `Element über ${label} auswählen` },
+  { action: 'up', glyph: '↑', title: label => `${label} nach oben verschieben` },
+  { action: 'down', glyph: '↓', title: label => `${label} nach unten verschieben` },
+  { action: 'duplicate', glyph: '⧉', title: label => `${label} duplizieren` },
+  { action: 'delete', glyph: '✕', title: label => `${label} löschen`, danger: true },
+];
+
+export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSelected, onSelect, onAction, onInsert, onDrop, onResize = () => {} }) {
+  const layer = document.createElement('div');
+  layer.className = 'canvas-overlay';
+  const hover = element('div', 'ov-box ov-hover');
+  const hoverLabel = element('span', 'ov-label');
+  hover.append(hoverLabel);
+  const select = element('div', 'ov-box ov-select');
+  const selectName = document.createElement('span');
+  selectName.className = 'ov-toolbar-name';
+  selectName.setAttribute('aria-hidden', 'true');
+  const toolbar = element('div', 'ov-toolbar');
+  toolbar.removeAttribute('aria-hidden');
+  toolbar.setAttribute('role', 'toolbar');
+  toolbar.setAttribute('aria-label', 'Aktionen für das gewählte Element');
+  const drop = element('div', 'ov-drop');
+  const dropLabel = element('div', 'ov-drop-label');
+  const insertBefore = insertButton('before', 'Element davor einfügen');
+  const insertAfter = insertButton('after', 'Element dahinter einfügen');
+  toolbar.append(selectName);
+  layer.append(hover, select, toolbar, insertBefore, insertAfter, drop, dropLabel);
+  stage.append(layer);
+
+  for (const tool of TOOLS) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `ov-tool${tool.danger ? ' ov-tool-danger' : ''}`;
+    button.dataset.action = tool.action;
+    button.textContent = tool.glyph;
+    button.addEventListener('mousedown', event => event.preventDefault());
+    button.addEventListener('click', () => onAction(tool.action, getSelected()));
+    toolbar.append(button);
+  }
+
+  /**
+   * A part that only draws something. The whole layer must not be aria-hidden - it carries real
+   * buttons, and a focusable control inside an aria-hidden subtree is exactly the contradiction
+   * screen readers cannot resolve. So the decoration is hidden one piece at a time.
+   */
+  function element(tag, className) {
+    const node = document.createElement(tag);
+    node.className = className;
+    node.setAttribute('aria-hidden', 'true');
+    node.hidden = true;
+    return node;
+  }
+
+  function insertButton(where, title) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ov-insert';
+    button.title = title;
+    button.setAttribute('aria-label', title);
+    button.textContent = '+';
+    button.hidden = true;
+    button.addEventListener('mousedown', event => event.preventDefault());
+    button.addEventListener('click', () => onInsert(getSelected(), where));
+    return button;
+  }
+
+  let hovered = null, dragging = null, dropPlan = null;
+
+  const doc = () => frame.contentDocument;
+  /** Is this id a block of the current document rather than some id in the markup? */
+  const known = id => Boolean(id) && Boolean(locate(getDocument().blocks, id));
+
+  /** The nearest element that stands for a block of the document. */
+  function blockElement(node) {
+    for (let current = node; current && current !== doc(); current = current.parentElement) {
+      if (current.id && known(current.id)) return current;
+    }
+    return null;
+  }
+
+  function rectOf(id) {
+    const node = id ? doc()?.getElementById(id) : null;
+    if (!node) return null;
+    const box = node.getBoundingClientRect();
+    return box.width || box.height ? box : null;
+  }
+
+  /** Puts a box on a measured rectangle, or hides it when the block is not on screen. */
+  function place(node, box, inset = 0) {
+    if (!box) { node.hidden = true; return false; }
+    node.hidden = false;
+    node.style.left = `${box.left + inset}px`;
+    node.style.top = `${box.top + inset}px`;
+    node.style.width = `${Math.max(0, box.width - inset * 2)}px`;
+    node.style.height = `${Math.max(0, box.height - inset * 2)}px`;
+    return true;
+  }
+
+  /**
+   * Keeps the chrome legible when the preview is scaled down. A tablet preview on a narrow
+   * screen runs at about 0.6; without this the toolbar would shrink with it and the buttons
+   * would fall under the size a finger or an eye can deal with.
+   */
+  function counterScale(node, originX, originY) {
+    const scale = getScale();
+    node.style.transformOrigin = `${originX} ${originY}`;
+    node.style.transform = scale < 1 ? `scale(${1 / scale})` : '';
+  }
+
+  function positionToolbar(box, hasInsert) {
+    if (!box) { toolbar.hidden = true; return; }
+    toolbar.hidden = false;
+    const scale = getScale();
+    // The toolbar is drawn at its natural size and then counter-scaled, so the room it needs
+    // inside the frame's coordinates shrinks as the preview shrinks.
+    const needed = toolbar.offsetHeight / scale;
+    // The upper plus sign straddles the top edge. On a narrow element - a button, a heading of
+    // two words - it sits under the middle of the toolbar, so the toolbar makes room for it.
+    const clearance = hasInsert ? INSERT_SIZE / scale / 2 : 0;
+    const above = box.top >= needed + clearance + 2;
+    toolbar.style.left = `${box.left}px`;
+    toolbar.style.top = `${above
+      ? box.top - needed - clearance - 2
+      : Math.min(box.bottom + clearance + 2, frame.clientHeight - needed)}px`;
+    counterScale(toolbar, 'left', 'top');
+  }
+
+  function positionInsert(button, box, where) {
+    if (!box) { button.hidden = true; return; }
+    const scale = getScale();
+    const size = INSERT_SIZE / scale;
+    button.hidden = false;
+    button.style.left = `${box.left + box.width / 2 - size / 2}px`;
+    button.style.top = `${(where === 'before' ? box.top : box.bottom) - size / 2}px`;
+    button.style.width = `${size}px`;
+    button.style.height = `${size}px`;
+    counterScale(button, 'center', 'center');
+  }
+
+  /** Renames the toolbar for whatever is selected right now. */
+  function nameTools(id) {
+    const block = locate(getDocument().blocks, id)?.block;
+    const label = block ? blockLabel(block) : 'Element';
+    selectName.textContent = label;
+    for (const button of toolbar.children) {
+      const tool = TOOLS.find(entry => entry.action === button.dataset.action);
+      if (!tool) continue;
+      button.title = tool.title(label);
+      button.setAttribute('aria-label', tool.title(label));
+    }
+  }
+
+  function paintLabel(node, id) {
+    const block = locate(getDocument().blocks, id)?.block;
+    node.textContent = block ? blockLabel(block) : '';
+    counterScale(node, 'left', 'bottom');
+  }
+
+  /** Re-measures everything. Cheap enough to call on every scroll frame. */
+  function sync() {
+    const scale = getScale();
+    layer.style.width = `${frame.clientWidth}px`;
+    layer.style.height = `${frame.clientHeight}px`;
+    layer.style.transform = `scale(${scale})`;
+    if (!doc()) return;
+    const selectedId = getSelected();
+    const selectedBox = rectOf(selectedId);
+    place(select, selectedBox);
+    if (selectedBox) nameTools(selectedId);
+    // Insert points only make sense for a block that has somewhere to sit next to.
+    const item = selectedId ? locate(getDocument().blocks, selectedId) : null;
+    const sibling = item && dropList(getDocument(), item.parent?.id ?? null, item.block);
+    positionInsert(insertBefore, sibling ? selectedBox : null, 'before');
+    positionInsert(insertAfter, sibling ? selectedBox : null, 'after');
+    // The toolbar is placed last because it has to keep clear of the upper plus sign, and only
+    // now is it settled whether there is one.
+    positionToolbar(selectedBox, Boolean(sibling));
+    placeResizers();
+    const hoverBox = hovered && hovered !== selectedId ? rectOf(hovered) : null;
+    if (place(hover, hoverBox)) paintLabel(hoverLabel, hovered);
+    if (dragging) {
+      dropPlan = dragPoint ? planDrop(dragPoint.x, dragPoint.y, dragging.block) : null;
+      paintDrop();
+    }
+  }
+
+  // -------------------------------------------------------------------------------------------
+  // Column widths. Umut: "am besten per Drag and Drop im Editor".
+  //
+  // The border between two columns of the selected row is a handle. Dragging it moves share from
+  // one neighbour to the other; the row is restyled inline while the pointer moves, and the
+  // result is written to the document once, when the pointer is released. The arrow keys do the
+  // same in steps of five, so the widths are reachable without a mouse.
+  // -------------------------------------------------------------------------------------------
+
+  const resizers = [];
+  let focusResizer = null;
+
+  /** The row whose borders can be dragged: the selected row, or the row around the selected column. */
+  function resizableRow() {
+    const item = getSelected() ? locate(getDocument().blocks, getSelected()) : null;
+    if (!item) return null;
+    if (item.block.type === 'row') return item.block;
+    return item.parent?.type === 'row' ? item.parent : null;
+  }
+
+  /** The measured widths of the columns as shares of their sum - the truth a drag starts from. */
+  function sharesOf(rowId) {
+    const kids = childElements(rowId);
+    const total = kids.reduce((sum, kid) => sum + kid.box.width, 0);
+    return total > 0 ? kids.map(kid => kid.box.width / total * 100) : null;
+  }
+
+  /** Moves `delta` points of share from the right neighbour to the left one; neither may vanish. */
+  function shift(shares, index, delta) {
+    const pair = shares[index] + shares[index + 1];
+    const least = Math.min(10, pair / 2);
+    const left = Math.max(least, Math.min(pair - least, shares[index] + delta));
+    const next = shares.slice();
+    next[index] = left;
+    next[index + 1] = pair - left;
+    return next;
+  }
+
+  const tenth = share => Math.round(share * 10) / 10;
+  const formatShares = shares => shares.map(share => String(tenth(share))).join(' ');
+  const tracksOf = shares => shares.map(share => `minmax(0,${tenth(share)}fr)`).join(' ');
+
+  function placeResizers() {
+    const row = dragging ? null : resizableRow();
+    const kids = row ? childElements(row.id) : [];
+    // Stacked columns - a phone, or a single-column layout - have no border to drag.
+    const sideBySide = kids.length > 1 && kids.every((kid, index) => index === 0 || kid.box.left >= kids[index - 1].box.right - 1);
+    const wanted = sideBySide ? kids.length - 1 : 0;
+    while (resizers.length > wanted) resizers.pop().remove();
+    while (resizers.length < wanted) resizers.push(resizeButton());
+    const width = 14 / getScale();
+    resizers.forEach((button, index) => {
+      const left = kids[index].box, right = kids[index + 1].box;
+      button.dataset.row = row.id;
+      button.dataset.index = String(index);
+      const label = `Breite zwischen Spalte ${index + 1} und ${index + 2} ändern`;
+      button.setAttribute('aria-label', label);
+      button.title = `${label}: ziehen oder Pfeiltasten`;
+      button.style.left = `${(left.right + right.left) / 2 - width / 2}px`;
+      button.style.top = `${Math.min(left.top, right.top)}px`;
+      button.style.width = `${width}px`;
+      button.style.height = `${Math.max(left.bottom, right.bottom) - Math.min(left.top, right.top)}px`;
+      if (focusResizer && focusResizer.row === row.id && focusResizer.index === index) { button.focus(); focusResizer = null; }
+    });
+  }
+
+  function resizeButton() {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ov-resize';
+    button.addEventListener('pointerdown', startResize);
+    button.addEventListener('keydown', event => {
+      const step = event.key === 'ArrowLeft' ? -5 : event.key === 'ArrowRight' ? 5 : 0;
+      if (!step) return;
+      event.preventDefault();
+      const rowId = button.dataset.row, index = Number(button.dataset.index);
+      const shares = sharesOf(rowId);
+      if (!shares) return;
+      focusResizer = { row: rowId, index };
+      onResize(rowId, formatShares(shift(shares, index, step)));
+    });
+    layer.append(button);
+    return button;
+  }
+
+  function startResize(event) {
+    if (event.button !== 0) return;
+    const button = event.currentTarget;
+    const rowId = button.dataset.row, index = Number(button.dataset.index);
+    const start = sharesOf(rowId);
+    const node = doc()?.getElementById(rowId);
+    if (!start || !node) return;
+    event.preventDefault();
+    button.setPointerCapture(event.pointerId);
+    layer.classList.add('is-resizing');
+    // Pointer pixels are editor pixels; the shares live in the frame's scale, on the summed
+    // width of the columns without the gaps between them.
+    const content = childElements(rowId).reduce((sum, kid) => sum + kid.box.width, 0);
+    const startX = event.clientX;
+    let current = start;
+    const move = moved => {
+      current = shift(start, index, (moved.clientX - startX) / getScale() / content * 100);
+      node.style.gridTemplateColumns = tracksOf(current);
+      sync();
+    };
+    const finish = () => {
+      button.removeEventListener('pointermove', move);
+      button.removeEventListener('pointerup', finish);
+      button.removeEventListener('pointercancel', finish);
+      layer.classList.remove('is-resizing');
+      if (formatShares(current) !== formatShares(start)) onResize(rowId, formatShares(current));
+      else sync();
+    };
+    button.addEventListener('pointermove', move);
+    button.addEventListener('pointerup', finish);
+    button.addEventListener('pointercancel', finish);
+  }
+
+  // -------------------------------------------------------------------------------------------
+  // Dropping.
+  // -------------------------------------------------------------------------------------------
+
+  /** The child elements of a block, in document order, that stand for its children. */
+  function childElements(id) {
+    const block = id ? locate(getDocument().blocks, id)?.block : null;
+    const children = id ? (block?.children ?? []) : getDocument().blocks;
+    return children.map(child => ({ id: child.id, box: rectOf(child.id) })).filter(entry => entry.box);
+  }
+
+  /**
+   * Where a drop would land inside a container. Children that sit side by side - the columns of
+   * a row, the images of a gallery - are compared left to right, everything else top to bottom,
+   * so the insertion line always runs across the gap the pointer is actually in.
+   */
+  function indexInside(parentId, x, y) {
+    const kids = childElements(parentId);
+    if (!kids.length) return { index: 0, line: null };
+    const sideBySide = kids.length > 1 && kids.some(kid => kid.box.left >= kids[0].box.right - 1);
+    for (let index = 0; index < kids.length; index++) {
+      const box = kids[index].box;
+      const middle = sideBySide ? box.left + box.width / 2 : box.top + box.height / 2;
+      if ((sideBySide ? x : y) < middle) return { index, line: { box, edge: sideBySide ? 'left' : 'top' }, sideBySide };
+    }
+    const last = kids[kids.length - 1].box;
+    return { index: kids.length, line: { box: last, edge: sideBySide ? 'right' : 'bottom' }, sideBySide };
+  }
+
+  /**
+   * Turns a pointer position into a concrete destination. The rule, from the inside out: land
+   * inside the hovered block when it is a container that takes this kind of child, otherwise
+   * next to it, otherwise try the same two answers one level up.
+   */
+  function planDrop(x, y, block) {
+    const document_ = getDocument();
+    if (x < 0 || y < 0 || x > frame.clientWidth || y > frame.clientHeight) return null;
+    const start = blockElement(doc()?.elementFromPoint(x, y));
+    for (let node = start; ; ) {
+      const id = node?.id ?? null;
+      const item = id ? locate(document_.blocks, id) : null;
+      // Never offer to drop a block into itself or into its own subtree.
+      const ownBranch = block && id && (id === block.id || Boolean(locate(block.children || [], id)));
+      if (id && !ownBranch && isContainer(item?.block) && dropList(document_, id, block)) {
+        const inside = indexInside(id, x, y);
+        return { parentId: id, index: inside.index, line: inside.line ?? { box: rectOf(id), edge: 'inside' } };
+      }
+      const parentId = item?.parent?.id ?? null;
+      if (id && !ownBranch && dropList(document_, parentId, block)) {
+        const box = rectOf(id);
+        const horizontal = item.parent?.type === 'row' && indexInside(parentId, x, y).sideBySide;
+        const after = box ? (horizontal ? x > box.left + box.width / 2 : y > box.top + box.height / 2) : false;
+        return { parentId, index: item.index + (after ? 1 : 0), line: box ? { box, edge: horizontal ? (after ? 'right' : 'left') : (after ? 'bottom' : 'top') } : null };
+      }
+      if (!node) break;
+      node = item?.parent ? doc()?.getElementById(item.parent.id) : null;
+      if (!node) {
+        // Fell out of the tree: the top level is the last thing left to try.
+        if (!dropList(document_, null, block)) break;
+        const inside = indexInside(null, x, y);
+        return { parentId: null, index: inside.index, line: inside.line };
+      }
+    }
+    return null;
+  }
+
+  function paintDrop() {
+    const line = dropPlan?.line;
+    if (!line?.box) { drop.hidden = true; dropLabel.hidden = true; return; }
+    drop.hidden = false;
+    const scale = getScale();
+    const thickness = 3 / scale;
+    const { box, edge } = line;
+    const target = dropPlan.parentId ? doc()?.getElementById(dropPlan.parentId) : null;
+    const label = target?.dataset.editorLabel || (dropPlan.parentId ? blockLabel(locate(getDocument().blocks, dropPlan.parentId)?.block) : 'Seite');
+    dropLabel.textContent = `${edge === 'inside' ? 'Einfügen in' : 'Einfügen ·'} ${label}`;
+    dropLabel.hidden = false;
+    dropLabel.style.left = `${Math.max(0, box.left + 8)}px`;
+    dropLabel.style.top = `${Math.max(2, box.top + 8)}px`;
+    counterScale(dropLabel, 'left', 'top');
+    drop.style.marginLeft = drop.style.marginTop = '0';
+    drop.classList.toggle('ov-drop-inside', edge === 'inside');
+    if (edge === 'inside') {
+      drop.style.left = `${box.left}px`; drop.style.top = `${box.top}px`;
+      drop.style.width = `${box.width}px`; drop.style.height = `${box.height}px`;
+      return;
+    }
+    const vertical = edge === 'left' || edge === 'right';
+    drop.style.left = `${edge === 'right' ? box.right : box.left}px`;
+    drop.style.top = `${edge === 'bottom' ? box.bottom : box.top}px`;
+    drop.style.width = `${vertical ? thickness : box.width}px`;
+    drop.style.height = `${vertical ? box.height : thickness}px`;
+    if (vertical) drop.style.marginLeft = `${-thickness / 2}px`; else drop.style.marginLeft = '0';
+    if (!vertical) drop.style.marginTop = `${-thickness / 2}px`; else drop.style.marginTop = '0';
+  }
+
+  /** Attaches to a freshly loaded preview document. Called after every preview refresh. */
+  function attach() {
+    const document_ = doc();
+    if (!document_) return;
+    document_.addEventListener('mousemove', event => {
+      if (dragging) return;
+      const node = blockElement(event.target);
+      const id = node?.id ?? null;
+      if (id === hovered) return;
+      hovered = id;
+      sync();
+    });
+    document_.documentElement.addEventListener('mouseleave', () => { hovered = null; sync(); });
+    document_.addEventListener('scroll', sync, { passive: true, capture: true });
+    document_.defaultView?.addEventListener('scroll', sync, { passive: true });
+    // Inside the frame an event already carries frame coordinates, and those are exactly the
+    // coordinates the layer draws in - no conversion, and none of the rounding a trip through
+    // the editor viewport and back through the scale factor would add.
+    document_.addEventListener('dragover', event => {
+      if (!dragging) return;
+      event.preventDefault();
+      dragPoint = { x: event.clientX, y: event.clientY };
+      dropPlan = planDrop(event.clientX, event.clientY, dragging.block);
+      event.dataTransfer.dropEffect = dropPlan ? (dragging.kind === 'move' ? 'move' : 'copy') : 'none';
+      paintDrop();
+      if (!scrollFrame) scrollFrame = requestAnimationFrame(scrollDrag);
+    });
+    document_.addEventListener('dragleave', event => {
+      if (!event.relatedTarget) { dragPoint = null; dropPlan = null; paintDrop(); }
+    });
+    document_.addEventListener('drop', event => {
+      if (!dragging) return;
+      event.preventDefault();
+      // Both are read before the clean-up clears them.
+      const payload = dragging, plan = planDrop(event.clientX, event.clientY, dragging.block);
+      endDrag();
+      if (plan) onDrop(payload, plan);
+    });
+    sync();
+  }
+
+  function startDrag(payload) {
+    dragging = payload;
+    layer.classList.add('is-dragging');
+    doc()?.documentElement.classList.add('editor-dragging');
+    hovered = null;
+    sync();
+  }
+
+  function endDrag() {
+    dragging = null;
+    dragPoint = null;
+    cancelAnimationFrame(scrollFrame); scrollFrame = null;
+    dropPlan = null;
+    drop.hidden = true;
+    dropLabel.hidden = true;
+    layer.classList.remove('is-dragging');
+    doc()?.documentElement.classList.remove('editor-dragging');
+    sync();
+  }
+
+  let dragPoint = null, scrollFrame = null;
+  function scrollDrag() {
+    scrollFrame = null;
+    if (!dragging || !dragPoint) return;
+    const edge = 60 / getScale();
+    const amount = dragPoint.y < edge ? -14 : dragPoint.y > frame.clientHeight - edge ? 14 : 0;
+    if (amount) {
+      doc()?.defaultView?.scrollBy(0, amount / getScale());
+      sync();
+      scrollFrame = requestAnimationFrame(scrollDrag);
+    }
+  }
+
+  return { sync, attach, startDrag, endDrag, get dragPayload() { return dragging; } };
+}

public/assets/color-control.css

@@ -0,0 +1,28 @@
+.color-control{min-width:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
+.color-trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:9px;text-align:left;border:0;border-radius:11px;background:#fff;color:var(--ink);cursor:pointer}
+.color-trigger:hover{background:#f5f7f3}
+.color-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
+.color-sample{position:relative;flex:0 0 38px;height:38px;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px #203b3426;background:repeating-conic-gradient(#e1e6e1 0% 25%,#fff 0% 50%) 0 0 / 10px 10px}
+.color-sample-ink{position:absolute;inset:0;box-shadow:inset 0 0 0 1px #203b341f;border-radius:inherit}
+.color-description{display:grid;gap:3px;flex:1;min-width:0}
+.color-name{font-size:12px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
+.color-detail{font-size:10px;line-height:1.4;color:#56645c;overflow-wrap:anywhere}
+.color-chevron{flex:0 0 12px;font-size:17px;color:#56645c}
+.color-trigger[aria-expanded=true] .color-chevron{transform:rotate(180deg)}
+.color-choices{padding:12px 10px;border-top:1px solid var(--line);background:#fafbf8}
+.color-choices[hidden]{display:none}
+.color-control .color-heading{display:block;margin:0 0 8px;font-size:10px;line-height:1.5;font-weight:700;letter-spacing:.04em;color:#526258}
+.color-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:248px;overflow-y:auto;padding:3px;margin:-3px -3px 13px;scrollbar-width:thin}
+.color-option{display:flex;align-items:center;gap:6px;min-height:44px;padding:5px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}
+.color-option:hover{background:#eef3ea;border-color:#718575}
+.color-option[aria-pressed=true]{border-color:#2f6b4d;box-shadow:0 0 0 1px #2f6b4d;background:#edf4e8}
+.color-option:focus-visible,.color-accept:focus-visible,.color-inherit:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+.color-option-swatch{flex:0 0 23px;height:28px;border-radius:5px;box-shadow:inset 0 0 0 1px #203b3426}
+.color-option-name{min-width:0;font-size:10px;line-height:1.3;overflow-wrap:anywhere}
+.color-custom{display:flex;align-items:center;gap:6px}
+.color-control .color-native{flex:0 0 36px;width:36px;height:38px;min-height:38px;padding:3px;border-radius:7px;cursor:pointer;background:#fff}
+.color-control .color-text{flex:1;min-width:0;width:0;font-size:12px;min-height:38px;padding:6px}
+.color-accept{flex:0 0 30px;min-height:38px;padding:0;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);cursor:pointer}
+.color-control .field-error{font-size:11px;line-height:1.5;margin:7px 0}
+.color-inherit{display:block;margin:10px 0 0;padding:3px 0;border:0;background:none;color:#405b4b;font-size:11px;line-height:1.5;text-decoration:underline;cursor:pointer}
+.color-inherit:disabled{color:#67736a;cursor:default;text-decoration:none}

public/assets/color-control.js

@@ -0,0 +1,125 @@
+/** A compact palette picker. Palette references stay references when saved. */
+let sequence = 0;
+const node = (tag, className, text) => {
+  const el = document.createElement(tag);
+  el.className = className;
+  if (text !== undefined) el.textContent = text;
+  return el;
+};
+const hexPattern = /^#[0-9a-f]{6}([0-9a-f]{2})?$/i;
+
+export function createColorControl({ id, label, value = '', inheritedValue = '', colors, onChange, onComplete = () => {} }) {
+  const wrap = node('div', 'color-control');
+  const trigger = node('button', 'color-trigger');
+  trigger.type = 'button'; trigger.id = id;
+  trigger.setAttribute('aria-expanded', 'false');
+  trigger.setAttribute('aria-controls', `${id}-choices`);
+  const sample = node('span', 'color-sample'); sample.setAttribute('aria-hidden', 'true');
+  const ink = node('span', 'color-sample-ink'); sample.append(ink);
+  const description = node('span', 'color-description');
+  const name = node('span', 'color-name'), detail = node('span', 'color-detail');
+  description.append(name, detail);
+  const arrow = node('span', 'color-chevron', '⌄'); arrow.setAttribute('aria-hidden', 'true');
+  trigger.append(sample, description, arrow);
+
+  const choices = node('div', 'color-choices'); choices.id = `${id}-choices`; choices.hidden = true;
+  const heading = node('p', 'color-heading', 'Website-Farben');
+  const palette = node('div', 'color-palette');
+  palette.setAttribute('role', 'group'); palette.setAttribute('aria-label', `Website-Farben für ${label}`);
+  const buttons = [];
+  let current = value, editing = false, mergeKey = `color-${++sequence}`;
+  const entryFor = raw => colors.find(color => `@${color.key}` === raw);
+  const resolve = raw => hexPattern.test(raw) ? raw : entryFor(raw)?.value || '';
+  const restoreFocus = () => document.getElementById(id)?.focus();
+  const choose = raw => { current = raw; sync(); onChange(raw); restoreFocus(); };
+  for (const color of colors) {
+    const button = node('button', 'color-option'); button.type = 'button';
+    button.dataset.color = `@${color.key}`;
+    button.title = `${color.name} · ${color.value}`;
+    button.setAttribute('aria-label', button.title);
+    const swatch = node('span', 'color-option-swatch'); swatch.style.backgroundColor = color.value;
+    swatch.setAttribute('aria-hidden', 'true');
+    button.append(swatch, node('span', 'color-option-name', color.name));
+    button.addEventListener('click', () => choose(`@${color.key}`));
+    buttons.push(button); palette.append(button);
+  }
+  if (colors.length) choices.append(heading, palette);
+
+  const customLabel = node('label', 'color-heading', 'Eigene Farbe'); customLabel.htmlFor = `${id}-hex`;
+  const custom = node('div', 'color-custom');
+  const picker = node('input', 'color-native'); picker.type = 'color';
+  picker.setAttribute('aria-label', `Eigene Farbe für ${label}`);
+  const text = node('input', 'color-text'); text.type = 'text'; text.id = `${id}-hex`;
+  text.autocomplete = 'off'; text.spellcheck = false; text.placeholder = '#RRGGBB';
+  text.setAttribute('aria-label', `Farbwert für ${label}`);
+  const accept = node('button', 'color-accept', '✓'); accept.type = 'button';
+  accept.setAttribute('aria-label', `Farbwert für ${label} übernehmen`); accept.title = 'Farbwert übernehmen';
+  custom.append(picker, text, accept);
+  const error = node('p', 'field-error'); error.id = `${id}-error`; error.hidden = true;
+  error.setAttribute('role', 'status'); text.setAttribute('aria-describedby', error.id);
+  const clear = node('button', 'color-inherit', 'Geerbten Wert verwenden'); clear.type = 'button';
+  clear.addEventListener('click', () => choose(''));
+  choices.append(customLabel, custom, error, clear);
+  wrap.append(trigger, choices);
+
+  function sync() {
+    const shown = current || inheritedValue, entry = entryFor(shown), hex = resolve(shown);
+    ink.style.backgroundColor = hex || 'transparent';
+    name.textContent = entry?.name || (hex ? 'Eigene Farbe' : current ? 'Unbekannte Palettenfarbe' : 'Übernehmen');
+    detail.textContent = [!current ? 'Geerbt' : entry ? 'Palette' : '', hex || (current || 'Kein eigener Farbwert')].filter(Boolean).join(' · ');
+    trigger.setAttribute('aria-label', `${label}: ${name.textContent}, ${detail.textContent}. Farbe auswählen`);
+    picker.value = hex ? hex.slice(0, 7) : '#ffffff';
+    text.value = hex || current || '';
+    for (const button of buttons) button.setAttribute('aria-pressed', String(button.dataset.color === shown));
+    clear.disabled = current === '';
+  }
+  const finish = () => {
+    if (!editing) return;
+    editing = false;
+    onComplete();
+  };
+  trigger.addEventListener('click', () => {
+    if (!choices.hidden) {
+      choices.hidden = true; trigger.setAttribute('aria-expanded', 'false'); finish(); restoreFocus();
+    } else {
+      choices.hidden = false; trigger.setAttribute('aria-expanded', 'true');
+    }
+  });
+  // A native picker emits many input events during one gesture. Keep its DOM and one undo entry.
+  picker.addEventListener('input', () => {
+    current = picker.value + (resolve(current || inheritedValue).slice(7) || '');
+    editing = true; sync(); onChange(current, mergeKey);
+  });
+  picker.addEventListener('change', () => {
+    current = picker.value + (resolve(current || inheritedValue).slice(7) || '');
+    sync(); onChange(current, editing ? mergeKey : undefined);
+    if (editing) finish();
+    restoreFocus();
+  });
+  const applyText = () => {
+    let raw = text.value.trim();
+    if (/^#[0-9a-f]{3}$/i.test(raw)) raw = '#' + [...raw.slice(1)].map(char => char + char).join('');
+    if (raw && !hexPattern.test(raw) && !entryFor(raw)) {
+      text.setAttribute('aria-invalid', 'true'); error.hidden = false;
+      error.textContent = 'Hexfarbe wie #1a2b3c oder eine vorhandene Palettenfarbe eingeben.';
+      text.focus(); return;
+    }
+    choose(raw);
+  };
+  text.addEventListener('input', () => { text.removeAttribute('aria-invalid'); error.hidden = true; });
+  text.addEventListener('keydown', event => {
+    if (event.key === 'Enter') { event.preventDefault(); applyText(); }
+  });
+  accept.addEventListener('click', applyText);
+  wrap.addEventListener('keydown', event => {
+    if (event.key !== 'Escape' || choices.hidden) return;
+    event.preventDefault(); event.stopPropagation(); choices.hidden = true;
+    trigger.setAttribute('aria-expanded', 'false'); finish(); restoreFocus();
+  });
+  // Commit after leaving the native picker even on browsers that omit its change event.
+  wrap.addEventListener('focusout', () => setTimeout(() => {
+    if (wrap.isConnected && !wrap.contains(document.activeElement)) finish();
+  }, 0));
+  sync();
+  return wrap;
+}

public/assets/color-field.js

@@ -0,0 +1,74 @@
+/*
+ * Farbfelder in den Verwaltungsformularen.
+ *
+ * Eine Farbe tippt man nicht, man wählt sie. Im Editor gibt es dafür längst ein Bedienelement aus
+ * Farbwähler, Textfeld und Palettenliste - in den Formularen unter „Design" und „Einstellungen"
+ * stand bisher nur ein nacktes Textfeld.
+ *
+ * Das Textfeld bleibt die Wahrheit: Es nimmt einen Wert wie `#1a2b3c` **oder** einen Schlüssel aus
+ * der Palette (`@accent`), und das kann ein Farbwähler nicht. Deshalb wird es nicht ersetzt,
+ * sondern ergänzt. Ohne JavaScript bleibt das Feld genau das, was es vorher war.
+ */
+(() => {
+    const felder = [...document.querySelectorAll('input[data-color]')];
+    if (0 === felder.length) {
+        return;
+    }
+
+    for (const feld of felder) {
+        const palette = JSON.parse(feld.dataset.palette || '[]');
+        const reihe = document.createElement('div');
+        reihe.className = 'color-field';
+        feld.parentNode.insertBefore(reihe, feld);
+
+        const waehler = document.createElement('input');
+        waehler.type = 'color';
+        waehler.className = 'color-field-swatch';
+        waehler.setAttribute('aria-label', 'Farbwähler für ' + (feld.labels?.[0]?.textContent.trim() || 'diese Farbe'));
+        // Der Wähler kennt nur Hexwerte. Steht im Feld ein Palettenschlüssel, zeigt er die Farbe,
+        // für die der Schlüssel steht - sonst bliebe er auf Schwarz stehen und sähe falsch aus.
+        const alsHex = wert => {
+            if (/^#[0-9a-f]{6}$/i.test(wert)) {
+                return wert;
+            }
+            const treffer = palette.find(eintrag => '@' + eintrag.key === wert);
+
+            return treffer ? treffer.value : '#000000';
+        };
+        waehler.value = alsHex(feld.value || feld.placeholder || '#000000');
+        waehler.addEventListener('input', () => {
+            feld.value = waehler.value;
+            feld.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+
+        reihe.append(waehler, feld);
+
+        if (palette.length > 0) {
+            const auswahl = document.createElement('select');
+            auswahl.className = 'color-field-palette';
+            auswahl.setAttribute('aria-label', 'Farbe aus der Palette');
+            auswahl.append(new Option('Aus der Palette …', ''));
+            for (const eintrag of palette) {
+                auswahl.append(new Option(`${eintrag.name} (${eintrag.value})`, '@' + eintrag.key));
+            }
+            auswahl.value = palette.some(eintrag => '@' + eintrag.key === feld.value) ? feld.value : '';
+            auswahl.addEventListener('change', () => {
+                if ('' === auswahl.value) {
+                    return;
+                }
+                feld.value = auswahl.value;
+                waehler.value = alsHex(auswahl.value);
+                feld.dispatchEvent(new Event('input', { bubbles: true }));
+            });
+            reihe.append(auswahl);
+        }
+
+        // Tippt jemand von Hand, folgt der Wähler mit - solange der Wert einer ist, den er kennt.
+        feld.addEventListener('input', () => {
+            const hex = alsHex(feld.value);
+            if (waehler.value !== hex) {
+                waehler.value = hex;
+            }
+        });
+    }
+})();

public/assets/design-panel.js

@@ -5,8 +5,9 @@
  * what the server accepts – nothing more, nothing less. Adding a property on the server makes it
  * appear here without touching this file.
  */
-import { devices, effectiveStyle, hoverStyle, setStyle, resetStyleDevice, clearStyle } from './editor-model.js';
-import { openMedia } from './media.js';
+import { devices, effectiveStyle, hoverStyle, scrolledStyle, setStyle, resetStyleDevice, clearStyle, isContainer, relevantProperty } from './editor-model.js';
+import { openMedia, createMediaPreview } from './media.js';
+import { createColorControl } from './color-control.js';
 
 export const GROUPS = {
   text: 'Typografie',
@@ -14,15 +15,19 @@ export const GROUPS = {
   spacing: 'Abstand',
   size: 'Größe',
   border: 'Rahmen',
+  image: 'Bild',
   layout: 'Layout',
   effect: 'Wirkung',
+  menu: 'Menü-Knopf',
+  slider: 'Slider-Steuerung',
 };
 
-const UNITS = ['px', 'rem', 'em', '%', 'vw', 'vh', 'ch'];
+// dvh before vh: on a phone 100vh is taller than the screen, 100dvh is what people mean.
+const UNITS = ['px', 'rem', 'em', '%', 'vw', 'dvh', 'vh', 'svh', 'lvh', 'dvw', 'ch'];
 
 /** Splits "18.5rem" into its number and its unit; an empty value yields empty parts. */
 function splitLength(value) {
-  const match = /^(-?\d+(?:\.\d+)?)(px|rem|em|%|vw|vh|ch)$/.exec(value ?? '');
+  const match = /^(-?\d+(?:\.\d+)?)(px|rem|em|%|vw|vh|ch|dvh|svh|lvh|dvw)$/.exec(value ?? '');
   if (match) return { number: match[1], unit: match[2] };
   return { number: value === '0' ? '0' : '', unit: 'px' };
 }
@@ -42,6 +47,58 @@ export function contrastRatio(foreground, background) {
   return (light + 0.05) / (dark + 0.05);
 }
 
+/**
+ * Makes a number field draggable sideways, the way the Flatsome scrubfield works.
+ *
+ * Typing "24" into a field to see whether 24 is right, then "26", then "22", is three round
+ * trips for one decision. Dragging answers it in one motion. Typing and the arrow keys keep
+ * working untouched - this is added, nothing is taken away.
+ *
+ * Only for mouse and pen: on a touch screen a horizontal drag over a field is how the panel is
+ * scrolled, and stealing that would make the panel unusable on a phone.
+ */
+function makeScrubbable(input, { apply, step, mergeKey }) {
+  const size = 'any' === step || !step ? 1 : Number(step);
+  input.classList.add('scrubbable');
+  let startX = 0, startValue = 0, active = false, moved = false;
+  input.addEventListener('pointerdown', event => {
+    if (0 !== event.button || input.disabled || 'touch' === event.pointerType) return;
+    startX = event.clientX;
+    startValue = '' === input.value ? 0 : Number(input.value);
+    active = Number.isFinite(startValue);
+    moved = false;
+  });
+  input.addEventListener('pointermove', event => {
+    if (!active) return;
+    const distance = event.clientX - startX;
+    // A few pixels of slack, so a plain click still lands in the field to type in.
+    if (!moved && Math.abs(distance) < 3) return;
+    if (!moved) { moved = true; input.setPointerCapture(event.pointerId); }
+    event.preventDefault();
+    // Shift is coarse, Alt is fine - the two speeds a value needs while being judged by eye.
+    const scale = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
+    const raw = startValue + distance * size * scale;
+    const rounded = Math.round(raw / (size * scale)) * (size * scale);
+    const min = '' === input.min ? -Infinity : Number(input.min);
+    const max = '' === input.max ? Infinity : Number(input.max);
+    const value = Math.min(max, Math.max(min, Math.round(rounded * 1000) / 1000));
+    if (String(value) === input.value) return;
+    input.value = String(value);
+    apply(String(value), mergeKey);
+  });
+  const stop = event => {
+    if (!active) return;
+    active = false;
+    if (!moved) return;
+    if (input.hasPointerCapture?.(event.pointerId)) input.releasePointerCapture(event.pointerId);
+    // The drag was one decision, so it closes as one entry in the history.
+    apply(input.value, null);
+  };
+  input.addEventListener('pointerup', stop);
+  input.addEventListener('pointercancel', stop);
+  input.title = 'Zum Ändern seitwärts ziehen. Umschalt grob, Alt fein.';
+}
+
 function element(tag, className, text) {
   const node = document.createElement(tag);
   if (className) node.className = className;
@@ -49,10 +106,28 @@ function element(tag, className, text) {
   return node;
 }
 
-export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, getDevice, getSelection, getHistory }) {
-  const change = mutate => { getHistory().change(mutate); onChange(); };
+export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, getDevice, onDevice, getSelection, getHistory, getAreaKind = () => 'page' }) {
+  /**
+   * The merge key lets a drag collapse into a single undo entry instead of one per pixel.
+   *
+   * `keepPanel` is what makes dragging possible at all: a change normally re-renders this panel,
+   * which replaces the very field the pointer is holding on to. The drag would end after its
+   * first pixel. While scrubbing, the document and the preview are updated and the panel is left
+   * standing; it is redrawn once, when the pointer is released.
+   */
+  const change = (mutate, mergeKey, keepPanel = false) => {
+    getHistory().change(mutate, mergeKey);
+    onChange({ keepPanel });
+  };
+  // Whether the sides of a property move together. This has to outlive the panel: switching the
+  // chain triggers a change, a change re-renders the panel, and a state kept in the button alone
+  // would be gone by the time the next keystroke arrives.
+  const linkedSides = new Map();
   // Lives as long as the editor session, so a look can travel between blocks and pages.
   let clipboard = null;
+  let showAll = false, lastBlockId = null;
+  const openGroups = new Map();
+  const renderedGroups = new Map();
 
   /** Replaces the styling of a block with a copy, or removes it when nothing is given. */
   const applyStyle = (doc, id, style) => {
@@ -71,13 +146,54 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
     }
   };
 
+  /** Short marks for the chips; the full device name is in the title and the accessible name. */
+  const SHORT = { desktop: 'D', tablet: 'T', mobile: 'M' };
+
+  /** Does this device carry an own value for this property - as a plain value or per side? */
+  const hasOwn = (block, deviceName, key, hover) => {
+    const bucket = hover === 'scrolled' ? block?.style?.[deviceName]?.scrolled : hover ? block?.style?.[deviceName]?.hover : block?.style?.[deviceName];
+    const value = bucket?.[key];
+    if (value === undefined) return false;
+    // A per-side property stores an object; an empty one is a leftover, not a value.
+    return value && typeof value === 'object' ? Object.values(value).some(single => single !== '' && single !== undefined) : value !== '';
+  };
+
+  /**
+   * Three chips per option showing which devices carry an own value, and switching to one.
+   *
+   * Until now a single switch above the preview decided which device the whole panel edited,
+   * so "is the heading smaller on the phone" could only be answered by switching and looking.
+   * The chips answer it where the question comes up. Clicking one switches the preview as well:
+   * editing a value for a device you are not looking at is editing blind.
+   */
+  const deviceChips = (block, key, labelText, hover) => {
+    const current = getDevice();
+    const group = element('div', 'device-chips');
+    group.setAttribute('role', 'group');
+    group.setAttribute('aria-label', `Gerät für ${labelText}`);
+    for (const [name, deviceLabel] of Object.entries(devices)) {
+      const own = hasOwn(block, name, key, hover);
+      const chip = element('button', 'device-chip' + (own ? ' device-chip-own' : ''), SHORT[name]);
+      chip.type = 'button';
+      chip.dataset.device = name;
+      chip.setAttribute('aria-pressed', String(name === current));
+      const state = own ? 'eigener Wert' : 'erbt';
+      chip.title = `${deviceLabel} – ${state}`;
+      chip.setAttribute('aria-label', `${labelText} für ${deviceLabel} bearbeiten – ${state}`);
+      chip.addEventListener('click', () => { if (name !== current) onDevice(name); });
+      group.append(chip);
+    }
+    return group;
+  };
+
   /** One labelled row with a reset button that appears as soon as this device has an own value. */
-  const row = (id, labelText, control, { own, inherited, onReset }) => {
+  const row = (id, labelText, control, { own, inherited, onReset, chips }) => {
     const wrap = element('div', 'design-row' + (own ? ' design-own' : ''));
     const head = element('div', 'design-row-head');
     const label = element('label', null, labelText);
     label.htmlFor = id;
     head.append(label);
+    if (chips) head.append(chips);
     if (own) {
       const reset = element('button', 'text-button design-reset-one', '⟲');
       reset.type = 'button';
@@ -91,33 +207,16 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
     return wrap;
   };
 
-  const colorControl = (id, value, apply) => {
-    const wrap = element('div', 'color-control');
-    const picker = document.createElement('input');
-    picker.type = 'color';
-    picker.id = id;
-    picker.value = /^#[0-9a-fA-F]{6}$/.test(value ?? '') ? value : '#000000';
-    const text = document.createElement('input');
-    text.type = 'text';
-    text.className = 'color-text';
-    text.value = value ?? '';
-    text.placeholder = '#1a2b3c';
-    text.setAttribute('aria-label', 'Farbwert oder Palettenname');
-    const palette = document.createElement('select');
-    palette.className = 'color-palette';
-    palette.setAttribute('aria-label', 'Farbe aus der Palette');
-    palette.append(new Option('Palette …', ''));
-    for (const color of schema.colors) palette.append(new Option(`${color.name} (${color.value})`, `@${color.key}`));
-    palette.value = (value ?? '').startsWith('@') ? value : '';
+  const colorControl = (id, value, apply, label, inheritedValue = '') => createColorControl({
+    id, value, label, inheritedValue, colors: schema.colors, onChange: apply,
+    onComplete: () => {
+      const focusedId = document.activeElement?.id;
+      onChange();
+      if (focusedId) document.getElementById(focusedId)?.focus();
+    },
+  });
 
-    picker.addEventListener('input', () => { text.value = picker.value; apply(picker.value); });
-    text.addEventListener('change', () => apply(text.value.trim()));
-    palette.addEventListener('change', () => { if (palette.value) { text.value = palette.value; apply(palette.value); } });
-    wrap.append(picker, text, palette);
-    return wrap;
-  };
-
-  const lengthControl = (id, value, apply, placeholder) => {
+  const lengthControl = (id, value, apply, placeholder, keywords = []) => {
     const wrap = element('div', 'length-control');
     const parts = splitLength(value);
     const number = document.createElement('input');
@@ -130,13 +229,42 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
     unit.setAttribute('aria-label', 'Einheit');
     for (const name of UNITS) unit.append(new Option(name, name));
     unit.value = parts.unit;
-    const push = () => apply(number.value === '' ? '' : `${number.value}${unit.value}`);
-    number.addEventListener('change', push);
+    const push = (_value, mergeKey) => apply(number.value === '' ? '' : `${number.value}${unit.value}`, mergeKey);
+    number.addEventListener('change', () => push());
     unit.addEventListener('change', () => { if (number.value !== '') push(); });
+    makeScrubbable(number, { apply: push, step: 1, mergeKey: `scrub-${id}` });
     wrap.append(number, unit);
+    if (keywords.length) {
+      const mode = document.createElement('select');
+      mode.className = 'length-mode';
+      mode.setAttribute('aria-label', `${schema.properties[id.replace('style-', '')]?.label ?? 'Länge'} Vorgabe`);
+      mode.append(new Option('Eigener Zahlenwert / geerbt', ''));
+      for (const keyword of keywords) mode.append(new Option(keyword === 'none' ? 'Ohne Begrenzung' : 'Automatisch', keyword));
+      mode.value = ['auto', 'none'].includes(value) ? value : '';
+      number.hidden = unit.hidden = mode.value !== '';
+      mode.addEventListener('change', () => apply(mode.value));
+      wrap.prepend(mode);
+    }
     return wrap;
   };
 
+  /**
+   * The column shares of a row, "2 1" for two thirds and a third. Dragging the border between two
+   * columns in the preview writes the same value; the field is for anyone who prefers numbers.
+   */
+  const fractionsControl = (id, value, apply) => {
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.id = id;
+    input.value = value ?? '';
+    input.placeholder = 'gleich breit';
+    input.pattern = String.raw`\d{1,3}(\.\d)?( \d{1,3}(\.\d)?){0,11}`;
+    input.setAttribute('inputmode', 'decimal');
+    input.title = 'Anteile je Spalte, durch Leerzeichen getrennt: 2 1 oder 25 50 25';
+    input.addEventListener('change', () => { if (input.checkValidity()) apply(input.value.trim()); });
+    return input;
+  };
+
   const numberControl = (id, value, property, apply) => {
     const wrap = element('div', 'number-control');
     const slider = document.createElement('input');
@@ -153,6 +281,11 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
     slider.addEventListener('input', () => { exact.value = slider.value; });
     slider.addEventListener('change', () => apply(slider.value));
     exact.addEventListener('change', () => { slider.value = exact.value; apply(exact.value); });
+    makeScrubbable(exact, {
+      apply: (value, mergeKey) => { slider.value = value; apply(value, mergeKey); },
+      step: property.step,
+      mergeKey: `scrub-${id}`,
+    });
     wrap.append(slider, exact);
     return wrap;
   };
@@ -177,35 +310,110 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
     return select;
   };
 
-  /** Four inputs for padding, margin, border width and corners. */
+  /**
+   * Padding, margin, border width and corners as a box.
+   *
+   * Four stacked fields labelled "Oben, Rechts, Unten, Links" made you read to find out which
+   * edge you were setting. In a box each field sits on the edge it controls, so the position is
+   * the label. The chain in the middle keeps all four equal, which is what most of them are.
+   *
+   * The unit stays a single choice for the whole property, because four unit menus do not fit a
+   * 240-pixel panel. Sides that already carry different units are shown as "gemischt" and are
+   * left alone until a unit is actually picked - a stored 2rem is not silently turned into 2px.
+   */
   const sideControl = (key, block, deviceName, property) => {
-    const grid = element('div', 'side-control');
-    const parts = property.corners ? schema.corners : schema.sides;
-    for (const [side, label] of Object.entries(parts)) {
-      const cell = element('div', 'side-cell');
-      const id = `style-${key}-${side}`;
-      const caption = element('label', null, label);
-      caption.htmlFor = id;
+    const corners = Boolean(property.corners);
+    const parts = corners ? schema.corners : schema.sides;
+    const names = Object.keys(parts);
+    const wrap = element('div', 'side-wrap');
+    const box = element('div', 'side-box' + (corners ? ' side-box-corners' : ''));
+
+    // What is stored right now, per side, split into number and unit.
+    const stored = Object.fromEntries(names.map(side => {
       const current = effectiveStyle(block, deviceName, key, side);
-      const control = lengthControl(id, current.source === deviceName ? current.value : '', value => {
-        change(doc => setStyle(doc, getSelection(), deviceName, key, value, { side }));
-      }, current.value ? String(current.value) : 'erbt');
-      if (current.value && current.source !== deviceName) control.classList.add('is-inherited');
-      cell.append(caption, control);
-      grid.append(cell);
-    }
-    const all = element('button', 'text-button side-all', 'Alle Seiten gleich setzen');
-    all.type = 'button';
-    all.addEventListener('click', () => {
-      const first = grid.querySelector('input[type=number]');
-      const unit = grid.querySelector('select');
-      if (first?.value === '') return;
+      const own = current.source === deviceName ? current.value : '';
+      return [side, { own, inherited: current.value, parts: splitLength(own) }];
+    }));
+    const usedUnits = [...new Set(names.map(side => stored[side].own ? stored[side].parts.unit : null).filter(Boolean))];
+    const commonUnit = 1 === usedUnits.length ? usedUnits[0] : '';
+
+    const unit = document.createElement('select');
+    unit.id = `style-${key}-unit`;
+    unit.className = 'side-unit-select';
+    unit.setAttribute('aria-label', `Einheit für ${property.label}`);
+    if (usedUnits.length > 1) unit.append(new Option('gemischt', ''));
+    for (const name of UNITS) unit.append(new Option(name, name));
+    unit.value = commonUnit || 'px';
+
+    const linked = element('button', 'side-link', '⛓');
+    linked.type = 'button';
+    // Off to begin with. It replaces the old "Alle Seiten gleich setzen" button, and that was a
+    // deliberate act: typing into one field must not quietly rewrite the three others.
+    linked.setAttribute('aria-pressed', String(linkedSides.get(key) ?? false));
+    linked.title = 'Alle Seiten gemeinsam ändern';
+    linked.setAttribute('aria-label', `Alle Seiten von ${property.label} gemeinsam ändern`);
+
+    /** The unit a side should be written with: its own, else the chosen one. */
+    const unitFor = side => (stored[side].own ? stored[side].parts.unit : null) ?? (unit.value || 'px');
+
+    const write = (side, number, mergeKey) => {
+      const targets = linkedSides.get(key) ? names : [side];
       change(doc => {
-        for (const side of Object.keys(parts)) setStyle(doc, getSelection(), deviceName, key, `${first.value}${unit.value}`, { side });
+        for (const target of targets) {
+          setStyle(doc, getSelection(), deviceName, key, '' === number ? '' : `${number}${unitFor(target)}`, { side: target });
+        }
+      }, mergeKey, Boolean(mergeKey));
+    };
+
+    for (const side of names) {
+      const id = `style-${key}-${side}`;
+      const field = document.createElement('input');
+      field.type = 'number';
+      field.step = 'any';
+      field.id = id;
+      field.className = 'side-field';
+      field.value = stored[side].parts.number;
+      field.placeholder = stored[side].inherited ? String(stored[side].inherited) : 'erbt';
+      field.setAttribute('aria-label', `${property.label} ${parts[side]}`);
+      if (stored[side].inherited && !stored[side].own) field.classList.add('is-inherited');
+      field.addEventListener('change', () => write(side, field.value, null));
+      makeScrubbable(field, { apply: (value, mergeKey) => write(side, value, mergeKey), step: 1, mergeKey: `scrub-${id}` });
+      const cell = element('div', `side-cell side-${side}`);
+      cell.append(field);
+      box.append(cell);
+    }
+    box.append(linked);
+
+    linked.addEventListener('click', () => {
+      const now = !linkedSides.get(key);
+      linkedSides.set(key, now);
+      linked.setAttribute('aria-pressed', String(now));
+      if (!now) return;
+      // Switching the chain on levels the sides - otherwise it would claim a state the box does
+      // not show. The value taken is the first one that exists: starting from an empty top field
+      // would wipe the sides that do have a value.
+      const set = names.map(side => stored[side].parts.number).find(number => '' !== number);
+      if (undefined === set) return;
+      change(doc => {
+        for (const target of names) setStyle(doc, getSelection(), deviceName, key, `${set}${unit.value || 'px'}`, { side: target });
       });
     });
-    const wrap = element('div', 'side-wrap');
-    wrap.append(grid, all);
+
+    unit.addEventListener('change', () => {
+      if ('' === unit.value) return;
+      change(doc => {
+        for (const side of names) {
+          const number = stored[side].own ? stored[side].parts.number : '';
+          if ('' !== number) setStyle(doc, getSelection(), deviceName, key, `${number}${unit.value}`, { side });
+        }
+      });
+    });
+
+    const unitRow = element('div', 'side-unit');
+    const unitLabel = element('label', null, 'Einheit');
+    unitLabel.htmlFor = unit.id;
+    unitRow.append(unitLabel, unit);
+    wrap.append(box, unitRow);
     return wrap;
   };
 
@@ -239,15 +447,18 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
 
   const mediaControl = (key, value, apply) => {
     const wrap = element('div', 'media-control');
-    const status = element('p', 'media-chosen', value ? `Bild gewählt (${String(value).slice(0, 8)}…)` : 'Kein Bild gewählt');
-    const choose = element('button', 'secondary', value ? 'Anderes Bild wählen' : 'Bild aus der Mediathek');
+    const hasImage = Boolean(value && value !== 'none');
+    const preview = createMediaPreview({ mediaId: hasImage ? value : '' });
+    const choose = element('button', 'secondary', hasImage ? 'Anderes Bild wählen' : 'Bild aus der Mediathek');
     choose.type = 'button';
+    choose.id = `style-${key}`; choose.setAttribute('aria-label', choose.textContent);
     choose.addEventListener('click', () => openMedia({ onChoose: items => { if (items.length) apply(items[0].id); } }));
-    wrap.append(status, choose);
-    if (value) {
+    wrap.append(preview.element, choose);
+    if (hasImage) {
       const remove = element('button', 'text-button danger-text', 'Bild entfernen');
       remove.type = 'button';
-      remove.addEventListener('click', () => apply(''));
+      remove.title = 'Hintergrundbild für dieses Gerät entfernen. Die Datei bleibt in der Mediathek.';
+      remove.addEventListener('click', () => { apply('none'); document.getElementById(choose.id)?.focus(); });
       wrap.append(remove);
     }
     return wrap;
@@ -255,20 +466,62 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
 
   /** Renders the whole panel for one block into the given container. */
   return function render(panel) {
+    // Read the previous nodes directly; a queued toggle event can be lost during a redraw.
+    for (const [key, details] of renderedGroups) openGroups.set(key, details.open);
+    renderedGroups.clear();
     const block = getBlock();
     const deviceName = getDevice();
     if (!block) return;
+    if (lastBlockId !== block.id) { showAll = false; lastBlockId = block.id; }
 
     const scope = element('p', 'design-scope');
     scope.textContent = `${devices[deviceName]} · ${deviceName === 'desktop' ? 'Basis für alle Geräte' : deviceName === 'tablet' ? 'bis 1024 px, gilt auch für Mobil' : 'bis 767 px'}`;
     panel.append(scope);
     panel.append(element('p', 'field-help', 'Leere Felder erben vom größeren Gerät und zuletzt vom Theme. Werte mit eigenem Wert sind hervorgehoben und lassen sich einzeln zurücksetzen.'));
+    const all = element('button', 'secondary design-context-toggle', showAll ? 'Passende Eigenschaften anzeigen' : 'Alle Eigenschaften anzeigen');
+    all.type = 'button'; all.setAttribute('aria-pressed', String(showAll));
+    all.addEventListener('click', () => { showAll = !showAll; onChange(); panel.querySelector('.design-context-toggle')?.focus(); });
+    panel.append(all);
 
-    for (const [group, groupLabel] of Object.entries(GROUPS)) {
-      const properties = Object.entries(schema.properties).filter(([, p]) => p.group === group);
+    // A filter over the properties. With more than ninety of them across eight collapsed groups,
+    // "where is the border thickness" is a fair question - so it can be typed instead of hunted.
+    const search = element('input', 'design-search');
+    search.type = 'search';
+    search.id = 'design-search';
+    search.placeholder = 'Eigenschaft suchen, z. B. Rahmen …';
+    const searchLabel = element('label', 'search-label', 'Eigenschaft suchen');
+    searchLabel.htmlFor = search.id;
+    const found = element('p', 'field-help');
+    search.addEventListener('input', () => {
+      const term = search.value.trim().toLowerCase();
+      let matches = 0;
+      for (const groupElement of panel.querySelectorAll('.design-group')) {
+        let visible = 0;
+        for (const entry of groupElement.querySelectorAll('.design-row, .side-wrap, .design-group-label')) {
+          // A per-side control is a heading plus a block of fields; they travel together.
+          const text = (entry.classList.contains('side-wrap') ? entry.previousElementSibling?.textContent : entry.textContent) ?? '';
+          const hit = '' === term || text.toLowerCase().includes(term);
+          entry.hidden = !hit;
+          if (hit) visible++;
+        }
+        groupElement.hidden = '' !== term && 0 === visible;
+        if (!groupElement.hidden && '' !== term) groupElement.open = true;
+        matches += visible;
+      }
+      found.textContent = '' === term ? '' : (0 === matches ? 'Nichts gefunden. Unter „Erweitert“ gibt es außerdem eigenes CSS für dieses Element.' : `${matches} Treffer.`);
+    });
+    panel.append(searchLabel, search, found);
+
+    const priority = ['image', 'gallery', 'logos'].includes(block.type) ? ['image', 'size', 'spacing'] : isContainer(block) ? ['layout', 'size', 'spacing', 'background'] : ['spacer', 'divider', 'embed'].includes(block.type) ? ['size', 'spacing'] : ['text', 'size', 'spacing'];
+    const orderedGroups = [...new Set([...priority, ...Object.keys(GROUPS)])];
+    for (const group of orderedGroups) {
+      const groupLabel = GROUPS[group];
+      const properties = Object.entries(schema.properties).filter(([key, p]) => p.group === group && (showAll || relevantProperty(block, key, p)));
       if (properties.length === 0) continue;
       const details = element('details', 'design-group');
-      if (group === 'text' || group === 'spacing') details.open = true;
+      const groupKey = `${block.type}:${group}`;
+      details.open = openGroups.get(groupKey) ?? (group === priority[0] || group === 'spacing');
+      renderedGroups.set(groupKey, details);
       details.append(element('summary', null, groupLabel));
       const body = element('div', 'design-group-body');
 
@@ -276,7 +529,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
         const id = `style-${key}`;
         const current = effectiveStyle(block, deviceName, key);
         const own = block.style?.[deviceName]?.[key] !== undefined;
-        const apply = value => change(doc => setStyle(doc, getSelection(), deviceName, key, value));
+        const apply = (value, mergeKey) => change(doc => setStyle(doc, getSelection(), deviceName, key, value), mergeKey, Boolean(mergeKey));
         const onReset = () => change(doc => setStyle(doc, getSelection(), deviceName, key, ''));
         const inheritedText = current.value !== undefined && !own
           ? `Erbt ${describe(property, current.value)} von ${devices[current.source]}`
@@ -284,25 +537,33 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
 
         let control;
         if (property.sides || property.corners) {
-          body.append(element('p', 'design-group-label', property.label), sideControl(key, block, deviceName, property));
+          const sideHead = element('div', 'design-row-head design-side-head');
+          sideHead.append(element('p', 'design-group-label', property.label), deviceChips(block, key, property.label, false));
+          body.append(sideHead, sideControl(key, block, deviceName, property));
           continue;
         }
-        if (property.type === 'color') control = colorControl(id, own ? current.value : '', apply);
-        else if (property.type === 'length' || property.type === 'length-auto') control = lengthControl(id, own ? current.value : '', apply, current.value ? String(current.value) : 'erbt');
+        if (property.type === 'color') control = colorControl(id, own ? current.value : '', apply, property.label, current.value || '');
+        else if (property.type === 'length' || property.type === 'length-auto') control = lengthControl(id, own ? current.value : '', apply, current.value ? String(current.value) : 'erbt', property.type === 'length-auto' ? (key.startsWith('max') ? ['none'] : ['auto']) : []);
         else if (property.type === 'number') control = numberControl(id, own ? current.value : '', property, apply);
         else if (property.type === 'choice') control = choiceControl(id, own ? current.value : '', property, apply, inheritedText);
         else if (property.type === 'font') control = fontControl(id, own ? current.value : '', apply, inheritedText);
-        else if (property.type === 'media') control = mediaControl(key, own ? current.value : '', apply);
+        else if (property.type === 'media') control = mediaControl(key, current.value || '', apply);
+        else if (property.type === 'fractions') control = fractionsControl(id, own ? current.value : '', apply);
         else continue;
 
-        body.append(row(id, property.label, control, { own, inherited: inheritedText, onReset }));
+        body.append(row(id, property.label, control, { own, inherited: inheritedText, onReset, chips: deviceChips(block, key, property.label, false) }));
 
         if (schema.hoverable.includes(key)) {
           const hoverId = `${id}-hover`;
           const hoverValue = hoverStyle(block, deviceName, key);
-          const hoverApply = value => change(doc => setStyle(doc, getSelection(), deviceName, key, value, { hover: true }));
+          let hoverInherited = current.value || '';
+          for (const name of Object.keys(devices)) {
+            if (name === deviceName) break;
+            hoverInherited = hoverStyle(block, name, key) ?? hoverInherited;
+          }
+          const hoverApply = (value, mergeKey) => change(doc => setStyle(doc, getSelection(), deviceName, key, value, { hover: true }), mergeKey, Boolean(mergeKey));
           const hoverControl = property.type === 'color'
-            ? colorControl(hoverId, hoverValue ?? '', hoverApply)
+            ? colorControl(hoverId, hoverValue ?? '', hoverApply, `${property.label} beim Überfahren`, hoverInherited)
             : property.type === 'number'
               ? numberControl(hoverId, hoverValue ?? '', property, hoverApply)
               : lengthControl(hoverId, hoverValue ?? '', hoverApply, 'kein Hover');
@@ -310,6 +571,28 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
             own: hoverValue !== undefined,
             inherited: 'Kein eigener Hover-Wert',
             onReset: () => hoverApply(''),
+            chips: deviceChips(block, key, `${property.label} beim Überfahren`, true),
+          }));
+        }
+
+        // The scrolled page - only in the header, the one area that changes with scrolling.
+        if (getAreaKind() === 'header' && (schema.scrollable ?? []).includes(key)) {
+          const scrolledId = `${id}-scrolled`;
+          const scrolledValue = scrolledStyle(block, deviceName, key);
+          let scrolledInherited = current.value || '';
+          for (const name of Object.keys(devices)) {
+            if (name === deviceName) break;
+            scrolledInherited = scrolledStyle(block, name, key) ?? scrolledInherited;
+          }
+          const scrolledApply = (value, mergeKey) => change(doc => setStyle(doc, getSelection(), deviceName, key, value, { scrolled: true }), mergeKey, Boolean(mergeKey));
+          const scrolledControl = property.type === 'color'
+            ? colorControl(scrolledId, scrolledValue ?? '', scrolledApply, `${property.label} beim Scrollen`, scrolledInherited)
+            : numberControl(scrolledId, scrolledValue ?? '', property, scrolledApply);
+          body.append(row(scrolledId, `${property.label} beim Scrollen`, scrolledControl, {
+            own: scrolledValue !== undefined,
+            inherited: 'Gilt, sobald die Seite um mehr als 40 px gescrollt ist. Vorher gilt der normale Wert - für einen transparenten Kopf dort #ffffff00 eintragen.',
+            onReset: () => scrolledApply(''),
+            chips: deviceChips(block, key, `${property.label} beim Scrollen`, 'scrolled'),
           }));
         }
       }
@@ -368,6 +651,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
   };
 
   function describe(property, value) {
+    if (property.type === 'media') return value === 'none' ? 'Kein Bild' : 'Bild aus der Mediathek';
     if (property.type === 'choice') return property.values[value] ?? value;
     return String(value);
   }

public/assets/design-tokens.json

@@ -10,7 +10,8 @@
       "iconcard",
       "stat",
       "quote",
-      "cta"
+      "cta",
+      "button"
     ],
     "values": {
       "left": [

public/assets/design.css

@@ -89,7 +89,7 @@
 .kant .d-tablet-radius-small{border-radius:8px}
 .kant .d-tablet-radius-large{border-radius:24px}
 }
-@media(max-width:650px){
+@media(max-width:767px){
 .kant .d-mobile-align-left{text-align:left;margin-inline:0}
 .kant .d-mobile-align-center{text-align:center;margin-inline:auto}
 .kant .d-mobile-align-right{text-align:right;margin-inline:auto 0}

public/assets/editor-model.js

@@ -1,19 +1,103 @@
-export const labels = { section: 'Sektion', row: 'Zeile', column: 'Spalte', heading: 'Überschrift', text: 'Text', image: 'Bild', button: 'Button', gallery: 'Galerie', postlist: 'Beitragsliste', iconcard: 'Symbolkarte', stat: 'Kennzahl', quote: 'Kundenstimme', logos: 'Logoleiste', cta: 'Aufruf-Band', contact: 'Kontaktdaten', divider: 'Trennlinie', spacer: 'Abstand', accordion: 'Akkordeon', accordionitem: 'Akkordeon-Eintrag', tabs: 'Tabs', tabitem: 'Tab', form: 'Formular', breadcrumb: 'Brotkrumen', menu: 'Navigation', partialref: 'Verknüpfte Sektion', embed: 'Externer Inhalt' };
-export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H', text: 'T', image: '▧', button: '↗', gallery: '▦', postlist: '☷', iconcard: '◈', stat: '№', quote: '❝', logos: '⬚', cta: '◉', contact: '✆', divider: '—', spacer: '⇳', accordion: '⌵', accordionitem: '·', tabs: '▭', tabitem: '▫', form: '✉', breadcrumb: '⟩', menu: '☰', partialref: '⧉', embed: '⬓' };
+export const labels = { section: 'Sektion', row: 'Zeile', column: 'Spalte', heading: 'Überschrift', text: 'Text', image: 'Bild', button: 'Button', gallery: 'Galerie', postlist: 'Beitragsliste', postnav: 'Beitragsnavigation', iconcard: 'Symbolkarte', stat: 'Kennzahl', quote: 'Kundenstimme', logos: 'Logoleiste', cta: 'Aufruf-Band', contact: 'Kontaktdaten', divider: 'Trennlinie', spacer: 'Abstand', accordion: 'Akkordeon', accordionitem: 'Akkordeon-Eintrag', tabs: 'Tabs', tabitem: 'Tab', form: 'Formular', breadcrumb: 'Brotkrumen', menu: 'Navigation', partialref: 'Verknüpfte Sektion', embed: 'Externer Inhalt', icon: 'Symbol', progress: 'Fortschritt', slider: 'Slider', legal: 'Rechtszeile', social: 'Soziale Profile', html: 'Eigenes HTML' };
+export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H', text: 'T', image: '▧', button: '↗', gallery: '▦', postlist: '☷', postnav: '⇄', iconcard: '◈', stat: '№', quote: '❝', logos: '⬚', cta: '◉', contact: '✆', divider: '—', spacer: '⇳', accordion: '⌵', accordionitem: '·', tabs: '▭', tabitem: '▫', form: '✉', breadcrumb: '⟩', menu: '☰', partialref: '⧉', legal: '§', embed: '⬓', icon: '◆', progress: '▰', slider: '⇄', social: '⚭', html: '</>' };
 // A namespaced type belongs to a plugin this installation may not have. Such blocks stay in the
 // document, stay selectable and movable, but the editor never edits or fills them.
+/**
+ * The toolbox, grouped the way the page is actually built. A flat list of thirty-one types said
+ * nothing about which of them belong together or where they may go; the first group is the
+ * scaffolding, the rest is what goes inside it.
+ */
+export const CATEGORIES = [
+  { name: 'Aufbau', hint: 'Sektion → Zeile → Spalte. Der Inhalt kommt in die Spalte.', types: ['section', 'row', 'column'] },
+  { name: 'Inhalt', types: ['heading', 'text', 'image', 'button', 'icon', 'divider', 'spacer'] },
+  { name: 'Bausteine', types: ['iconcard', 'stat', 'quote', 'cta', 'contact', 'social', 'logos', 'progress'] },
+  { name: 'Gruppen', types: ['gallery', 'accordion', 'accordionitem', 'tabs', 'tabitem', 'slider'] },
+  { name: 'Seite und Daten', types: ['postlist', 'postnav', 'breadcrumb', 'menu', 'form', 'legal', 'partialref', 'embed', 'html'] },
+];
+
+/** How many columns a row can be added with. */
+export const ROW_COLUMNS = [2, 3, 4];
+
+/**
+ * Why a type cannot be added where the selection currently is. The toolbox says this instead of
+ * simply greying a button out: a rule you are told is one you learn, a button that merely stops
+ * working is one you keep pressing.
+ */
+export function whyNot(type) {
+  if (REQUIRE[type]) return `${labels[type]}: gehört in ${REQUIRE[type].map(parent => labels[parent]).join(' oder ')}. Wähle dort zuerst ein Element aus.`;
+  if (ROOT_NEEDS_CONTAINER.includes(type)) return `${labels[type]}: gehört in eine Sektion. Füge zuerst eine Sektion ein oder wähle eine aus.`;
+  return `${labels[type]}: passt an dieser Stelle nicht. Wähle ein anderes Element aus.`;
+}
+
 export const PLUGIN_TYPE = /^[a-z][a-z0-9]{1,30}\.[a-z][a-z0-9-]{1,40}$/;
+/**
+ * Die Bausteine der aktiven Plugins, vom Server mit dem Dokument geliefert. Sie bekommen
+ * Beschriftung, Symbol, Vorgaben und eine eigene Gruppe im Werkzeugkasten; was das Dokument
+ * enthält, aber hier nicht steht, bleibt ein Baustein einer fehlenden Erweiterung.
+ */
+export const PLUGIN_BLOCKS = {};
+/** Die Seitenvorlagen der aktiven Plugins: id => {label, blocks}. */
+export const PLUGIN_PRESETS = {};
+export function registerPlugins(list, presets = []) {
+  for (const key of Object.keys(PLUGIN_BLOCKS)) { delete PLUGIN_BLOCKS[key]; delete labels[key]; delete icons[key]; }
+  for (const key of Object.keys(PLUGIN_PRESETS)) delete PLUGIN_PRESETS[key];
+  for (const preset of presets || []) if (typeof preset?.id === 'string' && Array.isArray(preset.blocks)) PLUGIN_PRESETS[preset.id] = preset;
+  const types = [];
+  for (const definition of list || []) {
+    if (!PLUGIN_TYPE.test(definition?.type || '')) continue;
+    PLUGIN_BLOCKS[definition.type] = definition;
+    labels[definition.type] = definition.label;
+    icons[definition.type] = definition.icon || '⬡';
+    types.push(definition.type);
+  }
+  const group = CATEGORIES.find(category => category.name === 'Erweiterungen');
+  if (group) group.types = types;
+  else if (types.length) CATEGORIES.push({ name: 'Erweiterungen', hint: 'Bausteine der eingeschalteten Plugins.', types });
+}
+export const pluginDefinition = block => PLUGIN_BLOCKS[block?.type] ?? null;
 export const isPluginBlock = block => typeof block?.type === 'string' && PLUGIN_TYPE.test(block.type);
 export const blockLabel = block => labels[block?.type] ?? (isPluginBlock(block) ? `Baustein ${block.type}` : 'Unbekannt');
 export const blockIcon = block => icons[block?.type] ?? '❔';
-export const isContainer = block => ['section', 'row', 'column', 'gallery', 'logos', 'accordion', 'accordionitem', 'tabs', 'tabitem'].includes(block?.type);
+export const isContainer = block => ['section', 'row', 'column', 'gallery', 'logos', 'accordion', 'accordionitem', 'tabs', 'tabitem', 'slider'].includes(block?.type) || PLUGIN_BLOCKS[block?.type]?.container === true;
 // Nothing may be dropped into a plugin block: the core does not know its layout contract.
 // Containers that accept only one kind of child, mirrored by the server side validator.
-export const ONLY_CHILD = { gallery: 'image', logos: 'image', accordion: 'accordionitem', tabs: 'tabitem' };
-export const canContain = (parent, block) => isContainer(parent) && !isPluginBlock(parent)
-  && (ONLY_CHILD[parent.type] === undefined || ONLY_CHILD[parent.type] === block.type)
-  && (block.type !== 'accordionitem' || parent.type === 'accordion')
-  && (block.type !== 'tabitem' || parent.type === 'tabs');
+// ---------------------------------------------------------------------------------------------
+// What may sit inside what.
+//
+// Three rules, the same three the Flatsome UX Builder uses, because they cover the cases and
+// because they are the ones people already have in their hands:
+//
+//   ALLOW    a container that takes only these children and nothing else
+//   REQUIRE  a block that exists only inside one of these parents
+//   ROOT_NEEDS_CONTAINER
+//            a block that may sit in any container but not loose at the top of a document
+//
+// Until now a row took anything - a heading could land directly in it, next to the columns -
+// and a column could stand anywhere. That is why the toolbox offered rows and columns out of
+// nowhere. The structure the editor has always described in its own hint text is
+// section -> row -> column -> content, and these rules are that sentence made binding.
+// ---------------------------------------------------------------------------------------------
+
+/** Containers that take one kind of child and nothing else. */
+export const ALLOW = { row: ['column'], gallery: ['image'], logos: ['image'], accordion: ['accordionitem'], tabs: ['tabitem'] };
+/**
+ * Blocks that exist only inside one of these parents. A column belongs to a row - and, as a
+ * single one, directly to a section: that is how a button or a short text gets centred and
+ * narrowed without a one-column row around it. Umut asked for exactly that.
+ */
+export const REQUIRE = { column: ['row', 'section'], accordionitem: ['accordion'], tabitem: ['tabs'] };
+/**
+ * A row is not refused by any particular parent - a tab panel or an accordion entry may well
+ * hold one - but it is not a thing a document starts with. At the top level a page begins with
+ * a section, and that is where a row belongs.
+ */
+export const ROOT_NEEDS_CONTAINER = ['row'];
+
+// Ein Plugin-Container nimmt auf, was sein Manifest erlaubt; ein Plugin ohne Definition nichts.
+const allowedIn = parent => PLUGIN_BLOCKS[parent?.type] ? (PLUGIN_BLOCKS[parent.type].children ?? undefined) : ALLOW[parent?.type];
+export const canContain = (parent, block) => isContainer(parent) && (!isPluginBlock(parent) || PLUGIN_BLOCKS[parent.type]?.container === true)
+  && (allowedIn(parent) === undefined || allowedIn(parent).includes(block?.type))
+  && (block?.type === undefined || REQUIRE[block.type] === undefined || REQUIRE[block.type].includes(parent.type));
 export const clone = value => structuredClone(value);
 
 export function locate(blocks, id, parent = null) {
@@ -29,6 +113,11 @@ export function locate(blocks, id, parent = null) {
 export function createBlock(type) {
   if (!Object.hasOwn(labels, type)) throw new Error('Unbekannter Block.');
   const block = { id: `b_${crypto.randomUUID().replaceAll('-', '')}`, type };
+  if (PLUGIN_BLOCKS[type]) {
+    block.props = Object.fromEntries(Object.entries(PLUGIN_BLOCKS[type].props || {}).map(([key, schema]) => [key, schema.default ?? '']));
+    if (PLUGIN_BLOCKS[type].container) block.children = [];
+    return block;
+  }
   if (isContainer(block)) block.children = [];
   if (type === 'accordion') block.children = [createBlock('accordionitem')];
   // A single tab is not a tab group, and the script needs at least two to enhance anything.
@@ -36,7 +125,11 @@ export function createBlock(type) {
   if (type === 'heading') block.props = { text: 'Deine neue Überschrift', level: 2 };
   if (type === 'text') block.props = { text: 'Hier beginnt dein neuer Inhalt.' };
   if (type === 'button') block.props = { text: 'Mehr erfahren', href: '/' };
-  if (type === 'postlist') block.props = { count: 3, category: '', tag: '' };
+  if (type === 'postlist') block.props = { count: 3, category: '', tag: '', layout: 'karten' };
+  if (type === 'postnav') block.props = { previousLabel: 'Vorheriger Beitrag', nextLabel: 'Nächster Beitrag' };
+  if (type === 'legal') block.props = { label: 'Rechtliches' };
+  // Leer eingefuegt: nichts steht auf der Seite, bis jemand Code eintraegt.
+  if (type === 'html') block.props = { html: '' };
   if (type === 'iconcard') block.props = { icon: 'check', title: 'Deine Leistung', text: 'Beschreibe hier kurz, worum es geht.', href: '' };
   if (type === 'stat') block.props = { value: '15+', label: 'Jahre Erfahrung' };
   if (type === 'quote') block.props = { text: 'Ein Satz, den eine Kundin oder ein Kunde über dich gesagt hat.', author: 'Name', role: '', rating: 5 };
@@ -46,31 +139,78 @@ export function createBlock(type) {
   if (type === 'accordionitem') block.props = { title: 'Eine Frage', open: false };
   if (type === 'tabitem') block.props = { title: 'Neuer Tab' };
   if (type === 'form') block.props = { form: '' };
-  if (type === 'menu') block.props = { slot: 'header' };
+  if (type === 'menu') block.props = { slot: 'header', layout: 'horizontal' };
   if (type === 'partialref') block.props = { partial: '' };
   // An embed starts empty and blocked: no address, so nothing loads before someone enters one.
   if (type === 'embed') block.props = { group: 'external', title: '', provider: '', url: '', hint: '', height: 400 };
+  if (type === 'icon') block.props = { icon: 'star', size: 48, decorative: true, label: '', href: '' };
+  if (type === 'progress') block.props = { label: 'Fortschritt', value: 70, showValue: true };
+  // Welche Profile es gibt, steht in den Einstellungen; der Block bringt nur die Darstellung mit.
+  if (type === 'social') block.props = { size: 24, shape: 'plain', layout: 'horizontal', labels: false, networks: [], newTab: true };
+  if (type === 'slider') block.props = { desktopVisible: 3, tabletVisible: 2, mobileVisible: 1, snap: true, dots: true, autoplay: 0 };
   if (type === 'image') block.props = { src: '/assets/image-placeholder.svg', alt: 'Abstrakte Landschaft als Platzhalter', decorative: false, width: 1000, height: 600 };
   return block;
 }
 
-export function insertBlock(document, type, selected) {
-  const block = createBlock(type);
+/** Raises the document schema to the version that knows this block type. */
+export function upgradeForType(document, type) {
   if (type === 'gallery') upgradeDocument(document, 3);
-  if (type === 'postlist') upgradeDocument(document, 5);
+  if (PLUGIN_BLOCKS[type]) upgradeDocument(document, 4);
+  // Die Fassung, die der Server fuer die Eigenschaften verlangt, mit denen createBlock den
+  // Baustein anlegt - nicht die, in der der Typ zuerst auftauchte. Sonst steht ein neuer
+  // Baustein sofort mit 422 in der Vorschau und laesst sich nicht speichern.
+  if (type === 'postlist') upgradeDocument(document, 18);
+  if (type === 'postnav') upgradeDocument(document, 18);
+  if (type === 'legal') upgradeDocument(document, 19);
+  if (type === 'html') upgradeDocument(document, 24);
   if (['iconcard', 'stat', 'quote', 'logos', 'cta', 'contact', 'divider', 'spacer', 'accordion', 'accordionitem'].includes(type)) upgradeDocument(document, 6);
   if (type === 'tabs' || type === 'tabitem') upgradeDocument(document, 7);
   if (type === 'form') upgradeDocument(document, 8);
   if (type === 'breadcrumb') upgradeDocument(document, 9);
-  if (type === 'menu' || type === 'partialref') upgradeDocument(document, 11);
+  if (type === 'menu') upgradeDocument(document, 16);
+  if (type === 'partialref') upgradeDocument(document, 11);
   if (type === 'embed') upgradeDocument(document, 14);
-  let target = locate(document.blocks, selected);
-  if (target?.block.type === 'gallery' && type !== 'image') { target.siblings.splice(target.index + 1, 0, block); return block.id; }
-  if (target?.parent?.type === 'gallery' && type !== 'image') target = locate(document.blocks, target.parent.id);
-  if (!target) document.blocks.push(block);
-  else if (canContain(target.block, block)) (target.block.children ??= []).push(block);
-  else target.siblings.splice(target.index + 1, 0, block);
-  return block.id;
+  if (type === 'icon' || type === 'progress') upgradeDocument(document, 15);
+  if (type === 'slider') upgradeDocument(document, 17);
+  if (type === 'social') upgradeDocument(document, 23);
+}
+
+/**
+ * Where clicking a type in the toolbox would put it - without putting it anywhere.
+ *
+ * Asking and doing used to be the same step, so nothing could tell beforehand whether a type
+ * fits at all. The toolbox needs exactly that answer to grey out what does not belong here, and
+ * the answer has to be the one the click will actually follow, or the two drift apart.
+ *
+ * The search goes from the inside out: into the selection when it is a container that takes
+ * this type, otherwise next to it, climbing until some ancestor accepts it, and finally the top
+ * level. Returns null when the type cannot go anywhere from this selection.
+ *
+ * @return {{parentId: string|null, index: number}|null}
+ */
+export function insertionTarget(document, selected, type) {
+  // A section starts a page area. Explicit insertion points and drag/drop can still nest it.
+  if (type === 'section') {
+    const top = blockPath(document.blocks, selected)[0];
+    return { parentId: null, index: top ? document.blocks.findIndex(block => block.id === top.id) + 1 : document.blocks.length };
+  }
+  const probe = { type };
+  let item = locate(document.blocks, selected);
+  // Content belongs to a chosen entry. Do not silently place it outside the accordion.
+  if (item?.block.type === 'accordion' && type !== 'accordionitem') return null;
+  if (item && canContain(item.block, probe)) return { parentId: item.block.id, index: (item.block.children ?? []).length };
+  while (item) {
+    const parentId = item.parent?.id ?? null;
+    if (dropList(document, parentId, probe)) return { parentId, index: item.index + 1 };
+    item = item.parent ? locate(document.blocks, item.parent.id) : null;
+  }
+  return dropList(document, null, probe) ? { parentId: null, index: document.blocks.length } : null;
+}
+
+export function insertBlock(document, type, selected) {
+  const target = insertionTarget(document, selected, type);
+  if (!target) return null;
+  return insertBlockAt(document, type, target.parentId, target.index);
 }
 
 export function duplicateBlock(document, selected) {
@@ -79,6 +219,7 @@ export function duplicateBlock(document, selected) {
   const copy = clone(target.block);
   const rekey = block => {
     block.id = `b_${crypto.randomUUID().replaceAll('-', '')}`;
+    delete block.anchor;
     if (block.type === 'heading' && block.props.level === 1) block.props.level = 2;
     (block.children || []).forEach(rekey);
   };
@@ -93,7 +234,9 @@ export function moveBlock(document, selected, targetId, inside = false) {
   if (!source || !target || selected === targetId || locate(source.block.children || [], targetId)) return false;
   if (inside && !isContainer(target.block)) return false;
   if (inside && !canContain(target.block, source.block)) return false;
-  if (!inside && target.parent && !canContain(target.parent, source.block)) return false;
+  // Neben ein Element der obersten Ebene darf nur, was dort auch stehen darf - eine Spalte oder
+  // ein Akkordeoneintrag nicht.
+  if (!inside && !dropList(document, target.parent?.id ?? null, source.block)) return false;
   source.siblings.splice(source.index, 1);
   const destination = locate(document.blocks, targetId);
   if (inside) (destination.block.children ??= []).push(source.block);
@@ -101,11 +244,94 @@ export function moveBlock(document, selected, targetId, inside = false) {
   return true;
 }
 
+/**
+ * Where a block may land. `parentId` of null means the top level. Returns the list that would
+ * hold the block, or null when the parent refuses this kind of child - a gallery takes images
+ * and nothing else, an accordion takes entries.
+ */
+export function dropList(document, parentId, block) {
+  if (parentId === null) {
+    const type = block?.type;
+    const loose = type !== undefined && (REQUIRE[type] !== undefined || ROOT_NEEDS_CONTAINER.includes(type));
+    return loose ? null : document.blocks;
+  }
+  const parent = locate(document.blocks, parentId)?.block;
+  return parent && canContain(parent, block) ? (parent.children ??= []) : null;
+}
+
+/** Puts an already built block at an exact position, or refuses when the parent will not take it. */
+function place(document, block, parentId, index) {
+  const list = dropList(document, parentId, block);
+  if (!list) return null;
+  list.splice(Math.max(0, Math.min(index, list.length)), 0, block);
+  return block.id;
+}
+
+/**
+ * Inserts a new block at an exact position instead of behind the selection.
+ *
+ * Erst pruefen, ob das Ziel den Baustein nimmt, dann die Fassung anheben: sonst bliebe bei einer
+ * Ablehnung nur die Schemaaenderung uebrig - ein Verlaufsschritt, ein "ungespeichert", und nichts
+ * zu sehen.
+ */
+export function insertBlockAt(document, type, parentId, index) {
+  const block = createBlock(type);
+  if (!dropList(document, parentId, block)) return null;
+  upgradeForType(document, type);
+  return place(document, block, parentId, index);
+}
+
+/**
+ * Moves an existing block to an exact position. Unlike moveBlock this keeps the index, so a
+ * block dragged between two others lands between them and not at the end of the container.
+ */
+export function moveBlockTo(document, selected, parentId, index) {
+  const source = locate(document.blocks, selected);
+  if (!source) return false;
+  // Dropping a container into itself or into its own child would detach the branch.
+  if (parentId === selected || (parentId !== null && locate(source.block.children || [], parentId))) return false;
+  if (!dropList(document, parentId, source.block)) return false;
+  const from = source.siblings, fromIndex = source.index;
+  from.splice(fromIndex, 1);
+  // Re-read: removing the block may have shifted the target list or emptied a parent.
+  const list = dropList(document, parentId, source.block);
+  if (!list) { from.splice(fromIndex, 0, source.block); return false; }
+  // The index still counts in the list as it was before the block was taken out, so the shift
+  // has to be settled first and only then clamped - the other way round an index pointing past
+  // the end is clamped to the old length and then pulled one step too far forward.
+  let at = index;
+  if (list === from && fromIndex < index) at -= 1;
+  at = Math.max(0, Math.min(at, list.length));
+  list.splice(at, 0, source.block);
+  return true;
+}
+
 export const devices = { desktop: 'Desktop', tablet: 'Tablet', mobile: 'Mobil' };
 
 // Called only inside a history transaction: all other fields and IDs stay untouched.
+// Die höchste Fassung, die dieser Editor kennt. Sie stand bisher als Liste an zwei Stellen und
+// blieb bei 12 stehen, während Bausteine schon v13 bis v15 verlangten: in einem aktuellen Dokument
+// liess sich dann gar nichts mehr einfügen, und ein Symbol, ein Slider oder ein externer Inhalt
+// nirgends. Eine Zahl, an einer Stelle.
+export const SCHEMA_VERSION = 24;
+
+export const VISIBILITY = { all: 'Auf allen Geräten', desktop: 'Nur Desktop', tablet: 'Nur Tablet', mobile: 'Nur Mobil', 'hide-desktop': 'Auf Desktop ausblenden', 'hide-tablet': 'Auf Tablet ausblenden', 'hide-mobile': 'Auf Mobil ausblenden', hidden: 'Überall ausblenden' };
+
+export function setVisibility(document, id, value) {
+  if (!Object.hasOwn(VISIBILITY, value)) throw new Error('Unbekannte Sichtbarkeit.');
+  const block = locate(document.blocks, id)?.block;
+  if (!block) return;
+  if (value === 'all') {
+    if (block.layout) delete block.layout.visibility;
+  } else {
+    upgradeDocument(document, 22);
+    (block.layout ??= {}).visibility = value;
+  }
+}
+const known = version => Number.isInteger(version) && version >= 1 && version <= SCHEMA_VERSION;
+
 export function upgradeDocument(document, version = 2) {
-  if (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].includes(document.schemaVersion) || ![2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].includes(version)) throw new Error('Unbekanntes Dokumentschema.');
+  if (!known(document.schemaVersion) || !known(version) || version < 2) throw new Error('Unbekanntes Dokumentschema.');
   document.schemaVersion = Math.max(document.schemaVersion, version);
   return document;
 }
@@ -122,7 +348,7 @@ export function effectiveDesign(block, device, key) {
 }
 
 export function setDesign(document, id, device, key, value) {
-  if (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].includes(document.schemaVersion)) throw new Error('Unbekanntes Dokumentschema.');
+  if (!known(document.schemaVersion)) throw new Error('Unbekanntes Dokumentschema.');
   if (!Object.hasOwn(devices, device)) throw new Error('Unbekannte Vorschaugröße.');
   const block = locate(document.blocks, id)?.block;
   if (!block) return;
@@ -158,17 +384,107 @@ export function mediaProps(media) {
 
 export function insertMedia(document, selected, items) {
   const target = locate(document.blocks, selected)?.block;
-  upgradeDocument(document, 3);
-  if (target?.type === 'image') { target.props = mediaProps(items[0]); return target.id; }
+  if (target?.type === 'image') {
+    upgradeDocument(document, 3);
+    target.props = { ...target.props, ...mediaProps(items[0]), caption: target.props.caption || '' };
+    return target.id;
+  }
   let parent = target;
   if (target?.type !== 'gallery') {
-    const id = insertBlock(document, 'gallery', selected); parent = locate(document.blocks, id).block;
+    // Ein Akkordeon nimmt nur Eintraege: dann gibt es keine Galerie und nichts zu tun.
+    const id = insertBlock(document, 'gallery', selected);
+    if (id === null) return null;
+    parent = locate(document.blocks, id).block;
   }
+  upgradeDocument(document, 3);
   for (const item of items) { const image = createBlock('image'); image.props = mediaProps(item); (parent.children ??= []).push(image); }
   return parent.id;
 }
 
+/**
+ * A row with a given number of columns, inserted where the selection is.
+ *
+ * A row on its own looks like nothing, which is why "add a row" was hard to find: what people
+ * want is a row that already has columns in it.
+ */
+/**
+ * A full screen hero: edge to edge, as tall as the screen, content centred, with room for a
+ * background image and a dark overlay so text stays readable on any photo.
+ *
+ * The parts all exist on their own - width "full", min-height in dvh, display flex, overlay - but
+ * finding that combination is a research project. This is the one click.
+ */
+export function insertHero(document, selected) {
+  const section = createBlock('section');
+  section.layout = { tone: 'ink', width: 'full' };
+  section.style = {
+    desktop: {
+      // dvh, not vh: on a phone 100vh is taller than the screen.
+      minHeight: '100dvh', display: 'flex', alignItems: 'center',
+      backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+      overlayColor: '#000000', overlayOpacity: 0.4,
+      padding: { top: '80px', right: '32px', bottom: '80px', left: '32px' },
+      textAlign: 'center',
+    },
+    mobile: { minHeight: '80dvh', padding: { top: '56px', right: '20px', bottom: '56px', left: '20px' } },
+  };
+  // A hero at the top of a page carries its main heading - but a page has exactly one, and
+  // inserting a second would produce a document the editor refuses to save.
+  const hasMainHeading = blocks => blocks.some(block =>
+    (block.type === 'heading' && block.props?.level === 1) || hasMainHeading(block.children ?? []));
+  const heading = createBlock('heading');
+  heading.props = { text: 'Deine Botschaft, ganzflächig.', level: hasMainHeading(document.blocks) ? 2 : 1 };
+  const paragraph = createBlock('text');
+  paragraph.props = { text: 'Ein Satz, der sagt, worum es geht. Wähle im Designbereich unter Hintergrund ein Bild und stelle die Deckkraft der Überlagerung so ein, dass der Text lesbar bleibt.' };
+  const button = createBlock('button');
+  section.children = [heading, paragraph, button];
+  upgradeDocument(document, 10);
+  const top = blockPath(document.blocks, selected)[0];
+  const index = top ? document.blocks.findIndex(block => block.id === top.id) + 1 : document.blocks.length;
+  document.blocks.splice(index, 0, section);
+  return section.id;
+}
+
+/** A row with its columns already in it. On its own an empty row is a box with nothing in it. */
+function buildRow(columns) {
+  const count = Math.max(1, Math.min(6, Number(columns) || 2));
+  const names = { 1: 'one', 2: 'two', 3: 'three', 4: 'four' };
+  const row = createBlock('row');
+  row.layout = { design: { desktop: { columns: names[count] ?? 'auto', gap: 'medium' }, mobile: { columns: 'one' } } };
+  row.children = Array.from({ length: count }, () => createBlock('column'));
+  return row;
+}
+
+/** A row at an exact position, for a marked insertion point or a drop in the preview. */
+export function insertRowAt(document, columns, parentId, index) {
+  const row = buildRow(columns);
+  if (!dropList(document, parentId, row)) return null;
+  upgradeDocument(document);
+  return place(document, row, parentId, index);
+}
+
+export function insertRow(document, columns, selected) {
+  // Same placement rule as a single element, so the row does not land somewhere else than the
+  // toolbox promised.
+  const target = insertionTarget(document, selected, 'row');
+  if (!target) return null;
+  upgradeDocument(document);
+  return place(document, buildRow(columns), target.parentId, target.index);
+}
+
+/** Frische Kennungen für eine Vorlage aus einem Plugin - jedes Einfügen ist ein eigener Baustein. */
+const freshIds = blocks => blocks.map(block => ({ ...structuredClone(block), id: `b_${crypto.randomUUID().replaceAll('-', '')}`, ...(Array.isArray(block.children) ? { children: freshIds(block.children) } : {}) }));
+
 export function insertPreset(document, name, selected) {
+  if (name === 'hero') return insertHero(document, selected);
+  if (PLUGIN_PRESETS[name]) {
+    const blocks = freshIds(PLUGIN_PRESETS[name].blocks);
+    const top = blockPath(document.blocks, selected)[0];
+    const index = top ? document.blocks.findIndex(block => block.id === top.id) + 1 : document.blocks.length;
+    document.blocks.splice(index, 0, ...blocks);
+    upgradeDocument(document, SCHEMA_VERSION);
+    return blocks[0].id;
+  }
   if (!['intro', 'columns', 'cta'].includes(name)) throw new Error('Unbekannte Vorlage.');
   const section = createBlock('section');
   const heading = text => { const block = createBlock('heading'); block.props.text = text; return block; };
@@ -202,6 +518,14 @@ export class EditorHistory {
     this.mergeKey = null;
     this.saved = JSON.stringify(document);
   }
+  /** Uebernimmt die vom Server bereinigte Fassung als aktuellen Stand, der Verlauf bleibt. */
+  adopt(document) {
+    this.past.push(this.document);
+    if (this.past.length > 100) this.past.shift();
+    this.document = clone(document);
+    this.future = [];
+    this.mergeKey = null;
+  }
   change(mutator, mergeKey = null) {
     const next = clone(this.document);
     const result = mutator(next);
@@ -269,17 +593,24 @@ function prune(block) {
  * Sets one style value. An empty value removes it, which makes the block fall back to the wider
  * device and finally to the theme. Called inside a history transaction like every other change.
  */
-export function setStyle(document, id, device, key, value, { side = null, hover = false } = {}) {
+export function scrolledStyle(block, device, key) {
+  return block?.style?.[device]?.scrolled?.[key];
+}
+
+export function setStyle(document, id, device, key, value, { side = null, hover = false, scrolled = false } = {}) {
   if (!Object.hasOwn(devices, device)) throw new Error('Unbekannte Vorschaugröße.');
   const block = locate(document.blocks, id)?.block;
   if (!block) return;
   const empty = value === '' || value === null || value === undefined;
   if (!empty) upgradeDocument(document, 10);
+  if (key === 'backgroundImage' && value === 'none') upgradeDocument(document, 20);
 
   block.style ??= {};
   block.style[device] ??= {};
   let target = block.style[device];
   if (hover) { target.hover ??= {}; target = target.hover; }
+  // The scrolled state of the header: same shape as hover, applied once the page has moved.
+  if (scrolled) { target.scrolled ??= {}; target = target.scrolled; }
 
   if (side !== null) {
     if (empty) { if (target[key]) delete target[key][side]; }
@@ -317,3 +648,16 @@ export function copyStyle(document, fromId, toId) {
   target.style = structuredClone(source.style);
   return true;
 }
+
+/** UI relevance only. Existing values remain editable, including on older documents. */
+export function relevantProperty(block, key, property) {
+  if (Object.values(block.style ?? {}).some(values => values[key] !== undefined || values.hover?.[key] !== undefined || values.scrolled?.[key] !== undefined)) return true;
+  const container = isContainer(block);
+  if (property.group === 'slider') return block.type === 'slider';
+  if (property.group === 'menu') return block.type === 'menu';
+  if (property.group === 'image') return ['image', 'gallery', 'logos', 'postlist'].includes(block.type);
+  if (property.group === 'text' || key === 'textShadow') return !['image', 'gallery', 'logos', 'spacer', 'divider', 'embed'].includes(block.type);
+  if (key === 'columnWidths') return block.type === 'row';
+  if (['flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'gridColumns', 'gap', 'rowGap', 'columnGap'].includes(key)) return container || ['button', 'menu', 'form', 'postlist', 'contact', 'social'].includes(block.type);
+  return true;
+}

public/assets/editor.css

@@ -1,165 +1,220 @@
 /* The editor and the media library. Only the editor and the media screen load this; the
-   management screens get by with admin.css alone. Rules moved out of admin.css unchanged. */
+   management screens get by with admin.css alone.
+
+   The layout follows the Flatsome UX Builder: a dark bar on top, one sidebar on the left that
+   shows one thing at a time, and the page itself filling the rest. */
+/* Die Farbe fuer "hier steht ein eigener Wert". Dunkler als der Fokusring, damit weisse
+   Schrift darauf die Kontrastschwelle sicher nimmt (5,6:1). */
+:root{--used:#9d4e0d}
 dialog{max-width:450px;width:calc(100% - 40px);padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:12px;color:var(--ink);box-shadow:0 20px 80px #1b2a2433}
 dialog::backdrop{background:#172e2966}
 dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
-.editor-page-name h1{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
-.canvas-scroll:focus-visible{outline:3px solid #b55b12;outline-offset:-3px}
+.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 
-.media-launch{margin-top:12px;white-space:normal}
-.media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}
-.media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
-.media-heading h2{margin:0}
-.media-heading .eyebrow{margin-bottom:8px}
-.media-tools{display:grid;grid-template-columns:1fr 1fr;gap:24px}
-.media-tools label{margin-top:10px}
-.media-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px}
-.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;align-content:start;max-height:430px;overflow:auto;padding:4px}
-.media-card{border:2px solid var(--line);border-radius:9px;padding:7px;background:white;color:var(--ink);display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}
-.media-card[aria-pressed=true]{border-color:var(--accent);background:#edf4dc}
-.media-card img{width:100%;height:115px;object-fit:cover;border-radius:5px}
-.media-card strong{font-size:12px;overflow-wrap:anywhere}
-.media-card span{font-size:11px;color:var(--muted)}
-.media-details{padding-left:22px;border-left:1px solid var(--line)}
-.media-details button,.media-details a{margin-top:12px;display:block}
-.media-details input{font-size:13px}
-.media-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
-.media-footer label{margin:0;font-size:12px}
-#media-error{color:#8b2f22;background:#fff0eb;padding:12px;border-radius:6px}
-#media-status{font-size:12px;margin-block:15px}
-.media-dialog> .panel-hint{margin-top:20px}
-.media-details>p{font-size:12px}
-@media(max-width:650px){.media-dialog{padding:18px}.media-tools,.media-layout{grid-template-columns:1fr}.media-details{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.media-grid{max-height:280px;grid-template-columns:repeat(2,minmax(0,1fr))}.media-footer{align-items:stretch;flex-direction:column}.media-heading{gap:8px}}
-.icon-button,.block-actions button,.viewport-controls button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--line);border-radius:7px;padding:11px 15px;text-decoration:none;font-size:12px;font-weight:600;background:white;color:var(--ink);white-space:nowrap;min-height:40px}
-.editor-message{padding:14px 18px;border-radius:7px;line-height:1.6;font-size:13px}
-.editor-body{overflow:hidden}
-#editor{height:100dvh;display:flex;flex-direction:column}
-.editor-header{display:flex;align-items:center;gap:20px;min-height:76px;padding:13px 20px;border-bottom:1px solid var(--line);background:white;z-index:1}
-.back-link{display:flex;gap:9px;text-decoration:none;font-size:12px;padding-right:20px;border-right:1px solid var(--line)}
-.editor-page-name{min-width:0;flex:1;display:grid;gap:5px}
-.editor-page-name strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.editor-page-name>span{font-size:10px;color:var(--muted)}
-.history-actions,.save-actions{display:flex;align-items:center;gap:8px}
-.icon-button{font-size:21px;min-width:36px;padding:3px 9px}
-.save-actions>span{font-size:10px;color:var(--muted);max-width:130px;margin-right:8px}
-.editor-layout{display:grid;grid-template-columns:258px minmax(200px,1fr) 280px;flex:1;min-height:0}
-.left-panel,.right-panel{background:white;overflow:auto}
-.left-panel{border-right:1px solid var(--line)}
-.right-panel{border-left:1px solid var(--line)}
-.panel-section{padding:23px 18px;border-bottom:1px solid var(--line)}
-.panel-section .eyebrow{margin-bottom:10px}
-.panel-section h2{font-size:14px;margin-bottom:12px}
-.panel-hint{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:17px}
-.library{display:grid;grid-template-columns:1fr 1fr;gap:7px}
-.library button{min-height:64px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:10px}
-.library button:hover:not(:disabled){border-color:var(--accent);background:#f3f7e8}
-.library button span{font-size:19px;line-height:1}
-.panel-title{display:flex;justify-content:space-between;align-items:center}
-.panel-title h2{margin-bottom:0}
-.panel-title+.panel-hint{margin-top:10px}
+
+/* ---- shell ------------------------------------------------------------------------------- */
+html:has(>.editor-body){overflow:hidden;height:100%}
+.editor-body{overflow:hidden;height:100dvh}
+#editor{height:100dvh;display:flex;flex-direction:column;background:#e3e7e1}
+.editor-header{display:flex;align-items:center;gap:12px;height:52px;padding:0 12px;background:var(--ink);color:#fff;flex-shrink:0;z-index:5}
+.back-link{display:flex;gap:7px;align-items:center;color:#cfd9d3;text-decoration:none;font-size:12px;font-weight:600;padding:8px 14px 8px 4px;border-right:1px solid #ffffff22;white-space:nowrap}
+.back-link:hover{color:#fff}
+.editor-page-name{min-width:0;width:230px;display:grid;gap:1px}
+.editor-page-name h1{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;color:#fff}
+.editor-page-name>span{font-size:11px;color:#9fb1a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.icon-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-height:0;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;text-decoration:none;font-size:14px;line-height:1}
+.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
+.editor-header .icon-button{color:#d5ded8}
+.editor-header .icon-button:hover:not(:disabled){background:#ffffff1a;color:#fff}
+.editor-header .icon-button[aria-pressed=true]{background:#fff;color:var(--ink)}
+.viewport-controls{display:flex;gap:2px;margin:0 auto;padding:3px;background:#ffffff14;border-radius:9px}
+.viewport-controls button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#c9d4cd;padding:0 11px;min-height:30px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
+.viewport-controls button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
+.viewport-controls button:hover:not(:disabled){color:#fff}
+.editor-header .viewport-controls button[aria-pressed=true]{background:#fff;color:var(--ink)}
+.history-actions{display:flex;gap:2px}
+.save-actions{display:flex;align-items:center;gap:8px}
+.save-actions>span{font-size:11px;color:#9fb1a7;max-width:150px;text-align:right;line-height:1.3}
+.editor-header .secondary{background:transparent;color:#fff;border:1px solid #ffffff4d;font-size:12px;padding:0 13px;min-height:34px;white-space:nowrap}
+.editor-header .secondary:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff99}
+.editor-header .primary{font-size:12px;padding:0 15px;min-height:34px;white-space:nowrap}
+.editor-message{border-radius:0;background:#fff0e9;color:#873e24;border-bottom:1px solid #e6c3b2;flex-shrink:0;padding:9px 16px;font-size:12px;line-height:1.6}
+.recovery-bar{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;font-size:12px;flex-wrap:wrap}
+.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
+/* The single row is capped at the space left under the header, so the sidebar and the canvas
+   scroll inside themselves instead of stretching the workspace. */
+.editor-layout{display:grid;grid-template-columns:330px minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1;min-height:0}
+
+/* ---- sidebar ----------------------------------------------------------------------------- */
+.sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff;border-right:1px solid var(--line)}
+.sidebar-head{flex:none;border-bottom:1px solid var(--line);background:#fff}
+.sidebar-nav{display:flex}
+.sidebar-nav [role=tab]{flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.2px;padding:0 6px;min-height:46px;border-radius:0}
+.sidebar-nav [role=tab]:hover:not(:disabled){color:var(--ink);background:#f7f9f5}
+.sidebar-nav [aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
+.sidebar-element{display:flex;align-items:center;gap:4px;padding:7px 8px 7px 6px;border-top:1px solid var(--line);background:#f7f9f5}
+.sidebar-element .icon-button{color:var(--ink);flex:none}
+.sidebar-element .icon-button:hover:not(:disabled){background:#eef2ea}
+.sidebar-element-name{flex:1;min-width:0;padding:0 4px}
+.sidebar-element-name h2{margin:0;font-size:14px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
+.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:1px;min-height:0;line-height:1.3}
+.breadcrumbs:empty{display:none}
+.crumb{border:0;background:none;padding:0;min-height:0;font-size:10.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
+.crumb:hover{color:var(--accent);text-decoration:underline}
+.crumb+.crumb::before{content:'›';margin:0 4px;color:#b7c2bb}
+.property-tabs{display:flex;gap:4px;padding:0 8px 8px}
+.property-tabs button{flex:1;min-width:0;border:1px solid var(--line);background:#f5f7f2;color:var(--ink);border-radius:7px;padding:0 6px;min-height:32px;font-size:12px;font-weight:600}
+.property-tabs button:hover:not(:disabled){border-color:#b9c6bd}
+.property-tabs [aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
+.sidebar-body{flex:1;min-height:0;overflow:auto;overflow-x:hidden;padding:14px 14px 28px;container-type:inline-size}
+.sidebar-view>:first-child{margin-top:0}
+.sidebar-foot{flex:none;display:flex;gap:6px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);background:#fff}
+.sidebar-foot .icon-button{border-color:var(--line);color:var(--ink)}
+.sidebar-foot .icon-button:hover:not(:disabled){background:#eef2ea}
+.sidebar-foot .secondary{flex:1;font-size:12px;padding:0 8px;min-height:34px;white-space:nowrap}
+.sidebar-foot .danger-text{color:#943a2e}
+.sidebar-note{flex:none;font-size:11px;line-height:1.5;color:#873e24;background:#fff4ec;border-top:1px solid #e6c3b2;margin:0;padding:10px 14px}
+.panel-hint{font-size:11px;color:var(--muted);line-height:1.6;margin:0 0 12px}
+.panel-note{font-size:11px;color:var(--muted);line-height:1.7;padding:12px 0}
+.sidebar label{font-size:12px;margin:16px 0 6px}
+.sidebar input,.sidebar select,.sidebar textarea{font-size:12px;border-radius:7px;min-width:0;max-width:100%}
+.sidebar textarea{min-height:120px}
+.sidebar select{padding-inline:7px;text-overflow:ellipsis}
+.sidebar .field-help{font-size:11px;line-height:1.5}
+.sidebar .full-width{width:100%}
+.sidebar .secondary,.sidebar .primary{font-size:12px;min-height:36px}
+
+/* ---- element library --------------------------------------------------------------------- */
+#library-search,#tree-search{font-size:12px;min-height:38px;padding:8px 11px;margin:0 0 4px}
+#library-found{margin:0 0 8px;min-height:0}
+#library-found:empty{display:none}
+.library-group+.library-group{margin-top:18px}
+.library-group-title{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
+.library-group:first-child .library-group-title{margin-top:8px}
+.library-group-hint{font-size:11px;line-height:1.5;color:var(--muted);margin:-4px 0 8px}
+.library-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
+.library-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:74px;padding:10px 5px 9px;border:1px solid var(--line);border-radius:9px;background:#fbfcfa;color:var(--ink);font-size:11px;line-height:1.2;text-align:center;overflow-wrap:anywhere;min-width:0}
+.library-preview{display:grid;place-items:center;width:40px;height:27px;color:var(--accent)}
+.library-preview svg{width:40px;height:27px}
+.library-name{min-width:0}
+.library-buttons button:hover:not(:disabled){border-color:var(--accent);background:#fff;box-shadow:0 2px 10px #1b2a2414}
+.library-buttons button:focus-visible{outline:2px solid #b55b12;outline-offset:1px}
+.library-buttons button:disabled{opacity:.35;cursor:not-allowed}
+.library-buttons button:disabled .library-preview{color:var(--muted)}
+#library button[draggable=true]{cursor:grab}
+#library button[draggable=true]:active{cursor:grabbing}
+@container(max-width:260px){.library-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}
+.insert-hint{background:color-mix(in srgb, var(--ring,#b55b12) 9%, #fff);border:1px solid var(--ring,#b55b12);border-radius:8px;padding:9px 11px;font-size:11.5px;line-height:1.5;margin:0 0 12px}
+.insert-hint .text-button{margin-left:4px}
+#toolbox.awaiting-insert .library button[data-add]:not(:disabled){box-shadow:inset 0 0 0 1px var(--ring,#b55b12)}
+.preset-library{display:grid;gap:6px}
+.preset-library button{display:flex;gap:10px;text-align:left;align-items:center;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfcfa;color:var(--ink);font-size:12px}
+.preset-library button:hover:not(:disabled){border-color:var(--accent);background:#fff}
+.preset-library span{font-size:16px;color:var(--accent)}
+
+/* ---- structure --------------------------------------------------------------------------- */
+.tree-tools{display:flex;flex-wrap:wrap;gap:2px;margin:4px 0 8px}
+.tree-tools .text-button{font-size:11px;padding:4px 7px;min-height:26px}
 .structure-list{list-style:none;margin:0;padding:0}
-.structure-list .structure-list{padding-left:13px;border-left:1px solid #e5e9e3;margin-left:8px}
-.tree-item{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:1px solid transparent;background:none;color:#42584b;border-radius:5px;padding:9px 7px;font-size:11px;min-height:34px}
+.structure-list .structure-list{padding-left:12px;border-left:1px solid #e5e9e3;margin-left:9px}
+.structure-list li{position:relative}
+.tree-item{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:1px solid transparent;background:none;color:#42584b;border-radius:6px;padding:8px 7px 8px 24px;font-size:12px;min-height:34px}
 .tree-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tree-item:hover{background:#f3f6ef}
-.tree-item[aria-pressed=true]{background:#eaf1d5;border-color:#c5d89a;color:#203b34;font-weight:600}
+.tree-item[aria-pressed=true]{background:#eaf1d5;border-color:#c5d89a;color:#203b34;font-weight:600;padding-right:84px}
 .tree-icon{font-size:12px;min-width:15px}
+.tree-visibility{margin-left:auto;max-width:95px;font-size:10px;font-weight:400;line-height:1.3;color:#42584b;white-space:normal}
+.tree-toggle{position:absolute;top:5px;left:0;width:22px;height:25px;z-index:1;border:0;background:transparent;color:var(--ink);border-radius:4px;min-height:0;padding:0}
+.tree-edit{position:absolute;top:5px;right:4px;z-index:1;min-height:0;padding:4px 8px;border:1px solid #c5d89a;border-radius:6px;background:#fff;color:var(--accent);font-size:11px;font-weight:700}
+.tree-edit:hover{background:var(--accent);color:#fff}
 .drop-target{outline:2px dashed #315b49}
-.block-actions{display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid var(--line);padding-top:13px;margin-top:16px}
-.block-actions button{font-size:10px;padding:7px 9px;min-height:33px}
-.block-actions .danger-text{color:#943a2e}
-.canvas-panel{min-width:0;display:flex;flex-direction:column;background:#e9ede7;overflow:hidden}
-.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px;background:#f6f8f2;border-bottom:1px solid var(--line);min-height:59px}
-.canvas-label{font-size:9px;font-weight:700;letter-spacing:1.2px;color:#57655d}
-.viewport-controls{display:flex;gap:3px;background:#e8eee1;border-radius:7px;padding:3px}
-.viewport-controls button{padding:5px 9px;font-size:10px;min-height:28px;border:0;background:transparent}
-.viewport-controls [aria-pressed=true]{background:white;box-shadow:0 1px 3px #00000012}
-.canvas-toolbar>a{text-decoration:none;font-size:18px}
-.canvas-scroll{flex:1;min-height:0;overflow:auto;padding:22px;display:flex;justify-content:center;align-items:flex-start}
-#preview{background:white;border:0;box-shadow:0 3px 20px #203b3410;min-height:600px;height:100%;flex-shrink:0}
-.viewport-desktop{width:100%}
-.viewport-tablet{width:768px;max-width:100%}
-.viewport-mobile{width:390px;max-width:100%}
-.preview-status{font-size:10px;padding:9px 20px;color:#52614f;margin:0;min-height:30px;background:#f3f5ed}
-.right-panel label{font-size:11px}
-.right-panel input,.right-panel select,.right-panel textarea{font-size:12px}
-.right-panel textarea{min-height:150px}
 
-.panel-note{font-size:11px;color:var(--muted);line-height:1.7;padding:20px}
+/* ---- canvas ------------------------------------------------------------------------------ */
+.canvas-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:#e3e7e1;overflow:hidden}
+.canvas-scroll{flex:1;min-height:0;overflow:auto;padding:16px}
+.canvas-scroll:focus-visible{outline:3px solid #b55b12;outline-offset:-3px}
+#preview-stage{position:relative;margin:0 auto;background:#fff;box-shadow:0 8px 30px #1b2a2418;border-radius:6px;overflow:hidden}
+#preview{position:absolute;top:0;left:0;border:0;background:#fff;transform-origin:top left;max-width:none;min-height:0}
+.preview-status{flex:none;font-size:11px;padding:6px 14px;color:#52614f;margin:0;background:#f5f7f2;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.resizing-panels iframe{pointer-events:none}
 
+/* ---- context menu ------------------------------------------------------------------------ */
+.context-menu{position:fixed;z-index:60;min-width:210px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 40px #1b2a2433;display:grid}
+.context-menu button{border:0;background:transparent;text-align:left;padding:8px 11px;min-height:0;border-radius:6px;font-size:12px;color:var(--ink);white-space:nowrap}
+.context-menu button:hover,.context-menu button:focus-visible{background:#eef2ea;outline:0}
+.context-menu .danger-text{color:#943a2e}
+.context-menu .danger-text:hover{background:#fbeae6}
 
-.editor-message{border-radius:0;background:#fff0e9;color:#873e24;border-bottom:1px solid #e6c3b2;flex-shrink:0;padding:9px 20px;font-size:12px}
-.recovery-bar{display:flex;gap:12px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line);background:#fff;font-size:12px;flex-wrap:wrap}
-.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
-@media(max-width:1150px){.editor-layout{grid-template-columns:215px minmax(200px,1fr) 240px}.editor-header{gap:12px;padding-inline:14px}.save-actions>span{display:none}.panel-section{padding:18px 14px}.canvas-scroll{padding:12px}.canvas-label{display:none}}
-@media(max-width:850px){.editor-body{overflow:auto}#editor{height:auto;min-height:100dvh}.editor-header{flex-wrap:wrap}.editor-page-name{min-width:180px}.save-actions{width:100%;justify-content:flex-end}.save-actions>span{display:block;margin-right:auto}.editor-layout{display:flex;flex-wrap:wrap}.canvas-panel{order:0;width:100%;height:680px}.left-panel{order:1;width:45%;max-height:650px}.right-panel{order:2;width:55%;max-height:650px}.canvas-label{display:block}.editor-header .back-link{padding-right:12px}.editor-message{font-size:11px}.editor-layout .panel-hint{font-size:10px}}
-.left-panel{display:flex;flex-direction:column;overflow:hidden}
-.left-panel>.panel-section:first-child{max-height:45%;overflow:auto;flex-shrink:0}
-.structure-section{display:flex;flex-direction:column;flex:1;min-height:0}
-.structure-section #structure{overflow:auto;flex:1;min-height:90px;padding:3px}
-.structure-section .block-actions{flex-shrink:0;background:white}
-.structure-section .panel-hint{margin:8px 0}
-.search-label{font-size:11px;margin:12px 0 6px}
-#tree-search{font-size:11px;padding:9px;min-height:36px}
-.tree-tools{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
-.tree-tools .text-button{font-size:10px;padding:5px}
-.structure-list li{position:relative}
-.tree-item{padding-left:23px}
-.tree-toggle{position:absolute;top:5px;left:0;width:22px;height:25px;z-index:1;border:0;background:transparent;color:var(--ink);border-radius:4px}
-.preset-heading{font-size:12px;margin:22px 0 8px}
-.preset-library{display:grid;gap:6px}
-.preset-library button{display:flex;gap:10px;text-align:left;align-items:center;min-height:40px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:#f7f9f2;color:var(--ink);font-size:11px}
-.preset-library button:hover:not(:disabled){border-color:var(--accent)}
-.preset-library span{font-size:18px}
-.property-tabs{display:flex;background:#edf1e7;padding:4px;border-radius:8px;gap:4px}
-.property-tabs button{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);border-radius:6px;padding:10px;font-size:12px;font-weight:600}
-.property-tabs [aria-pressed=true]{background:white;box-shadow:0 1px 3px #0001}
-.design-scope{font-size:12px;font-weight:600;line-height:1.6;margin:18px 0 8px;padding:10px;border-left:3px solid var(--accent);background:#f1f5e7}
+/* ---- properties -------------------------------------------------------------------------- */
+.accordion-entry-list{display:grid;gap:7px;margin:12px 0}
+.accordion-entry-choice{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#f7f9f3;color:var(--ink);font-size:12px;line-height:1.5;text-align:left;overflow-wrap:anywhere}
+.accordion-entry-choice:hover{border-color:var(--accent);background:#edf3e7}
+.design-scope{font-size:12px;font-weight:600;line-height:1.6;margin:0 0 8px;padding:9px 10px;border-left:3px solid var(--accent);background:#f1f5e7;border-radius:0 7px 7px 0}
 .design-reset{margin-top:24px;white-space:normal;width:100%}
-.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:3px;min-height:35px;padding:3px 14px;background:#f6f8f2;border-top:1px solid var(--line)}
-.breadcrumbs .text-button{font-size:10px;white-space:normal}
-.breadcrumbs button+button:before{content:'›';color:var(--muted)}
-.breadcrumbs [aria-current=location]{font-weight:700;background:#e5edda}
-.canvas-scroll{display:block}
-.canvas-scroll #preview-stage{position:relative;margin:0 auto}
-#preview{position:absolute;top:0;left:0;transform-origin:top left;max-width:none;min-height:0}
-.right-panel select{padding-inline:7px;text-overflow:ellipsis}
-.right-panel .panel-section{min-width:0}
-@media(max-width:850px){.left-panel,.right-panel{height:650px}.left-panel>.panel-section:first-child{max-height:40%}.structure-section{padding:12px 7px}.tree-item{font-size:10px;gap:3px}.tree-icon{min-width:10px}.structure-list .structure-list{padding-left:5px;margin-left:4px}.block-actions button{padding:6px;white-space:normal}.property-tabs button{padding:9px 4px;font-size:11px}.canvas-scroll{padding:12px}.right-panel label{line-height:1.5}.tree-tools .text-button{white-space:normal}}
-.design-group{border:1px solid var(--line);border-radius:9px;margin-top:10px;background:#fff}
-.design-group>summary{cursor:pointer;padding:12px 14px;font-size:12px;font-weight:700;letter-spacing:.3px;list-style:none;display:flex;justify-content:space-between;align-items:center}
-.design-group>summary::after{content:'+';font-size:17px}
+.design-group{border:1px solid var(--line);border-radius:10px;margin-top:10px;background:#fff}
+.design-group>summary{cursor:pointer;padding:11px 14px;font-size:12px;font-weight:700;letter-spacing:.3px;list-style:none;display:flex;justify-content:space-between;align-items:center}
+.design-group>summary::-webkit-details-marker{display:none}
+.design-group>summary::after{content:'+';font-size:17px;color:var(--muted)}
 .design-group[open]>summary{border-bottom:1px solid var(--line)}
 .design-group[open]>summary::after{content:'–'}
-.design-group-body{padding:6px 14px 16px}
+.design-group-body{padding:4px 14px 16px}
+.design-group-body>label:first-child{margin-top:10px}
 .design-group-label{font-size:11px;font-weight:700;color:var(--muted);margin:18px 0 6px;letter-spacing:.3px}
 .design-row{margin-top:14px}
 .design-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
-.design-row-head label{margin:0;font-size:11px}
-.design-own .design-row-head label{color:#2f5d4a;font-weight:700}
-.design-own .design-row-head label::before{content:'● ';color:var(--accent)}
+.design-row-head label{margin:0;font-size:11px;line-height:1.5;flex:1;min-width:0}
+/* Belegte Zeilen tragen dieselbe Farbe wie die belegten Geraetechips - eine Farbe, eine
+   Bedeutung: hier steht ein eigener Wert und nicht der geerbte. */
+.design-own .design-row-head label{color:var(--used);font-weight:700}
+.design-own .design-row-head label::before{content:'● ';color:var(--used)}
 .design-reset-one{font-size:14px;padding:2px 6px;min-height:24px;line-height:1}
 .design-inherited{font-size:10px;color:var(--muted);margin:5px 0 0;line-height:1.45}
-.color-control{display:grid;grid-template-columns:38px 1fr;gap:6px;align-items:center}
-.color-control input[type=color]{padding:2px;min-height:38px;width:38px;border-radius:6px;cursor:pointer}
-.color-control .color-text{font-size:12px;min-height:38px}
-.color-control .color-palette{grid-column:1 / -1;font-size:11px;min-height:34px}
-.length-control{display:grid;grid-template-columns:1fr 74px;gap:6px}
+.length-control{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:6px}
 .length-control input,.length-control select{font-size:12px;min-height:38px}
 .length-control.is-inherited input{color:var(--muted)}
-.number-control{display:grid;grid-template-columns:1fr 74px;gap:8px;align-items:center}
+.length-mode{grid-column:1/-1}
+.number-control{display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:8px;align-items:center}
 .number-control input[type=range]{width:100%;min-height:24px;padding:0;accent-color:#437754}
 .number-control input[type=number]{font-size:12px;min-height:38px}
-.side-wrap{margin-bottom:6px}
-.side-control{display:grid;grid-template-columns:1fr 1fr;gap:8px}
-.side-cell label{margin:0 0 4px;font-size:10px;color:var(--muted)}
-.side-all{font-size:10px;margin-top:8px;padding:4px 6px}
+.side-wrap{margin-bottom:10px}
+/* Each field sits on the edge it controls, so the position is the label. */
+.side-box{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:4px;align-items:center;justify-items:center;padding:7px;border:1px dashed var(--line);border-radius:8px;background:#fbfcf8}
+.side-top{grid-area:1/2}.side-left{grid-area:2/1}.side-right{grid-area:2/3}.side-bottom{grid-area:3/2}
+.side-box-corners .side-topLeft{grid-area:1/1}.side-box-corners .side-topRight{grid-area:1/3}
+.side-box-corners .side-bottomLeft{grid-area:3/1}.side-box-corners .side-bottomRight{grid-area:3/3}
+.side-cell{width:100%}
+.side-field{width:100%;min-width:0;text-align:center;padding:5px 2px;font-size:11px;min-height:30px}
+.side-field.is-inherited{color:var(--muted)}
+.side-link{grid-area:2/2;width:26px;height:26px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:12px;line-height:1;color:var(--muted);cursor:pointer}
+.side-link[aria-pressed=true]{border-color:var(--accent);background:#eef5e6;color:var(--accent)}
+.side-unit{display:flex;align-items:center;gap:7px;margin-top:7px}
+.side-unit label{margin:0;font-size:10px;color:var(--muted)}
+.side-unit-select{flex:1;min-width:0}
+/* The device chips on a single option: which devices carry an own value, and switch to one.
+
+   Zwei Zustaende, zwei Mittel. "Belegt" - dieses Geraet traegt einen eigenen Wert - ist die
+   Auskunft, die man ueber die ganze Liste hinweg sucht, und bekommt deshalb die kraeftige Farbe.
+   "Gerade bearbeitet" ist ein Rahmen, und zwar ein Rahmen INNEN: ein `outline` liegt ausserhalb
+   des Kaestchens, laeuft bei 2 px Abstand unter den Nachbarn und wird von der seitlich
+   beschnittenen Spalte gekappt - es sah aus wie ein abgeschnittener roter Kasten. */
+.device-chips{display:flex;flex:none;gap:6px;margin-left:auto}
+.device-chip{width:22px;height:22px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--muted);font:700 10px/1 system-ui,sans-serif;cursor:pointer}
+.device-chip:hover{border-color:var(--ink)}
+.device-chip-own{background:var(--used);border-color:var(--used);color:#fff}
+.device-chip[aria-pressed=true]{border-width:2px;border-color:var(--ink)}
+.device-chip-own[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px #fff}
+/* Der Fokusring bleibt innerhalb der Luecke zwischen zwei Chips - nichts liegt uebereinander. */
+.device-chip:focus-visible{outline-width:2px;outline-offset:0}
+.design-side-head{margin-bottom:5px}
+.design-side-head .design-group-label{margin:0}
+/* A number field that can be dragged sideways. The cursor is the only announcement it needs. */
+.scrubbable{cursor:ew-resize}
+.scrubbable:focus{cursor:text}
 .design-actions{display:grid;gap:8px;margin-top:22px}
 .design-actions button{width:100%}
-
-
-
-
+.design-context-toggle{margin:10px 0;width:100%;white-space:normal}
+#design-search{font-size:12px;min-height:36px;padding:9px}
+.search-label{font-size:11px;margin:12px 0 6px}
 .media-control{display:grid;gap:8px}
 .media-chosen{margin:0;font-size:11px;color:var(--muted)}
 .design-reuse{display:grid;gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
@@ -172,8 +227,10 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .rt-button:hover{background:#eef2e7;border-color:var(--line)}
 .rt-toggle{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.5px}
 .rt-toggle[aria-pressed=true]{background:var(--ink);color:#fff}
-.rt-link{display:flex;gap:6px;padding:6px;border-bottom:1px solid var(--line);background:#fff6e2}
+.rt-link{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px;border-bottom:1px solid var(--line);background:#fff6e2}
 .rt-link input{font-size:11px;min-height:30px}
+.rt-link>input{flex:1 0 100%;min-width:0}.rt-link .check-label{margin:0;font-size:12px}.rt-link input[type=checkbox]{min-height:0;width:auto}
+.selected-media-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.selected-media-list .selected-media-preview img{height:90px}.selected-media-list .text-button{font-size:11px;padding:6px}
 .rt-surface{min-height:120px;max-height:340px;overflow:auto;padding:11px 12px;font-size:13px;line-height:1.65}
 .rt-surface:focus-visible{outline:2px solid #b55b12;outline-offset:-2px}
 .rt-surface ul,.rt-surface ol{margin:0 0 8px;padding-left:20px}
@@ -181,26 +238,50 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .rt-source{min-height:150px;border:0;border-radius:0;font-family:ui-monospace,monospace;font-size:12px;line-height:1.6}
 .own-code{font-family:ui-monospace,monospace;font-size:12px;line-height:1.6;min-height:110px}
 .own-code[readonly]{background:#f4f5f1;color:var(--muted)}
-/* Bringing the editor chrome in line with the new administration: same radii, same restraint,
-   and a few sizes that were simply too small to read comfortably. The layout is unchanged. */
-.editor-header{min-height:70px}
-.back-link{font-size:12px;font-weight:600;gap:7px;align-items:center}
-.editor-page-name h1{font-size:14px}
-.panel-section h2{font-size:13px;letter-spacing:0}
-.panel-section .eyebrow{font-size:9px;letter-spacing:1.4px}
-.library{gap:8px}
-.library button{min-height:68px;border-radius:9px;font-size:11px;gap:7px}
-.library button span{font-size:20px}
-.tree-item{font-size:12px;border-radius:6px}
-.right-panel label{font-size:12px}
-.right-panel input,.right-panel select,.right-panel textarea{font-size:12px;border-radius:7px}
-.property-tabs{padding:3px;border-radius:9px}
-.property-tabs button{border-radius:7px;font-size:12px}
-.viewport-controls{border-radius:8px}
-.viewport-controls button{border-radius:6px;font-size:11px}
-.design-group{border-radius:10px}
-.design-scope{border-radius:0 7px 7px 0}
-#preview{box-shadow:0 6px 28px #1b2a2414}
-.canvas-panel{background:#e7ebe5}
-.canvas-toolbar,.breadcrumbs,.preview-status{background:#f5f7f2}
-.icon-button{border-radius:8px}
+.image-width-control{padding:14px;margin-bottom:20px;border:1px solid var(--line);border-radius:10px;background:#f5f8f1}
+.image-width-control>label{margin-top:0}.image-width-inputs{display:grid;grid-template-columns:minmax(0,1fr) 76px;align-items:center;gap:12px}
+.image-width-inputs input[type=range]{width:100%;min-width:0;margin:0;padding:0;accent-color:var(--accent);min-height:36px}.image-width-control .field-help{margin:8px 0}.image-width-control .text-button{margin-top:4px}.image-width-error{color:#a62424}
+
+/* --------------------------------------------------------------------------------------------
+   The working layer above the preview.
+
+   It sits in the editor document, not in the preview, and carries the same scale transform as
+   the frame - so a rectangle measured inside the frame can be used here without conversion. The
+   layer itself lets the mouse through; only the controls on it catch a click, and each of them
+   is counter-scaled from JavaScript so it stays finger-sized when the preview is shrunk.
+   -------------------------------------------------------------------------------------------- */
+.canvas-overlay{position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none;overflow:hidden;z-index:2}
+.ov-box{position:absolute;pointer-events:none}
+.ov-hover{outline:1px dashed #7c8a80;outline-offset:-1px}
+.ov-select{outline:2px solid var(--ring,#b55b12);outline-offset:-2px}
+.ov-label{position:absolute;left:0;top:0;transform-origin:left bottom;background:#5c6b62;color:#fff;font:600 10px/1 system-ui,sans-serif;letter-spacing:.3px;padding:4px 6px;border-radius:3px 3px 0 0;white-space:nowrap;translate:0 -100%}
+.ov-toolbar{position:absolute;display:flex;align-items:center;gap:2px;padding:3px;background:#243029;border-radius:7px;box-shadow:0 3px 12px #0000003d;pointer-events:auto}
+.ov-toolbar-name{color:#e7ece8;font:700 10px/1 system-ui,sans-serif;letter-spacing:.4px;padding:0 7px 0 5px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;border-right:1px solid #ffffff24;margin-right:2px;align-self:stretch;display:flex;align-items:center}
+.ov-tool{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:#e7ece8;font-size:13px;line-height:1;cursor:pointer;padding:0;min-height:0}
+.ov-tool:hover:not(:disabled){background:#3b4c42}
+.ov-tool:focus-visible{outline:2px solid #fff;outline-offset:-2px}
+.ov-tool-danger:hover:not(:disabled){background:#8d2f24}
+.ov-insert{position:absolute;display:grid;place-items:center;padding:0;min-height:0;border:2px solid #fff;border-radius:50%;background:var(--ring,#b55b12);color:#fff;font:700 14px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 2px 7px #0000003d;pointer-events:auto;opacity:.55;transition:opacity .12s}
+.ov-insert:hover,.ov-insert:focus-visible{opacity:1}
+.ov-drop{position:absolute;background:var(--ring,#b55b12);border-radius:2px;box-shadow:0 0 0 1px #fff8;pointer-events:none}
+.ov-drop-inside{background:color-mix(in srgb, var(--ring,#b55b12) 15%, transparent);border:2px dashed var(--ring,#b55b12);box-shadow:none}
+.ov-drop-label{position:absolute;pointer-events:none;background:#2c634a;color:#fff;border-radius:5px;padding:6px 9px;font:600 12px/1.4 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 7px #0002}
+/* The border between two columns of the selected row: a grab area with a short bar in it. */
+.ov-resize{position:absolute;display:grid;place-items:center;padding:0;min-height:0;border:0;background:transparent;cursor:col-resize;pointer-events:auto;touch-action:none}
+.ov-resize::before{content:"";width:4px;height:40px;max-height:60%;border-radius:2px;background:var(--ring,#b55b12);box-shadow:0 0 0 1px #fff8;opacity:.55;transition:opacity .12s}
+.ov-resize:hover::before,.ov-resize:focus-visible::before,.canvas-overlay.is-resizing .ov-resize::before{opacity:1}
+.ov-resize:focus-visible{outline:2px solid var(--ring,#b55b12);outline-offset:-2px}
+.canvas-overlay.is-resizing .ov-hover,.canvas-overlay.is-resizing .ov-toolbar,.canvas-overlay.is-resizing .ov-insert{display:none}
+/* While something is being dragged the outlines would only add noise. */
+.canvas-overlay.is-dragging .ov-hover,.canvas-overlay.is-dragging .ov-toolbar,.canvas-overlay.is-dragging .ov-insert,.canvas-overlay.is-dragging .ov-resize{display:none}
+@media(prefers-reduced-motion:reduce){.ov-insert{transition:none;opacity:1}}
+
+/* ---- narrow screens ---------------------------------------------------------------------- */
+@media(max-width:1100px){.editor-layout{grid-template-columns:290px minmax(0,1fr)}.editor-page-name{width:150px}.save-actions>span{display:none}.viewport-controls button span{display:none}.viewport-controls button{padding:0 9px}}
+@media(max-width:850px){
+  .editor-body{overflow:auto}#editor{height:auto;min-height:100dvh}
+  .editor-header{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}.editor-page-name{flex:1;width:auto}.viewport-controls{order:6;margin:0}.save-actions{margin-left:auto}
+  .editor-layout{display:flex;flex-direction:column}
+  .canvas-panel{height:62vh;flex:none}.sidebar{height:62vh;flex:none;border-right:0;border-top:1px solid var(--line)}
+  .library-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
+}

public/assets/enhancements.css

@@ -1,5 +1,56 @@
-.block-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:24px}.block-gallery>.block-image{min-width:0;margin:0}.block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.block-image figcaption{font-size:14px;line-height:1.5;padding:12px 0;color:inherit}.fx-shadow-none{box-shadow:none}.fx-shadow-soft{box-shadow:0 8px 24px #142e251f}.fx-shadow-strong{box-shadow:0 16px 40px #142e2540}.block-image{border-radius:12px}.block-image img{border-radius:inherit}.block-gallery:empty{min-height:32px}.fx-hover-zoom{overflow:hidden}.fx-hover-zoom img{transform-origin:center}.tone-ink figure{color:var(--paper)}
+.block-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:24px}.block-gallery>.block-image{min-width:0;margin:0}.block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.block-image figcaption{font-size:14px;line-height:1.5;padding:12px 0;color:inherit}.fx-shadow-none{box-shadow:none}.fx-shadow-soft{box-shadow:0 8px 24px #142e251f}.fx-shadow-strong{box-shadow:0 16px 40px #142e2540}.block-image{border-radius:var(--k-image-radius,12px)}.block-image img{border-radius:inherit}.block-gallery:empty{min-height:32px}.fx-hover-zoom{overflow:hidden}.fx-hover-zoom img{transform-origin:center}.tone-ink figure{color:var(--paper)}
 @media(max-width:1024px){.block-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
-@media(max-width:650px){.block-gallery{grid-template-columns:minmax(0,1fr);gap:16px}}
-@media(prefers-reduced-motion:no-preference){.fx-hover-lift,.fx-hover-zoom img{transition:transform .25s ease}.fx-hover-lift:hover,.fx-hover-lift:focus-within{transform:translateY(-4px)}.fx-hover-zoom:hover img,.fx-hover-zoom:focus-within img{transform:scale(1.035)}.fx-entrance-fade{animation:kant-fade .55s ease-out backwards}.fx-entrance-rise{animation:kant-rise .55s ease-out backwards}@keyframes kant-fade{from{opacity:.35}to{opacity:1}}@keyframes kant-rise{from{opacity:.35;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}}
+@media(max-width:767px){.block-gallery{grid-template-columns:minmax(0,1fr);gap:16px}}
+.fx-hover-lift,.fx-hover-zoom img{transition:transform .25s ease}.fx-hover-lift:hover,.fx-hover-lift:focus-within{transform:translateY(-4px)}.fx-hover-zoom:hover img,.fx-hover-zoom:focus-within img{transform:scale(1.035)}
 
+
+/* Hover effects remain CSS; entrance effects are observed by motion.js. They play for everyone
+   unless the website chooses to respect the browser preference - see the override at the end. */
+    .fx-hover-sink { transition: transform .2s ease }
+    .fx-hover-sink:hover { transform: translateY(3px) }
+    .fx-hover-glow { transition: box-shadow .2s ease }
+    .fx-hover-glow:hover { box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent), 0 10px 30px color-mix(in srgb,var(--ink) 16%,transparent) }
+    .fx-hover-tilt { transition: transform .2s ease }
+    .fx-hover-tilt:hover { transform: rotate(-1.2deg) scale(1.01) }
+    .fx-hover-grow-border { transition: box-shadow .2s ease }
+    .fx-hover-grow-border:hover { box-shadow: inset 0 0 0 3px #2c6b4f }
+
+/* Beitragskarten und Knöpfe, ergänzt am 13.09.2026.
+
+   Umut hat gefragt, wo der Zeigereffekt bleibt: eine Karte, die sich beim Zeigen nicht rührt,
+   wirkt tot. Angehoben wird die ganze Karte, das Bild zieht leicht auf, und der Hinweis darüber
+   blendet ein. Alles innerhalb der Bewegungsschranke - wer weniger Bewegung eingestellt hat,
+   bekommt den Hinweis trotzdem, nur ohne Fahrt. */
+    .post-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease }
+    /* Eine Zeile in der kompakten Liste hebt sich nicht - sie ist keine Karte. */
+    .post-list-kompakt .post-card:hover, .post-list-kompakt .post-card:focus-within { transform: none; box-shadow: none; border-color: var(--accent) }
+    /* Wechselseitig: die Karte selbst bleibt stehen, nur das Bild zieht auf. */
+    .post-list-wechsel .post-card:hover, .post-list-wechsel .post-card:focus-within { transform: none; box-shadow: none }
+    .post-list-wechsel .post-card h3 a { transition: color .2s ease }
+    .post-list-wechsel .post-card:hover h3 a, .post-list-wechsel .post-card:focus-within h3 a { color: var(--accent) }
+    .post-card:hover, .post-card:focus-within {
+        transform: translateY(-8px);
+        box-shadow: 0 18px 50px -16px color-mix(in srgb, var(--ink) 28%, transparent);
+        border-color: transparent;
+    }
+    .post-image img { transition: transform .5s ease }
+    .post-card:hover .post-image img, .post-card:focus-within .post-image img { transform: scale(1.06) }
+    .post-view { transition: opacity .3s ease }
+    .post-nav-link { transition: transform .2s ease, border-color .2s ease }
+    .post-nav-link:hover, .post-nav-link:focus-visible { transform: translateY(-3px); border-color: var(--accent) }
+
+    /* Der Knopf hebt sich beim Zeigen um zwei Pixel - dieselbe Geste wie auf der Karte. */
+    .button { transition: transform .2s ease, background-color .2s ease, border-color .2s ease }
+    .button:hover { transform: translateY(-2px) }
+
+/* Die Website kann die Browservorgabe „Bewegung reduzieren" beachten (Einstellungen → Bewegung).
+   Dann trägt <html> die Klasse motion-respect, und die Hover-Fahrten fallen weg - Farben und
+   Schatten bleiben, nur nichts bewegt sich mehr. Ohne die Klasse spielt alles, wie bei Flatsome. */
+@media (prefers-reduced-motion: reduce) {
+    html.motion-respect :is(.fx-hover-lift, .fx-hover-zoom img, .fx-hover-sink, .fx-hover-tilt, .post-card, .post-image img, .post-nav-link, .button) { transition: none }
+    html.motion-respect :is(.fx-hover-lift, .fx-hover-sink, .fx-hover-tilt, .post-card, .post-nav-link, .button):hover,
+    html.motion-respect :is(.fx-hover-lift, .post-card):focus-within,
+    html.motion-respect .post-nav-link:focus-visible,
+    html.motion-respect .fx-hover-zoom:hover img, html.motion-respect .fx-hover-zoom:focus-within img,
+    html.motion-respect .post-card:hover .post-image img, html.motion-respect .post-card:focus-within .post-image img { transform: none }
+}

public/assets/favicon-field.js

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

public/assets/fonts/LIZENZ.md

@@ -0,0 +1,29 @@
+# Schriften in diesem Ordner
+
+Hier liegen die Schriftdateien, die diese Website **selbst ausliefert**. Nichts davon wird zur
+Laufzeit von einem fremden Server geholt: keine Verbindung zu `fonts.googleapis.com`, keine
+IP-Adresse eines Besuchers, die dabei an einen Dritten geht.
+
+## Woher sie kommen
+
+`php bin/console cms:fonts:fetch` (oder der Knopf „Schriften auf diesen Server holen" im
+Designbereich) lädt die im Design gewählten Schnitte einmalig von Google Fonts herunter, behält
+nur die lateinischen Zeichenbereiche und schreibt `fonts.css` mit den passenden
+`@font-face`-Regeln daneben.
+
+## Lizenz
+
+**Lato** steht unter der SIL Open Font License 1.1 – der vollständige Text liegt als
+`lato-OFL.txt` daneben, wie die Lizenz es verlangt. Copyright (c) 2010–2014 tyPoland Łukasz
+Dziedzic, Reserved Font Name „Lato". Die Lizenz erlaubt ausdrücklich, die Dateien mitzuliefern und
+von einem eigenen Server auszuliefern; verboten ist der Verkauf der Schrift für sich genommen und
+die Verwendung des reservierten Namens für eine geänderte Fassung.
+
+**Cormorant Garamond** (Überschriften der Referenzwebsite „Ihr Malerservice Drews") steht ebenfalls
+unter der SIL Open Font License 1.1, Text in `cormorant-garamond-OFL.txt`. Copyright 2015 The
+Cormorant Project Authors (github.com/CatharsisFonts/Cormorant), Reserved Font Name „Cormorant".
+
+Wer hier andere Schriften ablegt, prüft deren Lizenz selbst: nicht jede Schrift, die Google Fonts
+ausliefert, steht unter der OFL – einige stehen unter der Apache-Lizenz 2.0, und eine gekaufte
+Schrift eines Schriftenhauses darf meist gar nicht weitergegeben werden. Die Lizenzdatei gehört in
+jedem Fall daneben.

public/assets/fonts/cormorant-garamond-OFL.txt

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

public/assets/fonts/fonts.css

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

public/assets/fonts/lato-OFL.txt

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

public/assets/form-editor.js

@@ -0,0 +1,213 @@
+/*
+ * Der Formulareditor in der Verwaltung.
+ *
+ * Ohne Skript ist die Seite vollständig bedienbar: Felder sind Karten mit Eingaben, ein Feld ohne
+ * Beschriftung wird nicht gespeichert, die Vorschau zeigt den gespeicherten Stand. Das Skript
+ * macht daraus einen Editor: Felder hinzufügen und entfernen, den technischen Namen aus der
+ * Beschriftung ableiten, Optionen nur bei einer Auswahl zeigen, Farben aus der Palette wählen -
+ * und eine Vorschau, die jeder Eingabe folgt, mit dem Standardbutton der Website.
+ */
+import { createColorControl } from './color-control.js';
+import { buttonSample } from './button-design.js';
+
+const root = document.querySelector('[data-form-schema]');
+if (root) {
+  const schema = JSON.parse(root.dataset.formSchema);
+  const bilder = JSON.parse(root.dataset.formImages || '[]');
+  const defaults = {
+    fieldBorderColor: schema.base.color,
+    fieldBackgroundColor: '#ffffff',
+    buttonColor: schema.buttons.backgroundColor,
+    buttonInk: schema.buttons.color,
+  };
+  const hex = value => /^#[0-9a-f]{6}/i.test(value || '') ? value.slice(0, 7) : schema.colors.find(color => `@${color.key}` === value)?.value || '';
+  // Dunkler beim Überfahren, so wie es die Seite selbst tut (82 % Farbe, Rest Schwarz).
+  const darker = value => {
+    const rgb = hex(value); if (!rgb) return value;
+    return '#' + [1, 3, 5].map(index => Math.round(parseInt(rgb.slice(index, index + 2), 16) * 0.82).toString(16).padStart(2, '0')).join('');
+  };
+  const luminance = rgb => {
+    const [r, g, b] = [1, 3, 5].map(index => parseInt(rgb.slice(index, index + 2), 16) / 255)
+      .map(channel => channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+  const contrast = (back, front) => {
+    if (!back || !front) return null;
+    const [light, dark] = [luminance(back), luminance(front)].sort((a, b) => b - a);
+    return (light + 0.05) / (dark + 0.05);
+  };
+  const slug = text => text.toLowerCase()
+    .replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss')
+    .replace(/[^a-z0-9]+/g, '_').replace(/^[^a-z]+/, '').replace(/_+$/, '').slice(0, 32);
+  const el = (tag, className, text) => {
+    const node = document.createElement(tag); node.className = className;
+    if (text !== undefined) node.textContent = text; return node;
+  };
+
+  for (const form of root.querySelectorAll('[data-form-editor]')) {
+    const list = form.querySelector('[data-field-list]'), template = form.querySelector('[data-field-template]');
+    const preview = form.querySelector('[data-form-preview]'), add = form.querySelector('[data-add-field]');
+    const buttonLabel = form.querySelector('[data-form-button-label]');
+    const colorInputs = {};
+    const cards = () => [...list.querySelectorAll('[data-field]')];
+    let next = cards().length;
+
+    const renderPreview = () => {
+      preview.replaceChildren();
+      preview.style.color = hex(schema.base.color) || '#203b34';
+      preview.style.background = hex(schema.base.backgroundColor) || '#ffffff';
+      preview.style.setProperty('--form-border', hex(colorInputs.fieldBorderColor.value) || 'currentColor');
+      preview.style.setProperty('--form-bg', hex(colorInputs.fieldBackgroundColor.value) || '#ffffff');
+      let shown = 0;
+      for (const card of cards()) {
+        const label = card.querySelector('[data-field-label]').value.trim();
+        if (!label) continue;
+        shown++;
+        const type = card.querySelector('[data-field-type]').value;
+        const help = card.querySelector('[data-field-help]').value.trim();
+        if (type === 'step') {
+          // Ein Schritt ist eine Zwischenüberschrift in der Vorschau, mit seiner Einleitung.
+          const step = el('div', 'form-preview-step');
+          step.append(el('span', 'form-preview-step-title', label));
+          if (help) step.append(el('span', 'form-preview-help', help));
+          preview.append(step);
+          continue;
+        }
+        const required = type === 'consent' || card.querySelector('[data-field-required]').checked;
+        const showIf = card.querySelector('[data-field-showif]').value.trim();
+        const field = el('div', `form-preview-field${showIf ? ' form-preview-conditional' : ''}`);
+        const options = () => card.querySelector('[data-field-options-input]').value.split(',').map(option => option.trim()).filter(Boolean);
+        if (type === 'consent') {
+          const check = el('span', 'form-preview-check');
+          check.append(el('span', 'form-preview-box'), document.createTextNode(`${label} *`));
+          field.append(check);
+        } else if (type === 'radio' || type === 'checkboxes') {
+          field.append(el('span', 'form-preview-label', label + (required ? ' *' : '')));
+          for (const option of options()) {
+            const check = el('span', 'form-preview-check');
+            check.append(el('span', `form-preview-box${type === 'radio' ? ' form-preview-radio' : ''}`), document.createTextNode(option));
+            field.append(check);
+          }
+        } else {
+          field.append(el('span', 'form-preview-label', label + (required ? ' *' : '')));
+          const unit = type === 'number' ? card.querySelector('[data-field-unit]').value.trim() : '';
+          field.append(el('span', `form-preview-input${type === 'textarea' ? ' form-preview-area' : ''}${type === 'select' ? ' form-preview-select' : ''}${type === 'number' ? ' form-preview-number' : ''}`, type === 'select' ? '— bitte wählen —' : unit));
+        }
+        if (help) field.append(el('span', 'form-preview-help', help));
+        if (showIf) field.append(el('span', 'form-preview-help', `Nur wenn ${showIf} = ${card.querySelector('[data-field-showvalues]').value.split(',').map(v => v.trim()).filter(Boolean).join(' oder ') || '…'}`));
+        preview.append(field);
+      }
+      if (!shown) preview.append(el('p', 'form-preview-empty', 'Noch kein Feld mit Beschriftung.'));
+      const values = { ...schema.buttons };
+      const fill = colorInputs.buttonColor.value, ink = colorInputs.buttonInk.value;
+      if (fill) { values.backgroundColor = fill; values.hoverBackgroundColor = darker(fill); }
+      if (ink) { values.color = ink; values.hoverColor = ink; }
+      preview.append(buttonSample(buttonLabel.value.trim() || 'Absenden', values, schema));
+      // Der Kontrast der Buttonschrift auf der Buttonfarbe, nach WCAG: unter 4,5:1 ist der Text
+      // fuer viele nicht mehr lesbar - das soll man sehen, bevor es auf der Website steht.
+      const ratio = contrast(hex(values.backgroundColor), hex(values.color));
+      note.hidden = ratio === null;
+      if (ratio !== null) {
+        note.className = `contrast-note ${ratio >= 4.5 ? 'contrast-ok' : ratio >= 3 ? 'contrast-warn' : 'contrast-bad'}`;
+        note.textContent = `Buttonschrift auf Buttonfarbe: Kontrast ${ratio.toFixed(1).replace('.', ',')}:1 – ${ratio >= 4.5 ? 'gut lesbar.' : ratio >= 3 ? 'nur für große Schrift ausreichend, für den Button zu wenig.' : 'zu wenig, der Text ist kaum lesbar.'}`;
+      }
+    };
+    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.
+    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);
+      let box = card.querySelector('[data-image-pickers]');
+      if (!box) {
+        box = el('div', 'field-image-pickers'); box.dataset.imagePickers = '';
+        area.hidden = true; area.after(box);
+      }
+      if (box.dataset.signature === options.join('|')) return;
+      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();
+      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 refresh = () => {
+      cards().forEach((card, index) => {
+        card.querySelector('[data-field-index]').textContent = String(index + 1);
+        const type = card.querySelector('[data-field-type]').value;
+        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);
+        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`);
+        const required = card.querySelector('[data-field-required]');
+        // Eine Einwilligung ist immer Pflicht - das Kästchen sagt es, statt es zu verstecken.
+        if (type === 'consent') { required.checked = true; required.disabled = true; }
+        else if (type === 'step') { required.checked = false; required.disabled = true; }
+        else required.disabled = false;
+      });
+      renderPreview();
+    };
+
+    // Die leere Karte für ein neues Feld braucht es nur, solange es kein Feld gibt: mit Skript
+    // kommt jedes weitere über den Knopf.
+    const empty = cards().filter(card => card.classList.contains('field-card-new'));
+    if (cards().length > empty.length) empty.forEach(card => card.remove());
+    add.hidden = false;
+    add.addEventListener('click', () => {
+      list.insertAdjacentHTML('beforeend', template.innerHTML.replaceAll('__n__', String(next++)));
+      const card = list.lastElementChild; card.classList.remove('field-card-new');
+      refresh(); card.querySelector('[data-field-label]').focus();
+    });
+    list.addEventListener('click', event => {
+      const button = event.target.closest('[data-remove-field]');
+      if (!button) return;
+      button.closest('[data-field]').remove(); refresh(); add.focus();
+    });
+    list.addEventListener('input', event => {
+      const card = event.target.closest('[data-field]');
+      if (event.target.matches('[data-field-label]')) {
+        // Der technische Name folgt der Beschriftung, bis jemand ihn selbst schreibt.
+        const name = card.querySelector('[data-field-name]');
+        if (!name.dataset.touched) name.value = slug(event.target.value);
+      }
+      if (event.target.matches('[data-field-name]')) event.target.dataset.touched = event.target.value ? '1' : '';
+      refresh();
+    });
+    list.addEventListener('change', refresh);
+    for (const card of cards()) {
+      const name = card.querySelector('[data-field-name]');
+      if (name.value) name.dataset.touched = '1';
+    }
+
+    for (const input of form.querySelectorAll('[data-form-color]')) {
+      const key = input.dataset.formColor, label = form.querySelector(`label[for="${input.id}"]`).textContent;
+      const id = input.id; input.type = 'hidden'; input.id += '-value';
+      colorInputs[key] = input;
+      const control = createColorControl({
+        id, label, value: input.value, inheritedValue: defaults[key], colors: schema.colors,
+        onChange: value => { input.value = value; renderPreview(); }, onComplete: () => {},
+      });
+      control.querySelector('.color-inherit').textContent = 'Wie die Website';
+      input.after(control);
+    }
+    buttonLabel.addEventListener('input', renderPreview);
+    refresh();
+  }
+}

public/assets/form-steps.js

@@ -0,0 +1,198 @@
+/**
+ * Formulare mit Schritten, Bedingungen und Zusammenfassung.
+ *
+ * Ohne dieses Skript steht das Formular vollständig da: jeder Schritt ein Abschnitt, jedes Feld
+ * sichtbar, der Server prüft beim Absenden, welche Felder galten. Das Skript ändert nur die
+ * Darstellung: ein Schritt nach dem anderen, Felder hinter einer Bedingung nur bei passender
+ * Antwort, und vor dem Absenden eine Zusammenfassung der Eingaben. Es wird nur auf Seiten
+ * geladen, deren Formular eines davon braucht.
+ */
+(() => {
+  const el = (tag, className, text) => {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined) node.textContent = text;
+    return node;
+  };
+
+  const setup = form => {
+    const rules = [...form.querySelectorAll('[data-show-if]')];
+    const steps = [...form.querySelectorAll('[data-step]')];
+    const submit = form.querySelector('.cms-button[type="submit"]');
+    const wantsSummary = form.hasAttribute('data-summary') && steps.length > 0 && submit;
+    if (!rules.length && !steps.length) return;
+
+    // Die gewählten Werte eines Feldes - nur, solange es gilt. Ein Feld in einem ausgeblendeten
+    // Schritt zählt nicht, auch wenn dort noch etwas angekreuzt ist.
+    const valuesOf = name => [...form.querySelectorAll(`[name="${name}"], [name="${name}[]"]`)]
+      .filter(input => !input.closest('[data-inactive]'))
+      .filter(input => input.type === 'checkbox' || input.type === 'radio' ? input.checked : true)
+      .map(input => input.value)
+      .filter(value => value !== '');
+
+    // Bedingungen in Dokumentreihenfolge: ein Feld hängt nur von früheren Feldern ab, also steht
+    // deren Zustand schon fest, wenn es an der Reihe ist.
+    const apply = () => {
+      for (const rule of rules) {
+        const wanted = rule.dataset.showValues.split('|');
+        const have = valuesOf(rule.dataset.showIf);
+        rule.toggleAttribute('data-inactive', !wanted.some(value => have.includes(value)));
+      }
+      // Was nicht gilt, wird nicht geprüft und nicht gesendet: deaktiviert, nicht nur versteckt.
+      for (const input of form.querySelectorAll('input, select, textarea')) {
+        if (input.type === 'hidden') continue;
+        input.disabled = input.closest('[data-inactive]') !== null;
+      }
+    };
+    form.addEventListener('change', () => { apply(); if (steps.length) refreshNav(); });
+    apply();
+
+    if (!steps.length) return;
+
+    // Die Zusammenfassung ist ein eigener, letzter Schritt - erst hier steht der Absendeknopf.
+    let summary = null;
+    if (wantsSummary) {
+      summary = el('div', 'form-step form-summary');
+      summary.setAttribute('data-step', '');
+      const title = el('p', 'form-step-title', 'Zusammenfassung');
+      title.tabIndex = -1;
+      summary.append(title, el('p', 'form-step-intro', 'Bitte prüfen Sie Ihre Angaben. Über „Ändern“ kommen Sie zum jeweiligen Schritt zurück.'));
+      summary.append(el('div', 'form-summary-body'));
+      steps[steps.length - 1].after(summary);
+      steps.push(summary);
+    }
+
+    const progress = el('ol', 'form-progress');
+    progress.setAttribute('aria-label', 'Schritte des Formulars');
+    steps.forEach((step, index) => {
+      const item = el('li', 'form-progress-step');
+      item.append(el('span', 'form-progress-number', String(index + 1)), el('span', 'form-progress-title', step.querySelector('.form-step-title')?.textContent.trim() || `Schritt ${index + 1}`));
+      progress.append(item);
+    });
+    form.insertBefore(progress, steps[0]);
+
+    const nav = el('div', 'form-step-nav');
+    const back = el('button', 'button cms-button form-step-back', 'Zurück');
+    back.type = 'button';
+    const next = el('button', 'button cms-button form-step-next', 'Weiter');
+    next.type = 'button';
+    nav.append(back, next);
+    (submit || form).before(nav);
+    if (submit) nav.append(submit);
+
+    const visible = () => steps.map((step, index) => step.hasAttribute('data-inactive') ? -1 : index).filter(index => index >= 0);
+    let current = 0;
+
+    const labelOf = field => field.dataset.label || '';
+    const valueOf = field => {
+      const inputs = [...field.querySelectorAll('input, select, textarea')].filter(input => !input.disabled);
+      const picked = inputs.filter(input => input.type === 'checkbox' || input.type === 'radio' ? input.checked : input.value.trim() !== '');
+      if (!picked.length) return '';
+      const unit = field.querySelector('.form-unit')?.textContent || '';
+      return picked.map(input => {
+        if (input.type === 'checkbox' && input.value === 'ja' && field.querySelector('.check-row label')) return 'Ja';
+        if (input.tagName === 'SELECT') return input.selectedOptions[0]?.textContent || input.value;
+        return input.value + (unit ? ` ${unit}` : '');
+      }).join(', ');
+    };
+
+    const renderSummary = () => {
+      const body = summary.querySelector('.form-summary-body');
+      body.replaceChildren();
+      steps.forEach((step, index) => {
+        if (step === summary || step.hasAttribute('data-inactive')) return;
+        const block = el('section', 'form-summary-step');
+        const head = el('div', 'form-summary-head');
+        head.append(el('h4', 'form-summary-title', step.querySelector('.form-step-title')?.textContent.trim() || `Schritt ${index + 1}`));
+        const change = el('button', 'form-summary-change', 'Ändern');
+        change.type = 'button';
+        change.setAttribute('aria-label', `${head.firstChild.textContent} ändern`);
+        change.addEventListener('click', () => show(index));
+        head.append(change);
+        block.append(head);
+        const list = el('dl', 'form-summary-list');
+        for (const field of step.querySelectorAll('[data-field]')) {
+          if (field.closest('[data-inactive]')) continue;
+          const value = valueOf(field);
+          list.append(el('dt', '', labelOf(field)), el('dd', value ? '' : 'form-summary-empty', value || '—'));
+        }
+        block.append(list);
+        body.append(block);
+      });
+    };
+
+    const refreshNav = () => {
+      const order = visible();
+      const position = order.indexOf(current);
+      const last = position === order.length - 1;
+      back.hidden = position <= 0;
+      next.hidden = last;
+      if (submit) submit.hidden = !last;
+      progress.querySelectorAll('li').forEach((item, index) => {
+        item.hidden = steps[index].hasAttribute('data-inactive');
+        item.classList.toggle('is-done', order.indexOf(index) < position);
+        if (index === current) item.setAttribute('aria-current', 'step'); else item.removeAttribute('aria-current');
+      });
+    };
+
+    const show = (index, focus = true) => {
+      current = index;
+      steps.forEach((step, i) => { step.hidden = i !== index; });
+      if (summary && steps[index] === summary) renderSummary();
+      refreshNav();
+      if (focus) {
+        steps[index].querySelector('.form-step-title')?.focus({ preventScroll: true });
+        if (progress.getBoundingClientRect().top < 0) progress.scrollIntoView({ block: 'start' });
+      }
+    };
+
+    // Erst der Schritt selbst prüft seine Felder: der Browser meldet das erste ungültige Feld,
+    // eine Pflicht-Mehrfachauswahl ohne Kreuz meldet die Gruppe.
+    const valid = step => {
+      for (const group of step.querySelectorAll('[data-required]')) {
+        if (group.closest('[data-inactive]')) continue;
+        const note = group.querySelector('.field-error[data-live]');
+        if (!group.querySelector('input:checked')) {
+          if (!note) group.append(Object.assign(el('p', 'field-error', 'Bitte wähle mindestens eine Option.'), { dataset: { live: '' } }));
+          else note.hidden = false;
+          group.classList.add('has-error');
+          group.querySelector('input')?.focus();
+          return false;
+        }
+        if (note) note.remove();
+        group.classList.remove('has-error');
+      }
+      for (const input of step.querySelectorAll('input, select, textarea')) {
+        if (input.disabled || input.checkValidity()) continue;
+        input.reportValidity();
+        return false;
+      }
+      return true;
+    };
+
+    next.addEventListener('click', () => {
+      if (!valid(steps[current])) return;
+      const order = visible();
+      const following = order[order.indexOf(current) + 1];
+      if (following !== undefined) show(following);
+    });
+    back.addEventListener('click', () => {
+      const order = visible();
+      const previous = order[order.indexOf(current) - 1];
+      if (previous !== undefined) show(previous);
+    });
+    // Enter in einem Feld geht zum nächsten Schritt, statt das Formular vorzeitig abzuschicken.
+    form.addEventListener('keydown', event => {
+      if (event.key !== 'Enter' || event.target.tagName === 'TEXTAREA' || event.target.tagName === 'BUTTON') return;
+      if (!next.hidden) { event.preventDefault(); next.click(); }
+    });
+
+    // Nach einer Ablehnung durch den Server: der erste Schritt mit einem Fehler, sonst der erste.
+    const failed = steps.findIndex(step => step.querySelector('.has-error'));
+    const order = visible();
+    show(failed >= 0 ? failed : (order[0] ?? 0), false);
+    form.classList.add('form-steps-ready');
+  };
+
+  document.querySelectorAll('form.block-form').forEach(setup);
+})();

public/assets/kantsites-logo.svg

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

public/assets/library-previews.js

@@ -0,0 +1,77 @@
+/**
+ * Line art for the toolbox.
+ *
+ * Flatsome ships a PNG per element. Drawings are better here: they are a few hundred bytes
+ * instead of a folder of bitmaps, they take the colour of the surface they sit on, and they stay
+ * sharp on a screen of any density. Every shape lives in the same 24x16 field so the entries
+ * line up in the grid.
+ *
+ * Each value is the inside of an `<svg>`; `stroke` and `fill` come from the wrapper, so a shape
+ * only says what it is, not what colour it has.
+ */
+
+/** A filled bar, the building block most of these are made of. */
+const bar = (x, y, width, height = 2) => `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${Math.min(height, 2) / 2}" fill="currentColor" stroke="none"/>`;
+/** Several bars under each other, as a paragraph of text. */
+const lines = (...widths) => widths.map((width, index) => bar(3, 4 + index * 3.4, width, 1.7)).join('');
+
+export const PREVIEWS = {
+  // Aufbau
+  section: '<rect x="1" y="3" width="22" height="10" rx="1.5" fill="currentColor" opacity=".14" stroke="none"/><rect x="1" y="3" width="22" height="10" rx="1.5"/>',
+  row: '<rect x="1" y="3" width="22" height="10" rx="1.5"/><path d="M12 3.6v8.8"/>',
+  column: '<rect x="8" y="1.5" width="8" height="13" rx="1.5"/>',
+
+  // Inhalt
+  heading: `${bar(3, 3.6, 18, 3)}${bar(3, 9, 11, 2)}`,
+  text: lines(18, 16, 11),
+  image: '<rect x="2" y="2.5" width="20" height="11" rx="1.5"/><circle cx="7.5" cy="6.5" r="1.4" fill="currentColor" stroke="none"/><path d="M3.2 12l5-4.4 3.6 3.1 3-2.6 5 3.9"/>',
+  button: '<rect x="4" y="4.5" width="16" height="7" rx="2"/>',
+  icon: '<path d="M12 2.6l2.7 5.6 6 .8-4.4 4.1 1.1 5.8" transform="scale(.86) translate(2 .4)"/><path d="M12 2.6l-2.7 5.6-6 .8 4.4 4.1-1.1 5.8" transform="scale(.86) translate(2 .4)"/>',
+  divider: '<path d="M2 8h20"/>',
+  spacer: '<path d="M3 3h18M3 13h18"/><path d="M12 5.6v4.8M10.4 6.8L12 5.2l1.6 1.6M10.4 9.2L12 10.8l1.6-1.6"/>',
+
+  // Bausteine
+  iconcard: `<rect x="3" y="2.5" width="4.5" height="4.5" rx="1.2"/>${bar(3, 9, 12, 1.9)}${bar(3, 12, 8, 1.5)}`,
+  stat: `${bar(3, 3, 9, 5)}${bar(3, 10.5, 14, 1.7)}`,
+  quote: `<path d="M3.4 7.6c0-2 1.3-3.2 2.9-3.4M8.4 7.6c0-2 1.3-3.2 2.9-3.4"/><path d="M3.4 7.6h2.9v3.2H3.4zM8.4 7.6h2.9v3.2H8.4z"/>${bar(14, 5.6, 7, 1.6)}${bar(14, 9, 5, 1.6)}`,
+  cta: `${bar(2.5, 4, 12, 2.4)}<rect x="2.5" y="8.6" width="9" height="5" rx="1.6"/><rect x="14.5" y="8.6" width="7" height="5" rx="1.6" fill="currentColor" stroke="none"/>`,
+  contact: '<rect x="2.5" y="3.5" width="19" height="9" rx="1.5"/><path d="M2.9 4.4l9.1 5 9.1-5"/>',
+  logos: [2.5, 8, 13.5, 19].map(x => `<rect x="${x}" y="5.5" width="4.5" height="5" rx="1.2"/>`).join(''),
+  progress: '<rect x="2" y="6" width="20" height="4" rx="2"/><rect x="2" y="6" width="12" height="4" rx="2" fill="currentColor" stroke="none"/>',
+  social: [4.5, 12, 19.5].map(x => `<circle cx="${x}" cy="8" r="3"/>`).join('') + '<path d="M3.6 8h1.8M11.1 8h1.8M18.6 8h1.8"/>',
+
+  // Gruppen
+  gallery: [2.5, 12.5].flatMap(x => [2.5, 8.5].map(y => `<rect x="${x}" y="${y}" width="9" height="5" rx="1.2"/>`)).join(''),
+  accordion: '<rect x="2.5" y="2" width="19" height="4" rx="1.2"/><path d="M18 3.6l1.3 1.3 1.3-1.3"/><rect x="2.5" y="7.5" width="19" height="3" rx="1.2"/><rect x="2.5" y="12" width="19" height="3" rx="1.2"/>',
+  accordionitem: '<rect x="2.5" y="5.5" width="19" height="5" rx="1.2"/><path d="M17.6 7.4l1.3 1.3 1.3-1.3"/>',
+  tabs: '<rect x="2.5" y="2" width="6" height="3.5" rx="1" fill="currentColor" stroke="none"/><rect x="9.5" y="2" width="6" height="3.5" rx="1"/><rect x="2.5" y="6.5" width="19" height="7.5" rx="1.2"/>',
+  tabitem: '<rect x="7" y="2.5" width="10" height="4" rx="1" fill="currentColor" stroke="none"/><rect x="2.5" y="7.5" width="19" height="6" rx="1.2"/>',
+  slider: '<rect x="5.5" y="3" width="13" height="10" rx="1.5"/><path d="M3.4 6.6L1.6 8l1.8 1.4M20.6 6.6L22.4 8l-1.8 1.4"/>',
+
+  // Seite und Daten
+  postlist: '<rect x="2.5" y="2.5" width="7" height="5" rx="1.2"/><rect x="2.5" y="8.5" width="7" height="5" rx="1.2"/>'
+    + `${bar(11.5, 3.2, 10, 1.6)}${bar(11.5, 6, 7, 1.4)}${bar(11.5, 9.2, 10, 1.6)}${bar(11.5, 12, 7, 1.4)}`,
+  postnav: '<path d="M9.4 4.6L6 8l3.4 3.4M14.6 4.6L18 8l-3.4 3.4"/><path d="M6.4 8h3.6M14 8h3.6"/>',
+  breadcrumb: `${bar(2, 7.2, 5, 1.7)}<path d="M8.6 6.3l1.6 1.7-1.6 1.7"/>${bar(11.6, 7.2, 4, 1.7)}<path d="M17.2 6.3l1.6 1.7-1.6 1.7"/>${bar(20.2, 7.2, 2, 1.7)}`,
+  menu: `${bar(2, 7.2, 5, 1.8)}${bar(9, 7.2, 6, 1.8)}${bar(17, 7.2, 5, 1.8)}`,
+  form: '<rect x="2.5" y="2" width="19" height="3.6" rx="1.2"/><rect x="2.5" y="6.8" width="19" height="3.6" rx="1.2"/><rect x="2.5" y="11.6" width="8" height="3.4" rx="1.2" fill="currentColor" stroke="none"/>',
+  legal: `${bar(2, 4, 20, 1.6)}${bar(2, 7.4, 16, 1.6)}${bar(2, 10.8, 11, 1.6)}`,
+  partialref: '<rect x="2.5" y="4.5" width="13" height="9" rx="1.5"/><path d="M6.5 4.5V2h13v9h-2.5"/>',
+  embed: '<rect x="2" y="2.5" width="20" height="11" rx="1.5"/><path d="M10.2 5.6l4.6 2.4-4.6 2.4z" fill="currentColor" stroke="none"/>',
+};
+
+/** The picture for one element type, ready to drop into the markup. */
+export function preview(type) {
+  const shape = PREVIEWS[type];
+  if (!shape) return '';
+  return `<svg viewBox="0 0 24 16" width="34" height="23" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${shape}</svg>`;
+}
+
+/** A row of columns, for the entries that add a row with a column count. */
+export function rowPreview(columns) {
+  const gap = 1.4;
+  const inner = (22 - gap * (columns - 1)) / columns;
+  const cells = Array.from({ length: columns }, (_, index) =>
+    `<rect x="${(1 + index * (inner + gap)).toFixed(2)}" y="3" width="${inner.toFixed(2)}" height="10" rx="1.2"/>`).join('');
+  return `<svg viewBox="0 0 24 16" width="34" height="23" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round" aria-hidden="true" focusable="false">${cells}</svg>`;
+}

public/assets/lightbox.js

@@ -0,0 +1,184 @@
+/*
+ * Der Bildbetrachter.
+ *
+ * Ohne dieses Skript ist ein vergrößerbares Bild schlicht ein Verweis auf die große Fassung: ein
+ * Klick öffnet sie, zurück führt die Zurück-Taste. Das ist die Grundlage, und sie funktioniert
+ * immer. Dieses Skript fängt den Klick ab und zeigt das Bild stattdessen über der Seite - mit
+ * Blättern, wenn es zu einer Galerie gehört.
+ *
+ * Benutzt wird <dialog>: der Browser bringt damit das Fangen des Fokus, das Schließen mit Escape
+ * und die Auszeichnung als Dialog schon mit. Eine nachgebaute Fassung aus <div> und Tastatur-
+ * abfragen wäre mehr Code und weniger zugänglich.
+ */
+(() => {
+    const zoomable = [...document.querySelectorAll('a[data-zoom]')];
+    if (0 === zoomable.length) {
+        return;
+    }
+
+    const dialog = document.createElement('dialog');
+    dialog.className = 'zoom-dialog';
+    dialog.innerHTML = `
+        <figure class="zoom-figure">
+            <img class="zoom-image" alt="">
+            <figcaption class="zoom-caption"></figcaption>
+        </figure>
+        <button class="zoom-close" type="button" aria-label="Schließen">×</button>
+        <button class="zoom-prev" type="button" aria-label="Vorheriges Bild">‹</button>
+        <button class="zoom-next" type="button" aria-label="Nächstes Bild">›</button>
+        <p class="zoom-counter" aria-live="polite"></p>
+    `;
+    document.body.append(dialog);
+
+    const bild = dialog.querySelector('.zoom-image');
+    const beschriftung = dialog.querySelector('.zoom-caption');
+    const zaehler = dialog.querySelector('.zoom-counter');
+    const zurueck = dialog.querySelector('.zoom-prev');
+    const vor = dialog.querySelector('.zoom-next');
+
+    /** Die Bilder, zwischen denen geblättert wird: die der Galerie, sonst nur dieses eine. */
+    const gruppeVon = (link) => {
+        const galerie = link.closest('[data-zoom-group]');
+
+        return galerie ? [...galerie.querySelectorAll('a[data-zoom]')] : [link];
+    };
+
+    let gruppe = [];
+    let stelle = 0;
+
+    const zeige = (index) => {
+        stelle = (index + gruppe.length) % gruppe.length;
+        const link = gruppe[stelle];
+        const inneres = link.querySelector('img');
+        bild.src = link.href;
+        bild.alt = inneres ? inneres.alt : '';
+        const text = link.dataset.caption || '';
+        beschriftung.textContent = text;
+        beschriftung.hidden = '' === text;
+        const mehrere = gruppe.length > 1;
+        zurueck.hidden = !mehrere;
+        vor.hidden = !mehrere;
+        zaehler.hidden = !mehrere;
+        zaehler.textContent = mehrere ? `${stelle + 1} von ${gruppe.length}` : '';
+    };
+
+    for (const link of zoomable) {
+        link.addEventListener('click', event => {
+            // Mit gedrückter Zusatztaste oder mittlerer Maustaste bleibt es ein normaler Verweis:
+            // wer ein Bild in einem neuen Reiter öffnen will, soll das können.
+            if (event.metaKey || event.ctrlKey || event.shiftKey || 1 === event.button) {
+                return;
+            }
+            event.preventDefault();
+            gruppe = gruppeVon(link);
+            zeige(gruppe.indexOf(link));
+            dialog.showModal();
+        });
+    }
+
+    zurueck.addEventListener('click', () => zeige(stelle - 1));
+    vor.addEventListener('click', () => zeige(stelle + 1));
+    dialog.querySelector('.zoom-close').addEventListener('click', () => dialog.close());
+    // Ein Klick neben das Bild schließt - erwartet, und der Dialog selbst ist die Fläche daneben.
+    dialog.addEventListener('click', event => {
+        if (event.target === dialog) {
+            dialog.close();
+        }
+    });
+    dialog.addEventListener('keydown', event => {
+        if (1 === gruppe.length) {
+            return;
+        }
+        if ('ArrowLeft' === event.key) {
+            event.preventDefault();
+            zeige(stelle - 1);
+        }
+        if ('ArrowRight' === event.key) {
+            event.preventDefault();
+            zeige(stelle + 1);
+        }
+    });
+})();
+
+/*
+ * Der PDF-Betrachter - in derselben Datei wie der Bildbetrachter, damit eine Seite mit beidem
+ * nicht zwei Skripte laedt.
+ *
+ * Ohne dieses Skript ist ein Link auf ein PDF ein gewöhnlicher Link: der Browser öffnet die
+ * Datei. Das Skript zeigt sie stattdessen in einem Rahmen über der Seite, mit dem Betrachter,
+ * den der Browser ohnehin mitbringt - kein eigener Nachbau, der ein Megabyte wiegt.
+ *
+ * Wo der Browser keinen solchen Betrachter hat oder ihn im Rahmen nur halb zeigt, bleibt es beim
+ * neuen Tab: Chrome auf Android hat keinen, und Safari auf dem iPhone zeigt im Rahmen nur die
+ * erste Seite. Ein Link mit „In neuem Tab öffnen“ bleibt ohnehin, was er ist.
+ */
+(() => {
+    const PDF = /^\/media\/[a-f0-9]{32}\.pdf$/;
+    const links = [...document.querySelectorAll('a[href]')].filter(link => {
+        const url = new URL(link.href, location.href);
+
+        return url.origin === location.origin && PDF.test(url.pathname) && '_blank' !== link.target;
+    });
+    if (0 === links.length) {
+        return;
+    }
+    const eingebettet = false !== navigator.pdfViewerEnabled && !matchMedia('(pointer: coarse)').matches;
+
+    let dialog = null;
+    let rahmen = null;
+    let titel = null;
+    let laden = null;
+
+    const baue = () => {
+        dialog = document.createElement('dialog');
+        dialog.className = 'pdf-dialog';
+        dialog.setAttribute('aria-labelledby', 'pdf-dialog-title');
+        dialog.innerHTML = `
+            <div class="pdf-bar">
+                <p class="pdf-title" id="pdf-dialog-title"></p>
+                <a class="pdf-action pdf-download" download>Herunterladen</a>
+                <a class="pdf-action pdf-open" target="_blank" rel="noopener">Im neuen Tab</a>
+                <button class="pdf-close" type="button" aria-label="Schließen">×</button>
+            </div>
+            <iframe class="pdf-frame" title="PDF-Dokument"></iframe>
+        `;
+        document.body.append(dialog);
+        rahmen = dialog.querySelector('.pdf-frame');
+        titel = dialog.querySelector('.pdf-title');
+        laden = [dialog.querySelector('.pdf-download'), dialog.querySelector('.pdf-open')];
+        dialog.querySelector('.pdf-close').addEventListener('click', () => dialog.close());
+        dialog.addEventListener('click', event => {
+            if (event.target === dialog) {
+                dialog.close();
+            }
+        });
+        // Der Rahmen wird geleert, sonst läuft ein eingebettetes Video oder Audio im PDF weiter
+        // und das nächste Öffnen zeigt kurz das vorige Dokument.
+        dialog.addEventListener('close', () => rahmen.removeAttribute('src'));
+    };
+
+    for (const link of links) {
+        link.addEventListener('click', event => {
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || 1 === event.button) {
+                return;
+            }
+            event.preventDefault();
+            if (!eingebettet) {
+                window.open(link.href, '_blank', 'noopener');
+
+                return;
+            }
+            if (null === dialog) {
+                baue();
+            }
+            const name = (link.getAttribute('aria-label') || link.textContent || '').trim();
+            titel.textContent = name || 'Dokument';
+            rahmen.title = name ? `PDF: ${name}` : 'PDF-Dokument';
+            for (const aktion of laden) {
+                aktion.href = link.href;
+            }
+            rahmen.src = link.href;
+            dialog.showModal();
+        });
+    }
+})();

public/assets/live-search.js

@@ -0,0 +1,94 @@
+import { setupPicker } from './page-picker.js';
+
+const form = document.querySelector('[data-live-search]');
+if (form) {
+  const results = document.querySelector('#list-results');
+  const status = document.querySelector('#search-status');
+  const error = document.querySelector('#search-error');
+  const search = form.querySelector('input[type="search"]');
+  const fields = [...form.querySelectorAll('input[name],select[name]')];
+  let timer, controller, sequence = 0, composing = false;
+
+  const cancel = () => { clearTimeout(timer); controller?.abort(); sequence++; results.removeAttribute('aria-busy'); };
+  const updateReset = () => {
+    form.querySelector('[data-search-reset]').hidden = !fields.some(field => field.value !== (field.dataset.searchDefault || ''));
+  };
+  const urlFor = parameters => {
+    const url = new URL(form.action);
+    for (const [name, value] of Object.entries(parameters)) {
+      const fallback = fields.find(field => field.name === name)?.dataset.searchDefault || (name === 'seite' ? '1' : '');
+      if (String(value) !== fallback) url.searchParams.set(name, String(value));
+    }
+    return url;
+  };
+  const currentUrl = () => urlFor({ ...Object.fromEntries(new FormData(form)), q: search.value.trim(), seite: 1 });
+  const restoreFilters = url => {
+    for (const field of fields) field.value = url.searchParams.get(field.name) ?? field.dataset.searchDefault ?? '';
+    updateReset();
+  };
+
+  async function load(url, navigation = 'replace', focusResults = false) {
+    cancel(); const request = sequence;
+    controller = new AbortController(); const signal = controller.signal;
+    results.setAttribute('aria-busy', 'true'); error.hidden = true;
+    status.textContent = 'Ergebnisse werden gesucht …';
+    updateReset();
+    try {
+      const response = await fetch(url, { signal, credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest', Accept: 'application/json' } });
+      if (response.redirected || response.status === 401 || response.status === 403) throw new Error('Deine Sitzung ist abgelaufen. Bitte erneut anmelden und die Suche wiederholen.');
+      if (!response.ok) throw new Error('Die Suche konnte nicht geladen werden. Die bisherigen Ergebnisse bleiben sichtbar.');
+      const data = await response.json();
+      if (signal.aborted || request !== sequence) return;
+      if (typeof data.html !== 'string' || !data.parameters || !Number.isInteger(data.total)) throw new Error('Die Suchantwort konnte nicht verarbeitet werden.');
+      const parsed = new DOMParser().parseFromString(data.html, 'text/html');
+      results.replaceChildren(...parsed.body.childNodes);
+      results.querySelectorAll('.content-picker').forEach(picker => setupPicker(picker));
+      // Keep create/upload forms outside the replaced list on the same filtered screen.
+      const context = { _list_query: data.parameters.q, _list_status: data.parameters.status, _list_limit: data.parameters.limit, _list_page: data.parameters.seite, q: data.parameters.q, archiv: data.parameters.archiv, seite: data.parameters.seite };
+      for (const [name, value] of Object.entries(context)) if (value !== undefined) {
+        document.querySelectorAll(`form:not([data-live-search]) input[type="hidden"][name="${name}"]`).forEach(input => { input.value = value; });
+      }
+      const canonical = urlFor(data.parameters);
+      if (navigation !== 'none' && canonical.href !== location.href) history[navigation === 'push' ? 'pushState' : 'replaceState'](null, '', canonical);
+      status.textContent = `${data.total} Treffer${data.parameters.q ? ` für „${data.parameters.q}“` : ''}.`;
+      if (focusResults) { results.focus({ preventScroll: true }); results.scrollIntoView({ block: 'start' }); }
+    } catch (failure) {
+      if (signal.aborted || request !== sequence) return;
+      error.querySelector('[role="alert"]').textContent = failure instanceof TypeError ? 'Verbindung unterbrochen. Die bisherigen Ergebnisse bleiben sichtbar.' : failure.message;
+      error.hidden = false; status.textContent = 'Suche fehlgeschlagen.';
+    } finally {
+      if (request === sequence) results.removeAttribute('aria-busy');
+    }
+  }
+
+  const queue = () => {
+    cancel(); updateReset();
+    if (composing) return;
+    error.hidden = true; status.textContent = 'Ergebnisse werden gesucht …'; results.setAttribute('aria-busy', 'true');
+    timer = setTimeout(() => load(currentUrl()), search.value ? 220 : 0);
+  };
+  search.addEventListener('compositionstart', () => { composing = true; cancel(); });
+  search.addEventListener('compositionend', () => { composing = false; queue(); });
+  search.addEventListener('input', queue);
+  form.addEventListener('change', event => { if (event.target.matches('select')) load(currentUrl(), 'push'); });
+  form.addEventListener('submit', event => { event.preventDefault(); if (!composing) load(currentUrl()); });
+  form.querySelector('[data-search-reset]').addEventListener('click', event => {
+    event.preventDefault(); const url = new URL(form.action); restoreFilters(url); load(url, 'push'); search.focus();
+  });
+  results.addEventListener('click', event => {
+    const link = event.target.closest('.pager a');
+    if (!link || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+    event.preventDefault(); load(new URL(link.href), 'push', true);
+  });
+  // A delayed response must not overwrite a form the user has just started editing.
+  results.addEventListener('input', () => {
+    if (results.getAttribute('aria-busy') === 'true') { cancel(); status.textContent = 'Suche angehalten, während du einen Eintrag bearbeitest.'; }
+  });
+  window.addEventListener('popstate', () => { const url = new URL(location.href); restoreFilters(url); load(url, 'none'); });
+  window.addEventListener('pagehide', cancel);
+  document.querySelector('#search-retry').addEventListener('click', () => load(currentUrl()));
+  form.classList.add('live-search-ready');
+  status.textContent = 'Die Suche aktualisiert sich beim Tippen.';
+  search.setAttribute('aria-controls', results.id);
+  updateReset();
+}

public/assets/media-dialog.css

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

public/assets/media-drop.js

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

public/assets/media.js

@@ -1,6 +1,47 @@
 const element = (tag, text, className) => { const node = document.createElement(tag); if (text) node.textContent = text; if (className) node.className = className; return node; };
 
-export function openMedia({ multiple = false, onChoose } = {}) {
+const previews = new Map();
+async function previewItem(id) {
+  if (!previews.has(id)) previews.set(id, fetch(document.querySelector('meta[name="admin-base"]').content + '/api/media/' + id, { credentials: 'same-origin' }).then(async response => {
+    if (!response.ok || response.redirected) throw new Error('Bild nicht erreichbar');
+    return (await response.json()).item;
+  }).catch(error => { previews.delete(id); throw error; }));
+  return previews.get(id);
+}
+
+/** A preview of the current selection, including small originals without a 480 px variant. */
+export function createMediaPreview(initial = {}) {
+  const wrap = element('figure', '', 'selected-media-preview');
+  const image = element('img'); image.alt = ''; image.decoding = 'async'; image.referrerPolicy = 'no-referrer'; image.hidden = true;
+  const caption = element('figcaption'); caption.setAttribute('aria-live', 'polite');
+  wrap.append(image, caption); let sequence = 0;
+  const update = async ({ src = '', mediaId = '', label = '' } = {}) => {
+    const request = ++sequence; image.hidden = true; image.removeAttribute('src');
+    caption.textContent = src || mediaId ? 'Bildvorschau wird geladen …' : 'Kein Bild ausgewählt';
+    if (!src && !mediaId) return;
+    try {
+      if (!src && /^[a-f0-9]{32}$/.test(mediaId)) {
+        const item = await previewItem(mediaId);
+        if (request !== sequence) return;
+        src = item.variants[0]?.src || ''; label ||= item.title;
+      }
+      const url = new URL(src, location.origin);
+      if (!(src.startsWith('/') && !src.startsWith('//') && url.origin === location.origin) && url.protocol !== 'https:') throw new Error();
+      if (!src) throw new Error();
+      const description = label || decodeURIComponent(url.pathname.split('/').pop()) || 'Ausgewähltes Bild';
+      image.onload = () => { if (request === sequence) { image.hidden = false; caption.textContent = description; } };
+      image.onerror = () => { if (request === sequence) { image.hidden = true; caption.textContent = 'Bildvorschau nicht verfügbar. Bildadresse prüfen oder ein anderes Bild wählen.'; } };
+      image.src = url.href;
+    } catch {
+      if (request === sequence) caption.textContent = 'Bildvorschau nicht verfügbar. Bildadresse prüfen oder ein anderes Bild wählen.';
+    }
+  };
+  update(initial);
+  return { element: wrap, update };
+}
+
+/** needsAlt: false for images that never appear as content, such as the site icon. */
+export function openMedia({ multiple = false, onChoose, needsAlt = true } = {}) {
   const opener = document.activeElement;
   const dialog = element('dialog', '', 'media-dialog'); dialog.id = 'media-dialog';
   dialog.setAttribute('aria-labelledby', 'media-title');
@@ -20,10 +61,11 @@ export function openMedia({ multiple = false, onChoose } = {}) {
     $('#media-insert').disabled = state || !selected.size;
   };
   async function api(path = '', body) {
-    const response = await fetch('/admin/api/media' + path, body === undefined ? {} : { method: 'POST', headers: { 'X-CSRF-Token': token, ...(body instanceof FormData ? {} : { 'Content-Type': 'application/json' }) }, body: body instanceof FormData ? body : JSON.stringify(body) });
+    const response = await fetch(document.querySelector('meta[name="admin-base"]').content + '/api/media' + path, body === undefined ? {} : { method: 'POST', headers: { 'X-CSRF-Token': token, ...(body instanceof FormData ? {} : { 'Content-Type': 'application/json' }) }, body: body instanceof FormData ? body : JSON.stringify(body) });
     if (response.redirected) throw new Error('Sitzung abgelaufen. Bitte erneut anmelden.');
     const data = await response.json().catch(() => ({}));
     if (!response.ok) throw new Error(data.error || `Medienanfrage fehlgeschlagen (${response.status}).`);
+    for (const item of data.items || (data.item ? [data.item] : [])) previews.set(item.id, Promise.resolve(item));
     return data;
   }
   function render() {
@@ -87,15 +129,81 @@ export function openMedia({ multiple = false, onChoose } = {}) {
     }
     $('#media-upload').value = ''; lock(false); render(); details(); error(failures.join(' · '));
   });
-  $('#media-insert').hidden = !onChoose; $('#decorative-choice').hidden = !onChoose;
+  $('#media-insert').hidden = !onChoose; $('#decorative-choice').hidden = !onChoose || !needsAlt;
   $('#media-insert').addEventListener('click', () => {
     const chosen = [...selected].map(id => items.find(item => item.id === id)).filter(item => item && !item.archived);
     const decorative = $('#media-decorative').checked;
-    if (!decorative && chosen.some(item => !item.alt.trim())) { error('Bitte für die gewählten Bilder einen Alternativtext speichern oder die dekorative Verwendung wählen.'); return; }
+    if (needsAlt && !decorative && chosen.some(item => !item.alt.trim())) { error('Bitte für die gewählten Bilder einen Alternativtext speichern oder die dekorative Verwendung wählen.'); return; }
     onChoose(chosen.map(item => ({ ...item, decorative }))); dialog.close();
   });
   dialog.showModal(); lock(true);
   api().then(data => { items = data.items; token = data.csrfToken; lock(false); render(); }).catch(err => { lock(false); error(err.message || 'Medien konnten nicht geladen werden. Bitte erneut öffnen.'); });
 }
 
+/**
+ * Ein PDF aus der Mediathek wählen - oder eines hochladen und gleich wählen.
+ *
+ * Ein eigener, schmaler Dialog statt einer Betriebsart des Bilderdialogs: ein PDF hat keine
+ * Vorschau, keinen Alternativtext und keine Mehrfachauswahl. Gewählt wird die Adresse, die dann
+ * im Linkziel steht.
+ */
+export function openDocuments({ onChoose } = {}) {
+  const opener = document.activeElement;
+  const dialog = element('dialog', '', 'media-dialog document-dialog');
+  dialog.setAttribute('aria-labelledby', 'document-title');
+  dialog.innerHTML = `<div class="media-heading"><div><p class="eyebrow">DOKUMENTE</p><h2 id="document-title">PDF wählen</h2></div><button class="secondary" id="document-close">Schließen</button></div>
+    <p class="panel-hint">PDF bis 20 MB. Es wird unverändert abgelegt und ist über seine Adresse öffentlich erreichbar – nichts Vertrauliches hochladen. Ohne „In neuem Tab öffnen“ zeigt die Website es in einem Betrachter über der Seite.</p>
+    <div class="media-tools"><div><label for="document-search">PDFs suchen</label><input id="document-search" type="search" placeholder="Titel"></div><div><label for="document-upload">PDF hochladen</label><input id="document-upload" type="file" accept="application/pdf,.pdf" disabled></div></div>
+    <p id="document-status" role="status" aria-live="polite">Wird geladen …</p><p id="document-error" class="media-error" role="alert" hidden></p>
+    <div id="document-list" class="document-list" role="group" aria-label="PDF auswählen"></div>
+    <div class="media-footer"><span></span><button id="document-insert" class="primary" disabled>PDF übernehmen</button></div>`;
+  document.body.append(dialog);
+  const $ = selector => dialog.querySelector(selector);
+  let items = [], chosen = null, token;
+  const error = message => { $('#document-error').textContent = message; $('#document-error').hidden = !message; };
+  const size = bytes => `${(bytes / 1048576).toLocaleString('de', { maximumFractionDigits: 1, minimumFractionDigits: 1 })} MB`;
+  const base = document.querySelector('meta[name="admin-base"]').content + '/api/dokumente';
+  function render() {
+    const query = $('#document-search').value.toLocaleLowerCase('de');
+    const visible = items.filter(item => !item.archived && item.title.toLocaleLowerCase('de').includes(query));
+    $('#document-list').replaceChildren();
+    for (const item of visible) {
+      const card = element('button', '', 'document-card'); card.type = 'button';
+      card.setAttribute('aria-pressed', String(chosen?.id === item.id));
+      card.append(element('span', 'PDF', 'document-badge'), element('strong', item.title), element('span', size(item.bytes)));
+      card.addEventListener('click', () => { chosen = item; render(); card.focus(); });
+      card.addEventListener('dblclick', () => { chosen = item; $('#document-insert').click(); });
+      $('#document-list').append(card);
+    }
+    if (!visible.length) $('#document-list').append(element('p', items.length ? 'Kein PDF mit diesem Titel.' : 'Noch keine PDFs. Lade oben eines hoch.', 'muted'));
+    $('#document-status').textContent = `${items.filter(item => !item.archived).length} PDFs${chosen ? ` · gewählt: ${chosen.title}` : ''}`;
+    $('#document-insert').disabled = !chosen;
+  }
+  $('#document-search').addEventListener('input', render);
+  $('#document-close').addEventListener('click', () => dialog.close());
+  dialog.addEventListener('close', () => { dialog.remove(); if (opener?.isConnected) opener.focus(); });
+  $('#document-upload').addEventListener('change', async () => {
+    const file = $('#document-upload').files[0]; if (!file) return;
+    error('');
+    if (file.size > 20 * 1024 * 1024) { error(`${file.name}: größer als 20 MB`); $('#document-upload').value = ''; return; }
+    $('#document-status').textContent = `Wird hochgeladen: ${file.name}`;
+    try {
+      const form = new FormData(); form.append('file', file);
+      const response = await fetch(base + '/upload', { method: 'POST', headers: { 'X-CSRF-Token': token }, body: form });
+      if (response.redirected) throw new Error('Sitzung abgelaufen. Bitte erneut anmelden.');
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(data.error || `Upload fehlgeschlagen (${response.status}).`);
+      items.unshift(data.item); chosen = data.item;
+    } catch (err) { error(`${file.name}: ${err.message || 'Verbindung unterbrochen'}`); }
+    $('#document-upload').value = ''; render();
+  });
+  $('#document-insert').addEventListener('click', () => { if (chosen) { onChoose?.(chosen); dialog.close(); } });
+  dialog.showModal();
+  fetch(base, { credentials: 'same-origin' }).then(async response => {
+    if (!response.ok || response.redirected) throw new Error('PDFs konnten nicht geladen werden. Bitte neu anmelden.');
+    // Hochladen erst mit Token - sonst weist der Server eine zu früh gewählte Datei ab.
+    const data = await response.json(); items = data.items; token = data.csrfToken; $('#document-upload').disabled = false; render();
+  }).catch(err => { $('#document-status').textContent = ''; error(err.message); });
+}
+
 document.querySelector('#open-media-library')?.addEventListener('click', () => openMedia());

public/assets/menu-editor.js

@@ -0,0 +1,221 @@
+import { setupPicker } from './page-picker.js';
+
+const form = document.querySelector('#menu-editor');
+const list = form.querySelector('#menu-items');
+const status = form.querySelector('#menu-status');
+const error = form.querySelector('#menu-error');
+const history = [];
+let serial = list.children.length, pendingPage = null, busy = false;
+const el = (tag, className = '', text = '') => { const node = document.createElement(tag); node.className = className; node.textContent = text; return node; };
+const iconNames = { app: 'App', web: 'Web', design: 'Gestaltung', network: 'Netzwerk', hardware: 'Computer', shop: 'Shop', support: 'Support', shield: 'Sicherheit', clock: 'Uhr', star: 'Stern', phone: 'Telefon', mail: 'E-Mail', pin: 'Standort', check: 'Haken', people: 'Menschen', music: 'Musik', home: 'Haus' };
+const menuIcons = JSON.parse(form.dataset.icons || '[]');
+const chrome = () => {
+  const handle = el('button', 'menu-drag-handle'); handle.type = 'button'; handle.dataset.menuDrag = '';
+  handle.title = 'Ziehen · Pfeiltasten ändern Reihenfolge und Ebene';
+  handle.innerHTML = '<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>';
+  const chevron = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); chevron.setAttribute('class','menu-chevron'); chevron.setAttribute('viewBox','0 0 24 24'); chevron.setAttribute('width','20'); chevron.setAttribute('height','20'); chevron.setAttribute('aria-hidden','true');
+  chevron.innerHTML = '<path d="m6 9 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2"/>';
+  return { handle, chevron };
+};
+const rows = () => [...list.children].map(row => {
+  const data = { level: Number(row.dataset.level) };
+  row.querySelectorAll('[data-key]').forEach(input => { data[input.dataset.key] = input.type === 'checkbox' ? (input.checked ? '1' : '0') : input.value; });
+  data.level = Number(data.level); data.pageId = row.querySelector('.picker-value')?.value ?? '';
+  data.pageDisplay = row.querySelector('[role="combobox"]')?.value ?? '';
+  return data;
+});
+const state = () => ({ name: form.elements.name.value, rows: rows() });
+const key = value => JSON.stringify(value);
+let last = state(), saved = key(last);
+const dirty = () => key(state()) !== saved;
+
+function refresh() {
+  [...list.children].forEach((row, index) => {
+    row.classList.toggle('menu-child', row.dataset.level === '2');
+    row.querySelectorAll('[data-key]').forEach(input => { input.name = `items[${index}][${input.dataset.key}]`; });
+    row.querySelector('[data-key="position"]').value = index;
+    row.querySelector('[data-key="level"]').value = row.dataset.level;
+    const picker = row.querySelector('.picker-value'); if (picker) picker.name = `items[${index}][pageId]`;
+    const name = row.querySelector('[data-key="label"]').value || 'Neuer Eintrag';
+    row.querySelector('.menu-entry-title').textContent = name;
+    const icon = row.querySelector('[data-key="icon"]')?.value, position = row.querySelector('[data-key="iconPosition"]')?.value;
+    const graphic = icon && document.getElementById(`menu-icon-${icon}`)?.content.cloneNode(true);
+    if (graphic) row.querySelector('.menu-entry-title')[position === 'after' ? 'append' : 'prepend'](graphic);
+    row.querySelector('[data-menu-drag]')?.setAttribute('aria-label', `${name} verschieben`);
+    row.querySelectorAll('[data-key="icon"] option').forEach(option => { if (iconNames[option.value]) option.textContent = iconNames[option.value]; });
+    row.querySelector('[data-menu-action="up"]').disabled = index === 0;
+    row.querySelector('[data-menu-action="down"]').disabled = index === list.children.length - 1;
+    row.querySelector('[data-menu-action="indent"]').disabled = index === 0 || row.dataset.level === '2' || list.children[index + 1]?.dataset.level === '2';
+    row.querySelector('[data-menu-action="outdent"]').disabled = row.dataset.level === '1';
+    row.querySelector('[role="group"]').setAttribute('aria-label', `${name} verschieben oder entfernen`);
+    row.querySelectorAll('button').forEach(button => { button.disabled ||= busy; });
+    row.querySelector('[data-menu-action="up"]').setAttribute('aria-label', `${name} nach oben`);
+    row.querySelector('[data-menu-action="down"]').setAttribute('aria-label', `${name} nach unten`);
+  });
+  form.querySelector('#menu-count').textContent = `${list.children.length} Einträge`;
+  form.querySelector('#menu-empty').hidden = Boolean(list.children.length);
+  form.querySelector('#menu-undo').disabled = !history.length || busy;
+  status.textContent = busy ? 'Wird gespeichert …' : dirty() ? 'Ungespeicherte Änderungen' : 'Gespeicherter Stand';
+}
+
+function createRow(data) {
+  const id = `new-${serial++}`;
+  const row = el('li', 'menu-entry'); row.dataset.level = String(data.level ?? 1);
+  const field = (key, value, label, type = 'text') => {
+    const input = el('input'); input.type = type; input.dataset.key = key; input.value = value ?? '';
+    input.id = `menu-${key}-${id}`;
+    if (type !== 'hidden') {
+      const caption = el('label', type === 'checkbox' ? 'check-label' : '', label); caption.htmlFor = input.id;
+      if (type === 'checkbox') { caption.prepend(input); body.append(caption); } else body.append(caption, input);
+    }
+    else row.append(input);
+    return input;
+  };
+  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);
+  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;
+    const input = picker.querySelector('[role="combobox"]'); input.id = `menu-target-${id}`; input.value = data.pageDisplay || '';
+    picker.querySelector('label').htmlFor = input.id; picker.querySelector('label').textContent = 'Verknüpfter Inhalt';
+    const options = picker.querySelector('[role="listbox"]'); options.id = `${input.id}-results`; options.replaceChildren(); options.hidden = true;
+    input.setAttribute('aria-controls', options.id); input.setAttribute('aria-expanded', 'false'); input.removeAttribute('aria-activedescendant');
+    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; }
+  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}`;
+    for (const [value, caption] of Object.entries(choices)) select.append(new Option(caption, value));
+    select.value = data[key] || (key === 'iconPosition' ? 'before' : '');
+    const caption = el('label', '', label); caption.htmlFor = select.id; body.append(caption, select);
+  }
+  const actions = el('div', 'menu-entry-actions'); actions.setAttribute('role', 'group');
+  for (const [action, caption] of Object.entries({ up: '↑', down: '↓', indent: 'Als Unterpunkt', outdent: 'Hauptebene', remove: 'Entfernen' })) {
+    const button = el('button', `text-button${action === 'remove' ? ' danger-text' : ''}`, caption); button.type = 'button'; button.dataset.menuAction = action; actions.append(button);
+  }
+  row.append(actions); return row;
+}
+
+function restore(value) {
+  form.elements.name.value = value.name; list.replaceChildren(...value.rows.map(createRow)); refresh(); last = state();
+}
+function commit(before) {
+  refresh(); const after = state();
+  if (key(before) !== key(after)) { history.push(before); if (history.length > 50) history.shift(); }
+  last = after; refresh();
+}
+function add(data) {
+  if (list.children.length >= 60) { error.textContent = 'Ein Menü fasst höchstens 60 Einträge.'; error.hidden = false; return; }
+  const before = state(); const row = createRow(data); list.append(row); commit(before);
+  row.scrollIntoView({ block: 'nearest' }); row.querySelector('summary').focus();
+}
+
+const addPicker = form.querySelector('.menu-add .content-picker');
+addPicker.querySelector('.picker-value').addEventListener('change', () => {
+  const id = addPicker.querySelector('.picker-value').value;
+  pendingPage = id ? { id, display: addPicker.querySelector('[role="combobox"]').value } : null;
+  form.querySelector('#menu-add-page').disabled = !pendingPage;
+});
+form.querySelector('#menu-add-page').addEventListener('click', () => {
+  if (pendingPage) add({ type: 'page', label: pendingPage.display.replace(/ \(\/.*\)$/, ''), pageId: pendingPage.id, pageDisplay: pendingPage.display, level: 1 });
+});
+form.querySelector('#menu-add-url').addEventListener('click', () => {
+  const name = form.querySelector('#link-label'), url = form.querySelector('#link-url');
+  if (!name.value.trim() || !url.value.trim()) { error.hidden = false; error.textContent = 'Bitte Beschriftung und Adresse des Links ausfüllen.'; (!name.value.trim() ? name : url).focus(); return; }
+  const newTab = form.querySelector('#link-new-tab');
+  error.hidden = true; add({ type: 'url', label: name.value.trim(), url: url.value.trim(), newTab: newTab.checked, level: 1 }); name.value = url.value = ''; newTab.checked = false;
+});
+form.addEventListener('input', event => { if (event.target.closest('.menu-structure')) refresh(); });
+form.addEventListener('change', event => { if (event.target.closest('.menu-structure')) commit(last); });
+list.addEventListener('click', event => {
+  const button = event.target.closest('[data-menu-action]'); if (!button || busy) return;
+  const row = button.closest('.menu-entry'), before = state(), action = button.dataset.menuAction;
+  const entries = [...list.children], index = entries.indexOf(row);
+  const bundle = [row];
+  if (row.dataset.level === '1') for (let i = index + 1; entries[i]?.dataset.level === '2'; i++) bundle.push(entries[i]);
+  if (action === 'remove') {
+    row.remove();
+    // Removing a heading never deletes its links: promote its children visibly.
+    bundle.slice(1).forEach(child => { child.dataset.level = '1'; });
+  }
+  if (action === 'indent') row.dataset.level = '2';
+  if (action === 'outdent') row.dataset.level = '1';
+  if (action === 'up' && index > 0) {
+    let target = index - 1;
+    if (row.dataset.level === '1') while (target > 0 && entries[target].dataset.level === '2') target--;
+    bundle.forEach(item => list.insertBefore(item, entries[target]));
+  }
+  if (action === 'down') {
+    let target = index + bundle.length;
+    if (entries[target]) {
+      target++;
+      if (row.dataset.level === '1') while (entries[target]?.dataset.level === '2') target++;
+      bundle.forEach(item => list.insertBefore(item, entries[target] || null));
+    }
+  }
+  if (list.firstElementChild) list.firstElementChild.dataset.level = '1';
+  commit(before); if (row.isConnected) row.querySelector('summary').focus();
+});
+form.querySelector('#menu-undo').addEventListener('click', () => { const previous = history.pop(); if (previous) restore(previous); });
+// Pointer capture supports mouse, pen and touch. A parent travels with its children.
+let drag = null;
+list.addEventListener('click', event => { if (event.target.closest('[data-menu-drag]')) { event.preventDefault(); event.stopPropagation(); } });
+list.addEventListener('keydown', event => {
+  const handle = event.target.closest('[data-menu-drag]'); if (!handle || busy) return;
+  const action = { ArrowUp: 'up', ArrowDown: 'down', ArrowRight: 'indent', ArrowLeft: 'outdent' }[event.key];
+  if (action) { event.preventDefault(); const row = handle.closest('.menu-entry'); row.querySelector(`[data-menu-action="${action}"]`).click(); handle.focus(); }
+});
+list.addEventListener('pointerdown', event => {
+  const handle = event.target.closest('[data-menu-drag]'); if (!handle || busy || event.button !== 0) return;
+  event.preventDefault(); handle.focus(); handle.setPointerCapture(event.pointerId);
+  const row = handle.closest('.menu-entry'), entries = [...list.children], index = entries.indexOf(row), bundle = [row];
+  if (row.dataset.level === '1') for (let i = index + 1; entries[i]?.dataset.level === '2'; i++) bundle.push(entries[i]);
+  drag = { handle, row, bundle, before: state(), x: event.clientX, y: event.clientY, pointer: event.pointerId, active: false, level: row.dataset.level };
+});
+list.addEventListener('pointermove', event => {
+  if (!drag || event.pointerId !== drag.pointer) return;
+  if (!drag.active && Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 6) return;
+  drag.active = true; drag.bundle.forEach(row => row.classList.add('menu-dragging'));
+  const others = [...list.children].filter(row => !drag.bundle.includes(row));
+  let target = others.find(row => event.clientY < row.getBoundingClientRect().top + row.getBoundingClientRect().height / 2) || null;
+  // A main entry never splits the children of another main entry.
+  if ((drag.bundle.length > 1 || drag.level === '1') && target?.dataset.level === '2') {
+    let index = others.indexOf(target); while (index > 0 && others[index].dataset.level === '2') index--; target = others[index];
+  }
+  drag.bundle.forEach(row => list.insertBefore(row, target));
+  if (drag.bundle.length === 1) drag.row.dataset.level = event.clientX - drag.x > 36 ? '2' : event.clientX - drag.x < -36 ? '1' : drag.level;
+  if (list.firstElementChild) list.firstElementChild.dataset.level = '1';
+  refresh();
+  if (event.clientY > window.innerHeight - 65) window.scrollBy(0, 18); else if (event.clientY < 65) window.scrollBy(0, -18);
+});
+function endDrag(cancel = false) {
+  if (!drag) return;
+  const previous = drag; drag = null;
+  previous.bundle.forEach(row => row.classList.remove('menu-dragging'));
+  if (previous.handle.hasPointerCapture(previous.pointer)) previous.handle.releasePointerCapture(previous.pointer);
+  if (cancel) restore(previous.before); else if (previous.active) { commit(previous.before); previous.handle.focus(); status.textContent = 'Reihenfolge geändert · noch nicht gespeichert'; }
+}
+list.addEventListener('pointerup', () => endDrag()); list.addEventListener('pointercancel', () => endDrag(true));
+document.addEventListener('keydown', event => { if (event.key === 'Escape' && drag) { event.preventDefault(); endDrag(true); } });
+window.addEventListener('beforeunload', event => { if (dirty()) { event.preventDefault(); event.returnValue = ''; } });
+form.noValidate = true;
+form.addEventListener('submit', async event => {
+  event.preventDefault(); if (busy) return;
+  const invalid = form.querySelector(':invalid');
+  if (invalid) { const details = invalid.closest('details'); if (details) details.open = true; invalid.reportValidity(); return; }
+  refresh(); const body = new FormData(form); const snapshot = key(state());
+  busy = true; error.hidden = true; form.querySelectorAll('input,select,button').forEach(node => { node.disabled = true; }); refresh();
+  try {
+    const response = await fetch(form.action, { method: 'POST', body, headers: { Accept: 'application/json' }, credentials: 'same-origin' });
+    if (response.redirected) throw new Error('Deine Sitzung ist abgelaufen. Die Änderungen bleiben hier erhalten. Bitte erneut anmelden.');
+    const result = await response.json(); if (!response.ok) throw new Error(result.error || 'Das Menü konnte nicht gespeichert werden.');
+    form.elements.expectedVersion.value = result.version; saved = snapshot;
+  } catch (failure) { error.textContent = failure.message || 'Verbindung unterbrochen. Die Änderungen bleiben hier erhalten.'; error.hidden = false; }
+  finally { busy = false; form.querySelectorAll('input,select,button').forEach(node => { node.disabled = false; }); form.querySelector('#menu-add-page').disabled = !pendingPage; refresh(); }
+});
+refresh(); last = state(); saved = key(last);

public/assets/motion.js

@@ -0,0 +1,96 @@
+/**
+ * Entrance effects.
+ *
+ * Visible content is the baseline: without this script every block simply stands on the page.
+ * With it, a block that carries an entrance class waits out of sight until it scrolls into
+ * view, then comes in - the way the Flatsome animations behave.
+ *
+ * Whether the browser preference "reduce motion" counts is the website's decision, made under
+ * Einstellungen and delivered as a class on <html>. Without `motion-respect` the effects play
+ * for everyone; many systems report the preference without anyone having chosen it, and a site
+ * whose animations never show is not what the person building it asked for.
+ */
+export function initMotion(doc = document) {
+  const view = doc.defaultView;
+  const html = doc.documentElement;
+  const preference = view.matchMedia('(prefers-reduced-motion: reduce)');
+  const reduced = () => html.classList.contains('motion-respect') && preference.matches;
+  const animations = new Set();
+  const seen = new WeakSet();
+  // Blocks hidden while they wait. Kept so they can be shown again the moment the effects are
+  // switched off - a block must never stay invisible because of a preference.
+  const hidden = new Set();
+  const start = {
+    fade: { opacity: 0 },
+    rise: { opacity: 0, transform: 'translateY(40px)' },
+    sink: { opacity: 0, transform: 'translateY(-40px)' },
+    left: { opacity: 0, transform: 'translateX(-56px)' },
+    right: { opacity: 0, transform: 'translateX(56px)' },
+    zoom: { opacity: 0, transform: 'scale(.88)' },
+    flip: { opacity: 0, transform: 'perspective(800px) rotateX(-18deg)' },
+    blur: { opacity: 0, filter: 'blur(8px)' },
+  };
+  const nameOf = node => Object.keys(start).find(name => node.classList.contains(`fx-entrance-${name}`));
+  const nodes = [...doc.querySelectorAll('[class*="fx-entrance-"]')].filter(nameOf);
+  const hide = node => { if (!seen.has(node) && !hidden.has(node)) { hidden.add(node); node.style.opacity = '0'; } };
+  const unhide = node => { if (hidden.delete(node)) node.style.opacity = ''; };
+  const show = node => {
+    if (seen.has(node) || reduced()) return;
+    seen.add(node);
+    unhide(node);
+    const name = nameOf(node);
+    const delay = node.classList.contains('fx-delay-long') ? 600 : node.classList.contains('fx-delay-medium') ? 300 : node.classList.contains('fx-delay-short') ? 150 : 0;
+    // The block's own transform and filter, if any, are the end state - the entrance is
+    // composed in front of them rather than replacing them.
+    const style = view.getComputedStyle(node);
+    const finish = { opacity: style.opacity, transform: style.transform, filter: style.filter };
+    const first = { ...start[name] };
+    if (first.transform && finish.transform !== 'none') first.transform += ' ' + finish.transform;
+    if (first.filter && finish.filter !== 'none') first.filter += ' ' + finish.filter;
+    // `backwards` holds the start state through the delay, so a delayed block does not flash
+    // up and vanish before its turn.
+    const animation = node.animate([first, finish], { duration: 750, delay, easing: 'cubic-bezier(.2,.7,.2,1)', fill: 'backwards' });
+    animations.add(animation);
+    animation.finished.then(() => animations.delete(animation), () => animations.delete(animation));
+  };
+  /** A block the reader has already scrolled past: shown at once, no entrance for nobody. */
+  const passed = node => { seen.add(node); unhide(node); observer.unobserve(node); };
+  const observer = new view.IntersectionObserver(entries => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) { show(entry.target); observer.unobserve(entry.target); }
+      else if (entry.boundingClientRect.bottom < 0) passed(entry.target);
+      else hide(entry.target);
+    }
+  }, { threshold: 0, rootMargin: '0px 0px -40px 0px' });
+  // A jump - an anchor link, a fast scroll, a restored position - can carry the reader past a
+  // block without it ever intersecting. Nothing that is above the viewport may stay hidden.
+  let sweeping = false;
+  const sweep = () => {
+    sweeping = false;
+    for (const node of [...hidden]) if (node.getBoundingClientRect().bottom < 0) passed(node);
+  };
+  const onScroll = () => { if (!sweeping) { sweeping = true; view.requestAnimationFrame(sweep); } };
+  const syncPreference = () => {
+    if (reduced()) {
+      observer.disconnect();
+      animations.forEach(animation => animation.cancel());
+      [...hidden].forEach(unhide);
+    } else {
+      // Reduction may have been active at startup or enabled during this visit.
+      // Resume observing unseen content when movement is allowed again.
+      nodes.forEach(node => { if (!seen.has(node)) observer.observe(node); });
+    }
+  };
+  preference.addEventListener('change', syncPreference);
+  view.addEventListener('scroll', onScroll, { passive: true });
+  syncPreference();
+  return () => {
+    observer.disconnect();
+    animations.forEach(animation => animation.cancel());
+    [...hidden].forEach(unhide);
+    preference.removeEventListener('change', syncPreference);
+    view.removeEventListener('scroll', onScroll);
+  };
+}
+
+if (!document.querySelector('#editor')) initMotion();

public/assets/page-picker.js

@@ -0,0 +1,68 @@
+export function setupPicker(picker, onSelect = () => {}) {
+  if (picker.dataset.ready) return;
+  picker.dataset.ready = 'true';
+  const input = picker.querySelector('[role="combobox"]');
+  const value = picker.querySelector('.picker-value');
+  const results = picker.querySelector('[role="listbox"]');
+  const status = picker.querySelector('.picker-status');
+  let controller, timer, current = -1, items = [];
+  const close = () => {
+    results.hidden = true; input.setAttribute('aria-expanded', 'false');
+    input.removeAttribute('aria-activedescendant'); current = -1;
+  };
+  const select = item => {
+    // Most fields store the page id; a setting that keeps an address asks for the path instead.
+    value.value = item?.[picker.dataset.value || 'id'] ?? '';
+    input.value = item ? `${item.title} (/${item.path === 'home' ? '' : item.path})` : '';
+    input.setCustomValidity(''); status.textContent = item ? 'Ausgewählt.' : '';
+    close(); value.dispatchEvent(new Event('change', { bubbles: true })); onSelect(item);
+  };
+  const activate = index => {
+    current = Math.max(0, Math.min(items.length - 1, index));
+    [...results.children].forEach((node, i) => node.setAttribute('aria-selected', String(i === current)));
+    const option = results.children[current];
+    if (option) { input.setAttribute('aria-activedescendant', option.id); option.scrollIntoView({ block: 'nearest' }); }
+  };
+  const search = async query => {
+    controller?.abort(); controller = new AbortController();
+    const signal = controller.signal;
+    const url = new URL(picker.dataset.source, location.href);
+    url.searchParams.set('q', query); url.searchParams.set('type', picker.dataset.type || '');
+    url.searchParams.set('parents', picker.dataset.parents || '0');
+    status.textContent = 'Wird gesucht …';
+    try {
+      const response = await fetch(url, { signal, credentials: 'same-origin' });
+      if (!response.ok || response.redirected) throw new Error();
+      const data = await response.json();
+      if (signal.aborted) return;
+      items = data.items; current = -1; results.replaceChildren();
+      items.forEach((item, index) => {
+        const option = document.createElement('button'); option.type = 'button'; option.tabIndex = -1;
+        option.id = `${input.id}-option-${index}`; option.setAttribute('role', 'option'); option.setAttribute('aria-selected', 'false');
+        const title = document.createElement('strong'); title.textContent = item.title;
+        const detail = document.createElement('span'); detail.textContent = `/${item.path === 'home' ? '' : item.path} · ${item.type === 'post' ? 'Beitrag' : 'Seite'}${item.published ? '' : ' · Entwurf'}`;
+        option.append(title, detail); option.addEventListener('mousedown', event => event.preventDefault());
+        option.addEventListener('click', () => { select(item); input.focus({ preventScroll: true }); close(); }); results.append(option);
+      });
+      results.hidden = !items.length; input.setAttribute('aria-expanded', String(Boolean(items.length)));
+      status.textContent = items.length ? `${items.length} Treffer${items.length === 20 ? ' · Suche eingrenzen für weitere Ergebnisse' : ''}.` : 'Keine passenden Inhalte gefunden.';
+    } catch (error) {
+      if (error.name !== 'AbortError') { close(); status.textContent = 'Inhalte konnten nicht geladen werden. Bitte erneut suchen oder neu anmelden.'; }
+    }
+  };
+  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.' : '');
+    value.dispatchEvent(new Event('change', { bubbles: true }));
+    controller?.abort(); clearTimeout(timer); timer = setTimeout(() => search(input.value), 180);
+  });
+  input.addEventListener('keydown', event => {
+    if (event.key === 'Escape') { event.preventDefault(); controller?.abort(); clearTimeout(timer); close(); }
+    if (['ArrowDown', 'ArrowUp'].includes(event.key) && !results.hidden) { event.preventDefault(); activate(current + (event.key === 'ArrowDown' ? 1 : -1)); }
+    if (event.key === 'Enter' && current >= 0 && !results.hidden) { event.preventDefault(); select(items[current]); }
+  });
+  picker.addEventListener('focusout', event => { if (!picker.contains(event.relatedTarget)) { controller?.abort(); clearTimeout(timer); close(); } });
+  picker.querySelector('.picker-clear').addEventListener('click', () => { controller?.abort(); clearTimeout(timer); select(null); input.focus(); });
+}
+
+document.querySelectorAll('.content-picker').forEach(picker => setupPicker(picker));

public/assets/preview-containers.js

@@ -0,0 +1,56 @@
+import { blockLabel } from './editor-model.js';
+
+/** Editing aids are created only in the preview DOM, never in a saved block or public HTML. */
+export function decorateContainers(preview, content) {
+  const visit = (blocks, parent = null) => {
+    blocks.forEach((block, index) => {
+      const node = preview.getElementById(block.id);
+      // Editing must expose the body without changing the visitor's saved open/closed state.
+      if (node && block.type === 'accordionitem') node.open = true;
+      if (node && ['section', 'row', 'column', 'accordion', 'accordionitem'].includes(block.type)) {
+        const label = block.type === 'column' && parent?.type === 'row'
+          ? `Spalte ${index + 1} von ${blocks.length}` : block.type === 'accordionitem'
+            ? `Eintrag „${block.props?.title || 'Ohne Titel'}“` : blockLabel(block);
+        node.classList.add('editor-container');
+        node.dataset.editorLabel = label;
+        if (!block.children?.length || ['accordion', 'accordionitem'].includes(block.type)) {
+          const compact = Boolean(block.children?.length);
+          if (!compact) node.classList.add('editor-empty-container');
+          const host = block.type === 'section' ? node.querySelector(':scope > .section-inner')
+            : block.type === 'accordionitem' ? node.querySelector(':scope > .accordion-body') : node;
+          if (!host) return;
+          const empty = preview.createElement('div');
+          empty.className = compact ? 'editor-empty editor-add-content' : 'editor-empty';
+          const name = preview.createElement('span');
+          name.className = 'editor-empty-name'; name.textContent = label;
+          const hint = preview.createElement('span');
+          hint.className = 'editor-empty-hint';
+          hint.textContent = block.type === 'row' ? 'Spalte hierher ziehen oder hinzufügen'
+            : block.type === 'accordion' ? 'Eintrag hinzufügen und darin Inhalte gestalten' : 'Element hierher ziehen oder hinzufügen';
+          const actions = preview.createElement('div'); actions.className = 'editor-empty-actions';
+          const add = (text, attribute, value, accessibleName) => {
+            const button = preview.createElement('button');
+            button.type = 'button'; button.textContent = text;
+            button.dataset.editorTarget = block.id;
+            button.setAttribute(attribute, value);
+            button.setAttribute('aria-label', accessibleName);
+            actions.append(button);
+          };
+          add(block.type === 'row' ? '＋ Spalte hinzufügen' : '＋ Inhalt hinzufügen', 'data-editor-insert', '', `${label}: ${block.type === 'row' ? 'Spalte' : 'Inhalt'} hinzufügen`);
+          if (block.type === 'accordion') {
+            actions.replaceChildren();
+            add('＋ Eintrag hinzufügen', 'data-editor-add-entry', '', 'Akkordeon: Eintrag hinzufügen');
+          }
+          if (block.type === 'section') {
+            for (const count of [1, 2, 3, 4]) add(`${count} ${count === 1 ? 'Spalte' : 'Spalten'}`, 'data-editor-row', String(count), `${count} ${count === 1 ? 'Spalte' : 'Spalten'} in dieser Sektion anlegen`);
+          }
+          if (!compact) empty.append(name, hint);
+          empty.append(actions);
+          host.append(empty);
+        }
+      }
+      visit(block.children ?? [], block);
+    });
+  };
+  visit(content.blocks);
+}

public/assets/preview.css

@@ -7,3 +7,19 @@
 
 /* Inline editing. Only ever active in the editor preview, never on a published page. */
 [contenteditable].editor-inline{outline:3px solid #b55b12;outline-offset:4px;border-radius:3px;cursor:text;background:#fffdf7}
+
+/* Empty layout areas must have a real hit area, including when sibling columns have content. */
+.editor-empty-container{min-height:130px!important}
+.editor-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:130px;width:100%;padding:22px 14px;border:2px dashed #93aa9a;border-radius:7px;background:#f3f8f4;color:#264f3d;text-align:center;font:14px/1.5 system-ui,sans-serif;box-sizing:border-box;grid-column:1/-1}
+.editor-empty-name{font-size:12px;font-weight:700;letter-spacing:.04em}
+.editor-empty-hint{font-size:13px;color:#496351}
+.editor-empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
+.editor-empty button{appearance:none;font:600 13px/1.3 system-ui,sans-serif;color:#264f3d;background:white;border:1px solid #94ad9d;border-radius:6px;min-height:40px;padding:9px 13px;cursor:pointer;letter-spacing:normal;text-transform:none;box-shadow:none;margin:0}
+.editor-empty button:hover,.editor-empty button:focus-visible{background:#deeee2;border-color:#32644a;outline:2px solid #32644a;outline-offset:2px}
+.editor-empty button[data-editor-insert]{background:#2c634a;color:white;border-color:#2c634a}
+.editor-container:hover:not(.editor-selected),.editor-dragging .editor-container{outline:1px dashed #6b927a;outline-offset:-1px}
+.editor-container.editor-insert-target{outline:3px solid #b55b12!important;outline-offset:-3px}
+.editor-dragging .editor-empty{background:#e6f1e9;border-color:#467858}
+.editor-add-content{min-height:0;margin-top:12px;padding:10px;border-width:1px;background:#f3f8f4}
+.block-accordion.editor-container>.editor-add-content{margin-top:16px}
+@media(max-width:767px){.editor-empty{padding:16px 10px}.editor-empty button{min-height:44px}}

public/assets/rich-text.js

@@ -39,7 +39,7 @@ function button(label, title, onClick, className = 'rt-button') {
  * Builds the control. `apply` is called with the markup whenever it changes; the caller decides
  * what to do with it (history entry, preview refresh).
  */
-export function createRichText(value, apply, { label = 'Text' } = {}) {
+export function createRichText(value, apply, { label = 'Text', plain = false } = {}) {
   const wrap = document.createElement('div');
   wrap.className = 'rich-text';
 
@@ -55,13 +55,16 @@ export function createRichText(value, apply, { label = 'Text' } = {}) {
   surface.setAttribute('role', 'textbox');
   surface.setAttribute('aria-multiline', 'true');
   surface.setAttribute('aria-label', label);
-  surface.innerHTML = value ?? '';
+  // Unter Schema v12 ist der Text Klartext: "Preis <b>5 Euro</b>" ist dann eine Zeichenfolge, kein
+  // Markup, und darf beim Oeffnen nicht als HTML gelesen werden.
+  if (plain) surface.textContent = value ?? '';
+  else surface.innerHTML = value ?? '';
 
   const source = document.createElement('textarea');
   source.className = 'rt-source';
   source.hidden = true;
   source.setAttribute('aria-label', `${label} als HTML`);
-  source.value = value ?? '';
+  source.value = plain ? surface.innerHTML : (value ?? '');
 
   const push = markup => { source.value = markup; apply(markup); };
 
@@ -83,7 +86,10 @@ export function createRichText(value, apply, { label = 'Text' } = {}) {
   linkInput.type = 'text';
   linkInput.placeholder = '/kontakt, #abschnitt, https://…, mailto:…';
   linkInput.setAttribute('aria-label', 'Linkziel');
-  let savedRange = null;
+  const newTabLabel = document.createElement('label'); newTabLabel.className = 'check-label';
+  const newTab = document.createElement('input'); newTab.type = 'checkbox';
+  newTabLabel.append(newTab, document.createTextNode(' In neuem Tab öffnen'));
+  let savedRange = null, currentLink = null;
   const confirmLink = () => {
     const target = linkInput.value.trim();
     linkRow.hidden = true;
@@ -93,8 +99,16 @@ export function createRichText(value, apply, { label = 'Text' } = {}) {
       selection.removeAllRanges();
       selection.addRange(savedRange);
     }
-    if (target) document.execCommand('createLink', false, target);
-    else document.execCommand('unlink');
+    if (target) {
+      if (currentLink && surface.contains(currentLink)) currentLink.setAttribute('href', target);
+      else document.execCommand('createLink', false, target);
+      const range = window.getSelection().rangeCount ? window.getSelection().getRangeAt(0) : null;
+      for (const anchor of surface.querySelectorAll('a')) {
+        if (anchor !== currentLink && !(anchor.getAttribute('href') === target && range?.intersectsNode(anchor))) continue;
+        if (newTab.checked) { anchor.setAttribute('target', '_blank'); anchor.setAttribute('rel', 'noopener'); }
+        else { anchor.removeAttribute('target'); anchor.removeAttribute('rel'); }
+      }
+    } else document.execCommand('unlink');
     push(surface.innerHTML);
     linkInput.value = '';
   };
@@ -102,14 +116,20 @@ export function createRichText(value, apply, { label = 'Text' } = {}) {
     if ('Enter' === event.key) { event.preventDefault(); confirmLink(); }
     if ('Escape' === event.key) { event.preventDefault(); linkRow.hidden = true; surface.focus(); }
   });
-  linkRow.append(linkInput, button('Übernehmen', 'Linkziel übernehmen', confirmLink, 'text-button'));
+  linkRow.append(linkInput, newTabLabel, button('Übernehmen', 'Linkziel übernehmen', confirmLink, 'text-button'));
 
   bar.append(button('🔗', 'Link setzen oder entfernen', () => {
     const selection = window.getSelection();
-    savedRange = selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null;
+    savedRange = selection.rangeCount > 0 && surface.contains(selection.getRangeAt(0).commonAncestorContainer) ? selection.getRangeAt(0).cloneRange() : null;
+    const node = savedRange?.startContainer;
+    currentLink = (node?.nodeType === Node.ELEMENT_NODE ? node : node?.parentElement)?.closest('a');
+    if (currentLink && (!surface.contains(currentLink) || !currentLink.contains(savedRange.endContainer))) currentLink = null;
+    linkInput.value = currentLink?.getAttribute('href') || '';
+    newTab.checked = currentLink?.getAttribute('target') === '_blank';
     linkRow.hidden = false;
     linkInput.focus();
   }));
+  linkRow.addEventListener('keydown', event => { if (event.key === 'Escape') { event.preventDefault(); linkRow.hidden = true; surface.focus(); } });
 
   const toggle = button('HTML', 'Zwischen Formatierung und HTML wechseln', () => {
     const toSource = source.hidden;

public/assets/scrolled.js

@@ -0,0 +1,34 @@
+/**
+ * Marks the page as scrolled.
+ *
+ * A header can carry a second set of colours for the scrolled page - transparent over the hero,
+ * solid once the reader has moved on, the way the Flatsome transparent header works. The
+ * stylesheet holds both states; this only says which one applies. Without the script the header
+ * keeps its normal colours, which is a readable page, not a broken one.
+ */
+export function initScrolled(doc = document) {
+  const view = doc.defaultView;
+  const root = doc.documentElement;
+  // Der Nach-oben-Knopf blendete sich ueber eine Scroll-Animation ein. Browser, die
+  // `animation-timeline: scroll()` zwar kennen, aber nicht ausfuehren, liessen ihn im ersten
+  // Bild der Animation stehen - unsichtbar, dauerhaft. Deshalb entscheidet jetzt eine Klasse.
+  // Ohne dieses Skript bleibt der Knopf sichtbar: erreichbar ist besser als unsichtbar.
+  const after = parseInt(getComputedStyle(root).getPropertyValue('--kant-top-after'), 10);
+  const schwelle = Number.isFinite(after) && after > 0 ? after : 400;
+  let queued = false;
+  const sync = () => {
+    queued = false;
+    root.classList.toggle('is-scrolled', view.scrollY > 40);
+    root.classList.toggle('kant-top-shown', view.scrollY > schwelle);
+  };
+  const onScroll = () => { if (!queued) { queued = true; view.requestAnimationFrame(sync); } };
+  view.addEventListener('scroll', onScroll, { passive: true });
+  root.classList.add('kant-top-armed');
+  sync();
+  return () => {
+    view.removeEventListener('scroll', onScroll);
+    root.classList.remove('is-scrolled', 'kant-top-armed', 'kant-top-shown');
+  };
+}
+
+if (!document.querySelector('#editor')) initScrolled();

public/assets/site.css

@@ -1,15 +1,23 @@
 @charset "UTF-8";
-h1,h2,h3,p,a{overflow-wrap:anywhere;hyphens:auto}
-.block-image{margin:0;max-width:100%}.block-image img{max-width:100%;height:auto}
-:root{color-scheme:light;--paper:#f7f8f4;--ink:#182d2b;--muted:#50625d;--line:#d7dfd7;--mint:#e5f0b6;--accent:#315b49;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
-*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:5px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid #b85c12;outline-offset:6px}main:focus{outline:none}.shell{width:min(1180px,calc(100% - 64px));margin-inline:auto}.site-header{border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:28px;letter-spacing:-1.3px;text-decoration:none}.brand-icon{width:37px;height:37px;background:var(--ink);color:var(--mint);border-radius:10px;display:grid;place-items:center;margin-right:7px;font-size:27px;letter-spacing:-2px}.brand-light{font-weight:400}.site-header nav{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:600}.site-header nav a{text-decoration:none;padding:12px 0}.site-header nav [aria-current=page]{text-decoration:underline}.site-header nav .nav-link{border:1px solid var(--ink);padding:13px 18px;border-radius:7px}.nav-link span{margin-left:18px}.block-section{padding:70px 0}.block-section:first-child{padding:74px 0 82px}.section-inner>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0 0 30px}h1,h2,h3{letter-spacing:-.05em;line-height:1.05;margin:0 0 24px}h1{font-size:clamp(48px,6.6vw,84px);font-weight:500;max-width:900px}h2{font-size:clamp(32px,4vw,49px);font-weight:500;max-width:760px}h3{font-size:26px;letter-spacing:-.035em;line-height:1.2}.block-text{font-size:18px;line-height:1.7;max-width:690px;margin:0 0 23px;color:var(--muted);white-space:pre-line}.button{display:inline-flex;align-items:center;gap:32px;min-height:50px;margin-top:9px;padding:15px 21px;background:var(--ink);color:var(--paper);border-radius:7px;text-decoration:none;font-size:14px;font-weight:600}.button:hover{background:#294b41}.block-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:38px;background:transparent!important}.block-column{border:1px solid var(--line);border-radius:12px;padding:30px;min-width:0}.block-column .block-text{font-size:15px}.block-column>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--accent);margin-bottom:34px}.tone-mint{background:var(--mint)}.tone-ink{background:var(--ink);color:var(--paper)}.tone-ink .block-text{color:#dae3da}.tone-ink .section-inner>.block-text:first-child{color:var(--mint)}.tone-ink .button{color:var(--ink);background:var(--mint)}.width-narrow>.section-inner{max-width:800px}.site-footer{border-top:1px solid var(--line)}.site-footer p,.site-footer>span{font-size:12px;color:var(--muted)}.site-footer .brand{font-size:22px}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:var(--ink);color:white;padding:16px}.skip-link:focus{top:16px}img{display:block;max-width:100%;height:auto;border-radius:12px}.error-page{padding-block:100px}.error-page h1{max-width:800px}
-@media(max-width:650px){.shell{width:calc(100% - 36px)}.site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.site-header nav .nav-link{padding:10px}.nav-link span{margin-left:6px}.block-section,.block-section:first-child{padding-block:48px}h1{font-size:49px}.block-text{font-size:16px}.block-column{padding:26px}.site-footer{align-items:flex-start;flex-direction:column;gap:10px}.site-footer p{margin:0}.block-row{gap:16px}}
+/* Lange Wörter dürfen umbrechen, damit nichts aus der Spalte läuft. Getrennt wird nur im
+   Fließtext: eine Überschrift mit Trennstrich („di-gitale") sieht nach Fehler aus. */
+h1,h2,h3,h4,h5,h6,p,a{overflow-wrap:break-word}
+h1,h2,h3,h4,h5,h6{hyphens:manual}
+p{hyphens:auto}
+.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.block-image{margin:0;max-width:100%}.block-image img{max-width:100%;height:auto}
+:root{color-scheme:var(--k-scheme,light);--paper:#f7f8f4;--ink:#182d2b;--muted:#50625d;--line:#d7dfd7;--mint:#e5f0b6;--accent:#315b49;--error:var(--k-error,#8b2f22);--error-bg:var(--k-error-bg,#fff0eb);--error-line:var(--k-error-line,#e2b2a7);font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
+*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:5px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--accent);outline-offset:6px}main:focus{outline:none}.shell{width:min(var(--k-container,1180px),calc(100% - 64px));margin-inline:auto}.site-header{border-bottom:1px solid var(--line)}.site-header.is-sticky{position:sticky;top:0;z-index:40;background:var(--paper);box-shadow:0 1px 0 var(--line),0 10px 30px color-mix(in srgb,var(--ink) 8%,transparent)}
+/* Über dem Inhalt: der Kopf nimmt keinen Platz ein, die erste Sektion beginnt unter ihm. Farbe
+   und Schatten kommen aus der Gestaltung des Kopfbereichs, auch die für den gescrollten Zustand. */
+.site-header.is-overlay{position:absolute;top:0;left:0;right:0;z-index:40;border-bottom:0;background:transparent;box-shadow:none}
+.site-header.is-overlay.is-sticky{position:fixed}.image-link{display:block;text-decoration:none}.brand{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:28px;letter-spacing:-1.3px;text-decoration:none}.brand-icon{width:37px;height:37px;background:var(--ink);color:var(--mint);border-radius:10px;display:grid;place-items:center;margin-right:7px;font-size:27px;letter-spacing:-2px}.brand-light{font-weight:400}.site-header nav{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:600}.site-header nav a{text-decoration:none;padding:12px 0}.site-header nav [aria-current=page]{text-decoration:none;font-weight:800}.site-header nav .nav-link{border:1px solid var(--ink);padding:13px 18px;border-radius:7px}.nav-link span{margin-left:18px}.block-section{padding:70px 0}.block-section:first-child{padding:74px 0 82px}h1,h2,h3{letter-spacing:-.05em;line-height:1.05;margin:0 0 24px}h1{font-size:clamp(48px,6.6vw,84px);font-weight:500}h2{font-size:clamp(32px,4vw,49px);font-weight:500}h3{font-size:26px;letter-spacing:-.035em;line-height:1.2}.block-text{font-size:18px;line-height:1.7;margin:0 0 23px;color:color-mix(in srgb,currentColor 82%,transparent);white-space:pre-line}.button{display:inline-flex;align-items:center;gap:32px;min-height:50px;margin-top:9px;padding:15px 21px;background:var(--ink);color:var(--paper);border-radius:7px;text-decoration:none;font-size:14px;font-weight:600}.button:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper))}.block-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:38px;background:transparent!important}.block-column{min-width:0}.block-column .block-text{font-size:15px}.tone-mint{background:var(--mint)}.tone-ink{background:var(--ink);color:var(--paper)}.tone-ink .block-text{color:color-mix(in srgb,var(--paper) 86%,var(--ink))}.tone-ink .tone-ink .button{color:var(--ink);background:var(--mint)}.width-narrow>.section-inner{max-width:800px}.site-footer{border-top:1px solid var(--line)}.site-footer p,.site-footer>span{font-size:12px;color:var(--muted)}.site-footer .brand{font-size:22px}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:var(--ink);color:var(--paper);padding:16px}.skip-link:focus{top:16px}img{display:block;max-width:100%;height:auto;border-radius:12px}.error-page{padding-block:100px}.error-page h1{max-width:800px}
+@media(max-width:767px){.shell{width:calc(100% - 36px)}.site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.site-header nav .nav-link{padding:10px}.nav-link span{margin-left:6px}.block-section,.block-section:first-child{padding-block:48px}h1{font-size:49px}.block-text{font-size:16px}.site-footer{align-items:flex-start;flex-direction:column;gap:10px}.site-footer p{margin:0}.block-row{gap:16px}}
 
 /* Menus. Submenus open with details/summary, so the navigation works without JavaScript. */
 .menu-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin:0;padding:0}
 .menu-list a{text-decoration:none;padding:6px 2px;display:inline-block}
 .menu-list a:hover,.menu-list summary:hover{text-decoration:underline}
-.menu-list [aria-current=page]{font-weight:700;text-decoration:underline;text-underline-offset:6px}
+.menu-list [aria-current=page]{font-weight:700;text-decoration:none}
 .menu-branch>summary{cursor:pointer;padding:6px 2px;list-style:none}
 .menu-branch>summary::after{content:' ▾'}
 .menu-branch[open]>summary::after{content:' ▴'}
@@ -17,43 +25,59 @@ h1,h2,h3,p,a{overflow-wrap:anywhere;hyphens:auto}
 .menu-level-2{flex-direction:column;align-items:flex-start;gap:2px}
 
 /* Posts */
-.post-list{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
-.post-card{display:flex;flex-direction:column;gap:14px}
-.post-image img{width:100%;height:210px;object-fit:cover;border-radius:10px;display:block}
-.post-card h3{margin:0;font-size:19px;line-height:1.35}
+.post-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}.post-list-karten{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.post-list-liste{gap:18px}.post-list-liste .post-card{flex-direction:row;align-items:stretch}.post-list-liste .post-image{flex:0 0 34%;max-width:300px}.post-list-liste .post-image img{height:100%;aspect-ratio:auto;min-height:170px}.post-list-liste .post-body{flex:1 1 auto;align-content:center;padding:22px 26px}.post-list-wechsel{gap:0;counter-reset:beitrag}.post-list-wechsel .post-card{position:relative;counter-increment:beitrag;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0 56px;padding:38px 0;background:transparent;border:0;border-radius:0;overflow:visible}.post-list-wechsel .post-card + .post-card{border-top:1px solid var(--line)}.post-list-wechsel .post-image{border-radius:20px;overflow:hidden;box-shadow:0 18px 46px -22px color-mix(in srgb,var(--ink) 55%,transparent)}.post-list-wechsel .post-image img{aspect-ratio:16/10;border-radius:20px}.post-list-wechsel .post-body{padding:0;display:grid;gap:12px;align-content:center}.post-list-wechsel .post-body::before{content:counter(beitrag,decimal-leading-zero);font-size:13px;font-weight:800;letter-spacing:2px;color:var(--accent)}.post-list-wechsel .post-card h3{font-size:28px;line-height:1.18;letter-spacing:-.5px}.post-list-wechsel .post-excerpt{margin:0;max-width:46ch}.post-list-wechsel .post-meta,.post-list-wechsel .post-terms{margin:0}.post-list-wechsel .post-more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:15px;font-weight:700;color:var(--accent);text-decoration:none;width:fit-content}
+.post-more::after{content:'→';transition:transform .2s}
+.post-more:hover::after{transform:translateX(4px)}.post-list-wechsel .post-more::after{content:'\2192'}.post-list-wechsel .post-card:nth-child(even) .post-image{order:2}.post-list-wechsel .post-card:nth-child(even) .post-body{order:1}@media(max-width:767px){.post-list-wechsel .post-card{grid-template-columns:1fr;gap:18px;padding:26px 0}.post-list-wechsel .post-card:nth-child(even) .post-image{order:0}.post-list-wechsel .post-card:nth-child(even) .post-body{order:0}.post-list-wechsel .post-card h3{font-size:22px}}.post-list-kompakt{gap:0}.post-list-kompakt .post-card{flex-direction:row;align-items:baseline;justify-content:space-between;gap:18px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:visible}.post-list-kompakt .post-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:16px 2px}.post-list-kompakt .post-meta,.post-list-kompakt .post-terms{margin:0}.post-list-kompakt .post-excerpt{flex:1 1 100%;margin:0}
+.post-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}.post-card>.post-body{display:grid;gap:10px;padding:20px 22px 22px}
+.post-image{display:block;position:relative;overflow:hidden;text-decoration:none}.post-view{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 55%,transparent);color:#fff;font-weight:700;font-size:15px;letter-spacing:.4px;opacity:0}.post-card:hover .post-view,.post-card:focus-within .post-view{opacity:1}.post-image img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0;display:block;background:var(--ink)}
+.kant h1 mark,.kant h2 mark,.kant h3 mark{background:transparent;color:var(--accent);padding:0}
+.kant .post-card h3{margin:0;font-size:19px;font-weight:800;line-height:1.12;color:var(--ink);letter-spacing:-.2px}
 .post-card h3 a{text-decoration:none}
 .post-card h3 a:hover{text-decoration:underline}
 .post-meta,.post-header{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:13px;margin:0}
 .post-header{padding-block:22px 0}
 .post-excerpt{margin:0;line-height:1.65}
-.post-terms{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:13px}
+.block-postnav{margin-top:10px}.post-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.post-nav-link{display:grid;gap:8px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;text-decoration:none;background:var(--paper)}.post-nav-next{text-align:right}.post-nav-label{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent)}.post-nav-title{font-size:18px;font-weight:800;line-height:1.25;color:var(--ink)}.post-pager{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;margin-top:34px;font-size:14px}.post-pager span{color:var(--muted)}.post-terms{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:13px}
 .post-empty{padding:26px;border:1px dashed currentColor;border-radius:10px}
 .pagination{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:38px;padding-top:22px;border-top:1px solid currentColor;font-size:14px}
 .post-terms-label{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px}
 
 /* Blocks introduced with schema v6. No JavaScript: the accordion is details/summary. */
 .block-icon{flex-shrink:0;display:block}
+/* Der Pfeil am Button und in der Beitragsnavigation ist dasselbe Symbol wie ueberall sonst -
+   frueher stand dort ein Schriftzeichen, das je nach Schrift anders aussah. Er waechst mit der
+   Schrift des Knopfs, statt eine eigene Groesse zu haben. */
+.button-arrow,.nav-arrow{display:inline-flex;align-items:center}
+.button-arrow>svg,.nav-arrow>svg{width:1.15em;height:1.15em}
 .block-iconcard{display:grid;gap:12px;padding:26px;border:1px solid currentColor;border-radius:12px}
-.block-iconcard h3{margin:0;font-size:19px;line-height:1.3}
+.block-iconcard + .block-iconcard,.block-quote + .block-quote,.block-cta + .block-cta,.block-iconcard + .block-quote,.block-quote + .block-iconcard{margin-top:18px}
+/* Gestapelt brauchen Karten den Abstand; nebeneinander in einer Zeile macht er die zweite bis
+   letzte Karte um genau diesen Betrag niedriger als die erste, weil ein Rand im Rasterfeld liegt. */
+.block-row > .block-iconcard + .block-iconcard,.block-row > .block-quote + .block-quote,.block-row > .block-cta + .block-cta,.block-row > .block-iconcard + .block-quote,.block-row > .block-quote + .block-iconcard{margin-top:0}
+.kant .block-iconcard h3{margin:0;font-size:19px;line-height:1.3}
 .block-iconcard h3 a{text-decoration:none}
 .block-iconcard h3 a:hover{text-decoration:underline}
 .block-iconcard p{margin:0;line-height:1.65}
-.block-stat{display:grid;gap:4px;margin:0}
-.block-stat strong{font-size:44px;font-weight:600;line-height:1.05;letter-spacing:-1.5px}
+.block-stat{display:grid;gap:4px;margin:0;font-size:44px;font-weight:600}
+.block-stat strong{font-size:inherit;font-weight:inherit;line-height:1.05;letter-spacing:-1.5px}
 .block-stat span{font-size:14px;line-height:1.5}
-.block-quote{margin:0;display:grid;gap:14px;padding:28px;border:1px solid currentColor;border-radius:12px}
+.block-quote{margin:0;display:grid;gap:14px;padding:28px;border:1px solid currentColor;border-radius:12px;font-size:18px}
 .block-quote blockquote{margin:0}
-.block-quote blockquote p{margin:0;font-size:18px;line-height:1.65}
+.block-quote blockquote p{margin:0;font-size:inherit;line-height:1.65}
 .block-quote figcaption{font-size:14px;font-weight:600}
-.block-quote figcaption span{font-weight:400;opacity:.75}
+.block-quote figcaption span{font-weight:400;opacity:.85}
 .quote-rating{margin:0;letter-spacing:3px}
 .block-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center;gap:24px}
 .block-logos img{max-height:52px;width:auto;margin-inline:auto;display:block}
-.block-cta{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between;padding:32px;border:1px solid currentColor;border-radius:14px}
-.block-cta h2{margin:0 0 6px;font-size:26px;letter-spacing:-.6px}
+.kant .block-cta .button{background:var(--accent);color:var(--paper);border-color:var(--accent)}.kant .block-cta .button:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}.block-cta{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between;padding:32px;border:1px solid currentColor;border-radius:14px}
+.kant .block-cta h2{margin:0 0 6px;font-size:26px;letter-spacing:-.6px}
 .block-cta p{margin:0;line-height:1.6}
 .block-contact{display:grid;gap:14px;font-style:normal}
 .block-contact span{display:flex;align-items:center;gap:12px;line-height:1.5}
+/* Telefonnummer und E-Mail stehen neben ihrem Symbol - das sagt deutlicher als ein Strich,
+   dass man darauf tippen kann. Beim Überfahren erscheint er trotzdem. */
+.block-contact a{text-decoration:none}
+.block-contact a:hover{text-decoration:underline}
 .block-divider{border:0;border-top:1px solid currentColor;opacity:.35;margin:0}
 .block-spacer{display:block}
 .spacer-small{height:18px}.spacer-medium{height:38px}.spacer-large{height:68px}.spacer-huge{height:110px}
@@ -71,27 +95,79 @@ h1,h2,h3,p,a{overflow-wrap:anywhere;hyphens:auto}
 .tabs-nav [aria-selected=true]{border-color:currentColor;background:#fff}
 .tabs-ready .tabs-nav a{cursor:pointer}
 .block-tabitem{padding-block:4px}
-.block-tabitem:focus-visible{outline:3px solid #b55b12;outline-offset:4px}
+.block-tabitem:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
 .tabs-heading{margin:0 0 12px;font-size:17px}
 
 /* Forms. Server rendered, no JavaScript; every message sits at its field. */
 .block-form{display:grid;gap:20px;max-width:640px}
+.block-form>.cms-button{justify-self:start}
+/* Ausrichtung eines Buttons (Design-Token „align"): ein inline-flex-Element zentriert sich nicht
+   über margin:auto, darum hier als Block mit eigener Breite - in Spalten, Zeilen und Rastern. */
+.kant .cms-button.d-desktop-align-left{justify-self:start;margin-inline:0}
+.kant .cms-button.d-desktop-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}
+.kant .cms-button.d-desktop-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}
+@media(max-width:1024px){.kant .cms-button.d-tablet-align-left{display:inline-flex;width:auto;justify-self:start;margin-inline:0}.kant .cms-button.d-tablet-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}.kant .cms-button.d-tablet-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}}
+@media(max-width:767px){.kant .cms-button.d-mobile-align-left{display:inline-flex;width:auto;justify-self:start;margin-inline:0}.kant .cms-button.d-mobile-align-center{display:flex;width:fit-content;margin-inline:auto;justify-self:center}.kant .cms-button.d-mobile-align-right{display:flex;width:fit-content;margin-inline:auto 0;justify-self:end}}
 .form-field{display:grid;gap:7px}
 .form-field label{font-weight:600;font-size:14px}
-.form-field input,.form-field textarea,.form-field select{width:100%;padding:12px 13px;border:1px solid currentColor;border-radius:8px;background:#fff;color:inherit;font:inherit;min-height:46px}
+.form-field input,.form-field textarea,.form-field select{width:100%;padding:12px 13px;border:1px solid var(--form-border,currentColor);border-radius:8px;background:var(--form-bg,#fff);color:inherit;font:inherit;min-height:46px}
 .form-field textarea{min-height:140px;line-height:1.6;resize:vertical}
-.has-error input,.has-error textarea,.has-error select{border-width:2px;border-color:#8b2f22}
-.field-error{margin:0;font-size:13px;font-weight:600;color:#8b2f22}
+.has-error input,.has-error textarea,.has-error select{border-width:2px;border-color:var(--error)}
+.field-error{margin:0;font-size:13px;font-weight:600;color:var(--error)}
 .field-note{margin:0;font-size:13px;opacity:.8}
-.form-error-summary{margin:0;padding:14px 18px;border-radius:8px;background:#fff0eb;color:#8b2f22;border:1px solid #e2b2a7;font-weight:600}
-.form-success{margin:0;padding:16px 20px;border-radius:8px;background:#edf3dc;color:#315b49;border:1px solid #c5d89a;font-weight:600}
+.form-error-summary{margin:0;padding:14px 18px;border-radius:8px;background:var(--error-bg);color:var(--error);border:1px solid var(--error-line);font-weight:600}
+.form-success{margin:0;padding:16px 20px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,var(--paper));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--paper));font-weight:600}
 .form-missing{margin:0;padding:14px 18px;border:1px dashed currentColor;border-radius:8px}
 .check-row{display:flex;align-items:flex-start;gap:11px}
 .check-row input{width:20px;min-height:20px;flex-shrink:0;margin-top:3px}
 .check-row label{font-weight:400;line-height:1.55}
-.required-mark{color:#8b2f22}
+.required-mark{color:var(--error)}
 /* Off screen rather than display:none so a filled value still proves automation. */
 .form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
+/* Schritte, Bedingungen, Zusammenfassung. Ohne Skript: Abschnitte untereinander, alles sichtbar. */
+.form-step{display:grid;gap:20px;margin:0;padding:0;border:0;min-width:0}
+/* Ein Schritt und der Absendeknopf sind Raster bzw. inline-flex - das hidden-Attribut muss trotzdem gelten. */
+.block-form [hidden]{display:none!important}
+.form-step-title{padding:0;margin:0;font-weight:600;font-size:18px;line-height:1.3}
+.form-step-title:focus{outline:none}
+.form-step-intro{margin:-8px 0 0;font-size:14px;opacity:.85}
+.form-choice{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
+.form-choice legend{padding:0;margin-bottom:2px;font-weight:600;font-size:14px}
+.form-choice .check-row{align-items:center}
+.form-choice .check-row input{margin-top:0}
+/* Bildauswahl: jede Option eine Karte, das Kästchen bleibt für Tastatur und Vorlesesoftware. */
+.form-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
+.form-choice-card{position:relative}
+.form-choice-card input{position:absolute;top:10px;left:10px;width:20px;height:20px;margin:0;z-index:1}
+.form-choice-card label{display:grid;gap:8px;padding:8px;border:2px solid var(--form-border,currentColor);border-radius:10px;background:var(--form-bg,#fff);cursor:pointer;font-weight:600;font-size:14px;text-align:center;transition:border-color .2s,box-shadow .2s}
+.form-choice-card label:hover{border-color:var(--kb-fill,var(--accent))}
+.form-choice-card input:checked+label{border-color:var(--kb-fill,var(--accent));box-shadow:0 0 0 2px var(--kb-fill,var(--accent))}
+.form-choice-card input:focus-visible+label{outline:3px solid var(--kb-fill,var(--accent));outline-offset:3px}
+.form-choice-picture{display:block;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:color-mix(in srgb,currentColor 6%,transparent)}
+.form-choice-picture img{display:block;width:100%;height:100%;object-fit:cover}
+.form-choice-text{display:block;padding:0 4px 4px}
+.form-number{display:flex;align-items:center;gap:10px}
+.form-number input{flex:1 1 auto;min-width:0}
+.form-unit{flex:none;font-size:14px;opacity:.8}
+[data-inactive]{display:none!important}
+.form-progress{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;padding:0;font-size:13px}
+.form-progress-step{display:flex;align-items:center;gap:8px;opacity:.55}
+.form-progress-step[aria-current]{opacity:1;font-weight:600}
+.form-progress-step.is-done{opacity:.85}
+.form-progress-number{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid currentColor;font-size:12px}
+.form-progress-step[aria-current] .form-progress-number,.form-progress-step.is-done .form-progress-number{background:var(--kb-fill,var(--accent));color:var(--kb-ink,#fff);border-color:transparent}
+.form-step-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
+.form-step-nav .form-step-back{--kb-fill:transparent;--kb-ink:currentColor;--kb-hover-fill:transparent;--kb-hover-ink:currentColor;border:1px solid currentColor;background:transparent;color:inherit}
+.form-summary-body{display:grid;gap:18px}
+.form-summary-step{padding:16px 18px;border:1px solid var(--form-border,currentColor);border-radius:8px}
+.form-summary-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
+.form-summary-title{margin:0;font-size:15px;font-weight:600}
+.form-summary-change{border:0;padding:0;background:none;color:inherit;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
+.form-summary-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:6px 16px;margin:0;font-size:14px}
+.form-summary-list dt{font-weight:600}
+.form-summary-list dd{margin:0;overflow-wrap:anywhere}
+.form-summary-empty{opacity:.6}
+@media(max-width:767px){.form-summary-list{grid-template-columns:1fr;gap:2px 0}.form-summary-list dd{margin-bottom:8px}}
 
 .block-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;font-size:13px}
 .block-breadcrumb li+li::before{content:'›';margin-right:10px;opacity:.6}
@@ -102,43 +178,72 @@ h1,h2,h3,p,a{overflow-wrap:anywhere;hyphens:auto}
    for light backgrounds. Inside a dark tone they won on specificity, so text in a dark column was
    unreadable - 1.87:1 in the seeded footer. These two selectors match that specificity and come
    later, so the dark tone wins where it has to. */
-.tone-ink .block-column .block-text,
-.tone-ink .block-column>.block-text:first-child{color:#dae3da}
+.tone-ink .block-column .block-text{color:color-mix(in srgb,var(--paper) 86%,var(--ink))}
 
 /* The consent question. Fixed to the bottom, but it never covers the whole page: the content
    stays readable while the decision is open, because a wall would make "accept" the only way
-   forward. Accepting and refusing are the same button in the same row. */
-.consent-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:50;max-width:620px;margin-inline:auto;background:#fff;color:#203b34;border:1px solid #cfd8d1;border-radius:14px;padding:20px 22px;box-shadow:0 18px 50px #1b2a2426;font-size:14px;line-height:1.6}
-.consent-bar h2{font-size:16px;margin:0 0 8px}
-.consent-bar p{margin:0 0 14px}
+   forward. Accepting and refusing are the same button in the same row.
+
+   Aussehen aus den Einstellungen: `--kant-consent-*` im Kopf der Seite (Consent::styles), die
+   Anordnung als Klasse. Ohne Einstellung gilt Papier, Tinte und Akzent des Themes. Ein Wert wie
+   `--k-consent` aus der Palette bleibt als Zwischenstufe erhalten. */
+.consent-bar{position:fixed;inset-inline:16px;bottom:16px;z-index:50;max-width:640px;max-height:calc(100dvh - 24px);overflow:auto;margin-inline:auto;background:var(--kant-consent-bg,var(--paper));color:var(--kant-consent-ink,var(--ink));border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:var(--kant-consent-radius,18px);padding:22px 24px 20px;box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 22%,transparent);font-size:14px;line-height:1.6;overscroll-behavior:contain}
+/* Ein schmaler Streifen in der Akzentfarbe oben: die Fläche gehört sichtbar zur Website. */
+.consent-bar::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
+.kant .consent-bar h2{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.3;margin:0 0 8px}
+.consent-icon{flex:none;color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
+.consent-bar p{margin:0 0 16px;color:color-mix(in srgb,currentColor 82%,transparent)}
 .consent-actions{display:flex;flex-wrap:wrap;gap:10px}
-.consent-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 18px;border-radius:8px;border:1px solid #2c6b4f;background:#2c6b4f;color:#fff;font:inherit;font-weight:600;cursor:pointer}
-.consent-actions .consent-button:last-child{background:#fff;color:#1b2a24;border-color:#b3c0b7}
+.consent-button{display:inline-flex;align-items:center;justify-content:center;flex:1 1 150px;min-height:46px;padding:11px 18px;border-radius:var(--kant-consent-button-radius,10px);border:1.5px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));background:var(--kant-consent-accent,var(--k-consent,var(--accent)));color:var(--kant-consent-accent-ink,#fff);font:inherit;font-weight:600;cursor:pointer;transition:filter .12s,background-color .12s}
+.consent-decline,.consent-choice{background:transparent;color:inherit;border-color:color-mix(in srgb,currentColor 28%,transparent)}
 .consent-button:hover{filter:brightness(.94)}
-.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid #b55b12;outline-offset:2px}
-.consent-details{margin-top:14px}
-.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:4px 0}
+.consent-decline:hover,.consent-choice:hover{filter:none;background:color-mix(in srgb,currentColor 7%,transparent)}
+.consent-button:focus-visible,.consent-bar a:focus-visible,.consent-bar summary:focus-visible,.consent-bar input:focus-visible{outline:3px solid var(--kant-consent-accent,var(--k-consent,var(--accent)));outline-offset:2px}
+/* Fusszeile der Frage: Einzelwahl links, Rechtslinks rechts, auf einer Linie. Aufgeklappt
+   nimmt die Einzelwahl die volle Breite und die Links rutschen rechtsbuendig darunter. */
+.consent-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;margin-top:14px}
+.consent-details{flex:0 1 auto;min-width:0}
+.consent-details[open]{flex-basis:100%}
+.consent-details>summary{cursor:pointer;font-size:13px;font-weight:600;padding:6px 0;list-style:none;display:inline-flex;align-items:center;gap:6px}
+.consent-details>summary::-webkit-details-marker{display:none}
+.consent-details>summary::after{content:'';width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
+.consent-details[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
+.consent-details>summary:hover{text-decoration:underline}
 .consent-groups{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
 .consent-groups label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5}
-.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
-.consent-choice{margin-top:14px;background:#fff;color:#1b2a24;border-color:#b3c0b7}
-.consent-links{margin:14px 0 0;font-size:12px}
-.consent-links a{color:#a4510f}
+.consent-groups input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
+.consent-choice{margin-top:14px;flex:none;width:auto}
+/* Eigener Selektor mit Element, sonst gewinnt `.consent-bar p` und nimmt den Rand rechts weg. */
+.consent-bar p.consent-links{margin:0 0 0 auto;display:flex;gap:14px;font-size:12px;color:color-mix(in srgb,currentColor 72%,transparent)}
+.consent-links a{color:inherit;text-decoration:underline;text-underline-offset:2px}
+.consent-links a:hover{color:var(--kant-consent-accent,var(--k-consent,var(--accent)))}
+/* Leiste: über die ganze Breite am unteren Rand, auf breiten Bildschirmen Text links und Knöpfe
+   rechts. Ecke: eine kleine Karte rechts unten, die den Inhalt kaum verdeckt. */
+.consent-layout-leiste{inset-inline:0;bottom:0;max-width:none;border-radius:var(--kant-consent-radius,18px) var(--kant-consent-radius,18px) 0 0;border-inline:0;border-bottom:0;padding-inline:max(24px,calc((100% - 1180px) / 2))}
+@media (min-width:900px){.consent-layout-leiste{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 40px;align-items:center}.consent-layout-leiste .consent-body p{margin-bottom:0}.consent-layout-leiste .consent-form{width:360px;max-width:100%}}
+.consent-layout-ecke{inset-inline:auto 16px;max-width:400px;margin:0}
 /* While the question is open the bar is fixed at the bottom, so the page has to end above it -
    otherwise it covers the last element, and an embed's own consent button sat right underneath.
-   Found by the browser test, which could not click it. */
-body.consent-open{padding-bottom:260px}
+   Found by the browser test, which could not click it. Auf schmalen Bildschirmen ist die Leiste
+   mit Standardtext bis 290 px hoch; 320 px lassen ihr Luft, ohne einen Bildschirm zu verschenken. */
+body.consent-open{padding-bottom:320px}
+@media (min-width:621px){body.consent-open{padding-bottom:270px}}
 @media (min-width:900px){body.consent-open{padding-bottom:200px}}
 .consent-page main{max-width:680px;margin-inline:auto;padding:40px 20px}
-.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;margin-top:24px}
-@media (max-width:620px){.consent-bar{inset-inline:0;bottom:0;border-radius:14px 14px 0 0;padding:16px}.consent-actions .consent-button{flex:1 1 140px}}
+.consent-page .consent-bar{position:static;inset:auto;box-shadow:none;max-width:none;max-height:none;margin:24px 0 0;display:block}
+@media (max-width:620px){.consent-bar,.consent-layout-ecke{inset-inline:0;bottom:0;max-width:none;border-radius:var(--kant-consent-radius,18px) var(--kant-consent-radius,18px) 0 0;border-inline:0;border-bottom:0;padding:18px 18px 16px}.consent-layout-leiste{padding-inline:18px}}
 
 /* An embedded third party, and what stands in its place until it may load. */
-.block-embed iframe{display:block;width:100%;border:0;border-radius:10px;background:#eef1ed}
-.embed-blocked{border:1px dashed #b3c0b7;border-radius:10px;padding:24px;background:#f6f7f4;text-align:center}
+.block-embed iframe{display:block;width:100%;border:0;border-radius:10px;background:color-mix(in srgb,var(--ink) 8%,var(--paper))}
+.embed-blocked{border:1px dashed var(--line);border-radius:10px;padding:24px;background:color-mix(in srgb,var(--ink) 4%,var(--paper));text-align:center}
 .embed-title{margin:0 0 8px;font-weight:600}
-.embed-hint{margin:0 0 10px;font-size:14px;line-height:1.6;color:#4a5751}
-.embed-provider{margin:0 0 16px;font-size:13px;color:#4a5751}
+.embed-hint{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--muted)}
+.embed-provider{margin:0 0 16px;font-size:13px;color:var(--muted)}
+/* Eigenes HTML: nur so viel Regel, dass fremdes Markup die Spalte nicht sprengt. Alles
+   Weitere bestimmt der Code selbst - das ist der Zweck des Bausteins. */
+.block-html{max-width:100%}
+.block-html img,.block-html video,.block-html table{max-width:100%}
+.block-html table{border-collapse:collapse}
 
 /* Header and footer hold block documents of their own (ADR 026). They are therefore ordinary
    block containers - as flex containers they shrank the section inside them until a single word
@@ -152,11 +257,336 @@ body.consent-open{padding-bottom:260px}
 .site-footer .block-column{border:0;border-radius:0;padding:0}
 .site-header .block-text,
 .site-footer .block-text{margin:0}
-/* Size and weight only, never colour: the tone of the area decides that, and a colour here won
-   against .tone-ink and put 2.24:1 grey text on the dark footer. The browser check caught it. */
-.site-header .block-column>.block-text:first-child{font-size:24px;font-weight:800;letter-spacing:-1px;text-transform:none;margin:0}
-.site-footer .block-column>.block-text:first-child{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;margin:0}
-/* One landmark for the three links that must be on every page. Loose text outside a landmark is
-   also what axe objects to, and rightly: a screen reader then has no way to skip to it. */
-.legal-bar{padding:16px 20px;text-align:center;font-size:12px;color:var(--muted);background:#f1f3ef}
-.legal-bar a{color:#a4510f}
+/* An image takes the rounding of its figure. Without this a radius on an image block rounded the
+   figure and left the picture square - which looked like the setting did nothing. */
+.block-image img, .block-gallery img, .block-logos img { border-radius: inherit }
+
+/* A single icon, sized by class because inline styles are forbidden by the policy. */
+.block-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);line-height:0}
+.block-icon svg{width:100%;height:100%;display:block}
+/* Das eingebettete SVG traegt dieselbe Klasse wie seine Huelle und setzte deshalb die
+   Akzentfarbe erneut - eine am Symbolblock eingestellte Farbe kam nie an. */
+.block-icon .block-icon{color:inherit}
+.icon-size-12{width:12px;height:12px}.icon-size-16{width:16px;height:16px}.icon-size-20{width:20px;height:20px}
+.icon-size-24{width:24px;height:24px}.icon-size-32{width:32px;height:32px}.icon-size-40{width:40px;height:40px}
+.icon-size-48{width:48px;height:48px}.icon-size-56{width:56px;height:56px}.icon-size-64{width:64px;height:64px}
+.icon-size-80{width:80px;height:80px}.icon-size-96{width:96px;height:96px}.icon-size-120{width:120px;height:120px}
+.icon-size-160{width:160px;height:160px}.icon-size-200{width:200px;height:200px}.icon-size-240{width:240px;height:240px}
+
+/* A progress bar. The value is a class, not an inline style, for the same reason. */
+.block-progress{margin:0 0 22px}
+.progress-label{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px;font-size:14px;font-weight:600}
+.progress-value{color:var(--muted);font-weight:400}
+.progress-track{height:10px;border-radius:999px;background:color-mix(in srgb,var(--ink) 12%,var(--paper));overflow:hidden}
+.progress-fill{height:100%;border-radius:999px;background:var(--accent)}
+.tone-ink .progress-track{background:#ffffff26}
+.tone-ink .progress-fill{background:var(--mint)}
+
+/* A slider without a script: a scroll container with snapping. It keeps working when snapping is
+   unsupported - then it is a strip you can scroll. No autoplay, ever. */
+.block-slider{display:grid;grid-auto-flow:column;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:12px;scrollbar-gutter:stable}
+.block-slider.slider-snap{scroll-snap-type:x mandatory}
+.slider-snap>.slider-slide{scroll-snap-align:start}
+.slider-slide{min-width:0}
+.block-slider:focus-visible{outline:3px solid var(--accent);outline-offset:6px}/* Mit Punkten braucht es die Rollleiste nicht mehr - sie stand quer unter dem Bild. */
+.slider-dots{position:relative}
+@supports selector(::scroll-marker){.slider-dots:not(.slider-controlled){scroll-marker-group:after;scroll-behavior:smooth;padding-bottom:0;scrollbar-width:none;scrollbar-gutter:auto}.slider-dots:not(.slider-controlled)::-webkit-scrollbar{display:none}.slider-dots:not(.slider-controlled)>*::scroll-marker{content:'';width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--slider-dot,currentColor) 30%,transparent);margin:0 6px;cursor:pointer}.slider-dots>*::scroll-marker:target-current{background:var(--slider-dot,var(--accent))}.slider-dots::scroll-marker-group{display:flex;justify-content:center;align-items:center;padding:14px 0 2px}}
+.slider-controlled{scrollbar-width:none;scrollbar-gutter:auto}.slider-controlled::-webkit-scrollbar{display:none}
+/* Die Steuerung liegt auf dem Bild, wie beim Hero-Slider von kant-it.de: runde Pfeile links und
+   rechts, Punkte unten rechts (der aktive als Strich in der Akzentfarbe), Pause klein unten links,
+   kein Zähler. Farben kommen aus der Gestaltung des Sliders (--slider-*). */
+.slider-shell{position:relative}
+.slider-controls{position:absolute;inset:0;margin:0;padding:0;pointer-events:none;font:14px/1 system-ui,sans-serif}
+.slider-controls button{pointer-events:auto;cursor:pointer;font:inherit;padding:0;border:0;background:transparent;color:inherit}
+.slider-controls button:focus-visible{outline:3px solid var(--slider-dot-active,var(--accent));outline-offset:3px}
+.slider-controls .slider-prev,.slider-controls .slider-next{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;background:var(--slider-bg,rgba(255,255,255,.9));color:var(--slider-ink,var(--accent));display:flex;align-items:center;justify-content:center;font-size:0;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:background-color .2s,color .2s,transform .2s}
+.slider-prev{left:24px}.slider-next{right:24px}
+.slider-prev::before,.slider-next::before{content:'';width:12px;height:12px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:5px}
+.slider-next::before{transform:rotate(-135deg);margin-left:-5px}
+.slider-controls .slider-prev:hover,.slider-controls .slider-next:hover{background:var(--slider-dot-active,var(--accent));color:#fff}
+.slider-prev:disabled,.slider-next:disabled{opacity:.4;cursor:default}
+.slider-position{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+.slider-control-dots{position:absolute;right:70px;bottom:20px;display:flex;gap:3px}
+.slider-control-dots button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:0;transition:width .25s}
+.slider-control-dots button::before{content:'';width:9px;height:9px;border-radius:99px;background:var(--slider-dot,rgba(255,255,255,.55));transition:width .25s,background-color .25s}
+.slider-control-dots button[aria-pressed=true]{width:40px}
+.slider-control-dots button[aria-pressed=true]::before{width:28px;background:var(--slider-dot-active,var(--accent))}
+.slider-control-dots button:hover::before{background:var(--slider-dot-active,var(--accent))}
+.slider-controls .slider-play{position:absolute;right:24px;bottom:16px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:0;display:flex;align-items:center;justify-content:center}
+.slider-play::before{content:'';width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
+.slider-play[data-playing=true]::before{width:8px;height:11px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;margin-left:0}
+.slider-play:disabled{opacity:.4;cursor:default}
+.slider-controls[hidden]{display:none}
+@media(max-width:767px){.slider-controls .slider-prev,.slider-controls .slider-next{display:none}.slider-control-dots{right:54px;bottom:14px}.slider-controls .slider-play{right:14px;bottom:12px}}
+
+.slide-desktop-1{grid-auto-columns:100%}.slide-desktop-2{grid-auto-columns:calc(50% - 10px)}
+.slide-desktop-3{grid-auto-columns:calc(33.333% - 14px)}.slide-desktop-4{grid-auto-columns:calc(25% - 15px)}
+.slide-desktop-5{grid-auto-columns:calc(20% - 16px)}.slide-desktop-6{grid-auto-columns:calc(16.666% - 17px)}
+@media (max-width:1024px){
+  .slide-tablet-1{grid-auto-columns:100%}.slide-tablet-2{grid-auto-columns:calc(50% - 10px)}
+  .slide-tablet-3{grid-auto-columns:calc(33.333% - 14px)}.slide-tablet-4{grid-auto-columns:calc(25% - 15px)}
+  .slide-tablet-5{grid-auto-columns:calc(20% - 16px)}.slide-tablet-6{grid-auto-columns:calc(16.666% - 17px)}
+}
+@media (max-width:767px){
+  .slide-mobile-1{grid-auto-columns:100%}.slide-mobile-2{grid-auto-columns:calc(50% - 10px)}
+  .slide-mobile-3{grid-auto-columns:calc(33.333% - 14px)}.slide-mobile-4{grid-auto-columns:calc(25% - 15px)}
+  .slide-mobile-5{grid-auto-columns:calc(20% - 16px)}.slide-mobile-6{grid-auto-columns:calc(16.666% - 17px)}
+}
+.progress-fill-0{width:0%}
+.progress-fill-1{width:1%}
+.progress-fill-2{width:2%}
+.progress-fill-3{width:3%}
+.progress-fill-4{width:4%}
+.progress-fill-5{width:5%}
+.progress-fill-6{width:6%}
+.progress-fill-7{width:7%}
+.progress-fill-8{width:8%}
+.progress-fill-9{width:9%}
+.progress-fill-10{width:10%}
+.progress-fill-11{width:11%}
+.progress-fill-12{width:12%}
+.progress-fill-13{width:13%}
+.progress-fill-14{width:14%}
+.progress-fill-15{width:15%}
+.progress-fill-16{width:16%}
+.progress-fill-17{width:17%}
+.progress-fill-18{width:18%}
+.progress-fill-19{width:19%}
+.progress-fill-20{width:20%}
+.progress-fill-21{width:21%}
+.progress-fill-22{width:22%}
+.progress-fill-23{width:23%}
+.progress-fill-24{width:24%}
+.progress-fill-25{width:25%}
+.progress-fill-26{width:26%}
+.progress-fill-27{width:27%}
+.progress-fill-28{width:28%}
+.progress-fill-29{width:29%}
+.progress-fill-30{width:30%}
+.progress-fill-31{width:31%}
+.progress-fill-32{width:32%}
+.progress-fill-33{width:33%}
+.progress-fill-34{width:34%}
+.progress-fill-35{width:35%}
+.progress-fill-36{width:36%}
+.progress-fill-37{width:37%}
+.progress-fill-38{width:38%}
+.progress-fill-39{width:39%}
+.progress-fill-40{width:40%}
+.progress-fill-41{width:41%}
+.progress-fill-42{width:42%}
+.progress-fill-43{width:43%}
+.progress-fill-44{width:44%}
+.progress-fill-45{width:45%}
+.progress-fill-46{width:46%}
+.progress-fill-47{width:47%}
+.progress-fill-48{width:48%}
+.progress-fill-49{width:49%}
+.progress-fill-50{width:50%}
+.progress-fill-51{width:51%}
+.progress-fill-52{width:52%}
+.progress-fill-53{width:53%}
+.progress-fill-54{width:54%}
+.progress-fill-55{width:55%}
+.progress-fill-56{width:56%}
+.progress-fill-57{width:57%}
+.progress-fill-58{width:58%}
+.progress-fill-59{width:59%}
+.progress-fill-60{width:60%}
+.progress-fill-61{width:61%}
+.progress-fill-62{width:62%}
+.progress-fill-63{width:63%}
+.progress-fill-64{width:64%}
+.progress-fill-65{width:65%}
+.progress-fill-66{width:66%}
+.progress-fill-67{width:67%}
+.progress-fill-68{width:68%}
+.progress-fill-69{width:69%}
+.progress-fill-70{width:70%}
+.progress-fill-71{width:71%}
+.progress-fill-72{width:72%}
+.progress-fill-73{width:73%}
+.progress-fill-74{width:74%}
+.progress-fill-75{width:75%}
+.progress-fill-76{width:76%}
+.progress-fill-77{width:77%}
+.progress-fill-78{width:78%}
+.progress-fill-79{width:79%}
+.progress-fill-80{width:80%}
+.progress-fill-81{width:81%}
+.progress-fill-82{width:82%}
+.progress-fill-83{width:83%}
+.progress-fill-84{width:84%}
+.progress-fill-85{width:85%}
+.progress-fill-86{width:86%}
+.progress-fill-87{width:87%}
+.progress-fill-88{width:88%}
+.progress-fill-89{width:89%}
+.progress-fill-90{width:90%}
+.progress-fill-91{width:91%}
+.progress-fill-92{width:92%}
+.progress-fill-93{width:93%}
+.progress-fill-94{width:94%}
+.progress-fill-95{width:95%}
+.progress-fill-96{width:96%}
+.progress-fill-97{width:97%}
+.progress-fill-98{width:98%}
+.progress-fill-99{width:99%}
+.progress-fill-100{width:100%}
+
+/* Section widths. "wide" only widens the content, "full" removes the container entirely: that is
+   what a picture or a colour field from edge to edge needs. A full width section drops its own
+   padding as well, otherwise "edge to edge" would still have 32 pixels of air on each side. */
+/* Mit ".kant" davor, weil das Design ".kant .shell{max-width:var(--k-container)}" schreibt: ohne
+   den Zusatz gewann diese Regel und ein breiter oder voller Abschnitt blieb so schmal wie alle. */
+.kant .width-wide>.section-inner{width:min(1600px,calc(100% - 64px));max-width:none}
+.kant .width-full>.section-inner{width:100%;max-width:none;margin-inline:0}
+@media (max-width:767px){.kant .width-wide>.section-inner{width:calc(100% - 36px)}}
+
+/* Ein Abschnitt, der ein Flex-Kasten ist, reiht seinen Inhaltskasten als Flex-Element ein.
+   Wachsen darf der dabei nicht: die Laufrichtung ist voreingestellt die Zeile, und dort frisst
+   das Wachsen die Randluft des Containers. Auf dem Telefon stand der Text eines Hero-Abschnitts
+   damit hart an der Kante, waehrend Kopf und alle uebrigen Abschnitte ihre 18 px hatten - am
+   Schreibtisch fiel es nicht auf, weil dort die Hoechstbreite des Designs vorher bremst.
+   Die Hoehe braucht das Wachsen nicht: quer zur Laufrichtung dehnt sich ein Flex-Element
+   ohnehin ueber die volle Hoehe, und steht "Ausrichtung: Mitte", ist die Mitte gewollt. */
+.block-section>.section-inner{flex:0 1 auto}
+
+/* Menu kinds. Horizontal is the default; vertical stacks; burger is a details element, so it
+   opens without a script - a menu that needs one would not open on a page that runs none. */
+.menu-vertical .menu-list{flex-direction:column;align-items:flex-start;gap:6px}
+.menu-burger>summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:10px 14px;border:1px solid currentColor;border-radius:8px;font-size:14px;font-weight:600;list-style:none}
+.menu-burger>summary::-webkit-details-marker{display:none}
+.burger-lines{position:relative;width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
+.menu-burger[open]>summary{border-radius:8px 8px 0 0}
+.menu-burger-body{padding:14px 0 4px}
+.menu-burger-body .menu-list{flex-direction:column;align-items:flex-start;gap:8px}
+/* Only one copy participates in layout, focus order and the accessibility tree. */
+.menu-collapse-tablet>.menu-burger,.menu-collapse-mobile>.menu-burger{display:none}
+@media (max-width:1024px),(hover:none) and (pointer:coarse){
+  .menu-collapse-tablet>.menu-burger{display:block}
+  .menu-collapse-tablet>.menu-list{display:none}
+}
+@media (max-width:767px){
+  .menu-collapse-mobile>.menu-burger{display:block}
+  .menu-collapse-mobile>.menu-list{display:none}
+}
+.menu-burger>summary{min-height:44px;min-width:44px}
+.menu-burger-body{overflow-wrap:anywhere}
+/* Im Kopfbereich klappt das Menue als Flaeche unter dem Kopf auf, ueber die volle Breite.
+   Inline geoeffnet stand es sonst in der schmalen Spalte neben der Marke und schob den
+   ganzen Kopf auseinander - auf dem Telefon sah es aus, als fehle das Menue. */
+.site-header{position:relative}
+/* Gibt der Kopfbereich seine Flaeche selbst vor, malt der klebende Kopf keine zweite dahinter:
+   sonst zeigte eine durchsichtige Sektion Weiss statt Seite, und die Schattenlinie liesse sich
+   weder faerben noch abschalten. Linie und Schatten kommen dann aus Rahmen und Wirkung. */
+.site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none}
+.site-header .menu-burger[open]>summary{border-radius:8px}
+/* Die Flaeche malt ihren eigenen Untergrund, also setzt sie auch ihre eigene Schriftfarbe.
+   Ohne das erbte sie die Farbe des Kopfbereichs: bei einem Kopf, der ueber einem dunklen Bild
+   schwebt und deshalb weiss schreibt, stand das aufgeklappte Menue weiss auf weiss. */
+.site-header .menu-burger-body{position:absolute;left:0;right:0;top:100%;z-index:30;
+  padding:15px max(16px,calc((100% - var(--k-container,1180px)) / 2 + 16px)) 25px;
+  background:var(--paper);color:var(--ink);
+  box-shadow:0 15px 25px color-mix(in srgb,var(--ink) 12%,transparent)}
+.site-header .menu-burger-body .menu-list{gap:0}
+.site-header .menu-burger-body .menu-list a{padding:12px 10px;font-size:16px}
+/* Visibility never overwrites the block's grid/flex/display settings. */
+.visibility-hidden{display:none!important}
+.slider-controls button[hidden]{display:none}
+@media (min-width:1025px){.visibility-tablet,.visibility-mobile,.visibility-hide-desktop{display:none!important}}
+@media (min-width:768px) and (max-width:1024px){.visibility-desktop,.visibility-mobile,.visibility-hide-tablet{display:none!important}}
+@media (max-width:767px){.visibility-desktop,.visibility-tablet,.visibility-hide-mobile{display:none!important}}
+/* Das Sprungziel des Knopfs „nach oben“, ein leerer <span> am Anfang von <body>.
+   WebKit springt nicht zu einem Ziel, dessen Box inline ist und keine Flaeche hat - der Tipp
+   kam an, #seitenanfang stand in der Adresse, und die Seite blieb stehen. Auf dem iPhone,
+   und ebenso in Safari auf dem Mac; Chromium ist toleranter, deshalb fiel es am Schreibtisch
+   nie auf. Ein leerer Block ohne Hoehe reicht WebKit, es ist die Inline-Box, die stoert.
+   Nachgestellt in Playwright-WebKit mit iPhone-Profil: inline bleibt bei 1500, block springt. */
+#seitenanfang{display:block}
+/* Der Knopf „nach oben". Ein Anker, kein Skript: er springt an den Anfang der Seite, und das
+   kann ein Browser seit jeher allein. Eingeblendet wird er beim Scrollen über eine Scroll-
+   Zeitachse - dieselbe Technik wie bei den Einblendungen. Wo es die nicht gibt (heute noch
+   Safari), steht er von Anfang an da: sichtbar und nutzbar ist besser als unsichtbar.
+   Aussehen, Größe, Form, Seite und Schwelle kommen aus den Einstellungen. */
+.scroll-top{position:fixed;bottom:22px;right:22px;z-index:40;display:grid;place-items:center;width:var(--kant-top-size,48px);height:var(--kant-top-size,48px);border-radius:var(--kant-top-radius,999px);background:var(--kant-top-bg,var(--accent));color:var(--kant-top-ink,#fff);text-decoration:none;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 28%,transparent);font-size:calc(var(--kant-top-size,48px) / 2.4);line-height:1}
+.scroll-top-links{right:auto;left:22px}
+.scroll-top:hover{filter:brightness(1.08)}
+.scroll-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
+@media (max-width:767px){.scroll-top{bottom:16px;right:16px}.scroll-top-links{left:16px;right:auto}}
+/* Solange die Einwilligungsfrage offen ist, bleibt der Knopf da. Frueher verschwand er ganz -
+   und auf dem Telefon bleibt die Frage oft einfach stehen, der Knopf kam dort also nie.
+   Bis 799 px deckt die Leiste die Ecke ab, in der er steht: dort setzt er sich per
+   Ankerpositionierung auf ihre Oberkante, wie hoch ihr Text auch umbricht. Ab 800 px steht die
+   Leiste zentriert mit Rand, die Ecke bleibt frei. Ein Browser ohne Ankerpositionierung blendet
+   ihn in der schmalen Stufe weiter aus - lieber kein Knopf als einer unter der Leiste. Der Anker
+   muss im Dokument vor dem Knopf stehen; page.html.twig gibt die Leiste deshalb zuerst aus. */
+.consent-bar{anchor-name:--kant-consent}
+@media (max-width:799px){
+@supports (anchor-name:--kant-consent){body.consent-open .scroll-top{position-anchor:--kant-consent;bottom:calc(anchor(top) + 12px)}}
+@supports not (anchor-name:--kant-consent){body.consent-open .scroll-top{display:none}}
+}
+/* Leiste und Ecke decken die Ecke auf jeder Breite ab - dort gilt dasselbe ohne Stufe. */
+@supports (anchor-name:--kant-consent){body.consent-open:has(.consent-layout-leiste,.consent-layout-ecke) .scroll-top{position-anchor:--kant-consent;bottom:calc(anchor(top) + 12px)}}
+@supports not (anchor-name:--kant-consent){body.consent-open:has(.consent-layout-leiste,.consent-layout-ecke) .scroll-top{display:none}}
+/* Sichtbar, sobald der Leser ein Stueck gescrollt hat - gesteuert von scrolled.js ueber
+   `kant-top-armed` und `kant-top-shown`. Ohne Skript bleibt der Knopf einfach sichtbar. */
+html.kant-top-armed .scroll-top{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,visibility .25s,transform .25s}
+html.kant-top-armed.kant-top-shown .scroll-top{opacity:1;visibility:visible;transform:none}
+@media (prefers-reduced-motion: reduce){html.motion-respect .scroll-top{transition:none}}
+/* Der Bildbetrachter. Die Fläche daneben schließt, das Bild bleibt in seinen Grenzen, und die
+   Bedienknöpfe sind groß genug für einen Daumen. Ohne Skript wird nichts davon gebraucht - dann
+   öffnet der Verweis einfach das große Bild. */
+.block-legal{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
+.block-legal a{color:inherit;text-decoration:none}
+.block-legal a:hover{text-decoration:underline}
+.image-zoom{cursor:zoom-in}
+.zoom-dialog{border:0;padding:0;max-width:min(96vw,1400px);max-height:94vh;background:transparent;color:#fff;overflow:visible}
+.zoom-dialog::backdrop{background:rgba(8,12,20,.88)}
+.zoom-figure{margin:0;display:grid;gap:12px;justify-items:center}
+.zoom-image{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:10px;background:#0c1220}
+.zoom-caption{margin:0;font-size:14px;text-align:center;max-width:70ch;color:#e7ecf3}
+.zoom-close,.zoom-prev,.zoom-next{position:fixed;display:grid;place-items:center;width:52px;height:52px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
+.zoom-close:hover,.zoom-prev:hover,.zoom-next:hover{background:rgba(255,255,255,.26)}
+.zoom-close:focus-visible,.zoom-prev:focus-visible,.zoom-next:focus-visible{outline:3px solid #fff;outline-offset:3px}
+.zoom-close{top:18px;right:18px}
+.zoom-prev{left:18px;top:50%;transform:translateY(-50%)}
+.zoom-next{right:18px;top:50%;transform:translateY(-50%)}
+.zoom-counter{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);margin:0;font-size:13px;color:#e7ecf3}
+@media (max-width:767px){
+    .zoom-close,.zoom-prev,.zoom-next{width:46px;height:46px}
+    .zoom-prev{left:8px}.zoom-next{right:8px}
+}
+/* Der PDF-Betrachter: fast bildschirmfüllend, mit einer schmalen Leiste darüber. Den Rest macht
+   der Betrachter des Browsers - Blättern, Zoom, Drucken. */
+.pdf-dialog{border:0;padding:0;width:min(96vw,1200px);height:94vh;max-width:none;max-height:none;background:#1b212c;color:#fff;border-radius:12px;overflow:hidden}
+.pdf-dialog[open]{display:flex;flex-direction:column}
+.pdf-dialog::backdrop{background:rgba(8,12,20,.88)}
+.pdf-bar{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px}
+.pdf-title{flex:1;min-width:0;margin:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
+.pdf-action{color:#fff;font-size:13px;text-decoration:none;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}
+.pdf-action:hover{background:rgba(255,255,255,.24)}
+.pdf-close{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
+.pdf-close:hover{background:rgba(255,255,255,.26)}
+.pdf-action:focus-visible,.pdf-close:focus-visible{outline:3px solid #fff;outline-offset:2px}
+.pdf-frame{flex:1;width:100%;border:0;background:#525659}
+
+.has-anchor{position:relative}.block-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:110px}.nav-label{display:inline-flex;align-items:center;gap:.5em}.nav-label>.block-icon{width:1.1em;height:1.1em;color:inherit;flex:none}
+
+/* Soziale Profile: eine Symbolreihe, Farbe und Abstand vom Block, Größe als Klasse. */
+.block-social{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0;padding:0;list-style:none}.block-social.social-vertical{flex-direction:column;align-items:flex-start}.block-social a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;line-height:1;transition:transform .2s,background-color .2s,opacity .2s}.block-social a:hover{transform:translateY(-2px)}.block-social svg{display:block;flex:none}.block-social.social-labels a{font-size:.875em;font-weight:600}.social-shape-circle a,.social-shape-square a{padding:.5em;background:color-mix(in srgb,currentColor 10%,transparent)}.social-shape-circle a{border-radius:999px}.social-shape-square a{border-radius:.35em}.social-shape-circle a:hover,.social-shape-square a:hover{background:color-mix(in srgb,currentColor 18%,transparent)}.social-labels.social-shape-circle a,.social-labels.social-shape-square a{padding-inline:.8em}.social-size-12 svg{width:12px;height:12px}.social-size-16 svg{width:16px;height:16px}.social-size-20 svg{width:20px;height:20px}.social-size-24 svg{width:24px;height:24px}.social-size-32 svg{width:32px;height:32px}.social-size-40 svg{width:40px;height:40px}.social-size-48 svg{width:48px;height:48px}.social-size-56 svg{width:56px;height:56px}.social-size-64 svg{width:64px;height:64px}.social-size-80 svg{width:80px;height:80px}.social-size-96 svg{width:96px;height:96px}.social-size-120 svg{width:120px;height:120px}.social-size-160 svg{width:160px;height:160px}.social-size-200 svg{width:200px;height:200px}.social-size-240 svg{width:240px;height:240px}
+@media(prefers-reduced-motion:reduce){html.motion-respect .block-social a{transition:none}html.motion-respect .block-social a:hover{transform:none}}
+
+/* Druck: eine Seite, die man mitnimmt. Kein Kopf mit Menü, keine Einwilligung, kein Nach-oben,
+   keine Formularknöpfe; Verweise zeigen ihre Adresse, Bilder bleiben auf der Seite. */
+@media print{
+  .kant{background:#fff;color:#000}
+  .site-header nav,.menu-toggle,.skip-link,.scroll-top,.consent-bar,.consent-banner,.block-form .cms-button,.form-step-nav,.form-progress,.post-pager,.lightbox,.slider-controls,.slider-dots,.tabs-nav,.cf-turnstile{display:none!important}
+  .site-header,.site-footer{border:0}
+  .site-header.is-sticky,.site-header.is-overlay,.site-header.is-overlay.is-sticky{position:static;background:transparent;box-shadow:none}
+  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
+  .block-section{padding:16px 0;break-inside:avoid}
+  img{max-width:100%;break-inside:avoid}
+  .tone-ink,.tone-mint{background:transparent;color:#000}
+  [data-step][hidden],.block-form [hidden]{display:block!important}
+}

public/assets/slider.js

@@ -0,0 +1,112 @@
+/** Scroll snapping is the baseline; arrows, dots and controllable playback enhance it. */
+export function initSliders(doc = document) {
+  const view = doc.defaultView;
+  const cleanups = [];
+  doc.querySelectorAll('.block-slider').forEach(slider => {
+    const slides = [...slider.querySelectorAll(':scope > .slider-slide')];
+    if (slides.length < 2 || slider.dataset.enhanced) return;
+    slider.dataset.enhanced = 'true';
+    const events = new view.AbortController(), signal = events.signal;
+    const preference = view.matchMedia('(prefers-reduced-motion: reduce)');
+    // The browser preference counts only when the website says so (Einstellungen → Bewegung).
+    const reduced = () => doc.documentElement.classList.contains('motion-respect') && preference.matches;
+    const seconds = Number(slider.dataset.autoplay || 0);
+    let playing = seconds >= 3 && !reduced(), hover = false, visible = false, timer;
+    const controls = doc.createElement('div'); controls.className = 'slider-controls';
+    for (const name of slider.classList) if (name.startsWith('visibility-')) controls.classList.add(name);
+    controls.setAttribute('role', 'group'); controls.setAttribute('aria-label', 'Slider bedienen');
+    const button = (text, label, action) => {
+      const node = doc.createElement('button'); node.type = 'button'; node.textContent = text;
+      node.setAttribute('aria-label', label); node.setAttribute('aria-controls', slider.id);
+      node.addEventListener('click', event => { event.preventDefault(); event.stopPropagation(); action(); }, { signal });
+      controls.append(node); return node;
+    };
+    const left = slide => slide.getBoundingClientRect().left - slider.getBoundingClientRect().left + slider.scrollLeft;
+    const available = () => slides.map((slide, i) => slide.getClientRects().length ? i : -1).filter(i => i >= 0);
+    const active = () => {
+      let index = 0, distance = Infinity;
+      available().forEach(i => { const delta = Math.abs(left(slides[i]) - slider.scrollLeft); if (delta < distance) { distance = delta; index = i; } });
+      return index;
+    };
+    let settle = null;
+    const go = index => {
+      if (!available().includes(index)) return;
+      const target = Math.max(0, Math.min(slider.scrollWidth - slider.clientWidth, left(slides[index])));
+      if (reduced()) { slider.scrollTo({ left: target, behavior: 'instant' }); return; }
+      // Safari cancels a smooth scroll on a snapping container and snaps back to the slide it
+      // came from - the slider stutters instead of moving on. Snapping is switched off for the
+      // ride and put back once the movement has settled, on the exact start of a slide, so
+      // restoring it moves nothing.
+      clearInterval(settle);
+      const snap = slider.style.scrollSnapType;
+      slider.style.scrollSnapType = 'none';
+      slider.scrollTo({ left: target, behavior: 'smooth' });
+      // Restored on arrival, or after two seconds if the ride was interrupted - a background tab
+      // pauses smooth scrolling, and snapping must not come back halfway.
+      let ticks = 0;
+      settle = setInterval(() => {
+        if (Math.abs(slider.scrollLeft - target) < 1 || ++ticks > 25) { clearInterval(settle); settle = null; slider.style.scrollSnapType = snap; }
+      }, 80);
+    };
+    const step = direction => {
+      const visible = available(), position = visible.indexOf(active());
+      if (!visible.length) return;
+      const last = slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 2;
+      const first = slider.scrollLeft <= 2;
+      go(direction > 0 ? (last ? visible[0] : visible[Math.min(visible.length - 1, position + 1)]) : (first ? visible.at(-1) : visible[Math.max(0, position - 1)]));
+    };
+    const manual = action => { playing = false; clearTimeout(timer); update(); action(); };
+    const previous = button('←', 'Vorherige Folie', () => manual(() => step(-1))); previous.className = 'slider-prev';
+    const count = doc.createElement('span'); count.className = 'slider-position'; controls.append(count);
+    const next = button('→', 'Nächste Folie', () => manual(() => step(1))); next.className = 'slider-next';
+    const dots = [];
+    if (slider.classList.contains('slider-dots')) {
+      const group = doc.createElement('div'); group.className = 'slider-control-dots'; controls.append(group);
+      slides.forEach((slide, i) => {
+        const dot = button('●', `Folie ${i + 1} anzeigen`, () => manual(() => go(i))); group.append(dot); dots.push(dot);
+      });
+    }
+    const play = seconds >= 3 ? button('', 'Automatische Wiedergabe pausieren', () => { playing = !playing; update(); schedule(); }) : null;
+    if (play) play.className = 'slider-play';
+    const update = () => {
+      const visible = available();
+      const fits = visible.length < 2 || slider.scrollWidth <= slider.clientWidth + 2;
+      controls.hidden = fits; previous.disabled = next.disabled = fits;
+      const index = active(); count.textContent = `${Math.max(0, visible.indexOf(index) + 1)} / ${visible.length}`;
+      dots.forEach((dot, i) => { dot.hidden = !visible.includes(i); dot.setAttribute('aria-pressed', String(i === index)); });
+      if (play) {
+        play.textContent = playing ? 'Pause' : 'Wiedergabe'; play.dataset.playing = String(playing);
+        // Der zugängliche Name beginnt mit dem sichtbaren Text (WCAG 2.5.3): wer „Pause“ liest, kann „Pause“ sagen.
+        play.setAttribute('aria-label', playing ? 'Pause: automatische Wiedergabe anhalten' : 'Wiedergabe: automatisch weiterblättern');
+        play.disabled = reduced(); play.title = reduced() ? 'Automatik ist bei reduzierter Bewegung deaktiviert.' : '';
+      }
+    };
+    const schedule = () => {
+      clearTimeout(timer);
+      if (playing && !reduced()) timer = setTimeout(() => { if (playing && !hover && visible && !doc.hidden) step(1); schedule(); }, seconds * 1000);
+    };
+    const pause = () => { playing = false; update(); clearTimeout(timer); };
+    // Slider and controls share a positioned shell, so arrows and dots can lie on the picture
+    // the way the Kant-IT hero slider draws them.
+    const shell = doc.createElement('div'); shell.className = 'slider-shell';
+    slider.replaceWith(shell); shell.append(slider, controls);
+    slider.classList.add('slider-controlled'); update();
+    slider.addEventListener('scroll', update, { passive: true, signal });
+    view.addEventListener('resize', update, { passive: true, signal });
+    slider.addEventListener('pointerenter', () => { hover = true; }, { signal });
+    slider.addEventListener('pointerleave', () => { hover = false; schedule(); }, { signal });
+    for (const event of ['pointerdown', 'wheel', 'touchstart', 'focusin']) slider.addEventListener(event, pause, { passive: true, signal });
+    slider.addEventListener('keydown', event => {
+      if (event.target !== slider || !['ArrowLeft', 'ArrowRight'].includes(event.key)) return;
+      event.preventDefault(); manual(() => step(event.key === 'ArrowRight' ? 1 : -1));
+    }, { signal });
+    const observer = new view.IntersectionObserver(entries => { visible = entries[0].isIntersecting; }, { threshold: 0 }); observer.observe(slider);
+    const resize = new view.ResizeObserver(update); resize.observe(slider);
+    preference.addEventListener('change', () => { if (reduced()) pause(); update(); }, { signal });
+    schedule();
+    cleanups.push(() => { clearTimeout(timer); clearInterval(settle); slider.style.scrollSnapType = ''; events.abort(); observer.disconnect(); resize.disconnect(); controls.remove(); shell.replaceWith(slider); slider.classList.remove('slider-controlled'); delete slider.dataset.enhanced; });
+  });
+  return () => cleanups.forEach(cleanup => cleanup());
+}
+
+if (!document.querySelector('#editor')) initSliders();

public/assets/tabs.js

@@ -25,14 +25,19 @@
       panels[index].querySelector('.tabs-heading')?.classList.add('visually-hidden');
     });
 
+    const available = () => links.map((link, i) => getComputedStyle(link.parentElement).display !== 'none' ? i : -1).filter(i => i >= 0);
+    let selected = -1;
     const select = (index, moveFocus = true) => {
+      const visible = available();
+      if (!visible.includes(index)) index = visible[0] ?? -1;
+      selected = index;
       links.forEach((link, i) => {
         const current = i === index;
         link.setAttribute('aria-selected', String(current));
         link.tabIndex = current ? 0 : -1;
         panels[i].hidden = !current;
       });
-      if (moveFocus) links[index].focus();
+      if (moveFocus && index >= 0) links[index].focus();
     };
 
     list.addEventListener('click', event => {
@@ -46,15 +51,18 @@
     list.addEventListener('keydown', event => {
       const index = links.indexOf(event.target.closest('a'));
       if (index === -1) return;
-      const moves = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: links.length - 1 };
+      const visible = available(), position = visible.indexOf(index);
+      if (!visible.length) return;
+      const moves = { ArrowRight: position + 1, ArrowLeft: position - 1, Home: 0, End: visible.length - 1 };
       if (!(event.key in moves)) return;
       event.preventDefault();
-      select((moves[event.key] + links.length) % links.length);
+      select(visible[(moves[event.key] + visible.length) % visible.length]);
     });
 
     // A link from elsewhere may point straight at one panel.
     const deepLink = panels.findIndex(panel => panel.id === location.hash.slice(1));
     select(deepLink === -1 ? 0 : deepLink, false);
+    window.addEventListener('resize', () => select(selected, false));
     group.classList.add('tabs-ready');
   };
 

public/assets/task-worker.js

@@ -0,0 +1,45 @@
+/*
+ * Der Takt des geöffneten Backends.
+ *
+ * Auf einer Website ohne Besucher gibt es keinen Auslöser für wiederkehrende Aufgaben - außer
+ * dem Menschen, der gerade in der Verwaltung arbeitet. Dieses Skript klopft in seinem Namen alle
+ * 60 Sekunden an; der Server entscheidet, ob überhaupt etwas fällig ist.
+ *
+ * Drei Eigenschaften, die es unauffällig machen:
+ *
+ * - Es fragt nur, während der Reiter sichtbar ist. Ein vergessener Hintergrundreiter soll keine
+ *   Sitzung endlos offen halten und keine Anfragen erzeugen, die niemand sehen will.
+ * - Es fragt nie zwei Mal gleichzeitig: eine laufende Anfrage blockiert die nächste.
+ * - Ein Fehlschlag ist kein Ereignis. Kein Hinweis, keine Meldung - beim nächsten Takt wieder.
+ */
+(function () {
+    var endpoint = document.querySelector('meta[name="kant-tick"]');
+    var token = document.querySelector('meta[name="kant-tick-token"]');
+    if (!endpoint || !token || !window.fetch) {
+        return;
+    }
+    var busy = false;
+
+    function tick() {
+        if (busy || document.visibilityState !== 'visible') {
+            return;
+        }
+        busy = true;
+        var body = new FormData();
+        body.append('_csrf_token', token.content);
+        fetch(endpoint.content, { method: 'POST', body: body, credentials: 'same-origin' })
+            .catch(function () {})
+            .then(function () {
+                busy = false;
+            });
+    }
+
+    // Der erste Takt kommt verzögert: beim Seitenaufbau hat der Browser Wichtigeres zu tun.
+    window.setTimeout(tick, 5000);
+    window.setInterval(tick, 60000);
+    document.addEventListener('visibilitychange', function () {
+        if (document.visibilityState === 'visible') {
+            tick();
+        }
+    });
+})();

public/assets/theme-buttons.js

@@ -0,0 +1,39 @@
+import { buttonSample } from './button-design.js';
+import { createColorControl } from './color-control.js';
+
+const root = document.querySelector('#button-defaults');
+if (root) {
+  const schema = JSON.parse(root.dataset.schema), form = root.closest('form');
+  const read = () => Object.fromEntries([...root.querySelectorAll('[name^="buttons["]')].map(input => [input.name.slice(8, -1), input.value]));
+  const update = () => {
+    // Unsaved palette edits are reflected immediately in all samples.
+    schema.colors = [...form.querySelectorAll('[data-color-card]')].flatMap(row => {
+      const key = row.querySelector('[name$="[key]"]'), value = row.querySelector('[name$="[value]"]');
+      return key?.value && value ? [{ key: key.value, value: value.value }] : [];
+    });
+    const values = read(), previews = root.querySelector('.button-state-previews'); previews.replaceChildren();
+    for (const [label, hover] of [['Normal', false], ['Beim Überfahren', true]]) {
+      const state = document.createElement('div'); state.className = 'button-state';
+      const title = document.createElement('span'); title.className = 'field-help'; title.textContent = label;
+      state.append(title, buttonSample('Mehr erfahren', values, schema, hover)); previews.append(state);
+    }
+    root.querySelectorAll('[data-button-preset]').forEach((choice, index) => {
+      const preset = schema.buttonPresets[index]; choice.setAttribute('aria-pressed', String(preset.shape === values.shape && preset.appearance === values.appearance));
+      choice.querySelector('.cms-button')?.remove();
+      const sample = buttonSample('Button', { ...values, ...preset, size: 'small' }, schema); sample.setAttribute('aria-hidden', 'true'); choice.prepend(sample);
+    });
+  };
+  for (const input of root.querySelectorAll('[data-button-color]')) {
+    const label = root.querySelector(`label[for="${input.id}"]`).textContent;
+    const originalId = input.id; input.type = 'hidden'; input.id += '-value';
+    const control = createColorControl({ id: originalId, label, value: input.value, colors: schema.colors, onChange: value => { input.value = value; update(); } });
+    control.querySelector('.color-inherit').hidden = true;
+    input.after(control);
+  }
+  root.querySelectorAll('[data-button-preset]').forEach((choice, index) => choice.addEventListener('click', () => {
+    const preset = schema.buttonPresets[index];
+    for (const key of ['shape', 'appearance']) root.querySelector(`[name="buttons[${key}]"]`).value = preset[key];
+    update();
+  }));
+  form.addEventListener('input', update); form.addEventListener('change', update); update();
+}

public/assets/theme-panel.js

@@ -0,0 +1,171 @@
+/*
+ * Die Designseite: Palette, Schriften, Grundtypografie.
+ *
+ * Ohne Skript sind es Karten mit Eingaben; eine Farbe ohne Schlüssel und eine Schrift ohne
+ * Schlüssel werden nicht gespeichert, so lassen sie sich auch dann entfernen. Das Skript macht
+ * daraus die eigentliche Werkstatt: Karten hinzufügen und entfernen, fertige Paletten übernehmen,
+ * die Grundfarben aus der Palette wählen statt tippen, jede Schrift in sich selbst zeigen und die
+ * Grundtypografie als lesbare Probe.
+ */
+import { createColorControl } from './color-control.js';
+
+const form = document.querySelector('[data-theme-editor]');
+if (form) {
+  const palettes = JSON.parse(form.dataset.palettes), colorNames = JSON.parse(form.dataset.colorNames);
+  const colorList = form.querySelector('[data-color-list]'), colorTemplate = form.querySelector('[data-color-template]');
+  const fontList = form.querySelector('[data-font-list]'), fontTemplate = form.querySelector('[data-font-template]');
+  const colorCards = () => [...colorList.querySelectorAll('[data-color-card]')];
+  const fontCards = () => [...fontList.querySelectorAll('[data-font-card]')];
+  let nextColor = colorCards().length, nextFont = fontCards().length;
+  const value = (card, selector) => card.querySelector(selector).value.trim();
+
+  const palette = () => colorCards().flatMap(card => {
+    const key = value(card, '[data-color-key]').toLowerCase();
+    return key ? [{ key, name: value(card, '[data-color-name]') || key, value: card.querySelector('[data-color-value]').value }] : [];
+  });
+  const fonts = () => fontCards().flatMap(card => {
+    const key = value(card, '[data-font-key]').toLowerCase();
+    return key ? [{ key, name: value(card, '[data-font-name]') || key, family: value(card, '[data-font-family]'), fallback: card.querySelector('[data-font-fallback]').value }] : [];
+  });
+  const stack = font => font.family ? `"${font.family}", ${font.fallback}` : font.fallback;
+  const hex = raw => /^#[0-9a-f]{6}/i.test(raw || '') ? raw.slice(0, 7) : palette().find(color => `@${color.key}` === raw)?.value || '';
+
+  /* ---- Palette ---------------------------------------------------------------------- */
+
+  const refreshColors = () => {
+    colorCards().forEach((card, index) => {
+      const name = value(card, '[data-color-name]') || value(card, '[data-color-key]') || `Farbe ${index + 1}`;
+      card.querySelector('[data-color-hex]').textContent = card.querySelector('[data-color-value]').value;
+      card.querySelector('[data-color-value]').setAttribute('aria-label', `Farbwert von ${name}`);
+      const remove = card.querySelector('[data-remove-color]');
+      remove.hidden = false; remove.setAttribute('aria-label', `${name} entfernen`);
+    });
+    form.querySelector('[data-color-count]').textContent = String(palette().length);
+  };
+  const addColor = (values = {}) => {
+    colorList.insertAdjacentHTML('beforeend', colorTemplate.innerHTML.replaceAll('__n__', String(nextColor++)));
+    const card = colorList.lastElementChild; card.classList.remove('swatch-card-new');
+    for (const [selector, field] of [['[data-color-key]', 'key'], ['[data-color-name]', 'name'], ['[data-color-value]', 'value']]) {
+      if (values[field] !== undefined) card.querySelector(selector).value = values[field];
+    }
+    return card;
+  };
+  // Die leeren Karten braucht es nur ohne Skript: hier kommt jede Farbe über den Knopf.
+  const emptyColors = colorCards().filter(card => card.classList.contains('swatch-card-new'));
+  if (colorCards().length > emptyColors.length) emptyColors.forEach(card => card.remove());
+  const addColorButton = form.querySelector('[data-add-color]'); addColorButton.hidden = false;
+  addColorButton.addEventListener('click', () => {
+    const card = addColor(); refreshColors(); mountBaseColors(); card.querySelector('[data-color-name]').focus();
+  });
+  colorList.addEventListener('click', event => {
+    const button = event.target.closest('[data-remove-color]');
+    if (!button) return;
+    button.closest('[data-color-card]').remove(); refreshColors(); mountBaseColors(); renderType(); addColorButton.focus();
+  });
+  colorList.addEventListener('input', () => { refreshColors(); renderType(); });
+  colorList.addEventListener('change', () => { mountBaseColors(); renderType(); });
+
+  const presets = form.querySelector('[data-palette-presets]'), status = form.querySelector('[data-palette-status]');
+  presets.hidden = false;
+  presets.addEventListener('click', event => {
+    const button = event.target.closest('[data-palette-preset]');
+    if (!button) return;
+    const preset = palettes[Number(button.dataset.palettePreset)];
+    // Bekannte Schlüssel bekommen den neuen Wert, fehlende kommen dazu, eigene Farben bleiben.
+    for (const [key, color] of Object.entries(preset.colors)) {
+      const card = colorCards().find(candidate => value(candidate, '[data-color-key]').toLowerCase() === key);
+      if (card) card.querySelector('[data-color-value]').value = color;
+      else addColor({ key, name: colorNames[key] || key, value: color });
+    }
+    refreshColors(); mountBaseColors(); renderType();
+    status.textContent = `Palette „${preset.name}“ übernommen – sie gilt, sobald das Design gespeichert ist.`;
+  });
+
+  /* ---- Schriften -------------------------------------------------------------------- */
+
+  const applySample = card => {
+    const family = value(card, '[data-font-family]'), fallback = card.querySelector('[data-font-fallback]').value;
+    card.querySelector('[data-font-sample]').style.fontFamily = stack({ family, fallback });
+    const chosen = new Set([...card.querySelectorAll('[data-font-weight]')].filter(input => input.checked).map(input => input.value));
+    for (const weight of card.querySelectorAll('[data-font-weights] > span')) weight.hidden = !chosen.has(weight.className.replace('font-weight-', ''));
+  };
+  const syncFontSelects = () => {
+    const list = fonts();
+    for (const select of form.querySelectorAll('[data-font-select]')) {
+      const current = select.value, keep = select.querySelector('option[value="inherit"]');
+      select.replaceChildren(...(keep ? [keep] : []), ...list.map(font => new Option(font.name, font.key)));
+      select.value = list.some(font => font.key === current) || (keep && current === 'inherit') ? current : (keep ? 'inherit' : list[0]?.key ?? '');
+    }
+  };
+  const refreshFonts = () => {
+    fontCards().forEach((card, index) => {
+      applySample(card);
+      const name = value(card, '[data-font-name]') || value(card, '[data-font-key]') || `Schrift ${index + 1}`;
+      const remove = card.querySelector('[data-remove-font]');
+      remove.hidden = false; remove.setAttribute('aria-label', `${name} entfernen`);
+    });
+    form.querySelector('[data-font-count]').textContent = String(fonts().length);
+    syncFontSelects();
+  };
+  const emptyFonts = fontCards().filter(card => card.classList.contains('font-card-new'));
+  if (fontCards().length > emptyFonts.length) emptyFonts.forEach(card => card.remove());
+  const addFontButton = form.querySelector('[data-add-font]'); addFontButton.hidden = false;
+  addFontButton.addEventListener('click', () => {
+    fontList.insertAdjacentHTML('beforeend', fontTemplate.innerHTML.replaceAll('__n__', String(nextFont++)));
+    const card = fontList.lastElementChild; card.classList.remove('font-card-new');
+    refreshFonts(); card.querySelector('[data-font-name]').focus();
+  });
+  fontList.addEventListener('click', event => {
+    const button = event.target.closest('[data-remove-font]');
+    if (!button) return;
+    button.closest('[data-font-card]').remove(); refreshFonts(); renderType(); addFontButton.focus();
+  });
+  fontList.addEventListener('input', () => { refreshFonts(); renderType(); });
+  fontList.addEventListener('change', () => { refreshFonts(); renderType(); });
+
+  /* ---- Grundtypografie -------------------------------------------------------------- */
+
+  const preview = form.querySelector('[data-type-preview]');
+  const baseInputs = {};
+  const lengthPattern = /^(0|-?\d{1,5}(\.\d{1,3})?(px|rem|em|%|vw|vh|ch))$/;
+  function renderType() {
+    const list = fonts();
+    const family = key => { const font = list.find(entry => entry.key === key); return font ? stack(font) : 'inherit'; };
+    const raw = form.querySelector('#base-size').value.trim(), size = lengthPattern.test(raw) ? raw : '18px';
+    const line = form.querySelector('#base-line').value || '1.6', scale = parseFloat(form.querySelector('#base-scale').value) || 1.25;
+    preview.style.fontFamily = family(form.querySelector('#base-font').value);
+    preview.style.fontSize = size; preview.style.lineHeight = line;
+    const heading = family(form.querySelector('#base-heading-font').value);
+    for (const [selector, step] of [['[data-type-h1]', 4], ['[data-type-h2]', 3]]) {
+      const node = preview.querySelector(selector);
+      node.style.fontFamily = heading; node.style.fontSize = `calc(${size} * ${(scale ** step).toFixed(4)})`;
+    }
+    preview.style.color = hex(baseInputs.color?.value) || '#203b34';
+    preview.style.background = hex(baseInputs.backgroundColor?.value) || '#ffffff';
+    const link = preview.querySelector('[data-type-link]');
+    link.style.color = hex(baseInputs.linkColor?.value) || 'inherit';
+    link.style.textDecoration = form.querySelector('[data-base-underline]').checked ? 'underline' : 'none';
+  }
+  // Die drei Grundfarben als Palettenwahl. Die Palette kann sich unter ihnen ändern, deshalb
+  // werden die Bedienelemente bei jeder Änderung der Palette neu aufgebaut; der Wert bleibt.
+  function mountBaseColors() {
+    const colors = palette();
+    for (const input of form.querySelectorAll('[data-base-color]')) {
+      const key = input.name.slice(5, -1);
+      if (!input.dataset.controlId) {
+        input.dataset.controlId = input.id; input.type = 'hidden'; input.id += '-value'; baseInputs[key] = input;
+      }
+      const id = input.dataset.controlId, label = form.querySelector(`label[for="${id}"]`).textContent;
+      input.nextElementSibling?.classList.contains('color-control') && input.nextElementSibling.remove();
+      const control = createColorControl({
+        id, label, value: input.value, colors,
+        onChange: chosen => { input.value = chosen; renderType(); }, onComplete: () => {},
+      });
+      control.querySelector('.color-inherit').hidden = true;
+      input.after(control);
+    }
+  }
+
+  refreshColors(); refreshFonts(); mountBaseColors(); renderType();
+  form.addEventListener('input', renderType); form.addEventListener('change', renderType);
+}

public/index.php

@@ -3,6 +3,11 @@
 use App\Kernel;
 use Symfony\Component\HttpFoundation\Request;
 
+// PHP nennt in jeder Antwort seine genaue Fassung („X-Powered-By: PHP/8.4.22"). Das nützt
+// niemandem ausser dem, der nach einer Luecke genau dieser Fassung sucht. Auf gewoehnlichem
+// Hosting laesst sich expose_php nicht umstellen, dieser Aufruf wirkt trotzdem.
+header_remove('X-Powered-By');
+
 require dirname(__DIR__).'/config/bootstrap.php';
 $kernel = new Kernel($_SERVER['APP_ENV'], (bool) $_SERVER['APP_DEBUG']);
 $request = Request::createFromGlobals();

scripts/accordion-check.mjs

@@ -0,0 +1,136 @@
+import { chromium } from 'playwright';
+import AxeBuilder from '@axe-core/playwright';
+import assert from 'node:assert/strict';
+import { execFileSync, spawn } from 'node:child_process';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { randomBytes } from 'node:crypto';
+import net from 'node:net';
+
+const php = process.env.PHP_BINARY || 'php';
+const fixture = JSON.parse(execFileSync(php, ['tests/pilot-fixture.php'], { encoding: 'utf8', windowsHide: true }));
+const env = { ...process.env, APP_ENV: 'prod', APP_DEBUG: '0', APP_SECRET: randomBytes(32).toString('hex'), DATABASE_URL: fixture.databaseUrl, MEDIA_DIRECTORY: fixture.mediaDirectory };
+execFileSync(php, ['bin/console', 'cache:clear', '--env=prod', '--no-debug'], { stdio: 'ignore', windowsHide: true, env });
+const probe = net.createServer(); await new Promise(resolve => probe.listen(0, '127.0.0.1', resolve));
+const port = probe.address().port; await new Promise(resolve => probe.close(resolve));
+const origin = `http://127.0.0.1:${port}`;
+const server = spawn(php, ['-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`, '-t', 'public', 'bin/dev-router.php'], { windowsHide: true, stdio: 'ignore', env: { ...env, SITE_ORIGIN: origin } });
+const report = 'reports/accordion'; await mkdir(report, { recursive: true });
+let browser, page;
+const checks = [], errors = [];
+try {
+  for (let attempt = 0; attempt < 60; attempt++) {
+    try { if ((await fetch(origin)).ok) break; } catch {}
+    if (attempt === 59) throw new Error('Pilot test server did not start');
+    await new Promise(resolve => setTimeout(resolve, 200));
+  }
+  browser = await chromium.launch();
+  const context = await browser.newContext({ viewport: { width: 1600, height: 1050 } });
+  page = await context.newPage(); page.setDefaultTimeout(15000); page.on('pageerror', error => errors.push(error.message));
+  await page.goto(origin + '/admin/login');
+  await page.getByLabel('Benutzername').fill(fixture.username); await page.getByLabel('Passwort', { exact: true }).fill(fixture.password);
+  await page.getByRole('button', { name: 'Anmelden', exact: true }).click(); await page.waitForURL(origin + '/admin');
+  const api = `${origin}/admin/api/pages/${fixture.homeId}`;
+  const data = await (await context.request.get(api)).json();
+  data.document.blocks.unshift({ id: 'qa-accordion', type: 'accordion', children: [
+    { id: 'qa-entry', type: 'accordionitem', props: { title: 'Was ist enthalten?', open: false }, children: [] },
+    { id: 'qa-open', type: 'accordionitem', props: { title: 'Schon geöffnet', open: true }, children: [{ id: 'qa-existing', type: 'text', props: { text: '<p>Vorhandener Inhalt bleibt.</p>' } }] },
+  ] }, { id: 'qa-empty-accordion', type: 'accordion', children: [] });
+  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}`);
+  const frame = page.frameLocator('#preview');
+  const ready = async () => page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  const select = async id => { await page.locator(`#structure [data-block-id="${id}"]`).click(); await page.locator('[data-panel="content"]').click(); };
+  await ready();
+  await frame.locator('#qa-entry > summary').click();
+  assert.equal(await frame.locator('#qa-entry').evaluate(el => el.open), true);
+  assert.equal(await page.getByLabel('Beim Laden geöffnet', { exact: true }).isChecked(), false);
+  assert.equal(await page.locator('#save').isDisabled(), true, 'Revealing the editor body must not change the document');
+  await frame.locator('#qa-entry [data-editor-insert]').focus();
+  await frame.locator('#qa-entry [data-editor-insert]').press('Enter');
+  assert.match(await page.locator('#insert-hint').innerText(), /Was ist enthalten/);
+  await page.locator('#library [data-add="text"]').click();
+  await ready(); await frame.locator('#qa-entry .block-text').waitFor();
+  const textId = await frame.locator('#qa-entry .block-text').getAttribute('id');
+  await page.getByLabel('Text', { exact: true }).fill('Text direkt im Akkordeon.'); await ready();
+  assert.equal(await frame.locator('#qa-entry .block-text').innerText(), 'Text direkt im Akkordeon.');
+  await page.locator('#undo').click(); await page.locator('#undo').click(); await ready();
+  assert.equal(await frame.locator(`#${textId}`).count(), 0);
+  await page.locator('#redo').click(); await page.locator('#redo').click(); await ready();
+  assert.equal(await frame.locator(`#qa-entry #${textId}`).count(), 1);
+  checks.push('closed entries reveal editable bodies and empty insert areas without changing public state; text insertion, editing and undo/redo');
+
+  await select('qa-accordion');
+  assert.equal(await page.locator('#library [data-add="text"]').isDisabled(), true, 'Group selection must not put text outside the accordion');
+  await page.getByRole('button', { name: 'Eintrag 1: Was ist enthalten? bearbeiten', exact: true }).click();
+  await page.getByRole('button', { name: '＋ Inhalt hinzufügen', exact: true }).click();
+  await page.locator('#library [data-add="button"]').click(); await ready();
+  const firstButtonId = await frame.locator('#qa-entry a.button').getAttribute('id');
+  assert.equal(await frame.locator('#qa-entry .accordion-body > [id]').last().getAttribute('id'), firstButtonId, 'Add content appends after existing content');
+  await select('qa-open');
+  await page.locator('#library [data-add="button"]').dragTo(frame.locator('#qa-open .accordion-body'), { targetPosition: { x: 40, y: 20 } });
+  await ready(); await frame.locator('#qa-open a.button').waitFor();
+  const draggedId = await frame.locator('#qa-open a.button').getAttribute('id');
+  await page.locator('#undo').click(); await ready(); assert.equal(await frame.locator(`#${draggedId}`).count(), 0);
+  await page.locator('#redo').click(); await ready(); assert.equal(await frame.locator(`#qa-open #${draggedId}`).count(), 1);
+  checks.push('entry selection in inspector, append content and drag/drop into an open body with undo/redo');
+
+  await frame.locator('#qa-accordion > .editor-add-content [data-editor-add-entry]').click();
+  await page.getByLabel('Titel', { exact: true }).fill('Ein neuer Eintrag'); await ready();
+  const newEntryId = await frame.locator('#qa-accordion > details').last().getAttribute('id');
+  assert.equal(await frame.locator('#qa-accordion > details').count(), 3);
+  assert.equal(await frame.locator(`#${newEntryId}`).evaluate(el => el.open), true);
+  await select('qa-empty-accordion');
+  await page.getByRole('button', { name: '＋ Eintrag hinzufügen', exact: true }).click(); await ready();
+  assert.equal(await frame.locator('#qa-empty-accordion > details').count(), 1);
+  await page.getByLabel('Titel', { exact: true }).fill('Erster Eintrag'); await ready();
+  await page.locator('#tree-search').fill('Ein neuer Eintrag');
+  assert.equal(await page.locator(`#structure [data-block-id="${newEntryId}"]`).count(), 1);
+  await page.locator('#tree-search').fill('');
+  await select('qa-entry'); await page.locator('[data-panel="design"]').click();
+  await page.locator('#library [data-add="accordion"]').click(); await ready();
+  assert.equal(await page.locator('#properties-title').innerText(), 'Akkordeon-Eintrag');
+  assert.equal(await page.getByLabel('Titel', { exact: true }).inputValue(), 'Eine Frage');
+  await page.locator('#undo').click(); await ready();
+  checks.push('add entries in canvas and inspector, recover empty accordion, search by title, new accordion starts with its editable entry selected');
+
+  await page.locator('#save').click(); await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
+  await page.reload(); await ready(); await select('qa-entry');
+  assert.equal(await page.getByLabel('Beim Laden geöffnet', { exact: true }).isChecked(), false);
+  assert.equal(await frame.locator('#qa-entry').evaluate(el => el.open), true);
+  const saved = await (await context.request.get(api)).json();
+  const accordion = saved.document.blocks.find(b => b.id === 'qa-accordion');
+  assert.equal(accordion.children[0].props.open, false); assert.equal(accordion.children[1].props.open, true);
+  assert.deepEqual(accordion.children[0].children.map(b => b.id), [textId, firstButtonId]);
+  assert.ok(!JSON.stringify(saved.document).includes('editor-empty'));
+  await page.locator('#publish').click(); await page.locator('#confirm-publish').click();
+  await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
+  const plain = await browser.newContext({ javaScriptEnabled: false });
+  const visitor = await plain.newPage(); await visitor.goto(origin);
+  assert.equal(await visitor.locator('#qa-entry').evaluate(el => el.open), false);
+  assert.equal(await visitor.locator('#qa-open').evaluate(el => el.open), true);
+  assert.equal(await visitor.locator('[data-editor-insert],[data-editor-add-entry],.editor-empty').count(), 0);
+  await visitor.locator('#qa-entry > summary').click();
+  assert.equal(await visitor.locator('#qa-entry').evaluate(el => el.open), true);
+  assert.equal(await visitor.locator(`#qa-entry #${textId}`).isVisible(), true);
+  await visitor.locator('#qa-entry > summary').press('Enter');
+  assert.equal(await visitor.locator('#qa-entry').evaluate(el => el.open), false);
+  await plain.close();
+  checks.push('save/reload/publication keep children and original open flags; published accordion toggles without JavaScript and contains no editing aids');
+
+  for (const width of [1600, 390]) {
+    await page.setViewportSize({ width, height: 1050 }); await select('qa-entry'); await ready();
+    await page.locator('[data-viewport="mobile"]').click(); await ready();
+    await frame.locator('#qa-entry').scrollIntoViewIfNeeded();
+    const audit = await new AxeBuilder({ page }).exclude('#preview').analyze();
+    assert.deepEqual(audit.violations.map(v => ({ id: v.id, nodes: v.nodes.map(n => n.target) })), []);
+    assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true);
+    await page.screenshot({ path: `${report}/editor-${width}.png`, fullPage: true });
+  }
+  checks.push('desktop/mobile editor passes axe and layout checks with editable accordion preview');
+  assert.deepEqual(errors, []);
+  await writeFile(`${report}/result.json`, JSON.stringify({ checks, passed: true }, null, 2));
+  console.log('Accordion checks passed:', checks.length, 'groups.');
+} catch (error) {
+  if (page) await page.screenshot({ path: `${report}/failure.png`, fullPage: true }).catch(() => {});
+  throw error;
+} finally { await browser?.close(); server.kill(); }

scripts/add-immobilien-deeg-angebote.php

@@ -0,0 +1,177 @@
+<?php
+
+/**
+ * Legt auf der bestehenden DEEG-Installation die Seite „Angebote“ an und verweist von der
+ * Navigation und vom Angebote-Band der Startseite dorthin.
+ *
+ * Die Seite zeigt die Ergebnisliste des DEEG-Portals bei ImmobilienScout24 als eingebetteten
+ * Rahmen – Baustein „Externer Inhalt“, nicht eigenes HTML: nur er fragt vorher um Einwilligung
+ * und trägt den Anbieter in die Sicherheitsrichtlinie der Seite ein. Kopfabschnitt, Schriftgrößen
+ * und Farben sind dieselben wie bei Impressum und Datenschutz (siehe seed-immobilien-deeg.php).
+ *
+ * Läuft nur gegen die DEEG-Datenbank und nur, solange es die Seite noch nicht gibt.
+ */
+require dirname(__DIR__).'/config/bootstrap.php';
+
+use App\Content\DocumentValidator;
+use App\Content\MediaLibrary;
+use App\Content\MenuRepository;
+use App\Content\PageRepository;
+use App\Content\SiteSettings;
+use App\Infrastructure\ConnectionFactory;
+
+$root = dirname(__DIR__);
+$url = str_replace('%kernel.project_dir%', str_replace('\\', '/', $root), (string) $_SERVER['DATABASE_URL']);
+if (!str_contains($url, 'immobilien-deeg')) {
+    fwrite(STDERR, "Sicherung: DATABASE_URL muss auf die DEEG-Datenbank zeigen.\n");
+    exit(1);
+}
+$db = ConnectionFactory::create($url);
+$media = new MediaLibrary($db, str_replace('%kernel.project_dir%', $root, (string) $_SERVER['MEDIA_DIRECTORY']));
+$settings = new SiteSettings($db, $media);
+$pages = new PageRepository($db, new DocumentValidator(), $settings);
+$menus = new MenuRepository($db, $settings);
+
+// Die Seite war im Editor schon angelegt (Starterabschnitt plus Rahmen mit Platzhaltertexten).
+// Sie wird überschrieben, nicht verdoppelt; der bisherige Stand bleibt als Fassung erhalten und
+// lässt sich im Editor unter „Fassungen“ zurückholen.
+$vorhanden = $db->fetchOne('SELECT id FROM page WHERE path = ?', ['angebote']);
+
+$SCHEMA = 24;
+$portal = 'https://portal.immobilienscout24.de/ergebnisliste/16200281';
+$nurUnten = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => $w, 'left' => '0px'];
+
+// Der Kopf wie auf Impressum und Datenschutz: helle Fläche, Kleinzeile, große leichte Überschrift.
+$kopf = ['id' => 'angebote-kopf', 'type' => 'section', 'children' => [
+    ['id' => 'angebote-label', 'type' => 'text', 'props' => ['text' => 'AKTUELLE OBJEKTE'], 'style' => [
+        'desktop' => ['fontSize' => '12px', 'fontWeight' => '700', 'letterSpacing' => '0.14em', 'lineHeight' => 1.6, 'color' => '@anthrazit', 'margin' => ['bottom' => '25px']],
+        'mobile' => ['fontSize' => '11px', 'margin' => ['bottom' => '18px']],
+    ], 'layout' => ['effects' => ['entrance' => 'fade', 'delay' => 'none']]],
+    ['id' => 'angebote-h1', 'type' => 'heading', 'props' => ['text' => 'Unsere Angebote', 'level' => 1], 'style' => [
+        'desktop' => ['fontWeight' => '400', 'fontSize' => '56px', 'lineHeight' => 1.1, 'letterSpacing' => '-0.05em', 'margin' => ['bottom' => '22px']],
+        'tablet' => ['fontSize' => '44px'],
+        'mobile' => ['fontSize' => '38px', 'margin' => ['bottom' => '16px']],
+    ], 'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'short']]],
+    ['id' => 'angebote-vorspann', 'type' => 'text', 'props' => ['text' => 'Wohnungen, Häuser und Grundstücke aus unserem Bestand in Freudenstadt und Umgebung. Die Liste wird laufend aktualisiert – sehen Sie sich um und sprechen Sie uns an.'], 'style' => [
+        'desktop' => ['maxWidth' => '640px', 'fontSize' => '18px', 'lineHeight' => 1.7, 'color' => '@text', 'margin' => ['bottom' => '0px']],
+        'mobile' => ['fontSize' => '16px'],
+    ], 'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'medium']]],
+], 'style' => [
+    'desktop' => ['backgroundColor' => '@hell', 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie-hell', 'padding' => ['top' => '84px', 'bottom' => '72px']],
+    'tablet' => ['padding' => ['top' => '64px', 'bottom' => '56px']],
+    'mobile' => ['padding' => ['top' => '48px', 'bottom' => '40px']],
+]];
+
+// Die Liste selbst. Der Rahmen bleibt hoch genug, dass mehrere Objekte ohne Scrollen im Rahmen
+// sichtbar sind; darunter der Weg zum Portal für alle, die lieber dort suchen.
+$hinweisText = 'Nichts Passendes dabei? <a href="'.$portal.'" target="_blank" rel="noopener">Alle Objekte direkt bei ImmobilienScout24 ansehen ↗</a> oder <a href="/#kontakt">sprechen Sie uns an</a> – wir kennen den Markt vor Ort und wissen oft von Objekten, bevor sie inseriert sind.';
+$liste = ['id' => 'angebote-liste', 'type' => 'section', 'children' => [
+    ['id' => 'angebote-rahmen', 'type' => 'embed', 'props' => [
+        'group' => 'external',
+        'title' => 'Aktuelle Immobilienangebote der Deeg Hausverwaltung und Immobilien GmbH bei ImmobilienScout24',
+        'provider' => 'ImmobilienScout24',
+        'url' => $portal,
+        'hint' => 'Die Angebotsliste wird von ImmobilienScout24 geladen. Dabei erfährt der Anbieter Ihre IP-Adresse und welche Seite Sie ansehen.',
+        'height' => 1000,
+    ], 'style' => ['desktop' => ['margin' => ['bottom' => '26px']]], 'layout' => ['effects' => ['entrance' => 'fade', 'delay' => 'none']],
+        // Der Rahmen selbst und der Platzhalter davor tragen den Zuschnitt der Vorlage: eckig,
+        // helle Fläche, Logo-Blau auf dem Knopf. Was IM Rahmen steht, gehört ImmobilienScout24 -
+        // daran kommt kein CSS dieser Website heran, und das ist keine Einstellung, sondern die
+        // Trennung zwischen zwei Herkünften im Browser.
+        'css' => "& iframe{border:1px solid #dbe1e3;border-radius:0;background:#f5fafd}
+&.embed-blocked{border:1px solid #dbe1e3;border-radius:0;background:#f5fafd;padding:56px 24px;text-align:left}
+& .embed-title{font-size:20px;font-weight:700;color:#343a40;margin-bottom:12px}
+& .embed-hint{max-width:640px;font-size:15px;line-height:1.7;color:#58666d}
+& .embed-provider{font-size:13px;color:#66747b}
+& .consent-button{border-radius:0;background:#0076b6;border-color:#0076b6;color:#fff;flex:0 0 auto;padding:16px 24px}
+& .consent-button:hover{background:#006aa3;border-color:#006aa3}",
+    ],
+    ['id' => 'angebote-hinweis', 'type' => 'text', 'props' => ['text' => $hinweisText], 'style' => [
+        'desktop' => ['maxWidth' => '760px', 'fontSize' => '16px', 'lineHeight' => 1.7, 'color' => '@text', 'margin' => ['bottom' => '0px']],
+    ], 'css' => "& a{color:#006aa3;text-decoration:underline;text-underline-offset:3px}\n& a:hover{color:#343a40}",
+        'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'short']]],
+], 'style' => [
+    'desktop' => ['padding' => ['top' => '72px', 'bottom' => '108px']],
+    'tablet' => ['padding' => ['top' => '56px', 'bottom' => '80px']],
+    'mobile' => ['padding' => ['top' => '40px', 'bottom' => '65px']],
+]];
+
+$dokumentAngebote = [
+    'schemaVersion' => $SCHEMA,
+    'title' => 'Angebote',
+    'description' => 'Aktuelle Wohnungen, Häuser und Grundstücke der Deeg Hausverwaltung und Immobilien GmbH in Freudenstadt und Umgebung.',
+    'blocks' => [$kopf, $liste],
+];
+if (false !== $vorhanden) {
+    $id = (string) $vorhanden;
+    $revision = $pages->saveDraft($id, $dokumentAngebote, (int) $pages->findForEditor($id)['version']);
+    $pages->publish($id, $revision, (int) $pages->findForEditor($id)['version']);
+    echo "Seite überarbeitet und veröffentlicht: /angebote\n";
+} else {
+    $id = $pages->createPage('angebote', null, 'page', $dokumentAngebote);
+    $seite = $db->fetchAssociative('SELECT draft_revision_id, version FROM page WHERE id = ?', [$id]);
+    $pages->publish($id, $seite['draft_revision_id'], (int) $seite['version']);
+    echo "Seite angelegt und veröffentlicht: /angebote\n";
+}
+$db->executeStatement('UPDATE page SET seo_title = ? WHERE id = ?', ['Aktuelle Angebote | Deeg Hausverwaltung und Immobilien GmbH', $id]);
+
+// „Immobilien“ in der Navigation zeigte auf den Sprungpunkt der Startseite; jetzt gibt es die
+// Seite, auf die dieser Abschnitt ohnehin nur verwiesen hat.
+$header = $menus->all()['header'];
+$eintraege = [];
+foreach ($header['items'] as $eintrag) {
+    if ('Immobilien' === $eintrag['label']) {
+        $eintrag['pageId'] = $id;
+        $eintrag['anchor'] = '';
+    }
+    $eintraege[] = $eintrag;
+}
+$menus->save('header', $header['name'], $eintraege, (int) $header['version']);
+echo "Navigation: „Immobilien“ zeigt auf /angebote\n";
+
+// Und der Knopf im Angebote-Band der Startseite, der bisher auf die alte Website führte.
+$home = $db->fetchAssociative('SELECT id FROM page WHERE path = ?', ['home']);
+$dokument = $pages->findForEditor($home['id'])['document'];
+$getroffen = 0;
+$walk = function (array &$blocks) use (&$walk, &$getroffen): void {
+    foreach ($blocks as &$block) {
+        // Der Knopf im Angebote-Band ist ein Textbaustein mit eigenem CSS, kein Button-Baustein -
+        // deshalb wird die Adresse im Text ersetzt, nicht in den Eigenschaften.
+        foreach (['href', 'text'] as $feld) {
+            $wert = (string) ($block['props'][$feld] ?? '');
+            if ('' !== $wert && str_contains($wert, 'immobiliendeeg.de/immobilien')) {
+                $block['props'][$feld] = str_replace(['https://www.immobiliendeeg.de/immobilien/', 'https://www.immobiliendeeg.de/immobilien'], '/angebote', $wert);
+                unset($block['props']['newTab']);
+                ++$getroffen;
+            }
+        }
+        if (isset($block['children']) && is_array($block['children'])) {
+            $walk($block['children']);
+        }
+    }
+};
+$walk($dokument['blocks']);
+if ($getroffen > 0) {
+    $stand = $pages->findForEditor($home['id']);
+    $revision = $pages->saveDraft($home['id'], $dokument, $stand['version']);
+    $pages->publish($home['id'], $revision, $pages->findForEditor($home['id'])['version']);
+}
+echo "Startseite: $getroffen Knopf/Knöpfe zeigen jetzt auf /angebote\n";
+
+// Ein fremder Rahmen ohne Einwilligung lädt beim Seitenaufruf mit und gibt dabei IP-Adresse und
+// Seite an den Anbieter weiter. Mit der Gruppe „Externe Inhalte“ steht davor der Platzhalter, und
+// erst der Knopf lädt die Liste. Der Balken trägt die Farben der Website.
+$aktuell = $settings->load();
+$settings->save([
+    ...$aktuell,
+    // Gespeichert als Liste, erwartet als Textfeld - wie es der Einstellungsbildschirm schickt.
+    'sameAs' => implode("\n", $aktuell['sameAs']),
+    'consentBanner' => true,
+    'consentGroups' => ['external'],
+    'consentShape' => 'eckig',
+    'consentAccent' => '@blau-tief',
+    'consentAccentInk' => '@papier',
+    'consentColor' => '@papier',
+    'consentInk' => '@anthrazit',
+]);
+echo "Einwilligung eingeschaltet: Gruppe „Externe Inhalte“, Balken eckig in Logo-Blau\n";

scripts/admin-quality-check.mjs

@@ -0,0 +1,234 @@
+import { chromium } from 'playwright';
+import AxeBuilder from '@axe-core/playwright';
+import assert from 'node:assert/strict';
+import { execFileSync, spawn } from 'node:child_process';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { randomBytes } from 'node:crypto';
+import net from 'node:net';
+
+const php = process.env.PHP_BINARY || 'php';
+const fixture = JSON.parse(execFileSync(php, ['tests/pilot-fixture.php'], { encoding: 'utf8' }));
+execFileSync(php, ['bin/console', 'cache:clear', '--env=prod', '--no-debug'], { stdio: 'ignore', windowsHide: true, env: { ...process.env, DATABASE_URL: fixture.databaseUrl, MEDIA_DIRECTORY: fixture.mediaDirectory } });
+const probe = net.createServer(); await new Promise(resolve => probe.listen(0, '127.0.0.1', resolve));
+const port = probe.address().port; await new Promise(resolve => probe.close(resolve));
+const origin = `http://127.0.0.1:${port}`;
+const server = spawn(php, ['-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`, '-t', 'public', 'bin/dev-router.php'], {
+  windowsHide: true, stdio: 'ignore', env: { ...process.env, APP_ENV: 'prod', APP_DEBUG: '0', APP_SECRET: randomBytes(32).toString('hex'), DATABASE_URL: fixture.databaseUrl, MEDIA_DIRECTORY: fixture.mediaDirectory, SITE_ORIGIN: origin },
+});
+await mkdir('reports/admin-quality', { recursive: true });
+let browser, page;
+const checks = [];
+try {
+  for (let i = 0; i < 60; i++) {
+    try { if ((await fetch(origin)).ok) break; } catch {}
+    if (i === 59) throw new Error('Pilot test server did not start');
+    await new Promise(resolve => setTimeout(resolve, 200));
+  }
+  browser = await chromium.launch(); const context = await browser.newContext({ viewport: { width: 1440, height: 1000 }, reducedMotion: 'no-preference' }); page = await context.newPage();
+  page.setDefaultTimeout(15000);
+  const errors = []; page.on('pageerror', error => errors.push(error.message));
+  page.on('dialog', dialog => dialog.accept());
+  if (process.argv.includes('--visual-only')) {
+    await page.goto(origin);
+    await page.evaluate(async () => {
+      const images = [...document.images]; images.forEach(image => { image.loading = 'eager'; });
+      await Promise.all(images.map(image => image.decode().catch(() => {}))); await document.fonts.ready;
+    });
+    await page.screenshot({ path: 'reports/admin-quality/pilot-home.png', fullPage: true, animations: 'disabled' });
+    const plain = await browser.newContext({ javaScriptEnabled: false, viewport: { width: 1440, height: 1000 } });
+    const noScript = await plain.newPage(); await noScript.goto(origin);
+    assert.equal(await noScript.locator('h1').isVisible(), true);
+    assert.equal(await noScript.locator('#hero-slider .slider-slide').count(), 4);
+    assert.ok(await noScript.locator('main').innerText().then(text => text.includes('Dienstleistungen') || text.includes('Full-Service')));
+    await noScript.screenshot({ path: 'reports/admin-quality/pilot-without-javascript.png', fullPage: true });
+    await plain.close();
+    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'); await page.goto(origin + '/admin/forms');
+    await page.setViewportSize({ width: 390, height: 844 });
+    await page.locator('.field-card').first().screenshot({ path: 'reports/admin-quality/form-field-mobile.png' });
+    console.log('Public no-JavaScript baseline and visual captures passed.');
+  } else {
+  if (!process.argv.includes('--admin-only')) {
+  await page.goto(origin); await page.mouse.move(1, 1);
+  const slider = page.locator('#hero-slider');
+  const geometry = () => slider.evaluate(el => ({ left: el.scrollLeft, width: el.clientWidth, total: el.scrollWidth, slides: el.children.length, columns: getComputedStyle(el).gridAutoColumns }));
+  const before = await geometry(); await page.waitForTimeout(8000); const after = await geometry();
+  console.log('Pilot slider:', JSON.stringify({ before, after }));
+  if (process.argv.includes('--probe')) {
+    console.log('Motion:', await page.locator('[class*="fx-entrance-"]').evaluateAll(nodes => nodes.map(el => ({ id: el.id, name: getComputedStyle(el).animationName, duration: getComputedStyle(el).animationDuration, timeline: getComputedStyle(el).animationTimeline }))));
+  } else {
+    assert.ok(after.left > before.left + 20, 'the real pilot slider advances');
+  }
+  await page.waitForTimeout(7100); const second = await geometry();
+  console.log('Second slider:', JSON.stringify(second), await slider.locator('xpath=following-sibling::*[1]').innerText());
+  assert.ok(second.left > after.left + 20, 'autoplay advances more than once');
+  const controls = slider.locator('xpath=following-sibling::*[1]');
+  await controls.getByRole('button', { name: 'Vorherige Folie', exact: true }).click();
+  await page.waitForTimeout(700); const manual = await geometry();
+  console.log('Manual slider:', JSON.stringify(manual), await controls.innerText());
+  assert.ok(manual.left < second.left - 20);
+  await page.mouse.move(1, 1); await page.waitForTimeout(7200);
+  console.log('Paused slider:', JSON.stringify(await geometry()), await controls.innerText());
+  assert.ok(Math.abs((await geometry()).left - manual.left) < 2, 'manual navigation pauses autoplay');
+  await controls.getByRole('button', { name: 'Wiedergabe: automatisch weiterblättern' }).click();
+  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);
+  const reduced = await geometry(); await page.waitForTimeout(7100);
+  assert.ok(Math.abs((await geometry()).left - reduced.left) < 2, 'reduced motion stops autoplay');
+  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' });
+  checks.push({ name: 'pilot slider: repeated autoplay, manual pause, resume, reduced motion', passed: true });
+  await page.screenshot({ path: 'reports/admin-quality/pilot-home.png', fullPage: true });
+  }
+  if (process.argv.includes('--audit')) {
+    execFileSync(process.execPath, ['scripts/audit.mjs'], { stdio: 'inherit', windowsHide: true, env: { ...process.env, CMS_URL: origin, CMS_AUDIT_DIR: 'reports/admin-quality/lighthouse' } });
+  }
+  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');
+  for (const [name, path] of [['pages', '/admin'], ['posts', '/admin/posts'], ['menus', '/admin/menus'], ['forms', '/admin/forms'], ['areas', '/admin/partials']]) {
+    const response = await page.goto(origin + path); assert.equal(response.status(), 200, path);
+    await page.screenshot({ path: `reports/admin-quality/${name}.png`, fullPage: true });
+    const results = await new AxeBuilder({ page }).analyze(); assert.deepEqual(results.violations.map(v => ({ id: v.id, nodes: v.nodes.map(n => n.target) })), [], name);
+    checks.push({ name, passed: true });
+  }
+  await page.goto(origin + '/admin/posts');
+  const rowLinks = () => page.locator('.rows article h3 a');
+  assert.equal(await rowLinks().count(), 20);
+  const firstIds = await rowLinks().evaluateAll(links => links.map(link => link.href));
+  await page.getByRole('navigation', { name: 'Ergebnisseiten oben', exact: true }).getByRole('link', { name: 'Weiter' }).click();
+  await page.waitForFunction(() => document.querySelectorAll('.rows article h3 a').length === 9);
+  assert.equal(await rowLinks().count(), 9);
+  assert.equal(new URL(page.url()).searchParams.get('seite'), '2');
+  assert.equal((await rowLinks().evaluateAll(links => links.map(link => link.href))).some(id => firstIds.includes(id)), false);
+  await page.getByLabel('Pro Seite', { exact: true }).selectOption('50');
+  await page.waitForFunction(() => document.querySelectorAll('.rows article h3 a').length === 29);
+  assert.equal(await rowLinks().count(), 29);
+  await page.getByLabel('Beiträge durchsuchen').fill('nichtvorhandener-qa-suchbegriff');
+  await page.waitForFunction(() => document.querySelectorAll('.rows article h3 a').length === 0);
+  assert.equal(await rowLinks().count(), 0);
+  await page.goto(origin + '/admin/posts?seite=999'); assert.equal(await rowLinks().count(), 9);
+  await page.goto(origin + '/admin'); assert.equal(await rowLinks().count(), 4);
+  checks.push({ name: 'separate pages/posts, bounded pages, no overlap, size/search/clamping', passed: true });
+
+  await page.goto(origin + '/admin/menus');
+  const entries = page.locator('#menu-items > li'); const initialCount = await entries.count();
+  const search = page.getByRole('combobox', { name: 'Inhalte suchen' });
+  await search.fill('Impressum');
+  await page.getByRole('option').filter({ hasText: 'Impressum' }).first().waitFor();
+  await search.press('ArrowDown'); await search.press('Enter');
+  await page.getByRole('button', { name: 'Zum Menü hinzufügen', exact: true }).click();
+  assert.equal(await entries.count(), initialCount + 1);
+  await entries.last().getByRole('button', { name: 'Als Unterpunkt', exact: true }).click();
+  assert.equal(await entries.last().getAttribute('data-level'), '2');
+  await entries.last().getByRole('button', { name: 'Entfernen', exact: true }).click();
+  assert.equal(await entries.count(), initialCount);
+  await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
+  assert.equal(await entries.count(), initialCount + 1);
+  assert.equal(await entries.last().getAttribute('data-level'), '2');
+  const menuSave = () => Promise.all([
+    page.waitForResponse(response => response.url().includes('/menus/header') && response.request().method() === 'POST'),
+    page.getByRole('button', { name: 'Menü speichern', exact: true }).click(),
+  ]).then(([response]) => response);
+  assert.equal((await menuSave()).status(), 200);
+  await page.reload(); assert.equal(await entries.count(), initialCount + 1);
+  assert.equal(await entries.last().getAttribute('data-level'), '2');
+  await page.getByText('Eigener Link', { exact: true }).filter({ has: page.locator('xpath=self::summary') }).click();
+  await page.locator('#link-label').fill('QA Kontakt'); await page.locator('#link-url').fill('javascript:alert(1)');
+  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 entries.last().locator('summary').click();
+  await entries.last().getByLabel('Adresse', { exact: true }).fill('/#kontakt');
+  assert.equal((await menuSave()).status(), 200);
+  const externalSave = await page.locator('#menu-editor').evaluate(async form => {
+    const response = await fetch(form.action, { method: 'POST', body: new FormData(form), headers: { Accept: 'application/json' } });
+    return response.status;
+  });
+  assert.equal(externalSave, 200);
+  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);
+  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');
+  const form = page.locator('.form-def').first(), message = form.locator('[name="success"]');
+  const widths = await form.evaluate(form => ({ message: form.querySelector('[name="success"]').clientWidth, fields: form.querySelector('.fields').clientWidth }));
+  assert.ok(widths.message >= widths.fields - 5, 'success message uses available form width');
+  await message.fill('Vielen Dank für deine Nachricht.\nWir melden uns persönlich bei dir.');
+  await form.getByRole('button', { name: 'Formular speichern', exact: true }).click();
+  assert.equal(await message.inputValue(), 'Vielen Dank für deine Nachricht.\nWir melden uns persönlich bei dir.');
+  checks.push({ name: 'wide multiline form response persists', passed: true });
+
+  await page.goto(origin + '/admin/partials');
+  await page.getByText('Neuen Bereich anlegen', { exact: true }).click();
+  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();
+  await page.locator('#structure .tree-item').first().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');
+  await page.frameLocator('#preview').getByText('Dieser Inhalt wird als gemeinsame Sektion gespeichert.', { exact: true }).waitFor();
+  await page.locator('#save').click(); await page.locator('#save-status').filter({ hasText: 'Bereich gespeichert' }).waitFor();
+  await page.reload();
+  await page.frameLocator('#preview').getByText('Dieser Inhalt wird als gemeinsame Sektion gespeichert.', { exact: true }).waitFor();
+  await page.goto(origin + '/admin/partials');
+  const areaLinks = await rowLinks().evaluateAll(links => links.map(link => link.href));
+  for (const url of areaLinks) {
+    assert.equal((await page.goto(url)).status(), 200);
+    await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+    await page.locator('#select-page').click();
+    const title = page.getByLabel('Seitentitel', { exact: true });
+    await title.fill((await title.inputValue()) + ' QA'); await title.press('Tab');
+    await page.locator('#save').click(); await page.locator('#save-status').filter({ hasText: 'Bereich gespeichert' }).waitFor();
+    await page.reload(); await page.locator('#select-page').click();
+    await page.waitForFunction(() => document.querySelector('#save-status')?.textContent !== 'Wird geladen …');
+    assert.match(await title.inputValue(), / QA$/);
+  }
+  checks.push({ name: 'real pilot areas open, edit, preview, save and reload', passed: true });
+
+  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();
+  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.
+  const nextPreview = preview.getByRole('button', { name: 'Nächste Folie', exact: true });
+  await nextPreview.waitFor(); await page.waitForTimeout(1500);
+  const previewBox = await nextPreview.boundingBox(); await page.waitForTimeout(150);
+  const settledBox = await nextPreview.boundingBox();
+  assert.ok(Math.abs(settledBox.y - previewBox.y) < 1 && settledBox.width > 0, 'preview control has stable visible geometry');
+  await page.mouse.click(settledBox.x + settledBox.width / 2, settledBox.y + settledBox.height / 2);
+  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();
+  assert.equal(await preview.locator('.slider-controls').count(), 0);
+  checks.push({ name: 'sandboxed editor preview has opt-in working slider controls', passed: true });
+
+  for (const width of [1024, 390]) {
+    await page.setViewportSize({ width, height: 844 });
+    for (const route of ['/admin/posts', '/admin/menus', '/admin/forms']) {
+      await page.goto(origin + route);
+      assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true, `${route} fits ${width}`);
+      const results = await new AxeBuilder({ page }).analyze(); assert.deepEqual(results.violations.map(v => ({ id: v.id, nodes: v.nodes.map(n => n.target) })), [], `${route} ${width}`);
+      await page.screenshot({ path: `reports/admin-quality/${route.split('/').pop()}-${width}.png` });
+    }
+  }
+  checks.push({ name: 'tablet/mobile layouts fit and pass axe', passed: true });
+  assert.deepEqual(errors, []);
+  await writeFile('reports/admin-quality/result.json', JSON.stringify({ checks }, null, 2));
+  console.log('Pilot and administration checks passed.');
+  }
+} catch (error) {
+  if (page) await page.screenshot({ path: 'reports/admin-quality/failure.png', fullPage: true }).catch(() => {});
+  throw error;
+} finally { await browser?.close(); server.kill(); }

scripts/archive-update-check.mjs

@@ -0,0 +1,97 @@
+// Exercise the real HTTP update across two complete release archives in an isolated installation.
+// Usage: PHP_BINARY=php node scripts/archive-update-check.mjs old.zip new.zip [expected-status]
+// UPDATE_SOURCE_VERSION changes only the disposable source VERSION to test a future upgrade
+// from the fixed updater before a subsequent release exists.
+import assert from 'node:assert/strict';
+import { chromium } from 'playwright';
+import { execFileSync, spawn } from 'node:child_process';
+import { mkdir, readFile, writeFile, readdir, access } from 'node:fs/promises';
+import { createHash, randomBytes } from 'node:crypto';
+import path from 'node:path';
+import net from 'node:net';
+
+const php = process.env.PHP_BINARY || 'php';
+const [source, target, expected = '302'] = process.argv.slice(2);
+assert.ok(source && target, 'Supply the installed and target release ZIP paths.');
+const root = process.cwd().replaceAll('\\', '/');
+const run = `${root}/var/archive-check-${randomBytes(5).toString('hex')}`;
+await mkdir(run, { recursive: true });
+const originalHash = createHash('sha256').update(await readFile('var/kantit.db')).digest('hex');
+execFileSync(php, ['-r', '$z=new ZipArchive(); if(true!==$z->open($argv[1])||!$z->extractTo($argv[2]))exit(1); $z->close();', path.resolve(source), run], { windowsHide: true });
+const [directory] = (await readdir(run)).filter(name => /^kantsites-/.test(name));
+assert.ok(directory);
+const installation = `${run}/${directory}`;
+const targetVersion = execFileSync(php, ['-r', '$z=new ZipArchive(); $z->open($argv[1]); for($i=0;$i<$z->numFiles;$i++){if(preg_match("#^kantsites-[^/]+/VERSION$#",$z->getNameIndex($i)))echo trim($z->getFromIndex($i));}', path.resolve(target)], { encoding: 'utf8', windowsHide: true }).trim();
+assert.match(targetVersion, /^\d+\.\d+\.\d+$/);
+if (process.env.UPDATE_SOURCE_VERSION) await writeFile(`${installation}/VERSION`, `${process.env.UPDATE_SOURCE_VERSION}\n`);
+const fixture = JSON.parse(execFileSync(php, ['tests/pilot-fixture.php'], { encoding: 'utf8', windowsHide: true }));
+await mkdir(`${installation}/var/media`, { recursive: true });
+// Only the download transport is replaced; the real archive, checksum, backup, file swap,
+// production kernel, session, redirects, migration and subsequent requests remain in use.
+await writeFile(`${run}/download.php`, `<?php
+class ArchiveCheckDownload extends App\\Ops\\Download {
+    public function get(string $url): ?string {
+        if(str_ends_with($url, '/releases/latest')) return json_encode(['tag_name'=>'v'.getenv('QA_TARGET_VERSION')]);
+        if(str_ends_with($url, '.zip.sha256')) return hash_file('sha256', getenv('QA_TARGET_ZIP'));
+        if(str_ends_with($url, '.zip')) return file_get_contents(getenv('QA_TARGET_ZIP'));
+        return null;
+    }
+}
+`);
+await writeFile(`${installation}/config/services.yaml`, (await readFile(`${installation}/config/services.yaml`, 'utf8')) + '\n    App\\Ops\\Download:\n        class: ArchiveCheckDownload\n');
+// Keep the test router outside the replaced bin/ directory (Windows locks the active script).
+await writeFile(`${run}/router.php`, `<?php
+$root = ${JSON.stringify(installation)};
+$uri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
+if ($uri !== '/' && !str_contains($uri, '..') && is_file($root.'/public'.$uri)) return false;
+require_once $root.'/vendor/autoload.php';
+require_once ${JSON.stringify(`${run}/download.php`)};
+require $root.'/public/index.php';
+`);
+const probe = net.createServer(); await new Promise(resolve => probe.listen(0, '127.0.0.1', resolve));
+const port = probe.address().port; await new Promise(resolve => probe.close(resolve));
+const origin = `http://127.0.0.1:${port}`;
+const env = { ...process.env, APP_ENV: 'prod', APP_DEBUG: '0', APP_SECRET: randomBytes(32).toString('hex'), DATABASE_URL: fixture.databaseUrl, MEDIA_DIRECTORY: `${installation}/var/media`, SITE_ORIGIN: origin, QA_TARGET_ZIP: path.resolve(target), QA_TARGET_VERSION: targetVersion };
+const server = spawn(php, ['-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`, '-t', 'public', `${run}/router.php`], { cwd: installation, env, windowsHide: true, stdio: ['ignore', 'pipe', 'pipe'] });
+let log = '', browser;
+server.stdout.on('data', data => log += data); server.stderr.on('data', data => log += data);
+const result = { source: path.resolve(source), target: path.resolve(target), simulatedSourceVersion: process.env.UPDATE_SOURCE_VERSION ?? null };
+try {
+  let ready = false;
+  for (let attempt = 0; attempt < 60; attempt++) {
+    try { if ((await fetch(origin + '/admin/login')).ok) { ready = true; break; } } catch {}
+    await new Promise(resolve => setTimeout(resolve, 200));
+  }
+  assert.ok(ready, 'Isolated release must boot before testing an update.');
+  browser = await chromium.launch(); const page = await browser.newPage();
+  await page.goto(origin + '/admin/login');
+  await page.getByLabel('Benutzername').fill(fixture.username); await page.getByLabel('Passwort', { exact: true }).fill(fixture.password);
+  await page.locator('button[type=submit]').click();
+  assert.equal((await page.goto(origin + '/admin/system')).status(), 200);
+  const token = await page.locator('form[action="/admin/system/archiv"] [name="_csrf_token"]').first().inputValue();
+  const response = await page.request.post(origin + '/admin/system/archiv', { form: { _csrf_token: token, target: targetVersion }, maxRedirects: 0 });
+  result.updateStatus = response.status(); assert.equal(response.status(), Number(expected));
+  if (response.status() === 302) assert.equal(response.headers().location, '/admin/system');
+  assert.equal((await readFile(`${installation}/VERSION`, 'utf8')).trim(), targetVersion);
+  const updateLog = await readFile(`${installation}/var/updates.log`, 'utf8');
+  assert.ok(updateLog.includes('Dateien sind ersetzt')); assert.ok(!updateLog.includes('FEHLER'));
+  assert.equal((await page.request.get(origin)).status(), 503, 'Maintenance stays active until migrations finish.');
+  result.systemStatus = (await page.goto(origin + '/admin/system')).status(); assert.equal(result.systemStatus, 200);
+  const finish = page.locator('form').filter({ has: page.locator('input[name=finish]') });
+  assert.equal(await finish.count(), 1, 'The migration step remains accessible with the same session.');
+  const csrf = await finish.locator('[name="_csrf_token"]').inputValue();
+  const finished = await page.request.post(origin + '/admin/system/archiv', { form: { _csrf_token: csrf, finish: '1' }, maxRedirects: 0 });
+  result.finishStatus = finished.status(); assert.equal(finished.status(), 302);
+  result.publicStatus = (await page.request.get(origin)).status(); assert.equal(result.publicStatus, 200);
+  assert.equal((await page.goto(origin + '/admin/system')).status(), 200);
+  assert.equal(await page.locator('input[name=finish]').count(), 0);
+  assert.equal((await readdir(`${installation}/var/backups`)).filter(name => name.startsWith('sicherung-')).length, 1);
+  await access(`${installation}/.env`);
+  assert.equal(createHash('sha256').update(await readFile('var/kantit.db')).digest('hex'), originalHash);
+  if (Number(expected) === 302) assert.doesNotMatch(log, /\[critical\]|Failed to open stream|PHP Fatal error/);
+  result.ok = true;
+} finally {
+  await browser?.close(); server.kill();
+  await writeFile(`${run}/server.log`, log); await writeFile(`${run}/result.json`, JSON.stringify(result, null, 2));
+  console.log(JSON.stringify({ ...result, report: run }, null, 2));
+}

scripts/audit.mjs

@@ -5,6 +5,9 @@ import { mkdir, writeFile } from 'node:fs/promises';
 import net from 'node:net';
 
 const origin = process.env.CMS_URL || 'http://127.0.0.1:8080';
+// Eine Startseite ist nicht die Website. Geprüft wird, was CMS_PATHS nennt - mehrere Adressen mit
+// Komma getrennt; ohne Angabe die Startseite.
+const paths = (process.env.CMS_PATHS || '/').split(',').map(p => p.trim()).filter(Boolean);
 const output = process.env.CMS_AUDIT_DIR || 'reports/lighthouse';
 const preflight = await fetch(origin);
 if (!preflight.ok || /noindex/i.test(preflight.headers.get('x-robots-tag') || '')) {
@@ -18,10 +21,12 @@ await new Promise(resolve => portProbe.close(resolve));
 const chrome = await chromium.launch({ args: [`--remote-debugging-port=${port}`] });
 const summary = [];
 try {
+  for (const path of paths) {
+  const label = '/' === path ? 'home' : path.replace(/^\//, '').replace(/\//g, '-');
   for (const profile of ['mobile', 'desktop']) {
     const runs = [];
     for (let run = 1; run <= 3; run++) {
-      const result = await lighthouse(origin, {
+      const result = await lighthouse(origin + ('/' === path ? '' : path), {
         port,
         output: 'json',
         logLevel: 'error',
@@ -30,18 +35,22 @@ try {
       if (lhr.configSettings.formFactor !== profile) {
         throw new Error(`Requested ${profile}, measured ${lhr.configSettings.formFactor}`);
       }
-      await writeFile(`${output}/${profile}-${run}.json`, result.report);
+      await writeFile(`${output}/${label}-${profile}-${run}.json`, result.report);
       runs.push(lhr);
-      console.log(profile, run, Object.fromEntries(Object.entries(lhr.categories).map(([key, value]) => [key, value.score])));
+      console.log(label, profile, run, Object.fromEntries(Object.entries(lhr.categories).map(([key, value]) => [key, value.score])));
     }
     const scores = {};
     for (const category of Object.keys(runs[0].categories)) {
       const values = runs.map(r => r.categories[category].score).filter(v => v !== null).sort((a, b) => a - b);
       scores[category] = values.length ? values[Math.floor(values.length / 2)] : null;
     }
-    summary.push({ profile, scores, lighthouseVersion: runs[0].lighthouseVersion, settings: runs[0].configSettings, environment: runs[0].environment, note: 'Local prototype only. No customer-site acceptance or field-data claim.' });
+    summary.push({ path, profile, scores, lighthouseVersion: runs[0].lighthouseVersion, settings: runs[0].configSettings, environment: runs[0].environment, note: 'Local prototype only. No customer-site acceptance or field-data claim.' });
+  }
   }
   await writeFile(`${output}/summary.json`, JSON.stringify(summary, null, 2));
+  for (const row of summary) {
+    console.log(`${row.path} ${row.profile}: ${Object.entries(row.scores).map(([k, v]) => k + ' ' + Math.round(v * 100)).join(', ')}`);
+  }
   const passed = summary.every(r => r.scores.performance >= .95 && ['accessibility', 'best-practices', 'seo'].every(c => r.scores[c] === 1) && (r.scores['agentic-browsing'] === undefined || r.scores['agentic-browsing'] === 1));
   if (!passed) process.exitCode = 1;
 } finally {

scripts/browser-check.mjs

@@ -14,24 +14,114 @@ try {
   // itself. Without bin/dev-router.php they never reach the front controller - exactly the gap
   // that let them stay broken locally while every kernel test passed.
   const context = await browser.newContext();
-  for (const [path, type] of [['/sitemap.xml', 'application/xml'], ['/robots.txt', 'text/plain'], ['/feed.xml', 'application/xml']]) {
+  const sitemap = await context.request.get(origin + '/sitemap.xml');
+  assert.equal(sitemap.status(), 200, '/sitemap.xml');
+  assert.match(sitemap.headers()['content-type'] ?? '', /application\/xml/, '/sitemap.xml');
+  // Eine Website ohne Beiträge kennt weder Archiv noch Feed: dann ist 404 die richtige Antwort,
+  // und die Sitemap führt die Adresse gar nicht erst auf.
+  const sitemapText = await sitemap.text();
+  const hasPosts = sitemapText.includes('/beitraege');
+  for (const [path, type] of [['/robots.txt', 'text/plain'], ['/feed.xml', 'application/xml']]) {
     const response = await context.request.get(origin + path);
-    assert.equal(response.status(), 200, path);
-    assert.match(response.headers()['content-type'] ?? '', new RegExp(type), path);
+    const expected = '/feed.xml' === path && !hasPosts ? 404 : 200;
+    assert.equal(response.status(), expected, path);
+    // Auch die 404 muss aus der Anwendung kommen - der eingebaute PHP-Server beantwortet Dateien
+    // mit Endung sonst selbst, und genau das soll dieser Test aufdecken.
+    assert.ok('x-kant-queries' in response.headers(), `${path}: nicht von der Anwendung beantwortet`);
+    if (200 === expected) assert.match(response.headers()['content-type'] ?? '', new RegExp(type), path);
+  }
+  results.push({ name: 'machine readable routes reachable', paths: 3, hasPosts });
+
+  // Die Schutzkopfzeilen einer öffentlichen Seite. Sie fehlen lautlos, wenn jemand eine Antwort
+  // an der Stelle vorbeibaut, die sie setzt - deshalb werden sie gemessen und nicht angenommen.
+  {
+    const seite = await context.request.get(origin + '/');
+    const kopf = seite.headers();
+    const csp = kopf['content-security-policy'] ?? '';
+    assert.match(csp, /default-src 'self'/, 'Content-Security-Policy fehlt');
+    assert.match(csp, /object-src 'none'/, 'Plugins müssen verboten bleiben');
+    assert.match(csp, /frame-ancestors 'none'/, 'Die Seite darf nicht in einen fremden Rahmen');
+    assert.match(csp, /base-uri 'none'/, 'Ein eingeschleustes <base> würde jeden Verweis umlenken');
+    assert.equal(kopf['x-content-type-options'], 'nosniff');
+    assert.match(kopf['referrer-policy'] ?? '', /strict-origin/);
+    assert.match(kopf['permissions-policy'] ?? '', /camera=\(\)/);
+    // Und was nicht dastehen darf: die Serverkennung verrät, wonach ein Angreifer suchen kann.
+    assert.ok(!('x-powered-by' in kopf) || !/php/i.test(kopf['x-powered-by']), 'X-Powered-By nennt die PHP-Fassung');
+    results.push({ name: 'security headers', csp: csp.length });
   }
-  results.push({ name: 'machine readable routes reachable', paths: 3 });
   await context.close();
 
+  // A load budget, measured rather than assumed: what a page actually transfers, and how many
+  // database queries it needed. Both are ceilings - a page that starts asking once per section
+  // or shipping a megabyte of CSS fails here instead of only getting slower.
+  {
+    const budget = await browser.newContext({ viewport: { width: 1440, height: 1000 } });
+    const page = await budget.newPage();
+    const transferred = new Map();
+    page.on('response', async response => {
+      const type = (response.headers()['content-type'] ?? '').split(';')[0];
+      const length = Number(response.headers()['content-length'] ?? 0);
+      transferred.set(response.url(), { type, length });
+    });
+    for (const path of hasPosts ? ['/', '/beitraege'] : ['/']) {
+      transferred.clear();
+      const response = await page.goto(origin + path, { waitUntil: 'networkidle' });
+      const queries = Number(response.headers()['x-kant-queries'] ?? -1);
+      const html = (await response.text()).length;
+      const styles = [...transferred.values()].filter(entry => entry.type === 'text/css').reduce((sum, entry) => sum + entry.length, 0);
+      const scripts = [...transferred.values()].filter(entry => entry.type.includes('javascript')).length;
+      const requests = transferred.size;
+      // Bilder gehören zum Inhalt: eine bebilderte Startseite lädt zu Recht mehr Dateien als eine
+      // Textseite. Gedeckelt wird deshalb das Beiwerk (Stile, Schriften, Skripte) und das
+      // übertragene Gewicht - nicht die Zahl der Bilder.
+      const beiwerk = [...transferred.values()].filter(entry => !entry.type.startsWith('image/')).length;
+      const gewicht = [...transferred.values()].reduce((sum, entry) => sum + entry.length, 0);
+
+      assert.ok(html < 150000, `${path}: HTML ${html} Bytes, Obergrenze 150000`);
+      assert.ok(styles < 120000, `${path}: CSS ${styles} Bytes, Obergrenze 120000`);
+      // Eine öffentliche Seite lädt kein Skript, solange sie keines braucht - und das steht in
+      // ihrem eigenen Kopf: nur wenn die Seite Skripte erlaubt (Reiter, Slider, Einblendungen,
+      // Formular mit Schritten, eigener Code), darf überhaupt eines kommen. Jede Fähigkeit
+      // bringt genau eine kleine Datei mit; drei davon sind die Grenze, und alle vom eigenen Ursprung.
+      const erlaubt = !/script-src 'none'/.test(response.headers()['content-security-policy'] ?? '');
+      assert.ok(erlaubt ? scripts <= 3 : 0 === scripts, `${path}: ${scripts} Skript(e) geladen, erlaubt ${erlaubt ? 3 : 0}`);
+      const fremd = [...transferred.keys()].filter(url => (transferred.get(url).type.includes('javascript')) && !url.startsWith(origin + '/assets/'));
+      assert.deepEqual(fremd, [], `${path}: Skript von außerhalb /assets/`);
+      assert.ok(beiwerk <= 12, `${path}: ${beiwerk} Anfragen ohne Bilder, Obergrenze 12`);
+      assert.ok(gewicht < 1500000, `${path}: ${gewicht} Bytes übertragen, Obergrenze 1500000`);
+      if (queries >= 0) assert.ok(queries <= 20, `${path}: ${queries} Datenbankabfragen, Obergrenze 20`);
+      results.push({ name: `load budget ${path}`, html, styles, requests, beiwerk, gewicht, queries });
+      console.log(`Budget ${path}: HTML ${html} B, CSS ${styles} B, ${requests} Anfragen (${beiwerk} ohne Bilder), ${gewicht} B gesamt, ${queries} Abfragen, ${scripts} Skripte`);
+    }
+    await budget.close();
+  }
+
+  // Die Seiten, die geprüft werden, stehen in der Sitemap - vorher waren es drei fest
+  // geschriebene Adressen der Demo, und gegen eine andere Installation lief der Check ins Leere.
+  const seiten = ['/', ...[...sitemapText.matchAll(/<loc>([^<]+)<\/loc>/g)]
+    .map(treffer => new URL(treffer[1]).pathname)
+    .filter(pfad => '/' !== pfad && !pfad.startsWith('/beitraege') && !pfad.startsWith('/kategorie/') && !pfad.startsWith('/schlagwort/'))
+    .slice(0, 2)];
+
   for (const width of [1440, 390]) {
     const context = await browser.newContext({ viewport: { width, height: 1000 } });
     const page = await context.newPage();
     const errors = [];
     page.on('pageerror', error => errors.push(error.message));
-    for (const path of ['/', '/grundlagen', '/projektstand']) {
+    for (const path of seiten) {
       const response = await page.goto(origin + path);
       assert.equal(response.status(), 200);
       assert.equal(await page.locator('h1').count(), 1);
-      assert.equal(await page.locator('script').count(), 0);
+      // Strukturierte Daten stehen zwar in einem script-Element, führen aber nichts aus. Gezählt
+      // wird, was laufen kann - und das nur, wenn die Seite es in ihrer eigenen Richtlinie erlaubt.
+      const laufend = await page.locator('script:not([type="application/ld+json"])').count();
+      const darfSkripte = !/script-src 'none'/.test(response.headers()['content-security-policy'] ?? '');
+      assert.ok(darfSkripte ? laufend <= 3 : 0 === laufend, `${path}: ${laufend} Skript(e), erlaubt ${darfSkripte ? 3 : 0}`);
+      // Einblendungen zu Ende spielen, bevor gemessen wird: mitten in einer Einblendung ist ein
+      // Block halb durchsichtig oder verschoben. axe rechnet den Kontrast dann gegen die
+      // verwaschene Farbe, und ein von der Seite hereingleitender Block zählt als Überlauf -
+      // beides Befunde, die kein Besucher je sieht.
+      await page.evaluate(() => document.getAnimations().forEach(animation => animation.finish()));
       assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), 'Horizontal overflow');
       const axe = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'best-practice']).analyze();
 
@@ -67,22 +157,43 @@ try {
       await page.screenshot({ path: `reports/${width}-${path === '/' ? 'home' : path.slice(1)}.png`, fullPage: true });
     }
     await page.goto(origin);
+    // Steht der Einwilligungshinweis offen, liegt er über dem Inhalt - ein Besucher entscheidet
+    // sich zuerst, und danach ist die Seite frei. Genau so geht dieser Test auch vor.
+    const hinweis = page.locator('.consent-bar button[value="none"]');
+    if (await hinweis.count()) {
+        await hinweis.click();
+        await page.waitForLoadState('domcontentloaded');
+    }
     await page.keyboard.press('Tab');
     assert.equal(await page.locator(':focus').innerText(), 'Zum Inhalt springen');
     await page.keyboard.press('Enter');
     assert.equal(await page.locator(':focus').getAttribute('id'), 'main');
-    await page.getByRole('link', { name: 'Die Grundlage entdecken' }).click();
-    assert.equal(new URL(page.url()).pathname, '/grundlagen');
-    await page.getByRole('link', { name: 'Projektstand' }).click();
-    assert.equal(new URL(page.url()).pathname, '/projektstand');
+    // Weiter mit der Tastatur: der erste Verweis im Inhalt muss anklickbar sein und tatsächlich
+    // woandershin führen. Vorher standen hier die Linktexte der Demo - gegen jede andere
+    // Installation lief die Prüfung damit ins Leere statt etwas zu prüfen.
+    const ersterLink = page.locator('main a[href^="/"]').first();
+    const ziel = await ersterLink.getAttribute('href');
+    await ersterLink.click();
+    assert.equal(new URL(page.url()).pathname, ziel.split('#')[0] || '/');
+    assert.equal(await page.locator('h1').count(), 1, ziel + ': keine Überschrift');
     assert.deepEqual(errors, []);
     await context.close();
   }
+  // Ohne JavaScript muss dieselbe Website benutzbar sein - eine öffentliche Seite lädt ohnehin
+  // keines, aber das soll gemessen und nicht geglaubt werden.
   const noJs = await browser.newPage({ javaScriptEnabled: false });
   await noJs.goto(origin);
-  assert.match(await noJs.locator('h1').innerText(), /Deine Inhalte/);
-  await noJs.getByRole('link', { name: 'Die Grundlage entdecken' }).click();
-  assert.equal(new URL(noJs.url()).pathname, '/grundlagen');
+  const hinweisOhneJs = noJs.locator('.consent-bar button[value="none"]');
+  if (await hinweisOhneJs.count()) {
+      await hinweisOhneJs.click();
+      await noJs.waitForLoadState('domcontentloaded');
+  }
+  assert.equal(await noJs.locator('h1').count(), 1);
+  const ohneJs = noJs.locator('main a[href^="/"]').first();
+  const zielOhneJs = await ohneJs.getAttribute('href');
+  await ohneJs.click();
+  assert.equal(new URL(noJs.url()).pathname, zielOhneJs.split('#')[0] || '/');
+  assert.equal(await noJs.locator('h1').count(), 1);
   await writeFile('reports/browser.json', JSON.stringify({ origin, results, editorialFindings: findings, keyboard: 'passed', noJavaScript: 'passed' }, null, 2));
   console.log('Passed: 6 page/viewport accessibility checks, keyboard navigation, no-JS navigation.');
   if (findings.length > 0) {