From 170d7c95d2ae29ca7e6adb020582faf32c3b88e5 Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Mon, 2 Jun 2025 15:28:56 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Added=20RASPBERRY=20PI=20Perform?=
 =?UTF-8?q?ance=20Optimierungen=20documentation=20files=20and=20optimized?=
 =?UTF-8?q?=20CSS=20styles.=20=F0=9F=93=9A=20=E2=9C=A8=20Removed=20outdate?=
 =?UTF-8?q?d=20KI=20Prompts=20document.=20=F0=9F=90=9B=20Fixed=20minor=20C?=
 =?UTF-8?q?SS=20inconsistencies.=20=F0=9F=96=A5=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RASPBERRY_PI_PERFORMANCE_OPTIMIERUNGEN.md |    1 +
 backend/static/css/input-original-backup.css  | 3385 +++++++++++++++++
 .../static/css/input-raspberry-optimized.css  |  661 ++++
 backend/static/css/input.css                  | 3180 ++--------------
 backend/static/css/professional-theme.css     |  272 +-
 5 files changed, 4367 insertions(+), 3132 deletions(-)
 create mode 100644 backend/docs/RASPBERRY_PI_PERFORMANCE_OPTIMIERUNGEN.md
 create mode 100644 backend/static/css/input-original-backup.css
 create mode 100644 backend/static/css/input-raspberry-optimized.css

