Dokumentschema v17: Projektraster, verlinktes Bild, klebender Kopfbereich

Alles aus dem Nachbau von kant-it.de, den Umut durchgesehen hat.

Eine Beitragsliste kann Datum, Autor, Auszug und Kategorie ausblenden und
sieht damit aus wie ein Projektraster statt wie ein Blogarchiv. Beinahe
lautlos danebengegangen: |default(true) macht in Twig aus einem
gespeicherten false ein true - die Einstellung haette sich speichern
lassen und nichts getan. Der Test prueft beide Richtungen.

Ein Bild darf verlinken, damit ein Logo auf die Startseite zeigt; die
Adresse geht durch dieselbe Pruefung wie jeder andere Link. Und der
Kopfbereich kann beim Scrollen oben bleiben - als Einstellung der
Website, weil nur das umschliessende Element kleben kann.

Der groesste Fund steckt im Editor: die Liste bekannter Schemafassungen
endete bei 12, waehrend Bausteine v13 bis v15 verlangen. In einem
aktuellen Dokument liess sich damit kein Baustein mehr einfuegen, und
Symbol, Fortschritt, Slider und externer Inhalt in gar keinem. Jetzt eine
Zahl an einer Stelle, mit einem Test ueber jeden Typ und jede Fassung.

Geprueft: 389 PHP-Tests unter 8.2 und 8.4, 18 JS-Tests, Editortest,
Browserpruefung.

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

config/packages/twig.yaml

@@ -5,3 +5,6 @@ twig:
         # Reading the decision needs the current request, so the templates ask the gate directly
         # instead of every controller passing the same three values along.
         consentGate: '@App\Content\Consent'
+        # Dasselbe für die Einstellungen der Website: der Kopfbereich fragt, ob er beim
+        # Scrollen kleben soll, und das steht in keinem Dokument.
+        siteSettings: '@App\Content\SiteSettings'

docs/ARCHITECTURE.md

@@ -440,6 +440,22 @@ Vom Verweis bleibt nur der Host. Die vollständige Adresse, aus der jemand kam,
 
 **Aufbewahrung:** nach 60 Tagen werden die Stunden eines Tages zu einer Zeile verschmolzen, nach 425 Tagen wird gelöscht. Gut ein Jahr, damit ein Vergleich mit dem Vorjahresmonat möglich bleibt. `cms:stats:prune` macht beides und ist für einen Cronjob gedacht.
 
+## ADR 043 – Was beim Nachbauen noch fehlte (Dokumentschema v17, 13.09.2026)
+
+Umut hat den Nachbau angesehen und vier Dinge benannt: der Abstand zwischen den Lösungskarten und der Projektliste fehlt, die Karten sind zu hoch, die Beiträge sehen nicht aus wie im Original, und später: im Hero fehlen die letzten Projekte als Slider, der Kopfbereich klebt nicht beim Scrollen, das Logo verlinkt nicht auf die Startseite. Zwei davon waren mein Aufbau, vier waren fehlende Fähigkeiten.
+
+**Eine Beitragsliste kann jetzt ein Projektraster sein.** Im Original zeigt eine Projektkarte Bild und Titel. Die Beitragsliste zeigte immer zusätzlich Datum, Autor, Auszug und Kategorie – richtig für ein Blogarchiv, falsch für eine Projektseite, und nicht abstellbar. Drei Schalter (`showMeta`, `showExcerpt`, `showTerms`) beantworten das, mit den bisherigen Werten als Voreinstellung, damit bestehende Seiten sich nicht ändern.
+
+**Dabei wäre es beinahe schiefgegangen, und zwar lautlos:** `{{ block.props.showMeta|default(true) }}` gibt in Twig auch dann `true` zurück, wenn der Wert `false` ist – der `default`-Filter greift auf jeden leeren Wert, nicht nur auf einen fehlenden. Die Einstellung hätte sich speichern lassen und nichts getan. Mit `??` statt `|default()` bleibt `false` ein `false`. Der Test prüft beide Richtungen, weil nur die Gegenprobe diesen Fehler findet.
+
+**Ein Bild darf verlinken.** Klingt selbstverständlich und fehlte: ein Logo im Kopfbereich ohne Verweis auf die Startseite ist der erste Klick, den jeder sucht. Die Adresse geht durch dieselbe Prüfung wie jeder andere Link, also kein `javascript:`, kein `data:`, kein schemaloses `//fremd.test`.
+
+**Der Kopfbereich kann beim Scrollen oben bleiben.** Das ist bewusst eine Einstellung der Website und keine Eigenschaft eines Blocks: kleben kann nur das Element, das den Bereich umschließt (`.site-header`), und ein Abschnitt *innerhalb* davon würde nur solange kleben, wie sein Elternelement sichtbar ist – also gar nicht. Wer es im Designer an einem Abschnitt versucht hätte, hätte eine Einstellung gefunden, die nichts tut.
+
+**Der Slider im Hero** brauchte nichts Neues: vier Folien mit Bild und Titel im vorhandenen Slider-Baustein. Ehrlich dazugesagt: **er rotiert nicht von selbst.** Öffentliche Seiten laufen ohne JavaScript, und daran ändert eine Animation nichts – gewischt, gescrollt und mit der Tastatur bedient wird er, und er rastet je Folie ein. Eine automatische Rotation wäre als reine CSS-Animation möglich, aber sie wäre nicht anhaltbar, und ein Karussell, das sich nicht anhalten lässt, ist ein Barrierefreiheitsproblem.
+
+**Und ein Fehler, der größer ist als alles andere in diesem Paket:** die Liste bekannter Schemafassungen im Editor endete bei **12**, während Bausteine längst v13 bis v15 verlangten. Folge: **in einem aktuellen Dokument ließ sich im Editor gar kein Baustein mehr einfügen** – jeder Versuch endete mit „Unbekanntes Dokumentschema“ – und Symbol, Fortschritt, Slider und eingebetteter Inhalt nirgends. Der Playwright-Editortest hat es nicht gefunden, weil er auf einem alten Dokument arbeitet und die betroffenen Typen nicht einfügt. Jetzt steht die höchste Fassung als **eine Zahl an einer Stelle** (`SCHEMA_VERSION`), und ein Test fügt jeden Bausteintyp in Dokumente von v1 bis v17 ein.
+
 ## ADR 042 – Der Nachbau von kant-it.de, und was er gefunden hat (12.09.2026)
 
 Umut: „Baue mal lokal kant-it.de komplett nach. Ich möchte sehen ob das funktioniert.“ Gebaut ist die Startseite mit allen neun Abschnitten, die Projekteseite, vier Projektbeiträge, Impressum und Datenschutzgerüst, Kopf- und Fußbereich, zwei Menüs, das Kontaktformular, zwölf Bilder und die Palette der echten Website – in einer eigenen Datenbank, damit die Entwicklungsinstallation unberührt bleibt.

