From 4e539dbf672a6b2a6c2514bd4551894403a6d492 Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Mon, 2 Jun 2025 16:08:23 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Aktualisierte=20CSS-Stile=20f?=
 =?UTF-8?q?=C3=BCr=20den=20Light=20und=20Dark=20Mode,=20optimiert=20f?=
 =?UTF-8?q?=C3=BCr=20Raspberry=20Pi.=20Vereinfachte=20Farb-=20und=20Gradie?=
 =?UTF-8?q?nt-Definitionen=20zur=20Verbesserung=20der=20Performance=20und?=
 =?UTF-8?q?=20Lesbarkeit.=20Anpassungen=20an=20Hover-=20und=20Button-Effek?=
 =?UTF-8?q?ten=20zur=20Reduzierung=20der=20CPU-Belastung.=20=F0=9F=93=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../static/css/input-raspberry-balanced.css   | 352 ++++++------------
 1 file changed, 109 insertions(+), 243 deletions(-)

diff --git a/backend/static/css/input-raspberry-balanced.css b/backend/static/css/input-raspberry-balanced.css
index a1737b9e..e6174a11 100644
--- a/backend/static/css/input-raspberry-balanced.css
+++ b/backend/static/css/input-raspberry-balanced.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Custom Styles für Light und Dark Mode - Premium Upgrade mit verbessertem Light Mode */
+/* Custom Styles für Light und Dark Mode - Raspberry Pi Optimiert */
 @layer base {
   :root {
     /* Light Mode Farben - Mercedes-Benz Professional - VERBESSERT für optimale Lesbarkeit */
@@ -10,52 +10,52 @@
     --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: rgba(0, 0, 0, 0.06);
     --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 */
+    --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%);
+    /* Light Mode Gradients - VEREINFACHT für Performance */
+    --gradient-primary: #fafbfc;
+    --gradient-card: #ffffff;
+    --gradient-hero: #f3f5f7;
     --gradient-accent: linear-gradient(135deg, #0073ce 0%, #005a9f 100%);
-    --gradient-surface: linear-gradient(135deg, #ffffff 0%, #fbfcfd 50%, #f8fafc 100%);
+    --gradient-surface: #fbfcfd;
     
-    /* Neue optimierte Light Mode Glassmorphism-Variablen */
+    /* 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);
+    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+    --glass-blur: blur(10px);
   }
 
   .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-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: rgba(0, 0, 0, 0.8);
     --color-shadow-strong: rgba(0, 0, 0, 0.9);
-    --mb-black: #000000; /* Mercedes-Benz Schwarz */
+    --mb-black: #000000;
   }
   
   body {
@@ -65,15 +65,15 @@
     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;
   }
 
   .dark body {
-    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
+    background: #000000;
   }
 
-  /* Enhanced Body Background with Subtle Patterns - VERBESSERT */
+  /* Vereinfachte Body Background - PERFORMANCE OPTIMIERT */
   body::before {
     content: '';
     position: fixed;
@@ -81,21 +81,16 @@
     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 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%);
+    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 50%);
   }
 
-  /* Navbar Styles - Premium Glassmorphism - UNANGETASTET WIE GEWÜNSCHT */
+  /* Navbar Styles - Premium Glassmorphism - UNVERÄNDERT WIE GEWÜNSCHT */
   nav {
     @apply backdrop-blur-xl border-b transition-all duration-300;
     background: linear-gradient(135deg, 
@@ -120,25 +115,20 @@
       inset 0 1px 0 rgba(255, 255, 255, 0.05);
   }
 
-  /* Premium Card Styles - CPU OPTIMIERT für Raspberry Pi */
+  /* Vereinfachte Card Styles - PERFORMANCE OPTIMIERT */
   .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);
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-    /* ENTFERNT: cubic-bezier, position, overflow für CPU-Optimierung */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    position: relative;
+    overflow: hidden;
   }
 