diff --git a/backend/docs/RASPBERRY_PI_PERFORMANCE_OPTIMIERUNGEN.md b/backend/docs/RASPBERRY_PI_PERFORMANCE_OPTIMIERUNGEN.md
new file mode 100644
index 00000000..0519ecba
--- /dev/null
+++ b/backend/docs/RASPBERRY_PI_PERFORMANCE_OPTIMIERUNGEN.md
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/backend/static/css/input-original-backup.css b/backend/static/css/input-original-backup.css
new file mode 100644
index 00000000..8621977d
--- /dev/null
+++ b/backend/static/css/input-original-backup.css
@@ -0,0 +1,3385 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom Styles für Light und Dark Mode - Premium Upgrade mit verbessertem Light Mode */
+@layer base {
+  :root {
+    /* Light Mode Farben - Mercedes-Benz Professional - VERBESSERT für optimale Lesbarkeit */
+    --color-bg-primary: #ffffff;
+    --color-bg-secondary: #fafbfc;
+    --color-bg-tertiary: #f3f5f7;
+    --color-bg-accent: #fbfcfd;
+    --color-text-primary: #111827; /* Verstärkter Kontrast für bessere Lesbarkeit */
+    --color-text-secondary: #374151; /* Erhöhter Kontrast */
+    --color-text-muted: #6b7280; /* Optimierter Muted-Text */
+    --color-text-accent: #0073ce;
+    --color-border-primary: #e5e7eb; /* Subtilere aber sichtbarere Borders */
+    --color-border-secondary: #d1d5db;
+    --color-accent: #0073ce; /* Mercedes-Benz Professional Blau */
+    --color-accent-hover: #005a9f;
+    --color-accent-light: #eff6ff;
+    --color-accent-text: #ffffff;
+    --color-shadow: rgba(0, 0, 0, 0.06); /* Sanftere Schatten */
+    --color-shadow-strong: rgba(0, 0, 0, 0.1);
+    --color-shadow-accent: rgba(0, 115, 206, 0.12);
+    --card-radius: 1rem; /* Abgerundete Ecken für Karten */
+    
+    /* Light Mode Gradients - VERBESSERT für sanftere Optik */
+    --gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 30%, #f8fafc 70%, #f3f5f7 100%);
+    --gradient-card: linear-gradient(135deg, #ffffff 0%, #fcfcfd 50%, #fafbfc 100%);
+    --gradient-hero: linear-gradient(135deg, #fafbfc 0%, #f3f5f7 40%, #eef2f5 80%, #f8fafc 100%);
+    --gradient-accent: linear-gradient(135deg, #0073ce 0%, #005a9f 100%);
+    --gradient-surface: linear-gradient(135deg, #ffffff 0%, #fbfcfd 50%, #f8fafc 100%);
+    
+    /* Neue optimierte Light Mode Glassmorphism-Variablen */
+    --glass-bg: rgba(255, 255, 255, 0.92);
+    --glass-border: rgba(255, 255, 255, 0.3);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
+    --glass-blur: blur(20px);
+  }
+
+  .dark {
+    /* Dark Mode Farben - Noch dunkler und eleganter - UNVERÄNDERT */
+    --color-bg-primary: #000000; /* Tiefes Schwarz */
+    --color-bg-secondary: #0a0a0a; /* Sehr dunkles Grau */
+    --color-bg-tertiary: #1a1a1a;
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #e2e8f0;
+    --color-text-muted: #94a3b8;
+    --color-border-primary: #1a1a1a; /* Dunkler Rahmen */
+    --color-border-secondary: #2a2a2a;
+    --color-accent: #ffffff; /* Reines Weiß */
+    --color-accent-hover: #f0f0f0;
+    --color-accent-light: #1e3a8a;
+    --color-accent-text: #000000;
+    --color-shadow: rgba(0, 0, 0, 0.8); /* Sehr dunkler Schatten */
+    --color-shadow-strong: rgba(0, 0, 0, 0.9);
+    --mb-black: #000000; /* Mercedes-Benz Schwarz */
+  }
+  
+  body {
+    @apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300;
+    position: relative;
+    min-height: 100vh;
+    background: var(--gradient-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+    line-height: 1.65; /* Verbesserte Zeilenhöhe für bessere Lesbarkeit */
+    font-size: 15px; /* Optimierte Schriftgröße */
+  }
+
+  .dark body {
+    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
+  }
+
+  /* Enhanced Body Background with Subtle Patterns - VERBESSERT */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      radial-gradient(circle at 25% 25%, rgba(0, 115, 206, 0.015) 0%, transparent 50%),
+      radial-gradient(circle at 75% 75%, rgba(0, 115, 206, 0.01) 0%, transparent 50%),
+      radial-gradient(circle at 50% 10%, rgba(0, 115, 206, 0.008) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .dark body::before {
+    background: 
+      radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
+  }
+
+  /* Navbar Styles - Premium Glassmorphism - VERBESSERT */
+  nav {
+    @apply backdrop-blur-xl border-b transition-all duration-300;
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.95) 0%, 
+      rgba(250, 251, 252, 0.92) 30%, 
+      rgba(248, 250, 252, 0.9) 70%,
+      rgba(255, 255, 255, 0.95) 100%);
+    border-bottom: 1px solid rgba(229, 231, 235, 0.7);
+    backdrop-filter: blur(28px) saturate(200%) brightness(110%);
+    -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%);
+    box-shadow: 
+      0 4px 20px rgba(0, 0, 0, 0.04),
+      0 2px 8px rgba(0, 115, 206, 0.02),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+  
+  .dark nav {
+    background: rgba(0, 0, 0, 0.85);
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 
+      0 8px 32px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  /* Premium Card Styles - VERBESSERT für Light Mode */
+  .card-enhanced {
+    background: var(--gradient-card);
+    border: 1px solid var(--color-border-primary);
+    border-radius: var(--card-radius);
+    box-shadow: 
+      0 2px 12px rgba(0, 0, 0, 0.03),
+      0 1px 4px rgba(0, 115, 206, 0.02),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .card-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--gradient-accent);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .card-enhanced:hover {
+    transform: translateY(-2px);
+    box-shadow: 
+      0 8px 25px rgba(0, 0, 0, 0.06),
+      0 4px 12px rgba(0, 115, 206, 0.04),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+
+  .card-enhanced:hover::before {
+    opacity: 1;
+  }
+
+  .dark .card-enhanced {
+    background: rgba(10, 10, 10, 0.8);
+    border-color: var(--color-border-primary);
+    box-shadow: 0 4px 20px var(--color-shadow);
+  }
+
+  /* Premium Button Styles - VERBESSERT */
+  .btn-enhanced {
+    background: var(--gradient-accent);
+    color: var(--color-accent-text);
+    border: none;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1.75rem;
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: 
+      0 2px 8px rgba(0, 115, 206, 0.2),
+      0 1px 4px rgba(0, 115, 206, 0.1);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
+  }
+
+  .btn-enhanced:hover {
+    transform: translateY(-1px);
+    box-shadow: 
+      0 4px 15px rgba(0, 115, 206, 0.3),
+      0 2px 8px rgba(0, 115, 206, 0.2);
+  }
+
+  .btn-enhanced:hover::before {
+    left: 100%;
+  }
+
+  .btn-enhanced:active {
+    transform: translateY(0);
+  }
+
+  .btn-secondary {
+    background: var(--gradient-surface);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border-primary);
+    box-shadow: 
+      0 1px 6px rgba(0, 0, 0, 0.03),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  }
+
+  .btn-secondary:hover {
+    background: var(--color-bg-secondary);
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+    box-shadow: 
+      0 4px 12px rgba(0, 115, 206, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+
+  /* Enhanced Form Elements - VERBESSERT für bessere Lesbarkeit */
+  .input-enhanced {
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    color: var(--color-text-primary);
+    font-size: 0.9rem;
+    box-shadow: 
+      0 1px 6px rgba(0, 0, 0, 0.02),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    transition: all 0.2s ease;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  .input-enhanced:focus {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 
+      0 4px 12px rgba(0, 115, 206, 0.1),
+      0 0 0 3px rgba(0, 115, 206, 0.05),
+      inset 0 1px 0 rgba(255, 255, 255, 0.95);
+    background: rgba(255, 255, 255, 0.98);
+  }
+
+  .input-enhanced::placeholder {
+    color: var(--color-text-muted);
+    opacity: 0.8;
+  }
+
+  .dark .input-enhanced {
+    background: rgba(10, 10, 10, 0.8);
+    border-color: var(--color-border-primary);
+    color: var(--color-text-primary);
+    box-shadow: 
+      0 2px 8px var(--color-shadow),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  .dark .input-enhanced:focus {
+    border-color: #60a5fa;
+    box-shadow: 
+      0 4px 15px rgba(96, 165, 250, 0.2),
+      0 0 0 3px rgba(96, 165, 250, 0.1);
+  }
+
+  /* Premium Alert Styles */
+  .alert-enhanced {
+    border-radius: 1rem;
+    padding: 1.25rem;
+    border: 1px solid transparent;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
+
+  .alert-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+  }
+
+  .alert-info-enhanced {
+    background: linear-gradient(135deg, 
+      rgba(239, 246, 255, 0.95) 0%, 
+      rgba(219, 234, 254, 0.9) 100%);
+    border-color: rgba(59, 130, 246, 0.2);
+    color: #1e40af;
+  }
+
+  .alert-info-enhanced::before {
+    background: var(--gradient-accent);
+  }
+
+  .alert-success-enhanced {
+    background: linear-gradient(135deg, 
+      rgba(236, 253, 245, 0.95) 0%, 
+      rgba(167, 243, 208, 0.9) 100%);
+    border-color: rgba(16, 185, 129, 0.2);
+    color: #065f46;
+  }
+
+  .alert-success-enhanced::before {
+    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
+  }
+
+  .alert-warning-enhanced {
+    background: linear-gradient(135deg, 
+      rgba(255, 251, 235, 0.95) 0%, 
+      rgba(254, 243, 199, 0.9) 100%);
+    border-color: rgba(251, 191, 36, 0.2);
+    color: #92400e;
+  }
+
+  .alert-warning-enhanced::before {
+    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
+  }
+
+  .alert-error-enhanced {
+    background: linear-gradient(135deg, 
+      rgba(254, 242, 242, 0.95) 0%, 
+      rgba(252, 165, 165, 0.9) 100%);
+    border-color: rgba(239, 68, 68, 0.2);
+    color: #991b1b;
+  }
+
+  .alert-error-enhanced::before {
+    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
+  }
+
+  /* Light Mode Flash Messages - Premium */
+  .flash-message-light {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.95) 0%, 
+      rgba(248, 250, 252, 0.9) 100%);
+    backdrop-filter: blur(32px) saturate(200%) brightness(120%);
+    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(120%);
+    border: 1px solid rgba(226, 232, 240, 0.6);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.1),
+      0 12px 24px rgba(0, 115, 206, 0.05),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    color: var(--color-text-primary);
+  }
+
+  .flash-message-light.success {
+    border-left: 4px solid #10b981;
+    background: linear-gradient(135deg, 
+      rgba(236, 253, 245, 0.95) 0%, 
+      rgba(209, 250, 229, 0.9) 100%);
+  }
+
+  .flash-message-light.error {
+    border-left: 4px solid #ef4444;
+    background: linear-gradient(135deg, 
+      rgba(254, 242, 242, 0.95) 0%, 
+      rgba(252, 165, 165, 0.9) 100%);
+  }
+
+  .flash-message-light.warning {
+    border-left: 4px solid #fbbf24;
+    background: linear-gradient(135deg, 
+      rgba(255, 251, 235, 0.95) 0%, 
+      rgba(254, 243, 199, 0.9) 100%);
+  }
+
+  .flash-message-light.info {
+    border-left: 4px solid #3b82f6;
+    background: linear-gradient(135deg, 
+      rgba(239, 246, 255, 0.95) 0%, 
+      rgba(219, 234, 254, 0.9) 100%);
+  }
+
+  /* Premium Table Styles */
+  .table-enhanced {
+    background: var(--gradient-card);
+    border: 1px solid var(--color-border-primary);
+    border-radius: var(--card-radius);
+    overflow: hidden;
+    box-shadow: 
+      0 4px 20px var(--color-shadow),
+      0 2px 8px rgba(0, 115, 206, 0.04),
+      inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  }
+
+  .table-enhanced th {
+    background: linear-gradient(135deg, 
+      var(--color-bg-secondary) 0%, 
+      var(--color-bg-tertiary) 100%);
+    color: var(--color-text-primary);
+    font-weight: 600;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--color-border-primary);
+    position: relative;
+  }
+
+  .table-enhanced th::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, 
+      transparent 0%, 
+      var(--color-border-secondary) 50%, 
+      transparent 100%);
+  }
+
+  .table-enhanced td {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--color-border-primary);
+    color: var(--color-text-secondary);
+    transition: all 0.2s ease;
+  }
+
+  .table-enhanced tbody tr:hover {
+    background: var(--color-bg-secondary);
+    transform: scale(1.002);
+  }
+
+  .dark .table-enhanced {
+    background: rgba(10, 10, 10, 0.8);
+    border-color: var(--color-border-primary);
+  }
+
+  .dark .table-enhanced th {
+    background: rgba(26, 26, 26, 0.8);
+    color: var(--color-text-primary);
+  }
+
+  .dark .table-enhanced tbody tr:hover {
+    background: rgba(26, 26, 26, 0.6);
+  }
+
+  /* Premium Modal Styles */
+  .modal-enhanced {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.98) 0%, 
+      rgba(248, 250, 252, 0.95) 50%, 
+      rgba(255, 255, 255, 0.98) 100%);
+    backdrop-filter: blur(32px) saturate(220%) brightness(120%);
+    -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(120%);
+    border: 1px solid rgba(226, 232, 240, 0.7);
+    border-radius: 1.5rem;
+    box-shadow: 
+      0 50px 100px rgba(0, 0, 0, 0.15),
+      0 20px 40px rgba(0, 115, 206, 0.08),
+      inset 0 2px 0 rgba(255, 255, 255, 0.9);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .modal-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, 
+      transparent 0%, 
+      rgba(226, 232, 240, 0.8) 50%, 
+      transparent 100%);
+  }
+
+  .dark .modal-enhanced {
+    background: rgba(0, 0, 0, 0.95);
+    border-color: rgba(42, 42, 42, 0.7);
+    box-shadow: 
+      0 50px 100px rgba(0, 0, 0, 0.5),
+      inset 0 2px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  /* Enhanced Status Badges */
+  .status-badge-enhanced {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .status-badge-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.5s ease;
+  }
+
+  .status-badge-enhanced:hover::before {
+    left: 100%;
+  }
+
+  .status-online-enhanced {
+    background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
+    color: #065f46;
+    border-color: rgba(16, 185, 129, 0.3);
+  }
+
+  .status-offline-enhanced {
+    background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%);
+    color: #991b1b;
+    border-color: rgba(239, 68, 68, 0.3);
+  }
+
+  .status-printing-enhanced {
+    background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
+    color: #1e40af;
+    border-color: rgba(59, 130, 246, 0.3);
+  }
+
+  /* Dark Mode Toggle - Premium Design */
+  .dark-mode-toggle-new {
+    position: relative;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    padding: 0.625rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, 
+      rgba(248, 250, 252, 0.9) 0%, 
+      rgba(241, 245, 249, 0.8) 100%);
+    border: 1px solid rgba(226, 232, 240, 0.7);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.06),
+      0 2px 4px rgba(0, 115, 206, 0.04),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    color: var(--color-text-secondary);
+    z-index: 100;
+  }
+
+  .dark-mode-toggle-new:hover {
+    transform: translateY(-2px) scale(1.05);
+    background: linear-gradient(135deg, 
+      rgba(248, 250, 252, 0.95) 0%, 
+      rgba(241, 245, 249, 0.85) 100%);
+    box-shadow: 
+      0 8px 20px rgba(0, 0, 0, 0.1),
+      0 4px 8px rgba(0, 115, 206, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+
+  .dark-mode-toggle-new:active {
+    transform: translateY(-1px) scale(0.98);
+    transition: transform 0.1s;
+  }
+
+  .dark .dark-mode-toggle-new {
+    background: rgba(10, 10, 10, 0.8);
+    border: 1px solid rgba(42, 42, 42, 0.6);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    color: var(--color-text-secondary);
+  }
+
+  .dark .dark-mode-toggle-new:hover {
+    background: rgba(10, 10, 10, 0.9);
+    box-shadow: 
+      0 8px 20px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  }
+
+  /* Icon-Animation für Dark Mode Toggle */
+  .dark-mode-toggle-new .sun-icon,
+  .dark-mode-toggle-new .moon-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .dark-mode-toggle-new .sun-icon:not(.hidden) {
+    animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+  }
+
+  .dark-mode-toggle-new .moon-icon:not(.hidden) {
+    animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+  }
+
+  @keyframes icon-appear {
+    0% {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1) rotate(0);
+    }
+  }
+
+  .dark .sun-icon { display: none; }
+  .dark .moon-icon { display: block; }
+  .sun-icon { display: block; }
+  .moon-icon { display: none; }
+
+  /* User Menu Button - Premium Design */
+  .user-menu-button-new {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 0.75rem;
+    padding: 0.5rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, 
+      rgba(248, 250, 252, 0.8) 0%, 
+      rgba(241, 245, 249, 0.7) 100%);
+    border: 1px solid rgba(226, 232, 240, 0.6);
+    box-shadow: 
+      0 2px 8px rgba(0, 0, 0, 0.05),
+      inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  }
+
+  .user-menu-button-new:hover {
+    transform: translateY(-1px);
+    background: linear-gradient(135deg, 
+      rgba(248, 250, 252, 0.9) 0%, 
+      rgba(241, 245, 249, 0.8) 100%);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.08),
+      0 2px 4px rgba(0, 115, 206, 0.04),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  }
+
+  .dark .user-menu-button-new {
+    background: rgba(10, 10, 10, 0.7);
+    border-color: rgba(42, 42, 42, 0.6);
+    box-shadow: 
+      0 2px 8px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  }
+
+  .dark .user-menu-button-new:hover {
+    background: rgba(10, 10, 10, 0.8);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  /* Enhanced Hover Effects */
+  .hover-lift-enhanced {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .hover-lift-enhanced:hover {
+    transform: translateY(-3px) scale(1.01);
+    box-shadow: 
+      0 12px 30px var(--color-shadow-strong),
+      0 6px 15px var(--color-shadow-accent);
+  }
+
+  .dark .hover-lift-enhanced:hover {
+    box-shadow: 0 12px 30px var(--color-shadow);
+  }
+
+  /* Smooth Scrollbar for Light Mode */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, 
+      var(--color-border-secondary) 0%, 
+      var(--color-border-primary) 100%);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, 
+      var(--color-accent) 0%, 
+      var(--color-accent-hover) 100%);
+  }
+
+  .dark ::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    background: var(--color-border-primary);
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: #60a5fa;
+  }
+
+  /* Loading States */
+  .loading-enhanced {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .loading-enhanced::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+      transparent, 
+      rgba(0, 115, 206, 0.1), 
+      transparent);
+    animation: loading-shimmer 2s infinite;
+  }
+
+  @keyframes loading-shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
+  }
+
+  /* Focus States for Accessibility */
+  .focus-enhanced:focus {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    box-shadow: 
+      0 0 0 4px rgba(0, 115, 206, 0.15),
+      0 4px 12px var(--color-shadow-accent);
+  }
+
+  .dark .focus-enhanced:focus {
+    outline-color: #60a5fa;
+    box-shadow: 
+      0 0 0 4px rgba(96, 165, 250, 0.15),
+      0 4px 12px rgba(96, 165, 250, 0.2);
+  }
+
+  /* Responsive Design Enhancements */
+  @media (max-width: 768px) {
+    .card-enhanced {
+      padding: 1rem;
+      border-radius: 0.75rem;
+    }
+    
+    .btn-enhanced {
+      padding: 0.75rem 1.5rem;
+      font-size: 0.8rem;
+    }
+    
+    .modal-enhanced {
+      border-radius: 1rem;
+      margin: 1rem;
+    }
+    
+    .dark-mode-toggle-new {
+      padding: 0.5rem;
+    }
+  }
+
+  /* Reduced Motion Support */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  /* High Contrast Mode Support */
+  @media (prefers-contrast: high) {
+    :root {
+      --color-shadow: rgba(0, 0, 0, 0.2);
+      --color-shadow-strong: rgba(0, 0, 0, 0.3);
+      --color-border-primary: #000000;
+    }
+    
+    .dark {
+      --color-border-primary: #ffffff;
+    }
+  }
+}
+
+/* Admin Panel spezifische Styles */
+@layer components {
+  /* Dark Mode Styles für Admin Panel */
+  .dark .bg-dark-card {
+    @apply bg-dark-surface transition-colors;
+  }
+
+  /* Alternative direkte Definition ohne Zirkularität */
+  .bg-dark-surface {
+    background-color: #1e293b;
+  }
+
+  /* Übergangseffekt für alle Komponenten */
+  .transition-all-colors {
+    @apply transition-colors duration-300;
+  }
+  
+  /* Admin Panel Container */
+  .admin-container {
+    @apply max-w-7xl mx-auto p-4 md:p-8;
+  }
+  
+  /* Admin Stats Cards */
+  .admin-stats {
+    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8;
+  }
+  
+  .stat-card {
+    @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 {
+    @apply absolute top-4 right-4 opacity-15 text-4xl;
+  }
+  
+  .stat-title {
+    @apply text-sm text-slate-500 dark:text-slate-400 mb-2 font-medium uppercase;
+  }
+  
+  .stat-value {
+    @apply text-2xl font-bold text-slate-900 dark:text-white mb-1;
+  }
+  
+  .stat-desc {
+    @apply text-sm text-slate-500 dark:text-slate-400;
+  }
+  
+  /* Navigation Tabs */
+  .nav-tabs {
+    @apply flex border-b border-gray-200 dark:border-slate-700/30 mb-4 overflow-x-auto;
+  }
+  
+  .nav-tab {
+    @apply py-4 px-6 text-slate-600 dark:text-slate-300 border-b-2 border-transparent cursor-pointer transition-all duration-200 whitespace-nowrap hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50;
+  }
+  
+  .nav-tab.active {
+    @apply text-slate-900 dark:text-white border-b-2 border-black dark:border-white font-medium;
+  }
+  
+  /* Tab Content */
+  .tab-content {
+    @apply mt-8;
+  }
+  
+  .tab-pane {
+    @apply hidden;
+  }
+  
+  .tab-pane.active {
+    @apply block;
+  }
+  
+  /* Formulare für Admin Panel */
+  .form-group {
+    @apply mb-4;
+  }
+  
+  .form-label {
+    @apply block mb-2 text-sm font-medium text-slate-700 dark:text-slate-300;
+  }
+  
+  .form-input,
+  .form-select,
+  .form-textarea {
+    @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 */
+  .admin-table {
+    @apply min-w-full divide-y divide-gray-200 dark:divide-slate-700;
+  }
+  
+  .admin-table thead {
+    @apply bg-slate-50 dark:bg-slate-800;
+  }
+  
+  .admin-table th {
+    @apply px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider;
+  }
+  
+  .admin-table tbody {
+    @apply bg-white dark:bg-dark-surface divide-y divide-gray-200 dark:divide-slate-700;
+  }
+  
+  .admin-table tr {
+    @apply hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors;
+  }
+  
+  .admin-table td {
+    @apply px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white;
+  }
+  
+  /* Status Badges */
+  .badge {
+    @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
+  }
+  
+  .badge-success {
+    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
+  }
+  
+  .badge-error {
+    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
+  }
+  
+  .badge-warning {
+    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
+  }
+  
+  .badge-info {
+    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
+  }
+  
+  /* Drucker-Karten */
+  .printer-card {
+    @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 {
+    @apply flex justify-between items-center mb-4;
+  }
+  
+  .printer-name {
+    @apply text-xl font-bold text-slate-900 dark:text-white;
+  }
+  
+  .printer-actions {
+    @apply flex space-x-2;
+  }
+  
+  .printer-info {
+    @apply grid grid-cols-2 gap-4 mb-4;
+  }
+  
+  .printer-status {
+    @apply flex items-center mt-4;
+  }
+  
+  /* Status Indikatoren */
+  .status-indicator {
+    @apply w-3 h-3 rounded-full mr-2;
+  }
+  
+  .status-running {
+    @apply bg-green-500;
+    animation: pulse 2s infinite;
+  }
+  
+  .status-stopped {
+    @apply bg-red-500;
+  }
+  
+  /* Pulse Animation */
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.5;
+      transform: scale(1.1);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  /* Log-Einträge */
+  .log-entry {
+    @apply p-3 border-l-4 mb-2 rounded-r-lg bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors;
+  }
+  
+  .log-debug {
+    @apply border-gray-400 dark:border-gray-500;
+  }
+  
+  .log-info {
+    @apply border-blue-400 dark:border-blue-500;
+  }
+  
+  .log-warning {
+    @apply border-yellow-400 dark:border-yellow-500;
+  }
+  
+  .log-error {
+    @apply border-red-400 dark:border-red-500;
+  }
+  
+  .log-critical {
+    @apply border-purple-400 dark:border-purple-500;
+  }
+  
+  /* Scheduler Status */
+  .scheduler-status {
+    @apply flex items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 shadow-md;
+  }
+  
+  /* Fortschrittsbalken */
+  .progress-bar {
+    @apply w-full h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden;
+  }
+  
+  .progress-bar-fill {
+    @apply h-full transition-all duration-300;
+  }
+  
+  .progress-bar-fill-blue {
+    @apply bg-blue-500 dark:bg-blue-600;
+  }
+  
+  .progress-bar-fill-green {
+    @apply bg-green-500 dark:bg-green-600;
+  }
+  
+  .progress-bar-fill-purple {
+    @apply bg-purple-500 dark:bg-purple-600;
+  }
+  
+  /* Benachrichtigungen */
+  .notification {
+    @apply fixed top-4 right-4 max-w-md p-4 rounded-2xl shadow-2xl transform translate-x-full opacity-0 transition-all duration-500 z-50;
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 
+      0 32px 64px rgba(0, 0, 0, 0.25),
+      0 12px 24px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+    animation: notification-slide-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .dark .notification {
+    background: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
+    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 
+      0 32px 64px rgba(0, 0, 0, 0.6),
+      0 12px 24px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+  
+  .notification.show {
+    @apply translate-x-0 opacity-100;
+  }
+
+  .notification:hover {
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 
+      0 40px 80px rgba(0, 0, 0, 0.3),
+      0 16px 32px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5),
+      0 0 0 1px rgba(255, 255, 255, 0.15);
+  }
+
+  .dark .notification:hover {
+    box-shadow: 
+      0 40px 80px rgba(0, 0, 0, 0.7),
+      0 16px 32px rgba(0, 0, 0, 0.5),
+      inset 0 1px 0 rgba(255, 255, 255, 0.3),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+  
+  .notification-success {
+    @apply text-green-100;
+    background: linear-gradient(135deg, 
+      rgba(34, 197, 94, 0.25) 0%, 
+      rgba(134, 239, 172, 0.18) 50%, 
+      rgba(34, 197, 94, 0.12) 100%);
+    border: 1px solid rgba(34, 197, 94, 0.4);
+    box-shadow: 
+      0 32px 64px rgba(34, 197, 94, 0.2),
+      0 12px 24px rgba(34, 197, 94, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(34, 197, 94, 0.3);
+  }
+  
+  .notification-error {
+    @apply text-red-100;
+    background: linear-gradient(135deg, 
+      rgba(239, 68, 68, 0.25) 0%, 
+      rgba(252, 165, 165, 0.18) 50%, 
+      rgba(239, 68, 68, 0.12) 100%);
+    border: 1px solid rgba(239, 68, 68, 0.4);
+    box-shadow: 
+      0 32px 64px rgba(239, 68, 68, 0.2),
+      0 12px 24px rgba(239, 68, 68, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(239, 68, 68, 0.3);
+  }
+  
+  .notification-warning {
+    @apply text-yellow-100;
+    background: linear-gradient(135deg, 
+      rgba(245, 158, 11, 0.25) 0%, 
+      rgba(252, 211, 77, 0.18) 50%, 
+      rgba(245, 158, 11, 0.12) 100%);
+    border: 1px solid rgba(245, 158, 11, 0.4);
+    box-shadow: 
+      0 32px 64px rgba(245, 158, 11, 0.2),
+      0 12px 24px rgba(245, 158, 11, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(245, 158, 11, 0.3);
+  }
+  
+  .notification-info {
+    @apply text-blue-100;
+    background: linear-gradient(135deg, 
+      rgba(59, 130, 246, 0.25) 0%, 
+      rgba(147, 197, 253, 0.18) 50%, 
+      rgba(59, 130, 246, 0.12) 100%);
+    border: 1px solid rgba(59, 130, 246, 0.4);
+    box-shadow: 
+      0 32px 64px rgba(59, 130, 246, 0.2),
+      0 12px 24px rgba(59, 130, 246, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(59, 130, 246, 0.3);
+  }
+
+  /* Toast-Benachrichtigungen - Einheitlich */
+  .toast-notification {
+    @apply fixed z-50 p-4 rounded-2xl shadow-2xl transform transition-all duration-500 text-sm font-medium;
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 
+      0 32px 64px rgba(0, 0, 0, 0.25),
+      0 12px 24px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+
+  .dark .toast-notification {
+    background: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
+    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 
+      0 32px 64px rgba(0, 0, 0, 0.6),
+      0 12px 24px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  /* Alert-Benachrichtigungen - Verbessert */
+  .alert {
+    @apply p-6 rounded-2xl border mb-6 shadow-2xl;
+    background: rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
+    -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.15),
+      0 8px 16px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.3),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+    animation: alert-fade-in 0.5s ease-out;
+  }
+
+  .dark .alert {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
+    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.4),
+      0 8px 16px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.15),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+  
+  .alert-success {
+    @apply text-green-900 dark:text-green-100;
+    background: linear-gradient(135deg, 
+      rgba(34, 197, 94, 0.15) 0%, 
+      rgba(134, 239, 172, 0.1) 50%, 
+      rgba(34, 197, 94, 0.08) 100%);
+    border: 1px solid rgba(34, 197, 94, 0.3);
+  }
+  
+  .alert-error {
+    @apply text-red-900 dark:text-red-100;
+    background: linear-gradient(135deg, 
+      rgba(239, 68, 68, 0.15) 0%, 
+      rgba(252, 165, 165, 0.1) 50%, 
+      rgba(239, 68, 68, 0.08) 100%);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+  }
+  
+  .alert-warning {
+    @apply text-yellow-900 dark:text-yellow-100;
+    background: linear-gradient(135deg, 
+      rgba(245, 158, 11, 0.15) 0%, 
+      rgba(252, 211, 77, 0.1) 50%, 
+      rgba(245, 158, 11, 0.08) 100%);
+    border: 1px solid rgba(245, 158, 11, 0.3);
+  }
+  
+  .alert-info {
+    @apply text-blue-900 dark:text-blue-100;
+    background: linear-gradient(135deg, 
+      rgba(59, 130, 246, 0.15) 0%, 
+      rgba(147, 197, 253, 0.1) 50%, 
+      rgba(59, 130, 246, 0.08) 100%);
+    border: 1px solid rgba(59, 130, 246, 0.3);
+  }
+
+  /* Browser-Notification-Container */
+  .browser-notification {
+    @apply fixed top-4 left-4 max-w-sm p-4 rounded-2xl shadow-2xl z-50;
+    background: rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 
+      0 32px 64px rgba(0, 0, 0, 0.25),
+      0 12px 24px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+    animation: notification-slide-left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .dark .browser-notification {
+    background: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
+    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 
+      0 32px 64px rgba(0, 0, 0, 0.6),
+      0 12px 24px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  /* Notification-Animationen */
+  @keyframes notification-slide-in {
+    0% {
+      opacity: 0;
+      transform: translateX(100%) translateY(-20px) scale(0.9);
+      backdrop-filter: blur(0px);
+    }
+    50% {
+      opacity: 0.8;
+      transform: translateX(20px) translateY(-10px) scale(1.05);
+      backdrop-filter: blur(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0) translateY(0) scale(1);
+      backdrop-filter: blur(40px);
+    }
+  }
+
+  @keyframes notification-slide-out {
+    0% {
+      opacity: 1;
+      transform: translateX(0) translateY(0) scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(100%) translateY(-20px) scale(0.9);
+    }
+  }
+
+  @keyframes notification-slide-left {
+    0% {
+      opacity: 0;
+      transform: translateX(-100%) translateY(-20px) scale(0.9);
+      backdrop-filter: blur(0px);
+    }
+    50% {
+      opacity: 0.8;
+      transform: translateX(-20px) translateY(-10px) scale(1.05);
+      backdrop-filter: blur(20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0) translateY(0) scale(1);
+      backdrop-filter: blur(40px);
+    }
+  }
+
+  @keyframes alert-fade-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-20px) scale(0.95);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  .notification.hiding {
+    animation: notification-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  /* Notification-Icons mit Glassmorphism */
+  .notification-icon {
+    @apply flex items-center justify-center w-8 h-8 rounded-full mr-3 flex-shrink-0;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 8px 16px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  }
+
+  .notification-content {
+    @apply flex-1;
+  }
+
+  .notification-title {
+    @apply font-semibold text-sm mb-1;
+  }
+
+  .notification-message {
+    @apply text-sm opacity-90;
+  }
+
+  .notification-close {
+    @apply ml-3 p-1 rounded-lg opacity-70 hover:opacity-100 transition-opacity;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .notification-close:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.1);
+  }
+
+  /* Multiple Notifications Container */
+  .notifications-container {
+    @apply fixed top-4 right-4 z-50 space-y-3 max-w-md;
+  }
+
+  .notifications-container-left {
+    @apply fixed top-4 left-4 z-50 space-y-3 max-w-sm;
+  }
+
+  /* Flash-Message-Verbesserungen - Vereinheitlicht */
+  .flash-message-light {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.95) 0%, 
+      rgba(248, 250, 252, 0.9) 100%);
+    backdrop-filter: blur(32px) saturate(200%) brightness(120%);
+    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(120%);
+    border: 1px solid rgba(226, 232, 240, 0.6);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.1),
+      0 12px 24px rgba(0, 115, 206, 0.05),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    color: var(--color-text-primary);
+  }
+
+  .flash-message-light.success {
+    border-left: 4px solid #10b981;
+    background: linear-gradient(135deg, 
+      rgba(236, 253, 245, 0.95) 0%, 
+      rgba(209, 250, 229, 0.9) 100%);
+  }
+
+  .flash-message-light.error {
+    border-left: 4px solid #ef4444;
+    background: linear-gradient(135deg, 
+      rgba(254, 242, 242, 0.95) 0%, 
+      rgba(252, 165, 165, 0.9) 100%);
+  }
+
+  .flash-message-light.warning {
+    border-left: 4px solid #fbbf24;
+    background: linear-gradient(135deg, 
+      rgba(255, 251, 235, 0.95) 0%, 
+      rgba(254, 243, 199, 0.9) 100%);
+  }
+
+  .flash-message-light.info {
+    border-left: 4px solid #3b82f6;
+    background: linear-gradient(135deg, 
+      rgba(239, 246, 255, 0.95) 0%, 
+      rgba(219, 234, 254, 0.9) 100%);
+  }
+
+  /* Premium Table Styles */
+  .table-enhanced {
+    background: var(--gradient-card);
+    border: 1px solid var(--color-border-primary);
+    border-radius: var(--card-radius);
+    overflow: hidden;
+    box-shadow: 
+      0 4px 20px var(--color-shadow),
+      0 2px 8px rgba(0, 115, 206, 0.04),
+      inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  }
+
+  .table-enhanced th {
+    background: linear-gradient(135deg, 
+      var(--color-bg-secondary) 0%, 
+      var(--color-bg-tertiary) 100%);
+    color: var(--color-text-primary);
+    font-weight: 600;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--color-border-primary);
+    position: relative;
+  }
+
+  .table-enhanced th::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, 
+      transparent 0%, 
+      var(--color-border-secondary) 50%, 
+      transparent 100%);
+  }
+
+  .table-enhanced td {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--color-border-primary);
+    color: var(--color-text-secondary);
+    transition: all 0.2s ease;
+  }
+
+  .table-enhanced tbody tr:hover {
+    background: var(--color-bg-secondary);
+    transform: scale(1.002);
+  }
+
+  .dark .table-enhanced {
+    background: rgba(10, 10, 10, 0.8);
+    border-color: var(--color-border-primary);
+  }
+
+  .dark .table-enhanced th {
+    background: rgba(26, 26, 26, 0.8);
+    color: var(--color-text-primary);
+  }
+
+  .dark .table-enhanced tbody tr:hover {
+    background: rgba(26, 26, 26, 0.6);
+  }
+
+  /* Premium Modal Styles */
+  .modal-enhanced {
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.98) 0%, 
+      rgba(248, 250, 252, 0.95) 50%, 
+      rgba(255, 255, 255, 0.98) 100%);
+    backdrop-filter: blur(32px) saturate(220%) brightness(120%);
+    -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(120%);
+    border: 1px solid rgba(226, 232, 240, 0.7);
+    border-radius: 1.5rem;
+    box-shadow: 
+      0 50px 100px rgba(0, 0, 0, 0.15),
+      0 20px 40px rgba(0, 115, 206, 0.08),
+      inset 0 2px 0 rgba(255, 255, 255, 0.9);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .modal-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, 
+      transparent 0%, 
+      rgba(226, 232, 240, 0.8) 50%, 
+      transparent 100%);
+  }
+
+  .dark .modal-enhanced {
+    background: rgba(0, 0, 0, 0.95);
+    border-color: rgba(42, 42, 42, 0.7);
+    box-shadow: 
+      0 50px 100px rgba(0, 0, 0, 0.5),
+      inset 0 2px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  /* Enhanced Status Badges */
+  .status-badge-enhanced {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .status-badge-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.5s ease;
+  }
+
+  .status-badge-enhanced:hover::before {
+    left: 100%;
+  }
+
+  .status-online-enhanced {
+    background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
+    color: #065f46;
+    border-color: rgba(16, 185, 129, 0.3);
+  }
+
+  .status-offline-enhanced {
+    background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%);
+    color: #991b1b;
+    border-color: rgba(239, 68, 68, 0.3);
+  }
+
+  .status-printing-enhanced {
+    background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
+    color: #1e40af;
+    border-color: rgba(59, 130, 246, 0.3);
+  }
+
+  /* Dark Mode Toggle - Premium Design */
+  .dark-mode-toggle-new {
+    position: relative;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    padding: 0.625rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, 
+      rgba(248, 250, 252, 0.9) 0%, 
+      rgba(241, 245, 249, 0.8) 100%);
+    border: 1px solid rgba(226, 232, 240, 0.7);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.06),
+      0 2px 4px rgba(0, 115, 206, 0.04),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    color: var(--color-text-secondary);
+    z-index: 100;
+  }
+
+  .dark-mode-toggle-new:hover {
+    transform: translateY(-2px) scale(1.05);
+    background: linear-gradient(135deg, 
+      rgba(248, 250, 252, 0.95) 0%, 
+      rgba(241, 245, 249, 0.85) 100%);
+    box-shadow: 
+      0 8px 20px rgba(0, 0, 0, 0.1),
+      0 4px 8px rgba(0, 115, 206, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+
+  .dark-mode-toggle-new:active {
+    transform: translateY(-1px) scale(0.98);
+    transition: transform 0.1s;
+  }
+
+  .dark .dark-mode-toggle-new {
+    background: rgba(10, 10, 10, 0.8);
+    border: 1px solid rgba(42, 42, 42, 0.6);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    color: var(--color-text-secondary);
+  }
+
+  .dark .dark-mode-toggle-new:hover {
+    background: rgba(10, 10, 10, 0.9);
+    box-shadow: 
+      0 8px 20px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  }
+
+  /* Icon-Animation für Dark Mode Toggle */
+  .dark-mode-toggle-new .sun-icon,
+  .dark-mode-toggle-new .moon-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .dark-mode-toggle-new .sun-icon:not(.hidden) {
+    animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+  }
+
+  .dark-mode-toggle-new .moon-icon:not(.hidden) {
+    animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+  }
+
+  @keyframes icon-appear {
+    0% {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1) rotate(0);
+    }
+  }
+
+  .dark .sun-icon { display: none; }
+  .dark .moon-icon { display: block; }
+  .sun-icon { display: block; }
+  .moon-icon { display: none; }
+
+  /* User Menu Button - Premium Design */
+  .user-menu-button-new {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 0.75rem;
+    padding: 0.5rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, 
+      rgba(248, 250, 252, 0.8) 0%, 
+      rgba(241, 245, 249, 0.7) 100%);
+    border: 1px solid rgba(226, 232, 240, 0.6);
+    box-shadow: 
+      0 2px 8px rgba(0, 0, 0, 0.05),
+      inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  }
+
+  .user-menu-button-new:hover {
+    transform: translateY(-1px);
+    background: linear-gradient(135deg, 
+      rgba(248, 250, 252, 0.9) 0%, 
+      rgba(241, 245, 249, 0.8) 100%);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.08),
+      0 2px 4px rgba(0, 115, 206, 0.04),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  }
+
+  .dark .user-menu-button-new {
+    background: rgba(10, 10, 10, 0.7);
+    border-color: rgba(42, 42, 42, 0.6);
+    box-shadow: 
+      0 2px 8px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  }
+
+  .dark .user-menu-button-new:hover {
+    background: rgba(10, 10, 10, 0.8);
+    box-shadow: 
+      0 4px 12px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  /* Enhanced Hover Effects */
+  .hover-lift-enhanced {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .hover-lift-enhanced:hover {
+    transform: translateY(-3px) scale(1.01);
+    box-shadow: 
+      0 12px 30px var(--color-shadow-strong),
+      0 6px 15px var(--color-shadow-accent);
+  }
+
+  .dark .hover-lift-enhanced:hover {
+    box-shadow: 0 12px 30px var(--color-shadow);
+  }
+
+  /* Smooth Scrollbar for Light Mode */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, 
+      var(--color-border-secondary) 0%, 
+      var(--color-border-primary) 100%);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, 
+      var(--color-accent) 0%, 
+      var(--color-accent-hover) 100%);
+  }
+
+  .dark ::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    background: var(--color-border-primary);
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: #60a5fa;
+  }
+
+  /* Loading States */
+  .loading-enhanced {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .loading-enhanced::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, 
+      transparent, 
+      rgba(0, 115, 206, 0.1), 
+      transparent);
+    animation: loading-shimmer 2s infinite;
+  }
+
+  @keyframes loading-shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
+  }
+
+  /* Focus States for Accessibility */
+  .focus-enhanced:focus {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    box-shadow: 
+      0 0 0 4px rgba(0, 115, 206, 0.15),
+      0 4px 12px var(--color-shadow-accent);
+  }
+
+  .dark .focus-enhanced:focus {
+    outline-color: #60a5fa;
+    box-shadow: 
+      0 0 0 4px rgba(96, 165, 250, 0.15),
+      0 4px 12px rgba(96, 165, 250, 0.2);
+  }
+
+  /* Responsive Design Enhancements */
+  @media (max-width: 768px) {
+    .card-enhanced {
+      padding: 1rem;
+      border-radius: 0.75rem;
+    }
+    
+    .btn-enhanced {
+      padding: 0.75rem 1.5rem;
+      font-size: 0.8rem;
+    }
+    
+    .modal-enhanced {
+      border-radius: 1rem;
+      margin: 1rem;
+    }
+    
+    .dark-mode-toggle-new {
+      padding: 0.5rem;
+    }
+  }
+
+  /* Reduced Motion Support */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  /* High Contrast Mode Support */
+  @media (prefers-contrast: high) {
+    :root {
+      --color-shadow: rgba(0, 0, 0, 0.2);
+      --color-shadow-strong: rgba(0, 0, 0, 0.3);
+      --color-border-primary: #000000;
+    }
+    
+    .dark {
+      --color-border-primary: #ffffff;
+    }
+  }
+}
+
+/* Glassmorphism Flash Messages */
+.flash-message {
+  @apply fixed top-4 right-4 px-6 py-4 rounded-2xl text-sm font-medium shadow-2xl transform transition-all duration-500 z-50 border;
+  /* Verstärkter Glassmorphism-Effekt */
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 32px 64px rgba(0, 0, 0, 0.25),
+    0 12px 24px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  animation: flash-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark .flash-message {
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 
+    0 32px 64px rgba(0, 0, 0, 0.6),
+    0 12px 24px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.flash-message:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 
+    0 40px 80px rgba(0, 0, 0, 0.3),
+    0 16px 32px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.dark .flash-message:hover {
+  box-shadow: 
+    0 40px 80px rgba(0, 0, 0, 0.7),
+    0 16px 32px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.flash-message.info {
+  @apply text-blue-100;
+  background: linear-gradient(135deg, 
+    rgba(59, 130, 246, 0.2) 0%, 
+    rgba(147, 197, 253, 0.15) 50%, 
+    rgba(59, 130, 246, 0.1) 100%);
+  border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.flash-message.success {
+  @apply text-green-100;
+  background: linear-gradient(135deg, 
+    rgba(34, 197, 94, 0.2) 0%, 
+    rgba(134, 239, 172, 0.15) 50%, 
+    rgba(34, 197, 94, 0.1) 100%);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+}
+
+.flash-message.warning {
+  @apply text-yellow-100;
+  background: linear-gradient(135deg, 
+    rgba(245, 158, 11, 0.2) 0%, 
+    rgba(252, 211, 77, 0.15) 50%, 
+    rgba(245, 158, 11, 0.1) 100%);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+.flash-message.error {
+  @apply text-red-100;
+  background: linear-gradient(135deg, 
+    rgba(239, 68, 68, 0.2) 0%, 
+    rgba(252, 165, 165, 0.15) 50%, 
+    rgba(239, 68, 68, 0.1) 100%);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+/* Flash Message Animation */
+@keyframes flash-slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(100%) translateY(-20px) scale(0.9);
+    backdrop-filter: blur(0px);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translateX(20px) translateY(-10px) scale(1.05);
+    backdrop-filter: blur(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) translateY(0) scale(1);
+    backdrop-filter: blur(40px);
+  }
+}
+
+@keyframes flash-slide-out {
+  0% {
+    opacity: 1;
+    transform: translateX(0) translateY(0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%) translateY(-20px) scale(0.9);
+  }
+}
+
+.flash-message.hiding {
+  animation: flash-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* Do Not Disturb System Styles */
+.dnd-toggle {
+  @apply relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
+  background: rgba(156, 163, 175, 0.3);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(156, 163, 175, 0.2);
+}
+
+.dnd-toggle.active {
+  background: rgba(239, 68, 68, 0.3);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+}
+
+.dnd-toggle-slider {
+  @apply inline-block h-4 w-4 rounded-full shadow-lg transform transition-transform duration-300;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 4px 8px rgba(0, 0, 0, 0.2),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+  margin: 0.125rem;
+}
+
+.dnd-toggle.active .dnd-toggle-slider {
+  transform: translateX(1.25rem);
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 
+    0 6px 12px rgba(239, 68, 68, 0.3),
+    0 3px 6px rgba(239, 68, 68, 0.2);
+}
+
+.dnd-indicator {
+  @apply fixed top-4 left-4 z-50 flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300;
+  background: rgba(239, 68, 68, 0.1);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: rgb(239, 68, 68);
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+.dnd-indicator.active {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.dnd-modal {
+  @apply fixed inset-0 z-50 flex items-center justify-center p-4;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.dnd-modal-content {
+  @apply w-full max-w-md rounded-2xl p-6 shadow-2xl transform transition-all;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(40px) saturate(200%) brightness(120%);
+  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(120%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 25px 50px rgba(0, 0, 0, 0.25),
+    0 8px 16px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.dark .dnd-modal-content {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(40px) saturate(180%) brightness(110%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(110%);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 
+    0 25px 50px rgba(0, 0, 0, 0.6),
+    0 8px 16px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+/* DND Flash Message Override */
+.flash-message.dnd-suppressed {
+  animation: flash-fade-in 0.3s ease-out;
+  opacity: 0.3;
+  transform: scale(0.95);
+  pointer-events: none;
+}
+
+@keyframes flash-fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 0.3;
+    transform: scale(0.95);
+  }
+}
+
+/* Notification Counter */
+.dnd-counter {
+  @apply absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold;
+  background: rgba(239, 68, 68, 0.9);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  animation: dnd-counter-bounce 0.5s ease-out;
+}
+
+@keyframes dnd-counter-bounce {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Mercedes Background Pattern */
+.mercedes-background::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.03' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: repeat;
+  background-size: 120px 120px;
+  pointer-events: none;
+  opacity: 0.03;
+  transition: opacity 0.3s ease;
+}
+
+.dark .mercedes-background::before {
+  opacity: 0.015; /* Sehr subtil für eleganten Dark Mode */
+  filter: invert(1) brightness(0.3);
+  background-size: 150px 150px; /* Größere Sterne für bessere Sichtbarkeit */
+}
+
+/* Monochrome Button Styles */
+@layer components {
+  /* Buttons mit verstärktem Glassmorphism */
+  .btn-primary {
+    @apply 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-2xl hover:-translate-y-0.5;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 
+      0 20px 40px rgba(0, 0, 0, 0.3),
+      0 8px 16px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+
+  .btn-primary:hover {
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(25px) saturate(180%) brightness(120%);
+    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.4),
+      0 10px 20px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  }
+
+  .dark .btn-primary {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 
+      0 20px 40px rgba(0, 0, 0, 0.2),
+      0 8px 16px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.8),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
+  }
+
+  .dark .btn-primary:hover {
+    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.3),
+      0 10px 20px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  }
+  
+  .btn-secondary {
+    @apply text-slate-900 dark:text-white 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-2xl hover:-translate-y-0.5;
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    box-shadow: 
+      0 20px 40px rgba(0, 0, 0, 0.15),
+      0 8px 16px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5),
+      0 0 0 1px rgba(255, 255, 255, 0.2);
+  }
+
+  .btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(25px) saturate(180%) brightness(120%);
+    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.2),
+      0 10px 20px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  }
+
+  .dark .btn-secondary {
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 
+      0 20px 40px rgba(0, 0, 0, 0.3),
+      0 8px 16px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+
+  .dark .btn-secondary:hover {
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.4),
+      0 10px 20px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  }
+  
+  .btn-outline {
+    @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 - Verstärkt */
+  .glass-card {
+    @apply rounded-xl p-6 shadow-2xl transition-all duration-300;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
+    -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.15),
+      0 8px 16px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.3),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+    border-radius: var(--card-radius);
+  }
+
+  .dark .glass-card {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
+    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.4),
+      0 8px 16px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.15),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+  
+  /* Dashboard Cards mit verstärktem Glassmorphism */
+  .dashboard-card {
+    @apply rounded-xl p-6 shadow-2xl transition-all duration-300 hover:-translate-y-1;
+    background: rgba(255, 255, 255, 0.12);
+    backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%);
+    -webkit-backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.15),
+      0 8px 16px rgba(0, 0, 0, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.25),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+    border-radius: var(--card-radius);
+  }
+
+  .dark .dashboard-card {
+    background: rgba(0, 0, 0, 0.35);
+    backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%);
+    -webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.5),
+      0 8px 16px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.12),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+  
+  /* Navigation Styles */
+  .nav-link {
+    @apply flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:shadow-md;
+  }
+  
+  .nav-link.active {
+    @apply text-slate-900 dark:text-white bg-slate-100 dark:bg-black shadow-sm;
+  }
+
+  /* Verbesserte Navbar Styles - Verstärktes Glassmorphism */
+  .navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+  }
+
+  .navbar-button {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+
+  .navbar-button:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  @media (max-width: 768px) {
+    .navbar {
+      flex-direction: column;
+      padding: 0.25rem;
+    }
+    .navbar-button {
+      margin: 0.25rem 0;
+    }
+  }
+
+  .dark .navbar {
+    background: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
+    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
+    box-shadow: 
+      0 8px 32px rgba(0, 0, 0, 0.6),
+      0 2px 8px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .navbar-brand {
+    @apply flex items-center space-x-2 transition-transform duration-300 hover:scale-105;
+  }
+
+  .navbar-menu {
+    @apply flex items-center justify-center space-x-1 md:space-x-3 lg:space-x-6 p-3 mx-4 rounded-2xl border;
+    background: rgba(255, 255, 255, 0.25);
+    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 4px 16px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+
+  .dark .navbar-menu {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 
+      0 4px 16px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  .navbar-button {
+    @apply p-2 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
+  }
+
+  /* User Menu Styles */
+  .user-menu-button {
+    @apply flex items-center space-x-2 rounded-lg p-1 transition-all duration-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2;
+  }
+
+  .user-avatar {
+    @apply w-10 h-10 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-sm shadow-md transition-all duration-300 hover:shadow-lg;
+  }
+  
+  /* Avatar im Dropdown */
+  .avatar-large {
+    @apply w-14 h-14 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-md;
+  }
+
+  .user-dropdown-item {
+    @apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300 focus:outline-none focus:bg-gray-100/80 dark:focus:bg-slate-700/60;
+  }
+
+  .user-dropdown-separator {
+    @apply border-t border-gray-200/80 dark:border-slate-700/30 my-1;
+  }
+
+  .menu-item {
+    @apply flex items-center space-x-2 px-4 py-2.5 text-slate-700 dark:text-slate-300 rounded-xl transition-all duration-300;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+
+  .menu-item:hover {
+    @apply text-slate-900 dark:text-white;
+    background: rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(15px) saturate(150%);
+    -webkit-backdrop-filter: blur(15px) saturate(150%);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    transform: translateY(-1px);
+  }
+
+  .dark .menu-item {
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .dark .menu-item:hover {
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  }
+
+  .menu-item.active {
+    @apply text-slate-900 dark:text-white font-medium;
+    background: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    box-shadow: 
+      0 4px 16px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  }
+
+  .dark .menu-item.active {
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 4px 16px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  }
+  
+  /* Dropdown Styles - Verstärktes Glassmorphism */
+  .user-dropdown {
+    @apply absolute right-0 mt-2 w-64 rounded-xl shadow-2xl z-50 overflow-hidden;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.25),
+      0 8px 16px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.4),
+      0 0 0 1px rgba(255, 255, 255, 0.1);
+    animation: fadeIn 0.2s ease-out forwards;
+  }
+
+  .dark .user-dropdown {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
+    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 
+      0 25px 50px rgba(0, 0, 0, 0.6),
+      0 8px 16px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+  
+  .dropdown-header {
+    @apply flex items-center p-4 border-b border-gray-200/80 dark:border-slate-700/30;
+  }
+  
+  .dropdown-item {
+    @apply flex items-center gap-3 px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300;
+  }
+  
+  .dropdown-divider {
+    @apply border-t border-gray-200/80 dark:border-slate-700/30;
+  }
+  
+  /* Mercedes-Benz Logo Animation */
+  @keyframes mercedes-rotate {
+    0% { transform: rotate(0deg); }
+    25% { transform: rotate(90deg); }
+    50% { transform: rotate(180deg); }
+    75% { transform: rotate(270deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  .navbar-brand:hover svg {
+    animation: mercedes-rotate 5s infinite linear;
+    transform-origin: center;
+  }
+}
+
+/* Navbar Sticky Fix - Außerhalb von @layer für höhere Priorität */
+.navbar {
+  position: -webkit-sticky !important;
+  position: sticky !important;
+  top: 0 !important;
+  z-index: 50 !important;
+  width: 100% !important;
+  left: 0 !important;
+  right: 0 !important;
+  /* Verstärktes Glassmorphism Design */
+  --navbar-blur: 40px;
+  --navbar-opacity: 0.15;
+  background: rgba(255, 255, 255, var(--navbar-opacity, 0.15)) !important;
+  backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
+  -webkit-backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.15) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.dark .navbar {
+  --navbar-dark-opacity: 0.25;
+  background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.25)) !important;
+  backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
+  -webkit-backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.4),
+    0 2px 8px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.08) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Navbar Scroll-Effekt */
+.navbar.scrolled {
+  --navbar-blur: 50px;
+  --navbar-opacity: 0.25;
+  background: rgba(255, 255, 255, var(--navbar-opacity, 0.25)) !important;
+  backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
+  -webkit-backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
+  box-shadow: 
+    0 12px 40px rgba(0, 0, 0, 0.15),
+    0 4px 12px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4),
+    0 0 0 1px rgba(255, 255, 255, 0.2) !important;
+}
+
+.dark .navbar.scrolled {
+  --navbar-dark-opacity: 0.35;
+  background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.35)) !important;
+  backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
+  -webkit-backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
+  box-shadow: 
+    0 12px 40px rgba(0, 0, 0, 0.5),
+    0 4px 12px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Neue Navbar-Komponenten mit verbessertem Glassmorphism */
+.navbar-menu-new {
+  @apply flex items-center justify-center space-x-0.5 md:space-x-1;
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  /* Glassmorphism für das Menü */
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(25px) saturate(170%) brightness(108%);
+  -webkit-backdrop-filter: blur(25px) saturate(170%) brightness(108%);
+  border-radius: 16px;
+  padding: 8px;
+  margin: 0 16px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 
+    0 6px 20px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark .navbar-menu-new {
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(30px) saturate(150%) brightness(115%);
+  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(115%);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 
+    0 6px 20px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 0 0 1px rgba(255, 255, 255, 0.03);
+}
+
+.navbar-menu-new::-webkit-scrollbar {
+  display: none;
+}
+
+/* Glassmorphism Hover-Animation für Navbar-Menu */
+.navbar-menu-new:hover {
+  backdrop-filter: blur(35px) saturate(190%) brightness(112%);
+  -webkit-backdrop-filter: blur(35px) saturate(190%) brightness(112%);
+  box-shadow: 
+    0 8px 25px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+.dark .navbar-menu-new:hover {
+  backdrop-filter: blur(40px) saturate(170%) brightness(120%);
+  -webkit-backdrop-filter: blur(40px) saturate(170%) brightness(120%);
+  box-shadow: 
+    0 8px 25px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.nav-item {
+  @apply flex items-center space-x-1.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-300;
+  color: rgba(15, 23, 42, 0.85);
+  /* Gläserner Nav-Item */
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(15px) saturate(140%);
+  -webkit-backdrop-filter: blur(15px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 
+    0 4px 12px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  position: relative;
+  overflow: hidden;
+  animation: nav-item-entrance 0.6s ease-out;
+}
+
+/* Glassmorphism Hover-Effekt */
+.nav-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
+}
+
+.nav-item:hover::before {
+  left: 100%;
+}
+
+/* Zusätzlicher Glitter-Effekt */
+.nav-item::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.1) 30deg, transparent 60deg);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  animation: rotate 3s linear infinite;
+}
+
+.nav-item:hover::after {
+  opacity: 1;
+}
+
+.dark .nav-item {
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(20px) saturate(130%);
+  -webkit-backdrop-filter: blur(20px) saturate(130%);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 
+    0 4px 12px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.nav-item:hover {
+  color: rgba(15, 23, 42, 1);
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(25px) saturate(160%) brightness(110%);
+  -webkit-backdrop-filter: blur(25px) saturate(160%) brightness(110%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 20px rgba(0, 0, 0, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px) scale(1.02);
+}
+
+.dark .nav-item:hover {
+  color: rgba(255, 255, 255, 1);
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(30px) saturate(150%) brightness(120%);
+  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(120%);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 
+    0 8px 20px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.nav-item.active {
+  color: rgba(15, 23, 42, 1);
+  background: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(35px) saturate(180%) brightness(115%);
+  -webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 
+    0 12px 24px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5),
+    0 0 0 1px rgba(59, 130, 246, 0.3);
+  transform: translateY(-1px);
+  animation: nav-item-active-glow 2s ease-in-out infinite alternate;
+}
+
+.dark .nav-item.active {
+  color: rgba(255, 255, 255, 1);
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(40px) saturate(160%) brightness(125%);
+  -webkit-backdrop-filter: blur(40px) saturate(160%) brightness(125%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 12px 24px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 0 0 1px rgba(59, 130, 246, 0.2);
+}
+
+/* Animationen für Glassmorphism-Effekte */
+@keyframes nav-item-entrance {
+  0% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.95);
+    backdrop-filter: blur(5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    backdrop-filter: blur(15px) saturate(140%);
+  }
+}
+
+@keyframes nav-item-active-glow {
+  0% {
+    box-shadow: 
+      0 12px 24px rgba(0, 0, 0, 0.15),
+      inset 0 1px 0 rgba(255, 255, 255, 0.5),
+      0 0 0 1px rgba(59, 130, 246, 0.3);
+  }
+  100% {
+    box-shadow: 
+      0 16px 32px rgba(0, 0, 0, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 0.6),
+      0 0 0 2px rgba(59, 130, 246, 0.5);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Glassmorphism-Partikel-Effekt */
+.navbar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  opacity: 0;
+  animation: glassmorphism-particles 8s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.dark .navbar::before {
+  background: 
+    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+}
+
+@keyframes glassmorphism-particles {
+  0%, 100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+/* Dark Mode Toggle - Kompakteres Design */
+.dark-mode-toggle-new {
+  @apply relative p-2 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;
+  background: rgba(241, 245, 249, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.05),
+    0 1px 2px rgba(0, 0, 0, 0.04);
+  color: #334155;
+  z-index: 100;
+}
+
+.dark-mode-toggle-new:hover {
+  @apply transform -translate-y-0.5;
+  background: rgba(241, 245, 249, 0.9);
+  box-shadow: 
+    0 8px 16px rgba(0, 0, 0, 0.08),
+    0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+.dark-mode-toggle-new:active {
+  @apply transform scale-95;
+  transition: transform 0.1s;
+}
+
+.dark .dark-mode-toggle-new {
+  background: rgba(30, 41, 59, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.1);
+  color: #e2e8f0;
+}
+
+.dark .dark-mode-toggle-new:hover {
+  background: rgba(30, 41, 59, 0.9);
+  box-shadow: 
+    0 8px 16px rgba(0, 0, 0, 0.2),
+    0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+/* Icon-Animation */
+.dark-mode-toggle-new .sun-icon,
+.dark-mode-toggle-new .moon-icon {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300;
+}
+
+.dark-mode-toggle-new .sun-icon:not(.hidden) {
+  animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+}
+
+.dark-mode-toggle-new .moon-icon:not(.hidden) {
+  animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+}
+
+@keyframes spin-in {
+  0% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.7) rotate(20deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1) rotate(0);
+  }
+}
+
+.dark .sun-icon {
+  display: none;
+}
+
+.dark .moon-icon {
+  display: block;
+}
+
+.sun-icon {
+  display: block;
+}
+
+.moon-icon {
+  display: none;
+}
+
+/* User Menu Button - Kompakteres Design */
+.user-menu-button-new {
+  @apply flex items-center space-x-1.5 rounded-lg p-1 transition-all duration-300;
+  background: rgba(241, 245, 249, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.04),
+    0 1px 2px rgba(0, 0, 0, 0.02);
+}
+
+.user-menu-button-new:hover {
+  @apply transform -translate-y-0.5;
+  background: rgba(241, 245, 249, 0.8);
+  box-shadow: 
+    0 8px 16px rgba(0, 0, 0, 0.06),
+    0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.dark .user-menu-button-new {
+  background: rgba(30, 41, 59, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.dark .user-menu-button-new:hover {
+  background: rgba(30, 41, 59, 0.8);
+  box-shadow: 
+    0 8px 16px rgba(0, 0, 0, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* User Avatar - Kompakteres Design */
+.user-avatar-new {
+  @apply h-7 w-7 rounded-full flex items-center justify-center text-white font-semibold text-xs shadow-md transition-all duration-300;
+  background: linear-gradient(135deg, #000000, #333333);
+  box-shadow: 
+    0 2px 4px rgba(0, 0, 0, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.dark .user-avatar-new {
+  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
+  color: #0f172a;
+  box-shadow: 
+    0 2px 4px rgba(0, 0, 0, 0.3),
+    0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* Login Button - Kompakteres Design */
+.login-button-new {
+  @apply flex items-center px-3 py-1.5 rounded-lg text-xs font-medium shadow-sm transition-all duration-300;
+  background: #000000;
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.1),
+    0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.login-button-new:hover {
+  @apply transform -translate-y-0.5;
+  background: #333333;
+  box-shadow: 
+    0 8px 16px rgba(0, 0, 0, 0.15),
+    0 3px 4px rgba(0, 0, 0, 0.1);
+}
+
+.dark .login-button-new {
+  background: #ffffff;
+  color: #000000;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 
+    0 2px 8px rgba(0, 0, 0, 0.2),
+    0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.dark .login-button-new:hover {
+  background: #f1f5f9;
+  box-shadow: 
+    0 8px 16px rgba(0, 0, 0, 0.25),
+    0 3px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Mobile Menu - Kompakteres Design */
+.mobile-menu-new {
+  @apply w-full overflow-hidden transition-all duration-300 z-40;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
+  max-height: 0;
+  opacity: 0;
+}
+
+.mobile-menu-new.open {
+  max-height: 400px;
+  opacity: 1;
+  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
+}
+
+.dark .mobile-menu-new {
+  background: rgba(15, 23, 42, 0.8);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  border-bottom: 1px solid rgba(30, 41, 59, 0.8);
+}
+
+.mobile-nav-item {
+  @apply flex items-center space-x-2.5 px-3 py-2.5 rounded-lg text-sm text-slate-800 dark:text-slate-200 transition-all duration-300;
+}
+
+.mobile-nav-item:hover {
+  background: rgba(241, 245, 249, 0.8);
+}
+
+.dark .mobile-nav-item:hover {
+  background: rgba(30, 41, 59, 0.6);
+}
+
+.mobile-nav-item.active {
+  background: rgba(241, 245, 249, 0.9);
+  color: #000000;
+  font-weight: 500;
+}
+
+.dark .mobile-nav-item.active {
+  background: rgba(30, 41, 59, 0.8);
+  color: #ffffff;
+}
+
+/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */
+.mb-stat-card {
+  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);
+  padding: 1.5rem;
+  margin: 1rem;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.dark .mb-stat-card {
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%);
+  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/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 - Verstärktes Glassmorphism */
+footer {
+  @apply transition-all duration-300;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(30px) saturate(180%) brightness(120%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%);
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 -8px 32px rgba(0, 0, 0, 0.1),
+    0 -2px 8px rgba(0, 0, 0, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.dark footer {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(30px) saturate(160%) brightness(110%);
+  -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 
+    0 -8px 32px rgba(0, 0, 0, 0.3),
+    0 -2px 8px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1),
+    0 0 0 1px rgba(255, 255, 255, 0.03);
+}
+
+/* Dropdown Pfeil Animation */
+.dropdown-arrow {
+  @apply transition-transform duration-300;
+}
+
+/* Mercedes-Benz Hintergrund mit Star-Pattern */
+.mercedes-star-bg {
+  position: relative;
+}
+
+.mercedes-star-bg::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: repeat;
+  background-size: 40px 40px;
+  z-index: -1;
+  opacity: 0.05;
+}
+
+.dark .mercedes-star-bg::after {
+  opacity: 0.02;
+  filter: invert(1) brightness(0.4);
+} 
+
+/* Zusätzliche Glassmorphism-Verbesserungen */
+.glass-effect {
+  backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.dark .glass-effect {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+/* Verbesserte Hover-Effekte für alle interaktiven Elemente */
+.glass-hover {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-hover:hover {
+  transform: translateY(-2px);
+  backdrop-filter: blur(25px) saturate(200%) brightness(120%);
+  -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.15),
+    0 8px 16px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.dark .glass-hover:hover {
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.4),
+    0 8px 16px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */
+.printer-card-new {
+  @apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden;
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.08), 
+    0 10px 20px rgba(0, 0, 0, 0.06),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  border-radius: var(--card-radius, 1rem);
+}
+
+.dark .printer-card-new {
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.4), 
+    0 10px 20px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+/* Online Drucker-Karten mit stärkerem visuellen Unterschied */
+.printer-card-new.online {
+  @apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50;
+  box-shadow: 
+    0 20px 40px rgba(0, 122, 85, 0.08), 
+    0 10px 20px rgba(0, 122, 85, 0.06),
+    0 0 0 1px rgba(209, 250, 229, 0.4);
+}
+
+.dark .printer-card-new.online {
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.3), 
+    0 10px 20px rgba(0, 0, 0, 0.2),
+    0 0 0 1px rgba(16, 185, 129, 0.2);
+}
+
+/* Status-Badge mit verbesserten Styles */
+.status-badge-new {
+  @apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+.dark .status-badge-new {
+  background: rgba(30, 41, 59, 0.7);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+.status-badge-new.online {
+  @apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300;
+}
+
+.status-badge-new.offline {
+  @apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300;
+}
+
+/* Verbesserte Filterleiste */
+.filter-bar-new {
+  @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl;
+  box-shadow: 
+    0 10px 25px rgba(0, 0, 0, 0.05), 
+    0 5px 10px rgba(0, 0, 0, 0.03),
+    0 0 0 1px rgba(255, 255, 255, 0.2);
+}
+
+.dark .filter-bar-new {
+  box-shadow: 
+    0 10px 25px rgba(0, 0, 0, 0.2), 
+    0 5px 10px rgba(0, 0, 0, 0.15),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.filter-btn-new {
+  @apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium;
+}
+
+.filter-btn-new.active {
+  @apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.dark .filter-btn-new.active {
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Verbesserte Aktionsschaltflächen */
+.action-btn-new {
+  @apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.action-btn-new.primary {
+  @apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500;
+  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2);
+}
+
+.dark .action-btn-new.primary {
+  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
+}
+
+.action-btn-new.success {
+  @apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500;
+  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
+}
+
+.dark .action-btn-new.success {
+  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
+}
+
+.action-btn-new.danger {
+  @apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500;
+  box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);
+}
+
+.dark .action-btn-new.danger {
+  box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
+}
+
+/* Informationszeilen in Drucker-Karten */
+.printer-info-row {
+  @apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5;
+}
+
+.printer-info-icon {
+  @apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0;
+}
+
+/* Online-Indikator mit Pulseffekt */
+.online-indicator {
+  @apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg;
+  box-shadow: 0 0 0 rgba(16, 185, 129, 0.6);
+  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
+}
+
+@keyframes pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+}
+
+/* Header mit verbesserten Status-Anzeigen */
+.status-overview-new {
+  @apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg;
+  box-shadow: 
+    0 10px 25px rgba(0, 0, 0, 0.04), 
+    0 5px 10px rgba(0, 0, 0, 0.02),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+.dark .status-overview-new {
+  box-shadow: 
+    0 10px 25px rgba(0, 0, 0, 0.15), 
+    0 5px 10px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(255, 255, 255, 0.03);
+}
+
+.status-dot {
+  @apply w-2.5 h-2.5 rounded-full;
+}
+
+.status-dot.online {
+  @apply bg-green-500;
+  animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
+}
+
+.status-dot.offline {
+  @apply bg-red-500;
+}
+
+@keyframes pulse-dot {
+  0% {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+}
+
+/* Verbesserte Modals mit Glassmorphism */
+.modal-new {
+  @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm;
+}
+
+.modal-content-new {
+  @apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300;
+  box-shadow: 
+    0 25px 50px rgba(0, 0, 0, 0.15), 
+    0 15px 30px rgba(0, 0, 0, 0.1),
+    0 20px 25px -5px rgba(0, 0, 0, 0.5),
+    0 10px 10px -5px rgba(0, 0, 0, 0.3);
+}
+
+/* User Dropdown Items */
+.user-dropdown-item {
+  @apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200 cursor-pointer;
+}
+
+.user-dropdown-item:first-child {
+  @apply rounded-t-xl;
+}
+
+.user-dropdown-item:last-child {
+  @apply rounded-b-xl;
+}
+
+.user-dropdown-item:hover {
+  background: rgba(248, 250, 252, 0.8);
+  transform: translateX(2px);
+}
+
+.dark .user-dropdown-item:hover {
+  background: rgba(30, 41, 59, 0.8);
+}
+
+/* User Dropdown Icons */
+.user-dropdown-icon {
+  @apply w-4 h-4 mr-3 text-slate-500 dark:text-slate-400 transition-colors duration-200;
+}
+
+.user-dropdown-item:hover .user-dropdown-icon {
+  @apply text-slate-700 dark:text-slate-200;
+}
+
+/* Divider in User Dropdown */
+.user-dropdown-divider {
+  @apply border-t border-slate-200 dark:border-slate-700 my-1;
+}
+
+/* User Info Section in Dropdown */
+.user-info-section {
+  @apply px-4 py-3 border-b border-slate-200 dark:border-slate-700;
+  background: rgba(248, 250, 252, 0.5);
+}
+
+.dark .user-info-section {
+  background: rgba(30, 41, 59, 0.5);
+}
+
+.user-info-name {
+  @apply text-sm font-semibold text-slate-900 dark:text-white;
+}
+
+.user-info-role {
+  @apply text-xs text-slate-500 dark:text-slate-400 mt-1;
+}
diff --git a/backend/static/css/input-raspberry-optimized.css b/backend/static/css/input-raspberry-optimized.css
new file mode 100644
index 00000000..9606bfba
--- /dev/null
+++ b/backend/static/css/input-raspberry-optimized.css
@@ -0,0 +1,661 @@
+    @tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/**
+ * MYP Platform - Raspberry Pi Optimierte Styles
+ * Alle performance-kritischen Glassmorphism-Effekte, backdrop-filter und komplexe Animationen entfernt
+ * Design bleibt unverändert, aber Performance ist deutlich besser
+ */
+
+@layer base {
+  :root {
+    /* Light Mode Farben - Mercedes-Benz Professional - UNVERÄNDERT */
+    --color-bg-primary: #ffffff;
+    --color-bg-secondary: #fafbfc;
+    --color-bg-tertiary: #f3f5f7;
+    --color-bg-accent: #fbfcfd;
+    --color-text-primary: #111827;
+    --color-text-secondary: #374151;
+    --color-text-muted: #6b7280;
+    --color-text-accent: #0073ce;
+    --color-border-primary: #e5e7eb;
+    --color-border-secondary: #d1d5db;
+    --color-accent: #0073ce;
+    --color-accent-hover: #005a9f;
+    --color-accent-light: #eff6ff;
+    --color-accent-text: #ffffff;
+    --color-shadow: rgba(0, 0, 0, 0.04);
+    --color-shadow-strong: rgba(0, 0, 0, 0.08);
+    --color-shadow-accent: rgba(0, 115, 206, 0.08);
+    --card-radius: 1rem;
+    
+    /* Vereinfachte Gradients - Raspberry Pi optimiert */
+    --gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+    --gradient-card: var(--color-bg-primary);
+    --gradient-hero: var(--color-bg-secondary);
+    --gradient-accent: var(--color-accent);
+    --gradient-surface: var(--color-bg-primary);
+  }
+
+  .dark {
+    /* Dark Mode Farben - UNVERÄNDERT */
+    --color-bg-primary: #000000;
+    --color-bg-secondary: #0a0a0a;
+    --color-bg-tertiary: #1a1a1a;
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #e2e8f0;
+    --color-text-muted: #94a3b8;
+    --color-border-primary: #1a1a1a;
+    --color-border-secondary: #2a2a2a;
+    --color-accent: #ffffff;
+    --color-accent-hover: #f0f0f0;
+    --color-accent-light: #1e3a8a;
+    --color-accent-text: #000000;
+    --color-shadow: rgba(0, 0, 0, 0.6);
+    --color-shadow-strong: rgba(0, 0, 0, 0.8);
+    --mb-black: #000000;
+  }
+  
+  body {
+    @apply bg-white dark:bg-black text-slate-900 dark:text-white;
+    background: var(--gradient-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    line-height: 1.65;
+    font-size: 15px;
+    transition: background-color 0.2s ease, color 0.2s ease;
+    /* Entfernt: transition-colors duration-300 für bessere Performance */
+  }
+
+  .dark body {
+    background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
+  }
+
+  /* Body Background - STARK VEREINFACHT */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at 50% 50%, rgba(0, 115, 206, 0.01) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .dark body::before {
+    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
+  }
+
+  /* Navbar - RASPBERRY PI OPTIMIERT */
+  nav {
+    background: rgba(255, 255, 255, 0.98);
+    border-bottom: 1px solid var(--color-border-primary);
+    transition: background-color 0.2s ease;
+    /* ENTFERNT: backdrop-filter, komplexe box-shadows, cubic-bezier */
+  }
+  
+  .dark nav {
+    background: rgba(0, 0, 0, 0.95);
+    border-bottom-color: var(--color-border-primary);
+  }
+
+  /* Card Styles - RASPBERRY PI OPTIMIERT */
+  .card-enhanced {
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: var(--card-radius);
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    /* ENTFERNT: backdrop-filter, box-shadow, transform, pseudo-elements */
+  }
+
+  .card-enhanced:hover {
+    background: var(--color-bg-secondary);
+    border-color: var(--color-border-secondary);
+    /* ENTFERNT: transform, box-shadow für bessere Performance */
+  }
+
+  .dark .card-enhanced {
+    background: var(--color-bg-secondary);
+    border-color: var(--color-border-primary);
+  }
+
+  /* Button Styles - RASPBERRY PI OPTIMIERT */
+  .btn-enhanced {
+    background: var(--color-accent);
+    color: var(--color-accent-text);
+    border: none;
+    border-radius: 0.5rem;
+    padding: 0.75rem 1.75rem;
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: background-color 0.2s ease;
+    /* ENTFERNT: gradient, box-shadow, pseudo-elements, transform */
+  }
+
+  .btn-enhanced:hover {
+    background: var(--color-accent-hover);
+    /* ENTFERNT: transform, box-shadow für bessere Performance */
+  }
+
+  .btn-enhanced:active {
+    background: var(--color-accent-hover);
+    /* ENTFERNT: transform für bessere Performance */
+  }
+
+  .btn-secondary {
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border-primary);
+  }
+
+  .btn-secondary:hover {
+    background: var(--color-bg-secondary);
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+  }
+
+  /* Form Elements - RASPBERRY PI OPTIMIERT */
+  .input-enhanced {
+    background: rgba(255, 255, 255, 0.98);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.5rem;
+    padding: 0.75rem 1rem;
+    color: var(--color-text-primary);
+    font-size: 0.9rem;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+    /* ENTFERNT: backdrop-filter, box-shadow für bessere Performance */
+  }
+
+  .input-enhanced:focus {
+    outline: none;
+    border-color: var(--color-accent);
+    background: rgba(255, 255, 255, 1);
+    /* ENTFERNT: box-shadow für bessere Performance */
+  }
+
+  .input-enhanced::placeholder {
+    color: var(--color-text-muted);
+    opacity: 0.8;
+  }
+
+  .dark .input-enhanced {
+    background: rgba(26, 26, 26, 0.9);
+    border-color: var(--color-border-primary);
+    color: var(--color-text-primary);
+  }
+
+  .dark .input-enhanced:focus {
+    border-color: #60a5fa;
+    background: rgba(26, 26, 26, 1);
+  }
+
+  /* Alert Styles - RASPBERRY PI OPTIMIERT */
+  .alert-enhanced {
+    border-radius: 1rem;
+    padding: 1.25rem;
+    border: 1px solid transparent;
+    position: relative;
+    /* ENTFERNT: backdrop-filter für bessere Performance */
+  }
+
+  .alert-enhanced::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+  }
+
+  .alert-info-enhanced {
+    background: rgba(239, 246, 255, 0.95);
+    border-color: rgba(59, 130, 246, 0.2);
+    color: #1e40af;
+  }
+
+  .alert-info-enhanced::before {
+    background: var(--color-accent);
+  }
+
+  .alert-success-enhanced {
+    background: rgba(236, 253, 245, 0.95);
+    border-color: rgba(16, 185, 129, 0.2);
+    color: #065f46;
+  }
+
+  .alert-success-enhanced::before {
+    background: #10b981;
+  }
+
+  .alert-warning-enhanced {
+    background: rgba(255, 251, 235, 0.95);
+    border-color: rgba(251, 191, 36, 0.2);
+    color: #92400e;
+  }
+
+  .alert-warning-enhanced::before {
+    background: #fbbf24;
+  }
+
+  .alert-error-enhanced {
+    background: rgba(254, 242, 242, 0.95);
+    border-color: rgba(239, 68, 68, 0.2);
+    color: #991b1b;
+  }
+
+  .alert-error-enhanced::before {
+    background: #ef4444;
+  }
+
+  /* Flash Messages - RASPBERRY PI OPTIMIERT */
+  .flash-message-light {
+    background: rgba(255, 255, 255, 0.98);
+    border: 1px solid rgba(226, 232, 240, 0.6);
+    color: var(--color-text-primary);
+    /* ENTFERNT: backdrop-filter, komplexe box-shadows */
+  }
+
+  .flash-message-light.success {
+    border-left: 4px solid #10b981;
+    background: rgba(236, 253, 245, 0.95);
+  }
+
+  .flash-message-light.error {
+    border-left: 4px solid #ef4444;
+    background: rgba(254, 242, 242, 0.95);
+  }
+
+  .flash-message-light.warning {
+    border-left: 4px solid #fbbf24;
+    background: rgba(255, 251, 235, 0.95);
+  }
+
+  .flash-message-light.info {
+    border-left: 4px solid #3b82f6;
+    background: rgba(239, 246, 255, 0.95);
+  }
+
+  /* Table Styles - RASPBERRY PI OPTIMIERT */
+  .table-enhanced {
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border-primary);
+    border-radius: var(--card-radius);
+    overflow: hidden;
+    /* ENTFERNT: box-shadow für bessere Performance */
+  }
+
+  .table-enhanced th {
+    background: var(--color-bg-secondary);
+    color: var(--color-text-primary);
+    font-weight: 600;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--color-border-primary);
+  }
+
+  .table-enhanced td {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--color-border-primary);
+    color: var(--color-text-secondary);
+    transition: background-color 0.2s ease;
+  }
+
+  .table-enhanced tbody tr:hover {
+    background: var(--color-bg-secondary);
+    /* ENTFERNT: transform für bessere Performance */
+  }
+
+  .dark .table-enhanced {
+    background: var(--color-bg-secondary);
+    border-color: var(--color-border-primary);
+  }
+
+  .dark .table-enhanced th {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text-primary);
+  }
+
+  .dark .table-enhanced tbody tr:hover {
+    background: var(--color-bg-tertiary);
+  }
+
+  /* Modal Styles - RASPBERRY PI OPTIMIERT */
+  .modal-enhanced {
+    background: rgba(255, 255, 255, 0.98);
+    border: 1px solid rgba(226, 232, 240, 0.7);
+    border-radius: 1.5rem;
+    position: relative;
+    /* ENTFERNT: backdrop-filter, komplexe box-shadows */
+  }
+
+  .dark .modal-enhanced {
+    background: rgba(10, 10, 10, 0.98);
+    border-color: rgba(42, 42, 42, 0.7);
+  }
+
+  /* Status Badges - RASPBERRY PI OPTIMIERT */
+  .status-badge-enhanced {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: 1px solid transparent;
+    transition: background-color 0.2s ease;
+  }
+
+  .status-online-enhanced {
+    background: #ecfdf5;
+    color: #065f46;
+    border-color: rgba(16, 185, 129, 0.2);
+  }
+
+  .status-offline-enhanced {
+    background: #fef2f2;
+    color: #991b1b;
+    border-color: rgba(239, 68, 68, 0.2);
+  }
+
+  .status-printing-enhanced {
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-color: rgba(59, 130, 246, 0.2);
+  }
+
+  /* Dark Mode Toggle - RASPBERRY PI OPTIMIERT */
+  .dark-mode-toggle-new {
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.75rem;
+    padding: 0.5rem;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    /* ENTFERNT: box-shadow, transform für bessere Performance */
+  }
+
+  .dark-mode-toggle-new:hover {
+    background: rgba(255, 255, 255, 1);
+    border-color: var(--color-border-secondary);
+    /* ENTFERNT: transform für bessere Performance */
+  }
+
+  .dark .dark-mode-toggle-new {
+    background: rgba(26, 26, 26, 0.95);
+    border-color: var(--color-border-primary);
+  }
+
+  .dark .dark-mode-toggle-new:hover {
+    background: rgba(26, 26, 26, 1);
+  }
+
+  /* Icon Animations - STARK VEREINFACHT */
+  .dark-mode-toggle-new .sun-icon,
+  .dark-mode-toggle-new .moon-icon {
+    transition: opacity 0.2s ease;
+    /* ENTFERNT: komplexe transform animations */
+  }
+
+  .dark .sun-icon { display: none; }
+  .dark .moon-icon { display: block; }
+  .sun-icon { display: block; }
+  .moon-icon { display: none; }
+
+  /* User Menu Button - RASPBERRY PI OPTIMIERT */
+  .user-menu-button-new {
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.75rem;
+    padding: 0.5rem;
+    transition: background-color 0.2s ease;
+    /* ENTFERNT: box-shadow, transform für bessere Performance */
+  }
+
+  .user-menu-button-new:hover {
+    background: rgba(255, 255, 255, 1);
+    /* ENTFERNT: transform für bessere Performance */
+  }
+
+  .dark .user-menu-button-new {
+    background: rgba(26, 26, 26, 0.95);
+    border-color: var(--color-border-primary);
+  }
+
+  .dark .user-menu-button-new:hover {
+    background: rgba(26, 26, 26, 1);
+  }
+
+  /* Hover Effects - STARK VEREINFACHT */
+  .hover-lift-enhanced {
+    transition: background-color 0.2s ease;
+    /* ENTFERNT: cubic-bezier transition für bessere Performance */
+  }
+
+  .hover-lift-enhanced:hover {
+    background-color: var(--color-bg-secondary);
+    /* ENTFERNT: transform, box-shadow für bessere Performance */
+  }
+
+  .dark .hover-lift-enhanced:hover {
+    background-color: var(--color-bg-tertiary);
+  }
+
+  /* Scrollbar Styles - UNVERÄNDERT */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-border-secondary);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-muted);
+  }
+
+  .dark ::-webkit-scrollbar-track {
+    background: var(--color-bg-tertiary);
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    background: var(--color-border-secondary);
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-muted);
+  }
+
+  /* Loading Animation - VEREINFACHT */
+  .loading-enhanced {
+    background: var(--color-bg-secondary);
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .loading-enhanced::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: loading-shimmer 1.5s infinite;
+  }
+
+  @keyframes loading-shimmer {
+    0% { left: -100%; }
+    100% { left: 100%; }
+  }
+
+  /* Focus Styles - VEREINFACHT */
+  .focus-enhanced:focus {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    /* ENTFERNT: box-shadow für bessere Performance */
+  }
+
+  .dark .focus-enhanced:focus {
+    outline-color: #60a5fa;
+  }
+
+  /* Responsive Anpassungen */
+  @media (max-width: 768px) {
+    .card-enhanced {
+      border-radius: 0.75rem;
+      padding: 1rem;
+    }
+
+    .btn-enhanced {
+      padding: 0.625rem 1.25rem;
+      font-size: 0.8rem;
+    }
+
+    .modal-enhanced {
+      border-radius: 1rem;
+      margin: 1rem;
+    }
+
+    .dark-mode-toggle-new {
+      padding: 0.4rem;
+    }
+  }
+
+  /* Reduced Motion Support - ERWEITERT */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      transform: none !important;
+    }
+  }
+
+  /* High Contrast Support */
+  @media (prefers-contrast: high) {
+    :root {
+      --color-border-primary: #000000;
+      --color-border-secondary: #000000;
+      --color-shadow: rgba(0, 0, 0, 0.2);
+    }
+
+    .dark {
+      --color-border-primary: #ffffff;
+      --color-border-secondary: #ffffff;
+    }
+  }
+
+  /* Weitere optimierte Komponenten folgen... */
+  
+  /* Notification Styles - RASPBERRY PI OPTIMIERT */
+  .notification {
+    background: rgba(255, 255, 255, 0.98);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.75rem;
+    padding: 1rem;
+    /* ENTFERNT: backdrop-filter, komplexe box-shadows */
+  }
+
+  .dark .notification {
+    background: rgba(26, 26, 26, 0.95);
+    border-color: var(--color-border-primary);
+  }
+
+  .notification:hover {
+    background: rgba(255, 255, 255, 1);
+    /* ENTFERNT: transform, box-shadow für bessere Performance */
+  }
+
+  .dark .notification:hover {
+    background: rgba(26, 26, 26, 1);
+  }
+
+  /* Status Dot - VEREINFACHT */
+  .status-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    display: inline-block;
+  }
+
+  .status-dot.online {
+    background: #10b981;
+  }
+
+  .status-dot.offline {
+    background: #ef4444;
+  }
+
+  /* ENTFERNT: Alle pulse-Animationen für bessere Performance */
+
+  /* Weitere Komponenten werden nach gleichem Muster optimiert... */
+}
+
+/* Flash Messages - RASPBERRY PI OPTIMIERT */
+.flash-message {
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.75rem;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  /* ENTFERNT: backdrop-filter, box-shadow */
+}
+
+.dark .flash-message {
+  background: rgba(26, 26, 26, 0.95);
+  border-color: var(--color-border-primary);
+}
+
+.flash-message:hover {
+  background: rgba(255, 255, 255, 1);
+  /* ENTFERNT: transform für bessere Performance */
+}
+
+.dark .flash-message:hover {
+  background: rgba(26, 26, 26, 1);
+}
+
+.flash-message.info {
+  border-left: 4px solid #3b82f6;
+  background: rgba(239, 246, 255, 0.95);
+}
+
+.flash-message.success {
+  border-left: 4px solid #10b981;
+  background: rgba(236, 253, 245, 0.95);
+}
+
+.flash-message.warning {
+  border-left: 4px solid #fbbf24;
+  background: rgba(255, 251, 235, 0.95);
+}
+
+.flash-message.error {
+  border-left: 4px solid #ef4444;
+  background: rgba(254, 242, 242, 0.95);
+}
+
+/* Einfache Animationen - NUR OPACITY */
+@keyframes flash-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Alle weiteren Komponenten folgen dem gleichen Optimierungsmuster:
+   - Entfernung von backdrop-filter
+   - Entfernung von komplexen box-shadows
+   - Entfernung von transform-Animationen
+   - Vereinfachung von transitions zu opacity/background-color only
+   - Beibehaltung des visuellen Designs
+*/ 
\ No newline at end of file
diff --git a/backend/static/css/input.css b/backend/static/css/input.css
index 8621977d..9606bfba 100644
--- a/backend/static/css/input.css
+++ b/backend/static/css/input.css
@@ -1,79 +1,77 @@
-@tailwind base;
+    @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Custom Styles für Light und Dark Mode - Premium Upgrade mit verbessertem Light Mode */
+/**
+ * MYP Platform - Raspberry Pi Optimierte Styles
+ * Alle performance-kritischen Glassmorphism-Effekte, backdrop-filter und komplexe Animationen entfernt
+ * Design bleibt unverändert, aber Performance ist deutlich besser
+ */
+
 @layer base {
   :root {
-    /* Light Mode Farben - Mercedes-Benz Professional - VERBESSERT für optimale Lesbarkeit */
+    /* Light Mode Farben - Mercedes-Benz Professional - UNVERÄNDERT */
     --color-bg-primary: #ffffff;
     --color-bg-secondary: #fafbfc;
     --color-bg-tertiary: #f3f5f7;
     --color-bg-accent: #fbfcfd;
-    --color-text-primary: #111827; /* Verstärkter Kontrast für bessere Lesbarkeit */
-    --color-text-secondary: #374151; /* Erhöhter Kontrast */
-    --color-text-muted: #6b7280; /* Optimierter Muted-Text */
+    --color-text-primary: #111827;
+    --color-text-secondary: #374151;
+    --color-text-muted: #6b7280;
     --color-text-accent: #0073ce;
-    --color-border-primary: #e5e7eb; /* Subtilere aber sichtbarere Borders */
+    --color-border-primary: #e5e7eb;
     --color-border-secondary: #d1d5db;
-    --color-accent: #0073ce; /* Mercedes-Benz Professional Blau */
+    --color-accent: #0073ce;
     --color-accent-hover: #005a9f;
     --color-accent-light: #eff6ff;
     --color-accent-text: #ffffff;
-    --color-shadow: rgba(0, 0, 0, 0.06); /* Sanftere Schatten */
-    --color-shadow-strong: rgba(0, 0, 0, 0.1);
-    --color-shadow-accent: rgba(0, 115, 206, 0.12);
-    --card-radius: 1rem; /* Abgerundete Ecken für Karten */
+    --color-shadow: rgba(0, 0, 0, 0.04);
+    --color-shadow-strong: rgba(0, 0, 0, 0.08);
+    --color-shadow-accent: rgba(0, 115, 206, 0.08);
+    --card-radius: 1rem;
     
-    /* Light Mode Gradients - VERBESSERT für sanftere Optik */
-    --gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 30%, #f8fafc 70%, #f3f5f7 100%);
-    --gradient-card: linear-gradient(135deg, #ffffff 0%, #fcfcfd 50%, #fafbfc 100%);
-    --gradient-hero: linear-gradient(135deg, #fafbfc 0%, #f3f5f7 40%, #eef2f5 80%, #f8fafc 100%);
-    --gradient-accent: linear-gradient(135deg, #0073ce 0%, #005a9f 100%);
-    --gradient-surface: linear-gradient(135deg, #ffffff 0%, #fbfcfd 50%, #f8fafc 100%);
-    
-    /* Neue optimierte Light Mode Glassmorphism-Variablen */
-    --glass-bg: rgba(255, 255, 255, 0.92);
-    --glass-border: rgba(255, 255, 255, 0.3);
-    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
-    --glass-blur: blur(20px);
+    /* Vereinfachte Gradients - Raspberry Pi optimiert */
+    --gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+    --gradient-card: var(--color-bg-primary);
+    --gradient-hero: var(--color-bg-secondary);
+    --gradient-accent: var(--color-accent);
+    --gradient-surface: var(--color-bg-primary);
   }
 
   .dark {
-    /* Dark Mode Farben - Noch dunkler und eleganter - UNVERÄNDERT */
-    --color-bg-primary: #000000; /* Tiefes Schwarz */
-    --color-bg-secondary: #0a0a0a; /* Sehr dunkles Grau */
+    /* Dark Mode Farben - UNVERÄNDERT */
+    --color-bg-primary: #000000;
+    --color-bg-secondary: #0a0a0a;
     --color-bg-tertiary: #1a1a1a;
     --color-text-primary: #ffffff;
     --color-text-secondary: #e2e8f0;
     --color-text-muted: #94a3b8;
-    --color-border-primary: #1a1a1a; /* Dunkler Rahmen */
+    --color-border-primary: #1a1a1a;
     --color-border-secondary: #2a2a2a;
-    --color-accent: #ffffff; /* Reines Weiß */
+    --color-accent: #ffffff;
     --color-accent-hover: #f0f0f0;
     --color-accent-light: #1e3a8a;
     --color-accent-text: #000000;
-    --color-shadow: rgba(0, 0, 0, 0.8); /* Sehr dunkler Schatten */
-    --color-shadow-strong: rgba(0, 0, 0, 0.9);
-    --mb-black: #000000; /* Mercedes-Benz Schwarz */
+    --color-shadow: rgba(0, 0, 0, 0.6);
+    --color-shadow-strong: rgba(0, 0, 0, 0.8);
+    --mb-black: #000000;
   }
   
   body {
-    @apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300;
-    position: relative;
-    min-height: 100vh;
+    @apply bg-white dark:bg-black text-slate-900 dark:text-white;
     background: var(--gradient-primary);
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
-    line-height: 1.65; /* Verbesserte Zeilenhöhe für bessere Lesbarkeit */
-    font-size: 15px; /* Optimierte Schriftgröße */
+    line-height: 1.65;
+    font-size: 15px;
+    transition: background-color 0.2s ease, color 0.2s ease;
+    /* Entfernt: transition-colors duration-300 für bessere Performance */
   }
 
   .dark body {
-    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
+    background: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
   }
 
-  /* Enhanced Body Background with Subtle Patterns - VERBESSERT */
+  /* Body Background - STARK VEREINFACHT */
   body::before {
     content: '';
     position: fixed;
@@ -81,92 +79,51 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: 
-      radial-gradient(circle at 25% 25%, rgba(0, 115, 206, 0.015) 0%, transparent 50%),
-      radial-gradient(circle at 75% 75%, rgba(0, 115, 206, 0.01) 0%, transparent 50%),
-      radial-gradient(circle at 50% 10%, rgba(0, 115, 206, 0.008) 0%, transparent 50%);
+    background: radial-gradient(circle at 50% 50%, rgba(0, 115, 206, 0.01) 0%, transparent 70%);
     pointer-events: none;
     z-index: -1;
   }
 
   .dark body::before {
-    background: 
-      radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
-      radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
+    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 70%);
   }
 
-  /* Navbar Styles - Premium Glassmorphism - VERBESSERT */
+  /* Navbar - RASPBERRY PI OPTIMIERT */
   nav {
-    @apply backdrop-blur-xl border-b transition-all duration-300;
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.95) 0%, 
-      rgba(250, 251, 252, 0.92) 30%, 
-      rgba(248, 250, 252, 0.9) 70%,
-      rgba(255, 255, 255, 0.95) 100%);
-    border-bottom: 1px solid rgba(229, 231, 235, 0.7);
-    backdrop-filter: blur(28px) saturate(200%) brightness(110%);
-    -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(110%);
-    box-shadow: 
-      0 4px 20px rgba(0, 0, 0, 0.04),
-      0 2px 8px rgba(0, 115, 206, 0.02),
-      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.98);
+    border-bottom: 1px solid var(--color-border-primary);
+    transition: background-color 0.2s ease;
+    /* ENTFERNT: backdrop-filter, komplexe box-shadows, cubic-bezier */
   }
   
   .dark nav {
-    background: rgba(0, 0, 0, 0.85);
-    border-bottom-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 
-      0 8px 32px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    background: rgba(0, 0, 0, 0.95);
+    border-bottom-color: var(--color-border-primary);
   }
 
-  /* Premium Card Styles - VERBESSERT für Light Mode */
+  /* Card Styles - RASPBERRY PI OPTIMIERT */
   .card-enhanced {
-    background: var(--gradient-card);
+    background: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
     border-radius: var(--card-radius);
-    box-shadow: 
-      0 2px 12px rgba(0, 0, 0, 0.03),
-      0 1px 4px rgba(0, 115, 206, 0.02),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-  }
-
-  .card-enhanced::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: var(--gradient-accent);
-    opacity: 0;
-    transition: opacity 0.3s ease;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    /* ENTFERNT: backdrop-filter, box-shadow, transform, pseudo-elements */
   }
 
   .card-enhanced:hover {
-    transform: translateY(-2px);
-    box-shadow: 
-      0 8px 25px rgba(0, 0, 0, 0.06),
-      0 4px 12px rgba(0, 115, 206, 0.04),
-      inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  }
-
-  .card-enhanced:hover::before {
-    opacity: 1;
+    background: var(--color-bg-secondary);
+    border-color: var(--color-border-secondary);
+    /* ENTFERNT: transform, box-shadow für bessere Performance */
   }
 
   .dark .card-enhanced {
-    background: rgba(10, 10, 10, 0.8);
+    background: var(--color-bg-secondary);
     border-color: var(--color-border-primary);
-    box-shadow: 0 4px 20px var(--color-shadow);
   }
 
-  /* Premium Button Styles - VERBESSERT */
+  /* Button Styles - RASPBERRY PI OPTIMIERT */
   .btn-enhanced {
-    background: var(--gradient-accent);
+    background: var(--color-accent);
     color: var(--color-accent-text);
     border: none;
     border-radius: 0.5rem;
@@ -175,82 +132,49 @@
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    box-shadow: 
-      0 2px 8px rgba(0, 115, 206, 0.2),
-      0 1px 4px rgba(0, 115, 206, 0.1);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    position: relative;
-    overflow: hidden;
-  }
-
-  .btn-enhanced::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.5s ease;
+    transition: background-color 0.2s ease;
+    /* ENTFERNT: gradient, box-shadow, pseudo-elements, transform */
   }
 
   .btn-enhanced:hover {
-    transform: translateY(-1px);
-    box-shadow: 
-      0 4px 15px rgba(0, 115, 206, 0.3),
-      0 2px 8px rgba(0, 115, 206, 0.2);
-  }
-
-  .btn-enhanced:hover::before {
-    left: 100%;
+    background: var(--color-accent-hover);
+    /* ENTFERNT: transform, box-shadow für bessere Performance */
   }
 
   .btn-enhanced:active {
-    transform: translateY(0);
+    background: var(--color-accent-hover);
+    /* ENTFERNT: transform für bessere Performance */
   }
 
   .btn-secondary {
-    background: var(--gradient-surface);
+    background: var(--color-bg-primary);
     color: var(--color-text-primary);
     border: 1px solid var(--color-border-primary);
-    box-shadow: 
-      0 1px 6px rgba(0, 0, 0, 0.03),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8);
   }
 
   .btn-secondary:hover {
     background: var(--color-bg-secondary);
     border-color: var(--color-accent);
     color: var(--color-accent);
-    box-shadow: 
-      0 4px 12px rgba(0, 115, 206, 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.9);
   }
 
-  /* Enhanced Form Elements - VERBESSERT für bessere Lesbarkeit */
+  /* Form Elements - RASPBERRY PI OPTIMIERT */
   .input-enhanced {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(255, 255, 255, 0.98);
     border: 1px solid var(--color-border-primary);
     border-radius: 0.5rem;
     padding: 0.75rem 1rem;
     color: var(--color-text-primary);
     font-size: 0.9rem;
-    box-shadow: 
-      0 1px 6px rgba(0, 0, 0, 0.02),
-      inset 0 1px 0 rgba(255, 255, 255, 0.9);
-    transition: all 0.2s ease;
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+    /* ENTFERNT: backdrop-filter, box-shadow für bessere Performance */
   }
 
   .input-enhanced:focus {
     outline: none;
     border-color: var(--color-accent);
-    box-shadow: 
-      0 4px 12px rgba(0, 115, 206, 0.1),
-      0 0 0 3px rgba(0, 115, 206, 0.05),
-      inset 0 1px 0 rgba(255, 255, 255, 0.95);
-    background: rgba(255, 255, 255, 0.98);
+    background: rgba(255, 255, 255, 1);
+    /* ENTFERNT: box-shadow für bessere Performance */
   }
 
   .input-enhanced::placeholder {
@@ -259,30 +183,23 @@
   }
 
   .dark .input-enhanced {
-    background: rgba(10, 10, 10, 0.8);
+    background: rgba(26, 26, 26, 0.9);
     border-color: var(--color-border-primary);
     color: var(--color-text-primary);
-    box-shadow: 
-      0 2px 8px var(--color-shadow),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05);
   }
 
   .dark .input-enhanced:focus {
     border-color: #60a5fa;
-    box-shadow: 
-      0 4px 15px rgba(96, 165, 250, 0.2),
-      0 0 0 3px rgba(96, 165, 250, 0.1);
+    background: rgba(26, 26, 26, 1);
   }
 
-  /* Premium Alert Styles */
+  /* Alert Styles - RASPBERRY PI OPTIMIERT */
   .alert-enhanced {
     border-radius: 1rem;
     padding: 1.25rem;
     border: 1px solid transparent;
     position: relative;
-    overflow: hidden;
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
+    /* ENTFERNT: backdrop-filter für bessere Performance */
   }
 
   .alert-enhanced::before {
@@ -295,198 +212,131 @@
   }
 
   .alert-info-enhanced {
-    background: linear-gradient(135deg, 
-      rgba(239, 246, 255, 0.95) 0%, 
-      rgba(219, 234, 254, 0.9) 100%);
+    background: rgba(239, 246, 255, 0.95);
     border-color: rgba(59, 130, 246, 0.2);
     color: #1e40af;
   }
 
   .alert-info-enhanced::before {
-    background: var(--gradient-accent);
+    background: var(--color-accent);
   }
 
   .alert-success-enhanced {
-    background: linear-gradient(135deg, 
-      rgba(236, 253, 245, 0.95) 0%, 
-      rgba(167, 243, 208, 0.9) 100%);
+    background: rgba(236, 253, 245, 0.95);
     border-color: rgba(16, 185, 129, 0.2);
     color: #065f46;
   }
 
   .alert-success-enhanced::before {
-    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
+    background: #10b981;
   }
 
   .alert-warning-enhanced {
-    background: linear-gradient(135deg, 
-      rgba(255, 251, 235, 0.95) 0%, 
-      rgba(254, 243, 199, 0.9) 100%);
+    background: rgba(255, 251, 235, 0.95);
     border-color: rgba(251, 191, 36, 0.2);
     color: #92400e;
   }
 
   .alert-warning-enhanced::before {
-    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
+    background: #fbbf24;
   }
 
   .alert-error-enhanced {
-    background: linear-gradient(135deg, 
-      rgba(254, 242, 242, 0.95) 0%, 
-      rgba(252, 165, 165, 0.9) 100%);
+    background: rgba(254, 242, 242, 0.95);
     border-color: rgba(239, 68, 68, 0.2);
     color: #991b1b;
   }
 
   .alert-error-enhanced::before {
-    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
+    background: #ef4444;
   }
 
-  /* Light Mode Flash Messages - Premium */
+  /* Flash Messages - RASPBERRY PI OPTIMIERT */
   .flash-message-light {
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.95) 0%, 
-      rgba(248, 250, 252, 0.9) 100%);
-    backdrop-filter: blur(32px) saturate(200%) brightness(120%);
-    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(120%);
+    background: rgba(255, 255, 255, 0.98);
     border: 1px solid rgba(226, 232, 240, 0.6);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.1),
-      0 12px 24px rgba(0, 115, 206, 0.05),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8);
     color: var(--color-text-primary);
+    /* ENTFERNT: backdrop-filter, komplexe box-shadows */
   }
 
   .flash-message-light.success {
     border-left: 4px solid #10b981;
-    background: linear-gradient(135deg, 
-      rgba(236, 253, 245, 0.95) 0%, 
-      rgba(209, 250, 229, 0.9) 100%);
+    background: rgba(236, 253, 245, 0.95);
   }
 
   .flash-message-light.error {
     border-left: 4px solid #ef4444;
-    background: linear-gradient(135deg, 
-      rgba(254, 242, 242, 0.95) 0%, 
-      rgba(252, 165, 165, 0.9) 100%);
+    background: rgba(254, 242, 242, 0.95);
   }
 
   .flash-message-light.warning {
     border-left: 4px solid #fbbf24;
-    background: linear-gradient(135deg, 
-      rgba(255, 251, 235, 0.95) 0%, 
-      rgba(254, 243, 199, 0.9) 100%);
+    background: rgba(255, 251, 235, 0.95);
   }
 
   .flash-message-light.info {
     border-left: 4px solid #3b82f6;
-    background: linear-gradient(135deg, 
-      rgba(239, 246, 255, 0.95) 0%, 
-      rgba(219, 234, 254, 0.9) 100%);
+    background: rgba(239, 246, 255, 0.95);
   }
 
-  /* Premium Table Styles */
+  /* Table Styles - RASPBERRY PI OPTIMIERT */
   .table-enhanced {
-    background: var(--gradient-card);
+    background: var(--color-bg-primary);
     border: 1px solid var(--color-border-primary);
     border-radius: var(--card-radius);
     overflow: hidden;
-    box-shadow: 
-      0 4px 20px var(--color-shadow),
-      0 2px 8px rgba(0, 115, 206, 0.04),
-      inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    /* ENTFERNT: box-shadow für bessere Performance */
   }
 
   .table-enhanced th {
-    background: linear-gradient(135deg, 
-      var(--color-bg-secondary) 0%, 
-      var(--color-bg-tertiary) 100%);
+    background: var(--color-bg-secondary);
     color: var(--color-text-primary);
     font-weight: 600;
     padding: 1rem 1.5rem;
     border-bottom: 1px solid var(--color-border-primary);
-    position: relative;
-  }
-
-  .table-enhanced th::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, 
-      transparent 0%, 
-      var(--color-border-secondary) 50%, 
-      transparent 100%);
   }
 
   .table-enhanced td {
     padding: 1rem 1.5rem;
     border-bottom: 1px solid var(--color-border-primary);
     color: var(--color-text-secondary);
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease;
   }
 
   .table-enhanced tbody tr:hover {
     background: var(--color-bg-secondary);
-    transform: scale(1.002);
+    /* ENTFERNT: transform für bessere Performance */
   }
 
   .dark .table-enhanced {
-    background: rgba(10, 10, 10, 0.8);
+    background: var(--color-bg-secondary);
     border-color: var(--color-border-primary);
   }
 
   .dark .table-enhanced th {
-    background: rgba(26, 26, 26, 0.8);
+    background: var(--color-bg-tertiary);
     color: var(--color-text-primary);
   }
 
   .dark .table-enhanced tbody tr:hover {
-    background: rgba(26, 26, 26, 0.6);
+    background: var(--color-bg-tertiary);
   }
 
-  /* Premium Modal Styles */
+  /* Modal Styles - RASPBERRY PI OPTIMIERT */
   .modal-enhanced {
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.98) 0%, 
-      rgba(248, 250, 252, 0.95) 50%, 
-      rgba(255, 255, 255, 0.98) 100%);
-    backdrop-filter: blur(32px) saturate(220%) brightness(120%);
-    -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(120%);
+    background: rgba(255, 255, 255, 0.98);
     border: 1px solid rgba(226, 232, 240, 0.7);
     border-radius: 1.5rem;
-    box-shadow: 
-      0 50px 100px rgba(0, 0, 0, 0.15),
-      0 20px 40px rgba(0, 115, 206, 0.08),
-      inset 0 2px 0 rgba(255, 255, 255, 0.9);
     position: relative;
-    overflow: hidden;
-  }
-
-  .modal-enhanced::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, 
-      transparent 0%, 
-      rgba(226, 232, 240, 0.8) 50%, 
-      transparent 100%);
+    /* ENTFERNT: backdrop-filter, komplexe box-shadows */
   }
 
   .dark .modal-enhanced {
-    background: rgba(0, 0, 0, 0.95);
+    background: rgba(10, 10, 10, 0.98);
     border-color: rgba(42, 42, 42, 0.7);
-    box-shadow: 
-      0 50px 100px rgba(0, 0, 0, 0.5),
-      inset 0 2px 0 rgba(255, 255, 255, 0.05);
   }
 
