# Kressentials — Projektdokumentation

**Version:** 0.52 (Pre-Launch)  
**Stand:** 13. Juni 2026  
**Erstellt von:** Adrian Kress & Claude (Anthropic)  
**Hosting:** Cloudflare Pages  
**Datenbank:** Firebase / Firestore  

---

## Inhaltsverzeichnis

1. [Was ist dieses Projekt?](#1-was-ist-dieses-projekt)
2. [Technologie-Übersicht](#2-technologie-übersicht)
3. [Projektstruktur — welche Datei macht was?](#3-projektstruktur)
4. [Firebase — wie ist die Datenbank aufgebaut?](#4-firebase-datenbank)
5. [Features — was kann die App?](#5-features)
6. [Wie funktioniert der Code? (Architektur)](#6-architektur)
7. [Bekannte Einschränkungen](#7-bekannte-einschränkungen)
8. [Changelog](#8-changelog)
9. [Roadmap](#9-roadmap)
10. [Deployment — wie kommt die App online?](#10-deployment)
11. [Für neue Entwickler — Schnellstart](#11-schnellstart)

---

## 1. Was ist dieses Projekt?

**Kress! Food Organizer** ist eine gemeinsame Vorrats- und Einkaufslisten-App für Haushalte.

Die App löst ein konkretes Problem: Man weiß nie was noch im Kühlschrank oder in der Speisekammer ist, kauft Dinge doppelt, und Lebensmittel laufen ab bevor man sie bemerkt.

**Die Kernfunktionen auf einen Blick:**
- Inventar für verschiedene Lagerorte (Kühlschrank, Tiefkühler, Speisekammer etc.)
- Ablaufdatum-Warnungen (grün / orange / rot)
- Gemeinsame Einkaufsliste die sich in Echtzeit synchronisiert
- Mehrere Personen können denselben Haushalt teilen
- Funktioniert auf iPhone (Safari) und Android (Chrome) wie eine echte App

**Was macht sie besonders?**  
Im Vergleich zu Apps wie Bring! hat sie eine vollständige Inventarfunktion — man sieht nicht nur was man kaufen muss, sondern auch was man bereits hat.

---

## 2. Technologie-Übersicht

### Was ist eine PWA?
PWA steht für **Progressive Web App**. Das ist eine normale Website die sich auf dem Smartphone wie eine echte App anfühlt und verhält — mit eigenem Icon auf dem Homescreen, Vollbild-Modus und Offline-Fähigkeit. Kein App Store nötig.

| Technologie | Zweck | Warum diese Wahl |
|---|---|---|
| **HTML / CSS / JavaScript** | Die App selbst | Standard, kein Framework nötig, schnell |
| **Firebase Authentication** | Nutzer-Login | Kostenlos, sicher, einfach einzubinden |
| **Firestore (Firebase)** | Datenbank | Echtzeit-Sync ohne extra Server |
| **Netlify** | Hosting | Kostenlos, einfaches Drag & Drop Deployment |
| **DM Sans (Google Fonts)** | Schriftart | Modern, gut lesbar auf Mobile |
| **Noto Color Emoji (Google Fonts)** | Emoji-Darstellung | Einheitlich auf allen Geräten inkl. Windows |

### Was kostet das?
- **Netlify Free Tier:** Kostenlos für kleine Projekte
- **Firebase Free Tier (Spark Plan):** Kostenlos bis 50.000 Reads/Tag und 20.000 Writes/Tag — für einen Privathaushalt oder eine kleine Nutzerzahl völlig ausreichend
- Bei Wachstum: Firebase Blaze Plan (Pay as you go), ca. 0,06€ pro 100.000 Reads

---

## 3. Projektstruktur

```
vorrat-app/
├── index.html          ← Die gesamte App-Struktur (alle Screens, alle Modals)
├── style.css           ← Das komplette Design (Farben, Layout, Animationen)
├── app.js              ← Die gesamte App-Logik (Firebase, Funktionen, Events)
├── manifest.json       ← PWA-Konfiguration (Name, Icons, Farben fürs Homescreen-Icon)
├── sw.js               ← Service Worker (ermöglicht Offline-Nutzung, cacht Dateien)
├── icons/
│   ├── icon-192.png    ← App-Icon klein (für Android Homescreen)
│   └── icon-512.png    ← App-Icon groß (für Splash Screen)
├── DOKUMENTATION.md    ← Diese Datei
├── SETUP.md            ← Schritt-für-Schritt Anleitung für erstmalige Einrichtung
└── ROADMAP.pdf         ← Visuelle Roadmap aller geplanten Features
```

### index.html
Enthält alle sichtbaren Elemente der App:
- Den Login-Screen
- Die Haupt-App (Topbar, Navigation, Content-Bereich)
- Alle Modals (Popups) — Artikel hinzufügen, Einstellungen, Profil, Onboarding, etc.

**Wichtig:** Es gibt keine separaten HTML-Seiten. Alles ist eine einzige Seite, JavaScript blendet die richtigen Bereiche ein und aus.

### style.css
Das komplette Design der App. Aufgebaut mit CSS-Variablen (Farben, Abstände) am Anfang der Datei — wenn man das Farbschema ändern will, reicht es die Variablen oben anzupassen.

**Farbpalette (Dark Theme):**
```css
--bg-0: #0f0f1a       /* Hintergrund dunkelst */
--bg-1: #161625       /* Karten-Hintergrund */
--bg-2: #1e1e32       /* Eingabefelder */
--accent: #7c6af7     /* Lila — Hauptfarbe, Buttons */
--green: #3dd68c      /* Grün — alles ok */
--amber: #f5a623      /* Orange — Warnung */
--red: #f05252        /* Rot — Fehler / abgelaufen */
--text: #e8e8f0       /* Haupttext */
--text-muted: #8888aa /* Sekundärtext */
```

### app.js
Die gesamte Logik der App. 1.300+ Zeilen, strukturiert in klar benannte Abschnitte (erkennbar an den `// ──` Kommentaren). Lädt als ES-Modul (`type="module"`) damit Firebase-Imports funktionieren.

### manifest.json
Sagt dem Browser wie die App aussehen soll wenn sie auf dem Homescreen installiert wird — Name, Icons, Hintergrundfarbe, Anzeigemodus.

### sw.js (Service Worker)
Läuft im Hintergrund. Strategie: **Network-First** für eigene Dateien (HTML/CSS/JS) — es wird immer zuerst die aktuelle Version aus dem Netz geladen, der Cache dient nur noch als Offline-Fallback. Dadurch erscheinen neue Versionen sofort nach einem normalen Reload und die App funktioniert auch ohne Verbindung. Die Cache-Version (`kressentials-v14`) wird bei jedem Update hochgezählt.

---

## 4. Firebase Datenbank

Firebase Firestore ist eine NoSQL-Datenbank — keine Tabellen wie in Excel, sondern Dokumente die in Sammlungen organisiert sind (ähnlich wie Ordner mit Dateien).

### Datenstruktur

```
firestore/
│
├── users/
│   └── {userId}/                    ← Ein Dokument pro Nutzer
│       ├── displayName: "Adrian"
│       ├── householdId: "abc123"    ← Aktuell aktiver Haushalt
│       ├── householdIds: ["abc123", "xyz789"]  ← Alle Haushalte des Nutzers
│       └── onboardingDone: true     ← Wurde Onboarding abgeschlossen?
│
└── households/
    └── {householdId}/               ← Ein Dokument pro Haushalt
        ├── name: "Familie Kress"
        ├── emoji: "🏠"
        ├── inviteCode: "ABC123"     ← 6-stelliger Code zum Beitreten
        ├── createdBy: {userId}
        ├── createdAt: timestamp
        │
        ├── members/                 ← Untercollection: Mitglieder
        │   └── {userId}/
        │       ├── displayName: "Adrian"
        │       ├── emoji: "😎"
        │       ├── role: "admin"    ← "admin" oder "member"
        │       ├── color: "#7c6af7"
        │       └── joinedAt: timestamp
        │
        ├── items/                   ← Untercollection: Vorrats-Artikel
        │   └── {itemId}/
        │       ├── name: "Vollmilch"
        │       ├── qty: "1,5 l"
        │       ├── loc: "Kühlschrank"
        │       ├── exp: "2026-07-01"  ← Ablaufdatum (null wenn nicht gesetzt)
        │       ├── note: "für den Kuchen"
        │       ├── createdBy: {userId}
        │       ├── createdAt: timestamp
        │       └── updatedAt: timestamp
        │
        ├── cart/                    ← Untercollection: Einkaufsliste
        │   └── {cartItemId}/
        │       ├── name: "Butter"
        │       ├── loc: "Kühlschrank"
        │       ├── done: false      ← Wurde der Artikel abgehakt?
        │       └── createdAt: timestamp
        │
        └── locations/               ← Untercollection: Benutzerdefinierte Lagerorte
            └── {locationId}/
                ├── name: "Weinkeller"
                ├── emoji: "🍷"
                └── createdAt: timestamp
```

### Firestore Sicherheitsregeln

Aktuell läuft die Datenbank im **Testmodus** — das bedeutet jeder angemeldete Nutzer kann alles lesen und schreiben. Vor dem öffentlichen Launch müssen die Regeln auf folgendes umgestellt werden:

```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read, write: if request.auth.uid == userId;
    }
    match /households/{householdId} {
      allow read, write: if request.auth != null;
      match /{subcollection}/{docId} {
        allow read, write: if request.auth != null;
      }
    }
  }
}
```

**Diese Regeln in der Firebase Console eintragen:** Firestore → Regeln → Einfügen → Veröffentlichen

---

## 5. Features

### Authentifizierung
| Feature | Status | Beschreibung |
|---|---|---|
| Registrierung | ✅ | E-Mail + Passwort |
| Anmeldung | ✅ | E-Mail + Passwort |
| Passwort vergessen | ✅ | Reset-Link per E-Mail |
| E-Mail-Verifizierung | ✅ | Banner erscheint bis Mail bestätigt |
| Onboarding | ✅ | Name + Emoji nach Registrierung, einmalig |
| Konto löschen | ✅ | In Profileinstellungen, mit Passwort-Bestätigung |
| Abmelden | ✅ | Im Profil-Dropdown oben rechts |

### Vorrat (Inventar)
| Feature | Status | Beschreibung |
|---|---|---|
| Artikel hinzufügen | ✅ | Name, Menge, Ort, Ablaufdatum, Notiz |
| Artikel bearbeiten | ✅ | Antippen öffnet Bearbeitungsmodal |
| Artikel löschen | ✅ | Löschen-Button am Artikel |
| Artikel duplizieren | ✅ | ⧉ Button am Artikel |
| Mehrfachauswahl | ✅ | Langer Druck aktiviert Auswahlmodus |
| Zur Einkaufsliste | ✅ | 🛒 Button am Artikel |
| Ablaufdatum-Ampel | ✅ | Grün / Orange (≤3 Tage) / Rot (abgelaufen) |
| Suchfunktion | ✅ | Lupe oben rechts |
| Ablaufend-Tab | ✅ | Zeigt alle Artikel die in 7 Tagen ablaufen |

### Einkaufsliste
| Feature | Status | Beschreibung |
|---|---|---|
| Artikel hinzufügen | ✅ | Per + Button oder direkt aus dem Vorrat |
| Manuell hinzufügen | ✅ | Eigenes Modal mit Name und Kategorie |
| Artikel abhaken | ✅ | Tippen auf Checkbox |
| Erledigte entfernen | ✅ | "Erledigte entfernen" Button |
| In Vorrat übernehmen | ✅ | Erledigte Artikel → direkt in den Vorrat |

### Haushalt & Mitglieder
| Feature | Status | Beschreibung |
|---|---|---|
| Haushalt erstellen | ✅ | Automatisch bei Registrierung |
| Mehrere Haushalte | ✅ | Unbegrenzt, schneller Wechsel oben links |
| Einladungscode | ✅ | 6-stelliger Code zum Teilen |
| Einladungslink | ✅ | Direktlink per WhatsApp teilbar |
| Mitglied entfernen | ✅ | Nur für Admins |
| Admin-Rolle übertragen | ✅ | Nur für Admins |
| Haushalt verlassen | ✅ | In "Meine Haushalte" |
| Echtzeit-Sync | ✅ | Alle Änderungen sofort für alle sichtbar |

### Profil
| Feature | Status | Beschreibung |
|---|---|---|
| Anzeigename | ✅ | Wird für alle Haushaltsmitglieder sichtbar |
| Profilbild-Emoji | ✅ | Erscheint als Avatar oben rechts |
| E-Mail ändern | ✅ | Erfordert aktuelles Passwort |
| Passwort ändern | ✅ | Erfordert aktuelles Passwort |

### Lagerorte
| Feature | Status | Beschreibung |
|---|---|---|
| Standard-Lagerorte | ✅ | Kühlschrank, Tiefkühler, Speisekammer, Gemüsefach, Keller |
| Eigene Lagerorte | ✅ | In Haushaltseinstellungen erstellen / bearbeiten / löschen |
| Emoji pro Lagerort | ✅ | Aus 20 Optionen wählbar |

### Technisches
| Feature | Status | Beschreibung |
|---|---|---|
| PWA (installierbar) | ✅ | Safari → Homescreen (iOS), Chrome → Installieren (Android) |
| Offline-Banner | ✅ | Roter Hinweis bei fehlender Verbindung |
| App-Loader | ✅ | Ladeanimation beim Start |
| Service Worker | ✅ | Cacht App-Dateien für schnelles Laden |

---

## 6. Architektur

### Wie ist app.js aufgebaut?

Die Datei ist in klar benannte Abschnitte unterteilt. Hier ein Überblick was wo zu finden ist:

| Abschnitt | Zeile ca. | Was passiert dort |
|---|---|---|
| Firebase Config | 1 | Firebase-Verbindung initialisieren |
| State | 28 | Alle globalen Variablen (aktueller Nutzer, Haushalt, Artikel etc.) |
| Config | 44 | Lagerorte, Farben, Emoji-Listen |
| Auth | 57 | Login, Registrierung, Passwort vergessen, Konto löschen |
| Auth State | 189 | Was passiert wenn sich jemand an- oder abmeldet |
| Offline Detection | 231 | Erkennt fehlende Internetverbindung |
| Households Init | 239 | Haushalt laden oder neu erstellen beim Login |
| Subscribe | 292 | Echtzeit-Listener für Firestore (items, cart, members) |
| Switch/Create/Leave Household | 334 | Haushalt wechseln, neu erstellen, verlassen |
| Onboarding | 399 | Einmaliger Willkommens-Flow nach Registrierung |
| Tabs | 444 | Navigation zwischen Vorrat / Einkauf / Ablaufend / Haushalt |
| Inventory | 463 | Vorrat-Tab rendern |
| Select Mode | 541 | Mehrfachauswahl (langer Druck) |
| Cart | 568 | Einkaufsliste rendern |
| Expiring | 618 | Ablaufend-Tab rendern |
| Household Tab | 656 | Haushalt-Tab rendern |
| Member Actions | 712 | Mitglied entfernen, Admin-Rolle übertragen |
| Profile | 819 | Profileinstellungen öffnen und speichern |
| Settings | 880 | Haushaltseinstellungen |
| Location Management | 905 | Lagerorte verwalten |
| Invite / Join | 1033 | Einladungscode teilen und beitreten |
| Item CRUD | 1094 | Artikel hinzufügen, bearbeiten, löschen, duplizieren |
| Cart CRUD | 1190 | Einkaufslisten-Artikel verwalten |
| Search / Stats | 1244 | Suchfunktion, Statistiken aktualisieren |
| Modals / Toast / Util | 1281 | Hilfsfunktionen |

### Wie funktioniert die Echtzeit-Synchronisation?

Firebase Firestore nutzt sogenannte **Snapshots** — die App "abonniert" Datenbankeinträge und wird automatisch benachrichtigt wenn sich etwas ändert. Das ist in `subscribeAll()` (Zeile ~292) implementiert:

```
Nutzer A fügt Milch hinzu
→ Firestore speichert den Artikel
→ Alle anderen Nutzer desselben Haushalts bekommen sofort ein Update
→ Ihre App rendert die Liste neu
→ Milch erscheint auf allen Geräten gleichzeitig
```

### Wie funktioniert das Onboarding?

Das Onboarding nutzt ein Firestore-Feld (`onboardingDone`) statt einer JavaScript-Variable — so funktioniert es zuverlässig auf jedem Gerät:

1. Neuer Nutzer registriert sich → `onboardingDone: false` wird in Firestore gespeichert
2. Bei jedem Login wird geprüft: ist `onboardingDone === false`?
3. Wenn ja → Onboarding-Modal öffnet sich automatisch
4. Nach Abschluss (oder Überspringen) → `onboardingDone: true` → nie wieder

---

## 7. Bekannte Einschränkungen

| Einschränkung | Beschreibung | Geplante Lösung |
|---|---|---|
| Emojis auf Windows Desktop | Manche Emojis werden auf Windows-Browsern nicht perfekt gerendert | Noto Color Emoji Font ist eingebunden, verbessert sich mit Update 1.0 CI |
| Offline nur lesend | Bei fehlender Verbindung können keine Änderungen gespeichert werden | Firebase Offline-Persistence (Update 1.1) |
| Kein Barcode-Scanner | Artikel müssen manuell eingetippt werden | Geplant für Update 1.1 |
| Keine Push-Benachrichtigungen | Kein automatischer Hinweis bei ablaufenden Artikeln | Geplant für Update 1.1 |
| Firestore im Testmodus | Sicherheitsregeln noch nicht produktionsreif | Vor Launch finalisieren |
| Keine eigene Domain | Aktuell noch Netlify-URL | Vor Launch einrichten |
| Keine App-Icons | Platzhalter-Icons | Vor Launch erstellen (CI) |

---

## 8. Changelog

### v0.52 — Barcode-Scanner & Install-Anleitung (13. Juni 2026)
**Barcode-Scanner (neu)**
- Barcode scannen beim Hinzufügen (Vorrat + Einkauf): Kamera öffnet sich, erkennt EAN/UPC-Codes
- Automatische Produkterkennung über die Open-Food-Facts-Datenbank (deutscher Name bevorzugt), Barcode als Rückfall
- Scanner-Lib (html5-qrcode) wird erst bei Bedarf nachgeladen, nach Login vorgewärmt → Kamera bleibt in der Nutzergeste
- Nur Produkt-Barcodes (EAN-13/8, UPC-A/E, Code-128), native Erkennung wo verfügbar
- **iPhone-Fokus-Fix:** Standard-Zoom 2× + Zoom-Regler (falls vom Gerät unterstützt) — Geräte ohne Makro (z. B. iPhone 14) fokussieren sonst zu nah nicht scharf

**Install-Anleitung (neu)**
- Erkennt iOS / Android und zeigt die passende Schritt-für-Schritt-Anleitung zum Installieren der Web-App (korrektes „Teilen"-Symbol auf iOS)
- „Überspringen" und „Nicht mehr anzeigen" klar unterscheidbar
- Bewusst rückstandslos entfernbar (Marker-Kommentare im Code) — für den späteren Capacitor-Umbau

**Technisch**
- Service Worker v52

---

### v0.43 — Maßeinheiten & Mehrfachauswahl-Verbesserungen (12. Juni 2026)
**Vorrat**
- Menge jetzt strukturiert: Wert + Einheiten-Auswahl (Stück / g / kg / ml / l / Packung / …), optional — z. B. „2 × 1,5 l", „8 Stück". Grundlage für die kommende Rezept-Integration.

**Mehrfachauswahl (langes Drücken)**
- Neuer Button „In Einkauf": markierte Artikel zur Einkaufsliste hinzufügen
- „Alle" wählt nur noch die Artikel der aktuellen Ansicht (Lagerort / Suche), nicht den gesamten Vorrat
- Langes Drücken funktioniert jetzt auch am Desktop (Maus); auf dem iPhone keine störende Textmarkierung/Lupe mehr
- Bugfix: „Abbrechen" reagiert wieder; Lösch-Hinweis zeigt korrekte Anzahl

**Technisch**
- Service Worker v43

---

### v0.39 — Mengen-Tracking, Einkaufs-Features & Robustheit (12. Juni 2026)
**Vorrat**
- Mengen-Tracking: Stückzahl pro Artikel mit +/- Stepper + „Anzahl"-Feld im Modal
- „Aufgebraucht"-Dialog bei Menge 0: entfernen oder direkt auf die Einkaufsliste
- Sortierung (Name / Ablauf / Menge), pro Gerät gemerkt
- Einheitliche Anzahl/Menge-Anzeige in allen Listen (z. B. „3 × 1,5 l", „8 Stück")

**Einkaufsliste**
- Eingetragene Artikel nachträglich bearbeiten (Name + Kategorie)
- „Wird mitgebracht"-Markierung: wer bringt welchen Artikel mit (Echtzeit)

**Dashboard**
- Zahlen (Artikel / Bald ablaufend / Abgelaufen) anklickbar → Liste mit Bearbeiten/Löschen
- Datums-Fix: „abgelaufen" und „bald ablaufend" schließen sich gegenseitig aus (MHD heute = bald, nicht abgelaufen)

**Robustheit**
- Renderer stürzen bei verwaistem Lagerort / fehlendem Namen nicht mehr ab
- Artikel-/Einkaufs-Abfragen ohne `orderBy('createdAt')` → kein Datensatz wird mehr ausgeblendet

**Sonstiges**
- Das Vaterunser (Matthäus 6,9–13) als Segen-Kommentar im Quelltext (app.js)
- Service Worker v39

---

### v0.28 — UI-Vereinheitlichung & Theme-Auswahl (11. Juni 2026)
**Icons**
- Komplette App auf Tabler-Icons vereinheitlicht: Navigation (Vorrat/Einkauf/Ablaufend/Haushalt), Suche, Einkauf-Tab, Ablaufend-Tab, Einstellungen-Liste, Item-Buttons (Kopieren/In-Einkauf/Löschen) und Empty-States
- Keine Emoji-Chrome-Icons mehr (Personalisierung wie Profil-/Haushalt-Emoji bleibt)

**Lagerorte**
- Eigenes Symbol pro Lagerort über einen Tabler-Icon-Picker (statt Emoji); überall einheitlich angezeigt

**Darstellung**
- Theme-Umschalter in den Profileinstellungen: System / Hell / Dunkel
- Auswahl pro Gerät gespeichert, „System" folgt live dem Betriebssystem, kein Aufblitzen beim Laden

**Technisch**
- Dark-Mode über umschaltbare `.dark`-Klasse (statt fester Media-Query)
- Service Worker v28

---

### v0.24 — Lagerorte & UI-Konsistenz (11. Juni 2026)
**Vorrat**
- Kategorie-Kacheln: farbige Ablauf-Punkte mit Anzahl (rot = abgelaufen, orange = bald ablaufend)
- Lagerort-/Kategorie-Auswahl in den Hinzufügen-Modals (Vorrat + Einkauf) als antippbare Tabler-Icon-Chips statt Dropdown

**Lagerorte**
- Alle Lagerorte gleichwertig bearbeitbar und löschbar — kein nicht-editierbarer „Standard" mehr
- Standard-Lagerorte werden einmalig pro Haushalt in der Datenbank angelegt (mit Seed-Flag gegen Wiederauferstehen gelöschter)
- Umbenennen zieht automatisch auf alle betroffenen Artikel (Vorrat + Einkauf) um
- Löschschutz: Lagerorte mit Artikeln lassen sich nicht löschen
- Doppelte Lagerort-Namen werden verhindert

**Haushalt-Tab**
- Icons auf Tabler umgestellt (Mitglieder, Aktionskarten, Admin-Kennzeichnung)

**Technisch**
- Service Worker v24

---

### v0.16 — Dashboard-Kopf (10. Juni 2026)
**Übersicht / Vorrat-Kopf**
- Neues Begrüßungs-Banner unter der Topbar: zeitabhängiger Gruß („Guten Morgen / Tag / Abend") mit Vorname + Untertitel „Hier ist euer Vorrat"
- Tageszeit-abhängiges Icon im Gruß (sunrise / sun / moon)
- Statistik-Karten (Artikel · Bald ablaufend · Abgelaufen) neu als Ring-Karten mit Tabler-Icon über der Zahl, gleichmäßig über die Breite verteilt
- Topbar (Haushalts-Umschalter, Suche, Profil) unverändert erhalten
- Service Worker v16

---

### v0.14 — Google Login, UI-Refresh & mehr (10. Juni 2026)
**Auth**
- Google Login (Anmelden mit Google-Konto via Firebase `signInWithPopup`)

**Design — UI-Refresh (reines CSS)**
- Mehr Weißraum, weichere Karten, dezente Schatten statt harter Rahmen
- Stärkere Typografie-Hierarchie, prägnantere Statistik-Zahlen
- Einheitliche Schatten-Tokens für Light- und Dark-Mode

**Vorrat**
- Neue Kategorie-Ansicht: Lagerorte als Kachel-Grid mit Tabler-Icons
- Antippen öffnet die Detailansicht eines Lagerorts (großer Zurück-Button); Stats-Bar bleibt erhalten

**Einkaufsliste**
- Progressive Disclosure: „In Vorrat übernehmen" und „Erledigte entfernen" erscheinen nur, wenn mindestens ein Artikel abgehakt ist
- FAB blendet sich auf dem Einkauf-Tab aus, solange die Aktions-Leiste sichtbar ist (keine Überlappung auf Mobilgeräten)

**Technisch**
- Tabler Icons (Webfont via CDN) eingebunden
- Service Worker auf **Network-First** umgestellt: neue Versionen erscheinen sofort nach normalem Reload, Cache nur noch als Offline-Fallback
- Service Worker v14

---

### v0.9 — Pre-Launch (Juni 2026)
**Auth & Konto**
- Registrierung, Login, Abmelden
- Passwort vergessen (Reset per E-Mail)
- E-Mail-Verifizierungs-Banner
- Konto löschen (mit Passwort-Bestätigung)
- Onboarding nach Registrierung (Name + Emoji, Firestore-basiert)

**Vorrat**
- Artikel hinzufügen, bearbeiten, löschen, duplizieren
- Mehrfachauswahl per langem Druck
- Ablaufdatum-Ampel (grün/orange/rot)
- Ablaufend-Tab (7-Tage-Vorschau)
- Suchfunktion

**Einkaufsliste**
- Artikel manuell hinzufügen (eigenes Modal)
- Artikel aus Vorrat übernehmen
- Abhaken, entfernen, erledigte in Vorrat übernehmen

**Haushalt**
- Mehrere Haushalte pro Nutzer
- Schneller Wechsel per Dropdown oben links
- Einladungscode + WhatsApp-Link
- Mitglied entfernen (Admin)
- Admin-Rolle übertragen
- Haushalt verlassen

**Profil**
- Anzeigename + Emoji-Avatar
- E-Mail und Passwort ändern

**Lagerorte**
- 5 Standard-Lagerorte
- Eigene Lagerorte erstellen, bearbeiten, löschen (in Haushaltseinstellungen)

**Technisch**
- PWA (installierbar auf iOS und Android)
- Echtzeit-Synchronisation via Firestore
- Offline-Banner
- App-Loader beim Start
- Service Worker v11

---

## 9. Roadmap

Die vollständige visuelle Roadmap ist in **ROADMAP.pdf** enthalten.

### Kurzübersicht

**Noch vor Launch (v1.0)**
- Firestore Sicherheitsregeln finalisieren
- Corporate Identity (Name, Logo, Farben)
- App-Icons (192px + 512px)
- Eigene Domain einrichten
- Abschließende Testphase

**Update 1.1 — Komfort**
- Barcode-Scanner (EAN → Produktname via Open Food Facts API)
- Artikel-Menge anpassen / aufgebraucht markieren
- Push-Benachrichtigungen bei ablaufenden Artikeln
- Sortierung & Filter im Vorrat

**Update 1.2 — Social**
- Aktivitäts-Feed ("Lena hat Milch hinzugefügt")
- Kommentare an Artikel
- Einkaufslisten-Vorlagen
- QR-Code statt Einladungscode

**Update 2.0 — Premium**
- Free / Premium Modell
- Stripe-Integration (4,99€/Monat oder 60€ Lifetime)
- Rezeptvorschläge basierend auf Vorrat
- Verbrauchsstatistiken

---

## 10. Deployment

### Wie kommt eine neue Version online?

1. Dateien bearbeiten
2. `sw.js` — Cache-Version um 1 erhöhen (z.B. `vorrat-v11` → `vorrat-v12`)
3. ZIP erstellen mit allen Dateien
4. Netlify öffnen → alten Ordner durch neuen ersetzen (Drag & Drop)
5. Netlify deployed automatisch — dauert ca. 30 Sekunden
6. Safari / Chrome auf dem Telefon neu starten (damit neuer Service Worker greift)

### Firebase Console
**URL:** https://console.firebase.google.com  
**Projekt:** foodorg-36d6c  
**Wichtige Bereiche:**
- Authentication → Nutzer verwalten
- Firestore Database → Daten einsehen / bearbeiten
- Firestore Database → Regeln → Sicherheitsregeln

---

## 11. Schnellstart

### Für jemanden der neu ins Projekt einsteigt:

**Schritt 1 — Dateien verstehen**
- Öffne `index.html` im Browser → du siehst die App
- Öffne `app.js` im Texteditor → die gesamte Logik
- Öffne `style.css` → das gesamte Design

**Schritt 2 — Firebase Config**
Die Firebase-Verbindungsdaten stehen ganz oben in `app.js` im Block `firebaseConfig`. Diese Werte kommen aus der Firebase Console und dürfen nicht verändert werden.

**Schritt 3 — Änderungen machen**
- Design ändern → `style.css` bearbeiten
- Funktionen ändern → `app.js` bearbeiten
- Neue Elemente hinzufügen → erst `index.html` (HTML-Struktur), dann `app.js` (Logik), dann `style.css` (Aussehen)

**Schritt 4 — Testen**
- Lokal: Datei direkt im Browser öffnen (eingeschränkt — Firebase funktioniert nicht lokal ohne Server)
- Empfohlen: Direkt auf Netlify deployen und auf echtem Gerät testen

**Schritt 5 — Deployen**
Service Worker Version in `sw.js` erhöhen → ZIP → Netlify

### Wichtige Faustregeln
- **Nie** die `firebaseConfig` Werte löschen oder ändern
- **Immer** die SW-Version erhöhen wenn Dateien geändert wurden
- **Alle** neuen Modals müssen im Escape-Handler in `app.js` registriert werden (ganz unten)
- **Neue Firestore-Collections** müssen in den Sicherheitsregeln berücksichtigt werden

---

*Dokumentation erstellt von Claude (Anthropic) im Auftrag von Adrian Kress, Juni 2026.*  
*Bei Fragen oder Unklarheiten: Einfach Claude fragen — der gesamte Projektverlauf ist dokumentiert.*