Fassung 1.6.2: sichtbare leere Layouts und direktes Befuellen im Editor

README.md

@@ -46,6 +46,8 @@ Die Vorschau rendert auf Desktop mit mindestens 1240 px Layoutbreite und wächst
 
 ### Platz und Blockgestaltung im Editor (1.6.1)
 
+**Leere Layouts ab 1.6.2:** Sektionen und Spalten zeigen eine umrahmte Einfügefläche. In einer leeren Sektion direkt **1–4 Spalten** wählen; in einer Spalte **Inhalt hinzufügen** drücken und links das gewünschte Element auswählen. Alternativ ein Element auf die Fläche ziehen: die Markierung nennt das genaue Ziel, am Vorschaurand wird mitgescrollt. Neue Container werden in den sichtbaren Ausschnitt gebracht. Diese Hilfen erscheinen nur im Editor, verschwinden nach dem Befüllen und kehren bei Undo zurück.
+
 **Neue Sektion auf Seitenebene** steht dauerhaft oben links und fügt nach dem aktuellen Seitenabschnitt ein, unabhängig von der ausgewählten Verschachtelung oder einem gesetzten Plus-Einfügepunkt. Auch „Sektion“ im Werkzeugkasten verwendet ohne expliziten Einfügepunkt die Seitenebene. Verschachtelte Sektionen sind weiterhin über die Plus-Einfügepunkte oder Drag-and-drop möglich.
 
 Die Trennlinien links und rechts der Vorschau lassen sich ziehen. Mit Tab fokussieren und mit den Pfeiltasten ändern; Umschalt vergrößert den Schritt, Home/End wählen die Grenzen, Doppelklick setzt die jeweilige Breite zurück. Die Breiten werden im Browser behalten und bei schmalen Fenstern an den verfügbaren Platz angepasst. Auf dem Telefon stehen die Panels unter der Vorschau.

VERSION

@@ -1 +1 @@
-1.6.1
+1.6.2

docs/ARCHITECTURE.md

@@ -2,6 +2,18 @@
 
 Stand: 12.09.2026. Arbeitstitel KantSites; Produktname offen.
 
+## ADR 075 – Leere Container sind Arbeitsflächen (14.09.2026)
+
+Leere Spalten hatten keine Höhe; leere Sektionen waren zwar durch Abstände vorhanden, aber weder als Container erkennbar noch mit einem direkten Einfügeweg versehen. Der lokale Flatsome-3.20.9-Quelltext verwendet für solche Zustände eine eigene sichtbare Inhaltsfläche mit Mindesthöhe und mittigem Einfügewerkzeug (konkrete Fundstellen in `docs/FLATSOME-ABGLEICH.md`).
+
+`preview-containers.js` ergänzt deshalb erst im vollständig geparsten Vorschau-DOM sichtbare Hilfsflächen für leere Sektionen, Zeilen und Spalten. Eine leere Sektion bietet außerdem Zeilenlayouts mit 1–4 Spalten. Die Hilfen sind echte Buttons mit Tastaturbedienung und eindeutigen Namen, etwa „Spalte 2 von 2: Inhalt hinzufügen“. Sie setzen einen genauen Einfügepunkt oder führen dieselbe Modelltransaktion wie der Werkzeugkasten aus. Abbrechen oder eine andere Auswahl hebt den Einfügepunkt auf.
+
+Die Editor-CSS gibt den Flächen mindestens 130 Layoutpixel Höhe. Der öffentliche Renderer und seine CSS bleiben unverändert; die Mindesthöhe ist eine Bearbeitungshilfe und wird nicht als Designwert gespeichert. Nach dem ersten Inhalt verschwindet die Hilfe automatisch, Undo stellt sie wieder her. Kein Schemawechsel und keine Datenmigration; bestehende leere Container erhalten die Hilfe allein beim Öffnen. `preview.css` und das neue Modul erhalten die Versionskennung 1.6.2, damit ein bestehender Browsercache die Funktion nicht verdeckt.
+
+Neu eingefügte Elemente werden nach dem Rendern sichtbar gescrollt. Die Vorschau gilt erst mit geparstem DOM und geladenen Hilfsstilen als bereit. Die Drop-Geometrie wird beim Scrollen und beim Loslassen neu ermittelt, Zielcontainer werden benannt, und nebeneinanderstehende Spalten werden horizontal eingeordnet; mobil gestapelte Spalten vertikal. Ein Ziehen nahe dem Vorschaurand scrollt den Frame, bis der Zeiger den Rand verlässt oder das Ziehen endet. Inhalt und Undo bleiben von bloßem Scrollen unberührt.
+
+Der Offen-/Geschlossen-Zustand von Feinschliff-Gruppen wird direkt aus ihren bisherigen DOM-Knoten übernommen. Ein verzögertes `toggle`-Ereignis allein reicht nicht: Ein schneller Neuaufbau nach einer Wertänderung kann den Knoten entfernen, bevor das Ereignis ankommt, und würde die gerade geöffnete Gruppe wieder schließen.
+
 ## ADR 074 – Editorfläche, Seitenebene und kontextbezogene Gestaltung (14.09.2026)
 
 Textblöcke sowie H1/H2 hatten im Basis-CSS feste Höchstbreiten von 690/900/760 px. Sie folgen jetzt der Breite ihres Containers; ausdrücklich gespeicherte `maxWidth`-Werte bleiben wirksam. Sektionsbreiten und Theme-Container bleiben bewusste Layoutentscheidungen. Das verändert gegebenenfalls den Zeilenumbruch bestehender Seiten. Vorschau und öffentliche Ausgabe verwenden dieselbe CSS-Quelle. Kein Dokument wird dafür umgeschrieben, keine Schema- oder Datenbankmigration ist erforderlich. Rückweg: vorheriges Basis-CSS oder eine explizite maximale Breite am betreffenden Block.

