"Update database configuration and assets for theming consistency"

backend/app/static/css/input.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Mercedes Deep Black Theme - Professional Grid Layouts */
+/* Professional Mercedes-Benz Theme für Dashboard-Stil */
 @layer base {
   :root {
     /* Light Mode Farben */
@@ -12,16 +12,16 @@
     --color-text-secondary: #334155;
     --color-text-muted: #64748b;
     --color-border-primary: #e2e8f0;
-    --color-accent: #000000; /* Mercedes-Benz Schwarz statt Blau */
+    --color-accent: #000000; /* Mercedes-Benz Schwarz */
     --color-accent-hover: #333333;
     --color-accent-text: #ffffff;
     --color-shadow: rgba(0, 0, 0, 0.1);
-    --card-radius: 1rem; /* Abgerundete Ecken für Karten */
+    --card-radius: 1rem;
   }
 
   .dark {
-    /* Mercedes Deep Black Dark Mode */
-    --color-bg-primary: #000000; /* Tiefes Schwarz wie Dashboard */
+    /* Tiefschwarzer Dark Mode wie Dashboard */
+    --color-bg-primary: #000000; /* Tiefes Schwarz */
     --color-bg-secondary: #0a0a0a; /* Sehr dunkles Grau */
     --color-text-primary: #ffffff;
     --color-text-secondary: #e2e8f0;
@@ -30,145 +30,359 @@
     --color-accent: #ffffff; /* Reines Weiß */
     --color-accent-hover: #f0f0f0;
     --color-accent-text: #000000;
-    --color-shadow: rgba(0, 0, 0, 0.8); /* Sehr dunkler Schatten */
+    --color-shadow: rgba(0, 0, 0, 0.8);
     --mb-black: #000000; /* Mercedes-Benz Schwarz */
   }
   
   body {
-    @apply bg-white dark:bg-mercedes-black text-slate-900 dark:text-white transition-colors duration-300;
+    @apply bg-white dark:bg-black text-slate-900 dark:text-white transition-colors duration-300;
     position: relative;
     min-height: 100vh;
   }
 
   .dark body {
-    background: #000000; /* Reines Schwarz wie Dashboard */
+    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
+  }
+
+  /* Professionelle Navbar mit Glassmorphismus */
+  nav {
+    @apply bg-white/80 dark:bg-black/80 backdrop-blur-professional border-b border-gray-200/70 dark:border-slate-700/20 shadow-professional-dark transition-all duration-300;
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+  }
+  
+  /* Benutzer-Dropdown */
+  #user-dropdown {
+    @apply absolute right-0 mt-2 w-64 bg-white/80 dark:bg-black/80 backdrop-blur-professional border border-gray-200/70 dark:border-slate-700/20 rounded-xl shadow-professional-dark transition-all duration-200 z-50;
+    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(110%);
   }
 }
 
