🎨 style: update UI and database schema for improved user experience

static/css/neural-network-background.css

@@ -103,4 +103,115 @@ body.dark footer {
 body:not(.dark) footer {
   background-color: rgba(249, 250, 251, 0.92) !important;
   border-top: 1px solid rgba(220, 220, 220, 0.8) !important;
+}
+
+/* Neural Network Background für Dark & Light Mode */
+.neural-network-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+    overflow: hidden;
+    opacity: 0.8;
+    transition: opacity 0.5s ease;
+}
+
+.neural-network-bg {
+    width: 100%;
+    height: 100%;
+}
+
+/* Dark Mode Netzwerk-Hintergrund */
+.dark .neural-network-container {
+    opacity: 0.5;
+}
+
+.dark .neural-network-bg .node {
+    fill: rgba(139, 92, 246, 0.4);
+    transition: fill 0.3s ease;
+}
+
+.dark .neural-network-bg .link {
+    stroke: rgba(139, 92, 246, 0.15);
+    transition: stroke 0.3s ease;
+}
+
+/* Light Mode Netzwerk-Hintergrund */
+body:not(.dark) .neural-network-container {
+    opacity: 0.25;
+}
+
+body:not(.dark) .neural-network-bg .node {
+    fill: rgba(124, 58, 237, 0.35);
+    filter: drop-shadow(0 0 3px rgba(124, 58, 237, 0.2));
+    transition: all 0.3s ease;
+}
+
+body:not(.dark) .neural-network-bg .node:hover {
+    fill: rgba(124, 58, 237, 0.5);
+    filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.3));
+}
+
+body:not(.dark) .neural-network-bg .link {
+    stroke: rgba(124, 58, 237, 0.15);
+    stroke-width: 1.25;
+    filter: drop-shadow(0 0 1px rgba(124, 58, 237, 0.1));
+    transition: all 0.3s ease;
+}
+
+body:not(.dark) .neural-network-bg .link:hover {
+    stroke: rgba(124, 58, 237, 0.3);
+    stroke-width: 1.5;
+}
+
+/* Animationen für das Netzwerk */
+@keyframes pulse {
+    0% { opacity: 0.7; }
+    50% { opacity: 1; }
+    100% { opacity: 0.7; }
+}
+
+@keyframes float {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0); }
+}
+
+.neural-network-bg .node {
+    animation: pulse 3s infinite ease-in-out;
+}
+
+.neural-network-bg .link {
+    animation: pulse 4s infinite ease-in-out;
+}
+
+/* Speziell für den Light Mode leicht pulsierende Knoten */
+body:not(.dark) .neural-network-bg .node {
+    animation: pulse 4s infinite ease-in-out, float 6s infinite ease-in-out;
+    animation-delay: calc(var(--node-index, 0) * 0.2s);
+}
+
+/* Responsives Verhalten */
+@media (max-width: 768px) {
+    .neural-network-container {
+        opacity: 0.2; /* Auf mobilen Geräten etwas dezenter */
+    }
+    
+    body:not(.dark) .neural-network-bg .link {
+        stroke-width: 1;
+    }
+}
+
+/* Hover-Effekte für Desktop-Geräte */
+@media (min-width: 1024px) {
+    body:not(.dark) .neural-network-container:hover {
+        opacity: 0.35;
+    }
+    
+    .dark .neural-network-container:hover {
+        opacity: 0.6;
+    }
 } 

static/neural-network-background.js

@@ -51,11 +51,11 @@ class NeuralNetworkBackground {
         flowColor: '#b47fea'
       },
       light: {
-        background: '#f8f9fc',
+        background: '#f9fafb',
-        nodeColor: '#8c6db5',
+        nodeColor: '#8b5cf6',
-        nodePulse: '#b094dd',
+        nodePulse: '#7c3aed',
-        connectionColor: '#9882bd',
+        connectionColor: '#c4b5fd',
-        flowColor: '#7d5bb5'
+        flowColor: '#6d28d9'
       }
     };
 