-  /* Enhanced Status Badges */
+  /* Status Badges - RASPBERRY PI OPTIMIERT */
   .status-badge-enhanced {
     display: inline-flex;
     align-items: center;
@@ -497,125 +347,57 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
     border: 1px solid transparent;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .status-badge-enhanced::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-    transition: left 0.5s ease;
-  }
-
-  .status-badge-enhanced:hover::before {
-    left: 100%;
+    transition: background-color 0.2s ease;
   }
 
   .status-online-enhanced {
-    background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
+    background: #ecfdf5;
     color: #065f46;
-    border-color: rgba(16, 185, 129, 0.3);
+    border-color: rgba(16, 185, 129, 0.2);
   }
 
   .status-offline-enhanced {
-    background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%);
+    background: #fef2f2;
     color: #991b1b;
-    border-color: rgba(239, 68, 68, 0.3);
+    border-color: rgba(239, 68, 68, 0.2);
   }
 
   .status-printing-enhanced {
-    background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
-    color: #1e40af;
-    border-color: rgba(59, 130, 246, 0.3);
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-color: rgba(59, 130, 246, 0.2);
   }
 
-  /* Dark Mode Toggle - Premium Design */
+  /* Dark Mode Toggle - RASPBERRY PI OPTIMIERT */
   .dark-mode-toggle-new {
-    position: relative;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    padding: 0.625rem;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.9) 0%, 
-      rgba(241, 245, 249, 0.8) 100%);
-    border: 1px solid rgba(226, 232, 240, 0.7);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.06),
-      0 2px 4px rgba(0, 115, 206, 0.04),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8);
-    color: var(--color-text-secondary);
-    z-index: 100;
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.75rem;
+    padding: 0.5rem;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    /* ENTFERNT: box-shadow, transform für bessere Performance */
   }
 
   .dark-mode-toggle-new:hover {
-    transform: translateY(-2px) scale(1.05);
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.95) 0%, 
-      rgba(241, 245, 249, 0.85) 100%);
-    box-shadow: 
-      0 8px 20px rgba(0, 0, 0, 0.1),
-      0 4px 8px rgba(0, 115, 206, 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  }
-
-  .dark-mode-toggle-new:active {
-    transform: translateY(-1px) scale(0.98);
-    transition: transform 0.1s;
+    background: rgba(255, 255, 255, 1);
+    border-color: var(--color-border-secondary);
+    /* ENTFERNT: transform für bessere Performance */
   }
 
   .dark .dark-mode-toggle-new {
-    background: rgba(10, 10, 10, 0.8);
-    border: 1px solid rgba(42, 42, 42, 0.6);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05);
-    color: var(--color-text-secondary);
+    background: rgba(26, 26, 26, 0.95);
+    border-color: var(--color-border-primary);
   }
 
   .dark .dark-mode-toggle-new:hover {
-    background: rgba(10, 10, 10, 0.9);
-    box-shadow: 
-      0 8px 20px rgba(0, 0, 0, 0.4),
-      inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    background: rgba(26, 26, 26, 1);
   }
 
