Update compiled Python files in __pycache__: Refresh app.cpython-313.pyc and models.cpython-313.pyc to reflect recent code changes and optimizations.

.cursor/rules/ai-integration.mdc

@@ -0,0 +1,34 @@
+---
+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

.cursor/rules/authentication.mdc

@@ -0,0 +1,36 @@
+---
+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.)

.cursor/rules/configuration.mdc

@@ -0,0 +1,31 @@
+---
+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)

.cursor/rules/data-models.mdc

@@ -0,0 +1,31 @@
+---
+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)

.cursor/rules/development-workflow.mdc

@@ -0,0 +1,32 @@
+---
+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

.cursor/rules/frontend-structure.mdc

@@ -0,0 +1,41 @@
+---
+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

.cursor/rules/project-structure.mdc

@@ -0,0 +1,27 @@
+---
+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

.cursor/rules/routing.mdc

@@ -0,0 +1,43 @@
+---
+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

.env

@@ -5,7 +5,7 @@
 SECRET_KEY=dein-geheimer-schluessel-hier
 
 # OpenAI API
-OPENAI_API_KEY=sk-dein-openai-api-schluessel-hier
+OPENAI_API_KEY=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
 
 # Datenbank
 # Bei Bedarf kann hier eine andere Datenbank-URL angegeben werden

COMMON_ERRORS.md

@@ -0,0 +1,173 @@
+# 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
+D
+## 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.
+
+## Datenbank-Fehler
+
+### Problem: Datenbank existiert nicht
+**Fehler:** SQLite-Datenbank kann nicht geöffnet werden.
+
+**Lösung:**
+1. Datenbank initialisieren: `python TOOLS.py db:rebuild`
+2. Sicherstellen, dass das Datenbankverzeichnis existiert und Schreibrechte hat
+
+## 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.

README.md

@@ -6,7 +6,7 @@ Das MindMapProjekt ist eine interaktive Plattform zum Visualisieren, Erforschen
 ## Technischer Stack
 - **Backend**: Python/Flask
 - **Frontend**: 
-  - Tailwind CSS für moderne UI
+  - Tailwind CSS (via CDN) für moderne UI
   - SVG-Bibliotheken für Visualisierungen (D3.js)
   - JavaScript/Alpine.js für interaktive Komponenten
 - **Datenbank**: SQLite mit SQLAlchemy
@@ -131,4 +131,31 @@ Für detaillierte Hilfe: `python TOOLS.py -h`
 - Implementierung des Tagging-Systems für Gedanken
 - Verbesserung der Gedankenansicht im Mindmap-Bereich
 
-*Zuletzt aktualisiert: 01.06.2024* 
+## 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)
+
+### 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: 06.06.2024* 

ROADMAP.md

