Rebuild DEEG as a fifth installation, add stepped forms and a plugin system, and clear the review backlog

Forms gained steps, conditions, image choices, number fields with units and a
summary step; the DEEG price finder uses all of it. Plugins are manifest plus
Twig: blocks, settings, containers, routes, presets and theme packs, switched
per installation. The review backlog is done: archive pages render through the
normal page pipeline, forms and post lists work inside areas and sections,
repeated sections get their own ids, breakpoints and colours come from the
palette, backup and update work on MySQL and lock each other out.

The task worker no longer shortens a process that has no time limit:
set_time_limit() sets the limit instead of extending it, which turned an
unlimited CLI run into eighty seconds and killed the full test suite far away
from the scheduler.

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

templates/admin/forms.html.twig

@@ -40,19 +40,50 @@
         </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>
+            <input id="{{ id }}-options" name="fields[{{ n }}][options]" maxlength="500" value="{{ row.options|default([])|join(', ') }}" placeholder="Beratung, Angebot, Sonstiges" data-field-options-input>
             <p class="field-help">Durch Komma trennen, mindestens zwei.</p>
+            <div class="field-card-images" data-field-images>
+                <label for="{{ id }}-images">Bild je Option</label>
+                <textarea id="{{ id }}-images" name="fields[{{ n }}][images]" rows="2" data-field-images-input>{% for option, kennung in row.images|default({}) %}{{ option }} = {{ kennung }}
+{% endfor %}</textarea>
+                <p class="field-help">Eine Zeile je Option: <code>Option = Kennung aus der Mediathek</code>. Sobald eine Option ein Bild hat, wird die Auswahl auf der Website zur Bildauswahl – anklickbare Karten statt Kästchen.</p>
+            </div>
         </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 class="field-card-number" data-field-number>
+            <div>
+                <label for="{{ id }}-min">Untergrenze</label>
+                <input id="{{ id }}-min" name="fields[{{ n }}][min]" inputmode="decimal" value="{{ row.min|default('') }}" placeholder="0">
+            </div>
+            <div>
+                <label for="{{ id }}-max">Obergrenze</label>
+                <input id="{{ id }}-max" name="fields[{{ n }}][max]" inputmode="decimal" value="{{ row.max|default('') }}" placeholder="1000">
+            </div>
+            <div>
+                <label for="{{ id }}-unit">Einheit</label>
+                <input id="{{ id }}-unit" name="fields[{{ n }}][unit]" maxlength="12" value="{{ row.unit|default('') }}" placeholder="m²" data-field-unit>
+            </div>
+        </div>
+        <div class="field-card-condition" data-field-condition>
+            <div>
+                <label for="{{ id }}-showif">Nur zeigen, wenn das Feld</label>
+                <input id="{{ id }}-showif" name="fields[{{ n }}][showIfField]" maxlength="32" value="{{ row.showIf.field|default('') }}" pattern="[a-z][a-z0-9_]*" placeholder="immobilienart" data-field-showif>
+            </div>
+            <div>
+                <label for="{{ id }}-showvalues">… einen dieser Werte hat</label>
+                <input id="{{ id }}-showvalues" name="fields[{{ n }}][showIfValues]" maxlength="500" value="{{ row.showIf.values|default([])|join(', ') }}" placeholder="Wohnung, Haus" data-field-showvalues>
+            </div>
+            <p class="field-help">Technischer Name eines Auswahlfeldes weiter oben, Werte durch Komma. Bei einem Schritt gilt die Bedingung für alle seine Felder. Leer: das Feld gilt immer.</p>
+        </div>
     </div>
 </li>
 {% endmacro %}
 
 {% block content %}
 {% import _self as karte %}
-<div class="form-screens" data-form-schema="{{ schema|json_encode|e('html_attr') }}">
+<div class="form-screens" data-form-schema="{{ schema|json_encode|e('html_attr') }}" data-form-images="{{ images|json_encode|e('html_attr') }}">
 {% for form in forms|merge([null]) %}
 {% set new = form is null %}
 {% set f = loop.index %}
@@ -114,6 +145,10 @@
                         <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 class="field-wide">
+                        <label class="check-label" for="summary-{{ f }}"><input id="summary-{{ f }}" type="checkbox" name="summary" value="1"{{ settings.summary|default(false) ? ' checked' : '' }}> Zusammenfassung vor dem Absenden zeigen</label>
+                        <p class="field-help">Wirkt bei Formularen mit Schritten: der letzte Schritt zeigt alle Angaben mit „Ändern“. Ohne Skript im Browser steht das Formular als Ganzes auf der Seite.</p>
+                    </div>
                 </div>
 
                 <div class="form-fields-head">