docs/QUALITY.md

@@ -1,5 +1,14 @@
 # Qualitätsbericht – erster ausführbarer Prototyp
 
+## Ergänzung: Nachbau überarbeitet, Dokumentschema v17, 13.09.2026
+
+- **389 PHP-Tests / 1636 Assertions** unter PHP 8.2.12 und 8.4.22, **18 JavaScript-Modelltests**, Playwright-Editortest, öffentliche Browserprüfung.
+- **Der schwerste Fund des Tages kommt aus dem Editor, nicht aus dem Nachbau:** in einem Dokument ab v13 ließ sich kein Baustein mehr einfügen, und Symbol, Fortschritt, Slider und eingebetteter Inhalt in gar keinem. Der bestehende Editortest hat das nicht bemerkt, weil er ein altes Dokument bearbeitet. Der neue Test fügt jeden Typ in Dokumente von v1 bis v17 ein.
+- **Ein zweiter, der nur in der Gegenprobe sichtbar wird:** `|default(true)` macht in Twig aus einem gespeicherten `false` ein `true`. Die neuen Anzeigeoptionen der Beitragsliste hätten sich speichern lassen und nichts getan – dieselbe Krankheit wie Rahmenstärke und Bildrundung. Der Test prüft beide Richtungen.
+- Neu geprüft: verlinktes Bild (mit denselben Linkregeln, sechs Fälle), klebender Kopfbereich als Einstellung, Projektraster gegen Blogarchiv.
+- Am Nachbau nachgemessen: Lösungskarte 213 px statt 300, Abstand zur Projektliste 54 px, Projektkarte 337 px mit Bild und Titel – das Original liegt bei 324 px.
+- **Nicht geprüft:** ob der klebende Kopfbereich auf einem Telefon mit dynamischer Adressleiste gut aussieht, und der Slider ist nicht auf einem echten Touchgerät gewischt worden.
+
 ## Ergänzung: kant-it.de nachgebaut, 12.09.2026
 
 - **381 PHP-Tests / 1619 Assertions** unter PHP 8.2.12 und 8.4.22, 17 JavaScript-Modelltests, Playwright-Editortest, öffentliche Browserprüfung.

docs/STATUS.md

@@ -27,6 +27,7 @@ Erster Commit angelegt (`82b0782`); das Projekt hat damit einen Rückfallpunkt.
 - Adresshierarchie: neue Spalten `path`, `parent_id`, `type`, `created_at` über Migration `20260912000400`; websiteweit eindeutiger Pfad statt eindeutigem Slug, Tiefe bis vier Ebenen, Beiträge ohne Unterseiten, reservierte Adressen und Adressableitung aus dem Titel. Öffentliche Route bedient verschachtelte Pfade wie `/leistungen/webdesign`; ein Lookahead hält `/admin`, `/media` und `/assets` aus dem Auffangmuster.
 - **Ladeverhalten gemessen statt vermutet** (ADR 039, Arbeitspaket M): ein Zähler liefert die Datenbankabfragen je Anfrage im Kopf `X-Kant-Queries` (außerhalb der Produktion). Die erste Messung zeigte 18 Abfragen auf der Startseite, weil Einstellungen und Theme je Aufrufer erneut gelesen wurden; beide merken sich ihren Stand jetzt für die Dauer einer Anfrage – **18 → 8**. Die Browserprüfung misst je Seite HTML, CSS, Anfragen, Skripte und Abfragen gegen Obergrenzen: Startseite 7,4 KB HTML, 22,7 KB CSS, 2 Anfragen, 0 Skripte.
 - **Das erste Bild einer Seite lädt sofort**, alles darunter weiterhin verzögert. Es ist meistens das größte Ding über der Falz.