@@ -66,6 +66,20 @@ 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
@@ -99,4 +113,17 @@ 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/nodes/<id>/thoughts` - Abrufen und Hinzufügen von Gedanken zu Knoten
+
+## Aktuelle Änderungen
+- Tailwind CSS wurde auf CDN-Version aktualisiert (06.06.2024)
+- Content Security Policy (CSP) für Tailwind CSS CDN konfiguriert
+
+## Zukünftige Aufgaben
+- Überprüfung der Kompatibilität der Tailwind CSS CDN-Version mit allen UI-Komponenten
+- Optimierung der Ladezeiten für mobile Geräte
+- Überarbeitung der Dark Mode Funktionalität mit neuer Tailwind Version
+
+## Langfristige Ziele
+- Migration zu einer statisch kompilierten Tailwind CSS Version für Produktivumgebungen
+- Implementierung von Tailwind Plugins für erweiterte UI-Funktionen 

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
+from flask import Flask, render_template, request, redirect, url_for, flash, jsonify, session, g
 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
@@ -41,7 +41,29 @@ app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=365)  # Langlebige Session für Dark Mode-Einstellung
 
 # OpenAI API-Konfiguration
-client = OpenAI(api_key="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")
+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']})
 
 # Context processor für globale Template-Variablen
 @app.context_processor
@@ -51,7 +73,7 @@ def inject_globals():
         'current_year': datetime.now().year
     }
 
-# Kontext-Prozessor für alle Templates
+# Context-Prozessor für alle Templates
 @app.context_processor
 def inject_current_year():
     return {'current_year': datetime.now().year}
@@ -63,6 +85,214 @@ 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
+
+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 initialize_database():
+    """Initialisiert die Datenbank mit Grunddaten, falls diese leer ist"""
+    try:
+        print("Initialisiere die Datenbank...")
+        
+        # Erstelle alle Tabellen
+        db.create_all()
+        
+        # Prüfe, ob bereits Benutzer existieren
+        if User.query.count() == 0:
+            print("Erstelle Admin-Benutzer...")
+            admin = User(
+                username="admin",
+                email="admin@example.com",
+                is_admin=True
+            )
+            admin.set_password("admin123")  # In echter Umgebung ein sicheres Passwort verwenden!
+            db.session.add(admin)
+        
+        # Prüfe, ob bereits Kategorien existieren
+        if Category.query.count() == 0:
+            print("Erstelle Standard-Kategorien...")
+            create_default_categories()
+        
+        # Stelle sicher, dass die Standard-Knoten für die öffentliche Mindmap existieren
+        if MindMapNode.query.count() == 0:
+            print("Erstelle Standard-Knoten für die Mindmap...")
+            
+            # Hauptknoten: Wissen
+            root_node = MindMapNode(
+                name="Wissen",
+                description="Zentrale Wissensbasis",
+                color_code="#4299E1",
+                is_public=True
+            )
+            db.session.add(root_node)
+            db.session.flush()  # Um die ID zu generieren
+            
+            # Verwandte Kategorien finden
+            philosophy = Category.query.filter_by(name="Philosophie").first()
+            science = Category.query.filter_by(name="Wissenschaft").first()
+            technology = Category.query.filter_by(name="Technologie").first()
+            arts = Category.query.filter_by(name="Künste").first()
+            
+            # Erstelle Hauptthemenknoten
+            nodes = [
+                MindMapNode(
+                    name="Philosophie", 
+                    description="Philosophisches Denken",
+                    color_code="#9F7AEA",
+                    category=philosophy,
+                    is_public=True
+                ),
+                MindMapNode(
+                    name="Wissenschaft", 
+                    description="Wissenschaftliche Erkenntnisse",
+                    color_code="#48BB78",
+                    category=science,
+                    is_public=True
+                ),
+                MindMapNode(
+                    name="Technologie", 
+                    description="Technologische Entwicklungen",
+                    color_code="#ED8936",
+                    category=technology,
+                    is_public=True
+                ),
+                MindMapNode(
+                    name="Künste", 
+                    description="Künstlerische Ausdrucksformen",
+                    color_code="#ED64A6",
+                    category=arts,
+                    is_public=True
+                )
+            ]
+            
+            # Füge Knoten zur Datenbank hinzu
+            for node in nodes:
+                db.session.add(node)
+            
+            db.session.commit()
+            
+            # Nachdem wir die IDs haben, füge die Verbindungen hinzu
+            all_nodes = MindMapNode.query.all()
+            root = MindMapNode.query.filter_by(name="Wissen").first()
+            
+            if root:
+                for node in all_nodes:
+                    if node.id != root.id:
+                        root.children.append(node)
+            
+            # Speichere die Änderungen
+            db.session.commit()
+            
+        print("Datenbankinitialisierung abgeschlossen.")
+    except Exception as e:
+        print(f"Fehler bei der Datenbankinitialisierung: {str(e)}")
+        db.session.rollback()
+        raise
+
+# 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)
@@ -145,14 +375,22 @@ def index():
 @app.route('/mindmap')
 def mindmap():
     """Zeigt die öffentliche Mindmap an."""
-    # Sicherstellen, dass wir Kategorien haben
-    with app.app_context():
+    try:
+        # Sicherstellen, dass wir Kategorien haben
         if Category.query.count() == 0:
             create_default_categories()
-    
-    # Hole alle Kategorien der obersten Ebene
-    categories = Category.query.filter_by(parent_id=None).all()
-    return render_template('mindmap.html', categories=categories)
+        
+        # Hole alle Kategorien der obersten Ebene
+        categories = Category.query.filter_by(parent_id=None).all()
+        
+        # Transformiere Kategorien in ein anzeigbares Format für die Vorlage
+        category_tree = [build_category_tree(cat) for cat in categories]
+        
+        return render_template('mindmap.html', categories=category_tree)
+    except Exception as e:
+        # Bei Fehler leere Kategorienliste übergeben und Fehler protokollieren
+        print(f"Fehler beim Laden der Mindmap-Kategorien: {str(e)}")
+        return render_template('mindmap.html', categories=[], error=str(e))
 
 # Route for user profile
 @app.route('/profile')
@@ -160,16 +398,47 @@ 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(func.count()).select_from(user_thought_bookmark).filter(
-        user_thought_bookmark.c.user_id == current_user.id
-    ).scalar()
+    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
     
     return render_template('profile.html', 
+                          user=current_user,
                           user_mindmaps=user_mindmaps, 
                           thought_count=thought_count,
-                          bookmark_count=bookmark_count)
+                          bookmark_count=bookmark_count,
+                          connections_count=connections_count,
+                          contributions_count=contributions_count,
+                          followers_count=followers_count,
+                          rating=round(avg_rating, 1),
+                          location=location)
 
 # Route für Benutzereinstellungen
 @app.route('/settings', methods=['GET', 'POST'])
@@ -202,7 +471,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')
@@ -328,33 +597,44 @@ def get_public_mindmap():
     return jsonify(result)
 
 def build_category_tree(category):
-    """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)
-            })
+    """
+    Erstellt eine Baumstruktur für eine Kategorie mit all ihren Unterkategorien
+    und dazugehörigen Knoten
     
-    # Rekursiv durch Unterkaterorien
-    children = []
-    for child in category.children:
-        children.append(build_category_tree(child))
-    
-    return {
+    Args:
+        category: Ein Category-Objekt
+        
+    Returns:
+        dict: Eine JSON-serialisierbare Darstellung der Kategoriestruktur
+    """
+    # Kategorie-Basisinformationen
+    category_dict = {
         'id': category.id,
         'name': category.name,
         'description': category.description,
         'color_code': category.color_code,
         'icon': category.icon,
-        'nodes': nodes,
-        'children': children
+        'nodes': [],
+        '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
@@ -874,17 +1154,21 @@ def bookmark_thought(thought_id):
 
 @app.route('/api/categories')
 def get_categories():
-    """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])
+    """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
 
 @app.route('/api/set_dark_mode', methods=['POST'])
 def set_dark_mode():
@@ -930,7 +1214,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."""
+    """Chatbot-API mit OpenAI Integration und Datenbankzugriff."""
     data = request.json
     
     # Prüfen, ob wir ein einzelnes Prompt oder ein messages-Array haben
@@ -943,9 +1227,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 hilfreicher Assistent, der Menschen dabei hilft, "
-            "Wissen zu organisieren und zu verknüpfen. Liefere informative, "
-            "sachliche und gut strukturierte Antworten.")
+            "Du bist ein hilfreicher Assistent, der Zugriff auf die Wissensdatenbank hat. "
+            "Du kannst Informationen zu Gedanken, Kategorien und Mindmaps liefern. "
+            "Antworte informativ, sachlich und gut strukturiert auf Deutsch.")
         
         # Formatiere Nachrichten für OpenAI API
         api_messages = [{"role": "system", "content": system_message}]
@@ -966,9 +1250,9 @@ def chat_with_assistant():
         
         # Zusammenfassen mehrerer Gedanken oder Analyse anfordern
         system_message = (
-            "Du bist ein hilfreicher Assistent, der Menschen dabei hilft, "
-            "Wissen zu organisieren und zu verknüpfen. Liefere informative, "
-            "sachliche und gut strukturierte Antworten."
+            "Du bist ein hilfreicher Assistent, der Zugriff auf die Wissensdatenbank hat. "
+            "Du kannst Informationen zu Gedanken, Kategorien und Mindmaps liefern. "
+            "Antworte informativ, sachlich und gut strukturiert auf Deutsch."
         )
         
         if context:
@@ -979,150 +1263,120 @@ def chat_with_assistant():
             {"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=300,
-            temperature=0.7
+            max_tokens=600,  # Erhöht für längere, detailliertere Antworten
+            temperature=0.7,
+            timeout=20  # 20 Sekunden Timeout
         )
         
+        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())
+        
         return jsonify({
             'error': f'Fehler bei der OpenAI-Anfrage: {str(e)}'
         }), 500
 
-# 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'
-                }
-            ]
-        }
-    ]
+def check_database_query(user_message):
+    """
+    Überprüft, ob die Benutzeranfrage nach Datenbankinformationen sucht und extrahiert 
+    relevante Daten aus der Datenbank.
+    """
+    context = []
     
-    # 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
+    # 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()
         
-        # Unterkategorien hinzufügen
-        for child_data in children_data:
-            child = Category(**child_data, parent_id=category.id)
-            db.session.add(child)
+        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("")
     
-    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 ['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("")
     
-    # Ü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()
+    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 ""
 
 @app.route('/search')
 def search_thoughts_page():
@@ -1145,24 +1399,10 @@ def my_account():
 @app.route('/static/network-bg.jpg')
 @app.route('/static/network-bg.svg')
 def dummy_network_bg():
-    """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')
+    """Leere Antwort für die nicht mehr verwendeten Netzwerk-Hintergrundbilder."""
+    return '', 200
 
+# Route zum expliziten Neu-Laden der Umgebungsvariablen
 @app.route('/admin/reload-env', methods=['POST'])
 @admin_required
 def reload_env():
@@ -1192,4 +1432,51 @@ if __name__ == '__main__':
     with app.app_context():
         # Make sure tables exist
         db.create_all()
-    app.run(host="0.0.0.0", debug=True)
+    app.run(host="0.0.0.0", debug=True)
+
+@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()
+        
+        # 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
+        nodes = MindMapNode.query.all()
+        node_data = []
+        
+        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
+            }
+            
+            # Verbindungen hinzufügen
+            node_obj['connections'] = [{'target': child.id} for child in node.children]
+            
+            node_data.append(node_obj)
+        
+        return jsonify({
+            'success': True,
+            'categories': category_tree,
+            'nodes': node_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

cookies.txt

@@ -1,4 +0,0 @@
-# Netscape HTTP Cookie File
-# https://curl.se/docs/http-cookies.html
-# This file was generated by libcurl! Edit at your own risk.
-

requirements.txt

@@ -5,7 +5,7 @@ email-validator
 python-dotenv
 werkzeug==2.2.3
 flask-sqlalchemy==3.0.5
-openai==1.3.0
+openai==1.15.0
 requests==2.31.0
 flask-cors==4.0.0
 gunicorn==21.2.0

static/background.js

@@ -1,108 +0,0 @@
-// 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();
-} 

static/background.mp4

@@ -1 +0,0 @@
-C:\Users\firem\Downloads\background.mp4

static/css/all.min.css

@@ -0,0 +1,27 @@
+/*
+ * 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;
+} 

static/css/assistant.css

@@ -1,21 +1,25 @@
-/* ChatGPT Assistent Styles */
+/* ChatGPT Assistent Styles - Verbesserte Version */
 #chatgpt-assistant {
     font-family: 'Inter', sans-serif;
 }
 
 #assistant-chat {
-    transition: max-height 0.3s ease, opacity 0.3s ease;
-    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
+    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);
     border-radius: 0.75rem;
     overflow: hidden;
+    max-width: calc(100vw - 2rem);
 }
 
 #assistant-toggle {
-    transition: transform 0.3s ease;
+    transition: transform 0.3s ease, background-color 0.2s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 60;
 }
 
 #assistant-toggle:hover {
-    transform: scale(1.1);
+    transform: scale(1.1) rotate(10deg);
 }
 
 #assistant-history {
@@ -40,27 +44,74 @@
     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;
 }
 
-/* Verbesserter Glassmorphism-Effekt */
+/* Verbesserte Glassmorphism-Effekt */
 .glass-morphism {
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .dark .glass-morphism {
-    background: rgba(15, 23, 42, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: rgba(15, 23, 42, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.06);
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
 }
 
-/* Dunkleres Dark Theme */
+/* Verbesserte Farbpalette für Dark Theme */
 .dark {
     --tw-bg-opacity: 1;
     background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
@@ -82,6 +133,54 @@
     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%;

static/css/base-styles.css

@@ -1,426 +1,421 @@
-/* Globale Variablen */
-:root {
-    --dark-bg: #0e1220;
-    --dark-card-bg: rgba(24, 28, 45, 0.8);
-    --dark-element-bg: rgba(24, 28, 45, 0.8);
-    --light-bg: #f0f4f8;
-    --light-card-bg: rgba(255, 255, 255, 0.85);
-    --accent-color: #b38fff;
-    --accent-gradient: linear-gradient(135deg, #b38fff, #58a9ff);
-    --accent-gradient-hover: linear-gradient(135deg, #c7a8ff, #70b5ff);
-    --blur-amount: 20px;
-    --border-radius: 28px;
-    --card-border-radius: 24px;
-    --button-radius: 18px;
-    --nav-item-radius: 14px;
-}
+/* Base Styles - Dark, Mystical Theme */
 
-/* Dark Mode Einstellungen */
-html.dark {
-    color-scheme: dark;
+/* Global Variables */
+:root {
+    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    
+    /* Light Theme */
+    --bg-primary-light: #f8fafc;
+    --bg-secondary-light: #f1f5f9;
+    --bg-tertiary-light: #e2e8f0;
+    --text-primary-light: #1e293b;
+    --text-secondary-light: #475569;
+    --accent-primary-light: #7c3aed;
+    --accent-secondary-light: #8b5cf6;
+    --accent-tertiary-light: #a78bfa;
+    --border-light: #e2e8f0;
+    --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --glow-light: 0 0 15px rgba(139, 92, 246, 0.3);
+    
+    /* Dark Theme */
+    --bg-primary-dark: #0a0e19;
+    --bg-secondary-dark: #111827;
+    --bg-tertiary-dark: #1f2937;
+    --text-primary-dark: #f9fafb;
+    --text-secondary-dark: #e5e7eb;
+    --accent-primary-dark: #6d28d9;
+    --accent-secondary-dark: #8b5cf6;
+    --accent-tertiary-dark: #a78bfa;
+    --border-dark: #1f2937;
+    --shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    --glow-dark: 0 0 15px rgba(124, 58, 237, 0.5);
+    
+    /* Transitions */
+    --transition-fast: 150ms ease-in-out;
+    --transition-normal: 300ms ease-in-out;
+    --transition-slow: 500ms ease-in-out;
 }
 
 /* Base Styles */
-html, body {
-    background-color: var(--dark-bg) !important;
-    min-height: 100vh;
-    width: 100%;
-    color: #ffffff;
-    margin: 0;
-    padding: 0;
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+html {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scroll-behavior: smooth;
+}
+
+body {
+    transition: background-color var(--transition-normal), color var(--transition-normal);
     overflow-x: hidden;
-    transition: background-color 0.5s ease, color 0.5s ease;
+    min-height: 100vh;
+    font-family: var(--font-sans);
+    line-height: 1.5;
 }
 
-/* Sicherstellen, dass der dunkle Hintergrund die gesamte Seite abdeckt */
-#app-container, .container, main, .mx-auto, .py-12, #content-wrapper {
-    background-color: transparent !important;
-    width: 100%;
+/* Dark Mode */
+html.dark body {
+    background-color: var(--bg-primary-dark);
+    color: var(--text-primary-dark);
 }
 
-/* Light Mode Einstellungen */
-html.light, html.light body {
-    background-color: var(--light-bg) !important;
-    color: #1a202c;
+/* Light Mode */
+body {
+    background-color: var(--bg-primary-light);
+    color: var(--text-primary-light);
 }
 
-/* Große Headings mit verbesserten Stilen */
-h1.hero-heading {
-    font-size: clamp(2.5rem, 8vw, 5rem);
-    line-height: 1.1;
-    font-weight: 800;
-    letter-spacing: -0.03em;
-    margin-bottom: 1.5rem;
-}
-
-h2.section-heading {
-    font-size: clamp(1.75rem, 5vw, 3rem);
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
     line-height: 1.2;
+}
+
+.hero-heading {
+    font-size: 2.75rem;
     font-weight: 700;
     letter-spacing: -0.02em;
-    margin-bottom: 1.25rem;
+    line-height: 1.1;
 }
 
-/* Verbesserte Glasmorphismus-Stile */
-.glass-morphism {
-    background: var(--dark-card-bg);
-    backdrop-filter: blur(var(--blur-amount));
-    -webkit-backdrop-filter: blur(var(--blur-amount));
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: var(--card-border-radius);
-    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
-    transition: all 0.3s ease;
+.section-heading {
+    font-size: 2rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
 }
 
-.glass-morphism:hover {
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
-    transform: translateY(-2px);
+.gradient-text {
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    display: inline-block;
 }
 
-.glass-morphism-light {
-    background: var(--light-card-bg);
-    backdrop-filter: blur(var(--blur-amount));
-    -webkit-backdrop-filter: blur(var(--blur-amount));
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: var(--card-border-radius);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
-    transition: all 0.3s ease;
+html.dark .gradient-text {
+    background-image: linear-gradient(135deg, var(--accent-primary-dark), var(--accent-secondary-dark));
+    text-shadow: var(--glow-dark);
 }
 
-.glass-morphism-light:hover {
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
-    transform: translateY(-2px);
+.gradient-text {
+    background-image: linear-gradient(135deg, var(--accent-primary-light), var(--accent-secondary-light));
+    text-shadow: var(--glow-light);
 }
 
-/* Verbesserte Navbar-Styles */
-.glass-navbar-dark {
-    background: rgba(14, 18, 32, 0.85);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
-    border-radius: 0 0 20px 20px;
-}
-
-.glass-navbar-light {
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    border-color: rgba(0, 0, 0, 0.05);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-    border-radius: 0 0 20px 20px;
-}
-
-/* Verbesserte Button-Stile mit besserer Lesbarkeit und stärkeren Farbverläufen */
-.btn, button, .button, [type="button"], [type="submit"] {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    border-radius: var(--button-radius);
-    padding: 0.75rem 1.5rem;
-    font-weight: 600;
-    letter-spacing: 0.4px;
-    color: rgba(255, 255, 255, 1);
-    background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(168, 85, 247, 0.8));
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
+/* Mystical elements */
+.mystical-border {
     position: relative;
-    overflow: hidden;
-    outline: none;
 }
 
-.btn:hover, button:hover, .button:hover, [type="button"]:hover, [type="submit"]:hover {
-    background: linear-gradient(135deg, rgba(129, 140, 248, 0.9), rgba(192, 132, 252, 0.9));
-    transform: translateY(-3px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25), 0 0 12px rgba(179, 143, 255, 0.35);
-    color: white;
+.mystical-border::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid;
+    border-radius: inherit;
+    pointer-events: none;
+    opacity: 0.3;
 }
 
-.btn:active, button:active, .button:active, [type="button"]:active, [type="submit"]:active {
-    transform: translateY(1px);
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
+html.dark .mystical-border::before {
+    border-color: var(--accent-primary-dark);
+    box-shadow: var(--glow-dark);
 }
 
-/* Navigation Stile mit verbesserten Farbverläufen */
+.mystical-border::before {
+    border-color: var(--accent-primary-light);
+    box-shadow: var(--glow-light);
+}
+
+/* Navigation Links */
 .nav-link {
-    transition: all 0.25s ease;
-    border-radius: var(--nav-item-radius);
-    padding: 0.625rem 1rem;
-    font-weight: 500;
-    letter-spacing: 0.3px;
-    color: rgba(255, 255, 255, 0.9);
     position: relative;
-    overflow: visible;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    transition: var(--transition-normal);
+}
+
+html.dark .nav-link {
+    color: var(--text-secondary-dark);
+}
+
+.nav-link {
+    color: var(--text-secondary-light);
+}
+
+html.dark .nav-link:hover {
+    color: var(--text-primary-dark);
+    background-color: rgba(31, 41, 55, 0.5);
 }
 
 .nav-link:hover {
-    background: rgba(179, 143, 255, 0.2);
-    color: white;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    color: var(--text-primary-light);
+    background-color: rgba(241, 245, 249, 0.5);
 }
 
-.nav-link-active {
-    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(139, 92, 246, 0.3));
-    color: white;
-    font-weight: 600;
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
-}
-
-.nav-link-active::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 10%;
-    width: 80%;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
-}
-
-/* Light-Mode Navigation Stile */
-.nav-link-light {
-    color: rgba(26, 32, 44, 0.85);
-}
-
-.nav-link-light:hover {
-    background: rgba(179, 143, 255, 0.15);
-    color: rgba(26, 32, 44, 1);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+html.dark .nav-link-active {
+    color: var(--accent-tertiary-dark);
+    background-color: rgba(109, 40, 217, 0.15);
 }
 
 .nav-link-light-active {
-    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(139, 92, 246, 0.2));
-    color: rgba(26, 32, 44, 1);
-    font-weight: 600;
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+    color: var(--accent-primary-light);
+    background-color: rgba(139, 92, 246, 0.1);
 }
 
-.nav-link-light-active::after {
-    background: linear-gradient(90deg, transparent, rgba(26, 32, 44, 0.5), transparent);
+/* Glass Morphism Effects */
+.glass-navbar-dark {
+    background-color: rgba(10, 14, 25, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
 }
 
-/* Entfernung von Gradient-Hintergrund überall */
-.gradient-bg, .purple-gradient, .gradient-purple-bg {
-    background: var(--dark-bg) !important;
-    background-image: none !important;
+.glass-navbar-light {
+    background-color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-color: rgba(226, 232, 240, 0.5);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }
 
-/* Verbesserte Light-Mode-Stile für Buttons */
-html.light .btn, html.light button, html.light .button, 
-html.light [type="button"], html.light [type="submit"] {
-    background: linear-gradient(135deg, rgba(124, 58, 237, 0.7), rgba(139, 92, 246, 0.7));
-    color: #ffffff;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-    text-shadow: none;
+.glass-morphism {
+    transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal);
 }
 
-html.light .btn:hover, html.light button:hover, html.light .button:hover, 
-html.light [type="button"]:hover, html.light [type="submit"]:hover {
-    background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(168, 85, 247, 0.85));
-    color: #ffffff;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 0 12px rgba(179, 143, 255, 0.2);
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+/* Cards */
+.mystical-card {
+    border-radius: 0.75rem;
+    overflow: hidden;
+    transition: var(--transition-normal);
 }
 
-/* Verbesserte Buttons mit Glasmorphismus */
-.btn-primary {
-    background: linear-gradient(135deg, rgba(179, 143, 255, 0.8), rgba(88, 169, 255, 0.8));
-    backdrop-filter: blur(var(--blur-amount));
-    -webkit-backdrop-filter: blur(var(--blur-amount));
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: var(--button-radius);
-    color: white !important;
-    font-weight: 600;
-    padding: 0.75rem 1.5rem;
-    transition: all 0.3s ease;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+html.dark .mystical-card {
+    background-color: var(--bg-secondary-dark);
+    border: 1px solid var(--border-dark);
+    box-shadow: var(--shadow-dark);
 }
 
-.btn-primary:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
-    background: linear-gradient(135deg, rgba(190, 160, 255, 0.9), rgba(100, 180, 255, 0.9));
+.mystical-card {
+    background-color: var(--bg-secondary-light);
+    border: 1px solid var(--border-light);
+    box-shadow: var(--shadow-light);
 }
 
-.btn-secondary {
-    background: rgba(32, 36, 55, 0.8);
-    backdrop-filter: blur(var(--blur-amount));
-    -webkit-backdrop-filter: blur(var(--blur-amount));
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: var(--button-radius);
-    color: white;
+html.dark .mystical-card:hover {
+    box-shadow: var(--glow-dark), var(--shadow-dark);
+    border-color: var(--accent-primary-dark);
+}
+
+.mystical-card:hover {
+    box-shadow: var(--glow-light), var(--shadow-light);
+    border-color: var(--accent-primary-light);
+}
+
+/* Buttons */
+.mystical-button {
+    padding: 0.625rem 1.25rem;
+    border-radius: 0.5rem;
     font-weight: 500;
-    padding: 0.75rem 1.5rem;
-    transition: all 0.3s ease;
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+    transition: var(--transition-normal);
+    position: relative;
+    overflow: hidden;
 }
 
-.btn-secondary:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
-    background: rgba(38, 42, 65, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-/* Steuerungsbutton-Stil */
-.control-btn {
-    padding: 0.5rem 1rem;
-    background: rgba(32, 36, 55, 0.8);
-    color: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 14px;
-    font-size: 0.875rem;
-    font-weight: 500;
-    transition: all 0.25s ease;
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-}
-
-.control-btn:hover {
-    background: rgba(38, 42, 65, 0.9);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
-}
-
-/* Verbesserter Farbverlauf-Text */
-.gradient-text {
-    background: linear-gradient(135deg, rgba(200, 170, 255, 1), rgba(100, 180, 255, 1));
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    text-shadow: 0 2px 10px rgba(179, 143, 255, 0.3);
-    filter: drop-shadow(0 2px 6px rgba(179, 143, 255, 0.3));
-}
-
-/* Globaler Hintergrund */
-.full-page-bg {
-    position: fixed;
+.mystical-button::before {
+    content: '';
+    position: absolute;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--dark-bg);
-    z-index: -10;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05), transparent);
+    transform: translateX(-100%);
+    transition: transform 0.8s ease-in-out;
 }
 
-html.light .full-page-bg {
-    background-color: var(--light-bg);
+.mystical-button:hover::before {
+    transform: translateX(100%);
 }
 
-/* Animationen für Hintergrundeffekte */
-@keyframes float {
+html.dark .mystical-button-primary {
+    background-color: var(--accent-primary-dark);
+    color: white;
+}
+
+.mystical-button-primary {
+    background-color: var(--accent-primary-light);
+    color: white;
+}
+
+html.dark .mystical-button-primary:hover {
+    background-color: var(--accent-secondary-dark);
+    box-shadow: var(--glow-dark);
+}
+
+.mystical-button-primary:hover {
+    background-color: var(--accent-secondary-light);
+    box-shadow: var(--glow-light);
+}
+
+html.dark .mystical-button-secondary {
+    background-color: var(--bg-tertiary-dark);
+    color: var(--text-primary-dark);
+    border: 1px solid var(--border-dark);
+}
+
+.mystical-button-secondary {
+    background-color: var(--bg-tertiary-light);
+    color: var(--text-primary-light);
+    border: 1px solid var(--border-light);
+}
+
+html.dark .mystical-button-secondary:hover {
+    background-color: var(--bg-secondary-dark);
+    border-color: var(--accent-tertiary-dark);
+}
+
+.mystical-button-secondary:hover {
+    background-color: var(--bg-secondary-light);
+    border-color: var(--accent-tertiary-light);
+}
+
+/* Inputs */
+.mystical-input {
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    transition: var(--transition-normal);
+    width: 100%;
+    outline: none;
+}
+
+html.dark .mystical-input {
+    background-color: var(--bg-tertiary-dark);
+    border: 1px solid var(--border-dark);
+    color: var(--text-primary-dark);
+}
+
+.mystical-input {
+    background-color: var(--bg-tertiary-light);
+    border: 1px solid var(--border-light);
+    color: var(--text-primary-light);
+}
+
+html.dark .mystical-input:focus {
+    border-color: var(--accent-tertiary-dark);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
+}
+
+.mystical-input:focus {
+    border-color: var(--accent-tertiary-light);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+}
+
+/* Animations */
+@keyframes floatAnimation {
     0% { transform: translateY(0); }
-    50% { transform: translateY(-12px); }
+    50% { transform: translateY(-5px); }
     100% { transform: translateY(0); }
 }
 
-@keyframes pulse {
-    0% { opacity: 0.7; transform: scale(1); }
-    50% { opacity: 1; transform: scale(1.05); }
-    100% { opacity: 0.7; transform: scale(1); }
-}
-
 .animate-float {
-    animation: float 6s ease-in-out infinite;
+    animation: floatAnimation 3s ease-in-out infinite;
 }
 
-.animate-pulse {
-    animation: pulse 3s ease-in-out infinite;
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
-/* Verbesserter Container für konsistente Layouts */
-.page-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem 1rem;
+.animate-fade-in {
+    animation: fadeIn 0.5s ease-out forwards;
 }
 
-/* Dark Mode Toggle Stile */
-.dot {
-    transform: translateX(0);
-    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
+/* Scroll Bars */
+::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
 }
 
-input:checked ~ .dot {
-    transform: translateX(100%);
-    background-color: #58a9ff;
+html.dark ::-webkit-scrollbar-track {
+    background: var(--bg-secondary-dark);
 }
 
-input:checked ~ .block {
-    background-color: rgba(88, 169, 255, 0.4);
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary-light);
 }
 
-/* Feature Cards mit Glasmorphismus und Farbverlauf */
-.feature-card {
-    border-radius: var(--card-border-radius);
-    padding: 2rem;
-    transition: all 0.3s ease;
-    background: linear-gradient(145deg, rgba(32, 36, 55, 0.7), rgba(24, 28, 45, 0.9));
-    backdrop-filter: blur(var(--blur-amount));
-    -webkit-backdrop-filter: blur(var(--blur-amount));
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+html.dark ::-webkit-scrollbar-thumb {
+    background: var(--accent-primary-dark);
+    border-radius: 0.25rem;
 }
 
-.feature-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    background: linear-gradient(145deg, rgba(40, 44, 65, 0.8), rgba(28, 32, 50, 0.95));
+::-webkit-scrollbar-thumb {
+    background: var(--accent-primary-light);
+    border-radius: 0.25rem;
 }
 
-html.light .feature-card {
-    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 250, 0.9));
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+html.dark ::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-secondary-dark);
 }
 
-html.light .feature-card:hover {
-    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 255, 0.95));
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+::-webkit-scrollbar-thumb:hover {
+    background: var(--accent-secondary-light);
 }
 
-.feature-card .icon {
-    width: 60px;
-    height: 60px;
-    border-radius: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    margin-bottom: 1.25rem;
-    background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(139, 92, 246, 0.6));
-    color: white;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+/* Responsive Utilities */
+@media (max-width: 640px) {
+    .hero-heading {
+        font-size: 2rem;
+    }
+    
+    .section-heading {
+        font-size: 1.5rem;
+    }
 }
 
-.feature-card h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 0.75rem;
-    color: rgba(255, 255, 255, 0.95);
+/* Additional background elements */
+.mystical-dot {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.15;
+    filter: blur(3px);
+    z-index: -1;
+    transition: opacity var(--transition-normal);
 }
 
-html.light .feature-card h3 {
-    color: rgba(26, 32, 44, 0.95);
+html.dark .mystical-dot {
+    background-color: var(--accent-primary-dark);
+    box-shadow: 0 0 15px var(--accent-primary-dark);
 }
 
-.feature-card p {
-    color: rgba(255, 255, 255, 0.75);
-    line-height: 1.6;
+.mystical-dot {
+    background-color: var(--accent-primary-light);
+    box-shadow: 0 0 15px var(--accent-primary-light);
 }
 
-html.light .feature-card p {
-    color: rgba(26, 32, 44, 0.75);
+/* Accessibility */
+.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;
+}
+
+/* Focus styles for keyboard navigation */
+:focus-visible {
+    outline: 2px solid var(--accent-primary-light);
+    outline-offset: 2px;
+}
+
+html.dark :focus-visible {
+    outline-color: var(--accent-primary-dark);
 } 

static/css/neural-network-background.css

@@ -0,0 +1,47 @@
+/* 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;
+}
+
+body.dark .glass-navbar-dark {
+  background-color: rgba(10, 14, 25, 0.7) !important;
+}
+
+body .glass-navbar-light {
+  background-color: rgba(255, 255, 255, 0.7) !important;
+}
+
+/* Make sure footer has proper transparency */
+footer {
+  background-color: rgba(10, 14, 25, 0.7) !important;
+} 

static/css/src/cybernetwork-bg.css

@@ -1,125 +0,0 @@
-/* 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;
-  }
-} 

static/css/style.css

@@ -1434,16 +1434,11 @@ 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: 50;
-}
-
-/* Importiere das Cyber-Network CSS */
-@import url('/static/css/src/cybernetwork-bg.css'); 
+    z-index: 1000;
+} 

static/css/tailwind.min.css

@@ -0,0 +1,6 @@
+/**
+ * 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');

static/d3-extensions.js

@@ -450,6 +450,76 @@ 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

static/fonts/inter.css

@@ -0,0 +1,35 @@
+/* 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');
+} 

static/fonts/jetbrains-mono.css

@@ -0,0 +1,21 @@
+/* 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');
+} 

static/js/main.js

@@ -2,9 +2,6 @@
  * 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
@@ -38,10 +35,12 @@ const MindMap = {
     console.log('MindMap-Anwendung wird initialisiert...');
     
     // Initialisiere den ChatGPT-Assistenten
-    const assistant = new ChatGPTAssistant();
-    assistant.init();
-    // Speichere als Teil von MindMap
-    this.assistant = assistant;
+    if (typeof ChatGPTAssistant !== 'undefined') {
+      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]) {
@@ -74,6 +73,12 @@ 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,

static/js/modules/chatgpt-assistant.js

@@ -11,6 +11,62 @@ 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;
+        }
     }
 
     /**
@@ -24,7 +80,16 @@ class ChatGPTAssistant {
         this.setupEventListeners();
         
         // Ersten Willkommensnachricht anzeigen
-        this.addMessage("assistant", "Frage den KI-Assistenten");
+        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!');
     }
 
     /**
@@ -45,7 +110,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 sm: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 md:w-96 max-h-0 opacity-0';
         
         // Chat-Header
         const header = document.createElement('div');
@@ -53,7 +118,7 @@ class ChatGPTAssistant {
         header.innerHTML = `
             <div class="flex items-center">
                 <i class="fas fa-robot mr-2"></i>