docs/FLATSOME-ABGLEICH.md

@@ -1,5 +1,19 @@
 # Abgleich mit dem Flatsome UX Builder
 
+## Bedienkorrektur für leere Layouts (14.09.2026, KantSites 1.6.2)
+
+Erneuter Quelltextabgleich mit dem von Umut genannten Ordner `C:\Users\UmutKantarci\Downloads\flatsome`, Theme-Version **3.20.9** laut `style.css`. Keine laufende WordPress-Installation dieses Pakets gestartet; die folgenden Aussagen stammen aus seinen tatsächlichen Builder-Dateien.
+
+| Beobachtung im Flatsome-Code | Umsetzung in KantSites |
+| --- | --- |
+| `assets/css/builder/core/content.css`: leeres `content` mit mindestens 90 px Höhe, getöntem Hintergrund und gepunktetem Rahmen | Vorschau-only-Flächen für leere Sektionen, Zeilen und Spalten mit realer Mindesthöhe, Rahmen und Typbezeichnung |
+| `tools-addable.is-empty` und `assets/js/builder/core/content.js`: Plus in der Mitte, eigener Einfüge-/Drop-Zustand für leere Container | „Inhalt hinzufügen“ im Zielbereich; Spalten werden nummeriert; der Einfügepunkt wird konkret markiert und benannt |
+| `inc/builder/shortcodes/row.php`: fertige Zeilen mit einer, zwei, drei und vier Spalten | Diese vier gleichmäßigen Layouts direkt in der leeren Sektion anbieten, einschließlich passender mobiler Stapelung |
+
+Zusätzlich: neue Container werden nach dem Rendern in den sichtbaren Ausschnitt gebracht, ein Auswahlwechsel löst alte Einfügepunkte, und beim Ziehen scrollt die Vorschau an den Rändern mit. Die Ablageanzeige nennt den Zielcontainer; beim Verschieben von Spalten entscheidet die horizontale Position. Editorhilfen entstehen ausschließlich im Vorschau-DOM, nicht im gespeicherten Dokument oder in der öffentlichen Ausgabe.
+
+Der ältere Gesamtabgleich unten bleibt eine historische Bestandsaufnahme. Diese Änderung übernimmt konkrete Bedienprinzipien für den Aufbau, keine vollständige Flatsome-Oberfläche und keine WordPress-/Shortcode-Abhängigkeit.
+
 Stand: 14.09.2026, KantSites 1.5.0 (Dokumentschema v19).
 Quelle des Vergleichs: Flatsome-Theme im Download-Ordner, `inc/builder/shortcodes/` (69 Definitionen)
 und `inc/shortcodes/`. Ziel laut Auftrag: alle Funktionen übernehmen und verbessern, die

docs/QUALITY.md

@@ -1,5 +1,11 @@
 # Qualitätsbericht – erster ausführbarer Prototyp
 
+## Ergänzung: Sichtbare leere Layouts, 14.09.2026 (1.6.2)
+
+30 JavaScript-Tests und 27 PHP-Editor-/Sicherheitstests mit 312 Assertions bestanden. Vollständiger isolierter Chromium-Editortest einschließlich axe ohne Verstöße: direkte Tastatureinfügung in leere Sektionen/Spalten, genaues Drag-and-drop-Ziel und Scrollen am Rand, Spaltenreihenfolge auf Desktop und Mobil, Undo/Redo, Speichern/Neuladen, Veröffentlichung und Konflikte. Die Tests prüfen ausdrücklich, dass die neuen Editorhilfen weder im gespeicherten Blockbaum noch im öffentlichen HTML stehen. Desktop-, Mobil- und Drag-Screenshots visuell geprüft; Bericht unter `reports/editor/result.json`.
+
+Vergleich mit lokalen Flatsome-3.20.9-Quelldateien, keine laufende WordPress-Referenz geprüft. Kein neuer Lighthouse-Lauf, da der öffentliche Renderer und dessen CSS unverändert sind; die Messung von 1.6.1 ist weiterhin als solche zu lesen. Kein neuer Screenreader-, Firefox-, Safari-, Touchgeräte- oder Felddatennachweis.
+
 ## Ergänzung: Flexible Editorfläche und Inhaltsbreiten, 14.09.2026 (1.6.1)
 
 `npm.cmd test`: 30 Modelltests; PHP 8.4.22: 452 Tests / 3476 Assertions. Der vollständige isolierte Playwright-Lauf einschließlich axe, Speichern/Neuladen, Veröffentlichung, Konfliktbehandlung und neuer Panel-/Sektionsprüfungen besteht. Bildschirmbreiten 390/850/1100/1920 px ohne horizontalen Überlauf geprüft. Screenshotprüfung für Desktop, Bildinspektor und Telefon; kein neuer Screenreader-Test.

docs/STATUS.md

@@ -1,7 +1,19 @@
 # Projektstatus
 