+- **Dokumentschema v17** (ADR 043): eine Beitragsliste kann Datum, Auszug und Kategorie ausblenden und damit als Projektraster erscheinen; ein Bild kann verlinken (Logo auf die Startseite). Dazu die Einstellung „Kopfbereich beim Scrollen oben halten“. Behoben: im Editor ließ sich in Dokumenten ab v13 kein Baustein mehr einfügen.
 - **Die Gestaltung färbt jetzt auch die Bausteine** (ADR 042): Symbole, Knöpfe, Rahmen, ruhiger Text, Fokusring und Einwilligungsdialog nehmen die Farben des Themes statt fester Werte aus `site.css`. Der Einwilligungsdialog lässt sich zusätzlich eigens färben über eine Palettenfarbe mit dem Schlüssel `consent`. Überschriften werden nicht mehr getrennt.
 - **Installer (Arbeitspaket N, ADR 041):** `/install` führt in sechs Schritten von einer leeren Installation zu einer Website – Systemprüfung, Datenbank (SQLite oder MySQL, Verbindung sofort geprüft), Migration im Prozess ohne Konsole, Website mit Startseite, Kopf-/Fußbereich, Menü sowie Impressum und Datenschutzgerüst, erstes Administratorkonto, Abschlussliste. Solange keine Installation existiert, führt jede Adresse dorthin; sobald ein Konto existiert, antwortet `/install` mit 404. Davor liegt `scripts/install.php`: eine einzelne Datei, die das Releasearchiv mit fester Adresse und fester SHA-256 lädt, gegen ZIP-Slip gesichert entpackt und sich danach selbst löscht.
 - **Fassungsverlauf, Einsendungen und Weiterleitungen blättern** statt bei 30, 50 beziehungsweise 2000 Einträgen stillschweigend aufzuhören.

public/assets/editor-model.js

@@ -108,8 +108,15 @@ export function moveBlock(document, selected, targetId, inside = false) {
 export const devices = { desktop: 'Desktop', tablet: 'Tablet', mobile: 'Mobil' };
 
 // Called only inside a history transaction: all other fields and IDs stay untouched.
+// Die höchste Fassung, die dieser Editor kennt. Sie stand bisher als Liste an zwei Stellen und
+// blieb bei 12 stehen, während Bausteine schon v13 bis v15 verlangten: in einem aktuellen Dokument
+// liess sich dann gar nichts mehr einfügen, und ein Symbol, ein Slider oder ein externer Inhalt
+// nirgends. Eine Zahl, an einer Stelle.
+export const SCHEMA_VERSION = 17;
+const known = version => Number.isInteger(version) && version >= 1 && version <= SCHEMA_VERSION;
+
 export function upgradeDocument(document, version = 2) {
-  if (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].includes(document.schemaVersion) || ![2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].includes(version)) throw new Error('Unbekanntes Dokumentschema.');
+  if (!known(document.schemaVersion) || !known(version) || version < 2) throw new Error('Unbekanntes Dokumentschema.');
   document.schemaVersion = Math.max(document.schemaVersion, version);
   return document;
 }
@@ -126,7 +133,7 @@ export function effectiveDesign(block, device, key) {
 }
 
 export function setDesign(document, id, device, key, value) {
-  if (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].includes(document.schemaVersion)) throw new Error('Unbekanntes Dokumentschema.');
+  if (!known(document.schemaVersion)) throw new Error('Unbekanntes Dokumentschema.');
   if (!Object.hasOwn(devices, device)) throw new Error('Unbekannte Vorschaugröße.');
   const block = locate(document.blocks, id)?.block;
   if (!block) return;

public/assets/editor.js