-                <span>KI-Assistent</span>
+                <span>KI-Assistent (4o-mini)</span>
             </div>
             <button id="assistant-close" class="text-white hover:text-gray-200">
                 <i class="fas fa-times"></i>
@@ -63,7 +128,12 @@ class ChatGPTAssistant {
         // Chat-Verlauf
         this.chatHistory = document.createElement('div');
         this.chatHistory.id = 'assistant-history';
-        this.chatHistory.className = 'p-3 overflow-y-auto max-h-80 space-y-3';
+        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';
         
         // Chat-Eingabe
         const inputContainer = document.createElement('div');
@@ -71,7 +141,7 @@ class ChatGPTAssistant {
         
         this.inputField = document.createElement('input');
         this.inputField.type = 'text';
-        this.inputField.placeholder = 'Frage den KI-Assistenten';
+        this.inputField.placeholder = 'Stelle eine Frage zur Wissensdatenbank...';
         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');
@@ -85,6 +155,7 @@ class ChatGPTAssistant {
         
         chatContainer.appendChild(header);
         chatContainer.appendChild(this.chatHistory);
+        chatContainer.appendChild(this.suggestionArea);
         chatContainer.appendChild(inputContainer);
         
         this.container.appendChild(toggleButton);
@@ -100,22 +171,40 @@ class ChatGPTAssistant {
     setupEventListeners() {
         // Toggle-Button
         const toggleButton = document.getElementById('assistant-toggle');
-        toggleButton.addEventListener('click', () => this.toggleAssistant());
+        if (toggleButton) {
+            toggleButton.addEventListener('click', () => this.toggleAssistant());
+        }
         
         // Schließen-Button
         const closeButton = document.getElementById('assistant-close');
-        closeButton.addEventListener('click', () => this.toggleAssistant(false));
+        if (closeButton) {
+            closeButton.addEventListener('click', () => this.toggleAssistant(false));
+        }
         
         // Senden-Button
         const sendButton = document.getElementById('assistant-send');
-        sendButton.addEventListener('click', () => this.sendMessage());
+        if (sendButton) {
+            sendButton.addEventListener('click', () => this.sendMessage());
+        }
         
         // Enter-Taste im Eingabefeld
-        this.inputField.addEventListener('keyup', (e) => {
-            if (e.key === 'Enter') {
-                this.sendMessage();
-            }
-        });
+        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();
+                }
+            });
+        }
     }
 
     /**
@@ -124,14 +213,21 @@ 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-96', 'opacity-100');
-            this.inputField.focus();
+            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');
+            }
         } else {
-            chatContainer.classList.remove('max-h-96', 'opacity-100');
+            chatContainer.classList.remove('max-h-[32rem]', 'opacity-100');
             chatContainer.classList.add('max-h-0', 'opacity-0');
         }
     }
@@ -153,22 +249,144 @@ 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%]';
-        bubble.textContent = text;
+        
+        // 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;
         
         messageEl.appendChild(bubble);
-        this.chatHistory.appendChild(messageEl);
         
-        // Scroll zum Ende des Verlaufs
-        this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
+        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');
+        }
     }
 
     /**
      * 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);
         
@@ -180,6 +398,7 @@ 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',
@@ -189,36 +408,118 @@ class ChatGPTAssistant {
                 body: JSON.stringify({
                     messages: this.messages
                 }),
+                cache: 'no-cache', // Kein Cache verwenden
+                credentials: 'same-origin' // Cookies senden
             });
             
+            // Ladeindikator entfernen
+            this.removeLoadingIndicator();
+            
             if (!response.ok) {
-                throw new Error('Netzwerkfehler oder Serverproblem');
+                throw new Error(`Serverfehler: ${response.status} ${response.statusText}`);
             }
             
             const data = await response.json();
-            
-            // Ladeindikator entfernen
-            this.removeLoadingIndicator();
+            console.log('Antwort erhalten:', data);
             
             // Antwort anzeigen
-            this.addMessage('assistant', data.response);
+            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');
+            }
         } catch (error) {
             console.error('Fehler bei der Kommunikation mit dem Assistenten:', error);
             
-            // Ladeindikator entfernen
+            // Ladeindikator entfernen, falls noch vorhanden
             this.removeLoadingIndicator();
             
-            // 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.');
+            // 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
+            }
         } 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';
@@ -232,49 +533,40 @@ 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 loadingEl = document.getElementById('assistant-loading');
-        if (loadingEl) {
-            loadingEl.remove();
+        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();
         }
     }
 }
 
-// Exportiere die Klasse für die Verwendung in anderen Modulen
-export default ChatGPTAssistant; 
+// Mache die Klasse global verfügbar
+window.ChatGPTAssistant = ChatGPTAssistant; 

static/js/modules/cyber-network-init.js

@@ -1,95 +0,0 @@
-/**
- * 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;
-} 

static/js/modules/cyber-network.js

@@ -1,240 +0,0 @@
-/**
- * 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; 

static/js/modules/mindmap-page.js

@@ -3,12 +3,18 @@
  * Spezifische Funktionen für die Mindmap-Seite
  */
 
