Let a form send from its own address in 1.15.1

Umut asked where a contact form's mail is sent from: it was the recipient
address, `From` equal to `To`. That breaks as soon as the recipient is a
mailbox at another provider, because most hosts only deliver mail that
claims an address of their own domain, and the provider's SPF/DMARC then
treats it as forged.

Each form now has an optional `sender` setting, validated like the
recipient; empty keeps the old behaviour, so stored forms need no
migration. Delivery uses `sender ?: recipient`; the reply-to field is
untouched. The administration shows the field under the recipient with a
note on why it matters. The pilot launch config moves to port 8091 because
8087 was held by another session.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

.claude/launch.json

@@ -25,9 +25,9 @@
       "runtimeArgs": [
         "-NoProfile",
         "-Command",
-        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/browser-tests/pilot-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"
+        "$env:APP_ENV='dev'; $env:DATABASE_URL='sqlite:///C:/Django Project/KantSites/var/browser-tests/pilot-1d19ca1bb9ca/pilot.db'; $env:MEDIA_DIRECTORY='C:/Django Project/KantSites/var/kantit-media'; & C:/php84/php.exe -d upload_max_filesize=8M -d post_max_size=10M -d memory_limit=256M -S 127.0.0.1:8091 -t public bin/dev-router.php"
       ],