@@ -283,9 +283,13 @@ function renderProperties() {
     field('Anzahl Beiträge', 'count', block.props.count, { number: true, help: 'Zwischen 1 und 24. Die Beiträge selbst kommen beim Ausliefern dazu, nicht aus dem gespeicherten Inhalt.' });
     field('Nur Kategorie', 'category', block.props.category || '', { help: 'Adresse der Kategorie, zum Beispiel projekte. Leer lassen für alle Beiträge.' });
     field('Nur Schlagwort', 'tag', block.props.tag || '', { help: 'Adresse des Schlagworts. Leer lassen für alle Beiträge.' });
+    field('Datum und Autor zeigen', 'showMeta', block.props.showMeta !== false, { checkbox: true });
+    field('Auszug zeigen', 'showExcerpt', block.props.showExcerpt !== false, { checkbox: true });
+    field('Kategorie zeigen', 'showTerms', block.props.showTerms !== false, { checkbox: true, help: 'Alle drei aus: ein Raster aus Bild und Titel, wie es zu Projekten passt.' });
   }
   if (block.type === 'button') field('Linkziel', 'href', block.props.href, { help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse.' });
   if (block.type === 'image') {
+    field('Linkziel', 'href', block.props.href || '', { help: 'Leer lassen, wenn das Bild nicht verlinkt. Für ein Logo im Kopfbereich meist /.' });
     const picker = document.createElement('button'); picker.className = 'secondary'; picker.textContent = 'Bild aus Mediathek wählen';
     picker.addEventListener('click', () => chooseMedia(false)); panel.append(picker);
     field('Bildadresse', 'src', block.props.src, { help: 'Vorhandene lokale Datei oder HTTPS-Adresse. Eine Mediathek folgt später.' });

public/assets/site.css

@@ -6,7 +6,7 @@ h1,h2,h3,h4,h5,h6{hyphens:manual}
 p{hyphens:auto}
 .block-image{margin:0;max-width:100%}.block-image img{max-width:100%;height:auto}
 :root{color-scheme:light;--paper:#f7f8f4;--ink:#182d2b;--muted:#50625d;--line:#d7dfd7;--mint:#e5f0b6;--accent:#315b49;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
-*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:5px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--accent);outline-offset:6px}main:focus{outline:none}.shell{width:min(var(--k-container,1180px),calc(100% - 64px));margin-inline:auto}.site-header{border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:28px;letter-spacing:-1.3px;text-decoration:none}.brand-icon{width:37px;height:37px;background:var(--ink);color:var(--mint);border-radius:10px;display:grid;place-items:center;margin-right:7px;font-size:27px;letter-spacing:-2px}.brand-light{font-weight:400}.site-header nav{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:600}.site-header nav a{text-decoration:none;padding:12px 0}.site-header nav [aria-current=page]{text-decoration:underline}.site-header nav .nav-link{border:1px solid var(--ink);padding:13px 18px;border-radius:7px}.nav-link span{margin-left:18px}.block-section{padding:70px 0}.block-section:first-child{padding:74px 0 82px}.section-inner>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 68%,currentColor);margin:0 0 30px}h1,h2,h3{letter-spacing:-.05em;line-height:1.05;margin:0 0 24px}h1{font-size:clamp(48px,6.6vw,84px);font-weight:500;max-width:900px}h2{font-size:clamp(32px,4vw,49px);font-weight:500;max-width:760px}h3{font-size:26px;letter-spacing:-.035em;line-height:1.2}.block-text{font-size:18px;line-height:1.7;max-width:690px;margin:0 0 23px;color:color-mix(in srgb,currentColor 82%,transparent);white-space:pre-line}.button{display:inline-flex;align-items:center;gap:32px;min-height:50px;margin-top:9px;padding:15px 21px;background:var(--ink);color:var(--paper);border-radius:7px;text-decoration:none;font-size:14px;font-weight:600}.button:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper))}.block-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:38px;background:transparent!important}.block-column{border:1px solid var(--line);border-radius:12px;padding:30px;min-width:0}.block-column .block-text{font-size:15px}.block-column>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:1px;color:color-mix(in srgb,var(--accent) 68%,currentColor);margin-bottom:34px}.tone-mint{background:var(--mint)}.tone-ink{background:var(--ink);color:var(--paper)}.tone-ink .block-text{color:color-mix(in srgb,var(--paper) 86%,var(--ink))}.tone-ink .section-inner>.block-text:first-child{color:var(--mint)}.tone-ink .button{color:var(--ink);background:var(--mint)}.width-narrow>.section-inner{max-width:800px}.site-footer{border-top:1px solid var(--line)}.site-footer p,.site-footer>span{font-size:12px;color:var(--muted)}.site-footer .brand{font-size:22px}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:var(--ink);color:white;padding:16px}.skip-link:focus{top:16px}img{display:block;max-width:100%;height:auto;border-radius:12px}.error-page{padding-block:100px}.error-page h1{max-width:800px}
+*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:5px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--accent);outline-offset:6px}main:focus{outline:none}.shell{width:min(var(--k-container,1180px),calc(100% - 64px));margin-inline:auto}.site-header{border-bottom:1px solid var(--line)}.site-header.is-sticky{position:sticky;top:0;z-index:40;background:var(--paper);box-shadow:0 1px 0 var(--line),0 10px 30px color-mix(in srgb,var(--ink) 8%,transparent)}.image-link{display:block;text-decoration:none}.brand{display:inline-flex;align-items:center;gap:5px;font-weight:800;font-size:28px;letter-spacing:-1.3px;text-decoration:none}.brand-icon{width:37px;height:37px;background:var(--ink);color:var(--mint);border-radius:10px;display:grid;place-items:center;margin-right:7px;font-size:27px;letter-spacing:-2px}.brand-light{font-weight:400}.site-header nav{display:flex;gap:32px;align-items:center;font-size:14px;font-weight:600}.site-header nav a{text-decoration:none;padding:12px 0}.site-header nav [aria-current=page]{text-decoration:underline}.site-header nav .nav-link{border:1px solid var(--ink);padding:13px 18px;border-radius:7px}.nav-link span{margin-left:18px}.block-section{padding:70px 0}.block-section:first-child{padding:74px 0 82px}.section-inner>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 68%,currentColor);margin:0 0 30px}h1,h2,h3{letter-spacing:-.05em;line-height:1.05;margin:0 0 24px}h1{font-size:clamp(48px,6.6vw,84px);font-weight:500;max-width:900px}h2{font-size:clamp(32px,4vw,49px);font-weight:500;max-width:760px}h3{font-size:26px;letter-spacing:-.035em;line-height:1.2}.block-text{font-size:18px;line-height:1.7;max-width:690px;margin:0 0 23px;color:color-mix(in srgb,currentColor 82%,transparent);white-space:pre-line}.button{display:inline-flex;align-items:center;gap:32px;min-height:50px;margin-top:9px;padding:15px 21px;background:var(--ink);color:var(--paper);border-radius:7px;text-decoration:none;font-size:14px;font-weight:600}.button:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper))}.block-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:38px;background:transparent!important}.block-column{border:1px solid var(--line);border-radius:12px;padding:30px;min-width:0}.block-column .block-text{font-size:15px}.block-column>.block-text:first-child{font-size:12px;font-weight:700;letter-spacing:1px;color:color-mix(in srgb,var(--accent) 68%,currentColor);margin-bottom:34px}.tone-mint{background:var(--mint)}.tone-ink{background:var(--ink);color:var(--paper)}.tone-ink .block-text{color:color-mix(in srgb,var(--paper) 86%,var(--ink))}.tone-ink .section-inner>.block-text:first-child{color:var(--mint)}.tone-ink .button{color:var(--ink);background:var(--mint)}.width-narrow>.section-inner{max-width:800px}.site-footer{border-top:1px solid var(--line)}.site-footer p,.site-footer>span{font-size:12px;color:var(--muted)}.site-footer .brand{font-size:22px}.skip-link{position:fixed;left:16px;top:-100px;z-index:10;background:var(--ink);color:white;padding:16px}.skip-link:focus{top:16px}img{display:block;max-width:100%;height:auto;border-radius:12px}.error-page{padding-block:100px}.error-page h1{max-width:800px}
 @media(max-width:650px){.shell{width:calc(100% - 36px)}.site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.site-header nav .nav-link{padding:10px}.nav-link span{margin-left:6px}.block-section,.block-section:first-child{padding-block:48px}h1{font-size:49px}.block-text{font-size:16px}.block-column{padding:26px}.site-footer{align-items:flex-start;flex-direction:column;gap:10px}.site-footer p{margin:0}.block-row{gap:16px}}
 
 /* Menus. Submenus open with details/summary, so the navigation works without JavaScript. */

