Implement cybernetwork background features: Add routes for serving cybernetwork CSS and JavaScript files, update base.html to include the new CSS and initialization script, and enhance style.css with smooth scrolling and background imports. This update improves the visual experience and functionality of the cybernetwork background in the application.

Remove deprecated files and templates: Delete unused files including deployment scripts, environment configurations, and various HTML templates to streamline the project structure. This cleanup enhances maintainability and reduces clutter in the codebase.
Update GPT model to 'gpt-4o-mini' for chat functionality in app.py
2025-04-27 15:01:38 +02:00 · 2025-04-27 14:50:20 +02:00 · 2025-04-27 08:03:55 +02:00 · 2025-04-27 08:00:53 +02:00 · 2025-04-27 08:00:16 +02:00 · 2025-04-27 07:52:23 +02:00
5289 changed files with 4566 additions and 854935 deletions
--- a/.cursor/rules/ai-integration.mdc
+++ b/.cursor/rules/ai-integration.mdc
@@ -1,34 +0,0 @@
---
-description: 
-globs: 
-alwaysApply: false
---
-# KI-Integration
-
-Die Anwendung integriert OpenAI für KI-Funktionalitäten:
-
-## Konfiguration
- [app.py](mdc:app.py): OpenAI-Client-Initialisierung
- [requirements.txt](mdc:requirements.txt): OpenAI SDK als Abhängigkeit
-
-## Endpunkte
- `/api/assistant`: Hauptendpunkt für KI-Anfragen
-
-## Funktionalitäten
- Chatbot-Integration: Benutzer können mit einem KI-Assistenten kommunizieren
- Inhaltsanalyse: KI kann Gedanken und Konzepte analysieren
- Vorschläge: Kontextbezogene Vorschläge basierend auf dem Benutzerkontext
-
-## Implementation
- Verwendet den OpenAI SDK für API-Aufrufe
- Kontextübergabe für konsistente Konversationen
- Streaming-Antworten für bessere Benutzererfahrung
-
-## Konfigurationsparameter
- `OPENAI_API_KEY`: API-Schlüssel (in .env-Datei)
- Das System verwendet vorwiegend das Chat-Completion-API
-
-## Sicherheitsmaßnahmen
- API-Schlüssel werden sicher über Umgebungsvariablen geladen
- Ratenbegrenzung und Fehlerbehandlung für API-Aufrufe
- Eingabevalidierung vor API-Anfragen
--- a/.cursor/rules/authentication.mdc
+++ b/.cursor/rules/authentication.mdc
@@ -1,36 +0,0 @@
---
-description: 
-globs: 
-alwaysApply: false
---
-# Authentifizierung und Benutzerrollen
-
-Die Anwendung nutzt Flask-Login für das Authentifizierungssystem:
-
-## Hauptkomponenten
- [LoginManager](mdc:app.py): Konfiguration im app.py
- [User Model](mdc:models.py): Die User-Klasse implementiert UserMixin für Flask-Login
- Passwort-Hashing: Verwendet Werkzeug Security für sichere Passwort-Speicherung
-
-## Authentifizierungsrouten
- `/login`: Benutzeranmeldung (GET/POST)
- `/register`: Benutzerregistrierung (GET/POST)
- `/logout`: Benutzerabmeldung
-
-## Benutzerrollen
- Reguläre Benutzer: Grundlegende Funktionen
- Administratoren (`is_admin=True`): Erweiterte Privilegien
-
-## Zugriffskontrollen
- `@login_required`: Decorator für routenspezifischen Authentifizierungsschutz
- `@admin_required`: Benutzerdefinierter Decorator für Admin-Zugriffskontrolle
-
-## Sitzungsverwaltung
- Tracking von Anmeldezeit (`last_login`)
- Langlebige Sitzungen für Präferenzen (z.B. Dark Mode)
- Angepasste Flash-Nachrichten
-
-## Profilmanagement
- `/settings`: Benutzereinstellungen aktualisieren
- Passwortänderung
- Profildetails (Biografie, Avatar, etc.)
--- a/.cursor/rules/configuration.mdc
+++ b/.cursor/rules/configuration.mdc
@@ -1,31 +0,0 @@
---
-description: 
-globs: 
-alwaysApply: false
---
-# Konfiguration und Umgebungsvariablen
-
-Die Anwendung verwendet Umgebungsvariablen für die Konfiguration:
-
-## Konfigurationsdateien
- [.env](mdc:.env): Haupt-Umgebungsvariablen (nicht in Git)
- [example.env](mdc:example.env): Beispiel-Konfiguration als Vorlage
-
-## Wichtige Konfigurationsparameter
- `SECRET_KEY`: Geheimer Schlüssel für Flask-Sitzungen
- `SQLALCHEMY_DATABASE_URI`: Datenbankverbindung 
- `OPENAI_API_KEY`: API-Schlüssel für OpenAI-Integration
-
-## Anwendungsinitialisierung
- [run.py](mdc:run.py): Lädt Umgebungsvariablen und startet die Anwendung
- [app.py](mdc:app.py): Konfiguriert Flask mit den geladenen Umgebungsvariablen
- [init_db.py](mdc:init_db.py): Initialisiert die Datenbank mit Beispieldaten
-
-## Datenbank-Konfiguration
- SQLite-Datenbank im `/database`-Verzeichnis
- Automatische Erstellung der Datenbankstruktur bei Anwendungsstart
- Beispieldaten werden mit `init_database()` erstellt
-
-## Ausführung der Anwendung
- Entwicklungsserver: `python run.py`
- In Produktion: Nutzung von Gunicorn (siehe requirements.txt)
--- a/.cursor/rules/data-models.mdc
+++ b/.cursor/rules/data-models.mdc
@@ -1,31 +0,0 @@
---
-description: 
-globs: 
-alwaysApply: false
---
-# Datenmodelle
-
-Die Anwendung verwendet SQLAlchemy als ORM mit folgenden Hauptmodellen:
-
-## Benutzer und Authentifizierung
- [User](mdc:models.py): Benutzermodell mit Authentifizierung und Profildaten
-
-## Mind-Mapping und Wissensorganisation
- [Category](mdc:models.py): Wissenschaftliche Kategorien zur Organisation der Mindmap
- [MindMapNode](mdc:models.py): Knoten in der öffentlichen Mindmap
- [UserMindmap](mdc:models.py): Benutzerspezifische Mindmaps
- [UserMindmapNode](mdc:models.py): Speichert Positionen von Knoten in Benutzer-Mindmaps
- [MindmapNote](mdc:models.py): Private Notizen zu Mindmap-Elementen
-
-## Gedanken und Inhalte
- [Thought](mdc:models.py): Gedanken und Konzepte, die in Mindmaps verknüpft werden
- [ThoughtRelation](mdc:models.py): Verknüpfungen zwischen verschiedenen Gedanken
- [ThoughtRating](mdc:models.py): Bewertungen von Gedanken durch Benutzer
- [Comment](mdc:models.py): Kommentare zu Gedanken
-
-## Hauptbeziehungen
- Benutzer → Gedanken: 1-zu-n (Autor)
- Benutzer → MindMaps: 1-zu-n
- Gedanken ↔ MindMapNodes: n-zu-m
- Kategorien → MindMapNodes: 1-zu-n
- Gedanken ↔ Gedanken: über ThoughtRelation (gerichtete Beziehungen)
--- a/.cursor/rules/development-workflow.mdc
+++ b/.cursor/rules/development-workflow.mdc
@@ -1,32 +0,0 @@
---
-description: 
-globs: 
-alwaysApply: false
---
-# Entwicklungs-Workflow
-
-## Grundlegende Entwicklungsschritte
-1. Umgebung einrichten: Python 3.11 und Abhängigkeiten installieren
-2. `.env`-Datei basierend auf `example.env` erstellen
-3. Datenbank initialisieren: `python init_db.py`
-4. Entwicklungsserver starten: `python run.py`
-
-## Datenbankentwicklung
- Models in [models.py](mdc:models.py) definieren
- Migrationen bei Schemaänderungen durchführen
- Testdaten über [init_db.py](mdc:init_db.py) bereitstellen
-
-## Anwendungsentwicklung
- Neue Routen in [app.py](mdc:app.py) hinzufügen
- Frontend-Templates in `/templates` erstellen/anpassen
- API-Endpoints für AJAX/Frontend-Integration implementieren
-
-## Testing
- Tests mit pytest schreiben (siehe requirements.txt)
- Flask-Testumgebung für Integrationstest verwenden
-
-## Best Practices
- Immer auf Datenbankmodelle zurückgreifen (kein Raw-SQL)
- API-Endpunkte mit Authentifizierung schützen
- Flash-Nachrichten für Benutzerrückmeldungen verwenden
- Code-Dokumentation in deutscher Sprache halten
--- a/.cursor/rules/frontend-structure.mdc
+++ b/.cursor/rules/frontend-structure.mdc
@@ -1,41 +0,0 @@
---
-description: 
-globs: 
-alwaysApply: false
---
-# Frontend-Struktur
-
-Die Anwendung verwendet ein Flask-Jinja2-Template-System mit JavaScript-Erweiterungen:
-
-## Template-Struktur
- `/templates`: Hauptverzeichnis für Jinja2-Templates
- `/templates/errors`: Fehlerseiten (404, 500, etc.)
- Layout-Templates für einheitliches Design
-
-## Frontend-Assets
- `/static/css`: CSS-Dateien (mit Tailwind)
-  - `/static/css/src`: Quell-CSS-Dateien
- `/static/js`: JavaScript-Dateien
-  - `/static/js/modules`: Modulare JS-Komponenten
- `/static/img`: Bilder und grafische Elemente
-
-## JavaScript-Funktionalität
- API-Integration: Asynchrone Kommunikation mit Backend
- Mindmap-Visualisierung: Interaktive Darstellung von Konzepten
- Benutzeroberflächen-Interaktivität: Drag & Drop, Tooltips, Modals
-
-## CSS-Framework
- Tailwind CSS für responsive Design-Elemente
- TAILWIND CDN verwenden, nicht manuell build!
-
-## Responsive Design
- Mobile-first Ansatz für verschiedene Gerätetypen
- Anpassungsfähiges Layout für verschiedene Bildschirmgrößen
-
-## Zugänglichkeit
- Semantisches HTML für bessere Zugänglichkeit
- ARIA-Attribute für Screenreader-Unterstützung
-
-## Internationalisierung
- Deutsche Benutzeroberfläche als Standard
- Vorbereitet für mehrsprachige Unterstützung
--- a/.cursor/rules/project-structure.mdc
+++ b/.cursor/rules/project-structure.mdc
@@ -1,27 +0,0 @@
---
-description: 
-globs: 
-alwaysApply: false
---
-# Projekt-Struktur (Systades)
-
-## Hauptkomponenten
-Diese Python-Flask-Webanwendung implementiert ein Mind-Mapping und Gedanken-Management System:
-
- [app.py](mdc:app.py): Hauptanwendungsdatei mit allen Routen und Endpunkten
- [models.py](mdc:models.py): Datenbankmodelle und Beziehungen
- [run.py](mdc:run.py): Startpunkt der Anwendung
- [init_db.py](mdc:init_db.py): Initialisiert die Datenbank mit Beispieldaten
-
-## Projektstruktur
- `/database`: Enthält SQLite-Datenbank
- `/docs`: Dokumentation
- `/static`: Frontend-Ressourcen (CSS, JS, Bilder)
- `/templates`: Jinja2-Templates für die Webseiten
- `/utils`: Hilfsfunktionen und -klassen
-
-## Hauptfunktionalität
- Mind-Mapping: Visualisierung von Wissen und Beziehungen
- Gedanken-Management: Erfassung und Organisation von Ideen und Konzepten
- Benutzer-Management: Registrierung, Login, Profile
- API-Endpunkte: RESTful-Schnittstellen für Frontend-Integration
--- a/.cursor/rules/routing.mdc
+++ b/.cursor/rules/routing.mdc
@@ -1,43 +0,0 @@
---
-description: 
-globs: 
-alwaysApply: false
---
-# Routing und API-Endpunkte
-
-## Hauptrouten (Webseiten)
- `/`: Startseite 
- `/login`, `/register`, `/logout`: Authentifizierung
- `/mindmap`: Öffentliche Mindmap-Ansicht
- `/profile`: Benutzerprofil
- `/settings`: Benutzereinstellungen
- `/search`: Suchfunktion
- `/my_account`: Kontoübersicht
-
-## API-Endpunkte
-### Mindmap-Verwaltung
- `/api/mindmap`: Öffentliche Mindmap-Daten abrufen
- `/api/mindmap/public`: Öffentliche Mindmap abrufen
- `/api/mindmap/user/<id>`: Benutzer-Mindmap abrufen
- `/api/mindmap/<id>/add_node`: Knoten hinzufügen
- `/api/mindmap/<id>/remove_node/<node_id>`: Knoten entfernen
- `/api/mindmap/<id>/update_node_position`: Knotenposition aktualisieren
- `/api/mindmap/<id>/notes`: Notizen verwalten
-
-### Gedanken und Inhalte
- `/api/thoughts`: Gedanken erstellen
- `/api/thoughts/<id>`: Gedanken abrufen, aktualisieren, löschen
- `/api/thoughts/<id>/bookmark`: Lesezeichen setzen/entfernen
- `/api/nodes/<id>/thoughts`: Gedanken zu einem Knoten abrufen/hinzufügen
-
-### System und Benutzereinstellungen
- `/api/set_dark_mode`, `/api/get_dark_mode`: Erscheinungsbild-Einstellungen
- `/api/assistant`: KI-Assistent-Kommunikation
- `/api/categories`: Kategorien abrufen
- `/api/get_flash_messages`: Flash-Nachrichten für AJAX-Anfragen
-
-## Fehlerbehandlung
- 404: Page Not Found
- 403: Forbidden
- 500: Internal Server Error
- 429: Too Many Requests
--- a/.env
+++ b/.env
@@ -2,14 +2,12 @@
 # Kopiere diese Datei zu .env und passe die Werte an

 # Flask
-FLASK_APP=app.py
-FLASK_DEBUG=1
-SECRET_KEY=your-secret-key-replace-in-production
+SECRET_KEY=dein-geheimer-schluessel-hier

 # OpenAI API
-OPENAI_API_KEY=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
+OPENAI_API_KEY=sk-dein-openai-api-schluessel-hier

 # Datenbank
 # Bei Bedarf kann hier eine andere Datenbank-URL angegeben werden
 # Der Pfad wird relativ zum Projektverzeichnis angegeben
-# SQLALCHEMY_DATABASE_URI=sqlite:////absoluter/pfad/zu/database/systades.db 
+# SQLALCHEMY_DATABASE_URI=sqlite:////absoluter/pfad/zu/database/systades.db OPENAI_API_KEY=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
--- a/.vscode/jsconfig.json
+++ b/.vscode/jsconfig.json
@@ -1,8 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "esnext",
-        "lib": [
-            "esnext"
-        ]
-    }
-}
--- a/.vscode/main.js
+++ b/.vscode/main.js
@@ -1,68 +0,0 @@
-/// <reference types="vscode" />
-// @ts-check
-// API: https://code.visualstudio.com/api/references/vscode-api
-// @ts-ignore
-const vscode = require('vscode');
- * @typedef {import('vscode').ExtensionContext} ExtensionContext
- * @typedef {import('vscode').commands} commands
- * @typedef {import('vscode').window} window
- * @typedef {import('vscode').TextEditor} TextEditor
- * @typedef {import('vscode').TextDocument} TextDocument
- */
-
-/**
- * Aktiviert die Erweiterung und registriert den Auto-Resume-Befehl
- * @param {vscode.ExtensionContext} context - Der Erweiterungskontext
- */
-function activate(context) {
-    const disposable = vscode.commands.registerCommand('extension.autoResume', () => {
-        const editor = vscode.window.activeTextEditor;
-        if (!editor) return;
-
-        const document = editor.document;
-        const text = document.getText();
-        
-        // Track last click time to avoid multiple clicks
-        let lastClickTime = 0;
-        
-        // Main function that looks for and clicks the resume link
-        function clickResumeLink() {
-            // Prevent clicking too frequently (3 second cooldown)
-            const now = Date.now();
-            if (now - lastClickTime < 3000) return;
-            
-            // Check if text contains rate limit text
-            if (text.includes('stop the agent after 25 tool calls') || 
-                text.includes('Note: we default stop')) {
-                
-                // Find the resume link position
-                const resumePos = text.indexOf('resume the conversation');
-                if (resumePos !== -1) {
-                    vscode.window.showInformationMessage('Auto-resuming conversation...');
-                    lastClickTime = now;
-                }
-            }
-        }
-        
-        // Führe periodisch aus
-        const interval = global.setInterval(clickResumeLink, 1000);
-        
-        // Speichere das Intervall in den Subscriptions
-        context.subscriptions.push({
-            dispose: () => global.clearInterval(interval)
-        });
-        // Führe die Funktion sofort aus
-        clickResumeLink();
-    });
-
-    context.subscriptions.push(disposable);
-}
-
-function deactivate() {
-    // Cleanup if needed
-}
-
-module.exports = {
-    activate,
-    deactivate
-}
--- a/COMMON_ERRORS.md
+++ b/COMMON_ERRORS.md
@@ -1,239 +0,0 @@
-# ABSOLUTE DON'TS:
- Verwendung von npm anstelle der Tailwind CDN
- Implementierung von Content Security Policy (CSP) - UNTER KEINEN UMSTÄNDEN!
- Implementierung von Cross-Site Request Forgery (CSRF) Schutz
- Implementierung von Security Headers
- Verwendung von TypeScript anstelle von JavaScript
- Implementierung von OAuth oder anderen externen Authentifizierungsmethoden
-
-# HÄUFIGE FEHLER:
- Verwendung der falschen Datenbank (die korrekte ist: database/systades.db)
- Falsche Pfadangaben bei statischen Dateien
- Vergessen der deutschen Spracheinstellungen in Templates
- Nicht beachten der vorhandenen Projektstruktur
- Falsche Einbindung der Neural Network Background Animation
- Verwendung von englischen Variablennamen in deutschen Funktionen
- Vergessen der Mindmap-Datenstruktur gemäß der Roadmap
-
-# Häufige Fehler und Lösungen
-
-## Datenbankfehler
-
-### Fehler: "no such column: user.password"
-
-**Fehlerbeschreibung:**
-```
-sqlalchemy.exc.OperationalError: (sqlite3.OperationalError) no such column: user.password
-[SQL: SELECT user.id AS user_id, user.username AS user_username, user.email AS user_email, user.password AS user_password, user.created_at AS user_created_at, user.is_active AS user_is_active, user.role AS user_role 
-FROM user 
-WHERE user.id = ?]
-```
-
-**Ursache:**
-Die Spalte `password` fehlt in der Tabelle `user` der SQLite-Datenbank. Dies kann durch eine unvollständige Datenbankinitialisierung oder ein fehlerhaftes Schema-Update verursacht worden sein.
-
-**Lösung:**
-
-1. **Datenbank reparieren mit dem Fix-Skript**
-
-   ```bash
-   python fix_user_table.py
-   ```
-
-   Dieses Skript:
-   - Prüft, ob die Tabelle `user` existiert und erstellt sie, falls nicht
-   - Prüft, ob die Spalte `password` existiert und fügt sie hinzu, falls nicht
-
-2. **Standardbenutzer erstellen**
-
-   ```bash
-   python create_default_users.py
-   ```
-
-   Dieses Skript:
-   - Erstellt Standardbenutzer (admin, user), falls keine vorhanden sind
-   - Setzt Passwörter mit korrektem Hashing
-
-3. **Datenbank testen**
-
-   ```bash
-   python test_app.py
-   ```
-
-   Dieses Skript überprüft:
-   - Ob die Datenbank existiert
-   - Ob die Tabelle `user` korrekt konfiguriert ist
-   - Ob Benutzer vorhanden sind
-
-## Häufige Ursachen für Datenbankfehler
-
-1. **Inkonsistente Datenbankschemas**
-   - Unterschiede zwischen dem SQLAlchemy-Modell und der tatsächlichen Datenbankstruktur
-   - Fehlende Spalten, die in den Modellen definiert sind
-
-2. **Falsche Datenbankinitialisierung**
-   - Die Datenbank wurde nicht korrekt initialisiert
-   - Fehler bei der Migration oder dem Schema-Update
-
-3. **Datenbankdatei-Korrumpierung**
-   - Die SQLite-Datenbankdatei wurde beschädigt
-   - Lösung: Sicherung wiederherstellen oder Datenbank neu erstellen
-
-## Vorbeugende Maßnahmen
-
-1. **Regelmäßige Backups**
-   - Tägliche Sicherung der Datenbankdatei
-
-2. **Schema-Validierung**
-   - Regelmäßige Überprüfung der Datenbankstruktur
-   - Automatisierte Tests für Datenbankschema
-
-3. **Datenbankmigration**
-   - Verwenden Sie Flask-Migrate für strukturierte Datenbank-Updates
-   - Dokumentieren Sie alle Schemaänderungen
-
-## Content Security Policy (CSP)
-
-### Problem: Externe Ressourcen werden nicht geladen
-**Fehler:** Externe Ressourcen wie CDNs werden nicht korrekt geladen.
-
-**Lösung:**
-1. Stellen Sie sicher, dass die URLs in den Templates korrekt sind:
-   ```html
-   <link href="https://cdn.tailwindcss.com" rel="stylesheet">
-   ```
-
-2. Überprüfen Sie die Netzwerkverbindung und ob die CDN-Domains erreichbar sind.
-
-3. Verwenden Sie lokale Ressourcen als Alternative:
-   ```html
-   <link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
-   ```
-
-### Problem: CSP-Fehler (script-src-elem 'none', font-src 'none', etc.)
-**Fehler:** Skripte werden aufgrund von CSP-Einschränkungen blockiert.
-
-**Lösung:**
-1. WICHTIG: CSP-Einschränkungen NICHT implementieren! Diese sind im Projekt unerwünscht.
-
-2. Falls CSP-Header bereits vorhanden sind, entfernen Sie diese aus der Anwendung:
-   ```python
-   # Entfernen Sie diesen Code, falls vorhanden:
-   # @app.after_request
-   # def add_security_headers(response):
-   #     response.headers['Content-Security-Policy'] = '...'
-   #     return response
-   ```
-
-3. Stellen Sie sicher, dass externe Ressourcen direkt geladen werden:
-   ```html
-   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-   <script src="{{ url_for('static', filename='js/alpine.min.js') }}" defer></script>
-   ```
-
-4. Für Inline-Skripte keine Nonce verwenden:
-   ```html
-   <script>
-     // Inline-JavaScript-Code ohne Einschränkungen
-   </script>
-   ```
-
-### Problem: Tailwind CSS CDN wird blockiert
-**Fehler:** Tailwind CSS kann nicht von CDN geladen werden.
-
-**Lösung:**
-1. Verwenden Sie die lokale Version von Tailwind CSS:
-   ```html
-   <link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
-   ```
-
-2. Alternativ können Sie die CDN-Version direkt im Template einbinden:
-   ```html
-   <script src="https://cdn.tailwindcss.com"></script>
-   ```
-
-3. Stellen Sie sicher, dass die Datei `static/css/tailwind.min.css` existiert und aktuell ist.
-
-## Authentifizierung
-
-### Problem: Login funktioniert nicht
-**Fehler:** Benutzer kann sich nicht einloggen.
-
-**Lösung:**
-1. Standard-Admin-Benutzer erstellen: `python TOOLS.py user:admin`
-2. Passwort zurücksetzen: `python TOOLS.py user:reset-pw -u USERNAME -p NEWPASSWORD`
-
-## Neural Network Background
-
-### Problem: Hintergrund-Animation wird nicht angezeigt
-**Fehler:** Die Neural Network Animation im Hintergrund erscheint nicht.
-
-**Lösung:**
-1. Überprüfen Sie, ob die Datei `static/neural-network-background.js` korrekt eingebunden ist:
-   ```html
-   <script src="{{ url_for('static', filename='neural-network-background.js') }}"></script>
-   ```
-
-2. Initialisieren Sie die Animation im Template:
-   ```html
-   <script>
-     document.addEventListener('DOMContentLoaded', () => {
-       const background = new NeuralNetworkBackground();
-       background.initialize();
-       background.animate();
-     });
-   </script>
-   ```
-
-3. Stellen Sie sicher, dass keine CSS-Regeln die Animation überdecken:
-   ```css
-   #neural-network-background {
-     z-index: -10;
-     opacity: 1;
-   }
-   ```
-
-## Mindmap-Funktionalität
-
-### Problem: Mindmap-Daten werden nicht geladen
-**Fehler:** Die dynamische Mindmap zeigt keine Daten an.
-
-**Lösung:**
-1. Überprüfen Sie die API-Endpunkte für die Mindmap-Daten:
-   ```python
-   @app.route('/api/mindmap/nodes', methods=['GET'])
-   def get_mindmap_nodes():
-       # Implementierung...
-   ```
-
-2. Stellen Sie sicher, dass die AJAX-Anfragen korrekt implementiert sind:
-   ```javascript
-   fetch('/api/mindmap/nodes')
-     .then(response => response.json())
-     .then(data => {
-       // Verarbeitung der Mindmap-Daten
-     });
-   ```
-
-3. Überprüfen Sie die Datenbankeinträge für Mindmap-Knoten und -Verbindungen.
-
-## ChatGPT-Assistent
-
-### Problem: Assistent reagiert nicht auf Eingaben
-**Fehler:** Der ChatGPT-Assistent verarbeitet keine Benutzereingaben.
-
-**Lösung:**
-1. Überprüfen Sie die Einbindung der JavaScript-Datei:
-   ```html
-   <script src="{{ url_for('static', filename='js/modules/chatgpt-assistant.js') }}"></script>
-   ```
-
-2. Stellen Sie sicher, dass der Assistent korrekt initialisiert wird:
-   ```javascript
-   document.addEventListener('DOMContentLoaded', () => {
-     const assistant = new ChatGPTAssistant();
-     assistant.initialize();
-   });
-   ```
-
-3. Überprüfen Sie die API-Endpunkte für die Kommunikation mit dem Assistenten.
--- a/33
+++ b/33
@@ -1,33 +0,0 @@
-# Dockerfile
-FROM python:3.11-slim
-
-# Arbeitsverzeichnis in Container
-WORKDIR /app
-
-# Systemabhängigkeiten installieren und Verzeichnisse anlegen
-RUN apt-get update && \
-    apt-get install -y --no-install-recommends gcc && \
-    rm -rf /var/lib/apt/lists/* && \
-    mkdir -p /app/database
-
-# pip auf den neuesten Stand bringen und Requirements installieren
-COPY requirements.txt ./
-RUN pip install --upgrade pip && \
-    pip install --no-cache-dir -U -r requirements.txt
-
-# Anwendungscode kopieren
-COPY . .
-
-# Berechtigungen für database-Ordner
-RUN chmod -R 777 /app/database
-
-# Exponiere Port 5000 für Flask
-EXPOSE 5000
-
-# Setze Umgebungsvariablen
-ENV FLASK_APP=app.py
-ENV PYTHONUNBUFFERED=1
-ENV PYTHONDONTWRITEBYTECODE=1
-
-# Startkommando mit spezifischen Flags für Produktion
-CMD ["python", "app.py"] 
--- a/README.md
+++ b/README.md
@@ -6,10 +6,9 @@ Das MindMapProjekt ist eine interaktive Plattform zum Visualisieren, Erforschen
 ## Technischer Stack
 - **Backend**: Python/Flask
 - **Frontend**: 
-  - Tailwind CSS (via CDN) für moderne UI
+  - Tailwind CSS für moderne UI
  - SVG-Bibliotheken für Visualisierungen (D3.js)
  - JavaScript/Alpine.js für interaktive Komponenten
-  - WebGL für animierte Hintergrundeffekte
 - **Datenbank**: SQLite mit SQLAlchemy
 - **KI-Integration**: OpenAI API für intelligente Assistenz

@@ -62,20 +61,16 @@ Für detaillierte Hilfe: `python TOOLS.py -h`
 - [x] Favicon erstellen
 - [x] Setup-Skript für einfache Installation

-### Phase 2: Design-Überarbeitung ✅
+### Phase 2: Design-Überarbeitung 🔄
 - [x] Implementierung des Dark Mode
 - [x] Erstellung eines modernen, minimalistischen UI mit Tech-Ästhetik
 - [x] Responsive Design für alle Geräte
- [x] Gestaltung der Landing Page mit großer Typografie
- [x] Animierter Neurales Netzwerk-Hintergrund mit WebGL
+- [ ] Gestaltung der Landing Page mit großer Typografie

 ### Phase 3: Mindmap-Funktionalitäten 🔄
 - [x] Verbesserte Visualisierung mit SVG und D3.js
 - [x] Implementierung der Mouseover-Funktion
 - [x] Entwicklung der Suchfunktion für Knoten
- [x] Clustertopologie für neuronale Netzwerkdarstellung
- [x] Fehlerbehandlung für robuste Datenverarbeitung und Knotenverweise
- [x] Verbesserte Verbindungserkennung zwischen Knoten
 - [ ] Tagging-System für Inhalte
 - [ ] Quellenmanagement und -verlinkung
 - [ ] Upload-Funktionalität an Knotenpunkten
@@ -120,8 +115,8 @@ Für detaillierte Hilfe: `python TOOLS.py -h`

 ## Aktueller Status
 - **Phase 1**: ✅ Abgeschlossen
- **Phase 2**: ✅ Abgeschlossen
- **Phase 3**: 🔄 In Bearbeitung (75% abgeschlossen)
+- **Phase 2**: 🔄 In Bearbeitung (75% abgeschlossen)
+- **Phase 3**: 🔄 In Bearbeitung (50% abgeschlossen)

 ## Aktuelle Fortschritte
 - Grundlegende UI modernisiert mit Tailwind CSS und Dark Mode
@@ -129,68 +124,11 @@ Für detaillierte Hilfe: `python TOOLS.py -h`
 - Setup-Prozess vereinfacht mit einem Shell-Skript
 - Mindmap-Visualisierung komplett überarbeitet mit D3.js für eine interaktivere Erfahrung
 - Responsive Design für optimale Darstellung auf allen Geräten
- Animierter neuronaler Netzwerk-Hintergrund mit WebGL implementiert
- Verbesserte neuronale Cluster-Darstellung in der MindMap-Ansicht
- Behebung von kritischen Fehlern in der Knotenvisualisierung und Verbindungserkennung
- Robustere Datenverarbeitung für Mindmap-Knoten implementiert
- Fehlerbehandlung für verschiedene API-Datenformate verbessert
-
-## Neuronaler Netzwerk-Hintergrund
-
-Ein wesentliches neues Feature ist der animierte Hintergrund, der ein neuronales Netzwerk simuliert:
-
- **WebGL-basierte Rendering-Engine** für hohe Performance
- **Dynamische Knoten und Verbindungen** mit realistischem Bewegungsverhalten
- **Neuronenfeuer-Simulation** mit Signalweiterleitung zwischen Knoten
- **Clustertopologie** für realistisches Erscheinungsbild
- **Anpassbare Farbgebung und Animationsparameter**
- **Flüssige Animationen** mit über 100 Knotenpunkten
-
-Die Animation ist vollständig responsiv und passt sich automatisch an verschiedene Bildschirmgrößen an, ohne die Browser-Performance zu beeinträchtigen.
-
-## Mindmap-Verbesserungen
-
-Die Mindmap-Darstellung wurde grundlegend überarbeitet:
-
- **D3.js Force-Directed Graph** für intuitive Knotenpositionierung
- **Verbesserte Fehlerbehandlung** für robustere Datenverarbeitung
- **Neuronale Cluster-Gruppierung** von thematisch zusammengehörigen Inhalten
- **Glasmorphismus-Effekte** für moderne visuelle Darstellung
- **Verbesserte Hover- und Selektionseffekte**
- **Flüssige Animationen** bei Knotenauswahl und -fokussierung

 ## Nächste Schritte
- Fertigstellung des Tagging-Systems für Gedanken
+- Fertigstellung der Landing Page
+- Erstellung der "Wer sind wir?"-Seite
+- Implementierung des Tagging-Systems für Gedanken
 - Verbesserung der Gedankenansicht im Mindmap-Bereich
- Implementierung von Quellenmanagement
- Überarbeitung der Startseite mit neuen Features

-## Content Security Policy (CSP)
-
-Die Anwendung implementiert eine Content Security Policy, um die Sicherheit zu erhöhen und unerwünschte externe Ressourcen zu blockieren. CSP wird in `app.py` konfiguriert und schränkt ein, welche Ressourcen geladen werden dürfen.
-
-### Aktualisierung (06.06.2024)
-Die Anwendung verwendet nun die Tailwind CSS CDN für vereinfachte Entwicklung. Die CSP wurde entsprechend angepasst, um die Domain `cdn.tailwindcss.com` zu erlauben.
-
-### Lokale und CDN-Ressourcen
-
-Die Anwendung nutzt eine Mischung aus lokalen Ressourcen und CDNs:
- **CDN-Ressourcen**: 
-  - Tailwind CSS (cdn.tailwindcss.com)
- **Lokale Ressourcen**:
-  - Alpine.js
-  - Font Awesome
-  - Google Fonts (Inter und JetBrains Mono)
-  - WebGL-Animation (neural-network-background.js)
-
-### CSP-Nonces
-
-Die Anwendung verwendet Nonces für Inline-Skripte. In den Templates wird `{{ csp_nonce }}` verwendet, um den Nonce-Wert einzufügen:
-
-```html
-<script nonce="{{ csp_nonce }}">
-  // JavaScript Code
-</script>
-```
-
-*Zuletzt aktualisiert: 15.06.2024* 
+*Zuletzt aktualisiert: 01.06.2024* 
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -2,7 +2,7 @@

 Diese Roadmap beschreibt die geplante Entwicklung der dynamischen, benutzerorientierten Mindmap-Funktionalität für das Systades-Projekt.

-## Phase 1: Grundlegendes Datenmodell und Backend (Abgeschlossen ✅)
+## Phase 1: Grundlegendes Datenmodell und Backend (Abgeschlossen)

 - [x] Entwurf des Datenbankschemas für benutzerorientierte Mindmaps
 - [x] Implementierung der Modelle in models.py
@@ -10,54 +10,31 @@ Diese Roadmap beschreibt die geplante Entwicklung der dynamischen, benutzerorien
 - [x] Integration mit der bestehenden Benutzerauthentifizierung
 - [x] Seed-Daten für die Entwicklung und Tests

-## Phase 2: Dynamische Mindmap-Visualisierung (Abgeschlossen ✅)
+## Phase 2: Dynamische Mindmap-Visualisierung (Aktuell)

- [x] Anpassung des Frontend-Codes zur Verwendung der DB-Daten anstelle des SVG
- [x] Implementierung von AJAX-Anfragen zum Laden der Mindmap-Daten
- [x] Dynamisches Rendering der Knoten, Verbindungen und Labels
- [x] Drag-and-Drop-Funktionalität für die Bewegung von Knoten
- [x] Zoom- und Pan-Funktionalität mit Persistenz der Ansicht
- [x] Verbesserte Fehlerbehandlung in der Knotenvisualisierung
- [x] Robustere Verbindungserkennung zwischen Knoten
- [x] Implementierung von Glasmorphismus-Effekten für moderneres UI
+- [ ] Anpassung des Frontend-Codes zur Verwendung der DB-Daten anstelle des SVG
+- [ ] Implementierung von AJAX-Anfragen zum Laden der Mindmap-Daten
+- [ ] Dynamisches Rendering der Knoten, Verbindungen und Labels
+- [ ] Drag-and-Drop-Funktionalität für die Bewegung von Knoten
+- [ ] Zoom- und Pan-Funktionalität mit Persistenz der Ansicht

-## Phase 3: Visuelles Design und UX (Abgeschlossen ✅)
+## Phase 3: Benutzerdefinierte Mindmaps

- [x] Implementierung des Dark Mode
- [x] Entwicklung eines modernen, minimalistischen UI
- [x] Animierter neuronaler Netzwerk-Hintergrund mit WebGL
- [x] Responsive Design für alle Geräte
- [x] Verbesserte Hover- und Selektionseffekte
- [x] Clustertopologie für neuronale Netzwerkdarstellung
- [x] Animierte Neuronenfeuer-Simulation mit Signalweiterleitung
-
-## Phase 4: Benutzerdefinierte Mindmaps (Aktuell 🔄)
-
- [x] UI für das Betrachten bestehender Mindmaps
- [ ] UI für das Erstellen und Bearbeiten eigener Mindmaps
+- [ ] UI für das Erstellen, Bearbeiten und Löschen eigener Mindmaps
 - [ ] Funktion zum Hinzufügen/Entfernen von Knoten aus der öffentlichen Mindmap
 - [ ] Speichern der Knotenpositionen und Ansichtseinstellungen
 - [ ] Benutzerspezifische Visualisierungseinstellungen
 - [ ] Dashboard mit Übersicht aller Mindmaps des Benutzers

-## Phase 5: Notizen und Annotationen
+## Phase 4: Notizen und Annotationen

- [x] Anzeige von Gedanken zu Mindmap-Knoten
 - [ ] UI für das Hinzufügen privater Notizen zu Knoten
 - [ ] Visuelle Anzeige von Notizen in der Mindmap
 - [ ] Texteditor mit Markdown-Unterstützung für Notizen
 - [ ] Kategorisierung und Farbkodierung von Notizen
 - [ ] Suchfunktion für Notizen

-## Phase 6: Tagging und Quellenmanagement
-
- [ ] Tagging-System für Inhalte implementieren
- [ ] Verknüpfen von Quellen mit Mindmap-Knoten
- [ ] Upload-Funktionalität für Dateien und Medien
- [ ] Verwaltung von Zitaten und Referenzen
- [ ] Visuelles Feedback für Tags und Quellen in der Mindmap
-
-## Phase 7: Integrationen und Erweiterungen
+## Phase 5: Integrationen und Erweiterungen

 - [ ] Import/Export-Funktionalität für Mindmaps (JSON, PNG)
 - [ ] Teilen von Mindmaps (öffentlich/privat/mit bestimmten Benutzern)
@@ -65,7 +42,7 @@ Diese Roadmap beschreibt die geplante Entwicklung der dynamischen, benutzerorien
 - [ ] Verknüpfung mit externen Ressourcen (Links, Dateien)
 - [ ] Versionierung von Mindmaps

-## Phase 8: KI-Integration und Analyse
+## Phase 6: KI-Integration und Analyse

 - [ ] KI-gestützte Vorschläge für Verbindungen zwischen Knoten
 - [ ] Automatische Kategorisierung von Inhalten
@@ -73,7 +50,7 @@ Diese Roadmap beschreibt die geplante Entwicklung der dynamischen, benutzerorien
 - [ ] Mindmap-Statistiken und Analysen
 - [ ] KI-basierte Zusammenfassung von Teilbereichen der Mindmap

-## Phase 9: Optimierung und Skalierung
+## Phase 7: Optimierung und Skalierung

 - [ ] Performance-Optimierung für große Mindmaps
 - [ ] Verbesserung der Benutzerfreundlichkeit basierend auf Feedback
@@ -89,20 +66,6 @@ Diese Roadmap beschreibt die geplante Entwicklung der dynamischen, benutzerorien
 - [ ] Caching-Strategien für bessere Performance
 - [ ] Verbesserte Fehlerbehandlung und Logging

-## KI-Integration
-
-### Aktuelle Implementation
- Integration von OpenAI mit dem gpt-4o-mini-Modell für den KI-Assistenten
- Datenbankzugriff für den KI-Assistenten, um direkt Informationen aus der Datenbank abzufragen
- Verbesserte Benutzeroberfläche für den KI-Assistenten mit kontextbezogenen Vorschlägen
-
-### Zukünftige Verbesserungen
- Implementierung von Vektorsuche für präzisere Datenbank-Abfragen durch die KI
- Erweiterung der KI-Funktionalität für tiefere Analyse von Zusammenhängen zwischen Gedanken
- KI-gestützte Vorschläge für neue Verbindungen zwischen Gedanken basierend auf Inhaltsanalyse
- Finetuning des KI-Modells auf die spezifischen Anforderungen der Anwendung
- Erweiterung auf multimodale Fähigkeiten (Bild- und Textanalyse)
-
 ---

 ## Implementierungsdetails
@@ -122,7 +85,6 @@ Das Datenbankschema umfasst folgende Hauptentitäten:
 ### Frontend-Technologien

 - D3.js für die Visualisierung der Mindmap
- WebGL für den neuronalen Netzwerk-Hintergrund
 - AJAX für dynamisches Laden von Daten
 - Interaktive Bedienelemente mit JavaScript
 - Responsive Design mit Tailwind CSS
@@ -137,36 +99,4 @@ Die implementierten API-Endpunkte umfassen:
 - `/api/mindmap/<id>/remove_node/<node_id>` - Entfernen eines Knotens
 - `/api/mindmap/<id>/update_node_position` - Aktualisierung von Knotenpositionen
 - `/api/mindmap/<id>/notes` - Verwaltung von Notizen
- `/api/nodes/<id>/thoughts` - Abrufen und Hinzufügen von Gedanken zu Knoten
- `/api/get_dark_mode` - Abrufen der Dark Mode Einstellung
-
-## Neuronaler Netzwerk-Hintergrund
-
-Der neue WebGL-basierte Hintergrund bietet:
-
- WebGL-basierte Rendering-Engine für optimale Performance
- Dynamische Knoten und Verbindungen mit realistischem Verhalten
- Clustering von neuronalen Knoten für natürlicheres Erscheinungsbild
- Simulation von neuronaler Aktivität und Signalweiterleitung
- Anpassbare visuelle Parameter (Helligkeit, Dichte, Geschwindigkeit)
- Vollständig responsives Design für alle Bildschirmgrößen
-
-## Aktuelle Verbesserungen
- Tailwind CSS wurde auf CDN-Version aktualisiert (06.06.2024)
- Content Security Policy (CSP) für Tailwind CSS CDN und WebGL konfiguriert
- Behebung kritischer Fehler in der Mindmap-Knotenvisualisierung (15.06.2024)
- Verbesserte Verbindungserkennung zwischen Knoten implementiert
- Robuste Fehlerbehandlung für verschiedene API-Datenformate
-
-## Zukünftige Aufgaben (Q3 2024)
- Implementierung des Tagging-Systems für Gedanken
- Quellenmanagement für Mindmap-Knoten
- Erweiterte Benutzerprofilfunktionen
- Verbesserung der mobilen Benutzererfahrung
- Integration von Exportfunktionen für Mindmaps
-
-*Zuletzt aktualisiert: 15.06.2024*
-
-## [Entfernt] CORS-Unterstützung (flask-cors)
- Die flask-cors-Bibliothek und alle zugehörigen Initialisierungen wurden entfernt.
- CORS wird nicht mehr unterstützt oder benötigt. 
+- `/api/nodes/<id>/thoughts` - Abrufen und Hinzufügen von Gedanken zu Knoten 
--- a/TOOLS.py
+++ b/TOOLS.py
--- a/pycache/app.cpython-311.pyc
+++ b/pycache/app.cpython-311.pyc
--- a/pycache/app.cpython-313.pyc
+++ b/pycache/app.cpython-313.pyc
--- a/pycache/app.cpython-36.pyc
+++ b/pycache/app.cpython-36.pyc
--- a/pycache/init_db.cpython-311.pyc
+++ b/pycache/init_db.cpython-311.pyc
--- a/pycache/init_db.cpython-313.pyc
+++ b/pycache/init_db.cpython-313.pyc
--- a/pycache/models.cpython-311.pyc
+++ b/pycache/models.cpython-311.pyc
--- a/pycache/models.cpython-313.pyc
+++ b/pycache/models.cpython-313.pyc
--- a/app.py
+++ b/app.py
@@ -3,7 +3,7 @@

 import os
 from datetime import datetime, timedelta
-from flask import Flask, render_template, request, redirect, url_for, flash, jsonify, session, g
+from flask import Flask, render_template, request, redirect, url_for, flash, jsonify, session
 from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
 from flask_sqlalchemy import SQLAlchemy
 from werkzeug.security import generate_password_hash, check_password_hash
@@ -17,14 +17,12 @@ import secrets
 from sqlalchemy.sql import func
 from openai import OpenAI
 from dotenv import load_dotenv
-from flask_socketio import SocketIO, emit
-from flask_migrate import Migrate

 # Modelle importieren
 from models import (
    db, User, Thought, Comment, MindMapNode, ThoughtRelation, ThoughtRating, 
    RelationType, Category, UserMindmap, UserMindmapNode, MindmapNote, 
-    node_thought_association, user_thought_bookmark, node_relationship, ForumCategory, ForumPost
+    node_thought_association, user_thought_bookmark
 )

 # Lade .env-Datei
@@ -41,33 +39,9 @@ app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'default-dev-key')
 app.config['SQLALCHEMY_DATABASE_URI'] = f'sqlite:///{db_path}'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=365)  # Langlebige Session für Dark Mode-Einstellung
-app.config['UPLOAD_FOLDER'] = os.getenv('UPLOAD_FOLDER', os.path.join(os.getcwd(), 'uploads'))
-app.config['WTF_CSRF_ENABLED'] = False

 # OpenAI API-Konfiguration
-api_key = os.environ.get("OPENAI_API_KEY")
-if not api_key:
-    print("WARNUNG: Kein OPENAI_API_KEY in Umgebungsvariablen gefunden. KI-Funktionalität wird nicht verfügbar sein.")
-    api_key = "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"
-
-client = OpenAI(api_key=api_key)
-
-# Dark Mode Einstellung in Session speichern
-@app.before_request
-def handle_dark_mode():
-    if 'dark_mode' not in session:
-        session['dark_mode'] = False  # Standardmäßig Light Mode
-
-# Context processor für Dark Mode
-@app.context_processor
-def inject_dark_mode():
-    return {'dark_mode': session.get('dark_mode', False)}
-
-# Route zum Umschalten des Dark Mode
-@app.route('/toggle-dark-mode', methods=['POST'])
-def toggle_dark_mode():
-    session['dark_mode'] = not session.get('dark_mode', False)
-    return jsonify({'success': True, 'dark_mode': session['dark_mode']})
+client = OpenAI(api_key="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")

 # Context processor für globale Template-Variablen
@app.context_processor
@@ -77,7 +51,7 @@ def inject_globals():
        'current_year': datetime.now().year
    }

-# Context-Prozessor für alle Templates
+# Kontext-Prozessor für alle Templates
@app.context_processor
 def inject_current_year():
    return {'current_year': datetime.now().year}
@@ -89,181 +63,6 @@ db.init_app(app)
 login_manager = LoginManager(app)
 login_manager.login_view = 'login'

-# Erst nach der App-Initialisierung die DB-Check-Funktionen importieren
-from utils.db_check import check_db_connection, initialize_db_if_needed
-
-# SocketIO initialisieren
-socketio = SocketIO(app)
-
-migrate = Migrate(app, db)
-
-def create_default_categories():
-    """Erstellt die Standardkategorien für die Mindmap"""
-    # Hauptkategorien
-    main_categories = [
-        {
-            "name": "Philosophie",
-            "description": "Philosophisches Denken und Konzepte",
-            "color_code": "#9F7AEA",
-            "icon": "fa-brain",
-            "subcategories": [
-                {"name": "Ethik", "description": "Moralische Grundsätze", "icon": "fa-balance-scale"},
-                {"name": "Logik", "description": "Gesetze des Denkens", "icon": "fa-project-diagram"},
-                {"name": "Erkenntnistheorie", "description": "Natur des Wissens", "icon": "fa-lightbulb"}
-            ]
-        },
-        {
-            "name": "Wissenschaft",
-            "description": "Wissenschaftliche Disziplinen und Forschung",
-            "color_code": "#48BB78",
-            "icon": "fa-flask",
-            "subcategories": [
-                {"name": "Physik", "description": "Gesetze der Materie und Energie", "icon": "fa-atom"},
-                {"name": "Biologie", "description": "Wissenschaft des Lebens", "icon": "fa-dna"},
-                {"name": "Mathematik", "description": "Abstrakte Strukturen", "icon": "fa-calculator"},
-                {"name": "Informatik", "description": "Wissenschaft der Datenverarbeitung", "icon": "fa-laptop-code"}
-            ]
-        },
-        {
-            "name": "Technologie",
-            "description": "Technologische Entwicklungen und Anwendungen",
-            "color_code": "#ED8936",
-            "icon": "fa-microchip",
-            "subcategories": [
-                {"name": "Künstliche Intelligenz", "description": "Intelligente Maschinen", "icon": "fa-robot"},
-                {"name": "Programmierung", "description": "Softwareentwicklung", "icon": "fa-code"},
-                {"name": "Elektronik", "description": "Elektronische Systeme", "icon": "fa-memory"}
-            ]
-        },
-        {
-            "name": "Künste",
-            "description": "Kunstformen und kulturelle Ausdrucksweisen",
-            "color_code": "#ED64A6",
-            "icon": "fa-palette",
-            "subcategories": [
-                {"name": "Literatur", "description": "Schriftliche Werke", "icon": "fa-book"},
-                {"name": "Musik", "description": "Klangkunst", "icon": "fa-music"},
-                {"name": "Bildende Kunst", "description": "Visuelle Kunstformen", "icon": "fa-paint-brush"}
-            ]
-        },
-        {
-            "name": "Psychologie",
-            "description": "Menschliches Verhalten und Geist",
-            "color_code": "#4299E1",
-            "icon": "fa-comments",
-            "subcategories": [
-                {"name": "Kognition", "description": "Denken und Wahrnehmen", "icon": "fa-brain"},
-                {"name": "Emotionen", "description": "Gefühlswelt", "icon": "fa-heart"},
-                {"name": "Persönlichkeit", "description": "Charaktereigenschaften", "icon": "fa-user"}
-            ]
-        }
-    ]
-    
-    # Kategorien erstellen
-    for main_cat_data in main_categories:
-        # Prüfen, ob die Kategorie bereits existiert
-        existing_cat = Category.query.filter_by(name=main_cat_data["name"]).first()
-        if existing_cat:
-            continue
-            
-        # Hauptkategorie erstellen
-        main_category = Category(
-            name=main_cat_data["name"],
-            description=main_cat_data["description"],
-            color_code=main_cat_data["color_code"],
-            icon=main_cat_data["icon"]
-        )
-        db.session.add(main_category)
-        db.session.flush()  # Um die ID zu generieren
-        
-        # Unterkategorien erstellen
-        for sub_cat_data in main_cat_data.get("subcategories", []):
-            sub_category = Category(
-                name=sub_cat_data["name"],
-                description=sub_cat_data["description"],
-                color_code=main_cat_data["color_code"],
-                icon=sub_cat_data.get("icon", main_cat_data["icon"]),
-                parent_id=main_category.id
-            )
-            db.session.add(sub_category)
-    
-    db.session.commit()
-    print("Standard-Kategorien wurden erstellt!")
-
-def create_forum_categories():
-    """Erstellt Forum-Kategorien basierend auf Hauptknotenpunkten der Mindmap"""
-    # Hauptknotenpunkte abrufen (nur die, die keine Elternknoten haben)
-    main_nodes = MindMapNode.query.filter(~MindMapNode.id.in_(
-        db.session.query(node_relationship.c.child_id)
-    )).all()
-    
-    for node in main_nodes:
-        # Prüfen, ob eine Forum-Kategorie für diesen Knoten bereits existiert
-        existing_category = ForumCategory.query.filter_by(node_id=node.id).first()
-        if existing_category:
-            continue
-        
-        # Neue Kategorie erstellen
-        forum_category = ForumCategory(
-            node_id=node.id,
-            title=node.name,
-            description=node.description,
-            is_active=True
-        )
-        db.session.add(forum_category)
-    
-    db.session.commit()
-    print("Forum-Kategorien wurden für alle Hauptknotenpunkte erstellt!")
-
-def initialize_database():
-    """Initialisiert die Datenbank mit Grunddaten, falls diese leer ist"""
-    try:
-        print("Initialisiere die Datenbank...")
-        
-        # Erstelle alle Tabellen
-        db.create_all()
-        
-        # Prüfen, ob bereits Kategorien existieren
-        categories_count = Category.query.count()
-        users_count = User.query.count()
-        
-        # Erstelle Standarddaten, wenn es keine Kategorien gibt
-        if categories_count == 0:
-            create_default_categories()
-        
-        # Admin-Benutzer erstellen, wenn keine Benutzer vorhanden sind
-        if users_count == 0:
-            admin_user = User(
-                username="admin",
-                email="admin@example.com",
-                role="admin",
-                is_active=True
-            )
-            admin_user.set_password("admin123")  # Sicheres Passwort in der Produktion verwenden!
-            db.session.add(admin_user)
-            db.session.commit()
-            print("Admin-Benutzer wurde erstellt!")
-        
-        # Forum-Kategorien erstellen
-        create_forum_categories()
-        
-        return True
-    except Exception as e:
-        print(f"Fehler bei Datenbank-Initialisierung: {e}")
-        return False
-
-# Instead of before_first_request, which is deprecated in newer Flask versions
-# Use a function to initialize the database that will be called during app creation
-def init_app_database(app_instance):
-    """Initialisiert die Datenbank für die Flask-App"""
-    with app_instance.app_context():
-        # Überprüfe und initialisiere die Datenbank bei Bedarf
-        if not initialize_db_if_needed(db, initialize_database):
-            print("WARNUNG: Datenbankinitialisierung fehlgeschlagen. Einige Funktionen könnten eingeschränkt sein.")
-
-# Call the function to initialize the database
-init_app_database(app)
-
 # Benutzerdefinierter Decorator für Admin-Zugriff
 def admin_required(f):
    @wraps(f)
@@ -345,35 +144,15 @@ def index():
 # Route for the mindmap page
@app.route('/mindmap')
 def mindmap():
-    """Zeigt die Mindmap-Seite an."""
+    """Zeigt die öffentliche Mindmap an."""
+    # Sicherstellen, dass wir Kategorien haben
+    with app.app_context():
+        if Category.query.count() == 0:
+            create_default_categories()
    
-    # Benutzer-Mindmaps, falls angemeldet
-    user_mindmaps = []
-    if current_user.is_authenticated:
-        user_mindmaps = UserMindmap.query.filter_by(user_id=current_user.id).all()
-    
-    # Stelle sicher, dass der "Wissen"-Knoten existiert
-    wissen_node = MindMapNode.query.filter_by(name="Wissen").first()
-    if not wissen_node:
-        wissen_node = MindMapNode(
-            name="Wissen",
-            description="Zentrale Wissensbasis",
-            color_code="#4299E1",
-            is_public=True
-        )
-        db.session.add(wissen_node)
-        db.session.commit()
-        print("'Wissen'-Knoten wurde erstellt")
-    
-    # Überprüfe, ob es Kategorien gibt, sonst erstelle sie
-    if Category.query.count() == 0:
-        create_default_categories()
-        print("Kategorien wurden erstellt")
-    
-    # Stelle sicher, dass die Route für statische Dateien korrekt ist
-    mindmap_js_path = url_for('static', filename='js/mindmap-init.js')
-    
-    return render_template('mindmap.html', user_mindmaps=user_mindmaps, mindmap_js_path=mindmap_js_path)
+    # Hole alle Kategorien der obersten Ebene
+    categories = Category.query.filter_by(parent_id=None).all()
+    return render_template('mindmap.html', categories=categories)

 # Route for user profile
@app.route('/profile')
@@ -381,47 +160,16 @@ def mindmap():
 def profile():
    # Lade Benutzer-Mindmaps
    user_mindmaps = UserMindmap.query.filter_by(user_id=current_user.id).all()
-    
    # Lade Statistiken
    thought_count = Thought.query.filter_by(user_id=current_user.id).count()
-    bookmark_count = db.session.query(user_thought_bookmark).filter(
-        user_thought_bookmark.c.user_id == current_user.id).count()
-    
-    # Berechne tatsächliche Werte für Benutzerstatistiken
-    contributions_count = Comment.query.filter_by(user_id=current_user.id).count()
-    
-    # Berechne Verbindungen (Anzahl der Gedankenverknüpfungen)
-    connections_count = ThoughtRelation.query.filter(
-        (ThoughtRelation.source_id.in_(
-            db.session.query(Thought.id).filter_by(user_id=current_user.id)
-        )) | 
-        (ThoughtRelation.target_id.in_(
-            db.session.query(Thought.id).filter_by(user_id=current_user.id)
-        ))
-    ).count()
-    
-    # Berechne durchschnittliche Bewertung der Gedanken des Benutzers
-    avg_rating = db.session.query(func.avg(ThoughtRating.relevance_score)).join(
-        Thought, Thought.id == ThoughtRating.thought_id
-    ).filter(Thought.user_id == current_user.id).scalar() or 0
-    
-    # Hole die Anzahl der Follower (falls implementiert)
-    # In diesem Beispiel nehmen wir an, dass es keine Follower-Funktionalität gibt
-    followers_count = 0
-    
-    # Hole den Standort des Benutzers aus der Datenbank, falls vorhanden
-    location = "Deutschland"  # Standardwert
+    bookmark_count = db.session.query(func.count()).select_from(user_thought_bookmark).filter(
+        user_thought_bookmark.c.user_id == current_user.id
+    ).scalar()
    
    return render_template('profile.html', 
-                          user=current_user,
                          user_mindmaps=user_mindmaps, 
                          thought_count=thought_count,
-                          bookmark_count=bookmark_count,
-                          connections_count=connections_count,
-                          contributions_count=contributions_count,
-                          followers_count=followers_count,
-                          rating=round(avg_rating, 1),
-                          location=location)
+                          bookmark_count=bookmark_count)

 # Route für Benutzereinstellungen
@app.route('/settings', methods=['GET', 'POST'])
@@ -454,7 +202,7 @@ def settings():
                current_user.set_password(new_password)
                db.session.commit()
                flash('Passwort erfolgreich aktualisiert!', 'success')
-        
+                
        return redirect(url_for('settings'))
        
    return render_template('settings.html')
@@ -492,10 +240,6 @@ def datenschutz():
 def agb():
    return render_template('agb.html')

-@app.route('/ueber-uns/')
-def ueber_uns():
-    return render_template('ueber_uns.html')
-
 # Benutzer-Mindmap-Funktionalität
@app.route('/my-mindmap/<int:mindmap_id>')
@login_required
@@ -584,44 +328,33 @@ def get_public_mindmap():
    return jsonify(result)

 def build_category_tree(category):
-    """
-    Erstellt eine Baumstruktur für eine Kategorie mit all ihren Unterkategorien
-    und dazugehörigen Knoten
+    """Rekursive Funktion zum Aufbau der Kategoriestruktur."""
+    nodes = []
+    # Hole alle Knoten in dieser Kategorie
+    for node in category.nodes:
+        if node.is_public:
+            nodes.append({
+                'id': node.id,
+                'name': node.name,
+                'description': node.description,
+                'color_code': node.color_code,
+                'thought_count': len(node.thoughts)
+            })
    
-    Args:
-        category: Ein Category-Objekt
-        
-    Returns:
-        dict: Eine JSON-serialisierbare Darstellung der Kategoriestruktur
-    """
-    # Kategorie-Basisinformationen
-    category_dict = {
+    # Rekursiv durch Unterkaterorien
+    children = []
+    for child in category.children:
+        children.append(build_category_tree(child))
+    
+    return {
        'id': category.id,
        'name': category.name,
        'description': category.description,
        'color_code': category.color_code,
        'icon': category.icon,
-        'nodes': [],
-        'children': []
+        'nodes': nodes,
+        'children': children
    }
-    
-    # Knoten zur Kategorie hinzufügen
-    if category.nodes:
-        for node in category.nodes:
-            category_dict['nodes'].append({
-                'id': node.id,
-                'name': node.name,
-                'description': node.description or '',
-                'color_code': node.color_code or '#9F7AEA',
-                'thought_count': len(node.thoughts) if hasattr(node, 'thoughts') else 0
-            })
-    
-    # Rekursiv Unterkategorien hinzufügen
-    if category.children:
-        for child in category.children:
-            category_dict['children'].append(build_category_tree(child))
-    
-    return category_dict

@app.route('/api/mindmap/user/<int:mindmap_id>')
@login_required
@@ -890,30 +623,45 @@ def delete_note(note_id):
@app.route('/api/mindmap')
 def get_mindmap():
    """API-Endpunkt zur Bereitstellung der Mindmap-Daten in hierarchischer Form."""
-    # Root-Knoten: Knoten ohne Eltern
-    root_nodes = MindMapNode.query.\
-        outerjoin(node_relationship, MindMapNode.id == node_relationship.c.child_id).\
-        filter(node_relationship.c.parent_id == None).all()
-
+    # Alle root-Nodes (ohne parent) abrufen
+    root_nodes = MindMapNode.query.filter_by(parent_id=None).all()
+    
+    if not root_nodes:
+        # Wenn keine Nodes existieren, rufen wir initialize_database direkt auf
+        # anstatt create_sample_mindmap zu verwenden
+        with app.app_context():
+            initialize_database()
+        root_nodes = MindMapNode.query.filter_by(parent_id=None).all()
+    
+    # Ergebnisse in hierarchischer Struktur zurückgeben
    result = []
+    
    for node in root_nodes:
        node_data = build_node_tree(node)
        result.append(node_data)
+    
    return jsonify({"nodes": result})

 def build_node_tree(node):
    """Erzeugt eine hierarchische Darstellung eines Knotens inkl. seiner Kindknoten."""
+    # Gedankenzähler abrufen von der many-to-many Beziehung
    thought_count = len(node.thoughts)
+    
+    # Daten für aktuellen Knoten
    node_data = {
        "id": node.id,
        "name": node.name,
-        "description": node.description or "",
+        "description": f"Knoten mit {thought_count} Gedanken",
        "thought_count": thought_count,
        "children": []
    }
-    for child in node.children:
-        child_data = build_node_tree(child)
+    
+    # Rekursiv Kinder hinzufügen
+    child_nodes = MindMapNode.query.filter_by(parent_id=node.id).all()
+    for child_node in child_nodes:
+        child_data = build_node_tree(child_node)
        node_data["children"].append(child_data)
+    
    return node_data

@app.route('/api/nodes/<int:node_id>/thoughts')
@@ -1126,21 +874,17 @@ def bookmark_thought(thought_id):

@app.route('/api/categories')
 def get_categories():
-    """API-Endpunkt, der alle Kategorien als hierarchische Struktur zurückgibt"""
-    try:
-        # Hole alle Kategorien der obersten Ebene
-        categories = Category.query.filter_by(parent_id=None).all()
-        
-        # Transformiere zu einer Baumstruktur
-        category_tree = [build_category_tree(cat) for cat in categories]
-        
-        return jsonify(category_tree)
-    except Exception as e:
-        print(f"Fehler beim Abrufen der Kategorien: {str(e)}")
-        return jsonify({
-            'success': False,
-            'error': 'Kategorien konnten nicht geladen werden'
-        }), 500
+    """Liefert alle verfügbaren Kategorien."""
+    categories = Category.query.all()
+    
+    return jsonify([{
+        'id': category.id,
+        'name': category.name,
+        'description': category.description,
+        'color_code': category.color_code,
+        'icon': category.icon,
+        'parent_id': category.parent_id
+    } for category in categories])

@app.route('/api/set_dark_mode', methods=['POST'])
 def set_dark_mode():
@@ -1186,7 +930,7 @@ def too_many_requests(e):
 # OpenAI-Integration für KI-Assistenz
@app.route('/api/assistant', methods=['POST'])
 def chat_with_assistant():
-    """Chatbot-API mit OpenAI Integration und Datenbankzugriff."""
+    """Chatbot-API mit OpenAI Integration."""
    data = request.json
    
    # Prüfen, ob wir ein einzelnes Prompt oder ein messages-Array haben
@@ -1199,18 +943,9 @@ def chat_with_assistant():
            
        # Extrahiere Systemnachricht falls vorhanden, sonst Standard-Systemnachricht
        system_message = next((msg['content'] for msg in messages if msg['role'] == 'system'), 
-            "Du bist ein spezialisierter Assistent für Systades, eine innovative Wissensmanagement-Plattform. "
-            "Systades ist ein intelligentes System zur Verwaltung, Verknüpfung und Visualisierung von Wissen. "
-            "Die Plattform ermöglicht es Nutzern, Gedanken zu erfassen, in Kategorien zu organisieren und durch Mindmaps zu visualisieren. "
-            "Wichtige Funktionen sind:\n"
-            "- Gedankenverwaltung mit Titeln, Zusammenfassungen und Keywords\n"
-            "- Kategorisierung und thematische Organisation\n"
-            "- Interaktive Mindmaps zur Wissensvisualisierung\n"
-            "- KI-gestützte Analyse und Zusammenfassung von Inhalten\n"
-            "- Kollaborative Wissensarbeit und Teilen von Inhalten\n\n"
-            "Du antwortest AUSSCHLIESSLICH auf Fragen bezüglich der Systades-Wissensdatenbank und Website. "
-            "Du kannst Informationen zu Gedanken, Kategorien und Mindmaps liefern und durch Themen führen. "
-            "Antworte informativ, sachlich und gut strukturiert auf Deutsch.")
+            "Du bist ein hilfreicher Assistent, der Menschen dabei hilft, "
+            "Wissen zu organisieren und zu verknüpfen. Liefere informative, "
+            "sachliche und gut strukturierte Antworten.")
        
        # Formatiere Nachrichten für OpenAI API
        api_messages = [{"role": "system", "content": system_message}]
@@ -1223,7 +958,6 @@ def chat_with_assistant():
        # Alte Implementierung für direktes Prompt
        prompt = data.get('prompt', '')
        context = data.get('context', '')
-        selected_items = data.get('selected_items', [])  # Ausgewählte Elemente aus der Datenbank
        
        if not prompt:
            return jsonify({
@@ -1232,159 +966,163 @@ def chat_with_assistant():
        
        # Zusammenfassen mehrerer Gedanken oder Analyse anfordern
        system_message = (
-            "Du bist ein spezialisierter Assistent für Systades, eine innovative Wissensmanagement-Plattform. "
-            "Systades ist ein intelligentes System zur Verwaltung, Verknüpfung und Visualisierung von Wissen. "
-            "Die Plattform ermöglicht es Nutzern, Gedanken zu erfassen, in Kategorien zu organisieren und durch Mindmaps zu visualisieren. "
-            "Wichtige Funktionen sind:\n"
-            "- Gedankenverwaltung mit Titeln, Zusammenfassungen und Keywords\n"
-            "- Kategorisierung und thematische Organisation\n"
-            "- Interaktive Mindmaps zur Wissensvisualisierung\n"
-            "- KI-gestützte Analyse und Zusammenfassung von Inhalten\n"
-            "- Kollaborative Wissensarbeit und Teilen von Inhalten\n\n"
-            "Du antwortest AUSSCHLIESSLICH auf Fragen bezüglich der Systades-Wissensdatenbank und Website. "
-            "Du kannst Informationen zu Gedanken, Kategorien und Mindmaps liefern und durch Themen führen. "
-            "Antworte informativ, sachlich und gut strukturiert auf Deutsch."
+            "Du bist ein hilfreicher Assistent, der Menschen dabei hilft, "
+            "Wissen zu organisieren und zu verknüpfen. Liefere informative, "
+            "sachliche und gut strukturierte Antworten."
        )
        
        if context:
            system_message += f"\n\nKontext: {context}"
-            
-        if selected_items:
-            system_message += "\n\nAusgewählte Elemente aus der Datenbank:\n"
-            for item in selected_items:
-                if 'type' in item and 'data' in item:
-                    if item['type'] == 'thought':
-                        system_message += f"- Gedanke: {item['data'].get('title', 'Unbekannter Titel')}\n"
-                        system_message += f"  Zusammenfassung: {item['data'].get('abstract', 'Keine Zusammenfassung')}\n"
-                        system_message += f"  Keywords: {item['data'].get('keywords', 'Keine Keywords')}\n"
-                    elif item['type'] == 'category':
-                        system_message += f"- Kategorie: {item['data'].get('name', 'Unbekannte Kategorie')}\n"
-                        system_message += f"  Beschreibung: {item['data'].get('description', 'Keine Beschreibung')}\n"
-                        system_message += f"  Unterkategorien: {item['data'].get('subcategories', 'Keine Unterkategorien')}\n"
-                    elif item['type'] == 'mindmap':
-                        system_message += f"- Mindmap: {item['data'].get('name', 'Unbekannte Mindmap')}\n"
-                        system_message += f"  Beschreibung: {item['data'].get('description', 'Keine Beschreibung')}\n"
-                        system_message += f"  Knoten: {item['data'].get('nodes', 'Keine Knoten')}\n"
        
        api_messages = [
            {"role": "system", "content": system_message},
            {"role": "user", "content": prompt}
        ]
    
-    # Extrahiere die letzte Benutzernachricht für Datenbankabfragen
-    user_message = next((msg['content'] for msg in reversed(api_messages) if msg['role'] == 'user'), '')
-    
-    # Prüfen, ob die Anfrage nach Datenbankinformationen sucht
-    db_context = check_database_query(user_message)
-    
-    if db_context:
-        # Erweitere den Kontext mit Datenbankinformationen
-        api_messages.append({
-            "role": "system", 
-            "content": f"Hier sind relevante Informationen aus der Datenbank:\n\n{db_context}"
-        })
-    
    try:
-        # Überprüfen ob OpenAI API-Key konfiguriert ist
-        if not client.api_key or client.api_key.startswith("sk-dummy"):
-            print("Warnung: OpenAI API-Key ist nicht oder nur als Dummy konfiguriert!")
-            return jsonify({
-                'error': 'Der OpenAI API-Key ist nicht korrekt konfiguriert. Bitte konfigurieren Sie die Umgebungsvariable OPENAI_API_KEY.'
-            }), 500
-            
-        # API-Aufruf mit Timeout
-        import time
-        start_time = time.time()
-        
        response = client.chat.completions.create(
            model="gpt-4o-mini",
            messages=api_messages,
-            max_tokens=1000,  # Erhöht für ausführlichere Antworten und detaillierte Führungen
-            temperature=0.7,
-            timeout=20  # 20 Sekunden Timeout
+            max_tokens=300,
+            temperature=0.7
        )
        
-        print(f"OpenAI API-Antwortzeit: {time.time() - start_time:.2f} Sekunden")
-        
        answer = response.choices[0].message.content
        
        # Für das neue Format erwarten wir response statt answer
        return jsonify({
            'response': answer
        })
-    
-    except Exception as e:
-        import traceback
-        print(f"Fehler bei der OpenAI-Anfrage: {str(e)}")
-        print(traceback.format_exc())
        
+    except Exception as e:
        return jsonify({
            'error': f'Fehler bei der OpenAI-Anfrage: {str(e)}'
        }), 500

-def check_database_query(user_message):
-    """
-    Überprüft, ob die Benutzeranfrage nach Datenbankinformationen sucht und extrahiert 
-    relevante Daten aus der Datenbank.
-    """
-    context = []
+# App-Kontext-Funktion für Initialisierung der Datenbank
+def create_default_categories():
+    """Erstellt die Standard-Kategorien und wissenschaftlichen Bereiche."""
+    categories = [
+        {
+            'name': 'Naturwissenschaften',
+            'description': 'Empirische Untersuchung und Erklärung natürlicher Phänomene',
+            'color_code': '#4CAF50',
+            'icon': 'flask',
+            'children': [
+                {
+                    'name': 'Physik',
+                    'description': 'Studium der Materie, Energie und deren Wechselwirkungen',
+                    'color_code': '#81C784',
+                    'icon': 'atom'
+                },
+                {
+                    'name': 'Biologie',
+                    'description': 'Wissenschaft des Lebens und lebender Organismen',
+                    'color_code': '#66BB6A',
+                    'icon': 'leaf'
+                },
+                {
+                    'name': 'Chemie',
+                    'description': 'Wissenschaft der Materie, ihrer Eigenschaften und Reaktionen',
+                    'color_code': '#A5D6A7',
+                    'icon': 'vial'
+                }
+            ]
+        },
+        {
+            'name': 'Sozialwissenschaften',
+            'description': 'Untersuchung von Gesellschaft und menschlichem Verhalten',
+            'color_code': '#2196F3',
+            'icon': 'users',
+            'children': [
+                {
+                    'name': 'Psychologie',
+                    'description': 'Wissenschaftliches Studium des Geistes und Verhaltens',
+                    'color_code': '#64B5F6',
+                    'icon': 'brain'
+                },
+                {
+                    'name': 'Soziologie',
+                    'description': 'Studium sozialer Beziehungen und Institutionen',
+                    'color_code': '#42A5F5',
+                    'icon': 'network-wired'
+                }
+            ]
+        },
+        {
+            'name': 'Geisteswissenschaften',
+            'description': 'Studium menschlicher Kultur und Kreativität',
+            'color_code': '#9C27B0',
+            'icon': 'book',
+            'children': [
+                {
+                    'name': 'Philosophie',
+                    'description': 'Untersuchung grundlegender Fragen über Existenz, Wissen und Ethik',
+                    'color_code': '#BA68C8',
+                    'icon': 'lightbulb'
+                },
+                {
+                    'name': 'Geschichte',
+                    'description': 'Studium der Vergangenheit und ihres Einflusses auf die Gegenwart',
+                    'color_code': '#AB47BC',
+                    'icon': 'landmark'
+                },
+                {
+                    'name': 'Literatur',
+                    'description': 'Studium literarischer Werke und ihrer Bedeutung',
+                    'color_code': '#CE93D8',
+                    'icon': 'feather'
+                }
+            ]
+        },
+        {
+            'name': 'Technologie',
+            'description': 'Anwendung wissenschaftlicher Erkenntnisse für praktische Zwecke',
+            'color_code': '#FF9800',
+            'icon': 'microchip',
+            'children': [
+                {
+                    'name': 'Informatik',
+                    'description': 'Studium von Computern und Berechnungssystemen',
+                    'color_code': '#FFB74D',
+                    'icon': 'laptop-code'
+                },
+                {
+                    'name': 'Künstliche Intelligenz',
+                    'description': 'Entwicklung intelligenter Maschinen und Software',
+                    'color_code': '#FFA726',
+                    'icon': 'robot'
+                }
+            ]
+        }
+    ]
    
-    # Prüfen auf verschiedene Datenbankabfragemuster
-    if any(keyword in user_message.lower() for keyword in ['gedanken', 'thought', 'beitrag', 'inhalt']):
-        # Suche nach relevanten Gedanken
-        thoughts = Thought.query.filter(
-            db.or_(
-                Thought.title.ilike(f'%{word}%') for word in user_message.split()
-                if len(word) > 3  # Nur längere Wörter zur Suche verwenden
-            )
-        ).limit(5).all()
+    # Kategorien in die Datenbank einfügen
+    for category_data in categories:
+        children_data = category_data.pop('children', [])
+        category = Category(**category_data)
+        db.session.add(category)
+        db.session.flush()  # Um die ID zu generieren
        
-        if thoughts:
-            context.append("Relevante Gedanken:")
-            for thought in thoughts:
-                context.append(f"- Titel: {thought.title}")
-                context.append(f"  Zusammenfassung: {thought.abstract if thought.abstract else 'Keine Zusammenfassung verfügbar'}")
-                context.append(f"  Keywords: {thought.keywords if thought.keywords else 'Keine Keywords verfügbar'}")
-                context.append("")
+        # Unterkategorien hinzufügen
+        for child_data in children_data:
+            child = Category(**child_data, parent_id=category.id)
+            db.session.add(child)
    
-    if any(keyword in user_message.lower() for keyword in ['kategorie', 'category', 'themengebiet', 'bereich']):
-        # Suche nach Kategorien
-        categories = Category.query.filter(
-            db.or_(
-                Category.name.ilike(f'%{word}%') for word in user_message.split()
-                if len(word) > 3
-            )
-        ).limit(5).all()
-        
-        if categories:
-            context.append("Relevante Kategorien:")
-            for category in categories:
-                context.append(f"- Name: {category.name}")
-                context.append(f"  Beschreibung: {category.description}")
-                context.append("")
+    db.session.commit()
+    print("Standard-Kategorien wurden erstellt!")
+
+def initialize_database():
+    """Initialisiert die Datenbank, falls sie noch nicht existiert."""
+    db.create_all()
    
-    if any(keyword in user_message.lower() for keyword in ['mindmap', 'karte', 'visualisierung']):
-        # Suche nach öffentlichen Mindmaps
-        mindmap_nodes = MindMapNode.query.filter(
-            db.and_(
-                MindMapNode.is_public == True,
-                db.or_(
-                    MindMapNode.name.ilike(f'%{word}%') for word in user_message.split()
-                    if len(word) > 3
-                )
-            )
-        ).limit(5).all()
-        
-        if mindmap_nodes:
-            context.append("Relevante Mindmap-Knoten:")
-            for node in mindmap_nodes:
-                context.append(f"- Name: {node.name}")
-                context.append(f"  Beschreibung: {node.description if node.description else 'Keine Beschreibung verfügbar'}")
-                if node.category:
-                    context.append(f"  Kategorie: {node.category.name}")
-                context.append("")
-    
-    return "\n".join(context) if context else ""
+    # Überprüfe, ob bereits Kategorien existieren
+    if Category.query.count() == 0:
+        create_default_categories()
+
+# Führe die Datenbankinitialisierung beim Starten der App aus
+with app.app_context():
+    initialize_database()

@app.route('/search')
 def search_thoughts_page():
@@ -1407,10 +1145,24 @@ def my_account():
@app.route('/static/network-bg.jpg')
@app.route('/static/network-bg.svg')
 def dummy_network_bg():
-    """Leere Antwort für die nicht mehr verwendeten Netzwerk-Hintergrundbilder."""
-    return '', 200
+    """Stellt einen Fallback für alte Netzwerk-Hintergrund-Anfragen bereit."""
+    return redirect(url_for('static', filename='img/backgrounds/network-bg.jpg'))
+
+@app.route('/static/css/src/cybernetwork-bg.css')
+def serve_cybernetwork_css():
+    """Stellt das CSS für den cybertechnischen Netzwerk-Hintergrund bereit."""
+    return app.send_static_file('css/src/cybernetwork-bg.css')
+
+@app.route('/static/js/modules/cyber-network.js')
+def serve_cybernetwork_js():
+    """Stellt das JavaScript-Modul für den cybertechnischen Netzwerk-Hintergrund bereit."""
+    return app.send_static_file('js/modules/cyber-network.js')
+
+@app.route('/static/js/modules/cyber-network-init.js')
+def serve_cybernetwork_init_js():
+    """Stellt das Initialisierungs-JavaScript für den cybertechnischen Netzwerk-Hintergrund bereit."""
+    return app.send_static_file('js/modules/cyber-network-init.js')

-# Route zum expliziten Neu-Laden der Umgebungsvariablen
@app.route('/admin/reload-env', methods=['POST'])
@admin_required
 def reload_env():
@@ -1440,112 +1192,4 @@ if __name__ == '__main__':
    with app.app_context():
        # Make sure tables exist
        db.create_all()
-    socketio.run(app, debug=True, host='0.0.0.0')
-
-@app.route('/api/refresh-mindmap')
-def refresh_mindmap():
-    """
-    API-Endpunkt zum Neuladen der Mindmap-Daten,
-    wenn die Datenbank-Verbindung vorübergehend fehlgeschlagen ist
-    """
-    try:
-        # Stelle sicher, dass wir Kategorien haben
-        if Category.query.count() == 0:
-            create_default_categories()
-        
-        # Überprüfe, ob wir bereits einen "Wissen"-Knoten haben
-        wissen_node = MindMapNode.query.filter_by(name="Wissen").first()
-        
-        # Wenn kein "Wissen"-Knoten existiert, erstelle ihn
-        if not wissen_node:
-            wissen_node = MindMapNode(
-                name="Wissen",
-                description="Zentrale Wissensbasis",
-                color_code="#4299E1",
-                is_public=True
-            )
-            db.session.add(wissen_node)
-            db.session.commit()
-        
-        # Hole alle Kategorien und Knoten
-        categories = Category.query.filter_by(parent_id=None).all()
-        category_tree = [build_category_tree(cat) for cat in categories]
-        
-        # Hole alle Mindmap-Knoten außer dem "Wissen"-Knoten
-        nodes = MindMapNode.query.filter(MindMapNode.id != wissen_node.id).all()
-        
-        # Vorbereiten der Node- und Edge-Arrays für die Antwort
-        node_data = []
-        edge_data = []
-        
-        # Zuerst den "Wissen"-Knoten hinzufügen
-        node_data.append({
-            'id': wissen_node.id,
-            'name': wissen_node.name,
-            'description': wissen_node.description or '',
-            'color_code': wissen_node.color_code or '#4299E1',
-            'thought_count': len(wissen_node.thoughts),
-            'category_id': wissen_node.category_id
-        })
-        
-        # Dann die anderen Knoten
-        for node in nodes:
-            node_obj = {
-                'id': node.id,
-                'name': node.name,
-                'description': node.description or '',
-                'color_code': node.color_code or '#9F7AEA',
-                'thought_count': len(node.thoughts),
-                'category_id': node.category_id
-            }
-            
-            # Verbinde alle Top-Level-Knoten mit dem Wissen-Knoten
-            if not node.parents.all():
-                edge_data.append({
-                    'source': wissen_node.id,
-                    'target': node.id
-                })
-            
-            # Verbindungen zwischen vorhandenen Knoten hinzufügen
-            node_children = node.children.all()
-            for child in node_children:
-                edge_data.append({
-                    'source': node.id,
-                    'target': child.id
-                })
-            
-            node_data.append(node_obj)
-        
-        return jsonify({
-            'success': True,
-            'categories': category_tree,
-            'nodes': node_data,
-            'edges': edge_data
-        })
-        
-    except Exception as e:
-        print(f"Fehler beim Neuladen der Mindmap: {str(e)}")
-        return jsonify({
-            'success': False,
-            'error': 'Datenbankverbindung konnte nicht hergestellt werden'
-        }), 500
-
-# Route zur Mindmap HTML-Seite
-@app.route('/mindmap')
-def mindmap_page():
-    return render_template('mindmap.html')
-
-# Einfache Umleitungen für Community/Forum-Routen
-@app.route('/community')
-@app.route('/Community')
-@app.route('/forum')
-@app.route('/Forum')
-@app.route('/community_forum')
-def redirect_to_index():
-    """Leitet alle Community/Forum-URLs zur Startseite um"""
-    return redirect(url_for('index'))
-
-@app.route('/static/js/mindmap-init.js')
-def serve_mindmap_init_js():
-    """Bedient die Mindmap-Initialisierungsdatei."""
-    return app.send_static_file('js/mindmap-init.js'), 200, {'Content-Type': 'application/javascript'}
+    app.run(host="0.0.0.0", debug=True)
--- a/backup/archiv_0.1.zip
+++ b/backup/archiv_0.1.zip
--- a/cookies.txt
+++ b/cookies.txt
@@ -0,0 +1,4 @@
+# Netscape HTTP Cookie File
+# https://curl.se/docs/http-cookies.html
+# This file was generated by libcurl! Edit at your own risk.
+
--- a/database/pycache/models.cpython-313.pyc
+++ b/database/pycache/models.cpython-313.pyc
--- a/database/systades.V2.db.backup
+++ b/database/systades.V2.db.backup
--- a/database/systades.db
+++ b/database/systades.db
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,17 +0,0 @@
-version: '3.9'
-
-services:
-  web:
-    build: .
-    image: systades_app:latest
-    container_name: systades_app
-    restart: always
-    env_file:
-      - .env
-    ports:
-      - "5000:5000"
-    volumes:
-      - ./database:/app/database
-
-volumes:
-  db_data: 
--- a/1
+++ b/1
@@ -1 +0,0 @@
- 
--- a/example.env
+++ b/example.env
@@ -2,12 +2,10 @@
 # Kopiere diese Datei zu .env und passe die Werte an

 # Flask
-FLASK_APP=app.py
-FLASK_ENV=development
-SECRET_KEY=your-secret-key-replace-in-production
+SECRET_KEY=dein-geheimer-schluessel-hier

 # OpenAI API
-
+OPENAI_API_KEY=sk-dein-openai-api-schluessel-hier

 # Datenbank
 # Bei Bedarf kann hier eine andere Datenbank-URL angegeben werden
--- a/init_db.py
+++ b/init_db.py
@@ -5,240 +5,252 @@ from app import app, initialize_database, db_path
 from models import db, User, Thought, Comment, MindMapNode, ThoughtRelation, ThoughtRating, RelationType
 from models import Category, UserMindmap, UserMindmapNode, MindmapNote
 import os
-import sqlite3
-from flask import Flask
-from flask_sqlalchemy import SQLAlchemy
-from datetime import datetime

-# Erstelle eine temporäre Flask-App, um die Datenbank zu initialisieren
-app = Flask(__name__)
-app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///systades.db'
-app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
-db.init_app(app)
+def init_database():
+    """Initialisiert die Datenbank mit Beispieldaten."""
+    with app.app_context():
+        # Datenbank löschen und neu erstellen
+        if os.path.exists(db_path):
+            os.remove(db_path)
+        
+        # Stellen Sie sicher, dass das Verzeichnis existiert
+        os.makedirs(os.path.dirname(db_path), exist_ok=True)
+        
+        db.create_all()
+        
+        # Admin-Benutzer erstellen
+        admin = User(username='admin', email='admin@example.com', is_admin=True)
+        admin.set_password('admin')
+        db.session.add(admin)
+        
+        # Beispiel-Benutzer erstellen
+        user = User(username='user', email='user@example.com')
+        user.set_password('user')
+        db.session.add(user)
+        
+        # Commit, um IDs zu generieren
+        db.session.commit()
+        
+        # Wissenschaftliche Kategorien erstellen
+        science = Category(name='Wissenschaft', description='Wissenschaftliche Erkenntnisse', 
+                          color_code='#4CAF50', icon='flask')
+        db.session.add(science)
+        
+        philosophy = Category(name='Philosophie', description='Philosophische Theorien und Gedanken', 
+                             color_code='#9C27B0', icon='lightbulb')
+        db.session.add(philosophy)
+        
+        technology = Category(name='Technologie', description='Technologische Entwicklungen', 
+                             color_code='#FF9800', icon='microchip')
+        db.session.add(technology)
+        
+        db.session.commit()
+        
+        # Wissenschaftliche Unterkategorien
+        physics = Category(name='Physik', description='Studium der Materie und Energie',
+                          color_code='#81C784', icon='atom', parent_id=science.id)
+        biology = Category(name='Biologie', description='Studium lebender Organismen',
+                          color_code='#66BB6A', icon='leaf', parent_id=science.id)
+        chemistry = Category(name='Chemie', description='Studium der Stoffe und ihrer Reaktionen',
+                            color_code='#A5D6A7', icon='vial', parent_id=science.id)
+        
+        db.session.add_all([physics, biology, chemistry])
+        
+        # Technologie-Unterkategorien
+        informatics = Category(name='Informatik', description='Studium der Informationsverarbeitung',
+                              color_code='#FFB74D', icon='laptop-code', parent_id=technology.id)
+        ai = Category(name='Künstliche Intelligenz', description='Entwicklung intelligenter Systeme',
+                     color_code='#FFA726', icon='robot', parent_id=technology.id)
+        
+        db.session.add_all([informatics, ai])
+        
+        # Philosophie-Unterkategorien
+        ethics = Category(name='Ethik', description='Moralphilosophie und Wertesysteme',
+                         color_code='#BA68C8', icon='balance-scale', parent_id=philosophy.id)
+        logic = Category(name='Logik', description='Studie der gültigen Schlussfolgerungen',
+                        color_code='#AB47BC', icon='project-diagram', parent_id=philosophy.id)
+        
+        db.session.add_all([ethics, logic])
+        
+        db.session.commit()
+        
+        # Knoten für die öffentliche Mindmap erstellen
+        nodes = {
+            'quantenmechanik': MindMapNode(
+                name='Quantenmechanik',
+                description='Physikalische Theorie zur Beschreibung der Materie auf atomarer Ebene',
+                color_code='#81C784',
+                category_id=physics.id,
+                created_by_id=admin.id
+            ),
+            'relativitaetstheorie': MindMapNode(
+                name='Relativitätstheorie',
+                description='Einsteins Theorien zur Raumzeit und Gravitation',
+                color_code='#81C784',
+                category_id=physics.id,
+                created_by_id=admin.id
+            ),
+            'genetik': MindMapNode(
+                name='Genetik',
+                description='Wissenschaft der Gene und Vererbung',
+                color_code='#66BB6A',
+                category_id=biology.id,
+                created_by_id=admin.id
+            ),
+            'machine_learning': MindMapNode(
+                name='Machine Learning',
+                description='Algorithmen, die aus Daten lernen können',
+                color_code='#FFA726',
+                category_id=ai.id,
+                created_by_id=admin.id
+            ),
+            'ki_ethik': MindMapNode(
+                name='KI-Ethik',
+                description='Moralische Implikationen künstlicher Intelligenz',
+                color_code='#BA68C8',
+                category_id=ethics.id,
+                created_by_id=user.id
+            )
+        }
+        
+        for node in nodes.values():
+            db.session.add(node)
+        
+        db.session.commit()
+        
+        # Verknüpfungen zwischen Knoten herstellen (Hierarchie)
+        nodes['machine_learning'].parents.append(nodes['ki_ethik'])
+        db.session.commit()
+        
+        # Gedanken erstellen
+        thoughts = [
+            {
+                'title': 'Künstliche Intelligenz und Bewusstsein',
+                'content': 'Die Frage nach maschinellem Bewusstsein ist fundamental für die KI-Ethik. Aktuelle KI-Systeme haben kein Bewusstsein, aber fortschrittliche KI könnte in Zukunft Eigenschaften entwickeln, die diesem nahekommen.',
+                'abstract': 'Eine Untersuchung der philosophischen Implikationen von KI-Bewusstsein.',
+                'keywords': 'KI, Bewusstsein, Ethik, Philosophie',
+                'branch': 'Philosophie',
+                'color_code': '#BA68C8',
+                'source_type': 'Markdown',
+                'user_id': user.id,
+                'node': nodes['ki_ethik']
+            },
+            {
+                'title': 'Quantenmechanik und Realität',
+                'content': 'Die Kopenhagener Deutung und ihre Auswirkungen auf unser Verständnis der Realität. Quantenmechanik stellt grundlegende Annahmen über Determinismus und Lokalität in Frage.',
+                'abstract': 'Eine Analyse verschiedener Interpretationen der Quantenmechanik.',
+                'keywords': 'Quantenmechanik, Physik, Realität',
+                'branch': 'Physik',
+                'color_code': '#81C784',
+                'source_type': 'PDF',
+                'user_id': admin.id,
+                'node': nodes['quantenmechanik']
+            },
+            {
+                'title': 'Deep Learning Fortschritte',
+                'content': 'Die neuesten Fortschritte im Deep Learning haben zu beeindruckenden Ergebnissen in Bereichen wie Computer Vision, Natural Language Processing und Reinforcement Learning geführt.',
+                'abstract': 'Überblick über aktuelle Deep Learning-Techniken und ihre Anwendungen.',
+                'keywords': 'Deep Learning, Neural Networks, AI',
+                'branch': 'Technologie',
+                'color_code': '#FFA726',
+                'source_type': 'Webpage',
+                'user_id': admin.id,
+                'node': nodes['machine_learning']
+            }
+        ]
+        
+        thought_objects = []
+        for t_data in thoughts:
+            node = t_data.pop('node')
+            thought = Thought(**t_data)
+            node.thoughts.append(thought)
+            thought_objects.append(thought)
+            db.session.add(thought)
+        
+        db.session.commit()
+        
+        # Beziehungen zwischen Gedanken
+        relation = ThoughtRelation(
+            source_id=thought_objects[0].id,
+            target_id=thought_objects[2].id,
+            relation_type=RelationType.INSPIRES,
+            created_by_id=user.id
+        )
+        db.session.add(relation)
+        
+        # Bewertungen erstellen
+        rating1 = ThoughtRating(
+            thought_id=thought_objects[0].id,
+            user_id=admin.id,
+            relevance_score=5
+        )
+        rating2 = ThoughtRating(
+            thought_id=thought_objects[2].id,
+            user_id=user.id,
+            relevance_score=4
+        )
+        db.session.add_all([rating1, rating2])
+        
+        # Kommentare erstellen
+        for thought in thought_objects:
+            comment = Comment(
+                content=f'Interessante Perspektive zu {thought.title}!',
+                thought_id=thought.id,
+                user_id=admin.id if thought.user_id != admin.id else user.id
+            )
+            db.session.add(comment)
+        
+        # Benutzer-Mindmaps erstellen
+        user_mindmap = UserMindmap(
+            name='Meine KI-Forschung',
+            description='Meine persönliche Sammlung zu KI und Ethik',
+            user_id=user.id
+        )
+        db.session.add(user_mindmap)
+        db.session.commit()
+        
+        # Knoten zur Benutzer-Mindmap hinzufügen
+        user_mindmap_nodes = [
+            UserMindmapNode(
+                user_mindmap_id=user_mindmap.id,
+                node_id=nodes['machine_learning'].id,
+                x_position=200,
+                y_position=300
+            ),
+            UserMindmapNode(
+                user_mindmap_id=user_mindmap.id,
+                node_id=nodes['ki_ethik'].id,
+                x_position=500,
+                y_position=200
+            )
+        ]
+        db.session.add_all(user_mindmap_nodes)
+        
+        # Private Notizen
+        note = MindmapNote(
+            user_id=user.id,
+            mindmap_id=user_mindmap.id,
+            node_id=nodes['ki_ethik'].id,
+            content="Recherchiere mehr über aktuelle ethische Richtlinien für KI-Entwicklung!",
+            color_code="#FFF59D"
+        )
+        db.session.add(note)
+        
+        # Gedanken zu Bookmarks hinzufügen
+        user.bookmarked_thoughts.append(thought_objects[0])
+        admin.bookmarked_thoughts.append(thought_objects[1])
+        
+        # Finaler Commit
+        db.session.commit()
+        
+        print("Datenbank wurde erfolgreich initialisiert!")

 def init_db():
-    with app.app_context():
-        print("Initialisiere Datenbank...")
-        
-        # Tabellen erstellen
-        db.create_all()
-        print("Tabellen wurden erstellt.")
-        
-        # Standardbenutzer erstellen, falls keine vorhanden sind
-        if User.query.count() == 0:
-            print("Erstelle Standardbenutzer...")
-            create_default_users()
-        
-        # Standardkategorien erstellen, falls keine vorhanden sind
-        if Category.query.count() == 0:
-            print("Erstelle Standardkategorien...")
-            create_default_categories()
-            
-        # Beispiel-Mindmap erstellen, falls keine Knoten vorhanden sind
-        if MindMapNode.query.count() == 0:
-            print("Erstelle Beispiel-Mindmap...")
-            create_sample_mindmap()
-            
-        print("Datenbankinitialisierung abgeschlossen.")
-
-def create_default_users():
-    """Erstellt Standardbenutzer für die Anwendung"""
-    users = [
-        {
-            'username': 'admin',
-            'email': 'admin@example.com',
-            'password': 'admin',
-            'role': 'admin'
-        },
-        {
-            'username': 'user',
-            'email': 'user@example.com',
-            'password': 'user',
-            'role': 'user'
-        }
-    ]
-    
-    for user_data in users:
-        password = user_data.pop('password')
-        user = User(**user_data)
-        user.set_password(password)
-        db.session.add(user)
-    
-    db.session.commit()
-    print(f"{len(users)} Benutzer wurden erstellt.")
-
-def create_default_categories():
-    """Erstellt die Standardkategorien für die Mindmap"""
-    categories = [
-        {
-            'name': 'Konzept',
-            'description': 'Abstrakte Ideen und theoretische Konzepte',
-            'color_code': '#6366f1',
-            'icon': 'lightbulb'
-        },
-        {
-            'name': 'Technologie',
-            'description': 'Hardware, Software, Tools und Plattformen',
-            'color_code': '#10b981',
-            'icon': 'cpu'
-        },
-        {
-            'name': 'Prozess',
-            'description': 'Workflows, Methodologien und Vorgehensweisen',
-            'color_code': '#f59e0b',
-            'icon': 'git-branch'
-        },
-        {
-            'name': 'Person',
-            'description': 'Personen, Teams und Organisationen',
-            'color_code': '#ec4899',
-            'icon': 'user'
-        },
-        {
-            'name': 'Dokument',
-            'description': 'Dokumentationen, Referenzen und Ressourcen',
-            'color_code': '#3b82f6',
-            'icon': 'file-text'
-        }
-    ]
-    
-    for cat_data in categories:
-        category = Category(**cat_data)
-        db.session.add(category)
-    
-    db.session.commit()
-    print(f"{len(categories)} Kategorien wurden erstellt.")
-
-def create_sample_mindmap():
-    """Erstellt eine Beispiel-Mindmap mit Knoten und Beziehungen"""
-    
-    # Kategorien für die Zuordnung
-    categories = Category.query.all()
-    category_map = {cat.name: cat for cat in categories}
-    
-    # Beispielknoten erstellen
-    nodes = [
-        {
-            'name': 'Wissensmanagement',
-            'description': 'Systematische Erfassung, Speicherung und Nutzung von Wissen in Organisationen.',
-            'color_code': '#6366f1',
-            'icon': 'database',
-            'category': category_map.get('Konzept'),
-            'x': 0,
-            'y': 0
-        },
-        {
-            'name': 'Mind-Mapping',
-            'description': 'Technik zur visuellen Darstellung von Informationen und Zusammenhängen.',
-            'color_code': '#10b981',
-            'icon': 'git-branch',
-            'category': category_map.get('Prozess'),
-            'x': 200,
-            'y': -150
-        },
-        {
-            'name': 'Cytoscape.js',
-            'description': 'JavaScript-Bibliothek für die Visualisierung und Manipulation von Graphen.',
-            'color_code': '#3b82f6',
-            'icon': 'code',
-            'category': category_map.get('Technologie'),
-            'x': 350,
-            'y': -50
-        },
-        {
-            'name': 'Socket.IO',
-            'description': 'Bibliothek für Echtzeit-Kommunikation zwischen Client und Server.',
-            'color_code': '#3b82f6',
-            'icon': 'zap',
-            'category': category_map.get('Technologie'),
-            'x': 350, 
-            'y': 100
-        },
-        {
-            'name': 'Kollaboration',
-            'description': 'Zusammenarbeit mehrerer Benutzer an gemeinsamen Inhalten.',
-            'color_code': '#f59e0b',
-            'icon': 'users',
-            'category': category_map.get('Prozess'),
-            'x': 200,
-            'y': 150
-        },
-        {
-            'name': 'SQLite',
-            'description': 'Leichtgewichtige relationale Datenbank, die ohne Server-Prozess auskommt.',
-            'color_code': '#3b82f6',
-            'icon': 'database',
-            'category': category_map.get('Technologie'),
-            'x': 0,
-            'y': 200
-        },
-        {
-            'name': 'Flask',
-            'description': 'Leichtgewichtiges Python-Webframework für die Entwicklung von Webanwendungen.',
-            'color_code': '#3b82f6',
-            'icon': 'server',
-            'category': category_map.get('Technologie'),
-            'x': -200,
-            'y': 150
-        },
-        {
-            'name': 'REST API',
-            'description': 'Architekturstil für verteilte Systeme, insbesondere Webanwendungen.',
-            'color_code': '#10b981',
-            'icon': 'link',
-            'category': category_map.get('Konzept'),
-            'x': -200,
-            'y': -150
-        },
-        {
-            'name': 'Dokumentation',
-            'description': 'Strukturierte Erfassung und Beschreibung von Informationen und Prozessen.',
-            'color_code': '#ec4899',
-            'icon': 'file-text',
-            'category': category_map.get('Dokument'),
-            'x': -350,
-            'y': 0
-        }
-    ]
-    
-    # Knoten in die Datenbank einfügen
-    node_objects = {}
-    for node_data in nodes:
-        category = node_data.pop('category', None)
-        x = node_data.pop('x', 0)
-        y = node_data.pop('y', 0)
-        node = MindMapNode(**node_data)
-        if category:
-            node.category_id = category.id
-        db.session.add(node)
-        db.session.flush()  # Generiert IDs für neue Objekte
-        node_objects[node.name] = node
-    
-    # Beziehungen erstellen
-    relationships = [
-        ('Wissensmanagement', 'Mind-Mapping'),
-        ('Wissensmanagement', 'Kollaboration'),
-        ('Wissensmanagement', 'Dokumentation'),
-        ('Mind-Mapping', 'Cytoscape.js'),
-        ('Kollaboration', 'Socket.IO'),
-        ('Wissensmanagement', 'SQLite'),
-        ('SQLite', 'Flask'),
-        ('Flask', 'REST API'),
-        ('REST API', 'Socket.IO'),
-        ('REST API', 'Dokumentation')
-    ]
-    
-    for parent_name, child_name in relationships:
-        parent = node_objects.get(parent_name)
-        child = node_objects.get(child_name)
-        if parent and child:
-            parent.children.append(child)
-    
-    db.session.commit()
-    print(f"{len(nodes)} Knoten und {len(relationships)} Beziehungen wurden erstellt.")
+    """Alias für Kompatibilität mit älteren Scripts."""
+    init_database()

 if __name__ == '__main__':
-    init_db()
+    init_database()
    print("Datenbank wurde erfolgreich initialisiert!")
    print("Sie können die Anwendung jetzt mit 'python app.py' starten")
    print("Anmelden mit:")
--- a/migrations/README
+++ b/migrations/README
@@ -1 +0,0 @@
-Single-database configuration for Flask.
--- a/migrations/pycache/env.cpython-311.pyc
+++ b/migrations/pycache/env.cpython-311.pyc
--- a/migrations/alembic.ini
+++ b/migrations/alembic.ini
@@ -1,50 +0,0 @@
-# A generic, single database configuration.
-
-[alembic]
-# template used to generate migration files
-# file_template = %%(rev)s_%%(slug)s
-
-# set to 'true' to run the environment during
-# the 'revision' command, regardless of autogenerate
-# revision_environment = false
-
-
-# Logging configuration
-[loggers]
-keys = root,sqlalchemy,alembic,flask_migrate
-
-[handlers]
-keys = console
-
-[formatters]
-keys = generic
-
-[logger_root]
-level = WARN
-handlers = console
-qualname =
-
-[logger_sqlalchemy]
-level = WARN
-handlers =
-qualname = sqlalchemy.engine
-
-[logger_alembic]
-level = INFO
-handlers =
-qualname = alembic
-
-[logger_flask_migrate]
-level = INFO
-handlers =
-qualname = flask_migrate
-
-[handler_console]
-class = StreamHandler
-args = (sys.stderr,)
-level = NOTSET
-formatter = generic
-
-[formatter_generic]
-format = %(levelname)-5.5s [%(name)s] %(message)s
-datefmt = %H:%M:%S
--- a/migrations/env.py
+++ b/migrations/env.py
@@ -1,113 +0,0 @@
-import logging
-from logging.config import fileConfig
-
-from flask import current_app
-
-from alembic import context
-
-# this is the Alembic Config object, which provides
-# access to the values within the .ini file in use.
-config = context.config
-
-# Interpret the config file for Python logging.
-# This line sets up loggers basically.
-fileConfig(config.config_file_name)
-logger = logging.getLogger('alembic.env')
-
-
-def get_engine():
-    try:
-        # this works with Flask-SQLAlchemy<3 and Alchemical
-        return current_app.extensions['migrate'].db.get_engine()
-    except (TypeError, AttributeError):
-        # this works with Flask-SQLAlchemy>=3
-        return current_app.extensions['migrate'].db.engine
-
-
-def get_engine_url():
-    try:
-        return get_engine().url.render_as_string(hide_password=False).replace(
-            '%', '%%')
-    except AttributeError:
-        return str(get_engine().url).replace('%', '%%')
-
-
-# add your model's MetaData object here
-# for 'autogenerate' support
-# from myapp import mymodel
-# target_metadata = mymodel.Base.metadata
-config.set_main_option('sqlalchemy.url', get_engine_url())
-target_db = current_app.extensions['migrate'].db
-
-# other values from the config, defined by the needs of env.py,
-# can be acquired:
-# my_important_option = config.get_main_option("my_important_option")
-# ... etc.
-
-
-def get_metadata():
-    if hasattr(target_db, 'metadatas'):
-        return target_db.metadatas[None]
-    return target_db.metadata
-
-
-def run_migrations_offline():
-    """Run migrations in 'offline' mode.
-
-    This configures the context with just a URL
-    and not an Engine, though an Engine is acceptable
-    here as well.  By skipping the Engine creation
-    we don't even need a DBAPI to be available.
-
-    Calls to context.execute() here emit the given string to the
-    script output.
-
-    """
-    url = config.get_main_option("sqlalchemy.url")
-    context.configure(
-        url=url, target_metadata=get_metadata(), literal_binds=True
-    )
-
-    with context.begin_transaction():
-        context.run_migrations()
-
-
-def run_migrations_online():
-    """Run migrations in 'online' mode.
-
-    In this scenario we need to create an Engine
-    and associate a connection with the context.
-
-    """
-
-    # this callback is used to prevent an auto-migration from being generated
-    # when there are no changes to the schema
-    # reference: http://alembic.zzzcomputing.com/en/latest/cookbook.html
-    def process_revision_directives(context, revision, directives):
-        if getattr(config.cmd_opts, 'autogenerate', False):
-            script = directives[0]
-            if script.upgrade_ops.is_empty():
-                directives[:] = []
-                logger.info('No changes in schema detected.')
-
-    conf_args = current_app.extensions['migrate'].configure_args
-    if conf_args.get("process_revision_directives") is None:
-        conf_args["process_revision_directives"] = process_revision_directives
-
-    connectable = get_engine()
-
-    with connectable.connect() as connection:
-        context.configure(
-            connection=connection,
-            target_metadata=get_metadata(),
-            **conf_args
-        )
-
-        with context.begin_transaction():
-            context.run_migrations()
-
-
-if context.is_offline_mode():
-    run_migrations_offline()
-else:
-    run_migrations_online()
--- a/migrations/script.py.mako
+++ b/migrations/script.py.mako
@@ -1,24 +0,0 @@
-"""${message}
-
-Revision ID: ${up_revision}
-Revises: ${down_revision | comma,n}
-Create Date: ${create_date}
-
-"""
-from alembic import op
-import sqlalchemy as sa
-${imports if imports else ""}
-
-# revision identifiers, used by Alembic.
-revision = ${repr(up_revision)}
-down_revision = ${repr(down_revision)}
-branch_labels = ${repr(branch_labels)}
-depends_on = ${repr(depends_on)}
-
-
-def upgrade():
-    ${upgrades if upgrades else "pass"}
-
-
-def downgrade():
-    ${downgrades if downgrades else "pass"}
--- a/migrations/versions/pycache/d4406f5b12f7_add_password_column_to_user.cpython-311.pyc
+++ b/migrations/versions/pycache/d4406f5b12f7_add_password_column_to_user.cpython-311.pyc
--- a/migrations/versions/d4406f5b12f7_add_password_column_to_user.py
+++ b/migrations/versions/d4406f5b12f7_add_password_column_to_user.py
@@ -1,46 +0,0 @@
-"""Add password column to user
-
-Revision ID: d4406f5b12f7
-Revises: 
-Create Date: 2025-04-28 21:26:37.430823
-
-"""
-from alembic import op
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision = 'd4406f5b12f7'
-down_revision = None
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table('user', schema=None) as batch_op:
-        batch_op.add_column(sa.Column('password', sa.String(length=512), nullable=False, server_default="changeme"))
-        batch_op.add_column(sa.Column('is_active', sa.Boolean(), nullable=True))
-        batch_op.add_column(sa.Column('role', sa.String(length=20), nullable=True))
-        batch_op.drop_column('last_login')
-        batch_op.drop_column('bio')
-        batch_op.drop_column('password_hash')
-        batch_op.drop_column('is_admin')
-        batch_op.drop_column('avatar')
-
-    # ### end Alembic commands ###
-
-
-def downgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table('user', schema=None) as batch_op:
-        batch_op.add_column(sa.Column('avatar', sa.VARCHAR(length=200), nullable=True))
-        batch_op.add_column(sa.Column('is_admin', sa.BOOLEAN(), nullable=True))
-        batch_op.add_column(sa.Column('password_hash', sa.VARCHAR(length=128), nullable=True))
-        batch_op.add_column(sa.Column('bio', sa.TEXT(), nullable=True))
-        batch_op.add_column(sa.Column('last_login', sa.DATETIME(), nullable=True))
-        batch_op.drop_column('role')
-        batch_op.drop_column('is_active')
-        batch_op.drop_column('password')
-
-    # ### end Alembic commands ###
--- a/models.py
+++ b/models.py
@@ -6,8 +6,6 @@ from flask_login import UserMixin
 from datetime import datetime
 from werkzeug.security import generate_password_hash, check_password_hash
 from enum import Enum
-import uuid as uuid_pkg
-import os

 db = SQLAlchemy()

@@ -45,28 +43,30 @@ user_thought_bookmark = db.Table('user_thought_bookmark',
    db.Column('created_at', db.DateTime, default=datetime.utcnow)
 )

-class User(db.Model, UserMixin):
+class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
-    password = db.Column(db.String(512), nullable=False)
+    password_hash = db.Column(db.String(128))
+    is_admin = db.Column(db.Boolean, default=False)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    is_active = db.Column(db.Boolean, default=True)
-    role = db.Column(db.String(20), default="user")  # 'user', 'admin', 'moderator'
+    last_login = db.Column(db.DateTime)
+    avatar = db.Column(db.String(200))
+    bio = db.Column(db.Text)
    
-    # Relationships
-    threads = db.relationship('Thread', backref='creator', lazy=True)
-    messages = db.relationship('Message', backref='author', lazy=True)
-    projects = db.relationship('Project', backref='owner', lazy=True)
+    # Beziehungen
+    thoughts = db.relationship('Thought', backref='author', lazy=True)
+    comments = db.relationship('Comment', backref='author', lazy=True)
+    user_mindmaps = db.relationship('UserMindmap', backref='user', lazy=True)
+    mindmap_notes = db.relationship('MindmapNote', backref='user', lazy=True)
+    bookmarked_thoughts = db.relationship('Thought', secondary=user_thought_bookmark, 
+                                         backref=db.backref('bookmarked_by', lazy='dynamic'))
    
-    def __repr__(self):
-        return f'<User {self.username}>'
-
    def set_password(self, password):
-        self.password = generate_password_hash(password)
+        self.password_hash = generate_password_hash(password)
        
    def check_password(self, password):
-        return check_password_hash(self.password, password)
+        return check_password_hash(self.password_hash, password)

 class Category(db.Model):
    """Wissenschaftliche Kategorien für die Gliederung der öffentlichen Mindmap"""
@@ -81,9 +81,6 @@ class Category(db.Model):
    children = db.relationship('Category', backref=db.backref('parent', remote_side=[id]))
    nodes = db.relationship('MindMapNode', backref='category', lazy=True)

-    def __repr__(self):
-        return f'<Category {self.name}>'
-
 class MindMapNode(db.Model):
    """Öffentliche Mindmap-Knoten, die für alle Benutzer sichtbar sind"""
    id = db.Column(db.Integer, primary_key=True)
@@ -95,9 +92,7 @@ class MindMapNode(db.Model):
    created_at = db.Column(db.DateTime, default=datetime.utcnow)
    created_by_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=True)
    category_id = db.Column(db.Integer, db.ForeignKey('category.id'), nullable=True)
-
-    __table_args__ = {'extend_existing': True}
-
+    
    # Beziehungen für Baumstruktur (mehrere Eltern möglich)
    parents = db.relationship(
        'MindMapNode', 
@@ -116,20 +111,6 @@ class MindMapNode(db.Model):
    # Beziehung zum Ersteller
    created_by = db.relationship('User', backref='created_nodes')

-    def __repr__(self):
-        return f'<MindMapNode {self.name}>'
-    
-    def to_dict(self):
-        return {
-            'id': self.id,
-            'name': self.name,
-            'description': self.description,
-            'color_code': self.color_code,
-            'icon': self.icon,
-            'category_id': self.category_id,
-            'created_at': self.created_at.isoformat() if self.created_at else None
-        }
-
 class UserMindmap(db.Model):
    """Benutzerspezifische Mindmap, die vom Benutzer personalisierbar ist"""
    id = db.Column(db.Integer, primary_key=True)
@@ -246,100 +227,4 @@ class Comment(db.Model):
    thought_id = db.Column(db.Integer, db.ForeignKey('thought.id'), nullable=False)
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    last_modified = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow) 
-
-# Thread model
-class Thread(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    title = db.Column(db.String(200), nullable=False)
-    description = db.Column(db.Text)
-    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
-    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    
-    # Relationships
-    messages = db.relationship('Message', backref='thread', lazy=True, cascade="all, delete-orphan")
-    
-    def __repr__(self):
-        return f'<Thread {self.title}>'
-
-# Message model
-class Message(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    content = db.Column(db.Text, nullable=False)
-    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    thread_id = db.Column(db.Integer, db.ForeignKey('thread.id'), nullable=False)
-    role = db.Column(db.String(20), default="user")  # 'user', 'assistant', 'system'
-    
-    def __repr__(self):
-        return f'<Message {self.id} by {self.user_id}>'
-
-# Project model
-class Project(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    title = db.Column(db.String(150), nullable=False)
-    description = db.Column(db.Text)
-    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
-    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    category_id = db.Column(db.Integer, db.ForeignKey('category.id'))
-    
-    # Relationships
-    documents = db.relationship('Document', backref='project', lazy=True, cascade="all, delete-orphan")
-    
-    def __repr__(self):
-        return f'<Project {self.title}>'
-
-# Document model
-class Document(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    title = db.Column(db.String(150), nullable=False)
-    content = db.Column(db.Text)
-    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
-    project_id = db.Column(db.Integer, db.ForeignKey('project.id'), nullable=False)
-    filename = db.Column(db.String(150), nullable=True)
-    file_path = db.Column(db.String(300), nullable=True)
-    file_type = db.Column(db.String(50), nullable=True)
-    file_size = db.Column(db.Integer, nullable=True)
-    
-    def __repr__(self):
-        return f'<Document {self.title}>'
-
-# Forum-Kategorie-Modell - entspricht den Hauptknotenpunkten der Mindmap
-class ForumCategory(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    node_id = db.Column(db.Integer, db.ForeignKey('mind_map_node.id'), nullable=False)
-    title = db.Column(db.String(200), nullable=False)
-    description = db.Column(db.Text)
-    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    is_active = db.Column(db.Boolean, default=True)
-    
-    # Beziehungen
-    node = db.relationship('MindMapNode', backref='forum_category')
-    posts = db.relationship('ForumPost', backref='category', lazy=True, cascade="all, delete-orphan")
-    
-    def __repr__(self):
-        return f'<ForumCategory {self.title}>'
-
-# Forum-Beitrag-Modell
-class ForumPost(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    title = db.Column(db.String(200), nullable=False)
-    content = db.Column(db.Text, nullable=False)
-    created_at = db.Column(db.DateTime, default=datetime.utcnow)
-    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
-    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
-    category_id = db.Column(db.Integer, db.ForeignKey('forum_category.id'), nullable=False)
-    parent_id = db.Column(db.Integer, db.ForeignKey('forum_post.id'), nullable=True)
-    is_pinned = db.Column(db.Boolean, default=False)
-    is_locked = db.Column(db.Boolean, default=False)
-    view_count = db.Column(db.Integer, default=0)
-    
-    # Beziehungen
-    author = db.relationship('User', backref='forum_posts')
-    replies = db.relationship('ForumPost', backref=db.backref('parent', remote_side=[id]), lazy=True)
-    
-    def __repr__(self):
-        return f'<ForumPost {self.title}>' 
+    last_modified = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow) 
--- a/requirements.txt
+++ b/requirements.txt
@@ -5,13 +5,10 @@ email-validator
 python-dotenv
 werkzeug==2.2.3
 flask-sqlalchemy==3.0.5
-openai
+openai==1.3.0
 requests==2.31.0
+flask-cors==4.0.0
 gunicorn==21.2.0
 #pillow==10.0.1
 pytest==7.4.0
-pytest-flask==1.2.0
-Flask-Migrate
-flask-socketio==5.3.6
-python-engineio==4.8.2
-python-socketio==5.11.1
+pytest-flask==1.2.0
--- a/start.sh
+++ b/start.sh
@@ -1,53 +0,0 @@
-#!/usr/bin/env powershell
-# Windows PowerShell-Version des Start-Skripts
-# Datum: 01.05.2025
-
-# Docker-Status prüfen
-Write-Host "Prüfe Docker-Status..." -ForegroundColor Cyan
-try {
-    $status = docker ps -q
-    if ($LASTEXITCODE -ne 0) {
-        Write-Host "Docker ist nicht gestartet. Bitte starten Sie Docker Desktop." -ForegroundColor Red
-        exit 1
-    }
-} catch {
-    Write-Host "Docker ist nicht verfügbar. Bitte installieren Sie Docker Desktop und starten Sie es." -ForegroundColor Red
-    Write-Host $_.Exception.Message
-    exit 1
-}
-
-# Alte Container stoppen und entfernen
-$containerExists = docker ps -a --filter "name=systades_app" -q
-if ($containerExists) {
-    Write-Host "Stoppe und entferne alten Container..." -ForegroundColor Yellow
-    docker rm -f systades_app
-}
-
-# Alte Images löschen
-Write-Host "Entferne altes Image..." -ForegroundColor Yellow
-docker rmi -f systades_app:latest
-
-# Stelle sicher, dass das Datenbankverzeichnis existiert
-if (-not (Test-Path "database")) {
-    New-Item -Path "database" -ItemType Directory -Force
-}
-
-# Docker-Compose Setup neu bauen
-Write-Host "Baue Container neu..." -ForegroundColor Green
-docker-compose build --no-cache
-
-# Docker-Compose neu starten
-Write-Host "Starte Container..." -ForegroundColor Green
-docker-compose up -d --force-recreate
-
-# Warte kurz und prüfe, ob der Container läuft
-Write-Host "Prüfe Container-Status..." -ForegroundColor Cyan
-Start-Sleep -Seconds 3
-docker ps | Select-String "systades_app"
-
-# Ausgabe
-Write-Host "`nSystemstatus:" -ForegroundColor Cyan
-Write-Host "----------------------------------------"
-Write-Host "Systades-Anwendung ist jetzt unter http://localhost:5000 erreichbar." -ForegroundColor Green
-Write-Host "Container-Logs können mit 'docker logs -f systades_app' angezeigt werden." -ForegroundColor Green
-Write-Host "----------------------------------------" 
--- a/static/541AABD7-4E37-44ED-B491-1459C8C19699.PNG
+++ b/static/541AABD7-4E37-44ED-B491-1459C8C19699.PNG
@@ -1 +0,0 @@
- 
--- a/static/background.js
+++ b/static/background.js
@@ -0,0 +1,108 @@
+// Background animation with Three.js
+let scene, camera, renderer, stars = [];
+
+function initBackground() {
+    // Setup scene
+    scene = new THREE.Scene();
+    
+    // Setup camera
+    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
+    camera.position.z = 100;
+    
+    // Setup renderer
+    renderer = new THREE.WebGLRenderer({ alpha: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setClearColor(0x000000, 0); // Transparent background
+    
+    // Append renderer to DOM
+    const backgroundContainer = document.getElementById('background-container');
+    if (backgroundContainer) {
+        backgroundContainer.appendChild(renderer.domElement);
+    }
+    
+    // Add stars
+    for (let i = 0; i < 1000; i++) {
+        const geometry = new THREE.SphereGeometry(0.2, 8, 8);
+        const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: Math.random() * 0.5 + 0.1 });
+        const star = new THREE.Mesh(geometry, material);
+        
+        // Random position
+        star.position.x = Math.random() * 600 - 300;
+        star.position.y = Math.random() * 600 - 300;
+        star.position.z = Math.random() * 600 - 300;
+        
+        // Store reference to move in animation
+        star.velocity = Math.random() * 0.02 + 0.005;
+        stars.push(star);
+        
+        scene.add(star);
+    }
+    
+    // Add large glowing particles
+    for (let i = 0; i < 15; i++) {
+        const size = Math.random() * 5 + 2;
+        const geometry = new THREE.SphereGeometry(size, 16, 16);
+        
+        // Create a glowing material
+        const color = new THREE.Color();
+        color.setHSL(Math.random(), 0.7, 0.5); // Random hue
+        
+        const material = new THREE.MeshBasicMaterial({ 
+            color: color, 
+            transparent: true, 
+            opacity: 0.2
+        });
+        
+        const particle = new THREE.Mesh(geometry, material);
+        
+        // Random position but further away
+        particle.position.x = Math.random() * 1000 - 500;
+        particle.position.y = Math.random() * 1000 - 500;
+        particle.position.z = Math.random() * 200 - 400;
+        
+        // Store reference to move in animation
+        particle.velocity = Math.random() * 0.01 + 0.002;
+        stars.push(particle);
+        
+        scene.add(particle);
+    }
+    
+    // Handle window resize
+    window.addEventListener('resize', onWindowResize);
+    
+    // Start animation
+    animate();
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    
+    // Move stars
+    stars.forEach(star => {
+        star.position.z += star.velocity;
+        
+        // Reset position if star moves too close
+        if (star.position.z > 100) {
+            star.position.z = -300;
+        }
+    });
+    
+    // Rotate the entire scene slightly for a dreamy effect
+    scene.rotation.y += 0.0003;
+    scene.rotation.x += 0.0001;
+    
+    renderer.render(scene, camera);
+}
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+// Initialize background when the DOM is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBackground);
+} else {
+    initBackground();
+} 
--- a/static/background.mp4
+++ b/static/background.mp4
@@ -0,0 +1 @@
+C:\Users\firem\Downloads\background.mp4
--- a/static/css/all.min.css
+++ b/static/css/all.min.css
@@ -1,27 +0,0 @@
-/*
- * Font Awesome 6.4.0
- * 
- * This is a placeholder file. For production, you should:
- * 1. Download Font Awesome from https://fontawesome.com/download
- * 2. Extract the downloaded package
- * 3. Copy the 'css/all.min.css' file to this location
- * 4. Copy the 'webfonts' folder to '/static/webfonts/'
- *
- * Alternatively, you can install via npm and copy the files:
- * npm install @fortawesome/fontawesome-free
- * cp -r node_modules/@fortawesome/fontawesome-free/css/all.min.css static/css/
- * cp -r node_modules/@fortawesome/fontawesome-free/webfonts/ static/
- */
-
-/* Placeholder styles for common Font Awesome icons */
-.fa, .fas, .far, .fab {
-  display: inline-block;
-  width: 1em;
-  text-align: center;
-}
-
-/* Warning message */
-body::before {
-  content: "Font Awesome CSS placeholder. Please replace with the actual file.";
-  display: none;
-} 
--- a/static/css/assistant.css
+++ b/static/css/assistant.css
@@ -1,25 +1,21 @@
-/* ChatGPT Assistent Styles - Verbesserte Version */
+/* ChatGPT Assistent Styles */
 #chatgpt-assistant {
    font-family: 'Inter', sans-serif;
 }

 #assistant-chat {
-    transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), 
-                opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
-    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    overflow: hidden;
-    max-width: calc(100vw - 2rem);
 }

 #assistant-toggle {
-    transition: transform 0.3s ease, background-color 0.2s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    z-index: 60;
+    transition: transform 0.3s ease;
 }

 #assistant-toggle:hover {
-    transform: scale(1.1) rotate(10deg);
+    transform: scale(1.1);
 }

 #assistant-history {
@@ -44,74 +40,27 @@
    background-color: rgba(156, 163, 175, 0.3);
 }

-/* Verbesserte Message-Bubbles mit Schatten und Animation */
-#assistant-history .flex > div {
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-    animation: messageAppear 0.3s ease-out forwards;
-    opacity: 0;
-    transform: translateY(10px);
-}
-
-@keyframes messageAppear {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Verzögerte Animation für Messages */
-#assistant-history .flex:nth-child(1) > div { animation-delay: 0.05s; }
-#assistant-history .flex:nth-child(2) > div { animation-delay: 0.1s; }
-#assistant-history .flex:nth-child(3) > div { animation-delay: 0.15s; }
-#assistant-history .flex:nth-child(4) > div { animation-delay: 0.2s; }
-#assistant-history .flex:nth-child(5) > div { animation-delay: 0.25s; }
-
-/* Vorschläge styling */
-#assistant-suggestions {
-    padding: 0.5rem 0.75rem;
-    transition: all 0.3s ease;
-}
-
-.suggestion-pill {
-    animation: pillAppear 0.4s ease forwards;
-    opacity: 0;
-    transform: scale(0.9);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-@keyframes pillAppear {
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-/* Styling für verschiedene Verzögerungen bei Vorschlägen */
-#assistant-suggestions button:nth-child(1) { animation-delay: 0.1s; }
-#assistant-suggestions button:nth-child(2) { animation-delay: 0.2s; }
-#assistant-suggestions button:nth-child(3) { animation-delay: 0.3s; }
-
 /* Mach Platz für Notifications, damit sie nicht mit dem Assistenten überlappen */
 .notification-area {
    bottom: 5rem;
 }

-/* Verbesserte Glassmorphism-Effekt */
+/* Verbesserter Glassmorphism-Effekt */
 .glass-morphism {
-    background: rgba(255, 255, 255, 0.25);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.18);
 }

 .dark .glass-morphism {
-    background: rgba(15, 23, 42, 0.35);
-    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(15, 23, 42, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
 }

-/* Verbesserte Farbpalette für Dark Theme */
+/* Dunkleres Dark Theme */
 .dark {
    --tw-bg-opacity: 1;
    background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
@@ -133,54 +82,6 @@
    background-color: rgba(23, 33, 64, var(--tw-bg-opacity)) !important;
 }

-/* Typing Indicator Animation Styles */
-.typing-indicator {
-    display: flex;
-    align-items: center;
-}
-
-.typing-indicator span {
-    height: 8px;
-    width: 8px;
-    background-color: #888;
-    border-radius: 50%;
-    display: inline-block;
-    margin: 0 2px;
-    opacity: 0.4;
-    animation: bounce 1.4s infinite ease-in-out;
-}
-
-.typing-indicator span:nth-child(1) { animation-delay: 0s; }
-.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
-.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes bounce {
-    0%, 80%, 100% { transform: translateY(0); }
-    40% { transform: translateY(-8px); }
-}
-
-/* Chat Input Fokus-Effekt */
-#assistant-chat input:focus {
-    border-color: var(--primary-500, #3B82F6);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
-}
-
-.dark #assistant-chat input:focus {
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
-}
-
-/* Verbesserte Responsive Layouts */
-@media (max-width: 640px) {
-    #assistant-chat {
-        width: calc(100vw - 2rem) !important;
-    }
-    
-    #chatgpt-assistant {
-        right: 1rem;
-        bottom: 1rem;
-    }
-}
-
 /* Footer immer unten */
 html, body {
    height: 100%;
--- a/static/css/base-styles.css
+++ b/static/css/base-styles.css
--- a/static/css/neural-network-background.css
+++ b/static/css/neural-network-background.css
@@ -1,106 +0,0 @@
-/* Neural Network Background CSS */
-
-/* Make sure the neural network background is always visible */
-#neural-network-background {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  z-index: -10 !important; /* Below content but above regular background */
-  pointer-events: none !important;
-  opacity: 1 !important;
-}
-
-/* Override any solid background colors for the body */
-body, body.dark {
-  background-color: transparent !important;
-}
-
-/* Make sure any background color is removed */
-html.dark, html {
-  background-color: transparent !important;
-}
-
-/* Make sure any fixed backgrounds are removed */
-#app-container {
-  background-color: transparent !important;
-}
-
-/* Ensure content is properly visible over the background */
-.glass-morphism {
-  background-color: rgba(17, 24, 39, 0.6) !important;
-  backdrop-filter: blur(5px) !important;
-}
-
-/* Dark Mode - Navbar */
-body.dark .glass-navbar-dark {
-  background-color: rgba(10, 14, 25, 0.7) !important;
-}
-
-/* Light Mode - Verbesserter Navbar */
-body .glass-navbar-light {
-  background-color: rgba(255, 255, 255, 0.92) !important;
-  backdrop-filter: blur(10px) !important;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
-  border-bottom: 1px solid rgba(220, 220, 220, 0.5) !important;
-}
-
-/* Light Mode - Verbesserte Lesbarkeit für Navbar-Elemente */
-body:not(.dark) .navbar-link,
-body:not(.dark) .navbar-item {
-  color: #1e3a8a !important; /* Dunkles Blau für bessere Lesbarkeit */
-}
-
-body:not(.dark) .navbar-link:hover,
-body:not(.dark) .navbar-item:hover {
-  color: #4f46e5 !important; /* Helles Lila beim Hover */
-  background-color: rgba(240, 245, 255, 0.9) !important;
-}
-
-/* Light Mode - Buttons verbessert */
-body:not(.dark) .btn,
-body:not(.dark) button {
-  background-color: #3b82f6 !important; /* Klares Blau statt Grau */
-  color: white !important;
-  border: none !important;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
-}
-
-body:not(.dark) .btn:hover,
-body:not(.dark) button:hover {
-  background-color: #4f46e5 !important; /* Lila beim Hover */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12) !important;
-}
-
-/* Verbesserte Karten im Light Mode */
-body:not(.dark) .card,
-body:not(.dark) .panel {
-  background-color: rgba(255, 255, 255, 0.92) !important;
-  border: 1px solid rgba(220, 220, 220, 0.8) !important;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
-}
-
-/* Verbesserte Lesbarkeit für Text im Light Mode */
-body:not(.dark) {
-  color: #1e293b !important; /* Dunkles Blau-Grau statt Schwarz */
-}
-
-body:not(.dark) h1, 
-body:not(.dark) h2, 
-body:not(.dark) h3, 
-body:not(.dark) h4, 
-body:not(.dark) h5, 
-body:not(.dark) h6 {
-  color: #0f172a !important; /* Fast schwarz für Überschriften */
-}
-
-/* Make sure footer has proper transparency and styling */
-body.dark footer {
-  background-color: rgba(10, 14, 25, 0.7) !important;
-}
-
-body:not(.dark) footer {
-  background-color: rgba(249, 250, 251, 0.92) !important;
-  border-top: 1px solid rgba(220, 220, 220, 0.8) !important;
-} 
--- a/static/css/src/cybernetwork-bg.css
+++ b/static/css/src/cybernetwork-bg.css
@@ -0,0 +1,125 @@
+/* Cybertechnisches Netzwerk Hintergrund-Overlay */
+.cyber-network-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.cyber-network-bg::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(125deg, 
+    rgba(14, 14, 22, 0.95) 0%, 
+    rgba(30, 30, 46, 0.98) 100%);
+}
+
+.network-grid {
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  top: -50%;
+  left: -50%;
+  background-size: 40px 40px;
+  background-image: 
+    linear-gradient(to right, rgba(108, 93, 211, 0.05) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(108, 93, 211, 0.05) 1px, transparent 1px);
+  transform: perspective(500px) rotateX(60deg);
+  animation: grid-move 20s linear infinite;
+}
+
+.node {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background: rgba(76, 223, 255, 0.8);
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(76, 223, 255, 0.6);
+  filter: blur(1px);
+}
+
+.connection {
+  position: absolute;
+  height: 1px;
+  background: linear-gradient(90deg, 
+    rgba(76, 223, 255, 0.2) 0%, 
+    rgba(108, 93, 211, 0.3) 50%, 
+    rgba(76, 223, 255, 0.2) 100%);
+  transform-origin: left center;
+  animation: pulse 4s infinite;
+}
+
+.data-packet {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(118, 69, 217, 0.8);
+  filter: blur(1px);
+  animation: travel var(--travel-time, 6s) linear infinite;
+}
+
+.glow-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    circle at 50% 40%, 
+    rgba(76, 223, 255, 0.03) 0%, 
+    rgba(108, 93, 211, 0.03) 45%, 
+    transparent 70%
+  );
+  opacity: 0.8;
+  animation: pulse-glow 8s infinite;
+}
+
+/* Animations */
+@keyframes grid-move {
+  0% {
+    transform: perspective(500px) rotateX(60deg) translateY(0);
+  }
+  100% {
+    transform: perspective(500px) rotateX(60deg) translateY(40px);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes travel {
+  0% {
+    transform: translateX(0) translateY(0);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(var(--travel-x, 100px)) translateY(var(--travel-y, 100px));
+    opacity: 0;
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.8;
+  }
+} 
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1434,211 +1434,16 @@ html, body {
    overflow-x: hidden;
    background: linear-gradient(135deg, var(--background-start), var(--background-end));
    background-attachment: fixed;
+    scroll-behavior: smooth;
+    height: 100%;
 }

 /* Sticky navbar */
 .navbar.sticky-top {
    position: sticky;
    top: 0;
-    z-index: 1000;
+    z-index: 50;
 }

-/* Light Mode Optimierungen für wichtige UI-Komponenten */
-
-/* Buttons im Light Mode */
-.btn-primary:not(.dark-mode .btn-primary) {
-  background-color: var(--light-primary, #3b82f6);
-  color: white;
-  border: none;
-  font-weight: 500;
-}
-
-.btn-primary:not(.dark-mode .btn-primary):hover {
-  background-color: var(--light-primary-hover, #4f46e5);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-.btn-secondary:not(.dark-mode .btn-secondary) {
-  background-color: #f3f4f6;
-  color: #374151;
-  border: 1px solid #d1d5db;
-  font-weight: 500;
-}
-
-.btn-secondary:not(.dark-mode .btn-secondary):hover {
-  background-color: #e5e7eb;
-}
-
-/* Navbar im Light Mode */
-.navbar:not(.dark-mode .navbar),
-.nav:not(.dark-mode .nav) {
-  background-color: rgba(255, 255, 255, 0.95);
-  border-bottom: 1px solid #e5e7eb;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.navbar:not(.dark-mode .navbar) .nav-link,
-.nav:not(.dark-mode .nav) .nav-link {
-  color: #1e3a8a;
-  font-weight: 500;
-}
-
-.navbar:not(.dark-mode .navbar) .nav-link:hover,
-.nav:not(.dark-mode .nav) .nav-link:hover {
-  color: #4f46e5;
-}
-
-.navbar:not(.dark-mode .navbar) .navbar-brand,
-.nav:not(.dark-mode .nav) .navbar-brand {
-  color: #0f172a;
-  font-weight: 700;
-}
-
-/* Dropdown Menüs im Light Mode */
-.dropdown-menu:not(.dark-mode .dropdown-menu) {
-  background-color: white;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
-  border-radius: 0.5rem;
-  padding: 0.5rem 0;
-}
-
-.dropdown-item:not(.dark-mode .dropdown-item) {
-  color: #1e293b;
-  padding: 0.5rem 1rem;
-}
-
-.dropdown-item:not(.dark-mode .dropdown-item):hover {
-  background-color: #f1f5f9;
-  color: #4f46e5;
-}
-
-/* Karten im Light Mode */
-.card:not(.dark-mode .card) {
-  background-color: white;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.05);
-  border-radius: 0.5rem;
-  overflow: hidden;
-}
-
-.card-header:not(.dark-mode .card-header) {
-  background-color: #f8fafc;
-  border-bottom: 1px solid #e5e7eb;
-  padding: 1rem 1.5rem;
-}
-
-.card-footer:not(.dark-mode .card-footer) {
-  background-color: #f8fafc;
-  border-top: 1px solid #e5e7eb;
-}
-
-/* Formulare im Light Mode */
-.form-control:not(.dark-mode .form-control) {
-  background-color: white;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  padding: 0.5rem 0.75rem;
-  color: #1e293b;
-}
-
-.form-control:not(.dark-mode .form-control):focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
-}
-
-/* Tabs im Light Mode */
-.nav-tabs:not(.dark-mode .nav-tabs) {
-  border-bottom-color: #e5e7eb;
-}
-
-.nav-tabs:not(.dark-mode .nav-tabs) .nav-link {
-  color: #64748b;
-  border: 1px solid transparent;
-}
-
-.nav-tabs:not(.dark-mode .nav-tabs) .nav-link:hover {
-  border-color: #e5e7eb #e5e7eb #e5e7eb;
-  color: #3b82f6;
-}
-
-.nav-tabs:not(.dark-mode .nav-tabs) .nav-link.active {
-  color: #0f172a;
-  background-color: white;
-  border-color: #e5e7eb #e5e7eb white;
-  font-weight: 500;
-}
-
-/* Alerts im Light Mode */
-.alert:not(.dark-mode .alert) {
-  border-radius: 0.5rem;
-  border: 1px solid transparent;
-}
-
-.alert-primary:not(.dark-mode .alert-primary) {
-  background-color: #eff6ff;
-  border-color: #bfdbfe;
-  color: #1e40af;
-}
-
-.alert-success:not(.dark-mode .alert-success) {
-  background-color: #f0fdf4;
-  border-color: #bbf7d0;
-  color: #166534;
-}
-
-.alert-warning:not(.dark-mode .alert-warning) {
-  background-color: #fffbeb;
-  border-color: #fef3c7;
-  color: #92400e;
-}
-
-.alert-danger:not(.dark-mode .alert-danger) {
-  background-color: #fef2f2;
-  border-color: #fecaca;
-  color: #b91c1c;
-}
-
-/* Badges im Light Mode */
-.badge:not(.dark-mode .badge) {
-  font-weight: 500;
-  padding: 0.25em 0.6em;
-  border-radius: 0.375rem;
-}
-
-.badge-primary:not(.dark-mode .badge-primary) {
-  background-color: #3b82f6;
-  color: white;
-}
-
-.badge-secondary:not(.dark-mode .badge-secondary) {
-  background-color: #f3f4f6;
-  color: #1f2937;
-}
-
-/* Tabellen im Light Mode */
-table:not(.dark-mode table) {
-  background-color: white;
-  border-collapse: collapse;
-  width: 100%;
-}
-
-table:not(.dark-mode table) th {
-  background-color: #f8fafc;
-  border-bottom: 1px solid #e5e7eb;
-  color: #0f172a;
-  font-weight: 600;
-  padding: 0.75rem;
-  text-align: left;
-}
-
-table:not(.dark-mode table) td {
-  border-bottom: 1px solid #e5e7eb;
-  padding: 0.75rem;
-  color: #1e293b;
-}
-
-table:not(.dark-mode table) tr:hover {
-  background-color: #f8fafc;
-} 
+/* Importiere das Cyber-Network CSS */
+@import url('/static/css/src/cybernetwork-bg.css'); 
--- a/static/css/tailwind.min.css
+++ b/static/css/tailwind.min.css
@@ -1,6 +0,0 @@
-/**
- * Failed to bundle using Rollup v2.79.2: the file imports a not supported node.js built-in module "fs".
- * If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr
- */
-
- throw new Error('Failed to bundle using Rollup v2.79.2: the file imports a not supported node.js built-in module "fs". If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr');
--- a/static/d3-extensions.js
+++ b/static/d3-extensions.js
@@ -450,76 +450,6 @@ class D3Extensions {
    // Pulsanimation starten
    pulse();
  }
-  
-  /**
-   * Verarbeitet Daten aus der Datenbank für die Mindmap-Visualisierung
-   * @param {Array} databaseNodes - Knotendaten aus der Datenbank
-   * @param {Array} links - Verbindungsdaten oder null für automatische Extraktion
-   * @returns {Object} Aufbereitete Daten für D3.js
-   */
-  static processDbNodesForVisualization(databaseNodes, links = null) {
-    // Überprüfe, ob Daten vorhanden sind
-    if (!databaseNodes || databaseNodes.length === 0) {
-      console.warn('Keine Knotendaten zum Verarbeiten vorhanden');
-      return { nodes: [], links: [] };
-    }
-    
-    // Knoten mit D3-Kompatiblem Format erstellen
-    const nodes = databaseNodes.map(node => {
-      // Farbgenerierung, falls keine vorhanden
-      const nodeColor = node.color_code || 
-                       node.color || 
-                       D3Extensions.stringToColor(node.name || 'default');
-      
-      return {
-        id: node.id,
-        name: node.name,
-        description: node.description || '',
-        thought_count: node.thought_count || 0,
-        color: nodeColor,
-        // Zusätzliche Attribute
-        category_id: node.category_id,
-        is_public: node.is_public !== undefined ? node.is_public : true,
-        // Position, falls vorhanden
-        x: node.x_position,
-        y: node.y_position,
-        // Größe, falls vorhanden
-        scale: node.scale || 1.0
-      };
-    });
-    
-    // Verbindungen verarbeiten
-    let processedLinks = [];
-    
-    if (links && Array.isArray(links)) {
-      // Verwende übergebene Verbindungen
-      processedLinks = links.map(link => {
-        return {
-          source: link.source,
-          target: link.target,
-          // Zusätzliche Attribute
-          type: link.type || 'default',
-          strength: link.strength || 1
-        };
-      });
-    } else {
-      // Extrahiere Verbindungen aus den Knoten
-      databaseNodes.forEach(node => {
-        if (node.connections && Array.isArray(node.connections)) {
-          node.connections.forEach(conn => {
-            processedLinks.push({
-              source: node.id,
-              target: conn.target,
-              type: conn.type || 'default',
-              strength: conn.strength || 1
-            });
-          });
-        }
-      });
-    }
-    
-    return { nodes, links: processedLinks };
-  }
 }

 // Globale Verfügbarkeit sicherstellen
--- a/static/example.png
+++ b/static/example.png
--- a/static/fonts/inter.css
+++ b/static/fonts/inter.css
@@ -1,35 +0,0 @@
-/* Inter font - Local version */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  src: url('../fonts/inter-light.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../fonts/inter-regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: url('../fonts/inter-medium.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  src: url('../fonts/inter-semibold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  src: url('../fonts/inter-bold.woff2') format('woff2');
-} 
--- a/static/fonts/jetbrains-mono.css
+++ b/static/fonts/jetbrains-mono.css
@@ -1,21 +0,0 @@
-/* JetBrains Mono font - Local version */
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../fonts/jetbrainsmono-regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-weight: 500;
-  src: url('../fonts/jetbrainsmono-medium.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-style: normal;
-  font-weight: 700;
-  src: url('../fonts/jetbrainsmono-bold.woff2') format('woff2');
-} 
--- a/static/js/alpine.min.js
+++ b/static/js/alpine.min.js
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -2,11 +2,23 @@
 * MindMap - Hauptdatei für globale JavaScript-Funktionen
 */

+// Import des ChatGPT-Assistenten
+import ChatGPTAssistant from './modules/chatgpt-assistant.js';
+
 /**
 * Hauptmodul für die MindMap-Anwendung
 * Verwaltet die globale Anwendungslogik
 */

+document.addEventListener('DOMContentLoaded', function() {
+  // Initialisiere die Anwendung
+  MindMap.init();
+  
+  // Wende Dunkel-/Hellmodus an
+  const isDarkMode = localStorage.getItem('darkMode') === 'dark';
+  document.documentElement.classList.toggle('dark', isDarkMode);
+});
+
 /**
 * Hauptobjekt der MindMap-Anwendung
 */
@@ -15,7 +27,7 @@ const MindMap = {
  initialized: false,
  darkMode: document.documentElement.classList.contains('dark'),
  pageInitializers: {},
-  currentPage: null,
+  currentPage: document.body.dataset.page,
  
  /**
   * Initialisiert die MindMap-Anwendung
@@ -23,18 +35,13 @@ const MindMap = {
  init() {
    if (this.initialized) return;
    
-    // Setze currentPage erst jetzt, wenn DOM garantiert geladen ist
-    this.currentPage = document.body && document.body.dataset ? document.body.dataset.page : null;
-    
    console.log('MindMap-Anwendung wird initialisiert...');
    
    // Initialisiere den ChatGPT-Assistenten
-    if (typeof ChatGPTAssistant !== 'undefined') {
-      const assistant = new ChatGPTAssistant();
-      assistant.init();
-      // Speichere als Teil von MindMap
-      this.assistant = assistant;
-    }
+    const assistant = new ChatGPTAssistant();
+    assistant.init();
+    // Speichere als Teil von MindMap
+    this.assistant = assistant;
    
    // Seiten-spezifische Initialisierer aufrufen
    if (this.currentPage && this.pageInitializers[this.currentPage]) {
@@ -67,12 +74,6 @@ const MindMap = {
    try {
      console.log('Initialisiere Mindmap...');
      
-      // Prüfe, ob MindMapVisualization geladen ist
-      if (typeof MindMapVisualization === 'undefined') {
-        console.error('MindMapVisualization-Klasse ist nicht definiert!');
-        return;
-      }
-      
      // Initialisiere die Mindmap
      const mindmap = new MindMapVisualization('#mindmap-container', {
        height: mindmapContainer.clientHeight || 600,
@@ -223,13 +224,6 @@ const MindMap = {
    });
  }
 };
-window.MindMap = MindMap;

-document.addEventListener('DOMContentLoaded', function() {
-  // Initialisiere die Anwendung
-  MindMap.init();
-  
-  // Wende Dunkel-/Hellmodus an
-  const isDarkMode = localStorage.getItem('darkMode') === 'dark';
-  document.documentElement.classList.toggle('dark', isDarkMode);
-}); 
+// Globale Export für andere Module
+window.MindMap = MindMap; 
--- a/static/js/mindmap-init.js
+++ b/static/js/mindmap-init.js
@@ -1,420 +0,0 @@
-/**
- * Mindmap-Initialisierer
- * Lädt und initialisiert die Mindmap-Visualisierung
- */
-
-// Warte bis DOM geladen ist
-document.addEventListener('DOMContentLoaded', function() {
-    // Prüfe, ob wir auf der Mindmap-Seite sind
-    const cyContainer = document.getElementById('cy');
-    
-    if (!cyContainer) {
-        console.log('Kein Mindmap-Container gefunden, überspringe Initialisierung.');
-        return;
-    }
-    
-    console.log('Initialisiere Mindmap-Visualisierung...');
-    
-    // Prüfe, ob Cytoscape.js verfügbar ist
-    if (typeof cytoscape === 'undefined') {
-        loadScript('/static/js/cytoscape.min.js', initMindmap);
-    } else {
-        initMindmap();
-    }
-});
-
-/**
- * Lädt ein Script dynamisch
- * @param {string} src - Quelldatei
- * @param {Function} callback - Callback nach dem Laden
- */
-function loadScript(src, callback) {
-    const script = document.createElement('script');
-    script.src = src;
-    script.onload = callback;
-    document.head.appendChild(script);
-}
-
-/**
- * Initialisiert die Mindmap-Visualisierung
- */
-function initMindmap() {
-    const cyContainer = document.getElementById('cy');
-    const fitBtn = document.getElementById('fit-btn');
-    const resetBtn = document.getElementById('reset-btn');
-    const toggleLabelsBtn = document.getElementById('toggle-labels-btn');
-    const nodeInfoPanel = document.getElementById('node-info-panel');
-    const nodeDescription = document.getElementById('node-description');
-    const connectedNodes = document.getElementById('connected-nodes');
-    
-    let labelsVisible = true;
-    let selectedNode = null;
-    
-    // Erstelle Cytoscape-Instanz
-    const cy = cytoscape({
-        container: cyContainer,
-        style: getDefaultStyles(),
-        layout: {
-            name: 'cose',
-            animate: true,
-            animationDuration: 800,
-            nodeDimensionsIncludeLabels: true,
-            padding: 50,
-            spacingFactor: 1.2,
-            randomize: true,
-            componentSpacing: 100,
-            nodeRepulsion: 8000,
-            edgeElasticity: 100,
-            nestingFactor: 1.2,
-            gravity: 80
-        },
-        wheelSensitivity: 0.3,
-    });
-    
-    // Daten vom Server laden
-    loadMindmapData(cy);
-    
-    // Event-Handler zuweisen
-    setupEventListeners(cy, fitBtn, resetBtn, toggleLabelsBtn, nodeInfoPanel, nodeDescription, connectedNodes);
-}
-
-/**
- * Lädt die Mindmap-Daten vom Server
- * @param {Object} cy - Cytoscape-Instanz
- */
-function loadMindmapData(cy) {
-    fetch('/api/mindmap')
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`HTTP Fehler: ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(data => {
-            if (!data.nodes || data.nodes.length === 0) {
-                console.log('Keine Daten gefunden, versuche Refresh-API...');
-                return fetch('/api/refresh-mindmap')
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error(`HTTP Fehler beim Refresh: ${response.status}`);
-                        }
-                        return response.json();
-                    });
-            }
-            return data;
-        })
-        .then(data => {
-            console.log('Mindmap-Daten geladen:', data);
-            
-            // Cytoscape-Elemente vorbereiten
-            const elements = [];
-            
-            // Prüfen, ob "Wissen"-Knoten existiert
-            let rootNode = data.nodes.find(node => node.name === "Wissen");
-            
-            // Wenn nicht, Root-Knoten hinzufügen
-            if (!rootNode) {
-                rootNode = {
-                    id: 'root',
-                    name: 'Wissen',
-                    description: 'Zentrale Wissensbasis',
-                    color_code: '#4299E1'
-                };
-                data.nodes.unshift(rootNode);
-            }
-            
-            // Knoten hinzufügen
-            data.nodes.forEach(node => {
-                elements.push({
-                    group: 'nodes',
-                    data: {
-                        id: node.id.toString(),
-                        name: node.name,
-                        description: node.description || '',
-                        color: node.color_code || '#8B5CF6',
-                        isRoot: node.name === 'Wissen'
-                    }
-                });
-            });
-            
-            // Kanten hinzufügen, wenn vorhanden
-            if (data.edges && data.edges.length > 0) {
-                data.edges.forEach(edge => {
-                    elements.push({
-                        group: 'edges',
-                        data: {
-                            id: `${edge.source}-${edge.target}`,
-                            source: edge.source.toString(),
-                            target: edge.target.toString()
-                        }
-                    });
-                });
-            } else {
-                // Wenn keine Kanten definiert sind, verbinde alle Knoten mit dem Root-Knoten
-                const rootId = rootNode.id.toString();
-                
-                data.nodes.forEach(node => {
-                    if (node.id.toString() !== rootId) {
-                        elements.push({
-                            group: 'edges',
-                            data: {
-                                id: `${rootId}-${node.id}`,
-                                source: rootId,
-                                target: node.id.toString()
-                            }
-                        });
-                    }
-                });
-            }
-            
-            // Elemente zu Cytoscape hinzufügen
-            cy.elements().remove();
-            cy.add(elements);
-            
-            // Layout anwenden
-            cy.layout({
-                name: 'cose',
-                animate: true,
-                animationDuration: 800,
-                nodeDimensionsIncludeLabels: true,
-                padding: 50,
-                spacingFactor: 1.5,
-                randomize: false,
-                fit: true
-            }).run();
-            
-            // Nach dem Laden Event auslösen
-            document.dispatchEvent(new CustomEvent('mindmap-loaded'));
-        })
-        .catch(error => {
-            console.error('Fehler beim Laden der Mindmap-Daten:', error);
-            
-            // Fallback mit Standard-Daten
-            const fallbackData = {
-                nodes: [
-                    { id: 1, name: 'Wissen', description: 'Zentrale Wissensbasis', color_code: '#4299E1' },
-                    { id: 2, name: 'Philosophie', description: 'Philosophisches Denken', color_code: '#9F7AEA' },
-                    { id: 3, name: 'Wissenschaft', description: 'Wissenschaftliche Erkenntnisse', color_code: '#48BB78' },
-                    { id: 4, name: 'Technologie', description: 'Technologische Entwicklungen', color_code: '#ED8936' },
-                    { id: 5, name: 'Künste', description: 'Künstlerische Ausdrucksformen', color_code: '#ED64A6' }
-                ],
-                edges: [
-                    { source: 1, target: 2 },
-                    { source: 1, target: 3 },
-                    { source: 1, target: 4 },
-                    { source: 1, target: 5 }
-                ]
-            };
-            
-            const fallbackElements = [];
-            
-            // Knoten hinzufügen
-            fallbackData.nodes.forEach(node => {
-                fallbackElements.push({
-                    group: 'nodes',
-                    data: {
-                        id: node.id.toString(),
-                        name: node.name,
-                        description: node.description || '',
-                        color: node.color_code || '#8B5CF6',
-                        isRoot: node.name === 'Wissen'
-                    }
-                });
-            });
-            
-            // Kanten hinzufügen
-            fallbackData.edges.forEach(edge => {
-                fallbackElements.push({
-                    group: 'edges',
-                    data: {
-                        id: `${edge.source}-${edge.target}`,
-                        source: edge.source.toString(),
-                        target: edge.target.toString()
-                    }
-                });
-            });
-            
-            // Elemente zu Cytoscape hinzufügen
-            cy.elements().remove();
-            cy.add(fallbackElements);
-            
-            // Layout anwenden
-            cy.layout({ name: 'cose', animate: true }).run();
-        });
-}
-
-/**
- * Richtet Event-Listener für die Mindmap ein
- * @param {Object} cy - Cytoscape-Instanz
- * @param {HTMLElement} fitBtn - Fit-Button
- * @param {HTMLElement} resetBtn - Reset-Button
- * @param {HTMLElement} toggleLabelsBtn - Toggle-Labels-Button
- * @param {HTMLElement} nodeInfoPanel - Node-Info-Panel
- * @param {HTMLElement} nodeDescription - Node-Description
- * @param {HTMLElement} connectedNodes - Connected-Nodes-Container
- */
-function setupEventListeners(cy, fitBtn, resetBtn, toggleLabelsBtn, nodeInfoPanel, nodeDescription, connectedNodes) {
-    let labelsVisible = true;
-    
-    // Fit-Button
-    if (fitBtn) {
-        fitBtn.addEventListener('click', function() {
-            cy.fit();
-        });
-    }
-    
-    // Reset-Button
-    if (resetBtn) {
-        resetBtn.addEventListener('click', function() {
-            cy.layout({ name: 'cose', animate: true }).run();
-        });
-    }
-    
-    // Toggle-Labels-Button
-    if (toggleLabelsBtn) {
-        toggleLabelsBtn.addEventListener('click', function() {
-            labelsVisible = !labelsVisible;
-            cy.style()
-                .selector('node')
-                .style({
-                    'text-opacity': labelsVisible ? 1 : 0
-                })
-                .update();
-        });
-    }
-    
-    // Knoten-Klick
-    cy.on('tap', 'node', function(evt) {
-        const node = evt.target;
-        
-        // Zuvor ausgewählten Knoten zurücksetzen
-        cy.nodes().removeClass('selected');
-        
-        // Neuen Knoten auswählen
-        node.addClass('selected');
-        
-        if (nodeInfoPanel && nodeDescription && connectedNodes) {
-            // Info-Panel aktualisieren
-            nodeDescription.textContent = node.data('description') || 'Keine Beschreibung verfügbar.';
-            
-            // Verbundene Knoten anzeigen
-            connectedNodes.innerHTML = '';
-            
-            // Verbundene Knoten sammeln
-            const connectedNodesList = node.neighborhood('node');
-            
-            if (connectedNodesList.length > 0) {
-                connectedNodesList.forEach(connectedNode => {
-                    // Nicht den ausgewählten Knoten selbst anzeigen
-                    if (connectedNode.id() !== node.id()) {
-                        const nodeLink = document.createElement('span');
-                        nodeLink.className = 'node-link';
-                        nodeLink.textContent = connectedNode.data('name');
-                        nodeLink.style.backgroundColor = connectedNode.data('color');
-                        
-                        // Klick-Ereignis, um zu diesem Knoten zu wechseln
-                        nodeLink.addEventListener('click', function() {
-                            connectedNode.select();
-                            cy.animate({
-                                center: { eles: connectedNode },
-                                duration: 500,
-                                easing: 'ease-in-out-cubic'
-                            });
-                        });
-                        
-                        connectedNodes.appendChild(nodeLink);
-                    }
-                });
-            } else {
-                connectedNodes.innerHTML = '<em>Keine verbundenen Knoten</em>';
-            }
-            
-            // Panel anzeigen
-            nodeInfoPanel.classList.add('visible');
-        }
-    });
-    
-    // Hintergrund-Klick
-    cy.on('tap', function(evt) {
-        if (evt.target === cy) {
-            // Klick auf den Hintergrund
-            cy.nodes().removeClass('selected');
-            
-            // Info-Panel verstecken
-            if (nodeInfoPanel) {
-                nodeInfoPanel.classList.remove('visible');
-            }
-        }
-    });
-    
-    // Dark Mode-Änderungen
-    document.addEventListener('darkModeToggled', function(event) {
-        const isDark = event.detail.isDark;
-        cy.style(getDefaultStyles(isDark));
-    });
-}
-
-/**
- * Liefert die Standard-Stile für die Mindmap
- * @param {boolean} darkMode - Ob der Dark Mode aktiv ist
- * @returns {Array} Array von Cytoscape-Stilen
- */
-function getDefaultStyles(darkMode = document.documentElement.classList.contains('dark')) {
-    return [
-        {
-            selector: 'node',
-            style: {
-                'background-color': 'data(color)',
-                'label': 'data(name)',
-                'width': 40,
-                'height': 40,
-                'font-size': 12,
-                'text-valign': 'bottom',
-                'text-halign': 'center',
-                'text-margin-y': 8,
-                'color': darkMode ? '#f1f5f9' : '#334155',
-                'text-background-color': darkMode ? 'rgba(30, 41, 59, 0.8)' : 'rgba(241, 245, 249, 0.8)',
-                'text-background-opacity': 0.8,
-                'text-background-padding': '2px',
-                'text-background-shape': 'roundrectangle',
-                'text-wrap': 'ellipsis',
-                'text-max-width': '100px'
-            }
-        },
-        {
-            selector: 'node[?isRoot]',
-            style: {
-                'width': 60,
-                'height': 60,
-                'font-size': 14,
-                'font-weight': 'bold',
-                'text-background-opacity': 0.9,
-                'text-background-color': '#4299E1'
-            }
-        },
-        {
-            selector: 'edge',
-            style: {
-                'width': 2,
-                'line-color': darkMode ? 'rgba(255, 255, 255, 0.15)' : 'rgba(30, 41, 59, 0.15)',
-                'target-arrow-color': darkMode ? 'rgba(255, 255, 255, 0.15)' : 'rgba(30, 41, 59, 0.15)',
-                'curve-style': 'bezier',
-                'target-arrow-shape': 'triangle'
-            }
-        },
-        {
-            selector: 'node.selected',
-            style: {
-                'background-color': 'data(color)',
-                'border-width': 3,
-                'border-color': '#8b5cf6',
-                'width': 50,
-                'height': 50,
-                'font-size': 14,
-                'font-weight': 'bold',
-                'text-background-color': '#8b5cf6',
-                'text-background-opacity': 0.9
-            }
-        }
-    ];
-} 
--- a/static/js/mindmap.html
+++ b/static/js/mindmap.html
@@ -1,234 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Interaktive Mindmap</title>
-  
-  <!-- Cytoscape.js -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
-  
-  <!-- Socket.IO -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
-  
-  <!-- Feather Icons (optional) -->
-  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-  
-  <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    
-    body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      background-color: #f9fafb;
-      color: #111827;
-      line-height: 1.5;
-    }
-    
-    .container {
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      width: 100%;
-    }
-    
-    .header {
-      background-color: #1f2937;
-      color: white;
-      padding: 1rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    
-    .header h1 {
-      font-size: 1.5rem;
-      font-weight: 500;
-    }
-    
-    .toolbar {
-      background-color: #f3f4f6;
-      padding: 0.75rem;
-      display: flex;
-      gap: 0.5rem;
-      border-bottom: 1px solid #e5e7eb;
-    }
-    
-    .btn {
-      background-color: #3b82f6;
-      color: white;
-      border: none;
-      border-radius: 0.25rem;
-      padding: 0.5rem 1rem;
-      font-size: 0.875rem;
-      cursor: pointer;
-      transition: background-color 0.2s;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    
-    .btn:hover {
-      background-color: #2563eb;
-    }
-    
-    .btn-secondary {
-      background-color: #6b7280;
-    }
-    
-    .btn-secondary:hover {
-      background-color: #4b5563;
-    }
-    
-    .btn-danger {
-      background-color: #ef4444;
-    }
-    
-    .btn-danger:hover {
-      background-color: #dc2626;
-    }
-    
-    .search-container {
-      flex: 1;
-      display: flex;
-      margin-left: 1rem;
-    }
-    
-    .search-input {
-      width: 100%;
-      max-width: 300px;
-      padding: 0.5rem;
-      border: 1px solid #d1d5db;
-      border-radius: 0.25rem;
-      font-size: 0.875rem;
-    }
-    
-    #cy {
-      flex: 1;
-      width: 100%;
-      position: relative;
-    }
-    
-    .category-filters {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-      padding: 0.75rem;
-      background-color: #ffffff;
-      border-bottom: 1px solid #e5e7eb;
-    }
-    
-    .category-filter {
-      border: none;
-      border-radius: 0.25rem;
-      padding: 0.25rem 0.75rem;
-      font-size: 0.75rem;
-      cursor: pointer;
-      transition: opacity 0.2s;
-      color: white;
-    }
-    
-    .category-filter:not(.active) {
-      opacity: 0.6;
-    }
-    
-    .category-filter:hover:not(.active) {
-      opacity: 0.8;
-    }
-    
-    .footer {
-      background-color: #f3f4f6;
-      padding: 0.75rem;
-      text-align: center;
-      font-size: 0.75rem;
-      color: #6b7280;
-      border-top: 1px solid #e5e7eb;
-    }
-    
-    /* Kontextmenü Styling */
-    #context-menu {
-      position: absolute;
-      background-color: white;
-      border: 1px solid #e5e7eb;
-      border-radius: 0.25rem;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-      z-index: 1000;
-    }
-    
-    #context-menu .menu-item {
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-    }
-    
-    #context-menu .menu-item:hover {
-      background-color: #f3f4f6;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <header class="header">
-      <h1>Interaktive Mindmap</h1>
-      <div class="search-container">
-        <input type="text" id="search-mindmap" class="search-input" placeholder="Suchen...">
-      </div>
-    </header>
-    
-    <div class="toolbar">
-      <button id="addNode" class="btn">
-        <i data-feather="plus-circle"></i>
-        Knoten hinzufügen
-      </button>
-      <button id="addEdge" class="btn">
-        <i data-feather="git-branch"></i>
-        Verbindung erstellen
-      </button>
-      <button id="editNode" class="btn btn-secondary">
-        <i data-feather="edit-2"></i>
-        Knoten bearbeiten
-      </button>
-      <button id="deleteNode" class="btn btn-danger">
-        <i data-feather="trash-2"></i>
-        Knoten löschen
-      </button>
-      <button id="deleteEdge" class="btn btn-danger">
-        <i data-feather="scissors"></i>
-        Verbindung löschen
-      </button>
-      <button id="reLayout" class="btn btn-secondary">
-        <i data-feather="refresh-cw"></i>
-        Layout neu anordnen
-      </button>
-      <button id="exportMindmap" class="btn btn-secondary">
-        <i data-feather="download"></i>
-        Exportieren
-      </button>
-    </div>
-    
-    <div id="category-filters" class="category-filters">
-      <!-- Wird dynamisch befüllt -->
-    </div>
-    
-    <div id="cy"></div>
-    
-    <footer class="footer">
-      Mindmap-Anwendung © 2023
-    </footer>
-  </div>
-  
-  <!-- Unsere Mindmap JS -->
-  <script src="../js/mindmap.js"></script>
-  
-  <!-- Icons initialisieren -->
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-      if (typeof feather !== 'undefined') {
-        feather.replace();
-      }
-    });
-  </script>
-</body>
-</html> 
--- a/static/js/mindmap.js
+++ b/static/js/mindmap.js
@@ -1,749 +0,0 @@
-/**
- * Mindmap.js - Interaktive Mind-Map Implementierung
- * - Cytoscape.js für Graph-Rendering
- * - Fetch API für REST-Zugriffe
- * - Socket.IO für Echtzeit-Synchronisation
- */
-
-(async () => {
-  /* 1. Initialisierung und Grundkonfiguration */
-  const cy = cytoscape({
-    container: document.getElementById('cy'),
-    style: [
-      {
-        selector: 'node',
-        style: {
-          'label': 'data(name)',
-          'text-valign': 'center',
-          'color': '#fff',
-          'background-color': 'data(color)',
-          'width': 45,
-          'height': 45,
-          'font-size': 11,
-          'text-outline-width': 1,
-          'text-outline-color': '#000',
-          'text-outline-opacity': 0.5,
-          'text-wrap': 'wrap',
-          'text-max-width': 80
-        }
-      },
-      {
-        selector: 'node[icon]',
-        style: {
-          'background-image': function(ele) {
-            return `static/img/icons/${ele.data('icon')}.svg`;
-          },
-          'background-width': '60%',
-          'background-height': '60%',
-          'background-position-x': '50%',
-          'background-position-y': '40%',
-          'text-margin-y': 10
-        }
-      },
-      {
-        selector: 'edge',
-        style: {
-          'width': 2,
-          'line-color': '#888',
-          'target-arrow-shape': 'triangle',
-          'curve-style': 'bezier',
-          'target-arrow-color': '#888'
-        }
-      },
-      {
-        selector: ':selected',
-        style: {
-          'border-width': 3,
-          'border-color': '#f8f32b'
-        }
-      }
-    ],
-    layout: { 
-      name: 'breadthfirst', 
-      directed: true, 
-      padding: 30,
-      spacingFactor: 1.2
-    }
-  });
-
-  /* 2. Hilfs-Funktionen für API-Zugriffe */
-  const get = async endpoint => {
-    try {
-      const response = await fetch(endpoint);
-      if (!response.ok) {
-        console.error(`API-Fehler: ${endpoint} antwortet mit Status ${response.status}`);
-        return []; // Leeres Array zurückgeben bei Fehlern
-      }
-      return await response.json();
-    } catch (error) {
-      console.error(`Fehler beim Abrufen von ${endpoint}:`, error);
-      return []; // Leeres Array zurückgeben bei Netzwerkfehlern
-    }
-  };
-  
-  const post = async (endpoint, body) => {
-    try {
-      const response = await fetch(endpoint, { 
-        method: 'POST', 
-        headers: { 'Content-Type': 'application/json' }, 
-        body: JSON.stringify(body) 
-      });
-      if (!response.ok) {
-        console.error(`API-Fehler: ${endpoint} antwortet mit Status ${response.status}`);
-        return {}; // Leeres Objekt zurückgeben bei Fehlern
-      }
-      return await response.json();
-    } catch (error) {
-      console.error(`Fehler beim POST zu ${endpoint}:`, error);
-      return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern
-    }
-  };
-  
-  const del = async endpoint => {
-    try {
-      const response = await fetch(endpoint, { method: 'DELETE' });
-      if (!response.ok) {
-        console.error(`API-Fehler: ${endpoint} antwortet mit Status ${response.status}`);
-        return {}; // Leeres Objekt zurückgeben bei Fehlern
-      }
-      return await response.json();
-    } catch (error) {
-      console.error(`Fehler beim DELETE zu ${endpoint}:`, error);
-      return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern
-    }
-  };
-
-  /* 3. Kategorien laden für Style-Informationen */
-  let categories = await get('/api/categories');
-  
-  /* 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')
-      ]);
-      
-      // 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 : [];
-      
-      // Knoten zum Graph hinzufügen
-      cy.add(
-        nodesArray.map(node => {
-          // Kategorie-Informationen für Styling abrufen
-          const category = categories.find(c => c.id === node.category_id) || {};
-          
-          return {
-            data: { 
-              id: node.id.toString(),
-              name: node.name,
-              description: node.description,
-              color: node.color_code || category.color_code || '#6b7280',
-              icon: node.icon || category.icon,
-              category_id: node.category_id
-            },
-            position: node.x && node.y ? { x: node.x, y: node.y } : undefined
-          };
-        })
-      );
-      
-      // Überprüfen, ob relationships ein Array ist, wenn nicht, setze es auf ein leeres Array
-      const relationshipsArray = Array.isArray(relationships) ? relationships : [];
-      
-      // Kanten zum Graph hinzufügen
-      cy.add(
-        relationshipsArray.map(rel => ({
-          data: {
-            id: `${rel.parent_id}_${rel.child_id}`,
-            source: rel.parent_id.toString(),
-            target: rel.child_id.toString()
-          }
-        }))
-      );
-      
-      // Wenn keine Knoten geladen wurden, Fallback-Knoten erstellen
-      if (nodesArray.length === 0) {
-        // Mindestens einen Standardknoten hinzufügen
-        cy.add({
-          data: {
-            id: 'fallback-1',
-            name: 'Mindmap',
-            description: 'Erstellen Sie hier Ihre eigene Mindmap',
-            color: '#3b82f6',
-            icon: 'help-circle'
-          },
-          position: { x: 300, y: 200 }
-        });
-        
-        // Erfolgsmeldung anzeigen
-        console.log('Mindmap erfolgreich initialisiert mit Fallback-Knoten');
-        
-        // Info-Meldung für Benutzer anzeigen
-        const infoBox = document.createElement('div');
-        infoBox.classList.add('info-message');
-        infoBox.style.position = 'absolute';
-        infoBox.style.top = '50%';
-        infoBox.style.left = '50%';
-        infoBox.style.transform = 'translate(-50%, -50%)';
-        infoBox.style.padding = '15px 20px';
-        infoBox.style.backgroundColor = 'rgba(59, 130, 246, 0.9)';
-        infoBox.style.color = 'white';
-        infoBox.style.borderRadius = '8px';
-        infoBox.style.zIndex = '5';
-        infoBox.style.maxWidth = '80%';
-        infoBox.style.textAlign = 'center';
-        infoBox.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
-        infoBox.innerHTML = 'Mindmap erfolgreich initialisiert.<br>Verwenden Sie die Werkzeugleiste, um Knoten hinzuzufügen.';
-        
-        document.getElementById('cy').appendChild(infoBox);
-        
-        // Meldung nach 5 Sekunden ausblenden
-        setTimeout(() => {
-          infoBox.style.opacity = '0';
-          infoBox.style.transition = 'opacity 0.5s ease';
-          setTimeout(() => {
-            if (infoBox.parentNode) {
-              infoBox.parentNode.removeChild(infoBox);
-            }
-          }, 500);
-        }, 5000);
-      }
-      
-      // Layout anwenden wenn keine Positionsdaten vorhanden
-      const nodesWithoutPosition = cy.nodes().filter(node => 
-        !node.position() || (node.position().x === 0 && node.position().y === 0)
-      );
-      
-      if (nodesWithoutPosition.length > 0) {
-        cy.layout({ 
-          name: 'breadthfirst', 
-          directed: true, 
-          padding: 30,
-          spacingFactor: 1.2
-        }).run();
-      }
-      
-      // Tooltip-Funktionalität
-      cy.nodes().unbind('mouseover').bind('mouseover', (event) => {
-        const node = event.target;
-        const description = node.data('description');
-        
-        if (description) {
-          const tooltip = document.getElementById('node-tooltip') || 
-                          document.createElement('div');
-          
-          if (!tooltip.id) {
-            tooltip.id = 'node-tooltip';
-            tooltip.style.position = 'absolute';
-            tooltip.style.backgroundColor = '#333';
-            tooltip.style.color = '#fff';
-            tooltip.style.padding = '8px';
-            tooltip.style.borderRadius = '4px';
-            tooltip.style.maxWidth = '250px';
-            tooltip.style.zIndex = 10;
-            tooltip.style.pointerEvents = 'none';
-            tooltip.style.transition = 'opacity 0.2s';
-            tooltip.style.boxShadow = '0 2px 10px rgba(0,0,0,0.3)';
-            document.body.appendChild(tooltip);
-          }
-          
-          const renderedPosition = node.renderedPosition();
-          const containerRect = cy.container().getBoundingClientRect();
-          
-          tooltip.innerHTML = description;
-          tooltip.style.left = (containerRect.left + renderedPosition.x + 25) + 'px';
-          tooltip.style.top = (containerRect.top + renderedPosition.y - 15) + 'px';
-          tooltip.style.opacity = '1';
-        }
-      });
-      
-      cy.nodes().unbind('mouseout').bind('mouseout', () => {
-        const tooltip = document.getElementById('node-tooltip');
-        if (tooltip) {
-          tooltip.style.opacity = '0';
-        }
-      });
-      
-    } catch (error) {
-      console.error('Fehler beim Laden der Mindmap:', error);
-      alert('Die Mindmap konnte nicht geladen werden. Bitte prüfen Sie die Konsole für Details.');
-    }
-  };
-  
-  // Initial laden
-  await loadMindmap();
-
-  /* 5. Socket.IO für Echtzeit-Synchronisation */
-  const socket = io();
-  
-  socket.on('node_added', async (node) => {
-    // Kategorie-Informationen für Styling abrufen
-    const category = categories.find(c => c.id === node.category_id) || {};
-    
-    cy.add({
-      data: { 
-        id: node.id.toString(),
-        name: node.name,
-        description: node.description,
-        color: node.color_code || category.color_code || '#6b7280',
-        icon: node.icon || category.icon,
-        category_id: node.category_id
-      }
-    });
-    
-    // Layout neu anwenden, wenn nötig
-    if (!node.x || !node.y) {
-      cy.layout({ name: 'breadthfirst', directed: true, padding: 30 }).run();
-    }
-  });
-  
-  socket.on('node_updated', (node) => {
-    const cyNode = cy.$id(node.id.toString());
-    if (cyNode.length > 0) {
-      // Kategorie-Informationen für Styling abrufen
-      const category = categories.find(c => c.id === node.category_id) || {};
-      
-      cyNode.data({
-        name: node.name,
-        description: node.description,
-        color: node.color_code || category.color_code || '#6b7280',
-        icon: node.icon || category.icon,
-        category_id: node.category_id
-      });
-      
-      if (node.x && node.y) {
-        cyNode.position({ x: node.x, y: node.y });
-      }
-    }
-  });
-  
-  socket.on('node_deleted', (nodeId) => {
-    const cyNode = cy.$id(nodeId.toString());
-    if (cyNode.length > 0) {
-      cy.remove(cyNode);
-    }
-  });
-  
-  socket.on('relationship_added', (rel) => {
-    cy.add({
-      data: {
-        id: `${rel.parent_id}_${rel.child_id}`,
-        source: rel.parent_id.toString(),
-        target: rel.child_id.toString()
-      }
-    });
-  });
-  
-  socket.on('relationship_deleted', (rel) => {
-    const edgeId = `${rel.parent_id}_${rel.child_id}`;
-    const cyEdge = cy.$id(edgeId);
-    if (cyEdge.length > 0) {
-      cy.remove(cyEdge);
-    }
-  });
-  
-  socket.on('category_updated', async () => {
-    // Kategorien neu laden
-    categories = await get('/api/categories');
-    // Nodes aktualisieren, die diese Kategorie verwenden
-    cy.nodes().forEach(node => {
-      const categoryId = node.data('category_id');
-      if (categoryId) {
-        const category = categories.find(c => c.id === categoryId);
-        if (category) {
-          node.data('color', node.data('color_code') || category.color_code);
-          node.data('icon', node.data('icon') || category.icon);
-        }
-      }
-    });
-  });
-
-  /* 6. UI-Interaktionen */
-  // Knoten hinzufügen
-  const btnAddNode = document.getElementById('addNode');
-  if (btnAddNode) {
-    btnAddNode.addEventListener('click', async () => {
-      const name = prompt('Knotenname eingeben:');
-      if (!name) return;
-      
-      const description = prompt('Beschreibung (optional):');
-      
-      // Kategorie auswählen
-      let categoryId = null;
-      if (categories.length > 0) {
-        const categoryOptions = categories.map((c, i) => `${i}: ${c.name}`).join('\n');
-        const categoryChoice = prompt(
-          `Kategorie auswählen (Nummer eingeben):\n${categoryOptions}`,
-          '0'
-        );
-        
-        if (categoryChoice !== null) {
-          const index = parseInt(categoryChoice, 10);
-          if (!isNaN(index) && index >= 0 && index < categories.length) {
-            categoryId = categories[index].id;
-          }
-        }
-      }
-      
-      // Knoten erstellen
-      await post('/api/mind_map_node', { 
-        name, 
-        description,
-        category_id: categoryId
-      });
-      // Darstellung wird durch Socket.IO Event übernommen
-    });
-  }
-  
-  // Verbindung hinzufügen
-  const btnAddEdge = document.getElementById('addEdge');
-  if (btnAddEdge) {
-    btnAddEdge.addEventListener('click', async () => {
-      const sel = cy.$('node:selected');
-      if (sel.length !== 2) {
-        alert('Bitte genau zwei Knoten auswählen (Parent → Child)');
-        return;
-      }
-      
-      const [parent, child] = sel.map(node => node.id());
-      await post('/api/node_relationship', { 
-        parent_id: parent, 
-        child_id: child 
-      });
-      // Darstellung wird durch Socket.IO Event übernommen
-    });
-  }
-  
-  // Knoten bearbeiten
-  const btnEditNode = document.getElementById('editNode');
-  if (btnEditNode) {
-    btnEditNode.addEventListener('click', async () => {
-      const sel = cy.$('node:selected');
-      if (sel.length !== 1) {
-        alert('Bitte genau einen Knoten auswählen');
-        return;
-      }
-      
-      const node = sel[0];
-      const nodeData = node.data();
-      
-      const name = prompt('Knotenname:', nodeData.name);
-      if (!name) return;
-      
-      const description = prompt('Beschreibung:', nodeData.description || '');
-      
-      // Kategorie auswählen
-      let categoryId = nodeData.category_id;
-      if (categories.length > 0) {
-        const categoryOptions = categories.map((c, i) => `${i}: ${c.name}`).join('\n');
-        const categoryChoice = prompt(
-          `Kategorie auswählen (Nummer eingeben):\n${categoryOptions}`,
-          categories.findIndex(c => c.id === categoryId).toString()
-        );
-        
-        if (categoryChoice !== null) {
-          const index = parseInt(categoryChoice, 10);
-          if (!isNaN(index) && index >= 0 && index < categories.length) {
-            categoryId = categories[index].id;
-          }
-        }
-      }
-      
-      // Knoten aktualisieren
-      await post(`/api/mind_map_node/${nodeData.id}`, { 
-        name, 
-        description,
-        category_id: categoryId
-      });
-      // Darstellung wird durch Socket.IO Event übernommen
-    });
-  }
-  
-  // Knoten löschen
-  const btnDeleteNode = document.getElementById('deleteNode');
-  if (btnDeleteNode) {
-    btnDeleteNode.addEventListener('click', async () => {
-      const sel = cy.$('node:selected');
-      if (sel.length !== 1) {
-        alert('Bitte genau einen Knoten auswählen');
-        return;
-      }
-      
-      if (confirm('Sind Sie sicher, dass Sie diesen Knoten löschen möchten?')) {
-        const nodeId = sel[0].id();
-        await del(`/api/mind_map_node/${nodeId}`);
-        // Darstellung wird durch Socket.IO Event übernommen
-      }
-    });
-  }
-  
-  // Verbindung löschen
-  const btnDeleteEdge = document.getElementById('deleteEdge');
-  if (btnDeleteEdge) {
-    btnDeleteEdge.addEventListener('click', async () => {
-      const sel = cy.$('edge:selected');
-      if (sel.length !== 1) {
-        alert('Bitte genau eine Verbindung auswählen');
-        return;
-      }
-      
-      if (confirm('Sind Sie sicher, dass Sie diese Verbindung löschen möchten?')) {
-        const edge = sel[0];
-        const parentId = edge.source().id();
-        const childId = edge.target().id();
-        
-        await del(`/api/node_relationship/${parentId}/${childId}`);
-        // Darstellung wird durch Socket.IO Event übernommen
-      }
-    });
-  }
-  
-  // Layout aktualisieren
-  const btnReLayout = document.getElementById('reLayout');
-  if (btnReLayout) {
-    btnReLayout.addEventListener('click', () => {
-      cy.layout({ 
-        name: 'breadthfirst', 
-        directed: true, 
-        padding: 30,
-        spacingFactor: 1.2
-      }).run();
-    });
-  }
-
-  /* 7. Position speichern bei Drag & Drop */
-  cy.on('dragfree', 'node', async (e) => {
-    const node = e.target;
-    const position = node.position();
-    
-    await post(`/api/mind_map_node/${node.id()}/position`, {
-      x: Math.round(position.x),
-      y: Math.round(position.y)
-    });
-    
-    // Andere Benutzer erhalten die Position über den node_updated Event
-  });
-
-  /* 8. Kontextmenü (optional) */
-  const setupContextMenu = () => {
-    cy.on('cxttap', 'node', function(e) {
-      const node = e.target;
-      const nodeData = node.data();
-      
-      // Position des Kontextmenüs berechnen
-      const renderedPosition = node.renderedPosition();
-      const containerRect = cy.container().getBoundingClientRect();
-      const menuX = containerRect.left + renderedPosition.x;
-      const menuY = containerRect.top + renderedPosition.y;
-      
-      // Kontextmenü erstellen oder aktualisieren
-      let contextMenu = document.getElementById('context-menu');
-      if (!contextMenu) {
-        contextMenu = document.createElement('div');
-        contextMenu.id = 'context-menu';
-        contextMenu.style.position = 'absolute';
-        contextMenu.style.backgroundColor = '#fff';
-        contextMenu.style.border = '1px solid #ccc';
-        contextMenu.style.borderRadius = '4px';
-        contextMenu.style.padding = '5px 0';
-        contextMenu.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
-        contextMenu.style.zIndex = 1000;
-        document.body.appendChild(contextMenu);
-      }
-      
-      // Menüinhalte
-      contextMenu.innerHTML = `
-        <div class="menu-item" data-action="edit">Knoten bearbeiten</div>
-        <div class="menu-item" data-action="connect">Verbindung erstellen</div>
-        <div class="menu-item" data-action="delete">Knoten löschen</div>
-      `;
-      
-      // Styling für Menüpunkte
-      const menuItems = contextMenu.querySelectorAll('.menu-item');
-      menuItems.forEach(item => {
-        item.style.padding = '8px 20px';
-        item.style.cursor = 'pointer';
-        item.style.fontSize = '14px';
-        
-        item.addEventListener('mouseover', function() {
-          this.style.backgroundColor = '#f0f0f0';
-        });
-        
-        item.addEventListener('mouseout', function() {
-          this.style.backgroundColor = 'transparent';
-        });
-        
-        // Event-Handler
-        item.addEventListener('click', async function() {
-          const action = this.getAttribute('data-action');
-          
-          switch(action) {
-            case 'edit':
-              // Knoten bearbeiten (gleiche Logik wie beim Edit-Button)
-              const name = prompt('Knotenname:', nodeData.name);
-              if (name) {
-                const description = prompt('Beschreibung:', nodeData.description || '');
-                await post(`/api/mind_map_node/${nodeData.id}`, { name, description });
-              }
-              break;
-              
-            case 'connect':
-              // Modus zum Verbinden aktivieren
-              cy.nodes().unselect();
-              node.select();
-              alert('Wählen Sie nun einen zweiten Knoten aus, um eine Verbindung zu erstellen');
-              break;
-              
-            case 'delete':
-              if (confirm('Sind Sie sicher, dass Sie diesen Knoten löschen möchten?')) {
-                await del(`/api/mind_map_node/${nodeData.id}`);
-              }
-              break;
-          }
-          
-          // Menü schließen
-          contextMenu.style.display = 'none';
-        });
-      });
-      
-      // Menü positionieren und anzeigen
-      contextMenu.style.left = menuX + 'px';
-      contextMenu.style.top = menuY + 'px';
-      contextMenu.style.display = 'block';
-      
-      // Event-Listener zum Schließen des Menüs
-      const closeMenu = function() {
-        if (contextMenu) {
-          contextMenu.style.display = 'none';
-        }
-        document.removeEventListener('click', closeMenu);
-      };
-      
-      // Verzögerung, um den aktuellen Click nicht zu erfassen
-      setTimeout(() => {
-        document.addEventListener('click', closeMenu);
-      }, 0);
-      
-      e.preventDefault();
-    });
-  };
-  
-  // Kontextmenü aktivieren (optional)
-  // setupContextMenu();
-
-  /* 9. Export-Funktion (optional) */
-  const btnExport = document.getElementById('exportMindmap');
-  if (btnExport) {
-    btnExport.addEventListener('click', () => {
-      const elements = cy.json().elements;
-      const exportData = {
-        nodes: elements.nodes.map(n => ({
-          id: n.data.id,
-          name: n.data.name,
-          description: n.data.description,
-          category_id: n.data.category_id,
-          x: Math.round(n.position?.x || 0),
-          y: Math.round(n.position?.y || 0)
-        })),
-        relationships: elements.edges.map(e => ({
-          parent_id: e.data.source,
-          child_id: e.data.target
-        }))
-      };
-      
-      const blob = new Blob([JSON.stringify(exportData, null, 2)], {type: 'application/json'});
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'mindmap_export.json';
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    });
-  }
-
-  /* 10. Filter-Funktion nach Kategorien (optional) */
-  const setupCategoryFilters = () => {
-    const filterContainer = document.getElementById('category-filters');
-    if (!filterContainer || !categories.length) return;
-    
-    filterContainer.innerHTML = '';
-    
-    // "Alle anzeigen" Option
-    const allBtn = document.createElement('button');
-    allBtn.innerText = 'Alle Kategorien';
-    allBtn.className = 'category-filter active';
-    allBtn.onclick = () => {
-      document.querySelectorAll('.category-filter').forEach(btn => btn.classList.remove('active'));
-      allBtn.classList.add('active');
-      cy.nodes().removeClass('filtered').show();
-      cy.edges().show();
-    };
-    filterContainer.appendChild(allBtn);
-    
-    // Filter-Button pro Kategorie
-    categories.forEach(category => {
-      const btn = document.createElement('button');
-      btn.innerText = category.name;
-      btn.className = 'category-filter';
-      btn.style.backgroundColor = category.color_code;
-      btn.style.color = '#fff';
-      btn.onclick = () => {
-        document.querySelectorAll('.category-filter').forEach(btn => btn.classList.remove('active'));
-        btn.classList.add('active');
-        
-        const matchingNodes = cy.nodes().filter(node => node.data('category_id') === category.id);
-        cy.nodes().addClass('filtered').hide();
-        matchingNodes.removeClass('filtered').show();
-        
-        // Verbindungen zu/von diesen Knoten anzeigen
-        cy.edges().hide();
-        matchingNodes.connectedEdges().show();
-      };
-      filterContainer.appendChild(btn);
-    });
-  };
-  
-  // Filter-Funktionalität aktivieren (optional)
-  // setupCategoryFilters();
-
-  /* 11. Suchfunktion (optional) */
-  const searchInput = document.getElementById('search-mindmap');
-  if (searchInput) {
-    searchInput.addEventListener('input', (e) => {
-      const searchTerm = e.target.value.toLowerCase();
-      
-      if (!searchTerm) {
-        cy.nodes().removeClass('search-hidden').show();
-        cy.edges().show();
-        return;
-      }
-      
-      cy.nodes().forEach(node => {
-        const name = node.data('name').toLowerCase();
-        const description = (node.data('description') || '').toLowerCase();
-        
-        if (name.includes(searchTerm) || description.includes(searchTerm)) {
-          node.removeClass('search-hidden').show();
-          node.connectedEdges().show();
-        } else {
-          node.addClass('search-hidden').hide();
-          // Kanten nur verstecken, wenn beide verbundenen Knoten versteckt sind
-          node.connectedEdges().forEach(edge => {
-            const otherNode = edge.source().id() === node.id() ? edge.target() : edge.source();
-            if (otherNode.hasClass('search-hidden')) {
-              edge.hide();
-            }
-          });
-        }
-      });
-    });
-  }
-
-  console.log('Mindmap erfolgreich initialisiert');
-})(); 
--- a/static/js/modules/chatgpt-assistant.js
+++ b/static/js/modules/chatgpt-assistant.js
@@ -11,62 +11,6 @@ class ChatGPTAssistant {
        this.container = null;
        this.chatHistory = null;
        this.inputField = null;
-        this.suggestionArea = null;
-        this.maxRetries = 2;
-        this.retryCount = 0;
-        this.markdownParser = null;
-        this.initializeMarkdownParser();
-    }
-
-    /**
-     * Initialisiert den Markdown-Parser
-     */
-    async initializeMarkdownParser() {
-        // Dynamisch marked.js laden, wenn noch nicht vorhanden
-        if (!window.marked) {
-            try {
-                // Prüfen, ob marked.js bereits im Dokument geladen ist
-                if (!document.querySelector('script[src*="marked"]')) {
-                    // Falls nicht, Script-Tag erstellen und einfügen
-                    const script = document.createElement('script');
-                    script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
-                    script.async = true;
-                    
-                    // Promise erstellen, das resolved wird, wenn das Script geladen wurde
-                    await new Promise((resolve, reject) => {
-                        script.onload = resolve;
-                        script.onerror = reject;
-                        document.head.appendChild(script);
-                    });
-                    
-                    console.log('Marked.js erfolgreich geladen');
-                }
-                
-                // Marked konfigurieren
-                this.markdownParser = window.marked;
-                this.markdownParser.setOptions({
-                    gfm: true,
-                    breaks: true,
-                    sanitize: true,
-                    smartLists: true,
-                    smartypants: true
-                });
-            } catch (error) {
-                console.error('Fehler beim Laden von marked.js:', error);
-                // Fallback-Parser, der nur einfache Absätze erkennt
-                this.markdownParser = {
-                    parse: (text) => {
-                        return text.split('\n').map(line => {
-                            if (line.trim() === '') return '<br>';
-                            return `<p>${line}</p>`;
-                        }).join('');
-                    }
-                };
-            }
-        } else {
-            // Marked ist bereits geladen
-            this.markdownParser = window.marked;
-        }
    }

    /**
@@ -80,16 +24,7 @@ class ChatGPTAssistant {
        this.setupEventListeners();
        
        // Ersten Willkommensnachricht anzeigen
-        this.addMessage("assistant", "Hallo! Ich bin dein KI-Assistent (4o-mini) und habe Zugriff auf die Wissensdatenbank. Wie kann ich dir helfen?\n\nDu kannst mir Fragen über:\n- **Gedanken** in der Datenbank\n- **Kategorien** und Wissenschaftsbereiche\n- **Mindmaps** und Wissensverknüpfungen\n\nstellen.");
-        
-        // Vorschläge anzeigen
-        this.showSuggestions([
-            "Zeige mir Gedanken zur künstlichen Intelligenz",
-            "Welche Kategorien gibt es in der Datenbank?",
-            "Suche nach Mindmaps zum Thema Informatik"
-        ]);
-        
-        console.log('KI-Assistent initialisiert!');
+        this.addMessage("assistant", "Frage den KI-Assistenten");
    }

    /**
@@ -110,7 +45,7 @@ class ChatGPTAssistant {
        // Chat-Container
        const chatContainer = document.createElement('div');
        chatContainer.id = 'assistant-chat';
-        chatContainer.className = 'bg-white dark:bg-dark-800 rounded-lg shadow-xl overflow-hidden transition-all duration-300 w-80 md:w-96 max-h-0 opacity-0';
+        chatContainer.className = 'bg-white dark:bg-dark-800 rounded-lg shadow-xl overflow-hidden transition-all duration-300 w-80 sm:w-96 max-h-0 opacity-0';
        
        // Chat-Header
        const header = document.createElement('div');
@@ -118,7 +53,7 @@ class ChatGPTAssistant {
        header.innerHTML = `
            <div class="flex items-center">
                <i class="fas fa-robot mr-2"></i>
-                <span>KI-Assistent (4o-mini)</span>
+                <span>KI-Assistent</span>
            </div>
            <button id="assistant-close" class="text-white hover:text-gray-200">
                <i class="fas fa-times"></i>
@@ -128,12 +63,7 @@ class ChatGPTAssistant {
        // Chat-Verlauf
        this.chatHistory = document.createElement('div');
        this.chatHistory.id = 'assistant-history';
-        this.chatHistory.className = 'p-3 overflow-y-auto max-h-96 space-y-3';
-        
-        // Vorschlagsbereich
-        this.suggestionArea = document.createElement('div');
-        this.suggestionArea.id = 'assistant-suggestions';
-        this.suggestionArea.className = 'px-3 pb-2 flex flex-wrap gap-2 overflow-x-auto hidden';
+        this.chatHistory.className = 'p-3 overflow-y-auto max-h-80 space-y-3';
        
        // Chat-Eingabe
        const inputContainer = document.createElement('div');
@@ -141,7 +71,7 @@ class ChatGPTAssistant {
        
        this.inputField = document.createElement('input');
        this.inputField.type = 'text';
-        this.inputField.placeholder = 'Stelle eine Frage zur Wissensdatenbank...';
+        this.inputField.placeholder = 'Frage den KI-Assistenten';
        this.inputField.className = 'flex-1 border border-gray-300 dark:border-dark-600 dark:bg-dark-700 dark:text-white rounded-l-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500';
        
        const sendButton = document.createElement('button');
@@ -155,7 +85,6 @@ class ChatGPTAssistant {
        
        chatContainer.appendChild(header);
        chatContainer.appendChild(this.chatHistory);
-        chatContainer.appendChild(this.suggestionArea);
        chatContainer.appendChild(inputContainer);
        
        this.container.appendChild(toggleButton);
@@ -171,40 +100,22 @@ class ChatGPTAssistant {
    setupEventListeners() {
        // Toggle-Button
        const toggleButton = document.getElementById('assistant-toggle');
-        if (toggleButton) {
-            toggleButton.addEventListener('click', () => this.toggleAssistant());
-        }
+        toggleButton.addEventListener('click', () => this.toggleAssistant());
        
        // Schließen-Button
        const closeButton = document.getElementById('assistant-close');
-        if (closeButton) {
-            closeButton.addEventListener('click', () => this.toggleAssistant(false));
-        }
+        closeButton.addEventListener('click', () => this.toggleAssistant(false));
        
        // Senden-Button
        const sendButton = document.getElementById('assistant-send');
-        if (sendButton) {
-            sendButton.addEventListener('click', () => this.sendMessage());
-        }
+        sendButton.addEventListener('click', () => this.sendMessage());
        
        // Enter-Taste im Eingabefeld
-        if (this.inputField) {
-            this.inputField.addEventListener('keyup', (e) => {
-                if (e.key === 'Enter') {
-                    this.sendMessage();
-                }
-            });
-        }
-        
-        // Vorschläge klickbar machen
-        if (this.suggestionArea) {
-            this.suggestionArea.addEventListener('click', (e) => {
-                if (e.target.classList.contains('suggestion-pill')) {
-                    this.inputField.value = e.target.textContent;
-                    this.sendMessage();
-                }
-            });
-        }
+        this.inputField.addEventListener('keyup', (e) => {
+            if (e.key === 'Enter') {
+                this.sendMessage();
+            }
+        });
    }

    /**
@@ -213,21 +124,14 @@ class ChatGPTAssistant {
     */
    toggleAssistant(state = null) {
        const chatContainer = document.getElementById('assistant-chat');
-        if (!chatContainer) return;
-        
        this.isOpen = state !== null ? state : !this.isOpen;
        
        if (this.isOpen) {
            chatContainer.classList.remove('max-h-0', 'opacity-0');
-            chatContainer.classList.add('max-h-[32rem]', 'opacity-100');
-            if (this.inputField) this.inputField.focus();
-            
-            // Zeige Vorschläge wenn verfügbar
-            if (this.suggestionArea && this.suggestionArea.children.length > 0) {
-                this.suggestionArea.classList.remove('hidden');
-            }
+            chatContainer.classList.add('max-h-96', 'opacity-100');
+            this.inputField.focus();
        } else {
-            chatContainer.classList.remove('max-h-[32rem]', 'opacity-100');
+            chatContainer.classList.remove('max-h-96', 'opacity-100');
            chatContainer.classList.add('max-h-0', 'opacity-0');
        }
    }
@@ -249,144 +153,22 @@ class ChatGPTAssistant {
        bubble.className = sender === 'user' 
            ? 'bg-primary-100 dark:bg-primary-900 text-gray-800 dark:text-white rounded-lg py-2 px-3 max-w-[85%]'
            : 'bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-white rounded-lg py-2 px-3 max-w-[85%]';
-        
-        // Formatierung des Texts (mit Markdown für Assistent-Nachrichten)
-        let formattedText = '';
-        
-        if (sender === 'assistant' && this.markdownParser) {
-            // Für Assistentnachrichten Markdown verwenden
-            try {
-                formattedText = this.markdownParser.parse(text);
-                
-                // CSS für Markdown-Formatierung hinzufügen
-                const markdownStyles = `
-                    .markdown-bubble h1, .markdown-bubble h2, .markdown-bubble h3, 
-                    .markdown-bubble h4, .markdown-bubble h5, .markdown-bubble h6 {
-                        font-weight: bold;
-                        margin-top: 0.5rem;
-                        margin-bottom: 0.5rem;
-                    }
-                    .markdown-bubble h1 { font-size: 1.4rem; }
-                    .markdown-bubble h2 { font-size: 1.3rem; }
-                    .markdown-bubble h3 { font-size: 1.2rem; }
-                    .markdown-bubble h4 { font-size: 1.1rem; }
-                    .markdown-bubble ul, .markdown-bubble ol {
-                        padding-left: 1.5rem;
-                        margin: 0.5rem 0;
-                    }
-                    .markdown-bubble ul { list-style-type: disc; }
-                    .markdown-bubble ol { list-style-type: decimal; }
-                    .markdown-bubble p { margin: 0.5rem 0; }
-                    .markdown-bubble code {
-                        font-family: monospace;
-                        background-color: rgba(0, 0, 0, 0.1);
-                        padding: 1px 4px;
-                        border-radius: 3px;
-                    }
-                    .markdown-bubble pre {
-                        background-color: rgba(0, 0, 0, 0.1);
-                        padding: 0.5rem;
-                        border-radius: 4px;
-                        overflow-x: auto;
-                        margin: 0.5rem 0;
-                    }
-                    .markdown-bubble pre code {
-                        background-color: transparent;
-                        padding: 0;
-                    }
-                    .markdown-bubble blockquote {
-                        border-left: 3px solid rgba(0, 0, 0, 0.2);
-                        padding-left: 0.8rem;
-                        margin: 0.5rem 0;
-                        font-style: italic;
-                    }
-                    .dark .markdown-bubble code {
-                        background-color: rgba(255, 255, 255, 0.1);
-                    }
-                    .dark .markdown-bubble pre {
-                        background-color: rgba(255, 255, 255, 0.1);
-                    }
-                    .dark .markdown-bubble blockquote {
-                        border-left-color: rgba(255, 255, 255, 0.2);
-                    }
-                `;
-                
-                // Füge die Styles hinzu, wenn sie noch nicht vorhanden sind
-                if (!document.querySelector('#markdown-chat-styles')) {
-                    const style = document.createElement('style');
-                    style.id = 'markdown-chat-styles';
-                    style.textContent = markdownStyles;
-                    document.head.appendChild(style);
-                }
-                
-                // Klasse für Markdown-Formatierung hinzufügen
-                bubble.classList.add('markdown-bubble');
-            } catch (error) {
-                console.error('Fehler bei der Markdown-Formatierung:', error);
-                // Fallback zur einfachen Formatierung
-                formattedText = text.split('\n').map(line => {
-                    if (line.trim() === '') return '<br>';
-                    return `<p>${line}</p>`;
-                }).join('');
-            }
-        } else {
-            // Für Benutzernachrichten einfache Formatierung
-            formattedText = text.split('\n').map(line => {
-                if (line.trim() === '') return '<br>';
-                return `<p>${line}</p>`;
-            }).join('');
-        }
-        
-        bubble.innerHTML = formattedText;
+        bubble.textContent = text;
        
        messageEl.appendChild(bubble);
+        this.chatHistory.appendChild(messageEl);
        
-        if (this.chatHistory) {
-            this.chatHistory.appendChild(messageEl);
-            
-            // Scroll zum Ende des Verlaufs
-            this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
-        }
-    }
-
-    /**
-     * Zeigt Vorschläge als klickbare Pills an
-     * @param {string[]} suggestions - Liste von Vorschlägen
-     */
-    showSuggestions(suggestions) {
-        if (!this.suggestionArea) return;
-        
-        // Vorherige Vorschläge entfernen
-        this.suggestionArea.innerHTML = '';
-        
-        if (suggestions && suggestions.length > 0) {
-            suggestions.forEach(suggestion => {
-                const pill = document.createElement('button');
-                pill.className = 'suggestion-pill text-sm bg-gray-200 dark:bg-dark-600 hover:bg-gray-300 dark:hover:bg-dark-500 text-gray-800 dark:text-gray-200 rounded-full px-3 py-1 mb-2 transition-colors';
-                pill.textContent = suggestion;
-                this.suggestionArea.appendChild(pill);
-            });
-            
-            this.suggestionArea.classList.remove('hidden');
-        } else {
-            this.suggestionArea.classList.add('hidden');
-        }
+        // Scroll zum Ende des Verlaufs
+        this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
    }

    /**
     * Sendet die Benutzernachricht an den Server und zeigt die Antwort an
     */
    async sendMessage() {
-        if (!this.inputField) return;
-        
        const userInput = this.inputField.value.trim();
        if (!userInput || this.isLoading) return;
        
-        // Vorschläge ausblenden
-        if (this.suggestionArea) {
-            this.suggestionArea.classList.add('hidden');
-        }
-        
        // Benutzernachricht anzeigen
        this.addMessage('user', userInput);
        
@@ -398,7 +180,6 @@ class ChatGPTAssistant {
        this.showLoadingIndicator();
        
        try {
-            console.log('Sende Anfrage an KI-Assistent API...');
            // Anfrage an den Server senden
            const response = await fetch('/api/assistant', {
                method: 'POST',
@@ -408,118 +189,36 @@ class ChatGPTAssistant {
                body: JSON.stringify({
                    messages: this.messages
                }),
-                cache: 'no-cache', // Kein Cache verwenden
-                credentials: 'same-origin' // Cookies senden
            });
            
+            if (!response.ok) {
+                throw new Error('Netzwerkfehler oder Serverproblem');
+            }
+            
+            const data = await response.json();
+            
            // Ladeindikator entfernen
            this.removeLoadingIndicator();
            
-            if (!response.ok) {
-                throw new Error(`Serverfehler: ${response.status} ${response.statusText}`);
-            }
-            
-            const data = await response.json();
-            console.log('Antwort erhalten:', data);
-            
            // Antwort anzeigen
-            if (data.response) {
-                this.addMessage('assistant', data.response);
-                
-                // Neue Vorschläge basierend auf dem aktuellen Kontext anzeigen
-                this.generateContextualSuggestions();
-                
-                // Erfolgreiche Anfrage zurücksetzen
-                this.retryCount = 0;
-            } else if (data.error) {
-                this.addMessage('assistant', `Fehler: ${data.error}`);
-            } else {
-                throw new Error('Unerwartetes Antwortformat vom Server');
-            }
+            this.addMessage('assistant', data.response);
        } catch (error) {
            console.error('Fehler bei der Kommunikation mit dem Assistenten:', error);
            
-            // Ladeindikator entfernen, falls noch vorhanden
+            // Ladeindikator entfernen
            this.removeLoadingIndicator();
            
-            // Fehlermeldung anzeigen oder Wiederholungsversuch starten
-            if (this.retryCount < this.maxRetries) {
-                this.retryCount++;
-                this.addMessage('assistant', 'Es gab ein Problem mit der Anfrage. Ich versuche es erneut...');
-                
-                // Kurze Verzögerung vor dem erneuten Versuch
-                setTimeout(() => {
-                    // Letzte Benutzernachricht aus dem Messages-Array entfernen
-                    const lastUserMessage = this.messages[this.messages.length - 2].content;
-                    this.messages = this.messages.slice(0, -2); // Entferne Benutzernachricht und Fehlermeldung
-                    
-                    // Erneuter Versand mit gleicher Nachricht
-                    this.inputField.value = lastUserMessage;
-                    this.sendMessage();
-                }, 1500);
-            } else {
-                // Maximale Anzahl an Wiederholungsversuchen erreicht
-                this.addMessage('assistant', 'Es tut mir leid, aber es gab ein Problem bei der Verarbeitung deiner Anfrage. Bitte versuche es später noch einmal.');
-                this.retryCount = 0; // Zurücksetzen für die nächste Anfrage
-            }
+            // Fehlermeldung anzeigen
+            this.addMessage('assistant', 'Es tut mir leid, aber es gab ein Problem bei der Verarbeitung deiner Anfrage. Bitte versuche es später noch einmal.');
        } finally {
            this.isLoading = false;
        }
    }

-    /**
-     * Generiert kontextbasierte Vorschläge basierend auf dem aktuellen Chat-Verlauf
-     */
-    generateContextualSuggestions() {
-        // Basierend auf letzter Antwort des Assistenten, verschiedene Vorschläge generieren
-        const lastAssistantMessage = this.messages.findLast(msg => msg.role === 'assistant')?.content || '';
-        
-        let suggestions = [];
-        
-        // Intelligente Vorschläge basierend auf Kontext
-        if (lastAssistantMessage.includes('Künstliche Intelligenz') || 
-            lastAssistantMessage.includes('KI ') || 
-            lastAssistantMessage.includes('AI ')) {
-            suggestions = [
-                "Wie wird KI in der Wissenschaft eingesetzt?",
-                "Zeige mir Gedanken zum maschinellen Lernen",
-                "Was ist der Unterschied zwischen KI und ML?"
-            ];
-        } else if (lastAssistantMessage.includes('Kategorie') || 
-                  lastAssistantMessage.includes('Kategorien')) {
-            suggestions = [
-                "Zeige mir die Unterkategorien",
-                "Welche Gedanken gehören zu dieser Kategorie?",
-                "Liste alle Wissenschaftskategorien auf"
-            ];
-        } else if (lastAssistantMessage.includes('Mindmap') || 
-                  lastAssistantMessage.includes('Visualisierung')) {
-            suggestions = [
-                "Wie kann ich eine eigene Mindmap erstellen?",
-                "Zeige mir Beispiele für Mindmaps",
-                "Wie funktionieren die Verbindungen in Mindmaps?"
-            ];
-        } else {
-            // Standardvorschläge
-            suggestions = [
-                "Erzähle mir mehr dazu",
-                "Gibt es Beispiele dafür?",
-                "Wie kann ich diese Information nutzen?"
-            ];
-        }
-        
-        this.showSuggestions(suggestions);
-    }
-
    /**
     * Zeigt einen Ladeindikator im Chat an
     */
    showLoadingIndicator() {
-        if (!this.chatHistory) return;
-        
-        // Entferne vorhandenen Ladeindikator (falls vorhanden)
-        this.removeLoadingIndicator();
-        
        const loadingEl = document.createElement('div');
        loadingEl.id = 'assistant-loading';
        loadingEl.className = 'flex justify-start';
@@ -533,40 +232,49 @@ class ChatGPTAssistant {
        
        // Scroll zum Ende des Verlaufs
        this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
+        
+        // Stil für den Typing-Indikator
+        const style = document.createElement('style');
+        style.textContent = `
+            .typing-indicator {
+                display: flex;
+                align-items: center;
+            }
+            .typing-indicator span {
+                height: 8px;
+                width: 8px;
+                background-color: #888;
+                border-radius: 50%;
+                display: inline-block;
+                margin: 0 2px;
+                opacity: 0.4;
+                animation: typing 1.5s infinite ease-in-out;
+            }
+            .typing-indicator span:nth-child(2) {
+                animation-delay: 0.2s;
+            }
+            .typing-indicator span:nth-child(3) {
+                animation-delay: 0.4s;
+            }
+            @keyframes typing {
+                0% { transform: translateY(0); }
+                50% { transform: translateY(-5px); }
+                100% { transform: translateY(0); }
+            }
+        `;
+        document.head.appendChild(style);
    }

    /**
     * Entfernt den Ladeindikator aus dem Chat
     */
    removeLoadingIndicator() {
-        const loadingIndicator = document.getElementById('assistant-loading');
-        if (loadingIndicator) {
-            loadingIndicator.remove();
-        }
-    }
-
-    /**
-     * Öffnet den Assistenten und sendet eine vorgegebene Frage
-     * @param {string} question - Die zu stellende Frage
-     */
-    async sendQuestion(question) {
-        if (!question || this.isLoading) return;
-        
-        // Assistenten öffnen
-        this.toggleAssistant(true);
-        
-        // Kurze Verzögerung, um sicherzustellen, dass der UI vollständig geöffnet ist
-        await new Promise(resolve => setTimeout(resolve, 300));
-        
-        // Frage in Eingabefeld setzen
-        if (this.inputField) {
-            this.inputField.value = question;
-            
-            // Sende die Frage
-            this.sendMessage();
+        const loadingEl = document.getElementById('assistant-loading');
+        if (loadingEl) {
+            loadingEl.remove();
        }
    }
 }

-// Mache die Klasse global verfügbar
-window.ChatGPTAssistant = ChatGPTAssistant; 
+// Exportiere die Klasse für die Verwendung in anderen Modulen
+export default ChatGPTAssistant; 
--- a/static/js/modules/cyber-network-init.js
+++ b/static/js/modules/cyber-network-init.js
@@ -0,0 +1,95 @@
+/**
+ * Initialisierungsmodul für den CyberNetwork-Hintergrund
+ * Importiert und startet die Animation
+ */
+
+import CyberNetwork from './cyber-network.js';
+
+// Beim Laden des Dokuments starten
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('CyberNetwork: Initialisierung gestartet');
+  
+  // Prüfen ob das CSS bereits geladen ist, wenn nicht, dann laden
+  if (!document.querySelector('link[href*="cybernetwork-bg.css"]')) {
+    console.log('CyberNetwork: CSS wird geladen');
+    const cyberNetworkCss = document.createElement('link');
+    cyberNetworkCss.rel = 'stylesheet';
+    cyberNetworkCss.href = '/static/css/src/cybernetwork-bg.css';
+    document.head.appendChild(cyberNetworkCss);
+  }
+  
+  // Container-Element für das Netzwerk finden
+  const container = document.getElementById('cyber-background-container');
+  
+  if (!container) {
+    console.error('CyberNetwork: Container #cyber-background-container nicht gefunden!');
+    return;
+  }
+  
+  console.log('CyberNetwork: Container gefunden', container);
+  
+  // Konfiguration für den Netzwerk-Hintergrund
+  const networkConfig = {
+    container: container,
+    nodeCount: window.innerWidth < 768 ? 15 : 30, // Weniger Nodes auf mobilen Geräten
+    connectionCount: window.innerWidth < 768 ? 25 : 50,
+    packetCount: window.innerWidth < 768 ? 8 : 15,
+    animationSpeed: 1.0
+  };
+  
+  // Netzwerk erstellen und initialisieren
+  const cyberNetwork = new CyberNetwork(networkConfig);
+  cyberNetwork.init();
+  console.log('CyberNetwork: Netzwerk initialisiert');
+  
+  // Globale Referenz für Debug-Zwecke
+  window.cyberNetwork = cyberNetwork;
+});
+
+// Funktion zum manuellen Initialisieren, falls notwendig
+export function initCyberNetwork(config = {}) {
+  console.log('CyberNetwork: Manuelle Initialisierung gestartet');
+  
+  // CSS laden, falls nicht vorhanden
+  if (!document.querySelector('link[href*="cybernetwork-bg.css"]')) {
+    console.log('CyberNetwork: CSS wird geladen (manuell)');
+    const cyberNetworkCss = document.createElement('link');
+    cyberNetworkCss.rel = 'stylesheet';
+    cyberNetworkCss.href = '/static/css/src/cybernetwork-bg.css';
+    document.head.appendChild(cyberNetworkCss);
+  }
+  
+  // Container-Element für das Netzwerk finden
+  const container = document.getElementById('cyber-background-container');
+  
+  if (!container) {
+    console.error('CyberNetwork: Container #cyber-background-container nicht gefunden!');
+    return null;
+  }
+  
+  // Bestehende Instanz zurücksetzen, falls vorhanden
+  if (window.cyberNetwork) {
+    console.log('CyberNetwork: Bestehende Instanz wird zurückgesetzt');
+    window.cyberNetwork.reset();
+  }
+  
+  // Netzwerk mit benutzerdefinierten Optionen erstellen
+  const networkConfig = {
+    container: container,
+    nodeCount: window.innerWidth < 768 ? 15 : 30,
+    connectionCount: window.innerWidth < 768 ? 25 : 50,
+    packetCount: window.innerWidth < 768 ? 8 : 15,
+    animationSpeed: 1.0,
+    ...config
+  };
+  
+  // Neue Instanz erstellen und initialisieren
+  const cyberNetwork = new CyberNetwork(networkConfig);
+  cyberNetwork.init();
+  console.log('CyberNetwork: Netzwerk manuell initialisiert');
+  
+  // Globale Referenz aktualisieren
+  window.cyberNetwork = cyberNetwork;
+  
+  return cyberNetwork;
+} 
--- a/static/js/modules/cyber-network.js
+++ b/static/js/modules/cyber-network.js
@@ -0,0 +1,240 @@
+/**
+ * Cyber Network Background Animation
+ * Generiert dynamisch ein animiertes Netzwerk für den Hintergrund
+ */
+
+class CyberNetwork {
+  constructor(options = {}) {
+    this.options = {
+      container: options.container || document.body,
+      nodeCount: options.nodeCount || 30,
+      connectionCount: options.connectionCount || 50,
+      packetCount: options.packetCount || 15,
+      animationSpeed: options.animationSpeed || 1.0,
+      ...options
+    };
+    
+    this.nodes = [];
+    this.connections = [];
+    this.packets = [];
+    this.initialized = false;
+    
+    this.containerElement = null;
+    this.networkGridElement = null;
+    this.glowOverlayElement = null;
+  }
+  
+  init() {
+    if (this.initialized) return;
+    
+    // Container erstellen
+    this.containerElement = document.createElement('div');
+    this.containerElement.className = 'cyber-network-bg';
+    
+    // Grid erstellen
+    this.networkGridElement = document.createElement('div');
+    this.networkGridElement.className = 'network-grid';
+    this.containerElement.appendChild(this.networkGridElement);
+    
+    // Glow Overlay erstellen
+    this.glowOverlayElement = document.createElement('div');
+    this.glowOverlayElement.className = 'glow-overlay';
+    this.containerElement.appendChild(this.glowOverlayElement);
+    
+    // Nodes generieren
+    this.generateNodes();
+    
+    // Connections generieren
+    this.generateConnections();
+    
+    // Data packets generieren
+    this.generateDataPackets();
+    
+    // Container zum DOM hinzufügen
+    if (typeof this.options.container === 'string') {
+      const container = document.querySelector(this.options.container);
+      if (container) {
+        container.appendChild(this.containerElement);
+      } else {
+        document.body.appendChild(this.containerElement);
+      }
+    } else {
+      this.options.container.appendChild(this.containerElement);
+    }
+    
+    this.initialized = true;
+    
+    // Animation starten
+    window.addEventListener('resize', this.handleResize.bind(this));
+    this.startAnimationCycle();
+  }
+  
+  generateNodes() {
+    const containerWidth = window.innerWidth;
+    const containerHeight = window.innerHeight;
+    
+    for (let i = 0; i < this.options.nodeCount; i++) {
+      const x = Math.random() * containerWidth;
+      const y = Math.random() * containerHeight;
+      
+      const node = document.createElement('div');
+      node.className = 'node';
+      node.style.left = `${x}px`;
+      node.style.top = `${y}px`;
+      
+      // Größen-Variation für visuelle Tiefe
+      const size = 2 + Math.random() * 4;
+      node.style.width = `${size}px`;
+      node.style.height = `${size}px`;
+      
+      // Speichern der Position für spätere Referenz
+      node._data = { x, y, size };
+      
+      this.containerElement.appendChild(node);
+      this.nodes.push(node);
+    }
+  }
+  
+  generateConnections() {
+    for (let i = 0; i < this.options.connectionCount; i++) {
+      // Zufällige Nodes auswählen
+      const startNodeIndex = Math.floor(Math.random() * this.nodes.length);
+      let endNodeIndex;
+      do {
+        endNodeIndex = Math.floor(Math.random() * this.nodes.length);
+      } while (endNodeIndex === startNodeIndex);
+      
+      const startNode = this.nodes[startNodeIndex];
+      const endNode = this.nodes[endNodeIndex];
+      const startData = startNode._data;
+      const endData = endNode._data;
+      
+      // Verbindung erstellen
+      const connection = document.createElement('div');
+      connection.className = 'connection';
+      
+      // Position und Rotation berechnen
+      const dx = endData.x - startData.x;
+      const dy = endData.y - startData.y;
+      const length = Math.sqrt(dx * dx + dy * dy);
+      const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+      
+      connection.style.width = `${length}px`;
+      connection.style.left = `${startData.x}px`;
+      connection.style.top = `${startData.y}px`;
+      connection.style.transform = `rotate(${angle}deg)`;
+      
+      // Variation in der Animations-Geschwindigkeit
+      connection.style.animationDuration = `${3 + Math.random() * 4}s`;
+      
+      // Speichern der verbundenen Nodes
+      connection._data = { 
+        startNode: startNodeIndex, 
+        endNode: endNodeIndex,
+        length
+      };
+      
+      this.containerElement.appendChild(connection);
+      this.connections.push(connection);
+    }
+  }
+  
+  generateDataPackets() {
+    for (let i = 0; i < this.options.packetCount; i++) {
+      this.createNewDataPacket();
+    }
+  }
+  
+  createNewDataPacket() {
+    if (this.connections.length === 0) return;
+    
+    // Zufällige Verbindung auswählen
+    const connectionIndex = Math.floor(Math.random() * this.connections.length);
+    const connection = this.connections[connectionIndex];
+    const connectionData = connection._data;
+    
+    const startNode = this.nodes[connectionData.startNode];
+    const startData = startNode._data;
+    
+    // Data Packet erstellen
+    const packet = document.createElement('div');
+    packet.className = 'data-packet';
+    
+    // Position auf dem Startknoten
+    packet.style.left = `${startData.x}px`;
+    packet.style.top = `${startData.y}px`;
+    
+    // Zufällige Geschwindigkeit
+    const travelTime = (4 + Math.random() * 4) / this.options.animationSpeed;
+    packet.style.setProperty('--travel-time', `${travelTime}s`);
+    
+    // Ziel-Koordinaten berechnen
+    const endNode = this.nodes[connectionData.endNode];
+    const endData = endNode._data;
+    const travelX = endData.x - startData.x;
+    const travelY = endData.y - startData.y;
+    
+    packet.style.setProperty('--travel-x', `${travelX}px`);
+    packet.style.setProperty('--travel-y', `${travelY}px`);
+    
+    // Farb-Variation
+    if (Math.random() > 0.5) {
+      packet.style.background = 'rgba(76, 223, 255, 0.8)'; // Akzentfarbe
+    }
+    
+    this.containerElement.appendChild(packet);
+    this.packets.push(packet);
+    
+    // Nach Ende der Animation neues Paket erstellen
+    setTimeout(() => {
+      if (this.containerElement.contains(packet)) {
+        this.containerElement.removeChild(packet);
+      }
+      
+      const index = this.packets.indexOf(packet);
+      if (index > -1) {
+        this.packets.splice(index, 1);
+        this.createNewDataPacket();
+      }
+    }, travelTime * 1000);
+  }
+  
+  handleResize() {
+    if (!this.initialized) return;
+    
+    // Bei Größenänderung alles neu generieren
+    this.reset();
+    this.init();
+  }
+  
+  reset() {
+    if (!this.initialized) return;
+    
+    // Alle Elemente entfernen
+    this.nodes.forEach(node => node.remove());
+    this.connections.forEach(connection => connection.remove());
+    this.packets.forEach(packet => packet.remove());
+    
+    this.nodes = [];
+    this.connections = [];
+    this.packets = [];
+    
+    if (this.containerElement) {
+      this.containerElement.remove();
+    }
+    
+    this.initialized = false;
+  }
+  
+  startAnimationCycle() {
+    // Regelmäßig neue Pakete erstellen für mehr Dynamik
+    setInterval(() => {
+      if (this.packets.length < this.options.packetCount * 1.5) {
+        this.createNewDataPacket();
+      }
+    }, 1000 / this.options.animationSpeed);
+  }
+}
+
+// Exportieren als Modul
+export default CyberNetwork; 
--- a/static/js/modules/mindmap-page.js
+++ b/static/js/modules/mindmap-page.js
--- a/static/js/modules/mindmap.js
+++ b/static/js/modules/mindmap.js
--- a/static/mindmap.js
+++ b/static/mindmap.js
@@ -477,9 +477,6 @@ class MindMapVisualization {
      this.nodes = processed.nodes;
      this.links = processed.links;
      
-      // Verbindungszählungen aktualisieren
-      this.updateConnectionCounts();
-      
      // Visualisierung aktualisieren
      this.updateVisualization();
      
@@ -495,9 +492,6 @@ class MindMapVisualization {
      this.nodes = this.defaultNodes;
      this.links = this.defaultLinks;
      
-      // Verbindungszählungen auch für Fallback-Daten aktualisieren
-      this.updateConnectionCounts();
-      
      // Fehler anzeigen
      this.showError('Mindmap-Daten konnten nicht geladen werden. Verwende Standarddaten.');
      this.showFlash('Fehler beim Laden der Mindmap-Daten. Standarddaten werden angezeigt.', 'error');
@@ -942,7 +936,7 @@ class MindMapVisualization {
    // Highlights für verbundene Nodes und Links hinzufügen
    if (this.g) {
      // Verbundene Nodes identifizieren
-      const connectedNodes = this.getConnectedNodesById(d.id);
+      const connectedNodes = this.getConnectedNodes(d);
      const connectedNodeIds = connectedNodes.map(node => node.id);
      
      // Alle Nodes etwas transparenter machen
@@ -1041,7 +1035,7 @@ class MindMapVisualization {
    }
    // Falls ein Node ausgewählt ist, den Highlight-Status für diesen beibehalten
    else if (this.selectedNode && this.g) {
-      const connectedNodes = this.getConnectedNodesById(this.selectedNode.id);
+      const connectedNodes = this.getConnectedNodes(this.selectedNode);
      const connectedNodeIds = connectedNodes.map(node => node.id);
      
      // Alle Nodes auf den richtigen Highlight-Status setzen
@@ -1107,87 +1101,23 @@ class MindMapVisualization {
  
  // Findet alle verbundenen Knoten zu einem gegebenen Knoten
  getConnectedNodes(node) {
-    if (!this.links || !this.nodes || !node) return [];
-    
-    // Sicherstellen, dass der Knoten eine ID hat
-    const nodeId = node.id || node;
+    if (!this.links || !this.nodes) return [];
    
    return this.nodes.filter(n => 
-      this.links.some(link => {
-        const sourceId = link.source?.id || link.source;
-        const targetId = link.target?.id || link.target;
-        return (sourceId === nodeId && targetId === n.id) || 
-               (targetId === nodeId && sourceId === n.id);
-      })
+      this.links.some(link => 
+        (link.source.id === node.id && link.target.id === n.id) || 
+        (link.target.id === node.id && link.source.id === n.id)
+      )
    );
  }
  
  // Prüft, ob zwei Knoten verbunden sind
  isConnected(a, b) {
-    if (!this.links || !a || !b) return false;
-    
-    // Sicherstellen, dass die Knoten IDs haben
-    const aId = a.id || a;
-    const bId = b.id || b;
-    
-    return this.links.some(link => {
-      const sourceId = link.source?.id || link.source;
-      const targetId = link.target?.id || link.target;
-      return (sourceId === aId && targetId === bId) || 
-             (targetId === aId && sourceId === bId);
-    });
-  }
-  
-  // Überprüft, ob ein Link zwischen zwei Knoten existiert
-  hasLink(source, target) {
-    if (!this.links || !source || !target) return false;
-    
-    // Sicherstellen, dass die Knoten IDs haben
-    const sourceId = source.id || source;
-    const targetId = target.id || target;
-    
-    return this.links.some(link => {
-      const linkSourceId = link.source?.id || link.source;
-      const linkTargetId = link.target?.id || link.target;
-      return (linkSourceId === sourceId && linkTargetId === targetId) || 
-             (linkTargetId === sourceId && linkSourceId === targetId);
-    });
-  }
-  
-  // Sicherere Methode zum Abrufen verbundener Knoten, die Prüfungen enthält
-  getConnectedNodesById(nodeId) {
-    if (!this.links || !this.nodes || !nodeId) return [];
-    
-    return this.nodes.filter(n => 
-      this.links.some(link => {
-        const sourceId = link.source.id || link.source;
-        const targetId = link.target.id || link.target;
-        return (sourceId === nodeId && targetId === n.id) || 
-               (targetId === nodeId && sourceId === n.id);
-      })
+    return this.links.some(link => 
+      (link.source.id === a.id && link.target.id === b.id) || 
+      (link.target.id === a.id && link.source.id === b.id)
    );
  }
-
-  // Aktualisiert die Verbindungszählungen für alle Knoten
-  updateConnectionCounts() {
-    if (!this.nodes || !this.links) return;
-    
-    // Für jeden Knoten die Anzahl der Verbindungen berechnen
-    this.nodes.forEach(node => {
-      // Sichere Methode, um verbundene Knoten zu zählen
-      const connectedNodes = this.nodes.filter(n => 
-        n.id !== node.id && this.links.some(link => {
-          const sourceId = link.source.id || link.source;
-          const targetId = link.target.id || link.target;
-          return (sourceId === node.id && targetId === n.id) || 
-                 (targetId === node.id && sourceId === n.id);
-        })
-      );
-      
-      // Speichere die Anzahl als Eigenschaft des Knotens
-      node.connectionCount = connectedNodes.length;
-    });
-  }
  
  // Klick-Handler für Knoten
  nodeClicked(event, d) {
--- a/static/network-animation.js
+++ b/static/network-animation.js
@@ -0,0 +1,88 @@
+// Network Animation Effect
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if we're on the mindmap page
+    const mindmapContainer = document.getElementById('mindmap-container');
+    if (!mindmapContainer) return;
+    
+    // Add enhanced animations for links and nodes
+    setTimeout(function() {
+        // Get all SVG links (connections between nodes)
+        const links = document.querySelectorAll('.link');
+        const nodes = document.querySelectorAll('.node');
+        
+        // Add animation to links
+        links.forEach(link => {
+            // Create random animation duration between 15 and 30 seconds
+            const duration = 15 + Math.random() * 15;
+            link.style.animation = `dash ${duration}s linear infinite`;
+            link.style.strokeDasharray = '5, 5';
+            
+            // Add pulse effect on hover
+            link.addEventListener('mouseover', function() {
+                this.classList.add('highlighted');
+                this.style.animation = 'dash 5s linear infinite';
+            });
+            
+            link.addEventListener('mouseout', function() {
+                this.classList.remove('highlighted');
+                this.style.animation = `dash ${duration}s linear infinite`;
+            });
+        });
+        
+        // Add effects to nodes
+        nodes.forEach(node => {
+            node.addEventListener('mouseover', function() {
+                this.querySelector('circle').style.filter = 'drop-shadow(0 0 15px rgba(179, 143, 255, 0.8))';
+                
+                // Highlight connected links
+                const nodeId = this.getAttribute('data-id') || this.id;
+                links.forEach(link => {
+                    const source = link.getAttribute('data-source');
+                    const target = link.getAttribute('data-target');
+                    
+                    if (source === nodeId || target === nodeId) {
+                        link.classList.add('highlighted');
+                        link.style.animation = 'dash 5s linear infinite';
+                    }
+                });
+            });
+            
+            node.addEventListener('mouseout', function() {
+                this.querySelector('circle').style.filter = 'drop-shadow(0 0 8px rgba(179, 143, 255, 0.5))';
+                
+                // Remove highlight from connected links
+                const nodeId = this.getAttribute('data-id') || this.id;
+                links.forEach(link => {
+                    const source = link.getAttribute('data-source');
+                    const target = link.getAttribute('data-target');
+                    
+                    if (source === nodeId || target === nodeId) {
+                        link.classList.remove('highlighted');
+                        const duration = 15 + Math.random() * 15;
+                        link.style.animation = `dash ${duration}s linear infinite`;
+                    }
+                });
+            });
+        });
+    }, 1000); // Wait for the mindmap to be fully loaded
+    
+    // Add network background effect
+    const networkBackground = document.createElement('div');
+    networkBackground.className = 'network-background';
+    networkBackground.style.cssText = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(179, 143, 255, 0.05);
+        background-size: cover;
+        background-position: center;
+        opacity: 0.15;
+        z-index: -1;
+        pointer-events: none;
+        animation: pulse 10s ease-in-out infinite alternate;
+    `;
+    
+    mindmapContainer.appendChild(networkBackground);
+}); 
--- a/static/network-background.js
+++ b/static/network-background.js
@@ -0,0 +1,232 @@
+// Animated Network Background
+let canvas, ctx, networkImage;
+let isImageLoaded = false;
+let animationSpeed = 0.0003; // Reduzierte Geschwindigkeit für sanftere Rotation
+let scaleSpeed = 0.0001;     // Reduzierte Geschwindigkeit für sanftere Skalierung
+let opacitySpeed = 0.0002;   // Reduzierte Geschwindigkeit für sanftere Opazitätsänderung
+let rotation = 0;
+let scale = 1;
+let opacity = 0.7; // Höhere Basisopazität für bessere Sichtbarkeit
+let scaleDirection = 1;
+let opacityDirection = 1;
+let animationFrameId = null;
+let isDarkMode = document.documentElement.classList.contains('dark');
+let loadAttempts = 0;
+const MAX_LOAD_ATTEMPTS = 2;
+
+// Initialize the canvas and load the image
+function initNetworkBackground() {
+    // Create canvas element if it doesn't exist
+    if (!document.getElementById('network-background')) {
+        canvas = document.createElement('canvas');
+        canvas.id = 'network-background';
+        canvas.style.position = 'fixed';
+        canvas.style.top = '0';
+        canvas.style.left = '0';
+        canvas.style.width = '100%';
+        canvas.style.height = '100%';
+        canvas.style.zIndex = '-5'; // Höher als -10 für den full-page-bg
+        canvas.style.pointerEvents = 'none'; // Stellt sicher, dass der Canvas keine Mausinteraktionen blockiert
+        document.body.appendChild(canvas);
+    } else {
+        canvas = document.getElementById('network-background');
+    }
+    
+    // Set canvas size to window size with pixel ratio consideration
+    resizeCanvas();
+    
+    // Get context with alpha enabled
+    ctx = canvas.getContext('2d', { alpha: true });
+    
+    // Load the network image - versuche zuerst die SVG-Version
+    networkImage = new Image();
+    networkImage.crossOrigin = "anonymous"; // Vermeidet CORS-Probleme
+    
+    // Keine Bilder laden, direkt Fallback-Hintergrund verwenden
+    console.log("Verwende einfachen Hintergrund ohne Bilddateien");
+    isImageLoaded = true; // Animation ohne Hintergrundbild starten
+    startAnimation();
+    
+    // Handle window resize
+    window.addEventListener('resize', debounce(resizeCanvas, 250));
+    
+    // Überwache Dark Mode-Änderungen
+    document.addEventListener('darkModeToggled', function(event) {
+        isDarkMode = event.detail.isDark;
+    });
+}
+
+// Hilfsfunktion zur Reduzierung der Resize-Event-Aufrufe
+function debounce(func, wait) {
+    let timeout;
+    return function() {
+        const context = this;
+        const args = arguments;
+        clearTimeout(timeout);
+        timeout = setTimeout(function() {
+            func.apply(context, args);
+        }, wait);
+    };
+}
+
+// Resize canvas to match window size with proper pixel ratio
+function resizeCanvas() {
+    if (!canvas) return;
+    
+    const pixelRatio = window.devicePixelRatio || 1;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    
+    // Set display size (css pixels)
+    canvas.style.width = width + 'px';
+    canvas.style.height = height + 'px';
+    
+    // Set actual size in memory (scaled for pixel ratio)
+    canvas.width = width * pixelRatio;
+    canvas.height = height * pixelRatio;
+    
+    // Scale context to match pixel ratio
+    if (ctx) {
+        ctx.scale(pixelRatio, pixelRatio);
+    }
+    
+    // Wenn Animation läuft und Bild geladen, zeichne erneut
+    if (isImageLoaded && animationFrameId) {
+        drawNetworkImage();
+    }
+}
+
+// Start animation
+function startAnimation() {
+    if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+    }
+    
+    // Start animation loop
+    animate();
+}
+
+// Draw network image
+function drawNetworkImage() {
+    if (!ctx) return;
+    
+    // Clear canvas with proper clear method
+    ctx.clearRect(0, 0, canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1));
+    
+    // Save context state
+    ctx.save();
+    
+    // Move to center of canvas
+    ctx.translate(canvas.width / (2 * (window.devicePixelRatio || 1)), canvas.height / (2 * (window.devicePixelRatio || 1)));
+    
+    // Rotate
+    ctx.rotate(rotation);
+    
+    // Scale
+    ctx.scale(scale, scale);
+    
+    // Set global opacity, angepasst für Dark Mode
+    ctx.globalAlpha = isDarkMode ? opacity : opacity * 0.8;
+    
+    if (isImageLoaded && networkImage.complete) {
+        // Bildgröße berechnen, um den Bildschirm abzudecken
+        const imgAspect = networkImage.width / networkImage.height;
+        const canvasAspect = canvas.width / canvas.height;
+        
+        let drawWidth, drawHeight;
+        
+        if (canvasAspect > imgAspect) {
+            drawWidth = canvas.width / (window.devicePixelRatio || 1);
+            drawHeight = drawWidth / imgAspect;
+        } else {
+            drawHeight = canvas.height / (window.devicePixelRatio || 1);
+            drawWidth = drawHeight * imgAspect;
+        }
+        
+        // Draw image centered
+        ctx.drawImage(
+            networkImage,
+            -drawWidth / 2,
+            -drawHeight / 2,
+            drawWidth,
+            drawHeight
+        );
+    } else {
+        // Fallback: Zeichne einen einfachen Hintergrund mit Punkten
+        drawFallbackBackground();
+    }
+    
+    // Restore context state
+    ctx.restore();
+}
+
+// Fallback-Hintergrund mit Punkten und Linien
+function drawFallbackBackground() {
+    const width = canvas.width / (window.devicePixelRatio || 1);
+    const height = canvas.height / (window.devicePixelRatio || 1);
+    
+    // Zeichne einige zufällige Punkte
+    ctx.fillStyle = isDarkMode ? 'rgba(139, 92, 246, 0.2)' : 'rgba(139, 92, 246, 0.1)';
+    
+    for (let i = 0; i < 50; i++) {
+        const x = Math.random() * width;
+        const y = Math.random() * height;
+        const radius = Math.random() * 3 + 1;
+        
+        ctx.beginPath();
+        ctx.arc(x - width/2, y - height/2, radius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+
+// Animation loop
+function animate() {
+    // Update animation parameters
+    rotation += animationSpeed;
+    
+    // Update scale with oscillation
+    scale += scaleSpeed * scaleDirection;
+    if (scale > 1.05) { // Kleinerer Skalierungsbereich für weniger starke Größenänderung
+        scaleDirection = -1;
+    } else if (scale < 0.95) {
+        scaleDirection = 1;
+    }
+    
+    // Update opacity with oscillation
+    opacity += opacitySpeed * opacityDirection;
+    if (opacity > 0.75) { // Kleinerer Opazitätsbereich für subtilere Änderungen
+        opacityDirection = -1;
+    } else if (opacity < 0.65) {
+        opacityDirection = 1;
+    }
+    
+    // Draw the image
+    drawNetworkImage();
+    
+    // Request next frame
+    animationFrameId = requestAnimationFrame(animate);
+}
+
+// Cleanup Funktion für Speicherbereinigung
+function cleanupNetworkBackground() {
+    if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+    }
+    
+    if (canvas && canvas.parentNode) {
+        canvas.parentNode.removeChild(canvas);
+    }
+    
+    window.removeEventListener('resize', resizeCanvas);
+}
+
+// Führe Initialisierung aus, wenn DOM geladen ist
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initNetworkBackground);
+} else {
+    initNetworkBackground();
+}
+
+// Führe Cleanup durch, wenn das Fenster geschlossen wird
+window.addEventListener('beforeunload', cleanupNetworkBackground); 
--- a/static/neural-network-background-full.js
+++ b/static/neural-network-background-full.js
--- a/static/neural-network-background.js
+++ b/static/neural-network-background.js
@@ -1,392 +0,0 @@
-/**
- * Vereinfachter Neuronales Netzwerk Hintergrund
- * Verwendet Canvas 2D anstelle von WebGL für bessere Leistung
- */
-
-class NeuralNetworkBackground {
-  constructor() {
-    // Canvas einrichten
-    this.canvas = document.createElement('canvas');
-    this.canvas.id = 'neural-network-background';
-    this.canvas.style.position = 'fixed';
-    this.canvas.style.top = '0';
-    this.canvas.style.left = '0';
-    this.canvas.style.width = '100%';
-    this.canvas.style.height = '100%';
-    this.canvas.style.zIndex = '-10';
-    this.canvas.style.pointerEvents = 'none';
-    this.canvas.style.opacity = '1';
-    this.canvas.style.transition = 'opacity 3.5s ease-in-out';
-    
-    // Falls Canvas bereits existiert, entfernen
-    const existingCanvas = document.getElementById('neural-network-background');
-    if (existingCanvas) {
-      existingCanvas.remove();
-    }
-    
-    // An body anhängen als erstes Kind
-    if (document.body.firstChild) {
-      document.body.insertBefore(this.canvas, document.body.firstChild);
-    } else {
-      document.body.appendChild(this.canvas);
-    }
-    
-    // 2D Context
-    this.ctx = this.canvas.getContext('2d');
-    
-    // Eigenschaften
-    this.nodes = [];
-    this.connections = [];
-    this.activeConnections = new Set();
-    this.animationFrameId = null;
-    this.isDestroying = false;
-    
-    // Farben - Lila Farbpalette
-    this.colors = {
-      background: '#040215',
-      nodeColor: '#6a5498',
-      nodePulse: '#9c7fe0',
-      connectionColor: '#4a3870',
-      flowColor: '#b47fea'
-    };
-    
-    // Konfiguration
-    this.config = {
-      nodeCount: 80,            // Anzahl der Knoten
-      nodeSize: 2.5,            // Größe der Knoten
-      connectionDistance: 150,  // Maximale Verbindungsdistanz
-      connectionOpacity: 0.5,   // Erhöht von 0.3 auf 0.5 - Deckkraft der ständigen Verbindungen
-      animationSpeed: 0.15,     // Geschwindigkeit der Animation
-      flowDensity: 2,           // Anzahl aktiver Verbindungen
-      maxFlowsPerNode: 2,       // Maximale Anzahl aktiver Verbindungen pro Knoten
-      flowDuration: [2000, 5000], // Min/Max Dauer des Flows in ms
-      nodePulseFrequency: 0.01  // Wie oft Knoten pulsieren
-    };
-    
-    // Initialisieren
-    this.init();
-    
-    // Event-Listener
-    window.addEventListener('resize', this.resizeCanvas.bind(this));
-    
-    console.log('Vereinfachter Neural Network Background initialized');
-  }
-  
-  init() {
-    this.resizeCanvas();
-    this.createNodes();
-    this.createConnections();
-    this.startAnimation();
-  }
-  
-  resizeCanvas() {
-    const pixelRatio = window.devicePixelRatio || 1;
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    
-    this.canvas.style.width = width + 'px';
-    this.canvas.style.height = height + 'px';
-    this.canvas.width = width * pixelRatio;
-    this.canvas.height = height * pixelRatio;
-    
-    if (this.ctx) {
-      this.ctx.scale(pixelRatio, pixelRatio);
-    }
-    
-    // Neuberechnung der Knotenpositionen nach Größenänderung
-    if (this.nodes.length) {
-      this.createNodes();
-      this.createConnections();
-    }
-  }
-  
-  createNodes() {
-    this.nodes = [];
-    const width = this.canvas.width / (window.devicePixelRatio || 1);
-    const height = this.canvas.height / (window.devicePixelRatio || 1);
-    
-    // Cluster-Zentren für realistisches neuronales Netzwerk
-    const clusterCount = Math.floor(6 + Math.random() * 4);
-    const clusters = [];
-    
-    for (let i = 0; i < clusterCount; i++) {
-      clusters.push({
-        x: Math.random() * width,
-        y: Math.random() * height,
-        radius: 100 + Math.random() * 150
-      });
-    }
-    
-    // Knoten erstellen
-    for (let i = 0; i < this.config.nodeCount; i++) {
-      // Wähle zufällig ein Cluster
-      const cluster = clusters[Math.floor(Math.random() * clusters.length)];
-      
-      // Erstelle einen Knoten innerhalb des Clusters mit zufälligem Offset
-      const angle = Math.random() * Math.PI * 2;
-      const distance = Math.random() * cluster.radius;
-      
-      const node = {
-        id: i,
-        x: cluster.x + Math.cos(angle) * distance,
-        y: cluster.y + Math.sin(angle) * distance,
-        size: this.config.nodeSize * (0.8 + Math.random() * 0.4),
-        speed: {
-          x: (Math.random() - 0.5) * 0.2,
-          y: (Math.random() - 0.5) * 0.2
-        },
-        lastPulse: 0,
-        pulseInterval: 5000 + Math.random() * 10000, // Zufälliges Pulsieren
-        connections: []
-      };
-      
-      this.nodes.push(node);
-    }
-  }
-  
-  createConnections() {
-    this.connections = [];
-    
-    // Verbindungen zwischen Knoten erstellen
-    for (let i = 0; i < this.nodes.length; i++) {
-      const nodeA = this.nodes[i];
-      
-      for (let j = i + 1; j < this.nodes.length; j++) {
-        const nodeB = this.nodes[j];
-        
-        const dx = nodeA.x - nodeB.x;
-        const dy = nodeA.y - nodeB.y;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-        
-        if (distance < this.config.connectionDistance) {
-          const connection = {
-            id: `${i}-${j}`,
-            from: i,
-            to: j,
-            distance: distance,
-            opacity: Math.max(0.05, 1 - (distance / this.config.connectionDistance)),
-            active: false,
-            flowProgress: 0,
-            flowDuration: 0,
-            flowStart: 0
-          };
-          
-          this.connections.push(connection);
-          nodeA.connections.push(connection);
-          nodeB.connections.push(connection);
-        }
-      }
-    }
-  }
-  
-  startAnimation() {
-    this.animate();
-  }
-  
-  animate() {
-    this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
-    
-    const now = Date.now();
-    this.updateNodes(now);
-    this.updateConnections(now);
-    this.render(now);
-  }
-  
-  updateNodes(now) {
-    const width = this.canvas.width / (window.devicePixelRatio || 1);
-    const height = this.canvas.height / (window.devicePixelRatio || 1);
-    
-    // Knoten bewegen
-    for (let i = 0; i < this.nodes.length; i++) {
-      const node = this.nodes[i];
-      
-      node.x += node.speed.x;
-      node.y += node.speed.y;
-      
-      // Begrenzung am Rand
-      if (node.x < 0 || node.x > width) {
-        node.speed.x *= -1;
-      }
-      
-      if (node.y < 0 || node.y > height) {
-        node.speed.y *= -1;
-      }
-      
-      // Zufällig Richtung ändern
-      if (Math.random() < 0.01) {
-        node.speed.x = (Math.random() - 0.5) * 0.2;
-        node.speed.y = (Math.random() - 0.5) * 0.2;
-      }
-      
-      // Zufälliges Pulsieren
-      if (Math.random() < this.config.nodePulseFrequency && now - node.lastPulse > node.pulseInterval) {
-        node.lastPulse = now;
-      }
-    }
-  }
-  
-  updateConnections(now) {
-    // Update aktive Verbindungen
-    for (const connectionId of this.activeConnections) {
-      const connection = this.connections.find(c => c.id === connectionId);
-      if (!connection) continue;
-      
-      // Aktualisiere den Flow-Fortschritt
-      const elapsed = now - connection.flowStart;
-      const progress = elapsed / connection.flowDuration;
-      
-      if (progress >= 1) {
-        // Flow beenden
-        connection.active = false;
-        this.activeConnections.delete(connectionId);
-      } else {
-        connection.flowProgress = progress;
-      }
-    }
-    
-    // Neue Flows starten, wenn unter dem Limit
-    if (this.activeConnections.size < this.config.flowDensity) {
-      // Wähle eine zufällige Verbindung
-      const availableConnections = this.connections.filter(c => !c.active);
-      
-      if (availableConnections.length > 0) {
-        const randomIndex = Math.floor(Math.random() * availableConnections.length);
-        const connection = availableConnections[randomIndex];
-        
-        // Aktiviere die Verbindung
-        connection.active = true;
-        connection.flowProgress = 0;
-        connection.flowStart = now;
-        connection.flowDuration = this.config.flowDuration[0] + 
-                                 Math.random() * (this.config.flowDuration[1] - this.config.flowDuration[0]);
-        
-        this.activeConnections.add(connection.id);
-      }
-    }
-  }
-  
-  render(now) {
-    const colors = this.colors;
-    const width = this.canvas.width / (window.devicePixelRatio || 1);
-    const height = this.canvas.height / (window.devicePixelRatio || 1);
-    
-    // Hintergrund löschen
-    this.ctx.fillStyle = colors.background;
-    this.ctx.fillRect(0, 0, width, height);
-    
-    // Verbindungen zeichnen (statisch)
-    this.ctx.strokeStyle = colors.connectionColor;
-    this.ctx.lineWidth = 1.2;
-    
-    for (const connection of this.connections) {
-      const fromNode = this.nodes[connection.from];
-      const toNode = this.nodes[connection.to];
-      
-      this.ctx.globalAlpha = connection.opacity * 0.5;
-      
-      this.ctx.beginPath();
-      this.ctx.moveTo(fromNode.x, fromNode.y);
-      this.ctx.lineTo(toNode.x, toNode.y);
-      this.ctx.stroke();
-    }
-    
-    // Aktive Verbindungen zeichnen (Flows)
-    this.ctx.strokeStyle = colors.flowColor;
-    this.ctx.lineWidth = 2.5;
-    
-    for (const connectionId of this.activeConnections) {
-      const connection = this.connections.find(c => c.id === connectionId);
-      if (!connection) continue;
-      
-      const fromNode = this.nodes[connection.from];
-      const toNode = this.nodes[connection.to];
-      
-      // Glühen-Effekt
-      this.ctx.globalAlpha = Math.sin(connection.flowProgress * Math.PI) * 0.8;
-      
-      // Linie zeichnen
-      this.ctx.beginPath();
-      this.ctx.moveTo(fromNode.x, fromNode.y);
-      this.ctx.lineTo(toNode.x, toNode.y);
-      this.ctx.stroke();
-      
-      // Fließendes Partikel
-      const progress = connection.flowProgress;
-      const x = fromNode.x + (toNode.x - fromNode.x) * progress;
-      const y = fromNode.y + (toNode.y - fromNode.y) * progress;
-      
-      this.ctx.globalAlpha = 0.9;
-      this.ctx.fillStyle = colors.flowColor;
-      
-      this.ctx.beginPath();
-      this.ctx.arc(x, y, 2, 0, Math.PI * 2);
-      this.ctx.fill();
-    }
-    
-    // Knoten zeichnen
-    for (const node of this.nodes) {
-      // Pulsierende Knoten
-      const timeSinceLastPulse = now - node.lastPulse;
-      const isPulsing = timeSinceLastPulse < 800;
-      const pulseProgress = isPulsing ? timeSinceLastPulse / 800 : 0;
-      
-      // Knoten selbst
-      this.ctx.globalAlpha = 1;
-      this.ctx.fillStyle = isPulsing 
-        ? colors.nodePulse 
-        : colors.nodeColor;
-      
-      this.ctx.beginPath();
-      this.ctx.arc(node.x, node.y, node.size + (isPulsing ? 1 * Math.sin(pulseProgress * Math.PI) : 0), 0, Math.PI * 2);
-      this.ctx.fill();
-      
-      // Wenn pulsierend, füge einen Glow-Effekt hinzu
-      if (isPulsing) {
-        this.ctx.globalAlpha = 0.5 * (1 - pulseProgress);
-        this.ctx.beginPath();
-        this.ctx.arc(node.x, node.y, node.size + 5 * pulseProgress, 0, Math.PI * 2);
-        this.ctx.fill();
-      }
-    }
-    
-    this.ctx.globalAlpha = 1;
-  }
-  
-  destroy() {
-    if (this.isDestroying) return;
-    this.isDestroying = true;
-    
-    // Animation stoppen
-    if (this.animationFrameId) {
-      cancelAnimationFrame(this.animationFrameId);
-    }
-    
-    // Canvas ausblenden
-    this.canvas.style.opacity = '0';
-    
-    // Nach Übergang entfernen
-    setTimeout(() => {
-      if (this.canvas && this.canvas.parentNode) {
-        this.canvas.parentNode.removeChild(this.canvas);
-      }
-    }, 3500);
-  }
-  
-  hexToRgb(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result ? {
-      r: parseInt(result[1], 16),
-      g: parseInt(result[2], 16),
-      b: parseInt(result[3], 16)
-    } : null;
-  }
-}
-
-// Initialisiert den Hintergrund, sobald die Seite geladen ist
-document.addEventListener('DOMContentLoaded', () => {
-  window.neuralBackground = new NeuralNetworkBackground();
-  
-  // Sicherstellen, dass die Seite immer im Dark Mode ist
-  document.documentElement.classList.add('dark');
-  document.body.classList.add('dark');
-}); 
--- a/static/style.css
+++ b/static/style.css
@@ -1,508 +0,0 @@
-/* Main Systades Styles - Dark Mystical Theme */
-
-/* Import Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
-
-/* Root Variables */
-:root {
-  /* Light Theme Colors */
-  --light-bg-primary: #f8fafc;
-  --light-bg-secondary: #f1f5f9;
-  --light-text-primary: #1e293b;
-  --light-text-secondary: #475569;
-  --light-accent-primary: #7c3aed;
-  --light-accent-secondary: #8b5cf6;
-  --light-border: #e2e8f0;
-  
-  /* Dark Theme Colors */
-  --dark-bg-primary: #0a0e19;
-  --dark-bg-secondary: #111827;
-  --dark-text-primary: #f9fafb;
-  --dark-text-secondary: #e5e7eb;
-  --dark-accent-primary: #6d28d9;
-  --dark-accent-secondary: #8b5cf6;
-  --dark-border: #1f2937;
-  
-  /* Common */
-  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  
-  /* Transitions */
-  --transition-fast: 150ms ease-in-out;
-  --transition-normal: 300ms ease-in-out;
-  --transition-slow: 500ms ease-in-out;
-}
-
-/* Base Elements */
-body {
-  font-family: var(--font-sans);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  transition: background-color var(--transition-normal), color var(--transition-normal);
-  background-color: transparent !important; /* Ensure background is transparent */
-}
-
-/* HTML root element should also be transparent */
-html {
-  background-color: transparent !important;
-}
-
-html.dark {
-  background-color: transparent !important;
-}
-
-/* Theme Specific - keep the color but remove background */
-body {
-  color: var(--light-text-primary);
-}
-
-body.dark {
-  color: var(--dark-text-primary);
-  background-color: transparent;
-}
-
-/* Ensure proper contrast in both modes */
-body:not(.dark) {
-  --text-primary: var(--light-text-primary);
-  --text-secondary: var(--light-text-secondary);
-  --bg-primary: var(--light-bg-primary);
-  --bg-secondary: var(--light-bg-secondary);
-}
-
-body.dark {
-  --text-primary: var(--dark-text-primary);
-  --text-secondary: var(--dark-text-secondary);
-  --bg-primary: var(--dark-bg-primary);
-  --bg-secondary: var(--dark-bg-secondary);
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-p {
-  line-height: 1.6;
-}
-
-.gradient-text {
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-  position: relative;
-}
-
-body .gradient-text {
-  background-image: linear-gradient(135deg, var(--light-accent-primary), var(--light-accent-secondary));
-}
-
-body.dark .gradient-text {
-  background-image: linear-gradient(135deg, var(--dark-accent-primary), var(--dark-accent-secondary));
-}
-
-/* Subtle glow for dark mode gradient text */
-body.dark .gradient-text::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  filter: blur(8px);
-  opacity: 0.3;
-  background-image: inherit;
-  z-index: -1;
-  pointer-events: none;
-}
-
-/* Containers and Layout */
-.container {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-/* Glass Morphism */
-.glass-morphism {
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-body .glass-navbar-light {
-  background-color: rgba(255, 255, 255, 0.8);
-  border-color: rgba(226, 232, 240, 0.5);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-}
-
-body.dark .glass-navbar-dark {
-  background-color: rgba(10, 14, 25, 0.8);
-  border-color: rgba(31, 41, 55, 0.5);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
-}
-
-/* Navigation */
-.nav-link {
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.5rem;
-  transition: all var(--transition-normal);
-}
-
-body .nav-link {
-  color: var(--light-text-secondary);
-}
-
-body.dark .nav-link {
-  color: var(--dark-text-secondary);
-}
-
-body .nav-link:hover {
-  color: var(--light-text-primary);
-  background-color: rgba(241, 245, 249, 0.5);
-}
-
-body.dark .nav-link:hover {
-  color: var(--dark-text-primary);
-  background-color: rgba(31, 41, 55, 0.5);
-}
-
-body .nav-link-light-active {
-  color: var(--light-accent-primary);
-  background-color: rgba(139, 92, 246, 0.1);
-}
-
-body.dark .nav-link-active {
-  color: var(--dark-accent-secondary);
-  background-color: rgba(109, 40, 217, 0.15);
-}
-
-/* Buttons */
-.btn {
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  font-weight: 500;
-  transition: all var(--transition-normal);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-body .btn-primary {
-  background-color: var(--light-accent-primary);
-  color: white;
-}
-
-body.dark .btn-primary {
-  background-color: var(--dark-accent-primary);
-  color: white;
-}
-
-body .btn-primary:hover {
-  background-color: var(--light-accent-secondary);
-  box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
-}
-
-body.dark .btn-primary:hover {
-  background-color: var(--dark-accent-secondary);
-  box-shadow: 0 0 15px rgba(109, 40, 217, 0.5);
-}
-
-body .btn-secondary {
-  background-color: transparent;
-  border: 1px solid var(--light-border);
-  color: var(--light-text-primary);
-}
-
-body.dark .btn-secondary {
-  background-color: transparent;
-  border: 1px solid var(--dark-border);
-  color: var(--dark-text-primary);
-}
-
-body .btn-secondary:hover {
-  background-color: var(--light-bg-secondary);
-  border-color: var(--light-accent-secondary);
-}
-
-body.dark .btn-secondary:hover {
-  background-color: var(--dark-bg-secondary);
-  border-color: var(--dark-accent-secondary);
-}
-
-/* Cards */
-.card {
-  border-radius: 0.75rem;
-  overflow: hidden;
-  transition: all var(--transition-normal);
-}
-
-body .card {
-  background-color: white;
-  border: 1px solid var(--light-border);
-  box-shadow: var(--shadow);
-}
-
-body.dark .card {
-  background-color: var(--dark-bg-secondary);
-  border: 1px solid var(--dark-border);
-  box-shadow: var(--shadow);
-}
-
-body .card:hover {
-  transform: translateY(-5px);
-  box-shadow: var(--shadow-md);
-}
-
-body.dark .card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
-}
-
-/* Form Elements */
-.form-input {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.5rem;
-  transition: all var(--transition-normal);
-}
-
-body .form-input {
-  background-color: white;
-  border: 1px solid var(--light-border);
-  color: var(--light-text-primary);
-}
-
-body.dark .form-input {
-  background-color: var(--dark-bg-secondary);
-  border: 1px solid var(--dark-border);
-  color: var(--dark-text-primary);
-}
-
-body .form-input:focus {
-  outline: none;
-  border-color: var(--light-accent-secondary);
-  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
-}
-
-body.dark .form-input:focus {
-  outline: none;
-  border-color: var(--dark-accent-secondary);
-  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
-}
-
-/* Animations */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.5s ease-out forwards;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-}
-
-.animate-float {
-  animation: float 5s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 0.7; }
-  50% { opacity: 1; }
-}
-
-.animate-pulse {
-  animation: pulse 3s ease-in-out infinite;
-}
-
-/* Utilities */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.shadow-elevation {
-  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
-}
-
-body .shadow-elevation {
-  box-shadow: var(--shadow);
-}
-
-body.dark .shadow-elevation {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
-}
-
-body .shadow-elevation:hover {
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-body.dark .shadow-elevation:hover {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
-  transform: translateY(-2px);
-}
-
-/* Tooltips */
-.tooltip {
-  position: relative;
-}
-
-.tooltip:hover::before {
-  content: attr(data-tooltip);
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  white-space: nowrap;
-  z-index: 10;
-  opacity: 0;
-  animation: fadeIn 0.3s ease-out forwards;
-}
-
-body .tooltip:hover::before {
-  background-color: var(--light-text-primary);
-  color: white;
-}
-
-body.dark .tooltip:hover::before {
-  background-color: var(--dark-text-primary);
-  color: var(--dark-bg-primary);
-}
-
-/* Mystical elements */
-.mystical-border {
-  position: relative;
-  overflow: hidden;
-}
-
-.mystical-border::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid;
-  border-radius: inherit;
-  pointer-events: none;
-  opacity: 0.3;
-  transition: opacity var(--transition-normal);
-}
-
-body .mystical-border::after {
-  border-color: var(--light-accent-primary);
-}
-
-body.dark .mystical-border::after {
-  border-color: var(--dark-accent-primary);
-}
-
-.mystical-border:hover::after {
-  opacity: 0.6;
-}
-
-/* Responsive Design Helpers */
-@media (max-width: 640px) {
-  .container {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  
-  .hero-heading {
-    font-size: 2rem;
-  }
-  
-  .section-heading {
-    font-size: 1.5rem;
-  }
-}
-
-/* Accessibility */
-:focus-visible {
-  outline: 2px solid;
-  outline-offset: 2px;
-}
-
-body :focus-visible {
-  outline-color: var(--light-accent-primary);
-}
-
-body.dark :focus-visible {
-  outline-color: var(--dark-accent-primary);
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
-}
-
-body ::-webkit-scrollbar-track {
-  background: var(--light-bg-secondary);
-}
-
-body.dark ::-webkit-scrollbar-track {
-  background: var(--dark-bg-secondary);
-}
-
-body ::-webkit-scrollbar-thumb {
-  background: var(--light-accent-primary);
-  border-radius: 0.25rem;
-}
-
-body.dark ::-webkit-scrollbar-thumb {
-  background: var(--dark-accent-primary);
-  border-radius: 0.25rem;
-}
-
-body ::-webkit-scrollbar-thumb:hover {
-  background: var(--light-accent-secondary);
-}
-
-body.dark ::-webkit-scrollbar-thumb:hover {
-  background: var(--dark-accent-secondary);
-} 
--- a/static/three.min.js
+++ b/static/three.min.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,100 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    "./templates/**/*.{html,jinja,jinja2}",
+    "./static/**/*.js"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eef5ff',
+          100: '#d9e7ff',
+          200: '#bcd4ff',
+          300: '#8eb8ff',
+          400: '#5a93ff',
+          500: '#2970ff',
+          600: '#1654f6',
+          700: '#1142e2',
+          800: '#1336b7',
+          900: '#153390',
+        },
+        secondary: {
+          50: '#f5f2ff',
+          100: '#ece8ff',
+          200: '#ddd5ff',
+          300: '#c4b3ff',
+          400: '#a685ff',
+          500: '#8b55ff',
+          600: '#7833f8',
+          700: '#6924e2',
+          800: '#5720b8',
+          900: '#481c96',
+        },
+        dark: {
+          50: '#f8f8f9',
+          100: '#e7e7ea',
+          200: '#d1d1d8',
+          300: '#aeaeba',
+          400: '#8a8a99',
+          500: '#6f6f7e',
+          600: '#5b5b69',
+          700: '#49494f',
+          800: '#2c2c33',
+          900: '#18181c',
+        }
+      },
+      fontFamily: {
+        'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
+        'mono': ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace']
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'gradient-tech': 'linear-gradient(to right, var(--tw-gradient-stops))',
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'float': 'float 6s ease-in-out infinite',
+      },
+      keyframes: {
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        }
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            color: 'rgb(31, 41, 55)',
+            a: {
+              color: 'rgb(41, 112, 255)',
+              '&:hover': {
+                color: 'rgb(22, 84, 246)',
+              },
+            },
+          },
+        },
+        dark: {
+          css: {
+            color: 'rgb(229, 231, 235)',
+            a: {
+              color: 'rgb(90, 147, 255)',
+              '&:hover': {
+                color: 'rgb(142, 184, 255)',
+              },
+            },
+          },
+        },
+      },
+      boxShadow: {
+        'soft': '0 4px 15px rgba(0, 0, 0, 0.05)',
+        'glow': '0 0 15px rgba(32, 92, 245, 0.3)'
+      }
+    },
+  },
+  plugins: [
+    // Typography and forms plugins removed, we'll implement their basic functionality in CSS
+  ],
+} 
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,11 +14,9 @@
    <meta name="keywords" content="systades, wissen, visualisierung, lernen, gedanken, theorie">
    <meta name="author" content="Systades-Team">
    
-    <!-- Tailwind CSS - CDN für Entwicklung und Produktion (laut Vorgabe) -->
+    <!-- Tailwind CSS über CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Alternative lokale Version, falls die CDN-Version blockiert wird -->
    <script>
-      tailwind = window.tailwind || {};
      tailwind.config = {
        darkMode: 'class',
        theme: {
@@ -59,35 +57,23 @@
                800: '#0e1220',
                900: '#0a0e19'
              }
-            },
-            keyframes: {
-              float: {
-                '0%, 100%': { transform: 'translateY(0)' },
-                '50%': { transform: 'translateY(-5px)' }
-              },
-              'bounce-slow': {
-                '0%, 100%': { transform: 'translateY(0)' },
-                '50%': { transform: 'translateY(-8px)' }
-              }
-            },
-            animation: {
-              float: 'float 3s ease-in-out infinite',
-              'bounce-slow': 'bounce-slow 2s ease-in-out infinite'
            }
          }
        }
      }
    </script>
    
-    <!-- Local Font Files -->
-    <link href="{{ url_for('static', filename='fonts/inter.css') }}" rel="stylesheet">
-    <link href="{{ url_for('static', filename='fonts/jetbrains-mono.css') }}" rel="stylesheet">
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
    
-    <!-- Font Awesome vom CDN -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Assistent CSS -->
    <link href="{{ url_for('static', filename='css/assistant.css') }}" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/src/cybernetwork-bg.css') }}">
    
    <!-- Basis-Stylesheet -->
    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
@@ -95,178 +81,95 @@
    <!-- Base-Styles ausgelagert in eigene Datei -->
    <link href="{{ url_for('static', filename='css/base-styles.css') }}" rel="stylesheet">
    
-    <!-- Alpine.js - CDN Version -->
+    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"></script>

-    <!-- Neural Network Background CSS -->
-    <link href="{{ url_for('static', filename='css/neural-network-background.css') }}" rel="stylesheet">
-
-    <!-- D3.js für Visualisierungen -->
-    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <!-- Network Background Script -->
+    <script src="{{ url_for('static', filename='network-background.js') }}"></script>
    
-    <!-- Marked.js für Markdown-Parsing -->
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    
-    <!-- ChatGPT Assistant -->
-    <script src="{{ url_for('static', filename='js/modules/chatgpt-assistant.js') }}"></script>
-    
-    <!-- MindMap Visualization Module -->
-    <script src="{{ url_for('static', filename='js/modules/mindmap.js') }}"></script>
-
-    <!-- MindMap Page Module -->
-    <script src="{{ url_for('static', filename='js/modules/mindmap-page.js') }}"></script>
-
-    <!-- Neural Network Background Script -->
-    <script src="{{ url_for('static', filename='neural-network-background.js') }}"></script>
-    
-    <!-- Hauptmodul laden (als traditionelles Skript) -->
-    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <!-- Hauptmodul laden (als ES6 Modul) -->
+    <script type="module">
+        import MindMap from "{{ url_for('static', filename='js/main.js') }}";
+        // Alpine.js-Integration
+        document.addEventListener('alpine:init', () => {
+            Alpine.data('layout', () => ({
+                darkMode: false,
+                mobileMenuOpen: false,
+                userMenuOpen: false,
+                showSettingsModal: false,
+                
+                init() {
+                    this.fetchDarkModeFromSession();
+                },
+                
+                fetchDarkModeFromSession() {
+                    // Lade den Dark Mode-Status vom Server
+                    fetch('/get_dark_mode')
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                this.darkMode = data.darkMode === 'true';
+                                document.querySelector('html').classList.toggle('dark', this.darkMode);
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Fehler beim Laden der Dark Mode-Einstellung:', error);
+                        });
+                },
+                
+                toggleDarkMode() {
+                    this.darkMode = !this.darkMode;
+                    document.querySelector('html').classList.toggle('dark', this.darkMode);
+                    
+                    // Speichere den Dark Mode-Status auf dem Server
+                    fetch('/set_dark_mode', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ darkMode: this.darkMode })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            // Zusätzlich im localStorage speichern für sofortige Reaktion bei Seitenwechsel
+                            localStorage.setItem('darkMode', this.darkMode ? 'dark' : 'light');
+                            // Event auslösen für andere Komponenten
+                            document.dispatchEvent(new CustomEvent('darkModeToggled', { 
+                                detail: { isDark: this.darkMode } 
+                            }));
+                        } else {
+                            console.error('Fehler beim Speichern der Dark Mode-Einstellung:', data.error);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Fehler beim Speichern der Dark Mode-Einstellung:', error);
+                    });
+                }
+            }));
+        });
+        
+        // MindMap global verfügbar machen (für Alpine.js und andere nicht-Module Skripte)
+        window.MindMap = MindMap;
+    </script>

    <!-- Seitenspezifische Styles -->
    {% block extra_css %}{% endblock %}
    
-    <!-- Custom dark/light mode styles -->
-    <!-- ► ►  Farb‑Token strikt getrennt  ◄ ◄ -->
-    <style>
-        /* Light‑Mode */
-        :root {
-          --bg-primary:#f4f6fa;
-          --bg-secondary:#e9ecf3;
-          --text-primary:#232837;
-          --text-secondary:#475569;
-          --accent-primary:#7c3aed;
-          --accent-secondary:#8b5cf6;
-          --glow-effect:0 0 8px rgba(139,92,246,.08);
-        }
-        /* Dark‑Mode */
-        .dark {
-          --bg-primary:#181c24;
-          --bg-secondary:#232837;
-          --text-primary:#f9fafb;
-          --text-secondary:#e5e7eb;
-          --accent-primary:#6d28d9;
-          --accent-secondary:#8b5cf6;
-          --glow-effect:0 0 8px rgba(124,58,237,.15);
-        }
-  
-        body {
-          @apply min-h-screen bg-[color:var(--bg-primary)] text-[color:var(--text-primary)] transition-colors duration-300;
-        }
-  
-        /* Utilities */
-        .mystical-glow { text-shadow: var(--glow-effect); }
-        .gradient-text {
-          background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
-          -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
-        }
-        .glass-morphism { backdrop-filter: blur(10px); }
-        .glass-navbar { @apply glass-morphism border backdrop-blur-xl; }
-        .light .glass-navbar { background-color:rgba(255,255,255,.8); border-color:rgba(0,0,0,.05); }
-        .dark .glass-navbar { background-color:rgba(10,14,25,.8); border-color:rgba(255,255,255,.05); }
-
-        /* Light-Mode spezifische Stile */
-        body:not(.dark) {
-          background-color: var(--bg-primary);
-          color: var(--text-primary);
-        }
-        
-        .nav-link-light {
-          color: var(--text-secondary);
-          transition: all 0.3s ease;
-        }
-        
-        .nav-link-light:hover {
-          color: var(--text-primary);
-          background-color: rgba(126, 34, 206, 0.1);
-        }
-        
-        .nav-link-light-active {
-          color: var(--accent-primary);
-          background-color: rgba(126, 34, 206, 0.15);
-          font-weight: 500;
-        }
-        
-        /* Kartendesign im Light-Mode */
-        body:not(.dark) .card {
-          background-color: white;
-          border: 1px solid #e5e7eb;
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        }
-        
-        body:not(.dark) .card:hover {
-          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-        }
-      </style>
+    <!-- Cybertechnisches Netzwerk-Hintergrund -->
+    <script type="module" src="{{ url_for('static', filename='js/modules/cyber-network-init.js') }}"></script>
 </head>
-<body data-page="{{ request.endpoint }}" class="relative overflow-x-hidden dark bg-gray-900 text-white" x-data="{ 
-    darkMode: true, 
-    mobileMenuOpen: false, 
-    userMenuOpen: false,
-    showSettingsModal: false,
+<body data-page="{{ request.endpoint }}" class="relative overflow-x-hidden">
+    <!-- Cybertechnisches Netzwerk-Hintergrund Container (wird via JavaScript befüllt) -->
+    <div id="cyber-background-container" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden;"></div>
    
-    init() {
-        this.initDarkMode();
-    },
+    <!-- Globaler Hintergrund -->
+    <div class="full-page-bg"></div>
+    <!-- Statischer Fallback-Hintergrund (wird nur angezeigt, wenn JavaScript deaktiviert ist) -->
+    <div class="fixed inset-0 z-[-9] bg-cover bg-center opacity-50"></div>
    
-    initDarkMode() {
-        // Lade zuerst den Wert aus dem localStorage (client-seitig)
-        const storedMode = localStorage.getItem('colorMode');
-        if (storedMode) {
-            this.darkMode = storedMode === 'dark';
-        }
-        
-        // Dann hole die Server-Einstellung, die Vorrang hat
-        this.fetchDarkModeFromSession();
-    },
-    
-    fetchDarkModeFromSession() {
-        fetch('/api/get_dark_mode')
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    this.darkMode = data.darkMode === 'true';
-                    this.applyDarkMode();
-                }
-            })
-            .catch(error => {
-                console.error('Fehler beim Laden der Dark Mode-Einstellung:', error);
-            });
-    },
-    
-    applyDarkMode() {
-        document.querySelector('html').classList.toggle('dark', this.darkMode);
-        document.querySelector('body').classList.toggle('dark', this.darkMode);
-        localStorage.setItem('colorMode', this.darkMode ? 'dark' : 'light');
-    },
-    
-    toggleDarkMode() {
-        this.darkMode = !this.darkMode;
-        this.applyDarkMode();
-        
-        fetch('/api/set_dark_mode', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ darkMode: this.darkMode })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                document.dispatchEvent(new CustomEvent('darkModeToggled', { 
-                    detail: { isDark: this.darkMode } 
-                }));
-            } else {
-                console.error('Fehler beim Speichern der Dark Mode-Einstellung:', data.error);
-            }
-        })
-        .catch(error => {
-            console.error('Fehler beim Speichern der Dark Mode-Einstellung:', error);
-        });
-    }
-}">
    <!-- App-Container -->
-    <div id="app-container" class="flex flex-col min-h-screen">
+    <div id="app-container" class="flex flex-col min-h-screen" x-data="layout">
        <!-- Hauptnavigation -->
        <nav class="sticky top-0 left-0 right-0 z-50 transition-all duration-300 py-4 px-5 border-b glass-morphism" 
             x-bind:class="darkMode ? 'glass-navbar-dark border-white/10' : 'glass-navbar-light border-gray-200/50'">
@@ -303,8 +206,8 @@
                    <button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.toggleAssistant(true)"
                       class="nav-link flex items-center" 
                       x-bind:class="darkMode 
-                       ? 'bg-gradient-to-r from-purple-900/90 to-indigo-800/90 text-white font-medium px-4 py-2 rounded-xl hover:shadow-lg hover:shadow-purple-800/30 transition-all duration-300'
-                       : 'bg-gradient-to-r from-purple-600/30 to-indigo-500/30 text-gray-800 font-medium px-4 py-2 rounded-xl hover:shadow-md transition-all duration-300'">
+                       ? 'bg-gradient-to-r from-purple-600/80 to-blue-500/80 text-white font-medium px-4 py-2 rounded-xl hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5'
+                       : 'bg-gradient-to-r from-purple-500/20 to-blue-400/20 text-gray-800 font-medium px-4 py-2 rounded-xl hover:shadow-md transition-all duration-300 hover:-translate-y-0.5'">
                        <i class="fa-solid fa-robot mr-2"></i>KI-Chat
                    </button>
                    {% if current_user.is_authenticated %}
@@ -320,6 +223,25 @@

                <!-- Rechte Seite -->
                <div class="flex items-center space-x-4">
+                    <!-- Dark Mode Toggle Switch -->
+                    <div class="flex items-center cursor-pointer" @click="toggleDarkMode">
+                        <div class="relative w-12 h-6">
+                            <input type="checkbox" id="darkModeToggle" class="sr-only" x-model="darkMode">
+                            <div class="block w-12 h-6 rounded-full transition-colors duration-300"
+                                 x-bind:class="darkMode ? 'bg-blue-400/50' : 'bg-gray-400/50'"></div>
+                            <div class="dot absolute left-1 top-1 w-4 h-4 rounded-full transition-transform duration-300 shadow-md"
+                                 x-bind:class="darkMode ? 'bg-blue-500 transform translate-x-6' : 'bg-white'"></div>
+                        </div>
+                        <div class="ml-3 hidden sm:block" 
+                             x-bind:class="darkMode ? 'text-white/90' : 'text-gray-700'">
+                            <span x-text="darkMode ? 'Dunkel' : 'Hell'"></span>
+                        </div>
+                        <div class="ml-2 sm:hidden" 
+                             x-bind:class="darkMode ? 'text-white/90' : 'text-gray-700'">
+                            <i class="fa-solid" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
+                        </div>
+                    </div>
+
                    <!-- Profil-Link oder Login -->
                    {% if current_user.is_authenticated %}
                    <div class="relative" x-data="{ open: false }">
@@ -386,22 +308,13 @@
                        </div>
                    </div>
                    {% else %}
-                    <div class="flex items-center space-x-2">
-                        <a href="{{ url_for('login') }}" 
-                           class="py-2 px-4 rounded-lg transition-all duration-300"
-                           x-bind:class="darkMode 
-                           ? 'text-white/90 hover:bg-dark-700/80' 
-                           : 'text-gray-700 hover:bg-gray-100/80'">
-                            <i class="fa-solid fa-sign-in-alt mr-2"></i>Login
-                        </a>
-                        <a href="{{ url_for('register') }}" 
-                           class="py-2 px-4 rounded-lg transition-all duration-300 font-medium"
-                           x-bind:class="darkMode 
-                           ? 'bg-purple-800/80 text-white hover:bg-purple-700/80' 
-                           : 'bg-purple-600/20 text-gray-700 hover:bg-purple-600/30'">
-                            Registrieren
-                        </a>
-                    </div>
+                    <a href="{{ url_for('login') }}" 
+                       class="flex items-center px-4 py-2.5 rounded-xl font-medium transition-all duration-300"
+                       x-bind:class="darkMode 
+                       ? 'bg-gray-800/80 text-white hover:bg-gray-700/80 shadow-md hover:shadow-lg hover:-translate-y-0.5' 
+                       : 'bg-gray-200/80 text-gray-800 hover:bg-gray-300/80 shadow-sm hover:shadow-md hover:-translate-y-0.5'">
+                        <i class="fa-solid fa-user mr-2"></i>Mein Konto
+                    </a>
                    {% endif %}
                    
                    <!-- Mobilmenü-Button -->
@@ -418,7 +331,6 @@

        <!-- Mobile Menü -->
        <div x-show="mobileMenuOpen" 
-             x-cloak
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-4"
             x-transition:enter-end="opacity-100 translate-y-0"
@@ -550,10 +462,6 @@
                               :class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
                                Impressum
                            </a>
-                            <a href="{{ url_for('ueber_uns') }}" class="text-sm transition-all duration-200"
-                               :class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
-                                Über uns
-                            </a>
                            <a href="{{ url_for('datenschutz') }}" class="text-sm transition-all duration-200"
                               :class="darkMode ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">
                                Datenschutz
@@ -603,9 +511,11 @@
    {% block scripts %}{% endblock %}
    
    <!-- KI-Chat Initialisierung -->
-    <script>
-        // Initialisiere den ChatGPT-Assistenten direkt, um sicherzustellen,
+    <script type="module">
+        // Importiere und initialisiere den ChatGPT-Assistenten direkt, um sicherzustellen,
        // dass er auf jeder Seite verfügbar ist, selbst wenn MindMap nicht geladen ist
+        import ChatGPTAssistant from "{{ url_for('static', filename='js/modules/chatgpt-assistant.js') }}";
+        
        document.addEventListener('DOMContentLoaded', function() {
            // Prüfen, ob der Assistent bereits durch MindMap initialisiert wurde
            if (!window.MindMap || !window.MindMap.assistant) {
@@ -621,43 +531,5 @@
            }
        });
    </script>
-
-    <!-- Dark/Light-Mode vereinheitlicht -->
-    <script>
-      // Globaler Zugriff für externe Skripte
-      window.MindMap = window.MindMap || {};
-      
-      window.MindMap.toggleDarkMode = function() {
-        // Alpine.js-Instanz benutzen, wenn verfügbar
-        const appEl = document.querySelector('body');
-        if (appEl && appEl.__x) {
-          appEl.__x.$data.toggleDarkMode();
-        } else {
-          // Fallback: Nur classList und localStorage
-          const isDark = document.documentElement.classList.contains('dark');
-          document.documentElement.classList.toggle('dark', !isDark);
-          document.body.classList.toggle('dark', !isDark);
-          localStorage.setItem('colorMode', !isDark ? 'dark' : 'light');
-          
-          // Server aktualisieren
-          fetch('/api/set_dark_mode', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ darkMode: !isDark })
-          }).catch(console.error);
-        }
-      };
-      
-      // Fallback für Browser-Präferenz, falls keine Einstellung geladen werden konnte
-      document.addEventListener('DOMContentLoaded', function() {
-        if (!document.body.classList.contains('dark') && !document.documentElement.classList.contains('dark')) {
-          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-          if (prefersDark) {
-            document.documentElement.classList.add('dark');
-            document.body.classList.add('dark');
-          }
-        }
-      });
-    </script>
 </body>
 </html> 
--- a/templates/community/category.html
+++ b/templates/community/category.html
@@ -1,192 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}{{ category.title }} - Forum{% endblock %}
-
-{% block extra_css %}
-<style>
-  .thread-item {
-    transition: all 0.2s ease;
-  }
-  .thread-item:hover {
-    transform: translateX(2px);
-  }
-  .thread-pinned {
-    border-left-width: 4px;
-  }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="container mx-auto px-4 py-8">
-  <!-- Breadcrumb Navigation -->
-  <div class="mb-6 flex items-center text-sm">
-    <a href="{{ url_for('community') }}" class="opacity-75 hover:opacity-100 transition-opacity">
-      <i class="fas fa-home mr-1"></i> Forum
-    </a>
-    <span class="mx-2 opacity-50">/</span>
-    <span class="font-medium">{{ category.title }}</span>
-  </div>
-  
-  <!-- Kategorie-Header -->
-  <div class="mb-8 flex flex-wrap items-center justify-between gap-4">
-    <div class="flex items-center">
-      <!-- Kategorie-Icon -->
-      <div class="w-12 h-12 rounded-xl mr-4 flex items-center justify-center text-white" 
-           style="background-color: {{ node.color_code or '#6d28d9' }}">
-        <i class="fas {{ node.icon or 'fa-folder' }} text-2xl"></i>
-      </div>
-      
-      <!-- Kategorie-Info -->
-      <div>
-        <h1 class="text-2xl font-bold">{{ category.title }}</h1>
-        <p class="opacity-75">{{ category.description }}</p>
-      </div>
-    </div>
-    
-    <!-- Neues Thema erstellen -->
-    <a href="{{ url_for('new_post', category_id=category.id) }}" 
-       class="px-5 py-2.5 rounded-lg transition-all duration-300 flex items-center"
-       x-bind:class="darkMode 
-       ? 'bg-indigo-700 hover:bg-indigo-600 text-white' 
-       : 'bg-indigo-500 hover:bg-indigo-600 text-white'">
-      <i class="fas fa-plus-circle mr-2"></i>
-      Neues Thema
-    </a>
-  </div>
-  
-  <!-- Threads anzeigen -->
-  <div class="mb-8 rounded-xl overflow-hidden"
-       x-bind:class="darkMode ? 'bg-gray-800/60 border border-white/10' : 'bg-white border border-gray-200'">
-    
-    <!-- Header -->
-    <div class="p-4 border-b" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
-      <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-7 font-medium">Thema</div>
-        <div class="col-span-1 text-center font-medium hidden md:block">Antworten</div>
-        <div class="col-span-2 text-center font-medium hidden md:block">Autor</div>
-        <div class="col-span-2 text-center font-medium hidden md:block">Letzte Antwort</div>
-      </div>
-    </div>
-    
-    <!-- Thread-Liste -->
-    {% if threads_data %}
-      {% for thread_data in threads_data %}
-        {% set thread = thread_data.thread %}
-        <div class="thread-item p-4 border-b last:border-b-0 {{ 'thread-pinned' if thread.is_pinned }}" 
-             x-bind:class="darkMode 
-             ? 'border-white/10 hover:bg-gray-700/50 {{ 'border-l-yellow-500' if thread.is_pinned }}' 
-             : 'border-gray-200 hover:bg-gray-50 {{ 'border-l-yellow-500' if thread.is_pinned }}'">
-          <a href="{{ url_for('forum_post', post_id=thread.id) }}" class="block">
-            <div class="grid grid-cols-12 gap-4">
-              <!-- Thema -->
-              <div class="col-span-12 md:col-span-7">
-                <div class="flex items-start">
-                  <!-- Status-Icons -->
-                  <div class="flex flex-col items-center mr-3 pt-1">
-                    {% if thread.is_pinned %}
-                      <i class="fas fa-thumbtack text-yellow-500" title="Angepinnt"></i>
-                    {% endif %}
-                    {% if thread.is_locked %}
-                      <i class="fas fa-lock text-red-500 mt-1" title="Gesperrt"></i>
-                    {% endif %}
-                  </div>
-                  
-                  <!-- Themen-Info -->
-                  <div>
-                    <h3 class="font-medium leading-snug mb-1 {% if thread.is_locked %}opacity-70{% endif %}">
-                      {{ thread.title }}
-                    </h3>
-                    <div class="flex items-center text-xs opacity-70 mt-1">
-                      <span><i class="fas fa-eye mr-1"></i> {{ thread.view_count }}</span>
-                      <span class="mx-2 block md:hidden">•</span>
-                      <span class="block md:hidden"><i class="fas fa-reply mr-1"></i> {{ thread_data.reply_count }}</span>
-                      <span class="mx-2">•</span>
-                      <span><i class="fas fa-clock mr-1"></i> {{ thread.created_at.strftime('%d.%m.%Y, %H:%M') }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              
-              <!-- Antworten -->
-              <div class="col-span-1 text-center hidden md:flex items-center justify-center">
-                <span class="px-2.5 py-1 rounded-full text-sm font-medium" 
-                     x-bind:class="darkMode 
-                     ? 'bg-indigo-900/40 text-indigo-300' 
-                     : 'bg-indigo-100 text-indigo-800'">
-                  {{ thread_data.reply_count }}
-                </span>
-              </div>
-              
-              <!-- Autor -->
-              <div class="col-span-2 text-center hidden md:flex items-center justify-center">
-                <div class="flex items-center">
-                  <div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-medium overflow-hidden mr-2" 
-                       style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
-                    {% if thread.author.avatar %}
-                      <img src="{{ thread.author.avatar }}" alt="{{ thread.author.username }}" class="w-full h-full object-cover">
-                    {% else %}
-                      {{ thread.author.username[0].upper() }}
-                    {% endif %}
-                  </div>
-                  <span class="text-sm truncate max-w-[80px]">{{ thread.author.username }}</span>
-                </div>
-              </div>
-              
-              <!-- Letzte Antwort -->
-              <div class="col-span-2 text-center hidden md:block text-sm">
-                {% if thread_data.latest_reply %}
-                  <div>{{ thread_data.latest_reply.created_at.strftime('%d.%m.%Y') }}</div>
-                  <div class="opacity-75 text-xs">{{ thread_data.latest_reply.created_at.strftime('%H:%M') }} Uhr</div>
-                {% else %}
-                  <span class="opacity-60">Keine Antworten</span>
-                {% endif %}
-              </div>
-            </div>
-          </a>
-        </div>
-      {% endfor %}
-    {% else %}
-      <div class="p-8 text-center">
-        <div class="text-3xl mb-3 opacity-30"><i class="fas fa-comments"></i></div>
-        <h3 class="text-xl font-semibold mb-2">Keine Themen vorhanden</h3>
-        <p class="opacity-75 mb-4">In dieser Kategorie wurden noch keine Themen erstellt.</p>
-        <a href="{{ url_for('new_post', category_id=category.id) }}" 
-           class="inline-block px-5 py-2.5 rounded-lg transition-all duration-300"
-           x-bind:class="darkMode 
-           ? 'bg-indigo-700 hover:bg-indigo-600 text-white' 
-           : 'bg-indigo-500 hover:bg-indigo-600 text-white'">
-          <i class="fas fa-plus-circle mr-2"></i>
-          Erstes Thema erstellen
-        </a>
-      </div>
-    {% endif %}
-  </div>
-  
-  <!-- Link zur Mindmap -->
-  <div class="rounded-xl p-5 mb-4 flex items-center"
-       x-bind:class="darkMode ? 'bg-purple-900/20 border border-purple-800/30' : 'bg-purple-50 border border-purple-100'">
-    <div class="text-3xl mr-4 opacity-80">
-      <i class="fas fa-diagram-project" style="color: {{ node.color_code }}"></i>
-    </div>
-    <div>
-      <h3 class="font-medium mb-1">Mindmap-Knotenpunkt: {{ node.name }}</h3>
-      <p class="text-sm opacity-75">In der Mindmap findest du weitere Informationen zu diesem Themenbereich.</p>
-    </div>
-    <div class="ml-auto">
-      <a href="{{ url_for('mindmap') }}" 
-         class="px-4 py-2 rounded-lg inline-block text-sm transition-all"
-         x-bind:class="darkMode 
-         ? 'bg-purple-800/60 hover:bg-purple-700/60 text-white' 
-         : 'bg-white hover:bg-purple-100 text-purple-800 border border-purple-200'">
-        Zur Mindmap
-      </a>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  // Hier können bei Bedarf kategoriespezifische Scripts eingefügt werden
-</script>
-{% endblock %} 
--- a/templates/community/edit_post.html
+++ b/templates/community/edit_post.html
@@ -1,344 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Beitrag bearbeiten{% endblock %}
-
-{% block extra_css %}
-<style>
-  .markdown-preview {
-    min-height: 200px;
-    max-height: 400px;
-    overflow-y: auto;
-    line-height: 1.6;
-  }
-  .markdown-preview p {
-    margin-bottom: 1rem;
-  }
-  .markdown-preview h1, .markdown-preview h2, .markdown-preview h3, 
-  .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
-    font-weight: 600;
-  }
-  .markdown-preview h1 { font-size: 1.8rem; }
-  .markdown-preview h2 { font-size: 1.5rem; }
-  .markdown-preview h3 { font-size: 1.3rem; }
-  .markdown-preview h4 { font-size: 1.1rem; }
-  .markdown-preview ul, .markdown-preview ol {
-    margin-left: 1.5rem;
-    margin-bottom: 1rem;
-  }
-  .markdown-preview ul { list-style-type: disc; }
-  .markdown-preview ol { list-style-type: decimal; }
-  .markdown-preview pre {
-    background-color: rgba(0,0,0,0.05);
-    padding: 1rem;
-    border-radius: 0.5rem;
-    overflow-x: auto;
-    margin: 1rem 0;
-  }
-  .markdown-preview code {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.9em;
-    padding: 0.1em 0.3em;
-    border-radius: 0.3em;
-    background-color: rgba(0,0,0,0.05);
-  }
-  .markdown-preview pre code {
-    padding: 0;
-    background-color: transparent;
-  }
-  .markdown-preview blockquote {
-    border-left: 4px solid;
-    padding-left: 1rem;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 1rem;
-    opacity: 0.8;
-  }
-  .dark .markdown-preview code {
-    background-color: rgba(255,255,255,0.1);
-  }
-  .dark .markdown-preview blockquote {
-    border-color: rgba(255,255,255,0.2);
-  }
-  .node-mention {
-    display: inline-flex;
-    align-items: center;
-    background-color: rgba(109, 40, 217, 0.1);
-    color: #6d28d9;
-    border-radius: 4px;
-    padding: 1px 6px;
-    font-size: 0.9em;
-    margin: 0 2px;
-    font-weight: 500;
-  }
-  .dark .node-mention {
-    background-color: rgba(167, 139, 250, 0.2);
-    color: #a78bfa;
-  }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="container mx-auto px-4 py-8">
-  <!-- Breadcrumb Navigation -->
-  <div class="mb-6 flex items-center text-sm">
-    <a href="{{ url_for('community') }}" class="opacity-75 hover:opacity-100 transition-opacity">
-      <i class="fas fa-home mr-1"></i> Forum
-    </a>
-    <span class="mx-2 opacity-50">/</span>
-    <a href="{{ url_for('forum_category', category_id=post.category_id) }}" class="opacity-75 hover:opacity-100 transition-opacity">
-      {{ post.category.title }}
-    </a>
-    <span class="mx-2 opacity-50">/</span>
-    {% if post.parent_id %}
-    <a href="{{ url_for('forum_post', post_id=post.parent_id) }}" class="opacity-75 hover:opacity-100 transition-opacity truncate max-w-[200px]">
-      {{ post.parent.title }}
-    </a>
-    <span class="mx-2 opacity-50">/</span>
-    {% endif %}
-    <span class="font-medium">Beitrag bearbeiten</span>
-  </div>
-  
-  <!-- Formular-Header -->
-  <div class="mb-6">
-    <h1 class="text-2xl font-bold mb-2">Beitrag bearbeiten</h1>
-    <p class="opacity-75">
-      {% if post.parent_id %}
-      Antwort auf <span class="font-medium">{{ post.parent.title }}</span>
-      {% else %}
-      in der Kategorie <span class="font-medium">{{ post.category.title }}</span>
-      {% endif %}
-    </p>
-  </div>
-  
-  <!-- Formular -->
-  <div class="mb-8 rounded-xl overflow-hidden"
-       x-bind:class="darkMode ? 'bg-gray-800/60 border border-white/10' : 'bg-white border border-gray-200'">
-    <div class="p-4 border-b font-medium" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
-      <i class="fas fa-edit mr-2"></i>
-      Beitrag bearbeiten
-    </div>
-    <div class="p-6">
-      <form action="{{ url_for('edit_post', post_id=post.id) }}" method="POST" x-data="{ 
-        title: '{{ post.title|safe }}', 
-        content: '{{ post.content|replace('\n', '\\n')|replace('\'', '\\\'')|safe }}',
-        showPreview: false,
-        previewHtml: '',
-        
-        updatePreview() {
-          // Verarbeite den Inhalt
-          if (this.content.trim() === '') {
-            this.previewHtml = '<div class=\'opacity-50 italic\'>Die Vorschau wird hier angezeigt...</div>';
-            return;
-          }
-          
-          // Verarbeite Markdown
-          let html = marked.parse(this.content);
-          
-          // Ersetze @Knotenname mit entsprechenden Links
-          html = html.replace(/@([a-zA-Z0-9äöüÄÖÜß_-]+)/g, '<span class=\'node-mention\'><i class=\'fas fa-diagram-project fa-xs mr-1\'></i>$1</span>');
-          
-          this.previewHtml = html;
-        }
-      }">
-        <div class="mb-6">
-          <label for="title" class="block mb-2 font-medium">Titel</label>
-          <div class="rounded-lg overflow-hidden"
-               x-bind:class="darkMode ? 'border border-white/20' : 'border border-gray-300'">
-            <input type="text" id="title" name="title" 
-                  class="w-full px-4 py-3" 
-                  x-bind:class="darkMode 
-                  ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:border-indigo-500' 
-                  : 'bg-white text-gray-700 placeholder-gray-400 focus:border-indigo-500'"
-                  x-model="title"
-                  required>
-          </div>
-        </div>
-        
-        <div class="mb-6">
-          <div class="flex justify-between items-center mb-2">
-            <label for="content" class="font-medium">Inhalt</label>
-            <div class="flex space-x-2">
-              <button type="button"
-                     class="px-3 py-1 rounded text-sm flex items-center"
-                     x-bind:class="darkMode 
-                     ? 'bg-gray-700 hover:bg-gray-600 text-white' 
-                     : 'bg-gray-200 hover:bg-gray-300 text-gray-700'"
-                     @click="showPreview = false"
-                     x-bind:disabled="!showPreview"
-                     x-bind:class="{'opacity-50': !showPreview}">
-                <i class="fas fa-edit mr-1"></i> Bearbeiten
-              </button>
-              <button type="button"
-                     class="px-3 py-1 rounded text-sm flex items-center"
-                     x-bind:class="darkMode 
-                     ? 'bg-gray-700 hover:bg-gray-600 text-white' 
-                     : 'bg-gray-200 hover:bg-gray-300 text-gray-700'"
-                     @click="updatePreview(); showPreview = true"
-                     x-bind:disabled="showPreview"
-                     x-bind:class="{'opacity-50': showPreview}">
-                <i class="fas fa-eye mr-1"></i> Vorschau
-              </button>
-            </div>
-          </div>
-          
-          <!-- Editor -->
-          <div class="rounded-lg overflow-hidden mb-2"
-               x-bind:class="darkMode ? 'border border-white/20' : 'border border-gray-300'"
-               x-show="!showPreview">
-            <textarea id="content" name="content" rows="12" 
-                     class="w-full p-3 resize-y"
-                     x-bind:class="darkMode 
-                     ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:border-indigo-500' 
-                     : 'bg-white text-gray-700 placeholder-gray-400 focus:border-indigo-500'"
-                     x-model="content"
-                     required></textarea>
-          </div>
-          
-          <!-- Preview -->
-          <div class="rounded-lg overflow-hidden mb-2 p-4 markdown-preview"
-               x-bind:class="darkMode 
-               ? 'border border-white/20 bg-gray-700/30' 
-               : 'border border-gray-300 bg-gray-50'"
-               x-show="showPreview"
-               x-html="previewHtml">
-          </div>
-          
-          <!-- Markdown-Hilfsmittel -->
-          <div class="mb-4" x-show="!showPreview">
-            <div class="text-xs opacity-70">
-              <p>Du kannst Knotenpunkte der Mindmap durch <code>@Knotenname</code> verlinken.</p>
-              <p>Dieser Editor unterstützt Markdown-Formatierung:</p>
-              <div class="flex flex-wrap gap-2 mt-1">
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="**" data-before="" data-after="" title="Fett">
-                  <i class="fas fa-bold"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="*" data-before="" data-after="" title="Kursiv">
-                  <i class="fas fa-italic"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="`" data-before="" data-after="" title="Code">
-                  <i class="fas fa-code"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="[Link-Text](URL)" data-before="" data-after="" title="Link">
-                  <i class="fas fa-link"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="\n```\nCode-Block\n```" data-before="" data-after="" title="Code-Block">
-                  <i class="fas fa-file-code"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format=">" data-before="" data-after="" title="Zitat">
-                  <i class="fas fa-quote-right"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="- " data-before="" data-after="" title="Liste">
-                  <i class="fas fa-list-ul"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="1. " data-before="" data-after="" title="Nummerierte Liste">
-                  <i class="fas fa-list-ol"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="# " data-before="" data-after="" title="Überschrift">
-                  <i class="fas fa-heading"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="flex justify-between items-center">
-          <a href="{{ url_for('forum_post', post_id=post.parent_id or post.id) }}" 
-             class="px-5 py-2.5 rounded-lg transition-all duration-300 flex items-center"
-             x-bind:class="darkMode 
-             ? 'bg-gray-700 hover:bg-gray-600 text-white' 
-             : 'bg-gray-200 hover:bg-gray-300 text-gray-700'">
-            Abbrechen
-          </a>
-          <button type="submit" 
-                 class="px-5 py-2.5 rounded-lg transition-all duration-300 flex items-center"
-                 x-bind:class="darkMode 
-                 ? 'bg-indigo-700 hover:bg-indigo-600 text-white' 
-                 : 'bg-indigo-500 hover:bg-indigo-600 text-white'">
-            <i class="fas fa-save mr-2"></i>
-            Änderungen speichern
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Markdown-Buttons für den Beitragseditor
-    document.querySelectorAll('.markdown-button').forEach(button => {
-      button.addEventListener('click', function() {
-        const textarea = document.getElementById('content');
-        const format = this.dataset.format;
-        const before = this.dataset.before || '';
-        const after = this.dataset.after || '';
-        
-        // Hole die aktuelle Auswahl
-        const start = textarea.selectionStart;
-        const end = textarea.selectionEnd;
-        const selection = textarea.value.substring(start, end);
-        
-        // Wende die Formatierung an
-        let formattedText;
-        if (format.includes('\n')) {
-          // Für Formate mit Zeilenumbrüchen (z.B. Code-Blöcke)
-          formattedText = format.replace('Code-Block', selection || 'Code-Block');
-        } else if (format.includes('[Link-Text](URL)')) {
-          formattedText = format.replace('Link-Text', selection || 'Link-Text');
-        } else if (format === '- ' || format === '1. ' || format === '# ' || format === '> ') {
-          // Für Listen und Überschriften: am Anfang der Zeile einfügen
-          const beforeSelection = textarea.value.substring(0, start);
-          const afterSelection = textarea.value.substring(end);
-          
-          // Finde den Anfang der aktuellen Zeile
-          const lastNewline = beforeSelection.lastIndexOf('\n');
-          const lineStart = lastNewline === -1 ? 0 : lastNewline + 1;
-          
-          // Füge das Format am Zeilenanfang ein
-          formattedText = beforeSelection.substring(0, lineStart) + 
-                         format + 
-                         beforeSelection.substring(lineStart) + 
-                         selection + 
-                         afterSelection;
-          
-          // Setze die neue Cursor-Position
-          const newCursorPos = end + format.length;
-          textarea.value = formattedText;
-          textarea.setSelectionRange(newCursorPos, newCursorPos);
-          
-          // Alpine.js Model aktualisieren
-          textarea.dispatchEvent(new Event('input'));
-          return; // Früher zurückkehren, da wir die Formatierung bereits angewendet haben
-        } else {
-          // Für einfache Formatierungen wie fett, kursiv, Code
-          formattedText = before + format + selection + format + after;
-        }
-        
-        // Ersetze den Text
-        textarea.value = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end);
-        
-        // Setze den Fokus zurück auf das Textarea
-        textarea.focus();
-        
-        // Alpine.js Model aktualisieren
-        textarea.dispatchEvent(new Event('input'));
-        
-        // Setze die Auswahl neu, wenn es eine Auswahl gab
-        if (selection) {
-          const newStart = start + before.length + format.length;
-          const newEnd = newStart + selection.length;
-          textarea.setSelectionRange(newStart, newEnd);
-        } else {
-          // Setze den Cursor in die Mitte von **|** oder `|`
-          const newCursorPos = start + before.length + format.length;
-          textarea.setSelectionRange(newCursorPos, newCursorPos);
-        }
-      });
-    });
-  });
-</script>
-{% endblock %} 
--- a/templates/community/index.html
+++ b/templates/community/index.html
@@ -1,125 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Community Forum{% endblock %}
-
-{% block extra_css %}
-<style>
-  .forum-category {
-    transition: all 0.3s ease;
-  }
-  .forum-category:hover {
-    transform: translateY(-2px);
-  }
-  .category-icon {
-    font-size: 1.5rem;
-    width: 2.5rem;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.75rem;
-  }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="container mx-auto px-4 py-8">
-  <!-- Seitenüberschrift -->
-  <div class="mb-8 text-center">
-    <h1 class="text-3xl font-bold mb-2 gradient-text">Community Forum</h1>
-    <p class="text-lg opacity-75">Diskutiere mit anderen Nutzern über die Hauptthemenbereiche der Mindmap</p>
-  </div>
-  
-  <!-- Forumskategorien -->
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-    {% if categories_data %}
-      {% for cat_data in categories_data %}
-        <a href="{{ url_for('forum_category', category_id=cat_data.category.id) }}" class="forum-category block">
-          <div class="rounded-xl p-5 h-full" 
-               x-bind:class="darkMode ? 'bg-gray-800/60 hover:bg-gray-800/80 border border-white/10' : 'bg-white hover:bg-gray-50 border border-gray-200 shadow-md'">
-            <div class="flex items-start">
-              <!-- Kategorie-Icon -->
-              <div class="category-icon mr-4 text-white" 
-                   style="background-color: {{ cat_data.category.node.color_code or '#6d28d9' }}">
-                <i class="fas {{ cat_data.category.node.icon or 'fa-folder' }}"></i>
-              </div>
-              
-              <!-- Kategorie-Info -->
-              <div class="flex-grow">
-                <h3 class="text-xl font-semibold mb-2">{{ cat_data.category.title }}</h3>
-                <p class="opacity-75 text-sm mb-3">{{ cat_data.category.description }}</p>
-                
-                <!-- Statistik -->
-                <div class="flex flex-wrap gap-4 text-sm opacity-80">
-                  <div class="flex items-center">
-                    <i class="fas fa-comment-alt mr-2"></i>
-                    <span>{{ cat_data.total_posts }} Themen</span>
-                  </div>
-                  <div class="flex items-center">
-                    <i class="fas fa-reply mr-2"></i>
-                    <span>{{ cat_data.total_replies }} Antworten</span>
-                  </div>
-                  {% if cat_data.latest_post %}
-                  <div class="flex items-center">
-                    <i class="fas fa-clock mr-2"></i>
-                    <span>Neuster Beitrag: {{ cat_data.latest_post.created_at.strftime('%d.%m.%Y, %H:%M') }}</span>
-                  </div>
-                  {% endif %}
-                </div>
-              </div>
-              
-              <!-- Pfeil-Icon -->
-              <div class="ml-2">
-                <i class="fas fa-chevron-right opacity-50"></i>
-              </div>
-            </div>
-          </div>
-        </a>
-      {% endfor %}
-    {% else %}
-      <div class="col-span-2 text-center py-8">
-        <div class="text-3xl mb-3 opacity-30"><i class="fas fa-exclamation-circle"></i></div>
-        <h3 class="text-xl font-semibold mb-2">Keine Forum-Kategorien gefunden</h3>
-        <p class="opacity-75">Es sind derzeit keine Kategorien für Diskussionen verfügbar.</p>
-      </div>
-    {% endif %}
-  </div>
-  
-  <!-- Hinweis zur Nutzung -->
-  <div class="rounded-xl p-6 text-center mb-8" 
-       x-bind:class="darkMode ? 'bg-indigo-900/30 border border-indigo-700/30' : 'bg-indigo-50 border border-indigo-100'">
-    <h3 class="text-xl font-semibold mb-3">
-      <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
-      So funktioniert das Forum
-    </h3>
-    <p class="mb-4">Das Community-Forum ist nach den Hauptknotenpunkten der Systades-Mindmap strukturiert. 
-      In deinen Beiträgen kannst du Knotenpunkte mit <code>@Knotenname</code> verlinken.</p>
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
-      <div class="p-4 rounded-lg" 
-           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
-        <div class="text-2xl mb-2"><i class="fas fa-users text-indigo-400"></i></div>
-        <h4 class="font-medium mb-1">Fachliche Diskussionen</h4>
-        <p class="text-sm opacity-75">Tausche dich mit anderen zu spezifischen Themen aus</p>
-      </div>
-      <div class="p-4 rounded-lg" 
-           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
-        <div class="text-2xl mb-2"><i class="fas fa-link text-indigo-400"></i></div>
-        <h4 class="font-medium mb-1">Wissensvernetzung</h4>
-        <p class="text-sm opacity-75">Verknüpfe Inhalte durch Knotenreferenzen</p>
-      </div>
-      <div class="p-4 rounded-lg" 
-           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
-        <div class="text-2xl mb-2"><i class="fas fa-markdown text-indigo-400"></i></div>
-        <h4 class="font-medium mb-1">Markdown Support</h4>
-        <p class="text-sm opacity-75">Formatiere deine Beiträge mit Markdown</p>
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  // Hier können bei Bedarf forumspezifische Scripts eingefügt werden
-</script>
-{% endblock %} 
--- a/templates/community/new_post.html
+++ b/templates/community/new_post.html
@@ -1,355 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Neues Thema - {{ category.title }}{% endblock %}
-
-{% block extra_css %}
-<style>
-  .markdown-preview {
-    min-height: 200px;
-    max-height: 400px;
-    overflow-y: auto;
-    line-height: 1.6;
-  }
-  .markdown-preview p {
-    margin-bottom: 1rem;
-  }
-  .markdown-preview h1, .markdown-preview h2, .markdown-preview h3, 
-  .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
-    font-weight: 600;
-  }
-  .markdown-preview h1 { font-size: 1.8rem; }
-  .markdown-preview h2 { font-size: 1.5rem; }
-  .markdown-preview h3 { font-size: 1.3rem; }
-  .markdown-preview h4 { font-size: 1.1rem; }
-  .markdown-preview ul, .markdown-preview ol {
-    margin-left: 1.5rem;
-    margin-bottom: 1rem;
-  }
-  .markdown-preview ul { list-style-type: disc; }
-  .markdown-preview ol { list-style-type: decimal; }
-  .markdown-preview pre {
-    background-color: rgba(0,0,0,0.05);
-    padding: 1rem;
-    border-radius: 0.5rem;
-    overflow-x: auto;
-    margin: 1rem 0;
-  }
-  .markdown-preview code {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.9em;
-    padding: 0.1em 0.3em;
-    border-radius: 0.3em;
-    background-color: rgba(0,0,0,0.05);
-  }
-  .markdown-preview pre code {
-    padding: 0;
-    background-color: transparent;
-  }
-  .markdown-preview blockquote {
-    border-left: 4px solid;
-    padding-left: 1rem;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 1rem;
-    opacity: 0.8;
-  }
-  .dark .markdown-preview code {
-    background-color: rgba(255,255,255,0.1);
-  }
-  .dark .markdown-preview blockquote {
-    border-color: rgba(255,255,255,0.2);
-  }
-  .node-mention {
-    display: inline-flex;
-    align-items: center;
-    background-color: rgba(109, 40, 217, 0.1);
-    color: #6d28d9;
-    border-radius: 4px;
-    padding: 1px 6px;
-    font-size: 0.9em;
-    margin: 0 2px;
-    font-weight: 500;
-  }
-  .dark .node-mention {
-    background-color: rgba(167, 139, 250, 0.2);
-    color: #a78bfa;
-  }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="container mx-auto px-4 py-8">
-  <!-- Breadcrumb Navigation -->
-  <div class="mb-6 flex items-center text-sm">
-    <a href="{{ url_for('community') }}" class="opacity-75 hover:opacity-100 transition-opacity">
-      <i class="fas fa-home mr-1"></i> Forum
-    </a>
-    <span class="mx-2 opacity-50">/</span>
-    <a href="{{ url_for('forum_category', category_id=category.id) }}" class="opacity-75 hover:opacity-100 transition-opacity">
-      {{ category.title }}
-    </a>
-    <span class="mx-2 opacity-50">/</span>
-    <span class="font-medium">Neues Thema</span>
-  </div>
-  
-  <!-- Formular-Header -->
-  <div class="mb-6">
-    <h1 class="text-2xl font-bold mb-2">Neues Thema erstellen</h1>
-    <p class="opacity-75">in der Kategorie <span class="font-medium">{{ category.title }}</span></p>
-  </div>
-  
-  <!-- Formular -->
-  <div class="mb-8 rounded-xl overflow-hidden"
-       x-bind:class="darkMode ? 'bg-gray-800/60 border border-white/10' : 'bg-white border border-gray-200'">
-    <div class="p-4 border-b font-medium" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
-      <i class="fas fa-plus-circle mr-2"></i>
-      Neues Thema
-    </div>
-    <div class="p-6">
-      <form action="{{ url_for('new_post', category_id=category.id) }}" method="POST" x-data="{ 
-        title: '', 
-        content: '',
-        showPreview: false,
-        previewHtml: '',
-        
-        updatePreview() {
-          // Verarbeite den Inhalt
-          if (this.content.trim() === '') {
-            this.previewHtml = '<div class=\'opacity-50 italic\'>Die Vorschau wird hier angezeigt...</div>';
-            return;
-          }
-          
-          // Verarbeite Markdown
-          let html = marked.parse(this.content);
-          
-          // Ersetze @Knotenname mit entsprechenden Links
-          html = html.replace(/@([a-zA-Z0-9äöüÄÖÜß_-]+)/g, '<span class=\'node-mention\'><i class=\'fas fa-diagram-project fa-xs mr-1\'></i>$1</span>');
-          
-          this.previewHtml = html;
-        }
-      }">
-        <div class="mb-6">
-          <label for="title" class="block mb-2 font-medium">Titel des Themas</label>
-          <div class="rounded-lg overflow-hidden"
-               x-bind:class="darkMode ? 'border border-white/20' : 'border border-gray-300'">
-            <input type="text" id="title" name="title" 
-                  class="w-full px-4 py-3" 
-                  x-bind:class="darkMode 
-                  ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:border-indigo-500' 
-                  : 'bg-white text-gray-700 placeholder-gray-400 focus:border-indigo-500'"
-                  placeholder="Ein prägnanter Titel für dein Thema"
-                  x-model="title"
-                  required>
-          </div>
-        </div>
-        
-        <div class="mb-6">
-          <div class="flex justify-between items-center mb-2">
-            <label for="content" class="font-medium">Inhalt</label>
-            <div class="flex space-x-2">
-              <button type="button"
-                     class="px-3 py-1 rounded text-sm flex items-center"
-                     x-bind:class="darkMode 
-                     ? 'bg-gray-700 hover:bg-gray-600 text-white' 
-                     : 'bg-gray-200 hover:bg-gray-300 text-gray-700'"
-                     @click="showPreview = false"
-                     x-bind:disabled="!showPreview"
-                     x-bind:class="{'opacity-50': !showPreview}">
-                <i class="fas fa-edit mr-1"></i> Bearbeiten
-              </button>
-              <button type="button"
-                     class="px-3 py-1 rounded text-sm flex items-center"
-                     x-bind:class="darkMode 
-                     ? 'bg-gray-700 hover:bg-gray-600 text-white' 
-                     : 'bg-gray-200 hover:bg-gray-300 text-gray-700'"
-                     @click="updatePreview(); showPreview = true"
-                     x-bind:disabled="showPreview"
-                     x-bind:class="{'opacity-50': showPreview}">
-                <i class="fas fa-eye mr-1"></i> Vorschau
-              </button>
-            </div>
-          </div>
-          
-          <!-- Editor -->
-          <div class="rounded-lg overflow-hidden mb-2"
-               x-bind:class="darkMode ? 'border border-white/20' : 'border border-gray-300'"
-               x-show="!showPreview">
-            <textarea id="content" name="content" rows="12" 
-                     class="w-full p-3 resize-y"
-                     x-bind:class="darkMode 
-                     ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:border-indigo-500' 
-                     : 'bg-white text-gray-700 placeholder-gray-400 focus:border-indigo-500'"
-                     placeholder="Schreibe deinen Beitrag hier (unterstützt Markdown und @Knotenname-Erwähnungen)..."
-                     x-model="content"
-                     required></textarea>
-          </div>
-          
-          <!-- Preview -->
-          <div class="rounded-lg overflow-hidden mb-2 p-4 markdown-preview"
-               x-bind:class="darkMode 
-               ? 'border border-white/20 bg-gray-700/30' 
-               : 'border border-gray-300 bg-gray-50'"
-               x-show="showPreview"
-               x-html="previewHtml">
-          </div>
-          
-          <!-- Markdown-Hilfsmittel -->
-          <div class="mb-4" x-show="!showPreview">
-            <div class="text-xs opacity-70">
-              <p>Du kannst Knotenpunkte der Mindmap durch <code>@Knotenname</code> verlinken.</p>
-              <p>Dieser Editor unterstützt Markdown-Formatierung:</p>
-              <div class="flex flex-wrap gap-2 mt-1">
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="**" data-before="" data-after="" title="Fett">
-                  <i class="fas fa-bold"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="*" data-before="" data-after="" title="Kursiv">
-                  <i class="fas fa-italic"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="`" data-before="" data-after="" title="Code">
-                  <i class="fas fa-code"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="[Link-Text](URL)" data-before="" data-after="" title="Link">
-                  <i class="fas fa-link"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="\n```\nCode-Block\n```" data-before="" data-after="" title="Code-Block">
-                  <i class="fas fa-file-code"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format=">" data-before="" data-after="" title="Zitat">
-                  <i class="fas fa-quote-right"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="- " data-before="" data-after="" title="Liste">
-                  <i class="fas fa-list-ul"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="1. " data-before="" data-after="" title="Nummerierte Liste">
-                  <i class="fas fa-list-ol"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="# " data-before="" data-after="" title="Überschrift">
-                  <i class="fas fa-heading"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="flex justify-between items-center">
-          <a href="{{ url_for('forum_category', category_id=category.id) }}" 
-             class="px-5 py-2.5 rounded-lg transition-all duration-300 flex items-center"
-             x-bind:class="darkMode 
-             ? 'bg-gray-700 hover:bg-gray-600 text-white' 
-             : 'bg-gray-200 hover:bg-gray-300 text-gray-700'">
-            Abbrechen
-          </a>
-          <button type="submit" 
-                 class="px-5 py-2.5 rounded-lg transition-all duration-300 flex items-center"
-                 x-bind:class="darkMode 
-                 ? 'bg-indigo-700 hover:bg-indigo-600 text-white' 
-                 : 'bg-indigo-500 hover:bg-indigo-600 text-white'">
-            <i class="fas fa-paper-plane mr-2"></i>
-            Thema erstellen
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-  
-  <!-- Link zur Mindmap -->
-  <div class="rounded-xl p-5 mb-4 flex items-center"
-       x-bind:class="darkMode ? 'bg-purple-900/20 border border-purple-800/30' : 'bg-purple-50 border border-purple-100'">
-    <div class="text-3xl mr-4 opacity-80">
-      <i class="fas fa-diagram-project" style="color: {{ category.node.color_code }}"></i>
-    </div>
-    <div>
-      <h3 class="font-medium mb-1">Mindmap-Knotenpunkt: {{ category.node.name }}</h3>
-      <p class="text-sm opacity-75">Dieser Diskussionsbereich ist mit dem Mindmap-Knotenpunkt "{{ category.node.name }}" verknüpft.</p>
-    </div>
-    <div class="ml-auto">
-      <a href="{{ url_for('mindmap') }}" 
-         class="px-4 py-2 rounded-lg inline-block text-sm transition-all"
-         x-bind:class="darkMode 
-         ? 'bg-purple-800/60 hover:bg-purple-700/60 text-white' 
-         : 'bg-white hover:bg-purple-100 text-purple-800 border border-purple-200'">
-        Zur Mindmap
-      </a>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Markdown-Buttons für den Beitragseditor
-    document.querySelectorAll('.markdown-button').forEach(button => {
-      button.addEventListener('click', function() {
-        const textarea = document.getElementById('content');
-        const format = this.dataset.format;
-        const before = this.dataset.before || '';
-        const after = this.dataset.after || '';
-        
-        // Hole die aktuelle Auswahl
-        const start = textarea.selectionStart;
-        const end = textarea.selectionEnd;
-        const selection = textarea.value.substring(start, end);
-        
-        // Wende die Formatierung an
-        let formattedText;
-        if (format.includes('\n')) {
-          // Für Formate mit Zeilenumbrüchen (z.B. Code-Blöcke)
-          formattedText = format.replace('Code-Block', selection || 'Code-Block');
-        } else if (format.includes('[Link-Text](URL)')) {
-          formattedText = format.replace('Link-Text', selection || 'Link-Text');
-        } else if (format === '- ' || format === '1. ' || format === '# ' || format === '> ') {
-          // Für Listen und Überschriften: am Anfang der Zeile einfügen
-          const beforeSelection = textarea.value.substring(0, start);
-          const afterSelection = textarea.value.substring(end);
-          
-          // Finde den Anfang der aktuellen Zeile
-          const lastNewline = beforeSelection.lastIndexOf('\n');
-          const lineStart = lastNewline === -1 ? 0 : lastNewline + 1;
-          
-          // Füge das Format am Zeilenanfang ein
-          formattedText = beforeSelection.substring(0, lineStart) + 
-                         format + 
-                         beforeSelection.substring(lineStart) + 
-                         selection + 
-                         afterSelection;
-          
-          // Setze die neue Cursor-Position
-          const newCursorPos = end + format.length;
-          textarea.value = formattedText;
-          textarea.setSelectionRange(newCursorPos, newCursorPos);
-          
-          // Alpine.js Model aktualisieren
-          textarea.dispatchEvent(new Event('input'));
-          return; // Früher zurückkehren, da wir die Formatierung bereits angewendet haben
-        } else {
-          // Für einfache Formatierungen wie fett, kursiv, Code
-          formattedText = before + format + selection + format + after;
-        }
-        
-        // Ersetze den Text
-        textarea.value = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end);
-        
-        // Setze den Fokus zurück auf das Textarea
-        textarea.focus();
-        
-        // Alpine.js Model aktualisieren
-        textarea.dispatchEvent(new Event('input'));
-        
-        // Setze die Auswahl neu, wenn es eine Auswahl gab
-        if (selection) {
-          const newStart = start + before.length + format.length;
-          const newEnd = newStart + selection.length;
-          textarea.setSelectionRange(newStart, newEnd);
-        } else {
-          // Setze den Cursor in die Mitte von **|** oder `|`
-          const newCursorPos = start + before.length + format.length;
-          textarea.setSelectionRange(newCursorPos, newCursorPos);
-        }
-      });
-    });
-  });
-</script>
-{% endblock %} 
--- a/templates/community/post.html
+++ b/templates/community/post.html
@@ -1,491 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}{{ post.title }} - Forum{% endblock %}
-
-{% block extra_css %}
-<style>
-  .post-content {
-    line-height: 1.7;
-  }
-  .post-content p {
-    margin-bottom: 1rem;
-  }
-  .post-content h1, .post-content h2, .post-content h3, 
-  .post-content h4, .post-content h5, .post-content h6 {
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
-    font-weight: 600;
-  }
-  .post-content h1 { font-size: 1.8rem; }
-  .post-content h2 { font-size: 1.5rem; }
-  .post-content h3 { font-size: 1.3rem; }
-  .post-content h4 { font-size: 1.1rem; }
-  .post-content ul, .post-content ol {
-    margin-left: 1.5rem;
-    margin-bottom: 1rem;
-  }
-  .post-content ul { list-style-type: disc; }
-  .post-content ol { list-style-type: decimal; }
-  .post-content pre {
-    background-color: rgba(0,0,0,0.05);
-    padding: 1rem;
-    border-radius: 0.5rem;
-    overflow-x: auto;
-    margin: 1rem 0;
-  }
-  .post-content code {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.9em;
-    padding: 0.1em 0.3em;
-    border-radius: 0.3em;
-    background-color: rgba(0,0,0,0.05);
-  }
-  .post-content pre code {
-    padding: 0;
-    background-color: transparent;
-  }
-  .post-content blockquote {
-    border-left: 4px solid;
-    padding-left: 1rem;
-    margin-left: 0;
-    margin-right: 0;
-    margin-bottom: 1rem;
-    opacity: 0.8;
-  }
-  .post-content img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 0.5rem;
-    margin: 1rem 0;
-  }
-  .post-content table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1rem 0;
-  }
-  .post-content th, .post-content td {
-    padding: 0.5rem;
-    border: 1px solid;
-    border-color: rgba(0,0,0,0.1);
-  }
-  .post-content th {
-    background-color: rgba(0,0,0,0.05);
-  }
-  .post-content a {
-    color: #6d28d9;
-    text-decoration: none;
-  }
-  .post-content a:hover {
-    text-decoration: underline;
-  }
-  .dark .post-content code {
-    background-color: rgba(255,255,255,0.1);
-  }
-  .dark .post-content th, .dark .post-content td {
-    border-color: rgba(255,255,255,0.1);
-  }
-  .dark .post-content th {
-    background-color: rgba(255,255,255,0.05);
-  }
-  .dark .post-content a {
-    color: #a78bfa;
-  }
-  .node-mention {
-    display: inline-flex;
-    align-items: center;
-    background-color: rgba(109, 40, 217, 0.1);
-    color: #6d28d9;
-    border-radius: 4px;
-    padding: 1px 6px;
-    font-size: 0.9em;
-    margin: 0 2px;
-    font-weight: 500;
-  }
-  .dark .node-mention {
-    background-color: rgba(167, 139, 250, 0.2);
-    color: #a78bfa;
-  }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="container mx-auto px-4 py-8">
-  <!-- Breadcrumb Navigation -->
-  <div class="mb-6 flex items-center text-sm">
-    <a href="{{ url_for('community') }}" class="opacity-75 hover:opacity-100 transition-opacity">
-      <i class="fas fa-home mr-1"></i> Forum
-    </a>
-    <span class="mx-2 opacity-50">/</span>
-    <a href="{{ url_for('forum_category', category_id=category.id) }}" class="opacity-75 hover:opacity-100 transition-opacity">
-      {{ category.title }}
-    </a>
-    <span class="mx-2 opacity-50">/</span>
-    <span class="font-medium truncate max-w-[300px]">{{ post.title }}</span>
-  </div>
-  
-  <!-- Beitrags-Header -->
-  <div class="mb-6">
-    <h1 class="text-2xl font-bold mb-2">{{ post.title }}</h1>
-    <div class="flex flex-wrap items-center gap-3 text-sm opacity-75">
-      <span><i class="fas fa-calendar-alt mr-1"></i> {{ post.created_at.strftime('%d.%m.%Y, %H:%M') }}</span>
-      <span><i class="fas fa-eye mr-1"></i> {{ post.view_count }} Aufrufe</span>
-      <span><i class="fas fa-reply mr-1"></i> {{ replies|length }} Antworten</span>
-      
-      {% if post.is_pinned or post.is_locked %}
-      <div class="flex gap-2 ml-2">
-        {% if post.is_pinned %}
-        <span class="px-2 py-0.5 text-xs rounded-full"
-              x-bind:class="darkMode ? 'bg-yellow-700/50 text-yellow-300' : 'bg-yellow-100 text-yellow-800'">
-          <i class="fas fa-thumbtack mr-1"></i> Angepinnt
-        </span>
-        {% endif %}
-        {% if post.is_locked %}
-        <span class="px-2 py-0.5 text-xs rounded-full"
-              x-bind:class="darkMode ? 'bg-red-700/50 text-red-300' : 'bg-red-100 text-red-800'">
-          <i class="fas fa-lock mr-1"></i> Gesperrt
-        </span>
-        {% endif %}
-      </div>
-      {% endif %}
-    </div>
-  </div>
-  
-  <!-- Hauptbeitrag -->
-  <div class="mb-8 rounded-xl overflow-hidden"
-       x-bind:class="darkMode ? 'bg-gray-800/60 border border-white/10' : 'bg-white border border-gray-200 shadow-sm'">
-    <!-- Beitrags-Header -->
-    <div class="p-4 border-b" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center">
-          <!-- Autor-Avatar -->
-          <div class="w-10 h-10 rounded-full flex items-center justify-center text-white font-medium text-sm overflow-hidden mr-3" 
-               style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
-            {% if post.author.avatar %}
-              <img src="{{ post.author.avatar }}" alt="{{ post.author.username }}" class="w-full h-full object-cover">
-            {% else %}
-              {{ post.author.username[0].upper() }}
-            {% endif %}
-          </div>
-          
-          <!-- Autor-Info -->
-          <div>
-            <div class="font-medium">{{ post.author.username }}</div>
-            <div class="text-xs opacity-70">Erstellt am {{ post.created_at.strftime('%d.%m.%Y, %H:%M') }}</div>
-          </div>
-        </div>
-        
-        <!-- Aktionen -->
-        <div class="flex items-center space-x-2">
-          {% if current_user.id == post.user_id or current_user.role == 'admin' %}
-            <a href="{{ url_for('edit_post', post_id=post.id) }}" 
-               class="p-2 rounded transition-colors"
-               x-bind:class="darkMode 
-               ? 'hover:bg-gray-700/50 text-gray-300' 
-               : 'hover:bg-gray-100 text-gray-600'">
-              <i class="fas fa-edit"></i>
-            </a>
-            <form action="{{ url_for('delete_post', post_id=post.id) }}" method="POST" class="inline" onsubmit="return confirm('Möchtest du diesen Beitrag wirklich löschen?');">
-              <button type="submit" 
-                     class="p-2 rounded transition-colors"
-                     x-bind:class="darkMode 
-                     ? 'hover:bg-red-800/50 text-red-300' 
-                     : 'hover:bg-red-100 text-red-600'">
-                <i class="fas fa-trash-alt"></i>
-              </button>
-            </form>
-          {% endif %}
-          
-          <!-- Moderation-Optionen -->
-          {% if current_user.role in ['admin', 'moderator'] %}
-            <div class="ml-2 border-l" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'"></div>
-            <form action="{{ url_for('toggle_pin_post', post_id=post.id) }}" method="POST" class="inline">
-              <button type="submit" 
-                    class="p-2 rounded transition-colors"
-                    x-bind:class="darkMode 
-                    ? 'hover:bg-yellow-800/50 text-yellow-300' 
-                    : 'hover:bg-yellow-100 text-yellow-600'"
-                    title="{% if post.is_pinned %}Nicht mehr anpinnen{% else %}Anpinnen{% endif %}">
-                <i class="fas fa-thumbtack"></i>
-              </button>
-            </form>
-            <form action="{{ url_for('toggle_lock_post', post_id=post.id) }}" method="POST" class="inline">
-              <button type="submit" 
-                    class="p-2 rounded transition-colors"
-                    x-bind:class="darkMode 
-                    ? 'hover:bg-blue-800/50 text-blue-300' 
-                    : 'hover:bg-blue-100 text-blue-600'"
-                    title="{% if post.is_locked %}Entsperren{% else %}Sperren{% endif %}">
-                <i class="fas {% if post.is_locked %}fa-unlock{% else %}fa-lock{% endif %}"></i>
-              </button>
-            </form>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-    
-    <!-- Beitrags-Inhalt -->
-    <div class="p-6">
-      <div class="post-content markdown-content" id="main-post-content">
-        {{ post.content|safe }}
-      </div>
-      
-      {% if post.updated_at and post.updated_at != post.created_at %}
-        <div class="mt-6 pt-4 text-xs opacity-60 border-t" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
-          <i class="fas fa-edit mr-1"></i> Zuletzt bearbeitet: {{ post.updated_at.strftime('%d.%m.%Y, %H:%M') }}
-        </div>
-      {% endif %}
-    </div>
-  </div>
-  
-  <!-- Antworten-Bereich -->
-  <div class="mb-8">
-    <h2 class="text-xl font-semibold mb-4">
-      <i class="fas fa-reply mr-2 opacity-60"></i>
-      {{ replies|length }} Antworten
-    </h2>
-    
-    <!-- Antworten-Liste -->
-    {% if replies %}
-      {% for reply in replies %}
-        <div class="mb-5 rounded-xl overflow-hidden"
-            x-bind:class="darkMode ? 'bg-gray-800/40 border border-white/10' : 'bg-white border border-gray-200'">
-          <!-- Antwort-Header -->
-          <div class="p-3 border-b" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center">
-                <!-- Autor-Avatar -->
-                <div class="w-8 h-8 rounded-full flex items-center justify-center text-white font-medium text-xs overflow-hidden mr-3" 
-                    style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
-                  {% if reply.author.avatar %}
-                    <img src="{{ reply.author.avatar }}" alt="{{ reply.author.username }}" class="w-full h-full object-cover">
-                  {% else %}
-                    {{ reply.author.username[0].upper() }}
-                  {% endif %}
-                </div>
-                
-                <!-- Autor-Info -->
-                <div>
-                  <div class="font-medium text-sm">{{ reply.author.username }}</div>
-                  <div class="text-xs opacity-70">{{ reply.created_at.strftime('%d.%m.%Y, %H:%M') }}</div>
-                </div>
-              </div>
-              
-              <!-- Aktionen -->
-              <div class="flex items-center space-x-1">
-                {% if current_user.id == reply.user_id or current_user.role == 'admin' %}
-                  <a href="{{ url_for('edit_post', post_id=reply.id) }}" 
-                    class="p-1.5 rounded text-sm transition-colors"
-                    x-bind:class="darkMode 
-                    ? 'hover:bg-gray-700/50 text-gray-300' 
-                    : 'hover:bg-gray-100 text-gray-600'">
-                    <i class="fas fa-edit"></i>
-                  </a>
-                  <form action="{{ url_for('delete_post', post_id=reply.id) }}" method="POST" class="inline" onsubmit="return confirm('Möchtest du diese Antwort wirklich löschen?');">
-                    <button type="submit" 
-                          class="p-1.5 rounded text-sm transition-colors"
-                          x-bind:class="darkMode 
-                          ? 'hover:bg-red-800/50 text-red-300' 
-                          : 'hover:bg-red-100 text-red-600'">
-                      <i class="fas fa-trash-alt"></i>
-                    </button>
-                  </form>
-                {% endif %}
-              </div>
-            </div>
-          </div>
-          
-          <!-- Antwort-Inhalt -->
-          <div class="p-5">
-            <div class="post-content markdown-content reply-content" id="reply-content-{{ reply.id }}">
-              {{ reply.content|safe }}
-            </div>
-            
-            {% if reply.updated_at and reply.updated_at != reply.created_at %}
-              <div class="mt-4 pt-3 text-xs opacity-60 border-t" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
-                <i class="fas fa-edit mr-1"></i> Zuletzt bearbeitet: {{ reply.updated_at.strftime('%d.%m.%Y, %H:%M') }}
-              </div>
-            {% endif %}
-          </div>
-        </div>
-      {% endfor %}
-    {% else %}
-      <div class="rounded-xl p-6 text-center"
-           x-bind:class="darkMode ? 'bg-gray-800/40 border border-white/10' : 'bg-white border border-gray-200'">
-        <div class="text-3xl mb-3 opacity-30"><i class="fas fa-comments"></i></div>
-        <h3 class="text-lg font-semibold mb-2">Noch keine Antworten</h3>
-        <p class="opacity-75">Sei der Erste, der auf diesen Beitrag antwortet!</p>
-      </div>
-    {% endif %}
-  </div>
-  
-  <!-- Antwort-Formular -->
-  {% if not post.is_locked %}
-    <div class="mb-8 rounded-xl overflow-hidden"
-         x-bind:class="darkMode ? 'bg-gray-800/60 border border-white/10' : 'bg-white border border-gray-200'">
-      <div class="p-4 border-b font-medium" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
-        <i class="fas fa-reply mr-2"></i>
-        Antworten
-      </div>
-      <div class="p-6">
-        <form action="{{ url_for('reply_to_post', post_id=post.id) }}" method="POST">
-          <div class="mb-4">
-            <label for="content" class="block mb-2 font-medium">Deine Antwort</label>
-            <div class="mb-2 rounded-lg overflow-hidden"
-                 x-bind:class="darkMode ? 'border border-white/20' : 'border border-gray-300'">
-              <textarea id="content" name="content" rows="6" 
-                       class="w-full p-3 resize-y"
-                       x-bind:class="darkMode 
-                       ? 'bg-gray-700/50 text-white placeholder-gray-400 focus:border-indigo-500' 
-                       : 'bg-white text-gray-700 placeholder-gray-400 focus:border-indigo-500'"
-                       placeholder="Schreibe deine Antwort hier (unterstützt Markdown und @Knotenname-Erwähnungen)..."
-                      required></textarea>
-            </div>
-            <div class="text-xs opacity-70">
-              <p>Du kannst Knotenpunkte der Mindmap durch <code>@Knotenname</code> verlinken.</p>
-              <p>Dieser Editor unterstützt Markdown-Formatierung:</p>
-              <div class="flex flex-wrap gap-2 mt-1">
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="**" data-before="" data-after="" title="Fett">
-                  <i class="fas fa-bold"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="*" data-before="" data-after="" title="Kursiv">
-                  <i class="fas fa-italic"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="`" data-before="" data-after="" title="Code">
-                  <i class="fas fa-code"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="[Link-Text](URL)" data-before="" data-after="" title="Link">
-                  <i class="fas fa-link"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="\n```\nCode-Block\n```" data-before="" data-after="" title="Code-Block">
-                  <i class="fas fa-file-code"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format=">" data-before="" data-after="" title="Zitat">
-                  <i class="fas fa-quote-right"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="- " data-before="" data-after="" title="Liste">
-                  <i class="fas fa-list-ul"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="1. " data-before="" data-after="" title="Nummerierte Liste">
-                  <i class="fas fa-list-ol"></i>
-                </button>
-                <button type="button" class="markdown-button px-2 py-1 rounded text-xs" data-format="# " data-before="" data-after="" title="Überschrift">
-                  <i class="fas fa-heading"></i>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div>
-            <button type="submit" 
-                   class="px-5 py-2.5 rounded-lg transition-all duration-300 flex items-center"
-                   x-bind:class="darkMode 
-                   ? 'bg-indigo-700 hover:bg-indigo-600 text-white' 
-                   : 'bg-indigo-500 hover:bg-indigo-600 text-white'">
-              <i class="fas fa-paper-plane mr-2"></i>
-              Antwort senden
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  {% else %}
-    <div class="rounded-xl p-5 text-center mb-6"
-         x-bind:class="darkMode ? 'bg-red-900/20 border border-red-800/30' : 'bg-red-50 border border-red-100'">
-      <i class="fas fa-lock mr-2 text-red-500"></i>
-      <span>Dieser Beitrag ist geschlossen. Es können keine neuen Antworten mehr verfasst werden.</span>
-    </div>
-  {% endif %}
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    // Markdown und Knotenerwähnungen verarbeiten
-    const processContent = (content) => {
-      // Verarbeite Markdown mit marked.js
-      let html = marked.parse(content);
-      
-      // Ersetze @Knotenname mit entsprechenden Links
-      html = html.replace(/@([a-zA-Z0-9äöüÄÖÜß_-]+)/g, '<span class="node-mention"><i class="fas fa-diagram-project fa-xs mr-1"></i>$1</span>');
-      
-      return html;
-    };
-    
-    // Markdown-Inhalt für Hauptbeitrag rendern
-    const mainPostContent = document.getElementById('main-post-content');
-    if (mainPostContent) {
-      mainPostContent.innerHTML = processContent(mainPostContent.textContent.trim());
-    }
-    
-    // Markdown-Inhalt für Antworten rendern
-    document.querySelectorAll('.reply-content').forEach(reply => {
-      reply.innerHTML = processContent(reply.textContent.trim());
-    });
-    
-    // Markdown-Buttons für das Antwortformular
-    document.querySelectorAll('.markdown-button').forEach(button => {
-      button.addEventListener('click', function() {
-        const textarea = document.getElementById('content');
-        const format = this.dataset.format;
-        const before = this.dataset.before || '';
-        const after = this.dataset.after || '';
-        
-        // Hole die aktuelle Auswahl
-        const start = textarea.selectionStart;
-        const end = textarea.selectionEnd;
-        const selection = textarea.value.substring(start, end);
-        
-        // Wende die Formatierung an
-        let formattedText;
-        if (format.includes('\n')) {
-          // Für Formate mit Zeilenumbrüchen (z.B. Code-Blöcke)
-          formattedText = format.replace('Code-Block', selection || 'Code-Block');
-        } else if (format.includes('[Link-Text](URL)')) {
-          formattedText = format.replace('Link-Text', selection || 'Link-Text');
-        } else if (format === '- ' || format === '1. ' || format === '# ' || format === '> ') {
-          // Für Listen und Überschriften: am Anfang der Zeile einfügen
-          const beforeSelection = textarea.value.substring(0, start);
-          const afterSelection = textarea.value.substring(end);
-          
-          // Finde den Anfang der aktuellen Zeile
-          const lastNewline = beforeSelection.lastIndexOf('\n');
-          const lineStart = lastNewline === -1 ? 0 : lastNewline + 1;
-          
-          // Füge das Format am Zeilenanfang ein
-          formattedText = beforeSelection.substring(0, lineStart) + 
-                         format + 
-                         beforeSelection.substring(lineStart) + 
-                         selection + 
-                         afterSelection;
-          
-          // Setze die neue Cursor-Position
-          const newCursorPos = end + format.length;
-          textarea.value = formattedText;
-          textarea.setSelectionRange(newCursorPos, newCursorPos);
-          return; // Früher zurückkehren, da wir die Formatierung bereits angewendet haben
-        } else {
-          // Für einfache Formatierungen wie fett, kursiv, Code
-          formattedText = before + format + selection + format + after;
-        }
-        
-        // Ersetze den Text
-        textarea.value = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end);
-        
-        // Setze den Fokus zurück auf das Textarea
-        textarea.focus();
-        
-        // Setze die Auswahl neu, wenn es eine Auswahl gab
-        if (selection) {
-          const newStart = start + before.length + format.length;
-          const newEnd = newStart + selection.length;
-          textarea.setSelectionRange(newStart, newEnd);
-        } else {
-          // Setze den Cursor in die Mitte von **|** oder `|`
-          const newCursorPos = start + before.length + format.length;
-          textarea.setSelectionRange(newCursorPos, newCursorPos);
-        }
-      });
-    });
-  });
-</script>
-{% endblock %} 
--- a/templates/community/preview.html
+++ b/templates/community/preview.html
@@ -1,137 +0,0 @@
-{% extends 'base.html' %}
-
-{% block title %}Community Forum Vorschau{% endblock %}
-
-{% block extra_css %}
-<style>
-  .forum-category {
-    transition: all 0.3s ease;
-  }
-  .forum-category:hover {
-    transform: translateY(-2px);
-  }
-  .category-icon {
-    font-size: 1.5rem;
-    width: 2.5rem;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.75rem;
-  }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="container mx-auto px-4 py-8">
-  <!-- Seitenüberschrift -->
-  <div class="mb-8 text-center">
-    <h1 class="text-3xl font-bold mb-2 gradient-text">Community Forum</h1>
-    <p class="text-lg opacity-75">Diskutiere mit anderen Nutzern über die Hauptthemenbereiche der Mindmap</p>
-  </div>
-  
-  <!-- Login-Aufforderung -->
-  <div class="rounded-xl p-6 text-center mb-8 bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-100 dark:border-indigo-700/30">
-    <h3 class="text-xl font-semibold mb-3">
-      <i class="fas fa-lock mr-2 text-indigo-500"></i>
-      Anmeldung erforderlich
-    </h3>
-    <p class="mb-4">Um am Community-Forum teilzunehmen und alle Funktionen nutzen zu können, musst du dich anmelden oder registrieren.</p>
-    <div class="flex justify-center gap-4 mt-4">
-      <a href="{{ url_for('login', next=url_for('forum')) }}" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg transition-colors">
-        <i class="fas fa-sign-in-alt mr-2"></i>Anmelden
-      </a>
-      <a href="{{ url_for('register') }}" class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
-        <i class="fas fa-user-plus mr-2"></i>Registrieren
-      </a>
-    </div>
-  </div>
-  
-  <!-- Forumskategorien Vorschau -->
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-    {% if categories_data %}
-      {% for cat_data in categories_data %}
-        <div class="forum-category block">
-          <div class="rounded-xl p-5 h-full" 
-               x-bind:class="darkMode ? 'bg-gray-800/60 border border-white/10' : 'bg-white border border-gray-200 shadow-md'">
-            <div class="flex items-start">
-              <!-- Kategorie-Icon -->
-              <div class="category-icon mr-4 text-white" 
-                   style="background-color: {{ cat_data.category.node.color_code or '#6d28d9' }}">
-                <i class="fas {{ cat_data.category.node.icon or 'fa-folder' }}"></i>
-              </div>
-              
-              <!-- Kategorie-Info -->
-              <div class="flex-grow">
-                <h3 class="text-xl font-semibold mb-2">{{ cat_data.category.title }}</h3>
-                <p class="opacity-75 text-sm mb-3">{{ cat_data.category.description }}</p>
-                
-                <!-- Statistik -->
-                <div class="flex flex-wrap gap-4 text-sm opacity-80">
-                  <div class="flex items-center">
-                    <i class="fas fa-comment-alt mr-2"></i>
-                    <span>{{ cat_data.total_posts }} Themen</span>
-                  </div>
-                  <div class="flex items-center">
-                    <i class="fas fa-reply mr-2"></i>
-                    <span>{{ cat_data.total_replies }} Antworten</span>
-                  </div>
-                </div>
-              </div>
-              
-              <!-- Pfeil-Icon -->
-              <div class="ml-2">
-                <i class="fas fa-lock opacity-50"></i>
-              </div>
-            </div>
-          </div>
-        </div>
-      {% endfor %}
-    {% else %}
-      <div class="col-span-2 text-center py-8">
-        <div class="text-3xl mb-3 opacity-30"><i class="fas fa-exclamation-circle"></i></div>
-        <h3 class="text-xl font-semibold mb-2">Keine Forum-Kategorien gefunden</h3>
-        <p class="opacity-75">Es sind derzeit keine Kategorien für Diskussionen verfügbar.</p>
-      </div>
-    {% endif %}
-  </div>
-  
-  <!-- Hinweis zur Nutzung -->
-  <div class="rounded-xl p-6 text-center mb-8" 
-       x-bind:class="darkMode ? 'bg-indigo-900/30 border border-indigo-700/30' : 'bg-indigo-50 border border-indigo-100'">
-    <h3 class="text-xl font-semibold mb-3">
-      <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
-      So funktioniert das Forum
-    </h3>
-    <p class="mb-4">Das Community-Forum ist nach den Hauptknotenpunkten der Systades-Mindmap strukturiert. 
-      In deinen Beiträgen kannst du Knotenpunkte mit <code>@Knotenname</code> verlinken.</p>
-    
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
-      <div class="p-4 rounded-lg" 
-           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
-        <div class="text-2xl mb-2"><i class="fas fa-users text-indigo-400"></i></div>
-        <h4 class="font-medium mb-1">Fachliche Diskussionen</h4>
-        <p class="text-sm opacity-75">Tausche dich mit anderen zu spezifischen Themen aus</p>
-      </div>
-      <div class="p-4 rounded-lg" 
-           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
-        <div class="text-2xl mb-2"><i class="fas fa-link text-indigo-400"></i></div>
-        <h4 class="font-medium mb-1">Wissensvernetzung</h4>
-        <p class="text-sm opacity-75">Verknüpfe Inhalte durch Knotenreferenzen</p>
-      </div>
-      <div class="p-4 rounded-lg" 
-           x-bind:class="darkMode ? 'bg-indigo-800/40' : 'bg-white border border-indigo-100'">
-        <div class="text-2xl mb-2"><i class="fas fa-markdown text-indigo-400"></i></div>
-        <h4 class="font-medium mb-1">Markdown Support</h4>
-        <p class="text-sm opacity-75">Formatiere deine Beiträge mit Markdown</p>
-      </div>
-    </div>
-  </div>
-</div>
-{% endblock %}
-
-{% block scripts %}
-<script>
-  // Hier können bei Bedarf forumspezifische Scripts eingefügt werden
-</script>
-{% endblock %} 
--- a/templates/errors/403.html
+++ b/templates/errors/403.html
@@ -3,31 +3,21 @@
 {% block title %}403 - Zugriff verweigert{% endblock %}

 {% block content %}
-<div class="min-h-[75vh] flex flex-col items-center justify-center px-4 py-12 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-    <div class="glass-effect max-w-2xl w-full p-6 md:p-10 rounded-xl border border-gray-300/20 dark:border-gray-700/30 shadow-xl transform transition-all duration-300 hover:shadow-2xl">
+<div class="min-h-[65vh] flex flex-col items-center justify-center px-4 py-12">
+    <div class="glass-effect max-w-2xl w-full p-8 rounded-lg border border-gray-300/20 dark:border-gray-700/30 shadow-lg">
        <div class="text-center">
-            <div class="flex justify-center mb-6">
-                <div class="relative">
-                    <h1 class="text-7xl md:text-8xl font-extrabold text-primary-600 dark:text-primary-400 opacity-90">403</h1>
-                    <div class="absolute -top-4 -right-4 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center animate-pulse">
-                        <i class="fa-solid fa-lock text-white text-xl"></i>
-                    </div>
-                </div>
-            </div>
-            <h2 class="text-2xl md:text-3xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Zugriff verweigert</h2>
-            <p class="text-gray-600 dark:text-gray-300 mb-8 max-w-lg mx-auto text-base md:text-lg">Sie haben nicht die erforderlichen Berechtigungen, um auf diese Seite zuzugreifen. Bitte melden Sie sich an oder nutzen Sie ein Konto mit entsprechenden Rechten.</p>
+            <h1 class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-4">403</h1>
+            <h2 class="text-2xl font-semibold mb-4">Zugriff verweigert</h2>
+            <p class="text-gray-600 dark:text-gray-300 mb-8">Sie haben nicht die erforderlichen Berechtigungen, um auf diese Seite zuzugreifen. Bitte melden Sie sich an oder nutzen Sie ein Konto mit entsprechenden Rechten.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
+                <a href="{{ url_for('index') }}" class="btn-primary">
                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                </a>
-                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
+                <a href="javascript:history.back()" class="btn-secondary">
                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
                </a>
            </div>
        </div>
    </div>
-    <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
-        <p>Benötigen Sie Hilfe? <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">Kontaktieren Sie uns</a></p>
-    </div>
 </div>
-{% endblock %}
+{% endblock %} 
--- a/templates/errors/404.html
+++ b/templates/errors/404.html
@@ -3,31 +3,21 @@
 {% block title %}404 - Seite nicht gefunden{% endblock %}

 {% block content %}
-<div class="min-h-[75vh] flex flex-col items-center justify-center px-4 py-12 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-    <div class="glass-effect max-w-2xl w-full p-6 md:p-10 rounded-xl border border-gray-300/20 dark:border-gray-700/30 shadow-xl transform transition-all duration-300 hover:shadow-2xl">
+<div class="min-h-[65vh] flex flex-col items-center justify-center px-4 py-12">
+    <div class="glass-effect max-w-2xl w-full p-8 rounded-lg border border-gray-300/20 dark:border-gray-700/30 shadow-lg">
        <div class="text-center">
-            <div class="flex justify-center mb-6">
-                <div class="relative">
-                    <h1 class="text-7xl md:text-8xl font-extrabold text-primary-600 dark:text-primary-400 opacity-90">404</h1>
-                    <div class="absolute -top-4 -right-4 w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center animate-pulse">
-                        <i class="fa-solid fa-question text-white text-xl"></i>
-                    </div>
-                </div>
-            </div>
-            <h2 class="text-2xl md:text-3xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Seite nicht gefunden</h2>
-            <p class="text-gray-600 dark:text-gray-300 mb-8 max-w-lg mx-auto text-base md:text-lg">Die gesuchte Seite existiert nicht oder wurde verschoben. Bitte prüfen Sie die URL oder nutzen Sie die Navigation.</p>
+            <h1 class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-4">404</h1>
+            <h2 class="text-2xl font-semibold mb-4">Seite nicht gefunden</h2>
+            <p class="text-gray-600 dark:text-gray-300 mb-8">Die gesuchte Seite existiert nicht oder wurde verschoben. Bitte prüfen Sie die URL oder nutzen Sie die Navigation.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
+                <a href="{{ url_for('index') }}" class="btn-primary">
                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                </a>
-                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
+                <a href="javascript:history.back()" class="btn-secondary">
                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
                </a>
            </div>
        </div>
    </div>
-    <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
-        <p>Benötigen Sie Hilfe? <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">Kontaktieren Sie uns</a></p>
-    </div>
 </div>
-{% endblock %}
+{% endblock %} 
--- a/templates/errors/429.html
+++ b/templates/errors/429.html
@@ -3,31 +3,21 @@
 {% block title %}429 - Zu viele Anfragen{% endblock %}

 {% block content %}
-<div class="min-h-[75vh] flex flex-col items-center justify-center px-4 py-12 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-    <div class="glass-effect max-w-2xl w-full p-6 md:p-10 rounded-xl border border-gray-300/20 dark:border-gray-700/30 shadow-xl transform transition-all duration-300 hover:shadow-2xl">
+<div class="min-h-[65vh] flex flex-col items-center justify-center px-4 py-12">
+    <div class="glass-effect max-w-2xl w-full p-8 rounded-lg border border-gray-300/20 dark:border-gray-700/30 shadow-lg">
        <div class="text-center">
-            <div class="flex justify-center mb-6">
-                <div class="relative">
-                    <h1 class="text-7xl md:text-8xl font-extrabold text-primary-600 dark:text-primary-400 opacity-90">429</h1>
-                    <div class="absolute -top-4 -right-4 w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center animate-pulse">
-                        <i class="fa-solid fa-hourglass-half text-white text-xl"></i>
-                    </div>
-                </div>
-            </div>
-            <h2 class="text-2xl md:text-3xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Zu viele Anfragen</h2>
-            <p class="text-gray-600 dark:text-gray-300 mb-8 max-w-lg mx-auto text-base md:text-lg">Sie haben zu viele Anfragen in kurzer Zeit gestellt. Bitte warten Sie einen Moment und versuchen Sie es dann erneut.</p>
+            <h1 class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-4">429</h1>
+            <h2 class="text-2xl font-semibold mb-4">Zu viele Anfragen</h2>
+            <p class="text-gray-600 dark:text-gray-300 mb-8">Sie haben zu viele Anfragen in kurzer Zeit gestellt. Bitte warten Sie einen Moment und versuchen Sie es dann erneut.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
+                <a href="{{ url_for('index') }}" class="btn-primary">
                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                </a>
-                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
+                <a href="javascript:history.back()" class="btn-secondary">
                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
                </a>
            </div>
        </div>
    </div>
-    <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
-        <p>Benötigen Sie Hilfe? <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">Kontaktieren Sie uns</a></p>
-    </div>
 </div>
-{% endblock %}
+{% endblock %} 
--- a/templates/errors/500.html
+++ b/templates/errors/500.html
@@ -3,31 +3,21 @@
 {% block title %}500 - Serverfehler{% endblock %}

 {% block content %}
-<div class="min-h-[75vh] flex flex-col items-center justify-center px-4 py-12 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-    <div class="glass-effect max-w-2xl w-full p-6 md:p-10 rounded-xl border border-gray-300/20 dark:border-gray-700/30 shadow-xl transform transition-all duration-300 hover:shadow-2xl">
+<div class="min-h-[65vh] flex flex-col items-center justify-center px-4 py-12">
+    <div class="glass-effect max-w-2xl w-full p-8 rounded-lg border border-gray-300/20 dark:border-gray-700/30 shadow-lg">
        <div class="text-center">
-            <div class="flex justify-center mb-6">
-                <div class="relative">
-                    <h1 class="text-7xl md:text-8xl font-extrabold text-primary-600 dark:text-primary-400 opacity-90">500</h1>
-                    <div class="absolute -top-4 -right-4 w-12 h-12 bg-red-600 rounded-full flex items-center justify-center animate-pulse">
-                        <i class="fa-solid fa-exclamation-triangle text-white text-xl"></i>
-                    </div>
-                </div>
-            </div>
-            <h2 class="text-2xl md:text-3xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Interner Serverfehler</h2>
-            <p class="text-gray-600 dark:text-gray-300 mb-8 max-w-lg mx-auto text-base md:text-lg">Es ist ein Fehler auf unserem Server aufgetreten. Unser Team wurde informiert und arbeitet bereits an einer Lösung. Bitte versuchen Sie es später erneut.</p>
+            <h1 class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-4">500</h1>
+            <h2 class="text-2xl font-semibold mb-4">Interner Serverfehler</h2>
+            <p class="text-gray-600 dark:text-gray-300 mb-8">Es ist ein Fehler auf unserem Server aufgetreten. Unser Team wurde informiert und arbeitet bereits an einer Lösung. Bitte versuchen Sie es später erneut.</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
+                <a href="{{ url_for('index') }}" class="btn-primary">
                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                </a>
-                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
+                <a href="javascript:history.back()" class="btn-secondary">
                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
                </a>
            </div>
        </div>
    </div>
-    <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
-        <p>Benötigen Sie Hilfe? <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">Kontaktieren Sie uns</a></p>
-    </div>
 </div>
-{% endblock %}
+{% endblock %} 
--- a/templates/impressum.html
+++ b/templates/impressum.html
@@ -8,56 +8,56 @@
        <h1 class="text-3xl font-bold mb-6 gradient-text">Impressum</h1>
        
        <section class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Angaben gemäß § 5 TMG und § 55 RStV</h2>
-            <p class="mb-4">
-                Diese Website wird privat betrieben von:<br>
-                Marwin Medczinski<br>
-                Fasanenstraße 30<br>
-                16761 Hennigsdorf<br>
-                Deutschland
-            </p>
+            <h2 class="text-xl font-bold mb-4">Angaben gemäß § 5 TMG</h2>
+            <p class="mb-4">MindMap GmbH<br>
+            Musterstraße 123<br>
+            12345 Musterstadt<br>
+            Deutschland</p>
            
-
+            <p class="mb-4">
+                <strong>Vertreten durch:</strong><br>
+                Max Mustermann, Geschäftsführer
            </p>
            
            <p class="mb-4">
                <strong>Kontakt:</strong><br>
-                Telefon: +49 (0) 173 8041824<br>
-                E-Mail: medczinski.marwin@gmx.de
+                Telefon: +49 (0) 123 456789<br>
+                E-Mail: info@mindmap-example.com
            </p>
-        </section>
-        
-        <section class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Inhaltlich Verantwortlicher gemäß § 55 Abs. 2 RStV</h2>
+            
            <p class="mb-4">
-                Marwin Medczinski<br>
-                Fasanenstraße 30<br>
-                16761 Hennigsdorf
+                <strong>Registereintrag:</strong><br>
+                Eintragung im Handelsregister.<br>
+                Registergericht: Amtsgericht Musterstadt<br>
+                Registernummer: HRB 12345
+            </p>
+            
+            <p class="mb-4">
+                <strong>Umsatzsteuer-ID:</strong><br>
+                Umsatzsteuer-Identifikationsnummer gemäß §27 a Umsatzsteuergesetz:<br>
+                DE 123456789
            </p>
        </section>
        
        <section class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Hinweis zur Streitbeilegung</h2>
-            <p class="mb-4">Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr/" target="_blank" class="text-purple-600 hover:text-purple-800">https://ec.europa.eu/consumers/odr/</a></p>
-            <p class="mb-4">Ich bin nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
+            <h2 class="text-xl font-bold mb-4">Redaktionell verantwortlich</h2>
+            <p>
+                Max Mustermann<br>
+                Musterstraße 123<br>
+                12345 Musterstadt
+            </p>
        </section>
-
+        
        <section class="mb-8">
            <h2 class="text-xl font-bold mb-4">Haftungsausschluss</h2>
            
            <h3 class="text-lg font-bold mb-2">Haftung für Inhalte</h3>
-            <p class="mb-4">Die Inhalte dieser Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann ich jedoch keine Gewähr übernehmen. Als Diensteanbieter bin ich gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG bin ich als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
-            <p class="mb-4">Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werde ich diese Inhalte umgehend entfernen.</p>
+            <p class="mb-4">Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
+            <p class="mb-4">Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
            
            <h3 class="text-lg font-bold mb-2">Haftung für Links</h3>
-            <p class="mb-4">Diese Website enthält Links zu externen Webseiten Dritter, auf deren Inhalte ich keinen Einfluss habe. Deshalb kann ich für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.</p>
-            <p class="mb-4">Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werde ich derartige Links umgehend entfernen.</p>
-        </section>
-
-        <section class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Urheberrecht</h2>
-            <p class="mb-4">Die durch mich erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen meiner schriftlichen Zustimmung. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.</p>
-            <p>Soweit die Inhalte auf dieser Seite nicht von mir erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitte ich um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werde ich derartige Inhalte umgehend entfernen.</p>
+            <p class="mb-4">Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.</p>
+            <p>Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
        </section>
    </div>
 </div>
--- a/templates/index.html
+++ b/templates/index.html
--- a/templates/mindmap.html
+++ b/templates/mindmap.html
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -32,7 +32,7 @@
    position: relative;
  }
  
-  .avatar-container {
+  .profile-avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
@@ -50,48 +50,40 @@
    flex-shrink: 0;
  }
  
-  .avatar-container:hover {
+  .profile-avatar:hover {
    transform: scale(1.05);
    border: 3px solid rgba(179, 143, 255, 0.5);
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.3), 0 0 25px rgba(179, 143, 255, 0.35);
  }
  
-  .avatar-container img {
+  .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
  }
  
-  .avatar-container:hover img {
+  .profile-avatar:hover img {
    filter: brightness(1.1);
  }
  
-  .avatar-edit {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
+  .profile-avatar-placeholder {
+    font-size: 5rem;
+    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
  }
  
-  .avatar-edit:hover {
-    background: rgba(255, 255, 255, 0.3);
+  .profile-avatar:hover .profile-avatar-placeholder {
+    color: rgba(255, 255, 255, 0.9);
+    transform: scale(1.1);
  }
  
-  .user-info {
+  .profile-info {
    flex: 1;
    padding-top: 0.5rem;
  }
  
-  .user-info h1 {
+  .profile-name {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
@@ -104,7 +96,33 @@
    line-height: 1.2;
  }
  
-  .user-bio {
+  .profile-username {
+    font-size: 1.35rem;
+    color: rgba(255, 255, 255, 0.85);
+    margin-bottom: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  
+  .username-badge {
+    background: rgba(179, 143, 255, 0.2);
+    border: 1px solid rgba(179, 143, 255, 0.3);
+    color: #b38fff;
+    padding: 0.3rem 1rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+  }
+  
+  .username-badge:hover {
+    background: rgba(179, 143, 255, 0.3);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 8px rgba(179, 143, 255, 0.3);
+  }
+  
+  .profile-bio {
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
@@ -113,7 +131,7 @@
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  
-  .user-meta {
+  .profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
@@ -122,22 +140,118 @@
    align-items: center;
  }
  
-  .user-meta span {
+  .profile-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
  }
  
-  .user-meta span:hover {
+  .profile-meta-item:hover {
    color: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
  }
  
-  .user-meta i {
+  .profile-meta-icon {
    opacity: 0.8;
  }
  
+  /* Verbesserte Statistik-Karten mit interaktiven Effekten */
+  .profile-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+  }
+  
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.75rem 1.25rem;
+    background: rgba(32, 36, 55, 0.7);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .stat-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, rgba(179, 143, 255, 0.15) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    z-index: 0;
+  }
+  
+  .stat-item:hover::before {
+    opacity: 1;
+  }
+  
+  .stat-item:hover {
+    transform: translateY(-5px);
+    background: rgba(32, 36, 55, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(179, 143, 255, 0.2);
+  }
+  
+  .stat-value {
+    font-size: 2.25rem;
+    font-weight: 800;
+    margin-bottom: 0.75rem;
+    background: linear-gradient(135deg, #b38fff, #58a9ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+  }
+  
+  .stat-item:hover .stat-value {
+    transform: scale(1.1);
+    text-shadow: 0 0 15px rgba(179, 143, 255, 0.5);
+  }
+  
+  .stat-label {
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.75);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+  }
+  
+  .stat-item:hover .stat-label {
+    color: rgba(255, 255, 255, 0.95);
+  }
+  
+  /* Stat-Icon für visuelle Verstärkung */
+  .stat-icon {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: rgba(179, 143, 255, 0.7);
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+  }
+  
+  .stat-item:hover .stat-icon {
+    transform: scale(1.2) translateY(-3px);
+    color: rgba(179, 143, 255, 1);
+  }
+  
  /* Benutzer-Aktionsbereich */
  .profile-actions {
    display: flex;
@@ -390,24 +504,31 @@
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }
  
-  html.light .avatar-container {
+  html.light .profile-avatar {
    background: rgba(255, 255, 255, 0.9);
    border: 3px solid rgba(126, 63, 242, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 15px rgba(126, 63, 242, 0.15);
  }
  
-  html.light .user-info h1 {
+  html.light .profile-name {
    background: linear-gradient(135deg, #7e3ff2, #3282f6);
    text-shadow: none;
  }
  
-  html.light .user-bio,
+  html.light .profile-username,
+  html.light .profile-bio,
  html.light .activity-content {
    color: #1a202c;
    text-shadow: none;
  }
  
-  html.light .user-meta span {
+  html.light .username-badge {
+    background: rgba(126, 63, 242, 0.15);
+    border: 1px solid rgba(126, 63, 242, 0.3);
+    color: #7e3ff2;
+  }
+  
+  html.light .profile-meta {
    color: #4a5568;
  }
  
@@ -485,22 +606,63 @@
 <div class="container mx-auto px-4 py-10">
  <!-- Profil-Container -->
  <div class="profile-container">
-    <!-- User Info Section -->
+    <!-- Profil-Header mit Benutzerinformationen -->
    <div class="profile-header">
-      <div class="avatar-container">
-        <img src="{{ user.avatar if user.avatar else url_for('static', filename='img/default-avatar.png') }}" alt="Profilbild" class="avatar">
-        <div class="avatar-edit">
-          <i class="fas fa-camera"></i>
-        </div>
+      <!-- Profilbild -->
+      <div class="profile-avatar">
+        {% if user.profile_image %}
+          <img src="{{ user.profile_image }}" alt="{{ user.name }}" />
+        {% else %}
+          <div class="profile-avatar-placeholder">
+            <i class="fas fa-user"></i>
+          </div>
+        {% endif %}
      </div>
-      <div class="user-info">
-        <h1>{{ user.username }}</h1>
-        <p class="user-bio">{{ user.bio if user.bio else 'Keine Bio vorhanden. Klicke auf bearbeiten, um eine hinzuzufügen.' }}</p>
-        <div class="user-meta">
-          <span><i class="fas fa-map-marker-alt"></i> {{ user.location if user.location else 'Kein Standort angegeben' }}</span>
-          <span><i class="fas fa-calendar-alt"></i> Mitglied seit {{ user.created_at.strftime('%d.%m.%Y') }}</span>
+      
+      <!-- Profilinformationen -->
+      <div class="profile-info">
+        <h1 class="profile-name">{{ user.name|default('Max Mustermann') }}</h1>
+        <div class="profile-username">
+          @{{ user.username|default('maxmustermann') }}
+          {% if user.verified %}
+            <span class="username-badge">
+              <i class="fas fa-check-circle mr-1"></i> Verifiziert
+            </span>
+          {% endif %}
+        </div>
+        
+        <p class="profile-bio">
+          {{ user.bio|default('Willkommen auf meinem Profil! Ich bin daran interessiert, Wissen zu vernetzen und neue Verbindungen zwischen verschiedenen Themengebieten zu entdecken. Mein Ziel ist es, ein tieferes Verständnis für komplexe Zusammenhänge zu entwickeln.') }}
+        </p>
+        
+        <!-- Meta-Informationen -->
+        <div class="profile-meta">
+          <div class="profile-meta-item">
+            <i class="fas fa-map-marker-alt profile-meta-icon"></i>
+            <span>{{ user.location|default('Berlin, Deutschland') }}</span>
+          </div>
+          <div class="profile-meta-item">
+            <i class="fas fa-calendar-alt profile-meta-icon"></i>
+            <span>Mitglied seit {{ user.joined_date|default('Januar 2023') }}</span>
+          </div>
+          <div class="profile-meta-item">
+            <i class="fas fa-globe profile-meta-icon"></i>
+            <span>{{ user.website|default('www.beispiel.de') }}</span>
+          </div>
+        </div>
+        
+        <!-- Profil-Aktionen -->
+        <div class="profile-actions">
+          <button class="profile-action-btn primary">
+            <i class="fas fa-user-plus mr-1"></i> Folgen
+          </button>
+          <button class="profile-action-btn">
+            <i class="fas fa-comment mr-1"></i> Nachricht
+          </button>
+          <button class="profile-action-btn">
+            <i class="fas fa-share-alt mr-1"></i> Teilen
+          </button>
        </div>
-        <button class="edit-profile-btn">Profil bearbeiten</button>
      </div>
    </div>
    
@@ -511,7 +673,7 @@
        <div class="stat-icon">
          <i class="fas fa-lightbulb"></i>
        </div>
-        <div class="stat-value">{{ stats.thought_count if stats and stats.thought_count else 0 }}</div>
+        <div class="stat-value">{{ user.thoughts_count|default('42') }}</div>
        <div class="stat-label">Gedanken</div>
      </div>
      
@@ -520,7 +682,7 @@
        <div class="stat-icon">
          <i class="fas fa-project-diagram"></i>
        </div>
-        <div class="stat-value">{{ stats.connections_count if stats and stats.connections_count else 0 }}</div>
+        <div class="stat-value">{{ user.connections_count|default('128') }}</div>
        <div class="stat-label">Verbindungen</div>
      </div>
      
@@ -529,7 +691,7 @@
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
-        <div class="stat-value">{{ stats.followers_count if stats and stats.followers_count else 0 }}</div>
+        <div class="stat-value">{{ user.followers_count|default('567') }}</div>
        <div class="stat-label">Follower</div>
      </div>
      
@@ -538,7 +700,7 @@
        <div class="stat-icon">
          <i class="fas fa-comment-dots"></i>
        </div>
-        <div class="stat-value">{{ stats.contributions_count if stats and stats.contributions_count else 0 }}</div>
+        <div class="stat-value">{{ user.contributions_count|default('89') }}</div>
        <div class="stat-label">Beiträge</div>
      </div>
      
@@ -547,7 +709,7 @@
        <div class="stat-icon">
          <i class="fas fa-star"></i>
        </div>
-        <div class="stat-value">{{ stats.rating if stats and stats.rating else '0.0' }}</div>
+        <div class="stat-value">{{ user.rating|default('4.8') }}</div>
        <div class="stat-label">Bewertung</div>
      </div>
    </div>
@@ -569,124 +731,115 @@
      <!-- Aktivitäts-Tab (Standardmäßig angezeigt) -->
      <div class="tab-content" id="activity-tab">
        <div class="activity-feed">
-          {% if activities %}
-            {% for activity in activities %}
-              <div class="activity-card">
-                <div class="activity-header">
-                  <div class="activity-title">{{ activity.title }}</div>
-                  <div class="activity-date">{{ activity.date }}</div>
-                </div>
-                <div class="activity-content">
-                  <p>{{ activity.content }}</p>
-                </div>
-                <div class="activity-footer">
-                  <div class="activity-reactions">
-                    <button class="reaction-button {% if activity.user_liked %}active{% endif %}">
-                      <i class="fas fa-thumbs-up"></i> <span>{{ activity.likes }}</span>
-                    </button>
-                    <button class="reaction-button">
-                      <i class="fas fa-comment"></i> <span>{{ activity.comments }}</span>
-                    </button>
-                    <button class="reaction-button">
-                      <i class="fas fa-share"></i> <span>{{ activity.shares }}</span>
-                    </button>
-                  </div>
-                  <div class="activity-actions">
-                    <button class="action-button">
-                      Ansehen
-                    </button>
-                  </div>
-                </div>
-              </div>
-            {% endfor %}
-          {% else %}
-            <div class="text-center py-12">
-              <i class="fas fa-history text-5xl text-gray-400 mb-4"></i>
-              <p class="text-gray-500">Noch keine Aktivitäten vorhanden</p>
+          <!-- Aktivität 1 -->
+          <div class="activity-card">
+            <div class="activity-header">
+              <div class="activity-title">Neuer Gedanke hinzugefügt</div>
+              <div class="activity-date">vor 2 Stunden</div>
            </div>
-          {% endif %}
+            <div class="activity-content">
+              <p>Ich habe einen neuen Gedanken zum Thema "Künstliche Intelligenz und Kreativität" hinzugefügt. Wie können KI-Tools uns dabei helfen, kreativer zu denken?</p>
+            </div>
+            <div class="activity-footer">
+              <div class="activity-reactions">
+                <button class="reaction-button">
+                  <i class="fas fa-thumbs-up"></i> <span>24</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-comment"></i> <span>8</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-share"></i> <span>3</span>
+                </button>
+              </div>
+              <div class="activity-actions">
+                <button class="action-button">
+                  Ansehen
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Aktivität 2 -->
+          <div class="activity-card">
+            <div class="activity-header">
+              <div class="activity-title">Verbindung erstellt</div>
+              <div class="activity-date">vor 1 Tag</div>
+            </div>
+            <div class="activity-content">
+              <p>Ich habe eine neue Verbindung zwischen "Nachhaltige Entwicklung" und "Digitale Transformation" hergestellt. Es gibt interessante Überschneidungen in diesen Bereichen.</p>
+            </div>
+            <div class="activity-footer">
+              <div class="activity-reactions">
+                <button class="reaction-button active">
+                  <i class="fas fa-thumbs-up"></i> <span>42</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-comment"></i> <span>12</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-share"></i> <span>7</span>
+                </button>
+              </div>
+              <div class="activity-actions">
+                <button class="action-button">
+                  Ansehen
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Aktivität 3 -->
+          <div class="activity-card">
+            <div class="activity-header">
+              <div class="activity-title">Sammlung erstellt</div>
+              <div class="activity-date">vor 3 Tagen</div>
+            </div>
+            <div class="activity-content">
+              <p>Ich habe eine neue Sammlung zum Thema "Zukunftstechnologien" erstellt. Diese Sammlung enthält Gedanken zu KI, Quantencomputing, Biotechnologie und mehr.</p>
+            </div>
+            <div class="activity-footer">
+              <div class="activity-reactions">
+                <button class="reaction-button">
+                  <i class="fas fa-thumbs-up"></i> <span>17</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-comment"></i> <span>4</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-share"></i> <span>2</span>
+                </button>
+              </div>
+              <div class="activity-actions">
+                <button class="action-button">
+                  Ansehen
+                </button>
+              </div>
+            </div>
+          </div>
        </div>
      </div>
      
      <!-- Weitere Tab-Inhalte (werden per JavaScript angezeigt) -->
      <div class="tab-content hidden" id="thoughts-tab">
-        <div id="thoughts-container">
-          {% if thoughts %}
-            {% for thought in thoughts %}
-              <div class="thought-item">
-                <h3>{{ thought.title }}</h3>
-                <p>{{ thought.content }}</p>
-                <div class="thought-meta">
-                  <span>{{ thought.date }}</span>
-                  <span>{{ thought.category }}</span>
-                </div>
-              </div>
-            {% endfor %}
-          {% else %}
-            <div class="text-center py-12">
-              <i class="fas fa-lightbulb text-5xl text-gray-400 mb-4"></i>
-              <p class="text-gray-500">Noch keine Gedanken erstellt</p>
-              <a href="{{ url_for('get_thought') }}" class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white rounded-lg">Ersten Gedanken erstellen</a>
-            </div>
-          {% endif %}
-        </div>
+        <p class="text-center text-gray-400 py-12">
+          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
+          Gedanken werden geladen...
+        </p>
      </div>
      
      <div class="tab-content hidden" id="collections-tab">
-        <div id="collections-container">
-          {% if collections %}
-            {% for collection in collections %}
-              <div class="collection-item">
-                <h3>{{ collection.title }}</h3>
-                <p>{{ collection.description }}</p>
-                <div class="collection-meta">
-                  <span>{{ collection.thoughts_count }} Gedanken</span>
-                  <span>{{ collection.date }}</span>
-                </div>
-              </div>
-            {% endfor %}
-          {% else %}
-            <div class="text-center py-12">
-              <i class="fas fa-folder-open text-5xl text-gray-400 mb-4"></i>
-              <p class="text-gray-500">Noch keine Sammlungen erstellt</p>
-              <a href="{{ url_for('create_collection') }}" class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white rounded-lg">Erste Sammlung erstellen</a>
-            </div>
-          {% endif %}
-        </div>
+        <p class="text-center text-gray-400 py-12">
+          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
+          Sammlungen werden geladen...
+        </p>
      </div>
      
      <div class="tab-content hidden" id="connections-tab">
-        <div id="connections-container">
-          {% if connections %}
-            {% for connection in connections %}
-              <div class="connection-item">
-                <div class="connection-nodes">
-                  <div class="connection-node">
-                    <h4>{{ connection.source.title }}</h4>
-                    <p>{{ connection.source.excerpt }}</p>
-                  </div>
-                  <div class="connection-type">
-                    <i class="fas fa-arrow-right"></i>
-                    <span>{{ connection.relation_type }}</span>
-                  </div>
-                  <div class="connection-node">
-                    <h4>{{ connection.target.title }}</h4>
-                    <p>{{ connection.target.excerpt }}</p>
-                  </div>
-                </div>
-                <div class="connection-meta">
-                  <span>{{ connection.date }}</span>
-                </div>
-              </div>
-            {% endfor %}
-          {% else %}
-            <div class="text-center py-12">
-              <i class="fas fa-project-diagram text-5xl text-gray-400 mb-4"></i>
-              <p class="text-gray-500">Noch keine Verbindungen erstellt</p>
-              <a href="{{ url_for('mindmap') }}" class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white rounded-lg">Verbindungen in der Mindmap erstellen</a>
-            </div>
-          {% endif %}
-        </div>
+        <p class="text-center text-gray-400 py-12">
+          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
+          Verbindungen werden geladen...
+        </p>
      </div>
      
      <div class="tab-content hidden" id="settings-tab">
@@ -696,22 +849,22 @@
          <div class="settings-card-body">
            <div class="settings-group">
              <label class="settings-label" for="name">Name</label>
-              <input type="text" id="name" class="settings-input" value="{{ user.name }}" />
+              <input type="text" id="name" class="settings-input" value="{{ user.name|default('Max Mustermann') }}" />
            </div>
            
            <div class="settings-group">
              <label class="settings-label" for="bio">Über mich</label>
-              <textarea id="bio" class="settings-input" rows="4">{{ user.bio }}</textarea>
+              <textarea id="bio" class="settings-input" rows="4">{{ user.bio|default('Willkommen auf meinem Profil! Ich bin daran interessiert, Wissen zu vernetzen und neue Verbindungen zwischen verschiedenen Themengebieten zu entdecken.') }}</textarea>
            </div>
            
            <div class="settings-group">
              <label class="settings-label" for="location">Standort</label>
-              <input type="text" id="location" class="settings-input" value="{{ user.location }}" />
+              <input type="text" id="location" class="settings-input" value="{{ user.location|default('Berlin, Deutschland') }}" />
            </div>
            
            <div class="settings-group">
              <label class="settings-label" for="website">Website</label>
-              <input type="url" id="website" class="settings-input" value="{{ user.website }}" />
+              <input type="url" id="website" class="settings-input" value="{{ user.website|default('https://www.beispiel.de') }}" />
            </div>
            
            <button class="profile-action-btn primary mt-4">
@@ -725,7 +878,7 @@
          <div class="settings-card-body">
            <div class="settings-group">
              <label class="settings-label" for="email">E-Mail-Adresse</label>
-              <input type="email" id="email" class="settings-input" value="{{ user.email }}" />
+              <input type="email" id="email" class="settings-input" value="{{ user.email|default('beispiel@email.com') }}" />
            </div>
            
            <div class="settings-group">
@@ -750,7 +903,7 @@
 {% endblock %}

 {% block extra_js %}
-<script nonce="{{ csp_nonce }}">
+<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Profil-Tab-Funktionalität
    const tabs = document.querySelectorAll('.profile-tab');
--- a/templates/ueber_uns.html
+++ b/templates/ueber_uns.html
@@ -1,79 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Über uns{% endblock %}
-
-{% block content %}
-<div class="max-w-3xl mx-auto">
-    <div class="card p-6 md:p-8">
-        <h1 class="text-3xl font-bold mb-6 gradient-text">Über uns</h1>
-        
-        <section class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Unsere Vision</h2>
-            <p class="mb-4">
-                Systades ist ein innovatives Projekt, das darauf abzielt, das Teilen und Vernetzen von Wissen und Gedanken zu revolutionieren. Unsere Plattform ermöglicht es Nutzern, ihre Ideen in interaktiven Mindmaps zu organisieren und mit anderen zu teilen, wodurch ein kollaboratives Netzwerk des Wissens entsteht.
-            </p>
-            <p class="mb-4">
-                Wir glauben daran, dass Wissen am wertvollsten ist, wenn es geteilt und vernetzt wird. Durch die Verbindung verschiedener Perspektiven und Denkansätze entstehen neue Erkenntnisse und Innovationen.
-            </p>
-        </section>
-
-        <section class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Das Team</h2>
-            <p class="mb-4">
-                Till Tomczak und Marwin Medczinski arbeiten gemeinsam daran, Systades kontinuierlich zu verbessern und weiterzuentwickeln.
-            </p>
-            
-            <!-- Platz für Team-Mitglieder -->
-            <div class="team-members space-y-6">
-                <!-- Beispiel für ein Team-Mitglied (kann als Vorlage verwendet werden) -->
-                <!--
-                <div class="team-member p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
-                    <h3 class="text-lg font-bold mb-2">[Name]</h3>
-                    <p class="text-gray-600 dark:text-gray-300 mb-2">[Position/Rolle]</p>
-                    <p class="text-sm">[Kurze Beschreibung oder Verantwortlichkeiten]</p>
-                </div>
-                -->
-            </div>
-        </section>
-
-        <section class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Unsere Mission</h2>
-            <p class="mb-4">
-                Wir setzen uns dafür ein, eine Plattform zu schaffen, die:
-            </p>
-            <ul class="list-disc list-inside space-y-2 mb-4">
-                <li>Intuitive Werkzeuge für die Organisation und Visualisierung von Wissen bereitstellt</li>
-                <li>Die Zusammenarbeit und den Austausch zwischen Nutzern fördert</li>
-                <li>Kreativität und innovative Denkansätze unterstützt</li>
-                <li>Einen sicheren und respektvollen Raum für intellektuellen Austausch bietet</li>
-            </ul>
-        </section>
-
-        <section class="mb-8">
-            <h2 class="text-xl font-bold mb-4">Technologie & Innovation</h2>
-            <p class="mb-4">
-                Systades nutzt modernste Technologien und innovative Ansätze, um eine optimale Nutzererfahrung zu gewährleisten. Unsere Plattform wird kontinuierlich weiterentwickelt, um neue Funktionen und Verbesserungen zu integrieren.
-            </p>
-            <p>
-                Wir legen besonderen Wert auf:
-            </p>
-            <ul class="list-disc list-inside space-y-2 mt-2">
-                <li>Intuitive Benutzeroberfläche</li>
-                <li>Hohe Performance und Zuverlässigkeit</li>
-                <li>Datensicherheit und Privatsphäre</li>
-                <li>Barrierefreiheit und Inklusivität</li>
-            </ul>
-        </section>
-
-        <section>
-            <h2 class="text-xl font-bold mb-4">Kontakt & Feedback</h2>
-            <p class="mb-4">
-                Wir freuen uns über Ihr Feedback und Ihre Ideen zur Verbesserung von Systades. Gemeinsam können wir die Plattform weiter optimieren und an die Bedürfnisse unserer Nutzer anpassen.
-            </p>
-            <p>
-                Kontaktieren Sie uns gerne für Fragen, Anregungen oder Kooperationsmöglichkeiten.
-            </p>
-        </section>
-    </div>
-</div>
-{% endblock %} 
--- a/utils/init.py
+++ b/utils/init.py
@@ -7,14 +7,14 @@ This package contains various utilities for database management,
 user management, and server administration.
 """

-# Import utilities that don't depend on app.py first
-from .db_check import check_db_connection, initialize_db_if_needed
+from .db_fix import fix_database_schema
+from .db_rebuild import rebuild_database
+from .db_test import test_database_connection, test_models, print_database_stats, run_all_tests
+from .user_manager import list_users, create_user, reset_password, delete_user, create_admin_user
+from .server import run_development_server

-# Define the list of all available utilities
 __all__ = [
    # Database utilities
-    'check_db_connection',
-    'initialize_db_if_needed',
    'fix_database_schema',
    'rebuild_database',
    'test_database_connection',
@@ -31,11 +31,4 @@ __all__ = [
    
    # Server management
    'run_development_server',
-]
-
-# Import remaining modules that might depend on app
-from .db_fix import fix_database_schema
-from .db_rebuild import rebuild_database
-from .db_test import test_database_connection, test_models, print_database_stats, run_all_tests
-from .user_manager import list_users, create_user, reset_password, delete_user, create_admin_user
-from .server import run_development_server 
+] 
--- a/utils/pycache/init.cpython-311.pyc
+++ b/utils/pycache/init.cpython-311.pyc
--- a/utils/pycache/init.cpython-313.pyc
+++ b/utils/pycache/init.cpython-313.pyc
--- a/utils/pycache/db_check.cpython-311.pyc
+++ b/utils/pycache/db_check.cpython-311.pyc
--- a/utils/pycache/db_check.cpython-313.pyc
+++ b/utils/pycache/db_check.cpython-313.pyc
--- a/utils/pycache/db_fix.cpython-311.pyc
+++ b/utils/pycache/db_fix.cpython-311.pyc
--- a/utils/pycache/db_fix.cpython-313.pyc
+++ b/utils/pycache/db_fix.cpython-313.pyc
--- a/utils/pycache/db_rebuild.cpython-311.pyc
+++ b/utils/pycache/db_rebuild.cpython-311.pyc
--- a/utils/pycache/db_rebuild.cpython-313.pyc
+++ b/utils/pycache/db_rebuild.cpython-313.pyc
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Till Tomczak	b8ad3aea13	Implement cybernetwork background features: Add routes for serving cybernetwork CSS and JavaScript files, update base.html to include the new CSS and initialization script, and enhance style.css with smooth scrolling and background imports. This update improves the visual experience and functionality of the cybernetwork background in the application.	2025-04-27 15:01:38 +02:00
Till Tomczak	edf3049e42	Remove deprecated files and templates: Delete unused files including deployment scripts, environment configurations, and various HTML templates to streamline the project structure. This cleanup enhances maintainability and reduces clutter in the codebase.	2025-04-27 14:50:20 +02:00
Till Tomczak	d117978005	Update GPT model to 'gpt-4o-mini' for chat functionality in app.py	2025-04-27 08:03:55 +02:00
Till Tomczak	48d8463481	Enhance chat interface styling in index.html: Add animations for chat messages and typing indicators, implement smooth scrolling for chat messages, and customize scrollbar appearance. Introduce hover effects for quick query buttons to improve user interaction and visual feedback.	2025-04-27 08:00:53 +02:00
Till Tomczak	08314ec703	Enhance embedded ChatGPT assistant functionality: Integrate a new chat interface within the index.html template, allowing users to interact with the assistant directly. Update main.js to ensure proper initialization and reference management. Improve user experience with quick query buttons and a responsive chat layout, while maintaining existing functionality in the application.	2025-04-27 08:00:16 +02:00
Till Tomczak	0bb7d8d0dc	Add ChatGPT assistant initialization in main.js: Integrate a new ChatGPTAssistant instance during the MindMap application initialization, ensuring a global reference for enhanced user interaction. This update improves the functionality of the chat feature within the application.	2025-04-27 07:52:23 +02:00
Till Tomczak	4a28c2c453	Refactor chat_with_assistant function to support messages array input: Enhance the chatbot API by allowing an array of messages for context, extracting system messages, and updating the response format. Maintain backward compatibility with the previous prompt structure while improving error handling for empty inputs.	2025-04-27 07:49:40 +02:00
Till Tomczak	66d987857a	Remove deprecated database management scripts and admin user creation functionality: Delete create_admin.py, fix_db.py, rebuild_db.py, and test_db.py to streamline the project structure and eliminate unused code. Update README.md with installation instructions and management tools for improved user guidance.	2025-04-27 07:46:48 +02:00
Till Tomczak	d58aba26c2	Refactor OpenAI integration and enhance mindmap UI: Update OpenAI client initialization to use a dedicated class, streamline API key management, and improve loading animations in the mindmap template. Add a modal for adding new thoughts with enhanced user feedback and error handling, while updating the loading overlay for better visual appeal and responsiveness.	2025-04-27 07:43:03 +02:00
Till Tomczak	8f0a6d4372	Update environment configuration and enhance app functionality: Add detailed comments to the .env file for better clarity, implement a route to reload environment variables dynamically, and ensure the .env file is loaded with force in the app. Remove obsolete build and development scripts to streamline the project structure. Update setup script to create a .env file if it doesn't exist, prompting users to configure necessary values.	2025-04-27 07:28:05 +02:00
Till Tomczak	5372fe220e	Add flash message API and enhance mindmap visualization: Implement a new API endpoint for retrieving flash messages, integrate flash message display in the mindmap visualization, and improve user feedback with dynamic notifications. Update UI elements for better responsiveness and visual appeal, while removing obsolete background image references.	2025-04-27 07:18:32 +02:00
Till Tomczak	11ab15127c	Refactor mindmap visualization and enhance user authentication UI: Implement API calls to load mindmap data dynamically, process hierarchical data into nodes and links, and improve error handling. Update login and registration templates for a modern design with enhanced validation and user experience. Remove obsolete network background images.	2025-04-27 07:08:38 +02:00
Till Tomczak	0705ecce59	Implement database path configuration and enhance category management: Update database URI to use an absolute path, ensure directory creation for the database, and implement default category creation on initialization. Add new routes for searching thoughts and user account management, while improving the UI with navigation updates for better accessibility.	2025-04-27 07:02:54 +02:00
Till Tomczak	1c59b0b616	node entfernt	2025-04-27 06:49:59 +02:00
Till Tomczak	d42c43db50	Enhance footer layout and mindmap functionality: Revamp footer structure with improved grid layout, add social media icons, and implement a newsletter subscription form. Update mindmap template to use SVG background, streamline script loading, and enhance visualization initialization with new event handlers for user interactions.	2025-04-27 06:33:01 +02:00
Till Tomczak	e46264b201	Fix: network background loading and fallback mechanism: Implement a retry logic for loading the network background image with a maximum of two attempts, first trying the SVG version and then falling back to a JPG if necessary. Add a fallback background drawing function to maintain visual continuity when image loading fails. Update placeholder comment in JPG file to reflect the use of an SVG alternative.	2025-04-27 06:26:10 +02:00
marwin	74307ba345	Add user account route and bookmark functionality: Implement '/my-account' route for user bookmarks and personal mindmap, enhance mindmap visualization with bookmark management, and update UI elements for better user experience.	2025-04-26 18:51:53 +01:00
marwin	14474c4eab	Refactor UI and enhance functionality: Update welcome messages and input placeholders in the chat assistant, implement connection count updates in the mindmap visualization, and change branding from "MindMap" to "Systades" across templates for a cohesive user experience.	2025-04-26 18:40:27 +01:00
Till Tomczak	4797cc3b72	Optimize network background animation and enhance UI styles: Adjust animation speeds for smoother transitions, implement dark mode support, and improve card and navbar styles with glassmorphism effects. Update HTML structure for better responsiveness and visual appeal.	2025-04-25 23:39:41 +02:00
marwin	ab280b55af	Update requirements and enhance mindmap UI: Comment out Pillow dependency, add network background script, and implement new styles and animations for improved visual effects in the mindmap template.	2025-04-25 21:30:35 +01:00
Till Tomczak	84b492d8d2	Update README and enhance application functionality: Add detailed installation instructions, integrate OpenAI GPT for the AI assistant, implement error handling for various HTTP errors, and improve the admin interface with user management features. Refactor mindmap visualization and enhance UI with modern design elements.	2025-04-25 00:30:04 +02:00
Till Tomczak	b0db3398f2	Erweitere die Anwendung um neue Funktionen: Implementiere eine dauerhafte Sitzung für den Dark Mode, füge Benutzer- und Gedankenbewertung hinzu, verbessere die Benutzeroberfläche und aktualisiere die Datenbankinitialisierung mit Beispielbenutzern und Gedanken. Optimiere die Templates für ein modernes Design und verbessere die Suchfunktionalität.	2025-04-24 18:08:04 +02:00