🔧 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/base.html

@@ -24,42 +24,58 @@
     <!-- Unified Dark/Light Mode System -->
     <link href="{{ url_for('static', filename='css/dark-light-unified.css') }}" rel="stylesheet">
     
-    <!-- Modern Styles with Glassmorphism -->
+    <!-- Enhanced Theme-Aware Styles -->
     <style>
-        /* Root Variables */
-        :root {
-            --glass-bg: rgba(255, 255, 255, 0.7);
-            --glass-border: rgba(255, 255, 255, 0.2);
-            --shadow-color: rgba(0, 0, 0, 0.1);
-            --text-primary: #1e293b;
-            --text-secondary: #64748b;
+        /* Base Layout & Performance */
+        .navbar-sticky {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 50;
         }
         
-        .dark {
-            --glass-bg: rgba(30, 41, 59, 0.7);
-            --glass-border: rgba(255, 255, 255, 0.1);
-            --shadow-color: rgba(0, 0, 0, 0.3);
-            --text-primary: #f1f5f9;
-            --text-secondary: #94a3b8;
+        .main-offset {
+            padding-top: 3.5rem;
         }
         
-        /* Glassmorphism Base */
+        /* Glassmorphism Base (uses unified CSS variables) */
         .glass {
             background: var(--glass-bg);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
+            backdrop-filter: var(--glass-blur);
+            -webkit-backdrop-filter: var(--glass-blur);
             border: 1px solid var(--glass-border);
-            box-shadow: 0 8px 32px var(--shadow-color);
-            border-radius: 20px;
+            box-shadow: var(--glass-shadow);
+            border-radius: 16px;
             padding: 0.75rem 1.5rem;
             margin: 0.5rem;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         
-        /* Raspberry Pi Performance Optimization */
+        /* Mobile menu animations */
+        .mobile-menu {
+            transform: translateX(-100%);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .mobile-menu.active {
+            transform: translateX(0);
+        }
+        
+        /* Enhanced Active nav styling */
+        .nav-active {
+            background: var(--active-bg);
+            color: var(--text-accent);
+            font-weight: 600;
+            border-radius: 8px;
+            box-shadow: var(--shadow-sm);
+        }
+        
+        /* Performance optimizations */
         @media (max-width: 768px), (prefers-reduced-motion: reduce) {
             .glass {
-                backdrop-filter: none;
-                -webkit-backdrop-filter: none;
+                backdrop-filter: none !important;
+                -webkit-backdrop-filter: none !important;
                 background: var(--bg-card);
             }
             
@@ -69,77 +85,12 @@
             }
         }
         
-        /* Sticky Navigation */
-        .navbar-sticky {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 50;
+        /* Theme transition optimization */
+        .disable-transitions * {
+            transition: none !important;
         }
         
-        /* Main content offset for sticky navbar */
-        .main-offset {
-            padding-top: 3rem;
-        }
-        
-        /* Smooth transitions */
-        * {
-            transition-property: background-color, border-color, color, fill, stroke;
-            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            transition-duration: 150ms;
-        }
-        
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        
-        ::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        ::-webkit-scrollbar-thumb {
-            background: rgba(0, 0, 0, 0.2);
-            border-radius: 4px;
-        }
-        
-        .dark ::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.2);
-        }
-        
-        /* Mobile menu animations */
-        .mobile-menu {
-            transform: translateX(-100%);
-            transition: transform 0.3s ease-in-out;
-        }
-        
-        .mobile-menu.active {
-            transform: translateX(0);
-        }
-        
-        /* Active nav item */
-        .nav-active {
-            background: rgba(59, 130, 246, 0.1);
-            border-left: 3px solid #3b82f6;
-        }
-        
-        .dark .nav-active {
-            background: rgba(59, 130, 246, 0.2);
-        }
-        
-        /* Hover effects */
-        .hover-lift {
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-        
-        .hover-lift:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 12px 40px var(--shadow-color);
-        }
-        
-        /* Loading animation */
+        /* Loading states */
         @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.5; }
@@ -148,6 +99,49 @@
         .animate-pulse {
             animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
         }
+        
+        /* Flash message enhancements */
+        .flash-message {
+            background: var(--bg-card);
+            border: 1px solid var(--border-primary);
+            color: var(--text-primary);
+            box-shadow: var(--shadow-lg);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+        }
+        
+        /* Notification improvements */
+        .notification-badge {
+            background: var(--text-error);
+            color: white;
+            border: 2px solid var(--bg-primary);
+        }
+        
+        /* Logo adaptive styling */
+        .logo-adaptive {
+            transition: all 0.3s ease;
+        }
+        
+        .dark .logo-adaptive {
+            filter: brightness(1.1) contrast(1.05);
+        }
+        
+        /* Enhanced focus states */
+        .focus-ring:focus {
+            outline: none;
+            box-shadow: var(--focus-ring);
+        }
+        
+        /* Button group styling */
+        .btn-group {
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+        }
+        
+        .btn-group .btn {
+            margin: 0;
+        }
     </style>
     
     <!-- CSRF-Token-Fix (Kritisch - muss vor anderen Scripts geladen werden) -->

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 {

backend/templates/drucker_steuerung.html

@@ -0,0 +1,305 @@
+{% extends "base.html" %}
+
+{% block title %}{{ seiten_titel }} - Mercedes-Benz TBA Marienfelde{% endblock %}
+
+{% block head %}
+{{ super() }}
+<!-- KEIN JavaScript für Steuerung - nur CSS für Styling! -->
+<style>
+.drucker-card {
+    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+    border: 2px solid #f1f5f9;
+    border-radius: 16px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.drucker-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    border-color: #0073ce;
+}
+.status-online {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: white;
+}
+.status-offline {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    color: white;
+}
+.steuerung-button {
+    transition: all 0.3s ease;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+}
+.steuerung-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+.btn-einschalten {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: white;
+}
+.btn-ausschalten {
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    color: white;
+}
+.btn-toggle {
+    background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%);
+    color: white;
+}
+.btn-notfall {
+    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
+    color: white;
+}
+.stats-card {
+    background: linear-gradient(135deg, #0073ce 0%, #005ba3 100%);
+    color: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    text-align: center;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
+    
+    <!-- Hero Header -->
+    <div class="relative overflow-hidden bg-gradient-to-r from-slate-900 via-blue-900 to-indigo-900 text-white rounded-3xl mx-4 mt-4">
+        <div class="absolute inset-0 bg-black/20"></div>
+        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+            <div class="text-center">
+                <div class="inline-flex items-center justify-center w-16 h-16 bg-white/10 backdrop-blur-sm rounded-full mb-4">
+                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
+                    </svg>
+                </div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-4">{{ seiten_titel }}</h1>
+                <p class="text-xl text-blue-100 mb-6">Backend-gesteuerte Drucker-Verwaltung über Tapo-Steckdosen</p>
+                
+                <!-- System-Status -->
+                <div class="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-4 py-2">
+                    {% if system_status == 'healthy' %}
+                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+                        <span class="text-sm font-medium">System Gesund</span>
+                    {% elif system_status == 'warning' %}
+                        <div class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"></div>
+                        <span class="text-sm font-medium">System Warnung</span>
+                    {% else %}
+                        <div class="w-2 h-2 bg-red-400 rounded-full animate-pulse"></div>
+                        <span class="text-sm font-medium">System Fehler</span>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Hauptinhalt -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        
+        <!-- Statistiken-Übersicht -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+            <div class="stats-card">
+                <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Gesamt</h3>
+                <p class="text-3xl font-bold">{{ stats.gesamt_drucker or 0 }}</p>
+                <p class="text-sm opacity-80">Drucker registriert</p>
+            </div>
+            <div class="stats-card">
+                <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Online</h3>
+                <p class="text-3xl font-bold text-green-200">{{ stats.online_drucker or 0 }}</p>
+                <p class="text-sm opacity-80">Aktuell eingeschaltet</p>
+            </div>
+            <div class="stats-card">
+                <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Offline</h3>
+                <p class="text-3xl font-bold text-red-200">{{ stats.offline_drucker or 0 }}</p>
+                <p class="text-sm opacity-80">Aktuell ausgeschaltet</p>
+            </div>
+            <div class="stats-card">
+                <h3 class="text-sm font-semibold uppercase tracking-wider mb-2">Verfügbarkeit</h3>
+                <p class="text-3xl font-bold">{{ stats.verfügbarkeits_rate or 0 }}%</p>
+                <p class="text-sm opacity-80">Durchschnittlich</p>
+            </div>
+        </div>
+        
+        <!-- Steuerungs-Aktionen -->
+        {% if benutzer_kann_steuern %}
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 mb-8">
+            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">🎮 System-Steuerung</h3>
+            <div class="flex flex-wrap gap-4">
+                
+                <!-- Status aktualisieren -->
+                <a href="{{ url_for('drucker.status_refresh') }}" class="steuerung-button btn-toggle">
+                    🔄 Status aktualisieren
+                </a>
+                
+                <!-- Notfall-Shutdown (nur für Admins) -->
+                {% if current_user.is_admin %}
+                <form method="POST" action="{{ url_for('drucker.alle_drucker_ausschalten') }}" style="display: inline;">
+                    <button type="submit" class="steuerung-button btn-notfall" 
+                            onclick="return confirm('🚨 ACHTUNG: Alle Drucker werden ausgeschaltet! Fortfahren?')">
+                        🚨 ALLE AUSSCHALTEN
+                    </button>
+                </form>
+                {% endif %}
+                
+                <!-- Letzte Aktualisierung -->
+                <div class="flex items-center text-gray-600 dark:text-gray-400 ml-4">
+                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                    </svg>
+                    <span class="text-sm">Letztes Update: {{ letztes_update }}</span>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        
+        <!-- Drucker-Liste -->
+        {% if drucker %}
+        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+            {% for drucker_item in drucker %}
+            <div class="drucker-card p-6">
+                
+                <!-- Drucker-Header -->
+                <div class="flex items-center justify-between mb-4">
+                    <div>
+                        <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ drucker_item.name }}</h3>
+                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ drucker_item.model }}</p>
+                    </div>
+                    <div class="text-right">
+                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium 
+                                     {% if drucker_item.status == 'online' %}status-online{% else %}status-offline{% endif %}">
+                            {{ drucker_item.status_icon }} {{ drucker_item.status_text }}
+                        </span>
+                    </div>
+                </div>
+                
+                <!-- Drucker-Informationen -->
+                <div class="space-y-2 mb-4">
+                    <div class="flex justify-between text-sm">
+                        <span class="text-gray-600 dark:text-gray-400">Standort:</span>
+                        <span class="font-medium">{{ drucker_item.location }}</span>
+                    </div>
+                    {% if drucker_item.plug_ip %}
+                    <div class="flex justify-between text-sm">
+                        <span class="text-gray-600 dark:text-gray-400">Steckdose:</span>
+                        <span class="font-medium">{{ drucker_item.plug_ip }}</span>
+                    </div>
+                    {% endif %}
+                    <div class="flex justify-between text-sm">
+                        <span class="text-gray-600 dark:text-gray-400">Aktuelle Leistung:</span>
+                        <span class="font-medium">{{ drucker_item.current_power }} W</span>
+                    </div>
+                    <div class="flex justify-between text-sm">
+                        <span class="text-gray-600 dark:text-gray-400">Verbrauch heute:</span>
+                        <span class="font-medium">{{ drucker_item.daily_consumption }} kWh</span>
+                    </div>
+                </div>
+                
+                <!-- Steuerungs-Buttons -->
+                {% if benutzer_kann_steuern and drucker_item.kann_gesteuert_werden %}
+                <div class="flex flex-wrap gap-2">
+                    
+                    <!-- Toggle-Button (Ein/Aus) -->
+                    <form method="POST" action="{{ url_for('drucker.drucker_toggle', drucker_id=drucker_item.id) }}" style="display: inline;">
+                        <button type="submit" class="steuerung-button btn-toggle flex-1">
+                            {{ drucker_item.toggle_text }}
+                        </button>
+                    </form>
+                    
+                    <!-- Separate Ein/Aus-Buttons -->
+                    <div class="flex gap-2 w-full mt-2">
+                        <form method="POST" action="{{ url_for('drucker.drucker_einschalten', drucker_id=drucker_item.id) }}" class="flex-1">
+                            <button type="submit" class="steuerung-button btn-einschalten w-full text-sm"
+                                    {% if drucker_item.status == 'online' %}disabled{% endif %}>
+                                🟢 Ein
+                            </button>
+                        </form>
+                        
+                        <form method="POST" action="{{ url_for('drucker.drucker_ausschalten', drucker_id=drucker_item.id) }}" class="flex-1">
+                            <button type="submit" class="steuerung-button btn-ausschalten w-full text-sm"
+                                    {% if drucker_item.status == 'offline' %}disabled{% endif %}>
+                                🔴 Aus
+                            </button>
+                        </form>
+                    </div>
+                    
+                    <!-- Details-Link -->
+                    <a href="{{ url_for('drucker.drucker_details', drucker_id=drucker_item.id) }}" 
+                       class="text-blue-600 hover:text-blue-800 text-sm font-medium mt-2 block text-center">
+                        📊 Details anzeigen
+                    </a>
+                </div>
+                {% else %}
+                <div class="text-center py-4">
+                    {% if not drucker_item.kann_gesteuert_werden %}
+                        <p class="text-gray-500 text-sm">⚠️ Keine Steckdose konfiguriert</p>
+                    {% else %}
+                        <p class="text-gray-500 text-sm">🔒 Keine Berechtigung</p>
+                    {% endif %}
+                </div>
+                {% endif %}
+            </div>
+            {% endfor %}
+        </div>
+        {% else %}
+        <!-- Keine Drucker -->
+        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-12 text-center">
+            <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"/>
+            </svg>
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Keine Drucker gefunden</h3>
+            <p class="text-gray-600 dark:text-gray-400">Es sind noch keine Drucker im System registriert.</p>
+            {% if error %}
+            <div class="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                <p class="text-red-600 dark:text-red-400 text-sm">Fehler: {{ error }}</p>
+            </div>
+            {% endif %}
+        </div>
+        {% endif %}
+        
+        <!-- Energie-Übersicht -->
+        {% if stats and stats.gesamt_verbrauch %}
+        <div class="mt-8 bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
+            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">⚡ Energie-Übersicht</h3>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="text-center">
+                    <p class="text-2xl font-bold text-blue-600">{{ stats.gesamt_verbrauch }} kWh</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Gesamtverbrauch heute</p>
+                </div>
+                <div class="text-center">
+                    <p class="text-2xl font-bold text-green-600">{{ stats.aktuelle_leistung }} W</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Aktuelle Gesamtleistung</p>
+                </div>
+                <div class="text-center">
+                    <p class="text-2xl font-bold text-yellow-600">{{ stats.geschätzte_kosten }} €</p>
+                    <p class="text-sm text-gray-600 dark:text-gray-400">Geschätzte Kosten heute</p>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        
+        <!-- System-Info -->
+        <div class="mt-8 bg-gray-50 dark:bg-gray-900 rounded-xl p-6">
+            <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
+                <div class="flex items-center space-x-4">
+                    <span>🔌 Tapo-Integration: {{ "✅ Verfügbar" if tapo_verfügbar else "❌ Nicht verfügbar" }}</span>
+                    <span>📡 Backend-Kontrolle: ✅ Aktiv</span>
+                    <span>🚫 JavaScript: ❌ Deaktiviert</span>
+                </div>
+                <div class="text-right">
+                    <span>Zeitstempel: {{ timestamp }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- KEIN JavaScript - nur reines HTML/CSS/Flask! -->
+{% endblock %}