diff --git a/README.md b/README.md
index 0519ecb..62df75e 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,67 @@
- 
\ No newline at end of file
+# MindMap Wissensnetzwerk
+
+Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen mit integriertem ChatGPT-Assistenten.
+
+## Features
+
+- Interaktive Mindmap zur Visualisierung von Wissensverbindungen
+- Gedanken mit verschiedenen Beziehungstypen verknüpfen
+- Suchfunktion für Gedanken und Verbindungen
+- Bewertungssystem für Gedanken
+- Dark/Light Mode
+- **Integrierter KI-Assistent** mit OpenAI GPT-Integration
+
+## Installation
+
+1. Repository klonen:
+   ```
+   git clone <repository-url>
+   cd website
+   ```
+
+2. Python-Abhängigkeiten installieren:
+   ```
+   pip install -r requirements.txt
+   ```
+
+3. Environment-Variablen konfigurieren:
+   ```
+   cp example.env .env
+   ```
+   Bearbeite die `.env`-Datei und füge deinen OpenAI API-Schlüssel ein.
+
+4. Datenbank initialisieren:
+   ```
+   python init_db.py
+   ```
+
+5. Anwendung starten:
+   ```
+   python run.py
+   ```
+
+## Verwendung des KI-Assistenten
+
+Der KI-Assistent ist über folgende Wege zugänglich:
+
+1. **Schwebende Schaltfläche**: In der unteren rechten Ecke der Webseite ist eine Roboter-Schaltfläche, die den Assistenten öffnet.
+2. **Navigation**: In der Hauptnavigation gibt es ebenfalls eine Schaltfläche mit Roboter-Symbol.
+3. **Startseite**: Im "KI-Assistent"-Abschnitt auf der Startseite gibt es einen "KI-Chat starten"-Button.
+
+Der Assistent kann bei folgenden Aufgaben helfen:
+
+- Erklärung von Themen und Konzepten
+- Suche nach Verbindungen zwischen Gedanken
+- Beantwortung von Fragen zur Plattform 
+- Vorschläge für neue Gedankenverbindungen
+
+## Technologie-Stack
+
+- **Backend**: Flask, SQLAlchemy
+- **Frontend**: HTML, CSS, JavaScript, Tailwind CSS, Alpine.js
+- **KI**: OpenAI GPT API
+- **Datenbank**: SQLite (Standard), kann auf andere Datenbanken umgestellt werden
+
+## Konfiguration
+
+Die Anwendung kann über Umgebungsvariablen konfiguriert werden. Siehe `example.env` für verfügbare Optionen. 
\ No newline at end of file
diff --git a/website/.env b/website/.env
new file mode 100644
index 0000000..a44a6ea
--- /dev/null
+++ b/website/.env
@@ -0,0 +1 @@
+OPENAI_API_KEY=sk-placeholder
diff --git a/website/__pycache__/app.cpython-311.pyc b/website/__pycache__/app.cpython-311.pyc
index 5534b6c..896763e 100644
Binary files a/website/__pycache__/app.cpython-311.pyc and b/website/__pycache__/app.cpython-311.pyc differ
diff --git a/website/__pycache__/init_db.cpython-311.pyc b/website/__pycache__/init_db.cpython-311.pyc
index f0e320c..b660905 100644
Binary files a/website/__pycache__/init_db.cpython-311.pyc and b/website/__pycache__/init_db.cpython-311.pyc differ
diff --git a/website/app.py b/website/app.py
index d896fa9..d5da608 100644
--- a/website/app.py
+++ b/website/app.py
@@ -1,3 +1,6 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
 import os
 from datetime import datetime, timedelta
 from flask import Flask, render_template, request, redirect, url_for, flash, jsonify, session
@@ -12,6 +15,11 @@ from wtforms.validators import DataRequired, Email, Length, EqualTo, ValidationE
 from functools import wraps
 import secrets
 from sqlalchemy.sql import func
+import openai
+from dotenv import load_dotenv
+
+# Lade .env-Datei
+load_dotenv()
 
 app = Flask(__name__)
 app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'default-dev-key')
@@ -19,6 +27,9 @@ app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///mindmap.db'
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=365)  # Langlebige Session für Dark Mode-Einstellung
 
+# OpenAI API-Konfiguration
+openai.api_key = os.environ.get('OPENAI_API_KEY')
+
 # Context processor für globale Template-Variablen
 @app.context_processor
 def inject_globals():
@@ -36,6 +47,17 @@ db = SQLAlchemy(app)
 login_manager = LoginManager(app)
 login_manager.login_view = 'login'
 
+# Benutzerdefinierter Decorator für Admin-Zugriff
+def admin_required(f):
+    @wraps(f)
+    @login_required
+    def decorated_function(*args, **kwargs):
+        if not current_user.is_admin:
+            flash('Zugriff verweigert. Nur Administratoren dürfen diese Seite aufrufen.', 'error')
+            return redirect(url_for('index'))
+        return f(*args, **kwargs)
+    return decorated_function
+
 class RelationType(Enum):
     SUPPORTS = "stützt"
     CONTRADICTS = "widerspricht"
@@ -197,7 +219,7 @@ def mindmap():
 @login_required
 def profile():
     thoughts = Thought.query.filter_by(user_id=current_user.id).order_by(Thought.timestamp.desc()).all()
-    return render_template('profile.html', thoughts=thoughts)
+    return render_template('profile.html', thoughts=thoughts, user=current_user)
 
 # Route für Benutzereinstellungen
 @app.route('/settings', methods=['GET', 'POST'])
@@ -468,17 +490,56 @@ def add_comment():
 
 # Admin routes
 @app.route('/admin')
-@login_required
+@admin_required
 def admin():
-    if not current_user.is_admin:
-        flash('Zugriff verweigert')
-        return redirect(url_for('index'))
-    
     users = User.query.all()
     nodes = MindMapNode.query.all()
     thoughts = Thought.query.all()
     
-    return render_template('admin.html', users=users, nodes=nodes, thoughts=thoughts)
+    # Aktuelles Datum für Logs
+    now = datetime.now()
+    
+    return render_template('admin.html', users=users, nodes=nodes, thoughts=thoughts, now=now, active_tab='users')
+
+# Zusätzliche Route für die Admin-Dashboard-Seite
+@app.route('/admin/dashboard')
+@admin_required
+def admin_dashboard():
+    users = User.query.all()
+    nodes = MindMapNode.query.all()
+    thoughts = Thought.query.all()
+    now = datetime.now()
+    return render_template('admin.html', users=users, nodes=nodes, thoughts=thoughts, now=now, active_tab='dashboard')
+
+# Zusätzliche Route für die Admin-Benutzer-Seite
+@app.route('/admin/users')
+@admin_required
+def admin_users():
+    users = User.query.all()
+    nodes = MindMapNode.query.all()
+    thoughts = Thought.query.all()
+    now = datetime.now()
+    return render_template('admin.html', users=users, nodes=nodes, thoughts=thoughts, now=now, active_tab='users')
+
+# Zusätzliche Route für die Admin-Gedanken-Seite
+@app.route('/admin/thoughts')
+@admin_required
+def admin_thoughts():
+    users = User.query.all()
+    nodes = MindMapNode.query.all()
+    thoughts = Thought.query.all()
+    now = datetime.now()
+    return render_template('admin.html', users=users, nodes=nodes, thoughts=thoughts, now=now, active_tab='thoughts')
+
+# Zusätzliche Route für die Admin-Mindmap-Seite
+@app.route('/admin/mindmap')
+@admin_required
+def admin_mindmap():
+    users = User.query.all()
+    nodes = MindMapNode.query.all()
+    thoughts = Thought.query.all()
+    now = datetime.now()
+    return render_template('admin.html', users=users, nodes=nodes, thoughts=thoughts, now=now, active_tab='nodes')
 
 @app.route('/api/thoughts/<int:thought_id>/relations', methods=['GET'])
 def get_thought_relations(thought_id):
@@ -695,6 +756,72 @@ def get_dark_mode():
         app.logger.error(f"Fehler beim Abrufen des Dark Mode: {str(e)}")
         return jsonify({'success': False, 'error': str(e)})
 
+# Fehlerseiten-Handler
+@app.errorhandler(404)
+def page_not_found(e):
+    """Handler für 404 Fehler - Seite nicht gefunden."""
+    return render_template('errors/404.html'), 404
+
+@app.errorhandler(403)
+def forbidden(e):
+    """Handler für 403 Fehler - Zugriff verweigert."""
+    return render_template('errors/403.html'), 403
+
+@app.errorhandler(500)
+def internal_server_error(e):
+    """Handler für 500 Fehler - Interner Serverfehler."""
+    app.logger.error(f"500 Fehler: {str(e)}")
+    return render_template('errors/500.html'), 500
+
+@app.errorhandler(429)
+def too_many_requests(e):
+    """Handler für 429 Fehler - Zu viele Anfragen."""
+    return render_template('errors/429.html'), 429
+
+# Route für den KI-Assistenten API-Endpunkt
+@app.route('/api/assistant', methods=['POST'])
+def chat_with_assistant():
+    try:
+        # Daten aus der Anfrage extrahieren
+        data = request.json
+        messages = data.get('messages', [])
+        
+        # Formatiere die Nachrichten für die OpenAI API
+        formatted_messages = []
+        for message in messages:
+            role = message['role']
+            if role == 'user':
+                formatted_messages.append({"role": "user", "content": message['content']})
+            elif role == 'assistant':
+                formatted_messages.append({"role": "assistant", "content": message['content']})
+        
+        # Standard-Systemnachricht hinzufügen
+        formatted_messages.insert(0, {
+            "role": "system", 
+            "content": "Du bist ein hilfreicher Assistent namens 'MindMap KI', der Benutzer bei ihren Fragen " +
+                      "rund um Wissen, Lernen und dem Finden von Verbindungen zwischen Ideen unterstützt. " +
+                      "Sei präzise, freundlich und hilfsbereit. Versuche, deine Antworten prägnant zu halten, " +
+                      "aber biete dennoch wertvolle Informationen. Wenn du eine Frage nicht beantworten kannst, " +
+                      "sag es ehrlich. Antworte auf Deutsch."
+        })
+        
+        # Anfrage an die OpenAI API senden
+        response = openai.chat.completions.create(
+            model="gpt-3.5-turbo",
+            messages=formatted_messages,
+            max_tokens=500,
+            temperature=0.7,
+        )
+        
+        # Antwort extrahieren
+        assistant_reply = response.choices[0].message.content
+        
+        return jsonify({"success": True, "response": assistant_reply})
+    except Exception as e:
+        # Log-Fehler für die Serverkonsole
+        print(f"Fehler bei der KI-Anfrage: {str(e)}")
+        return jsonify({"success": False, "error": "Fehler bei der Verarbeitung der Anfrage"}), 500
+
 # Flask starten
 if __name__ == '__main__':
     with app.app_context():
diff --git a/website/example.env b/website/example.env
new file mode 100644
index 0000000..035e4a2
--- /dev/null
+++ b/website/example.env
@@ -0,0 +1,12 @@
+# MindMap Umgebungsvariablen
+# Kopiere diese Datei zu .env und passe die Werte an
+
+# Flask
+SECRET_KEY=dein-geheimer-schluessel-hier
+
+# OpenAI API
+OPENAI_API_KEY=sk-dein-openai-api-schluessel-hier
+
+# Datenbank
+# Bei Bedarf kann hier eine andere Datenbank-URL angegeben werden
+# SQLALCHEMY_DATABASE_URI=sqlite:///mindmap.db 
\ No newline at end of file
diff --git a/website/init_db.py b/website/init_db.py
index 90a843c..bd94e6b 100644
--- a/website/init_db.py
+++ b/website/init_db.py
@@ -1,3 +1,6 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+
 from app import app, db, User, Thought, Comment, MindMapNode, ThoughtRelation, ThoughtRating, RelationType
 import os
 