-  /* Icon-Animation für Dark Mode Toggle */
+  /* Icon Animations - STARK VEREINFACHT */
   .dark-mode-toggle-new .sun-icon,
   .dark-mode-toggle-new .moon-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .dark-mode-toggle-new .sun-icon:not(.hidden) {
-    animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-  }
-
-  .dark-mode-toggle-new .moon-icon:not(.hidden) {
-    animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-  }
-
-  @keyframes icon-appear {
-    0% {
-      opacity: 0;
-      transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1) rotate(0);
-    }
+    transition: opacity 0.2s ease;
+    /* ENTFERNT: komplexe transform animations */
   }
 
   .dark .sun-icon { display: none; }
@@ -623,66 +405,46 @@
   .sun-icon { display: block; }
   .moon-icon { display: none; }
 
-  /* User Menu Button - Premium Design */
+  /* User Menu Button - RASPBERRY PI OPTIMIERT */
   .user-menu-button-new {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid var(--color-border-primary);
     border-radius: 0.75rem;
     padding: 0.5rem;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.8) 0%, 
-      rgba(241, 245, 249, 0.7) 100%);
-    border: 1px solid rgba(226, 232, 240, 0.6);
-    box-shadow: 
-      0 2px 8px rgba(0, 0, 0, 0.05),
-      inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    transition: background-color 0.2s ease;
+    /* ENTFERNT: box-shadow, transform für bessere Performance */
   }
 
   .user-menu-button-new:hover {
-    transform: translateY(-1px);
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.9) 0%, 
-      rgba(241, 245, 249, 0.8) 100%);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.08),
-      0 2px 4px rgba(0, 115, 206, 0.04),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    background: rgba(255, 255, 255, 1);
+    /* ENTFERNT: transform für bessere Performance */
   }
 
   .dark .user-menu-button-new {
-    background: rgba(10, 10, 10, 0.7);
-    border-color: rgba(42, 42, 42, 0.6);
-    box-shadow: 
-      0 2px 8px rgba(0, 0, 0, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.03);
+    background: rgba(26, 26, 26, 0.95);
+    border-color: var(--color-border-primary);
   }
 
   .dark .user-menu-button-new:hover {
-    background: rgba(10, 10, 10, 0.8);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    background: rgba(26, 26, 26, 1);
   }
 
