diff --git a/static/js/mindmap.js b/static/js/mindmap.js
index 0f603d6..b6c441d 100644
--- a/static/js/mindmap.js
+++ b/static/js/mindmap.js
@@ -3,6 +3,7 @@
  * - Event-Listener und Interaktionslogik
  * - Fetch API für REST-Zugriffe
  * - Socket.IO für Echtzeit-Synchronisation
+ * - Lazy Loading & Progressive Disclosure
  */
 
 (async () => {
@@ -209,19 +210,16 @@ function handleContextMenuAction(action, node) {
   /* 4. Daten laden und Rendering */
   const loadMindmap = async () => {
     try {
-      // Nodes und Beziehungen parallel laden
-      const [nodes, relationships] = await Promise.all([
-        get('/api/mind_map_nodes'), 
-        get('/api/node_relationships')
-      ]);
+      // Initial nur die oberste Ebene laden
+      const rootNodes = await get('/api/mind_map_nodes?level=root');
       
       // Graph leeren (für Reload-Fälle)
       cy.elements().remove();
       
       // Überprüfen, ob nodes ein Array ist, wenn nicht, setze es auf ein leeres Array
-      const nodesArray = Array.isArray(nodes) ? nodes : [];
+      const nodesArray = Array.isArray(rootNodes) ? rootNodes : [];
       
-      // Knoten zum Graph hinzufügen
+      // Root-Knoten zum Graph hinzufügen
       cy.add(
         nodesArray.map(node => {
           // Kategorie-Informationen für Styling abrufen
@@ -234,7 +232,9 @@ function handleContextMenuAction(action, node) {
               description: node.description,
               color: node.color_code || category.color_code || '#6b7280',
               icon: node.icon || category.icon,
-              category_id: node.category_id
+              category_id: node.category_id,
+              hasChildren: node.has_children || false, // Neue Eigenschaft
+              expanded: false // Neue Eigenschaft für den Expansionsstatus
             },
             position: node.x && node.y ? { x: node.x, y: node.y } : undefined
           };