-  /* ENTFERNT: card-enhanced::before pseudo-element für CPU-Optimierung */
-
   .card-enhanced:hover {
-    /* ENTFERNT: transform für CPU-Optimierung */
-    box-shadow: 
-      0 4px 16px rgba(0, 0, 0, 0.05),
-      0 2px 8px rgba(0, 115, 206, 0.03);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
   }
 
   .dark .card-enhanced {
@@ -147,7 +137,7 @@
     box-shadow: 0 4px 20px var(--color-shadow);
   }
 
-  /* Premium Button Styles - CPU OPTIMIERT */
+  /* Vereinfachte Button Styles - PERFORMANCE OPTIMIERT */
   .btn-enhanced {
     background: var(--gradient-accent);
     color: var(--color-accent-text);
@@ -158,45 +148,36 @@
     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: background-color 0.2s ease, box-shadow 0.2s ease;
-    /* ENTFERNT: cubic-bezier, position, overflow für CPU-Optimierung */
+    box-shadow: 0 2px 8px rgba(0, 115, 206, 0.2);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    position: relative;
+    overflow: hidden;
   }
 
-  /* ENTFERNT: btn-enhanced::before pseudo-element animation für CPU-Optimierung */
-
   .btn-enhanced:hover {
-    /* ENTFERNT: transform für CPU-Optimierung */
-    box-shadow: 
-      0 4px 12px rgba(0, 115, 206, 0.25),
-      0 2px 6px rgba(0, 115, 206, 0.15);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 115, 206, 0.3);
   }
 
   .btn-enhanced:active {
-    /* ENTFERNT: transform für CPU-Optimierung */
+    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);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
   }
 
   .btn-secondary:hover {
     background: var(--color-bg-secondary);
     border-color: var(--color-accent);
     color: var(--color-accent);
-    box-shadow: 
-      0 2px 8px rgba(0, 115, 206, 0.06),
-      inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    box-shadow: 0 2px 8px rgba(0, 115, 206, 0.08);
   }
 
-  /* Enhanced Form Elements - REDUZIERTER backdrop-filter */
+  /* Vereinfachte Form Elements - PERFORMANCE OPTIMIERT */
   .input-enhanced {
     background: rgba(255, 255, 255, 0.95);
     border: 1px solid var(--color-border-primary);
@@ -204,21 +185,14 @@
     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: border-color 0.2s ease, background-color 0.2s ease;
-    /* REDUZIERT: backdrop-filter von 8px auf 4px */
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
 
   .input-enhanced:focus {
     outline: none;
     border-color: var(--color-accent);
-    box-shadow: 
-      0 2px 8px rgba(0, 115, 206, 0.08),
-      0 0 0 3px rgba(0, 115, 206, 0.05);
+    box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.05);
     background: rgba(255, 255, 255, 0.98);
   }
 
@@ -231,28 +205,21 @@
     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);
+    box-shadow: 0 2px 8px var(--color-shadow);
   }
 
   .dark .input-enhanced:focus {
     border-color: #60a5fa;
-    box-shadow: 
-      0 2px 10px rgba(96, 165, 250, 0.15),
-      0 0 0 3px rgba(96, 165, 250, 0.1);
+    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
   }
 
-  /* Premium Alert Styles - REDUZIERTER backdrop-filter */
+  /* Vereinfachte Alert Styles */
   .alert-enhanced {
     border-radius: 1rem;
     padding: 1.25rem;
     border: 1px solid transparent;
     position: relative;
     overflow: hidden;
-    /* REDUZIERT: backdrop-filter von 16px auf 8px */
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
   }
 
   .alert-enhanced::before {
@@ -265,9 +232,7 @@
   }
 
   .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;
   }
@@ -277,9 +242,7 @@
   }
 
   .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;
   }
@@ -289,9 +252,7 @@
   }
 
   .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;
   }
@@ -301,9 +262,7 @@
   }
 
   .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;
   }