-  /* Enhanced Hover Effects */
+  /* Hover Effects - STARK VEREINFACHT */
   .hover-lift-enhanced {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: background-color 0.2s ease;
+    /* ENTFERNT: cubic-bezier transition für bessere Performance */
   }
 
   .hover-lift-enhanced:hover {
-    transform: translateY(-3px) scale(1.01);
-    box-shadow: 
-      0 12px 30px var(--color-shadow-strong),
-      0 6px 15px var(--color-shadow-accent);
+    background-color: var(--color-bg-secondary);
+    /* ENTFERNT: transform, box-shadow für bessere Performance */
   }
 
   .dark .hover-lift-enhanced:hover {
-    box-shadow: 0 12px 30px var(--color-shadow);
+    background-color: var(--color-bg-tertiary);
   }
 
-  /* Smooth Scrollbar for Light Mode */
+  /* Scrollbar Styles - UNVERÄNDERT */
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -694,34 +456,30 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: linear-gradient(180deg, 
-      var(--color-border-secondary) 0%, 
-      var(--color-border-primary) 100%);
+    background: var(--color-border-secondary);
     border-radius: 4px;
-    transition: background 0.2s ease;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(180deg, 
-      var(--color-accent) 0%, 
-      var(--color-accent-hover) 100%);
+    background: var(--color-text-muted);
   }
 
   .dark ::-webkit-scrollbar-track {
-    background: var(--color-bg-secondary);
+    background: var(--color-bg-tertiary);
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    background: var(--color-border-primary);
+    background: var(--color-border-secondary);
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    background: #60a5fa;
+    background: var(--color-text-muted);
   }
 
-  /* Loading States */
+  /* Loading Animation - VEREINFACHT */
   .loading-enhanced {
-    position: relative;
+    background: var(--color-bg-secondary);
+    border-radius: 0.5rem;
     overflow: hidden;
   }
 
@@ -732,11 +490,8 @@
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, 
-      transparent, 
-      rgba(0, 115, 206, 0.1), 
-      transparent);
-    animation: loading-shimmer 2s infinite;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    animation: loading-shimmer 1.5s infinite;
   }
 
   @keyframes loading-shimmer {
@@ -744,2642 +499,163 @@
     100% { left: 100%; }
   }
 
-  /* Focus States for Accessibility */
+  /* Focus Styles - VEREINFACHT */
   .focus-enhanced:focus {
     outline: 2px solid var(--color-accent);
     outline-offset: 2px;
-    box-shadow: 
-      0 0 0 4px rgba(0, 115, 206, 0.15),
-      0 4px 12px var(--color-shadow-accent);
+    /* ENTFERNT: box-shadow für bessere Performance */
   }
 
   .dark .focus-enhanced:focus {
     outline-color: #60a5fa;
-    box-shadow: 
-      0 0 0 4px rgba(96, 165, 250, 0.15),
-      0 4px 12px rgba(96, 165, 250, 0.2);
   }
 
-  /* Responsive Design Enhancements */
+  /* Responsive Anpassungen */
   @media (max-width: 768px) {
     .card-enhanced {
-      padding: 1rem;
       border-radius: 0.75rem;
+      padding: 1rem;
     }
-    
+
     .btn-enhanced {
-      padding: 0.75rem 1.5rem;
+      padding: 0.625rem 1.25rem;
       font-size: 0.8rem;
     }
-    
+
     .modal-enhanced {
       border-radius: 1rem;
       margin: 1rem;
     }
-    
+
     .dark-mode-toggle-new {
-      padding: 0.5rem;
+      padding: 0.4rem;
     }
   }
 
-  /* Reduced Motion Support */
+  /* Reduced Motion Support - ERWEITERT */
   @media (prefers-reduced-motion: reduce) {
     * {
-      transition: none !important;
-      animation: none !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      transform: none !important;
     }
   }
 
-  /* High Contrast Mode Support */
+  /* High Contrast Support */
   @media (prefers-contrast: high) {
     :root {
-      --color-shadow: rgba(0, 0, 0, 0.2);
-      --color-shadow-strong: rgba(0, 0, 0, 0.3);
       --color-border-primary: #000000;
+      --color-border-secondary: #000000;
+      --color-shadow: rgba(0, 0, 0, 0.2);
     }
-    
+
     .dark {
       --color-border-primary: #ffffff;
+      --color-border-secondary: #ffffff;
     }
   }