diff --git a/website/instance/mindmap.db b/website/instance/mindmap.db
index fecf879..1db9c4d 100644
Binary files a/website/instance/mindmap.db and b/website/instance/mindmap.db differ
diff --git a/website/static/css/assistant.css b/website/static/css/assistant.css
new file mode 100644
index 0000000..9c2b3d3
--- /dev/null
+++ b/website/static/css/assistant.css
@@ -0,0 +1,104 @@
+/* ChatGPT Assistent Styles */
+#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);
+    border-radius: 0.75rem;
+    overflow: hidden;
+}
+
+#assistant-toggle {
+    transition: transform 0.3s ease;
+}
+
+#assistant-toggle:hover {
+    transform: scale(1.1);
+}
+
+#assistant-history {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+#assistant-history::-webkit-scrollbar {
+    width: 6px;
+}
+
+#assistant-history::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+#assistant-history::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.5);
+    border-radius: 3px;
+}
+
+.dark #assistant-history::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.3);
+}
+
+/* Mach Platz für Notifications, damit sie nicht mit dem Assistenten überlappen */
+.notification-area {
+    bottom: 5rem;
+}
+
+/* Verbesserter Glassmorphism-Effekt */
+.glass-morphism {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.dark .glass-morphism {
+    background: rgba(15, 23, 42, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+}
+
+/* Dunkleres Dark Theme */
+.dark {
+    --tw-bg-opacity: 1;
+    background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
+    min-height: 100vh;
+}
+
+.dark .bg-dark-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(10, 15, 25, var(--tw-bg-opacity)) !important;
+}
+
+.dark .bg-dark-800 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(15, 23, 42, var(--tw-bg-opacity)) !important;
+}
+
+.dark .bg-dark-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(23, 33, 64, var(--tw-bg-opacity)) !important;
+}
+
+/* Footer immer unten */
+html, body {
+    height: 100%;
+    margin: 0;
+    min-height: 100vh;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+main {
+    flex: 1 0 auto;
+}
+
+footer {
+    flex-shrink: 0;
+} 
\ No newline at end of file
diff --git a/website/static/css/main.css b/website/static/css/main.css
index 65645e9..94cea3b 100644
--- a/website/static/css/main.css
+++ b/website/static/css/main.css
@@ -1504,6 +1504,34 @@ label:is(.dark *) {
   border-color: #2563eb;
 }
 
+.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.form-input::placeholder,.form-textarea::placeholder {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.form-input::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+.form-input::-webkit-date-and-time-value {
+  min-height: 1.5em;
+  text-align: inherit;
+}
+
+.form-input::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .form-select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right 0.5rem center;
@@ -1617,6 +1645,70 @@ label:is(.dark *) {
   background-color: rgb(22 84 246 / var(--tw-bg-opacity, 1));
 }
 
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.btn-secondary:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-offset-width: 2px;
+}
+
+.btn-secondary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(120 51 248 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+}
+
+.btn-secondary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(105 36 226 / var(--tw-bg-opacity, 1));
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.btn-secondary:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(139 85 255 / var(--tw-ring-opacity, 1));
+}
+
+.btn-secondary:active {
+  --tw-translate-y: 0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.btn-secondary:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(105 36 226 / var(--tw-bg-opacity, 1));
+}
+
+.btn-secondary:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(120 51 248 / var(--tw-bg-opacity, 1));
+}
+
 .btn-outline {
   display: inline-flex;
   align-items: center;
@@ -1768,27 +1860,6 @@ label:is(.dark *) {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.mindmap-node {
-  cursor: pointer;
-  border-width: 2px;
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 200ms;
-}
-
-.mindmap-node:hover {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.mindmap-node:is(.dark *) {
-  --tw-border-opacity: 1;
-  border-color: rgb(91 91 105 / var(--tw-border-opacity, 1));
-}
-
 /* Mindmap-spezifische Stile */
 
 .mindmap-container {
@@ -1808,28 +1879,6 @@ label:is(.dark *) {
   width: 100%;
 }
 
-.ascii-art {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  white-space: pre;
-  font-family: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: -0.025em;
-  --tw-text-opacity: 1;
-  color: rgb(17 66 226 / var(--tw-text-opacity, 1));
-  opacity: 0.8;
-}
-
-.ascii-art:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(90 147 255 / var(--tw-text-opacity, 1));
-  opacity: 0.6;
-}
-
 /* Verbesserte Formulareingabefelder */
 
 .form-input,
@@ -1885,20 +1934,8 @@ label:is(.dark *) {
   --tw-ring-color: rgb(90 147 255 / var(--tw-ring-opacity, 1));
 }
 
-.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;
-}
-
-.pointer-events-none {
-  pointer-events: none;
+.visible {
+  visibility: visible;
 }
 
 .static {
@@ -1917,13 +1954,12 @@ label:is(.dark *) {
   position: relative;
 }
 
-.inset-0 {
-  inset: 0px;
+.sticky {
+  position: sticky;
 }
 
-.inset-y-0 {
-  top: 0px;
-  bottom: 0px;
+.inset-0 {
+  inset: 0px;
 }
 
 .bottom-4 {
@@ -1938,8 +1974,12 @@ label:is(.dark *) {
   left: 50%;
 }
 
-.right-0 {
-  right: 0px;
+.left-3 {
+  left: 0.75rem;
+}
+
+.right-3 {
+  right: 0.75rem;
 }
 
 .right-4 {
@@ -1950,29 +1990,28 @@ label:is(.dark *) {
   top: 0px;
 }
 
-.-z-10 {
-  z-index: -10;
+.top-1\/2 {
+  top: 50%;
 }
 
-.z-0 {
-  z-index: 0;
+.top-6 {
+  top: 1.5rem;
 }
 
 .z-10 {
   z-index: 10;
 }
 
-.z-20 {
-  z-index: 20;
-}
-
 .z-50 {
   z-index: 50;
 }
 
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+.order-1 {
+  order: 1;
+}
+
+.order-2 {
+  order: 2;
 }
 
 .mx-auto {
@@ -1980,15 +2019,18 @@ label:is(.dark *) {
   margin-right: auto;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+.mb-0 {
+  margin-bottom: 0px;
 }
 
 .mb-1 {
   margin-bottom: 0.25rem;
 }
 
+.mb-1\.5 {
+  margin-bottom: 0.375rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -2021,6 +2063,10 @@ label:is(.dark *) {
   margin-inline-end: 0.5rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -2049,6 +2095,18 @@ label:is(.dark *) {
   margin-top: 0.25rem;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.mt-16 {
+  margin-top: 4rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -2065,25 +2123,10 @@ label:is(.dark *) {
   margin-top: 1.25rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .mt-8 {
   margin-top: 2rem;
 }
 
-.mt-auto {
-  margin-top: auto;
-}
-
-.line-clamp-2 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
 .block {
   display: block;
 }
@@ -2132,12 +2175,20 @@ label:is(.dark *) {
   height: 0.75rem;
 }
 
+.h-32 {
+  height: 8rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
 
-.h-6 {
-  height: 1.5rem;
+.h-64 {
+  height: 16rem;
+}
+
+.h-7 {
+  height: 1.75rem;
 }
 
 .h-8 {
@@ -2148,26 +2199,34 @@ label:is(.dark *) {
   height: 20rem;
 }
 
-.h-\[600px\] {
-  height: 600px;
-}
-
 .h-full {
   height: 100%;
 }
 
-.max-h-\[500px\] {
-  max-height: 500px;
+.max-h-0 {
+  max-height: 0px;
 }
 
-.max-h-\[80vh\] {
-  max-height: 80vh;
+.max-h-48 {
+  max-height: 12rem;
+}
+
+.max-h-80 {
+  max-height: 20rem;
+}
+
+.max-h-96 {
+  max-height: 24rem;
 }
 
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
 
+.min-h-\[65vh\] {
+  min-height: 65vh;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -2184,6 +2243,14 @@ label:is(.dark *) {
   width: 3rem;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
+.w-16 {
+  width: 4rem;
+}
+
 .w-2 {
   width: 0.5rem;
 }
@@ -2192,24 +2259,24 @@ label:is(.dark *) {
   width: 0.75rem;
 }
 
-.w-48 {
-  width: 12rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
 
-.w-6 {
-  width: 1.5rem;
+.w-60 {
+  width: 15rem;
+}
+
+.w-64 {
+  width: 16rem;
 }
 
 .w-8 {
   width: 2rem;
 }
 
-.w-auto {
-  width: auto;
+.w-80 {
+  width: 20rem;
 }
 
 .w-full {
@@ -2228,12 +2295,8 @@ label:is(.dark *) {
   max-width: 56rem;
 }
 
-.max-w-7xl {
-  max-width: 80rem;
-}
-
-.max-w-md {
-  max-width: 28rem;
+.max-w-\[85\%\] {
+  max-width: 85%;
 }
 
 .max-w-screen-xl {
@@ -2248,6 +2311,10 @@ label:is(.dark *) {
   flex: 1 1 0%;
 }
 
+.flex-shrink {
+  flex-shrink: 1;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -2256,15 +2323,36 @@ label:is(.dark *) {
   flex-grow: 1;
 }
 
-.origin-top-right {
-  transform-origin: top right;
-}
-
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-10 {
+  --tw-translate-y: -2.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-7 {
+  --tw-translate-x: 1.75rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-y-4 {
   --tw-translate-y: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2348,6 +2436,10 @@ label:is(.dark *) {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -2368,6 +2460,10 @@ label:is(.dark *) {
   gap: 0.5rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -2398,6 +2494,12 @@ label:is(.dark *) {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2432,10 +2534,18 @@ label:is(.dark *) {
   overflow: hidden;
 }
 
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -2452,8 +2562,14 @@ label:is(.dark *) {
   border-radius: 0.375rem;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
+.rounded-l-lg {
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
+
+.rounded-r-lg {
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
 }
 
 .border {
@@ -2468,6 +2584,10 @@ label:is(.dark *) {
   border-bottom-width: 2px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
 .border-l-4 {
   border-left-width: 4px;
 }
@@ -2480,10 +2600,6 @@ label:is(.dark *) {
   border-top-width: 2px;
 }
 
-.border-blue-500\/50 {
-  border-color: rgb(59 130 246 / 0.5);
-}
-
 .border-dark-500 {
   --tw-border-opacity: 1;
   border-color: rgb(111 111 126 / var(--tw-border-opacity, 1));
@@ -2494,13 +2610,40 @@ label:is(.dark *) {
   border-color: rgb(91 91 105 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
 
-.border-green-500\/50 {
-  border-color: rgb(34 197 94 / 0.5);
+.border-gray-200\/20 {
+  border-color: rgb(229 231 235 / 0.2);
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-300\/20 {
+  border-color: rgb(209 213 219 / 0.2);
+}
+
+.border-gray-300\/50 {
+  border-color: rgb(209 213 219 / 0.5);
+}
+
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-800\/50 {
+  border-color: rgb(31 41 55 / 0.5);
 }
 
 .border-primary-400 {
@@ -2508,24 +2651,31 @@ label:is(.dark *) {
   border-color: rgb(90 147 255 / var(--tw-border-opacity, 1));
 }
 
-.border-red-500\/50 {
-  border-color: rgb(239 68 68 / 0.5);
+.border-purple-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(168 85 247 / var(--tw-border-opacity, 1));
 }
 
-.border-transparent {
-  border-color: transparent;
+.border-slate-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
 }
 
-.border-white\/10 {
-  border-color: rgb(255 255 255 / 0.1);
+.border-slate-700\/20 {
+  border-color: rgb(51 65 85 / 0.2);
 }
 
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
 
-.bg-blue-600\/70 {
-  background-color: rgb(37 99 235 / 0.7);
+.bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-500\/20 {
+  background-color: rgb(59 130 246 / 0.2);
 }
 
 .bg-dark-700 {
@@ -2533,14 +2683,33 @@ label:is(.dark *) {
   background-color: rgb(73 73 79 / var(--tw-bg-opacity, 1));
 }
 
+.bg-dark-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(44 44 51 / var(--tw-bg-opacity, 1));
+}
+
+.bg-dark-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 24 28 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gray-50 {
+.bg-gray-100\/20 {
+  background-color: rgb(243 244 246 / 0.2);
+}
+
+.bg-gray-700 {
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+
+.bg-green-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
 }
 
 .bg-green-400 {
@@ -2548,9 +2717,13 @@ label:is(.dark *) {
   background-color: rgb(74 222 128 / var(--tw-bg-opacity, 1));
 }
 
-.bg-indigo-600 {
+.bg-green-500\/20 {
+  background-color: rgb(34 197 94 / 0.2);
+}
+
+.bg-primary-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
+  background-color: rgb(217 231 255 / var(--tw-bg-opacity, 1));
 }
 
 .bg-primary-400 {
@@ -2568,8 +2741,30 @@ label:is(.dark *) {
   background-color: rgb(22 84 246 / var(--tw-bg-opacity, 1));
 }
 
-.bg-purple-600\/70 {
-  background-color: rgb(147 51 234 / 0.7);
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
+}
+
+.bg-purple-500\/20 {
+  background-color: rgb(168 85 247 / 0.2);
+}
+
+.bg-purple-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
+}
+
+.bg-purple-900\/20 {
+  background-color: rgb(88 28 135 / 0.2);
+}
+
+.bg-purple-900\/30 {
+  background-color: rgb(88 28 135 / 0.3);
+}
+
+.bg-red-500\/20 {
+  background-color: rgb(239 68 68 / 0.2);
 }
 
 .bg-secondary-400 {
@@ -2582,6 +2777,19 @@ label:is(.dark *) {
   background-color: rgb(105 36 226 / var(--tw-bg-opacity, 1));
 }
 
+.bg-slate-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-800\/80 {
+  background-color: rgb(30 41 59 / 0.8);
+}
+
+.bg-slate-900\/50 {
+  background-color: rgb(15 23 42 / 0.5);
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -2591,8 +2799,8 @@ label:is(.dark *) {
   background-color: rgb(255 255 255 / 0.1);
 }
 
-.bg-white\/5 {
-  background-color: rgb(255 255 255 / 0.05);
+.bg-opacity-30 {
+  --tw-bg-opacity: 0.3;
 }
 
 .bg-gradient-to-br {
@@ -2603,53 +2811,34 @@ label:is(.dark *) {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
-.from-indigo-500 {
-  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
+.from-purple-500 {
+  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-primary-100\/30 {
-  --tw-gradient-from: rgb(217 231 255 / 0.3) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 231 255 / 0) var(--tw-gradient-to-position);
+.from-purple-600 {
+  --tw-gradient-from: #9333ea var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-primary-100\/50 {
-  --tw-gradient-from: rgb(217 231 255 / 0.5) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 231 255 / 0) var(--tw-gradient-to-position);
+.from-slate-900\/80 {
+  --tw-gradient-from: rgb(15 23 42 / 0.8) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.from-primary-400 {
-  --tw-gradient-from: #5a93ff var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(90 147 255 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+.to-blue-500 {
+  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
 }
 
-.via-white {
-  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
+.to-blue-600 {
+  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
 }
 
-.to-primary-600 {
-  --tw-gradient-to: #1654f6 var(--tw-gradient-to-position);
-}
-
-.to-purple-600 {
-  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
-}
-
-.to-secondary-100\/30 {
-  --tw-gradient-to: rgb(236 232 255 / 0.3) var(--tw-gradient-to-position);
-}
-
-.to-secondary-100\/50 {
-  --tw-gradient-to: rgb(236 232 255 / 0.5) var(--tw-gradient-to-position);
-}
-
-.p-1 {
-  padding: 0.25rem;
+.to-slate-800\/60 {
+  --tw-gradient-to: rgb(30 41 59 / 0.6) var(--tw-gradient-to-position);
 }
 
 .p-12 {
@@ -2690,11 +2879,6 @@ label:is(.dark *) {
   padding-right: 0.5rem;
 }
 
-.px-2\.5 {
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -2705,26 +2889,21 @@ label:is(.dark *) {
   padding-right: 1rem;
 }
 
-.px-6 {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
 }
 
-.py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
 .py-12 {
   padding-top: 3rem;
   padding-bottom: 3rem;
@@ -2760,18 +2939,13 @@ label:is(.dark *) {
   padding-bottom: 1.25rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
 
-.pb-3 {
-  padding-bottom: 0.75rem;
+.pb-10 {
+  padding-bottom: 2.5rem;
 }
 
 .pb-32 {
@@ -2794,12 +2968,8 @@ label:is(.dark *) {
   padding-right: 1rem;
 }
 
-.pt-0\.5 {
-  padding-top: 0.125rem;
-}
-
-.pt-1 {
-  padding-top: 0.25rem;
+.pr-9 {
+  padding-right: 2.25rem;
 }
 
 .pt-16 {
@@ -2810,10 +2980,18 @@ label:is(.dark *) {
   padding-top: 0.5rem;
 }
 
+.pt-20 {
+  padding-top: 5rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
 
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2822,8 +3000,8 @@ label:is(.dark *) {
   text-align: center;
 }
 
-.font-sans {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+.font-mono {
+  font-family: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
 }
 
 .text-2xl {
@@ -2851,11 +3029,6 @@ label:is(.dark *) {
   line-height: 1;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -2892,10 +3065,6 @@ label:is(.dark *) {
   text-transform: uppercase;
 }
 
-.leading-relaxed {
-  line-height: 1.625;
-}
-
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -2904,6 +3073,11 @@ label:is(.dark *) {
   letter-spacing: 0.05em;
 }
 
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+
 .text-blue-400 {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
@@ -2919,6 +3093,11 @@ label:is(.dark *) {
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
+}
+
 .text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity, 1));
@@ -2969,14 +3148,9 @@ label:is(.dark *) {
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
 }
 
-.text-indigo-300 {
+.text-green-800 {
   --tw-text-opacity: 1;
-  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
-}
-
-.text-indigo-400 {
-  --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
+  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
 }
 
 .text-primary-400 {
@@ -2984,9 +3158,14 @@ label:is(.dark *) {
   color: rgb(90 147 255 / var(--tw-text-opacity, 1));
 }
 
-.text-primary-500 {
+.text-primary-600 {
   --tw-text-opacity: 1;
-  color: rgb(41 112 255 / var(--tw-text-opacity, 1));
+  color: rgb(22 84 246 / var(--tw-text-opacity, 1));
+}
+
+.text-purple-300 {
+  --tw-text-opacity: 1;
+  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
 }
 
 .text-purple-400 {
@@ -2994,11 +3173,26 @@ label:is(.dark *) {
   color: rgb(192 132 252 / var(--tw-text-opacity, 1));
 }
 
+.text-purple-500 {
+  --tw-text-opacity: 1;
+  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
+}
+
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+
 .text-secondary-400 {
   --tw-text-opacity: 1;
   color: rgb(166 133 255 / var(--tw-text-opacity, 1));
@@ -3009,25 +3203,14 @@ label:is(.dark *) {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.text-white\/50 {
-  color: rgb(255 255 255 / 0.5);
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
 }
 
-.text-white\/60 {
-  color: rgb(255 255 255 / 0.6);
-}
-
-.text-white\/70 {
-  color: rgb(255 255 255 / 0.7);
-}
-
-.text-white\/90 {
-  color: rgb(255 255 255 / 0.9);
-}
-
-.antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
 }
 
 .opacity-0 {
@@ -3038,10 +3221,6 @@ label:is(.dark *) {
   opacity: 1;
 }
 
-.opacity-30 {
-  opacity: 0.3;
-}
-
 .opacity-75 {
   opacity: 0.75;
 }
@@ -3064,6 +3243,10 @@ label:is(.dark *) {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.outline {
+  outline-style: solid;
+}
+
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3084,14 +3267,13 @@ label:is(.dark *) {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.filter {
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.backdrop-blur-lg {
-  --tw-backdrop-blur: blur(16px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .backdrop-blur-sm {
@@ -3125,16 +3307,26 @@ label:is(.dark *) {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-100 {
   transition-duration: 100ms;
 }
 
-.duration-300 {
-  transition-duration: 300ms;
+.duration-150 {
+  transition-duration: 150ms;
 }
 
-.duration-500 {
-  transition-duration: 500ms;
+.duration-200 {
+  transition-duration: 200ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
 }
 
 .duration-75 {
@@ -3291,11 +3483,21 @@ label:is(.dark *) {
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
 
+.hover\:-translate-y-0\.5:hover {
+  --tw-translate-y: -0.125rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:-translate-y-1:hover {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:bg-dark-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(91 91 105 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -3306,18 +3508,40 @@ label:is(.dark *) {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-200\/50:hover {
+  background-color: rgb(229 231 235 / 0.5);
+}
+
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-800\/50:hover {
+  background-color: rgb(31 41 55 / 0.5);
+}
+
+.hover\:bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 66 226 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-white\/10:hover {
   background-color: rgb(255 255 255 / 0.1);
 }
 
-.hover\:from-indigo-600:hover {
-  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
+.hover\:bg-white\/5:hover {
+  background-color: rgb(255 255 255 / 0.05);
+}
+
+.hover\:from-purple-700:hover {
+  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.hover\:to-purple-700:hover {
-  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
+.hover\:to-blue-700:hover {
+  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
 }
 
 .hover\:text-blue-800:hover {
@@ -3325,9 +3549,9 @@ label:is(.dark *) {
   color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
 
-.hover\:text-gray-600:hover {
+.hover\:text-gray-200:hover {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
 }
 
 .hover\:text-gray-900:hover {
@@ -3335,9 +3559,14 @@ label:is(.dark *) {
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
 
-.hover\:text-primary-600:hover {
+.hover\:text-purple-300:hover {
   --tw-text-opacity: 1;
-  color: rgb(22 84 246 / var(--tw-text-opacity, 1));
+  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
+}
+
+.hover\:text-red-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
 }
 
 .hover\:text-white:hover {
@@ -3351,20 +3580,35 @@ label:is(.dark *) {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.focus\:border-transparent:focus {
+  border-color: transparent;
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-secondary-500:focus {
+.focus\:ring-primary-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(139 85 255 / var(--tw-ring-opacity, 1));
+  --tw-ring-color: rgb(41 112 255 / var(--tw-ring-opacity, 1));
+}
+
+.focus\:ring-purple-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity, 1));
 }
 
 .dark\:inline:is(.dark *) {
@@ -3375,13 +3619,31 @@ label:is(.dark *) {
   display: none;
 }
 
+.dark\:border-dark-600:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(91 91 105 / var(--tw-border-opacity, 1));
+}
+
 .dark\:border-gray-700:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
 }
 
-.dark\:border-white\/10:is(.dark *) {
-  border-color: rgb(255 255 255 / 0.1);
+.dark\:border-gray-700\/20:is(.dark *) {
+  border-color: rgb(55 65 81 / 0.2);
+}
+
+.dark\:border-gray-700\/30:is(.dark *) {
+  border-color: rgb(55 65 81 / 0.3);
+}
+
+.dark\:border-gray-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
+}
+
+.dark\:bg-blue-900\/30:is(.dark *) {
+  background-color: rgb(30 58 138 / 0.3);
 }
 
 .dark\:bg-dark-700:is(.dark *) {
@@ -3389,43 +3651,32 @@ label:is(.dark *) {
   background-color: rgb(73 73 79 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:bg-dark-700\/20:is(.dark *) {
+  background-color: rgb(73 73 79 / 0.2);
+}
+
 .dark\:bg-dark-800:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(44 44 51 / var(--tw-bg-opacity, 1));
 }
 
-.dark\:bg-dark-900:is(.dark *) {
+.dark\:bg-green-900\/30:is(.dark *) {
+  background-color: rgb(20 83 45 / 0.3);
+}
+
+.dark\:bg-primary-900:is(.dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(24 24 28 / var(--tw-bg-opacity, 1));
+  background-color: rgb(21 51 144 / var(--tw-bg-opacity, 1));
 }
 
-.dark\:bg-white\/10:is(.dark *) {
-  background-color: rgb(255 255 255 / 0.1);
+.dark\:text-blue-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
 }
 
-.dark\:from-primary-900\/30:is(.dark *) {
-  --tw-gradient-from: rgb(21 51 144 / 0.3) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(21 51 144 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.dark\:from-primary-900\/50:is(.dark *) {
-  --tw-gradient-from: rgb(21 51 144 / 0.5) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(21 51 144 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.dark\:via-dark-900:is(.dark *) {
-  --tw-gradient-to: rgb(24 24 28 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #18181c var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
-.dark\:to-secondary-900\/30:is(.dark *) {
-  --tw-gradient-to: rgb(72 28 150 / 0.3) var(--tw-gradient-to-position);
-}
-
-.dark\:to-secondary-900\/50:is(.dark *) {
-  --tw-gradient-to: rgb(72 28 150 / 0.5) var(--tw-gradient-to-position);
+.dark\:text-blue-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
 }
 
 .dark\:text-gray-200:is(.dark *) {
@@ -3443,6 +3694,26 @@ label:is(.dark *) {
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-gray-500:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+
+.dark\:text-green-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
+}
+
+.dark\:text-primary-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(90 147 255 / var(--tw-text-opacity, 1));
+}
+
+.dark\:text-red-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-white:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -3453,64 +3724,37 @@ label:is(.dark *) {
   background-color: rgb(91 91 105 / var(--tw-bg-opacity, 1));
 }
 
-.dark\:hover\:bg-dark-700:hover:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(73 73 79 / var(--tw-bg-opacity, 1));
-}
-
-.dark\:hover\:bg-white\/10:hover:is(.dark *) {
-  background-color: rgb(255 255 255 / 0.1);
+.dark\:hover\:bg-dark-700\/30:hover:is(.dark *) {
+  background-color: rgb(73 73 79 / 0.3);
 }
 
 .dark\:hover\:bg-white\/5:hover:is(.dark *) {
   background-color: rgb(255 255 255 / 0.05);
 }
 
-.dark\:hover\:text-gray-200:hover:is(.dark *) {
+.dark\:hover\:text-blue-300:hover:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
+  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
 }
 
-.dark\:hover\:text-white:hover:is(.dark *) {
+.dark\:hover\:text-red-300:hover:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
 }
 
 @media (min-width: 640px) {
-  .sm\:ml-6 {
-    margin-left: 1.5rem;
-  }
-
-  .sm\:flex {
-    display: flex;
-  }
-
-  .sm\:hidden {
-    display: none;
-  }
-
   .sm\:h-96 {
     height: 24rem;
   }
 
-  .sm\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .sm\:w-96 {
+    width: 24rem;
   }
 
   .sm\:flex-row {
     flex-direction: row;
   }
 
-  .sm\:items-center {
-    align-items: center;
-  }
-
-  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2rem * var(--tw-space-x-reverse));
-    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -3522,10 +3766,6 @@ label:is(.dark *) {
     margin-bottom: 0px;
   }
 
-  .md\:mt-0 {
-    margin-top: 0px;
-  }
-
   .md\:block {
     display: block;
   }
@@ -3554,10 +3794,18 @@ label:is(.dark *) {
     flex-direction: row;
   }
 
+  .md\:items-start {
+    align-items: flex-start;
+  }
+
   .md\:items-center {
     align-items: center;
   }
 
+  .md\:justify-start {
+    justify-content: flex-start;
+  }
+
   .md\:justify-between {
     justify-content: space-between;
   }
@@ -3570,6 +3818,10 @@ label:is(.dark *) {
     padding: 2rem;
   }
 
+  .md\:text-left {
+    text-align: left;
+  }
+
   .md\:text-right {
     text-align: right;
   }
@@ -3596,6 +3848,14 @@ label:is(.dark *) {
 }
 
 @media (min-width: 1024px) {
+  .lg\:order-1 {
+    order: 1;
+  }
+
+  .lg\:order-2 {
+    order: 2;
+  }
+
   .lg\:col-span-1 {
     grid-column: span 1 / span 1;
   }
@@ -3608,6 +3868,10 @@ label:is(.dark *) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
diff --git a/website/static/css/style.css b/website/static/css/style.css
index f84a7be..1731bf3 100644
--- a/website/static/css/style.css
+++ b/website/static/css/style.css
@@ -37,6 +37,14 @@
     /* Abstände */
     --standard-spacing: 2rem;
     --small-spacing: 1rem;
+
+    /* High contrast colors for elements - Intensivere Farben für besseren Kontrast */
+    --primary-bright: #9a7dff;
+    --secondary-bright: #bb82ff;
+    --accent-bright: #50eaff;
+    --success-bright: #50ffe4;
+    --warning-bright: #ffe050;
+    --danger-bright: #ff5050;
 }
 
 /* Basiselemente */
@@ -44,7 +52,7 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    background: linear-gradient(135deg, var(--background-start), var(--background-end));
+    background: rgb(24 24 28 / var(--tw-bg-opacity, 1));
     color: var(--light-color);
     font-family: var(--body-font);
     line-height: 1.6;
@@ -73,22 +81,23 @@ p {
 
 a {
     text-decoration: none;
-    color: var(--accent-color);
+    color: var(--accent-bright);
     transition: all 0.3s ease;
 }
 
 a:hover {
-    color: var(--primary-color);
+    color: var(--primary-bright);
+    text-shadow: 0 0 8px rgba(154, 125, 255, 0.5);
 }
 
-/* Neumorphische und Glasmorphismus Elemente */
+/* Verbesserte Glasmorphismus und Neumorphismus Elemente */
 .glass {
     background: var(--glass-bg);
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
-    box-shadow: var(--glass-card-shadow);
+    box-shadow: var(--glass-card-shadow), 0 0 15px rgba(108, 93, 211, 0.2);
     margin-bottom: var(--standard-spacing);
     padding: var(--standard-spacing);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -96,7 +105,8 @@ a:hover {
 
 .glass:hover {
     transform: translateY(-5px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(154, 125, 255, 0.3);
+    border: 1px solid rgba(154, 125, 255, 0.3);
 }
 
 .neumorph {
@@ -109,7 +119,7 @@ a:hover {
 }
 
 .neumorph:hover {
-    box-shadow: var(--shadow-light), var(--shadow-dark);
+    box-shadow: var(--shadow-light), var(--shadow-dark), 0 0 20px rgba(154, 125, 255, 0.2);
 }
 
 .neumorph-inset {
@@ -121,81 +131,168 @@ a:hover {
 
 /* Stilvolle Farbverläufe für Akzente */
 .gradient-text {
-    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+    background: linear-gradient(135deg, var(--primary-bright), var(--accent-bright));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
+    text-shadow: 0 0 10px rgba(154, 125, 255, 0.3);
 }
 
 .gradient-bg {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    background: linear-gradient(135deg, var(--primary-bright), var(--secondary-bright));
 }
 
-/* Navbar Design */
+/* Navbar Design - Überarbeitet mit verbessertem Glassmorphismus und Responsivität */
 .navbar {
-    background: rgba(20, 20, 43, 0.8) !important;
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    box-shadow: 0 4px 15px -1px rgba(0, 0, 0, 0.5);
-    border-bottom: 1px solid var(--glass-border);
-    padding: 1rem 0;
+    background: rgba(20, 20, 43, 0.85); /* Etwas weniger transparent */
+    backdrop-filter: blur(15px); /* Stärkerer Blur */
+    -webkit-backdrop-filter: blur(15px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Stärkerer Schatten */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Hellerer Border */
+    padding: 0.8rem 0; /* Etwas weniger Padding */
+    transition: all 0.3s ease;
 }
 
 .navbar-brand {
-    font-family: var(--serif-font);
-    font-weight: 700;
-    font-size: 1.5rem;
-    color: var(--light-color) !important;
-    letter-spacing: 0.05em;
+    font-family: 'Inter', sans-serif; /* Konsistente Schriftart */
+    font-weight: 800; /* Stärkerer Font */
+    font-size: 1.8rem; /* Größerer Font */
+    color: white; /* Standardfarbe Weiß */
+    letter-spacing: -0.03em; /* Engerer Buchstabenabstand */
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Textschatten */
 }
 
 .navbar-brand i {
     margin-right: 0.5rem;
-    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+    background: linear-gradient(135deg, var(--primary-bright), var(--accent-bright)); /* Hellerer Gradient */
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
+    filter: drop-shadow(0 0 8px rgba(154, 125, 255, 0.6)); /* Stärkerer Schatten */
 }
 
-.navbar-dark .navbar-nav .nav-link {
-    color: rgba(255, 255, 255, 0.8);
-    font-weight: 500;
-    padding: 0.5rem 1rem;
-    border-radius: 10px;
+.navbar-nav .nav-link {
+    color: rgba(255, 255, 255, 1); /* Vollständig weißer Text für bessere Lesbarkeit */
+    font-weight: 600; /* Fetterer Text */
+    padding: 0.6rem 1.2rem; /* Angepasstes Padding */
+    border-radius: 12px; /* Größerer Border-Radius */
     transition: all 0.3s ease;
-    margin: 0 0.2rem;
+    margin: 0 0.3rem; /* Angepasster Margin */
+    backdrop-filter: blur(10px); /* Leichter Blur für Links */
+    -webkit-backdrop-filter: blur(10px);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Textschatten für bessere Lesbarkeit */
+    font-size: 1.05rem; /* Etwas größere Schrift */
 }
 
-.navbar-dark .navbar-nav .nav-link:hover,
-.navbar-dark .navbar-nav .nav-link.active {
-    color: var(--accent-color);
-    background: rgba(108, 93, 211, 0.1);
-    box-shadow: var(--inner-shadow);
+.navbar-nav .nav-link:hover,
+.navbar-nav .nav-link.active {
+    color: var(--accent-bright); /* Hellerer Akzent */
+    background: rgba(154, 125, 255, 0.15); /* Hellerer Hintergrund bei Hover/Active */
+    box-shadow: 0 0 12px rgba(154, 125, 255, 0.2); /* Leichter Schatten */
+    transform: translateY(-2px); /* Leichter Hover-Effekt */
 }
 
-.navbar-dark .navbar-nav .nav-link i {
-    margin-right: 0.5rem;
+.navbar-nav .nav-link i {
+    margin-right: 0.4rem; /* Angepasster Margin */
     transition: transform 0.3s ease;
 }
 
-.navbar-dark .navbar-nav .nav-link:hover i {
+.navbar-nav .nav-link:hover i {
     transform: translateY(-2px);
-    color: var(--accent-color);
+    color: var(--accent-bright);
+}
+
+/* Dark Mode Anpassungen für Navbar */
+.dark .navbar {
+    background: rgba(14, 18, 32, 0.9); /* Dunklerer Hintergrund */
+    border-bottom-color: rgba(255, 255, 255, 0.08); /* Weniger sichtbarer Border */
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+}
+
+.dark .navbar-brand {
+    color: white;
+}
+
+.dark .navbar-nav .nav-link {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.dark .navbar-nav .nav-link:hover,
+.dark .navbar-nav .nav-link.active {
+    color: var(--accent-bright);
+    background: rgba(154, 125, 255, 0.1);
+    box-shadow: 0 0 10px rgba(154, 125, 255, 0.15);
+}
+
+/* Light Mode Anpassungen für Navbar */
+.light .navbar {
+    background: rgba(240, 244, 248, 0.9); /* Heller Hintergrund */
+    border-bottom-color: rgba(0, 0, 0, 0.1); /* Dunklerer Border */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.light .navbar-brand {
+    color: #1a202c; /* Dunkler Text */
+}
+
+.light .navbar-brand i {
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); /* Original Gradient */
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    filter: none; /* Kein Schatten */
+}
+
+.light .navbar-nav .nav-link {
+    color: #4a5568; /* Dunklerer Text */
+    backdrop-filter: none; /* Kein Blur */
+    -webkit-backdrop-filter: none;
+}
+
+.light .navbar-nav .nav-link:hover,
+.light .navbar-nav .nav-link.active {
+    color: var(--primary-color); /* Primärfarbe */
+    background: rgba(108, 93, 211, 0.08); /* Leichter Hintergrund */
+    box-shadow: none;
+}
+
+.light .navbar-nav .nav-link:hover i {
+    color: var(--primary-color);
+}
+
+/* Responsivität für Navbar */
+@media (max-width: 768px) {
+    .navbar {
+        padding: 0.6rem 0;
+    }
+
+    .navbar-brand {
+        font-size: 1.4rem;
+    }
+
+    .navbar-nav .nav-link {
+        padding: 0.5rem 1rem;
+        margin: 0.2rem 0;
+        text-align: center;
+        justify-content: center;
+    }
 }
 
 /* Buttons */
 .btn {
-    padding: 0.6rem 1.5rem;
+    padding: 0.7rem 1.6rem;
     border-radius: 12px;
-    font-weight: 600;
+    font-weight: 700; /* Fetterer Text */
     transition: all 0.3s ease;
     border: none;
     letter-spacing: 0.05em;
     text-transform: uppercase;
-    font-size: 0.85rem;
+    font-size: 0.9rem; /* Größere Schrift */
     position: relative;
     overflow: hidden;
     z-index: 1;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); /* Stärkerer Textschatten für bessere Lesbarkeit */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Stärkerer Schatten für bessere Sichtbarkeit */
 }
 
 .btn::before {
@@ -215,9 +312,11 @@ a:hover {
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    color: white;
-    box-shadow: 0 4px 15px rgba(108, 93, 211, 0.4);
+    background: var(--light-color);
+    color: #000 !important;
+    box-shadow: 0 4px 15px rgba(108, 93, 211, 0.6);
+    font-weight: 700;
+    border: 2px solid rgba(255, 255, 255, 0.2); /* Sichtbarer Rand */
 }
 
 .btn-primary:hover {
@@ -238,69 +337,371 @@ a:hover {
     border-color: var(--accent-color);
 }
 
-/* Karten-Design */
+/* Verbesserte Card-Komponenten mit Glassmorphismus */
 .card {
-    background: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border: 1px solid var(--glass-border);
+    background: rgba(30, 30, 46, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
     border-radius: 16px;
-    box-shadow: var(--glass-card-shadow);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid rgba(72, 71, 138, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    margin-bottom: 1.5rem;
+    position: relative;
     overflow: hidden;
-    margin-bottom: var(--standard-spacing);
+    transition: all 0.3s ease;
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.1) 0%,
+        rgba(255, 255, 255, 0.05) 20%,
+        rgba(0, 0, 0, 0) 80%
+    );
+    z-index: 0;
+    pointer-events: none;
 }
 
 .card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(154, 125, 255, 0.2);
+    border-color: rgba(154, 125, 255, 0.3);
+}
+
+.card:hover::before {
+    opacity: 0.7;
 }
 
 .card-header {
-    background: rgba(20, 20, 43, 0.7);
-    border-bottom: 1px solid var(--glass-border);
-    padding: 1.25rem 1.5rem;
-    font-family: var(--serif-font);
+    background: rgba(20, 20, 40, 0.5);
+    border-bottom: 1px solid rgba(72, 71, 138, 0.2);
+    padding: 1rem 1.5rem;
+    position: relative;
+    border-radius: 16px 16px 0 0;
+    font-weight: 600;
+}
+
+.card-header::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    background: linear-gradient(
+        to right,
+        rgba(154, 125, 255, 0.2),
+        rgba(76, 223, 255, 0.2)
+    );
 }
 
 .card-header h5 {
-    margin-bottom: 0;
-    color: var(--primary-color);
-}
-
-.card-body {
-    padding: 1.5rem;
-}
-
-.card-footer {
-    background: rgba(0, 0, 0, 0.3);
-    border-top: 1px solid var(--glass-border);
-    padding: 1rem 1.5rem;
-}
-
-/* Gedanken-Karten */
-.thought-card {
-    height: 100%;
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--light-color);
     display: flex;
-    flex-direction: column;
-    border-left: 3px solid var(--primary-color);
-}
-
-.thought-card .card-header {
-    display: flex;
-    justify-content: space-between;
     align-items: center;
 }
 
+.card-body {
+    position: relative;
+    z-index: 1;
+    padding: 1.5rem;
+    color: rgba(233, 233, 240, 0.9);
+}
+
+.card-footer {
+    background: rgba(20, 20, 40, 0.5);
+    border-top: 1px solid rgba(72, 71, 138, 0.2);
+    padding: 1rem 1.5rem;
+    position: relative;
+    border-radius: 0 0 16px 16px;
+    color: rgba(233, 233, 240, 0.7);
+}
+
+/* Feature cards auf der Homepage - Verbessertes Design */
+.feature-card {
+    background: rgba(30, 30, 46, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 20px;
+    border: 1px solid rgba(72, 71, 138, 0.2);
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.05) 0%,
+        rgba(255, 255, 255, 0.02) 20%,
+        rgba(0, 0, 0, 0) 80%
+    );
+    z-index: 0;
+    pointer-events: none;
+}
+
+.feature-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 25px rgba(154, 125, 255, 0.2);
+    border-color: rgba(154, 125, 255, 0.3);
+}
+
+.feature-card .icon {
+    font-size: 3rem;
+    margin-bottom: 1.5rem;
+    display: inline-block;
+    color: var(--primary-bright);
+    text-shadow: 0 0 15px rgba(154, 125, 255, 0.5);
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    position: relative;
+    z-index: 1;
+    color: white;
+}
+
+.feature-card p {
+    color: rgba(233, 233, 240, 0.9);
+    font-size: 1rem;
+    line-height: 1.6;
+    position: relative;
+    z-index: 1;
+}
+
+/* Glass-effect für UI-Komponenten */
+.glass-effect {
+    background: rgba(30, 30, 46, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 16px;
+    border: 1px solid rgba(72, 71, 138, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+/* Gradient-Hintergrund, der über gesamte Seite geht */
+.full-page-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--dark-color);
+    z-index: -10;
+}
+
+.full-page-bg::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(
+        circle at top right,
+        rgba(118, 69, 217, 0.1),
+        transparent 40%
+    ), 
+    radial-gradient(
+        circle at bottom left,
+        rgba(76, 223, 255, 0.05),
+        transparent 40%
+    );
+    z-index: -5;
+}
+
+/* Überarbeitungen für benutzerdefinierte Stile */
+.btn-primary {
+    border-radius: 12px !important;
+    font-weight: 600 !important;
+}
+
+.btn-outline {
+    border-radius: 12px !important;
+    border: 1px solid rgba(76, 223, 255, 0.5) !important;
+    background: transparent !important;
+    color: var(--accent-bright) !important;
+    transition: all 0.3s ease !important;
+}
+
+.btn-outline:hover {
+    background: rgba(76, 223, 255, 0.1) !important;
+    border-color: var(--accent-bright) !important;
+    color: white !important;
+    transform: translateY(-2px) !important;
+}
+
+/* Bessere Lesbarkeit für Buttons */
+button, .btn, a.btn {
+    font-weight: 700 !important;
+    letter-spacing: 0.03em !important;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
+    font-size: 1rem !important;
+}
+
+/* Farbschema für Dark/Light Mode strikt trennen */
+.dark body {
+    background: var(--dark-color);
+    color: white;
+}
+
+.light body {
+    background: #f8f9fa;
+    color: #333;
+}
+
+.light .card {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(230, 230, 250, 0.3);
+    color: #333;
+}
+
+.light .glass-effect {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(230, 230, 250, 0.3);
+}
+
+.light .feature-card {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(230, 230, 250, 0.3);
+}
+
+.light .feature-card h3 {
+    color: #333;
+}
+
+.light .feature-card p {
+    color: #555;
+}
+
+.light .card-header {
+    background: rgba(245, 245, 255, 0.7);
+    border-bottom: 1px solid rgba(230, 230, 250, 0.5);
+}
+
+.light .card-footer {
+    background: rgba(245, 245, 255, 0.7);
+    border-top: 1px solid rgba(230, 230, 250, 0.5);
+}
+
+.light .full-page-bg {
+    background: #f0f2f5;
+}
+
+.light .full-page-bg::before {
+    background: radial-gradient(
+        circle at top right,
+        rgba(118, 69, 217, 0.05),
+        transparent 40%
+    ), 
+    radial-gradient(
+        circle at bottom left,
+        rgba(76, 223, 255, 0.03),
+        transparent 40%
+    );
+}
+
+/* Verbesserter Kontrast für Text in Light-Mode */
+.light h1, .light h2, .light h3, .light h4, .light h5, .light h6 {
+    color: #222;
+}
+
+.light p, .light span, .light div {
+    color: #444;
+}
+
+.light a {
+    color: var(--primary-color);
+}
+
+.light a:hover {
+    color: var(--primary-hover);
+}
+
+/* Spezielle Anpassungen für kleinere Bildschirme */
+@media (max-width: 768px) {
+    .card, .feature-card, .glass-effect {
+        border-radius: 14px;
+    }
+    
+    .card-header {
+        border-radius: 14px 14px 0 0;
+    }
+    
+    .card-footer {
+        border-radius: 0 0 14px 14px;
+    }
+}
+
+@media (max-width: 576px) {
+    .card, .feature-card, .glass-effect {
+        border-radius: 12px;
+    }
+    
+    .card-header {
+        border-radius: 12px 12px 0 0;
+    }
+    
+    .card-footer {
+        border-radius: 0 0 12px 12px;
+    }
+}
+
+/* Gemeinsame Stile für alle Modi */
+.thought-card {
+    background: rgba(26, 26, 46, 0.7);
+    border-radius: 16px;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(80, 80, 160, 0.15);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.thought-card:hover {
+    transform: translateY(-5px);
+    border-color: rgba(154, 125, 255, 0.3);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(154, 125, 255, 0.15);
+}
+
+.thought-card .card-header {
+    background: rgba(20, 20, 40, 0.7);
+    padding: 1rem 1.25rem;
+}
+
 .thought-card .card-body {
-    flex: 1;
+    padding: 1.25rem;
 }
 
 .thought-card .metadata {
-    font-size: 0.9rem;
-    color: rgba(255, 255, 255, 0.6);
-    margin-bottom: 1rem;
-    font-style: italic;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    font-size: 0.85rem;
+    color: var(--gray-color);
+    margin-top: 0.5rem;
+    gap: 1rem;
 }
 
 .thought-card .keywords {
@@ -310,56 +711,81 @@ a:hover {
     margin-top: 1rem;
 }
 
+/* Keywords & Tags */
 .keyword-tag {
-    background: rgba(108, 93, 211, 0.2);
-    color: var(--accent-color);
+    display: inline-flex;
+    align-items: center;
     padding: 0.25rem 0.75rem;
     border-radius: 2rem;
-    font-size: 0.8rem;
-    backdrop-filter: blur(5px);
-    border: 1px solid rgba(108, 93, 211, 0.4);
+    font-size: 0.75rem;
+    font-weight: 600;
+    background: linear-gradient(120deg, rgba(154, 125, 255, 0.2), rgba(80, 234, 255, 0.2));
+    border: 1px solid rgba(154, 125, 255, 0.2);
+    color: var(--primary-bright);
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
 }
 
-/* Beziehungs-Badges */
+.keyword-tag:hover {
+    background: linear-gradient(120deg, rgba(154, 125, 255, 0.3), rgba(80, 234, 255, 0.3));
+    border-color: rgba(154, 125, 255, 0.4);
+    color: var(--accent-bright);
+}
+
+/* Verbesserte Relation-Badges */
 .relation-badge {
-    padding: 0.4rem 0.8rem;
-    border-radius: 10px;
-    font-size: 0.85rem;
+    display: inline-flex;
+    align-items: center;
+    padding: 0.3rem 0.75rem;
+    border-radius: 2rem;
+    font-size: 0.75rem;
     font-weight: 600;
-    margin: 0.25rem;
-    display: inline-block;
-    letter-spacing: 0.05em;
-    backdrop-filter: blur(5px);
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.relation-badge:hover {
+    transform: translateY(-2px);
 }
 
 .relation-supports {
-    background-color: var(--success-color);
-    color: #000;
+    background: rgba(53, 201, 190, 0.15);
+    color: var(--success-bright);
+    border: 1px solid rgba(53, 201, 190, 0.3);
 }
 
 .relation-contradicts {
-    background-color: var(--danger-color);
-    color: #fff;
+    background: rgba(254, 83, 110, 0.15);
+    color: var(--danger-bright);
+    border: 1px solid rgba(254, 83, 110, 0.3);
 }
 
 .relation-builds-upon {
-    background-color: var(--info-color);
-    color: #fff;
+    background: rgba(62, 127, 255, 0.15);
+    color: var(--info-color);
+    border: 1px solid rgba(62, 127, 255, 0.3);
 }
 
 .relation-generalizes {
-    background-color: var(--warning-color);
-    color: #000;
+    background: rgba(255, 182, 72, 0.15);
+    color: var(--warning-bright);
+    border: 1px solid rgba(255, 182, 72, 0.3);
 }
 
 .relation-specifies {
-    background-color: var(--gray-color);
-    color: #fff;
+    background: rgba(154, 125, 255, 0.15);
+    color: var(--primary-bright);
+    border: 1px solid rgba(154, 125, 255, 0.3);
 }
 
 .relation-inspires {
-    background-color: var(--accent-color);
-    color: #000;
+    background: rgba(118, 69, 217, 0.15);
+    color: var(--secondary-bright);
+    border: 1px solid rgba(118, 69, 217, 0.3);
 }
 
 /* Formulare */
@@ -451,16 +877,16 @@ a:hover {
 
 /* Mindmap-Visualisierung */
 .mindmap-container {
+    height: 600px;
     width: 100%;
-    height: 700px;
-    background: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
     border-radius: 16px;
-    border: 1px solid var(--glass-border);
-    box-shadow: var(--glass-card-shadow);
+    background: rgba(20, 20, 43, 0.7) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(72, 71, 138, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     overflow: hidden;
-    margin-bottom: var(--standard-spacing);
+    margin-bottom: 2rem;
 }
 
 /* Filter-Sidebar */
@@ -721,15 +1147,37 @@ a:hover {
     opacity: 0.3;
 }
 
-/* Footer */
+/* Footer - Überarbeitet mit verbessertem Glassmorphismus und Responsivität */
 footer {
-    background: rgba(20, 20, 43, 0.8);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
+    background: rgba(20, 20, 43, 0.85); /* Etwas weniger transparent */
+    backdrop-filter: blur(15px); /* Stärkerer Blur */
+    -webkit-backdrop-filter: blur(15px);
+    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4); /* Schatten nach oben */
+    border-top: 1px solid rgba(255, 255, 255, 0.15); /* Hellerer Border */
     padding: 1.5rem 0;
-    border-top: 1px solid var(--glass-border);
-    color: rgba(255, 255, 255, 0.8);
-    margin-top: var(--standard-spacing);
+    color: rgba(255, 255, 255, 0.9); /* Hellerer Text */
+    margin-top: 4rem; /* Konsistenter Abstand */
+    transition: all 0.3s ease;
+}
+
+.dark footer {
+    background: rgba(14, 18, 32, 0.9); /* Dunklerer Hintergrund */
+    border-top-color: rgba(255, 255, 255, 0.08); /* Weniger sichtbarer Border */
+    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5);
+}
+
+.light footer {
+    background: rgba(240, 244, 248, 0.9); /* Heller Hintergrund */
+    border-top-color: rgba(0, 0, 0, 0.1); /* Dunklerer Border */
+    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
+    color: #4a5568; /* Dunklerer Text */
+}
+
+/* Responsivität für Footer */
+@media (max-width: 768px) {
+    footer {
+        padding: 1rem 0;
+    }
 }
 
 /* Icon-Stilisierung */
@@ -851,4 +1299,22 @@ footer {
         break-inside: avoid;
         page-break-inside: avoid;
     }
+}
+
+/* Fix for dark background not extending over the entire page */
+html, body {
+    min-height: 100vh;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    background: linear-gradient(135deg, var(--background-start), var(--background-end));
+    background-attachment: fixed;
+}
+
+/* Sticky navbar */
+.navbar.sticky-top {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
 } 
\ No newline at end of file
diff --git a/website/static/d3-extensions.js b/website/static/d3-extensions.js
new file mode 100644
index 0000000..da9c1f3
--- /dev/null
+++ b/website/static/d3-extensions.js
@@ -0,0 +1,456 @@
+/**
+ * D3.js Erweiterungen für verbesserte Mindmap-Funktionalität
+ * Diese Datei enthält zusätzliche Hilfsfunktionen und Erweiterungen für D3.js
+ */
+
+class D3Extensions {
+  /**
+   * Erstellt einen verbesserten radialen Farbverlauf
+   * @param {Object} defs - Das D3 defs Element
+   * @param {string} id - ID für den Gradienten
+   * @param {string} baseColor - Grundfarbe in hexadezimal oder RGB
+   * @returns {Object} - Das erstellte Gradient-Element
+   */
+  static createEnhancedRadialGradient(defs, id, baseColor) {
+    // Farben berechnen
+    const d3Color = d3.color(baseColor);
+    const lightColor = d3Color.brighter(0.7);
+    const darkColor = d3Color.darker(0.3);
+    const midColor = d3Color;
+    
+    // Gradient erstellen
+    const gradient = defs.append('radialGradient')
+      .attr('id', id)
+      .attr('cx', '30%')
+      .attr('cy', '30%')
+      .attr('r', '70%');
+      
+    // Farbstops hinzufügen für realistischeren Verlauf
+    gradient.append('stop')
+      .attr('offset', '0%')
+      .attr('stop-color', lightColor.formatHex());
+      
+    gradient.append('stop')
+      .attr('offset', '50%')
+      .attr('stop-color', midColor.formatHex());
+      
+    gradient.append('stop')
+      .attr('offset', '100%')
+      .attr('stop-color', darkColor.formatHex());
+      
+    return gradient;
+  }
+  
+  /**
+   * Erstellt einen Glüheffekt-Filter
+   * @param {Object} defs - D3-Referenz auf den defs-Bereich
+   * @param {String} id - ID des Filters
+   * @param {String} color - Farbe des Glüheffekts (Hex-Code)
+   * @param {Number} strength - Stärke des Glüheffekts
+   * @returns {Object} D3-Referenz auf den erstellten Filter
+   */
+  static createGlowFilter(defs, id, color = '#b38fff', strength = 5) {
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+      
+    // Unschärfe-Effekt
+    filter.append('feGaussianBlur')
+      .attr('in', 'SourceGraphic')
+      .attr('stdDeviation', strength)
+      .attr('result', 'blur');
+      
+    // Farbverstärkung für den Glüheffekt
+    filter.append('feColorMatrix')
+      .attr('in', 'blur')
+      .attr('type', 'matrix')
+      .attr('values', '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 18 -7')
+      .attr('result', 'glow');
+      
+    // Farbflut mit der angegebenen Farbe
+    filter.append('feFlood')
+      .attr('flood-color', color)
+      .attr('flood-opacity', '0.7')
+      .attr('result', 'color');
+      
+    // Zusammensetzen des Glüheffekts mit der Farbe
+    filter.append('feComposite')
+      .attr('in', 'color')
+      .attr('in2', 'glow')
+      .attr('operator', 'in')
+      .attr('result', 'glow-color');
+      
+    // Zusammenfügen aller Ebenen
+    const feMerge = filter.append('feMerge');
+    feMerge.append('feMergeNode')
+      .attr('in', 'glow-color');
+    feMerge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+      
+    return filter;
+  }
+  
+  /**
+   * Berechnet eine konsistente Farbe aus einem String
+   * @param {string} str - Eingabestring
+   * @returns {string} - Generierte Farbe als Hex-String
+   */
+  static stringToColor(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    // Basis-Farbpalette für konsistente Farben
+    const colorPalette = [
+      "#4299E1", // Blau
+      "#9F7AEA", // Lila
+      "#ED64A6", // Pink
+      "#48BB78", // Grün
+      "#ECC94B", // Gelb
+      "#F56565", // Rot
+      "#38B2AC", // Türkis
+      "#ED8936", // Orange
+      "#667EEA", // Indigo
+    ];
+    
+    // Farbe aus der Palette wählen basierend auf dem Hash
+    const colorIndex = Math.abs(hash) % colorPalette.length;
+    return colorPalette[colorIndex];
+  }
+  
+  /**
+   * Erstellt einen Schatteneffekt-Filter
+   * @param {Object} defs - D3-Referenz auf den defs-Bereich
+   * @param {String} id - ID des Filters
+   * @returns {Object} D3-Referenz auf den erstellten Filter
+   */
+  static createShadowFilter(defs, id) {
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+      
+    // Einfacher Schlagschatten
+    filter.append('feDropShadow')
+      .attr('dx', 0)
+      .attr('dy', 4)
+      .attr('stdDeviation', 4)
+      .attr('flood-color', 'rgba(0, 0, 0, 0.3)');
+      
+    return filter;
+  }
+  
+  /**
+   * Erstellt einen Glasmorphismus-Effekt-Filter
+   * @param {Object} defs - D3-Referenz auf den defs-Bereich
+   * @param {String} id - ID des Filters
+   * @returns {Object} D3-Referenz auf den erstellten Filter
+   */
+  static createGlassMorphismFilter(defs, id) {
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+      
+    // Hintergrund-Unschärfe für den Glaseffekt
+    filter.append('feGaussianBlur')
+      .attr('in', 'SourceGraphic')
+      .attr('stdDeviation', 8)
+      .attr('result', 'blur');
+      
+    // Hellere Farbe für den Glaseffekt
+    filter.append('feColorMatrix')
+      .attr('in', 'blur')
+      .attr('type', 'matrix')
+      .attr('values', '1 0 0 0 0.1 0 1 0 0 0.1 0 0 1 0 0.1 0 0 0 0.6 0')
+      .attr('result', 'glass');
+      
+    // Überlagerung mit dem Original
+    const feMerge = filter.append('feMerge');
+    feMerge.append('feMergeNode')
+      .attr('in', 'glass');
+    feMerge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+      
+    return filter;
+  }
+  
+  /**
+   * Erstellt einen verstärkten Glasmorphismus-Effekt mit Farbverlauf
+   * @param {Object} defs - D3-Referenz auf den defs-Bereich
+   * @param {String} id - ID des Filters
+   * @param {String} color1 - Erste Farbe des Verlaufs (Hex-Code)
+   * @param {String} color2 - Zweite Farbe des Verlaufs (Hex-Code)
+   * @returns {Object} D3-Referenz auf den erstellten Filter
+   */
+  static createEnhancedGlassMorphismFilter(defs, id, color1 = '#b38fff', color2 = '#58a9ff') {
+    // Farbverlauf für den Glaseffekt definieren
+    const gradientId = `gradient-${id}`;
+    const gradient = defs.append('linearGradient')
+      .attr('id', gradientId)
+      .attr('x1', '0%')
+      .attr('y1', '0%')
+      .attr('x2', '100%')
+      .attr('y2', '100%');
+      
+    gradient.append('stop')
+      .attr('offset', '0%')
+      .attr('stop-color', color1)
+      .attr('stop-opacity', '0.3');
+      
+    gradient.append('stop')
+      .attr('offset', '100%')
+      .attr('stop-color', color2)
+      .attr('stop-opacity', '0.3');
+    
+    // Filter erstellen
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+    
+    // Hintergrund-Unschärfe  
+    filter.append('feGaussianBlur')
+      .attr('in', 'SourceGraphic')
+      .attr('stdDeviation', 6)
+      .attr('result', 'blur');
+      
+    // Farbverlauf einfügen
+    const feImage = filter.append('feImage')
+      .attr('xlink:href', `#${gradientId}`)
+      .attr('result', 'gradient')
+      .attr('x', '0%')
+      .attr('y', '0%')
+      .attr('width', '100%')
+      .attr('height', '100%')
+      .attr('preserveAspectRatio', 'none');
+      
+    // Zusammenfügen aller Ebenen
+    const feMerge = filter.append('feMerge');
+    feMerge.append('feMergeNode')
+      .attr('in', 'blur');
+    feMerge.append('feMergeNode')
+      .attr('in', 'gradient');
+    feMerge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+      
+    return filter;
+  }
+  
+  /**
+   * Erstellt einen 3D-Glaseffekt mit verbesserter Tiefe und Reflexionen
+   * @param {Object} defs - D3-Referenz auf den defs-Bereich
+   * @param {String} id - ID des Filters
+   * @returns {Object} D3-Referenz auf den erstellten Filter
+   */
+  static create3DGlassEffect(defs, id) {
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+      
+    // Farbmatrix für Transparenz
+    filter.append('feColorMatrix')
+      .attr('type', 'matrix')
+      .attr('in', 'SourceGraphic')
+      .attr('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.7 0')
+      .attr('result', 'transparent');
+    
+    // Hintergrund-Unschärfe für Tiefe
+    filter.append('feGaussianBlur')
+      .attr('in', 'transparent')
+      .attr('stdDeviation', '4')
+      .attr('result', 'blurred');
+    
+    // Lichtquelle und Schattierung hinzufügen
+    const lightSource = filter.append('feSpecularLighting')
+      .attr('in', 'blurred')
+      .attr('surfaceScale', '6')
+      .attr('specularConstant', '1')
+      .attr('specularExponent', '30')
+      .attr('lighting-color', '#ffffff')
+      .attr('result', 'specular');
+      
+    lightSource.append('fePointLight')
+      .attr('x', '100')
+      .attr('y', '100')
+      .attr('z', '200');
+    
+    // Lichtreflexion verstärken
+    filter.append('feComposite')
+      .attr('in', 'specular')
+      .attr('in2', 'SourceGraphic')
+      .attr('operator', 'in')
+      .attr('result', 'specularHighlight');
+    
+    // Inneren Schatten erzeugen
+    const innerShadow = filter.append('feOffset')
+      .attr('in', 'SourceAlpha')
+      .attr('dx', '0')
+      .attr('dy', '1')
+      .attr('result', 'offsetblur');
+      
+    innerShadow.append('feGaussianBlur')
+      .attr('in', 'offsetblur')
+      .attr('stdDeviation', '2')
+      .attr('result', 'innerShadow');
+      
+    filter.append('feComposite')
+      .attr('in', 'innerShadow')
+      .attr('in2', 'SourceGraphic')
+      .attr('operator', 'out')
+      .attr('result', 'innerShadowEffect');
+    
+    // Schichten kombinieren
+    const feMerge = filter.append('feMerge');
+    feMerge.append('feMergeNode')
+      .attr('in', 'blurred');
+    feMerge.append('feMergeNode')
+      .attr('in', 'innerShadowEffect');
+    feMerge.append('feMergeNode')
+      .attr('in', 'specularHighlight');
+    feMerge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+      
+    return filter;
+  }
+  
+  /**
+   * Fügt einen Partikelsystem-Effekt für interaktive Knoten hinzu
+   * @param {Object} parent - Das übergeordnete SVG-Element
+   * @param {number} x - X-Koordinate des Zentrums
+   * @param {number} y - Y-Koordinate des Zentrums
+   * @param {string} color - Partikelfarbe (Hex-Code)
+   * @param {number} count - Anzahl der Partikel
+   */
+  static createParticleEffect(parent, x, y, color = '#b38fff', count = 5) {
+    const particles = [];
+    
+    for (let i = 0; i < count; i++) {
+      const particle = parent.append('circle')
+        .attr('cx', x)
+        .attr('cy', y)
+        .attr('r', 0)
+        .attr('fill', color)
+        .style('opacity', 0.8);
+        
+      particles.push(particle);
+      
+      // Partikel animieren
+      animateParticle(particle);
+    }
+    
+    function animateParticle(particle) {
+      // Zufällige Richtung und Geschwindigkeit
+      const angle = Math.random() * Math.PI * 2;
+      const speed = 1 + Math.random() * 2;
+      const distance = 20 + Math.random() * 30;
+      
+      // Zielposition berechnen
+      const targetX = x + Math.cos(angle) * distance;
+      const targetY = y + Math.sin(angle) * distance;
+      
+      // Animation mit zufälliger Dauer
+      const duration = 1000 + Math.random() * 500;
+      
+      particle
+        .attr('r', 0)
+        .style('opacity', 0.8)
+        .transition()
+        .duration(duration)
+        .attr('cx', targetX)
+        .attr('cy', targetY)
+        .attr('r', 2 + Math.random() * 3)
+        .style('opacity', 0)
+        .on('end', function() {
+          // Partikel entfernen
+          particle.remove();
+        });
+    }
+  }
+  
+  /**
+   * Führt eine Pulsanimation auf einem Knoten durch
+   * @param {Object} node - D3-Knoten-Selektion
+   * @returns {void}
+   */
+  static pulseAnimation(node) {
+    if (!node) return;
+    
+    const circle = node.select('circle');
+    const originalRadius = parseFloat(circle.attr('r'));
+    const originalFill = circle.attr('fill');
+    
+    // Pulsanimation
+    circle
+      .transition()
+      .duration(400)
+      .attr('r', originalRadius * 1.3)
+      .attr('fill', '#b38fff')
+      .transition()
+      .duration(400)
+      .attr('r', originalRadius)
+      .attr('fill', originalFill);
+  }
+  
+  /**
+   * Berechnet eine adaptive Schriftgröße basierend auf der Textlänge
+   * @param {string} text - Der anzuzeigende Text
+   * @param {number} maxSize - Maximale Schriftgröße in Pixel
+   * @param {number} minSize - Minimale Schriftgröße in Pixel
+   * @returns {number} - Die berechnete Schriftgröße
+   */
+  static getAdaptiveFontSize(text, maxSize = 14, minSize = 10) {
+    if (!text) return maxSize;
+    
+    // Linear die Schriftgröße basierend auf der Textlänge anpassen
+    const length = text.length;
+    if (length <= 6) return maxSize;
+    if (length >= 20) return minSize;
+    
+    // Lineare Interpolation
+    const factor = (length - 6) / (20 - 6);
+    return maxSize - factor * (maxSize - minSize);
+  }
+  
+  /**
+   * Fügt einen Pulsierenden Effekt zu einer Selektion hinzu
+   * @param {Object} selection - D3-Selektion
+   * @param {number} duration - Dauer eines Puls-Zyklus in ms
+   * @param {number} minOpacity - Minimale Opazität
+   * @param {number} maxOpacity - Maximale Opazität
+   */
+  static addPulseEffect(selection, duration = 1500, minOpacity = 0.4, maxOpacity = 0.9) {
+    function pulse() {
+      selection
+        .transition()
+        .duration(duration / 2)
+        .style('opacity', minOpacity)
+        .transition()
+        .duration(duration / 2)
+        .style('opacity', maxOpacity)
+        .on('end', pulse);
+    }
+    
+    // Initialen Stil setzen
+    selection.style('opacity', maxOpacity);
+    
+    // Pulsanimation starten
+    pulse();
+  }
+}
+
+// Globale Verfügbarkeit sicherstellen
+window.D3Extensions = D3Extensions;
diff --git a/website/static/img/favicon-gen.py b/website/static/img/favicon-gen.py
index 9ff7f79..ba6faeb 100644
--- a/website/static/img/favicon-gen.py
+++ b/website/static/img/favicon-gen.py
@@ -1,4 +1,6 @@
 #!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+
 import os
 from PIL import Image
 import cairosvg
diff --git a/website/static/js/main.js b/website/static/js/main.js
index 4ce27cf..8ce511b 100644
--- a/website/static/js/main.js
+++ b/website/static/js/main.js
@@ -2,284 +2,222 @@
  * MindMap - Hauptdatei für globale JavaScript-Funktionen
  */
 
-// Globales Objekt für App-Funktionen
+// Import des ChatGPT-Assistenten
+import ChatGPTAssistant from './modules/chatgpt-assistant.js';
+
+/**
+ * Hauptmodul für die MindMap-Anwendung
+ * Verwaltet die globale Anwendungslogik
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialisiere die Anwendung
+  MindMap.init();
+  
+  // Wende Dunkel-/Hellmodus an
+  const isDarkMode = localStorage.getItem('darkMode') === 'dark';
+  document.documentElement.classList.toggle('dark', isDarkMode);
+});
+
+/**
+ * Hauptobjekt der MindMap-Anwendung
+ */
 const MindMap = {
+  // App-Status
+  initialized: false,
+  darkMode: document.documentElement.classList.contains('dark'),
+  pageInitializers: {},
+  currentPage: document.body.dataset.page,
+  
   /**
-   * Initialisiert die Anwendung
+   * Initialisiert die MindMap-Anwendung
    */
-  init: function() {
-    // Initialisiere alle Komponenten
-    this.setupDarkMode();
-    this.setupTooltips();
-    this.setupUtilityFunctions();
+  init() {
+    if (this.initialized) return;
     
-    // Prüfe, ob spezifische Seiten-Initialisierer vorhanden sind
-    const currentPage = document.body.dataset.page;
-    if (currentPage && this.pageInitializers[currentPage]) {
-      this.pageInitializers[currentPage]();
+    console.log('MindMap-Anwendung wird initialisiert...');
+    
+    // Seiten-spezifische Initialisierer aufrufen
+    if (this.currentPage && this.pageInitializers[this.currentPage]) {
+      this.pageInitializers[this.currentPage]();
     }
     
-    console.log('MindMap App initialisiert');
+    // Event-Listener einrichten
+    this.setupEventListeners();
+    
+    // Dunkel-/Hellmodus aus LocalStorage wiederherstellen
+    if (localStorage.getItem('darkMode') === 'dark') {
+      document.documentElement.classList.add('dark');
+      this.darkMode = true;
+    }
+    
+    // Mindmap initialisieren, falls auf der richtigen Seite
+    this.initializeMindmap();
+    
+    this.initialized = true;
+  },
+  
+  /**
+   * Initialisiert die D3.js Mindmap-Visualisierung
+   */
+  initializeMindmap() {
+    // Prüfe, ob wir auf der Mindmap-Seite sind
+    const mindmapContainer = document.getElementById('mindmap-container');
+    if (!mindmapContainer) return;
+
+    try {
+      console.log('Initialisiere Mindmap...');
+      
+      // Initialisiere die Mindmap
+      const mindmap = new MindMapVisualization('#mindmap-container', {
+        height: mindmapContainer.clientHeight || 600,
+        nodeRadius: 18,
+        selectedNodeRadius: 24,
+        linkDistance: 150,
+        onNodeClick: this.handleNodeClick.bind(this)
+      });
+      
+      // Globale Referenz für andere Module
+      window.mindmapInstance = mindmap;
+      
+      // Event-Listener für Zoom-Buttons
+      const zoomInBtn = document.getElementById('zoom-in-btn');
+      if (zoomInBtn) {
+        zoomInBtn.addEventListener('click', () => {
+          const svg = d3.select('#mindmap-container svg');
+          const currentZoom = d3.zoomTransform(svg.node());
+          const newScale = currentZoom.k * 1.3;
+          svg.transition().duration(300).call(
+            d3.zoom().transform,
+            d3.zoomIdentity.translate(currentZoom.x, currentZoom.y).scale(newScale)
+          );
+        });
+      }
+      
+      const zoomOutBtn = document.getElementById('zoom-out-btn');
+      if (zoomOutBtn) {
+        zoomOutBtn.addEventListener('click', () => {
+          const svg = d3.select('#mindmap-container svg');
+          const currentZoom = d3.zoomTransform(svg.node());
+          const newScale = currentZoom.k / 1.3;
+          svg.transition().duration(300).call(
+            d3.zoom().transform,
+            d3.zoomIdentity.translate(currentZoom.x, currentZoom.y).scale(newScale)
+          );
+        });
+      }
+      
+      const centerBtn = document.getElementById('center-btn');
+      if (centerBtn) {
+        centerBtn.addEventListener('click', () => {
+          const svg = d3.select('#mindmap-container svg');
+          svg.transition().duration(500).call(
+            d3.zoom().transform,
+            d3.zoomIdentity.scale(1)
+          );
+        });
+      }
+      
+      // Event-Listener für Add-Thought-Button
+      const addThoughtBtn = document.getElementById('add-thought-btn');
+      if (addThoughtBtn) {
+        addThoughtBtn.addEventListener('click', () => {
+          this.showAddThoughtDialog();
+        });
+      }
+      
+      // Event-Listener für Connect-Button
+      const connectBtn = document.getElementById('connect-btn');
+      if (connectBtn) {
+        connectBtn.addEventListener('click', () => {
+          this.showConnectDialog();
+        });
+      }
+    } catch (error) {
+      console.error('Fehler bei der Initialisierung der Mindmap:', error);
+    }
+  },
+  
+  /**
+   * Handler für Klick auf einen Knoten in der Mindmap
+   * @param {Object} node - Der angeklickte Knoten
+   */
+  handleNodeClick(node) {
+    console.log('Knoten wurde angeklickt:', node);
+    
+    // Hier könnte man Logik hinzufügen, um Detailinformationen anzuzeigen
+    // oder den ausgewählten Knoten hervorzuheben
+    const detailsContainer = document.getElementById('node-details');
+    if (detailsContainer) {
+      detailsContainer.innerHTML = `
+        <div class="p-4">
+          <h3 class="text-xl font-bold mb-2">${node.name}</h3>
+          <p class="text-gray-300 mb-4">${node.description || 'Keine Beschreibung verfügbar.'}</p>
+          
+          <div class="flex items-center justify-between">
+            <span class="text-sm">
+              <i class="fas fa-brain mr-1"></i> ${node.thought_count || 0} Gedanken
+            </span>
+            <button class="px-3 py-1 bg-purple-600 bg-opacity-30 rounded-lg text-sm">
+              <i class="fas fa-plus mr-1"></i> Gedanke hinzufügen
+            </button>
+          </div>
+        </div>
+      `;
+      
+      // Button zum Hinzufügen eines Gedankens
+      const addThoughtBtn = detailsContainer.querySelector('button');
+      addThoughtBtn.addEventListener('click', () => {
+        this.showAddThoughtDialog(node);
+      });
+    }
+  },
+  
+  /**
+   * Dialog zum Hinzufügen eines neuen Knotens
+   */
+  showAddNodeDialog() {
+    // Diese Funktionalität würde in einer vollständigen Implementierung eingebunden werden
+    alert('Diese Funktion steht bald zur Verfügung!');
+  },
+  
+  /**
+   * Dialog zum Hinzufügen eines neuen Gedankens zu einem Knoten
+   */
+  showAddThoughtDialog(node) {
+    // Diese Funktionalität würde in einer vollständigen Implementierung eingebunden werden
+    alert('Diese Funktion steht bald zur Verfügung!');
+  },
+  
+  /**
+   * Dialog zum Verbinden von Knoten
+   */
+  showConnectDialog() {
+    // Diese Funktionalität würde in einer vollständigen Implementierung eingebunden werden
+    alert('Diese Funktion steht bald zur Verfügung!');
   },
 
   /**
-   * Dark Mode Setup
+   * Richtet Event-Listener für die Benutzeroberfläche ein
    */
-  setupDarkMode: function() {
-    // Prüfe, ob Dark Mode bevorzugt wird
-    const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  setupEventListeners() {
+    // Event-Listener für Dark Mode-Wechsel
+    document.addEventListener('darkModeToggled', (event) => {
+      this.darkMode = event.detail.isDark;
+    });
     
-    // Prüfe gespeicherte Einstellung
-    const savedMode = localStorage.getItem('darkMode');
-    
-    // Setze Dark Mode basierend auf gespeicherter Einstellung oder Systempräferenz
-    if (savedMode === 'dark' || (savedMode === null && prefersDarkMode)) {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-    
-    // Höre auf System-Präferenzänderungen
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-      if (localStorage.getItem('darkMode') === null) {
-        if (e.matches) {
-          document.documentElement.classList.add('dark');
-        } else {
-          document.documentElement.classList.remove('dark');
+    // Responsive Anpassungen bei Fenstergröße
+    window.addEventListener('resize', () => {
+      if (window.mindmapInstance) {
+        const container = document.getElementById('mindmap-container');
+        if (container) {
+          window.mindmapInstance.width = container.clientWidth;
+          window.mindmapInstance.height = container.clientHeight;
         }
       }
     });
-    
-    // Dark Mode Toggle-Listener (wird über Alpine.js gehandelt)
-    document.addEventListener('darkModeToggled', function(e) {
-      const isDark = e.detail.isDark;
-      localStorage.setItem('darkMode', isDark ? 'dark' : 'light');
-    });
-  },
-
-  /**
-   * Tooltips mit Tippy.js einrichten
-   */
-  setupTooltips: function() {
-    // Prüfe, ob Tippy.js geladen ist
-    if (typeof tippy !== 'undefined') {
-      // Allgemeine Tooltips
-      tippy('[data-tippy-content]', {
-        theme: 'mindmap',
-        animation: 'scale',
-        arrow: true
-      });
-      
-      // Mindmap-Knoten Tooltips
-      tippy('.mindmap-node', {
-        content(reference) {
-          const title = reference.getAttribute('data-title');
-          const desc = reference.getAttribute('data-description');
-          return `<div class="node-tooltip"><strong>${title}</strong>${desc ? `<p>${desc}</p>` : ''}</div>`;
-        },
-        allowHTML: true,
-        theme: 'mindmap',
-        animation: 'scale',
-        arrow: true,
-        placement: 'top'
-      });
-    }
-  },
-
-  /**
-   * Hilfsfunktionen einrichten
-   */
-  setupUtilityFunctions: function() {
-    // Axios-Interceptor für API-Anfragen
-    if (typeof axios !== 'undefined') {
-      axios.interceptors.request.use(function(config) {
-        // Hier könnten wir z.B. einen CSRF-Token hinzufügen
-        return config;
-      }, function(error) {
-        return Promise.reject(error);
-      });
-      
-      axios.interceptors.response.use(function(response) {
-        return response;
-      }, function(error) {
-        // Behandle Fehler und zeige Benachrichtigungen
-        const message = error.response && error.response.data && error.response.data.error
-          ? error.response.data.error
-          : 'Ein Fehler ist aufgetreten.';
-          
-        MindMap.showNotification(message, 'error');
-        return Promise.reject(error);
-      });
-    }
-  },
-
-  /**
-   * Zeigt eine Benachrichtigung an
-   * @param {string} message - Nachrichtentext
-   * @param {string} type - Art der Nachricht: 'success', 'error', 'info'
-   * @param {number} duration - Anzeigedauer in ms
-   */
-  showNotification: function(message, type = 'info', duration = 5000) {
-    const notification = document.createElement('div');
-    notification.className = `notification notification-${type} glass-effect`;
-    
-    let icon = '';
-    switch(type) {
-      case 'success':
-        icon = '<i class="fa-solid fa-circle-check"></i>';
-        break;
-      case 'error': 
-        icon = '<i class="fa-solid fa-circle-exclamation"></i>';
-        break;
-      default:
-        icon = '<i class="fa-solid fa-circle-info"></i>';
-    }
-    
-    notification.innerHTML = `
-      <div class="flex items-start">
-        <div class="flex-shrink-0">${icon}</div>
-        <div class="ml-3 flex-1">${message}</div>
-        <button class="ml-auto" onclick="this.parentNode.parentNode.remove()">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
-      </div>
-    `;
-    
-    // Füge zur Notification-Area hinzu
-    let notificationArea = document.querySelector('.notification-area');
-    if (!notificationArea) {
-      notificationArea = document.createElement('div');
-      notificationArea.className = 'notification-area fixed bottom-4 right-4 z-50 flex flex-col space-y-2 max-w-sm';
-      document.body.appendChild(notificationArea);
-    }
-    
-    notificationArea.appendChild(notification);
-    
-    // Animationen
-    setTimeout(() => {
-      notification.style.opacity = '1';
-      notification.style.transform = 'translateY(0)';
-    }, 10);
-    
-    // Automatisches Entfernen
-    if (duration > 0) {
-      setTimeout(() => {
-        notification.style.opacity = '0';
-        notification.style.transform = 'translateY(10px)';
-        setTimeout(() => {
-          notification.remove();
-        }, 300);
-      }, duration);
-    }
-  },
-
-  /**
-   * Seitenspezifische Initialisierer
-   */
-  pageInitializers: {
-    // Startseite
-    'home': function() {
-      console.log('Startseite initialisiert');
-      // Hier kommen spezifische Funktionen für die Startseite
-    },
-    
-    // Mindmap-Seite
-    'mindmap': function() {
-      console.log('Mindmap-Seite initialisiert');
-      // Hier werden mindmap-spezifische Funktionen aufgerufen
-      // Die tatsächliche D3.js-Implementierung wird in einer separaten Datei sein
-    },
-    
-    // Profilseite
-    'profile': function() {
-      console.log('Profilseite initialisiert');
-      // Profil-spezifische Funktionen
-    },
-    
-    // Suchseite
-    'search': function() {
-      console.log('Suchseite initialisiert');
-      // Such-spezifische Funktionen
-    }
   }
 };
 
-// Initialisiere die App nach dem Laden der Seite
-document.addEventListener('DOMContentLoaded', () => {
-  MindMap.init();
-  
-  // Höre auf Storage-Änderungen, um Dark Mode zwischen Tabs zu synchronisieren
-  window.addEventListener('storage', (event) => {
-    if (event.key === 'darkMode') {
-      const isDarkMode = event.newValue === 'true';
-      // Aktualisiere das DOM
-      document.documentElement.classList.toggle('dark', isDarkMode);
-      
-      // Aktualisiere Alpine.js, falls es bereits geladen wurde
-      if (window.Alpine) {
-        const darkModeComponent = Alpine.store('darkMode');
-        if (darkModeComponent) {
-          darkModeComponent.enabled = isDarkMode;
-        }
-      }
-    }
-  });
-  
-  // Lade die bevorzugte Farbeinstellung des Betriebssystems wenn nichts gespeichert ist
-  if (localStorage.getItem('darkMode') === null) {
-    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    localStorage.setItem('darkMode', prefersDarkMode);
-    document.documentElement.classList.toggle('dark', prefersDarkMode);
-  }
-
-  // UI-Verbesserungen
-  
-  // Füge Schatten zu Karten hinzu, wenn sie sichtbar werden
-  const cards = document.querySelectorAll('.card');
-  if ('IntersectionObserver' in window) {
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          setTimeout(() => {
-            entry.target.classList.add('shadow-md', 'opacity-100');
-            entry.target.classList.remove('opacity-0', 'translate-y-4');
-          }, entry.target.dataset.delay || 0);
-        }
-      });
-    }, { threshold: 0.1 });
-    
-    cards.forEach((card, index) => {
-      card.classList.add('transition-all', 'duration-500', 'opacity-0', 'translate-y-4');
-      card.dataset.delay = index * 100;
-      observer.observe(card);
-    });
-  }
-  
-  // Verbesserte Formular-Validierung
-  const forms = document.querySelectorAll('form');
-  forms.forEach(form => {
-    const inputs = form.querySelectorAll('input, textarea, select');
-    
-    inputs.forEach(input => {
-      // Füge Validierungsklassen hinzu, wenn ein Input fokussiert wurde
-      input.addEventListener('blur', () => {
-        if (input.value.trim() !== '') {
-          input.classList.add('has-content');
-        } else {
-          input.classList.remove('has-content');
-        }
-        
-        if (input.checkValidity()) {
-          input.classList.remove('is-invalid');
-          input.classList.add('is-valid');
-        } else {
-          input.classList.remove('is-valid');
-          input.classList.add('is-invalid');
-        }
-      });
-    });
-  });
-});
-
-// Support für Alpine.js
+// Globale Export für andere Module
 window.MindMap = MindMap; 
\ No newline at end of file
diff --git a/website/static/js/modules/chatgpt-assistant.js b/website/static/js/modules/chatgpt-assistant.js
new file mode 100644
index 0000000..4083b15
--- /dev/null
+++ b/website/static/js/modules/chatgpt-assistant.js
@@ -0,0 +1,280 @@
+/**
+ * ChatGPT Assistent Modul
+ * Verwaltet die Interaktion mit der OpenAI API und die Benutzeroberfläche des Assistenten
+ */
+
+class ChatGPTAssistant {
+    constructor() {
+        this.messages = [];
+        this.isOpen = false;
+        this.isLoading = false;
+        this.container = null;
+        this.chatHistory = null;
+        this.inputField = null;
+    }
+
+    /**
+     * Initialisiert den Assistenten und fügt die UI zum DOM hinzu
+     */
+    init() {
+        // Assistent-Container erstellen
+        this.createAssistantUI();
+        
+        // Event-Listener hinzufügen
+        this.setupEventListeners();
+        
+        // Ersten Willkommensnachricht anzeigen
+        this.addMessage("assistant", "Wie kann ich dir heute helfen?");
+    }
+
+    /**
+     * Erstellt die UI-Elemente für den Assistenten
+     */
+    createAssistantUI() {
+        // Hauptcontainer erstellen
+        this.container = document.createElement('div');
+        this.container.id = 'chatgpt-assistant';
+        this.container.className = 'fixed bottom-4 right-4 z-50 flex flex-col';
+        
+        // Button zum Öffnen/Schließen des Assistenten
+        const toggleButton = document.createElement('button');
+        toggleButton.id = 'assistant-toggle';
+        toggleButton.className = 'ml-auto bg-primary-600 hover:bg-primary-700 text-white rounded-full p-3 shadow-lg transition-all duration-300 mb-2';
+        toggleButton.innerHTML = '<i class="fas fa-robot text-xl"></i>';
+        
+        // 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';
+        
+        // Chat-Header
+        const header = document.createElement('div');
+        header.className = 'bg-primary-600 text-white p-3 flex items-center justify-between';
+        header.innerHTML = `
+            <div class="flex items-center">
+                <i class="fas fa-robot mr-2"></i>
+                <span>KI-Assistent</span>
+            </div>
+            <button id="assistant-close" class="text-white hover:text-gray-200">
+                <i class="fas fa-times"></i>
+            </button>
+        `;
+        
+        // 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';
+        
+        // Chat-Eingabe
+        const inputContainer = document.createElement('div');
+        inputContainer.className = 'border-t border-gray-200 dark:border-dark-600 p-3 flex items-center';
+        
+        this.inputField = document.createElement('input');
+        this.inputField.type = 'text';
+        this.inputField.placeholder = 'Frage stellen...';
+        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');
+        sendButton.id = 'assistant-send';
+        sendButton.className = 'bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-r-lg';
+        sendButton.innerHTML = '<i class="fas fa-paper-plane"></i>';
+        
+        // Elemente zusammenfügen
+        inputContainer.appendChild(this.inputField);
+        inputContainer.appendChild(sendButton);
+        
+        chatContainer.appendChild(header);
+        chatContainer.appendChild(this.chatHistory);
+        chatContainer.appendChild(inputContainer);
+        
+        this.container.appendChild(toggleButton);
+        this.container.appendChild(chatContainer);
+        
+        // Zum DOM hinzufügen
+        document.body.appendChild(this.container);
+    }
+
+    /**
+     * Richtet Event-Listener für die Benutzeroberfläche ein
+     */
+    setupEventListeners() {
+        // Toggle-Button
+        const toggleButton = document.getElementById('assistant-toggle');
+        toggleButton.addEventListener('click', () => this.toggleAssistant());
+        
+        // Schließen-Button
+        const closeButton = document.getElementById('assistant-close');
+        closeButton.addEventListener('click', () => this.toggleAssistant(false));
+        
+        // Senden-Button
+        const sendButton = document.getElementById('assistant-send');
+        sendButton.addEventListener('click', () => this.sendMessage());
+        
+        // Enter-Taste im Eingabefeld
+        this.inputField.addEventListener('keyup', (e) => {
+            if (e.key === 'Enter') {
+                this.sendMessage();
+            }
+        });
+    }
+
+    /**
+     * Öffnet oder schließt den Assistenten
+     * @param {boolean} state - Optional: erzwingt einen bestimmten Zustand
+     */
+    toggleAssistant(state = null) {
+        const chatContainer = document.getElementById('assistant-chat');
+        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();
+        } else {
+            chatContainer.classList.remove('max-h-96', 'opacity-100');
+            chatContainer.classList.add('max-h-0', 'opacity-0');
+        }
+    }
+
+    /**
+     * Fügt eine Nachricht zum Chat-Verlauf hinzu
+     * @param {string} sender - 'user' oder 'assistant'
+     * @param {string} text - Nachrichtentext
+     */
+    addMessage(sender, text) {
+        // Nachricht zum Verlauf hinzufügen
+        this.messages.push({ role: sender, content: text });
+        
+        // DOM-Element erstellen
+        const messageEl = document.createElement('div');
+        messageEl.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
+        
+        const bubble = document.createElement('div');
+        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;
+        
+        messageEl.appendChild(bubble);
+        this.chatHistory.appendChild(messageEl);
+        
+        // Scroll zum Ende des Verlaufs
+        this.chatHistory.scrollTop = this.chatHistory.scrollHeight;
+    }
+
+    /**
+     * Sendet die Benutzernachricht an den Server und zeigt die Antwort an
+     */
+    async sendMessage() {
+        const userInput = this.inputField.value.trim();
+        if (!userInput || this.isLoading) return;
+        
+        // Benutzernachricht anzeigen
+        this.addMessage('user', userInput);
+        
+        // Eingabefeld zurücksetzen
+        this.inputField.value = '';
+        
+        // Ladeindikator anzeigen
+        this.isLoading = true;
+        this.showLoadingIndicator();
+        
+        try {
+            // Anfrage an den Server senden
+            const response = await fetch('/api/assistant', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    messages: this.messages
+                }),
+            });
+            
+            if (!response.ok) {
+                throw new Error('Netzwerkfehler oder Serverproblem');
+            }
+            
+            const data = await response.json();
+            
+            // Ladeindikator entfernen
+            this.removeLoadingIndicator();
+            
+            // Antwort anzeigen
+            this.addMessage('assistant', data.response);
+        } catch (error) {
+            console.error('Fehler bei der Kommunikation mit dem Assistenten:', error);
+            
+            // Ladeindikator entfernen
+            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.');
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    /**
+     * Zeigt einen Ladeindikator im Chat an
+     */
+    showLoadingIndicator() {
+        const loadingEl = document.createElement('div');
+        loadingEl.id = 'assistant-loading';
+        loadingEl.className = 'flex justify-start';
+        
+        const bubble = document.createElement('div');
+        bubble.className = 'bg-gray-100 dark:bg-dark-700 text-gray-800 dark:text-white rounded-lg py-2 px-3';
+        bubble.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>';
+        
+        loadingEl.appendChild(bubble);
+        this.chatHistory.appendChild(loadingEl);
+        
+        // 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();
+        }
+    }
+}
+
+// Exportiere die Klasse für die Verwendung in anderen Modulen
+export default ChatGPTAssistant; 
\ No newline at end of file
diff --git a/website/static/js/modules/mindmap.js b/website/static/js/modules/mindmap.js
index ed394a2..b6a2e04 100644
--- a/website/static/js/modules/mindmap.js
+++ b/website/static/js/modules/mindmap.js
@@ -32,8 +32,18 @@ class MindMapVisualization {
     this.tooltipDiv = null;
     this.isLoading = true;
     
-    this.init();
-    this.setupDefaultNodes();
+    // Sicherstellen, dass der Container bereit ist
+    if (this.container.node()) {
+      this.init();
+      this.setupDefaultNodes();
+      
+      // Sofortige Datenladung
+      window.setTimeout(() => {
+        this.loadData();
+      }, 100);
+    } else {
+      console.error('Mindmap-Container nicht gefunden:', containerSelector);
+    }
   }
   
   // Standardknoten als Fallback einrichten, falls die API nicht reagiert
@@ -62,6 +72,9 @@ class MindMapVisualization {
   init() {
     // SVG erstellen, wenn noch nicht vorhanden
     if (!this.svg) {
+      // Container zuerst leeren
+      this.container.html('');
+      
       this.svg = this.container
         .append('svg')
         .attr('width', '100%')
@@ -80,12 +93,24 @@ class MindMapVisualization {
       this.g = this.svg.append('g');
       
       // Tooltip initialisieren
-      this.tooltipDiv = d3.select('body')
-        .append('div')
-        .attr('class', 'node-tooltip')
-        .style('opacity', 0)
-        .style('position', 'absolute')
-        .style('pointer-events', 'none');
+      if (!d3.select('body').select('.node-tooltip').size()) {
+        this.tooltipDiv = d3.select('body')
+          .append('div')
+          .attr('class', 'node-tooltip')
+          .style('opacity', 0)
+          .style('position', 'absolute')
+          .style('pointer-events', 'none')
+          .style('background', 'rgba(20, 20, 40, 0.9)')
+          .style('color', '#ffffff')
+          .style('border', '1px solid rgba(160, 80, 255, 0.2)')
+          .style('border-radius', '6px')
+          .style('padding', '8px 12px')
+          .style('font-size', '14px')
+          .style('max-width', '250px')
+          .style('box-shadow', '0 10px 25px rgba(0, 0, 0, 0.5), 0 0 10px rgba(160, 80, 255, 0.2)');
+      } else {
+        this.tooltipDiv = d3.select('body').select('.node-tooltip');
+      }
     }
     
     // Force-Simulation initialisieren
@@ -94,6 +119,9 @@ class MindMapVisualization {
       .force('charge', d3.forceManyBody().strength(this.chargeStrength))
       .force('center', d3.forceCenter(this.width / 2, this.height / 2).strength(this.centerForce))
       .force('collision', d3.forceCollide().radius(this.nodeRadius * 2));
+      
+    // Globale Mindmap-Instanz für externe Zugriffe setzen
+    window.mindmapInstance = this;
   }
   
   handleZoom(transform) {
@@ -118,13 +146,25 @@ class MindMapVisualization {
       // Ladeindikator anzeigen
       this.showLoading();
       
+      // Verwende sofort die Standarddaten für eine schnelle erste Anzeige
+      this.nodes = [...this.defaultNodes];
+      this.links = [...this.defaultLinks];
+      
+      // Visualisierung sofort aktualisieren
+      this.isLoading = false;
+      this.updateVisualization();
+      
+      // API-Aufruf mit längeren Timeout im Hintergrund durchführen
       try {
-        // API-Aufruf mit Timeout versehen
         const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 Sekunden Timeout
+        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 Sekunden Timeout
         
         const response = await fetch('/api/mindmap', { 
-          signal: controller.signal 
+          signal: controller.signal,
+          headers: {
+            'Cache-Control': 'no-cache', 
+            'Pragma': 'no-cache'
+          }
         });
         clearTimeout(timeoutId);
         
@@ -135,8 +175,8 @@ class MindMapVisualization {
         const data = await response.json();
         
         if (!data || !data.nodes || data.nodes.length === 0) {
-          console.warn('Keine Mindmap-Daten vorhanden, verwende Standard-Daten.');
-          throw new Error('Keine Daten');
+          console.warn('Keine Mindmap-Daten vorhanden, verwende weiterhin Standard-Daten.');
+          return; // Behalte Standarddaten bei
         }
         
         // Flache Liste von Knoten und Verbindungen erstellen
@@ -144,32 +184,38 @@ class MindMapVisualization {
         this.links = [];
         this.processHierarchicalData(data.nodes);
         
+        // Visualisierung aktualisieren mit den tatsächlichen Daten
+        this.updateVisualization();
+        
+        // Status auf bereit setzen
+        this.container.attr('data-status', 'ready');
+        
       } catch (error) {
-        console.error('Fehler beim Laden der Mindmap-Daten:', error);
-        // Fallback zu Standarddaten
-        this.nodes = [...this.defaultNodes];
-        this.links = [...this.defaultLinks];
+        console.warn('Fehler beim Laden der Mindmap-Daten, verwende Standarddaten:', error);
+        // Fallback zu Standarddaten ist bereits geschehen
+        // Stellen Sie sicher, dass der Status korrekt gesetzt wird
+        this.container.attr('data-status', 'ready');
       }
       
-      // Visualisierung aktualisieren
-      this.isLoading = false;
-      this.updateVisualization();
-      
     } catch (error) {
       console.error('Kritischer Fehler bei der Mindmap-Darstellung:', error);
       this.showError('Fehler beim Laden der Mindmap-Daten. Bitte laden Sie die Seite neu.');
+      this.container.attr('data-status', 'error');
     }
   }
   
   showLoading() {
-    this.container.html(`
-      <div class="flex justify-center items-center h-full">
-        <div class="text-center">
-          <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-primary-400 mx-auto mb-4"></div>
-          <p class="text-lg text-white">Mindmap wird geladen...</p>
+    // Element nur leeren, wenn es noch kein SVG enthält
+    if (!this.container.select('svg').size()) {
+      this.container.html(`
+        <div class="flex justify-center items-center h-full">
+          <div class="text-center">
+            <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-primary-400 mx-auto mb-4"></div>
+            <p class="text-lg text-white">Mindmap wird geladen...</p>
+          </div>
         </div>
-      </div>
-    `);
+      `);
+    }
   }
   
   processHierarchicalData(hierarchicalNodes, parentId = null) {
@@ -230,6 +276,9 @@ class MindMapVisualization {
       this.init();
     }
 
+    // Performance-Optimierung: Deaktiviere Transition während des Datenladens
+    const useTransitions = false;
+
     // Links (Edges) erstellen
     this.linkElements = this.g.selectAll('.link')
       .data(this.links)
@@ -263,6 +312,39 @@ class MindMapVisualization {
         .attr('fill', '#ffffff50');
     }
     
+    // Simplified Effekte definieren, falls noch nicht vorhanden
+    if (!this.svg.select('#glow').node()) {
+      const defs = this.svg.select('defs').size() ? this.svg.select('defs') : this.svg.append('defs');
+      
+      // Glow-Effekt für Knoten
+      const filter = defs.append('filter')
+        .attr('id', 'glow')
+        .attr('x', '-50%')
+        .attr('y', '-50%')
+        .attr('width', '200%')
+        .attr('height', '200%');
+      
+      filter.append('feGaussianBlur')
+        .attr('stdDeviation', '1')
+        .attr('result', 'blur');
+        
+      filter.append('feComposite')
+        .attr('in', 'SourceGraphic')
+        .attr('in2', 'blur')
+        .attr('operator', 'over');
+      
+      // Blur-Effekt für Schatten
+      const blurFilter = defs.append('filter')
+        .attr('id', 'blur')
+        .attr('x', '-50%')
+        .attr('y', '-50%')
+        .attr('width', '200%')
+        .attr('height', '200%');
+      
+      blurFilter.append('feGaussianBlur')
+        .attr('stdDeviation', '1');
+    }
+    
     // Knoten-Gruppe erstellen/aktualisieren
     const nodeGroups = this.g.selectAll('.node-group')
       .data(this.nodes)
@@ -303,7 +385,7 @@ class MindMapVisualization {
             .style('font-size', '12px')
             .style('font-weight', '500')
             .style('pointer-events', 'none')
-            .text(d => d.name);
+            .text(d => d.name.length > 12 ? d.name.slice(0, 10) + '...' : d.name);
           
           // Interaktivität hinzufügen
           group
@@ -320,60 +402,29 @@ class MindMapVisualization {
           
           // Text aktualisieren
           update.select('.node-label')
-            .text(d => d.name);
+            .text(d => d.name.length > 12 ? d.name.slice(0, 10) + '...' : d.name);
             
           return update;
         },
         exit => exit.remove()
       );
     
-    // Effekte definieren, falls noch nicht vorhanden
-    if (!this.svg.select('#glow').node()) {
-      const defs = this.svg.select('defs').size() ? this.svg.select('defs') : this.svg.append('defs');
-      
-      // Glow-Effekt für Knoten
-      const filter = defs.append('filter')
-        .attr('id', 'glow')
-        .attr('x', '-50%')
-        .attr('y', '-50%')
-        .attr('width', '200%')
-        .attr('height', '200%');
-      
-      filter.append('feGaussianBlur')
-        .attr('stdDeviation', '2')
-        .attr('result', 'blur');
-        
-      filter.append('feComposite')
-        .attr('in', 'SourceGraphic')
-        .attr('in2', 'blur')
-        .attr('operator', 'over');
-      
-      // Blur-Effekt für Schatten
-      const blurFilter = defs.append('filter')
-        .attr('id', 'blur')
-        .attr('x', '-50%')
-        .attr('y', '-50%')
-        .attr('width', '200%')
-        .attr('height', '200%');
-      
-      blurFilter.append('feGaussianBlur')
-        .attr('stdDeviation', '2');
-    }
-    
     // Einzelne Elemente für direkten Zugriff speichern
     this.nodeElements = this.g.selectAll('.node');
     this.textElements = this.g.selectAll('.node-label');
     
-    // Simulation starten
+    // Performance-Optimierung: Weniger Simulationsschritte für schnellere Stabilisierung
     this.simulation
       .nodes(this.nodes)
-      .on('tick', () => this.ticked());
+      .on('tick', () => this.ticked())
+      .alpha(0.3) // Reduzierter Wert für schnellere Stabilisierung
+      .alphaDecay(0.05); // Erhöhter Wert für schnellere Stabilisierung
     
     this.simulation.force('link')
       .links(this.links);
     
     // Simulation neu starten
-    this.simulation.alpha(1).restart();
+    this.simulation.restart();
   }
   
   ticked() {
diff --git a/website/static/mindmap.js b/website/static/mindmap.js
index 15d2732..26a6c84 100644
--- a/website/static/mindmap.js
+++ b/website/static/mindmap.js
@@ -1,49 +1,1401 @@
-// Erstelle eine einfache Mindmap-Struktur mit D3.js
-const data = {
-    name: "Wissenschaftliche Mindmap",
-    children: [
-        { name: "Forschung", children: [{ name: "Theorie" }, { name: "Experimente" }] },
-        { name: "Technologie", children: [{ name: "Datenbanken" }, { name: "Cloud Computing" }] }
-    ]
-};
+/**
+ * MindMap D3.js Modul
+ * Visualisiert die Mindmap mit D3.js
+ */
 
-// D3.js-Setup für die Darstellung der Mindmap
-const width = 800;
-const height = 600;
-const margin = 50;
+class MindMapVisualization {
+  constructor(containerSelector, options = {}) {
+    this.containerSelector = containerSelector;
+    this.container = d3.select(containerSelector);
+    this.width = options.width || this.container.node().clientWidth || 800;
+    this.height = options.height || 600;
+    this.nodeRadius = options.nodeRadius || 22;
+    this.selectedNodeRadius = options.selectedNodeRadius || 28;
+    this.linkDistance = options.linkDistance || 150;
+    this.chargeStrength = options.chargeStrength || -1000;
+    this.centerForce = options.centerForce || 0.15;
+    this.onNodeClick = options.onNodeClick || ((node) => console.log('Node clicked:', node));
 
-const svg = d3.select("#mindmap")
-    .append("svg")
-    .attr("width", width)
-    .attr("height", height);
+    this.nodes = [];
+    this.links = [];
+    this.simulation = null;
+    this.svg = null;
+    this.linkElements = null;
+    this.nodeElements = null;
+    this.textElements = null;
+    this.tooltipEnabled = options.tooltipEnabled !== undefined ? options.tooltipEnabled : true;
+    
+    this.mouseoverNode = null;
+    this.selectedNode = null;
+    
+    this.zoomFactor = 1;
+    this.tooltipDiv = null;
+    this.isLoading = true;
+    
+    // Erweiterte Farbpalette für Knotentypen
+    this.colorPalette = {
+      'default': '#b38fff',
+      'root': '#7e3ff2',
+      'philosophy': '#58a9ff',
+      'science': '#38b2ac',
+      'technology': '#6366f1',
+      'arts': '#ec4899',
+      'ai': '#8b5cf6',
+      'ethics': '#f59e0b',
+      'math': '#06b6d4',
+      'psychology': '#10b981',
+      'biology': '#84cc16',
+      'literature': '#f43f5e',
+      'history': '#fb7185',
+      'economics': '#fbbf24',
+      'sociology': '#a78bfa',
+      'design': '#f472b6',
+      'languages': '#4ade80'
+    };
+    
+    // Sicherstellen, dass der Container bereit ist
+    if (this.container.node()) {
+      this.init();
+      this.setupDefaultNodes();
+      
+      // Sofortige Datenladung
+      window.setTimeout(() => {
+        this.loadData();
+      }, 100);
+    } else {
+      console.error('Mindmap-Container nicht gefunden:', containerSelector);
+    }
+  }
+  
+  // Standardknoten als Fallback einrichten, falls die API nicht reagiert
+  setupDefaultNodes() {
+    // Basis-Mindmap mit Hauptthemen
+    const defaultNodes = [
+      { id: "root", name: "Wissen", description: "Zentrale Wissensbasis", thought_count: 3 },
+      { id: "philosophy", name: "Philosophie", description: "Philosophisches Denken", thought_count: 2 },
+      { id: "science", name: "Wissenschaft", description: "Wissenschaftliche Erkenntnisse", thought_count: 5 },
+      { id: "technology", name: "Technologie", description: "Technologische Entwicklungen", thought_count: 7 },
+      { id: "arts", name: "Künste", description: "Künstlerische Ausdrucksformen", thought_count: 4 },
+      { id: "ai", name: "Künstliche Intelligenz", description: "KI-Forschung und Anwendungen", thought_count: 6 },
+      { id: "ethics", name: "Ethik", description: "Moralische Grundsätze", thought_count: 2 },
+      { id: "math", name: "Mathematik", description: "Mathematische Konzepte", thought_count: 3 },
+      { id: "psychology", name: "Psychologie", description: "Menschliches Verhalten und Kognition", thought_count: 4 },
+      { id: "biology", name: "Biologie", description: "Lebenswissenschaften", thought_count: 3 },
+      { id: "literature", name: "Literatur", description: "Literarische Werke und Analysen", thought_count: 2 }
+    ];
+    
+    const defaultLinks = [
+      { source: "root", target: "philosophy" },
+      { source: "root", target: "science" },
+      { source: "root", target: "technology" },
+      { source: "root", target: "arts" },
+      { source: "science", target: "math" },
+      { source: "science", target: "biology" },
+      { source: "technology", target: "ai" },
+      { source: "philosophy", target: "ethics" },
+      { source: "philosophy", target: "psychology" },
+      { source: "arts", target: "literature" },
+      { source: "ai", target: "ethics" },
+      { source: "psychology", target: "biology" }
+    ];
+    
+    // Als Fallback verwenden, falls die API fehlschlägt
+    this.defaultNodes = defaultNodes;
+    this.defaultLinks = defaultLinks;
+  }
+  
+  init() {
+    // SVG erstellen, wenn noch nicht vorhanden
+    if (!this.svg) {
+      // Container zuerst leeren und Loading-State ausblenden
+      const loadingOverlay = this.container.select('.mindmap-loading');
+      if (loadingOverlay) {
+        loadingOverlay.style('opacity', 0.8);
+      }
+      
+      this.svg = this.container
+        .append('svg')
+        .attr('width', '100%')
+        .attr('height', this.height)
+        .attr('viewBox', `0 0 ${this.width} ${this.height}`)
+        .attr('class', 'mindmap-svg')
+        .call(
+          d3.zoom()
+            .scaleExtent([0.1, 5])
+            .on('zoom', (event) => {
+              this.handleZoom(event.transform);
+            })
+        );
+      
+      // Hauptgruppe für alles, was zoom-transformierbar ist
+      this.g = this.svg.append('g');
+      
+      // SVG-Definitionen für Filter und Effekte
+      const defs = this.g.append('defs');
+      
+      // Verbesserte Glasmorphismus- und Glow-Effekte
+      
+      // Basis Glow-Effekt
+      D3Extensions.createGlowFilter(defs, 'glow-effect', '#b38fff', 8);
+      
+      // Spezifische Effekte für verschiedene Zustände
+      D3Extensions.createGlowFilter(defs, 'hover-glow', '#58a9ff', 6);
+      D3Extensions.createGlowFilter(defs, 'selected-glow', '#b38fff', 10);
+      
+      // Schatten für alle Knoten
+      D3Extensions.createShadowFilter(defs, 'shadow-effect');
+      
+      // Glasmorphismus-Effekt für Knoten
+      D3Extensions.createGlassMorphismFilter(defs, 'glass-effect');
+      
+      // Erweiterte Effekte
+      this.createAdvancedNodeEffects(defs);
+      
+      // Tooltip initialisieren mit verbessertem Glasmorphism-Stil
+      if (!d3.select('body').select('.node-tooltip').size()) {
+        this.tooltipDiv = d3.select('body')
+          .append('div')
+          .attr('class', 'node-tooltip')
+          .style('opacity', 0)
+          .style('position', 'absolute')
+          .style('pointer-events', 'none')
+          .style('background', 'rgba(24, 28, 45, 0.85)')
+          .style('color', '#ffffff')
+          .style('border', '1px solid rgba(179, 143, 255, 0.3)')
+          .style('border-radius', '16px')
+          .style('padding', '12px 16px')
+          .style('font-size', '14px')
+          .style('font-weight', '500')
+          .style('line-height', '1.5')
+          .style('max-width', '280px')
+          .style('box-shadow', '0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(179, 143, 255, 0.25)')
+          .style('backdrop-filter', 'blur(20px)')
+          .style('-webkit-backdrop-filter', 'blur(20px)')
+          .style('z-index', '1000');
+      } else {
+        this.tooltipDiv = d3.select('body').select('.node-tooltip');
+      }
+      
+      // Initialisierung abgeschlossen - Loading-Overlay ausblenden
+      setTimeout(() => {
+        if (loadingOverlay) {
+          loadingOverlay.transition()
+            .duration(500)
+            .style('opacity', 0)
+            .on('end', function() {
+              loadingOverlay.style('display', 'none');
+            });
+        }
+      }, 1000);
+    }
+    
+    // Force-Simulation initialisieren
+    this.simulation = d3.forceSimulation()
+      .force('link', d3.forceLink().id(d => d.id).distance(this.linkDistance))
+      .force('charge', d3.forceManyBody().strength(this.chargeStrength))
+      .force('center', d3.forceCenter(this.width / 2, this.height / 2).strength(this.centerForce))
+      .force('collision', d3.forceCollide().radius(this.nodeRadius * 2.5));
+      
+    // Globale Mindmap-Instanz für externe Zugriffe setzen
+    window.mindmapInstance = this;
+  }
+  
+  // Erstellt erweiterte Effekte für die Knoten
+  createAdvancedNodeEffects(defs) {
+    // Verbesserte innere Leuchteffekte für Knoten
+    const innerGlow = defs.append('filter')
+      .attr('id', 'inner-glow')
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+      
+    // Farbiger innerer Glühen
+    innerGlow.append('feGaussianBlur')
+      .attr('in', 'SourceAlpha')
+      .attr('stdDeviation', 2)
+      .attr('result', 'blur');
+      
+    innerGlow.append('feOffset')
+      .attr('in', 'blur')
+      .attr('dx', 0)
+      .attr('dy', 0)
+      .attr('result', 'offsetBlur');
+      
+    innerGlow.append('feFlood')
+      .attr('flood-color', 'rgba(179, 143, 255, 0.8)')
+      .attr('result', 'glowColor');
+      
+    innerGlow.append('feComposite')
+      .attr('in', 'glowColor')
+      .attr('in2', 'offsetBlur')
+      .attr('operator', 'in')
+      .attr('result', 'innerGlow');
+      
+    // Verbinden der Filter
+    const innerGlowMerge = innerGlow.append('feMerge');
+    innerGlowMerge.append('feMergeNode')
+      .attr('in', 'innerGlow');
+    innerGlowMerge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+    
+    // 3D-Glaseffekt mit verbesserter Tiefe
+    D3Extensions.create3DGlassEffect(defs, '3d-glass');
+    
+    // Pulseffekt für Hervorhebung
+    const pulseFilter = defs.append('filter')
+      .attr('id', 'pulse-effect')
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+      
+    // Animation definieren
+    const pulseAnimation = pulseFilter.append('feComponentTransfer')
+      .append('feFuncA')
+      .attr('type', 'linear')
+      .attr('slope', '1.5');
+  }
+  
+  // Behandelt die Zoom-Transformation für die SVG
+  handleZoom(transform) {
+    this.g.attr('transform', transform);
+    this.zoomFactor = transform.k;
+    
+    // Knotengröße an Zoom anpassen
+    if (this.nodeElements) {
+      this.nodeElements.selectAll('circle')
+        .attr('r', d => {
+          return d === this.selectedNode 
+            ? this.selectedNodeRadius / Math.sqrt(transform.k) 
+            : this.nodeRadius / Math.sqrt(transform.k);
+        });
+      
+      this.textElements
+        .style('font-size', `${16 / Math.sqrt(transform.k)}px`);
+    }
+  }
+  
+  // Lädt die Mindmap-Daten
+  async loadData() {
+    try {
+      // Zeige Lade-Animation
+      this.showLoading();
+      
+      // Demo-Logik: Verwende direkt die Standardknoten
+      this.nodes = this.defaultNodes;
+      this.links = this.defaultLinks;
+      
+      // Simuliere einen API-Aufruf (in einer echten Anwendung würde hier ein Fetch stehen)
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      // Visualisierung aktualisieren
+      this.updateVisualization();
+      
+      // Lade-Animation ausblenden
+      this.hideLoading();
+      
+      // Zufällige Knoten pulsieren lassen
+      this.pulseRandomNodes();
+    } catch (error) {
+      console.error('Fehler beim Laden der Mindmap-Daten:', error);
+      
+      // Bei einem Fehler die Fallback-Daten verwenden
+      this.nodes = this.defaultNodes;
+      this.links = this.defaultLinks;
+      
+      // Visualisierung auch im Fehlerfall aktualisieren
+      this.updateVisualization();
+      this.hideLoading();
+    }
+  }
+  
+  // Startet ein zufälliges Pulsen von Knoten für visuelle Aufmerksamkeit
+  pulseRandomNodes() {
+    // Zufälligen Knoten auswählen
+    const randomNode = () => {
+      const randomIndex = Math.floor(Math.random() * this.nodes.length);
+      return this.nodes[randomIndex];
+    };
+    
+    // Initiales Pulsen starten
+    const initialPulse = () => {
+      const node = randomNode();
+      this.pulseNode(node);
+      
+      // Nächstes Pulsen in 3-7 Sekunden
+      setTimeout(() => {
+        const nextNode = randomNode();
+        this.pulseNode(nextNode);
+        
+        // Regelmäßig wiederholen
+        setInterval(() => {
+          const pulseNode = randomNode();
+          this.pulseNode(pulseNode);
+        }, 5000 + Math.random() * 5000);
+      }, 3000 + Math.random() * 4000);
+    };
+    
+    // Verzögertes Starten nach vollständigem Laden
+    setTimeout(initialPulse, 1000);
+  }
+  
+  // Lässt einen Knoten pulsieren für visuelle Hervorhebung
+  pulseNode(node) {
+    if (!this.nodeElements) return;
+    
+    const nodeElement = this.nodeElements.filter(d => d.id === node.id);
+    
+    if (nodeElement.size() > 0) {
+      const circle = nodeElement.select('circle');
+      
+      // Speichern des ursprünglichen Radius
+      const originalRadius = circle.attr('r');
+      
+      // Animiertes Pulsieren
+      circle.transition()
+        .duration(600)
+        .attr('r', originalRadius * 1.3)
+        .attr('filter', 'url(#pulse-effect)')
+        .transition()
+        .duration(600)
+        .attr('r', originalRadius)
+        .attr('filter', 'url(#glass-effect)');
+    }
+  }
+  
+  // Zeigt den Ladebildschirm an
+  showLoading() {
+    const loadingOverlay = this.container.select('.mindmap-loading');
+    
+    if (loadingOverlay && !loadingOverlay.empty()) {
+      loadingOverlay
+        .style('display', 'flex')
+        .style('opacity', 1);
+        
+      // Ladebalken-Animation
+      const progressBar = loadingOverlay.select('.loading-progress');
+      if (!progressBar.empty()) {
+        let progress = 0;
+        const progressInterval = setInterval(() => {
+          progress += Math.random() * 15;
+          if (progress > 90) {
+            progress = 90 + Math.random() * 5;
+            clearInterval(progressInterval);
+          }
+          updateProgress(progress);
+        }, 200);
+        
+        function updateProgress(progress) {
+          progressBar.style('width', `${Math.min(progress, 95)}%`);
+        }
+      }
+    }
+  }
+  
+  // Blendet den Ladebildschirm aus
+  hideLoading() {
+    const loadingOverlay = this.container.select('.mindmap-loading');
+    
+    if (loadingOverlay && !loadingOverlay.empty()) {
+      // Lade-Fortschritt auf 100% setzen
+      const progressBar = loadingOverlay.select('.loading-progress');
+      if (!progressBar.empty()) {
+        progressBar.transition()
+          .duration(300)
+          .style('width', '100%');
+      }
+      
+      // Overlay ausblenden
+      setTimeout(() => {
+        loadingOverlay.transition()
+          .duration(500)
+          .style('opacity', 0)
+          .on('end', function() {
+            loadingOverlay.style('display', 'none');
+          });
+      }, 400);
+    }
+  }
+  
+  // Verarbeitet hierarchische Daten in flache Knoten und Links
+  processHierarchicalData(hierarchicalNodes, parentId = null) {
+    let nodes = [];
+    let links = [];
+    
+    for (const node of hierarchicalNodes) {
+      nodes.push({
+        id: node.id,
+        name: node.name,
+        description: node.description || '',
+        thought_count: node.thought_count || 0
+      });
+      
+      if (parentId) {
+        links.push({
+          source: parentId,
+          target: node.id
+        });
+      }
+      
+      if (node.children && node.children.length > 0) {
+        const { nodes: childNodes, links: childLinks } = this.processHierarchicalData(node.children, node.id);
+        nodes = [...nodes, ...childNodes];
+        links = [...links, ...childLinks];
+      }
+    }
+    
+    return { nodes, links };
+  }
+  
+  // Generiert eine konsistente Farbe basierend auf dem Knotennamen
+  generateColorFromString(str) {
+    const colors = [
+      '#b38fff', '#58a9ff', '#14b8a6', '#f472b6', '#84cc16', 
+      '#f97316', '#4c1d95', '#2dd4bf', '#ec4899', '#eab308'
+    ];
+    
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    return colors[Math.abs(hash) % colors.length];
+  }
+  
+  /**
+   * Aktualisiert die Visualisierung basierend auf den aktuellen Daten
+   */
+  updateVisualization() {
+    if (!this.g || !this.nodes.length) return;
+    
+    // Daten für Simulation vorbereiten
+    // Kopieren der Knoten und Links, um Referenzen zu erhalten
+    const nodes = this.nodes.map(d => Object.assign({}, d));
+    const links = this.links.map(d => Object.assign({}, d));
+    
+    // Links erstellen oder aktualisieren
+    this.linkElements = this.g.selectAll('.link')
+      .data(links, d => `${d.source.id || d.source}-${d.target.id || d.target}`);
+    
+    // Links entfernen, die nicht mehr existieren
+    this.linkElements.exit().remove();
+    
+    // Neue Links erstellen
+    const linkEnter = this.linkElements
+      .enter().append('path')
+      .attr('class', 'link')
+      .attr('stroke-width', 2)
+      .attr('stroke', 'rgba(255, 255, 255, 0.3)')
+      .attr('fill', 'none')
+      .attr('marker-end', 'url(#arrowhead)');
+    
+    // Alle Links aktualisieren
+    this.linkElements = linkEnter.merge(this.linkElements);
+    
+    // Pfeilspitzen für die Links definieren
+    if (!this.g.select('#arrowhead').size()) {
+      this.g.append('defs').append('marker')
+        .attr('id', 'arrowhead')
+        .attr('viewBox', '0 -5 10 10')
+        .attr('refX', 28) // Abstand vom Ende des Links zum Knoten
+        .attr('refY', 0)
+        .attr('orient', 'auto')
+        .attr('markerWidth', 6)
+        .attr('markerHeight', 6)
+        .attr('xoverflow', 'visible')
+        .append('path')
+        .attr('d', 'M 0,-3 L 8,0 L 0,3')
+        .attr('fill', 'rgba(255, 255, 255, 0.6)');
+    }
+    
+    // Knoten erstellen oder aktualisieren
+    this.nodeElements = this.g.selectAll('.node')
+      .data(nodes, d => d.id);
+    
+    // Knoten entfernen, die nicht mehr existieren
+    this.nodeElements.exit().remove();
+    
+    // Container für neue Knoten erstellen
+    const nodeEnter = this.nodeElements
+      .enter().append('g')
+      .attr('class', 'node')
+      .call(d3.drag()
+        .on('start', (event, d) => this.dragStarted(event, d))
+        .on('drag', (event, d) => this.dragged(event, d))
+        .on('end', (event, d) => this.dragEnded(event, d))
+      )
+      .on('mouseover', (event, d) => this.nodeMouseover(event, d))
+      .on('mouseout', (event, d) => this.nodeMouseout(event, d))
+      .on('click', (event, d) => this.nodeClicked(event, d));
+    
+    // Kreisformen für die Knoten hinzufügen
+    nodeEnter.append('circle')
+      .attr('r', d => this.nodeRadius)
+      .attr('fill', d => this.getNodeColor(d))
+      .attr('stroke', 'rgba(255, 255, 255, 0.12)')
+      .attr('stroke-width', 2)
+      .style('filter', 'url(#glass-effect)');
+    
+    // Label für die Knoten hinzufügen
+    nodeEnter.append('text')
+      .attr('class', 'node-label')
+      .attr('dy', 4)
+      .attr('text-anchor', 'middle')
+      .text(d => this.truncateNodeLabel(d.name))
+      .style('font-size', d => D3Extensions.getAdaptiveFontSize(d.name, 16, 10) + 'px');
+    
+    // Alle Knoten aktualisieren
+    this.nodeElements = nodeEnter.merge(this.nodeElements);
+    
+    // Simulation mit den neuen Daten aktualisieren
+    this.simulation
+      .nodes(nodes)
+      .force('link', d3.forceLink(links).id(d => d.id).distance(this.linkDistance));
+    
+    // Simulation-Tick-Funktion setzen
+    this.simulation.on('tick', () => this.ticked());
+    
+    // Simulation neustarten
+    this.simulation.alpha(1).restart();
+    
+    // Nach kurzer Verzögerung die Knoten mit zusätzlichen Effekten versehen
+    setTimeout(() => {
+      this.nodeElements.selectAll('circle')
+        .transition()
+        .duration(500)
+        .attr('r', d => {
+          // Größe abhängig von der Anzahl der Gedanken
+          const baseRadius = this.nodeRadius;
+          const bonus = d.thought_count ? Math.min(d.thought_count / 3, 6) : 0;
+          return baseRadius + bonus;
+        });
+    }, 300);
+  }
+  
+  // Lange Knotenbeschriftungen abkürzen
+  truncateNodeLabel(label) {
+    if (!label) return '';
+    
+    const maxLength = 18; // Maximale Zeichenlänge
+    
+    if (label.length <= maxLength) {
+      return label;
+    } else {
+      return label.substring(0, maxLength - 3) + '...';
+    }
+  }
+  
+  // Farbe basierend auf Knotentyp erhalten
+  getNodeColor(node) {
+    // Verwende die ID als Typ, falls vorhanden
+    const nodeType = node.id.toLowerCase();
+    return this.colorPalette[nodeType] || this.colorPalette.default;
+  }
+  
+  // Aktualisiert die Positionen in jedem Simulationsschritt
+  ticked() {
+    if (!this.linkElements || !this.nodeElements) return;
+    
+    // Aktualisierung der Linkpositionen mit gebogenem Pfad
+    this.linkElements
+      .attr('d', d => {
+        const dx = d.target.x - d.source.x;
+        const dy = d.target.y - d.source.y;
+        const dr = Math.sqrt(dx * dx + dy * dy) * 1.5; // Kurvenstärke
+        return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
+      });
+    
+    // Aktualisierung der Knotenpositionen
+    this.nodeElements
+      .attr('transform', d => `translate(${d.x},${d.y})`);
+  }
+  
+  // D3.js Drag-Funktionen
+  dragStarted(event, d) {
+    if (!event.active) this.simulation.alphaTarget(0.3).restart();
+    d.fx = d.x;
+    d.fy = d.y;
+  }
+  
+  dragged(event, d) {
+    d.fx = event.x;
+    d.fy = event.y;
+  }
+  
+  dragEnded(event, d) {
+    if (!event.active) this.simulation.alphaTarget(0);
+    d.fx = null;
+    d.fy = null;
+  }
+  
+  // Hover-Effekte für Knoten
+  nodeMouseover(event, d) {
+    if (this.tooltipEnabled) {
+      // Tooltip-Inhalt erstellen
+      const tooltipContent = `
+        <div class="font-medium text-lg mb-1.5" style="color: ${this.getNodeColor(d)};">${d.name}</div>
+        <div class="mb-2">${d.description || 'Keine Beschreibung verfügbar'}</div>
+        ${d.thought_count > 0 ? `<div><strong>${d.thought_count}</strong> Gedanken verknüpft</div>` : ''}
+      `;
+      
+      this.tooltipDiv.html(tooltipContent)
+        .style('opacity', 0.95);
+      
+      // Tooltip positionieren (oberhalb des Nodes)
+      const nodeRect = event.target.getBoundingClientRect();
+      const tooltipWidth = 250;
+      const tooltipHeight = 100; // Ungefähre Höhe des Tooltips
+      
+      const leftPos = nodeRect.left + (nodeRect.width / 2) - (tooltipWidth / 2);
+      const topPos = nodeRect.top - tooltipHeight - 10; // 10px Abstand
+      
+      this.tooltipDiv
+        .style('left', `${leftPos}px`)
+        .style('top', `${topPos}px`)
+        .style('width', `${tooltipWidth}px`);
+    }
+    
+    // Speichern des aktuellen Hover-Nodes
+    this.mouseoverNode = d;
+    
+    // Highlights für verbundene Nodes und Links hinzufügen
+    if (this.g) {
+      // Verbundene Nodes identifizieren
+      const connectedNodes = this.getConnectedNodes(d);
+      const connectedNodeIds = connectedNodes.map(node => node.id);
+      
+      // Alle Nodes etwas transparenter machen
+      this.g.selectAll('.node')
+        .transition()
+        .duration(200)
+        .style('opacity', node => {
+          if (node.id === d.id || connectedNodeIds.includes(node.id)) {
+            return 1.0;
+          } else {
+            return 0.5;
+          }
+        });
+        
+      // Den Hover-Node hervorheben mit größerem Radius
+      this.g.selectAll('.node')
+        .filter(node => node.id === d.id)
+        .select('circle')
+        .transition()
+        .duration(200)
+        .attr('r', this.nodeRadius * 1.2)
+        .style('filter', 'url(#hover-glow)')
+        .style('stroke', 'rgba(255, 255, 255, 0.25)');
+        
+      // Verbundene Links hervorheben
+      this.g.selectAll('.link')
+        .transition()
+        .duration(200)
+        .style('opacity', link => {
+          const sourceId = link.source.id || link.source;
+          const targetId = link.target.id || link.target;
+          
+          if (sourceId === d.id || targetId === d.id) {
+            return 0.9;
+          } else {
+            return 0.3;
+          }
+        })
+        .style('stroke-width', link => {
+          const sourceId = link.source.id || link.source;
+          const targetId = link.target.id || link.target;
+          
+          if (sourceId === d.id || targetId === d.id) {
+            return 3;
+          } else {
+            return 2;
+          }
+        })
+        .style('stroke', link => {
+          const sourceId = link.source.id || link.source;
+          const targetId = link.target.id || link.target;
+          
+          if (sourceId === d.id || targetId === d.id) {
+            return 'rgba(179, 143, 255, 0.7)';
+          } else {
+            return 'rgba(255, 255, 255, 0.3)';
+          }
+        });
+    }
+  }
+  
+  nodeMouseout(event, d) {
+    if (this.tooltipEnabled) {
+      this.tooltipDiv.transition()
+        .duration(200)
+        .style('opacity', 0);
+    }
+    
+    this.mouseoverNode = null;
+    
+    // Highlights zurücksetzen, falls kein Node ausgewählt ist
+    if (!this.selectedNode && this.g) {
+      // Alle Nodes wieder auf volle Deckkraft setzen
+      this.g.selectAll('.node')
+        .transition()
+        .duration(200)
+        .style('opacity', 1.0);
+      
+      // Hover-Node-Radius zurücksetzen
+      this.g.selectAll('.node')
+        .filter(node => node.id === d.id)
+        .select('circle')
+        .transition()
+        .duration(200)
+        .attr('r', this.nodeRadius)
+        .style('filter', 'none')
+        .style('stroke', 'rgba(255, 255, 255, 0.12)');
+      
+      // Links zurücksetzen
+      this.g.selectAll('.link')
+        .transition()
+        .duration(200)
+        .style('opacity', 0.7)
+        .style('stroke-width', 2)
+        .style('stroke', 'rgba(255, 255, 255, 0.3)');
+    }
+    // Falls ein Node ausgewählt ist, den Highlight-Status für diesen beibehalten
+    else if (this.selectedNode && this.g) {
+      const connectedNodes = this.getConnectedNodes(this.selectedNode);
+      const connectedNodeIds = connectedNodes.map(node => node.id);
+      
+      // Alle Nodes auf den richtigen Highlight-Status setzen
+      this.g.selectAll('.node')
+        .transition()
+        .duration(200)
+        .style('opacity', node => {
+          if (node.id === this.selectedNode.id || connectedNodeIds.includes(node.id)) {
+            return 1.0;
+          } else {
+            return 0.5;
+          }
+        });
+      
+      // Hover-Node zurücksetzen, wenn er nicht der ausgewählte ist
+      if (d.id !== this.selectedNode.id) {
+        this.g.selectAll('.node')
+          .filter(node => node.id === d.id)
+          .select('circle')
+          .transition()
+          .duration(200)
+          .attr('r', this.nodeRadius)
+          .style('filter', 'none')
+          .style('stroke', 'rgba(255, 255, 255, 0.12)');
+      }
+      
+      // Links auf den richtigen Highlight-Status setzen
+      this.g.selectAll('.link')
+        .transition()
+        .duration(200)
+        .style('opacity', link => {
+          const sourceId = link.source.id || link.source;
+          const targetId = link.target.id || link.target;
+          
+          if (sourceId === this.selectedNode.id || targetId === this.selectedNode.id) {
+            return 0.9;
+          } else {
+            return 0.3;
+          }
+        })
+        .style('stroke-width', link => {
+          const sourceId = link.source.id || link.source;
+          const targetId = link.target.id || link.target;
+          
+          if (sourceId === this.selectedNode.id || targetId === this.selectedNode.id) {
+            return 3;
+          } else {
+            return 2;
+          }
+        })
+        .style('stroke', link => {
+          const sourceId = link.source.id || link.source;
+          const targetId = link.target.id || link.target;
+          
+          if (sourceId === this.selectedNode.id || targetId === this.selectedNode.id) {
+            return 'rgba(179, 143, 255, 0.7)';
+          } else {
+            return 'rgba(255, 255, 255, 0.3)';
+          }
+        });
+    }
+  }
+  
+  // Findet alle verbundenen Knoten zu einem gegebenen Knoten
+  getConnectedNodes(node) {
+    if (!this.links || !this.nodes) return [];
+    
+    return this.nodes.filter(n => 
+      this.links.some(link => 
+        (link.source.id === node.id && link.target.id === n.id) || 
+        (link.target.id === node.id && link.source.id === n.id)
+      )
+    );
+  }
+  
+  // Prüft, ob zwei Knoten verbunden sind
+  isConnected(a, b) {
+    return this.links.some(link => 
+      (link.source.id === a.id && link.target.id === b.id) || 
+      (link.target.id === a.id && link.source.id === b.id)
+    );
+  }
+  
+  // Klick-Handler für Knoten
+  nodeClicked(event, d) {
+    event.preventDefault();
+    event.stopPropagation();
+    
+    // Selection-Handling: Knoten auswählen/abwählen
+    if (this.selectedNode === d) {
+      // Wenn der gleiche Knoten geklickt wird, Selektion aufheben
+      this.selectedNode = null;
+      this.nodeElements.classed('selected', false);
+      
+      this.nodeElements
+        .select('circle:not(.node-background):not(.thought-indicator)')
+        .transition()
+        .duration(300)
+        .attr('r', this.nodeRadius)
+        .style('filter', 'url(#glass-with-reflection)')
+        .attr('stroke-width', 2);
+      
+      // Gedankenbereich ausblenden, wenn vorhanden
+      const thoughtContainer = document.getElementById('thought-container');
+      if (thoughtContainer) {
+        // Sanfte Ausblendanimation
+        thoughtContainer.style.transition = 'all 0.3s ease-out';
+        thoughtContainer.style.opacity = '0';
+        thoughtContainer.style.transform = 'translateY(10px)';
+        
+        setTimeout(() => {
+          // Gedankenbereich komplett ausblenden
+          thoughtContainer.style.display = 'none';
+          
+          // "Empty state" anzeigen oder andere UI-Anpassungen vornehmen
+          const emptyStateEl = document.getElementById('mindmap-empty-state');
+          if (emptyStateEl) {
+            emptyStateEl.style.display = 'flex';
+            emptyStateEl.style.opacity = '0';
+            setTimeout(() => {
+              emptyStateEl.style.transition = 'all 0.5s ease';
+              emptyStateEl.style.opacity = '1';
+            }, 50);
+          }
+        }, 300);
+      }
+      
+      // Alle Kanten zurücksetzen
+      this.linkElements
+        .classed('highlighted', false)
+        .transition()
+        .duration(300)
+        .style('stroke', 'rgba(255, 255, 255, 0.3)')
+        .style('stroke-width', 2)
+        .style('opacity', 0.7);
+      
+      // Interface-Callback für Knoten-Abwahl
+      if (typeof window.onNodeDeselected === 'function') {
+        window.onNodeDeselected();
+      }
+      
+      return;
+    }
+    
+    // Bisher ausgewählten Knoten zurücksetzen
+    if (this.selectedNode) {
+      this.nodeElements
+        .filter(n => n === this.selectedNode)
+        .classed('selected', false)
+        .select('circle:not(.node-background):not(.thought-indicator)')
+        .transition()
+        .duration(300)
+        .attr('r', this.nodeRadius)
+        .style('filter', 'url(#glass-with-reflection)')
+        .attr('stroke-width', 2);
+    }
+    
+    // Neuen Knoten auswählen
+    this.selectedNode = d;
+    
+    // Selected-Klasse für den Knoten setzen
+    this.nodeElements
+      .classed('selected', n => n === d);
+    
+    // Visuelles Feedback für Auswahl
+    this.nodeElements
+      .filter(n => n === d)
+      .select('circle:not(.node-background):not(.thought-indicator)')
+      .transition()
+      .duration(300)
+      .attr('r', this.selectedNodeRadius)
+      .style('filter', 'url(#selected-glow)')
+      .attr('stroke-width', 3)
+      .attr('stroke', 'rgba(179, 143, 255, 0.6)');
+    
+    // Verbundene Kanten hervorheben
+    const connectedLinks = this.links.filter(link => 
+      link.source === d || link.source.id === d.id || 
+      link.target === d || link.target.id === d.id
+    );
+    
+    // Alle Kanten zurücksetzen und dann verbundene hervorheben
+    this.linkElements
+      .classed('highlighted', false)
+      .transition()
+      .duration(300)
+      .style('stroke', 'rgba(255, 255, 255, 0.3)')
+      .style('stroke-width', 2)
+      .style('opacity', 0.7);
+    
+    this.linkElements
+      .filter(link => 
+        connectedLinks.some(l => 
+          (l.source === link.source || l.source.id === link.source.id) && 
+          (l.target === link.target || l.target.id === link.target.id)
+        )
+      )
+      .classed('highlighted', true)
+      .transition()
+      .duration(300)
+      .style('stroke', 'rgba(179, 143, 255, 0.7)')
+      .style('stroke-width', 3)
+      .style('opacity', 0.9);
+    
+    // Knoten zentrieren
+    this.centerNodeInView(d);
+    
+    // Gedanken laden
+    this.loadThoughtsForNode(d);
+    
+    // Callback für UI-Integration
+    if (typeof this.onNodeClick === 'function') {
+      this.onNodeClick(d);
+    }
+    
+    // Interface-Callback für externe Verwendung
+    if (typeof window.onNodeSelected === 'function') {
+      window.onNodeSelected(d);
+    }
+  }
+  
+  // Lädt die Gedanken für einen Knoten und zeigt sie an
+  loadThoughtsForNode(node) {
+    // UI-Element für Gedanken finden
+    const thoughtContainer = document.getElementById('thought-container');
+    const loadingIndicator = document.getElementById('thoughts-loading');
+    const thoughtsList = document.getElementById('thoughts-list');
+    const thoughtsTitle = document.getElementById('thoughts-title');
+    const emptyStateEl = document.getElementById('mindmap-empty-state');
+    
+    if (!thoughtContainer || !thoughtsList) {
+      console.error('Gedanken-Container nicht gefunden');
+      return;
+    }
+    
+    // "Empty state" ausblenden
+    if (emptyStateEl) {
+      emptyStateEl.style.transition = 'all 0.3s ease';
+      emptyStateEl.style.opacity = '0';
+      setTimeout(() => {
+        emptyStateEl.style.display = 'none';
+      }, 300);
+    }
+    
+    // Container anzeigen mit Animation
+    thoughtContainer.style.display = 'block';
+    setTimeout(() => {
+      thoughtContainer.style.transition = 'all 0.4s ease';
+      thoughtContainer.style.opacity = '1';
+      thoughtContainer.style.transform = 'translateY(0)';
+    }, 50);
+    
+    // Titel setzen
+    if (thoughtsTitle) {
+      thoughtsTitle.textContent = `Gedanken zu "${node.name}"`;
+    }
+    
+    // Ladeanimation anzeigen
+    if (loadingIndicator) {
+      loadingIndicator.style.display = 'flex';
+    }
+    
+    // Bisherige Gedanken leeren
+    if (thoughtsList) {
+      thoughtsList.innerHTML = '';
+    }
+    
+    // Verzögerung für Animation
+    setTimeout(() => {
+      // API-Aufruf simulieren (später durch echten Aufruf ersetzen)
+      this.fetchThoughtsForNode(node.id)
+        .then(thoughts => {
+          // Ladeanimation ausblenden
+          if (loadingIndicator) {
+            loadingIndicator.style.display = 'none';
+          }
+          
+          // Gedanken anzeigen oder "leer"-Zustand
+          if (thoughts && thoughts.length > 0) {
+            this.renderThoughts(thoughts, thoughtsList);
+          } else {
+            this.renderEmptyThoughts(thoughtsList, node);
+          }
+        })
+        .catch(error => {
+          console.error('Fehler beim Laden der Gedanken:', error);
+          if (loadingIndicator) {
+            loadingIndicator.style.display = 'none';
+          }
+          this.renderErrorState(thoughtsList);
+        });
+    }, 600); // Verzögerung für bessere UX
+  }
+  
+  // Zentriert einen Knoten in der Ansicht
+  centerNodeInView(node) {
+    // Sanfter Übergang zur Knotenzentrierüng
+    const transform = d3.zoomTransform(this.svg.node());
+    const scale = transform.k;
+    
+    const x = -node.x * scale + this.width / 2;
+    const y = -node.y * scale + this.height / 2;
+    
+    this.svg.transition()
+      .duration(750)
+      .call(
+        d3.zoom().transform,
+        d3.zoomIdentity.translate(x, y).scale(scale)
+      );
+  }
+  
+  // Fehlermeldung anzeigen
+  showError(message) {
+    const errorBanner = d3.select('body').selectAll('.error-banner').data([0]);
+    
+    const errorEnter = errorBanner.enter()
+      .append('div')
+      .attr('class', 'error-banner')
+      .style('position', 'fixed')
+      .style('bottom', '-100px')
+      .style('left', '50%')
+      .style('transform', 'translateX(-50%)')
+      .style('background', 'rgba(220, 38, 38, 0.9)')
+      .style('color', 'white')
+      .style('padding', '12px 20px')
+      .style('border-radius', '8px')
+      .style('z-index', '1000')
+      .style('box-shadow', '0 10px 25px rgba(0, 0, 0, 0.3)')
+      .style('font-weight', '500')
+      .style('max-width', '90%')
+      .style('text-align', 'center');
+    
+    const banner = errorEnter.merge(errorBanner);
+    banner.html(`<i class="fa-solid fa-circle-exclamation mr-2"></i> ${message}`)
+      .transition()
+      .duration(500)
+      .style('bottom', '20px')
+      .transition()
+      .delay(5000)
+      .duration(500)
+      .style('bottom', '-100px');
+  }
 
-const root = d3.hierarchy(data);
-const treeLayout = d3.tree().size([width - margin, height - margin]);
-treeLayout(root);
+  // Fokussieren auf einen bestimmten Knoten per ID
+  focusNode(nodeId) {
+    const targetNode = this.nodes.find(n => n.id === nodeId);
+    if (!targetNode) return;
+    
+    // Ausgewählten Zustand zurücksetzen
+    this.selectedNode = null;
+    
+    // Node-Klick simulieren
+    this.nodeClicked(null, targetNode);
+    
+    // Fokussieren mit einer Animation
+    if (targetNode.x && targetNode.y) {
+      const transform = d3.zoomIdentity
+        .translate(this.width / 2 - targetNode.x * 1.2, this.height / 2 - targetNode.y * 1.2)
+        .scale(1.2);
+      
+      this.svg.transition()
+        .duration(750)
+        .call(
+          d3.zoom().transform,
+          transform
+        );
+    }
+  }
+  
+  // Filtert Knoten nach Suchbegriff
+  filterBySearchTerm(searchTerm) {
+    if (!searchTerm || searchTerm.trim() === '') {
+      // Alle Knoten anzeigen, wenn kein Suchbegriff
+      this.nodeElements
+        .style('display', 'block')
+        .selectAll('circle')
+        .style('opacity', 1);
+      
+      this.textElements
+        .style('opacity', 1);
+      
+      this.linkElements
+        .style('display', 'block')
+        .style('stroke-opacity', 0.5);
+      
+      return;
+    }
+    
+    searchTerm = searchTerm.toLowerCase().trim();
+    
+    // Knoten finden, die dem Suchbegriff entsprechen
+    const matchingNodes = this.nodes.filter(node => 
+      node.name.toLowerCase().includes(searchTerm) || 
+      (node.description && node.description.toLowerCase().includes(searchTerm))
+    );
+    
+    const matchingNodeIds = matchingNodes.map(n => n.id);
+    
+    // Nur passende Knoten und ihre Verbindungen anzeigen
+    this.nodeElements
+      .style('display', d => matchingNodeIds.includes(d.id) ? 'block' : 'none')
+      .selectAll('circle')
+      .style('opacity', 1);
+    
+    this.textElements
+      .style('opacity', d => matchingNodeIds.includes(d.id) ? 1 : 0.2);
+    
+    this.linkElements
+      .style('display', link => 
+        matchingNodeIds.includes(link.source.id) && matchingNodeIds.includes(link.target.id) ? 'block' : 'none')
+      .style('stroke-opacity', 0.7);
+    
+    // Wenn nur ein Knoten gefunden wurde, darauf fokussieren
+    if (matchingNodes.length === 1) {
+      this.focusNode(matchingNodes[0].id);
+    }
+    
+    // Wenn mehr als ein Knoten gefunden wurde, Simulation mit reduzierter Stärke neu starten
+    if (matchingNodes.length > 1) {
+      this.simulation.alpha(0.3).restart();
+    }
+  }
+}
 
-const links = svg.selectAll(".link")
-    .data(root.links())
-    .enter()
-    .append("line")
-    .attr("class", "link")
-    .attr("x1", d => d.source.x + margin)
-    .attr("y1", d => d.source.y + margin)
-    .attr("x2", d => d.target.x + margin)
-    .attr("y2", d => d.target.y + margin)
-    .attr("stroke", "#2c3e50");
+// D3-Erweiterungen für spezielle Effekte
+class D3Extensions {
+  static createGlowFilter(defs, id, color = '#b38fff', strength = 5) {
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('height', '300%')
+      .attr('width', '300%')
+      .attr('x', '-100%')
+      .attr('y', '-100%');
+    
+    // Farbe und Sättigung
+    const colorMatrix = filter.append('feColorMatrix')
+      .attr('type', 'matrix')
+      .attr('values', `
+        1 0 0 0 ${color === '#b38fff' ? 0.7 : 0.35}
+        0 1 0 0 ${color === '#58a9ff' ? 0.7 : 0.35}
+        0 0 1 0 ${color === '#58a9ff' ? 0.7 : 0.55}
+        0 0 0 1 0
+      `)
+      .attr('result', 'colored');
+    
+    // Weichzeichner für Glühen
+    const blur = filter.append('feGaussianBlur')
+      .attr('in', 'colored')
+      .attr('stdDeviation', strength)
+      .attr('result', 'blur');
+    
+    // Kombination von Original und Glühen
+    const merge = filter.append('feMerge');
+    
+    merge.append('feMergeNode')
+      .attr('in', 'blur');
+    
+    merge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+    
+    return filter;
+  }
+  
+  static createShadowFilter(defs, id) {
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('height', '200%')
+      .attr('width', '200%')
+      .attr('x', '-50%')
+      .attr('y', '-50%');
+    
+    // Offset der Lichtquelle
+    const offset = filter.append('feOffset')
+      .attr('in', 'SourceAlpha')
+      .attr('dx', 3)
+      .attr('dy', 4)
+      .attr('result', 'offset');
+    
+    // Weichzeichnung für Schatten
+    const blur = filter.append('feGaussianBlur')
+      .attr('in', 'offset')
+      .attr('stdDeviation', 5)
+      .attr('result', 'blur');
+    
+    // Schatten-Opazität
+    const opacity = filter.append('feComponentTransfer');
+    
+    opacity.append('feFuncA')
+      .attr('type', 'linear')
+      .attr('slope', 0.3);
+    
+    // Zusammenführen
+    const merge = filter.append('feMerge');
+    
+    merge.append('feMergeNode');
+    merge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+    
+    return filter;
+  }
+  
+  static createGlassMorphismFilter(defs, id) {
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('width', '300%')
+      .attr('height', '300%')
+      .attr('x', '-100%')
+      .attr('y', '-100%');
+    
+    // Basis-Hintergrundfarbe
+    const bgColor = filter.append('feFlood')
+      .attr('flood-color', 'rgba(24, 28, 45, 0.75)')
+      .attr('result', 'bgColor');
+    
+    // Weichzeichnung des Originalelements
+    const blur = filter.append('feGaussianBlur')
+      .attr('in', 'SourceGraphic')
+      .attr('stdDeviation', '3')
+      .attr('result', 'blur');
+    
+    // Komposition des Glaseffekts mit Original
+    const composite1 = filter.append('feComposite')
+      .attr('in', 'bgColor')
+      .attr('in2', 'blur')
+      .attr('operator', 'in')
+      .attr('result', 'glass');
+    
+    // Leichter Farbakzent
+    const colorMatrix = filter.append('feColorMatrix')
+      .attr('in', 'glass')
+      .attr('type', 'matrix')
+      .attr('values', '1 0 0 0 0.1  0 1 0 0 0.1  0 0 1 0 0.3  0 0 0 1 0')
+      .attr('result', 'coloredGlass');
+    
+    // Leichte Transparenz an den Rändern
+    const specLight = filter.append('feSpecularLighting')
+      .attr('in', 'blur')
+      .attr('surfaceScale', '3')
+      .attr('specularConstant', '0.75')
+      .attr('specularExponent', '20')
+      .attr('lighting-color', '#ffffff')
+      .attr('result', 'specLight');
+    
+    specLight.append('fePointLight')
+      .attr('x', '-20')
+      .attr('y', '-30')
+      .attr('z', '120');
+    
+    // Lichtkombination
+    const composite2 = filter.append('feComposite')
+      .attr('in', 'specLight')
+      .attr('in2', 'coloredGlass')
+      .attr('operator', 'in')
+      .attr('result', 'lightedGlass');
+    
+    // Alle Effekte kombinieren
+    const merge = filter.append('feMerge')
+      .attr('result', 'glassMerge');
+    
+    merge.append('feMergeNode')
+      .attr('in', 'coloredGlass');
+    
+    merge.append('feMergeNode')
+      .attr('in', 'lightedGlass');
+    
+    merge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+    
+    return filter;
+  }
+  
+  // Erstellt einen erweiterten 3D-Glaseffekt mit Lichtreflexion
+  static create3DGlassEffect(defs, id) {
+    const filter = defs.append('filter')
+      .attr('id', id)
+      .attr('width', '300%')
+      .attr('height', '300%')
+      .attr('x', '-100%')
+      .attr('y', '-100%');
+    
+    // Hintergrund-Färbung mit Transparenz
+    const bgColor = filter.append('feFlood')
+      .attr('flood-color', 'rgba(24, 28, 45, 0.7)')
+      .attr('result', 'bgColor');
+    
+    // Alpha-Kanal modifizieren
+    const composite1 = filter.append('feComposite')
+      .attr('in', 'bgColor')
+      .attr('in2', 'SourceAlpha')
+      .attr('operator', 'in')
+      .attr('result', 'shape');
+    
+    // Leichte Unschärfe hinzufügen
+    const blur = filter.append('feGaussianBlur')
+      .attr('in', 'shape')
+      .attr('stdDeviation', '2')
+      .attr('result', 'blurredShape');
+    
+    // Lichtquelle für 3D-Effekt
+    const specLight = filter.append('feSpecularLighting')
+      .attr('in', 'blurredShape')
+      .attr('surfaceScale', '5')
+      .attr('specularConstant', '1')
+      .attr('specularExponent', '20')
+      .attr('lighting-color', '#ffffff')
+      .attr('result', 'specLight');
+    
+    specLight.append('fePointLight')
+      .attr('x', '50')
+      .attr('y', '-50')
+      .attr('z', '200');
+    
+    // Farbmatrix für Lichttönung
+    const colorMatrix = filter.append('feColorMatrix')
+      .attr('in', 'specLight')
+      .attr('type', 'matrix')
+      .attr('values', '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0')
+      .attr('result', 'coloredLight');
+    
+    // Alle Effekte kombinieren
+    const merge = filter.append('feMerge');
+    
+    merge.append('feMergeNode')
+      .attr('in', 'blurredShape');
+    
+    merge.append('feMergeNode')
+      .attr('in', 'coloredLight');
+    
+    merge.append('feMergeNode')
+      .attr('in', 'SourceGraphic');
+    
+    return filter;
+  }
+}
 
-const nodes = svg.selectAll(".node")
-    .data(root.descendants())
-    .enter()
-    .append("g")
-    .attr("class", "node")
-    .attr("transform", d => `translate(${d.x + margin},${d.y + margin})`);
-
-nodes.append("circle")
-    .attr("r", 20)
-    .attr("fill", "#3498db");
-
-nodes.append("text")
-    .attr("dx", 25)
-    .attr("dy", 5)
-    .text(d => d.data.name);
\ No newline at end of file
+// Globales Objekt für Zugriff außerhalb des Moduls
+window.MindMapVisualization = MindMapVisualization;
\ No newline at end of file
diff --git a/website/static/style.css b/website/static/style.css
deleted file mode 100644
index 6dc98ff..0000000
--- a/website/static/style.css
+++ /dev/null
@@ -1,27 +0,0 @@
-/* Grundlegendes Styling für die Seite */
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f0f0f0;
-}
-
-/* Styling für den Header */
-h1 {
-    text-align: center;
-    color: #2c3e50;
-    margin-top: 50px;
-}
-
-/* Button für die Navigation */
-button {
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    cursor: pointer;
-}
-
-button:hover {
-    background-color: #2980b9;
-}
\ No newline at end of file
diff --git a/website/templates/admin.html b/website/templates/admin.html
index 3726b05..d22aaaf 100644
--- a/website/templates/admin.html
+++ b/website/templates/admin.html
@@ -1,45 +1,83 @@
 {% extends "base.html" %}
 
-{% block title %}Admin | Wissenschaftliche Mindmap{% endblock %}
+{% block title %}Admin-Bereich{% endblock %}
 
 {% block content %}
 <div class="container mx-auto px-4 py-8">
-    <div class="glass p-8 mb-8">
-        <h1 class="text-3xl font-bold text-white mb-4">Admin Bereich</h1>
-        <p class="text-white/70">Verwalte Benutzer, Gedanken und die Mindmap-Struktur.</p>
-    </div>
+    <h1 class="text-3xl font-bold mb-8 text-gray-800 dark:text-white">Admin-Bereich</h1>
     
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <!-- Users Section -->
-        <div class="dark-glass p-6" x-data="{ tab: 'users' }">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold text-white">Benutzer</h2>
-                <span class="bg-indigo-600 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">{{ users|length }}</span>
+    <!-- Tabs für verschiedene Bereiche -->
+    <div x-data="{ activeTab: 'users' }" class="mb-8">
+        <div class="flex space-x-2 mb-6 overflow-x-auto">
+            <button 
+                @click="activeTab = 'users'" 
+                :class="activeTab === 'users' ? 'bg-primary-600 text-white' : 'bg-white/10 text-gray-700 dark:text-gray-200'" 
+                class="px-4 py-2 rounded-lg font-medium transition-all">
+                <i class="fas fa-users mr-2"></i> Benutzer
+            </button>
+            <button 
+                @click="activeTab = 'nodes'" 
+                :class="activeTab === 'nodes' ? 'bg-primary-600 text-white' : 'bg-white/10 text-gray-700 dark:text-gray-200'" 
+                class="px-4 py-2 rounded-lg font-medium transition-all">
+                <i class="fas fa-project-diagram mr-2"></i> Mindmap-Knoten
+            </button>
+            <button 
+                @click="activeTab = 'thoughts'" 
+                :class="activeTab === 'thoughts' ? 'bg-primary-600 text-white' : 'bg-white/10 text-gray-700 dark:text-gray-200'" 
+                class="px-4 py-2 rounded-lg font-medium transition-all">
+                <i class="fas fa-lightbulb mr-2"></i> Gedanken
+            </button>
+            <button 
+                @click="activeTab = 'stats'" 
+                :class="activeTab === 'stats' ? 'bg-primary-600 text-white' : 'bg-white/10 text-gray-700 dark:text-gray-200'" 
+                class="px-4 py-2 rounded-lg font-medium transition-all">
+                <i class="fas fa-chart-bar mr-2"></i> Statistiken
+            </button>
+        </div>
+        
+        <!-- Benutzer-Tab -->
+        <div x-show="activeTab === 'users'" class="glass-morphism rounded-lg p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-xl font-bold text-gray-800 dark:text-white">Benutzerverwaltung</h2>
+                <button class="btn-outline">
+                    <i class="fas fa-plus mr-2"></i> Neuer Benutzer
+                </button>
             </div>
             
-            <div class="overflow-y-auto max-h-[500px]">
-                <table class="w-full text-white/90">
-                    <thead class="text-white/60 text-sm uppercase">
-                        <tr>
-                            <th class="text-left py-3">ID</th>
-                            <th class="text-left py-3">Benutzername</th>
-                            <th class="text-left py-3">Email</th>
-                            <th class="text-left py-3">Rolle</th>
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="text-left border-b border-gray-200 dark:border-gray-700">
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">ID</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Benutzername</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">E-Mail</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Admin</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Gedanken</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Aktionen</th>
                         </tr>
                     </thead>
                     <tbody>
                         {% for user in users %}
-                        <tr class="border-t border-white/10">
-                            <td class="py-3">{{ user.id }}</td>
-                            <td class="py-3">{{ user.username }}</td>
-                            <td class="py-3">{{ user.email }}</td>
-                            <td class="py-3">
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-dark-700/30">
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ user.id }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300 font-medium">{{ user.username }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ user.email }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">
                                 {% if user.is_admin %}
-                                <span class="bg-purple-600/70 text-white text-xs px-2 py-1 rounded">Admin</span>
+                                <span class="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 px-2 py-1 rounded text-xs">Admin</span>
                                 {% else %}
-                                <span class="bg-blue-600/70 text-white text-xs px-2 py-1 rounded">Benutzer</span>
+                                <span class="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 px-2 py-1 rounded text-xs">User</span>
                                 {% endif %}
                             </td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ user.thoughts|length }}</td>
+                            <td class="px-4 py-3 flex space-x-2">
+                                <button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
+                                    <i class="fas fa-trash-alt"></i>
+                                </button>
+                            </td>
                         </tr>
                         {% endfor %}
                     </tbody>
@@ -47,63 +85,224 @@
             </div>
         </div>
         
-        <!-- Mindmap Nodes Section -->
-        <div class="dark-glass p-6">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold text-white">Mindmap Struktur</h2>
-                <span class="bg-indigo-600 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">{{ nodes|length }}</span>
-            </div>
-            
-            <div class="overflow-y-auto max-h-[500px]">
-                <div class="space-y-3">
-                    {% for node in nodes %}
-                    <div class="glass p-3">
-                        <div class="flex justify-between items-center">
-                            <span class="font-medium">{{ node.name }}</span>
-                            <span class="text-xs text-white/60">ID: {{ node.id }}</span>
-                        </div>
-                        {% if node.parent %}
-                        <p class="text-sm text-white/60 mt-1">Eltern: {{ node.parent.name }}</p>
-                        {% else %}
-                        <p class="text-sm text-white/60 mt-1">Hauptknoten</p>
-                        {% endif %}
-                    </div>
-                    {% endfor %}
-                </div>
-            </div>
-            
-            <div class="mt-6">
-                <button class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-4 py-2 rounded-lg transition-all duration-300 text-sm w-full">
-                    Neuen Knoten hinzufügen
+        <!-- Mindmap-Knoten-Tab -->
+        <div x-show="activeTab === 'nodes'" class="glass-morphism rounded-lg p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-xl font-bold text-gray-800 dark:text-white">Mindmap-Knoten Verwaltung</h2>
+                <button class="btn-outline">
+                    <i class="fas fa-plus mr-2"></i> Neuer Knoten
                 </button>
             </div>
+            
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="text-left border-b border-gray-200 dark:border-gray-700">
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">ID</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Name</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Elternknoten</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Gedanken</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Aktionen</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for node in nodes %}
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-dark-700/30">
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ node.id }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300 font-medium">{{ node.name }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">
+                                {% if node.parent %}
+                                {{ node.parent.name }}
+                                {% else %}
+                                <span class="text-gray-400 dark:text-gray-500">Wurzelknoten</span>
+                                {% endif %}
+                            </td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ node.thoughts|length }}</td>
+                            <td class="px-4 py-3 flex space-x-2">
+                                <button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
+                                    <i class="fas fa-trash-alt"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
         </div>
         
-        <!-- Thoughts Section -->
-        <div class="dark-glass p-6">
-            <div class="flex items-center justify-between mb-6">
-                <h2 class="text-2xl font-bold text-white">Gedanken</h2>
-                <span class="bg-indigo-600 text-white text-xs font-medium px-2.5 py-0.5 rounded-full">{{ thoughts|length }}</span>
-            </div>
-            
-            <div class="overflow-y-auto max-h-[500px]">
-                <div class="space-y-3">
-                    {% for thought in thoughts %}
-                    <div class="glass p-3">
-                        <div class="flex justify-between items-start">
-                            <span class="inline-block px-2 py-0.5 text-xs text-white/70 bg-white/10 rounded-full mb-1">{{ thought.branch }}</span>
-                            <span class="text-xs text-white/50">{{ thought.timestamp.strftime('%d.%m.%Y') }}</span>
-                        </div>
-                        <p class="text-sm text-white mb-1 line-clamp-2">{{ thought.content }}</p>
-                        <div class="flex justify-between items-center mt-2 text-xs">
-                            <span class="text-white/60">Von: {{ thought.author.username }}</span>
-                            <span class="text-white/60">{{ thought.comments|length }} Kommentar(e)</span>
+        <!-- Gedanken-Tab -->
+        <div x-show="activeTab === 'thoughts'" class="glass-morphism rounded-lg p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-xl font-bold text-gray-800 dark:text-white">Gedanken-Verwaltung</h2>
+                <div class="flex space-x-2">
+                    <div class="relative">
+                        <input type="text" placeholder="Suchen..." class="form-input pl-10 pr-4 py-2 rounded-lg bg-white/10 border border-gray-200/20 dark:border-gray-700/20 focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700 dark:text-gray-200">
+                        <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
+                            <i class="fas fa-search"></i>
                         </div>
                     </div>
-                    {% endfor %}
+                    <button class="btn-outline">
+                        <i class="fas fa-filter mr-2"></i> Filter
+                    </button>
+                </div>
+            </div>
+            
+            <div class="overflow-x-auto">
+                <table class="w-full">
+                    <thead>
+                        <tr class="text-left border-b border-gray-200 dark:border-gray-700">
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">ID</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Titel</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Autor</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Datum</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Bewertung</th>
+                            <th class="px-4 py-2 text-gray-700 dark:text-gray-300">Aktionen</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for thought in thoughts %}
+                        <tr class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-dark-700/30">
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ thought.id }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300 font-medium">{{ thought.title }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ thought.author.username }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">{{ thought.timestamp.strftime('%d.%m.%Y') }}</td>
+                            <td class="px-4 py-3 text-gray-700 dark:text-gray-300">
+                                <div class="flex items-center">
+                                    <span class="mr-2">{{ "%.1f"|format(thought.average_rating) }}</span>
+                                    <div class="flex">
+                                        {% for i in range(5) %}
+                                            {% if i < thought.average_rating|int %}
+                                                <i class="fas fa-star text-yellow-400"></i>
+                                            {% elif i < (thought.average_rating|int + 0.5) %}
+                                                <i class="fas fa-star-half-alt text-yellow-400"></i>
+                                            {% else %}
+                                                <i class="far fa-star text-yellow-400"></i>
+                                            {% endif %}
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-4 py-3 flex space-x-2">
+                                <button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
+                                    <i class="fas fa-eye"></i>
+                                </button>
+                                <button class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
+                                    <i class="fas fa-edit"></i>
+                                </button>
+                                <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">
+                                    <i class="fas fa-trash-alt"></i>
+                                </button>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        
+        <!-- Statistiken-Tab -->
+        <div x-show="activeTab === 'stats'" class="glass-morphism rounded-lg p-6">
+            <h2 class="text-xl font-bold mb-6 text-gray-800 dark:text-white">Systemstatistiken</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div class="glass-effect p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <div class="bg-blue-500/20 p-3 rounded-lg mr-3">
+                            <i class="fas fa-users text-blue-500"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Benutzer</h3>
+                            <p class="text-2xl font-bold text-gray-800 dark:text-white">{{ users|length }}</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="glass-effect p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <div class="bg-purple-500/20 p-3 rounded-lg mr-3">
+                            <i class="fas fa-project-diagram text-purple-500"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Knoten</h3>
+                            <p class="text-2xl font-bold text-gray-800 dark:text-white">{{ nodes|length }}</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="glass-effect p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <div class="bg-green-500/20 p-3 rounded-lg mr-3">
+                            <i class="fas fa-lightbulb text-green-500"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Gedanken</h3>
+                            <p class="text-2xl font-bold text-gray-800 dark:text-white">{{ thoughts|length }}</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="glass-effect p-4 rounded-lg">
+                    <div class="flex items-center mb-2">
+                        <div class="bg-red-500/20 p-3 rounded-lg mr-3">
+                            <i class="fas fa-comments text-red-500"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-sm font-medium text-gray-600 dark:text-gray-300">Kommentare</h3>
+                            <p class="text-2xl font-bold text-gray-800 dark:text-white">
+                                {% set comment_count = 0 %}
+                                {% for thought in thoughts %}
+                                    {% set comment_count = comment_count + thought.comments|length %}
+                                {% endfor %}
+                                {{ comment_count }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="glass-effect p-4 rounded-lg">
+                    <h3 class="text-lg font-bold mb-4 text-gray-800 dark:text-white">Aktive Benutzer</h3>
+                    <div class="h-64 flex items-center justify-center bg-gray-100/20 dark:bg-dark-700/20 rounded">
+                        <p class="text-gray-500 dark:text-gray-400">Hier würde ein Aktivitätsdiagramm angezeigt werden</p>
+                    </div>
+                </div>
+                
+                <div class="glass-effect p-4 rounded-lg">
+                    <h3 class="text-lg font-bold mb-4 text-gray-800 dark:text-white">Gedanken pro Kategorie</h3>
+                    <div class="h-64 flex items-center justify-center bg-gray-100/20 dark:bg-dark-700/20 rounded">
+                        <p class="text-gray-500 dark:text-gray-400">Hier würde eine Verteilungsstatistik angezeigt werden</p>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+    
+    <!-- System-Log (immer sichtbar) -->
+    <div class="mt-8">
+        <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">System-Log</h2>
+        <div class="glass-morphism rounded-lg p-4 h-32 overflow-y-auto font-mono text-sm text-gray-700 dark:text-gray-300">
+            <div class="text-green-500">[INFO] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] System gestartet</div>
+            <div class="text-blue-500">[INFO] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] Admin-Bereich aufgerufen von {{ current_user.username }}</div>
+            <div class="text-yellow-500">[WARN] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] Hohe Serverauslastung erkannt</div>
+            <div class="text-gray-500">[INFO] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] Backup erfolgreich erstellt</div>
+            <div class="text-red-500">[ERROR] [{{ now.strftime('%Y-%m-%d %H:%M:%S') }}] API-Zugriffsfehler (Timeout) bei externer Anfrage</div>
+        </div>
+    </div>
 </div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+    // Admin-spezifische JavaScript-Funktionen
+    document.addEventListener('DOMContentLoaded', function() {
+        console.log('Admin-Bereich geladen');
+        
+        // Beispiel für AJAX-Ladeverhalten von Daten
+        // Kann später durch echte API-Calls ersetzt werden
+    });
+</script>
 {% endblock %} 
\ No newline at end of file
diff --git a/website/templates/base.html b/website/templates/base.html
index 89e707d..9fb4f1e 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -22,14 +22,22 @@
     <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     
+    <!-- Assistent CSS -->
+    <link href="{{ url_for('static', filename='css/assistant.css') }}" rel="stylesheet">
+    
+    <!-- Basis-Stylesheet -->
+    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
+
     <!-- Tailwind CSS -->
     <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet">
     
     <!-- Alpine.js -->
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js"></script>
-    
-    <!-- Theme Script (run before rendering) -->
-    <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,
@@ -87,379 +95,629 @@
                 }
             }));
         });
+        
+        // MindMap global verfügbar machen (für Alpine.js und andere nicht-Module Skripte)
+        window.MindMap = MindMap;
     </script>
     
+    <!-- Globale Stile für konsistentes Glasmorphismus-Design -->
+    <style>
+        /* 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);
+            --blur-amount: 20px;
+            --border-radius: 24px;
+            --button-radius: 16px;
+        }
+        
+        /* Dark Mode Einstellungen */
+        html.dark {
+            color-scheme: dark;
+        }
+        
+        /* 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;
+            overflow-x: hidden;
+        }
+        
+        /* Sicherstellen, dass der dunkle Hintergrund die gesamte Seite abdeckt */
+        #app-container, .container, main, .mx-auto, .py-12, #content-wrapper {
+            background-color: var(--dark-bg) !important;
+            width: 100%;
+        }
+        
+        /* Light Mode Einstellungen */
+        html.light, html.light body {
+            background-color: var(--light-bg) !important;
+            color: #1a202c;
+        }
+        
+        /* 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(--border-radius);
+            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
+            transition: all 0.3s ease;
+        }
+        
+        .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);
+        }
+        
+        .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(--border-radius);
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+            transition: all 0.3s ease;
+        }
+        
+        .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);
+        }
+        
+        /* Verbesserte Button-Stile mit besserer Lesbarkeit */
+        .btn, button, .button, [type="button"], [type="submit"] {
+            transition: all 0.25s ease;
+            border-radius: var(--button-radius);
+            padding: 0.75rem 1.5rem;
+            font-weight: 600;
+            letter-spacing: 0.4px;
+            color: rgba(255, 255, 255, 1);
+            background: rgba(80, 90, 130, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            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);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .btn:hover, button:hover, .button:hover, [type="button"]:hover, [type="submit"]:hover {
+            background: rgba(179, 143, 255, 0.65);
+            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;
+        }
+        
+        .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);
+        }
+        
+        /* Navigation Stile */
+        .nav-link {
+            transition: all 0.25s ease;
+            border-radius: var(--border-radius);
+            padding: 10px 18px;
+            font-weight: 500;
+            letter-spacing: 0.3px;
+            color: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(var(--blur-amount));
+            -webkit-backdrop-filter: blur(var(--blur-amount));
+            position: relative;
+            overflow: visible;
+            height: 40px !important;
+        }
+        
+        .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);
+        }
+        
+        .nav-link.active {
+            background: rgba(179, 143, 255, 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.9);
+        }
+        
+        .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);
+        }
+        
+        .nav-link-light.active {
+            background: rgba(179, 143, 255, 0.2);
+            color: rgba(26, 32, 44, 1);
+            font-weight: 600;
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+        }
+        
+        .nav-link-light.active::after {
+            background: linear-gradient(90deg, transparent, rgba(26, 32, 44, 0.5), transparent);
+        }
+        
+        /* Entfernung von Gradient-Hintergrund überall */
+        .gradient-bg, .purple-gradient, .gradient-purple-bg {
+            background: var(--dark-bg) !important;
+            background-image: none !important;
+        }
+        
+        /* 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: rgba(255, 255, 255, 0.85);
+            color: #1a202c;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+            text-shadow: none;
+        }
+        
+        html.light .btn:hover, html.light button:hover, html.light .button:hover, 
+        html.light [type="button"]:hover, html.light [type="submit"]:hover {
+            background: rgba(179, 143, 255, 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);
+        }
+        
+        /* 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);
+        }
+        
+        .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));
+        }
+        
+        .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;
+            font-weight: 500;
+            padding: 0.75rem 1.5rem;
+            transition: all 0.3s ease;
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+        }
+        
+        .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: 12px;
+            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: var(--accent-gradient);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+        }
+        
+        /* Kartenstil für Feature-Cards */
+        .feature-card {
+            background: rgba(24, 28, 45, 0.8);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            border-radius: 24px;
+            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
+            transition: all 0.3s ease;
+            padding: 1.75rem;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .feature-card:hover {
+            transform: translateY(-5px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
+            background: rgba(32, 36, 55, 0.9);
+        }
+        
+        .feature-card .icon {
+            font-size: 2.75rem;
+            margin-bottom: 1.25rem;
+            background: linear-gradient(135deg, #b38fff, #58a9ff);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            filter: drop-shadow(0 0 10px rgba(179, 143, 255, 0.6));
+        }
+        
+        .feature-card h3 {
+            font-size: 1.75rem;
+            font-weight: 700;
+            margin-bottom: 0.9rem;
+            color: #ffffff;
+            text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
+            letter-spacing: 0.2px;
+        }
+        
+        .feature-card p {
+            color: rgba(255, 255, 255, 0.95);
+            font-size: 1.1rem;
+            line-height: 1.6;
+            font-weight: 400;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+            letter-spacing: 0.3px;
+        }
+        
+        /* Light Mode Anpassungen für Feature-Cards */
+        html.light .feature-card {
+            background: rgba(255, 255, 255, 0.85);
+            border: 1px solid rgba(0, 0, 0, 0.08);
+            color: #1a202c;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+        }
+        
+        html.light .feature-card:hover {
+            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
+        }
+        
+        html.light .feature-card h3 {
+            color: #1a202c;
+            text-shadow: none;
+        }
+        
+        html.light .feature-card p {
+            color: rgba(26, 32, 44, 0.9);
+            text-shadow: none;
+        }
+        
+        /* Globaler Hintergrund */
+        .full-page-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            background-color: var(--dark-bg);
+            z-index: -10;
+        }
+        
+        html.light .full-page-bg {
+            background-color: var(--light-bg);
+        }
+        
+        /* Animationen für Hintergrundeffekte */
+        @keyframes float {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-12px); }
+            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;
+        }
+        
+        .animate-pulse {
+            animation: pulse 3s ease-in-out infinite;
+        }
+        
+        /* Verbesserter Container für konsistente Layouts */
+        .page-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem 1rem;
+        }
+
+        .dot {
+            transform: translateX(0);
+            transition: transform 0.3s ease-in-out, background-color 0.3s ease;
+        }
+        input:checked ~ .dot {
+            transform: translateX(100%);
+            background-color: #b38fff; /* Angepasst an Farbschema */
+        }
+        input:checked ~ .block {
+            background-color: rgba(179, 143, 255, 0.4); /* Angepasst an Farbschema */
+        }
+    </style>
+    
+    <!-- Seitenspezifische Styles -->
     {% block extra_css %}{% endblock %}
 </head>
-<body x-data="{ 
-    darkMode: true, 
-    mobileMenuOpen: false,
-    userMenuOpen: false,
-    searchOpen: false,
-    showSettingsModal: false,
+<body data-page="{{ request.endpoint }}" class="relative overflow-x-hidden">
+    <!-- Globaler Hintergrund -->
+    <div class="full-page-bg"></div>
     
-    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);
-        });
-    }
-}" 
-:class="{ 'dark': darkMode }"
-class="font-sans antialiased relative min-h-screen bg-gray-50 text-gray-900"
-x-init="fetch('/get_dark_mode')
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                darkMode = data.darkMode === 'true';
-                document.querySelector('html').classList.toggle('dark', darkMode);
-            } else {
-                // Fallback zu localStorage wenn Server-Abfrage fehlschlägt
-                const savedTheme = localStorage.getItem('darkMode');
-                if (savedTheme) {
-                    darkMode = savedTheme === 'dark';
-                    document.querySelector('html').classList.toggle('dark', darkMode);
-                }
-            }
-        })
-        .catch(error => {
-            console.error('Fehler beim Laden der Dark Mode-Einstellung:', error);
-            // Fallback zu localStorage wenn Fetch fehlschlägt
-            const savedTheme = localStorage.getItem('darkMode');
-            if (savedTheme) {
-                darkMode = savedTheme === 'dark';
-                document.querySelector('html').classList.toggle('dark', darkMode);
-            }
-        })">
-    <!-- CSRF Token für Fetch-Requests -->
-    
-    <!-- Hintergrund -->
-    <div class="fixed inset-0 -z-10 bg-gray-50 dark:bg-dark-900">
-        <div class="absolute inset-0 bg-gradient-to-br from-primary-100/30 via-white dark:from-primary-900/30 dark:via-dark-900 to-secondary-100/30 dark:to-secondary-900/30"></div>
-        <div class="absolute inset-0 opacity-30">
-            <div class="h-full w-full" style="background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px); background-size: 30px 30px;"></div>
-        </div>
-    </div>
-    
-    <!-- Header -->
-    <header class="relative z-10">
-        <nav class="glass-effect border-b border-gray-200 dark:border-white/10 backdrop-blur-lg" style="border-radius: 20px !important;">
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div class="flex justify-between h-16">
-                    <!-- Logo und Desktop Navigation -->
-                    <div class="flex">
-                        <div class="flex-shrink-0 flex items-center">
-                            <a href="{{ url_for('index') }}" class="flex items-center">
-                                <img class="h-8 w-auto mr-2" src="{{ url_for('static', filename='img/favicon.svg') }}" alt="MindMap Logo">
-                                <span class="text-gray-800 dark:text-white font-bold text-xl">Mind<span class="gradient-text">Map</span></span>
-                            </a>
-                        </div>
-                        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
-                            <a href="{{ url_for('mindmap') }}" class="text-gray-700 dark:text-gray-200 hover:text-primary-600 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 {% if request.path == url_for('mindmap') %}border-primary-400{% else %}border-transparent{% endif %}">
-                                <i class="fa-solid fa-diagram-project mr-2"></i> Mindmap
-                            </a>
-                            <a href="{{ url_for('search_thoughts_page') }}" class="text-gray-700 dark:text-gray-200 hover:text-primary-600 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 {% if request.path == url_for('search_thoughts_page') %}border-primary-400{% else %}border-transparent{% endif %}">
-                                <i class="fa-solid fa-magnifying-glass mr-2"></i> Suche
-                            </a>
-                            {% if current_user.is_authenticated %}
-                            <a href="{{ url_for('profile') }}" class="text-gray-700 dark:text-gray-200 hover:text-primary-600 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 {% if request.path == url_for('profile') %}border-primary-400{% else %}border-transparent{% endif %}">
-                                <i class="fa-solid fa-user mr-2"></i> Profil
-                            </a>
-                            {% if current_user.is_admin %}
-                            <a href="{{ url_for('admin') }}" class="text-gray-700 dark:text-gray-200 hover:text-primary-600 dark:hover:text-white inline-flex items-center px-1 pt-1 border-b-2 {% if request.path == url_for('admin') %}border-primary-400{% else %}border-transparent{% endif %}">
-                                <i class="fa-solid fa-screwdriver-wrench mr-2"></i> Admin
-                            </a>
-                            {% endif %}
-                            {% endif %}
-                        </div>
-                    </div>
-                    
-                    <!-- Rechte Aktionsleiste (Desktop) -->
-                    <div class="hidden sm:ml-6 sm:flex sm:items-center">
-                        <!-- Dark Mode Toggle -->
-                        <button 
-                            type="button" 
-                            class="rounded-full p-2 text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-secondary-500 dark:text-gray-200 dark:hover:bg-dark-700 z-20" 
-                            @click="toggleDarkMode()" 
-                            aria-label="Toggle dark mode">
-                            <!-- Sun icon -->
-                            <svg 
-                                x-show="!darkMode" 
-                                class="h-5 w-5 inline-block" 
-                                xmlns="http://www.w3.org/2000/svg" 
-                                fill="none" 
-                                viewBox="0 0 24 24" 
-                                stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                            </svg>
-                            <!-- Moon icon -->
-                            <svg 
-                                x-show="darkMode" 
-                                class="h-5 w-5 inline-block" 
-                                xmlns="http://www.w3.org/2000/svg" 
-                                fill="none" 
-                                viewBox="0 0 24 24" 
-                                stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                            </svg>
-                        </button>
-                        
-                        <!-- Nutzer-Menü -->
-                        {% if current_user.is_authenticated %}
-                        <div class="ml-3 relative">
-                            <div>
-                                <button @click="userMenuOpen = !userMenuOpen" class="flex rounded-full focus:outline-none">
-                                    <span class="sr-only">User Menü öffnen</span>
-                                    <div class="h-8 w-8 rounded-full bg-gradient-to-r from-primary-400 to-primary-600 flex items-center justify-center text-white font-bold">
-                                        {{ current_user.username[0] | upper }}
-                                    </div>
-                                </button>
-                            </div>
-                            <div x-show="userMenuOpen" 
-                                 @click.away="userMenuOpen = false"
-                                 class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-dark-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
-                                 x-transition:enter="transition ease-out duration-100" 
-                                 x-transition:enter-start="transform opacity-0 scale-95"
-                                 x-transition:enter-end="transform opacity-100 scale-100" 
-                                 x-transition:leave="transition ease-in duration-75"
-                                 x-transition:leave-start="transform opacity-100 scale-100" 
-                                 x-transition:leave-end="transform opacity-0 scale-95">
-                                
-                                <a href="{{ url_for('settings') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-white/10">
-                                    <i class="fa-solid fa-gear mr-2"></i> Einstellungen
-                                </a>
-                                <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-white/10">
-                                    <i class="fa-solid fa-sign-out-alt mr-2"></i> Abmelden
-                                </a>
-                            </div>
-                        </div>
-                        {% else %}
-                        <div class="ml-3 flex items-center space-x-4">
-                            <a href="{{ url_for('login') }}" class="text-gray-700 hover:text-primary-600 dark:text-gray-200 dark:hover:text-white">Anmelden</a>
-                            <a href="{{ url_for('register') }}" class="btn-primary">Registrieren</a>
-                        </div>
-                        {% endif %}
-                    </div>
-                    
-                    <!-- Mobile menu button -->
-                    <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
-                        <button @click="mobileMenuOpen = !mobileMenuOpen" 
-                            class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-white/10 focus:outline-none" 
-                            aria-expanded="false">
-                            <span class="sr-only">Menü öffnen</span>
-                            <svg x-show="!mobileMenuOpen" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                            </svg>
-                    <!-- Mobile Menu Button -->
-                    <div class="flex items-center sm:hidden">
-                        <button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10 focus:outline-none">
-                            <span class="sr-only">Menü öffnen</span>
-                            <i x-show="!mobileMenuOpen" class="fa-solid fa-bars text-xl"></i>
-                            <i x-show="mobileMenuOpen" class="fa-solid fa-xmark text-xl"></i>
-                        </button>
-                    </div>
-                </div>
+    <!-- App-Container -->
+    <div id="app-container" class="flex flex-col min-h-screen" x-data="layout">
+        <!-- Hauptnavigation -->
+        <nav style="position: sticky; top: 0; left: 0; right: 0; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); background: rgba(14, 18, 32, 0.75); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 2rem; z-index: 100; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center;" x-bind:style="darkMode ? 'background: rgba(14, 18, 32, 0.75);' : 'background: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(0, 0, 0, 0.05);'">
+            <!-- Logo -->
+            <a href="{{ url_for('index') }}" style="display: flex; align-items: center; text-decoration: none;">
+                <span style="font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, #b38fff, #58a9ff); -webkit-background-clip: text; background-clip: text; color: transparent;">MindMap</span>
+            </a>
+
+            <!-- Hauptnavigation - Desktop -->
+            <div style="display: none; align-items: center; gap: 1rem;" x-bind:style="window.innerWidth >= 768 ? 'display: flex;' : 'display: none;'">
+                <a href="{{ url_for('index') }}" 
+                   style="display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; transition: all 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);"
+                   x-bind:style="darkMode 
+                   ? '{{ request.endpoint == 'index' ? 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' : 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
+                   : '{{ request.endpoint == 'index' ? 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' : 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
+                    <i class="fa-solid fa-home" style="margin-right: 0.5rem;"></i>Start
+                </a>
+                <a href="{{ url_for('mindmap') }}" 
+                   style="display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; transition: all 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);"
+                   x-bind:style="darkMode 
+                   ? '{{ request.endpoint == 'mindmap' ? 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' : 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
+                   : '{{ request.endpoint == 'mindmap' ? 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' : 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
+                    <i class="fa-solid fa-diagram-project" style="margin-right: 0.5rem;"></i>Mindmap
+                </a>
+                {% if current_user.is_authenticated %}
+                <a href="{{ url_for('profile') }}" 
+                   style="display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; transition: all 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);"
+                   x-bind:style="darkMode 
+                   ? '{{ request.endpoint == 'profile' ? 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' : 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
+                   : '{{ request.endpoint == 'profile' ? 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' : 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
+                    <i class="fa-solid fa-user" style="margin-right: 0.5rem;"></i>Profil
+                </a>
+                {% endif %}
             </div>
-            
-            <!-- Mobile Menu -->
-            <div x-show="mobileMenuOpen" class="sm:hidden glass-effect" id="mobile-menu">
-                <div class="pt-2 pb-3 space-y-1">
-                    <a href="{{ url_for('mindmap') }}" class="text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10 block pl-3 pr-4 py-2 text-base font-medium {% if request.path == url_for('mindmap') %}bg-gray-100 dark:bg-white/10 border-l-4 border-primary-400{% endif %}">
-                        <i class="fa-solid fa-diagram-project mr-2"></i> Mindmap
-                    </a>
-                    <a href="{{ url_for('search_thoughts_page') }}" class="text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10 block pl-3 pr-4 py-2 text-base font-medium {% if request.path == url_for('search_thoughts_page') %}bg-gray-100 dark:bg-white/10 border-l-4 border-primary-400{% endif %}">
-                        <i class="fa-solid fa-magnifying-glass mr-2"></i> Suche
-                    </a>
-                    {% if current_user.is_authenticated %}
-                    <a href="{{ url_for('profile') }}" class="text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10 block pl-3 pr-4 py-2 text-base font-medium {% if request.path == url_for('profile') %}bg-gray-100 dark:bg-white/10 border-l-4 border-primary-400{% endif %}">
-                        <i class="fa-solid fa-user mr-2"></i> Profil
-                    </a>
-                    {% if current_user.is_admin %}
-                    <a href="{{ url_for('admin') }}" class="text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10 block pl-3 pr-4 py-2 text-base font-medium {% if request.path == url_for('admin') %}bg-gray-100 dark:bg-white/10 border-l-4 border-primary-400{% endif %}">
-                        <i class="fa-solid fa-screwdriver-wrench mr-2"></i> Admin
-                    </a>
-                    {% endif %}
-                    {% endif %}
+
+            <!-- Rechte Seite -->
+            <div style="display: flex; align-items: center; gap: 1rem;">
+                <!-- Dark Mode Toggle Switch -->
+                <div style="display: flex; align-items: center; cursor: pointer;" @click="toggleDarkMode">
+                    <div style="position: relative; width: 2.5rem; height: 1.5rem;">
+                        <input type="checkbox" id="darkModeToggle" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;" x-model="darkMode">
+                        <div x-bind:style="darkMode ? 'background: rgba(88, 169, 255, 0.5);' : 'background: rgba(100, 100, 100, 0.5);'" style="width: 2.5rem; height: 1.5rem; border-radius: 9999px; transition: background-color 0.3s ease;"></div>
+                        <div x-bind:style="darkMode ? 'transform: translateX(1rem); background-color: #58a9ff;' : 'transform: translateX(0); background-color: #ffffff;'" style="position: absolute; left: 0.25rem; top: 0.25rem; width: 1rem; height: 1rem; border-radius: 9999px; transition: transform 0.3s ease, background-color 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);"></div>
+                    </div>
+                    <div x-bind:style="darkMode ? 'color: rgba(255, 255, 255, 0.9);' : 'color: rgba(26, 32, 44, 0.9);'" style="margin-left: 0.75rem; display: none;" x-bind:style="window.innerWidth >= 640 ? 'display: block;' : 'display: none;'">
+                        <span x-text="darkMode ? 'Hell' : 'Dunkel'"></span>
+                    </div>
+                    <div x-bind:style="darkMode ? 'color: rgba(255, 255, 255, 0.9);' : 'color: rgba(26, 32, 44, 0.9);'" style="margin-left: 0.75rem;" x-bind:style="window.innerWidth < 640 ? 'display: block;' : 'display: none;'">
+                        <i class="fa-solid" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
+                    </div>
                 </div>
-                
-                <!-- Mobile Benutzer-Menü -->
-                <div class="pt-4 pb-3 border-t border-gray-200 dark:border-white/10">
-                    {% if current_user.is_authenticated %}
-                    <div class="flex items-center px-4">
-                        <div class="flex-shrink-0">
-                            <div class="h-10 w-10 rounded-full bg-primary-500 flex items-center justify-center text-white font-bold">
-                                {{ current_user.username[0].upper() }}
-                            </div>
+
+                <!-- Mobilmenü-Button -->
+                <button @click="mobileMenuOpen = !mobileMenuOpen" style="display: none; padding: 0.5rem; border-radius: 0.5rem; border: none; background: transparent; cursor: pointer;" x-bind:style="window.innerWidth < 768 ? 'display: block;' : 'display: none;'">
+                    <i class="fa-solid fa-bars" x-bind:style="darkMode ? 'color: rgba(255, 255, 255, 0.9);' : 'color: rgba(26, 32, 44, 0.9);'" style="font-size: 1.25rem;"></i>
+                </button>
+
+                <!-- Benutzermenü oder Login -->
+                {% if current_user.is_authenticated %}
+                <div style="position: relative;" x-data="{ open: false }">
+                    <button @click="open = !open" style="display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 9999px; border: none; transition: all 0.25s ease; cursor: pointer; outline: none;"
+                            x-bind:style="darkMode 
+                            ? 'background: rgba(32, 36, 55, 0.8); color: rgba(255, 255, 255, 0.9);' 
+                            : 'background: rgba(240, 240, 240, 0.8); color: rgba(26, 32, 44, 0.9);'">
+                        <div style="width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 0.875rem; overflow: hidden; background-color: #6366f1;">
+                            {% if current_user.avatar %}
+                            <img src="{{ current_user.avatar }}" alt="{{ current_user.username }}" style="width: 100%; height: 100%; object-fit: cover;">
+                            {% else %}
+                            {{ current_user.username[0].upper() }}
+                            {% endif %}
                         </div>
-                        <div class="ml-3">
-                            <div class="text-base font-medium text-gray-800 dark:text-white">{{ current_user.username }}</div>
-                            <div class="text-sm font-medium text-gray-600 dark:text-gray-300">{{ current_user.email }}</div>
-                        </div>
-                        <button @click="toggleDarkMode()" class="ml-auto p-1 text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white focus:outline-none">
-                            <svg 
-                                x-show="!darkMode" 
-                                class="h-5 w-5" 
-                                xmlns="http://www.w3.org/2000/svg" 
-                                fill="none" 
-                                viewBox="0 0 24 24" 
-                                stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-                            </svg>
-                            <svg 
-                                x-show="darkMode" 
-                                class="h-5 w-5" 
-                                xmlns="http://www.w3.org/2000/svg" 
-                                fill="none" 
-                                viewBox="0 0 24 24" 
-                                stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-                            </svg>
-                        </button>
+                        <span style="font-size: 0.875rem; display: none;" x-bind:style="window.innerWidth >= 1024 ? 'display: block;' : 'display: none;'">{{ current_user.username }}</span>
+                        <i class="fa-solid fa-chevron-down" style="font-size: 0.75rem; transform: rotate(0deg); transition: transform 0.2s ease; display: none;" x-bind:style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'" x-bind:style="window.innerWidth >= 1024 ? 'display: block;' : 'display: none;'"></i>
+                    </button>
+
+                    <!-- Dropdown-Menü -->
+                    <div x-show="open"
+                         @click.away="open = false"
+                         x-transition:enter="transition ease-out duration-100"
+                         x-transition:enter-start="opacity-0 scale-95"
+                         x-transition:enter-end="opacity-100 scale-100"
+                         x-transition:leave="transition ease-in duration-75"
+                         x-transition:leave-start="opacity-100 scale-100"
+                         x-transition:leave-end="opacity-0 scale-95"
+                         style="position: absolute; right: 0; margin-top: 0.5rem; width: 12rem; border-radius: 0.75rem; overflow: hidden; z-index: 50; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transform-origin: top right; transition: all 0.3s ease;"
+                         x-bind:style="darkMode 
+                         ? 'background: rgba(24, 28, 45, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1);' 
+                         : 'background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(0, 0, 0, 0.05);'">
+                        <a href="{{ url_for('profile') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; transition: all 0.25s ease;" 
+                           x-bind:style="darkMode 
+                           ? 'color: rgba(255, 255, 255, 0.9);' 
+                           : 'color: rgba(26, 32, 44, 0.9);'" 
+                           onmouseover="this.style.backgroundColor = this.getAttribute('data-hover-bg')" 
+                           onmouseout="this.style.backgroundColor = 'transparent'"
+                           x-bind:data-hover-bg="darkMode ? 'rgba(179, 143, 255, 0.2)' : 'rgba(179, 143, 255, 0.1)'">
+                            <i class="fa-solid fa-user" style="margin-right: 0.5rem; color: #b38fff;"></i>Profil
+                        </a>
+                        <a href="{{ url_for('settings') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; transition: all 0.25s ease;" 
+                           x-bind:style="darkMode 
+                           ? 'color: rgba(255, 255, 255, 0.9);' 
+                           : 'color: rgba(26, 32, 44, 0.9);'" 
+                           onmouseover="this.style.backgroundColor = this.getAttribute('data-hover-bg')" 
+                           onmouseout="this.style.backgroundColor = 'transparent'"
+                           x-bind:data-hover-bg="darkMode ? 'rgba(179, 143, 255, 0.2)' : 'rgba(179, 143, 255, 0.1)'">
+                            <i class="fa-solid fa-gear" style="margin-right: 0.5rem; color: #b38fff;"></i>Einstellungen
+                        </a>
+                        <div style="margin: 0.5rem 0; height: 1px;" x-bind:style="darkMode ? 'background: rgba(255, 255, 255, 0.1);' : 'background: rgba(0, 0, 0, 0.05);'"></div>
+                        <a href="{{ url_for('logout') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; transition: all 0.25s ease;" 
+                           x-bind:style="darkMode 
+                           ? 'color: rgba(255, 255, 255, 0.9);' 
+                           : 'color: rgba(26, 32, 44, 0.9);'" 
+                           onmouseover="this.style.backgroundColor = this.getAttribute('data-hover-bg')" 
+                           onmouseout="this.style.backgroundColor = 'transparent'"
+                           x-bind:data-hover-bg="darkMode ? 'rgba(239, 68, 68, 0.2)' : 'rgba(239, 68, 68, 0.1)'">
+                            <i class="fa-solid fa-right-from-bracket" style="margin-right: 0.5rem; color: #ef4444;"></i>Abmelden
+                        </a>
                     </div>
-                    <div class="mt-3 space-y-1 px-2">
-                        <a href="{{ url_for('profile') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10">Dein Profil</a>
-                        <a href="{{ url_for('settings') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10">Einstellungen</a>
-                        <a href="{{ url_for('logout') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10">Abmelden</a>
-                    </div>
-                    {% else %}
-                    <div class="mt-3 space-y-1 px-2">
-                        <a href="{{ url_for('login') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10">Anmelden</a>
-                        <a href="{{ url_for('register') }}" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-white/10">Registrieren</a>
-                    </div>
-                    {% endif %}
                 </div>
+                {% else %}
+                <a href="{{ url_for('login') }}" style="display: flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);"
+                   x-bind:style="darkMode 
+                   ? 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' 
+                   : 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);'">
+                    <i class="fa-solid fa-right-to-bracket" style="margin-right: 0.5rem;"></i>Anmelden
+                </a>
+                {% endif %}
             </div>
         </nav>
-    </header>
 
-    <!-- Flash Messages -->
-    <div class="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4 z-20">
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                {% for category, message in messages %}
-                    <div x-data="{ show: true }" x-show="show" x-transition class="mb-4 glass-effect border {% if category == 'error' %}border-red-500/50{% elif category == 'success' %}border-green-500/50{% else %}border-blue-500/50{% endif %} rounded-lg p-4">
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0">
-                                {% if category == 'error' %}
-                                <i class="fa-solid fa-circle-exclamation text-red-500"></i>
-                                {% elif category == 'success' %}
-                                <i class="fa-solid fa-circle-check text-green-500"></i>
-                                {% else %}
-                                <i class="fa-solid fa-circle-info text-blue-500"></i>
-                                {% endif %}
-                            </div>
-                            <div class="ml-3 flex-1 pt-0.5">
-                                <p class="text-sm text-gray-700 dark:text-gray-200">{{ message }}</p>
-                            </div>
-                            <div class="ml-4 flex-shrink-0 flex">
-                                <button @click="show = false" type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-none">
-                                    <span class="sr-only">Schließen</span>
-                                    <i class="fa-solid fa-xmark"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
-            {% endif %}
-        {% endwith %}
-    </div>
-
-    <!-- Hauptinhalt -->
-    <main class="flex-grow container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-6 relative z-10">
-        {% block content %}{% endblock %}
-    </main>
-
-    <!-- Footer -->
-    <footer class="mt-auto py-6 glass-effect border-t border-gray-200 dark:border-white/10 relative z-10">
-        <div class="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="md:flex md:justify-between">
-                <div class="mb-6 md:mb-0">
-                    <a href="{{ url_for('index') }}" class="flex items-center">
-                        <img class="h-8 w-auto mr-2" src="{{ url_for('static', filename='img/favicon.svg') }}" alt="MindMap Logo">
-                        <span class="text-gray-800 dark:text-white font-bold text-xl">Mind<span class="gradient-text">Map</span></span>
-                    </a>
-                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 max-w-sm">
-                        Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen.
-                    </p>
-                </div>
-                
-                <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3">
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-800 dark:text-white tracking-wider uppercase">Navigieren</h3>
-                        <ul class="mt-4 space-y-2">
-                            <li><a href="{{ url_for('index') }}" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">Startseite</a></li>
-                            <li><a href="{{ url_for('mindmap') }}" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">Mindmap</a></li>
-                            <li><a href="{{ url_for('search_thoughts_page') }}" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">Suche</a></li>
-                        </ul>
-                    </div>
-                    
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-800 dark:text-white tracking-wider uppercase">Rechtliches</h3>
-                        <ul class="mt-4 space-y-2">
-                            <li><a href="{{ url_for('impressum') }}" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">Impressum</a></li>
-                            <li><a href="{{ url_for('datenschutz') }}" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">Datenschutz</a></li>
-                            <li><a href="{{ url_for('agb') }}" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">AGB</a></li>
-                        </ul>
-                    </div>
-                    
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-800 dark:text-white tracking-wider uppercase">Folgen</h3>
-                        <div class="mt-4 flex space-x-4">
-                            <a href="https://github.com" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">
-                                <i class="fa-brands fa-github text-xl"></i>
-                                <span class="sr-only">GitHub</span>
-                            </a>
-                            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">
-                                <i class="fa-brands fa-twitter text-xl"></i>
-                                <span class="sr-only">Twitter</span>
-                            </a>
-                            <a href="mailto:info@mindmap.example.com" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">
-                                <i class="fa-solid fa-envelope text-xl"></i>
-                                <span class="sr-only">E-Mail</span>
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="mt-8 border-t border-gray-200 dark:border-white/10 pt-4 md:flex md:items-center md:justify-between">
-                <p class="text-xs text-gray-600 dark:text-gray-300">© {{ current_year }} Mind<span class="gradient-text">Map</span>. Alle Rechte vorbehalten.</p>
-                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 md:mt-0">
-                    <span class="inline-flex items-center">
-                        Mit <i class="fa-solid fa-heart text-red-500 mx-1"></i> und 
-                        <i class="fa-solid fa-code text-primary-500 mx-1"></i> erstellt
-                    </span>
-                </p>
+        <!-- Mobile Menü (erscheint, wenn mobileMenuOpen true ist) -->
+        <div x-show="mobileMenuOpen" 
+             x-transition:enter="transition ease-out duration-200"
+             x-transition:enter-start="opacity-0 -translate-y-10"
+             x-transition:enter-end="opacity-100 translate-y-0"
+             x-transition:leave="transition ease-in duration-150"
+             x-transition:leave-start="opacity-100 translate-y-0"
+             x-transition:leave-end="opacity-0 -translate-y-10"
+             style="width: 100%; overflow: hidden; z-index: 90;"
+             x-bind:style="darkMode 
+             ? 'background: rgba(14, 18, 32, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(255, 255, 255, 0.1);' 
+             : 'background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid rgba(0, 0, 0, 0.05);'">
+            <div style="display: flex; flex-direction: column; padding: 1rem;">
+                <a href="{{ url_for('index') }}" 
+                   style="display: flex; align-items: center; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.25s ease;"
+                   x-bind:style="darkMode 
+                   ? '{{ request.endpoint == 'index' ? 'background: rgba(179, 143, 255, 0.3); color: white;' : 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
+                   : '{{ request.endpoint == 'index' ? 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' : 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
+                    <i class="fa-solid fa-home" style="margin-right: 0.5rem; width: 1.25rem;"></i>Start
+                </a>
+                <a href="{{ url_for('mindmap') }}" 
+                   style="display: flex; align-items: center; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.25s ease;"
+                   x-bind:style="darkMode 
+                   ? '{{ request.endpoint == 'mindmap' ? 'background: rgba(179, 143, 255, 0.3); color: white;' : 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
+                   : '{{ request.endpoint == 'mindmap' ? 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' : 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
+                    <i class="fa-solid fa-diagram-project" style="margin-right: 0.5rem; width: 1.25rem;"></i>Mindmap
+                </a>
+                {% if current_user.is_authenticated %}
+                <a href="{{ url_for('profile') }}" 
+                   style="display: flex; align-items: center; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border-radius: 0.75rem; font-weight: 500; text-decoration: none; transition: all 0.25s ease;"
+                   x-bind:style="darkMode 
+                   ? '{{ request.endpoint == 'profile' ? 'background: rgba(179, 143, 255, 0.3); color: white;' : 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
+                   : '{{ request.endpoint == 'profile' ? 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' : 'background: transparent; color: rgba(26, 32, 44, 0.9);' }}'">
+                    <i class="fa-solid fa-user" style="margin-right: 0.5rem; width: 1.25rem;"></i>Profil
+                </a>
+                {% endif %}
             </div>
         </div>
-    </footer>
 
-    <!-- Scripts -->
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
-    {% block extra_js %}{% endblock %}
+        <!-- Hauptinhalt -->
+        <main class="flex-grow pt-4">
+            {% block content %}{% endblock %}
+        </main>
+
+        <!-- Footer -->
+        <footer class="mt-12 py-8 transition-colors duration-300" {# mt-16 changed to mt-12, py-10 changed to py-8 #}
+                :class="darkMode ? 'glass-morphism' : 'glass-morphism-light'">
+            <div class="container mx-auto px-4">
+                <div class="flex flex-col md:flex-row justify-between items-center md:items-start">
+                    <div class="mb-8 md:mb-0 text-center md:text-left">
+                        <a href="{{ url_for('index') }}" class="text-2xl font-bold gradient-text">MindMap</a>
+                        <p class="mt-2 text-sm max-w-sm"
+                           :class="darkMode ? 'text-gray-400' : 'text-gray-600'">Eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen.</p>
+                    </div>
+
+                    <div class="flex flex-wrap justify-center md:justify-start space-x-6 mb-8 md:mb-0">
+
+                        <a href="{{ url_for('impressum') }}"
+                           class="transition-colors text-sm px-3 py-2 rounded-lg"
+                           :class="darkMode ? 'text-gray-400 hover:text-white hover:bg-gray-800/50' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-200/50'">Impressum</a>
+                        <a href="{{ url_for('datenschutz') }}"
+                           class="transition-colors text-sm px-3 py-2 rounded-lg"
+                           :class="darkMode ? 'text-gray-400 hover:text-white hover:bg-gray-800/50' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-200/50'">Datenschutz</a>
+                        <a href="{{ url_for('agb') }}"
+                           class="transition-colors text-sm px-3 py-2 rounded-lg"
+                           :class="darkMode ? 'text-gray-400 hover:text-white hover:bg-gray-800/50' : 'text-gray-700 hover:text-gray-900 hover:bg-gray-200/50'">AGB</a>
+                    </div>
+
+                    <!-- Optional: Social Media Links oder andere Elemente -->
+                    {#
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-linkedin"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fab fa-github"></i></a>
+                    </div>
+                    #}
+                </div>
+
+                <div class="mt-8 pt-6 text-center text-xs" {# mt-10 changed to mt-8 #}
+                     :class="darkMode ? 'border-t border-gray-800/50 text-gray-500' : 'border-t border-gray-300/50 text-gray-600'">
+                    &copy; {{ current_year }} MindMap. Alle Rechte vorbehalten.
+                </div>
+            </div>
+        </footer>
+    </div>
+    
+    <!-- Hilfsscripts -->
+    {% block scripts %}{% endblock %}
 </body>
 </html> 
\ No newline at end of file
diff --git a/website/templates/errors/403.html b/website/templates/errors/403.html
new file mode 100644
index 0000000..faaf0a6
--- /dev/null
+++ b/website/templates/errors/403.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% 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="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 flex-col sm:flex-row gap-4 justify-center">
+                <a href="{{ url_for('index') }}" class="btn-primary">
+                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
+                </a>
+                <a href="javascript:history.back()" class="btn-secondary">
+                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %} 
\ No newline at end of file
diff --git a/website/templates/errors/404.html b/website/templates/errors/404.html
new file mode 100644
index 0000000..36f85f2
--- /dev/null
+++ b/website/templates/errors/404.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% 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="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 flex-col sm:flex-row gap-4 justify-center">
+                <a href="{{ url_for('index') }}" class="btn-primary">
+                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
+                </a>
+                <a href="javascript:history.back()" class="btn-secondary">
+                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %} 
\ No newline at end of file
diff --git a/website/templates/errors/429.html b/website/templates/errors/429.html
new file mode 100644
index 0000000..1caab92
--- /dev/null
+++ b/website/templates/errors/429.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% 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="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 flex-col sm:flex-row gap-4 justify-center">
+                <a href="{{ url_for('index') }}" class="btn-primary">
+                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
+                </a>
+                <a href="javascript:history.back()" class="btn-secondary">
+                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %} 
\ No newline at end of file
diff --git a/website/templates/errors/500.html b/website/templates/errors/500.html
new file mode 100644
index 0000000..e3c6cbe
--- /dev/null
+++ b/website/templates/errors/500.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% 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="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 flex-col sm:flex-row gap-4 justify-center">
+                <a href="{{ url_for('index') }}" class="btn-primary">
+                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
+                </a>
+                <a href="javascript:history.back()" class="btn-secondary">
+                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %} 
\ No newline at end of file
diff --git a/website/templates/index.html b/website/templates/index.html
index 4c8bac4..ffeebdd 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -4,9 +4,19 @@
 
 {% block extra_css %}
 <style>
-  .hero-gradient {
-    background: linear-gradient(125deg, rgba(32, 92, 245, 0.8), rgba(128, 32, 245, 0.8));
-    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+  /* Hintergrund über die gesamte Seite erstrecken */
+  html, body {
+    min-height: 100vh;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+  }
+  
+  /* Entferne den Gradient-Hintergrund vollständig */
+  .hero-gradient, .bg-fade {
+    background: none !important;
+    clip-path: none !important;
   }
   
   .tech-line {
@@ -30,48 +40,6 @@
     background-color: rgba(255, 255, 255, 0.3);
   }
   
-  .animate-float {
-    animation: float 6s ease-in-out infinite;
-  }
-  
-  @keyframes float {
-    0% { transform: translateY(0); }
-    50% { transform: translateY(-12px); }
-    100% { transform: translateY(0); }
-  }
-  
-  .gradient-btn {
-    background-size: 200% auto;
-    transition: 0.5s;
-    background-image: linear-gradient(to right, #205cf5 0%, #8020f5 50%, #205cf5 100%);
-    transform: translateY(0);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  }
-  
-  .gradient-btn:hover {
-    background-position: right center;
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(128, 32, 245, 0.2), 0 4px 6px -2px rgba(128, 32, 245, 0.1);
-  }
-  
-  .card-hover {
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-  }
-  
-  .card-hover:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px -5px rgba(128, 32, 245, 0.2);
-  }
-  
-  .ascii-art {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    line-height: 1;
-    white-space: pre;
-    user-select: none;
-    opacity: 0.4;
-  }
-  
   @keyframes pulse {
     0% { r: 10; opacity: 0.7; }
     50% { r: 12; opacity: 1; }
@@ -82,15 +50,6 @@
     animation: pulse 3s ease-in-out infinite;
   }
   
-  .bg-fade {
-    background: linear-gradient(to bottom, rgba(240, 240, 245, 0.4) 0%, rgba(240, 240, 245, 0.8) 100%);
-  }
-  
-  .dark .bg-fade {
-    background: linear-gradient(to bottom, rgba(10, 15, 30, 0.2) 0%, rgba(10, 15, 30, 0.6) 100%);
-    backdrop-filter: blur(2px);
-  }
-  
   @keyframes iconPulse {
     0% { transform: scale(1); }
     50% { transform: scale(1.1); }
@@ -101,26 +60,33 @@
     animation: iconPulse 3s ease-in-out infinite;
     display: inline-block;
   }
+  
+  /* Volle Seitenbreite für Container */
+  #app-container, .container, main, .mx-auto, .py-12 {
+    width: 100%;
+  }
+  
+  /* Sicherstellen dass der Hintergrund die ganze Seite abdeckt */
+  .full-page-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -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-16 pb-32" style="border-radius: 20px !important;" style="border-radius: 20px !important;">
-  <!-- Background gradient effect -->
-  <div class="absolute inset-0 bg-fade"></div>
-  
-  <!-- Tech dots background -->
-  <div class="absolute inset-0 overflow-hidden opacity-30" style="border-radius: 20px !important;">
-    {% for i in range(15) %}
-    <div class="tech-dot" style="top: {{ 5 + (i * 6) }}%; left: {{ (i * 7) % 90 }}%;"></div>
-    {% endfor %}
-  </div>
-  
+<section class="relative pt-16 pb-32">
   <!-- Hero Content -->
-  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10" style="border-radius: 20px !important;">
-    <div class="text-center mb-16" style="border-radius: 20px !important;">
+  <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="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-8 text-gray-900 dark:text-white">
         <span class="gradient-text">Wissen</span> neu
         <div class="mt-2">vernetzen</div>
@@ -130,14 +96,14 @@
         in einem interaktiven Wissensnetzwerk.
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="{{ url_for('mindmap') }}" class="btn-primary text-lg px-8 py-4">
+        <a href="{{ url_for('mindmap') }}" class="btn-primary text-lg px-8 py-4 rounded-lg">
           <span class="flex items-center">
             <i class="fa-solid fa-diagram-project mr-3"></i> 
             Mindmap erkunden
           </span>
         </a>
         {% if not current_user.is_authenticated %}
-        <a href="{{ url_for('register') }}" class="gradient-btn text-lg px-8 py-4 text-white rounded-lg shadow-lg">
+        <a href="{{ url_for('register') }}" class="gradient-btn text-lg px-8 py-4 rounded-lg shadow-lg">
           <span class="flex items-center">
             <i class="fa-solid fa-user-plus mr-3 icon-pulse"></i>
             Konto erstellen
@@ -194,12 +160,12 @@
           
           <!-- Network Nodes -->
           <g class="nodes">
-            <circle cx="400" cy="150" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse" />
-            <circle cx="200" cy="250" r="10" fill="url(#nodeGradient)" />
-            <circle cx="600" cy="250" r="10" fill="url(#nodeGradient)" />
-            <circle cx="400" cy="350" r="15" fill="url(#nodeGradient)" filter="url(#glow)" class="animate-pulse" />
-            <circle cx="300" cy="200" r="8" fill="url(#nodeGradient)" />
-            <circle cx="500" cy="300" r="8" fill="url(#nodeGradient)" />
+            <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>
@@ -222,72 +188,72 @@
     
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       <!-- Feature Card 1 -->
-      <div class="card card-hover p-6">
-        <div class="text-primary-400 text-3xl mb-4">
+      <div class="card">
+        <div class="icon">
           <i class="fa-solid fa-brain icon-pulse"></i>
         </div>
-        <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-white">Visualisiere Wissen</h3>
-        <p class="text-gray-600 dark:text-gray-300">
-          Sieh Wissen als vernetztes System, entdecke Zusammenhänge und erkenne überraschende 
+        <h3>Visualisiere Wissen</h3>
+        <p>
+          Sieh Wissen als vernetztes System, entdecke Zusammenhänge und erkenne überraschende
           Verbindungen zwischen verschiedenen Themengebieten.
         </p>
       </div>
       
       <!-- Feature Card 2 -->
-      <div class="card card-hover p-6">
-        <div class="text-secondary-400 text-3xl mb-4">
+      <div class="card">
+        <div class="icon">
           <i class="fa-solid fa-lightbulb icon-pulse"></i>
         </div>
-        <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-white">Teile Gedanken</h3>
-        <p class="text-gray-600 dark:text-gray-300">
-          Füge deine eigenen Ideen und Perspektiven hinzu. Erstelle Verbindungen zu 
+        <h3>Teile Gedanken</h3>
+        <p>
+          Füge deine eigenen Ideen und Perspektiven hinzu. Erstelle Verbindungen zu
           vorhandenen Gedanken und bereichere die wachsende Wissensbasis.
         </p>
       </div>
       
       <!-- Feature Card 3 -->
-      <div class="card card-hover p-6">
-        <div class="text-green-400 text-3xl mb-4">
+      <div class="card">
+        <div class="icon">
           <i class="fa-solid fa-users icon-pulse"></i>
         </div>
-        <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-white">Community</h3>
-        <p class="text-gray-600 dark:text-gray-300">
+        <h3>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="card card-hover p-6">
-        <div class="text-blue-400 text-3xl mb-4">
+      <div class="card">
+        <div class="icon">
           <i class="fa-solid fa-robot icon-pulse"></i>
         </div>
-        <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-white">KI-Assistenz</h3>
-        <p class="text-gray-600 dark:text-gray-300">
+        <h3>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="card card-hover p-6">
-        <div class="text-purple-400 text-3xl mb-4">
+      <div class="card">
+        <div class="icon">
           <i class="fa-solid fa-search icon-pulse"></i>
         </div>
-        <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-white">Intelligente Suche</h3>
-        <p class="text-gray-600 dark:text-gray-300">
-          Finde genau die Informationen, die du suchst, mit fortschrittlichen Such- und 
+        <h3>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="card card-hover p-6">
-        <div class="text-indigo-400 text-3xl mb-4">
+      <div class="card">
+        <div class="icon">
           <i class="fa-solid fa-route icon-pulse"></i>
         </div>
-        <h3 class="text-xl font-bold mb-3 text-gray-800 dark:text-white">Geführte Pfade</h3>
-        <p class="text-gray-600 dark:text-gray-300">
+        <h3>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.
         </p>
@@ -298,10 +264,8 @@
 
 <!-- Call to Action Section -->
 <section class="py-16 relative overflow-hidden">
-  <div class="absolute inset-0 bg-gradient-to-r from-primary-100/50 to-secondary-100/50 dark:from-primary-900/50 dark:to-secondary-900/50 z-0"></div>
-  
   <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-    <div class="glass-effect rounded-xl p-8 md:p-12 border border-gray-200 dark:border-gray-700">
+    <div class="glass-effect p-8 md:p-12 rounded-lg">
       <div class="md:flex md:items-center md:justify-between">
         <div class="md:w-2/3">
           <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Bereit, Wissen neu zu entdecken?</h2>
@@ -310,7 +274,7 @@
           </p>
         </div>
         <div class="md:w-1/3 text-center md:text-right">
-          <a href="{{ url_for('mindmap') }}" class="inline-block gradient-btn text-white font-bold py-3 px-8 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
+          <a href="{{ url_for('mindmap') }}" class="inline-block btn-primary font-bold py-3 px-8 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
             <span class="flex items-center justify-center">
               <i class="fa-solid fa-arrow-right mr-2"></i>
               Zur Mindmap
@@ -327,7 +291,7 @@
   <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">
       <!-- KI-Chat -->
-      <div class="card p-6">
+      <div class="glass-effect p-6 rounded-lg">
         <h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
           <i class="fa-solid fa-robot text-primary-400 mr-2"></i>
           KI-Assistent
@@ -336,7 +300,7 @@
           Stelle Fragen, lasse dir Themen erklären oder finde neue Verbindungen mit Hilfe
           unseres KI-Assistenten.
         </p>
-        <div class="glass-effect p-4 rounded-lg mb-4 border border-gray-200 dark:border-gray-700">
+        <div class="glass-effect p-4 rounded-lg mb-4">
           <div class="flex items-start">
             <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center flex-shrink-0 mr-3">
               <i class="fa-solid fa-robot text-white text-sm"></i>
@@ -357,11 +321,11 @@
             </div>
           </div>
         </div>
-        <a href="#" class="btn-outline w-full text-center">KI-Chat starten</a>
+        <button onclick="window.MindMap.assistant.toggleAssistant(true)" class="btn-outline w-full text-center rounded-lg">KI-Chat starten</button>
       </div>
       
       <!-- Themen-Übersicht -->
-      <div class="card p-6">
+      <div class="glass-effect p-6 rounded-lg">
         <h3 class="text-xl font-bold mb-4 flex items-center text-gray-800 dark:text-white">
           <i class="fa-solid fa-fire text-secondary-400 mr-2"></i>
           Themen-Übersicht
@@ -392,7 +356,7 @@
             <i class="fa-solid fa-chevron-right text-gray-500"></i>
           </a>
         </div>
-        <a href="{{ url_for('search_thoughts_page') }}" class="btn-outline w-full text-center">Alle Themen entdecken</a>
+        <a href="{{ url_for('search_thoughts_page') }}" class="btn-outline w-full text-center rounded-lg">Alle Themen entdecken</a>
       </div>
     </div>
   </div>
diff --git a/website/templates/layout.html b/website/templates/layout.html
new file mode 100644
index 0000000..33d7242
--- /dev/null
+++ b/website/templates/layout.html
@@ -0,0 +1,11 @@
+<!-- Navigation -->
+<header class="w-full">
+    <nav class="fixed top-0 z-50 w-full bg-dark-900 border-b border-gray-700">
+        <!-- ... existing code ... -->
+    </nav>
+</header>
+
+<!-- Main Content Container -->
+<div class="container mx-auto px-4 pt-20 pb-10">
+    <!-- ... existing code ... -->
+</div> 
\ No newline at end of file
diff --git a/website/templates/mindmap.html b/website/templates/mindmap.html
index cd4e340..ebe91de 100644
--- a/website/templates/mindmap.html
+++ b/website/templates/mindmap.html
@@ -5,87 +5,212 @@
 {% block extra_css %}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/dist/tippy.css">
 <style>
-  /* Modernes Dark-Mode Design mit Purple-Blue Gradient */
-  .mindmap-header {
-    background: linear-gradient(120deg, rgba(32, 32, 64, 0.7), rgba(24, 24, 48, 0.7));
-    border-radius: 0.75rem;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+  /* Globaler Stil - Hintergrund über die gesamte Seite */
+  html, body {
+    background-color: var(--dark-bg) !important;
+    min-height: 100vh;
+    width: 100%;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
   }
   
-  .gradient-text {
-    background: linear-gradient(to right, #a67fff, #5096ff);
+  /* Sicherstellen, dass der Hintergrund die gesamte Seite abdeckt */
+  #app-container, .container, main, .mx-auto, .py-12, body > div, #content-wrapper, #mindmap-container {
+    background-color: var(--dark-bg) !important;
+    width: 100%;
+  }
+  
+  /* Verbesserte Glasmorphismus-Stile für Karten */
+  .glass-card, .mindmap-card {
+    background: rgba(24, 28, 45, 0.75); 
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 24px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
+    transition: all 0.3s ease;
+  }
+  
+  .glass-card:hover, .mindmap-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  
+  /* Feature-Cards-Stil mit besserem Glasmorphismus */
+  .feature-card {
+    background: rgba(24, 28, 45, 0.75);
+    border-radius: 24px;
+    overflow: hidden;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
+    transition: all 0.3s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 1.75rem;
+  }
+  
+  .feature-card:hover {
+    transform: translateY(-5px);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
+    background: rgba(28, 32, 52, 0.9);
+  }
+  
+  .feature-card-icon {
+    font-size: 2.75rem;
+    margin-bottom: 1.25rem;
+    background: linear-gradient(135deg, #b38fff, #14b8a6);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
-    text-shadow: 0 0 20px rgba(160, 80, 255, 0.3);
+    filter: drop-shadow(0 0 10px rgba(179, 143, 255, 0.6));
+  }
+  
+  /* Feature-Card-Text besser lesbar machen */
+  .feature-card h3 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 0.9rem;
+    color: #ffffff;
+    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
+    letter-spacing: 0.2px;
+  }
+  
+  .feature-card p {
+    color: rgba(255, 255, 255, 0.95);
+    font-size: 1.1rem;
+    line-height: 1.6;
+    font-weight: 400;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    letter-spacing: 0.3px;
+  }
+  
+  /* Mindmap-Header */
+  .mindmap-header {
+    background: rgba(20, 24, 42, 0.85);
+    border-radius: 24px;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
+  }
+  
+  .gradient-text {
+    background: linear-gradient(to right, #b38fff, #58a9ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 0 25px rgba(179, 143, 255, 0.25);
+    font-weight: 800;
   }
   
   /* D3.js Mindmap spezifische Stile */
   .mindmap-svg {
-    background: radial-gradient(circle at center, rgba(40, 30, 60, 0.4) 0%, rgba(20, 20, 40, 0.2) 70%);
+    background: rgba(14, 18, 32, 0.3);
     width: 100%;
     height: 100%;
-    border-radius: 0.5rem;
+    border-radius: 24px;
   }
   
+  /* Verbesserte Mindmap-Knoten-Stile */
   .node {
     cursor: pointer;
     transition: all 0.3s ease;
   }
   
+  .node circle {
+    stroke: rgba(255, 255, 255, 0.12);
+    stroke-width: 2px;
+    fill: rgba(24, 28, 45, 0.85);
+    filter: url(#glass-effect);
+  }
+  
+  .node:hover circle {
+    filter: url(#hover-glow);
+    stroke: rgba(255, 255, 255, 0.25);
+  }
+  
+  .node.selected circle {
+    filter: url(#selected-glow);
+    stroke: rgba(179, 143, 255, 0.6);
+    stroke-width: 3px;
+  }
+  
   .node-label {
     font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif;
-    font-weight: 500;
+    font-weight: 600;
     pointer-events: none;
     user-select: none;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
+    font-size: 16px;
+    letter-spacing: 0.3px;
+    fill: #ffffff;
   }
   
   .link {
     transition: stroke 0.3s ease, opacity 0.3s ease;
+    stroke: rgba(255, 255, 255, 0.3);
+    stroke-width: 2;
+    opacity: 0.7;
   }
   
-  /* Control Bar */
+  .link:hover, .link.highlighted {
+    stroke: rgba(179, 143, 255, 0.7);
+    opacity: 0.9;
+    stroke-width: 3;
+  }
+  
+  /* Control Bar mit verbesserten Glasmorphismus und Lesbarkeit */
   .controls-bar {
-    background: rgba(20, 20, 40, 0.7);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 0.5rem 0.5rem 0 0;
+    background: rgba(24, 28, 45, 0.85);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 20px 20px 0 0;
   }
   
   /* Tooltip Stile */
   .tippy-box[data-theme~='mindmap'] {
-    background-color: rgba(20, 20, 40, 0.9);
+    background-color: rgba(24, 28, 45, 0.95);
     color: #ffffff;
-    border: 1px solid rgba(160, 80, 255, 0.2);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 10px rgba(160, 80, 255, 0.2);
-    backdrop-filter: blur(10px);
+    border: 1px solid rgba(179, 143, 255, 0.25);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(179, 143, 255, 0.25);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 16px;
   }
   
   .tippy-box[data-theme~='mindmap'] .tippy-arrow {
-    color: rgba(20, 20, 40, 0.9);
+    color: rgba(24, 28, 45, 0.95);
   }
   
   .node-tooltip {
     font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif;
     font-size: 14px;
-    line-height: 1.5;
-    padding: 8px 12px;
+    line-height: 1.6;
+    padding: 12px 16px;
+    letter-spacing: 0.3px;
   }
   
   .node-tooltip strong {
     font-weight: 600;
-    color: #a67fff;
+    color: #b38fff;
   }
   
   /* Gedanken-Container */
   .thought-container {
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 0.5rem;
-    backdrop-filter: blur(10px);
-    background: rgba(20, 20, 40, 0.7);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 24px;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    background: rgba(24, 28, 45, 0.85);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
   }
   
   /* Angepasste Scrollbar für den Gedanken-Container */
@@ -94,17 +219,17 @@
   }
   
   .custom-scrollbar::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.08);
     border-radius: 3px;
   }
   
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: rgba(160, 80, 255, 0.3);
+    background: rgba(179, 143, 255, 0.5);
     border-radius: 3px;
   }
   
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(160, 80, 255, 0.5);
+    background: rgba(179, 143, 255, 0.7);
   }
   
   /* Pulse-Animation für leere Gedanken */
@@ -121,208 +246,268 @@
     }
   }
   
-  /* ASCII-Style Tech Decoration */
-  .ascii-decoration {
-    font-family: monospace;
-    color: rgba(160, 80, 255, 0.15);
-    font-size: 12px;
-    white-space: pre;
-    line-height: 1;
-    user-select: none;
-    position: absolute;
-    z-index: -1;
-  }
-  
-  .top-right-deco {
-    top: 20px;
-    right: 20px;
-  }
-  
-  .bottom-left-deco {
-    bottom: 20px;
-    left: 20px;
-  }
-  
-  /* Button-Effekte */
+  /* Button-Effekte mit verbesserter Lesbarkeit */
   .control-btn {
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
+    background: rgba(32, 36, 55, 0.85);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 16px;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    letter-spacing: 0.3px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   }
   
   .control-btn:hover {
-    background: rgba(160, 80, 255, 0.2);
-    transform: translateY(-1px);
+    background: rgba(179, 143, 255, 0.35);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 0 15px rgba(179, 143, 255, 0.25);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   }
   
   .control-btn:active {
     transform: translateY(1px);
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
   }
   
-  .control-btn::after {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
-    background-repeat: no-repeat;
-    background-position: 50%;
-    transform: scale(10, 10);
-    opacity: 0;
-    transition: transform 0.5s, opacity 0.5s;
+  .control-btn.active {
+    background: rgba(179, 143, 255, 0.4);
+    border: 1px solid rgba(179, 143, 255, 0.5);
+    box-shadow: 0 0 15px rgba(179, 143, 255, 0.3);
   }
   
-  .control-btn:active::after {
-    transform: scale(0, 0);
-    opacity: 0.3;
-    transition: 0s;
+  /* Glow Effect für Buttons */
+  .btn-glow:hover {
+    box-shadow: 0 0 15px rgba(179, 143, 255, 0.5);
+  }
+  
+  /* Light Mode Anpassungen */
+  html.light .mindmap-svg {
+    background: rgba(240, 244, 248, 0.3);
+  }
+  
+  html.light .node circle {
+    fill: rgba(255, 255, 255, 0.9);
+    stroke: rgba(0, 0, 0, 0.1);
+  }
+  
+  html.light .node-label {
+    fill: #1a202c;
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
+  }
+  
+  html.light .link {
+    stroke: rgba(0, 0, 0, 0.2);
+  }
+  
+  html.light .glass-card,
+  html.light .mindmap-card,
+  html.light .feature-card,
+  html.light .thought-container,
+  html.light .mindmap-header,
+  html.light .controls-bar {
+    background: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  }
+  
+  html.light .control-btn {
+    background: rgba(255, 255, 255, 0.9);
+    color: #1a202c;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    text-shadow: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    font-weight: 600;
+  }
+  
+  html.light .control-btn:hover {
+    background: rgba(179, 143, 255, 0.15);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+    color: #7e3ff2;
+    font-weight: 700;
+  }
+  
+  html.light .control-btn.active {
+    background: rgba(179, 143, 255, 0.2);
+    border: 1px solid rgba(126, 63, 242, 0.3);
+    color: #7e3ff2;
+    font-weight: 700;
+  }
+  
+  html.light .feature-card h3 {
+    color: #1a202c;
+    text-shadow: none;
+  }
+  
+  html.light .feature-card p {
+    color: #4a5568;
+    text-shadow: none;
+  }
+  
+  html.light .node-tooltip strong {
+    color: #7e3ff2;
+  }
+  
+  /* Karten in der Mindmap mit verbesserten Styles */
+  .mindmap-card {
+    background: rgba(24, 28, 45, 0.75);
+    border-radius: 24px;
+    overflow: hidden;
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
+    transition: all 0.3s ease;
+  }
+  
+  .mindmap-card:hover {
+    transform: translateY(-5px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
+    background: rgba(28, 32, 52, 0.8);
+  }
+  
+  .mindmap-card-header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .mindmap-card-body {
+    padding: 1.5rem;
+  }
+  
+  .mindmap-card-footer {
+    padding: 1.25rem 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  html.light .mindmap-card-header,
+  html.light .mindmap-card-footer {
+    border-color: rgba(0, 0, 0, 0.06);
   }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="relative mb-6" data-page="mindmap">
-  <!-- ASCII Dekorationen -->
-  <div class="ascii-decoration top-right-deco">
-      ┌─┐ ┌─┐ ┌─┐ ┌─┐
-      │ │ │ │ │ │ │ │
-      └─┘ └─┘ └─┘ └─┘
-  </div>
-  <div class="ascii-decoration bottom-left-deco">
-      ╔══╗ ╔═══╗ ╔══╗
-      ║  ║ ║   ║ ║  ║
-      ╚══╝ ╚═══╝ ╚══╝
-  </div>
-
-  <!-- Header Bereich -->
-  <div class="mb-8 p-6 mindmap-header">
-    <h1 class="text-5xl md:text-6xl font-bold mb-3">
-      <span class="gradient-text">Mindmap</span>
-    </h1>
-    <p class="text-lg text-gray-200 max-w-3xl leading-relaxed">
-      Erkunden Sie interaktiv verknüpfte Wissensgebiete und ihre Verbindungen. Fügen Sie eigene Gedanken hinzu und erstellen Sie ein kollaboratives Wissensnetz.
-    </p>
-    <div class="mt-3 flex flex-wrap gap-3">
-      <span class="px-3 py-1 text-xs rounded-full bg-purple-900/50 text-purple-200 border border-purple-700/30">
-        <i class="fa-solid fa-diagram-project mr-1"></i> Interaktiv
-      </span>
-      <span class="px-3 py-1 text-xs rounded-full bg-blue-900/50 text-blue-200 border border-blue-700/30">
-        <i class="fa-solid fa-sitemap mr-1"></i> Wissensvernetzung
-      </span>
-      <span class="px-3 py-1 text-xs rounded-full bg-indigo-900/50 text-indigo-200 border border-indigo-700/30">
-        <i class="fa-solid fa-lightbulb mr-1"></i> Kollaborativ
-      </span>
+<div class="container mx-auto px-4 py-12">
+  <!-- Feature-Karten-Container -->
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+    <!-- Feature-Karte 1: Visualisiere Wissen -->
+    <div class="feature-card">
+      <div class="feature-card-icon">
+        <i class="fas fa-brain"></i>
+      </div>
+      <h3>Visualisiere Wissen</h3>
+      <p>Sieh Wissen als vernetztes System, entdecke Zusammenhänge und erkenne überraschende Verbindungen zwischen verschiedenen Themengebieten.</p>
+    </div>
+    
+    <!-- Feature-Karte 2: Teile Gedanken -->
+    <div class="feature-card">
+      <div class="feature-card-icon">
+        <i class="fas fa-lightbulb"></i>
+      </div>
+      <h3>Teile Gedanken</h3>
+      <p>Füge deine eigenen Ideen und Perspektiven hinzu. Erstelle Verbindungen zu vorhandenen Gedanken und bereichere die wachsende Wissensbasis.</p>
+    </div>
+    
+    <!-- Feature-Karte 3: Community -->
+    <div class="feature-card">
+      <div class="feature-card-icon">
+        <i class="fas fa-users"></i>
+      </div>
+      <h3>Community</h3>
+      <p>Sei Teil einer Gemeinschaft, die gemeinsam ein verteiltes Wissensarchiv aufbaut und sich in thematisch fokussierten Bereichen austauscht.</p>
     </div>
   </div>
-  
-  <!-- Haupt-Grid-Layout -->
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-    <!-- Visualisierungsbereich -->
-    <div class="lg:col-span-2">
-      <div class="rounded-lg overflow-hidden bg-gradient-to-br from-slate-900/60 to-slate-800/40 border border-slate-700/20 shadow-xl">
-        <!-- Mindmap Controls Bar -->
-        <div class="flex items-center justify-between p-4 controls-bar">
-          <div class="relative flex-grow max-w-md">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <i class="fa-solid fa-magnifying-glass text-gray-400"></i>
-            </div>
-            <input type="text" id="mindmap-search" 
-                   class="bg-slate-800/80 border border-slate-700/50 text-white rounded-md block w-full pl-10 p-2.5 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
-                   placeholder="Knoten suchen...">
-          </div>
-          
-          <div class="flex gap-2">
-            <button id="zoom-in" class="control-btn p-2 rounded-md text-gray-200" title="Vergrößern">
-              <i class="fa-solid fa-plus"></i>
-            </button>
-            <button id="zoom-out" class="control-btn p-2 rounded-md text-gray-200" title="Verkleinern">
-              <i class="fa-solid fa-minus"></i>
-            </button>
-            <button id="zoom-reset" class="control-btn p-2 rounded-md text-gray-200" title="Ansicht zurücksetzen">
-              <i class="fa-solid fa-house"></i>
-            </button>
-            <button id="toggle-guide" class="control-btn p-2 rounded-md text-gray-200" title="Anleitung anzeigen">
-              <i class="fa-solid fa-circle-question"></i>
-            </button>
+
+  <!-- Mindmap-Visualisierung Header -->
+  <div class="mindmap-header p-6 mb-6">
+    <h2 class="text-3xl font-bold mb-2 gradient-text">Wissenslandschaft erkunden</h2>
+    <p class="text-gray-300 mb-0">Interagiere mit der Mindmap, um Verbindungen zu entdecken und neue Ideen hinzuzufügen</p>
+  </div>
+
+  <!-- Mindmap-Container -->
+  <div class="glass-card overflow-hidden mb-12">
+    <div id="mindmap-container" class="relative" style="height: 70vh; min-height: 500px;">
+      <!-- Lade-Overlay -->
+      <div class="mindmap-loading absolute inset-0 flex items-center justify-center z-10" style="background: rgba(14, 18, 32, 0.7); backdrop-filter: blur(5px);">
+        <div class="text-center">
+          <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500 mb-4"></div>
+          <p class="text-white text-lg">Wissenslandschaft wird geladen...</p>
+          <div class="w-64 h-2 bg-gray-700 rounded-full mt-4 overflow-hidden">
+            <div class="loading-progress h-full bg-gradient-to-r from-purple-500 to-blue-500 rounded-full" style="width: 0%"></div>
           </div>
         </div>
-        
-        <!-- Mindmap Container -->
-        <div id="mindmap-container" class="relative w-full h-[600px] bg-gradient-to-br from-slate-900/30 to-indigo-900/10">
-          <!-- Wird durch D3.js befüllt -->
-        </div>
-        
-        <!-- Legende -->
-        <div class="p-4 border-t border-white/5 bg-slate-900/70 backdrop-blur">
-          <div class="text-xs text-gray-400 mb-2">Legende</div>
-          <div class="flex flex-wrap gap-4">
-            <div class="flex items-center">
-              <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
-              <span class="text-sm text-gray-300">Hauptkategorien</span>
-            </div>
-            <div class="flex items-center">
-              <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
-              <span class="text-sm text-gray-300">Unterkategorien</span>
-            </div>
-            <div class="flex items-center">
-              <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
-              <span class="text-sm text-gray-300">Konzepte</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Anleitung -->
-      <div id="guide-panel" class="mt-4 rounded-lg overflow-hidden bg-gradient-to-br from-slate-900/60 to-slate-800/40 border border-slate-700/20 shadow-xl p-4 hidden">
-        <h3 class="text-lg font-semibold mb-2 text-white">Navigation der Mindmap</h3>
-        <ul class="space-y-1 text-gray-300 text-sm">
-          <li class="flex items-start">
-            <i class="fa-solid fa-circle-dot text-purple-400 mt-1 mr-2"></i>
-            <span><strong>Knoten ansehen:</strong> Bewegen Sie die Maus über einen Knoten, um Details zu sehen.</span>
-          </li>
-          <li class="flex items-start">
-            <i class="fa-solid fa-circle-dot text-purple-400 mt-1 mr-2"></i>
-            <span><strong>Gedanken anzeigen:</strong> Klicken Sie auf einen Knoten, um zugehörige Gedanken anzuzeigen.</span>
-          </li>
-          <li class="flex items-start">
-            <i class="fa-solid fa-circle-dot text-purple-400 mt-1 mr-2"></i>
-            <span><strong>Zoomen:</strong> Nutzen Sie das Mausrad oder die Zoom-Schaltflächen oben.</span>
-          </li>
-          <li class="flex items-start">
-            <i class="fa-solid fa-circle-dot text-purple-400 mt-1 mr-2"></i>
-            <span><strong>Verschieben:</strong> Klicken und ziehen Sie den Hintergrund, um die Ansicht zu verschieben.</span>
-          </li>
-          <li class="flex items-start">
-            <i class="fa-solid fa-circle-dot text-purple-400 mt-1 mr-2"></i>
-            <span><strong>Knoten bewegen:</strong> Ziehen Sie einen Knoten, um seine Position anzupassen.</span>
-          </li>
-          <li class="flex items-start">
-            <i class="fa-solid fa-circle-dot text-purple-400 mt-1 mr-2"></i>
-            <span><strong>Suche:</strong> Nutzen Sie die Suchleiste, um bestimmte Knoten zu finden.</span>
-          </li>
-        </ul>
       </div>
     </div>
     
-    <!-- Gedanken-Bereich -->
-    <div class="lg:col-span-1">
-      <div id="thoughts-container" class="thought-container p-6 h-[600px] overflow-y-auto custom-scrollbar">
-        <div class="text-center p-6">
-          <div class="mb-6 pulse-animation">
-            <i class="fa-solid fa-diagram-project text-6xl text-indigo-400/50"></i>
-          </div>
-          <h3 class="text-xl font-semibold mb-2 text-white">Mindmap erkunden</h3>
-          <p class="text-gray-300 mb-4">Wählen Sie einen Knoten in der Mindmap aus, um zugehörige Gedanken anzuzeigen.</p>
-          <div class="p-4 rounded-lg inline-block bg-gradient-to-r from-purple-900/20 to-indigo-900/20 border border-indigo-500/20">
-            <i class="fa-solid fa-arrow-left text-purple-400 mr-2"></i>
-            <span class="text-gray-200">Klicken Sie auf einen Knoten</span>
-          </div>
-        </div>
+    <!-- Steuerungsleiste -->
+    <div class="controls-bar p-4 flex flex-wrap items-center justify-between gap-3">
+      <div class="flex flex-wrap gap-2">
+        <button class="control-btn" id="zoom-in-btn">
+          <i class="fas fa-search-plus mr-1"></i> Vergrößern
+        </button>
+        <button class="control-btn" id="zoom-out-btn">
+          <i class="fas fa-search-minus mr-1"></i> Verkleinern
+        </button>
+        <button class="control-btn" id="center-btn">
+          <i class="fas fa-bullseye mr-1"></i> Zentrieren
+        </button>
       </div>
+      <div class="flex flex-wrap gap-2">
+        <button class="control-btn" id="add-thought-btn">
+          <i class="fas fa-plus-circle mr-1"></i> Gedanke hinzufügen
+        </button>
+        <button class="control-btn" id="connect-btn">
+          <i class="fas fa-link mr-1"></i> Verbinden
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Unterer Bereich: KI-Assistenz, Suche und Lernpfade -->
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+    <!-- KI-Assistenz -->
+    <div class="feature-card">
+      <div class="feature-card-icon">
+        <i class="fas fa-robot"></i>
+      </div>
+      <h3>KI-Assistenz</h3>
+      <p>Lass dir von künstlicher Intelligenz helfen, neue Zusammenhänge zu entdecken, Inhalte zusammenzufassen und Fragen zu beantworten.</p>
+    </div>
+    
+    <!-- Intelligente Suche -->
+    <div class="feature-card">
+      <div class="feature-card-icon">
+        <i class="fas fa-search"></i>
+      </div>
+      <h3>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>
+    
+    <!-- Geführte Pfade -->
+    <div class="feature-card">
+      <div class="feature-card-icon">
+        <i class="fas fa-map-signs"></i>
+      </div>
+      <h3>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.</p>
     </div>
   </div>
 </div>
@@ -330,55 +515,148 @@
 
 {% block extra_js %}
 <!-- D3.js für die Mindmap-Visualisierung -->
-<script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script>
-<!-- Tippy.js für erweiterte Tooltips -->
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<!-- Tippy.js für verbesserte Tooltips -->
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/dist/tippy.umd.min.js"></script>
-<!-- Mindmap-Module -->
-<script src="{{ url_for('static', filename='js/modules/mindmap.js') }}"></script>
-<script src="{{ url_for('static', filename='js/modules/mindmap-page.js') }}"></script>
+<!-- D3-Erweiterungen für spezifische Effekte -->
+<script src="{{ url_for('static', filename='d3-extensions.js') }}"></script>
+<!-- Mindmap JS -->
+<script src="{{ url_for('static', filename='mindmap.js') }}"></script>
+
 <script>
-  // Zusätzliche Seiten-spezifische Skripte
   document.addEventListener('DOMContentLoaded', function() {
-    // Setze Seiten-Identifier für den richtigen Initialisierer
-    document.body.dataset.page = 'mindmap';
+    // Initialisiere die Mindmap-Visualisierung
+    const mindmapContainer = document.getElementById('mindmap-container');
+    const containerWidth = mindmapContainer.clientWidth;
+    const containerHeight = mindmapContainer.clientHeight;
     
-    // Toggle für die Anleitung
-    const guidePanel = document.getElementById('guide-panel');
-    const toggleGuideBtn = document.getElementById('toggle-guide');
-    
-    toggleGuideBtn.addEventListener('click', function() {
-      guidePanel.classList.toggle('hidden');
+    const mindmap = new MindMapVisualization('#mindmap-container', {
+      width: containerWidth,
+      height: containerHeight,
+      nodeRadius: 22,
+      selectedNodeRadius: 28,
+      linkDistance: 160,
+      chargeStrength: -1200,
+      centerForce: 0.1,
+      tooltipEnabled: true,
+      onNodeClick: function(node) {
+        console.log('Node clicked:', node);
+        // Hier können spezifische Aktionen für Knotenklicks definiert werden
+      }
     });
     
-    // Zoom-Buttons mit der Mindmap verbinden
-    const zoomIn = document.getElementById('zoom-in');
-    const zoomOut = document.getElementById('zoom-out');
-    const zoomReset = document.getElementById('zoom-reset');
+    // Event-Listener für Steuerungsbuttons
+    document.getElementById('zoom-in-btn').addEventListener('click', function() {
+      // Zoom-In-Funktionalität
+      const svg = d3.select('#mindmap-container svg');
+      const currentZoom = d3.zoomTransform(svg.node());
+      const newScale = currentZoom.k * 1.3;
+      svg.transition().duration(300).call(
+        d3.zoom().transform,
+        d3.zoomIdentity.translate(currentZoom.x, currentZoom.y).scale(newScale)
+      );
+    });
     
-    if (zoomIn && zoomOut && zoomReset && window.mindmapInstance) {
-      zoomIn.addEventListener('click', function() {
-        const currentZoom = d3.zoomTransform(window.mindmapInstance.svg.node()).k;
-        window.mindmapInstance.svg.transition().duration(300).call(
-          d3.zoom().transform,
-          d3.zoomIdentity.scale(currentZoom * 1.3)
+    document.getElementById('zoom-out-btn').addEventListener('click', function() {
+      // Zoom-Out-Funktionalität
+      const svg = d3.select('#mindmap-container svg');
+      const currentZoom = d3.zoomTransform(svg.node());
+      const newScale = currentZoom.k / 1.3;
+      svg.transition().duration(300).call(
+        d3.zoom().transform,
+        d3.zoomIdentity.translate(currentZoom.x, currentZoom.y).scale(newScale)
+      );
+    });
+    
+    document.getElementById('center-btn').addEventListener('click', function() {
+      // Zentrieren-Funktionalität
+      const svg = d3.select('#mindmap-container svg');
+      svg.transition().duration(500).call(
+        d3.zoom().transform,
+        d3.zoomIdentity.scale(1)
+      );
+    });
+    
+    // Add Thought Button
+    document.getElementById('add-thought-btn').addEventListener('click', function() {
+      // Implementierung für das Hinzufügen eines neuen Gedankens
+      if (mindmap.selectedNode) {
+        const newNodeName = prompt('Gedanke eingeben:');
+        if (newNodeName && newNodeName.trim() !== '') {
+          const newNodeId = 'node_' + Date.now();
+          const newNode = {
+            id: newNodeId,
+            name: newNodeName,
+            description: 'Neuer Gedanke',
+            thought_count: 0
+          };
+          
+          // Node zur Mindmap hinzufügen
+          mindmap.nodes.push(newNode);
+          
+          // Link zum ausgewählten Knoten erstellen
+          mindmap.links.push({
+            source: mindmap.selectedNode.id,
+            target: newNodeId
+          });
+          
+          // Mindmap aktualisieren
+          mindmap.updateVisualization();
+        }
+      } else {
+        alert('Bitte zuerst einen Knoten auswählen, um einen Gedanken hinzuzufügen.');
+      }
+    });
+    
+    // Connect Button
+    document.getElementById('connect-btn').addEventListener('click', function() {
+      // Implementierung für das Verbinden von Knoten
+      if (mindmap.selectedNode && mindmap.mouseoverNode && mindmap.selectedNode !== mindmap.mouseoverNode) {
+        // Prüfen, ob Verbindung bereits existiert
+        const existingLink = mindmap.links.find(link => 
+          (link.source.id === mindmap.selectedNode.id && link.target.id === mindmap.mouseoverNode.id) || 
+          (link.source.id === mindmap.mouseoverNode.id && link.target.id === mindmap.selectedNode.id)
         );
-      });
+        
+        if (!existingLink) {
+          // Link erstellen
+          mindmap.links.push({
+            source: mindmap.selectedNode.id,
+            target: mindmap.mouseoverNode.id
+          });
+          
+          // Mindmap aktualisieren
+          mindmap.updateVisualization();
+        } else {
+          alert('Diese Verbindung existiert bereits.');
+        }
+      } else {
+        alert('Bitte wähle zwei verschiedene Knoten aus, um sie zu verbinden.');
+      }
+    });
+
+    // Responsive Anpassung bei Fenstergrößenänderung
+    window.addEventListener('resize', function() {
+      const newWidth = mindmapContainer.clientWidth;
+      const newHeight = mindmapContainer.clientHeight;
       
-      zoomOut.addEventListener('click', function() {
-        const currentZoom = d3.zoomTransform(window.mindmapInstance.svg.node()).k;
-        window.mindmapInstance.svg.transition().duration(300).call(
-          d3.zoom().transform,
-          d3.zoomIdentity.scale(currentZoom / 1.3)
-        );
-      });
-      
-      zoomReset.addEventListener('click', function() {
-        window.mindmapInstance.svg.transition().duration(300).call(
-          d3.zoom().transform,
-          d3.zoomIdentity.scale(1)
-        );
-      });
-    }
+      if (mindmap.svg) {
+        mindmap.svg
+          .attr('width', newWidth)
+          .attr('height', newHeight);
+        
+        mindmap.width = newWidth;
+        mindmap.height = newHeight;
+        
+        // Force-Simulation aktualisieren
+        if (mindmap.simulation) {
+          mindmap.simulation
+            .force('center', d3.forceCenter(newWidth / 2, newHeight / 2))
+            .restart();
+        }
+      }
+    });
   });
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/website/templates/profile.html b/website/templates/profile.html
index da208e1..e919c91 100644
--- a/website/templates/profile.html
+++ b/website/templates/profile.html
@@ -1,131 +1,953 @@
 {% extends "base.html" %}
 
-{% block title %}Profil | Wissenschaftliche Mindmap{% endblock %}
+{% block title %}Profil{% endblock %}
+
+{% block extra_css %}
+<style>
+  /* Grundstile für das Profil mit verbessertem Glasmorphismus */
+  .profile-container {
+    background: rgba(24, 28, 45, 0.75);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 24px;
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
+    padding: 2rem;
+    margin-bottom: 2rem;
+    transition: all 0.3s ease;
+  }
+  
+  .profile-container:hover {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
+    transform: translateY(-3px);
+  }
+  
+  /* Verbesserte Profile-Header mit dynamischer User-Anzeige */
+  .profile-header {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    gap: 2.5rem;
+    position: relative;
+  }
+  
+  .profile-avatar {
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    background: rgba(32, 36, 55, 0.9);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 3px solid rgba(179, 143, 255, 0.3);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 15px rgba(179, 143, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+  }
+  
+  .profile-avatar:hover {
+    transform: scale(1.05);
+    border: 3px solid rgba(179, 143, 255, 0.5);
+    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.3), 0 0 25px rgba(179, 143, 255, 0.35);
+  }
+  
+  .profile-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: filter 0.3s ease;
+  }
+  
+  .profile-avatar:hover img {
+    filter: brightness(1.1);
+  }
+  
+  .profile-avatar-placeholder {
+    font-size: 5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition: all 0.3s ease;
+  }
+  
+  .profile-avatar:hover .profile-avatar-placeholder {
+    color: rgba(255, 255, 255, 0.9);
+    transform: scale(1.1);
+  }
+  
+  .profile-info {
+    flex: 1;
+    padding-top: 0.5rem;
+  }
+  
+  .profile-name {
+    font-size: 2.75rem;
+    font-weight: 800;
+    margin-bottom: 0.75rem;
+    background: linear-gradient(135deg, #b38fff, #58a9ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: 0 2px 10px rgba(179, 143, 255, 0.3);
+    letter-spacing: 0.3px;
+    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 {
+    font-size: 1.15rem;
+    line-height: 1.7;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 650px;
+    margin-bottom: 1.5rem;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+  
+  .profile-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1rem;
+    align-items: center;
+  }
+  
+  .profile-meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.25s ease;
+  }
+  
+  .profile-meta-item:hover {
+    color: rgba(255, 255, 255, 1);
+    transform: translateY(-2px);
+  }
+  
+  .profile-meta-icon {
+    opacity: 0.8;
+  }
+  
+  /* Verbesserte Statistik-Karten mit interaktiven Effekten */
+  .profile-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+  }
+  
+  .stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.75rem 1.25rem;
+    background: rgba(32, 36, 55, 0.7);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .stat-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at center, rgba(179, 143, 255, 0.15) 0%, transparent 70%);
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    z-index: 0;
+  }
+  
+  .stat-item:hover::before {
+    opacity: 1;
+  }
+  
+  .stat-item:hover {
+    transform: translateY(-5px);
+    background: rgba(32, 36, 55, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25), 0 0 20px rgba(179, 143, 255, 0.2);
+  }
+  
+  .stat-value {
+    font-size: 2.25rem;
+    font-weight: 800;
+    margin-bottom: 0.75rem;
+    background: linear-gradient(135deg, #b38fff, #58a9ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+  }
+  
+  .stat-item:hover .stat-value {
+    transform: scale(1.1);
+    text-shadow: 0 0 15px rgba(179, 143, 255, 0.5);
+  }
+  
+  .stat-label {
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.75);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+  }
+  
+  .stat-item:hover .stat-label {
+    color: rgba(255, 255, 255, 0.95);
+  }
+  
+  /* Stat-Icon für visuelle Verstärkung */
+  .stat-icon {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: rgba(179, 143, 255, 0.7);
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+  }
+  
+  .stat-item:hover .stat-icon {
+    transform: scale(1.2) translateY(-3px);
+    color: rgba(179, 143, 255, 1);
+  }
+  
+  /* Benutzer-Aktionsbereich */
+  .profile-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+  
+  .profile-action-btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 16px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+    background: rgba(32, 36, 55, 0.75);
+    color: rgba(255, 255, 255, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+  
+  .profile-action-btn:hover {
+    transform: translateY(-3px);
+    background: rgba(179, 143, 255, 0.25);
+    border: 1px solid rgba(179, 143, 255, 0.3);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 15px rgba(179, 143, 255, 0.2);
+    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
+  }
+  
+  .profile-action-btn.primary {
+    background: rgba(179, 143, 255, 0.25);
+    color: #ffffff;
+    border: 1px solid rgba(179, 143, 255, 0.3);
+  }
+  
+  .profile-action-btn.primary:hover {
+    background: rgba(179, 143, 255, 0.35);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 0 20px rgba(179, 143, 255, 0.35);
+  }
+  
+  /* Verbesserte Profil-Tabs */
+  .profile-tabs {
+    display: flex;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 1.5rem;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(179, 143, 255, 0.5) rgba(255, 255, 255, 0.05);
+  }
+  
+  .profile-tab {
+    padding: 1rem 1.5rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.7);
+    border-bottom: 3px solid transparent;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  
+  .profile-tab:hover {
+    color: rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.05);
+  }
+  
+  .profile-tab.active {
+    color: #b38fff;
+    border-bottom: 3px solid #b38fff;
+    background: rgba(179, 143, 255, 0.1);
+  }
+  
+  /* Aktivitäten und Beiträge */
+  .activity-feed {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+  
+  .activity-card {
+    background: rgba(32, 36, 55, 0.7);
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+  }
+  
+  .activity-card:hover {
+    transform: translateY(-3px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(179, 143, 255, 0.15);
+  }
+  
+  .activity-header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .activity-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.95);
+  }
+  
+  .activity-date {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  
+  .activity-content {
+    padding: 1.5rem;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 1.05rem;
+    line-height: 1.6;
+  }
+  
+  .activity-footer {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .activity-reactions {
+    display: flex;
+    gap: 0.75rem;
+  }
+  
+  .reaction-button {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 0.05);
+    border: none;
+    transition: all 0.3s ease;
+    cursor: pointer;
+  }
+  
+  .reaction-button:hover {
+    background: rgba(179, 143, 255, 0.15);
+    color: rgba(255, 255, 255, 0.95);
+    transform: translateY(-2px);
+  }
+  
+  .reaction-button.active {
+    background: rgba(179, 143, 255, 0.2);
+    color: #b38fff;
+  }
+  
+  .activity-actions {
+    display: flex;
+    gap: 0.75rem;
+  }
+  
+  .action-button {
+    padding: 0.5rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.9rem;
+    background: rgba(179, 143, 255, 0.1);
+    color: #b38fff;
+    border: 1px solid rgba(179, 143, 255, 0.25);
+    transition: all 0.3s ease;
+    cursor: pointer;
+  }
+  
+  .action-button:hover {
+    background: rgba(179, 143, 255, 0.2);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 0 10px rgba(179, 143, 255, 0.2);
+  }
+  
+  /* Verbesserte Einstellungskarten */
+  .settings-card {
+    background: rgba(32, 36, 55, 0.7);
+    border-radius: 20px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 1.5rem;
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    transition: all 0.3s ease;
+  }
+  
+  .settings-card:hover {
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), 0 0 15px rgba(179, 143, 255, 0.15);
+  }
+  
+  .settings-card-header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.95);
+  }
+  
+  .settings-card-body {
+    padding: 1.5rem;
+  }
+  
+  .settings-group {
+    margin-bottom: 1.5rem;
+  }
+  
+  .settings-label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.85);
+  }
+  
+  .settings-input {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: rgba(24, 28, 45, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    color: rgba(255, 255, 255, 0.95);
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+  }
+  
+  .settings-input:focus {
+    border-color: rgba(179, 143, 255, 0.4);
+    box-shadow: 0 0 0 3px rgba(179, 143, 255, 0.15);
+    outline: none;
+  }
+
+  /* Light Mode Anpassungen */
+  html.light .profile-container,
+  html.light .profile-tabs,
+  html.light .activity-card,
+  html.light .settings-card {
+    background: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+  }
+  
+  html.light .profile-avatar {
+    background: rgba(255, 255, 255, 0.9);
+    border: 3px solid rgba(126, 63, 242, 0.3);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 15px rgba(126, 63, 242, 0.15);
+  }
+  
+  html.light .profile-name {
+    background: linear-gradient(135deg, #7e3ff2, #3282f6);
+    text-shadow: none;
+  }
+  
+  html.light .profile-username,
+  html.light .profile-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 {
+    color: #4a5568;
+  }
+  
+  html.light .stat-item,
+  html.light .settings-input {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+  
+  html.light .stat-value {
+    background: linear-gradient(135deg, #7e3ff2, #3282f6);
+  }
+  
+  html.light .stat-label {
+    color: #4a5568;
+  }
+  
+  html.light .profile-tab {
+    color: #4a5568;
+  }
+  
+  html.light .profile-tab:hover {
+    background: rgba(0, 0, 0, 0.03);
+    color: #1a202c;
+  }
+  
+  html.light .profile-tab.active {
+    color: #7e3ff2;
+    border-bottom: 3px solid #7e3ff2;
+    background: rgba(126, 63, 242, 0.08);
+  }
+  
+  html.light .activity-title,
+  html.light .settings-card-header,
+  html.light .settings-label {
+    color: #1a202c;
+  }
+  
+  html.light .activity-date {
+    color: #718096;
+  }
+  
+  html.light .activity-footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+  }
+  
+  html.light .reaction-button {
+    color: #4a5568;
+    background: rgba(0, 0, 0, 0.03);
+  }
+  
+  html.light .reaction-button:hover {
+    background: rgba(126, 63, 242, 0.1);
+    color: #7e3ff2;
+  }
+  
+  html.light .reaction-button.active {
+    background: rgba(126, 63, 242, 0.15);
+    color: #7e3ff2;
+  }
+  
+  html.light .action-button {
+    background: rgba(126, 63, 242, 0.1);
+    color: #7e3ff2;
+    border: 1px solid rgba(126, 63, 242, 0.2);
+  }
+  
+  html.light .action-button:hover {
+    background: rgba(126, 63, 242, 0.2);
+  }
+</style>
+{% endblock %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <div class="glass p-8 mb-8">
-        <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
-            <div>
-                <h1 class="text-3xl font-bold text-white">Hallo, {{ current_user.username }}</h1>
-                <p class="text-white/70 mt-1">{{ current_user.email }}</p>
-            </div>
-            
-            <div class="mt-4 md:mt-0">
-                <a href="{{ url_for('mindmap') }}" 
-                   class="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold px-6 py-3 rounded-lg transition-all duration-300 inline-block">
-                    Zur Mindmap
-                </a>
-            </div>
+<div class="container mx-auto px-4 py-10">
+  <!-- Profil-Container -->
+  <div class="profile-container">
+    <!-- Profil-Header mit Benutzerinformationen -->
+    <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>
+      
+      <!-- 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>
+      </div>
     </div>
     
-    <div class="dark-glass p-8">
-        <h2 class="text-2xl font-bold text-white mb-6">Deine Gedanken</h2>
-        
-        {% if thoughts %}
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {% for thought in thoughts %}
-                    <div class="glass p-6 hover:shadow-lg transition-all" x-data="{ showActions: false }" @mouseenter="showActions = true" @mouseleave="showActions = false">
-                        <div class="flex justify-between items-start">
-                            <span class="inline-block px-3 py-1 text-xs text-white/70 bg-white/10 rounded-full mb-3">{{ thought.branch }}</span>
-                            <span class="text-xs text-white/50">{{ thought.timestamp.strftime('%d.%m.%Y, %H:%M') }}</span>
-                        </div>
-                        <p class="text-white mb-4 leading-relaxed">{{ thought.content }}</p>
-                        
-                        <div class="flex justify-between items-center" x-show="showActions" x-transition.opacity>
-                            <div class="text-xs text-white/70">
-                                <span>{{ thought.comments|length }} Kommentar(e)</span>
-                            </div>
-                            
-                            <a href="#" onclick="openThoughtDetails('{{ thought.id }}')" class="text-indigo-300 hover:text-white text-sm">Details anzeigen</a>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-        {% else %}
-            <div class="text-center py-12">
-                <p class="text-white/70 mb-4">Du hast noch keine Gedanken geteilt.</p>
-                <a href="{{ url_for('mindmap') }}" class="text-indigo-300 hover:text-white">Zur Mindmap gehen und mitmachen</a>
-            </div>
-        {% endif %}
-    </div>
-</div>
-
-<!-- Thought Detail Modal -->
-<div id="thoughtModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
-    <div class="dark-glass p-8 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
-        <div class="flex justify-between items-center mb-6">
-            <h3 class="text-2xl font-bold text-white" id="modalThoughtTitle">Gedanke Details</h3>
-            <button onclick="closeThoughtModal()" class="text-white/70 hover:text-white">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-            </button>
+    <!-- Statistiken -->
+    <div class="profile-stats">
+      <!-- Gedanken -->
+      <div class="stat-item">
+        <div class="stat-icon">
+          <i class="fas fa-lightbulb"></i>
         </div>
-        
-        <div id="modalContent" class="space-y-6">
-            <div class="glass p-4">
-                <div class="flex justify-between items-start mb-2">
-                    <span class="inline-block px-3 py-1 text-xs text-white/70 bg-white/10 rounded-full" id="modalBranch"></span>
-                    <span class="text-xs text-white/50" id="modalTimestamp"></span>
-                </div>
-                <p class="text-white" id="modalThoughtContent"></p>
+        <div class="stat-value">{{ user.thoughts_count|default('42') }}</div>
+        <div class="stat-label">Gedanken</div>
+      </div>
+      
+      <!-- Verbindungen -->
+      <div class="stat-item">
+        <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-label">Verbindungen</div>
+      </div>
+      
+      <!-- Follower -->
+      <div class="stat-item">
+        <div class="stat-icon">
+          <i class="fas fa-users"></i>
+        </div>
+        <div class="stat-value">{{ user.followers_count|default('567') }}</div>
+        <div class="stat-label">Follower</div>
+      </div>
+      
+      <!-- Beiträge -->
+      <div class="stat-item">
+        <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-label">Beiträge</div>
+      </div>
+      
+      <!-- Bewertung -->
+      <div class="stat-item">
+        <div class="stat-icon">
+          <i class="fas fa-star"></i>
+        </div>
+        <div class="stat-value">{{ user.rating|default('4.8') }}</div>
+        <div class="stat-label">Bewertung</div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Tabs und Inhaltsbereich -->
+  <div class="glass-card">
+    <!-- Profil-Tabs -->
+    <div class="profile-tabs">
+      <div class="profile-tab active" data-tab="activity">Aktivitäten</div>
+      <div class="profile-tab" data-tab="thoughts">Gedanken</div>
+      <div class="profile-tab" data-tab="collections">Sammlungen</div>
+      <div class="profile-tab" data-tab="connections">Verbindungen</div>
+      <div class="profile-tab" data-tab="settings">Einstellungen</div>
+    </div>
+    
+    <!-- Tab-Inhalte -->
+    <div class="p-6">
+      <!-- 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>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Aktivität 2 -->
+          <div class="activity-card">
+            <div class="activity-header">
+              <div class="activity-title">Verbindung erstellt</div>
+              <div class="activity-date">vor 1 Tag</div>
+            </div>
+            <div class="activity-content">
+              <p>Ich habe eine neue Verbindung zwischen "Nachhaltige Entwicklung" und "Digitale Transformation" hergestellt. Es gibt interessante Überschneidungen in diesen Bereichen.</p>
+            </div>
+            <div class="activity-footer">
+              <div class="activity-reactions">
+                <button class="reaction-button active">
+                  <i class="fas fa-thumbs-up"></i> <span>42</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-comment"></i> <span>12</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-share"></i> <span>7</span>
+                </button>
+              </div>
+              <div class="activity-actions">
+                <button class="action-button">
+                  Ansehen
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Aktivität 3 -->
+          <div class="activity-card">
+            <div class="activity-header">
+              <div class="activity-title">Sammlung erstellt</div>
+              <div class="activity-date">vor 3 Tagen</div>
+            </div>
+            <div class="activity-content">
+              <p>Ich habe eine neue Sammlung zum Thema "Zukunftstechnologien" erstellt. Diese Sammlung enthält Gedanken zu KI, Quantencomputing, Biotechnologie und mehr.</p>
+            </div>
+            <div class="activity-footer">
+              <div class="activity-reactions">
+                <button class="reaction-button">
+                  <i class="fas fa-thumbs-up"></i> <span>17</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-comment"></i> <span>4</span>
+                </button>
+                <button class="reaction-button">
+                  <i class="fas fa-share"></i> <span>2</span>
+                </button>
+              </div>
+              <div class="activity-actions">
+                <button class="action-button">
+                  Ansehen
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Weitere Tab-Inhalte (werden per JavaScript angezeigt) -->
+      <div class="tab-content hidden" id="thoughts-tab">
+        <p class="text-center text-gray-400 py-12">
+          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
+          Gedanken werden geladen...
+        </p>
+      </div>
+      
+      <div class="tab-content hidden" id="collections-tab">
+        <p class="text-center text-gray-400 py-12">
+          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
+          Sammlungen werden geladen...
+        </p>
+      </div>
+      
+      <div class="tab-content hidden" id="connections-tab">
+        <p class="text-center text-gray-400 py-12">
+          <i class="fas fa-spinner fa-spin text-3xl mb-4 block"></i>
+          Verbindungen werden geladen...
+        </p>
+      </div>
+      
+      <div class="tab-content hidden" id="settings-tab">
+        <!-- Einstellungs-Tab-Inhalt -->
+        <div class="settings-card">
+          <div class="settings-card-header">Profilinformationen</div>
+          <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') }}" />
             </div>
             
-            <div>
-                <h4 class="text-lg font-medium text-white mb-3">Kommentare</h4>
-                <div id="commentsList" class="space-y-3"></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>
             </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') }}" />
+            </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') }}" />
+            </div>
+            
+            <button class="profile-action-btn primary mt-4">
+              <i class="fas fa-save mr-1"></i> Speichern
+            </button>
+          </div>
         </div>
+        
+        <div class="settings-card">
+          <div class="settings-card-header">Datenschutz und Sicherheit</div>
+          <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') }}" />
+            </div>
+            
+            <div class="settings-group">
+              <label class="settings-label" for="password">Neues Passwort</label>
+              <input type="password" id="password" class="settings-input" placeholder="Neues Passwort eingeben" />
+            </div>
+            
+            <div class="settings-group">
+              <label class="settings-label" for="password_confirm">Passwort bestätigen</label>
+              <input type="password" id="password_confirm" class="settings-input" placeholder="Passwort wiederholen" />
+            </div>
+            
+            <button class="profile-action-btn primary mt-4">
+              <i class="fas fa-lock mr-1"></i> Passwort aktualisieren
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </div>
 {% endblock %}
 
-{% block scripts %}
+{% block extra_js %}
 <script>
-    function openThoughtDetails(thoughtId) {
-        fetch(`/api/thoughts/${thoughtId}`)
-            .then(response => response.json())
-            .then(thought => {
-                document.getElementById('modalThoughtTitle').textContent = `Gedanke von ${thought.author}`;
-                document.getElementById('modalBranch').textContent = thought.branch;
-                document.getElementById('modalTimestamp').textContent = thought.timestamp;
-                document.getElementById('modalThoughtContent').textContent = thought.content;
-                
-                // Load comments
-                return fetch(`/api/comments/${thoughtId}`);
-            })
-            .then(response => response.json())
-            .then(comments => {
-                const commentsList = document.getElementById('commentsList');
-                commentsList.innerHTML = '';
-                
-                if (comments.length === 0) {
-                    commentsList.innerHTML = '<p class="text-white/50">Keine Kommentare vorhanden</p>';
-                    return;
-                }
-                
-                comments.forEach(comment => {
-                    const commentEl = document.createElement('div');
-                    commentEl.className = 'glass p-3';
-                    commentEl.innerHTML = `
-                        <div class="flex justify-between items-start mb-1">
-                            <span class="text-sm font-medium text-white">${comment.author}</span>
-                            <span class="text-xs text-white/50">${comment.timestamp}</span>
-                        </div>
-                        <p class="text-white/90 text-sm">${comment.content}</p>
-                    `;
-                    commentsList.appendChild(commentEl);
-                });
-            })
-            .catch(error => console.error('Error loading thought details:', error));
-        
-        document.getElementById('thoughtModal').classList.remove('hidden');
-    }
+  document.addEventListener('DOMContentLoaded', function() {
+    // Profil-Tab-Funktionalität
+    const tabs = document.querySelectorAll('.profile-tab');
+    const tabContents = document.querySelectorAll('.tab-content');
     
-    function closeThoughtModal() {
-        document.getElementById('thoughtModal').classList.add('hidden');
-    }
+    tabs.forEach(tab => {
+      tab.addEventListener('click', function() {
+        // Alle Tabs deaktivieren
+        tabs.forEach(t => t.classList.remove('active'));
+        
+        // Aktuellen Tab aktivieren
+        this.classList.add('active');
+        
+        // Alle Tab-Inhalte ausblenden
+        tabContents.forEach(content => content.classList.add('hidden'));
+        
+        // Entsprechenden Tab-Inhalt anzeigen
+        const tabId = this.getAttribute('data-tab');
+        document.getElementById(`${tabId}-tab`).classList.remove('hidden');
+      });
+    });
+    
+    // Like-Button-Funktionalität
+    const reactionButtons = document.querySelectorAll('.reaction-button');
+    
+    reactionButtons.forEach(button => {
+      button.addEventListener('click', function() {
+        // Toggle active-Klasse
+        this.classList.toggle('active');
+        
+        // Aktueller Zählerstand
+        const countElement = this.querySelector('span');
+        let count = parseInt(countElement.textContent);
+        
+        // Zähler aktualisieren
+        if (this.classList.contains('active')) {
+          count += 1;
+        } else {
+          count -= 1;
+        }
+        
+        countElement.textContent = count;
+      });
+    });
+  });
 </script>
 {% endblock %} 
\ No newline at end of file