chore: Änderungen commited

logs/app.log

@@ -425,3 +425,6 @@ werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on
 2025-05-14 12:13:05,415 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
 2025-05-14 12:13:07,885 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
 2025-05-14 12:13:07,885 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:13:20,274 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:13:22,949 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:13:22,949 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]

static/js/update_mindmap.js

@@ -968,422 +968,237 @@ function handleEditingAction(action, nodeId) {
 }
 
 // Funktion zum Hinzufügen eines neuen Knotens
-function addNewNode(cy) {
+function addNewNode(cy, parentNode = null) {
-    // Zentriere den neuen Knoten im sichtbaren Bereich
+    // Dialog erstellen
-    const extent = cy.extent();
-    const centerX = (extent.x1 + extent.x2) / 2;
-    const centerY = (extent.y1 + extent.y2) / 2;
-    
-    // Generiere eine eindeutige ID
-    const newId = 'new-node-' + Date.now();
-    
-    // Füge den neuen Knoten hinzu
-    cy.add({
-        group: 'nodes',
-        data: {
-            id: newId,
-            label: 'Neuer Knoten',
-            category: 'Wissenschaft',
-            description: 'Beschreibung hinzufügen',
-            hasChildren: false,
-            expanded: false,
-            color: mindmapConfig.categories['Wissenschaft'].color,
-            fontColor: '#ffffff',
-            fontSize: 16,
-            neuronSize: 8,
-            neuronActivity: 0.8
-        },
-        position: { x: centerX, y: centerY }
-    });
-    
-    // Wähle den neuen Knoten aus, um ihn zu bearbeiten
-    const newNode = cy.getElementById(newId);
-    newNode.select();
-    
-    // Öffne den Bearbeitungsdialog für den neuen Knoten
-    setTimeout(() => {
-        editNodeProperties(newNode);
-    }, 300);
-}
-
-// Funktion zum Bearbeiten von Knoteneigenschaften
-function editNodeProperties(node) {
-    if (!node) return;
-    
-    // Erstelle den Modal-Hintergrund
-    const backdrop = document.createElement('div');
-    backdrop.className = 'modal-backdrop';
-    document.body.appendChild(backdrop);
-    
-    // Erstelle den Bearbeitungsdialog
     const dialog = document.createElement('div');
-    dialog.className = 'node-edit-dialog';
+    dialog.className = 'node-dialog';
+    dialog.style.position = 'absolute';
+    dialog.style.top = '50%';
+    dialog.style.left = '50%';
+    dialog.style.transform = 'translate(-50%, -50%)';
+    dialog.style.background = 'rgba(15, 23, 42, 0.95)';
+    dialog.style.padding = '1.5rem';
+    dialog.style.borderRadius = '0.75rem';
+    dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+    dialog.style.zIndex = '2000';
+    dialog.style.width = '400px';
+    dialog.style.maxWidth = '90vw';
+    dialog.style.backdropFilter = 'blur(8px)';
+    dialog.style.border = '1px solid rgba(255, 255, 255, 0.1)';
 
-    // Hole die aktuellen Daten des Knotens
-    const data = node.data();
-    
-    // Generiere die Kategorie-Optionen
-    let categoryOptions = '';
-    for (const category in mindmapConfig.categories) {
-        categoryOptions += `<option value="${category}" ${data.category === category ? 'selected' : ''}>${category}</option>`;
-    }
-    
-    // Erstelle das Formular
     dialog.innerHTML = `
-        <h3>Knoten bearbeiten</h3>
+        <h3 style="color: white; margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.75rem;">Neuen Knoten erstellen</h3>
-        <form id="node-edit-form">
+        <div style="margin-bottom: 1rem;">
-            <div class="form-group">
+            <label style="display: block; color: white; margin-bottom: 0.5rem;">Name:</label>
-                <label for="node-label">Bezeichnung</label>
+            <input id="node-name" type="text" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
-                <input type="text" id="node-label" value="${data.label || ''}" placeholder="Knotenbezeichnung">
         </div>
-            
+        <div style="margin-bottom: 1rem;">
-            <div class="form-group">
+            <label style="display: block; color: white; margin-bottom: 0.5rem;">Beschreibung:</label>
-                <label for="node-category">Kategorie</label>
+            <textarea id="node-description" style="width: 100%; height: 100px; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;"></textarea>
-                <select id="node-category">
+        </div>
-                    ${categoryOptions}
+        <div style="margin-bottom: 1rem;">
+            <label style="display: block; color: white; margin-bottom: 0.5rem;">Kategorie:</label>
+            <select id="node-category" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
+                <option value="">Keine Kategorie</option>
+                <option value="Philosophie">Philosophie</option>
+                <option value="Wissenschaft">Wissenschaft</option>
+                <option value="Technologie">Technologie</option>
+                <option value="Künste">Künste</option>
+                <option value="Psychologie">Psychologie</option>
             </select>
         </div>
-            
+        <div style="margin-bottom: 1.5rem;">
-            <div class="form-group">
+            <label style="display: block; color: white; margin-bottom: 0.5rem;">Farbe:</label>
-                <label for="node-description">Beschreibung</label>
+            <input id="node-color" type="color" value="#9F7AEA" style="width: 100%; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem;">
-                <textarea id="node-description" rows="3" placeholder="Beschreibung hinzufügen">${data.description || ''}</textarea>
         </div>
-            
+        <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
-            <div class="form-group">
+            <button id="cancel-node" style="padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem; cursor: pointer;">Abbrechen</button>
-                <label for="node-has-children">Hat Unterthemen</label>
+            <button id="create-node" style="padding: 0.5rem 1rem; background: rgba(16, 185, 129, 0.3); color: white; border: 1px solid rgba(16, 185, 129, 0.5); border-radius: 0.5rem; cursor: pointer;">Erstellen</button>
-                <select id="node-has-children">
-                    <option value="true" ${data.hasChildren ? 'selected' : ''}>Ja</option>
-                    <option value="false" ${!data.hasChildren ? 'selected' : ''}>Nein</option>
-                </select>
         </div>
-            
-            <div class="form-actions">
-                <button type="button" class="cancel">Abbrechen</button>
-                <button type="submit" class="save">Speichern</button>
-            </div>
-        </form>
     `;
 
     document.body.appendChild(dialog);
 
-    // Event-Listener für den Abbrechen-Button
+    // Event-Listener
-    dialog.querySelector('button.cancel').addEventListener('click', function() {
+    document.getElementById('cancel-node').addEventListener('click', () => {
         document.body.removeChild(dialog);
-        document.body.removeChild(backdrop);
     });
 
-    // Event-Listener für den Modal-Hintergrund
+    document.getElementById('create-node').addEventListener('click', () => {
-    backdrop.addEventListener('click', function() {
+        const name = document.getElementById('node-name').value || 'Neuer Knoten';
-        document.body.removeChild(dialog);
+        const description = document.getElementById('node-description').value || '';
-        document.body.removeChild(backdrop);
-    });
-    
-    // Event-Listener für das Formular
-    dialog.querySelector('form').addEventListener('submit', function(e) {
-        e.preventDefault();
-        
-        // Hole die neuen Werte aus dem Formular
-        const label = document.getElementById('node-label').value;
         const category = document.getElementById('node-category').value;
-        const description = document.getElementById('node-description').value;
+        const color = document.getElementById('node-color').value;
-        const hasChildren = document.getElementById('node-has-children').value === 'true';
 
-        // Bestimme die Farbe basierend auf der Kategorie
+        // Temporäre ID erstellen (wird später durch die echte ID ersetzt)
-        const color = mindmapConfig.categories[category]?.color || data.color || '#60a5fa';
+        const tempId = 'new-' + Date.now();
         
-        // Aktualisiere die Daten des Knotens
+        // Knoten zur Visualisierung hinzufügen
-        node.data({
+        const newNode = cy.add({
-            ...data,
-            label,
-            category,
-            description,
-            hasChildren,
-            color
-        });
-        
-        // Schließe den Dialog
-        document.body.removeChild(dialog);
-        document.body.removeChild(backdrop);
-        
-        // Benachrichtigung anzeigen
-        showUINotification('Knoten wurde aktualisiert', 'success');
-    });
-}
-
-// Funktion zum Anzeigen des Kontext-Menüs für einen Knoten
-function showNodeContextMenu(node, position) {
-    if (!node) return;
-    
-    // Entferne existierende Kontext-Menüs
-    const existingMenu = document.querySelector('.context-menu');
-    if (existingMenu) {
-        existingMenu.parentNode.removeChild(existingMenu);
-    }
-    
-    // Erstelle das Kontext-Menü
-    const menu = document.createElement('div');
-    menu.className = 'context-menu';
-    menu.style.left = `${position.x}px`;
-    menu.style.top = `${position.y}px`;
-    
-    // Menü-Einträge
-    menu.innerHTML = `
-        <div class="context-menu-item" data-action="edit">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-            </svg>
-            Bearbeiten
-        </div>
-        <div class="context-menu-item" data-action="connect">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-                <polyline points="15 3 21 3 21 9"></polyline>
-                <line x1="10" y1="14" x2="21" y2="3"></line>
-            </svg>
-            Verbindung erstellen
-        </div>
-        <div class="context-menu-item" data-action="delete">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="3 6 5 6 21 6"></polyline>
-                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-            </svg>
-            Löschen
-        </div>
-    `;
-    
-    document.body.appendChild(menu);
-    
-    // Event-Listener für Menü-Einträge
-    menu.querySelectorAll('.context-menu-item').forEach(item => {
-        item.addEventListener('click', function() {
-            const action = this.getAttribute('data-action');
-            
-            switch (action) {
-                case 'edit':
-                    editNodeProperties(node);
-                    break;
-                case 'connect':
-                    startEdgeCreation(node);
-                    break;
-                case 'delete':
-                    deleteNode(node);
-                    break;
-            }
-            
-            // Entferne das Menü
-            document.body.removeChild(menu);
-        });
-    });
-    
-    // Klick außerhalb des Menüs schließt es
-    document.addEventListener('click', function closeMenu(e) {
-        if (!menu.contains(e.target)) {
-            if (document.body.contains(menu)) {
-                document.body.removeChild(menu);
-            }
-            document.removeEventListener('click', closeMenu);
-        }
-    });
-}
-
-// Funktion zum Anzeigen des Menüs zum Hinzufügen eines Knotens
-function showAddNodeMenu(position) {
-    // Entferne existierende Kontext-Menüs
-    const existingMenu = document.querySelector('.context-menu');
-    if (existingMenu) {
-        existingMenu.parentNode.removeChild(existingMenu);
-    }
-    
-    // Erstelle das Kontext-Menü
-    const menu = document.createElement('div');
-    menu.className = 'context-menu';
-    menu.style.left = `${position.x}px`;
-    menu.style.top = `${position.y}px`;
-    
-    // Kategorie-Einträge für neue Knoten
-    let categoryItems = '';
-    for (const category in mindmapConfig.categories) {
-        const categoryConfig = mindmapConfig.categories[category];
-        categoryItems += `
-            <div class="context-menu-item" data-category="${category}" style="color: ${categoryConfig.color}">
-                <i class="${categoryConfig.icon}"></i>
-                ${category}
-            </div>
-        `;
-    }
-    
-    // Menü-Einträge
-    menu.innerHTML = `
-        <div class="context-menu-header" style="padding: 8px 16px; font-size: 0.9rem; opacity: 0.7;">Neuen Knoten hinzufügen</div>
-        ${categoryItems}
-    `;
-    
-    document.body.appendChild(menu);
-    
-    // Event-Listener für Kategorie-Einträge
-    menu.querySelectorAll('.context-menu-item').forEach(item => {
-        item.addEventListener('click', function() {
-            const category = this.getAttribute('data-category');
-            
-            // Füge einen neuen Knoten an der Position hinzu
-            addNewNodeAtPosition(cy, position, category);
-            
-            // Entferne das Menü
-            document.body.removeChild(menu);
-        });
-    });
-    
-    // Klick außerhalb des Menüs schließt es
-    document.addEventListener('click', function closeMenu(e) {
-        if (!menu.contains(e.target)) {
-            if (document.body.contains(menu)) {
-                document.body.removeChild(menu);
-            }
-            document.removeEventListener('click', closeMenu);
-        }
-    });
-}
-
-// Funktion zum Hinzufügen eines neuen Knotens an einer bestimmten Position
-function addNewNodeAtPosition(cy, position, category) {
-    if (!cy) return;
-    
-    // Berechne die Modellposition (statt der gerenderten Position)
-    const modelPosition = cy.renderer().projectIntoViewport(position.x, position.y);
-    
-    // Generiere eine eindeutige ID
-    const newId = 'new-node-' + Date.now();
-    
-    // Hole die Kategorie-Konfiguration
-    const categoryConfig = mindmapConfig.categories[category] || mindmapConfig.categories['Wissenschaft'];
-    
-    // Füge den neuen Knoten hinzu
-    cy.add({
             group: 'nodes',
             data: {
-            id: newId,
+                id: tempId,
-            label: 'Neuer ' + category + '-Knoten',
+                label: name,
+                description: description,
                 category: category,
-            description: categoryConfig.description || 'Beschreibung hinzufügen',
+                color: color,
-            hasChildren: false,
+                icon: 'fa-solid fa-circle'
-            expanded: false,
-            color: categoryConfig.color,
-            fontColor: '#ffffff',
-            fontSize: 16,
-            neuronSize: 8,
-            neuronActivity: 0.8
             },
             position: {
-            x: modelPosition[0],
+                x: cy.width() / 2 + (Math.random() * 100 - 50),
-            y: modelPosition[1]
+                y: cy.height() / 2 + (Math.random() * 100 - 50)
             }
         });
 
-    // Wähle den neuen Knoten aus, um ihn zu bearbeiten
+        // Wenn ein Elternknoten angegeben ist, eine Verbindung erstellen
-    const newNode = cy.getElementById(newId);
+        if (parentNode) {
-    newNode.select();
-    
-    // Öffne den Bearbeitungsdialog für den neuen Knoten
-    setTimeout(() => {
-        editNodeProperties(newNode);
-    }, 300);
-}
-
-// Funktion zum Starten der Erstellung einer Kante
-function startEdgeCreation(sourceNode) {
-    if (!sourceNode) return;
-    
-    const cy = sourceNode.cy();
-    if (!cy) return;
-    
-    // Markiere den Quellknoten
-    sourceNode.addClass('edge-source');
-    
-    // Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu
-    cy.container().classList.add('edge-creation-mode');
-    
-    // Zeige Hinweis an
-    showUINotification('Wähle einen Zielknoten für die Verbindung', 'info');
-    
-    // Einmaliger Event-Listener für das Auswählen des Zielknotens
-    cy.once('tap', 'node', function(evt) {
-        const targetNode = evt.target;
-        
-        // Ignoriere, wenn es der gleiche Knoten ist
-        if (targetNode.id() === sourceNode.id()) {
-            showUINotification('Quell- und Zielknoten dürfen nicht identisch sein', 'warning');
-            finishEdgeCreation();
-            return;
-        }
-        
-        // Prüfe, ob bereits eine Kante existiert
-        const existingEdge = cy.edges(`[source="${sourceNode.id()}"][target="${targetNode.id()}"]`);
-        if (existingEdge.length > 0) {
-            showUINotification('Verbindung existiert bereits', 'warning');
-            finishEdgeCreation();
-            return;
-        }
-        
-        // Füge die neue Kante hinzu
             cy.add({
                 group: 'edges',
                 data: {
-                source: sourceNode.id(),
+                    source: parentNode.id(),
-                target: targetNode.id(),
+                    target: tempId,
-                strength: 0.5,
+                    strength: 0.5
-                conductionVelocity: Math.random() * 0.5 + 0.3,
-                latency: Math.random() * 100 + 50
                 }
             });
+        }
 
-        showUINotification('Verbindung wurde erstellt', 'success');
+        // Layout neu berechnen
-        finishEdgeCreation();
+        cy.layout(mindmapStyles.layout.base).run();
+
+        document.body.removeChild(dialog);
+        showUINotification('Neuer Knoten erstellt!', 'success');
     });
 
-    // Event-Listener für Abbruch durch Klick auf leeren Bereich
+    // Kategorie-Auswahl mit Farben verknüpfen
-    cy.once('tap', function(evt) {
+    document.getElementById('node-category').addEventListener('change', (e) => {
-        if (evt.target === cy) {
+        const category = e.target.value;
-            showUINotification('Kantenerstellung abgebrochen', 'info');
+        let color = '#9F7AEA'; // Standardfarbe
-            finishEdgeCreation();
+        
+        switch(category) {
+            case 'Philosophie':
+                color = '#9F7AEA'; // Lila
+                break;
+            case 'Wissenschaft':
+                color = '#60A5FA'; // Blau
+                break;
+            case 'Technologie':
+                color = '#10B981'; // Grün
+                break;
+            case 'Künste':
+                color = '#F59E0B'; // Orange
+                break;
+            case 'Psychologie':
+                color = '#EF4444'; // Rot
+                break;
         }
+        
+        document.getElementById('node-color').value = color;
+    });
+}
+
+// Funktion zum Bearbeiten eines Knotens
+function editNodeProperties(node) {
+    if (!node) return;
+    
+    const data = node.data();
+    
+    // Dialog erstellen
+    const dialog = document.createElement('div');
+    dialog.className = 'node-dialog';
+    dialog.style.position = 'absolute';
+    dialog.style.top = '50%';
+    dialog.style.left = '50%';
+    dialog.style.transform = 'translate(-50%, -50%)';
+    dialog.style.background = 'rgba(15, 23, 42, 0.95)';
+    dialog.style.padding = '1.5rem';
+    dialog.style.borderRadius = '0.75rem';
+    dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+    dialog.style.zIndex = '2000';
+    dialog.style.width = '400px';
+    dialog.style.maxWidth = '90vw';
+    dialog.style.backdropFilter = 'blur(8px)';
+    dialog.style.border = '1px solid rgba(255, 255, 255, 0.1)';
+
+    dialog.innerHTML = `
+        <h3 style="color: white; margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.75rem;">Knoten bearbeiten</h3>
+        <div style="margin-bottom: 1rem;">
+            <label style="display: block; color: white; margin-bottom: 0.5rem;">Name:</label>
+            <input id="node-name" type="text" value="${data.label || ''}" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
+        </div>
+        <div style="margin-bottom: 1rem;">
+            <label style="display: block; color: white; margin-bottom: 0.5rem;">Beschreibung:</label>
+            <textarea id="node-description" style="width: 100%; height: 100px; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">${data.description || ''}</textarea>
+        </div>
+        <div style="margin-bottom: 1rem;">
+            <label style="display: block; color: white; margin-bottom: 0.5rem;">Kategorie:</label>
+            <select id="node-category" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
+                <option value="">Keine Kategorie</option>
+                <option value="Philosophie" ${data.category === 'Philosophie' ? 'selected' : ''}>Philosophie</option>
+                <option value="Wissenschaft" ${data.category === 'Wissenschaft' ? 'selected' : ''}>Wissenschaft</option>
+                <option value="Technologie" ${data.category === 'Technologie' ? 'selected' : ''}>Technologie</option>
+                <option value="Künste" ${data.category === 'Künste' ? 'selected' : ''}>Künste</option>
+                <option value="Psychologie" ${data.category === 'Psychologie' ? 'selected' : ''}>Psychologie</option>
+            </select>
+        </div>
+        <div style="margin-bottom: 1.5rem;">
+            <label style="display: block; color: white; margin-bottom: 0.5rem;">Farbe:</label>
+            <input id="node-color" type="color" value="${data.color || data.color_code || '#9F7AEA'}" style="width: 100%; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem;">
+        </div>
+        <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
+            <button id="cancel-edit" style="padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem; cursor: pointer;">Abbrechen</button>
+            <button id="save-edit" style="padding: 0.5rem 1rem; background: rgba(59, 130, 246, 0.3); color: white; border: 1px solid rgba(59, 130, 246, 0.5); border-radius: 0.5rem; cursor: pointer;">Speichern</button>
+        </div>
+    `;
+
+    document.body.appendChild(dialog);
+
+    // Event-Listener
+    document.getElementById('cancel-edit').addEventListener('click', () => {
+        document.body.removeChild(dialog);
     });
 
-    function finishEdgeCreation() {
+    document.getElementById('save-edit').addEventListener('click', () => {
-        sourceNode.removeClass('edge-source');
+        const name = document.getElementById('node-name').value || 'Unbenannter Knoten';
-        cy.container().classList.remove('edge-creation-mode');
+        const description = document.getElementById('node-description').value || '';
-    }
+        const category = document.getElementById('node-category').value;
-}
+        const color = document.getElementById('node-color').value;
 
-// Funktion zum Aktivieren des Kantenerstellungsmodus
+        // Knoten aktualisieren
-function enableEdgeCreationMode(cy) {
+        node.data({
-    if (!cy) return;
+            label: name,
-    
+            description: description,
-    // Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu
+            category: category,
-    cy.container().classList.add('edge-creation-mode');
+            color: color
-    
-    // Zeige Hinweis an
-    showUINotification('Wähle einen Quellknoten für die Verbindung', 'info');
-    
-    // Einmaliger Event-Listener für das Auswählen des Quellknotens
-    cy.once('tap', 'node', function(evt) {
-        const sourceNode = evt.target;
-        startEdgeCreation(sourceNode);
         });
 
-    // Event-Listener für Abbruch durch Rechtsklick oder Escape-Taste
+        document.body.removeChild(dialog);
-    const cancelEdgeCreation = function() {
+        showUINotification('Knoten wurde aktualisiert!', 'success');
-        cy.container().classList.remove('edge-creation-mode');
+    });
-        cy.removeListener('tap');
-        showUINotification('Kantenerstellung abgebrochen', 'info');
-    };
 
-    cy.once('cxttap', cancelEdgeCreation);
+    // Kategorie-Auswahl mit Farben verknüpfen
-    document.addEventListener('keydown', function escKeyHandler(e) {
+    document.getElementById('node-category').addEventListener('change', (e) => {
-        if (e.key === 'Escape') {
+        const category = e.target.value;
-            cancelEdgeCreation();
+        let color = '#9F7AEA'; // Standardfarbe
-            document.removeEventListener('keydown', escKeyHandler);
+        
+        switch(category) {
+            case 'Philosophie':
+                color = '#9F7AEA'; // Lila
+                break;
+            case 'Wissenschaft':
+                color = '#60A5FA'; // Blau
+                break;
+            case 'Technologie':
+                color = '#10B981'; // Grün
+                break;
+            case 'Künste':
+                color = '#F59E0B'; // Orange
+                break;
+            case 'Psychologie':
+                color = '#EF4444'; // Rot
+                break;
         }
+        
+        document.getElementById('node-color').value = color;
     });
 }
 
@@ -1391,128 +1206,273 @@ function enableEdgeCreationMode(cy) {
 function deleteNode(node) {
     if (!node) return;
     
-    // Frage den Benutzer, ob er den Knoten wirklich löschen möchte
+    if (confirm(`Möchten Sie den Knoten "${node.data('label')}" wirklich löschen?`)) {
-    if (confirm(`Möchtest du den Knoten "${node.data('label')}" wirklich löschen?`)) {
+        // Alle verbundenen Kanten löschen
-        // Entferne den Knoten und alle zugehörigen Kanten
+        node.connectedEdges().remove();
+        // Knoten löschen
         node.remove();
-        showUINotification('Knoten wurde gelöscht', 'success');
+        showUINotification('Knoten wurde gelöscht!', 'success');
     }
 }
 
-// Funktion zum Löschen ausgewählter Elemente
+// Kontextmenü für Knoten anzeigen
-function deleteSelectedElements(cy) {
+function showNodeContextMenu(node, position) {
-    if (!cy) return;
+    // Entferne vorhandene Kontextmenüs
+    removeContextMenus();
     
-    const selectedElements = cy.elements(':selected');
+    const contextMenu = document.createElement('div');
-    if (selectedElements.length === 0) {
+    contextMenu.className = 'context-menu';
-        showUINotification('Keine Elemente ausgewählt', 'warning');
+    contextMenu.style.left = `${position.x}px`;
-        return;
+    contextMenu.style.top = `${position.y}px`;
+    
+    contextMenu.innerHTML = `
+        <div class="context-menu-item" data-action="edit">
+            <i class="fas fa-edit"></i> Bearbeiten
+        </div>
+        <div class="context-menu-item" data-action="add-child">
+            <i class="fas fa-plus"></i> Unterknoten hinzufügen
+        </div>
+        <div class="context-menu-item" data-action="delete">
+            <i class="fas fa-trash-alt"></i> Löschen
+        </div>
+    `;
+    
+    document.body.appendChild(contextMenu);
+    
+    // Event-Listener für Menüpunkte
+    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+        item.addEventListener('click', function() {
+            const action = this.getAttribute('data-action');
+            
+            switch (action) {
+                case 'edit':
+                    editNodeProperties(node);
+                    break;
+                case 'add-child':
+                    addNewNode(window.cy, node);
+                    break;
+                case 'delete':
+                    deleteNode(node);
+                    break;
             }
             
-    // Zähle die ausgewählten Knoten und Kanten
+            removeContextMenus();
-    const selectedNodes = selectedElements.filter('node');
-    const selectedEdges = selectedElements.filter('edge');
-    
-    let confirmMessage = 'Möchtest du die ausgewählten Elemente wirklich löschen?';
-    if (selectedNodes.length > 0 && selectedEdges.length > 0) {
-        confirmMessage = `Möchtest du ${selectedNodes.length} Knoten und ${selectedEdges.length} Verbindungen wirklich löschen?`;
-    } else if (selectedNodes.length > 0) {
-        confirmMessage = `Möchtest du ${selectedNodes.length} Knoten wirklich löschen?`;
-    } else if (selectedEdges.length > 0) {
-        confirmMessage = `Möchtest du ${selectedEdges.length} Verbindungen wirklich löschen?`;
-    }
-    
-    // Frage den Benutzer, ob er die ausgewählten Elemente wirklich löschen möchte
-    if (confirm(confirmMessage)) {
-        // Entferne die ausgewählten Elemente
-        selectedElements.remove();
-        
-        let successMessage = 'Elemente wurden gelöscht';
-        if (selectedNodes.length > 0 && selectedEdges.length > 0) {
-            successMessage = `${selectedNodes.length} Knoten und ${selectedEdges.length} Verbindungen wurden gelöscht`;
-        } else if (selectedNodes.length > 0) {
-            successMessage = `${selectedNodes.length} Knoten wurden gelöscht`;
-        } else if (selectedEdges.length > 0) {
-            successMessage = `${selectedEdges.length} Verbindungen wurden gelöscht`;
-        }
-        
-        showUINotification(successMessage, 'success');
-    }
-}
-
-// Funktion zum Speichern der Änderungen an der Mindmap
-function saveMindmapChanges(cy, nodeId) {
-    if (!cy) return;
-    
-    // Sammle die Daten aller Knoten und Kanten
-    const nodes = [];
-    const edges = [];
-    
-    cy.nodes().forEach(node => {
-        const data = node.data();
-        const position = node.position();
-        
-        nodes.push({
-            id: data.id,
-            name: data.label,
-            category: data.category,
-            description: data.description,
-            has_children: data.hasChildren,
-            color_code: data.color,
-            position_x: position.x,
-            position_y: position.y
         });
     });
     
-    cy.edges().forEach(edge => {
+    // Event-Listener zum Schließen des Menüs
-        const data = edge.data();
+    document.addEventListener('click', function closeMenu(e) {
-        
+        if (!contextMenu.contains(e.target)) {
-        edges.push({
+            removeContextMenus();
-            source: data.source,
+            document.removeEventListener('click', closeMenu);
-            target: data.target,
+        }
-            strength: data.strength
-        });
     });
+}
 
-    // Erstelle die Daten für den API-Aufruf
+// Funktion zum Hinzufügen eines Knotens an einer bestimmten Position (Rechtsklick)
-    const saveData = {
+function showAddNodeMenu(position) {
-        nodes: nodes,
+    // Entferne vorhandene Kontextmenüs
-        edges: edges,
+    removeContextMenus();
-        parent_id: nodeId || null
+    
+    const contextMenu = document.createElement('div');
+    contextMenu.className = 'context-menu';
+    contextMenu.style.left = `${position.x}px`;
+    contextMenu.style.top = `${position.y}px`;
+    
+    contextMenu.innerHTML = `
+        <div class="context-menu-item" data-action="add-node">
+            <i class="fas fa-plus-circle"></i> Knoten hinzufügen
+        </div>
+    `;
+    
+    document.body.appendChild(contextMenu);
+    
+    // Event-Listener für Menüpunkte
+    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+        item.addEventListener('click', function() {
+            const action = this.getAttribute('data-action');
+            
+            if (action === 'add-node') {
+                // Position im Canvas ermitteln
+                const containerPos = window.cy.container().getBoundingClientRect();
+                const cyPos = {
+                    x: position.x - containerPos.left,
+                    y: position.y - containerPos.top
                 };
                 
-    console.log('Speichere Mindmap-Änderungen:', saveData);
+                // Temporäre ID erstellen
+                const tempId = 'new-' + Date.now();
                 
-    // Zeige eine Speicherbenachrichtigung an
+                // Knoten hinzufügen (vereinfachte Version, zeigt direkt den Dialog an)
-    showUINotification('Speichere Mindmap-Änderungen...', 'info');
+                addNewNode(window.cy);
+            }
             
-    // Sende die Daten an den Server
+            removeContextMenus();
-    fetch('/api/mindmap/save', {
+        });
+    });
+    
+    // Event-Listener zum Schließen des Menüs
+    document.addEventListener('click', function closeMenu(e) {
+        if (!contextMenu.contains(e.target)) {
+            removeContextMenus();
+            document.removeEventListener('click', closeMenu);
+        }
+    });
+}
+
+// Hilfsfunktion zum Entfernen aller Kontextmenüs
+function removeContextMenus() {
+    document.querySelectorAll('.context-menu').forEach(menu => {
+        menu.remove();
+    });
+}
+
+// Funktion zum Aktivieren des Kanten-Erstellungsmodus
+function enableEdgeCreationMode(cy) {
+    // Status anzeigen
+    showUINotification('Bitte wählen Sie den Startknoten für die Verbindung', 'info');
+    
+    // Cursor-Stil ändern
+    document.body.style.cursor = 'crosshair';
+    cy.container().classList.add('edge-creation-mode');
+    
+    // Event-Handler für die Knotenauswahl
+    const nodeSelectHandler = function(event) {
+        // Ersten Knoten auswählen
+        const sourceNode = event.target;
+        
+        // Status aktualisieren
+        showUINotification('Wählen Sie jetzt den Zielknoten für die Verbindung', 'info');
+        
+        // Zweiten Knoten abwarten
+        const secondNodeHandler = function(event) {
+            const targetNode = event.target;
+            
+            // Prüfen, ob der Zielknoten ein Knoten ist und nicht derselbe wie der Startknoten
+            if (targetNode.isNode() && targetNode.id() !== sourceNode.id()) {
+                // Kante erstellen
+                cy.add({
+                    group: 'edges',
+                    data: {
+                        source: sourceNode.id(),
+                        target: targetNode.id(),
+                        strength: 0.5
+                    }
+                });
+                
+                // Erfolgsmeldung
+                showUINotification('Verbindung erstellt!', 'success');
+                
+                // Event-Handler entfernen
+                cy.off('tap', 'node', secondNodeHandler);
+                
+                // Modus beenden
+                finishEdgeCreation();
+            }
+        };
+        
+        // Event-Handler für den zweiten Knoten
+        cy.on('tap', 'node', secondNodeHandler);
+        
+        // Original-Handler entfernen
+        cy.off('tap', 'node', nodeSelectHandler);
+        
+        // ESC-Taste zum Abbrechen
+        document.addEventListener('keydown', function escKeyHandler(e) {
+            if (e.key === 'Escape') {
+                cy.off('tap', 'node', secondNodeHandler);
+                finishEdgeCreation();
+                document.removeEventListener('keydown', escKeyHandler);
+                showUINotification('Verbindungserstellung abgebrochen', 'info');
+            }
+        });
+    };
+    
+    // Event-Handler für den ersten Knoten
+    cy.on('tap', 'node', nodeSelectHandler);
+    
+    // Funktion zum Beenden des Kantenerstellungsmodus
+    function finishEdgeCreation() {
+        document.body.style.cursor = '';
+        cy.container().classList.remove('edge-creation-mode');
+    }
+    
+    // Abbrechen durch Klick außerhalb
+    cy.on('tap', function(event) {
+        if (event.target === cy) {
+            cy.off('tap', 'node', nodeSelectHandler);
+            finishEdgeCreation();
+            showUINotification('Verbindungserstellung abgebrochen', 'info');
+        }
+    });
+}
+
+// Funktion zum Speichern von Mindmap-Änderungen
+async function saveMindmapChanges(cy) {
+    try {
+        showUINotification('Speichere Änderungen...', 'info');
+        
+        // Alle Knoten und Kanten sammeln
+        const nodes = cy.nodes().map(node => {
+            const data = node.data();
+            return {
+                id: data.id,
+                name: data.label,
+                description: data.description || '',
+                color_code: data.color || data.color_code,
+                category: data.category || null,
+                icon: data.icon || 'fa-solid fa-circle',
+                position_x: node.position().x,
+                position_y: node.position().y
+            };
+        });
+        
+        const edges = cy.edges().map(edge => {
+            return {
+                source: edge.source().id(),
+                target: edge.target().id(),
+                strength: edge.data('strength') || 0.5
+            };
+        });
+        
+        // Daten an API senden
+        const response = await fetch('/api/mindmap/save', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
-        body: JSON.stringify(saveData)
+            body: JSON.stringify({
+                nodes: nodes,
+                edges: edges
             })
-    .then(response => {
-        if (!response.ok) {
-            return response.json().then(data => {
-                throw new Error(data.error || `Fehler ${response.status}: ${response.statusText}`);
         });
+        
+        const result = await response.json();
+        
+        if (!response.ok || !result.success) {
+            const errorMessage = result.error || 'Mindmap konnte nicht gespeichert werden';
+            showUINotification(errorMessage, 'error');
+            throw new Error(errorMessage);
         }
-        return response.json();
+        
-    })
+        // Wenn temporäre IDs aktualisiert wurden, Mapping anwenden
-    .then(data => {
+        if (result.node_mapping) {
-        console.log('Speichern erfolgreich:', data);
+            // Die echten IDs hinzufügen
-        showUINotification('Mindmap wurde erfolgreich gespeichert', 'success');
+            for (const [tempId, realId] of Object.entries(result.node_mapping)) {
-    })
+                const node = cy.getElementById(tempId);
-    .catch(error => {
+                if (node.length > 0) {
+                    node.data('id', realId);
+                }
+            }
+        }
+        
+        showUINotification('Mindmap wurde erfolgreich gespeichert!', 'success');
+        return result;
+    } catch (error) {
         console.error('Fehler beim Speichern der Mindmap:', error);
-        showUINotification({
+        showUINotification('Fehler beim Speichern: ' + error.message, 'error');
-            error: 'Fehler beim Speichern der Mindmap',
+        throw error;
-            details: error.message
+    }
-        }, 'error');
-    });
 }
 
 // Füge CSS-Stile für den Bearbeitungsmodus hinzu

templates/mindmap.html

@@ -31,6 +31,9 @@
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
 
   .mindmap-title {
@@ -43,6 +46,47 @@
     -webkit-text-fill-color: transparent;
   }
 
+  /* Aktionsmenü im Header */
+  .mindmap-actions {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  .action-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.5rem;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .action-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .action-button.primary {
+    background: rgba(139, 92, 246, 0.3);
+  }
+
+  .action-button.primary:hover {
+    background: rgba(139, 92, 246, 0.5);
+  }
+
+  .action-button.danger {
+    background: rgba(220, 38, 38, 0.3);
+  }
+
+  .action-button.danger:hover {
+    background: rgba(220, 38, 38, 0.5);
+  }
+
   /* Kontrollpanel */
   .control-panel {
     position: absolute;
@@ -79,6 +123,85 @@
     margin-right: 0.75rem;
   }
 
+  /* CRUD Panel */
+  .crud-panel {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(15, 23, 42, 0.9);
+    border-radius: 1rem;
+    padding: 1rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 10;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    gap: 0.75rem;
+    backdrop-filter: blur(8px);
+  }
+
+  .crud-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.75rem;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .crud-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-5px);
+  }
+
+  .crud-button i {
+    font-size: 1.25rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .crud-button span {
+    font-size: 0.7rem;
+    text-align: center;
+  }
+
+  .crud-button.create {
+    background: rgba(16, 185, 129, 0.3);
+  }
+
+  .crud-button.create:hover {
+    background: rgba(16, 185, 129, 0.5);
+  }
+
+  .crud-button.edit {
+    background: rgba(245, 158, 11, 0.3);
+  }
+
+  .crud-button.edit:hover {
+    background: rgba(245, 158, 11, 0.5);
+  }
+
+  .crud-button.delete {
+    background: rgba(220, 38, 38, 0.3);
+  }
+
+  .crud-button.delete:hover {
+    background: rgba(220, 38, 38, 0.5);
+  }
+
+  .crud-button.save {
+    background: rgba(59, 130, 246, 0.3);
+  }
+
+  .crud-button.save:hover {
+    background: rgba(59, 130, 246, 0.5);
+  }
+
   /* Info-Panel */
   .info-panel {
     position: absolute;
@@ -194,6 +317,53 @@
     text-align: center;
     max-width: 80%;
   }
+  
+  /* Bearbeitungsmodus-Hinweis */
+  .edit-mode-indicator {
+    position: fixed;
+    bottom: 1rem;
+    left: 1rem;
+    background: rgba(245, 158, 11, 0.8);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.9rem;
+    z-index: 1000;
+    display: none;
+  }
+  
+  .edit-mode-indicator.active {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  /* Kontext-Menü */
+  .context-menu {
+    position: absolute;
+    background: rgba(30, 41, 59, 0.95);
+    border-radius: 8px;
+    padding: 8px 0;
+    min-width: 160px;
+    z-index: 2000;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .context-menu-item {
+    padding: 8px 16px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .context-menu-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
 </style>
 {% endblock %}
 
@@ -202,6 +372,22 @@
   <!-- Header -->
   <div class="mindmap-header">
     <h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
+    
+    <!-- Aktionsmenü -->
+    <div class="mindmap-actions">
+      <button id="toggleEditMode" class="action-button primary">
+        <i class="fas fa-edit"></i>
+        <span>Bearbeiten</span>
+      </button>
+      <button id="saveChanges" class="action-button" style="display: none;">
+        <i class="fas fa-save"></i>
+        <span>Speichern</span>
+      </button>
+      <button id="cancelEdit" class="action-button danger" style="display: none;">
+        <i class="fas fa-times"></i>
+        <span>Abbrechen</span>
+      </button>
+    </div>
   </div>
 
   <!-- Ladeanzeige -->
@@ -210,6 +396,12 @@
   <!-- Status-Meldung -->
   <div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</div>
   
+  <!-- Bearbeitungsmodus-Hinweis -->
+  <div id="editModeIndicator" class="edit-mode-indicator">
+    <i class="fas fa-pencil-alt"></i>
+    <span>Bearbeitungsmodus</span>
+  </div>
+
   <!-- Hauptvisualisierung -->
   <div id="cy"></div>
 
@@ -233,6 +425,30 @@
     </button>
   </div>
 
+  <!-- CRUD Buttons (anfänglich ausgeblendet) -->
+  <div id="crudPanel" class="crud-panel" style="display: none;">
+    <button id="createNode" class="crud-button create">
+      <i class="fas fa-plus-circle"></i>
+      <span>Knoten erstellen</span>
+    </button>
+    <button id="createEdge" class="crud-button create">
+      <i class="fas fa-link"></i>
+      <span>Verbindung</span>
+    </button>
+    <button id="editNode" class="crud-button edit" disabled>
+      <i class="fas fa-edit"></i>
+      <span>Bearbeiten</span>
+    </button>
+    <button id="deleteElement" class="crud-button delete" disabled>
+      <i class="fas fa-trash-alt"></i>
+      <span>Löschen</span>
+    </button>
+    <button id="saveMindmap" class="crud-button save">
+      <i class="fas fa-save"></i>
+      <span>Speichern</span>
+    </button>
+  </div>
+
   <!-- Info-Panel -->
   <div id="infoPanel" class="info-panel">
     <h3 class="info-title">Knotendetails</h3>
@@ -281,6 +497,23 @@ document.addEventListener('DOMContentLoaded', function() {
   const cyContainer = document.getElementById('cy');
   const loader = document.getElementById('loader');
   const statusMessage = document.getElementById('statusMessage');
+  const crudPanel = document.getElementById('crudPanel');
+  const editModeIndicator = document.getElementById('editModeIndicator');
+  
+  // CRUD Buttons
+  const createNodeBtn = document.getElementById('createNode');
+  const createEdgeBtn = document.getElementById('createEdge');
+  const editNodeBtn = document.getElementById('editNode');
+  const deleteElementBtn = document.getElementById('deleteElement');
+  const saveMindmapBtn = document.getElementById('saveMindmap');
+  
+  // Header Action Buttons
+  const toggleEditModeBtn = document.getElementById('toggleEditMode');
+  const saveChangesBtn = document.getElementById('saveChanges');
+  const cancelEditBtn = document.getElementById('cancelEdit');
+  
+  let isEditMode = false;
+  let selectedElement = null;
   
   if (cyContainer) {
     console.log('Container gefunden:', cyContainer);
@@ -299,6 +532,56 @@ document.addEventListener('DOMContentLoaded', function() {
         // Erfolg: Loader und Statusmeldung ausblenden
         loader.style.display = 'none';
         statusMessage.style.display = 'none';
+        
+        // Event-Listener für Knotenauswahl
+        window.cy.on('select', 'node', function(event) {
+          selectedElement = event.target;
+          editNodeBtn.disabled = false;
+          deleteElementBtn.disabled = false;
+          
+          // Knotendetails im Info-Panel anzeigen
+          showNodeInfo(selectedElement);
+        });
+        
+        window.cy.on('select', 'edge', function(event) {
+          selectedElement = event.target;
+          editNodeBtn.disabled = true;
+          deleteElementBtn.disabled = false;
+        });
+        
+        window.cy.on('unselect', function() {
+          selectedElement = null;
+          editNodeBtn.disabled = true;
+          deleteElementBtn.disabled = true;
+          
+          // Info-Panel ausblenden
+          hideNodeInfo();
+        });
+        
+        // Rechtsklick-Menü
+        window.cy.on('cxttap', 'node', function(event) {
+          // Kontextmenü für Knoten anzeigen
+          if (isEditMode) {
+            const node = event.target;
+            const position = event.renderedPosition;
+            showNodeContextMenu(node, {
+              x: event.originalEvent.clientX,
+              y: event.originalEvent.clientY
+            });
+            event.preventDefault();
+          }
+        });
+        
+        window.cy.on('cxttap', function(event) {
+          // Kontextmenü zum Hinzufügen eines Knotens
+          if (isEditMode && event.target === window.cy) {
+            showAddNodeMenu({
+              x: event.originalEvent.clientX,
+              y: event.originalEvent.clientY
+            });
+            event.preventDefault();
+          }
+        });
       }).catch(error => {
         // Fehler: Fehlermeldung anzeigen
         console.error('Mindmap-Initialisierung fehlgeschlagen', error);
@@ -318,6 +601,96 @@ document.addEventListener('DOMContentLoaded', function() {
     console.error('Container #cy nicht gefunden');
   }
   
+  // Bearbeitungsmodus umschalten
+  toggleEditModeBtn.addEventListener('click', function() {
+    isEditMode = !isEditMode;
+    
+    if (isEditMode) {
+      // Bearbeitungsmodus aktivieren
+      crudPanel.style.display = 'flex';
+      editModeIndicator.classList.add('active');
+      toggleEditModeBtn.style.display = 'none';
+      saveChangesBtn.style.display = 'inline-flex';
+      cancelEditBtn.style.display = 'inline-flex';
+      window.cy.container().classList.add('editing-mode');
+      
+      // Aktiviere Knotenbewegung (dragging)
+      window.cy.nodes().unlock();
+    } else {
+      // Bearbeitungsmodus deaktivieren
+      crudPanel.style.display = 'none';
+      editModeIndicator.classList.remove('active');
+      toggleEditModeBtn.style.display = 'inline-flex';
+      saveChangesBtn.style.display = 'none';
+      cancelEditBtn.style.display = 'none';
+      window.cy.container().classList.remove('editing-mode');
+      
+      // Deaktiviere Knotenbewegung
+      window.cy.nodes().lock();
+    }
+  });
+  
+  // Änderungen speichern
+  saveChangesBtn.addEventListener('click', function() {
+    saveMindmapChanges(window.cy);
+  });
+  
+  // Bearbeitungsmodus abbrechen
+  cancelEditBtn.addEventListener('click', function() {
+    if (confirm('Möchten Sie den Bearbeitungsmodus wirklich verlassen? Nicht gespeicherte Änderungen gehen verloren.')) {
+      isEditMode = false;
+      crudPanel.style.display = 'none';
+      editModeIndicator.classList.remove('active');
+      toggleEditModeBtn.style.display = 'inline-flex';
+      saveChangesBtn.style.display = 'none';
+      cancelEditBtn.style.display = 'none';
+      window.cy.container().classList.remove('editing-mode');
+      
+      // Neuinitialisierung der Mindmap
+      initializeMindmap().then(() => {
+        loader.style.display = 'none';
+        statusMessage.style.display = 'none';
+      });
+    }
+  });
+  
+  // CRUD-Funktionen
+  createNodeBtn.addEventListener('click', function() {
+    if (isEditMode) {
+      addNewNode(window.cy);
+    }
+  });
+  
+  createEdgeBtn.addEventListener('click', function() {
+    if (isEditMode) {
+      enableEdgeCreationMode(window.cy);
+    }
+  });
+  
+  editNodeBtn.addEventListener('click', function() {
+    if (isEditMode && selectedElement && selectedElement.isNode()) {
+      editNodeProperties(selectedElement);
+    }
+  });
+  
+  deleteElementBtn.addEventListener('click', function() {
+    if (isEditMode && selectedElement) {
+      if (selectedElement.isNode()) {
+        deleteNode(selectedElement);
+      } else if (selectedElement.isEdge()) {
+        if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
+          selectedElement.remove();
+        }
+      }
+    }
+  });
+  
+  saveMindmapBtn.addEventListener('click', function() {
+    if (isEditMode) {
+      saveMindmapChanges(window.cy);
+    }
+  });
+  
   // Zoom-Funktionen
   document.getElementById('zoomIn').addEventListener('click', function() {
     if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
@@ -335,6 +708,36 @@ document.addEventListener('DOMContentLoaded', function() {
     const legend = document.getElementById('categoryLegend');
     legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
   });
+  
+  // Funktionen für Knoteninfo-Panel
+  function showNodeInfo(node) {
+    if (!node || !node.isNode()) return;
+    
+    const infoPanel = document.getElementById('infoPanel');
+    const infoTitle = infoPanel.querySelector('.info-title');
+    const infoContent = infoPanel.querySelector('.info-content');
+    
+    const data = node.data();
+    
+    infoTitle.textContent = data.label || 'Knotendetails';
+    
+    let contentHTML = `
+      <p><strong>Kategorie:</strong> ${data.category || 'Nicht kategorisiert'}</p>
+      <p><strong>Beschreibung:</strong> ${data.description || 'Keine Beschreibung verfügbar'}</p>
+    `;
+    
+    if (data.hasChildren) {
+      contentHTML += `<p><i class="fas fa-sitemap"></i> Hat Unterknoten</p>`;
+    }
+    
+    infoContent.innerHTML = contentHTML;
+    infoPanel.classList.add('visible');
+  }
+  
+  function hideNodeInfo() {
+    const infoPanel = document.getElementById('infoPanel');
+    infoPanel.classList.remove('visible');
+  }
 });
 </script>
 {% endblock %}