+// Füge das Modul zum globalen MindMap-Objekt hinzu
+if (!window.MindMap) {
+  window.MindMap = {};
+}
+
+// Registriere den Initialisierer im MindMap-Objekt
+if (window.MindMap) {
+  window.MindMap.pageInitializers = window.MindMap.pageInitializers || {};
+  window.MindMap.pageInitializers.mindmap = initMindmapPage;
+}
+
 document.addEventListener('DOMContentLoaded', function() {
-  // Registriere den Initialisierer im MindMap-Objekt
-  if (window.MindMap) {
-    window.MindMap.pageInitializers.mindmap = initMindmapPage;
-  }
-  
   // Prüfe, ob wir auf der Mindmap-Seite sind und initialisiere
   if (document.body.dataset.page === 'mindmap') {
     initMindmapPage();
@@ -19,6 +25,10 @@ document.addEventListener('DOMContentLoaded', function() {
  * Initialisiert die Mindmap-Seite
  */
 function initMindmapPage() {
+  console.log('Mindmap-Seite Initialisierung startet...');
+  console.log('D3 Bibliothek verfügbar:', typeof d3 !== 'undefined');
+  console.log('MindMapVisualization verfügbar:', typeof MindMapVisualization !== 'undefined');
+  
   const mindmapContainer = document.getElementById('mindmap-container');
   const thoughtsContainer = document.getElementById('thoughts-container');
   
@@ -26,6 +36,7 @@ function initMindmapPage() {
     console.error('Mindmap-Container nicht gefunden!');
     return;
   }
+  console.log('Mindmap-Container gefunden:', mindmapContainer);
 
   // Prüfe, ob D3.js geladen ist
   if (typeof d3 === 'undefined') {
@@ -41,17 +52,47 @@ function initMindmapPage() {
     return;
   }
   
+  // Prüfe, ob MindMapVisualization definiert ist
+  if (typeof MindMapVisualization === 'undefined') {
+    console.error('MindMapVisualization-Klasse ist nicht definiert!');
+    mindmapContainer.innerHTML = `
+      <div class="glass-effect p-6 text-center">
+        <div class="text-red-500 mb-4">
+          <i class="fa-solid fa-triangle-exclamation text-4xl"></i>
+        </div>
+        <p class="text-xl">MindMap-Visualisierung konnte nicht geladen werden. Bitte laden Sie die Seite neu.</p>
+      </div>
+    `;
+    return;
+  }
+  
   // Erstelle die Mindmap-Visualisierung
-  const mindmap = new MindMapVisualization('#mindmap-container', {
-    height: 600,
-    onNodeClick: handleNodeClick
-  });
-  
-  // Globale Referenz für die Zoom-Buttons erstellen
-  window.mindmapInstance = mindmap;
-  
-  // Lade die Mindmap-Daten
-  mindmap.loadData();
+  try {
+    console.log('Versuche, MindMapVisualization zu erstellen...');
+    const mindmap = new MindMapVisualization('#mindmap-container', {
+      height: 600,
+      onNodeClick: handleNodeClick
+    });
+    
+    // Globale Referenz für die Zoom-Buttons erstellen
+    window.mindmapInstance = mindmap;
+    
+    // Lade die Mindmap-Daten
+    mindmap.loadData();
+    console.log('MindMapVisualization erfolgreich erstellt und geladen');
+  } catch (error) {
+    console.error('Fehler beim Erstellen der MindMapVisualization:', error);
+    mindmapContainer.innerHTML = `
+      <div class="glass-effect p-6 text-center">
+        <div class="text-red-500 mb-4">
+          <i class="fa-solid fa-triangle-exclamation text-4xl"></i>
+        </div>
+        <p class="text-xl">Fehler beim Erstellen der Mindmap-Visualisierung:</p>
+        <p class="text-md mt-2">${error.message}</p>
+      </div>
+    `;
+    return;
+  }
   
   // Suchfunktion für die Mindmap
   const searchInput = document.getElementById('mindmap-search');
@@ -426,13 +467,13 @@ function initMindmapPage() {
         
         // Erfolgsbenachrichtigung
         if (window.MindMap && window.MindMap.showNotification) {
-          MindMap.showNotification('Gedanke erfolgreich gespeichert.', 'success');
+          window.MindMap.showNotification('Gedanke erfolgreich gespeichert.', 'success');
         }
         
       } catch (error) {
         console.error('Fehler beim Speichern:', error);
         if (window.MindMap && window.MindMap.showNotification) {
-          MindMap.showNotification('Fehler beim Speichern des Gedankens.', 'error');
+          window.MindMap.showNotification('Fehler beim Speichern des Gedankens.', 'error');
         }
       }
     });
@@ -448,7 +489,7 @@ function initMindmapPage() {
 }
 
 /**
- * Zeigt die Kommentare zu einem Gedanken an
+ * Füge globale Funktionen für das Mindmap-Objekt hinzu
  */
 window.showComments = async function(thoughtId) {
   try {
@@ -470,7 +511,11 @@ window.showComments = async function(thoughtId) {
     
   } catch (error) {
     console.error('Fehler beim Laden der Kommentare:', error);
-    MindMap.showNotification('Fehler beim Laden der Kommentare.', 'error');
+    if (window.MindMap && window.MindMap.showNotification) {
+      window.MindMap.showNotification('Fehler beim Laden der Kommentare.', 'error');
+    } else {
+      alert('Fehler beim Laden der Kommentare.');
+    }
   }
 };
 
@@ -497,7 +542,11 @@ window.showRelations = async function(thoughtId) {
     
   } catch (error) {
     console.error('Fehler beim Laden der Beziehungen:', error);
-    MindMap.showNotification('Fehler beim Laden der Beziehungen.', 'error');
+    if (window.MindMap && window.MindMap.showNotification) {
+      window.MindMap.showNotification('Fehler beim Laden der Beziehungen.', 'error');
+    } else {
+      alert('Fehler beim Laden der Beziehungen.');
+    }
   }
 };
 

static/js/modules/mindmap.js

@@ -163,7 +163,7 @@ class MindMapVisualization {
       // API-Aufruf mit kürzerem Timeout im Hintergrund durchführen
       try {
         const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 Sekunden Timeout - reduced from 10
+        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 Sekunden Timeout
         
         const response = await fetch('/api/mindmap', { 
           signal: controller.signal,
@@ -175,8 +175,55 @@ class MindMapVisualization {
         clearTimeout(timeoutId);
         
         if (!response.ok) {
-          console.warn(`HTTP Fehler: ${response.status}, verwende Standarddaten`);
-          return; // Keep using default data
+          console.warn(`HTTP Fehler: ${response.status}, versuche erneute Verbindung`);
+          
+          // Bei Verbindungsfehler versuchen, die Verbindung neu herzustellen
+          const retryResponse = await fetch('/api/refresh-mindmap', {
+            headers: {
+              'Cache-Control': 'no-cache', 
+              'Pragma': 'no-cache'
+            }
+          });
+          
+          if (!retryResponse.ok) {
+            throw new Error(`Retry failed with status: ${retryResponse.status}`);
+          }
+          
+          const retryData = await retryResponse.json();
+          
+          if (!retryData.success || !retryData.nodes || retryData.nodes.length === 0) {
+            console.warn('Keine Mindmap-Daten nach Neuversuch, verwende weiterhin Standard-Daten.');
+            return; // Keep using default data
+          }
+          
+          // Flache Liste von Knoten und Verbindungen erstellen
+          this.nodes = [];
+          this.links = [];
+          
+          // Knoten direkt übernehmen
+          retryData.nodes.forEach(node => {
+            this.nodes.push({
+              id: node.id,
+              name: node.name,
+              description: node.description || '',
+              thought_count: node.thought_count || 0,
+              color: this.generateColorFromString(node.name),
+            });
+            
+            // Verbindungen hinzufügen
+            if (node.connections && node.connections.length > 0) {
+              node.connections.forEach(conn => {
+                this.links.push({
+                  source: node.id,
+                  target: conn.target
+                });
+              });
+            }
+          });
+          
+          // Visualisierung aktualisieren mit den tatsächlichen Daten
+          this.updateVisualization();
+          return;
         }
         
         const data = await response.json();

static/network-animation.js

@@ -1,88 +0,0 @@
-// 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);
-}); 

static/network-background.js

@@ -1,232 +0,0 @@
-// 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); 

static/neural-network-background.js

@@ -0,0 +1,813 @@
+/**
+ * Neural Network Background Animation
+ * Modern, darker, mystical theme using WebGL
+ * Subtle flowing network aesthetic
+ */
+
+class NeuralNetworkBackground {
+  constructor() {
+    // Canvas setup
+    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'; // Ensure it's behind content but visible
+    this.canvas.style.pointerEvents = 'none';
+    this.canvas.style.opacity = '1'; // Force visibility
+    
+    // If canvas already exists, remove it first
+    const existingCanvas = document.getElementById('neural-network-background');
+    if (existingCanvas) {
+      existingCanvas.remove();
+    }
+    
+    // Append to body as first child to ensure it's behind everything
+    if (document.body.firstChild) {
+      document.body.insertBefore(this.canvas, document.body.firstChild);
+    } else {
+      document.body.appendChild(this.canvas);
+    }
+    
+    // WebGL context
+    this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl');
+    if (!this.gl) {
+      console.warn('WebGL not supported, falling back to canvas rendering');
+      this.gl = null;
+      this.ctx = this.canvas.getContext('2d');
+      this.useWebGL = false;
+    } else {
+      this.useWebGL = true;
+    }
+    
+    // Animation properties
+    this.nodes = [];
+    this.connections = [];
+    this.flows = []; // Flow animations along connections
+    this.animationFrameId = null;
+    this.isDarkMode = true; // Always use dark mode for the background
+    
+    // Colors - Updated to be more subtle
+    this.darkModeColors = {
+      background: '#050a14', // Darker blue-black background
+      nodeColor: '#4a5568',  // Darker nodes for subtlety
+      nodePulse: '#718096',  // Subtle blue pulse
+      connectionColor: '#2d3748', // Darker connections
+      flowColor: '#4a88ff80'   // Semi-transparent flow highlight
+    };
+    
+    this.lightModeColors = {
+      background: '#f9fafb',
+      nodeColor: '#7c3aed',
+      nodePulse: '#8b5cf6',
+      connectionColor: '#a78bfa',
+      flowColor: '#c4b5fd'
+    };
+    
+    // Config - Updated to be more subtle, efficient, and elegant
+    this.config = {
+      nodeCount: 70,             // Reduced node count for better performance
+      nodeSize: 0.6,             // Smaller nodes for subtlety
+      nodeVariation: 0.3,        // Less variation for uniformity
+      connectionDistance: 150,   // Shorter connections for cleaner look
+      connectionOpacity: 0.15,   // More subtle connections
+      animationSpeed: 0.04,      // Slower, more elegant movement
+      pulseSpeed: 0.002,         // Very slow pulse for subtlety
+      flowSpeed: 0.4,            // Slower flow animations
+      flowDensity: 0.0008,       // Less frequent flow animations
+      flowLength: 0.15           // Shorter flow animations
+    };
+    
+    // Initialize
+    this.init();
+    
+    // Event listeners
+    window.addEventListener('resize', this.resizeCanvas.bind(this));
+    document.addEventListener('darkModeToggled', (event) => {
+      this.isDarkMode = event.detail.isDark;
+    });
+    
+    // Log that the background is initialized
+    console.log('Neural Network Background initialized');
+  }
+  
+  init() {
+    this.resizeCanvas();
+    
+    if (this.useWebGL) {
+      this.initWebGL();
+    }
+    
+    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.useWebGL) {
+      this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+    } else if (this.ctx) {
+      this.ctx.scale(pixelRatio, pixelRatio);
+    }
+    
+    // Recalculate node positions after resize
+    if (this.nodes.length) {
+      this.createNodes();
+      this.createConnections();
+    }
+  }
+  
+  initWebGL() {
+    // Vertex shader
+    const vsSource = `
+      attribute vec2 aVertexPosition;
+      attribute float aPointSize;
+      uniform vec2 uResolution;
+      
+      void main() {
+        // Convert from pixel to clip space
+        vec2 position = (aVertexPosition / uResolution) * 2.0 - 1.0;
+        // Flip Y coordinate
+        position.y = -position.y;
+        
+        gl_Position = vec4(position, 0, 1);
+        gl_PointSize = aPointSize;
+      }
+    `;
+    
+    // Fragment shader - Softer glow effect
+    const fsSource = `
+      precision mediump float;
+      uniform vec4 uColor;
+      
+      void main() {
+        float distance = length(gl_PointCoord - vec2(0.5, 0.5));
+        
+        // Softer glow with smoother falloff
+        float alpha = 1.0 - smoothstep(0.1, 0.5, distance);
+        alpha = pow(alpha, 1.5); // Make the glow even softer
+        
+        gl_FragColor = vec4(uColor.rgb, uColor.a * alpha);
+      }
+    `;
+    
+    // Initialize shaders
+    const vertexShader = this.loadShader(this.gl.VERTEX_SHADER, vsSource);
+    const fragmentShader = this.loadShader(this.gl.FRAGMENT_SHADER, fsSource);
+    
+    // Create shader program
+    this.shaderProgram = this.gl.createProgram();
+    this.gl.attachShader(this.shaderProgram, vertexShader);
+    this.gl.attachShader(this.shaderProgram, fragmentShader);
+    this.gl.linkProgram(this.shaderProgram);
+    
+    if (!this.gl.getProgramParameter(this.shaderProgram, this.gl.LINK_STATUS)) {
+      console.error('Unable to initialize the shader program: ' + 
+                   this.gl.getProgramInfoLog(this.shaderProgram));
+      return;
+    }
+    
+    // Get attribute and uniform locations
+    this.programInfo = {
+      program: this.shaderProgram,
+      attribLocations: {
+        vertexPosition: this.gl.getAttribLocation(this.shaderProgram, 'aVertexPosition'),
+        pointSize: this.gl.getAttribLocation(this.shaderProgram, 'aPointSize')
+      },
+      uniformLocations: {
+        resolution: this.gl.getUniformLocation(this.shaderProgram, 'uResolution'),
+        color: this.gl.getUniformLocation(this.shaderProgram, 'uColor')
+      }
+    };
+    
+    // Create buffers
+    this.positionBuffer = this.gl.createBuffer();
+    this.sizeBuffer = this.gl.createBuffer();
+    
+    // Set clear color for WebGL context
+    const bgColor = this.hexToRgb(this.darkModeColors.background);
+    
+    this.gl.clearColor(bgColor.r/255, bgColor.g/255, bgColor.b/255, 1.0);
+  }
+  
+  loadShader(type, source) {
+    const shader = this.gl.createShader(type);
+    this.gl.shaderSource(shader, source);
+    this.gl.compileShader(shader);
+    
+    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+      console.error('An error occurred compiling the shaders: ' + 
+                  this.gl.getShaderInfoLog(shader));
+      this.gl.deleteShader(shader);
+      return null;
+    }
+    
+    return shader;
+  }
+  
+  createNodes() {
+    this.nodes = [];
+    const width = this.canvas.width / (window.devicePixelRatio || 1);
+    const height = this.canvas.height / (window.devicePixelRatio || 1);
+    
+    // Create nodes with random positions and properties
+    for (let i = 0; i < this.config.nodeCount; i++) {
+      const node = {
+        x: Math.random() * width,
+        y: Math.random() * height,
+        size: this.config.nodeSize + Math.random() * this.config.nodeVariation,
+        speed: {
+          x: (Math.random() - 0.5) * this.config.animationSpeed,
+          y: (Math.random() - 0.5) * this.config.animationSpeed
+        },
+        pulsePhase: Math.random() * Math.PI * 2, // Random starting phase
+        connections: []
+      };
+      
+      this.nodes.push(node);
+    }
+  }
+  
+  createConnections() {
+    this.connections = [];
+    this.flows = []; // Reset flows
+    
+    // Create connections between nearby nodes
+    for (let i = 0; i < this.nodes.length; i++) {
+      const nodeA = this.nodes[i];
+      nodeA.connections = [];
+      
+      for (let j = i + 1; j < this.nodes.length; j++) {
+        const nodeB = this.nodes[j];
+        const dx = nodeB.x - nodeA.x;
+        const dy = nodeB.y - nodeA.y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < this.config.connectionDistance) {
+          // Create connection
+          const connection = {
+            from: i,
+            to: j,
+            distance: distance,
+            opacity: Math.max(0, 1 - distance / this.config.connectionDistance) * this.config.connectionOpacity,
+            hasFlow: false // Each connection can have a flow
+          };
+          
+          this.connections.push(connection);
+          nodeA.connections.push(j);
+          nodeB.connections.push(i);
+        }
+      }
+    }
+  }
+  
+  startAnimation() {
+    this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
+  }
+  
+  animate() {
+    // Update nodes
+    const width = this.canvas.width / (window.devicePixelRatio || 1);
+    const height = this.canvas.height / (window.devicePixelRatio || 1);
+    
+    // Update node positions - slower, more flowing movement
+    for (let i = 0; i < this.nodes.length; i++) {
+      const node = this.nodes[i];
+      
+      // Move node with slight randomness for organic feel
+      node.speed.x += (Math.random() - 0.5) * 0.001;
+      node.speed.y += (Math.random() - 0.5) * 0.001;
+      
+      // Dampen speeds for stability
+      node.speed.x *= 0.99;
+      node.speed.y *= 0.99;
+      
+      // Apply speed limits
+      node.speed.x = Math.max(-this.config.animationSpeed, Math.min(this.config.animationSpeed, node.speed.x));
+      node.speed.y = Math.max(-this.config.animationSpeed, Math.min(this.config.animationSpeed, node.speed.y));
+      
+      // Move node
+      node.x += node.speed.x;
+      node.y += node.speed.y;
+      
+      // Boundary check with smooth bounce
+      if (node.x < 0 || node.x > width) {
+        node.speed.x *= -0.8; // Softer bounce
+        node.x = Math.max(0, Math.min(node.x, width));
+      }
+      
+      if (node.y < 0 || node.y > height) {
+        node.speed.y *= -0.8; // Softer bounce
+        node.y = Math.max(0, Math.min(node.y, height));
+      }
+      
+      // Update pulse phase
+      node.pulsePhase += this.config.pulseSpeed;
+      if (node.pulsePhase > Math.PI * 2) {
+        node.pulsePhase -= Math.PI * 2;
+      }
+    }
+    
+    // Update flows
+    this.updateFlows();
+    
+    // Occasionally create new flows along connections
+    if (Math.random() < this.config.flowDensity) {
+      this.createNewFlow();
+    }
+    
+    // Recalculate connections occasionally for a living network
+    if (Math.random() < 0.01) { // Only recalculate 1% of the time for performance
+      this.createConnections();
+    }
+    
+    // Render
+    if (this.useWebGL) {
+      this.renderWebGL();
+    } else {
+      this.renderCanvas();
+    }
+    
+    // Continue animation
+    this.animationFrameId = requestAnimationFrame(this.animate.bind(this));
+  }
+  
+  // New method to update flow animations
+  updateFlows() {
+    // Update existing flows
+    for (let i = this.flows.length - 1; i >= 0; i--) {
+      const flow = this.flows[i];
+      flow.progress += this.config.flowSpeed / flow.connection.distance;
+      
+      // Remove completed flows
+      if (flow.progress > 1.0) {
+        this.flows.splice(i, 1);
+      }
+    }
+  }
+  
+  // New method to create flow animations
+  createNewFlow() {
+    if (this.connections.length === 0) return;
+    
+    // Select a random connection with preference for more connected nodes
+    let connectionIdx = Math.floor(Math.random() * this.connections.length);
+    let attempts = 0;
+    
+    // Try to find a connection with more connected nodes
+    while (attempts < 5) {
+      const testIdx = Math.floor(Math.random() * this.connections.length);
+      const testConn = this.connections[testIdx];
+      const fromNode = this.nodes[testConn.from];
+      
+      if (fromNode.connections.length > 2) {
+        connectionIdx = testIdx;
+        break;
+      }
+      attempts++;
+    }
+    
+    const connection = this.connections[connectionIdx];
+    
+    // Create a new flow along this connection
+    this.flows.push({
+      connection: connection,
+      progress: 0,
+      direction: Math.random() > 0.5, // Randomly decide direction
+      length: this.config.flowLength + Math.random() * 0.1 // Slightly vary lengths
+    });
+  }
+  
+  renderWebGL() {
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    
+    const width = this.canvas.width / (window.devicePixelRatio || 1);
+    const height = this.canvas.height / (window.devicePixelRatio || 1);
+    
+    // Select shader program
+    this.gl.useProgram(this.programInfo.program);
+    
+    // Set resolution uniform
+    this.gl.uniform2f(this.programInfo.uniformLocations.resolution, width, height);
+    
+    // Draw connections first (behind nodes)
+    this.renderConnectionsWebGL();
+    
+    // Draw flows on top of connections
+    this.renderFlowsWebGL();
+    
+    // Draw nodes
+    this.renderNodesWebGL();
+  }
+  
+  renderNodesWebGL() {
+    // Prepare node positions for WebGL
+    const positions = new Float32Array(this.nodes.length * 2);
+    const sizes = new Float32Array(this.nodes.length);
+    
+    for (let i = 0; i < this.nodes.length; i++) {
+      const node = this.nodes[i];
+      positions[i * 2] = node.x;
+      positions[i * 2 + 1] = node.y;
+      
+      // Size with subtle pulse effect
+      const pulse = Math.sin(node.pulsePhase) * 0.2 + 1;
+      sizes[i] = node.size * pulse * (node.connections.length > 3 ? 1.3 : 1);
+    }
+    
+    // Bind position buffer
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
+    this.gl.vertexAttribPointer(
+      this.programInfo.attribLocations.vertexPosition,
+      2,              // components per vertex
+      this.gl.FLOAT,  // data type
+      false,          // normalize
+      0,              // stride
+      0               // offset
+    );
+    this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
+    
+    // Bind size buffer
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.sizeBuffer);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, sizes, this.gl.STATIC_DRAW);
+    this.gl.vertexAttribPointer(
+      this.programInfo.attribLocations.pointSize,
+      1,              // components per vertex
+      this.gl.FLOAT,  // data type
+      false,          // normalize
+      0,              // stride
+      0               // offset
+    );
+    this.gl.enableVertexAttribArray(this.programInfo.attribLocations.pointSize);
+    
+    // Set node color - more subtle
+    const colorObj = this.isDarkMode ? this.darkModeColors : this.lightModeColors;
+    const nodeColor = this.hexToRgb(colorObj.nodeColor);
+    this.gl.uniform4f(
+      this.programInfo.uniformLocations.color,
+      nodeColor.r / 255,
+      nodeColor.g / 255,
+      nodeColor.b / 255,
+      0.7  // Lower opacity for subtlety
+    );
+    
+    // Draw nodes
+    this.gl.enable(this.gl.BLEND);
+    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);  // Additive blending for glow
+    this.gl.drawArrays(this.gl.POINTS, 0, this.nodes.length);
+  }
+  
+  renderConnectionsWebGL() {
+    // For each connection, draw a line
+    for (const connection of this.connections) {
+      const fromNode = this.nodes[connection.from];
+      const toNode = this.nodes[connection.to];
+      
+      // Line positions
+      const positions = new Float32Array([
+        fromNode.x, fromNode.y,
+        toNode.x, toNode.y
+      ]);
+      
+      // Bind position buffer
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+      this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
+      this.gl.vertexAttribPointer(
+        this.programInfo.attribLocations.vertexPosition,
+        2,              // components per vertex
+        this.gl.FLOAT,  // data type
+        false,          // normalize
+        0,              // stride
+        0               // offset
+      );
+      this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
+      
+      // Disable point size attribute for lines
+      this.gl.disableVertexAttribArray(this.programInfo.attribLocations.pointSize);
+      
+      // Set line color with connection opacity - darker, more subtle
+      const colorObj = this.isDarkMode ? this.darkModeColors : this.lightModeColors;
+      const lineColor = this.hexToRgb(colorObj.connectionColor);
+      this.gl.uniform4f(
+        this.programInfo.uniformLocations.color,
+        lineColor.r / 255,
+        lineColor.g / 255,
+        lineColor.b / 255,
+        connection.opacity * 0.8  // Reduced for subtlety
+      );
+      
+      // Draw the line
+      this.gl.enable(this.gl.BLEND);
+      this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
+      this.gl.lineWidth(1);
+      this.gl.drawArrays(this.gl.LINES, 0, 2);
+    }
+  }
+  
+  // New method to render the flowing animations
+  renderFlowsWebGL() {
+    // For each flow, draw a segment along its connection
+    for (const flow of this.flows) {
+      const connection = flow.connection;
+      const fromNode = this.nodes[connection.from];
+      const toNode = this.nodes[connection.to];
+      
+      // Calculate flow position
+      const startProgress = flow.progress;
+      const endProgress = Math.min(1, startProgress + flow.length);
+      
+      // If flow hasn't started yet or has finished
+      if (startProgress >= 1 || endProgress <= 0) continue;
+      
+      // Calculate actual positions
+      const direction = flow.direction ? 1 : -1;
+      let p1, p2;
+      
+      if (direction > 0) {
+        p1 = {
+          x: fromNode.x + (toNode.x - fromNode.x) * startProgress,
+          y: fromNode.y + (toNode.y - fromNode.y) * startProgress
+        };
+        p2 = {
+          x: fromNode.x + (toNode.x - fromNode.x) * endProgress,
+          y: fromNode.y + (toNode.y - fromNode.y) * endProgress
+        };
+      } else {
+        p1 = {
+          x: toNode.x + (fromNode.x - toNode.x) * startProgress,
+          y: toNode.y + (fromNode.y - toNode.y) * startProgress
+        };
+        p2 = {
+          x: toNode.x + (fromNode.x - toNode.x) * endProgress,
+          y: toNode.y + (fromNode.y - toNode.y) * endProgress
+        };
+      }
+      
+      // Line positions for the flow
+      const positions = new Float32Array([
+        p1.x, p1.y,
+        p2.x, p2.y
+      ]);
+      
+      // Bind position buffer
+      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+      this.gl.bufferData(this.gl.ARRAY_BUFFER, positions, this.gl.STATIC_DRAW);
+      this.gl.vertexAttribPointer(
+        this.programInfo.attribLocations.vertexPosition,
+        2,              // components per vertex
+        this.gl.FLOAT,  // data type
+        false,          // normalize
+        0,              // stride
+        0               // offset
+      );
+      this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition);
+      
+      // Disable point size attribute for lines
+      this.gl.disableVertexAttribArray(this.programInfo.attribLocations.pointSize);
+      
+      // Fade the flow at the beginning and end
+      const fadeEdge = 0.2;
+      const fadeOpacity = Math.min(
+        startProgress / fadeEdge,
+        (1 - endProgress) / fadeEdge,
+        1
+      );
+      
+      // Flow color - subtle glow
+      const colorObj = this.isDarkMode ? this.darkModeColors : this.lightModeColors;
+      const flowColor = this.hexToRgb(colorObj.flowColor);
+      this.gl.uniform4f(
+        this.programInfo.uniformLocations.color,
+        flowColor.r / 255,
+        flowColor.g / 255,
+        flowColor.b / 255,
+        0.4 * fadeOpacity // Subtle flow opacity
+      );
+      
+      // Draw the flow line
+      this.gl.enable(this.gl.BLEND);
+      this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
+      this.gl.lineWidth(1.5); // Slightly thicker for visibility
+      this.gl.drawArrays(this.gl.LINES, 0, 2);
+    }
+  }
+  
+  renderCanvas() {
+    // Clear canvas
+    const width = this.canvas.width / (window.devicePixelRatio || 1);
+    const height = this.canvas.height / (window.devicePixelRatio || 1);
+    
+    this.ctx.clearRect(0, 0, width, height);
+    
+    // Set background
+    const backgroundColor = this.isDarkMode 
+      ? this.darkModeColors.background 
+      : this.lightModeColors.background;
+      
+    this.ctx.fillStyle = backgroundColor;
+    this.ctx.fillRect(0, 0, width, height);
+    
+    // Draw connections
+    const connectionColor = this.isDarkMode 
+      ? this.darkModeColors.connectionColor 
+      : this.lightModeColors.connectionColor;
+      
+    for (const connection of this.connections) {
+      const fromNode = this.nodes[connection.from];
+      const toNode = this.nodes[connection.to];
+      
+      this.ctx.beginPath();
+      this.ctx.moveTo(fromNode.x, fromNode.y);
+      this.ctx.lineTo(toNode.x, toNode.y);
+      
+      const rgbColor = this.hexToRgb(connectionColor);
+      this.ctx.strokeStyle = `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, ${connection.opacity})`;
+      this.ctx.stroke();
+    }
+    
+    // Draw flows
+    this.renderFlowsCanvas();
+    
+    // Draw nodes
+    const nodeColor = this.isDarkMode 
+      ? this.darkModeColors.nodeColor 
+      : this.lightModeColors.nodeColor;
+      
+    const nodePulse = this.isDarkMode 
+      ? this.darkModeColors.nodePulse 
+      : this.lightModeColors.nodePulse;
+      
+    for (const node of this.nodes) {
+      // Node with subtle glow effect
+      const pulse = Math.sin(node.pulsePhase) * 0.2 + 1;
+      const nodeSize = node.size * pulse * (node.connections.length > 3 ? 1.3 : 1);
+      
+      // Glow effect
+      const glow = this.ctx.createRadialGradient(
+        node.x, node.y, 0,
+        node.x, node.y, nodeSize * 2
+      );
+      
+      const rgbNodeColor = this.hexToRgb(nodeColor);
+      const rgbPulseColor = this.hexToRgb(nodePulse);
+      
+      glow.addColorStop(0, `rgba(${rgbPulseColor.r}, ${rgbPulseColor.g}, ${rgbPulseColor.b}, 0.6)`);
+      glow.addColorStop(0.5, `rgba(${rgbNodeColor.r}, ${rgbNodeColor.g}, ${rgbNodeColor.b}, 0.2)`);
+      glow.addColorStop(1, `rgba(${rgbNodeColor.r}, ${rgbNodeColor.g}, ${rgbNodeColor.b}, 0)`);
+      
+      this.ctx.beginPath();
+      this.ctx.arc(node.x, node.y, nodeSize * 2, 0, Math.PI * 2);
+      this.ctx.fillStyle = glow;
+      this.ctx.fill();
+      
+      // Main node
+      this.ctx.beginPath();
+      this.ctx.arc(node.x, node.y, nodeSize, 0, Math.PI * 2);
+      this.ctx.fillStyle = nodeColor;
+      this.ctx.fill();
+    }
+  }
+  
+  // New method to render flows in Canvas mode
+  renderFlowsCanvas() {
+    if (!this.ctx) return;
+    
+    const flowColor = this.isDarkMode 
+      ? this.darkModeColors.flowColor 
+      : this.lightModeColors.flowColor;
+    
+    const rgbFlowColor = this.hexToRgb(flowColor);
+    
+    for (const flow of this.flows) {
+      const connection = flow.connection;
+      const fromNode = this.nodes[connection.from];
+      const toNode = this.nodes[connection.to];
+      
+      // Calculate flow position
+      const startProgress = flow.progress;
+      const endProgress = Math.min(1, startProgress + flow.length);
+      
+      // If flow hasn't started yet or has finished
+      if (startProgress >= 1 || endProgress <= 0) continue;
+      
+      // Calculate actual positions
+      const direction = flow.direction ? 1 : -1;
+      let p1, p2;
+      
+      if (direction > 0) {
+        p1 = {
+          x: fromNode.x + (toNode.x - fromNode.x) * startProgress,
+          y: fromNode.y + (toNode.y - fromNode.y) * startProgress
+        };
+        p2 = {
+          x: fromNode.x + (toNode.x - fromNode.x) * endProgress,
+          y: fromNode.y + (toNode.y - fromNode.y) * startProgress
+        };
+      } else {
+        p1 = {
+          x: toNode.x + (fromNode.x - toNode.x) * startProgress,
+          y: toNode.y + (fromNode.y - toNode.y) * startProgress
+        };
+        p2 = {
+          x: toNode.x + (fromNode.x - toNode.x) * endProgress,
+          y: toNode.y + (fromNode.y - toNode.y) * endProgress
+        };
+      }
+      
+      // Fade the flow at the beginning and end
+      const fadeEdge = 0.2;
+      const fadeOpacity = Math.min(
+        startProgress / fadeEdge,
+        (1 - endProgress) / fadeEdge,
+        1
+      );
+      
+      // Draw flow
+      this.ctx.beginPath();
+      this.ctx.moveTo(p1.x, p1.y);
+      this.ctx.lineTo(p2.x, p2.y);
+      this.ctx.strokeStyle = `rgba(${rgbFlowColor.r}, ${rgbFlowColor.g}, ${rgbFlowColor.b}, ${0.4 * fadeOpacity})`;
+      this.ctx.lineWidth = 1.5;
+      this.ctx.stroke();
+    }
+  }
+  
+  // Helper method to convert hex to RGB
+  hexToRgb(hex) {
+    // Remove # if present
+    hex = hex.replace(/^#/, '');
+    
+    // Handle rgba hex format
+    let alpha = 1;
+    if (hex.length === 8) {
+      alpha = parseInt(hex.slice(6, 8), 16) / 255;
+      hex = hex.slice(0, 6);
+    }
+    
+    // Parse hex values
+    const bigint = parseInt(hex, 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    
+    return { r, g, b, a: alpha };
+  }
+  
+  // Cleanup method
+  destroy() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+    }
+    
+    window.removeEventListener('resize', this.resizeCanvas.bind(this));
+    
+    if (this.canvas && this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas);
+    }
+    
+    if (this.gl) {
+      // Clean up WebGL resources
+      this.gl.deleteBuffer(this.positionBuffer);
+      this.gl.deleteBuffer(this.sizeBuffer);
+      this.gl.deleteProgram(this.shaderProgram);
+    }
+  }
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  // Short delay to ensure DOM is fully loaded
+  setTimeout(() => {
+    if (!window.neuralNetworkBackground) {
+      console.log('Creating Neural Network Background');
+      window.neuralNetworkBackground = new NeuralNetworkBackground();
+    }
+  }, 100);
+});
+
+// Re-initialize when page is fully loaded (for safety)
+window.addEventListener('load', () => {
+  if (!window.neuralNetworkBackground) {
+    console.log('Re-initializing Neural Network Background on full load');
+    window.neuralNetworkBackground = new NeuralNetworkBackground();
+  }
+});
+
+// Clean up when window is closed
+window.addEventListener('beforeunload', () => {
+  if (window.neuralNetworkBackground) {
+    window.neuralNetworkBackground.destroy();
+  }
+}); 