src/Content/DocumentValidator.php

@@ -38,7 +38,7 @@ final class DocumentValidator
     public function validate(array $document, bool $requireHeading = true): void
     {
         $schemaVersion = $document['schemaVersion'] ?? null;
-        $this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], true), 'Unsupported document schema.');
+        $this->require(in_array($schemaVersion, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17], true), 'Unsupported document schema.');
         $this->text($document['title'] ?? null, 160);
         $this->text($document['description'] ?? null, 320);
         $this->require(is_array($document['blocks'] ?? null) && array_is_list($document['blocks']), 'Blocks must be a list.');
@@ -132,6 +132,16 @@ final class DocumentValidator
                     $this->require(is_string($props[$kind]) && 1 === preg_match('/^[a-z0-9]+(?:-[a-z0-9]+)*$/D', $props[$kind]) && strlen($props[$kind]) <= 80, 'Ungültiger Filter für die Beitragsliste.');
                 }
             }
+            // Was eine Karte zeigt. Ein Projektraster besteht aus Bild und Titel; Datum, Auszug
+            // und Kategorie gehören in ein Blogarchiv und lassen eine Projektseite falsch
+            // aussehen. Voreinstellung ist der alte Zustand, damit bestehende Seiten sich nicht
+            // ändern, wenn niemand etwas einstellt.
+            foreach (['showMeta', 'showExcerpt', 'showTerms'] as $switch) {
+                if (isset($props[$switch])) {
+                    $this->require($schemaVersion >= 17, 'Die Anzeigeoptionen der Beitragsliste brauchen Schema v17.');
+                    $this->require(is_bool($props[$switch]), sprintf('"%s" ist ja oder nein.', $switch));
+                }
+            }
         }
         if ('button' === $type) {
             $this->url($props['href'] ?? null);
@@ -249,6 +259,12 @@ final class DocumentValidator
         }
         if ('image' === $type) {
             $this->url($props['src'] ?? null);
+            // Ein Bild darf verlinken. Klingt selbstverstaendlich, fehlte aber: ein Logo im
+            // Kopfbereich ohne Verweis auf die Startseite ist der erste Klick, den jeder sucht.
+            if ('' !== ($props['href'] ?? '')) {
+                $this->require($schemaVersion >= 17, 'Ein verlinktes Bild braucht Schema v17.');
+                $this->url($props['href']);
+            }
             $this->require(is_bool($props['decorative'] ?? null), 'Image purpose is required.');
             $this->text($props['alt'] ?? null, 300, $props['decorative']);
             $this->require(!$props['decorative'] || '' === $props['alt'], 'Decorative images need empty alternative text.');

src/Content/SiteSettings.php

@@ -24,6 +24,9 @@ final class SiteSettings
         'sameAs' => [],
         'localBusiness' => false,
         'llmsTxt' => false,
+        // Der Kopfbereich bleibt beim Scrollen oben stehen. Eine Eigenschaft der Website und
+        // nicht des Dokuments: kleben kann nur das Element, das den Bereich umschliesst.
+        'stickyHeader' => false,
         'robotsExtra' => '',
         // Which stored page answers at the site root. Everything else derives from this.
         'homePath' => 'home',
@@ -93,6 +96,7 @@ final class SiteSettings
             throw new InvalidPage('Ein lokales Unternehmen braucht mindestens Straße und Ort.');
         }
         $values['llmsTxt'] = (bool) ($input['llmsTxt'] ?? false);