@@ -252,122 +252,178 @@ class NeuralNetworkBackground {
       if (progress >= 1) {
         // Flow beenden
         connection.active = false;
+        connection.flowProgress = 0;
         this.activeConnections.delete(connectionId);
       } else {
         connection.flowProgress = progress;
       }
     }
     
-    // Neue Flows starten, wenn unter dem Limit
+    // Neue aktive Verbindungen starten
-    if (this.activeConnections.size < this.config.flowDensity) {
+    if (this.activeConnections.size < this.config.flowDensity && Math.random() < 0.05) {
-      // Wähle eine zufällige Verbindung
+      // Zufälligen Knoten auswählen
-      const availableConnections = this.connections.filter(c => !c.active);
+      const nodeIndex = Math.floor(Math.random() * this.nodes.length);
+      const node = this.nodes[nodeIndex];
       
-      if (availableConnections.length > 0) {
+      // Anzahl der aktiven Verbindungen für diesen Knoten zählen
-        const randomIndex = Math.floor(Math.random() * availableConnections.length);
+      const activeConnectionsCount = Array.from(this.activeConnections)
-        const connection = availableConnections[randomIndex];
+        .filter(id => {
+          const [from, to] = id.split('-').map(Number);
+          return from === nodeIndex || to === nodeIndex;
+        }).length;
+      
+      // Nur neue Verbindung aktivieren, wenn Knoten noch nicht zu viele aktive hat
+      if (activeConnectionsCount < this.config.maxFlowsPerNode) {
+        // Verfügbare Verbindungen für diesen Knoten finden
+        const availableConnections = node.connections.filter(conn => !conn.active);
         
-        // Aktiviere die Verbindung
+        if (availableConnections.length > 0) {
-        connection.active = true;
+          // Zufällige Verbindung auswählen
-        connection.flowProgress = 0;
+          const connection = availableConnections[Math.floor(Math.random() * availableConnections.length)];
-        connection.flowStart = now;
+          
-        connection.flowDuration = this.config.flowDuration[0] + 
+          // Verbindung aktivieren
-                                 Math.random() * (this.config.flowDuration[1] - this.config.flowDuration[0]);
+          connection.active = true;
+          connection.flowProgress = 0;
+          connection.flowStart = now;
+          connection.flowDuration = this.config.flowDuration[0] + 
+                                  Math.random() * (this.config.flowDuration[1] - this.config.flowDuration[0]);
+          
+          this.activeConnections.add(connection.id);
+        }
+      }
+    }
+    
+    // Verbindungsdistanzen neu berechnen
+    for (let i = 0; i < this.connections.length; i++) {
+      const connection = this.connections[i];
+      const nodeA = this.nodes[connection.from];
+      const nodeB = this.nodes[connection.to];
+      
+      const dx = nodeA.x - nodeB.x;
+      const dy = nodeA.y - nodeB.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      
+      connection.distance = distance;
+      
+      // Bei zu großer Distanz Verbindung deaktivieren
+      if (distance > this.config.connectionDistance) {
+        connection.opacity = 0;
         
-        this.activeConnections.add(connection.id);
+        if (connection.active) {
+          connection.active = false;
+          connection.flowProgress = 0;
+          this.activeConnections.delete(connection.id);
+        }
+      } else {
+        // Verbesserte Berechnung der Opazität für einen natürlicheren Look
+        const opacityFactor = document.documentElement.classList.contains('dark') ? 1.0 : 0.85;
+        connection.opacity = Math.max(0.08, (1 - (distance / this.config.connectionDistance)) * this.config.connectionOpacity * opacityFactor);
       }
     }
   }
   
   render(now) {
-    // Aktualisiere Farben basierend auf aktuellem Theme
+    // Canvas löschen
+    this.ctx.clearRect(0, 0, this.canvas.width / (window.devicePixelRatio || 1), this.canvas.height / (window.devicePixelRatio || 1));
+    
+    // Aktualisiere Farbpalette basierend auf aktuellem Theme
     this.currentColors = document.documentElement.classList.contains('dark')
       ? this.colors.dark
       : this.colors.light;
-    const colors = this.currentColors;
-    const width = this.canvas.width / (window.devicePixelRatio || 1);
-    const height = this.canvas.height / (window.devicePixelRatio || 1);
-    
-    // Hintergrund löschen
-    this.ctx.fillStyle = colors.background;
-    this.ctx.fillRect(0, 0, width, height);
-    
-    // Verbindungen zeichnen (statisch)
-    this.ctx.strokeStyle = colors.connectionColor;
-    this.ctx.lineWidth = 1.2;
-    
-    for (const connection of this.connections) {
-      const fromNode = this.nodes[connection.from];
-      const toNode = this.nodes[connection.to];
       
-      this.ctx.globalAlpha = connection.opacity * 0.5;
+    // Light Mode mit zusätzlichem Blur-Effekt für weicheres Erscheinungsbild
-      
+    if (!document.documentElement.classList.contains('dark')) {
-      this.ctx.beginPath();
+      this.ctx.filter = 'blur(0.5px)';
-      this.ctx.moveTo(fromNode.x, fromNode.y);
+    } else {
-      this.ctx.lineTo(toNode.x, toNode.y);
+      this.ctx.filter = 'none';
-      this.ctx.stroke();
     }
     
-    // Aktive Verbindungen zeichnen (Flows)
+    // Verbindungen zeichnen
-    this.ctx.strokeStyle = colors.flowColor;
+    for (let i = 0; i < this.connections.length; i++) {
-    this.ctx.lineWidth = 2.5;
+      const connection = this.connections[i];
-    
-    for (const connectionId of this.activeConnections) {
-      const connection = this.connections.find(c => c.id === connectionId);
-      if (!connection) continue;
       
-      const fromNode = this.nodes[connection.from];
+      if (connection.opacity <= 0) continue;
-      const toNode = this.nodes[connection.to];
       
-      // Glühen-Effekt
+      const nodeA = this.nodes[connection.from];
-      this.ctx.globalAlpha = Math.sin(connection.flowProgress * Math.PI) * 0.8;
+      const nodeB = this.nodes[connection.to];
       
-      // Linie zeichnen
+      this.ctx.strokeStyle = this.currentColors.connectionColor;
+      this.ctx.globalAlpha = connection.opacity;
       this.ctx.beginPath();
-      this.ctx.moveTo(fromNode.x, fromNode.y);
+      this.ctx.moveTo(nodeA.x, nodeA.y);
-      this.ctx.lineTo(toNode.x, toNode.y);
+      this.ctx.lineTo(nodeB.x, nodeB.y);
       this.ctx.stroke();
       
-      // Fließendes Partikel
+      // Aktive Verbindungen mit Fluss darstellen
-      const progress = connection.flowProgress;
+      if (connection.active) {
-      const x = fromNode.x + (toNode.x - fromNode.x) * progress;
+        const fromX = nodeA.x;
-      const y = fromNode.y + (toNode.y - fromNode.y) * progress;
+        const fromY = nodeA.y;
-      
+        const toX = nodeB.x;
-      this.ctx.globalAlpha = 0.9;
+        const toY = nodeB.y;
-      this.ctx.fillStyle = colors.flowColor;
+        
-      
+        // Position des Flusspunkts
-      this.ctx.beginPath();
+        const x = fromX + (toX - fromX) * connection.flowProgress;
-      this.ctx.arc(x, y, 2, 0, Math.PI * 2);
+        const y = fromY + (toY - fromY) * connection.flowProgress;
-      this.ctx.fill();
+        
-    }
+        // Fluss-Effekt zeichnen
-    
+        const pulseSize = document.documentElement.classList.contains('dark') ? 3 : 4;
-    // Knoten zeichnen
+        const pulseOpacity = document.documentElement.classList.contains('dark') ? 0.8 : 0.85;
-    for (const node of this.nodes) {
+        
-      // Pulsierende Knoten
+        // Pulse-Effekt
-      const timeSinceLastPulse = now - node.lastPulse;
+        this.ctx.fillStyle = this.currentColors.flowColor;
-      const isPulsing = timeSinceLastPulse < 800;
+        this.ctx.globalAlpha = pulseOpacity;
-      const pulseProgress = isPulsing ? timeSinceLastPulse / 800 : 0;
-      
-      // Knoten selbst
-      this.ctx.globalAlpha = 1;
-      this.ctx.fillStyle = isPulsing 
-        ? colors.nodePulse 
-        : colors.nodeColor;
-      
-      this.ctx.beginPath();
-      this.ctx.arc(node.x, node.y, node.size + (isPulsing ? 1 * Math.sin(pulseProgress * Math.PI) : 0), 0, Math.PI * 2);
-      this.ctx.fill();
-      
-      // Wenn pulsierend, füge einen Glow-Effekt hinzu
-      if (isPulsing) {
-        this.ctx.globalAlpha = 0.5 * (1 - pulseProgress);
         this.ctx.beginPath();
-        this.ctx.arc(node.x, node.y, node.size + 5 * pulseProgress, 0, Math.PI * 2);
+        this.ctx.arc(x, y, pulseSize, 0, Math.PI * 2);
+        this.ctx.fill();
+        
+        // Glow-Effekt
+        const gradient = this.ctx.createRadialGradient(x, y, 0, x, y, pulseSize * 2);
+        gradient.addColorStop(0, this.hexToRgba(this.currentColors.flowColor, 0.4));
+        gradient.addColorStop(1, this.hexToRgba(this.currentColors.flowColor, 0));
+        
+        this.ctx.fillStyle = gradient;
+        this.ctx.globalAlpha = 0.8;
+        this.ctx.beginPath();
+        this.ctx.arc(x, y, pulseSize * 2, 0, Math.PI * 2);
         this.ctx.fill();
       }
     }
     
+    // Knoten zeichnen
+    for (let i = 0; i < this.nodes.length; i++) {
+      const node = this.nodes[i];
+      const isPulsing = now - node.lastPulse < 300;
+      
+      // Erhöhte Helligkeit für pulsierende Knoten
+      const nodeColor = isPulsing ? this.currentColors.nodePulse : this.currentColors.nodeColor;
+      const glowSize = isPulsing ? node.size * 2.5 : node.size * 1.5;
+      
+      // Glow-Effekt
+      const gradient = this.ctx.createRadialGradient(
+        node.x, node.y, 0, 
+        node.x, node.y, glowSize
+      );
+      
+      gradient.addColorStop(0, this.hexToRgba(nodeColor, isPulsing ? 0.6 : 0.3));
+      gradient.addColorStop(1, this.hexToRgba(nodeColor, 0));
+      
+      this.ctx.fillStyle = gradient;
+      this.ctx.globalAlpha = document.documentElement.classList.contains('dark') ? 0.7 : 0.5;
+      this.ctx.beginPath();
+      this.ctx.arc(node.x, node.y, glowSize, 0, Math.PI * 2);
+      this.ctx.fill();
+      
+      // Knoten selbst zeichnen
+      this.ctx.fillStyle = nodeColor;
+      this.ctx.globalAlpha = 0.8;
+      this.ctx.beginPath();
+      this.ctx.arc(node.x, node.y, node.size, 0, Math.PI * 2);
+      this.ctx.fill();
+    }
+    
+    // Zurücksetzen der Globalwerte
     this.ctx.globalAlpha = 1;
+    this.ctx.filter = 'none';
   }
   
   destroy() {
@@ -391,6 +447,9 @@ class NeuralNetworkBackground {
   }
   
   hexToRgb(hex) {
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
+    
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result ? {
       r: parseInt(result[1], 16),
@@ -398,6 +457,11 @@ class NeuralNetworkBackground {
       b: parseInt(result[3], 16)
     } : null;
   }
+  
+  hexToRgba(hex, alpha) {
+    const rgb = this.hexToRgb(hex);
+    return rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})` : `rgba(0, 0, 0, ${alpha})`;
+  }
 }
 
 // Initialisiert den Hintergrund, sobald die Seite geladen ist

templates/base.html

@@ -397,12 +397,52 @@
                 <!-- Rechte Seite -->
                 <div class="flex items-center space-x-4">
                     <!-- Dark/Light Mode Schalter -->
-                    <button
+                    <button 
-                        @click="toggleDarkMode()"
+                        @click="darkMode = !darkMode; document.documentElement.classList.toggle('dark', darkMode); localStorage.setItem('darkMode', darkMode ? 'dark' : 'light');"
-                        class="theme-toggle"
+                        class="p-2 ml-3 rounded-full flex items-center justify-center transition-all duration-300 group focus:outline-none focus:ring-2 focus:ring-indigo-400/50"
-                        :class="{ 'dark': darkMode }"
+                        :class="darkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white/90 hover:bg-white shadow-md'"
-                        aria-label="Dark Mode umschalten"
+                        aria-label="Themen-Modus wechseln">
-                    >
+                        
+                        <!-- Verbesserte Icon-Container für Light/Dark Mode Toggle -->
+                        <div class="relative w-10 h-6 flex items-center justify-center transition-all duration-500">
+                            <!-- Sonne (Light Mode) -->
+                            <svg 
+                              xmlns="http://www.w3.org/2000/svg" 
+                              class="h-5 w-5 absolute transform transition-all duration-500" 
+                              :class="darkMode ? 'opacity-0 rotate-90 scale-0' : 'opacity-100 rotate-0 scale-100'"
+                              fill="none" 
+                              viewBox="0 0 24 24" 
+                              stroke="currentColor"
+                              stroke-width="2"
+                              :style="darkMode ? '' : 'color: #6d28d9;'">
+                                <path 
+                                    stroke-linecap="round" 
+                                    stroke-linejoin="round" 
+                                    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>
+                            
+                            <!-- Mond (Dark Mode) -->
+                            <svg 
+                              xmlns="http://www.w3.org/2000/svg" 
+                              class="h-5 w-5 absolute transform transition-all duration-500" 
+                              :class="darkMode ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-0'"
+                              fill="none" 
+                              viewBox="0 0 24 24" 
+                              stroke="currentColor"
+                              stroke-width="2"
+                              style="color: #c4b5fd;">
+                                <path 
+                                    stroke-linecap="round" 
+                                    stroke-linejoin="round" 
+                                    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>
+                            
+                            <!-- Hintergrund-Glow-Effekt -->
+                            <div 
+                                class="absolute inset-0 rounded-full transition-all duration-300"
+                                :class="darkMode ? 'shadow-none' : 'shadow-[0_0_10px_rgba(124,58,237,0.3)]'">
+                            </div>
+                        </div>
                     </button>
                     <!-- Profil-Link oder Login -->
                     {% if current_user.is_authenticated %}

templates/profile.html

@@ -4,7 +4,521 @@
 
 {% 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;
+  }
+  
+  .avatar-container {
+    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;
+  }
+  
+  .avatar-container:hover {
+    transform: scale(1.05);
+    border: 3px solid rgba(179, 143, 255, 0.5);
+    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.3), 0 0 25px rgba(179, 143, 255, 0.35);
+  }
+  
+  .avatar-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: filter 0.3s ease;
+  }
+  
+  .avatar-container:hover img {
+    filter: brightness(1.1);
+  }
+  
+  .avatar-edit {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+  
+  .avatar-edit:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  
+  .user-info {
+    flex: 1;
+    padding-top: 0.5rem;
+  }
+  
+  .user-info h1 {
+    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;
+  }
+  
+  .user-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);
+  }
+  
+  .user-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1rem;
+    align-items: center;
+  }
+  
+  .user-meta span {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.25s ease;
+  }
+  
+  .user-meta span:hover {
+    color: rgba(255, 255, 255, 1);
+    transform: translateY(-2px);
+  }
+  
+  .user-meta i {
+    opacity: 0.8;
+  }
+  
+  /* 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 */
+  body:not(.dark) .profile-container,
+  body:not(.dark) .profile-tabs,
+  body:not(.dark) .activity-card,
+  body:not(.dark) .settings-card {
+    background: rgba(255, 255, 255, 0.92);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+  }
+  
+  body:not(.dark) .glass-card {
+    background: rgba(255, 255, 255, 0.92);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    border-radius: 16px;
+  }
+  
+  body:not(.dark) .avatar-container {
+    background: rgba(255, 255, 255, 0.9);
+    border: 3px solid rgba(126, 63, 242, 0.3);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 15px rgba(126, 63, 242, 0.15);
+  }
+  
+  body:not(.dark) .user-info h1 {
+    background: linear-gradient(135deg, #7e3ff2, #3282f6);
+    text-shadow: none;
+  }
+  
+  body:not(.dark) .user-bio,
+  body:not(.dark) .activity-content {
+    color: #1a202c;
+    text-shadow: none;
+  }
+  
+  body:not(.dark) .user-meta span {
+    color: #4a5568;
+  }
+  
+  body:not(.dark) .stat-item,
+  body:not(.dark) .settings-input {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+  
+  body:not(.dark) .stat-value {
+    background: linear-gradient(135deg, #7e3ff2, #3282f6);
+  }
+  
+  body:not(.dark) .stat-label {
+    color: #4a5568;
+  }
+  
+  body:not(.dark) .profile-tab {
+    color: #4a5568;
+  }
+  
+  body:not(.dark) .profile-tab:hover {
+    background: rgba(0, 0, 0, 0.03);
+    color: #1a202c;
+  }
+  
+  body:not(.dark) .profile-tab.active {
+    color: #7e3ff2;
+    border-bottom: 3px solid #7e3ff2;
+    background: rgba(126, 63, 242, 0.08);
+  }
+  
+  body:not(.dark) .activity-title,
+  body:not(.dark) .settings-card-header,
+  body:not(.dark) .settings-label {
+    color: #1a202c;
+  }
+  
+  body:not(.dark) .activity-date {
+    color: #718096;
+  }
+  
+  body:not(.dark) .activity-footer {
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+  }
+  
+  body:not(.dark) .reaction-button {
+    color: #4a5568;
+    background: rgba(0, 0, 0, 0.03);
+  }
+  
+  body:not(.dark) .reaction-button:hover {
+    background: rgba(126, 63, 242, 0.1);
+    color: #7e3ff2;
+  }
+  
+  body:not(.dark) .reaction-button.active {
+    background: rgba(126, 63, 242, 0.15);
+    color: #7e3ff2;
+  }
+  
+  body:not(.dark) .action-button {
+    background: rgba(126, 63, 242, 0.1);
+    color: #7e3ff2;
+    border: 1px solid rgba(126, 63, 242, 0.2);
+  }
+  
+  body:not(.dark) .action-button:hover {
+    background: rgba(126, 63, 242, 0.2);
+  }
+  
+  /* Verbesserte Styles für Card-Items im Light Mode */
+  body:not(.dark) .thought-item,
+  body:not(.dark) .mindmap-item,
+  body:not(.dark) .collection-item {
+    background: white !important;
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  }
+  
+  body:not(.dark) .thought-item:hover,
+  body:not(.dark) .mindmap-item:hover,
+  body:not(.dark) .collection-item:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+    border: 1px solid rgba(126, 63, 242, 0.2) !important;
+  }
+  
+  body:not(.dark) .edit-profile-btn {
+    background: #7e3ff2;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    border: none;
+  }
+  
+  body:not(.dark) .edit-profile-btn:hover {
+    background: #6d28d9;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
+  }
+</style>
 {% endblock %}
 
 {% block content %}