chore: Änderungen commited

logs/app.log

@@ -428,3 +428,15 @@ werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on
 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]
+2025-05-14 12:45:09,092 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:11,512 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:11,512 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:15,327 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:17,576 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:17,576 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:22,725 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:25,195 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:25,195 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:29,299 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:31,561 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 12:45:31,561 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]

static/css/mindmap.css

@@ -251,209 +251,3 @@
     background: rgba(30, 41, 59, 0.9);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
-
-/* Mindmap Styles 
-   Stylesheets für die interaktive Mindmap-Funktionalität
-   Umfasst Bearbeitungsmodus, CRUD-Funktionen und UI-Elemente
-*/
-
-/* Bearbeitungsmodus-Indikator */
-#cy.editing-mode {
-  background: rgba(245, 158, 11, 0.1) !important;
-}
-
-/* Edge-Erstellungsmodus */
-#cy.edge-creation-mode {
-  cursor: crosshair !important;
-}
-
-/* Aktivierter Knoten */
-#cy .edge-source {
-  border-color: #f59e0b !important;
-  border-width: 4px !important;
-  border-style: dashed !important;
-}
-
-/* Node-Dialog Overlay */
-.node-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(3px);
-  z-index: 1900;
-}
-
-/* Kontext-Menü */
-.context-menu {
-  position: absolute;
-  z-index: 2000;
-  background: rgba(15, 23, 42, 0.95);
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  min-width: 180px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  overflow: hidden;
-}
-
-.context-menu-header {
-  padding: 0.5rem 1rem;
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 0.8rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.context-menu-item {
-  padding: 0.5rem 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: rgba(255, 255, 255, 0.9);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.context-menu-item:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-/* Benachrichtigungen */
-#notification-container {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  z-index: 2000;
-  max-width: 400px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.notification {
-  padding: 1rem;
-  border-radius: 0.5rem;
-  background: rgba(15, 23, 42, 0.95);
-  color: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  transform: translateX(120%);
-  transition: transform 0.3s ease-out;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.notification i {
-  font-size: 1.25rem;
-}
-
-.notification-success {
-  background: rgba(16, 185, 129, 0.9);
-}
-
-.notification-error {
-  background: rgba(239, 68, 68, 0.9);
-}
-
-.notification-warning {
-  background: rgba(245, 158, 11, 0.9);
-}
-
-.notification-info {
-  background: rgba(59, 130, 246, 0.9);
-}
-
-/* CRUD-Aktionen Styles */
-.crud-panel {
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.crud-panel.hidden {
-  opacity: 0;
-  transform: translateY(50px);
-  pointer-events: none;
-}
-
-/* Tooltip für CRUD-Buttons */
-.crud-button::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  background: rgba(15, 23, 42, 0.95);
-  padding: 0.3rem 0.6rem;
-  border-radius: 0.4rem;
-  font-size: 0.7rem;
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  pointer-events: none;
-  margin-bottom: 5px;
-}
-
-.crud-button:hover::after {
-  opacity: 1;
-}
-
-/* Visueller Indikator für den Bearbeitungsmodus */
-.edit-mode-indicator {
-  animation: pulse-warning 2s infinite;
-  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
-}
-
-@keyframes pulse-warning {
-  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
-  70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
-}
-
-/* Verbesserter Info-Panel */
-.info-panel {
-  transition: all 0.3s ease;
-}
-
-.info-title {
-  position: relative;
-}
-
-.info-title::after {
-  content: '';
-  position: absolute;
-  bottom: -5px;
-  left: 0;
-  width: 50px;
-  height: 3px;
-  background: linear-gradient(90deg, #60a5fa, #8b5cf6);
-  border-radius: 2px;
-}
-
-.info-content {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-/* Anpassungen für kleinere Bildschirme */
-@media (max-width: 768px) {
-  .crud-panel {
-    bottom: 1rem;
-    left: 1rem;
-    right: 1rem;
-    transform: none;
-    justify-content: space-around;
-  }
-  
-  .info-panel {
-    left: 1rem;
-    width: calc(100% - 2rem);
-    max-width: none;
-  }
-  
-  .control-panel {
-    right: 1rem;
-  }
-}

static/js/update_mindmap.js

@@ -968,279 +968,194 @@ function handleEditingAction(action, nodeId) {
 }
 
 // Funktion zum Hinzufügen eines neuen Knotens
-function addNewNode(cy, parentNode = null) {
+function addNewNode(cy) {
-    // Dialog erstellen
+    // Zentriere den neuen Knoten im sichtbaren Bereich
-    const dialog = document.createElement('div');
+    const extent = cy.extent();
-    dialog.className = 'node-dialog';
+    const centerX = (extent.x1 + extent.x2) / 2;
-    dialog.style.position = 'absolute';
+    const centerY = (extent.y1 + extent.y2) / 2;
-    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 = `
+    // Generiere eine eindeutige ID
-        <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>
+    const newId = 'new-node-' + Date.now();
-        <div style="margin-bottom: 1rem;">
-            <label style="display: block; color: white; margin-bottom: 0.5rem;">Name:</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;">
-        </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;"></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">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;">
-            <label style="display: block; color: white; margin-bottom: 0.5rem;">Farbe:</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;">
-        </div>
-        <div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
-            <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>
-            <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>
-        </div>
-    `;
     
-    document.body.appendChild(dialog);
+    // Füge den neuen Knoten hinzu
-
+    cy.add({
-    // Event-Listener
-    document.getElementById('cancel-node').addEventListener('click', () => {
-        document.body.removeChild(dialog);
-    });
-
-    document.getElementById('create-node').addEventListener('click', () => {
-        const name = document.getElementById('node-name').value || 'Neuer Knoten';
-        const description = document.getElementById('node-description').value || '';
-        const category = document.getElementById('node-category').value;
-        const color = document.getElementById('node-color').value;
-
-        // Temporäre ID erstellen (wird später durch die echte ID ersetzt)
-        const tempId = 'new-' + Date.now();
-        
-        // Knoten zur Visualisierung hinzufügen
-        const newNode = cy.add({
         group: 'nodes',
         data: {
-                id: tempId,
+            id: newId,
-                label: name,
+            label: 'Neuer Knoten',
-                description: description,
+            category: 'Wissenschaft',
-                category: category,
+            description: 'Beschreibung hinzufügen',
-                color: color,
+            hasChildren: false,
-                icon: 'fa-solid fa-circle'
+            expanded: false,
+            color: mindmapConfig.categories['Wissenschaft'].color,
+            fontColor: '#ffffff',
+            fontSize: 16,
+            neuronSize: 8,
+            neuronActivity: 0.8
         },
-            position: {
+        position: { x: centerX, y: centerY }
-                x: cy.width() / 2 + (Math.random() * 100 - 50),
-                y: cy.height() / 2 + (Math.random() * 100 - 50)
-            }
     });
     
-        // Wenn ein Elternknoten angegeben ist, eine Verbindung erstellen
+    // Wähle den neuen Knoten aus, um ihn zu bearbeiten
-        if (parentNode) {
+    const newNode = cy.getElementById(newId);
-            cy.add({
+    newNode.select();
-                group: 'edges',
-                data: {
-                    source: parentNode.id(),
-                    target: tempId,
-                    strength: 0.5
-                }
-            });
-        }
     
-        // Layout neu berechnen
+    // Öffne den Bearbeitungsdialog für den neuen Knoten
-        cy.layout(mindmapStyles.layout.base).run();
+    setTimeout(() => {
-
+        editNodeProperties(newNode);
-        document.body.removeChild(dialog);
+    }, 300);
-        showUINotification('Neuer Knoten erstellt!', 'success');
-    });
-
-    // Kategorie-Auswahl mit Farben verknüpfen
-    document.getElementById('node-category').addEventListener('change', (e) => {
-        const category = e.target.value;
-        let color = '#9F7AEA'; // Standardfarbe
-        
-        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
+// 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';
+    
+    // Hole die aktuellen Daten des Knotens
     const data = node.data();
     
-    // Dialog erstellen
+    // Generiere die Kategorie-Optionen
-    const dialog = document.createElement('div');
+    let categoryOptions = '';
-    dialog.className = 'node-dialog';
+    for (const category in mindmapConfig.categories) {
-    dialog.style.position = 'absolute';
+        categoryOptions += `<option value="${category}" ${data.category === category ? 'selected' : ''}>${category}</option>`;
-    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)';
     
+    // Erstelle das Formular
     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>
+        <h3>Knoten bearbeiten</h3>
-        <div style="margin-bottom: 1rem;">
+        <form id="node-edit-form">
-            <label style="display: block; color: white; margin-bottom: 0.5rem;">Name:</label>
+            <div class="form-group">
-            <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;">
+                <label for="node-label">Bezeichnung</label>
+                <input type="text" id="node-label" value="${data.label || ''}" placeholder="Knotenbezeichnung">
             </div>
-        <div style="margin-bottom: 1rem;">
+            
-            <label style="display: block; color: white; margin-bottom: 0.5rem;">Beschreibung:</label>
+            <div class="form-group">
-            <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>
+                <label for="node-category">Kategorie</label>
-        </div>
+                <select id="node-category">
-        <div style="margin-bottom: 1rem;">
+                    ${categoryOptions}
-            <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>
+            <div class="form-group">
-            <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;">
+                <label for="node-description">Beschreibung</label>
+                <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;">
+            
-            <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>
+            <div class="form-group">
-            <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>
+                <label for="node-has-children">Hat Unterthemen</label>
+                <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
+    // Event-Listener für den Abbrechen-Button
-    document.getElementById('cancel-edit').addEventListener('click', () => {
+    dialog.querySelector('button.cancel').addEventListener('click', function() {
         document.body.removeChild(dialog);
+        document.body.removeChild(backdrop);
     });
     
-    document.getElementById('save-edit').addEventListener('click', () => {
+    // Event-Listener für den Modal-Hintergrund
-        const name = document.getElementById('node-name').value || 'Unbenannter Knoten';
+    backdrop.addEventListener('click', function() {
-        const description = document.getElementById('node-description').value || '';
+        document.body.removeChild(dialog);
+        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 color = document.getElementById('node-color').value;
+        const description = document.getElementById('node-description').value;
+        const hasChildren = document.getElementById('node-has-children').value === 'true';
         
-        // Knoten aktualisieren
+        // Bestimme die Farbe basierend auf der Kategorie
+        const color = mindmapConfig.categories[category]?.color || data.color || '#60a5fa';
+        
+        // Aktualisiere die Daten des Knotens
         node.data({
-            label: name,
+            ...data,
-            description: description,
+            label,
-            category: category,
+            category,
-            color: color
+            description,
+            hasChildren,
+            color
         });
         
+        // Schließe den Dialog
         document.body.removeChild(dialog);
-        showUINotification('Knoten wurde aktualisiert!', 'success');
+        document.body.removeChild(backdrop);
-    });
         
-    // Kategorie-Auswahl mit Farben verknüpfen
+        // Benachrichtigung anzeigen
-    document.getElementById('node-category').addEventListener('change', (e) => {
+        showUINotification('Knoten wurde aktualisiert', 'success');
-        const category = e.target.value;
-        let color = '#9F7AEA'; // Standardfarbe
-        
-        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 Löschen eines Knotens
+// Funktion zum Anzeigen des Kontext-Menüs für einen Knoten
-function deleteNode(node) {
+function showNodeContextMenu(node, position) {
     if (!node) return;
     
-    if (confirm(`Möchten Sie den Knoten "${node.data('label')}" wirklich löschen?`)) {
+    // Entferne existierende Kontext-Menüs
-        // Alle verbundenen Kanten löschen
+    const existingMenu = document.querySelector('.context-menu');
-        node.connectedEdges().remove();
+    if (existingMenu) {
-        // Knoten löschen
+        existingMenu.parentNode.removeChild(existingMenu);
-        node.remove();
-        showUINotification('Knoten wurde gelöscht!', 'success');
     }
-}
     
-// Kontextmenü für Knoten anzeigen
+    // Erstelle das Kontext-Menü
-function showNodeContextMenu(node, position) {
+    const menu = document.createElement('div');
-    // Entferne vorhandene Kontextmenüs
+    menu.className = 'context-menu';
-    removeContextMenus();
+    menu.style.left = `${position.x}px`;
+    menu.style.top = `${position.y}px`;
     
-    const contextMenu = document.createElement('div');
+    // Menü-Einträge
-    contextMenu.className = 'context-menu';
+    menu.innerHTML = `
-    contextMenu.style.left = `${position.x}px`;
-    contextMenu.style.top = `${position.y}px`;
-    
-    contextMenu.innerHTML = `
         <div class="context-menu-item" data-action="edit">
-            <i class="fas fa-edit"></i> Bearbeiten
+            <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="add-child">
+        <div class="context-menu-item" data-action="connect">
-            <i class="fas fa-plus"></i> Unterknoten hinzufügen
+            <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">
-            <i class="fas fa-trash-alt"></i> Löschen
+            <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(contextMenu);
+    document.body.appendChild(menu);
     
-    // Event-Listener für Menüpunkte
+    // Event-Listener für Menü-Einträge
-    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+    menu.querySelectorAll('.context-menu-item').forEach(item => {
         item.addEventListener('click', function() {
             const action = this.getAttribute('data-action');
             
@@ -1248,231 +1163,356 @@ function showNodeContextMenu(node, position) {
                 case 'edit':
                     editNodeProperties(node);
                     break;
-                case 'add-child':
+                case 'connect':
-                    addNewNode(window.cy, node);
+                    startEdgeCreation(node);
                     break;
                 case 'delete':
                     deleteNode(node);
                     break;
             }
             
-            removeContextMenus();
+            // Entferne das Menü
+            document.body.removeChild(menu);
         });
     });
     
-    // Event-Listener zum Schließen des Menüs
+    // Klick außerhalb des Menüs schließt es
     document.addEventListener('click', function closeMenu(e) {
-        if (!contextMenu.contains(e.target)) {
+        if (!menu.contains(e.target)) {
-            removeContextMenus();
+            if (document.body.contains(menu)) {
+                document.body.removeChild(menu);
+            }
             document.removeEventListener('click', closeMenu);
         }
     });
 }
 
-// Funktion zum Hinzufügen eines Knotens an einer bestimmten Position (Rechtsklick)
+// Funktion zum Anzeigen des Menüs zum Hinzufügen eines Knotens
 function showAddNodeMenu(position) {
-    // Entferne vorhandene Kontextmenüs
+    // Entferne existierende Kontext-Menüs
-    removeContextMenus();
+    const existingMenu = document.querySelector('.context-menu');
+    if (existingMenu) {
+        existingMenu.parentNode.removeChild(existingMenu);
+    }
     
-    const contextMenu = document.createElement('div');
+    // Erstelle das Kontext-Menü
-    contextMenu.className = 'context-menu';
+    const menu = document.createElement('div');
-    contextMenu.style.left = `${position.x}px`;
+    menu.className = 'context-menu';
-    contextMenu.style.top = `${position.y}px`;
+    menu.style.left = `${position.x}px`;
+    menu.style.top = `${position.y}px`;
     
-    contextMenu.innerHTML = `
+    // Kategorie-Einträge für neue Knoten
-        <div class="context-menu-item" data-action="add-node">
+    let categoryItems = '';
-            <i class="fas fa-plus-circle"></i> Knoten hinzufügen
+    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>
         `;
-    
-    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
-                };
-                
-                // Temporäre ID erstellen
-                const tempId = 'new-' + Date.now();
-                
-                // Knoten hinzufügen (vereinfachte Version, zeigt direkt den Dialog an)
-                addNewNode(window.cy);
     }
     
-            removeContextMenus();
+    // 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);
         });
     });
     
-    // Event-Listener zum Schließen des Menüs
+    // Klick außerhalb des Menüs schließt es
     document.addEventListener('click', function closeMenu(e) {
-        if (!contextMenu.contains(e.target)) {
+        if (!menu.contains(e.target)) {
-            removeContextMenus();
+            if (document.body.contains(menu)) {
+                document.body.removeChild(menu);
+            }
             document.removeEventListener('click', closeMenu);
         }
     });
 }
 
-// Hilfsfunktion zum Entfernen aller Kontextmenüs
+// Funktion zum Hinzufügen eines neuen Knotens an einer bestimmten Position
-function removeContextMenus() {
+function addNewNodeAtPosition(cy, position, category) {
-    document.querySelectorAll('.context-menu').forEach(menu => {
+    if (!cy) return;
-        menu.remove();
+    
+    // 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,
+            label: 'Neuer ' + category + '-Knoten',
+            category: category,
+            description: categoryConfig.description || 'Beschreibung hinzufügen',
+            hasChildren: false,
+            expanded: false,
+            color: categoryConfig.color,
+            fontColor: '#ffffff',
+            fontSize: 16,
+            neuronSize: 8,
+            neuronActivity: 0.8
+        },
+        position: {
+            x: modelPosition[0],
+            y: modelPosition[1]
+        }
     });
+    
+    // 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 Aktivieren des Kanten-Erstellungsmodus
+// Funktion zum Starten der Erstellung einer Kante
-function enableEdgeCreationMode(cy) {
+function startEdgeCreation(sourceNode) {
-    // Status anzeigen
+    if (!sourceNode) return;
-    showUINotification('Bitte wählen Sie den Startknoten für die Verbindung', 'info');
     
-    // Cursor-Stil ändern
+    const cy = sourceNode.cy();
-    document.body.style.cursor = 'crosshair';
+    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');
     
-    // Event-Handler für die Knotenauswahl
+    // Zeige Hinweis an
-    const nodeSelectHandler = function(event) {
+    showUINotification('Wähle einen Zielknoten für die Verbindung', 'info');
-        // Ersten Knoten auswählen
-        const sourceNode = event.target;
     
-        // Status aktualisieren
+    // Einmaliger Event-Listener für das Auswählen des Zielknotens
-        showUINotification('Wählen Sie jetzt den Zielknoten für die Verbindung', 'info');
+    cy.once('tap', 'node', function(evt) {
+        const targetNode = evt.target;
         
-        // Zweiten Knoten abwarten
+        // Ignoriere, wenn es der gleiche Knoten ist
-        const secondNodeHandler = function(event) {
+        if (targetNode.id() === sourceNode.id()) {
-            const targetNode = event.target;
+            showUINotification('Quell- und Zielknoten dürfen nicht identisch sein', 'warning');
+            finishEdgeCreation();
+            return;
+        }
         
-            // Prüfen, ob der Zielknoten ein Knoten ist und nicht derselbe wie der Startknoten
+        // Prüfe, ob bereits eine Kante existiert
-            if (targetNode.isNode() && targetNode.id() !== sourceNode.id()) {
+        const existingEdge = cy.edges(`[source="${sourceNode.id()}"][target="${targetNode.id()}"]`);
-                // Kante erstellen
+        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(),
                 target: targetNode.id(),
-                        strength: 0.5
+                strength: 0.5,
+                conductionVelocity: Math.random() * 0.5 + 0.3,
+                latency: Math.random() * 100 + 50
             }
         });
         
-                // Erfolgsmeldung
+        showUINotification('Verbindung wurde erstellt', 'success');
-                showUINotification('Verbindung erstellt!', 'success');
-                
-                // Event-Handler entfernen
-                cy.off('tap', 'node', secondNodeHandler);
-                
-                // Modus beenden
         finishEdgeCreation();
-            }
+    });
-        };
     
-        // Event-Handler für den zweiten Knoten
+    // Event-Listener für Abbruch durch Klick auf leeren Bereich
-        cy.on('tap', 'node', secondNodeHandler);
+    cy.once('tap', function(evt) {
-        
+        if (evt.target === cy) {
-        // Original-Handler entfernen
+            showUINotification('Kantenerstellung abgebrochen', 'info');
-        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 = '';
+        sourceNode.removeClass('edge-source');
         cy.container().classList.remove('edge-creation-mode');
     }
+}
 
-    // Abbrechen durch Klick außerhalb
+// Funktion zum Aktivieren des Kantenerstellungsmodus
-    cy.on('tap', function(event) {
+function enableEdgeCreationMode(cy) {
-        if (event.target === cy) {
+    if (!cy) return;
-            cy.off('tap', 'node', nodeSelectHandler);
+    
-            finishEdgeCreation();
+    // Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu
-            showUINotification('Verbindungserstellung abgebrochen', 'info');
+    cy.container().classList.add('edge-creation-mode');
+    
+    // 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
+    const cancelEdgeCreation = function() {
+        cy.container().classList.remove('edge-creation-mode');
+        cy.removeListener('tap');
+        showUINotification('Kantenerstellung abgebrochen', 'info');
+    };
+    
+    cy.once('cxttap', cancelEdgeCreation);
+    document.addEventListener('keydown', function escKeyHandler(e) {
+        if (e.key === 'Escape') {
+            cancelEdgeCreation();
+            document.removeEventListener('keydown', escKeyHandler);
         }
     });
 }
 
-// Funktion zum Speichern von Mindmap-Änderungen
+// Funktion zum Löschen eines Knotens
-async function saveMindmapChanges(cy) {
+function deleteNode(node) {
-    try {
+    if (!node) return;
-        showUINotification('Speichere Änderungen...', 'info');
     
-        // Alle Knoten und Kanten sammeln
+    // Frage den Benutzer, ob er den Knoten wirklich löschen möchte
-        const nodes = cy.nodes().map(node => {
+    if (confirm(`Möchtest du den Knoten "${node.data('label')}" wirklich löschen?`)) {
+        // Entferne den Knoten und alle zugehörigen Kanten
+        node.remove();
+        showUINotification('Knoten wurde gelöscht', 'success');
+    }
+}
+
+// Funktion zum Löschen ausgewählter Elemente
+function deleteSelectedElements(cy) {
+    if (!cy) return;
+    
+    const selectedElements = cy.elements(':selected');
+    if (selectedElements.length === 0) {
+        showUINotification('Keine Elemente ausgewählt', 'warning');
+        return;
+    }
+    
+    // Zähle die ausgewählten Knoten und Kanten
+    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();
-            return {
+        const position = node.position();
+        
+        nodes.push({
             id: data.id,
             name: data.label,
-                description: data.description || '',
+            category: data.category,
-                color_code: data.color || data.color_code,
+            description: data.description,
-                category: data.category || null,
+            has_children: data.hasChildren,
-                icon: data.icon || 'fa-solid fa-circle',
+            color_code: data.color,
-                position_x: node.position().x,
+            position_x: position.x,
-                position_y: node.position().y
+            position_y: position.y
-            };
+        });
     });
     
-        const edges = cy.edges().map(edge => {
+    cy.edges().forEach(edge => {
-            return {
+        const data = edge.data();
-                source: edge.source().id(),
+        
-                target: edge.target().id(),
+        edges.push({
-                strength: edge.data('strength') || 0.5
+            source: data.source,
-            };
+            target: data.target,
+            strength: data.strength
+        });
     });
     
-        // Daten an API senden
+    // Erstelle die Daten für den API-Aufruf
-        const response = await fetch('/api/mindmap/save', {
+    const saveData = {
+        nodes: nodes,
+        edges: edges,
+        parent_id: nodeId || null
+    };
+    
+    console.log('Speichere Mindmap-Änderungen:', saveData);
+    
+    // Zeige eine Speicherbenachrichtigung an
+    showUINotification('Speichere Mindmap-Änderungen...', 'info');
+    
+    // Sende die Daten an den Server
+    fetch('/api/mindmap/save', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
         },
-            body: JSON.stringify({
+        body: JSON.stringify(saveData)
-                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
+    })
-        if (result.node_mapping) {
+    .then(data => {
-            // Die echten IDs hinzufügen
+        console.log('Speichern erfolgreich:', data);
-            for (const [tempId, realId] of Object.entries(result.node_mapping)) {
+        showUINotification('Mindmap wurde erfolgreich gespeichert', 'success');
-                const node = cy.getElementById(tempId);
+    })
-                if (node.length > 0) {
+    .catch(error => {
-                    node.data('id', realId);
-                }
-            }
-        }
-        
-        showUINotification('Mindmap wurde erfolgreich gespeichert!', 'success');
-        return result;
-    } catch (error) {
         console.error('Fehler beim Speichern der Mindmap:', error);
-        showUINotification('Fehler beim Speichern: ' + error.message, 'error');
+        showUINotification({
-        throw error;
+            error: 'Fehler beim Speichern der Mindmap',
-    }
+            details: error.message
+        }, 'error');
+    });
 }
 
 // Füge CSS-Stile für den Bearbeitungsmodus hinzu