Zehn Blöcke für die Abschnitte der Pilotseite (Arbeitspaket C)

Dokumentschema v6 ergänzt iconcard, stat, quote, logos, cta, contact,
divider, spacer, accordion und accordionitem - die Abschnittsarten,
aus denen die Startseite von kant-it.de besteht.

Symbole liegen als Inline-SVG aus einer festen Liste im Template:
kein Symbolschriftsatz, keine externe Anfrage. Kontaktdaten werden zu
tel:- und mailto:-Verweisen mit bereinigter Nummer. Das Akkordeon
nutzt details/summary und braucht damit kein öffentliches
JavaScript.

Tabs sind bewusst nicht umgesetzt: ohne JavaScript gibt es dafür
keine zugängliche Lösung, und eine CSS-Variante über Radiobuttons
wird als Auswahlfeld statt als Tabliste angekündigt. Begründung in
ADR 015.

Zwei Fehler von den Tests gefunden und behoben: die Regel "ein
Akkordeon-Eintrag gehört in ein Akkordeon" griff nicht auf oberster
Dokumentebene, und ein JavaScript-Test suchte im vorherigen
Dokumentstand, weil history.document vor history.change ausgewertet
wurde.

Geprüft: 107 PHP-Tests / 380 Assertions unter PHP 8.2.12 und 8.4.22,
13 JavaScript-Modelltests, Lint/Format/Container. Keine Browser- oder
Lighthouse-Läufe; für die neuen Blöcke liegt damit keine visuelle
Kontrolle und keine Barrierefreiheitsprüfung vor.

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

public/assets/design-tokens.json

@@ -6,7 +6,11 @@
       "row",
       "column",
       "heading",