@@ -125,7 +160,7 @@
                     {{ 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>
+                <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. Ein Feld vom Typ „Neuer Schritt“ eröffnet einen Abschnitt: seine Beschriftung ist der Titel, sein Hilfetext die Einleitung; alle Felder bis zum nächsten Schritt gehören dazu. Ein Feld oder ein Schritt kann von einer früheren Auswahl abhängen – dann verlangt der Server es nur, wenn die Bedingung zutrifft.</p>
 
                 <h3 class="form-part">Aussehen</h3>
                 <div class="fields form-look">
@@ -150,14 +185,22 @@
                 <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 == 'step' %}
+                    <div class="form-preview-step"><span class="form-preview-step-title">{{ row.label }}</span>{% if row.help %}<span class="form-preview-help">{{ row.help }}</span>{% endif %}</div>
+                    {% else %}
+                    <div class="form-preview-field{{ row.showIf|default(null) ? ' form-preview-conditional' : '' }}">
                         {% if row.type == 'consent' %}
                         <span class="form-preview-check"><span class="form-preview-box" aria-hidden="true"></span>{{ row.label }} *</span>
+                        {% elseif row.type == 'radio' or row.type == 'checkboxes' %}
+                        <span class="form-preview-label">{{ row.label }}{% if row.required %} *{% endif %}</span>
+                        {% for option in row.options %}<span class="form-preview-check"><span class="form-preview-box{{ row.type == 'radio' ? ' form-preview-radio' : '' }}" aria-hidden="true"></span>{{ option }}{% if row.images[option]|default('') %} <span class="muted">(mit Bild)</span>{% endif %}</span>{% endfor %}
                         {% 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>
+                        <span class="form-preview-input{{ row.type == 'textarea' ? ' form-preview-area' : '' }}{{ row.type == 'select' ? ' form-preview-select' : '' }}{{ row.type == 'number' ? ' form-preview-number' : '' }}" aria-hidden="true">{{ row.type == 'select' ? '— bitte wählen —' : (row.type == 'number' ? row.unit|default('') : '') }}</span>
                         {% endif %}
+                        {% if row.showIf|default(null) %}<span class="form-preview-help">Nur wenn {{ row.showIf.field }} = {{ row.showIf.values|join(' oder ') }}</span>{% endif %}
                     </div>
+                    {% endif %}
                     {% 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>

templates/admin/icon.html.twig

@@ -16,6 +16,7 @@
     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',
+    plugins: 'M9 3v3H6a1 1 0 0 0-1 1v3h3a2 2 0 1 1 0 4H5v4a1 1 0 0 0 1 1h4v-3a2 2 0 1 1 4 0v3h4a1 1 0 0 0 1-1v-4h-3a2 2 0 1 1 0-4h3V7a1 1 0 0 0-1-1h-3V3',
     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',

templates/admin/plugins.html.twig

@@ -0,0 +1,82 @@
+{% extends 'admin/shell.html.twig' %}
+{% set nav = 'plugins' %}
+{% block title %}Plugins{% endblock %}
+{% block heading %}Plugins{% endblock %}
+{% block lead %}Erweiterungen bringen eigene Bausteine, Vorlagen und Adressen mit. Sie liegen als Ordner unter <code>plugins/</code>; hier schaltest du sie ein und aus und stellst sie ein. Ein ausgeschaltetes Plugin lässt seine Bausteine in den Seiten stehen, zeigt sie aber nicht mehr.{% endblock %}
+
+{# Ein Feld aus dem Schema eines Plugins - dieselben sieben Arten wie im Editor. #}
+{% macro feld(plugin, key, schema, value) %}
+{% set id = 'plugin-' ~ plugin ~ '-' ~ key %}
+{% set name = 'settings[' ~ key ~ ']' %}
+{% if schema.kind == 'boolean' %}
+<div><label class="check-label" for="{{ id }}"><input id="{{ id }}" type="checkbox" name="{{ name }}" value="1"{{ value ? ' checked' : '' }}> {{ schema.label }}</label>{% if schema.help %}<p class="field-help">{{ schema.help }}</p>{% endif %}</div>
+{% else %}
+<div>
+    <label for="{{ id }}">{{ schema.label }}</label>
+    {% if schema.kind == 'textarea' %}<textarea id="{{ id }}" name="{{ name }}" rows="3" maxlength="{{ schema.maxLength }}">{{ value }}</textarea>
+    {% elseif schema.kind == 'select' %}<select id="{{ id }}" name="{{ name }}">{% for wert, text in schema.choices %}<option value="{{ wert }}"{{ value == wert ? ' selected' : '' }}>{{ text }}</option>{% endfor %}</select>
+    {% elseif schema.kind == 'number' %}<input id="{{ id }}" name="{{ name }}" type="number" step="any" min="{{ schema.min }}" max="{{ schema.max }}" value="{{ value }}">
+    {% elseif schema.kind == 'media' %}<input id="{{ id }}" name="{{ name }}" value="{{ value }}" placeholder="Kennung aus der Mediathek" pattern="[a-f0-9]{32}">
+    {% else %}<input id="{{ id }}" name="{{ name }}" value="{{ value }}" maxlength="{{ schema.maxLength }}">{% endif %}
+    {% if schema.help %}<p class="field-help">{{ schema.help }}</p>{% endif %}
+</div>
+{% endif %}
+{% endmacro %}
+
+{% block content %}
+{% import _self as f %}
+{% if plugins is empty %}
+<div class="empty"><h3>Keine Plugins gefunden.</h3><p>Ein Plugin ist ein Ordner unter <code>{{ directory }}</code> mit einer <code>plugin.json</code>. Wie eine aussieht, steht in <code>docs/PLUGINS.md</code>.</p></div>
+{% else %}
+<div class="rows">
+    {% for plugin in plugins %}
+    <article class="row row-top">
+        <div class="row-main">
+            <h2>{{ plugin.title }} <span class="count">{{ plugin.version }}</span></h2>
+            {% if plugin.description %}<p>{{ plugin.description }}</p>{% endif %}
+            {% if plugin.error %}
+            <p class="field-error">Nicht ladbar: {{ plugin.error }}</p>
+            {% else %}
+            <p class="muted">Ordner <code>plugins/{{ plugin.name }}</code>{% if plugin.requires %} · braucht KantSites {{ plugin.requires }}{% endif %}{% if plugin.active and plugin.activatedVersion and plugin.activatedVersion != plugin.version %} · seit dem Einschalten aktualisiert (war {{ plugin.activatedVersion }}){% endif %}</p>
+            <dl class="submission-data">
+                {% for block in plugin.blocks %}
+                <dt>{{ block.icon }} {{ block.label }}</dt>
+                <dd><code>{{ block.type }}</code>{% if block.description %} – {{ block.description }}{% endif %} · {{ block.props|length }} {{ block.props|length == 1 ? 'Eigenschaft' : 'Eigenschaften' }}{% if block.container %} · Container{% if block.children %} für {{ block.children|join(', ') }}{% endif %}{% endif %}{% if block.css %} · Stylesheet{% endif %}{% if block.script %} · Skript{% endif %}</dd>
+                {% endfor %}
+                {% for preset in plugin.presets %}
+                <dt>⬡ Vorlage „{{ preset.label }}“</dt>
+                <dd>{{ preset.description ?: 'Seitenvorlage für den Editor' }} · {{ preset.blocks|length }} {{ preset.blocks|length == 1 ? 'Baustein' : 'Bausteine' }}</dd>
+                {% endfor %}
+                {% for route in plugin.routes %}
+                <dt>↗ Adresse</dt>
+                <dd>{% if plugin.active %}<a href="{{ route.path }}">{{ route.path }}</a>{% else %}<code>{{ route.path }}</code>{% endif %} · {{ route.type }}</dd>
+                {% endfor %}
+            </dl>
+            {% if plugin.active and plugin.settings is not empty %}
+            <form method="post" action="{{ path('admin_plugin_settings', {name: plugin.name}) }}" class="plugin-settings">
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token('plugins') }}">
+                <h3 class="form-part">Einstellungen</h3>
+                <div class="fields">
+                    {% for key, schema in plugin.settings %}{{ f.feld(plugin.name, key, schema, plugin.values[key]|default('')) }}{% endfor %}
+                </div>
+                <button class="secondary" type="submit">Einstellungen speichern</button>
+            </form>
+            {% endif %}
+            {% endif %}
+        </div>
+        <div class="row-side">
+            <span class="pill {{ plugin.active ? 'pill-live' : 'pill-off' }}">{{ plugin.active ? 'Eingeschaltet' : 'Aus' }}</span>
+            {% if not plugin.error %}
+            <form method="post" action="{{ path('admin_plugin_toggle', {name: plugin.name, state: plugin.active ? 'aus' : 'an'}) }}">
+                <input type="hidden" name="_csrf_token" value="{{ csrf_token('plugins') }}">
+                <button class="{{ plugin.active ? 'secondary' : 'primary' }}" type="submit">{{ plugin.active ? 'Ausschalten' : 'Einschalten' }}</button>
+            </form>
+            {% endif %}
+        </div>
+    </article>
+    {% endfor %}
+</div>
+{% endif %}
+<p class="field-help">Plugin-Vorlagen laufen mit den Rechten der Website – es gibt keinen Sandkasten. Installiere nur, was du gelesen hast. Farben, Schriften und Buttons änderst du ausschließlich unter Design – ein Plugin fasst sie nicht an.</p>
+<p class="footnote">KantSites · Arbeitsstand</p>
+{% endblock %}

templates/admin/shell.html.twig

@@ -22,7 +22,7 @@
             <span class="shell-menu-label">{{ {
                 'pages': 'Seiten', 'posts': 'Beiträge', 'partials': 'Bereiche', 'menus': 'Menüs', 'media': 'Mediathek',
                 'forms': 'Formulare', 'statistics': 'Statistik', 'theme': 'Design',
-                'settings': 'Einstellungen', 'system': 'System', 'tasks': 'Aufgaben', 'users': 'Benutzer',
+                'settings': 'Einstellungen', 'system': 'System', 'tasks': 'Aufgaben', 'plugins': 'Plugins', 'users': 'Benutzer',
                 'account': 'Mein Konto'
             }[nav|default('')]|default('Verwaltung') }}</span>
         </summary>
@@ -48,6 +48,7 @@
             {% if is_granted('ROLE_PUBLISHER') %}<li><a class="nav-item" href="{{ path('admin_settings') }}"{{ nav|default('') == 'settings' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'settings'} only %}Einstellungen</a></li>{% endif %}
             {% if is_granted('ROLE_ADMIN') %}<li><a class="nav-item" href="{{ path('admin_system') }}"{{ nav|default('') == 'system' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'system'} only %}System</a></li>{% endif %}
             {% if is_granted('ROLE_ADMIN') %}<li><a class="nav-item" href="{{ path('admin_tasks') }}"{{ nav|default('') == 'tasks' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'tasks'} only %}Aufgaben</a></li>{% endif %}
+            {% if is_granted('ROLE_ADMIN') %}<li><a class="nav-item" href="{{ path('admin_plugins') }}"{{ nav|default('') == 'plugins' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'plugins'} only %}Plugins</a></li>{% endif %}
             {% if is_granted('ROLE_ADMIN') %}<li><a class="nav-item" href="{{ path('admin_users') }}"{{ nav|default('') == 'users' ? ' aria-current="page"' : '' }}>{% include 'admin/icon.html.twig' with {name: 'users'} only %}Benutzer</a></li>{% endif %}
             <li><a class="nav-item nav-out" href="/">{% include 'admin/icon.html.twig' with {name: 'external'} only %}Website ansehen</a></li>
         </ul>

templates/archive.html.twig

@@ -1,63 +0,0 @@
-<!doctype html>
-<html lang="de"{{ siteSettings.load().motion == 'respect' ? ' class="motion-respect"' : '' }}>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ heading }}{% if result.page > 1 %} · Seite {{ result.page }}{% endif %} · Beiträge</title>
-    <meta name="description" content="{{ term ? 'Beiträge zu ' ~ term.name : 'Alle Beiträge' }}.">
-    <link rel="canonical" href="{{ canonical }}">
-    {# Auch ein geteiltes Archiv soll einen Namen haben statt einer nackten Adresse. #}
-    <meta property="og:title" content="{{ heading }}{% if result.page > 1 %} · Seite {{ result.page }}{% endif %}">
-    <meta property="og:description" content="{{ term ? 'Beiträge zu ' ~ term.name : 'Alle Beiträge' }}.">
-    <meta property="og:type" content="website">
-    <meta property="og:url" content="{{ canonical }}">
-    <meta name="twitter:card" content="summary">
-    {% if result.page > 1 %}<link rel="prev" href="{{ base }}{{ result.page > 2 ? '?seite=' ~ (result.page - 1) : '' }}">{% endif %}
-    {% if result.page < result.pages %}<link rel="next" href="{{ base }}?seite={{ result.page + 1 }}">{% endif %}
-    <link rel="alternate" type="application/rss+xml" title="Beiträge" href="/feed.xml">
-    {% include 'favicon.html.twig' %}
-    <link rel="stylesheet" href="/assets/site.css?v={{ kant_version() }}">
-    <link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}">
-    <link rel="stylesheet" href="/assets/design.css?v={{ kant_version() }}">
-    {% if pageStyles|default('') %}<style>{{ pageStyles|raw }}</style>{% endif %}
-    {% if needsScrolled|default(false) %}<script type="module" src="/assets/scrolled.js?v={{ kant_version() }}"></script>{% endif %}
-</head>
-{% set consentOpen = not editing|default(false) and consentGate.needsBanner(app.request) %}
-<body class="kant{{ consentOpen ? ' consent-open' : '' }}">
-    <a class="skip-link" href="#main">Zum Inhalt springen</a>
-    {% if areas.header|default(null) %}
-    <header class="site-header{{ siteSettings.load().stickyHeader ? ' is-sticky' : '' }}{{ 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: areas.header.schemaVersion|default(1) >= 12, richHeadings: areas.header.schemaVersion|default(1) >= 17, eagerImage: null} only %}{% endfor %}
-    </header>
-    {% endif %}
-    <main id="main" tabindex="-1">
-        <section class="block-section tone-mint width-normal">
-            <div class="shell section-inner">
-                {% if term %}<p class="post-terms-label">{{ term.kind == 'category' ? 'Kategorie' : 'Schlagwort' }}</p>{% endif %}
-                <h1>{{ heading }}</h1>
-                <p class="block-text">{{ result.total }} {{ result.total == 1 ? 'Beitrag' : 'Beiträge' }}{% if result.pages > 1 %} · Seite {{ result.page }} von {{ result.pages }}{% endif %}</p>
-            </div>
-        </section>
-        <section class="block-section tone-paper width-normal">
-            <div class="shell section-inner">
-                {% include 'blocks/post-list.html.twig' with {posts: result.posts} only %}
-                {% if result.pages > 1 %}
-                <nav class="pagination" aria-label="Seiten">
-                    {% if result.page > 1 %}<a rel="prev" href="{{ base }}{{ result.page > 2 ? '?seite=' ~ (result.page - 1) : '' }}">← Neuere</a>{% endif %}
-                    <span>Seite {{ result.page }} von {{ result.pages }}</span>
-                    {% if result.page < result.pages %}<a rel="next" href="{{ base }}?seite={{ result.page + 1 }}">Ältere →</a>{% endif %}
-                </nav>
-                {% endif %}
-            </div>
-        </section>
-    </main>
-    {% 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({}), richText: areas.footer.schemaVersion|default(1) >= 12, richHeadings: areas.footer.schemaVersion|default(1) >= 17, eagerImage: null} only %}{% endfor %}
-    </footer>
-    {% endif %}
-    {% if not editing|default(false) and consentGate.needsBanner(app.request) %}
-        {% include 'consent-banner.html.twig' with {consent: consentGate.state(app.request), back: app.request.pathInfo} only %}
-    {% endif %}
-</body>
-</html>