-      "port": 8087
+      "port": 8091
     },
     {
       "name": "elektro-bernhard",

README.md

@@ -4,6 +4,20 @@ 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`.
 
+## Eigene Absenderadresse je Formular (ab 1.15.1)
+
+Unter **Formulare → Zustellung** gibt es neben dem Empfänger ein Feld **Absender**. Bisher ging jede Nachricht von der Empfängeradresse an sich selbst; das scheitert, sobald der Empfänger ein Postfach bei einem anderen Anbieter ist, weil viele Hoster nur zustellen, was von einer Adresse der eigenen Domain kommt. Leer heißt weiterhin: Absender ist der Empfänger. Die Antwortadresse aus dem Formularfeld bleibt davon unberührt.
+
+## Formulare, Statistik, Design und Seitenleiste überarbeitet (ab 1.15.0)
+
+**Formulare** sind ein Editor: jedes Feld eine Karte mit Nummer, Beschriftung, Typ, technischem Namen, Hilfetext und Pflicht-Schalter, dazu „Feld hinzufügen“ und ein Entfernen-Knopf je Karte. Der technische Name folgt der Beschriftung, bis du ihn selbst schreibst. Unter **Aussehen** bekommt jedes Formular eine Buttonbeschriftung sowie Rahmen- und Hintergrundfarbe der Felder, Button- und Buttonschriftfarbe – aus der Palette oder als eigener Wert, leer heißt „wie die Website“. Die Vorschau daneben folgt jeder Eingabe, zeichnet den Absendeknopf mit dem Standardbutton des Designs und nennt den Kontrast der Buttonschrift.
+
+**Die Statistik** beginnt mit Kennzahlen: Aufrufe mit Vergleich zum gleich langen Zeitraum davor, Schnitt je Tag, stärkster Tag, aufgerufene Seiten, Aufrufe über Verweise, nicht gefundene Adressen. Der Verlauf hat Rasterlinien, jeder Balken nennt beim Überfahren Tag und Zahl, der stärkste Tag ist hervorgehoben; neu ist ein Wochentagsdiagramm im Schnitt. Die Ranglisten tragen Rang und Anteilsbalken.
+
+**Im Design** ist die Palette eine Reihe von Farbkarten, deren Fläche der Farbwähler selbst ist. Sieben fertige Paletten (Wald, Ozean, Sand, Koralle, Schiefer, Olive, Nacht) lassen sich per Klick übernehmen; eigene Farben bleiben stehen. Text-, Seiten- und Linkfarbe wählst du aus der Palette oder trägst einen eigenen Wert ein. Jede Schrift zeigt eine Probe in sich selbst, die Schnitte sind Chips, und eine Typografie-Vorschau zeigt Schrift, Größe, Zeilenhöhe, Skala, Farben und Unterstreichung live.
+
+**Die Seitenleiste** endet in einer Kontokarte mit Avatar, Name, Rolle und Abmeldesymbol, darunter die Fassung mit dem Update-Hinweis. Auf Tablets bleiben Konto und Abmelden rechts im Bild, nur die Liste wischt.
+
 ## Fußzeile des Einwilligungshinweises (ab 1.14.2)
 
 „Einzeln wählen“ steht links, Datenschutz und Impressum rechts auf einer Linie; aufgeklappt nimmt die Einzelwahl die volle Breite, die Links rutschen rechtsbündig darunter.

VERSION

@@ -1 +1 @@
-1.14.2
+1.15.1

docs/ARCHITECTURE.md

@@ -414,7 +414,7 @@ Ein neuer Tab-Block bringt zwei Tabs mit: ein einzelner Tab ist keine Tabgruppe,
 
 ## ADR 017 – Formulare (Dokumentschema v8, 12.09.2026)
 
-Migration `20260912000700` legt `form` und `form_submission` an. **Ein Formularblock im Seiteninhalt enthält nur die Adresse des Formulars.** Felder, Empfänger, Betreff, Antwortadresse und Einwilligungstext liegen in der Datenbank. Ein gespeichertes Dokument kann dadurch weder ändern, wonach gefragt wird, noch wohin eine Anfrage geht – dieselbe Trennung wie beim Block `postlist`.
+Migration `20260912000700` legt `form` und `form_submission` an. **Ein Formularblock im Seiteninhalt enthält nur die Adresse des Formulars.** Felder, Empfänger, Absender (seit 1.15.1 wählbar, leer heißt Empfänger – manche Hoster stellen nur zu, was von einer Adresse der eigenen Domain kommt), Betreff, Antwortadresse und Einwilligungstext liegen in der Datenbank. Ein gespeichertes Dokument kann dadurch weder ändern, wonach gefragt wird, noch wohin eine Anfrage geht – dieselbe Trennung wie beim Block `postlist`.
 
 **Kein CSRF-Token und keine Sitzung auf dem öffentlichen Weg.** Symfonys CSRF-Schutz braucht eine Sitzung, und eine Sitzung bedeutet ein Cookie auf jeder öffentlichen Seite; das vermeidet das Projekt bewusst. Die Route ist anonym und ändert nichts, was einem Besucher gehört: eine gefälschte Anfrage könnte höchstens eine Nachricht senden, und genau dagegen wirkt der Spamschutz. Die Verwaltung der Formulardefinitionen bleibt dagegen sitzungsgebunden und CSRF-geschützt.
 

docs/STATUS.md

@@ -1,5 +1,53 @@
 # Projektstatus
 
+## 1.15.1 – Eigene Absenderadresse je Formular (15.09.2026)
+
+**Anlass:** Umut: „Versandadresse bei Kontaktformularen sollte man noch festlegen können – aktuell wird's über die gleiche Adresse verschickt wie der Empfänger?" Stimmte: `FormController::deliver()` setzte `From` auf die Empfängeradresse. Das geht schief, sobald der Empfänger ein Postfach bei einem anderen Anbieter ist (z. B. eine GMX- oder Gmail-Adresse), weil viele Hoster nur zustellen, was von einer Adresse der eigenen Domain kommt, und SPF/DMARC des fremden Anbieters die Post als Fälschung abweisen.
+
+**Umsetzung:** Neue Formulareinstellung `sender` (freiwillig). `FormRepository::validateSettings()` prüft sie wie den Empfänger mit `FILTER_VALIDATE_EMAIL`, leer bleibt erlaubt; die Verwaltung (`forms.html.twig`, Abschnitt Zustellung, Feld „Absender“ direkt unter dem Empfänger mit Hinweis) und `FormAdminController` reichen sie durch. Beim Versand gilt `sender ?: recipient` – bestehende Formulare ohne den Schlüssel verhalten sich wie bisher, es ist keine Migration nötig. Die Antwortadresse aus dem Formularfeld bleibt `Reply-To`.
+
+**Geprüft:** `phpunit` vollständig mit PHP 8.4 509 von 509 grün, mit PHP 8.2 509 grün mit der vorbestehenden Warnung in `UpdaterTest`; `npm test` 33 grün; `npm run test:editor` mit `PHP_BINARY=C:/php84/php.exe` vollständig bestanden, darin die axe-Prüfung der Formularseite. Neu in `EditorSecurityTest`: `testAFormMaySendFromItsOwnAddress` (From = Absender, To = Empfänger, Reply-To = Feld; ungültiger Absender abgewiesen, Leerzeichen werden zu leer) und im bestehenden Absendetest die Prüfung, dass ohne Absender From = To ist – beides über `getMailerMessage()` mit dem `null://`-Transport der Tests. php-cs-fixer ohne Befund. In der Pilotkopie im Browser (`kantsites-pilot`, jetzt Port 8091, weil 8087 von einer anderen Sitzung belegt war): Feld sichtbar, `formular@kant-it.de` gespeichert und nach dem Neuladen erhalten, Meldung „Das Formular wurde gespeichert.“ Ein echter Versand über SMTP wurde nicht geprüft.
+
+**Nächster Schritt:** Auf `web.kant-it.de` nach dem nächsten Update unter Formulare eine Absenderadresse der eigenen Domain eintragen (z. B. `formular@kant-it.de`), dann eine Testanfrage senden und im Postfach Absender und Zustellung kontrollieren.
+
+## 1.15.0 veröffentlicht (15.09.2026)
+
+Tag `v1.15.0` (Commit `160c394`), Release: https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.15.0 – Formulare, Statistik, Design und Seitenleiste der Verwaltung überarbeitet, Formulare mit eigenen Farben und Vorschau.
+
+**Gebaut aus einem sauberen Checkout des Tags** (`git worktree add var/release-source-1.15.0 v1.15.0`, `php scripts/build-release.php` darin): 227 Quelldateien, `vendor/` ohne Entwicklungspakete, 3549 Dateien im Archiv.
+
+**Anhänge:** `kantsites-1.15.0.zip` (4,7 MB, SHA-256 `86ef728812db3b2f565f07dd1d8aebf8d5d41b75875695544134684b77a193ed`), `.sha256`, `install.php` mit eingetragener Prüfsumme; hochgeladen mit `var/publish-release-1.15.0.py`, erst Entwurf, dann veröffentlicht.
+
+**Geprüft:** HTTP-Archiv-Update 1.14.2 → 1.15.0 `ok` (Update 302, System 200, Abschluss 302, öffentliche Seite 200; `scripts/archive-update-check.mjs`, aus dem Hauptrepository heraus, weil der saubere Checkout weder `vendor/` noch `var/kantit.db` hat); nach der Veröffentlichung ohne Anmeldung alle drei Anhänge bytegleich, `latest` = `v1.15.0`, Installeradresse 200. Die Prüfungen des Codes selbst stehen im Eintrag darunter.
+
+**Nächster Schritt:** Update auf `web.kant-it.de` über System → Update aus dem Archiv (keine Migration), dann unter Formulare das Aussehen des Kontaktformulars wählen.
+
+## 1.15.0 – Formulare, Statistik, Design und Seitenleiste überarbeitet (15.09.2026)
+
+**Anlass:** Umut fand die Formularanlage unschön und wollte Felder löschen können, die Statistik „lieblos“, auf der Designseite vordefinierte Farben, eigene Farben für Link- und Seitenfarbe und eine Vorschau der Schriften, und den Fuß der Seitenleiste (Fassung, Benutzer, Abmelden) besser. Nachgeschoben: eine Vorschau des Kontaktformulars, in der Rahmen-, Hintergrund- und Buttonfarbe direkt gewählt werden.
+
+**Formulare (`forms.html.twig`, neu `form-editor.js`).** Jedes Feld ist eine Karte mit Nummer, Beschriftung, Typ, technischem Name, Hilfetext, Pflicht-Schalter und einem Entfernen-Knopf; „Feld hinzufügen“ klont eine `<template>`-Karte. Der technische Name folgt der Beschriftung (`Größe der Fläche` → `groesse_der_flaeche`), bis jemand ihn selbst schreibt; Optionen erscheinen nur bei einer Auswahl; eine Einwilligung ist sichtbar immer Pflicht. Ohne Skript bleibt alles bedienbar: eine Karte ohne Beschriftung wird nicht gespeichert. Neu ist der Abschnitt **Aussehen**: Buttonbeschriftung, Rahmen und Hintergrund der Felder, Button- und Buttonschriftfarbe, jeweils aus der Palette oder als eigener Wert (`FormRepository::COLORS`, geprüft mit `StyleSchema::COLOR`). Daneben eine **Vorschau**, die jeder Eingabe folgt und den Absendeknopf mit dem Standardbutton der Website zeichnet (`buttonSample`). Auf der Website schreibt `FormRepository::css()` je Formular eine Regel `.block-form[data-form="…"]{…}` in den gehashten Stylesblock (`PageController::renderPage`); Felder lesen `--form-border`/`--form-bg` (`site.css`), der Button bekommt `--kb-fill`/`--kb-ink` **und** die Darstellungsvariablen neu – am Wurzelelement wären sie schon mit den alten Werten aufgelöst. Das „Neues Formular“ ist ein zugeklapptes Karten-Details am Ende.
+
+**Statistik (`statistics.html.twig`, `Statistics::overview()`).** Sechs Kennzahlkacheln: Aufrufe mit Vergleich zum gleich langen Zeitraum davor (`previousTotal`), Schnitt je Tag, stärkster Tag mit Datum und Wochentag (`busiestDay`), aufgerufene Seiten (`pageCount`), Aufrufe über Verweise (`referred`) und nicht gefundene Adressen (`missingTotal`). Der Verlauf hat Rasterlinien, jeder Balken einen `<title>` mit Tag und Zahl, der stärkste Tag ist hervorgehoben; dazu ein neues Wochentagsdiagramm im Schnitt (`weekdays`). Die Ranglisten tragen Rang und einen Anteilsbalken (SVG-Breite, kein Inline-Stil). Der Zeitraum ist eine Leiste mit gedrücktem Knopf in der Kopfzeile; „Was diese Zahlen nicht sagen“ ist zugeklappt.
+
+**Design (`theme.html.twig`, neu `theme-panel.js`).** Die Palette sind Farbkarten, deren Fläche der Farbwähler selbst ist, mit Hexwert, Name, Schlüssel und Entfernen. Sieben fertige Paletten (`Theme::PALETTES`: Wald, Ozean, Sand, Koralle, Schiefer, Olive, Nacht; die Linkfarbe erreicht auf dem Papierton mindestens 4,5:1) ersetzen die fünf Grundschlüssel und lassen eigene Farben stehen. Schriften sind Karten mit einer Probe in der Schrift selbst (lokale `fonts.css` wird geladen, wenn vorhanden – `FontLibrary::hasStylesheet()`), Schnitte als Chips, die Auswahlen für Fließtext/Überschriften/Button folgen neuen Schriften. Text-, Seiten- und Linkfarbe nutzen das Palettenbedienelement des Editors (`createColorControl`), das bei jeder Palettenänderung neu aufgebaut wird; daneben eine Typografie-Vorschau mit Überschriftenskala, Zeilenhöhe, Farben und Unterstreichung.
+
+**Seitenleiste (`shell.html.twig`).** Unten eine Kontokarte: Avatar, Name, Rolle (Administrator/Veröffentlicher/Redakteur), rechts ein Abmeldesymbol mit Beschriftung für Vorlesesoftware; darunter „KantSites 1.14.2“ mit dem Update-Hinweis in einer Zeile. Neue Symbole `logout`, `plus`, `remove`. Auf Tablets wischt nur noch die Liste, Konto und Abmelden bleiben rechts im Bild; dafür braucht die Rasterspalte `minmax(0, 1fr)`, sonst schob die Leiste die Seite über den Rand.
+
+Die Formularvorschau nennt den Kontrast der Buttonschrift auf der Buttonfarbe (WCAG-Formel, grün ab 4,5:1, gelb ab 3:1, sonst rot), damit eine unlesbare Wahl auffällt, bevor sie auf der Website steht. Die `pattern`-Attribute der Schlüsselfelder maskieren den Bindestrich (`[a-z][a-z0-9\-]*`): Chrome prüft `pattern` inzwischen mit dem `v`-Flag und lehnte das alte Muster mit einem Konsolenfehler ab – die Prüfung war damit wirkungslos.
+
+**Geprüft:** `phpunit` mit PHP 8.4 508 von 508 grün, mit PHP 8.2 508 grün mit einer vorbestehenden Warnung in `UpdaterTest` (Git-Umgebung); neu getestet: Formularfarben auf der Seite samt CSP-Hash, Ablehnung ungültiger Farben, Statistiksummen und Vorzeitraum, drei Diagramme mit Titeln. `npm run test:editor` vollständig bestanden – darin die axe-Prüfung von Formularen, Statistik und Design. `test:buttons` besteht den Designseiten-Teil (Vorlage wählen, speichern, Werte erhalten) und scheitert danach wie `test:navigation-ux` an einem Klick auf den Strukturbaum des Editors (`#structure [data-block-id=…]` „not visible“) – eine Stelle außerhalb dieser Änderung, nicht weiter untersucht. `test:admin` scheitert vor den Formularen an zwei vorbestehenden Befunden: dem Wiedergabeknopf des öffentlichen Sliders bei reduzierter Bewegung und `nested-interactive` in den Menü-Zusammenfassungen (Ziehgriff im `summary`). In der Pilotkopie im Browser: Feld hinzufügen/entfernen, Namensableitung, Farbwahl mit Vorschau und Kontrasthinweis, Speichern, Regel und Buttonfarbe auf der öffentlichen Startseite; Palette „Ozean“ übernehmen, Schrift hinzufügen, Linkfarbe wählen; Seitenleiste und Bildschirme auf 1440, 900 und 375 px. Codestil mit php-cs-fixer (verbleibende Abweichung in `tests/CmsTest.php` ist vorbestehend). Veröffentlicht als 1.15.0, siehe Eintrag oben.
+
+## 1.14.2 veröffentlicht (15.09.2026)
+
+Tag `v1.14.2` (Commit `0aa1ff6`), Release: https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.14.2 – Fußzeile des Einwilligungshinweises: Einzelwahl links, Rechtslinks rechts.
+
+**Gebaut aus einem sauberen Checkout des Tags** (`git worktree add var/release-source-1.14.2 v1.14.2`), nicht aus der Arbeitskopie: dort lagen zu diesem Zeitpunkt nicht committete Änderungen einer anderen Sitzung (`site.css`, `archive.html.twig`, `page.html.twig`, `tests/CmsTest.php`, neu `src/Twig/HeaderExtension.php`), und ein erster Build aus der Arbeitskopie hatte sie mitgenommen – der wurde verworfen. Das Archiv enthält keine vorgefertigten `assets/build/`-Bündel mehr (die Arbeitskopie hatte welche, sie entstehen beim ersten Aufruf); daher 3546 statt 3552 Dateien.
+
+**Anhänge:** `kantsites-1.14.2.zip` (4,7 MB, SHA-256 `236dff086267591a51198b55ddfbaf2ee999db8a081ec5bb1d28752260a3db3f`), `.sha256`, `install.php`; hochgeladen mit `var/publish-release-1.14.2.py`, erst Entwurf, dann veröffentlicht.
+
+**Geprüft:** PHP 506 Tests grün (ein erster Lauf zeigte einen Fehler, während die andere Sitzung `tests/CmsTest.php` bearbeitete; zwei weitere Läufe grün); HTTP-Archiv-Update 1.14.1 → 1.14.2 `ok`; nach der Veröffentlichung ohne Anmeldung alle drei Anhänge bytegleich, `latest` = `v1.14.2`, Installeradresse 200.
+
 ## 1.14.2 – Einwilligungshinweis: Fußzeile aufgeräumt (15.09.2026)
 
 **Anlass:** Umut fand „Einzeln wählen“ und die Rechtslinks unordentlich und schlug links/rechts vor.

public/assets/admin.css

@@ -147,31 +147,61 @@ label { display: block; margin: 18px 0 7px; font-size: 13px; font-weight: 600 }
 .nav-icon { width: 18px; height: 18px; color: var(--shell-muted); flex-shrink: 0 }
 .nav-out::after { content: '↗'; margin-left: auto; color: var(--shell-muted); font-size: 11px }
 
-.shell-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid #2a3d35; display: grid; gap: 6px }
-.shell-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12px }
-.shell-user strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+/* Der Fuss der Leiste: Kontokarte, Abmeldesymbol, Fassung. Eine Einheit statt dreier Zeilen. */
+.shell-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #2a3d35; display: grid; gap: 8px }
+.shell-account {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 5px;
+    border-radius: 13px;
+    background: #ffffff0b;
+    border: 1px solid #ffffff10;
+}
+.shell-user {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 5px 7px;
+    border-radius: 9px;
+    text-decoration: none;
+    color: var(--shell-ink);
+}
+.shell-user:hover, .shell-user[aria-current=page] { background: #ffffff12 }
+.shell-user[aria-current=page] .shell-avatar { box-shadow: 0 0 0 2px var(--mint) }
+.shell-user-text { display: grid; min-width: 0; line-height: 1.3 }
+.shell-user-text strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.shell-user-text span { font-size: 11px; color: var(--shell-muted) }
 .shell-avatar {
     display: grid;
     place-items: center;
-    width: 28px; height: 28px;
+    width: 32px; height: 32px;
     border-radius: 50%;
-    background: #2b4a3b;
-    color: var(--mint);
-    font-size: 12px;
+    background: var(--mint);
+    color: var(--shell);
+    font-size: 13px;
     font-weight: 700;
     flex-shrink: 0;
 }
 .shell-foot form { margin: 0 }
-.shell-foot button {
-    width: 100%;
-    justify-content: flex-start;
+.shell-logout {
+    display: grid;
+    place-items: center;
+    width: 38px; height: 38px;
+    padding: 0;
+    border: 0;
+    border-radius: 9px;
+    background: transparent;
     color: var(--shell-muted);
-    font-size: 12px;
-    font-weight: 500;
-    min-height: 34px;
-    padding: 6px 10px;
 }
-.shell-foot button:hover { background: #21362d; color: var(--shell-ink) }
+.shell-logout .nav-icon { color: inherit }
+.shell-logout:hover { background: #ffffff14; color: #fff }
+.shell-logout:focus-visible { outline-color: var(--mint); outline-offset: -2px }
+.shell-version { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0 8px 2px; font-size: 11px; color: var(--shell-muted) }
+.shell-version a { text-decoration: none }
+.shell-version > a:hover { color: var(--shell-ink); text-decoration: underline }
 
 .brand {
     display: inline-flex;
@@ -457,7 +487,7 @@ details.card > summary:hover { background: #fafbf8 }
 .table .check-cell input { width: 18px; min-height: 18px }
 .table-new input, .table-new select { background: #fafbf8 }
 .table form { margin: 0 }
-/* Column widths per screen: the two tables carry different things. */
+/* Column widths per screen: the menu table carries text, links and switches. */
 .menu-table td:first-child input { width: 82px }
 .menu-table td:nth-child(2) select { width: 148px }
 .menu-table td:nth-child(3) input { min-width: 170px }
@@ -465,15 +495,6 @@ details.card > summary:hover { background: #fafbf8 }
 .menu-table td:nth-child(5) select { min-width: 190px }
 .menu-table td:nth-child(6) input { width: 130px }
 .menu-table td:nth-child(7) input { min-width: 190px }
-.field-table td:first-child input { width: 140px }
-.field-table td:nth-child(2) select { width: 150px }
-.field-table td:nth-child(3) input { min-width: 170px }
-.field-table td:nth-child(5) input { min-width: 180px }
-.field-table td:nth-child(6) input { min-width: 170px }
-.theme-table td input { width: 190px }
-.theme-table td select { width: 150px }
-.theme-table td input[type=color] { width: 52px }
-.theme-table .weights-cell { white-space: nowrap }
 .redirect-table td { padding: 8px 12px 8px 0; font-size: 12px }
 /* Der Aufgabenplan: die erste Spalte traegt Text, die schmalen tragen Zahlen und Schalter. */
 .tasks-table td:first-child { min-width: 220px; max-width: 340px }
@@ -485,12 +506,12 @@ details.card > summary:hover { background: #fafbf8 }
 .card-body .section-head:first-child { margin-top: 14px }
 .card-body > .primary, .card-body > .secondary { margin-top: 24px }
 
-/* A screen made of several equal sections (menu slots, form definitions). */
+/* A screen made of several equal sections (menu slots). */
 .stack-section { display: grid; gap: 10px }
-.menu-form > label:first-of-type, .form-def > label:first-of-type { margin-top: 16px }
+.menu-form > label:first-of-type { margin-top: 16px }
 .menu-form > input[name=name] { max-width: 420px }
-.menu-form .table, .form-def .table { margin-top: 22px }
-.menu-form .primary, .form-def .primary { margin-top: 20px }
+.menu-form .table { margin-top: 22px }
+.menu-form .primary { margin-top: 20px }
 
 .empty {
     padding: 34px;
@@ -508,10 +529,6 @@ details.card > summary:hover { background: #fafbf8 }
 .contrast-ok { background: #edf3dc; color: #2c5340; border: 1px solid #c5d89a }
 .contrast-warn { background: #fff6e2; color: #6f4e18; border: 1px solid #e6cf9c }
 .contrast-bad { background: #fff0eb; color: var(--danger); border: 1px solid #e2b2a7 }
-.theme-form .theme-swatch { width: 52px; min-height: 38px; padding: 2px; cursor: pointer }
-.theme-form .weights-cell { white-space: nowrap }
-.theme-form .weights-cell label { display: inline-flex; align-items: center; gap: 4px; margin: 0 9px 0 0; font-size: 11px; font-weight: 400 }
-.theme-form .weights-cell input { width: 14px; min-height: 14px }
 
 /* ---- submissions ----------------------------------------------------------------------- */
 
@@ -547,25 +564,33 @@ details.card > summary:hover { background: #fafbf8 }
 /* ---- narrow screens: the sidebar becomes a strip above the content --------------------- */
 
 @media (max-width: 1000px) {
-    .admin-shell { grid-template-columns: 1fr }
+    /* minmax(0, 1fr), nicht 1fr: sonst nimmt die Spalte die Mindestbreite der Leiste an und
+       schiebt die ganze Seite ueber den rechten Rand hinaus. */
+    .admin-shell { grid-template-columns: minmax(0, 1fr) }
     .shell-nav {
         position: static;
         height: auto;
+        min-width: 0;
         flex-direction: row;
         align-items: center;
         flex-wrap: nowrap;
-        overflow-x: auto;
+        overflow: visible;
         gap: 6px;
         padding: 11px 14px;
     }
+    /* Nur die Liste wischt; Konto und Abmelden bleiben rechts im Bild. */
+    .shell-menu { flex: 1 1 auto; min-width: 0; overflow-x: auto }
+    .shell-foot { flex: none }
     .shell-nav .brand { margin: 0 10px 0 0; font-size: 0 }
     .shell-nav .brand-icon { margin: 0; font-size: 15px }
     .nav-label { display: none }
     .nav-list { display: flex; gap: 4px }
     .nav-item { white-space: nowrap; padding: 8px 12px }
-    .shell-foot { margin: 0 0 0 auto; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid #2a3d35; display: flex; align-items: center }
-    .shell-user strong { display: none }
-    .shell-foot button { width: auto }
+    .shell-foot { margin: 0 0 0 auto; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid #2a3d35; display: flex; align-items: center; gap: 10px }
+    .shell-account { padding: 3px; gap: 2px }
+    .shell-user { padding: 3px }
+    .shell-user-text { display: none }
+    .shell-version { padding: 0 }
     .shell-top { padding: 22px 20px 18px }
     .shell-body { padding: 20px 20px 48px }
 }
@@ -598,32 +623,61 @@ details.card > summary:hover { background: #fafbf8 }
 .field-set > legend { font-size: 12px; font-weight: 700; padding: 0 6px }
 .field-set .check-label { margin-top: 14px }
 
-/* ---- statistics: charts drawn by the server, styled by class ---------------------------- */
+/* ---- statistics: tiles, charts drawn by the server, ranked lists ------------------------ */
 
-.range-switch { display: flex; gap: 8px; flex-wrap: wrap }
-.range-switch a { font-size: 12px; padding: 8px 14px; min-height: 36px }
-.chart { display: block; width: 100%; height: 180px; overflow: visible }
+/* Der Zeitraum als eine Leiste mit einem gedrueckten Knopf, nicht vier lose Schaltflaechen. */
+.range-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper) }
+.range-switch a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 13px; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--muted) }
+.range-switch a:hover { color: var(--ink); background: #eef2ea }
+.range-switch a[aria-current=page] { background: var(--shell); color: #fff }
+/* Die Kennzahlen: eine grosse dunkle Kachel fuer die Summe, kleine helle fuer alles, was sie einordnet. */
+.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 12px }
+.stat-tile { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px }
+.stat-tile-main { grid-column: span 2; background: var(--shell); border-color: var(--shell); color: var(--shell-ink) }
+.stat-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted) }
+.stat-value { font-size: 28px; font-weight: 650; letter-spacing: -.8px; line-height: 1.1; font-variant-numeric: tabular-nums }
+.stat-note { font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere }
+.stat-tile-main .stat-label, .stat-tile-main .stat-note { color: var(--shell-muted) }
+.stat-tile-main .stat-value { font-size: 40px; color: #fff }
+.stat-tile-main .stat-up { color: #bfe3a5 }
+.stat-tile-main .stat-down { color: #f3b9a8 }
+.chart { display: block; width: 100%; height: 190px; overflow: visible }
+.chart-hours, .chart-weekdays { height: 150px }
 .chart-bar { fill: var(--accent) }
 .chart-bar:hover { fill: #1c4735 }
-.chart-axis { stroke: var(--line); stroke-width: 1 }
-.chart-legend { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 11px; color: var(--muted) }
+.chart-bar-peak { fill: var(--ring) }
+.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3 }
+.chart-axis { stroke: #c3cec7; stroke-width: 1 }
+.chart-legend { display: flex; justify-content: space-between; gap: 8px; margin: 8px 0 0; font-size: 11px; color: var(--muted) }
+.chart-legend-even span { flex: 1; text-align: center }
 .chart-table { margin-top: 18px }
 .chart-table > summary { cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 0 }
 .table-wrap { max-height: 320px; overflow: auto; margin-top: 10px }
 .stats-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px }
-.stats-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: rank }
+.stats-columns-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
+/* Rang, Name, Anteil am Spitzenwert als Balken, Zahl. */
+.stats-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px }
 .stats-list li {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 8px 0;
+    display: grid;
+    grid-template-columns: 22px minmax(0, 1fr) 72px auto;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 0;
     border-top: 1px solid #eef1ed;
     font-size: 13px;
 }
 .stats-list li:first-child { border-top: 0 }
-.stats-list span, .stats-list a { overflow-wrap: anywhere; min-width: 0 }
-.stats-list strong { font-variant-numeric: tabular-nums; white-space: nowrap }
+.stats-rank { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center }
+.stats-list span:not(.stats-rank), .stats-list a { overflow-wrap: anywhere; min-width: 0 }
+.stats-share { display: block; width: 100%; height: 6px; overflow: visible }
+.stats-share-bar { fill: var(--accent); opacity: .5 }
+.stats-list li:first-child .stats-share-bar { opacity: 1 }
+.stats-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right }
+@media (max-width: 620px) {
+    .stat-tile-main { grid-column: 1 / -1 }
+    .stats-list li { grid-template-columns: 22px minmax(0, 1fr) auto }
+    .stats-share { display: none }
+}
 
 /* ---- system: preflight, update steps, log ---------------------------------------------- */
 
@@ -647,7 +701,6 @@ details.card > summary:hover { background: #fafbf8 }
 .check-bad { color: var(--danger) }
 .log-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px }
 .log-list code { font-size: 11px; overflow-wrap: anywhere }
-.shell-version { margin: 0 0 4px; padding: 0 10px; font-size: 10px; color: var(--shell-muted) }
 
 /* ---- the installer: six screens on an otherwise empty server ---------------------------- */
 
@@ -743,9 +796,8 @@ details.card > summary:hover { background: #fafbf8 }
     .nav-list { display: grid; gap: 2px }
     /* Vierundvierzig Pixel: die Flaeche, die ein Daumen zuverlaessig trifft. */
     .nav-item { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; white-space: normal }
-    .shell-foot { margin-left: auto; border-left: 0; padding-left: 0; gap: 10px }
+    .shell-foot { margin-left: auto; border-left: 0; padding-left: 0 }
     .shell-version { display: none }
-    .shell-user strong { display: none }
 }
 
 /* Search and forms share usable widths throughout administration. */
@@ -768,14 +820,122 @@ details.card > summary:hover { background: #fafbf8 }
 @media(max-width:560px){.menu-add{grid-template-columns:1fr}.menu-entry.menu-child{margin-left:18px}.menu-entry-actions button{min-height:44px}.menu-slots a{flex:1;min-width:130px}}
 
 /* Field definitions stay editable on narrow screens instead of stretching the entire page. */
-.form-def{min-width:0}.field-table{table-layout:fixed;width:100%}.field-table input:not([type=checkbox]),.field-table select{width:100%;min-width:0;max-width:100%}
-@media(max-width:1100px){
-.field-table,.field-table tbody{display:block}.field-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
-.field-table tbody{display:grid;gap:16px}.field-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:16px;border:1px solid var(--line);border-radius:8px}
-.field-table td{display:block;border:0;padding:0;min-width:0}.field-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;margin-bottom:5px}.field-table .check-cell{text-align:left}
-}
-@media(max-width:560px){.field-table tr{grid-template-columns:minmax(0,1fr)}}
+.form-def{min-width:0;margin:0}
 
-.version-update{display:block;width:fit-content;margin-top:8px;padding:5px 8px;border:1px solid #679576;border-radius:6px;color:#17452c;background:#e8f4e8;font-size:11px;font-weight:700;text-decoration:none}
+.version-update{display:inline-block;padding:4px 8px;border:1px solid #679576;border-radius:6px;color:#17452c;background:#e8f4e8;font-size:11px;font-weight:700;text-decoration:none}
 
 .menu-entry summary::after{content:none}.menu-entry summary{list-style:none;gap:10px;padding:10px 14px}.menu-entry summary::-webkit-details-marker{display:none}.menu-drag-handle{display:grid;place-items:center;width:36px;min-width:36px;height:40px;padding:0;border:0;background:transparent;color:#576e60;cursor:grab;touch-action:none}.menu-drag-handle:active{cursor:grabbing}.menu-chevron{flex:none;color:#52665a;transition:transform .15s}.menu-entry details[open] .menu-chevron{transform:rotate(180deg)}.menu-entry-kind{font-size:11px;border:1px solid #dae4dc;border-radius:5px;padding:3px 6px;color:#506659;background:#f7f9f6;white-space:nowrap}.menu-entry-title{display:flex;align-items:center;gap:8px;min-width:0}.menu-entry-title svg{width:19px;height:19px;flex:none}.menu-dragging{opacity:.6;box-shadow:0 4px 16px #203b3426;border-color:#2c6b4f}.menu-icon-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}@media(max-width:560px){.menu-entry summary{padding:8px}.menu-entry-kind{display:none}.menu-icon-fields{grid-template-columns:1fr}}
+
+/* ---- the form editor: a card per field, the look, and a preview beside it -------------- */
+
+.form-screens { display: grid; gap: 20px }
+.form-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 20px 36px; padding-top: 2px }
+.form-editor-main { min-width: 0 }
+.form-part { margin: 26px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--muted) }
+.form-editor-main > .form-part:first-child, .form-editor-preview .form-part, .type-preview-column .form-part { margin-top: 14px }
+.form-fields-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px }
+.form-fields-head .form-part { margin: 0 }
+.card-body .form-fields-head .secondary, .card-body .list-actions .secondary { margin: 0; min-height: 36px; padding: 6px 12px; font-size: 12px }
+.form-fields-head .secondary .nav-icon, .list-actions .secondary .nav-icon { width: 15px; height: 15px; color: var(--accent) }
+.field-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px }
+.field-card { position: relative; padding: 2px 16px 16px; border: 1px solid var(--line); border-radius: 11px; background: #fafbf8 }
+.field-card-new { border-style: dashed; background: var(--paper) }
+.field-card-head { display: grid; grid-template-columns: 26px minmax(0, 1fr) 190px 38px; gap: 0 12px; align-items: end }
+.field-card-index { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; background: #e4ebe2; color: var(--accent); font-size: 12px; font-weight: 700 }
+.field-card label { margin-top: 12px }
+.field-card-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; padding-left: 38px }
+.field-card-body .field-help { margin-top: 5px }
+.field-card-flags { align-self: end; padding-bottom: 11px }
+.field-card-flags .check-label { margin: 12px 0 0 }
+.field-remove { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 2px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted) }
+.field-remove .nav-icon { width: 17px; height: 17px; color: inherit }
+.field-remove:hover { background: #fff0eb; border-color: #e2b2a7; color: var(--danger) }
+/* Die Vorschau bleibt beim Blaettern durch lange Feldlisten im Bild. */
+.form-editor-preview { min-width: 0; position: sticky; top: 16px; align-self: start }
+/* Die Vorschau uebernimmt Text- und Seitenfarbe der Website per Skript; die Felder lesen dieselben
+   Variablen wie auf der Website selbst. */
+.form-preview { display: grid; gap: 16px; margin-top: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.5 }
+.form-preview-field { display: grid; gap: 6px }
+.form-preview-label { font-weight: 600 }
+.form-preview-input { display: block; min-height: 40px; padding: 9px 12px; border: 1px solid var(--form-border, currentColor); border-radius: 8px; background: var(--form-bg, #fff); color: inherit }
+.form-preview-select { display: flex; align-items: center; justify-content: space-between }
+.form-preview-select::after { content: '⌄'; font-size: 16px; line-height: 1 }
+.form-preview-area { min-height: 92px }
+.form-preview-check { display: flex; align-items: flex-start; gap: 9px }
+.form-preview-box { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--form-border, currentColor); border-radius: 4px; background: var(--form-bg, #fff) }
+.form-preview-help { font-size: 12px }
+.form-preview-empty { margin: 0; font-size: 13px }
+.form-preview + .contrast-note { margin-top: 10px }
+.form-preview .cms-button { justify-self: start; pointer-events: none }
+.form-editor-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
+.form-editor-foot .muted { font-size: 12px }
+.form-look .color-control { margin-top: 0 }
+@media (max-width: 1100px) { .form-editor { grid-template-columns: 1fr } }
+@media (max-width: 700px) {
+    .field-card { padding-top: 8px }
+    .field-card-head { grid-template-columns: 26px minmax(0, 1fr) }
+    .field-card-title, .field-card-type { grid-column: 2 }
+    .field-card-head .field-remove { position: absolute; top: 8px; right: 8px }
+    .field-card-body { padding-left: 0 }
+}
+
+/* ---- design: palette cards, ready-made palettes, font cards, typography preview -------- */
+
+.theme-form > .card { margin: 0 }
+.palette-presets { margin-top: 14px }
+.palette-presets-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600 }
+.palette-preset-row { display: flex; flex-wrap: wrap; gap: 8px }
+.palette-preset { display: grid; gap: 6px; justify-items: center; padding: 8px 10px 7px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 600 }
+.palette-preset svg { display: block; width: 90px; height: 24px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px #203b3426 }
+.palette-preset:hover { border-color: var(--accent); background: #f5f8f1 }
+.palette-presets .field-help { margin-top: 10px }
+.swatch-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px }
+.swatch-card { position: relative; display: grid; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden }
+.swatch-card-new { border-style: dashed }
+/* Der Farbwaehler ist die Flaeche selbst: nichts liegt dazwischen. */
+.swatch-well { position: relative; display: grid; margin: 0; cursor: pointer }
+.swatch-input { display: block; width: 100%; height: 76px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer }
+.swatch-input::-webkit-color-swatch-wrapper { padding: 0 }
+.swatch-input::-webkit-color-swatch { border: 0; border-radius: 0 }
+.swatch-input::-moz-color-swatch { border: 0 }
+.swatch-hex { position: absolute; left: 10px; bottom: 8px; padding: 2px 7px; border-radius: 5px; background: #ffffffe6; color: var(--ink); font-size: 11px; box-shadow: 0 1px 2px #0000001f }
+.swatch-fields { display: grid; padding: 0 12px 12px }
+.swatch-fields label { margin: 10px 0 4px; font-size: 11px }
+.swatch-fields input { min-height: 36px; padding: 6px 10px; font-size: 13px }
+.swatch-card .field-remove { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; background: #ffffffe6 }
+.list-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px }
+.list-actions .field-help { flex: 1 1 300px; margin: 0 }
+.font-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px }
+.font-card { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden }
+.font-card-new { border-style: dashed }
+/* Die Probe steht in der Schrift selbst - das Skript setzt die Familie, die Datei liegt auf dem Server. */
+.font-sample { display: flex; align-items: center; gap: 18px; min-height: 88px; padding: 18px 60px 18px 22px; background: #fafbf8; border-bottom: 1px solid var(--line) }
+.font-sample-big { flex: none; font-size: 44px; line-height: 1; font-weight: 500 }
+.font-sample-line { display: grid; gap: 6px; min-width: 0 }
+.font-sample-text { font-size: 19px; line-height: 1.3; overflow-wrap: anywhere }
+.font-sample-weights { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted) }
+.font-weight-100 { font-weight: 100 } .font-weight-200 { font-weight: 200 } .font-weight-300 { font-weight: 300 }
+.font-weight-400 { font-weight: 400 } .font-weight-500 { font-weight: 500 } .font-weight-600 { font-weight: 600 }
+.font-weight-700 { font-weight: 700 } .font-weight-800 { font-weight: 800 } .font-weight-900 { font-weight: 900 }
+.font-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; padding: 0 22px 18px }
+.font-fields label { margin-top: 12px }
+.font-weights { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; padding: 0; border: 0 }
+.font-weights legend { float: left; margin-right: 8px; padding: 0; font-size: 12px; font-weight: 600 }
+.chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); font-size: 12px; font-weight: 500; cursor: pointer }
+.chip input { width: 14px; min-height: 14px; margin: 0 }
+.chip:has(input:checked) { border-color: var(--accent); background: #edf4e8; color: #22553e }
+.font-card .field-remove { position: absolute; top: 10px; right: 10px }
+.type-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px 36px }
+.type-fields { min-width: 0 }
+.type-colors .color-control { margin-top: 0 }
+.type-preview-column { min-width: 0 }
+.type-preview { margin-top: 12px; padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden }
+.type-preview p { margin: 0 }
+.type-preview .type-preview-h1 { margin-bottom: 10px; font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px }
+.type-preview .type-preview-h2 { margin-bottom: 14px; font-size: 26px; font-weight: 600; line-height: 1.2 }
+.type-preview-p { font-size: 17px; line-height: 1.6 }
+.type-preview-link { text-decoration: underline; text-underline-offset: 3px }
+.theme-save { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
+.theme-save .muted { font-size: 12px }
+.theme-form .button-defaults { margin: 0; background: var(--paper) }
+@media (max-width: 1000px) { .type-layout { grid-template-columns: 1fr } }

public/assets/form-editor.js

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

public/assets/site.css

@@ -98,7 +98,7 @@ p{hyphens:auto}
 .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}
+.form-field input,.form-field textarea,.form-field select{width:100%;padding:12px 13px;border:1px solid var(--form-border,currentColor);border-radius:8px;background:var(--form-bg,#fff);color:inherit;font:inherit;min-height:46px}
 .form-field textarea{min-height:140px;line-height:1.6;resize:vertical}
 .has-error input,.has-error textarea,.has-error select{border-width:2px;border-color:#8b2f22}
 .field-error{margin:0;font-size:13px;font-weight:600;color:#8b2f22}
@@ -409,6 +409,10 @@ body.consent-open{padding-bottom:320px}
    Inline geoeffnet stand es sonst in der schmalen Spalte neben der Marke und schob den
    ganzen Kopf auseinander - auf dem Telefon sah es aus, als fehle das Menue. */
 .site-header{position:relative}
+/* Gibt der Kopfbereich seine Flaeche selbst vor, malt der klebende Kopf keine zweite dahinter:
+   sonst zeigte eine durchsichtige Sektion Weiss statt Seite, und die Schattenlinie liesse sich
+   weder faerben noch abschalten. Linie und Schatten kommen dann aus Rahmen und Wirkung. */
+.site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none}
 .site-header .menu-burger[open]>summary{border-radius:8px}
 .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;

public/assets/theme-buttons.js

@@ -7,7 +7,7 @@ if (root) {
   const read = () => Object.fromEntries([...root.querySelectorAll('[name^="buttons["]')].map(input => [input.name.slice(8, -1), input.value]));
   const update = () => {
     // Unsaved palette edits are reflected immediately in all samples.
-    schema.colors = [...form.querySelectorAll('.theme-table tbody tr')].flatMap(row => {
+    schema.colors = [...form.querySelectorAll('[data-color-card]')].flatMap(row => {
       const key = row.querySelector('[name$="[key]"]'), value = row.querySelector('[name$="[value]"]');
       return key?.value && value ? [{ key: key.value, value: value.value }] : [];
     });

public/assets/theme-panel.js

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

scripts/admin-quality-check.mjs

@@ -47,7 +47,7 @@ try {
     await page.getByRole('button', { name: 'Anmelden', exact: true }).click();
     await page.waitForURL(origin + '/admin'); await page.goto(origin + '/admin/forms');
     await page.setViewportSize({ width: 390, height: 844 });
-    await page.locator('.field-table tbody tr').first().screenshot({ path: 'reports/admin-quality/form-field-mobile.png' });
+    await page.locator('.field-card').first().screenshot({ path: 'reports/admin-quality/form-field-mobile.png' });
     console.log('Public no-JavaScript baseline and visual captures passed.');
   } else {
   if (!process.argv.includes('--admin-only')) {

src/Content/FontLibrary.php

@@ -34,6 +34,12 @@ final class FontLibrary
     {
     }
 
+    /** Gibt es ein Stylesheet mit lokalen Schriften - auch wenn nicht jede Schrift des Themes dabei ist? */
+    public function hasStylesheet(): bool
+    {
+        return is_file($this->directory.'/fonts.css');
+    }
+
     /** Liegen für dieses Theme fertige Dateien bereit? */
     public function hasLocal(array $theme): bool
     {

src/Content/FormRepository.php

@@ -21,6 +21,13 @@ final class FormRepository
         'consent' => 'Einwilligung',
     ];
     public const MAX_FIELDS = 25;
+    /** Die gestaltbaren Farben eines Formulars, mit ihrer Bezeichnung in der Verwaltung. */
+    public const COLORS = [
+        'fieldBorderColor' => 'den Rahmen der Felder',
+        'fieldBackgroundColor' => 'den Hintergrund der Felder',
+        'buttonColor' => 'den Button',
+        'buttonInk' => 'die Buttonschrift',
+    ];
     /** Submissions per sender per hour. Deliberately low: a contact form is not a chat. */
     public const RATE_LIMIT = 5;
     /** A human needs longer than this to fill in a form; anything faster is a script. */
@@ -157,6 +164,11 @@ final class FormRepository
         if (false === filter_var($recipient, FILTER_VALIDATE_EMAIL)) {
             throw new InvalidForm('Bitte gib eine gültige Empfängeradresse an.');
         }
+        // Der Absender ist freiwillig: leer heisst, die Post kommt von der Empfaengeradresse.
+        $sender = trim((string) ($settings['sender'] ?? ''));
+        if ('' !== $sender && false === filter_var($sender, FILTER_VALIDATE_EMAIL)) {
+            throw new InvalidForm('Bitte gib eine gültige Absenderadresse an oder lass das Feld leer.');
+        }
         $replyTo = trim((string) ($settings['replyToField'] ?? ''));
         if ('' !== $replyTo) {
             $match = array_filter($fields, static fn (array $f): bool => $f['name'] === $replyTo && 'email' === $f['type']);
@@ -165,12 +177,67 @@ final class FormRepository
             }
         }
 
-        return [
+        $clean = [
             'recipient' => $recipient,
+            'sender' => $sender,
             'subject' => mb_substr(trim((string) ($settings['subject'] ?? '')), 0, 160) ?: 'Neue Formularnachricht',
             'success' => mb_substr(trim((string) ($settings['success'] ?? '')), 0, 300) ?: 'Vielen Dank. Deine Nachricht ist angekommen.',
             'replyToField' => $replyTo,
+            'buttonLabel' => mb_substr(trim((string) ($settings['buttonLabel'] ?? '')), 0, 40) ?: 'Absenden',
         ];
+        // Das Aussehen: leer heisst "wie die Website", sonst ein Palettenschluessel oder ein
+        // Hexwert - dieselbe Regel wie fuer jede Farbe im Editor.
+        foreach (self::COLORS as $field => $label) {
+            $value = trim((string) ($settings[$field] ?? ''));
+            if ('' !== $value && 1 !== preg_match(StyleSchema::COLOR, $value)) {
+                throw new InvalidForm(sprintf('„%s“ ist kein Farbwert für %s.', $value, $label));
+            }
+            $clean[$field] = $value;
+        }
+
+        return $clean;
+    }
+
+    /**
+     * Die Gestaltung eines Formulars als Regel fuer die Seite, die es zeigt.
+     *
+     * Das Formular bekommt seine Farben als Variablen: Rahmen und Grund der Felder direkt, die
+     * Buttonfarben ueber dieselben Token, die auch der Standardbutton der Website benutzt - so
+     * behaelt der Absendeknopf Form und Darstellung aus dem Design und wechselt nur die Farbe.
+     * Nichts gesetzt, nichts geschrieben: dann gilt weiter die Website.
+     */
+    public function css(array $form, array $theme): string
+    {
+        $values = [];
+        $button = false;
+        foreach (['fieldBorderColor' => '--form-border', 'fieldBackgroundColor' => '--form-bg', 'buttonColor' => '--kb-fill', 'buttonInk' => '--kb-ink'] as $field => $variable) {
+            $value = Theme::cssColor((string) ($form['settings'][$field] ?? ''), $theme);
+            if (null === $value) {
+                continue;
+            }
+            $values[] = $variable.':'.$value;
+            if ('buttonColor' === $field) {
+                $values[] = '--kb-hover-fill:color-mix(in srgb,'.$value.' 82%,#000)';
+                $button = true;
+            }
+            if ('buttonInk' === $field) {
+                $values[] = '--kb-hover-ink:'.$value;
+                $button = true;
+            }
+        }
+        if ($button) {
+            // Die Darstellung (gefuellt, Rahmen, dezent) leitet Flaeche und Schrift aus Fuellung
+            // und Tinte ab - am Wurzelelement, mit den Werten von dort. Hier noch einmal, damit
+            // die Ableitung die Farben dieses Formulars nimmt.
+            foreach (ButtonDesign::appearance($theme['buttons']['appearance'] ?? 'solid') as $key => $value) {
+                $values[] = '--kb-'.$key.':'.$value;
+            }
+        }
+        if ([] === $values) {
+            return '';
+        }
+
+        return sprintf('.block-form[data-form="%s"]{%s}', $form['slug'], implode(';', $values));
     }
 
     /**

src/Content/Statistics.php

@@ -85,12 +85,20 @@ final class Statistics
     /**
      * The numbers for a range of days, ending today.
      *
+     * Neben den Reihen ein paar Summen, die eine Zahl einordnen: der gleich lange Zeitraum davor,
+     * der staerkste Tag, die Wochentage im Schnitt, wie viel ueber Verweise kam und wie oft eine
+     * Adresse ins Leere lief. Alles aus derselben Tabelle, nichts davon braucht ein Merkmal, das
+     * eine Person wiedererkennbar macht.
+     *
      * @return array{
      *     days: list<array{day: string, count: int}>,
-     *     total: int, pages: list<array{path: string, count: int}>,
+     *     total: int, previousTotal: int, busiestDay: ?string,
+     *     pages: list<array{path: string, count: int}>,
      *     referrers: list<array{host: string, count: int}>,
      *     missing: list<array{path: string, count: int}>,
      *     hours: list<array{hour: int, count: int}>,
+     *     weekdays: list<array{weekday: int, count: int, average: float}>,
+     *     missingTotal: int, referred: int, pageCount: int,
      *     range: int, from: string, compactedBefore: string, busiest: int
      * }
      */
@@ -132,10 +140,40 @@ final class Statistics
             $hours[(int) $row['hour']] = (int) $row['total'];
         }
 
+        $sum = fn (string $extra): int => (int) $this->db->fetchOne(
+            'SELECT COALESCE(SUM(count), 0) FROM stat_hit WHERE '.$where.' '.$extra,
+            $params,
+        );
+        // Der gleich lange Zeitraum davor: erst der Vergleich macht aus einer Zahl eine Aussage.
+        $previousTotal = (int) $this->db->fetchOne(
+            'SELECT COALESCE(SUM(count), 0) FROM stat_hit WHERE website_id = ? AND day >= ? AND day < ? AND status = 200',
+            ['default', $now->modify(sprintf('-%d days', 2 * $range - 1))->format('Y-m-d'), $from],
+        );
+        $weekdays = array_fill(1, 7, ['count' => 0, 'days' => 0]);
+        $busiestDay = null;
+        foreach ($days as $entry) {
+            $weekday = (int) (new \DateTimeImmutable($entry['day'], new \DateTimeZone('UTC')))->format('N');
+            $weekdays[$weekday]['count'] += $entry['count'];
+            ++$weekdays[$weekday]['days'];
+            if ($entry['count'] > 0 && (null === $busiestDay || $entry['count'] > $perDay[$busiestDay])) {
+                $busiestDay = $entry['day'];
+            }
+        }
+
         return [
             'days' => $days,
             'total' => array_sum(array_column($days, 'count')),
+            'previousTotal' => $previousTotal,
             'busiest' => max(1, max(array_column($days, 'count'))),
+            'busiestDay' => $busiestDay,
+            'weekdays' => array_map(static fn (int $weekday): array => [
+                'weekday' => $weekday,
+                'count' => $weekdays[$weekday]['count'],
+                'average' => $weekdays[$weekday]['days'] > 0 ? round($weekdays[$weekday]['count'] / $weekdays[$weekday]['days'], 1) : 0.0,
+            ], range(1, 7)),
+            'missingTotal' => $sum('AND status = 404'),
+            'referred' => $sum("AND status = 200 AND referrer_host <> ''"),
+            'pageCount' => (int) $this->db->fetchOne('SELECT COUNT(DISTINCT path) FROM stat_hit WHERE '.$where.' AND status = 200', $params),
             'pages' => $rows('path', 'AND status = 200', 'path'),
             'referrers' => $rows('referrer_host', "AND status = 200 AND referrer_host <> ''", 'referrer_host'),
             'missing' => $rows('path', 'AND status = 404', 'path'),

src/Content/Theme.php

@@ -25,6 +25,25 @@ final class Theme
         'system-ui' => 'Systemschrift',
     ];
 
+    /**
+     * Fertige Paletten zum Übernehmen. Dieselben fünf Schlüssel wie die Voreinstellung, damit
+     * Grundfarben und Blöcke, die auf die Schlüssel ink oder link zeigen, stimmen nach dem Wechsel weiter.
+     * Die Linkfarbe erreicht auf dem Papierton jeweils mindestens 4,5:1 - eine Palette, die
+     * ihre eigenen Links unlesbar macht, wäre keine Hilfe.
+     */
+    public const PALETTES = [
+        ['name' => 'Wald', 'colors' => ['paper' => '#f6f7f4', 'ink' => '#203b34', 'mint' => '#e4efb9', 'accent' => '#b55b12', 'link' => '#a4510f']],
+        ['name' => 'Ozean', 'colors' => ['paper' => '#f5f8fa', 'ink' => '#12283a', 'mint' => '#d6ecf3', 'accent' => '#0e7490', 'link' => '#0b5f78']],
+        ['name' => 'Sand', 'colors' => ['paper' => '#faf6ef', 'ink' => '#3b2f24', 'mint' => '#f1e4cf', 'accent' => '#b8672a', 'link' => '#9a5320']],
+        ['name' => 'Koralle', 'colors' => ['paper' => '#fffaf8', 'ink' => '#2b2320', 'mint' => '#ffe4dc', 'accent' => '#d9483b', 'link' => '#b83a2f']],
+        ['name' => 'Schiefer', 'colors' => ['paper' => '#f4f5f7', 'ink' => '#1f2937', 'mint' => '#e2e8f0', 'accent' => '#4f46e5', 'link' => '#4338ca']],
+        ['name' => 'Olive', 'colors' => ['paper' => '#f7f7f2', 'ink' => '#2a2f23', 'mint' => '#e6ead3', 'accent' => '#6b7a2e', 'link' => '#55621f']],
+        ['name' => 'Nacht', 'colors' => ['paper' => '#14181d', 'ink' => '#eef1f4', 'mint' => '#262e38', 'accent' => '#7cc4ff', 'link' => '#9ad2ff']],
+    ];
+
+    /** Die Namen der Palettenfarben, wie sie in einer neuen Palette heißen. */
+    public const COLOR_NAMES = ['paper' => 'Papier', 'ink' => 'Tinte', 'mint' => 'Mint', 'accent' => 'Akzent', 'link' => 'Links'];
+
     public const DEFAULTS = [
         'colors' => [
             ['key' => 'paper', 'name' => 'Papier', 'value' => '#f6f7f4'],
@@ -351,5 +370,4 @@ final class Theme
             $headings,
         ).ButtonDesign::css($theme['buttons'] ?? ButtonDesign::defaults($base));
     }
-
 }

src/Controller/FormAdminController.php

@@ -2,7 +2,9 @@
 
 namespace App\Controller;
 
+use App\Content\ButtonDesign;
 use App\Content\FormRepository;
+use App\Content\Theme;
 use App\Domain\InvalidForm;
 use App\Domain\StaleWrite;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
@@ -12,17 +14,23 @@ use Symfony\Component\Routing\Attribute\Route;
 
 final class FormAdminController extends AbstractController
 {
-    public function __construct(private FormRepository $forms)
+    public function __construct(private FormRepository $forms, private Theme $theme)
     {
     }
 
     #[Route('/%kant.admin_path%/forms', name: 'admin_forms', methods: ['GET'])]
     public function index(Request $request): Response
     {
+        $theme = $this->theme->load();
+
         return $this->render('admin/forms.html.twig', [
             'forms' => $this->forms->all(),
             'types' => FormRepository::TYPES,
+            'colors' => FormRepository::COLORS,
             'submissions' => $this->forms->submissions($request->query->getInt('seite', 1)),
+            // Die Vorschau zeichnet den Absendeknopf mit dem Standardbutton der Website und
+            // kennt die Palette, damit eine Farbe gewaehlt statt getippt wird.
+            'schema' => ['colors' => $theme['colors'], 'fonts' => $theme['fonts'], 'buttons' => $theme['buttons'] ?? ButtonDesign::defaults($theme['base']), 'base' => $theme['base']],
         ]);
     }
 
@@ -54,9 +62,12 @@ final class FormAdminController extends AbstractController
                 $fields,
                 [
                     'recipient' => $request->request->getString('recipient'),
+                    'sender' => $request->request->getString('sender'),
                     'subject' => $request->request->getString('subject'),
                     'success' => $request->request->getString('success'),
                     'replyToField' => $request->request->getString('replyToField'),
+                    'buttonLabel' => $request->request->getString('buttonLabel'),
+                    ...array_map(fn (string $field): string => $request->request->getString($field), array_combine(array_keys(FormRepository::COLORS), array_keys(FormRepository::COLORS))),
                 ],
                 $request->request->getInt('expectedVersion', -1),
             );

src/Controller/FormController.php

@@ -90,8 +90,10 @@ final class FormController extends AbstractController
         foreach ($form['fields'] as $field) {
             $lines[] = $field['label'].': '.($values[$field['name']] ?? '');
         }
+        // Der Absender ist die eigene Adresse des Formulars, sonst der Empfaenger. Viele Hoster
+        // liefern nur aus, was von einer Adresse ihrer eigenen Domain kommt.
         $email = (new Email())
-            ->from($form['settings']['recipient'])
+            ->from(($form['settings']['sender'] ?? '') ?: $form['settings']['recipient'])
             ->to($form['settings']['recipient'])
             ->subject($form['settings']['subject'])
             ->text(implode("\n", $lines)."\n\n-- \nGesendet über ".rtrim($this->siteOrigin, '/'));

src/Controller/PageController.php

@@ -86,6 +86,15 @@ final class PageController extends AbstractController
         foreach ([...array_values($areas), ...array_values($sections)] as $extra) {
             $styles .= $this->styles->compileDocument($extra).$this->code->compileDocument($extra);
         }
+        // Die Farben jedes Formulars auf der Seite - nach dem Theme, damit sie es uebersteuern.
+        $forms = $this->formStates($page, $request->query->getString('gesendet'), $request);
+        $styled = [];
+        foreach ($forms as $state) {
+            if (null !== $state['form'] && !isset($styled[$state['form']['slug']])) {
+                $styled[$state['form']['slug']] = true;
+                $styles .= $this->forms->css($state['form'], $theme);
+            }
+        }
         // Schriften kommen ausschliesslich vom eigenen Server. Fehlen die Dateien, zeigt die
         // Website die Ersatzschrift des Themes - nie ein Stylesheet von fonts.googleapis.com:
         // das gaebe die IP-Adresse jedes Besuchers an einen Dritten weiter und haengt den
@@ -114,7 +123,7 @@ final class PageController extends AbstractController
             // Own scripts arrive as one file per page, never inline, so the policy can stay
             // hash based and no page without a script loses its strict setting.
             'pageScript' => [] === $this->code->scriptsOf($page['document']) ? null : '/assets/seite/'.$page['id'].'.js',
-            'forms' => $this->formStates($page, $request->query->getString('gesendet'), $request),
+            'forms' => $forms,
             'breadcrumbs' => $status >= 400 ? [] : $this->breadcrumbs($page),
             'socialImage' => $this->socialImage($page),
             'structuredData' => $status >= 400 ? [] : $this->structuredData($page),

src/Controller/ThemeController.php

@@ -30,6 +30,10 @@ final class ThemeController extends AbstractController
             'buttonPresets' => ButtonDesign::PRESETS,
             'fontsLocal' => $this->fonts->hasLocal($theme),
             'fontsMissing' => $this->fonts->missing($theme),
+            // Die Vorschau der Schriften nutzt die Dateien, die schon hier liegen.
+            'fontsStylesheet' => $this->fonts->hasStylesheet(),
+            'palettes' => Theme::PALETTES,
+            'colorNames' => Theme::COLOR_NAMES,
         ]);
     }
 

src/Twig/HeaderExtension.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Twig;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+/**
+ * Ob der Kopfbereich seine Fläche selbst gestaltet.
+ *
+ * Der klebende Kopf malt eine weiße Fläche mit Schattenlinie, damit ein Kopf ohne eigene
+ * Gestaltung beim Scrollen nicht über dem Inhalt durchscheint. Gibt eine Sektion des Kopfbereichs
+ * aber selbst einen Hintergrund vor - normal, beim Überfahren oder beim Scrollen -, lag diese
+ * Fläche dahinter: eine durchsichtige Sektion zeigte Weiß statt Seite, und die Linie ließ sich
+ * weder färben noch abschalten. Dann trägt die Sektion die Fläche allein.
+ *
+ * Eine Funktion statt einer Variablen, weil vier Wege den Kopf ausgeben - Seite, Archiv,
+ * Editor-Vorschau und Bereichs-Vorschau - und keiner davon vergessen werden darf.
+ */
+final class HeaderExtension extends AbstractExtension
+{
+    /** Die Eigenschaften, die eine Fläche ausmachen. Eine Textfarbe allein ist keine. */
+    private const SURFACE = ['backgroundColor', 'gradientFrom', 'gradientTo', 'backgroundImage'];
+
+    public function getFunctions(): array
+    {
+        return [new TwigFunction('kant_header_surface', self::ownSurface(...))];
+    }
+
+    /**
+     * Nur Sektionen der obersten Ebene zählen: eine Spalte mit weißem Kasten um das Logo macht
+     * noch keinen Kopf, und ohne Fläche dahinter schiene der Rest über dem Inhalt durch.
+     */
+    public static function ownSurface(?array $document): bool
+    {
+        foreach ($document['blocks'] ?? [] as $block) {
+            if ('section' !== ($block['type'] ?? null)) {
+                continue;
+            }
+            foreach ($block['style'] ?? [] as $values) {
+                if (!is_array($values)) {
+                    continue;
+                }
+                foreach ([$values, $values['hover'] ?? [], $values['scrolled'] ?? []] as $state) {
+                    foreach (self::SURFACE as $key) {
+                        if (is_array($state) && '' !== (string) ($state[$key] ?? '')) {
+                            return true;
+                        }
+                    }
+                }
+            }
+        }
+
+        return false;
+    }
+}

templates/admin/forms.html.twig

@@ -1,77 +1,181 @@
 {% extends 'admin/shell.html.twig' %}
 {% set nav = 'forms' %}
+{# Die Vorschau zeichnet den Absendeknopf mit dem Standardbutton der Website - dafuer braucht die
+   Seite dessen Stylesheet, genau wie die Designseite. #}
+{% block styles %}<link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}">{% endblock %}
+{% block scripts %}<script type="module" src="/assets/form-editor.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block title %}Formulare{% endblock %}
 {% block heading %}Formulare{% endblock %}
-{% block lead %}Felder, Empfänger und Einwilligungstext werden hier gepflegt. Auf einer Seite steht nur ein Formularblock mit der Adresse – so kann ein gespeicherter Seiteninhalt niemals ändern, wohin eine Anfrage geht.{% endblock %}
+{% block lead %}Felder, Empfänger, Einwilligungstext und Aussehen werden hier gepflegt. Auf einer Seite steht nur ein Formularblock mit der Adresse – so kann ein gespeicherter Seiteninhalt niemals ändern, wohin eine Anfrage geht.{% endblock %}
+{% block actions %}<a class="primary" href="#neues-formular">Neues Formular</a>{% endblock %}
+
+{# Eine Feldkarte. Der Index steht in den Feldnamen; die Vorlage fuer neue Felder traegt an seiner
+   Stelle den Platzhalter __n__, den das Skript beim Einfuegen ersetzt. #}
+{% macro field(f, n, row, types) %}
+{% set id = 'f' ~ f ~ '-' ~ n %}
+<li class="field-card{{ row.label == '' ? ' field-card-new' : '' }}" data-field>
+    <div class="field-card-head">
+        <span class="field-card-index" aria-hidden="true" data-field-index></span>
+        <div class="field-card-title">
+            <label for="{{ id }}-label">Beschriftung</label>
+            <input id="{{ id }}-label" name="fields[{{ n }}][label]" maxlength="120" value="{{ row.label }}" placeholder="{{ row.label == '' ? 'Neues Feld – Beschriftung eingeben' : '' }}" data-field-label>
+        </div>
+        <div class="field-card-type">
+            <label for="{{ id }}-type">Typ</label>
+            <select id="{{ id }}-type" name="fields[{{ n }}][type]" data-field-type>
+                {% for value, label in types %}<option value="{{ value }}"{{ row.type == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
+            </select>
+        </div>
+        <button type="button" class="field-remove" data-remove-field hidden aria-label="Feld entfernen" title="Feld entfernen">{% include 'admin/icon.html.twig' with {name: 'remove'} only %}</button>
+    </div>
+    <div class="field-card-body">
+        <div>
+            <label for="{{ id }}-name">Technischer Name</label>
+            <input id="{{ id }}-name" name="fields[{{ n }}][name]" maxlength="32" value="{{ row.name }}" pattern="[a-z][a-z0-9_]*" placeholder="vorname" data-field-name>
+            <p class="field-help">Kleinbuchstaben, Ziffern, Unterstrich. Steht in der E-Mail vor der Antwort.</p>
+        </div>
+        <div>
+            <label for="{{ id }}-help">Hilfetext</label>
+            <input id="{{ id }}-help" name="fields[{{ n }}][help]" maxlength="200" value="{{ row.help }}" placeholder="Steht unter dem Feld" data-field-help>
+        </div>
+        <div data-field-options>
+            <label for="{{ id }}-options">Optionen der Auswahl</label>
+            <input id="{{ id }}-options" name="fields[{{ n }}][options]" maxlength="500" value="{{ row.options|join(', ') }}" placeholder="Beratung, Angebot, Sonstiges" data-field-options-input>
+            <p class="field-help">Durch Komma trennen, mindestens zwei.</p>
+        </div>
+        <div class="field-card-flags">
+            <label class="check-label" for="{{ id }}-required"><input id="{{ id }}-required" type="checkbox" name="fields[{{ n }}][required]" value="1"{{ row.required ? ' checked' : '' }} data-field-required> Pflichtfeld</label>
+        </div>
+    </div>
+</li>
+{% endmacro %}
+
 {% block content %}
+{% import _self as karte %}
+<div class="form-screens" data-form-schema="{{ schema|json_encode|e('html_attr') }}">
 {% for form in forms|merge([null]) %}
 {% set new = form is null %}
+{% set f = loop.index %}
 {% set rows = new ? [] : form.fields %}
-<section class="stack-section">
-    <div class="section-head">
-        <h2>{{ new ? 'Neues Formular' : form.name }}{% if not new %} <span class="count">{{ form.fields|length }} Felder</span>{% endif %}</h2>
-        {% if not new %}<span class="muted">Block-Adresse <code>{{ form.slug }}</code></span>{% endif %}
-    </div>
-    <form action="{{ path('admin_form_save', {slug: new ? 'neu' : form.slug}) }}" method="post" class="form-def card card-body">
+{% set settings = new ? {} : form.settings %}
+{% if new %}
+<details class="card form-new" id="neues-formular"{{ forms is empty ? ' open' : '' }}>
+    <summary>Neues Formular anlegen</summary>
+{% else %}
+<section class="card">
+{% endif %}
+    <form action="{{ path('admin_form_save', {slug: new ? 'neu' : form.slug}) }}" method="post" class="form-def" data-form-editor>
         <input type="hidden" name="_csrf_token" value="{{ csrf_token('forms') }}">
         <input type="hidden" name="expectedVersion" value="{{ new ? 0 : form.version }}">
-        <div class="fields">
-            <div>
-                <label for="name-{{ loop.index }}">Name</label>
-                <input id="name-{{ loop.index }}" name="name" maxlength="120" required value="{{ new ? '' : form.name }}">
-            </div>
-            {% if new %}
-            <div>
-                <label for="slug-new">Adresse</label>
-                <input id="slug-new" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" required placeholder="kontakt">
-                <p class="field-help">Wird im Formularblock eingetragen.</p>
-            </div>
-            {% endif %}
-            <div>
-                <label for="recipient-{{ loop.index }}">Empfänger</label>
-                <input id="recipient-{{ loop.index }}" name="recipient" type="email" required value="{{ new ? '' : form.settings.recipient }}">
-            </div>
-            <div>
-                <label for="subject-{{ loop.index }}">Betreff</label>
-                <input id="subject-{{ loop.index }}" name="subject" maxlength="160" value="{{ new ? '' : form.settings.subject }}">
-            </div>
-            <div>
-                <label for="reply-{{ loop.index }}">Antwortadresse aus Feld</label>
-                <input id="reply-{{ loop.index }}" name="replyToField" maxlength="32" value="{{ new ? '' : form.settings.replyToField }}" placeholder="email">
-                <p class="field-help">Technischer Name eines E-Mail-Feldes. Dann lässt sich direkt antworten.</p>
-            </div>
-            <div class="field-wide">
-                <label for="success-{{ loop.index }}">Meldung nach dem Absenden</label>
-                <textarea id="success-{{ loop.index }}" name="success" maxlength="300" rows="3" placeholder="Vielen Dank. Wir melden uns in Kürze bei dir.">{{ new ? '' : form.settings.success }}</textarea>
-            </div>
+        {% if new %}
+        {# Die Zusammenfassung des Details ist keine Ueberschrift; ohne diese springt die
+           Gliederung von der Seitenueberschrift direkt zu den Abschnittstiteln. #}
+        <h2 class="visually-hidden">Neues Formular</h2>
+        {% else %}
+        <div class="card-head">
+            <h2>{{ form.name }} <span class="count">{{ form.fields|length }} {{ form.fields|length == 1 ? 'Feld' : 'Felder' }}</span></h2>
+            <span class="muted">Im Editor als Formularblock mit der Adresse <code>{{ form.slug }}</code></span>
         </div>
+        {% endif %}
+        <div class="card-body form-editor">
+            <div class="form-editor-main">
+                <h3 class="form-part">Zustellung</h3>
+                <div class="fields">
+                    <div>
+                        <label for="name-{{ f }}">Name</label>
+                        <input id="name-{{ f }}" name="name" maxlength="120" required value="{{ new ? '' : form.name }}" placeholder="Kontakt">
+                    </div>
+                    {% if new %}
+                    <div>
+                        <label for="slug-new">Adresse</label>
+                        <input id="slug-new" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" required placeholder="kontakt">
+                        <p class="field-help">Wird im Formularblock eingetragen. Kleinbuchstaben, Ziffern, Bindestrich.</p>
+                    </div>
+                    {% endif %}
+                    <div>
+                        <label for="recipient-{{ f }}">Empfänger</label>
+                        <input id="recipient-{{ f }}" name="recipient" type="email" required value="{{ settings.recipient|default('') }}" placeholder="info@beispiel.de">
+                    </div>
+                    <div>
+                        <label for="sender-{{ f }}">Absender</label>
+                        <input id="sender-{{ f }}" name="sender" type="email" value="{{ settings.sender|default('') }}" placeholder="formular@beispiel.de">
+                        <p class="field-help">Leer: die Empfängeradresse. Viele Anbieter stellen nur zu, was von einer Adresse der eigenen Domain kommt.</p>
+                    </div>
+                    <div>
+                        <label for="subject-{{ f }}">Betreff der E-Mail</label>
+                        <input id="subject-{{ f }}" name="subject" maxlength="160" value="{{ settings.subject|default('') }}" placeholder="Neue Formularnachricht">
+                    </div>
+                    <div>
+                        <label for="reply-{{ f }}">Antwortadresse aus Feld</label>
+                        <input id="reply-{{ f }}" name="replyToField" maxlength="32" value="{{ settings.replyToField|default('') }}" placeholder="email">
+                        <p class="field-help">Technischer Name eines E-Mail-Feldes. Dann lässt sich direkt antworten.</p>
+                    </div>
+                    <div class="field-wide">
+                        <label for="success-{{ f }}">Meldung nach dem Absenden</label>
+                        <textarea id="success-{{ f }}" name="success" maxlength="300" rows="2" placeholder="Vielen Dank. Wir melden uns in Kürze bei dir.">{{ settings.success|default('') }}</textarea>
+                    </div>
+                </div>
 
-        <table class="table field-table">
-            <caption class="visually-hidden">Felder des Formulars. Eine Beschriftung zu leeren entfernt das Feld.</caption>
-            <thead><tr><th scope="col">Technischer Name</th><th scope="col">Typ</th><th scope="col">Beschriftung</th><th scope="col">Pflicht</th><th scope="col">Hilfetext</th><th scope="col">Optionen</th></tr></thead>
-            <tbody>
-            {% for row in rows|merge([{name: '', type: 'text', label: '', required: false, help: '', options: []}, {name: '', type: 'text', label: '', required: false, help: '', options: []}]) %}
-                {% set n = loop.index0 %}
-                <tr{% if row.label == '' %} class="table-new"{% endif %}>
-                    <td data-label="Technischer Name"><input name="fields[{{ n }}][name]" maxlength="32" value="{{ row.name }}" pattern="[a-z][a-z0-9_]*" aria-label="Technischer Name von Feld {{ n + 1 }}" placeholder="vorname"></td>
-                    <td data-label="Typ">
-                        <select name="fields[{{ n }}][type]" aria-label="Typ von Feld {{ n + 1 }}">
-                            {% for value, label in types %}<option value="{{ value }}"{{ row.type == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
-                        </select>
-                    </td>
-                    <td data-label="Beschriftung"><input name="fields[{{ n }}][label]" maxlength="120" value="{{ row.label }}" aria-label="Beschriftung von Feld {{ n + 1 }}"></td>
-                    <td class="check-cell" data-label="Pflichtfeld"><input type="checkbox" name="fields[{{ n }}][required]" value="1"{{ row.required ? ' checked' : '' }} aria-label="Feld {{ n + 1 }} ist ein Pflichtfeld"></td>
-                    <td data-label="Hilfetext"><input name="fields[{{ n }}][help]" maxlength="200" value="{{ row.help }}" aria-label="Hilfetext von Feld {{ n + 1 }}"></td>
-                    <td data-label="Optionen"><input name="fields[{{ n }}][options]" maxlength="500" value="{{ row.options|join(', ') }}" aria-label="Optionen von Feld {{ n + 1 }}" placeholder="nur bei Auswahl"></td>
-                </tr>
-            {% endfor %}
-            </tbody>
-        </table>
-        <p class="field-help">Ein Einwilligungsfeld ist immer ein Pflichtfeld; der Zeitpunkt der Einwilligung wird mitgespeichert. Optionen einer Auswahl durch Komma trennen. Die letzten beiden Zeilen sind für neue Felder.</p>
-        <button class="primary" type="submit">{{ new ? 'Formular anlegen' : 'Formular speichern' }}</button>
+                <div class="form-fields-head">
+                    <h3 class="form-part">Felder</h3>
+                    <button type="button" class="secondary" data-add-field hidden>{% include 'admin/icon.html.twig' with {name: 'plus'} only %}Feld hinzufügen</button>
+                </div>
+                <ol class="field-list" data-field-list>
+                    {% for row in rows %}{{ karte.field(f, loop.index0, row, types) }}{% endfor %}
+                    {{ karte.field(f, rows|length, {name: '', type: 'text', label: '', required: false, help: '', options: []}, types) }}
+                </ol>
+                <template data-field-template>{{ karte.field(f, '__n__', {name: '', type: 'text', label: '', required: false, help: '', options: []}, types) }}</template>
+                <p class="field-help" data-fields-help>Ein Feld ohne Beschriftung wird nicht gespeichert – so lässt sich ein Feld auch ohne Skript entfernen. Ein Einwilligungsfeld ist immer ein Pflichtfeld; der Zeitpunkt der Einwilligung wird mitgespeichert.</p>
+
+                <h3 class="form-part">Aussehen</h3>
+                <div class="fields form-look">
+                    <div>
+                        <label for="buttonLabel-{{ f }}">Beschriftung des Buttons</label>
+                        <input id="buttonLabel-{{ f }}" name="buttonLabel" maxlength="40" value="{{ settings.buttonLabel|default('') }}" placeholder="Absenden" data-form-button-label>
+                    </div>
+                    {% for key, label in {fieldBorderColor: 'Rahmen der Felder', fieldBackgroundColor: 'Hintergrund der Felder', buttonColor: 'Button', buttonInk: 'Buttonschrift'} %}
+                    <div>
+                        <label for="{{ key }}-{{ f }}">{{ label }}</label>
+                        <input id="{{ key }}-{{ f }}" name="{{ key }}" value="{{ settings[key]|default('') }}" placeholder="Wie die Website" data-form-color="{{ key }}">
+                    </div>
+                    {% endfor %}
+                </div>
+                <p class="field-help">Leer heißt: wie die Website. Sonst eine Farbe aus der Palette oder ein Wert wie <code>#1a2b3c</code>. Form und Größe des Buttons kommen aus dem Design.</p>
+            </div>
+
+            {# Die Vorschau: dieselben Felder, dieselben Farben, der Standardbutton der Website.
+               Ohne Skript steht sie mit den gespeicherten Feldern da; mit Skript folgt sie jeder
+               Eingabe. #}
+            <aside class="form-editor-preview" aria-label="Vorschau des Formulars">
+                <h3 class="form-part">Vorschau</h3>
+                <div class="form-preview" data-form-preview>
+                    {% for row in rows %}
+                    <div class="form-preview-field">
+                        {% if row.type == 'consent' %}
+                        <span class="form-preview-check"><span class="form-preview-box" aria-hidden="true"></span>{{ row.label }} *</span>
+                        {% else %}
+                        <span class="form-preview-label">{{ row.label }}{% if row.required %} *{% endif %}</span>
+                        <span class="form-preview-input{{ row.type == 'textarea' ? ' form-preview-area' : '' }}{{ row.type == 'select' ? ' form-preview-select' : '' }}" aria-hidden="true">{{ row.type == 'select' ? '— bitte wählen —' : '' }}</span>
+                        {% endif %}
+                    </div>
+                    {% endfor %}
+                    <span class="cms-button b-desktop-shape-{{ schema.buttons.shape }} b-desktop-appearance-{{ schema.buttons.appearance }} b-desktop-size-{{ schema.buttons.size }}" data-preview-button>{{ settings.buttonLabel|default('Absenden') }}</span>
+                </div>
+                <p class="field-help">Schrift, Abstände und Buttonform kommen aus dem Design der Website.</p>
+            </aside>
+        </div>
+        <div class="card-foot form-editor-foot">
+            <button class="primary" type="submit">{{ new ? 'Formular anlegen' : 'Formular speichern' }}</button>
+            {% if not new %}<span class="muted">Änderungen gelten sofort auf jeder Seite, die dieses Formular zeigt.</span>{% endif %}
+        </div>
     </form>
+{% if new %}
+</details>
+{% else %}
 </section>
+{% endif %}
 {% endfor %}
+</div>
 
 <div class="section-head"><h2>Einsendungen <span class="count">{{ submissions.total }}</span></h2><span class="muted">Neueste zuerst.</span></div>
 {% if submissions.items is empty %}

templates/admin/icon.html.twig

@@ -16,6 +16,9 @@
     system: 'M8 8h8v8H8Zm-4 2h4m-4 4h4m8-4h4m-4 4h4M10 4v4m4-4v4m-4 8v4m4-4v4',
     tasks: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-13.5V12l3.5 2.2',
     users: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8 8c0-3.3 3.6-5 8-5s8 1.7 8 5',
-    external: 'M14 4h6v6m0-6-8 8M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'
+    external: 'M14 4h6v6m0-6-8 8M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
+    logout: 'M10 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5m5-12 4 4-4 4m4-4H9',
+    plus: 'M12 5v14M5 12h14',
+    remove: 'M5 7h14M9 7V4h6v3m-7 0v13h8V7'
 } %}
 <svg class="nav-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="{{ paths[name]|default(paths.pages) }}"/></svg>

templates/admin/shell.html.twig

@@ -53,13 +53,25 @@
         </ul>
     </nav>
     </details>
+    {# Der Fuss der Leiste: eine Kontokarte mit Namen und Rolle, daneben der Abmeldeknopf als
+       Symbol mit Beschriftung fuer Vorlesesoftware, darunter die Fassung. Vorher standen drei
+       Zeilen lose untereinander - Fassung, Name, ein grauer Knopf; jetzt ist es eine Einheit. #}
     <div class="shell-foot">
-        <p class="shell-version">{% if is_granted('ROLE_ADMIN') %}<a href="{{ path('admin_system') }}">Fassung {{ kant_version() }}</a>{% set updateVersion = kant_update_version() %}{% if updateVersion %}<a class="version-update" href="{{ path('admin_system', {pruefen: 1}) }}" aria-label="Update {{ updateVersion }} verfügbar. Aktualisierung öffnen.">Update {{ updateVersion }} verfügbar</a>{% endif %}{% else %}Fassung {{ kant_version() }}{% endif %}</p>
-        <a class="shell-user" href="{{ path('admin_account') }}" aria-label="Mein Konto: {{ app.user.userIdentifier }}"{{ nav|default('') == 'account' ? ' aria-current="page"' : '' }}><span class="shell-avatar" aria-hidden="true">{{ app.user.userIdentifier|first|upper }}</span><strong>{{ app.user.userIdentifier }}</strong></a>
-        <form action="{{ path('admin_logout') }}" method="post">
-            <input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}">
-            <button class="subtle" type="submit">Abmelden</button>
-        </form>
+        <div class="shell-account">
+            <a class="shell-user" href="{{ path('admin_account') }}" aria-label="Mein Konto: {{ app.user.userIdentifier }}"{{ nav|default('') == 'account' ? ' aria-current="page"' : '' }}>
+                <span class="shell-avatar" aria-hidden="true">{{ app.user.userIdentifier|first|upper }}</span>
+                <span class="shell-user-text"><strong>{{ app.user.userIdentifier }}</strong><span>{{ is_granted('ROLE_ADMIN') ? 'Administrator' : (is_granted('ROLE_PUBLISHER') ? 'Veröffentlicher' : 'Redakteur') }}</span></span>
+            </a>
+            <form action="{{ path('admin_logout') }}" method="post">
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token('logout') }}">
+                <button class="shell-logout" type="submit" title="Abmelden">{% include 'admin/icon.html.twig' with {name: 'logout'} only %}<span class="visually-hidden">Abmelden</span></button>
+            </form>
+        </div>
+        {% set updateVersion = is_granted('ROLE_ADMIN') ? kant_update_version() : null %}
+        <p class="shell-version">
+            {% if is_granted('ROLE_ADMIN') %}<a href="{{ path('admin_system') }}">KantSites {{ kant_version() }}</a>{% else %}<span>KantSites {{ kant_version() }}</span>{% endif %}
+            {% if updateVersion %}<a class="version-update" href="{{ path('admin_system', {pruefen: 1}) }}" aria-label="Update {{ updateVersion }} verfügbar. Aktualisierung öffnen.">Update {{ updateVersion }} verfügbar</a>{% endif %}
+        </p>
     </div>
 </header>
 <main id="admin-main" class="shell-main" tabindex="-1">

templates/admin/statistics.html.twig

@@ -4,20 +4,61 @@
 {% block heading %}Statistik{% endblock %}
 {% block lead %}Gezählt wird auf dem Server, ohne Cookie und ohne IP-Adresse – deshalb braucht diese Messung keine Einwilligung. Zeiten in UTC.{% endblock %}
 {% block actions %}
+<nav class="range-switch" aria-label="Zeitraum">
+    {% for days, label in ranges %}
+    <a href="{{ path('admin_statistics', {tage: days}) }}"{{ days == range ? ' aria-current="page"' : '' }}>{{ label }}</a>
+    {% endfor %}
+</nav>
 <a class="secondary" href="{{ path('admin_statistics_csv', {tage: range}) }}">Als CSV</a>
 {% endblock %}
 {% block content %}
+{% set perDay = stats.total / stats.range %}
+{% set delta = stats.previousTotal > 0 ? ((stats.total - stats.previousTotal) / stats.previousTotal * 100)|round : null %}
+{% set weekdayNames = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'] %}
+{% set weekdayShort = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] %}
 
-<nav class="range-switch" aria-label="Zeitraum">
-    {% for days, label in ranges %}
-    <a class="{{ days == range ? 'primary' : 'secondary' }}" href="{{ path('admin_statistics', {tage: days}) }}"{{ days == range ? ' aria-current="page"' : '' }}>{{ label }}</a>
-    {% endfor %}
-</nav>
+{# Die Kennzahlen zuerst: was der Zeitraum gebracht hat, und woran man es misst. #}
+<div class="stat-tiles">
+    <div class="stat-tile stat-tile-main">
+        <span class="stat-label">Seitenaufrufe</span>
+        <strong class="stat-value">{{ stats.total|number_format(0, ',', '.') }}</strong>
+        {% if delta is null %}
+        <span class="stat-note">{{ stats.total > 0 ? 'im Zeitraum davor keine Aufrufe' : 'noch nichts gezählt' }}</span>
+        {% else %}
+        <span class="stat-note stat-delta {{ delta > 0 ? 'stat-up' : (delta < 0 ? 'stat-down' : '') }}">{{ delta > 0 ? '+' : '' }}{{ delta|number_format(0, ',', '.') }} % gegenüber {{ ranges[range]|lower }} davor ({{ stats.previousTotal|number_format(0, ',', '.') }})</span>
+        {% endif %}
+    </div>
+    <div class="stat-tile">
+        <span class="stat-label">Im Schnitt je Tag</span>
+        <strong class="stat-value">{{ perDay|number_format(perDay < 10 ? 1 : 0, ',', '.') }}</strong>
+        <span class="stat-note">seit {{ stats.from|date('d.m.Y') }}</span>
+    </div>
+    <div class="stat-tile">
+        <span class="stat-label">Stärkster Tag</span>
+        <strong class="stat-value">{{ stats.busiestDay ? stats.busiest|number_format(0, ',', '.') : '–' }}</strong>
+        <span class="stat-note">{{ stats.busiestDay ? stats.busiestDay|date('d.m.Y') ~ ', ' ~ weekdayNames[stats.busiestDay|date('N') - 1] : 'kein Aufruf im Zeitraum' }}</span>
+    </div>
+    <div class="stat-tile">
+        <span class="stat-label">Aufgerufene Seiten</span>
+        <strong class="stat-value">{{ stats.pageCount|number_format(0, ',', '.') }}</strong>
+        <span class="stat-note">unterschiedliche Adressen</span>
+    </div>
+    <div class="stat-tile">
+        <span class="stat-label">Über Verweise</span>
+        <strong class="stat-value">{{ stats.referred|number_format(0, ',', '.') }}</strong>
+        <span class="stat-note">{{ stats.total > 0 ? (stats.referred / stats.total * 100)|round ~ ' % kamen von einer anderen Website' : 'von einer anderen Website' }}</span>
+    </div>
+    <div class="stat-tile">
+        <span class="stat-label">Nicht gefunden</span>
+        <strong class="stat-value">{{ stats.missingTotal|number_format(0, ',', '.') }}</strong>
+        <span class="stat-note">Aufrufe einer Adresse ohne Seite</span>
+    </div>
+</div>
 
 <div class="card">
     <div class="card-head">
-        <h2>Seitenaufrufe <span class="count">{{ stats.total }}</span></h2>
-        <span class="muted">ab {{ stats.from|date('d.m.Y') }}{% if stats.total > 0 %} · im Schnitt {{ (stats.total / stats.range)|number_format(stats.total / stats.range < 10 ? 1 : 0, ',', '.') }} am Tag{% endif %}</span>
+        <h2>Verlauf <span class="count">{{ stats.total }}</span></h2>
+        <span class="muted">Aufrufe je Tag, {{ stats.from|date('d.m.') }} bis heute</span>
     </div>
     <div class="card-body">
         {% if stats.total == 0 %}
@@ -25,26 +66,30 @@
         {% else %}
         {# Drawn by the server as an SVG: no chart library, no script, and it prints. The bars are
            coloured by class, not by a style attribute, because inline styles are forbidden here.
-           The numbers themselves are in the table below, which is what a screen reader reads. #}
-        <svg class="chart" viewBox="0 0 {{ stats.days|length * 12 }} 116" role="img"
+           The numbers themselves are in the table below, which is what a screen reader reads.
+           Jeder Balken traegt seinen Tag und seine Zahl als Titel - der Browser zeigt sie beim
+           Ueberfahren, ohne dass ein Skript etwas nachrechnen muss. #}
+        {% set width = stats.days|length * 12 %}
+        <svg class="chart chart-days" viewBox="0 0 {{ width }} 116" role="img"
              aria-label="{{ stats.total }} Aufrufe zwischen {{ stats.from|date('d.m.Y') }} und heute, höchster Tageswert {{ stats.busiest }}" preserveAspectRatio="none">
+            {% for line in [25, 50, 75] %}<line class="chart-grid" x1="0" y1="{{ line }}.5" x2="{{ width }}" y2="{{ line }}.5"></line>{% endfor %}
             {% for entry in stats.days %}
             {% set height = entry.count > 0 ? (entry.count / stats.busiest * 100)|round(1) : 0 %}
-            <rect class="chart-bar" x="{{ loop.index0 * 12 + 1 }}" y="{{ 100 - height }}" width="10" height="{{ height > 0 ? height : 0.6 }}" rx="1"></rect>
+            <rect class="chart-bar{{ entry.day == stats.busiestDay ? ' chart-bar-peak' : '' }}" x="{{ loop.index0 * 12 + 1 }}" y="{{ 100 - height }}" width="10" height="{{ height > 0 ? height : 0.6 }}" rx="1"><title>{{ entry.day|date('d.m.Y') }}: {{ entry.count }} {{ entry.count == 1 ? 'Aufruf' : 'Aufrufe' }}</title></rect>
             {% endfor %}
-            <line class="chart-axis" x1="0" y1="100.5" x2="{{ stats.days|length * 12 }}" y2="100.5"></line>
+            <line class="chart-axis" x1="0" y1="100.5" x2="{{ width }}" y2="100.5"></line>
         </svg>
-        <p class="chart-legend"><span>{{ stats.days|first.day|date('d.m.') }}</span><span>höchster Tag: {{ stats.busiest }}</span><span>{{ stats.days|last.day|date('d.m.') }}</span></p>
+        <p class="chart-legend"><span>{{ stats.days|first.day|date('d.m.') }}</span><span>Skala bis {{ stats.busiest }} · stärkster Tag hervorgehoben</span><span>{{ stats.days|last.day|date('d.m.') }}</span></p>
 
         <details class="chart-table">
             <summary>Zahlen je Tag</summary>
             <div class="table-wrap">
                 <table class="table">
                     <caption class="visually-hidden">Aufrufe je Tag im gewählten Zeitraum</caption>
-                    <thead><tr><th scope="col">Tag</th><th scope="col">Aufrufe</th></tr></thead>
+                    <thead><tr><th scope="col">Tag</th><th scope="col">Wochentag</th><th scope="col">Aufrufe</th></tr></thead>
                     <tbody>
                     {% for entry in stats.days|reverse %}
-                        <tr><td>{{ entry.day|date('d.m.Y') }}</td><td>{{ entry.count }}</td></tr>
+                        <tr><td>{{ entry.day|date('d.m.Y') }}</td><td>{{ weekdayShort[entry.day|date('N') - 1] }}</td><td>{{ entry.count }}</td></tr>
                     {% endfor %}
                     </tbody>
                 </table>
@@ -55,19 +100,38 @@
 </div>
 
 {% if stats.total > 0 %}
-<div class="card">
-    <div class="card-head"><h2>Tageszeit</h2><span class="muted">Summe je Stunde, nur die letzten {{ compactAfter }} Tage sind stundengenau</span></div>
-    <div class="card-body">
-        <svg class="chart chart-hours" viewBox="0 0 288 116" role="img" aria-label="Verteilung der Aufrufe über die Stunden des Tages" preserveAspectRatio="none">
+<div class="stats-columns stats-columns-2">
+    <div class="card">
+        <div class="card-head"><h2>Tageszeit</h2><span class="muted">Summe je Stunde</span></div>
+        <div class="card-body">
             {% set busiestHour = max(stats.hours|map(entry => entry.count)|filter(count => count > 0)|default([1])) %}
-            {% for entry in stats.hours %}
-            {% set height = entry.count > 0 ? (entry.count / busiestHour * 100)|round(1) : 0 %}
-            <rect class="chart-bar" x="{{ entry.hour * 12 + 1 }}" y="{{ 100 - height }}" width="10" height="{{ height > 0 ? height : 0.6 }}" rx="1"></rect>
-            {% endfor %}
-            <line class="chart-axis" x1="0" y1="100.5" x2="288" y2="100.5"></line>
-        </svg>
-        <p class="chart-legend"><span>0 Uhr</span><span>12 Uhr</span><span>23 Uhr</span></p>
-        <p class="field-help">Ältere Tage sind zu einem Tageswert zusammengefasst und erscheinen hier nicht. Das hält die Tabelle klein, kostet aber die Stunde – eine Entscheidung, keine Lücke.</p>
+            <svg class="chart chart-hours" viewBox="0 0 288 116" role="img" aria-label="Verteilung der Aufrufe über die Stunden des Tages" preserveAspectRatio="none">
+                {% for line in [25, 50, 75] %}<line class="chart-grid" x1="0" y1="{{ line }}.5" x2="288" y2="{{ line }}.5"></line>{% endfor %}
+                {% for entry in stats.hours %}
+                {% set height = entry.count > 0 ? (entry.count / busiestHour * 100)|round(1) : 0 %}
+                <rect class="chart-bar{{ entry.count == busiestHour and entry.count > 0 ? ' chart-bar-peak' : '' }}" x="{{ entry.hour * 12 + 1 }}" y="{{ 100 - height }}" width="10" height="{{ height > 0 ? height : 0.6 }}" rx="1"><title>{{ entry.hour }} bis {{ entry.hour + 1 }} Uhr: {{ entry.count }} {{ entry.count == 1 ? 'Aufruf' : 'Aufrufe' }}</title></rect>
+                {% endfor %}
+                <line class="chart-axis" x1="0" y1="100.5" x2="288" y2="100.5"></line>
+            </svg>
+            <p class="chart-legend"><span>0 Uhr</span><span>6</span><span>12 Uhr</span><span>18</span><span>23 Uhr</span></p>
+            <p class="field-help">Nur die letzten {{ compactAfter }} Tage sind stundengenau; ältere Tage sind zu einem Tageswert zusammengefasst und erscheinen hier nicht. Das hält die Tabelle klein, kostet aber die Stunde – eine Entscheidung, keine Lücke.</p>
+        </div>
+    </div>
+    <div class="card">
+        <div class="card-head"><h2>Wochentag</h2><span class="muted">Im Schnitt je Tag</span></div>
+        <div class="card-body">
+            {% set busiestWeekday = max(stats.weekdays|map(entry => entry.average)|filter(average => average > 0)|default([1])) %}
+            <svg class="chart chart-weekdays" viewBox="0 0 84 116" role="img" aria-label="Aufrufe je Wochentag im Schnitt" preserveAspectRatio="none">
+                {% for line in [25, 50, 75] %}<line class="chart-grid" x1="0" y1="{{ line }}.5" x2="84" y2="{{ line }}.5"></line>{% endfor %}
+                {% for entry in stats.weekdays %}
+                {% set height = entry.average > 0 ? (entry.average / busiestWeekday * 100)|round(1) : 0 %}
+                <rect class="chart-bar{{ entry.average == busiestWeekday and entry.average > 0 ? ' chart-bar-peak' : '' }}" x="{{ loop.index0 * 12 + 1 }}" y="{{ 100 - height }}" width="10" height="{{ height > 0 ? height : 0.6 }}" rx="1"><title>{{ weekdayNames[entry.weekday - 1] }}: im Schnitt {{ entry.average|number_format(1, ',', '.') }} Aufrufe ({{ entry.count }} gesamt)</title></rect>
+                {% endfor %}
+                <line class="chart-axis" x1="0" y1="100.5" x2="84" y2="100.5"></line>
+            </svg>
+            <p class="chart-legend chart-legend-even">{% for name in weekdayShort %}<span>{{ name }}</span>{% endfor %}</p>
+            <p class="field-help">Der Schnitt gleicht aus, dass ein Zeitraum nicht jeden Wochentag gleich oft enthält.</p>
+        </div>
     </div>
 </div>
 {% endif %}
@@ -75,7 +139,7 @@
 <div class="stats-columns">
     {% for group in [
         {title: 'Seiten', hint: 'Meistaufgerufen', rows: stats.pages, key: 'path', link: true},
-        {title: 'Verweise von außen', hint: 'Domain, die verlinkt hat', rows: stats.referrers, key: 'referrer_host', link: false},
+        {title: 'Verweise von außen', hint: 'Websites, die verlinkt haben', rows: stats.referrers, key: 'referrer_host', link: false},
         {title: 'Nicht gefundene Adressen', hint: 'Kandidaten für eine Weiterleitung', rows: stats.missing, key: 'path', link: false}
     ] %}
     <div class="card">
@@ -84,11 +148,14 @@
             {% if group.rows is empty %}
             <p class="muted">Keine Daten im Zeitraum.</p>
             {% else %}
+            {% set top = (group.rows|first).count %}
             <ol class="stats-list">
                 {% for row in group.rows %}
                 <li>
+                    <span class="stats-rank" aria-hidden="true">{{ loop.index }}</span>
                     {% if group.link %}<a href="{{ row[group.key] }}">{{ row[group.key] }}</a>{% else %}<span>{{ row[group.key] }}</span>{% endif %}
-                    <strong>{{ row.count }}</strong>
+                    <svg class="stats-share" viewBox="0 0 100 6" preserveAspectRatio="none" aria-hidden="true" focusable="false"><rect class="stats-share-bar" x="0" y="0" width="{{ (row.count / top * 100)|round(1) }}" height="6" rx="3"></rect></svg>
+                    <strong>{{ row.count|number_format(0, ',', '.') }}</strong>
                 </li>
                 {% endfor %}
             </ol>
@@ -98,14 +165,14 @@
     {% endfor %}
 </div>
 
-<div class="card">
-    <div class="card-head"><h2>Was diese Zahlen nicht sagen</h2><span class="muted">Ehrlich statt vollständig</span></div>
+<details class="card">
+    <summary>Was diese Zahlen nicht sagen</summary>
     <div class="card-body">
         <p class="muted">Gezählt werden <strong>Aufrufe</strong>, nicht Besucher: ohne Wiedererkennung lässt sich nicht sagen, ob zehn Aufrufe von zehn Personen oder von einer kommen. Es gibt deshalb auch keine Verweildauer, keine Absprungrate, keinen Klickweg durch die Website und kein Land. All das braucht ein Merkmal, das eine Person wiedererkennbar macht – und damit eine Einwilligung.</p>
         <p class="field-help">Erkennbare Suchmaschinen und Überwachungsdienste werden anhand ihrer Kennung ausgeschlossen. Das ist eine Heuristik: wer sich als Browser ausgibt, wird mitgezählt. Die Zahl ist also „Aufrufe, die sich nicht als Maschine gemeldet haben“, nicht „Menschen“. Erfundene Adressen von Crawlern laufen gesammelt unter <code>(sonstige)</code>, damit die Tabelle nicht mit tausenden Zeilen wächst.</p>
         <p class="field-help">Aufbewahrt wird {{ keepDays }} Tage, damit ein Vergleich mit dem Vorjahresmonat möglich bleibt. Danach wird gelöscht.</p>
     </div>
-</div>
+</details>
 
 <p class="footnote">KantSites · Arbeitsstand</p>
 {% endblock %}

templates/admin/theme.html.twig

@@ -1,122 +1,214 @@
 {% extends 'admin/shell.html.twig' %}
 {% set nav = 'theme' %}
-{% block styles %}<link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/button-controls.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}">{% endblock %}
-{% block scripts %}<script type="module" src="/assets/theme-buttons.js?v={{ kant_version() }}"></script>{% endblock %}
+{# Die lokalen Schriftdateien, sofern es sie gibt: dann zeigt die Vorschau jede Google-Schrift so,
+   wie die Website sie ausliefert. Von Google selbst wird hier nichts geladen. #}
+{% block styles %}<link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/button-controls.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}">{% if fontsStylesheet %}<link rel="stylesheet" href="/assets/fonts/fonts.css?v={{ kant_version() }}">{% endif %}{% endblock %}
+{% block scripts %}<script type="module" src="/assets/theme-panel.js?v={{ kant_version() }}"></script><script type="module" src="/assets/theme-buttons.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block title %}Design{% endblock %}
 {% block heading %}Farben, Schriften, Grundtypografie{% endblock %}
 {% block lead %}Das ist die Grundlage für die ganze Website. Jeder Block erbt von hier und kann jeden Wert einzeln überschreiben – je Gerät und beim Überfahren.{% endblock %}
-{% block content %}
-<form action="{{ path('admin_theme_save') }}" method="post" class="card card-body theme-form">
-    <input type="hidden" name="_csrf_token" value="{{ csrf_token('theme') }}">
 
-    <div class="section-head"><h2>Farbpalette <span class="count">{{ theme.colors|length }}</span></h2><span class="muted">Beliebig viele eigene Farben</span></div>
-    <table class="table theme-table">
-        <caption class="visually-hidden">Farben der Website. Einen Schlüssel zu leeren entfernt die Farbe.</caption>
-        <thead><tr><th scope="col">Schlüssel</th><th scope="col">Name</th><th scope="col">Farbe</th><th scope="col">Wert</th></tr></thead>
-        <tbody>
-        {% for row in theme.colors|merge([{key: '', name: '', value: '#000000'}, {key: '', name: '', value: '#000000'}, {key: '', name: '', value: '#000000'}]) %}
-            {% set n = loop.index0 %}
-            <tr{% if row.key == '' %} class="table-new"{% endif %}>
-                <td><input name="colors[{{ n }}][key]" maxlength="32" value="{{ row.key }}" pattern="[a-z][a-z0-9-]*" aria-label="Schlüssel von Farbe {{ n + 1 }}" placeholder="akzent"></td>
-                <td><input name="colors[{{ n }}][name]" maxlength="60" value="{{ row.name }}" aria-label="Name von Farbe {{ n + 1 }}" placeholder="Akzent"></td>
-                <td><input type="color" name="colors[{{ n }}][value]" value="{{ row.value }}" aria-label="Farbwähler für Farbe {{ n + 1 }}" class="theme-swatch"></td>
-                <td><code>{{ row.value }}</code></td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
-    <p class="field-help">Der Schlüssel wird im Editor als <code>@schlüssel</code> verwendet und bleibt bei Farbänderungen gleich – eine Farbe ändern wirkt überall, wo sie benutzt wird.</p>
-
-    <div class="section-head"><h2>Schriften <span class="count">{{ theme.fonts|length }}</span></h2><span class="muted">Systemschrift oder Google Fonts</span></div>
-    <table class="table theme-table">
-        <caption class="visually-hidden">Schriften der Website. Einen Schlüssel zu leeren entfernt die Schrift.</caption>
-        <thead><tr><th scope="col">Schlüssel</th><th scope="col">Name</th><th scope="col">Quelle</th><th scope="col">Schriftname</th><th scope="col">Ersatz</th><th scope="col">Schnitte</th></tr></thead>
-        <tbody>
-        {% for row in theme.fonts|merge([{key: '', name: '', family: '', source: 'google', fallback: 'sans-serif', weights: [400, 700]}]) %}
-            {% set n = loop.index0 %}
-            <tr{% if row.key == '' %} class="table-new"{% endif %}>
-                <td><input name="fonts[{{ n }}][key]" maxlength="40" value="{{ row.key }}" pattern="[a-z][a-z0-9-]*" aria-label="Schlüssel von Schrift {{ n + 1 }}" placeholder="heading"></td>
-                <td><input name="fonts[{{ n }}][name]" maxlength="60" value="{{ row.name }}" aria-label="Name von Schrift {{ n + 1 }}" placeholder="Überschriften"></td>
-                <td>
-                    <select name="fonts[{{ n }}][source]" aria-label="Quelle von Schrift {{ n + 1 }}">
-                        <option value="system"{{ row.source == 'system' ? ' selected' : '' }}>Systemschrift</option>
-                        <option value="google"{{ row.source == 'google' ? ' selected' : '' }}>Google Fonts</option>
-                    </select>
-                </td>
-                <td><input name="fonts[{{ n }}][family]" maxlength="48" value="{{ row.family }}" aria-label="Schriftname von Schrift {{ n + 1 }}" placeholder="Inter"></td>
-                <td>
-                    <select name="fonts[{{ n }}][fallback]" aria-label="Ersatzschrift von Schrift {{ n + 1 }}">
-                        {% for value, label in fallbacks %}<option value="{{ value }}"{{ row.fallback == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
-                    </select>
-                </td>
-                <td class="weights-cell">
-                    {% for weight in weights %}
-                    <label><input type="checkbox" name="fonts[{{ n }}][weights][]" value="{{ weight }}"{{ weight in row.weights ? ' checked' : '' }}> {{ weight }}</label>
-                    {% endfor %}
-                </td>
-            </tr>
-        {% endfor %}
-        </tbody>
-    </table>
-    <p class="field-help">Bei Google Fonts den Namen genau wie dort schreiben, zum Beispiel <code>Inter</code> oder <code>Playfair Display</code>. Je Schnitt wird eine Datei geladen – nur ankreuzen, was wirklich gebraucht wird. <strong>Google Fonts bedeutet eine Anfrage an Google bei jedem Seitenaufruf.</strong></p>
-
-    <div class="section-head"><h2>Grundtypografie</h2><span class="muted">Gilt überall, solange ein Block nichts anderes sagt</span></div>
-    <div class="fields">
+{# Eine Farbe der Palette als Karte: der Farbwähler ist die Fläche selbst. #}
+{% macro color(n, row) %}
+<li class="swatch-card{{ row.key == '' ? ' swatch-card-new' : '' }}" data-color-card>
+    <label class="swatch-well" for="color-{{ n }}-value">
+        <input type="color" id="color-{{ n }}-value" name="colors[{{ n }}][value]" value="{{ row.value }}" class="swatch-input" aria-label="Farbwert von Farbe {{ n }}" data-color-value>
+        <code class="swatch-hex" data-color-hex>{{ row.value }}</code>
+    </label>
+    <div class="swatch-fields">
         <div>
-            <label for="base-font">Schrift für Fließtext</label>
-            <select id="base-font" name="base[fontFamily]">
-                {% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.base.fontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}
-            </select>
+            <label for="color-{{ n }}-name">Name</label>
+            <input id="color-{{ n }}-name" name="colors[{{ n }}][name]" maxlength="60" value="{{ row.name }}" placeholder="Akzent" data-color-name>
         </div>
         <div>
-            <label for="base-heading-font">Schrift für Überschriften</label>
-            <select id="base-heading-font" name="base[headingFontFamily]">
-                {% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.base.headingFontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}
-            </select>
-        </div>
-        <div>
-            <label for="base-size">Grundgröße</label>
-            <input id="base-size" name="base[fontSize]" value="{{ theme.base.fontSize }}" placeholder="18px">
-        </div>
-        <div>
-            <label for="base-line">Zeilenhöhe</label>
-            <input id="base-line" name="base[lineHeight]" type="number" step="0.05" min="0.8" max="3" value="{{ theme.base.lineHeight }}">
-        </div>
-        <div>
-            <label for="base-scale">Überschriftenskala</label>
-            <input id="base-scale" name="base[headingScale]" type="number" step="0.01" min="1" max="2" value="{{ theme.base.headingScale }}">
-            <p class="field-help">1,25 ergibt eine ruhige Staffelung, 1,5 eine sehr kontrastreiche.</p>
-        </div>
-        <div>
-            <label class="check-label" for="base-underline"><input id="base-underline" name="base[linkUnderline]" type="checkbox" value="1"{{ (theme.base.linkUnderline ?? true) ? ' checked' : '' }}> Links im Fließtext unterstreichen</label>
-            <p class="field-help">Aus sieht ruhiger aus, aber dann erkennt man einen Link im Text nur an der Farbe – für Menschen mit Farbsehschwäche also gar nicht. Beim Überfahren erscheint der Strich in beiden Fällen. Menüs, Karten und Schaltflächen sind davon nicht betroffen.</p>
-        </div>
-        <div>
-            <label for="base-container">Inhaltsbreite</label>
-            <input id="base-container" name="base[containerWidth]" value="{{ theme.base.containerWidth }}" placeholder="1240px">
-            <p class="field-help">Die Breite des Inhalts auf allen Seiten. Abschnitte mit der Inhaltsbreite „Breit“ oder „Randlos“ halten sich nicht daran – das ist der Zweck dieser beiden.</p>
-        </div>
-        <div>
-            <label for="base-color">Textfarbe</label>
-            <input id="base-color" name="base[color]" value="{{ theme.base.color }}" placeholder="@ink" data-color data-palette="{{ theme.colors|json_encode|e('html_attr') }}">
-        </div>
-        <div>
-            <label for="base-bg">Hintergrundfarbe</label>
-            <input id="base-bg" name="base[backgroundColor]" value="{{ theme.base.backgroundColor }}" placeholder="@paper" data-color data-palette="{{ theme.colors|json_encode|e('html_attr') }}">
-        </div>
-        <div>
-            <label for="base-link">Linkfarbe</label>
-            <input id="base-link" name="base[linkColor]" value="{{ theme.base.linkColor }}" placeholder="@accent" data-color data-palette="{{ theme.colors|json_encode|e('html_attr') }}">
+            <label for="color-{{ n }}-key">Schlüssel</label>
+            <input id="color-{{ n }}-key" name="colors[{{ n }}][key]" maxlength="32" value="{{ row.key }}" pattern="[a-z][a-z0-9\-]*" placeholder="akzent" data-color-key>
         </div>
     </div>
-    <p class="field-help">Farben entweder als <code>@schlüssel</code> aus der Palette oder als Wert wie <code>#1a2b3c</code>.</p>
+    <button type="button" class="field-remove" data-remove-color hidden aria-label="Farbe entfernen" title="Farbe entfernen">{% include 'admin/icon.html.twig' with {name: 'remove'} only %}</button>
+</li>
+{% endmacro %}
+
+{# Eine Schrift als Karte: oben die Probe in der Schrift selbst, darunter die Einstellungen. #}
+{% macro font(n, row, fallbacks, weights) %}
+<li class="font-card{{ row.key == '' ? ' font-card-new' : '' }}" data-font-card>
+    <div class="font-sample" data-font-sample>
+        <span class="font-sample-big" aria-hidden="true">Aa</span>
+        <span class="font-sample-line">
+            <span class="font-sample-text">Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.</span>
+            <span class="font-sample-weights" data-font-weights>{% for weight in weights %}<span class="font-weight-{{ weight }}"{{ weight in row.weights ? '' : ' hidden' }}>{{ weight }}</span>{% endfor %}</span>
+        </span>
+    </div>
+    <div class="font-fields">
+        <div>
+            <label for="font-{{ n }}-name">Name</label>
+            <input id="font-{{ n }}-name" name="fonts[{{ n }}][name]" maxlength="60" value="{{ row.name }}" placeholder="Überschriften" data-font-name>
+        </div>
+        <div>
+            <label for="font-{{ n }}-key">Schlüssel</label>
+            <input id="font-{{ n }}-key" name="fonts[{{ n }}][key]" maxlength="40" value="{{ row.key }}" pattern="[a-z][a-z0-9\-]*" placeholder="heading" data-font-key>
+        </div>
+        <div>
+            <label for="font-{{ n }}-source">Quelle</label>
+            <select id="font-{{ n }}-source" name="fonts[{{ n }}][source]" data-font-source>
+                <option value="system"{{ row.source == 'system' ? ' selected' : '' }}>Systemschrift</option>
+                <option value="google"{{ row.source == 'google' ? ' selected' : '' }}>Google Fonts</option>
+            </select>
+        </div>
+        <div>
+            <label for="font-{{ n }}-family">Schriftname</label>
+            <input id="font-{{ n }}-family" name="fonts[{{ n }}][family]" maxlength="48" value="{{ row.family }}" placeholder="Inter" data-font-family>
+        </div>
+        <div>
+            <label for="font-{{ n }}-fallback">Ersatzschrift</label>
+            <select id="font-{{ n }}-fallback" name="fonts[{{ n }}][fallback]" data-font-fallback>
+                {% for value, label in fallbacks %}<option value="{{ value }}"{{ row.fallback == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
+            </select>
+        </div>
+        <fieldset class="font-weights">
+            <legend>Schnitte</legend>
+            {% for weight in weights %}
+            <label class="chip"><input type="checkbox" name="fonts[{{ n }}][weights][]" value="{{ weight }}"{{ weight in row.weights ? ' checked' : '' }} data-font-weight> {{ weight }}</label>
+            {% endfor %}
+        </fieldset>
+    </div>
+    <button type="button" class="field-remove" data-remove-font hidden aria-label="Schrift entfernen" title="Schrift entfernen">{% include 'admin/icon.html.twig' with {name: 'remove'} only %}</button>
+</li>
+{% endmacro %}
+
+{% block content %}
+{% import _self as karte %}
+{% set emptyColor = {key: '', name: '', value: '#4a7c59'} %}
+{% set emptyFont = {key: '', name: '', family: '', source: 'google', fallback: 'sans-serif', weights: [400, 700]} %}
+<form action="{{ path('admin_theme_save') }}" method="post" class="theme-form stack" data-theme-editor data-palettes="{{ palettes|json_encode|e('html_attr') }}" data-color-names="{{ colorNames|json_encode|e('html_attr') }}">
+    <input type="hidden" name="_csrf_token" value="{{ csrf_token('theme') }}">
+
+    <section class="card">
+        <div class="card-head">
+            <h2>Farbpalette <span class="count" data-color-count>{{ theme.colors|length }}</span></h2>
+            <span class="muted">Jede Farbe hat einen Schlüssel – im Editor als <code>@schlüssel</code>, und eine Änderung hier wirkt überall</span>
+        </div>
+        <div class="card-body">
+            <div class="palette-presets" role="group" aria-label="Fertige Paletten" hidden data-palette-presets>
+                <span class="palette-presets-label">Fertige Palette übernehmen</span>
+                <div class="palette-preset-row">
+                {% for preset in palettes %}
+                    <button type="button" class="palette-preset" data-palette-preset="{{ loop.index0 }}" aria-label="Palette {{ preset.name }} übernehmen">
+                        <svg viewBox="0 0 50 14" aria-hidden="true" focusable="false">{% for key, value in preset.colors %}<rect x="{{ loop.index0 * 10 }}" y="0" width="10" height="14" fill="{{ value }}"></rect>{% endfor %}</svg>
+                        <span>{{ preset.name }}</span>
+                    </button>
+                {% endfor %}
+                </div>
+                <p class="field-help" data-palette-status role="status">Ersetzt die fünf Grundfarben; eigene Farben bleiben. Gilt erst nach dem Speichern.</p>
+            </div>
+            <ul class="swatch-list" data-color-list>
+                {% for row in theme.colors|merge([emptyColor, emptyColor]) %}{{ karte.color(loop.index0, row) }}{% endfor %}
+            </ul>
+            <template data-color-template>{{ karte.color('__n__', emptyColor) }}</template>
+            <div class="list-actions">
+                <button type="button" class="secondary" data-add-color hidden>{% include 'admin/icon.html.twig' with {name: 'plus'} only %}Farbe hinzufügen</button>
+                <p class="field-help">Eine Farbe ohne Schlüssel wird nicht gespeichert – so lässt sich eine Farbe auch ohne Skript entfernen. Die beiden leeren Karten sind für neue Farben.</p>
+            </div>
+        </div>
+    </section>
+
+    <section class="card">
+        <div class="card-head">
+            <h2>Schriften <span class="count" data-font-count>{{ theme.fonts|length }}</span></h2>
+            <span class="muted">Systemschrift oder Google Fonts – ausgeliefert vom eigenen Server</span>
+        </div>
+        <div class="card-body">
+            <ul class="font-list" data-font-list>
+                {% for row in theme.fonts|merge([emptyFont]) %}{{ karte.font(loop.index0, row, fallbacks, weights) }}{% endfor %}
+            </ul>
+            <template data-font-template>{{ karte.font('__n__', emptyFont, fallbacks, weights) }}</template>
+            <div class="list-actions">
+                <button type="button" class="secondary" data-add-font hidden>{% include 'admin/icon.html.twig' with {name: 'plus'} only %}Schrift hinzufügen</button>
+                <p class="field-help">Bei Google Fonts den Namen genau wie dort schreiben, zum Beispiel <code>Inter</code> oder <code>Playfair Display</code>. Je Schnitt wird eine Datei geladen – nur ankreuzen, was wirklich gebraucht wird. {% if fontsStylesheet %}Die Probe nutzt die Schriftdateien auf diesem Server; eine neue Schrift erscheint darin erst, wenn sie unten geholt wurde.{% else %}Die Probe zeigt eine Google-Schrift erst, wenn sie unten auf diesen Server geholt wurde.{% endif %}</p>
+            </div>
+        </div>
+    </section>
+
+    <section class="card">
+        <div class="card-head">
+            <h2>Grundtypografie</h2>
+            <span class="muted">Gilt überall, solange ein Block nichts anderes sagt</span>
+        </div>
+        <div class="card-body type-layout">
+            <div class="type-fields">
+                <div class="fields">
+                    <div>
+                        <label for="base-font">Schrift für Fließtext</label>
+                        <select id="base-font" name="base[fontFamily]" data-font-select>
+                            {% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.base.fontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}
+                        </select>
+                    </div>
+                    <div>
+                        <label for="base-heading-font">Schrift für Überschriften</label>
+                        <select id="base-heading-font" name="base[headingFontFamily]" data-font-select>
+                            {% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.base.headingFontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}
+                        </select>
+                    </div>
+                    <div>
+                        <label for="base-size">Grundgröße</label>
+                        <input id="base-size" name="base[fontSize]" value="{{ theme.base.fontSize }}" placeholder="18px">
+                    </div>
+                    <div>
+                        <label for="base-line">Zeilenhöhe</label>
+                        <input id="base-line" name="base[lineHeight]" type="number" step="0.05" min="0.8" max="3" value="{{ theme.base.lineHeight }}">
+                    </div>
+                    <div>
+                        <label for="base-scale">Überschriftenskala</label>
+                        <input id="base-scale" name="base[headingScale]" type="number" step="0.01" min="1" max="2" value="{{ theme.base.headingScale }}">
+                        <p class="field-help">1,25 ergibt eine ruhige Staffelung, 1,5 eine sehr kontrastreiche.</p>
+                    </div>
+                    <div>
+                        <label for="base-container">Inhaltsbreite</label>
+                        <input id="base-container" name="base[containerWidth]" value="{{ theme.base.containerWidth }}" placeholder="1240px">
+                        <p class="field-help">Abschnitte mit der Inhaltsbreite „Breit“ oder „Randlos“ halten sich nicht daran – das ist der Zweck dieser beiden.</p>
+                    </div>
+                </div>
+                <div class="fields type-colors">
+                    <div>
+                        <label for="base-color">Textfarbe</label>
+                        <input id="base-color" name="base[color]" value="{{ theme.base.color }}" placeholder="@ink" data-base-color>
+                    </div>
+                    <div>
+                        <label for="base-bg">Seitenfarbe</label>
+                        <input id="base-bg" name="base[backgroundColor]" value="{{ theme.base.backgroundColor }}" placeholder="@paper" data-base-color>
+                    </div>
+                    <div>
+                        <label for="base-link">Linkfarbe</label>
+                        <input id="base-link" name="base[linkColor]" value="{{ theme.base.linkColor }}" placeholder="@accent" data-base-color>
+                    </div>
+                </div>
+                <p class="field-help">Aus der Palette wählen oder eine eigene Farbe eintragen. Eine Palettenfarbe folgt späteren Änderungen an der Palette, eine eigene bleibt, wie sie ist.</p>
+                <div class="field-wide">
+                    <label class="check-label" for="base-underline"><input id="base-underline" name="base[linkUnderline]" type="checkbox" value="1"{{ (theme.base.linkUnderline ?? true) ? ' checked' : '' }} data-base-underline> Links im Fließtext unterstreichen</label>
+                    <p class="field-help">Aus sieht ruhiger aus, aber dann erkennt man einen Link im Text nur an der Farbe – für Menschen mit Farbsehschwäche also gar nicht. Beim Überfahren erscheint der Strich in beiden Fällen. Menüs, Karten und Schaltflächen sind davon nicht betroffen.</p>
+                </div>
+            </div>
+            {# Die Probe: so liest sich die Website mit diesen Werten. Ohne Skript in der Schrift
+               der Verwaltung, mit Skript in Schrift, Größe, Zeilenhöhe und Farben von hier. #}
+            <aside class="type-preview-column" aria-label="Vorschau der Grundtypografie">
+                <h3 class="form-part">Vorschau</h3>
+                <div class="type-preview" data-type-preview>
+                    <p class="type-preview-h1" data-type-h1>Überschrift der Seite</p>
+                    <p class="type-preview-h2" data-type-h2>Ein Abschnitt darunter</p>
+                    <p class="type-preview-p" data-type-p>Fließtext in der Grundgröße, mit <span class="type-preview-link" data-type-link>einem Link im Text</span> und genug Zeilen, um die Zeilenhöhe zu sehen. Gute Typografie fällt nicht auf – sie liest sich einfach leicht.</p>
+                </div>
+                <p class="field-help">Überschriften folgen der Skala: die erste Ebene ist vier Stufen über der Grundgröße, die zweite drei.</p>
+            </aside>
+        </div>
+    </section>
+
     <fieldset class="button-defaults" id="button-defaults" data-schema="{{ {colors: theme.colors, fonts: theme.fonts, buttonPresets: buttonPresets}|json_encode|e('html_attr') }}">
         <legend>Standardbutton</legend>
         <p class="field-help">Die Grundlage für alle Button-Elemente. Eigene Varianten und Gestaltung im Editor haben Vorrang.</p>
         <div class="button-defaults-layout">
             <div class="fields">
                 {% for key, options in buttonOptions %}<div><label for="buttons-{{ key }}">{{ {shape: 'Form', appearance: 'Darstellung', size: 'Button-Größe'}[key] }}</label><select id="buttons-{{ key }}" name="buttons[{{ key }}]">{% for value, label in options %}<option value="{{ value }}"{{ theme.buttons[key] == value ? ' selected' : '' }}>{{ label }}</option>{% endfor %}</select></div>{% endfor %}
-                <div><label for="buttons-fontFamily">Button-Schrift</label><select id="buttons-fontFamily" name="buttons[fontFamily]"><option value="inherit">Schrift der Umgebung übernehmen</option>{% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.buttons.fontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}</select></div>
+                <div><label for="buttons-fontFamily">Button-Schrift</label><select id="buttons-fontFamily" name="buttons[fontFamily]" data-font-select><option value="inherit">Schrift der Umgebung übernehmen</option>{% for font in theme.fonts %}<option value="{{ font.key }}"{{ theme.buttons.fontFamily == font.key ? ' selected' : '' }}>{{ font.name }}</option>{% endfor %}</select></div>
                 <div><label for="buttons-fontSize">Button-Schriftgröße (px)</label><input id="buttons-fontSize" type="number" min="10" max="72" step="0.5" name="buttons[fontSize]" value="{{ theme.buttons.fontSize }}"></div>
                 <div><label for="buttons-fontWeight">Button-Schriftstärke</label><select id="buttons-fontWeight" name="buttons[fontWeight]">{% for weight in weights %}<option value="{{ weight }}"{{ theme.buttons.fontWeight == weight ? ' selected' : '' }}>{{ weight }}</option>{% endfor %}</select></div>
                 <div><label for="buttons-letterSpacing">Buchstabenabstand (px)</label><input id="buttons-letterSpacing" type="number" min="-1" max="8" step="0.1" name="buttons[letterSpacing]" value="{{ theme.buttons.letterSpacing }}"></div>
@@ -126,7 +218,10 @@
             <div class="button-preview-column"><h3>Live-Vorschau</h3><div class="button-state-previews" aria-label="Standardbutton-Vorschau"></div><div class="button-preset-grid" role="group" aria-label="Standardbutton-Vorlagen">{% for preset in buttonPresets %}<button type="button" class="button-preset" data-button-preset aria-label="Standardbutton {{ preset.name }}"><span class="button-preset-label">{{ preset.name }}</span></button>{% endfor %}</div></div>
         </div>
     </fieldset>
-    <button class="primary" type="submit">Design speichern</button>
+    <div class="theme-save">
+        <button class="primary" type="submit">Design speichern</button>
+        <span class="muted">Gilt sofort auf allen Seiten.</span>
+    </div>
 </form>
 
 <div class="card">

templates/archive.html.twig

@@ -26,7 +26,7 @@
 <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' : '' }}{{ siteSettings.load().headerOverlay ? ' is-overlay' : '' }}">
+    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}{{ siteSettings.load().headerOverlay ? ' is-overlay' : '' }}{{ kant_header_surface(areas.header) ? ' has-own-surface' : '' }}">
         {% 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/form.html.twig

@@ -4,7 +4,7 @@
 {% elseif sent %}
     <p class="form-success" role="status">{{ form.settings.success }}</p>
 {% else %}
-<form class="block-form" method="post" action="{{ path('form_submit', {slug: form.slug}) }}" novalidate>
+<form class="block-form" data-form="{{ form.slug }}" method="post" action="{{ path('form_submit', {slug: form.slug}) }}" novalidate>
     <input type="hidden" name="page" value="{{ page.path }}">
     <input type="hidden" name="block" value="{{ blockId }}">
     <input type="hidden" name="issued" value="{{ issued }}">
@@ -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 cms-button" type="submit">Absenden</button>
+    <button class="button cms-button" type="submit">{{ form.settings.buttonLabel|default('Absenden') }}</button>
 </form>
 {% endif %}

templates/page.html.twig

@@ -77,7 +77,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' : '' }}{{ siteSettings.load().headerOverlay ? ' is-overlay' : '' }}">
+    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}{{ siteSettings.load().headerOverlay ? ' is-overlay' : '' }}{{ kant_header_surface(areas.header) ? ' has-own-surface' : '' }}">
         {% 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/CmsTest.php

@@ -810,6 +810,29 @@ final class CmsTest extends TestCase
         self::assertStringContainsString('class="site-header is-sticky"', $this->request('/')->getContent());
     }
 
+    /**
+     * Ein Kopfbereich mit eigener Fläche bekommt keine zweite dahinter.
+     *
+     * Beim Nachbau der Tagespflege war die Sektion beim Scrollen auf #ffffff00 gestellt und blieb
+     * trotzdem weiß: der klebende Kopf malte seine eigene Fläche und Schattenlinie darunter.
+     */
+    public function testAHeaderThatPaintsItsOwnSurfaceGetsNoSecondOne(): void
+    {
+        $settings = $this->site->load();
+        $this->site->save([...$settings, 'stickyHeader' => true, 'sameAs' => '', 'consentGroups' => $settings['consentGroups']]);
+        self::assertStringContainsString('class="site-header is-sticky"', $this->request('/')->getContent(), 'Ohne eigene Fläche bleibt die weiße des Kopfes.');
+
+        self::assertTrue(\App\Twig\HeaderExtension::ownSurface(['blocks' => [['id' => 's', 'type' => 'section', 'style' => ['desktop' => ['scrolled' => ['backgroundColor' => '#ffffff00']]]]]]));
+        self::assertTrue(\App\Twig\HeaderExtension::ownSurface(['blocks' => [['id' => 's', 'type' => 'section', 'style' => ['mobile' => ['backgroundColor' => '#294655']]]]]));
+        // Eine Textfarbe ist keine Fläche, und ein Kasten in einer Spalte macht noch keinen Kopf.
+        self::assertFalse(\App\Twig\HeaderExtension::ownSurface(['blocks' => [['id' => 's', 'type' => 'section', 'style' => ['desktop' => ['color' => '#294655']]]]]));
+        self::assertFalse(\App\Twig\HeaderExtension::ownSurface(['blocks' => [['id' => 's', 'type' => 'section', 'children' => [['id' => 'c', 'type' => 'column', 'style' => ['desktop' => ['backgroundColor' => '#ffffff']]]]]]]));
+        self::assertFalse(\App\Twig\HeaderExtension::ownSurface(null));
+
+        $css = (string) file_get_contents(__DIR__.'/../public/assets/site.css');
+        self::assertStringContainsString('.site-header.is-sticky.has-own-surface{background:transparent;box-shadow:none}', $css);
+    }
+
     /** @return iterable<string, array{string, bool}> */
     public static function imageLinks(): iterable
     {

tests/EditorSecurityTest.php

@@ -10,6 +10,8 @@ use App\Content\MenuRepository;
 use App\Content\PageRepository;
 use App\Content\PartialRepository;
 use App\Content\SiteSettings;
+use App\Content\Theme;
+use App\Domain\InvalidForm;
 use App\Infrastructure\ConnectionFactory;
 use App\Kernel;
 use App\Security\UserProvider;
@@ -321,7 +323,8 @@ final class EditorSecurityTest extends WebTestCase
         self::assertSame('Neu', $this->db->fetchOne('SELECT name FROM menu WHERE slot = ?', ['header']));
     }
 
-    private function contactForm(): FormRepository
+    /** @param array<string, string> $settings overrides for the mail settings */
+    private function contactForm(array $settings = []): FormRepository
     {
         $forms = new FormRepository($this->db);
         $forms->save('kontakt', 'Kontakt', [
@@ -330,7 +333,7 @@ final class EditorSecurityTest extends WebTestCase
             ['name' => 'thema', 'type' => 'select', 'label' => 'Thema', 'required' => true, 'options' => ['Beratung', 'Support']],
             ['name' => 'nachricht', 'type' => 'textarea', 'label' => 'Nachricht', 'required' => false],
             ['name' => 'datenschutz', 'type' => 'consent', 'label' => 'Ich willige ein.'],
-        ], ['recipient' => 'info@kant-it.de', 'subject' => 'Anfrage', 'replyToField' => 'email', 'success' => 'Danke.'], 0);
+        ], ['recipient' => 'info@kant-it.de', 'subject' => 'Anfrage', 'replyToField' => 'email', 'success' => 'Danke.', ...$settings], 0);
 
         return $forms;
     }
@@ -379,6 +382,12 @@ final class EditorSecurityTest extends WebTestCase
         // Post/Redirect/Get, so reloading the result page sends nothing twice.
         self::assertResponseStatusCodeSame(303);
         self::assertStringContainsString('?gesendet=kontakt#formblock', (string) $client->getResponse()->headers->get('Location'));
+        // Ohne eigene Absenderadresse geht die Post vom Empfaenger an sich selbst.
+        $mail = self::getMailerMessage();
+        self::assertNotNull($mail);
+        self::assertEmailAddressContains($mail, 'From', 'info@kant-it.de');
+        self::assertEmailAddressContains($mail, 'To', 'info@kant-it.de');
+        self::assertEmailAddressContains($mail, 'Reply-To', 'umut@example.com');
 
         $row = $this->db->fetchAssociative('SELECT * FROM form_submission');
         self::assertNotFalse($row);
@@ -395,6 +404,33 @@ final class EditorSecurityTest extends WebTestCase
         self::assertStringContainsString('Danke.', $client->getResponse()->getContent());
     }
 
+    public function testAFormMaySendFromItsOwnAddress(): void
+    {
+        // Umut: die Versandadresse soll sich festlegen lassen - bisher war sie immer der
+        // Empfaenger, und manche Hoster nehmen fremde Absender gar nicht erst an.
+        $forms = $this->contactForm(['sender' => 'formular@kant-it.de']);
+        $this->pageWithForm();
+        $client = self::createClient();
+
+        $client->request('POST', '/formular/kontakt', $this->validBody((string) (time() - 10)));
+        self::assertResponseStatusCodeSame(303);
+        $mail = self::getMailerMessage();
+        self::assertNotNull($mail);
+        self::assertEmailAddressContains($mail, 'From', 'formular@kant-it.de');
+        self::assertEmailAddressContains($mail, 'To', 'info@kant-it.de');
+        self::assertEmailAddressContains($mail, 'Reply-To', 'umut@example.com');
+
+        // Eine kaputte Absenderadresse wird abgewiesen, eine leere bedeutet: wie der Empfaenger.
+        try {
+            $forms->save('kontakt', 'Kontakt', [['name' => 'email', 'type' => 'email', 'label' => 'E-Mail']], ['recipient' => 'info@kant-it.de', 'sender' => 'kein-postfach'], 1);
+            self::fail('Eine ungueltige Absenderadresse darf nicht gespeichert werden.');
+        } catch (InvalidForm $e) {
+            self::assertStringContainsString('Absenderadresse', $e->getMessage());
+        }
+        $forms->save('kontakt', 'Kontakt', [['name' => 'email', 'type' => 'email', 'label' => 'E-Mail']], ['recipient' => 'info@kant-it.de', 'sender' => ' '], 1);
+        self::assertSame('', $forms->findBySlug('kontakt')['settings']['sender']);
+    }
+
     public function testInvalidSubmissionKeepsEveryEntryAndNamesTheOffendingFields(): void
     {
         $this->contactForm();
@@ -474,6 +510,46 @@ final class EditorSecurityTest extends WebTestCase
         self::assertTrue($forms->rateLimited(hash_hmac('sha256', '127.0.0.1', 'isolated-test-secret')));
     }
 
+    public function testAFormCarriesItsOwnColoursOntoThePageAndTheAdministrationRefusesBadOnes(): void
+    {
+        $forms = $this->contactForm();
+        $form = $forms->findBySlug('kontakt');
+        // Ohne Gestaltung keine Regel: die Website gilt.
+        self::assertSame('', $forms->css($form, (new Theme($this->db))->load()));
+        $forms->save('kontakt', 'Kontakt', $form['fields'], [...$form['settings'], 'buttonLabel' => 'Anfrage senden', 'fieldBorderColor' => '@ink', 'fieldBackgroundColor' => '#fffdf7', 'buttonColor' => '#124b36'], $form['version']);
+        $this->pageWithForm();
+
+        $client = $this->login('editor');
+        $crawler = $client->request('GET', '/');
+        self::assertResponseIsSuccessful();
+        $html = (string) $client->getResponse()->getContent();
+        self::assertSame('kontakt', $crawler->filter('.block-form')->attr('data-form'));
+        self::assertSame('Anfrage senden', $crawler->filter('.block-form button[type="submit"]')->text());
+        // Rahmen und Grund der Felder direkt, der Button ueber die Token des Standardbuttons - und
+        // die Ableitung der Darstellung noch einmal, damit sie diese Fuellung nimmt, nicht die vom
+        // Wurzelelement.
+        preg_match('/\.block-form\[data-form="kontakt"\]\{([^}]*)\}/', $html, $rule);
+        self::assertStringContainsString('--form-border:var(--k-ink)', $rule[1] ?? '');
+        self::assertStringContainsString('--form-bg:#fffdf7', $rule[1] ?? '');
+        self::assertStringContainsString('--kb-fill:#124b36', $rule[1] ?? '');
+        self::assertStringContainsString('--kb-bg:var(--kb-fill)', $rule[1] ?? '');
+        self::assertStringNotContainsString('--kb-ink:', $rule[1] ?? '', 'Nur gesetzte Farben werden geschrieben.');
+        // Die Regel steht im gehashten Stylesblock, den die Richtlinie erlaubt.
+        preg_match('#<style>(.*?)</style>#s', $html, $style);
+        self::assertStringContainsString("'sha256-".base64_encode(hash('sha256', $style[1], true))."'", (string) $client->getResponse()->headers->get('Content-Security-Policy'));
+
+        // Eine Farbe, die keine ist, wird mit Meldung abgelehnt und nichts geaendert.
+        $crawler = $client->request('GET', '/admin/forms');
+        $token = $crawler->filter('.form-def input[name="_csrf_token"]')->first()->attr('value');
+        self::assertCount(5, $crawler->filter('.form-def')->first()->filter('.field-card:not(.field-card-new)'), 'Jedes Feld ist eine Karte.');
+        self::assertSame('Anfrage senden', $crawler->filter('.form-def')->first()->filter('[data-preview-button]')->text());
+        $client->request('POST', '/admin/forms/kontakt', ['_csrf_token' => $token, 'name' => 'Kontakt', 'recipient' => 'info@kant-it.de', 'expectedVersion' => 2, 'buttonColor' => 'rot',
+            'fields' => [['name' => 'email', 'type' => 'email', 'label' => 'E-Mail', 'required' => '1']]]);
+        $client->followRedirect();
+        self::assertSelectorTextContains('.notice.error', 'kein Farbwert für den Button');
+        self::assertSame('#124b36', $forms->findBySlug('kontakt')['settings']['buttonColor']);
+    }
+
     public function testFormAdministrationNeedsAnEditorRoleAndACsrfToken(): void
     {
         $client = $this->login('editor');
@@ -770,9 +846,13 @@ final class EditorSecurityTest extends WebTestCase
         $crawler = $client->request('GET', '/admin/statistik');
         self::assertResponseIsSuccessful();
         self::assertStringContainsString('2', $crawler->filter('.card-head .count')->first()->text());
-        // Both charts - days and hours - are drawn by the server, so they are in the markup and
-        // need no script.
-        self::assertCount(2, $crawler->filter('svg.chart[role="img"]'));
+        // All three charts - days, hours and weekdays - are drawn by the server, so they are in
+        // the markup and need no script.
+        self::assertCount(3, $crawler->filter('svg.chart[role="img"]'));
+        // Jeder Balken sagt beim Ueberfahren, wofuer er steht - auch das ohne Skript.
+        self::assertStringContainsString('2 Aufrufe', $crawler->filter('svg.chart-days rect title')->last()->text());
+        self::assertSame('2', trim($crawler->filter('.stat-tile-main .stat-value')->text()), 'Die Hauptkachel traegt die Summe.');
+        self::assertSame('1', trim($crawler->filter('.stat-tile')->last()->filter('.stat-value')->text()), 'Die letzte Kachel zaehlt die nicht gefundene Adresse.');
         self::assertCount(0, $crawler->filter('svg [style]'), 'Inline styles are forbidden by the policy.');
         self::assertStringContainsString('/gibt-es-nicht', $crawler->filter('.stats-list')->last()->text());
         // And it says what it cannot answer.

tests/StatisticsTest.php

@@ -156,6 +156,40 @@ final class StatisticsTest extends TestCase
         // The hours are summed over the whole range, so both days contribute to 14:00.
         self::assertSame(5, $overview['hours'][14]['count']);
         self::assertCount(24, $overview['hours']);
+
+        // Die Summen, die eine Zahl einordnen: nichts davor, der staerkste Tag ist heute, eine
+        // Adresse lief ins Leere, vier Aufrufe kamen ueber einen Verweis, zwei Seiten wurden gesehen.
+        self::assertSame(0, $overview['previousTotal']);
+        self::assertSame('2026-09-12', $overview['busiestDay']);
+        self::assertSame(1, $overview['missingTotal']);
+        self::assertSame(4, $overview['referred']);
+        self::assertSame(2, $overview['pageCount']);
+        // Der 12.09.2026 ist ein Samstag, drei Tage davor ein Mittwoch; jeder Wochentag kommt in
+        // sieben Tagen genau einmal vor, der Schnitt ist also die Summe.
+        self::assertCount(7, $overview['weekdays']);
+        self::assertSame(['weekday' => 6, 'count' => 4, 'average' => 4.0], $overview['weekdays'][5]);
+        self::assertSame(['weekday' => 3, 'count' => 1, 'average' => 1.0], $overview['weekdays'][2]);
+        self::assertSame(0.0, $overview['weekdays'][0]['average']);
+    }
+
+    public function testTheOverviewComparesWithTheSameLengthOfTimeBefore(): void
+    {
+        // Three views eight to ten days ago lie in the seven days before a seven-day range.
+        foreach ([8, 9, 10] as $daysAgo) {
+            $this->stats->record('/', 200, '', 'kant-it.de', $this->now->modify(sprintf('-%d days', $daysAgo)));
+        }
+        // And one 14 days ago is already outside that comparison window.
+        $this->stats->record('/', 200, '', 'kant-it.de', $this->now->modify('-14 days'));
+        $this->stats->record('/', 200, '', 'kant-it.de', $this->now);
+
+        $overview = $this->stats->overview(7, $this->now);
+        self::assertSame(1, $overview['total']);
+        self::assertSame(3, $overview['previousTotal']);
+        // A 404 in the period before does not count as a view there either.
+        $this->stats->record('/weg', 404, '', 'kant-it.de', $this->now->modify('-9 days'));
+        self::assertSame(3, $this->stats->overview(7, $this->now)['previousTotal']);
+        // Without a single view there is no busiest day to point at.
+        self::assertNull($this->stats->overview(3, $this->now->modify('-30 days'))['busiestDay']);
     }
 
     public function testOlderDaysAreCompactedAndTheOldestAreRemoved(): void