+## 1.6.2 – Sichtbare leere Sektionen und Spalten (14.09.2026)
+
+**Erledigt:** Leere Sektionen, Zeilen und Spalten besitzen in der Vorschau sichtbare, beschriftete Arbeitsflächen. „Inhalt hinzufügen“ setzt einen genauen Einfügepunkt, öffnet den Werkzeugkasten und fokussiert die Suche. Leere Sektionen bieten unmittelbar 1–4 Spalten; neue Elemente werden sichtbar gescrollt. Beim Ziehen sind Container und Ablageziel erkennbar, die Vorschau scrollt am Rand mit. Spalten werden auf Desktop horizontal, bei mobiler Stapelung vertikal eingeordnet. Geöffnete Feinschliff-Gruppen bleiben auch bei schnellen Änderungen erhalten. Cachekennung 1.6.2; keine Schema- oder Datenbankmigration. Die Hilfen werden ausschließlich im Editor-DOM erzeugt und erscheinen weder in gespeicherten Dokumenten noch auf öffentlichen Seiten. Entscheidungen: ADR 075.
+
+**Referenz:** Die tatsächlichen Builder-Dateien des bereitgestellten Flatsome 3.20.9 wurden erneut gelesen. Übernommen sind sichtbare Leerflächen, direkte Plus-Aktionen und schnelle Spaltenlayouts. Konkrete Fundstellen und Umfang stehen in `docs/FLATSOME-ABGLEICH.md`; keine laufende WordPress-Referenzinstallation geprüft.
+
+**Geprüft:** `npm.cmd test` 30/30; PHP 8.4.22 `vendor/bin/phpunit --filter EditorSecurityTest` 27/27 mit 312 Assertions; JavaScript-Syntax und alle 19 Admin-Twig-Dateien gültig. Der vollständige isolierte `npm.cmd run test:editor` besteht einschließlich axe-Prüfungen. Neue Abdeckung: sichtbare leere Sektion, Tastaturwahl des Zweispaltenlayouts, Einfügen in genau die zweite Spalte, Ziehen in die erste Spalte mit Zielmarkierung und automatischem Scrollen, Undo/Redo, leere Layouts nach Speichern/Neuladen, Spaltenumsortierung Desktop/Mobil und Veröffentlichung ohne Editorhilfen. Desktop-, Mobil- und Drag-Ansichten anhand der Screenshots visuell geprüft. Bericht: `reports/editor/result.json`; Bilder: `empty-section.png`, `empty-layout-desktop.png`, `empty-layout-mobile.png`, `empty-layout-drag.png` im selben Ordner. Keine Änderungen an Kundendaten durch die isolierten Tests.
+
+**Bekannte Grenzen:** Der öffentliche Renderer ist unverändert; Lighthouse wurde für diese Fassung nicht erneut gemessen. Die Messung zu 1.6.1 bleibt unten dokumentiert. Kein neuer Screenreader-, Firefox-, Safari- oder echter Touchgerätetest. **Nächster Schritt:** Die neuen Aufbauabläufe mit Umuts tatsächlichen Seiten nutzen und anschließend die restlichen Arbeitspakete des Entwicklungsplans fortsetzen.
+
 ## 1.6.1 – Editorbreite, neue Seitenabschnitte und passende Eigenschaften (14.09.2026)
 