templates/blocks/block.html.twig

@@ -79,11 +79,15 @@
         <a class="button" href="{{ props.href }}"{% include 'blocks/link-attributes.html.twig' with {newTab: props.newTab|default(false)} only %}>{{ props.buttonText }}</a>
     </div>
 {% elseif type == 'contact' %}
+    {% if not (props.phone|default('') or props.email|default('') or props.address|default('')) %}
+    {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Kontaktdaten: Telefon, E-Mail oder Adresse unter Inhalt eintragen.</p>{% endif %}
+    {% else %}
     <address id="{{ block.id }}" class="block-contact{{ designClasses }}">
         {% if props.phone|default('') %}<span>{% include 'blocks/icon.html.twig' with {name: 'phone'} only %}<a href="tel:{{ props.phone|replace({' ': '', '(': '', ')': '', '/': '', '-': ''}) }}">{{ props.phone }}</a></span>{% endif %}
         {% if props.email|default('') %}<span>{% include 'blocks/icon.html.twig' with {name: 'mail'} only %}<a href="mailto:{{ props.email }}">{{ props.email }}</a></span>{% endif %}
         {% if props.address|default('') %}<span>{% include 'blocks/icon.html.twig' with {name: 'pin'} only %}{{ props.address }}</span>{% endif %}
     </address>
+    {% endif %}
 {% elseif type == 'divider' %}
     <hr id="{{ block.id }}" class="block-divider{{ designClasses }}">
 {% elseif type == 'spacer' %}
@@ -114,7 +118,9 @@
     {# 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 %}
+    {% if props.partial|default('') == '' %}
+        {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Verknüpfte Sektion: unter Inhalt die Adresse einer Sektion eintragen.</p>{% endif %}
+    {% elseif 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({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
         </div>
@@ -135,9 +141,13 @@
     </nav>
     {% endif %}
 {% elseif type == 'form' %}
+    {% if props.form|default('') == '' %}
+    {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Formular: unter Inhalt die Adresse eines Formulars eintragen (siehe Verwaltung → Formulare).</p>{% endif %}
+    {% else %}
     <div id="{{ block.id }}" class="block-formwrap{{ designClasses }}">
-        {% include 'blocks/form.html.twig' with (forms[block.id]|default({form: null, sent: false, errors: {}, values: {}, blockId: block.id, page: {path: ''}, issued: 0, issuedSignature: ''})) only %}
+        {% include 'blocks/form.html.twig' with (forms[block.id]|default({form: null, sent: false, errors: {}, values: {}, optionImages: {}, blockId: block.id, page: {path: ''}, issued: 0, issuedSignature: ''})) only %}
     </div>
+    {% endif %}
 {% elseif type == 'tabs' %}
     {# Without the script this is an anchor list followed by every panel: complete and readable.
        tabs.js turns it into a tab widget; it only changes presentation, never content. #}
@@ -213,6 +223,9 @@
         {% endfor %}
     </div>
 {% elseif type == 'embed' %}
+    {% if props.url|default('') == '' %}
+    {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Externer Inhalt: unter Inhalt Adresse, Titel und Anbieter eintragen.</p>{% endif %}
+    {% else %}
     {# Content from a third party. Until the group is granted, nothing of it is requested - no
        iframe, no image, no preconnect. That is the whole point of the consent question: the
        placeholder is not a nicety, it is what keeps the promise.
@@ -241,6 +254,7 @@
         {% endif %}
     </div>
     {% endif %}
+    {% endif %}
 {% elseif type == 'postlist' %}
     <div id="{{ block.id }}" class="block-postlist{{ designClasses }}">
         {% set feed = postLists[block.id]|default([]) %}
@@ -264,6 +278,21 @@
     <div id="{{ block.id }}" class="block-gallery{{ designClasses }}" role="group" aria-label="Bildergalerie"{% if props.lightbox|default(false) %} data-zoom-group{% 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([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
     </div>
+{% elseif kant_plugin_block(type) %}
+    {# Ein Baustein eines aktiven Plugins. Die Vorlage bekommt nur, was der Kern geprüft hat:
+       die Eigenschaften nach dem Schema des Manifests. Passen sie nicht, bleibt der Platz leer. #}
+    {% set plugin = kant_plugin_block(type) %}
+    {% set pluginProps = kant_plugin_props(block) %}
+    {% if pluginProps is null %}
+    <!-- Block {{ block.id }} ({{ type }}) hat Eigenschaften, die nicht zum Plugin passen, und wird nicht dargestellt. -->
+    {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Baustein „{{ plugin.label }}“: die gespeicherten Eigenschaften passen nicht zum Plugin.</p>{% endif %}
+    {% else %}
+    {# Ein Container rendert seine Kinder hier, mit demselben Kontext wie jeder Kernbaustein, und
+       reicht sie der Vorlage fertig gerendert als `children` - so kommt eine Plugin-Vorlage nie
+       an Formulare, Beitragslisten oder die Navigation heran. #}
+    {% set childrenHtml %}{% if plugin.container %}{% 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({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}{% endif %}{% endset %}
+    {% include plugin.template with {block: block, props: pluginProps, designClasses: designClasses, editing: editing|default(false), plugin: plugin, children: childrenHtml, settings: kant_plugin_settings(plugin.plugin)} only %}
+    {% endif %}
 {% else %}
     {#
        A block whose plugin is not available. Its stored content stays in the document; the core

templates/blocks/form.html.twig

@@ -1,10 +1,14 @@
-{# Server rendered, no JavaScript. Errors are announced and each message sits at its field. #}
+{# Server rendered, no JavaScript needed. Errors are announced and each message sits at its field.
+   Schritte sind fieldsets: ohne Skript ein langes Formular mit Abschnitten, mit form-steps.js ein
+   Schritt nach dem anderen. Bedingungen stehen als Datenattribute am Feld; der Server prüft sie
+   beim Absenden selbst und verlangt nichts, was gar nicht galt. #}
 {% if form is null %}
     <p class="form-missing">Dieses Formular ist nicht mehr vorhanden.</p>
 {% elseif sent %}
     <p class="form-success" role="status">{{ form.settings.success }}</p>
 {% else %}
-<form class="block-form" data-form="{{ form.slug }}" method="post" action="{{ path('form_submit', {slug: form.slug}) }}" novalidate>
+{% set hasSteps = form.fields|filter(f => f.type == 'step')|length > 0 %}
+<form class="block-form{{ hasSteps ? ' form-stepped' : '' }}" data-form="{{ form.slug }}" method="post" action="{{ path('form_submit', {slug: form.slug}) }}" novalidate{% if hasSteps %} data-steps{% endif %}{% if form.settings.summary|default(false) %} data-summary{% endif %}>
     <input type="hidden" name="page" value="{{ page.path }}">
     <input type="hidden" name="block" value="{{ blockId }}">
     <input type="hidden" name="issued" value="{{ issued }}">
@@ -21,15 +25,49 @@
         {% set error = errors[field.name]|default(null) %}
         {% set value = values[field.name]|default('') %}
         {% set described = (field.help ? id ~ '-help ' : '') ~ (error ? id ~ '-error' : '') %}
-        <div class="form-field{{ error ? ' has-error' : '' }}">
-            {% if field.type == 'consent' %}
+        {% set condition %}{% if field.showIf|default(null) %} data-show-if="{{ field.showIf.field }}" data-show-values="{{ field.showIf.values|join('|') }}"{% endif %}{% endset %}
+        {% set requiredMark %}{% if field.required %} <span class="required-mark" aria-hidden="true">*</span><span class="visually-hidden"> (Pflichtfeld)</span>{% endif %}{% endset %}
+        {% if field.type == 'step' %}
+            {% if not loop.first and form.fields[0:loop.index0]|filter(f => f.type == 'step')|length > 0 %}</fieldset>{% endif %}
+            <fieldset class="form-step" data-step{{ condition }}>
+                <legend class="form-step-title" tabindex="-1">{{ field.label }}</legend>
+                {% if field.help %}<p class="form-step-intro">{{ field.help }}</p>{% endif %}
+        {% elseif field.type == 'consent' %}
+            <div class="form-field{{ error ? ' has-error' : '' }}" data-field data-label="{{ field.label }}"{{ condition }}>
                 <div class="check-row">
                     <input id="{{ id }}" name="{{ field.name }}" type="checkbox" value="ja"{{ value ? ' checked' : '' }} required
                            {% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>
                     <label for="{{ id }}">{{ field.label }} <span class="required-mark" aria-hidden="true">*</span></label>
                 </div>
-            {% else %}
-                <label for="{{ id }}">{{ field.label }}{% if field.required %} <span class="required-mark" aria-hidden="true">*</span><span class="visually-hidden"> (Pflichtfeld)</span>{% endif %}</label>
+                {% if field.help %}<p class="field-note" id="{{ id }}-help">{{ field.help }}</p>{% endif %}
+                {% if error %}<p class="field-error" id="{{ id }}-error">{{ error }}</p>{% endif %}
+            </div>
+        {% elseif field.type == 'radio' or field.type == 'checkboxes' %}
+            {# Eine Gruppe: die Beschriftung ist die legend, jede Option hat ihr eigenes Feld. Bei
+               der Mehrfachauswahl steht required nicht am Kästchen - das hieße „alle ankreuzen“ -
+               sondern an der Gruppe; Skript und Server prüfen es dort. #}
+            {# Hat eine Option ein Bild, wird die ganze Auswahl zur Bildauswahl: jede Option eine
+               Karte mit Bild und Text, das Kästchen bleibt darin für Tastatur und Vorlesesoftware. #}
+            {% set bildauswahl = field.images|default({})|length > 0 %}
+            <fieldset class="form-field form-choice{{ bildauswahl ? ' form-choice-images' : '' }}{{ error ? ' has-error' : '' }}" data-field data-label="{{ field.label }}"{{ condition }}{% if field.type == 'checkboxes' and field.required %} data-required{% endif %}
+                      {% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}>
+                <legend>{{ field.label }}{{ requiredMark }}</legend>
+                {% set picked = field.type == 'checkboxes' ? value|split(', ') : [value] %}
+                {% if bildauswahl %}<div class="form-choice-grid">{% endif %}
+                {% for option in field.options %}
+                {% set bild = optionImages[field.images[option]|default('')]|default(null) %}
+                <div class="{{ bildauswahl ? 'form-choice-card' : 'check-row' }}">
+                    <input id="{{ id }}-{{ loop.index }}" name="{{ field.name }}{{ field.type == 'checkboxes' ? '[]' : '' }}" type="{{ field.type == 'checkboxes' ? 'checkbox' : 'radio' }}" value="{{ option }}"{{ option in picked ? ' checked' : '' }}{{ field.type == 'radio' and field.required ? ' required' : '' }}{{ error ? ' aria-invalid="true"' : '' }}>
+                    <label for="{{ id }}-{{ loop.index }}">{% if bildauswahl %}<span class="form-choice-picture">{% if bild %}<img src="{{ bild.src }}" alt="" width="{{ bild.width }}" height="{{ bild.height }}" loading="lazy" decoding="async">{% endif %}</span><span class="form-choice-text">{{ option }}</span>{% else %}{{ option }}{% endif %}</label>
+                </div>
+                {% endfor %}
+                {% if bildauswahl %}</div>{% endif %}
+                {% if field.help %}<p class="field-note" id="{{ id }}-help">{{ field.help }}</p>{% endif %}
+                {% if error %}<p class="field-error" id="{{ id }}-error">{{ error }}</p>{% endif %}
+            </fieldset>
+        {% else %}
+            <div class="form-field{{ error ? ' has-error' : '' }}" data-field data-label="{{ field.label }}"{{ condition }}>
+                <label for="{{ id }}">{{ field.label }}{{ requiredMark }}{% if field.unit|default('') %}<span class="visually-hidden"> in {{ field.unit }}</span>{% endif %}</label>
                 {% if field.type == 'textarea' %}
                     <textarea id="{{ id }}" name="{{ field.name }}" rows="6" maxlength="5000"{{ field.required ? ' required' : '' }}
                               {% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>{{ value }}</textarea>
@@ -39,6 +77,14 @@
                         <option value="">— bitte wählen —</option>
                         {% for option in field.options %}<option value="{{ option }}"{{ value == option ? ' selected' : '' }}>{{ option }}</option>{% endfor %}
                     </select>
+                {% elseif field.type == 'number' %}
+                    <div class="form-number{{ field.unit|default('') ? ' has-unit' : '' }}">
+                        <input id="{{ id }}" name="{{ field.name }}" value="{{ value }}" type="number" step="any" inputmode="decimal"
+                               {% if field.min is not null %}min="{{ field.min }}"{% endif %} {% if field.max is not null %}max="{{ field.max }}"{% endif %}
+                               {{ field.required ? ' required' : '' }}
+                               {% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>
+                        {% if field.unit|default('') %}<span class="form-unit" aria-hidden="true">{{ field.unit }}</span>{% endif %}
+                    </div>
                 {% else %}
                     <input id="{{ id }}" name="{{ field.name }}" value="{{ value }}" maxlength="200"
                            type="{{ {email: 'email', phone: 'tel'}[field.type]|default('text') }}"
@@ -46,11 +92,12 @@
                            {{ field.required ? ' required' : '' }}
                            {% if described|trim %}aria-describedby="{{ described|trim }}"{% endif %}{{ error ? ' aria-invalid="true"' : '' }}>
                 {% endif %}
-            {% endif %}
-            {% if field.help %}<p class="field-note" id="{{ id }}-help">{{ field.help }}</p>{% endif %}
-            {% if error %}<p class="field-error" id="{{ id }}-error">{{ error }}</p>{% endif %}
-        </div>
+                {% if field.help %}<p class="field-note" id="{{ id }}-help">{{ field.help }}</p>{% endif %}
+                {% if error %}<p class="field-error" id="{{ id }}-error">{{ error }}</p>{% endif %}
+            </div>
+        {% endif %}
     {% endfor %}
+    {% if hasSteps %}</fieldset>{% endif %}
     {% if turnstileKey|default('') %}
     {# Cloudflare Turnstile. Braucht JavaScript; ohne Skript bleibt das Formular unabsendbar, und
        genau deshalb ist die Prüfung eine Entscheidung und keine Voreinstellung. #}

templates/page.html.twig

@@ -9,6 +9,7 @@
     <title>{{ seoTitle }}</title>
     <meta name="description" content="{{ page.document.description }}">
     {% if canonical|default(null) %}<link rel="canonical" href="{{ canonical }}">{% endif %}
+    {% if pagination|default(null) %}{% if pagination.page > 1 %}<link rel="prev" href="{{ pagination.base }}{{ pagination.page > 2 ? '?seite=' ~ (pagination.page - 1) : '' }}">{% endif %}{% if pagination.page < pagination.pages %}<link rel="next" href="{{ pagination.base }}?seite={{ pagination.page + 1 }}">{% endif %}{% endif %}
     {% if page.robots|default('index') != 'index' %}<meta name="robots" content="noindex, follow">{% endif %}
     <meta property="og:title" content="{{ seoTitle }}">
     <meta property="og:description" content="{{ page.document.description }}">
@@ -49,16 +50,20 @@
     {% if page.document.schemaVersion >= 2 %}<link rel="stylesheet" href="/assets/design.css?v={{ kant_version() }}">{% endif %}
     {% if page.document.schemaVersion >= 3 %}<link rel="stylesheet" href="/assets/enhancements.css?v={{ kant_version() }}">{% endif %}
     {% endif %}
+    {% for href in pluginStyles|default([]) %}<link rel="stylesheet" href="{{ href }}">{% endfor %}
 {% if hasPosts|default(false) %}    <link rel="alternate" type="application/rss+xml" title="Beiträge" href="/feed.xml">
 {% endif %}
     {% if needsTabs|default(false) %}<script src="/assets/tabs.js?v={{ kant_version() }}" defer></script>{% endif %}
+    {% if needsFormScript|default(false) and not editing|default(false) %}<script src="/assets/form-steps.js?v={{ kant_version() }}" defer></script>{% endif %}
     {% if needsSlider|default(false) %}<script type="module" src="/assets/slider.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsMotion|default(false) %}<script type="module" src="/assets/motion.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsScrolled|default(false) %}<script type="module" src="/assets/scrolled.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsZoom|default(false) %}<script src="/assets/lightbox.js?v={{ kant_version() }}" defer></script>{% endif %}
+    {% if not editing|default(false) %}{% for src in pluginScripts|default([]) %}<script src="{{ src }}" defer></script>{% endfor %}{% endif %}
     {# Own scripts of this page, as a file. Never rendered in the editor preview: the preview must
        show the layout, not run code that could change the page under the editor's hands. #}
     {% if pageScript|default(null) and not editing|default(false) %}<script src="{{ pageScript }}" defer></script>{% endif %}
+    {% if not editing|default(false) %}{% for src in areaScripts|default([]) %}<script src="{{ src }}" defer></script>{% endfor %}{% endif %}
     {# A data block, not a script: CSP script-src does not apply to application/ld+json. #}
     {% for block in structuredData|default([]) %}<script type="application/ld+json">{{ block|json_encode(constant('JSON_UNESCAPED_SLASHES') b-or constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_HEX_TAG') b-or constant('JSON_HEX_AMP'))|raw }}</script>
     {% endfor %}
@@ -78,7 +83,7 @@
        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' : '' }}{{ 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 %}
+        {% for block in areas.header.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({}), richText: areas.header.schemaVersion|default(1) >= 12, richHeadings: areas.header.schemaVersion|default(1) >= 17, eagerImage: eagerImage|default(null), inHeader: true} only %}{% endfor %}
     </header>
     {% endif %}
     <main id="main" tabindex="-1">
@@ -94,7 +99,7 @@
     </main>
     {% 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({}), richText: areas.footer.schemaVersion|default(1) >= 12, richHeadings: areas.footer.schemaVersion|default(1) >= 17, eagerImage: null} only %}{% endfor %}
+        {% for block in areas.footer.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({}), richText: areas.footer.schemaVersion|default(1) >= 12, richHeadings: areas.footer.schemaVersion|default(1) >= 17, eagerImage: null} only %}{% endfor %}
     </footer>
     {% endif %}
     {% if not editing|default(false) and consentGate.needsBanner(app.request) %}