static/style.css

@@ -0,0 +1,492 @@
+/* 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);
+}
+
+/* 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);
+} 

tailwind.config.js

@@ -1,100 +0,0 @@
-/** @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
-  ],
-} 

templates/base.html

@@ -14,8 +14,10 @@
     <meta name="keywords" content="systades, wissen, visualisierung, lernen, gedanken, theorie">
     <meta name="author" content="Systades-Team">
     
-    <!-- Tailwind CSS über CDN -->
+    <!-- Tailwind CSS - Beide Optionen verfügbar -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Alternative lokale Version, falls die CDN-Version blockiert wird -->
+    <link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">
     <script>
       tailwind.config = {
         darkMode: 'class',
@@ -63,17 +65,15 @@
       }
     </script>
     
-    <!-- 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">
+    <!-- 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">
     
-    <!-- Icons -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Icons - Self-hosted Font Awesome -->
+    <link href="{{ url_for('static', filename='css/all.min.css') }}" rel="stylesheet">
     
     <!-- 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">
@@ -81,95 +81,167 @@
     <!-- Base-Styles ausgelagert in eigene Datei -->
     <link href="{{ url_for('static', filename='css/base-styles.css') }}" rel="stylesheet">
     
-    <!-- Alpine.js -->
+    <!-- Alpine.js - CDN Version -->
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"></script>
 
-    <!-- Network Background Script -->
-    <script src="{{ url_for('static', filename='network-background.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>
     
-    <!-- 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>
+    <!-- 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>
 
     <!-- Seitenspezifische Styles -->
     {% block extra_css %}{% endblock %}
     
-    <!-- Cybertechnisches Netzwerk-Hintergrund -->
-    <script type="module" src="{{ url_for('static', filename='js/modules/cyber-network-init.js') }}"></script>
+    <!-- Custom dark mode styles -->
+    <style>
+        /* Dark mystical theme */
+        .dark {
+            --bg-primary: #0a0e19;
+            --bg-secondary: #111827;
+            --text-primary: #f9fafb;
+            --text-secondary: #e5e7eb;
+            --accent-primary: #6d28d9;
+            --accent-secondary: #8b5cf6;
+            --glow-effect: 0 0 15px rgba(124, 58, 237, 0.5);
+        }
+        
+        /* Light theme with mystical tones */
+        :root {
+            --bg-primary: #f8fafc;
+            --bg-secondary: #f1f5f9;
+            --text-primary: #1e293b;
+            --text-secondary: #475569;
+            --accent-primary: #7c3aed;
+            --accent-secondary: #8b5cf6;
+            --glow-effect: 0 0 15px rgba(139, 92, 246, 0.3);
+        }
+        
+        body.dark {
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        
+        /* Mystical glowing effects */
+        .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 effects */
+        .glass-morphism {
+            backdrop-filter: blur(10px);
+        }
+        
+        .dark .glass-navbar-dark {
+            background-color: rgba(10, 14, 25, 0.8);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+        }
+        
+        .glass-navbar-light {
+            background-color: rgba(255, 255, 255, 0.8);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Alpine.js x-cloak für ausgeblendete Elemente */
+        [x-cloak] { display: none !important; }
+        
+        /* Grundlegende Klassen, um sicherzustellen, dass Tailwind geladen wird */
+        .nav-link {
+            @apply text-gray-300 hover:text-white transition-colors duration-200;
+        }
+        
+        .nav-link-active {
+            @apply text-white font-medium;
+        }
+        
+        .nav-link-light {
+            @apply text-gray-600 hover:text-gray-900 transition-colors duration-200;
+        }
+        
+        .nav-link-light-active {
+            @apply text-gray-900 font-medium;
+        }
+    </style>
 </head>
-<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>
+<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,
     
-    <!-- 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>
+    init() {
+        this.fetchDarkModeFromSession();
+    },
     
+    fetchDarkModeFromSession() {
+        fetch('/api/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);
+        
+        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) {
+                localStorage.setItem('darkMode', this.darkMode ? 'dark' : 'light');
+                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" x-data="layout">
+    <div id="app-container" class="flex flex-col min-h-screen">
         <!-- 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'">
@@ -206,8 +278,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-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'">
+                       ? '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'">
                         <i class="fa-solid fa-robot mr-2"></i>KI-Chat
                     </button>
                     {% if current_user.is_authenticated %}
@@ -228,9 +300,9 @@
                         <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>
+                                 x-bind:class="darkMode ? 'bg-purple-800/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>
+                                 x-bind:class="darkMode ? 'bg-purple-600 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'">
@@ -308,13 +380,22 @@
                         </div>
                     </div>
                     {% else %}
-                    <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>
+                    <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>
                     {% endif %}
                     
                     <!-- Mobilmenü-Button -->
@@ -331,6 +412,7 @@
 
         <!-- 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"
@@ -511,11 +593,9 @@
     {% block scripts %}{% endblock %}
     
     <!-- KI-Chat Initialisierung -->
-    <script type="module">
-        // Importiere und initialisiere den ChatGPT-Assistenten direkt, um sicherzustellen,
+    <script>
+        // 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) {

templates/errors/403.html

@@ -3,21 +3,31 @@
 {% block title %}403 - Zugriff verweigert{% endblock %}
 
 {% block content %}
-<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="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="text-center">
-            <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 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>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="{{ url_for('index') }}" class="btn-primary">
+                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                     <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                 </a>
-                <a href="javascript:history.back()" class="btn-secondary">
+                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                     <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 %}

templates/errors/404.html

@@ -3,21 +3,31 @@
 {% block title %}404 - Seite nicht gefunden{% endblock %}
 
 {% block content %}
-<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="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="text-center">
-            <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 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>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="{{ url_for('index') }}" class="btn-primary">
+                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                     <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                 </a>
-                <a href="javascript:history.back()" class="btn-secondary">
+                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                     <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 %}

templates/errors/429.html

@@ -3,21 +3,31 @@
 {% block title %}429 - Zu viele Anfragen{% endblock %}
 
 {% block content %}
-<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="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="text-center">
-            <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 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>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="{{ url_for('index') }}" class="btn-primary">
+                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                     <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                 </a>
-                <a href="javascript:history.back()" class="btn-secondary">
+                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                     <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 %}

templates/errors/500.html

@@ -3,21 +3,31 @@
 {% block title %}500 - Serverfehler{% endblock %}
 
 {% block content %}
-<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="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="text-center">
-            <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 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>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="{{ url_for('index') }}" class="btn-primary">
+                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                     <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                 </a>
-                <a href="javascript:history.back()" class="btn-secondary">
+                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                     <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 %}

templates/index.html

@@ -4,7 +4,7 @@
 
 {% block extra_css %}
 <style>
-  /* Hintergrund über die gesamte Seite erstrecken */
+  /* Full height and width for the page */
   html, body {
     min-height: 100vh;
     width: 100%;
@@ -13,152 +13,146 @@
     overflow-x: hidden;
   }
   
-  /* Entferne den Gradient-Hintergrund vollständig */
+  /* Remove gradient backgrounds */
   .hero-gradient, .bg-fade {
     background: none !important;
     clip-path: none !important;
   }
   
