diff --git a/website/static/css/style.css b/website/static/css/style.css
index 1731bf3..7bf65df 100644
--- a/website/static/css/style.css
+++ b/website/static/css/style.css
@@ -45,6 +45,12 @@
     --success-bright: #50ffe4;
     --warning-bright: #ffe050;
     --danger-bright: #ff5050;
+    
+    /* Neue verbesserte Glasmorphismus Variablen */
+    --glass-navbar-dark: rgba(14, 18, 32, 0.85);
+    --glass-navbar-light: rgba(255, 255, 255, 0.85);
+    --glass-card-dark: rgba(24, 28, 45, 0.8);
+    --glass-card-light: rgba(255, 255, 255, 0.8);
 }
 
 /* Basiselemente */
@@ -109,33 +115,302 @@ a:hover {
     border: 1px solid rgba(154, 125, 255, 0.3);
 }
 
-.neumorph {
-    background: var(--card-bg);
-    border-radius: 16px;
-    box-shadow: var(--shadow-dark), var(--shadow-light);
-    margin-bottom: var(--standard-spacing);
-    padding: var(--standard-spacing);
+/* Verbesserte Navbar Styles */
+.glass-navbar-dark {
+    background: var(--glass-navbar-dark);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+
+.glass-navbar-light {
+    background: var(--glass-navbar-light);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border-color: rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+}
+
+.nav-link {
+    padding: 0.6rem 1rem;
+    border-radius: 0.75rem;
+    font-weight: 500;
+    transition: all 0.25s ease;
+    position: relative;
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.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 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.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);
+}
+
+.nav-link-light {
+    color: rgba(26, 32, 44, 0.85);
+}
+
+.nav-link-light:hover {
+    background: rgba(179, 143, 255, 0.15);
+    color: rgba(26, 32, 44, 1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.nav-link-light-active {
+    background: rgba(179, 143, 255, 0.2);
+    color: rgba(26, 32, 44, 1);
+    font-weight: 600;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.nav-link-light-active::after {
+    background: linear-gradient(90deg, transparent, rgba(26, 32, 44, 0.5), transparent);
+}
+
+/* Neu gestylte Cards mit verbesserten Effekten */
+.card {
+    background: var(--glass-card-dark);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border-radius: 1.25rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1.75rem;
+    transition: all 0.3s ease;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60%;
+    background: linear-gradient(to bottom, 
+                rgba(179, 143, 255, 0.05) 0%, 
+                rgba(179, 143, 255, 0) 100%);
+    z-index: -1;
+    transition: all 0.3s ease;
+    opacity: 0;
+    border-radius: 1.25rem 1.25rem 0 0;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.card:hover::before {
+    opacity: 1;
+}
+
+.card .icon {
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+    display: inline-block;
+    background: linear-gradient(135deg, #b38fff, #58a9ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    filter: drop-shadow(0 0 8px rgba(179, 143, 255, 0.4));
     transition: all 0.3s ease;
 }
 
-.neumorph:hover {
-    box-shadow: var(--shadow-light), var(--shadow-dark), 0 0 20px rgba(154, 125, 255, 0.2);
+.card:hover .icon {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 12px rgba(179, 143, 255, 0.6));
 }
 
-.neumorph-inset {
-    background: var(--card-bg);
-    border-radius: 16px;
-    box-shadow: var(--inner-shadow);
-    padding: var(--standard-spacing);
+.card h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: #ffffff;
+    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+}
+
+.card:hover h3 {
+    transform: translateY(-2px);
+    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
+}
+
+.card p {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 0;
+}
+
+/* Light Mode Card Styles */
+.light .card {
+    background: var(--glass-card-light);
+    border: 1px solid rgba(0, 0, 0, 0.07);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.light .card::before {
+    background: linear-gradient(to bottom, 
+                rgba(179, 143, 255, 0.03) 0%, 
+                rgba(179, 143, 255, 0) 100%);
+}
+
+.light .card:hover {
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+.light .card h3 {
+    color: #1a202c;
+    text-shadow: none;
+}
+
+.light .card p {
+    color: rgba(26, 32, 44, 0.9);
+}
+
+/* Verbesserte Feature-Card Variante */
+.feature-card {
+    padding: 2rem;
+    border-radius: 1.5rem;
+    background: var(--glass-card-dark);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    width: 150%;
+    height: 150%;
+    background: radial-gradient(
+        circle at top right,
+        rgba(179, 143, 255, 0.15),
+        transparent 70%
+    );
+    top: -25%;
+    right: -25%;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-7px) scale(1.02);
+    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+.feature-card:hover::before {
+    opacity: 1;
+}
+
+.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));
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover .icon {
+    transform: scale(1.1) translateY(-3px);
+    filter: drop-shadow(0 0 15px rgba(179, 143, 255, 0.8));
+}
+
+.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;
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover h3 {
+    transform: translateY(-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 */
+.light .feature-card {
+    background: var(--glass-card-light);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    color: #1a202c;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+}
+
+.light .feature-card:hover {
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
+}
+
+.light .feature-card h3 {
+    color: #1a202c;
+    text-shadow: none;
+}
+
+.light .feature-card p {
+    color: rgba(26, 32, 44, 0.9);
+    text-shadow: none;
 }
 
 /* Stilvolle Farbverläufe für Akzente */
 .gradient-text {
-    background: linear-gradient(135deg, var(--primary-bright), var(--accent-bright));
+    background: linear-gradient(135deg, rgba(200, 170, 255, 1), rgba(100, 180, 255, 1));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
-    text-shadow: 0 0 10px rgba(154, 125, 255, 0.3);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    text-shadow: 0 2px 10px rgba(179, 143, 255, 0.3);
+    filter: drop-shadow(0 2px 6px rgba(179, 143, 255, 0.3));
 }
 
 .gradient-bg {
@@ -337,157 +612,6 @@ a:hover {
     border-color: var(--accent-color);
 }
 
-/* Verbesserte Card-Komponenten mit Glassmorphismus */
-.card {
-    background: rgba(30, 30, 46, 0.7);
-    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.3);
-    margin-bottom: 1.5rem;
-    position: relative;
-    overflow: hidden;
-    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), 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, 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: 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--light-color);
-    display: flex;
-    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);
diff --git a/website/static/network-background.js b/website/static/network-background.js
index 2a8645b..9f615a0 100644
--- a/website/static/network-background.js
+++ b/website/static/network-background.js
@@ -1,14 +1,16 @@
 // Animated Network Background
 let canvas, ctx, networkImage;
 let isImageLoaded = false;
-let animationSpeed = 0.0005; // Speed of rotation
-let scaleSpeed = 0.0002;     // Speed of scaling
-let opacitySpeed = 0.0003;   // Speed of opacity change
+let animationSpeed = 0.0003; // Reduzierte Geschwindigkeit für sanftere Rotation
+let scaleSpeed = 0.0001;     // Reduzierte Geschwindigkeit für sanftere Skalierung
+let opacitySpeed = 0.0002;   // Reduzierte Geschwindigkeit für sanftere Opazitätsänderung
 let rotation = 0;
 let scale = 1;
-let opacity = 0.6;
+let opacity = 0.7; // Höhere Basisopazität für bessere Sichtbarkeit
 let scaleDirection = 1;
 let opacityDirection = 1;
+let animationFrameId = null;
+let isDarkMode = document.documentElement.classList.contains('dark');
 
 // Initialize the canvas and load the image
 function initNetworkBackground() {
@@ -21,69 +23,108 @@ function initNetworkBackground() {
         canvas.style.left = '0';
         canvas.style.width = '100%';
         canvas.style.height = '100%';
-        canvas.style.zIndex = '-1';
+        canvas.style.zIndex = '-5'; // Höher als -10 für den full-page-bg
+        canvas.style.pointerEvents = 'none'; // Stellt sicher, dass der Canvas keine Mausinteraktionen blockiert
         document.body.appendChild(canvas);
     } else {
         canvas = document.getElementById('network-background');
     }
     
-    // Set canvas size to window size
+    // Set canvas size to window size with pixel ratio consideration
     resizeCanvas();
     
-    // Get context
-    ctx = canvas.getContext('2d');
+    // Get context with alpha enabled
+    ctx = canvas.getContext('2d', { alpha: true });
     
     // Load the network image
     networkImage = new Image();
+    networkImage.crossOrigin = "anonymous"; // Vermeidet CORS-Probleme
     networkImage.src = '/static/network-bg.jpg';
+    
+    // Fallback auf lokalen Pfad, falls der absolute Pfad fehlschlägt
+    networkImage.onerror = function() {
+        networkImage.src = 'static/network-bg.jpg';
+    };
+    
     networkImage.onload = function() {
         isImageLoaded = true;
-        animate();
+        startAnimation();
     };
     
     // Handle window resize
-    window.addEventListener('resize', resizeCanvas);
+    window.addEventListener('resize', debounce(resizeCanvas, 250));
+    
+    // Überwache Dark Mode-Änderungen
+    document.addEventListener('darkModeToggled', function(event) {
+        isDarkMode = event.detail.isDark;
+    });
 }
 
-// Resize canvas to match window size
+// Hilfsfunktion zur Reduzierung der Resize-Event-Aufrufe
+function debounce(func, wait) {
+    let timeout;
+    return function() {
+        const context = this;
+        const args = arguments;
+        clearTimeout(timeout);
+        timeout = setTimeout(function() {
+            func.apply(context, args);
+        }, wait);
+    };
+}
+
+// Resize canvas to match window size with proper pixel ratio
 function resizeCanvas() {
-    if (canvas) {
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
+    if (!canvas) return;
+    
+    const pixelRatio = window.devicePixelRatio || 1;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    
+    // Set display size (css pixels)
+    canvas.style.width = width + 'px';
+    canvas.style.height = height + 'px';
+    
+    // Set actual size in memory (scaled for pixel ratio)
+    canvas.width = width * pixelRatio;
+    canvas.height = height * pixelRatio;
+    
+    // Scale context to match pixel ratio
+    if (ctx) {
+        ctx.scale(pixelRatio, pixelRatio);
+    }
+    
+    // Wenn Animation läuft und Bild geladen, zeichne erneut
+    if (isImageLoaded && animationFrameId) {
+        drawNetworkImage();
     }
 }
 
-// Animation loop
-function animate() {
+// Start animation
+function startAnimation() {
     if (!isImageLoaded) return;
     
-    // Clear canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    
-    // Update animation parameters
-    rotation += animationSpeed;
-    
-    // Update scale with oscillation
-    scale += scaleSpeed * scaleDirection;
-    if (scale > 1.1) {
-        scaleDirection = -1;
-    } else if (scale < 0.9) {
-        scaleDirection = 1;
+    // Cancel any existing animation
+    if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
     }
     
-    // Update opacity with oscillation
-    opacity += opacitySpeed * opacityDirection;
-    if (opacity > 0.8) {
-        opacityDirection = -1;
-    } else if (opacity < 0.5) {
-        opacityDirection = 1;
-    }
+    // Start animation loop
+    animate();
+}
+
+// Draw network image
+function drawNetworkImage() {
+    if (!isImageLoaded || !ctx) return;
+    
+    // Clear canvas with proper clear method
+    ctx.clearRect(0, 0, canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1));
     
     // Save context state
     ctx.save();
     
     // Move to center of canvas
-    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.translate(canvas.width / (2 * (window.devicePixelRatio || 1)), canvas.height / (2 * (window.devicePixelRatio || 1)));
     
     // Rotate
     ctx.rotate(rotation);
@@ -91,28 +132,84 @@ function animate() {
     // Scale
     ctx.scale(scale, scale);
     
-    // Set global opacity
-    ctx.globalAlpha = opacity;
+    // Set global opacity, angepasst für Dark Mode
+    ctx.globalAlpha = isDarkMode ? opacity : opacity * 0.8;
+    
+    // Bildgröße berechnen, um den Bildschirm abzudecken
+    const imgAspect = networkImage.width / networkImage.height;
+    const canvasAspect = canvas.width / canvas.height;
+    
+    let drawWidth, drawHeight;
+    
+    if (canvasAspect > imgAspect) {
+        drawWidth = canvas.width / (window.devicePixelRatio || 1);
+        drawHeight = drawWidth / imgAspect;
+    } else {
+        drawHeight = canvas.height / (window.devicePixelRatio || 1);
+        drawWidth = drawHeight * imgAspect;
+    }
     
     // Draw image centered
     ctx.drawImage(
         networkImage,
-        -networkImage.width / 2,
-        -networkImage.height / 2,
-        networkImage.width,
-        networkImage.height
+        -drawWidth / 2,
+        -drawHeight / 2,
+        drawWidth,
+        drawHeight
     );
     
     // Restore context state
     ctx.restore();
-    
-    // Request next frame
-    requestAnimationFrame(animate);
 }
 
-// Initialize background when the DOM is loaded
+// Animation loop
+function animate() {
+    // Update animation parameters
+    rotation += animationSpeed;
+    
+    // Update scale with oscillation
+    scale += scaleSpeed * scaleDirection;
+    if (scale > 1.05) { // Kleinerer Skalierungsbereich für weniger starke Größenänderung
+        scaleDirection = -1;
+    } else if (scale < 0.95) {
+        scaleDirection = 1;
+    }
+    
+    // Update opacity with oscillation
+    opacity += opacitySpeed * opacityDirection;
+    if (opacity > 0.75) { // Kleinerer Opazitätsbereich für subtilere Änderungen
+        opacityDirection = -1;
+    } else if (opacity < 0.65) {
+        opacityDirection = 1;
+    }
+    
+    // Draw the image
+    drawNetworkImage();
+    
+    // Request next frame
+    animationFrameId = requestAnimationFrame(animate);
+}
+
+// Cleanup Funktion für Speicherbereinigung
+function cleanupNetworkBackground() {
+    if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+    }
+    
+    if (canvas && canvas.parentNode) {
+        canvas.parentNode.removeChild(canvas);
+    }
+    
+    window.removeEventListener('resize', resizeCanvas);
+}
+
+// Führe Initialisierung aus, wenn DOM geladen ist
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', initNetworkBackground);
 } else {
     initNetworkBackground();
-} 
\ No newline at end of file
+}
+
+// Führe Cleanup durch, wenn das Fenster geschlossen wird
+window.addEventListener('beforeunload', cleanupNetworkBackground); 
\ No newline at end of file
diff --git a/website/static/network-bg.jpg b/website/static/network-bg.jpg
index 778ca49..71ca67d 100644
--- a/website/static/network-bg.jpg
+++ b/website/static/network-bg.jpg
@@ -1,2 +1,5 @@
-/* This is a placeholder for the network background image.
-   The actual image (d2efd014-1325-471f-b9a7-90d025eb81d6.png) should be copied here. */ 
\ No newline at end of file
+/* Dies ist ein Platzhalter für das Netzwerk-Hintergrundbild.
+   Das eigentliche Bild sollte hier durch eine echte JPG-Datei ersetzt werden.
+   
+   Empfohlene Bildgröße: mindestens 1920x1080px
+   Optimaler Stil: Dunkler Hintergrund mit abstrakten Verbindungslinien und Punkten */ 
\ No newline at end of file
diff --git a/website/templates/base.html b/website/templates/base.html
index 0f32aa5..2156962 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -114,9 +114,12 @@
             --light-card-bg: rgba(255, 255, 255, 0.85);
             --accent-color: #b38fff;
             --accent-gradient: linear-gradient(135deg, #b38fff, #58a9ff);
+            --accent-gradient-hover: linear-gradient(135deg, #c7a8ff, #70b5ff);
             --blur-amount: 20px;
-            --border-radius: 24px;
-            --button-radius: 16px;
+            --border-radius: 28px;
+            --card-border-radius: 24px;
+            --button-radius: 18px;
+            --nav-item-radius: 14px;
         }
         
         /* Dark Mode Einstellungen */
@@ -134,11 +137,12 @@
             padding: 0;
             font-family: 'Inter', system-ui, -apple-system, sans-serif;
             overflow-x: hidden;
+            transition: background-color 0.5s ease, color 0.5s ease;
         }
         
         /* 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;
+            background-color: transparent !important;
             width: 100%;
         }
         
@@ -148,13 +152,30 @@
             color: #1a202c;
         }
         
+        /* Große Headings mit verbesserten Stilen */
+        h1.hero-heading {
+            font-size: clamp(2.5rem, 8vw, 5rem);
+            line-height: 1.1;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+            margin-bottom: 1.5rem;
+        }
+        
+        h2.section-heading {
+            font-size: clamp(1.75rem, 5vw, 3rem);
+            line-height: 1.2;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            margin-bottom: 1.25rem;
+        }
+        
         /* 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);
+            border-radius: var(--card-border-radius);
             box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
             transition: all 0.3s ease;
         }
@@ -170,7 +191,7 @@
             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);
+            border-radius: var(--card-border-radius);
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
             transition: all 0.3s ease;
         }
@@ -181,26 +202,46 @@
             transform: translateY(-2px);
         }
         
-        /* Verbesserte Button-Stile mit besserer Lesbarkeit */
+        /* Verbesserte Navbar-Styles */
+        .glass-navbar-dark {
+            background: rgba(14, 18, 32, 0.85);
+            backdrop-filter: blur(15px);
+            -webkit-backdrop-filter: blur(15px);
+            border-color: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+            border-radius: 0 0 20px 20px;
+        }
+        
+        .glass-navbar-light {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(15px);
+            -webkit-backdrop-filter: blur(15px);
+            border-color: rgba(0, 0, 0, 0.05);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+            border-radius: 0 0 20px 20px;
+        }
+        
+        /* Verbesserte Button-Stile mit besserer Lesbarkeit und stärkeren Farbverläufen */
         .btn, button, .button, [type="button"], [type="submit"] {
-            transition: all 0.25s ease;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             border-radius: var(--button-radius);
             padding: 0.75rem 1.5rem;
             font-weight: 600;
             letter-spacing: 0.4px;
             color: rgba(255, 255, 255, 1);
-            background: rgba(80, 90, 130, 0.8);
-            border: 1px solid rgba(255, 255, 255, 0.18);
+            background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(168, 85, 247, 0.8));
+            border: 1px solid rgba(255, 255, 255, 0.15);
             box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
             text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
             backdrop-filter: blur(15px);
             -webkit-backdrop-filter: blur(15px);
             position: relative;
             overflow: hidden;
+            outline: none;
         }
         
         .btn:hover, button:hover, .button:hover, [type="button"]:hover, [type="submit"]:hover {
-            background: rgba(179, 143, 255, 0.65);
+            background: linear-gradient(135deg, rgba(129, 140, 248, 0.9), rgba(192, 132, 252, 0.9));
             transform: translateY(-3px);
             border: 1px solid rgba(255, 255, 255, 0.3);
             box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25), 0 0 12px rgba(179, 143, 255, 0.35);
@@ -212,19 +253,16 @@
             box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
         }
         
-        /* Navigation Stile */
+        /* Navigation Stile mit verbesserten Farbverläufen */
         .nav-link {
             transition: all 0.25s ease;
-            border-radius: var(--border-radius);
-            padding: 10px 18px;
+            border-radius: var(--nav-item-radius);
+            padding: 0.625rem 1rem;
             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 {
@@ -234,14 +272,14 @@
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
         
-        .nav-link.active {
-            background: rgba(179, 143, 255, 0.3);
+        .nav-link-active {
+            background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(139, 92, 246, 0.3));
             color: white;
             font-weight: 600;
             box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
         }
         
-        .nav-link.active::after {
+        .nav-link-active::after {
             content: '';
             position: absolute;
             bottom: 0;
@@ -253,7 +291,7 @@
         
         /* Light-Mode Navigation Stile */
         .nav-link-light {
-            color: rgba(26, 32, 44, 0.9);
+            color: rgba(26, 32, 44, 0.85);
         }
         
         .nav-link-light:hover {
@@ -262,14 +300,14 @@
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
         }
         
-        .nav-link-light.active {
-            background: rgba(179, 143, 255, 0.2);
+        .nav-link-light-active {
+            background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(139, 92, 246, 0.2));
             color: rgba(26, 32, 44, 1);
             font-weight: 600;
             box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
         }
         
-        .nav-link-light.active::after {
+        .nav-link-light-active::after {
             background: linear-gradient(90deg, transparent, rgba(26, 32, 44, 0.5), transparent);
         }
         
@@ -282,8 +320,8 @@
         /* 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;
+            background: linear-gradient(135deg, rgba(124, 58, 237, 0.7), rgba(139, 92, 246, 0.7));
+            color: #ffffff;
             border: 1px solid rgba(0, 0, 0, 0.1);
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
             text-shadow: none;
@@ -291,7 +329,7 @@
         
         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);
+            background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(168, 85, 247, 0.85));
             color: #ffffff;
             border: 1px solid rgba(0, 0, 0, 0.08);
             box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 0 12px rgba(179, 143, 255, 0.2);
@@ -344,7 +382,7 @@
             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;
+            border-radius: 14px;
             font-size: 0.875rem;
             font-weight: 500;
             transition: all 0.25s ease;
@@ -361,84 +399,14 @@
         
         /* Verbesserter Farbverlauf-Text */
         .gradient-text {
-            background: var(--accent-gradient);
+            background: linear-gradient(135deg, rgba(200, 170, 255, 1), rgba(100, 180, 255, 1));
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
             font-weight: 700;
             letter-spacing: -0.02em;
-        }
-        
-        /* 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;
+            text-shadow: 0 2px 10px rgba(179, 143, 255, 0.3);
+            filter: drop-shadow(0 2px 6px rgba(179, 143, 255, 0.3));
         }
         
         /* Globaler Hintergrund */
@@ -484,16 +452,84 @@
             padding: 2rem 1rem;
         }
 
+        /* Dark Mode Toggle Stile */
         .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 */
+            background-color: #58a9ff;
         }
+        
         input:checked ~ .block {
-            background-color: rgba(179, 143, 255, 0.4); /* Angepasst an Farbschema */
+            background-color: rgba(88, 169, 255, 0.4);
+        }
+        
+        /* Feature Cards mit Glasmorphismus und Farbverlauf */
+        .feature-card {
+            border-radius: var(--card-border-radius);
+            padding: 2rem;
+            transition: all 0.3s ease;
+            background: linear-gradient(145deg, rgba(32, 36, 55, 0.7), rgba(24, 28, 45, 0.9));
+            backdrop-filter: blur(var(--blur-amount));
+            -webkit-backdrop-filter: blur(var(--blur-amount));
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+        }
+        
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            background: linear-gradient(145deg, rgba(40, 44, 65, 0.8), rgba(28, 32, 50, 0.95));
+        }
+        
+        html.light .feature-card {
+            background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 250, 0.9));
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+        }
+        
+        html.light .feature-card:hover {
+            background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 255, 0.95));
+            border: 1px solid rgba(0, 0, 0, 0.08);
+            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        }
+        
+        .feature-card .icon {
+            width: 60px;
+            height: 60px;
+            border-radius: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin-bottom: 1.25rem;
+            background: linear-gradient(135deg, rgba(124, 58, 237, 0.8), rgba(139, 92, 246, 0.6));
+            color: white;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+        }
+        
+        .feature-card h3 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.75rem;
+            color: rgba(255, 255, 255, 0.95);
+        }
+        
+        html.light .feature-card h3 {
+            color: rgba(26, 32, 44, 0.95);
+        }
+        
+        .feature-card p {
+            color: rgba(255, 255, 255, 0.75);
+            line-height: 1.6;
+        }
+        
+        html.light .feature-card p {
+            color: rgba(26, 32, 44, 0.75);
         }
     </style>
     
@@ -503,203 +539,228 @@
 <body data-page="{{ request.endpoint }}" class="relative overflow-x-hidden">
     <!-- Globaler Hintergrund -->
     <div class="full-page-bg"></div>
+    <!-- Statischer Fallback-Hintergrund (wird nur angezeigt, wenn JavaScript deaktiviert ist) -->
+    <div class="fixed inset-0 z-[-9] bg-cover bg-center opacity-50" style="background-image: url('{{ url_for('static', filename='network-bg.jpg') }}');"></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>
+        <nav class="sticky top-0 left-0 right-0 z-50 transition-all duration-300 py-4 px-5 border-b" 
+             x-bind:class="darkMode ? 'glass-navbar-dark' : 'glass-navbar-light'">
+            <div class="container mx-auto flex justify-between items-center">
+                <!-- Logo -->
+                <a href="{{ url_for('index') }}" class="flex items-center group">
+                    <span class="text-2xl font-bold gradient-text transform transition-transform group-hover:scale-105">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 
-                   ? '{{ 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' if request.endpoint == 'index' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
-                   : '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' if request.endpoint == 'index' else '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 
-                   ? '{{ 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' if request.endpoint == 'mindmap' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
-                   : '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' if request.endpoint == 'mindmap' else '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 
-                   ? '{{ 'background: rgba(179, 143, 255, 0.3); color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);' if request.endpoint == 'profile' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
-                   : '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);' if request.endpoint == 'profile' else '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>
-
-            <!-- 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>
+                <!-- Hauptnavigation - Desktop -->
+                <div class="hidden md:flex items-center space-x-5">
+                    <a href="{{ url_for('index') }}" 
+                       class="nav-link flex items-center"
+                       x-bind:class="darkMode 
+                       ? '{{ 'nav-link-active' if request.endpoint == 'index' else '' }}' 
+                       : '{{ 'nav-link-light-active' if request.endpoint == 'index' else 'nav-link-light' }}'">
+                        <i class="fa-solid fa-home mr-2"></i>Start
+                    </a>
+                    <a href="{{ url_for('mindmap') }}" 
+                       class="nav-link flex items-center"
+                       x-bind:class="darkMode 
+                       ? '{{ 'nav-link-active' if request.endpoint == 'mindmap' else '' }}' 
+                       : '{{ 'nav-link-light-active' if request.endpoint == 'mindmap' else 'nav-link-light' }}'">
+                        <i class="fa-solid fa-diagram-project mr-2"></i>Mindmap
+                    </a>
+                    {% if current_user.is_authenticated %}
+                    <a href="{{ url_for('profile') }}" 
+                       class="nav-link flex items-center"
+                       x-bind:class="darkMode 
+                       ? '{{ 'nav-link-active' if request.endpoint == 'profile' else '' }}' 
+                       : '{{ 'nav-link-light-active' if request.endpoint == 'profile' else 'nav-link-light' }}'">
+                        <i class="fa-solid fa-user mr-2"></i>Profil
+                    </a>
+                    {% endif %}
                 </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 %}