+        $values['stickyHeader'] = (bool) ($input['stickyHeader'] ?? false);
         // Only comment and simple directive lines; nothing that could smuggle in a second policy.
         $extra = [];
         foreach (preg_split('/\R/', (string) ($input['robotsExtra'] ?? '')) ?: [] as $line) {

templates/admin/settings.html.twig

@@ -73,6 +73,7 @@
         <textarea id="robotsExtra" name="robotsExtra" rows="3">{{ settings.robotsExtra }}</textarea>
         <p class="field-help">Nur Kommentarzeilen und einfache Anweisungen wie <code>Disallow: /pfad</code>. Höchstens dreißig Zeilen.</p>
         <div class="section-head"><h2>Einwilligung</h2><span class="muted">Nur nötig, wenn die Website etwas von Dritten lädt</span></div>
+        <label class="check-label" for="stickyHeader"><input id="stickyHeader" name="stickyHeader" type="checkbox" value="1"{{ settings.stickyHeader ? ' checked' : '' }}> Kopfbereich beim Scrollen oben halten</label>
         <label class="check-label" for="consentBanner"><input id="consentBanner" name="consentBanner" type="checkbox" value="1"{{ settings.consentBanner ? ' checked' : '' }}> Einwilligungshinweis anzeigen</label>
         <p class="field-help">Ohne eingebettete Inhalte anderer Anbieter braucht diese Website keine Einwilligung – dann ist ein Banner nur im Weg und sollte aus bleiben. Eingebettete Inhalte laden ohnehin erst nach Zustimmung, unabhängig von diesem Schalter.</p>
         <fieldset class="field-set">

templates/archive.html.twig

@@ -17,7 +17,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">
+    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}">
         {% 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, eagerImage: null} only %}{% endfor %}
     </header>
     {% endif %}

templates/blocks/block.html.twig

@@ -26,7 +26,7 @@
 {% elseif type == 'button' %}
     <a id="{{ block.id }}" class="button{{ designClasses }}" href="{{ props.href }}">{{ props.text }} <span aria-hidden="true">↗</span></a>
 {% elseif type == 'image' %}
-    <figure id="{{ block.id }}" class="block-image{{ designClasses }}">{% set eager = eagerImage|default(null) == block.id %}<img src="{{ props.src }}" alt="{{ props.alt }}" width="{{ props.width }}" height="{{ props.height }}" loading="{{ eager ? 'eager' : 'lazy' }}"{{ eager ? ' fetchpriority="high"' : '' }} decoding="async"{% if props.sources|default([]) %} srcset="{% for source in props.sources %}{{ source.src }} {{ source.width }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="(max-width: 650px) 100vw, (max-width: 1024px) 50vw, 800px"{% endif %}>{% if props.caption|default('') %}<figcaption>{{ props.caption }}</figcaption>{% endif %}</figure>
+    <figure id="{{ block.id }}" class="block-image{{ designClasses }}">{% set eager = eagerImage|default(null) == block.id %}{% if props.href|default('') %}<a class="image-link" href="{{ props.href }}">{% endif %}<img src="{{ props.src }}" alt="{{ props.alt }}" width="{{ props.width }}" height="{{ props.height }}" loading="{{ eager ? 'eager' : 'lazy' }}"{{ eager ? ' fetchpriority="high"' : '' }} decoding="async"{% if props.sources|default([]) %} srcset="{% for source in props.sources %}{{ source.src }} {{ source.width }}w{% if not loop.last %}, {% endif %}{% endfor %}" sizes="(max-width: 650px) 100vw, (max-width: 1024px) 50vw, 800px"{% endif %}>{% if props.href|default('') %}</a>{% endif %}{% if props.caption|default('') %}<figcaption>{{ props.caption }}</figcaption>{% endif %}</figure>
 {% elseif type == 'iconcard' %}
     <div id="{{ block.id }}" class="block-iconcard{{ designClasses }}">
         {% include 'blocks/icon.html.twig' with {name: props.icon} only %}
@@ -195,7 +195,7 @@
     {% endif %}
 {% elseif type == 'postlist' %}
     <div id="{{ block.id }}" class="block-postlist{{ designClasses }}">
-        {% include 'blocks/post-list.html.twig' with {posts: postLists[block.id]|default([])} only %}
+        {% include 'blocks/post-list.html.twig' with {posts: postLists[block.id]|default([]), showMeta: block.props.showMeta ?? true, showExcerpt: block.props.showExcerpt ?? true, showTerms: block.props.showTerms ?? true} only %}
     </div>
 {% elseif type == 'gallery' %}
     <div id="{{ block.id }}" class="block-gallery{{ designClasses }}" role="group" aria-label="Bildergalerie">

templates/blocks/post-list.html.twig

