Kopf, Fuß und verknüpfte Sektionen als Blockdokumente (Paket G, Teil 1)

Migration 20260912001000 legt die Tabelle partial an: Blockdokumente,
die keine Seiten sind. Kopf- und Fußbereich je einmal,
wiederverwendbare Sektionen beliebig viele - im selben Editor
gestaltbar wie eine Seite, weil der Editor seine Schnittstelle aus
einem Datenattribut nimmt statt sie fest zu kennen.

Im Template steht keine Marke und keine Navigation mehr. Ein neuer
Block menu zeigt einen Menüplatz; die Einträge bleiben in der
Menüverwaltung.

Eine Seite braucht genau eine Hauptüberschrift, ein geteilter Bereich
keine - sonst hätte jede Seite, die ihn trägt, zwei. Geteilte
Bereiche haben keinen Entwurf und keine Veröffentlichung: sie sind
überall sichtbar, gespeichert heißt live.

Verknüpft statt kopiert: partialref speichert nur die Adresse, die
Blöcke bleiben im Bereich, und eine Änderung erreicht jede Seite, die
sie einbindet. Zyklen abgewiesen, Verschachtelung auf drei Ebenen
begrenzt, eine entfernte Sektion hinterlässt keine Lücke und der
Verweis bleibt erhalten. Die Abschnittsvorlagen kopieren weiterhin.

Ein echter Fehler kam dabei heraus, der jede dunkle Sektion mit
Spalten betraf: .block-column>.block-text:first-child setzt eine
Farbe für helle Hintergründe und gewinnt auf Spezifität gegen
.tone-ink - gemessen 1,87:1.

Geprüft: 165 PHP-Tests / 660 Assertions unter PHP 8.2.12 und 8.4.22,
15 JavaScript-Modelltests, Editortest mit axe ohne Verstöße,
öffentliche Browserprüfung, Migration nach Backup angewendet.

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

templates/admin/editor.html.twig

@@ -1,12 +1,16 @@
 {% extends 'admin/base.html.twig' %}
-{% block title %}{{ page.document.title }} bearbeiten{% endblock %}
+{% set area = partial|default(null) %}
+{% set subject = area ? area.document : page.document %}
+{% block title %}{{ subject.title }} bearbeiten{% endblock %}
 {% block body_class %}editor-body{% endblock %}
 {% block scripts %}<script type="module" src="/assets/editor.js"></script>{% endblock %}
 {% block body %}
