<!--
/**
 * ============================================
 * PANTRY SCAN - Frontend
 * ============================================
 * Version: 1.0.1 (wird aus DB geladen - settings.app_version)
 * Datum: 2025-01-06
 * 
 * ÄNDERUNGSHISTORIE:
 * -----------------------------------------
 * v1.0.1 (2025-01-06) - RELEASE
 * - Versionsverwaltung aus DB (API: /api.php?action=version)
 * - FIX: Auto-Sync Anzeige vereinfacht (nur "Letzter Auto-Sync")
 * - FIX: "Letzte Synchronisation" Feld entfernt
 * - FIX: Bessere Fehlermeldungen bei Rezeptgenerierung
 * - NEU: "Keine passenden Rezepte" Ansicht mit Tipps
 * - Entfernt: Auto-Sync Toast-Meldungen
 *
 * v1.9.8 (2025-01-06)
 * - FIX: Absicherung gegen undefined recipe in showRecipeResult
 * - FIX: Absicherung gegen leere/ungültige Rezept-Arrays
 * - FIX: Bessere Fehlerbehandlung bei Rezeptgenerierung
 * - FIX: "Kochen starten" speichert Rezept automatisch wenn keine ID vorhanden
 * - FIX: Doppelter Zurück-Pfeil in Rezept-Auswahl entfernt
 * - FIX: "Andere Vorschläge generieren" Button repariert
 * - NEU: Laden-Info (stores) im Ingredient Picker Compact View
 * - NEU: + Buttons im Ingredient Picker klein und rund
 *
 * v1.9.7 (2025-01-06)
 * - NEU: 3 Rezeptvorschläge zur Auswahl statt nur einem
 * - NEU: "Nur vorhandene Zutaten" wird strikt eingehalten
 * - NEU: Hinweis wenn kein Rezept mit vorhandenen Zutaten möglich
 * - NEU: "Andere Vorschläge" Button im Rezept-Detail
 *
 * v1.9.6 (2025-01-06)
 * - FIX: Tab-Counter und Dashboard-Stats korrekt verknüpft
 * - FIX: Entfernte dash-total-qty Referenz (existiert nicht mehr)
 *
 * v1.9.5 (2025-01-06)
 * - NEU: Kompakt-View Popup für Produktvorschläge im Ingredient Picker
 * - Klick auf Artikel = Kompakt-Ansicht, Klick auf + = direkt hinzufügen
 *
 * v1.9.4 (2025-01-06)
 * - FIX: Artikel-Detail-Ansicht ohne oberen Streifen, Foto bündig
 * - FIX: X-Button statt Zurück-Pfeil im Detail-Modal
 * - FIX: Rezept-Button im Footer jetzt blau statt orange
 * - NEU: Dashboard zeigt "Im Bestand" + "Favoriten" (Rezepte)
 * - NEU: Letzte 3 Rezepte als Schnelllinks auf Dashboard
 *
 * v1.9.3 (2025-01-06)
 * - NEU: Favorisierte Läden in Einstellungen (Rewe, Lidl, Aldi, Edeka, Penny, Netto)
 * - NEU: Läden-Filter beim Ingredient Picker für Produktvorschläge
 * - NEU: "Einbuchen"-Button in Einkaufsliste für manuelle Artikel
 *
 * v1.9.2 (2025-01-06)
 * - NEU: Intelligenter Ingredient Picker mit Produktvorschlägen
 * - NEU: Suche in lokalen Produkten und OpenFoodFacts
 * - NEU: Manuelles Anlegen direkt aus dem Rezept
 * - VERBESSERUNG: KI-Prompt strikt bei Einzelzutaten (keine "Gemüse nach Wahl")
 *
 * v1.9.1 (2025-01-06)
 * - NEU: Einzelne fehlende Zutaten per Checkbox auswählen
 * - NEU: "Alle auswählen" Toggle für fehlende Zutaten
 * - VERBESSERUNG: KI-Prompt fordert einzelne Zutaten (keine "Gemüse nach Wahl")
 *
 * v1.9.0 (2025-01-06)
 * - FIX: Heringsfilets & andere OpenFoodFacts-Produkte werden nicht mehr gefiltert
 * - FIX: Keyword-Filter nur für manuelle Produkte (ohne api_source)
 * - FIX: Non-Food Toggle nur für manuelle Produkte
 * - FIX: Fehlende Zutaten hinzufügen - vereinfachte API ohne optionale Spalten
 * - VERBESSERUNG: Besseres Debugging bei API-Fehlern
 *
 * v1.8.9 (2025-01-06)
 * - FIX: Fehlende Zutaten zur Einkaufsliste hinzufügen (robustere API mit Fallbacks)
 * - NEU: Wasser-Hinweis (Leitungswasser möglich) bei Rezept-Zutaten
 *
 * v1.8.8 (2025-01-06)
 * - FIX: Auto-Sync erkennt ungültige Timestamps (Zukunft) und resettet diese
 * - FIX: Non-Food Toggle jetzt für ALLE Produkte verfügbar (nicht nur manuelle)
 * - FIX: Heringsfilets & andere openfoodfacts-Produkte werden nicht mehr fälschlich gefiltert
 * - FIX: Bessere OpenAI Quota-Fehlermeldung
 *
 * v1.8.7 (2025-01-06)
 * - FIX: Auto-Sync Anzeige zeigt jetzt korrekt "Letzte Sync" + "Nächste Sync"
 * - FIX: PIN-Eingabefeld responsive auf Mobile (nicht mehr zu breit)
 * - FIX: Fehlende Zutaten zur Einkaufsliste hinzufügen (bessere Fehlerbehandlung)
 * - NEU: Bestehende Produkte können als "Kein Lebensmittel" markiert werden
 * - NEU: API-Quelle wird bei Produkterstellung gespeichert
 *
 * v1.8.6 (2025-01-06)
 * - NEU: "Kein Lebensmittel" Checkbox bei manueller Produktanlage
 * - is_food Feld in DB und API
 * - Rezept-Filterung nutzt is_food Flag
 *
 * v1.8.5 (2025-01-06)
 * - Fix: Auto-Sync Zeitanzeige (Timestamp-Validierung)
 * - Verbesserter KI-Prompt für realistische Rezepte
 * - Erweiterte Nicht-Lebensmittel-Filterung (>50 Keywords)
 *
 * v1.8.4 (2025-01-06)
 * - Rezept-UI überarbeitet: Optionen immer sichtbar, Zutaten-Picker ausklappbar
 * - Navigation-Stack für Zurück-Button in allen Rezept-Ansichten
 * - Schnellauswahl wählt nur Zutaten aus (generiert nicht direkt)
 *
 * v1.8.3 (2025-01-06)
 * - Fix: Rezept-Generierung mit korrektem Emergent Proxy-Endpunkt
 * - Nicht-Lebensmittel werden aus Rezeptzutaten gefiltert
 * - Verbrauchte Zutaten können nach dem Kochen entfernt werden
 * - Slide-Up-Effekt für Produkt-Detail-Ansicht auf Mobile
 *
 * v1.8.2 (2025-01-06)
 * - Einstellungen-Button in Header verschoben (neben Logout)
 * - OpenAI API Key Einstellungsbereich hinzugefügt
 * - Schnellstart-Rezepte: Bald ablaufend / Abgelaufen / Alle
 *
 * v1.8.1 (2025-01-06)
 * - Design: Elegantes Bottom-Sheet statt dunklem Overlay
 * - Portionen 1-12 statt 2-12
 * - Bug-Fix: Produkte werden jetzt korrekt geladen
 *
 * v1.8.0 (2025-01-06)
 * - NEU: KI-Rezeptideen mit ChatGPT/OpenAI
 * - NEU: Interaktiver Kochmodus mit Schritt-für-Schritt Fortschritt
 * - NEU: Rezept-Favoriten und Verlauf
 * - NEU: Fehlende Zutaten zur Einkaufsliste hinzufügen
 * - Tab-Farben: Im Bestand grün, Einstellungen grau, Einkaufsliste blau
 *
 * v1.7.9 (2025-01-06)
 * - Tab-Farben: Einkaufsliste blau, Einstellungen türkis
 * - Kamera startet immer mit Rückkamera (Tablet-Frontkamera-Feature entfernt)
 *
 * v1.7.8 (2025-01-06)
 *   - FIX: Auto-Sync setzt lastAutoSyncTime beim Aktivieren
 *   - FIX: Verbleibende Minuten werden korrekt angezeigt
 *   - FIX: Kein sofortiger Sync mehr beim Aktivieren
 * 
 * v1.7.7 (2025-01-06)
 *   - Tablet-Erkennung für Frontkamera
 *   - Verbesserter Barcode-Scanner
 * ============================================
 */