@@ -13,14 +13,14 @@
         {% endif %}
         <div class="post-body">
             <h3><a href="{{ post.href }}">{{ post.title }}</a></h3>
-            {% if post.publishedAt or post.author %}
+            {% if (showMeta ?? true) and (post.publishedAt or post.author) %}
             <p class="post-meta">
                 {% if post.publishedAt %}<time datetime="{{ post.publishedAt|date('Y-m-d') }}">{{ post.publishedAt|date('d.m.Y') }}</time>{% endif %}
                 {% if post.author %}<span>von {{ post.author }}</span>{% endif %}
             </p>
             {% endif %}
-            {% if post.excerpt %}<p class="post-excerpt">{{ post.excerpt }}</p>{% endif %}
-            {% if post.terms.category is not empty %}
+            {% if (showExcerpt ?? true) and post.excerpt %}<p class="post-excerpt">{{ post.excerpt }}</p>{% endif %}
+            {% if (showTerms ?? true) and post.terms.category is not empty %}
             <p class="post-terms">{% for term in post.terms.category %}<a href="{{ term.href }}">{{ term.name }}</a>{% endfor %}</p>
             {% endif %}
         </div>

templates/page.html.twig

@@ -39,7 +39,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">
+    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}">
         {% 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, eagerImage: eagerImage|default(null)} only %}{% endfor %}
     </header>
     {% endif %}

tests/CmsTest.php

@@ -599,6 +599,93 @@ final class CmsTest extends TestCase
         self::assertSame(['count' => 5, 'category' => 'projekte', 'tag' => ''], $stored['blocks'][2]['props']);
     }
 
+    public function testALogoCanLinkToTheStartPageAndTheHeaderCanStick(): void
+    {
+        // Zwei Selbstverständlichkeiten, die fehlten: ein Bild ließ sich nicht verlinken - also
+        // auch kein Logo auf die Startseite - und der Kopfbereich konnte beim Scrollen nicht oben
+        // bleiben. Beides ist beim Nachbau von kant-it.de aufgefallen.
+        $document = DemoContent::starter('Mit Logo');
+        $document['schemaVersion'] = 17;
+        $document['blocks'][] = ['id' => 'logo', 'type' => 'image', 'props' => [
+            'src' => '/media/'.str_repeat('a', 32).'/480', 'alt' => 'Firmenlogo', 'decorative' => false,
+            'width' => 480, 'height' => 120, 'href' => '/',
+        ]];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+
+        $html = $this->request('/')->getContent();
+        self::assertStringContainsString('<a class="image-link" href="/">', $html);
+        self::assertStringContainsString('alt="Firmenlogo"', $html);
+
+        // Der Kopfbereich klebt erst, wenn die Einstellung es sagt.
+        self::assertStringContainsString('class="site-header"', $html);
+        $settings = $this->site->load();
+        $this->site->save([...$settings, 'stickyHeader' => true, 'sameAs' => '', 'consentGroups' => $settings['consentGroups']]);
+        self::assertStringContainsString('class="site-header is-sticky"', $this->request('/')->getContent());
+    }
+
+    /** @return iterable<string, array{string, bool}> */
+    public static function imageLinks(): iterable
+    {
+        yield 'lokal' => ['/kontakt', true];
+        yield 'Sprungmarke' => ['#kontakt', true];
+        yield 'HTTPS' => ['https://beispiel.de/', true];
+        yield 'Skript' => ['javascript:alert(1)', false];
+        yield 'Datenadresse' => ['data:text/html,hi', false];
+        yield 'schemalos' => ['//fremd.test', false];
+    }
+
+    #[DataProvider('imageLinks')]
+    public function testAnImageLinkFollowsTheSameRulesAsEveryOtherLink(string $href, bool $allowed): void
+    {
+        $document = DemoContent::starter('Bildlink');
+        $document['schemaVersion'] = 17;
+        $document['blocks'][] = ['id' => 'logo', 'type' => 'image', 'props' => [
+            'src' => '/bild.webp', 'alt' => 'Logo', 'decorative' => false, 'width' => 400, 'height' => 100, 'href' => $href,
+        ]];
+        if (!$allowed) {
+            $this->expectException(InvalidDocument::class);
+        }
+        (new DocumentValidator())->validate($document);
+        if ($allowed) {
+            self::assertTrue(true, 'Erlaubte Adresse wird angenommen.');
+        }
+    }
+
+    public function testAPostListCanLookLikeAProjectGridInsteadOfABlogArchive(): void
+    {
+        // Beim Nachbau von kant-it.de fehlte genau das: das Projektraster dort zeigt Bild und
+        // Titel, die Beitragsliste zeigte zusätzlich Datum, Autor, Auszug und Kategorie und sah
+        // damit aus wie ein Blog. Was eine Karte zeigt, ist jetzt einstellbar.
+        $this->publishedPost('projekt-eins', 'Projekt eins', '2026-02-01', ['Projekte'], []);
+        $id = $this->db->fetchOne('SELECT id FROM page WHERE path = ?', ['projekt-eins']);
+        $this->posts->saveMetadata($id, ['excerpt' => 'Ein Auszug, der im Raster stört.', 'author' => 'Umut', 'publishedAt' => '2026-02-01'], ['Projekte'], [], (int) $this->db->fetchOne('SELECT version FROM page WHERE id = ?', [$id]));
+
+        $document = DemoContent::starter('Startseite');
+        $document['schemaVersion'] = 17;
+        $document['blocks'][] = ['id' => 'raster', 'type' => 'postlist', 'props' => [
+            'count' => 5, 'category' => 'projekte', 'tag' => '',
+            'showMeta' => false, 'showExcerpt' => false, 'showTerms' => false,
+        ], 'children' => []];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+
+        $html = $this->request('/')->getContent();
+        self::assertStringContainsString('Projekt eins', $html, 'Der Titel bleibt.');
+        self::assertStringNotContainsString('Ein Auszug, der im Raster stört.', $html);
+        self::assertStringNotContainsString('von Umut', $html);
+        self::assertStringNotContainsString('post-terms', $html);
+
+        // Und die Gegenprobe: ohne die Schalter bleibt alles wie vorher. Das ist der Fall, der
+        // fast danebengegangen wäre - „false|default(true)" ist in Twig true, weil der Filter auch
+        // auf leere Werte greift. Die Einstellung hätte sich speichern lassen und nichts getan.
+        $document['blocks'][array_key_last($document['blocks'])]['props'] = ['count' => 5, 'category' => 'projekte', 'tag' => ''];
+        $revision = $this->pages->saveDraft('page-1', $document, $this->pages->findForEditor('page-1')['version']);
+        $this->pages->publish('page-1', $revision, $this->pages->findForEditor('page-1')['version']);
+        $html = $this->request('/')->getContent();
+        self::assertStringContainsString('Ein Auszug, der im Raster stört.', $html);
+        self::assertStringContainsString('von Umut', $html);
+        self::assertStringContainsString('post-terms', $html);
+    }
+
     public function testFeedListsPublishedPostsWithAbsoluteAddresses(): void
     {
         $this->publishedPost('erster', 'Erster Beitrag', '2026-02-01', ['Projekte'], []);

tests/editor-model.test.mjs

@@ -1,6 +1,6 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
-import { EditorHistory, createBlock, locate, insertBlock, duplicateBlock, moveBlock, upgradeDocument, effectiveDesign, setDesign, insertPreset, insertRow, blockPath, insertMedia, setEffect, isPluginBlock, blockLabel, blockIcon, canContain, isContainer, setStyle, effectiveStyle, hoverStyle, resetStyleDevice, clearStyle, copyStyle } from '../public/assets/editor-model.js';
+import { EditorHistory, createBlock, locate, insertBlock, duplicateBlock, moveBlock, upgradeDocument, effectiveDesign, setDesign, insertPreset, insertRow, blockPath, insertMedia, setEffect, isPluginBlock, blockLabel, blockIcon, canContain, isContainer, setStyle, effectiveStyle, hoverStyle, resetStyleDevice, clearStyle, copyStyle, SCHEMA_VERSION } from '../public/assets/editor-model.js';
 import { readFile } from 'node:fs/promises';
 import { designCss } from '../scripts/build-design.mjs';
 
@@ -332,3 +332,28 @@ test('the hero preset assembles a full screen section that centres its content',
   history.undo();
   assert.deepEqual(history.document, fixture());
 });