+                <!-- Rechte Seite -->
+                <div class="flex items-center space-x-4">
+                    <!-- Dark Mode Toggle Switch -->
+                    <div class="flex items-center cursor-pointer" @click="toggleDarkMode">
+                        <div class="relative w-12 h-6">
+                            <input type="checkbox" id="darkModeToggle" class="sr-only" x-model="darkMode">
+                            <div class="block w-12 h-6 rounded-full transition-colors duration-300"
+                                 x-bind:class="darkMode ? 'bg-blue-400/50' : 'bg-gray-400/50'"></div>
+                            <div class="dot absolute left-1 top-1 w-4 h-4 rounded-full transition-transform duration-300 shadow-md"
+                                 x-bind:class="darkMode ? 'bg-blue-500 transform translate-x-6' : 'bg-white'"></div>
+                        </div>
+                        <div class="ml-3 hidden sm:block" 
+                             x-bind:class="darkMode ? 'text-white/90' : 'text-gray-700'">
+                            <span x-text="darkMode ? 'Dunkel' : 'Hell'"></span>
+                        </div>
+                        <div class="ml-2 sm:hidden" 
+                             x-bind:class="darkMode ? 'text-white/90' : 'text-gray-700'">
+                            <i class="fa-solid" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
                         </div>
-                        <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>
+
+                    <!-- Benutzermenü oder Login -->
+                    {% if current_user.is_authenticated %}
+                    <div class="relative" x-data="{ open: false }">
+                        <button @click="open = !open" 
+                                class="flex items-center space-x-2 p-2 rounded-full transition-all duration-300 cursor-pointer"
+                                x-bind:class="darkMode 
+                                ? 'bg-gray-800/80 text-white/90 hover:bg-gray-700/80' 
+                                : 'bg-gray-200/80 text-gray-700 hover:bg-gray-300/80'">
+                            <div class="w-9 h-9 rounded-full flex items-center justify-center text-white font-medium text-sm overflow-hidden" 
+                                 style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
+                                {% if current_user.avatar %}
+                                <img src="{{ current_user.avatar }}" alt="{{ current_user.username }}" class="w-full h-full object-cover">
+                                {% else %}
+                                {{ current_user.username[0].upper() }}
+                                {% endif %}
+                            </div>
+                            <span class="text-sm hidden lg:block">{{ current_user.username }}</span>
+                            <i class="fa-solid fa-chevron-down text-xs hidden lg:block transition-transform duration-200"
+                               x-bind:class="open ? 'transform rotate-180' : ''"></i>
+                        </button>
+
+                        <!-- Dropdown-Menü -->
+                        <div x-show="open"
+                             @click.away="open = false"
+                             x-transition:enter="transition ease-out duration-200"
+                             x-transition:enter-start="opacity-0 scale-95"
+                             x-transition:enter-end="opacity-100 scale-100"
+                             x-transition:leave="transition ease-in duration-150"
+                             x-transition:leave-start="opacity-100 scale-100"
+                             x-transition:leave-end="opacity-0 scale-95"
+                             class="absolute right-0 mt-2 w-52 rounded-2xl overflow-hidden shadow-lg transform origin-top-right z-50"
+                             x-bind:class="darkMode 
+                             ? 'bg-gray-800/95 backdrop-blur-md border border-white/10' 
+                             : 'bg-white/95 backdrop-blur-md border border-gray-200/50'">
+                            <a href="{{ url_for('profile') }}" 
+                               class="block px-4 py-3 transition-colors duration-200 flex items-center"
+                               x-bind:class="darkMode 
+                               ? 'text-white/90 hover:bg-purple-500/20' 
+                               : 'text-gray-700 hover:bg-purple-500/10'">
+                                <i class="fa-solid fa-user mr-2 text-purple-400"></i>Profil
+                            </a>
+                            <a href="{{ url_for('settings') }}" 
+                               class="block px-4 py-3 transition-colors duration-200 flex items-center"
+                               x-bind:class="darkMode 
+                               ? 'text-white/90 hover:bg-purple-500/20' 
+                               : 'text-gray-700 hover:bg-purple-500/10'">
+                                <i class="fa-solid fa-gear mr-2 text-purple-400"></i>Einstellungen
+                            </a>
+                            <div class="my-2 h-px" x-bind:class="darkMode ? 'bg-white/10' : 'bg-gray-200'"></div>
+                            <a href="{{ url_for('logout') }}" 
+                               class="block px-4 py-3 transition-colors duration-200 flex items-center"
+                               x-bind:class="darkMode 
+                               ? 'text-white/90 hover:bg-red-500/20' 
+                               : 'text-gray-700 hover:bg-red-500/10'">
+                                <i class="fa-solid fa-right-from-bracket mr-2 text-red-400"></i>Abmelden
+                            </a>
+                        </div>
+                    </div>
+                    {% else %}
+                    <a href="{{ url_for('login') }}" 
+                       class="flex items-center px-4 py-2.5 rounded-xl font-medium transition-all duration-300"
+                       x-bind:class="darkMode 
+                       ? 'bg-purple-500/30 text-white hover:bg-purple-600/40 shadow-md hover:shadow-lg hover:-translate-y-0.5' 
+                       : 'bg-purple-500/20 text-gray-800 hover:bg-purple-500/30 shadow-sm hover:shadow-md hover:-translate-y-0.5'">
+                        <i class="fa-solid fa-right-to-bracket mr-2"></i>Anmelden
+                    </a>
+                    {% endif %}
+                    
+                    <!-- Mobilmenü-Button -->
+                    <button @click="mobileMenuOpen = !mobileMenuOpen" 
+                            class="md:hidden rounded-xl p-2.5 transition-colors duration-200 focus:outline-none"
+                            x-bind:class="darkMode 
+                            ? 'text-white/90 hover:bg-gray-700/50' 
+                            : 'text-gray-700 hover:bg-gray-200/80'">
+                        <i class="fa-solid" :class="mobileMenuOpen ? 'fa-times' : 'fa-bars'"></i>
+                    </button>
                 </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>
 