+**Veröffentlicht am 14.09.2026:** Commit `b783d9d` und annotierter Tag `v1.6.1` sind auf `origin` (`https://git.kant-it.de/kantarci/KantSites.git`) hochgeladen. Das stabile [Release 1.6.1](https://git.kant-it.de/kantarci/KantSites/releases/tag/v1.6.1) enthält ZIP, SHA-256-Datei und `install.php`. Das Archiv wurde aus dem exakten Commit mit Produktionsabhängigkeiten gebaut (3520 Dateien); Archivintegrität, Übereinstimmung mit dem Commit und Produktionscontainer wurden geprüft. Alle drei Anhänge anschließend ohne Anmeldung heruntergeladen und mit den lokalen Dateien verglichen; die API liefert 1.6.1 als neuestes stabiles Release. Archiv-SHA-256: `a6e7da2bb14ede43dd2d94960b3b4d67cc285d9c717b560f796a91cbcde4dd26`. Dieser Schritt veröffentlicht das Update, installiert es aber nicht auf Kundenwebsites.
+
 **Erledigt:** Die festen 690/900/760-px-Grenzen für Text/H1/H2 sind entfernt. Elemente nutzen ihren Container, eigene Maximalbreiten bleiben möglich. Dauerhaft sichtbare Aktion **Neue Sektion auf Seitenebene**; auch der normale Sektionsklick erzeugt ohne expliziten Einfügepunkt einen übergeordneten Seitenabschnitt. Linke und rechte Sidebar sind per Ziehen und Tastatur verstellbar und merken ihre Breite im Browser. Die Vorschau nutzt ihre Fläche ohne Außenränder; die Elementbibliothek läuft nicht mehr horizontal über. Auf kleinen Fenstern passen sich die Panels an, auf dem Telefon stehen sie untereinander.
 
 **Feinschliff:** Bild-, Text- und Containeroptionen werden passend gefiltert und sortiert. Gespeicherte Werte bleiben sichtbar; die gesamte Eigenschaftenauswahl ist über eine Schaltfläche erreichbar. Die Auswahl eines anderen Blocks setzt die Panelrolleiste nach oben. Geöffnete Eigenschaftengruppen bleiben beim Ändern eines Werts geöffnet. Automatische Größen und „Ohne Begrenzung“ sind explizit wählbar. Cachekennung auf 1.6.1 angehoben; keine Datenbankmigration, keine Kundeninhalte durch Tests geändert. Begründung und Rückweg: ADR 074.

public/assets/canvas-overlay.js

@@ -4,9 +4,9 @@ import { blockLabel, locate, dropList, isContainer } from './editor-model.js';
 // The layer above the preview.
 //
 // The preview is a sandboxed iframe without scripts of its own, and every change replaces its
-// whole document. Anything drawn inside it would therefore be wiped on the next keystroke and
-// would also end up in the markup we are supposed to be showing faithfully. So the outline, the
-// element toolbar, the insert points and the drop marker all live in the editor document, in an
+// whole document. The selection tools therefore live outside it and get rebound after a refresh.
+// Empty-container hit areas are rebuilt separately inside the frame by preview-containers.js.
+// The outline, element toolbar, insert points and drop marker live in the editor document, in an
 // absolutely positioned layer that sits exactly on top of the frame.
 //
 // Geometry: the layer is the same box as the frame and carries the same scale transform, so a
@@ -50,10 +50,11 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
   toolbar.setAttribute('role', 'toolbar');
   toolbar.setAttribute('aria-label', 'Aktionen für das gewählte Element');
   const drop = element('div', 'ov-drop');
+  const dropLabel = element('div', 'ov-drop-label');
   const insertBefore = insertButton('before', 'Element davor einfügen');
   const insertAfter = insertButton('after', 'Element dahinter einfügen');
   toolbar.append(selectName);
-  layer.append(hover, select, toolbar, insertBefore, insertAfter, drop);
+  layer.append(hover, select, toolbar, insertBefore, insertAfter, drop, dropLabel);
   stage.append(layer);
 
   for (const tool of TOOLS) {
@@ -206,7 +207,10 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
     positionToolbar(selectedBox, Boolean(sibling));
     const hoverBox = hovered && hovered !== selectedId ? rectOf(hovered) : null;
     if (place(hover, hoverBox)) paintLabel(hoverLabel, hovered);
-    if (dragging) paintDrop();
+    if (dragging) {
+      dropPlan = dragPoint ? planDrop(dragPoint.x, dragPoint.y, dragging.block) : null;
+      paintDrop();
+    }
   }
 
   // -------------------------------------------------------------------------------------------
@@ -259,8 +263,9 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
       const parentId = item?.parent?.id ?? null;
       if (id && !ownBranch && dropList(document_, parentId, block)) {
         const box = rectOf(id);
-        const after = box ? y > box.top + box.height / 2 : false;
-        return { parentId, index: item.index + (after ? 1 : 0), line: box ? { box, edge: after ? 'bottom' : 'top' } : null };
+        const horizontal = item.parent?.type === 'row' && indexInside(parentId, x, y).sideBySide;
+        const after = box ? (horizontal ? x > box.left + box.width / 2 : y > box.top + box.height / 2) : false;
+        return { parentId, index: item.index + (after ? 1 : 0), line: box ? { box, edge: horizontal ? (after ? 'right' : 'left') : (after ? 'bottom' : 'top') } : null };
       }
       if (!node) break;
       node = item?.parent ? doc()?.getElementById(item.parent.id) : null;
@@ -276,11 +281,19 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
 
   function paintDrop() {
     const line = dropPlan?.line;
-    if (!line?.box) { drop.hidden = true; return; }
+    if (!line?.box) { drop.hidden = true; dropLabel.hidden = true; return; }
     drop.hidden = false;
     const scale = getScale();
     const thickness = 3 / scale;
     const { box, edge } = line;
+    const target = dropPlan.parentId ? doc()?.getElementById(dropPlan.parentId) : null;
+    const label = target?.dataset.editorLabel || (dropPlan.parentId ? blockLabel(locate(getDocument().blocks, dropPlan.parentId)?.block) : 'Seite');
+    dropLabel.textContent = `${edge === 'inside' ? 'Einfügen in' : 'Einfügen ·'} ${label}`;
+    dropLabel.hidden = false;
+    dropLabel.style.left = `${Math.max(0, box.left + 8)}px`;
+    dropLabel.style.top = `${Math.max(2, box.top + 8)}px`;
+    counterScale(dropLabel, 'left', 'top');
+    drop.style.marginLeft = drop.style.marginTop = '0';
     drop.classList.toggle('ov-drop-inside', edge === 'inside');
     if (edge === 'inside') {
       drop.style.left = `${box.left}px`; drop.style.top = `${box.top}px`;
@@ -317,15 +330,20 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
     document_.addEventListener('dragover', event => {
       if (!dragging) return;
       event.preventDefault();
-      event.dataTransfer.dropEffect = dragging.kind === 'move' ? 'move' : 'copy';
+      dragPoint = { x: event.clientX, y: event.clientY };
       dropPlan = planDrop(event.clientX, event.clientY, dragging.block);
+      event.dataTransfer.dropEffect = dropPlan ? (dragging.kind === 'move' ? 'move' : 'copy') : 'none';
       paintDrop();
+      if (!scrollFrame) scrollFrame = requestAnimationFrame(scrollDrag);
+    });
+    document_.addEventListener('dragleave', event => {
+      if (!event.relatedTarget) { dragPoint = null; dropPlan = null; paintDrop(); }
     });
     document_.addEventListener('drop', event => {
       if (!dragging) return;
       event.preventDefault();
       // Both are read before the clean-up clears them.
-      const payload = dragging, plan = dropPlan;
+      const payload = dragging, plan = planDrop(event.clientX, event.clientY, dragging.block);
       endDrag();
       if (plan) onDrop(payload, plan);
     });
@@ -335,17 +353,35 @@ export function createCanvasOverlay({ stage, frame, getScale, getDocument, getSe
   function startDrag(payload) {
     dragging = payload;
     layer.classList.add('is-dragging');
+    doc()?.documentElement.classList.add('editor-dragging');
     hovered = null;
     sync();
   }
 
   function endDrag() {
     dragging = null;
+    dragPoint = null;
+    cancelAnimationFrame(scrollFrame); scrollFrame = null;
     dropPlan = null;
     drop.hidden = true;
+    dropLabel.hidden = true;
     layer.classList.remove('is-dragging');
+    doc()?.documentElement.classList.remove('editor-dragging');
     sync();
   }
 
+  let dragPoint = null, scrollFrame = null;
+  function scrollDrag() {
+    scrollFrame = null;
+    if (!dragging || !dragPoint) return;
+    const edge = 60 / getScale();
+    const amount = dragPoint.y < edge ? -14 : dragPoint.y > frame.clientHeight - edge ? 14 : 0;
+    if (amount) {
+      doc()?.defaultView?.scrollBy(0, amount / getScale());
+      sync();
+      scrollFrame = requestAnimationFrame(scrollDrag);
+    }
+  }
+
   return { sync, attach, startDrag, endDrag, get dragPayload() { return dragging; } };
 }

public/assets/design-panel.js

@@ -124,6 +124,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
   let clipboard = null;
   let showAll = false, lastBlockId = null;
   const openGroups = new Map();
+  const renderedGroups = new Map();
 
   /** Replaces the styling of a block with a copy, or removes it when nothing is given. */
   const applyStyle = (doc, id, style) => {
@@ -459,6 +460,9 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
 
   /** Renders the whole panel for one block into the given container. */
   return function render(panel) {
+    // Read the previous nodes directly; a queued toggle event can be lost during a redraw.
+    for (const [key, details] of renderedGroups) openGroups.set(key, details.open);
+    renderedGroups.clear();
     const block = getBlock();
     const deviceName = getDevice();
     if (!block) return;
@@ -511,7 +515,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
       const details = element('details', 'design-group');
       const groupKey = `${block.type}:${group}`;
       details.open = openGroups.get(groupKey) ?? (group === priority[0] || group === 'spacing');
-      details.addEventListener('toggle', () => { if (details.isConnected) openGroups.set(groupKey, details.open); });
+      renderedGroups.set(groupKey, details);
       details.append(element('summary', null, groupLabel));
       const body = element('div', 'design-group-body');
 

public/assets/editor.css

@@ -246,6 +246,7 @@ dialog p{font-size:14px;line-height:1.7;color:var(--muted)}
 .ov-insert:hover,.ov-insert:focus-visible{opacity:1}
 .ov-drop{position:absolute;background:var(--ring,#b55b12);border-radius:2px;box-shadow:0 0 0 1px #fff8;pointer-events:none}
 .ov-drop-inside{background:color-mix(in srgb, var(--ring,#b55b12) 15%, transparent);border:2px dashed var(--ring,#b55b12);box-shadow:none}
+.ov-drop-label{position:absolute;pointer-events:none;background:#2c634a;color:#fff;border-radius:5px;padding:6px 9px;font:600 12px/1.4 system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 7px #0002}
 /* While something is being dragged the outlines would only add noise. */
 .canvas-overlay.is-dragging .ov-hover,.canvas-overlay.is-dragging .ov-toolbar,.canvas-overlay.is-dragging .ov-insert{display:none}
 

public/assets/editor.js

@@ -4,6 +4,7 @@ import { createDesignPanel } from './design-panel.js';
 import { createRichText } from './rich-text.js';
 import { createCanvasOverlay } from './canvas-overlay.js';
 import { preview, rowPreview } from './library-previews.js';
+import { decorateContainers } from './preview-containers.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'];
@@ -24,6 +25,7 @@ let device = 'desktop', propertyPanel = 'content', designTokens, designSchema, d
 let previewScale = 1, overlay = null, pendingInsert = null;
 const collapsed = new Set();
 let renderedProperties = null;
+let revealAfterPreview = null;
 
 function notify(message = '', recover = false) {
   $('#message').textContent = message;
@@ -114,6 +116,7 @@ function renderTree() {
 
 function choose(id, scroll = true) {
   if (busy) return;
+  if (id !== selected && pendingInsert) setPendingInsert(null);
   selected = locate(history.document.blocks, id) ? id : null;
   blockPath(history.document.blocks, selected).slice(0, -1).forEach(block => collapsed.delete(block.id));
   if (!selected) propertyPanel = 'content';
@@ -595,7 +598,13 @@ async function updatePreview() {
       const doc = frame.contentDocument;
       if (!doc || doc === altesDokument || !doc.getElementById('kant-styles')) return;
       angewandt = true;
-      const style = doc.createElement('link'); style.rel = 'stylesheet'; style.href = '/assets/preview.css'; doc.head.append(style);
+      const style = doc.createElement('link'); style.rel = 'stylesheet'; style.href = `/assets/preview.css?v=${new URL(import.meta.url).searchParams.get('v') ?? 'dev'}`;
+      // Register before insertion: cached loads (or errors) can precede DOMContentLoaded.
+      const styleReady = new Promise(resolve => {
+        style.addEventListener('load', () => resolve(true), { once: true });
+        style.addEventListener('error', () => resolve(false), { once: true });
+      });
+      doc.head.append(style);
       // The preview delivers the generated stylesheet as inert template text (see page.html.twig).
       // Applying it as a constructed stylesheet is not a source in the sense of the policy, so the
       // preview shows exactly what the published page shows, without a single blocked style.
@@ -607,6 +616,22 @@ async function updatePreview() {
       }
       doc.addEventListener('click', event => {
         event.preventDefault();
+        const insert = event.target.closest('[data-editor-target]');
+        if (insert && !busy && history) {
+          stopInlineEdit();
+          const id = insert.dataset.editorTarget;
+          if (!locate(history.document.blocks, id)) return;
+          choose(id, false);
+          if (insert.hasAttribute('data-editor-row')) {
+            setPendingInsert(null);
+            selected = history.change(content => insertRowAt(content, Number(insert.dataset.editorRow), id, 0));
+            propertyPanel = 'content'; changed();
+          } else if (locate(history.document.blocks, id).block.type === 'row') {
+            selected = history.change(content => insertBlockAt(content, 'column', id, 0));
+            changed();
+          } else setPendingInsert({ parentId: id, index: 0 });
+          return;
+        }
         if (inlineEdit) return;
         const element = event.target.closest('[id]');
         if (element && locate(history.document.blocks, element.id)) choose(element.id, false);
@@ -618,12 +643,23 @@ async function updatePreview() {
         if (block && INLINE_TEXT[block.type]) { event.preventDefault(); choose(element.id, false); startInlineEdit(element.id); }
       });
       doc.addEventListener('submit', event => event.preventDefault());
-      // Every refresh is a new document, so the layer above it has to bind to it again.
-      overlay?.attach();
-      frame.contentWindow.scrollTo(0, top); highlight();
-      // Erst jetzt ansehen lassen: bis hierher zeigte das Fenster eine Seite ohne Gestaltung.
-      frame.style.visibility = '';
-      $('#preview-status').textContent = 'Entwurf · Klicken wählt aus, Doppelklick bearbeitet Text, Elemente lassen sich hierher ziehen.';
+      // The head may arrive before the blocks. Decorate only once the complete DOM exists.
+      const finish = () => {
+        if (sequence !== previewSequence || doc !== frame.contentDocument) return;
+        decorateContainers(doc, history.document);
+        overlay?.attach();
+        styleReady.then(loaded => {
+          if (sequence !== previewSequence || doc !== frame.contentDocument) return;
+          frame.contentWindow.scrollTo(0, top);
+          highlight(revealAfterPreview === selected); revealAfterPreview = null;
+          markInsertTarget();
+          frame.style.visibility = '';
+          $('#preview-status').textContent = loaded
+            ? 'Entwurf · Klicken wählt aus, Doppelklick bearbeitet Text, Elemente lassen sich hierher ziehen.'
+            : 'Editor-Hilfsflächen konnten nicht geladen werden. Bitte den Editor neu laden.';
+        });
+      };
+      if (doc.readyState === 'loading') doc.addEventListener('DOMContentLoaded', finish, { once: true }); else finish();
     };
     // Solange die Gestaltung fehlt, bleibt die Fläche leer statt falsch.
     frame.style.visibility = 'hidden';
@@ -654,6 +690,7 @@ async function updatePreview() {
 
 function changed() {
   if (!locate(history.document.blocks, selected)) selected = null;
+  if (selected && !$('#preview').contentDocument?.getElementById(selected)) revealAfterPreview = selected;
   renderTree(); renderProperties(); controls(); schedulePreview();
 }
 
@@ -727,12 +764,23 @@ function setPendingInsert(target) {
   updateLibrary();
   $('#toolbox').classList.toggle('awaiting-insert', Boolean(target));
   $('#insert-hint').hidden = !target;
+  markInsertTarget();
   if (target) {
     if ($('#toolbox').hidden) $('#toggle-library').click();
-    $('#toolbox').scrollIntoView({ block: 'nearest' });
+    $('#library-search').value = ''; filterLibrary();
+    const name = target.parentId ? $('#preview').contentDocument?.getElementById(target.parentId)?.dataset.editorLabel || blockLabel(locate(history.document.blocks, target.parentId)?.block) : 'Seite';
+    $('#insert-hint').firstChild.textContent = `Einfügen in ${name}. Wähle jetzt ein Element. `;
+    $('#library-search').focus({ preventScroll: true });
+    $('#library-search').scrollIntoView({ block: 'nearest' });
   }
 }
 
+function markInsertTarget() {
+  const doc = $('#preview').contentDocument;
+  doc?.querySelectorAll('.editor-insert-target').forEach(node => node.classList.remove('editor-insert-target'));
+  if (pendingInsert?.parentId) doc?.getElementById(pendingInsert.parentId)?.classList.add('editor-insert-target');
+}
+
 // ---------------------------------------------------------------------------------------------
 // The toolbox.
 //

public/assets/preview-containers.js

@@ -0,0 +1,45 @@
+import { blockLabel } from './editor-model.js';
+
+/** Editing aids are created only in the preview DOM, never in a saved block or public HTML. */
+export function decorateContainers(preview, content) {
+  const visit = (blocks, parent = null) => {
+    blocks.forEach((block, index) => {
+      const node = preview.getElementById(block.id);
+      if (node && ['section', 'row', 'column'].includes(block.type)) {
+        const label = block.type === 'column' && parent?.type === 'row'
+          ? `Spalte ${index + 1} von ${blocks.length}` : blockLabel(block);
+        node.classList.add('editor-container');
+        node.dataset.editorLabel = label;
+        if (!block.children?.length) {
+          node.classList.add('editor-empty-container');
+          const host = block.type === 'section' ? node.querySelector(':scope > .section-inner') : node;
+          if (!host) return;
+          const empty = preview.createElement('div');
+          empty.className = 'editor-empty';
+          const name = preview.createElement('span');
+          name.className = 'editor-empty-name'; name.textContent = label;
+          const hint = preview.createElement('span');
+          hint.className = 'editor-empty-hint';
+          hint.textContent = block.type === 'row' ? 'Spalte hierher ziehen oder hinzufügen' : 'Element hierher ziehen oder hinzufügen';
+          const actions = preview.createElement('div'); actions.className = 'editor-empty-actions';
+          const add = (text, attribute, value, accessibleName) => {
+            const button = preview.createElement('button');
+            button.type = 'button'; button.textContent = text;
+            button.dataset.editorTarget = block.id;
+            button.setAttribute(attribute, value);
+            button.setAttribute('aria-label', accessibleName);
+            actions.append(button);
+          };
+          add(block.type === 'row' ? '＋ Spalte hinzufügen' : '＋ Inhalt hinzufügen', 'data-editor-insert', '', `${label}: ${block.type === 'row' ? 'Spalte' : 'Inhalt'} hinzufügen`);
+          if (block.type === 'section') {
+            for (const count of [1, 2, 3, 4]) add(`${count} ${count === 1 ? 'Spalte' : 'Spalten'}`, 'data-editor-row', String(count), `${count} ${count === 1 ? 'Spalte' : 'Spalten'} in dieser Sektion anlegen`);
+          }
+          empty.append(name, hint, actions);
+          host.append(empty);
+        }
+      }
+      visit(block.children ?? [], block);
+    });
+  };
+  visit(content.blocks);
+}

public/assets/preview.css

@@ -7,3 +7,17 @@
 
 /* Inline editing. Only ever active in the editor preview, never on a published page. */
 [contenteditable].editor-inline{outline:3px solid #b55b12;outline-offset:4px;border-radius:3px;cursor:text;background:#fffdf7}
+
+/* Empty layout areas must have a real hit area, including when sibling columns have content. */
+.editor-empty-container{min-height:130px!important}
+.editor-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:130px;width:100%;padding:22px 14px;border:2px dashed #93aa9a;border-radius:7px;background:#f3f8f4;color:#264f3d;text-align:center;font:14px/1.5 system-ui,sans-serif;box-sizing:border-box;grid-column:1/-1}
+.editor-empty-name{font-size:12px;font-weight:700;letter-spacing:.04em}
+.editor-empty-hint{font-size:13px;color:#496351}
+.editor-empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
+.editor-empty button{appearance:none;font:600 13px/1.3 system-ui,sans-serif;color:#264f3d;background:white;border:1px solid #94ad9d;border-radius:6px;min-height:40px;padding:9px 13px;cursor:pointer;letter-spacing:normal;text-transform:none;box-shadow:none;margin:0}
+.editor-empty button:hover,.editor-empty button:focus-visible{background:#deeee2;border-color:#32644a;outline:2px solid #32644a;outline-offset:2px}
+.editor-empty button[data-editor-insert]{background:#2c634a;color:white;border-color:#2c634a}
+.editor-container:hover:not(.editor-selected),.editor-dragging .editor-container{outline:1px dashed #6b927a;outline-offset:-1px}
+.editor-container.editor-insert-target{outline:3px solid #b55b12!important;outline-offset:-3px}
+.editor-dragging .editor-empty{background:#e6f1e9;border-color:#467858}
+@media(max-width:650px){.editor-empty{padding:16px 10px}.editor-empty button{min-height:44px}}

scripts/editor-check.mjs

@@ -175,6 +175,107 @@ try {
   await leftHandle.dblclick(); await rightHandle.dblclick();
   await page.locator('[data-panel="content"]').click();
   checks.push({ name: 'resizable persistent panels, root sections, contextual image/text properties and full text width', passed: true });
+
+  // A layout starts empty: it must be visible, reachable and editable before it has any text.
+  const previewReady = () => page.locator('#preview-status').filter({ hasText: 'Entwurf ·' }).waitFor();
+  await frame.locator('h1').click();
+  await page.locator('#add-root-section').click();
+  await previewReady();
+  const emptySection = frame.locator('main > .editor-empty-container');
+  await emptySection.waitFor();
+  const newSectionId = await emptySection.getAttribute('id');
+  assert.ok((await emptySection.boundingBox()).height > 100, 'new empty section has a visible hit area');
+  await page.screenshot({ path: 'reports/editor/empty-section.png', fullPage: true });
+  await frame.getByRole('button', { name: '2 Spalten in dieser Sektion anlegen', exact: true }).press('Enter');
+  await previewReady();
+  const emptyColumns = frame.locator(`#${newSectionId} .block-column`);
+  assert.equal(await emptyColumns.count(), 2);
+  for (let index = 0; index < 2; index++) assert.ok((await emptyColumns.nth(index).boundingBox()).height > 80, 'empty column has a hit area');
+  const secondColumnId = await emptyColumns.nth(1).getAttribute('id');
+  const firstColumnId = await emptyColumns.first().getAttribute('id');
+  await frame.getByRole('button', { name: 'Spalte 2 von 2: Inhalt hinzufügen', exact: true }).press('Enter');
+  assert.equal(await page.locator('#library-search').evaluate(el => el === document.activeElement), true);
+  assert.match(await page.locator('#insert-hint').innerText(), /Spalte 2 von 2/);
+  await page.locator('#library-search').fill('Text');
+  await page.locator('#library [data-add="text"]').click();
+  await frame.locator(`#${secondColumnId} .block-text`).waitFor();
+  await previewReady();
+  assert.equal(await frame.locator(`#${firstColumnId} .editor-empty`).count(), 1, 'unfilled sibling stays visible');
+  await page.locator('#library-search').fill('');
+  const dragSource = page.locator('#library [data-add="button"]');
+  await frame.locator(`#${firstColumnId} .editor-empty`).scrollIntoViewIfNeeded();
+  await dragSource.scrollIntoViewIfNeeded();
+  const sourceBox = await dragSource.boundingBox();
+  let targetBox = await frame.locator(`#${firstColumnId} .editor-empty`).boundingBox();
+  await page.mouse.move(sourceBox.x + sourceBox.width / 2, sourceBox.y + sourceBox.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(sourceBox.x + sourceBox.width / 2 + 10, sourceBox.y + sourceBox.height / 2, { steps: 3 });
+  await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2, { steps: 10 });
+  // Chromium dispatches dragenter on the first move into a target, dragover on the next.
+  await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2);
+  await page.locator('.ov-drop-label').filter({ hasText: 'Spalte 1 von 2' }).waitFor();
+  await page.screenshot({ path: 'reports/editor/empty-layout-drag.png', fullPage: true });
+  const beforeDragScroll = await page.locator('#preview').evaluate(el => el.contentWindow.scrollY);
+  const frameBox = await page.locator('#preview').boundingBox();
+  await page.mouse.move(frameBox.x + 50, frameBox.y + frameBox.height - 8, { steps: 5 });
+  await page.mouse.move(frameBox.x + 50, frameBox.y + frameBox.height - 8);
+  await page.waitForFunction(top => document.querySelector('#preview').contentWindow.scrollY > top + 10, beforeDragScroll);
+  await page.mouse.move(frameBox.x + 50, frameBox.y + frameBox.height / 2);
+  await page.mouse.move(frameBox.x + 50, frameBox.y + frameBox.height / 2);
+  await frame.locator(`#${firstColumnId} .editor-empty`).scrollIntoViewIfNeeded();
+  targetBox = await frame.locator(`#${firstColumnId} .editor-empty`).boundingBox();
+  await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2, { steps: 6 });
+  await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2);
+  await page.mouse.up();
+  await frame.locator(`#${firstColumnId} .button`).waitFor();
+  assert.equal(await frame.locator(`#${newSectionId} .editor-empty`).count(), 0, 'placeholders disappear after filling');
+  await page.locator('#undo').click(); await previewReady();
+  assert.equal(await frame.locator(`#${firstColumnId} .editor-empty`).count(), 1, 'undo restores the empty target');
+  await page.locator('#redo').click(); await previewReady();
+  await frame.locator(`#${firstColumnId} .button`).waitFor();
+  await page.locator('#undo').click(); await previewReady();
+  await page.locator('#undo').click(); await previewReady();
+  await page.screenshot({ path: 'reports/editor/empty-layout-desktop.png', fullPage: true });
+  await page.getByRole('button', { name: 'Mobil', exact: true }).click();
+  await frame.getByRole('button', { name: 'Spalte 2 von 2: Inhalt hinzufügen', exact: true }).scrollIntoViewIfNeeded();
+  await page.screenshot({ path: 'reports/editor/empty-layout-mobile.png', fullPage: true });
+  await page.getByRole('button', { name: 'Desktop', exact: true }).click();
+  await page.locator('#save').click();
+  await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
+  await page.reload(); await previewReady();
+  assert.equal(await frame.locator(`#${newSectionId} .editor-empty`).count(), 2, 'saved empty columns survive reload');
+  for (const device of ['Desktop', 'Mobil']) {
+    await page.getByRole('button', { name: device, exact: true }).click();
+    const destination = frame.locator(`#${secondColumnId}`);
+    await destination.scrollIntoViewIfNeeded();
+    const box = await destination.boundingBox();
+    await page.locator(`#structure [data-block-id="${firstColumnId}"]`).dragTo(destination, {
+      targetPosition: device === 'Desktop' ? { x: box.width - 8, y: 8 } : { x: 8, y: box.height - 8 },
+    });
+    await previewReady();
+    assert.equal(await frame.locator(`#${newSectionId} .block-column`).first().getAttribute('id'), secondColumnId, `column order follows the ${device} layout`);
+    await page.locator('#undo').click(); await previewReady();
+    assert.equal(await frame.locator(`#${newSectionId} .block-column`).first().getAttribute('id'), firstColumnId);
+  }
+  await page.getByRole('button', { name: 'Desktop', exact: true }).click();
+  const savedEmptyDraft = await page.evaluate(async () => (await (await fetch(document.querySelector('#editor').dataset.api)).json()).document);
+  assert.equal(JSON.stringify(savedEmptyDraft).includes('editor-empty'), false, 'editing aids never enter content');
+  const publicBefore = await (await fetch(origin)).text();
+  assert.equal(publicBefore.includes(newSectionId), false, 'draft remains private');
+  await page.locator('#publish').click(); await page.locator('#confirm-publish').click();
+  await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
+  const publishedEmpty = await (await fetch(origin)).text();
+  assert.ok(publishedEmpty.includes(newSectionId));
+  assert.equal(/editor-empty|data-editor-target|preview-containers|preview\.css|Inhalt hinzufügen/.test(publishedEmpty), false, 'public output has no editor aids');
+  // Restore the fixture through the same editor actions; subsequent tests retain their baseline.
+  await page.locator(`#structure [data-block-id="${newSectionId}"]`).click();
+  await page.locator('#delete').click();
+  await page.locator('#save').click();
+  await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
+  await page.locator('#publish').click(); await page.locator('#confirm-publish').click();
+  await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
+  await page.reload(); await previewReady();
+  checks.push({ name: 'empty sections and columns: keyboard insertion, exact drop target, undo, responsive preview, reload and public isolation', passed: true });
   await frame.locator('h1').click();
   assert.equal(await page.locator('#properties-title').innerText(), 'Überschrift');
   await page.getByLabel('Text', { exact: true }).fill('Meine bearbeitete Website');

templates/admin/base.html.twig

@@ -17,7 +17,7 @@
        Importzeile sie kennen muss. Sie steht vor jedem Modul-Skript; spaeter geladen wirkt sie
        nicht mehr. #}
     <script type="importmap" nonce="{{ csp_nonce() }}">{"imports":{
-{%- for modul in ['editor-model', 'media', 'design-panel', 'rich-text', 'canvas-overlay', 'library-previews'] %}
+{%- for modul in ['editor-model', 'media', 'design-panel', 'rich-text', 'canvas-overlay', 'library-previews', 'preview-containers'] %}
         "/assets/{{ modul }}.js": "/assets/{{ modul }}.js?v={{ kant_version() }}"{{ loop.last ? '' : ',' }}
 {%- endfor %}
     }}</script>