-  .tech-line {
+  /* Style elements */
+  .mystical-line {
     height: 1px;
-    background: linear-gradient(to right, transparent, rgba(100, 100, 100, 0.1), transparent);
+    background: linear-gradient(to right, transparent, rgba(109, 40, 217, 0.2), transparent);
   }
   
-  .tech-dot {
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background-color: rgba(100, 100, 100, 0.2);
-    position: absolute;
+  .dark .mystical-line {
+    background: linear-gradient(to right, transparent, rgba(139, 92, 246, 0.2), transparent);
   }
   
-  .dark .tech-line {
-    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
+  /* Text reveal animation */
+  @keyframes textReveal {
+    0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
+    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
   }
   
-  .dark .tech-dot {
-    background-color: rgba(255, 255, 255, 0.3);
+  .text-reveal {
+    animation: textReveal 1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
   }
   
-  @keyframes pulse {
-    0% { r: 10; opacity: 0.7; }
-    50% { r: 12; opacity: 1; }
-    100% { r: 10; opacity: 0.7; }
+  .delay-1 { animation-delay: 0.2s; }
+  .delay-2 { animation-delay: 0.4s; }
+  .delay-3 { animation-delay: 0.6s; }
+  
+  /* Home page specific styles */
+  .featured-card {
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+    border: 1px solid;
+    border-color: rgba(139, 92, 246, 0.1);
   }
   
-  .animate-pulse {
-    animation: pulse 3s ease-in-out infinite;
+  .dark .featured-card {
+    border-color: rgba(109, 40, 217, 0.2);
+    background-color: rgba(17, 24, 39, 0.7);
   }
   
-  @keyframes iconPulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-    100% { transform: scale(1); }
+  .featured-card:hover {
+    transform: translateY(-5px);
   }
   
-  .icon-pulse {
-    animation: iconPulse 3s ease-in-out infinite;
-    display: inline-block;
+  .dark .featured-card:hover {
+    box-shadow: 0 5px 15px rgba(109, 40, 217, 0.2);
+    border-color: rgba(109, 40, 217, 0.3);
   }
   
-  /* Volle Seitenbreite für Container */
-  #app-container, .container, main, .mx-auto, .py-12 {
-    width: 100%;
+  .featured-card:hover {
+    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.1);
+    border-color: rgba(139, 92, 246, 0.2);
   }
   
-  /* Sicherstellen dass der Hintergrund die ganze Seite abdeckt */
-  .full-page-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: -1;
+  /* Chat section styles */
+  .embedded-chat {
+    height: 350px;
+    border-radius: 1rem;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    border: 1px solid;
   }
   
-  /* Chat-Animationen */
-  .typing-dots span {
-    animation-duration: 1.2s;
-    animation-iteration-count: infinite;
+  .dark .embedded-chat {
+    background-color: rgba(17, 24, 39, 0.7);
+    border-color: rgba(109, 40, 217, 0.2);
   }
   
-  /* Chat-Nachrichten-Animation */
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translate3d(0, 10px, 0);
-    }
-    to {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-    }
+  .embedded-chat {
+    background-color: rgba(255, 255, 255, 0.7);
+    border-color: rgba(139, 92, 246, 0.1);
   }
   
-  #embedded-chat-messages > div {
-    animation: fadeInUp 0.3s ease-out forwards;
-  }
-  
-  /* Sanftes Scrollen im Chat */
   #embedded-chat-messages {
-    scroll-behavior: smooth;
+    height: 250px;
+    overflow-y: auto;
+    padding: 1rem;
   }
   
-  /* Benutzerdefinierter Scrollbar für den Chat */
-  #embedded-chat-messages::-webkit-scrollbar {
-    width: 6px;
+  /* Chat typing indicator */
+  .typing-dots span {
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    margin-right: 3px;
+    background-color: currentColor;
+    opacity: 0.5;
   }
   
-  #embedded-chat-messages::-webkit-scrollbar-track {
-    background-color: rgba(0, 0, 0, 0.05);
-    border-radius: 10px;
+  .typing-dots span:nth-child(1) {
+    animation: dot-pulse 1.2s infinite ease-in-out;
   }
   
-  #embedded-chat-messages::-webkit-scrollbar-thumb {
-    background-color: rgba(139, 92, 246, 0.3);
-    border-radius: 10px;
+  .typing-dots span:nth-child(2) {
+    animation: dot-pulse 1.2s infinite ease-in-out 0.2s;
   }
   
-  .dark #embedded-chat-messages::-webkit-scrollbar-thumb {
-    background-color: rgba(139, 92, 246, 0.5);
+  .typing-dots span:nth-child(3) {
+    animation: dot-pulse 1.2s infinite ease-in-out 0.4s;
   }
   
-  /* Hover-Effekt für Quick-Query-Buttons */
-  .quick-query-btn:hover {
-    cursor: pointer;
-    background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(96, 165, 250, 0.1));
-  }
-  
-  .dark .quick-query-btn:hover {
-    background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(96, 165, 250, 0.2));
+  @keyframes dot-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.5; }
+    50% { transform: scale(1.3); opacity: 1; }
   }
 </style>
 {% endblock %}
 
 {% block content %}
-<!-- Hintergrund für die gesamte Seite -->
-<div class="full-page-bg gradient-background"></div>
-
 <!-- Hero Section -->
-<section class="relative pt-20 pb-32">
+<section class="relative pt-20 pb-24">
   <!-- Hero Content -->
   <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
     <div class="text-center mb-16">
       <h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
-        <span class="gradient-text inline-block transform transition-all duration-700 hover:scale-105">Wissen</span> neu
-        <div class="mt-2 relative">
-          <span class="relative inline-block">vernetzen
+        <div class="overflow-hidden">
+          <span class="gradient-text inline-block text-reveal">Wissen</span>
+        </div>
+        <div class="overflow-hidden mt-2">
+          <span class="inline-block text-reveal delay-1">neu</span>
+        </div>
+        <div class="mt-2 relative overflow-hidden">
+          <span class="relative inline-block text-reveal delay-2">vernetzen
             <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-500/0 via-purple-500/70 to-purple-500/0 rounded-full"></div>
           </span>
         </div>
       </h1>
-      <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-12">
-        Erkunde komplexe Ideen visuell, schaffe Verbindungen und teile deine Gedanken
-        in einem interaktiven Wissensnetzwerk.
-      </p>
+      <div class="overflow-hidden">
+        <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-12 text-reveal delay-3">
+          Erkunde komplexe Ideen visuell, schaffe Verbindungen und teile deine Gedanken
+          in einem interaktiven Wissensnetzwerk.
+        </p>
+      </div>
       <div class="flex flex-col sm:flex-row gap-5 justify-center">
-        <a href="{{ url_for('mindmap') }}" class="group transition-all duration-300 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white font-medium text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-purple-500/20 transform hover:-translate-y-1">
+        <a href="{{ url_for('mindmap') }}" class="mystical-button mystical-button-primary group transition-all duration-300">
           <span class="flex items-center justify-center">
-            <i class="fa-solid fa-diagram-project mr-3 text-purple-200 group-hover:text-white transition-all duration-300 animate-pulse"></i> 
+            <i class="fa-solid fa-diagram-project mr-3 text-purple-200 group-hover:text-white transition-all duration-300"></i> 
             <span class="relative">
               Mindmap erkunden
               <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300"></span>
@@ -166,12 +160,12 @@
           </span>
         </a>
         {% if not current_user.is_authenticated %}
-        <a href="{{ url_for('register') }}" class="group transition-all duration-300 bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white font-medium text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-blue-500/20 transform hover:-translate-y-1">
+        <a href="{{ url_for('register') }}" class="mystical-button mystical-button-secondary group transition-all duration-300">
           <span class="flex items-center justify-center">
-            <i class="fa-solid fa-user-plus mr-3 text-blue-200 group-hover:text-white transition-all duration-300 icon-pulse"></i>
+            <i class="fa-solid fa-user-plus mr-3 group-hover:text-accent-secondary-dark dark:group-hover:text-accent-secondary-light transition-all duration-300"></i>
             <span class="relative">
               Konto erstellen
-              <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300"></span>
+              <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-accent-primary-light dark:bg-accent-primary-dark group-hover:w-full transition-all duration-300"></span>
             </span>
           </span>
         </a>
@@ -179,61 +173,13 @@
       </div>
     </div>
     
-    <!-- Tech illustration -->
-    <div class="relative w-full max-w-4xl mx-auto h-80 sm:h-96">
+    <!-- Central logo and name -->
+    <div class="relative w-full max-w-4xl mx-auto h-40 sm:h-60 mb-16">
       <div class="absolute inset-0 flex items-center justify-center">
-        <div class="hidden md:block text-center">
+        <div class="text-center">
           <div class="text-3xl font-bold gradient-text mb-2 animate-float">Systades</div>
           <div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
         </div>
-        
-        <!-- Network Visualization with SVG -->
-        <svg class="absolute inset-0 w-full h-full" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
-          <!-- Glossy Nodes and Lines -->
-          <defs>
-            <radialGradient id="nodeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
-              <stop offset="0%" stop-color="rgba(139, 92, 246, 0.9)" />
-              <stop offset="100%" stop-color="rgba(79, 70, 229, 0.5)" />
-            </radialGradient>
-            <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
-              <feGaussianBlur stdDeviation="5" result="blur" />
-              <feComposite in="SourceGraphic" in2="blur" operator="over" />
-            </filter>
-          </defs>
-          
-          <!-- Network Lines -->
-          <g class="lines">
-            <!-- Connection network -->
-            <line x1="200" y1="250" x2="400" y2="150" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
-            <line x1="400" y1="150" x2="600" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
-            <line x1="600" y1="250" x2="400" y2="350" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
-            <line x1="400" y1="350" x2="200" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
-            <line x1="400" y1="150" x2="400" y2="350" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
-            <line x1="200" y1="250" x2="600" y2="250" stroke="rgba(0,0,0,0.1)" stroke-width="1" class="dark:hidden" />
-            
-            <!-- Dark mode connections -->
-            <line x1="200" y1="250" x2="400" y2="150" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
-            <line x1="400" y1="150" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
-            <line x1="600" y1="250" x2="400" y2="350" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
-            <line x1="400" y1="350" x2="200" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
-            <line x1="400" y1="150" x2="400" y2="350" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
-            <line x1="200" y1="250" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
-            
-            <!-- Pulse animation for some lines -->
-            <line class="animate-pulse" x1="400" y1="150" x2="300" y2="200" stroke="rgba(139, 92, 246, 0.5)" stroke-width="2" />
-            <line class="animate-pulse" x1="400" y1="350" x2="500" y2="300" stroke="rgba(168, 85, 247, 0.5)" stroke-width="2" />
-          </g>
-          
-          <!-- Network Nodes -->
-          <g class="nodes">
-            <circle cx="400" cy="150" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse float-animation" />
-            <circle cx="200" cy="250" r="10" fill="url(#nodeGradient)" class="float-animation" />
-            <circle cx="600" cy="250" r="10" fill="url(#nodeGradient)" class="float-animation" />
-            <circle cx="400" cy="350" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse float-animation" />
-            <circle cx="300" cy="200" r="8" fill="url(#nodeGradient)" class="float-animation" />
-            <circle cx="500" cy="300" r="8" fill="url(#nodeGradient)" class="float-animation" />
-          </g>
-        </svg>
       </div>
     </div>
   </div>
@@ -241,363 +187,334 @@
 
 <!-- Features Section -->
 <section class="py-20 relative">
-  <div class="tech-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
+  <div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
   
   <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16">
       <h2 class="section-heading mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">Systades?</span></h2>
       <p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
-        Ein modernes Werkzeug zum Visualisieren, Erforschen und Teilen von Wissen
-        in einer intuitiven, interaktiven Umgebung.
+        Ein modernes Werkzeug zum Visualisieren, Erforschen und Teilen von Wissen in einem interaktiven
+        Netzwerk, das dir hilft, Verbindungen zu entdecken und dein Wissen zu organisieren.
       </p>
     </div>
     
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      <!-- Feature Card 1 -->
-      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
-        <div class="icon mb-6 rounded-2xl shadow-lg">
-          <i class="fa-solid fa-brain"></i>
+    <!-- Feature Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+      <!-- Feature 1: Visualize -->
+      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
+        <div class="mb-4 text-purple-600 dark:text-purple-400">
+          <i class="fa-solid fa-diagram-project text-3xl"></i>
         </div>
-        <h3 class="text-xl font-semibold mb-3">Visualisiere Wissen</h3>
-        <p>
-          Sieh Wissen als vernetztes System, entdecke Zusammenhänge und erkenne überraschende
-          Verbindungen zwischen verschiedenen Themengebieten.
+        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Visualisiere Wissen</h3>
+        <p class="text-gray-700 dark:text-gray-300">
+          Organisiere Gedanken und Ideen in einem interaktiven Netzwerk, das komplexe Beziehungen
+          visuell darstellt und neue Verbindungen offenbart.
         </p>
       </div>
       
-      <!-- Feature Card 2 -->
-      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
-        <div class="icon mb-6 rounded-2xl shadow-lg">
-          <i class="fa-solid fa-lightbulb"></i>
+      <!-- Feature 2: Connect -->
+      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
+        <div class="mb-4 text-indigo-600 dark:text-indigo-400">
+          <i class="fa-solid fa-network-wired text-3xl"></i>
         </div>
-        <h3 class="text-xl font-semibold mb-3">Teile Gedanken</h3>
-        <p>
-          Füge deine eigenen Ideen und Perspektiven hinzu. Erstelle Verbindungen zu
-          vorhandenen Gedanken und bereichere die wachsende Wissensbasis.
+        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Verknüpfe Gedanken</h3>
+        <p class="text-gray-700 dark:text-gray-300">
+          Entdecke Zusammenhänge zwischen scheinbar unzusammenhängenden Ideen und schaffe dein
+          persönliches Wissensnetzwerk über verschiedene Bereiche hinweg.
         </p>
       </div>
       
-      <!-- Feature Card 3 -->
-      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
-        <div class="icon mb-6 rounded-2xl shadow-lg">
-          <i class="fa-solid fa-users"></i>
+      <!-- Feature 3: Share -->
+      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
+        <div class="mb-4 text-purple-600 dark:text-purple-400">
+          <i class="fa-solid fa-share-nodes text-3xl"></i>
         </div>
-        <h3 class="text-xl font-semibold mb-3">Community</h3>
-        <p>
-          Sei Teil einer Gemeinschaft, die gemeinsam ein verteiltes Wissensarchiv aufbaut
-          und sich in thematisch fokussierten Bereichen austauscht.
-        </p>
-      </div>
-      
-      <!-- Feature Card 4 -->
-      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
-        <div class="icon mb-6 rounded-2xl shadow-lg">
-          <i class="fa-solid fa-robot"></i>
-        </div>
-        <h3 class="text-xl font-semibold mb-3">KI-Assistenz</h3>
-        <p>
-          Lass dir von künstlicher Intelligenz helfen, neue Zusammenhänge zu entdecken,
-          Inhalte zusammenzufassen und Fragen zu beantworten.
-        </p>
-      </div>
-      
-      <!-- Feature Card 5 -->
-      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
-        <div class="icon mb-6 rounded-2xl shadow-lg">
-          <i class="fa-solid fa-search"></i>
-        </div>
-        <h3 class="text-xl font-semibold mb-3">Intelligente Suche</h3>
-        <p>
-          Finde genau die Informationen, die du suchst, mit fortschrittlichen Such- und
-          Filterfunktionen für eine präzise Navigation durch das Wissen.
-        </p>
-      </div>
-      
-      <!-- Feature Card 6 -->
-      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
-        <div class="icon mb-6 rounded-2xl shadow-lg">
-          <i class="fa-solid fa-route"></i>
-        </div>
-        <h3 class="text-xl font-semibold mb-3">Geführte Pfade</h3>
-        <p>
-          Folge kuratierten Lernpfaden durch komplexe Themen oder erschaffe selbst
-          Routen für andere, die deinen Gedankengängen folgen möchten.
+        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Teile und Entdecke</h3>
+        <p class="text-gray-700 dark:text-gray-300">
+          Tausche Erkenntnisse mit anderen aus und erweitere dein Wissen durch die
+          Perspektiven und Gedanken der Community.
         </p>
       </div>
     </div>
   </div>
 </section>
 
-<!-- Call to Action Section -->
-<section class="py-16 sm:py-20 md:py-24 relative overflow-hidden">
-  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-    <div class="glass-effect p-6 sm:p-8 md:p-12 rounded-3xl transform transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl bg-gradient-to-br from-purple-500/15 to-blue-500/15 backdrop-blur-xl border border-white/10 shadow-lg">
-      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
-        <div class="md:w-2/3">
-          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 text-gray-900 dark:text-white leading-tight">
-            Bereit, <span class="gradient-text bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-500">Wissen</span> neu zu entdecken?
-          </h2>
-          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 md:mb-0 max-w-2xl">
-            Starte jetzt deine Reise durch das Wissensnetzwerk und erschließe neue Perspektiven.
-          </p>
-        </div>
-        <div class="md:w-1/3 text-center md:text-right">
-          <a href="{{ url_for('mindmap') }}" class="inline-flex items-center justify-center w-full md:w-auto btn-primary font-bold py-3 sm:py-3.5 px-6 sm:px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 bg-gradient-to-r from-purple-600 to-blue-600 text-white">
-            <span class="flex items-center justify-center">
-              <i class="fa-solid fa-arrow-right mr-2"></i>
-              <span>Zur Mindmap</span>
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
+<!-- AI Assistant Preview -->
+<section class="py-20 relative">
+  <div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
 
-<!-- Quick Access Section -->
-<section class="py-16 sm:py-20">
   <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
-      <!-- Themen-Übersicht -->
-      <div class="glass-morphism p-6 sm:p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl border border-white/10 backdrop-blur-md">
-        <h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
-          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center mr-3 sm:mr-4 shadow-md transform transition-transform duration-300 hover:scale-110">
-            <i class="fa-solid fa-fire text-white text-base sm:text-lg"></i>
+    <div class="text-center mb-12">
+      <h2 class="section-heading mb-4 text-gray-900 dark:text-white">Dein <span class="gradient-text">KI-Assistent</span></h2>
+      <p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+        Unser integrierter KI-Assistent hilft dir, Wissen zu organisieren, Verbindungen zu finden und
+        Einsichten zu gewinnen.
+      </p>
+    </div>
+    
+    <!-- Chat Interface Preview -->
+    <div class="max-w-3xl mx-auto">
+      <div class="embedded-chat" id="demo-chat">
+        <!-- Chat Header -->
+        <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3">
+              <i class="fa-solid fa-robot text-sm"></i>
+            </div>
+            <span class="font-medium text-gray-800 dark:text-gray-200">Systades Assistent (4o-mini)</span>
+          </div>
+          <div>
+            <button id="open-real-assistant" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+              <i class="fa-solid fa-expand"></i>
+            </button>
           </div>
-          <span class="text-lg sm:text-xl md:text-2xl">Themen-Übersicht</span>
-        </h3>
-        <div class="space-y-3 sm:space-y-4 mb-6">
-          <a href="{{ url_for('mindmap') }}" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
-            <div class="w-3 h-3 rounded-full bg-purple-400 mr-3 group-hover:scale-125 transition-transform"></div>
-            <div class="flex-grow">
-              <p class="font-medium text-gray-800 dark:text-gray-200">Wissensbereiche <span class="text-xs text-gray-500">(12)</span></p>
-              <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Überblick über Themenbereiche</p>
-            </div>
-            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
-          </a>
-          <a href="{{ url_for('search_thoughts_page') }}" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
-            <div class="w-3 h-3 rounded-full bg-blue-400 mr-3 group-hover:scale-125 transition-transform"></div>
-            <div class="flex-grow">
-              <p class="font-medium text-gray-800 dark:text-gray-200">Gedanken <span class="text-xs text-gray-500">(87)</span></p>
-              <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Konkrete Einträge durchsuchen</p>
-            </div>
-            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
-          </a>
-          <a href="#" class="flex items-center p-3 sm:p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
-            <div class="w-3 h-3 rounded-full bg-green-400 mr-3 group-hover:scale-125 transition-transform"></div>
-            <div class="flex-grow">
-              <p class="font-medium text-gray-800 dark:text-gray-200">Verbindungen <span class="text-xs text-gray-500">(34)</span></p>
-              <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Beziehungen zwischen Gedanken</p>
-            </div>
-            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
-          </a>
         </div>
-        <a href="{{ url_for('search_thoughts_page') }}" class="btn-primary w-full text-center rounded-xl py-3 sm:py-3.5 transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg flex items-center justify-center">
-          <span>Alle Themen entdecken</span>
-          <i class="fa-solid fa-arrow-right ml-2"></i>
+        
+        <!-- Chat Messages -->
+        <div id="embedded-chat-messages" class="border-b border-gray-200 dark:border-gray-700">
+          <!-- Assistant Message -->
+          <div class="mb-4 flex">
+            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
+              <i class="fa-solid fa-robot text-sm"></i>
+            </div>
+            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
+              <div class="text-gray-700 dark:text-gray-300 markdown-content">
+                <p>Hallo! Ich bin dein Systades-Assistent. Wie kann ich dir heute helfen?</p>
+                <p>Du kannst mir Fragen zu:</p>
+                <ul>
+                  <li><strong>Gedanken</strong> in der Datenbank</li>
+                  <li><strong>Kategorien</strong> und Wissensgebieten</li>
+                  <li><strong>Mindmaps</strong> und Visualisierungsmöglichkeiten</li>
+                </ul>
+                <p>stellen.</p>
+              </div>
+            </div>
+          </div>
+          
+          <!-- User Message -->
+          <div class="mb-4 flex justify-end">
+            <div class="bg-purple-100 dark:bg-purple-900/30 rounded-lg p-3 max-w-[80%]">
+              <p class="text-gray-800 dark:text-gray-200">
+                Kann ich mit deiner Hilfe eine Mindmap zum Thema Künstliche Intelligenz erstellen?
+              </p>
+            </div>
+            <div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-2 flex-shrink-0">
+              <i class="fa-solid fa-user text-sm"></i>
+            </div>
+          </div>
+          
+          <!-- Assistant Response -->
+          <div class="mb-4 flex" id="demo-ai-response">
+            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
+              <i class="fa-solid fa-robot text-sm"></i>
+            </div>
+            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
+              <div class="text-gray-700 dark:text-gray-300 markdown-content">
+                <p>Ja, natürlich! Ich kann dir dabei helfen, eine Mindmap zum Thema <strong>Künstliche Intelligenz</strong> zu erstellen.</p>
+                <p>Du kannst wie folgt vorgehen:</p>
+                <ol>
+                  <li>Gehe zur <strong>Mindmap</strong>-Ansicht</li>
+                  <li>Suche nach dem Knoten "Künstliche Intelligenz" unter der Kategorie "Technologie"</li>
+                  <li>Füge diesen Knoten zu deiner persönlichen Mindmap hinzu</li>
+                  <li>Ergänze verwandte Themen wie <em>Machine Learning, Neural Networks oder Data Science</em></li>
+                </ol>
+                <p>Soll ich dir noch mehr spezifische Informationen zu KI-Teilgebieten geben?</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Chat Input -->
+        <div class="p-4">
+          <div class="flex">
+            <input type="text" placeholder="Stelle eine Frage..." class="mystical-input flex-grow" disabled>
+            <button class="ml-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-2 rounded-lg disabled:opacity-50" disabled>
+              <i class="fa-solid fa-paper-plane"></i>
+            </button>
+          </div>
+          <!-- Quick Queries -->
+          <div class="mt-3 flex flex-wrap gap-2">
+            <span class="text-xs text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
+            <button data-question="Was sind die wichtigsten Grundlagen der Künstlichen Intelligenz?" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">KI-Grundlagen</button>
+            <button data-question="Wie kann ich eine Mindmap zum Thema Neuronale Netzwerke erstellen?" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Mindmap erstellen</button>
+            <button data-question="Zeige mir alle verfügbaren Kategorien in der Datenbank" class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Datenbank durchsuchen</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Try it Button -->
+    <div class="text-center mt-10">
+      <button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.sendQuestion('Hallo! Ich möchte mehr über die Funktionen der Wissensdatenbank erfahren. Was kann ich hier alles machen?')" 
+              class="mystical-button mystical-button-primary inline-flex items-center">
+        <i class="fa-solid fa-robot mr-2"></i>
+        KI-Assistenten ausprobieren
+      </button>
+    </div>
+  </div>
+</section>
+
+<!-- Getting Started Section -->
+<section class="py-20 relative">
+  <div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
+  
+  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-12">
+      <h2 class="section-heading mb-4 text-gray-900 dark:text-white">So <span class="gradient-text">funktioniert's</span></h2>
+      <p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+        In wenigen einfachen Schritten kannst du mit Systades beginnen, dein Wissen zu organisieren.
+      </p>
+    </div>
+    
+    <!-- Step Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <!-- Step 1 -->
+      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
+        <div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
+          1
+        </div>
+        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Konto erstellen</h3>
+        <p class="text-gray-700 dark:text-gray-300 mb-4">
+          Registriere dich für ein kostenloses Konto, um deine persönliche Wissenslandschaft zu erstellen.
+        </p>
+        {% if not current_user.is_authenticated %}
+        <a href="{{ url_for('register') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
+          Jetzt registrieren <i class="fa-solid fa-arrow-right ml-1"></i>
+        </a>
+        {% endif %}
+      </div>
+      
+      <!-- Step 2 -->
+      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
+        <div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
+          2
+        </div>
+        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Mindmap erkunden</h3>
+        <p class="text-gray-700 dark:text-gray-300 mb-4">
+          Entdecke die öffentliche Wissensmindmap und füge Knoten zu deiner persönlichen Landschaft hinzu.
+        </p>
+        <a href="{{ url_for('mindmap') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
+          Zur Mindmap <i class="fa-solid fa-arrow-right ml-1"></i>
         </a>
       </div>
       
-      <!-- KI-Assistent mit eingebettetem Chat -->
-      <div class="glass-morphism p-6 sm:p-8 rounded-3xl transition-all duration-500 hover:-translate-y-1 hover:shadow-xl backdrop-blur-md border border-white/10">
-        <h3 class="text-xl md:text-2xl font-bold mb-4 flex flex-wrap sm:flex-nowrap items-center text-gray-800 dark:text-white">
-          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center mr-3 sm:mr-4 shadow-lg transform transition-transform duration-300 hover:scale-110">
-            <i class="fa-solid fa-robot text-white text-base sm:text-lg"></i>
-          </div>
-          <span class="mt-1 sm:mt-0">KI-Assistent</span>
-        </h3>
-        
-        <!-- Eingebettetes Chat-Interface -->
-        <div id="embedded-assistant" class="rounded-xl border border-gray-200/50 dark:border-gray-700/50 overflow-hidden flex flex-col h-[300px]">
-          <!-- Chat Verlauf -->
-          <div id="embedded-chat-messages" class="flex-grow p-4 overflow-y-auto space-y-3 bg-white/70 dark:bg-gray-800/70">
-            <!-- Begrüßungsnachricht -->
-            <div class="flex items-start space-x-2">
-              <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
-                <i class="fa-solid fa-robot text-white text-xs"></i>
-              </div>
-              <div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
-                <p class="text-sm text-gray-700 dark:text-gray-200">Hallo! Ich bin dein KI-Assistent. Wie kann ich dir helfen?</p>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Chat Eingabe -->
-          <div class="p-3 border-t border-gray-200/70 dark:border-gray-700/70 bg-gray-50/90 dark:bg-gray-800/90">
-            <form id="embedded-chat-form" class="flex items-center space-x-2">
-              <input type="text" id="embedded-chat-input" 
-                     placeholder="Stelle eine Frage..." 
-                     class="flex-grow px-4 py-2 rounded-xl border bg-white/90 dark:bg-gray-700/90 border-gray-300 dark:border-gray-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500 text-gray-700 dark:text-gray-200">
-              <button type="submit" 
-                      class="p-2 rounded-xl bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5">
-                <i class="fa-solid fa-paper-plane"></i>
-              </button>
-            </form>
-          </div>
+      <!-- Step 3 -->
+      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
+        <div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
+          3
         </div>
-        
-        <!-- Schnelllinks unter dem Chat -->
-        <div class="mt-4 flex flex-wrap gap-2">
-          <button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
-            Was ist Systades?
-          </button>
-          <button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
-            Wie erstelle ich eine Mindmap?
-          </button>
-          <button class="quick-query-btn px-2 sm:px-3 py-1 sm:py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-lg sm:rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
-            Zeige neueste Gedanken
-          </button>
-        </div>
-        
-        <!-- Vollständigen KI-Chat öffnen -->
-        <button onclick="window.MindMap.assistant.toggleAssistant(true)" class="mt-4 btn-primary w-full text-center rounded-xl py-2 sm:py-2.5 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 flex items-center justify-center">
-          <i class="fa-solid fa-expand mr-2"></i>
-          <span>Chat in Vollansicht öffnen</span>
-        </button>
+        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Gedanken teilen</h3>
+        <p class="text-gray-700 dark:text-gray-300 mb-4">
+          Teile deine eigenen Gedanken, verbinde sie mit vorhandenen Knoten und baue das kollektive Wissen aus.
+        </p>
+        {% if current_user.is_authenticated %}
+        <a href="{{ url_for('profile') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
+          Zum Profil <i class="fa-solid fa-arrow-right ml-1"></i>
+        </a>
+        {% else %}
+        <a href="{{ url_for('login') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
+          Jetzt anmelden <i class="fa-solid fa-arrow-right ml-1"></i>
+        </a>
+        {% endif %}
       </div>
     </div>
   </div>
 </section>
 
+<!-- Call to Action -->
+<section class="py-20 relative">
+  <div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
+  
+  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <h2 class="section-heading mb-6 text-gray-900 dark:text-white">Bereit, dein <span class="gradient-text">Wissen zu vernetzen</span>?</h2>
+    <p class="text-lg text-gray-700 dark:text-gray-300 mb-8">
+      Tritt unserer wachsenden Community bei und entdecke eine neue Art, Wissen zu organisieren und zu teilen.
+    </p>
+    <div class="flex flex-col sm:flex-row gap-4 justify-center">
+      <a href="{{ url_for('mindmap') }}" class="mystical-button mystical-button-primary">
+        <i class="fa-solid fa-diagram-project mr-2"></i> Mindmap erkunden
+      </a>
+      {% if not current_user.is_authenticated %}
+      <a href="{{ url_for('register') }}" class="mystical-button mystical-button-secondary">
+        <i class="fa-solid fa-user-plus mr-2"></i> Konto erstellen
+      </a>
+      {% endif %}
+    </div>
+  </div>
+</section>
 {% endblock %}
 
-<!-- JavaScript für eingebetteten Chat -->
-{% block scripts %}
+{% block extra_js %}
 <script>
   document.addEventListener('DOMContentLoaded', function() {
-    // Warten bis MindMap und der Assistent initialisiert sind
-    const waitForAssistant = setInterval(() => {
-      if (window.MindMap && window.MindMap.assistant) {
-        clearInterval(waitForAssistant);
-        initEmbeddedChat();
-      }
-    }, 200);
-    
-    function initEmbeddedChat() {
-      const chatForm = document.getElementById('embedded-chat-form');
-      const chatInput = document.getElementById('embedded-chat-input');
-      const messagesContainer = document.getElementById('embedded-chat-messages');
-      const quickQueryBtns = document.querySelectorAll('.quick-query-btn');
-      
-      // Event-Listener für das Chat-Formular
-      chatForm.addEventListener('submit', function(e) {
-        e.preventDefault();
-        const userMessage = chatInput.value.trim();
-        if (!userMessage) return;
-        
-        // Nachricht des Benutzers anzeigen
-        appendMessage('user', userMessage);
-        chatInput.value = '';
-        
-        // Anzeigen, dass der Assistent antwortet
-        const typingIndicator = appendTypingIndicator();
-        
-        // API-Anfrage an den Assistenten senden
-        sendToAssistant(userMessage)
-          .then(response => {
-            // Entferne Tipp-Indikator
-            typingIndicator.remove();
-            // Zeige Antwort des Assistenten an
-            appendMessage('assistant', response);
-          })
-          .catch(error => {
-            typingIndicator.remove();
-            appendMessage('assistant', 'Es tut mir leid, ich konnte deine Nachricht nicht verarbeiten. Bitte versuche es später noch einmal.');
-            console.error('Fehler bei der Kommunikation mit dem Assistenten:', error);
-          });
-      });
-      
-      // Schnellabfragen-Buttons
-      quickQueryBtns.forEach(btn => {
-        btn.addEventListener('click', function() {
-          const query = this.textContent.trim();
-          chatInput.value = query;
-          chatForm.dispatchEvent(new Event('submit'));
-        });
-      });
-      
-      // Funktion zum Hinzufügen einer Nachricht zum Chat
-      function appendMessage(sender, message) {
-        const messageElement = document.createElement('div');
-        messageElement.className = 'flex items-start space-x-2';
-        
-        if (sender === 'user') {
-          messageElement.innerHTML = `
-            <div class="flex-grow"></div>
-            <div class="max-w-[85%] bg-blue-100 dark:bg-blue-900/40 p-3 rounded-xl rounded-tr-none shadow-sm">
-              <p class="text-sm text-gray-700 dark:text-gray-200">${message}</p>
-            </div>
-            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 flex items-center justify-center flex-shrink-0">
-              <i class="fa-solid fa-user text-white text-xs"></i>
-            </div>
-          `;
-        } else {
-          messageElement.innerHTML = `
-            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
-              <i class="fa-solid fa-robot text-white text-xs"></i>
-            </div>
-            <div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
-              <p class="text-sm text-gray-700 dark:text-gray-200">${message}</p>
-            </div>
-          `;
+    // Expand-Button mit dem echten Assistenten verknüpfen
+    const openRealAssistantBtn = document.getElementById('open-real-assistant');
+    if (openRealAssistantBtn) {
+      openRealAssistantBtn.addEventListener('click', function() {
+        if (window.MindMap && window.MindMap.assistant) {
+          window.MindMap.assistant.toggleAssistant(true);
         }
-        
-        messagesContainer.appendChild(messageElement);
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-      }
-      
-      // Tipp-Indikator für "Assistent schreibt..."
-      function appendTypingIndicator() {
-        const indicatorElement = document.createElement('div');
-        indicatorElement.className = 'flex items-start space-x-2 typing-indicator';
-        indicatorElement.innerHTML = `
-          <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center flex-shrink-0">
-            <i class="fa-solid fa-robot text-white text-xs"></i>
-          </div>
-          <div class="max-w-[85%] bg-purple-100 dark:bg-gray-700 p-3 rounded-xl rounded-tl-none shadow-sm">
-            <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center">
-              <span class="mr-1">Tipp</span>
-              <span class="typing-dots flex space-x-1">
-                <span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
-                <span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
-                <span class="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
-              </span>
-            </p>
-          </div>
-        `;
-        messagesContainer.appendChild(indicatorElement);
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-        return indicatorElement;
-      }
-      
-      // Sende Nachricht an den Assistenten und erhalte Antwort
-      async function sendToAssistant(message) {
-        try {
-          const response = await fetch('/api/assistant', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-              messages: [
-                { role: "system", content: "Du bist ein hilfreicher Assistent für das Wissensnetzwerk Systades." },
-                { role: "user", content: message }
-              ]
-            })
-          });
-          
-          const data = await response.json();
-          if (!response.ok) {
-            throw new Error(data.error || 'Unbekannter Fehler');
-          }
-          
-          return data.response || data.answer || 'Ich habe keine Antwort erhalten.';
-        } catch (error) {
-          console.error('Fehler bei der API-Anfrage:', error);
-          throw error;
-        }
-      }
+      });
     }
+    
+    // Auch die Beispiel-Buttons im Demo-Chat klickbar machen
+    const quickQueryButtons = document.querySelectorAll('.quick-query-btn');
+    quickQueryButtons.forEach(button => {
+      button.addEventListener('click', function() {
+        if (window.MindMap && window.MindMap.assistant) {
+          const question = button.getAttribute('data-question');
+          if (question) {
+            window.MindMap.assistant.sendQuestion(question);
+          } else {
+            // Fallback auf den Button-Text, falls kein data-question Attribut gesetzt ist
+            const queryText = button.textContent.trim();
+            window.MindMap.assistant.sendQuestion(queryText);
+          }
+        }
+      });
+    });
+
+    // Styling für die markdown-content hinzufügen
+    const style = document.createElement('style');
+    style.textContent = `
+      .markdown-content h1, .markdown-content h2, .markdown-content h3, 
+      .markdown-content h4, .markdown-content h5, .markdown-content h6 {
+          font-weight: bold;
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+      }
+      .markdown-content h1 { font-size: 1.4rem; }
+      .markdown-content h2 { font-size: 1.3rem; }
+      .markdown-content h3 { font-size: 1.2rem; }
+      .markdown-content h4 { font-size: 1.1rem; }
+      .markdown-content ul, .markdown-content ol {
+          padding-left: 1.5rem;
+          margin: 0.5rem 0;
+      }
+      .markdown-content ul { list-style-type: disc; }
+      .markdown-content ol { list-style-type: decimal; }
+      .markdown-content p { margin: 0.5rem 0; }
+      .markdown-content code {
+          font-family: monospace;
+          background-color: rgba(0, 0, 0, 0.1);
+          padding: 1px 4px;
+          border-radius: 3px;
+      }
+      .markdown-content pre {
+          background-color: rgba(0, 0, 0, 0.1);
+          padding: 0.5rem;
+          border-radius: 4px;
+          overflow-x: auto;
+          margin: 0.5rem 0;
+      }
+      .dark .markdown-content code {
+          background-color: rgba(255, 255, 255, 0.1);
+      }
+      .dark .markdown-content pre {
+          background-color: rgba(255, 255, 255, 0.1);
+      }
+    `;
+    document.head.appendChild(style);
   });
 </script>
 {% endblock %}