-        <!-- Mobile Menü (erscheint, wenn mobileMenuOpen true ist) -->
+        <!-- Mobile Menü -->
         <div x-show="mobileMenuOpen" 
              x-transition:enter="transition ease-out duration-200"
-             x-transition:enter-start="opacity-0 -translate-y-10"
+             x-transition:enter-start="opacity-0 -translate-y-4"
              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;">
+             x-transition:leave-end="opacity-0 -translate-y-4"
+             class="md:hidden w-full z-40 border-b"
+             x-bind:class="darkMode 
+             ? 'bg-gray-900/90 backdrop-blur-lg border-white/10' 
+             : 'bg-white/90 backdrop-blur-lg border-gray-200'">
+            <div class="px-4 py-4 space-y-3">
                 <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 
-                   ? '{{ 'background: rgba(179, 143, 255, 0.3); color: white;' if request.endpoint == 'index' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
-                   : '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' if request.endpoint == 'index' else '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
+                   class="block py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center"
+                   x-bind:class="darkMode 
+                   ? '{{ 'bg-purple-500/20 text-white' if request.endpoint == 'index' else 'text-white/80 hover:bg-gray-800/80 hover:text-white' }}' 
+                   : '{{ 'bg-purple-500/10 text-gray-900' if request.endpoint == 'index' else 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' }}'">
+                    <i class="fa-solid fa-home w-5 mr-3"></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 
-                   ? '{{ 'background: rgba(179, 143, 255, 0.3); color: white;' if request.endpoint == 'mindmap' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
-                   : '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' if request.endpoint == 'mindmap' else '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
+                   class="block py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center"
+                   x-bind:class="darkMode 
+                   ? '{{ 'bg-purple-500/20 text-white' if request.endpoint == 'mindmap' else 'text-white/80 hover:bg-gray-800/80 hover:text-white' }}' 
+                   : '{{ 'bg-purple-500/10 text-gray-900' if request.endpoint == 'mindmap' else 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' }}'">
+                    <i class="fa-solid fa-diagram-project w-5 mr-3"></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 
-                   ? '{{ 'background: rgba(179, 143, 255, 0.3); color: white;' if request.endpoint == 'profile' else 'background: transparent; color: rgba(255, 255, 255, 0.9);' }}' 
-                   : '{{ 'background: rgba(179, 143, 255, 0.2); color: rgba(26, 32, 44, 1);' if request.endpoint == 'profile' else '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
+                   class="block py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center"
+                   x-bind:class="darkMode 
+                   ? '{{ 'bg-purple-500/20 text-white' if request.endpoint == 'profile' else 'text-white/80 hover:bg-gray-800/80 hover:text-white' }}' 
+                   : '{{ 'bg-purple-500/10 text-gray-900' if request.endpoint == 'profile' else 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' }}'">
+                    <i class="fa-solid fa-user w-5 mr-3"></i>Profil
                 </a>
                 {% endif %}
             </div>
         </div>
 
         <!-- Hauptinhalt -->