-      "text"
+      "text",
+      "iconcard",
+      "stat",
+      "quote",
+      "cta"
     ],
     "values": {
       "left": [
@@ -105,7 +109,8 @@
     "label": "Innenabstand oben / unten",
     "types": [
       "section",
-      "column"
+      "column",
+      "accordionitem"
     ],
     "values": {
       "none": [
@@ -133,7 +138,8 @@
   "paddingX": {
     "label": "Innenabstand links / rechts",
     "types": [
-      "column"
+      "column",
+      "accordionitem"
     ],
     "values": {
       "none": [
@@ -164,7 +170,18 @@
       "text",
       "image",
       "button",
-      "gallery"
+      "gallery",
+      "iconcard",
+      "stat",
+      "quote",
+      "cta",
+      "contact",
+      "divider",
+      "spacer",
+      "postlist",
+      "logos",
+      "accordion",
+      "accordionitem"
     ],
     "values": {
       "none": [
@@ -195,7 +212,18 @@
       "text",
       "image",
       "button",
-      "gallery"
+      "gallery",
+      "iconcard",
+      "stat",
+      "quote",
+      "cta",
+      "contact",
+      "divider",
+      "spacer",
+      "postlist",
+      "logos",
+      "accordion",
+      "accordionitem"
     ],
     "values": {
       "none": [
@@ -220,7 +248,9 @@
     "label": "Spaltenabstand",
     "types": [
       "row",
-      "gallery"
+      "gallery",
+      "logos",
+      "accordion"
     ],
     "values": {
       "none": [
@@ -245,7 +275,8 @@
     "label": "Spaltenaufteilung",
     "types": [
       "row",
-      "gallery"
+      "gallery",
+      "logos"
     ],
     "values": {
       "auto": [
@@ -275,7 +306,10 @@
     "types": [
       "column",
       "image",
-      "button"
+      "button",
+      "iconcard",
+      "quote",
+      "cta"
     ],
     "values": {
       "none": [

public/assets/editor-model.js

@@ -1,14 +1,18 @@
-export const labels = { section: 'Sektion', row: 'Zeile', column: 'Spalte', heading: 'Überschrift', text: 'Text', image: 'Bild', button: 'Button', gallery: 'Galerie', postlist: 'Beitragsliste' };
-export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H', text: 'T', image: '▧', button: '↗', gallery: '▦', postlist: '☷' };
+export const labels = { 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', divider: 'Trennlinie', spacer: 'Abstand', accordion: 'Akkordeon', accordionitem: 'Akkordeon-Eintrag' };
+export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H', text: 'T', image: '▧', button: '↗', gallery: '▦', postlist: '☷', iconcard: '◈', stat: '№', quote: '❝', logos: '⬚', cta: '◉', contact: '✆', divider: '—', spacer: '⇳', accordion: '⌵', accordionitem: '·' };
 // A namespaced type belongs to a plugin this installation may not have. Such blocks stay in the
 // document, stay selectable and movable, but the editor never edits or fills them.
 export const PLUGIN_TYPE = /^[a-z][a-z0-9]{1,30}\.[a-z][a-z0-9-]{1,40}$/;
 export const isPluginBlock = block => typeof block?.type === 'string' && PLUGIN_TYPE.test(block.type);
 export const blockLabel = block => labels[block?.type] ?? (isPluginBlock(block) ? `Baustein ${block.type}` : 'Unbekannt');
 export const blockIcon = block => icons[block?.type] ?? '❔';
-export const isContainer = block => ['section', 'row', 'column', 'gallery'].includes(block?.type);
+export const isContainer = block => ['section', 'row', 'column', 'gallery', 'logos', 'accordion', 'accordionitem'].includes(block?.type);
 // Nothing may be dropped into a plugin block: the core does not know its layout contract.
-export const canContain = (parent, block) => isContainer(parent) && !isPluginBlock(parent) && (parent.type !== 'gallery' || block.type === 'image');
+// Containers that accept only one kind of child, mirrored by the server side validator.
+export const ONLY_CHILD = { gallery: 'image', logos: 'image', accordion: 'accordionitem' };
+export const canContain = (parent, block) => isContainer(parent) && !isPluginBlock(parent)
+  && (ONLY_CHILD[parent.type] === undefined || ONLY_CHILD[parent.type] === block.type)
+  && (block.type !== 'accordionitem' || parent.type === 'accordion');
 export const clone = value => structuredClone(value);
 
 export function locate(blocks, id, parent = null) {
@@ -25,10 +29,18 @@ export function createBlock(type) {
   if (!Object.hasOwn(labels, type)) throw new Error('Unbekannter Block.');
   const block = { id: `b_${crypto.randomUUID().replaceAll('-', '')}`, type };
   if (isContainer(block)) block.children = [];
+  if (type === 'accordion') block.children = [createBlock('accordionitem')];
   if (type === 'heading') block.props = { text: 'Deine neue Überschrift', level: 2 };
   if (type === 'text') block.props = { text: 'Hier beginnt dein neuer Inhalt.' };
   if (type === 'button') block.props = { text: 'Mehr erfahren', href: '/' };
   if (type === 'postlist') block.props = { count: 3, category: '', tag: '' };
+  if (type === 'iconcard') block.props = { icon: 'check', title: 'Deine Leistung', text: 'Beschreibe hier kurz, worum es geht.', href: '' };
+  if (type === 'stat') block.props = { value: '15+', label: 'Jahre Erfahrung' };
+  if (type === 'quote') block.props = { text: 'Ein Satz, den eine Kundin oder ein Kunde über dich gesagt hat.', author: 'Name', role: '', rating: 5 };
+  if (type === 'cta') block.props = { title: 'Bereit für den nächsten Schritt?', text: '', buttonText: 'Jetzt anfragen', href: '/' };
+  if (type === 'contact') block.props = { phone: '', email: '', address: '' };
+  if (type === 'spacer') block.props = { size: 'medium' };
+  if (type === 'accordionitem') block.props = { title: 'Eine Frage', open: false };
   if (type === 'image') block.props = { src: '/assets/image-placeholder.svg', alt: 'Abstrakte Landschaft als Platzhalter', decorative: false, width: 1000, height: 600 };
   return block;
 }
@@ -37,6 +49,7 @@ export function insertBlock(document, type, selected) {
   const block = createBlock(type);
   if (type === 'gallery') upgradeDocument(document, 3);
   if (type === 'postlist') upgradeDocument(document, 5);
+  if (['iconcard', 'stat', 'quote', 'logos', 'cta', 'contact', 'divider', 'spacer', 'accordion', 'accordionitem'].includes(type)) upgradeDocument(document, 6);
   let target = locate(document.blocks, selected);
   if (target?.block.type === 'gallery' && type !== 'image') { target.siblings.splice(target.index + 1, 0, block); return block.id; }
   if (target?.parent?.type === 'gallery' && type !== 'image') target = locate(document.blocks, target.parent.id);
@@ -78,7 +91,7 @@ export const devices = { desktop: 'Desktop', tablet: 'Tablet', mobile: 'Mobil' }
 
 // Called only inside a history transaction: all other fields and IDs stay untouched.
 export function upgradeDocument(document, version = 2) {
-  if (![1, 2, 3, 4, 5].includes(document.schemaVersion) || ![2, 3, 4, 5].includes(version)) throw new Error('Unbekanntes Dokumentschema.');
+  if (![1, 2, 3, 4, 5, 6].includes(document.schemaVersion) || ![2, 3, 4, 5, 6].includes(version)) throw new Error('Unbekanntes Dokumentschema.');
   document.schemaVersion = Math.max(document.schemaVersion, version);
   return document;
 }
@@ -95,7 +108,7 @@ export function effectiveDesign(block, device, key) {
 }
 
 export function setDesign(document, id, device, key, value) {
-  if (![1, 2, 3, 4, 5].includes(document.schemaVersion)) throw new Error('Unbekanntes Dokumentschema.');
+  if (![1, 2, 3, 4, 5, 6].includes(document.schemaVersion)) throw new Error('Unbekanntes Dokumentschema.');
   if (!Object.hasOwn(devices, device)) throw new Error('Unbekannte Vorschaugröße.');
   const block = locate(document.blocks, id)?.block;
   if (!block) return;

public/assets/editor.js

@@ -1,6 +1,9 @@
 import { EditorHistory, labels, icons, blockLabel, blockIcon, isPluginBlock, locate, clone, isContainer, canContain, insertBlock, duplicateBlock, moveBlock, devices, effectiveDesign, setDesign, blockPath, insertPreset, setEffect, insertMedia, upgradeDocument } from './editor-model.js';
 import { openMedia } from './media.js';
 
+// Mirrors DocumentValidator::ICONS; the server rejects anything outside this list.
+const ICONS = ['app', 'web', 'design', 'network', 'hardware', 'shop', 'support', 'shield', 'clock', 'star', 'phone', 'mail', 'pin', 'check'];
+
 const root = document.querySelector('#editor');
 const $ = selector => document.querySelector(selector);
 const api = `/admin/api/pages/${encodeURIComponent(root.dataset.pageId)}`;
@@ -170,6 +173,38 @@ function renderProperties() {
   }
   if (['heading', 'text', 'button'].includes(block.type)) field(block.type === 'button' ? 'Beschriftung' : 'Text', 'text', block.props.text, { multiline: block.type !== 'button' });
   if (block.type === 'heading') field('Überschriftenebene', 'level', block.props.level, { number: true, choices: { 1: 'H1 · Hauptüberschrift', 2: 'H2 · Abschnitt', 3: 'H3 · Unterabschnitt', 4: 'H4', 5: 'H5', 6: 'H6' }, help: 'Jede Seite benötigt genau eine H1.' });
+  if (block.type === 'iconcard') {
+    field('Symbol', 'icon', block.props.icon, { choices: Object.fromEntries(ICONS.map(name => [name, name])) });
+    field('Titel', 'title', block.props.title, { maxLength: 120 });
+    field('Text', 'text', block.props.text, { multiline: true, maxLength: 600 });
+    field('Linkziel', 'href', block.props.href || '', { help: 'Optional. Lokaler Pfad, Sprungmarke oder HTTPS-Adresse.' });
+  }
+  if (block.type === 'stat') {
+    field('Zahl', 'value', block.props.value, { maxLength: 16, help: 'Zum Beispiel 15+, 24/7 oder 100 %.' });
+    field('Beschriftung', 'label', block.props.label, { maxLength: 80 });
+  }
+  if (block.type === 'quote') {
+    field('Zitat', 'text', block.props.text, { multiline: true, maxLength: 1000 });
+    field('Name', 'author', block.props.author, { maxLength: 120 });
+    field('Rolle oder Firma', 'role', block.props.role || '', { maxLength: 120 });
+    field('Bewertung', 'rating', block.props.rating, { number: true, choices: { 0: 'Keine Sterne', 1: '1 Stern', 2: '2 Sterne', 3: '3 Sterne', 4: '4 Sterne', 5: '5 Sterne' } });
+  }
+  if (block.type === 'cta') {
+    field('Titel', 'title', block.props.title, { maxLength: 160 });
+    field('Text', 'text', block.props.text, { multiline: true, maxLength: 600 });
+    field('Beschriftung der Schaltfläche', 'buttonText', block.props.buttonText, { maxLength: 80 });
+    field('Linkziel', 'href', block.props.href, { help: 'Lokaler Pfad (/kontakt), Sprungmarke (#abschnitt) oder HTTPS-Adresse.' });
+  }
+  if (block.type === 'contact') {
+    field('Telefon', 'phone', block.props.phone || '', { maxLength: 80, help: 'Wird als anrufbarer Link ausgegeben.' });
+    field('E-Mail', 'email', block.props.email || '', { maxLength: 80 });
+    field('Anschrift', 'address', block.props.address || '', { multiline: true, maxLength: 200 });
+  }
+  if (block.type === 'spacer') field('Höhe', 'size', block.props.size, { choices: { small: 'Klein', medium: 'Mittel', large: 'Groß', huge: 'Sehr groß' } });
+  if (block.type === 'accordionitem') {
+    field('Titel', 'title', block.props.title, { maxLength: 160 });
+    field('Beim Laden geöffnet', 'open', block.props.open, { checkbox: true });
+  }
   if (block.type === 'postlist') {
     field('Anzahl Beiträge', 'count', block.props.count, { number: true, help: 'Zwischen 1 und 24. Die Beiträge selbst kommen beim Ausliefern dazu, nicht aus dem gespeicherten Inhalt.' });
     field('Nur Kategorie', 'category', block.props.category || '', { help: 'Adresse der Kategorie, zum Beispiel projekte. Leer lassen für alle Beiträge.' });

public/assets/site.css

@@ -30,3 +30,36 @@ h1,h2,h3,p,a{overflow-wrap:anywhere;hyphens:auto}
 .post-empty{padding:26px;border:1px dashed currentColor;border-radius:10px}
 .pagination{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:38px;padding-top:22px;border-top:1px solid currentColor;font-size:14px}
 .post-terms-label{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:10px}
+
+/* Blocks introduced with schema v6. No JavaScript: the accordion is details/summary. */
+.block-icon{flex-shrink:0;display:block}
+.block-iconcard{display:grid;gap:12px;padding:26px;border:1px solid currentColor;border-radius:12px}
+.block-iconcard h3{margin:0;font-size:19px;line-height:1.3}
+.block-iconcard h3 a{text-decoration:none}
+.block-iconcard h3 a:hover{text-decoration:underline}
+.block-iconcard p{margin:0;line-height:1.65}
+.block-stat{display:grid;gap:4px;margin:0}
+.block-stat strong{font-size:44px;font-weight:600;line-height:1.05;letter-spacing:-1.5px}
+.block-stat span{font-size:14px;line-height:1.5}
+.block-quote{margin:0;display:grid;gap:14px;padding:28px;border:1px solid currentColor;border-radius:12px}
+.block-quote blockquote{margin:0}
+.block-quote blockquote p{margin:0;font-size:18px;line-height:1.65}
+.block-quote figcaption{font-size:14px;font-weight:600}
+.block-quote figcaption span{font-weight:400;opacity:.75}
+.quote-rating{margin:0;letter-spacing:3px}
+.block-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center;gap:24px}
+.block-logos img{max-height:52px;width:auto;margin-inline:auto;display:block}
+.block-cta{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between;padding:32px;border:1px solid currentColor;border-radius:14px}
+.block-cta h2{margin:0 0 6px;font-size:26px;letter-spacing:-.6px}
+.block-cta p{margin:0;line-height:1.6}
+.block-contact{display:grid;gap:14px;font-style:normal}
+.block-contact span{display:flex;align-items:center;gap:12px;line-height:1.5}
+.block-divider{border:0;border-top:1px solid currentColor;opacity:.35;margin:0}
+.block-spacer{display:block}
+.spacer-small{height:18px}.spacer-medium{height:38px}.spacer-large{height:68px}.spacer-huge{height:110px}
+.block-accordion{display:grid;gap:10px}
+.block-accordionitem{border:1px solid currentColor;border-radius:10px;padding:4px 18px}
+.block-accordionitem>summary{cursor:pointer;padding:15px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
+.block-accordionitem>summary::after{content:'+';font-size:22px;line-height:1}
+.block-accordionitem[open]>summary::after{content:'–'}
+.accordion-body{padding-bottom:16px}