🔧 Update: Enhanced error handling and logging across various modules

**Änderungen:**
- ✅ app.py: Hinzugefügt, um CSRF-Fehler zu behandeln
- ✅ models.py: Fehlerprotokollierung bei der Suche nach Gastanfragen per OTP
- ✅ api.py: Fehlerprotokollierung beim Markieren von Benachrichtigungen als gelesen
- ✅ calendar.py: Fallback-Daten zurückgeben, wenn keine Kalenderereignisse vorhanden sind
- ✅ guest.py: Status-Check-Seite für Gäste aktualisiert
- ✅ hardware_integration.py: Debugging-Informationen für erweiterte Geräteinformationen hinzugefügt
- ✅ tapo_status_manager.py: Rückgabewert für Statusabfrage hinzugefügt

**Ergebnis:**
- Verbesserte Fehlerbehandlung und Protokollierung für eine robustere Anwendung
- Bessere Nachverfolgbarkeit von Fehlern und Systemverhalten

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>

backend/static/css/dark-light-unified.css

@@ -0,0 +1,482 @@
+/**
+ * Unified Dark/Light Mode System für MYP Platform
+ * ===============================================
+ * 
+ * Konsolidiert alle Theme-Inkonsistenzen in einer einheitlichen Implementierung
+ * Ersetzt: input.css, components.css, professional-theme.css Dark Mode-Teile
+ * 
+ * Author: Till Tomczak - MYP Team
+ * Zweck: Behebung aller UI Dark/Light Mode Inkonsistenzen
+ */
+
+/* ===== UNIFIED CSS VARIABLES SYSTEM ===== */
+:root {
+    /* === MERCEDES-BENZ BRAND COLORS === */
+    --mb-primary: #0073ce;
+    --mb-primary-dark: #005a9f;
+    --mb-primary-light: #1e88e5;
+    --mb-secondary: #00adef;
+    --mb-black: #000000;
+    --mb-white: #ffffff;
+    --mb-silver: #c4c4c4;
+    --mb-gray: #666666;
+    
+    /* === LIGHT MODE FOUNDATION === */
+    --bg-primary: #ffffff;
+    --bg-secondary: #fafbfc;
+    --bg-tertiary: #f8fafc;
+    --bg-card: #ffffff;
+    --bg-surface: #fefefe;
+    --bg-overlay: rgba(255, 255, 255, 0.95);
+    --bg-modal: rgba(255, 255, 255, 0.98);
+    
+    /* === TEXT COLORS LIGHT === */
+    --text-primary: #111827;
+    --text-secondary: #374151;
+    --text-tertiary: #6b7280;
+    --text-muted: #9ca3af;
+    --text-accent: var(--mb-primary);
+    --text-on-primary: var(--mb-white);
+    --text-success: #059669;
+    --text-warning: #d97706;
+    --text-error: #dc2626;
+    
+    /* === BORDER COLORS LIGHT === */
+    --border-primary: #e5e7eb;
+    --border-secondary: #d1d5db;
+    --border-focus: var(--mb-primary);
+    --border-error: #f87171;
+    --border-success: #34d399;
+    
+    /* === SHADOWS LIGHT === */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    
+    /* === GLASSMORPHISM LIGHT === */
+    --glass-bg: rgba(255, 255, 255, 0.8);
+    --glass-border: rgba(255, 255, 255, 0.2);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+    --glass-blur: blur(16px);
+    
+    /* === INTERACTIVE STATES LIGHT === */
+    --hover-bg: rgba(0, 115, 206, 0.04);
+    --active-bg: rgba(0, 115, 206, 0.08);
+    --focus-ring: 0 0 0 3px rgba(0, 115, 206, 0.1);
+    
+    /* === GRADIENTS LIGHT === */
+    --gradient-primary: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+    --gradient-card: linear-gradient(135deg, #ffffff 0%, #fcfcfd 100%);
+    --gradient-modal: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+    --gradient-button: linear-gradient(135deg, var(--mb-primary) 0%, var(--mb-primary-dark) 100%);
+}
+
+/* ===== DARK MODE OVERRIDES ===== */
+.dark {
+    /* === DARK MODE FOUNDATION === */
+    --bg-primary: #000000;
+    --bg-secondary: #0a0a0a;
+    --bg-tertiary: #1a1a1a;
+    --bg-card: #111111;
+    --bg-surface: #0d0d0d;
+    --bg-overlay: rgba(0, 0, 0, 0.95);
+    --bg-modal: rgba(17, 17, 17, 0.98);
+    
+    /* === TEXT COLORS DARK === */
+    --text-primary: #ffffff;
+    --text-secondary: #e2e8f0;
+    --text-tertiary: #cbd5e1;
+    --text-muted: #94a3b8;
+    --text-accent: var(--mb-white);
+    --text-on-primary: var(--mb-black);
+    --text-success: #10b981;
+    --text-warning: #f59e0b;
+    --text-error: #ef4444;
+    
+    /* === BORDER COLORS DARK === */
+    --border-primary: #1f2937;
+    --border-secondary: #374151;
+    --border-focus: var(--mb-white);
+    --border-error: #ef4444;
+    --border-success: #10b981;
+    
+    /* === SHADOWS DARK === */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
+    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
+    
+    /* === GLASSMORPHISM DARK === */
+    --glass-bg: rgba(17, 17, 17, 0.8);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    --glass-blur: blur(16px);
+    
+    /* === INTERACTIVE STATES DARK === */
+    --hover-bg: rgba(255, 255, 255, 0.04);
+    --active-bg: rgba(255, 255, 255, 0.08);
+    --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.1);
+    
+    /* === GRADIENTS DARK === */
+    --gradient-primary: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
+    --gradient-card: linear-gradient(135deg, #111111 0%, #0d0d0d 100%);
+    --gradient-modal: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
+    --gradient-button: linear-gradient(135deg, var(--mb-white) 0%, #f0f0f0 100%);
+}
+
+/* ===== UNIFIED COMPONENT STYLES ===== */
+
+/* === BUTTONS === */
+.btn {
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border-primary);
+    box-shadow: var(--shadow-sm);
+}
+
+.btn:hover {
+    background: var(--hover-bg);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+
+.btn:focus {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+.btn-primary {
+    background: var(--gradient-button);
+    color: var(--text-on-primary);
+    border: none;
+}
+
+.btn-primary:hover {
+    background: var(--mb-primary-dark);
+    transform: translateY(-1px);
+}
+
+.dark .btn-primary {
+    background: var(--gradient-button);
+    color: var(--text-on-primary);
+}
+
+.dark .btn-primary:hover {
+    background: #f0f0f0;
+}
+
+/* === CARDS === */
+.card {
+    background: var(--gradient-card);
+    border: 1px solid var(--border-primary);
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+    backdrop-filter: var(--glass-blur);
+    transition: all 0.3s ease;
+}
+
+.card:hover {
+    box-shadow: var(--shadow-xl);
+    transform: translateY(-2px);
+}
+
+.glass-card {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 16px;
+    box-shadow: var(--glass-shadow);
+    backdrop-filter: var(--glass-blur);
+}
+
+/* === MODALS === */
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px);
+    z-index: 50;
+}
+
+.dark .modal-overlay {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.modal {
+    background: var(--gradient-modal);
+    border: 1px solid var(--border-primary);
+    border-radius: 20px;
+    box-shadow: var(--shadow-modal);
+    backdrop-filter: var(--glass-blur);
+}
+
+.modal-header {
+    border-bottom: 1px solid var(--border-primary);
+    color: var(--text-primary);
+}
+
+.modal-body {
+    color: var(--text-secondary);
+}
+
+/* === FORM ELEMENTS === */
+.form-input {
+    @apply w-full px-4 py-3 rounded-lg transition-all duration-200;
+    background: var(--bg-card);
+    border: 1px solid var(--border-primary);
+    color: var(--text-primary);
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--border-focus);
+    box-shadow: var(--focus-ring);
+}
+
+.form-input::placeholder {
+    color: var(--text-muted);
+}
+
+.form-label {
+    @apply block text-sm font-medium mb-2;
+    color: var(--text-secondary);
+}
+
+/* === NAVIGATION === */
+.nav-item {
+    @apply px-4 py-2 rounded-lg transition-all duration-200;
+    color: var(--text-secondary);
+}
+
+.nav-item:hover {
+    background: var(--hover-bg);
+    color: var(--text-primary);
+}
+
+.nav-item.active {
+    background: var(--active-bg);
+    color: var(--text-accent);
+}
+
+/* === ALERTS === */
+.alert {
+    @apply p-4 rounded-lg border;
+    background: var(--bg-card);
+    border-color: var(--border-primary);
+}
+
+.alert-info {
+    background: rgba(0, 115, 206, 0.1);
+    border-color: var(--mb-primary);
+    color: var(--mb-primary);
+}
+
+.dark .alert-info {
+    background: rgba(0, 115, 206, 0.2);
+    color: var(--mb-white);
+}
+
+.alert-success {
+    background: rgba(5, 150, 105, 0.1);
+    border-color: var(--text-success);
+    color: var(--text-success);
+}
+
+.alert-warning {
+    background: rgba(217, 119, 6, 0.1);
+    border-color: var(--text-warning);
+    color: var(--text-warning);
+}
+
+.alert-error {
+    background: rgba(220, 38, 38, 0.1);
+    border-color: var(--text-error);
+    color: var(--text-error);
+}
+
+/* === TABLES === */
+.table {
+    @apply w-full border-collapse;
+}
+
+.table th {
+    @apply px-6 py-4 text-left text-sm font-medium uppercase tracking-wider;
+    background: var(--bg-tertiary);
+    color: var(--text-tertiary);
+    border-bottom: 1px solid var(--border-primary);
+}
+
+.table td {
+    @apply px-6 py-4 text-sm;
+    color: var(--text-secondary);
+    border-bottom: 1px solid var(--border-primary);
+}
+
+.table tbody tr:hover {
+    background: var(--hover-bg);
+}
+
+/* === TOOLTIPS === */
+.tooltip {
+    @apply absolute z-50 px-3 py-2 text-sm rounded-lg shadow-lg;
+    background: var(--bg-modal);
+    color: var(--text-primary);
+    border: 1px solid var(--border-primary);
+    backdrop-filter: var(--glass-blur);
+}
+
+/* === BADGES & STATUS === */
+.badge {
+    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+}
+
+.badge-primary {
+    background: var(--mb-primary);
+    color: var(--mb-white);
+}
+
+.badge-success {
+    background: var(--text-success);
+    color: var(--mb-white);
+}
+
+.badge-warning {
+    background: var(--text-warning);
+    color: var(--mb-white);
+}
+
+.badge-error {
+    background: var(--text-error);
+    color: var(--mb-white);
+}
+
+/* === LOADING STATES === */
+.loading {
+    @apply animate-pulse;
+    background: var(--bg-tertiary);
+}
+
+.spinner {
+    @apply animate-spin rounded-full;
+    border: 2px solid var(--border-primary);
+    border-top-color: var(--text-accent);
+}
+
+/* === RESPONSIVE UTILITIES === */
+@media (max-width: 768px) {
+    .modal {
+        margin: 1rem;
+        max-width: calc(100% - 2rem);
+    }
+    
+    .card {
+        border-radius: 12px;
+    }
+    
+    .btn {
+        @apply px-3 py-2 text-xs;
+    }
+}
+
+/* === ACCESSIBILITY IMPROVEMENTS === */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* === HIGH CONTRAST MODE === */
+@media (prefers-contrast: high) {
+    :root {
+        --border-primary: #000000;
+        --text-primary: #000000;
+    }
+    
+    .dark {
+        --border-primary: #ffffff;
+        --text-primary: #ffffff;
+    }
+}
+
+/* === PRINT STYLES === */
+@media print {
+    .modal-overlay,
+    .tooltip,
+    .btn {
+        display: none !important;
+    }
+    
+    .card {
+        box-shadow: none;
+        border: 1px solid #000000;
+    }
+}
+
+/* === LEGACY COMPATIBILITY === */
+.mercedes-modal {
+    @extend .modal;
+}
+
+.glass-modal {
+    @extend .modal;
+    @extend .glass-card;
+}
+
+.mb-dashboard-card {
+    @extend .card;
+}
+
+.btn-professional {
+    @extend .btn-primary;
+}
+
+.input-professional {
+    @extend .form-input;
+}
+
+/* === CSS CUSTOM PROPERTIES FALLBACKS === */
+.no-css-vars .btn-primary {
+    background: #0073ce;
+    color: #ffffff;
+}
+
+.no-css-vars .dark .btn-primary {
+    background: #ffffff;
+    color: #000000;
+}
+
+/* === THEME TRANSITION === */
+* {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 200ms;
+}
+
+/* === UTILITY CLASSES === */
+.theme-transition {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.focus-visible:focus {
+    outline: 2px solid var(--border-focus);
+    outline-offset: 2px;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}