<!--
/**
 * ============================================
 * PANTRY SCAN - Frontend
 * ============================================
 * Version: 0.8.6
 * Datum: 2025-12-14
 * 
 * ÄNDERUNGSHISTORIE:
 * -----------------------------------------
 * v0.8.6 (2025-12-14)
 *   - NEU: Kassenbon-Scan komplett vereinfacht - NUR lokale DB-Suche
 *   - NEU: status 'new' für Artikel ohne Matches (direkt als neues Produkt)
 *   - ENTFERNT: "Erweiterte Suche" Button
 *   - ENTFERNT: Open Food Facts API-Aufrufe
 *   - FIX: Schnellere Verarbeitung ohne externe APIs
 *
 * v0.8.5 (2025-12-14)
 *   - FIX: Popup zeigt jetzt sofort die Backend-Vorschläge (keine neue Suche)
 *   - FIX: "X Vorschläge verfügbar" zählt jetzt auch alternatives
 *   - FIX: Backend speichert jetzt alle Matches als alternatives
 *   - NEU: displayReceiptProducts() für sofortige Anzeige der Vorschläge
 *
 * v0.8.4 (2025-12-14)
 *   - NEU: Async Processing für Kassenbon-Analyse (kein Timeout mehr!)
 *   - NEU: Job-basiertes Polling statt direktem API-Call
 *   - NEU: Unterstützt lange Analysen (bis 2 Min) ohne Server-Timeout
 *   - FIX: 504 Gateway Timeout Problem behoben
 *
 * v0.8.3 (2025-12-14)
 *   - FIX: calculateSimilarity() erkennt jetzt auch zwei zusammengesetzte Wörter
 *   - FIX: Substring-Match für lange Wörter (dattelcherrytomaten ↔ cherrytomaten)
 *   - FIX: "X Vorschläge verfügbar" wird jetzt korrekt für alle Fälle angezeigt
 *   - FIX: Fortschrittsanzeige zeigt nur Schritte, keine ungenaue Zeitschätzung mehr
 *
 * v0.8.2 (2026-02-14)
 *   - FIX: API-Suche wird jetzt IMMER durchgeführt (auch bei Eigenmarken)
 *   - FIX: "X Vorschläge verfügbar" wird jetzt korrekt angezeigt
 *
 * v0.8.1 (2026-02-14)
 *   - FIX: API-Vorschläge werden jetzt auch mit Original-Namen verglichen
 *   - FIX: Relevanz-Schwelle für API auf 20% gesenkt
 *   - FIX: "X Vorschläge verfügbar" wird jetzt korrekt angezeigt
 *
 * v0.8.0 (2026-02-14)
 *   - FIX: searchReceiptProducts() komplett neu geschrieben
 *   - NEU: Frontend-Ähnlichkeitsprüfung identisch zum Backend
 *   - FIX: Füllwörter (bio, und, mit...) werden im Frontend ignoriert
 *   - FIX: Mindest-Ähnlichkeit 60% für lokale Suche
 *   - NEU: Sortierung nach Ähnlichkeit statt nach Quelle
 *
 * v0.7.9 (2026-02-14)
 *   - FIX: calculateSimilarity() KOMPLETT neu geschrieben - wortbasiert
 *   - FIX: Mindest-Ähnlichkeit auf 60% erhöht
 *   - NEU: Händlernamen als Füllwörter (rewe, edeka, aldi...)
 *   - NEU: Wörter werden nur 1x gematcht (keine Doppelzählung)
 *
 * v0.7.8 (2026-02-14)
 *   - TEXT: "Letzte Synchronisation" → "Letzte manuelle Synchronisation"
 *   - TEXT: "Automatisch stündlich synchronisieren" entfernt
 *   - TEXT: Beschreibung für Daten-Sync präzisiert
 *
 * v0.7.7 (2026-02-14)
 *   - NEU: Fortschrittsbalken bei Kassenbon-Analyse
 *   - NEU: Zeitschätzung basierend auf Bildgröße
 *   - NEU: Schrittanzeige (1-4) während Analyse
 *   - FIX: calculateSimilarity() komplett überarbeitet - Füllwörter werden ignoriert
 *
 * v0.7.6 (2026-02-14)
 *   - FIX: Sync-Toast wird bei offenen Modalen automatisch versteckt
 *   - NEU: isAnyModalOpen() Hilfsfunktion prüft alle relevanten Modals
 *
 * v0.7.5 (2026-02-14)
 *   - FIX: Lokale Produktvorschläge viel strenger (mind. 50% Ähnlichkeit)
 *   - FIX: Füllwörter (bio, und, mit...) werden bei Suche ignoriert
 *   - FIX: Scan-Modal öffnet nicht mehr nach manuellem Verbrauch aus Artikel-Detail
 *   - FIX: Sync-Toast höher positioniert (bottom: 120px statt 80px)
 *
 * v0.7.4 (2026-02-14)
 *   - FIX: Kategorien-Erkennung mit Prioritäten und Score-System
 *   - FIX: "Heringsfilet in Tomaten-Creme" landet jetzt korrekt unter Fisch (nicht Obst)
 *   - NEU: Längere Keywords haben höheren Score (spezifischer)
 *   - NEU: Kategorien mit höherer Priorität werden bevorzugt
 *
 * v0.7.3 (2026-02-14)
 *   - FIX: Kassenbon "X Vorschläge verfügbar" wird jetzt korrekt angezeigt
 *   - NEU: Erweiterte Einkaufslisten-Kategorien mit 500+ Keywords
 *   - NEU: Kategorien: Fisch, Grundnahrungsmittel, Süßigkeiten, Baby, Tiernahrung
 *   - OPT: Bessere Keyword-Zuordnung (z.B. Reis→Grundnahrung statt Tiefkühl)
 *
 * v0.7.2 (2026-02-14)
 *   - FIX: Backend PHP-Syntaxfehler behoben
 *   - NEU: OpenPetFoodFacts + OpenProductsFacts APIs
 *
 * v0.7.1 (2026-02-14)
 *   - FIX: Backend PHP-Fehler behoben (calculateSimilarity Funktion)
 *
 * v0.7.0 (2026-02-14)
 *   - Backend: Kassenbon-Produktzuordnung komplett überarbeitet
 *   - NEU: Lokale 100%-Matches werden automatisch zugeordnet (auto_matched)
 *   - NEU: KI erkennt Eigenmarken vs. Markenware
 *   - NEU: Händler-Eigenmarken-Mapping (REWE, EDEKA, Lidl, Aldi, dm, etc.)
 *   - NEU: API-Vorschläge werden nach Relevanz gefiltert (>=30%)
 *   - NEU: Ähnlichkeitsberechnung für bessere lokale Suche
 *
 * v0.6.9 (2026-02-14)
 *   - FIX: OCR-Flow komplett überarbeitet - nach OCR-Scan wird jetzt korrekt zum MHD-Modal zurückgekehrt
 *   - NEU: Zentrale returnToMhdModal() Funktion für konsistente Rückkehr
 *   - FIX: mhdOpenOcr() setzt State nicht mehr zurück
 *   - FIX: useDebugDate() und applyManualDate() kehren jetzt korrekt zum MHD-Modal zurück
 *
 * v0.6.8 (2026-02-14)
 *   - NEU: KI-gestützte Produktsuche im Backend
 *   - NEU: Händler-Kontext für bessere Produktvorschläge
 *
 * v0.6.7 (2026-02-14)
 *   - FIX: Nach OCR-Erkennung bleibt MHD-Modal offen
 *   - FIX: Erkanntes Datum wird direkt im MHD-Modal angezeigt
 *   - NEU: OCR-Methode (KI/OCR) wird im MHD-Modal angezeigt
 *
 * v0.6.6 (2026-02-14)
 *   - FIX: Produktzuordnung funktioniert wieder
 *   - FIX: API-Suche wird IMMER durchgeführt (nicht nur bei fehlendem DB-Match)
 *   - FIX: Neuer Status "unmatched" für nicht zugeordnete Artikel
 *   - NEU: Detailliertes Debug-Logging für Produktzuordnung
 *
 * v0.6.5 (2026-02-14)
 *   - FIX: OCR-Kamera startet mit Frontkamera (manuell wechselbar)
 *   - FIX: "Dieses Datum verwenden" Button funktioniert jetzt
 *   - FIX: OCR Debug nur bei aktivem Debug-Modus
 *   - FIX: Externer Scanner behält Fokus auf Eingabefeld
 *   - NEU: Kategorien in Einkaufsliste (optional via Checkbox)
 *
 * v0.6.4 (2026-02-14)
 *   - FIX: OCR-Modal z-index auf z-[65] erhöht (über MHD-Modal)
 *   - NEU: Verbesserte Produktzuordnung mit API-Suche
 *   - NEU: Status "suggestions" für API-Vorschläge
 *   - NEU: Sortierung: Lokale Treffer zuerst, dann API-Treffer
 *
 * v0.6.3 (2026-02-14)
 *   - NEU: KI-OCR für MHD mit automatischem Tesseract-Fallback
 *   - NEU: Datenschutz-Hinweis direkt im Kassenbon-Upload
 *   - NEU: OCR-Debug zeigt Erkennungsmethode (KI/Tesseract)
 *
 * v0.6.2 (2026-02-14)
 *   - NEU: Kassenbon-Liste zweizeilig auf Mobile (Buttons in eigener Zeile)
 *   - UX: Größere Touch-Targets (w-8 h-8) für bessere Bedienbarkeit
 *   - UX: Mengen-Buttons mit Hintergrund gruppiert
 *
 * v0.6.1 (2026-02-14)
 *   - FIX: Externer Scanner z-index auf z-[59] erhöht (nicht mehr überdeckt)
 *   - NEU: "Abbrechen" Button im Wizard (X statt Zurück)
 *   - NEU: cancelExternalScanner() kehrt zum Wizard zurück
 *   - FIX: MHD-Anzeige jetzt mit Jahr und KI-Icon (sparkles) statt Fragezeichen
 *   - NEU: Einstellungen "KI-Verwendung" mit Datenschutz- und Kassenbon-Hinweis
 *
 * v0.6.0 (2026-02-14)
 *   - FIX: "Manuell anlegen" im Wizard springt jetzt zum nächsten Artikel
 *   - FIX: Wizard-Menge wird automatisch im Einbuchen-Modal gesetzt
 *   - NEU: Wizard-Backdrop verhindert sichtbaren App-Hintergrund
 *   - FIX: saveManualProduct() speichert Callback vor Modal-Schließen
 *
 * v0.5.9 (2026-02-14)
 *   - FIX: Wizard springt jetzt zum nächsten Artikel nach Einbuchen
 *   - FIX: closeScanner() löscht Callback nicht mehr (nur cancelScanner())
 *   - FIX: Scanner-Mode-Toggle erscheint wieder nach Schließen des Kassenbons
 *   - FIX: closeReceiptWizard() setzt alle Wizard-States zurück
 *   - FIX: MHD wird bei "Als neues Produkt anlegen" automatisch generiert
 *   - FIX: receiptUnassignItem setzt auch mhd_category und mhd_days zurück
 *
 * v0.5.8 (2026-02-14)
 *   - FIX: Scanner im Wizard zeigt nur "Einbuchen" (Verbrauch versteckt)
 *   - FIX: Externer Scanner im Wizard zeigt nur "Einbuchen" + Auto-Fokus
 *   - FIX: Nach Einbuchen im Wizard → weiter zum nächsten Artikel
 *   - FIX: Wizard-Callback wird vor closeAddModal() gespeichert
 *   - NEU: "Zuordnung aufheben" Button in der Kassenbon-Liste
 *
 * v0.5.7 (2026-02-14)
 *   - FIX: MHD-Modal z-index auf z-[60] erhöht (über Receipt-Modal z-[56])
 *   - FIX: Scanner/Add/Manual-Modal z-index auf z-[59] erhöht
 *   - FIX: receiptWizardManual schließt explizit Scanner-Modal
 *   - FIX: receiptWizardScan schließt explizit Manual-Modal
 *   - FIX: event.stopPropagation() beim MHD-Button
 *   - FIX: Alle States werden vor jeder Wizard-Aktion zurückgesetzt
 *
 * v0.5.6 (2026-02-14)
 *   - FIX: MHD-Button nur bei zugeordneten Artikeln klickbar
 *   - FIX: MHD-Modal wird korrekt geschlossen bei allen Übergängen
 *   - FIX: Receipt-Scanner kann erneut geöffnet werden nach Abbruch
 *
 * v0.5.5 (2026-02-14)
 *   - FIX: MHD-Button in Kassenbon-Liste funktioniert jetzt
 *   - FIX: Wizard (Scanner/Manuell) öffnet nicht mehr MHD-Modal
 *   - FIX: receiptMhdMode wird korrekt zurückgesetzt
 *
 * v0.5.4 (2026-02-14)
 *   - FIX: MHD-Button beim Kassenbon funktioniert jetzt
 *   - FIX: Wizard-Flow korrigiert (Scanner/Manuell vor MHD)
 *   - FIX: Debug-Panel nur bei aktivem Debug-Modus
 *   - NEU: OpenAI API-Check
 *   - NEU: Suche per Barcode
 *   - NEU: Ansicht (Kacheln/Liste) wird gespeichert
 *   - ENTFERNT: Preis-Anzeige im Kassenbon
 *   - ENTFERNT: Fleisch-Filter (unzuverlässig)
 *
 * v0.5.3 (2026-02-14)
 *   - NEU: Bestehendes MHD-Modal für Kassenbon-Artikel
 *   - NEU: Automatische KI-MHD-Vorschläge bei Vor-Zuordnung
 *   - NEU: Produktauswahl per Klick auf Namen
 *   - FIX: Produkte werden erst beim Einbuchen angelegt
 *
 * v0.5.2 (2026-02-14)
 *   - NEU: MHD-Integration im Kassenbon-Feature
 *   - NEU: Automatische KI-MHD-Vorschläge pro Artikel
 *   - NEU: MHD-Bearbeitung pro Artikel in der Liste
 *   - FIX: Wizard-Funktionen korrigiert (Scanner/Manuell)
 *
 * v0.5.1 (2026-02-14)
 *   - Debug-Anzeige bleibt bei aktivem Debug-Modus sichtbar
 *   - NEU: Wizard für nicht zugeordnete Kassenbon-Artikel
 *   - NEU: Finale Übersicht nach Kassenbon-Import
 *
 * v1.2.0 (2026-02-14)
 *   - NEU: Kassenbon-Scanner mit KI-Analyse
 *   - NEU: Bulk-Import von Kassenbon-Artikeln
 *   - NEU: Open Food Facts Produktsuche im Popup
 *
 * v1.1.0 (2026-02-14)
 * - NEU: KI-MHD funktioniert für alle Kategorien (manuell)
 * - NEU: Automatisch nur für Obst/Gemüse
 * - NEU: Kategorien: OBST, GEMUESE, MILCH, FLEISCH, BACKWAREN, KONSERVE, TROCKEN, GETRAENK
 * - FIX: Konsistente MHD-Anzeige (+XX Tage) überall
 * - FIX: Anzahl-Bereich ohne Überschrift
 *
 * v1.0.9 (2026-02-14)
 * - NEU: KI-MHD automatisch nur für Obst/Gemüse
 * - NEU: KI erkennt zuerst ob Produkt Obst/Gemüse ist
 * - MOVE: Scanner-Hinweis von Modal in Einstellungen
 *
 * v1.0.8 (2026-02-14)
 * - NEU: Debug-Toggle in Einstellungen
 * - FIX: KI-MHD API-URL korrigiert (/llm/chat/completions)
 *
 * v1.0.7 (2026-02-14)
 * - NEU: Debug-Modus (aktivierbar über DB: settings.debug_mode = '1')
 * - NEU: Debug-Log-Anzeige im Frontend bei Fehlern
 * - NEU: Detailliertes Logging für KI-MHD-Anfragen
 * - FIX: Verbessertes Error-Handling mit mehr Details
 *
 * v1.0.6 (2026-02-14)
 * - NEU: Separates MHD-Modal mit Kamera, KI, Manuell
 * - NEU: Quick-Buttons (+1W, +2W, +1M, +3M)
 * - NEU: KI-Vorschlag automatisch bei Produkten ohne Barcode
 * - NEU: MHD-Anpassungs-Buttons (-1W, -1T, +1T, +1W)
 * - ENTFERNT: "Ohne MHD" Button (Einbuchen ohne MHD ist Standard)
 * - FIX: Verbessertes Error-Handling für KI-API
 *
 * v1.0.5 (2026-02-14)
 * - NEU: KI-MHD-Vorschlag für lokale Artikel (Button im Einbuchen-Dialog)
 * - NEU: Filter "Fleisch" und "Nicht-Lebensmittel" in Produktliste
 * - FIX: "Gesamt: undefinedx" im Verbrauch-Dialog behoben
 * - FIX: Scroll-Position nach "Einkaufen" wiederherstellen (nicht Einbuchen)
 *
 * v1.0.4 (2026-02-14)
 * - NEU: API-Status-Check mit Warnsymbol bei Verbindungsproblemen
 * - NEU: API-Status-Anzeige in Einstellungen
 * - NEU: Warnung auf Login-Seite wenn APIs nicht erreichbar
 * - FIX: Verbrauch-Popup kompakter (eine Zeile pro MHD)
 * - FIX: Nach Einbuchen zur Produktposition zurückspringen
 *
 * v1.0.3 (2026-02-14)
 * - NEU: Mengen-Stepper beim Verbrauchen (mehrere Artikel pro MHD ausbuchen)
 * - NEU: Quick-Button (-1) für schnelles Einzelverbrauchen bleibt erhalten
 *
 * v1.0.2 (2026-02-14)
 * - NEU: Externer Scanner-Modus für USB/Bluetooth Barcode-Scanner
 * - NEU: Scan-Option wird gespeichert (Einbuchen/Verbrauch)
 * - NEU: Auto-Fokus auf Eingabefeld nach Moduswechsel
 * - Kamera kann weiterhin manuell aus externem Scanner-Modus geöffnet werden
 *
 * v1.0.1 (2026-02-14)
 * - NEU: "Kein Lebensmittel" Checkbox bei manueller Produktanlage
 * - is_food Feld in DB und API
 * - Rezept-Filterung nutzt is_food Flag
 *
 * v1.8.5 (2026-02-14)
 * - Fix: Auto-Sync Zeitanzeige (Timestamp-Validierung)
 * - Verbesserter KI-Prompt für realistische Rezepte
 * - Erweiterte Nicht-Lebensmittel-Filterung (>50 Keywords)
 *
 * v1.8.4 (2026-02-14)
 * - 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 (2026-02-14)
 * - 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 (2026-02-14)
 * - Einstellungen-Button in Header verschoben (neben Logout)
 * - OpenAI API Key Einstellungsbereich hinzugefügt
 * - Schnellstart-Rezepte: Bald ablaufend / Abgelaufen / Alle
 *
 * v1.8.1 (2026-02-14)
 * - Design: Elegantes Bottom-Sheet statt dunklem Overlay
 * - Portionen 1-12 statt 2-12
 * - Bug-Fix: Produkte werden jetzt korrekt geladen
 *
 * v1.8.0 (2026-02-14)
 * - 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 (2026-02-14)
 * - Tab-Farben: Einkaufsliste blau, Einstellungen türkis
 * - Kamera startet immer mit Rückkamera (Tablet-Frontkamera-Feature entfernt)
 *
 * v1.7.8 (2026-02-14)
 *   - FIX: Auto-Sync setzt lastAutoSyncTime beim Aktivieren
 *   - FIX: Verbleibende Minuten werden korrekt angezeigt
 *   - FIX: Kein sofortiger Sync mehr beim Aktivieren
 * 
 * v1.7.7 (2026-02-14)
 *   - 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 v0.8.6</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;
            }
        }
        
        /* Dezente Sync-Fortschrittsleiste unten */
        .sync-toast {
            position: fixed;
            bottom: 120px;
            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>
    <!-- PDF.js für PDF-zu-Bild Konvertierung -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script>
        if (typeof pdfjsLib !== 'undefined') {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        }
    </script>
</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-4">Gib deine PIN ein</p>
            
            <!-- API Warning on Login -->
            <div id="login-api-warning" class="hidden w-full max-w-xs mb-6">
                <div class="bg-amber-500/20 backdrop-blur border border-amber-400/50 rounded-xl p-3 text-center">
                    <div class="flex items-center justify-center gap-2 text-amber-200 mb-1">
                        <i data-lucide="wifi-off" class="w-4 h-4"></i>
                        <span class="text-sm font-semibold">API nicht erreichbar</span>
                    </div>
                    <p class="text-xs text-amber-100/80">Community-Daten sind aktuell nicht verfügbar. Nur lokale Daten nutzbar.</p>
                </div>
            </div>
            
            <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">v0.8.6</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <!-- Receipt Scanner Button -->
                            <button onclick="openReceiptScanner()" class="w-8 h-8 rounded-lg bg-teal-500 flex items-center justify-center text-white hover:bg-teal-400" title="Kassenbon scannen">
                                <i data-lucide="receipt" class="w-4 h-4"></i>
                            </button>
                            <!-- API Status Warning -->
                            <button id="api-warning-btn" onclick="setActiveTab('settings');setTimeout(()=>document.getElementById('api-status-section').scrollIntoView({behavior:'smooth'}),300)" class="hidden w-8 h-8 rounded-lg bg-amber-400/90 flex items-center justify-center text-amber-900 hover:bg-amber-300 animate-pulse" title="API-Verbindungsproblem">
                                <i data-lucide="alert-triangle" class="w-4 h-4"></i>
                            </button>
                            <!-- 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">Artikel</p>
                            </div>
                            <div class="w-px h-8 bg-slate-200"></div>
                            <div class="text-center flex-1">
                                <p id="dash-total-qty" class="text-xl font-bold text-slate-900">0</p>
                                <p class="text-[10px] text-slate-500 uppercase tracking-wide">Gesamt</p>
                            </div>
                        </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="Kategorie">
                                    <option value="non-food">🧴 Nicht-Lebensmittel</option>
                                </optgroup>
                                <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>
                    
                    <!-- API Status Section -->
                    <div id="api-status-section" 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-teal-100 flex items-center justify-center">
                                <i data-lucide="wifi" class="w-5 h-5 text-teal-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">API-Verbindungen</h3>
                                <p class="text-xs text-slate-500">Status der externen Datenquellen</p>
                            </div>
                            <button onclick="checkApiStatus()" class="ml-auto w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-slate-200" title="Status prüfen">
                                <i data-lucide="refresh-cw" class="w-4 h-4" id="api-check-icon"></i>
                            </button>
                        </div>
                        
                        <div id="api-status-list" class="space-y-2">
                            <div class="animate-pulse bg-slate-100 rounded-lg h-10"></div>
                        </div>
                        
                        <p id="api-status-time" class="text-xs text-slate-400 mt-3 text-center">Letzter Check: -</p>
                    </div>
                    
                    <!-- 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 auf lokale Datenbank synchronisieren</p>
                            </div>
                        </div>
                        
                        <!-- Sync Status -->
                        <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">Letzte manuelle Synchronisation:</span>
                                <span id="sync-last-date" class="font-medium text-slate-900">-</span>
                            </div>
                            <div class="flex justify-between items-center text-sm mt-2">
                                <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>
                            </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>
                        
                        <p id="auto-sync-info" class="text-xs text-slate-400 hidden">
                            <i data-lucide="info" class="w-3 h-3 inline"></i>
                            Nächste automatische Synchronisation: <span id="next-auto-sync">-</span>
                        </p>
                    </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-wrap gap-2">
                                <input type="password" id="settings-pin" maxlength="10" class="w-full sm:flex-1 sm:w-auto min-w-0 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl font-mono text-sm" placeholder="••••" data-testid="settings-pin-input">
                                <div class="flex gap-2 w-full sm:w-auto">
                                    <button onclick="togglePinVisibility()" class="flex-shrink-0 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="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 text-sm" 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 flex-wrap gap-2">
                                <input type="password" id="settings-sync-key" class="w-full sm:flex-1 sm:w-auto min-w-0 px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl font-mono text-sm" placeholder="••••••••••••" data-testid="settings-sync-key-input">
                                <div class="flex gap-2 w-full sm:w-auto">
                                    <button onclick="toggleSyncKeyVisibility()" class="flex-shrink-0 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="flex-1 sm:flex-none px-4 py-2 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 text-sm" data-testid="save-sync-key-btn">
                                        Speichern
                                    </button>
                                </div>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Für externen Zugriff auf sync.php</p>
                        </div>
                    </div>
                    
                    <!-- Scanner 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-teal-100 flex items-center justify-center">
                                <i data-lucide="scan-barcode" class="w-5 h-5 text-teal-600"></i>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Scanner</h3>
                                <p class="text-xs text-slate-500">Kamera oder externer Scanner</p>
                            </div>
                        </div>
                        
                        <!-- Externer Scanner Modus -->
                        <label class="flex items-center justify-between p-3 bg-slate-50 rounded-xl cursor-pointer">
                            <div class="flex items-center gap-3">
                                <i data-lucide="usb" class="w-5 h-5 text-slate-500"></i>
                                <div>
                                    <span class="text-slate-700 font-medium text-sm">Externer Scanner</span>
                                    <p class="text-slate-500 text-xs">USB/Bluetooth Barcode-Scanner verwenden</p>
                                </div>
                            </div>
                            <div class="relative">
                                <input type="checkbox" id="external-scanner-toggle" onchange="toggleExternalScanner()" 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-teal-500"></div>
                            </div>
                        </label>
                        <p class="text-xs text-slate-400 mt-2 ml-1">Bei aktiviertem Modus öffnet sich ein Eingabefeld statt der Kamera. Der Barcode wird automatisch gesucht wenn Enter gedrückt wird.</p>
                    </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-Verwendung</h3>
                                <p class="text-xs text-slate-500">OpenAI API für intelligente Funktionen</p>
                            </div>
                        </div>
                        
                        <!-- KI-Funktionen Erklärung -->
                        <div class="bg-slate-50 rounded-xl p-3 mb-4 text-xs text-slate-600">
                            <p class="font-medium mb-2">Die KI wird für folgende Funktionen genutzt:</p>
                            <ul class="list-disc list-inside space-y-1 text-slate-500">
                                <li><strong>Rezept-Generierung:</strong> Erstellt Rezeptvorschläge aus verfügbaren Zutaten</li>
                                <li><strong>MHD-Vorschläge:</strong> Schätzt die Haltbarkeit von Produkten</li>
                                <li><strong>Kassenbon-Analyse:</strong> Erkennt Artikel auf Kassenbons</li>
                            </ul>
                        </div>
                        
                        <!-- Datenschutz-Hinweis -->
                        <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="shield-check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                                <span><strong>Datenschutz:</strong> Es werden keine personenbezogenen Daten an OpenAI weitergeleitet. Nur Produktnamen und Mengen werden für Rezepte und MHD-Vorschläge übermittelt.</span>
                            </p>
                        </div>
                        
                        <!-- Kassenbon-Warnung -->
                        <div class="bg-amber-50 border border-amber-200 rounded-xl p-3 mb-4">
                            <p class="text-amber-700 text-xs flex items-start gap-2">
                                <i data-lucide="alert-triangle" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                                <span><strong>Kassenbon-Scan:</strong> Bei der Kassenbon-Analyse wird das gesamte Bild an OpenAI übermittelt, um möglichst genaue Ergebnisse zu erzielen. Stelle sicher, dass keine sensiblen Daten auf dem Bild sichtbar sind.</span>
                            </p>
                        </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>
                    
                    <!-- Developer 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-slate-800 flex items-center justify-center">
                                <i data-lucide="bug" class="w-5 h-5 text-white"></i>
                            </div>
                            <div class="flex-1">
                                <h3 class="font-bold text-slate-900">Entwickler</h3>
                                <p class="text-xs text-slate-500">Debug-Optionen für Fehleranalyse</p>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between py-3 border-t border-slate-100">
                            <div>
                                <p class="text-sm font-medium text-slate-700">Debug-Modus</p>
                                <p class="text-xs text-slate-400">Zeigt detaillierte Logs bei Fehlern</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="debug-mode-toggle" onchange="toggleDebugMode()" 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 peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-slate-800"></div>
                            </label>
                        </div>
                        
                        <div id="debug-status" class="mt-2 text-xs text-slate-400 text-center hidden">
                            Debug aktiv - Logs werden in API-Responses mitgesendet
                        </div>
                    </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 0.6.8</p>
                            </div>
                        </div>
                        <div class="text-xs text-slate-500 space-y-1">
                            <p>• Neues MHD-Modal mit KI-Vorschlag</p>
                            <p>• Externer Scanner-Modus</p>
                            <p>• KI-Rezeptideen mit Kochmodus</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-amber-500 hover:text-amber-600">
                        <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-[59] 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="cancelScanner()" 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">
                    <!-- Mode Toggle (versteckt im Wizard-Modus) -->
                    <div id="scanner-mode-toggle-container" 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>
                    <!-- Wizard-Hinweis (nur im Wizard-Modus sichtbar) -->
                    <div id="scanner-wizard-hint" class="hidden mb-2 py-2 px-3 bg-teal-600 rounded-xl">
                        <p class="text-white text-sm text-center font-medium">📋 Kassenbon-Wizard: Einbuchen</p>
                    </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>
        
        <!-- MHD Selection Modal (Bottom Sheet) -->
        <div id="mhd-modal" class="hidden fixed inset-0 z-[60] modal-backdrop" onclick="closeMhdModal()">
            <div class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl max-h-[85vh] overflow-hidden animate-slide-up" onclick="event.stopPropagation()">
                <!-- Header -->
                <div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between bg-gradient-to-r from-amber-50 to-orange-50">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl bg-amber-100 flex items-center justify-center">
                            <i data-lucide="calendar-clock" class="w-5 h-5 text-amber-600"></i>
                        </div>
                        <div>
                            <h2 class="text-lg font-bold text-slate-900">MHD wählen</h2>
                            <p id="mhd-modal-product" class="text-xs text-slate-500"></p>
                        </div>
                    </div>
                    <button onclick="closeMhdModal()" 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>
                
                <!-- Content -->
                <div class="p-5 overflow-y-auto max-h-[60vh]">
                    <!-- Erkennungsmethoden -->
                    <div class="grid grid-cols-3 gap-3 mb-5">
                        <button type="button" onclick="mhdOpenOcr()" class="p-4 bg-amber-50 border-2 border-amber-200 rounded-xl flex flex-col items-center gap-2 hover:bg-amber-100 hover:border-amber-300 transition-colors">
                            <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
                                <i data-lucide="scan-line" class="w-6 h-6 text-amber-600"></i>
                            </div>
                            <span class="text-sm font-medium text-amber-800">Kamera</span>
                            <span class="text-[10px] text-amber-600">OCR-Scan</span>
                        </button>
                        
                        <button type="button" onclick="mhdAiSuggest()" id="mhd-ai-btn" class="p-4 bg-purple-50 border-2 border-purple-200 rounded-xl flex flex-col items-center gap-2 hover:bg-purple-100 hover:border-purple-300 transition-colors">
                            <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                                <i data-lucide="sparkles" class="w-6 h-6 text-purple-600" id="mhd-ai-icon"></i>
                            </div>
                            <span class="text-sm font-medium text-purple-800">KI</span>
                            <span class="text-[10px] text-purple-600">Vorschlag</span>
                        </button>
                        
                        <button type="button" onclick="mhdOpenDatepicker()" class="p-4 bg-blue-50 border-2 border-blue-200 rounded-xl flex flex-col items-center gap-2 hover:bg-blue-100 hover:border-blue-300 transition-colors relative">
                            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                                <i data-lucide="calendar" class="w-6 h-6 text-blue-600"></i>
                            </div>
                            <span class="text-sm font-medium text-blue-800">Manuell</span>
                            <span class="text-[10px] text-blue-600">Datum wählen</span>
                            <input type="date" id="mhd-date-picker" class="absolute inset-0 opacity-0 cursor-pointer" onchange="mhdOnDatePicked(this.value)">
                        </button>
                    </div>
                    
                    <!-- Erkanntes MHD Anzeige -->
                    <div class="bg-slate-50 rounded-xl p-4 mb-4">
                        <p class="text-xs text-slate-500 mb-2">Erkanntes MHD:</p>
                        <div id="mhd-result-display" class="text-center py-3">
                            <span class="text-slate-400">Noch nicht gewählt</span>
                        </div>
                    </div>
                    
                    <!-- Quick Buttons -->
                    <div class="mb-4">
                        <p class="text-xs text-slate-500 mb-2">Schnellwahl:</p>
                        <div class="grid grid-cols-4 gap-2">
                            <button onclick="mhdSetDays(7)" class="py-2 px-3 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200">+1 Wo</button>
                            <button onclick="mhdSetDays(14)" class="py-2 px-3 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200">+2 Wo</button>
                            <button onclick="mhdSetDays(30)" class="py-2 px-3 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200">+1 Mo</button>
                            <button onclick="mhdSetDays(90)" class="py-2 px-3 bg-slate-100 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-200">+3 Mo</button>
                        </div>
                    </div>
                    
                    <!-- Anpassungs-Buttons -->
                    <div id="mhd-adjust-buttons" class="hidden mb-4">
                        <p class="text-xs text-slate-500 mb-2">Anpassen:</p>
                        <div class="grid grid-cols-4 gap-2">
                            <button onclick="mhdAdjust(-7)" class="py-2 px-3 bg-red-50 text-red-600 rounded-lg text-sm font-medium hover:bg-red-100">-1 Wo</button>
                            <button onclick="mhdAdjust(-1)" class="py-2 px-3 bg-red-50 text-red-600 rounded-lg text-sm font-medium hover:bg-red-100">-1 Tag</button>
                            <button onclick="mhdAdjust(1)" class="py-2 px-3 bg-green-50 text-green-600 rounded-lg text-sm font-medium hover:bg-green-100">+1 Tag</button>
                            <button onclick="mhdAdjust(7)" class="py-2 px-3 bg-green-50 text-green-600 rounded-lg text-sm font-medium hover:bg-green-100">+1 Wo</button>
                        </div>
                    </div>
                </div>
                
                <!-- Footer Actions -->
                <div class="px-5 py-4 border-t border-slate-100 bg-slate-50 flex gap-3">
                    <button onclick="mhdConfirm()" class="flex-1 py-3 bg-green-600 text-white rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-green-700">
                        <i data-lucide="check" class="w-5 h-5"></i>
                        MHD übernehmen
                    </button>
                    <button onclick="mhdSkip()" class="px-4 py-3 bg-slate-200 text-slate-700 rounded-xl font-medium hover:bg-slate-300">
                        Ohne MHD
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Receipt Scanner Modal -->
        <div id="receipt-modal" class="hidden fixed inset-0 z-[56] bg-white flex flex-col">
            <!-- Header -->
            <div class="flex-shrink-0 px-4 py-3 bg-gradient-to-r from-teal-600 to-teal-500 flex items-center justify-between safe-area-top">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
                        <i data-lucide="receipt" class="w-5 h-5 text-white"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-white">Kassenbon</h2>
                        <p id="receipt-status-text" class="text-xs text-white/70">Bild auswählen</p>
                    </div>
                </div>
                <button onclick="closeReceiptScanner()" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            
            <!-- Content -->
            <div id="receipt-content" class="flex-1 overflow-y-auto">
                <!-- Upload View (initial) -->
                <div id="receipt-upload-view" class="flex flex-col items-center justify-center h-full p-6">
                    <div class="w-24 h-24 rounded-full bg-teal-100 flex items-center justify-center mb-6">
                        <i data-lucide="scan-line" class="w-12 h-12 text-teal-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-slate-800 mb-2">Kassenbon einlesen</h3>
                    <p class="text-slate-500 text-sm text-center mb-4">Fotografiere oder lade ein Bild/PDF deines Kassenbons hoch</p>
                    
                    <!-- Datenschutz-Hinweis -->
                    <div class="w-full max-w-xs bg-amber-50 border border-amber-200 rounded-xl p-3 mb-6">
                        <p class="text-amber-700 text-xs flex items-start gap-2">
                            <i data-lucide="alert-triangle" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                            <span>Das Bild wird zur Analyse an OpenAI übermittelt. Achte darauf, dass keine sensiblen Daten sichtbar sind.</span>
                        </p>
                    </div>
                    
                    <div class="w-full max-w-xs space-y-3">
                        <button onclick="receiptTakePhoto()" class="w-full py-4 bg-teal-600 text-white rounded-xl font-semibold flex items-center justify-center gap-3 hover:bg-teal-700">
                            <i data-lucide="camera" class="w-5 h-5"></i>
                            Foto aufnehmen
                        </button>
                        <label class="w-full py-4 bg-slate-100 text-slate-700 rounded-xl font-semibold flex items-center justify-center gap-3 cursor-pointer hover:bg-slate-200">
                            <i data-lucide="upload" class="w-5 h-5"></i>
                            Bild/PDF hochladen
                            <input type="file" accept="image/*,application/pdf" onchange="receiptFileSelected(event)" class="hidden">
                        </label>
                    </div>
                </div>
                
                <!-- Analysis View (während Analyse) -->
                <div id="receipt-analysis-view" class="hidden flex flex-col items-center justify-center h-full p-6">
                    <div class="w-full max-w-sm">
                        <div class="bg-slate-100 rounded-2xl p-4 mb-6">
                            <img id="receipt-preview-img" src="" class="w-full rounded-xl max-h-48 object-contain">
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 rounded-full bg-teal-100 flex items-center justify-center mx-auto mb-4">
                                <i data-lucide="loader-2" class="w-8 h-8 text-teal-600 animate-spin"></i>
                            </div>
                            <p id="receipt-analysis-status" class="text-slate-600 font-medium">Analysiere Kassenbon...</p>
                            <p id="receipt-analysis-substatus" class="text-slate-400 text-sm mt-2">KI liest Artikelliste</p>
                            
                            <!-- Fortschrittsanzeige -->
                            <div class="mt-4 space-y-2">
                                <div class="w-full bg-slate-200 rounded-full h-2 overflow-hidden">
                                    <div id="receipt-progress-bar" class="bg-teal-500 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                                </div>
                                <div class="flex justify-center text-xs text-slate-400">
                                    <span id="receipt-progress-step">Schritt 1/4</span>
                                </div>
                            </div>
                        </div>
                        <!-- Debug-Panel (IMMER sichtbar während Analyse) -->
                        <div id="receipt-debug-panel" class="mt-4 p-3 bg-slate-800 rounded-lg text-left max-h-64 overflow-y-auto">
                            <p class="text-xs text-slate-400 mb-2 font-mono">DEBUG LOG:</p>
                            <div id="receipt-debug-log" class="text-xs text-green-400 font-mono space-y-1 break-all"></div>
                        </div>
                        <!-- Fehler-Button (nur bei Fehler sichtbar) -->
                        <button id="receipt-error-continue-btn" class="hidden mt-4 w-full py-3 bg-red-600 text-white rounded-xl font-semibold" onclick="receiptErrorContinue()">
                            Zurück zum Upload
                        </button>
                    </div>
                </div>
                
                <!-- Results View (Artikel-Liste) - INNERHALB von receipt-content für Scrolling -->
                <div id="receipt-results-view" class="hidden h-full flex flex-col">
                    <!-- Händler-Info -->
                    <div class="flex-shrink-0 px-4 py-3 bg-slate-50 border-b border-slate-200">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-semibold text-slate-800" id="receipt-merchant">Händler</p>
                                <p class="text-xs text-slate-500" id="receipt-date"></p>
                            </div>
                            <div class="text-right">
                                <p class="text-lg font-bold text-teal-600" id="receipt-item-count">0</p>
                                <p class="text-xs text-slate-500">Artikel</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Artikel-Liste (scrollbar) -->
                    <div id="receipt-items-list" class="flex-1 overflow-y-auto divide-y divide-slate-100">
                        <!-- Items werden dynamisch eingefügt -->
                    </div>
                </div>
            </div>
            
            <!-- Footer (nur bei Results) -->
            <div id="receipt-footer" class="hidden flex-shrink-0 px-4 py-3 bg-white border-t border-slate-200 safe-area-bottom">
                <button onclick="receiptBookAll()" class="w-full py-4 bg-green-600 text-white rounded-xl font-bold flex items-center justify-center gap-2">
                    <i data-lucide="check" class="w-5 h-5"></i>
                    <span id="receipt-book-btn-text">Alle einbuchen</span>
                </button>
            </div>
        </div>
        
        <!-- Receipt Product Selection Popup -->
        <div id="receipt-product-popup" class="hidden fixed inset-0 z-[57] modal-backdrop" onclick="closeReceiptProductPopup()">
            <div class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl max-h-[80vh] overflow-hidden animate-slide-up" onclick="event.stopPropagation()">
                <div class="px-4 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500">Produkt wählen für:</p>
                        <p class="font-bold text-slate-800" id="receipt-popup-original"></p>
                    </div>
                    <button onclick="closeReceiptProductPopup()" class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
                <div id="receipt-popup-content" class="p-4 overflow-y-auto max-h-[60vh]">
                    <!-- Produkt-Vorschläge -->
                </div>
            </div>
        </div>
        
        <!-- Receipt Wizard Backdrop (bleibt während des Wizard-Prozesses sichtbar) -->
        <div id="receipt-wizard-backdrop" class="hidden fixed inset-0 z-[57] bg-slate-900/80"></div>
        
        <!-- Receipt Wizard Modal (für nicht zugeordnete Artikel) -->
        <div id="receipt-wizard-modal" class="hidden fixed inset-0 z-[58] bg-white flex flex-col">
            <!-- Header -->
            <div class="flex-shrink-0 px-4 py-3 bg-teal-600 text-white flex items-center justify-between safe-area-top">
                <div class="flex items-center gap-3">
                    <button onclick="receiptWizardCancel()" class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center" title="Abbrechen">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                    <div>
                        <p class="text-xs text-white/70">Artikel zuordnen</p>
                        <p class="font-semibold" id="receipt-wizard-progress">1 von 5</p>
                    </div>
                </div>
                <button onclick="receiptWizardSkipAll()" class="text-sm text-white/80 hover:text-white">
                    Alle überspringen
                </button>
            </div>
            
            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-4">
                <!-- Aktueller Artikel -->
                <div class="bg-slate-50 rounded-2xl p-4 mb-4">
                    <p class="text-xs text-slate-500 mb-1">Vom Kassenbon:</p>
                    <p class="text-xl font-bold text-slate-800" id="receipt-wizard-item-name">Artikelname</p>
                    <p class="text-sm text-slate-500" id="receipt-wizard-item-price"></p>
                </div>
                
                <!-- Optionen -->
                <div class="space-y-3">
                    <button onclick="receiptWizardScan()" class="w-full p-4 bg-teal-600 text-white rounded-xl font-semibold flex items-center gap-4 hover:bg-teal-700">
                        <div class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center">
                            <i data-lucide="scan-barcode" class="w-6 h-6"></i>
                        </div>
                        <div class="text-left">
                            <p class="font-semibold">Barcode scannen</p>
                            <p class="text-xs text-white/70">Produkt mit Barcode zuordnen</p>
                        </div>
                    </button>
                    
                    <button onclick="receiptWizardManual()" class="w-full p-4 bg-slate-100 text-slate-800 rounded-xl font-semibold flex items-center gap-4 hover:bg-slate-200">
                        <div class="w-12 h-12 rounded-xl bg-slate-200 flex items-center justify-center">
                            <i data-lucide="pencil" class="w-6 h-6 text-slate-600"></i>
                        </div>
                        <div class="text-left">
                            <p class="font-semibold">Manuell anlegen</p>
                            <p class="text-xs text-slate-500">Neues Produkt ohne Barcode</p>
                        </div>
                    </button>
                    
                    <button onclick="receiptWizardSkip()" class="w-full p-4 bg-white border-2 border-slate-200 text-slate-600 rounded-xl font-semibold flex items-center gap-4 hover:bg-slate-50">
                        <div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center">
                            <i data-lucide="skip-forward" class="w-6 h-6 text-slate-400"></i>
                        </div>
                        <div class="text-left">
                            <p class="font-semibold">Überspringen</p>
                            <p class="text-xs text-slate-400">Später zuordnen</p>
                        </div>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Receipt Summary Modal (Abschluss-Übersicht) -->
        <div id="receipt-summary-modal" class="hidden fixed inset-0 z-[58] bg-white flex flex-col">
            <!-- Header -->
            <div class="flex-shrink-0 px-4 py-3 bg-green-600 text-white safe-area-top">
                <div class="flex items-center justify-center gap-2">
                    <i data-lucide="check-circle" class="w-6 h-6"></i>
                    <p class="font-semibold text-lg">Import abgeschlossen</p>
                </div>
            </div>
            
            <!-- Content -->
            <div class="flex-1 overflow-y-auto p-4">
                <!-- Erfolgs-Statistik -->
                <div class="bg-green-50 rounded-2xl p-4 mb-4">
                    <div class="flex items-center gap-4">
                        <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center">
                            <i data-lucide="package-check" class="w-8 h-8 text-green-600"></i>
                        </div>
                        <div>
                            <p class="text-3xl font-bold text-green-700" id="receipt-summary-imported-count">0</p>
                            <p class="text-sm text-green-600">Artikel eingebucht</p>
                        </div>
                    </div>
                </div>
                
                <!-- Eingebuchte Artikel Liste -->
                <div id="receipt-summary-imported-section" class="mb-6">
                    <p class="text-xs text-slate-500 uppercase tracking-wide mb-2">Eingebucht</p>
                    <div id="receipt-summary-imported-list" class="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
                        <!-- Dynamisch gefüllt -->
                    </div>
                </div>
                
                <!-- Übersprungene Artikel (falls vorhanden) -->
                <div id="receipt-summary-skipped-section" class="hidden">
                    <div class="bg-amber-50 rounded-2xl p-4 mb-4">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
                                <i data-lucide="alert-circle" class="w-6 h-6 text-amber-600"></i>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-amber-700" id="receipt-summary-skipped-count">0</p>
                                <p class="text-sm text-amber-600">Artikel übersprungen</p>
                            </div>
                        </div>
                    </div>
                    <p class="text-xs text-slate-500 uppercase tracking-wide mb-2">Nicht eingebucht</p>
                    <div id="receipt-summary-skipped-list" class="bg-white rounded-xl border border-amber-200 divide-y divide-slate-100">
                        <!-- Dynamisch gefüllt -->
                    </div>
                </div>
            </div>
            
            <!-- Footer -->
            <div class="flex-shrink-0 px-4 py-3 bg-white border-t border-slate-200 safe-area-bottom">
                <button onclick="receiptSummaryClose()" class="w-full py-4 bg-slate-800 text-white rounded-xl font-bold flex items-center justify-center gap-2">
                    <i data-lucide="check" class="w-5 h-5"></i>
                    Fertig
                </button>
            </div>
        </div>
        
        <!-- External Scanner Input Modal -->
        <div id="external-scanner-modal" class="hidden fixed inset-0 z-[59] bg-gradient-to-br from-slate-800 to-slate-900 flex flex-col">
            <div class="flex-1 flex flex-col items-center justify-center p-6">
                <!-- Header -->
                <div class="text-center mb-8">
                    <div class="w-20 h-20 rounded-full bg-teal-500/20 flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="usb" class="w-10 h-10 text-teal-400"></i>
                    </div>
                    <h2 class="text-xl font-bold text-white mb-2">Externer Scanner</h2>
                    <p class="text-slate-400 text-sm">Scanne einen Barcode mit deinem Hardware-Scanner</p>
                </div>
                
                <!-- Barcode Input -->
                <div class="w-full max-w-md bg-white/10 backdrop-blur rounded-2xl p-6">
                    <input type="text" id="external-scanner-input" inputmode="numeric" 
                        class="w-full px-4 py-4 bg-white border-2 border-teal-500 rounded-xl text-center text-2xl font-mono tracking-widest focus:border-teal-400 focus:outline-none focus:ring-4 focus:ring-teal-500/20" 
                        placeholder="Warte auf Scan..." maxlength="20" autocomplete="off">
                    <p class="text-xs text-slate-400 text-center mt-3"></p>
                </div>
                
                <!-- Wizard-Hinweis (nur im Wizard-Modus sichtbar) -->
                <div id="ext-scanner-wizard-hint" class="hidden w-full max-w-md mt-4 py-3 px-4 bg-teal-600 rounded-xl">
                    <p class="text-white text-sm text-center font-medium">📋 Kassenbon-Wizard: Einbuchen</p>
                </div>
                
                <!-- Mode Selection (versteckt im Wizard-Modus) -->
                <div id="ext-scanner-mode-toggle-container" class="w-full max-w-md mt-6">
                    <div class="flex gap-2">
                        <button id="ext-scanner-mode-add" onclick="setScannerMode('add')" class="flex-1 py-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 bg-indigo-600 text-white">
                            <i data-lucide="plus" class="w-4 h-4"></i> Einbuchen
                        </button>
                        <button id="ext-scanner-mode-consume" onclick="setScannerMode('consume')" class="flex-1 py-3 rounded-xl font-semibold text-sm flex items-center justify-center gap-2 bg-slate-100 text-slate-600">
                            <i data-lucide="minus" class="w-4 h-4"></i> Verbrauch
                        </button>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="w-full max-w-md mt-6 flex gap-3">
                    <button onclick="openCameraScannerFromExternal()" class="flex-1 py-3 bg-white/10 text-white rounded-xl font-medium flex items-center justify-center gap-2 hover:bg-white/20">
                        <i data-lucide="camera" class="w-4 h-4"></i> Kamera öffnen
                    </button>
                    <button onclick="cancelExternalScanner()" class="flex-1 py-3 bg-white/10 text-white rounded-xl font-medium hover:bg-white/20">
                        Schließen
                    </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-[59] 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-[65] 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-[66] 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-[67] 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-[66] 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 rounded-t-3xl max-h-[85vh] md:max-h-[90vh] overflow-hidden" onclick="event.stopPropagation()">
                    <!-- Handle für Mobile -->
                    <div class="md:hidden flex justify-center pt-3 pb-1">
                        <div class="w-12 h-1.5 bg-slate-300 rounded-full"></div>
                    </div>
                    <div id="detail-content" class="overflow-y-auto max-h-[85vh] 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-[59] 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>
        
        <!-- 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;
        
        // Externer Scanner Modus (USB/Bluetooth Barcode-Scanner)
        let externalScannerEnabled = false;
        
        // Scroll-Position und Produkt-ID für Rückkehr nach Einbuchen
        let lastScrollPosition = 0;
        let lastProductId = null;
        
        // API-Status für externe Datenquellen
        let apiStatus = { online: true, lastCheck: 0, apis: {} };
        
        // Session Key für Login-Status
        const SESSION_KEY = 'pantry_scan_logged_in';
        
        // Init
        document.addEventListener('DOMContentLoaded', () => {
            lucide.createIcons();
            
            // API-Status beim Laden prüfen (im Hintergrund für Login-Seite)
            checkApiStatus(true);
            
            // Ansichtsmodus laden
            loadViewMode();
            
            // 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
                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
                        loadProducts();
                        updateShoppingCount();
                        setActiveTab('dashboard');
                        checkApiStatus(); // API-Status nach Login aktualisieren
                    } 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 ============
        const tabOrder = ['dashboard', 'instock', 'all', 'shopping', 'settings'];
        let touchStartX = 0;
        let touchEndX = 0;
        const swipeThreshold = 50; // Mindestens 50px wischen
        
        function handleSwipe() {
            const diff = touchStartX - touchEndX;
            if (Math.abs(diff) < swipeThreshold) return;
            
            const currentIndex = tabOrder.indexOf(activeTab);
            if (currentIndex === -1) return;
            
            if (diff > 0 && currentIndex < tabOrder.length - 1) {
                // Nach links wischen = nächster Tab
                setActiveTab(tabOrder[currentIndex + 1]);
            } else if (diff < 0 && currentIndex > 0) {
                // Nach rechts wischen = vorheriger Tab
                setActiveTab(tabOrder[currentIndex - 1]);
            }
        }
        
        // Touch Events für Main-Content
        document.addEventListener('DOMContentLoaded', () => {
            const mainContent = document.querySelector('.main-content');
            if (mainContent) {
                mainContent.addEventListener('touchstart', (e) => {
                    touchStartX = e.changedTouches[0].screenX;
                }, { passive: true });
                
                mainContent.addEventListener('touchend', (e) => {
                    touchEndX = e.changedTouches[0].screenX;
                    handleSwipe();
                }, { passive: true });
            }
        });
        
        // View Mode Toggle
        function toggleViewMode() {
            viewMode = viewMode === 'grid' ? 'list' : 'grid';
            // Ansicht speichern
            localStorage.setItem('pantry_view_mode', viewMode);
            
            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();
        }
        
        // Ansicht beim Start laden
        function loadViewMode() {
            const saved = localStorage.getItem('pantry_view_mode');
            if (saved === 'list' || saved === 'grid') {
                viewMode = saved;
                const grid = document.getElementById('products-grid');
                const iconGrid = document.getElementById('view-icon-grid');
                const iconList = document.getElementById('view-icon-list');
                
                if (grid && viewMode === 'list') {
                    grid.classList.add('list-view');
                    if (iconGrid) iconGrid.classList.add('hidden');
                    if (iconList) iconList.classList.remove('hidden');
                }
            }
        }
        
        // 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();
            }
            
            // API-Status im Hintergrund prüfen (alle 5 Minuten)
            if (Date.now() - apiStatus.lastCheck > 300000) {
                checkApiStatus(true);
            }
            
            // 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();
                checkApiStatus(); // API-Status bei Settings-Öffnung aktualisieren
            } 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;
            document.getElementById('dash-total-qty').textContent = totalQty;
            
            // 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;
            currentMode = mode;
            
            // Scan-Modus in localStorage speichern
            localStorage.setItem('pantry_scan_mode', mode);
            
            // UI-Elemente für Kamera-Scanner
            const a = document.getElementById('scanner-mode-add');
            const c = document.getElementById('scanner-mode-consume');
            
            // UI-Elemente für externen Scanner (falls vorhanden)
            const ea = document.getElementById('ext-scanner-mode-add');
            const ec = document.getElementById('ext-scanner-mode-consume');
            
            // Reset Kamera-Scanner Buttons
            if (a) a.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-white/20 text-white';
            if (c) c.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-white/20 text-white';
            
            // Reset Externer Scanner Buttons
            if (ea) ea.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-slate-100 text-slate-600';
            if (ec) ec.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-slate-100 text-slate-600';
            
            // Set active
            if (mode === 'add') {
                if (a) a.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-indigo-600 text-white';
                if (ea) ea.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') {
                if (c) c.className = 'flex-1 py-2 rounded-xl font-semibold text-sm flex items-center justify-center gap-1 bg-red-500 text-white';
                if (ec) ec.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();
            
            // Auto-Fokus auf externes Scanner-Eingabefeld wenn sichtbar
            const extScannerModal = document.getElementById('external-scanner-modal');
            const extScannerInput = document.getElementById('external-scanner-input');
            if (extScannerModal && !extScannerModal.classList.contains('hidden') && extScannerInput) {
                setTimeout(() => extScannerInput.focus(), 50);
            }
        }
        
        // 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();
                
                // Nach dem Rendern: Zur gespeicherten Position/Produkt scrollen
                if (lastProductId) {
                    setTimeout(() => {
                        const productCard = document.querySelector(`[data-product-id="${lastProductId}"]`);
                        if (productCard) {
                            productCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                        lastProductId = null; // Reset
                    }, 100);
                }
            } 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();
        }
        
        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();
                    const barcode = (p.barcode || '').toLowerCase();
                    return name.includes(searchTerm) || brand.includes(searchTerm) || categories.includes(searchTerm) || barcode.includes(searchTerm);
                });
            }
            
            // Kategorie-Filter (vegan, vegetarisch, palmölfrei, allergenfrei, nicht-lebensmittel)
            if (filterValue) {
                visible = visible.filter(p => {
                    const tags = (p.analysis_tags || '').toLowerCase();
                    const allergens = (p.allergens_tags || '').toLowerCase();
                    const categories = (p.categories || '').toLowerCase();
                    const name = (p.name || '').toLowerCase();
                    
                    // Kategorie-Filter
                    if (filterValue === 'non-food') return p.is_food === 0 || p.is_food === '0' || p.is_food === false;
                    if (filterValue === 'nonfood') return p.is_food === 0 || p.is_food === '0' || p.is_food === false;
                    
                    // 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;
            
            // Im Wizard-Modus: Immer Einbuchen, Toggle verstecken
            const isWizardMode = window.isWizardScanMode || window.isWizardManualMode;
            const modeToggle = document.getElementById('scanner-mode-toggle-container');
            const wizardHint = document.getElementById('scanner-wizard-hint');
            
            if (isWizardMode) {
                currentMode = 'add';
                scanMode = 'stock-in';
                if (modeToggle) modeToggle.classList.add('hidden');
                if (wizardHint) wizardHint.classList.remove('hidden');
            } else {
                // Letzte Scan-Option aus localStorage laden (nur wenn nicht im Wizard)
                const savedMode = localStorage.getItem('pantry_scan_mode');
                if (savedMode && (savedMode === 'add' || savedMode === 'consume')) {
                    currentMode = savedMode;
                }
                if (modeToggle) modeToggle.classList.remove('hidden');
                if (wizardHint) wizardHint.classList.add('hidden');
            }
            setScannerMode(currentMode);
            
            // Wenn externer Scanner aktiviert, zeige Eingabefeld statt Kamera
            if (externalScannerEnabled) {
                openExternalScannerInput();
                return;
            }
            
            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');
            
            // WICHTIG: Callback NICHT löschen wenn Scanner durch erfolgreichen Scan geschlossen wird
            // (onScanSuccess ruft closeScanner auf, bevor openAddModal geöffnet wird)
            // Nur bei manuellem Abbruch (X-Button) zurück zum Wizard
        }
        
        // Explizite Funktion zum Abbrechen des Scanners (X-Button)
        function cancelScanner() {
            closeScanner();
            
            // Wenn wir im Wizard-Modus waren, zurück zum Wizard
            if (window.isWizardScanMode && window.wizardItemToAssign) {
                window.isWizardScanMode = false;
                window.wizardItemToAssign = null;
                window.receiptWizardCallback = null;
                // Zurück zum Wizard
                document.getElementById('receipt-wizard-modal').classList.remove('hidden');
                updateReceiptWizard();
            }
        }
        
        // 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);
        }
        
        // ============ EXTERNER SCANNER MODUS ============
        
        // Externer Scanner Modal öffnen
        function openExternalScannerInput() {
            // Im Wizard-Modus: Immer Einbuchen, Toggle verstecken
            const isWizardMode = window.isWizardScanMode || window.isWizardManualMode;
            const modeToggle = document.getElementById('ext-scanner-mode-toggle-container');
            const wizardHint = document.getElementById('ext-scanner-wizard-hint');
            
            if (isWizardMode) {
                currentMode = 'add';
                scanMode = 'stock-in';
                if (modeToggle) modeToggle.classList.add('hidden');
                if (wizardHint) wizardHint.classList.remove('hidden');
            } else {
                // Letzte Scan-Option aus localStorage laden (nur wenn nicht im Wizard)
                const savedMode = localStorage.getItem('pantry_scan_mode');
                if (savedMode && (savedMode === 'add' || savedMode === 'consume')) {
                    currentMode = savedMode;
                }
                if (modeToggle) modeToggle.classList.remove('hidden');
                if (wizardHint) wizardHint.classList.add('hidden');
            }
            
            document.getElementById('external-scanner-modal').classList.remove('hidden');
            const input = document.getElementById('external-scanner-input');
            input.value = '';
            
            // Focus mit kleiner Verzögerung setzen
            setTimeout(() => {
                input.focus();
                setScannerMode(currentMode);
            }, 100);
            
            lucide.createIcons();
        }
        
        // Externer Scanner schließen
        function closeExternalScanner() {
            document.getElementById('external-scanner-modal').classList.add('hidden');
        }
        
        // Externer Scanner abbrechen (X-Button)
        function cancelExternalScanner() {
            closeExternalScanner();
            
            // Wenn wir im Wizard-Modus waren, zurück zum Wizard
            if (window.isWizardScanMode && window.wizardItemToAssign) {
                window.isWizardScanMode = false;
                window.wizardItemToAssign = null;
                window.receiptWizardCallback = null;
                // Zurück zum Wizard
                document.getElementById('receipt-wizard-modal').classList.remove('hidden');
                updateReceiptWizard();
            }
        }
        
        // Von externem Scanner zur Kamera wechseln
        function openCameraScannerFromExternal() {
            closeExternalScanner();
            // Kamera-Scanner direkt öffnen (ohne externalScannerEnabled Check)
            document.getElementById('scanner-modal').classList.remove('hidden');
            setScannerMode(currentMode);
            startScannerWithCamera(currentFacingMode);
        }
        
        // Event Listener für externes Scanner-Input (Enter-Taste)
        document.addEventListener('DOMContentLoaded', function() {
            const extInput = document.getElementById('external-scanner-input');
            if (extInput) {
                extInput.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        const barcode = this.value.trim();
                        if (barcode) {
                            closeExternalScanner();
                            onScanSuccess(barcode);
                        } else {
                            showToast('Bitte Barcode scannen', 'error');
                        }
                    }
                });
                
                // Fokus halten: Bei Blur sofort wieder fokussieren
                extInput.addEventListener('blur', function() {
                    const modal = document.getElementById('external-scanner-modal');
                    // Nur refokussieren wenn das Modal noch sichtbar ist
                    if (modal && !modal.classList.contains('hidden')) {
                        setTimeout(() => {
                            if (!document.getElementById('external-scanner-modal').classList.contains('hidden')) {
                                this.focus();
                            }
                        }, 50);
                    }
                });
            }
        });
        
        // Externer Scanner Einstellung umschalten
        async function toggleExternalScanner() {
            const toggle = document.getElementById('external-scanner-toggle');
            const enabled = toggle.checked;
            
            try {
                await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'external_scanner_enabled', value: enabled ? '1' : '0' })
                });
                
                externalScannerEnabled = enabled;
                
                if (enabled) {
                    showToast('Externer Scanner aktiviert', 'success');
                } else {
                    showToast('Kamera-Scanner aktiviert', 'info');
                }
            } catch (e) {
                showToast('Fehler beim Speichern', 'error');
                toggle.checked = !enabled; // Zurücksetzen bei Fehler
            }
        }
        
        // ============ END EXTERNER SCANNER MODUS ============
        
        // ============ KASSENBON SCANNER (v1.2.0) ============
        
        let receiptData = null; // Globale Variable für extrahierte Kassenbon-Daten
        let receiptEditingIndex = null; // Welcher Artikel wird gerade bearbeitet
        
        function openReceiptScanner() {
            // Alle Receipt-bezogenen States zurücksetzen
            receiptData = null;
            receiptEditingIndex = null;
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            window.receiptMhdIndex = null;
            
            // Wizard-States zurücksetzen
            window.isWizardScanMode = false;
            window.isWizardManualMode = false;
            window.wizardItemToAssign = null;
            window.receiptWizardCallback = null;
            
            // MHD-Modal schließen falls offen
            document.getElementById('mhd-modal').classList.add('hidden');
            
            document.getElementById('receipt-modal').classList.remove('hidden');
            showReceiptView('upload');
            lucide.createIcons();
        }
        
        function closeReceiptScanner() {
            document.getElementById('receipt-modal').classList.add('hidden');
            
            // Alle Receipt-bezogenen States zurücksetzen
            receiptData = null;
            receiptEditingIndex = null;
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            window.receiptMhdIndex = null;
            
            // Wizard-States zurücksetzen
            window.isWizardScanMode = false;
            window.isWizardManualMode = false;
            window.wizardItemToAssign = null;
            window.receiptWizardCallback = null;
            
            // MHD-Modal schließen falls offen
            document.getElementById('mhd-modal').classList.add('hidden');
        }
        
        function showReceiptView(view) {
            // Views: upload, analysis, results, debug-wait
            document.getElementById('receipt-upload-view').classList.add('hidden');
            document.getElementById('receipt-analysis-view').classList.add('hidden');
            document.getElementById('receipt-results-view').classList.add('hidden');
            document.getElementById('receipt-footer').classList.add('hidden');
            
            // Error-Continue Button verstecken
            const continueBtn = document.getElementById('receipt-error-continue-btn');
            if (continueBtn) continueBtn.classList.add('hidden');
            
            if (view === 'upload') {
                document.getElementById('receipt-upload-view').classList.remove('hidden');
                document.getElementById('receipt-status-text').textContent = 'Bild auswählen';
            } else if (view === 'analysis') {
                document.getElementById('receipt-analysis-view').classList.remove('hidden');
                document.getElementById('receipt-status-text').textContent = 'Wird analysiert...';
            } else if (view === 'results') {
                document.getElementById('receipt-results-view').classList.remove('hidden');
                document.getElementById('receipt-footer').classList.remove('hidden');
                document.getElementById('receipt-status-text').textContent = 'Artikel prüfen';
            } else if (view === 'debug-wait') {
                // Analyse-View mit Weiter-Button zeigen (für Debug-Modus)
                document.getElementById('receipt-analysis-view').classList.remove('hidden');
                if (continueBtn) {
                    continueBtn.textContent = 'Weiter zu Ergebnissen';
                    continueBtn.classList.remove('hidden');
                    continueBtn.onclick = () => showReceiptView('results');
                }
            }
        }
        
        function receiptTakePhoto() {
            // Kamera öffnen
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.capture = 'environment';
            input.onchange = (e) => receiptFileSelected(e);
            input.click();
        }
        
        // Bild komprimieren für schnellere API-Verarbeitung
        async function compressImage(base64, maxWidth = 1200, quality = 0.8) {
            return new Promise((resolve) => {
                const img = new Image();
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    let width = img.width;
                    let height = img.height;
                    
                    // Skalieren wenn zu groß
                    if (width > maxWidth) {
                        height = Math.round(height * maxWidth / width);
                        width = maxWidth;
                    }
                    
                    canvas.width = width;
                    canvas.height = height;
                    
                    const ctx = canvas.getContext('2d');
                    ctx.fillStyle = '#FFFFFF';
                    ctx.fillRect(0, 0, width, height);
                    ctx.drawImage(img, 0, 0, width, height);
                    
                    const compressed = canvas.toDataURL('image/jpeg', quality);
                    console.log(`[RECEIPT] Bild komprimiert: ${Math.round(base64.length/1024)}KB → ${Math.round(compressed.length/1024)}KB`);
                    resolve(compressed);
                };
                img.src = base64;
            });
        }
        
        function receiptFileSelected(event) {
            const file = event.target.files[0];
            if (!file) return;
            
            // PDF-Erkennung
            if (file.type === 'application/pdf') {
                handlePdfReceipt(file);
                return;
            }
            
            // Normales Bild - komprimieren für schnellere Verarbeitung
            const reader = new FileReader();
            reader.onload = async (e) => {
                const originalBase64 = e.target.result;
                document.getElementById('receipt-preview-img').src = originalBase64;
                showReceiptView('analysis');
                
                // Komprimieren bevor an API senden
                const compressedBase64 = await compressImage(originalBase64, 1400, 0.85);
                await analyzeReceipt(compressedBase64);
            };
            reader.readAsDataURL(file);
        }
        
        // PDF in Bild konvertieren und analysieren
        async function handlePdfReceipt(file) {
            showReceiptView('analysis');
            document.getElementById('receipt-analysis-status').textContent = 'PDF wird geladen...';
            
            try {
                // PDF.js prüfen
                if (typeof pdfjsLib === 'undefined') {
                    throw new Error('PDF-Bibliothek nicht geladen');
                }
                
                // PDF laden
                const arrayBuffer = await file.arrayBuffer();
                const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
                
                // Erste Seite holen
                const page = await pdf.getPage(1);
                
                // Hohe Auflösung für OCR (2x Skalierung)
                const scale = 2.0;
                const viewport = page.getViewport({ scale });
                
                // Canvas erstellen
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.width = viewport.width;
                canvas.height = viewport.height;
                
                // PDF-Seite rendern
                document.getElementById('receipt-analysis-status').textContent = 'PDF wird konvertiert...';
                await page.render({
                    canvasContext: context,
                    viewport: viewport
                }).promise;
                
                // Canvas zu Base64 konvertieren (JPEG für kleinere Größe)
                const base64 = canvas.toDataURL('image/jpeg', 0.9);
                
                // Vorschau anzeigen
                document.getElementById('receipt-preview-img').src = base64;
                
                // Analysieren
                await analyzeReceipt(base64);
                
            } catch (error) {
                console.error('PDF processing error:', error);
                showToast('PDF konnte nicht verarbeitet werden: ' + error.message, 'error');
                showReceiptView('upload');
            }
        }
        
        async function analyzeReceipt(imageBase64) {
            const statusEl = document.getElementById('receipt-analysis-status');
            const subStatusEl = document.getElementById('receipt-analysis-substatus');
            const debugPanel = document.getElementById('receipt-debug-panel');
            const debugLog = document.getElementById('receipt-debug-log');
            
            // Debug-Modus prüfen
            const debugMode = localStorage.getItem('debug_mode') === '1';
            
            // Debug-Panel nur bei aktivem Debug-Modus anzeigen
            if (debugPanel) {
                if (debugMode) {
                    debugPanel.classList.remove('hidden');
                    debugLog.innerHTML = '';
                } else {
                    debugPanel.classList.add('hidden');
                }
            }
            
            // Debug-Funktion für Live-Updates
            const addDebugLine = (msg, type = 'info') => {
                if (!debugMode) return; // Keine Logs wenn Debug aus
                const colors = { info: 'text-green-400', warn: 'text-yellow-400', error: 'text-red-400' };
                const time = new Date().toLocaleTimeString('de-DE');
                if (debugLog) {
                    debugLog.innerHTML += `<p class="${colors[type] || colors.info}">[${time}] ${msg}</p>`;
                    debugLog.scrollTop = debugLog.scrollHeight;
                }
                console.log(`[RECEIPT] ${msg}`);
            };
            
            const updateStatus = (main, sub) => {
                if (statusEl) statusEl.textContent = main;
                if (subStatusEl) subStatusEl.textContent = sub || '';
                if (debugMode) addDebugLine(`${main} - ${sub || ''}`);
            };
            
            // Fortschrittsanzeige-Elemente
            const progressBar = document.getElementById('receipt-progress-bar');
            const progressStep = document.getElementById('receipt-progress-step');
            
            const updateProgress = (step, total, percent) => {
                if (progressBar) progressBar.style.width = `${percent}%`;
                if (progressStep) progressStep.textContent = `Schritt ${step}/${total}`;
            };
            
            // Schritt 1: Upload vorbereiten
            updateStatus('Verbinde mit KI...', 'Sende Bild zur Analyse');
            updateProgress(1, 4, 10);
            
            try {
                // Bildgröße für Debug
                const imageSizeKB = Math.round(imageBase64.length * 0.75 / 1024);
                addDebugLine(`Bildgröße: ${imageSizeKB} KB`);
                
                // Schritt 2: KI-Analyse starten (Async)
                updateStatus('Starte KI-Analyse...', `Bildgröße: ${imageSizeKB} KB`);
                updateProgress(2, 4, 25);
                
                const startTime = Date.now();
                addDebugLine('Sende Request an api.php?action=start-receipt-job (Async)');
                
                // Fortschritts-Animation während des Wartens
                let progressPercent = 25;
                let progressInterval;
                
                // === ASYNC JOB STARTEN ===
                let jobId;
                try {
                    const startResponse = await fetch('api.php?action=start-receipt-job', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ image: imageBase64 })
                    });
                    
                    const startData = await startResponse.json();
                    
                    if (!startData.success || !startData.job_id) {
                        throw new Error(startData.error || 'Job konnte nicht gestartet werden');
                    }
                    
                    jobId = startData.job_id;
                    addDebugLine(`Job gestartet: ${jobId}`);
                    
                } catch (startError) {
                    addDebugLine(`Start-Fehler: ${startError.message}`, 'error');
                    throw new Error(`Job-Start fehlgeschlagen: ${startError.message}`);
                }
                
                // === POLLING FÜR JOB-STATUS ===
                updateStatus('KI analysiert Kassenbon...', 'Bitte warten');
                
                progressInterval = setInterval(() => {
                    if (progressPercent < 85) {
                        progressPercent += 0.5;
                        if (progressBar) progressBar.style.width = `${progressPercent}%`;
                    }
                }, 500);
                
                let data;
                let pollAttempts = 0;
                const maxPollAttempts = 300; // Max 5 Minuten (300 * 1 Sek)
                
                while (pollAttempts < maxPollAttempts) {
                    await new Promise(resolve => setTimeout(resolve, 1000)); // 1 Sekunde warten
                    pollAttempts++;
                    
                    try {
                        const statusResponse = await fetch(`api.php?action=check-receipt-job&id=${jobId}`);
                        const statusData = await statusResponse.json();
                        
                        addDebugLine(`Poll #${pollAttempts}: Status = ${statusData.status}`);
                        
                        if (statusData.status === 'done') {
                            data = statusData.result;
                            break;
                        }
                        
                        if (statusData.status === 'error') {
                            throw new Error(statusData.error || 'Analyse fehlgeschlagen');
                        }
                        
                        // Status-Update für User
                        const elapsed = Math.round((Date.now() - startTime) / 1000);
                        updateStatus('KI analysiert Kassenbon...', `${elapsed} Sek.`);
                        
                    } catch (pollError) {
                        addDebugLine(`Poll-Fehler: ${pollError.message}`, 'warn');
                        // Bei Poll-Fehlern weitermachen, nicht abbrechen
                    }
                }
                
                clearInterval(progressInterval);
                
                if (!data) {
                    throw new Error('Zeitüberschreitung - Analyse dauert zu lange');
                }
                
                const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
                addDebugLine(`Analyse abgeschlossen nach ${elapsed}s`);
                
                // Schritt 3: Antwort verarbeiten
                updateStatus('Verarbeite Antwort...', `Analyse in ${elapsed}s abgeschlossen`);
                updateProgress(3, 4, 90);
                
                // Erfolg
                addDebugLine(`✓ Erfolg! Händler: ${data.merchant}, Artikel: ${data.items?.length || 0}`, 'info');
                
                // Schritt 4: Fertig
                updateStatus('Fertig!', `${data.items?.length || 0} Artikel erkannt`);
                updateProgress(4, 4, 100);
                
                // Daten speichern
                receiptData = data;
                
                // UI aktualisieren
                renderReceiptResults();
                
                // Automatisch KI-MHD für alle vor-zugeordneten Artikel anfordern
                requestMhdForAllMatchedItems();
                
                // Im Debug-Modus: Weiter-Button zeigen statt automatisch weiterzuleiten
                const debugMode = localStorage.getItem('debug_mode') === '1';
                if (debugMode) {
                    addDebugLine('Debug-Modus: Klicke "Weiter" um fortzufahren', 'warn');
                    showReceiptView('debug-wait');
                } else {
                    showReceiptView('results');
                }
                
            } catch (error) {
                addDebugLine(`FEHLER: ${error.message}`, 'error');
                addDebugLine(`Stack: ${error.stack || 'n/a'}`, 'error');
                
                // Fehler-Status anzeigen
                updateStatus('FEHLER', error.message);
                
                // "Weiter"-Button anzeigen statt automatisch weiterzuleiten
                const continueBtn = document.getElementById('receipt-error-continue-btn');
                if (continueBtn) {
                    continueBtn.classList.remove('hidden');
                    addDebugLine('Klicke "Zurück zum Upload" um fortzufahren', 'warn');
                }
                
                showToast(error.message || 'Kassenbon konnte nicht gelesen werden', 'error');
                // NICHT automatisch weiterleiten - User muss Button klicken
            }
        }
        
        // Fehler-Button Handler
        function receiptErrorContinue() {
            const continueBtn = document.getElementById('receipt-error-continue-btn');
            if (continueBtn) continueBtn.classList.add('hidden');
            showReceiptView('upload');
        }
        
        function renderReceiptResults() {
            if (!receiptData) return;
            
            // Header-Info
            document.getElementById('receipt-merchant').textContent = receiptData.merchant || 'Unbekannter Händler';
            document.getElementById('receipt-date').textContent = receiptData.date || '';
            document.getElementById('receipt-item-count').textContent = receiptData.items.length;
            
            // Artikel-Liste
            const listContainer = document.getElementById('receipt-items-list');
            listContainer.innerHTML = '';
            
            receiptData.items.forEach((item, index) => {
                // Zugeordnet = matched ODER new_from_off ODER new_confirmed ODER new (direkt als neues Produkt markiert)
                const isAssigned = item.status === 'matched' || item.status === 'new_from_off' || item.status === 'new_confirmed' || item.status === 'new';
                const isExisting = item.status === 'matched' && item.matched_product?.id;
                const isNewFromOff = item.status === 'new_from_off';
                const isNewManual = item.status === 'new_confirmed' || item.status === 'new';
                
                // Vorschläge zählen: alternatives + lokale matched_product (wenn nicht auto_matched)
                const alternativesCount = item.alternatives?.length || 0;
                const hasLocalSuggestion = item.matched_product && !item.matched_product.auto_matched;
                const suggestionCount = alternativesCount + (hasLocalSuggestion ? 1 : 0);
                const hasSuggestions = suggestionCount > 0;
                
                // Produktdaten (aus matched_product oder off_data)
                const product = item.matched_product || (item.off_data ? {
                    name: item.off_data.name,
                    brand: item.off_data.brand,
                    image_url: item.off_data.image_url
                } : null);
                const imageUrl = product?.custom_image || product?.image_url || PLACEHOLDER;
                
                // Status-Text und Farbe
                let statusText = '';
                let statusClass = '';
                if (isExisting) {
                    statusText = `→ ${product.name}${product.brand ? ' (' + product.brand + ')' : ''}`;
                    statusClass = 'text-teal-600';
                } else if (isNewFromOff) {
                    statusText = `→ ${product?.name || item.original_name} (wird neu angelegt)`;
                    statusClass = 'text-emerald-600';
                } else if (item.status === 'new') {
                    // Direkt als neues Produkt markiert (keine lokalen Matches)
                    statusText = `→ Neues Produkt (Barcodescan nötig)`;
                    statusClass = 'text-amber-600';
                } else if (isNewManual) {
                    statusText = `→ Neues Produkt: "${item.original_name}"`;
                    statusClass = 'text-emerald-600';
                } else if (hasSuggestions && !isAssigned) {
                    // Nicht zugeordnet aber Vorschläge vorhanden
                    statusText = `${suggestionCount} Vorschlag${suggestionCount > 1 ? 'e' : ''} verfügbar`;
                    statusClass = 'text-purple-600';
                } else {
                    statusText = 'Nicht zugeordnet';
                    statusClass = 'text-amber-600';
                }
                
                // MHD formatieren
                let mhdDisplay = '';
                let mhdClass = 'bg-slate-100 text-slate-600';
                let mhdIcon = 'calendar';
                if (item.expiry_date) {
                    const expDate = new Date(item.expiry_date);
                    mhdDisplay = expDate.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
                    mhdClass = 'bg-orange-100 text-orange-700';
                    mhdIcon = 'calendar';
                } else if (item.mhd_suggestion) {
                    // KI-Vorschlag vorhanden aber nicht bestätigt
                    const sugDate = new Date(item.mhd_suggestion);
                    mhdDisplay = sugDate.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
                    mhdClass = 'bg-blue-100 text-blue-600';
                    mhdIcon = 'sparkles'; // KI-Icon
                } else {
                    mhdDisplay = 'MHD';
                    mhdIcon = 'calendar';
                }
                
                const html = `
                    <div class="receipt-item px-3 py-2 ${isAssigned ? 'bg-teal-50/50' : ''}" data-index="${index}">
                        <!-- Zweizeiliges Layout für Mobile -->
                        <div class="flex flex-wrap gap-2">
                            <!-- Erste Zeile: Bild + Info -->
                            <div class="flex items-center gap-2 flex-1 min-w-0 cursor-pointer hover:opacity-80" onclick="openReceiptProductPopup(${index})">
                                <!-- Bild -->
                                <div class="w-10 h-10 rounded-lg bg-slate-100 flex-shrink-0 overflow-hidden ${isAssigned ? 'ring-2 ring-teal-400' : ''}">
                                    ${(isAssigned && product) ? `<img src="${imageUrl}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">` : 
                                    `<div class="w-full h-full flex items-center justify-center text-slate-400"><i data-lucide="package" class="w-5 h-5"></i></div>`}
                                </div>
                                
                                <!-- Info -->
                                <div class="flex-1 min-w-0">
                                    <p class="font-medium text-slate-800 text-sm truncate">${item.original_name}</p>
                                    <p class="text-xs ${statusClass} truncate">${statusText}</p>
                                </div>
                            </div>
                            
                            <!-- Zweite Zeile: Buttons (auf Mobile volle Breite) -->
                            <div class="flex items-center gap-1.5 w-full sm:w-auto justify-end">
                                <!-- Zuordnung aufheben Button (nur bei zugeordneten Artikeln) -->
                                ${isAssigned ? `
                                <button onclick="event.stopPropagation(); receiptUnassignItem(${index})" class="w-8 h-8 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center hover:bg-amber-200" title="Zuordnung aufheben">
                                    <i data-lucide="unlink" class="w-3.5 h-3.5"></i>
                                </button>
                                ` : ''}
                                
                                <!-- MHD Button -->
                                ${isAssigned ? `
                                <button onclick="event.stopPropagation(); openReceiptMhdModal(${index})" class="px-2.5 py-1.5 rounded-lg ${mhdClass} text-xs font-medium flex items-center gap-1 hover:opacity-80">
                                    <i data-lucide="${mhdIcon}" class="w-3.5 h-3.5"></i>
                                    ${mhdDisplay}
                                </button>
                                ` : `
                                <span class="px-2.5 py-1.5 rounded-lg bg-slate-100 text-slate-400 text-xs font-medium flex items-center gap-1 cursor-not-allowed">
                                    <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
                                    -
                                </span>
                                `}
                                
                                <!-- Menge -->
                                <div class="flex items-center gap-0.5 bg-slate-50 rounded-lg px-1">
                                    <button onclick="receiptAdjustQty(${index}, -1)" class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-slate-200">
                                        <i data-lucide="minus" class="w-3.5 h-3.5"></i>
                                    </button>
                                    <span class="w-7 text-center font-bold text-slate-800 text-sm">${item.quantity}</span>
                                    <button onclick="receiptAdjustQty(${index}, 1)" class="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-slate-200">
                                        <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                                    </button>
                                </div>
                                
                                <!-- Entfernen -->
                                <button onclick="receiptRemoveItem(${index})" class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center hover:bg-red-200">
                                    <i data-lucide="x" class="w-3.5 h-3.5"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                listContainer.insertAdjacentHTML('beforeend', html);
            });
            
            // Button-Text aktualisieren - alle zugeordneten Artikel zählen
            const validItems = receiptData.items.filter(i => 
                i.status === 'matched' || i.status === 'new_from_off' || i.status === 'new_confirmed'
            ).length;
            document.getElementById('receipt-book-btn-text').textContent = `${validItems} Artikel einbuchen`;
            
            lucide.createIcons();
        }
        
        function receiptAdjustQty(index, delta) {
            if (!receiptData || !receiptData.items[index]) return;
            
            const newQty = receiptData.items[index].quantity + delta;
            if (newQty >= 1 && newQty <= 99) {
                receiptData.items[index].quantity = newQty;
                renderReceiptResults();
            }
        }
        
        function receiptRemoveItem(index) {
            if (!receiptData || !receiptData.items[index]) return;
            receiptData.items.splice(index, 1);
            renderReceiptResults();
            
            if (receiptData.items.length === 0) {
                showToast('Alle Artikel entfernt', 'info');
                showReceiptView('upload');
            }
        }
        
        // Zuordnung eines Artikels aufheben
        function receiptUnassignItem(index) {
            if (!receiptData || !receiptData.items[index]) return;
            
            const item = receiptData.items[index];
            
            // Status zurücksetzen
            item.status = 'unmatched';
            item.matched_product = null;
            item.off_data = null;
            item.expiry_date = null;
            item.mhd_suggestion = null;
            item.mhd_category = null;
            item.mhd_days = null;
            
            renderReceiptResults();
            showToast('Zuordnung aufgehoben', 'info');
        }
        
        // ============ RECEIPT MHD FUNCTIONS ============
        
        let receiptMhdIndex = null;
        
        // Öffnet das bestehende MHD-Modal für einen Kassenbon-Artikel
        function openReceiptMhdModal(index) {
            if (!receiptData || !receiptData.items[index]) return;
            
            const item = receiptData.items[index];
            
            // Nur bei zugeordneten Artikeln
            const isAssigned = item.status === 'matched' || item.status === 'new_from_off' || item.status === 'new_confirmed';
            if (!isAssigned) {
                showToast('Bitte zuerst Produkt zuordnen', 'warning');
                return;
            }
            
            receiptMhdIndex = index;
            
            // Produktname für MHD-Modal
            const productName = item.matched_product?.name || item.off_data?.name || item.original_name;
            
            // Globale Variablen für MHD-Modal setzen
            window.receiptMhdMode = true;
            window.receiptMhdProductName = productName;
            window.receiptMhdIndex = index;
            
            // Setze vorhandenes MHD wenn vorhanden (über window für globalen Zugriff)
            if (item.expiry_date) {
                window.mhdSelectedDateReceipt = item.expiry_date;
            } else if (item.mhd_suggestion) {
                window.mhdSelectedDateReceipt = item.mhd_suggestion;
            } else {
                window.mhdSelectedDateReceipt = null;
            }
            
            // MHD-Modal öffnen - aber erst die interne Variable setzen
            // Das geschieht in openMhdModal() selbst
            openMhdModal();
            
            // Produktname im Modal aktualisieren
            const productNameEl = document.getElementById('mhd-modal-product');
            if (productNameEl) {
                productNameEl.textContent = productName;
            }
            
            // Automatisch KI-Vorschlag anfordern wenn noch kein MHD
            if (!item.expiry_date && !item.mhd_suggestion) {
                setTimeout(() => mhdAiSuggest(), 500);
            }
        }
        
        // Callback wenn MHD-Modal bestätigt wird (wird in confirmMhd aufgerufen)
        function handleReceiptMhdConfirm(selectedDate) {
            if (receiptMhdIndex === null || !receiptData || !window.receiptMhdMode) return false;
            
            // MHD speichern
            receiptData.items[receiptMhdIndex].expiry_date = selectedDate || null;
            
            // Reset
            receiptMhdIndex = null;
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            
            // Liste neu rendern
            renderReceiptResults();
            
            return true; // Signal dass wir im Receipt-Modus waren
        }
        
        // Automatische MHD-Anforderung für alle vor-zugeordneten Artikel
        async function requestMhdForAllMatchedItems() {
            if (!receiptData || !receiptData.items) return;
            
            for (let i = 0; i < receiptData.items.length; i++) {
                const item = receiptData.items[i];
                
                // Nur für zugeordnete Artikel ohne MHD
                if ((item.status === 'matched' || item.status === 'new_from_off') && 
                    !item.expiry_date && !item.mhd_suggestion) {
                    
                    const productName = item.matched_product?.name || item.off_data?.name || item.original_name;
                    await requestMhdForItem(i, productName);
                }
            }
        }
        
        // ============ END RECEIPT MHD FUNCTIONS ============
        
        function openReceiptProductPopup(index) {
            if (!receiptData || !receiptData.items[index]) return;
            
            receiptEditingIndex = index;
            const item = receiptData.items[index];
            
            document.getElementById('receipt-popup-original').textContent = item.original_name;
            document.getElementById('receipt-product-popup').classList.remove('hidden');
            
            // Popup-Content laden
            const contentEl = document.getElementById('receipt-popup-content');
            
            // Sammle bereits gefundene Vorschläge aus dem Backend
            const existingSuggestions = [];
            
            // 1. matched_product (wenn nicht auto_matched, ist es ein Vorschlag)
            if (item.matched_product && !item.matched_product.auto_matched) {
                existingSuggestions.push({
                    ...item.matched_product,
                    source: item.matched_product.source || 'local',
                    relevance: item.matched_product.similarity || 80
                });
            }
            
            // 2. off_suggestions aus Backend
            if (item.off_suggestions && item.off_suggestions.length > 0) {
                item.off_suggestions.forEach(s => {
                    existingSuggestions.push({
                        ...s,
                        source: 'off',
                        relevance: s.relevance || 70
                    });
                });
            }
            
            // 3. alternatives (falls vorhanden)
            if (item.alternatives && item.alternatives.length > 0) {
                item.alternatives.forEach(a => {
                    // Duplikate vermeiden
                    if (!existingSuggestions.find(e => e.id === a.id || e.barcode === a.barcode)) {
                        existingSuggestions.push({
                            ...a,
                            source: a.source || 'local',
                            relevance: a.similarity || 60
                        });
                    }
                });
            }
            
            // Wenn bereits Vorschläge vorhanden, diese sofort anzeigen
            if (existingSuggestions.length > 0) {
                displayReceiptProducts(existingSuggestions, item.original_name);
            } else {
                // Keine Vorschläge vom Backend - Suche starten
                contentEl.innerHTML = `
                    <div class="text-center py-8">
                        <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-3">
                            <i data-lucide="loader-2" class="w-6 h-6 text-slate-400 animate-spin"></i>
                        </div>
                        <p class="text-slate-500 text-sm">Suche Produkte...</p>
                    </div>
                `;
                lucide.createIcons();
                
                // Produkte suchen
                searchReceiptProducts(item.original_name, []);
            }
        }
        
        function closeReceiptProductPopup() {
            document.getElementById('receipt-product-popup').classList.add('hidden');
            receiptEditingIndex = null;
        }
        
        async function searchReceiptProducts(query, existingAlternatives) {
            const contentEl = document.getElementById('receipt-popup-content');
            const item = receiptData?.items?.[receiptEditingIndex];
            
            // Füllwörter die ignoriert werden (gleich wie im Backend)
            const stopWords = ['bio', 'und', 'mit', 'von', 'aus', 'für', 'der', 'die', 'das', 'ein', 'eine', 'einer', 'den', 'dem', 'des', 'im', 'in', 'am', 'an', 'auf', 'zu', 'zur', 'zum', 'bei', 'nach', 'vor', 'oder', 'als', 'auch', 'nur', 'noch', 'sehr', 'mehr', 'viel', 'gut', 'neu', 'frisch', 'lecker', 'premium', 'original', 'classic', 'light', 'ohne', 'extra', 'rewe', 'edeka', 'aldi', 'lidl', 'penny', 'netto', 'kaufland', 'real'];
            
            // Ähnlichkeits-Funktion (gleich wie im Backend)
            function calculateSimilarity(str1, str2) {
                str1 = str1.toLowerCase().trim();
                str2 = str2.toLowerCase().trim();
                
                if (str1 === str2) return 100;
                
                // Wörter extrahieren und Füllwörter entfernen
                const words1 = str1.split(/[\s\-\_\.\,\(\)\/]+/).filter(w => w.length >= 3 && !stopWords.includes(w));
                const words2 = str2.split(/[\s\-\_\.\,\(\)\/]+/).filter(w => w.length >= 3 && !stopWords.includes(w));
                
                if (words1.length === 0 || words2.length === 0) return 0;
                
                // SPEZIAL 1: Beide Seiten haben nur EIN langes Wort -> direkter Substring-Vergleich
                const allWords1InOne = words1.length === 1 && words1[0].length > 8;
                const allWords2InOne = words2.length === 1 && words2[0].length > 8;
                
                if (allWords1InOne && allWords2InOne) {
                    const w1 = words1[0];
                    const w2 = words2[0];
                    const shorter = w1.length < w2.length ? w1 : w2;
                    const longer = w1.length >= w2.length ? w1 : w2;
                    
                    // Prüfe ob kürzeres Wort im längeren enthalten ist
                    if (longer.includes(shorter)) {
                        const containScore = (shorter.length / longer.length) * 100;
                        if (containScore >= 50) return Math.round(Math.min(90, containScore + 20));
                    }
                    
                    // Prüfe ob sie einen langen gemeinsamen Substring haben (mind. 6 Zeichen)
                    let commonLen = 0;
                    outer: for (let len = Math.min(w1.length, w2.length); len >= 6; len--) {
                        for (let i = 0; i <= w1.length - len; i++) {
                            const sub = w1.substring(i, i + len);
                            if (w2.includes(sub)) {
                                commonLen = len;
                                break outer;
                            }
                        }
                    }
                    if (commonLen >= 6) {
                        const avgLen = (w1.length + w2.length) / 2;
                        const commonScore = (commonLen / avgLen) * 100;
                        if (commonScore >= 40) return Math.round(Math.min(85, commonScore + 15));
                    }
                }
                
                // SPEZIAL 2: Ein langes Wort vs. mehrere kurze Wörter
                if (allWords1InOne && words2.length > 1) {
                    const longWord = words1[0];
                    let containedCount = 0;
                    words2.forEach(w2 => {
                        if (longWord.includes(w2) || w2.includes(longWord)) containedCount++;
                    });
                    if (containedCount === words2.length) return 90;
                    if (containedCount > 0) return Math.round((containedCount / words2.length) * 80);
                }
                
                if (allWords2InOne && words1.length > 1) {
                    const longWord = words2[0];
                    let containedCount = 0;
                    words1.forEach(w1 => {
                        if (longWord.includes(w1) || w1.includes(longWord)) containedCount++;
                    });
                    if (containedCount === words1.length) return 90;
                    if (containedCount > 0) return Math.round((containedCount / words1.length) * 80);
                }
                
                // Standard: Wort-für-Wort Matching
                let matchedWords = 0;
                const usedWords2 = [];
                
                for (const w1 of words1) {
                    let bestMatchScore = 0;
                    let bestMatchIdx = -1;
                    
                    for (let idx = 0; idx < words2.length; idx++) {
                        if (usedWords2.includes(idx)) continue;
                        const w2 = words2[idx];
                        
                        // Exaktes Match
                        if (w1 === w2) {
                            bestMatchScore = 1.0;
                            bestMatchIdx = idx;
                            break;
                        }
                        
                        // Teilweise Match (mind. 5 Zeichen)
                        if (w1.length >= 5 && w2.length >= 5) {
                            const shorter = w1.length < w2.length ? w1 : w2;
                            const longer = w1.length >= w2.length ? w1 : w2;
                            
                            if (longer.includes(shorter)) {
                                const score = shorter.length / longer.length;
                                if (score > bestMatchScore && score >= 0.5) {
                                    bestMatchScore = score;
                                    bestMatchIdx = idx;
                                }
                            }
                        }
                    }
                    
                    if (bestMatchScore > 0) {
                        matchedWords += bestMatchScore;
                        if (bestMatchIdx >= 0) usedWords2.push(bestMatchIdx);
                    }
                }
                
                const minWords = Math.min(words1.length, words2.length);
                return Math.round((matchedWords / minWords) * 100);
            }
            
            let results = [];
            
            // Erst existierende Alternativen anzeigen (bereits vom Backend gefiltert)
            if (existingAlternatives && existingAlternatives.length > 0) {
                results = existingAlternatives.map(a => ({...a, source: a.source || 'local', similarity: a.similarity_score || 100}));
            }
            
            // API-Vorschläge hinzufügen (aus dem Backend, bereits gefiltert)
            if (item?.off_suggestions && item.off_suggestions.length > 0) {
                item.off_suggestions.forEach(s => {
                    if (!results.find(r => r.barcode === s.barcode)) {
                        results.push({...s, source: s.source || 'openfoodfacts', similarity: s.relevance || 50});
                    }
                });
            }
            
            // Lokale DB-Suche mit STRENGER Ähnlichkeitsprüfung
            try {
                const localProducts = await fetch(`api.php?action=products`).then(r => r.json());
                
                localProducts.forEach(p => {
                    // Bereits in results?
                    if (results.find(r => r.id === p.id)) return;
                    
                    // Ähnlichkeit berechnen
                    const nameSim = calculateSimilarity(query, p.name || '');
                    const brandSim = calculateSimilarity(query, p.brand || '');
                    const combinedSim = calculateSimilarity(query, (p.name || '') + ' ' + (p.brand || ''));
                    
                    const similarity = Math.max(nameSim, brandSim, combinedSim);
                    
                    // NUR wenn mindestens 60% Ähnlichkeit
                    if (similarity >= 60) {
                        results.push({...p, source: 'local', similarity: similarity});
                    }
                });
            } catch (e) {
                console.error('Local search error:', e);
            }
            
            // Zusätzliche Open Food Facts Suche (falls wenige Ergebnisse)
            if (results.length < 5) {
                try {
                    const offResponse = await fetch(`api.php?action=search-product-off&q=${encodeURIComponent(query)}`);
                    const offData = await offResponse.json();
                    
                    if (offData.results && offData.results.length > 0) {
                        offData.results.forEach(p => {
                            // Bereits in results?
                            if (p.barcode && results.find(r => r.barcode === p.barcode)) return;
                            results.push({...p, source: 'openfoodfacts'});
                        });
                    }
                } catch (e) {
                    console.error('OFF search error:', e);
                }
            }
            
            // Ergebnisse rendern
            if (results.length === 0) {
                contentEl.innerHTML = `
                    <div class="text-center py-8">
                        <div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="package-search" class="w-8 h-8 text-amber-500"></i>
                        </div>
                        <p class="text-slate-600 font-medium mb-2">Kein Produkt gefunden</p>
                        <p class="text-slate-400 text-sm mb-6">Artikel wird als neues Produkt angelegt</p>
                        <button onclick="receiptConfirmNewProduct()" class="px-6 py-3 bg-amber-500 text-white rounded-xl font-semibold hover:bg-amber-600">
                            <i data-lucide="plus" class="w-4 h-4 inline mr-2"></i>
                            Als neues Produkt anlegen
                        </button>
                    </div>
                `;
            } else {
                // Nach Ähnlichkeit sortieren (höchste zuerst)
                results.sort((a, b) => {
                    return (b.similarity || 0) - (a.similarity || 0);
                });
                
                let html = `
                    <div class="mb-4">
                        <p class="text-xs text-slate-500 uppercase tracking-wide mb-2">Produkt auswählen (${results.length} Treffer)</p>
                    </div>
                    <div class="space-y-2">
                `;
                
                results.slice(0, 10).forEach((p, i) => {
                    const imageUrl = p.custom_image || p.image_url || PLACEHOLDER;
                    const isLocal = p.source === 'local';
                    
                    html += `
                        <button onclick='receiptSelectProduct(${JSON.stringify(p).replace(/'/g, "&#39;")})' 
                                class="w-full p-3 bg-white border border-slate-200 rounded-xl flex items-center gap-3 hover:border-teal-400 hover:bg-teal-50 transition-colors text-left">
                            <div class="w-12 h-12 rounded-lg bg-slate-100 flex-shrink-0 overflow-hidden">
                                <img src="${imageUrl}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-slate-800 truncate">${p.name}</p>
                                <p class="text-xs text-slate-500 truncate">${p.brand || ''} ${p.barcode ? '• ' + p.barcode : ''}</p>
                                <div class="flex items-center gap-2 mt-1">
                                    ${isLocal ? '<span class="text-xs px-2 py-0.5 bg-teal-100 text-teal-700 rounded-full">Lokal</span>' : 
                                               '<span class="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full">Open Food Facts</span>'}
                                    ${p.stock > 0 ? `<span class="text-xs text-slate-400">${p.stock}x im Bestand</span>` : ''}
                                </div>
                            </div>
                            <i data-lucide="chevron-right" class="w-5 h-5 text-slate-300"></i>
                        </button>
                    `;
                });
                
                html += `
                    </div>
                    <div class="mt-6 pt-4 border-t border-slate-200">
                        <button onclick="receiptConfirmNewProduct()" class="w-full py-3 bg-slate-100 text-slate-700 rounded-xl font-medium hover:bg-slate-200 flex items-center justify-center gap-2">
                            <i data-lucide="plus" class="w-4 h-4"></i>
                            Als neues Produkt anlegen
                        </button>
                    </div>
                `;
                
                contentEl.innerHTML = html;
            }
            
            lucide.createIcons();
        }
        
        // Zeigt Produktvorschläge im Popup an (ohne neue Suche)
        function displayReceiptProducts(results, originalName) {
            const contentEl = document.getElementById('receipt-popup-content');
            
            if (!results || results.length === 0) {
                // Keine Vorschläge -> Direkt als neues Produkt anlegen
                contentEl.innerHTML = `
                    <div class="text-center py-8">
                        <div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center mx-auto mb-4">
                            <i data-lucide="package-plus" class="w-8 h-8 text-amber-500"></i>
                        </div>
                        <p class="text-slate-600 font-medium mb-2">Neues Produkt</p>
                        <p class="text-slate-400 text-sm mb-6">Dieses Produkt ist noch nicht in deiner Datenbank</p>
                        <button onclick="receiptConfirmNewProduct()" class="px-6 py-3 bg-teal-500 text-white rounded-xl font-semibold hover:bg-teal-600">
                            <i data-lucide="plus" class="w-4 h-4 inline mr-2"></i>
                            Als neues Produkt anlegen
                        </button>
                    </div>
                `;
            } else {
                // Vorschläge anzeigen
                results.sort((a, b) => (b.relevance || b.similarity || 0) - (a.relevance || a.similarity || 0));
                
                let html = `
                    <div class="mb-4">
                        <p class="text-xs text-slate-500 uppercase tracking-wide mb-2">${results.length} passende${results.length === 1 ? 's' : ''} Produkt${results.length === 1 ? '' : 'e'} gefunden</p>
                    </div>
                    <div class="space-y-2">
                `;
                
                results.slice(0, 5).forEach((p) => {
                    const imageUrl = p.custom_image || p.image_url || PLACEHOLDER;
                    const relevance = p.relevance || p.similarity || 0;
                    
                    html += `
                        <button onclick='receiptSelectProduct(${JSON.stringify(p).replace(/'/g, "&#39;")})' 
                                class="w-full p-3 bg-white border border-slate-200 rounded-xl flex items-center gap-3 hover:border-teal-400 hover:bg-teal-50 transition-colors text-left">
                            <div class="w-12 h-12 rounded-lg bg-slate-100 flex-shrink-0 overflow-hidden">
                                <img src="${imageUrl}" class="w-full h-full object-cover" onerror="this.src='${PLACEHOLDER}'">
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-medium text-slate-800 truncate">${p.name}</p>
                                <p class="text-xs text-slate-500 truncate">${p.brand || ''} ${p.barcode ? '• ' + p.barcode : ''}</p>
                                <div class="flex items-center gap-2 mt-1">
                                    <span class="text-xs px-2 py-0.5 bg-teal-100 text-teal-700 rounded-full">Lokal</span>
                                    ${relevance > 0 ? `<span class="text-xs text-slate-400">${relevance}% Match</span>` : ''}
                                    ${p.stock > 0 ? `<span class="text-xs text-green-600">${p.stock}× auf Lager</span>` : ''}
                                </div>
                            </div>
                            <i data-lucide="chevron-right" class="w-5 h-5 text-slate-300"></i>
                        </button>
                    `;
                });
                
                html += `
                    </div>
                    <div class="mt-6 pt-4 border-t border-slate-200">
                        <button onclick="receiptConfirmNewProduct()" class="w-full py-3 bg-slate-100 text-slate-700 rounded-xl font-medium hover:bg-slate-200 flex items-center justify-center gap-2">
                            <i data-lucide="plus" class="w-4 h-4"></i>
                            Als neues Produkt anlegen
                        </button>
                    </div>
                `;
                
                contentEl.innerHTML = html;
            }
            
            lucide.createIcons();
        }
        
        function receiptSelectProduct(product) {
            if (receiptEditingIndex === null || !receiptData) return;
            
            const item = receiptData.items[receiptEditingIndex];
            const itemIndex = receiptEditingIndex;
            
            // Produkt zuweisen
            item.matched_product = {
                id: product.id || null,
                barcode: product.barcode || null,
                name: product.name,
                brand: product.brand || null,
                image_url: product.image_url || null,
                custom_image: product.custom_image || null,
                stock: product.stock || product.quantity || 0
            };
            item.status = product.source === 'openfoodfacts' && !product.id ? 'new_from_off' : 'matched';
            
            // Bei OFF-Produkten: Zusätzliche Daten speichern
            if (product.source === 'openfoodfacts') {
                item.off_data = {
                    barcode: product.barcode,
                    name: product.name,
                    brand: product.brand,
                    image_url: product.image_url,
                    nutri_score: product.nutri_score
                };
            }
            
            closeReceiptProductPopup();
            renderReceiptResults();
            showToast(`${product.name} ausgewählt`, 'success');
            
            // Automatisch KI-MHD anfordern wenn noch kein MHD
            if (!item.expiry_date) {
                requestMhdForItem(itemIndex, product.name);
            }
        }
        
        // Automatische MHD-Anforderung im Hintergrund
        async function requestMhdForItem(index, productName) {
            if (!receiptData || !receiptData.items[index]) return;
            
            try {
                const response = await fetch('api.php?action=suggest-mhd', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ product_name: productName })
                });
                
                const data = await response.json();
                
                if (response.ok && data.success && data.expiry_date) {
                    // MHD-Vorschlag speichern (nicht automatisch übernehmen)
                    receiptData.items[index].mhd_suggestion = data.expiry_date;
                    receiptData.items[index].mhd_category = data.category;
                    receiptData.items[index].mhd_days = data.days;
                    
                    // UI aktualisieren um den Vorschlag anzuzeigen
                    renderReceiptResults();
                }
            } catch (error) {
                console.error('Auto MHD request error:', error);
                // Fehler ignorieren - User kann MHD manuell setzen
            }
        }
        
        function receiptConfirmNewProduct() {
            if (receiptEditingIndex === null || !receiptData) return;
            
            const item = receiptData.items[receiptEditingIndex];
            const itemIndex = receiptEditingIndex;
            
            // Als neues Produkt markieren
            item.status = 'new_confirmed';
            item.matched_product = null;
            
            closeReceiptProductPopup();
            renderReceiptResults();
            showToast('Wird als neues Produkt angelegt', 'info');
            
            // Automatisch KI-MHD anfordern wenn noch kein MHD
            if (!item.expiry_date && !item.mhd_suggestion) {
                requestMhdForItem(itemIndex, item.original_name);
            }
        }
        
        // Wizard-State
        let receiptWizardItems = []; // Nicht zugeordnete Items für Wizard
        let receiptWizardIndex = 0;
        let receiptImportedItems = []; // Erfolgreich importierte Items
        let receiptSkippedItems = []; // Übersprungene Items
        
        async function receiptBookAll() {
            if (!receiptData || receiptData.items.length === 0) {
                showToast('Keine Artikel zum Einbuchen', 'warning');
                return;
            }
            
            // Trennen in zugeordnete und nicht zugeordnete Items
            const assignedItems = [];
            receiptWizardItems = [];
            receiptImportedItems = [];
            receiptSkippedItems = [];
            
            for (const item of receiptData.items) {
                if (item.status === 'matched' || item.status === 'new_from_off' || item.status === 'new_confirmed') {
                    assignedItems.push(item);
                } else {
                    receiptWizardItems.push(item);
                }
            }
            
            // Zugeordnete Items importieren
            if (assignedItems.length > 0) {
                showToast(`Buche ${assignedItems.length} zugeordnete Artikel ein...`, 'info');
                
                for (const item of assignedItems) {
                    try {
                        await importSingleReceiptItem(item);
                        receiptImportedItems.push({
                            name: item.matched_product?.name || item.off_data?.name || item.original_name,
                            quantity: item.quantity,
                            status: 'success'
                        });
                    } catch (e) {
                        console.error('Import error for', item, e);
                        receiptSkippedItems.push({
                            name: item.original_name,
                            quantity: item.quantity,
                            reason: e.message
                        });
                    }
                }
            }
            
            // Falls es nicht zugeordnete Items gibt → Wizard starten
            if (receiptWizardItems.length > 0) {
                receiptWizardIndex = 0;
                openReceiptWizard();
            } else {
                // Direkt zur Summary
                showReceiptSummary();
            }
        }
        
        async function importSingleReceiptItem(item) {
            const importItem = {
                quantity: item.quantity,
                expiry_date: item.expiry_date || item.mhd_suggestion || null  // MHD übernehmen
            };
            
            if (item.status === 'matched' && item.matched_product?.id) {
                importItem.product_id = item.matched_product.id;
                importItem.name = item.matched_product.name;
                importItem.is_new = false;
            } else if (item.status === 'new_from_off' && item.off_data) {
                importItem.is_new = true;
                importItem.barcode = item.off_data.barcode;
                importItem.name = item.off_data.name;
                importItem.brand = item.off_data.brand;
                importItem.image_url = item.off_data.image_url;
                importItem.nutri_score = item.off_data.nutri_score;
            } else if (item.status === 'new_confirmed') {
                importItem.is_new = true;
                importItem.name = item.original_name;
            } else {
                throw new Error('Nicht zugeordnet');
            }
            
            const response = await fetch('api.php?action=import-receipt-items', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ items: [importItem] })
            });
            
            const data = await response.json();
            if (!response.ok || !data.success) {
                throw new Error(data.error || 'Import fehlgeschlagen');
            }
            
            return data;
        }
        
        // ============ RECEIPT WIZARD ============
        
        function openReceiptWizard() {
            document.getElementById('receipt-modal').classList.add('hidden');
            // Backdrop zeigen für nahtlosen Übergang
            document.getElementById('receipt-wizard-backdrop').classList.remove('hidden');
            document.getElementById('receipt-wizard-modal').classList.remove('hidden');
            // MHD-Modal schließen falls offen
            document.getElementById('mhd-modal').classList.add('hidden');
            // Receipt-MHD-Modus zurücksetzen
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            window.receiptMhdIndex = null;
            updateReceiptWizard();
            lucide.createIcons();
        }
        
        function closeReceiptWizard() {
            document.getElementById('receipt-wizard-modal').classList.add('hidden');
            document.getElementById('receipt-wizard-backdrop').classList.add('hidden');
            // Receipt-MHD-Modus zurücksetzen
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            window.receiptMhdIndex = null;
            // Wizard-States zurücksetzen
            window.isWizardScanMode = false;
            window.isWizardManualMode = false;
            window.wizardItemToAssign = null;
            window.receiptWizardCallback = null;
            // MHD-Modal schließen falls offen
            document.getElementById('mhd-modal').classList.add('hidden');
        }
        
        function updateReceiptWizard() {
            if (receiptWizardIndex >= receiptWizardItems.length) {
                // Wizard fertig → Summary zeigen
                closeReceiptWizard();
                showReceiptSummary();
                return;
            }
            
            const item = receiptWizardItems[receiptWizardIndex];
            document.getElementById('receipt-wizard-progress').textContent = 
                `${receiptWizardIndex + 1} von ${receiptWizardItems.length}`;
            document.getElementById('receipt-wizard-item-name').textContent = item.original_name;
            document.getElementById('receipt-wizard-item-price').textContent = 
                item.price ? `${item.price.toFixed(2)} € • ${item.quantity}x` : `${item.quantity}x`;
            
            lucide.createIcons();
        }
        
        function receiptWizardBack() {
            if (receiptWizardIndex > 0) {
                receiptWizardIndex--;
                updateReceiptWizard();
            } else {
                // Zurück zur Artikelliste
                closeReceiptWizard();
                document.getElementById('receipt-modal').classList.remove('hidden');
            }
        }
        
        function receiptWizardSkip() {
            const item = receiptWizardItems[receiptWizardIndex];
            receiptSkippedItems.push({
                name: item.original_name,
                quantity: item.quantity,
                reason: 'Übersprungen'
            });
            receiptWizardIndex++;
            updateReceiptWizard();
        }
        
        // Wizard komplett abbrechen
        function receiptWizardCancel() {
            if (confirm('Wizard abbrechen? Die bereits eingebuchten Artikel bleiben erhalten.')) {
                closeReceiptWizard();
                showReceiptSummary();
            }
        }
        
        function receiptWizardSkipAll() {
            // Alle verbleibenden überspringen
            for (let i = receiptWizardIndex; i < receiptWizardItems.length; i++) {
                const item = receiptWizardItems[i];
                receiptSkippedItems.push({
                    name: item.original_name,
                    quantity: item.quantity,
                    reason: 'Übersprungen'
                });
            }
            closeReceiptWizard();
            showReceiptSummary();
        }
        
        function receiptWizardScan() {
            // Speichere aktuellen Item-Index und öffne Scanner
            const currentItem = receiptWizardItems[receiptWizardIndex];
            
            // WICHTIG: Alle States ZUERST zurücksetzen
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            window.receiptMhdIndex = null;
            receiptMhdIndex = null;
            window.isWizardManualMode = false;
            
            // Alle potenziell offenen Modals schließen
            document.getElementById('mhd-modal').classList.add('hidden');
            document.getElementById('manual-modal').classList.add('hidden');
            
            // Scanner im "Einbuchen"-Modus öffnen mit Callback
            window.receiptWizardCallback = async (scannedProduct) => {
                // Produkt wurde gescannt und eingebucht
                receiptImportedItems.push({
                    name: scannedProduct.name,
                    quantity: currentItem.quantity,
                    status: 'success',
                    via: 'scan'
                });
                
                // Nächsten Wizard-Item
                receiptWizardIndex++;
                
                // Wizard wieder öffnen
                document.getElementById('receipt-wizard-modal').classList.remove('hidden');
                updateReceiptWizard();
            };
            
            // Wizard schließen
            document.getElementById('receipt-wizard-modal').classList.add('hidden');
            scanMode = 'stock-in';
            
            // Flag setzen dass wir im Wizard-Modus sind
            window.wizardItemToAssign = currentItem;
            window.isWizardScanMode = true;
            
            showToast(`Scanne: ${currentItem.original_name}`, 'info');
            openScanner(true);
        }
        
        function receiptWizardManual() {
            const currentItem = receiptWizardItems[receiptWizardIndex];
            
            // WICHTIG: Alle States ZUERST zurücksetzen
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            window.receiptMhdIndex = null;
            receiptMhdIndex = null;
            
            // Alle potenziell offenen Modals schließen
            document.getElementById('mhd-modal').classList.add('hidden');
            document.getElementById('scanner-modal').classList.add('hidden');
            document.getElementById('external-scanner-modal').classList.add('hidden');
            
            // Scanner stoppen falls aktiv
            if (html5QrCode) { 
                html5QrCode.stop().catch(() => {}); 
                html5QrCode = null; 
            }
            
            // Callback für manuelle Produktanlage
            window.receiptWizardCallback = async (createdProduct) => {
                receiptImportedItems.push({
                    name: createdProduct.name || currentItem.original_name,
                    quantity: currentItem.quantity,
                    status: 'success',
                    via: 'manual'
                });
                
                receiptWizardIndex++;
                document.getElementById('receipt-wizard-modal').classList.remove('hidden');
                updateReceiptWizard();
            };
            
            // Flag setzen
            window.wizardItemToAssign = currentItem;
            window.isWizardManualMode = true;
            window.isWizardScanMode = false;
            
            // Wizard schließen
            document.getElementById('receipt-wizard-modal').classList.add('hidden');
            scanMode = 'stock-in';
            
            // Name vorausfüllen und Modal öffnen
            document.getElementById('form-name').value = currentItem.original_name;
            document.getElementById('form-brand').value = '';
            document.getElementById('form-not-food').checked = false;
            document.getElementById('manual-modal').classList.remove('hidden');
            lucide.createIcons();
            
            showToast(`Lege an: ${currentItem.original_name}`, 'info');
        }
        
        // ============ RECEIPT SUMMARY ============
        
        function showReceiptSummary() {
            closeReceiptScanner();
            closeReceiptWizard();
            
            document.getElementById('receipt-summary-modal').classList.remove('hidden');
            
            // Statistiken
            document.getElementById('receipt-summary-imported-count').textContent = receiptImportedItems.length;
            document.getElementById('receipt-summary-skipped-count').textContent = receiptSkippedItems.length;
            
            // Eingebuchte Liste
            const importedList = document.getElementById('receipt-summary-imported-list');
            if (receiptImportedItems.length > 0) {
                importedList.innerHTML = receiptImportedItems.map(item => `
                    <div class="px-4 py-3 flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="check" class="w-4 h-4 text-green-600"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-slate-800 truncate">${item.name}</p>
                            <p class="text-xs text-slate-500">${item.quantity}x ${item.via ? '• ' + (item.via === 'scan' ? 'Gescannt' : 'Manuell') : ''}</p>
                        </div>
                    </div>
                `).join('');
            } else {
                importedList.innerHTML = '<p class="px-4 py-3 text-slate-400 text-sm">Keine Artikel eingebucht</p>';
            }
            
            // Übersprungene Liste
            const skippedSection = document.getElementById('receipt-summary-skipped-section');
            const skippedList = document.getElementById('receipt-summary-skipped-list');
            
            if (receiptSkippedItems.length > 0) {
                skippedSection.classList.remove('hidden');
                skippedList.innerHTML = receiptSkippedItems.map(item => `
                    <div class="px-4 py-3 flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0">
                            <i data-lucide="alert-circle" class="w-4 h-4 text-amber-600"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-slate-800 truncate">${item.name}</p>
                            <p class="text-xs text-slate-500">${item.quantity}x • ${item.reason}</p>
                        </div>
                    </div>
                `).join('');
            } else {
                skippedSection.classList.add('hidden');
            }
            
            lucide.createIcons();
            
            // Produkte neu laden
            loadProducts();
        }
        
        function receiptSummaryClose() {
            document.getElementById('receipt-summary-modal').classList.add('hidden');
            
            // Alle Receipt-States zurücksetzen
            receiptData = null;
            receiptWizardItems = [];
            receiptWizardIndex = 0;
            receiptImportedItems = [];
            receiptSkippedItems = [];
            receiptEditingIndex = null;
            
            // MHD-States zurücksetzen
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            window.receiptMhdIndex = null;
            
            // Wizard-States zurücksetzen
            window.isWizardScanMode = false;
            window.isWizardManualMode = false;
            window.wizardItemToAssign = null;
            window.receiptWizardCallback = null;
            
            // MHD-Modal schließen falls offen
            document.getElementById('mhd-modal').classList.add('hidden');
        }
        
        // ============ END KASSENBON SCANNER ============
        
        // ============ API STATUS CHECK ============
        
        const API_ENDPOINTS = [
            { name: 'Open Food Facts', url: 'https://world.openfoodfacts.org/api/v0/product/737628064502.json', key: 'openfoodfacts' },
            { name: 'Open Beauty Facts', url: 'https://world.openbeautyfacts.org/api/v0/product/3600523395033.json', key: 'openbeautyfacts' },
            { name: 'Open Products Facts', url: 'https://world.openproductsfacts.org/api/v0/product/7613035799035.json', key: 'openproductsfacts' },
            { name: 'Open Pet Food Facts', url: 'https://world.openpetfoodfacts.org/api/v0/product/4015598005906.json', key: 'openpetfoodfacts' },
            { name: 'OpenAI (Emergent)', url: 'https://integrations.emergentagent.com/health', key: 'openai' }
        ];
        
        async function checkApiStatus(silent = false) {
            const now = Date.now();
            
            // Nicht öfter als alle 30 Sekunden checken (außer bei manuellem Aufruf)
            if (!silent && now - apiStatus.lastCheck < 30000) {
                renderApiStatus();
                return;
            }
            
            // Icon animieren
            const icon = document.getElementById('api-check-icon');
            if (icon) icon.classList.add('animate-spin');
            
            const results = {};
            let allOnline = true;
            
            // Parallele Prüfung mit kurzem Timeout (2 Sekunden)
            const checks = API_ENDPOINTS.map(async (api) => {
                const controller = new AbortController();
                const timeout = setTimeout(() => controller.abort(), 2000);
                
                try {
                    const res = await fetch(api.url, { 
                        method: 'HEAD', 
                        mode: 'no-cors',
                        signal: controller.signal 
                    });
                    clearTimeout(timeout);
                    results[api.key] = { name: api.name, online: true };
                } catch (e) {
                    clearTimeout(timeout);
                    results[api.key] = { name: api.name, online: false };
                    allOnline = false;
                }
            });
            
            await Promise.all(checks);
            
            apiStatus = {
                online: allOnline,
                lastCheck: now,
                apis: results
            };
            
            // Icon stoppen
            if (icon) icon.classList.remove('animate-spin');
            
            // UI aktualisieren
            updateApiWarningUI();
            renderApiStatus();
            
            console.log('API Status:', apiStatus);
        }
        
        function updateApiWarningUI() {
            const warningBtn = document.getElementById('api-warning-btn');
            const loginWarning = document.getElementById('login-api-warning');
            
            if (!apiStatus.online) {
                // Warnung anzeigen
                if (warningBtn) warningBtn.classList.remove('hidden');
                if (loginWarning) loginWarning.classList.remove('hidden');
            } else {
                // Warnung ausblenden
                if (warningBtn) warningBtn.classList.add('hidden');
                if (loginWarning) loginWarning.classList.add('hidden');
            }
            
            lucide.createIcons();
        }
        
        function renderApiStatus() {
            const container = document.getElementById('api-status-list');
            const timeEl = document.getElementById('api-status-time');
            
            if (!container) return;
            
            const apis = apiStatus.apis;
            const keys = Object.keys(apis);
            
            if (keys.length === 0) {
                container.innerHTML = '<p class="text-sm text-slate-400 text-center py-2">Noch nicht geprüft</p>';
                return;
            }
            
            let html = '';
            let onlineCount = 0;
            
            keys.forEach(key => {
                const api = apis[key];
                if (api.online) onlineCount++;
                
                const statusColor = api.online ? 'bg-green-500' : 'bg-red-500';
                const statusText = api.online ? 'Online' : 'Offline';
                const statusTextColor = api.online ? 'text-green-600' : 'text-red-600';
                
                html += `
                    <div class="flex items-center justify-between py-2 px-3 bg-slate-50 rounded-lg">
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 rounded-full ${statusColor}"></div>
                            <span class="text-sm text-slate-700">${api.name}</span>
                        </div>
                        <span class="text-xs font-medium ${statusTextColor}">${statusText}</span>
                    </div>
                `;
            });
            
            // Summary
            const summaryColor = onlineCount === keys.length ? 'text-green-600 bg-green-50' : 'text-amber-600 bg-amber-50';
            html = `
                <div class="flex items-center justify-between py-2 px-3 rounded-lg ${summaryColor} mb-2">
                    <span class="text-sm font-semibold">Gesamt</span>
                    <span class="text-sm font-bold">${onlineCount} / ${keys.length} online</span>
                </div>
            ` + html;
            
            container.innerHTML = html;
            
            // Zeit aktualisieren
            if (timeEl && apiStatus.lastCheck > 0) {
                const checkTime = new Date(apiStatus.lastCheck);
                timeEl.textContent = `Letzter Check: ${checkTime.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit', second: '2-digit'})}`;
            }
        }
        
        // ============ END API STATUS CHECK ============
        
        async function onScanSuccess(barcode) {
            closeScanner();
            closeExternalScanner(); // Auch externen Scanner schließen falls offen
            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;
            pendingExpiry = null;
            
            // Menge: Wizard-Menge verwenden wenn vorhanden, sonst 1
            if (data._wizardQuantity && data._wizardQuantity > 0) {
                pendingQty = data._wizardQuantity;
            } else if (window.wizardItemToAssign && window.wizardItemToAssign.quantity > 0) {
                pendingQty = window.wizardItemToAssign.quantity;
            } else {
                pendingQty = 1;
            }
            
            const img = data.custom_image || data.image_url || PLACEHOLDER;
            const hasBarcode = data.barcode && data.barcode.length > 0;
            
            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>
                
                <!-- MHD Button -->
                <div class="mb-4">
                    <button type="button" onclick="openMhdModal()" class="w-full p-4 bg-amber-50 border border-amber-200 rounded-xl flex items-center justify-between hover:bg-amber-100 transition-colors" id="mhd-main-button">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center" id="mhd-button-icon">
                                <i data-lucide="calendar-clock" class="w-5 h-5 text-amber-600"></i>
                            </div>
                            <div class="text-left">
                                <p class="text-sm font-semibold text-amber-800">📅 MHD</p>
                                <p id="mhd-button-text" class="text-xs text-amber-600">Nicht gesetzt</p>
                            </div>
                        </div>
                        <i data-lucide="chevron-right" class="w-5 h-5 text-amber-400"></i>
                    </button>
                </div>
                
                <!-- Anzahl (ohne Überschrift) -->
                <div class="flex items-center justify-center gap-4 mb-4">
                    <button type="button" onclick="adjQty(-1)" class="w-12 h-12 rounded-xl bg-slate-100 border border-slate-200 text-slate-600 flex items-center justify-center text-2xl font-bold hover:bg-slate-200">−</button>
                    <input type="number" id="add-qty" value="${pendingQty}" min="1" class="w-20 text-center text-2xl font-bold bg-white border-2 border-slate-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 hover:bg-indigo-700">+</button>
                </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();
            
            // Bei lokalen Artikeln ohne Barcode: Automatisch KI-MHD prüfen
            if (!hasBarcode && data.name) {
                autoCheckProduceMhd(data.name);
            }
        }
        
        // Automatische MHD-Prüfung für Obst/Gemüse bei lokalen Artikeln
        async function autoCheckProduceMhd(productName) {
            const btn = document.getElementById('mhd-main-button');
            const btnText = document.getElementById('mhd-button-text');
            const btnIcon = document.getElementById('mhd-button-icon');
            
            if (!btn || !btnText) return;
            
            // UI: Loading
            btnText.innerHTML = '<span class="animate-pulse">🤖 Prüfe...</span>';
            if (btnIcon) btnIcon.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 text-purple-600 animate-spin"></i>';
            lucide.createIcons();
            
            try {
                const res = await fetch(`${API_URL}?action=suggest-mhd`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ product_name: productName })
                });
                
                const data = await res.json();
                
                // Debug-Info anzeigen wenn vorhanden
                if (data._debug) {
                    console.log('🐛 DEBUG Auto-MHD:', data._debug);
                    showDebugPanel(data._debug);
                }
                
                if (data.success && data.is_produce && data.expiry_date) {
                    // Es ist Obst/Gemüse - MHD automatisch setzen!
                    pendingExpiry = data.expiry_date;
                    const formatted = formatDate(data.expiry_date);
                    const categoryIcon = data.category === 'OBST' ? '🍎' : '🥬';
                    
                    btnText.innerHTML = `<span class="text-green-600 font-semibold">${formatted}</span> <span class="text-slate-400">(${categoryIcon} +${data.days_until}T)</span>`;
                    if (btnIcon) btnIcon.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>';
                    btn.classList.remove('bg-amber-50', 'border-amber-200');
                    btn.classList.add('bg-green-50', 'border-green-200');
                    
                    showToast(`${categoryIcon} MHD: ${formatted} (+${data.days_until} Tage)`, 'success');
                } else {
                    // Kein Obst/Gemüse - Nutzer muss manuell eingeben
                    btnText.textContent = 'Tippen für MHD-Vorschlag';
                    if (btnIcon) btnIcon.innerHTML = '<i data-lucide="calendar-clock" class="w-5 h-5 text-amber-600"></i>';
                }
            } catch (e) {
                console.error('Auto MHD check error:', e);
                btnText.textContent = 'Nicht gesetzt';
                if (btnIcon) btnIcon.innerHTML = '<i data-lucide="calendar-clock" class="w-5 h-5 text-amber-600"></i>';
            }
            
            lucide.createIcons();
        }
        
        function closeAddModal() { 
            document.getElementById('add-modal').classList.add('hidden');
            
            // Wenn wir im Wizard-Modus waren und das Modal abgebrochen wird, zurück zum Wizard
            if ((window.isWizardScanMode || window.isWizardManualMode) && window.receiptWizardCallback) {
                window.isWizardScanMode = false;
                window.isWizardManualMode = false;
                window.wizardItemToAssign = null;
                window.receiptWizardCallback = null;
                // Zurück zum Wizard
                document.getElementById('receipt-wizard-modal').classList.remove('hidden');
                updateReceiptWizard();
            }
        }
        
        function adjQty(d) {
            pendingQty = Math.max(1, pendingQty + d);
            document.getElementById('add-qty').value = pendingQty;
        }
        
        // ============ MHD MODAL FUNKTIONEN ============
        
        let mhdSelectedDate = null;
        let mhdSource = null; // 'ai', 'ocr', 'manual', 'quick'
        
        function openMhdModal() {
            // Im Receipt-Modus: mhdSelectedDate aus window übernehmen
            if (window.receiptMhdMode && window.mhdSelectedDateReceipt !== undefined) {
                mhdSelectedDate = window.mhdSelectedDateReceipt;
            } else {
                mhdSelectedDate = pendingExpiry;
            }
            mhdSource = null;
            
            // Produktname im Modal anzeigen
            let productName = '';
            if (window.receiptMhdMode && window.receiptMhdProductName) {
                productName = window.receiptMhdProductName;
            } else {
                const nameInput = document.getElementById('add-name');
                productName = nameInput ? nameInput.value.trim() : pendingProduct?.name || '';
            }
            document.getElementById('mhd-modal-product').textContent = productName;
            
            // Reset Display
            updateMhdDisplay();
            document.getElementById('mhd-adjust-buttons').classList.add('hidden');
            
            document.getElementById('mhd-modal').classList.remove('hidden');
            lucide.createIcons();
            
            // KI automatisch starten wenn KEIN Barcode vorhanden (nicht im Receipt-Modus, dort wird es separat gesteuert)
            if (!window.receiptMhdMode) {
                const hasBarcode = pendingProduct?.barcode && pendingProduct.barcode.length > 0;
                if (!hasBarcode && productName) {
                    setTimeout(() => mhdAiSuggest(), 300);
                }
            }
        }
        
        function closeMhdModal() {
            document.getElementById('mhd-modal').classList.add('hidden');
            // Receipt-MHD-Modus zurücksetzen wenn Modal geschlossen wird
            window.receiptMhdMode = false;
            window.receiptMhdProductName = null;
            window.receiptMhdIndex = null;
        }
        
        function updateMhdDisplay() {
            const display = document.getElementById('mhd-result-display');
            const adjustBtns = document.getElementById('mhd-adjust-buttons');
            
            if (mhdSelectedDate) {
                const formatted = formatDate(mhdSelectedDate);
                const today = new Date();
                today.setHours(0,0,0,0);
                const expDate = new Date(mhdSelectedDate);
                const diffDays = Math.ceil((expDate - today) / (1000 * 60 * 60 * 24));
                
                let sourceText = '';
                if (mhdSource === 'ai') sourceText = '🤖 KI-Vorschlag';
                else if (mhdSource === 'ocr') sourceText = '📷 OCR-Erkennung';
                else if (mhdSource === 'manual') sourceText = '📅 Manuell';
                else if (mhdSource === 'quick') sourceText = '⚡ Schnellwahl';
                
                display.innerHTML = `
                    <div class="text-2xl font-bold text-green-600 mb-1">${formatted}</div>
                    <p class="text-xs text-slate-500">${sourceText} • +${diffDays} Tage</p>
                `;
                adjustBtns.classList.remove('hidden');
            } else {
                display.innerHTML = '<span class="text-slate-400">Noch nicht gewählt</span>';
                adjustBtns.classList.add('hidden');
            }
        }
        
        function updateMhdButtonText() {
            const btn = document.getElementById('mhd-button-text');
            const btnMain = document.getElementById('mhd-main-button');
            const btnIcon = document.getElementById('mhd-button-icon');
            
            if (btn) {
                if (pendingExpiry) {
                    const formatted = formatDate(pendingExpiry);
                    const today = new Date();
                    today.setHours(0,0,0,0);
                    const expDate = new Date(pendingExpiry);
                    const diffDays = Math.ceil((expDate - today) / (1000 * 60 * 60 * 24));
                    
                    btn.innerHTML = `<span class="text-green-600 font-semibold">${formatted}</span> <span class="text-slate-400">(+${diffDays}T)</span>`;
                    
                    if (btnMain) {
                        btnMain.classList.remove('bg-amber-50', 'border-amber-200');
                        btnMain.classList.add('bg-green-50', 'border-green-200');
                    }
                    if (btnIcon) {
                        btnIcon.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>';
                    }
                } else {
                    btn.textContent = 'Nicht gesetzt';
                    btn.classList.remove('text-green-600', 'font-semibold');
                    btn.classList.add('text-amber-600');
                    
                    if (btnMain) {
                        btnMain.classList.remove('bg-green-50', 'border-green-200');
                        btnMain.classList.add('bg-amber-50', 'border-amber-200');
                    }
                    if (btnIcon) {
                        btnIcon.innerHTML = '<i data-lucide="calendar-clock" class="w-5 h-5 text-amber-600"></i>';
                    }
                }
                lucide.createIcons();
            }
        }
        
        // Flag um zu wissen, dass OCR vom MHD-Modal gestartet wurde
        let mhdOcrInProgress = false;
        
        function mhdOpenOcr() {
            // Merken dass OCR vom MHD aus gestartet wurde
            mhdOcrInProgress = true;
            // MHD-Modal nur visuell verstecken, nicht den State zurücksetzen
            document.getElementById('mhd-modal').classList.add('hidden');
            openOcrCamera();
        }
        
        function mhdOpenDatepicker() {
            document.getElementById('mhd-date-picker').showPicker();
        }
        
        function mhdOnDatePicked(val) {
            if (val) {
                mhdSelectedDate = val;
                mhdSource = 'manual';
                updateMhdDisplay();
            }
        }
        
        function mhdSetDays(days) {
            const date = new Date();
            date.setDate(date.getDate() + days);
            mhdSelectedDate = date.toISOString().split('T')[0];
            mhdSource = 'quick';
            updateMhdDisplay();
        }
        
        function mhdAdjust(days) {
            if (!mhdSelectedDate) return;
            const date = new Date(mhdSelectedDate);
            date.setDate(date.getDate() + days);
            mhdSelectedDate = date.toISOString().split('T')[0];
            updateMhdDisplay();
        }
        
        function mhdConfirm() {
            // Prüfe ob wir im Receipt-Modus sind
            if (window.receiptMhdMode && typeof handleReceiptMhdConfirm === 'function') {
                const handled = handleReceiptMhdConfirm(mhdSelectedDate);
                if (handled) {
                    closeMhdModal();
                    if (mhdSelectedDate) {
                        showToast(`MHD: ${formatDate(mhdSelectedDate)}`, 'success');
                    }
                    return;
                }
            }
            
            // Normaler Modus
            pendingExpiry = mhdSelectedDate;
            updateMhdButtonText();
            closeMhdModal();
            if (pendingExpiry) {
                showToast(`MHD: ${formatDate(pendingExpiry)}`, 'success');
            }
        }
        
        function mhdSkip() {
            // Prüfe ob wir im Receipt-Modus sind
            if (window.receiptMhdMode && typeof handleReceiptMhdConfirm === 'function') {
                handleReceiptMhdConfirm(null);
                closeMhdModal();
                return;
            }
            
            pendingExpiry = null;
            mhdSelectedDate = null;
            updateMhdButtonText();
            closeMhdModal();
        }
        
        // KI-MHD-Vorschlag im Modal (funktioniert für alle Kategorien)
        async function mhdAiSuggest() {
            // Im Receipt-Modus den Produktnamen aus der globalen Variable holen
            let name = '';
            if (window.receiptMhdMode && window.receiptMhdProductName) {
                name = window.receiptMhdProductName;
            } else {
                const nameInput = document.getElementById('add-name');
                name = nameInput ? nameInput.value.trim() : pendingProduct?.name || '';
            }
            
            if (!name) {
                showToast('Produktname erforderlich', 'error');
                return;
            }
            
            const btn = document.getElementById('mhd-ai-btn');
            const icon = document.getElementById('mhd-ai-icon');
            const display = document.getElementById('mhd-result-display');
            
            // Loading UI
            if (btn) btn.classList.add('opacity-50', 'pointer-events-none');
            if (icon) icon.classList.add('animate-spin');
            display.innerHTML = '<span class="text-purple-600 animate-pulse">🤖 Analysiere...</span>';
            
            try {
                const res = await fetch(`${API_URL}?action=suggest-mhd`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ product_name: name, force: true })
                });
                
                const data = await res.json();
                
                // Debug-Info anzeigen wenn vorhanden
                if (data._debug) {
                    console.log('🐛 DEBUG MHD:', data._debug);
                    showDebugPanel(data._debug);
                }
                
                if (data.success && data.expiry_date) {
                    // MHD vorschlagen (für alle Kategorien)
                    mhdSelectedDate = data.expiry_date;
                    mhdSource = 'ai';
                    
                    // Kategorie-Icon
                    const catIcons = {
                        'OBST': '🍎', 'GEMUESE': '🥬', 'MILCH': '🥛', 'FLEISCH': '🥩',
                        'BACKWAREN': '🍞', 'KONSERVE': '🥫', 'TROCKEN': '🍝', 
                        'GETRAENK': '🥤', 'SONSTIGES': '📦'
                    };
                    const catIcon = catIcons[data.category] || '📦';
                    
                    updateMhdDisplay();
                    showToast(`${catIcon} ${data.category}: +${data.days_until} Tage`, 'success');
                } else {
                    // API-Fehler
                    let errorMsg = data.error || data.message || 'Unbekannter Fehler';
                    if (data.detail) {
                        errorMsg += ` (${typeof data.detail === 'string' ? data.detail : JSON.stringify(data.detail)})`;
                    }
                    throw new Error(errorMsg);
                }
            } catch (e) {
                console.error('AI MHD error:', e);
                display.innerHTML = `
                    <div class="text-center">
                        <span class="text-red-500 text-sm block mb-2">⚠️ ${e.message}</span>
                        <button onclick="showLastDebugLog()" class="text-xs text-blue-600 underline">Debug-Log anzeigen</button>
                    </div>
                `;
                showToast('KI-Fehler', 'error');
            } finally {
                if (btn) btn.classList.remove('opacity-50', 'pointer-events-none');
                if (icon) icon.classList.remove('animate-spin');
                lucide.createIcons();
            }
        }
        
        // Debug-Panel anzeigen
        let lastDebugLog = null;
        
        function showDebugPanel(debugData) {
            lastDebugLog = debugData;
            console.log('Debug-Log gespeichert für spätere Anzeige');
        }
        
        function showLastDebugLog() {
            if (!lastDebugLog) {
                showToast('Kein Debug-Log verfügbar', 'info');
                return;
            }
            
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 z-[100] bg-black/50 flex items-center justify-center p-4';
            modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
            
            const content = document.createElement('div');
            content.className = 'bg-white rounded-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden';
            content.innerHTML = `
                <div class="p-4 bg-slate-800 text-white flex justify-between items-center">
                    <h3 class="font-bold">🐛 Debug-Log</h3>
                    <div class="text-xs">
                        <span class="bg-green-500 px-2 py-1 rounded mr-2">${lastDebugLog.execution_time}</span>
                        <span class="bg-blue-500 px-2 py-1 rounded">${lastDebugLog.memory_usage}</span>
                    </div>
                </div>
                <div class="p-4 overflow-y-auto max-h-[60vh]">
                    <pre class="text-xs bg-slate-50 p-4 rounded-lg overflow-x-auto whitespace-pre-wrap">${JSON.stringify(lastDebugLog.log, null, 2)}</pre>
                </div>
                <div class="p-4 bg-slate-50 border-t">
                    <button onclick="this.closest('.fixed').remove()" class="w-full py-2 bg-slate-800 text-white rounded-xl font-medium">Schließen</button>
                </div>
            `;
            
            modal.appendChild(content);
            document.body.appendChild(modal);
        }
        
        // Alte Funktionen für Kompatibilität (OCR callback)
        function onDatePicked(val) {
            if (val) {
                mhdSelectedDate = val;
                mhdSource = 'ocr';
                pendingExpiry = val;
                updateMhdButtonText();
                updateMhdDisplay();
            }
        }
        
        // ============ END MHD MODAL ============
        
        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
                        })
                    });
                    
                    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');
                
                // WICHTIG: Wizard-Callback ZUERST prüfen, bevor closeAddModal() ihn löscht
                const hasWizardCallback = !!window.receiptWizardCallback;
                const wizardCallback = window.receiptWizardCallback;
                
                // Modal schließen (setzt Callback auf null wenn abgebrochen)
                // Aber wir haben ihn schon gespeichert!
                document.getElementById('add-modal').classList.add('hidden');
                
                // 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();
                }
                
                // Wizard-Callback aufrufen falls vorhanden
                if (hasWizardCallback && wizardCallback) {
                    window.receiptWizardCallback = null;
                    window.isWizardScanMode = false;
                    window.isWizardManualMode = false;
                    window.wizardItemToAssign = null;
                    wizardCallback({ name, productId });
                    return; // Nicht zum Scanner zurückkehren
                }
                
                // 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 || [];
            
            // Gesamtmenge aus Inventory berechnen
            const totalQty = inv.reduce((sum, i) => sum + (i.quantity || 0), 0);
            
            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: ${totalQty}x</p>
                    </div>
                </div>
            `;
            
            if (inv.length === 0) {
                html += '<p class="text-center text-slate-400 py-8">Kein Bestand</p>';
            } else {
                html += '<div class="space-y-2">';
                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();
                    const maxQty = i.quantity;
                    html += `
                        <div class="p-3 rounded-xl border ${expired ? 'bg-red-50 border-red-200' : 'bg-white border-slate-200'}">
                            <div class="flex items-center justify-between gap-2">
                                <!-- MHD & Verfügbar -->
                                <div class="flex-shrink-0 min-w-0">
                                    <p class="font-semibold text-sm ${expired ? 'text-red-600' : 'text-slate-900'} truncate">${exp}</p>
                                    <p class="text-xs text-slate-400">${maxQty}x da</p>
                                </div>
                                <!-- Mengen-Stepper -->
                                <div class="flex items-center gap-1">
                                    <button onclick="adjustConsumeQty('${i.id}', -1, ${maxQty})" class="w-7 h-7 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 hover:bg-slate-200 active:scale-95">
                                        <i data-lucide="minus" class="w-3.5 h-3.5"></i>
                                    </button>
                                    <input type="number" id="consume-qty-${i.id}" value="1" min="1" max="${maxQty}" class="w-10 text-center text-base font-bold border border-slate-200 rounded-lg py-1 focus:outline-none focus:border-red-400">
                                    <button onclick="adjustConsumeQty('${i.id}', 1, ${maxQty})" class="w-7 h-7 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 hover:bg-slate-200 active:scale-95">
                                        <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                                    </button>
                                </div>
                                <!-- Verbrauchen Button -->
                                <button onclick="consumeItemWithQty('${i.id}','${data.name}', ${maxQty})" class="w-10 h-10 rounded-full ${expired ? 'bg-red-500 hover:bg-red-600' : 'bg-red-500 hover:bg-red-600'} flex items-center justify-center active:scale-95 flex-shrink-0" title="Verbrauchen">
                                    <i data-lucide="minus" class="w-5 h-5 text-white"></i>
                                </button>
                            </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'); }
        
        // Menge im Consume-Modal anpassen
        function adjustConsumeQty(invId, delta, maxQty) {
            const input = document.getElementById(`consume-qty-${invId}`);
            if (!input) return;
            let val = parseInt(input.value) || 1;
            val = Math.max(1, Math.min(maxQty, val + delta));
            input.value = val;
        }
        
        // Consume mit eingestellter Menge
        async function consumeItemWithQty(invId, name, maxQty) {
            const input = document.getElementById(`consume-qty-${invId}`);
            let qty = parseInt(input?.value) || 1;
            qty = Math.max(1, Math.min(maxQty, qty));
            
            showToast('Verbrauche...', 'loading');
            try {
                await fetch(`${API_URL}?action=inventory&id=${invId}&quantity=${qty}`, { method: 'DELETE' });
                hideToast();
                showToast(`${qty}x ${name} verbraucht`, 'success');
                closeConsumeModal();
                loadProducts();
                // Scanner öffnen wenn über Scanner-Button aufgerufen
                if (openedFromScanner) {
                    setTimeout(() => openScanner(true), 1200);
                }
            } catch (e) {
                hideToast();
                showToast('Fehler', 'error');
            }
        }
        
        // ============ OCR FUNKTIONEN - NUR MITTLERER AUSSCHNITT ============
        let ocrFacingMode = 'user'; // Standard: Frontkamera für OCR
        
        async function openOcrCamera() {
            ocrFacingMode = 'user'; // Frontkamera als Standard
            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);
            
            // Original für KI (ohne Binarisierung)
            const originalImage = canvas.toDataURL('image/png');
            
            // BILDVERARBEITUNG: Kontrast erhöhen und in Graustufen (für Tesseract-Fallback)
            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}`);
                
                // ============ ZUERST KI-ERKENNUNG VERSUCHEN ============
                let aiDate = null;
                let aiError = null;
                
                try {
                    document.getElementById('ocr-progress').textContent = 'KI-Analyse...';
                    
                    const aiResponse = await fetch(`${API_URL}?action=ocr-ai`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ image: originalImage })
                    });
                    
                    const aiData = await aiResponse.json();
                    
                    if (aiData.success && aiData.expiry_date) {
                        aiDate = aiData.expiry_date;
                        console.log('KI-Datum gefunden:', aiDate);
                    } else {
                        aiError = aiData.error || 'Kein Datum erkannt';
                        console.log('KI konnte kein Datum finden:', aiError);
                    }
                } catch (e) {
                    aiError = e.message;
                    console.log('KI-OCR nicht verfügbar:', e.message);
                }
                
                // ============ FALLBACK AUF TESSERACT-OCR ============
                let tesseractDate = null;
                let tesseractText = '';
                
                if (!aiDate) {
                    document.getElementById('ocr-progress').textContent = 'Tesseract-OCR...';
                    
                    // Worker mit Konfiguration erstellen
                    const worker = await Tesseract.createWorker('eng', 1, {
                        logger: m => {
                            if (m.status === 'recognizing text') {
                                document.getElementById('ocr-progress').textContent = 'OCR: ' + 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();
                    
                    tesseractText = result.data.text.trim();
                    console.log('OCR Raw:', tesseractText);
                    
                    // Datum extrahieren
                    tesseractDate = findDateInText(tesseractText);
                }
                
                document.getElementById('ocr-processing').classList.add('hidden');
                
                // ============ ERGEBNIS ANZEIGEN ============
                const finalDate = aiDate || tesseractDate;
                const detectionMethod = aiDate ? 'ki' : 'tesseract';
                
                // Debug-Modus prüfen
                const debugMode = localStorage.getItem('debug_mode') === '1';
                
                if (debugMode) {
                    // Debug anzeigen mit Info zur Erkennungsmethode
                    showOcrDebug(processedImage, aiDate ? `[KI] ${aiDate}` : tesseractText, finalDate, detectionMethod);
                } else {
                    // Datum setzen
                    if (finalDate) {
                        pendingExpiry = finalDate;
                        mhdSelectedDate = finalDate;
                        mhdSource = 'ocr';
                        showToast(`MHD erkannt: ${formatDate(finalDate)}`, 'success');
                    } else {
                        showToast('Kein Datum erkannt - bitte manuell wählen', 'warning');
                    }
                    // MHD-Modal wieder öffnen und Display aktualisieren
                    returnToMhdModal();
                }
                
            } 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, method = 'tesseract') {
            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)';
            
            // Erkennungsmethode anzeigen
            const methodLabel = method === 'ki' ? '✨ KI-Erkennung' : '📝 Tesseract-OCR';
            const methodClass = method === 'ki' ? 'text-purple-400' : 'text-blue-400';
            document.getElementById('ocr-debug-numbers').innerHTML = `<span class="${methodClass}">${methodLabel}</span>`;
            
            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');
        }
        
        // Zentrale Funktion um nach OCR zum MHD-Modal zurückzukehren
        function returnToMhdModal() {
            mhdOcrInProgress = false;
            // MHD-Modal anzeigen und Display aktualisieren
            document.getElementById('mhd-modal').classList.remove('hidden');
            updateMhdDisplay();
            lucide.createIcons();
        }
        
        function useDebugDate() {
            if (debugFoundDate) {
                pendingExpiry = debugFoundDate;
                mhdSelectedDate = debugFoundDate;
                mhdSource = 'ocr';
                showToast('Datum übernommen: ' + formatDate(debugFoundDate), 'success');
            } else {
                showToast('Kein Datum vorhanden', 'error');
            }
            closeOcrDebug();
            // Zurück zum MHD-Modal
            returnToMhdModal();
        }
        
        // 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;
            }
            
            const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
            pendingExpiry = dateStr;
            mhdSelectedDate = dateStr;
            mhdSource = 'manual';
            showToast('Datum gesetzt', 'success');
            closeManualDateModal();
            // Zurück zum MHD-Modal
            returnToMhdModal();
        }
        
        // ============ 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 -->
                    <div class="md:hidden relative h-52 bg-gradient-to-br from-slate-100 to-slate-200">
                        <img src="${img}" class="w-full h-full object-contain p-4" onerror="this.src='${PLACEHOLDER}'">
                        <div class="absolute top-0 left-0 right-0 p-4 flex justify-between items-start">
                            <button onclick="closeDetailModal()" class="w-10 h-10 rounded-full bg-black/40 backdrop-blur flex items-center justify-center text-white">
                                <i data-lucide="arrow-left" class="w-5 h-5"></i>
                            </button>
                            ${p.barcode ? `<a href="https://de.openfoodfacts.org/produkt/${p.barcode}" target="_blank" class="px-3 py-1.5 rounded-full bg-black/40 backdrop-blur text-white text-xs font-medium flex items-center gap-1">
                                <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>` : ''}
                                
                                <!-- 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) {
            openedFromScanner = false; // Aus Artikel-Detail, nicht Scanner
            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'); }
        }
        
        // 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');
            
            // Wenn wir im Wizard-Modus waren, zurück zum Wizard
            if (window.isWizardManualMode && window.wizardItemToAssign) {
                window.isWizardManualMode = false;
                window.wizardItemToAssign = null;
                window.receiptWizardCallback = null;
                // Zurück zum Wizard
                document.getElementById('receipt-wizard-modal').classList.remove('hidden');
                updateReceiptWizard();
            }
        }
        
        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;
            
            // WICHTIG: Wizard-States ZUERST speichern, bevor closeManualModal() sie löscht
            const wasWizardMode = window.isWizardManualMode;
            const wizardItem = window.wizardItemToAssign;
            const wizardCallback = window.receiptWizardCallback;
            
            // Modal schließen (nur verstecken, States nicht löschen wenn im Wizard-Modus)
            document.getElementById('manual-modal').classList.add('hidden');
            
            // Prüfen ob wir im Wizard-Modus waren
            if (wasWizardMode && wizardItem) {
                // Wizard-States zurücksetzen
                window.isWizardManualMode = false;
                window.wizardItemToAssign = null;
                // Callback BEHALTEN für saveProduct()!
                
                // Produkt erstellen und einbuchen mit Wizard-Daten
                openedFromScanner = false;
                openAddModal({ 
                    isNew: true, 
                    name, 
                    brand, 
                    barcode: null, 
                    is_food: !isNotFood,
                    _wizardQuantity: wizardItem.quantity
                });
            } else {
                // Normaler Modus
                window.isWizardManualMode = false;
                window.wizardItemToAssign = null;
                window.receiptWizardCallback = null;
                
                openedFromScanner = false;
                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');
            
            // Kategorie-Gruppierung aus localStorage
            const groupByCategory = localStorage.getItem('shopping_group_by_category') === '1';
            
            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;
            }
            
            // Kategorie-Definitionen mit Priorität - höhere Priorität wird zuerst geprüft
            // Spezifische Kategorien (Fisch, Tiernahrung) haben höhere Priorität als allgemeine (Obst)
            const categories = {
                'tiernahrung': { 
                    name: 'Tiernahrung', 
                    icon: 'cat',
                    priority: 100,
                    keywords: ['katzenfutter', 'hundefutter', 'vogelfutter', 'fischfutter', 'tierfutter', 'whiskas', 'sheba', 'felix', 'kitekat', 'pedigree', 'cesar', 'frolic', 'chappi', 'leckerli', 'hundekuchen', 'katzenmilch', 'katzenstreu', 'hundesnack', 'kaninchenfutter', 'hamsterfutter', 'meerschweinchenfutter'] 
                },
                'baby': { 
                    name: 'Baby & Kind', 
                    icon: 'baby',
                    priority: 95,
                    keywords: ['babybrei', 'milchpulver', 'anfangsmilch', 'folgemilch', 'hipp', 'alete', 'bebivita', 'milupa', 'aptamil', 'schnuller', 'babyflasche', 'nuckel', 'babynahrung', 'babypflege', 'babylotion', 'babycreme', 'wundschutzcreme', 'babyöl', 'kindershampoo', 'säuglingsnahrung'] 
                },
                'fisch': { 
                    name: 'Fisch & Meeresfrüchte', 
                    icon: 'fish',
                    priority: 90,
                    keywords: ['fisch', 'lachs', 'lachsfilet', 'thunfisch', 'forelle', 'hering', 'heringsfilet', 'makrele', 'kabeljau', 'pangasius', 'garnele', 'shrimp', 'krabben', 'muschel', 'tintenfisch', 'calamari', 'räucherlachs', 'fischstäbchen', 'seelachs', 'scholle', 'zander', 'dorade', 'sardine', 'sardelle', 'aal', 'matjes', 'rollmops', 'bismarckhering', 'brathering', 'kieler sprotten', 'karpfen', 'heilbutt', 'rotbarsch', 'alaska seelachs', 'msc', 'seafood', 'meeresfrüchte', 'surimi'] 
                },
                'fleisch_wurst': { 
                    name: 'Fleisch & Wurst', 
                    icon: 'beef',
                    priority: 85,
                    keywords: ['fleisch', 'wurst', 'schinken', 'salami', 'hähnchen', 'huhn', 'pute', 'rind', 'schwein', 'hack', 'hackfleisch', 'steak', 'bratwurst', 'wiener', 'würstchen', 'leberwurst', 'mortadella', 'aufschnitt', 'bacon', 'speck', 'gulasch', 'schnitzel', 'filet', 'braten', 'lamm', 'ente', 'gans', 'truthahn', 'rouladen', 'frikadelle', 'bulette', 'mett', 'tatar', 'gyros', 'döner', 'kassler', 'eisbein', 'kotelett', 'geschnetzeltes'] 
                },
                'kaese_milch': { 
                    name: 'Käse & Milchprodukte', 
                    icon: 'milk',
                    priority: 80,
                    keywords: ['käse', 'joghurt', 'quark', 'butter', 'sahne', 'frischkäse', 'gouda', 'emmentaler', 'mozzarella', 'schmand', 'crème fraîche', 'creme fraiche', 'skyr', 'kefir', 'buttermilch', 'mascarpone', 'ricotta', 'parmesan', 'feta', 'halloumi', 'camembert', 'brie', 'edamer', 'tilsiter', 'bergkäse', 'ziegenkäse', 'hüttenkäse', 'cottage cheese', 'schlagsahne', 'kondensmilch', 'kaffeesahne', 'pudding', 'milchreis', 'vanillesauce', 'trinkjoghurt', 'fruchtquark', 'speisequark', 'körniger frischkäse', 'scheiblette', 'schmelzkäse', 'streichkäse', 'hirtenkäse', 'philadelphia', 'lätta', 'margarine', 'rama', 'becel', 'grieß'] 
                },
                'tiefkuehl': { 
                    name: 'Tiefkühl', 
                    icon: 'snowflake',
                    priority: 75,
                    keywords: ['tiefkühl', 'tiefkuehl', 'tk-', 'tk ', 'gefroren', 'frost', 'gefrier', 'tiefgekühlt', 'iglo', 'frosta', 'bofrost', 'eiswürfel', 'tiefkühlpizza', 'tiefkühlgemüse'] 
                },
                'hygiene': { 
                    name: 'Hygiene & Körperpflege', 
                    icon: 'sparkles',
                    priority: 70,
                    keywords: ['shampoo', 'seife', 'duschgel', 'deo', 'deodorant', 'zahnpasta', 'zahncreme', 'creme', 'lotion', 'bodylotion', 'pflege', 'hygiene', 'toilettenpapier', 'klopapier', 'taschentuch', 'tempo', 'rasierer', 'rasier', 'aftershave', 'parfum', 'parfüm', 'haargel', 'haarspray', 'haarkur', 'spülung', 'conditioner', 'badezusatz', 'schaumbad', 'badesalz', 'wattepads', 'wattestäbchen', 'q-tips', 'zahnseide', 'mundwasser', 'listerine', 'zahnbürste', 'nivea', 'dove', 'fa', 'axe', 'rexona', 'odol', 'elmex', 'sensodyne', 'oral-b', 'colgate', 'blend-a-med', 'head&shoulders', 'pantene', 'garnier', 'loreal', 'bebe', 'penaten', 'windel', 'pampers', 'feuchttücher', 'binden', 'tampons', 'slipeinlage', 'always', 'o.b.'] 
                },
                'haushalt': { 
                    name: 'Haushalt & Reinigung', 
                    icon: 'spray-can',
                    priority: 65,
                    keywords: ['waschmittel', 'persil', 'ariel', 'lenor', 'weichspüler', 'spülmittel', 'pril', 'fairy', 'geschirrspül', 'klarspüler', 'spülmaschinen', 'finish', 'somat', 'reiniger', 'putzmittel', 'müllbeutel', 'müllsack', 'schwamm', 'putz', 'clean', 'tabs', 'meister proper', 'ajax', 'glasreiniger', 'badreiniger', 'wc-reiniger', 'domestos', 'kloreiniger', 'entkalker', 'scheuermilch', 'allzweck', 'essigreiniger', 'backofenreiniger', 'küchentuch', 'küchenrolle', 'zewa', 'plenty', 'alufolie', 'frischhaltefolie', 'backpapier', 'gefrierbeutel', 'zipper', 'batterie', 'glühbirne', 'kerze', 'streichholz', 'feuerzeug', 'insektenspray', 'mottenschutz', 'lufterfrischer', 'duftkerze', 'raumspray'] 
                },
                'suessigkeiten': { 
                    name: 'Süßigkeiten & Snacks', 
                    icon: 'candy',
                    priority: 60,
                    keywords: ['schokolade', 'schoko', 'gummibärchen', 'haribo', 'bonbon', 'keks', 'cookie', 'chips', 'flips', 'cracker', 'salzstangen', 'popcorn', 'studentenfutter', 'riegel', 'mars', 'snickers', 'twix', 'bounty', 'kitkat', 'kinderriegel', 'milka', 'ritter sport', 'lindt', 'ferrero', 'kinder', 'duplo', 'hanuta', 'knoppers', 'leibniz', 'oreo', 'prinzenrolle', 'manner', 'loacker', 'praline', 'trüffel', 'marzipan', 'lakritze', 'tic tac', 'mentos', 'airwaves', 'kaugummi', 'lutscher', 'eiscreme', 'magnum', 'cornetto', 'solero'] 
                },
                'getraenke': { 
                    name: 'Getränke', 
                    icon: 'glass-water',
                    priority: 55,
                    keywords: ['wasser', 'mineralwasser', 'saft', 'orangensaft', 'apfelsaft', 'multivitamin', 'cola', 'fanta', 'sprite', 'pepsi', 'bier', 'wein', 'sekt', 'limo', 'limonade', 'tee', 'eistee', 'kaffee', 'espresso', 'energy', 'red bull', 'monster', 'sprudel', 'flasche', 'kasten', 'sixpack', 'smoothie', 'nektar', 'schorle', 'radler', 'alkoholfrei', 'iso', 'sirup', 'instant', 'kakao', 'trinkschokolade'] 
                },
                'brot_backwaren': { 
                    name: 'Brot & Backwaren', 
                    icon: 'croissant',
                    priority: 50,
                    keywords: ['brot', 'brötchen', 'toast', 'croissant', 'kuchen', 'torte', 'mehl', 'hefe', 'gebäck', 'baguette', 'ciabatta', 'vollkorn', 'roggen', 'dinkel', 'pumpernickel', 'knäckebrot', 'zwieback', 'laugen', 'brezel', 'semmel', 'weck', 'muffin', 'donut', 'berliner', 'krapfen', 'strudel', 'plunder', 'teilchen', 'waffel', 'pfannkuchen', 'crêpe', 'wrap', 'tortilla', 'pita', 'fladenbrot', 'naan', 'focaccia'] 
                },
                'konserven': { 
                    name: 'Konserven & Fertiggerichte', 
                    icon: 'package',
                    priority: 45,
                    keywords: ['konserve', 'fertig', 'instant', 'tüte', 'fix', 'maggi', 'knorr', 'miracoli', 'suppe', 'eintopf', 'ravioli', 'baked beans', 'oliven', 'gewürzgurken', 'cornichons', 'kapern', 'sauerkraut', 'rotkohl', 'essiggurken', 'dosenmais', 'dosenerbsen'] 
                },
                'grundnahrung': { 
                    name: 'Grundnahrungsmittel', 
                    icon: 'wheat',
                    priority: 40,
                    keywords: ['reis', 'nudel', 'pasta', 'spaghetti', 'penne', 'fusilli', 'makkaroni', 'lasagne', 'tortellini', 'ravioli', 'gnocchi', 'spätzle', 'kartoffelpüree', 'couscous', 'bulgur', 'quinoa', 'linsen', 'bohnen', 'kichererbsen', 'polenta', 'haferflocken', 'müsli', 'cornflakes', 'cerealien', 'frühstück', 'marmelade', 'konfitüre', 'honig', 'nutella', 'erdnussbutter', 'zucker', 'salz', 'pfeffer', 'gewürz', 'öl', 'olivenöl', 'sonnenblumenöl', 'essig', 'senf', 'ketchup', 'mayo', 'mayonnaise', 'dressing', 'brühe', 'fond', 'tomatenmark', 'passierte tomate', 'kokosmilch', 'sojasauce', 'worcester', 'tabasco', 'sambal', 'curry', 'paprikapulver', 'zimt', 'vanille', 'backpulver', 'natron', 'speisestärke', 'puddingpulver', 'gelatine', 'mandel', 'nuss', 'haselnuss', 'walnuss', 'cashew', 'erdnuss', 'rosine', 'sultanine', 'cranberry', 'trockenobst', 'datteln', 'soße', 'sauce'] 
                },
                'obst_gemuese': { 
                    name: 'Obst & Gemüse', 
                    icon: 'apple',
                    priority: 30, // Niedrige Priorität - nur wenn nichts spezifischeres passt
                    keywords: ['apfel', 'äpfel', 'banane', 'orange', 'tomate', 'tomaten', 'salat', 'kartoffel', 'kartoffeln', 'gurke', 'paprika', 'zwiebel', 'karotte', 'möhre', 'obst', 'gemüse', 'bio gurke', 'bio tomate', 'zitrone', 'birne', 'traube', 'weintraube', 'kiwi', 'mango', 'ananas', 'melone', 'erdbeere', 'himbeere', 'blaubeere', 'heidelbeere', 'kirsche', 'pflaume', 'pfirsich', 'nektarine', 'avocado', 'spinat', 'brokkoli', 'blumenkohl', 'kohlrabi', 'zucchini', 'aubergine', 'lauch', 'pilz', 'champignon', 'radieschen', 'rettich', 'sellerie', 'fenchel', 'spargel', 'kürbis', 'rote bete', 'knoblauch', 'ingwer', 'kräuter', 'basilikum', 'petersilie', 'schnittlauch', 'dill', 'minze', 'rosmarin', 'thymian', 'dattel', 'cherry'] 
                },
                'sonstiges': { 
                    name: 'Sonstiges', 
                    icon: 'package',
                    priority: 0,
                    keywords: [] 
                }
            };
            
            // Funktion: Kategorie für Produkt bestimmen - mit Prioritäten
            function getCategoryForProduct(item) {
                const searchText = ((item.name || '') + ' ' + (item.brand || '')).toLowerCase();
                
                // Kategorien nach Priorität sortieren (höchste zuerst)
                const sortedCategories = Object.entries(categories)
                    .filter(([id]) => id !== 'sonstiges')
                    .sort((a, b) => b[1].priority - a[1].priority);
                
                // Beste Übereinstimmung finden
                let bestMatch = null;
                let bestScore = 0;
                
                for (const [catId, cat] of sortedCategories) {
                    for (const kw of cat.keywords) {
                        if (searchText.includes(kw)) {
                            // Score basiert auf Keyword-Länge (längere = spezifischer = besser)
                            // Plus Priorität der Kategorie
                            const score = (kw.length * 10) + cat.priority;
                            if (score > bestScore) {
                                bestScore = score;
                                bestMatch = catId;
                            }
                        }
                    }
                }
                
                return bestMatch || 'sonstiges';
            }
            
            // 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 = '';
            
            // Kategorie-Toggle und Stats
            html += `
                <div class="flex items-center justify-between mb-3 px-1">
                    <div class="flex items-center gap-3">
                        <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>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <span class="text-xs text-slate-500">Kategorien</span>
                        <input type="checkbox" ${groupByCategory ? 'checked' : ''} onchange="toggleShoppingCategories(this.checked)" class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                    </label>
                </div>
            `;
            
            if (groupByCategory) {
                // Nach Kategorien gruppieren
                const grouped = {};
                sorted.forEach(item => {
                    const catId = getCategoryForProduct(item);
                    if (!grouped[catId]) grouped[catId] = [];
                    grouped[catId].push(item);
                });
                
                // Kategorien in definierter Reihenfolge rendern (nach typischer Supermarkt-Logik)
                const categoryOrder = ['obst_gemuese', 'fleisch_wurst', 'fisch', 'kaese_milch', 'brot_backwaren', 'grundnahrung', 'tiefkuehl', 'konserven', 'getraenke', 'suessigkeiten', 'hygiene', 'haushalt', 'tiernahrung', 'baby', 'sonstiges'];
                
                categoryOrder.forEach(catId => {
                    if (!grouped[catId] || grouped[catId].length === 0) return;
                    
                    const cat = categories[catId];
                    const items = grouped[catId];
                    
                    html += `
                        <div class="mb-4">
                            <div class="flex items-center gap-2 mb-2 px-1">
                                <i data-lucide="${cat.icon}" class="w-4 h-4 text-slate-400"></i>
                                <span class="text-sm font-medium text-slate-700">${cat.name}</span>
                                <span class="text-xs text-slate-400">(${items.length})</span>
                            </div>
                            <div class="space-y-2">
                    `;
                    
                    items.forEach(item => {
                        html += renderShoppingItem(item);
                    });
                    
                    html += `</div></div>`;
                });
            } else {
                // Ohne Gruppierung
                html += '<div class="space-y-2">';
                sorted.forEach(item => {
                    html += renderShoppingItem(item);
                });
                html += '</div>';
            }
            
            container.innerHTML = html;
            lucide.createIcons();
        }
        
        // Toggle Kategorie-Gruppierung
        function toggleShoppingCategories(enabled) {
            localStorage.setItem('shopping_group_by_category', enabled ? '1' : '0');
            renderShoppingList();
        }
        
        // Einzelnes Shopping-Item rendern
        function renderShoppingItem(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>
                            ` : ''}
                            <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>
                `;
        }
        
        // 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');
            }
        }
        
        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();
            
            // Produkt-ID merken für Scroll-Position nach Reload
            lastProductId = shoppingAddProduct.id;
            
            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();
                
                document.getElementById('sync-last-date').textContent = 
                    data.last_sync ? new Date(data.last_sync).toLocaleString('de-DE') : 'Nie';
                document.getElementById('sync-outdated-count').textContent = data.outdated || 0;
                document.getElementById('sync-total-count').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';
                
                // Externer Scanner Einstellung laden
                externalScannerEnabled = data.external_scanner_enabled === '1';
                const extScannerToggle = document.getElementById('external-scanner-toggle');
                if (extScannerToggle) extScannerToggle.checked = externalScannerEnabled;
                
                // last_auto_sync ist ein Unix-Timestamp in Millisekunden
                const savedTime = parseInt(data.last_auto_sync || '0');
                
                // Validierung: Wenn der Wert zu klein ist (z.B. Sekunden statt Millisekunden), korrigieren
                if (savedTime > 0 && savedTime < 10000000000) {
                    // Wahrscheinlich in Sekunden, umrechnen
                    lastAutoSyncTime = savedTime * 1000;
                } else {
                    lastAutoSyncTime = savedTime;
                }
                
                // Wenn Auto-Sync aktiviert ist aber noch nie gelaufen, setze aktuelle Zeit
                if (autoSyncEnabled && lastAutoSyncTime === 0) {
                    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() })
                    });
                }
                
                console.log('Auto-Sync Settings geladen:', { 
                    autoSyncEnabled, 
                    lastAutoSyncTime: new Date(lastAutoSyncTime).toLocaleString(),
                    rawValue: data.last_auto_sync,
                    externalScannerEnabled
                });
                
                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');
                    updateNextAutoSyncTime();
                    showToast('Auto-Sync aktiviert - nächster Sync in 1 Stunde', 'success');
                } else {
                    infoEl.classList.add('hidden');
                    showToast('Auto-Sync deaktiviert', 'info');
                }
                lucide.createIcons();
            } catch (e) {
                showToast('Fehler beim Speichern', 'error');
            }
        }
        
        // Nächste Auto-Sync Zeit berechnen und anzeigen
        function updateNextAutoSyncTime() {
            const el = document.getElementById('next-auto-sync');
            if (!el) return;
            
            if (!autoSyncEnabled) {
                el.textContent = 'Deaktiviert';
                return;
            }
            
            const now = Date.now();
            const nextSync = lastAutoSyncTime + AUTO_SYNC_INTERVAL;
            const diff = nextSync - now;
            
            if (diff <= 0) {
                el.textContent = 'Bei nächster Aktion';
            } else {
                const minutes = Math.ceil(diff / 60000);
                if (minutes <= 1) {
                    el.textContent = 'In weniger als 1 Min.';
                } else if (minutes < 60) {
                    el.textContent = `In ca. ${minutes} Min.`;
                } else {
                    const hours = Math.floor(minutes / 60);
                    const mins = minutes % 60;
                    if (mins === 0) {
                        el.textContent = `In ca. ${hours}h`;
                    } else {
                        el.textContent = `In ca. ${hours}h ${mins}min`;
                    }
                }
            }
        }
        
        // 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
        // Liste der Modals bei denen der Sync-Toast versteckt werden soll
        const syncHiddenModals = [
            'scanner-modal', 'mhd-modal', 'detail-modal', 'recipe-modal', 
            'receipt-modal', 'receipt-wizard-modal', 'receipt-summary-modal',
            'add-modal', 'consume-modal', 'ocr-modal', 'manual-date-modal',
            'custom-photo-modal', 'mhd-popup', 'manual-modal', 'external-scanner-modal',
            'shopping-add-modal', 'manual-barcode-modal', 'receipt-product-popup'
        ];
        
        function isAnyModalOpen() {
            return syncHiddenModals.some(id => {
                const el = document.getElementById(id);
                return el && !el.classList.contains('hidden');
            });
        }
        
        function showSyncToast() {
            const syncToast = document.getElementById('sync-toast');
            if (syncToast && !isAnyModalOpen()) {
                syncToast.classList.remove('hidden');
            }
        }
        
        function hideSyncToast() {
            const syncToast = document.getElementById('sync-toast');
            if (syncToast) {
                syncToast.classList.add('hidden');
            }
        }
        
        async function runBackgroundSync() {
            if (isSyncing) return;
            
            // Nicht starten wenn Modal offen
            if (isAnyModalOpen()) return;
            
            isSyncing = true;
            const syncToast = document.getElementById('sync-toast');
            const syncToastText = document.getElementById('sync-toast-text');
            
            // Toast anzeigen (nur wenn kein Modal offen)
            if (syncToast && !isAnyModalOpen()) {
                syncToast.classList.remove('hidden');
                syncToastText.textContent = 'Synchronisiere...';
            }
            
            try {
                // Status prüfen
                const statusRes = await fetch(`${API_URL}?action=sync_status`);
                const statusData = await statusRes.json();
                const totalOutdated = statusData.outdated || 0;
                
                if (totalOutdated === 0) {
                    if (syncToastText && !isAnyModalOpen()) syncToastText.textContent = 'Alles aktuell ✓';
                    setTimeout(() => hideSyncToast(), 1500);
                    isSyncing = false;
                    return;
                }
                
                // Synchronisiere in Batches
                const batchSize = 5;
                let totalSynced = 0;
                let processed = 0;
                
                while (processed < totalOutdated && processed < 20) { // Max 20 im Hintergrund
                    // Toast verstecken wenn Modal geöffnet wurde
                    if (isAnyModalOpen()) hideSyncToast();
                    
                    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 (syncToastText && !isAnyModalOpen()) {
                            syncToastText.textContent = `${totalSynced} synchronisiert...`;
                        }
                        
                        if (data.total === 0 || data.synced === 0) break;
                    } else {
                        break;
                    }
                }
                
                // Zeit speichern
                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 (syncToastText && !isAnyModalOpen()) {
                    syncToastText.textContent = totalSynced > 0 ? `${totalSynced} Produkte aktualisiert ✓` : 'Alles aktuell ✓';
                }
                
                // Produkte neu laden
                await loadProducts();
                updateNextAutoSyncTime();
                
            } catch (e) {
                console.error('Background sync error:', e);
                if (syncToastText && !isAnyModalOpen()) syncToastText.textContent = 'Sync-Fehler';
            } finally {
                isSyncing = false;
                // Toast nach 2 Sekunden ausblenden
                setTimeout(() => hideSyncToast(), 2000);
            }
        }
        
        // 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;
                
                if (totalOutdated === 0) {
                    if (!silent) showToast('Alle Produkte sind aktuell!', 'success');
                    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');
                    }
                }
                
                // Zeit in DB speichern
                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() })
                });
                
                // 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();
                updateNextAutoSyncTime();
                
            } 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;
                }
                
                // Debug-Modus laden
                const debugToggle = document.getElementById('debug-mode-toggle');
                const debugStatus = document.getElementById('debug-status');
                if (debugToggle) {
                    const debugEnabled = data.debug_mode === '1';
                    debugToggle.checked = debugEnabled;
                    // Auch in localStorage speichern für schnellen Zugriff
                    localStorage.setItem('debug_mode', debugEnabled ? '1' : '0');
                    if (debugStatus) {
                        debugStatus.classList.toggle('hidden', !debugEnabled);
                    }
                }
            } catch (e) {
                console.error('Load security settings error:', e);
            }
        }
        
        // Debug-Modus umschalten
        async function toggleDebugMode() {
            const toggle = document.getElementById('debug-mode-toggle');
            const debugStatus = document.getElementById('debug-status');
            const enabled = toggle.checked;
            
            try {
                await fetch(`${API_URL}?action=settings`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ key: 'debug_mode', value: enabled ? '1' : '0' })
                });
                
                // Auch in localStorage speichern
                localStorage.setItem('debug_mode', enabled ? '1' : '0');
                
                if (debugStatus) {
                    debugStatus.classList.toggle('hidden', !enabled);
                }
                
                if (enabled) {
                    showToast('🐛 Debug-Modus aktiviert', 'success');
                } else {
                    showToast('Debug-Modus deaktiviert', 'info');
                }
            } catch (e) {
                showToast('Fehler beim Speichern', 'error');
                toggle.checked = !enabled;
            }
        }
        
        // 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');
            }
        }
        
        // ============ 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', 'toilette', 'klo',
                    'spülmittel', 'geschirrspül', 'waschmittel', 'weichspüler', 'flecken',
                    'putzmittel', 'allzweck', 'entkalker', 'scheuermilch', 'glasreiniger',
                    
                    // Körperpflege
                    'shampoo', 'duschgel', 'duschbad', 'seife', 'soap', 'bodylotion', 'lotion',
                    'creme', 'cream', 'deo', 'deodorant', 'parfum', 'parfüm', 'aftershave',
                    'rasierer', 'rasier', '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', 'binden', 'windeln', 'feuchttücher',
                    
                    // Tierbedarf
                    'hundefutter', 'katzenfutter', 'tierfutter', 'tiernahrung', 'pet food',
                    'hundesnack', 'katzensnack', 'katzenstreu', 'aquarium',
                    
                    // Sonstiges Non-Food
                    'batterien', 'batterie', 'glühbirne', 'lampe', 'kerze', 'kerzen',
                    'müllbeutel', 'müllsack', 'frischhaltefolie', 'alufolie', 'backpapier',
                    'schwamm', 'lappen', 'bürste', 'handschuhe'
                ];
                
                // Filtern: Nur echte Lebensmittel behalten
                allInStockProducts = products.filter(p => {
                    // 1. Prüfe is_food Flag (aus DB)
                    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. API-Quelle prüfen (Beauty, Pet Food, Products = Non-Food)
                    if (source.includes('beauty') || source.includes('pet') || source === 'opf') {
                        console.log('Non-Food (API):', p.name);
                        return false;
                    }
                    
                    // 3. Kategorien prüfen
                    if (categories.includes('kosmetik') || categories.includes('cosmetic') || 
                        categories.includes('beauty') || categories.includes('reinigung') ||
                        categories.includes('hygiene') || categories.includes('pet')) {
                        console.log('Non-Food (Kategorie):', p.name);
                        return false;
                    }
                    
                    // 4. Blacklist-Keywords im Namen prüfen
                    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)
        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();
                
                if (data.error) {
                    throw new Error(data.error);
                }
                
                currentRecipe = data.recipe;
                showRecipeResult(currentRecipe);
                
            } catch (e) {
                showToast(e.message || 'Fehler beim Generieren', 'error');
                // Zurück zur Quickstart-Ansicht bei Fehler
                document.getElementById('recipe-quickstart').classList.remove('hidden');
                document.getElementById('recipe-result-view').classList.add('hidden');
            }
        }
        
        // Rezept anzeigen
        function showRecipeResult(recipe) {
            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">
                    <!-- 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">Fehlt noch:</p>
                                    ${missingIngredients.map(ing => `
                                        <div class="flex items-center gap-2 text-sm">
                                            <span class="w-2 h-2 rounded-full bg-red-500"></span>
                                            <span class="text-slate-700 font-medium">${ing.amount || ''}</span>
                                            <span class="text-slate-600">${ing.name}</span>
                                        </div>
                                    `).join('')}
                                    <button onclick="addMissingToShoppingList()" class="mt-3 w-full py-2.5 bg-blue-50 text-blue-600 rounded-xl text-sm flex items-center justify-center gap-2 hover:bg-blue-100 border border-blue-200">
                                        <i data-lucide="shopping-cart" class="w-4 h-4"></i>
                                        Zur Einkaufsliste 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;
                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');
            } catch (e) {
                showToast('Fehler beim Speichern', 'error');
            }
        }
        
        // 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');
            }
        }
        
        // Fehlende Zutaten zur Einkaufsliste
        async function addMissingToShoppingList() {
            if (!currentRecipe) return;
            
            const missingIngredients = (currentRecipe.ingredients || []).filter(i => i.available === false);
            
            if (missingIngredients.length === 0) {
                showToast('Keine fehlenden Zutaten', 'info');
                return;
            }
            
            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();
                
                if (data.success) {
                    showToast(`${data.added} Zutat(en) zur Einkaufsliste hinzugefügt`, 'success');
                    loadShoppingCount();
                }
            } catch (e) {
                showToast('Fehler beim Hinzufügen', 'error');
            }
        }
        
        // Kochmodus
        async function startCookingMode(recipeId) {
            if (!currentRecipe) return;
            
            try {
                // Session starten/fortsetzen
                const res = await fetch(`${API_URL}?action=cooking_session`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ recipe_id: recipeId })
                });
                
                currentCookingSession = await res.json();
                
                renderCookingMode();
            } catch (e) {
                showToast('Fehler beim Starten', '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>