feat: Implement frontend production deployment and enhance admin dashboard functionality

backend/app/static/css/glassmorphism.css

@@ -0,0 +1,237 @@
+/* Enhanced Glassmorphism Effects for MYP Application */
+
+/* Base Glass Effects */
+.glass-base {
+  backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.glass-strong {
+  backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.glass-subtle {
+  backdrop-filter: blur(16px) saturate(150%) brightness(105%);
+  -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(105%);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+/* Light Mode Glass */
+.glass-light {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.glass-light-strong {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+}
+
+/* Dark Mode Glass */
+.glass-dark {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.glass-dark-strong {
+  background: rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+/* Interactive Glass Elements */
+.glass-interactive {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+}
+
+.glass-interactive:hover {
+  transform: translateY(-2px);
+  backdrop-filter: blur(28px) saturate(220%) brightness(125%);
+  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(125%);
+  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+/* Glass Navigation */
+.glass-nav {
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.dark .glass-nav {
+  background: rgba(0, 0, 0, 0.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+/* Glass Cards */
+.glass-card-enhanced {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+}
+
+.dark .glass-card-enhanced {
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.glass-card-enhanced:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.dark .glass-card-enhanced:hover {
+  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+/* Glass Buttons */
+.glass-btn {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(16px) saturate(150%) brightness(110%);
+  -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(110%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  transition: all 0.2s ease;
+}
+
+.dark .glass-btn {
+  background: rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.glass-btn:hover {
+  transform: translateY(-1px);
+  backdrop-filter: blur(20px) saturate(170%) brightness(115%);
+  -webkit-backdrop-filter: blur(20px) saturate(170%) brightness(115%);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+/* Glass Modals */
+.glass-modal {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(32px) saturate(200%) brightness(115%);
+  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(115%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 20px;
+  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2);
+}
+
+.dark .glass-modal {
+  background: rgba(0, 0, 0, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+/* Glass Form Elements */
+.glass-input {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(16px) saturate(150%);
+  -webkit-backdrop-filter: blur(16px) saturate(150%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  transition: all 0.2s ease;
+}
+
+.dark .glass-input {
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.glass-input:focus {
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+/* Glass Dropdown */
+.glass-dropdown {
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.dark .glass-dropdown {
+  background: rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+/* Animation for glass elements */
+@keyframes glassFloat {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+.glass-float {
+  animation: glassFloat 3s ease-in-out infinite;
+}
+
+/* Glass overlay for backgrounds */
+.glass-overlay {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+  backdrop-filter: blur(40px) saturate(200%);
+  -webkit-backdrop-filter: blur(40px) saturate(200%);
+}
+
+.dark .glass-overlay {
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
+}
+
+/* Responsive glass effects */
+@media (max-width: 768px) {
+  .glass-base,
+  .glass-strong,
+  .glass-card-enhanced {
+    backdrop-filter: blur(16px) saturate(150%);
+    -webkit-backdrop-filter: blur(16px) saturate(150%);
+  }
+}
+
+/* High contrast mode adjustments */
+@media (prefers-contrast: high) {
+  .glass-base,
+  .glass-strong,
+  .glass-card-enhanced {
+    border-width: 2px;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .glass-interactive,
+  .glass-card-enhanced,
+  .glass-btn {
+    transition: none;
+  }
+  
+  .glass-float {
+    animation: none;
+  }
+} 

backend/app/static/css/input.css

@@ -40,18 +40,18 @@
 
   /* Navbar Styles - Glassmorphism ohne überlagerte Hintergründe */
   nav {
-    @apply bg-white/70 dark:bg-black/70 backdrop-blur-lg border-b border-gray-200/80 dark:border-slate-700/30 shadow-md transition-all duration-300;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    @apply bg-white/60 dark:bg-black/60 backdrop-blur-xl border-b border-gray-200/70 dark:border-slate-700/20 shadow-lg transition-all duration-300;
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05);
   }
   
   /* Benutzer-Dropdown Styles */
   #user-dropdown {
-    @apply absolute right-0 mt-2 w-64 bg-white/70 dark:bg-black/70 backdrop-blur-lg border border-gray-200/80 dark:border-slate-700/30 rounded-xl shadow-xl transition-all duration-200 z-50;
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    @apply absolute right-0 mt-2 w-64 bg-white/60 dark:bg-black/60 backdrop-blur-xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-200 z-50;
+    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
     animation: fadeIn 0.2s ease-out forwards;
   }
 }
@@ -84,7 +84,10 @@
   }
   
   .stat-card {
-    @apply bg-white dark:bg-dark-surface rounded-xl border border-gray-200 dark:border-slate-700/30 p-5 relative overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
+    @apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-5 relative overflow-hidden shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl;
+    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
   
   .stat-icon {
@@ -141,7 +144,10 @@
   .form-input,
   .form-select,
   .form-textarea {
-    @apply w-full px-3 py-2 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all duration-200;
+    @apply w-full px-3 py-2 bg-white/60 dark:bg-slate-800/60 border border-gray-300/60 dark:border-slate-600/60 rounded-lg text-slate-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:border-transparent transition-all duration-200 backdrop-blur-lg;
+    backdrop-filter: blur(16px) saturate(150%);
+    -webkit-backdrop-filter: blur(16px) saturate(150%);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
   }
   
   /* Tabellen im Admin Panel */
@@ -192,7 +198,10 @@
   
   /* Drucker-Karten */
   .printer-card {
-    @apply bg-white dark:bg-dark-surface rounded-xl border border-gray-200 dark:border-slate-700/30 p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
+    @apply bg-white/60 dark:bg-black/70 rounded-xl border border-gray-200/60 dark:border-slate-700/30 p-6 shadow-2xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 backdrop-blur-xl;
+    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
   
   .printer-header {
@@ -345,25 +354,27 @@
 
 /* Glassmorphism Flash Messages */
 .flash-message {
-  @apply bg-white/70 dark:bg-black/70 backdrop-blur-md border border-gray-200 dark:border-slate-700/50 rounded-xl p-4 relative mb-4 shadow-md;
-  animation: slide-down 0.3s ease-out forwards;
-  transition: all 0.3s ease;
+  @apply fixed top-4 right-4 px-6 py-4 rounded-xl text-sm font-medium shadow-2xl transform transition-all duration-300 z-50 backdrop-blur-xl border border-white/20;
+  backdrop-filter: blur(20px) saturate(180%) brightness(120%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(120%);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  animation: slide-down 0.3s ease-out;
 }
 
 .flash-message.info {
-  @apply border-l-4 border-blue-500;
+  @apply bg-blue-500/70 dark:bg-blue-600/70 text-white;
 }
 
 .flash-message.success {
-  @apply border-l-4 border-green-500;
+  @apply bg-green-500/70 dark:bg-green-600/70 text-white;
 }
 
 .flash-message.warning {
-  @apply border-l-4 border-yellow-500;
+  @apply bg-yellow-500/70 dark:bg-yellow-600/70 text-white;
 }
 
 .flash-message.error {
-  @apply border-l-4 border-red-500;
+  @apply bg-red-500/70 dark:bg-red-600/70 text-white;
 }
 
 @keyframes slide-down {
@@ -404,26 +415,41 @@
 @layer components {
   /* Buttons im Light Mode Schwarz statt Blau */
   .btn-primary {
-    @apply bg-black hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-200 text-white dark:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 shadow-sm;
+    @apply bg-black/80 hover:bg-gray-800/80 dark:bg-white/80 dark:hover:bg-gray-200/80 text-white dark:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 shadow-xl backdrop-blur-lg;
+    backdrop-filter: blur(16px) saturate(150%) brightness(110%);
+    -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(110%);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
   
   .btn-secondary {
-    @apply bg-white hover:bg-gray-100 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-900 dark:text-white border border-gray-300 dark:border-slate-700 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 shadow-sm;
+    @apply bg-white/70 hover:bg-gray-100/70 dark:bg-slate-800/70 dark:hover:bg-slate-700/70 text-slate-900 dark:text-white border border-gray-300/60 dark:border-slate-700/60 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 shadow-xl backdrop-blur-lg;
+    backdrop-filter: blur(16px) saturate(150%) brightness(110%);
+    -webkit-backdrop-filter: blur(16px) saturate(150%) brightness(110%);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
   
   .btn-outline {
-    @apply border-2 border-black hover:bg-black dark:border-white dark:hover:bg-white text-black hover:text-white dark:text-white dark:hover:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
+    @apply border-2 border-black/70 hover:bg-black/70 dark:border-white/70 dark:hover:bg-white/70 text-black hover:text-white dark:text-white dark:hover:text-slate-900 px-4 py-2 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 backdrop-blur-lg;
+    backdrop-filter: blur(16px) saturate(150%);
+    -webkit-backdrop-filter: blur(16px) saturate(150%);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
   }
   
   /* Glassmorphism Card mit abgerundeten Ecken */
   .glass-card {
-    @apply bg-white/80 dark:bg-black/80 backdrop-blur-md border border-gray-200 dark:border-slate-700/50 rounded-xl p-6 shadow-lg transition-all duration-300;
+    @apply bg-white/70 dark:bg-black/70 backdrop-blur-xl border border-gray-200/60 dark:border-slate-700/40 rounded-xl p-6 shadow-xl transition-all duration-300;
+    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
     border-radius: var(--card-radius);
   }
   
   /* Dashboard Cards mit schwarzem Hintergrund */
   .dashboard-card {
-    @apply bg-white/70 dark:bg-black/90 backdrop-blur-lg border border-gray-200/80 dark:border-slate-700/30 rounded-xl p-6 shadow-lg transition-all duration-300;
+    @apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl p-6 shadow-xl transition-all duration-300;
+    backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+    -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
     border-radius: var(--card-radius);
   }
   
@@ -438,16 +464,16 @@
 
   /* Verbesserte Navbar Styles - Glassmorphism ohne überlagerte Hintergründe */
   .navbar {
-    @apply sticky top-0 z-50 backdrop-blur-xl border-b border-gray-200/50 dark:border-slate-700/20 shadow-lg;
-    background: rgba(255, 255, 255, 0.6);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
+    @apply sticky top-0 z-50 backdrop-blur-2xl border-b border-gray-200/40 dark:border-slate-700/15 shadow-xl;
+    background: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+    -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
 
   .dark .navbar {
-    background: rgba(0, 0, 0, 0.6); /* Transparenter für stärkeren Glaseffekt */
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.5); /* Transparenter für stärkeren Glaseffekt */
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
   }
 
   .navbar-brand {
@@ -495,7 +521,10 @@
   
   /* Dropdown Styles */
   .user-dropdown {
-    @apply absolute right-0 mt-2 w-64 bg-white/90 dark:bg-black/90 backdrop-blur-xl border border-gray-200/80 dark:border-slate-700/30 rounded-xl shadow-xl z-50 overflow-hidden;
+    @apply absolute right-0 mt-2 w-64 bg-white/70 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl z-50 overflow-hidden;
+    backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+    -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
     animation: fadeIn 0.2s ease-out forwards;
   }
   
@@ -528,9 +557,10 @@
 
 /* Dark Mode Toggle - Schwarz statt Blau im Light Mode */
 .dark-mode-toggle {
-  @apply p-3 rounded-full bg-black/90 hover:bg-gray-800/90 dark:bg-white/90 dark:hover:bg-gray-200/90 text-white dark:text-slate-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 shadow-md;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
+  @apply p-3 rounded-full bg-black/80 hover:bg-gray-800/80 dark:bg-white/80 dark:hover:bg-gray-200/80 text-white dark:text-slate-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 shadow-xl;
+  backdrop-filter: blur(12px) saturate(150%);
+  -webkit-backdrop-filter: blur(12px) saturate(150%);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
   min-width: 42px;
   min-height: 42px;
   display: flex;
@@ -550,28 +580,38 @@
 
 /* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */
 .mb-stat-card {
-  background: linear-gradient(135deg, #f0f9ff 0%, #e6f2ff 100%);
+  background: linear-gradient(135deg, rgba(240, 249, 255, 0.6) 0%, rgba(230, 242, 255, 0.6) 100%);
   color: #0f172a;
   position: relative;
   overflow: hidden;
   border: none;
   border-radius: var(--card-radius);
+  backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .dark .mb-stat-card {
-  background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%); /* Noch dunkleres Schwarz */
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%); /* Noch dunkleres Schwarz */
   color: var(--text-primary, #f8fafc);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
 }
 
 /* Stats und Jobs Page Card Styles */
 .stats-card, .job-card {
-  @apply bg-white/70 dark:bg-black/90 backdrop-blur-lg border border-gray-200/80 dark:border-slate-700/30 rounded-xl shadow-lg transition-all duration-300;
+  @apply bg-white/60 dark:bg-black/80 backdrop-blur-2xl border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-2xl transition-all duration-300;
+  backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(120%);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
   border-radius: var(--card-radius);
 } 
 
 /* Footer Styling */
 footer {
-  @apply bg-white/70 dark:bg-black/70 backdrop-blur-lg border-t border-gray-200/80 dark:border-slate-700/30 transition-all duration-300;
+  @apply bg-white/60 dark:bg-black/60 backdrop-blur-xl border-t border-gray-200/70 dark:border-slate-700/20 transition-all duration-300;
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
 }
 
 /* Dropdown Pfeil Animation */