-->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Pantry Scan v1.0.1</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
    
    <style>
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html, body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); 
            margin: 0;
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
        }
        #app {
            background: #f1f5f9;
            min-height: 100vh;
        }
        .hidden { display: none !important; }
        #qr-reader video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
        #qr-reader__dashboard { display: none !important; }
        #qr-reader__scan_region { border: none !important; }
        #qr-reader__scan_region > img { display: none !important; }
        #qr-reader canvas { display: none !important; }
        .scanner-frame {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 300px; height: 150px; border: 3px solid rgba(255,255,255,0.8);
            border-radius: 1rem; box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
            pointer-events: none;
        }
        .scanner-frame::before, .scanner-frame::after {
            content: ''; position: absolute; width: 30px; height: 30px; border: 3px solid #818cf8;
        }
        .scanner-frame::before { top: -3px; left: -3px; border-right: none; border-bottom: none; border-radius: 0.5rem 0 0 0; }
        .scanner-frame::after { bottom: -3px; right: -3px; border-left: none; border-top: none; border-radius: 0 0 0.5rem 0; }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
        @keyframes scan-ring { 
            0% { transform: scale(1); opacity: 0.7; }
            100% { transform: scale(1.4); opacity: 0; }
        }
        .animate-spin { animation: spin 1s linear infinite; }
        .animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }
        
        .scan-button-container {
            position: relative;
        }
        .scan-button-ring {
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            border: 2px solid rgba(20, 184, 166, 0.5);
            animation: scan-ring 2s ease-out infinite;
        }
        .scan-button-ring-2 {
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            border: 2px solid rgba(20, 184, 166, 0.3);
            animation: scan-ring 2s ease-out infinite 1s;
        }
        
        /* Header & Footer Styling */
        .app-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 40;
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            color: white;
            padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
            padding-bottom: 12px;
        }
        .main-content {
            padding-top: 170px !important;
        }
        
        /* Detail Modal - 2 Spalten für Desktop/Tablet Landscape */
        .desktop-only-block { display: none; }
        .desktop-only-flex { display: none; }
        
        @media (min-width: 768px) {
            .desktop-only-block { display: block; }
            .desktop-only-flex { display: flex; }
            .mobile-only { display: none !important; }
            
            .detail-two-column {
                display: grid;
                grid-template-columns: 300px 1fr;
                gap: 1.5rem;
                align-items: start;
            }
            .detail-two-column .detail-left {
                position: sticky;
                top: 1rem;
            }
        }
        
        .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: linear-gradient(to top, #ffffff 0%, #f8fafc 100%);
            border-top: 1px solid #e2e8f0;
            padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
        }
        .modal-backdrop { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(8px); }
        
        /* Tab Pills */
        .tab-pill {
            display: flex; align-items: center; justify-content: center;
            padding: 0.5rem 0.75rem; border-radius: 9999px;
            font-weight: 600; font-size: 0.75rem;
            transition: all 0.2s ease;
            gap: 0.25rem;
        }
        .tab-pill.active { background: white; color: #4f46e5; box-shadow: 0 2px 8px rgba(79,70,229,0.25); }
        .tab-pill:not(.active) { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); }
        
        /* Akzent-Tabs - dezent mit kräftigen Icons */
        /* Einkaufsliste - Blau */
        .tab-pill-accent-blue:not(.active) { 
            background: rgba(219, 234, 254, 0.9); 
            color: #1d4ed8;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        .tab-pill-accent-blue.active { 
            background: #eff6ff; 
            color: #1d4ed8; 
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
            border: 1px solid #3b82f6;
        }
        /* Einstellungen - Grau */
        .tab-pill-accent-gray:not(.active) { 
            background: rgba(241, 245, 249, 0.9); 
            color: #475569;
            border: 1px solid rgba(100, 116, 139, 0.3);
        }
        .tab-pill-accent-gray.active { 
            background: #f8fafc; 
            color: #334155; 
            box-shadow: 0 2px 8px rgba(100, 116, 139, 0.2);
            border: 1px solid #94a3b8;
        }
        /* Im Bestand - Grün */
        .tab-pill-accent-green:not(.active) { 
            background: rgba(220, 252, 231, 0.9); 
            color: #166534;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }
        .tab-pill-accent-green.active { 
            background: #f0fdf4; 
            color: #166534; 
            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
            border: 1px solid #22c55e;
        }
        
        /* Rezept-Feature Styles */
        .recipe-card {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .recipe-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
        }
        .recipe-step {
            padding: 1rem;
            border-radius: 0.75rem;
            background: #f8fafc;
            margin-bottom: 0.5rem;
            transition: all 0.3s;
            border: 1px solid #e2e8f0;
        }
        .recipe-step.completed {
            background: #f0fdf4;
            border-color: #bbf7d0;
            border-left: 4px solid #22c55e;
        }
        .recipe-step.active {
            background: #fffbeb;
            border-color: #fde68a;
            border-left: 4px solid #f59e0b;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
        }
        .cooking-progress {
            height: 6px;
            background: #e2e8f0;
            border-radius: 3px;
            overflow: hidden;
        }
        .cooking-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #22c55e, #16a34a);
            transition: width 0.5s ease;
        }
        .ingredient-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .ingredient-available {
            background: #dcfce7;
            color: #166534;
        }
        .ingredient-missing {
            background: #fee2e2;
            color: #991b1b;
        }
        @keyframes slide-up {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        .animate-slide-up {
            animation: slide-up 0.3s ease-out;
        }
        /* Detail Modal Animation auf Mobile */
        @media (max-width: 767px) {
            .detail-modal-content {
                animation: slide-up 0.3s ease-out;
                border-top-left-radius: 1.5rem;
                border-top-right-radius: 1.5rem;
            }
        }
        
        /* Dezente Sync-Fortschrittsleiste unten */
        .sync-toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(30, 41, 59, 0.9);
            backdrop-filter: blur(8px);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transition: opacity 0.3s, transform 0.3s;
        }
        .sync-toast.hidden {
            opacity: 0;
            transform: translateX(-50%) translateY(20px);
            pointer-events: none;
        }
        
        /* Responsive Grid - Smartphone Portrait = 2 Spalten */
        .product-grid { 
            display: grid; 
            gap: 0.75rem; 
            grid-template-columns: repeat(2, 1fr) !important; 
        }
        .product-grid.list-view { 
            grid-template-columns: 1fr !important; 
        }
        @media (min-width: 640px) { 
            .product-grid:not(.list-view) { grid-template-columns: repeat(3, 1fr) !important; } 
        }
        @media (min-width: 1024px) { 
            .product-grid:not(.list-view) { grid-template-columns: repeat(4, 1fr) !important; } 
        }
        @media (min-width: 1280px) { 
            .product-grid:not(.list-view) { grid-template-columns: repeat(5, 1fr) !important; } 
        }
        @media (orientation: landscape) and (min-width: 640px) { 
            .product-grid:not(.list-view) { grid-template-columns: repeat(3, 1fr) !important; } 
        }
        @media (orientation: landscape) and (min-width: 900px) { 
            .product-grid:not(.list-view) { grid-template-columns: repeat(4, 1fr) !important; } 
        }
        @media (orientation: landscape) and (min-width: 1200px) { 
            .product-grid:not(.list-view) { grid-template-columns: repeat(5, 1fr) !important; } 
        }
        
        /* List View Styles */
        .list-view .product-card { flex-direction: row !important; padding: 0.75rem !important; }
        .list-view .product-card-image { width: 56px !important; height: 56px !important; min-width: 56px; border-radius: 0.75rem; }
        .list-view .product-card-content { padding: 0 0 0 0.75rem !important; flex: 1; }
        .list-view .product-card-actions { display: flex !important; }
        
        /* Dashboard Cards */
        .dash-card {
            background: white; border-radius: 1rem; padding: 1rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            cursor: pointer; transition: all 0.2s ease;
            border: 1px solid #e2e8f0;
        }
        .dash-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .dash-card.warning { border-left: 4px solid #f59e0b; }
        .dash-card.danger { border-left: 4px solid #ef4444; }
        .dash-card.success { border-left: 4px solid #10b981; }
        .dash-card.info { border-left: 4px solid #6366f1; }
    </style>
</head>
<body>
    <div id="app" class="min-h-screen bg-slate-50">
        
        <!-- PIN -->
        <div id="pin-overlay" class="fixed inset-0 z-[60] bg-gradient-to-br from-blue-600 via-indigo-600 to-indigo-700 flex flex-col items-center justify-center p-6">
            <div class="w-20 h-20 rounded-full bg-white/20 backdrop-blur flex items-center justify-center mb-8">
                <i data-lucide="lock" class="w-10 h-10 text-white"></i>
            </div>
            <h1 class="text-2xl font-bold text-white mb-2">Pantry Scan</h1>
            <p class="text-white/70 mb-8">Gib deine PIN ein</p>
            <form id="pin-form" class="flex flex-col items-center gap-4">
                <input type="password" id="pin-input" maxlength="10" inputmode="numeric" class="w-48 text-center text-2xl bg-white/20 backdrop-blur border-2 border-white/30 text-white py-3 px-4 rounded-xl focus:border-white focus:outline-none placeholder-white/50" placeholder="••••" required>
                <p id="pin-error" class="text-red-300 text-sm hidden">Falsche PIN</p>
                <button type="submit" class="w-48 py-3 bg-white text-indigo-600 rounded-xl font-semibold shadow-lg hover:bg-white/90">Anmelden</button>
            </form>
        </div>
        
        <!-- Main -->
        <div id="main-app" class="hidden">
            <header class="app-header px-4" id="main-header">
                <div class="max-w-5xl mx-auto">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center">
                                <i data-lucide="package" class="w-5 h-5 text-white"></i>
                            </div>
                            <div class="flex flex-col">
                                <h1 class="text-base font-bold text-white leading-tight m-0 p-0">Pantry Scan</h1>
                                <span class="text-[10px] text-white/50 leading-tight m-0 p-0 -mt-0.5">v1.0.1</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <!-- View Toggle (nur sichtbar in Produkt-Tabs) -->
                            <button id="view-toggle" onclick="toggleViewMode()" class="hidden w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30">
                                <i data-lucide="layout-grid" class="w-4 h-4" id="view-icon-grid"></i>
                                <i data-lucide="list" class="w-4 h-4 hidden" id="view-icon-list"></i>
                            </button>
                            <!-- Settings -->
                            <button onclick="setActiveTab('settings')" id="header-settings-btn" class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30" title="Einstellungen">
                                <i data-lucide="settings" class="w-4 h-4"></i>
                            </button>
                            <!-- Logout -->
                            <button onclick="logout()" class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30" title="Abmelden">
                                <i data-lucide="log-out" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Compact Tab Pills -->
                    <div class="flex gap-2 justify-center">
                        <button id="tab-dashboard" onclick="setActiveTab('dashboard')" class="tab-pill active">
                            <i data-lucide="layout-dashboard" class="w-4 h-4"></i>
                        </button>
                        <button id="tab-instock" onclick="setActiveTab('instock')" class="tab-pill tab-pill-accent-green">
                            <i data-lucide="archive" class="w-4 h-4"></i>
                            <span id="tab-instock-count" class="text-[10px] font-bold">0</span>
                        </button>
                        <button id="tab-all" onclick="setActiveTab('all')" class="tab-pill">
                            <i data-lucide="database" class="w-4 h-4"></i>
                            <span id="tab-all-count" class="text-[10px] font-bold">0</span>
                        </button>
                        <button id="tab-shopping" onclick="setActiveTab('shopping')" class="tab-pill tab-pill-accent-blue">
                            <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                            <span id="tab-shopping-count" class="text-[10px] font-bold">0</span>
                        </button>
                    </div>
                </div>
            </header>
            
            <main class="main-content px-4 pb-28">
                <!-- Dashboard -->
                <div id="dashboard-view" class="max-w-5xl mx-auto">
                    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                        <div class="dash-card warning" onclick="showFilteredList('expiring')">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
                                    <i data-lucide="alert-triangle" class="w-4 h-4 text-amber-600"></i>
                                </div>
                            </div>
                            <p id="dash-expiring" class="text-2xl font-bold text-slate-900">0</p>
                            <p class="text-xs text-slate-500">Bald ablaufend</p>
                        </div>
                        
                        <div class="dash-card danger" onclick="showFilteredList('expired')">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center">
                                    <i data-lucide="x-circle" class="w-4 h-4 text-red-600"></i>
                                </div>
                            </div>
                            <p id="dash-expired" class="text-2xl font-bold text-slate-900">0</p>
                            <p class="text-xs text-slate-500">Abgelaufen</p>
                        </div>
                        
                        <div class="dash-card success" onclick="setActiveTab('instock')">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                                    <i data-lucide="package" class="w-4 h-4 text-emerald-600"></i>
                                </div>
                            </div>
                            <p id="dash-instock" class="text-2xl font-bold text-slate-900">0</p>
                            <p class="text-xs text-slate-500">Im Bestand</p>
                        </div>
                        
                        <div class="dash-card info" onclick="setActiveTab('shopping')">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
                                    <i data-lucide="shopping-cart" class="w-4 h-4 text-indigo-600"></i>
                                </div>
                            </div>
                            <p id="dash-shopping" class="text-2xl font-bold text-slate-900">0</p>
                            <p class="text-xs text-slate-500">Einkaufsliste</p>
                        </div>
                    </div>
                    
                    <!-- Quick Stats -->
                    <div class="mt-4 bg-white rounded-2xl p-4 border border-slate-200">
                        <div class="flex items-center justify-between">
                            <div class="text-center flex-1">
                                <p id="dash-total-items" class="text-xl font-bold text-slate-900">0</p>
                                <p class="text-[10px] text-slate-500 uppercase tracking-wide">Im Bestand</p>
                            </div>
                            <div class="w-px h-8 bg-slate-200"></div>
                            <div class="text-center flex-1 cursor-pointer" onclick="openRecipeGenerator(); showRecipeView('favorites');">
                                <p id="dash-recipe-favorites" class="text-xl font-bold text-slate-900">0</p>
                                <p class="text-[10px] text-slate-500 uppercase tracking-wide">Favoriten</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Letzte Rezepte Schnelllinks -->
                    <div id="recent-recipes-section" class="hidden mt-4">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-sm font-semibold text-slate-700">Letzte Rezepte</h3>
                            <button onclick="openRecipeGenerator()" class="text-xs text-blue-600 hover:text-blue-700">Alle anzeigen →</button>
                        </div>
                        <div id="recent-recipes-list" class="space-y-2"></div>
                    </div>
                </div>
                
                <!-- Product Grid View -->
                <div id="products-view" class="hidden max-w-5xl mx-auto">
                    <!-- Such- und Sortierleiste -->
                    <div class="mb-4 space-y-3">
                        <!-- Suchfeld -->
                        <div class="relative">
                            <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
                            <input type="text" id="product-search" oninput="filterProducts()" placeholder="Suche nach Name, Marke, Kategorie..." class="w-full pl-10 pr-10 py-3 bg-white border border-slate-200 rounded-xl text-sm">
                            <button onclick="clearSearch()" id="clear-search-btn" class="hidden absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center text-slate-500">
                                <i data-lucide="x" class="w-4 h-4"></i>
                            </button>
                        </div>
                        
                        <!-- Filter & Sortierung -->
                        <div class="flex gap-2">
                            <select id="product-sort" onchange="filterProducts()" class="flex-1 px-3 py-2 bg-white border border-slate-200 rounded-xl text-sm text-slate-600">
                                <option value="name-asc">Name (A-Z)</option>
                                <option value="name-desc">Name (Z-A)</option>
                                <option value="expiry-asc">MHD (bald ablaufend)</option>
                                <option value="quantity-desc">Menge (viel zuerst)</option>
                                <option value="quantity-asc">Menge (wenig zuerst)</option>
                            </select>
                            <select id="product-filter" onchange="filterProducts()" class="px-3 py-2 bg-white border border-slate-200 rounded-xl text-sm text-slate-600">
                                <option value="">Alle</option>
                                <optgroup label="Ernährung">
                                    <option value="vegan">🌱 Vegan</option>
                                    <option value="vegetarian">🥬 Vegetarisch</option>
                                    <option value="palm-oil-free">🌴 Palmölfrei</option>
                                </optgroup>
                                <optgroup label="Ohne Allergene">
                                    <option value="no-gluten">🌾 Glutenfrei</option>
                                    <option value="no-milk">🥛 Laktosefrei</option>
                                    <option value="no-eggs">🥚 Ohne Ei</option>
                                    <option value="no-nuts">🥜 Nussfrei</option>
                                    <option value="no-soy">🫘 Sojafrei</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    
                    <div id="products-grid" class="product-grid"></div>
                    
                    <div id="empty-state" class="hidden flex flex-col items-center justify-center py-16">
                        <div class="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center mb-4">
                            <i data-lucide="package" class="w-8 h-8 text-slate-400" id="empty-icon"></i>
                        </div>
                        <h3 id="empty-title" class="text-base font-semibold text-slate-900 mb-1">Keine Produkte</h3>
                        <p id="empty-text" class="text-slate-500 text-sm text-center">Scanne einen Barcode</p>
                    </div>
                </div>
                
                <!-- Shopping List View -->
                <div id="shopping-view" class="hidden max-w-5xl mx-auto">
                    <div class="flex items-center justify-between gap-2 mb-4">
                        <select id="shopping-sort" onchange="loadShoppingList()" class="flex-1 px-3 py-2 bg-white border border-slate-200 rounded-xl text-sm text-slate-600">
                            <option value="date">Nach Datum</option>
                            <option value="priority">Nach Priorität</option>
                            <option value="name">Nach Name</option>
                        </select>
                        <label class="flex items-center gap-2 px-3 py-2 bg-white border border-slate-200 rounded-xl text-sm text-slate-600 cursor-pointer">
                            <input type="checkbox" id="show-completed" onchange="loadShoppingList()" class="w-4 h-4 rounded border-slate-300 text-indigo-600">
                            <span>Erledigte</span>
                        </label>
                    </div>
                    <div id="shopping-list" class="space-y-2"></div>
                </div>
                
                <!-- Filtered List View -->
                <div id="filtered-view" class="hidden max-w-5xl mx-auto">
                    <div class="flex items-center justify-between mb-4">
                        <h2 id="filtered-title" class="text-lg font-bold text-slate-900">Liste</h2>
                        <button onclick="setActiveTab('dashboard')" class="text-sm text-indigo-600 font-medium">← Zurück</button>
                    </div>
                    <div id="filtered-list" class="space-y-2"></div>
                </div>
                
                <!-- Settings View -->
                <div id="settings-view" class="hidden max-w-5xl mx-auto">
                    <h2 class="text-lg font-bold text-slate-900 mb-4">Einstellungen</h2>
                    
                    <!-- Sync Section -->
                    <div class="bg-white rounded-2xl p-4 border border-slate-200 mb-4">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
                                <i data-lucide="refresh-cw" class="w-5 h-5 text-blue-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Daten-Synchronisation</h3>
                                <p class="text-xs text-slate-500">Produktdaten von externen APIs laden</p>
                            </div>
                        </div>
                        
                        <!-- Sync Status - nur Veraltete und Synchronisierte Produkte -->
                        <div id="sync-status" class="bg-slate-50 rounded-xl p-3 mb-4">
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-slate-600">Veraltete Produkte:</span>
                                <span id="sync-outdated-count" class="font-medium text-amber-600">-</span>
                            </div>
                            <div class="flex justify-between items-center text-sm mt-2">
                                <span class="text-slate-600">Synchronisiert:</span>
                                <span id="sync-total-count" class="font-medium text-green-600">-</span>
                            </div>
                        </div>
                        
                        <!-- Progress Bar (hidden by default) -->
                        <div id="sync-progress-container" class="hidden mb-4">
                            <div class="flex justify-between items-center text-sm mb-2">
                                <span class="text-slate-600 font-medium">Synchronisiere...</span>
                                <span id="sync-progress-text" class="text-blue-600 font-bold">0 / 0</span>
                            </div>
                            <div class="w-full bg-slate-200 rounded-full h-3 overflow-hidden">
                                <div id="sync-progress-bar" class="bg-gradient-to-r from-blue-500 to-indigo-600 h-3 rounded-full transition-all duration-300" style="width: 0%"></div>
                            </div>
                            <p id="sync-current-product" class="text-xs text-slate-500 mt-2 truncate"></p>
                        </div>
                        
                        <!-- Manual Sync Button -->
                        <button id="manual-sync-btn" onclick="triggerManualSync()" class="w-full py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-xl font-semibold flex items-center justify-center gap-2 shadow-md mb-3" data-testid="manual-sync-btn">
                            <i data-lucide="download-cloud" class="w-5 h-5" id="sync-icon"></i>
                            <span id="sync-btn-text">Jetzt synchronisieren</span>
                        </button>
                        
                        <!-- Auto-Sync Toggle -->
                        <div class="flex items-center justify-between py-3 border-t border-slate-100">
                            <div>
                                <p class="font-medium text-slate-900">Auto-Sync</p>
                                <p class="text-xs text-slate-500">Automatisch bei App-Aktionen synchronisieren</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="auto-sync-toggle" onchange="toggleAutoSync()" class="sr-only peer" data-testid="auto-sync-toggle">
                                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                        </div>
                        
                        <div id="auto-sync-info" class="text-xs text-slate-500 hidden space-y-1 bg-amber-50 rounded-lg p-2 border border-amber-100">
                            <p>
                                <i data-lucide="clock" class="w-3 h-3 inline text-amber-500"></i>
                                Letzter Auto-Sync: <span id="last-auto-sync-time" class="font-medium">-</span>
                            </p>
                            <p class="text-slate-400">
                                <i data-lucide="info" class="w-3 h-3 inline"></i>
                                Nächste Synchronisation erfolgt automatisch bei jeder App-Aktion.
                            </p>
                        </div>
                    </div>
                    
                    <!-- Allgemeine Einstellungen -->
                    <div class="bg-white rounded-2xl p-4 border border-slate-200 mb-4">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-xl bg-green-100 flex items-center justify-center">
                                <i data-lucide="sliders" class="w-5 h-5 text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Allgemein</h3>
                                <p class="text-xs text-slate-500">App-Verhalten anpassen</p>
                            </div>
                        </div>
                        
                        <!-- MHD-Warnung Tage -->
                        <div class="mb-4">
                            <label class="text-sm font-medium text-slate-700 mb-2 block">MHD-Warnung (Tage vor Ablauf)</label>
                            <div class="flex items-center gap-3">
                                <input type="range" id="settings-expiry-days" min="1" max="14" value="3" class="flex-1 h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-green-500" oninput="updateExpiryDaysDisplay()" data-testid="settings-expiry-days">
                                <span id="expiry-days-value" class="w-12 text-center py-1 px-2 bg-green-100 text-green-700 rounded-lg font-bold text-sm">3</span>
                                <button onclick="saveExpiryDays()" class="px-4 py-2 bg-green-500 text-white rounded-xl font-medium hover:bg-green-600 text-sm" data-testid="save-expiry-days-btn">
                                    Speichern
                                </button>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Produkte werden gewarnt, wenn sie in X Tagen ablaufen</p>
                        </div>
                        
                        <!-- Sprache (blockiert) -->
                        <div class="pt-4 border-t border-slate-100">
                            <label class="text-sm font-medium text-slate-700 mb-2 block flex items-center gap-2">
                                Sprache
                                <span class="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-normal">in Arbeit</span>
                            </label>
                            <div class="relative">
                                <select id="settings-language" disabled class="w-full px-3 py-2 bg-slate-100 border border-slate-200 rounded-xl text-sm text-slate-400 cursor-not-allowed appearance-none" data-testid="settings-language">
                                    <option value="de" selected>🇩🇪 Deutsch</option>
                                    <option value="en">🇬🇧 English</option>
                                    <option value="fr">🇫🇷 Français</option>
                                    <option value="es">🇪🇸 Español</option>
                                    <option value="it">🇮🇹 Italiano</option>
                                </select>
                                <div class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
                                    <i data-lucide="chevron-down" class="w-4 h-4"></i>
                                </div>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Weitere Sprachen werden in einem zukünftigen Update verfügbar sein</p>
                        </div>
                    </div>
                    
                    <!-- Security Settings -->
                    <div class="bg-white rounded-2xl p-4 border border-slate-200 mb-4">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center">
                                <i data-lucide="shield" class="w-5 h-5 text-amber-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Sicherheit</h3>
                                <p class="text-xs text-slate-500">PIN und Sync-Schlüssel verwalten</p>
                            </div>
                        </div>
                        
                        <!-- PIN ändern -->
                        <div class="mb-4">
                            <label class="text-sm font-medium text-slate-700 mb-2 block">Login-PIN</label>
                            <div class="flex flex-col sm:flex-row gap-2">
                                <input type="password" id="settings-pin" maxlength="10" class="w-full sm:flex-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-center font-mono tracking-widest" placeholder="••••" data-testid="settings-pin-input">
                                <div class="flex gap-2">
                                    <button onclick="togglePinVisibility()" class="flex-1 sm:flex-none px-3 py-2 bg-slate-100 rounded-xl text-slate-600 hover:bg-slate-200" title="Anzeigen/Verbergen">
                                        <i data-lucide="eye" class="w-5 h-5 mx-auto" id="pin-eye-icon"></i>
                                    </button>
                                    <button onclick="savePin()" class="flex-1 sm:flex-none px-4 py-2 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600" data-testid="save-pin-btn">
                                        Speichern
                                    </button>
                                </div>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Zum Ändern neuen PIN eingeben und speichern</p>
                        </div>
                        
                        <!-- SYNC_KEY ändern -->
                        <div class="pt-4 border-t border-slate-100">
                            <label class="text-sm font-medium text-slate-700 mb-2 block">Sync-Schlüssel</label>
                            <div class="flex gap-2">
                                <input type="password" id="settings-sync-key" class="flex-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl font-mono text-sm" placeholder="••••••••••••" data-testid="settings-sync-key-input">
                                <button onclick="toggleSyncKeyVisibility()" class="px-3 py-2 bg-slate-100 rounded-xl text-slate-600 hover:bg-slate-200" title="Anzeigen/Verbergen">
                                    <i data-lucide="eye" class="w-5 h-5" id="sync-key-eye-icon"></i>
                                </button>
                                <button onclick="saveSyncKey()" class="px-4 py-2 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600" data-testid="save-sync-key-btn">
                                    Speichern
                                </button>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Für externen Zugriff auf sync.php</p>
                        </div>
                    </div>
                    
                    <!-- KI / OpenAI Settings -->
                    <div class="bg-white rounded-2xl p-4 border border-slate-200 mb-4">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-xl bg-purple-100 flex items-center justify-center">
                                <i data-lucide="sparkles" class="w-5 h-5 text-purple-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">KI-Rezepte</h3>
                                <p class="text-xs text-slate-500">OpenAI API für Rezeptgenerierung</p>
                            </div>
                        </div>
                        
                        <div class="bg-purple-50 border border-purple-200 rounded-xl p-3 mb-4">
                            <p class="text-purple-700 text-xs flex items-start gap-2">
                                <i data-lucide="info" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                                <span>Optional: Eigenen OpenAI API Key hinterlegen. Ohne Key wird der integrierte Service genutzt.</span>
                            </p>
                        </div>
                        
                        <div>
                            <label class="text-sm font-medium text-slate-700 mb-2 block">OpenAI API Key</label>
                            <div class="flex gap-2">
                                <input type="password" id="settings-openai-key" class="flex-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl font-mono text-sm" placeholder="sk-..." data-testid="settings-openai-key-input">
                                <button onclick="toggleOpenAIKeyVisibility()" class="px-3 py-2 bg-slate-100 rounded-xl text-slate-600 hover:bg-slate-200" title="Anzeigen/Verbergen">
                                    <i data-lucide="eye" class="w-5 h-5" id="openai-key-eye-icon"></i>
                                </button>
                                <button onclick="saveOpenAIKey()" class="px-4 py-2 bg-purple-500 text-white rounded-xl font-medium hover:bg-purple-600" data-testid="save-openai-key-btn">
                                    Speichern
                                </button>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Erhalte deinen Key unter <a href="https://platform.openai.com/api-keys" target="_blank" class="text-purple-600 underline">platform.openai.com</a></p>
                            <button onclick="clearOpenAIKey()" class="mt-2 text-xs text-red-500 hover:text-red-700">
                                <i data-lucide="trash-2" class="w-3 h-3 inline"></i> Key löschen (integrierten Service nutzen)
                            </button>
                        </div>
                    </div>
                    
                    <!-- Favorisierte Läden -->
                    <div class="bg-white rounded-2xl p-4 border border-slate-200 mb-4">
                        <div class="flex items-center gap-3 mb-4">
                            <div class="w-10 h-10 rounded-xl bg-green-100 flex items-center justify-center">
                                <i data-lucide="store" class="w-5 h-5 text-green-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Bevorzugte Läden</h3>
                                <p class="text-xs text-slate-500">Für Produktvorschläge bei Rezepten</p>
                            </div>
                        </div>
                        
                        <div class="bg-green-50 border border-green-200 rounded-xl p-3 mb-4">
                            <p class="text-green-700 text-xs flex items-start gap-2">
                                <i data-lucide="info" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                                <span>Wähle deine Lieblingsläden. Bei fehlenden Rezeptzutaten werden passende Produkte aus diesen Läden vorgeschlagen.</span>
                            </p>
                        </div>
                        
                        <div id="favorite-stores-chips" class="flex flex-wrap gap-2">
                            <button onclick="toggleFavoriteStore('rewe')" data-store="rewe" class="store-chip px-3 py-2 rounded-xl text-sm font-medium border-2 transition-all flex items-center gap-2 border-slate-200 bg-slate-50 text-slate-600 hover:border-red-300">
                                <span class="w-5 h-5 rounded bg-red-600 flex items-center justify-center text-white text-xs font-bold">R</span>
                                Rewe
                            </button>
                            <button onclick="toggleFavoriteStore('lidl')" data-store="lidl" class="store-chip px-3 py-2 rounded-xl text-sm font-medium border-2 transition-all flex items-center gap-2 border-slate-200 bg-slate-50 text-slate-600 hover:border-blue-300">
                                <span class="w-5 h-5 rounded bg-blue-600 flex items-center justify-center text-white text-xs font-bold">L</span>
                                Lidl
                            </button>
                            <button onclick="toggleFavoriteStore('aldi')" data-store="aldi" class="store-chip px-3 py-2 rounded-xl text-sm font-medium border-2 transition-all flex items-center gap-2 border-slate-200 bg-slate-50 text-slate-600 hover:border-orange-300">
                                <span class="w-5 h-5 rounded bg-orange-500 flex items-center justify-center text-white text-xs font-bold">A</span>
                                Aldi
                            </button>
                            <button onclick="toggleFavoriteStore('edeka')" data-store="edeka" class="store-chip px-3 py-2 rounded-xl text-sm font-medium border-2 transition-all flex items-center gap-2 border-slate-200 bg-slate-50 text-slate-600 hover:border-yellow-400">
                                <span class="w-5 h-5 rounded bg-yellow-400 flex items-center justify-center text-slate-800 text-xs font-bold">E</span>
                                Edeka
                            </button>
                            <button onclick="toggleFavoriteStore('penny')" data-store="penny" class="store-chip px-3 py-2 rounded-xl text-sm font-medium border-2 transition-all flex items-center gap-2 border-slate-200 bg-slate-50 text-slate-600 hover:border-red-400">
                                <span class="w-5 h-5 rounded bg-red-500 flex items-center justify-center text-white text-xs font-bold">P</span>
                                Penny
                            </button>
                            <button onclick="toggleFavoriteStore('netto')" data-store="netto" class="store-chip px-3 py-2 rounded-xl text-sm font-medium border-2 transition-all flex items-center gap-2 border-slate-200 bg-slate-50 text-slate-600 hover:border-yellow-500">
                                <span class="w-5 h-5 rounded bg-yellow-500 flex items-center justify-center text-slate-800 text-xs font-bold">N</span>
                                Netto
                            </button>
                        </div>
                        <p class="text-xs text-slate-400 mt-3">Ausgewählt: <span id="favorite-stores-count">0</span> Läden</p>
                    </div>
                    
                    <!-- App Info -->
                    <div class="bg-white rounded-2xl p-4 border border-slate-200">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 rounded-xl bg-indigo-100 flex items-center justify-center">
                                <i data-lucide="info" class="w-5 h-5 text-indigo-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Über Pantry Scan</h3>
                                <p class="text-xs text-slate-500">Version <span id="app-version">1.0.1</span></p>
                            </div>
                        </div>
                        <div class="text-xs text-slate-500 space-y-1">
                            <p>• KI-Rezeptideen mit Kochmodus</p>
                            <p>• Offline-First Architektur</p>
                            <p>• Automatische Synchronisation</p>
                        </div>
                    </div>
                </div>
                
                <div id="loading-state" class="hidden flex flex-col items-center justify-center py-16">
                    <div class="w-8 h-8 border-3 border-slate-200 border-t-indigo-600 rounded-full animate-spin"></div>
                </div>
            </main>
            
            <nav class="bottom-nav">
                <div class="max-w-md mx-auto h-16 flex items-center justify-around px-4">
                    <button onclick="openRecipeGenerator()" class="flex flex-col items-center gap-0.5 text-blue-600 hover:text-blue-700">
                        <i data-lucide="chef-hat" class="w-5 h-5"></i><span class="text-[10px]">Rezepte</span>
                    </button>
                    <div class="scan-button-container relative -mt-12">
                        <div class="scan-button-ring"></div>
                        <div class="scan-button-ring-2"></div>
                        <button id="scan-button" onclick="openScanner()" class="relative w-16 h-16 rounded-full bg-gradient-to-br from-teal-500 to-teal-600 shadow-lg shadow-teal-500/40 flex items-center justify-center text-white">
                            <i data-lucide="scan" class="w-7 h-7"></i>
                        </button>
                    </div>
                    <button onclick="openManualEntry()" class="flex flex-col items-center gap-0.5 text-slate-400 hover:text-indigo-600">
                        <i data-lucide="edit" class="w-5 h-5"></i><span class="text-[10px]">Manuell</span>
                    </button>
                </div>
            </nav>
        </div>
        
        <!-- Rezept Generator - Elegantes Bottom Sheet -->
        <div id="recipe-modal" class="hidden fixed inset-0 z-50">
            <!-- Backdrop -->
            <div onclick="closeRecipeModal()" class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
            
            <!-- Bottom Sheet -->
            <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl max-h-[90vh] overflow-hidden flex flex-col animate-slide-up">
                <!-- Handle -->
                <div class="flex justify-center py-3">
                    <div class="w-12 h-1.5 bg-slate-300 rounded-full"></div>
                </div>
                
                <!-- Header -->
                <div class="flex items-center justify-between px-5 pb-3 border-b border-slate-100">
                    <button onclick="recipeGoBack()" id="recipe-back-btn" class="w-9 h-9 rounded-full bg-slate-100 flex items-center justify-center text-slate-600">
                        <i data-lucide="x" class="w-4 h-4" id="recipe-back-icon"></i>
                    </button>
                    <h2 class="text-lg font-bold text-slate-900" id="recipe-header-title">Rezeptideen</h2>
                    <button onclick="openRecipeFavorites()" class="w-9 h-9 rounded-full bg-red-50 flex items-center justify-center text-red-500">
                        <i data-lucide="heart" class="w-4 h-4"></i>
                    </button>
                </div>
                
                <!-- Scrollable Content -->
                <div class="overflow-y-auto flex-1 px-5 py-4">
                    <!-- KI Hinweis -->
                    <div id="recipe-ai-notice" class="bg-amber-50 border border-amber-200 rounded-xl p-3 mb-4">
                        <p class="text-amber-800 text-xs flex items-start gap-2">
                            <i data-lucide="sparkles" class="w-4 h-4 flex-shrink-0 mt-0.5 text-amber-500"></i>
                            <span>Rezepte werden mit KI (ChatGPT/OpenAI) erstellt. Die Vorschläge können variieren.</span>
                        </p>
                    </div>
                    
                    <!-- Hauptansicht: Generator -->
                    <div id="recipe-main-view">
                        <!-- Schnellstart Buttons -->
                        <div class="mb-4">
                            <h3 class="text-slate-700 text-sm font-medium mb-2">Schnellauswahl</h3>
                            <div class="grid grid-cols-3 gap-2">
                                <button onclick="quickSelectIngredients('expiring')" class="flex flex-col items-center gap-1 p-3 bg-amber-50 border border-amber-200 rounded-xl hover:bg-amber-100 transition-colors">
                                    <i data-lucide="clock" class="w-5 h-5 text-amber-600"></i>
                                    <span class="text-slate-700 text-xs font-medium">Ablaufend</span>
                                </button>
                                <button onclick="quickSelectIngredients('expired')" class="flex flex-col items-center gap-1 p-3 bg-red-50 border border-red-200 rounded-xl hover:bg-red-100 transition-colors">
                                    <i data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
                                    <span class="text-slate-700 text-xs font-medium">+ Abgelaufen</span>
                                </button>
                                <button onclick="quickSelectIngredients('all')" class="flex flex-col items-center gap-1 p-3 bg-green-50 border border-green-200 rounded-xl hover:bg-green-100 transition-colors">
                                    <i data-lucide="package" class="w-5 h-5 text-green-600"></i>
                                    <span class="text-slate-700 text-xs font-medium">Alle</span>
                                </button>
                            </div>
                        </div>
                        
                        <!-- Ausgewählte Zutaten -->
                        <div class="bg-slate-50 rounded-2xl p-4 mb-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-slate-900 font-semibold flex items-center gap-2">
                                    <i data-lucide="package" class="w-4 h-4 text-amber-500"></i>
                                    Zutaten
                                </h3>
                                <button onclick="toggleIngredientPicker()" id="toggle-ingredients-btn" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
                                    Manuell auswählen
                                </button>
                            </div>
                            
                            <!-- Ausgewählte Zutaten Display -->
                            <div id="recipe-selected-ingredients" class="flex flex-wrap gap-1.5 min-h-[40px] p-2 bg-white border border-slate-200 rounded-xl mb-3">
                                <span class="text-slate-400 text-xs">Keine Zutaten ausgewählt</span>
                            </div>
                            
                            <!-- Zutaten-Picker (initial hidden) -->
                            <div id="recipe-ingredient-picker-container" class="hidden">
                                <div id="recipe-ingredient-picker" class="max-h-36 overflow-y-auto space-y-1">
                                    <!-- Wird dynamisch gefüllt -->
                                </div>
                            </div>
                        </div>
                        
                        <!-- Optionen -->
                        <div class="bg-slate-50 rounded-2xl p-4 mb-4">
                            <h3 class="text-slate-900 font-semibold mb-3 flex items-center gap-2">
                                <i data-lucide="sliders" class="w-4 h-4 text-amber-500"></i>
                                Optionen
                            </h3>
                            
                            <!-- Portionen -->
                            <div class="flex items-center justify-between mb-4 pb-3 border-b border-slate-200">
                                <span class="text-slate-700 text-sm">Portionen</span>
                                <div class="flex items-center gap-3">
                                    <button onclick="adjustRecipeServings(-1)" class="w-8 h-8 rounded-full bg-white border border-slate-200 text-slate-600 flex items-center justify-center shadow-sm hover:bg-slate-50">−</button>
                                    <span id="recipe-servings" class="text-slate-900 font-bold w-6 text-center">4</span>
                                    <button onclick="adjustRecipeServings(1)" class="w-8 h-8 rounded-full bg-white border border-slate-200 text-slate-600 flex items-center justify-center shadow-sm hover:bg-slate-50">+</button>
                                </div>
                            </div>
                            
                            <!-- Nur vorhandene Zutaten -->
                            <label class="flex items-center justify-between mb-4 cursor-pointer">
                                <span class="text-slate-700 text-sm">Nur vorhandene Zutaten</span>
                                <div class="relative">
                                    <input type="checkbox" id="recipe-only-available" checked class="sr-only peer">
                                    <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-500"></div>
                                </div>
                            </label>
                            
                            <!-- Ernährungsfilter -->
                            <div>
                                <span class="text-slate-700 text-sm block mb-2">Ernährung</span>
                                <div class="flex flex-wrap gap-2">
                                    <label class="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-200 rounded-full cursor-pointer hover:bg-slate-50 has-[:checked]:bg-green-100 has-[:checked]:border-green-300">
                                        <input type="checkbox" id="recipe-filter-vegan" class="w-3.5 h-3.5 rounded accent-green-500">
                                        <span class="text-slate-700 text-xs">Vegan</span>
                                    </label>
                                    <label class="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-200 rounded-full cursor-pointer hover:bg-slate-50 has-[:checked]:bg-green-100 has-[:checked]:border-green-300">
                                        <input type="checkbox" id="recipe-filter-vegetarian" class="w-3.5 h-3.5 rounded accent-green-500">
                                        <span class="text-slate-700 text-xs">Vegetarisch</span>
                                    </label>
                                    <label class="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-200 rounded-full cursor-pointer hover:bg-slate-50 has-[:checked]:bg-amber-100 has-[:checked]:border-amber-300">
                                        <input type="checkbox" id="recipe-filter-glutenfree" class="w-3.5 h-3.5 rounded accent-amber-500">
                                        <span class="text-slate-700 text-xs">Glutenfrei</span>
                                    </label>
                                    <label class="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-slate-200 rounded-full cursor-pointer hover:bg-slate-50 has-[:checked]:bg-blue-100 has-[:checked]:border-blue-300">
                                        <input type="checkbox" id="recipe-filter-lactosefree" class="w-3.5 h-3.5 rounded accent-blue-500">
                                        <span class="text-slate-700 text-xs">Laktosefrei</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Generieren Button -->
                        <button onclick="generateRecipe()" id="generate-recipe-btn" class="w-full py-4 bg-gradient-to-r from-amber-500 to-orange-500 text-white font-bold rounded-2xl flex items-center justify-center gap-2 shadow-lg shadow-amber-500/25 hover:shadow-amber-500/40 transition-all active:scale-[0.98] disabled:opacity-50">
                            <i data-lucide="sparkles" class="w-5 h-5"></i>
                            Rezept generieren
                        </button>
                    </div>
                    
                    <!-- Rezept Anzeige -->
                    <div id="recipe-result-view" class="hidden">
                        <!-- Wird dynamisch gefüllt -->
                    </div>
                    
                    <!-- Favoriten/Verlauf -->
                    <div id="recipe-favorites-view" class="hidden">
                        <div class="flex gap-2 mb-4">
                            <button onclick="showRecipeTab('favorites')" id="recipe-tab-favorites" class="flex-1 py-2 rounded-xl text-sm font-semibold bg-amber-500 text-white">
                                Favoriten
                            </button>
                            <button onclick="showRecipeTab('history')" id="recipe-tab-history" class="flex-1 py-2 rounded-xl text-sm font-semibold bg-slate-100 text-slate-600">
                                Verlauf
                            </button>
                        </div>
                        <div id="recipe-list" class="space-y-3">
                            <!-- Wird dynamisch gefüllt -->
                        </div>
                    </div>
                    
                    <!-- Kochmodus -->
                    <div id="recipe-cooking-view" class="hidden">
                        <!-- Wird dynamisch gefüllt -->
                    </div>
                </div>
            </div>
        </div>
                            </div>
        
        <!-- Scanner -->
        <div id="scanner-modal" class="hidden fixed inset-0 z-50 bg-black">
            <div id="qr-reader" class="w-full h-full"></div>
            <div class="scanner-frame"></div>
            <div class="absolute top-4 left-4 right-4 flex justify-between items-center z-10">
                <button onclick="closeScanner()" class="w-10 h-10 rounded-full bg-black/50 flex items-center justify-center text-white">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
                <button onclick="switchCamera()" class="w-10 h-10 rounded-full bg-black/50 flex items-center justify-center text-white">
                    <i data-lucide="switch-camera" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="absolute bottom-4 left-4 right-4 z-10">
                <div class="bg-black/70 backdrop-blur rounded-2xl p-3">
                    <div class="flex gap-2 mb-2">
                        <button id="scanner-mode-add" onclick="setScannerMode('add')" class="flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-indigo-600 text-white">
                            <i data-lucide="plus" class="w-4 h-4"></i> Einbuchen
                        </button>
                        <button id="scanner-mode-consume" onclick="setScannerMode('consume')" class="flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-white/20 text-white">
                            <i data-lucide="minus" class="w-4 h-4"></i> Verbrauch
                        </button>
                    </div>
                    <p class="text-white/60 text-center text-xs mb-2">Barcode in den Rahmen halten</p>
                    <button onclick="openManualBarcodeInput()" class="w-full py-2 bg-white/10 text-white rounded-xl text-sm flex items-center justify-center gap-2">
                        <i data-lucide="keyboard" class="w-4 h-4"></i> Barcode manuell eingeben
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Manual Barcode Input Modal -->
        <div id="manual-barcode-modal" class="hidden fixed inset-0 z-[52] bg-black/95 flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl w-full max-w-sm p-5">
                <h3 class="text-lg font-bold mb-4">Barcode eingeben</h3>
                <input type="text" id="manual-barcode-input" inputmode="numeric" pattern="[0-9]*" 
                    class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-center text-xl font-mono tracking-widest focus:border-indigo-500 focus:outline-none" 
                    placeholder="4001499960963" maxlength="20">
                <p class="text-xs text-slate-400 text-center mt-2 mb-4">EAN-13, EAN-8, UPC, etc.</p>
                <div class="flex gap-2">
                    <button onclick="closeManualBarcodeInput()" class="flex-1 py-3 bg-slate-100 text-slate-700 rounded-xl font-medium">Abbrechen</button>
                    <button onclick="submitManualBarcode()" class="flex-1 py-3 bg-indigo-600 text-white rounded-xl font-bold">Suchen</button>
                </div>
            </div>
        </div>
        
        <!-- Add to Shopping List Modal -->
        <div id="shopping-add-modal" class="hidden fixed inset-0 z-[55] modal-backdrop flex items-center justify-center p-4" onclick="closeShoppingAddModal()">
            <div class="bg-white rounded-2xl w-full max-w-sm p-5" onclick="event.stopPropagation()">
                <div class="flex items-center gap-3 mb-4">
                    <div id="shopping-add-image" class="w-14 h-14 bg-slate-100 rounded-xl flex items-center justify-center overflow-hidden">
                        <i data-lucide="package" class="w-6 h-6 text-slate-400"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h3 id="shopping-add-name" class="font-bold text-slate-900 truncate">Produktname</h3>
                        <p id="shopping-add-brand" class="text-sm text-slate-500 truncate">Marke</p>
                    </div>
                </div>
                
                <div class="flex items-center justify-center gap-4 mb-4">
                    <button onclick="adjustShoppingQty(-1)" class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-slate-200 active:scale-95">
                        <i data-lucide="minus" class="w-5 h-5"></i>
                    </button>
                    <input type="number" id="shopping-add-qty" value="1" min="1" max="99" class="w-20 text-center text-3xl font-bold border-none focus:outline-none text-indigo-600">
                    <button onclick="adjustShoppingQty(1)" class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 hover:bg-indigo-200 active:scale-95">
                        <i data-lucide="plus" class="w-5 h-5"></i>
                    </button>
                </div>
                
                <div class="mb-4">
                    <label class="text-sm text-slate-500 mb-1 block">Notiz (optional)</label>
                    <input type="text" id="shopping-add-note" placeholder="z.B. Bio-Variante" class="w-full px-3 py-2 border border-slate-200 rounded-xl text-sm focus:border-indigo-500 focus:outline-none">
                </div>
                
                <div class="mb-4">
                    <label class="text-sm text-slate-500 mb-1 block">Priorität</label>
                    <div class="flex gap-2">
                        <button onclick="setShoppingPriority(0)" class="shopping-priority flex-1 py-2 rounded-lg text-sm font-medium" data-priority="0">Normal</button>
                        <button onclick="setShoppingPriority(1)" class="shopping-priority flex-1 py-2 rounded-lg text-sm font-medium" data-priority="1">Wichtig</button>
                        <button onclick="setShoppingPriority(2)" class="shopping-priority flex-1 py-2 rounded-lg text-sm font-medium" data-priority="2">Dringend</button>
                    </div>
                </div>
                
                <div class="flex gap-2">
                    <button onclick="closeShoppingAddModal()" class="flex-1 py-3 bg-slate-100 text-slate-700 rounded-xl font-medium">Abbrechen</button>
                    <button onclick="saveToShoppingList()" class="flex-1 py-3 bg-emerald-600 text-white rounded-xl font-bold flex items-center justify-center gap-2">
                        <i data-lucide="shopping-cart" class="w-4 h-4"></i> Hinzufügen
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Add Modal -->
        <div id="add-modal" class="hidden fixed inset-0 z-50 modal-backdrop" onclick="closeAddModal()">
            <div class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl max-h-[85vh] overflow-y-auto" onclick="event.stopPropagation()">
                <div class="sticky top-0 bg-white z-10 px-5 py-4 border-b border-slate-100 flex items-center justify-between rounded-t-3xl">
                    <h2 class="text-lg font-bold text-slate-900">Einbuchen</h2>
                    <button onclick="closeAddModal()" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-500">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                <div id="add-modal-content" class="p-5 pb-8"></div>
            </div>
        </div>
        
        <!-- Consume Modal -->
        <div id="consume-modal" class="hidden fixed inset-0 z-50 modal-backdrop" onclick="closeConsumeModal()">
            <div class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl max-h-[85vh] overflow-y-auto" onclick="event.stopPropagation()">
                <div class="sticky top-0 bg-white z-10 px-5 py-4 border-b border-slate-100 flex items-center justify-between rounded-t-3xl">
                    <h2 class="text-lg font-bold text-slate-900">Verbrauchen</h2>
                    <button onclick="closeConsumeModal()" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-500">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                <div id="consume-modal-content" class="p-5 pb-8"></div>
            </div>
        </div>
        
        <!-- OCR Modal -->
        <div id="ocr-modal" class="hidden fixed inset-0 z-[55] bg-black">
            <div class="absolute top-4 left-4 right-4 z-20 flex items-center justify-between">
                <button onclick="closeOcrCamera()" class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
                <span class="text-white font-bold bg-amber-500 px-4 py-2 rounded-full">MHD scannen</span>
                <button onclick="switchOcrCamera()" class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <i data-lucide="switch-camera" class="w-6 h-6"></i>
                </button>
            </div>
            <video id="ocr-video" autoplay playsinline muted class="w-full h-full object-cover"></video>
            <div class="absolute inset-x-8 top-1/2 -translate-y-1/2 h-24 border-4 border-amber-400 rounded-2xl z-10 flex items-center justify-center">
                <span class="text-amber-300 text-sm font-medium bg-black/50 px-3 py-1 rounded-full">Datum hier</span>
            </div>
            <div class="absolute bottom-8 left-4 right-4 z-10 text-center">
                <button onclick="captureOcr()" class="w-16 h-16 rounded-full bg-amber-500 flex items-center justify-center text-white mx-auto mb-3 shadow-lg">
                    <i data-lucide="camera" class="w-8 h-8"></i>
                </button>
                <p class="text-white/80 text-sm">Foto aufnehmen</p>
            </div>
            <canvas id="ocr-canvas" class="hidden"></canvas>
        </div>
        
        <!-- OCR Debug -->
        <div id="ocr-debug" class="hidden fixed inset-0 z-[60] bg-black/95 p-4 overflow-y-auto">
            <div class="max-w-md mx-auto">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-white font-bold text-lg">OCR Debug</h2>
                    <button onclick="closeOcrDebug()" class="text-white bg-white/20 px-4 py-2 rounded-full">Schließen</button>
                </div>
                <div id="ocr-debug-image" class="mb-4 rounded-xl overflow-hidden bg-slate-800"></div>
                <div class="bg-slate-800 rounded-xl p-4 mb-4">
                    <p class="text-amber-400 font-mono text-sm mb-2">Erkannter Text:</p>
                    <pre id="ocr-debug-text" class="text-white font-mono text-xs whitespace-pre-wrap max-h-40 overflow-y-auto"></pre>
                </div>
                <div class="bg-slate-800 rounded-xl p-4 mb-4">
                    <p class="text-blue-400 font-mono text-sm mb-2">Gefundene Zahlengruppen:</p>
                    <pre id="ocr-debug-numbers" class="text-white font-mono text-sm"></pre>
                </div>
                <div class="bg-slate-800 rounded-xl p-4 mb-4">
                    <p class="text-green-400 font-mono text-sm mb-2">Erkanntes Datum:</p>
                    <p id="ocr-debug-date" class="text-white font-mono text-xl"></p>
                </div>
                <button onclick="useDebugDate()" id="ocr-use-date-btn" class="hidden w-full py-3 bg-green-600 text-white rounded-xl font-bold mb-2">
                    Dieses Datum verwenden
                </button>
                <button onclick="openManualDateEntry()" class="w-full py-3 bg-blue-600 text-white rounded-xl font-bold">
                    Datum manuell eingeben
                </button>
            </div>
        </div>
        
        <!-- Manual Date Entry -->
        <div id="manual-date-modal" class="hidden fixed inset-0 z-[65] bg-black/95 flex items-center justify-center p-4">
            <div class="bg-white rounded-2xl p-6 w-full max-w-sm">
                <h3 class="text-lg font-bold mb-4">MHD manuell eingeben</h3>
                <div class="grid grid-cols-3 gap-2 mb-4">
                    <div>
                        <label class="text-xs text-slate-500">Tag</label>
                        <input type="number" id="manual-day" min="1" max="31" class="w-full px-3 py-2 border rounded-lg text-center text-lg" placeholder="TT">
                    </div>
                    <div>
                        <label class="text-xs text-slate-500">Monat</label>
                        <input type="number" id="manual-month" min="1" max="12" class="w-full px-3 py-2 border rounded-lg text-center text-lg" placeholder="MM">
                    </div>
                    <div>
                        <label class="text-xs text-slate-500">Jahr</label>
                        <input type="number" id="manual-year" min="2024" max="2040" class="w-full px-3 py-2 border rounded-lg text-center text-lg" placeholder="JJJJ">
                    </div>
                </div>
                <div class="flex gap-2">
                    <button onclick="closeManualDateModal()" class="flex-1 py-3 bg-slate-200 rounded-xl font-medium">Abbrechen</button>
                    <button onclick="applyManualDate()" class="flex-1 py-3 bg-green-600 text-white rounded-xl font-bold">Übernehmen</button>
                </div>
            </div>
        </div>
        
        <!-- Processing -->
        <div id="ocr-processing" class="hidden fixed inset-0 z-[60] bg-black/90 flex flex-col items-center justify-center">
            <div class="w-16 h-16 border-4 border-amber-500/30 border-t-amber-500 rounded-full animate-spin mb-4"></div>
            <p class="text-white font-medium">Analysiere Bild...</p>
            <p id="ocr-progress" class="text-amber-400 text-sm mt-2">0%</p>
        </div>
        
        <!-- Custom Photo Modal -->
        <div id="custom-photo-modal" class="hidden fixed inset-0 z-[55] bg-black">
            <div class="absolute top-4 left-4 right-4 z-20 flex items-center justify-between">
                <button onclick="closeCustomPhotoCamera()" class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
                <span class="text-white font-bold bg-purple-500 px-4 py-2 rounded-full">Foto aufnehmen</span>
                <button onclick="switchCustomPhotoCamera()" class="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <i data-lucide="switch-camera" class="w-6 h-6"></i>
                </button>
            </div>
            <video id="custom-photo-video" autoplay playsinline muted class="w-full h-full object-cover"></video>
            <div class="absolute inset-8 border-4 border-purple-400/50 rounded-3xl z-10 pointer-events-none"></div>
            <div class="absolute bottom-8 left-4 right-4 z-10 text-center">
                <button onclick="captureCustomPhoto()" class="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center text-white mx-auto mb-3 shadow-lg">
                    <i data-lucide="camera" class="w-8 h-8"></i>
                </button>
                <p class="text-white/80 text-sm">Produkt zentrieren und Foto aufnehmen</p>
            </div>
            <canvas id="custom-photo-canvas" class="hidden"></canvas>
        </div>
        
        <!-- Custom Photo Preview -->
        <div id="custom-photo-preview" class="hidden fixed inset-0 z-[60] bg-black/95 flex flex-col items-center justify-center p-4">
            <div class="max-w-sm w-full">
                <h3 class="text-white text-lg font-bold text-center mb-4">Foto verwenden?</h3>
                <div id="custom-photo-preview-img" class="rounded-2xl overflow-hidden mb-4 bg-slate-800"></div>
                <div class="flex gap-3">
                    <button onclick="retakeCustomPhoto()" class="flex-1 py-3 bg-slate-600 text-white rounded-xl font-medium flex items-center justify-center gap-2">
                        <i data-lucide="refresh-cw" class="w-4 h-4"></i> Neu
                    </button>
                    <button onclick="saveCustomPhoto()" class="flex-1 py-3 bg-purple-600 text-white rounded-xl font-bold flex items-center justify-center gap-2">
                        <i data-lucide="check" class="w-4 h-4"></i> Speichern
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Detail Modal mit Slide-Up Animation auf Mobile -->
        <div id="detail-modal" class="hidden fixed inset-0 z-50 modal-backdrop overflow-y-auto" onclick="closeDetailModal()">
            <div class="min-h-full flex items-end md:items-center md:justify-center md:p-6">
                <div class="detail-modal-content w-full md:max-w-4xl bg-white md:rounded-2xl max-h-[95vh] md:max-h-[90vh] overflow-hidden" onclick="event.stopPropagation()">
                    <div id="detail-content" class="overflow-y-auto max-h-[95vh] md:max-h-[90vh]"></div>
                </div>
            </div>
        </div>
        
        <!-- Background Sync Toast -->
        <div id="sync-toast" class="sync-toast hidden">
            <div class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
            <span id="sync-toast-text">Synchronisiere...</span>
        </div>
        
        <!-- MHD Inventory Popup -->
        <div id="mhd-popup" class="hidden fixed inset-0 z-[55] modal-backdrop" onclick="closeMhdPopup()">
            <div class="absolute inset-x-4 top-1/2 -translate-y-1/2 bg-white rounded-2xl max-h-[70vh] overflow-hidden shadow-2xl" onclick="event.stopPropagation()">
                <div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between bg-indigo-50">
                    <div>
                        <h2 class="text-lg font-bold text-slate-900">Bestand nach MHD</h2>
                        <p id="mhd-popup-product" class="text-sm text-slate-500"></p>
                    </div>
                    <button onclick="closeMhdPopup()" class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-slate-500 shadow-sm">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                <div id="mhd-popup-content" class="p-4 overflow-y-auto max-h-[50vh]"></div>
            </div>
        </div>
        
        <!-- Manual Modal -->
        <div id="manual-modal" class="hidden fixed inset-0 z-50 modal-backdrop" onclick="closeManualModal()">
            <div class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl" onclick="event.stopPropagation()">
                <div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
                    <h2 class="text-lg font-bold">Neues Produkt</h2>
                    <button onclick="closeManualModal()" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-500">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                <form id="product-form" class="p-5 space-y-4 pb-8" onsubmit="saveManualProduct(event)">
                    <input type="text" id="form-name" required class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl" placeholder="Produktname *">
                    <input type="text" id="form-brand" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl" placeholder="Marke">
                    
                    <!-- Kein Lebensmittel Checkbox -->
                    <label class="flex items-center gap-3 p-3 bg-slate-50 border border-slate-200 rounded-xl cursor-pointer">
                        <input type="checkbox" id="form-not-food" class="w-5 h-5 rounded accent-red-500">
                        <div>
                            <span class="text-slate-700 font-medium">Kein Lebensmittel</span>
                            <p class="text-slate-500 text-xs">z.B. Reiniger, Kosmetik, Hygieneartikel</p>
                        </div>
                    </label>
                    
                    <button type="submit" class="w-full py-4 bg-indigo-600 text-white rounded-xl font-semibold">Weiter</button>
                </form>
            </div>
        </div>
        
        <!-- Ingredient Picker Modal -->
        <div id="ingredient-picker-modal" class="hidden fixed inset-0 z-[60] bg-black/50 flex items-end sm:items-center justify-center">
            <div class="bg-white w-full max-w-md rounded-t-3xl sm:rounded-3xl max-h-[85vh] flex flex-col animate-slide-up">
                <!-- Header -->
                <div class="p-4 border-b border-slate-200 flex items-center justify-between flex-shrink-0">
                    <div>
                        <h3 class="font-bold text-slate-900" id="ingredient-picker-title">Zutat hinzufügen</h3>
                        <p class="text-xs text-slate-500" id="ingredient-picker-subtitle">Wähle ein Produkt oder lege es manuell an</p>
                    </div>
                    <button onclick="closeIngredientPicker()" class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center">
                        <i data-lucide="x" class="w-4 h-4 text-slate-500"></i>
                    </button>
                </div>
                
                <!-- Content -->
                <div class="flex-1 overflow-y-auto p-4">
                    <!-- Search Status -->
                    <div id="ingredient-picker-loading" class="hidden text-center py-8">
                        <div class="w-8 h-8 border-2 border-blue-500/30 border-t-blue-500 rounded-full animate-spin mx-auto mb-2"></div>
                        <p class="text-sm text-slate-500">Suche Vorschläge...</p>
                    </div>
                    
                    <!-- Suggestions -->
                    <div id="ingredient-picker-suggestions" class="space-y-3">
                        <!-- Lokale Produkte -->
                        <div id="ingredient-local-section" class="hidden">
                            <p class="text-xs font-medium text-slate-500 mb-2 flex items-center gap-1">
                                <i data-lucide="database" class="w-3 h-3"></i>
                                Aus deinen Produkten
                            </p>
                            <div id="ingredient-local-list" class="space-y-2"></div>
                        </div>
                        
                        <!-- OpenFoodFacts Produkte -->
                        <div id="ingredient-off-section" class="hidden">
                            <p class="text-xs font-medium text-slate-500 mb-2 flex items-center gap-1">
                                <i data-lucide="globe" class="w-3 h-3"></i>
                                Von OpenFoodFacts
                            </p>
                            <div id="ingredient-off-list" class="space-y-2"></div>
                        </div>
                        
                        <!-- Keine Ergebnisse -->
                        <div id="ingredient-no-results" class="hidden text-center py-6">
                            <i data-lucide="search-x" class="w-10 h-10 text-slate-300 mx-auto mb-2"></i>
                            <p class="text-slate-500 text-sm">Keine passenden Produkte gefunden</p>
                        </div>
                    </div>
                    
                    <!-- Manuelle Optionen -->
                    <div class="mt-4 pt-4 border-t border-slate-200">
                        <p class="text-xs font-medium text-slate-500 mb-2">Oder manuell anlegen:</p>
                        <div class="space-y-2">
                            <button onclick="addIngredientManual()" class="w-full py-3 px-4 bg-slate-50 hover:bg-slate-100 rounded-xl text-left flex items-center gap-3 border border-slate-200" data-testid="add-ingredient-manual">
                                <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
                                    <i data-lucide="pencil" class="w-5 h-5 text-green-600"></i>
                                </div>
                                <div>
                                    <span class="font-medium text-slate-800 block">Als manuellen Artikel</span>
                                    <span class="text-xs text-slate-500">Schnell ohne Barcode anlegen</span>
                                </div>
                            </button>
                            <button onclick="addIngredientWithBarcode()" class="w-full py-3 px-4 bg-slate-50 hover:bg-slate-100 rounded-xl text-left flex items-center gap-3 border border-slate-200" data-testid="add-ingredient-barcode">
                                <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                                    <i data-lucide="barcode" class="w-5 h-5 text-blue-600"></i>
                                </div>
                                <div>
                                    <span class="font-medium text-slate-800 block">Mit Barcode scannen</span>
                                    <span class="text-xs text-slate-500">Produkt scannen und anlegen</span>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Produkt-Kompakt-View Modal (für Ingredient Picker) -->
        <div id="product-compact-modal" class="hidden fixed inset-0 z-[65] bg-black/50 flex items-end sm:items-center justify-center" onclick="closeProductCompactView()">
            <div class="bg-white w-full max-w-sm rounded-t-2xl sm:rounded-2xl overflow-hidden animate-slide-up" onclick="event.stopPropagation()">
                <div id="product-compact-content"></div>
            </div>
        </div>
        
        <!-- Toast -->
        <div id="toast-container" class="fixed top-4 left-4 right-4 z-[70] flex flex-col gap-2 items-center"></div>
    </div>

    <script>
        const API_URL = 'api.php';
        const PLACEHOLDER = 'https://images.unsplash.com/photo-1566290165528-9b1e7e58b814?w=200';
        
        let currentMode = 'add', scannerMode = 'add', products = [], shoppingList = [];
        let html5QrCode = null, ocrStream = null;
        let pendingProduct = null, pendingQty = 1, pendingExpiry = null;
        let debugFoundDate = null;
        let activeTab = 'dashboard', viewMode = 'grid';
        let shoppingAddProduct = null, shoppingAddPriority = 0;
        let currentFilter = null;
        let openedFromScanner = false; // Merkt sich ob Scanner-Button oder Artikel-Detail genutzt wurde
        
        // MHD-Warnung: Tage vor Ablauf (Default 3, wird aus Settings geladen)
        let expiryWarningDays = 3;
        
        // Session Key für Login-Status
        const SESSION_KEY = 'pantry_scan_logged_in';
        
        // App-Version aus DB laden und anzeigen
        async function loadAppVersion() {
            try {
                const res = await fetch(`${API_URL}?action=version`);
                const data = await res.json();
                if (data.version) {
                    // Version in allen relevanten Elementen aktualisieren
                    const versionEl = document.getElementById('app-version');
                    if (versionEl) {
                        versionEl.textContent = data.version;
                    }
                    // Auch Title aktualisieren
                    document.title = `Pantry Scan v${data.version}`;
                    console.log('App Version:', data.version);
                }
            } catch (e) {
                console.warn('Could not load app version:', e);
            }
        }
        
        // Init
        document.addEventListener('DOMContentLoaded', () => {
            lucide.createIcons();
            loadAppVersion(); // Version aus DB laden
            
            // Prüfe ob bereits eingeloggt (Session)
            if (sessionStorage.getItem(SESSION_KEY) === 'true') {
                document.getElementById('pin-overlay').classList.add('hidden');
                document.getElementById('main-app').classList.remove('hidden');
                loadExpiryWarningDays(); // MHD-Warnung Einstellung laden
                loadAutoSyncSettings(); // Auto-Sync Settings aus DB laden
                loadFavoriteStores(); // Favorisierte Läden laden
                loadProducts();
                updateShoppingCount();
                setActiveTab('dashboard');
            }
            
            document.getElementById('pin-form').addEventListener('submit', async (e) => {
                e.preventDefault();
                const pinInput = document.getElementById('pin-input');
                const pinError = document.getElementById('pin-error');
                const submitBtn = e.target.querySelector('button[type="submit"]');
                
                // Button deaktivieren während Prüfung
                submitBtn.disabled = true;
                submitBtn.textContent = 'Prüfe...';
                
                try {
                    // PIN über API validieren (aus DB)
                    const res = await fetch(`${API_URL}?action=auth`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ pin: pinInput.value })
                    });
                    const data = await res.json();
                    
                    if (data.success) {
                        // Session speichern
                        sessionStorage.setItem(SESSION_KEY, 'true');
                        document.getElementById('pin-overlay').classList.add('hidden');
                        document.getElementById('main-app').classList.remove('hidden');
                        loadExpiryWarningDays(); // MHD-Warnung Einstellung laden
                        loadAutoSyncSettings(); // Auto-Sync Settings aus DB laden
                        loadFavoriteStores(); // Favorisierte Läden laden
                        loadProducts();
                        updateShoppingCount();
                        setActiveTab('dashboard');
                    } else {
                        pinError.classList.remove('hidden');
                        pinInput.value = '';
                    }
                } catch (err) {
                    console.error('Auth error:', err);
                    pinError.textContent = 'Verbindungsfehler';
                    pinError.classList.remove('hidden');
                } finally {
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Anmelden';
                }
            });
            
            // Enter for manual barcode
            const barcodeInput = document.getElementById('manual-barcode-input');
            if (barcodeInput) {
                barcodeInput.addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') submitManualBarcode();
                });
            }
        });
        
        // Logout
        function logout() {
            if (confirm('Wirklich abmelden?')) {
                // Session löschen
                sessionStorage.removeItem(SESSION_KEY);
                document.getElementById('main-app').classList.add('hidden');
                document.getElementById('pin-overlay').classList.remove('hidden');
                document.getElementById('pin-input').value = '';
                document.getElementById('pin-error').classList.add('hidden');
            }
        }
        
        // ============ SWIPE NAVIGATION (DEAKTIVIERT) ============
        // Swipe zwischen Tabs wurde auf Wunsch des Users deaktiviert
        
        // View Mode Toggle
        function toggleViewMode() {
            viewMode = viewMode === 'grid' ? 'list' : 'grid';
            const grid = document.getElementById('products-grid');
            const iconGrid = document.getElementById('view-icon-grid');
            const iconList = document.getElementById('view-icon-list');
            
            if (viewMode === 'list') {
                grid.classList.add('list-view');
                iconGrid.classList.add('hidden');
                iconList.classList.remove('hidden');
            } else {
                grid.classList.remove('list-view');
                iconGrid.classList.remove('hidden');
                iconList.classList.add('hidden');
            }
            renderProducts();
        }
        
        // Tab Navigation
        function setActiveTab(tab) {
            activeTab = tab;
            currentFilter = null;
            const tabs = ['dashboard', 'instock', 'all', 'shopping', 'settings'];
            
            // Update tab styling
            tabs.forEach(t => {
                const btn = document.getElementById(`tab-${t}`);
                if (btn) {
                    if (t === tab) {
                        btn.classList.add('active');
                    } else {
                        btn.classList.remove('active');
                    }
                }
            });
            
            // Auto-Sync im Hintergrund bei Tab-Wechsel (wenn aktiviert)
            if (autoSyncEnabled && !isSyncing) {
                checkAndRunAutoSync();
            }
            
            // Show/hide views
            document.getElementById('dashboard-view').classList.add('hidden');
            document.getElementById('products-view').classList.add('hidden');
            document.getElementById('shopping-view').classList.add('hidden');
            document.getElementById('filtered-view').classList.add('hidden');
            document.getElementById('settings-view').classList.add('hidden');
            
            // View toggle nur bei Produktlisten
            const viewToggle = document.getElementById('view-toggle');
            
            if (tab === 'dashboard') {
                document.getElementById('dashboard-view').classList.remove('hidden');
                viewToggle.classList.add('hidden');
                updateDashboard();
            } else if (tab === 'shopping') {
                document.getElementById('shopping-view').classList.remove('hidden');
                viewToggle.classList.add('hidden');
                loadShoppingList();
            } else if (tab === 'settings') {
                document.getElementById('settings-view').classList.remove('hidden');
                viewToggle.classList.add('hidden');
                loadSyncStatus();
                loadAutoSyncSettings();
                loadSecuritySettings();
            } else {
                document.getElementById('products-view').classList.remove('hidden');
                viewToggle.classList.remove('hidden');
                viewToggle.style.display = 'flex';
                
                // Filter, Sortierung und Suche beim Tab-Wechsel zurücksetzen
                const filterSelect = document.getElementById('product-filter');
                const sortSelect = document.getElementById('product-sort');
                const searchInput = document.getElementById('product-search');
                const clearBtn = document.getElementById('clear-search-btn');
                
                if (filterSelect) filterSelect.value = '';
                if (sortSelect) sortSelect.value = 'name-asc';
                if (searchInput) searchInput.value = '';
                if (clearBtn) {
                    clearBtn.classList.add('hidden');
                    clearBtn.classList.remove('flex');
                }
                
                renderProducts();
            }
            
            lucide.createIcons();
        }
        
        // Dashboard Update
        async function updateDashboard() {
            const inStock = products.filter(p => p.quantity > 0);
            const expiring = inStock.filter(p => isExpiryWarning(p.next_expiry) && !isExpired(p.next_expiry));
            const expired = inStock.filter(p => isExpired(p.next_expiry));
            const totalQty = inStock.reduce((sum, p) => sum + p.quantity, 0);
            
            document.getElementById('dash-expiring').textContent = expiring.length;
            document.getElementById('dash-expired').textContent = expired.length;
            document.getElementById('dash-instock').textContent = inStock.length;
            document.getElementById('dash-total-items').textContent = inStock.length;
            
            // Tab Counts
            document.getElementById('tab-instock-count').textContent = inStock.length;
            document.getElementById('tab-all-count').textContent = products.length;
            
            // Shopping Count vom Server holen
            try {
                const res = await fetch(`${API_URL}?action=shopping_count`);
                const data = await res.json();
                document.getElementById('dash-shopping').textContent = data.count || 0;
                document.getElementById('tab-shopping-count').textContent = data.count || 0;
            } catch (e) {
                console.error('Shopping count error:', e);
            }
        }
        
        // Filtered List
        function showFilteredList(filter) {
            currentFilter = filter;
            const inStock = products.filter(p => p.quantity > 0);
            let filtered = [];
            let title = '';
            
            if (filter === 'expiring') {
                filtered = inStock.filter(p => isExpiryWarning(p.next_expiry) && !isExpired(p.next_expiry));
                title = 'Bald ablaufend (< 3 Tage)';
            } else if (filter === 'expired') {
                filtered = inStock.filter(p => isExpired(p.next_expiry));
                title = 'Abgelaufen';
            }
            
            document.getElementById('filtered-title').textContent = title;
            
            // Hide other views
            document.getElementById('dashboard-view').classList.add('hidden');
            document.getElementById('products-view').classList.add('hidden');
            document.getElementById('shopping-view').classList.add('hidden');
            document.getElementById('filtered-view').classList.remove('hidden');
            document.getElementById('view-toggle').classList.add('hidden');
            
            // Clear tab active states
            ['dashboard', 'instock', 'all', 'shopping'].forEach(t => {
                const btn = document.getElementById(`tab-${t}`);
                if (btn) btn.classList.remove('active');
            });
            
            renderFilteredList(filtered);
        }
        
        function renderFilteredList(items) {
            const container = document.getElementById('filtered-list');
            
            if (items.length === 0) {
                container.innerHTML = '<p class="text-center text-slate-400 py-8">Keine Artikel</p>';
                return;
            }
            
            container.innerHTML = items.map(p => {
                const img = p.custom_image || p.image_base64 || p.image_url || PLACEHOLDER;
                const exp = p.next_expiry ? formatDate(p.next_expiry) : '';
                const expired = isExpired(p.next_expiry);
                
                return `
                    <div class="bg-white rounded-xl border ${expired ? 'border-red-200' : 'border-amber-200'} p-3 flex items-center gap-3 cursor-pointer ${expired ? 'animate-pulse-slow' : ''}" onclick="openProductDetail('${p.id}')">
                        <div class="w-14 h-14 bg-slate-100 rounded-lg overflow-hidden flex-shrink-0">
                            <img src="${img}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="font-semibold text-slate-900 text-sm truncate">${p.name}</h3>
                            ${p.brand ? `<p class="text-xs text-slate-500 truncate">${p.brand}</p>` : ''}
                            <p class="text-xs font-bold ${expired ? 'text-red-600' : 'text-amber-600'} mt-0.5">MHD: ${exp}</p>
                        </div>
                        <div class="text-lg font-bold text-slate-900">${p.quantity}x</div>
                    </div>
                `;
            }).join('');
            
            lucide.createIcons();
        }
        
        // Mode - nur für Scanner relevant
        function setMode(mode) {
            currentMode = mode;
            scannerMode = mode;
        }
        
        function setScannerMode(mode) {
            scannerMode = mode;
            const a = document.getElementById('scanner-mode-add');
            const c = document.getElementById('scanner-mode-consume');
            
            // Reset
            a.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-white/20 text-white';
            c.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-white/20 text-white';
            
            // Set active
            if (mode === 'add') {
                a.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-indigo-600 text-white';
            } else if (mode === 'consume') {
                c.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-red-500 text-white';
            }
            lucide.createIcons();
        }
        
        // Products
        async function loadProducts() {
            document.getElementById('loading-state').classList.remove('hidden');
            document.getElementById('empty-state').classList.add('hidden');
            document.getElementById('products-grid').innerHTML = '';
            
            try {
                const r = await fetch(`${API_URL}?action=products`);
                const data = await r.json();
                products = Array.isArray(data) ? data : [];
                renderProducts();
            } catch (e) {
                console.error(e);
                showToast('Ladefehler', 'error');
                products = [];
                renderProducts();
            } finally {
                document.getElementById('loading-state').classList.add('hidden');
            }
        }
        
        // Prüft ob MHD kritisch ist (weniger als X Tage - konfigurierbar)
        function isExpiryWarning(dateStr) {
            if (!dateStr) return false;
            const expiry = new Date(dateStr);
            expiry.setHours(23, 59, 59, 999); // Ende des MHD-Tages
            const today = new Date();
            today.setHours(0, 0, 0, 0); // Anfang des Tages
            const diffMs = expiry - today;
            const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
            return diffDays >= 0 && diffDays <= expiryWarningDays; // Nutzt konfigurierbare Variable
        }
        
        function isExpired(dateStr) {
            if (!dateStr) return false;
            const expiry = new Date(dateStr);
            expiry.setHours(23, 59, 59, 999); // Ende des MHD-Tages
            const now = new Date();
            return expiry < now; // Abgelaufen wenn MHD-Tag komplett vorbei
        }
        
        function clearSearch() {
            document.getElementById('product-search').value = '';
            document.getElementById('clear-search-btn').classList.add('hidden');
            filterProducts();
            loadDashboardStats();
        }
        
        async function loadDashboardStats() {
            // Rezept-Favoriten Anzahl laden
            try {
                const res = await fetch(`${API_URL}?action=recipe_favorites`);
                const favorites = await res.json();
                const favCount = Array.isArray(favorites) ? favorites.length : 0;
                const favEl = document.getElementById('dash-recipe-favorites');
                if (favEl) favEl.textContent = favCount;
            } catch (e) {
                console.error('Load favorites count error:', e);
            }
            
            // Letzte 3 Rezepte aus dem Verlauf laden
            try {
                const res = await fetch(`${API_URL}?action=recipe_history&limit=3`);
                const history = await res.json();
                
                const section = document.getElementById('recent-recipes-section');
                const list = document.getElementById('recent-recipes-list');
                
                if (Array.isArray(history) && history.length > 0) {
                    section.classList.remove('hidden');
                    list.innerHTML = history.map(r => `
                        <button onclick="openRecentRecipe('${r.id}')" class="w-full bg-white rounded-xl p-3 border border-slate-200 hover:border-blue-300 hover:bg-blue-50/50 transition-all flex items-center gap-3 text-left">
                            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-100 to-blue-200 flex items-center justify-center flex-shrink-0">
                                <i data-lucide="chef-hat" class="w-5 h-5 text-blue-600"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-slate-900 text-sm truncate">${r.title || 'Rezept'}</p>
                                <p class="text-xs text-slate-500">${r.servings || 4} Portionen • ${r.difficulty || 'mittel'}</p>
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-400 flex-shrink-0"></i>
                        </button>
                    `).join('');
                    lucide.createIcons();
                } else {
                    section.classList.add('hidden');
                }
            } catch (e) {
                console.error('Load recent recipes error:', e);
            }
        }
        
        async function openRecentRecipe(recipeId) {
            try {
                const res = await fetch(`${API_URL}?action=recipes&id=${recipeId}`);
                const recipe = await res.json();
                
                if (recipe && recipe.id) {
                    openRecipeGenerator();
                    currentRecipe = recipe;
                    showRecipeResult(recipe);
                }
            } catch (e) {
                showToast('Rezept konnte nicht geladen werden', 'error');
            }
        }
        
        function filterProducts() {
            const searchInput = document.getElementById('product-search');
            const searchTerm = searchInput ? searchInput.value.toLowerCase().trim() : '';
            const sortValue = document.getElementById('product-sort')?.value || 'name-asc';
            const filterValue = document.getElementById('product-filter')?.value || '';
            
            // Clear-Button anzeigen/verstecken
            const clearBtn = document.getElementById('clear-search-btn');
            if (clearBtn) {
                if (searchTerm) {
                    clearBtn.classList.remove('hidden');
                    clearBtn.classList.add('flex');
                } else {
                    clearBtn.classList.add('hidden');
                    clearBtn.classList.remove('flex');
                }
            }
            
            renderProducts(searchTerm, sortValue, filterValue);
        }
        
        function renderProducts(searchTerm = '', sortValue = 'name-asc', filterValue = '') {
            const grid = document.getElementById('products-grid');
            const empty = document.getElementById('empty-state');
            
            // Filter basierend auf aktivem Tab
            let visible = [];
            if (activeTab === 'instock') {
                visible = products.filter(p => p.quantity > 0);
            } else if (activeTab === 'all') {
                visible = products;
            }
            
            // Suchfilter anwenden
            if (searchTerm) {
                visible = visible.filter(p => {
                    const name = (p.name || '').toLowerCase();
                    const brand = (p.brand || '').toLowerCase();
                    const categories = (p.categories || '').toLowerCase();
                    return name.includes(searchTerm) || brand.includes(searchTerm) || categories.includes(searchTerm);
                });
            }
            
            // Kategorie-Filter (vegan, vegetarisch, palmölfrei, allergenfrei)
            if (filterValue) {
                visible = visible.filter(p => {
                    const tags = (p.analysis_tags || '').toLowerCase();
                    const allergens = (p.allergens_tags || '').toLowerCase();
                    
                    // Ernährungs-Filter
                    if (filterValue === 'vegan') return tags.includes('en:vegan') && !tags.includes('en:non-vegan');
                    if (filterValue === 'vegetarian') return tags.includes('en:vegetarian') && !tags.includes('en:non-vegetarian');
                    if (filterValue === 'palm-oil-free') return tags.includes('palm-oil-free');
                    
                    // Allergen-Filter (NICHT enthalten)
                    if (filterValue === 'no-gluten') return !allergens.includes('gluten');
                    if (filterValue === 'no-milk') return !allergens.includes('milk') && !allergens.includes('lactose');
                    if (filterValue === 'no-eggs') return !allergens.includes('egg');
                    if (filterValue === 'no-nuts') return !allergens.includes('nut') && !allergens.includes('almond') && !allergens.includes('hazelnut') && !allergens.includes('walnut') && !allergens.includes('cashew') && !allergens.includes('pistachio');
                    if (filterValue === 'no-soy') return !allergens.includes('soy');
                    
                    return true;
                });
            }
            
            // Sortierung anwenden
            visible = [...visible].sort((a, b) => {
                switch (sortValue) {
                    case 'name-asc':
                        return (a.name || '').localeCompare(b.name || '');
                    case 'name-desc':
                        return (b.name || '').localeCompare(a.name || '');
                    case 'expiry-asc':
                        if (!a.next_expiry) return 1;
                        if (!b.next_expiry) return -1;
                        return new Date(a.next_expiry) - new Date(b.next_expiry);
                    case 'quantity-desc':
                        return b.quantity - a.quantity;
                    case 'quantity-asc':
                        return a.quantity - b.quantity;
                    default:
                        return 0;
                }
            });
            
            // Update Tab Counts & Dashboard
            updateDashboard();
            
            if (visible.length === 0) {
                grid.innerHTML = '';
                empty.classList.remove('hidden');
                
                if (activeTab === 'instock') {
                    document.getElementById('empty-icon').setAttribute('data-lucide', 'archive');
                    document.getElementById('empty-title').textContent = 'Kein Bestand';
                    document.getElementById('empty-text').textContent = 'Scanne einen Barcode';
                } else {
                    document.getElementById('empty-icon').setAttribute('data-lucide', 'database');
                    document.getElementById('empty-title').textContent = 'Keine Artikel';
                    document.getElementById('empty-text').textContent = 'Scanne oder erfasse Produkte';
                }
                lucide.createIcons();
                return;
            }
            
            empty.classList.add('hidden');
            
            // Liste oder Grid rendern
            if (viewMode === 'list') {
                grid.innerHTML = visible.map(p => renderProductListItem(p)).join('');
            } else {
                grid.innerHTML = visible.map(p => renderProductCard(p)).join('');
            }
            
            lucide.createIcons();
        }
        
        // Grid Card
        function renderProductCard(p) {
            const img = p.custom_image || p.image_url || PLACEHOLDER;
            const exp = p.next_expiry ? formatDate(p.next_expiry) : '';
            const expired = isExpired(p.next_expiry);
            const warning = isExpiryWarning(p.next_expiry);
            
            let borderClass = 'border-slate-100';
            if (expired && p.quantity > 0) borderClass = 'border-red-400 border-2';
            else if (warning && p.quantity > 0) borderClass = 'border-amber-400 border-2';
            
            let mhdBadge = '';
            if (exp && p.quantity > 0) {
                if (expired) {
                    mhdBadge = `<span class="absolute bottom-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-500 text-white animate-pulse-slow">⚠️ ${exp}</span>`;
                } else if (warning) {
                    mhdBadge = `<span class="absolute bottom-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-500 text-white">⚠️ ${exp}</span>`;
                } else {
                    mhdBadge = `<span class="absolute bottom-2 left-2 px-2 py-0.5 rounded-full text-[10px] bg-white/90 text-slate-600">${exp}</span>`;
                }
            }
            
            let qtyBadge = p.quantity > 0 
                ? `<span class="absolute top-2 right-2 px-2 py-0.5 rounded-full text-xs font-bold bg-indigo-600 text-white">${p.quantity}x</span>`
                : `<span class="absolute top-2 right-2 px-2 py-0.5 rounded-full text-xs font-medium bg-slate-200 text-slate-500">Leer</span>`;
            
            let shoppingBadge = p.shopping_qty > 0 
                ? `<span class="absolute top-2 left-2 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-white text-slate-800 border-2 border-emerald-500 shadow-sm">🛒${p.shopping_qty}</span>`
                : '';
            
            return `
                <div class="product-card bg-white rounded-xl shadow-sm border ${borderClass} overflow-hidden flex flex-col" data-product-id="${p.id}">
                    <div class="product-card-image h-24 bg-slate-100 relative cursor-pointer" onclick="openProductDetail('${p.id}')">
                        <img src="${img}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">
                        ${qtyBadge}${shoppingBadge}${mhdBadge}
                    </div>
                    <div class="product-card-content p-2.5 flex-1 flex flex-col">
                        <div class="flex-1 cursor-pointer" onclick="openProductDetail('${p.id}')">
                            <h3 class="font-semibold text-slate-900 text-sm leading-tight line-clamp-2">${p.name}</h3>
                            ${p.brand ? `<p class="text-xs text-slate-500 mt-0.5 truncate">${p.brand}</p>` : ''}
                        </div>
                        <div class="product-card-actions mt-2">
                            <button onclick="event.stopPropagation();openShoppingAddModal('${p.id}')" class="w-full py-1.5 text-xs font-medium bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center gap-1 hover:bg-emerald-100">
                                <i data-lucide="shopping-cart" class="w-3 h-3"></i> Einkaufen
                            </button>
                        </div>
                    </div>
                </div>
            `;
        }
        
        // List Item
        function renderProductListItem(p) {
            const img = p.custom_image || p.image_base64 || p.image_url || PLACEHOLDER;
            const exp = p.next_expiry ? formatDate(p.next_expiry) : '';
            const expired = isExpired(p.next_expiry);
            const warning = isExpiryWarning(p.next_expiry);
            
            let borderClass = 'border-slate-100';
            let mhdClass = 'text-slate-500';
            let pulseClass = '';
            
            if (expired && p.quantity > 0) {
                borderClass = 'border-l-4 border-l-red-500 border-slate-100';
                mhdClass = 'text-red-600 font-bold';
                pulseClass = 'animate-pulse-slow';
            } else if (warning && p.quantity > 0) {
                borderClass = 'border-l-4 border-l-amber-500 border-slate-100';
                mhdClass = 'text-amber-600 font-bold';
            }
            
            // Shopping Badge für List View
            let shoppingBadge = p.shopping_qty > 0 
                ? `<span class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-white text-slate-800 border-2 border-emerald-500 shadow-sm mr-1">🛒${p.shopping_qty}</span>`
                : '';
            
            return `
                <div class="product-card bg-white rounded-xl shadow-sm border ${borderClass} overflow-hidden flex items-center p-3 gap-3 ${pulseClass}" data-product-id="${p.id}">
                    <div class="product-card-image w-14 h-14 bg-slate-100 rounded-lg overflow-hidden flex-shrink-0 cursor-pointer relative" onclick="openProductDetail('${p.id}')">
                        <img src="${img}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">
                    </div>
                    <div class="product-card-content flex-1 min-w-0 cursor-pointer" onclick="openProductDetail('${p.id}')">
                        <h3 class="font-semibold text-slate-900 text-sm truncate">${p.name}</h3>
                        ${p.brand ? `<p class="text-xs text-slate-500 truncate">${p.brand}</p>` : ''}
                        ${exp && p.quantity > 0 ? `<p class="text-[10px] ${mhdClass} mt-0.5">MHD: ${exp}</p>` : ''}
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        ${shoppingBadge}
                        ${p.quantity > 0 
                            ? `<span class="text-lg font-bold text-indigo-600">${p.quantity}x</span>`
                            : `<span class="text-sm text-slate-400">Leer</span>`
                        }
                        <button onclick="event.stopPropagation();openShoppingAddModal('${p.id}')" class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center hover:bg-emerald-100">
                            <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>
            `;
        }
        
        // Scanner
        // Standard-Kamera: Immer Rückkamera
        let currentFacingMode = 'environment';
        
        function openScanner(fromScannerButton = true) {
            openedFromScanner = fromScannerButton;
            setScannerMode(currentMode);
            document.getElementById('scanner-modal').classList.remove('hidden');
            startScannerWithCamera(currentFacingMode);
        }
        
        function startScannerWithCamera(facingMode) {
            if (html5QrCode) { 
                html5QrCode.stop().catch(() => {}); 
            }
            html5QrCode = new Html5Qrcode('qr-reader');
            
            // Verbesserte Scanner-Konfiguration für bessere Barcode-Erkennung auf allen Geräten
            const config = {
                fps: 10, // Niedriger für ältere Geräte
                qrbox: { width: 280, height: 140 }, // Etwas kleiner für besseren Fokus
                aspectRatio: 1.5,
                disableFlip: false, // Ermöglicht gespiegelte Barcodes
                experimentalFeatures: {
                    useBarCodeDetectorIfSupported: true // Nutzt native API wenn verfügbar
                },
                formatsToSupport: [
                    Html5QrcodeSupportedFormats.EAN_13,
                    Html5QrcodeSupportedFormats.EAN_8,
                    Html5QrcodeSupportedFormats.UPC_A,
                    Html5QrcodeSupportedFormats.UPC_E,
                    Html5QrcodeSupportedFormats.CODE_128,
                    Html5QrcodeSupportedFormats.CODE_39,
                    Html5QrcodeSupportedFormats.CODE_93,
                    Html5QrcodeSupportedFormats.ITF,
                    Html5QrcodeSupportedFormats.QR_CODE,
                    Html5QrcodeSupportedFormats.DATA_MATRIX,
                    Html5QrcodeSupportedFormats.CODABAR
                ]
            };
            
            // Versuche erst mit spezifischer Kamera, dann mit Fallback
            html5QrCode.start(
                { facingMode: facingMode }, 
                config, 
                onScanSuccess, 
                () => {} // Ignoriere nicht-erkannte Frames
            ).catch(e => { 
                console.error('Scanner Error with facingMode:', e);
                // Fallback: Versuche ohne spezifische facingMode
                tryFallbackCamera(config);
            });
        }
        
        // Fallback-Kamera wenn Hauptmethode fehlschlägt
        async function tryFallbackCamera(config) {
            try {
                // Liste alle Kameras auf
                const cameras = await Html5Qrcode.getCameras();
                console.log('Available cameras:', cameras);
                
                if (cameras && cameras.length > 0) {
                    // Wähle immer die erste Kamera (Rückkamera)
                    const camera = cameras[0];
                    
                    html5QrCode.start(
                        camera.id,
                        config,
                        onScanSuccess,
                        () => {}
                    ).catch(e2 => {
                        console.error('Fallback camera also failed:', e2);
                        showToast('Kamera nicht verfügbar', 'error');
                        closeScanner();
                    });
                } else {
                    showToast('Keine Kamera gefunden', 'error');
                    closeScanner();
                }
            } catch (e) {
                console.error('Camera enumeration failed:', e);
                showToast('Kamera-Zugriff verweigert', 'error');
                closeScanner();
            }
        }
        
        function switchCamera() {
            currentFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
            startScannerWithCamera(currentFacingMode);
            showToast(currentFacingMode === 'environment' ? 'Rückkamera' : 'Frontkamera', 'success');
        }
        
        function closeScanner() {
            if (html5QrCode) { html5QrCode.stop().catch(() => {}); html5QrCode = null; }
            document.getElementById('scanner-modal').classList.add('hidden');
        }
        
        // Manuelle Barcode-Eingabe
        function openManualBarcodeInput() {
            closeScanner();
            document.getElementById('manual-barcode-input').value = '';
            document.getElementById('manual-barcode-modal').classList.remove('hidden');
            setTimeout(() => document.getElementById('manual-barcode-input').focus(), 100);
            lucide.createIcons();
        }
        
        function closeManualBarcodeInput() {
            document.getElementById('manual-barcode-modal').classList.add('hidden');
        }
        
        async function submitManualBarcode() {
            const barcode = document.getElementById('manual-barcode-input').value.trim();
            if (!barcode) {
                showToast('Bitte Barcode eingeben', 'error');
                return;
            }
            closeManualBarcodeInput();
            // Gleiche Logik wie onScanSuccess
            onScanSuccess(barcode);
        }
        
        async function onScanSuccess(barcode) {
            closeScanner();
            if (navigator.vibrate) navigator.vibrate(100);
            showToast('Suche...', 'loading');
            
            // Auto-Sync im Hintergrund nach Scan (wenn aktiviert)
            if (autoSyncEnabled && !isSyncing) {
                setTimeout(() => checkAndRunAutoSync(), 500);
            }
            
            try {
                const dbRes = await fetch(`${API_URL}?action=barcode&code=${barcode}`);
                const dbData = await dbRes.json();
                
                if (dbData.found) {
                    hideToast();
                    if (scannerMode === 'add') {
                        openAddModal(dbData);
                    } else if (scannerMode === 'consume') {
                        if (dbData.inventory?.length > 0) openConsumeModal(dbData);
                        else { showToast('Kein Bestand', 'error'); setTimeout(openScanner, 1500); }
                    }
                    return;
                }
                
                const extRes = await fetch(`${API_URL}?action=lookup&code=${barcode}`);
                const extData = await extRes.json();
                hideToast();
                
                if (extData.found) {
                    if (scannerMode === 'add') openAddModal({ ...extData, isNew: true });
                    else { showToast('Nicht im Bestand', 'info'); setTimeout(openScanner, 1500); }
                } else {
                    if (scannerMode === 'add') openAddModal({ barcode, isNew: true, name: '', brand: '' });
                    else { showToast('Nicht gefunden', 'error'); setTimeout(openScanner, 1500); }
                }
            } catch (e) {
                console.error(e);
                hideToast();
                showToast('Fehler', 'error');
            }
        }
        
        // Add Modal
        function openAddModal(data) {
            pendingProduct = data;
            pendingQty = 1;
            pendingExpiry = null;
            
            const img = data.custom_image || data.image_url || PLACEHOLDER;
            
            document.getElementById('add-modal-content').innerHTML = `
                <div class="flex gap-4 items-start mb-4">
                    <div class="w-20 h-20 rounded-xl bg-slate-100 overflow-hidden flex-shrink-0">
                        <img src="${img}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">
                    </div>
                    <div class="flex-1">
                        <input type="text" id="add-name" value="${data.name || ''}" placeholder="Produktname *" 
                               class="w-full text-lg font-bold bg-transparent border-b-2 border-slate-200 focus:border-indigo-500 outline-none pb-1 mb-2">
                        <input type="text" id="add-brand" value="${data.brand || ''}" placeholder="Marke" 
                               class="w-full text-sm text-slate-500 bg-transparent border-b border-slate-100 outline-none pb-1">
                    </div>
                </div>
                
                <div class="bg-amber-50 rounded-xl p-4 mb-4">
                    <p class="text-sm font-semibold text-amber-800 mb-3">📅 MHD</p>
                    <div class="grid grid-cols-3 gap-2 mb-3">
                        <button type="button" onclick="openOcrCamera()" class="py-3 bg-amber-100 text-amber-700 rounded-xl font-medium text-sm flex flex-col items-center gap-1">
                            <i data-lucide="scan-line" class="w-5 h-5"></i>OCR
                        </button>
                        <button type="button" onclick="document.getElementById('date-picker').showPicker()" class="py-3 bg-blue-100 text-blue-700 rounded-xl font-medium text-sm flex flex-col items-center gap-1 relative">
                            <i data-lucide="calendar" class="w-5 h-5"></i>Datum
                            <input type="date" id="date-picker" class="absolute inset-0 opacity-0" onchange="onDatePicked(this.value)">
                        </button>
                        <button type="button" onclick="setNoMhd()" class="py-3 bg-slate-100 text-slate-600 rounded-xl font-medium text-sm flex flex-col items-center gap-1">
                            <i data-lucide="x" class="w-5 h-5"></i>Ohne
                        </button>
                    </div>
                    <div id="mhd-display" class="bg-white rounded-lg p-3 text-center border border-amber-200">
                        <span class="text-slate-400">Nicht gewählt</span>
                    </div>
                </div>
                
                <div class="bg-indigo-50 rounded-xl p-4 mb-4">
                    <p class="text-sm font-semibold text-indigo-800 mb-3">📦 Anzahl</p>
                    <div class="flex items-center justify-center gap-4">
                        <button type="button" onclick="adjQty(-1)" class="w-12 h-12 rounded-xl bg-white border border-indigo-200 text-indigo-600 flex items-center justify-center text-2xl font-bold">−</button>
                        <input type="number" id="add-qty" value="1" min="1" class="w-20 text-center text-2xl font-bold bg-white border-2 border-indigo-200 rounded-xl py-2" onchange="pendingQty=Math.max(1,+this.value||1);this.value=pendingQty">
                        <button type="button" onclick="adjQty(1)" class="w-12 h-12 rounded-xl bg-indigo-600 text-white flex items-center justify-center text-2xl font-bold">+</button>
                    </div>
                </div>
                
                <button onclick="saveProduct()" class="w-full py-4 bg-green-600 text-white rounded-xl font-bold text-lg">
                    ✓ Einbuchen
                </button>
            `;
            
            document.getElementById('add-modal').classList.remove('hidden');
            lucide.createIcons();
        }
        
        function closeAddModal() { document.getElementById('add-modal').classList.add('hidden'); }
        
        function adjQty(d) {
            pendingQty = Math.max(1, pendingQty + d);
            document.getElementById('add-qty').value = pendingQty;
        }
        
        function onDatePicked(val) {
            if (val) {
                pendingExpiry = val;
                document.getElementById('mhd-display').innerHTML = `<span class="text-lg font-bold text-green-600">${formatDate(val)}</span>`;
                showToast('Datum gewählt', 'success');
            }
        }
        
        function setNoMhd() {
            pendingExpiry = null;
            document.getElementById('mhd-display').innerHTML = `<span class="text-slate-600 font-medium">Ohne MHD</span>`;
            showToast('Ohne MHD', 'info');
        }
        
        async function saveProduct() {
            const name = document.getElementById('add-name').value.trim();
            const brand = document.getElementById('add-brand').value.trim();
            
            if (!name) { showToast('Name fehlt', 'error'); return; }
            
            showToast('Speichere...', 'loading');
            
            try {
                let productId = pendingProduct.id;
                
                if (pendingProduct.isNew || !productId) {
                    // Analysis Tags für Suche vorbereiten
                    let analysisTags = '';
                    if (pendingProduct.ingredients_analysis_tags && Array.isArray(pendingProduct.ingredients_analysis_tags)) {
                        analysisTags = pendingProduct.ingredients_analysis_tags.join(',');
                    }
                    
                    const pRes = await fetch(`${API_URL}?action=products`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            barcode: pendingProduct.barcode || null,
                            name: name,
                            brand: brand || null,
                            image_url: pendingProduct.image_url || null,
                            nutri_score: pendingProduct.nutri_score || null,
                            eco_score: pendingProduct.eco_score || null,
                            nova_group: pendingProduct.nova_group || null,
                            categories: pendingProduct.categories || null,
                            analysis_tags: analysisTags || null,
                            is_food: pendingProduct.is_food !== false ? 1 : 0,
                            api_source: pendingProduct.source || null
                        })
                    });
                    
                    const pData = await pRes.json();
                    
                    if (pData.error === 'exists') productId = pData.product_id;
                    else if (pData.id) productId = pData.id;
                    else throw new Error(pData.error || 'Produkt konnte nicht angelegt werden');
                }
                
                // Inventory hinzufügen (API aktualisiert automatisch die Einkaufsliste)
                const iRes = await fetch(`${API_URL}?action=inventory`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        product_id: productId,
                        quantity: pendingQty,
                        expiry_date: pendingExpiry
                    })
                });
                
                const iData = await iRes.json();
                if (!iData.success) throw new Error(iData.error || 'Bestand konnte nicht gespeichert werden');
                
                hideToast();
                showToast(`${name} eingebucht!`, 'success');
                closeAddModal();
                
                // Aktualisiere Produkte und Dashboard
                await loadProducts();
                await updateDashboard();
                
                // Einkaufsliste immer aktualisieren (um fulfilled-Status zu zeigen)
                await loadShoppingList();
                
                // Wenn wir aktuell im Shopping-Tab sind, re-render
                if (activeTab === 'shopping') {
                    renderShoppingList();
                }
                
                // Nur Scanner öffnen wenn über Scanner-Button aufgerufen
                if (openedFromScanner) {
                    setTimeout(() => openScanner(true), 1200);
                }
                
            } catch (e) {
                console.error('Save error:', e);
                hideToast();
                showToast(e.message || 'Speicherfehler', 'error');
            }
        }
        
        // Consume Modal
        function openConsumeModal(data) {
            pendingProduct = data;
            const img = data.custom_image || data.image_url || PLACEHOLDER;
            const inv = data.inventory || [];
            
            let html = `
                <div class="flex gap-4 items-center mb-4">
                    <div class="w-16 h-16 rounded-xl bg-slate-100 overflow-hidden">
                        <img src="${img}" class="w-full h-full object-cover">
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900">${data.name}</h3>
                        ${data.brand ? `<p class="text-sm text-slate-500">${data.brand}</p>` : ''}
                        <p class="text-sm text-indigo-600 font-medium">Gesamt: ${data.quantity}x</p>
                    </div>
                </div>
                <p class="text-sm text-slate-600 mb-3">Wähle MHD zum Verbrauchen:</p>
            `;
            
            if (inv.length === 0) {
                html += '<p class="text-center text-slate-400 py-8">Kein Bestand</p>';
            } else {
                html += '<div class="space-y-3">';
                inv.forEach(i => {
                    const exp = i.expiry_date ? formatDate(i.expiry_date) : 'Ohne MHD';
                    const expired = i.expiry_date && new Date(i.expiry_date) < new Date();
                    html += `
                        <div class="p-4 rounded-xl border ${expired ? 'bg-red-50 border-red-200' : 'bg-white border-slate-200'} cursor-pointer active:scale-[0.98]" onclick="consumeItem('${i.id}','${data.name}')">
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="font-bold ${expired ? 'text-red-600' : ''}">${exp}</p>
                                    <p class="text-sm text-slate-500">${i.quantity}x</p>
                                </div>
                                <div class="w-10 h-10 rounded-full ${expired ? 'bg-red-100' : 'bg-red-50'} flex items-center justify-center">
                                    <i data-lucide="minus" class="w-5 h-5 text-red-500"></i>
                                </div>
                            </div>
                        </div>
                    `;
                });
                html += '</div>';
            }
            
            document.getElementById('consume-modal-content').innerHTML = html;
            document.getElementById('consume-modal').classList.remove('hidden');
            lucide.createIcons();
        }
        
        function closeConsumeModal() { document.getElementById('consume-modal').classList.add('hidden'); }
        
        async function consumeItem(id, name) {
            showToast('Verbrauche...', 'loading');
            try {
                await fetch(`${API_URL}?action=inventory&id=${id}&quantity=1`, { method: 'DELETE' });
                hideToast();
                showToast(`${name} verbraucht`, 'success');
                closeConsumeModal();
                loadProducts();
                // KEIN Scanner öffnen - nur wenn über Scanner-Button aufgerufen
                if (openedFromScanner) {
                    setTimeout(() => openScanner(true), 1200);
                }
            } catch (e) {
                hideToast();
                showToast('Fehler', 'error');
            }
        }
        
        // ============ OCR FUNKTIONEN - NUR MITTLERER AUSSCHNITT ============
        let ocrFacingMode = 'environment';
        
        async function openOcrCamera() {
            ocrFacingMode = 'environment';
            await startOcrCameraWithMode(ocrFacingMode);
        }
        
        async function startOcrCameraWithMode(facingMode) {
            try {
                if (ocrStream) { 
                    ocrStream.getTracks().forEach(t => t.stop()); 
                }
                ocrStream = await navigator.mediaDevices.getUserMedia({ 
                    video: { 
                        facingMode: facingMode, 
                        width: { ideal: 1280 }, 
                        height: { ideal: 720 } 
                    } 
                });
                document.getElementById('ocr-video').srcObject = ocrStream;
                document.getElementById('ocr-modal').classList.remove('hidden');
                lucide.createIcons();
            } catch (e) {
                showToast('Kamera Fehler', 'error');
            }
        }
        
        async function switchOcrCamera() {
            ocrFacingMode = ocrFacingMode === 'environment' ? 'user' : 'environment';
            await startOcrCameraWithMode(ocrFacingMode);
            showToast(ocrFacingMode === 'environment' ? 'Rückkamera' : 'Frontkamera', 'success');
        }
        
        function closeOcrCamera() {
            if (ocrStream) { 
                ocrStream.getTracks().forEach(t => t.stop()); 
                ocrStream = null; 
            }
            document.getElementById('ocr-modal').classList.add('hidden');
        }
        
        async function captureOcr() {
            const video = document.getElementById('ocr-video');
            const canvas = document.getElementById('ocr-canvas');
            const ctx = canvas.getContext('2d');
            
            const vw = video.videoWidth;
            const vh = video.videoHeight;
            
            // NUR MITTLEREN AUSSCHNITT - etwas größer für bessere Erkennung
            const cropWidth = Math.floor(vw * 0.8);   // 80% der Breite
            const cropHeight = Math.floor(vh * 0.2); // 20% der Höhe
            const cropX = Math.floor((vw - cropWidth) / 2);
            const cropY = Math.floor((vh - cropHeight) / 2);
            
            // Canvas größer für bessere OCR-Qualität
            const scale = 2; // Vergrößern für bessere Erkennung
            canvas.width = cropWidth * scale;
            canvas.height = cropHeight * scale;
            
            // Weißer Hintergrund
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Ausschnitt zeichnen und skalieren
            ctx.drawImage(video, cropX, cropY, cropWidth, cropHeight, 0, 0, canvas.width, canvas.height);
            
            // BILDVERARBEITUNG: Kontrast erhöhen und in Graustufen
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            
            for (let i = 0; i < data.length; i += 4) {
                // Graustufen
                const gray = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
                
                // Kontrast + Threshold (Binarisierung)
                // Pixel unter 140 werden schwarz, darüber weiß
                const val = gray < 140 ? 0 : 255;
                
                data[i] = val;     // R
                data[i+1] = val;   // G
                data[i+2] = val;   // B
            }
            
            ctx.putImageData(imageData, 0, 0);
            
            const processedImage = canvas.toDataURL('image/png');
            
            closeOcrCamera();
            document.getElementById('ocr-processing').classList.remove('hidden');
            
            try {
                console.log(`Ausschnitt: ${canvas.width}x${canvas.height}`);
                
                // Worker mit Konfiguration erstellen
                const worker = await Tesseract.createWorker('eng', 1, {
                    logger: m => {
                        if (m.status === 'recognizing text') {
                            document.getElementById('ocr-progress').textContent = Math.round(m.progress * 100) + '%';
                        }
                    }
                });
                
                // NUR ZAHLEN UND TRENNZEICHEN ERLAUBEN
                await worker.setParameters({
                    tessedit_char_whitelist: '0123456789./-',
                    tessedit_pageseg_mode: '7', // Single line
                });
                
                const result = await worker.recognize(processedImage);
                await worker.terminate();
                
                const rawText = result.data.text.trim();
                console.log('OCR Raw:', rawText);
                
                // Datum extrahieren
                const date = findDateInText(rawText);
                
                document.getElementById('ocr-processing').classList.add('hidden');
                
                // Debug anzeigen
                showOcrDebug(processedImage, rawText, date);
                
            } catch (e) {
                console.error('OCR Error:', e);
                document.getElementById('ocr-processing').classList.add('hidden');
                showToast('OCR Fehler', 'error');
            }
        }
        
        // Einfache und robuste Datumsextraktion
        function findDateInText(text) {
            console.log('Suche Datum in:', text);
            
            // Text bereinigen
            let clean = text
                .replace(/[oO]/g, '0')      // O -> 0
                .replace(/[lI|!]/g, '1')    // l, I -> 1
                .replace(/[sS]/g, '5')      // S -> 5
                .replace(/[zZ]/g, '2')      // Z -> 2
                .replace(/[gG]/g, '9')      // G -> 9
                .replace(/[bB]/g, '8')      // B -> 8
                .replace(/[\n\r]/g, ' ')    // Newlines -> Space
                .replace(/\s+/g, '')        // ALLE Leerzeichen entfernen!
                .trim();
            
            console.log('Bereinigt:', clean);
            
            // ============ MUSTER IN PRIORITÄTSREIHENFOLGE ============
            
            // 1. DD.MM.YYYY (z.B. 12.05.2026)
            let match = clean.match(/(\d{1,2})\.(\d{1,2})\.(20\d{2})/);
            if (match) return buildDate(match[1], match[2], match[3]);
            
            // 2. DD/MM/YYYY
            match = clean.match(/(\d{1,2})\/(\d{1,2})\/(20\d{2})/);
            if (match) return buildDate(match[1], match[2], match[3]);
            
            // 3. DD-MM-YYYY
            match = clean.match(/(\d{1,2})-(\d{1,2})-(20\d{2})/);
            if (match) return buildDate(match[1], match[2], match[3]);
            
            // 4. DD.MM.YY (z.B. 12.05.26)
            match = clean.match(/(\d{1,2})\.(\d{1,2})\.(\d{2})\b/);
            if (match) return buildDate(match[1], match[2], match[3]);
            
            // 5. DD/MM/YY
            match = clean.match(/(\d{1,2})\/(\d{1,2})\/(\d{2})\b/);
            if (match) return buildDate(match[1], match[2], match[3]);
            
            // 6. DD-MM-YY
            match = clean.match(/(\d{1,2})-(\d{1,2})-(\d{2})\b/);
            if (match) return buildDate(match[1], match[2], match[3]);
            
            // 7. MM/YYYY (z.B. 10/2028) -> 01.MM.YYYY
            match = clean.match(/(\d{1,2})\/(20\d{2})/);
            if (match) return buildDate('1', match[1], match[2]);
            
            // 8. MM/YY (z.B. 10/28) -> 01.MM.20YY
            match = clean.match(/(\d{1,2})\/(\d{2})\b/);
            if (match) return buildDate('1', match[1], match[2]);
            
            // 9. MM.YYYY (z.B. 10.2028) -> 01.MM.YYYY
            match = clean.match(/(\d{1,2})\.(20\d{2})/);
            if (match) return buildDate('1', match[1], match[2]);
            
            // 10. MM.YY (z.B. 10.28) -> 01.MM.20YY
            match = clean.match(/(\d{1,2})\.(\d{2})\b/);
            if (match) return buildDate('1', match[1], match[2]);
            
            // 11. MM-YYYY -> 01.MM.YYYY
            match = clean.match(/(\d{1,2})-(20\d{2})/);
            if (match) return buildDate('1', match[1], match[2]);
            
            // 12. MM-YY -> 01.MM.20YY
            match = clean.match(/(\d{1,2})-(\d{2})\b/);
            if (match) return buildDate('1', match[1], match[2]);
            
            // 13. DDMMYYYY ohne Trenner (z.B. 12052026)
            match = clean.match(/(\d{2})(\d{2})(20\d{2})/);
            if (match) return buildDate(match[1], match[2], match[3]);
            
            // 14. DDMMYY ohne Trenner (z.B. 120526)
            match = clean.match(/^(\d{2})(\d{2})(\d{2})$/);
            if (match) return buildDate(match[1], match[2], match[3]);
            
            // 15. MMYYYY ohne Trenner (z.B. 102028)
            match = clean.match(/^(\d{2})(20\d{2})$/);
            if (match) return buildDate('1', match[1], match[2]);
            
            console.log('Kein Datum gefunden');
            return null;
        }
        
        // Hilfsfunktion zum Datum-Bauen mit Validierung
        function buildDate(dayStr, monthStr, yearStr) {
            let day = parseInt(dayStr);
            let month = parseInt(monthStr);
            let year = parseInt(yearStr);
            
            // Jahr korrigieren (YY -> YYYY)
            if (year < 100) {
                year = year < 50 ? 2000 + year : 1900 + year;
            }
            
            // Tag/Monat tauschen wenn nötig
            if (month > 12 && day <= 12) {
                [day, month] = [month, day];
            }
            
            // Validieren
            if (month >= 1 && month <= 12 && day >= 1 && day <= 31 && year >= 2024 && year <= 2040) {
                const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                console.log('Gefunden:', dateStr);
                return dateStr;
            }
            
            return null;
        }
        
        function showOcrDebug(imgData, text, date) {
            document.getElementById('ocr-debug-image').innerHTML = `<img src="${imgData}" class="w-full border-2 border-amber-400 rounded-xl">`;
            document.getElementById('ocr-debug-text').textContent = text || '(Kein Text erkannt)';
            
            // Zahlengruppen-Anzeige entfernen, vereinfachen
            document.getElementById('ocr-debug-numbers').textContent = '';
            
            if (date) {
                document.getElementById('ocr-debug-date').textContent = formatDate(date);
                document.getElementById('ocr-debug-date').className = 'text-green-400 font-mono text-xl';
                document.getElementById('ocr-use-date-btn').classList.remove('hidden');
                debugFoundDate = date;
            } else {
                document.getElementById('ocr-debug-date').textContent = '(Kein gültiges Datum)';
                document.getElementById('ocr-debug-date').className = 'text-red-400 font-mono text-xl';
                document.getElementById('ocr-use-date-btn').classList.add('hidden');
                debugFoundDate = null;
            }
            
            document.getElementById('ocr-debug').classList.remove('hidden');
        }
        
        function closeOcrDebug() {
            document.getElementById('ocr-debug').classList.add('hidden');
        }
        
        function useDebugDate() {
            if (debugFoundDate) {
                pendingExpiry = debugFoundDate;
                document.getElementById('mhd-display').innerHTML = `<span class="text-lg font-bold text-green-600">${formatDate(debugFoundDate)}</span>`;
                showToast('Datum übernommen', 'success');
            }
            closeOcrDebug();
        }
        
        // Manuelle Datumseingabe
        function openManualDateEntry() {
            closeOcrDebug();
            document.getElementById('manual-day').value = '';
            document.getElementById('manual-month').value = '';
            document.getElementById('manual-year').value = new Date().getFullYear();
            document.getElementById('manual-date-modal').classList.remove('hidden');
        }
        
        function closeManualDateModal() {
            document.getElementById('manual-date-modal').classList.add('hidden');
        }
        
        function applyManualDate() {
            const day = parseInt(document.getElementById('manual-day').value) || 1;
            const month = parseInt(document.getElementById('manual-month').value) || 1;
            const year = parseInt(document.getElementById('manual-year').value) || 2025;
            
            if (month < 1 || month > 12 || day < 1 || day > 31) {
                showToast('Ungültiges Datum', 'error');
                return;
            }
            
            pendingExpiry = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
            document.getElementById('mhd-display').innerHTML = `<span class="text-lg font-bold text-green-600">${formatDate(pendingExpiry)}</span>`;
            showToast('Datum gesetzt', 'success');
            closeManualDateModal();
        }
        
        // ============ END OCR ============
        
        // ============ CUSTOM PHOTO FUNKTIONEN ============
        let customPhotoStream = null;
        let customPhotoProductId = null;
        let customPhotoData = null;
        
        let customPhotoFacingMode = 'environment';
        
        async function openCustomPhotoCamera(productId) {
            customPhotoProductId = productId;
            customPhotoFacingMode = 'environment';
            await startCustomPhotoCameraWithMode(customPhotoFacingMode);
        }
        
        async function startCustomPhotoCameraWithMode(facingMode) {
            try {
                if (customPhotoStream) { 
                    customPhotoStream.getTracks().forEach(t => t.stop()); 
                }
                customPhotoStream = await navigator.mediaDevices.getUserMedia({ 
                    video: { 
                        facingMode: facingMode, 
                        width: { ideal: 1280 }, 
                        height: { ideal: 1280 } 
                    } 
                });
                document.getElementById('custom-photo-video').srcObject = customPhotoStream;
                document.getElementById('custom-photo-modal').classList.remove('hidden');
                lucide.createIcons();
            } catch (e) {
                showToast('Kamera Fehler', 'error');
            }
        }
        
        async function switchCustomPhotoCamera() {
            customPhotoFacingMode = customPhotoFacingMode === 'environment' ? 'user' : 'environment';
            await startCustomPhotoCameraWithMode(customPhotoFacingMode);
            showToast(customPhotoFacingMode === 'environment' ? 'Rückkamera' : 'Frontkamera', 'success');
        }
        
        function closeCustomPhotoCamera() {
            if (customPhotoStream) { 
                customPhotoStream.getTracks().forEach(t => t.stop()); 
                customPhotoStream = null; 
            }
            document.getElementById('custom-photo-modal').classList.add('hidden');
        }
        
        function captureCustomPhoto() {
            const video = document.getElementById('custom-photo-video');
            const canvas = document.getElementById('custom-photo-canvas');
            const ctx = canvas.getContext('2d');
            
            // Quadratisches Bild erstellen
            const size = Math.min(video.videoWidth, video.videoHeight);
            const offsetX = (video.videoWidth - size) / 2;
            const offsetY = (video.videoHeight - size) / 2;
            
            canvas.width = 600;  // Gute Qualität, aber nicht zu groß für Base64
            canvas.height = 600;
            
            ctx.drawImage(video, offsetX, offsetY, size, size, 0, 0, 600, 600);
            
            customPhotoData = canvas.toDataURL('image/jpeg', 0.8);
            
            closeCustomPhotoCamera();
            
            // Preview anzeigen
            document.getElementById('custom-photo-preview-img').innerHTML = `<img src="${customPhotoData}" class="w-full">`;
            document.getElementById('custom-photo-preview').classList.remove('hidden');
            lucide.createIcons();
        }
        
        function retakeCustomPhoto() {
            document.getElementById('custom-photo-preview').classList.add('hidden');
            openCustomPhotoCamera(customPhotoProductId);
        }
        
        async function saveCustomPhoto() {
            if (!customPhotoData || !customPhotoProductId) return;
            
            showToast('Speichere Foto...', 'loading');
            
            try {
                const response = await fetch(`${API_URL}?action=custom_photo&id=${customPhotoProductId}`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ image: customPhotoData })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    hideToast();
                    showToast('Foto gespeichert!', 'success');
                    document.getElementById('custom-photo-preview').classList.add('hidden');
                    
                    // Produktliste aktualisieren und Detail-Modal schließen/neu öffnen
                    await loadProducts();
                    closeDetailModal();
                    
                    // Detail-Modal mit neuem Bild wieder öffnen
                    setTimeout(() => openProductDetail(customPhotoProductId), 500);
                } else {
                    throw new Error(data.error || 'Speichern fehlgeschlagen');
                }
            } catch (e) {
                hideToast();
                showToast(e.message || 'Fehler beim Speichern', 'error');
            }
            
            customPhotoData = null;
        }
        // ============ END CUSTOM PHOTO ============
        
        // Detail - Erweiterte Produktansicht
        async function openProductDetail(id) {
            const p = products.find(x => x.id === id);
            if (!p) return;
            
            // Zeige erstmal Basis-Infos
            showDetailBasic(p);
            
            // Lade erweiterte Daten - nutze lokale Daten wenn vorhanden (last_sync)
            if (p.last_sync && p.analysis_tags) {
                // Lokale Daten vorhanden - zeige diese sofort
                renderExtendedDataFromLocal(p);
            } else if (p.barcode) {
                // Lade von API und speichere lokal
                fetchExtendedProductData(p.barcode, p);
            }
        }
        
        // Zeige erweiterte Daten aus lokaler DB
        function renderExtendedDataFromLocal(p) {
            const container = document.getElementById('extended-data');
            if (!container) return;
            
            let html = '';
            
            // Analyse (Vegetarisch, Vegan, etc.)
            if (p.analysis_tags) {
                const tags = p.analysis_tags.split(',');
                const analysis = [];
                
                tags.forEach(tag => {
                    const t = tag.toLowerCase().trim();
                    if (t.includes('vegan') && !t.includes('non')) {
                        analysis.push({ label: 'Vegan', icon: '🌱', positive: t.includes('en:vegan') });
                    }
                    if (t.includes('vegetarian') && !t.includes('non')) {
                        analysis.push({ label: 'Vegetarisch', icon: '🥬', positive: t.includes('en:vegetarian') });
                    }
                    if (t.includes('palm-oil-free')) {
                        analysis.push({ label: 'Palmölfrei', icon: '🌴', positive: true });
                    }
                    if (t.includes('palm-oil') && !t.includes('free')) {
                        analysis.push({ label: 'Enthält Palmöl', icon: '🌴', positive: false });
                    }
                });
                
                if (analysis.length > 0) {
                    html += `
                        <div class="bg-slate-50 rounded-2xl p-4 mb-4">
                            <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                                <span class="w-6 h-6 bg-purple-100 rounded-lg flex items-center justify-center">🔬</span>
                                Analyse der Inhaltsstoffe
                            </h3>
                            <div class="flex flex-wrap gap-2">`;
                    analysis.forEach(a => {
                        const color = a.positive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700';
                        const icon = a.positive ? '✓' : '✗';
                        html += `<span class="px-3 py-1.5 ${color} rounded-full text-xs font-medium">${icon} ${a.label}</span>`;
                    });
                    html += '</div></div>';
                }
            }
            
            // Kategorien
            if (p.categories) {
                const cats = p.categories.split(',').map(c => translateCategory(c.trim())).filter(c => c.length > 0).slice(0, 8);
                if (cats.length > 0) {
                    html += `
                        <div class="bg-slate-50 rounded-2xl p-4 mb-4">
                            <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                                <span class="w-6 h-6 bg-blue-100 rounded-lg flex items-center justify-center">📂</span>
                                Kategorien
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                ${cats.map(c => `<span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">${c}</span>`).join('')}
                            </div>
                        </div>
                    `;
                }
            }
            
            // Nährwerte MIT BALKEN
            if (p.energy_kcal || p.fat || p.sugars || p.proteins) {
                html += `
                    <div class="bg-slate-50 rounded-2xl p-4 mb-4">
                        <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 bg-orange-100 rounded-lg flex items-center justify-center">📊</span>
                            Nährwerte <span class="text-xs font-normal text-slate-400">pro 100g</span>
                        </h3>
                        <div class="space-y-3">
                            ${renderNutrientRow('Energie', p.energy_kcal, 'kcal', 200, '🔥')}
                            ${renderNutrientRow('Fett', p.fat, 'g', 20, '🧈')}
                            ${p.saturated_fat ? renderNutrientRow('davon gesättigt', p.saturated_fat, 'g', 10, '  ') : ''}
                            ${renderNutrientRow('Kohlenhydrate', p.carbohydrates, 'g', 50, '🍞')}
                            ${renderNutrientRow('davon Zucker', p.sugars, 'g', 25, '🍬')}
                            ${renderNutrientRow('Ballaststoffe', p.fiber, 'g', 10, '🌾')}
                            ${renderNutrientRow('Eiweiß', p.proteins, 'g', 20, '🥩')}
                            ${renderNutrientRow('Salz', p.salt, 'g', 2.4, '🧂')}
                        </div>
                    </div>
                `;
            }
            
            // Zutaten
            if (p.ingredients_text) {
                html += `
                    <div class="bg-slate-50 rounded-2xl p-4 mb-4">
                        <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 bg-green-100 rounded-lg flex items-center justify-center">🥗</span>
                            Zutaten
                        </h3>
                        <p class="text-sm text-slate-600 leading-relaxed">${p.ingredients_text}</p>
                    </div>
                `;
            }
            
            // Zusatzstoffe
            if (p.additives_tags) {
                const additives = p.additives_tags.split(',').filter(a => a.trim());
                if (additives.length > 0) {
                    html += `
                        <div class="bg-amber-50 rounded-2xl p-4 mb-4">
                            <h3 class="font-bold text-amber-700 mb-3 flex items-center gap-2">
                                <span class="w-6 h-6 bg-amber-100 rounded-lg flex items-center justify-center">⚠️</span>
                                Zusatzstoffe
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                ${additives.map(a => {
                                    const code = a.replace('en:', '').toUpperCase().trim();
                                    return `<span class="px-2.5 py-1 bg-amber-200 text-amber-800 rounded-full text-xs font-bold">${code}</span>`;
                                }).join('')}
                            </div>
                        </div>
                    `;
                }
            }
            
            // Allergene
            if (p.allergens_tags) {
                const allergens = p.allergens_tags.split(',').filter(a => a.trim());
                if (allergens.length > 0) {
                    html += `
                        <div class="bg-red-50 rounded-2xl p-4 mb-4">
                            <h3 class="font-bold text-red-700 mb-3 flex items-center gap-2">
                                <span class="w-6 h-6 bg-red-100 rounded-lg flex items-center justify-center">🚫</span>
                                Allergene
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                ${allergens.map(a => {
                                    const name = translateAllergen(a.trim()) || a.replace('en:', '').replace(/-/g, ' ');
                                    return `<span class="px-2.5 py-1 bg-red-200 text-red-800 rounded-full text-xs font-bold">${name}</span>`;
                                }).join('')}
                            </div>
                        </div>
                    `;
                }
            }
            
            // Labels
            if (p.labels) {
                const labels = p.labels.split(',').map(l => translateLabel(l.trim())).filter(l => l.length > 0).slice(0, 6);
                if (labels.length > 0) {
                    html += `
                        <div class="bg-emerald-50 rounded-2xl p-4 mb-4">
                            <h3 class="font-bold text-emerald-700 mb-3 flex items-center gap-2">
                                <span class="w-6 h-6 bg-emerald-100 rounded-lg flex items-center justify-center">🏷️</span>
                                Labels & Zertifikate
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                ${labels.map(l => `<span class="px-2.5 py-1 bg-emerald-200 text-emerald-800 rounded-full text-xs font-medium">${l}</span>`).join('')}
                            </div>
                        </div>
                    `;
                }
            }
            
            // Sync-Info
            if (p.last_sync) {
                const syncDate = new Date(p.last_sync);
                html += `<p class="text-xs text-slate-400 text-center mt-4">Letzte Synchronisation: ${syncDate.toLocaleDateString('de-DE')} um ${syncDate.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'})}</p>`;
            }
            
            container.innerHTML = html || '<p class="text-sm text-slate-400 text-center py-4">Keine erweiterten Daten verfügbar</p>';
        }
        
        function showDetailBasic(p) {
            // Bild-Priorität: custom_image > image_base64 > image_url > placeholder
            const img = p.custom_image || p.image_base64 || p.image_url || PLACEHOLDER;
            const expiryWarning = isExpiryWarning(p.next_expiry);
            const expired = isExpired(p.next_expiry);
            
            let warningBanner = '';
            if (expired) {
                warningBanner = '<div class="bg-red-500 text-white text-sm font-bold text-center py-2 px-3 rounded-xl mb-3">⚠️ ABGELAUFEN</div>';
            } else if (expiryWarning) {
                warningBanner = '<div class="bg-amber-500 text-white text-sm font-bold text-center py-2 px-3 rounded-xl mb-3">⚠️ Läuft bald ab!</div>';
            }
            
            document.getElementById('detail-content').innerHTML = `
                <div class="relative">
                    <!-- Mobile Header -->
                    <!-- Mobile Header - Foto bündig oben -->
                    <div class="md:hidden relative h-56 bg-gradient-to-br from-slate-100 to-slate-200 overflow-hidden">
                        <img src="${img}" class="w-full h-full object-contain p-4" onerror="this.src='${PLACEHOLDER}'">
                        <div class="absolute top-3 left-3 right-3 flex justify-between items-start">
                            <button onclick="closeDetailModal()" class="w-8 h-8 rounded-full bg-white/90 backdrop-blur shadow-lg flex items-center justify-center text-slate-600 hover:bg-white" data-testid="detail-close-btn">
                                <i data-lucide="x" class="w-4 h-4"></i>
                            </button>
                            ${p.barcode ? `<a href="https://de.openfoodfacts.org/produkt/${p.barcode}" target="_blank" class="px-2.5 py-1 rounded-full bg-white/90 backdrop-blur shadow-lg text-slate-700 text-xs font-medium flex items-center gap-1 hover:bg-white">
                                <i data-lucide="external-link" class="w-3 h-3"></i> OFF
                            </a>` : ''}
                        </div>
                    </div>
                    
                    <!-- Mobile: Name & Marke direkt unter dem Foto -->
                    <div class="md:hidden px-5 pt-4 pb-2">
                        <h2 class="text-xl font-bold text-slate-900 leading-tight">${p.name || 'Unbekanntes Produkt'}</h2>
                        <div class="flex flex-wrap items-center gap-2 mt-2">
                            ${p.brand ? `<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium">🏷️ ${p.brand}</span>` : ''}
                            ${p.quantity_text ? `<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium">📦 ${p.quantity_text}</span>` : ''}
                        </div>
                    </div>
                    
                    <!-- Desktop Header -->
                    <div class="hidden md:flex p-4 border-b border-slate-100 justify-between items-center">
                        <button onclick="closeDetailModal()" class="flex items-center gap-2 text-slate-600 hover:text-slate-900">
                            <i data-lucide="arrow-left" class="w-5 h-5"></i> Zurück
                        </button>
                        ${p.barcode ? `<a href="https://de.openfoodfacts.org/produkt/${p.barcode}" target="_blank" class="px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 text-xs font-medium flex items-center gap-1 hover:bg-blue-200">
                            <i data-lucide="external-link" class="w-3 h-3"></i> Open Food Facts
                        </a>` : ''}
                    </div>
                    
                    <!-- Content - 2 Spalten ab md -->
                    <div class="p-5 md:p-6">
                        <div class="detail-two-column">
                            <!-- Linke Spalte: Bild + Scores -->
                            <div class="detail-left">
                                <!-- Desktop Bild -->
                                <div class="desktop-only-block bg-gradient-to-br from-slate-100 to-slate-200 rounded-2xl p-6 mb-4">
                                    <img src="${img}" class="w-full h-48 object-contain" onerror="this.src='${PLACEHOLDER}'">
                                </div>
                                
                                <!-- Score Badges -->
                                <div id="score-badges" class="flex gap-3 mb-4">
                                    ${renderScoreBadge('Nutri', p.nutri_score)}
                                    ${renderScoreBadge('Eco', p.eco_score)}
                                    ${p.nova_group ? renderNovaBadge(p.nova_group) : ''}
                                </div>
                                
                                <!-- Custom Foto Button -->
                                <button onclick="openCustomPhotoCamera('${p.id}')" class="w-full py-3 bg-gradient-to-r from-purple-500 to-blue-500 text-white rounded-xl font-medium flex items-center justify-center gap-2 shadow-md mb-3">
                                    <i data-lucide="camera" class="w-5 h-5"></i> Eigenes Foto
                                </button>
                                
                                <!-- Sync Button (nur wenn Barcode vorhanden) -->
                                ${p.barcode ? `<button onclick="syncSingleProduct('${p.barcode}', '${(p.name || '').replace(/'/g, "\\'")}')" class="w-full py-2.5 bg-slate-100 text-slate-600 rounded-xl text-sm font-medium flex items-center justify-center gap-2 hover:bg-slate-200 mb-3" data-testid="product-sync-btn">
                                    <i data-lucide="refresh-cw" class="w-4 h-4"></i> Daten aktualisieren
                                </button>` : ''}
                                
                                <!-- Kein Lebensmittel Toggle (nur für manuelle Produkte ohne API-Quelle) -->
                                ${!p.api_source ? `
                                <div class="bg-slate-50 rounded-xl p-3 mb-3">
                                    <label class="flex items-center justify-between cursor-pointer" data-testid="product-not-food-toggle">
                                        <span class="text-sm text-slate-700">
                                            <i data-lucide="package-x" class="w-4 h-4 inline mr-1"></i>
                                            Kein Lebensmittel
                                        </span>
                                        <div class="relative">
                                            <input type="checkbox" id="product-is-not-food" onchange="toggleProductFood('${p.id}')" class="sr-only peer" ${p.is_food === 0 || p.is_food === '0' ? 'checked' : ''}>
                                            <div class="w-10 h-5 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-red-500"></div>
                                        </div>
                                    </label>
                                    <p class="text-xs text-slate-400 mt-1">Wird von Rezeptvorschlägen ausgeschlossen</p>
                                </div>
                                ` : ''}
                                
                                <!-- Löschen Button (Desktop - in linker Spalte) -->
                                <button onclick="deleteProduct('${p.id}')" class="desktop-only-flex w-full py-2 bg-slate-50 text-slate-400 rounded-xl text-xs items-center justify-center gap-1 hover:bg-red-50 hover:text-red-500 transition-colors">
                                    <i data-lucide="trash-2" class="w-3 h-3"></i> Löschen
                                </button>
                            </div>
                            
                            <!-- Rechte Spalte: Details -->
                            <div class="detail-right space-y-4">
                                <!-- Name & Marke (Desktop sichtbar) -->
                                <div class="desktop-only-block">
                                    <h2 class="text-xl md:text-2xl font-bold text-slate-900 leading-tight">${p.name || 'Unbekanntes Produkt'}</h2>
                                    <div class="flex flex-wrap items-center gap-2 mt-2">
                                        ${p.brand ? `<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium">🏷️ ${p.brand}</span>` : ''}
                                        ${p.quantity_text ? `<span class="px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-medium">📦 ${p.quantity_text}</span>` : ''}
                                    </div>
                                </div>
                                
                                <!-- Bestand -->
                                <div class="bg-blue-50 rounded-2xl p-4">
                                    ${warningBanner}
                                    <div class="flex items-center justify-between mb-3 cursor-pointer active:opacity-70" onclick="openMhdPopup('${p.id}', '${(p.name || '').replace(/'/g, "\\'")}')">
                                        <div>
                                            <p class="text-3xl font-bold text-blue-600">${p.quantity}x</p>
                                            <p class="text-sm text-slate-500">im Bestand</p>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            ${p.next_expiry ? `<div class="text-right">
                                                <p class="text-sm text-slate-500">Nächstes MHD</p>
                                                <p class="font-bold ${expired ? 'text-red-600' : expiryWarning ? 'text-amber-600' : 'text-slate-700'}">${formatDate(p.next_expiry)}</p>
                                            </div>` : ''}
                                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                                                <i data-lucide="chevron-right" class="w-4 h-4 text-blue-600"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <button onclick="closeDetailModal();openAddModalForProduct('${p.id}')" class="py-2.5 bg-green-500 text-white rounded-xl font-medium flex items-center justify-center gap-2">
                                            <i data-lucide="plus" class="w-4 h-4"></i> Einbuchen
                                        </button>
                                        <button onclick="closeDetailModal();openConsumeModalForProduct('${p.id}')" class="py-2.5 bg-red-500 text-white rounded-xl font-medium flex items-center justify-center gap-2">
                                            <i data-lucide="minus" class="w-4 h-4"></i> Verbrauchen
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Extended Data Container -->
                                <div id="extended-data">
                                    ${p.barcode ? '<div class="text-center py-6 text-slate-400"><div class="w-6 h-6 border-2 border-slate-300 border-t-blue-500 rounded-full animate-spin mx-auto mb-2"></div>Lade Details...</div>' : ''}
                                </div>
                                
                                <!-- Löschen Button (Mobile - ganz unten, dezent) -->
                                <button onclick="deleteProduct('${p.id}')" class="md:hidden w-full py-2 bg-slate-50 text-slate-400 rounded-xl text-xs flex items-center justify-center gap-1 hover:bg-red-50 hover:text-red-500">
                                    <i data-lucide="trash-2" class="w-3 h-3"></i> Produkt löschen
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            document.getElementById('detail-modal').classList.remove('hidden');
            lucide.createIcons();
        }
        
        async function fetchExtendedProductData(barcode, baseProduct) {
            try {
                const response = await fetch(`${API_URL}?action=lookup&code=${barcode}`);
                const data = await response.json();
                
                if (data.found) {
                    renderExtendedData(data, baseProduct);
                } else {
                    document.getElementById('extended-data').innerHTML = '';
                }
            } catch (e) {
                console.error('Fetch extended data error:', e);
                document.getElementById('extended-data').innerHTML = '';
            }
        }
        
        function renderExtendedData(data, baseProduct) {
            let html = '';
            
            // Score Badges aktualisieren, wenn von API verfügbar
            const nutri = data.nutri_score || baseProduct.nutri_score;
            const eco = data.eco_score || baseProduct.eco_score;
            const nova = data.nova_group || baseProduct.nova_group;
            
            const scoreBadgesEl = document.getElementById('score-badges');
            if (scoreBadgesEl) {
                scoreBadgesEl.innerHTML = `
                    ${renderScoreBadge('Nutri', nutri)}
                    ${renderScoreBadge('Eco', eco)}
                    ${nova ? renderNovaBadge(nova) : ''}
                `;
            }
            
            // Analyse der Inhaltsstoffe
            if (data.ingredients_analysis_tags && data.ingredients_analysis_tags.length > 0) {
                html += `
                    <div class="bg-slate-50 rounded-2xl p-4 mt-2">
                        <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 bg-purple-100 rounded-lg flex items-center justify-center">🔬</span>
                            Analyse der Inhaltsstoffe
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            ${data.ingredients_analysis_tags.map(tag => renderAnalysisTag(tag)).join('')}
                        </div>
                    </div>
                `;
            }
            
            // Kategorien
            if (data.categories) {
                const cats = data.categories.split(',').map(c => translateCategory(c.trim())).filter(c => c.length > 0).slice(0, 8);
                if (cats.length > 0) {
                    html += `
                        <div class="bg-slate-50 rounded-2xl p-4 mt-4">
                            <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                                <span class="w-6 h-6 bg-blue-100 rounded-lg flex items-center justify-center">📂</span>
                                Kategorien
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                ${cats.map(c => `<span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium">${c}</span>`).join('')}
                            </div>
                        </div>
                    `;
                }
            }
            
            // Nährwerte
            if (data.nutrition && data.nutrition.energy_kcal) {
                html += `
                    <div class="bg-slate-50 rounded-2xl p-4 mt-4">
                        <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 bg-orange-100 rounded-lg flex items-center justify-center">📊</span>
                            Nährwerte <span class="text-xs font-normal text-slate-400">pro 100g</span>
                        </h3>
                        <div class="space-y-3">
                            ${renderNutrientRow('Energie', data.nutrition.energy_kcal, 'kcal', 200, '🔥')}
                            ${renderNutrientRow('Fett', data.nutrition.fat, 'g', 20, '🧈')}
                            ${data.nutrition.saturated_fat ? renderNutrientRow('davon gesättigt', data.nutrition.saturated_fat, 'g', 10, '  ') : ''}
                            ${renderNutrientRow('Kohlenhydrate', data.nutrition.carbohydrates, 'g', 50, '🍞')}
                            ${renderNutrientRow('davon Zucker', data.nutrition.sugars, 'g', 25, '🍬')}
                            ${renderNutrientRow('Ballaststoffe', data.nutrition.fiber, 'g', 10, '🌾')}
                            ${renderNutrientRow('Eiweiß', data.nutrition.proteins, 'g', 20, '🥩')}
                            ${renderNutrientRow('Salz', data.nutrition.salt, 'g', 2.4, '🧂')}
                        </div>
                    </div>
                `;
            }
            
            // Zutaten
            if (data.ingredients_text) {
                html += `
                    <div class="bg-slate-50 rounded-2xl p-4 mt-4">
                        <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 bg-green-100 rounded-lg flex items-center justify-center">🥗</span>
                            Zutaten
                        </h3>
                        <p class="text-sm text-slate-600 leading-relaxed">${data.ingredients_text}</p>
                    </div>
                `;
            }
            
            // Zusatzstoffe
            if (data.additives_tags && data.additives_tags.length > 0) {
                html += `
                    <div class="bg-amber-50 rounded-2xl p-4 mt-4">
                        <h3 class="font-bold text-amber-700 mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 bg-amber-100 rounded-lg flex items-center justify-center">⚠️</span>
                            Zusatzstoffe
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            ${data.additives_tags.map(a => {
                                const code = a.replace('en:', '').toUpperCase();
                                return `<span class="px-2.5 py-1 bg-amber-200 text-amber-800 rounded-full text-xs font-bold">${code}</span>`;
                            }).join('')}
                        </div>
                    </div>
                `;
            }
            
            // Allergene
            if (data.allergens_tags && data.allergens_tags.length > 0) {
                html += `
                    <div class="bg-red-50 rounded-2xl p-4 mt-4">
                        <h3 class="font-bold text-red-700 mb-3 flex items-center gap-2">
                            <span class="w-6 h-6 bg-red-100 rounded-lg flex items-center justify-center">🚨</span>
                            Allergene
                        </h3>
                        <div class="flex flex-wrap gap-2">
                            ${data.allergens_tags.map(a => {
                                const name = translateAllergen(a);
                                return `<span class="px-2.5 py-1 bg-red-200 text-red-800 rounded-full text-xs font-bold">${name}</span>`;
                            }).join('')}
                        </div>
                    </div>
                `;
            }
            
            // Labels
            if (data.labels) {
                const labels = data.labels.split(',').map(l => translateLabel(l.trim())).filter(l => l.length > 0).slice(0, 6);
                if (labels.length > 0) {
                    html += `
                        <div class="bg-slate-50 rounded-2xl p-4 mt-4">
                            <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                                <span class="w-6 h-6 bg-emerald-100 rounded-lg flex items-center justify-center">🏅</span>
                                Labels & Zertifikate
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                ${labels.map(l => `<span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-medium">${l}</span>`).join('')}
                            </div>
                        </div>
                    `;
                }
            }
            
            // Läden
            if (data.stores) {
                const stores = data.stores.split(',').map(s => s.trim()).filter(s => s.length > 0);
                if (stores.length > 0) {
                    html += `
                        <div class="bg-slate-50 rounded-2xl p-4 mt-4">
                            <h3 class="font-bold text-slate-700 mb-3 flex items-center gap-2">
                                <span class="w-6 h-6 bg-violet-100 rounded-lg flex items-center justify-center">🛒</span>
                                Erhältlich bei
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                ${stores.map(s => `<span class="px-2.5 py-1 bg-violet-100 text-violet-700 rounded-full text-xs font-medium">${s}</span>`).join('')}
                            </div>
                        </div>
                    `;
                }
            }
            
            // Link zur Produktseite
            const extUrl = data.off_url || data.obf_url || data.external_url;
            if (extUrl) {
                const sourceNames = {
                    'openfoodfacts': 'Open Food Facts',
                    'openbeautyfacts': 'Open Beauty Facts',
                    'openproductsfacts': 'Open Products Facts',
                    'openpetfoodfacts': 'Open Pet Food Facts'
                };
                const source = sourceNames[data.source] || data.source;
                html += `
                    <a href="${extUrl}" target="_blank" class="block bg-slate-100 rounded-2xl p-4 mt-4 text-center">
                        <span class="text-sm text-slate-600">Mehr Infos auf</span>
                        <span class="block font-bold text-indigo-600">${source} →</span>
                    </a>
                `;
            }
            
            document.getElementById('extended-data').innerHTML = html;
            lucide.createIcons();
        }
        
        // Helper: Score Badge rendern
        function renderScoreBadge(type, score) {
            // Nur gültige Scores anzeigen: A, B, C, D, E
            const validScores = ['A', 'B', 'C', 'D', 'E'];
            const normalizedScore = score ? score.toString().toUpperCase().trim() : null;
            
            // Ungültige Werte filtern
            if (!normalizedScore || 
                normalizedScore === 'UNKNOWN' || 
                normalizedScore === 'NOT-APPLICABLE' ||
                normalizedScore.includes('PLUS') ||
                normalizedScore.includes('MINUS') ||
                !validScores.includes(normalizedScore.charAt(0))) {
                return `<div class="flex-1 bg-slate-100 rounded-xl p-3 text-center">
                    <p class="text-2xl font-bold text-slate-400">–</p>
                    <p class="text-xs text-slate-400">${type}-Score</p>
                </div>`;
            }
            
            // Nur den ersten Buchstaben nehmen (für Fälle wie "A-PLUS" -> "A")
            const grade = normalizedScore.charAt(0);
            
            const colors = {
                'A': 'bg-green-500',
                'B': 'bg-lime-500', 
                'C': 'bg-yellow-500',
                'D': 'bg-orange-500',
                'E': 'bg-red-500'
            };
            
            const bgColor = colors[grade] || 'bg-slate-400';
            
            return `<div class="flex-1 ${bgColor} rounded-xl p-3 text-center text-white">
                <p class="text-2xl font-bold">${grade}</p>
                <p class="text-xs opacity-90">${type}-Score</p>
            </div>`;
        }
        
        // Helper: NOVA Badge rendern
        function renderNovaBadge(group) {
            const colors = { 1: 'bg-green-500', 2: 'bg-lime-500', 3: 'bg-orange-500', 4: 'bg-red-500' };
            const descriptions = { 
                1: 'Unverarbeitet', 
                2: 'Verarbeitet', 
                3: 'Verarbeitete Lebensmittel', 
                4: 'Hochverarbeitet' 
            };
            
            return `<div class="flex-1 ${colors[group] || 'bg-slate-400'} rounded-xl p-3 text-center text-white">
                <p class="text-2xl font-bold">${group}</p>
                <p class="text-xs opacity-90">NOVA</p>
            </div>`;
        }
        
        // Helper: Analyse-Tag rendern
        function renderAnalysisTag(tag) {
            const translations = {
                'en:palm-oil-free': { text: 'Palmölfrei', color: 'bg-green-100 text-green-700', icon: '✓' },
                'en:palm-oil': { text: 'Enthält Palmöl', color: 'bg-red-100 text-red-700', icon: '✗' },
                'en:may-contain-palm-oil': { text: 'Kann Palmöl enthalten', color: 'bg-amber-100 text-amber-700', icon: '?' },
                'en:vegan': { text: 'Vegan', color: 'bg-green-100 text-green-700', icon: '✓' },
                'en:non-vegan': { text: 'Nicht vegan', color: 'bg-red-100 text-red-700', icon: '✗' },
                'en:maybe-vegan': { text: 'Vielleicht vegan', color: 'bg-amber-100 text-amber-700', icon: '?' },
                'en:vegetarian': { text: 'Vegetarisch', color: 'bg-green-100 text-green-700', icon: '✓' },
                'en:non-vegetarian': { text: 'Nicht vegetarisch', color: 'bg-red-100 text-red-700', icon: '✗' },
                'en:maybe-vegetarian': { text: 'Vielleicht vegetarisch', color: 'bg-amber-100 text-amber-700', icon: '?' }
            };
            
            const t = translations[tag];
            if (!t) return '';
            
            return `<span class="px-3 py-1.5 ${t.color} rounded-full text-xs font-bold flex items-center gap-1">
                <span>${t.icon}</span> ${t.text}
            </span>`;
        }
        
        // Helper: Nährwert-Zeile rendern
        function renderNutrientRow(name, value, unit, max, icon) {
            if (value === null || value === undefined) return '';
            
            const percentage = Math.min(100, (value / max) * 100);
            const barColor = percentage > 66 ? 'bg-red-400' : percentage > 33 ? 'bg-amber-400' : 'bg-green-400';
            
            return `
                <div class="flex items-center gap-3">
                    <span class="w-5 text-center">${icon}</span>
                    <span class="w-28 text-sm text-slate-600">${name}</span>
                    <div class="flex-1 h-2 bg-slate-200 rounded-full overflow-hidden">
                        <div class="${barColor} h-full rounded-full" style="width: ${percentage}%"></div>
                    </div>
                    <span class="w-16 text-right text-sm font-medium text-slate-700">${value} ${unit}</span>
                </div>
            `;
        }
        
        // Helper: Allergen übersetzen
        function translateAllergen(tag) {
            const translations = {
                'en:milk': 'Milch', 'milk': 'Milch',
                'en:eggs': 'Eier', 'eggs': 'Eier',
                'en:gluten': 'Gluten', 'gluten': 'Gluten',
                'en:nuts': 'Nüsse', 'nuts': 'Nüsse',
                'en:peanuts': 'Erdnüsse', 'peanuts': 'Erdnüsse',
                'en:soybeans': 'Soja', 'soybeans': 'Soja', 'soy': 'Soja',
                'en:fish': 'Fisch', 'fish': 'Fisch',
                'en:crustaceans': 'Krebstiere', 'crustaceans': 'Krebstiere',
                'en:molluscs': 'Weichtiere', 'molluscs': 'Weichtiere',
                'en:celery': 'Sellerie', 'celery': 'Sellerie',
                'en:mustard': 'Senf', 'mustard': 'Senf',
                'en:sesame-seeds': 'Sesam', 'sesame-seeds': 'Sesam', 'sesame': 'Sesam',
                'en:sulphur-dioxide-and-sulphites': 'Sulfite', 'sulphites': 'Sulfite',
                'en:lupin': 'Lupinen', 'lupin': 'Lupinen',
                'en:wheat': 'Weizen', 'wheat': 'Weizen'
            };
            const clean = tag.toLowerCase().trim();
            return translations[clean] || tag.replace(/^(en|fr|de):/, '').replace(/-/g, ' ');
        }
        
        // Helper: Kategorie übersetzen (umfangreich)
        function translateCategory(cat) {
            // Erst en:, fr:, de: Präfix und Bindestriche entfernen
            let clean = cat.replace(/^(en|fr|de):/, '').replace(/-/g, ' ').trim();
            
            const translations = {
                // Zusammengesetzte Kategorien (zuerst prüfen!)
                'plant based foods and beverages': 'Pflanzliche Lebensmittel und Getränke',
                'plant based foods': 'Pflanzliche Lebensmittel',
                'cereals and potatoes': 'Getreide und Kartoffeln',
                'cereals and their products': 'Getreide und Getreideprodukte',
                'dried products to be rehydrated': 'Trockenprodukte zum Rehydrieren',
                'dried products': 'Trockenprodukte',
                'breakfast cereals': 'Frühstückscerealien',
                'canned foods': 'Konserven',
                'frozen foods': 'Tiefkühlkost',
                'ready meals': 'Fertiggerichte',
                'prepared foods': 'Fertigprodukte',
                'baby food': 'Babynahrung',
                'pet food': 'Tiernahrung',
                'hot drinks': 'Heißgetränke',
                'soft drinks': 'Softdrinks',
                'energy drinks': 'Energydrinks',
                'alcoholic beverages': 'Alkoholische Getränke',
                'ice cream': 'Eiscreme',
                'olive oil': 'Olivenöl',
                'organic products': 'Bioprodukte',
                'plant based': 'Pflanzlich',
                'gluten free': 'Glutenfrei',
                'lactose free': 'Laktosefrei',
                'egg products': 'Eiprodukte',
                'dairy products': 'Milchprodukte',
                'meat products': 'Fleischprodukte',
                'fish products': 'Fischprodukte',
                'body care': 'Körperpflege',
                'shower gel': 'Duschgel',
                'paper products': 'Papierprodukte',
                'toilet paper': 'Toilettenpapier',
                'instant soups': 'Instantsuppen',
                'instant noodles': 'Instantnudeln',
                'food products': 'Lebensmittel',
                'food': 'Lebensmittel',
                
                // Einzelne Wörter
                'beverages': 'Getränke', 'drinks': 'Getränke', 'water': 'Wasser', 'juices': 'Säfte',
                'sodas': 'Limonaden', 'beers': 'Biere', 'wines': 'Weine', 'spirits': 'Spirituosen',
                'dairy': 'Milchprodukte', 'milk': 'Milch', 'cheese': 'Käse', 
                'yogurt': 'Joghurt', 'yoghurt': 'Joghurt', 'yogurts': 'Joghurts',
                'butter': 'Butter', 'cream': 'Sahne', 'creams': 'Cremes',
                'meat': 'Fleisch', 'meats': 'Fleisch', 'poultry': 'Geflügel', 
                'beef': 'Rindfleisch', 'pork': 'Schweinefleisch',
                'chicken': 'Hähnchen', 'turkey': 'Pute', 'lamb': 'Lamm', 
                'sausages': 'Würstchen', 'sausage': 'Wurst',
                'fish': 'Fisch', 'fishes': 'Fische', 'seafood': 'Meeresfrüchte', 
                'salmon': 'Lachs', 'tuna': 'Thunfisch',
                'fruits': 'Obst', 'fruit': 'Obst', 'apples': 'Äpfel', 'apple': 'Apfel',
                'bananas': 'Bananen', 'oranges': 'Orangen',
                'vegetables': 'Gemüse', 'vegetable': 'Gemüse', 'salads': 'Salate', 'salad': 'Salat',
                'tomatoes': 'Tomaten', 'tomato': 'Tomate',
                'potatoes': 'Kartoffeln', 'potato': 'Kartoffel',
                'carrots': 'Karotten', 'onions': 'Zwiebeln',
                'bread': 'Brot', 'breads': 'Brote', 'bakery': 'Backwaren', 'pastries': 'Gebäck',
                'cakes': 'Kuchen', 'cake': 'Kuchen', 'cookies': 'Kekse', 'cookie': 'Keks',
                'biscuits': 'Kekse', 'biscuit': 'Keks',
                'cereals': 'Getreide', 'cereal': 'Getreide', 'muesli': 'Müsli', 'oats': 'Hafer',
                'snacks': 'Snacks', 'snack': 'Snack', 'chips': 'Chips', 'crackers': 'Cracker',
                'nuts': 'Nüsse', 'almonds': 'Mandeln', 'walnuts': 'Walnüsse', 'peanuts': 'Erdnüsse',
                'chocolate': 'Schokolade', 'chocolates': 'Schokoladen', 
                'candies': 'Süßigkeiten', 'candy': 'Süßigkeit', 'sweets': 'Süßwaren',
                'pasta': 'Nudeln', 'noodles': 'Nudeln', 'rice': 'Reis', 'grains': 'Getreide',
                'sauces': 'Soßen', 'sauce': 'Soße', 'condiments': 'Würzmittel', 
                'ketchup': 'Ketchup', 'mayonnaise': 'Mayonnaise',
                'spices': 'Gewürze', 'spice': 'Gewürz', 'herbs': 'Kräuter', 
                'salt': 'Salz', 'pepper': 'Pfeffer', 'seasonings': 'Würzmittel',
                'oils': 'Öle', 'oil': 'Öl', 'vinegar': 'Essig',
                'canned': 'Konserviert', 'preserved': 'Konserviert', 'dried': 'Getrocknet',
                'frozen': 'Tiefgekühlt', 'fresh': 'Frisch',
                'organic': 'Bio', 'vegan': 'Vegan', 'vegetarian': 'Vegetarisch',
                'coffee': 'Kaffee', 'tea': 'Tee', 'teas': 'Tees',
                'spreads': 'Aufstriche', 'spread': 'Aufstrich', 
                'jam': 'Marmelade', 'jams': 'Marmeladen', 'honey': 'Honig',
                'soups': 'Suppen', 'soup': 'Suppe', 'broths': 'Brühen', 'broth': 'Brühe',
                'meals': 'Mahlzeiten', 'meal': 'Mahlzeit',
                'tofu': 'Tofu', 'tempeh': 'Tempeh', 'seitan': 'Seitan',
                'eggs': 'Eier', 'egg': 'Ei',
                'flour': 'Mehl', 'sugar': 'Zucker', 'sugars': 'Zucker', 'baking': 'Backzutaten',
                'products': 'Produkte', 'product': 'Produkt',
                'foods': 'Lebensmittel',
                'and': 'und', 'with': 'mit', 'without': 'ohne', 'from': 'aus', 'their': 'ihre',
                // Kosmetik & Haushalt
                'beauty': 'Schönheit', 'cosmetics': 'Kosmetik', 'skincare': 'Hautpflege',
                'haircare': 'Haarpflege', 'shampoo': 'Shampoo', 'shampoos': 'Shampoos',
                'conditioner': 'Spülung', 'soap': 'Seife', 'soaps': 'Seifen',
                'deodorant': 'Deodorant', 'deodorants': 'Deodorants',
                'perfume': 'Parfüm', 'makeup': 'Make-up',
                'household': 'Haushalt', 'cleaning': 'Reinigung', 
                'detergent': 'Waschmittel', 'detergents': 'Waschmittel'
            };
            
            const lower = clean.toLowerCase();
            
            // Direkte Übersetzung (zusammengesetzte zuerst)
            if (translations[lower]) return translations[lower];
            
            // Wort für Wort übersetzen
            const words = lower.split(/\s+/);
            const translatedWords = words.map(word => translations[word] || word);
            const result = translatedWords.join(' ');
            
            // Ersten Buchstaben groß
            return result.charAt(0).toUpperCase() + result.slice(1);
        }
        
        // Helper: Label übersetzen
        function translateLabel(label) {
            // Erst en:, fr:, de: Präfix und Bindestriche entfernen
            let clean = label.replace(/^(en|fr|de):/, '').replace(/-/g, ' ').trim();
            
            const translations = {
                // Labels & Zertifikate
                'vegetarian': 'Vegetarisch',
                'vegan': 'Vegan',
                'organic': 'Bio',
                'no preservatives': 'Ohne Konservierungsstoffe',
                'no additives': 'Ohne Zusatzstoffe',
                'no artificial colors': 'Ohne künstliche Farbstoffe',
                'no artificial flavors': 'Ohne künstliche Aromen',
                'no added sugar': 'Ohne Zuckerzusatz',
                'sugar free': 'Zuckerfrei',
                'gluten free': 'Glutenfrei',
                'lactose free': 'Laktosefrei',
                'fat free': 'Fettfrei',
                'low fat': 'Fettarm',
                'low sugar': 'Zuckerarm',
                'low salt': 'Salzarm',
                'high protein': 'Proteinreich',
                'high fiber': 'Ballaststoffreich',
                'whole grain': 'Vollkorn',
                'fair trade': 'Fairtrade',
                'rainforest alliance': 'Rainforest Alliance',
                'fsc': 'FSC',
                'msc': 'MSC',
                'asc': 'ASC',
                'european vegetarian union': 'Europäische Vegetarier-Union',
                'european vegetarian union vegan': 'Europäische Vegetarier-Union Vegan',
                'v label': 'V-Label',
                'v label vegan': 'V-Label Vegan',
                'v label vegetarian': 'V-Label Vegetarisch',
                'bio': 'Bio',
                'eco': 'Öko',
                'natural': 'Natürlich',
                'kosher': 'Koscher',
                'halal': 'Halal',
                'non gmo': 'Ohne Gentechnik',
                'palm oil free': 'Palmölfrei',
                'made in germany': 'Hergestellt in Deutschland',
                'made in france': 'Hergestellt in Frankreich',
                'made in italy': 'Hergestellt in Italien',
                'recyclable': 'Recycelbar',
                'recycled packaging': 'Recycelte Verpackung',
                'sustainable': 'Nachhaltig',
                'cruelty free': 'Tierversuchsfrei',
                'nutriscore a': 'Nutri-Score A',
                'nutriscore b': 'Nutri-Score B',
                'nutriscore c': 'Nutri-Score C',
                'nutriscore d': 'Nutri-Score D',
                'nutriscore e': 'Nutri-Score E'
            };
            
            const lower = clean.toLowerCase();
            
            // Direkte Übersetzung
            if (translations[lower]) return translations[lower];
            
            // Teilübersetzung
            for (const [en, de] of Object.entries(translations)) {
                if (lower === en) return de;
            }
            
            // Ersten Buchstaben groß, Rest so lassen
            return clean.charAt(0).toUpperCase() + clean.slice(1);
        }
        
        function closeDetailModal() { document.getElementById('detail-modal').classList.add('hidden'); }
        
        // MHD Popup Funktionen
        async function openMhdPopup(productId, productName) {
            document.getElementById('mhd-popup-product').textContent = productName;
            document.getElementById('mhd-popup-content').innerHTML = '<div class="text-center py-6 text-slate-400"><div class="w-6 h-6 border-2 border-slate-300 border-t-indigo-500 rounded-full animate-spin mx-auto mb-2"></div>Lade...</div>';
            document.getElementById('mhd-popup').classList.remove('hidden');
            lucide.createIcons();
            
            try {
                const response = await fetch(`${API_URL}?action=products&id=${productId}`);
                const data = await response.json();
                
                if (data.inventory && data.inventory.length > 0) {
                    // Sortiere nach MHD (ohne MHD am Ende)
                    const sorted = [...data.inventory].sort((a, b) => {
                        if (!a.expiry_date && !b.expiry_date) return 0;
                        if (!a.expiry_date) return 1;
                        if (!b.expiry_date) return -1;
                        return new Date(a.expiry_date) - new Date(b.expiry_date);
                    });
                    
                    let totalQty = 0;
                    let html = '<div class="space-y-3">';
                    
                    sorted.forEach(inv => {
                        totalQty += inv.quantity;
                        const exp = inv.expiry_date ? formatDate(inv.expiry_date) : 'Ohne MHD';
                        const expired = inv.expiry_date && isExpired(inv.expiry_date);
                        const warning = inv.expiry_date && isExpiryWarning(inv.expiry_date);
                        
                        let statusClass = 'bg-white border-slate-200';
                        let statusBadge = '';
                        let dateClass = 'text-slate-700';
                        
                        if (expired) {
                            statusClass = 'bg-red-50 border-red-200';
                            statusBadge = '<span class="px-2 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full">Abgelaufen</span>';
                            dateClass = 'text-red-600';
                        } else if (warning) {
                            statusClass = 'bg-amber-50 border-amber-200';
                            statusBadge = '<span class="px-2 py-0.5 bg-amber-500 text-white text-xs font-bold rounded-full">Bald ablaufend</span>';
                            dateClass = 'text-amber-600';
                        }
                        
                        html += `
                            <div class="p-4 rounded-xl border ${statusClass}">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-bold ${dateClass} text-lg">${exp}</p>
                                        ${statusBadge}
                                    </div>
                                    <div class="text-right">
                                        <p class="text-2xl font-bold text-indigo-600">${inv.quantity}x</p>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    
                    html += '</div>';
                    
                    // Summe anzeigen
                    html += `
                        <div class="mt-4 pt-4 border-t border-slate-200 flex items-center justify-between">
                            <span class="text-slate-500 font-medium">Gesamt</span>
                            <span class="text-2xl font-bold text-indigo-600">${totalQty}x</span>
                        </div>
                    `;
                    
                    document.getElementById('mhd-popup-content').innerHTML = html;
                } else {
                    document.getElementById('mhd-popup-content').innerHTML = '<p class="text-center text-slate-400 py-8">Kein Bestand vorhanden</p>';
                }
                
                lucide.createIcons();
            } catch (e) {
                console.error('MHD Popup Error:', e);
                document.getElementById('mhd-popup-content').innerHTML = '<p class="text-center text-red-500 py-8">Fehler beim Laden</p>';
            }
        }
        
        function closeMhdPopup() {
            document.getElementById('mhd-popup').classList.add('hidden');
        }
        
        function openAddModalForProduct(id) { 
            openedFromScanner = false; // Aus Artikel-Detail, nicht Scanner
            const p = products.find(x => x.id === id); 
            if (p) openAddModal(p); 
        }
        
        async function openConsumeModalForProduct(id) {
            showToast('Lade...', 'loading');
            try {
                const r = await fetch(`${API_URL}?action=products&id=${id}`);
                const d = await r.json();
                hideToast();
                openConsumeModal(d);
            } catch (e) { hideToast(); showToast('Fehler', 'error'); }
        }
        
        async function deleteProduct(id) {
            if (!confirm('Wirklich löschen?')) return;
            try {
                await fetch(`${API_URL}?action=products&id=${id}`, { method: 'DELETE' });
                showToast('Gelöscht', 'success');
                closeDetailModal();
                loadProducts();
            } catch (e) { showToast('Fehler', 'error'); }
        }
        
        // Toggle is_food flag für ein Produkt
        async function toggleProductFood(productId) {
            const checkbox = document.getElementById('product-is-not-food');
            const isNotFood = checkbox.checked;
            
            try {
                const res = await fetch(`${API_URL}?action=update_product_food&id=${productId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ is_food: isNotFood ? 0 : 1 })
                });
                
                const data = await res.json();
                if (data.success) {
                    showToast(isNotFood ? 'Als Non-Food markiert' : 'Als Lebensmittel markiert', 'success');
                    // Lokale Daten aktualisieren
                    const product = products.find(p => p.id === productId);
                    if (product) {
                        product.is_food = isNotFood ? 0 : 1;
                    }
                } else {
                    showToast('Fehler beim Speichern', 'error');
                    checkbox.checked = !isNotFood; // Zurücksetzen
                }
            } catch (e) {
                showToast('Fehler beim Speichern', 'error');
                checkbox.checked = !isNotFood; // Zurücksetzen
            }
        }
        
        // Manual
        function openManualEntry() {
            document.getElementById('form-name').value = '';
            document.getElementById('form-brand').value = '';
            document.getElementById('form-not-food').checked = false;
            document.getElementById('manual-modal').classList.remove('hidden');
            lucide.createIcons();
        }
        
        function closeManualModal() { document.getElementById('manual-modal').classList.add('hidden'); }
        
        function saveManualProduct(e) {
            e.preventDefault();
            const name = document.getElementById('form-name').value.trim();
            const brand = document.getElementById('form-brand').value.trim();
            const isNotFood = document.getElementById('form-not-food').checked;
            if (!name) return;
            closeManualModal();
            openedFromScanner = false; // Manuell erstellt, nicht über Scanner
            openAddModal({ isNew: true, name, brand, barcode: null, is_food: !isNotFood });
        }
        
        // Helpers
        function formatDate(s) {
            if (!s) return '';
            return new Date(s).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
        }
        
        function showToast(msg, type = 'info') {
            const c = document.getElementById('toast-container');
            const old = c.querySelector('.toast-loading');
            if (old) old.remove();
            
            const colors = { success: 'bg-green-500', error: 'bg-red-500', info: 'bg-indigo-500', loading: 'bg-slate-700' };
            const icons = { success: 'check-circle', error: 'x-circle', info: 'info', loading: 'loader-2' };
            
            const t = document.createElement('div');
            t.className = `flex items-center gap-2 px-4 py-3 rounded-xl text-white text-sm shadow-lg ${colors[type]} ${type === 'loading' ? 'toast-loading' : ''}`;
            t.innerHTML = `<i data-lucide="${icons[type]}" class="w-5 h-5 ${type === 'loading' ? 'animate-spin' : ''}"></i><span>${msg}</span>`;
            c.appendChild(t);
            lucide.createIcons();
            
            if (type !== 'loading') setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, 3000);
        }
        
        function hideToast() { document.getElementById('toast-container').innerHTML = ''; }
        
        // ============ SHOPPING LIST FUNCTIONS ============
        
        async function updateShoppingCount() {
            try {
                const res = await fetch(`${API_URL}?action=shopping_count`);
                const data = await res.json();
                document.getElementById('tab-shopping-count').textContent = data.count || 0;
            } catch (e) { console.error('Shopping count error:', e); }
        }
        
        async function loadShoppingList() {
            const container = document.getElementById('shopping-list');
            const showCompleted = document.getElementById('show-completed').checked;
            const sortBy = document.getElementById('shopping-sort').value;
            
            container.innerHTML = '<div class="text-center py-8 text-slate-400"><div class="w-6 h-6 border-2 border-slate-300 border-t-indigo-500 rounded-full animate-spin mx-auto mb-2"></div>Lade...</div>';
            
            try {
                const res = await fetch(`${API_URL}?action=shopping${showCompleted ? '&completed=1' : ''}`);
                shoppingList = await res.json();
                
                // Sortieren
                if (sortBy === 'priority') {
                    shoppingList.sort((a, b) => b.priority - a.priority || new Date(a.created_at) - new Date(b.created_at));
                } else if (sortBy === 'name') {
                    shoppingList.sort((a, b) => a.name.localeCompare(b.name));
                }
                
                updateShoppingCount();
                renderShoppingList();
            } catch (e) {
                console.error('Load shopping list error:', e);
                container.innerHTML = '<p class="text-center text-red-500 py-8">Fehler beim Laden</p>';
            }
        }
        
        function renderShoppingList() {
            const container = document.getElementById('shopping-list');
            
            if (shoppingList.length === 0) {
                container.innerHTML = `
                    <div class="flex flex-col items-center justify-center py-12">
                        <div class="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center mb-4">
                            <i data-lucide="shopping-cart" class="w-8 h-8 text-slate-400"></i>
                        </div>
                        <h3 class="text-base font-semibold text-slate-900 mb-1">Einkaufsliste leer</h3>
                        <p class="text-slate-500 text-sm">Füge Artikel aus der Übersicht hinzu</p>
                    </div>
                `;
                lucide.createIcons();
                return;
            }
            
            // Sortierung: Nicht im Warenkorb zuerst, dann im Warenkorb, dann erledigt
            const sorted = [...shoppingList].sort((a, b) => {
                if (a.completed_at && !b.completed_at) return 1;
                if (!a.completed_at && b.completed_at) return -1;
                if (a.in_cart && !b.in_cart) return 1;
                if (!a.in_cart && b.in_cart) return -1;
                return 0;
            });
            
            // Statistik
            const inCartCount = shoppingList.filter(i => i.in_cart && !i.completed_at).length;
            const totalCount = shoppingList.filter(i => !i.completed_at).length;
            
            let html = '';
            
            // Stats Badge
            if (totalCount > 0) {
                html += `
                    <div class="flex items-center justify-between mb-3 px-1">
                        <span class="text-xs text-slate-500">${totalCount} Artikel</span>
                        ${inCartCount > 0 ? `<span class="text-xs text-emerald-600 font-medium">🛒 ${inCartCount} im Korb</span>` : ''}
                    </div>
                `;
            }
            
            html += sorted.map(item => {
                const img = item.custom_image || item.image_url || PLACEHOLDER;
                const isCompleted = item.completed_at !== null;
                const isInCart = item.in_cart && !isCompleted;
                const progress = item.quantity > 0 ? Math.round((item.fulfilled / item.quantity) * 100) : 0;
                
                const priorityColors = {
                    0: '',
                    1: 'border-l-4 border-l-amber-400',
                    2: 'border-l-4 border-l-red-400'
                };
                
                const priorityLabels = {
                    0: '',
                    1: '<span class="px-1.5 py-0.5 bg-amber-100 text-amber-700 text-[10px] font-bold rounded">WICHTIG</span>',
                    2: '<span class="px-1.5 py-0.5 bg-red-100 text-red-700 text-[10px] font-bold rounded">DRINGEND</span>'
                };
                
                // Visuelle Unterscheidung für "Im Warenkorb"
                const cardClass = isCompleted ? 'opacity-50' : (isInCart ? 'bg-emerald-50' : 'bg-white');
                const nameClass = isCompleted ? 'line-through text-slate-400' : (isInCart ? 'line-through text-slate-500' : 'text-slate-900');
                
                return `
                    <div class="${cardClass} rounded-xl shadow-sm border border-slate-100 ${priorityColors[item.priority]} overflow-hidden">
                        <div class="flex items-center gap-3 p-3">
                            <!-- Checkbox für Im Warenkorb -->
                            ${!isCompleted ? `
                                <button onclick="toggleInCart('${item.id}')" class="w-6 h-6 rounded-full border-2 ${isInCart ? 'border-emerald-500 bg-emerald-500' : 'border-slate-300'} flex items-center justify-center flex-shrink-0 transition-colors">
                                    ${isInCart ? '<i data-lucide="check" class="w-4 h-4 text-white"></i>' : ''}
                                </button>
                            ` : ''}
                            <div class="w-10 h-10 bg-slate-100 rounded-lg overflow-hidden flex-shrink-0 ${isInCart ? 'opacity-60' : ''}">
                                <img src="${img}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2">
                                    <h3 class="font-semibold text-sm truncate ${nameClass}">${item.name}</h3>
                                    ${isInCart ? '<span class="px-1.5 py-0.5 bg-emerald-100 text-emerald-700 text-[10px] font-bold rounded">IM KORB</span>' : priorityLabels[item.priority]}
                                </div>
                                ${item.brand && !isInCart ? `<p class="text-xs text-slate-500 truncate">${item.brand}</p>` : ''}
                                ${item.note ? `<p class="text-xs text-indigo-500 truncate mt-0.5">📝 ${item.note}</p>` : ''}
                                ${!isCompleted && item.fulfilled > 0 ? `
                                    <div class="mt-1.5 flex items-center gap-2">
                                        <div class="flex-1 h-1.5 bg-slate-200 rounded-full overflow-hidden">
                                            <div class="h-full bg-emerald-500 rounded-full" style="width: ${progress}%"></div>
                                        </div>
                                        <span class="text-[10px] text-slate-500">${item.fulfilled}/${item.quantity}</span>
                                    </div>
                                ` : ''}
                            </div>
                            ${!isCompleted ? `
                                <div class="flex items-center gap-1 flex-shrink-0">
                                    <button onclick="adjustShoppingItemQty('${item.id}', -1)" class="w-6 h-6 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-slate-200 active:scale-95">
                                        <i data-lucide="minus" class="w-3 h-3"></i>
                                    </button>
                                    <span class="w-6 text-center text-base font-bold ${isInCart ? 'text-emerald-600' : 'text-indigo-600'}">${item.quantity}</span>
                                    <button onclick="adjustShoppingItemQty('${item.id}', 1)" class="w-6 h-6 rounded-full ${isInCart ? 'bg-emerald-100 text-emerald-600' : 'bg-indigo-100 text-indigo-600'} flex items-center justify-center hover:opacity-80 active:scale-95">
                                        <i data-lucide="plus" class="w-3 h-3"></i>
                                    </button>
                                </div>
                            ` : `
                                <span class="text-lg font-bold text-emerald-500">✓</span>
                            `}
                        </div>
                        <div class="flex border-t border-slate-100">
                            ${!isCompleted ? `
                                <button onclick="editShoppingNote('${item.id}')" class="flex-1 py-1.5 text-[11px] font-medium text-slate-500 hover:bg-slate-50 flex items-center justify-center gap-1">
                                    <i data-lucide="message-square" class="w-3 h-3"></i> Notiz
                                </button>
                                ${!item.barcode ? `
                                    <button onclick="stockInFromShopping('${item.id}', '${item.product_id}', '${(item.name || '').replace(/'/g, "\\'")}')" class="flex-1 py-1.5 text-[11px] font-medium text-emerald-600 hover:bg-emerald-50 flex items-center justify-center gap-1 border-l border-slate-100">
                                        <i data-lucide="package-plus" class="w-3 h-3"></i> Einbuchen
                                    </button>
                                ` : ''}
                            ` : ''}
                            <button onclick="deleteShoppingItem('${item.id}')" class="flex-1 py-1.5 text-[11px] font-medium text-red-500 hover:bg-red-50 flex items-center justify-center gap-1 ${!isCompleted ? 'border-l border-slate-100' : ''}">
                                <i data-lucide="trash-2" class="w-3 h-3"></i> Löschen
                            </button>
                        </div>
                    </div>
                `;
            }).join('');
            
            container.innerHTML = html;
            lucide.createIcons();
        }
        
        // Toggle "Im Warenkorb" Status
        async function toggleInCart(itemId) {
            const item = shoppingList.find(x => x.id === itemId);
            if (!item) return;
            
            try {
                await fetch(`${API_URL}?action=shopping&id=${itemId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ in_cart: !item.in_cart })
                });
                item.in_cart = !item.in_cart;
                renderShoppingList();
            } catch (e) {
                showToast('Fehler', 'error');
            }
        }
        
        // Menge in Einkaufsliste ändern
        async function adjustShoppingItemQty(itemId, delta) {
            const item = shoppingList.find(x => x.id === itemId);
            if (!item) return;
            
            const newQty = Math.max(1, item.quantity + delta);
            if (newQty === item.quantity) return;
            
            try {
                await fetch(`${API_URL}?action=shopping&id=${itemId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ quantity: newQty })
                });
                item.quantity = newQty;
                item.remaining = newQty - item.fulfilled;
                renderShoppingList();
                
                // Produktkarte aktualisieren
                updateProductShoppingBadge(item.product_id, newQty);
            } catch (e) {
                showToast('Fehler', 'error');
            }
        }
        
        // Aktualisiert das Shopping-Badge auf einer Produktkarte dynamisch
        function updateProductShoppingBadge(productId, qty) {
            const product = products.find(p => p.id === productId);
            if (product) {
                product.shopping_qty = qty;
            }
            
            // Finde alle Produktkarten mit dieser ID und aktualisiere sie
            const cards = document.querySelectorAll(`[data-product-id="${productId}"]`);
            cards.forEach(card => {
                // Grid-View Badge aktualisieren
                const gridBadge = card.querySelector('.product-card-image span[class*="border-emerald"]');
                const imageContainer = card.querySelector('.product-card-image');
                
                if (imageContainer) {
                    // Entferne altes Badge
                    const oldBadge = imageContainer.querySelector('span[class*="border-emerald"]');
                    if (oldBadge) oldBadge.remove();
                    
                    // Füge neues Badge hinzu wenn qty > 0
                    if (qty > 0) {
                        const newBadge = document.createElement('span');
                        newBadge.className = 'absolute top-2 left-2 px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-white text-slate-800 border-2 border-emerald-500 shadow-sm';
                        newBadge.innerHTML = `🛒${qty}`;
                        imageContainer.appendChild(newBadge);
                    }
                }
            });
        }
        
        // Notiz bearbeiten
        async function editShoppingNote(itemId) {
            const item = shoppingList.find(x => x.id === itemId);
            if (!item) return;
            
            const note = prompt('Notiz:', item.note || '');
            if (note === null) return;
            
            try {
                await fetch(`${API_URL}?action=shopping&id=${itemId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ note: note || null })
                });
                item.note = note || null;
                renderShoppingList();
            } catch (e) {
                showToast('Fehler', 'error');
            }
        }
        
        // Artikel direkt aus Einkaufsliste einbuchen (für manuelle Artikel ohne Barcode)
        async function stockInFromShopping(shoppingItemId, productId, productName) {
            const qty = prompt(`Menge für "${productName}" einbuchen:`, '1');
            if (!qty || isNaN(parseInt(qty))) return;
            
            const quantity = parseInt(qty);
            if (quantity <= 0) {
                showToast('Ungültige Menge', 'error');
                return;
            }
            
            try {
                showToast('Buche ein...', 'loading');
                
                // Ins Inventar einbuchen
                const res = await fetch(`${API_URL}?action=inventory`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        product_id: productId,
                        quantity: quantity
                    })
                });
                
                const data = await res.json();
                
                if (data.success || data.id) {
                    // Von Einkaufsliste entfernen oder Menge reduzieren
                    const item = shoppingList.find(x => x.id === shoppingItemId);
                    if (item) {
                        if (quantity >= item.quantity) {
                            // Komplett erledigt
                            await fetch(`${API_URL}?action=shopping&id=${shoppingItemId}`, { method: 'DELETE' });
                            shoppingList = shoppingList.filter(x => x.id !== shoppingItemId);
                        } else {
                            // Menge reduzieren
                            await fetch(`${API_URL}?action=shopping&id=${shoppingItemId}`, {
                                method: 'PUT',
                                headers: { 'Content-Type': 'application/json' },
                                body: JSON.stringify({ quantity: item.quantity - quantity, fulfilled: (item.fulfilled || 0) + quantity })
                            });
                            item.quantity -= quantity;
                            item.fulfilled = (item.fulfilled || 0) + quantity;
                        }
                    }
                    
                    hideToast();
                    showToast(`${quantity}x "${productName}" eingebucht`, 'success');
                    loadProducts();
                    renderShoppingList();
                    updateShoppingCount();
                } else {
                    hideToast();
                    showToast(data.error || 'Fehler beim Einbuchen', 'error');
                }
            } catch (e) {
                hideToast();
                console.error('stockInFromShopping error:', e);
                showToast('Fehler: ' + e.message, 'error');
            }
        }
        
        function openShoppingAddModal(productId) {
            const p = products.find(x => x.id === productId);
            if (!p) return;
            
            shoppingAddProduct = p;
            shoppingAddPriority = 0;
            
            const img = p.custom_image || p.image_url || PLACEHOLDER;
            document.getElementById('shopping-add-image').innerHTML = `<img src="${img}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">`;
            document.getElementById('shopping-add-name').textContent = p.name || 'Unbekannt';
            document.getElementById('shopping-add-brand').textContent = p.brand || '';
            document.getElementById('shopping-add-qty').value = 1;
            document.getElementById('shopping-add-note').value = '';
            
            // Reset priority buttons - Normal ist ausgewählt (dunkelgrau)
            setShoppingPriority(0);
            
            document.getElementById('shopping-add-modal').classList.remove('hidden');
            lucide.createIcons();
        }
        
        function closeShoppingAddModal() {
            document.getElementById('shopping-add-modal').classList.add('hidden');
            shoppingAddProduct = null;
        }
        
        function adjustShoppingQty(delta) {
            const input = document.getElementById('shopping-add-qty');
            let val = parseInt(input.value) || 1;
            val = Math.max(1, Math.min(99, val + delta));
            input.value = val;
        }
        
        function setShoppingPriority(priority) {
            shoppingAddPriority = priority;
            // [activeBackground, activeText, inactiveBackground, inactiveText]
            const colors = {
                0: ['bg-slate-600', 'text-white', 'bg-slate-200', 'text-slate-600'],
                1: ['bg-amber-500', 'text-white', 'bg-amber-100', 'text-amber-700'],
                2: ['bg-red-500', 'text-white', 'bg-red-100', 'text-red-700']
            };
            
            document.querySelectorAll('.shopping-priority').forEach(btn => {
                const p = parseInt(btn.dataset.priority);
                const c = colors[p];
                // Erst alle Klassen entfernen
                btn.classList.remove('bg-slate-600', 'bg-slate-200', 'bg-amber-500', 'bg-amber-100', 'bg-red-500', 'bg-red-100');
                btn.classList.remove('text-white', 'text-slate-600', 'text-amber-700', 'text-red-700');
                
                if (p === priority) {
                    btn.classList.add(c[0], c[1]); // Active
                } else {
                    btn.classList.add(c[2], c[3]); // Inactive
                }
            });
        }
        
        async function saveToShoppingList() {
            if (!shoppingAddProduct) return;
            
            const qty = parseInt(document.getElementById('shopping-add-qty').value) || 1;
            const note = document.getElementById('shopping-add-note').value.trim();
            
            showToast('Speichere...', 'loading');
            
            try {
                const res = await fetch(`${API_URL}?action=shopping`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        product_id: shoppingAddProduct.id,
                        quantity: qty,
                        note: note || null,
                        priority: shoppingAddPriority
                    })
                });
                
                const data = await res.json();
                
                if (data.success) {
                    hideToast();
                    showToast('Zur Einkaufsliste hinzugefügt!', 'success');
                    closeShoppingAddModal();
                    await loadProducts(); // Refresh to show shopping badge
                    updateShoppingCount();
                } else {
                    throw new Error(data.error || 'Fehler');
                }
            } catch (e) {
                hideToast();
                showToast(e.message || 'Fehler beim Speichern', 'error');
            }
        }
        
        async function completeShoppingItem(itemId) {
            try {
                await fetch(`${API_URL}?action=shopping&id=${itemId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ complete: true })
                });
                showToast('Erledigt ✓', 'success');
                loadShoppingList();
                updateShoppingCount();
            } catch (e) {
                showToast('Fehler', 'error');
            }
        }
        
        async function deleteShoppingItem(itemId) {
            const item = shoppingList.find(x => x.id === itemId);
            const productId = item ? item.product_id : null;
            
            if (!confirm('Wirklich löschen?')) return;
            
            try {
                await fetch(`${API_URL}?action=shopping&id=${itemId}`, { method: 'DELETE' });
                showToast('Gelöscht', 'success');
                loadShoppingList();
                
                // Produktkarte Badge entfernen
                if (productId) {
                    updateProductShoppingBadge(productId, 0);
                }
            } catch (e) {
                showToast('Fehler beim Löschen', 'error');
            }
        }
        
        // ============ END SHOPPING LIST ============
        
        // ============ SYNC FUNCTIONS ============
        const AUTO_SYNC_INTERVAL = 60 * 60 * 1000; // 1 Stunde in Millisekunden
        
        let isSyncing = false;
        let autoSyncEnabled = false;
        let lastAutoSyncTime = 0;
        
        // Sync-Status laden
        async function loadSyncStatus() {
            try {
                const res = await fetch(`${API_URL}?action=sync_status`);
                const data = await res.json();
                
                const outdatedEl = document.getElementById('sync-outdated-count');
                const totalEl = document.getElementById('sync-total-count');
                
                if (outdatedEl) outdatedEl.textContent = data.outdated || 0;
                if (totalEl) totalEl.textContent = data.total_synced || 0;
            } catch (e) {
                console.error('Sync status error:', e);
            }
        }
        
        // Auto-Sync Einstellungen aus DB laden
        async function loadAutoSyncSettings() {
            try {
                const res = await fetch(`${API_URL}?action=settings`);
                const data = await res.json();
                
                autoSyncEnabled = data.auto_sync_enabled === '1';
                
                // last_auto_sync ist ein Unix-Timestamp in Millisekunden
                const savedTime = parseInt(data.last_auto_sync || '0');
                const now = Date.now();
                
                // Validierung: Timestamp darf nicht in der Zukunft liegen
                // und nicht älter als 30 Tage sein
                const thirtyDaysAgo = now - (30 * 24 * 60 * 60 * 1000);
                
                if (savedTime > 0 && savedTime <= now && savedTime > thirtyDaysAgo) {
                    // Gültiger Timestamp
                    lastAutoSyncTime = savedTime;
                } else if (savedTime > 0 && savedTime < 10000000000) {
                    // Wahrscheinlich in Sekunden statt Millisekunden
                    const converted = savedTime * 1000;
                    if (converted <= now && converted > thirtyDaysAgo) {
                        lastAutoSyncTime = converted;
                    } else {
                        // Auch konvertiert ungültig - reset
                        lastAutoSyncTime = 0;
                    }
                } else {
                    // Ungültiger Timestamp (in der Zukunft oder zu alt) - reset
                    console.log('Auto-Sync: Ungültiger Timestamp, setze auf 0', { savedTime, now });
                    lastAutoSyncTime = 0;
                }
                
                // Wenn Auto-Sync aktiviert ist aber lastAutoSyncTime ungültig, setze aktuelle Zeit
                if (autoSyncEnabled && lastAutoSyncTime === 0) {
                    lastAutoSyncTime = now;
                    await fetch(`${API_URL}?action=settings`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ key: 'last_auto_sync', value: lastAutoSyncTime.toString() })
                    });
                    console.log('Auto-Sync: Timestamp auf aktuelle Zeit gesetzt', new Date(lastAutoSyncTime).toLocaleString());
                }
                
                console.log('Auto-Sync Settings geladen:', { 
                    autoSyncEnabled, 
                    lastAutoSyncTime: lastAutoSyncTime > 0 ? new Date(lastAutoSyncTime).toLocaleString() : 'nie',
                    rawValue: data.last_auto_sync,
                    now: new Date(now).toLocaleString()
                });
                
                const toggle = document.getElementById('auto-sync-toggle');
                if (toggle) toggle.checked = autoSyncEnabled;
                
                const infoEl = document.getElementById('auto-sync-info');
                if (infoEl) {
                    if (autoSyncEnabled) {
                        infoEl.classList.remove('hidden');
                        updateNextAutoSyncTime();
                    } else {
                        infoEl.classList.add('hidden');
                    }
                }
            } catch (e) {
                console.error('Load auto sync settings error:', e);
            }
        }
        
        // Auto-Sync umschalten (in DB speichern)
        async function toggleAutoSync() {
            const enabled = document.getElementById('auto-sync-toggle').checked;
            
            try {
                await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'auto_sync_enabled', value: enabled ? '1' : '0' })
                });
                
                autoSyncEnabled = enabled;
                
                // Beim Aktivieren: Setze letzte Sync-Zeit auf jetzt, damit nicht sofort gesynct wird
                if (enabled) {
                    lastAutoSyncTime = Date.now();
                    await fetch(`${API_URL}?action=settings`, {
                        method: 'PUT',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ key: 'last_auto_sync', value: lastAutoSyncTime.toString() })
                    });
                }
                
                const infoEl = document.getElementById('auto-sync-info');
                if (enabled) {
                    infoEl.classList.remove('hidden');
                    updateAutoSyncDisplay();
                } else {
                    infoEl.classList.add('hidden');
                }
                lucide.createIcons();
            } catch (e) {
                showToast('Fehler beim Speichern', 'error');
            }
        }
        
        // Auto-Sync Anzeige aktualisieren (nur letzter Sync)
        function updateAutoSyncDisplay() {
            const lastEl = document.getElementById('last-auto-sync-time');
            if (!lastEl) return;
            
            // Letzte Sync-Zeit anzeigen
            if (lastAutoSyncTime > 0) {
                const lastDate = new Date(lastAutoSyncTime);
                lastEl.textContent = lastDate.toLocaleString('de-DE', { 
                    day: '2-digit', month: '2-digit', year: 'numeric',
                    hour: '2-digit', minute: '2-digit', second: '2-digit'
                }) + ' Uhr';
            } else {
                lastEl.textContent = 'Noch nie';
            }
        }
        
        // Legacy-Funktion für Kompatibilität
        function updateNextAutoSyncTime() {
            updateAutoSyncDisplay();
        }
        
        // Auto-Sync prüfen und im Hintergrund ausführen (nur wenn Stunde vergangen)
        async function checkAndRunAutoSync() {
            if (!autoSyncEnabled) return;
            if (isSyncing) return;
            
            const now = Date.now();
            const timeSinceLastSync = now - lastAutoSyncTime;
            
            console.log('Auto-Sync Check:', {
                enabled: autoSyncEnabled,
                lastSync: new Date(lastAutoSyncTime).toLocaleString(),
                timeSince: Math.round(timeSinceLastSync / 60000) + ' min',
                intervalMin: Math.round(AUTO_SYNC_INTERVAL / 60000) + ' min',
                shouldRun: timeSinceLastSync >= AUTO_SYNC_INTERVAL
            });
            
            if (timeSinceLastSync >= AUTO_SYNC_INTERVAL) {
                console.log('Auto-Sync: Starting background sync...');
                await runBackgroundSync();
            }
        }
        
        // Hintergrund-Sync mit dezenter Toast-Anzeige
        async function runBackgroundSync() {
            if (isSyncing) return;
            
            isSyncing = true;
            const syncToast = document.getElementById('sync-toast');
            const syncToastText = document.getElementById('sync-toast-text');
            
            try {
                // Status prüfen
                const statusRes = await fetch(`${API_URL}?action=sync_status`);
                const statusData = await statusRes.json();
                const totalOutdated = statusData.outdated || 0;
                
                // Timestamp IMMER aktualisieren wenn Auto-Sync geprüft wird
                const now = Date.now();
                lastAutoSyncTime = now;
                await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'last_auto_sync', value: now.toString() })
                });
                
                if (totalOutdated === 0) {
                    // Keine Produkte zu synchronisieren - nur Anzeige aktualisieren
                    updateAutoSyncDisplay();
                    isSyncing = false;
                    return;
                }
                
                // Synchronisiere in Batches
                const batchSize = 5;
                let totalSynced = 0;
                let processed = 0;
                
                while (processed < totalOutdated && processed < 20) { // Max 20 im Hintergrund
                    const res = await fetch(`${API_URL}?action=sync&limit=${batchSize}`);
                    const data = await res.json();
                    
                    if (data.success) {
                        totalSynced += data.synced || 0;
                        processed += data.total || 0;
                        
                        if (data.total === 0 || data.synced === 0) break;
                    } else {
                        break;
                    }
                }
                
                // Produkte neu laden
                await loadProducts();
                loadSyncStatus();
                updateAutoSyncDisplay();
                
            } catch (e) {
                console.error('Background sync error:', e);
            } finally {
                isSyncing = false;
            }
        }
        
        // Manueller Sync Button - mit Fortschrittsbalken
        async function triggerManualSync(silent = false) {
            if (isSyncing) {
                if (!silent) showToast('Synchronisation läuft bereits...', 'info');
                return;
            }
            
            isSyncing = true;
            const btn = document.getElementById('manual-sync-btn');
            const icon = document.getElementById('sync-icon');
            const text = document.getElementById('sync-btn-text');
            const progressContainer = document.getElementById('sync-progress-container');
            const progressBar = document.getElementById('sync-progress-bar');
            const progressText = document.getElementById('sync-progress-text');
            const currentProduct = document.getElementById('sync-current-product');
            
            // UI Update
            if (btn) btn.disabled = true;
            if (icon) icon.classList.add('animate-spin');
            if (text) text.textContent = 'Synchronisiere...';
            
            try {
                // Zuerst: Hole Liste der zu synchronisierenden Produkte
                const statusRes = await fetch(`${API_URL}?action=sync_status`);
                const statusData = await statusRes.json();
                const totalOutdated = statusData.outdated || 0;
                
                // Timestamp IMMER aktualisieren - auch wenn nichts zu synchronisieren ist
                const now = Date.now();
                lastAutoSyncTime = now;
                await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'last_auto_sync', value: now.toString() })
                });
                
                if (totalOutdated === 0) {
                    if (!silent) showToast('Alle Produkte sind aktuell!', 'success');
                    loadSyncStatus();
                    updateAutoSyncDisplay();
                    return;
                }
                
                // Fortschrittsbalken anzeigen
                if (progressContainer && !silent) {
                    progressContainer.classList.remove('hidden');
                    progressBar.style.width = '0%';
                    progressText.textContent = `0 / ${totalOutdated}`;
                }
                
                if (!silent) showToast(`Starte Synchronisation von ${totalOutdated} Produkten...`, 'info');
                
                // Synchronisiere in Batches von 5 Produkten
                const batchSize = 5;
                let totalSynced = 0;
                let totalFailed = 0;
                let processed = 0;
                
                while (processed < totalOutdated) {
                    const res = await fetch(`${API_URL}?action=sync&limit=${batchSize}`);
                    const data = await res.json();
                    
                    if (data.success) {
                        totalSynced += data.synced || 0;
                        totalFailed += data.failed || 0;
                        processed += data.total || 0;
                        
                        // Fortschritt aktualisieren
                        const percent = Math.min(100, Math.round((processed / totalOutdated) * 100));
                        if (progressBar) progressBar.style.width = `${percent}%`;
                        if (progressText) progressText.textContent = `${processed} / ${totalOutdated}`;
                        if (currentProduct) currentProduct.textContent = `${totalSynced} erfolgreich, ${totalFailed} fehlgeschlagen`;
                        
                        // Wenn keine Produkte mehr übrig sind, aufhören
                        if (data.total === 0 || data.synced === 0) break;
                    } else {
                        throw new Error(data.error || 'Sync fehlgeschlagen');
                    }
                }
                
                // Fertig!
                if (progressBar) progressBar.style.width = '100%';
                
                if (!silent) {
                    if (totalSynced > 0) {
                        showToast(`✓ ${totalSynced} Produkte synchronisiert!`, 'success');
                    } else {
                        showToast('Alle Produkte sind aktuell', 'success');
                    }
                }
                
                // Produkte neu laden
                await loadProducts();
                loadSyncStatus();
                updateAutoSyncDisplay();
                
            } catch (e) {
                console.error('Sync error:', e);
                if (!silent) showToast('Synchronisation fehlgeschlagen: ' + e.message, 'error');
            } finally {
                isSyncing = false;
                if (btn) btn.disabled = false;
                if (icon) icon.classList.remove('animate-spin');
                if (text) text.textContent = 'Jetzt synchronisieren';
                
                // Fortschrittsbalken nach 2 Sekunden ausblenden
                setTimeout(() => {
                    if (progressContainer) progressContainer.classList.add('hidden');
                }, 2000);
            }
        }
        
        // Einzelprodukt synchronisieren
        async function syncSingleProduct(barcode, productName) {
            if (!barcode) {
                showToast('Kein Barcode verfügbar', 'error');
                return;
            }
            
            showToast(`Synchronisiere ${productName || 'Produkt'}...`, 'info');
            
            try {
                const res = await fetch(`${API_URL}?action=sync&barcode=${barcode}`);
                const data = await res.json();
                
                if (data.success) {
                    if (data.synced > 0) {
                        showToast('Produktdaten aktualisiert!', 'success');
                        // Produkte neu laden und Detail-Ansicht aktualisieren
                        await loadProducts();
                        // Detail-Modal aktualisieren falls offen
                        const product = products.find(p => p.barcode === barcode);
                        if (product) {
                            showDetailBasic(product);
                            if (product.barcode) {
                                fetchExtendedProductData(product.barcode, product);
                            }
                        }
                    } else {
                        showToast('Keine neuen Daten gefunden', 'info');
                    }
                } else {
                    throw new Error(data.error || 'Sync fehlgeschlagen');
                }
            } catch (e) {
                console.error('Single product sync error:', e);
                showToast('Synchronisation fehlgeschlagen', 'error');
            }
        }
        
        // Auto-Sync bei Seitenstart prüfen
        document.addEventListener('DOMContentLoaded', () => {
            // Nach Login Auto-Sync prüfen
            setTimeout(() => {
                if (sessionStorage.getItem(SESSION_KEY) === 'true') {
                    checkAndRunAutoSync();
                }
            }, 2000);
        });
        
        // ============ END SYNC FUNCTIONS ============
        
        // ============ SETTINGS FUNCTIONS ============
        
        // Settings laden wenn Settings-Tab geöffnet wird
        async function loadSecuritySettings() {
            try {
                const res = await fetch(`${API_URL}?action=settings`);
                const data = await res.json();
                
                // PIN-Länge anzeigen (maskiert)
                const pinInput = document.getElementById('settings-pin');
                if (pinInput && data.pin_length) {
                    pinInput.placeholder = '•'.repeat(data.pin_length);
                }
                
                // Sync-Key-Länge anzeigen (maskiert)
                const syncKeyInput = document.getElementById('settings-sync-key');
                if (syncKeyInput && data.sync_key_length) {
                    syncKeyInput.placeholder = '•'.repeat(data.sync_key_length);
                }
                
                // MHD-Warnung Tage laden
                if (data.expiry_warning_days) {
                    expiryWarningDays = parseInt(data.expiry_warning_days) || 3;
                    const slider = document.getElementById('settings-expiry-days');
                    const display = document.getElementById('expiry-days-value');
                    if (slider) slider.value = expiryWarningDays;
                    if (display) display.textContent = expiryWarningDays;
                }
            } catch (e) {
                console.error('Load security settings error:', e);
            }
        }
        
        // MHD-Warnung Tage Display aktualisieren
        function updateExpiryDaysDisplay() {
            const slider = document.getElementById('settings-expiry-days');
            const display = document.getElementById('expiry-days-value');
            if (slider && display) {
                display.textContent = slider.value;
            }
        }
        
        // MHD-Warnung Tage speichern
        async function saveExpiryDays() {
            const slider = document.getElementById('settings-expiry-days');
            const newDays = parseInt(slider.value);
            
            if (isNaN(newDays) || newDays < 1 || newDays > 14) {
                showToast('Ungültiger Wert', 'error');
                return;
            }
            
            try {
                const res = await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'expiry_warning_days', value: newDays.toString() })
                });
                const data = await res.json();
                
                if (data.success) {
                    expiryWarningDays = newDays;
                    showToast(`MHD-Warnung auf ${newDays} Tage gesetzt`, 'success');
                    // Dashboard aktualisieren um neue Warnung anzuzeigen
                    updateDashboard();
                } else {
                    throw new Error(data.error || 'Fehler beim Speichern');
                }
            } catch (e) {
                showToast(e.message || 'Fehler beim Speichern', 'error');
            }
        }
        
        // Globale Funktion zum Laden der MHD-Warnung beim App-Start
        async function loadExpiryWarningDays() {
            try {
                const res = await fetch(`${API_URL}?action=settings&key=expiry_warning_days`);
                const data = await res.json();
                if (data.value) {
                    expiryWarningDays = parseInt(data.value) || 3;
                }
            } catch (e) {
                console.error('Load expiry warning days error:', e);
            }
        }
        
        // PIN Sichtbarkeit umschalten
        function togglePinVisibility() {
            const input = document.getElementById('settings-pin');
            const icon = document.getElementById('pin-eye-icon');
            if (input.type === 'password') {
                input.type = 'text';
                icon.setAttribute('data-lucide', 'eye-off');
            } else {
                input.type = 'password';
                icon.setAttribute('data-lucide', 'eye');
            }
            lucide.createIcons();
        }
        
        // Sync-Key Sichtbarkeit umschalten
        function toggleSyncKeyVisibility() {
            const input = document.getElementById('settings-sync-key');
            const icon = document.getElementById('sync-key-eye-icon');
            if (input.type === 'password') {
                input.type = 'text';
                icon.setAttribute('data-lucide', 'eye-off');
            } else {
                input.type = 'password';
                icon.setAttribute('data-lucide', 'eye');
            }
            lucide.createIcons();
        }
        
        // PIN speichern
        async function savePin() {
            const input = document.getElementById('settings-pin');
            const newPin = input.value.trim();
            
            if (!newPin) {
                showToast('Bitte PIN eingeben', 'error');
                return;
            }
            
            if (newPin.length < 4) {
                showToast('PIN muss mindestens 4 Zeichen haben', 'error');
                return;
            }
            
            try {
                const res = await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'pin', value: newPin })
                });
                const data = await res.json();
                
                if (data.success) {
                    showToast('PIN erfolgreich geändert!', 'success');
                    input.value = '';
                    input.placeholder = '•'.repeat(newPin.length);
                } else {
                    throw new Error(data.error || 'Fehler beim Speichern');
                }
            } catch (e) {
                showToast(e.message || 'Fehler beim Speichern', 'error');
            }
        }
        
        // Sync-Key speichern
        async function saveSyncKey() {
            const input = document.getElementById('settings-sync-key');
            const newKey = input.value.trim();
            
            if (!newKey) {
                showToast('Bitte Sync-Key eingeben', 'error');
                return;
            }
            
            if (newKey.length < 8) {
                showToast('Sync-Key muss mindestens 8 Zeichen haben', 'error');
                return;
            }
            
            try {
                const res = await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'sync_key', value: newKey })
                });
                const data = await res.json();
                
                if (data.success) {
                    showToast('Sync-Key erfolgreich geändert!', 'success');
                    input.value = '';
                    input.placeholder = '•'.repeat(newKey.length);
                } else {
                    throw new Error(data.error || 'Fehler beim Speichern');
                }
            } catch (e) {
                showToast(e.message || 'Fehler beim Speichern', 'error');
            }
        }
        
        // OpenAI Key Funktionen
        function toggleOpenAIKeyVisibility() {
            const input = document.getElementById('settings-openai-key');
            const icon = document.getElementById('openai-key-eye-icon');
            if (input.type === 'password') {
                input.type = 'text';
                icon.setAttribute('data-lucide', 'eye-off');
            } else {
                input.type = 'password';
                icon.setAttribute('data-lucide', 'eye');
            }
            lucide.createIcons();
        }
        
        async function saveOpenAIKey() {
            const input = document.getElementById('settings-openai-key');
            const newKey = input.value.trim();
            
            if (!newKey) {
                showToast('Bitte API Key eingeben', 'error');
                return;
            }
            
            if (!newKey.startsWith('sk-')) {
                showToast('Ungültiger API Key Format (muss mit sk- beginnen)', 'error');
                return;
            }
            
            try {
                const res = await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'openai_api_key', value: newKey })
                });
                const data = await res.json();
                
                if (data.success) {
                    showToast('OpenAI API Key gespeichert!', 'success');
                    input.value = '';
                    input.placeholder = '••••••••••••••••';
                } else {
                    throw new Error(data.error || 'Fehler beim Speichern');
                }
            } catch (e) {
                showToast(e.message || 'Fehler beim Speichern', 'error');
            }
        }
        
        async function clearOpenAIKey() {
            if (!confirm('OpenAI API Key wirklich löschen? Es wird dann der integrierte Service genutzt.')) return;
            
            try {
                const res = await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'openai_api_key', value: '' })
                });
                const data = await res.json();
                
                if (data.success) {
                    showToast('API Key gelöscht - integrierter Service wird genutzt', 'success');
                    document.getElementById('settings-openai-key').value = '';
                    document.getElementById('settings-openai-key').placeholder = 'sk-...';
                }
            } catch (e) {
                showToast('Fehler beim Löschen', 'error');
            }
        }
        
        // ============ FAVORITE STORES FUNCTIONS ============
        let favoriteStores = [];
        
        async function loadFavoriteStores() {
            try {
                const res = await fetch(`${API_URL}?action=settings`);
                const data = await res.json();
                
                if (data.favorite_stores) {
                    favoriteStores = data.favorite_stores.split(',').filter(s => s.trim());
                } else {
                    favoriteStores = [];
                }
                
                updateFavoriteStoresUI();
            } catch (e) {
                console.error('Load favorite stores error:', e);
            }
        }
        
        function updateFavoriteStoresUI() {
            const chips = document.querySelectorAll('.store-chip');
            chips.forEach(chip => {
                const store = chip.dataset.store;
                if (favoriteStores.includes(store)) {
                    chip.classList.remove('border-slate-200', 'bg-slate-50', 'text-slate-600');
                    chip.classList.add('border-green-500', 'bg-green-50', 'text-green-700');
                } else {
                    chip.classList.remove('border-green-500', 'bg-green-50', 'text-green-700');
                    chip.classList.add('border-slate-200', 'bg-slate-50', 'text-slate-600');
                }
            });
            
            const countEl = document.getElementById('favorite-stores-count');
            if (countEl) countEl.textContent = favoriteStores.length;
        }
        
        async function toggleFavoriteStore(store) {
            if (favoriteStores.includes(store)) {
                favoriteStores = favoriteStores.filter(s => s !== store);
            } else {
                favoriteStores.push(store);
            }
            
            updateFavoriteStoresUI();
            
            // Speichern
            try {
                await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'favorite_stores', value: favoriteStores.join(',') })
                });
                showToast('Läden aktualisiert', 'success');
            } catch (e) {
                showToast('Fehler beim Speichern', 'error');
            }
        }
        
        // ============ END SETTINGS FUNCTIONS ============
        
        // ============================================
        // REZEPT-FUNKTIONEN (v1.8.0)
        // ============================================
        
        let selectedRecipeIngredients = [];
        let currentRecipeServings = 4;
        let currentRecipe = null;
        let currentCookingSession = null;
        let allInStockProducts = [];
        let recipeViewStack = ['main']; // Navigation Stack
        
        // Modal öffnen
        function openRecipeGenerator() {
            document.getElementById('recipe-modal').classList.remove('hidden');
            showRecipeView('main');
            loadRecipeIngredients();
            lucide.createIcons();
        }
        
        // View-Navigation
        function showRecipeView(view) {
            const views = ['main', 'result', 'favorites', 'cooking'];
            views.forEach(v => {
                const el = document.getElementById(`recipe-${v === 'main' ? 'main-view' : v + '-view'}`);
                if (el) el.classList.add('hidden');
            });
            
            const targetEl = document.getElementById(`recipe-${view === 'main' ? 'main-view' : view + '-view'}`);
            if (targetEl) targetEl.classList.remove('hidden');
            
            // AI Notice nur in main view
            const aiNotice = document.getElementById('recipe-ai-notice');
            if (aiNotice) aiNotice.classList.toggle('hidden', view !== 'main');
            
            // Back Button aktualisieren
            updateRecipeBackButton(view);
            
            // Header Titel
            const titles = { main: 'Rezeptideen', result: 'Rezept', favorites: 'Gespeicherte Rezepte', cooking: 'Kochmodus' };
            document.getElementById('recipe-header-title').textContent = titles[view] || 'Rezeptideen';
        }
        
        function updateRecipeBackButton(currentView) {
            const btn = document.getElementById('recipe-back-btn');
            const icon = document.getElementById('recipe-back-icon');
            
            if (currentView === 'main') {
                icon.setAttribute('data-lucide', 'x');
                btn.onclick = closeRecipeModal;
            } else {
                icon.setAttribute('data-lucide', 'arrow-left');
                btn.onclick = () => recipeGoBack();
            }
            lucide.createIcons();
        }
        
        function recipeGoBack() {
            const currentView = recipeViewStack[recipeViewStack.length - 1];
            if (currentView === 'main') {
                closeRecipeModal();
            } else {
                recipeViewStack.pop();
                showRecipeView(recipeViewStack[recipeViewStack.length - 1] || 'main');
            }
        }
        
        function closeRecipeModal() {
            document.getElementById('recipe-modal').classList.add('hidden');
            recipeViewStack = ['main'];
        }
        
        // Schnellauswahl Zutaten (wählt nur aus, generiert nicht direkt)
        function quickSelectIngredients(mode) {
            const expiryWarningDays = parseInt(localStorage.getItem('expiry_warning_days') || '3');
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            
            selectedRecipeIngredients = [];
            
            allInStockProducts.forEach(p => {
                const expiryDate = p.next_expiry ? new Date(p.next_expiry) : null;
                let daysUntil = expiryDate ? Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24)) : 999;
                
                if (mode === 'all') {
                    selectedRecipeIngredients.push({ id: p.id, name: p.name });
                } else if (mode === 'expiring' && daysUntil >= 0 && daysUntil <= expiryWarningDays) {
                    selectedRecipeIngredients.push({ id: p.id, name: p.name });
                } else if (mode === 'expired' && daysUntil <= expiryWarningDays) {
                    selectedRecipeIngredients.push({ id: p.id, name: p.name });
                }
            });
            
            if (selectedRecipeIngredients.length === 0) {
                const messages = {
                    'all': 'Keine Lebensmittel im Bestand',
                    'expiring': 'Keine bald ablaufenden Produkte',
                    'expired': 'Keine ablaufenden/abgelaufenen Produkte'
                };
                showToast(messages[mode] || 'Keine Produkte gefunden', 'info');
            } else {
                showToast(`${selectedRecipeIngredients.length} Zutaten ausgewählt`, 'success');
            }
            
            updateSelectedIngredientsDisplay();
            renderIngredientPicker();
        }
        
        // Zutaten-Picker ein/ausblenden
        function toggleIngredientPicker() {
            const container = document.getElementById('recipe-ingredient-picker-container');
            const btn = document.getElementById('toggle-ingredients-btn');
            const isHidden = container.classList.contains('hidden');
            
            container.classList.toggle('hidden');
            btn.textContent = isHidden ? 'Ausblenden' : 'Manuell auswählen';
        }
        
        // Zutaten für Auswahl laden (nur Lebensmittel)
        async function loadRecipeIngredients() {
            try {
                const res = await fetch(`${API_URL}?action=products&filter=instock`);
                let products = await res.json();
                
                // Blacklist für Nicht-Lebensmittel (Namen und Schlüsselwörter)
                const nonFoodKeywords = [
                    // Reinigung & Haushalt
                    'reiniger', 'reinigung', 'cleaning', 'cleaner', 'wc-', 'wc ', 'toilettenreiniger',
                    'spülmittel', 'geschirrspül', 'waschmittel', 'weichspüler', 'fleckenentferner',
                    'putzmittel', 'allzweckreiniger', 'entkalker', 'scheuermilch', 'glasreiniger',
                    
                    // Körperpflege (spezifischer, um Lebensmittel nicht zu erwischen)
                    'shampoo', 'duschgel', 'duschbad', 'handseife', 'flüssigseife', 'bodylotion',
                    'körperlotion', 'deo ', 'deodorant', 'parfum', 'parfüm', 'aftershave',
                    'rasierer', 'rasiergel', 'haargel', 'haarspray', 'haarkur', 'conditioner',
                    'zahnpasta', 'zahncreme', 'mundspülung', 'mundwasser', 'zahnbürste',
                    'kosmetik', 'makeup', 'make-up', 'mascara', 'lippenstift', 'nagellack',
                    'handcreme', 'bodyspray', 'gesichtscreme', 'sonnencreme', 'sonnenmilch',
                    
                    // Hygiene
                    'toilettenpapier', 'klopapier', 'taschentuch', 'taschentücher', 'tempos',
                    'tampons', 'damenbinden', 'windeln', 'feuchttücher',
                    
                    // Tierbedarf
                    'hundefutter', 'katzenfutter', 'tierfutter', 'tiernahrung', 'pet food',
                    'hundesnack', 'katzensnack', 'katzenstreu', 'aquarium',
                    
                    // Sonstiges Non-Food
                    'batterien', 'batterie', 'glühbirne', 'lampe', 'duftkerze',
                    'müllbeutel', 'müllsack', 'frischhaltefolie', 'alufolie',
                    'schwamm', 'spülschwamm', 'putzlappen', 'gummihandschuhe'
                ];
                
                // Filtern: Nur echte Lebensmittel behalten
                allInStockProducts = products.filter(p => {
                    // 1. Prüfe is_food Flag (aus DB) - hat höchste Priorität
                    if (p.is_food === 0 || p.is_food === '0' || p.is_food === false) {
                        console.log('Non-Food (Flag):', p.name);
                        return false;
                    }
                    
                    const name = (p.name || '').toLowerCase();
                    const source = (p.api_source || '').toLowerCase();
                    const categories = (p.categories || '').toLowerCase();
                    
                    // 2. Wenn Produkt von OpenFoodFacts kommt, ist es IMMER ein Lebensmittel
                    if (source.includes('openfoodfacts') || source === 'off') {
                        return true; // Definitiv Lebensmittel
                    }
                    
                    // 3. API-Quelle prüfen - Beauty und Pet Food sind IMMER Non-Food
                    if (source.includes('beauty') || source.includes('pet')) {
                        console.log('Non-Food (API Source):', p.name, '→', source);
                        return false;
                    }
                    
                    // 4. Kategorien prüfen
                    if (categories.includes('kosmetik') || categories.includes('cosmetic') || 
                        categories.includes('beauty') || categories.includes('reinigung') ||
                        categories.includes('cleaning') || categories.includes('hygiene') || 
                        categories.includes('pet food') || categories.includes('tierfutter')) {
                        console.log('Non-Food (Kategorie):', p.name);
                        return false;
                    }
                    
                    // 5. Blacklist-Keywords NUR für manuelle Produkte (ohne api_source)
                    if (!source || source === '') {
                        for (const keyword of nonFoodKeywords) {
                            if (name.includes(keyword)) {
                                console.log('Non-Food (Keyword):', p.name, '→', keyword);
                                return false;
                            }
                        }
                    }
                    
                    return true;
                });
                
                console.log(`Rezept-Zutaten: ${allInStockProducts.length} von ${products.length} Produkten sind Lebensmittel`);
                
                renderIngredientPicker();
            } catch (e) {
                console.error('Fehler beim Laden der Zutaten:', e);
            }
        }
        
        function renderIngredientPicker() {
            const container = document.getElementById('recipe-ingredient-picker');
            const expiryWarningDays = parseInt(localStorage.getItem('expiry_warning_days') || '3');
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            
            if (allInStockProducts.length === 0) {
                container.innerHTML = '<p class="text-slate-400 text-sm text-center py-4">Keine Produkte im Bestand</p>';
                return;
            }
            
            container.innerHTML = allInStockProducts.map(p => {
                const isSelected = selectedRecipeIngredients.some(i => i.id === p.id);
                const expiryDate = p.next_expiry ? new Date(p.next_expiry) : null;
                let expiryClass = '';
                let expiryIcon = '';
                
                if (expiryDate) {
                    const daysUntil = Math.ceil((expiryDate - today) / (1000 * 60 * 60 * 24));
                    if (daysUntil < 0) {
                        expiryClass = 'border-l-2 border-red-400';
                        expiryIcon = '<i data-lucide="alert-circle" class="w-3 h-3 text-red-500"></i>';
                    } else if (daysUntil <= expiryWarningDays) {
                        expiryClass = 'border-l-2 border-amber-400';
                        expiryIcon = '<i data-lucide="clock" class="w-3 h-3 text-amber-500"></i>';
                    }
                }
                
                return `
                    <div onclick="toggleRecipeIngredient('${p.id}')" 
                         class="flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${isSelected ? 'bg-amber-100 border border-amber-300' : 'bg-white border border-slate-200 hover:bg-slate-50'} ${expiryClass}">
                        <div class="w-5 h-5 rounded border-2 ${isSelected ? 'bg-amber-500 border-amber-500' : 'border-slate-300'} flex items-center justify-center">
                            ${isSelected ? '<i data-lucide="check" class="w-3 h-3 text-white"></i>' : ''}
                        </div>
                        <span class="text-slate-800 text-sm flex-1 truncate">${p.name}</span>
                        ${expiryIcon}
                        <span class="text-slate-500 text-xs">${p.quantity}x</span>
                    </div>
                `;
            }).join('');
            
            lucide.createIcons();
        }
        
        function toggleRecipeIngredient(productId) {
            const product = allInStockProducts.find(p => p.id === productId);
            if (!product) return;
            
            const index = selectedRecipeIngredients.findIndex(i => i.id === productId);
            if (index >= 0) {
                selectedRecipeIngredients.splice(index, 1);
            } else {
                selectedRecipeIngredients.push({ id: product.id, name: product.name });
            }
            
            updateSelectedIngredientsDisplay();
            renderIngredientPicker();
        }
        
        function updateSelectedIngredientsDisplay() {
            const container = document.getElementById('recipe-selected-ingredients');
            
            if (selectedRecipeIngredients.length === 0) {
                container.innerHTML = '<span class="text-slate-400 text-xs">Keine Zutaten ausgewählt</span>';
                return;
            }
            
            container.innerHTML = selectedRecipeIngredients.map(ing => `
                <span onclick="toggleRecipeIngredient('${ing.id}')" 
                      class="px-2 py-1 bg-amber-100 text-amber-800 text-xs rounded-full cursor-pointer hover:bg-amber-200 flex items-center gap-1 border border-amber-200">
                    ${ing.name}
                    <i data-lucide="x" class="w-3 h-3"></i>
                </span>
            `).join('');
            
            lucide.createIcons();
        }
        
        function adjustRecipeServings(delta) {
            currentRecipeServings = Math.max(1, Math.min(12, currentRecipeServings + delta));
            document.getElementById('recipe-servings').textContent = currentRecipeServings;
        }
        
        // Rezept generieren (vom manuellen Builder)
        async function generateRecipe() {
            if (selectedRecipeIngredients.length === 0) {
                showToast('Bitte wähle mindestens eine Zutat aus', 'error');
                return;
            }
            
            const btn = document.getElementById('generate-recipe-btn');
            btn.disabled = true;
            btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i> Rezept wird erstellt...';
            lucide.createIcons();
            
            try {
                await generateRecipeInternal();
            } finally {
                btn.disabled = false;
                btn.innerHTML = '<i data-lucide="sparkles" class="w-5 h-5"></i> Rezept generieren';
                lucide.createIcons();
            }
        }
        
        // Interne Rezept-Generierung (wird von generateRecipe und quickRecipe aufgerufen)
        let generatedRecipes = []; // Speichert die 3 Vorschläge
        
        async function generateRecipeInternal() {
            // Ernährungsfilter sammeln (falls vorhanden)
            const dietaryFilters = [];
            const veganEl = document.getElementById('recipe-filter-vegan');
            const vegetarianEl = document.getElementById('recipe-filter-vegetarian');
            const glutenfreeEl = document.getElementById('recipe-filter-glutenfree');
            const lactosefreeEl = document.getElementById('recipe-filter-lactosefree');
            
            if (veganEl && veganEl.checked) dietaryFilters.push('vegan');
            if (vegetarianEl && vegetarianEl.checked) dietaryFilters.push('vegetarisch');
            if (glutenfreeEl && glutenfreeEl.checked) dietaryFilters.push('glutenfrei');
            if (lactosefreeEl && lactosefreeEl.checked) dietaryFilters.push('laktosefrei');
            
            // Ablaufende Produkte finden
            const expiryWarningDays = parseInt(localStorage.getItem('expiry_warning_days') || '3');
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            
            const expiringProducts = allInStockProducts
                .filter(p => {
                    if (!p.next_expiry) return false;
                    const days = Math.ceil((new Date(p.next_expiry) - today) / (1000 * 60 * 60 * 24));
                    return days <= expiryWarningDays;
                })
                .map(p => p.name);
            
            // Only available checkbox (falls vorhanden)
            const onlyAvailableEl = document.getElementById('recipe-only-available');
            const onlyAvailable = onlyAvailableEl ? onlyAvailableEl.checked : true;
            
            try {
                const res = await fetch(`${API_URL}?action=generate_recipe`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        ingredients: selectedRecipeIngredients,
                        servings: currentRecipeServings,
                        only_available: onlyAvailable,
                        dietary_filters: dietaryFilters,
                        expiring_first: expiringProducts.length > 0,
                        expiring_products: expiringProducts
                    })
                });
                
                const data = await res.json();
                
                console.log('Recipe API Response:', data); // Debug
                
                if (data.error) {
                    // Benutzerfreundliche Fehlermeldungen
                    let errorMsg = data.error;
                    if (errorMsg.includes('quota') || errorMsg.includes('rate')) {
                        errorMsg = 'KI-Dienst vorübergehend nicht verfügbar. Bitte später erneut versuchen.';
                    } else if (errorMsg.includes('timeout') || errorMsg.includes('Timeout')) {
                        errorMsg = 'Zeitüberschreitung bei der Rezeptgenerierung. Bitte erneut versuchen.';
                    } else if (errorMsg.includes('Keine Produkte')) {
                        errorMsg = 'Bitte füge erst Produkte zu deinem Bestand hinzu, um Rezepte zu generieren.';
                    }
                    throw new Error(errorMsg);
                }
                
                // Neue API: mehrere Rezepte
                if (data.recipes && Array.isArray(data.recipes) && data.recipes.length > 0) {
                    generatedRecipes = data.recipes;
                    console.log('Generated recipes:', generatedRecipes); // Debug
                    
                    // Prüfen ob alle Rezepte "nicht möglich" sind
                    const possibleRecipes = generatedRecipes.filter(r => r.possible !== false);
                    
                    if (possibleRecipes.length === 0) {
                        // Zeige eine informative Meldung an
                        showRecipeNoResultView(data.only_available);
                        return;
                    }
                    
                    showRecipeSelection(generatedRecipes);
                } else if (data.recipe) {
                    // Alte API-Kompatibilität: einzelnes Rezept
                    currentRecipe = data.recipe;
                    showRecipeResult(currentRecipe);
                } else if (data.message) {
                    // KI konnte keine Rezepte generieren - informative Meldung
                    showRecipeNoResultView(data.only_available, data.message);
                    return;
                } else {
                    console.error('No recipes in response:', data);
                    throw new Error('Die KI konnte leider keine passenden Rezepte finden. Versuche es mit anderen Zutaten.');
                }
                
            } catch (e) {
                console.error('generateRecipeInternal error:', e);
                showToast(e.message || 'Fehler beim Generieren', 'error', 5000);
                // Zurück zur Quickstart-Ansicht bei Fehler
                document.getElementById('recipe-quickstart').classList.remove('hidden');
                document.getElementById('recipe-result-view').classList.add('hidden');
            }
        }
        
        // Keine Rezepte gefunden - Informative Ansicht
        function showRecipeNoResultView(onlyAvailable, message) {
            showRecipeView('result');
            
            const resultView = document.getElementById('recipe-result-view');
            resultView.innerHTML = `
                <div class="flex flex-col items-center justify-center py-8 px-4 text-center">
                    <div class="w-20 h-20 rounded-full bg-amber-100 flex items-center justify-center mb-4">
                        <i data-lucide="chef-hat" class="w-10 h-10 text-amber-500"></i>
                    </div>
                    <h2 class="text-xl font-bold text-slate-900 mb-2">Keine passenden Rezepte</h2>
                    <p class="text-slate-500 mb-6 max-w-sm">
                        ${message || (onlyAvailable 
                            ? 'Mit deinen aktuell vorhandenen Zutaten konnte die KI leider kein sinnvolles Rezept erstellen.' 
                            : 'Die KI konnte leider keine passenden Rezepte für deine Auswahl finden.')}
                    </p>
                    
                    <div class="space-y-3 w-full max-w-xs">
                        ${onlyAvailable ? `
                            <button onclick="document.getElementById('recipe-filter-available').checked = false; regenerateRecipes();" class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-medium flex items-center justify-center gap-2">
                                <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                                Mit Einkaufsvorschlägen suchen
                            </button>
                        ` : ''}
                        
                        <button onclick="regenerateRecipes()" class="w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-medium flex items-center justify-center gap-2">
                            <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                            Nochmal versuchen
                        </button>
                        
                        <button onclick="backToRecipeIngredients()" class="w-full py-3 text-slate-500 hover:text-slate-700 text-sm flex items-center justify-center gap-2">
                            <i data-lucide="arrow-left" class="w-4 h-4"></i>
                            Zutaten anpassen
                        </button>
                    </div>
                    
                    <div class="mt-6 p-4 bg-slate-50 rounded-xl text-left text-sm text-slate-600 max-w-sm">
                        <p class="font-medium mb-2 flex items-center gap-2">
                            <i data-lucide="lightbulb" class="w-4 h-4 text-amber-500"></i>
                            Tipps:
                        </p>
                        <ul class="space-y-1 text-xs text-slate-500">
                            <li>• Füge mehr Grundzutaten hinzu (Eier, Milch, Mehl, Öl)</li>
                            <li>• Wähle weniger oder andere Zutaten aus</li>
                            <li>• Deaktiviere Filter wie "Vegan" oder "Glutenfrei"</li>
                        </ul>
                    </div>
                </div>
            `;
            
            lucide.createIcons();
        }
        
        // Rezept-Auswahl anzeigen (3 Vorschläge)
        function showRecipeSelection(recipes) {
            // Sicherheitsprüfung
            if (!recipes || !Array.isArray(recipes) || recipes.length === 0) {
                console.error('showRecipeSelection: No valid recipes', recipes);
                showRecipeNoResultView(false, 'Keine Rezepte zum Anzeigen');
                return;
            }
            
            recipeViewStack.push('selection');
            showRecipeView('result');
            
            const difficultyColors = {
                'einfach': 'bg-green-100 text-green-700',
                'mittel': 'bg-amber-100 text-amber-700',
                'anspruchsvoll': 'bg-red-100 text-red-700'
            };
            
            document.getElementById('recipe-result-view').innerHTML = `
                <!-- Header ohne doppelten Zurück-Button -->
                <div class="text-center mb-4">
                    <h2 class="text-lg font-bold text-slate-900">Wähle ein Rezept</h2>
                    <p class="text-sm text-slate-500 mt-1">
                        ${recipes.filter(r => r.possible !== false).length} passende Vorschläge gefunden
                    </p>
                </div>
                
                <!-- Rezept-Karten -->
                <div class="space-y-3">
                    ${recipes.map((recipe, idx) => {
                        const isPossible = recipe.possible !== false;
                        const totalTime = (recipe.prep_time || 0) + (recipe.cook_time || 0);
                        const missingCount = (recipe.ingredients || []).filter(i => i.available === false).length;
                        
                        return `
                            <button onclick="${isPossible ? `selectRecipeFromList(${idx})` : ''}" class="w-full p-4 rounded-2xl border-2 ${isPossible ? 'bg-white border-slate-200 hover:border-blue-400 hover:bg-blue-50/50' : 'bg-slate-50 border-slate-200 opacity-60 cursor-not-allowed'} transition-all text-left" ${!isPossible ? 'disabled' : ''}>
                                <div class="flex items-start gap-3">
                                    <div class="w-12 h-12 rounded-xl ${isPossible ? 'bg-gradient-to-br from-amber-100 to-orange-200' : 'bg-slate-200'} flex items-center justify-center flex-shrink-0">
                                        <i data-lucide="${isPossible ? 'chef-hat' : 'x'}" class="w-6 h-6 ${isPossible ? 'text-amber-600' : 'text-slate-400'}"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <h3 class="font-bold text-slate-900 truncate">${recipe.title}</h3>
                                        <p class="text-sm text-slate-500 line-clamp-2 mt-0.5">${recipe.description || ''}</p>
                                        <div class="flex items-center gap-2 mt-2 flex-wrap">
                                            ${totalTime > 0 ? `<span class="text-xs bg-slate-100 px-2 py-1 rounded-full text-slate-600"><i data-lucide="clock" class="w-3 h-3 inline"></i> ${totalTime} Min.</span>` : ''}
                                            <span class="text-xs px-2 py-1 rounded-full ${difficultyColors[recipe.difficulty] || difficultyColors['mittel']}">${recipe.difficulty || 'mittel'}</span>
                                            ${missingCount > 0 ? `<span class="text-xs bg-red-100 px-2 py-1 rounded-full text-red-600"><i data-lucide="shopping-cart" class="w-3 h-3 inline"></i> ${missingCount} fehlt</span>` : '<span class="text-xs bg-green-100 px-2 py-1 rounded-full text-green-600">✓ Alles da</span>'}
                                        </div>
                                        ${!isPossible ? `<p class="text-xs text-red-500 mt-2"><i data-lucide="info" class="w-3 h-3 inline"></i> ${recipe.reason || 'Nicht möglich mit vorhandenen Zutaten'}</p>` : ''}
                                    </div>
                                    ${isPossible ? '<i data-lucide="chevron-right" class="w-5 h-5 text-slate-400 flex-shrink-0 self-center"></i>' : ''}
                                </div>
                            </button>
                        `;
                    }).join('')}
                </div>
                
                <!-- Nochmal generieren -->
                <button onclick="regenerateRecipes()" class="w-full mt-4 py-3 bg-blue-50 text-blue-600 rounded-xl text-sm font-medium flex items-center justify-center gap-2 hover:bg-blue-100 border border-blue-200">
                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                    Andere Vorschläge generieren
                </button>
            `;
            
            lucide.createIcons();
        }
        
        function selectRecipeFromList(index) {
            if (index >= 0 && index < generatedRecipes.length && generatedRecipes[index]) {
                currentRecipe = generatedRecipes[index];
                if (currentRecipe && currentRecipe.title) {
                    showRecipeResult(currentRecipe);
                } else {
                    console.error('selectRecipeFromList: Invalid recipe at index', index, generatedRecipes[index]);
                    showToast('Fehler beim Laden des Rezepts', 'error');
                }
            } else {
                console.error('selectRecipeFromList: Invalid index or empty recipes', index, generatedRecipes);
            }
        }
        
        function regenerateRecipes() {
            // Reset und erneut generieren
            generatedRecipes = [];
            currentRecipe = null;
            
            // Loading anzeigen
            document.getElementById('recipe-result-view').innerHTML = `
                <div class="flex flex-col items-center justify-center py-12">
                    <i data-lucide="loader-2" class="w-10 h-10 text-blue-500 animate-spin"></i>
                    <p class="text-slate-500 mt-4">Neue Rezepte werden generiert...</p>
                </div>
            `;
            lucide.createIcons();
            
            // Rezept generieren
            generateRecipeInternal().catch(e => {
                showToast('Fehler: ' + (e.message || 'Unbekannt'), 'error');
                showRecipeView('main');
            });
        }
        
        function backToRecipeSelection() {
            if (generatedRecipes.length > 0) {
                showRecipeSelection(generatedRecipes);
            } else {
                backToRecipeIngredients();
            }
        }
        
        // Rezept anzeigen
        function showRecipeResult(recipe) {
            // Sicherheitsprüfung: recipe muss definiert sein
            if (!recipe || typeof recipe !== 'object') {
                console.error('showRecipeResult: recipe is undefined or invalid', recipe);
                showToast('Fehler beim Anzeigen des Rezepts', 'error');
                return;
            }
            
            recipeViewStack.push('result');
            showRecipeView('result');
            
            const totalTime = (recipe.prep_time || 0) + (recipe.cook_time || 0);
            const difficultyColors = {
                'einfach': 'bg-green-100 text-green-700',
                'mittel': 'bg-amber-100 text-amber-700',
                'anspruchsvoll': 'bg-red-100 text-red-700'
            };
            
            const availableIngredients = (recipe.ingredients || []).filter(i => i.available !== false);
            const missingIngredients = (recipe.ingredients || []).filter(i => i.available === false);
            
            document.getElementById('recipe-result-view').innerHTML = `
                <div class="space-y-4">
                    <!-- Zurück-Button wenn es mehrere Vorschläge gab -->
                    ${generatedRecipes.length > 1 ? `
                        <div class="flex items-center gap-3 mb-2">
                            <button onclick="backToRecipeSelection()" class="flex items-center gap-2 text-blue-600 hover:text-blue-700 text-sm font-medium">
                                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                                Andere Vorschläge
                            </button>
                        </div>
                    ` : ''}
                    
                    <!-- Header -->
                    <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl p-4 border border-amber-200">
                        <div class="flex items-start justify-between mb-2">
                            <h3 class="text-xl font-bold text-slate-900 flex-1">${recipe.title}</h3>
                            <button onclick="toggleRecipeFavorite('${recipe.id}')" class="w-10 h-10 rounded-full ${recipe.is_favorite ? 'bg-red-500 text-white' : 'bg-white text-red-400 border border-red-200'} flex items-center justify-center shadow-sm">
                                <i data-lucide="heart" class="w-5 h-5 ${recipe.is_favorite ? 'fill-current' : ''}"></i>
                            </button>
                        </div>
                        <p class="text-slate-600 text-sm mb-3">${recipe.description || ''}</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-2.5 py-1 bg-white/80 rounded-full text-slate-700 text-xs flex items-center gap-1 border border-slate-200">
                                <i data-lucide="users" class="w-3 h-3"></i> ${recipe.servings} Portionen
                            </span>
                            <span class="px-2.5 py-1 bg-white/80 rounded-full text-slate-700 text-xs flex items-center gap-1 border border-slate-200">
                                <i data-lucide="clock" class="w-3 h-3"></i> ${totalTime} Min.
                            </span>
                            <span class="px-2.5 py-1 ${difficultyColors[recipe.difficulty] || difficultyColors['mittel']} rounded-full text-xs">
                                ${recipe.difficulty || 'mittel'}
                            </span>
                        </div>
                    </div>
                    
                    <!-- Zutaten -->
                    <div class="bg-slate-50 rounded-2xl p-4 border border-slate-200">
                        <h4 class="text-slate-900 font-semibold mb-3 flex items-center gap-2">
                            <i data-lucide="shopping-basket" class="w-4 h-4 text-amber-500"></i>
                            Zutaten
                        </h4>
                        <div class="space-y-2">
                            ${availableIngredients.map(ing => `
                                <div class="flex items-center gap-2 text-sm">
                                    <span class="w-2 h-2 rounded-full bg-green-500"></span>
                                    <span class="text-slate-700 font-medium">${ing.amount || ''}</span>
                                    <span class="text-slate-600">${ing.name}</span>
                                </div>
                            `).join('')}
                            ${missingIngredients.length > 0 ? `
                                <div class="mt-3 pt-3 border-t border-slate-200">
                                    <p class="text-red-600 text-xs font-medium mb-2">
                                        <i data-lucide="alert-circle" class="w-3 h-3 inline"></i>
                                        Fehlt noch (${missingIngredients.length}):
                                    </p>
                                    <div class="space-y-2">
                                        ${missingIngredients.map((ing, idx) => `
                                            <div class="flex items-center justify-between gap-2 text-sm py-1.5 px-2 bg-red-50 rounded-lg border border-red-100" data-ingredient-name="${ing.name.replace(/"/g, '&quot;')}" data-ingredient-amount="${(ing.amount || '').replace(/"/g, '&quot;')}">
                                                <div class="flex items-center gap-2 flex-1 min-w-0">
                                                    <span class="w-2 h-2 rounded-full bg-red-500 flex-shrink-0"></span>
                                                    <span class="text-slate-700 font-medium text-xs">${ing.amount || ''}</span>
                                                    <span class="text-slate-600 truncate">${ing.name}</span>
                                                </div>
                                                <button onclick="openIngredientPicker('${ing.name.replace(/'/g, "\\'")}', '${(ing.amount || '').replace(/'/g, "\\'")}')" class="px-2 py-1 bg-blue-500 text-white rounded-lg text-xs hover:bg-blue-600 flex-shrink-0 flex items-center gap-1" data-testid="pick-ingredient-${idx}">
                                                    <i data-lucide="plus" class="w-3 h-3"></i>
                                                    <span class="hidden sm:inline">Hinzufügen</span>
                                                </button>
                                            </div>
                                        `).join('')}
                                    </div>
                                    <button onclick="addAllMissingQuick()" class="mt-3 w-full py-2 bg-slate-100 text-slate-600 rounded-xl text-xs flex items-center justify-center gap-2 hover:bg-slate-200 border border-slate-200" data-testid="add-all-quick">
                                        <i data-lucide="zap" class="w-3 h-3"></i>
                                        Alle schnell als manuelle Artikel hinzufügen
                                    </button>
                                </div>
                            ` : ''}
                        </div>
                    </div>
                    
                    <!-- Schritte Vorschau -->
                    <div class="bg-slate-50 rounded-2xl p-4 border border-slate-200">
                        <h4 class="text-slate-900 font-semibold mb-3 flex items-center gap-2">
                            <i data-lucide="list-ordered" class="w-4 h-4 text-amber-500"></i>
                            Zubereitung (${(recipe.steps || []).length} Schritte)
                        </h4>
                        <div class="space-y-2 max-h-48 overflow-y-auto">
                            ${(recipe.steps || []).map((step, i) => `
                                <div class="flex gap-3 text-sm">
                                    <span class="w-6 h-6 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center flex-shrink-0 text-xs font-bold">${i + 1}</span>
                                    <p class="text-slate-600">${step.instruction}</p>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                    
                    ${recipe.tips ? `
                        <div class="bg-blue-50 border border-blue-200 rounded-xl p-3">
                            <p class="text-blue-700 text-sm flex items-start gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 flex-shrink-0 mt-0.5 text-blue-500"></i>
                                <span>${recipe.tips}</span>
                            </p>
                        </div>
                    ` : ''}
                    
                    <!-- Aktionen -->
                    <div class="flex gap-3">
                        <button onclick="backToRecipeGenerator()" class="flex-1 py-3 bg-slate-100 text-slate-700 rounded-xl font-semibold flex items-center justify-center gap-2 border border-slate-200">
                            <i data-lucide="arrow-left" class="w-4 h-4"></i>
                            Zurück
                        </button>
                        <button onclick="startCookingMode('${recipe.id}')" class="flex-1 py-3 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-xl font-semibold flex items-center justify-center gap-2 shadow-lg shadow-green-500/25">
                            <i data-lucide="chef-hat" class="w-4 h-4"></i>
                            Kochen starten
                        </button>
                    </div>
                </div>
            `;
            
            lucide.createIcons();
        }
        
        function backToRecipeGenerator() {
            recipeGoBack();
        }
        
        // Favoriten verwalten
        async function toggleRecipeFavorite(recipeId) {
            try {
                const recipe = currentRecipe;
                
                // Wenn Rezept noch keine ID hat (neu generiert), erst speichern
                if (!recipeId || recipeId === 'undefined' || recipeId === 'null') {
                    // Rezept speichern und als Favorit markieren
                    const res = await fetch(`${API_URL}?action=save_recipe`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ recipe: { ...recipe, is_favorite: true } })
                    });
                    const data = await res.json();
                    
                    if (data.success && data.recipe) {
                        currentRecipe = data.recipe;
                        currentRecipe.is_favorite = true;
                        showRecipeResult(currentRecipe);
                        showToast('Zu Favoriten hinzugefügt', 'success');
                        loadDashboardStats(); // Favoriten-Counter aktualisieren
                    } else {
                        throw new Error(data.error || 'Fehler beim Speichern');
                    }
                } else {
                    // Bestehendes Rezept: Favorit-Status togglen
                    const method = recipe && recipe.is_favorite ? 'DELETE' : 'PUT';
                    await fetch(`${API_URL}?action=recipe_favorite&id=${recipeId}`, { method });
                    
                    if (currentRecipe && currentRecipe.id === recipeId) {
                        currentRecipe.is_favorite = !currentRecipe.is_favorite;
                        showRecipeResult(currentRecipe);
                    }
                    
                    showToast(currentRecipe.is_favorite ? 'Zu Favoriten hinzugefügt' : 'Aus Favoriten entfernt', 'success');
                    loadDashboardStats(); // Favoriten-Counter aktualisieren
                }
            } catch (e) {
                showToast('Fehler beim Speichern', 'error');
                console.error('toggleRecipeFavorite error:', e);
            }
        }
        
        // Favoriten/Verlauf anzeigen
        async function openRecipeFavorites() {
            recipeViewStack.push('favorites');
            showRecipeView('favorites');
            
            await loadRecipeList('favorites');
        }
        
        async function showRecipeTab(tab) {
            document.getElementById('recipe-tab-favorites').className = `flex-1 py-2 rounded-xl text-sm font-semibold ${tab === 'favorites' ? 'bg-amber-500 text-white' : 'bg-slate-100 text-slate-600'}`;
            document.getElementById('recipe-tab-history').className = `flex-1 py-2 rounded-xl text-sm font-semibold ${tab === 'history' ? 'bg-amber-500 text-white' : 'bg-slate-100 text-slate-600'}`;
            
            await loadRecipeList(tab);
        }
        
        async function loadRecipeList(filter) {
            const container = document.getElementById('recipe-list');
            container.innerHTML = '<div class="text-center py-8"><i data-lucide="loader-2" class="w-6 h-6 text-slate-400 animate-spin mx-auto"></i></div>';
            lucide.createIcons();
            
            try {
                const res = await fetch(`${API_URL}?action=recipes&filter=${filter}`);
                const recipes = await res.json();
                
                if (recipes.length === 0) {
                    container.innerHTML = `
                        <div class="text-center py-8">
                            <i data-lucide="${filter === 'favorites' ? 'heart' : 'history'}" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>
                            <p class="text-slate-500">${filter === 'favorites' ? 'Noch keine Favoriten' : 'Noch keine Rezepte erstellt'}</p>
                        </div>
                    `;
                    lucide.createIcons();
                    return;
                }
                
                container.innerHTML = recipes.map(r => {
                    const totalTime = (r.prep_time || 0) + (r.cook_time || 0);
                    return `
                        <div class="recipe-card" onclick="openSavedRecipe('${r.id}')">
                            <div class="flex items-start justify-between">
                                <div class="flex-1">
                                    <h4 class="font-bold text-slate-900">${r.title}</h4>
                                    <p class="text-slate-600 text-xs mt-1 line-clamp-2">${r.description || ''}</p>
                                </div>
                                ${r.is_favorite ? '<i data-lucide="heart" class="w-5 h-5 text-red-500 fill-current flex-shrink-0"></i>' : ''}
                            </div>
                            <div class="flex gap-2 mt-2">
                                <span class="text-xs text-slate-600 flex items-center gap-1">
                                    <i data-lucide="users" class="w-3 h-3"></i> ${r.servings}
                                </span>
                                <span class="text-xs text-slate-600 flex items-center gap-1">
                                    <i data-lucide="clock" class="w-3 h-3"></i> ${totalTime} Min
                                </span>
                                <span class="text-xs text-slate-600">${r.difficulty}</span>
                            </div>
                        </div>
                    `;
                }).join('');
                
                lucide.createIcons();
            } catch (e) {
                container.innerHTML = '<p class="text-red-500 text-center py-4">Fehler beim Laden</p>';
            }
        }
        
        async function openSavedRecipe(recipeId) {
            try {
                const res = await fetch(`${API_URL}?action=recipes`);
                const recipes = await res.json();
                const recipe = recipes.find(r => r.id === recipeId);
                
                if (recipe) {
                    currentRecipe = recipe;
                    showRecipeResult(recipe);
                }
            } catch (e) {
                showToast('Fehler beim Laden', 'error');
            }
        }
        
        // ============================================
        // INGREDIENT PICKER - Intelligentes Hinzufügen
        // ============================================
        let currentIngredientName = '';
        let currentIngredientAmount = '';
        
        async function openIngredientPicker(name, amount) {
            currentIngredientName = name;
            currentIngredientAmount = amount;
            
            const modal = document.getElementById('ingredient-picker-modal');
            const title = document.getElementById('ingredient-picker-title');
            const subtitle = document.getElementById('ingredient-picker-subtitle');
            const loading = document.getElementById('ingredient-picker-loading');
            const suggestions = document.getElementById('ingredient-picker-suggestions');
            
            title.textContent = name;
            subtitle.textContent = amount ? `Benötigt: ${amount}` : 'Wähle ein Produkt oder lege es manuell an';
            
            modal.classList.remove('hidden');
            loading.classList.remove('hidden');
            suggestions.classList.add('hidden');
            
            lucide.createIcons();
            
            // Suche nach Vorschlägen (mit Stores-Filter)
            try {
                let url = `${API_URL}?action=search_ingredient_suggestions&q=${encodeURIComponent(name)}`;
                if (favoriteStores.length > 0) {
                    url += `&stores=${encodeURIComponent(favoriteStores.join(','))}`;
                }
                const res = await fetch(url);
                const data = await res.json();
                
                loading.classList.add('hidden');
                suggestions.classList.remove('hidden');
                
                renderIngredientSuggestions(data.suggestions || []);
            } catch (e) {
                loading.classList.add('hidden');
                suggestions.classList.remove('hidden');
                renderIngredientSuggestions([]);
            }
        }
        
        function renderIngredientSuggestions(suggestions) {
            const localSection = document.getElementById('ingredient-local-section');
            const localList = document.getElementById('ingredient-local-list');
            const offSection = document.getElementById('ingredient-off-section');
            const offList = document.getElementById('ingredient-off-list');
            const noResults = document.getElementById('ingredient-no-results');
            
            const localProducts = suggestions.filter(s => s.type === 'local');
            const offProducts = suggestions.filter(s => s.type === 'openfoodfacts');
            
            // Lokale Produkte
            if (localProducts.length > 0) {
                localSection.classList.remove('hidden');
                localList.innerHTML = localProducts.map(p => {
                    const productData = encodeURIComponent(JSON.stringify({
                        id: p.id,
                        name: p.name,
                        brand: p.brand,
                        barcode: p.barcode,
                        image_url: p.image_url,
                        type: 'local'
                    }));
                    return `
                    <div class="flex items-center gap-2 bg-green-50 rounded-xl border border-green-200 p-2">
                        <button onclick="showProductCompactView('${productData}')" class="flex-1 hover:bg-green-100 rounded-lg text-left flex items-center gap-3 p-1">
                            ${p.image_url ? `<img src="${p.image_url}" class="w-10 h-10 rounded-lg object-cover bg-slate-100">` : '<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center"><i data-lucide="package" class="w-5 h-5 text-green-600"></i></div>'}
                            <div class="flex-1 min-w-0">
                                <span class="font-medium text-slate-800 block truncate">${p.name}</span>
                                ${p.brand ? `<span class="text-xs text-slate-500">${p.brand}</span>` : ''}
                            </div>
                        </button>
                        <button onclick="selectIngredientProduct('${p.id}', '${(p.name || '').replace(/'/g, "\\'")}', 'local')" class="w-9 h-9 rounded-full bg-green-500 hover:bg-green-600 text-white flex items-center justify-center flex-shrink-0 shadow-sm" title="Zur Einkaufsliste">
                            <i data-lucide="plus" class="w-4 h-4"></i>
                        </button>
                    </div>
                `}).join('');
            } else {
                localSection.classList.add('hidden');
            }
            
            // OpenFoodFacts Produkte
            if (offProducts.length > 0) {
                offSection.classList.remove('hidden');
                offList.innerHTML = offProducts.map(p => {
                    const productData = encodeURIComponent(JSON.stringify({
                        id: null,
                        name: p.name,
                        brand: p.brand,
                        barcode: p.barcode,
                        image_url: p.image_url,
                        stores: p.stores || null,
                        type: 'openfoodfacts'
                    }));
                    return `
                    <div class="flex items-center gap-2 bg-blue-50 rounded-xl border border-blue-200 p-2">
                        <button onclick="showProductCompactView('${productData}')" class="flex-1 hover:bg-blue-100 rounded-lg text-left flex items-center gap-3 p-1">
                            ${p.image_url ? `<img src="${p.image_url}" class="w-10 h-10 rounded-lg object-cover bg-slate-100">` : '<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center"><i data-lucide="globe" class="w-5 h-5 text-blue-600"></i></div>'}
                            <div class="flex-1 min-w-0">
                                <span class="font-medium text-slate-800 block truncate">${p.name}</span>
                                ${p.brand ? `<span class="text-xs text-slate-500">${p.brand}</span>` : ''}
                            </div>
                        </button>
                        <button onclick="selectIngredientProduct(null, '${(p.name || '').replace(/'/g, "\\'")}', 'openfoodfacts', '${p.barcode || ''}')" class="w-9 h-9 rounded-full bg-blue-500 hover:bg-blue-600 text-white flex items-center justify-center flex-shrink-0 shadow-sm" title="Zur Einkaufsliste">
                            <i data-lucide="plus" class="w-4 h-4"></i>
                        </button>
                    </div>
                `}).join('');
            } else {
                offSection.classList.add('hidden');
            }
            
            // Keine Ergebnisse
            noResults.classList.toggle('hidden', localProducts.length > 0 || offProducts.length > 0);
            
            lucide.createIcons();
        }
        
        function closeIngredientPicker() {
            document.getElementById('ingredient-picker-modal').classList.add('hidden');
            currentIngredientName = '';
            currentIngredientAmount = '';
        }
        
        // Produkt-Kompakt-View anzeigen
        let currentCompactProduct = null;
        
        function showProductCompactView(encodedData) {
            try {
                const product = JSON.parse(decodeURIComponent(encodedData));
                currentCompactProduct = product;
                
                const isLocal = product.type === 'local';
                const bgColor = isLocal ? 'from-green-100 to-green-200' : 'from-blue-100 to-blue-200';
                const accentColor = isLocal ? 'green' : 'blue';
                
                const content = document.getElementById('product-compact-content');
                content.innerHTML = `
                    <!-- Header mit Bild -->
                    <div class="relative h-40 bg-gradient-to-br ${bgColor} flex items-center justify-center">
                        ${product.image_url 
                            ? `<img src="${product.image_url}" class="max-h-32 max-w-full object-contain" onerror="this.src='${PLACEHOLDER}'">`
                            : `<i data-lucide="${isLocal ? 'package' : 'globe'}" class="w-16 h-16 text-${accentColor}-400"></i>`
                        }
                        <button onclick="closeProductCompactView()" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/90 backdrop-blur shadow flex items-center justify-center text-slate-600 hover:bg-white">
                            <i data-lucide="x" class="w-4 h-4"></i>
                        </button>
                        <span class="absolute top-3 left-3 px-2 py-1 rounded-full bg-white/90 backdrop-blur shadow text-xs font-medium text-${accentColor}-700">
                            <i data-lucide="${isLocal ? 'database' : 'globe'}" class="w-3 h-3 inline"></i>
                            ${isLocal ? 'Lokal' : 'OpenFoodFacts'}
                        </span>
                    </div>
                    
                    <!-- Inhalt -->
                    <div class="p-4">
                        <h3 class="font-bold text-slate-900 text-lg">${product.name}</h3>
                        ${product.brand ? `<p class="text-slate-500 text-sm mt-0.5">${product.brand}</p>` : ''}
                        
                        ${product.stores ? `
                            <div class="mt-2 flex items-center gap-2 text-xs text-slate-600">
                                <i data-lucide="store" class="w-4 h-4 text-slate-400"></i>
                                <span>${product.stores}</span>
                            </div>
                        ` : ''}
                        
                        ${product.barcode ? `
                            <div class="mt-3 flex items-center gap-2 text-xs text-slate-500">
                                <i data-lucide="barcode" class="w-4 h-4"></i>
                                <span class="font-mono">${product.barcode}</span>
                                ${!isLocal ? `
                                    <a href="https://de.openfoodfacts.org/produkt/${product.barcode}" target="_blank" class="ml-auto text-${accentColor}-600 hover:underline flex items-center gap-1">
                                        <i data-lucide="external-link" class="w-3 h-3"></i> Details
                                    </a>
                                ` : ''}
                            </div>
                        ` : ''}
                        
                        <!-- Aktionen -->
                        <div class="mt-4 flex gap-2">
                            <button onclick="addCompactProductToList()" class="flex-1 py-3 bg-${accentColor}-500 hover:bg-${accentColor}-600 text-white rounded-xl font-medium flex items-center justify-center gap-2">
                                <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                                Zur Einkaufsliste
                            </button>
                        </div>
                        
                        <p class="text-center text-xs text-slate-400 mt-3">
                            Benötigt: ${currentIngredientAmount || 'Nach Bedarf'}
                        </p>
                    </div>
                `;
                
                document.getElementById('product-compact-modal').classList.remove('hidden');
                lucide.createIcons();
            } catch (e) {
                console.error('showProductCompactView error:', e);
                showToast('Fehler beim Anzeigen', 'error');
            }
        }
        
        function closeProductCompactView() {
            document.getElementById('product-compact-modal').classList.add('hidden');
            currentCompactProduct = null;
        }
        
        async function addCompactProductToList() {
            if (!currentCompactProduct) return;
            
            const p = currentCompactProduct;
            closeProductCompactView();
            
            if (p.type === 'local') {
                await selectIngredientProduct(p.id, p.name, 'local');
            } else {
                await selectIngredientProduct(null, p.name, 'openfoodfacts', p.barcode);
            }
        }
        
        async function selectIngredientProduct(productId, productName, source, barcode = null) {
            showToast('Füge hinzu...', 'loading');
            
            try {
                let finalProductId = productId;
                
                // Wenn es ein OpenFoodFacts Produkt ist, erst anlegen
                if (source === 'openfoodfacts' && barcode) {
                    // Produkt über Barcode-Lookup anlegen
                    const lookupRes = await fetch(`${API_URL}?action=lookup&code=${barcode}`);
                    const lookupData = await lookupRes.json();
                    
                    if (lookupData.found) {
                        // Produkt anlegen
                        const createRes = await fetch(`${API_URL}?action=products`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({
                                barcode: barcode,
                                name: lookupData.name,
                                brand: lookupData.brand,
                                image_url: lookupData.image_url,
                                nutri_score: lookupData.nutri_score,
                                api_source: 'openfoodfacts',
                                is_food: 1
                            })
                        });
                        const createData = await createRes.json();
                        finalProductId = createData.id;
                    }
                }
                
                // Zur Einkaufsliste hinzufügen
                if (finalProductId) {
                    await addProductToShoppingList(finalProductId, productName);
                } else {
                    // Fallback: Als manuellen Artikel anlegen
                    await addManualIngredientToList(currentIngredientName);
                }
                
                hideToast();
                closeIngredientPicker();
                markIngredientAsAdded(currentIngredientName);
                updateShoppingCount();
                
            } catch (e) {
                hideToast();
                console.error('selectIngredientProduct error:', e);
                showToast('Fehler: ' + e.message, 'error');
            }
        }
        
        async function addProductToShoppingList(productId, productName) {
            const res = await fetch(`${API_URL}?action=shopping`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    product_id: productId,
                    quantity: 1
                })
            });
            
            const data = await res.json();
            if (data.success || data.id) {
                showToast(`"${productName}" zur Einkaufsliste hinzugefügt`, 'success');
            } else {
                throw new Error(data.error || 'Unbekannter Fehler');
            }
        }
        
        async function addManualIngredientToList(name) {
            const res = await fetch(`${API_URL}?action=add_missing_ingredients`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ingredients: [{ name: name, available: false }],
                    recipe_title: currentRecipe?.title || ''
                })
            });
            
            const data = await res.json();
            if (data.success) {
                showToast(`"${name}" zur Einkaufsliste hinzugefügt`, 'success');
            } else {
                throw new Error(data.error || 'Unbekannter Fehler');
            }
        }
        
        function addIngredientManual() {
            addManualIngredientToList(currentIngredientName).then(() => {
                closeIngredientPicker();
                markIngredientAsAdded(currentIngredientName);
                updateShoppingCount();
            }).catch(e => {
                showToast('Fehler: ' + e.message, 'error');
            });
        }
        
        function addIngredientWithBarcode() {
            closeIngredientPicker();
            closeRecipeModal();
            // TODO: Scanner öffnen mit Callback für Einkaufsliste
            showToast('Barcode-Scan wird bald verfügbar sein', 'info');
        }
        
        function markIngredientAsAdded(name) {
            // Visuelles Feedback im Rezept
            const items = document.querySelectorAll(`[data-ingredient-name="${name.replace(/"/g, '&quot;')}"]`);
            items.forEach(item => {
                item.classList.remove('bg-red-50', 'border-red-100');
                item.classList.add('bg-green-50', 'border-green-200');
                const dot = item.querySelector('.bg-red-500');
                if (dot) {
                    dot.classList.remove('bg-red-500');
                    dot.classList.add('bg-green-500');
                }
                const btn = item.querySelector('button');
                if (btn) {
                    btn.innerHTML = '<i data-lucide="check" class="w-3 h-3"></i>';
                    btn.classList.remove('bg-blue-500', 'hover:bg-blue-600');
                    btn.classList.add('bg-green-500', 'cursor-default');
                    btn.onclick = null;
                }
                lucide.createIcons();
            });
        }
        
        async function addAllMissingQuick() {
            if (!currentRecipe) return;
            
            const missingIngredients = (currentRecipe.ingredients || []).filter(i => i.available === false);
            
            if (missingIngredients.length === 0) {
                showToast('Keine fehlenden Zutaten', 'info');
                return;
            }
            
            showToast(`Füge ${missingIngredients.length} Artikel hinzu...`, 'loading');
            
            try {
                const res = await fetch(`${API_URL}?action=add_missing_ingredients`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        ingredients: missingIngredients,
                        recipe_title: currentRecipe.title
                    })
                });
                
                const data = await res.json();
                hideToast();
                
                if (data.success) {
                    showToast(`${data.added} Zutat(en) hinzugefügt`, 'success');
                    
                    // Alle als hinzugefügt markieren
                    missingIngredients.forEach(ing => markIngredientAsAdded(ing.name));
                    updateShoppingCount();
                    
                    // Hinweise anzeigen
                    if (data.hints && data.hints.length > 0) {
                        setTimeout(() => {
                            showToast(data.hints[0], 'info', 5000);
                        }, 2000);
                    }
                } else {
                    showToast(data.error || 'Fehler', 'error');
                }
            } catch (e) {
                hideToast();
                showToast('Fehler: ' + e.message, 'error');
            }
        }
        
        // Kochmodus
        async function startCookingMode(recipeId) {
            if (!currentRecipe) return;
            
            try {
                let actualRecipeId = recipeId;
                
                // Wenn das Rezept noch keine ID hat (neu generiert), erst speichern
                if (!actualRecipeId || actualRecipeId === 'undefined' || actualRecipeId === 'null') {
                    console.log('Rezept hat keine ID, speichere erst...');
                    const saveRes = await fetch(`${API_URL}?action=save_recipe`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ recipe: currentRecipe })
                    });
                    const saveData = await saveRes.json();
                    
                    if (saveData.success && saveData.recipe && saveData.recipe.id) {
                        currentRecipe = saveData.recipe;
                        actualRecipeId = saveData.recipe.id;
                        console.log('Rezept gespeichert mit ID:', actualRecipeId);
                    } else {
                        throw new Error('Rezept konnte nicht gespeichert werden');
                    }
                }
                
                // Session starten/fortsetzen
                const res = await fetch(`${API_URL}?action=cooking_session`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ recipe_id: actualRecipeId })
                });
                
                currentCookingSession = await res.json();
                
                if (currentCookingSession.error) {
                    throw new Error(currentCookingSession.error);
                }
                
                renderCookingMode();
            } catch (e) {
                console.error('startCookingMode error:', e);
                showToast('Fehler beim Starten: ' + (e.message || 'Unbekannt'), 'error');
            }
        }
        
        function renderCookingMode() {
            recipeViewStack.push('cooking');
            showRecipeView('cooking');
            
            const recipe = currentRecipe;
            const session = currentCookingSession;
            const steps = recipe.steps || [];
            const completedSteps = session.completed_steps || [];
            const progress = steps.length > 0 ? Math.round((completedSteps.length / steps.length) * 100) : 0;
            
            document.getElementById('recipe-cooking-view').innerHTML = `
                <div class="space-y-4">
                    <!-- Header -->
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-2xl p-4 border border-green-200">
                        <div class="flex items-center justify-between mb-2">
                            <h3 class="text-lg font-bold text-slate-900">${recipe.title}</h3>
                            <button onclick="exitCookingMode()" class="text-slate-500 hover:text-slate-700">
                                <i data-lucide="x" class="w-5 h-5"></i>
                            </button>
                        </div>
                        <div class="cooking-progress">
                            <div class="cooking-progress-bar" style="width: ${progress}%"></div>
                        </div>
                        <p class="text-green-700 text-xs mt-2">${completedSteps.length} von ${steps.length} Schritten erledigt</p>
                    </div>
                    
                    <!-- Schritte -->
                    <div class="space-y-3">
                        ${steps.map((step, i) => {
                            const isCompleted = completedSteps.includes(i);
                            const isActive = !isCompleted && (i === 0 || completedSteps.includes(i - 1));
                            
                            return `
                                <div class="recipe-step ${isCompleted ? 'completed' : ''} ${isActive ? 'active' : ''}" 
                                     onclick="toggleCookingStep(${i})">
                                    <div class="flex items-start gap-3">
                                        <div class="w-8 h-8 rounded-full ${isCompleted ? 'bg-green-500' : isActive ? 'bg-amber-500' : 'bg-slate-300'} flex items-center justify-center flex-shrink-0">
                                            ${isCompleted 
                                                ? '<i data-lucide="check" class="w-4 h-4 text-white"></i>' 
                                                : `<span class="text-white font-bold text-sm">${i + 1}</span>`
                                            }
                                        </div>
                                        <div class="flex-1">
                                            <p class="${isActive ? 'text-slate-900 text-lg font-medium' : 'text-slate-700'}">${step.instruction}</p>
                                            ${step.duration ? `
                                                <p class="text-slate-500 text-xs mt-1 flex items-center gap-1">
                                                    <i data-lucide="clock" class="w-3 h-3"></i>
                                                    ca. ${step.duration} Min.
                                                </p>
                                            ` : ''}
                                        </div>
                                    </div>
                                </div>
                            `;
                        }).join('')}
                    </div>
                    
                    ${progress === 100 ? `
                        <div class="bg-green-500 rounded-2xl p-6 text-center">
                            <i data-lucide="party-popper" class="w-12 h-12 text-white mx-auto mb-3"></i>
                            <h4 class="text-white text-xl font-bold mb-2">Fertig!</h4>
                            <p class="text-green-100 text-sm">Guten Appetit! 🍽️</p>
                            <button onclick="finishCooking()" class="mt-4 px-6 py-2 bg-white text-green-600 rounded-xl font-semibold">
                                Abschließen
                            </button>
                        </div>
                    ` : ''}
                </div>
            `;
            
            lucide.createIcons();
        }
        
        async function toggleCookingStep(stepIndex) {
            if (!currentCookingSession) return;
            
            const completedSteps = currentCookingSession.completed_steps || [];
            const index = completedSteps.indexOf(stepIndex);
            
            if (index >= 0) {
                completedSteps.splice(index, 1);
            } else {
                completedSteps.push(stepIndex);
            }
            
            currentCookingSession.completed_steps = completedSteps;
            
            // Session aktualisieren
            try {
                await fetch(`${API_URL}?action=cooking_session&id=${currentCookingSession.id}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        completed_steps: completedSteps,
                        current_step: Math.max(...completedSteps, 0)
                    })
                });
            } catch (e) {
                console.error('Fehler beim Speichern:', e);
            }
            
            renderCookingMode();
        }
        
        function exitCookingMode() {
            document.getElementById('recipe-cooking-view').classList.add('hidden');
            showRecipeResult(currentRecipe);
        }
        
        async function finishCooking() {
            if (currentCookingSession) {
                try {
                    await fetch(`${API_URL}?action=cooking_session&id=${currentCookingSession.id}`, {
                        method: 'DELETE'
                    });
                } catch (e) {
                    console.error('Fehler:', e);
                }
            }
            
            // Verwendete Zutaten aus dem Bestand entfernen
            if (currentRecipe && currentRecipe.ingredients) {
                const usedIngredients = currentRecipe.ingredients.filter(ing => ing.available === true);
                
                if (usedIngredients.length > 0) {
                    const confirmRemove = confirm(`Sollen die ${usedIngredients.length} verwendeten Zutaten aus dem Bestand entfernt werden?`);
                    
                    if (confirmRemove) {
                        try {
                            await fetch(`${API_URL}?action=consume_recipe_ingredients`, {
                                method: 'POST',
                                headers: { 'Content-Type': 'application/json' },
                                body: JSON.stringify({
                                    ingredients: usedIngredients.map(i => i.name)
                                })
                            });
                            showToast('Zutaten aus Bestand entfernt', 'success');
                        } catch (e) {
                            console.error('Fehler beim Entfernen:', e);
                        }
                    }
                }
            }
            
            currentCookingSession = null;
            showToast('Mahlzeit! 🍽️', 'success');
            closeRecipeModal();
            
            // Dashboard und Produktliste aktualisieren
            updateDashboard();
            renderProducts();
        }
        
    </script>
</body>
</html>