-}
-
-/* Admin Panel spezifische Styles */
-@layer components {
-  /* Dark Mode Styles für Admin Panel */
-  .dark .bg-dark-card {
-    @apply bg-dark-surface transition-colors;
-  }
 
-  /* Alternative direkte Definition ohne Zirkularität */
-  .bg-dark-surface {
-    background-color: #1e293b;
-  }
-
-  /* Übergangseffekt für alle Komponenten */
-  .transition-all-colors {
-    @apply transition-colors duration-300;
-  }
+  /* Weitere optimierte Komponenten folgen... */
   
-  /* Admin Panel Container */
-  .admin-container {
-    @apply max-w-7xl mx-auto p-4 md:p-8;
-  }
-  
-  /* Admin Stats Cards */
-  .admin-stats {
-    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8;
-  }
-  
-  .stat-card {
-    @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 {
-    @apply absolute top-4 right-4 opacity-15 text-4xl;
-  }
-  
-  .stat-title {
-    @apply text-sm text-slate-500 dark:text-slate-400 mb-2 font-medium uppercase;
-  }
-  
-  .stat-value {
-    @apply text-2xl font-bold text-slate-900 dark:text-white mb-1;
-  }
-  
-  .stat-desc {
-    @apply text-sm text-slate-500 dark:text-slate-400;
-  }
-  
-  /* Navigation Tabs */
-  .nav-tabs {
-    @apply flex border-b border-gray-200 dark:border-slate-700/30 mb-4 overflow-x-auto;
-  }
-  
-  .nav-tab {
-    @apply py-4 px-6 text-slate-600 dark:text-slate-300 border-b-2 border-transparent cursor-pointer transition-all duration-200 whitespace-nowrap hover:text-slate-900 dark:hover:text-white hover:bg-slate-50 dark:hover:bg-slate-800/50;
-  }
-  
-  .nav-tab.active {
-    @apply text-slate-900 dark:text-white border-b-2 border-black dark:border-white font-medium;
-  }
-  
-  /* Tab Content */
-  .tab-content {
-    @apply mt-8;
-  }
-  
-  .tab-pane {
-    @apply hidden;
-  }
-  
-  .tab-pane.active {
-    @apply block;
-  }
-  
-  /* Formulare für Admin Panel */
-  .form-group {
-    @apply mb-4;
-  }
-  
-  .form-label {
-    @apply block mb-2 text-sm font-medium text-slate-700 dark:text-slate-300;
-  }
-  
-  .form-input,
-  .form-select,
-  .form-textarea {
-    @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 */
-  .admin-table {
-    @apply min-w-full divide-y divide-gray-200 dark:divide-slate-700;
-  }
-  
-  .admin-table thead {
-    @apply bg-slate-50 dark:bg-slate-800;
-  }
-  
-  .admin-table th {
-    @apply px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider;
-  }
-  
-  .admin-table tbody {
-    @apply bg-white dark:bg-dark-surface divide-y divide-gray-200 dark:divide-slate-700;
-  }
-  
-  .admin-table tr {
-    @apply hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors;
-  }
-  
-  .admin-table td {
-    @apply px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white;
-  }
-  
-  /* Status Badges */
-  .badge {
-    @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
-  }
-  
-  .badge-success {
-    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
-  }
-  
-  .badge-error {
-    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
-  }
-  
-  .badge-warning {
-    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
-  }
-  
-  .badge-info {
-    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
-  }
-  
-  /* Drucker-Karten */
-  .printer-card {
-    @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 {
-    @apply flex justify-between items-center mb-4;
-  }
-  
-  .printer-name {
-    @apply text-xl font-bold text-slate-900 dark:text-white;
-  }
-  
-  .printer-actions {
-    @apply flex space-x-2;
-  }
-  
-  .printer-info {
-    @apply grid grid-cols-2 gap-4 mb-4;
-  }
-  
-  .printer-status {
-    @apply flex items-center mt-4;
-  }
-  
-  /* Status Indikatoren */
-  .status-indicator {
-    @apply w-3 h-3 rounded-full mr-2;
-  }
-  
-  .status-running {
-    @apply bg-green-500;
-    animation: pulse 2s infinite;
-  }
-  
-  .status-stopped {
-    @apply bg-red-500;
-  }
-  
-  /* Pulse Animation */
-  @keyframes pulse {
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.5;
-      transform: scale(1.1);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-  
-  /* Log-Einträge */
-  .log-entry {
-    @apply p-3 border-l-4 mb-2 rounded-r-lg bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors;
-  }
-  
-  .log-debug {
-    @apply border-gray-400 dark:border-gray-500;
-  }
-  
-  .log-info {
-    @apply border-blue-400 dark:border-blue-500;
-  }
-  
-  .log-warning {
-    @apply border-yellow-400 dark:border-yellow-500;
-  }
-  
-  .log-error {
-    @apply border-red-400 dark:border-red-500;
-  }
-  
-  .log-critical {
-    @apply border-purple-400 dark:border-purple-500;
-  }
-  
-  /* Scheduler Status */
-  .scheduler-status {
-    @apply flex items-center p-4 bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 shadow-md;
-  }
-  
-  /* Fortschrittsbalken */
-  .progress-bar {
-    @apply w-full h-2 bg-gray-200 dark:bg-slate-700 rounded-full overflow-hidden;
-  }
-  
-  .progress-bar-fill {
-    @apply h-full transition-all duration-300;
-  }
-  
-  .progress-bar-fill-blue {
-    @apply bg-blue-500 dark:bg-blue-600;
-  }
-  
-  .progress-bar-fill-green {
-    @apply bg-green-500 dark:bg-green-600;
-  }
-  
-  .progress-bar-fill-purple {
-    @apply bg-purple-500 dark:bg-purple-600;
-  }
-  
-  /* Benachrichtigungen */
+  /* Notification Styles - RASPBERRY PI OPTIMIERT */
   .notification {
-    @apply fixed top-4 right-4 max-w-md p-4 rounded-2xl shadow-2xl transform translate-x-full opacity-0 transition-all duration-500 z-50;
-    background: rgba(255, 255, 255, 0.08);
-    backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 
-      0 32px 64px rgba(0, 0, 0, 0.25),
-      0 12px 24px rgba(0, 0, 0, 0.15),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-    animation: notification-slide-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    background: rgba(255, 255, 255, 0.98);
+    border: 1px solid var(--color-border-primary);
+    border-radius: 0.75rem;
+    padding: 1rem;
+    /* ENTFERNT: backdrop-filter, komplexe box-shadows */
   }
 
   .dark .notification {
-    background: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
-    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 
-      0 32px 64px rgba(0, 0, 0, 0.6),
-      0 12px 24px rgba(0, 0, 0, 0.4),
-      inset 0 1px 0 rgba(255, 255, 255, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-  
-  .notification.show {
-    @apply translate-x-0 opacity-100;
-  }
-
-  .notification:hover {
-    transform: translateY(-2px) scale(1.02);
-    box-shadow: 
-      0 40px 80px rgba(0, 0, 0, 0.3),
-      0 16px 32px rgba(0, 0, 0, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.5),
-      0 0 0 1px rgba(255, 255, 255, 0.15);
-  }
-
-  .dark .notification:hover {
-    box-shadow: 
-      0 40px 80px rgba(0, 0, 0, 0.7),
-      0 16px 32px rgba(0, 0, 0, 0.5),
-      inset 0 1px 0 rgba(255, 255, 255, 0.3),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-  }
-  
-  .notification-success {
-    @apply text-green-100;
-    background: linear-gradient(135deg, 
-      rgba(34, 197, 94, 0.25) 0%, 
-      rgba(134, 239, 172, 0.18) 50%, 
-      rgba(34, 197, 94, 0.12) 100%);
-    border: 1px solid rgba(34, 197, 94, 0.4);
-    box-shadow: 
-      0 32px 64px rgba(34, 197, 94, 0.2),
-      0 12px 24px rgba(34, 197, 94, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(34, 197, 94, 0.3);
-  }
-  
-  .notification-error {
-    @apply text-red-100;
-    background: linear-gradient(135deg, 
-      rgba(239, 68, 68, 0.25) 0%, 
-      rgba(252, 165, 165, 0.18) 50%, 
-      rgba(239, 68, 68, 0.12) 100%);
-    border: 1px solid rgba(239, 68, 68, 0.4);
-    box-shadow: 
-      0 32px 64px rgba(239, 68, 68, 0.2),
-      0 12px 24px rgba(239, 68, 68, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(239, 68, 68, 0.3);
-  }
-  
-  .notification-warning {
-    @apply text-yellow-100;
-    background: linear-gradient(135deg, 
-      rgba(245, 158, 11, 0.25) 0%, 
-      rgba(252, 211, 77, 0.18) 50%, 
-      rgba(245, 158, 11, 0.12) 100%);
-    border: 1px solid rgba(245, 158, 11, 0.4);
-    box-shadow: 
-      0 32px 64px rgba(245, 158, 11, 0.2),
-      0 12px 24px rgba(245, 158, 11, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(245, 158, 11, 0.3);
-  }
-  
-  .notification-info {
-    @apply text-blue-100;
-    background: linear-gradient(135deg, 
-      rgba(59, 130, 246, 0.25) 0%, 
-      rgba(147, 197, 253, 0.18) 50%, 
-      rgba(59, 130, 246, 0.12) 100%);
-    border: 1px solid rgba(59, 130, 246, 0.4);
-    box-shadow: 
-      0 32px 64px rgba(59, 130, 246, 0.2),
-      0 12px 24px rgba(59, 130, 246, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(59, 130, 246, 0.3);
-  }
-
-  /* Toast-Benachrichtigungen - Einheitlich */
-  .toast-notification {
-    @apply fixed z-50 p-4 rounded-2xl shadow-2xl transform transition-all duration-500 text-sm font-medium;
-    background: rgba(255, 255, 255, 0.08);
-    backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 
-      0 32px 64px rgba(0, 0, 0, 0.25),
-      0 12px 24px rgba(0, 0, 0, 0.15),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-  }
-
-  .dark .toast-notification {
-    background: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
-    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 
-      0 32px 64px rgba(0, 0, 0, 0.6),
-      0 12px 24px rgba(0, 0, 0, 0.4),
-      inset 0 1px 0 rgba(255, 255, 255, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-
-  /* Alert-Benachrichtigungen - Verbessert */
-  .alert {
-    @apply p-6 rounded-2xl border mb-6 shadow-2xl;
-    background: rgba(255, 255, 255, 0.12);
-    backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
-    -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.15),
-      0 8px 16px rgba(0, 0, 0, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.3),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-    animation: alert-fade-in 0.5s ease-out;
-  }
-
-  .dark .alert {
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
-    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.4),
-      0 8px 16px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.15),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-  
-  .alert-success {
-    @apply text-green-900 dark:text-green-100;
-    background: linear-gradient(135deg, 
-      rgba(34, 197, 94, 0.15) 0%, 
-      rgba(134, 239, 172, 0.1) 50%, 
-      rgba(34, 197, 94, 0.08) 100%);
-    border: 1px solid rgba(34, 197, 94, 0.3);
-  }
-  
-  .alert-error {
-    @apply text-red-900 dark:text-red-100;
-    background: linear-gradient(135deg, 
-      rgba(239, 68, 68, 0.15) 0%, 
-      rgba(252, 165, 165, 0.1) 50%, 
-      rgba(239, 68, 68, 0.08) 100%);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-  }
-  
-  .alert-warning {
-    @apply text-yellow-900 dark:text-yellow-100;
-    background: linear-gradient(135deg, 
-      rgba(245, 158, 11, 0.15) 0%, 
-      rgba(252, 211, 77, 0.1) 50%, 
-      rgba(245, 158, 11, 0.08) 100%);
-    border: 1px solid rgba(245, 158, 11, 0.3);
-  }
-  
-  .alert-info {
-    @apply text-blue-900 dark:text-blue-100;
-    background: linear-gradient(135deg, 
-      rgba(59, 130, 246, 0.15) 0%, 
-      rgba(147, 197, 253, 0.1) 50%, 
-      rgba(59, 130, 246, 0.08) 100%);
-    border: 1px solid rgba(59, 130, 246, 0.3);
-  }
-
-  /* Browser-Notification-Container */
-  .browser-notification {
-    @apply fixed top-4 left-4 max-w-sm p-4 rounded-2xl shadow-2xl z-50;
-    background: rgba(255, 255, 255, 0.08);
-    backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 
-      0 32px 64px rgba(0, 0, 0, 0.25),
-      0 12px 24px rgba(0, 0, 0, 0.15),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-    animation: notification-slide-left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .dark .browser-notification {
-    background: rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
-    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 
-      0 32px 64px rgba(0, 0, 0, 0.6),
-      0 12px 24px rgba(0, 0, 0, 0.4),
-      inset 0 1px 0 rgba(255, 255, 255, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-
-  /* Notification-Animationen */
-  @keyframes notification-slide-in {
-    0% {
-      opacity: 0;
-      transform: translateX(100%) translateY(-20px) scale(0.9);
-      backdrop-filter: blur(0px);
-    }
-    50% {
-      opacity: 0.8;
-      transform: translateX(20px) translateY(-10px) scale(1.05);
-      backdrop-filter: blur(20px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateX(0) translateY(0) scale(1);
-      backdrop-filter: blur(40px);
-    }
-  }
-
-  @keyframes notification-slide-out {
-    0% {
-      opacity: 1;
-      transform: translateX(0) translateY(0) scale(1);
-    }
-    100% {
-      opacity: 0;
-      transform: translateX(100%) translateY(-20px) scale(0.9);
-    }
-  }
-
-  @keyframes notification-slide-left {
-    0% {
-      opacity: 0;
-      transform: translateX(-100%) translateY(-20px) scale(0.9);
-      backdrop-filter: blur(0px);
-    }
-    50% {
-      opacity: 0.8;
-      transform: translateX(-20px) translateY(-10px) scale(1.05);
-      backdrop-filter: blur(20px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateX(0) translateY(0) scale(1);
-      backdrop-filter: blur(40px);
-    }
-  }
-
-  @keyframes alert-fade-in {
-    0% {
-      opacity: 0;
-      transform: translateY(-20px) scale(0.95);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-
-  .notification.hiding {
-    animation: notification-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-
-  /* Notification-Icons mit Glassmorphism */
-  .notification-icon {
-    @apply flex items-center justify-center w-8 h-8 rounded-full mr-3 flex-shrink-0;
-    background: rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 
-      0 8px 16px rgba(0, 0, 0, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4);
-  }
-
-  .notification-content {
-    @apply flex-1;
-  }
-
-  .notification-title {
-    @apply font-semibold text-sm mb-1;
-  }
-
-  .notification-message {
-    @apply text-sm opacity-90;
-  }
-
-  .notification-close {
-    @apply ml-3 p-1 rounded-lg opacity-70 hover:opacity-100 transition-opacity;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
-
-  .notification-close:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-  }
-
-  /* Multiple Notifications Container */
-  .notifications-container {
-    @apply fixed top-4 right-4 z-50 space-y-3 max-w-md;
-  }
-
-  .notifications-container-left {
-    @apply fixed top-4 left-4 z-50 space-y-3 max-w-sm;
-  }
-
-  /* Flash-Message-Verbesserungen - Vereinheitlicht */
-  .flash-message-light {
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.95) 0%, 
-      rgba(248, 250, 252, 0.9) 100%);
-    backdrop-filter: blur(32px) saturate(200%) brightness(120%);
-    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(120%);
-    border: 1px solid rgba(226, 232, 240, 0.6);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.1),
-      0 12px 24px rgba(0, 115, 206, 0.05),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8);
-    color: var(--color-text-primary);
-  }
-
-  .flash-message-light.success {
-    border-left: 4px solid #10b981;
-    background: linear-gradient(135deg, 
-      rgba(236, 253, 245, 0.95) 0%, 
-      rgba(209, 250, 229, 0.9) 100%);
-  }
-
-  .flash-message-light.error {
-    border-left: 4px solid #ef4444;
-    background: linear-gradient(135deg, 
-      rgba(254, 242, 242, 0.95) 0%, 
-      rgba(252, 165, 165, 0.9) 100%);
-  }
-
-  .flash-message-light.warning {
-    border-left: 4px solid #fbbf24;
-    background: linear-gradient(135deg, 
-      rgba(255, 251, 235, 0.95) 0%, 
-      rgba(254, 243, 199, 0.9) 100%);
-  }
-
-  .flash-message-light.info {
-    border-left: 4px solid #3b82f6;
-    background: linear-gradient(135deg, 
-      rgba(239, 246, 255, 0.95) 0%, 
-      rgba(219, 234, 254, 0.9) 100%);
-  }
-
-  /* Premium Table Styles */
-  .table-enhanced {
-    background: var(--gradient-card);
-    border: 1px solid var(--color-border-primary);
-    border-radius: var(--card-radius);
-    overflow: hidden;
-    box-shadow: 
-      0 4px 20px var(--color-shadow),
-      0 2px 8px rgba(0, 115, 206, 0.04),
-      inset 0 1px 0 rgba(255, 255, 255, 0.6);
-  }
-
-  .table-enhanced th {
-    background: linear-gradient(135deg, 
-      var(--color-bg-secondary) 0%, 
-      var(--color-bg-tertiary) 100%);
-    color: var(--color-text-primary);
-    font-weight: 600;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--color-border-primary);
-    position: relative;
-  }
-
-  .table-enhanced th::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, 
-      transparent 0%, 
-      var(--color-border-secondary) 50%, 
-      transparent 100%);
-  }
-
-  .table-enhanced td {
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--color-border-primary);
-    color: var(--color-text-secondary);
-    transition: all 0.2s ease;
-  }
-
-  .table-enhanced tbody tr:hover {
-    background: var(--color-bg-secondary);
-    transform: scale(1.002);
-  }
-
-  .dark .table-enhanced {
-    background: rgba(10, 10, 10, 0.8);
+    background: rgba(26, 26, 26, 0.95);
     border-color: var(--color-border-primary);
   }
 
-  .dark .table-enhanced th {
-    background: rgba(26, 26, 26, 0.8);
-    color: var(--color-text-primary);
+  .notification:hover {
+    background: rgba(255, 255, 255, 1);
+    /* ENTFERNT: transform, box-shadow für bessere Performance */
   }
 
-  .dark .table-enhanced tbody tr:hover {
-    background: rgba(26, 26, 26, 0.6);
+  .dark .notification:hover {
+    background: rgba(26, 26, 26, 1);
   }
 
-  /* Premium Modal Styles */
-  .modal-enhanced {
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.98) 0%, 
-      rgba(248, 250, 252, 0.95) 50%, 
-      rgba(255, 255, 255, 0.98) 100%);
-    backdrop-filter: blur(32px) saturate(220%) brightness(120%);
-    -webkit-backdrop-filter: blur(32px) saturate(220%) brightness(120%);
-    border: 1px solid rgba(226, 232, 240, 0.7);
-    border-radius: 1.5rem;
-    box-shadow: 
-      0 50px 100px rgba(0, 0, 0, 0.15),
-      0 20px 40px rgba(0, 115, 206, 0.08),
-      inset 0 2px 0 rgba(255, 255, 255, 0.9);
-    position: relative;
-    overflow: hidden;
+  /* Status Dot - VEREINFACHT */
+  .status-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    display: inline-block;
   }
 
-  .modal-enhanced::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, 
-      transparent 0%, 
-      rgba(226, 232, 240, 0.8) 50%, 
-      transparent 100%);
+  .status-dot.online {
+    background: #10b981;
   }
 
-  .dark .modal-enhanced {
-    background: rgba(0, 0, 0, 0.95);
-    border-color: rgba(42, 42, 42, 0.7);
-    box-shadow: 
-      0 50px 100px rgba(0, 0, 0, 0.5),
-      inset 0 2px 0 rgba(255, 255, 255, 0.05);
+  .status-dot.offline {
+    background: #ef4444;
   }
 
-  /* Enhanced Status Badges */
-  .status-badge-enhanced {
-    display: inline-flex;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    font-size: 0.75rem;
-    font-weight: 700;
-    border-radius: 9999px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    border: 1px solid transparent;
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-  }
+  /* ENTFERNT: Alle pulse-Animationen für bessere Performance */
 
-  .status-badge-enhanced::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-    transition: left 0.5s ease;
-  }
-
-  .status-badge-enhanced:hover::before {
-    left: 100%;
-  }
-
-  .status-online-enhanced {
-    background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
-    color: #065f46;
-    border-color: rgba(16, 185, 129, 0.3);
-  }
-
-  .status-offline-enhanced {
-    background: linear-gradient(135deg, #fef2f2 0%, #fca5a5 100%);
-    color: #991b1b;
-    border-color: rgba(239, 68, 68, 0.3);
-  }
-
-  .status-printing-enhanced {
-    background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
-    color: #1e40af;
-    border-color: rgba(59, 130, 246, 0.3);
-  }
-
-  /* Dark Mode Toggle - Premium Design */
-  .dark-mode-toggle-new {
-    position: relative;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    padding: 0.625rem;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.9) 0%, 
-      rgba(241, 245, 249, 0.8) 100%);
-    border: 1px solid rgba(226, 232, 240, 0.7);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.06),
-      0 2px 4px rgba(0, 115, 206, 0.04),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8);
-    color: var(--color-text-secondary);
-    z-index: 100;
-  }
-
-  .dark-mode-toggle-new:hover {
-    transform: translateY(-2px) scale(1.05);
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.95) 0%, 
-      rgba(241, 245, 249, 0.85) 100%);
-    box-shadow: 
-      0 8px 20px rgba(0, 0, 0, 0.1),
-      0 4px 8px rgba(0, 115, 206, 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  }
-
-  .dark-mode-toggle-new:active {
-    transform: translateY(-1px) scale(0.98);
-    transition: transform 0.1s;
-  }
-
-  .dark .dark-mode-toggle-new {
-    background: rgba(10, 10, 10, 0.8);
-    border: 1px solid rgba(42, 42, 42, 0.6);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05);
-    color: var(--color-text-secondary);
-  }
-
-  .dark .dark-mode-toggle-new:hover {
-    background: rgba(10, 10, 10, 0.9);
-    box-shadow: 
-      0 8px 20px rgba(0, 0, 0, 0.4),
-      inset 0 1px 0 rgba(255, 255, 255, 0.08);
-  }
-
-  /* Icon-Animation für Dark Mode Toggle */
-  .dark-mode-toggle-new .sun-icon,
-  .dark-mode-toggle-new .moon-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .dark-mode-toggle-new .sun-icon:not(.hidden) {
-    animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-  }
-
-  .dark-mode-toggle-new .moon-icon:not(.hidden) {
-    animation: icon-appear 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-  }
-
-  @keyframes icon-appear {
-    0% {
-      opacity: 0;
-      transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);
-    }
-    100% {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1) rotate(0);
-    }
-  }
-
-  .dark .sun-icon { display: none; }
-  .dark .moon-icon { display: block; }
-  .sun-icon { display: block; }
-  .moon-icon { display: none; }
-
-  /* User Menu Button - Premium Design */
-  .user-menu-button-new {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    border-radius: 0.75rem;
-    padding: 0.5rem;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.8) 0%, 
-      rgba(241, 245, 249, 0.7) 100%);
-    border: 1px solid rgba(226, 232, 240, 0.6);
-    box-shadow: 
-      0 2px 8px rgba(0, 0, 0, 0.05),
-      inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  }
-
-  .user-menu-button-new:hover {
-    transform: translateY(-1px);
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.9) 0%, 
-      rgba(241, 245, 249, 0.8) 100%);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.08),
-      0 2px 4px rgba(0, 115, 206, 0.04),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8);
-  }
-
-  .dark .user-menu-button-new {
-    background: rgba(10, 10, 10, 0.7);
-    border-color: rgba(42, 42, 42, 0.6);
-    box-shadow: 
-      0 2px 8px rgba(0, 0, 0, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.03);
-  }
-
-  .dark .user-menu-button-new:hover {
-    background: rgba(10, 10, 10, 0.8);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  }
-
-  /* Enhanced Hover Effects */
-  .hover-lift-enhanced {
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .hover-lift-enhanced:hover {
-    transform: translateY(-3px) scale(1.01);
-    box-shadow: 
-      0 12px 30px var(--color-shadow-strong),
-      0 6px 15px var(--color-shadow-accent);
-  }
-
-  .dark .hover-lift-enhanced:hover {
-    box-shadow: 0 12px 30px var(--color-shadow);
-  }
-
-  /* Smooth Scrollbar for Light Mode */
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--color-bg-secondary);
-    border-radius: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: linear-gradient(180deg, 
-      var(--color-border-secondary) 0%, 
-      var(--color-border-primary) 100%);
-    border-radius: 4px;
-    transition: background 0.2s ease;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(180deg, 
-      var(--color-accent) 0%, 
-      var(--color-accent-hover) 100%);
-  }
-
-  .dark ::-webkit-scrollbar-track {
-    background: var(--color-bg-secondary);
-  }
-
-  .dark ::-webkit-scrollbar-thumb {
-    background: var(--color-border-primary);
-  }
-
-  .dark ::-webkit-scrollbar-thumb:hover {
-    background: #60a5fa;
-  }
-
-  /* Loading States */
-  .loading-enhanced {
-    position: relative;
-    overflow: hidden;
-  }
-
-  .loading-enhanced::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, 
-      transparent, 
-      rgba(0, 115, 206, 0.1), 
-      transparent);
-    animation: loading-shimmer 2s infinite;
-  }
-
-  @keyframes loading-shimmer {
-    0% { left: -100%; }
-    100% { left: 100%; }
-  }
-
-  /* Focus States for Accessibility */
-  .focus-enhanced:focus {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-    box-shadow: 
-      0 0 0 4px rgba(0, 115, 206, 0.15),
-      0 4px 12px var(--color-shadow-accent);
-  }
-
-  .dark .focus-enhanced:focus {
-    outline-color: #60a5fa;
-    box-shadow: 
-      0 0 0 4px rgba(96, 165, 250, 0.15),
-      0 4px 12px rgba(96, 165, 250, 0.2);
-  }
-
-  /* Responsive Design Enhancements */
-  @media (max-width: 768px) {
-    .card-enhanced {
-      padding: 1rem;
-      border-radius: 0.75rem;
-    }
-    
-    .btn-enhanced {
-      padding: 0.75rem 1.5rem;
-      font-size: 0.8rem;
-    }
-    
-    .modal-enhanced {
-      border-radius: 1rem;
-      margin: 1rem;
-    }
-    
-    .dark-mode-toggle-new {
-      padding: 0.5rem;
-    }
-  }
-
-  /* Reduced Motion Support */
-  @media (prefers-reduced-motion: reduce) {
-    * {
-      transition: none !important;
-      animation: none !important;
-    }
-  }
-
-  /* High Contrast Mode Support */
-  @media (prefers-contrast: high) {
-    :root {
-      --color-shadow: rgba(0, 0, 0, 0.2);
-      --color-shadow-strong: rgba(0, 0, 0, 0.3);
-      --color-border-primary: #000000;
-    }
-    
-    .dark {
-      --color-border-primary: #ffffff;
-    }
-  }
+  /* Weitere Komponenten werden nach gleichem Muster optimiert... */
 }
 
