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/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;