@@ -312,82 +271,51 @@
     background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
   }
 
-  /* Light Mode Flash Messages - REDUZIERTE backdrop-filter */
+  /* Vereinfachte Flash Messages */
   .flash-message-light {
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.95) 0%, 
-      rgba(248, 250, 252, 0.9) 100%);
-    /* REDUZIERT: backdrop-filter von 32px auf 16px */
-    backdrop-filter: blur(16px) saturate(180%) brightness(110%);
-    -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(110%);
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
     border: 1px solid rgba(226, 232, 240, 0.6);
-    box-shadow: 
-      0 10px 30px rgba(0, 0, 0, 0.08),
-      0 4px 12px rgba(0, 115, 206, 0.04);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
     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%);
+    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 - CPU OPTIMIERT */
+  /* Vereinfachte 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 2px 12px var(--color-shadow),
-      0 1px 4px rgba(0, 115, 206, 0.03);
+    box-shadow: 0 2px 8px var(--color-shadow);
   }
 
   .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 {
@@ -399,7 +327,6 @@
 
   .table-enhanced tbody tr:hover {
     background: var(--color-bg-secondary);
-    /* ENTFERNT: transform für CPU-Optimierung */
   }
 
   .dark .table-enhanced {
@@ -416,46 +343,25 @@
     background: rgba(26, 26, 26, 0.6);
   }
 
-  /* Premium Modal Styles - REDUZIERTE backdrop-filter */
+  /* Vereinfachte 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%);
-    /* REDUZIERT: backdrop-filter von 32px auf 16px */
-    backdrop-filter: blur(16px) saturate(180%) brightness(110%);
-    -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(110%);
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
     border: 1px solid rgba(226, 232, 240, 0.7);
     border-radius: 1.5rem;
-    box-shadow: 
-      0 20px 50px rgba(0, 0, 0, 0.12),
-      0 8px 20px rgba(0, 115, 206, 0.06);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
     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 20px 50px rgba(0, 0, 0, 0.4),
-      inset 0 2px 0 rgba(255, 255, 255, 0.05);
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
   }
 
-  /* Enhanced Status Badges - CPU OPTIMIERT */
+  /* Vereinfachte Status Badges */
   .status-badge-enhanced {
     display: inline-flex;
     align-items: center;
@@ -466,12 +372,9 @@
     text-transform: uppercase;
     letter-spacing: 0.05em;
     border: 1px solid transparent;
-    transition: background-color 0.2s ease;
-    /* ENTFERNT: position, overflow für CPU-Optimierung */
+    transition: transform 0.2s ease;
   }
 
-  /* ENTFERNT: status-badge-enhanced::before animation für CPU-Optimierung */
-
   .status-online-enhanced {
     background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%);
     color: #065f46;
@@ -490,7 +393,7 @@
     border-color: rgba(59, 130, 246, 0.3);
   }
 
-  /* Dark Mode Toggle - REDUZIERTE Animationen */
+  /* Dark Mode Toggle - Vereinfacht aber funktional */
   .dark-mode-toggle-new {
     position: relative;
     display: flex;
@@ -499,125 +402,96 @@
     justify-content: center;
     border-radius: 9999px;
     padding: 0.625rem;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.9) 0%, 
-      rgba(241, 245, 249, 0.8) 100%);
+    transition: transform 0.2s ease;
+    background: rgba(248, 250, 252, 0.9);
     border: 1px solid rgba(226, 232, 240, 0.7);
