feat: Listen-Elemente, virtuelle Start/Abschluss-Blöcke und Workflow-Validierung

- Neue Aufgabentypen: Text-/Zahlen-Liste (fields) und Checkbox-Liste (entries); Export/Import um fields und choices erweitert
- Typ-spezifische Element-Einstellungen in MongoDB (ElementSettingsService/-Document, ElementCollectionProperties)
- Virtuelle Start-/Abschluss-Elemente (nur zur Darstellung, nicht exportiert); keine Einstellungen; Export erzwingt vorhandenes und verdrahtetes Start- und Abschluss-Element
- Node-Editor: nur eine Verbindung je Ausgang (Start des Drags unterbunden)
- Script-Block korrekt aus dem App-JSON gefiltert (Typ 0)
- Fixes: tsconfig ignoreDeprecations 6.0; JDT-Null-Analyse (Method-Referenzen zu Lambdas)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.env.example

@@ -15,3 +15,29 @@ MONGODB_COLLECTION=tasks_json
 
 # Collection, in der die Canvas-Stände (Layout + Werte) gespeichert werden:
 MONGODB_CANVAS_COLLECTION=canvas_layouts
+
+# Collection, in der die benutzerdefinierten Typen gespeichert werden:
+MONGODB_CUSTOM_TYPE_COLLECTION=custom_types
+
+# --- Collections je Element-Typ ---------------------------------------------
+# Beim Speichern eines Canvas werden die Einstellungen jedes platzierten
+# Elements zusätzlich je Typ in eine eigene Collection geschrieben.
+# (Benutzerdefinierte Typen nutzen die Collection ihres Basistyps.)
+MONGODB_ELEMENT_ARRIVAL_COLLECTION=element_arrival
+MONGODB_ELEMENT_SIGNATURE_COLLECTION=element_signature
+MONGODB_ELEMENT_PHOTOS_COLLECTION=element_photos
+MONGODB_ELEMENT_RECEIPT_GIVER_COLLECTION=element_receipt_giver
+MONGODB_ELEMENT_REMARK_COLLECTION=element_remark
+MONGODB_ELEMENT_COMMISSION_NUMBER_COLLECTION=element_commission_number
+MONGODB_ELEMENT_CHECKBOX_COLLECTION=element_checkbox
+MONGODB_ELEMENT_BARCODE_COLLECTION=element_barcode
+MONGODB_ELEMENT_STATUS_SELECTION_COLLECTION=element_status_selection
+MONGODB_ELEMENT_TEXT_LIST_COLLECTION=element_text_list
+MONGODB_ELEMENT_NUMBER_LIST_COLLECTION=element_number_list
+MONGODB_ELEMENT_CHECKBOX_LIST_COLLECTION=element_checkbox_list
+MONGODB_ELEMENT_SCRIPT_COLLECTION=element_script
+
+# Script-Block (grafisches Logik-Element) ausblenden:
+# true  = Script-Element wird im Editor nicht angezeigt
+# false = Script-Element ist verfügbar (Standard)
+HIDE_SCRIPT_BLOCK=false

src/main/frontend/node-editor/node-editor.js

@@ -1,32 +1,182 @@
 import Drawflow from 'drawflow';
 import 'drawflow/dist/drawflow.min.css';
 
