Add three icons, a styleable menu button and a reliable back-to-top in 1.13.0

The icon set had no drawing for people, music or a house - the three pictures
the Tagespflege Moldovan template asks for. They join as `people`, `music` and
`home`; a test keeps the list and the drawings together, because a missing path
renders an empty `<path d="">`: invisible, without an error.

An icon block's own colour never reached its drawing: the embedded SVG carries
the same `block-icon` class as its wrapper and set the accent colour again.
`.block-icon .block-icon{color:inherit}` fixes it at the root.

The menu button becomes a thing you can shape. `burgerLabel` chooses symbol and
text, text only or symbol only (which keeps the name for screen readers), and
the new style group `menu` targets the button itself, the way `img` targets an
image and `controls` the slider. Inside the header the opened menu now lies
under the header across the full width instead of pushing the header apart -
on a phone that looked like a missing navigation.

The back-to-top button no longer depends on `animation-timeline: scroll()`. A
browser that parses the property but does not run the timeline left it in the
first frame of the animation: permanently invisible. Two classes from
scrolled.js decide now, and without a script the button simply stays visible.

Also: the Tagespflege Moldovan rebuild as its own installation, built only by
`scripts/seed-tagespflege-moldovan.php`.

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

.claude/launch.json

@@ -18,6 +18,36 @@
         "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-17c7f81e0ae6/pilot.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantit-media'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8087 -t public bin/dev-router.php"
+      ],
+      "port": 8087
+    },
+    {
+      "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
     }
   ]
 }

README.md

@@ -4,6 +4,59 @@ Lokaler CMS-Prototyp für PHP-Webhosting mit erstem visuellen Editor. Symfony 7.
 
 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`.
 
+## 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.
@@ -184,6 +237,10 @@ Vier Auslöser, in aufsteigender Verlässlichkeit:
 
 ## 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.
@@ -214,6 +271,18 @@ Beim ersten Start von 1.7.0 wird eine vorhandene `.env.local` einmalig mit `.env
 
 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`.
+
 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.10.0
+1.13.0

docs/ARCHITECTURE.md

@@ -2,6 +2,48 @@
 
 Stand: 14.09.2026. Arbeitstitel KantSites; Produktname offen.
 
+## 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.
@@ -106,6 +148,8 @@ Die Mediathek filtert Titel und Alternativtext vor COUNT und LIMIT in der Datenb
 
 ## 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.

docs/QUALITY.md

@@ -1,5 +1,13 @@
 # Qualitätsbericht – erster ausführbarer Prototyp
 
+## 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`.

docs/STATUS.md

@@ -1,5 +1,193 @@
 # Projektstatus
 
+## 1.13.0 – Drei Symbole mehr, gestaltbarer Menü-Knopf, Nachbau „Tagespflege Moldovan“ (14.09.2026)
+
+**Anlass:** Umut ließ die ZIP-Vorlage „Tagespflege Moldovan“ nachbauen. Beim Nachbau fehlten dem Symbolsatz genau die drei Bilder, die die Vorlage zeigt; danach kamen zwei Meldungen vom Telefon: das Menü sei nicht zu sehen, und „Scroll to top“ funktioniere nicht.
+
+**Nachbau (`scripts/seed-tagespflege-moldovan.php`, `scripts/reset-tagespflege-moldovan.sh`).** Der Onepager aus dem Paket vom 09.09.2026, gebaut aus gewöhnlichen Bausteinen: Kopfleiste mit Telefonzeile, klebender weißer Kopf mit Wortmarke, Hero mit der limettenen Schnittfläche hinter dem Foto (`clip-path` als eigenes CSS auf einer Fläche), Notizkarte und Bildunterschrift, Werteband, Willkommen mit Porträt-Signatur, drei Angebotskarten, Zeitleiste mit Verbindungslinie aus Flächen, dunkler Kontaktbereich mit schräger Fläche, Formularkarte und Fuß mit limettenem Abschluss. Farben, Schriftgrößen, Abstände und Umbrüche sind aus `style.css` übernommen, ebenso die drei Gerätestufen. Eigene Installation: `var/tagespflege-moldovan.db`, `var/tagespflege-moldovan-media`, Bildquellen in `var/tagespflege-moldovan-assets`, Startkonfiguration auf Port 8089. Zwei bewusste Abweichungen: das Formular verschickt serverseitig statt eine Mailto-Nachricht vorzubereiten, und das Markenzeichen liegt als PNG vor, weil die Medienverwaltung JPEG, PNG und WebP nimmt. Impressum und Datenschutz fehlen wie in der Vorlage – für einen Livegang nachzutragen.
+
+**Symbole (ADR 094).** `people`, `music` und `home` ergänzen den Satz in `DocumentValidator::ICONS`, `blocks/icon.html.twig`, `editor.js` und `menu-editor.js`. Ein Test hält Liste und Zeichnungen zusammen. `.block-icon .block-icon{color:inherit}` lässt die am Block eingestellte Farbe endlich an der Zeichnung ankommen – das eingebettete SVG trug dieselbe Klasse wie seine Hülle und setzte die Akzentfarbe erneut.
+
+**Menü-Knopf (ADR 094).** Neue Eigenschaft `burgerLabel` (`both`, `text`, `icon`; „Nur Symbol“ behält den Namen als `visually-hidden`) und die neue Stilgruppe `menu` mit dem Ziel `burger`: `burgerColor`, `burgerBackgroundColor`, `burgerBorderColor`, `burgerBorderWidth`, `burgerBorderRadius`, `burgerFontSize`. Der Compiler schreibt `#id .menu-burger>summary{…}`. Im Kopfbereich klappt das Menü als Fläche über die volle Breite unter den Kopf auf statt inline in der schmalen Spalte neben der Marke – das war die gemeldete „unsichtbare“ Navigation.
+
+**Nach-oben-Knopf (ADR 094).** Die Einblendung hängt nicht mehr an `animation-timeline: scroll()`, sondern an den Klassen `kant-top-armed` und `kant-top-shown`, die `scrolled.js` setzt; das Skript wird jetzt auch geladen, wenn nur dieser Knopf es braucht. Ohne Skript bleibt der Knopf sichtbar.
+
+**Geprüft:** PHP-Suite 498 Tests (fünf neue: Symbolliste gegen Zeichnungen, drei Knopfvarianten, abgewiesene Variante, Knopffarben am `summary`); einziger Fehlschlag ist der bekannte Altfehler `testAnyPublishedPageCanBecomeTheRoot…`. 33 JavaScript-Tests, Twig-Lint, PHP-Stilprüfung sauber, Editor-Browserprüfung vollständig erfolgreich einschließlich axe. Playwright auf dem Nachbau bei 1440, 900 und 390 px sowie als iPhone 13: Seite gegen die Vorlage verglichen, Menü öffnet als Fläche unter dem Kopf, Sprungziele, 404-Seite, keine Konsolenfehler. Nach-oben-Knopf auf der Elektro-Bernhard-Installation als iPhone geprüft: oben verborgen, ab der Schwelle sichtbar, springt an den Anfang.
+
+## 1.12.1 – Elektro Bernhard gemessen: Lighthouse und axe (14.09.2026)
+
+**Anlass:** Umut fragte nach Google-Bewertung, SEO, llms.txt und Barrierefreiheit der neuen Website.
+
+**Ergebnis:** Lighthouse-Mediane auf vier Seiten, Mobil und Desktop: alles 100, nur die mobile Startseite hat Leistung 99 (LCP 2,1 s durch das Hero-Foto). axe auf sechs Seiten in zwei Breiten: null Verstöße. Details und Messbedingungen in `docs/QUALITY.md`.
+
+**Behoben:** drei Kontrast-/Gliederungsbefunde in der Website (Skript) und einer im CMS: der Pause-Knopf des Sliders verletzte WCAG 2.5.3 (sichtbarer Text „Pause“, Name „Automatische Wiedergabe pausieren“); `slider.js` bildet den Namen jetzt aus dem sichtbaren Text, `scripts/admin-quality-check.mjs` folgt.
+
+**Veröffentlicht:** Commit `042aef9` und Tag `v1.12.1` auf `origin`; [Release 1.12.1](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.12.1) mit ZIP (3546 Dateien, 4,6 MB), SHA-256-Datei und `install.php`, gebaut aus dem sauberen Worktree `var/release-source-1.12.1`; alle drei Anhänge anonym geladen und bytegenau verglichen, SHA-256 `c7a2de81…8f1a23`.
+
+## 1.12.0 – Soziale Profile als Baustein; Elektro Bernhard neu gestaltet (14.09.2026)
+
+**Anlass:** Umut fand den ersten Nachbau „grauenhaft“, fragte nach dem transparenten Menü und vermisste Social-Icons im CMS – „gescheit“, also einmal zentral gepflegt und überall mit eigener Größe und Farbe einsetzbar.
+
+**Soziale Profile (Dokumentschema v23, ADR 093).** Unter Einstellungen → Unternehmensdaten gibt es je Netzwerk ein Adressfeld (`SocialProfiles::NETWORKS`: Facebook, Instagram, LinkedIn, YouTube, TikTok, X, Threads, Pinterest, Xing, WhatsApp, Google-Unternehmensprofil; nur HTTPS). Der neue Baustein `social` (Werkzeugkasten → Bausteine → „Soziale Profile“) zeigt sie und bestimmt Größe (die 15 Symbolstufen), Form (nur Symbol, runde oder eckige Fläche), Anordnung, Beschriftung, neuen Tab und optional eine Teilmenge der Netzwerke; Farbe, Hover-Farbe, Abstand und Ausrichtung kommen aus den freien Blockstilen. Die Vorlage liest die Profile über das Twig-Global `siteSettings`, ohne Profile gibt sie nichts aus und zeigt im Editor einen Hinweis. Die Adressen stehen automatisch in `sameAs` der strukturierten Daten. Symbole sind eigene Umrisszeichnungen im Strich des Symbolsatzes. Neue Dateien `src/Content/SocialProfiles.php`, `templates/blocks/social-icon.html.twig`; Änderungen an Validator, Einstellungen, Controller, Vorlagen, `site.css`, Editor (Modell, Eigenschaften, Bibliothekssymbol).
+
+**Zur Frage nach dem transparenten Menü:** Nein, im ersten Nachbau war der Kopf weiß. Jetzt nutzt die Website den Mechanismus aus 1.11.1: `headerOverlay` und `stickyHeader` an, Kopfsektion mit `#ffffff00` als Hintergrund und Weiß mit Schatten `scrolled`. Das Logo (schwarze Schrift, transparenter Grund) sitzt auf einer weißen Fläche, damit es über dem dunklen Foto lesbar bleibt.
+
+**Elektro Bernhard neu gestaltet** (`scripts/seed-elektro-bernhard.php`, vollständig neu geschrieben): dunkler Hero mit dem Teamfoto als Hintergrund und Überlagerung, Lato aus dem lokalen Schriftordner, Versal-Kleinzeilen in Rot, Leistungskarten mit Symbolfläche, Schatten und Hover-Lift, Foto mit starkem Schatten neben Text und vier Stärken, Kundenstimmen als Slider mit sechs echten Rezensionen (Punkte, Automatik 7 s), dunkles Solarband mit dunkler Karte, Akkordeon in weichen Kästen, Formular als weiße Karte, jede Unterseite mit dunklem Seitenkopf unter dem schwebenden Kopfbereich, Handlungsaufruf als dunkle Karte, Einblendungen mit gestaffelten Verzögerungen auf allen Abschnitten. Soziale Profile in der Kopfleiste (16 px, nur Symbol, auf dem Telefon ausgeblendet) und im Fuß (20 px, runde Fläche, Hover rot). „Nach oben“-Knopf in Rot. Keine Änderung am CMS-Code außer dem Baustein.
+
+**Geprüft:** PHP-Suite 492 Tests, davon vier neue für die Profile (Darstellung, Teilmenge, Beschriftung, neuer Tab, sameAs, Abweisung falscher Werte, HTTP-Adresse); einziger Fehlschlag ist der bekannte Altfehler `testAnyPublishedPageCanBecomeTheRoot…`. 33 JavaScript-Tests, Twig-Lint, PHP-Stilprüfung (Fixer angewendet). Editor-Browserprüfung vollständig erfolgreich einschließlich axe. In der App-Vorschau: Startseite von oben bis unten, Kopf transparent und nach Scrollen weiß, Leistungsseite, Einstellungen mit den elf Profilfeldern, Fußbereich im Editor mit geöffnetem Eigenschaftenfeld des Bausteins (Größe, Form, Anordnung, Beschriftung, Tab, Netzwerke, Sichtbarkeit); Mobilansicht 375 px mit Hamburger, Kopfleiste einzeilig. Alle Adressen 200, `/gibtsnicht` 404, `sameAs` mit drei Profilen.
+
+**Veröffentlicht:** Commit `fd4cb75` und Tag `v1.12.0` auf `origin`; [Release 1.12.0](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.12.0) mit ZIP (3546 Dateien, 4,6 MB), SHA-256-Datei und `install.php`. Das Archiv wurde aus einem sauberen Worktree des Tags gebaut (`var/release-source-1.12.0`), die drei Anhänge anonym von der Releaseadresse geladen und bytegenau mit den gebauten Dateien verglichen; SHA-256 `5cc745f6…d5195e`. Während dieser Arbeit hatte eine parallele Sitzung 1.11.3 und 1.11.4 veröffentlicht und `VERSION` zurückgesetzt; 1.12.0 folgt darauf, weil ein neuer Baustein und ein neues Schema kein Patch sind.
+
+## Tagespflege Moldovan – getrennte Installation vorbereitet (14.09.2026, Nachbau offen)
+
+Auftrag: ZIP-Vorlage exakt nachbauen, eigene Datenbank und Medien; ausdrücklich keine CMS-Codeänderung, Inhalte und Gestaltung ausschließlich über die vorhandene Editoroberfläche bearbeitbar aufbauen.
+
+Vorlage gefunden unter `C:/Users/UmutKantarci/AppData/Local/Temp/codex-file-preview-oZxj9Z/Tagespflege_Moldovan_Website.zip`, sicher nach `var/tagespflege-moldovan-source` entpackt. Enthält einen Onepager, CSS/JS, zwei Fotos und `marke.svg`; die unbenutzte Datei `Schmetterling_Moldovan.png` ist leer. Formular bereitet nur eine Mailto-Nachricht vor, Rechtstexte fehlen in der Vorlage.
+
+Angelegt: `var/tagespflege-moldovan.db`, alle 15 Migrationen erfolgreich; separates `var/tagespflege-moldovan-media`; Startkonfiguration `tagespflege-moldovan` auf Port 8089. Über die Installationsoberfläche Website-Grundgerüst angelegt. Bestehende `.env` nach den Installeränderungen bytegleich aus der vorher angelegten Sicherung wiederhergestellt; die neue Installation verwendet Prozessvariablen. Keine Änderungen am CMS-Code durch diese Aufgabe.
+
+Noch offen: Erstes Administratorkonto im geöffneten Browser unter `http://127.0.0.1:8089/install/konto` fertigstellen und anmelden. Automatische Freigabeprüfung wies zuvor den kombinierten Shellbefehl für Kontoanlage und Serverstart ab (keine genauere Begründung); der verworfene Setuphelfer wurde entfernt und nicht ausgeführt. Server separat erfolgreich gestartet. Danach den eigentlichen Nachbau vollständig im Editor durchführen, Medien hochladen, Desktop/Mobil vergleichen und Speichern/Neuladen prüfen. **Noch kein Vorlagennachbau und keine visuelle Abnahme.**
+
+## 1.11.4 – Slider-Steuerung auf dem Bild wie bei kant-it.de (14.09.2026)
+
+**Anlass:** Umut wollte nicht die Knopfleiste unter dem Slider, sondern das Design des Hero-Sliders auf www.kant-it.de (eigenes Plugin, kein Flatsome-Slider): runde weiße Pfeile auf dem Bild, Punkte unten rechts mit aktivem Strich in der Akzentfarbe, keine Zählerleiste, Pfeile auf dem Handy aus.
+
+**Umgesetzt:** `slider.js` legt Slider und Steuerung in eine `.slider-shell` (beim Aufräumen wieder entpackt) und benennt Pfeile und Pause (`slider-prev/next/play`, `data-playing`); `site.css` zeichnet die Steuerung als Ebene über dem Bild: Pfeile 50 px rund mit Chevron, Punkte 9 px (aktiv 28 px Strich), Pause 32 px unten rechts, Zähler nur noch für Vorlesesoftware, Pfeile unter 600 px ausgeblendet. Neue Gestaltungseigenschaft „Aktiver Punkt“ (`sliderDotActiveColor`, `--slider-dot-active`). Der Compiler-Selektor `#id + .slider-controls` gilt in der Shell weiterhin.
+
+**Geprüft:** Playwright auf der Pilotkopie bei 1600 und 390 px: Pfeile mittig links/rechts (Desktop) bzw. ausgeblendet (Mobil), Punkte und Pause unten rechts innerhalb des Bildes, Screenshots `reports/editor/slider-design-*.png` visuell geprüft. Zwei gezielte PHP-Tests, 33 JavaScript-Tests, Editor-Browserprüfung vollständig erfolgreich.
+
+**Veröffentlicht:** Commit `cef710d` und Tag `v1.11.4` auf `origin`; [Release 1.11.4](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.4). Weil parallel die Arbeit an „Soziale Profile“ (1.12.0) im selben Arbeitsbaum lief, wurden nur die eigenen Hunks committed und das Archiv (3544 Dateien, 4,6 MB) aus einem sauberen Worktree des Tags gebaut; Anhänge anonym heruntergeladen und bytegenau verglichen, SHA-256 `53904dea…9a663b`.
+
+## Elektro Bernhard: Abgleich mit dem bestehenden Auftritt, SEO nachgezogen (14.09.2026)
+
+**Anlass:** Umut bat darum, den Nachbau gegen die laufende Website `elektro-bernhard.de` zu halten und SEO nachzuholen.
+
+**Dabei zwei Falschangaben gefunden und korrigiert.** Das gelieferte HTML-Paket ordnete zwei Google-Rezensionen falsch zu: „Super Firma und einfach tolle Mitarbeiter“ stammt von **Redzepi Samir** (26.10.2024), nicht von Philipp Bender; Philipp Bender (26.11.2024) hat die Architekten-Rezension geschrieben. Der dritte Eintrag des Pakets war eine selbst formulierte Zusammenfassung statt der tatsächlichen Worte. Die Zuordnung ist am DOM der Live-Seite geprüft (`.wprevpro_t1_DIV_1`: erst Text, dann Name, dann Datum), nicht aus der flachen Textfassung geraten. Jetzt stehen drei Rezensionen im Originalwortlaut mit richtigem Namen und Datum; der Hinweis darunter nennt den Stand und sagt ausdrücklich, dass kein Gesamtdurchschnitt ausgewiesen wird.
+
+**Aus dem bestehenden Auftritt nachgeholt:** die sechs Stärken („Kundenzufriedenheit“, „Qualität“, „Erfahrung“, „Flexibel“, „Professionell“, „Schnell & sauber“), die das Paket zu drei Absätzen Fließtext zusammengezogen hatte – jetzt als Symbolkarten auf der Leistungsübersicht, die dadurch von 8 auf 23 Bausteine wächst. Dazu der Handlungsaufruf „Projekt geplant? Wir sind bereit.“ als `cta`-Baustein auf der Übersicht und auf allen vier Leistungsseiten. Das Einsatzgebiet nennt jetzt auch Kuppenheim, Gaggenau, Gernsbach und Muggensturm – Orte, die der bestehende Auftritt in seinen eigenen Keywords führt.
+
+**SEO:** `sameAs` mit den drei Profilen, die die Live-Seite selbst verlinkt (Google-Unternehmensprofil, Facebook, Instagram) – sie stehen jetzt in den strukturierten Daten. Unternehmensbeschreibung auf Leistungen, Notdienstnummer und Bürozeiten erweitert; sie ist zugleich die Zusammenfassungszeile in `llms.txt`. Vorschaubild beim Teilen gesetzt (Startseite Teamfoto, Leistungsseiten Installationsmotiv), womit `og:image` und `twitter:card: summary_large_image` ausgeliefert werden statt einer Textkarte. Meta-Beschreibungen liegen zwischen 110 und 159 Zeichen.
+
+`llms.txt` gab es schon seit dem Aufbau (Einstellung `llmsTxt`); es listet alle zehn indexierbaren Seiten mit Beschreibung.
+
+**Bewusst nicht per Skript gesetzt:** der Auszug (`excerpt`) je Seite. Das Feld erscheint in der Verwaltung nur bei Beiträgen; ein per SQL geschriebener Wert wäre unsichtbar und würde beim nächsten Speichern der Seitendaten stillschweigend gelöscht. `llms.txt` nimmt ersatzweise die Seitenbeschreibung, und die ist im Editor bearbeitbar.
+
+**Offene Lücke gegenüber dem HTML-Paket:** dessen JSON-LD enthielt `openingHoursSpecification`, `areaServed`, einen `contactPoint` für den Notdienst sowie `FAQPage` und `Service`. Das CMS kennt diese Felder nicht – es liefert `LocalBusiness` (Name, Adresse, Telefon, E-Mail, `sameAs`) und `BreadcrumbList`. Das nachzurüsten ist eine Kernerweiterung (Einstellungen, `SiteSettings::organisation()`, FAQ aus Akkordeons ableiten) mit eigenem Release, nicht eine Änderung an dieser Website. Noch nicht umgesetzt, nicht beauftragt.
+
+**Geprüft:** Alle zehn Adressen 200, `/gibtsnicht` 404, `llms.txt` und `sitemap.xml` ausgeliefert; strukturierte Daten, `og:image` und `twitter:card` im Quelltext kontrolliert; Leistungsübersicht, Leistungsseite und Kundenstimmen in der App-Vorschau angesehen; keine Konsolenfehler. Das größte Dokument (Startseite) liegt bei 117 Bausteinen und 27 KiB – Grenze sind 300 und 256 KiB.
+
+## 1.11.3 – Farben der Slider-Steuerung (14.09.2026)
+
+**Anlass:** Umut will die Punktfarben am Slider einstellen; auf dem dunklen Hero waren die Standardfarben (dunkle Punkte, weiße Knöpfe) nicht anpassbar.
+
+**Umgesetzt:** Drei Gestaltungseigenschaften in der neuen Gruppe „Slider-Steuerung“ (`sliderDotColor`, `sliderControlColor`, `sliderControlBackground`) mit dem Ziel `controls`: der Compiler schreibt sie als `--slider-dot`, `--slider-ink`, `--slider-bg` auf den Slider und auf die vom Skript dahinter eingefügte Steuerleiste (`#id,#id + .slider-controls{…}`); `site.css` liest die Variablen für Punkte, Pfeile, Zähler, Knopfhintergrund und die skriptfreien `::scroll-marker`. Die Gruppe erscheint nur an Slidern (`relevantProperty`).
+
+**Geprüft:** Neuer Test `testSliderControlsTakeTheirColoursFromTheSliderStyle` (Ausgabe mit Hex- und Palettenfarbe). Playwright im Editor der Pilotkopie: Gruppe am Hero-Slider vorhanden, Punktfarbe `#ff0000` gesetzt, Regel in der Vorschau angekommen, Punkt bei „Bewegung abspielen“ rot gezeichnet. 33 JavaScript-Tests, Editor-Browserprüfung vollständig erfolgreich.
+
+**Veröffentlicht:** Commit `6dc30a4` und Tag `v1.11.3` auf `origin`; [Release 1.11.3](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.3) mit ZIP (3548 Dateien), SHA-256-Datei und `install.php` als neuestes stabiles Release; Anhänge anonym heruntergeladen und bytegenau verglichen, SHA-256 `a9536289…f45a24`. Der Commit enthält auch den parallel entstandenen Statuseintrag zur Elektro-Bernhard-Referenzwebsite; deren Skripte sind noch nicht committed.
+
+## Zweite Referenzwebsite: Elektro Bernhard in eigener Datenbank (14.09.2026)
+
+**Anlass:** Umut hat das fertige statische Paket `Elektro-Bernhard-Website` (HTML/CSS/JS, erstellt 12.09.2026) geliefert mit dem Auftrag, es vollständig im CMS nachzubauen – eigene Datenbank, eigener Medienordner, im Editor bearbeitbar.
+
+**Umgesetzt:** Neue Installation neben dem Kant-IT-Piloten, nach demselben Muster: Datenbank `var/elektro-bernhard.db` (alle 15 Migrationen), Medien in `var/elektro-bernhard-media`, Startkonfiguration `elektro-bernhard` auf Port 8088 in `.claude/launch.json`. Aufgebaut wird sie von `scripts/seed-elektro-bernhard.php` (Neuaufbau mit `scripts/reset-elektro-bernhard.sh`), damit der Bestand reproduzierbar ist und nicht von Hand zusammengeklickt werden muss.
+
+Inhalt: elf Seiten (Startseite, Leistungsübersicht mit vier Leistungsseiten, Kontakt, Solarenergie, Impressum, Datenschutz, 404), Kopf- und Fußbereich als gemeinsame Bereiche, vier Menüs (Haupt, Notdienst, Fuß, Rechtliches), Kontaktformular mit sechs Feldern, drei Bilder aus dem Original in der Mediathek, Palette und Schrift der Vorlage im Design, drei Weiterleitungen. Alles besteht aus vorhandenen Bausteinen – Abschnitt, Zeile, Spalte, Überschrift, Text, Bild, Symbolkarte, Kennzahl, Zitat, Akkordeon, Kontakt, Formular, Brotkrumen, Menü, Rechtszeile, Trennlinie. Kein neuer Bausteintyp, keine Änderung am CMS-Code.
+
+**Drei Stellen weichen bewusst ab, weil das Schema sie so verlangt:**
+
+- `/leistungen/…` braucht im CMS eine übergeordnete Seite; die Vorlage hatte nur den Anker `/#service`. Es gibt deshalb zusätzlich eine Leistungsübersicht unter `/leistungen`, und `/service` leitet dorthin.
+- Eine Weiterleitung zeigt auf einen Pfad, nicht auf ein Sprungziel: `/ueber-uns` landet auf der Startseite, die den Abschnitt trägt, statt auf `/#ueber-uns`.
+- Ein Button verlinkt nur lokale Pfade, Sprungziele und HTTPS. Die Telefonnummern der Vorlage sind deshalb Kontakt-Bausteine (mit `tel:`-Verweis), gestaltet wie der zweite Button der Vorlage.
+
+Für drei Feinheiten, die die Gestaltungsfelder nicht erreichen (Symbolfarbe in der Karte, Sternfarbe im Zitat, Pluszeichen im Akkordeon), steht je zwei Zeilen unter „Eigenes CSS“ am Baustein – im Editor sichtbar und änderbar.
+
+**Geprüft:** Alle elf Adressen antworten mit 200, `/gibtsnicht` mit der eigenen 404-Seite, die drei Weiterleitungen mit 301 auf das erwartete Ziel; `sitemap.xml`, `robots.txt` und `llms.txt` werden ausgeliefert. In der App-Vorschau Startseite von oben bis unten mit der Vorlage verglichen (Hero, Leistungen, Über uns mit Kennzahlen, Marken, Kundenstimmen, Solar, Fragen, Kontakt, Notdienststreifen, Fuß), dazu Leistungsseite und Impressum; auf 375 px Kopfleiste ohne Adresse und Hamburger-Menü mit den vier Originaleinträgen. Im Editor ist die Startseite geladen, der Strukturbaum zeigt den vollständigen Baum, ein Textbaustein lässt sich auswählen und über das Eigenschaftenfeld bearbeiten. Keine Konsolenfehler auf der öffentlichen Seite.
+
+**Nicht geprüft:** Kein Formularversand (keine Mailzustellung lokal), keine Lighthouse-Messung, kein Livegang. Die Rechtstexte stammen aus der Vorlage; im Datenschutz ist der Abschnitt zum Formular auf den Serverversand des CMS umgeschrieben und als „NOCH ZU PRÜFEN“ markiert, weil Hoster und Aufbewahrungsdauer offen sind.
+
+## 1.11.2 – Slider stottert nicht mehr auf dem iPhone (14.09.2026)
+
+**Anlass:** Umuts iPhone-Screenshot des Hero-Sliders („das buggt“). Safari bricht `scrollTo({behavior:'smooth'})` in einem Container mit `scroll-snap-type: x mandatory` ab und rastet auf die vorige Folie zurück; Pfeile und Automatik ruckeln.
+
+**Umgesetzt:** `slider.js` schaltet das Einrasten für die Fahrt aus und stellt es bei Ankunft am Zielwert wieder her (spätestens nach zwei Sekunden, weil ein Hintergrund-Tab sanftes Scrollen pausiert); bei reduzierter Bewegung weiter sofortiges Springen. Die Punkte der Steuerung sind gezeichnete Punkte (aktiv gefüllt) statt eines Kastens um den Text, Trefffläche bleibt 44 px.
+
+**Geprüft:** Playwright auf der Pilotkopie bei 375 und 1600 px: „Nächste Folie“ landet exakt auf dem Folienanfang (359 bzw. 666 px), Einrasten danach wieder `x mandatory`, Automatik blättert nach 7 s selbst weiter; 33 JavaScript-Tests. Der Safari-Fall selbst ist hier nicht ausführbar; die Maßnahme ist die dokumentierte Umgehung dieses WebKit-Verhaltens. Editor-Browserprüfung vollständig erfolgreich.
+
+**Veröffentlicht:** Commit `769b0fa` und Tag `v1.11.2` auf `origin`; [Release 1.11.2](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.2) mit ZIP (3549 Dateien), SHA-256-Datei und `install.php` als neuestes stabiles Release; Anhänge anonym heruntergeladen und bytegenau verglichen, SHA-256 `548e1bf0…ba4a07`.
+
+## 1.11.1 – Kopfbereich mit Scroll-Farben, gleich hohe Karten (14.09.2026)
+
+**Anlass:** Umut sah auf der Startseite ungleich hohe Karten und wünschte sich für den Kopfbereich einstellbare Transparenz-Effekte beim Scrollen, wie in Flatsome.
+
+**Umgesetzt:** (1) `.block-iconcard + .block-iconcard` und die verwandten Stapelabstände gelten in `.block-row` nicht mehr; die Karten in einer Zeile sind gleich hoch. (2) Neuer Zustand `scrolled` neben `hover` in der Gestaltung: `StyleSchema::scrollable()` (Hintergrund-, Text-, Rahmen-, Schattenfarbe, Deckkraft), Prüfung im `StyleCompiler`, Ausgabe als `html.is-scrolled #id{…}` mit Übergang; Design-Panel zeigt „… beim Scrollen“ nur im Kopfbereich; `scrolled.js` markiert die Seite ab 40 px, wird nur geladen, wenn der Kopfbereich Scroll-Werte hat (Seiten und Archive, CSP entsprechend); die Editor-Vorschau setzt die Klasse selbst. Neue Einstellung „Kopfbereich über dem Inhalt schweben lassen“ (`headerOverlay`, Klasse `is-overlay`, absolut bzw. fixiert mit „oben halten“). ADR 092.
+
+**Geprüft:** Neuer Test `testAHeaderCanChangeItsColoursOnceThePageHasScrolled` (Ausgabe, Skript, CSP, Ablehnung unzulässiger Scroll-Werte); PHP-Suite 485 Tests grün bis auf den bekannten Altfehler. In der App-Vorschau: sechs Leistungskarten 227 px, Kundenstimmen 232 px, „Warum“-Karten 191 px, gestapelte Karten behalten 18 px. Scroll-Farbe im Kopfbereich-Editor über das Farbfeld gesetzt, in der Vorschau als Regel angekommen und gespeichert. 33 JavaScript-Tests, Twig-Lint aller 49 Vorlagen, PHP-Stilprüfung. Editor-Browserprüfung vollständig erfolgreich, einschließlich aller axe-Prüfungen.
+
+**Veröffentlicht:** Commit `3785d3d` und Tag `v1.11.1` auf `origin`; [Release 1.11.1](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.1) mit ZIP (3547 Dateien, 4,7 MB), SHA-256-Datei und `install.php` als neuestes stabiles Release angelegt. Anhänge anonym heruntergeladen und bytegenau mit dem lokalen Build verglichen; SHA-256 `970a12bc…6ff306`.
+
+## Kant-IT-Startseite: Einblendungen nach Flatsome-Muster in `var/kantit.db` (14.09.2026)
+
+**Umgesetzt:** Auf Umuts Wunsch das Animationsmuster der alten Flatsome-Website (www.kant-it.de: fadeInLeft/Right im Hero, bei „Warum“ und Kontakt, gestaffeltes fadeInUp auf Zahlen, Karten und Fußzeilenspalten) in der lokalen Kant-IT-Datenbank nachgebaut: 55 Blöcke der Startseite umgestellt – Sektionen ohne eigene Einblendung, Hero-Text von links, Slider-Spalte von rechts, Kennzahlen und Karten gestaffelt von unten, „Warum“-Texte und -Karten von links, Kundenstimmen von rechts, Kontaktdaten links und Formular rechts – sowie die vier Fußzeilenspalten gestaffelt von unten. Als Entwurf gespeichert und veröffentlicht (Revision `155e2934…`), Sicherung `var/kantit.db.vor-bewegung-*.bak`. Umut kopiert die Datei selbst auf den Server; `web.kant-it.de` läuft bereits auf 1.11.0 (Fassung, `motion.js`, Hover und Einblendungen live geprüft).
+
+**Geprüft:** `scripts/motion-check.mjs` (Ziel jetzt `#abschluss-cta`, weil die Sektion `#kontakt` keine eigene Einblendung mehr trägt) auf frischer Pilotkopie bei 1600/390 px erfolgreich: 45 Einblendungen gerendert (30 von unten, 11 von links, 4 von rechts), Warten außerhalb des Bildes, einmalige Wiedergabe, Richtungen, Hover, Standardmodus unter „reduce“, `motion-respect`. Keine JavaScript-Fehler in der App-Vorschau.
+
+## 1.11.0 – Editor mit einer Seitenleiste nach Flatsome-Vorbild, Bewegung spielt standardmäßig (14.09.2026)
+
+**Anlass:** Umut fand den Editor mit drei Panels unübersichtlich und kam mit dem Flatsome UX Builder zurecht; außerdem liefen die Einblendungen in seinem Chrome nicht, weil der Browser „Bewegung reduzieren“ meldet, obwohl er das nicht eingestellt hat – andere Websites bewegen sich bei ihm.
+
+**Umgesetzt:** Editor-Gerüst neu (`templates/admin/editor.html.twig`, `editor.css`, `editor.js`): dunkle Kopfzeile mit Gerätewahl in der Mitte, eine Seitenleiste mit den Reitern Elemente/Struktur/Seite und einer Elementansicht (Name, Pfad, Inhalt/Design/Erweitert, Aktionen unten, ‹ zum Elternelement, ＋ zum Einfügen, ✕ zum Schließen), Elementkarten im Raster, Kontextmenü per Rechtsklick in der Vorschau, Escape/Entf-Tasten auch bei Fokus in der Vorschau, „Bearbeiten“ neben dem gewählten Strukturknoten. Panelbreiten und der Werkzeugkasten-Umschalter entfallen. Sichtbarkeit am Ende von Inhalt und Erweitert. Bewegung: Website-Einstellung `motion` (`always` Standard, `respect`), Klasse `motion-respect` auf `<html>`, `motion.js` versteckt wartende Blöcke und blendet sie von unsichtbar ein, zeigt übersprungene Blöcke sofort; Hover-CSS ohne Medienschranke, Überschreibblock nur für `motion-respect`; `slider.js` folgt derselben Regel. ADR 091.
+
+**Geprüft:** `scripts/motion-check.mjs` auf isolierter Pilotkopie (1600/390 px) erfolgreich: Warten außerhalb des Bildes, Start beim Scrollen, einmalige Wiedergabe, Richtungen, gespeicherter Hover, Standard spielt unter emuliertem „reduce“, `motion-respect` unterdrückt und nimmt wieder auf, Editorhinweis nur bei `motion-respect`. In der App-Vorschau mit realen Kant-IT-Daten: Auswahl, Design-Reiter, Kontextmenü, ＋-Einfügen (Zeile → nur Spalte erlaubt, Spalte → Überschrift), Entf, Strg+Z, Tablet-Ansicht, öffentliche Startseite mit 14 Einblendungen (7 warten, alle sichtbar nach Sprung ans Seitenende), keine JavaScript-Fehler. 33 JavaScript-Tests, Twig-Lint der geänderten Vorlagen, angepasster CSS-Test in `CmsTest`. `scripts/editor-check.mjs` auf die eine Seitenleiste umgestellt (Reiter-Helfer, Bearbeiten im Baum, Flatsome-Modus in der Sandbox) und vollständig erfolgreich, einschließlich aller axe-Prüfungen (Desktop- und Mobil-Editor, Mediathek, Verwaltungsseiten), Entwurf/Veröffentlichung, Konflikt und Einwilligung.
+
+**Bekannt / Grenzen:** `CmsTest::testAnyPublishedPageCanBecomeTheRootAndEverythingFollows` schlägt bereits ohne diese Änderungen fehl (Menülink `Start` fehlt) – nicht Teil dieses Schritts. Kein neuer Lighthouse-Lauf. Die Ursache der Browsermeldung in Umuts Chrome bleibt offen; die Website hängt nicht mehr davon ab.
+
+**Veröffentlicht:** Commit `a1f8b90` und annotierter Tag `v1.11.0` auf `origin`; [Release 1.11.0](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.11.0) mit ZIP (3549 Dateien, 4,7 MB), SHA-256-Datei und `install.php` als neuestes stabiles Release über die API angelegt. Alle drei Anhänge anonym unter `releases/download/v1.11.0/` heruntergeladen und bytegenau mit dem lokalen Build verglichen; SHA-256 `49338e77…63ca56` stimmt mit der Datei und dem Installer überein. Die lokale Startkonfiguration `.claude/launch.json` für die Pilotkopie ist nicht committed.
+
+## 1.10.2 – Fehler 500 beim Abschluss des Archiv-Updateaufrufs (14.09.2026)
+
+**Reproduziert und korrigiert:** Echter Produktionsmodus mit den vollständigen Paketen 1.10.0 → 1.10.1: Update-POST HTTP 500 nach erfolgreichem Dateitausch, fehlende PHP-Dienste im gerade gelöschten Containercache. Systemseite anschließend HTTP 200, Migrationsabschluss HTTP 302, öffentliche Seite danach HTTP 200. Ursache und Übergang: ADR 090. Der Kernel hält nun seinen Cachepfad pro Anfrage fest und verwendet für jede Releasefassung ein eigenes Verzeichnis. Der Archiv-Updater entfernt keine Dateien, die die laufende Anfrage noch benötigt.
+
+**Geprüft:** 28 PHP-Tests / 347 Assertions für Archiv- und Git-Updater, Cachepfad, Systemverwaltung und Installation erfolgreich. Wiederverwendbarer Paket-HTTP-Test reproduziert 1.10.0 → 1.10.1 mit 500 sowie den erfolgreichen Wiederaufnahmeweg (`var/archive-check-f00fc15412`). Mit dem echten Zielpaket 1.10.2: Übergang aus 1.10.1 weiterhin einmalig POST 500, danach System 200, Abschluss 302, öffentlich 200 (`var/archive-check-316de9113a`). Korrigierter Paket-Updater mit ausschließlich synthetischer vorheriger Versionsnummer: POST 302, System 200, Abschluss 302, öffentlich 200, keine fehlenden Cachedienste (`var/archive-check-8637d9310e`). Sitzung, Wartungszustand, Sicherung, Versionswechsel und unveränderte Originaldatenbank geprüft. Produktionscontainer, Cache-Warmup, PHP-Stil und JavaScript-Syntax erfolgreich.
+
+**Veröffentlicht:** Commit `7c1c86b`, Tag `v1.10.2`, [Release 1.10.2](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.10.2) auf origin und als neuestes stabiles Release geprüft. Paket aus dem exakten Commit, 3543 Archivdateien und 221 Quelldateien bytegenau geprüft; nur Produktionsabhängigkeiten. Frischer Installer HTTP 200, Container und Cache-Warmup auch im Release erfolgreich. ZIP, Prüfsumme und Installer anonym heruntergeladen und mit den lokalen Artefakten verglichen. ZIP-SHA-256: `733f591c143e9d98d4044f37dabce93086542e4db2512b1d4f051617d8835711`.
+
+**Übergabe / Grenzen:** Der bereits installierte alte Updater kann beim Einspielen dieser Reparatur einmalig weiter 500 ausgeben; anschließend `/admin/system` direkt öffnen und die angebotenen Migrationen abschließen. Genau dieser Weg ist mit dem Releasepaket geprüft. Kein Zugriff auf Produktionsprotokolle und keine Produktionsänderung durch diese Diagnose; Startseite und Anmeldung bei der Prüfung HTTP 200. Kein neuer Lighthouse- oder visueller Gesamtlauf. Die während der Arbeit extern geänderte `.claude/launch.json` bleibt unberührt und uncommitted.
+
+## 1.10.1 – Standardbutton im Formular und zuverlässiges Wiederaufnehmen von Einblendungen (14.09.2026)
+
+**Umgesetzt:** „Absenden“ verwendet den konfigurierten Website-Standardbutton, einschließlich Form, Darstellung, Größe, Schrift sowie normalen und Hover-Farben. Harte Formularfarben entfernt und natürliche Buttonbreite hergestellt. Bestehende Formulare übernehmen Theme-Änderungen ohne Inhaltsmigration (ADR 089). Enthalten sind außerdem die unten dokumentierte Observer-Korrektur und die dynamische Bewegungsmeldung im Editor.
+
+**Prüfungen:** Formularabweichung vor der Korrektur mit realen berechneten CSS-Werten reproduziert (`var/form-button-before.log`). 10 gezielte PHP-Tests / 76 Assertions für Formulare, Validierung, Versand, Spam-Schutz und Menüformular erfolgreich; eine alte Menüerwartung auf die seit 1.10.0 getrennten responsiven Darstellungen angepasst. 33 JavaScript-Tests, alle 49 Twig-Dateien, Produktionscontainer und PHP-Stilprüfung erfolgreich. Bewegungstest auf isolierter Pilotkopie bei 1600/390 px einschließlich Präferenzwechsel und Editorhinweis erneut erfolgreich. Kein neuer Lighthouse-Gesamtlauf oder Test des normalen Chrome-Benutzerprofils.
+
+**Browser:** Drei Button-Prüfgruppen erfolgreich auf isolierter Kant-IT-Kopie. Globale Vererbung des Formularbuttons bei 1600/900/390 px ohne JavaScript mit berechneten CSS-Werten gegen einen gewöhnlichen Standardbutton verglichen; Hover, Tastaturfokus, natürliche Breite sowie spätere Umstellung von Rahmen/Pille auf gefüllt/abgerundet/groß mit eigenen Farben geprüft. Bestehende Button-Tests für Undo/Redo, Gerätevarianten und Veröffentlichung ebenfalls erfolgreich. Screenshots unter `reports/buttons/` visuell geprüft.
+
+**Veröffentlicht:** Commit `cff4681` und Tag `v1.10.1` auf `origin`; [Release 1.10.1](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.10.1) als neuestes stabiles Release öffentlich geprüft. ZIP, SHA-256-Datei und Installer anonym heruntergeladen und bytegenau verglichen. Paket aus dem exakten Commit: 3543 Archivdateien, 221 Paketquelldateien verglichen, ausschließlich Produktionsabhängigkeiten. Frischer Installer HTTP 200, `.env` vorhanden und keine `.env.local`; Produktionscontainer und Cache-Warmup im Release erfolgreich. ZIP-SHA-256: `24733774d14fe1c640681d01e62d2cef2b6a337b24b63af416965ba63cf4654c`.
+
+**Nächster Schritt / Grenzen:** Über die Systemverwaltung aktualisieren und den Editor neu laden. Die Browservorgabe `prefers-reduced-motion` bleibt wirksam; ein dauerhaftes `true` wird durch dieses Release nicht überschrieben. Keine Kundeninhalte oder Systemeinstellungen verändert; auf `web.kant-it.de` hier kein Update installiert.
+
+## Einblendungen nach Freigabe wieder aufnehmen – lokal korrigiert (14.09.2026)
+
+**Neue Evidenz:** Umuts Screenshot zeigt eingeschaltete Windows-Animationseffekte. Auch die lokale Win32-Abfrage `SPI_GETCLIENTAREAANIMATION` ergibt `true`; kein Chrome-Prozess mit `--force-prefers-reduced-motion` gefunden. Die frühere Empfehlung, Windows-Animationen einzuschalten, ist damit nicht als Lösung belegt. Warum Umuts Chrome-Profil dennoch `prefers-reduced-motion: reduce` meldet, bleibt offen; eine Chrome-DevTools-Medienemulation ist eine mögliche, nicht verifizierte Ursache.
+
+**CMS-Fehler reproduziert und behoben:** Der Observer in `motion.js` startete nach dem Wechsel von reduzierter zu erlaubter Bewegung nicht erneut. Der neue Browserfall scheiterte vor der Änderung (`var/motion-resume-before.log`). Jetzt werden noch nicht gezeigte Elemente wieder beobachtet; bereits gezeigte Elemente laufen weiterhin nur einmal, laufende Animationen werden bei Reduktion abgebrochen. Keine Änderung an der grundsätzlichen Beachtung der Browserpräferenz. Im Editor erscheint eine dynamische Statusmeldung, wenn der Browser Einblendungen, Hover-Bewegungen und Slider-Automatik unterdrückt.
+
+**Geprüft:** Erweiterte `scripts/motion-check.mjs` auf isolierter Pilotkopie bei 1600/390 px erfolgreich: Start unter Reduktion und anschließende Freigabe ohne Reload, nachträgliches Sperren/Freigeben, keine Wiederholung bereits gezeigter Elemente, Hover aus/an, alle bisherigen Scroll-/Richtungsfälle, lesbare Ausgabe ohne JavaScript. Editorhinweis erscheint/verschwindet bei Präferenzänderung, Screenshot `reports/motion/editor-motion-status.png` visuell geprüft. 33 JavaScript-Tests, Twig-Lint für den Editor und Git-Diff-Prüfung erfolgreich; Originaldatenbank unverändert.
+
+**Direkte Produktionsgegenprobe:** Mit installiertem Chrome in zwei getrennten Testkontexten auf `web.kant-it.de`: bei emuliertem `reduce` keine Einblendung und Hover-Transform `none`; bei `no-preference` Kontaktsektion mit `translateY(28px)` und App-Karte beim Hover um −4 px verschoben. Keine JavaScript-Seitenfehler; Bericht `reports/motion/production-proof.json`. Während der Prüfung war an `leistung-app` inzwischen `fx-entrance-none` gespeichert; keine Produktionsinhalte verändert. Dieser Vergleich zeigt die Wirkung der Präferenz, ersetzt jedoch keine Prüfung des normalen Benutzerprofils.
+
+**Offen / nächster Schritt:** Die lokale Observer-Korrektur erklärt keinen dauerhaft wahren Browserwert und behebt bei weiter aktivem `reduce` nicht Umuts gesamten Produktionsbefund. Chrome-Rendering-Emulation prüfen; Windows-Einstellungen nicht erneut als Ursache behaupten. Lokale Änderungen noch nicht committed oder veröffentlicht, keine neue Datenmigration, kein neuer Lighthouse-Gesamtlauf.
+
+## Produktionsdiagnose: Bewegung in Chrome unterdrückt (14.09.2026)
+
+**Bestätigte Ursache:** Umut meldet für `https://web.kant-it.de/` in seinem Chrome `matchMedia('(prefers-reduced-motion: reduce)').matches === true`. Damit deaktivieren die vorhandenen CSS-/JavaScript-Regeln Einblendungen, Hover-Bewegungen und Slider-Automatik. Die öffentliche Karte `leistung-app` trägt tatsächlich `fx-hover-lift fx-entrance-left fx-delay-short`; die frühere Diagnose allein anhand der lokalen Pilotdaten war für Produktion unzureichend.
+
+**Geprüft:** Produktions-HTML und Effektdateien HTTP 200; `motion.js?v=1.10.0` entspricht dem lokalen Modul, ausgeliefertes CSS enthält die Hover-Regel samt Bewegungsschranke. Im Codex-Browser ebenfalls reduzierte Bewegung und deaktivierte Slider-Automatik gemessen, keine JavaScript-Warnungen/-Fehler. Direkter Zugriff auf Umuts Chrome wurde von der Browsersteuerung wegen nicht sicher ermittelbarer URL gestoppt; den Wert aus seinem Browser hat Umut selbst bestätigt.
+
+**Testverbesserung:** `scripts/motion-check.mjs` prüft zusätzlich den gespeicherten Hover-Effekt anhand der berechneten Verschiebung von −4 px und protokolliert die Bewegungsvorgabe separat ohne Medienemulation (`reducedMotion: null`). Optional installiertes Chrome über `MOTION_BROWSER_CHANNEL=chrome`; dieser Lauf auf einer isolierten Pilotkopie war bei 1600/390 px erfolgreich. Ein frisches Testprofil ersetzt weiterhin keine Messung im Benutzerprofil.
+
+**Einordnung:** Der später bereitgestellte Screenshot und die Systemabfrage zeigen, dass Windows-Animationen bereits eingeschaltet sind (siehe neuerer Eintrag oben). Die Herkunft der Browsermeldung bleibt ungeklärt; keine erfolgreiche Wiedergabe im normalen Chrome-Profil bestätigt. Keine Systemoption, Produktionsdatei oder gespeicherter Inhalt geändert; kein neues Release.
+
 ## Prüfung der Scroll-Einblendungen mit Kant-IT-Daten (14.09.2026)
 
 **Befund:** Die Startseite in `var/kantit.db` enthält in Entwurf und Veröffentlichung 14 Einblendungen, ausschließlich `rise` und `fade`. Keine seitlichen Effekte an den Startseitenelementen gespeichert. `rise` bewegt den Block 28 Pixel bei voller Deckkraft; überwiegend sind ganze Sektionen animiert. Der bestehende Renderer lädt `motion.js`, und der Observer löst beim Scrollen aus. Im Editor erfordert die Wiedergabe „Bewegung testen“; reduzierte Systembewegung unterdrückt sie.
@@ -16,7 +204,9 @@
 
 **Weitere Prüfungen:** 33 JavaScript-Tests; 2 neue PHP-Tests mit 30 Assertions; 50 gezielte bestehende PHP-Tests zu Menüs, Dokument-Roundtrip und ungültigen Dokumenten mit 86 Assertions. PHP-Formatierung, alle 49 Twig-Dateien, Produktionscontainer und Cache-Warmup erfolgreich. Bestehende HTML-Erwartungen berücksichtigen jetzt beide responsiven Menüvarianten; der Browser prüft, dass jeweils nur eine zugänglich ist. Ein im Browser gefundener CSS-Fehler bei ausgeblendeten Slider-Punkten wurde korrigiert.
 
-**Release-Prüfung 1.10.0:** 33 JavaScript-Tests und 139 gezielte PHP-Tests / 234 Assertions erfolgreich. Eine alte HTML-Erwartung im Test für gemeinsame Header/Footer an die vorhandene Menübeschriftung angepasst. Responsive-Navigationsprüfung mit vier Gruppen und Scroll-Prüfung bei 1600/390 px auf isolierten Pilotkopien erneut erfolgreich. Alle 49 Twig-Dateien und Produktionscontainer gültig. Release mit Archiv und Installer beauftragt; Veröffentlichung wird anschließend dokumentiert.
+**Release-Prüfung 1.10.0:** 33 JavaScript-Tests und 139 gezielte PHP-Tests / 234 Assertions erfolgreich. Eine alte HTML-Erwartung im Test für gemeinsame Header/Footer an die vorhandene Menübeschriftung angepasst. Responsive-Navigationsprüfung mit vier Gruppen und Scroll-Prüfung bei 1600/390 px auf isolierten Pilotkopien erneut erfolgreich. Alle 49 Twig-Dateien, Produktionscontainer und PHP-Stilprüfung der drei betroffenen PHP-Dateien ohne Befund.
+
+**Veröffentlicht:** Commit `37c2942` und Tag `v1.10.0` auf `origin`; [Release 1.10.0](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.10.0) als neuestes stabiles Release öffentlich geprüft. ZIP, SHA-256-Datei und Installer anonym heruntergeladen und bytegenau verglichen. Paket aus dem exakten Commit: 3543 Archivdateien, 221 Paketquelldateien verglichen, ausschließlich Produktionsabhängigkeiten. Frische Installationsseite HTTP 200, `.env` vorhanden und keine `.env.local`; Produktionscontainer und Cache-Warmup im Release erfolgreich. ZIP-SHA-256: `beee5723eb27a2de58b4fc32c66a521a1469d7ded00046a25ddac51a34cc86ba`. Ergebnisse unter `var/release-verification-1.10.0.json`.
 
 **Bekannte Grenzen / nächster Schritt:** Kein neuer Lighthouse-Gesamtlauf, keine neue Feldmessung, kein Test auf physischem iPad. Geräteklassen richten sich nach Viewportbreite; die Menüautomatik berücksichtigt zusätzlich Touchbedienung. Bereits separat angelegte Desktop-/Mobilmenüs können mit der neuen Sichtbarkeit zugeordnet werden. Nach dem Release über die Systemverwaltung aktualisieren und die gewünschten Sichtbarkeiten im echten Header festlegen. Kundenhostings werden hier nicht verändert.
 

public/assets/design-panel.js

@@ -5,7 +5,7 @@
  * 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, isContainer, relevantProperty } from './editor-model.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';
 
@@ -18,6 +18,8 @@ export const GROUPS = {
   image: 'Bild',
   layout: 'Layout',
   effect: 'Wirkung',
+  menu: 'Menü-Knopf',
+  slider: 'Slider-Steuerung',
 };
 
 // dvh before vh: on a phone 100vh is taller than the screen, 100dvh is what people mean.
@@ -104,7 +106,7 @@ function element(tag, className, text) {
   return node;
 }
 
-export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, getDevice, onDevice, getSelection, getHistory }) {
+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.
    *
@@ -149,7 +151,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
 
   /** 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 ? block?.style?.[deviceName]?.hover : block?.style?.[deviceName];
+    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.
@@ -554,6 +556,27 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
             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'),
+          }));
+        }
       }
       if (group === 'text') {
         const notice = contrastNotice(block, deviceName);

public/assets/editor-model.js

@@ -1,5 +1,5 @@
-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'};
-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: '⇄' };
+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' };
+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: '⚭' };
 // 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.
 /**
@@ -10,7 +10,7 @@ export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H',
 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', 'logos', 'progress'] },
+  { 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'] },
 ];
@@ -107,6 +107,8 @@ export function createBlock(type) {
   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;
@@ -125,6 +127,7 @@ export function upgradeForType(document, type) {
   if (type === 'menu' || type === 'partialref') upgradeDocument(document, 11);
   if (type === 'embed') upgradeDocument(document, 14);
   if (['icon', 'progress', 'slider'].includes(type)) upgradeDocument(document, 15);
+  if (type === 'social') upgradeDocument(document, 23);
 }
 
 /**
@@ -255,7 +258,7 @@ export const devices = { desktop: 'Desktop', tablet: 'Tablet', mobile: 'Mobil' }
 // blieb bei 12 stehen, während Bausteine schon v13 bis v15 verlangten: in einem aktuellen Dokument
 // liess sich dann gar nichts mehr einfügen, und ein Symbol, ein Slider oder ein externer Inhalt
 // nirgends. Eine Zahl, an einer Stelle.
-export const SCHEMA_VERSION = 22;
+export const SCHEMA_VERSION = 23;
 
 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' };
 
@@ -507,7 +510,11 @@ 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;
@@ -519,6 +526,8 @@ export function setStyle(document, id, device, key, value, { side = null, hover
   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]; }
@@ -559,10 +568,12 @@ export function copyStyle(document, fromId, toId) {
 
 /** 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)) return true;
+  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 (['flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'gridColumns', 'gap', 'rowGap', 'columnGap'].includes(key)) return container || ['button', 'menu', 'form', 'postlist', 'contact'].includes(block.type);
+  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,12 +1,15 @@
 /* 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. */
 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 library dialog (unchanged) ---------------------------------------------------- */
+.media-launch{margin-top:14px;white-space:normal}
 .media-dialog{width:calc(100% - 32px);max-width:1100px;max-height:calc(100dvh - 32px);overflow:auto}
 .media-heading{display:flex;justify-content:space-between;gap:20px;align-items:center}
 .media-heading h2{margin:0}
@@ -30,108 +33,154 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .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}
-.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}
+/* ---- 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:18px 0 8px;padding:10px;border-left:3px solid var(--accent);background:#f1f5e7}
+.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}
@@ -140,10 +189,11 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .design-own .design-row-head label::before{content:'● ';color:var(--accent)}
 .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}
-.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:10px}
@@ -160,7 +210,6 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .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. */
 .device-chips{display:flex;gap:2px;margin-left:auto}
 .device-chip{width:19px;height:19px;display:grid;place-items:center;padding:0;min-height:0;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--muted);font:700 9px/1 system-ui,sans-serif;cursor:pointer}
@@ -169,16 +218,14 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .device-chip[aria-pressed=true]{outline:2px solid var(--ring,#b55b12);outline-offset:1px}
 .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)}
@@ -191,9 +238,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{flex-wrap:wrap;align-items:center}.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-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}
@@ -201,27 +249,9 @@ 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}
-.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}
-#design-search{font-size:12px;min-height:36px;padding:9px}
+.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.
@@ -235,8 +265,7 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .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:var(--ring,#b55b12);color:#fff;font:700 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-label{background:#5c6b62;font-weight:600}
+.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}
@@ -250,68 +279,14 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .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}
 /* 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{display:none}
-
-#library button[draggable=true]{cursor:grab}
-#library button[draggable=true]:active{cursor:grabbing}
-.insert-hint{background:color-mix(in srgb, var(--ring,#b55b12) 9%, #fff);border:1px solid var(--ring,#b55b12);border-radius:7px;padding:9px 11px;font-size:11px;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)}
-
-/* The reduced-motion setting is honoured: nothing here animates by itself anyway, but the
-   fade on the insert points is a transition and is switched off with the rest. */
 @media(prefers-reduced-motion:reduce){.ov-insert{transition:none;opacity:1}}
 
-/* --------------------------------------------------------------------------------------------
-   The toolbox, grouped the way a page is built.
-
-   The first group is the scaffolding, the rest goes inside it. What does not fit where the next
-   element would land is disabled and carries the reason in its title, so the rule is learned
-   rather than merely enforced.
-   -------------------------------------------------------------------------------------------- */
-.library-group + .library-group{margin-top:16px}
-.library-group-title{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
-.library-group-hint{font-size:10px;line-height:1.5;color:var(--muted);margin:-3px 0 8px}
-.library-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}
-.library-buttons button{display:flex;align-items:center;gap:8px;text-align:left;min-height:44px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#f7f9f2;color:var(--ink);font-size:11px;line-height:1.25}
-.library-preview{flex:none;display:grid;place-items:center;width:34px;height:23px;color:var(--accent);opacity:.85}
-.library-buttons button:disabled .library-preview{color:var(--muted);opacity:.6}
-.library-name{min-width:0}
-.library-buttons button:hover:not(:disabled){border-color:var(--accent);background:#fff}
-.library-buttons button:disabled{opacity:.4;background:transparent;cursor:not-allowed}
-.library-buttons button[data-row]{grid-column:span 2}
-@media(max-width:1150px){.library-buttons{grid-template-columns:1fr}.library-buttons button[data-row]{grid-column:span 1}}
-
-#library-search{font-size:11px;min-height:36px;padding:9px;margin-bottom:4px}
-#library-found{margin:0 0 10px;min-height:0}
-
-/* Flexible workspace: both panels use their full width, with accessible resize handles. */
-.editor-layout{grid-template-columns:var(--panel-left,280px) 6px minmax(280px,1fr) 6px var(--panel-right,320px)}
-.left-panel,.right-panel{min-width:0;overflow-x:hidden}
-.left-panel{container-type:inline-size}
-.left-panel>.section-launch{flex:none;padding:12px;border-bottom:1px solid var(--line)}
-.section-launch button{white-space:normal;font-size:12px;min-height:40px}
-.section-launch .field-help{margin:6px 0 0}
-.left-panel>.panel-section:not(.structure-section){max-height:55%;overflow:auto;flex-shrink:0}
-.panel-section{padding:16px 12px}
-.library-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
-.library-buttons button{min-width:0;white-space:normal;overflow-wrap:anywhere;gap:6px}
-.library-name{overflow-wrap:anywhere}
-.library-preview{width:28px}
-@container(max-width:270px){.library-buttons{grid-template-columns:minmax(0,1fr)}.library-buttons button[data-row]{grid-column:auto}}
-.canvas-scroll{padding:0}
-.panel-resizer{background:#e4e9df;cursor:col-resize;touch-action:none;position:relative;z-index:4}
-.panel-resizer::after{content:'';position:absolute;top:45%;left:1px;width:4px;height:36px;border-radius:4px;background:#7b8d80}
-.panel-resizer:hover,.panel-resizer:focus-visible{background:#b7cbbd;outline:2px solid var(--accent);outline-offset:-2px}
-.resizing-panels{cursor:col-resize;user-select:none}
-.resizing-panels iframe{pointer-events:none}
-.length-control,.number-control{grid-template-columns:minmax(0,1fr) 74px}
-.right-panel input,.right-panel select,.right-panel textarea{min-width:0;max-width:100%}
-.length-mode{grid-column:1/-1}
-.design-context-toggle{margin:10px 0;width:100%;white-space:normal}
-@media(max-width:850px){.panel-resizer{display:none}.editor-layout{display:flex}.left-panel,.right-panel{width:50%}.canvas-scroll{padding:0}.left-panel>.panel-section:not(.structure-section){max-height:50%}}
-@media(max-width:560px){.left-panel,.right-panel{width:100%;height:620px;max-height:620px}.canvas-toolbar{padding-inline:8px}.canvas-label{display:none}}
-
-.canvas-toolbar{flex-wrap:wrap;gap:8px}.canvas-toolbar #preview-motion{white-space:nowrap;min-height:36px}
-.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}
+/* ---- 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/editor.js

@@ -11,8 +11,10 @@ import { initSliders } from './slider.js';
 import { VISIBILITY, setVisibility } from './editor-model.js';
 
 // Mirrors DocumentValidator::ICONS; the server rejects anything outside this list.
-const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check'];
+const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check', 'people', 'music', 'home'];
 const ICON_SIZES = [12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 120, 160, 200, 240];
+// Mirrors SocialProfiles::NETWORKS; the addresses themselves live in the settings.
+const SOCIAL_NETWORKS = { facebook: 'Facebook', instagram: 'Instagram', linkedin: 'LinkedIn', youtube: 'YouTube', tiktok: 'TikTok', x: 'X', threads: 'Threads', pinterest: 'Pinterest', xing: 'Xing', whatsapp: 'WhatsApp', google: 'Google-Unternehmensprofil' };
 
 const root = document.querySelector('#editor');
 const $ = selector => document.querySelector(selector);
@@ -32,12 +34,46 @@ const collapsed = new Set();
 let renderedProperties = null;
 let revealAfterPreview = null;
 let previewPlayback = false, stopPlayback = () => {};
+const motionPreference = window.matchMedia('(prefers-reduced-motion: reduce)');
+// Worth a note only when the website actually follows the browser (Einstellungen → Bewegung);
+// the preview carries that decision as a class on its <html>.
+const showMotionStatus = () => {
+  const respects = $('#preview').contentDocument?.documentElement.classList.contains('motion-respect') ?? false;
+  $('#motion-status').hidden = !(motionPreference.matches && respects);
+};
+motionPreference.addEventListener('change', showMotionStatus);
+showMotionStatus();
+
+// ---------------------------------------------------------------------------------------------
+// The sidebar shows one thing at a time.
+//
+// `elements` is the library, `structure` the tree, `page` the page settings and `element` the
+// options of the selected block. The last one is not a tab: it appears when something is
+// selected and gives way to the library when the selection is dropped - the Flatsome rhythm of
+// "pick, edit, back to the list".
+// ---------------------------------------------------------------------------------------------
+let view = 'elements';
+function setView(name) {
+  view = name;
+  const sidebar = $('.sidebar');
+  sidebar.dataset.view = name;
+  const showsProperties = name === 'element' || name === 'page';
+  for (const section of sidebar.querySelectorAll('.sidebar-view')) section.hidden = section.dataset.view !== (showsProperties ? 'element' : name);
+  // The tabs stay in reach while an element is open, so the library and the tree are one click
+  // away; none of them is marked then, because the element view is not a tab.
+  for (const tab of sidebar.querySelectorAll('.sidebar-nav [role=tab]')) tab.setAttribute('aria-selected', String(tab.dataset.view === name));
+  $('.sidebar-element').hidden = name !== 'element';
+  $('.property-tabs').hidden = name !== 'element';
+  $('.sidebar-foot').hidden = name !== 'element';
+  $('.sidebar-body').scrollTop = 0;
+}
 
 function playPreview() {
   stopPlayback(); stopPlayback = () => {};
   const button = $('#preview-motion');
   button.setAttribute('aria-pressed', String(previewPlayback));
-  button.textContent = previewPlayback ? 'Bewegung stoppen' : 'Bewegung testen';
+  button.title = previewPlayback ? 'Bewegung in der Vorschau stoppen' : 'Bewegung in der Vorschau abspielen';
+  button.setAttribute('aria-label', button.title);
   const doc = $('#preview').contentDocument;
   if (previewPlayback && doc?.body) {
     const stopMotion = initMotion(doc), stopSliders = initSliders(doc);
@@ -82,20 +118,19 @@ function controls() {
   $('#undo').disabled = !ready || busy || !history.past.length;
   $('#redo').disabled = !ready || busy || !history.future.length;
   const current = ready ? locate(history.document.blocks, selected) : null;
-  for (const id of ['duplicate', 'delete', 'move-up', 'move-down', 'nest', 'outdent']) $(`#${id}`).disabled = !current || busy;
+  for (const id of ['duplicate', 'delete', 'move-up', 'move-down', 'nest', 'outdent', 'go-parent', 'add-here', 'close-element']) $(`#${id}`).disabled = !current || busy;
   if (current) {
     $('#move-up').disabled ||= current.index === 0;
     $('#move-down').disabled ||= current.index === current.siblings.length - 1;
     $('#nest').disabled ||= current.index === 0 || !canContain(current.siblings[current.index - 1], current.block);
     $('#outdent').disabled ||= !current.parent;
+    $('#go-parent').disabled ||= !current.parent;
   }
   updateLibrary();
   $('#presets').querySelectorAll('button').forEach(button => button.disabled = !ready || busy);
   $('#properties').querySelectorAll('input,textarea,select,button').forEach(input => input.disabled = busy);
-  document.querySelectorAll('[data-panel],[data-viewport],#tree-search,#library-search,#expand-all,#collapse-all').forEach(input => input.disabled = !ready || busy);
+  document.querySelectorAll('[data-panel],[data-viewport],.sidebar-nav [role=tab],#tree-search,#library-search,#expand-all,#collapse-all').forEach(input => input.disabled = !ready || busy);
   $('[data-panel="design"]').disabled ||= !current;
-  $('#select-page').disabled = !ready || busy;
-  $('#add-root-section').disabled = !ready || busy;
   $('#open-media-library').disabled = !ready || busy;
   $('#preview-motion').disabled = !ready || busy;
 }
@@ -132,6 +167,14 @@ function renderTree() {
         button.title = badge.textContent; button.append(badge);
         button.setAttribute('aria-label', `${blockLabel(block)}: ${displayText} – ${badge.textContent}`);
       }
+      if (block.id === selected) {
+        // In the tree a click only selects, so the tree stays open while moving through the
+        // page. Editing is one step further - this button, or a double click.
+        const edit = document.createElement('button'); edit.type = 'button'; edit.className = 'tree-edit';
+        edit.dataset.editBlock = block.id; edit.textContent = 'Bearbeiten';
+        edit.setAttribute('aria-label', `${blockLabel(block)} bearbeiten`);
+        item.append(edit);
+      }
       if (block.children?.length && (!collapsed.has(block.id) || query)) item.append(build(block.children));
       list.append(item);
     }
@@ -149,15 +192,31 @@ function choose(id, scroll = true) {
   blockPath(history.document.blocks, selected).slice(0, -1).forEach(block => collapsed.delete(block.id));
   if (!selected) propertyPanel = 'content';
   history.mergeKey = null;
+  syncView();
   renderTree(); renderProperties(); controls(); highlight(scroll);
 }
 
+/**
+ * Selecting opens the element; dropping the selection goes back to the library. The tree is
+ * the exception: there the selection only moves the highlight, editing is one more step.
+ */
+function syncView() {
+  if (selected && view !== 'structure') setView('element');
+  else if (!selected && view === 'element') setView('elements');
+}
+
 function highlight(scroll = false) {
   const doc = $('#preview').contentDocument;
   if (!doc) return;
   doc.querySelectorAll('.editor-selected').forEach(element => element.classList.remove('editor-selected'));
   const element = selected ? doc.getElementById(selected) : null;
-  if (element) { element.classList.add('editor-selected'); if (scroll) element.scrollIntoView({ block: 'nearest' }); }
+  if (element) {
+    element.classList.add('editor-selected');
+    // Scroll the preview window only. scrollIntoView would also drag the editor document along
+    // with it, and the whole workspace would slide out from under the header.
+    const win = doc.defaultView, box = element.getBoundingClientRect();
+    if (scroll && win && (box.top < 0 || box.bottom > win.innerHeight)) win.scrollTo({ top: win.scrollY + box.top - 40 });
+  }
   overlay?.sync();
 }
 
@@ -165,15 +224,15 @@ function renderProperties() {
   const block = locate(history.document.blocks, selected)?.block;
   if (!block) propertyPanel = 'content';
   const context = `${selected ?? 'page'}:${propertyPanel}`;
-  if (context !== renderedProperties) $('.right-panel').scrollTop = 0;
+  if (context !== renderedProperties) $('.sidebar-body').scrollTop = 0;
   renderedProperties = context;
   $('#properties-title').textContent = block ? blockLabel(block) : 'Seiteneinstellungen';
   const panel = $('#properties'); panel.replaceChildren();
   document.querySelectorAll('[data-panel]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.panel === propertyPanel)));
+  // The way up, as a trail above the name: page, then every container the element sits in.
   $('#breadcrumbs').replaceChildren();
-  for (const item of [{ id: null, type: null }, ...blockPath(history.document.blocks, selected)]) {
-    const button = document.createElement('button'); button.className = 'text-button'; button.textContent = item.type ? blockLabel(item) : 'Seite';
-    button.setAttribute('aria-current', item.id === selected ? 'location' : 'false');
+  for (const item of [{ id: null, type: null }, ...blockPath(history.document.blocks, selected)].slice(0, -1)) {
+    const button = document.createElement('button'); button.type = 'button'; button.className = 'crumb'; button.textContent = item.type ? blockLabel(item) : 'Seite';
     button.addEventListener('click', () => choose(item.id)); $('#breadcrumbs').append(button);
   }
   if (block && isPluginBlock(block)) {
@@ -184,21 +243,33 @@ function renderProperties() {
     panel.append(note);
     return;
   }
-  if (block) {
-    const label = document.createElement('label'); label.htmlFor = 'block-visibility'; label.textContent = 'Sichtbarkeit';
-    const select = document.createElement('select'); select.id = 'block-visibility';
-    for (const [value, text] of Object.entries(VISIBILITY)) select.append(new Option(text, value));
-    select.value = block.layout?.visibility ?? 'all';
-    select.addEventListener('change', () => {
-      history.change(doc => setVisibility(doc, block.id, select.value));
-      renderTree(); controls(); schedulePreview();
-    });
-    const help = document.createElement('p'); help.className = 'field-help'; help.id = 'visibility-help';
-    help.textContent = 'Desktop ab 1025 px · Tablet 768–1024 px · Mobil bis 767 px. Ausgeblendete Elemente bleiben links in der Struktur auswählbar. Ein ausgeblendeter Elternbereich blendet auch seinen Inhalt aus.';
-    select.setAttribute('aria-describedby', help.id); panel.append(label, select, help);
-  }
-  if (block && propertyPanel === 'advanced') { renderAdvanced(block, panel); return; }
+  if (block && propertyPanel === 'advanced') { renderAdvanced(block, panel); renderVisibility(block, panel); return; }
   if (block && propertyPanel === 'design') { renderDesign(block, panel); return; }
+  renderContent(block, panel);
+  if (block) renderVisibility(block, panel);
+}
+
+/** On which devices the element is shown. Part of the content, so it sits at its end. */
+function renderVisibility(block, panel) {
+  const group = document.createElement('details'); group.className = 'design-group';
+  group.open = (block.layout?.visibility ?? 'all') !== 'all';
+  const summary = document.createElement('summary'); summary.textContent = 'Sichtbarkeit';
+  const body = document.createElement('div'); body.className = 'design-group-body';
+  const label = document.createElement('label'); label.htmlFor = 'block-visibility'; label.textContent = 'Anzeigen';
+  const select = document.createElement('select'); select.id = 'block-visibility';
+  for (const [value, text] of Object.entries(VISIBILITY)) select.append(new Option(text, value));
+  select.value = block.layout?.visibility ?? 'all';
+  select.addEventListener('change', () => {
+    history.change(doc => setVisibility(doc, block.id, select.value));
+    renderTree(); controls(); schedulePreview();
+  });
+  const help = document.createElement('p'); help.className = 'field-help'; help.id = 'visibility-help';
+  help.textContent = 'Desktop ab 1025 px · Tablet 768–1024 px · Mobil bis 767 px. Ausgeblendete Elemente bleiben in der Struktur auswählbar.';
+  select.setAttribute('aria-describedby', help.id);
+  body.append(label, select, help); group.append(summary, body); panel.append(group);
+}
+
+function renderContent(block, panel) {
   let imagePreview;
   const field = (label, key, value, options = {}) => {
     const container = options.container || panel;
@@ -318,6 +389,7 @@ function renderProperties() {
   if (block.type === 'menu') {
     field('Menüplatz', 'slot', block.props.slot, { choices: { header: 'Hauptnavigation', secondary: 'Zweite Navigation', footer: 'Fußzeile', legal: 'Rechtliches' }, help: 'Welche Einträge gezeigt werden. Gepflegt werden sie unter Menüs.' });
     field('Menüart', 'layout', block.props.layout || 'horizontal', { choices: { horizontal: 'Waagerecht', vertical: 'Untereinander', burger: 'Aufklappbar (Burger)' }, help: 'Aufklappbar funktioniert ohne JavaScript. Untermenüs klappen in allen Arten per Klick auf, nicht beim Überfahren – das ist auf einem Touchgerät die einzige Art, die funktioniert.' });
+    field('Menü-Knopf', 'burgerLabel', block.props.burgerLabel || 'both', { choices: { both: 'Symbol und Text', text: 'Nur Text', icon: 'Nur Symbol' }, help: 'Wie der aufklappbare Knopf beschriftet ist. „Nur Symbol“ behält den Namen für Vorlesesoftware. Farben, Rahmen und Schriftgröße des Knopfes stehen unter Design → Menü-Knopf.' });
     field('Automatisch als Hamburger', 'collapse', block.props.collapse || 'tablet', { choices: { tablet: 'Tablet und Mobil (Standard)', mobile: 'Nur Mobil', never: 'Nie' }, help: 'Waagerechte Menüs wechseln standardmäßig bis 1024 px und auf Touchgeräten ohne Maus, auch großen iPads. „Nur Mobil“ gilt bis 767 px. Die Menüarten „Untereinander“ und „Burger“ bleiben unverändert.' });
   }
   if (block.type === 'partialref') field('Adresse der Sektion', 'partial', block.props.partial, { help: 'Die Adresse aus der Bereichsverwaltung. Die Sektion wird verknüpft, nicht kopiert: eine Änderung dort wirkt auf allen Seiten, die sie einbinden.' });
@@ -329,6 +401,33 @@ function renderProperties() {
     if (!block.props.decorative) field('Beschriftung', 'label', block.props.label, { maxLength: 120 });
     field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse.' });
   }
+  if (block.type === 'social') {
+    field('Größe', 'size', String(block.props.size), { number: true, choices: Object.fromEntries(ICON_SIZES.map(size => [String(size), `${size} px`])), help: 'Die Adressen stehen unter Einstellungen → Unternehmensdaten → Soziale Profile. Farbe, Abstand und Ausrichtung unter Design.' });
+    field('Form', 'shape', block.props.shape, { choices: { plain: 'Nur Symbol', circle: 'Runde Fläche', square: 'Eckige Fläche' } });
+    field('Anordnung', 'layout', block.props.layout, { choices: { horizontal: 'Nebeneinander', vertical: 'Untereinander' } });
+    field('Namen anzeigen', 'labels', block.props.labels === true, { checkbox: true, help: 'Ohne Häkchen tragen die Links ihren Namen nur für Screenreader.' });
+    field('In neuem Tab öffnen', 'newTab', block.props.newTab !== false, { checkbox: true });
+    // Eine Auswahl aus den eingetragenen Profilen; keins gewählt heißt alle.
+    const chosen = new Set(block.props.networks ?? []);
+    const group = document.createElement('fieldset'); group.className = 'field-set';
+    const legend = document.createElement('legend'); legend.textContent = 'Nur diese Netzwerke'; group.append(legend);
+    for (const [key, name] of Object.entries(SOCIAL_NETWORKS)) {
+      const label = document.createElement('label'); label.className = 'check-label';
+      const box = document.createElement('input'); box.type = 'checkbox'; box.checked = chosen.has(key);
+      box.id = `social-${block.id}-${key}`; label.htmlFor = box.id;
+      box.addEventListener('change', () => {
+        history.change(doc => {
+          const current = locate(doc.blocks, block.id)?.block; if (!current) return;
+          const set = new Set(current.props.networks ?? []); box.checked ? set.add(key) : set.delete(key);
+          current.props.networks = Object.keys(SOCIAL_NETWORKS).filter(network => set.has(network));
+        });
+        renderTree(); controls(); schedulePreview();
+      });
+      label.append(box, ` ${name}`); group.append(label);
+    }
+    const note = document.createElement('p'); note.className = 'field-help'; note.textContent = 'Ohne Auswahl erscheinen alle eingetragenen Profile.';
+    group.append(note); panel.append(group);
+  }
   if (block.type === 'progress') {
     field('Beschriftung', 'label', block.props.label, { maxLength: 120 });
     field('Wert (%)', 'value', block.props.value, { number: true, help: 'Zwischen 0 und 100. Der Wert steht auch im Markup, nicht nur in der Balkenbreite.' });
@@ -798,6 +897,21 @@ async function updatePreview() {
         const block = locate(history.document.blocks, element.id)?.block;
         if (block && INLINE_TEXT[block.type]) { event.preventDefault(); choose(element.id, false); startInlineEdit(element.id); }
       });
+      // Right click: the element's actions where the pointer is, as in Flatsome.
+      doc.addEventListener('contextmenu', event => {
+        const element = event.target.closest('[id]');
+        if (!element || !locate(history.document.blocks, element.id) || busy || inlineEdit) return;
+        event.preventDefault();
+        choose(element.id, false);
+        openContextMenu(element.id, event.clientX, event.clientY);
+      });
+      doc.addEventListener('mousedown', event => { if (event.button === 0) closeContextMenu(); });
+      doc.addEventListener('keydown', onKey);
+      // The preview runs no script, so the scrolled state of the header is marked from here -
+      // the same rule scrolled.js applies on the public page.
+      const markScrolled = () => doc.documentElement.classList.toggle('is-scrolled', (doc.defaultView?.scrollY ?? 0) > 40);
+      doc.defaultView?.addEventListener('scroll', markScrolled, { passive: true });
+      markScrolled();
       doc.addEventListener('submit', event => event.preventDefault());
       // The head may arrive before the blocks. Decorate only once the complete DOM exists.
       const finish = () => {
@@ -810,6 +924,7 @@ async function updatePreview() {
           highlight(revealAfterPreview === selected); revealAfterPreview = null;
           markInsertTarget();
           frame.style.visibility = '';
+          showMotionStatus();
           playPreview();
           $('#preview-status').textContent = loaded
             ? 'Entwurf · Klicken wählt aus, Doppelklick bearbeitet Text, Elemente lassen sich hierher ziehen.'
@@ -849,6 +964,7 @@ async function updatePreview() {
 function changed() {
   if (!locate(history.document.blocks, selected)) selected = null;
   if (selected && !$('#preview').contentDocument?.getElementById(selected)) revealAfterPreview = selected;
+  syncView();
   renderTree(); renderProperties(); controls(); schedulePreview();
 }
 
@@ -866,6 +982,7 @@ async function loadDesignSchema() {
       onDevice: setViewport,
       getSelection: () => selected,
       getHistory: () => history,
+      getAreaKind: () => root.dataset.kind,
     });
   } catch {
     // The editor stays usable without it; the panel says so.
@@ -910,9 +1027,9 @@ function addElement(type) {
   if (busy || !history) return;
   const at = pendingInsert;
   setPendingInsert(null);
-  selected = history.change(doc => at
+  selected = history.change(doc => at && type !== 'section'
     ? insertBlockAt(doc, type, at.parentId, at.index) ?? insertBlock(doc, type, selected)
-    : insertBlock(doc, type, selected));
+    : insertBlock(doc, type, at?.parentId ?? selected));
   if (type === 'accordion') selected = locate(history.document.blocks, selected)?.block.children?.[0]?.id ?? selected;
   if (['accordion', 'accordionitem'].includes(type)) propertyPanel = 'content';
   changed();
@@ -950,12 +1067,11 @@ function setPendingInsert(target) {
   $('#insert-hint').hidden = !target;
   markInsertTarget();
   if (target) {
-    if ($('#toolbox').hidden) $('#toggle-library').click();
+    setView('elements');
     $('#library-search').value = ''; filterLibrary();
     const name = target.parentId ? $('#preview').contentDocument?.getElementById(target.parentId)?.dataset.editorLabel || blockLabel(locate(history.document.blocks, target.parentId)?.block) : 'Seite';
     $('#insert-hint').firstChild.textContent = `Einfügen in ${name}. Wähle jetzt ein Element. `;
     $('#library-search').focus({ preventScroll: true });
-    $('#library-search').scrollIntoView({ block: 'nearest' });
   }
 }
 
@@ -994,10 +1110,10 @@ function buildLibrary() {
         button.type = 'button'; button.draggable = true;
         button.dataset.add = type;
         if (columns) button.dataset.row = String(columns);
-        const name = columns ? `${labels[type]}, ${columns} Spalten` : labels[type];
+        const name = columns ? `${columns} Spalten` : labels[type];
         // What is searched for: the name, the internal type and the group it sits in. Someone
         // looking for "slider" should not have to know it is filed under "Gruppen".
-        button.dataset.search = `${name} ${type} ${category.name}`.toLocaleLowerCase('de');
+        button.dataset.search = `${name} ${columns ? labels[type] + ' ' : ''}${type} ${category.name}`.toLocaleLowerCase('de');
         const picture = document.createElement('span');
         picture.className = 'library-preview';
         // Drawn, not written: the shapes come from this editor and carry no untrusted text.
@@ -1023,9 +1139,10 @@ function updateLibrary() {
   for (const button of $('#library').querySelectorAll('button')) {
     const type = button.dataset.add;
     if (!ready || busy) { button.disabled = true; button.removeAttribute('title'); continue; }
-    const target = pendingInsert
+    // A section always has a place - on the page, after the area the insert point sits in.
+    const target = pendingInsert && type !== 'section'
       ? (dropList(history.document, pendingInsert.parentId, { type }) ? pendingInsert : null)
-      : insertionTarget(history.document, selected, type);
+      : insertionTarget(history.document, pendingInsert?.parentId ?? selected, type);
     button.disabled = !target;
     if (!target) {
       button.title = locate(history.document.blocks, selected)?.block.type === 'accordion'
@@ -1070,13 +1187,22 @@ $('#library').addEventListener('click', event => {
   }
   addElement(button.dataset.add);
 });
-$('#cancel-insert').addEventListener('click', () => setPendingInsert(null));
-$('#add-root-section').addEventListener('click', () => {
+$('#cancel-insert').addEventListener('click', () => { setPendingInsert(null); if (selected) setView('element'); });
+// The tabs at the top of the sidebar. "Seite" also drops the selection: its settings are what
+// the page shows when nothing is chosen.
+for (const tab of document.querySelectorAll('.sidebar-nav [role=tab]')) tab.addEventListener('click', () => {
   if (busy || !history) return;
-  stopInlineEdit();
-  setPendingInsert(null);
-  selected = history.change(doc => insertBlock(doc, 'section', selected));
-  propertyPanel = 'content'; changed();
+  if (tab.dataset.view === 'page') { setView('page'); choose(null); return; }
+  setView(tab.dataset.view);
+});
+$('#go-parent').addEventListener('click', () => actions.parent(selected));
+$('#close-element').addEventListener('click', () => choose(null));
+// The plus next to the name: into a container, otherwise behind the element.
+$('#add-here').addEventListener('click', () => {
+  const item = locate(history.document.blocks, selected);
+  if (!item || busy) return;
+  if (isContainer(item.block) && item.block.type !== 'accordion') beginContainerInsert(item.block.id);
+  else setPendingInsert({ parentId: item.parent?.id ?? null, index: item.index + 1 });
 });
 $('#presets').addEventListener('click', event => {
   const name = event.target.closest('[data-preset]')?.dataset.preset;
@@ -1086,15 +1212,15 @@ $('#presets').addEventListener('click', event => {
 $('#structure').addEventListener('click', event => {
   const toggle = event.target.closest('[data-toggle]')?.dataset.toggle;
   if (toggle) { collapsed.has(toggle) ? collapsed.delete(toggle) : collapsed.add(toggle); renderTree(); $(`[data-toggle="${toggle}"]`)?.focus({ preventScroll: true }); return; }
+  const edit = event.target.closest('[data-edit-block]')?.dataset.editBlock;
+  if (edit) { setView('element'); choose(edit); return; }
   const id = event.target.closest('[data-block-id]')?.dataset.blockId; if (id) choose(id);
 });
-$('#tree-search').addEventListener('input', renderTree);
-$('#toggle-library').addEventListener('click', () => {
-  const hidden = !$('#toolbox').hidden; $('#toolbox').hidden = hidden;
-  $('#toggle-library').setAttribute('aria-expanded', String(!hidden));
-  $('#toggle-library').setAttribute('aria-label', `Werkzeugkasten ${hidden ? 'öffnen' : 'einklappen'}`);
-  $('#toggle-library').textContent = hidden ? '+' : '−';
+$('#structure').addEventListener('dblclick', event => {
+  const id = event.target.closest('[data-block-id]')?.dataset.blockId;
+  if (id && !busy) { setView('element'); choose(id); }
 });
+$('#tree-search').addEventListener('input', renderTree);
 $('#expand-all').addEventListener('click', () => { collapsed.clear(); renderTree(); });
 $('#collapse-all').addEventListener('click', () => {
   const visit = blocks => blocks.forEach(block => { if (block.children?.length) { collapsed.add(block.id); visit(block.children); } });
@@ -1145,6 +1271,53 @@ const actions = {
   parent: id => choose(locate(history.document.blocks, id)?.parent?.id ?? null),
 };
 
+// ---------------------------------------------------------------------------------------------
+// The context menu of the preview. Lives in the editor document, so it is drawn at full size
+// above a scaled preview; the frame coordinates are converted once, here.
+// ---------------------------------------------------------------------------------------------
+function openContextMenu(id, frameX, frameY) {
+  const item = locate(history.document.blocks, id);
+  if (!item) return;
+  const menu = $('#context-menu');
+  const label = blockLabel(item.block);
+  const sibling = dropList(history.document, item.parent?.id ?? null, item.block);
+  const entries = [
+    { text: `${label} bearbeiten`, run: () => { setView('element'); choose(id, false); } },
+    isContainer(item.block) && item.block.type !== 'accordion' ? { text: 'Element hinein', run: () => beginContainerInsert(id) } : null,
+    sibling ? { text: 'Element davor', run: () => setPendingInsert({ parentId: item.parent?.id ?? null, index: item.index }) } : null,
+    sibling ? { text: 'Element dahinter', run: () => setPendingInsert({ parentId: item.parent?.id ?? null, index: item.index + 1 }) } : null,
+    { text: 'Duplizieren', run: () => actions.duplicate(id) },
+    item.index > 0 ? { text: 'Nach oben', run: () => actions.move(id, -1) } : null,
+    item.index < item.siblings.length - 1 ? { text: 'Nach unten', run: () => actions.move(id, 1) } : null,
+    item.parent ? { text: `Übergeordnet: ${blockLabel(item.parent)}`, run: () => actions.parent(id) } : null,
+    { text: 'Löschen', danger: true, run: () => actions.delete(id) },
+  ].filter(Boolean);
+  menu.replaceChildren(...entries.map(entry => {
+    const button = document.createElement('button'); button.type = 'button'; button.setAttribute('role', 'menuitem');
+    button.textContent = entry.text; if (entry.danger) button.className = 'danger-text';
+    button.addEventListener('click', () => { closeContextMenu(); entry.run(); });
+    return button;
+  }));
+  const frame = $('#preview').getBoundingClientRect();
+  menu.hidden = false;
+  const x = frame.left + frameX * previewScale, y = frame.top + frameY * previewScale;
+  menu.style.left = `${Math.min(x, window.innerWidth - menu.offsetWidth - 8)}px`;
+  menu.style.top = `${Math.min(y, window.innerHeight - menu.offsetHeight - 8)}px`;
+  menu.querySelector('button')?.focus({ preventScroll: true });
+}
+function closeContextMenu() { $('#context-menu').hidden = true; }
+document.addEventListener('mousedown', event => { if (event.button === 0 && !event.target.closest('#context-menu')) closeContextMenu(); });
+window.addEventListener('blur', closeContextMenu);
+window.addEventListener('resize', closeContextMenu);
+$('.canvas-scroll').addEventListener('scroll', closeContextMenu, { passive: true });
+$('#context-menu').addEventListener('keydown', event => {
+  const items = [...event.currentTarget.querySelectorAll('button')];
+  const index = items.indexOf(document.activeElement);
+  if (event.key === 'ArrowDown') { event.preventDefault(); items[(index + 1) % items.length]?.focus(); }
+  if (event.key === 'ArrowUp') { event.preventDefault(); items[(index - 1 + items.length) % items.length]?.focus(); }
+  if (event.key === 'Escape') { event.stopPropagation(); closeContextMenu(); $('.canvas-scroll').focus({ preventScroll: true }); }
+});
+
 $('#duplicate').addEventListener('click', () => actions.duplicate(selected));
 $('#delete').addEventListener('click', () => actions.delete(selected));
 for (const [id, direction] of [['move-up', -1], ['move-down', 1]]) $(`#${id}`).addEventListener('click', () => actions.move(selected, direction));
@@ -1204,7 +1377,6 @@ $('#library').addEventListener('dragstart', event => {
 });
 $('#library').addEventListener('dragend', () => overlay.endDrag());
 
-$('#select-page').addEventListener('click', () => choose(null));
 $('#undo').addEventListener('click', () => { history.undo(); changed(); });
 $('#redo').addEventListener('click', () => { history.redo(); changed(); });
 $('#save').addEventListener('click', () => save());
@@ -1255,66 +1427,37 @@ function setViewport(name) {
 }
 document.querySelectorAll('[data-viewport]').forEach(button => button.addEventListener('click', () => setViewport(button.dataset.viewport)));
 new ResizeObserver(resizePreview).observe($('.canvas-scroll'));
-// Panel sizes are workspace preferences, independent of document history and publication.
-const panelSizes = { left: 280, right: 320 };
-try {
-  const saved = JSON.parse(localStorage.getItem('kantsites.panel-widths'));
-  for (const side of ['left', 'right']) if (Number.isFinite(saved?.[side])) panelSizes[side] = saved[side];
-} catch { /* Storage can be unavailable; resizing still works for this session. */ }
-const panelMinimum = { left: 240, right: 280 };
-function layoutPanels() {
-  let left = Math.max(240, Math.min(560, panelSizes.left));
-  let right = Math.max(280, Math.min(560, panelSizes.right));
-  const budget = Math.max(520, $('.editor-layout').clientWidth - 292);
-  const excess = Math.max(0, left + right - budget);
-  const spare = left + right - 520;
-  if (excess && spare) { left -= excess * (left - 240) / spare; right -= excess * (right - 280) / spare; }
-  for (const [side, size] of Object.entries({ left, right })) {
-    root.style.setProperty(`--panel-${side}`, `${size}px`);
-    const handle = $(`[data-resize="${side}"]`);
-    handle.setAttribute('aria-valuenow', String(Math.round(size)));
-    handle.setAttribute('aria-valuemax', String(Math.floor(Math.min(560, budget - (side === 'left' ? right : left)))));
-    handle.setAttribute('aria-valuetext', `${Math.round(size)} Pixel`);
+/** Whether a key press belongs to a field rather than to the page. */
+const inField = target => ['INPUT', 'TEXTAREA', 'SELECT'].includes(target?.tagName) || target?.isContentEditable;
+// One handler for the editor window and for the preview document: a key pressed while the
+// preview has the focus - after a click into it - must mean the same thing.
+function onKey(event) {
+  if (!history || busy) return;
+  const key = event.key.toLowerCase();
+  if (event.ctrlKey || event.metaKey) {
+    if (key === 's') { event.preventDefault(); save(); }
+    // Keep native text-field undo intact; the toolbar always undoes the complete document.
+    if (inField(event.target)) return;
+    if (key === 'z' || key === 'y') { event.preventDefault(); (event.shiftKey || key === 'y') ? history.redo() : history.undo(); changed(); }
+    return;
+  }
+  if (event.key === 'Escape') {
+    if (!$('#context-menu').hidden) { closeContextMenu(); return; }
+    if (document.querySelector('dialog[open]') || inlineEdit) return;
+    if (pendingInsert) { setPendingInsert(null); if (selected) setView('element'); return; }
+    if (selected) { choose(null); $('.canvas-scroll').focus({ preventScroll: true }); }
+    return;
+  }
+  // Delete removes the selected element - but never while a field or the preview text is
+  // being typed in, and never something the sidebar buttons would refuse.
+  if ((event.key === 'Delete' || event.key === 'Backspace') && selected && !inField(event.target) && !inlineEdit && !$('#delete').disabled) {
+    event.preventDefault(); actions.delete(selected);
   }
 }
-const persistPanels = () => { try { localStorage.setItem('kantsites.panel-widths', JSON.stringify(panelSizes)); } catch {} };
-for (const handle of document.querySelectorAll('[data-resize]')) {
-  const side = handle.dataset.resize, direction = side === 'left' ? 1 : -1;
-  let drag = null;
-  const setSize = value => {
-    panelSizes[side] = Math.max(panelMinimum[side], Math.min(Number(handle.getAttribute('aria-valuemax')), value));
-    layoutPanels();
-  };
-  handle.addEventListener('pointerdown', event => {
-    if (event.button !== 0) return;
-    event.preventDefault(); handle.focus();
-    drag = { x: event.clientX, size: Number(handle.getAttribute('aria-valuenow')) };
-    handle.setPointerCapture(event.pointerId); root.classList.add('resizing-panels');
-  });
-  handle.addEventListener('pointermove', event => { if (drag) setSize(drag.size + direction * (event.clientX - drag.x)); });
-  const stop = () => { drag = null; root.classList.remove('resizing-panels'); persistPanels(); };
-  handle.addEventListener('pointerup', stop);
-  handle.addEventListener('pointercancel', stop);
-  handle.addEventListener('lostpointercapture', stop);
-  handle.addEventListener('dblclick', () => { panelSizes[side] = side === 'left' ? 280 : 320; layoutPanels(); persistPanels(); });
-  handle.addEventListener('keydown', event => {
-    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
-    event.preventDefault();
-    const current = Number(handle.getAttribute('aria-valuenow'));
-    setSize(event.key === 'Home' ? panelMinimum[side] : event.key === 'End' ? 560 : current + (event.key === 'ArrowRight' ? 1 : -1) * direction * (event.shiftKey ? 40 : 10));
-    persistPanels();
-  });
-}
-new ResizeObserver(layoutPanels).observe($('.editor-layout'));
-layoutPanels();
-window.addEventListener('keydown', event => {
-  if (!history || busy || !(event.ctrlKey || event.metaKey)) return;
-  const key = event.key.toLowerCase();
-  if (key === 's') { event.preventDefault(); save(); }
-  // Keep native text-field undo intact; the toolbar always undoes the complete document.
-  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(event.target.tagName)) return;
-  if (key === 'z' || key === 'y') { event.preventDefault(); (event.shiftKey || key === 'y') ? history.redo() : history.undo(); changed(); }
-});
+window.addEventListener('keydown', onKey);
 window.addEventListener('beforeunload', event => { if (history?.dirty || busy) { event.preventDefault(); event.returnValue = ''; } });
 buildLibrary();
+// The workspace is a fixed frame; a scroll position restored from an earlier visit would push
+// the header out of view.
+window.scrollTo(0, 0);
 load();

public/assets/enhancements.css

@@ -1,11 +1,11 @@
 .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)}
 @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-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. */
-@media (prefers-reduced-motion: no-preference) {
+/* 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 }
@@ -14,7 +14,6 @@
     .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.
 
@@ -22,7 +21,6 @@
    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. */
-@media (prefers-reduced-motion: no-preference) {
     .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) }
@@ -44,4 +42,15 @@
     /* 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/library-previews.js

@@ -38,6 +38,7 @@ export const PREVIEWS = {
   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(''),

public/assets/menu-editor.js

@@ -7,7 +7,7 @@ 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' };
+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 = '';

public/assets/motion.js

@@ -1,35 +1,96 @@
-/** Visible content is the baseline. Enhance only when it enters the viewport. */
+/**
+ * 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: .2 }, rise: { transform: 'translateY(28px)' }, sink: { transform: 'translateY(-28px)' },
-    left: { transform: 'translateX(-36px)' }, right: { transform: 'translateX(36px)' },
-    zoom: { transform: 'scale(.92)' }, flip: { transform: 'perspective(800px) rotateX(-16deg)' }, blur: { filter: 'blur(6px)' },
+    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 nodes = [...doc.querySelectorAll('[class*="fx-entrance-"]')].filter(node => Object.keys(start).some(name => node.classList.contains(`fx-entrance-${name}`)));
+  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) || preference.matches) return;
+    if (seen.has(node) || reduced()) return;
     seen.add(node);
-    const name = Object.keys(start).find(name => node.classList.contains(`fx-entrance-${name}`));
+    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;
-    // Fade itself is optional; direction, zoom and flip keep text at full contrast.
+    // 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;
-    const animation = node.animate([first, finish], { duration: 650, delay, easing: 'cubic-bezier(.2,.7,.2,1)', fill: 'none' });
-    animations.add(animation); animation.finished.then(() => animations.delete(animation), () => animations.delete(animation));
+    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); }
-  }, { threshold: 0, rootMargin: '0px 0px -24px 0px' });
-  if (!preference.matches) nodes.forEach(node => observer.observe(node));
-  const reduce = () => { if (preference.matches) { observer.disconnect(); animations.forEach(animation => animation.cancel()); } };
-  preference.addEventListener('change', reduce);
-  return () => { observer.disconnect(); animations.forEach(animation => animation.cancel()); preference.removeEventListener('change', reduce); };
+    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/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

@@ -6,7 +6,11 @@ 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: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 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)}.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: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}
+*{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: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}.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. */
@@ -41,7 +45,11 @@ p{hyphens:auto}
 /* Blocks introduced with schema v6. No JavaScript: the accordion is details/summary. */
 .block-icon{flex-shrink:0;display:block}
 .block-iconcard{display:grid;gap:12px;padding:26px;border:1px solid currentColor;border-radius:12px}
-.block-iconcard + .block-iconcard,.block-quote + .block-quote,.block-cta + .block-cta,.block-iconcard + .block-quote,.block-quote + .block-iconcard{margin-top:18px}.kant .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}
@@ -56,7 +64,7 @@ p{hyphens:auto}
 .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}
-.kant .block-form button[type=submit]{background:var(--accent);color:#fff;border-color:var(--accent)}.kant .block-form button[type=submit]:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}.kant .block-cta .button{background:var(--accent);color:#fff;border-color:var(--accent)}.kant .block-cta .button:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}.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 .button{background:var(--accent);color:#fff;border-color:var(--accent)}.kant .block-cta .button:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}.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}
@@ -87,6 +95,7 @@ p{hyphens:auto}
 
 /* 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}
 .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}
@@ -169,6 +178,9 @@ body.consent-open{padding-bottom:260px}
 /* 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}
@@ -192,10 +204,34 @@ body.consent-open{padding-bottom:260px}
 .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,currentColor 30%,transparent);margin:0 6px;cursor:pointer}.slider-dots>*::scroll-marker:target-current{background:var(--accent)}.slider-dots::scroll-marker-group{display:flex;justify-content:center;align-items:center;padding:14px 0 2px}}
+@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}
-.slider-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-height:48px;margin-top:8px;padding:4px;font:14px/1.4 system-ui,sans-serif}.slider-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:8px 12px;border:1px solid #b2c2b8;border-radius:7px;background:#fff;color:#193c2d;cursor:pointer;font:inherit}.slider-controls button:focus-visible{outline:3px solid #b55b12;outline-offset:3px}.slider-controls button:hover{background:#e4efe7}.slider-controls button:disabled{opacity:.6;cursor:default}.slider-position{font-variant-numeric:tabular-nums;min-width:44px;text-align:center}.slider-control-dots{display:flex;flex-wrap:wrap;gap:3px}.slider-control-dots button{min-width:30px;padding:5px;border:0;background:transparent;color:inherit;opacity:.5}.slider-control-dots button[aria-pressed=true]{opacity:1;outline:1px solid currentColor;outline-offset:-5px}.slider-controls[hidden]{display:none}
-@media(max-width:650px){.slider-controls button{min-height:44px;min-width:44px}}
+/* 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:600px){.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)}
@@ -344,6 +380,16 @@ body.consent-open{padding-bottom:260px}
 }
 .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}
+.site-header .menu-burger[open]>summary{border-radius:8px}
+.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);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}
@@ -362,12 +408,11 @@ body.consent-open{padding-bottom:260px}
 @media (max-width:767px){.scroll-top{bottom:16px;right:16px}.scroll-top-links{left:16px;right:auto}}
 /* Solange der Einwilligungsdialog unten steht, würde der Knopf darauf liegen. */
 body.consent-open .scroll-top{display:none}
-@supports (animation-timeline: scroll()){
-    @media (prefers-reduced-motion: no-preference){
-        .scroll-top{animation:kant-scroll-top linear both;animation-timeline:scroll(root);animation-range:var(--kant-top-after,400px) calc(var(--kant-top-after,400px) + 160px)}
-        @keyframes kant-scroll-top{from{opacity:0;visibility:hidden;transform:translateY(10px)}to{opacity:1;visibility:visible;transform: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. */
@@ -393,3 +438,7 @@ body.consent-open .scroll-top{display:none}
 }
 
 .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}}

public/assets/slider.js

@@ -8,8 +8,10 @@ export function initSliders(doc = document) {
     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 && !preference.matches, hover = false, visible = false, timer;
+    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');
@@ -26,9 +28,25 @@ export function initSliders(doc = document) {
       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;
-      slider.scrollTo({ left: Math.max(0, Math.min(slider.scrollWidth - slider.clientWidth, left(slides[index]))), behavior: preference.matches ? 'instant' : 'smooth' });
+      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());
@@ -38,9 +56,9 @@ export function initSliders(doc = document) {
       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)));
+    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)));
+    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);
@@ -49,6 +67,7 @@ export function initSliders(doc = document) {
       });
     }
     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;
@@ -56,17 +75,22 @@ export function initSliders(doc = document) {
       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.setAttribute('aria-label', playing ? 'Automatische Wiedergabe pausieren' : 'Automatische Wiedergabe starten');
-        play.disabled = preference.matches; play.title = preference.matches ? 'Automatik ist bei reduzierter Bewegung deaktiviert.' : '';
+        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 && !preference.matches) timer = setTimeout(() => { if (playing && !hover && visible && !doc.hidden) step(1); schedule(); }, seconds * 1000);
+      if (playing && !reduced()) timer = setTimeout(() => { if (playing && !hover && visible && !doc.hidden) step(1); schedule(); }, seconds * 1000);
     };
     const pause = () => { playing = false; update(); clearTimeout(timer); };
-    slider.after(controls); slider.classList.add('slider-controlled'); update();
+    // 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 });
@@ -78,9 +102,9 @@ export function initSliders(doc = document) {
     }, { 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 (preference.matches) pause(); update(); }, { signal });
+    preference.addEventListener('change', () => { if (reduced()) pause(); update(); }, { signal });
     schedule();
-    cleanups.push(() => { clearTimeout(timer); events.abort(); observer.disconnect(); resize.disconnect(); controls.remove(); slider.classList.remove('slider-controlled'); delete slider.dataset.enhanced; });
+    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());
 }

scripts/admin-quality-check.mjs

@@ -72,11 +72,11 @@ try {
   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: 'Automatische Wiedergabe starten' }).click();
+  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: 'Automatische Wiedergabe starten' }).isDisabled(), true);
+  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();

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/button-check.mjs

@@ -16,6 +16,10 @@ const server = spawn(php, ['-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`,
 const report = 'reports/buttons'; await mkdir(report, { recursive: true });
 let browser, page;
 const checks = [], errors = [];
+const buttonStyle = node => {
+  const style = getComputedStyle(node);
+  return Object.fromEntries(['backgroundColor', 'color', 'borderRadius', 'borderColor', 'borderWidth', 'borderStyle', 'paddingTop', 'paddingRight', 'fontFamily', 'fontSize', 'fontWeight', 'letterSpacing', 'textTransform', 'lineHeight', 'textAlign'].map(key => [key, style[key]]));
+};
 
 try {
   for (let attempt = 0; attempt < 60; attempt++) {
@@ -83,12 +87,49 @@ try {
   const plain = await browser.newContext({ javaScriptEnabled: false }); const publicPage = await plain.newPage();
   for (const [width, radius, transparent] of [[1600, '8px', false], [900, '0px', true], [390, '999px', false]]) {
     await publicPage.setViewportSize({ width, height: 900 }); await publicPage.goto(origin);
+    const necessaryCookies = publicPage.getByRole('button', { name: 'Nur notwendige', exact: true });
+    if (await necessaryCookies.count()) await necessaryCookies.click();
     const values = await publicPage.locator('#qa-button').evaluate(el => { const s=getComputedStyle(el);return { radius:s.borderRadius, bg:s.backgroundColor, font:s.fontSize }; });
     assert.equal(values.radius, radius); assert.equal(values.bg === 'rgba(0, 0, 0, 0)', transparent); assert.equal(values.font, '17px');
     assert.equal(await publicPage.locator('#qa-button-default').evaluate(el => getComputedStyle(el).fontSize), '18px');
+    const submit = publicPage.locator('.block-form button[type=submit]').first();
+    const standard = publicPage.locator('#qa-button-default');
+    assert.deepEqual(await submit.evaluate(buttonStyle), await standard.evaluate(buttonStyle), 'Form submit uses global shape, appearance, size, typography and colors');
+    assert.ok(await submit.evaluate(node => node.getBoundingClientRect().width < node.form.getBoundingClientRect().width), 'Submit keeps natural button width');
+    await submit.hover(); await publicPage.waitForTimeout(350);
+    const hoverStyle = await submit.evaluate(buttonStyle);
+    await standard.hover(); await publicPage.waitForTimeout(350);
+    assert.deepEqual(hoverStyle, await standard.evaluate(buttonStyle), 'Submit inherits the global hover colors');
+    await submit.focus();
+    assert.equal(await submit.evaluate(node => getComputedStyle(node).outlineStyle), 'solid', 'Submit has a keyboard focus indicator');
+    await submit.screenshot({ path: `${report}/submit-${width}.png` });
     await publicPage.locator('#qa-buttons-section').screenshot({ path: `${report}/public-${width}.png` });
   }
-  await plain.close(); checks.push('published global defaults and local responsive variants without JavaScript');
+  await page.goto(origin + '/admin/theme');
+  await page.locator('#buttons-shape').selectOption('rounded');
+  await page.locator('#buttons-appearance').selectOption('solid');
+  await page.locator('#buttons-size').selectOption('large');
+  await page.locator('#buttons-fontSize').fill('20');
+  for (const [key, hex] of [['backgroundColor', '#124b36'], ['color', '#ffffff'], ['hoverBackgroundColor', '#092c20'], ['hoverColor', '#fff4cc']]) {
+    await page.locator(`#buttons-${key}`).click();
+    await page.locator(`#buttons-${key}-hex`).fill(hex);
+    await page.locator(`#buttons-${key}-hex`).press('Enter');
+    await page.keyboard.press('Escape');
+  }
+  await page.getByRole('button', { name: 'Design speichern', exact: true }).click();
+  await publicPage.goto(origin);
+  const updatedSubmit = publicPage.locator('.block-form button[type=submit]').first();
+  const updatedDefault = publicPage.locator('#qa-button-default');
+  assert.deepEqual(await updatedSubmit.evaluate(buttonStyle), await updatedDefault.evaluate(buttonStyle), 'A later change to solid global defaults updates existing forms');
+  assert.equal(await updatedSubmit.evaluate(el => getComputedStyle(el).backgroundColor), 'rgb(18, 75, 54)');
+  await updatedSubmit.hover(); await publicPage.waitForTimeout(350);
+  const updatedHover = await updatedSubmit.evaluate(buttonStyle);
+  await updatedDefault.hover(); await publicPage.waitForTimeout(350);
+  assert.deepEqual(updatedHover, await updatedDefault.evaluate(buttonStyle), 'Custom global hover colors update existing forms');
+  await publicPage.setViewportSize({ width: 390, height: 1600 });
+  await updatedSubmit.scrollIntoViewIfNeeded();
+  await publicPage.locator('.block-form').first().screenshot({ path: `${report}/form-standard-button.png` });
+  await plain.close(); checks.push('published global defaults, form submit including hover/focus/natural width, solid and outline theme changes, and local responsive variants without JavaScript');
   assert.deepEqual(errors, []);
   await writeFile(`${report}/result.json`, JSON.stringify({ checks, passed: true }, null, 2));
   console.log('Button checks passed:', checks.length, 'groups.');

scripts/editor-check.mjs

@@ -55,6 +55,10 @@ try {
     assert.deepEqual(result.violations.map(v => ({ id: v.id, nodes: v.nodes.map(n => n.target) })), [], name);
     checks.push({ name, violations: 0 });
   };
+  const tab = name => page.getByRole('tab', { name, exact: true }).click();
+  const treeSelect = async id => { await tab('Struktur'); await page.locator(`#structure [data-block-id="${id}"]`).click(); await page.locator(`#structure [data-edit-block="${id}"]`).click(); };
+  const treeToggle = async id => { await tab('Struktur'); await page.locator(`#structure [data-toggle="${id}"]`).click(); };
+  const addFromLibrary = async selector => { await tab('Elemente'); await page.locator(`#library ${selector}`).click(); };
   await page.goto(origin + '/admin');
   assert.equal(new URL(page.url()).pathname, '/admin/login');
   await axe('login');
@@ -104,31 +108,22 @@ try {
   const frame = page.frameLocator('#preview');
   await frame.locator('h1').waitFor();
   await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
-  // Flexible panels, contextual fields and a root insertion from a deeply selected element.
-  const leftHandle = page.locator('[data-resize="left"]'), rightHandle = page.locator('[data-resize="right"]');
-  await leftHandle.focus(); await page.keyboard.press('ArrowRight');
-  assert.equal(await leftHandle.getAttribute('aria-valuenow'), '290');
-  const rightBox = await rightHandle.boundingBox();
-  await page.mouse.move(rightBox.x + 3, rightBox.y + 100); await page.mouse.down();
-  await page.mouse.move(rightBox.x - 57, rightBox.y + 100, { steps: 6 }); await page.mouse.up();
-  assert.equal(await rightHandle.getAttribute('aria-valuenow'), '380');
+  // One sidebar, contextual fields and a root insertion from a deeply selected element.
   await page.reload();
   await frame.locator('h1').waitFor();
   await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
-  assert.equal(await leftHandle.getAttribute('aria-valuenow'), '290');
-  assert.equal(await rightHandle.getAttribute('aria-valuenow'), '380');
   for (const width of [1920, 1100, 850, 390]) {
     await page.setViewportSize({ width, height: 1100 });
     await page.waitForTimeout(100);
     assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth), true, `workspace fits ${width}`);
-    for (const selector of ['.left-panel', '.right-panel', '.library-buttons']) {
+    for (const selector of ['.sidebar', '.sidebar-body', '.library-buttons']) {
       assert.equal(await page.locator(selector).first().evaluate(el => el.scrollWidth <= el.clientWidth + 1), true, `${selector} fits ${width}`);
     }
   }
   await page.setViewportSize({ width: 1600, height: 1100 });
   await frame.locator('h1').click();
   const sectionCount = await frame.locator('main > .block-section').count();
-  await page.locator('#add-root-section').click();
+  await addFromLibrary('[data-add="section"]');
   await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count + 1, sectionCount);
   await page.locator('#undo').click();
   await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count, sectionCount);
@@ -136,7 +131,7 @@ try {
   await page.waitForFunction(count => document.querySelector('#preview').contentDocument.querySelectorAll('main > .block-section').length === count + 1, sectionCount);
   await page.locator('#undo').click();
   await frame.locator('h1').click();
-  await page.locator('#library [data-add="image"]').click();
+  await addFromLibrary('[data-add="image"]');
   await page.locator('[data-panel="design"]').click();
   assert.equal(await page.locator('#style-fontSize').count(), 0);
   assert.equal(await page.locator('#style-objectFit').isVisible(), true);
@@ -169,17 +164,15 @@ try {
   await page.locator('#undo').click();
   await page.locator('#undo').click();
   await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
-  await page.locator('.right-panel').evaluate(el => el.scrollTop = 0);
-  await page.locator('.left-panel > .panel-section').first().evaluate(el => el.scrollTop = 0);
+  await page.locator('.sidebar-body').evaluate(el => el.scrollTop = 0);
   await page.screenshot({ path: 'reports/editor/flexible-workspace.png', fullPage: true });
-  await leftHandle.dblclick(); await rightHandle.dblclick();
   await page.locator('[data-panel="content"]').click();
-  checks.push({ name: 'resizable persistent panels, root sections, contextual image/text properties and full text width', passed: true });
+  checks.push({ name: 'one sidebar, root sections, contextual image/text properties and full text width', passed: true });
 
   // A layout starts empty: it must be visible, reachable and editable before it has any text.
   const previewReady = () => page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
   await frame.locator('h1').click();
-  await page.locator('#add-root-section').click();
+  await addFromLibrary('[data-add="section"]');
   await previewReady();
   const emptySection = frame.locator('main > .editor-empty-container');
   await emptySection.waitFor();
@@ -197,10 +190,11 @@ try {
   assert.equal(await page.locator('#library-search').evaluate(el => el === document.activeElement), true);
   assert.match(await page.locator('#insert-hint').innerText(), /Spalte 2 von 2/);
   await page.locator('#library-search').fill('Text');
-  await page.locator('#library [data-add="text"]').click();
+  await addFromLibrary('[data-add="text"]');
   await frame.locator(`#${secondColumnId} .block-text`).waitFor();
   await previewReady();
   assert.equal(await frame.locator(`#${firstColumnId} .editor-empty`).count(), 1, 'unfilled sibling stays visible');
+  await tab('Elemente');
   await page.locator('#library-search').fill('');
   const dragSource = page.locator('#library [data-add="button"]');
   await frame.locator(`#${firstColumnId} .editor-empty`).scrollIntoViewIfNeeded();
@@ -249,6 +243,7 @@ try {
     const destination = frame.locator(`#${secondColumnId}`);
     await destination.scrollIntoViewIfNeeded();
     const box = await destination.boundingBox();
+    await tab('Struktur');
     await page.locator(`#structure [data-block-id="${firstColumnId}"]`).dragTo(destination, {
       targetPosition: device === 'Desktop' ? { x: box.width - 8, y: 8 } : { x: 8, y: box.height - 8 },
     });
@@ -268,7 +263,7 @@ try {
   assert.ok(publishedEmpty.includes(newSectionId));
   assert.equal(/editor-empty|data-editor-target|preview-containers|preview\.css|Inhalt hinzufügen/.test(publishedEmpty), false, 'public output has no editor aids');
   // Restore the fixture through the same editor actions; subsequent tests retain their baseline.
-  await page.locator(`#structure [data-block-id="${newSectionId}"]`).click();
+  await treeSelect(newSectionId);
   await page.locator('#delete').click();
   await page.locator('#save').click();
   await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
@@ -306,7 +301,7 @@ try {
   const headingId = await inPreview('h1');
   await page.getByRole('button', { name: 'Element dahinter einfügen', exact: true }).click();
   await page.locator('#insert-hint').waitFor({ state: 'visible' });
-  await page.locator('#library button[data-add="text"]').click();
+  await addFromLibrary('button[data-add="text"]');
   assert.equal(await page.locator('#properties-title').innerText(), 'Text');
   assert.equal(await page.locator('#insert-hint').isVisible(), false);
   await page.waitForFunction(id => {
@@ -318,6 +313,7 @@ try {
   // Ziehen aus dem Werkzeugkasten auf die Seite.
   await frame.locator('h1').waitFor();
   const beforeButtons = await page.locator('#structure [data-block-id]').count();
+  await tab('Elemente');
   await page.locator('#library button[data-add="button"]').dragTo(frame.locator('h1'), { targetPosition: { x: 12, y: 4 } });
   await page.waitForFunction(count => document.querySelectorAll('#structure [data-block-id]').length === count + 1, beforeButtons);
   assert.equal(await page.locator('#properties-title').innerText(), 'Button');
@@ -351,15 +347,16 @@ try {
   // In einer Sektion wird die Zeile moeglich, die Spalte noch nicht. Die Sektion kommt aus dem
   // Strukturbaum, nicht aus der Vorschau: dort steht auch der Kopfbereich, und der gehoert
   // einem anderen Dokument.
+  await tab('Struktur');
   await page.locator('#structure .tree-item').filter({ hasText: 'Sektion' }).first().click();
-  assert.equal(await page.locator('#properties-title').innerText(), 'Sektion');
+  assert.equal(await page.locator('#properties-title').textContent(), 'Sektion');
   assert.equal((await rowState()).disabled, false, 'Zeile in der Sektion moeglich');
   assert.equal((await toolboxState('column')).disabled, true, 'Spalte in der Sektion weiterhin gesperrt');
 
   // Und in der Zeile wird die Spalte moeglich.
   const columnsBefore = await page.locator('#structure .tree-item').filter({ hasText: 'Spalte' }).count();
-  await page.locator('#library button[data-row="3"]').click();
-  assert.equal(await page.locator('#properties-title').innerText(), 'Zeile');
+  await addFromLibrary('button[data-row="3"]');
+  assert.equal(await page.locator('#properties-title').textContent(), 'Zeile');
   assert.equal((await toolboxState('column')).disabled, false, 'Spalte in der Zeile moeglich');
   assert.match((await toolboxState('column')).title, /Wird in Zeile eingefügt/);
   // Die Zeile bringt ihre drei Spalten mit. Die Testseite hat schon welche, also zaehlt die
@@ -367,6 +364,7 @@ try {
   assert.equal(await page.locator('#structure .tree-item').filter({ hasText: 'Spalte' }).count(), columnsBefore + 3);
   await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
   // Jeder Eintrag traegt eine Zeichnung statt eines Schriftzeichens.
+  await tab('Elemente');
   const mitBild = await page.locator('#library button .library-preview svg').count();
   const knoepfe = await page.locator('#library button').count();
   assert.equal(mitBild, knoepfe, `alle ${knoepfe} Eintraege haben ein Vorschaubild`);
@@ -431,6 +429,7 @@ try {
   checks.push({ name: 'preview never shows unstyled content', passed: true });
   console.log('Preview edits and history passed.');
 
+  await tab('Struktur');
   await page.getByRole('button', { name: 'Einklappen', exact: true }).click();
   assert.equal(await page.locator('#structure .tree-item').count(), 3);
   await page.getByLabel('Element auf der Seite suchen', { exact: true }).fill('Meine bearbeitete');
@@ -440,6 +439,8 @@ try {
   await page.getByLabel('Element auf der Seite suchen', { exact: true }).fill('');
   assert.equal(await page.locator('#structure [data-block-id="headline"]').isVisible(), true);
   await page.getByRole('button', { name: 'Alle öffnen', exact: true }).click();
+  // Enter in the tree only selects; editing is the button next to the selected row.
+  await page.locator('#structure [data-edit-block="headline"]').click();
   await page.getByRole('button', { name: 'Design', exact: true }).click();
 
   const frameValue = async (selector, property, expected) => {
@@ -495,7 +496,7 @@ try {
   assert.match(await contrast.textContent(), /Kontrast \d/, 'The panel reports a contrast ratio.');
 
   // Per side spacing on the section, and a hover rule that also covers keyboard focus.
-  await page.locator('#structure [data-block-id="hero"]').click();
+  await treeSelect('hero');
   await page.getByRole('button', { name: 'Design', exact: true }).click();
   await setLength('style-padding-top', 96);
   await frameValue('#hero', 'paddingTop', '96px');
@@ -539,7 +540,7 @@ try {
   await frameValue('#hero', 'paddingTop', '640px');
 
   // Das Ziehfeld: seitwaerts ziehen aendert den Wert, und der ganze Zug ist ein Undo-Schritt.
-  await page.locator('#structure [data-block-id="headline"]').click();
+  await treeSelect('headline');
   await openGroup('Typografie');
   const scrub = page.locator('#style-fontSize');
   await scrub.scrollIntoViewIfNeeded();
@@ -558,7 +559,7 @@ try {
   // Aufraeumen: dieser Abschnitt hat den Innenabstand des Hero auf 40rem an allen Seiten
   // gebracht. Das drueckt die Spaltenbreite auf null, und alles Folgende haette unsichtbare
   // Inhalte gepruef. Zurueck auf den Zustand von vorher: 96 px oben, sonst nichts.
-  await page.locator('#structure [data-block-id="hero"]').click();
+  await treeSelect('hero');
   await page.getByRole('button', { name: 'Design', exact: true }).click();
   await page.locator('#style-padding-unit').selectOption('px');
   for (const seite of ['right', 'bottom', 'left']) await setLength(`style-padding-${seite}`, '');
@@ -587,6 +588,7 @@ try {
   });
   checks.push({ name: 'free styles: units, inheritance, single reset, palette colour, per-side spacing, hover rule', passed: true });
 
+  await tab('Elemente');
   await page.locator('[data-preset="columns"]').click();
   const presetSection = await page.locator('#structure .tree-item[aria-pressed="true"]').getAttribute('data-block-id');
   const presetRow = `#${presetSection} .block-row`;
@@ -607,12 +609,12 @@ try {
   await frame.locator(presetRow).waitFor({ state: 'detached' });
   await page.getByRole('button', { name: 'Wiederholen', exact: true }).click();
   await columnCount(2);
-  await page.locator('#structure [data-block-id="headline"]').click();
+  await treeSelect('headline');
   await page.getByRole('button', { name: 'Inhalt', exact: true }).click();
   checks.push({ name: 'keyboard tree search and collapse, responsive inheritance/reset/undo, true viewport widths, spacing and responsive section preset', passed: true });
   console.log('Responsive design, tree tools and presets passed.');
 
-  await page.locator('#library [data-add="gallery"]').click();
+  await addFromLibrary('[data-add="gallery"]');
   const galleryId = await page.locator('#structure .tree-item[aria-pressed="true"]').getAttribute('data-block-id');
   await page.getByRole('button', { name: 'Galeriebilder auswählen', exact: true }).click();
   await page.locator('#media-status').filter({ hasText: '0 Bilder' }).waitFor();
@@ -639,12 +641,12 @@ try {
   await frame.locator(`#${galleryId} img`).first().scrollIntoViewIfNeeded();
   await page.waitForFunction(id => document.querySelector('#preview').contentDocument?.querySelector(`#${id} img`)?.naturalWidth > 0, galleryId);
   const imageId = await frame.locator(`#${galleryId} figure`).first().getAttribute('id');
-  await page.locator(`#structure [data-block-id="${imageId}"]`).click();
+  await treeSelect(imageId);
   await page.getByLabel('Bildunterschrift', { exact: true }).fill('Ein Ausblick zum Durchatmen.');
   await frame.getByText('Ein Ausblick zum Durchatmen.', { exact: true }).waitFor();
   await page.getByRole('button', { name: 'Nach unten verschieben', exact: true }).click();
   await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
-  await page.locator(`#structure [data-block-id="${galleryId}"]`).click();
+  await treeSelect(galleryId);
   await page.getByRole('button', { name: 'Design', exact: true }).click();
   await openGroup('Layout');
   await page.locator('#style-gridColumns').fill('2');
@@ -661,7 +663,7 @@ try {
   await openGroup('Bewegung und Effekte');
   await page.getByLabel('Schatten', { exact: true }).selectOption('soft');
   await page.getByLabel('Hover-Effekt', { exact: true }).selectOption('lift');
-  for (const [effect, transform] of [['left', 'translateX(-36px)'], ['right', 'translateX(36px)']]) {
+  for (const [effect, transform] of [['left', 'translateX(-56px)'], ['right', 'translateX(56px)']]) {
     await page.getByLabel('Einblendung beim Erscheinen', { exact: true }).selectOption(effect);
     await frame.locator(`#${galleryId}.fx-entrance-${effect}`).waitFor();
     await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
@@ -672,19 +674,31 @@ try {
       element.animate = (frames, options) => { window.observedEntrance.push(frames); return animate(frames, options); };
       element.scrollIntoView();
     }, galleryId);
-    await page.getByRole('button', { name: 'Bewegung testen', exact: true }).click();
+    await page.getByRole('button', { name: 'Bewegung in der Vorschau abspielen', exact: true }).click();
     await page.waitForFunction(() => window.observedEntrance.length > 0);
     assert.equal(await page.evaluate(() => window.observedEntrance[0][0].transform), transform);
-    await page.getByRole('button', { name: 'Bewegung stoppen', exact: true }).click();
+    await page.getByRole('button', { name: 'Bewegung in der Vorschau stoppen', exact: true }).click();
   }
+  // Default setting: the preview plays even when the browser asks for less motion (Flatsome mode).
   await page.emulateMedia({ reducedMotion: 'reduce' });
   await page.evaluate(() => { window.observedEntrance = []; });
-  await page.getByRole('button', { name: 'Bewegung testen', exact: true }).click();
-  await page.waitForTimeout(800);
-  assert.equal(await page.evaluate(() => window.observedEntrance.length), 0, 'reduced motion suppresses entrance playback');
-  await page.getByRole('button', { name: 'Bewegung stoppen', exact: true }).click();
+  await page.getByRole('button', { name: 'Bewegung in der Vorschau abspielen', exact: true }).click();
+  await page.waitForFunction(() => window.observedEntrance.length > 0);
+  assert.equal(await page.locator('#motion-status').isVisible(), false, 'no motion note while the site ignores the preference');
+  await page.getByRole('button', { name: 'Bewegung in der Vorschau stoppen', exact: true }).click();
+  // Setting "Browservorgabe beachten", as the preview would carry it: nothing plays, the note shows.
+  await page.evaluate(() => { document.querySelector('#preview').contentDocument.documentElement.classList.add('motion-respect'); window.observedEntrance = []; });
   await page.emulateMedia({ reducedMotion: 'no-preference' });
-  checks.push({ name: 'distinct left/right entrance playback and reduced motion in the sandbox', passed: true });
+  await page.waitForTimeout(200);
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await page.locator('#motion-status').waitFor({ state: 'visible' });
+  await page.getByRole('button', { name: 'Bewegung in der Vorschau abspielen', exact: true }).click();
+  await page.waitForTimeout(800);
+  assert.equal(await page.evaluate(() => window.observedEntrance.length), 0, 'reduced motion suppresses entrance playback when respected');
+  await page.getByRole('button', { name: 'Bewegung in der Vorschau stoppen', exact: true }).click();
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
+  await page.locator('#motion-status').waitFor({ state: 'hidden' });
+  checks.push({ name: 'distinct left/right entrance playback, Flatsome-mode playback and respected reduced motion in the sandbox', passed: true });
   await page.getByLabel('Einblendung beim Erscheinen', { exact: true }).selectOption('rise');
   await frame.locator(`#${galleryId}.fx-entrance-rise`).waitFor();
   await page.getByRole('button', { name: 'Mobil', exact: true }).click();
@@ -698,7 +712,7 @@ try {
   await frameValue(`#${galleryId}`, 'animationName', 'none');
   await frameValue(`#${galleryId}`, 'transform', 'none');
   await page.emulateMedia({ reducedMotion: 'no-preference' });
-  await page.locator('#open-media-library').click();
+  await (await tab('Elemente'), page.locator('#open-media-library').click());
   await page.locator('#media-status').filter({ hasText: '2 Bilder' }).waitFor();
   await page.locator(`[data-media-id="${mediaItems[0].id}"]`).click();
   await page.getByRole('button', { name: 'Archivieren', exact: true }).click();
@@ -709,25 +723,23 @@ try {
   await page.getByRole('button', { name: 'Wiederherstellen', exact: true }).click();
   await page.locator('#media-status').filter({ hasText: '2 Bilder' }).waitFor();
   await page.getByRole('button', { name: 'Schließen', exact: true }).click();
-  await page.locator('#structure [data-block-id="headline"]').click();
+  await treeSelect('headline');
   await page.getByRole('button', { name: 'Inhalt', exact: true }).click();
   checks.push({ name: 'image upload, alt metadata, multi-select gallery, caption, sorting undo, archive/restore, responsive variants and reduced-motion effects', passed: true });
   console.log('Media library, gallery and effects passed.');
 
-  await page.locator('#library [data-add="text"]').click();
+  await addFromLibrary('[data-add="text"]');
   await page.getByLabel('Text', { exact: true }).fill('Dieser Absatz wurde im Editor eingefügt.');
   await page.getByRole('button', { name: 'Duplizieren', exact: true }).click();
   await page.getByLabel('Text', { exact: true }).fill('Das ist eine unabhängige Kopie.');
   await page.getByRole('button', { name: 'Nach oben verschieben', exact: true }).click();
   await page.getByRole('button', { name: 'Löschen', exact: true }).click();
   await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
-  await page.locator('#toggle-library').click();
-  await page.locator(`#structure [data-toggle="${presetSection}"]`).click();
-  await page.locator(`#structure [data-toggle="${galleryId}"]`).click();
+  await treeToggle(presetSection);
+  await treeToggle(galleryId);
   await page.getByRole('button', { name: 'Text: Dieser Absatz wurde im Editor eingefügt.', exact: true }).dragTo(page.locator('#structure [data-block-id="principles"]'));
   await page.waitForFunction(() => document.querySelector('#structure [data-block-id="principles"]')?.parentElement.textContent.includes('Dieser Absatz wurde im Editor eingefügt.'));
   await page.getByRole('button', { name: 'Rückgängig', exact: true }).click();
-  await page.locator('#toggle-library').click();
   await page.route('**/admin/api/pages/test-home/draft', route => route.abort(), { times: 1 });
   await page.getByRole('button', { name: 'Entwurf speichern', exact: true }).click();
   await page.locator('#message').filter({ hasText: 'Verbindung ist unterbrochen' }).waitFor();
@@ -881,8 +893,9 @@ try {
   // Back into the editor. The draft differs from the published state by now, so wait for the
   // structure rather than for a particular save status.
   await page.goto(origin + '/admin/pages/test-home');
+  await tab('Struktur');
   await page.locator('#structure [data-block-id="headline"]').waitFor();
-  await page.locator('#structure [data-block-id="headline"]').click();
+  await treeSelect('headline');
   await page.getByRole('button', { name: 'Design', exact: true }).click();
   await page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
   await axe('desktop editor');
@@ -894,7 +907,7 @@ try {
   assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true);
   await axe('mobile editor');
   await page.screenshot({ path: 'reports/editor/editor-phone.png', fullPage: true });
-  await page.locator('#open-media-library').click();
+  await (await tab('Elemente'), page.locator('#open-media-library').click());
   await page.locator('#media-status').filter({ hasText: '2 Bilder' }).waitFor();
   await axe('mobile media library');
   await page.screenshot({ path: 'reports/editor/media-phone.png', fullPage: true });

scripts/motion-check.mjs

@@ -10,6 +10,7 @@ const hash = async () => createHash('sha256').update(await readFile('var/kantit.
 const before = await hash();
 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'], { env, windowsHide: true, stdio: 'ignore' });
 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}`;
@@ -23,7 +24,13 @@ try {
     if (attempt === 59) throw new Error('Pilot server did not start');
     await new Promise(resolve => setTimeout(resolve, 200));
   }
-  browser = await chromium.launch();
+  browser = await chromium.launch(process.env.MOTION_BROWSER_CHANNEL ? { channel: process.env.MOTION_BROWSER_CHANNEL } : {});
+  const systemContext = await browser.newContext({ reducedMotion: null });
+  const systemPage = await systemContext.newPage();
+  await systemPage.goto(origin);
+  const systemMotion = await systemPage.evaluate(() => ({ reduced: matchMedia('(prefers-reduced-motion: reduce)').matches, userAgent: navigator.userAgent }));
+  console.log('Default browser motion preference:', JSON.stringify(systemMotion));
+  await systemContext.close();
   for (const width of [1600, 390]) {
     const context = await browser.newContext({ viewport: { width, height: 900 }, reducedMotion: 'no-preference' });
     await context.addInitScript(() => {
@@ -40,53 +47,141 @@ try {
     const inventory = await page.locator('[class*="fx-entrance-"]').evaluateAll(nodes => nodes.map(node => ({ id: node.id, classes: node.className })));
     assert.ok(inventory.length > 0, 'Pilot has entrance effects');
     assert.equal(await page.locator('script[src*="motion.js"]').count(), 1);
-    const target = page.locator('#kontakt');
-    assert.equal(await page.evaluate(() => motionCalls.some(call => call.id === 'kontakt')), false, 'Below-fold section must wait for scrolling');
+    const hoverTarget = page.locator('#leistung-app');
+    await hoverTarget.scrollIntoViewIfNeeded(); await page.waitForTimeout(800);
+    await hoverTarget.hover(); await page.waitForTimeout(350);
+    const hovered = await hoverTarget.evaluate(node => ({ transform: getComputedStyle(node).transform, matches: node.matches(':hover'), classes: node.className }));
+    console.log('Pilot hover:', width, JSON.stringify(hovered));
+    assert.equal(hovered.transform, 'matrix(1, 0, 0, 1, 0, -4)', 'Saved lift effect changes the rendered transform');
+    const target = page.locator('#abschluss-cta');
+    assert.equal(await page.evaluate(() => motionCalls.some(call => call.id === 'abschluss-cta')), false, 'Below-fold section must wait for scrolling');
+    assert.equal(await target.evaluate(node => node.style.opacity), '0', 'Below-fold block waits out of sight, as in Flatsome');
     await target.scrollIntoViewIfNeeded();
-    await page.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'));
+    await page.waitForFunction(() => motionCalls.some(call => call.id === 'abschluss-cta'));
     const calls = await page.evaluate(() => motionCalls);
-    assert.equal(calls.find(call => call.id === 'kontakt').frames[0].transform, 'translateY(28px)');
+    assert.equal(calls.find(call => call.id === 'abschluss-cta').frames[0].transform, 'translateY(40px)');
+    assert.equal(calls.find(call => call.id === 'abschluss-cta').frames[0].opacity, 0, 'Entrance fades in from invisible, as in Flatsome');
     await page.waitForTimeout(800);
     await page.evaluate(() => scrollTo(0, 0)); await target.scrollIntoViewIfNeeded(); await page.waitForTimeout(100);
-    assert.equal(await page.evaluate(() => motionCalls.filter(call => call.id === 'kontakt').length), 1, 'Entrance runs once');
+    assert.equal(await page.evaluate(() => motionCalls.filter(call => call.id === 'abschluss-cta').length), 1, 'Entrance runs once');
     await page.screenshot({ path: `${report}/pilot-${width}.png` });
 
     // Exercise both existing choices on the real pilot element without editing saved content.
     for (const direction of ['left', 'right']) {
       await page.evaluate(async direction => {
-        const node = document.getElementById('kontakt');
+        const node = document.getElementById('abschluss-cta');
         node.classList.remove('fx-entrance-rise', 'fx-entrance-left', 'fx-entrance-right');
         node.classList.add(`fx-entrance-${direction}`);
         const { initMotion } = await import(document.querySelector('script[src*="motion.js"]').src);
         window.stopMotionCheck?.(); window.motionCalls = [];
         window.stopMotionCheck = initMotion();
       }, direction);
-      await page.waitForFunction(() => motionCalls.some(call => call.id === 'kontakt'));
+      await page.waitForFunction(() => motionCalls.some(call => call.id === 'abschluss-cta'));
       const actual = await target.evaluate(node => {
         const animation = node.getAnimations()[0]; animation.pause(); animation.currentTime = 150;
         return { transform: getComputedStyle(node).transform, frames: animation.effect.getKeyframes() };
       });
-      assert.equal(actual.frames[0].transform, direction === 'left' ? 'translateX(-36px)' : 'translateX(36px)');
+      assert.equal(actual.frames[0].transform, direction === 'left' ? 'translateX(-56px)' : 'translateX(56px)');
       const offset = Number(actual.transform.split(',')[4]);
       assert.ok(direction === 'left' ? offset < 0 : offset > 0, 'Computed movement follows selected direction');
       await page.screenshot({ path: `${report}/${direction}-${width}.png` });
       await page.evaluate(() => window.stopMotionCheck());
     }
+    // Default setting: the website plays regardless of the browser preference (Flatsome mode).
+    // Umut's Chrome reports "reduce" without anyone having chosen it; the site must still move.
     await page.emulateMedia({ reducedMotion: 'reduce' });
-    await page.reload(); await target.scrollIntoViewIfNeeded(); await page.waitForTimeout(800);
-    assert.equal(await page.evaluate(() => motionCalls.length), 0, 'Reduced motion suppresses animations');
-    assert.equal(await target.evaluate(node => getComputedStyle(node).opacity), '1');
-    results.push({ width, inventory, calls, checks: ['scroll trigger', 'once only', 'left/right computed movement', 'reduced motion'] });
+    await page.reload(); await target.scrollIntoViewIfNeeded();
+    await page.waitForFunction(() => motionCalls.some(call => call.id === 'abschluss-cta'), null, { timeout: 3000 });
+    await page.waitForTimeout(900);
+    assert.equal(await target.evaluate(node => getComputedStyle(node).opacity), '1', 'Block ends fully visible');
+    await hoverTarget.scrollIntoViewIfNeeded(); await hoverTarget.hover(); await page.waitForTimeout(350);
+    assert.equal(await hoverTarget.evaluate(node => getComputedStyle(node).transform), 'matrix(1, 0, 0, 1, 0, -4)', 'Default setting keeps the hover lift under a reduce preference');
+    await page.emulateMedia({ reducedMotion: 'no-preference' });
     await context.close();
+
+    // Setting "Browservorgabe beachten": <html class="motion-respect">. Simulated by adding the
+    // class before any script runs, exactly where the template would print it.
+    const respect = await browser.newContext({ viewport: { width, height: 900 }, reducedMotion: 'reduce' });
+    await respect.addInitScript(() => {
+      window.motionCalls = [];
+      const animate = Element.prototype.animate;
+      Element.prototype.animate = function (frames, options) {
+        const animation = animate.call(this, frames, options);
+        window.motionCalls.push({ id: this.id, frames, options, scrollY, top: this.getBoundingClientRect().top });
+        return animation;
+      };
+      new MutationObserver((_, observer) => {
+        if (!document.documentElement) return;
+        document.documentElement.classList.add('motion-respect'); observer.disconnect();
+      }).observe(document, { childList: true });
+    });
+    const respectPage = await respect.newPage(); respectPage.on('pageerror', error => errors.push(error.message));
+    const respectTarget = respectPage.locator('#abschluss-cta'), respectHover = respectPage.locator('#leistung-app');
+    await respectPage.goto(origin); await respectTarget.scrollIntoViewIfNeeded(); await respectPage.waitForTimeout(800);
+    assert.equal(await respectPage.evaluate(() => motionCalls.length), 0, 'Reduced motion suppresses animations when respected');
+    assert.equal(await respectTarget.evaluate(node => getComputedStyle(node).opacity), '1');
+    await respectHover.scrollIntoViewIfNeeded(); await respectHover.hover(); await respectPage.waitForTimeout(350);
+    assert.equal(await respectHover.evaluate(node => getComputedStyle(node).transform), 'none', 'Reduced motion suppresses hover movement when respected');
+    await respectTarget.scrollIntoViewIfNeeded();
+    await respectPage.emulateMedia({ reducedMotion: 'no-preference' });
+    await respectPage.waitForFunction(() => motionCalls.some(call => call.id === 'abschluss-cta'), null, { timeout: 3000 });
+    await respectPage.waitForTimeout(900);
+    await respectPage.emulateMedia({ reducedMotion: 'reduce' });
+    await respectPage.emulateMedia({ reducedMotion: 'no-preference' });
+    await respectPage.waitForTimeout(100);
+    assert.equal(await respectPage.evaluate(() => motionCalls.filter(call => call.id === 'abschluss-cta').length), 1, 'Preference changes do not replay an already seen element');
+    await respectHover.scrollIntoViewIfNeeded(); await respectHover.hover(); await respectPage.waitForTimeout(350);
+    assert.equal(await respectHover.evaluate(node => getComputedStyle(node).transform), 'matrix(1, 0, 0, 1, 0, -4)', 'Hover resumes after allowing motion');
+    // Also cover a page that starts normally, then suppresses motion before reaching its content.
+    await respectPage.reload(); await respectPage.waitForTimeout(800);
+    await respectPage.emulateMedia({ reducedMotion: 'reduce' });
+    await respectTarget.scrollIntoViewIfNeeded(); await respectPage.waitForTimeout(100);
+    assert.equal(await respectPage.evaluate(() => motionCalls.filter(call => call.id === 'abschluss-cta').length), 0);
+    assert.equal(await respectTarget.evaluate(node => getComputedStyle(node).opacity), '1', 'A waiting block is shown again when motion is reduced');
+    await respectPage.emulateMedia({ reducedMotion: 'no-preference' });
+    await respectPage.waitForFunction(() => motionCalls.some(call => call.id === 'abschluss-cta'), null, { timeout: 3000 });
+    results.push({ width, inventory, calls, checks: ['scroll trigger', 'once only', 'hidden until visible', 'left/right computed movement', 'saved hover lift', 'default plays under reduce preference', 'motion-respect honours reduce', 'resume without reloading after initial and subsequent reduced motion', 'hover resumes after preference change'] });
+    await respect.close();
   }
   const noJs = await browser.newContext({ javaScriptEnabled: false });
   const page = await noJs.newPage(); await page.goto(origin);
   assert.ok(await page.locator('main').innerText());
-  assert.equal(await page.locator('#kontakt').evaluate(node => getComputedStyle(node).opacity), '1');
+  assert.equal(await page.locator('#abschluss-cta').evaluate(node => getComputedStyle(node).opacity), '1');
   await noJs.close();
+  const editorContext = await browser.newContext({ reducedMotion: 'reduce', viewport: { width: 1600, height: 1000 } });
+  const editor = await editorContext.newPage(); editor.on('pageerror', error => errors.push(error.message));
+  await editor.goto(origin + '/admin/login');
+  await editor.getByLabel('Benutzername').fill(fixture.username);
+  await editor.getByLabel('Passwort', { exact: true }).fill(fixture.password);
+  await editor.getByRole('button', { name: 'Anmelden', exact: true }).click();
+  await editor.waitForURL(origin + '/admin');
+  await editor.goto(`${origin}/admin/pages/${fixture.homeId}`);
+  // With the default setting the note stays away: the site plays anyway, there is nothing to say.
+  await editor.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  await editor.waitForTimeout(300);
+  assert.equal(await editor.locator('#motion-status').isVisible(), false, 'No motion note while the site ignores the preference');
+  await editor.close();
+  // The note appears once the site respects the preference - simulated in the preview frame.
+  // The preview frame carries the website's decision as a class on its <html>; set it there the
+  // way the template would, then let the preference change re-evaluate the note.
+  const editorRespect = await editorContext.newPage(); editorRespect.on('pageerror', error => errors.push(error.message));
+  await editorRespect.goto(`${origin}/admin/pages/${fixture.homeId}`);
+  await editorRespect.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  await editorRespect.evaluate(() => document.querySelector('#preview').contentDocument.documentElement.classList.add('motion-respect'));
+  // Two toggles in one breath cancel out before the change event fires; give each its moment.
+  await editorRespect.emulateMedia({ reducedMotion: 'no-preference' });
+  await editorRespect.waitForTimeout(300);
+  await editorRespect.emulateMedia({ reducedMotion: 'reduce' });
+  await editorRespect.locator('#motion-status').waitFor({ state: 'visible' });
+  await editorRespect.screenshot({ path: `${report}/editor-motion-status.png` });
+  await editorRespect.emulateMedia({ reducedMotion: 'no-preference' });
+  await editorRespect.locator('#motion-status').waitFor({ state: 'hidden' });
+  await editorRespect.emulateMedia({ reducedMotion: 'reduce' });
+  await editorRespect.locator('#motion-status').waitFor({ state: 'visible' });
+  await editorContext.close();
   assert.deepEqual(errors, []);
   assert.equal(await hash(), before, 'Original database unchanged');
-  await writeFile(`${report}/result.json`, JSON.stringify({ results, errors, noJavaScript: true, originalUnchanged: true }, null, 2));
+  await writeFile(`${report}/result.json`, JSON.stringify({ systemMotion, results, errors, editorMotionStatus: true, noJavaScript: true, originalUnchanged: true }, null, 2));
   console.log(JSON.stringify({ passed: true, devices: results.map(result => result.width), effects: results[0].inventory, report }));
 } finally {
   await browser?.close(); server.kill();

scripts/reset-elektro-bernhard.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+# Wirft die Elektro-Bernhard-Installation weg und baut sie neu auf. Nur fuer den Aufbau gedacht.
+set -e
+root="C:/Django Project/KantSites"
+export DATABASE_URL="sqlite:///$root/var/elektro-bernhard.db"
+export MEDIA_DIRECTORY="$root/var/elektro-bernhard-media"
+rm -f "$root/var/elektro-bernhard.db"
+rm -rf "$root/var/elektro-bernhard-media"
+php vendor/bin/doctrine-migrations migrate --no-interaction -q
+php -d memory_limit=512M scripts/seed-elektro-bernhard.php "$1"

scripts/reset-tagespflege-moldovan.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+# Wirft die Moldovan-Installation weg und baut sie neu auf. Nur fuer den Aufbau gedacht.
+set -e
+root="C:/Django Project/KantSites"
+php="${PHP_BINARY:-C:/php84/php.exe}"
+export DATABASE_URL="sqlite:///$root/var/tagespflege-moldovan.db"
+export MEDIA_DIRECTORY="$root/var/tagespflege-moldovan-media"
+rm -f "$root/var/tagespflege-moldovan.db"
+rm -rf "$root/var/tagespflege-moldovan-media"
+"$php" vendor/bin/doctrine-migrations migrate --no-interaction -q
+assets="${1:-$root/var/tagespflege-moldovan-assets}"
+"$php" -d memory_limit=512M scripts/seed-tagespflege-moldovan.php "$assets"

scripts/seed-elektro-bernhard.php

@@ -0,0 +1,871 @@
+<?php
+
+/**
+ * Baut die Website „Elektro Bernhard“ als Inhalt dieses CMS auf.
+ *
+ * Inhalt: das gelieferte HTML-Paket (12.09.2026), abgeglichen mit elektro-bernhard.de (14.09.2026).
+ * Gestaltung: eigener Entwurf nach dem Muster des laufenden Auftritts – dunkler Kopf über einem
+ * Foto, Karten mit Schatten, Einblendungen, ein Kopfbereich, der über dem Bild schwebt und beim
+ * Scrollen weiß wird. Alles aus gewöhnlichen Bausteinen; kein eigener Baustein, kein Sonderweg.
+ *
+ * Das Skript schreibt ausschließlich in die Datenbank aus DATABASE_URL und in MEDIA_DIRECTORY,
+ * beide müssen auf eine frische, migrierte Installation zeigen (siehe reset-elektro-bernhard.sh).
+ * Erstes Argument: Ordner mit den Originalbildern (logo.webp, hero-1200.webp, electrician-900.webp).
+ */
+
+require dirname(__DIR__).'/config/bootstrap.php';
+
+use App\Content\DocumentValidator;
+use App\Content\FormRepository;
+use App\Content\MediaLibrary;
+use App\Content\MenuRepository;
+use App\Content\PageRepository;
+use App\Content\PartialRepository;
+use App\Content\RedirectRepository;
+use App\Content\SiteSettings;
+use App\Content\Theme;
+use App\Infrastructure\ConnectionFactory;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+$root = dirname(__DIR__);
+$assets = $argv[1] ?? null;
+if (null === $assets || !is_dir($assets)) {
+    fwrite(STDERR, "Bitte den Ordner mit den Originalbildern als Argument angeben.\n");
+    exit(1);
+}
+$url = str_replace('%kernel.project_dir%', str_replace('\\', '/', $root), (string) $_SERVER['DATABASE_URL']);
+$mediaDirectory = str_replace('%kernel.project_dir%', $root, (string) $_SERVER['MEDIA_DIRECTORY']);
+if (!str_contains($url, 'elektro-bernhard')) {
+    fwrite(STDERR, "Sicherung: DATABASE_URL muss auf die Elektro-Bernhard-Datenbank zeigen.\n");
+    exit(1);
+}
+
+$db = ConnectionFactory::create($url);
+if (false !== $db->fetchOne('SELECT id FROM page LIMIT 1')) {
+    fwrite(STDERR, "Diese Datenbank enthält bereits Seiten. Abbruch, damit nichts überschrieben wird.\n");
+    exit(1);
+}
+
+$media = new MediaLibrary($db, $mediaDirectory);
+$settings = new SiteSettings($db, $media);
+$validator = new DocumentValidator();
+$pages = new PageRepository($db, $validator, $settings);
+$partials = new PartialRepository($db, $validator);
+$menus = new MenuRepository($db, $settings);
+$forms = new FormRepository($db);
+$theme = new Theme($db);
+$redirects = new RedirectRepository($db);
+
+$mail = 'info@elektro-bernhard.de';
+$buero = '07221 3944909';
+$notdienst = '0151 25245851';
+$SCHEMA = 23;
+
+// ---------------------------------------------------------------------------------------------
+// Bausteine
+// ---------------------------------------------------------------------------------------------
+
+/** Ein Abschnitt mit dem Rhythmus der Seite: 96 px am Schreibtisch, 64 mobil. */
+$section = static function (string $id, array $children, array $style = [], ?string $anchor = null): array {
+    $basis = ['desktop' => ['padding' => ['top' => '96px', 'bottom' => '96px']], 'mobile' => ['padding' => ['top' => '64px', 'bottom' => '64px']]];
+    foreach ($style as $device => $values) {
+        $basis[$device] = [...($basis[$device] ?? []), ...$values];
+    }
+    $block = ['id' => $id, 'type' => 'section', 'children' => $children, 'style' => $basis];
+    if (null !== $anchor) {
+        $block['anchor'] = $anchor;
+    }
+
+    return $block;
+};
+
+$row = static function (string $id, array $children, array $design = [], array $style = []): array {
+    $block = ['id' => $id, 'type' => 'row', 'children' => $children];
+    if ([] !== $design) {
+        $block['layout'] = ['design' => $design];
+    }
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+
+    return $block;
+};
+
+$column = static function (string $id, array $children, array $style = [], string $sichtbarkeit = 'all'): array {
+    $block = ['id' => $id, 'type' => 'column', 'children' => $children];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ('all' !== $sichtbarkeit) {
+        $block['layout'] = ['visibility' => $sichtbarkeit];
+    }
+
+    return $block;
+};
+
+$heading = static function (string $id, string $text, int $level, array $style = []): array {
+    $block = ['id' => $id, 'type' => 'heading', 'props' => ['text' => $text, 'level' => $level]];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+
+    return $block;
+};
+
+$text = static function (string $id, string $text, array $style = []): array {
+    $block = ['id' => $id, 'type' => 'text', 'props' => ['text' => $text]];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+
+    return $block;
+};
+
+/** Einblendung und Hover-Bewegung, wie Flatsome sie jedem Element anbietet. */
+$fx = static function (array $block, string $entrance = 'rise', string $delay = 'none', ?string $hover = null, ?string $shadow = null): array {
+    $effects = ['entrance' => $entrance, 'delay' => $delay];
+    if (null !== $hover) {
+        $effects['hover'] = $hover;
+    }
+    if (null !== $shadow) {
+        $effects['shadow'] = $shadow;
+    }
+    $block['layout'] = [...($block['layout'] ?? []), 'effects' => $effects];
+
+    return $block;
+};
+
+/** Die Kleinzeile über einer Überschrift: Versalien, gesperrt, in Rot. */
+$eyebrow = static fn (string $id, string $inhalt, string $farbe = '@rot'): array => [
+    'id' => $id, 'type' => 'text', 'props' => ['text' => $inhalt],
+    'style' => ['desktop' => ['color' => $farbe, 'fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '0.16em', 'textTransform' => 'uppercase', 'lineHeight' => 1.4, 'margin' => ['bottom' => '16px']]],
+];
+
+$button = static function (string $id, string $text, string $href, array $style = [], array $variante = []): array {
+    $block = ['id' => $id, 'type' => 'button', 'props' => ['text' => $text, 'href' => $href]];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ([] !== $variante) {
+        $block['layout'] = ['button' => $variante];
+    }
+
+    return $block;
+};
+
+$bild = static function (string $id, array $eintrag, string $alt, array $style = [], ?string $caption = null, ?string $href = null): array {
+    $gross = end($eintrag['variants']);
+    $props = [
+        'src' => $gross['src'], 'alt' => $alt, 'decorative' => false, 'width' => $gross['width'], 'height' => $gross['height'],
+        'mediaId' => $eintrag['id'],
+        'sources' => array_map(static fn (array $v): array => ['src' => $v['src'], 'width' => $v['width']], $eintrag['variants']),
+    ];
+    if (null !== $caption) {
+        $props['caption'] = $caption;
+    }
+    if (null !== $href) {
+        $props['href'] = $href;
+        $props['click'] = 'link';
+    }
+    $block = ['id' => $id, 'type' => 'image', 'props' => $props];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+
+    return $block;
+};
+
+$alleEcken = static fn (string $r): array => ['topLeft' => $r, 'topRight' => $r, 'bottomRight' => $r, 'bottomLeft' => $r];
+$alleSeiten = static fn (string $w): array => ['top' => $w, 'right' => $w, 'bottom' => $w, 'left' => $w];
+
+/** Eine Karte mit Symbol auf roter Fläche – die Leistungskarte des Auftritts. */
+$karte = static function (string $id, string $icon, string $titel, string $inhalt, string $href = '') use ($alleEcken, $alleSeiten): array {
+    return [
+        'id' => $id, 'type' => 'iconcard',
+        'props' => ['icon' => $icon, 'title' => $titel, 'text' => $inhalt, 'href' => $href],
+        'style' => ['desktop' => [
+            'backgroundColor' => '@papier', 'color' => '@tinte',
+            'padding' => $alleSeiten('32px'), 'borderWidth' => $alleSeiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie',
+            'borderRadius' => $alleEcken('16px'), 'gap' => '14px',
+            'hover' => ['borderColor' => '@rot'],
+        ]],
+        'css' => "& svg{width:54px;height:54px;padding:12px;color:#c8102e;background:#fbe9ec;border-radius:14px}\n& h3{font-size:20px;letter-spacing:-0.01em}\n& p{color:#5d636b;font-size:15.5px}\n& h3 a:hover{color:#c8102e;text-decoration:none}",
+        'layout' => ['effects' => ['shadow' => 'soft', 'hover' => 'lift', 'entrance' => 'rise']],
+    ];
+};
+
+/** Eine schlanke Zeile mit Symbol, ohne Karte – für Aufzählungen von Stärken. */
+$punkt = static function (string $id, string $icon, string $titel, string $inhalt, string $farbe = '#c8102e', string $textfarbe = '#5d636b'): array {
+    return [
+        'id' => $id, 'type' => 'iconcard',
+        'props' => ['icon' => $icon, 'title' => $titel, 'text' => $inhalt, 'href' => ''],
+        'style' => ['desktop' => ['padding' => ['top' => '0px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px'], 'borderStyle' => 'none', 'gap' => '6px']],
+        'css' => "& svg{width:26px;height:26px;color:$farbe}\n& h3{font-size:17px}\n& p{color:$textfarbe;font-size:15px}",
+    ];
+};
+
+$kontaktBlock = static function (string $id, array $props, array $style = []): array {
+    $block = ['id' => $id, 'type' => 'contact', 'props' => ['phone' => $props['phone'] ?? '', 'email' => $props['email'] ?? '', 'address' => $props['address'] ?? '']];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+
+    return $block;
+};
+
+/** Die sozialen Profile – gepflegt in den Einstellungen, hier nur Größe, Form und Farbe. */
+$sozial = static function (string $id, int $groesse, string $form, string $farbe, array $extra = []): array {
+    return [
+        'id' => $id, 'type' => 'social',
+        'props' => ['size' => $groesse, 'shape' => $form, 'layout' => 'horizontal', 'labels' => false, 'networks' => [], 'newTab' => true],
+        'style' => ['desktop' => ['color' => $farbe, ...$extra]],
+    ];
+};
+
+/** Der Handlungsaufruf am Ende einer Seite: dunkle Karte mit rotem Knopf. */
+$cta = static function (string $id) use ($alleEcken, $alleSeiten): array {
+    return [
+        'id' => $id, 'type' => 'cta',
+        'props' => ['title' => 'Projekt geplant? Wir sind bereit.', 'text' => 'Kontaktieren Sie uns für eine kostenlose Beratung – wir melden uns innerhalb von 24 Stunden.', 'buttonText' => 'Jetzt Kontakt aufnehmen', 'href' => '/kontakt'],
+        'style' => ['desktop' => ['backgroundColor' => '@tinte', 'color' => '@papier', 'padding' => $alleSeiten('44px'), 'borderRadius' => $alleEcken('20px'), 'margin' => ['top' => '56px']], 'mobile' => ['padding' => $alleSeiten('28px')]],
+        'css' => "& h2{font-size:28px;line-height:1.2;letter-spacing:-0.02em;margin:0 0 8px}\n& p{color:#c2c6cc;margin:0}",
+        'layout' => ['effects' => ['entrance' => 'rise']],
+    ];
+};
+
+// Wiederkehrende Gestaltungswerte.
+$fliess = ['desktop' => ['color' => '@gedaempft', 'fontSize' => '17px', 'lineHeight' => 1.75]];
+$fliessHell = ['desktop' => ['color' => '#c2c6cc', 'fontSize' => '17px', 'lineHeight' => 1.75]];
+$h2Stil = ['desktop' => ['fontSize' => '44px', 'lineHeight' => 1.12, 'letterSpacing' => '-0.03em', 'fontWeight' => '900', 'margin' => ['bottom' => '18px']], 'mobile' => ['fontSize' => '32px']];
+$h3Stil = ['desktop' => ['fontSize' => '21px', 'lineHeight' => 1.25, 'fontWeight' => '700', 'margin' => ['bottom' => '12px']]];
+$fussTitel = ['desktop' => ['fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '0.14em', 'textTransform' => 'uppercase', 'color' => '@papier', 'margin' => ['bottom' => '18px']]];
+$linkStil = ['desktop' => ['fontSize' => '15px', 'fontWeight' => '700', 'color' => '@rot', 'margin' => ['top' => '8px']]];
+
+// ---------------------------------------------------------------------------------------------
+// Website, Gestaltung, Medien, Formular
+// ---------------------------------------------------------------------------------------------
+
+$db->insert('website', ['id' => 'default', 'name' => 'Elektro Bernhard GmbH', 'default_locale' => 'de', 'theme' => '{}']);
+
+$theme->save(
+    [
+        ['key' => 'rot', 'name' => 'Signalrot', 'value' => '#c8102e'],
+        ['key' => 'rot-dunkel', 'name' => 'Signalrot dunkel', 'value' => '#a70c25'],
+        ['key' => 'rot-hell', 'name' => 'Rot, Fläche', 'value' => '#fbe9ec'],
+        ['key' => 'tinte', 'name' => 'Tinte', 'value' => '#151719'],
+        ['key' => 'nacht', 'name' => 'Fußbereich', 'value' => '#17191b'],
+        ['key' => 'balken', 'name' => 'Kopfleiste', 'value' => '#181a1d'],
+        ['key' => 'karte-dunkel', 'name' => 'Dunkle Karte', 'value' => '#24272b'],
+        ['key' => 'gedaempft', 'name' => 'Gedämpft', 'value' => '#5d636b'],
+        ['key' => 'papier', 'name' => 'Papier', 'value' => '#ffffff'],
+        ['key' => 'weich', 'name' => 'Weiches Grau', 'value' => '#f4f5f6'],
+        ['key' => 'linie', 'name' => 'Trennlinie', 'value' => '#e2e4e7'],
+    ],
+    [
+        // Lato liegt bereits lokal unter public/assets/fonts – keine Anfrage an Google.
+        ['key' => 'body', 'name' => 'Fließtext', 'family' => 'Lato', 'source' => 'google', 'weights' => [400, 700, 900], 'fallback' => 'sans-serif'],
+        ['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Lato', 'source' => 'google', 'weights' => [700, 900], 'fallback' => 'sans-serif'],
+    ],
+    ['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '17px', 'lineHeight' => 1.7, 'color' => '@tinte', 'backgroundColor' => '@papier', 'linkColor' => '@rot', 'containerWidth' => '1240px', 'headingScale' => 1.25, 'linkUnderline' => false],
+    ['shape' => 'rounded', 'appearance' => 'solid', 'size' => 'large', 'fontFamily' => 'inherit', 'fontSize' => 13, 'fontWeight' => 700, 'letterSpacing' => 0.6, 'textTransform' => 'uppercase', 'backgroundColor' => '@rot', 'color' => '@papier', 'hoverBackgroundColor' => '@rot-dunkel', 'hoverColor' => '@papier'],
+);
+
+$medien = [];
+foreach ([
+    'logo' => ['logo.webp', 'Elektro Bernhard GmbH – Logo'],
+    'team' => ['hero-1200.webp', 'Team und Firmenfahrzeuge von Elektro Bernhard'],
+    'schaltschrank' => ['electrician-900.webp', 'Elektrofachkraft bei der Arbeit an einem Schaltschrank'],
+] as $schluessel => [$datei, $alt]) {
+    $pfad = rtrim($assets, '/\\').'/'.$datei;
+    if (!is_file($pfad)) {
+        fwrite(STDERR, "Bild fehlt: $pfad\n");
+        exit(1);
+    }
+    $eintrag = $media->upload(new UploadedFile($pfad, $datei, null, null, true));
+    $media->update($eintrag['id'], ['title' => pathinfo($datei, PATHINFO_FILENAME), 'alt' => $alt, 'archived' => false, 'version' => $eintrag['version']]);
+    $medien[$schluessel] = $media->find($eintrag['id']);
+    echo "Bild übernommen: $datei\n";
+}
+
+$forms->save('kontakt', 'Kontaktanfrage', [
+    ['name' => 'name', 'type' => 'text', 'label' => 'Name / Firma', 'required' => true],
+    ['name' => 'email', 'type' => 'email', 'label' => 'E-Mail', 'required' => true],
+    ['name' => 'telefon', 'type' => 'phone', 'label' => 'Telefon', 'required' => false],
+    ['name' => 'thema', 'type' => 'select', 'label' => 'Worum geht es?', 'required' => true, 'options' => ['Elektroinstallation', 'Smart Home', 'Beratung & Planung', 'Solarenergie', 'Sonstige Anfrage']],
+    ['name' => 'nachricht', 'type' => 'textarea', 'label' => 'Ihre Nachricht', 'required' => true, 'help' => 'Was planen Sie und wo soll das Projekt umgesetzt werden?'],
+    ['name' => 'datenschutz', 'type' => 'consent', 'label' => 'Ich habe die Datenschutzhinweise gelesen. Meine Angaben werden zur Bearbeitung meiner Anfrage verwendet.'],
+], ['recipient' => $mail, 'subject' => 'Neue Anfrage über elektro-bernhard.de', 'success' => 'Vielen Dank. Ihre Anfrage ist angekommen – wir melden uns innerhalb von 24 Stunden.', 'replyToField' => 'email'], 0);
+echo "Formular angelegt: kontakt\n";
+
+// ---------------------------------------------------------------------------------------------
+// Kopfbereich: schwebt über dem dunklen Seitenkopf, wird beim Scrollen weiß
+// ---------------------------------------------------------------------------------------------
+
+$kopf = [
+    'schemaVersion' => $SCHEMA, 'title' => 'Kopfbereich', 'description' => 'Erscheint auf jeder Seite über dem Inhalt.',
+    'blocks' => [
+        $section('kopf-leiste', [
+            $row('kopf-leiste-zeile', [
+                $column('kopf-leiste-ort', [
+                    $text('kopf-leiste-adresse', 'Ooser Hauptstr. 51 · 76532 Baden-Baden', ['desktop' => ['color' => '#c4c8ce', 'fontSize' => '13px', 'lineHeight' => 1.4]]),
+                ], [], 'hide-mobile'),
+                $column('kopf-leiste-rechts', [
+                    // Auf dem Telefon bleibt in der Leiste nur die Notdienstnummer; die Profile stehen im Fuß.
+                    [...$sozial('kopf-sozial', 16, 'plain', '#c4c8ce', ['hover' => ['color' => '@papier']]), 'layout' => ['visibility' => 'hide-mobile']],
+                    ['id' => 'kopf-leiste-menue', 'type' => 'menu', 'props' => ['slot' => 'secondary', 'layout' => 'horizontal', 'collapse' => 'never'],
+                        'style' => ['desktop' => ['fontSize' => '13px', 'fontWeight' => '700', 'color' => '@papier']]],
+                ], ['desktop' => ['display' => 'flex', 'justifyContent' => 'flex-end', 'alignItems' => 'center', 'gap' => '22px'], 'mobile' => ['justifyContent' => 'center']]),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'small'], 'mobile' => ['columns' => 'one']], ['desktop' => ['alignItems' => 'center', 'margin' => ['top' => '0px']]]),
+        ], ['desktop' => ['backgroundColor' => '@balken', 'padding' => ['top' => '8px', 'bottom' => '8px'], 'borderWidth' => ['top' => '0px', 'right' => '0px', 'bottom' => '1px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '#ffffff14'], 'mobile' => ['padding' => ['top' => '8px', 'bottom' => '8px']]]),
+        $section('kopf-haupt', [
+            $row('kopf-haupt-zeile', [
+                $column('kopf-marke', [
+                    $bild('kopf-logo', $medien['logo'], 'Elektro Bernhard GmbH – Beratung, Service, Installation, Notdienst',
+                        ['desktop' => ['maxWidth' => '250px', 'backgroundColor' => '@papier', 'padding' => ['top' => '10px', 'right' => '14px', 'bottom' => '10px', 'left' => '14px'], 'borderRadius' => $alleEcken('10px')], 'mobile' => ['maxWidth' => '200px']], null, '/'),
+                ]),
+                $column('kopf-navigation', [
+                    ['id' => 'kopf-menue', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'horizontal', 'collapse' => 'tablet'],
+                        'style' => ['desktop' => ['justifyContent' => 'flex-end', 'fontWeight' => '700', 'fontSize' => '15px', 'gap' => '30px']]],
+                ]),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'two']], ['desktop' => ['alignItems' => 'center', 'minHeight' => '92px', 'margin' => ['top' => '0px']], 'mobile' => ['minHeight' => '72px']]),
+        ], [
+            // Durchsichtig am Seitenanfang, weiß mit Schatten sobald gescrollt wird.
+            'desktop' => ['backgroundColor' => '#ffffff00', 'color' => '@papier', 'padding' => ['top' => '6px', 'bottom' => '6px'],
+                'shadowY' => '10px', 'shadowBlur' => '30px', 'shadowColor' => '#00000000',
+                'scrolled' => ['backgroundColor' => '@papier', 'color' => '@tinte', 'shadowColor' => '#0000001f']],
+            'mobile' => ['padding' => ['top' => '6px', 'bottom' => '6px']],
+        ]),
+    ],
+];
+
+// ---------------------------------------------------------------------------------------------
+// Fußbereich
+// ---------------------------------------------------------------------------------------------
+
+$fuss = [
+    'schemaVersion' => $SCHEMA, 'title' => 'Fußbereich', 'description' => 'Erscheint auf jeder Seite unter dem Inhalt.',
+    'blocks' => [
+        $section('fuss-notdienst', [
+            $row('fuss-notdienst-zeile', [
+                $column('fuss-notdienst-text', [
+                    $text('fuss-notdienst-titel', '24h Elektro-Notdienst', ['desktop' => ['fontSize' => '20px', 'fontWeight' => '900', 'color' => '@papier', 'lineHeight' => 1.3]]),
+                    $text('fuss-notdienst-zusatz', 'Bei elektrischen Störungen rund um die Uhr für Baden-Baden und die Region erreichbar.', ['desktop' => ['fontSize' => '15px', 'color' => '#ffffffd9', 'margin' => ['top' => '4px']]]),
+                ]),
+                $column('fuss-notdienst-nummer', [
+                    $kontaktBlock('fuss-notdienst-telefon', ['phone' => $notdienst], ['desktop' => ['fontSize' => '30px', 'fontWeight' => '900', 'color' => '@papier', 'justifyContent' => 'flex-end', 'letterSpacing' => '-0.02em'], 'mobile' => ['fontSize' => '24px', 'justifyContent' => 'flex-start']]),
+                ]),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['alignItems' => 'center', 'margin' => ['top' => '0px']]]),
+        ], ['desktop' => ['backgroundColor' => '@rot', 'color' => '@papier', 'padding' => ['top' => '30px', 'bottom' => '30px']], 'mobile' => ['padding' => ['top' => '26px', 'bottom' => '26px']]]),
+        $section('fuss-haupt', [
+            $row('fuss-haupt-zeile', [
+                $column('fuss-marke', [
+                    $bild('fuss-logo', $medien['logo'], 'Elektro Bernhard GmbH', ['desktop' => ['maxWidth' => '230px', 'backgroundColor' => '@papier', 'padding' => $alleSeiten('12px'), 'borderRadius' => $alleEcken('10px')]], null, '/'),
+                    $text('fuss-marke-text', "Elektroinstallation und Kundenservice\nin Baden-Baden und Umgebung – seit über 35 Jahren.", ['desktop' => ['color' => '#b3b8bf', 'fontSize' => '15px', 'margin' => ['top' => '20px', 'bottom' => '20px']]]),
+                    $sozial('fuss-sozial', 20, 'circle', '@papier', ['hover' => ['color' => '@rot']]),
+                ]),
+                $column('fuss-website', [
+                    $heading('fuss-website-titel', 'Unsere Website', 3, $fussTitel),
+                    ['id' => 'fuss-website-menue', 'type' => 'menu', 'props' => ['slot' => 'footer', 'layout' => 'vertical'], 'style' => ['desktop' => ['fontSize' => '15px', 'color' => '#c4c8ce']]],
+                ]),
+                $column('fuss-kontakt', [
+                    $heading('fuss-kontakt-titel', 'Kontakt', 3, $fussTitel),
+                    $kontaktBlock('fuss-kontakt-daten', ['phone' => $buero, 'email' => $mail, 'address' => 'Ooser Hauptstr. 51, 76532 Baden-Baden'], ['desktop' => ['fontSize' => '15px', 'color' => '#c4c8ce', 'gap' => '10px']]),
+                ]),
+                $column('fuss-zeiten', [
+                    $heading('fuss-zeiten-titel', 'Bürozeiten', 3, $fussTitel),
+                    $text('fuss-zeiten-text', "Mo–Do: 07:00–16:30 Uhr\nFr: 07:00–13:00 Uhr\nSa–So: geschlossen", ['desktop' => ['fontSize' => '15px', 'lineHeight' => 1.8, 'color' => '#c4c8ce']]),
+                    $text('fuss-zeiten-notdienst', '<strong>Notdienst: 24/7 erreichbar</strong>', ['desktop' => ['fontSize' => '15px', 'color' => '@papier', 'margin' => ['top' => '10px']]]),
+                ]),
+            ], ['desktop' => ['columns' => 'four', 'gap' => 'large'], 'tablet' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+            ['id' => 'fuss-trenner', 'type' => 'divider', 'style' => ['desktop' => ['borderColor' => '#33373c', 'margin' => ['top' => '56px', 'bottom' => '24px']]]],
+            $row('fuss-schluss', [
+                $column('fuss-schluss-links', [$text('fuss-copyright', '© 2026 Elektro Bernhard GmbH', ['desktop' => ['color' => '#8f959c', 'fontSize' => '13px', 'lineHeight' => 1.8]])]),
+                $column('fuss-schluss-rechts', [
+                    ['id' => 'fuss-rechtliches', 'type' => 'legal', 'props' => ['label' => 'Rechtliches'], 'style' => ['desktop' => ['color' => '#b3b8bf', 'fontSize' => '13px', 'justifyContent' => 'flex-end', 'padding' => ['right' => '72px']], 'mobile' => ['justifyContent' => 'flex-start', 'padding' => ['right' => '0px']]]],
+                    [...$text('fuss-urheber', 'Website von <a href="https://www.kant-it.de/">Kant-IT Solutions</a>', ['desktop' => ['color' => '#8f959c', 'fontSize' => '13px', 'textAlign' => 'right', 'margin' => ['top' => '6px'], 'padding' => ['right' => '72px']], 'mobile' => ['textAlign' => 'left', 'padding' => ['right' => '0px']]]), 'css' => '& a{color:#e8eaed}'],
+                ]),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+        ], ['desktop' => ['backgroundColor' => '@nacht', 'color' => '#b3b8bf', 'padding' => ['top' => '72px', 'bottom' => '24px']], 'mobile' => ['padding' => ['top' => '52px', 'bottom' => '24px']]]),
+    ],
+];
+
+$partials->create('header', 'default', 'Kopfbereich', $kopf);
+$partials->create('footer', 'default', 'Fußbereich', $fuss);
+echo "Kopf- und Fußbereich angelegt\n";
+
+// ---------------------------------------------------------------------------------------------
+// Inhalte
+// ---------------------------------------------------------------------------------------------
+
+$leistungen = [
+    ['elektroinstallation', 'hardware', 'Elektroinstallation', 'Wir planen und installieren die Elektrik in Neubauten und übernehmen Elektroarbeiten bei Sanierungen.'],
+    ['smart-home', 'app', 'Smart Home', 'Beleuchtung, Heizung und Sicherheit zentral steuern. Wir beraten Sie, welche Lösung zu Ihrem Gebäude passt.'],
+    ['notdienst', 'phone', '24h Notdienst', 'Bei elektrischen Störungen erreichen Sie unseren Notdienst unter '.$notdienst.', auch außerhalb der Bürozeiten.'],
+    ['beratung-planung', 'design', 'Beratung & Planung', 'Sie möchten bauen oder umbauen? Wir besprechen mit Ihnen, welche Anschlüsse und Funktionen Sie benötigen.'],
+];
+
+$fragen = [
+    ['Wo ist Elektro Bernhard im Einsatz?', 'Unser Standort ist in Baden-Baden. Wir betreuen Projekte in Baden-Baden, Hügelsheim, Iffezheim, Rastatt, Kuppenheim, Gaggenau, Gernsbach, Muggensturm, im Murgtal und in der Umgebung. Fragen Sie uns gerne zu Ihrem konkreten Projektort.'],
+    ['Übernehmen Sie Neubauten und Sanierungen?', 'Ja. Elektroinstallation für Neu- und Altbauten gehört zu unseren Leistungen. Wir beraten Sie zu Ihrem Vorhaben und planen gemeinsam die passende Umsetzung.'],
+    ['Was lässt sich mit Smart Home steuern?', 'Zum Beispiel Beleuchtung, Heizung und Sicherheitsfunktionen. Welche Steuerung zu Ihrem Gebäude passt, klären wir in einer individuellen Beratung.'],
+    ['Wie erreiche ich den 24h-Notdienst?', 'Bei einem elektrischen Notfall erreichen Sie unseren Kundendienst rund um die Uhr unter '.$notdienst.'. Für reguläre Projektanfragen erreichen Sie unser Büro unter '.$buero.'.'],
+    ['Bieten Sie auch Solaranlagen an?', 'Solarplanung und Installation übernimmt die eigenständige Elektro Bernhard Regenerative Energie GmbH. Das Angebot richtet sich an private Wohnhäuser und Geschäftsgebäude.'],
+];
+
+// Wortlaut, Name und Datum am 14.09.2026 aus den auf elektro-bernhard.de veröffentlichten
+// Google-Rezensionen übernommen (Zuordnung am DOM geprüft, nicht aus der Textfassung geraten).
+$stimmen = [
+    ['philipp', 'Als Architekt empfehle ich die Firma Bernhard gerne weiter. Zuverlässig, professionell und entspannt. Probleme werden zielführend gelöst und die Wünsche der Bauherren erfüllt. Solche Handwerker gibt es heutzutage leider immer seltener.', 'Philipp Bender', 'Google · 26. November 2024'],
+    ['soeren', 'Angefangen vom ersten Planungsgespräch, die Terminierung, Durchführung und Abnahme war ALLES perfekt. Obwohl wir tendenziell eher ein kleineres Projekt hatten, wurde alles sehr professionell und auf die Stunde genau pünktlich umgesetzt.', 'Sören de Vries', 'Google · 26. Oktober 2024'],
+    ['michael', 'Das Team hat sauber und gründlich gearbeitet und war immer sehr freundlich. Es wurden vollumfänglich Fragen beantwortet, wir wurden durch das Projekt regelrecht begleitet. Solche Handwerker findet man sehr selten.', 'Michael Pfeil', 'Google · 26. Oktober 2024'],
+    ['dijar', 'Ein erstklassiges Unternehmen – extrem zuverlässig und absolut kompetent. Bereits am Sonntag standen die Mitarbeiter, inklusive des Geschäftsführers, persönlich vor Ort. Absolute Empfehlung!', 'Dijar Bislimi', 'Google · 26. Oktober 2024'],
+    ['samir', 'Super Firma und einfach tolle Mitarbeiter', 'Redzepi Samir', 'Google · 26. Oktober 2024'],
+    ['artur', 'Von der Planung bis zur Ausführung top zufrieden. Sehr empfehlenswert.', 'Artur', 'Google · 9. Mai 2024'],
+];
+
+$marken = ['Busch-Jaeger', 'JUNG', 'KNX', 'Gira', 'hager', 'Siedle'];
+
+// Die sechs Punkte, mit denen der bestehende Auftritt unter „Über uns“ für sich wirbt.
+$staerken = [
+    ['zufriedenheit', 'star', 'Kundenzufriedenheit', 'Im Mittelpunkt steht der Kunde. Unser Ziel ist, Ihre Wünsche zu Ihrer vollsten Zufriedenheit zu erfüllen.'],
+    ['qualitaet', 'shield', 'Qualität', 'Ausschließlich Qualitätsware aus deutschen Markenprodukten.'],
+    ['erfahrung', 'clock', 'Erfahrung', 'Über 35 Jahre Erfahrung sprechen für sich.'],
+    ['flexibel', 'network', 'Flexibel', 'Durch zahlreiche Partner können wir auch bei komplexen Aufgaben schnell reagieren.'],
+    ['professionell', 'hardware', 'Professionell', 'Professionelle Werkzeuge für einen reibungslosen Ablauf auf Ihrer Baustelle.'],
+    ['sauber', 'check', 'Schnell & sauber', 'Saubere Arbeit in vergleichbar schnellem Arbeitstempo.'],
+];
+
+$leistungstexte = [
+    'elektroinstallation' => ['Elektroinstallation in Baden-Baden | Elektro Bernhard', 'Elektroinstallation für Neubau und Altbau', 'Sie bauen neu oder modernisieren ein bestehendes Gebäude? Wir begleiten Ihre Elektroinstallation von der Planung bis zur Umsetzung.', [
+        ['Neubau und Altbau', 'Die passende Elektroinstallation beginnt mit Ihren Anforderungen: Welche Räume nutzen Sie wie? Wo benötigen Sie Anschlüsse? Gemeinsam besprechen wir Ihr Vorhaben und schaffen eine Grundlage für die weitere Planung.'],
+        ['Material und Ausführung', 'Wir setzen auf Markenprodukte, professionelles Werkzeug und sorgfältige Ausführung. Auch bei komplexeren Aufgaben greifen wir auf unser Partnernetzwerk zurück.'],
+    ]],
+    'smart-home' => ['Smart Home in Baden-Baden | Elektro Bernhard', 'Smart Home für Ihr Zuhause', 'Licht, Heizung und Sicherheitsfunktionen intelligent steuern: Wir planen Smart-Home-Lösungen passend zu Ihrem Gebäude und Ihren Gewohnheiten.', [
+        ['Was möchten Sie steuern?', 'Im Mittelpunkt steht Ihr Alltag. Wir besprechen, welche Funktionen Sie vereinfachen möchten und wie eine individuelle Steuerung dabei helfen kann.'],
+        ['Welche Technik passt zum Gebäude?', 'Bevor wir eine Lösung empfehlen, betrachten wir Ihre Wünsche und die Gegebenheiten vor Ort. So lässt sich klären, welche Technik zu Ihrem Projekt passt.'],
+    ]],
+    'notdienst' => ['24h Elektro-Notdienst in Baden-Baden | Elektro Bernhard', '24h Elektro-Notdienst', 'Bei elektrischen Notfällen ist unser Kundendienst rund um die Uhr unter '.$notdienst.' erreichbar. Schildern Sie uns am Telefon das Problem und Ihren Standort.', [
+        ['Für die Region erreichbar', 'Unser Einsatzgebiet umfasst Baden-Baden, Hügelsheim, Iffezheim, Rastatt, Kuppenheim, Gaggenau, Gernsbach, Muggensturm, das Murgtal und die Umgebung. Die konkrete Verfügbarkeit für Ihren Standort klären wir im Gespräch.'],
+        ['Der direkte Weg zur Hilfe', 'Für einen Notfall nutzen Sie bitte die Notdienstnummer. Das Kontaktformular ist für reguläre Anfragen gedacht und wird nicht durchgehend überwacht.'],
+    ]],
+    'beratung-planung' => ['Elektroplanung & Beratung in Baden-Baden | Elektro Bernhard', 'Beratung und Elektroplanung', 'Ob erste Idee oder konkretes Vorhaben: Wir beraten Sie individuell und begleiten die Planung Ihrer Elektrotechnik.', [
+        ['Ihr Vorhaben', 'Erzählen Sie uns, was Sie vorhaben. Gemeinsam besprechen wir den Umfang und die Anforderungen Ihres Projekts – vom einzelnen Bereich bis zum Neu- oder Altbau.'],
+        ['Ein Ansprechpartner für die Umsetzung', 'Beratung, Planung und Installation greifen bei uns ineinander. Wir stimmen die nächsten Schritte mit Ihnen ab und behalten Ihre Anforderungen im Blick.'],
+    ]],
+];
+
+// ---------------------------------------------------------------------------------------------
+// Wiederkehrende Abschnitte
+// ---------------------------------------------------------------------------------------------
+
+/**
+ * Der dunkle Seitenkopf jeder Unterseite. Er liegt unter dem schwebenden Kopfbereich, deshalb
+ * beginnt sein Inhalt erst 200 px weiter unten; die Brotkrumen stehen darin in Weiß.
+ */
+$seitenkopf = static function (string $praefix, string $label, string $h1, string $intro = '', array $zusatz = []) use ($section, $eyebrow, $heading, $text, $fx, $fliessHell): array {
+    $kinder = [
+        ['id' => $praefix.'-brotkrumen', 'type' => 'breadcrumb', 'style' => ['desktop' => ['color' => '#ffffffb3', 'margin' => ['bottom' => '28px']]]],
+        $fx($eyebrow($praefix.'-label', $label, '#ff7d90'), 'fade'),
+        $fx($heading($praefix.'-h1', $h1, 1, ['desktop' => ['fontSize' => '56px', 'lineHeight' => 1.08, 'letterSpacing' => '-0.03em', 'fontWeight' => '900', 'color' => '@papier', 'maxWidth' => '820px', 'margin' => ['bottom' => '18px']], 'mobile' => ['fontSize' => '36px']]), 'rise', 'short'),
+    ];
+    if ('' !== $intro) {
+        $kinder[] = $fx($text($praefix.'-intro', $intro, ['desktop' => [...$fliessHell['desktop'], 'fontSize' => '19px', 'maxWidth' => '680px']]), 'rise', 'medium');
+    }
+    foreach ($zusatz as $block) {
+        $kinder[] = $fx($block, 'rise', 'long');
+    }
+
+    return $section($praefix.'-kopf', $kinder, [
+        'desktop' => ['backgroundColor' => '@tinte', 'color' => '@papier', 'padding' => ['top' => '200px', 'bottom' => '80px']],
+        'mobile' => ['padding' => ['top' => '166px', 'bottom' => '56px']],
+    ]);
+};
+
+/** Der schmale Textkörper einer Unterseite. */
+$textkoerper = static function (string $praefix, array $absaetze, array $vorspann = [], array $schluss = []) use ($section, $heading, $text, $fliess): array {
+    $kinder = $vorspann;
+    foreach ($absaetze as $i => [$titel, $inhalt]) {
+        if ('' !== $titel) {
+            $kinder[] = $heading($praefix.'-h2-'.$i, $titel, 2, ['desktop' => ['fontSize' => '28px', 'lineHeight' => 1.25, 'letterSpacing' => '-0.02em', 'fontWeight' => '900', 'margin' => ['top' => '40px', 'bottom' => '14px']]]);
+        }
+        $kinder[] = $text($praefix.'-p-'.$i, $inhalt, $fliess);
+    }
+    foreach ($schluss as $block) {
+        $kinder[] = $block;
+    }
+
+    return $section($praefix.'-inhalt', $kinder, ['desktop' => ['maxWidth' => '860px', 'padding' => ['top' => '72px', 'bottom' => '96px']], 'mobile' => ['padding' => ['top' => '48px', 'bottom' => '64px']]]);
+};
+
+/** Der Kontaktabschnitt – auf Startseite und Kontaktseite derselbe Aufbau. */
+$kontaktAbschnitt = static function (string $praefix) use ($section, $row, $column, $heading, $text, $eyebrow, $kontaktBlock, $fx, $fliess, $h2Stil, $h3Stil, $alleEcken, $alleSeiten, $buero, $mail): array {
+    return $section($praefix.'-kontakt', [
+        $row($praefix.'-kontakt-zeile', [
+            $column($praefix.'-kontakt-links', [
+                $fx($eyebrow($praefix.'-kontakt-label', 'Kontakt'), 'fade'),
+                $fx($heading($praefix.'-kontakt-titel', 'Wie können wir Ihnen helfen?', 2, $h2Stil), 'rise'),
+                $fx($text($praefix.'-kontakt-text', 'Rufen Sie uns an oder schreiben Sie uns, welche Arbeiten Sie planen. Bitte geben Sie auch den Ort an – wir melden uns innerhalb von 24 Stunden.', $fliess), 'rise', 'short'),
+                $fx($kontaktBlock($praefix.'-kontakt-daten', ['phone' => $buero, 'email' => $mail], ['desktop' => ['fontSize' => '28px', 'fontWeight' => '900', 'letterSpacing' => '-0.02em', 'gap' => '12px', 'margin' => ['top' => '18px', 'bottom' => '30px']], 'mobile' => ['fontSize' => '22px']]), 'rise', 'medium'),
+                $row($praefix.'-kontakt-details', [
+                    $column($praefix.'-kontakt-anschrift', [
+                        $heading($praefix.'-kontakt-anschrift-titel', 'Hier finden Sie uns', 3, ['desktop' => ['fontSize' => '15px', 'fontWeight' => '700', 'margin' => ['bottom' => '8px']]]),
+                        $text($praefix.'-kontakt-anschrift-text', "Elektro Bernhard GmbH\nOoser Hauptstr. 51\n76532 Baden-Baden", ['desktop' => ['fontSize' => '15px', 'lineHeight' => 1.7, 'color' => '@gedaempft']]),
+                        $text($praefix.'-kontakt-route', '<a href="https://www.google.com/maps/search/?api=1&amp;query=Elektro+Bernhard+Ooser+Hauptstr.+51+Baden-Baden" target="_blank">Route auf Google Maps →</a>', ['desktop' => ['fontSize' => '15px', 'fontWeight' => '700', 'color' => '@rot', 'margin' => ['top' => '10px']]]),
+                    ]),
+                    $column($praefix.'-kontakt-zeiten', [
+                        $heading($praefix.'-kontakt-zeiten-titel', 'Bürozeiten', 3, ['desktop' => ['fontSize' => '15px', 'fontWeight' => '700', 'margin' => ['bottom' => '8px']]]),
+                        $text($praefix.'-kontakt-zeiten-text', "Mo–Do: 07:00–16:30 Uhr\nFr: 07:00–13:00 Uhr\nSa–So: geschlossen", ['desktop' => ['fontSize' => '15px', 'lineHeight' => 1.7, 'color' => '@gedaempft']]),
+                        $text($praefix.'-kontakt-zeiten-notdienst', '<strong>Notdienst: 24/7 erreichbar</strong>', ['desktop' => ['fontSize' => '15px', 'margin' => ['top' => '10px']]]),
+                    ]),
+                ], ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '26px'], 'margin' => ['top' => '0px']]]),
+            ]),
+            $fx($column($praefix.'-kontakt-rechts', [
+                $heading($praefix.'-formular-titel', 'Schreiben Sie uns', 3, $h3Stil),
+                $text($praefix.'-formular-hinweis', 'Für einen Notfall nutzen Sie bitte die Notdienstnummer.', ['desktop' => ['fontSize' => '14px', 'color' => '@gedaempft', 'margin' => ['bottom' => '22px']]]),
+                ['id' => $praefix.'-formular', 'type' => 'form', 'props' => ['form' => 'kontakt']],
+            ], ['desktop' => ['backgroundColor' => '@papier', 'padding' => $alleSeiten('40px'), 'borderRadius' => $alleEcken('20px')], 'mobile' => ['padding' => $alleSeiten('24px')]]), 'rise', 'short', null, 'strong'),
+        ], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+    ], ['desktop' => ['backgroundColor' => '@weich']], 'kontakt');
+};
+
+// ---------------------------------------------------------------------------------------------
+// Startseite
+// ---------------------------------------------------------------------------------------------
+
+$startseite = [
+    'schemaVersion' => $SCHEMA,
+    'title' => 'Elektro Bernhard GmbH',
+    'description' => 'Elektroinstallation, Smart Home und 24h-Notdienst in Baden-Baden, Rastatt und Umgebung. Über 35 Jahre Erfahrung. Jetzt Elektro Bernhard kontaktieren.',
+    'blocks' => [
+        // 1 – Hero: das Teamfoto als Hintergrund, dunkel überlagert, weißer Titel.
+        $section('hero', [
+            $column('hero-text', [
+                $fx($eyebrow('hero-label', 'Elektro Bernhard GmbH · Seit über 35 Jahren', '#ff7d90'), 'fade'),
+                $fx($heading('hero-titel', "Ihr Elektriker in\nBaden-Baden.", 1, ['desktop' => ['fontSize' => '76px', 'lineHeight' => 1.04, 'letterSpacing' => '-0.035em', 'fontWeight' => '900', 'color' => '@papier', 'margin' => ['bottom' => '24px']], 'tablet' => ['fontSize' => '56px'], 'mobile' => ['fontSize' => '40px']]), 'rise', 'short'),
+                $fx($text('hero-intro', 'Ob Neubau, Sanierung oder eine Störung an der Elektrik: Wir kümmern uns darum. Für Privatkunden und Betriebe in Baden-Baden, Rastatt und Umgebung.', ['desktop' => ['color' => '#ffffffd9', 'fontSize' => '20px', 'lineHeight' => 1.65, 'maxWidth' => '600px', 'margin' => ['bottom' => '34px']], 'mobile' => ['fontSize' => '17px']]), 'rise', 'medium'),
+                $fx($row('hero-aktionen', [
+                    $column('hero-aktion-anfrage', [$button('hero-anfrage', 'Anfrage stellen', '/kontakt')]),
+                    $column('hero-aktion-telefon', [
+                        $kontaktBlock('hero-telefon', ['phone' => $buero], ['desktop' => [
+                            'color' => '@papier', 'fontSize' => '15px', 'fontWeight' => '700', 'minHeight' => '54px', 'alignItems' => 'center', 'justifyContent' => 'center',
+                            'padding' => ['top' => '14px', 'right' => '24px', 'bottom' => '14px', 'left' => '20px'],
+                            'borderWidth' => $alleSeiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#ffffff66', 'borderRadius' => $alleEcken('8px'),
+                            'hover' => ['backgroundColor' => '#ffffff1f', 'borderColor' => '@papier'],
+                        ]]),
+                    ]),
+                ], ['desktop' => ['columns' => 'auto', 'gap' => 'small'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]), 'rise', 'long'),
+                $fx($row('hero-zahlen', [
+                    ['id' => 'hero-zahl-jahre', 'type' => 'stat', 'props' => ['value' => '35+', 'label' => 'Jahre Erfahrung']],
+                    ['id' => 'hero-zahl-team', 'type' => 'stat', 'props' => ['value' => '11', 'label' => 'Mitarbeiter im Team']],
+                    ['id' => 'hero-zahl-notdienst', 'type' => 'stat', 'props' => ['value' => '24h', 'label' => 'Notdienst erreichbar']],
+                ], ['desktop' => ['columns' => 'three', 'gap' => 'medium'], 'mobile' => ['columns' => 'three', 'gap' => 'small']], ['desktop' => ['margin' => ['top' => '56px'], 'padding' => ['top' => '28px'], 'borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '#ffffff2e', 'color' => '@papier', 'fontSize' => '36px', 'maxWidth' => '640px'], 'mobile' => ['fontSize' => '24px', 'margin' => ['top' => '36px']]]), 'fade', 'long'),
+            ], ['desktop' => ['maxWidth' => '780px']]),
+        ], [
+            'desktop' => ['backgroundImage' => $medien['team']['id'], 'backgroundSize' => 'cover', 'backgroundPosition' => 'center', 'overlayColor' => '#0e1013', 'overlayOpacity' => 0.68,
+                'color' => '@papier', 'minHeight' => '92dvh', 'padding' => ['top' => '230px', 'bottom' => '100px'], 'display' => 'flex', 'alignItems' => 'center'],
+            'mobile' => ['padding' => ['top' => '176px', 'bottom' => '64px'], 'minHeight' => 'auto'],
+        ]),
+
+        // 2 – Leistungen: vier Karten
+        $section('leistungen', [
+            $row('leistungen-kopf', [
+                $column('leistungen-kopf-titel', [
+                    $fx($eyebrow('leistungen-label', 'Unsere Leistungen'), 'fade'),
+                    $fx($heading('leistungen-titel', 'Elektrotechnik aus einer Hand', 2, $h2Stil), 'rise'),
+                ]),
+                $column('leistungen-kopf-text', [
+                    $fx($text('leistungen-intro', 'Wir übernehmen Beratung, Planung und Installation. Auch nach Abschluss der Arbeiten erreichen Sie uns bei Fragen oder Störungen.', ['desktop' => [...$fliess['desktop'], 'maxWidth' => '460px']]), 'rise', 'short'),
+                ], ['desktop' => ['alignSelf' => 'flex-end']]),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px', 'bottom' => '40px']]]),
+            $row('leistungen-raster', array_map(
+                static fn (array $l, int $i): array => [...$karte('leistung-'.$l[0], $l[1], $l[2], $l[3], '/leistungen/'.$l[0]), 'layout' => ['effects' => ['shadow' => 'soft', 'hover' => 'lift', 'entrance' => 'rise', 'delay' => ['none', 'short', 'medium', 'long'][$i]]]],
+                $leistungen, array_keys($leistungen),
+            ), ['desktop' => ['columns' => 'four', 'gap' => 'medium'], 'tablet' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+        ], [], 'service'),
+
+        // 3 – Über uns: Foto mit Schatten, daneben Text und die Stärken
+        $section('unternehmen', [
+            $row('ueber-uns-zeile', [
+                $column('ueber-uns-bild-spalte', [
+                    $fx($bild('ueber-uns-bild', $medien['schaltschrank'], 'Elektrofachkraft bei der Arbeit an einem Schaltschrank', ['desktop' => ['imageHeight' => '560px', 'objectFit' => 'cover', 'imageRadius' => $alleEcken('20px')], 'mobile' => ['imageHeight' => '340px']]), 'left', 'none', null, 'strong'),
+                ], ['desktop' => ['alignSelf' => 'center']]),
+                $column('ueber-uns-text', [
+                    $fx($eyebrow('ueber-uns-label', 'Über uns'), 'fade'),
+                    $fx($heading('ueber-uns-titel', 'Ein Betrieb mit Tradition – und moderner Technik', 2, $h2Stil), 'rise'),
+                    $fx($text('ueber-uns-1', 'Elektro Bernhard kommt ursprünglich aus Hügelsheim. Heute finden Sie uns in der Ooser Hauptstraße 51 in Baden-Baden. Elektroinstallation und Kundenservice gehören seit über 35 Jahren zu unserer Arbeit; 2017 wurde der Betrieb modernisiert – seitdem mit dem Schwerpunkt auf Gebäudetechnik und Smart Home.', $fliess), 'rise', 'short'),
+                    $fx($row('staerken-raster', array_map(
+                        static fn (array $s): array => $punkt('staerke-'.$s[0], $s[1], $s[2], $s[3]),
+                        array_slice($staerken, 0, 4),
+                    ), ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '10px']]]), 'rise', 'medium'),
+                    $fx($text('ueber-uns-link', '<a href="/leistungen">Mehr über unsere Arbeit →</a>', $linkStil), 'fade', 'long'),
+                ], ['desktop' => ['alignSelf' => 'center']]),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+        ], ['desktop' => ['backgroundColor' => '@weich']], 'ueber-uns'),
+
+        // 4 – Kundenstimmen als Slider
+        $section('stimmen', [
+            $row('stimmen-kopf', [
+                $column('stimmen-kopf-titel', [
+                    $fx($eyebrow('stimmen-label', 'Google-Bewertungen'), 'fade'),
+                    $fx($heading('stimmen-titel', 'Was unsere Kunden sagen', 2, $h2Stil), 'rise'),
+                ]),
+                $column('stimmen-kopf-link', [
+                    $fx($button('stimmen-link', 'Auf Google bewerten', 'https://g.page/ElektroBernhardbadenbaden', ['desktop' => ['margin' => ['top' => '0px']]], ['desktop' => ['appearance' => 'outline']]), 'fade', 'short'),
+                ], ['desktop' => ['display' => 'flex', 'justifyContent' => 'flex-end', 'alignItems' => 'flex-end'], 'mobile' => ['justifyContent' => 'flex-start']]),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px', 'bottom' => '36px']]]),
+            ['id' => 'stimmen-slider', 'type' => 'slider', 'props' => ['desktopVisible' => 3, 'tabletVisible' => 2, 'mobileVisible' => 1, 'snap' => true, 'dots' => true, 'autoplay' => 7],
+                'children' => array_map(static function (array $s) use ($alleEcken, $alleSeiten): array {
+                    return [
+                        'id' => 'stimme-'.$s[0], 'type' => 'quote',
+                        'props' => ['text' => $s[1], 'author' => $s[2], 'role' => $s[3], 'rating' => 5],
+                        'style' => ['desktop' => ['backgroundColor' => '@papier', 'padding' => $alleSeiten('30px'), 'borderWidth' => $alleSeiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie', 'borderRadius' => $alleEcken('16px'), 'fontSize' => '16px', 'height' => '100%']],
+                        'css' => "& .quote-rating{color:#e8a300;letter-spacing:3px;font-size:15px}\n& figcaption span{display:block;color:#5d636b;font-weight:400;font-size:13px;margin-top:4px}",
+                        'layout' => ['effects' => ['shadow' => 'soft']],
+                    ];
+                }, $stimmen)],
+            $text('stimmen-hinweis', 'Ausgewählte Google-Rezensionen aus 2024. Stand der Auswahl: 14.09.2026. Es wird kein Gesamtdurchschnitt ausgewiesen.', ['desktop' => ['fontSize' => '13px', 'color' => '@gedaempft', 'margin' => ['top' => '24px']]]),
+        ]),
+
+        // 5 – Marken
+        $section('marken', [
+            $row('marken-zeile', array_merge(
+                [$column('marken-label-spalte', [$text('marken-label', 'Wir arbeiten mit bewährten Marken', ['desktop' => ['color' => '@gedaempft', 'fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '0.12em', 'textTransform' => 'uppercase']])])],
+                array_map(static fn (string $name, int $i): array => [
+                    'id' => 'marke-'.($i + 1), 'type' => 'column',
+                    'children' => [['id' => 'marke-name-'.($i + 1), 'type' => 'text', 'props' => ['text' => $name], 'style' => ['desktop' => ['fontSize' => '24px', 'fontWeight' => '900', 'letterSpacing' => '-0.04em', 'color' => '#6b7178', 'textAlign' => 'center'], 'mobile' => ['fontSize' => '20px']]]],
+                ], $marken, array_keys($marken)),
+            ), [], ['desktop' => ['display' => 'flex', 'flexWrap' => 'wrap', 'alignItems' => 'center', 'justifyContent' => 'space-between', 'gap' => '40px', 'margin' => ['top' => '0px']], 'mobile' => ['gap' => '22px', 'justifyContent' => 'center']]),
+        ], ['desktop' => ['padding' => ['top' => '40px', 'bottom' => '40px'], 'borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '1px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '@linie'], 'mobile' => ['padding' => ['top' => '32px', 'bottom' => '32px']]]),
+
+        // 6 – Solar: dunkles Band
+        $section('energie', [
+            $row('energie-zeile', [
+                $column('energie-text', [
+                    $fx($eyebrow('energie-label', 'Regenerative Energie', '#ff7d90'), 'fade'),
+                    $fx($heading('energie-titel', 'Sie planen eine Solaranlage?', 2, ['desktop' => [...$h2Stil['desktop'], 'color' => '@papier'], 'mobile' => $h2Stil['mobile']]), 'rise'),
+                    $fx($text('energie-intro', 'Solaranlagen für Ihr Zuhause oder Geschäftsgebäude – mit der eigenständigen Elektro Bernhard Regenerative Energie GmbH.', $fliessHell), 'rise', 'short'),
+                    $fx($button('energie-knopf', 'Mehr über Solarenergie', '/regenerative-energie', ['desktop' => ['margin' => ['top' => '12px']]]), 'rise', 'medium'),
+                ], ['desktop' => ['alignSelf' => 'center']]),
+                $fx($column('energie-liste', [
+                    $punkt('energie-punkt-1', 'check', 'Individuelle Solarplanung', 'Auslegung nach Dach, Verbrauch und Ziel.', '#ff7d90', '#c2c6cc'),
+                    $punkt('energie-punkt-2', 'check', 'Fachgerechte Installation', 'Montage und Anschluss aus einer Hand.', '#ff7d90', '#c2c6cc'),
+                    $punkt('energie-punkt-3', 'check', 'Angebot für Ihr Gebäude', 'Transparent und auf Ihr Vorhaben zugeschnitten.', '#ff7d90', '#c2c6cc'),
+                ], ['desktop' => ['backgroundColor' => '@karte-dunkel', 'color' => '@papier', 'padding' => $alleSeiten('36px'), 'borderRadius' => $alleEcken('20px'), 'display' => 'flex', 'flexDirection' => 'column', 'gap' => '22px']]), 'right', 'short'),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+        ], ['desktop' => ['backgroundColor' => '@tinte', 'color' => '@papier']]),
+
+        // 7 – Häufige Fragen
+        $section('fragen', [
+            $row('fragen-zeile', [
+                $column('fragen-intro', [
+                    $fx($eyebrow('fragen-label', 'FAQ'), 'fade'),
+                    $fx($heading('fragen-titel', 'Häufige Fragen', 2, $h2Stil), 'rise'),
+                    $fx($text('fragen-text', 'Wenn Ihre Frage hier nicht dabei ist, rufen Sie uns gerne an.', ['desktop' => [...$fliess['desktop'], 'maxWidth' => '360px']]), 'rise', 'short'),
+                    $fx($kontaktBlock('fragen-telefon', ['phone' => $buero], ['desktop' => ['fontSize' => '18px', 'fontWeight' => '900', 'color' => '@rot', 'margin' => ['top' => '10px']]]), 'rise', 'medium'),
+                ]),
+                $column('fragen-liste', [
+                    ['id' => 'fragen-akkordeon', 'type' => 'accordion', 'children' => array_map(static function (array $f, int $i) use ($alleEcken): array {
+                        return [
+                            'id' => 'frage-'.($i + 1), 'type' => 'accordionitem', 'props' => ['title' => $f[0], 'open' => 0 === $i],
+                            'style' => ['desktop' => ['backgroundColor' => '@weich', 'borderStyle' => 'none', 'borderRadius' => $alleEcken('14px'), 'padding' => ['top' => '4px', 'right' => '24px', 'bottom' => '4px', 'left' => '24px']]],
+                            'css' => "& > summary{font-size:17px;padding:18px 0}\n& > summary::after{color:#c8102e}",
+                            'children' => [['id' => 'antwort-'.($i + 1), 'type' => 'text', 'props' => ['text' => $f[1]], 'style' => ['desktop' => ['fontSize' => '15px', 'color' => '@gedaempft', 'lineHeight' => 1.75, 'padding' => ['bottom' => '14px']]]]],
+                        ];
+                    }, $fragen, array_keys($fragen)), 'style' => ['desktop' => ['gap' => '12px']]],
+                ]),
+            ], ['desktop' => ['columns' => 'two', 'gap' => 'large'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+        ]),
+
+        // 8 – Kontakt
+        $kontaktAbschnitt('start'),
+    ],
+];
+
+// ---------------------------------------------------------------------------------------------
+// Seiten anlegen und veröffentlichen
+// ---------------------------------------------------------------------------------------------
+
+$erstellt = [];
+$anlegen = static function (string $slug, ?string $elternId, array $dokument, string $seoTitel = '', string $teilbild = '') use ($pages, $db, &$erstellt): string {
+    $id = $pages->createPage($slug, $elternId, 'page', $dokument);
+    // Der Dokumenttitel ist der kurze Name (Brotkrumen, Menüs); der lange steht in „Titel für die Suche“.
+    if ('' !== $seoTitel) {
+        $db->executeStatement('UPDATE page SET seo_title = ? WHERE id = ?', [$seoTitel, $id]);
+    }
+    // Das Bild beim Teilen; im Editor unter „Vorschaubild beim Teilen“.
+    if ('' !== $teilbild) {
+        $db->executeStatement('UPDATE page SET og_media_id = ? WHERE id = ?', [$teilbild, $id]);
+    }
+    $seite = $db->fetchAssociative('SELECT draft_revision_id, version FROM page WHERE id = ?', [$id]);
+    $pages->publish($id, $seite['draft_revision_id'], (int) $seite['version']);
+    $erstellt[$slug] = $id;
+    echo 'Seite angelegt: /'.$db->fetchOne('SELECT path FROM page WHERE id = ?', [$id])."\n";
+
+    return $id;
+};
+
+$anlegen('home', null, $startseite, 'Elektriker Baden-Baden | Elektro Bernhard GmbH', $medien['team']['id']);
+
+// Die Leistungsübersicht: Pfade wie /leistungen/smart-home brauchen im CMS eine Elternseite.
+$leistungenId = $anlegen('leistungen', null, [
+    'schemaVersion' => $SCHEMA, 'title' => 'Leistungen',
+    'description' => 'Elektroinstallation, Smart Home, 24h-Notdienst sowie Beratung und Planung von Elektro Bernhard in Baden-Baden.',
+    'blocks' => [
+        $seitenkopf('leistungen-seite', 'Unsere Leistungen', 'Elektrotechnik aus einer Hand', 'Wir übernehmen Beratung, Planung und Installation. Auch nach Abschluss der Arbeiten erreichen Sie uns bei Fragen oder Störungen.'),
+        $section('leistungen-seite-raster-abschnitt', [
+            $fx($heading('leistungen-seite-h2', 'Vier Leistungen, ein Ansprechpartner', 2, ['desktop' => [...$h2Stil['desktop'], 'margin' => ['bottom' => '36px']], 'mobile' => $h2Stil['mobile']]), 'rise'),
+            $row('leistungen-seite-raster', array_map(
+                static fn (array $l, int $i): array => [...$karte('leistungen-seite-'.$l[0], $l[1], $l[2], $l[3], '/leistungen/'.$l[0]), 'layout' => ['effects' => ['shadow' => 'soft', 'hover' => 'lift', 'entrance' => 'rise', 'delay' => ['none', 'short', 'medium', 'long'][$i]]]],
+                $leistungen, array_keys($leistungen),
+            ), ['desktop' => ['columns' => 'two', 'gap' => 'medium'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+        ]),
+        $section('leistungen-seite-staerken', [
+            $fx($eyebrow('staerken-label', 'Wer wir sind'), 'fade'),
+            $fx($heading('staerken-titel', 'Warum Elektro Bernhard', 2, $h2Stil), 'rise'),
+            $fx($text('staerken-intro', 'Seit über 35 Jahren Elektroinstallation und Kundenservice – seit der Modernisierung 2017 mit dem Schwerpunkt auf moderner Gebäudetechnik.', ['desktop' => [...$fliess['desktop'], 'maxWidth' => '620px', 'margin' => ['bottom' => '30px']]]), 'rise', 'short'),
+            $row('staerken-alle', array_map(static fn (array $s): array => $fx($punkt('staerke-seite-'.$s[0], $s[1], $s[2], $s[3]), 'rise', 'short'), $staerken),
+                ['desktop' => ['columns' => 'three', 'gap' => 'large'], 'tablet' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], ['desktop' => ['margin' => ['top' => '0px']]]),
+            $cta('leistungen-seite-cta'),
+        ], ['desktop' => ['backgroundColor' => '@weich']]),
+    ],
+], 'Leistungen | Elektro Bernhard GmbH', $medien['schaltschrank']['id']);
+
+foreach ($leistungen as [$slug, $icon, $name, $kurz]) {
+    [$titel, $h1, $intro, $absaetze] = $leistungstexte[$slug];
+    $knopf = 'notdienst' === $slug
+        ? $kontaktBlock($slug.'-notdienst-kontakt', ['phone' => $notdienst], ['desktop' => ['fontSize' => '30px', 'fontWeight' => '900', 'color' => '@papier', 'margin' => ['top' => '24px']]])
+        : $button($slug.'-anfrage', 'Projekt anfragen', '/kontakt', ['desktop' => ['margin' => ['top' => '20px']]]);
+    $anlegen($slug, $leistungenId, [
+        'schemaVersion' => $SCHEMA, 'title' => $name, 'description' => $intro,
+        'blocks' => [
+            $seitenkopf($slug, $name, $h1, $intro, [$knopf]),
+            $textkoerper($slug, array_merge($absaetze, [
+                ['Ihr Elektriker vor Ort', 'Elektro Bernhard GmbH · Ooser Hauptstr. 51 · 76532 Baden-Baden. Für Baden-Baden, Hügelsheim, Iffezheim, Rastatt, Kuppenheim, Gaggenau, Gernsbach, Muggensturm, das Murgtal und die Umgebung.'],
+            ]), [], [
+                $text($slug.'-zurueck', '<a href="/leistungen">Alle Leistungen ansehen →</a>', ['desktop' => [...$linkStil['desktop'], 'margin' => ['top' => '30px']]]),
+                $cta($slug.'-cta'),
+            ]),
+        ],
+    ], $titel, $medien['schaltschrank']['id']);
+}
+
+$anlegen('kontakt', null, [
+    'schemaVersion' => $SCHEMA, 'title' => 'Kontakt & Anfahrt',
+    'description' => 'Elektro Bernhard: Ooser Hauptstr. 51, Baden-Baden. Telefon '.$buero.'. Projekt anfragen oder 24h-Notdienst unter '.$notdienst.' erreichen.',
+    'blocks' => [
+        $seitenkopf('kontakt-seite', 'Kontakt & Anfahrt', 'Kontakt zu Elektro Bernhard', 'Schreiben Sie uns eine Nachricht oder rufen Sie direkt an – wir melden uns innerhalb von 24 Stunden.'),
+        $kontaktAbschnitt('seite'),
+    ],
+], 'Kontakt & Anfahrt | Elektro Bernhard Baden-Baden', $medien['team']['id']);
+
+$anlegen('regenerative-energie', null, [
+    'schemaVersion' => $SCHEMA, 'title' => 'Solarenergie',
+    'description' => 'Solaranlagen für Wohnhäuser und Geschäftsgebäude: Planung, Installation und individuelles Angebot der Elektro Bernhard Regenerative Energie GmbH.',
+    'blocks' => [
+        $seitenkopf('solar', 'Elektro Bernhard Regenerative Energie GmbH', 'Solaranlagen planen und installieren', 'Solarplanung und Installation für Ihr Zuhause oder Geschäftsgebäude.', [$button('solar-knopf', 'Solaranlage anfragen', '/kontakt', ['desktop' => ['margin' => ['top' => '20px']]])]),
+        $textkoerper('solar', [
+            ['Für Wohnhäuser und Geschäftsgebäude', 'Jedes Gebäude bringt andere Voraussetzungen mit. Die Elektro Bernhard Regenerative Energie GmbH plant und installiert Solaranlagen und erstellt ein maßgeschneidertes Angebot für Ihr Vorhaben.'],
+            ['Planung und Installation', 'Beschreiben Sie uns Ihr Gebäude und Ihre Vorstellungen. Auf dieser Grundlage besprechen wir die nächsten Schritte für Ihre Solarplanung.'],
+            ['Ihr Ansprechpartner', "<strong>Elektro Bernhard Regenerative Energie GmbH</strong><br>Ooser Hauptstr. 51 · 76532 Baden-Baden<br>Geschäftsführer: Ridvan Kantarci · HRB 741275"],
+            ['', 'Die Gesellschaft ist rechtlich eigenständig und unabhängig von der Elektro Bernhard GmbH.'],
+        ], [], [
+            $text('solar-kontaktlink', '<a href="/kontakt">Kontakt zur Solarplanung aufnehmen →</a>', ['desktop' => [...$linkStil['desktop'], 'margin' => ['top' => '30px']]]),
+            $cta('solar-cta'),
+        ]),
+    ],
+], 'Solarplanung & Installation | Elektro Bernhard Regenerative Energie', $medien['team']['id']);
+
+$anlegen('impressum', null, [
+    'schemaVersion' => $SCHEMA, 'title' => 'Impressum',
+    'description' => 'Anbieterangaben und Kontaktinformationen der Elektro Bernhard GmbH und der Elektro Bernhard Regenerative Energie GmbH.',
+    'blocks' => [
+        $seitenkopf('impressum', 'Rechtliche Informationen', 'Impressum'),
+        $textkoerper('impressum', [
+            ['Elektro Bernhard GmbH', "Ooser Hauptstr. 51<br>76532 Baden-Baden<br><br>Vertreten durch den Geschäftsführer Ridvan Kantarci.<br><br>Telefon: <a href=\"tel:+4972213944909\">+49 7221 3944909</a><br>E-Mail: <a href=\"mailto:$mail\">$mail</a><br><br>Handelsregister: HRB 731961<br>Umsatzsteuer-Identifikationsnummer: DE 815 618 082"],
+            ['Elektro Bernhard Regenerative Energie GmbH', "Eigenständige Gesellschaft, unabhängig von der Elektro Bernhard GmbH.<br>Ooser Hauptstr. 51<br>76532 Baden-Baden<br>Vertreten durch Ridvan Kantarci.<br>Handelsregister: HRB 741275"],
+            ['Gestaltung und Umsetzung', '<a href="https://www.kant-it.de/">Kant-IT Solutions</a>'],
+            ['Bildnachweise', 'Logo, Teamfoto und Elektroinstallationsmotiv aus dem bestehenden Webauftritt von Elektro Bernhard. Markenbezeichnungen gehören ihren jeweiligen Inhabern.'],
+        ]),
+    ],
+], 'Impressum | Elektro Bernhard GmbH');
+
+$anlegen('datenschutzerklaerung', null, [
+    'schemaVersion' => $SCHEMA, 'title' => 'Datenschutzhinweise',
+    'description' => 'Informationen zur Verarbeitung personenbezogener Daten bei Elektro Bernhard: Websitebesuch, Kontaktaufnahme und Ihre Rechte.',
+    'blocks' => [
+        $seitenkopf('datenschutz', 'Ihre Daten', 'Datenschutzhinweise', 'Hier erfahren Sie, wie wir Daten beim Besuch unserer Website und bei Ihrer Kontaktaufnahme verarbeiten.'),
+        $textkoerper('datenschutz', [
+            ['1. Verantwortlicher', "Elektro Bernhard GmbH, Ooser Hauptstr. 51, 76532 Baden-Baden. Geschäftsführer: Ridvan Kantarci. Telefon: +49 7221 3944909. E-Mail: <a href=\"mailto:$mail\">$mail</a>."],
+            ['2. Besuch der Website', 'Beim Aufruf verarbeitet der Hostingdienst technisch erforderliche Verbindungsdaten, insbesondere IP-Adresse, Zeitpunkt, angeforderte Adresse, Browserinformationen und HTTP-Status. Das dient der sicheren Bereitstellung und Fehleranalyse. Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Umfang und Dauer der Serverprotokollierung richten sich nach der eingesetzten Hostingkonfiguration.'],
+            ['3. Lokale Inhalte und Cookies', 'Die Website selbst setzt keine Analyse- oder Werbecookies ein. Bilder, Schriften und Gestaltung werden vom eigenen Webserver geladen. Es werden keine Trackingdienste oder Karten beim Seitenaufruf eingebettet.'],
+            ['4. Kontaktanfragen', 'Wenn Sie uns kontaktieren, verarbeiten wir die von Ihnen angegebenen Kontakt- und Inhaltsdaten zur Bearbeitung Ihrer Anfrage. Rechtsgrundlage ist bei vertragsbezogenen Anfragen Art. 6 Abs. 1 lit. b DSGVO, ansonsten unser berechtigtes Interesse an der Bearbeitung von Anfragen gemäß Art. 6 Abs. 1 lit. f DSGVO.<br><br>Das Kontaktformular dieser Website überträgt Ihre Angaben an unseren Server und versendet sie als E-Mail an uns. NOCH ZU PRÜFEN: Hostinganbieter, Verarbeitungsländer, Auftragsverarbeitung und konkrete Aufbewahrungsdauer ergänzen.<br><br>Wir löschen Anfragedaten, wenn sie für die Bearbeitung nicht mehr erforderlich sind und keine gesetzlichen Aufbewahrungspflichten oder berechtigten Gründe für eine weitere Speicherung bestehen.'],
+            ['5. Externe Links', 'Google Maps, Google-Bewertungen und unsere Profile in sozialen Netzwerken sind als Links eingebunden. Erst beim Öffnen eines solchen Links wird die jeweilige externe Website aufgerufen. Dort gelten die Datenschutzinformationen des betreffenden Anbieters.'],
+            ['6. Ihre Rechte', "Unter den gesetzlichen Voraussetzungen haben Sie Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung und Datenübertragbarkeit. Sie können einer Verarbeitung auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO widersprechen. Eine erteilte Einwilligung können Sie mit Wirkung für die Zukunft widerrufen.<br><br>Außerdem können Sie sich bei einer Datenschutzaufsichtsbehörde beschweren, beispielsweise beim Landesbeauftragten für den Datenschutz und die Informationsfreiheit Baden-Württemberg.<br><br>Für Fragen wenden Sie sich bitte an <a href=\"mailto:$mail\">$mail</a>."],
+        ]),
+    ],
+], 'Datenschutz | Elektro Bernhard GmbH');
+
+$fehlerId = $anlegen('404', null, [
+    'schemaVersion' => $SCHEMA, 'title' => 'Seite nicht gefunden',
+    'description' => 'Die gesuchte Seite existiert nicht oder wurde verschoben. Über die Startseite finden Sie zurück.',
+    'blocks' => [
+        $seitenkopf('fehler', 'Fehler 404', 'Seite nicht gefunden', 'Die gesuchte Seite existiert nicht oder wurde verschoben.', [$button('fehler-knopf', 'Zur Startseite', '/', ['desktop' => ['margin' => ['top' => '20px']]])]),
+    ],
+]);
+$db->executeStatement('UPDATE page SET robots = ? WHERE id = ?', ['noindex', $fehlerId]);
+
+// ---------------------------------------------------------------------------------------------
+// Menüs, Einstellungen, Weiterleitungen, Konto
+// ---------------------------------------------------------------------------------------------
+
+$seite = static fn (string $label, string $slug, string $anchor = ''): array => ['label' => $label, 'type' => 'page', 'pageId' => $erstellt[$slug], 'anchor' => $anchor, 'children' => []];
+
+$menus->save('header', 'Hauptnavigation', [
+    $seite('Leistungen', 'leistungen'),
+    $seite('Über uns', 'home', 'ueber-uns'),
+    $seite('Solarenergie', 'regenerative-energie'),
+    $seite('Kontakt', 'kontakt'),
+], 0);
+$menus->save('secondary', 'Notdienst', [
+    ['label' => '24h Notdienst '.$notdienst, 'type' => 'url', 'url' => 'tel:+4915125245851', 'icon' => 'phone', 'iconPosition' => 'before', 'children' => []],
+], 0);
+$menus->save('footer', 'Fußzeile', [
+    $seite('Unsere Leistungen', 'leistungen'),
+    $seite('Das Unternehmen', 'home', 'ueber-uns'),
+    $seite('Regenerative Energie', 'regenerative-energie'),
+    $seite('Kontakt & Anfahrt', 'kontakt'),
+], 0);
+$menus->save('legal', 'Rechtliches', [$seite('Impressum', 'impressum'), $seite('Datenschutz', 'datenschutzerklaerung')], 0);
+echo "Menüs angelegt\n";
+
+$settings->assignNotFoundPage($fehlerId, '');
+$settings->save([
+    'legalName' => 'Elektro Bernhard GmbH',
+    'description' => 'Elektrofachbetrieb in Baden-Baden, seit über 35 Jahren. Elektroinstallation für Neu- und Altbau, Smart Home, Beratung und Planung sowie ein 24h-Notdienst unter 0151 25245851. Bürozeiten Mo–Do 7:00–16:30 Uhr, Fr 7:00–13:00 Uhr.',
+    'phone' => $buero, 'email' => $mail,
+    'street' => 'Ooser Hauptstr. 51', 'postalCode' => '76532', 'city' => 'Baden-Baden', 'country' => 'DE',
+    // Die Profile, die der bestehende Auftritt selbst verlinkt - einmal hier, gezeigt vom Baustein
+    // „Soziale Profile“ in Kopfleiste und Fuß, geführt als sameAs in den strukturierten Daten.
+    'social' => [
+        'facebook' => 'https://www.facebook.com/elektrobernhardgmbh',
+        'instagram' => 'https://www.instagram.com/elektrobernhardgmbh/',
+        'google' => 'https://g.page/ElektroBernhardbadenbaden',
+    ],
+    'localBusiness' => true, 'llmsTxt' => true,
+    // Der Kopfbereich schwebt über dem dunklen Seitenkopf und bleibt beim Scrollen oben.
+    'stickyHeader' => true, 'headerOverlay' => true,
+    'motion' => 'always',
+    'homePath' => 'home', 'privacyPath' => 'datenschutzerklaerung', 'imprintPath' => 'impressum',
+    'consentBanner' => false, 'scrollTop' => true, 'scrollTopColor' => '@rot', 'scrollTopInk' => '@papier', 'postMetaHeader' => true,
+]);
+echo "Einstellungen gespeichert\n";
+
+foreach (['/datenschutz' => '/datenschutzerklaerung', '/service' => '/leistungen', '/ueber-uns' => '/home'] as $von => $nach) {
+    $redirects->save($von, $nach, 301);
+}
+echo "Weiterleitungen angelegt\n";
+
+$passwort = bin2hex(random_bytes(12));
+$db->insert('cms_user', ['id' => bin2hex(random_bytes(16)), 'username' => 'umut', 'password_hash' => password_hash($passwort, PASSWORD_BCRYPT), 'roles' => '["ROLE_ADMIN"]']);
+
+echo "\nFertig.\nVerwaltung: Benutzer „umut“, Passwort: $passwort\n";

scripts/seed-tagespflege-moldovan.php

@@ -0,0 +1,755 @@
+<?php
+
+/**
+ * Baut die Website „Tagespflege Jacqueline Moldovan“ als Inhalt dieses CMS auf.
+ *
+ * Vorlage ist das gelieferte Paket „Tagespflege_Moldovan_Website.zip“ (09.09.2026): ein Onepager
+ * aus index.html, style.css und script.js. Wortlaut, Farben, Schriftgrößen, Abstände und die
+ * Reihenfolge der Abschnitte sind daraus übernommen. Gebaut ist alles aus gewöhnlichen
+ * Bausteinen – kein eigener Baustein, kein eigenes Skript, keine externe Schrift.
+ *
+ * Zwei Stellen weichen bewusst ab:
+ *  - Das Kontaktformular verschickt serverseitig, statt im Mailprogramm des Besuchers eine
+ *    vorbereitete E-Mail zu öffnen. Der Hinweistext darunter sagt das entsprechend.
+ *  - Das Markenzeichen liegt in der Vorlage als SVG vor; die Medienverwaltung nimmt JPEG, PNG und
+ *    WebP. Verwendet wird deshalb marke.png, die verlustfreie Umsetzung derselben Zeichnung.
+ *
+ * Das Skript schreibt ausschließlich in die Datenbank aus DATABASE_URL und in MEDIA_DIRECTORY,
+ * beide müssen auf eine frische, migrierte Installation zeigen (siehe reset-tagespflege-moldovan.sh).
+ * Erstes Argument: der Ordner mit gemeinsam.webp, jacqueline-moldovan.png und marke.png.
+ */
+
+require dirname(__DIR__).'/config/bootstrap.php';
+
+use App\Content\DocumentValidator;
+use App\Content\FormRepository;
+use App\Content\MediaLibrary;
+use App\Content\MenuRepository;
+use App\Content\PageRepository;
+use App\Content\PartialRepository;
+use App\Content\SiteSettings;
+use App\Content\Theme;
+use App\Infrastructure\ConnectionFactory;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+$root = dirname(__DIR__);
+$assets = $argv[1] ?? null;
+if (null === $assets || !is_dir($assets)) {
+    fwrite(STDERR, "Bitte den Ordner mit den Bildern als Argument angeben.\n");
+    exit(1);
+}
+$url = str_replace('%kernel.project_dir%', str_replace('\\', '/', $root), (string) $_SERVER['DATABASE_URL']);
+$mediaDirectory = str_replace('%kernel.project_dir%', $root, (string) $_SERVER['MEDIA_DIRECTORY']);
+if (!str_contains($url, 'tagespflege-moldovan')) {
+    fwrite(STDERR, "Sicherung: DATABASE_URL muss auf die Moldovan-Datenbank zeigen.\n");
+    exit(1);
+}
+
+$db = ConnectionFactory::create($url);
+if (false !== $db->fetchOne('SELECT id FROM page LIMIT 1')) {
+    fwrite(STDERR, "Diese Datenbank enthält bereits Seiten. Abbruch, damit nichts überschrieben wird.\n");
+    exit(1);
+}
+
+$media = new MediaLibrary($db, $mediaDirectory);
+$settings = new SiteSettings($db, $media);
+$pages = new PageRepository($db, new DocumentValidator(), $settings);
+$partials = new PartialRepository($db, new DocumentValidator());
+$menus = new MenuRepository($db, $settings);
+$forms = new FormRepository($db);
+$theme = new Theme($db);
+
+$mail = 'info@tagespflege-moldovan.com';
+$telefon = '07221 / 922 7961';
+$telHref = 'tel:+4972219227961';
+$SCHEMA = 23;
+
+// ---------------------------------------------------------------------------------------------
+// Bausteine
+// ---------------------------------------------------------------------------------------------
+
+$ecken = static fn (string $r): array => ['topLeft' => $r, 'topRight' => $r, 'bottomRight' => $r, 'bottomLeft' => $r];
+$seiten = static fn (string $w): array => ['top' => $w, 'right' => $w, 'bottom' => $w, 'left' => $w];
+$nurOben = static fn (string $w): array => ['top' => $w, 'right' => '0px', 'bottom' => '0px', 'left' => '0px'];
+$nurUnten = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => $w, 'left' => '0px'];
+$nurLinks = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => '0px', 'left' => $w];
+
+$section = static function (string $id, array $children, array $style = [], ?string $anchor = null): array {
+    $block = ['id' => $id, 'type' => 'section', 'children' => $children, 'style' => $style];
+    if (null !== $anchor) {
+        $block['anchor'] = $anchor;
+    }
+
+    return $block;
+};
+
+/** Der Rhythmus der Vorlage: 100 px am Schreibtisch, 75 auf dem Tablet, 61 auf dem Telefon. */
+$abschnitt = static function (string $id, array $children, array $style = [], ?string $anchor = null) use ($section): array {
+    $basis = [
+        'desktop' => ['padding' => ['top' => '100px', 'bottom' => '100px']],
+        'tablet' => ['padding' => ['top' => '75px', 'bottom' => '75px']],
+        'mobile' => ['padding' => ['top' => '61px', 'bottom' => '61px']],
+    ];
+    foreach ($style as $device => $values) {
+        $basis[$device] = [...($basis[$device] ?? []), ...$values];
+    }
+
+    return $section($id, $children, $basis, $anchor);
+};
+
+$row = static function (string $id, array $children, array $design = [], array $style = []): array {
+    $block = ['id' => $id, 'type' => 'row', 'children' => $children];
+    if ([] !== $design) {
+        $block['layout'] = ['design' => $design];
+    }
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+
+    return $block;
+};
+
+/** Eine Zeile, die nebeneinander stellt statt zu rastern – Marke, Signatur, Wertepunkt, Zeitleiste. */
+$zeile = static function (string $id, array $children, string $gap, array $extra = [], array $mobil = [], array $tablet = []) use ($row): array {
+    $style = ['desktop' => ['display' => 'flex', 'alignItems' => 'center', 'gap' => $gap, 'margin' => ['top' => '0px'], ...$extra]];
+    if ([] !== $tablet) {
+        $style['tablet'] = $tablet;
+    }
+    if ([] !== $mobil) {
+        $style['mobile'] = $mobil;
+    }
+
+    return $row($id, $children, [], $style);
+};
+
+$column = static function (string $id, array $children, array $style = [], string $sichtbarkeit = 'all'): array {
+    $block = ['id' => $id, 'type' => 'column', 'children' => $children];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ('all' !== $sichtbarkeit) {
+        $block['layout'] = ['visibility' => $sichtbarkeit];
+    }
+
+    return $block;
+};
+
+$heading = static function (string $id, string $text, int $level, array $style = [], string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'heading', 'props' => ['text' => $text, 'level' => $level]];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+$text = static function (string $id, string $inhalt, array $style = [], string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'text', 'props' => ['text' => $inhalt]];
+    if ([] !== $style) {
+        $block['style'] = $style;
+    }
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+/** Eine reine Fläche: der Strich vor einer Kleinzeile, die Linie der Zeitleiste, die grüne Form. */
+$flaeche = static function (string $id, array $style, string $css = ''): array {
+    $block = ['id' => $id, 'type' => 'spacer', 'props' => ['size' => 'small'], 'style' => $style];
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+$button = static function (string $id, string $text, string $href, array $style = []): array {
+    return ['id' => $id, 'type' => 'button', 'props' => ['text' => $text, 'href' => $href], 'style' => $style];
+};
+
+$bild = static function (string $id, array $eintrag, string $alt, array $style = [], ?string $href = null, string $css = ''): array {
+    $gross = end($eintrag['variants']);
+    $props = [
+        'src' => $gross['src'], 'alt' => $alt, 'decorative' => '' === $alt, 'width' => $gross['width'], 'height' => $gross['height'],
+        'mediaId' => $eintrag['id'],
+        'sources' => array_map(static fn (array $v): array => ['src' => $v['src'], 'width' => $v['width']], $eintrag['variants']),
+    ];
+    if (null !== $href) {
+        $props['href'] = $href;
+        $props['click'] = 'link';
+    }
+
+    $block = ['id' => $id, 'type' => 'image', 'props' => $props, 'style' => $style];
+    if ('' !== $css) {
+        $block['css'] = $css;
+    }
+
+    return $block;
+};
+
+$symbol = static function (string $id, string $name, int $groesse, array $style = []): array {
+    return ['id' => $id, 'type' => 'icon', 'props' => ['icon' => $name, 'size' => $groesse, 'decorative' => true, 'label' => ''], 'style' => $style];
+};
+
+// Wiederkehrende Gestaltungswerte der Vorlage.
+$serif = ['fontFamily' => 'heading', 'fontWeight' => '400', 'letterSpacing' => '-0.045em', 'lineHeight' => 1.1];
+$h2Stil = ['desktop' => [...$serif, 'fontSize' => '53px', 'margin' => ['bottom' => '0px']], 'tablet' => ['fontSize' => '42px'], 'mobile' => ['fontSize' => '38px']];
+$emGruen = '& em{color:#718f3d;font-weight:400}';
+$fliess = ['desktop' => ['color' => '@gedaempft', 'fontSize' => '16px', 'lineHeight' => 1.65, 'margin' => ['bottom' => '20px']]];
+$klein = ['desktop' => ['fontSize' => '11px', 'fontWeight' => '700', 'letterSpacing' => '0.13em', 'color' => '#6a795e', 'lineHeight' => 1.5, 'margin' => ['bottom' => '0px']]];
+$h3Stil = ['desktop' => ['fontFamily' => 'body', 'fontSize' => '19px', 'fontWeight' => '500', 'letterSpacing' => '-0.025em', 'lineHeight' => 1.35, 'margin' => ['bottom' => '13px']]];
+
+/** Die Kleinzeile über einer Überschrift: ein kurzer Strich, dann Versalien. */
+$kleinzeile = static function (string $id, string $inhalt, string $farbe = '#527236', string $strich = '@gruen', string $abstand = '25px') use ($zeile, $flaeche, $text): array {
+    return $zeile($id, [
+        $flaeche($id.'-strich', ['desktop' => ['width' => '24px', 'height' => '3px', 'backgroundColor' => $strich, 'flexShrink' => 0]]),
+        $text($id.'-text', $inhalt, [
+            'desktop' => ['fontSize' => '12px', 'fontWeight' => '700', 'letterSpacing' => '0.16em', 'textTransform' => 'uppercase', 'lineHeight' => 1.7, 'color' => $farbe, 'margin' => ['bottom' => '0px']],
+            'mobile' => ['fontSize' => '11px'],
+        ]),
+    ], '11px', ['margin' => ['top' => '0px', 'bottom' => $abstand]], ['margin' => ['top' => '0px', 'bottom' => '18px']]);
+};
+
+// ---------------------------------------------------------------------------------------------
+// Website, Gestaltung, Medien, Formular
+// ---------------------------------------------------------------------------------------------
+
+$db->insert('website', ['id' => 'default', 'name' => 'Tagespflege Jacqueline Moldovan', 'default_locale' => 'de', 'theme' => '{}']);
+
+$theme->save(
+    [
+        ['key' => 'tinte', 'name' => 'Tinte', 'value' => '#294655'],
+        ['key' => 'blau', 'name' => 'Blau', 'value' => '#2e7595'],
+        ['key' => 'blau-dunkel', 'name' => 'Blau dunkel', 'value' => '#245e79'],
+        ['key' => 'dunkelblau', 'name' => 'Kontaktbereich', 'value' => '#284f63'],
+        ['key' => 'gruen', 'name' => 'Grün', 'value' => '#9abf56'],
+        ['key' => 'limette', 'name' => 'Limette', 'value' => '#c0d348'],
+        ['key' => 'oliv', 'name' => 'Oliv', 'value' => '#718f3d'],
+        ['key' => 'marke', 'name' => 'Markengrün', 'value' => '#83a944'],
+        ['key' => 'gedaempft', 'name' => 'Gedämpft', 'value' => '#647078'],
+        ['key' => 'blass', 'name' => 'Blass', 'value' => '#f3f6ef'],
+        ['key' => 'leiste', 'name' => 'Kopfleiste', 'value' => '#f1f4ee'],
+        ['key' => 'sand', 'name' => 'Werteband', 'value' => '#fafbf8'],
+        ['key' => 'linie', 'name' => 'Trennlinie', 'value' => '#dce3dd'],
+        ['key' => 'papier', 'name' => 'Papier', 'value' => '#ffffff'],
+    ],
+    [
+        // Beide Schriften stehen auf jedem Gerät bereit; die Vorlage lädt bewusst keine Webschrift.
+        ['key' => 'body', 'name' => 'Fließtext', 'family' => 'Arial', 'source' => 'system', 'weights' => [400, 600, 700], 'fallback' => 'sans-serif'],
+        ['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Georgia', 'source' => 'system', 'weights' => [400], 'fallback' => 'serif'],
+    ],
+    ['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '16px', 'lineHeight' => 1.65, 'color' => '@tinte', 'backgroundColor' => '@papier', 'linkColor' => '@tinte', 'containerWidth' => '1240px', 'headingScale' => 1.25, 'linkUnderline' => false],
+    ['shape' => 'square', 'appearance' => 'solid', 'size' => 'normal', 'fontFamily' => 'inherit', 'fontSize' => 15, 'fontWeight' => 600, 'letterSpacing' => 0, 'textTransform' => 'none', 'backgroundColor' => '@blau', 'color' => '@papier', 'hoverBackgroundColor' => '@blau-dunkel', 'hoverColor' => '@papier'],
+);
+echo "Farben, Schriften und Buttons gesetzt\n";
+
+$medien = [];
+foreach ([
+    'marke' => ['marke.png', 'Markenzeichen der Tagespflege Jacqueline Moldovan: ein Schmetterling in Grün und Blau'],
+    'gemeinsam' => ['gemeinsam.webp', 'Illustrative Szene: Eine Seniorin und eine Begleiterin lachen gemeinsam an einem Tisch.'],
+    'portraet' => ['jacqueline-moldovan.png', 'Jacqueline Moldovan'],
+] as $schluessel => [$datei, $alt]) {
+    $pfad = rtrim($assets, '/\\').'/'.$datei;
+    if (!is_file($pfad)) {
+        fwrite(STDERR, "Bild fehlt: $pfad\n");
+        exit(1);
+    }
+    $eintrag = $media->upload(new UploadedFile($pfad, $datei, null, null, true));
+    $media->update($eintrag['id'], ['title' => pathinfo($datei, PATHINFO_FILENAME), 'alt' => $alt, 'archived' => false, 'version' => $eintrag['version']]);
+    $medien[$schluessel] = $media->find($eintrag['id']);
+    echo "Bild übernommen: $datei\n";
+}
+
+$forms->save('kontakt', 'Kontaktanfrage', [
+    ['name' => 'name', 'type' => 'text', 'label' => 'Ihr Name', 'required' => true],
+    ['name' => 'email', 'type' => 'email', 'label' => 'E-Mail-Adresse', 'required' => true],
+    ['name' => 'telefon', 'type' => 'phone', 'label' => 'Telefon', 'required' => false, 'help' => 'Für einen persönlichen Rückruf'],
+    ['name' => 'nachricht', 'type' => 'textarea', 'label' => 'Ihre Nachricht', 'required' => true, 'help' => 'Erzählen Sie uns, was Ihnen wichtig ist.'],
+], ['recipient' => $mail, 'subject' => 'Neue Nachricht über tagespflege-moldovan.com', 'success' => 'Vielen Dank. Ihre Nachricht ist angekommen – wir melden uns bei Ihnen.', 'replyToField' => 'email'], 0);
+echo "Formular angelegt: kontakt\n";
+
+// ---------------------------------------------------------------------------------------------
+// Kopfbereich: schmale Leiste, darunter der weiße Kopf, der beim Scrollen oben bleibt
+// ---------------------------------------------------------------------------------------------
+
+/** Die Wortmarke: Schmetterling, darüber „Tagespflege“, darunter der Name. */
+$wortmarke = static function (string $praefix, string $bildhoehe, string $bildbreite, string $gross, string $klein) use ($zeile, $column, $bild, $text, $medien, $seiten): array {
+    return $zeile($praefix.'-zeile', [
+        $column($praefix.'-bild', [
+            $bild($praefix.'-logo', $medien['marke'], 'Tagespflege Jacqueline Moldovan', [
+                'desktop' => ['maxWidth' => $bildbreite, 'imageHeight' => $bildhoehe, 'objectFit' => 'contain', 'margin' => $seiten('0px')],
+            ], '/'),
+        ], ['desktop' => ['flexShrink' => 0]]),
+        $column($praefix.'-schrift', [
+            $text($praefix.'-name', 'Tagespflege', ['desktop' => ['fontSize' => $gross, 'fontWeight' => '700', 'letterSpacing' => '-0.04em', 'lineHeight' => 1.3, 'color' => '@marke', 'margin' => ['bottom' => '0px']]]),
+            $text($praefix.'-zusatz', 'Jacqueline Moldovan', ['desktop' => ['fontSize' => $klein, 'color' => '#62676b', 'lineHeight' => 1.3, 'margin' => ['top' => '3px', 'bottom' => '0px']]]),
+        ]),
+    ], '11px', ['flexShrink' => 0]);
+};
+
+$kopf = [
+    'schemaVersion' => $SCHEMA, 'title' => 'Kopfbereich', 'description' => 'Erscheint auf jeder Seite über dem Inhalt.',
+    'blocks' => [
+        $section('kopf-leiste', [
+            $row('kopf-leiste-zeile', [
+                $column('kopf-leiste-ort', [
+                    $text('kopf-leiste-ort-text', 'Mitten in Baden-Baden. Mitten im Leben.', ['desktop' => ['fontSize' => '14px', 'lineHeight' => 1.5, 'margin' => ['bottom' => '0px']]]),
+                ], [], 'hide-mobile'),
+                $column('kopf-leiste-kontakt', [
+                    $text('kopf-leiste-telefon', '<a href="'.$telHref.'">Ihr direkter Kontakt: '.$telefon.'</a>', [
+                        'desktop' => ['fontSize' => '14px', 'lineHeight' => 1.5, 'textAlign' => 'right', 'margin' => ['bottom' => '0px']],
+                        'mobile' => ['fontSize' => '12px', 'textAlign' => 'center'],
+                    ], '& a:hover{text-decoration:underline}'),
+                ]),
+            ], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], ['desktop' => ['alignItems' => 'center', 'margin' => ['top' => '0px']]]),
+        ], [
+            'desktop' => ['backgroundColor' => '@leiste', 'color' => '#506054', 'padding' => ['top' => '8px', 'bottom' => '8px']],
+        ]),
+        $section('kopf-haupt', [
+            $row('kopf-haupt-zeile', [
+                $column('kopf-marke', [$wortmarke('kopf-marke', '60px', '40px', '24px', '15px')], ['desktop' => ['flexShrink' => 0]]),
+                $column('kopf-navigation', [
+                    ['id' => 'kopf-menue', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'horizontal', 'collapse' => 'mobile', 'burgerLabel' => 'both'],
+                        'style' => ['desktop' => [
+                            'fontSize' => '15px', 'justifyContent' => 'flex-end', 'display' => 'flex',
+                            // Der Menü-Knopf im Zuschnitt der Vorlage: heller Rahmen, kaum gerundet.
+                            'burgerColor' => '@tinte', 'burgerBorderColor' => '#d8e0d1', 'burgerBorderRadius' => '3px', 'burgerFontSize' => '14px',
+                        ]],
+                        'css' => "& .menu-list{gap:4px 29px;justify-content:flex-end}\n& .menu-list a{transition:color .2s}\n& .menu-list a:hover{color:#688f30;text-decoration:none}\n& .menu-list>li:last-child>a{border:1px solid #cfd9ce;border-radius:4px;padding:12px 19px}",
+                    ],
+                ], ['desktop' => ['display' => 'flex', 'justifyContent' => 'flex-end', 'alignItems' => 'center']]),
+            ], [], [
+                'desktop' => ['display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'space-between', 'gap' => '25px', 'minHeight' => '100px', 'margin' => ['top' => '0px']],
+                'tablet' => ['minHeight' => '86px'],
+                'mobile' => ['minHeight' => '80px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '#fffffff7', 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e7ece7', 'padding' => ['top' => '0px', 'bottom' => '0px']],
+        ]),
+    ],
+];
+
+// ---------------------------------------------------------------------------------------------
+// Fußbereich
+// ---------------------------------------------------------------------------------------------
+
+$fuss = [
+    'schemaVersion' => $SCHEMA, 'title' => 'Fußbereich', 'description' => 'Erscheint auf jeder Seite unter dem Inhalt.',
+    'blocks' => [
+        $section('fuss', [
+            $zeile('fuss-oben', [
+                $column('fuss-marke', [$wortmarke('fuss-marke', '51px', '34px', '19px', '13px')], ['desktop' => ['flexShrink' => 0]]),
+                $column('fuss-spruch', [
+                    $text('fuss-spruch-text', 'Mit Aufmerksamkeit. Mit Freude. Mit Herz.', [
+                        'desktop' => ['fontFamily' => 'heading', 'fontStyle' => 'italic', 'fontSize' => '17px', 'color' => '#737b78', 'textAlign' => 'center', 'margin' => ['bottom' => '0px']],
+                        'tablet' => ['maxWidth' => '210px'],
+                        'mobile' => ['fontSize' => '15px', 'textAlign' => 'left', 'maxWidth' => '100%'],
+                    ]),
+                ], ['mobile' => ['order' => 3, 'flexBasis' => '100%']]),
+                $column('fuss-nachoben', [
+                    $text('fuss-nachoben-text', '<a href="#start">Nach oben ↑</a>', [
+                        'desktop' => ['fontSize' => '13px', 'textAlign' => 'right', 'margin' => ['bottom' => '0px']],
+                        'mobile' => ['margin' => ['left' => 'auto']],
+                    ], '& a:hover{text-decoration:underline}'),
+                ]),
+            ], '25px', ['justifyContent' => 'space-between', 'padding' => ['top' => '37px', 'bottom' => '37px']], ['flexWrap' => 'wrap', 'gap' => '22px', 'padding' => ['top' => '30px', 'bottom' => '30px']]),
+            $zeile('fuss-unten', [
+                $column('fuss-recht', [
+                    $text('fuss-copyright', '© 2026 Tagespflege Jacqueline Moldovan', ['desktop' => ['fontSize' => '12px', 'margin' => ['bottom' => '0px']], 'mobile' => ['fontSize' => '11px']]),
+                ]),
+                $column('fuss-hinweis', [
+                    $text('fuss-hinweis-text', 'Gestaltungsentwurf · Beispieltexte & illustratives KI-Bild', ['desktop' => ['fontSize' => '12px', 'textAlign' => 'right', 'margin' => ['bottom' => '0px']], 'mobile' => ['fontSize' => '11px', 'textAlign' => 'left']]),
+                ]),
+            ], '20px', ['justifyContent' => 'space-between', 'alignItems' => 'flex-start', 'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#e7ebe4', 'padding' => ['top' => '18px', 'bottom' => '18px'], 'color' => '#78817b'], ['flexDirection' => 'column', 'gap' => '7px']),
+        ], [
+            'desktop' => ['borderWidth' => $nurUnten('7px'), 'borderStyle' => 'solid', 'borderColor' => '@limette', 'padding' => ['top' => '0px', 'bottom' => '0px']],
+        ]),
+    ],
+];
+
+$partials->create('header', 'default', 'Kopfbereich', $kopf);
+$partials->create('footer', 'default', 'Fußbereich', $fuss);
+echo "Kopf- und Fußbereich angelegt\n";
+
+// ---------------------------------------------------------------------------------------------
+// Startseite
+// ---------------------------------------------------------------------------------------------
+
+$werte = ['Persönlich begleitet', 'Gemeinsam aktiv', 'Mit Freude durch den Tag'];
+
+// Nummer, Symbol, Farbe des oberen Rands, Titel, Text – die drei Karten aus „Unser Angebot“.
+$angebote = [
+    ['01 / MITEINANDER', 'people', '#a9c563', '#f0f5e7', '#6b8f36', 'Gesellschaft genießen', 'Erzählen, zuhören, gemeinsam lachen. Hier können aus Begegnungen vertraute Beziehungen werden.'],
+    ['02 / LEBENSFREUDE', 'music', '#4285a2', '#edf5f8', '#347895', 'Mit Freude aktiv sein', 'Musik, Bewegung und kreative Momente bringen Abwechslung in den Tag. Jeder macht mit, wie es sich gut anfühlt.'],
+    ['03 / GEBORGENHEIT', 'home', '#bdce62', '#f0f5e7', '#6b8f36', 'Sich aufgehoben fühlen', 'Ein liebevoll gedeckter Tisch, Zeit zum Durchatmen und aufmerksame Begleitung geben dem Tag einen vertrauten Rahmen.'],
+];
+
+$tagesablauf = [
+    ['01', 'ANKOMMEN', 'In Ruhe in den Tag starten', 'Ein freundliches Willkommen, ein gemeinsames Frühstück und Zeit für die ersten Gespräche.'],
+    ['02', 'GEMEINSAM ERLEBEN', 'Den Vormittag gestalten', 'Ein Spiel, etwas Bewegung oder gemeinsam kreativ werden – passend zu Lust und Möglichkeiten.'],
+    ['03', 'GENIESSEN & AUSRUHEN', 'Zeit für eine Pause', 'Zusammen Mittag essen und anschließend entspannen. Jeder darf seinen eigenen Rhythmus finden.'],
+    ['04', 'DEN TAG AUSKLINGEN LASSEN', 'Mit einem Lächeln nach Hause', 'Kaffee, eine gemütliche Runde und schöne Erinnerungen, die mit nach Hause gehen.'],
+];
+
+$startseite = [
+    'schemaVersion' => $SCHEMA,
+    'title' => 'Tagespflege Moldovan',
+    'description' => 'Tagespflege Jacqueline Moldovan in Baden-Baden. Ein Ort für Begegnung, Geborgenheit und schöne gemeinsame Tage.',
+    'blocks' => [
+        // 1 – Hero: Text links, Foto rechts auf einer limettenen Form, Notizkarte darüber.
+        $section('hero', [
+            $row('hero-zeile', [
+                $column('hero-text', [
+                    $kleinzeile('hero-label', 'Tagespflege in Baden-Baden'),
+                    $heading('hero-titel', 'Ein schöner Tag.<br>Ein gutes Gefühl.<br><em>Ein Stück Zuhause.</em>', 1, [
+                        'desktop' => [...$serif, 'fontSize' => '68px', 'margin' => ['bottom' => '25px']],
+                        'tablet' => ['fontSize' => '42px'],
+                        'mobile' => ['fontSize' => '43px', 'lineHeight' => 1.12, 'margin' => ['bottom' => '21px']],
+                    ], $emGruen),
+                    $text('hero-intro', 'Gemeinsam lachen, Neues erleben und sich gut aufgehoben fühlen. Wir geben dem Tag Leben – und Angehörigen ein wenig Freiraum.', [
+                        'desktop' => ['maxWidth' => '465px', 'color' => '@gedaempft', 'fontSize' => '17px', 'lineHeight' => 1.8, 'margin' => ['bottom' => '28px']],
+                        'mobile' => ['fontSize' => '16px', 'maxWidth' => '520px'],
+                    ]),
+                    $zeile('hero-aktionen', [
+                        $column('hero-aktion-knopf', [
+                            $button('hero-knopf', 'Lernen wir uns kennen', '#kontakt', ['desktop' => ['borderRadius' => $ecken('4px'), 'margin' => ['top' => '0px']]]),
+                        ], ['desktop' => ['flexShrink' => 0]]),
+                        $column('hero-aktion-link', [
+                            $text('hero-textlink', '<a href="#bei-uns">Unsere Tagespflege entdecken ↓</a>', [
+                                'desktop' => ['fontSize' => '14px', 'padding' => ['top' => '15px', 'bottom' => '15px'], 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#cad4c8', 'margin' => ['bottom' => '0px']],
+                            ]),
+                        ], ['desktop' => ['flexShrink' => 0]]),
+                    ], '18px', ['alignItems' => 'flex-start', 'flexWrap' => 'wrap'], ['rowGap' => '8px', 'columnGap' => '20px']),
+                    $text('hero-notiz', "Tagsüber in guter Gesellschaft.\nAbends im vertrauten Zuhause.", [
+                        'desktop' => ['fontSize' => '14px', 'lineHeight' => 1.6, 'color' => '#737a7a', 'borderWidth' => $nurLinks('3px'), 'borderStyle' => 'solid', 'borderColor' => '@limette', 'padding' => ['left' => '15px'], 'margin' => ['top' => '29px', 'bottom' => '0px']],
+                        'mobile' => ['margin' => ['top' => '20px', 'bottom' => '0px']],
+                    ]),
+                ]),
+                $column('hero-visual', [
+                    // Die limettene Form hinter dem Foto – dieselbe Schnittkante wie in der Vorlage.
+                    $flaeche('hero-form', [
+                        'desktop' => ['position' => 'absolute', 'top' => '-19px', 'right' => '-17px', 'bottom' => '35px', 'left' => '35px', 'height' => 'auto', 'width' => 'auto', 'backgroundColor' => '@limette', 'zIndex' => 0],
+                        'mobile' => ['top' => '-14px', 'right' => '-9px', 'bottom' => '28px', 'left' => '30px'],
+                    ], 'clip-path:polygon(18% 0,100% 0,81% 100%,0 100%)'),
+                    $bild('hero-bild', $medien['gemeinsam'], 'Illustrative Szene: Eine Seniorin und eine Begleiterin lachen gemeinsam an einem Tisch.', [
+                        'desktop' => ['position' => 'relative', 'zIndex' => 1, 'imageHeight' => '465px', 'objectFit' => 'cover', 'objectPosition' => 'center', 'imageRadius' => ['topLeft' => '110px', 'topRight' => '6px', 'bottomRight' => '6px', 'bottomLeft' => '6px'], 'margin' => $seiten('0px')],
+                        'tablet' => ['imageHeight' => '390px'],
+                        'mobile' => ['imageHeight' => '380px', 'imageRadius' => ['topLeft' => '85px', 'topRight' => '6px', 'bottomRight' => '6px', 'bottomLeft' => '6px']],
+                    ], null, '& img{object-position:54% 45%}'),
+                    $column('hero-karte', [
+                        $text('hero-karte-label', 'WAS WIR UNS WÜNSCHEN', $klein),
+                        $text('hero-karte-text', "Dass Sie gerne\n<em>wiederkommen.</em>", [
+                            'desktop' => [...$serif, 'fontSize' => '30px', 'lineHeight' => 1.15, 'letterSpacing' => '-0.02em', 'margin' => ['top' => '11px', 'bottom' => '15px']],
+                            'mobile' => ['fontSize' => '27px'],
+                        ], '& em{color:#73933d}'),
+                        $flaeche('hero-karte-strich', ['desktop' => ['width' => '36px', 'height' => '3px', 'backgroundColor' => '@limette']]),
+                    ], [
+                        'desktop' => ['position' => 'absolute', 'left' => '-25px', 'bottom' => '-23px', 'zIndex' => 2, 'backgroundColor' => '@papier', 'minWidth' => '245px', 'padding' => ['top' => '22px', 'right' => '28px', 'bottom' => '17px', 'left' => '28px'], 'borderWidth' => $seiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#edf0e9', 'shadowY' => '8px', 'shadowBlur' => '35px', 'shadowColor' => '#29465513'],
+                        'tablet' => ['left' => '-12px', 'minWidth' => '190px', 'padding' => ['top' => '18px', 'right' => '22px', 'bottom' => '14px', 'left' => '22px']],
+                        'mobile' => ['left' => '-12px', 'bottom' => '-25px', 'minWidth' => '190px', 'padding' => ['top' => '20px', 'right' => '25px', 'bottom' => '16px', 'left' => '25px']],
+                    ]),
+                    $text('hero-caption', 'Gemeinschaft, die guttut.', [
+                        'desktop' => ['position' => 'absolute', 'right' => '0px', 'bottom' => '-31px', 'fontSize' => '12px', 'color' => '#737b79', 'margin' => ['bottom' => '0px']],
+                    ]),
+                ], [
+                    'desktop' => ['position' => 'relative', 'margin' => ['left' => '10px', 'bottom' => '25px']],
+                    'tablet' => ['margin' => ['left' => '0px', 'bottom' => '25px']],
+                    'mobile' => ['margin' => ['top' => '0px', 'right' => '6px', 'bottom' => '22px', 'left' => '12px']],
+                ]),
+            ], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '45px', 'alignItems' => 'center', 'margin' => ['top' => '0px']],
+                'tablet' => ['gap' => '25px'],
+                'mobile' => ['gap' => '45px'],
+            ]),
+        ], [
+            'desktop' => ['minHeight' => '650px', 'display' => 'flex', 'alignItems' => 'center', 'padding' => ['top' => '67px', 'bottom' => '75px']],
+            'tablet' => ['minHeight' => 'auto', 'padding' => ['top' => '50px', 'bottom' => '75px']],
+            'mobile' => ['minHeight' => 'auto', 'padding' => ['top' => '42px', 'bottom' => '57px']],
+        ], 'start'),
+
+        // 2 – Das Band mit den drei Versprechen.
+        $section('werte', [
+            $row('werte-zeile', array_map(
+                static fn (string $wert, int $i): array => $column('wert-'.($i + 1), [
+                    $symbol('wert-'.($i + 1).'-haken', 'check', 16, ['desktop' => ['color' => '#789d3e', 'flexShrink' => 0]]),
+                    $text('wert-'.($i + 1).'-text', $wert, ['desktop' => ['fontSize' => '15px', 'letterSpacing' => '0.015em', 'margin' => ['bottom' => '0px']], 'mobile' => ['fontSize' => '14px']]),
+                ], [
+                    'desktop' => ['display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center', 'gap' => '13px']
+                        + (0 === $i ? [] : ['borderWidth' => ['top' => '0px', 'right' => '0px', 'bottom' => '0px', 'left' => '1px'], 'borderStyle' => 'solid', 'borderColor' => '#dbe2d6']),
+                    'mobile' => ['justifyContent' => 'flex-start', 'gap' => '16px', 'borderStyle' => 'none'],
+                ]),
+                $werte, array_keys($werte),
+            ), ['desktop' => ['columns' => 'three'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['margin' => ['top' => '0px']],
+                'mobile' => ['gap' => '12px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '@sand', 'borderWidth' => ['top' => '1px', 'right' => '0px', 'bottom' => '1px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => '@linie', 'padding' => ['top' => '22px', 'bottom' => '22px']],
+            'mobile' => ['padding' => ['top' => '20px', 'bottom' => '20px']],
+        ]),
+
+        // 3 – Willkommen: Überschrift links, Text und Signatur rechts.
+        $abschnitt('vorstellung', [
+            $row('vorstellung-zeile', [
+                $column('vorstellung-titel', [
+                    $kleinzeile('vorstellung-label', 'Willkommen bei uns'),
+                    $heading('vorstellung-h2', 'Hier zählt der Mensch.<br><em>Und das Miteinander.</em>', 2, $h2Stil, $emGruen),
+                ]),
+                $column('vorstellung-text', [
+                    $text('vorstellung-lead', 'Manchmal braucht es nur ein vertrautes Gesicht, ein gutes Gespräch und das Gefühl, dazuzugehören.', [
+                        'desktop' => ['fontSize' => '20px', 'lineHeight' => 1.7, 'color' => '@tinte', 'margin' => ['bottom' => '20px']],
+                        'mobile' => ['fontSize' => '18px'],
+                    ]),
+                    $text('vorstellung-p1', 'Unsere Tagespflege ist ein Ort für ältere Menschen, die ihren Tag in Gesellschaft verbringen möchten. Dabei ist uns wichtig, Raum für persönliche Gewohnheiten zu lassen: für Aktivität ebenso wie für eine ruhige Pause.', $fliess),
+                    $text('vorstellung-p2', 'Mit Aufmerksamkeit und einem offenen Ohr möchten wir den Alltag unserer Gäste bereichern und ihre Angehörigen entlasten.', $fliess),
+                    $zeile('vorstellung-signatur', [
+                        $column('signatur-bild', [
+                            $bild('signatur-portraet', $medien['portraet'], 'Jacqueline Moldovan', [
+                                'desktop' => ['maxWidth' => '104px', 'imageHeight' => '104px', 'objectFit' => 'cover', 'objectPosition' => 'top', 'imageRadius' => $ecken('50%'), 'imageBorderWidth' => $seiten('4px'), 'imageBorderStyle' => 'solid', 'imageBorderColor' => '@papier', 'margin' => $seiten('0px')],
+                                'tablet' => ['maxWidth' => '86px', 'imageHeight' => '86px'],
+                                'mobile' => ['maxWidth' => '86px', 'imageHeight' => '86px'],
+                            ], null),
+                        ], ['desktop' => ['flexShrink' => 0]]),
+                        $flaeche('signatur-strich', ['desktop' => ['width' => '28px', 'height' => '2px', 'backgroundColor' => '@gruen', 'flexShrink' => 0], 'tablet' => ['width' => '20px']]),
+                        $column('signatur-name', [
+                            $text('signatur-person', '<strong>Jacqueline Moldovan</strong>', ['desktop' => ['fontSize' => '15px', 'fontWeight' => '600', 'color' => '#2e6682', 'margin' => ['bottom' => '0px']]]),
+                            $text('signatur-rolle', 'Geschäftsführerin', ['desktop' => ['fontSize' => '13px', 'color' => '@gedaempft', 'margin' => ['top' => '4px', 'bottom' => '0px']]]),
+                        ]),
+                    ], '18px', ['flexWrap' => 'wrap', 'margin' => ['top' => '29px']], ['gap' => '14px']),
+                ]),
+            ], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '80px', 'margin' => ['top' => '0px']],
+                'tablet' => ['gap' => '50px'],
+                'mobile' => ['gap' => '28px'],
+            ]),
+        ], [], 'bei-uns'),
+
+        // 4 – Unser Angebot: drei Karten auf blasser Fläche.
+        $abschnitt('angebot-abschnitt', [
+            $zeile('angebot-kopf', [
+                $column('angebot-kopf-titel', [
+                    $kleinzeile('angebot-label', 'Raum für einen guten Tag'),
+                    $heading('angebot-h2', 'Was den Alltag<br><em>schöner macht.</em>', 2, $h2Stil, $emGruen),
+                ]),
+                $column('angebot-kopf-text', [
+                    $text('angebot-intro', "Die kleinen Dinge machen den Unterschied.\nUnd Menschen, die sich Zeit nehmen.", [
+                        'desktop' => ['fontSize' => '15px', 'color' => '@gedaempft', 'margin' => ['bottom' => '5px']],
+                        'tablet' => ['maxWidth' => '260px'],
+                        'mobile' => ['margin' => ['top' => '23px', 'bottom' => '0px']],
+                    ]),
+                ]),
+            ], '35px', ['alignItems' => 'flex-end', 'justifyContent' => 'space-between', 'margin' => ['top' => '0px', 'bottom' => '46px']], ['flexDirection' => 'column', 'alignItems' => 'flex-start', 'gap' => '0px', 'margin' => ['top' => '0px', 'bottom' => '30px']]),
+            $row('angebot-raster', array_map(
+                static function (array $a, int $i) use ($column, $text, $symbol, $heading, $h3Stil, $seiten, $ecken): array {
+                    $n = $i + 1;
+
+                    return $column('angebot-'.$n, [
+                        $text('angebot-'.$n.'-nummer', $a[0], ['desktop' => ['fontSize' => '11px', 'fontWeight' => '600', 'letterSpacing' => '0.14em', 'color' => '#788574', 'margin' => ['bottom' => '0px']]]),
+                        $symbol('angebot-'.$n.'-symbol', $a[1], 32, [
+                            'desktop' => ['width' => '55px', 'height' => '55px', 'display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center', 'borderRadius' => $ecken('50%'), 'backgroundColor' => $a[3], 'color' => $a[4], 'margin' => ['top' => '31px', 'bottom' => '23px']],
+                            'mobile' => ['width' => '48px', 'height' => '48px'],
+                        ]),
+                        $heading('angebot-'.$n.'-titel', $a[5], 3, $h3Stil),
+                        $text('angebot-'.$n.'-text', $a[6], ['desktop' => ['fontSize' => '15px', 'color' => '@gedaempft', 'lineHeight' => 1.8, 'margin' => ['bottom' => '0px']]]),
+                    ], [
+                        'desktop' => ['backgroundColor' => '@papier', 'borderWidth' => ['top' => '3px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px'], 'borderStyle' => 'solid', 'borderColor' => $a[2], 'padding' => ['top' => '30px', 'right' => '29px', 'bottom' => '28px', 'left' => '29px']],
+                        'tablet' => ['padding' => ['top' => '23px', 'right' => '19px', 'bottom' => '23px', 'left' => '19px']],
+                        'mobile' => ['padding' => ['top' => '25px', 'right' => '27px', 'bottom' => '25px', 'left' => '27px']],
+                    ]);
+                },
+                $angebote, array_keys($angebote),
+            ), ['desktop' => ['columns' => 'three'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '25px', 'margin' => ['top' => '0px']],
+                'tablet' => ['gap' => '15px'],
+                'mobile' => ['gap' => '17px'],
+            ]),
+        ], ['desktop' => ['backgroundColor' => '@blass']], 'angebot'),
+
+        // 5 – Ein Tag bei uns: Einleitung links, die Zeitleiste rechts.
+        $abschnitt('tagesablauf-abschnitt', [
+            $row('tag-zeile', [
+                $column('tag-intro', [
+                    $kleinzeile('tag-label', 'Ein Tag bei uns'),
+                    $heading('tag-h2', 'Ein guter Rhythmus.<br><em>Ganz ohne Eile.</em>', 2, $h2Stil, $emGruen),
+                    $text('tag-intro-text', 'So könnte ein gemeinsamer Tag aussehen. Mit vertrauten Ritualen, neuen Impulsen und Zeit für das, was Ihnen Freude macht.', [
+                        'desktop' => ['maxWidth' => '375px', 'color' => '@gedaempft', 'margin' => ['top' => '27px', 'bottom' => '0px']],
+                        'mobile' => ['maxWidth' => '100%'],
+                    ]),
+                    $bild('tag-marke', $medien['marke'], '', [
+                        'desktop' => ['maxWidth' => '110px', 'opacity' => 0.65, 'margin' => ['top' => '36px']],
+                    ]) + ['layout' => ['visibility' => 'hide-mobile']],
+                ]),
+                $column('tag-liste', array_map(
+                    static function (array $s, int $i) use ($zeile, $column, $text, $heading, $flaeche, $klein, $h3Stil, $ecken, $seiten, $tagesablauf): array {
+                        $n = $i + 1;
+                        $letzte = $n === count($tagesablauf);
+                        $links = [
+                            $text('tag-'.$n.'-zahl', $s[0], ['desktop' => [
+                                'width' => '42px', 'height' => '42px', 'flexShrink' => 0, 'display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center',
+                                'backgroundColor' => '#f2f6e9', 'borderWidth' => $seiten('1px'), 'borderStyle' => 'solid', 'borderColor' => '#dbe7cc', 'borderRadius' => $ecken('50%'),
+                                'fontSize' => '12px', 'color' => '#72943d', 'margin' => ['bottom' => '0px'],
+                            ]]),
+                        ];
+                        if (!$letzte) {
+                            $links[] = $flaeche('tag-'.$n.'-linie', ['desktop' => ['width' => '1px', 'height' => 'auto', 'flexGrow' => 1, 'backgroundColor' => '#dbe3d4']]);
+                        }
+
+                        return $zeile('tag-schritt-'.$n, [
+                            $column('tag-'.$n.'-spur', $links, ['desktop' => ['width' => '43px', 'flexShrink' => 0, 'display' => 'flex', 'flexDirection' => 'column', 'alignItems' => 'center']]),
+                            $column('tag-'.$n.'-inhalt', [
+                                $text('tag-'.$n.'-label', $s[1], $klein),
+                                $heading('tag-'.$n.'-titel', $s[2], 3, ['desktop' => [...$h3Stil['desktop'], 'margin' => ['top' => '7px', 'bottom' => '9px']]]),
+                                $text('tag-'.$n.'-text', $s[3], ['desktop' => ['fontSize' => '15px', 'color' => '@gedaempft', 'lineHeight' => 1.75, 'margin' => ['bottom' => '0px']]]),
+                            ]),
+                        ], '24px', ['alignItems' => 'stretch', 'padding' => ['bottom' => $letzte ? '0px' : '34px']], ['gap' => '19px']);
+                    },
+                    $tagesablauf, array_keys($tagesablauf),
+                )),
+            ], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '90px', 'margin' => ['top' => '0px']],
+                'tablet' => ['gap' => '50px'],
+                'mobile' => ['gap' => '28px'],
+            ]),
+        ], [], 'tagesablauf'),
+
+        // 6 – Kontakt: dunkelblaue Fläche, rechts die weiße Formularkarte.
+        $section('kontakt-abschnitt', [
+            // Die schräge hellere Fläche am rechten Rand, mit dem limettenen Streifen davor.
+            $flaeche('kontakt-form', [
+                'desktop' => ['position' => 'absolute', 'top' => '0px', 'bottom' => '0px', 'right' => '-80px', 'width' => '180px', 'height' => 'auto', 'backgroundColor' => '#315d71', 'borderWidth' => $nurLinks('12px'), 'borderStyle' => 'solid', 'borderColor' => '#a1bb59', 'zIndex' => 0],
+                'mobile' => ['right' => '-150px'],
+            ], 'transform:skewX(-16deg);pointer-events:none'),
+            $row('kontakt-zeile', [
+                $column('kontakt-text', [
+                    $kleinzeile('kontakt-label', 'Der erste Schritt ist ein Gespräch', '#c4d998', '@limette', '22px'),
+                    $heading('kontakt-h2', 'Ein gutes Gefühl<br>beginnt mit einem<br><em>persönlichen Hallo.</em>', 2, [
+                        'desktop' => [...$serif, 'fontSize' => '59px', 'color' => '@papier', 'margin' => ['bottom' => '24px']],
+                        'tablet' => ['fontSize' => '45px'],
+                        'mobile' => ['fontSize' => '43px'],
+                    ], '& em{color:#c1d786;font-weight:400}'),
+                    $text('kontakt-intro', 'Sie möchten unsere Tagespflege kennenlernen oder haben Fragen? Erzählen Sie uns, was Ihnen wichtig ist. Wir freuen uns auf Sie.', [
+                        'desktop' => ['maxWidth' => '430px', 'color' => '#d5e0e4', 'fontSize' => '15px', 'lineHeight' => 1.8, 'margin' => ['bottom' => '28px']],
+                    ]),
+                    // Ein Telefonlink, kein Button-Baustein: Buttons verweisen auf Seiten, nicht auf tel:.
+                    $text('kontakt-anrufen', '<a href="'.$telHref.'">Rufen Sie uns an ↗</a>', ['desktop' => ['margin' => ['bottom' => '0px']]],
+                        "& a{display:inline-flex;align-items:center;gap:25px;background:#c3d886;color:#27434a;border-radius:4px;padding:15px 22px;font-size:15px;font-weight:600;transition:background .2s,transform .2s}\n& a:hover{background:#d1e3a5;transform:translateY(-2px)}"),
+                    ['id' => 'kontakt-daten', 'type' => 'contact',
+                        'props' => ['phone' => $telefon, 'email' => $mail, 'address' => "Fremersbergstraße 75\n76530 Baden-Baden"],
+                        'style' => ['desktop' => ['fontSize' => '15px', 'color' => '#dce7eb', 'gap' => '10px', 'borderWidth' => $nurOben('1px'), 'borderStyle' => 'solid', 'borderColor' => '#ffffff30', 'padding' => ['top' => '26px'], 'margin' => ['top' => '30px']]],
+                        // Die Vorlage führt die Angaben ohne Symbole; die Adresse behält ihren Umbruch.
+                        'css' => "& svg{display:none}\n& span{display:block}\n& a{overflow-wrap:anywhere}\n& a:hover{text-decoration:underline}\n& span:first-child a{font-size:22px;color:#ffffff;letter-spacing:-0.025em}\n& span:last-child{white-space:pre-line;line-height:1.65;margin-top:5px}",
+                    ],
+                ], ['desktop' => ['alignSelf' => 'center']]),
+                $column('kontakt-karte', [
+                    $text('kontakt-karte-label', 'WIR FREUEN UNS AUF IHRE NACHRICHT', ['desktop' => [...$klein['desktop'], 'margin' => ['bottom' => '18px']]]),
+                    $heading('kontakt-karte-titel', 'Was können wir<br>für Sie tun?', 3, [
+                        'desktop' => ['fontFamily' => 'heading', 'fontWeight' => '400', 'fontSize' => '30px', 'lineHeight' => 1.25, 'letterSpacing' => '-0.02em', 'margin' => ['bottom' => '25px']],
+                    ]),
+                    ['id' => 'kontakt-formular', 'type' => 'form', 'props' => ['form' => 'kontakt'],
+                        // Felder und Knopf im Zuschnitt der Vorlage; der Wortlaut des Knopfes kommt vom Baustein.
+                        'css' => "& .form-field label{font-size:14px;font-weight:600;color:#294655}
+& .form-field input{background:#fafcf8;border:1px solid #cfd9ce;border-radius:4px;padding:12px 13px;font-size:16px;color:#294655}
+& .form-field textarea{background:#fafcf8;border:1px solid #cfd9ce;border-radius:4px;padding:12px 13px;font-size:16px;color:#294655;min-height:120px}
+& .field-note{font-size:12px;color:#748078}
+& .cms-button{width:100%;justify-content:center;border-radius:4px;margin-top:4px}",
+                    ],
+                    $text('kontakt-formular-hinweis', 'Ihre Nachricht geht direkt an die Tagespflege. Wir verwenden Ihre Angaben ausschließlich, um Ihre Anfrage zu beantworten.', [
+                        'desktop' => ['fontSize' => '13px', 'lineHeight' => 1.65, 'color' => '#64736b', 'margin' => ['top' => '19px', 'bottom' => '0px']],
+                    ]),
+                ], [
+                    'desktop' => ['alignSelf' => 'center', 'backgroundColor' => '@papier', 'color' => '@tinte', 'borderRadius' => $ecken('3px'), 'borderWidth' => $nurOben('4px'), 'borderStyle' => 'solid', 'borderColor' => '#bdd26f', 'padding' => ['top' => '32px', 'right' => '35px', 'bottom' => '32px', 'left' => '35px']],
+                    'tablet' => ['padding' => ['top' => '28px', 'right' => '25px', 'bottom' => '28px', 'left' => '25px']],
+                    'mobile' => ['padding' => ['top' => '28px', 'right' => '25px', 'bottom' => '28px', 'left' => '25px']],
+                ]),
+            ], ['desktop' => ['columns' => 'two'], 'mobile' => ['columns' => 'one']], [
+                'desktop' => ['gap' => '100px', 'position' => 'relative', 'zIndex' => 1, 'margin' => ['top' => '0px']],
+                'tablet' => ['gap' => '35px'],
+                'mobile' => ['gap' => '35px'],
+            ]),
+        ], [
+            'desktop' => ['backgroundColor' => '@dunkelblau', 'color' => '@papier', 'position' => 'relative', 'overflow' => 'hidden', 'padding' => ['top' => '83px', 'bottom' => '83px']],
+            'mobile' => ['padding' => ['top' => '60px', 'bottom' => '60px']],
+        ], 'kontakt'),
+    ],
+];
+
+// ---------------------------------------------------------------------------------------------
+// Seiten anlegen und veröffentlichen
+// ---------------------------------------------------------------------------------------------
+
+$erstellt = [];
+$anlegen = static function (string $slug, array $dokument, string $seoTitel = '', string $teilbild = '') use ($pages, $db, &$erstellt): string {
+    $id = $pages->createPage($slug, null, 'page', $dokument);
+    if ('' !== $seoTitel) {
+        $db->executeStatement('UPDATE page SET seo_title = ? WHERE id = ?', [$seoTitel, $id]);
+    }
+    if ('' !== $teilbild) {
+        $db->executeStatement('UPDATE page SET og_media_id = ? WHERE id = ?', [$teilbild, $id]);
+    }
+    $seite = $db->fetchAssociative('SELECT draft_revision_id, version FROM page WHERE id = ?', [$id]);
+    $pages->publish($id, $seite['draft_revision_id'], (int) $seite['version']);
+    $erstellt[$slug] = $id;
+    echo 'Seite angelegt: /'.$db->fetchOne('SELECT path FROM page WHERE id = ?', [$id])."\n";
+
+    return $id;
+};
+
+$anlegen('home', $startseite, 'Tagespflege Moldovan · Gemeinsam den Tag genießen', $medien['gemeinsam']['id']);
+
+$fehlerId = $anlegen('404', [
+    'schemaVersion' => $SCHEMA, 'title' => 'Seite nicht gefunden',
+    'description' => 'Die gesuchte Seite gibt es nicht oder sie wurde verschoben.',
+    'blocks' => [
+        $abschnitt('fehler', [
+            $kleinzeile('fehler-label', 'Fehler 404'),
+            $heading('fehler-titel', 'Diese Seite<br><em>haben wir nicht.</em>', 1, [
+                'desktop' => [...$serif, 'fontSize' => '59px', 'margin' => ['bottom' => '25px']],
+                'mobile' => ['fontSize' => '40px'],
+            ], $emGruen),
+            $text('fehler-text', 'Vielleicht hat sich ein Tippfehler in die Adresse geschlichen. Über die Startseite finden Sie zurück.', [
+                'desktop' => ['maxWidth' => '465px', 'color' => '@gedaempft', 'fontSize' => '17px', 'lineHeight' => 1.8, 'margin' => ['bottom' => '28px']],
+            ]),
+            $button('fehler-knopf', 'Zur Startseite', '/', ['desktop' => ['borderRadius' => $ecken('4px'), 'margin' => ['top' => '0px']]]),
+        ], ['desktop' => ['padding' => ['top' => '120px', 'bottom' => '140px']]]),
+    ],
+]);
+$db->executeStatement('UPDATE page SET robots = ? WHERE id = ?', ['noindex', $fehlerId]);
+
+// ---------------------------------------------------------------------------------------------
+// Menü, Einstellungen, Konto
+// ---------------------------------------------------------------------------------------------
+
+$sprung = static fn (string $label, string $anchor): array => ['label' => $label, 'type' => 'page', 'pageId' => $erstellt['home'], 'anchor' => $anchor, 'children' => []];
+
+$menus->save('header', 'Hauptnavigation', [
+    $sprung('Bei uns', 'bei-uns'),
+    $sprung('Unser Angebot', 'angebot'),
+    $sprung('Ein Tag bei uns', 'tagesablauf'),
+    $sprung('Kontakt aufnehmen ↗', 'kontakt'),
+], 0);
+echo "Menü angelegt\n";
+
+$settings->assignNotFoundPage($fehlerId, '');
+$settings->save([
+    'legalName' => 'Tagespflege Jacqueline Moldovan',
+    'description' => 'Tagespflege in Baden-Baden: ein Ort für ältere Menschen, die ihren Tag in Gesellschaft verbringen möchten. Persönliche Begleitung, gemeinsame Aktivitäten und Zeit für Ruhe – abends wieder im vertrauten Zuhause.',
+    'phone' => $telefon, 'email' => $mail,
+    'street' => 'Fremersbergstraße 75', 'postalCode' => '76530', 'city' => 'Baden-Baden', 'country' => 'DE',
+    'localBusiness' => true, 'llmsTxt' => true,
+    'stickyHeader' => true, 'headerOverlay' => false,
+    'motion' => 'always',
+    'faviconMediaId' => $medien['marke']['id'],
+    'homePath' => 'home',
+    'consentBanner' => false, 'scrollTop' => false, 'postMetaHeader' => true,
+]);
+echo "Einstellungen gespeichert\n";
+
+$passwort = bin2hex(random_bytes(12));
+$db->insert('cms_user', ['id' => bin2hex(random_bytes(16)), 'username' => 'umut', 'password_hash' => password_hash($passwort, PASSWORD_BCRYPT), 'roles' => '["ROLE_ADMIN"]']);
+
+echo "\nFertig.\nVerwaltung: Benutzer „umut“, Passwort: $passwort\n";

src/Content/DocumentValidator.php

@@ -13,7 +13,7 @@ final class DocumentValidator
     /** Blocks introduced with schema v6 for the sections a marketing page actually needs. */
     public const V6_TYPES = ['iconcard', 'stat', 'quote', 'logos', 'cta', 'contact', 'divider', 'spacer', 'accordion', 'accordionitem'];
     /** Icons ship as inline SVG from this fixed list; no icon font and no external request. */
-    public const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check'];
+    public const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check', 'people', 'music', 'home'];
     public const SPACER_SIZES = ['small', 'medium', 'large', 'huge'];
     /** Schema v7: tabs, the one pattern that needs a script to become a real widget. */
     public const V7_TYPES = ['tabs', 'tabitem'];
@@ -33,6 +33,8 @@ final class DocumentValidator
     public const V19_TYPES = ['legal'];
     /** Schema v15: a single icon, a progress bar and a slider that works without a script. */
     public const V15_TYPES = ['icon', 'progress', 'slider'];
+    /** Schema v23: die sozialen Profile aus den Einstellungen, als Symbolreihe an jeder Stelle. */
+    public const V23_TYPES = ['social'];
 
     /**
      * @param bool $requireHeading A page needs exactly one main heading. A header, a footer or a
@@ -42,7 +44,7 @@ final class DocumentValidator
     public function validate(array $document, bool $requireHeading = true): void
     {
         $schemaVersion = $document['schemaVersion'] ?? null;
-        $this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22], true), 'Unsupported document schema.');
+        $this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23], true), 'Unsupported document schema.');
         $this->text($document['title'] ?? null, 160);
         $this->text($document['description'] ?? null, 320);
         $this->require(is_array($document['blocks'] ?? null) && array_is_list($document['blocks']), 'Blocks must be a list.');
@@ -85,7 +87,7 @@ final class DocumentValidator
         // page: a deactivated plugin must never make stored content unreadable. Nothing from
         // props is rendered for such a block, so unvalidated values never reach the output.
         $plugin = $schemaVersion >= 4 && is_string($type) && 1 === preg_match('/^[a-z][a-z0-9]{1,30}\.[a-z][a-z0-9-]{1,40}$/D', $type);
-        $this->require(in_array($type, ['section', 'row', 'column', 'heading', 'text', 'image', 'button'], true) || ($schemaVersion >= 3 && 'gallery' === $type) || ($schemaVersion >= 5 && 'postlist' === $type) || ($schemaVersion >= 6 && in_array($type, self::V6_TYPES, true)) || ($schemaVersion >= 7 && in_array($type, self::V7_TYPES, true)) || ($schemaVersion >= 8 && in_array($type, self::V8_TYPES, true)) || ($schemaVersion >= 9 && in_array($type, self::V9_TYPES, true)) || ($schemaVersion >= 11 && in_array($type, self::V11_TYPES, true)) || ($schemaVersion >= 14 && in_array($type, self::V14_TYPES, true)) || ($schemaVersion >= 15 && in_array($type, self::V15_TYPES, true)) || ($schemaVersion >= 18 && in_array($type, self::V18_TYPES, true)) || ($schemaVersion >= 19 && in_array($type, self::V19_TYPES, true)) || $plugin, 'Unknown block type. Preserve source until its plugin is available.');
+        $this->require(in_array($type, ['section', 'row', 'column', 'heading', 'text', 'image', 'button'], true) || ($schemaVersion >= 3 && 'gallery' === $type) || ($schemaVersion >= 5 && 'postlist' === $type) || ($schemaVersion >= 6 && in_array($type, self::V6_TYPES, true)) || ($schemaVersion >= 7 && in_array($type, self::V7_TYPES, true)) || ($schemaVersion >= 8 && in_array($type, self::V8_TYPES, true)) || ($schemaVersion >= 9 && in_array($type, self::V9_TYPES, true)) || ($schemaVersion >= 11 && in_array($type, self::V11_TYPES, true)) || ($schemaVersion >= 14 && in_array($type, self::V14_TYPES, true)) || ($schemaVersion >= 15 && in_array($type, self::V15_TYPES, true)) || ($schemaVersion >= 18 && in_array($type, self::V18_TYPES, true)) || ($schemaVersion >= 19 && in_array($type, self::V19_TYPES, true)) || ($schemaVersion >= 23 && in_array($type, self::V23_TYPES, true)) || $plugin, 'Unknown block type. Preserve source until its plugin is available.');
         // An accordion entry only ever renders inside an accordion; at the top level or anywhere
         // else it would produce a details element without its group.
         $this->require('accordionitem' !== $type || 'accordion' === $parentType, 'An accordion entry belongs into an accordion.');
@@ -154,7 +156,7 @@ final class DocumentValidator
             $this->text($props['text'] ?? null, $limit);
         }
         if (!$plugin && array_key_exists('newTab', $props)) {
-            $this->require($schemaVersion >= 20 && in_array($type, ['button', 'image', 'iconcard', 'cta', 'icon'], true), 'Neue Link-Tabs brauchen Schema v20 und einen verlinkbaren Block.');
+            $this->require($schemaVersion >= 20 && in_array($type, ['button', 'image', 'iconcard', 'cta', 'icon', 'social'], true), 'Neue Link-Tabs brauchen Schema v20 und einen verlinkbaren Block.');
             $this->require(is_bool($props['newTab']), 'In neuem Tab öffnen ist an oder aus.');
         }
         foreach (($block['style'] ?? []) as $values) {
@@ -263,6 +265,11 @@ final class DocumentValidator
             if (array_key_exists('collapse', $props)) {
                 $this->require($schemaVersion >= 22 && in_array($props['collapse'], ['tablet', 'mobile', 'never'], true), 'Unbekannte Hamburger-Umschaltung oder Dokumentschema vor v22.');
             }
+            if (array_key_exists('burgerLabel', $props)) {
+                // Wie der Knopf beschriftet ist. „Nur Symbol“ behält den Text für Vorlesesoftware:
+                // ein Knopf ohne Namen ist für sie ein Knopf ohne Zweck.
+                $this->require(in_array($props['burgerLabel'], ['both', 'text', 'icon'], true), 'Für den Menü-Knopf sind „both", „text" und „icon" vorgesehen.');
+            }
             if (isset($props['layout'])) {
                 $this->require($schemaVersion >= 16, 'Die Menüart braucht Schema v16.');
                 $this->require(in_array($props['layout'], ['horizontal', 'vertical', 'burger'], true), 'Unbekannte Menüart.');
@@ -287,6 +294,19 @@ final class DocumentValidator
                 $this->url($props['href']);
             }
         }
+        if ('social' === $type) {
+            // Nur die Darstellung ist Inhalt des Blocks. Welche Profile es gibt, steht in den
+            // Einstellungen - ein Dokument kann kein Profil behaupten, das die Website nicht hat.
+            $this->require(in_array($props['size'] ?? null, self::ICON_SIZES, true), sprintf('Die Symbolgröße ist eine aus %s.', implode(', ', self::ICON_SIZES)));
+            $this->require(isset(SocialProfiles::SHAPES[$props['shape'] ?? '']), 'Unbekannte Form der Symbolfläche.');
+            $this->require(isset(SocialProfiles::LAYOUTS[$props['layout'] ?? '']), 'Unbekannte Anordnung der Symbole.');
+            $this->require(is_bool($props['labels'] ?? null), 'Die Beschriftung der Symbole ist an oder aus.');
+            $networks = $props['networks'] ?? [];
+            $this->require(is_array($networks) && array_is_list($networks), 'Die Auswahl der Netzwerke ist eine Liste.');
+            foreach ($networks as $network) {
+                $this->require(is_string($network) && isset(SocialProfiles::NETWORKS[$network]), 'Unbekanntes Netzwerk in der Auswahl.');
+            }
+        }
         if ('progress' === $type) {
             $this->text($props['label'] ?? null, 120);
             $this->require(is_int($props['value'] ?? null) && $props['value'] >= 0 && $props['value'] <= 100, 'Der Wert liegt zwischen 0 und 100.');

src/Content/SiteSettings.php

@@ -24,11 +24,22 @@ final class SiteSettings
         'city' => '',
         'country' => 'DE',
         'sameAs' => [],
+        // Die sozialen Profile, je Netzwerk eine Adresse (siehe SocialProfiles). Der Baustein
+        // `social` zeigt sie an; die strukturierten Daten führen sie als sameAs mit.
+        'social' => [],
         'localBusiness' => false,
         'llmsTxt' => false,
         // Der Kopfbereich bleibt beim Scrollen oben stehen. Eine Eigenschaft der Website und
         // nicht des Dokuments: kleben kann nur das Element, das den Bereich umschliesst.
         'stickyHeader' => false,
+        // Der Kopfbereich liegt über dem Inhalt statt darüber zu stehen - der Flatsome-Aufbau mit
+        // transparentem Kopf über dem Hero. Welche Farben er beim Scrollen bekommt, bestimmt die
+        // Gestaltung des Kopfbereichs selbst („beim Scrollen" unter Hintergrund).
+        'headerOverlay' => false,
+        // Einblendungen und Hover-Bewegungen. „always" spielt sie wie Flatsome bei jedem
+        // Besucher ab; „respect" hält sich an die Browservorgabe „Bewegung reduzieren", die
+        // manche Systeme melden, ohne dass jemand sie bewusst eingestellt hat.
+        'motion' => 'always',
         // Datum, Autor und Kategorie über dem Beitrag. Aus, wenn der Beitrag seinen eigenen
         // Kopf mitbringt - sonst steht die Zeile über einem Bild, das den Titel schon trägt.
         'postMetaHeader' => true,
@@ -125,12 +136,14 @@ final class SiteSettings
             $values['sameAs'][] = $profile;
         }
         $values['sameAs'] = array_slice(array_unique($values['sameAs']), 0, 20);
+        $values['social'] = SocialProfiles::clean($input['social'] ?? []);
         $values['localBusiness'] = (bool) ($input['localBusiness'] ?? false);
         if ($values['localBusiness'] && ('' === $values['street'] || '' === $values['city'])) {
             throw new InvalidPage('Ein lokales Unternehmen braucht mindestens Straße und Ort.');
         }
         $values['llmsTxt'] = (bool) ($input['llmsTxt'] ?? false);
         $values['stickyHeader'] = (bool) ($input['stickyHeader'] ?? false);
+        $values['headerOverlay'] = (bool) ($input['headerOverlay'] ?? false);
         $favicon = trim((string) ($input['faviconMediaId'] ?? ''));
         if ('' !== $favicon) {
             if (1 !== preg_match('/^[a-f0-9]{32}$/D', $favicon) || null === $this->media->find($favicon)) {
@@ -173,6 +186,7 @@ final class SiteSettings
             throw new InvalidPage('Für die Turnstile-Prüfung werden beide Schlüssel gebraucht – der öffentliche und der geheime.');
         }
         $values['postMetaHeader'] = (bool) ($input['postMetaHeader'] ?? false);
+        $values['motion'] = in_array($input['motion'] ?? '', ['always', 'respect'], true) ? $input['motion'] : 'always';
         // Only comment and simple directive lines; nothing that could smuggle in a second policy.
         // Leerzeilen bleiben erhalten (hoechstens eine am Stueck): eine robots.txt mit eigenen
         // Regeln je Bot besteht aus Bloecken, und ohne Trennung liest die niemand mehr. Das Limit
@@ -343,8 +357,11 @@ final class SiteSettings
                 'addressCountry' => $settings['country'],
             ], static fn (string $value): bool => '' !== $value);
         }
-        if ([] !== $settings['sameAs']) {
-            $data['sameAs'] = $settings['sameAs'];
+        // Die sozialen Profile sind dieselbe Aussage wie sameAs - "dieses Unternehmen ist auch
+        // das hier" -, deshalb stehen sie ohne zweite Pflege mit in der Liste.
+        $sameAs = array_values(array_unique([...$settings['sameAs'], ...array_values($settings['social'] ?? [])]));
+        if ([] !== $sameAs) {
+            $data['sameAs'] = $sameAs;
         }
 
         return $data;

src/Content/SocialProfiles.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace App\Content;
+
+use App\Domain\InvalidPage;
+
+/**
+ * Die sozialen Profile einer Website.
+ *
+ * Gepflegt werden sie einmal, in den Einstellungen: je Netzwerk eine Adresse. Der Baustein
+ * `social` zeigt sie dann an beliebig vielen Stellen – im Kopf, im Fuß, in einer Kontaktsektion –
+ * und bestimmt dort nur noch Größe, Form und Beschriftung. Eine Adresse, die sich ändert, ändert
+ * sich damit überall auf einmal; das ist der Unterschied zu von Hand gesetzten Symbol-Links.
+ *
+ * Die Liste der Netzwerke ist fest, weil jedes ein gezeichnetes Symbol braucht (siehe
+ * templates/blocks/social-icon.html.twig). Ein Netzwerk, das hier fehlt, hat kein Symbol – ein
+ * freies Feld würde also nur eine leere Fläche erzeugen.
+ */
+final class SocialProfiles
+{
+    /** Schlüssel → Name, in der Reihenfolge, in der die Symbole erscheinen. */
+    public const NETWORKS = [
+        'facebook' => 'Facebook',
+        'instagram' => 'Instagram',
+        'linkedin' => 'LinkedIn',
+        'youtube' => 'YouTube',
+        'tiktok' => 'TikTok',
+        'x' => 'X',
+        'threads' => 'Threads',
+        'pinterest' => 'Pinterest',
+        'xing' => 'Xing',
+        'whatsapp' => 'WhatsApp',
+        'google' => 'Google-Unternehmensprofil',
+    ];
+
+    /** Beispieladressen für die Eingabefelder. */
+    public const PLACEHOLDERS = [
+        'facebook' => 'https://www.facebook.com/…',
+        'instagram' => 'https://www.instagram.com/…',
+        'linkedin' => 'https://www.linkedin.com/company/…',
+        'youtube' => 'https://www.youtube.com/@…',
+        'tiktok' => 'https://www.tiktok.com/@…',
+        'x' => 'https://x.com/…',
+        'threads' => 'https://www.threads.net/@…',
+        'pinterest' => 'https://www.pinterest.de/…',
+        'xing' => 'https://www.xing.com/pages/…',
+        'whatsapp' => 'https://wa.me/49…',
+        'google' => 'https://g.page/…',
+    ];
+
+    public const SHAPES = ['plain' => 'Nur Symbol', 'circle' => 'Runde Fläche', 'square' => 'Eckige Fläche'];
+    public const LAYOUTS = ['horizontal' => 'Nebeneinander', 'vertical' => 'Untereinander'];
+
+    /**
+     * Prüft die Eingabe der Einstellungen und gibt nur gefüllte, gültige Adressen zurück.
+     *
+     * @param mixed $input das Feld `social` des Formulars: Netzwerk → Adresse
+     *
+     * @return array<string, string>
+     *
+     * @throws InvalidPage
+     */
+    public static function clean(mixed $input): array
+    {
+        $profiles = [];
+        foreach (self::NETWORKS as $key => $label) {
+            $url = trim((string) (is_array($input) ? ($input[$key] ?? '') : ''));
+            if ('' === $url) {
+                continue;
+            }
+            if (strlen($url) > 400 || !str_starts_with($url, 'https://') || false === filter_var($url, FILTER_VALIDATE_URL) || 1 === preg_match('/[\s"<>\\\\]/', $url)) {
+                throw new InvalidPage(sprintf('Die Adresse für %s muss mit https:// beginnen und eine gültige Adresse sein.', $label));
+            }
+            $profiles[$key] = $url;
+        }
+
+        return $profiles;
+    }
+}

src/Content/StyleCompiler.php

@@ -49,6 +49,14 @@ final class StyleCompiler
                     }
                     continue;
                 }
+                if ('scrolled' === $key) {
+                    $this->require(is_array($value), 'Scrolled styles must be an object.');
+                    foreach ($value as $scrolledKey => $scrolledValue) {
+                        $this->require(in_array($scrolledKey, StyleSchema::scrollable(), true), sprintf('The property "%s" has no scrolled value.', (string) $scrolledKey));
+                        $this->value($properties[$scrolledKey], $scrolledValue, (string) $scrolledKey);
+                    }
+                    continue;
+                }
                 $this->require(is_string($key) && isset($properties[$key]), sprintf('Unknown style property "%s".', (string) $key));
                 $this->value($properties[$key], $value, $key);
             }
@@ -177,10 +185,27 @@ final class StyleCompiler
             if ('' !== $images) {
                 $rules .= sprintf('#%s img{%s}', $id, $images);
             }
+            // Slider colours: on the slider for the script-free markers, and on the control bar
+            // the script places right after it.
+            $controls = $this->declarations($values, 'controls', $device);
+            if ('' !== $controls) {
+                $rules .= sprintf('#%s,#%s + .slider-controls{%s}', $id, $id, $controls);
+            }
+            // Der Menü-Knopf: die Farben liegen am Block, gelten aber dem aufklappbaren Knopf.
+            $burger = $this->declarations($values, 'burger', $device);
+            if ('' !== $burger) {
+                $rules .= sprintf('#%s .menu-burger>summary{%s}', $id, $burger);
+            }
             $hover = is_array($values['hover'] ?? null) ? $this->declarations($values['hover'], 'self', $device) : '';
             if ('' !== $hover) {
                 $rules .= sprintf('#%s:hover,#%s:focus-within{%s}', $id, $id, $hover);
             }
+            // The scrolled state: scrolled.js puts `is-scrolled` on <html> once the page has moved.
+            // The change eases in, so a header does not snap from glass to solid.
+            $scrolled = is_array($values['scrolled'] ?? null) ? $this->declarations($values['scrolled'], 'self', $device) : '';
+            if ('' !== $scrolled) {
+                $rules .= sprintf('#%s{transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s,opacity .3s}html.is-scrolled #%s{%s}', $id, $id, $scrolled);
+            }
             if ('' === $rules) {
                 continue;
             }

src/Content/StyleSchema.php

@@ -204,6 +204,20 @@ final class StyleSchema
                 'auto' => 'Automatisch', 'pointer' => 'Hand', 'default' => 'Pfeil', 'not-allowed' => 'Gesperrt', 'grab' => 'Greifen', 'zoom-in' => 'Lupe',
             ]],
             'transition' => ['group' => 'effect', 'type' => 'number', 'css' => null, 'label' => 'Übergangsdauer (ms)', 'min' => 0, 'max' => 2000, 'step' => 25],
+            // The slider controls are built by the script next to the slider, so their colours
+            // travel as custom properties onto the slider and its controls (target "controls").
+            // Der Menü-Knopf ist ein eigener Knopf im Menüblock, kein eigener Baustein: seine
+            // Farben liegen deshalb auf dem Block und wirken auf das summary-Element darin.
+            'burgerColor' => ['group' => 'menu', 'type' => 'color', 'css' => 'color', 'label' => 'Menü-Knopf: Schrift und Striche', 'target' => 'burger'],
+            'burgerBackgroundColor' => ['group' => 'menu', 'type' => 'color', 'css' => 'background-color', 'label' => 'Menü-Knopf: Fläche', 'target' => 'burger'],
+            'burgerBorderColor' => ['group' => 'menu', 'type' => 'color', 'css' => 'border-color', 'label' => 'Menü-Knopf: Rahmen', 'target' => 'burger'],
+            'burgerBorderWidth' => ['group' => 'menu', 'type' => 'length', 'css' => 'border-width', 'label' => 'Menü-Knopf: Rahmenstärke', 'target' => 'burger'],
+            'burgerBorderRadius' => ['group' => 'menu', 'type' => 'length', 'css' => 'border-radius', 'label' => 'Menü-Knopf: Ecken', 'target' => 'burger'],
+            'burgerFontSize' => ['group' => 'menu', 'type' => 'length', 'css' => 'font-size', 'label' => 'Menü-Knopf: Schriftgröße', 'target' => 'burger'],
+            'sliderDotColor' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-dot', 'label' => 'Punkte', 'target' => 'controls'],
+            'sliderDotActiveColor' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-dot-active', 'label' => 'Aktiver Punkt', 'target' => 'controls'],
+            'sliderControlColor' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-ink', 'label' => 'Pfeile und Zähler', 'target' => 'controls'],
+            'sliderControlBackground' => ['group' => 'slider', 'type' => 'color', 'css' => '--slider-bg', 'label' => 'Hintergrund der Knöpfe', 'target' => 'controls'],
         ];
     }
 
@@ -219,6 +233,16 @@ final class StyleSchema
         return array_keys(array_filter(self::properties(), static fn (array $p): bool => $p['hover'] ?? false));
     }
 
+    /**
+     * Properties that may also carry a value for the scrolled page - the Flatsome transparent
+     * header that turns solid once the reader has scrolled. Colours, shadow and opacity only:
+     * a header that changes size while scrolling would push the page around under the finger.
+     */
+    public static function scrollable(): array
+    {
+        return ['backgroundColor', 'color', 'borderColor', 'shadowColor', 'opacity'];
+    }
+
     public static function sides(): array
     {
         return ['top' => 'Oben', 'right' => 'Rechts', 'bottom' => 'Unten', 'left' => 'Links'];

src/Controller/EditorController.php

@@ -127,6 +127,7 @@ final class EditorController extends AbstractController
             'sides' => StyleSchema::sides(),
             'corners' => StyleSchema::corners(),
             'hoverable' => StyleSchema::hoverable(),
+            'scrollable' => StyleSchema::scrollable(),
             'colors' => $theme['colors'],
             'fonts' => $theme['fonts'],
             'presets' => $theme['presets'],

src/Controller/PageController.php

@@ -80,6 +80,10 @@ final class PageController extends AbstractController
         $documents = [$page['document'], ...array_values($areas), ...array_values($sections)];
         $needsSlider = (bool) array_filter($documents, fn (array $doc): bool => $this->hasType($doc, 'slider'));
         $needsMotion = (bool) array_filter($documents, fn (array $doc): bool => $this->hasEntrance($doc));
+        // Only the header changes with the scroll position; a scrolled value anywhere in it asks
+        // for the small script that marks the page as scrolled.
+        // Den Nach-oben-Knopf blendet dasselbe Skript ein; ohne es bleibt er dauerhaft sichtbar.
+        $needsScrolled = (isset($areas['header']) && $this->hasScrolled($areas['header'])) || (bool) ($this->settings->load()['scrollTop'] ?? false);
         $styles = $this->theme->css($theme).$this->scrollTopStyles($this->settings->load(), $theme).$this->styles->compileDocument($page['document']).$this->code->compileDocument($page['document']);
         foreach ([...array_values($areas), ...array_values($sections)] as $extra) {
             $styles .= $this->styles->compileDocument($extra).$this->code->compileDocument($extra);
@@ -107,6 +111,7 @@ final class PageController extends AbstractController
             // dafür ein Skript braucht - nach demselben Muster wie die Tabs.
             'needsSlider' => $needsSlider,
             'needsMotion' => $needsMotion,
+            'needsScrolled' => $needsScrolled,
             // Ein Bild, das sich vergroessern laesst, ist ohne Skript ein Verweis auf die
             // grosse Fassung. Das Skript kommt nur dazu, wo es etwas zu tun hat.
             'needsZoom' => $this->hasZoom($page['document']) || (bool) array_filter(array_values($areas), fn (array $area): bool => $this->hasZoom($area)),
@@ -136,7 +141,7 @@ final class PageController extends AbstractController
         // Die Pruefung braucht ein Skript von Cloudflare und einen Rahmen dafuer. Beides wird nur
         // dort erlaubt, wo tatsaechlich ein Formular steht - nicht auf jeder Seite der Website.
         $mitTurnstile = $this->turnstile->isActive() && $this->hasType($page['document'], 'form');
-        $wantsScript = ($mitTurnstile || $this->hasType($page['document'], 'tabs') || $needsSlider || $needsMotion || $this->hasZoom($page['document']) || [] !== $this->code->scriptsOf($page['document']));
+        $wantsScript = ($mitTurnstile || $this->hasType($page['document'], 'tabs') || $needsSlider || $needsMotion || $needsScrolled || $this->hasZoom($page['document']) || [] !== $this->code->scriptsOf($page['document']));
         $frames = $this->frameHosts($request, $page['document'], ...array_values($areas), ...array_values($sections));
         if ($mitTurnstile) {
             $frames[] = 'challenges.cloudflare.com';
@@ -413,6 +418,27 @@ final class PageController extends AbstractController
         return $gefunden;
     }
 
+    /** Whether any block carries values for the scrolled page (see StyleSchema::scrollable). */
+    private function hasScrolled(array $document): bool
+    {
+        $walk = function (array $blocks) use (&$walk): bool {
+            foreach ($blocks as $block) {
+                foreach ($block['style'] ?? [] as $values) {
+                    if ([] !== ($values['scrolled'] ?? [])) {
+                        return true;
+                    }
+                }
+                if ($walk($block['children'] ?? [])) {
+                    return true;
+                }
+            }
+
+            return false;
+        };
+
+        return $walk($document['blocks'] ?? []);
+    }
+
     private function hasEntrance(array $document): bool
     {
         $walk = function (array $blocks) use (&$walk): bool {
@@ -464,10 +490,13 @@ final class PageController extends AbstractController
         }
         $base = null === $term ? '/beitraege' : '/'.PostRepository::ARCHIVE_PREFIX[$kind].'/'.$term['slug'];
 
-        $frames = $this->frameHosts($request, ...array_values($this->areas()));
+        $areas = $this->areas();
+        $frames = $this->frameHosts($request, ...array_values($areas));
+        $needsScrolled = isset($areas['header']) && $this->hasScrolled($areas['header']);
 
         return $this->shell($this->render('archive.html.twig', [
-            'areas' => $this->areas(),
+            'areas' => $areas,
+            'needsScrolled' => $needsScrolled,
             'navigation' => $this->navigation(''),
             'term' => $term,
             'heading' => null === $term ? 'Beiträge' : $term['name'],
@@ -475,7 +504,7 @@ final class PageController extends AbstractController
             'base' => $base,
             'canonical' => rtrim($this->siteOrigin, '/').$base.($result['page'] > 1 ? '?seite='.$result['page'] : ''),
             'navigation' => $this->navigation(''),
-        ]), frameHosts: $frames);
+        ]), $needsScrolled, frameHosts: $frames);
     }
 
     #[Route('/feed.xml', name: 'feed', methods: ['GET'])]

src/Controller/SettingsController.php

@@ -9,6 +9,7 @@ use App\Content\NotFoundPage;
 use App\Content\PageRepository;
 use App\Content\RedirectRepository;
 use App\Content\SiteSettings;
+use App\Content\SocialProfiles;
 use App\Content\Theme;
 use App\Domain\InvalidPage;
 use App\Domain\StaleWrite;
@@ -47,6 +48,8 @@ final class SettingsController extends AbstractController
             'images' => $this->media->page(1, false, 96)['items'],
             // Fuer die Farbfelder: dieselbe Palette, die auch der Editor anbietet.
             'palette' => $this->theme->load()['colors'],
+            'socialNetworks' => SocialProfiles::NETWORKS,
+            'socialPlaceholders' => SocialProfiles::PLACEHOLDERS,
         ]);
     }
 

src/Kernel.php

@@ -8,4 +8,17 @@ use Symfony\Component\HttpKernel\Kernel as BaseKernel;
 class Kernel extends BaseKernel
 {
     use MicroKernelTrait;
+
+    private ?string $releaseCacheDir = null;
+
+    public function getCacheDir(): string
+    {
+        // A web update still needs its compiled services until the response has finished.
+        // The next release builds its own cache without deleting the running request's files.
+        return $this->releaseCacheDir ??= parent::getCacheDir().'/release-'.substr(
+            hash_file('sha256', $this->getProjectDir().'/VERSION'),
+            0,
+            16,
+        );
+    }
 }

src/Ops/ArchiveUpdate.php

@@ -218,9 +218,9 @@ final class ArchiveUpdate
         }
         $melden($schritte, 'Dateien ersetzen', true, sprintf('%d Einträge ersetzt, var/ und .env unberührt.', $ersetzt));
 
-        // Der Zwischenspeicher gehört zum alten Stand.
-        $this->removeDirectory($this->root.'/var/cache');
-        $melden($schritte, 'Zwischenspeicher', true, 'Geleert - sonst liefe die neue Fassung mit den Wegweisern der alten.');
+        // Never delete compiled services underneath the running kernel. The new kernel uses
+        // a release-specific cache directory; old requests can finish with their own files.
+        $melden($schritte, 'Zwischenspeicher', true, 'Die neue Fassung verwendet einen eigenen Cache; laufende Anfragen behalten ihren bisherigen.');
 
         // Hier endet dieser Durchgang mit Absicht. Der laufende Prozess hat den alten Code im
         // Speicher - Klassen, die PHP schon geladen hat, laedt es nicht neu. Die Migrationen
@@ -341,19 +341,4 @@ final class ArchiveUpdate
 
         return $treffer[1];
     }
-
-    private function removeDirectory(string $pfad): void
-    {
-        if (!is_dir($pfad)) {
-            return;
-        }
-        foreach (scandir($pfad) ?: [] as $eintrag) {
-            if ('.' === $eintrag || '..' === $eintrag) {
-                continue;
-            }
-            $voll = $pfad.'/'.$eintrag;
-            is_dir($voll) ? $this->removeDirectory($voll) : @unlink($voll);
-        }
-        @rmdir($pfad);
-    }
 }

templates/admin/editor.html.twig

@@ -8,43 +8,87 @@
 {% block scripts %}<script type="module" src="/assets/editor.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block body %}
 {# The API base decides what is edited. An area is shared, so it has no draft and no
-   publication: saving is live, and the publish button is left out. #}
+   publication: saving is live, and the publish button is left out.
+
+   One sidebar, one canvas. The sidebar shows one thing at a time - the element library, the
+   page structure, the page settings or the options of the selected element - the way the
+   Flatsome UX Builder does it. Nothing competes for the eye. #}
 <div id="editor" data-api="{{ area ? path('admin_partial_editor', {id: area.id}) : path('admin_document', {id: page.id}) }}" data-kind="{{ area ? area.kind : 'page' }}" data-can-script="{{ is_granted('ROLE_ADMIN') ? 'true' : 'false' }}" data-can-publish="{{ not area and is_granted('ROLE_PUBLISHER') ? 'true' : 'false' }}">
     <header class="editor-header">
-        <a class="back-link" href="{{ path(listRoute) }}" aria-label="{{ area ? 'Zur Bereichsübersicht' : (page.type == 'post' ? 'Zur Beitragsübersicht' : 'Zur Seitenübersicht') }}">← <span>{{ area ? 'Bereiche' : (page.type == 'post' ? 'Beiträge' : 'Seiten') }}</span></a>
+        <a class="back-link" href="{{ path(listRoute) }}" aria-label="{{ area ? 'Zur Bereichsübersicht' : (page.type == 'post' ? 'Zur Beitragsübersicht' : 'Zur Seitenübersicht') }}"><span aria-hidden="true">←</span> <span>{{ area ? 'Bereiche' : (page.type == 'post' ? 'Beiträge' : 'Seiten') }}</span></a>
         <div class="editor-page-name"><h1>{{ subject.title }}</h1><span>{{ area ? kinds[area.kind]|default('Bereich') : '/' ~ (page.slug == 'home' ? '' : page.slug) }}</span></div>
-        <div class="history-actions"><button id="undo" class="icon-button" title="Rückgängig (Strg+Z)" aria-label="Rückgängig" disabled>↶</button><button id="redo" class="icon-button" title="Wiederholen (Strg+Umschalt+Z)" aria-label="Wiederholen" disabled>↷</button></div>
-        <div class="save-actions"><span id="save-status" role="status" aria-live="polite">Wird geladen …</span><button id="save" class="secondary" disabled>{{ area ? 'Bereich speichern' : 'Entwurf speichern' }}</button>{% if not area and is_granted('ROLE_PUBLISHER') %}<button id="publish" class="primary" disabled>Veröffentlichen</button>{% endif %}</div>
+        <div class="viewport-controls" role="group" aria-label="Vorschaugröße">
+            <button type="button" data-viewport="desktop" aria-pressed="true" title="Desktop"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><span>Desktop</span></button>
+            <button type="button" data-viewport="tablet" aria-pressed="false" title="Tablet"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M11 18h2"/></svg><span>Tablet</span></button>
+            <button type="button" data-viewport="mobile" aria-pressed="false" title="Mobil"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg><span>Mobil</span></button>
+        </div>
+        <div class="history-actions">
+            <button id="undo" class="icon-button" title="Rückgängig (Strg+Z)" aria-label="Rückgängig" disabled><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 0 12h-3"/></svg></button>
+            <button id="redo" class="icon-button" title="Wiederholen (Strg+Umschalt+Z)" aria-label="Wiederholen" disabled><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 14 5-5-5-5"/><path d="M20 9H10a6 6 0 0 0 0 12h3"/></svg></button>
+            <button id="preview-motion" type="button" class="icon-button" aria-pressed="false" title="Bewegung in der Vorschau abspielen" aria-label="Bewegung in der Vorschau abspielen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 4 14 8-14 8z"/></svg></button>
+        </div>
+        <div class="save-actions">
+            <span id="save-status" role="status" aria-live="polite">Wird geladen …</span>
+            <button id="save" class="secondary" disabled>{{ area ? 'Bereich speichern' : 'Entwurf speichern' }}</button>
+            {% if not area and is_granted('ROLE_PUBLISHER') %}<button id="publish" class="primary" disabled>Veröffentlichen</button>{% endif %}
+            {% if not area %}<a class="icon-button" href="{{ page.path == 'home' ? '/' : '/' ~ page.path }}" target="_blank" rel="noopener" title="Öffentliche Seite öffnen" aria-label="Öffentliche Seite öffnen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h6v6M20 4l-9 9"/><path d="M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/></svg></a>{% endif %}
+        </div>
     </header>
     <div id="message" class="editor-message" role="alert" hidden></div>
     <div id="recovery" class="recovery-bar" hidden><button id="download" class="secondary">Änderungen als JSON sichern</button><button id="reload" class="secondary">Serverstand laden</button><a href="{{ path('admin_login') }}" target="_blank" rel="noopener">Erneut anmelden ↗</a></div>
     <main id="admin-main" class="editor-layout" tabindex="-1">
-        <aside class="left-panel" aria-label="Elemente und Seitenstruktur">
-            <div class="section-launch"><button id="add-root-section" class="secondary full-width" disabled>＋ Neue Sektion auf Seitenebene</button><p class="field-help">Nach dem aktuellen Abschnitt, außerhalb des gewählten Inhalts.</p></div>
-            <section class="panel-section"><div class="panel-title"><h2>Werkzeugkasten</h2><button id="toggle-library" class="text-button" aria-expanded="true" aria-controls="toolbox">− <span class="visually-hidden">Werkzeugkasten einklappen</span></button></div><div id="toolbox"><p id="insert-hint" class="insert-hint" role="status" hidden>Einfügepunkt gesetzt — das nächste Element landet dort. <button id="cancel-insert" class="text-button" type="button">Abbrechen</button></p><h3 class="preset-heading">Element hinzufügen</h3>
-                <p class="panel-hint">Ziehen und in der Vorschau ablegen, oder klicken. Der Werkzeugkasten zeigt an, was an der gewählten Stelle hineinpasst — was dort nicht hingehört, sagt beim Überfahren warum.</p>
-                <label class="search-label" for="library-search">Element zum Einfügen suchen</label>
-                <input id="library-search" type="search" placeholder="z. B. Galerie, Zeile, Formular …" autocomplete="off">
-                <p id="library-found" class="field-help" role="status"></p>
-                <div id="library" class="library"></div>
-                <button id="open-media-library" class="secondary full-width media-launch" disabled>Medienverwaltung öffnen</button>
-                <h3 class="preset-heading">Fertige Abschnitte</h3><p class="panel-hint">Wird nach dem aktuellen Seitenabschnitt eingefügt.</p>
-                <div id="presets" class="preset-library"><button data-preset="hero" disabled><span aria-hidden="true">▮</span> Vollbild-Hero</button><button data-preset="intro" disabled><span aria-hidden="true">▤</span> Intro mit Button</button><button data-preset="columns" disabled><span aria-hidden="true">▥</span> Zwei Leistungen</button><button data-preset="cta" disabled><span aria-hidden="true">↗</span> Kontaktaufruf</button></div>
-            </div></section>
-            <section class="panel-section structure-section"><div class="panel-title"><h2>Struktur</h2><button id="select-page" class="text-button">Seite</button></div><label class="search-label" for="tree-search">Element auf der Seite suchen</label><input id="tree-search" type="search" placeholder="Text oder Elementtyp …"><div class="tree-tools"><button id="expand-all" class="text-button">Alle öffnen</button><button id="collapse-all" class="text-button">Einklappen</button></div><p class="panel-hint">Ziehen oder mit den Schaltflächen verschieben.</p><nav id="structure" aria-label="Blöcke auswählen"></nav>
-                <div class="block-actions"><button id="move-up" title="Nach oben verschieben" aria-label="Nach oben verschieben">↑</button><button id="move-down" title="Nach unten verschieben" aria-label="Nach unten verschieben">↓</button><button id="nest" title="In vorherigen Container verschachteln" aria-label="In vorherigen Container verschachteln">⇥</button><button id="outdent" title="Eine Ebene herausheben" aria-label="Eine Ebene herausheben">⇤</button><button id="duplicate">Duplizieren</button><button id="delete" class="danger-text">Löschen</button></div>
-            </section>
+        <aside class="sidebar" aria-label="Bearbeitung" data-view="elements">
+            {# The top of the sidebar answers "where am I". Without a selection it is a small
+               set of tabs; with one it is the element's name, the way back up and the plus. #}
+            <div class="sidebar-head">
+                <div class="sidebar-nav" role="tablist" aria-label="Seitenleiste">
+                    <button type="button" role="tab" data-view="elements" aria-selected="true">Elemente</button>
+                    <button type="button" role="tab" data-view="structure" aria-selected="false">Struktur</button>
+                    <button type="button" id="select-page" role="tab" data-view="page" aria-selected="false">Seite</button>
+                </div>
+                <div class="sidebar-element" hidden>
+                    <button type="button" id="go-parent" class="icon-button" title="Zurück zum übergeordneten Element" aria-label="Zurück zum übergeordneten Element"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 4-8 8 8 8"/></svg></button>
+                    <div class="sidebar-element-name"><h2 id="properties-title">Element</h2><nav id="breadcrumbs" class="breadcrumbs" aria-label="Ausgewähltes Element"></nav></div>
+                    <button type="button" id="add-here" class="icon-button" title="Element hinzufügen" aria-label="Element hinzufügen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
+                    <button type="button" id="close-element" class="icon-button" title="Auswahl aufheben (Escape)" aria-label="Auswahl aufheben"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
+                </div>
+                <div class="property-tabs" role="group" aria-label="Eigenschaftenbereich" hidden><button data-panel="content" aria-pressed="true">Inhalt</button><button data-panel="design" aria-pressed="false">Design</button><button data-panel="advanced" aria-pressed="false">Erweitert</button></div>
+            </div>
+            <div class="sidebar-body">
+                <section class="sidebar-view" data-view="elements" id="toolbox">
+                    <p id="insert-hint" class="insert-hint" role="status" hidden>Einfügepunkt gesetzt — das nächste Element landet dort. <button id="cancel-insert" class="text-button" type="button">Abbrechen</button></p>
+                    <label class="visually-hidden" for="library-search">Element suchen</label>
+                    <input id="library-search" type="search" placeholder="Element suchen …" autocomplete="off">
+                    <p id="library-found" class="field-help" role="status"></p>
+                    <div id="library" class="library"></div>
+                    <h3 class="library-group-title">Fertige Abschnitte</h3>
+                    <div id="presets" class="preset-library"><button type="button" data-preset="hero" disabled><span aria-hidden="true">▮</span> Vollbild-Hero</button><button type="button" data-preset="intro" disabled><span aria-hidden="true">▤</span> Intro mit Button</button><button type="button" data-preset="columns" disabled><span aria-hidden="true">▥</span> Zwei Leistungen</button><button type="button" data-preset="cta" disabled><span aria-hidden="true">↗</span> Kontaktaufruf</button></div>
+                    <button id="open-media-library" type="button" class="secondary full-width media-launch" disabled>Mediathek öffnen</button>
+                </section>
+                <section class="sidebar-view" data-view="structure" hidden>
+                    <label class="visually-hidden" for="tree-search">Element auf der Seite suchen</label>
+                    <input id="tree-search" type="search" placeholder="Auf der Seite suchen …">
+                    <div class="tree-tools"><button id="expand-all" class="text-button" type="button">Alle öffnen</button><button id="collapse-all" class="text-button" type="button">Einklappen</button><button id="nest" class="text-button" type="button" title="In vorherigen Container verschachteln">⇥ Einrücken</button><button id="outdent" class="text-button" type="button" title="Eine Ebene herausheben">⇤ Ausrücken</button></div>
+                    <nav id="structure" aria-label="Blöcke auswählen"></nav>
+                </section>
+                <section class="sidebar-view" data-view="element" hidden>
+                    <div id="properties"><p class="muted">Inhalte werden geladen …</p></div>
+                </section>
+            </div>
+            <div class="sidebar-foot block-actions" hidden>
+                <button id="move-up" type="button" class="icon-button" title="Nach oben verschieben" aria-label="Nach oben verschieben"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
+                <button id="move-down" type="button" class="icon-button" title="Nach unten verschieben" aria-label="Nach unten verschieben"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg></button>
+                <button id="duplicate" type="button" class="secondary">Duplizieren</button>
+                <button id="delete" type="button" class="secondary danger-text">Löschen</button>
+            </div>
+            <p id="motion-status" class="sidebar-note" role="status" hidden>Dein Browser meldet „Bewegung reduzieren“. Die Website spielt Einblendungen trotzdem ab, solange unter Einstellungen nicht „Systemvorgabe beachten“ gewählt ist.</p>
         </aside>
-        <div class="panel-resizer" data-resize="left" role="separator" tabindex="0" aria-label="Linke Seitenleiste vergrößern oder verkleinern" aria-orientation="vertical" aria-valuemin="240" aria-valuemax="560" aria-valuenow="280" title="Ziehen oder Pfeiltasten · Doppelklick setzt zurück"></div>
         <section class="canvas-panel" aria-label="Live-Vorschau">
-            <div class="canvas-toolbar"><span class="canvas-label">LIVE-VORSCHAU</span><div class="viewport-controls" role="group" aria-label="Vorschaugröße"><button data-viewport="desktop" aria-pressed="true">Desktop</button><button data-viewport="tablet" aria-pressed="false">Tablet</button><button data-viewport="mobile" aria-pressed="false">Mobil</button></div><button id="preview-motion" type="button" class="text-button" aria-pressed="false">Bewegung testen</button>{% if not area %}<a href="{{ page.path == 'home' ? '/' : '/' ~ page.path }}" target="_blank" rel="noopener" aria-label="Öffentliche Seite öffnen">↗</a>{% endif %}</div>
-            <p id="preview-status" class="preview-status" role="status">Vorschau wird geladen …</p>
-            <nav id="breadcrumbs" class="breadcrumbs" aria-label="Ausgewähltes Element"></nav>
             <div class="canvas-scroll" tabindex="0" role="region" aria-label="Vorschau scrollen"><div id="preview-stage"><iframe id="preview" title="Vorschau der bearbeiteten Seite" sandbox="allow-same-origin" class="viewport-desktop"></iframe></div></div>
+            <p id="preview-status" class="preview-status" role="status">Vorschau wird geladen …</p>
         </section>
-        <div class="panel-resizer" data-resize="right" role="separator" tabindex="0" aria-label="Rechte Seitenleiste vergrößern oder verkleinern" aria-orientation="vertical" aria-valuemin="280" aria-valuemax="560" aria-valuenow="320" title="Ziehen oder Pfeiltasten · Doppelklick setzt zurück"></div>
-        <aside class="right-panel" aria-label="Eigenschaften"><div class="panel-section"><p class="eyebrow">FEINSCHLIFF</p><h2 id="properties-title">Seiteneinstellungen</h2><div class="property-tabs" role="group" aria-label="Eigenschaftenbereich"><button data-panel="content" aria-pressed="true">Inhalt</button><button data-panel="design" aria-pressed="false">Design</button><button data-panel="advanced" aria-pressed="false">Erweitert</button></div><div id="properties"><p class="muted">Inhalte werden geladen …</p></div></div><div class="panel-note">{{ area ? 'Speichern aktualisiert diesen Bereich auf allen Seiten, die ihn verwenden.' : 'Die Vorschau zeigt deinen Entwurf. Besucher sehen weiterhin den veröffentlichten Stand.' }}</div></aside>
     </main>
+    <div id="context-menu" class="context-menu" role="menu" aria-label="Elementmenü" hidden></div>
     <noscript><p class="notice error">Zum Bearbeiten muss JavaScript aktiviert sein. Die öffentliche Website funktioniert ohne JavaScript.</p></noscript>
     <dialog id="publish-dialog" aria-labelledby="publish-title"><h2 id="publish-title">Seite veröffentlichen?</h2><p>Der gespeicherte Entwurf ersetzt den bisher sichtbaren Inhalt dieser Seite.</p><div class="dialog-actions"><button id="cancel-publish" class="secondary">Abbrechen</button><button id="confirm-publish" class="primary">Jetzt veröffentlichen</button></div></dialog>
     <dialog id="preset-dialog" aria-labelledby="preset-title"><h2 id="preset-title">Gestaltung als Vorlage speichern</h2><p>Die Vorlage steht danach für jeden Block auf jeder Seite zur Verfügung.</p><label for="preset-name">Name der Vorlage</label><input id="preset-name" maxlength="60" placeholder="Heller Abschnitt"><p id="preset-error" class="field-error" hidden></p><div class="dialog-actions"><button id="cancel-preset" class="secondary">Abbrechen</button><button id="confirm-preset" class="primary">Vorlage speichern</button></div></dialog>

templates/admin/settings.html.twig

@@ -95,7 +95,19 @@
         <input id="description" name="description" maxlength="300" value="{{ settings.description }}">
         <label for="sameAs">Profile</label>
         <textarea id="sameAs" name="sameAs" rows="3" placeholder="https://www.linkedin.com/company/…">{{ settings.sameAs|join('\n') }}</textarea>
-        <p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig.</p>
+        <p class="field-help">Eine HTTPS-Adresse je Zeile, höchstens zwanzig. Die sozialen Profile unten stehen automatisch mit in den strukturierten Daten.</p>
+        <fieldset class="field-set">
+            <legend>Soziale Profile</legend>
+            <p class="field-help">Einmal hier eintragen, dann mit dem Element „Soziale Profile“ an jeder Stelle einsetzen – im Kopf, im Fuß, in einer Kontaktsektion. Größe, Form und Farbe bestimmt das Element. Leere Felder erscheinen nicht.</p>
+            <div class="fields">
+                {% for key, name in socialNetworks %}
+                <div>
+                    <label for="social-{{ key }}">{{ name }}</label>
+                    <input id="social-{{ key }}" name="social[{{ key }}]" type="url" maxlength="400" value="{{ settings.social[key]|default('') }}" placeholder="{{ socialPlaceholders[key] }}">
+                </div>
+                {% endfor %}
+            </div>
+        </fieldset>
         <label class="check-label" for="localBusiness"><input id="localBusiness" name="localBusiness" type="checkbox" value="1"{{ settings.localBusiness ? ' checked' : '' }}> Als lokales Unternehmen auszeichnen</label>
         <p class="field-help">Braucht mindestens Straße und Ort. Sinnvoll bei einem Standort mit Kundenverkehr.</p>
         <label class="check-label" for="llmsTxt"><input id="llmsTxt" name="llmsTxt" type="checkbox" value="1"{{ settings.llmsTxt ? ' checked' : '' }}> <code>llms.txt</code> ausliefern</label>
@@ -165,6 +177,14 @@
         <p class="field-help">Nur Kommentarzeilen und einfache Anweisungen wie <code>Disallow: /pfad</code>, <code>Allow:</code>, <code>User-agent:</code> und <code>Crawl-delay:</code>. Leerzeilen trennen Blöcke, höchstens 200 Zeilen. Hier stehen zum Beispiel eigene Regeln je Bot – etwa welche KI-Crawler die Website lesen dürfen und welche nicht.</p>
         <div class="section-head"><h2>Einwilligung</h2><span class="muted">Nur nötig, wenn die Website etwas von Dritten lädt</span></div>
         <label class="check-label" for="stickyHeader"><input id="stickyHeader" name="stickyHeader" type="checkbox" value="1"{{ settings.stickyHeader ? ' checked' : '' }}> Kopfbereich beim Scrollen oben halten</label>
+        <label class="check-label" for="headerOverlay"><input id="headerOverlay" name="headerOverlay" type="checkbox" value="1"{{ settings.headerOverlay ? ' checked' : '' }}> Kopfbereich über dem Inhalt schweben lassen</label>
+        <p class="field-help">Der Kopfbereich liegt dann über der ersten Sektion, wie der transparente Header in Flatsome. Seine Farben für den gescrollten Zustand stellst du im Editor des Kopfbereichs unter Design → Hintergrund „beim Scrollen“ ein; zusammen mit „oben halten“ bleibt er beim Scrollen sichtbar.</p>
+        <label for="motion">Einblendungen und Hover-Bewegungen</label>
+        <select id="motion" name="motion">
+            <option value="always"{{ settings.motion == 'always' ? ' selected' : '' }}>Immer abspielen (wie Flatsome)</option>
+            <option value="respect"{{ settings.motion == 'respect' ? ' selected' : '' }}>Browservorgabe „Bewegung reduzieren“ beachten</option>
+        </select>
+        <p class="field-help">Manche Browser melden „Bewegung reduzieren“, ohne dass jemand es eingestellt hat – dann bleibt bei „beachten“ jede Einblendung aus. „Immer abspielen“ verhält sich wie andere Websites; die Slider-Automatik hält an, sobald jemand sie berührt.</p>
         <label class="check-label" for="postMetaHeader"><input id="postMetaHeader" name="postMetaHeader" type="checkbox" value="1"{{ settings.postMetaHeader ? ' checked' : '' }}> Datum, Autor und Kategorie über einem Beitrag zeigen</label>
         <label class="check-label" for="consentBanner"><input id="consentBanner" name="consentBanner" type="checkbox" value="1"{{ settings.consentBanner ? ' checked' : '' }}> Einwilligungshinweis anzeigen</label>
         <p class="field-help">Ohne eingebettete Inhalte anderer Anbieter braucht diese Website keine Einwilligung – dann ist ein Banner nur im Weg und sollte aus bleiben. Eingebettete Inhalte laden ohnehin erst nach Zustimmung, unabhängig von diesem Schalter.</p>

templates/archive.html.twig

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="de">
+<html lang="de"{{ siteSettings.load().motion == 'respect' ? ' class="motion-respect"' : '' }}>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -19,12 +19,13 @@
     <link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
     <link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}">
     <link rel="stylesheet" href="/assets/design.css?v={{ kant_version() }}">
+    {% if needsScrolled|default(false) %}<script type="module" src="/assets/scrolled.js?v={{ kant_version() }}"></script>{% endif %}
 </head>
 {% set consentOpen = not editing|default(false) and consentGate.needsBanner(app.request) %}
 <body class="kant{{ consentOpen ? ' consent-open' : '' }}">
     <a class="skip-link" href="#main">Zum Inhalt springen</a>
     {% if areas.header|default(null) %}
-    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}">
+    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}{{ siteSettings.load().headerOverlay ? ' is-overlay' : '' }}">
         {% for block in areas.header.blocks %}{% include 'blocks/block.html.twig' with {block: block, postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: true, richHeadings: areas.header.schemaVersion|default(1) >= 17, eagerImage: null} only %}{% endfor %}
     </header>
     {% endif %}

templates/blocks/block.html.twig

@@ -99,7 +99,9 @@
          aria-label="{{ {header: 'Hauptnavigation', secondary: 'Zweite Navigation', footer: 'Fußzeile', legal: 'Rechtliches'}[props.slot]|default('Navigation') }}">
         {% if menuLayout == 'burger' or collapse != 'never' %}
         <details class="menu-burger">
-            <summary><span class="burger-lines" aria-hidden="true"></span><span class="burger-text">Menü</span></summary>
+            {# Nur Symbol behält den Namen für Vorlesesoftware; sichtbar ist dann nur der Strich. #}
+            {% set burger = props.burgerLabel|default('both') %}
+            <summary>{% if burger != 'text' %}<span class="burger-lines" aria-hidden="true"></span>{% endif %}<span class="burger-text{{ burger == 'icon' ? ' visually-hidden' : '' }}">Menü</span></summary>
             <div class="menu-burger-body">{% include 'nav.html.twig' with {links: links} only %}</div>
         </details>
         {% endif %}
@@ -170,6 +172,26 @@
     {% else %}
     <span id="{{ block.id }}" class="block-icon icon-size-{{ props.size }}{{ designClasses }}"{{ props.decorative ? ' aria-hidden="true"' : '' }}>{{ iconBody }}</span>
     {% endif %}
+{% elseif type == 'social' %}
+    {# Die Profile kommen aus den Einstellungen, der Block sagt nur, wie sie aussehen. Eine
+       Liste, weil es eine ist; ohne Beschriftung trägt jeder Link seinen Namen unsichtbar. #}
+    {% set profiles = siteSettings.load().social|default({}) %}
+    {% set chosen = props.networks|default([]) %}
+    {% set shown = [] %}
+    {% for key, name in constant('App\\Content\\SocialProfiles::NETWORKS') %}
+        {% if profiles[key]|default('') and (chosen is empty or key in chosen) %}{% set shown = shown|merge([{key: key, name: name, url: profiles[key]}]) %}{% endif %}
+    {% endfor %}
+    {% if shown is not empty %}
+    <ul id="{{ block.id }}" class="block-social social-{{ props.layout|default('horizontal') }} social-shape-{{ props.shape|default('plain') }} social-size-{{ props.size|default(24) }}{{ props.labels|default(false) ? ' social-labels' : '' }}{{ designClasses }}" aria-label="Soziale Profile">
+        {% for profile in shown %}
+        <li><a href="{{ profile.url }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab is defined ? props.newTab : true} only %}>{% include 'blocks/social-icon.html.twig' with {network: profile.key} only %}<span{{ props.labels|default(false) ? '' : ' class="visually-hidden"' }}>{{ profile.name }}</span></a></li>
+        {% endfor %}
+    </ul>
+    {% elseif editing|default(false) %}
+    <p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Noch keine sozialen Profile eingetragen. Sie stehen unter Einstellungen → Unternehmensdaten → Soziale Profile.</p>
+    {% else %}
+    <!-- Block {{ block.id }} (social): keine Profile eingetragen. -->
+    {% endif %}
 {% elseif type == 'progress' %}
     {# A progress bar as a real meter: the number is in the markup, not only in the width of a
        coloured div, so it is readable without seeing it. #}

templates/blocks/form.html.twig

@@ -58,6 +58,6 @@
     <noscript><p class="field-error">Zum Absenden dieses Formulars wird JavaScript benötigt. Schreib uns sonst gern direkt eine E-Mail.</p></noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
     {% endif %}
-    <button class="button" type="submit">Absenden</button>
+    <button class="button cms-button" type="submit">Absenden</button>
 </form>
 {% endif %}

templates/blocks/icon.html.twig

@@ -13,6 +13,9 @@
     phone: 'M6 3h4l2 5-2.5 1.5a12 12 0 0 0 5 5L16 12l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 4 5a2 2 0 0 1 2-2Z',
     mail: 'M3 6h18v12H3Zm0 1 9 7 9-7',
     pin: 'M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Zm0-8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z',
-    check: 'm4 12.5 5.5 5.5L20 6'
+    check: 'm4 12.5 5.5 5.5L20 6',
+    people: 'M9.5 11.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM2.5 20v-1c0-3.3 3-5 7-5s7 1.7 7 5v1M16.5 5.3a3.2 3.2 0 0 1 0 6.4M18 14.4c2.1.7 3.5 2.1 3.5 4.1V20',
+    music: 'M10 18V5.5L20 3v12.5M10 9.5 20 7M10 18a3 2.5 0 1 0-6 0 3 2.5 0 0 0 6 0ZM20 15.5a3 2.5 0 1 0-6 0 3 2.5 0 0 0 6 0Z',
+    home: 'm3 11.5 9-7.5 9 7.5M5.5 10v10h13V10M10 20v-6.5h4V20'
 } %}
 <svg class="block-icon" viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="{{ paths[name] }}"/></svg>

templates/blocks/social-icon.html.twig

@@ -0,0 +1,17 @@
+{# Ein Symbol je Netzwerk, gezeichnet im Strich des übrigen Symbolsatzes (icon.html.twig): keine
+   Markenbilder, keine Schrift, keine fremde Datei. Die Form ist so weit vereinfacht, dass sie
+   als Umriss erkennbar bleibt und in jeder Größe und Farbe funktioniert. #}
+{% set shapes = {
+    facebook: '<path d="M15.5 4h-2.2A3.8 3.8 0 0 0 9.5 7.8V10H7v3.2h2.5V20h3.3v-6.8h2.4l.5-3.2h-2.9V8.2c0-.6.3-.9.9-.9h2Z"/>',
+    instagram: '<rect x="3.5" y="3.5" width="17" height="17" rx="4.6"/><circle cx="12" cy="12" r="3.9"/><path d="M17 7h.01"/>',
+    linkedin: '<rect x="3.5" y="3.5" width="17" height="17" rx="2.6"/><path d="M7.6 10.4v6.2M7.6 7.5h.01M11.6 16.6v-6.2m0 2.7a2.6 2.6 0 0 1 5.2 0v3.5"/>',
+    youtube: '<rect x="2.5" y="5.5" width="19" height="13" rx="3.6"/><path d="m10.2 9.2 4.8 2.8-4.8 2.8Z"/>',
+    tiktok: '<path d="M14.2 4v9.6a3.6 3.6 0 1 1-3.6-3.6M14.2 4c0 2.6 2.1 4.7 4.7 4.7"/>',
+    x: '<path d="M4.5 4h4l11 16h-4Z"/><path d="M19 4l-6.1 7.1M5 20l6.1-7.1"/>',
+    threads: '<path d="M12.4 3.5A8.5 8.5 0 1 0 19 17.3c1.5-2.2.8-5.4-2.2-6.1-2.3-.6-4.7.4-5 2.6-.3 2.1 1.7 3.4 3.5 2.5 1.7-.8 2.1-3.5 1.1-6.4-.6-1.8-2-2.8-3.8-2.7-1.4.1-2.5.7-3.2 1.7"/>',
+    pinterest: '<path d="M12 3.5a8.5 8.5 0 0 0-3.4 16.3l1.5-5.6M9.4 12.6c-.6-2.6 1-4.8 3.1-4.8 1.9 0 3 1.4 2.6 3.4-.5 2.2-2 3.7-3.5 3.1M10.1 15.5 8.8 20.5"/>',
+    xing: '<path d="M6.5 6.5 9.4 11 6 16.5M18 3l-6.6 11.5L15.5 21"/>',
+    whatsapp: '<path d="M4 20l1.4-4A8.5 8.5 0 1 1 8.6 19.1Z"/><path d="M9.3 9.2c0 3 2.5 5.5 5.5 5.5l1.3-1.4-2-.9-.9.8a4.1 4.1 0 0 1-2.3-2.3l.8-.9-.9-2Z"/>',
+    google: '<path d="M12 12h8.4A8.5 8.5 0 1 1 18 6.1"/>'
+} %}
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">{{ shapes[network]|raw }}</svg>

templates/page.html.twig

@@ -1,5 +1,6 @@
 <!doctype html>
-<html lang="{{ page.locale }}">
+{# Ohne Klasse spielt die Website Bewegung immer ab; mit ihr gilt die Browservorgabe. #}
+<html lang="{{ page.locale }}"{{ siteSettings.load().motion == 'respect' ? ' class="motion-respect"' : '' }}>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -50,6 +51,7 @@
     {% if needsTabs|default(false) %}<script src="/assets/tabs.js?v={{ kant_version() }}" defer></script>{% endif %}
     {% if needsSlider|default(false) %}<script type="module" src="/assets/slider.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsMotion|default(false) %}<script type="module" src="/assets/motion.js?v={{ kant_version() }}"></script>{% endif %}
+    {% if needsScrolled|default(false) %}<script type="module" src="/assets/scrolled.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsZoom|default(false) %}<script src="/assets/lightbox.js?v={{ kant_version() }}" defer></script>{% endif %}
     {# Own scripts of this page, as a file. Never rendered in the editor preview: the preview must
        show the layout, not run code that could change the page under the editor's hands. #}
@@ -72,7 +74,7 @@
     {# Header and footer are block documents like any page, so they are built from elements
        instead of being written into this template. #}
     {% if areas.header|default(null) %}
-    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}">
+    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}{{ siteSettings.load().headerOverlay ? ' is-overlay' : '' }}">
         {% for block in areas.header.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({}), richText: areas.header.schemaVersion|default(1) >= 12, richHeadings: areas.header.schemaVersion|default(1) >= 17, eagerImage: eagerImage|default(null), inHeader: true} only %}{% endfor %}
     </header>
     {% endif %}

tests/ArchiveUpdateTest.php

@@ -70,10 +70,12 @@ final class ArchiveUpdateTest extends TestCase
     public function testAnUpdateReplacesTheApplicationAndLeavesTheInstallationUntouched(): void
     {
         $this->releases->release(self::BASE, self::API, '1.1.0', $this->archive('1.1.0'));
+        $this->write('var/cache/prod/running-service.php', '<?php // Still needed by this request.');
 
         $ergebnis = $this->updater()->run();
 
         self::assertTrue($ergebnis['ok'], $this->explain($ergebnis));
+        self::assertFileExists($this->root.'/var/cache/prod/running-service.php', 'The update request still loads compiled services after replacing files.');
         self::assertTrue($ergebnis['migrate'] ?? false, 'Nach dem Ersetzen fehlen noch die Migrationen.');
         self::assertSame(
             ['Fassung ermitteln', 'Sicherung', 'Archiv laden', 'Prüfsumme', 'Entpacken', 'Wartungszustand', 'Dateien ersetzen', 'Zwischenspeicher', 'Dateien sind ersetzt'],

tests/CmsTest.php

@@ -1687,15 +1687,16 @@ final class CmsTest extends TestCase
         $html = $this->request('/')->getContent();
         self::assertStringContainsString('<span class="post-view" aria-hidden="true">Ansehen</span>', $html);
 
-        // Die Bewegung steht vollständig hinter der Bewegungsschranke, der Hinweis selbst nicht:
-        // wer weniger Bewegung eingestellt hat, sieht ihn trotzdem.
+        // Die Bewegung spielt für alle; beachtet die Website die Browservorgabe, nimmt ein
+        // Überschreibblock hinter der Bewegungsschranke nur die Fahrt weg, der Hinweis bleibt.
         $effects = (string) file_get_contents(__DIR__.'/../public/assets/enhancements.css');
-        // Der erste Abschnitt steht vor der ersten Schranke; alles dahinter ist geschützt.
-        $guarded = explode('@media (prefers-reduced-motion: no-preference) {', $effects);
-        $geschuetzt = implode('', array_slice($guarded, 1));
-        self::assertStringContainsString('.post-card:hover, .post-card:focus-within {', $geschuetzt);
-        self::assertStringContainsString('transform: scale(1.06)', $geschuetzt);
-        self::assertStringNotContainsString('transform: translateY(-8px)', $guarded[0], 'Keine Bewegung außerhalb der Schranke.');
+        self::assertStringContainsString('.post-card:hover, .post-card:focus-within {', $effects);
+        self::assertStringContainsString('transform: scale(1.06)', $effects);
+        $schranke = explode('@media (prefers-reduced-motion: reduce) {', $effects);
+        self::assertCount(2, $schranke, 'Genau ein Überschreibblock für „Bewegung reduzieren“.');
+        self::assertStringContainsString('html.motion-respect', $schranke[1]);
+        self::assertStringContainsString('transform: none', $schranke[1]);
+        self::assertStringNotContainsString('html.motion-respect', $schranke[0], 'Ohne Schranke gilt die Klasse nicht.');
 
         // Und über die Tastatur erreichbar: der Zustand hängt auch an :focus-within.
         $site = (string) file_get_contents(__DIR__.'/../public/assets/site.css');
@@ -1886,6 +1887,29 @@ final class CmsTest extends TestCase
         self::assertStringContainsString('Bewertung: 5 von 5', $html);
     }
 
+    /**
+     * Jedes erlaubte Symbol braucht eine Zeichnung, und die Symbolfarbe muss am SVG ankommen.
+     *
+     * Ohne den ersten Teil rendert ein Name aus der Liste ein leeres `<path d="">`: unsichtbar,
+     * ohne Fehler, erst auf der fertigen Seite bemerkbar. Der zweite Teil sichert die Regel, die
+     * das eingebettete SVG die Farbe seiner Hülle erben lässt - es trägt dieselbe Klasse und
+     * setzte sonst die Akzentfarbe erneut.
+     */
+    public function testEveryAllowedIconHasADrawingAndTakesItsColourFromTheBlock(): void
+    {
+        $template = (string) file_get_contents(__DIR__.'/../templates/blocks/icon.html.twig');
+        foreach (DocumentValidator::ICONS as $icon) {
+            self::assertMatchesRegularExpression(
+                '/
+\s{4}'.preg_quote($icon, '/').": '[^']{4,}',?
+/",
+                $template,
+                sprintf('Das Symbol „%s“ steht in der Liste, hat aber keine Zeichnung.', $icon),
+            );
+        }
+        self::assertStringContainsString('.block-icon .block-icon{color:inherit}', (string) file_get_contents(__DIR__.'/../public/assets/site.css'));
+    }
+
     /**
      * @return iterable<string, array{array}>
      */
@@ -2231,6 +2255,45 @@ final class CmsTest extends TestCase
         self::assertStringContainsString('@media (max-width:767px){#start-hero{font-size:28px', $html);
     }
 
+    public function testAHeaderCanChangeItsColoursOnceThePageHasScrolled(): void
+    {
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', self::styledDocument(), 0), 1);
+        $header = $this->partials->findByKind('header');
+        $document = $header['document'];
+        // Glass over the hero, solid once the reader has moved: the Flatsome transparent header.
+        $document['blocks'][0]['style'] = ['desktop' => ['backgroundColor' => '#ffffff00', 'scrolled' => ['backgroundColor' => '#ffffff', 'color' => '#123456']]];
+        $this->partials->save($header['id'], $document, (int) $header['version']);
+
+        $response = $this->request('/');
+        $html = $response->getContent();
+        self::assertStringContainsString('#area-header{background-color:#ffffff00}', $html);
+        self::assertStringContainsString('#area-header{transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s,opacity .3s}html.is-scrolled #area-header{background-color:#ffffff;color:#123456}', $html);
+        // The small script that marks the scrolled page comes only with such a header, and the
+        // policy opens for it exactly then.
+        self::assertStringContainsString('/assets/scrolled.js?v=', $html);
+        self::assertStringContainsString("script-src 'self'", (string) $response->headers->get('Content-Security-Policy'));
+
+        // Nur Farben, Schatten und Deckkraft dürfen sich beim Scrollen ändern; eine wachsende
+        // Schrift würde die Seite unter dem Finger verschieben.
+        $document['blocks'][0]['style']['desktop']['scrolled'] = ['fontSize' => '40px'];
+        $this->expectException(InvalidDocument::class);
+        $this->partials->save($header['id'], $document, (int) $header['version'] + 1);
+    }
+
+    public function testSliderControlsTakeTheirColoursFromTheSliderStyle(): void
+    {
+        $document = self::styledDocument();
+        $document['schemaVersion'] = 22;
+        $document['blocks'][0]['children'][] = ['id' => 'hero-slider', 'type' => 'slider', 'props' => ['autoplay' => 0, 'dots' => true, 'snap' => true, 'desktopVisible' => 1, 'tabletVisible' => 1, 'mobileVisible' => 1], 'style' => ['desktop' => ['sliderDotColor' => '#ffffff', 'sliderControlColor' => '@mint', 'sliderControlBackground' => '#00000066']], 'children' => [
+            ['id' => 'slide-1', 'type' => 'column', 'children' => [['id' => 'slide-1-text', 'type' => 'text', 'props' => ['text' => 'Eins']]]],
+            ['id' => 'slide-2', 'type' => 'column', 'children' => [['id' => 'slide-2-text', 'type' => 'text', 'props' => ['text' => 'Zwei']]]],
+        ]];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+        $html = $this->request('/')->getContent();
+        // On the slider for the script-free markers, on the control bar the script adds after it.
+        self::assertStringContainsString('#hero-slider,#hero-slider + .slider-controls{--slider-dot:#ffffff;--slider-ink:var(--k-mint);--slider-bg:#00000066}', $html);
+    }
+
     public function testInlineStylesheetIsAllowedByItsOwnHashAndNothingElse(): void
     {
         $this->pages->publish('page-1', $this->pages->saveDraft('page-1', self::styledDocument(), 0), 1);
@@ -3302,6 +3365,61 @@ final class CmsTest extends TestCase
         self::assertStringContainsString("script-src 'none'", (string) $this->request('/')->headers->get('Content-Security-Policy'));
     }
 
+    /** @return iterable<string, array{string, list<string>, list<string>}> */
+    public static function burgerLabels(): iterable
+    {
+        yield 'symbol and text' => ['both', ['<span class="burger-lines"', '<span class="burger-text">Menü'], []];
+        yield 'only text' => ['text', ['<span class="burger-text">Menü'], ['burger-lines']];
+        yield 'only the symbol, the name stays for screen readers' => ['icon', ['<span class="burger-lines"', '<span class="burger-text visually-hidden">Menü'], []];
+    }
+
+    /**
+     * @param list<string> $enthalten
+     * @param list<string> $fehlen
+     */
+    #[DataProvider('burgerLabels')]
+    public function testTheMenuButtonCanBeSymbolTextOrBoth(string $variante, array $enthalten, array $fehlen): void
+    {
+        $document = DemoContent::starter('Mit Menü');
+        $document['schemaVersion'] = 16;
+        $document['blocks'][0]['children'][] = ['id' => 'nav', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'burger', 'burgerLabel' => $variante]];
+        $this->menus->save('header', 'Hauptnavigation', [['label' => 'Start', 'type' => 'page', 'level' => 1, 'pageId' => 'page-1', 'position' => 10]], 0);
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+        // Nur der eigene Knopf, nicht der des Kopfbereichs aus der Startvorlage.
+        $crawler = new \Symfony\Component\DomCrawler\Crawler($this->request('/')->getContent());
+        $summary = $crawler->filter('#nav > details.menu-burger > summary')->html();
+        foreach ($enthalten as $teil) {
+            self::assertStringContainsString($teil, $summary);
+        }
+        foreach ($fehlen as $teil) {
+            self::assertStringNotContainsString($teil, $summary);
+        }
+    }
+
+    public function testAnInventedMenuButtonVariantIsRefused(): void
+    {
+        $document = DemoContent::starter('Erfunden');
+        $document['schemaVersion'] = 16;
+        $document['blocks'][0]['children'][] = ['id' => 'nav', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'burger', 'burgerLabel' => 'gross']];
+        $this->expectException(InvalidDocument::class);
+        $this->pages->saveDraft('page-1', $document, 0);
+    }
+
+    /** Die Farben des Menü-Knopfs liegen am Block und müssen am summary ankommen. */
+    public function testTheMenuButtonTakesItsOwnColours(): void
+    {
+        $document = DemoContent::starter('Farbiger Knopf');
+        $document['schemaVersion'] = 16;
+        $document['blocks'][0]['children'][] = [
+            'id' => 'nav', 'type' => 'menu', 'props' => ['slot' => 'header', 'layout' => 'burger'],
+            'style' => ['desktop' => ['burgerColor' => '#294655', 'burgerBackgroundColor' => '#ffffff', 'burgerBorderColor' => '#d8e0d1', 'burgerBorderRadius' => '3px', 'burgerFontSize' => '14px']],
+        ];
+        $this->menus->save('header', 'Hauptnavigation', [['label' => 'Start', 'type' => 'page', 'level' => 1, 'pageId' => 'page-1', 'position' => 10]], 0);
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+        $html = $this->request('/')->getContent();
+        self::assertStringContainsString('#nav .menu-burger>summary{color:#294655;background-color:#ffffff;border-color:#d8e0d1;border-radius:3px;font-size:14px}', $html);
+    }
+
     public function testAMenuLayoutNeedsSchemaSixteen(): void
     {
         $document = DemoContent::starter('Zu alt');
@@ -3528,6 +3646,64 @@ final class CmsTest extends TestCase
         yield 'slider missing a device' => ['slider', ['desktopVisible' => 3, 'tabletVisible' => 2, 'snap' => true]];
     }
 
+    public function testSocialProfilesAreMaintainedOnceAndShownWhereverTheBlockStands(): void
+    {
+        $this->site->save(['country' => 'DE', 'homePath' => 'home', 'sameAs' => 'https://kant-it.de', 'social' => [
+            'instagram' => 'https://www.instagram.com/elektrobernhardgmbh/', 'facebook' => 'https://www.facebook.com/elektrobernhardgmbh',
+            'x' => '',
+        ]]);
+        self::assertSame(['facebook' => 'https://www.facebook.com/elektrobernhardgmbh', 'instagram' => 'https://www.instagram.com/elektrobernhardgmbh/'], $this->site->load()['social']);
+
+        $document = DemoContent::starter('Mit Profilen');
+        $document['schemaVersion'] = 23;
+        $document['blocks'][] = ['id' => 'so1', 'type' => 'social', 'props' => ['size' => 32, 'shape' => 'circle', 'layout' => 'horizontal', 'labels' => false, 'networks' => []]];
+        $document['blocks'][] = ['id' => 'so2', 'type' => 'social', 'props' => ['size' => 20, 'shape' => 'plain', 'layout' => 'vertical', 'labels' => true, 'networks' => ['instagram'], 'newTab' => false]];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+        $html = $this->request('/')->getContent();
+        // Die Reihenfolge ist die der festen Liste, nicht die der Eingabe; jeder Link trägt seinen Namen.
+        self::assertMatchesRegularExpression('#<ul id="so1" class="block-social social-horizontal social-shape-circle social-size-32"[^>]*>.*facebook\.com.*instagram\.com.*</ul>#s', $html);
+        self::assertStringContainsString('<span class="visually-hidden">Facebook</span>', $html);
+        self::assertStringContainsString('href="https://www.facebook.com/elektrobernhardgmbh" target="_blank" rel="noopener"', $html);
+        // Der zweite Block zeigt nur Instagram, beschriftet, im selben Tab.
+        preg_match('#<ul id="so2"[^>]*>(.*?)</ul>#s', $html, $second);
+        self::assertStringNotContainsString('facebook', $second[1]);
+        self::assertStringContainsString('<span>Instagram</span>', $second[1]);
+        self::assertStringNotContainsString('target="_blank"', $second[1]);
+        self::assertStringContainsString('social-labels', $html);
+        // Und die Profile stehen ohne zweite Pflege in den strukturierten Daten.
+        $this->site->save(['country' => 'DE', 'homePath' => 'home', 'legalName' => 'Elektro Bernhard GmbH', 'sameAs' => 'https://kant-it.de', 'social' => ['facebook' => 'https://www.facebook.com/elektrobernhardgmbh']]);
+        preg_match('#<script type="application/ld\+json">(.*?)</script>#s', $this->request('/')->getContent(), $match);
+        self::assertSame(['https://kant-it.de', 'https://www.facebook.com/elektrobernhardgmbh'], json_decode(html_entity_decode($match[1], ENT_QUOTES), true)['sameAs']);
+        // Ohne Profile bleibt die Seite still: kein leerer Baustein, keine Liste.
+        $this->site->save(['country' => 'DE', 'homePath' => 'home']);
+        self::assertStringNotContainsString('block-social', $this->request('/')->getContent());
+    }
+
+    /** @return iterable<string, array{array<string, mixed>}> */
+    public static function refusedSocialBlocks(): iterable
+    {
+        yield 'size off the list' => [['size' => 30, 'shape' => 'plain', 'layout' => 'horizontal', 'labels' => false, 'networks' => []]];
+        yield 'unknown shape' => [['size' => 24, 'shape' => 'hexagon', 'layout' => 'horizontal', 'labels' => false, 'networks' => []]];
+        yield 'unknown network' => [['size' => 24, 'shape' => 'plain', 'layout' => 'horizontal', 'labels' => false, 'networks' => ['myspace']]];
+        yield 'labels as text' => [['size' => 24, 'shape' => 'plain', 'layout' => 'horizontal', 'labels' => 'ja', 'networks' => []]];
+    }
+
+    #[DataProvider('refusedSocialBlocks')]
+    public function testASocialBlockOnlyStoresWhatTheRendererKnows(array $props): void
+    {
+        $document = DemoContent::starter('Profile');
+        $document['schemaVersion'] = 23;
+        $document['blocks'][] = ['id' => 'so1', 'type' => 'social', 'props' => $props];
+        $this->expectException(InvalidDocument::class);
+        $this->pages->saveDraft('page-1', $document, 0);
+    }
+
+    public function testASocialProfileMustBeAnHttpsAddress(): void
+    {
+        $this->expectException(InvalidPage::class);
+        $this->site->save(['country' => 'DE', 'homePath' => 'home', 'social' => ['facebook' => 'http://facebook.com/x']]);
+    }
+
     #[DataProvider('refusedNewBlocks')]
     public function testRefusedNewBlocksNeverReachADocument(string $type, array $props): void
     {

tests/EditorSecurityTest.php

@@ -287,7 +287,7 @@ final class EditorSecurityTest extends WebTestCase
         // The blank row is an add slot, not an entry.
         self::assertCount(2, $items);
 
-        $public = $client->request('GET', '/')->filter('nav[aria-label="Hauptnavigation"] a');
+        $public = $client->request('GET', '/')->filter('nav[aria-label="Hauptnavigation"] > .menu-list a');
         // The navigation comes from the menu now, not from the links hard-coded in the template.
         self::assertSame(['/', '/#kontakt', 'https://hausklar.app'], $public->extract(['href']));
     }
@@ -367,6 +367,7 @@ final class EditorSecurityTest extends WebTestCase
 
         $html = $client->request('GET', '/')->html();
         self::assertStringContainsString('action="/formular/kontakt"', $html);
+        self::assertStringContainsString('<button class="button cms-button" type="submit">Absenden</button>', $html);
         self::assertStringContainsString('Ich willige ein.', $html);
         // The honeypot exists but is kept out of the tab order and away from assistive technology.
         self::assertStringContainsString('name="website"', $html);

tests/KernelCacheTest.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Tests;
+
+use App\Kernel;
+use PHPUnit\Framework\TestCase;
+
+final class KernelCacheTest extends TestCase
+{
+    public function testAnUpdateKeepsTheRunningCacheAndSelectsANewOneForTheNextRequest(): void
+    {
+        $root = sys_get_temp_dir().'/kant-cache-'.bin2hex(random_bytes(6));
+        mkdir($root);
+        $kernel = static fn (): Kernel => new class($root) extends Kernel {
+            public function __construct(private string $root)
+            {
+                parent::__construct('prod', false);
+            }
+
+            public function getProjectDir(): string
+            {
+                return $this->root;
+            }
+        };
+        try {
+            file_put_contents($root.'/VERSION', "1.10.1\n");
+            $running = $kernel();
+            $old = $running->getCacheDir();
+            self::assertSame($old, $kernel()->getCacheDir());
+            file_put_contents($root.'/VERSION', "1.10.2\n");
+            self::assertSame($old, $running->getCacheDir(), 'The active request retains its cache even after VERSION changes.');
+            self::assertNotSame($old, $kernel()->getCacheDir(), 'A new kernel must not reuse the previous compiled container or Twig templates.');
+        } finally {
+            unlink($root.'/VERSION');
+            rmdir($root);
+        }
+    }
+}