-    box-shadow: 
-      0 2px 8px rgba(0, 0, 0, 0.05),
-      0 1px 4px rgba(0, 115, 206, 0.03);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     color: var(--color-text-secondary);
     z-index: 100;
   }
 
   .dark-mode-toggle-new:hover {
-    /* ENTFERNT: transform und scale für CPU-Optimierung */
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.95) 0%, 
-      rgba(241, 245, 249, 0.85) 100%);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.08),
-      0 2px 6px rgba(0, 115, 206, 0.05);
+    transform: translateY(-2px) scale(1.05);
+    background: rgba(248, 250, 252, 0.95);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
 
   .dark-mode-toggle-new:active {
-    /* ENTFERNT: transform für CPU-Optimierung */
-    transition: none;
+    transform: translateY(-1px) scale(0.98);
   }
 
   .dark .dark-mode-toggle-new {
     background: rgba(10, 10, 10, 0.8);
     border: 1px solid 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.05);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     color: var(--color-text-secondary);
   }
 
   .dark .dark-mode-toggle-new:hover {
     background: rgba(10, 10, 10, 0.9);
-    box-shadow: 
-      0 4px 12px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
   }
 
-  /* Icon-Animation für Dark Mode Toggle - VEREINFACHT */
+  /* 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: opacity 0.2s ease;
+    transition: opacity 0.2s ease, transform 0.2s ease;
   }
 
-  /* ENTFERNT: komplexe icon-appear animation für CPU-Optimierung */
-
   .dark .sun-icon { display: none; }
   .dark .moon-icon { display: block; }
   .sun-icon { display: block; }
   .moon-icon { display: none; }
 
-  /* User Menu Button - CPU OPTIMIERT */
+  /* User Menu Button - Vereinfacht */
   .user-menu-button-new {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     border-radius: 0.75rem;
     padding: 0.5rem;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-    background: linear-gradient(135deg, 
-      rgba(248, 250, 252, 0.8) 0%, 
-      rgba(241, 245, 249, 0.7) 100%);
+    transition: transform 0.2s ease;
+    background: rgba(248, 250, 252, 0.8);
     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);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }
 
   .user-menu-button-new:hover {
-    /* ENTFERNT: transform für CPU-Optimierung */
-    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);
+    transform: translateY(-1px);
+    background: rgba(248, 250, 252, 0.9);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }
 
   .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);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }
 
   .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);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   }
 
-  /* Enhanced Hover Effects - CPU OPTIMIERT */
+  /* Vereinfachte Hover Effects */
   .hover-lift-enhanced {
-    transition: box-shadow 0.2s ease;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
 
   .hover-lift-enhanced:hover {
-    /* ENTFERNT: transform für CPU-Optimierung */
-    box-shadow: 
-      0 8px 20px var(--color-shadow-strong),
-      0 4px 10px var(--color-shadow-accent);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px var(--color-shadow-strong);
   }
 
   .dark .hover-lift-enhanced:hover {
     box-shadow: 0 8px 20px var(--color-shadow);
   }
 
-  /* Smooth Scrollbar for Light Mode */
+  /* Smooth Scrollbar */
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -629,17 +503,13 @@
   }
 
   ::-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-accent);
   }
 
   .dark ::-webkit-scrollbar-track {
@@ -654,7 +524,7 @@
     background: #60a5fa;
   }
 
-  /* Loading States - VEREINFACHT */
+  /* Vereinfachte Loading States */
   .loading-enhanced {
     position: relative;
     overflow: hidden;
@@ -683,14 +553,12 @@
   .focus-enhanced:focus {
     outline: 2px solid var(--color-accent);
     outline-offset: 2px;
-    box-shadow: 
-      0 0 0 4px rgba(0, 115, 206, 0.15);
+    box-shadow: 0 0 0 4px rgba(0, 115, 206, 0.15);
   }
 
   .dark .focus-enhanced:focus {
     outline-color: #60a5fa;
-    box-shadow: 
-      0 0 0 4px rgba(96, 165, 250, 0.15);
+    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
   }
 
   /* Responsive Design Enhancements */
@@ -735,6 +603,4 @@
       --color-border-primary: #ffffff;
     }
   }
-}
-
-/* WEITERE ABSCHNITTE FOLGEN - Ich optimiere den Rest systematisch... */ 
\ No newline at end of file
+}
\ No newline at end of file