🎉 Added RASPBERRY PI Performance Optimierungen documentation files and optimized CSS styles. 📚 ✨ Removed outdated KI Prompts document. 🐛 Fixed minor CSS inconsistencies. 🖥️

backend/docs/RASPBERRY_PI_PERFORMANCE_OPTIMIERUNGEN.md

@@ -0,0 +1 @@
+ 

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
+*/ 

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,28 +647,6 @@
   }
 }
 
-@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);
@@ -676,7 +658,8 @@
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.025em;
-  transition: all 0.3s ease;
+    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;
@@ -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 {
@@ -707,7 +690,8 @@
     padding: 0.5rem;
     font-weight: 500;
     font-size: 0.75rem;
-  transition: all 0.3s ease;
+    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;
@@ -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;
+  transition: background-color 0.2s ease;
-  position: relative;
+  /* Entfernt: gradient, box-shadow, overflow, position, before-pseudo für Performance */
-  overflow: hidden;
-  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
   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%);
+  background: #059669;
-  transform: translateY(-2px);
+  /* Entfernt: gradient, transform, box-shadow für bessere Performance */
-  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
 }
 
 .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,39 +755,22 @@
   font-size: 0.875rem;
   letter-spacing: 0.025em;
   text-transform: uppercase;
-  transition: all 0.3s ease;
+  transition: background-color 0.2s ease;
-  position: relative;
+  /* Entfernt: gradient, box-shadow, overflow, position, before-pseudo für Performance */
-  overflow: hidden;
-  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
   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%);
+  background: #dc2626;
-  transform: translateY(-2px);
+  /* Entfernt: gradient, transform, box-shadow für bessere Performance */
-  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
 }
 
 .btn-danger-professional:active {
-  transform: translateY(0);
+  background: #b91c1c;
+  /* Entfernt: transform für bessere Performance */
 }
 
 /* Filter Button Mercedes */
@@ -832,7 +782,8 @@
     padding: 0.5rem 1rem;
     font-weight: 500;
     font-size: 0.875rem;
-  transition: all 0.3s ease;
+    transition: color 0.2s ease, background-color 0.2s ease;
+    /* Entfernt: 'all 0.3s ease' für bessere Performance */
     cursor: pointer;
     position: relative;
   }
@@ -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);
+  /* Entfernt: box-shadow für bessere Performance */
-}
-
-.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);
 }
 
 /* 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 {
+/* GLASSMORPHISM KOMPLETT ENTFERNT FÜR RASPBERRY PI PERFORMANCE */
-  0%, 100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  50% {
-    opacity: 0.5;
-    transform: translate(-50%, -50%) scale(1.2);
-  }
-}
-
-/* Neue Premium-Komponenten */
 .glass-professional {
-  background: rgba(255, 255, 255, 0.8);
+  background: rgba(255, 255, 255, 0.98);
-  backdrop-filter: blur(20px) saturate(180%) brightness(110%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
   border: 1px solid rgba(255, 255, 255, 0.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: 
+  /* ENTFERNT: box-shadow für Performance */
-    0 25px 50px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
-/* 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);
+  background-color: var(--light-surface-hover);
-  box-shadow: 
+  /* Entfernt: transform, box-shadow für bessere Performance */
-    0 10px 25px var(--light-shadow-strong),
-    0 4px 12px var(--light-shadow-accent);
 }
 
 .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 */