-function customCurvature(sx, sy, ex, ey) {
+// Senkrechter Stub, mit dem jede Linie aus dem Ausgang austritt bzw.
+// senkrecht in den Eingang des Ziels eintritt, bevor sie abbiegt.
+const EXIT_STUB = 5;
+
+// Greif-Offset (in Bildschirm-Pixeln) zwischen Mauszeiger und linker oberer
+// Ecke des gezogenen Palette-Elements. Wird beim Drop abgezogen, damit der
+// Knoten an seiner gezogenen Position liegt statt mit der Ecke an der Maus.
+let dragGrabOffset = { x: 0, y: 0 };
+
+function verticalCurvature(sx, sy, ex, ey) {
     const dx = ex - sx;
-    const dy = ey - sy;
-    const adyt = Math.abs(dy);
     const minOffset = 40;
 
-    if (dy >= -8) {
+    // Punkte nach dem Austritts- bzw. vor dem Eintritts-Stub.
-        const offset = Math.max(adyt * 0.5, minOffset);
+    const sy2 = sy + EXIT_STUB;
-        const c1x = sx + dx * 0.5;
+    const ey2 = ey - EXIT_STUB;
-        const c1y = sy + offset;
+
-        const c2x = ex;
+    if (ey - sy >= -8) {
-        const c2y = ey - offset;
+        const offset = Math.max(Math.abs(ey2 - sy2) * 0.5, minOffset);
-        return ` M ${sx} ${sy} C ${c1x} ${c1y} ${c2x} ${c2y} ${ex} ${ey}`;
+        const c1x = sx;            // Tangente bleibt senkrecht zum Austritts-Stub
+        const c1y = sy2 + offset;
+        const c2x = ex;            // Tangente bleibt senkrecht zum Eintritts-Stub
+        const c2y = ey2 - offset;
+        return ` M ${sx} ${sy} L ${sx} ${sy2} C ${c1x} ${c1y} ${c2x} ${c2y} ${ex} ${ey2} L ${ex} ${ey}`;
     }
 
-    const loopOffset = adyt * 0.5 + 80;
+    const loopOffset = Math.abs(ey2 - sy2) * 0.5 + 80;
     const sign = Math.sign(dx) || 1;
-    const c1x = sx + sign * 60;
+    const c1x = sx;                // Tangente bleibt senkrecht zum Austritts-Stub
-    const c1y = sy + loopOffset;
+    const c1y = sy2 + loopOffset;
     const c2x = ex - sign * 60;
-    const c2y = ey - loopOffset;
+    const c2y = ey2 - loopOffset;
-    return ` M ${sx} ${sy} C ${c1x} ${c1y} ${c2x} ${c2y} ${ex} ${ey}`;
+    return ` M ${sx} ${sy} L ${sx} ${sy2} C ${c1x} ${c1y} ${c2x} ${c2y} ${ex} ${ey2} L ${ex} ${ey}`;
+}
+
+// --- Hindernis-bewusste Linienführung -------------------------------------
+// Ports liegen oben (Eingang) und unten (Ausgang). Damit Linien nach
+// Möglichkeit nicht über andere Kacheln (oder bei Rückwärtskanten über Quell-/
+// Zielkachel) laufen, werden kreuzende Verbindungen seitlich an den Kacheln
+// vorbei über eine freie Spalte umgeleitet.
+const ROUTE_STUB = 16;    // senkrechte Aus-/Eintrittsstrecke an den Ports
+const ROUTE_PAD = 18;     // Sicherheitsabstand um jede Kachel
+const ROUTE_RADIUS = 14;  // Eckenradius der Umleitung
+
+// Alle Knoten-Rechtecke (Canvas-Koordinaten, inkl. Sicherheitsabstand).
+function nodeRects(state) {
+    const rects = [];
+    state.container.querySelectorAll('.drawflow-node').forEach(el => {
+        const left = parseFloat(el.style.left) || 0;
+        const top = parseFloat(el.style.top) || 0;
+        const w = el.offsetWidth || 0;
+        const h = el.offsetHeight || 0;
+        if (!w || !h) return;
+        rects.push({
+            left: left - ROUTE_PAD, top: top - ROUTE_PAD,
+            right: left + w + ROUTE_PAD, bottom: top + h + ROUTE_PAD
+        });
+    });
+    return rects;
+}
+
+// Rechtecke ohne die Quell-/Zielkachel (die die Endpunkte enthalten).
+function withoutEndpointRects(rects, sx, sy, ex, ey) {
+    return rects.filter(r => {
+        const hasStart = sx >= r.left && sx <= r.right && sy >= r.top && sy <= r.bottom;
+        const hasEnd = ex >= r.left && ex <= r.right && ey >= r.top && ey <= r.bottom;
+        return !hasStart && !hasEnd;
+    });
+}
+
+function pointInAnyRect(x, y, rects) {
+    return rects.some(r => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
+}
+
+// Tastet einen beliebigen SVG-Pfad ab und prüft, ob er über eine Kachel läuft.
+function pathHits(d, rects) {
+    if (!rects.length) return false;
+    const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    p.setAttribute('d', d);
+    let total = 0;
+    try { total = p.getTotalLength(); } catch (e) { return false; }
+    if (!total) return false;
+    const steps = Math.max(16, Math.min(120, Math.round(total / 10)));
+    for (let i = 1; i < steps; i++) {
+        const pt = p.getPointAtLength((i / steps) * total);
+        if (pointInAnyRect(pt.x, pt.y, rects)) return true;
+    }
+    return false;
+}
+
+// Treffer-Test für achsenparallele Wegpunkte (Segment-BBox == Segment).
+function segmentsHit(points, rects) {
+    for (let i = 0; i < points.length - 1; i++) {
+        const a = points[i], b = points[i + 1];
+        const left = Math.min(a.x, b.x), right = Math.max(a.x, b.x);
+        const top = Math.min(a.y, b.y), bottom = Math.max(a.y, b.y);
+        if (rects.some(r => right >= r.left && left <= r.right && bottom >= r.top && top <= r.bottom)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+// Wegpunkte: aus dem Ausgang nach unten, über eine freie Spalte (channelX)
+// und von oben in den Eingang.
+function channelWaypoints(sx, sy, ex, ey, channelX) {
+    const ay = sy + ROUTE_STUB;
+    const by = ey - ROUTE_STUB;
+    return [
+        { x: sx, y: sy }, { x: sx, y: ay }, { x: channelX, y: ay },
+        { x: channelX, y: by }, { x: ex, y: by }, { x: ex, y: ey }
+    ];
+}
+
+// Glatter Pfad mit abgerundeten Ecken durch achsenparallele Wegpunkte.
+function roundedPath(pts, radius) {
+    const points = [];
+    for (const p of pts) {
+        const last = points[points.length - 1];
+        if (!last || Math.abs(last.x - p.x) > 0.5 || Math.abs(last.y - p.y) > 0.5) points.push(p);
+    }
+    if (points.length < 2) return '';
+    if (points.length === 2) {
+        return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+    }
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const p0 = points[i - 1], p1 = points[i], p2 = points[i + 1];
+        const v1x = p1.x - p0.x, v1y = p1.y - p0.y;
+        const v2x = p2.x - p1.x, v2y = p2.y - p1.y;
+        const len1 = Math.hypot(v1x, v1y) || 1;
+        const len2 = Math.hypot(v2x, v2y) || 1;
+        const rr = Math.min(radius, len1 / 2, len2 / 2);
+        const s1x = p1.x - (v1x / len1) * rr, s1y = p1.y - (v1y / len1) * rr;
+        const e1x = p1.x + (v2x / len2) * rr, e1y = p1.y + (v2y / len2) * rr;
+        d += ` L ${s1x} ${s1y} Q ${p1.x} ${p1.y} ${e1x} ${e1y}`;
+    }
+    const last = points[points.length - 1];
+    d += ` L ${last.x} ${last.y}`;
+    return d;
+}
+
+// Liefert den SVG-Pfad einer Verbindung – direkt, falls frei, sonst umgeleitet.
+function routeConnection(state, sx, sy, ex, ey) {
+    const direct = verticalCurvature(sx, sy, ex, ey);
+    const all = nodeRects(state);
+    const others = withoutEndpointRects(all, sx, sy, ex, ey);
+
+    // Klare Vorwärtskante ohne fremde Kachel im Weg -> bisherige Kurve behalten.
+    const isBackward = ey < sy + 2 * ROUTE_STUB;
+    if (!isBackward && !pathHits(direct, others)) return direct;
+
+    // Bei Rückwärtskanten auch um Quell-/Zielkachel herum, bei Vorwärtskanten
+    // nur um fremde Kacheln.
+    const candidates = isBackward ? all : others;
+    const spanTop = Math.min(sy, ey) - ROUTE_STUB;
+    const spanBottom = Math.max(sy, ey) + ROUTE_STUB;
+    const blockers = candidates.filter(r => r.bottom > spanTop && r.top < spanBottom);
+    if (!blockers.length) return direct;
+
+    const ref = (sx + ex) / 2;
+    const leftX = Math.min(...blockers.map(r => r.left)) - ROUTE_PAD;
+    const rightX = Math.max(...blockers.map(r => r.right)) + ROUTE_PAD;
+    const first = Math.abs(leftX - ref) <= Math.abs(rightX - ref) ? leftX : rightX;
+    const second = first === leftX ? rightX : leftX;
+
+    let wp = channelWaypoints(sx, sy, ex, ey, first);
+    if (segmentsHit(wp, others)) {
+        const alt = channelWaypoints(sx, sy, ex, ey, second);
+        if (!segmentsHit(alt, others)) wp = alt;
+    }
+    return roundedPath(wp, ROUTE_RADIUS);
 }
 
 if (Drawflow && Drawflow.prototype) {
-    Drawflow.prototype.createCurvature = customCurvature;
+    Drawflow.prototype.createCurvature = verticalCurvature;
 }
 
 const editors = new WeakMap();
@@ -38,6 +188,8 @@ if (!window.__taskListEditorDragInit) {
         if (target && e.dataTransfer) {
             e.dataTransfer.setData('application/x-blocktype', target.dataset.blocktype);
             e.dataTransfer.effectAllowed = 'copy';
+            const r = target.getBoundingClientRect();
+            dragGrabOffset = { x: e.clientX - r.left, y: e.clientY - r.top };
         }
     }, true);
 }
@@ -49,6 +201,9 @@ function buildNodeHtml(label, color) {
     return `
         <div class="task-node" data-color="${color}">
             <div class="task-node-header" style="background:${color}"></div>
+            <div class="task-node-gear" title="Einstellungen">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.48.48 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96a.48.48 0 0 0-.59.22L2.74 8.87c-.12.21-.07.49.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 0 0-.12-.61l-2.03-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>
+            </div>
             <div class="task-node-body">
                 <div class="task-node-title">${safe}</div>
             </div>
@@ -73,7 +228,6 @@ function attach(host) {
     editor.reroute = true;
     editor.reroute_fix_curvature = true;
     editor.curvature = 0.5;
-    editor.createCurvature = customCurvature;
     editor.start();
 
     const state = {
@@ -83,6 +237,13 @@ function attach(host) {
     };
     editors.set(host, state);
 
+    // Hindernis-bewusste Linienführung. Reroute-Teilsegmente
+    // (type != 'openclose') nutzen die einfache vertikale Kurve.
+    editor.createCurvature = (sx, sy, ex, ey, curvature, type) =>
+        (type && type !== 'openclose')
+            ? verticalCurvature(sx, sy, ex, ey)
+            : routeConnection(state, sx, sy, ex, ey);
+
     container.addEventListener('dragover', e => {
         e.preventDefault();
         e.dataTransfer.dropEffect = 'copy';
@@ -97,8 +258,10 @@ function attach(host) {
 
         const rect = container.getBoundingClientRect();
         const zoom = editor.zoom;
-        const px = (e.clientX - rect.left - editor.canvas_x) / zoom;
+        // Greif-Offset abziehen, damit der Knoten an seiner gezogenen Position
-        const py = (e.clientY - rect.top - editor.canvas_y) / zoom;
+        // liegt (linke obere Ecke wie während des Ziehens, nicht an der Maus).
+        const px = (e.clientX - rect.left - editor.canvas_x - dragGrabOffset.x) / zoom;
+        const py = (e.clientY - rect.top - editor.canvas_y - dragGrabOffset.y) / zoom;
 
         addNodeInternal(host, def, px, py);
     });
@@ -106,6 +269,21 @@ function attach(host) {
     editor.on('nodeSelected', id => {
         host.$server && host.$server.onNodeSelected(parseInt(id, 10));
     });
+
+    // Klick auf das Zahnrad-Icon eines Knotens -> Einstellungen öffnen.
+    container.addEventListener('mousedown', e => {
+        const gear = e.target instanceof Element ? e.target.closest('.task-node-gear') : null;
+        if (gear) e.stopPropagation(); // verhindert das Verschieben des Knotens
+    }, true);
+    container.addEventListener('click', e => {
+        const gear = e.target instanceof Element ? e.target.closest('.task-node-gear') : null;
+        if (!gear) return;
+        const nodeEl = gear.closest('.drawflow-node');
+        if (!nodeEl) return;
+        e.stopPropagation();
+        const id = parseInt(nodeEl.id.replace('node-', ''), 10);
+        host.$server && host.$server.onNodeActivated(id);
+    }, true);
     editor.on('nodeUnselected', () => {
         host.$server && host.$server.onNodeUnselected();
     });
@@ -113,9 +291,209 @@ function attach(host) {
         host.$server && host.$server.onNodeRemoved(parseInt(id, 10));
     });
 
+    // Pro Ausgang ist nur eine Verbindung erlaubt. Hat ein Ausgang bereits eine
+    // Linie, wird Drawflows Verbindungs-Drag gar nicht erst gestartet: Das
+    // mousedown/touchstart auf dem Ausgangs-Punkt wird in der Capture-Phase
+    // abgefangen, bevor Drawflows eigener Handler ausgelöst wird.
+    const blockSecondConnectionStart = e => {
+        if (e.type === 'mousedown' && e.button !== 0) return;
+        const target = e.target;
+        if (!(target instanceof Element) || !target.classList.contains('output')) return;
+        const nodeEl = target.closest('.drawflow-node');
+        if (!nodeEl) return;
+        const id = parseInt(nodeEl.id.replace('node-', ''), 10);
+        const outputClass = Array.from(target.classList).find(c => c.startsWith('output_'));
+        if (!outputClass) return;
+        const node = editor.drawflow.drawflow[editor.module].data[id];
+        const output = node && node.outputs[outputClass];
+        if (output && output.connections.length >= 1) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+    container.addEventListener('mousedown', blockSecondConnectionStart, true);
+    container.addEventListener('touchstart', blockSecondConnectionStart, true);
+
+    // Sicherheitsnetz: Sollte auf anderem Weg dennoch eine zweite Verbindung am
+    // selben Ausgang entstehen, wird die neu erstellte sofort wieder entfernt.
+    editor.on('connectionCreated', conn => {
+        const data = editor.drawflow.drawflow[editor.module].data;
+        const node = data[conn.output_id];
+        const output = node && node.outputs[conn.output_class];
+        if (output && output.connections.length > 1) {
+            editor.removeSingleConnection(conn.output_id, conn.input_id, conn.output_class, conn.input_class);
+        }
+    });
+
+    // Klick in die Nähe einer Verbindung (auf leerem Canvas-Hintergrund) wählt
+    // diese aus – robuster als das exakte Treffen der dünnen Linie. Läuft in der
+    // Capture-Phase vor Drawflow, um das Verschieben/Deselektieren zu verhindern.
+    container.addEventListener('mousedown', e => {
+        if (e.button !== 0) return;
+        const cls = e.target instanceof Element ? e.target.classList : null;
+        const onBackground = cls && (cls.contains('parent-drawflow') || cls.contains('drawflow'));
+        if (!onBackground) return; // Klicks auf Knoten/Ports/Linien normal behandeln
+        const path = nearestConnectionPath(state, e.clientX, e.clientY, 12);
+        if (!path) return;
+        e.stopPropagation();
+        selectConnection(state, path);
+    }, true);
+
+    // Verschieben von Knoten mit der RECHTEN Maustaste. Drawflow zieht Knoten
+    // nur mit links; das Ziehen mit rechts wird hier eigenständig umgesetzt.
+    let rightDrag = null;
+    let suppressContextMenu = false;
+    container.addEventListener('mousedown', e => {
+        if (e.button !== 2) return;
+        const nodeEl = e.target instanceof Element ? e.target.closest('.drawflow-node') : null;
+        if (!nodeEl) return;
+        e.preventDefault();
+        e.stopPropagation(); // Drawflows eigene (Links-)Drag-Logik nicht auslösen
+        rightDrag = {
+            nodeEl,
+            id: nodeEl.id.replace('node-', ''),
+            lastX: e.clientX,
+            lastY: e.clientY
+        };
+        suppressContextMenu = true;
+    }, true);
+
+    const onRightMove = e => {
+        if (!rightDrag) return;
+        const zoom = editor.zoom || 1;
+        const newLeft = rightDrag.nodeEl.offsetLeft + (e.clientX - rightDrag.lastX) / zoom;
+        const newTop = rightDrag.nodeEl.offsetTop + (e.clientY - rightDrag.lastY) / zoom;
+        rightDrag.lastX = e.clientX;
+        rightDrag.lastY = e.clientY;
+        rightDrag.nodeEl.style.left = newLeft + 'px';
+        rightDrag.nodeEl.style.top = newTop + 'px';
+        const data = editor.drawflow.drawflow[editor.module].data[rightDrag.id];
+        if (data) { data.pos_x = newLeft; data.pos_y = newTop; }
+        editor.updateConnectionNodes('node-' + rightDrag.id);
+    };
+    const onRightUp = () => { rightDrag = null; };
+    document.addEventListener('mousemove', onRightMove);
+    document.addEventListener('mouseup', onRightUp);
+
+    // Browser-Kontextmenü nach einem Rechts-Ziehen auf einem Knoten unterdrücken.
+    container.addEventListener('contextmenu', e => {
+        if (suppressContextMenu) {
+            e.preventDefault();
+            suppressContextMenu = false;
+        }
+    });
+
+    // Zoomen mit dem Mausrad (ohne Strg). Läuft in der Capture-Phase und stoppt
+    // die Propagation, damit Drawflows eigenes Strg+Rad-Zoom nicht zusätzlich
+    // auslöst.
+    const onWheelZoom = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.deltaY > 0) {
+            editor.zoom_out();
+        } else if (e.deltaY < 0) {
+            editor.zoom_in();
+        }
+    };
+    container.addEventListener('wheel', onWheelZoom, { capture: true, passive: false });
+
+    // Eine angeklickte Verbindung erhält den Fokus auf dem Canvas-Container,
+    // damit die Entf-/Backspace-Taste sie löschen kann.
+    editor.on('connectionSelected', () => {
+        container.focus({ preventScroll: true });
+    });
+
+    // Absicherung: Verbindung auch dann löschen, wenn der Canvas-Container nicht
+    // den Tastaturfokus hat (Drawflows eigener Handler hängt am Container).
+    const deleteSelectedConnection = e => {
+        if (e.key !== 'Delete' && e.key !== 'Backspace') return;
+        if (editor.connection_selected == null) return;
+        const active = document.activeElement;
+        const tag = active && active.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA'
+                || (active && active.isContentEditable)) {
+            return; // Eingaben in Textfeldern nicht abfangen
+        }
+        e.preventDefault();
+        editor.removeConnection();
+    };
+    document.addEventListener('keydown', deleteSelectedConnection);
+    state.cleanup = () => {
+        document.removeEventListener('keydown', deleteSelectedConnection);
+        document.removeEventListener('mousemove', onRightMove);
+        document.removeEventListener('mouseup', onRightUp);
+        container.removeEventListener('wheel', onWheelZoom, { capture: true });
+    };
+
     return state;
 }
 
+// Wandelt Client-Koordinaten in das (unskalierte) Canvas-Koordinatensystem um,
+// in dem auch die Verbindungspfade definiert sind.
+function toCanvasPoint(state, clientX, clientY) {
+    const editor = state.editor;
+    const rect = state.container.getBoundingClientRect();
+    const zoom = editor.zoom || 1;
+    return {
+        x: (clientX - rect.left - editor.canvas_x) / zoom,
+        y: (clientY - rect.top - editor.canvas_y) / zoom,
+        zoom
+    };
+}
+
+// Sucht den Verbindungspfad, der einem Klickpunkt am nächsten liegt (innerhalb
+// der Toleranz). Nur fertige Verbindungen (Drawflow-Klasse node_in_node-<id>).
+function nearestConnectionPath(state, clientX, clientY, tolerancePx) {
+    const { x, y, zoom } = toCanvasPoint(state, clientX, clientY);
+    const tolerance = tolerancePx / zoom;
+    let best = null;
+    let bestDist = tolerance;
+    state.container
+        .querySelectorAll('.connection[class*="node_in_node-"] .main-path')
+        .forEach(path => {
+            let length;
+            try { length = path.getTotalLength(); } catch (e) { return; }
+            if (!length) return;
+            const step = Math.max(5, length / 80);
+            for (let d = 0; d <= length; d += step) {
+                const pt = path.getPointAtLength(d);
+                const dist = Math.hypot(pt.x - x, pt.y - y);
+                if (dist < bestDist) {
+                    bestDist = dist;
+                    best = path;
+                }
+            }
+        });
+    return best;
+}
+
+// Wählt eine Verbindung programmatisch aus (analog zu Drawflows interner
+// main-path-Auswahl), damit sie hervorgehoben und per Entf löschbar ist.
+function selectConnection(state, pathEl) {
+    const editor = state.editor;
+    if (editor.node_selected) {
+        editor.node_selected.classList.remove('selected');
+        editor.node_selected = null;
+        editor.dispatch('nodeUnselected', true);
+    }
+    if (editor.connection_selected) {
+        editor.connection_selected.classList.remove('selected');
+    }
+    editor.connection_selected = pathEl;
+    const parent = pathEl.parentElement;
+    parent.querySelectorAll('.main-path').forEach(p => p.classList.add('selected'));
+    const cl = parent.classList;
+    if (cl.length > 1) {
+        editor.dispatch('connectionSelected', {
+            output_id: cl[2].slice(14),
+            input_id: cl[1].slice(13),
+            output_class: cl[3],
+            input_class: cl[4]
+        });
+    }
+    state.container.focus({ preventScroll: true });
+}
+
 function addNodeInternal(host, def, x, y) {
     const state = editors.get(host);
     if (!state) return null;
@@ -150,6 +528,22 @@ window.taskListEditor = {
         if (!def) return;
         addNodeInternal(host, def, x, y);
     },
+    setNodeOutputs(host, nodeId, count) {
+        const state = editors.get(host);
+        if (!state) return;
+        const editor = state.editor;
+        const node = editor.getNodeFromId(nodeId);
+        if (!node) return;
+        let current = Object.keys(node.outputs || {}).length;
+        while (current < count) {
+            editor.addNodeOutput(nodeId);
+            current++;
+        }
+        while (current > count) {
+            editor.removeNodeOutput(nodeId, `output_${current}`);
+            current--;
+        }
+    },
     updateNodeLabel(host, nodeId, label) {
         const state = editors.get(host);
         if (!state) return;

src/main/frontend/node-editor/script-editor.js

@@ -0,0 +1,448 @@
+import Drawflow from 'drawflow';
+import 'drawflow/dist/drawflow.min.css';
+
+// Logik-Knotentypen des Script-Editors (Anzahl Ein-/Ausgänge).
+const LOGIC = {
+    constant: { inputs: 0, outputs: 1 },
+    variable: { inputs: 0, outputs: 1 },
+    compare:  { inputs: 2, outputs: 2 },
+    and:      { inputs: 2, outputs: 1 },
+    or:       { inputs: 2, outputs: 1 },
+    not:      { inputs: 1, outputs: 1 },
+    if:       { inputs: 1, outputs: 2 },
+    result:   { inputs: 1, outputs: 0 },
+    output:   { inputs: 1, outputs: 0 }
+};
+
+const scriptEditors = new WeakMap();
+
+// Rastergröße – passend zum gepunkteten Canvas-Hintergrund (24px).
+const GRID = 24;
+
+function snap(value) {
+    return Math.round(value / GRID) * GRID;
+}
+
+// Horizontale Kurvenführung: Linien treten waagerecht aus dem Ausgang aus
+// und treten waagerecht in den Eingang ein (Ports liegen links/rechts).
+function horizontalCurvature(sx, sy, ex, ey) {
+    const offset = Math.max(Math.abs(ex - sx) * 0.5, 40);
+    return ` M ${sx} ${sy} C ${sx + offset} ${sy} ${ex - offset} ${ey} ${ex} ${ey}`;
+}
+
+// --- Hindernis-bewusste Linienführung -------------------------------------
+// createCurvature kennt nur die Endpunkte der Verbindung. Damit Linien nach
+// Möglichkeit nicht über andere Kacheln laufen, lesen wir die Knoten-Rechtecke
+// (in Canvas-Koordinaten) direkt aus dem DOM und leiten eine kreuzende Linie
+// über einen freien horizontalen Kanal ober- oder unterhalb der Kacheln um.
+
+const ROUTE_STUB = 26;    // waagerechte Aus-/Eintrittsstrecke an den Ports
+const ROUTE_PAD = 14;     // Sicherheitsabstand um jede Kachel
+const ROUTE_RADIUS = 12;  // Eckenradius der Umleitung
+
+// Knoten-Rechtecke als Hindernisse; Quell-/Zielknoten (die die Endpunkte
+// enthalten) werden ausgeschlossen.
+function obstacleRects(state, sx, sy, ex, ey) {
+    const rects = [];
+    state.container.querySelectorAll('.drawflow-node').forEach(el => {
+        const left = parseFloat(el.style.left) || 0;
+        const top = parseFloat(el.style.top) || 0;
+        const w = el.offsetWidth || 0;
+        const h = el.offsetHeight || 0;
+        if (!w || !h) return;
+        const r = {
+            left: left - ROUTE_PAD, top: top - ROUTE_PAD,
+            right: left + w + ROUTE_PAD, bottom: top + h + ROUTE_PAD
+        };
+        const hasStart = sx >= r.left && sx <= r.right && sy >= r.top && sy <= r.bottom;
+        const hasEnd = ex >= r.left && ex <= r.right && ey >= r.top && ey <= r.bottom;
+        if (hasStart || hasEnd) return;
+        rects.push(r);
+    });
+    return rects;
+}
+
+function pointInAnyRect(x, y, rects) {
+    return rects.some(r => x >= r.left && x <= r.right && y >= r.top && y <= r.bottom);
+}
+
+// Läuft die (abgetastete) Bézier-Kurve über eine Kachel?
+function bezierHits(sx, sy, c1x, c1y, c2x, c2y, ex, ey, rects) {
+    const N = 24;
+    for (let i = 1; i < N; i++) {
+        const t = i / N, u = 1 - t;
+        const x = u * u * u * sx + 3 * u * u * t * c1x + 3 * u * t * t * c2x + t * t * t * ex;
+        const y = u * u * u * sy + 3 * u * u * t * c1y + 3 * u * t * t * c2y + t * t * t * ey;
+        if (pointInAnyRect(x, y, rects)) return true;
+    }
+    return false;
+}
+
+// Treffer-Test für eine achsenparallele Wegpunktkette (Segment-BBox == Segment).
+function segmentsHit(points, rects) {
+    for (let i = 0; i < points.length - 1; i++) {
+        const a = points[i], b = points[i + 1];
+        const left = Math.min(a.x, b.x), right = Math.max(a.x, b.x);
+        const top = Math.min(a.y, b.y), bottom = Math.max(a.y, b.y);
+        if (rects.some(r => right >= r.left && left <= r.right && bottom >= r.top && top <= r.bottom)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+// Wegpunkte: Aus dem Port heraus, über einen Kanal auf Höhe channelY und in
+// den Zielport hinein.
+function channelWaypoints(sx, sy, ex, ey, channelY) {
+    const ax = sx + ROUTE_STUB;
+    const bx = ex - ROUTE_STUB;
+    return [
+        { x: sx, y: sy }, { x: ax, y: sy }, { x: ax, y: channelY },
+        { x: bx, y: channelY }, { x: bx, y: ey }, { x: ex, y: ey }
+    ];
+}
+
+// Glatter Pfad mit abgerundeten Ecken durch achsenparallele Wegpunkte.
+function roundedPath(pts, radius) {
+    const points = [];
+    for (const p of pts) {
+        const last = points[points.length - 1];
+        if (!last || Math.abs(last.x - p.x) > 0.5 || Math.abs(last.y - p.y) > 0.5) points.push(p);
+    }
+    if (points.length < 2) return '';
+    if (points.length === 2) {
+        return `M ${points[0].x} ${points[0].y} L ${points[1].x} ${points[1].y}`;
+    }
+    let d = `M ${points[0].x} ${points[0].y}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const p0 = points[i - 1], p1 = points[i], p2 = points[i + 1];
+        const v1x = p1.x - p0.x, v1y = p1.y - p0.y;
+        const v2x = p2.x - p1.x, v2y = p2.y - p1.y;
+        const len1 = Math.hypot(v1x, v1y) || 1;
+        const len2 = Math.hypot(v2x, v2y) || 1;
+        const rr = Math.min(radius, len1 / 2, len2 / 2);
+        const s1x = p1.x - (v1x / len1) * rr, s1y = p1.y - (v1y / len1) * rr;
+        const e1x = p1.x + (v2x / len2) * rr, e1y = p1.y + (v2y / len2) * rr;
+        d += ` L ${s1x} ${s1y} Q ${p1.x} ${p1.y} ${e1x} ${e1y}`;
+    }
+    const last = points[points.length - 1];
+    d += ` L ${last.x} ${last.y}`;
+    return d;
+}
+
+// Liefert den SVG-Pfad einer Verbindung – direkt, falls frei, sonst umgeleitet.
+function routeConnection(state, sx, sy, ex, ey) {
+    const offset = Math.max(Math.abs(ex - sx) * 0.5, 40);
+    const c1x = sx + offset, c2x = ex - offset;
+    const direct = ` M ${sx} ${sy} C ${c1x} ${sy} ${c2x} ${ey} ${ex} ${ey}`;
+
+    const rects = obstacleRects(state, sx, sy, ex, ey);
+    if (rects.length === 0 || !bezierHits(sx, sy, c1x, sy, c2x, ey, ex, ey, rects)) {
+        return direct;
+    }
+
+    // Kacheln, die im waagerechten Bereich zwischen Quelle und Ziel liegen.
+    const spanLeft = Math.min(sx, ex), spanRight = Math.max(sx, ex);
+    const blockers = rects.filter(r => r.right > spanLeft && r.left < spanRight);
+    if (blockers.length === 0) return direct;
+
+    const ref = (sy + ey) / 2;
+    const aboveY = Math.min(...blockers.map(r => r.top)) - ROUTE_PAD;
+    const belowY = Math.max(...blockers.map(r => r.bottom)) + ROUTE_PAD;
+    const first = Math.abs(aboveY - ref) <= Math.abs(belowY - ref) ? aboveY : belowY;
+    const second = first === aboveY ? belowY : aboveY;
+
+    let wp = channelWaypoints(sx, sy, ex, ey, first);
+    if (segmentsHit(wp, rects)) {
+        const alt = channelWaypoints(sx, sy, ex, ey, second);
+        if (!segmentsHit(alt, rects)) wp = alt;
+    }
+    return roundedPath(wp, ROUTE_RADIUS);
+}
+
+// Drag-Start für die Operator-Kacheln (einmalig global registrieren).
+if (!window.__scriptEditorDragInit) {
+    window.__scriptEditorDragInit = true;
+    document.addEventListener('dragstart', e => {
+        const target = e.target instanceof Element ? e.target.closest('[data-logictype]') : null;
+        if (target && e.dataTransfer) {
+            e.dataTransfer.setData('application/x-logictype', target.dataset.logictype);
+            e.dataTransfer.effectAllowed = 'copy';
+        }
+    }, true);
+}
+
+function logicHtml(typeId) {
+    switch (typeId) {
+        case 'constant':
+            return `<div class="logic-node logic-constant">
+                <div class="logic-node-title">Konstante</div>
+                <input df-const class="logic-input" placeholder="Wert">
+            </div>`;
+        case 'variable':
+            return `<div class="logic-node logic-variable">
+                <div class="logic-node-title">Variable</div>
+                <select df-source class="logic-select"></select>
+            </div>`;
+        case 'compare':
+            return `<div class="logic-node logic-compare">
+                <div class="logic-node-title">Vergleich</div>
+                <select df-operator class="logic-select">
+                    <option value="==">=</option>
+                    <option value="!=">&ne;</option>
+                    <option value="&lt;">&lt;</option>
+                    <option value="&gt;">&gt;</option>
+                    <option value="&lt;=">&le;</option>
+                    <option value="&gt;=">&ge;</option>
+                </select>
+                <div class="logic-ports">Eing&auml;nge: oben links &middot; unten rechts</div>
+                <div class="logic-ports">Ausg&auml;nge: oben &bdquo;trifft zu&ldquo; &middot; unten &bdquo;trifft nicht zu&ldquo;</div>
+            </div>`;
+        case 'and':
+            return `<div class="logic-node logic-bool"><div class="logic-node-title">UND</div></div>`;
+        case 'or':
+            return `<div class="logic-node logic-bool"><div class="logic-node-title">ODER</div></div>`;
+        case 'not':
+            return `<div class="logic-node logic-bool"><div class="logic-node-title">NICHT</div></div>`;
+        case 'if':
+            return `<div class="logic-node logic-if">
+                <div class="logic-node-title">Wenn</div>
+                <div class="logic-ports">&#9312; Dann &middot; &#9313; Sonst</div>
+            </div>`;
+        case 'result':
+            return `<div class="logic-node logic-result">
+                <div class="logic-node-title">Ergebnis</div>
+                <input df-result class="logic-input" placeholder="Ergebniswert">
+            </div>`;
+        case 'output':
+            return `<div class="logic-node logic-output">
+                <div class="logic-node-title">Ausgang</div>
+                <input df-name class="logic-input" placeholder="Bezeichnung">
+            </div>`;
+        default:
+            return `<div class="logic-node"><div class="logic-node-title">?</div></div>`;
+    }
+}
+
+function defaultData(typeId) {
+    switch (typeId) {
+        case 'constant': return { type: typeId, const: '' };
+        case 'variable': return { type: typeId, source: '' };
+        case 'compare':  return { type: typeId, operator: '==' };
+        case 'result':   return { type: typeId, result: '' };
+        case 'output':   return { type: typeId, name: '' };
+        default:         return { type: typeId };
+    }
+}
+
+// Füllt das Variablen-Dropdown eines Wert-Knotens mit den verfügbaren
+// Variablen (= eingegebene Daten der anderen Elemente) und erhält die
+// gespeicherte Auswahl.
+function fillSourceSelect(select, variables, current) {
+    const cur = current == null ? '' : String(current);
+    select.innerHTML = '';
+    const empty = document.createElement('option');
+    empty.value = '';
+    empty.textContent = '– Variable wählen –';
+    select.appendChild(empty);
+
+    let found = false;
+    for (const v of variables) {
+        const option = document.createElement('option');
+        option.value = String(v.key);
+        option.textContent = v.label;
+        if (String(v.key) === cur) {
+            option.selected = true;
+            found = true;
+        }
+        select.appendChild(option);
+    }
+    if (cur && !found) {
+        const option = document.createElement('option');
+        option.value = cur;
+        option.textContent = '(entferntes Element)';
+        option.selected = true;
+        select.appendChild(option);
+    }
+}
+
+// Zeichnet alle Verbindungslinien des Graphen neu. Notwendig nach einem
+// Import, da Drawflow die Linien aus den Bildschirmkoordinaten der Ports
+// berechnet.
+function redrawConnections(state) {
+    const modules = state.editor.drawflow.drawflow;
+    for (const moduleName in modules) {
+        for (const id in modules[moduleName].data) {
+            state.editor.updateConnectionNodes(`node-${id}`);
+        }
+    }
+}
+
+// Wird der Graph importiert, während der Dialog-Container noch nicht sichtbar
+// bzw. noch in der Öffnungs-Animation ist, berechnet Drawflow die Verbindungen
+// aus falschen (skalierten oder nicht vorhandenen) Port-Koordinaten und schreibt
+// diese fest in die SVG-Pfade – die Linien sitzen dann neben den Ports oder
+// kollabieren auf den Nullpunkt.
+//
+// Daher die Linien zunächst jeden Frame neu zeichnen, bis sich die
+// Container-Geometrie (Größe und Position) über mehrere Frames nicht mehr
+// ändert (= Dialog-Animation abgeschlossen). Zusätzlich noch einige gestaffelte
+// Neuberechnungen, um späte Reflows (Font-Laden, verzögertes Layout) abzufangen.
+function redrawConnectionsWhenReady(state) {
+    let lastKey = null;
+    let stableFrames = 0;
+    let frames = 0;
+    const tick = () => {
+        const c = state.container;
+        if (c.clientWidth > 0 && c.clientHeight > 0) {
+            const r = c.getBoundingClientRect();
+            const key = [r.left, r.top, r.width, r.height].map(Math.round).join('x');
+            redrawConnections(state);
+            if (key === lastKey) {
+                if (++stableFrames >= 3) return;
+            } else {
+                stableFrames = 0;
+                lastKey = key;
+            }
+        }
+        if (frames++ < 120) requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+
+    // Insurance gegen späte Layout-Änderungen nach abgeschlossener Animation.
+    for (const delay of [150, 350, 600]) {
+        setTimeout(() => {
+            if (state.container.clientWidth > 0 && state.container.clientHeight > 0) {
+                redrawConnections(state);
+            }
+        }, delay);
+    }
+}
+
+function refreshVariableSelects(state) {
+    const modules = state.editor.drawflow.drawflow;
+    for (const moduleName in modules) {
+        const data = modules[moduleName].data;
+        for (const id in data) {
+            const node = data[id];
+            if (node.name !== 'variable') continue;
+            const select = state.container.querySelector(`#node-${id} select[df-source]`);
+            if (!select) continue;
+            const current = node.data && node.data.source != null ? node.data.source : '';
+            fillSourceSelect(select, state.variables, current);
+        }
+    }
+}
+
+function attach(host) {
+    if (scriptEditors.has(host)) {
+        return scriptEditors.get(host);
+    }
+    host.classList.add('script-editor');
+    host.innerHTML = '';
+    const container = document.createElement('div');
+    container.className = 'script-editor-container';
+    container.style.width = '100%';
+    container.style.height = '100%';
+    host.appendChild(container);
+
+    const editor = new Drawflow(container);
+    editor.reroute = true;
+    editor.start();
+
+    const state = { editor, container, counter: 0, variables: [] };
+    scriptEditors.set(host, state);
+
+    // Hindernis-bewusste, horizontale Linienführung (statt der vertikalen aus
+    // dem Workflow-Editor). Für Verbindungssegmente mit Reroute-Punkten
+    // (type != 'openclose') greift die einfache Kurve.
+    editor.createCurvature = (sx, sy, ex, ey, curvature, type) =>
+        (type && type !== 'openclose')
+            ? horizontalCurvature(sx, sy, ex, ey)
+            : routeConnection(state, sx, sy, ex, ey);
+
+    container.addEventListener('dragover', e => {
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+    });
+    container.addEventListener('drop', e => {
+        e.preventDefault();
+        const typeId = e.dataTransfer ? e.dataTransfer.getData('application/x-logictype') : '';
+        if (!typeId || !LOGIC[typeId]) return;
+        const rect = container.getBoundingClientRect();
+        const zoom = editor.zoom;
+        const x = (e.clientX - rect.left - editor.canvas_x) / zoom;
+        const y = (e.clientY - rect.top - editor.canvas_y) / zoom;
+        addNodeAt(state, typeId, x, y);
+    });
+
+    // Knoten nach dem Verschieben am Raster einrasten.
+    editor.on('nodeMoved', id => {
+        const el = container.querySelector(`#node-${id}`);
+        if (!el) return;
+        const x = snap(parseFloat(el.style.left) || 0);
+        const y = snap(parseFloat(el.style.top) || 0);
+        el.style.left = `${x}px`;
+        el.style.top = `${y}px`;
+        const node = editor.drawflow.drawflow[editor.module].data[id];
+        if (node) {
+            node.pos_x = x;
+            node.pos_y = y;
+        }
+        editor.updateConnectionNodes(`node-${id}`);
+    });
+
+    return state;
+}
+
+function addNodeAt(state, typeId, x, y) {
+    const def = LOGIC[typeId];
+    if (!def) return;
+    state.editor.addNode(typeId, def.inputs, def.outputs, snap(x), snap(y), `logic-${typeId}`, defaultData(typeId), logicHtml(typeId));
+    if (typeId === 'variable') {
+        refreshVariableSelects(state);
+    }
+}
+
+function addNode(host, typeId) {
+    const state = attach(host);
+    const n = state.counter++;
+    addNodeAt(state, typeId, 60 + (n % 6) * 50, 50 + (n % 6) * 45);
+}
+
+window.scriptEditor = {
+    attach,
+    addNode,
+    setVariables(host, variables) {
+        const state = attach(host);
+        state.variables = Array.isArray(variables) ? variables : [];
+        refreshVariableSelects(state);
+        // Geänderte Dropdown-Inhalte können die Knotenbreite und damit die
+        // Portpositionen verschieben – Verbindungen neu zeichnen.
+        redrawConnectionsWhenReady(state);
+    },
+    clear(host) {
+        const state = scriptEditors.get(host);
+        if (state) state.editor.clear();
+    },
+    setGraph(host, json) {
+        const state = attach(host);
+        if (!json) {
+            state.editor.clear();
+            return;
+        }
+        try {
+            state.editor.import(JSON.parse(json));
+            refreshVariableSelects(state);
+            redrawConnectionsWhenReady(state);
+        } catch (e) {
+            console.error('scriptEditor.setGraph failed', e);
+            state.editor.clear();
+        }
+    },
+    exportGraph(host) {
+        const state = scriptEditors.get(host);
+        if (!state) return '';
+        return JSON.stringify(state.editor.export());
+    }
+};

src/main/frontend/themes/tasklist-editor/styles.css

@@ -116,6 +116,9 @@ body, .tasklist-app {
     display: flex;
     flex-direction: column;
     gap: 2px;
+    /* Erlaubt dem Textblock, im Flex-Layout zu schrumpfen, statt zu überlaufen. */
+    min-width: 0;
+    flex: 1;
 }
 
 .palette-item-label {
@@ -127,6 +130,67 @@ body, .tasklist-app {
 .palette-item-desc {
     color: var(--tle-muted);
     font-size: var(--lumo-font-size-xs);
+    /* Lange Wörter umbrechen, damit der Text nicht in den Papierkorb läuft. */
+    overflow-wrap: anywhere;
+}
+
+/* Trenner zwischen festen und benutzerdefinierten Elementen. */
+.palette-divider {
+    display: flex;
+    align-items: center;
+    gap: var(--lumo-space-s);
+    margin: var(--lumo-space-m) 0 var(--lumo-space-s);
+    color: var(--tle-muted);
+    font-size: var(--lumo-font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.palette-divider::before,
+.palette-divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--tle-border);
+}
+
+.palette-divider-label {
+    white-space: nowrap;
+    font-weight: 600;
+}
+
+/* Markierung der benutzerdefinierten Elemente. */
+.palette-item-custom {
+    position: relative;
+    /* Rechts einen vertikalen Streifen für den Papierkorb reservieren,
+       damit der Text nicht hineinläuft und unten keine Extra-Zeile entsteht. */
+    padding-right: calc(var(--lumo-space-m) + 26px);
+    border-style: dashed;
+    background:
+            linear-gradient(0deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.14)),
+            var(--tle-panel);
+}
+
+.palette-item-delete {
+    position: absolute;
+    right: var(--lumo-space-s);
+    bottom: var(--lumo-space-s);
+    width: 18px;
+    height: 18px;
+    padding: 2px;
+    color: var(--tle-muted);
+    cursor: pointer;
+    opacity: 0.5;
+    transition: color 120ms ease, opacity 120ms ease, transform 120ms ease;
+}
+
+.palette-item-custom:hover .palette-item-delete {
+    opacity: 1;
+}
+
+.palette-item-delete:hover {
+    color: var(--lumo-error-color, #e53935);
+    transform: scale(1.15);
 }
 
 .node-editor-host {
@@ -168,7 +232,11 @@ body, .tasklist-app {
     pointer-events: none;
 }
 
-.task-list-editor .drawflow .connection[class*="node_in_node_"] .main-path {
+/* Nur fertige Verbindungen sind anklickbar; die in Entstehung befindliche
+   Verbindung (ohne node_in_node--Klasse) bleibt unberührt, damit das
+   Verbinden per Drag nicht gestört wird.
+   Hinweis: Drawflow vergibt die Klasse mit Bindestrich (node_in_node-<id>). */
+.task-list-editor .drawflow .connection[class*="node_in_node-"] .main-path {
     pointer-events: stroke;
 }
 
@@ -181,6 +249,7 @@ body, .tasklist-app {
 }
 
 .task-node {
+    position: relative;
     background: var(--tle-panel);
     border: 1px solid var(--tle-border);
     border-radius: 10px;
@@ -192,6 +261,37 @@ body, .tasklist-app {
     flex-direction: column;
 }
 
+.task-node-gear {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 18px;
+    height: 18px;
+    color: var(--tle-muted, #6b7280);
+    opacity: 0.55;
+    cursor: pointer;
+    z-index: 6;
+    transition: opacity 0.15s ease, color 0.15s ease;
+}
+
+.task-node-gear:hover {
+    opacity: 1;
+    color: var(--tle-text, #1f2933);
+}
+
+.task-node-gear svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+    pointer-events: none;
+}
+
+/* Virtuelle Workflow-Markierungen (Start/Abschluss) haben keine Einstellungen. */
+.type-start .task-node-gear,
+.type-abschluss .task-node-gear {
+    display: none;
+}
+
 .task-node-header {
     height: 6px;
     width: 100%;
@@ -265,12 +365,19 @@ body, .tasklist-app {
 
 .task-list-editor .drawflow .connection .main-path {
     stroke: #94a3b8;
-    stroke-width: 2.5px;
+    stroke-width: 4px;
 }
 
 .task-list-editor .drawflow .connection .main-path:hover {
     stroke: var(--tle-accent);
-    stroke-width: 3px;
+    stroke-width: 5px;
+    cursor: pointer;
+}
+
+/* Ausgewählte Verbindung – hervorgehoben und als löschbar markiert. */
+.task-list-editor .drawflow .connection .main-path.selected {
+    stroke: var(--lumo-error-color, #e53935);
+    stroke-width: 5px;
 }
 
 .properties-content {
@@ -316,3 +423,178 @@ body, .tasklist-app {
     font-size: var(--lumo-font-size-s);
     margin: 0 0 var(--lumo-space-s);
 }
+
+.properties-fieldlist-label {
+    color: var(--lumo-secondary-text-color);
+    font-size: var(--lumo-font-size-s);
+    font-weight: 500;
+    margin-bottom: var(--lumo-space-xs);
+}
+
+/* --- Script-/Logik-Editor --- */
+.script-editor,
+.script-editor-container {
+    height: 100%;
+    width: 100%;
+}
+
+/* Raster-Hintergrund wie im Workflow-Editor. */
+.script-editor-host {
+    background:
+            radial-gradient(circle, var(--tle-canvas-grid) 1px, transparent 1px) 0 0 / 24px 24px,
+            var(--tle-canvas-bg);
+    overflow: hidden;
+    position: relative;
+}
+
+.script-editor .drawflow {
+    background: transparent;
+}
+
+.script-editor .drawflow .drawflow-node {
+    background: transparent;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    min-width: 150px;
+}
+
+/* Keine roten Ecken bei selektierten Knoten (Drawflow-Default überschreiben). */
+.script-editor .drawflow .drawflow-node.selected {
+    background: transparent;
+}
+
+.logic-node {
+    background: var(--tle-panel, #fff);
+    border: 1px solid var(--tle-border, #d8dee9);
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+    padding: 8px 10px;
+    min-width: 150px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.logic-node-title {
+    font-weight: 600;
+    font-size: var(--lumo-font-size-s);
+    color: var(--tle-text, #1f2933);
+    text-align: center;
+}
+
+.logic-node .logic-input,
+.logic-node .logic-select {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: var(--lumo-font-size-xs);
+    padding: 4px 6px;
+    border: 1px solid var(--tle-border, #d8dee9);
+    border-radius: 6px;
+}
+
+.logic-ports {
+    font-size: 10px;
+    color: var(--tle-muted, #6b7280);
+    text-align: center;
+}
+
+.logic-node.logic-compare  { border-top: 3px solid #2563eb; }
+.logic-node.logic-if       { border-top: 3px solid #d97706; }
+.logic-node.logic-bool     { border-top: 3px solid #7c3aed; }
+.logic-node.logic-constant { border-top: 3px solid #0891b2; }
+.logic-node.logic-variable { border-top: 3px solid #059669; }
+.logic-node.logic-result   { border-top: 3px solid #dc2626; }
+.logic-node.logic-output   { border-top: 3px solid #0f766e; }
+
+/* Verfügbare Variablen im Script-Dialog */
+.script-vars {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 10px;
+    background: var(--lumo-contrast-5pct);
+    border-radius: var(--lumo-border-radius-m);
+}
+
+.script-vars-label {
+    font-weight: 600;
+    font-size: var(--lumo-font-size-s);
+    color: var(--tle-text, #1f2933);
+}
+
+.script-vars-empty {
+    font-size: var(--lumo-font-size-s);
+    color: var(--tle-muted, #6b7280);
+    font-style: italic;
+}
+
+.script-var-chip {
+    font-size: var(--lumo-font-size-xs);
+    padding: 2px 10px;
+    border-radius: 999px;
+    background: #059669;
+    color: #fff;
+}
+
+/* Operatoren-Palette links im Script-Dialog */
+.script-palette {
+    flex-shrink: 0;
+    overflow-y: auto;
+    padding: 8px;
+    gap: 6px;
+    background: var(--lumo-contrast-5pct);
+    border-radius: var(--lumo-border-radius-m);
+}
+
+.script-palette .panel-heading {
+    margin: 0 0 4px;
+    font-size: var(--lumo-font-size-s);
+    color: var(--tle-muted, #6b7280);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.script-tile {
+    display: flex;
+    align-items: center;
+    gap: var(--lumo-space-s);
+    padding: 6px 8px;
+    border: 1px solid var(--tle-border);
+    border-radius: 9px;
+    background: var(--tle-panel);
+    cursor: grab;
+    user-select: none;
+    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+}
+
+.script-tile:hover {
+    border-color: var(--block-color, var(--tle-border));
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
+}
+
+.script-tile:active {
+    cursor: grabbing;
+}
+
+.script-tile-icon {
+    width: 26px;
+    height: 26px;
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.script-tile-label {
+    font-weight: 600;
+    color: var(--tle-text);
+    font-size: var(--lumo-font-size-s);
+}

src/main/java/de/assecutor/tasklisteditor/component/NodeEditor.java

@@ -53,6 +53,11 @@ public class NodeEditor extends Div {
         getElement().executeJs("window.taskListEditor.updateNodeLabel(this, $0, $1)", nodeId, label);
     }
 
+    /** Setzt die Anzahl der Ausgänge eines Knotens (z. B. für Script-Elemente). */
+    public void setNodeOutputs(int nodeId, int count) {
+        getElement().executeJs("window.taskListEditor.setNodeOutputs(this, $0, $1)", nodeId, count);
+    }
+
     public void clear() {
         getElement().executeJs("window.taskListEditor.clear(this)");
     }
@@ -98,6 +103,10 @@ public class NodeEditor extends Div {
         return addListener(NodeSelectedEvent.class, listener);
     }
 
+    public Registration addNodeActivatedListener(ComponentEventListener<NodeActivatedEvent> listener) {
+        return addListener(NodeActivatedEvent.class, listener);
+    }
+
     public Registration addNodeUnselectedListener(ComponentEventListener<NodeUnselectedEvent> listener) {
         return addListener(NodeUnselectedEvent.class, listener);
     }
@@ -116,6 +125,11 @@ public class NodeEditor extends Div {
         fireEvent(new NodeSelectedEvent(this, nodeId));
     }
 
+    @ClientCallable
+    private void onNodeActivated(int nodeId) {
+        fireEvent(new NodeActivatedEvent(this, nodeId));
+    }
+
     @ClientCallable
     private void onNodeUnselected() {
         fireEvent(new NodeUnselectedEvent(this));
@@ -151,6 +165,17 @@ public class NodeEditor extends Div {
         public int nodeId() { return nodeId; }
     }
 
+    public static class NodeActivatedEvent extends ComponentEvent<NodeEditor> {
+        private final int nodeId;
+
+        public NodeActivatedEvent(NodeEditor source, int nodeId) {
+            super(source, true);
+            this.nodeId = nodeId;
+        }
+
+        public int nodeId() { return nodeId; }
+    }
+
     public static class NodeUnselectedEvent extends ComponentEvent<NodeEditor> {
         public NodeUnselectedEvent(NodeEditor source) {
             super(source, true);

src/main/java/de/assecutor/tasklisteditor/component/ScriptEditor.java

@@ -0,0 +1,61 @@
+package de.assecutor.tasklisteditor.component;
+
+import com.vaadin.flow.component.AttachEvent;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.function.SerializableConsumer;
+import elemental.json.JsonArray;
+
+/**
+ * Eigenständiger Logik-Canvas (Drawflow) zum grafischen Zusammenstecken
+ * kleiner Code-Snippets innerhalb eines Script-Blocks.
+ *
+ * <p>Die Eigenschaften der Logik-Knoten (Operator, Wert, Ergebnis …) werden
+ * über Drawflow-{@code df-}-Bindings direkt im Knoten gepflegt und sind daher
+ * Teil des exportierten Graph-JSON.
+ */
+@JsModule("./node-editor/script-editor.js")
+@NpmPackage(value = "drawflow", version = "0.0.59")
+public class ScriptEditor extends Div {
+
+    public ScriptEditor() {
+        addClassName("script-editor-host");
+        getElement().getStyle().set("width", "100%").set("height", "100%");
+    }
+
+    @Override
+    protected void onAttach(AttachEvent attachEvent) {
+        super.onAttach(attachEvent);
+        getElement().executeJs("window.scriptEditor.attach(this)");
+    }
+
+    /** Fügt einen Logik-Knoten des angegebenen Typs hinzu. */
+    public void addNode(String typeId) {
+        getElement().executeJs("window.scriptEditor.addNode(this, $0)", typeId);
+    }
+
+    /** Lädt einen zuvor exportierten Logik-Graphen (JSON) in den Canvas. */
+    public void setGraph(String json) {
+        getElement().executeJs("window.scriptEditor.setGraph(this, $0)", json);
+    }
+
+    /**
+     * Stellt die verfügbaren Variablen (eingegebene Daten der anderen
+     * Elemente) für die Wert-Knoten bereit. Erwartet ein JSON-Array aus
+     * Objekten mit {@code key} und {@code label}.
+     */
+    public void setVariables(JsonArray variables) {
+        getElement().executeJs("window.scriptEditor.setVariables(this, $0)", variables);
+    }
+
+    public void clear() {
+        getElement().executeJs("window.scriptEditor.clear(this)");
+    }
+
+    /** Liest den aktuellen Logik-Graphen als JSON-String aus. */
+    public void exportGraph(SerializableConsumer<String> callback) {
+        getElement().executeJs("return window.scriptEditor.exportGraph(this)")
+                .then(String.class, callback::accept);
+    }
+}

src/main/java/de/assecutor/tasklisteditor/config/ElementCollectionProperties.java

@@ -0,0 +1,50 @@
+package de.assecutor.tasklisteditor.config;
+
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.stereotype.Component;
+
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * Konfiguration der MongoDB-Collections, in denen die Einstellungen der
+ * einzelnen Element-Typen abgelegt werden.
+ *
+ * <p>Die Collection-Namen werden aus {@code application.properties} gebunden,
+ * deren Werte wiederum aus den {@code MONGODB_ELEMENT_*}-Variablen der
+ * {@code .env} stammen:
+ * <pre>
+ *   tasklist.element-collections[text-liste-erfassen]=${MONGODB_ELEMENT_TEXT_LISTE_COLLECTION:element_text_liste_erfassen}
+ * </pre>
+ *
+ * <p>Für jeden (festen wie benutzerdefinierten) Typ muss eine Zuordnung
+ * existieren; benutzerdefinierte Typen werden zuvor auf ihren statischen
+ * Basistyp aufgelöst. Fehlt ein Eintrag, ist das ein Konfigurationsfehler.
+ */
+@Component
+@ConfigurationProperties(prefix = "tasklist")
+public class ElementCollectionProperties {
+
+    /** Typ-ID → Collection-Name. */
+    private final Map<String, String> elementCollections = new HashMap<>();
+
+    public Map<String, String> getElementCollections() {
+        return elementCollections;
+    }
+
+    /**
+     * Liefert den Collection-Namen für die angegebene Typ-ID.
+     *
+     * @throws IllegalStateException wenn für die Typ-ID keine Zuordnung
+     *                               konfiguriert ist
+     */
+    public String collectionFor(String typeId) {
+        String configured = elementCollections.get(typeId);
+        if (configured == null || configured.isBlank()) {
+            throw new IllegalStateException(
+                    "Keine Collection für Element-Typ '" + typeId + "' konfiguriert "
+                            + "(tasklist.element-collections).");
+        }
+        return configured;
+    }
+}

src/main/java/de/assecutor/tasklisteditor/document/CustomTypeDocument.java

@@ -0,0 +1,135 @@
+package de.assecutor.tasklisteditor.document;
+
+import de.assecutor.tasklisteditor.model.CustomPropertyState;
+import org.springframework.data.annotation.Id;
+import org.springframework.data.mongodb.core.index.Indexed;
+import org.springframework.data.mongodb.core.mapping.Document;
+
+import java.time.Instant;
+import java.util.List;
+
+/**
+ * In MongoDB gespeicherter benutzerdefinierter Typ. Enthält alle Daten, um den
+ * {@code BlockType} ohne Rückgriff auf den Basis-Typ wiederherstellen zu können
+ * (Aussehen, Ein-/Ausgänge und die Eigenschaften mit ihren erfassten Vorgaben).
+ */
+@Document(collection = "${MONGODB_CUSTOM_TYPE_COLLECTION:custom_types}")
+public class CustomTypeDocument {
+
+    @Id
+    private String id;
+
+    /** Eindeutige Typnummer (>= 1000); dient zugleich als Schlüssel. */
+    @Indexed(unique = true)
+    private int taskType;
+
+    private String typeId;
+    private String label;
+    private String baseTypeId;
+    private String description;
+    private String icon;
+    private String color;
+    private int inputs;
+    private int outputs;
+    private List<CustomPropertyState> properties;
+    private Instant createdAt;
+
+    public CustomTypeDocument() {
+    }
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public int getTaskType() {
+        return taskType;
+    }
+
+    public void setTaskType(int taskType) {
+        this.taskType = taskType;
+    }
+
+    public String getTypeId() {
+        return typeId;
+    }
+
+    public void setTypeId(String typeId) {
+        this.typeId = typeId;
+    }
+
+    public String getLabel() {
+        return label;
+    }
+
+    public void setLabel(String label) {
+        this.label = label;
+    }
+
+    public String getBaseTypeId() {
+        return baseTypeId;
+    }
+
+    public void setBaseTypeId(String baseTypeId) {
+        this.baseTypeId = baseTypeId;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
+
+    public String getIcon() {
+        return icon;
+    }
+
+    public void setIcon(String icon) {
+        this.icon = icon;
+    }
+
+    public String getColor() {
+        return color;
+    }
+
+    public void setColor(String color) {
+        this.color = color;
+    }
+
+    public int getInputs() {
+        return inputs;
+    }
+
+    public void setInputs(int inputs) {
+        this.inputs = inputs;
+    }
+
+    public int getOutputs() {
+        return outputs;
+    }
+
+    public void setOutputs(int outputs) {
+        this.outputs = outputs;
+    }
+
+    public List<CustomPropertyState> getProperties() {
+        return properties;
+    }
+
+    public void setProperties(List<CustomPropertyState> properties) {
+        this.properties = properties;
+    }
+
+    public Instant getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(Instant createdAt) {
+        this.createdAt = createdAt;
+    }
+}

src/main/java/de/assecutor/tasklisteditor/document/ElementSettingsDocument.java

@@ -0,0 +1,136 @@
+package de.assecutor.tasklisteditor.document;
+
+import org.springframework.data.annotation.Id;
+
+import java.time.Instant;
+import java.util.Map;
+
+/**
+ * Einstellungen eines einzelnen platzierten Elements (Block-Instanz) eines
+ * Canvas. Wird beim Speichern eines Canvas je Element-Typ in eine eigene
+ * MongoDB-Collection geschrieben (Collection-Name pro Typ konfigurierbar, siehe
+ * {@code tasklist.element-collections} bzw. die {@code MONGODB_ELEMENT_*}-
+ * Variablen in der {@code .env}).
+ *
+ * <p>Die Verknüpfung zum Canvas erfolgt über {@link #canvasId}; {@link #nodeId}
+ * identifiziert den Knoten innerhalb des Canvas.
+ */
+public class ElementSettingsDocument {
+
+    @Id
+    private String id;
+
+    /** ID des zugehörigen {@link CanvasDocument}. */
+    private String canvasId;
+
+    /** Anzeigename des Canvas zum Zeitpunkt des Speicherns. */
+    private String canvasName;
+
+    /** Knoten-ID innerhalb des Canvas (Drawflow). */
+    private int nodeId;
+
+    /** Typ-ID des Elements (z. B. {@code text-liste-erfassen} oder {@code custom-1000}). */
+    private String typeId;
+
+    /**
+     * Bei benutzerdefinierten Typen die Typ-ID des statischen Basistyps, in
+     * dessen Collection das Dokument abgelegt wird; bei festen Typen {@code null}.
+     */
+    private String baseTypeId;
+
+    /** Bezeichnung des Tasks (entspricht {@code topic}). */
+    private String topic;
+
+    /** Erfasste Property-Werte des Elements. */
+    private Map<String, Object> values;
+
+    private Instant createdAt;
+
+    public ElementSettingsDocument() {
+    }
+
+    public ElementSettingsDocument(String canvasId, String canvasName, int nodeId,
+                                   String typeId, String baseTypeId, String topic,
+                                   Map<String, Object> values, Instant createdAt) {
+        this.canvasId = canvasId;
+        this.canvasName = canvasName;
+        this.nodeId = nodeId;
+        this.typeId = typeId;
+        this.baseTypeId = baseTypeId;
+        this.topic = topic;
+        this.values = values;
+        this.createdAt = createdAt;
+    }
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getCanvasId() {
+        return canvasId;
+    }
+
+    public void setCanvasId(String canvasId) {
+        this.canvasId = canvasId;
+    }
+
+    public String getCanvasName() {
+        return canvasName;
+    }
+
+    public void setCanvasName(String canvasName) {
+        this.canvasName = canvasName;
+    }
+
+    public int getNodeId() {
+        return nodeId;
+    }
+
+    public void setNodeId(int nodeId) {
+        this.nodeId = nodeId;
+    }
+
+    public String getTypeId() {
+        return typeId;
+    }
+
+    public void setTypeId(String typeId) {
+        this.typeId = typeId;
+    }
+
+    public String getBaseTypeId() {
+        return baseTypeId;
+    }
+
+    public void setBaseTypeId(String baseTypeId) {
+        this.baseTypeId = baseTypeId;
+    }
+
+    public String getTopic() {
+        return topic;
+    }
+
+    public void setTopic(String topic) {
+        this.topic = topic;
+    }
+
+    public Map<String, Object> getValues() {
+        return values;
+    }
+
+    public void setValues(Map<String, Object> values) {
+        this.values = values;
+    }
+
+    public Instant getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(Instant createdAt) {
+        this.createdAt = createdAt;
+    }
+}

src/main/java/de/assecutor/tasklisteditor/model/BlockType.java

@@ -11,6 +11,22 @@ public record BlockType(
         int taskType,
         int inputs,
         int outputs,
-        List<PropertyDefinition> properties
+        List<PropertyDefinition> properties,
+        /** Verweis auf den statischen Basistyp (nur bei benutzerdefinierten Typen, sonst {@code null}). */
+        String baseTypeId
 ) {
+    /** Konstruktor für feste Standard-Typen ohne Basistyp-Verweis. */
+    public BlockType(String id, String label, String description, String icon, String color,
+                     int taskType, int inputs, int outputs, List<PropertyDefinition> properties) {
+        this(id, label, description, icon, color, taskType, inputs, outputs, properties, null);
+    }
+
+    /**
+     * Rein virtuelle Blöcke (z.&nbsp;B. Start/Abschluss) dienen nur der
+     * Workflow-Darstellung im Canvas und werden nicht in die Task-Liste
+     * exportiert. Sie sind an einer negativen Typnummer erkennbar.
+     */
+    public boolean isVirtual() {
+        return taskType < 0;
+    }
 }

src/main/java/de/assecutor/tasklisteditor/model/BlockTypeRegistry.java

@@ -1,5 +1,6 @@
 package de.assecutor.tasklisteditor.model;
 
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Component;
 
 import java.util.LinkedHashMap;
@@ -21,14 +22,46 @@ public class BlockTypeRegistry {
 
     private final Map<String, BlockType> types = new LinkedHashMap<>();
 
-    public BlockTypeRegistry() {
+    /** Typnummer der virtuellen Start-Markierung (negativ = nicht exportiert). */
+    public static final int START_TASK_TYPE = -1;
+
+    /** Typnummer der virtuellen Abschluss-Markierung (negativ = nicht exportiert). */
+    public static final int END_TASK_TYPE = -2;
+
+    public BlockTypeRegistry(@Value("${tasklist.hide-script-block:false}") boolean hideScriptBlock) {
+        // Rein virtuelle Workflow-Markierungen: Start (nur Ausgang) und Abschluss
+        // (nur Eingang). Sie dienen ausschließlich der Darstellung eines
+        // vollständigen Ablaufs im Canvas und werden NICHT exportiert
+        // (negative Typnummer, siehe BlockType#isVirtual).
+        register(new BlockType(
+                "start",
+                "Start",
+                "Virtuelle Markierung für den Beginn des Workflows (wird nicht exportiert).",
+                "vaadin:play",
+                "#16a34a",
+                START_TASK_TYPE,
+                0, 1,
+                List.of()
+        ));
+
+        register(new BlockType(
+                "abschluss",
+                "Abschluss",
+                "Virtuelle Markierung für das Ende des Workflows (wird nicht exportiert).",
+                "vaadin:flag-checkered",
+                "#b91c1c",
+                END_TASK_TYPE,
+                1, 0,
+                List.of()
+        ));
+
         register(new BlockType(
                 "ankunft-melden",
                 "Ankunft melden",
                 "Erfasst die Ankunft am Einsatzort (Bestätigungsschaltfläche).",
                 "vaadin:map-marker",
                 "#2563eb",
-                3,
+                1,
                 1, 1,
                 List.of(
                         PropertyDefinition.bool("track", "GPS-Position erfassen", true),
@@ -59,7 +92,7 @@ public class BlockTypeRegistry {
                 "Nimmt eine Anzahl von Fotos auf.",
                 "vaadin:camera",
                 "#059669",
-                4,
+                3,
                 1, 1,
                 List.of(
                         PropertyDefinition.number("min", "Mindestanzahl Fotos", 1),
@@ -69,32 +102,33 @@ public class BlockTypeRegistry {
                 )
         ));
 
+        // Fasst die früheren App-Typen Quittungsgeber, Bemerkung und
+        // Kommissionsnummer zu einem einzigen Texterfassungs-Task zusammen.
         register(new BlockType(
                 "quittungsgeber-erfassen",
                 "Quittungsgeber erfassen",
-                "Erfasst den Namen des Quittungsgebers und dessen Anrede aus einer Auswahlliste.",
+                "Erfasst den Quittungsgeber per Eingabefeld.",
-                "vaadin:user-check",
+                "vaadin:input",
                 "#dc2626",
                 7,
                 1, 1,
                 List.of(
-                        PropertyDefinition.textArea("entries", "Auswahloptionen (eine pro Zeile)"),
+                        PropertyDefinition.number("max_len", "Maximale Zeichenanzahl (0 = unbegrenzt)", 0),
-                        PropertyDefinition.number("max_len", "Maximale Zeichenanzahl Name", 40),
                         PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
                         PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
                 )
         ));
 
         register(new BlockType(
-                "stationshinweis",
+                "bemerkung-erfassen",
-                "Stationshinweis",
+                "Bemerkung erfassen",
-                "Lässt einen mehrzeiligen Hinweis zur Station erfassen.",
+                "Erfasst eine Bemerkung per Eingabefeld.",
-                "vaadin:clipboard-text",
+                "vaadin:input",
-                "#0891b2",
+                "#dc2626",
                 8,
                 1, 1,
                 List.of(
-                        PropertyDefinition.textArea("txt", "Vorgabetext / Hinweis"),
+                        PropertyDefinition.number("max_len", "Maximale Zeichenanzahl (0 = unbegrenzt)", 0),
                         PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
                         PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
                 )
@@ -103,33 +137,124 @@ public class BlockTypeRegistry {
         register(new BlockType(
                 "kommissionsnummer-erfassen",
                 "Kommissionsnummer erfassen",
-                "Erfasst eine Kommissionsnummer per Texteingabe.",
+                "Erfasst eine Kommissionsnummer per Eingabefeld.",
-                "vaadin:hash",
+                "vaadin:abacus",
-                "#d97706",
+                "#0891b2",
                 9,
                 1, 1,
                 List.of(
-                        PropertyDefinition.number("max_len", "Maximale Zeichenanzahl", 0),
+                        PropertyDefinition.number("max_len", "Maximale Zeichenanzahl (0 = unbegrenzt)", 0),
                         PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
                         PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
                 )
         ));
 
         register(new BlockType(
-                "abhol-lieferstatus",
+                "checkbox",
-                "Abhol-/Lieferstatus",
+                "Checkbox",
-                "Lässt einen Status aus einer Auswahlliste wählen, optional mit Bemerkung.",
+                "Einfache Bestätigung per Häkchen ohne weitere Eingabe.",
-                "vaadin:truck",
+                "vaadin:check-square-o",
-                "#4f46e5",
+                "#16a34a",
-                11,
+                6,
                 1, 1,
                 List.of(
-                        PropertyDefinition.textArea("entries", "Statusoptionen (eine pro Zeile)"),
-                        PropertyDefinition.bool("query_remark", "Bemerkung abfragen", false),
                         PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
                         PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
                 )
         ));
+
+        register(new BlockType(
+                "barcode-scannen",
+                "Barcode scannen",
+                "Erfasst eine Liste gescannter Barcodes. (In der Flutter-App deaktiviert.)",
+                "vaadin:barcode",
+                "#0d9488",
+                5,
+                1, 1,
+                List.of(
+                        PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
+                        PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
+                )
+        ));
+
+        // Vereint den früheren "Status" und "Abhol-/Lieferstatus" der App
+        // zu einer Status-Auswahlliste auf Basis der choices-Struktur.
+        register(new BlockType(
+                "statusauswahl",
+                "Statusauswahl",
+                "Lässt einen Status aus einer Auswahlliste wählen.",
+                "vaadin:list-select",
+                "#ea580c",
+                11,
+                1, 1,
+                List.of(
+                        PropertyDefinition.textArea("choices", "Statusoptionen (eine pro Zeile)"),
+                        PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
+                        PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
+                )
+        ));
+
+        // Listen-Tasks: erfassen mehrerer gleichartiger Werte. Die Anzahl wird
+        // analog zu "Fotos aufnehmen" über min/max gesteuert. Diese Typen haben
+        // (noch) keinen Handler in der stadtbote-App und liegen daher oberhalb
+        // des dort genutzten Bereichs (1–11).
+        register(new BlockType(
+                "text-liste-erfassen",
+                "Liste von Texten erfassen",
+                "Erfasst mehrere Texteinträge über vordefinierte Eingabefelder.",
+                "vaadin:lines-list",
+                "#4338ca",
+                12,
+                1, 1,
+                List.of(
+                        PropertyDefinition.fieldList("fields", "Textfelder (Titel + Platzhalter)"),
+                        PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
+                        PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
+                )
+        ));
+
+        register(new BlockType(
+                "zahl-liste-erfassen",
+                "Liste von Zahlen erfassen",
+                "Erfasst mehrere numerische Werte über vordefinierte Eingabefelder.",
+                "vaadin:list-ol",
+                "#0369a1",
+                13,
+                1, 1,
+                List.of(
+                        PropertyDefinition.fieldList("fields", "Zahlenfelder (Titel + Platzhalter)"),
+                        PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
+                        PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
+                )
+        ));
+
+        register(new BlockType(
+                "checkbox-liste-erfassen",
+                "Liste von Checkboxen erfassen",
+                "Lässt mehrere vordefinierte Optionen per Checkbox ankreuzen.",
+                "vaadin:tasks",
+                "#15803d",
+                14,
+                1, 1,
+                List.of(
+                        PropertyDefinition.nameList("entries", "Name der Checkboxen"),
+                        PropertyDefinition.bool("opt", "Optionale Aufgabe", false),
+                        PropertyDefinition.bool("reenter", "Erneut bearbeitbar", false)
+                )
+        ));
+
+        if (!hideScriptBlock) {
+            register(new BlockType(
+                    "script",
+                    "Script",
+                    "Kleines Logik-Snippet grafisch zusammenstellen (if/else, Vergleiche …).",
+                    "vaadin:code",
+                    "#475569",
+                    0,
+                    1, 0,
+                    List.of()
+            ));
+        }
     }
 
     private void register(BlockType type) {
@@ -143,4 +268,79 @@ public class BlockTypeRegistry {
     public Optional<BlockType> find(String id) {
         return Optional.ofNullable(types.get(id));
     }
+
+    /** Die festen Standard-Typen (Typnummer 1–8), auf denen eigene Typen aufbauen. */
+    public List<BlockType> baseTypes() {
+        return types.values().stream()
+                .filter(t -> t.taskType() >= 1 && t.taskType() < CUSTOM_TYPE_START)
+                .toList();
+    }
+
+    /** Startwert für benutzerdefinierte Typnummern. */
+    public static final int CUSTOM_TYPE_START = 1000;
+
+    /** Nächste freie Typnummer ab {@value #CUSTOM_TYPE_START}. */
+    public synchronized int nextCustomTaskType() {
+        int next = CUSTOM_TYPE_START;
+        for (BlockType type : types.values()) {
+            if (type.taskType() >= next) {
+                next = type.taskType() + 1;
+            }
+        }
+        return next;
+    }
+
+    /**
+     * Legt einen benutzerdefinierten Typ an. Er übernimmt Aussehen, Ein-/Ausgänge
+     * und Eigenschaftsstruktur des Basis-Typs, erhält aber eine eigene Typnummer
+     * ({@code >= 1000}) und eine eigene Bezeichnung.
+     *
+     * @param taskType   die (freie) Typnummer
+     * @param base       der zugrunde liegende Standard-Typ
+     * @param label      Bezeichnung des neuen Typs
+     * @param properties Eigenschaften (i. d. R. die des Basis-Typs mit erfassten Vorgaben)
+     */
+    public synchronized BlockType registerCustom(int taskType, BlockType base, String label,
+                                                 List<PropertyDefinition> properties) {
+        String id = "custom-" + taskType;
+        BlockType custom = new BlockType(
+                id,
+                label,
+                base.description(),
+                base.icon(),
+                base.color(),
+                taskType,
+                base.inputs(),
+                base.outputs(),
+                List.copyOf(properties),
+                base.id()
+        );
+        register(custom);
+        return custom;
+    }
+
+    /**
+     * Registriert einen bereits vollständig aufgebauten benutzerdefinierten Typ
+     * (z. B. aus MongoDB geladen). Bereits vorhandene Typen mit gleicher ID
+     * werden überschrieben.
+     */
+    public synchronized BlockType registerCustom(BlockType custom) {
+        register(custom);
+        return custom;
+    }
+
+    /**
+     * Entfernt einen benutzerdefinierten Typ (Typnummer {@code >= 1000}).
+     * Feste Standard-Typen werden nicht entfernt.
+     *
+     * @return {@code true}, wenn ein benutzerdefinierter Typ entfernt wurde
+     */
+    public synchronized boolean removeCustom(String id) {
+        BlockType existing = types.get(id);
+        if (existing == null || existing.taskType() < CUSTOM_TYPE_START) {
+            return false;
+        }
+        types.remove(id);
+        return true;
+    }
 }

src/main/java/de/assecutor/tasklisteditor/model/ChoiceDto.java

@@ -0,0 +1,82 @@
+package de.assecutor.tasklisteditor.model;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.fasterxml.jackson.annotation.JsonPropertyOrder;
+
+/**
+ * Eine Auswahloption eines Status-Tasks (Typ 6).
+ * Entspricht {@code Choice} der stadtbote-App.
+ *
+ * <p>Die Feldnamen sind klein geschrieben; die App deserialisiert per
+ * Newtonsoft case-insensitiv (txt, ret, term, quest, action, price).
+ * {@code null}-Felder (quest, price) werden ausgelassen.
+ */
+@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonPropertyOrder({"txt", "ret", "term", "quest", "action", "price"})
+public class ChoiceDto {
+
+    private String txt;
+    private int ret;
+    private boolean term;
+    private String quest;
+    private String action;
+    private String price;
+
+    public ChoiceDto() {
+    }
+
+    public ChoiceDto(String txt, int ret) {
+        this.txt = txt;
+        this.ret = ret;
+        this.term = false;
+        this.action = "cont";
+    }
+
+    public String getTxt() {
+        return txt;
+    }
+
+    public void setTxt(String txt) {
+        this.txt = txt;
+    }
+
+    public int getRet() {
+        return ret;
+    }
+
+    public void setRet(int ret) {
+        this.ret = ret;
+    }
+
+    public boolean isTerm() {
+        return term;
+    }
+
+    public void setTerm(boolean term) {
+        this.term = term;
+    }
+
+    public String getQuest() {
+        return quest;
+    }
+
+    public void setQuest(String quest) {
+        this.quest = quest;
+    }
+
+    public String getAction() {
+        return action;
+    }
+
+    public void setAction(String action) {
+        this.action = action;
+    }
+
+    public String getPrice() {
+        return price;
+    }
+
+    public void setPrice(String price) {
+        this.price = price;
+    }
+}

src/main/java/de/assecutor/tasklisteditor/model/CustomPropertyState.java

@@ -0,0 +1,64 @@
+package de.assecutor.tasklisteditor.model;
+
+/**
+ * In MongoDB ablegbarer Zustand einer {@link PropertyDefinition} eines
+ * benutzerdefinierten Typs (inkl. der erfassten Vorgabe). Beim Laden wird
+ * daraus wieder eine {@link PropertyDefinition} aufgebaut.
+ */
+public class CustomPropertyState {
+
+    private String id;
+    private String label;
+    private PropertyType type;
+    private Object defaultValue;
+
+    public CustomPropertyState() {
+    }
+
+    public CustomPropertyState(String id, String label, PropertyType type, Object defaultValue) {
+        this.id = id;
+        this.label = label;
+        this.type = type;
+        this.defaultValue = defaultValue;
+    }
+
+    public static CustomPropertyState of(PropertyDefinition def) {
+        return new CustomPropertyState(def.id(), def.label(), def.type(), def.defaultValue());
+    }
+
+    public PropertyDefinition toDefinition() {
+        return new PropertyDefinition(id, label, type, defaultValue);
+    }
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getLabel() {
+        return label;
+    }
+
+    public void setLabel(String label) {
+        this.label = label;
+    }
+
+    public PropertyType getType() {
+        return type;
+    }
+
+    public void setType(PropertyType type) {
+        this.type = type;
+    }
+
+    public Object getDefaultValue() {
+        return defaultValue;
+    }
+
+    public void setDefaultValue(Object defaultValue) {
+        this.defaultValue = defaultValue;
+    }
+}

src/main/java/de/assecutor/tasklisteditor/model/FieldDto.java

@@ -0,0 +1,43 @@
+package de.assecutor.tasklisteditor.model;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.fasterxml.jackson.annotation.JsonPropertyOrder;
+
+/**
+ * Ein einzelnes Eingabefeld eines Listen-Text-Tasks (Typ 12).
+ * Definiert Titel und Platzhalter eines vom Bearbeiter auszufüllenden
+ * Textfeldes.
+ *
+ * <p>{@code null}-Felder werden ausgelassen.
+ */
+@JsonInclude(JsonInclude.Include.NON_NULL)
+@JsonPropertyOrder({"title", "placeholder"})
+public class FieldDto {
+
+    private String title;
+    private String placeholder;
+
+    public FieldDto() {
+    }
+
+    public FieldDto(String title, String placeholder) {
+        this.title = title;
+        this.placeholder = placeholder;
+    }
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getPlaceholder() {
+        return placeholder;
+    }
+
+    public void setPlaceholder(String placeholder) {
+        this.placeholder = placeholder;
+    }
+}

src/main/java/de/assecutor/tasklisteditor/model/PropertyDefinition.java

@@ -1,5 +1,7 @@
 package de.assecutor.tasklisteditor.model;
 
+import java.util.List;
+
 public record PropertyDefinition(String id, String label, PropertyType type, Object defaultValue) {
     public static PropertyDefinition text(String id, String label) {
         return new PropertyDefinition(id, label, PropertyType.TEXT, "");
@@ -16,4 +18,12 @@ public record PropertyDefinition(String id, String label, PropertyType type, Obj
     public static PropertyDefinition bool(String id, String label, boolean defaultValue) {
         return new PropertyDefinition(id, label, PropertyType.BOOLEAN, defaultValue);
     }
+
+    public static PropertyDefinition fieldList(String id, String label) {
+        return new PropertyDefinition(id, label, PropertyType.FIELD_LIST, List.of());
+    }
+
+    public static PropertyDefinition nameList(String id, String label) {
+        return new PropertyDefinition(id, label, PropertyType.NAME_LIST, List.of());
+    }
 }

src/main/java/de/assecutor/tasklisteditor/model/PropertyType.java

@@ -4,5 +4,9 @@ public enum PropertyType {
     TEXT,
     TEXTAREA,
     NUMBER,
-    BOOLEAN
+    BOOLEAN,
+    /** Wiederholbare Liste aus Eingabefeldern mit Titel und Platzhalter. */
+    FIELD_LIST,
+    /** Wiederholbare Liste aus reinen Namens-Einträgen (ein Textfeld je Zeile). */
+    NAME_LIST
 }

src/main/java/de/assecutor/tasklisteditor/model/TaskDto.java

@@ -3,6 +3,7 @@ package de.assecutor.tasklisteditor.model;
 import com.fasterxml.jackson.annotation.JsonInclude;
 import com.fasterxml.jackson.annotation.JsonProperty;
 import com.fasterxml.jackson.annotation.JsonPropertyOrder;
+import com.fasterxml.jackson.databind.JsonNode;
 
 import java.util.List;
 
@@ -16,7 +17,7 @@ import java.util.List;
  */
 @JsonInclude(JsonInclude.Include.NON_NULL)
 @JsonPropertyOrder({"s_id", "type", "topic", "opt", "reenter", "min", "max",
-        "max_len", "rt", "track", "txt", "task_arrival", "task_fin_work", "entries"})
+        "max_len", "rt", "track", "txt", "task_arrival", "task_fin_work", "entries", "choices", "fields", "script"})
 public class TaskDto {
 
     @JsonProperty("s_id")
@@ -46,6 +47,15 @@ public class TaskDto {
 
     private List<TaskEntryDto> entries;
 
+    /** Auswahloptionen eines Status-Tasks (Typ 6). */
+    private List<ChoiceDto> choices;
+
+    /** Eingabefelder eines Listen-Text-Tasks (Typ 12). */
+    private List<FieldDto> fields;
+
+    /** Logik-Graph eines Script-Blocks (Drawflow-Definition als JSON). */
+    private JsonNode script;
+
     public int getSId() {
         return sId;
     }
@@ -157,4 +167,28 @@ public class TaskDto {
     public void setEntries(List<TaskEntryDto> entries) {
         this.entries = entries;
     }
+
+    public List<ChoiceDto> getChoices() {
+        return choices;
+    }
+
+    public void setChoices(List<ChoiceDto> choices) {
+        this.choices = choices;
+    }
+
+    public List<FieldDto> getFields() {
+        return fields;
+    }
+
+    public void setFields(List<FieldDto> fields) {
+        this.fields = fields;
+    }
+
+    public JsonNode getScript() {
+        return script;
+    }
+
+    public void setScript(JsonNode script) {
+        this.script = script;
+    }
 }

src/main/java/de/assecutor/tasklisteditor/repository/CustomTypeRepository.java

@@ -0,0 +1,16 @@
+package de.assecutor.tasklisteditor.repository;
+
+import de.assecutor.tasklisteditor.document.CustomTypeDocument;
+import org.springframework.data.mongodb.repository.MongoRepository;
+
+import java.util.List;
+
+/**
+ * Spring-Data-Repository für die in MongoDB abgelegten benutzerdefinierten Typen.
+ */
+public interface CustomTypeRepository extends MongoRepository<CustomTypeDocument, String> {
+
+    List<CustomTypeDocument> findAllByOrderByTaskTypeAsc();
+
+    long deleteByTaskType(int taskType);
+}

src/main/java/de/assecutor/tasklisteditor/service/CustomTypeService.java

@@ -0,0 +1,73 @@
+package de.assecutor.tasklisteditor.service;
+
+import de.assecutor.tasklisteditor.document.CustomTypeDocument;
+import de.assecutor.tasklisteditor.model.BlockType;
+import de.assecutor.tasklisteditor.model.CustomPropertyState;
+import de.assecutor.tasklisteditor.repository.CustomTypeRepository;
+import org.springframework.stereotype.Service;
+
+import java.time.Instant;
+import java.util.List;
+
+/**
+ * Speichert benutzerdefinierte Typen in MongoDB und stellt sie als
+ * {@link BlockType} wieder her.
+ */
+@Service
+public class CustomTypeService {
+
+    private final CustomTypeRepository repository;
+
+    public CustomTypeService(CustomTypeRepository repository) {
+        this.repository = repository;
+    }
+
+    /** Persistiert einen benutzerdefinierten Typ mit allen Daten. */
+    public String save(BlockType custom, String baseTypeId) {
+        CustomTypeDocument document = new CustomTypeDocument();
+        document.setTaskType(custom.taskType());
+        document.setTypeId(custom.id());
+        document.setLabel(custom.label());
+        document.setBaseTypeId(baseTypeId);
+        document.setDescription(custom.description());
+        document.setIcon(custom.icon());
+        document.setColor(custom.color());
+        document.setInputs(custom.inputs());
+        document.setOutputs(custom.outputs());
+        document.setProperties(custom.properties().stream()
+                .map(CustomPropertyState::of)
+                .toList());
+        document.setCreatedAt(Instant.now());
+        return repository.save(document).getId();
+    }
+
+    /** Löscht den gespeicherten benutzerdefinierten Typ mit der angegebenen Typnummer. */
+    public void deleteByTaskType(int taskType) {
+        repository.deleteByTaskType(taskType);
+    }
+
+    /** Lädt alle gespeicherten Typen und baut sie als {@link BlockType} auf. */
+    public List<BlockType> loadAll() {
+        return repository.findAllByOrderByTaskTypeAsc().stream()
+                .map(CustomTypeService::toBlockType)
+                .toList();
+    }
+
+    private static BlockType toBlockType(CustomTypeDocument doc) {
+        return new BlockType(
+                doc.getTypeId(),
+                doc.getLabel(),
+                doc.getDescription(),
+                doc.getIcon(),
+                doc.getColor(),
+                doc.getTaskType(),
+                doc.getInputs(),
+                doc.getOutputs(),
+                doc.getProperties() == null ? List.of()
+                        : doc.getProperties().stream()
+                                .map(prop -> prop.toDefinition())
+                                .toList(),
+                doc.getBaseTypeId()
+        );
+    }
+}

src/main/java/de/assecutor/tasklisteditor/service/ElementSettingsService.java

@@ -0,0 +1,70 @@
+package de.assecutor.tasklisteditor.service;
+
+import de.assecutor.tasklisteditor.config.ElementCollectionProperties;
+import de.assecutor.tasklisteditor.document.ElementSettingsDocument;
+import de.assecutor.tasklisteditor.model.BlockInstance;
+import org.springframework.data.mongodb.core.MongoTemplate;
+import org.springframework.stereotype.Service;
+
+import java.time.Instant;
+import java.util.Collection;
+import java.util.LinkedHashMap;
+
+/**
+ * Speichert die Einstellungen der einzelnen platzierten Elemente eines Canvas
+ * jeweils in einer eigenen, pro Element-Typ konfigurierten MongoDB-Collection.
+ *
+ * <p>Wird ergänzend zum {@link CanvasService} aufgerufen: Der Canvas-Stand
+ * (Layout + Block-Werte) bleibt unverändert im Canvas-Dokument; zusätzlich wird
+ * je Element ein {@link ElementSettingsDocument} in die Typ-Collection
+ * geschrieben und über die Canvas-ID verknüpft.
+ */
+@Service
+public class ElementSettingsService {
+
+    private final MongoTemplate mongoTemplate;
+    private final ElementCollectionProperties properties;
+
+    public ElementSettingsService(MongoTemplate mongoTemplate,
+                                  ElementCollectionProperties properties) {
+        this.mongoTemplate = mongoTemplate;
+        this.properties = properties;
+    }
+
+    /**
+     * Schreibt für jedes Element des Canvas ein Einstellungs-Dokument in die
+     * Collection seines Typs.
+     *
+     * @param canvasId   ID des gespeicherten Canvas (Verknüpfung)
+     * @param canvasName Anzeigename des Canvas
+     * @param instances  platzierte Block-Instanzen
+     */
+    public void saveForCanvas(String canvasId, String canvasName,
+                              Collection<BlockInstance> instances) {
+        Instant now = Instant.now();
+        for (BlockInstance instance : instances) {
+            // Virtuelle Blöcke (Start/Abschluss) haben keine fachlichen
+            // Einstellungen und keine Collection – sie werden nicht persistiert.
+            if (instance.type().isVirtual()) {
+                continue;
+            }
+            String typeId = instance.type().id();
+            String baseTypeId = instance.type().baseTypeId();
+            // Benutzerdefinierte Typen landen in der Collection ihres statischen
+            // Basistyps; feste Typen (baseTypeId == null) in ihrer eigenen.
+            String collectionTypeId = (baseTypeId == null || baseTypeId.isBlank())
+                    ? typeId
+                    : baseTypeId;
+            ElementSettingsDocument document = new ElementSettingsDocument(
+                    canvasId,
+                    canvasName,
+                    instance.id(),
+                    typeId,
+                    baseTypeId,
+                    instance.topic(),
+                    new LinkedHashMap<>(instance.values()),
+                    now);
+            mongoTemplate.save(document, properties.collectionFor(collectionTypeId));
+        }
+    }
+}

src/main/java/de/assecutor/tasklisteditor/service/TaskListExporter.java

@@ -3,6 +3,9 @@ package de.assecutor.tasklisteditor.service;
 import com.fasterxml.jackson.databind.JsonNode;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import de.assecutor.tasklisteditor.model.BlockInstance;
+import de.assecutor.tasklisteditor.model.BlockTypeRegistry;
+import de.assecutor.tasklisteditor.model.ChoiceDto;
+import de.assecutor.tasklisteditor.model.FieldDto;
 import de.assecutor.tasklisteditor.model.TaskDto;
 import de.assecutor.tasklisteditor.model.TaskEntryDto;
 import org.springframework.stereotype.Component;
@@ -46,6 +49,10 @@ public class TaskListExporter {
         } catch (Exception ex) {
             throw new IllegalStateException("Editor-Graph konnte nicht gelesen werden: " + ex.getMessage(), ex);
         }
+        // Ein vollständiger Workflow muss mit einem Start- und einem Abschluss-
+        // Element gerahmt und beide müssen verdrahtet sein.
+        validateWorkflow(data, instances);
+
         if (!data.isObject() || data.isEmpty()) {
             return tasks;
         }
@@ -58,6 +65,11 @@ public class TaskListExporter {
             if (instance == null) {
                 continue;
             }
+            // Rein virtuelle Blöcke (Start/Abschluss) sind nur Workflow-Markierungen
+            // und gehören nicht in die exportierte Task-Liste.
+            if (instance.type().isVirtual()) {
+                continue;
+            }
             TaskDto task = toTask(instance);
             task.setSId(sId++);
             tasks.add(task);
@@ -65,6 +77,64 @@ public class TaskListExporter {
         return tasks;
     }
 
+    /**
+     * Stellt sicher, dass der Ablauf mit genau den virtuellen Markierungen
+     * gerahmt ist: Es muss mindestens ein Start- und ein Abschluss-Element
+     * geben und beide müssen mit dem Ablauf verbunden (verdrahtet) sein.
+     *
+     * @throws IllegalStateException mit einer für den Benutzer verständlichen
+     *                               Meldung, falls die Bedingung verletzt ist
+     */
+    private void validateWorkflow(JsonNode data, Map<Integer, BlockInstance> instances) {
+        List<Integer> startNodes = new ArrayList<>();
+        List<Integer> endNodes = new ArrayList<>();
+        for (Map.Entry<Integer, BlockInstance> entry : instances.entrySet()) {
+            int taskType = entry.getValue().type().taskType();
+            if (taskType == BlockTypeRegistry.START_TASK_TYPE) {
+                startNodes.add(entry.getKey());
+            } else if (taskType == BlockTypeRegistry.END_TASK_TYPE) {
+                endNodes.add(entry.getKey());
+            }
+        }
+
+        if (startNodes.isEmpty()) {
+            throw new IllegalStateException("Es muss ein Start-Element vorhanden sein.");
+        }
+        if (endNodes.isEmpty()) {
+            throw new IllegalStateException("Es muss ein Abschluss-Element vorhanden sein.");
+        }
+        for (int id : startNodes) {
+            if (!hasConnectedOutput(data, id)) {
+                throw new IllegalStateException("Das Start-Element muss mit dem Ablauf verbunden sein.");
+            }
+        }
+        for (int id : endNodes) {
+            if (!hasConnectedInput(data, id)) {
+                throw new IllegalStateException("Das Abschluss-Element muss mit dem Ablauf verbunden sein.");
+            }
+        }
+    }
+
+    private boolean hasConnectedOutput(JsonNode data, int nodeId) {
+        JsonNode outputs = data.path(String.valueOf(nodeId)).path("outputs");
+        for (JsonNode output : outputs) {
+            if (output.path("connections").size() > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private boolean hasConnectedInput(JsonNode data, int nodeId) {
+        JsonNode inputs = data.path(String.valueOf(nodeId)).path("inputs");
+        for (JsonNode input : inputs) {
+            if (input.path("connections").size() > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     private List<Integer> determineOrder(JsonNode data) {
         // Knoten einsammeln + eingehende Verbindungen zählen.
         List<Integer> nodeIds = new ArrayList<>();
@@ -143,7 +213,29 @@ public class TaskListExporter {
 
         if (v.containsKey("entries")) {
             boolean queryRemark = v.containsKey("query_remark") && asBool(v.get("query_remark"));
-            task.setEntries(parseEntries(asText(v.get("entries")), queryRemark));
+            Object raw = v.get("entries");
+            task.setEntries(raw instanceof List<?> list
+                    ? parseEntries(list, queryRemark)
+                    : parseEntries(asText(raw), queryRemark));
+        }
+
+        if (v.containsKey("choices")) {
+            task.setChoices(parseChoices(asText(v.get("choices"))));
+        }
+
+        if (v.containsKey("fields")) {
+            task.setFields(parseFields(v.get("fields")));
+        }
+
+        if (v.containsKey("script")) {
+            String script = asText(v.get("script"));
+            if (script != null) {
+                try {
+                    task.setScript(objectMapper.readTree(script));
+                } catch (Exception ignored) {
+                    // Ungültiges Skript-JSON wird ausgelassen.
+                }
+            }
         }
         return task;
     }
@@ -163,6 +255,53 @@ public class TaskListExporter {
         return entries.isEmpty() ? null : entries;
     }
 
+    /** Variante für den Zeilen-Editor: Liste aus {@code {title}}-Einträgen. */
+    private List<TaskEntryDto> parseEntries(List<?> raw, boolean queryRemark) {
+        List<TaskEntryDto> entries = new ArrayList<>();
+        int code = 1;
+        for (Object o : raw) {
+            if (o instanceof Map<?, ?> m) {
+                String text = m.get("title") == null ? "" : m.get("title").toString().trim();
+                if (!text.isEmpty()) {
+                    entries.add(new TaskEntryDto(code++, text, queryRemark));
+                }
+            }
+        }
+        return entries.isEmpty() ? null : entries;
+    }
+
+    private List<ChoiceDto> parseChoices(String raw) {
+        if (raw == null || raw.isBlank()) {
+            return null;
+        }
+        List<ChoiceDto> choices = new ArrayList<>();
+        int ret = 1;
+        for (String line : raw.split("\\r?\\n")) {
+            String text = line.trim();
+            if (!text.isEmpty()) {
+                choices.add(new ChoiceDto(text, ret++));
+            }
+        }
+        return choices.isEmpty() ? null : choices;
+    }
+
+    private List<FieldDto> parseFields(Object raw) {
+        if (!(raw instanceof List<?> list) || list.isEmpty()) {
+            return null;
+        }
+        List<FieldDto> fields = new ArrayList<>();
+        for (Object o : list) {
+            if (o instanceof Map<?, ?> m) {
+                String title = m.get("title") == null ? "" : m.get("title").toString().trim();
+                String placeholder = m.get("placeholder") == null ? "" : m.get("placeholder").toString().trim();
+                if (!title.isEmpty() || !placeholder.isEmpty()) {
+                    fields.add(new FieldDto(title, placeholder));
+                }
+            }
+        }
+        return fields.isEmpty() ? null : fields;
+    }
+
     private Boolean asBool(Object o) {
         return o instanceof Boolean b ? b : Boolean.parseBoolean(String.valueOf(o));
     }

src/main/java/de/assecutor/tasklisteditor/service/TaskListImporter.java

@@ -2,6 +2,7 @@ package de.assecutor.tasklisteditor.service;
 
 import de.assecutor.tasklisteditor.model.BlockType;
 import de.assecutor.tasklisteditor.model.BlockTypeRegistry;
+import de.assecutor.tasklisteditor.model.FieldDto;
 import de.assecutor.tasklisteditor.model.PropertyDefinition;
 import de.assecutor.tasklisteditor.model.TaskDto;
 import de.assecutor.tasklisteditor.model.TaskEntryDto;
@@ -62,31 +63,72 @@ public class TaskListImporter {
     private Map<String, Object> valuesFor(BlockType type, TaskDto task) {
         Map<String, Object> values = new LinkedHashMap<>();
         for (PropertyDefinition def : type.properties()) {
-            Object value = switch (def.id()) {
+            // Listen-Eigenschaften (Typ 12–14) werden anhand ihres
-                case "opt" -> orDefault(task.getOpt(), def.defaultValue());
+            // Property-Typs in die vom Zeilen-Editor erwartete Struktur
-                case "reenter" -> orDefault(task.getReenter(), def.defaultValue());
+            // (Liste aus {title}/{title,placeholder}-Maps) zurückgewandelt.
-                case "rt" -> orDefault(task.getRt(), def.defaultValue());
+            Object value = switch (def.type()) {
-                case "track" -> orDefault(task.getTrack(), def.defaultValue());
+                case FIELD_LIST -> fieldRows(task);
-                case "min" -> orDefault(task.getMin(), def.defaultValue());
+                case NAME_LIST -> entryRows(task);
-                case "max" -> orDefault(task.getMax(), def.defaultValue());
+                default -> scalarValue(def, task);
-                case "max_len" -> orDefault(task.getMaxLen(), def.defaultValue());
-                case "txt" -> orDefault(task.getTxt(), def.defaultValue());
-                case "query_remark" -> anyQueryRemark(task);
-                case "entries" -> entriesText(task);
-                default -> def.defaultValue();
             };
             values.put(def.id(), value);
         }
         return values;
     }
 
+    private Object scalarValue(PropertyDefinition def, TaskDto task) {
+        return switch (def.id()) {
+            case "opt" -> orDefault(task.getOpt(), def.defaultValue());
+            case "reenter" -> orDefault(task.getReenter(), def.defaultValue());
+            case "rt" -> orDefault(task.getRt(), def.defaultValue());
+            case "track" -> orDefault(task.getTrack(), def.defaultValue());
+            case "min" -> orDefault(task.getMin(), def.defaultValue());
+            case "max" -> orDefault(task.getMax(), def.defaultValue());
+            case "max_len" -> orDefault(task.getMaxLen(), def.defaultValue());
+            case "txt" -> orDefault(task.getTxt(), def.defaultValue());
+            case "query_remark" -> anyQueryRemark(task);
+            case "entries" -> entriesText(task);
+            case "choices" -> choicesText(task);
+            default -> def.defaultValue();
+        };
+    }
+
+    /** {@code fields}-Array (Typ 12/13) zurück in Zeilen mit Titel + Platzhalter. */
+    private List<Map<String, Object>> fieldRows(TaskDto task) {
+        List<Map<String, Object>> rows = new ArrayList<>();
+        if (task.getFields() == null) {
+            return rows;
+        }
+        for (FieldDto field : task.getFields()) {
+            Map<String, Object> row = new LinkedHashMap<>();
+            row.put("title", field.getTitle() == null ? "" : field.getTitle());
+            row.put("placeholder", field.getPlaceholder() == null ? "" : field.getPlaceholder());
+            rows.add(row);
+        }
+        return rows;
+    }
+
+    /** {@code entries}-Array (Typ 14) zurück in Zeilen mit Namen ({@code title}). */
+    private List<Map<String, Object>> entryRows(TaskDto task) {
+        List<Map<String, Object>> rows = new ArrayList<>();
+        if (task.getEntries() == null) {
+            return rows;
+        }
+        for (TaskEntryDto entry : task.getEntries()) {
+            Map<String, Object> row = new LinkedHashMap<>();
+            row.put("title", entry.getText() == null ? "" : entry.getText());
+            rows.add(row);
+        }
+        return rows;
+    }
+
     private Object orDefault(Object value, Object fallback) {
         return value != null ? value : fallback;
     }
 
     private boolean anyQueryRemark(TaskDto task) {
         return task.getEntries() != null
-                && task.getEntries().stream().anyMatch(TaskEntryDto::isQueryRemark);
+                && task.getEntries().stream().anyMatch(entry -> entry.isQueryRemark());
     }
 
     private String entriesText(TaskDto task) {
@@ -94,7 +136,18 @@ public class TaskListImporter {
             return "";
         }
         return task.getEntries().stream()
-                .map(TaskEntryDto::getText)
+                .map(entry -> entry.getText())
                 .collect(Collectors.joining("\n"));
     }
+
+    private String choicesText(TaskDto task) {
+        if (task.getChoices() != null && !task.getChoices().isEmpty()) {
+            return task.getChoices().stream()
+                    .map(choice -> choice.getTxt())
+                    .collect(Collectors.joining("\n"));
+        }
+        // Altdaten des früheren Typ 11 (Abhol-/Lieferstatus) liefern die Optionen
+        // als entries; diese als choices-Text übernehmen.
+        return entriesText(task);
+    }
 }

src/main/java/de/assecutor/tasklisteditor/service/TaskListService.java

@@ -9,6 +9,7 @@ import de.assecutor.tasklisteditor.repository.TaskListRepository;
 import org.springframework.stereotype.Service;
 
 import java.time.Instant;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 
@@ -31,10 +32,20 @@ public class TaskListService {
         this.objectMapper = objectMapper;
     }
 
+    /**
+     * Task-Typ des Script-Blocks (siehe {@code BlockTypeRegistry}) – wird von der
+     * stadtbote-App nicht verarbeitet und daher aus dem App-JSON ausgelassen.
+     */
+    private static final int SCRIPT_TASK_TYPE = 0;
+
     /** Ergebnis eines Exports: typisierte Tasks plus formatiertes JSON. */
     public record ExportResult(List<TaskDto> tasks, String json) {
     }
 
+    /** Ergebnis eines App-Job-Exports: Anzahl Tasks plus formatiertes Job-JSON. */
+    public record AppJobResult(int taskCount, String json) {
+    }
+
     public ExportResult build(String drawflowJson, Map<Integer, BlockInstance> instances) {
         List<TaskDto> tasks = exporter.export(drawflowJson, instances);
         try {
@@ -45,6 +56,37 @@ public class TaskListService {
         }
     }
 
+    /**
+     * Baut aus dem Editor-Zustand das app-konforme Task-Array, wie es die
+     * stadtbote-App verarbeitet (entspricht der {@code tasks}-Liste einer Tour).
+     *
+     * <p>Script-Blöcke (Typ 100) werden ausgelassen, da die App sie nicht
+     * verarbeitet; anschließend werden die {@code s_id}-Werte lückenlos neu
+     * vergeben.
+     *
+     * @param name nicht verwendet (bleibt für künftige Erweiterungen erhalten)
+     */
+    public AppJobResult buildAppJob(String name, String drawflowJson,
+                                    Map<Integer, BlockInstance> instances) {
+        List<TaskDto> tasks = new ArrayList<>();
+        int sId = 1;
+        for (TaskDto task : exporter.export(drawflowJson, instances)) {
+            if (task.getType() == SCRIPT_TASK_TYPE) {
+                continue;
+            }
+            task.setScript(null);
+            task.setSId(sId++);
+            tasks.add(task);
+        }
+
+        try {
+            String json = objectMapper.writerWithDefaultPrettyPrinter().writeValueAsString(tasks);
+            return new AppJobResult(tasks.size(), json);
+        } catch (JsonProcessingException ex) {
+            throw new IllegalStateException("App-JSON konnte nicht erzeugt werden: " + ex.getMessage(), ex);
+        }
+    }
+
     /**
      * Speichert die Task-Liste in MongoDB.
      *

src/main/java/de/assecutor/tasklisteditor/view/MainView.java

@@ -4,6 +4,7 @@ import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.checkbox.Checkbox;
+import com.vaadin.flow.component.combobox.ComboBox;
 import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.grid.Grid;
 import com.vaadin.flow.component.html.Div;
@@ -26,6 +27,7 @@ import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
 import com.fasterxml.jackson.databind.ObjectMapper;
 import de.assecutor.tasklisteditor.component.NodeEditor;
+import de.assecutor.tasklisteditor.component.ScriptEditor;
 import de.assecutor.tasklisteditor.model.BlockInstance;
 import de.assecutor.tasklisteditor.model.BlockType;
 import de.assecutor.tasklisteditor.model.BlockTypeRegistry;
@@ -34,6 +36,8 @@ import de.assecutor.tasklisteditor.model.PropertyDefinition;
 import de.assecutor.tasklisteditor.model.TaskListPayload;
 import de.assecutor.tasklisteditor.document.CanvasDocument;
 import de.assecutor.tasklisteditor.service.CanvasService;
+import de.assecutor.tasklisteditor.service.CustomTypeService;
+import de.assecutor.tasklisteditor.service.ElementSettingsService;
 import de.assecutor.tasklisteditor.service.PendingImportStore;
 import de.assecutor.tasklisteditor.service.TaskListImporter;
 import de.assecutor.tasklisteditor.service.TaskListService;
@@ -41,13 +45,20 @@ import elemental.json.Json;
 import elemental.json.JsonArray;
 import elemental.json.JsonObject;
 
+import com.fasterxml.jackson.databind.JsonNode;
+
 import java.time.ZoneId;
 import java.time.format.DateTimeFormatter;
+import java.util.ArrayDeque;
 import java.util.ArrayList;
+import java.util.Deque;
 import java.util.HashMap;
+import java.util.HashSet;
 import java.util.LinkedHashMap;
+import java.util.LinkedHashSet;
 import java.util.List;
 import java.util.Map;
+import java.util.Set;
 
 @Route("")
 @PageTitle("TaskList Editor")
@@ -61,11 +72,13 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
     private final TaskListImporter taskListImporter;
     private final PendingImportStore importStore;
     private final CanvasService canvasService;
+    private final CustomTypeService customTypeService;
+    private final ElementSettingsService elementSettingsService;
     private final ObjectMapper objectMapper;
     private final NodeEditor nodeEditor;
     private final Map<Integer, BlockInstance> instances = new HashMap<>();
-    private final Div propertiesContent;
+    private Div palettePanel;
-    private final Paragraph propertiesEmpty;
+    private Component paletteDivider;
     private String currentListName;
 
     public MainView(BlockTypeRegistry registry,
@@ -73,18 +86,24 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
                     TaskListImporter taskListImporter,
                     PendingImportStore importStore,
                     CanvasService canvasService,
+                    CustomTypeService customTypeService,
+                    ElementSettingsService elementSettingsService,
                     ObjectMapper objectMapper) {
         this.registry = registry;
         this.taskListService = taskListService;
         this.taskListImporter = taskListImporter;
         this.importStore = importStore;
         this.canvasService = canvasService;
+        this.customTypeService = customTypeService;
+        this.elementSettingsService = elementSettingsService;
         this.objectMapper = objectMapper;
         setSizeFull();
         setPadding(false);
         setSpacing(false);
         addClassName("tasklist-app");
 
+        loadCustomTypes();
+
         add(buildHeader());
 
         HorizontalLayout body = new HorizontalLayout();
@@ -95,15 +114,8 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
 
         Div palette = buildPalette();
         nodeEditor = new NodeEditor();
-        Div propertiesPanel = buildPropertiesPanel();
-        propertiesContent = (Div) propertiesPanel.getChildren()
-                .filter(c -> c.getElement().getClassList().contains("properties-content"))
-                .findFirst().orElseThrow();
-        propertiesEmpty = new Paragraph("Klicke auf einen Funktionsblock, um seine Eigenschaften zu bearbeiten.");
-        propertiesEmpty.addClassName("properties-empty");
-        propertiesContent.add(propertiesEmpty);
 
-        body.add(palette, nodeEditor, propertiesPanel);
+        body.add(palette, nodeEditor);
         body.expand(nodeEditor);
         add(body);
 
@@ -114,12 +126,13 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
             if (type == null) return;
             instances.put(e.nodeId(), new BlockInstance(e.nodeId(), type));
         });
-        nodeEditor.addNodeSelectedListener(e -> showProperties(e.nodeId()));
+        nodeEditor.addNodeActivatedListener(e -> {
-        nodeEditor.addNodeUnselectedListener(e -> showEmpty());
+            BlockInstance instance = instances.get(e.nodeId());
-        nodeEditor.addNodeRemovedListener(e -> {
+            if (instance != null) {
-            instances.remove(e.nodeId());
+                openSettingsDialog(instance);
-            showEmpty();
+            }
         });
+        nodeEditor.addNodeRemovedListener(e -> instances.remove(e.nodeId()));
     }
 
     private Component buildHeader() {
@@ -141,7 +154,6 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         clear.addClickListener(e -> {
             nodeEditor.clear();
             instances.clear();
-            showEmpty();
             Notification.show("Canvas geleert");
         });
 
@@ -153,6 +165,10 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         loadCanvas.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
         loadCanvas.addClickListener(e -> openLoadCanvasDialog());
 
+        Button appJson = new Button("App-JSON (stadtbote)", new Icon(VaadinIcon.MOBILE));
+        appJson.addThemeVariants(ButtonVariant.LUMO_SUCCESS);
+        appJson.addClickListener(e -> previewAppJson());
+
         Button export = new Button("JSON erzeugen & speichern", new Icon(VaadinIcon.DOWNLOAD));
         export.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
         export.addClickListener(e -> exportTasks());
@@ -160,13 +176,14 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         Span spacer = new Span();
         spacer.getStyle().set("flex", "1");
 
-        header.add(title, subtitle, spacer, clear, saveCanvas, loadCanvas, export);
+        header.add(title, subtitle, spacer, clear, saveCanvas, loadCanvas, appJson, export);
         return header;
     }
 
     private Div buildPalette() {
         Div panel = new Div();
         panel.addClassName("palette-panel");
+        palettePanel = panel;
 
         H3 heading = new H3("Funktionsblöcke");
         heading.addClassName("panel-heading");
@@ -176,15 +193,162 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         hint.addClassName("panel-hint");
         panel.add(hint);
 
+        Button customType = new Button("Eigenen Typ anlegen", new Icon(VaadinIcon.PLUS));
+        customType.addThemeVariants(ButtonVariant.LUMO_SMALL, ButtonVariant.LUMO_TERTIARY);
+        customType.addClassName("palette-add-type");
+        customType.setWidthFull();
+        customType.addClickListener(e -> openCustomTypeDialog());
+        panel.add(customType);
+
         for (BlockType type : registry.all()) {
-            panel.add(buildPaletteItem(type));
+            if (isCustomType(type)) {
+                addCustomPaletteItem(type);
+            } else {
+                panel.add(buildPaletteItem(type));
+            }
         }
         return panel;
     }
 
+    private boolean isCustomType(BlockType type) {
+        return type.taskType() >= BlockTypeRegistry.CUSTOM_TYPE_START;
+    }
+
+    /** Fügt ein benutzerdefiniertes Element hinzu und blendet davor einmalig einen Trenner ein. */
+    private void addCustomPaletteItem(BlockType type) {
+        if (paletteDivider == null) {
+            paletteDivider = buildPaletteDivider();
+            palettePanel.add(paletteDivider);
+        }
+        palettePanel.add(buildPaletteItem(type));
+    }
+
+    private Component buildPaletteDivider() {
+        Div divider = new Div();
+        divider.addClassName("palette-divider");
+        Span label = new Span("Eigene Typen");
+        label.addClassName("palette-divider-label");
+        divider.add(label);
+        return divider;
+    }
+
+    /**
+     * Lädt die in MongoDB gespeicherten benutzerdefinierten Typen und registriert
+     * sie, sofern sie noch nicht bekannt sind. Fehlt die Datenbank, startet der
+     * Editor trotzdem (nur ohne die gespeicherten Typen).
+     */
+    private void loadCustomTypes() {
+        try {
+            for (BlockType custom : customTypeService.loadAll()) {
+                if (registry.find(custom.id()).isEmpty()) {
+                    registry.registerCustom(custom);
+                }
+            }
+        } catch (Exception ex) {
+            Notification.show("Eigene Typen konnten nicht geladen werden (läuft MongoDB?): "
+                    + ex.getMessage());
+        }
+    }
+
+    /**
+     * Dialog zum Anlegen eines benutzerdefinierten Typs: vergibt die nächste freie
+     * Typnummer ab 1000, lässt einen der festen Typen (1–8) als Basis wählen und
+     * die zugehörigen Daten erfassen.
+     */
+    private void openCustomTypeDialog() {
+        Dialog dialog = new Dialog();
+        dialog.setHeaderTitle("Eigenen Typ anlegen");
+        dialog.setWidth("440px");
+
+        int number = registry.nextCustomTaskType();
+
+        IntegerField numberField = new IntegerField("Typnummer");
+        numberField.setWidthFull();
+        numberField.setValue(number);
+        numberField.setReadOnly(true);
+        numberField.setHelperText("Nächste freie Nummer ab 1000.");
+
+        ComboBox<BlockType> baseBox = new ComboBox<>("Basis-Typ");
+        baseBox.setWidthFull();
+        baseBox.setItems(registry.baseTypes());
+        baseBox.setItemLabelGenerator(t -> t.taskType() + " – " + t.label());
+        baseBox.setHelperText("Fester Typ, auf dem der eigene Typ aufbaut.");
+
+        TextField nameField = new TextField("Bezeichnung");
+        nameField.setWidthFull();
+        nameField.setRequiredIndicatorVisible(true);
+
+        Div fields = new Div();
+        fields.setWidthFull();
+
+        // Temporäre Instanz des Basis-Typs, in der die erfassten Vorgaben landen.
+        BlockInstance[] draft = new BlockInstance[1];
+
+        baseBox.addValueChangeListener(e -> {
+            fields.removeAll();
+            BlockType base = e.getValue();
+            if (base == null) {
+                draft[0] = null;
+                return;
+            }
+            nameField.setValue(base.label());
+            BlockInstance temp = new BlockInstance(-1, base);
+            draft[0] = temp;
+            for (PropertyDefinition def : base.properties()) {
+                fields.add(buildField(temp, def));
+            }
+        });
+
+        VerticalLayout content = new VerticalLayout(numberField, baseBox, nameField, fields);
+        content.setPadding(false);
+        content.setSpacing(true);
+        dialog.add(content);
+
+        Button create = new Button("Anlegen", new Icon(VaadinIcon.CHECK), ev -> {
+            BlockType base = baseBox.getValue();
+            if (base == null) {
+                Notification.show("Bitte einen Basis-Typ wählen.");
+                return;
+            }
+            String label = nameField.getValue();
+            if (label == null || label.isBlank()) {
+                Notification.show("Bitte eine Bezeichnung angeben.");
+                return;
+            }
+            List<PropertyDefinition> props = new ArrayList<>();
+            for (PropertyDefinition def : base.properties()) {
+                Object value = draft[0] == null ? null : draft[0].get(def.id());
+                props.add(new PropertyDefinition(def.id(), def.label(), def.type(),
+                        value == null ? def.defaultValue() : value));
+            }
+            BlockType custom = registry.registerCustom(number, base, label.trim(), props);
+            try {
+                customTypeService.save(custom, base.id());
+            } catch (Exception ex) {
+                Notification.show("Typ angelegt, aber nicht gespeichert (läuft MongoDB?): "
+                        + ex.getMessage());
+            }
+            addCustomPaletteItem(custom);
+            nodeEditor.registerBlockTypes(registry.all());
+            Notification.show("Typ " + number + " „" + custom.label() + "“ angelegt.");
+            dialog.close();
+        });
+        create.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
+
+        Button cancel = new Button("Abbrechen", ev -> dialog.close());
+        cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
+
+        dialog.getFooter().add(cancel, create);
+        dialog.open();
+    }
+
     private Component buildPaletteItem(BlockType type) {
+        boolean custom = isCustomType(type);
         Div tile = new Div();
         tile.addClassName("palette-item");
+        if (custom) {
+            tile.addClassName("palette-item-custom");
+        }
         tile.getElement().setAttribute("draggable", "true");
         tile.getElement().setAttribute("data-blocktype", type.id());
         tile.getElement().getStyle().set("--block-color", type.color());
@@ -203,9 +367,60 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         text.add(label, desc);
 
         tile.add(iconWrap, text);
+
+        if (custom) {
+            Icon trash = new Icon(VaadinIcon.TRASH);
+            trash.addClassName("palette-item-delete");
+            trash.getElement().setAttribute("title", "Typ löschen");
+            trash.getElement().setAttribute("draggable", "false");
+            trash.getElement().addEventListener("click", e -> confirmDeleteCustomType(type, tile))
+                    .stopPropagation();
+            tile.add(trash);
+        }
         return tile;
     }
 
+    /** Sicherheitsabfrage vor dem Löschen eines benutzerdefinierten Typs. */
+    private void confirmDeleteCustomType(BlockType type, Component tile) {
+        Dialog dialog = new Dialog();
+        dialog.setHeaderTitle("Typ löschen");
+
+        dialog.add(new Paragraph("Soll der benutzerdefinierte Typ „" + type.label()
+                + "“ (Typ " + type.taskType() + ") wirklich gelöscht werden?"));
+
+        Button delete = new Button("Löschen", new Icon(VaadinIcon.TRASH), ev -> {
+            deleteCustomType(type, tile);
+            dialog.close();
+        });
+        delete.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_ERROR);
+
+        Button cancel = new Button("Abbrechen", ev -> dialog.close());
+        cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
+
+        dialog.getFooter().add(cancel, delete);
+        dialog.open();
+    }
+
+    private void deleteCustomType(BlockType type, Component tile) {
+        if (!registry.removeCustom(type.id())) {
+            return;
+        }
+        try {
+            customTypeService.deleteByTaskType(type.taskType());
+        } catch (Exception ex) {
+            Notification.show("Typ entfernt, aber nicht aus der DB gelöscht (läuft MongoDB?): "
+                    + ex.getMessage());
+        }
+        palettePanel.remove(tile);
+        // Trenner entfernen, wenn kein benutzerdefinierter Typ mehr vorhanden ist.
+        if (paletteDivider != null && registry.all().stream().noneMatch(this::isCustomType)) {
+            palettePanel.remove(paletteDivider);
+            paletteDivider = null;
+        }
+        nodeEditor.registerBlockTypes(registry.all());
+        Notification.show("Typ " + type.taskType() + " „" + type.label() + "“ gelöscht.");
+    }
+
     private VaadinIcon parseIcon(String key) {
         if (key == null || !key.startsWith("vaadin:")) return VaadinIcon.CIRCLE;
         try {
@@ -215,45 +430,135 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         }
     }
 
-    private Div buildPropertiesPanel() {
+    /**
-        Div panel = new Div();
+     * Öffnet die Einstellungen eines Blocks in einem Dialog. Beim Script-Block
-        panel.addClassName("properties-panel");
+     * werden zuvor die mit dem Eingang verbundenen Elemente aus dem aktuellen
-
+     * Canvas-Graphen ermittelt, um sie als Variablen anzubieten.
-        H3 heading = new H3("Eigenschaften");
+     */
-        heading.addClassName("panel-heading");
+    private void openSettingsDialog(BlockInstance instance) {
-        panel.add(heading);
+        // Rein virtuelle Elemente (Start/Abschluss) haben keine Einstellungen.
-
+        if (instance.type().isVirtual()) {
-        Div content = new Div();
-        content.addClassName("properties-content");
-        panel.add(content);
-
-        return panel;
-    }
-
-    private void showProperties(int nodeId) {
-        BlockInstance instance = instances.get(nodeId);
-        if (instance == null) {
-            showEmpty();
             return;
         }
-        propertiesContent.removeAll();
+        if ("script".equals(instance.type().id())) {
+            nodeEditor.exportGraph(graphJson -> openScriptDialog(instance, graphJson));
+            return;
+        }
+        openBlockDialog(instance);
+    }
 
-        Div badge = new Div();
+    private void openBlockDialog(BlockInstance instance) {
-        badge.addClassName("properties-badge");
+        Dialog dialog = new Dialog();
-        badge.getStyle().set("background", instance.type().color());
+        dialog.setHeaderTitle(instance.type().label());
-        badge.add(new Icon(parseIcon(instance.type().icon())));
+        dialog.setWidth("440px");
-        Span name = new Span(instance.type().label());
-        name.addClassName("properties-name");
-
-        HorizontalLayout title = new HorizontalLayout(badge, name);
-        title.setAlignItems(FlexComponent.Alignment.CENTER);
-        title.addClassName("properties-title");
-        propertiesContent.add(title);
 
         Paragraph desc = new Paragraph(instance.type().description());
         desc.addClassName("properties-desc");
-        propertiesContent.add(desc);
 
+        VerticalLayout content = new VerticalLayout(desc, topicField(instance));
+        content.setPadding(false);
+        content.setSpacing(true);
+        for (PropertyDefinition def : instance.type().properties()) {
+            content.add(buildField(instance, def));
+        }
+        dialog.add(content);
+
+        Button close = new Button("Schließen", ev -> dialog.close());
+        close.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
+        dialog.getFooter().add(close);
+        dialog.open();
+    }
+
+    private void openScriptDialog(BlockInstance instance, String graphJson) {
+        List<BlockInstance> upstream = upstreamElements(graphJson, instance.id());
+        List<VariableDef> variables = upstream.stream()
+                .flatMap(b -> variablesFor(b).stream())
+                .toList();
+
+        Dialog dialog = new Dialog();
+        dialog.setHeaderTitle("Skript: " + instance.type().label());
+        dialog.setWidth("82vw");
+        dialog.setHeight("80vh");
+
+        // Verfügbare Variablen (mit dem Eingang verbundene Elemente) anzeigen.
+        Div vars = new Div();
+        vars.addClassName("script-vars");
+        Span varsLabel = new Span("Verfügbare Variablen:");
+        varsLabel.addClassName("script-vars-label");
+        vars.add(varsLabel);
+        if (variables.isEmpty()) {
+            Span none = new Span("keine verbundenen Eingangselemente");
+            none.addClassName("script-vars-empty");
+            vars.add(none);
+        } else {
+            for (VariableDef variable : variables) {
+                Span chip = new Span(variable.label());
+                chip.addClassName("script-var-chip");
+                vars.add(chip);
+            }
+        }
+
+        ScriptEditor editor = new ScriptEditor();
+        editor.getStyle().set("flex", "1").set("minHeight", "0").set("minWidth", "0")
+                .set("border", "1px solid var(--lumo-contrast-10pct)")
+                .set("border-radius", "var(--lumo-border-radius-m)");
+
+        // Operatoren-Palette links (wie im Workflow-Editor).
+        VerticalLayout palette = new VerticalLayout();
+        palette.addClassName("script-palette");
+        palette.setPadding(false);
+        palette.setSpacing(false);
+        palette.setWidth("190px");
+        palette.setHeightFull();
+        H3 paletteHeading = new H3("Operatoren");
+        paletteHeading.addClassName("panel-heading");
+        palette.add(paletteHeading,
+                scriptPaletteTile("constant", "Konstante", "#0891b2", "C"),
+                scriptPaletteTile("variable", "Variable", "#059669", "x"),
+                scriptPaletteTile("compare", "Vergleich", "#2563eb", "="),
+                scriptPaletteTile("if", "Wenn", "#d97706", "?"),
+                scriptPaletteTile("and", "UND", "#7c3aed", "∧"),
+                scriptPaletteTile("or", "ODER", "#7c3aed", "∨"),
+                scriptPaletteTile("not", "NICHT", "#7c3aed", "¬"),
+                scriptPaletteTile("result", "Ergebnis", "#dc2626", "✓"),
+                scriptPaletteTile("output", "Ausgang", "#0f766e", "→")
+        );
+
+        HorizontalLayout workspace = new HorizontalLayout(palette, editor);
+        workspace.setSizeFull();
+        workspace.setPadding(false);
+        workspace.setSpacing(true);
+        workspace.expand(editor);
+
+        VerticalLayout content = new VerticalLayout(topicField(instance), vars, workspace);
+        content.setSizeFull();
+        content.setPadding(false);
+        content.setSpacing(true);
+        content.expand(workspace);
+        dialog.add(content);
+
+        Object existing = instance.get("script");
+        if (existing != null && !existing.toString().isBlank()) {
+            editor.setGraph(existing.toString());
+        }
+        editor.setVariables(toVariableArray(variables));
+
+        Button apply = new Button("Übernehmen", new Icon(VaadinIcon.CHECK), ev ->
+                editor.exportGraph(json -> {
+                    instance.set("script", json);
+                    int outputs = countScriptOutputs(json);
+                    nodeEditor.setNodeOutputs(instance.id(), outputs);
+                    Notification.show("Skript übernommen (" + outputs + " Ausgang/Ausgänge).");
+                    dialog.close();
+                }));
+        apply.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
+        Button cancel = new Button("Abbrechen", ev -> dialog.close());
+        cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
+        dialog.getFooter().add(cancel, apply);
+        dialog.open();
+    }
+
+    private TextField topicField(BlockInstance instance) {
         TextField topic = new TextField("Bezeichnung");
         topic.setWidthFull();
         topic.setHelperText("Wird dem Bearbeiter angezeigt (topic).");
@@ -264,11 +569,124 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
             nodeEditor.updateNodeLabel(instance.id(),
                     value == null || value.isBlank() ? instance.type().label() : value);
         });
-        propertiesContent.add(topic);
+        return topic;
+    }
 
-        for (PropertyDefinition def : instance.type().properties()) {
+    /** Ziehbare Operator-Kachel für die Script-Palette (Drag &amp; Drop auf den Canvas). */
-            propertiesContent.add(buildField(instance, def));
+    private Component scriptPaletteTile(String typeId, String label, String color, String symbol) {
+        Div tile = new Div();
+        tile.addClassName("script-tile");
+        tile.getElement().setAttribute("draggable", "true");
+        tile.getElement().setAttribute("data-logictype", typeId);
+        tile.getStyle().set("--block-color", color);
+
+        Div icon = new Div();
+        icon.addClassName("script-tile-icon");
+        icon.getStyle().set("background", color);
+        icon.setText(symbol);
+
+        Span name = new Span(label);
+        name.addClassName("script-tile-label");
+
+        tile.add(icon, name);
+        return tile;
+    }
+
+    /** Mit dem Eingang des Script-Blocks verbundene (vorgelagerte) Elemente. */
+    private List<BlockInstance> upstreamElements(String graphJson, int scriptId) {
+        return upstreamNodeIds(graphJson, scriptId).stream()
+                .map(instances::get)
+                .filter(java.util.Objects::nonNull)
+                .filter(b -> !"script".equals(b.type().id()))
+                .sorted((a, b) -> Integer.compare(a.id(), b.id()))
+                .toList();
+    }
+
+    /** Folgt den eingehenden Verbindungen des Knotens transitiv (alle Vorgänger). */
+    private Set<Integer> upstreamNodeIds(String graphJson, int scriptId) {
+        Set<Integer> result = new LinkedHashSet<>();
+        if (graphJson == null || graphJson.isBlank()) {
+            return result;
         }
+        try {
+            JsonNode data = objectMapper.readTree(graphJson).path("drawflow").path("Home").path("data");
+            Deque<Integer> queue = new ArrayDeque<>();
+            Set<Integer> visited = new HashSet<>();
+            queue.add(scriptId);
+            while (!queue.isEmpty()) {
+                int current = queue.poll();
+                if (!visited.add(current)) {
+                    continue;
+                }
+                JsonNode inputs = data.path(String.valueOf(current)).path("inputs");
+                inputs.forEach(input -> input.path("connections").forEach(conn -> {
+                    JsonNode node = conn.path("node");
+                    if (!node.isMissingNode()) {
+                        int source = Integer.parseInt(node.asText());
+                        if (source != scriptId && result.add(source)) {
+                            queue.add(source);
+                        }
+                    }
+                }));
+            }
+        } catch (Exception ignored) {
+            // Ungültiger Graph -> keine Variablen.
+        }
+        return result;
+    }
+
+    /** Zählt die „Ausgang"-Knoten im Skript – bestimmt die Ausgänge des Script-Elements. */
+    private int countScriptOutputs(String json) {
+        if (json == null || json.isBlank()) {
+            return 0;
+        }
+        try {
+            JsonNode data = objectMapper.readTree(json).path("drawflow").path("Home").path("data");
+            int count = 0;
+            for (JsonNode node : data) {
+                if ("output".equals(node.path("name").asText())) {
+                    count++;
+                }
+            }
+            return count;
+        } catch (Exception ex) {
+            return 0;
+        }
+    }
+
+    private JsonArray toVariableArray(List<VariableDef> definitions) {
+        JsonArray variables = Json.createArray();
+        int i = 0;
+        for (VariableDef def : definitions) {
+            JsonObject obj = Json.createObject();
+            obj.put("key", def.key());
+            obj.put("label", def.label());
+            variables.set(i++, obj);
+        }
+        return variables;
+    }
+
+    /** Beschreibt eine vom Script referenzierbare Variable (Schlüssel + Anzeige). */
+    private record VariableDef(String key, String label) {
+    }
+
+    /**
+     * Liefert die Variablen, die ein Element dem Script bereitstellt.
+     * Die meisten Elemente geben ihren erfassten Wert weiter; das Element
+     * „Fotos aufnehmen" stellt die Anzahl der aufgenommenen Fotos bereit.
+     */
+    private List<VariableDef> variablesFor(BlockInstance element) {
+        String base = variableLabel(element);
+        if ("fotos-aufnehmen".equals(element.type().id())) {
+            return List.of(new VariableDef(element.id() + ".count", base + " · Anzahl Fotos"));
+        }
+        return List.of(new VariableDef(String.valueOf(element.id()), base));
+    }
+
+    private String variableLabel(BlockInstance element) {
+        return element.topic() == null || element.topic().isBlank()
+                ? element.type().label()
+                : element.topic();
     }
 
     private Component buildField(BlockInstance instance, PropertyDefinition def) {
@@ -302,10 +720,111 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
                 box.addValueChangeListener(e -> instance.set(def.id(), e.getValue()));
                 return box;
             }
+            case FIELD_LIST -> {
+                return buildRowList(instance, def, current, true);
+            }
+            case NAME_LIST -> {
+                return buildRowList(instance, def, current, false);
+            }
         }
         return new Span();
     }
 
+    /**
+     * Editor für eine wiederholbare Liste von Eingabefeldern. Jede Zeile besteht
+     * aus einem Titel und – falls {@code withPlaceholder} – zusätzlich einem
+     * Platzhalter. Der Wert wird als {@code List<Map<String,Object>>} unter der
+     * Property-ID abgelegt (rundläuft über Mongo und Export).
+     */
+    private Component buildRowList(BlockInstance instance, PropertyDefinition def, Object current,
+                                  boolean withPlaceholder) {
+        List<Map<String, Object>> rows = new ArrayList<>();
+        if (current instanceof List<?> list) {
+            for (Object o : list) {
+                if (o instanceof Map<?, ?> m) {
+                    Map<String, Object> row = new LinkedHashMap<>();
+                    row.put("title", m.get("title") == null ? "" : m.get("title").toString());
+                    if (withPlaceholder) {
+                        row.put("placeholder", m.get("placeholder") == null ? "" : m.get("placeholder").toString());
+                    }
+                    rows.add(row);
+                }
+            }
+        }
+
+        VerticalLayout wrapper = new VerticalLayout();
+        wrapper.setPadding(false);
+        wrapper.setSpacing(false);
+        wrapper.setWidthFull();
+
+        Span label = new Span(def.label());
+        label.addClassName("properties-fieldlist-label");
+        wrapper.add(label);
+
+        VerticalLayout rowsBox = new VerticalLayout();
+        rowsBox.setPadding(false);
+        rowsBox.setSpacing(true);
+        rowsBox.setWidthFull();
+        wrapper.add(rowsBox);
+
+        Runnable commit = () -> instance.set(def.id(), new ArrayList<>(rows));
+        Runnable[] render = new Runnable[1];
+        render[0] = () -> {
+            rowsBox.removeAll();
+            for (Map<String, Object> row : rows) {
+                TextField title = new TextField();
+                title.setPlaceholder(withPlaceholder ? "Titel" : "Name");
+                title.setValue(row.get("title").toString());
+                title.addValueChangeListener(e -> {
+                    row.put("title", e.getValue());
+                    commit.run();
+                });
+                Button remove = new Button(new Icon(VaadinIcon.TRASH), ev -> {
+                    rows.remove(row);
+                    commit.run();
+                    render[0].run();
+                });
+                remove.addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE, ButtonVariant.LUMO_ERROR);
+
+                HorizontalLayout line = new HorizontalLayout(title);
+                line.setWidthFull();
+                line.setFlexGrow(1, title);
+                if (withPlaceholder) {
+                    TextField placeholder = new TextField();
+                    placeholder.setPlaceholder("Platzhalter");
+                    placeholder.setValue(row.get("placeholder").toString());
+                    placeholder.addValueChangeListener(e -> {
+                        row.put("placeholder", e.getValue());
+                        commit.run();
+                    });
+                    line.add(placeholder);
+                    line.setFlexGrow(1, placeholder);
+                }
+                line.add(remove);
+                line.setAlignItems(FlexComponent.Alignment.BASELINE);
+                rowsBox.add(line);
+            }
+        };
+        render[0].run();
+
+        Button add = new Button(withPlaceholder ? "Feld hinzufügen" : "Eintrag hinzufügen",
+                new Icon(VaadinIcon.PLUS), ev -> {
+            Map<String, Object> row = new LinkedHashMap<>();
+            row.put("title", "");
+            if (withPlaceholder) {
+                row.put("placeholder", "");
+            }
+            rows.add(row);
+            commit.run();
+            render[0].run();
+        });
+        add.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
+        wrapper.add(add);
+
+        commit.run();
+        return wrapper;
+    }
+
     @Override
     public void beforeEnter(BeforeEnterEvent event) {
         List<String> tokens = event.getLocation().getQueryParameters()
@@ -334,7 +853,6 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         }
 
         instances.clear();
-        showEmpty();
 
         nodeEditor.importTasks(descriptors, idsJson -> applyImportedIds(idsJson, resolved));
     }
@@ -384,6 +902,7 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         Button save = new Button("Speichern", new Icon(VaadinIcon.HARDDRIVE), ev -> {
             try {
                 String id = canvasService.save(name.getValue(), layout, collectBlocks());
+                elementSettingsService.saveForCanvas(id, name.getValue(), instances.values());
                 currentListName = name.getValue();
                 Notification.show("Canvas gespeichert (ID: " + id + ")");
                 dialog.close();
@@ -431,7 +950,7 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
                 .withZone(ZoneId.systemDefault());
 
         Grid<CanvasDocument> grid = new Grid<>();
-        grid.addColumn(CanvasDocument::getName).setHeader("Name").setAutoWidth(true);
+        grid.addColumn(d -> d.getName()).setHeader("Name").setAutoWidth(true);
         grid.addColumn(d -> d.getBlocks() == null ? 0 : d.getBlocks().size()).setHeader("Blöcke");
         grid.addColumn(d -> d.getCreatedAt() == null ? "" : fmt.format(d.getCreatedAt()))
                 .setHeader("Gespeichert");
@@ -475,7 +994,6 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         }
         currentListName = document.getName();
         nodeEditor.importGraph(document.getLayout());
-        showEmpty();
         Notification.show("Canvas „" + document.getName() + "“ geladen.");
     }
 
@@ -538,8 +1056,60 @@ public class MainView extends VerticalLayout implements BeforeEnterObserver {
         dialog.open();
     }
 
-    private void showEmpty() {
+    /**
-        propertiesContent.removeAll();
+     * Erzeugt das vollständige, von der stadtbote-App verarbeitbare Job-JSON
-        propertiesContent.add(propertiesEmpty);
+     * (Job → Tour → Tasks) und zeigt es in einem Dialog an.
+     */
+    private void previewAppJson() {
+        if (instances.isEmpty()) {
+            Notification.show("Es sind keine Funktionsblöcke auf dem Canvas.");
+            return;
+        }
+        nodeEditor.exportGraph(graphJson -> {
+            try {
+                TaskListService.AppJobResult result =
+                        taskListService.buildAppJob(currentListName, graphJson, instances);
+                if (result.taskCount() == 0) {
+                    Notification.show("Keine app-verarbeitbaren Tasks gefunden.");
+                    return;
+                }
+                openAppJsonDialog(result);
+            } catch (Exception ex) {
+                Notification.show("App-JSON fehlgeschlagen: " + ex.getMessage());
+            }
+        });
+    }
+
+    private void openAppJsonDialog(TaskListService.AppJobResult result) {
+        Dialog dialog = new Dialog();
+        dialog.setHeaderTitle("App-JSON für stadtbote (" + result.taskCount() + " Tasks)");
+        dialog.setWidth("720px");
+
+        Paragraph hint = new Paragraph("Task-Array, das von der stadtbote-App fehlerfrei "
+                + "verarbeitet wird. Script-Blöcke werden ausgelassen.");
+        hint.addClassName("properties-desc");
+
+        TextArea json = new TextArea("App-JSON (tasks-Array)");
+        json.setWidthFull();
+        json.setHeight("420px");
+        json.setReadOnly(true);
+        json.setValue(result.json());
+
+        VerticalLayout content = new VerticalLayout(hint, json);
+        content.setPadding(false);
+        content.setSpacing(true);
+        dialog.add(content);
+
+        Button copy = new Button("In Zwischenablage kopieren", new Icon(VaadinIcon.COPY), ev -> {
+            getElement().executeJs("navigator.clipboard.writeText($0)", result.json());
+            Notification.show("JSON in die Zwischenablage kopiert.");
+        });
+        copy.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
+
+        Button close = new Button("Schließen", ev -> dialog.close());
+        close.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
+
+        dialog.getFooter().add(close, copy);
+        dialog.open();
     }
 }

src/main/resources/application.properties

@@ -16,6 +16,31 @@ logging.level.org.atmosphere=WARN
 # startet auch ohne laufende MongoDB.
 spring.data.mongodb.uri=${MONGODB_URI:mongodb://localhost:27017}
 spring.data.mongodb.database=${MONGODB_DATABASE:tasklist_editor}
+# Legt die @Indexed-Indizes (u. a. eindeutige Typnummer) bei Bedarf an.
+spring.data.mongodb.auto-index-creation=true
 
 # Health-Check soll nicht fehlschlagen, wenn keine MongoDB läuft.
 management.health.mongo.enabled=false
+
+# Script-Block (grafisches Logik-Element) im Editor ausblenden.
+# Wird per .env (HIDE_SCRIPT_BLOCK) gesteuert.
+tasklist.hide-script-block=${HIDE_SCRIPT_BLOCK:false}
+
+# --- Collections je Element-Typ ---------------------------------------------
+# Einstellungen der einzelnen Elemente werden beim Canvas-Speichern zusätzlich
+# je Element-Typ in eine eigene Collection geschrieben. Namen aus der .env
+# (MONGODB_ELEMENT_*), mit Default. Benutzerdefinierte Typen werden auf ihren
+# statischen Basistyp aufgelöst; für jeden Typ muss eine Zuordnung existieren.
+tasklist.element-collections[ankunft-melden]=${MONGODB_ELEMENT_ARRIVAL_COLLECTION:element_arrival}
+tasklist.element-collections[unterschrift-erfassen]=${MONGODB_ELEMENT_SIGNATURE_COLLECTION:element_signature}
+tasklist.element-collections[fotos-aufnehmen]=${MONGODB_ELEMENT_PHOTOS_COLLECTION:element_photos}
+tasklist.element-collections[quittungsgeber-erfassen]=${MONGODB_ELEMENT_RECEIPT_GIVER_COLLECTION:element_receipt_giver}
+tasklist.element-collections[bemerkung-erfassen]=${MONGODB_ELEMENT_REMARK_COLLECTION:element_remark}
+tasklist.element-collections[kommissionsnummer-erfassen]=${MONGODB_ELEMENT_COMMISSION_NUMBER_COLLECTION:element_commission_number}
+tasklist.element-collections[checkbox]=${MONGODB_ELEMENT_CHECKBOX_COLLECTION:element_checkbox}
+tasklist.element-collections[barcode-scannen]=${MONGODB_ELEMENT_BARCODE_COLLECTION:element_barcode}
+tasklist.element-collections[statusauswahl]=${MONGODB_ELEMENT_STATUS_SELECTION_COLLECTION:element_status_selection}
+tasklist.element-collections[text-liste-erfassen]=${MONGODB_ELEMENT_TEXT_LIST_COLLECTION:element_text_list}
+tasklist.element-collections[zahl-liste-erfassen]=${MONGODB_ELEMENT_NUMBER_LIST_COLLECTION:element_number_list}
+tasklist.element-collections[checkbox-liste-erfassen]=${MONGODB_ELEMENT_CHECKBOX_LIST_COLLECTION:element_checkbox_list}
+tasklist.element-collections[script]=${MONGODB_ELEMENT_SCRIPT_COLLECTION:element_script}

tsconfig.json

@@ -22,7 +22,7 @@
     "noUnusedParameters": false,
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
-    "ignoreDeprecations": "5.0",
+    "ignoreDeprecations": "6.0",
     "baseUrl": "src/main/frontend",
     "paths": {
       "@vaadin/flow-frontend": ["generated/jar-resources"],