-<div id="editor" data-page-id="{{ page.id }}" data-can-publish="{{ is_granted('ROLE_PUBLISHER') ? 'true' : 'false' }}">
+{# The API base decides what is edited. An area is shared, so it has no draft and no
+   publication: saving is live, and the publish button is left out. #}
+<div id="editor" data-api="{{ area ? '/admin/partials/' ~ area.id : '/admin/api/pages/' ~ page.id }}" data-kind="{{ area ? area.kind : 'page' }}" data-can-publish="{{ not area and is_granted('ROLE_PUBLISHER') ? 'true' : 'false' }}">
     <header class="editor-header">
-        <a class="back-link" href="{{ path('admin_pages') }}" aria-label="Zur Seitenübersicht">← <span>Seiten</span></a>
-        <div class="editor-page-name"><h1>{{ page.document.title }}</h1><span>/{{ page.slug == 'home' ? '' : page.slug }}</span></div>
+        <a class="back-link" href="{{ area ? path('admin_partials') : path('admin_pages') }}" aria-label="{{ area ? 'Zur Bereichsübersicht' : 'Zur Seitenübersicht' }}">← <span>{{ area ? 'Bereiche' : 'Seiten' }}</span></a>
+        <div class="editor-page-name"><h1>{{ subject.title }}</h1><span>{{ area ? kinds[area.kind]|default('Bereich') : '/' ~ (page.slug == 'home' ? '' : page.slug) }}</span></div>
         <div class="history-actions"><button id="undo" class="icon-button" title="Rückgängig (Strg+Z)" aria-label="Rückgängig" disabled>↶</button><button id="redo" class="icon-button" title="Wiederholen (Strg+Umschalt+Z)" aria-label="Wiederholen" disabled>↷</button></div>
         <div class="save-actions"><span id="save-status" role="status" aria-live="polite">Wird geladen …</span><button id="save" class="secondary" disabled>Entwurf speichern</button>{% if is_granted('ROLE_PUBLISHER') %}<button id="publish" class="primary" disabled>Veröffentlichen</button>{% endif %}</div>
     </header>
@@ -17,7 +21,7 @@
             <section class="panel-section"><div class="panel-title"><h2>Werkzeugkasten</h2><button id="toggle-library" class="text-button" aria-expanded="true" aria-controls="toolbox">− <span class="visually-hidden">Werkzeugkasten einklappen</span></button></div><div id="toolbox"><h3 class="preset-heading">Element hinzufügen</h3>
                 <p class="panel-hint">In die gewählte Sektion oder hinter das gewählte Element.</p>
                 <div id="library" class="library">
-                {% for type, label in {section:'Sektion', row:'Zeile', column:'Spalte', heading:'Überschrift', text:'Text', image:'Bild', button:'Button', gallery:'Galerie', postlist:'Beitragsliste', iconcard:'Symbolkarte', stat:'Kennzahl', quote:'Kundenstimme', logos:'Logoleiste', cta:'Aufruf-Band', contact:'Kontaktdaten', accordion:'Akkordeon', accordionitem:'Eintrag', tabs:'Tabs', tabitem:'Tab', form:'Formular', breadcrumb:'Brotkrumen', divider:'Trennlinie', spacer:'Abstand'} %}<button type="button" data-add="{{ type }}" disabled><span aria-hidden="true">{{ {section:'▣',row:'☰',column:'▥',heading:'H',text:'T',image:'▧',button:'↗',gallery:'▦',postlist:'☷',iconcard:'◈',stat:'№',quote:'❝',logos:'⬚',cta:'◉',contact:'✆',accordion:'⌵',accordionitem:'·',tabs:'▭',tabitem:'▫',form:'✉',breadcrumb:'⟩',divider:'—',spacer:'⇳'}[type] }}</span>{{ label }}</button>{% endfor %}
+                {% for type, label in {section:'Sektion', row:'Zeile', column:'Spalte', heading:'Überschrift', text:'Text', image:'Bild', button:'Button', gallery:'Galerie', postlist:'Beitragsliste', iconcard:'Symbolkarte', stat:'Kennzahl', quote:'Kundenstimme', logos:'Logoleiste', cta:'Aufruf-Band', contact:'Kontaktdaten', accordion:'Akkordeon', accordionitem:'Eintrag', tabs:'Tabs', tabitem:'Tab', form:'Formular', breadcrumb:'Brotkrumen', menu:'Navigation', partialref:'Verkn. Sektion', divider:'Trennlinie', spacer:'Abstand'} %}<button type="button" data-add="{{ type }}" disabled><span aria-hidden="true">{{ {section:'▣',row:'☰',column:'▥',heading:'H',text:'T',image:'▧',button:'↗',gallery:'▦',postlist:'☷',iconcard:'◈',stat:'№',quote:'❝',logos:'⬚',cta:'◉',contact:'✆',accordion:'⌵',accordionitem:'·',tabs:'▭',tabitem:'▫',form:'✉',breadcrumb:'⟩',menu:'☰',partialref:'⧉',divider:'—',spacer:'⇳'}[type] }}</span>{{ label }}</button>{% endfor %}
                 </div>
                 <button id="open-media-library" class="secondary full-width media-launch" disabled>Medienverwaltung öffnen</button>
                 <h3 class="preset-heading">Fertige Abschnitte</h3><p class="panel-hint">Wird nach dem aktuellen Seitenabschnitt eingefügt.</p>

templates/admin/menus.html.twig

@@ -8,7 +8,7 @@
 <main id="admin-main" class="pages-main" tabindex="-1">
     <p class="eyebrow">NAVIGATION</p><h1>Menüs</h1>
     <p class="muted">Ein Eintrag verweist auf eine Seite, auf ein Sprungziel innerhalb einer Seite oder auf eine externe Adresse. Die Reihenfolge ergibt sich aus der Position, die Verschachtelung aus der Ebene.</p>
-    <p class="admin-links"><a class="secondary" href="{{ path('admin_pages') }}">Seiten</a> <a class="secondary" href="{{ path('admin_forms') }}">Formulare</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a> <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a></p>
+    <p class="admin-links"><a class="secondary" href="{{ path('admin_pages') }}">Seiten</a> <a class="secondary" href="{{ path('admin_forms') }}">Formulare</a> <a class="secondary" href="{{ path('admin_partials') }}">Bereiche</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a> <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a></p>
 
     {% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
         <p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>

templates/admin/pages.html.twig

@@ -8,7 +8,7 @@
 <main id="admin-main" class="pages-main" tabindex="-1">
     <p class="eyebrow">DEINE WEBSITE</p><h1>Gute Inhalte beginnen hier.</h1>
     <p class="muted">Wähle eine Seite. Gestalte deinen Entwurf. Veröffentliche, wenn alles passt.</p>
-    <p class="admin-links"><a class="secondary" href="{{ path('admin_media') }}">Medienverwaltung</a> <a class="secondary" href="{{ path('admin_menus') }}">Menüs</a> <a class="secondary" href="{{ path('admin_forms') }}">Formulare</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a> <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a> <a class="secondary" href="/beitraege">Beitragsübersicht ↗</a></p>
+    <p class="admin-links"><a class="secondary" href="{{ path('admin_media') }}">Medienverwaltung</a> <a class="secondary" href="{{ path('admin_menus') }}">Menüs</a> <a class="secondary" href="{{ path('admin_forms') }}">Formulare</a> <a class="secondary" href="{{ path('admin_partials') }}">Bereiche</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a> <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a> <a class="secondary" href="/beitraege">Beitragsübersicht ↗</a></p>
 
     {% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
         <p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>

templates/admin/partials.html.twig

@@ -0,0 +1,81 @@
+{% extends 'admin/base.html.twig' %}
+{% block title %}Bereiche{% endblock %}
+{% block body %}
+<header class="admin-header">
+    <a class="brand" href="{{ path('admin_pages') }}"><span class="brand-icon" aria-hidden="true">k.</span>kant<span>cms</span></a>
+    <div class="header-actions"><a href="/">Website ansehen ↗</a><span class="user-name">{{ app.user.userIdentifier }}</span><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>
+</header>
+<main id="admin-main" class="pages-main" tabindex="-1">
+    <p class="eyebrow">BEREICHE</p><h1>Kopf, Fuß und wiederverwendbare Sektionen</h1>
+    <p class="muted">Alle drei sind Blockdokumente wie eine Seite und im selben Editor frei gestaltbar. Eine <strong>verknüpfte</strong> Sektion wird nicht kopiert: eine Änderung erreicht jede Seite, die sie einbindet.</p>
+    <p class="admin-links">
+        <a class="secondary" href="{{ path('admin_pages') }}">Seiten</a>
+        <a class="secondary" href="{{ path('admin_menus') }}">Menüs</a>
+        <a class="secondary" href="{{ path('admin_theme') }}">Design</a>
+        <a class="secondary" href="{{ path('admin_settings') }}">Einstellungen</a>
+    </p>
+
+    {% for type in ['error', 'success'] %}{% for message in app.flashes(type) %}
+        <p class="notice {{ type == 'error' ? 'error' : 'ok' }}" role="{{ type == 'error' ? 'alert' : 'status' }}">{{ message }}</p>
+    {% endfor %}{% endfor %}
+
+    {% if is_granted('ROLE_EDITOR') %}
+    <details class="create-panel"{% if app.flashes is not empty %} open{% endif %}>
+        <summary>Neuen Bereich anlegen</summary>
+        <form action="{{ path('admin_partial_create') }}" method="post" class="create-form">
+            <input type="hidden" name="_csrf_token" value="{{ csrf_token('partials') }}">
+            <div class="create-grid">
+                <div>
+                    <label for="new-name">Name</label>
+                    <input id="new-name" name="name" maxlength="120" required autocomplete="off">
+                </div>
+                <div>
+                    <label for="new-kind">Art</label>
+                    <select id="new-kind" name="kind">
+                        {% for value, label in kinds %}<option value="{{ value }}"{{ value == 'section' ? ' selected' : '' }}>{{ label }}</option>{% endfor %}
+                    </select>
+                    <p class="field-help">Kopf- und Fußbereich gibt es je einmal.</p>
+                </div>
+                <div>
+                    <label for="new-slug">Adresse</label>
+                    <input id="new-slug" name="slug" maxlength="80" pattern="[a-z0-9]+(-[a-z0-9]+)*" autocomplete="off">
+                    <p class="field-help">Wird im Verknüpfungsblock eingetragen. Leer lassen, um sie aus dem Namen zu bilden.</p>
+                </div>
+            </div>
+            <button class="primary" type="submit">Anlegen und bearbeiten</button>
+        </form>
+    </details>
+    {% endif %}
+
+    <div class="section-heading"><h2>Bereiche <span class="count">{{ partials|length }}</span></h2><span class="muted">Gespeicherte Änderungen sind sofort auf allen Seiten sichtbar.</span></div>
+    <div class="page-list">
+    {% for partial in partials %}
+        <article class="page-card">
+            <div class="page-icon" aria-hidden="true">{{ partial.kind == 'header' ? '▀' : (partial.kind == 'footer' ? '▄' : '▥') }}</div>
+            <div class="page-info">
+                <h3><a href="{{ path('admin_partial_editor', {id: partial.id}) }}">{{ partial.name }}</a></h3>
+                <p>{{ kinds[partial.kind] }}{% if partial.kind == 'section' %} · Adresse <code>{{ partial.slug }}</code>{% endif %}
+                {% if partial.kind == 'section' %}
+                    · {% if partial.usedBy is empty %}<span>nirgends eingebunden</span>{% else %}eingebunden in {{ partial.usedBy|join(', ') }}{% endif %}
+                {% endif %}
+                </p>
+            </div>
+            <a class="secondary" href="{{ path('admin_partial_editor', {id: partial.id}) }}" aria-label="{{ partial.name }} bearbeiten">Bearbeiten <span aria-hidden="true">→</span></a>
+            {% if partial.kind == 'section' and is_granted('ROLE_EDITOR') %}
+            <details class="delete-panel">
+                <summary aria-label="{{ partial.name }} entfernen">Entfernen</summary>
+                <form action="{{ path('admin_partial_delete', {id: partial.id}) }}" method="post">
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('partials') }}">
+                    <p>Entfernt „{{ partial.name }}“.{% if partial.usedBy is not empty %} <strong>Noch eingebunden in {{ partial.usedBy|join(', ') }}</strong> – dort erscheint danach nichts mehr.{% endif %}</p>
+                    <button class="secondary danger-text" type="submit">Sektion entfernen</button>
+                </form>
+            </details>
+            {% endif %}
+        </article>
+    {% else %}
+        <div class="empty-state"><h3>Noch keine Bereiche.</h3><p>Ein frisches Setup legt Kopf- und Fußbereich automatisch an.</p></div>
+    {% endfor %}
+    </div>
+    <p class="footnote">Kant CMS · Visueller Editor, erster Prototyp</p>
+</main>
+{% endblock %}

templates/admin/settings.html.twig

@@ -10,7 +10,7 @@
     <p class="muted">Aus diesen Angaben entstehen die strukturierten Daten der Startseite. Was hier steht, ist genau das, was Suchmaschinen lesen – es gibt keine zweite, unsichtbare Fassung.</p>
     <p class="admin-links">
         <a class="secondary" href="{{ path('admin_pages') }}">Seiten</a>
-        <a class="secondary" href="{{ path('admin_menus') }}">Menüs</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a>
+        <a class="secondary" href="{{ path('admin_menus') }}">Menüs</a> <a class="secondary" href="{{ path('admin_partials') }}">Bereiche</a> <a class="secondary" href="{{ path('admin_theme') }}">Design</a>
         <a class="secondary" href="{{ path('admin_forms') }}">Formulare</a>
         <a class="secondary" href="/sitemap.xml">Sitemap ↗</a>
         <a class="secondary" href="/robots.txt">robots.txt ↗</a>

templates/archive.html.twig

@@ -15,12 +15,11 @@
 </head>
 <body class="kant">
     <a class="skip-link" href="#main">Zum Inhalt springen</a>
-    <header class="site-header shell">
-        <a class="brand" href="/" aria-label="Kant CMS – Startseite"><span class="brand-icon" aria-hidden="true">k.</span> kant<span class="brand-light">cms</span></a>
-        {% if navigation.header|default([]) is not empty %}
-        <nav aria-label="Hauptnavigation">{% include 'nav.html.twig' with {links: navigation.header} only %}</nav>
-        {% endif %}
+    {% if areas.header|default(null) %}
+    <header class="site-header">
+        {% for block in areas.header.blocks %}{% include 'blocks/block.html.twig' with {block: block, postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
     </header>
+    {% endif %}
     <main id="main" tabindex="-1">
         <section class="block-section tone-mint width-normal">
             <div class="shell section-inner">
@@ -42,12 +41,10 @@
             </div>
         </section>
     </main>
-    <footer class="site-footer shell">
-        <a class="brand" href="/">kant<span class="brand-light">cms</span></a>
-        {% if navigation.footer|default([]) is not empty %}
-        <nav aria-label="Fußzeile">{% include 'nav.html.twig' with {links: navigation.footer} only %}</nav>
-        {% endif %}
-        <span>Lokaler Entwicklungsprototyp · 2026</span>
+    {% if areas.footer|default(null) %}
+    <footer class="site-footer">
+        {% for block in areas.footer.blocks %}{% include 'blocks/block.html.twig' with {block: block, postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
     </footer>
+    {% endif %}
 </body>
 </html>

templates/blocks/block.html.twig

@@ -10,7 +10,7 @@
     {% set tag = type == 'section' ? 'section' : 'div' %}
     <{{ tag }} id="{{ block.id }}" class="block-{{ type }} tone-{{ layout.tone|default('paper') }} width-{{ layout.width|default('normal') }}{{ designClasses }}">
         {% if type == 'section' %}<div class="shell section-inner">{% endif %}
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([])} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
         {% if type == 'section' %}</div>{% endif %}
     </{{ tag }}>
 {% elseif type == 'heading' %}
@@ -39,7 +39,7 @@
     </figure>
 {% elseif type == 'logos' %}
     <ul id="{{ block.id }}" class="block-logos{{ designClasses }}">
-        {% for child in block.children|default([]) %}<li>{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([])} only %}</li>{% endfor %}
+        {% for child in block.children|default([]) %}<li>{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}</li>{% endfor %}
     </ul>
 {% elseif type == 'cta' %}
     <div id="{{ block.id }}" class="block-cta{{ designClasses }}">
@@ -59,6 +59,26 @@
     <hr id="{{ block.id }}" class="block-divider{{ designClasses }}">
 {% elseif type == 'spacer' %}
     <div id="{{ block.id }}" class="block-spacer spacer-{{ props.size }}{{ designClasses }}" aria-hidden="true"></div>
+{% elseif type == 'menu' %}
+    {% set links = navigation[props.slot]|default([]) %}
+    {% if links is not empty %}
+    <nav id="{{ block.id }}" class="block-menu{{ designClasses }}" aria-label="{{ props.slot == 'footer' ? 'Fußzeile' : 'Hauptnavigation' }}">
+        {% include 'nav.html.twig' with {links: links} only %}
+    </nav>
+    {% endif %}
+{% elseif type == 'partialref' %}
+    {# A linked section: its blocks come from the partial, resolved by the controller. One change
+       there reaches every page that links it, which is the difference to a copied section. #}
+    {% set section = sections[props.partial]|default(null) %}
+    {% if section %}
+        <div id="{{ block.id }}" class="block-partialref{{ designClasses }}">
+            {% for child in section.blocks %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
+        </div>
+    {% elseif editing|default(false) %}
+        <p id="{{ block.id }}" class="block-unavailable" role="note">Die verknüpfte Sektion „{{ props.partial }}“ gibt es nicht mehr. Der Verweis bleibt gespeichert.</p>
+    {% else %}
+        <!-- Verknüpfte Sektion {{ props.partial }} ist nicht vorhanden. -->
+    {% endif %}
 {% elseif type == 'breadcrumb' %}
     {% if breadcrumbs|default([])|length > 1 %}
     <nav id="{{ block.id }}" class="block-breadcrumb{{ designClasses }}" aria-label="Brotkrumen">
@@ -81,22 +101,22 @@
         <ul class="tabs-nav">
             {% for child in block.children|default([]) %}<li><a href="#{{ child.id }}">{{ child.props.title }}</a></li>{% endfor %}
         </ul>
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([])} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
     </div>
 {% elseif type == 'tabitem' %}
     <section id="{{ block.id }}" class="block-tabitem{{ designClasses }}">
         <h3 class="tabs-heading">{{ props.title }}</h3>
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([])} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
     </section>
 {% elseif type == 'accordion' %}
     <div id="{{ block.id }}" class="block-accordion{{ designClasses }}">
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([])} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
     </div>
 {% elseif type == 'accordionitem' %}
     <details id="{{ block.id }}" class="block-accordionitem{{ designClasses }}"{% if props.open|default(false) %} open{% endif %}>
         <summary>{{ props.title }}</summary>
         <div class="accordion-body">
-            {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([])} only %}{% endfor %}
+            {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
         </div>
     </details>
 {% elseif type == 'postlist' %}
@@ -105,7 +125,7 @@
     </div>
 {% elseif type == 'gallery' %}
     <div id="{{ block.id }}" class="block-gallery{{ designClasses }}" role="group" aria-label="Bildergalerie">
-        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([])} only %}{% endfor %}
+        {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
     </div>
 {% else %}
     {#

templates/page.html.twig

@@ -32,12 +32,13 @@
 </head>
 <body class="kant">
     <a class="skip-link" href="#main">Zum Inhalt springen</a>
-    <header class="site-header shell">
-        <a class="brand" href="/" aria-label="Kant CMS – Startseite"><span class="brand-icon" aria-hidden="true">k.</span> kant<span class="brand-light">cms</span></a>
-        {% if navigation.header|default([]) is not empty %}
-        <nav aria-label="Hauptnavigation">{% include 'nav.html.twig' with {links: navigation.header} only %}</nav>
-        {% endif %}
+    {# 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">
+        {% 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({})} only %}{% endfor %}
     </header>
+    {% endif %}
     <main id="main" tabindex="-1">
         {% if postMeta is defined and postMeta is not null %}
         <p class="post-header shell">
@@ -47,14 +48,12 @@
             {% for term in postMeta.tag %}<a class="post-tag" href="{{ term.href }}">#{{ term.name }}</a>{% endfor %}
         </p>
         {% endif %}
-        {% for block in page.document.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([])} only %}{% endfor %}
+        {% for block in page.document.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
     </main>
-    <footer class="site-footer shell">
-        <a class="brand" href="/">kant<span class="brand-light">cms</span></a>
-        {% if navigation.footer|default([]) is not empty %}
-        <nav aria-label="Fußzeile">{% include 'nav.html.twig' with {links: navigation.footer} only %}</nav>
-        {% endif %}
-        <span>Lokaler Entwicklungsprototyp · 2026</span>
+    {% if areas.footer|default(null) %}
+    <footer class="site-footer">
+        {% for block in areas.footer.blocks %}{% include 'blocks/block.html.twig' with {block: block, editing: editing|default(false), postLists: {}, forms: {}, breadcrumbs: [], navigation: navigation|default({}), sections: sections|default({})} only %}{% endfor %}
     </footer>
+    {% endif %}
 </body>
 </html>