-        <main class="flex-grow pt-4">
+        <main class="flex-grow pt-6">
             {% 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 #}
+        <footer class="mt-12 py-10 transition-colors duration-300 rounded-t-3xl mx-4 sm:mx-6 md:mx-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"
+                        <a href="{{ url_for('index') }}" class="text-2xl font-bold gradient-text inline-block transform transition-transform hover:scale-105">MindMap</a>
+                        <p class="mt-3 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">
-
+                    <div class="flex flex-wrap justify-center md:justify-start space-x-4 sm: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>
+                           class="transition-all duration-200 text-sm px-4 py-2.5 rounded-xl"
+                           :class="darkMode ? 'text-gray-400 hover:text-white hover:bg-purple-600/20 hover:shadow-md' : 'text-gray-700 hover:text-gray-900 hover:bg-purple-500/10 hover:shadow-sm'">
+                           <span class="flex items-center">
+                               <i class="fa-solid fa-info-circle mr-2 opacity-70"></i>
+                               Impressum
+                           </span>
+                        </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>
+                           class="transition-all duration-200 text-sm px-4 py-2.5 rounded-xl"
+                           :class="darkMode ? 'text-gray-400 hover:text-white hover:bg-purple-600/20 hover:shadow-md' : 'text-gray-700 hover:text-gray-900 hover:bg-purple-500/10 hover:shadow-sm'">
+                           <span class="flex items-center">
+                               <i class="fa-solid fa-shield-alt mr-2 opacity-70"></i>
+                               Datenschutz
+                           </span>
+                        </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>
+                           class="transition-all duration-200 text-sm px-4 py-2.5 rounded-xl"
+                           :class="darkMode ? 'text-gray-400 hover:text-white hover:bg-purple-600/20 hover:shadow-md' : 'text-gray-700 hover:text-gray-900 hover:bg-purple-500/10 hover:shadow-sm'">
+                           <span class="flex items-center">
+                               <i class="fa-solid fa-file-contract mr-2 opacity-70"></i>
+                               AGB
+                           </span>
+                        </a>
                     </div>
 
                     <!-- Optional: Social Media Links oder andere Elemente -->
@@ -712,7 +773,7 @@
                     #}
                 </div>
 
-                <div class="mt-8 pt-6 text-center text-xs" {# mt-10 changed to mt-8 #}
+                <div class="mt-8 pt-6 text-center text-xs"
                      :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>
diff --git a/website/templates/index.html b/website/templates/index.html
index ffeebdd..446d9a3 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -83,27 +83,31 @@
 <div class="full-page-bg gradient-background"></div>
 
 <!-- Hero Section -->
-<section class="relative pt-16 pb-32">
+<section class="relative pt-20 pb-32">
   <!-- Hero Content -->
   <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
     <div class="text-center mb-16">
-      <h1 class="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>
+      <h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
+        <span class="gradient-text inline-block transform transition-all duration-700 hover:scale-105">Wissen</span> neu
+        <div class="mt-2 relative">
+          <span class="relative inline-block">vernetzen
+            <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-500/0 via-purple-500/70 to-purple-500/0 rounded-full"></div>
+          </span>
+        </div>
       </h1>
       <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-12">
         Erkunde komplexe Ideen visuell, schaffe Verbindungen und teile deine Gedanken
         in einem interaktiven Wissensnetzwerk.
       </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="{{ url_for('mindmap') }}" class="btn-primary text-lg px-8 py-4 rounded-lg">
+      <div class="flex flex-col sm:flex-row gap-5 justify-center">
+        <a href="{{ url_for('mindmap') }}" class="btn-primary text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-purple-500/10">
           <span class="flex items-center">
-            <i class="fa-solid fa-diagram-project mr-3"></i> 
+            <i class="fa-solid fa-diagram-project mr-3 animate-pulse"></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 rounded-lg shadow-lg">
+        <a href="{{ url_for('register') }}" class="btn-secondary text-lg px-8 py-4 rounded-2xl shadow-lg hover:shadow-xl hover:shadow-blue-500/10">
           <span class="flex items-center">
             <i class="fa-solid fa-user-plus mr-3 icon-pulse"></i>
             Konto erstellen
@@ -117,7 +121,7 @@
     <div class="relative w-full max-w-4xl mx-auto h-80 sm:h-96">
       <div class="absolute inset-0 flex items-center justify-center">
         <div class="hidden md:block text-center">
-          <div class="text-3xl font-bold gradient-text mb-2">MindMap</div>
+          <div class="text-3xl font-bold gradient-text mb-2 animate-float">MindMap</div>
           <div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
         </div>
         
@@ -126,8 +130,8 @@
           <!-- Glossy Nodes and Lines -->
           <defs>
             <radialGradient id="nodeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
-              <stop offset="0%" stop-color="rgba(64, 128, 255, 0.8)" />
-              <stop offset="100%" stop-color="rgba(64, 64, 225, 0.4)" />
+              <stop offset="0%" stop-color="rgba(139, 92, 246, 0.9)" />
+              <stop offset="100%" stop-color="rgba(79, 70, 229, 0.5)" />
             </radialGradient>
             <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
               <feGaussianBlur stdDeviation="5" result="blur" />
@@ -154,8 +158,8 @@
             <line x1="200" y1="250" x2="600" y2="250" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="hidden dark:inline" />
             
             <!-- Pulse animation for some lines -->
-            <line class="animate-pulse" x1="400" y1="150" x2="300" y2="200" stroke="rgba(64,96,255,0.4)" stroke-width="2" />
-            <line class="animate-pulse" x1="400" y1="350" x2="500" y2="300" stroke="rgba(128,64,255,0.4)" stroke-width="2" />
+            <line class="animate-pulse" x1="400" y1="150" x2="300" y2="200" stroke="rgba(139, 92, 246, 0.5)" stroke-width="2" />
+            <line class="animate-pulse" x1="400" y1="350" x2="500" y2="300" stroke="rgba(168, 85, 247, 0.5)" stroke-width="2" />
           </g>
           
           <!-- Network Nodes -->
@@ -179,7 +183,7 @@
   
   <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="text-center mb-16">
-      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">MindMap?</span></h2>
+      <h2 class="section-heading mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">MindMap?</span></h2>
       <p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
         Ein modernes Werkzeug zum Visualisieren, Erforschen und Teilen von Wissen
         in einer intuitiven, interaktiven Umgebung.
@@ -188,11 +192,11 @@
     
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       <!-- Feature Card 1 -->
-      <div class="card">
-        <div class="icon">
-          <i class="fa-solid fa-brain icon-pulse"></i>
+      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
+        <div class="icon mb-6 rounded-2xl shadow-lg">
+          <i class="fa-solid fa-brain"></i>
         </div>
-        <h3>Visualisiere Wissen</h3>
+        <h3 class="text-xl font-semibold mb-3">Visualisiere Wissen</h3>
         <p>
           Sieh Wissen als vernetztes System, entdecke Zusammenhänge und erkenne überraschende
           Verbindungen zwischen verschiedenen Themengebieten.
@@ -200,11 +204,11 @@
       </div>
       
       <!-- Feature Card 2 -->
-      <div class="card">
-        <div class="icon">
-          <i class="fa-solid fa-lightbulb icon-pulse"></i>
+      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
+        <div class="icon mb-6 rounded-2xl shadow-lg">
+          <i class="fa-solid fa-lightbulb"></i>
         </div>
-        <h3>Teile Gedanken</h3>
+        <h3 class="text-xl font-semibold mb-3">Teile Gedanken</h3>
         <p>
           Füge deine eigenen Ideen und Perspektiven hinzu. Erstelle Verbindungen zu
           vorhandenen Gedanken und bereichere die wachsende Wissensbasis.
@@ -212,11 +216,11 @@
       </div>
       
       <!-- Feature Card 3 -->
-      <div class="card">
-        <div class="icon">
-          <i class="fa-solid fa-users icon-pulse"></i>
+      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
+        <div class="icon mb-6 rounded-2xl shadow-lg">
+          <i class="fa-solid fa-users"></i>
         </div>
-        <h3>Community</h3>
+        <h3 class="text-xl font-semibold mb-3">Community</h3>
         <p>
           Sei Teil einer Gemeinschaft, die gemeinsam ein verteiltes Wissensarchiv aufbaut
           und sich in thematisch fokussierten Bereichen austauscht.
@@ -224,11 +228,11 @@
       </div>
       
       <!-- Feature Card 4 -->
-      <div class="card">
-        <div class="icon">
-          <i class="fa-solid fa-robot icon-pulse"></i>
+      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
+        <div class="icon mb-6 rounded-2xl shadow-lg">
+          <i class="fa-solid fa-robot"></i>
         </div>
-        <h3>KI-Assistenz</h3>
+        <h3 class="text-xl font-semibold mb-3">KI-Assistenz</h3>
         <p>
           Lass dir von künstlicher Intelligenz helfen, neue Zusammenhänge zu entdecken,
           Inhalte zusammenzufassen und Fragen zu beantworten.
@@ -236,11 +240,11 @@
       </div>
       
       <!-- Feature Card 5 -->
-      <div class="card">
-        <div class="icon">
-          <i class="fa-solid fa-search icon-pulse"></i>
+      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
+        <div class="icon mb-6 rounded-2xl shadow-lg">
+          <i class="fa-solid fa-search"></i>
         </div>
-        <h3>Intelligente Suche</h3>
+        <h3 class="text-xl font-semibold mb-3">Intelligente Suche</h3>
         <p>
           Finde genau die Informationen, die du suchst, mit fortschrittlichen Such- und
           Filterfunktionen für eine präzise Navigation durch das Wissen.
@@ -248,11 +252,11 @@
       </div>
       
       <!-- Feature Card 6 -->
-      <div class="card">
-        <div class="icon">
-          <i class="fa-solid fa-route icon-pulse"></i>
+      <div class="feature-card p-8 rounded-3xl hover:-translate-y-3 transform transition-all duration-300">
+        <div class="icon mb-6 rounded-2xl shadow-lg">
+          <i class="fa-solid fa-route"></i>
         </div>
-        <h3>Geführte Pfade</h3>
+        <h3 class="text-xl font-semibold mb-3">Geführte Pfade</h3>
         <p>
           Folge kuratierten Lernpfaden durch komplexe Themen oder erschaffe selbst
           Routen für andere, die deinen Gedankengängen folgen möchten.
@@ -263,18 +267,18 @@
 </section>
 
 <!-- Call to Action Section -->
-<section class="py-16 relative overflow-hidden">
+<section class="py-20 relative overflow-hidden">
   <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-    <div class="glass-effect p-8 md:p-12 rounded-lg">
+    <div class="glass-effect p-8 md:p-12 rounded-3xl transform transition-all duration-500 hover:-translate-y-2 hover:shadow-xl bg-gradient-to-br from-purple-500/10 to-blue-500/10 backdrop-blur-xl border border-white/10">
       <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>
+          <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Bereit, <span class="gradient-text">Wissen</span> neu zu entdecken?</h2>
           <p class="text-gray-700 dark:text-gray-300 text-lg mb-6 md:mb-0">
             Starte jetzt deine Reise durch das Wissensnetzwerk und erschließe neue Perspektiven.
           </p>
         </div>
         <div class="md:w-1/3 text-center md:text-right">
-          <a href="{{ url_for('mindmap') }}" class="inline-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">
+          <a href="{{ url_for('mindmap') }}" class="inline-block btn-primary font-bold py-3.5 px-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105">
             <span class="flex items-center justify-center">
               <i class="fa-solid fa-arrow-right mr-2"></i>
               Zur Mindmap
@@ -289,74 +293,78 @@
 <!-- Quick Access Section -->
 <section class="py-16">
   <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">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
       <!-- KI-Chat -->
-      <div class="glass-effect p-6 rounded-lg">
+      <div class="glass-morphism p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl">
         <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>
+          <div class="w-12 h-12 rounded-2xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center mr-4 shadow-md">
+            <i class="fa-solid fa-robot text-white text-lg"></i>
+          </div>
           KI-Assistent
         </h3>
         <p class="text-gray-600 dark:text-gray-300 mb-6">
           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">
+        <div class="glass-morphism p-5 rounded-2xl mb-6 transition-all duration-300 hover:shadow-md bg-gradient-to-br from-purple-500/5 to-blue-500/5 border border-white/10">
           <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>
+            <div class="w-10 h-10 rounded-xl bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center flex-shrink-0 mr-3 shadow-md">
+              <i class="fa-solid fa-robot text-white"></i>
             </div>
             <div>
               <p class="text-sm text-gray-700 dark:text-gray-300">Wie kann ich dir heute helfen?</p>
-              <div class="mt-3 flex flex-wrap gap-2">
-                <a href="{{ url_for('mindmap') }}" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-dark-700 dark:hover:bg-dark-600 rounded-full text-xs text-gray-700 dark:text-gray-300 transition">
+              <div class="mt-4 flex flex-wrap gap-2">
+                <a href="{{ url_for('mindmap') }}" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
                   Erkunde die Mindmap
                 </a>
-                <a href="{{ url_for('search_thoughts_page') }}" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-dark-700 dark:hover:bg-dark-600 rounded-full text-xs text-gray-700 dark:text-gray-300 transition">
+                <a href="{{ url_for('search_thoughts_page') }}" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
                   Themen durchsuchen
                 </a>
-                <a href="#" class="px-3 py-1 bg-gray-100 hover:bg-gray-200 dark:bg-dark-700 dark:hover:bg-dark-600 rounded-full text-xs text-gray-700 dark:text-gray-300 transition">
+                <a href="#" class="px-3 py-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800/70 dark:hover:bg-gray-700/80 rounded-xl text-xs text-gray-700 dark:text-gray-300 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow">
                   Beziehungen erforschen
                 </a>
               </div>
             </div>
           </div>
         </div>
-        <button onclick="window.MindMap.assistant.toggleAssistant(true)" class="btn-outline w-full text-center rounded-lg">KI-Chat starten</button>
+        <button onclick="window.MindMap.assistant.toggleAssistant(true)" class="btn-primary w-full text-center rounded-xl py-3.5 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1">KI-Chat starten</button>
       </div>
       
       <!-- Themen-Übersicht -->
-      <div class="glass-effect p-6 rounded-lg">
+      <div class="glass-morphism p-8 rounded-3xl transition-all duration-500 hover:-translate-y-3 hover:shadow-xl">
         <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>
+          <div class="w-12 h-12 rounded-2xl bg-gradient-to-r from-violet-500 to-fuchsia-500 flex items-center justify-center mr-4 shadow-md">
+            <i class="fa-solid fa-fire text-white text-lg"></i>
+          </div>
           Themen-Übersicht
         </h3>
         <div class="space-y-4 mb-6">
-          <a href="{{ url_for('mindmap') }}" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition">
-            <div class="w-2 h-2 rounded-full bg-primary-400 mr-3"></div>
+          <a href="{{ url_for('mindmap') }}" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
+            <div class="w-3 h-3 rounded-full bg-purple-400 mr-3 group-hover:scale-125 transition-transform"></div>
             <div class="flex-grow">
               <p class="font-medium text-gray-800 dark:text-gray-200">Wissensbereiche</p>
               <p class="text-sm text-gray-500 dark:text-gray-400">Überblick über Themenbereiche</p>
             </div>
-            <i class="fa-solid fa-chevron-right text-gray-500"></i>
+            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
           </a>
-          <a href="{{ url_for('search_thoughts_page') }}" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition">
-            <div class="w-2 h-2 rounded-full bg-secondary-400 mr-3"></div>
+          <a href="{{ url_for('search_thoughts_page') }}" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
+            <div class="w-3 h-3 rounded-full bg-blue-400 mr-3 group-hover:scale-125 transition-transform"></div>
             <div class="flex-grow">
               <p class="font-medium text-gray-800 dark:text-gray-200">Gedanken</p>
               <p class="text-sm text-gray-500 dark:text-gray-400">Konkrete Einträge durchsuchen</p>
             </div>
-            <i class="fa-solid fa-chevron-right text-gray-500"></i>
+            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
           </a>
-          <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition">
-            <div class="w-2 h-2 rounded-full bg-green-400 mr-3"></div>
+          <a href="#" class="flex items-center p-3.5 rounded-xl hover:bg-gray-100/50 dark:hover:bg-white/5 transition-all duration-200 group">
+            <div class="w-3 h-3 rounded-full bg-green-400 mr-3 group-hover:scale-125 transition-transform"></div>
             <div class="flex-grow">
               <p class="font-medium text-gray-800 dark:text-gray-200">Verbindungen</p>
               <p class="text-sm text-gray-500 dark:text-gray-400">Beziehungen zwischen Gedanken</p>
             </div>
-            <i class="fa-solid fa-chevron-right text-gray-500"></i>
+            <i class="fa-solid fa-chevron-right text-gray-500 group-hover:translate-x-1 transition-transform"></i>
           </a>
         </div>
-        <a href="{{ url_for('search_thoughts_page') }}" class="btn-outline w-full text-center rounded-lg">Alle Themen entdecken</a>
+        <a href="{{ url_for('search_thoughts_page') }}" class="btn-primary w-full text-center rounded-xl py-3.5">Alle Themen entdecken</a>
       </div>
     </div>
   </div>