templates/profile.html

@@ -32,7 +32,7 @@
     position: relative;
   }
   
-  .profile-avatar {
+  .avatar-container {
     width: 180px;
     height: 180px;
     border-radius: 50%;
@@ -50,40 +50,48 @@
     flex-shrink: 0;
   }
   
-  .profile-avatar:hover {
+  .avatar-container: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);
   }
   
-  .profile-avatar img {
+  .avatar-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: filter 0.3s ease;
   }
   
-  .profile-avatar:hover img {
+  .avatar-container:hover img {
     filter: brightness(1.1);
   }
   
-  .profile-avatar-placeholder {
-    font-size: 5rem;
-    color: rgba(255, 255, 255, 0.6);
+  .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;
     transition: all 0.3s ease;
   }
   
-  .profile-avatar:hover .profile-avatar-placeholder {
-    color: rgba(255, 255, 255, 0.9);
-    transform: scale(1.1);
+  .avatar-edit:hover {
+    background: rgba(255, 255, 255, 0.3);
   }
   
-  .profile-info {
+  .user-info {
     flex: 1;
     padding-top: 0.5rem;
   }
   
-  .profile-name {
+  .user-info h1 {
     font-size: 2.75rem;
     font-weight: 800;
     margin-bottom: 0.75rem;
@@ -96,33 +104,7 @@
     line-height: 1.2;
   }
   
-  .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 {
+  .user-bio {
     font-size: 1.15rem;
     line-height: 1.7;
     color: rgba(255, 255, 255, 0.9);
@@ -131,7 +113,7 @@
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }
   
-  .profile-meta {
+  .user-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 1.5rem;
@@ -140,118 +122,22 @@
     align-items: center;
   }
   
-  .profile-meta-item {
+  .user-meta span {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     transition: all 0.25s ease;
   }
   
-  .profile-meta-item:hover {
+  .user-meta span:hover {
     color: rgba(255, 255, 255, 1);
     transform: translateY(-2px);
   }
   
-  .profile-meta-icon {
+  .user-meta i {
     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;
@@ -504,31 +390,24 @@
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
   }
   
-  html.light .profile-avatar {
+  html.light .avatar-container {
     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 .profile-name {
+  html.light .user-info h1 {
     background: linear-gradient(135deg, #7e3ff2, #3282f6);
     text-shadow: none;
   }
   
-  html.light .profile-username,
-  html.light .profile-bio,
+  html.light .user-bio,
   html.light .activity-content {
     color: #1a202c;
     text-shadow: none;
   }
   
-  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 {
+  html.light .user-meta span {
     color: #4a5568;
   }
   
@@ -606,63 +485,22 @@
 <div class="container mx-auto px-4 py-10">
   <!-- Profil-Container -->
   <div class="profile-container">
-    <!-- Profil-Header mit Benutzerinformationen -->
+    <!-- User Info Section -->
     <div class="profile-header">
-      <!-- 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 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>
       </div>
-      
-      <!-- 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 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>
         </div>
+        <button class="edit-profile-btn">Profil bearbeiten</button>
       </div>
     </div>
     
@@ -673,7 +511,7 @@
         <div class="stat-icon">
           <i class="fas fa-lightbulb"></i>
         </div>
-        <div class="stat-value">{{ user.thoughts_count|default('42') }}</div>
+        <div class="stat-value">{{ stats.thought_count if stats and stats.thought_count else 0 }}</div>
         <div class="stat-label">Gedanken</div>
       </div>
       
@@ -682,7 +520,7 @@
         <div class="stat-icon">
           <i class="fas fa-project-diagram"></i>
         </div>
-        <div class="stat-value">{{ user.connections_count|default('128') }}</div>
+        <div class="stat-value">{{ stats.connections_count if stats and stats.connections_count else 0 }}</div>
         <div class="stat-label">Verbindungen</div>
       </div>
       
@@ -691,7 +529,7 @@
         <div class="stat-icon">
           <i class="fas fa-users"></i>
         </div>
-        <div class="stat-value">{{ user.followers_count|default('567') }}</div>
+        <div class="stat-value">{{ stats.followers_count if stats and stats.followers_count else 0 }}</div>
         <div class="stat-label">Follower</div>
       </div>
       
@@ -700,7 +538,7 @@
         <div class="stat-icon">
           <i class="fas fa-comment-dots"></i>
         </div>
-        <div class="stat-value">{{ user.contributions_count|default('89') }}</div>
+        <div class="stat-value">{{ stats.contributions_count if stats and stats.contributions_count else 0 }}</div>
         <div class="stat-label">Beiträge</div>
       </div>
       
@@ -709,7 +547,7 @@
         <div class="stat-icon">
           <i class="fas fa-star"></i>
         </div>
-        <div class="stat-value">{{ user.rating|default('4.8') }}</div>
+        <div class="stat-value">{{ stats.rating if stats and stats.rating else '0.0' }}</div>
         <div class="stat-label">Bewertung</div>
       </div>
     </div>
@@ -731,115 +569,124 @@
       <!-- Aktivitäts-Tab (Standardmäßig angezeigt) -->
       <div class="tab-content" id="activity-tab">
         <div class="activity-feed">
-          <!-- 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>
-            <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>
+          {% 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>
             </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>
+          {% endif %}
         </div>
       </div>
       
       <!-- Weitere Tab-Inhalte (werden per JavaScript angezeigt) -->
       <div class="tab-content hidden" id="thoughts-tab">
-        <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 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('create_thought') }}" class="mt-4 inline-block px-4 py-2 bg-purple-600 text-white rounded-lg">Ersten Gedanken erstellen</a>
+            </div>
+          {% endif %}
+        </div>
       </div>
       
       <div class="tab-content hidden" id="collections-tab">
-        <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 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>
       </div>
       
       <div class="tab-content hidden" id="connections-tab">
-        <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 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>
       </div>
       
       <div class="tab-content hidden" id="settings-tab">
@@ -849,22 +696,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|default('Max Mustermann') }}" />
+              <input type="text" id="name" class="settings-input" value="{{ user.name }}" />
             </div>
             
             <div class="settings-group">
               <label class="settings-label" for="bio">Über mich</label>
-              <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>
+              <textarea id="bio" class="settings-input" rows="4">{{ user.bio }}</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|default('Berlin, Deutschland') }}" />
+              <input type="text" id="location" class="settings-input" value="{{ user.location }}" />
             </div>
             
             <div class="settings-group">
               <label class="settings-label" for="website">Website</label>
-              <input type="url" id="website" class="settings-input" value="{{ user.website|default('https://www.beispiel.de') }}" />
+              <input type="url" id="website" class="settings-input" value="{{ user.website }}" />
             </div>
             
             <button class="profile-action-btn primary mt-4">
@@ -878,7 +725,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|default('beispiel@email.com') }}" />
+              <input type="email" id="email" class="settings-input" value="{{ user.email }}" />
             </div>
             
             <div class="settings-group">
@@ -903,7 +750,7 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
+<script nonce="{{ csp_nonce }}">
   document.addEventListener('DOMContentLoaded', function() {
     // Profil-Tab-Funktionalität
     const tabs = document.querySelectorAll('.profile-tab');

utils/__init__.py

@@ -7,14 +7,14 @@ This package contains various utilities for database management,
 user management, and server administration.
 """
 
-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
+# Import utilities that don't depend on app.py first
+from .db_check import check_db_connection, initialize_db_if_needed
 
+# 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,4 +31,11 @@ __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 

utils/db_check.py

@@ -0,0 +1,79 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+from flask import current_app
+from sqlalchemy.exc import SQLAlchemyError
+from sqlalchemy import text
+import time
+
+def check_db_connection(db):
+    """
+    Überprüft die Datenbankverbindung und versucht ggf. die Verbindung wiederherzustellen
+    
+    Args:
+        db: SQLAlchemy-Instanz
+        
+    Returns:
+        bool: True, wenn die Verbindung erfolgreich ist, sonst False
+    """
+    max_retries = 3
+    retry_count = 0
+    
+    while retry_count < max_retries:
+        try:
+            # Führe eine einfache Abfrage durch, um die Verbindung zu testen
+            with current_app.app_context():
+                db.session.execute(text('SELECT 1'))
+            return True
+        except SQLAlchemyError as e:
+            retry_count += 1
+            print(f"DB-Verbindungsfehler (Versuch {retry_count}/{max_retries}): {str(e)}")
+            
+            if retry_count < max_retries:
+                # Warte vor dem nächsten Versuch
+                time.sleep(1)
+                
+                # Versuche die Verbindung zurückzusetzen
+                try:
+                    db.session.rollback()
+                except:
+                    pass
+    
+    return False
+
+def initialize_db_if_needed(db, initialize_function=None):
+    """
+    Initialisiert die Datenbank, falls erforderlich
+    
+    Args:
+        db: SQLAlchemy-Instanz
+        initialize_function: Funktion, die aufgerufen wird, um die Datenbank zu initialisieren
+        
+    Returns:
+        bool: True, wenn die Datenbank bereit ist, sonst False
+    """
+    # Prüfe die Verbindung
+    if not check_db_connection(db):
+        return False
+    
+    # Prüfe, ob die Tabellen existieren
+    try:
+        with current_app.app_context():
+            # Führe eine Testabfrage auf einer Tabelle durch
+            db.session.execute(text('SELECT COUNT(*) FROM user'))
+    except SQLAlchemyError:
+        # Tabellen existieren nicht, erstelle sie
+        try:
+            with current_app.app_context():
+                db.create_all()
+                
+                # Rufe die Initialisierungsfunktion auf, falls vorhanden
+                if initialize_function and callable(initialize_function):
+                    initialize_function()
+                    
+                return True
+        except Exception as e:
+            print(f"Fehler bei DB-Initialisierung: {str(e)}")
+            return False
+    
+    return True 

utils/db_rebuild.py

@@ -11,12 +11,20 @@ import importlib.util
 parent_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 sys.path.insert(0, parent_dir)
 
-from app import app, db_path, create_default_categories
+# Import models directly to avoid circular import
 from models import db, User, Category
 
-def rebuild_database():
+def rebuild_database(app_instance=None):
     """Completely rebuilds the database by dropping and recreating all tables."""
-    with app.app_context():
+    if app_instance is None:
+        # Only import app if it's not provided as a parameter
+        from app import app as app_instance
+        from app import db_path
+    else:
+        # Get db_path from app_instance config
+        db_path = app_instance.config['SQLALCHEMY_DATABASE_URI'].replace('sqlite:///', '')
+    
+    with app_instance.app_context():
         print(f"Database path: {db_path}")
         
         # Back up existing database if it exists
@@ -68,7 +76,9 @@ def rebuild_database():
             
             # Create default categories
             print("Creating default categories...")
-            create_default_categories()
+            # Instead of directly importing create_default_categories, call it through app_instance
+            create_default_categories_func = getattr(sys.modules['app'], 'create_default_categories')
+            create_default_categories_func()
             
             print("Database rebuild completed successfully!")
             return True

utils/download_resources.py

@@ -0,0 +1,225 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
+"""
+Dieses Skript lädt externe Ressourcen wie Font Awesome, Tailwind CSS und Alpine.js herunter
+und installiert sie lokal, um die Abhängigkeit von externen CDNs zu vermeiden und
+die Content Security Policy zu erfüllen.
+"""
+
+import os
+import sys
+import requests
+import zipfile
+import io
+import shutil
+import subprocess
+from pathlib import Path
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+# URLs für die Ressourcen
+RESOURCES = {
+    'alpine.js': 'https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js',
+    'font_awesome': 'https://use.fontawesome.com/releases/v6.4.0/fontawesome-free-6.4.0-web.zip',
+    'inter_font_300': 'https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2',
+    'inter_font_400': 'https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2',
+    'inter_font_500': 'https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2',
+    'inter_font_600': 'https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2',
+    'inter_font_700': 'https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2',
+    'jetbrains_font_400': 'https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2',
+    'jetbrains_font_500': 'https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2',
+    'jetbrains_font_700': 'https://fonts.gstatic.com/s/jetbrainsmono/v20/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2',
+}
+
+# Zielverzeichnisse
+DIRECTORIES = {
+    'js': os.path.join(BASE_DIR, 'static', 'js'),
+    'css': os.path.join(BASE_DIR, 'static', 'css'),
+    'fonts': os.path.join(BASE_DIR, 'static', 'fonts'),
+    'webfonts': os.path.join(BASE_DIR, 'static', 'webfonts'),
+}
+
+def download_file(url, filepath):
+    """Lädt eine Datei von einer URL herunter und speichert sie lokal."""
+    response = requests.get(url, stream=True)
+    if response.status_code == 200:
+        with open(filepath, 'wb') as f:
+            for chunk in response.iter_content(chunk_size=8192):
+                f.write(chunk)
+        print(f"✅ Heruntergeladen: {os.path.basename(filepath)}")
+        return True
+    else:
+        print(f"❌ Fehler beim Herunterladen von {url}: {response.status_code}")
+        return False
+
+def extract_zip(zip_data, extract_to):
+    """Extrahiert eine ZIP-Datei in das angegebene Verzeichnis."""
+    with zipfile.ZipFile(io.BytesIO(zip_data)) as zip_ref:
+        zip_ref.extractall(extract_to)
+
+def setup_directories():
+    """Erstellt die benötigten Verzeichnisse, falls sie nicht existieren."""
+    for directory in DIRECTORIES.values():
+        os.makedirs(directory, exist_ok=True)
+        print(f"📁 Verzeichnis erstellt/überprüft: {directory}")
+
+def download_alpine():
+    """Lädt Alpine.js herunter."""
+    url = RESOURCES['alpine.js']
+    filepath = os.path.join(DIRECTORIES['js'], 'alpine.min.js')
+    download_file(url, filepath)
+
+def download_font_awesome():
+    """Lädt Font Awesome herunter und extrahiert die Dateien."""
+    url = RESOURCES['font_awesome']
+    response = requests.get(url)
+    if response.status_code == 200:
+        # Temporäres Verzeichnis für die Extraktion
+        temp_dir = os.path.join(BASE_DIR, 'temp_fontawesome')
+        os.makedirs(temp_dir, exist_ok=True)
+        
+        # ZIP-Datei extrahieren
+        extract_zip(response.content, temp_dir)
+        
+        # CSS-Datei kopieren
+        fa_dir = os.path.join(temp_dir, 'fontawesome-free-6.4.0-web')
+        css_source = os.path.join(fa_dir, 'css', 'all.min.css')
+        css_dest = os.path.join(DIRECTORIES['css'], 'all.min.css')
+        shutil.copyfile(css_source, css_dest)
+        print(f"✅ Font Awesome CSS kopiert nach {css_dest}")
+        
+        # Webfonts-Verzeichnis kopieren
+        webfonts_source = os.path.join(fa_dir, 'webfonts')
+        shutil.rmtree(DIRECTORIES['webfonts'], ignore_errors=True)
+        shutil.copytree(webfonts_source, DIRECTORIES['webfonts'])
+        print(f"✅ Font Awesome Webfonts kopiert nach {DIRECTORIES['webfonts']}")
+        
+        # Temporäres Verzeichnis löschen
+        shutil.rmtree(temp_dir)
+        
+        return True
+    else:
+        print(f"❌ Fehler beim Herunterladen von Font Awesome: {response.status_code}")
+        return False
+
+def download_google_fonts():
+    """Lädt die Google Fonts (Inter und JetBrains Mono) herunter."""
+    font_files = {
+        'inter-light.woff2': RESOURCES['inter_font_300'],
+        'inter-regular.woff2': RESOURCES['inter_font_400'],
+        'inter-medium.woff2': RESOURCES['inter_font_500'],
+        'inter-semibold.woff2': RESOURCES['inter_font_600'],
+        'inter-bold.woff2': RESOURCES['inter_font_700'],
+        'jetbrainsmono-regular.woff2': RESOURCES['jetbrains_font_400'],
+        'jetbrainsmono-medium.woff2': RESOURCES['jetbrains_font_500'],
+        'jetbrainsmono-bold.woff2': RESOURCES['jetbrains_font_700'],
+    }
+    
+    for filename, url in font_files.items():
+        filepath = os.path.join(DIRECTORIES['fonts'], filename)
+        download_file(url, filepath)
+
+def setup_tailwind():
+    """Richtet Tailwind CSS ein."""
+    # Tailwind-Konfiguration erstellen, falls sie nicht existiert
+    tailwind_config = os.path.join(BASE_DIR, 'tailwind.config.js')
+    if not os.path.exists(tailwind_config):
+        with open(tailwind_config, 'w') as f:
+            f.write("""/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    "./templates/**/*.html",
+    "./static/**/*.js",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['JetBrains Mono', 'ui-monospace', 'monospace']
+      },
+      colors: {
+        primary: {
+          50: '#f5f3ff',
+          100: '#ede9fe',
+          200: '#ddd6fe',
+          300: '#c4b5fd',
+          400: '#a78bfa',
+          500: '#8b5cf6',
+          600: '#7c3aed',
+          700: '#6d28d9',
+          800: '#5b21b6',
+          900: '#4c1d95'
+        },
+        secondary: {
+          50: '#ecfdf5',
+          100: '#d1fae5',
+          200: '#a7f3d0',
+          300: '#6ee7b7',
+          400: '#34d399',
+          500: '#10b981',
+          600: '#059669',
+          700: '#047857',
+          800: '#065f46',
+          900: '#064e3b'
+        },
+        dark: {
+          500: '#374151',
+          600: '#1f2937',
+          700: '#111827',
+          800: '#0e1220',
+          900: '#0a0e19'
+        }
+      }
+    }
+  },
+  plugins: [],
+}
+""")
+        print(f"✅ Tailwind-Konfiguration erstellt: {tailwind_config}")
+    
+    # Input-CSS-Datei erstellen
+    input_css_dir = os.path.join(DIRECTORIES['css'], 'src')
+    os.makedirs(input_css_dir, exist_ok=True)
+    
+    input_css = os.path.join(input_css_dir, 'input.css')
+    if not os.path.exists(input_css):
+        with open(input_css, 'w') as f:
+            f.write("""@tailwind base;
+@tailwind components;
+@tailwind utilities;
+""")
+        print(f"✅ Tailwind Input-CSS erstellt: {input_css}")
+    
+    # Hinweis zur Kompilierung anzeigen
+    print("\n📋 Um Tailwind CSS zu kompilieren, führe folgenden Befehl aus:")
+    print("npm install -D tailwindcss")
+    print(f"npx tailwindcss -i {input_css} -o {os.path.join(DIRECTORIES['css'], 'tailwind.min.css')} --minify")
+
+def main():
+    """Hauptfunktion: Lädt alle benötigten Ressourcen herunter."""
+    print("🚀 Starte den Download externer Ressourcen...")
+    setup_directories()
+    
+    # Alpine.js herunterladen
+    print("\n📦 Lade Alpine.js herunter...")
+    download_alpine()
+    
+    # Font Awesome herunterladen
+    print("\n📦 Lade Font Awesome herunter...")
+    download_font_awesome()
+    
+    # Google Fonts herunterladen
+    print("\n📦 Lade Google Fonts herunter...")
+    download_google_fonts()
+    
+    # Tailwind CSS einrichten
+    print("\n📦 Richte Tailwind CSS ein...")
+    setup_tailwind()
+    
+    print("\n✅ Alle Ressourcen wurden erfolgreich heruntergeladen und eingerichtet!")
+    print("🔒 Die Webseite sollte nun ohne externe CDNs funktionieren und die Content Security Policy erfüllen.")
+
+if __name__ == "__main__":
+    main()