-/* Mercedes Professional Grid System */
+/* Professional Components mit Dashboard-Styling */
 @layer components {
-  /* Dashboard-style Container */
-  .mercedes-container {
+  
+  /* Optimierte Abstände für bessere Übersicht */
+  .content-spacing {
+    @apply space-y-8;
+  }
+  
+  .card-grid {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
+  }
+  
+  .widget-grid {
+    @apply grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8;
+  }
+  
+  .stats-grid {
+    @apply grid grid-cols-2 md:grid-cols-4 gap-6;
+  }
+  
+  /* Professional Glassmorphismus Container */
+  .professional-container {
+    @apply bg-white/80 dark:bg-black/80 backdrop-blur-professional rounded-2xl border border-white/20 dark:border-white/10 shadow-professional-dark p-8 lg:p-12 transition-all duration-300;
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+  }
+  
+  .professional-container:hover {
+    @apply transform -translate-y-1 shadow-glass-dark;
+  }
+  
+  /* Professional Hero Header */
+  .professional-hero {
+    @apply relative overflow-hidden rounded-3xl mx-6 mb-8 shadow-professional-dark;
+    background: linear-gradient(135deg, 
+      rgba(255, 255, 255, 0.9) 0%, 
+      rgba(248, 250, 252, 0.8) 100%);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+  }
+  
+  .dark .professional-hero {
+    background: linear-gradient(135deg, 
+      rgba(0, 0, 0, 0.9) 0%, 
+      rgba(10, 10, 10, 0.8) 100%);
+  }
+  
+  /* Hero Pattern Overlay */
+  .hero-pattern {
+    background-image: 
+      radial-gradient(circle at 20% 20%, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+      radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    background-size: 50px 50px;
+    background-position: 0 0, 25px 25px;
+  }
+
+  .dark .hero-pattern {
+    background-image: 
+      radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+      radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+  }
+  
+  /* Mercedes Glassmorphismus Cards */
+  .mb-glass {
+    @apply bg-white/80 dark:bg-black/80 backdrop-blur-professional border border-white/20 dark:border-white/10 rounded-2xl shadow-glass-dark transition-all duration-300;
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+  }
+
+  .mb-glass:hover {
+    @apply transform -translate-y-1 shadow-professional-dark;
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  .dark .mb-glass:hover {
+    background: rgba(0, 0, 0, 0.9);
+  }
+  
+  /* Professional Buttons */
+  .btn-professional {
+    @apply bg-professional-primary hover:bg-professional-primary/90 text-professional-secondary border-none rounded-xl px-6 py-3 font-semibold text-sm uppercase tracking-wide transition-all duration-300 shadow-professional backdrop-blur-sm;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn-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-professional:hover::before {
+    left: 100%;
+  }
+
+  .btn-professional:hover {
+    @apply transform -translate-y-1 shadow-professional-dark;
+  }
+  
+  .btn-secondary-professional {
+    @apply bg-white/80 dark:bg-black/80 text-professional-primary border-2 border-professional-primary/20 rounded-xl px-6 py-3 font-semibold text-sm transition-all duration-300 shadow-card-professional backdrop-blur-sm;
+  }
+
+  .btn-secondary-professional:hover {
+    @apply border-professional-primary transform -translate-y-1 shadow-professional;
+    background: rgba(255, 255, 255, 0.9);
+  }
+
+  .dark .btn-secondary-professional:hover {
+    background: rgba(0, 0, 0, 0.9);
+  }
+  
+  .btn-success-professional {
+    @apply bg-professional-success hover:bg-professional-success/90 text-white border-none rounded-xl px-6 py-3 font-semibold text-sm uppercase tracking-wide transition-all duration-300 shadow-professional backdrop-blur-sm;
+  }
+  
+  .btn-danger-professional {
+    @apply bg-professional-error hover:bg-professional-error/90 text-white border-none rounded-xl px-6 py-3 font-semibold text-sm uppercase tracking-wide transition-all duration-300 shadow-professional backdrop-blur-sm;
+  }
+  
+  /* Professional Input Fields */
+  .input-professional {
+    @apply bg-white/80 dark:bg-black/80 border-2 border-professional-primary/20 rounded-lg px-4 py-3 text-professional-primary text-sm transition-all duration-300 shadow-card-professional backdrop-blur-sm;
+    backdrop-filter: blur(16px) saturate(150%);
+    -webkit-backdrop-filter: blur(16px) saturate(150%);
+  }
+
+  .input-professional:focus {
+    @apply border-professional-primary shadow-professional transform -translate-y-0.5;
+    outline: none;
+  }
+
+  .input-professional::placeholder {
+    @apply text-professional-muted;
+  }
+  
+  /* Dashboard-Style Statistics Cards */
+  .stat-card, .mb-stat-card {
+    @apply bg-white/80 dark:bg-black/80 backdrop-blur-professional rounded-2xl border border-white/20 dark:border-white/10 p-6 shadow-professional-dark transition-all duration-300 hover:transform hover:-translate-y-1;
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    position: relative;
+    overflow: hidden;
+  }
+  
+  /* Professional Typography */
+  .title-professional {
+    @apply font-bold tracking-tight leading-tight;
+    background: linear-gradient(135deg, 
+      var(--color-text-primary) 0%, 
+      var(--color-text-secondary) 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  .subtitle-professional {
+    @apply text-professional-muted font-normal leading-relaxed;
+  }
+  
+  .text-professional-primary {
+    color: var(--color-text-primary);
+  }
+  
+  .text-professional-secondary {
+    color: var(--color-text-secondary);
+  }
+  
+  .text-professional-muted {
+    color: var(--color-text-muted);
+  }
+  
+  .text-professional-accent {
+    color: var(--color-accent);
+  }
+  
+  /* Professional Background */
+  .bg-professional {
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
+    min-height: 100vh;
+  }
+  
+  .dark .bg-professional {
+    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%);
+  }
+  
+  /* Status Dots */
+  .status-dot {
+    @apply w-3 h-3 rounded-full inline-block relative;
+  }
+  
+  .status-dot.status-online {
+    @apply bg-professional-success;
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+    animation: pulse-professional 2s infinite;
+  }
+  
+  .status-dot.status-offline {
+    @apply bg-professional-error;
+    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
+  }
+  
+  /* Professional Shadow Effects */
+  .professional-shadow {
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  }
+  
+  .dark .professional-shadow {
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+  
+  /* Animation Classes */
+  .animate-fade-in {
+    animation: fadeIn 0.6s ease-out;
+  }
+
+  .animate-slide-up {
+    animation: slideUp 0.6s ease-out;
+  }
+
+  .animate-scale-in {
+    animation: scaleIn 0.4s ease-out;
+  }
+  
+  /* Filter Buttons Mercedes Style */
+  .filter-btn-mercedes {
+    @apply bg-transparent text-professional-muted border-none rounded-lg px-4 py-2 font-medium text-sm transition-all duration-300 cursor-pointer;
+  }
+
+  .filter-btn-mercedes:hover {
+    @apply text-professional-primary bg-white/10 dark:bg-black/10;
+  }
+
+  .filter-btn-mercedes.active {
+    @apply bg-professional-accent text-white shadow-professional;
+  }
+}
+
+/* Optimierte Responsive Breakpoints für bessere Übersicht */
+@layer utilities {
+  .container-professional {
     @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
   }
   
-  /* Grid Layouts wie Dashboard */
-  .stats-grid {
-    @apply grid gap-card-md;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  .grid-professional {
+    @apply grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
   }
   
-  @screen sm {
-    .stats-grid {
-      @apply grid-cols-stats-tablet gap-card-md;
-    }
+  .grid-stats {
+    @apply grid gap-4 grid-cols-2 md:grid-cols-4;
   }
   
-  @screen lg {
-    .stats-grid {
-      @apply grid-cols-stats-desktop gap-card-lg;
-    }
+  .spacing-professional {
+    @apply space-y-8 lg:space-y-12;
   }
   
-  /* Card Grid für Drucker/Jobs etc. */
-  .cards-grid {
-    @apply grid gap-card-md;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  }
-  
-  @screen md {
-    .cards-grid {
-      @apply grid-cols-cards-tablet gap-card-md;
-    }
-  }
-  
-  @screen lg {
-    .cards-grid {
-      @apply grid-cols-cards-desktop gap-card-lg;
-    }
-  }
-  
-  @screen xl {
-    .cards-grid {
-      @apply grid-cols-wide-desktop gap-card-lg;
-    }
-  }
-  
-  /* Professional Section Spacing */
-  .section-spacing {
-    @apply space-y-10;
-  }
-  
-  /* Mercedes Deep Black Cards */
-  .mercedes-card {
-    @apply bg-white/90 dark:bg-deep-black-surface/90 backdrop-blur-mercedes border border-gray-200/50 dark:border-deep-black-border/50 rounded-mercedes p-6 shadow-card-dark hover:shadow-mercedes-hover transition-all duration-400 hover:-translate-y-1;
-  }
-  
-  /* Dashboard-style Stats Cards */
-  .dashboard-stat-card {
-    @apply mercedes-card relative overflow-hidden;
-  }
-  
-  .dashboard-stat-card::before {
-    content: '';
-    @apply absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-status-info via-status-success to-status-warning;
-  }
-  
-  /* Professional Hero Sections */
-  .mercedes-hero {
-    @apply relative bg-gradient-to-br from-gray-50 via-white to-gray-100 dark:from-mercedes-black dark:via-mercedes-dark-gray dark:to-mercedes-black py-16 lg:py-24 overflow-hidden;
-  }
-  
-  .mercedes-hero::before {
-    content: '';
-    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent dark:via-white/5 opacity-50;
-  }
-  
-  /* Button System - Dashboard Style */
-  .btn-mercedes {
-    @apply px-6 py-3 rounded-card font-semibold text-sm uppercase tracking-wide transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 backdrop-blur-mercedes border;
-  }
-  
-  .btn-mercedes-primary {
-    @apply btn-mercedes bg-mercedes-black/90 dark:bg-white/90 text-white dark:text-black border-mercedes-black/20 dark:border-white/20 hover:bg-mercedes-black dark:hover:bg-white shadow-mercedes-glass hover:shadow-mercedes-hover;
-  }
-  
-  .btn-mercedes-secondary {
-    @apply btn-mercedes bg-white/20 dark:bg-white/10 text-gray-900 dark:text-white border-white/30 dark:border-white/20 hover:bg-white/30 dark:hover:bg-white/20 shadow-mercedes-glass;
-  }
-  
-  /* Status Indicators - Dashboard Style */
-  .status-indicator-mercedes {
-    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold backdrop-blur-sm;
-  }
-  
-  .status-online {
-    @apply status-indicator-mercedes bg-status-online/20 text-status-online border border-status-online/30;
-  }
-  
-  .status-offline {
-    @apply status-indicator-mercedes bg-status-offline/20 text-status-offline border border-status-offline/30;
-  }
-  
-  .status-warning {
-    @apply status-indicator-mercedes bg-status-warning/20 text-status-warning border border-status-warning/30;
-  }
-  
-  /* Professional Form Elements */
-  .form-input-mercedes {
-    @apply w-full px-4 py-3 bg-white/80 dark:bg-deep-black-surface/80 border border-gray-300/50 dark:border-deep-black-border rounded-card text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-deep-black-text-muted focus:outline-none focus:ring-2 focus:ring-mercedes-black/50 dark:focus:ring-white/50 focus:border-transparent transition-all duration-300 backdrop-blur-mercedes;
-  }
-  
-  /* Grid Gap Utilities - Dashboard Consistent */
-  .gap-dashboard {
-    @apply gap-6 lg:gap-8;
-  }
-  
-  .gap-cards {
-    @apply gap-4 md:gap-6;
-  }
-  
-  .gap-stats {
-    @apply gap-4 lg:gap-6;
+  .padding-professional {
+    @apply p-6 lg:p-8;
+  }
+}
+
+/* Keyframe Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { 
+    opacity: 0; 
+    transform: translateY(30px); 
+  }
+  to { 
+    opacity: 1; 
+    transform: translateY(0); 
+  }
+}
+
+@keyframes scaleIn {
+  from { 
+    opacity: 0; 
+    transform: scale(0.9); 
+  }
+  to { 
+    opacity: 1; 
+    transform: scale(1); 
+  }
+}
+
+@keyframes pulse-professional {
+  0%, 100% { 
+    opacity: 1; 
+    transform: scale(1); 
+  }
+  50% { 
+    opacity: 0.5; 
+    transform: scale(1.1); 
+  }
+}
+
+/* Mobile Optimierungen für bessere Übersicht */
+@media (max-width: 768px) {
+  .professional-hero {
+    @apply mx-4 rounded-2xl;
+  }
+  
+  .professional-container {
+    @apply p-6;
+  }
+  
+  .card-grid {
+    @apply grid-cols-1 gap-4;
+  }
+  
+  .stats-grid {
+    @apply grid-cols-1 gap-4;
+  }
+  
+  .widget-grid {
+    @apply grid-cols-1 gap-6;
   }
 }

backend/app/tailwind.config.js

@@ -12,183 +12,114 @@ module.exports = {
         '72': '18rem',
         '84': '21rem',
         '96': '24rem',
-        // Custom spacing für Mercedes Grid System
-        'card-sm': '1rem',
-        'card-md': '1.5rem',
-        'card-lg': '2rem',
-        'section': '2.5rem'
+        '128': '32rem'
       },
       colors: {
-        // Mercedes-Benz Corporate Colors - Deep Black Theme
+        // Mercedes-Benz Corporate Colors
         'mercedes': {
-          'black': '#000000',        // Tiefschwarz für Dark Mode
-          'dark-gray': '#0a0a0a',    // Sehr dunkles Grau
+          'black': '#000000',
+          'deep-black': '#000000', // Tiefes Schwarz für Dashboard-Style
           'silver': '#C0C0C0',
+          'dark-gray': '#0a0a0a', // Sehr dunkles Grau für Kontrast
           'light-gray': '#f5f5f5',
           'platinum': '#E5E4E2',
-          'charcoal': '#1a1a1a',     // Dunkle Akzentfarbe
+          'charcoal': '#1a1a1a', // Für Rahmen und Grenzen
           'steel': '#71797E'
         },
-        // Deep Black Dark Mode Farben
-        'deep-black': {
-          'primary': '#000000',      // Haupthintergrund
-          'secondary': '#0a0a0a',    // Sekundärer Hintergrund
-          'surface': '#1a1a1a',      // Kartenoberflächen
-          'border': '#333333',       // Rahmenfarben
-          'text': '#ffffff',         // Primärer Text
-          'text-muted': '#a0a0a0'    // Gedämpfter Text
-        },
-        // Professional Grid Colors
-        'grid': {
-          'gap-sm': '1rem',
-          'gap-md': '1.5rem', 
-          'gap-lg': '2rem',
-          'gap-xl': '2.5rem'
-        },
-        // Status Farben - Optimiert für Dark Mode
-        'status': {
-          'online': '#10b981',
-          'offline': '#ef4444',
-          'warning': '#f59e0b',
-          'info': '#3b82f6',
-          'success': '#059669',
-          'error': '#dc2626',
-          'pending': '#8b5cf6',
-          'processing': '#06b6d4'
-        },
-        // Dark Mode optimierte Farben - Verbessert
+        // Dashboard-kompatible Dark Mode Farben
         'dark': {
-          'bg': '#0f172a',        // Dunkler Hintergrund
-          'bg-secondary': '#131c2e', // Sekundärer Hintergrund noch dunkler
-          'surface': '#1e293b',
-          'surface-hover': '#334155',
-          'card': '#1e293b',      // Dunklere Kartenfarbe für besseren Kontrast
-          'card-hover': '#334155', // Dunklerer Hover-Zustand
-          'text': '#f8fafc',
+          'bg': '#000000',        // Tiefes Schwarz wie Dashboard
+          'bg-secondary': '#0a0a0a', // Sehr dunkles Grau
+          'surface': '#0f0f0f',   // Kartenhintergrund
+          'surface-hover': '#1a1a1a', // Hover-Zustand
+          'card': '#0f0f0f',      // Karten-Hintergrund
+          'card-hover': '#1a1a1a', // Karten-Hover
+          'text': '#ffffff',
           'text-secondary': '#e2e8f0',
           'text-muted': '#94a3b8',
           'text-disabled': '#64748b',
-          'border': '#475569',
-          'border-light': '#475569',
-          'hover': '#334155',     // Dunklerer Hover-Zustand
-          'focus': '#475569',
-          'accent': '#3b82f6'
+          'border': '#1a1a1a',    // Dunkle Rahmen
+          'border-light': '#2a2a2a',
+          'hover': '#1a1a1a',
+          'focus': '#2a2a2a',
+          'accent': '#ffffff'     // Weißer Akzent auf schwarzem Hintergrund
         },
-        // Light Mode optimierte Farben - Verbessert
+        // Light Mode optimierte Farben
         'light': {
           'bg': '#ffffff',
           'bg-secondary': '#f8fafc',
-          'surface': '#f7fafc',
-          'surface-hover': '#edf2f7',
+          'surface': '#ffffff',
+          'surface-hover': '#f8fafc',
           'card': '#ffffff',
           'card-hover': '#f7fafc',
-          'text': '#1a202c',
-          'text-secondary': '#2d3748',
-          'text-muted': '#4a5568',
+          'text': '#0f172a',
+          'text-secondary': '#334155',
+          'text-muted': '#64748b',
           'text-disabled': '#a0aec0',
           'border': '#e2e8f0',
-          'border-light': '#edf2f7',
+          'border-light': '#f1f5f9',
           'hover': '#f1f5f9',
           'focus': '#e2e8f0',
-          'accent': '#3b82f6'
+          'accent': '#000000'     // Schwarzer Akzent auf weißem Hintergrund
         },
-        // Printer Status Farben - Erweitert
-        'printer': {
-          'ready': '#10b981',
-          'busy': '#f59e0b',
-          'error': '#ef4444',
-          'offline': '#6b7280',
-          'maintenance': '#8b5cf6',
-          'initializing': '#06b6d4',
-          'online': '#10b981',
-          'maintenance': '#8b5cf6',
-          'error': '#dc2626'
-        },
-        // Job Status Farben - Erweitert
-        'job': {
-          'queued': '#6b7280',
-          'printing': '#3b82f6',
-          'completed': '#10b981',
-          'failed': '#ef4444',
-          'cancelled': '#f59e0b',
-          'paused': '#8b5cf6',
-          'retrying': '#f97316'
-        },
-        // Accent Farben - Erweitert
-        'accent': {
-          'primary': '#3b82f6',
-          'secondary': '#8b5cf6',
-          'tertiary': '#06b6d4',
-          'quaternary': '#10b981',
-          'quinary': '#f97316'
-        },
-        // Gradient Farben - Erweitert
-        'gradient': {
-          'from-blue': '#3b82f6',
-          'to-purple': '#8b5cf6',
-          'from-green': '#10b981',
-          'to-blue': '#3b82f6',
-          'from-purple': '#8b5cf6',
-          'to-pink': '#ec4899',
-          'from-orange': '#f97316',
-          'to-red': '#ef4444'
+        // Professional Theme Colors
+        'professional': {
+          'primary': '#000000',   // Mercedes Schwarz
+          'secondary': '#ffffff', // Reines Weiß
+          'accent': '#0ea5e9',   // Mercedes Blau Akzent
+          'muted': '#64748b',
+          'success': '#10b981',
+          'warning': '#f59e0b',
+          'error': '#ef4444'
         }
       },
-      // Grid Layout Definitionen
-      gridTemplateColumns: {
-        'stats-mobile': '1fr',
-        'stats-tablet': 'repeat(2, 1fr)',
-        'stats-desktop': 'repeat(4, 1fr)',
-        'cards-mobile': '1fr',
-        'cards-tablet': 'repeat(2, 1fr)',
-        'cards-desktop': 'repeat(3, 1fr)',
-        'wide-desktop': 'repeat(4, 1fr)'
+      backgroundImage: {
+        'gradient-professional': 'linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #000000 100%)',
+        'gradient-professional-light': 'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)'
       },
-      // Professional Shadows für Glasmorphismus
       boxShadow: {
-        'mercedes-glass': '0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1)',
-        'mercedes-hover': '0 12px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15)',
-        'card-dark': '0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05)',
-        'deep-black': '0 20px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1)'
+        'glass': '0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05)',
+        'glass-dark': '0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
+        'professional': '0 20px 40px rgba(0, 0, 0, 0.1)',
+        'professional-dark': '0 20px 40px rgba(0, 0, 0, 0.6)',
+        'card-professional': '0 10px 30px rgba(0, 0, 0, 0.1)',
+        'card-professional-dark': '0 10px 30px rgba(0, 0, 0, 0.4)'
       },
-      // Backdrop Blur Values
       backdropBlur: {
-        'mercedes': '20px',
-        'strong': '25px'
+        'xs': '2px',
+        'professional': '20px'
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.6s ease-out',
+        'slide-up': 'slideUp 0.6s ease-out',
+        'scale-in': 'scaleIn 0.4s ease-out',
+        'pulse-professional': 'pulseProfessional 2s infinite'
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' }
+        },
+        slideUp: {
+          '0%': { opacity: '0', transform: 'translateY(30px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        },
+        scaleIn: {
+          '0%': { opacity: '0', transform: 'scale(0.9)' },
+          '100%': { opacity: '1', transform: 'scale(1)' }
+        },
+        pulseProfessional: {
+          '0%, 100%': { opacity: '1', transform: 'scale(1)' },
+          '50%': { opacity: '0.5', transform: 'scale(1.1)' }
+        }
       },
-      // Typography für Mercedes-Design
       fontFamily: {
         'mercedes': ['Inter', 'system-ui', 'sans-serif']
-      },
-      // Animation Timings
-      transitionDuration: {
-        '400': '400ms',
-        '600': '600ms'
-      },
-      // Border Radius für konsistente Rundungen
-      borderRadius: {
-        'mercedes': '1.5rem',
-        'card': '1.25rem'
-      },
-      typography: {
-        DEFAULT: {
-          css: {
-            'code::before': {
-              content: 'none',
-            },
-            'code::after': {
-              content: 'none',
-            },
-            maxWidth: 'none'
-          },
-        },
-      },
+      }
     },
   },
   plugins: [
-    require('@tailwindcss/forms')({
-      strategy: 'class'
-    }),
+    require('@tailwindcss/forms'),
     require('@tailwindcss/typography')
   ],
 } 

backend/app/templates/base.html

@@ -19,8 +19,11 @@
     <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
     
     <!-- Favicon -->
-    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
-    <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
+    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon-32x32.png') }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icons/favicon-16x16.png') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png') }}">
+    <link rel="mask-icon" href="{{ url_for('static', filename='favicon.svg') }}" color="#000000">
     
     <!-- CSS -->
     <link href="{{ url_for('static', filename='css/tailwind.min.css') }}" rel="stylesheet">

backend/app/templates/jobs.html

@@ -3,15 +3,30 @@
 {% block title %}Druckaufträge - Mercedes-Benz MYP Platform{% endblock %}
 
 {% block content %}
-<div class="min-h-screen bg-mercedes-black">
+<div class="bg-professional">
     
-    <!-- Mercedes Hero Section -->
-    <div class="mercedes-hero">
-        <div class="mercedes-container py-16 lg:py-24">
+    <!-- Professional Hero Header -->
+    <div class="professional-hero hero-pattern animate-fade-in">
+        <div class="absolute inset-0 bg-gradient-to-r from-black/10 to-black/20 dark:from-black/20 dark:to-black/40"></div>
+        
+        <!-- Status Indicator -->
+        <div class="absolute top-6 right-6 flex items-center space-x-3 z-10">
+            <div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
+                <div class="flex items-center space-x-2">
+                    <div class="status-dot status-online"></div>
+                    <span class="text-sm font-semibold text-professional-primary">Live</span>
+            </div>
+            </div>
+            <div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
+                <span id="live-time" class="text-sm font-semibold text-professional-primary"></span>
+            </div>
+        </div>
+        
+        <div class="relative max-w-7xl mx-auto px-6 lg:px-8 py-16 z-10">
             <div class="text-center animate-slide-up">
                 <!-- Mercedes-Benz Logo -->
-                <div class="inline-flex items-center justify-center w-24 h-24 mercedes-card rounded-full mb-8">
-                    <svg class="w-12 h-12 text-gray-900 dark:text-white" viewBox="0 0 80 80" fill="currentColor">
+                <div class="inline-flex items-center justify-center w-24 h-24 mb-glass rounded-full mb-8 professional-shadow">
+                    <svg class="w-12 h-12 text-professional-primary" viewBox="0 0 80 80" fill="currentColor">
                         <path 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.5
                         C27,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,40
                         c0-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.8
@@ -21,199 +36,184 @@
                     </svg>
                 </div>
                 
-                <h1 class="text-5xl md:text-6xl font-bold mb-6 tracking-tight text-gray-900 dark:text-white">
+                <h1 class="title-professional text-5xl md:text-6xl font-bold mb-6 tracking-tight">
                     Druckaufträge Management
                 </h1>
-                <p class="text-xl md:text-2xl max-w-4xl mx-auto leading-relaxed mb-8 text-gray-600 dark:text-gray-300">
+                <p class="subtitle-professional text-xl md:text-2xl max-w-4xl mx-auto leading-relaxed mb-8">
                     Verwalten Sie Ihre 3D-Druckjobs mit höchster Präzision und Mercedes-Benz Qualitätsstandard
                 </p>
                 
-                <!-- Status Overview Dashboard Style -->
-                <div class="stats-grid mb-8">
-                    <div class="dashboard-stat-card">
-                        <div class="flex items-center space-x-3">
-                            <div class="status-dot online"></div>
-                            <span class="text-gray-900 dark:text-white font-semibold">Live System</span>
-                        </div>
-                        <div class="mt-2">
-                            <span id="live-time" class="text-sm font-mono text-gray-600 dark:text-gray-400"></span>
-                        </div>
-                    </div>
-                </div>
-                
                 <!-- Action Buttons -->
                 <div class="flex flex-wrap justify-center gap-4">
-                    <button onclick="refreshJobs()" class="btn-mercedes-primary group">
+                    <button onclick="refreshJobs()" class="btn-professional group">
                         <svg class="w-6 h-6 mr-3 group-hover:rotate-180 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                         </svg>
                         <span>Aktualisieren</span>
-                    </button>
+                </button>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="mercedes-container section-spacing">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-10 space-y-8">
 
-        <!-- Neue Reservierung anlegen -->
-        <div class="mercedes-card animate-slide-up">
+    <!-- Neue Reservierung anlegen -->
+        <div class="professional-container p-8 lg:p-12 animate-slide-up">
             <div class="text-center mb-10">
-                <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
+                <h2 class="title-professional text-3xl font-bold mb-4">
                     Neue Reservierung anlegen
                 </h2>
-                <p class="text-lg text-gray-600 dark:text-gray-300">
+                <p class="subtitle-professional text-lg">
                     Erstellen Sie einen neuen Druckauftrag mit professionellen Einstellungen
                 </p>
             </div>
         
-            <!-- Queue-Status-Anzeige -->
+        <!-- Queue-Status-Anzeige -->
             <div id="queue-status-info" class="mb-8"></div>
         
             <form id="newJobForm" class="space-y-8">
-                <div class="cards-grid">
-                    <!-- Drucker auswählen -->
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <!-- Drucker auswählen -->
                     <div class="group">
-                        <label for="printer_id" class="block text-sm font-semibold text-gray-900 dark:text-white mb-3">
+                        <label for="printer_id" class="block text-sm font-semibold text-professional-primary mb-3">
                             Drucker auswählen <span class="text-red-500">*</span>
                         </label>
                         <div class="relative">
                             <select id="printer_id" name="printer_id" required 
-                                    class="form-input-mercedes appearance-none pr-12 cursor-pointer">
-                                <option value="">Drucker auswählen...</option>
-                                <!-- Wird durch JavaScript gefüllt -->
-                            </select>
+                                    class="input-professional appearance-none pr-12 cursor-pointer">
+                        <option value="">Drucker auswählen...</option>
+                        <!-- Wird durch JavaScript gefüllt -->
+                    </select>
                             <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
-                                <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <svg class="h-5 w-5 text-professional-muted group-hover:text-professional-primary transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                 </svg>
                             </div>
                         </div>
                         <div id="printer-status-info" class="mt-3 text-center">
-                            <!-- Status-Info wird dynamisch gefüllt -->
-                        </div>
+                        <!-- Status-Info wird dynamisch gefüllt -->
+                    </div>
                         <div id="printer-status-warning" class="mt-4 hidden">
-                            <div class="mercedes-card bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-700/50">
-                                <div class="flex">
-                                    <div class="flex-shrink-0">
-                                        <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl flex items-center justify-center">
-                                            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-                                            </svg>
-                                        </div>
+                            <div class="alert-professional alert-warning">
+                                <div class="flex-shrink-0">
+                                    <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl flex items-center justify-center">
+                                        <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+                                </svg>
                                     </div>
-                                    <div class="flex-1 ml-4">
-                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-                                            🔄 WARTESCHLANGEN-MODUS: Offline-Drucker ausgewählt!
-                                        </h3>
-                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                            <div class="flex items-center space-x-3">
-                                                <div class="w-2 h-2 bg-red-500 rounded-full"></div>
-                                                <span class="text-sm text-gray-700 dark:text-gray-300">Drucker ist derzeit <strong>OFFLINE</strong></span>
-                                            </div>
-                                            <div class="flex items-center space-x-3">
-                                                <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
-                                                <span class="text-sm text-gray-700 dark:text-gray-300">Job wird in <strong>WARTESCHLANGE</strong> eingereiht</span>
-                                            </div>
-                                            <div class="flex items-center space-x-3">
-                                                <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
-                                                <span class="text-sm text-gray-700 dark:text-gray-300">System überwacht alle <strong>2 Minuten</strong></span>
-                                            </div>
-                                            <div class="flex items-center space-x-3">
-                                                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
-                                                <span class="text-sm text-gray-700 dark:text-gray-300">Start <strong>AUTOMATISCH</strong> bei Verfügbarkeit</span>
-                                            </div>
+                            </div>
+                            <div class="flex-1">
+                                    <h3 class="text-lg font-semibold text-professional-primary mb-4">
+                                        🔄 WARTESCHLANGEN-MODUS: Offline-Drucker ausgewählt!
+                                    </h3>
+                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                        <div class="flex items-center space-x-3">
+                                            <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+                                            <span class="text-sm text-professional-secondary">Drucker ist derzeit <strong>OFFLINE</strong></span>
+                                </div>
+                                        <div class="flex items-center space-x-3">
+                                            <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
+                                            <span class="text-sm text-professional-secondary">Job wird in <strong>WARTESCHLANGE</strong> eingereiht</span>
+                            </div>
+                                        <div class="flex items-center space-x-3">
+                                            <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
+                                            <span class="text-sm text-professional-secondary">System überwacht alle <strong>2 Minuten</strong></span>
+                                        </div>
+                                        <div class="flex items-center space-x-3">
+                                            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                                            <span class="text-sm text-professional-secondary">Start <strong>AUTOMATISCH</strong> bei Verfügbarkeit</span>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
                         </div>
                     </div>
-                    
-                    <!-- Gewünschte Startzeit -->
-                    <div class="group">
-                        <label for="start_time" class="block text-sm font-semibold text-gray-900 dark:text-white mb-3">
-                            Gewünschte Startzeit <span class="text-red-500">*</span>
-                        </label>
-                        <input type="datetime-local" id="start_time" name="start_time" required 
-                               class="form-input-mercedes">
-                    </div>
-                    
-                    <!-- Geschätzte Druckdauer -->
-                    <div class="group">
-                        <label for="duration" class="block text-sm font-semibold text-gray-900 dark:text-white mb-3">
-                            Geschätzte Druckdauer (Minuten) <span class="text-red-500">*</span>
-                        </label>
-                        <input type="number" id="duration" name="duration" required min="1" max="7200" 
-                               class="form-input-mercedes" placeholder="60">
-                    </div>
                 </div>
                 
-                <div class="space-y-8">
+                <!-- Gewünschte Startzeit -->
+                    <div class="group">
+                        <label for="start_time" class="block text-sm font-semibold text-professional-primary mb-3">
+                            Gewünschte Startzeit <span class="text-red-500">*</span>
+                        </label>
+                    <input type="datetime-local" id="start_time" name="start_time" required 
+                               class="input-professional">
+                </div>
+                
+                <!-- Geschätzte Druckdauer -->
+                    <div class="group">
+                        <label for="duration" class="block text-sm font-semibold text-professional-primary mb-3">
+                            Geschätzte Druckdauer (Minuten) <span class="text-red-500">*</span>
+                        </label>
+                    <input type="number" id="duration" name="duration" required min="1" max="7200" 
+                               class="input-professional" placeholder="60">
+                </div>
+            </div>
+            
+                <div class="grid grid-cols-1 gap-8">
                     <!-- Job-Titel -->
                     <div class="group">
-                        <label for="job_title" class="block text-sm font-semibold text-gray-900 dark:text-white mb-3">
+                        <label for="job_title" class="block text-sm font-semibold text-professional-primary mb-3">
                             Job-Titel <span class="text-red-500">*</span>
                         </label>
                         <input type="text" id="job_title" name="job_title" required 
-                               class="form-input-mercedes"
+                               class="input-professional"
                                placeholder="Geben Sie einen beschreibenden Titel ein">
-                    </div>
-                    
+            </div>
+            
                     <!-- STL-Datei hochladen -->
                     <div class="group">
-                        <label for="stl_file" class="block text-sm font-semibold text-gray-900 dark:text-white mb-3">
+                        <label for="stl_file" class="block text-sm font-semibold text-professional-primary mb-3">
                             STL-Datei hochladen (optional)
                         </label>
-                        <div class="flex items-center justify-center w-full">
-                            <label for="stl_file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-card cursor-pointer bg-gray-50/50 dark:bg-gray-700/30 hover:bg-gray-100/70 dark:hover:bg-gray-700/50 transition-all duration-300 backdrop-blur-sm">
-                                <div class="flex flex-col items-center justify-center pt-5 pb-6">
-                                    <svg class="w-10 h-10 mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div class="flex items-center justify-center w-full">
+                            <label for="stl_file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-slate-300 dark:border-slate-600 border-dashed rounded-2xl cursor-pointer bg-slate-50/50 dark:bg-slate-700/30 hover:bg-slate-100/70 dark:hover:bg-slate-700/50 transition-all duration-300 backdrop-blur-sm">
+                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                                    <svg class="w-10 h-10 mb-3 text-professional-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
-                                    </svg>
-                                    <p class="mb-2 text-sm text-gray-700 dark:text-gray-300"><span class="font-semibold">Klicken Sie zum Hochladen</span> oder ziehen Sie die Datei hierher</p>
-                                    <p class="text-xs text-gray-500 dark:text-gray-400">STL bis zu 50MB</p>
-                                </div>
-                                <input id="stl_file" name="stl_file" type="file" accept=".stl" class="hidden" />
-                            </label>
+                            </svg>
+                                    <p class="mb-2 text-sm text-professional-primary"><span class="font-semibold">Klicken Sie zum Hochladen</span> oder ziehen Sie die Datei hierher</p>
+                                    <p class="text-xs text-professional-muted">STL bis zu 50MB</p>
                         </div>
-                        <div id="file-name" class="mt-3 text-sm text-gray-500 dark:text-gray-400 hidden"></div>
-                    </div>
+                        <input id="stl_file" name="stl_file" type="file" accept=".stl" class="hidden" />
+                    </label>
                 </div>
-                
+                        <div id="file-name" class="mt-3 text-sm text-professional-muted hidden"></div>
+                    </div>
+            </div>
+            
                 <!-- Submit Button -->
-                <div class="flex items-center justify-end pt-8 border-t border-gray-200 dark:border-gray-600">
-                    <button type="submit" class="btn-mercedes-primary group">
+                <div class="flex items-center justify-end pt-8 border-t border-slate-200 dark:border-slate-600">
+                    <button type="submit" class="btn-professional group">
                         <svg class="w-5 h-5 mr-3 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                         </svg>
                         <span>Reservierung erstellen</span>
-                    </button>
-                </div>
-            </form>
-        </div>
-        
-        <!-- Aktive und geplante Jobs -->
-        <div class="mercedes-card animate-slide-up">
+                </button>
+            </div>
+        </form>
+    </div>
+    
+    <!-- Aktive und geplante Jobs -->
+        <div class="professional-container p-8 lg:p-12 animate-slide-up">
             <div class="text-center mb-10">
-                <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">
+                <h2 class="title-professional text-3xl font-bold mb-4">
                     Aktive und geplante Jobs
                 </h2>
-                <p class="text-lg text-gray-600 dark:text-gray-300">
+                <p class="subtitle-professional text-lg">
                     Übersicht Ihrer laufenden und geplanten Druckaufträge
                 </p>
             </div>
         
-            <div id="active-jobs-container" class="cards-grid">
-                <!-- Jobs werden dynamisch mit JavaScript geladen -->
+        <div id="active-jobs-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Jobs werden dynamisch mit JavaScript geladen -->
                 <div class="col-span-full py-12 text-center" id="no-jobs-message">
-                    <div class="text-gray-400 mb-4">
+                    <div class="text-professional-muted mb-4">
                         <svg class="w-16 h-16 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-                        </svg>
+                </svg>
                     </div>
-                    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">Keine aktiven Jobs</h3>
-                    <p class="text-gray-500 dark:text-gray-400">Sie haben derzeit keine aktiven oder geplanten Druckjobs.</p>
+                    <h3 class="text-lg font-semibold text-professional-primary mb-2">Keine aktiven Jobs</h3>
+                    <p class="text-professional-muted">Sie haben derzeit keine aktiven oder geplanten Druckjobs.</p>
                 </div>
             </div>
         </div>
@@ -223,21 +223,21 @@
 <!-- Job Details Modal -->
 <div id="jobDetailsModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-50">
     <div class="flex items-center justify-center min-h-screen p-4">
-        <div class="mercedes-card max-w-2xl w-full transform transition-all duration-500 scale-95 opacity-0" id="jobModalContent">
+        <div class="professional-container max-w-2xl w-full p-8 transform transition-all duration-500 scale-95 opacity-0" id="jobModalContent">
             <div class="flex justify-between items-center mb-8">
                 <div>
-                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Job Details</h3>
-                    <p class="text-gray-600 dark:text-gray-300">Detaillierte Informationen zu Ihrem Druckauftrag</p>
+                    <h3 class="text-2xl font-bold text-professional-primary mb-2">Job Details</h3>
+                    <p class="text-professional-muted">Detaillierte Informationen zu Ihrem Druckauftrag</p>
                 </div>
-                <button onclick="closeJobModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-colors duration-200">
-                    <svg class="w-6 h-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <button onclick="closeJobModal()" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-xl transition-colors duration-200">
+                    <svg class="w-6 h-6 text-professional-muted hover:text-professional-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                    </svg>
-                </button>
+            </svg>
+        </button>
             </div>
         
             <div id="jobDetailsContent">
-                <!-- Inhalt wird dynamisch geladen -->
+            <!-- Inhalt wird dynamisch geladen -->
             </div>
         </div>
     </div>
@@ -246,36 +246,36 @@
 <!-- Job verlängern Modal -->
 <div id="extendJobModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-50">
     <div class="flex items-center justify-center min-h-screen p-4">
-        <div class="mercedes-card max-w-md w-full transform transition-all duration-500 scale-95 opacity-0" id="extendModalContent">
+        <div class="professional-container max-w-md w-full p-8 transform transition-all duration-500 scale-95 opacity-0" id="extendModalContent">
             <div class="flex justify-between items-center mb-8">
                 <div>
-                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Druckzeit verlängern</h3>
-                    <p class="text-gray-600 dark:text-gray-300">Geben Sie die zusätzlichen Minuten an</p>
+                    <h3 class="text-2xl font-bold text-professional-primary mb-2">Druckzeit verlängern</h3>
+                    <p class="text-professional-muted">Geben Sie die zusätzlichen Minuten an</p>
                 </div>
-                <button onclick="closeExtendModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-colors duration-200">
-                    <svg class="w-6 h-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <button onclick="closeExtendModal()" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-xl transition-colors duration-200">
+                    <svg class="w-6 h-6 text-professional-muted hover:text-professional-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                    </svg>
-                </button>
+            </svg>
+        </button>
             </div>
             
             <form id="extendJobForm" class="space-y-6">
                 <input type="hidden" id="extend_job_id" name="job_id">
                 <div>
-                    <label for="extra_minutes" class="block text-sm font-semibold text-gray-900 dark:text-white mb-3">
+                    <label for="extra_minutes" class="block text-sm font-semibold text-professional-primary mb-3">
                         Zusätzliche Minuten
                     </label>
                     <input type="number" id="extra_minutes" name="extra_minutes" required min="1" max="720" value="30"
-                           class="form-input-mercedes" placeholder="30">
+                           class="input-professional" placeholder="30">
                 </div>
                 
-                <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200 dark:border-gray-600">
+                <div class="flex items-center justify-end space-x-4 pt-6 border-t border-slate-200 dark:border-slate-600">
                     <button type="button" onclick="closeExtendModal()" 
-                            class="btn-mercedes-secondary">
+                            class="btn-secondary-professional">
                         Abbrechen
                     </button>
                     <button type="submit" 
-                            class="btn-mercedes-primary">
+                            class="btn-professional">
                         Verlängern
                     </button>
                 </div>
@@ -304,7 +304,7 @@ setInterval(updateLiveTime, 1000);
 // Modal Animations
 function showModal(modalId) {
     const modal = document.getElementById(modalId);
-    const content = modal.querySelector('.mercedes-card');
+    const content = modal.querySelector('.professional-container');
     
     modal.classList.remove('hidden');
     setTimeout(() => {
@@ -315,7 +315,7 @@ function showModal(modalId) {
 
 function hideModal(modalId) {
     const modal = document.getElementById(modalId);
-    const content = modal.querySelector('.mercedes-card');
+    const content = modal.querySelector('.professional-container');
     
     content.classList.remove('scale-100', 'opacity-100');
     content.classList.add('scale-95', 'opacity-0');