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/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. #}