+
+test('a current document still accepts new blocks, and every block type can be inserted', () => {
+  // Der Fehler, den der Nachbau von kant-it.de gefunden hat: die Liste bekannter Schemafassungen
+  // im Editor endete bei 12, während Bausteine schon v13 bis v15 verlangten. In einem aktuellen
+  // Dokument ließ sich damit gar nichts mehr einfügen - und ein Symbol, ein Slider oder ein
+  // externer Inhalt nirgends.
+  for (const version of [1, 5, 12, 13, 15, 16, SCHEMA_VERSION]) {
+    const history = new EditorHistory({ ...fixture(), schemaVersion: version });
+    const id = history.change(doc => insertBlock(doc, 'iconcard', 's2'));
+    assert.ok(id, `v${version} nimmt einen Baustein an`);
+    assert.ok(history.document.schemaVersion >= Math.max(version, 6));
+  }
+
+  // Jeder Typ, der eine Fassung anhebt, landet tatsächlich im Dokument.
+  for (const [type, needed] of [['gallery', 3], ['postlist', 5], ['quote', 6], ['tabs', 7], ['form', 8], ['breadcrumb', 9], ['menu', 11], ['embed', 14], ['icon', 15], ['progress', 15], ['slider', 15]]) {
+    const history = new EditorHistory(fixture());
+    const id = history.change(doc => insertBlock(doc, type, 's2'));
+    assert.ok(locate(history.document.blocks, id), `${type} wird eingefügt`);
+    assert.ok(history.document.schemaVersion >= needed, `${type} hebt auf mindestens v${needed}`);
+  }
+
+  // Eine erfundene Fassung bleibt abgewiesen.
+  assert.throws(() => upgradeDocument({ schemaVersion: 99, blocks: [] }, 6), /Unbekanntes Dokumentschema/);
+  assert.throws(() => upgradeDocument({ schemaVersion: 5, blocks: [] }, SCHEMA_VERSION + 1), /Unbekanntes Dokumentschema/);
+});