🔧 Major System Refactoring & UI Enhancements

- Dark-Mode JavaScript Optimierungen für bessere Performance
- Base Template erweitert mit Enhanced UI Components
- Dashboard Template modernisiert mit neuen Card-Layouts
- Hardware Integration massiv konsolidiert (1771 Zeilen reduziert)
- Drucker Steuerung Blueprint hinzugefügt
- Legacy Hardware Integration Files bereinigt
- System-Architektur vereinfacht und performanter

Major Changes:
- -2001 Zeilen Code durch Konsolidierung
- +451 Zeilen neue optimierte Implementierung
- Vollständige Template-System Überarbeitung

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

backend/templates/dashboard.html

@@ -5,42 +5,30 @@
 
 {% block extra_css %}
 <style>
-    /* Professional Mercedes-Benz Dashboard Styles */
+    /* Enhanced Dashboard Styles using Unified CSS Variables */
     .mb-dashboard-card {
-        background: white;
-        border: 1px solid #e5e7eb;
+        background: var(--gradient-card);
+        border: 1px solid var(--border-primary);
         border-radius: 16px;
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: var(--shadow-card);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
     }
     
-    .dark .mb-dashboard-card {
-        background: var(--mb-black, #000000); /* Schwarzer Hintergrund im Dark Mode */
-        border-color: var(--border-primary, #334155);
-    }
-    
     .mb-dashboard-card:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    }
-    
-    .dark .mb-dashboard-card:hover {
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+        transform: translateY(-3px);
+        box-shadow: var(--shadow-card-hover);
+        border-color: var(--border-hover);
     }
     
     .mb-stat-card {
-        background: linear-gradient(135deg, #f0f9ff 0%, #e6f2ff 100%);
-        color: #0f172a;
+        background: var(--gradient-card);
+        color: var(--text-primary);
         position: relative;
         overflow: hidden;
-        border: none;
-    }
-    
-    .dark .mb-stat-card {
-        background: linear-gradient(135deg, #000000 0%, #111827 100%); /* Mercedes Schwarz */
-        color: var(--text-primary, #f8fafc);
+        border: 1px solid var(--border-primary);
+        box-shadow: var(--shadow-card);
     }
     
     .mb-stat-card::before {