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>

plugins/vergleich/assets/bildvergleich.css

@@ -0,0 +1,23 @@
+/* Bildvergleich. Die Position kommt als --pos (Prozent) vom Skript; ohne Skript gilt die Mitte. */
+.block-bildvergleich{--pos:50%;margin:0}
+.bildvergleich-buehne{position:relative;margin:0;overflow:hidden;user-select:none;-webkit-user-select:none}
+.bildvergleich-rund .bildvergleich-buehne{border-radius:12px}
+.bildvergleich-buehne img{display:block;width:100%;height:auto;border-radius:0}
+.bildvergleich-vorher{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
+.bildvergleich-linie{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
+.bildvergleich-linie::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#182d2b;display:grid;place-items:center;font-size:20px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
+.bildvergleich-etikett{position:absolute;top:14px;padding:6px 10px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
+.bildvergleich-etikett-vorher{left:14px}
+.bildvergleich-etikett-nachher{right:14px}
+.bildvergleich-regler{position:absolute;inset:0;display:block;cursor:ew-resize}
+.bildvergleich-regler input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
+.bildvergleich-regler input:focus-visible{opacity:1;appearance:none;-webkit-appearance:none;background:transparent;outline:3px solid #fff;outline-offset:-6px}
+.block-bildvergleich .block-unavailable{margin:0}
+/* Griff als Punkt statt Pfeile (Plugin-Einstellung). */
+.bildvergleich-griff-punkt .bildvergleich-linie::after{content:'';width:22px;height:22px}
+/* Die Vergleichsgalerie: ein Raster aus Bildvergleichen. */
+.block-vergleichsgalerie{margin:0}
+.vergleichsgalerie-titel{margin:0 0 18px}
+.vergleichsgalerie-raster{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
+.vergleichsgalerie-3 .vergleichsgalerie-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
+@media(max-width:767px){.vergleichsgalerie-raster,.vergleichsgalerie-3 .vergleichsgalerie-raster{grid-template-columns:1fr}}

plugins/vergleich/assets/bildvergleich.js

@@ -0,0 +1,14 @@
+/**
+ * Bildvergleich: der Regler setzt --pos auf der Bühne. Ohne dieses Skript steht der Vergleich
+ * bei der gespeicherten Startposition; Tastatur und Vorlesesoftware bedienen das native
+ * Bereichsfeld in beiden Fällen.
+ */
+(() => {
+  for (const block of document.querySelectorAll('[data-bildvergleich]')) {
+    const range = block.querySelector('input[type="range"]');
+    if (!range) continue;
+    const apply = () => block.style.setProperty('--pos', `${range.value}%`);
+    range.addEventListener('input', apply);
+    apply();
+  }
+})();

plugins/vergleich/blocks/bildvergleich.html.twig

@@ -0,0 +1,24 @@
+{# Bildvergleich: das Nachher-Bild liegt unten, das Vorher-Bild darüber und wird per clip-path
+   auf den linken Teil beschnitten. Der Regler ist ein natives Bereichsfeld – ohne Skript bleibt
+   er stehen, beide Bilder sind trotzdem zu sehen. Die Vorlage bekommt nur, was der Kern geprüft
+   hat: `props` nach dem Schema, `settings` des Plugins, `block.id`, `designClasses`. #}
+{% set vorher = props.before ? kant_plugin_media(props.before) : null %}
+{% set nachher = props.after ? kant_plugin_media(props.after) : null %}
+{% set labelVorher = props.labelBefore ?: settings.labelBefore|default('Vorher') %}
+{% set labelNachher = props.labelAfter ?: settings.labelAfter|default('Nachher') %}
+<div id="{{ block.id }}" class="block-bildvergleich{{ props.rounded ? ' bildvergleich-rund' : '' }} bildvergleich-griff-{{ settings.handle|default('pfeile') }}{{ designClasses }}" data-bildvergleich data-position="{{ props.position }}">
+{% if vorher and nachher %}
+    {% set gross = nachher.variants|last %}
+    <figure class="bildvergleich-buehne">
+        <img class="bildvergleich-nachher" src="{{ gross.src }}" srcset="{% for v in nachher.variants %}{{ v.src }} {{ v.width }}w{{ loop.last ? '' : ', ' }}{% endfor %}" sizes="(max-width: 1320px) 100vw, 1320px" width="{{ gross.width }}" height="{{ gross.height }}" alt="{{ props.alt ?: nachher.alt }}" loading="lazy" decoding="async">
+        {% set grossVorher = vorher.variants|last %}
+        <img class="bildvergleich-vorher" src="{{ grossVorher.src }}" srcset="{% for v in vorher.variants %}{{ v.src }} {{ v.width }}w{{ loop.last ? '' : ', ' }}{% endfor %}" sizes="(max-width: 1320px) 100vw, 1320px" width="{{ grossVorher.width }}" height="{{ grossVorher.height }}" alt="" loading="lazy" decoding="async">
+        <span class="bildvergleich-etikett bildvergleich-etikett-vorher" aria-hidden="true">{{ labelVorher }}</span>
+        <span class="bildvergleich-etikett bildvergleich-etikett-nachher" aria-hidden="true">{{ labelNachher }}</span>
+        <span class="bildvergleich-linie" aria-hidden="true"></span>
+        <label class="bildvergleich-regler"><span class="visually-hidden">{{ labelVorher }} und {{ labelNachher }} vergleichen: Regler verschieben</span><input type="range" min="0" max="100" value="{{ props.position }}" step="1"></label>
+    </figure>
+{% else %}
+    <p class="block-unavailable">{{ editing ? 'Bildvergleich: bitte unter Inhalt ein Bild für vorher und eines für nachher wählen.' : '' }}</p>
+{% endif %}
+</div>

plugins/vergleich/blocks/galerie.html.twig

@@ -0,0 +1,10 @@
+{# Die Vergleichsgalerie: ein Container. Seine Kinder kommen fertig gerendert als `children`
+   herein - der Kern hat sie mit demselben Kontext gerendert wie jeden anderen Baustein. #}
+<div id="{{ block.id }}" class="block-vergleichsgalerie vergleichsgalerie-{{ props.columns }}{{ designClasses }}">
+    {% if props.title %}<h3 class="vergleichsgalerie-titel">{{ props.title }}</h3>{% endif %}
+    {% if children|trim %}
+    <div class="vergleichsgalerie-raster">{{ children }}</div>
+    {% elseif editing %}
+    <p class="block-unavailable">Vergleichsgalerie: Bildvergleiche hier hineinziehen.</p>
+    {% endif %}
+</div>

plugins/vergleich/plugin.json

@@ -0,0 +1,63 @@
+{
+  "name": "vergleich",
+  "title": "Bildvergleich",
+  "description": "Vorher und nachher in einem Bild: ein Regler schiebt zwischen zwei Aufnahmen – für Renovierungen, Malerarbeiten, Sanierungen.",
+  "version": "1.1.0",
+  "requires": "1.17.0",
+  "settings": {
+    "labelBefore": { "kind": "text", "label": "Standardbeschriftung vorher", "default": "Vorher", "maxLength": 40 },
+    "labelAfter": { "kind": "text", "label": "Standardbeschriftung nachher", "default": "Nachher", "maxLength": 40 },
+    "handle": { "kind": "select", "label": "Griff des Reglers", "choices": { "pfeile": "Pfeile", "punkt": "Punkt" }, "default": "pfeile" }
+  },
+  "blocks": {
+    "bildvergleich": {
+      "label": "Bildvergleich",
+      "description": "Zwei Bilder übereinander, ein Regler dazwischen.",
+      "icon": "⇔",
+      "template": "blocks/bildvergleich.html.twig",
+      "css": "assets/bildvergleich.css",
+      "script": "assets/bildvergleich.js",
+      "props": {
+        "before": { "kind": "media", "label": "Bild vorher" },
+        "after": { "kind": "media", "label": "Bild nachher" },
+        "labelBefore": { "kind": "text", "label": "Beschriftung vorher", "help": "Leer: die Standardbeschriftung aus den Plugin-Einstellungen.", "maxLength": 40 },
+        "labelAfter": { "kind": "text", "label": "Beschriftung nachher", "maxLength": 40 },
+        "alt": { "kind": "text", "label": "Was die Bilder zeigen", "help": "Ein Satz für Vorlesesoftware, zum Beispiel „Fassade vor und nach dem Anstrich“.", "maxLength": 200 },
+        "position": { "kind": "number", "label": "Startposition des Reglers (%)", "min": 5, "max": 95, "default": 50 },
+        "rounded": { "kind": "boolean", "label": "Abgerundete Ecken", "default": true }
+      }
+    },
+    "galerie": {
+      "label": "Vergleichsgalerie",
+      "description": "Mehrere Bildvergleiche nebeneinander im Raster.",
+      "icon": "⊞",
+      "template": "blocks/galerie.html.twig",
+      "css": "assets/bildvergleich.css",
+      "container": true,
+      "children": ["vergleich.bildvergleich"],
+      "props": {
+        "columns": { "kind": "select", "label": "Spalten am Schreibtisch", "choices": { "2": "Zwei", "3": "Drei" }, "default": "2" },
+        "title": { "kind": "text", "label": "Überschrift der Galerie", "maxLength": 120 }
+      }
+    }
+  },
+  "presets": {
+    "abschnitt": {
+      "label": "Vorher-Nachher-Abschnitt",
+      "description": "Eine Sektion mit Überschrift, kurzem Text und einem Bildvergleich.",
+      "blocks": [
+        {
+          "id": "vergleich-abschnitt", "type": "section", "layout": { "tone": "paper", "width": "normal" },
+          "children": [
+            { "id": "vergleich-titel", "type": "heading", "props": { "text": "Vorher und nachher", "level": 2 } },
+            { "id": "vergleich-text", "type": "text", "props": { "text": "Ziehen Sie den Regler und sehen Sie den Unterschied." } },
+            { "id": "vergleich-bild", "type": "vergleich.bildvergleich", "props": { "before": "", "after": "", "labelBefore": "", "labelAfter": "", "alt": "", "position": 50, "rounded": true } }
+          ]
+        }
+      ]
+    }
+  },
+  "routes": {
+    "daten": { "path": "/vergleich/daten", "template": "routes/daten.json.twig", "type": "json" }
+  }
+}

plugins/vergleich/routes/daten.json.twig

@@ -0,0 +1,3 @@
+{# Eine eigene Adresse des Plugins: die Einstellungen als JSON - fuer eine App oder ein Skript,
+   das die Beschriftungen kennen will. Die Vorlage bekommt `settings`, `query` und `route`. #}
+{{ {plugin: 'vergleich', labels: {before: settings.labelBefore, after: settings.labelAfter}, handle: settings.handle, echo: query}|json_encode(constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES'))|raw }}