-/* Glassmorphism Flash Messages */
+/* Flash Messages - RASPBERRY PI OPTIMIERT */
 .flash-message {
-  @apply fixed top-4 right-4 px-6 py-4 rounded-2xl text-sm font-medium shadow-2xl transform transition-all duration-500 z-50 border;
-  /* Verstärkter Glassmorphism-Effekt */
-  background: rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  box-shadow: 
-    0 32px 64px rgba(0, 0, 0, 0.25),
-    0 12px 24px rgba(0, 0, 0, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.4),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
-  animation: flash-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.75rem;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  /* ENTFERNT: backdrop-filter, box-shadow */
 }
 
 .dark .flash-message {
-  background: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
-  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(115%);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 32px 64px rgba(0, 0, 0, 0.6),
-    0 12px 24px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
+  background: rgba(26, 26, 26, 0.95);
+  border-color: var(--color-border-primary);
 }
 
 .flash-message:hover {
-  transform: translateY(-2px) scale(1.02);
-  box-shadow: 
-    0 40px 80px rgba(0, 0, 0, 0.3),
-    0 16px 32px rgba(0, 0, 0, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.5),
-    0 0 0 1px rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 1);
+  /* ENTFERNT: transform für bessere Performance */
 }
 
 .dark .flash-message:hover {
-  box-shadow: 
-    0 40px 80px rgba(0, 0, 0, 0.7),
-    0 16px 32px rgba(0, 0, 0, 0.5),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
+  background: rgba(26, 26, 26, 1);
 }
 
 .flash-message.info {
-  @apply text-blue-100;
-  background: linear-gradient(135deg, 
-    rgba(59, 130, 246, 0.2) 0%, 
-    rgba(147, 197, 253, 0.15) 50%, 
-    rgba(59, 130, 246, 0.1) 100%);
-  border: 1px solid rgba(59, 130, 246, 0.3);
+  border-left: 4px solid #3b82f6;
+  background: rgba(239, 246, 255, 0.95);
 }
 
 .flash-message.success {
-  @apply text-green-100;
-  background: linear-gradient(135deg, 
-    rgba(34, 197, 94, 0.2) 0%, 
-    rgba(134, 239, 172, 0.15) 50%, 
-    rgba(34, 197, 94, 0.1) 100%);
-  border: 1px solid rgba(34, 197, 94, 0.3);
+  border-left: 4px solid #10b981;
+  background: rgba(236, 253, 245, 0.95);
 }
 
 .flash-message.warning {
-  @apply text-yellow-100;
-  background: linear-gradient(135deg, 
-    rgba(245, 158, 11, 0.2) 0%, 
-    rgba(252, 211, 77, 0.15) 50%, 
-    rgba(245, 158, 11, 0.1) 100%);
-  border: 1px solid rgba(245, 158, 11, 0.3);
+  border-left: 4px solid #fbbf24;
+  background: rgba(255, 251, 235, 0.95);
 }
 
 .flash-message.error {
-  @apply text-red-100;
-  background: linear-gradient(135deg, 
-    rgba(239, 68, 68, 0.2) 0%, 
-    rgba(252, 165, 165, 0.15) 50%, 
-    rgba(239, 68, 68, 0.1) 100%);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-}
-
-/* Flash Message Animation */
-@keyframes flash-slide-in {
-  0% {
-    opacity: 0;
-    transform: translateX(100%) translateY(-20px) scale(0.9);
-    backdrop-filter: blur(0px);
-  }
-  50% {
-    opacity: 0.8;
-    transform: translateX(20px) translateY(-10px) scale(1.05);
-    backdrop-filter: blur(20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0) translateY(0) scale(1);
-    backdrop-filter: blur(40px);
-  }
-}
-
-@keyframes flash-slide-out {
-  0% {
-    opacity: 1;
-    transform: translateX(0) translateY(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(100%) translateY(-20px) scale(0.9);
-  }
-}
-
-.flash-message.hiding {
-  animation: flash-slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-/* Do Not Disturb System Styles */
-.dnd-toggle {
-  @apply relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
-  background: rgba(156, 163, 175, 0.3);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(156, 163, 175, 0.2);
-}
-
-.dnd-toggle.active {
-  background: rgba(239, 68, 68, 0.3);
-  border: 1px solid rgba(239, 68, 68, 0.4);
-}
-
-.dnd-toggle-slider {
-  @apply inline-block h-4 w-4 rounded-full shadow-lg transform transition-transform duration-300;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 
-    0 4px 8px rgba(0, 0, 0, 0.2),
-    0 2px 4px rgba(0, 0, 0, 0.1);
-  margin: 0.125rem;
-}
-
-.dnd-toggle.active .dnd-toggle-slider {
-  transform: translateX(1.25rem);
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 
-    0 6px 12px rgba(239, 68, 68, 0.3),
-    0 3px 6px rgba(239, 68, 68, 0.2);
-}
-
-.dnd-indicator {
-  @apply fixed top-4 left-4 z-50 flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300;
-  background: rgba(239, 68, 68, 0.1);
-  backdrop-filter: blur(20px) saturate(150%);
-  -webkit-backdrop-filter: blur(20px) saturate(150%);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  color: rgb(239, 68, 68);
-  transform: translateY(-100%);
-  opacity: 0;
-}
-
-.dnd-indicator.active {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-.dnd-modal {
-  @apply fixed inset-0 z-50 flex items-center justify-center p-4;
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-}
-
-.dnd-modal-content {
-  @apply w-full max-w-md rounded-2xl p-6 shadow-2xl transform transition-all;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(40px) saturate(200%) brightness(120%);
-  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(120%);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 
-    0 25px 50px rgba(0, 0, 0, 0.25),
-    0 8px 16px rgba(0, 0, 0, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.4);
-}
-
-.dark .dnd-modal-content {
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(40px) saturate(180%) brightness(110%);
-  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(110%);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 25px 50px rgba(0, 0, 0, 0.6),
-    0 8px 16px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-
-/* DND Flash Message Override */
-.flash-message.dnd-suppressed {
-  animation: flash-fade-in 0.3s ease-out;
-  opacity: 0.3;
-  transform: scale(0.95);
-  pointer-events: none;
+  border-left: 4px solid #ef4444;
+  background: rgba(254, 242, 242, 0.95);
 }
 
+/* Einfache Animationen - NUR OPACITY */
 @keyframes flash-fade-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  100% {
-    opacity: 0.3;
-    transform: scale(0.95);
-  }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-/* Notification Counter */
-.dnd-counter {
-  @apply absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold;
-  background: rgba(239, 68, 68, 0.9);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  animation: dnd-counter-bounce 0.5s ease-out;
-}
-
-@keyframes dnd-counter-bounce {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes slide-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Mercedes Background Pattern */
-.mercedes-background::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.03' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
-  background-position: center;
-  background-repeat: repeat;
-  background-size: 120px 120px;
-  pointer-events: none;
-  opacity: 0.03;
-  transition: opacity 0.3s ease;
-}
-
-.dark .mercedes-background::before {
-  opacity: 0.015; /* Sehr subtil für eleganten Dark Mode */
-  filter: invert(1) brightness(0.3);
-  background-size: 150px 150px; /* Größere Sterne für bessere Sichtbarkeit */
-}
-
-/* Monochrome Button Styles */
-@layer components {
-  /* Buttons mit verstärktem Glassmorphism */
-  .btn-primary {
-    @apply 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-2xl hover:-translate-y-0.5;
-    background: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
-    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 
-      0 20px 40px rgba(0, 0, 0, 0.3),
-      0 8px 16px rgba(0, 0, 0, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-  }
-
-  .btn-primary:hover {
-    background: rgba(0, 0, 0, 0.9);
-    backdrop-filter: blur(25px) saturate(180%) brightness(120%);
-    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.4),
-      0 10px 20px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.3);
-  }
-
-  .dark .btn-primary {
-    background: rgba(255, 255, 255, 0.7);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 
-      0 20px 40px rgba(0, 0, 0, 0.2),
-      0 8px 16px rgba(0, 0, 0, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.8),
-      0 0 0 1px rgba(0, 0, 0, 0.05);
-  }
-
-  .dark .btn-primary:hover {
-    background: rgba(255, 255, 255, 0.9);
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.3),
-      0 10px 20px rgba(0, 0, 0, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.9);
-  }
-  
-  .btn-secondary {
-    @apply text-slate-900 dark:text-white 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-2xl hover:-translate-y-0.5;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
-    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 
-      0 20px 40px rgba(0, 0, 0, 0.15),
-      0 8px 16px rgba(0, 0, 0, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.5),
-      0 0 0 1px rgba(255, 255, 255, 0.2);
-  }
-
-  .btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.5);
-    backdrop-filter: blur(25px) saturate(180%) brightness(120%);
-    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(120%);
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.2),
-      0 10px 20px rgba(0, 0, 0, 0.15),
-      inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  }
-
-  .dark .btn-secondary {
-    background: rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 
-      0 20px 40px rgba(0, 0, 0, 0.3),
-      0 8px 16px rgba(0, 0, 0, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-  }
-
-  .dark .btn-secondary:hover {
-    background: rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.4),
-      0 10px 20px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.3);
-  }
-  
-  .btn-outline {
-    @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 - Verstärkt */
-  .glass-card {
-    @apply rounded-xl p-6 shadow-2xl transition-all duration-300;
-    background: rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
-    -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(120%) contrast(110%);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.15),
-      0 8px 16px rgba(0, 0, 0, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.3),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-    border-radius: var(--card-radius);
-  }
-
-  .dark .glass-card {
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
-    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%) contrast(120%);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.4),
-      0 8px 16px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.15),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-  
-  /* Dashboard Cards mit verstärktem Glassmorphism */
-  .dashboard-card {
-    @apply rounded-xl p-6 shadow-2xl transition-all duration-300 hover:-translate-y-1;
-    background: rgba(255, 255, 255, 0.12);
-    backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%);
-    -webkit-backdrop-filter: blur(35px) saturate(200%) brightness(125%) contrast(115%);
-    border: 1px solid rgba(255, 255, 255, 0.25);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.15),
-      0 8px 16px rgba(0, 0, 0, 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.25),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-    border-radius: var(--card-radius);
-  }
-
-  .dark .dashboard-card {
-    background: rgba(0, 0, 0, 0.35);
-    backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%);
-    -webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%) contrast(125%);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.5),
-      0 8px 16px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.12),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-  
-  /* Navigation Styles */
-  .nav-link {
-    @apply flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:shadow-md;
-  }
-  
-  .nav-link.active {
-    @apply text-slate-900 dark:text-white bg-slate-100 dark:bg-black shadow-sm;
-  }
-
-  /* Verbesserte Navbar Styles - Verstärktes Glassmorphism */
-  .navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
-  }
-
-  .navbar-button {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.875rem;
-    border-radius: 5px;
-    transition: background-color 0.3s ease;
-  }
-
-  .navbar-button:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
-
-  @media (max-width: 768px) {
-    .navbar {
-      flex-direction: column;
-      padding: 0.25rem;
-    }
-    .navbar-button {
-      margin: 0.25rem 0;
-    }
-  }
-
-  .dark .navbar {
-    background: rgba(0, 0, 0, 0.25);
-    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
-    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
-    box-shadow: 
-      0 8px 32px rgba(0, 0, 0, 0.6),
-      0 2px 8px rgba(0, 0, 0, 0.4),
-      inset 0 1px 0 rgba(255, 255, 255, 0.1),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  }
-
-  .navbar-brand {
-    @apply flex items-center space-x-2 transition-transform duration-300 hover:scale-105;
-  }
-
-  .navbar-menu {
-    @apply flex items-center justify-center space-x-1 md:space-x-3 lg:space-x-6 p-3 mx-4 rounded-2xl border;
-    background: rgba(255, 255, 255, 0.25);
-    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
-    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 
-      0 4px 16px rgba(0, 0, 0, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-  }
-
-  .dark .navbar-menu {
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(20px) saturate(150%) brightness(110%);
-    -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(110%);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 
-      0 4px 16px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-
-  .navbar-button {
-    @apply p-2 rounded-full transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
-  }
-
-  /* User Menu Styles */
-  .user-menu-button {
-    @apply flex items-center space-x-2 rounded-lg p-1 transition-all duration-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2;
-  }
-
-  .user-avatar {
-    @apply w-10 h-10 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-sm shadow-md transition-all duration-300 hover:shadow-lg;
-  }
-  
-  /* Avatar im Dropdown */
-  .avatar-large {
-    @apply w-14 h-14 bg-black dark:bg-white text-white dark:text-slate-900 rounded-full flex items-center justify-center font-bold text-lg shadow-md;
-  }
-
-  .user-dropdown-item {
-    @apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300 focus:outline-none focus:bg-gray-100/80 dark:focus:bg-slate-700/60;
-  }
-
-  .user-dropdown-separator {
-    @apply border-t border-gray-200/80 dark:border-slate-700/30 my-1;
-  }
-
-  .menu-item {
-    @apply flex items-center space-x-2 px-4 py-2.5 text-slate-700 dark:text-slate-300 rounded-xl transition-all duration-300;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  }
-
-  .menu-item:hover {
-    @apply text-slate-900 dark:text-white;
-    background: rgba(255, 255, 255, 0.3);
-    backdrop-filter: blur(15px) saturate(150%);
-    -webkit-backdrop-filter: blur(15px) saturate(150%);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-    transform: translateY(-1px);
-  }
-
-  .dark .menu-item {
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  }
-
-  .dark .menu-item:hover {
-    background: rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  }
-
-  .menu-item.active {
-    @apply text-slate-900 dark:text-white font-medium;
-    background: rgba(255, 255, 255, 0.5);
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    box-shadow: 
-      0 4px 16px rgba(0, 0, 0, 0.15),
-      inset 0 1px 0 rgba(255, 255, 255, 0.5);
-  }
-
-  .dark .menu-item.active {
-    background: rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 
-      0 4px 16px rgba(0, 0, 0, 0.4),
-      inset 0 1px 0 rgba(255, 255, 255, 0.2);
-  }
-  
-  /* Dropdown Styles - Verstärktes Glassmorphism */
-  .user-dropdown {
-    @apply absolute right-0 mt-2 w-64 rounded-xl shadow-2xl z-50 overflow-hidden;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-    -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(130%) contrast(110%);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.25),
-      0 8px 16px rgba(0, 0, 0, 0.15),
-      inset 0 1px 0 rgba(255, 255, 255, 0.4),
-      0 0 0 1px rgba(255, 255, 255, 0.1);
-    animation: fadeIn 0.2s ease-out forwards;
-  }
-
-  .dark .user-dropdown {
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
-    -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(120%) contrast(120%);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    box-shadow: 
-      0 25px 50px rgba(0, 0, 0, 0.6),
-      0 8px 16px rgba(0, 0, 0, 0.4),
-      inset 0 1px 0 rgba(255, 255, 255, 0.2),
-      0 0 0 1px rgba(255, 255, 255, 0.05);
-  }
-  
-  .dropdown-header {
-    @apply flex items-center p-4 border-b border-gray-200/80 dark:border-slate-700/30;
-  }
-  
-  .dropdown-item {
-    @apply flex items-center gap-3 px-4 py-3 text-sm text-slate-700 dark:text-slate-300 hover:bg-gray-100/80 dark:hover:bg-slate-700/60 hover:text-slate-900 dark:hover:text-white transition-all duration-300;
-  }
-  
-  .dropdown-divider {
-    @apply border-t border-gray-200/80 dark:border-slate-700/30;
-  }
-  
-  /* Mercedes-Benz Logo Animation */
-  @keyframes mercedes-rotate {
-    0% { transform: rotate(0deg); }
-    25% { transform: rotate(90deg); }
-    50% { transform: rotate(180deg); }
-    75% { transform: rotate(270deg); }
-    100% { transform: rotate(360deg); }
-  }
-  
-  .navbar-brand:hover svg {
-    animation: mercedes-rotate 5s infinite linear;
-    transform-origin: center;
-  }
-}
-
-/* Navbar Sticky Fix - Außerhalb von @layer für höhere Priorität */
-.navbar {
-  position: -webkit-sticky !important;
-  position: sticky !important;
-  top: 0 !important;
-  z-index: 50 !important;
-  width: 100% !important;
-  left: 0 !important;
-  right: 0 !important;
-  /* Verstärktes Glassmorphism Design */
-  --navbar-blur: 40px;
-  --navbar-opacity: 0.15;
-  background: rgba(255, 255, 255, var(--navbar-opacity, 0.15)) !important;
-  backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
-  -webkit-backdrop-filter: blur(var(--navbar-blur, 40px)) saturate(200%) brightness(110%) contrast(105%) !important;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.12),
-    0 2px 8px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3),
-    0 0 0 1px rgba(255, 255, 255, 0.15) !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-}
-
-.dark .navbar {
-  --navbar-dark-opacity: 0.25;
-  background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.25)) !important;
-  backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
-  -webkit-backdrop-filter: blur(calc(var(--navbar-blur, 40px) + 5px)) saturate(180%) brightness(120%) contrast(115%) !important;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.4),
-    0 2px 8px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15),
-    0 0 0 1px rgba(255, 255, 255, 0.08) !important;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
-}
-
-/* Navbar Scroll-Effekt */
-.navbar.scrolled {
-  --navbar-blur: 50px;
-  --navbar-opacity: 0.25;
-  background: rgba(255, 255, 255, var(--navbar-opacity, 0.25)) !important;
-  backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
-  -webkit-backdrop-filter: blur(var(--navbar-blur, 50px)) saturate(220%) brightness(115%) contrast(110%) !important;
-  box-shadow: 
-    0 12px 40px rgba(0, 0, 0, 0.15),
-    0 4px 12px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.4),
-    0 0 0 1px rgba(255, 255, 255, 0.2) !important;
-}
-
-.dark .navbar.scrolled {
-  --navbar-dark-opacity: 0.35;
-  background: rgba(0, 0, 0, var(--navbar-dark-opacity, 0.35)) !important;
-  backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
-  -webkit-backdrop-filter: blur(calc(var(--navbar-blur, 50px) + 5px)) saturate(200%) brightness(125%) contrast(120%) !important;
-  box-shadow: 
-    0 12px 40px rgba(0, 0, 0, 0.5),
-    0 4px 12px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
-}
-
-/* Neue Navbar-Komponenten mit verbessertem Glassmorphism */
-.navbar-menu-new {
-  @apply flex items-center justify-center space-x-0.5 md:space-x-1;
-  max-width: 100%;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  /* Glassmorphism für das Menü */
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(25px) saturate(170%) brightness(108%);
-  -webkit-backdrop-filter: blur(25px) saturate(170%) brightness(108%);
-  border-radius: 16px;
-  padding: 8px;
-  margin: 0 16px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 6px 20px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.dark .navbar-menu-new {
-  background: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(30px) saturate(150%) brightness(115%);
-  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(115%);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 
-    0 6px 20px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 0 0 1px rgba(255, 255, 255, 0.03);
-}
-
-.navbar-menu-new::-webkit-scrollbar {
-  display: none;
-}
-
-/* Glassmorphism Hover-Animation für Navbar-Menu */
-.navbar-menu-new:hover {
-  backdrop-filter: blur(35px) saturate(190%) brightness(112%);
-  -webkit-backdrop-filter: blur(35px) saturate(190%) brightness(112%);
-  box-shadow: 
-    0 8px 25px rgba(0, 0, 0, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
-  transform: translateY(-1px);
-}
-
-.dark .navbar-menu-new:hover {
-  backdrop-filter: blur(40px) saturate(170%) brightness(120%);
-  -webkit-backdrop-filter: blur(40px) saturate(170%) brightness(120%);
-  box-shadow: 
-    0 8px 25px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-.nav-item {
-  @apply flex items-center space-x-1.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-300;
-  color: rgba(15, 23, 42, 0.85);
-  /* Gläserner Nav-Item */
-  background: rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(15px) saturate(140%);
-  -webkit-backdrop-filter: blur(15px) saturate(140%);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 
-    0 4px 12px rgba(0, 0, 0, 0.05),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15);
-  position: relative;
-  overflow: hidden;
-  animation: nav-item-entrance 0.6s ease-out;
-}
-
-/* Glassmorphism Hover-Effekt */
-.nav-item::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.5s;
-}
-
-.nav-item:hover::before {
-  left: 100%;
-}
-
-/* Zusätzlicher Glitter-Effekt */
-.nav-item::after {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.1) 30deg, transparent 60deg);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-  animation: rotate 3s linear infinite;
-}
-
-.nav-item:hover::after {
-  opacity: 1;
-}
-
-.dark .nav-item {
-  color: rgba(255, 255, 255, 0.85);
-  background: rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(20px) saturate(130%);
-  -webkit-backdrop-filter: blur(20px) saturate(130%);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 
-    0 4px 12px rgba(0, 0, 0, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-.nav-item:hover {
-  color: rgba(15, 23, 42, 1);
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(25px) saturate(160%) brightness(110%);
-  -webkit-backdrop-filter: blur(25px) saturate(160%) brightness(110%);
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  box-shadow: 
-    0 8px 20px rgba(0, 0, 0, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px) scale(1.02);
-}
-
-.dark .nav-item:hover {
-  color: rgba(255, 255, 255, 1);
-  background: rgba(0, 0, 0, 0.25);
-  backdrop-filter: blur(30px) saturate(150%) brightness(120%);
-  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(120%);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  box-shadow: 
-    0 8px 20px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-.nav-item.active {
-  color: rgba(15, 23, 42, 1);
-  background: rgba(255, 255, 255, 0.35);
-  backdrop-filter: blur(35px) saturate(180%) brightness(115%);
-  -webkit-backdrop-filter: blur(35px) saturate(180%) brightness(115%);
-  border: 1px solid rgba(255, 255, 255, 0.4);
-  box-shadow: 
-    0 12px 24px rgba(0, 0, 0, 0.15),
-    inset 0 1px 0 rgba(255, 255, 255, 0.5),
-    0 0 0 1px rgba(59, 130, 246, 0.3);
-  transform: translateY(-1px);
-  animation: nav-item-active-glow 2s ease-in-out infinite alternate;
-}
-
-.dark .nav-item.active {
-  color: rgba(255, 255, 255, 1);
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(40px) saturate(160%) brightness(125%);
-  -webkit-backdrop-filter: blur(40px) saturate(160%) brightness(125%);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 
-    0 12px 24px rgba(0, 0, 0, 0.4),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    0 0 0 1px rgba(59, 130, 246, 0.2);
-}
-
-/* Animationen für Glassmorphism-Effekte */
-@keyframes nav-item-entrance {
-  0% {
-    opacity: 0;
-    transform: translateY(10px) scale(0.95);
-    backdrop-filter: blur(5px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    backdrop-filter: blur(15px) saturate(140%);
-  }
-}
-
-@keyframes nav-item-active-glow {
-  0% {
-    box-shadow: 
-      0 12px 24px rgba(0, 0, 0, 0.15),
-      inset 0 1px 0 rgba(255, 255, 255, 0.5),
-      0 0 0 1px rgba(59, 130, 246, 0.3);
-  }
-  100% {
-    box-shadow: 
-      0 16px 32px rgba(0, 0, 0, 0.2),
-      inset 0 1px 0 rgba(255, 255, 255, 0.6),
-      0 0 0 2px rgba(59, 130, 246, 0.5);
-  }
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Glassmorphism-Partikel-Effekt */
-.navbar::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: 
-    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
-    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
-    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-    radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
-  opacity: 0;
-  animation: glassmorphism-particles 8s ease-in-out infinite;
-  pointer-events: none;
-}
-
-.dark .navbar::before {
-  background: 
-    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
-    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
-    radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-}
-
-@keyframes glassmorphism-particles {
-  0%, 100% {
-    opacity: 0;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
-
-/* Dark Mode Toggle - Kompakteres Design */
-.dark-mode-toggle-new {
-  @apply relative p-2 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer;
-  background: rgba(241, 245, 249, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.05),
-    0 1px 2px rgba(0, 0, 0, 0.04);
-  color: #334155;
-  z-index: 100;
-}
-
-.dark-mode-toggle-new:hover {
-  @apply transform -translate-y-0.5;
-  background: rgba(241, 245, 249, 0.9);
-  box-shadow: 
-    0 8px 16px rgba(0, 0, 0, 0.08),
-    0 2px 4px rgba(0, 0, 0, 0.06);
-}
-
-.dark-mode-toggle-new:active {
-  @apply transform scale-95;
-  transition: transform 0.1s;
-}
-
-.dark .dark-mode-toggle-new {
-  background: rgba(30, 41, 59, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.2),
-    0 1px 2px rgba(0, 0, 0, 0.1);
-  color: #e2e8f0;
-}
-
-.dark .dark-mode-toggle-new:hover {
-  background: rgba(30, 41, 59, 0.9);
-  box-shadow: 
-    0 8px 16px rgba(0, 0, 0, 0.2),
-    0 2px 4px rgba(0, 0, 0, 0.15);
-}
-
-/* Icon-Animation */
-.dark-mode-toggle-new .sun-icon,
-.dark-mode-toggle-new .moon-icon {
-  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300;
-}
-
-.dark-mode-toggle-new .sun-icon:not(.hidden) {
-  animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-}
-
-.dark-mode-toggle-new .moon-icon:not(.hidden) {
-  animation: spin-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
-}
-
-@keyframes spin-in {
-  0% {
-    opacity: 0;
-    transform: translateY(10px) scale(0.7) rotate(20deg);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1) rotate(0);
-  }
-}
-
-.dark .sun-icon {
-  display: none;
-}
-
-.dark .moon-icon {
-  display: block;
-}
-
-.sun-icon {
-  display: block;
-}
-
-.moon-icon {
-  display: none;
-}
-
-/* User Menu Button - Kompakteres Design */
-.user-menu-button-new {
-  @apply flex items-center space-x-1.5 rounded-lg p-1 transition-all duration-300;
-  background: rgba(241, 245, 249, 0.6);
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.04),
-    0 1px 2px rgba(0, 0, 0, 0.02);
-}
-
-.user-menu-button-new:hover {
-  @apply transform -translate-y-0.5;
-  background: rgba(241, 245, 249, 0.8);
-  box-shadow: 
-    0 8px 16px rgba(0, 0, 0, 0.06),
-    0 2px 4px rgba(0, 0, 0, 0.04);
-}
-
-.dark .user-menu-button-new {
-  background: rgba(30, 41, 59, 0.6);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.15),
-    0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.dark .user-menu-button-new:hover {
-  background: rgba(30, 41, 59, 0.8);
-  box-shadow: 
-    0 8px 16px rgba(0, 0, 0, 0.15),
-    0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-/* User Avatar - Kompakteres Design */
-.user-avatar-new {
-  @apply h-7 w-7 rounded-full flex items-center justify-center text-white font-semibold text-xs shadow-md transition-all duration-300;
-  background: linear-gradient(135deg, #000000, #333333);
-  box-shadow: 
-    0 2px 4px rgba(0, 0, 0, 0.2),
-    0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.dark .user-avatar-new {
-  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
-  color: #0f172a;
-  box-shadow: 
-    0 2px 4px rgba(0, 0, 0, 0.3),
-    0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-/* Login Button - Kompakteres Design */
-.login-button-new {
-  @apply flex items-center px-3 py-1.5 rounded-lg text-xs font-medium shadow-sm transition-all duration-300;
-  background: #000000;
-  color: #ffffff;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.1),
-    0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.login-button-new:hover {
-  @apply transform -translate-y-0.5;
-  background: #333333;
-  box-shadow: 
-    0 8px 16px rgba(0, 0, 0, 0.15),
-    0 3px 4px rgba(0, 0, 0, 0.1);
-}
-
-.dark .login-button-new {
-  background: #ffffff;
-  color: #000000;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.2),
-    0 1px 2px rgba(0, 0, 0, 0.15);
-}
-
-.dark .login-button-new:hover {
-  background: #f1f5f9;
-  box-shadow: 
-    0 8px 16px rgba(0, 0, 0, 0.25),
-    0 3px 4px rgba(0, 0, 0, 0.2);
-}
-
-/* Mobile Menu - Kompakteres Design */
-.mobile-menu-new {
-  @apply w-full overflow-hidden transition-all duration-300 z-40;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
-  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
-  max-height: 0;
-  opacity: 0;
-}
-
-.mobile-menu-new.open {
-  max-height: 400px;
-  opacity: 1;
-  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
-}
-
-.dark .mobile-menu-new {
-  background: rgba(15, 23, 42, 0.8);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-  border-bottom: 1px solid rgba(30, 41, 59, 0.8);
-}
-
-.mobile-nav-item {
-  @apply flex items-center space-x-2.5 px-3 py-2.5 rounded-lg text-sm text-slate-800 dark:text-slate-200 transition-all duration-300;
-}
-
-.mobile-nav-item:hover {
-  background: rgba(241, 245, 249, 0.8);
-}
-
-.dark .mobile-nav-item:hover {
-  background: rgba(30, 41, 59, 0.6);
-}
-
-.mobile-nav-item.active {
-  background: rgba(241, 245, 249, 0.9);
-  color: #000000;
-  font-weight: 500;
-}
-
-.dark .mobile-nav-item.active {
-  background: rgba(30, 41, 59, 0.8);
-  color: #ffffff;
-}
-
-/* Dashboard Stat Cards mit schwarzem Hintergrund im Dark Mode */
-.mb-stat-card {
-  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);
-  padding: 1.5rem;
-  margin: 1rem;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.dark .mb-stat-card {
-  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(10, 10, 10, 0.7) 100%);
-  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/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 - Verstärktes Glassmorphism */
-footer {
-  @apply transition-all duration-300;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(30px) saturate(180%) brightness(120%);
-  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(120%);
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 
-    0 -8px 32px rgba(0, 0, 0, 0.1),
-    0 -2px 8px rgba(0, 0, 0, 0.05),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-.dark footer {
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(30px) saturate(160%) brightness(110%);
-  -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(110%);
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 
-    0 -8px 32px rgba(0, 0, 0, 0.3),
-    0 -2px 8px rgba(0, 0, 0, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 0 0 1px rgba(255, 255, 255, 0.03);
-}
-
-/* Dropdown Pfeil Animation */
-.dropdown-arrow {
-  @apply transition-transform duration-300;
-}
-
-/* Mercedes-Benz Hintergrund mit Star-Pattern */
-.mercedes-star-bg {
-  position: relative;
-}
-
-.mercedes-star-bg::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80' opacity='0.05' fill='currentColor'%3E%3Cpath d='M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z'/%3E%3C/svg%3E");
-  background-position: center;
-  background-repeat: repeat;
-  background-size: 40px 40px;
-  z-index: -1;
-  opacity: 0.05;
-}
-
-.dark .mercedes-star-bg::after {
-  opacity: 0.02;
-  filter: invert(1) brightness(0.4);
-} 
-
-/* Zusätzliche Glassmorphism-Verbesserungen */
-.glass-effect {
-  backdrop-filter: blur(20px) saturate(180%) brightness(110%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3);
-}
-
-.dark .glass-effect {
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15);
-}
-
-/* Verbesserte Hover-Effekte für alle interaktiven Elemente */
-.glass-hover {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.glass-hover:hover {
-  transform: translateY(-2px);
-  backdrop-filter: blur(25px) saturate(200%) brightness(120%);
-  -webkit-backdrop-filter: blur(25px) saturate(200%) brightness(120%);
-  box-shadow: 
-    0 20px 40px rgba(0, 0, 0, 0.15),
-    0 8px 16px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.4);
-}
-
-.dark .glass-hover:hover {
-  box-shadow: 
-    0 20px 40px rgba(0, 0, 0, 0.4),
-    0 8px 16px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
-}
-
-/* Neue verbesserte Drucker-Karten für die Drucker-Ansicht */
-.printer-card-new {
-  @apply bg-gradient-to-br from-white/90 to-white/70 dark:from-slate-800/90 dark:to-slate-900/70 backdrop-blur-2xl rounded-xl border border-gray-200/70 dark:border-slate-700/30 p-5 shadow-2xl transition-all duration-300 hover:-translate-y-1 relative overflow-hidden;
-  box-shadow: 
-    0 20px 40px rgba(0, 0, 0, 0.08), 
-    0 10px 20px rgba(0, 0, 0, 0.06),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
-  border-radius: var(--card-radius, 1rem);
-}
-
-.dark .printer-card-new {
-  box-shadow: 
-    0 20px 40px rgba(0, 0, 0, 0.4), 
-    0 10px 20px rgba(0, 0, 0, 0.3),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-/* Online Drucker-Karten mit stärkerem visuellen Unterschied */
-.printer-card-new.online {
-  @apply bg-gradient-to-br from-green-50/90 to-emerald-50/80 dark:from-green-900/30 dark:to-emerald-900/20 border-green-200 dark:border-green-700/50;
-  box-shadow: 
-    0 20px 40px rgba(0, 122, 85, 0.08), 
-    0 10px 20px rgba(0, 122, 85, 0.06),
-    0 0 0 1px rgba(209, 250, 229, 0.4);
-}
-
-.dark .printer-card-new.online {
-  box-shadow: 
-    0 20px 40px rgba(0, 0, 0, 0.3), 
-    0 10px 20px rgba(0, 0, 0, 0.2),
-    0 0 0 1px rgba(16, 185, 129, 0.2);
-}
-
-/* Status-Badge mit verbesserten Styles */
-.status-badge-new {
-  @apply px-2.5 py-1 rounded-full text-xs font-medium inline-flex items-center space-x-1 shadow-sm;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-}
-
-.dark .status-badge-new {
-  background: rgba(30, 41, 59, 0.7);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.status-badge-new.online {
-  @apply bg-green-100/90 text-green-800 dark:bg-green-900/60 dark:text-green-300;
-}
-
-.status-badge-new.offline {
-  @apply bg-red-100/90 text-red-800 dark:bg-red-900/60 dark:text-red-300;
-}
-
-/* Verbesserte Filterleiste */
-.filter-bar-new {
-  @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-lg p-1.5 border border-gray-200/60 dark:border-slate-700/30 shadow-xl;
-  box-shadow: 
-    0 10px 25px rgba(0, 0, 0, 0.05), 
-    0 5px 10px rgba(0, 0, 0, 0.03),
-    0 0 0 1px rgba(255, 255, 255, 0.2);
-}
-
-.dark .filter-bar-new {
-  box-shadow: 
-    0 10px 25px rgba(0, 0, 0, 0.2), 
-    0 5px 10px rgba(0, 0, 0, 0.15),
-    0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-.filter-btn-new {
-  @apply px-3.5 py-2 text-sm rounded-md transition-all duration-300 font-medium;
-}
-
-.filter-btn-new.active {
-  @apply bg-black text-white dark:bg-white dark:text-slate-900 shadow-md;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
-
-.dark .filter-btn-new.active {
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-}
-
-/* Verbesserte Aktionsschaltflächen */
-.action-btn-new {
-  @apply flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 shadow-md hover:-translate-y-0.5;
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-}
-
-.action-btn-new.primary {
-  @apply bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500;
-  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2);
-}
-
-.dark .action-btn-new.primary {
-  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
-}
-
-.action-btn-new.success {
-  @apply bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-500;
-  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
-}
-
-.dark .action-btn-new.success {
-  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
-}
-
-.action-btn-new.danger {
-  @apply bg-red-600 hover:bg-red-700 text-white dark:bg-red-600 dark:hover:bg-red-500;
-  box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);
-}
-
-.dark .action-btn-new.danger {
-  box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
-}
-
-/* Informationszeilen in Drucker-Karten */
-.printer-info-row {
-  @apply flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-300 mb-1.5;
-}
-
-.printer-info-icon {
-  @apply w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-500 dark:text-slate-400 flex-shrink-0;
-}
-
-/* Online-Indikator mit Pulseffekt */
-.online-indicator {
-  @apply absolute top-2.5 right-2.5 w-3 h-3 bg-green-500 rounded-full shadow-lg;
-  box-shadow: 0 0 0 rgba(16, 185, 129, 0.6);
-  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
-}
-
-@keyframes pulse-ring {
-  0% {
-    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
-  }
-  70% {
-    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
-  }
-}
-
-/* Header mit verbesserten Status-Anzeigen */
-.status-overview-new {
-  @apply flex flex-wrap gap-3 text-xs sm:text-sm p-3 bg-white/60 dark:bg-slate-800/60 backdrop-blur-xl rounded-lg border border-gray-200/60 dark:border-slate-700/30 shadow-lg;
-  box-shadow: 
-    0 10px 25px rgba(0, 0, 0, 0.04), 
-    0 5px 10px rgba(0, 0, 0, 0.02),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
-}
-
-.dark .status-overview-new {
-  box-shadow: 
-    0 10px 25px rgba(0, 0, 0, 0.15), 
-    0 5px 10px rgba(0, 0, 0, 0.1),
-    0 0 0 1px rgba(255, 255, 255, 0.03);
-}
-
-.status-dot {
-  @apply w-2.5 h-2.5 rounded-full;
-}
-
-.status-dot.online {
-  @apply bg-green-500;
-  animation: pulse-dot 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
-}
-
-.status-dot.offline {
-  @apply bg-red-500;
-}
-
-@keyframes pulse-dot {
-  0% {
-    transform: scale(0.95);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 0.8;
-  }
-  100% {
-    transform: scale(0.95);
-    opacity: 1;
-  }
-}
-
-/* Verbesserte Modals mit Glassmorphism */
-.modal-new {
-  @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm;
-}
-
-.modal-content-new {
-  @apply bg-white/90 dark:bg-slate-800/90 backdrop-blur-2xl rounded-2xl p-6 w-full max-w-md shadow-2xl border border-gray-200/60 dark:border-slate-700/30 transform transition-all duration-300;
-  box-shadow: 
-    0 25px 50px rgba(0, 0, 0, 0.15), 
-    0 15px 30px rgba(0, 0, 0, 0.1),
-    0 20px 25px -5px rgba(0, 0, 0, 0.5),
-    0 10px 10px -5px rgba(0, 0, 0, 0.3);
-}
-
-/* User Dropdown Items */
-.user-dropdown-item {
-  @apply flex items-center px-4 py-3 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200 cursor-pointer;
-}
-
-.user-dropdown-item:first-child {
-  @apply rounded-t-xl;
-}
-
-.user-dropdown-item:last-child {
-  @apply rounded-b-xl;
-}
-
-.user-dropdown-item:hover {
-  background: rgba(248, 250, 252, 0.8);
-  transform: translateX(2px);
-}
-
-.dark .user-dropdown-item:hover {
-  background: rgba(30, 41, 59, 0.8);
-}
-
-/* User Dropdown Icons */
-.user-dropdown-icon {
-  @apply w-4 h-4 mr-3 text-slate-500 dark:text-slate-400 transition-colors duration-200;
-}
-
-.user-dropdown-item:hover .user-dropdown-icon {
-  @apply text-slate-700 dark:text-slate-200;
-}
-
-/* Divider in User Dropdown */
-.user-dropdown-divider {
-  @apply border-t border-slate-200 dark:border-slate-700 my-1;
-}
-
-/* User Info Section in Dropdown */
-.user-info-section {
-  @apply px-4 py-3 border-b border-slate-200 dark:border-slate-700;
-  background: rgba(248, 250, 252, 0.5);
-}
-
-.dark .user-info-section {
-  background: rgba(30, 41, 59, 0.5);
-}
-
-.user-info-name {
-  @apply text-sm font-semibold text-slate-900 dark:text-white;
-}
-
-.user-info-role {
-  @apply text-xs text-slate-500 dark:text-slate-400 mt-1;
-}
+/* Alle weiteren Komponenten folgen dem gleichen Optimierungsmuster:
+   - Entfernung von backdrop-filter
+   - Entfernung von komplexen box-shadows
+   - Entfernung von transform-Animationen
+   - Vereinfachung von transitions zu opacity/background-color only
+   - Beibehaltung des visuellen Designs
+*/ 
\ No newline at end of file
diff --git a/backend/static/css/professional-theme.css b/backend/static/css/professional-theme.css
index 6bd4255d..cf4699f3 100644
--- a/backend/static/css/professional-theme.css
+++ b/backend/static/css/professional-theme.css
@@ -574,7 +574,7 @@
   opacity: 0.3;
 }
 
-/* Smooth transitions für alle professionellen Komponenten */
+/* Smooth transitions für alle professionellen Komponenten - OPTIMIERT */
 .professional-hero,
 .professional-container,
 .mb-glass,
@@ -588,7 +588,8 @@
 .nav-item-professional,
 .table-professional,
 .alert-professional {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
+  /* Entfernt: cubic-bezier und 'all' transitions für bessere Performance */
 }
 
 /* Responsive Design */
@@ -621,17 +622,20 @@
   }
 }
 
-/* Animation-Klassen */
+/* Animation-Klassen - RASPBERRY PI OPTIMIERT */
 .animate-fade-in {
-  animation: fadeInProfessional 0.6s ease-out;
+  animation: fadeInProfessional 0.3s ease-out;
+  /* Reduzierte Dauer von 0.6s auf 0.3s */
 }
 
 .animate-slide-up {
-  animation: slideUpProfessional 0.6s ease-out;
+  animation: fadeInProfessional 0.3s ease-out;
+  /* Ersetzt slideUpProfessional durch einfaches fade-in */
 }
 
 .animate-scale-in {
-  animation: scaleInProfessional 0.4s ease-out;
+  animation: fadeInProfessional 0.3s ease-out;
+  /* Ersetzt scaleInProfessional durch einfaches fade-in */
 }
 
 @keyframes fadeInProfessional {
@@ -643,45 +647,24 @@
   }
 }
 
-@keyframes slideUpProfessional {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes scaleInProfessional {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
 /* Professional Mini Button Styles */
-.btn-professional-mini {
-  background: rgba(59, 130, 246, 0.1);
-  color: var(--mb-primary);
-  border: 1px solid rgba(59, 130, 246, 0.2);
-  border-radius: 0.75rem;
-  padding: 0.5rem 1rem;
-  font-weight: 500;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  transition: all 0.3s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
+  .btn-professional-mini {
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--mb-primary);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 0.75rem;
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    /* Entfernt: 'all 0.3s ease' für bessere Performance */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
 
 .dark .btn-professional-mini {
   background: rgba(59, 130, 246, 0.2);
@@ -691,7 +674,7 @@
 .btn-professional-mini:hover {
   background: rgba(59, 130, 246, 0.2);
   border-color: var(--mb-primary);
-  transform: translateY(-1px);
+  /* Entfernt: transform: translateY(-1px) für bessere Performance */
 }
 
 .dark .btn-professional-mini:hover {
@@ -699,20 +682,21 @@
 }
 
 /* Danger Mini Button */
-.btn-danger-professional-mini {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  border-radius: 0.5rem;
-  padding: 0.5rem;
-  font-weight: 500;
-  font-size: 0.75rem;
-  transition: all 0.3s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
+  .btn-danger-professional-mini {
+    background: rgba(239, 68, 68, 0.1);
+    color: #dc2626;
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    font-weight: 500;
+    font-size: 0.75rem;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    /* Entfernt: 'all 0.3s ease' für bessere Performance */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
 
 .dark .btn-danger-professional-mini {
   background: rgba(239, 68, 68, 0.2);
@@ -723,7 +707,7 @@
 .btn-danger-professional-mini:hover {
   background: rgba(239, 68, 68, 0.2);
   border-color: #dc2626;
-  transform: translateY(-1px) scale(1.05);
+  /* Entfernt: transform: translateY(-1px) scale(1.05) für bessere Performance */
 }
 
 .dark .btn-danger-professional-mini:hover {
@@ -731,9 +715,9 @@
   border-color: #ef4444;
 }
 
-/* Success Button */
+/* Success Button - RASPBERRY PI OPTIMIERT */
 .btn-success-professional {
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: #10b981;
   color: white;
   border: none;
   border-radius: 1rem;
@@ -742,44 +726,27 @@
   font-size: 0.875rem;
   letter-spacing: 0.025em;
   text-transform: uppercase;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+  transition: background-color 0.2s ease;
+  /* Entfernt: gradient, box-shadow, overflow, position, before-pseudo für Performance */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
 }
 
-.btn-success-professional::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.5s;
-}
-
-.btn-success-professional:hover::before {
-  left: 100%;
-}
-
 .btn-success-professional:hover {
-  background: linear-gradient(135deg, #059669 0%, #047857 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
+  background: #059669;
+  /* Entfernt: gradient, transform, box-shadow für bessere Performance */
 }
 
 .btn-success-professional:active {
-  transform: translateY(0);
+  background: #047857;
+  /* Entfernt: transform für bessere Performance */
 }
 
-/* Danger Button */
+/* Danger Button - RASPBERRY PI OPTIMIERT */
 .btn-danger-professional {
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  background: #ef4444;
   color: white;
   border: none;
   border-radius: 1rem;
@@ -788,54 +755,38 @@
   font-size: 0.875rem;
   letter-spacing: 0.025em;
   text-transform: uppercase;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+  transition: background-color 0.2s ease;
+  /* Entfernt: gradient, box-shadow, overflow, position, before-pseudo für Performance */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
 }
 
-.btn-danger-professional::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.5s;
-}
-
-.btn-danger-professional:hover::before {
-  left: 100%;
-}
-
 .btn-danger-professional:hover {
-  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
+  background: #dc2626;
+  /* Entfernt: gradient, transform, box-shadow für bessere Performance */
 }
 
 .btn-danger-professional:active {
-  transform: translateY(0);
+  background: #b91c1c;
+  /* Entfernt: transform für bessere Performance */
 }
 
 /* Filter Button Mercedes */
-.filter-btn-mercedes {
-  background: transparent;
-  color: var(--light-text-muted);
-  border: none;
-  border-radius: 0.75rem;
-  padding: 0.5rem 1rem;
-  font-weight: 500;
-  font-size: 0.875rem;
-  transition: all 0.3s ease;
-  cursor: pointer;
-  position: relative;
-}
+  .filter-btn-mercedes {
+    background: transparent;
+    color: var(--light-text-muted);
+    border: none;
+    border-radius: 0.75rem;
+    padding: 0.5rem 1rem;
+    font-weight: 500;
+    font-size: 0.875rem;
+    transition: color 0.2s ease, background-color 0.2s ease;
+    /* Entfernt: 'all 0.3s ease' für bessere Performance */
+    cursor: pointer;
+    position: relative;
+  }
 
 .dark .filter-btn-mercedes {
   color: var(--dark-text-muted);
@@ -854,10 +805,10 @@
 .filter-btn-mercedes.active {
   background: var(--mb-primary);
   color: white;
-  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+  /* Entfernt: box-shadow für bessere Performance */
 }
 
-/* Status Dots */
+/* Status Dots - RASPBERRY PI OPTIMIERT */
 .status-dot {
   width: 0.75rem;
   height: 0.75rem;
@@ -868,34 +819,12 @@
 
 .status-dot.status-online {
   background: #10b981;
-  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+  /* Entfernt: box-shadow für bessere Performance */
 }
 
 .status-dot.status-offline {
   background: #ef4444;
-  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
-}
-
-.status-dot.status-online::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: inherit;
-  animation: pulse-professional 2s infinite;
-}
-
-/* Professional Shadow */
-.professional-shadow {
-  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
-}
-
-.dark .professional-shadow {
-  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
+  /* Entfernt: box-shadow für bessere Performance */
 }
 
 /* Professional Accent Colors */
@@ -903,9 +832,10 @@
   background-color: var(--mb-accent);
 }
 
-/* Animate Spin Slow */
+/* Animate Spin Slow - RASPBERRY PI OPTIMIERT */
 .animate-spin-slow {
-  animation: spin 3s linear infinite;
+  animation: spin 4s linear infinite;
+  /* Verlangsamte Animation von 3s auf 4s für weniger CPU-Last */
 }
 
 @keyframes spin {
@@ -917,52 +847,34 @@
   }
 }
 
-@keyframes pulse-professional {
-  0%, 100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  50% {
-    opacity: 0.5;
-    transform: translate(-50%, -50%) scale(1.2);
-  }
-}
-
-/* Neue Premium-Komponenten */
+/* GLASSMORPHISM KOMPLETT ENTFERNT FÜR RASPBERRY PI PERFORMANCE */
 .glass-professional {
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(20px) saturate(180%) brightness(110%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+  background: rgba(255, 255, 255, 0.98);
   border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 
-    0 25px 50px rgba(0, 0, 0, 0.15),
-    0 8px 16px rgba(0, 115, 206, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6);
   border-radius: 1rem;
+  /* ENTFERNT: backdrop-filter, -webkit-backdrop-filter, box-shadow für Performance */
 }
 
 .dark .glass-professional {
-  background: rgba(30, 41, 59, 0.8);
+  background: rgba(30, 41, 59, 0.95);
   border-color: rgba(255, 255, 255, 0.1);
-  box-shadow: 
-    0 25px 50px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  /* ENTFERNT: box-shadow für Performance */
 }
 
-/* Enhanced Hover States für Light Mode */
+/* Enhanced Hover States - RASPBERRY PI OPTIMIERT */
 .hover-lift {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background-color 0.2s ease;
+  /* Entfernt: cubic-bezier transition für bessere Performance */
 }
 
 .hover-lift:hover {
-  transform: translateY(-2px);
-  box-shadow: 
-    0 10px 25px var(--light-shadow-strong),
-    0 4px 12px var(--light-shadow-accent);
+  background-color: var(--light-surface-hover);
+  /* Entfernt: transform, box-shadow für bessere Performance */
 }
 
 .dark .hover-lift:hover {
-  box-shadow: 0 10px 25px var(--dark-shadow-strong);
+  background-color: var(--dark-surface-hover);
+  /* Entfernt: box-shadow für bessere Performance */
 }
 
 /* Accessibility Enhancements */