chore: bump package.json + package-lock auf 1.4.1

Patch-Release: fix fuer $effect-Loop auf der Startseite (sort=viewed)
und Wunschliste-Card-Layout auf Mobile.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.env.example

@@ -15,3 +15,9 @@ BRAVE_API_KEY=
 # SearXNG-Secret: beliebig lange Zufallskette. Für Prod mit
 # `openssl rand -hex 32` generieren und in der Pi-.env ablegen.
 SEARXNG_SECRET=dev-secret-change-me
+
+# Gemini Vision (Foto-Rezept-Magie). Ohne Key ist die Funktion graceful
+# deaktiviert — der Kamera-Button erscheint dann gar nicht erst.
+GEMINI_API_KEY=
+GEMINI_MODEL=gemini-2.5-flash
+GEMINI_TIMEOUT_MS=20000

.gitignore

@@ -7,4 +7,7 @@ data/
 *.log
 test-results/
 playwright-report/
+playwright-report-remote/
 .playwright-mcp/
+.claude/
+ci-log.txt

.prettierignore

@@ -0,0 +1,24 @@
+# Generierte / Build-Artefakte
+node_modules
+.svelte-kit
+build
+coverage
+.vite
+
+# Lockfiles
+package-lock.json
+
+# Lokale Laufzeit-Daten
+data
+
+# Test-Fixtures: rohe HTML-Captures muessen byte-exakt bleiben,
+# sonst schlaegt die JSON-LD-Extraktion im Parser-Test anders an.
+tests/fixtures
+
+# Markdown: Tabellen sind hand-aligned, Code-Bloecke in historischen
+# Plaenen sollen nicht nachtraeglich umgebrochen werden.
+*.md
+
+# SearXNG-Config ist ein Template mit ${VAR}-Platzhaltern, die der
+# Init-Container expandiert.
+searxng/settings.yml

CLAUDE.md

@@ -19,6 +19,8 @@ Selbstgehostete Rezept-PWA für die Familie Siegeln. Erreichbar unter `https://k
 | **Preview-Bilder** | `recipe.image_path` kann **absolute URL** (Preview-Modus) oder **lokaler Filename** sein. `RecipeView.svelte` prüft mit `/^https?:\/\//i`. |
 | **Service Worker nur ab HTTPS** | `npm run dev` liefert HTTP → SW registriert nicht. Für PWA-Tests `npm run build && npm run preview` (localhost) oder Prod-Docker. |
 | **Icon-Rendering** | `npm run render:icons` rendert `icon-192.png` + `icon-512.png` aus `static/icon.svg`. Nur nach SVG-Änderung erneut ausführen + committen. |
+| **Gemini-Key fehlt** | Wenn `GEMINI_API_KEY` leer ist, rendert das Layout das Camera-Icon nicht, und `/new/from-photo` antwortet mit 503 (`+page.server.ts`-Gate). Graceful Degradation — kein Zombie-Button. |
+| **sharp + libheif** | Im `Dockerfile`-Builder-Stage ist `vips-dev` nötig, damit `sharp` HEIC-Input (iOS) lesen kann. Runtime-Stage braucht nix zusätzlich (sharp bringt libvips prebuilt mit). |
 
 ## Dateien, die man typischerweise anfasst
 
@@ -26,12 +28,16 @@ Selbstgehostete Rezept-PWA für die Familie Siegeln. Erreichbar unter `https://k
 - `src/routes/+layout.svelte` — Header, mobile expand, Dropdown-Search auf Rezeptseiten
 - `src/routes/recipes/[id]/+page.svelte` — Rezept-Detail mit allen Actions (Rating, Favorit, Cooked, Wunschliste, Kommentar, Umbenennen, Löschen)
 - `src/routes/preview/+page.svelte` — importierte Vorschau vor dem Speichern
+- `src/routes/new/from-photo/+page.svelte` — Foto-Rezept-Magie (Picker → Spinner → vorbefüllter Editor)
+- `src/lib/server/ai/` — Gemini-Client, Prompt-Schema, image-preprocess, rate-limit, description-phrases
+- `src/lib/components/RecipeView.svelte` / `RecipeEditor.svelte` — Lesen/Edit-Mode des Rezepts. Editor ist in Sub-Components aufgeteilt: `IngredientRow`, `StepList`, `ImageUploadBox`, `TimeDisplay` (+ shared types `recipe-editor-types.ts`)
 - `src/lib/server/search/searxng.ts` — Web-Suche + Thumbnail-Enrichment + SQLite-Cache
 - `src/lib/server/recipes/importer.ts` — JSON-LD → Recipe, orchestriert Bild-Download
 - `src/lib/server/db/migrations/*.sql` — Schema; bei Änderung immer **neue** Migration statt bestehende bearbeiten
 - `src/service-worker.ts` — Service-Worker-Orchestrator (Shell-Cache + Pre-Cache + SWR)
 - `src/lib/sw/` — reine Logik (Cache-Strategy-Entscheider, Diff-Manifest) für Unit-Tests
-- `src/lib/client/*.svelte.ts` — Frontend-Stores (Network, Sync-Status, Toast, Install-Prompt)
+- `src/lib/client/*.svelte.ts` — Frontend-Stores (Search, Network, Sync-Status, Toast, Install-Prompt, Wishlist, PWA, Profile, Confirm, Search-Filter)
+- `tests/e2e/remote/` — Playwright gegen `kochwas-dev.siegeln.net` (CRUD erlaubt; workers:1, serviceWorkers:block)
 
 ## Arbeitsweise (wie wir es machen)
 
@@ -67,7 +73,7 @@ docker compose -f docker-compose.prod.yml up --build
 
 ## Offene Themen / Stand
 
-Siehe Session-Handoff-Dokumente unter `docs/superpowers/` und dort besonders `session-handoff-2026-04-17.md`. Die Roadmap-Phasen liegen als `docs/superpowers/plans/*.md`. Was als „Later" markiert ist, ist nicht beauftragt.
+Siehe die Plan-Dateien unter `docs/superpowers/plans/*.md` für abgeschlossene Implementierungs-Phasen (v1.0 Foundations → v1.1 Offline-PWA → Post-Review-Roadmap → Search-State-Store → Editor-Split → Ingredient-Sections = v1.2). Was als „Later" markiert ist, ist nicht beauftragt.
 
 ## Auto-Memory (lokal, nicht im Repo)
 

Dockerfile

@@ -3,17 +3,44 @@
 FROM node:22-alpine AS builder
 WORKDIR /app
 
-# Alpine needs build tools for better-sqlite3 native module
-RUN apk add --no-cache python3 make g++ libc6-compat
+# Alpine needs build tools for better-sqlite3 native module.
+# vips-dev provides libvips + libheif for sharp (incl. HEIC input from iOS).
+RUN apk add --no-cache python3 make g++ libc6-compat vips-dev
 
 COPY package*.json ./
-RUN npm ci
+# Sharp-Prebuilt-Install unter Docker-Buildx-QEMU war trotz aller Flag-
+# Varianten unzuverlaessig. Finale Strategie:
+#   - --cpu/--os/--libc explizit setzen: sharp's offizielle Doc-Empfehlung
+#     fuer Cross-Platform-Docker-Builds (siehe sharp-Install-Doku),
+#     umgeht QEMU-Detection-Bugs.
+#   - --ignore-scripts + npm rebuild: loest das Parallel-Install-Race,
+#     bei dem sharp's install-Skript vor dem Entpacken der Prebuilt-Binary
+#     laeuft.
+#   - Explizites Nachinstallieren der Prebuilts als Sicherheit: falls (A)
+#     noch nicht reicht, zwingt (B) die Plattform-Pakete auf Disk.
+#   - node-addon-api + node-gyp als Runtime-Deps: falls am Ende doch alles
+#     nicht klappt und sharp from-source baut (mit dem oben installierten
+#     python3 + make + g++ + vips-dev).
+RUN npm install --cpu=arm64 --os=linux --libc=musl \
+      --ignore-scripts --include=optional --no-audit --no-fund
+RUN npm install --cpu=arm64 --os=linux --libc=musl \
+      --ignore-scripts --no-save --no-audit --no-fund \
+      @img/sharp-linuxmusl-arm64@0.34.5 \
+      @img/sharp-libvips-linuxmusl-arm64@1.2.4
+RUN npm rebuild
 
 COPY . .
 RUN npm run build
 
-# Remove dev dependencies for the runtime image
-RUN npm prune --omit=dev
+# Fresh-Install fuer den Runtime-Stage: nur Produktions-Deps, gleiche Strategie.
+RUN rm -rf node_modules \
+  && npm install --cpu=arm64 --os=linux --libc=musl \
+       --ignore-scripts --omit=dev --include=optional --no-audit --no-fund \
+  && npm install --cpu=arm64 --os=linux --libc=musl \
+       --ignore-scripts --no-save --no-audit --no-fund \
+       @img/sharp-linuxmusl-arm64@0.34.5 \
+       @img/sharp-libvips-linuxmusl-arm64@1.2.4 \
+  && npm rebuild
 
 FROM node:22-alpine AS runner
 WORKDIR /app

docker-compose.prod.yml

@@ -11,6 +11,16 @@ services:
       - IMAGE_DIR=/data/images
       - SEARXNG_URL=http://searxng:8080
       - NODE_ENV=production
+      # Im Header als kleine Versionsnummer unter dem Logo angezeigt.
+      - KOCHWAS_TAG=${KOCHWAS_TAG:-dev}
+      # Gemini (Foto-Rezept-Magie). Leer = Feature deaktiviert.
+      - GEMINI_API_KEY=${GEMINI_API_KEY:-}
+      - GEMINI_MODEL=${GEMINI_MODEL:-gemini-2.5-flash}
+      - GEMINI_TIMEOUT_MS=${GEMINI_TIMEOUT_MS:-20000}
+      # adapter-node-Default ist 512 KB. Tablet- und iPad-Pro-Kameras liefern
+      # JPEGs/HEICs bis 15 MB. Endpoint-Limit ist 20 MB; hier 25 MB fuer den
+      # Multipart-Overhead.
+      - BODY_SIZE_LIMIT=25000000
     depends_on:
       - searxng
     restart: unless-stopped

docs/ARCHITECTURE.md

@@ -17,8 +17,12 @@ src/
 ├── app.html, app.d.ts        # Shell + Env-Types
 ├── service-worker.ts         # PWA-Shell
 ├── lib/
-│   ├── client/               # clientseitig: Profil-Store, Confirm-Dialog
-│   ├── components/           # Svelte-Komponenten (RecipeView, StarRating, ConfirmDialog, ProfileSwitcher)
+│   ├── client/               # reaktive Stores (Profile, Search, Wishlist, PWA, Network, Sync, Toast, Install, Confirm, API-Fetch-Wrapper)
+│   ├── components/           # Svelte-Komponenten:
+│   │                         #   - Recipe: RecipeView, RecipeEditor + Editor-Sub-Components
+│   │                         #     (IngredientRow, StepList, ImageUploadBox, TimeDisplay, recipe-editor-types)
+│   │                         #   - UI-Shell: ConfirmDialog, ProfileSwitcher, SyncIndicator, Toast, UpdateToast
+│   │                         #   - Search: SearchFilter, SearchLoader, StarRating
 │   ├── recipes/              # shared: Portionen-Scaler (Client UND Server)
 │   ├── server/               # nur Server-Code (nie in Client-Bundle!)
 │   │   ├── db/               # openDb, Migrations, DB-Singleton
@@ -54,8 +58,20 @@ src/
 4. User klickt „Speichern" → `/api/recipes/import` → Importer lädt Bild (`images/downloader.ts`), SHA256-Hash-Dedup, speichert lokal, INSERT in `recipe` + `ingredient` + `step` + `recipe_tag`
 5. Redirect zu `/recipes/[id]`
 
+### Foto-Rezept-Magie (AI-Extraktion)
+
+1. User klickt Camera-Icon im Header → `/new/from-photo` (nur gerendert wenn `GEMINI_API_KEY` gesetzt; disabled wenn offline)
+2. File-Picker mit `capture="environment"` öffnet direkt die Rückkamera auf Mobile
+3. Upload als `multipart/form-data` → `POST /api/recipes/extract-from-photo`
+4. Server: MIME-Whitelist + 8 MB-Gate + Rate-Limit (10/min/IP) → `preprocessImage` (sharp, ≤1600px lange Kante, JPEG-Re-encode, Metadata-Strip) → `extractRecipeFromImage` (Gemini 2.5 Flash mit structured `responseSchema`, `temperature: 0.1`, Zod-validiert, 1× Retry bei Schema-Fehler oder 5xx) → zufällige Description aus `description-phrases.ts` (50er-Pool) → Response mit `Partial<Recipe>`
+5. **Das Original-Foto wird nicht persistiert.** Der Server loggt keine Prompt/Response-Inhalte — nur Code, Dauer, Byte-Größe.
+6. Client hält das Ergebnis im `PhotoUploadStore` und rendert `<RecipeEditor recipe={extracted}>`. Weil `recipe.id === null` ist, blendet der Editor den `ImageUploadBox`-Block aus und zeigt nur den Hinweis „Bild kannst du nach dem Speichern hinzufügen."
+7. User editiert und klickt „Speichern" → `POST /api/recipes` (neuer Scratch-Insert-Endpoint, wrappt `insertRecipe`) → Redirect auf `/recipes/:id`
+
 ### Web-Suche
 
+Die gesamte Live-Search-Logik ist im `SearchStore` (`src/lib/client/search.svelte.ts`) gekapselt: Debounce, Race-Guard, Pagination, Web-Fallback, Snapshot/Restore für Back-Nav. Sowohl Header-Dropdown (`+layout.svelte`) als auch Startseite (`+page.svelte`) teilen sich die Klasse mit unterschiedlicher `filterParam`-Quelle.
+
 1. User tippt → 300 ms Debounce → `/api/recipes/search?q=...` (lokal FTS5)
 2. Wenn 0 Treffer: automatisch `/api/recipes/search/web?q=...`
 3. `searxng.ts` → SearXNG-API mit `site:domain OR site:domain2 ...`-Filter aus Whitelist
@@ -86,7 +102,8 @@ Gemeinsame Komponente `ConfirmDialog.svelte` wird im Root-Layout einmal gemounte
 - **JSON-LD first**: Alle drei Ziel-Domains (Chefkoch, Emmi, Experimente) liefern `schema.org/Recipe` im JSON-LD. LLM-Fallback war geplant, aktuell nicht nötig.
 - **SearXNG als Such-Engine**: Self-hosted, daher keine API-Keys. Das Bot-Detection-Theater wird mit gesetzten `X-Forwarded-For`-Headern aus Docker-IPs umgangen.
 - **Thumbnail-Cache in SQLite**: 30 Tage TTL (per `KOCHWAS_THUMB_TTL_DAYS`). Negative Einträge (Seite ohne Bild) werden auch gecacht.
-- **Svelte 5 Runes** — kein `$:` mehr, keine alten Stores außer `$app/stores`. Neue Stores via Klasse mit `$state`-Feldern.
+- **Svelte 5 Runes** — kein `$:` mehr, keine alten Stores außer `$app/stores`. Neue Stores via Klasse mit `$state`-Feldern. Form-lokale Snapshots in Edit-Komponenten mit `untrack()` aus `svelte`, damit Prop-Updates nicht laufende Edits überschreiben.
+- **Zutaten-Sektionen** (ab Migration 012, v1.2): `ingredient.section_heading TEXT NULL`. Ist das Feld gesetzt, startet an dieser Zeile eine neue Sektion — folgende Zutaten gehören dazu, bis die nächste Zeile wieder ein Heading hat. Kein zweites Tabellen-Modell, Ordnung bleibt `position`. Importer setzt immer `null` (schema.org/Recipe hat das Konzept nicht). Editor erlaubt Inline-Insert via `Abschnitt hinzufügen`-Button vor jeder Zeile; leeres Heading wird beim Save zu `null` normalisiert.
 - **Service Worker** rein zum Shell-Cachen für Offline-First-PWA, kein intelligentes Cache-Matching (keine externe Rezept-Seiten).
 
 ## Migrations-Workflow
@@ -100,10 +117,12 @@ Bei Schema-Änderung:
 
 ## Test-Strategie
 
-- **Unit**: `tests/unit/` — pure Funktionen (json-ld-recipe, iso8601-duration, quotes-random, smoke)
+- **Unit**: `tests/unit/` — pure Funktionen + Client-Stores via jsdom (json-ld-recipe, iso8601-duration, quotes-random, scaler, ingredient-parser, SearchStore, PWA/Toast/Sync-Stores, SW-Logik).
 - **Integration**: `tests/integration/` — mit `openInMemoryForTest()` fresh SQLite pro Test. Externe HTTP via `node:http`-TestServer auf Port 0 gemockt.
-- **Keine Svelte-Component-Tests** (bewusst, Aufwand/Nutzen stimmt nicht; UI wird manuell getestet)
-- **Vor Commit**: `npm test && npm run check` muss grün sein.
+- **E2E local**: `tests/e2e/` — Playwright gegen `npm run preview`, deckt PWA-Offline-Lifecycle ab (`offline.spec.ts`).
+- **E2E remote**: `tests/e2e/remote/` — Playwright gegen `kochwas-dev.siegeln.net` via `playwright.remote.config.ts` (`workers:1`, `serviceWorkers:block`). Testet Live-API-Verhalten, inkl. destruktiver CRUD-Flows (Recipes, Kommentare, Favoriten). Run: `npm run test:e2e:remote`. Siehe `tests/e2e/remote/fixtures/` für Profile-Setup + idempotente API-Cleanup-Helper.
+- **Keine Svelte-Component-Unit-Tests** (bewusst, Aufwand/Nutzen stimmt nicht; UI wird per E2E und manuell getestet).
+- **Vor Commit**: `npm test && npm run check` muss grün sein. Vor Merge zu main: zusätzlich `npm run test:e2e:remote`.
 
 ### Service Worker (PWA)
 
@@ -111,11 +130,11 @@ Bei Schema-Änderung:
 
 - **Pre-Cache** (alle Rezepte + Bilder beim Initial-Sync), über paginierten Fetch von `/api/recipes/all`.
 - **Delta-Sync** beim App-Start (diff vs. Cache-Manifest, nur Delta laden).
-- **Drei Cache-Strategien** (dispatcht per `resolveStrategy`): Shell = cache-first, Daten = SWR, Bilder = cache-first.
+- **Drei Cache-Strategien** (dispatcht per `resolveStrategy`): Shell = cache-first, Daten = network-first mit 3 s-Timeout-Fallback auf Cache, Bilder = cache-first.
 - **Message-Protokoll** (`sync-start`, `sync-progress`, `sync-done`, `sync-error`) zwischen SW und Client.
 
 Reine Logik-Einheiten (testbar, Unit-Tests in `tests/unit/`):
-- `src/lib/sw/cache-strategy.ts` — `resolveStrategy({url, method})` → `'shell' | 'swr' | 'images' | 'network-only'`
+- `src/lib/sw/cache-strategy.ts` — `resolveStrategy({url, method})` → `'shell' | 'network-first' | 'images' | 'network-only'`
 - `src/lib/sw/diff-manifest.ts` — `diffManifest(current, cached)` → `{toAdd, toRemove}`
 
 Client-Stores (SSR-safe via typeof-Guards):

docs/OPERATIONS.md

@@ -155,7 +155,7 @@ Kochwas ist eine installierbare PWA. Erkennbar an:
 
 Caches im Browser (siehe DevTools → Application → Cache Storage):
 - `kochwas-shell-<version>` — App-Shell (JS/CSS/Static-Icons), cache-first
-- `kochwas-data-v1` — Rezept-HTMLs + API-JSON (SWR)
+- `kochwas-data-v1` — Rezept-HTMLs + API-JSON (network-first, 3 s Timeout → Cache-Fallback)
 - `kochwas-images-v1` — Bilder (cache-first)
 - `kochwas-meta` — Cache-Manifest (Liste der gecachten Rezept-IDs unter `/__cache-manifest__`)
 
@@ -171,3 +171,42 @@ Bei SW-Problemen Debug-Pfad:
 E2E-Tests (Playwright): `npm run test:e2e`. Setzt `npm run build` voraus (Playwright startet automatisch `npm run preview`).
 
 Icons einmalig rendern: `npm run render:icons` (schreibt nach `static/icon-*.png`, committen).
+
+## Dev-System / Remote-E2E
+
+`https://kochwas-dev.siegeln.net/` ist ein separates Deployment (eigener Container, eigene DB unter `/opt/docker/kochwas-dev/data/`). Zweck: E2E-Tests gegen eine prod-nahe Umgebung ohne Angst vor DB-Schäden. Die Remote-Suite (`tests/e2e/remote/`, Config `playwright.remote.config.ts`) darf dort frei CRUDen — User stellt die DB bei Bedarf per Backup wieder her.
+
+```bash
+npm run test:e2e:remote                               # gegen kochwas-dev
+E2E_REMOTE_URL=https://... npm run test:e2e:remote   # andere URL
+```
+
+Wichtige Config-Eigenschaften:
+- `workers: 1` — DB-Race-Sicherheit bei CRUD-Tests.
+- `serviceWorkers: 'block'` — verhindert Chromium-Crashes durch akkumulierten SW-State über 40+ Contexts.
+- Fixtures unter `tests/e2e/remote/fixtures/`: `profile.ts` (Profile-Auswahl via localStorage vor Seitenladen), `api-cleanup.ts` (idempotente DELETE-Helfer für afterEach).
+
+**Niemals gegen `kochwas.siegeln.net` (ohne `-dev`)** die destruktiven Tests laufen lassen — das ist Prod.
+
+
+## Gemini / Foto-Rezept-Magie
+
+Die Funktion „Foto → Rezept" ruft Google Gemini 2.5 Flash mit Vision auf. Im Header erscheint dann ein Kamera-Icon, das auf `/new/from-photo` führt.
+
+**Env-Vars** (in `docker-compose.prod.yml`):
+
+| Variable | Default | Zweck |
+|---|---|---|
+| `GEMINI_API_KEY` | _(leer)_ | Ohne Key ist das Feature graceful deaktiviert — Camera-Icon erscheint nicht. |
+| `GEMINI_MODEL` | `gemini-2.5-flash` | Modell-Wechsel ohne Rebuild, z. B. auf `gemini-2.5-pro` bei harter Handschrift. |
+| `GEMINI_TIMEOUT_MS` | `20000` | Timeout für den Vision-Call. |
+
+**Wichtig:** Env-Änderungen greifen erst nach `docker compose up -d --force-recreate`, nicht nach `restart`.
+
+**Privacy:** Das hochgeladene Foto geht einmal an Google Gemini und wird serverseitig nicht gespeichert. Google trainiert im Paid-Tier nicht auf API-Daten. Der Server loggt nur Status-Code, Dauer und Bildgröße — nie Prompt oder Response-Inhalt.
+
+**Rate-Limit:** 10 Requests/Minute pro IP (in-memory, resettet beim Prozess-Restart).
+
+**Key aus Gitea Secrets:** `GEMINI_API_KEY` als Secret in der CI-Umgebung hinterlegen; der Deploy-Schritt injiziert ihn in die `.env` des Pi-Stacks. Ablauf-Monitoring über die Google-Cloud-Konsole (≥1× pro Quartal checken).
+
+**Build-Dep `sharp`:** Der Foto-Preprocess nutzt `sharp` (libvips). Im `Dockerfile`-Builder-Stage ist `vips-dev` enthalten, damit der npm-install auf arm64 sauber durchläuft — insbesondere für HEIC-Input von iOS-Geräten (libheif kommt via vips-dev).

docs/superpowers/plans/2026-04-19-editor-split.md

@@ -0,0 +1,897 @@
+# Editor-Split Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:subagent-driven-development` (recommended) or `superpowers:executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Split the monolithic `RecipeEditor.svelte` (628 L) and pull one readability-oriented block out of `RecipeView.svelte` (398 L) by extracting 4 focused Svelte components: `ImageUploadBox`, `IngredientRow`, `StepList`, `TimeDisplay`. No behavior changes, just structure.
+
+**Architecture:** Parent-owned state stays in the parent (`RecipeEditor` still owns `ingredients: DraftIng[]`, `steps: DraftStep[]`). Sub-components receive props + callbacks and render their own template + scoped CSS. Shared draft types land in `src/lib/components/recipe-editor-types.ts` so sub-components and parent agree on the shape. `RecipeView.TimeDisplay` is pure presentational with no state.
+
+**Tech Stack:** Svelte 5 runes (`$props`, `$state`, `$derived`), TypeScript-strict, no new runtime deps.
+
+---
+
+## Why this is worth doing
+
+- `RecipeEditor.svelte:42-89` (Bild-Upload) and `RecipeEditor.svelte:313-334` (Zubereitung) are each self-contained logic-islands with their own state and handlers. Extracting them caps the file a Claude can reason about in one shot.
+- `IngredientRow` renders 10 lines of template with 5 ARIA labels and 6 grid-columns — a natural single-responsibility unit.
+- `TimeDisplay` is pure formatting; owning it as a component lets future phases (preview, card hover) reuse it.
+
+## What we are NOT doing
+
+- No refactor of `RecipeView`'s tabs / servings-stepper / ingredient-display. Those work fine as-is; roadmap only names the 4 above.
+- No component unit tests (kochwas has none for components; the e2e `recipe-detail.spec.ts` still covers View behavior, and edit-flow is manually smoked).
+- No `<style global>` extraction. Small CSS duplication (`.add`, `.del` buttons) is accepted.
+- No prop-type sharing via `<script module>` blocks. A `.ts` sibling file is simpler.
+
+## Design Snapshot
+
+**Shared types** — `src/lib/components/recipe-editor-types.ts`:
+
+```ts
+export type DraftIng = {
+  qty: string;
+  unit: string;
+  name: string;
+  note: string;
+};
+
+export type DraftStep = { text: string };
+```
+
+**Component APIs (locked before implementation):**
+
+```ts
+// ImageUploadBox.svelte
+type Props = {
+  recipeId: number;
+  imagePath: string | null;   // initial value; component owns its own state after
+  onchange: (path: string | null) => void;
+};
+
+// IngredientRow.svelte
+type Props = {
+  ing: DraftIng;              // passed by reference — bind:value=ing.* works transparently
+  idx: number;
+  total: number;              // for "last row? disable move-down"
+  onmove: (dir: -1 | 1) => void;
+  onremove: () => void;
+};
+
+// StepList.svelte
+type Props = {
+  steps: DraftStep[];         // passed by reference
+  onadd: () => void;
+  onremove: (idx: number) => void;
+};
+
+// TimeDisplay.svelte
+type Props = {
+  prepTimeMin: number | null;
+  cookTimeMin: number | null;
+  totalTimeMin: number | null;
+};
+```
+
+**Render-wrapping pattern:** The parent keeps the `<section class="block"><h2>…</h2> … </section>` wrappers. Sub-components render bare content (no outer utility-class wrapper), so the parent's scoped `.block` / `h2` styling continues to apply.
+
+---
+
+## Task 1: Extract `ImageUploadBox`
+
+**Files:**
+- Create: `src/lib/components/ImageUploadBox.svelte`
+- Modify: `src/lib/components/RecipeEditor.svelte`
+
+- [ ] **Step 1: Create the new component**
+
+```svelte
+<!-- src/lib/components/ImageUploadBox.svelte -->
+<script lang="ts">
+  import { ImagePlus, ImageOff } from 'lucide-svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
+  import { requireOnline } from '$lib/client/require-online';
+
+  type Props = {
+    recipeId: number;
+    imagePath: string | null;
+    onchange: (path: string | null) => void;
+  };
+
+  let { recipeId, imagePath: initial, onchange }: Props = $props();
+
+  let imagePath = $state<string | null>(initial);
+  let uploading = $state(false);
+  let fileInput: HTMLInputElement | null = $state(null);
+
+  const imageSrc = $derived(
+    imagePath === null
+      ? null
+      : /^https?:\/\//i.test(imagePath)
+        ? imagePath
+        : `/images/${imagePath}`
+  );
+
+  async function onFileChosen(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    input.value = '';
+    if (!file) return;
+    if (!requireOnline('Der Bild-Upload')) return;
+    uploading = true;
+    try {
+      const fd = new FormData();
+      fd.append('file', file);
+      const res = await asyncFetch(
+        `/api/recipes/${recipeId}/image`,
+        { method: 'POST', body: fd },
+        'Upload fehlgeschlagen'
+      );
+      if (!res) return;
+      const body = await res.json();
+      imagePath = body.image_path;
+      onchange(imagePath);
+    } finally {
+      uploading = false;
+    }
+  }
+
+  async function removeImage() {
+    if (imagePath === null) return;
+    const ok = await confirmAction({
+      title: 'Bild entfernen?',
+      message: 'Das Rezept wird danach ohne Titelbild angezeigt.',
+      confirmLabel: 'Entfernen',
+      destructive: true
+    });
+    if (!ok) return;
+    if (!requireOnline('Das Entfernen')) return;
+    uploading = true;
+    try {
+      const res = await asyncFetch(
+        `/api/recipes/${recipeId}/image`,
+        { method: 'DELETE' },
+        'Entfernen fehlgeschlagen'
+      );
+      if (!res) return;
+      imagePath = null;
+      onchange(null);
+    } finally {
+      uploading = false;
+    }
+  }
+</script>
+
+<div class="image-row">
+  <div class="image-preview" class:empty={!imageSrc}>
+    {#if imageSrc}
+      <img src={imageSrc} alt="" />
+    {:else}
+      <span class="placeholder">Kein Bild</span>
+    {/if}
+  </div>
+  <div class="image-actions">
+    <button
+      class="btn"
+      type="button"
+      onclick={() => fileInput?.click()}
+      disabled={uploading}
+    >
+      <ImagePlus size={16} strokeWidth={2} />
+      <span>{imagePath ? 'Bild ersetzen' : 'Bild hochladen'}</span>
+    </button>
+    {#if imagePath}
+      <button class="btn ghost" type="button" onclick={removeImage} disabled={uploading}>
+        <ImageOff size={16} strokeWidth={2} />
+        <span>Entfernen</span>
+      </button>
+    {/if}
+    {#if uploading}
+      <span class="upload-status">Lade …</span>
+    {/if}
+  </div>
+  <input
+    bind:this={fileInput}
+    type="file"
+    accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
+    class="file-input"
+    onchange={onFileChosen}
+  />
+</div>
+<p class="image-hint">Max. 10 MB. JPG, PNG, WebP, GIF oder AVIF.</p>
+
+<style>
+  .image-row {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  .image-preview {
+    width: 160px;
+    aspect-ratio: 16 / 10;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #eef3ef;
+    border: 1px solid #e4eae7;
+    flex-shrink: 0;
+  }
+  .image-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .image-preview.empty {
+    display: grid;
+    place-items: center;
+    color: #999;
+    font-size: 0.85rem;
+  }
+  .image-preview .placeholder {
+    padding: 0 0.5rem;
+    text-align: center;
+  }
+  .image-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .upload-status {
+    color: #666;
+    font-size: 0.9rem;
+  }
+  .file-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .image-hint {
+    margin: 0.6rem 0 0;
+    color: #888;
+    font-size: 0.8rem;
+  }
+  .btn {
+    padding: 0.55rem 0.85rem;
+    border-radius: 10px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.9rem;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .btn.ghost {
+    color: #666;
+  }
+  .btn:disabled {
+    opacity: 0.6;
+    cursor: progress;
+  }
+</style>
+```
+
+- [ ] **Step 2: Wire up `RecipeEditor.svelte`**
+
+Remove lines 30–89 (imagePath/uploading/fileInput state, imageSrc derived, onFileChosen, removeImage).
+
+Remove these imports at the top:
+```ts
+import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, ImageOff } from 'lucide-svelte';
+import { confirmAction } from '$lib/client/confirm.svelte';
+import { asyncFetch } from '$lib/client/api-fetch-wrapper';
+import { requireOnline } from '$lib/client/require-online';
+```
+Replace with (Task 1 needs only Plus + Trash2 + Chevrons — the image-specific imports move to the sub-component; `confirmAction`/`asyncFetch`/`requireOnline` stay for future tasks):
+```ts
+import { Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
+import ImageUploadBox from '$lib/components/ImageUploadBox.svelte';
+```
+
+Remove the image-related CSS (`.image-row`, `.image-preview*`, `.image-actions`, `.image-actions .btn`, `.upload-status`, `.file-input`, `.image-hint`, `.image-block` — those live in the sub-component now).
+
+Replace the Bild section in the template:
+```svelte
+<section class="block">
+  <h2>Bild</h2>
+  <ImageUploadBox
+    recipeId={recipe.id}
+    imagePath={recipe.image_path}
+    onchange={(p) => onimagechange?.(p)}
+  />
+</section>
+```
+
+- [ ] **Step 3: Run checks**
+
+```bash
+npm run check
+npm test
+```
+
+Expected: 0 errors, 196/196 tests pass.
+
+- [ ] **Step 4: Manual smoke**
+
+```bash
+npm run dev
+```
+
+Open any saved recipe → edit → upload an image → verify it shows up and `onimagechange` fires (parent's state updates). Remove the image → confirms the confirm-dialog and removes. Bail out if either flow breaks.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/components/ImageUploadBox.svelte src/lib/components/RecipeEditor.svelte
+git commit -m "$(cat <<'EOF'
+refactor(editor): ImageUploadBox als eigenstaendige Component
+
+Isoliert den Bild-Upload-Flow (File-Input, Preview, Entfernen-Dialog)
+aus dem RecipeEditor. Parent haelt nur noch den <section>-Wrapper und
+reicht recipe.id + image_path rein, kriegt Aenderungen per onchange
+callback zurueck.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+---
+
+## Task 2: Extract types + `IngredientRow`
+
+**Files:**
+- Create: `src/lib/components/recipe-editor-types.ts`
+- Create: `src/lib/components/IngredientRow.svelte`
+- Modify: `src/lib/components/RecipeEditor.svelte`
+
+- [ ] **Step 1: Types file**
+
+```ts
+// src/lib/components/recipe-editor-types.ts
+export type DraftIng = {
+  qty: string;
+  unit: string;
+  name: string;
+  note: string;
+};
+
+export type DraftStep = { text: string };
+```
+
+- [ ] **Step 2: IngredientRow component**
+
+```svelte
+<!-- src/lib/components/IngredientRow.svelte -->
+<script lang="ts">
+  import { Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
+  import type { DraftIng } from './recipe-editor-types';
+
+  type Props = {
+    ing: DraftIng;
+    idx: number;
+    total: number;
+    onmove: (dir: -1 | 1) => void;
+    onremove: () => void;
+  };
+
+  let { ing, idx, total, onmove, onremove }: Props = $props();
+</script>
+
+<li class="ing-row">
+  <div class="move">
+    <button
+      class="move-btn"
+      type="button"
+      aria-label="Zutat nach oben"
+      disabled={idx === 0}
+      onclick={() => onmove(-1)}
+    >
+      <ChevronUp size={14} strokeWidth={2.5} />
+    </button>
+    <button
+      class="move-btn"
+      type="button"
+      aria-label="Zutat nach unten"
+      disabled={idx === total - 1}
+      onclick={() => onmove(1)}
+    >
+      <ChevronDown size={14} strokeWidth={2.5} />
+    </button>
+  </div>
+  <input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
+  <input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
+  <input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
+  <input class="note" type="text" bind:value={ing.note} placeholder="Notiz" aria-label="Notiz" />
+  <button class="del" type="button" aria-label="Zutat entfernen" onclick={onremove}>
+    <Trash2 size={16} strokeWidth={2} />
+  </button>
+</li>
+
+<style>
+  .ing-row {
+    display: grid;
+    grid-template-columns: 28px 70px 70px 1fr 1fr 40px;
+    gap: 0.35rem;
+    align-items: center;
+  }
+  .move {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .move-btn {
+    width: 28px;
+    height: 20px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #555;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+  .move-btn:hover:not(:disabled) {
+    background: #f4f8f5;
+  }
+  .move-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+  .ing-row input {
+    padding: 0.5rem 0.55rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    min-height: 38px;
+    font-family: inherit;
+    min-width: 0;
+  }
+  .del {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #f1b4b4;
+    background: white;
+    color: #c53030;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .del:hover {
+    background: #fdf3f3;
+  }
+  @media (max-width: 560px) {
+    .ing-row {
+      grid-template-columns: 28px 70px 1fr 40px;
+      grid-template-areas:
+        'move qty name del'
+        'move unit unit del'
+        'note note note note';
+    }
+    .ing-row .move {
+      grid-area: move;
+    }
+    .ing-row .qty {
+      grid-area: qty;
+    }
+    .ing-row .unit {
+      grid-area: unit;
+    }
+    .ing-row .name {
+      grid-area: name;
+    }
+    .ing-row .note {
+      grid-area: note;
+    }
+    .ing-row .del {
+      grid-area: del;
+    }
+  }
+</style>
+```
+
+- [ ] **Step 3: Wire up `RecipeEditor.svelte`**
+
+Replace the local `DraftIng` / `DraftStep` type declarations (lines 100–106) with:
+```ts
+import type { DraftIng, DraftStep } from '$lib/components/recipe-editor-types';
+import IngredientRow from '$lib/components/IngredientRow.svelte';
+```
+
+In the template, swap the `<li class="ing-row">` block for:
+```svelte
+{#each ingredients as ing, idx (idx)}
+  <IngredientRow
+    {ing}
+    {idx}
+    total={ingredients.length}
+    onmove={(dir) => moveIngredient(idx, dir)}
+    onremove={() => removeIngredient(idx)}
+  />
+{/each}
+```
+
+Remove the CSS for `.ing-row`, `.move`, `.move-btn`, `.ing-row input`, `.del`, and the `@media (max-width: 560px)` block — all now live in `IngredientRow.svelte`.
+
+Remove the unused imports `ChevronUp`, `ChevronDown`, `Trash2` from RecipeEditor (they moved to the sub-component, but wait — `Trash2` is also used for step-remove. Keep `Trash2`, remove the two Chevrons).
+
+- [ ] **Step 4: Run checks**
+
+```bash
+npm run check
+npm test
+```
+
+- [ ] **Step 5: Manual smoke**
+
+Open any recipe in edit mode. Add an ingredient, type into all 4 fields, reorder up/down, remove one. Verify save persists the ordering.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/lib/components/recipe-editor-types.ts src/lib/components/IngredientRow.svelte src/lib/components/RecipeEditor.svelte
+git commit -m "$(cat <<'EOF'
+refactor(editor): IngredientRow + shared types
+
+IngredientRow rendert eine einzelne editierbare Zutat-Zeile. DraftIng
+und DraftStep sind jetzt in recipe-editor-types.ts, damit Parent und
+Sub-Components auf dieselbe Form referenzieren.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+---
+
+## Task 3: Extract `StepList`
+
+**Files:**
+- Create: `src/lib/components/StepList.svelte`
+- Modify: `src/lib/components/RecipeEditor.svelte`
+
+- [ ] **Step 1: StepList component**
+
+```svelte
+<!-- src/lib/components/StepList.svelte -->
+<script lang="ts">
+  import { Plus, Trash2 } from 'lucide-svelte';
+  import type { DraftStep } from './recipe-editor-types';
+
+  type Props = {
+    steps: DraftStep[];
+    onadd: () => void;
+    onremove: (idx: number) => void;
+  };
+
+  let { steps, onadd, onremove }: Props = $props();
+</script>
+
+<ol class="step-list">
+  {#each steps as step, idx (idx)}
+    <li class="step-row">
+      <span class="num">{idx + 1}</span>
+      <textarea
+        bind:value={step.text}
+        rows="3"
+        placeholder="Schritt beschreiben …"
+      ></textarea>
+      <button class="del" type="button" aria-label="Schritt entfernen" onclick={() => onremove(idx)}>
+        <Trash2 size={16} strokeWidth={2} />
+      </button>
+    </li>
+  {/each}
+</ol>
+<button class="add" type="button" onclick={onadd}>
+  <Plus size={16} strokeWidth={2} />
+  <span>Schritt hinzufügen</span>
+</button>
+
+<style>
+  .step-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 0.6rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+  .step-row {
+    display: grid;
+    grid-template-columns: 32px 1fr 40px;
+    gap: 0.5rem;
+    align-items: start;
+  }
+  .num {
+    width: 32px;
+    height: 32px;
+    background: #2b6a3d;
+    color: white;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-weight: 600;
+    font-size: 0.9rem;
+    margin-top: 0.25rem;
+  }
+  .step-row textarea {
+    padding: 0.55rem 0.7rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-family: inherit;
+    resize: vertical;
+    min-height: 70px;
+  }
+  .del {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #f1b4b4;
+    background: white;
+    color: #c53030;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .del:hover {
+    background: #fdf3f3;
+  }
+  .add {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.55rem 0.9rem;
+    border: 1px dashed #cfd9d1;
+    background: white;
+    color: #2b6a3d;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-family: inherit;
+  }
+  .add:hover {
+    background: #f4f8f5;
+  }
+</style>
+```
+
+- [ ] **Step 2: Wire up `RecipeEditor.svelte`**
+
+Add import:
+```ts
+import StepList from '$lib/components/StepList.svelte';
+```
+
+Replace the entire Zubereitung `<section class="block">` template block (starting `<section class="block">` with `<h2>Zubereitung</h2>` through the add-step button):
+
+```svelte
+<section class="block">
+  <h2>Zubereitung</h2>
+  <StepList {steps} onadd={addStep} onremove={removeStep} />
+</section>
+```
+
+**CSS audit — what stays and what goes in the parent:**
+
+Parent's template after Tasks 1–3 still contains:
+- `<section class="block"><h2>Bild</h2><ImageUploadBox .../></section>` — no `.block` inner styles needed beyond what's in parent.
+- `<div class="meta">` — still here. Keep `.meta`, `.field`, `.row`, `.small`, `.lbl`.
+- `<section class="block"><h2>Zutaten</h2><ul class="ing-list">{#each ..}<IngredientRow/>{/each}</ul><button class="add">...</button></section>` — still uses `.ing-list` and `.add`.
+- `<section class="block"><h2>Zubereitung</h2><StepList/></section>` — no inner CSS.
+- `<div class="foot"><button class="btn ghost">...</button><button class="btn primary">...</button></div>` — keeps `.foot`, `.btn`, `.btn.ghost`, `.btn.primary`, `.btn:disabled`.
+
+So parent CSS after Task 3 keeps: `.editor`, `.meta`, `.field`, `.lbl`, `.row`, `.small`, `.block`, `.block h2`, `.ing-list` (the `<ul>` wrapper), `.add` (for "Zutat hinzufügen"), `.foot`, `.btn` and variants.
+
+Drop from parent CSS in Task 3: `.step-list`, `.step-row`, `.num`, `.step-row textarea`, `.del`.
+
+- [ ] **Step 3: Run checks**
+
+```bash
+npm run check
+npm test
+```
+
+- [ ] **Step 4: Manual smoke**
+
+Open any recipe → edit → add a step, type, remove, save. Verify steps persist with correct ordering.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/components/StepList.svelte src/lib/components/RecipeEditor.svelte
+git commit -m "$(cat <<'EOF'
+refactor(editor): StepList als eigenstaendige Component
+
+Zubereitungs-Liste mit Add + Remove als Sub-Component. Parent steuert
+nur noch den Wrapper und reicht steps + die zwei Callbacks rein.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+---
+
+## Task 4: Extract `TimeDisplay` (RecipeView)
+
+**Files:**
+- Create: `src/lib/components/TimeDisplay.svelte`
+- Modify: `src/lib/components/RecipeView.svelte`
+
+- [ ] **Step 1: TimeDisplay component**
+
+```svelte
+<!-- src/lib/components/TimeDisplay.svelte -->
+<script lang="ts">
+  type Props = {
+    prepTimeMin: number | null;
+    cookTimeMin: number | null;
+    totalTimeMin: number | null;
+  };
+
+  let { prepTimeMin, cookTimeMin, totalTimeMin }: Props = $props();
+
+  const summary = $derived.by(() => {
+    const parts: string[] = [];
+    if (prepTimeMin) parts.push(`Vorb. ${prepTimeMin} min`);
+    if (cookTimeMin) parts.push(`Kochen ${cookTimeMin} min`);
+    if (!prepTimeMin && !cookTimeMin && totalTimeMin)
+      parts.push(`Gesamt ${totalTimeMin} min`);
+    return parts.join(' · ');
+  });
+</script>
+
+{#if summary}
+  <p class="times">{summary}</p>
+{/if}
+
+<style>
+  .times {
+    margin: 0 0 0.25rem;
+    color: #666;
+    font-size: 0.9rem;
+  }
+</style>
+```
+
+- [ ] **Step 2: Wire up `RecipeView.svelte`**
+
+Add import:
+```ts
+import TimeDisplay from '$lib/components/TimeDisplay.svelte';
+```
+
+Remove the local `timeSummary()` function (lines 45–52).
+
+Replace the `{#if timeSummary()}<p class="times">...</p>{/if}` block in the template with:
+```svelte
+<TimeDisplay
+  prepTimeMin={recipe.prep_time_min}
+  cookTimeMin={recipe.cook_time_min}
+  totalTimeMin={recipe.total_time_min}
+/>
+```
+
+Remove the `.times` CSS from RecipeView (it's in the sub-component now).
+
+- [ ] **Step 3: Run checks**
+
+```bash
+npm run check
+npm test
+```
+
+- [ ] **Step 4: Manual smoke**
+
+Open any recipe → verify the time line still shows the same content (Vorb. / Kochen / Gesamt).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/components/TimeDisplay.svelte src/lib/components/RecipeView.svelte
+git commit -m "$(cat <<'EOF'
+refactor(view): TimeDisplay als eigenstaendige Component
+
+timeSummary-Formatierung in eine wiederverwendbare Component
+gezogen. RecipeView liefert nur noch die drei Werte — zukuenftige
+Call-Sites (Preview, Hover-Cards) koennen dieselbe Logik reusen.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+---
+
+## Task 5: Self-review + push
+
+- [ ] **Step 1: Line-count audit**
+
+```bash
+wc -l src/lib/components/RecipeEditor.svelte src/lib/components/RecipeView.svelte src/lib/components/ImageUploadBox.svelte src/lib/components/IngredientRow.svelte src/lib/components/StepList.svelte src/lib/components/TimeDisplay.svelte
+```
+
+Expected shape (approximate, ±10%):
+- `RecipeEditor.svelte`: 628 → ~330–370
+- `RecipeView.svelte`: 398 → ~380
+- `ImageUploadBox.svelte`: ~160
+- `IngredientRow.svelte`: ~110
+- `StepList.svelte`: ~100
+- `TimeDisplay.svelte`: ~30
+
+- [ ] **Step 2: Full test + typecheck**
+
+```bash
+npm test
+npm run check
+```
+
+Both green.
+
+- [ ] **Step 3: Git log review**
+
+```bash
+git log --oneline main..HEAD
+```
+
+Expected 4 commits:
+1. `refactor(editor): ImageUploadBox als eigenstaendige Component`
+2. `refactor(editor): IngredientRow + shared types`
+3. `refactor(editor): StepList als eigenstaendige Component`
+4. `refactor(view): TimeDisplay als eigenstaendige Component`
+
+- [ ] **Step 4: Remote E2E after push**
+
+```bash
+git push -u origin editor-split
+```
+
+CI builds branch-tagged image. After deploy to `kochwas-dev.siegeln.net`:
+
+```bash
+npm run test:e2e:remote
+```
+
+Expected: 40/42 green (same as Search-State-Store baseline). `recipe-detail.spec.ts` (6 tests) specifically exercises the View side — must be clean.
+
+Manual UAT pass on `https://kochwas-dev.siegeln.net/`:
+- Edit a recipe → upload + remove image.
+- Add / reorder / remove an ingredient → save → verify persistence on reload.
+- Add / remove a step → save → verify.
+- Check time-summary rendering on any recipe with prep/cook/total times set.
+
+- [ ] **Step 5: Merge to main**
+
+Once UAT is clean:
+```bash
+git checkout main
+git merge --no-ff editor-split
+git push origin main
+```
+
+---
+
+## Risk Notes
+
+- **Prop-reference mutability.** `IngredientRow` and `StepList` receive `ing` / `steps` by reference and use `bind:value` on their own `<input>` / `<textarea>` elements. Svelte 5 handles this correctly — writes propagate to the parent's `$state` array. Verified pattern with existing `searchFilterStore` usage and similar bind-through-prop in older Svelte 5 components in this codebase.
+- **Confirm-dialog scope.** `ImageUploadBox` imports `confirmAction` directly rather than using a prop-callback. Consistent with the rest of the codebase (`confirmAction` is a global).
+- **Scoped CSS duplication.** `.del` and `.add` button styles exist in multiple sub-components. Accepted — the alternative (global button classes) is out of scope for this phase.
+- **No component unit tests.** Risk: a structural mistake (bad prop passing, missing callback wiring) wouldn't be caught by logic-layer tests. Mitigation: manual smoke test + `npm run check` type-safety + existing e2e coverage on RecipeView side.
+
+## Deferred — NOT in this plan
+
+- **Component unit tests with `@testing-library/svelte`:** Would add Vitest+browser setup. Worth doing in a separate phase once the project acquires a second component-refactor candidate.
+- **Edit-flow E2E spec:** `tests/e2e/remote/recipe-edit.spec.ts` would cover the editor end-to-end. Valuable, but out of scope here — this phase is structural extraction, not test coverage expansion.
+- **Extract `RecipeHero` / `ServingsStepper` / `TabSwitcher` from RecipeView:** Not on the roadmap. Add to a future phase if RecipeView grows further.

docs/superpowers/plans/2026-04-19-ingredient-sections.md

@@ -0,0 +1,634 @@
+# Ingredient Sections Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Zutaten können im Editor in benannte Sektionen (z. B. „Für den Teig", „Für die Füllung") gruppiert werden; in der View werden die Sektionen als Überschriften über den zugehörigen Zutatenblöcken gerendert.
+
+**Architecture:** Eine neue nullable Spalte `section_heading` auf `ingredient`. Ist sie gesetzt, startet an dieser Zeile eine neue Sektion — alle folgenden Zutaten gehören dazu bis zur nächsten Zeile mit gesetzter `section_heading`. Ordnung bleibt `position`. Keine neue Tabelle, keine zweite Ordnungsachse, Scaler/FTS/Importer bleiben unverändert im Verhalten (nur Type-Passthrough). Inline-Button „Abschnitt hinzufügen" erscheint im Editor vor jeder Zutatenzeile und am Listenende.
+
+**Tech Stack:** better-sqlite3 Migration, TypeScript-strict, Svelte 5 runes, vitest.
+
+**Scope-Entscheidungen (vom User bestätigt):**
+- Sektionen **nur für Zutaten**, nicht für Zubereitungsschritte.
+- „Abschnitt hinzufügen"-Button inline vor jeder Zeile (plus einer am Listenende).
+- Keine Import-Extraction — JSON-LD hat keine Sektionen, Emmikochteinfach rendert sie nur im HTML. Später via HTML-Parse möglich, aber out-of-scope.
+
+---
+
+### Task 1: Migration + Type-Erweiterung + parseIngredient-Sites
+
+**Files:**
+- Create: `src/lib/server/db/migrations/012_ingredient_section.sql`
+- Modify: `src/lib/types.ts` (Ingredient type)
+- Modify: `src/lib/server/parsers/ingredient.ts` (3 return sites)
+- Test: `tests/unit/ingredient.test.ts` (bereits existierend, muss grün bleiben)
+
+**Warum zusammen:** Nach der Type-Änderung schlägt `svelte-check` überall fehl, wo ein `Ingredient`-Literal gebaut wird. `parseIngredient` hat 3 solcher Stellen und ist vom selben Commit abhängig, sonst wird der Build rot.
+
+- [ ] **Step 1: Migration schreiben**
+
+Create `src/lib/server/db/migrations/012_ingredient_section.sql`:
+```sql
+-- Nullable — alte Zeilen behalten NULL, neue dürfen eine Überschrift haben.
+-- Rendering-Regel: Ist section_heading gesetzt (nicht NULL und nicht leer),
+-- startet an dieser Zeile eine neue Sektion mit diesem Titel.
+ALTER TABLE ingredient ADD COLUMN section_heading TEXT;
+```
+
+- [ ] **Step 2: Ingredient-Type erweitern**
+
+Modify `src/lib/types.ts`:
+```ts
+export type Ingredient = {
+  position: number;
+  quantity: number | null;
+  unit: string | null;
+  name: string;
+  note: string | null;
+  raw_text: string;
+  section_heading: string | null;
+};
+```
+
+- [ ] **Step 3: parseIngredient-Return-Sites aktualisieren**
+
+Modify `src/lib/server/parsers/ingredient.ts`:
+Alle drei `return { position, ... raw_text: rawText };`-Literale (Zeilen 108, 115, 119) bekommen `section_heading: null` am Ende. Beispiel für Zeile 108:
+```ts
+return { position, quantity, unit, name, note, raw_text: rawText, section_heading: null };
+```
+Analog für Zeilen 115 und 119.
+
+- [ ] **Step 4: Bestehende Unit-Tests grün**
+
+Run: `npm run test -- ingredient.test.ts`
+Expected: PASS (Tests prüfen nur vorhandene Felder, neues Feld stört nicht).
+
+- [ ] **Step 5: Svelte-Check muss noch rot sein**
+
+Run: `npm run check`
+Expected: FAIL mit Fehlern in `repository.ts` (Select-Statement ohne `section_heading`). Das ist erwartet — wird in Task 2 behoben. Nicht hier fixen.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/lib/types.ts src/lib/server/db/migrations/012_ingredient_section.sql src/lib/server/parsers/ingredient.ts
+git commit -m "feat(schema): ingredient.section_heading (Migration 012 + Type)"
+```
+
+---
+
+### Task 2: Repository-Layer Persistenz
+
+**Files:**
+- Modify: `src/lib/server/recipes/repository.ts` (insertRecipe, replaceIngredients, getRecipeById)
+- Test: `tests/integration/recipe-repository.test.ts`
+
+**Warum jetzt:** Nach Task 1 ist der Type-Vertrag aufgemacht. Die DB muss das Feld lesen und schreiben, sonst gehen Sektionen beim Save/Load verloren.
+
+- [ ] **Step 1: Failing test für Roundtrip**
+
+Add to `tests/integration/recipe-repository.test.ts` inside `describe('recipe repository', ...)`:
+```ts
+it('persistiert section_heading und gibt es beim Laden zurück', () => {
+  const db = openInMemoryForTest();
+  const recipe = baseRecipe({
+    title: 'Torte',
+    ingredients: [
+      { position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '200 g Mehl', section_heading: 'Für den Teig' },
+      { position: 2, quantity: 100, unit: 'g', name: 'Zucker', note: null, raw_text: '100 g Zucker', section_heading: null },
+      { position: 3, quantity: 300, unit: 'g', name: 'Beeren', note: null, raw_text: '300 g Beeren', section_heading: 'Für die Füllung' }
+    ]
+  });
+  const id = insertRecipe(db, recipe);
+  const loaded = getRecipeById(db, id);
+  expect(loaded!.ingredients[0].section_heading).toBe('Für den Teig');
+  expect(loaded!.ingredients[1].section_heading).toBeNull();
+  expect(loaded!.ingredients[2].section_heading).toBe('Für die Füllung');
+});
+
+it('replaceIngredients persistiert section_heading', () => {
+  const db = openInMemoryForTest();
+  const id = insertRecipe(db, baseRecipe({ title: 'X' }));
+  replaceIngredients(db, id, [
+    { position: 1, quantity: null, unit: null, name: 'A', note: null, raw_text: 'A', section_heading: 'Kopf' }
+  ]);
+  const loaded = getRecipeById(db, id);
+  expect(loaded!.ingredients[0].section_heading).toBe('Kopf');
+});
+```
+
+- [ ] **Step 2: Test laufen — muss fehlschlagen**
+
+Run: `npm run test -- recipe-repository.test.ts`
+Expected: FAIL — `section_heading` kommt als `undefined` zurück, weil SQL-SELECT es nicht holt.
+
+- [ ] **Step 3: INSERT-Statements erweitern**
+
+Modify `src/lib/server/recipes/repository.ts`:
+
+In `insertRecipe` (line ~66): Spalte + Parameter anhängen.
+```ts
+const insIng = db.prepare(
+  `INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text, section_heading)
+   VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
+);
+for (const ing of recipe.ingredients) {
+  insIng.run(id, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text, ing.section_heading);
+}
+```
+
+In `replaceIngredients` (line ~217): gleiche Änderung.
+```ts
+const ins = db.prepare(
+  `INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text, section_heading)
+   VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
+);
+for (const ing of ingredients) {
+  ins.run(recipeId, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text, ing.section_heading);
+}
+```
+
+- [ ] **Step 4: SELECT-Statement erweitern**
+
+In `getRecipeById` (line ~105):
+```ts
+const ingredients = db
+  .prepare(
+    `SELECT position, quantity, unit, name, note, raw_text, section_heading
+       FROM ingredient WHERE recipe_id = ? ORDER BY position`
+  )
+  .all(id) as Ingredient[];
+```
+
+- [ ] **Step 5: Tests grün**
+
+Run: `npm run test -- recipe-repository.test.ts`
+Expected: PASS.
+
+- [ ] **Step 6: Volle Suite + svelte-check**
+
+Run: `npm test && npm run check`
+Expected: Beides PASS. `svelte-check` ist jetzt auf Repo-Ebene typ-clean; View/Editor noch nicht berührt, deren Nutzung von `Ingredient` bleibt (Feld darf fehlen, weil der Type optional wirkt? — Nein, es ist `string | null`, also **pflicht**. Falls `check` rot wird, liegt es an Importer/Scaler-Aufrufern, die `Ingredient`-Literale bauen. Das ist dann Task 3.)
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/lib/server/recipes/repository.ts tests/integration/recipe-repository.test.ts
+git commit -m "feat(db): section_heading roundtrip in recipe-repository"
+```
+
+---
+
+### Task 3: Importer-Passthrough + Scaler-Test
+
+**Files:**
+- Modify: `src/lib/recipes/scaler.ts` (nur falls Test rot — siehe unten)
+- Test: `tests/unit/scaler.test.ts`
+- Test: evtl. `tests/integration/importer.test.ts`
+
+**Warum:** parseIngredient setzt `section_heading: null` (Task 1). Das reicht für den Importer — keine JSON-LD-Extraction. Aber der Scaler ruft `.map((i) => ({ ...i, quantity: ... }))` auf; das Spread erhält `section_heading` automatisch. Wir fügen nur einen Regressions-Test hinzu, dass das stimmt.
+
+- [ ] **Step 1: Scaler-Regressions-Test**
+
+Add to `tests/unit/scaler.test.ts`:
+```ts
+it('preserves section_heading through scaling', () => {
+  const input: Ingredient[] = [
+    { position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '200 g Mehl', section_heading: 'Teig' },
+    { position: 2, quantity: null, unit: null, name: 'Ei', note: null, raw_text: 'Ei', section_heading: null }
+  ];
+  const scaled = scaleIngredients(input, 2);
+  expect(scaled[0].section_heading).toBe('Teig');
+  expect(scaled[1].section_heading).toBeNull();
+  expect(scaled[0].quantity).toBe(400);
+});
+```
+
+- [ ] **Step 2: Test laufen**
+
+Run: `npm run test -- scaler.test.ts`
+Expected: PASS (weil `...i` das Feld durchreicht).
+
+Falls FAIL: In `src/lib/recipes/scaler.ts` das `.map` prüfen — es sollte `...i` spreaden und nur `quantity` überschreiben. Bei Abweichung angleichen.
+
+- [ ] **Step 3: Importer-Roundtrip-Test (Bolognese-Fixture)**
+
+Prüfen, dass Importer für Emmi-Fixture `section_heading: null` auf allen Zutaten liefert. Der existierende `importer.test.ts` sollte automatisch grün bleiben (parseIngredient setzt das Feld auf null), aber wir schauen kurz nach:
+
+Run: `npm run test -- importer.test.ts`
+Expected: PASS.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add tests/unit/scaler.test.ts
+git commit -m "test(scaler): section_heading ueberlebt Skalierung"
+```
+
+---
+
+### Task 4: IngredientRow — Heading-Anzeige + Inline Insert-Button
+
+**Files:**
+- Modify: `src/lib/components/recipe-editor-types.ts`
+- Modify: `src/lib/components/IngredientRow.svelte`
+- Test: neue Svelte-Component-Tests via vitest-browser — **ausgenommen**: wir haben keine Svelte-Component-Unit-Tests im Repo. Stattdessen decken E2E + manuelle Verifikation ab. Das ist konsistent mit der bestehenden Praxis.
+
+**Verhalten:**
+- `DraftIng` bekommt `section_heading: string | null` (immer gesetzt, aber nullable).
+- Hat eine Zeile `section_heading` als String (auch leer), wird oberhalb der Row ein `<input>` für den Titel gerendert plus ein kleiner „Sektion entfernen"-Button.
+- Hat eine Zeile `section_heading === null`, wird ein dezenter `<button class="add-section">Abschnitt hinzufügen</button>` **über** der Row gerendert.
+- IngredientRow bekommt Callbacks `onaddSection`, `onremoveSection` — Parent verwaltet das Array.
+
+- [ ] **Step 1: DraftIng-Typ erweitern**
+
+Modify `src/lib/components/recipe-editor-types.ts`:
+```ts
+export type DraftIng = {
+  qty: string;
+  unit: string;
+  name: string;
+  note: string;
+  section_heading: string | null;
+};
+export type DraftStep = { text: string };
+```
+
+- [ ] **Step 2: IngredientRow erweitern — Props**
+
+Modify `src/lib/components/IngredientRow.svelte` Script-Block:
+```svelte
+<script lang="ts">
+  import { Trash2, ChevronUp, ChevronDown, Plus, X } from 'lucide-svelte';
+  import type { DraftIng } from './recipe-editor-types';
+
+  type Props = {
+    ing: DraftIng;
+    idx: number;
+    total: number;
+    onmove: (dir: -1 | 1) => void;
+    onremove: () => void;
+    onaddSection: () => void;
+    onremoveSection: () => void;
+  };
+
+  let { ing, idx, total, onmove, onremove, onaddSection, onremoveSection }: Props = $props();
+</script>
+```
+
+- [ ] **Step 3: IngredientRow-Template — Section-Block + Add-Button**
+
+Replace the existing `<li class="ing-row">…</li>` with:
+```svelte
+{#if ing.section_heading === null}
+  <li class="section-insert">
+    <button type="button" class="add-section" onclick={onaddSection}>
+      <Plus size={12} strokeWidth={2.5} />
+      <span>Abschnitt hinzufügen</span>
+    </button>
+  </li>
+{:else}
+  <li class="section-heading-row">
+    <input
+      class="section-heading"
+      type="text"
+      bind:value={ing.section_heading}
+      placeholder="Sektion, z. B. „Für den Teig""
+      aria-label="Sektionsüberschrift"
+    />
+    <button
+      type="button"
+      class="section-remove"
+      aria-label="Sektion entfernen"
+      onclick={onremoveSection}
+    >
+      <X size={14} strokeWidth={2.5} />
+    </button>
+  </li>
+{/if}
+<li class="ing-row">
+  <div class="move">
+    <!-- unchanged -->
+    <button class="move-btn" type="button" aria-label="Zutat nach oben" disabled={idx === 0} onclick={() => onmove(-1)}>
+      <ChevronUp size={14} strokeWidth={2.5} />
+    </button>
+    <button class="move-btn" type="button" aria-label="Zutat nach unten" disabled={idx === total - 1} onclick={() => onmove(1)}>
+      <ChevronDown size={14} strokeWidth={2.5} />
+    </button>
+  </div>
+  <input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
+  <input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
+  <input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
+  <input class="note" type="text" bind:value={ing.note} placeholder="Notiz" aria-label="Notiz" />
+  <button class="del" type="button" aria-label="Zutat entfernen" onclick={onremove}>
+    <Trash2 size={16} strokeWidth={2} />
+  </button>
+</li>
+```
+
+**Hinweis:** Wir rendern pro Row zwei `<li>`: optional einen Sektions-Block (Insert-Button ODER Heading-Input), plus die bestehende Zutaten-Row. Das passt in die `<ul class="ing-list">` des Parents — semantisch unsauber (nicht-Zutat-`<li>` in Zutatenliste), aber praktikabel; alternativ könnte IngredientRow auf `<div>` umgestellt werden, das wäre aber ein Parent-Umbau. Wir bleiben bei `<li>` und geben dem Section-`<li>` `list-style: none` via CSS.
+
+- [ ] **Step 4: Styles für Section-UI**
+
+Add to `<style>`-Block in `IngredientRow.svelte`:
+```css
+.section-insert {
+  display: flex;
+  justify-content: center;
+  list-style: none;
+  margin: -0.2rem 0 0.1rem;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.ing-list:hover .section-insert,
+.section-insert:focus-within {
+  opacity: 1;
+}
+.add-section {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.2rem 0.55rem;
+  border: 1px dashed #cfd9d1;
+  background: white;
+  color: #2b6a3d;
+  border-radius: 999px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-family: inherit;
+}
+.add-section:hover {
+  background: #f4f8f5;
+}
+.section-heading-row {
+  display: grid;
+  grid-template-columns: 1fr 32px;
+  gap: 0.35rem;
+  list-style: none;
+  margin-top: 0.4rem;
+}
+.section-heading {
+  padding: 0.45rem 0.7rem;
+  border: 1px solid #cfd9d1;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #2b6a3d;
+  font-family: inherit;
+  background: #f4f8f5;
+}
+.section-remove {
+  width: 32px;
+  height: 38px;
+  border: 1px solid #cfd9d1;
+  background: white;
+  border-radius: 8px;
+  color: #666;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.section-remove:hover {
+  background: #fdf3f3;
+  border-color: #f1b4b4;
+  color: #c53030;
+}
+```
+
+**Begründung `opacity: 0` + Hover:** Der Insert-Button erscheint vor **jeder** Zeile — das ist visuelles Rauschen auf statischem Zustand. Fade-in-on-hover hält die Zutatenliste lesbar und macht den Button auf Mouse-Interaktion trotzdem sichtbar. Auf Touch-Geräten ist `:hover` ggf. sticky — das ist OK, weil auf Mobile die Zutatenliste ohnehin explorativ bedient wird. `:focus-within` deckt Keyboard-Navigation ab.
+
+- [ ] **Step 5: svelte-check**
+
+Run: `npm run check`
+Expected: FAIL — `RecipeEditor.svelte` gibt die neuen Callbacks `onaddSection` / `onremoveSection` noch nicht rein, und `DraftIng`-Literale im Editor haben noch kein `section_heading`. Wird in Task 5 behoben.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/lib/components/IngredientRow.svelte src/lib/components/recipe-editor-types.ts
+git commit -m "feat(editor): Sektionsueberschriften in IngredientRow + Insert-Button"
+```
+
+---
+
+### Task 5: RecipeEditor — State, Handler, Save-Patch
+
+**Files:**
+- Modify: `src/lib/components/RecipeEditor.svelte`
+
+- [ ] **Step 1: DraftIng-Seeding erweitern**
+
+In `RecipeEditor.svelte` Script-Block, `ingredients`-State (line ~40):
+```ts
+let ingredients = $state<DraftIng[]>(
+  untrack(() =>
+    recipe.ingredients.map((i) => ({
+      qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
+      unit: i.unit ?? '',
+      name: i.name,
+      note: i.note ?? '',
+      section_heading: i.section_heading
+    }))
+  )
+);
+```
+
+- [ ] **Step 2: addIngredient aktualisieren**
+
+```ts
+function addIngredient() {
+  ingredients = [...ingredients, { qty: '', unit: '', name: '', note: '', section_heading: null }];
+}
+```
+
+- [ ] **Step 3: Section-Handler einfügen**
+
+```ts
+function addSection(idx: number) {
+  const next = [...ingredients];
+  next[idx] = { ...next[idx], section_heading: '' };
+  ingredients = next;
+}
+function removeSection(idx: number) {
+  const next = [...ingredients];
+  next[idx] = { ...next[idx], section_heading: null };
+  ingredients = next;
+}
+```
+
+- [ ] **Step 4: save()-Patch erweitern**
+
+In `save()` (line ~86), das `cleanedIngredients`-Mapping:
+```ts
+const cleanedIngredients: Ingredient[] = ingredients
+  .filter((i) => i.name.trim())
+  .map((i, idx) => {
+    const qty = parseQty(i.qty);
+    const unit = i.unit.trim() || null;
+    const name = i.name.trim();
+    const note = i.note.trim() || null;
+    const rawParts: string[] = [];
+    if (qty !== null) rawParts.push(String(qty).replace('.', ','));
+    if (unit) rawParts.push(unit);
+    rawParts.push(name);
+    const heading = i.section_heading === null ? null : (i.section_heading.trim() || null);
+    return {
+      position: idx + 1,
+      quantity: qty,
+      unit,
+      name,
+      note,
+      raw_text: rawParts.join(' '),
+      section_heading: heading
+    };
+  });
+```
+
+**Regel:** Eine leere Sektion (`section_heading === ''` nach Trim) wird beim Speichern zu `null`. Begründung: User tippt „Abschnitt hinzufügen" und lässt das Feld leer → keine unbenannte Sektion in der View. Nur Zeilen mit echtem Titel werden als Sektionsanker persistiert.
+
+- [ ] **Step 5: IngredientRow-Callbacks verdrahten**
+
+In `RecipeEditor.svelte` Template (line ~170):
+```svelte
+{#each ingredients as ing, idx (idx)}
+  <IngredientRow
+    {ing}
+    {idx}
+    total={ingredients.length}
+    onmove={(dir) => moveIngredient(idx, dir)}
+    onremove={() => removeIngredient(idx)}
+    onaddSection={() => addSection(idx)}
+    onremoveSection={() => removeSection(idx)}
+  />
+{/each}
+```
+
+- [ ] **Step 6: svelte-check + Tests**
+
+Run: `npm run check && npm test`
+Expected: Beides grün.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/lib/components/RecipeEditor.svelte
+git commit -m "feat(editor): Sektionen-Handler + save-Patch mit section_heading"
+```
+
+---
+
+### Task 6: RecipeView — Sektions-Überschriften rendern
+
+**Files:**
+- Modify: `src/lib/components/RecipeView.svelte`
+
+- [ ] **Step 1: Zutatenliste umbauen**
+
+In `RecipeView.svelte` (line ~128), den `<ul class="ing-list">`-Block:
+
+```svelte
+<ul class="ing-list">
+  {#each scaled as ing, i (i)}
+    {#if ing.section_heading && ing.section_heading.trim()}
+      <li class="section-heading">{ing.section_heading}</li>
+    {/if}
+    <li>
+      {#if ing.quantity !== null || ing.unit}
+        <span class="qty">
+          {formatQty(ing.quantity)}
+          {#if ing.unit}
+            {' '}{ing.unit}
+          {/if}
+        </span>
+      {/if}
+      <span class="name">
+        {ing.name}
+        {#if ing.note}<span class="note"> ({ing.note})</span>{/if}
+      </span>
+    </li>
+  {/each}
+</ul>
+```
+
+**Hinweis:** `<li class="section-heading">` statt `<h3>` — wir sind in einer `<ul>` und dürfen dort nur `<li>` direkt verschachteln. Semantisch ist das OK, Screenreader lesen die Heading-Klasse nicht als Landmark, aber sie liest den Text als normales Listen-Item; für ein Rezept ist das akzeptabel. Alternativ: `<ul>` in mehrere `<section>`s aufsplitten — deutlich komplexer bei gleicher visueller Wirkung; verschoben, bis jemand klagt.
+
+- [ ] **Step 2: Style für .section-heading**
+
+Add to `<style>`-Block in `RecipeView.svelte`:
+```css
+.ing-list .section-heading {
+  list-style: none;
+  font-weight: 600;
+  color: #2b6a3d;
+  font-size: 1rem;
+  margin-top: 0.9rem;
+  margin-bottom: 0.2rem;
+  padding: 0.15rem 0;
+  border-bottom: 1px solid #e4eae7;
+}
+.ing-list .section-heading:first-child {
+  margin-top: 0;
+}
+```
+
+- [ ] **Step 3: Tests + Check**
+
+Run: `npm run check && npm test`
+Expected: Beides grün.
+
+- [ ] **Step 4: Dev-Build-Smoke-Test**
+
+Run: `npm run build && npm run preview`
+Manuell: Rezept öffnen, editieren, Sektion „Teig" auf Zeile 1 setzen und „Füllung" auf Zeile 3, speichern. Wechsel zu View → beide Überschriften sichtbar, Skalierung ändert nur Mengen. Screenshot ist nice-to-have, nicht Pflicht.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/lib/components/RecipeView.svelte
+git commit -m "feat(view): Zutaten-Sektionen als Ueberschriften rendern"
+```
+
+---
+
+### Task 7: Ship
+
+- [ ] **Step 1: Finale Testsuite**
+
+Run: `npm run check && npm test`
+Expected: Beides grün.
+
+- [ ] **Step 2: Push**
+
+```bash
+git push -u origin feature/ingredient-sections
+```
+
+- [ ] **Step 3: Auf Deploy warten (CI-Image-Build, Pi-Pull)**
+
+User wird manuell signalisieren, wenn deployed.
+
+- [ ] **Step 4: Nach Deploy — Playwright Remote-Smoke**
+
+Run: `npm run test:e2e:remote`
+Expected: 42/42 green (unchanged suite, wir haben keine Recipe-Edit-E2E-Tests hinzugefügt).
+
+- [ ] **Step 5: Merge zu main**
+
+Falls E2E grün:
+```bash
+git checkout main
+git merge --no-ff feature/ingredient-sections -m "Merge ingredient-sections — Zutaten-Gruppierung via section_heading"
+git push
+```
+
+---
+
+## Self-Review-Notiz
+
+- Spec-Coverage: alle drei User-Anforderungen abgedeckt (Inline-Button vor jeder Zeile → Task 4, nur Zutaten → keine Step-Änderungen, Edit-Mode-only → Importer unverändert).
+- Type-Konsistenz: `section_heading: string | null` überall einheitlich (Ingredient, DraftIng, Save-Patch).
+- Keine Placeholder — alle SQL-/Code-Snippets ausgeschrieben.
+- Migrations-Reihenfolge: `012_` nach `011_clear_favicon_for_rerun.sql`.
+- FTS-Impact: `section_heading` taucht nicht im FTS-Trigger auf (`001_init.sql` nutzt `name`, `description`, `ingredients_concat`, `tags_concat`). Das ist bewusst so — Sektionstitel sind Organisationshilfen, kein Suchinhalt. User suchen nach „Mehl", nicht nach „Für den Teig".

docs/superpowers/plans/2026-04-19-search-state-store.md

@@ -0,0 +1,971 @@
+# Search-State-Store Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use `superpowers:executing-plans` to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Extract the duplicated live-search state machine from `src/routes/+page.svelte` and `src/routes/+layout.svelte` into a single reusable `SearchStore` class in `src/lib/client/search.svelte.ts`, so both the home search and the header dropdown drive their UI from the same logic.
+
+**Architecture:** Factory-class store (one instance per consumer, like `new SearchStore()` — not a shared singleton). Holds all `$state` fields currently inlined in the Svelte components (query, hits, webHits, searching flags, error, pagination state), plus imperative methods (`runDebounced`, `loadMore`, `reSearch`, `reset`, `captureSnapshot`, `restoreSnapshot`). Consumers keep UI-specific concerns (URL sync, dropdown open/close, snapshot hookup) in their component — the store owns only fetch/pagination/debounce.
+
+**Tech Stack:** Svelte 5 runes (`$state` in class fields), TypeScript-strict, Vitest + jsdom, fetch injection for tests.
+
+---
+
+## Design Snapshot
+
+**API surface (locked before implementation):**
+
+```ts
+// src/lib/client/search.svelte.ts
+import type { SearchHit } from '$lib/server/recipes/search-local';
+import type { WebHit } from '$lib/server/search/searxng';
+
+export type SearchSnapshot = {
+  query: string;
+  hits: SearchHit[];
+  webHits: WebHit[];
+  searchedFor: string | null;
+  webError: string | null;
+  localExhausted: boolean;
+  webPageno: number;
+  webExhausted: boolean;
+};
+
+export type SearchStoreOptions = {
+  pageSize?: number;              // default 30
+  debounceMs?: number;            // default 300
+  filterDebounceMs?: number;      // default 150 (shorter for filter-change re-search)
+  minQueryLength?: number;        // default 4 (query.trim().length > 3)
+  filterParam?: () => string;     // e.g. () => searchFilterStore.queryParam → "foo,bar" or ""
+  fetchImpl?: typeof fetch;       // injected for tests
+};
+
+export class SearchStore {
+  query = $state('');
+  hits = $state<SearchHit[]>([]);
+  webHits = $state<WebHit[]>([]);
+  searching = $state(false);
+  webSearching = $state(false);
+  webError = $state<string | null>(null);
+  searchedFor = $state<string | null>(null);
+  localExhausted = $state(false);
+  webPageno = $state(0);
+  webExhausted = $state(false);
+  loadingMore = $state(false);
+
+  constructor(opts?: SearchStoreOptions);
+
+  /** Call from `$effect(() => { store.query; store.runDebounced(); })`. Handles debounce + race-guard. */
+  runDebounced(): void;
+  /** Immediate (no debounce). Used by form `submit`. */
+  runSearch(q: string): Promise<void>;
+  /** Filter-change re-search — shorter debounce. */
+  reSearch(): void;
+  /** Paginate locally, then fall back to web. Idempotent while in-flight. */
+  loadMore(): Promise<void>;
+  /** Clear query + results + cancel any pending debounce (e.g. `afterNavigate`). */
+  reset(): void;
+  /** For SvelteKit `Snapshot<>` API. */
+  captureSnapshot(): SearchSnapshot;
+  restoreSnapshot(s: SearchSnapshot): void;
+}
+```
+
+**Behavior invariants (copied 1:1 from the current code — do NOT change):**
+- Query threshold: `trim().length > 3` triggers search, `<= 3` clears results.
+- Race-guard: after every `await fetch(...)`, bail if `this.query.trim() !== q`.
+- When `hits.length === 0` after local search → auto-fire web search page 1.
+- `loadMore`: first drains local (offset pagination), then switches to web (pageno pagination).
+- Dedup: local by `id`, web by `url`.
+- `webError`: keep the message text so UI can render it.
+
+**What stays OUT of the store:**
+- URL sync (`history.replaceState` with `?q=`) → stays in `+page.svelte`.
+- Dropdown visibility (`navOpen`) → stays in `+layout.svelte`.
+- `afterNavigate`-reset wiring → stays in `+layout.svelte`, just calls `store.reset()`.
+- SvelteKit `Snapshot<>` wiring → stays in `+page.svelte`, delegates to store.
+- Filter-change re-search `$effect` → stays in `+page.svelte`, just calls `store.reSearch()`.
+
+---
+
+## Task 1: Failing Unit Tests for SearchStore
+
+**Files:**
+- Create: `tests/unit/search-store.test.ts`
+
+- [ ] **Step 1: Write test file with full behavior coverage (runs red until Task 2)**
+
+```ts
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { SearchStore } from '../../src/lib/client/search.svelte';
+
+type FetchMock = ReturnType<typeof vi.fn>;
+
+function mockFetch(responses: Array<{ ok?: boolean; status?: number; body: unknown }>): FetchMock {
+  const calls = [...responses];
+  return vi.fn(async () => {
+    const r = calls.shift();
+    if (!r) throw new Error('fetch called more times than expected');
+    return {
+      ok: r.ok ?? true,
+      status: r.status ?? 200,
+      json: async () => r.body
+    } as Response;
+  });
+}
+
+describe('SearchStore', () => {
+  beforeEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('keeps results empty while query is <= 3 chars (debounced)', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    store.query = 'abc';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(100);
+    expect(store.searching).toBe(false);
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+
+  it('fires local search after debounce when query > 3 chars', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [{ id: 1, title: 'Pasta', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50, pageSize: 30 });
+    store.query = 'pasta';
+    store.runDebounced();
+    expect(store.searching).toBe(true);
+    await vi.advanceTimersByTimeAsync(100);
+    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
+    expect(fetchImpl.mock.calls[0][0]).toMatch(/\/api\/recipes\/search\?q=pasta&limit=30/);
+    expect(store.hits).toHaveLength(1);
+    expect(store.searchedFor).toBe('pasta');
+    expect(store.localExhausted).toBe(true); // 1 hit < pageSize → exhausted
+  });
+
+  it('falls back to web search when local returns zero hits', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [{ url: 'https://chefkoch.de/x', title: 'Foo', domain: 'chefkoch.de', snippet: null, thumbnail: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    store.query = 'pizza';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(100);
+    await vi.waitFor(() => expect(store.webHits).toHaveLength(1));
+    expect(fetchImpl).toHaveBeenCalledTimes(2);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/\/api\/recipes\/search\/web\?q=pizza&pageno=1/);
+    expect(store.webPageno).toBe(1);
+  });
+
+  it('races-guards: stale response discarded when query changed mid-flight', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [{ id: 99, title: 'Stale', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
+    store.query = 'stale-query';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    store.query = 'different'; // user kept typing
+    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalled());
+    expect(store.hits).toEqual([]); // stale discarded
+  });
+
+  it('loadMore: drains local first (offset pagination)', async () => {
+    vi.useFakeTimers();
+    const page1 = Array.from({ length: 30 }, (_, i) => ({ id: i, title: `r${i}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
+    const page2 = Array.from({ length: 5 }, (_, i) => ({ id: i + 30, title: `r${i + 30}`, description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }));
+    const fetchImpl = mockFetch([
+      { body: { hits: page1 } },
+      { body: { hits: page2 } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
+    store.query = 'meal';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(30));
+    expect(store.localExhausted).toBe(false);
+    await store.loadMore();
+    expect(store.hits).toHaveLength(35);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/offset=30/);
+    expect(store.localExhausted).toBe(true);
+  });
+
+  it('loadMore: switches to web pagination after local exhausted', async () => {
+    vi.useFakeTimers();
+    const local = [{ id: 1, title: 'local', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }];
+    const webP1 = [{ url: 'https://a.com', title: 'A', domain: 'a.com', snippet: null, thumbnail: null }];
+    const webP2 = [{ url: 'https://b.com', title: 'B', domain: 'b.com', snippet: null, thumbnail: null }];
+    const fetchImpl = mockFetch([
+      { body: { hits: local } },
+      { body: { hits: webP1 } },   // auto-fallback? No — local has 1 hit, so no fallback.
+      { body: { hits: webP2 } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10, pageSize: 30 });
+    store.query = 'soup';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
+    expect(store.localExhausted).toBe(true);
+    await store.loadMore(); // web pageno=1
+    expect(store.webHits).toHaveLength(1);
+    await store.loadMore(); // web pageno=2
+    expect(store.webHits).toHaveLength(2);
+    expect(store.webPageno).toBe(2);
+  });
+
+  it('web search error sets webError and marks webExhausted', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { ok: false, status: 502, body: { message: 'SearXNG unreachable' } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
+    store.query = 'anything';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(store.webError).toBe('SearXNG unreachable'));
+    expect(store.webExhausted).toBe(true);
+  });
+
+  it('reset(): clears query, results, and pending debounce', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 100 });
+    store.query = 'foobar';
+    store.runDebounced();
+    store.reset();
+    await vi.advanceTimersByTimeAsync(200);
+    expect(store.query).toBe('');
+    expect(store.hits).toEqual([]);
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+
+  it('captureSnapshot / restoreSnapshot: round-trips without re-fetching', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 50 });
+    const snap: SearchSnapshot = {
+      query: 'lasagne',
+      hits: [{ id: 7, title: 'Lasagne', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }],
+      webHits: [],
+      searchedFor: 'lasagne',
+      webError: null,
+      localExhausted: true,
+      webPageno: 0,
+      webExhausted: false
+    };
+    store.restoreSnapshot(snap);
+    expect(store.query).toBe('lasagne');
+    expect(store.hits).toHaveLength(1);
+    store.runDebounced(); // should NOT re-fetch after restore
+    await vi.advanceTimersByTimeAsync(100);
+    expect(fetchImpl).not.toHaveBeenCalled();
+    const round = store.captureSnapshot();
+    expect(round).toEqual(snap);
+  });
+
+  it('filterParam option: gets appended to both local and web requests', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [] } }
+    ]);
+    const store = new SearchStore({
+      fetchImpl,
+      debounceMs: 10,
+      filterParam: () => '&domains=chefkoch.de'
+    });
+    store.query = 'curry';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    await vi.waitFor(() => expect(fetchImpl).toHaveBeenCalledTimes(2));
+    expect(fetchImpl.mock.calls[0][0]).toMatch(/&domains=chefkoch\.de/);
+    expect(fetchImpl.mock.calls[1][0]).toMatch(/&domains=chefkoch\.de/);
+  });
+
+  it('reSearch: immediate re-run with current query on filter change', async () => {
+    vi.useFakeTimers();
+    let filter = '';
+    const fetchImpl = mockFetch([
+      { body: { hits: [] } },
+      { body: { hits: [] } },
+      { body: { hits: [{ id: 1, title: 'filtered', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({
+      fetchImpl,
+      debounceMs: 10,
+      filterDebounceMs: 5,
+      filterParam: () => filter
+    });
+    store.query = 'broth';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    // Simulate filter change
+    filter = '&domains=chefkoch.de';
+    store.reSearch();
+    await vi.advanceTimersByTimeAsync(10);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
+    // Last call should have filter param
+    const last = fetchImpl.mock.calls.at(-1)?.[0] as string;
+    expect(last).toMatch(/&domains=chefkoch\.de/);
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify all fail with "SearchStore is not a constructor" or "Cannot find module"**
+
+```bash
+npm test -- search-store.test
+```
+
+Expected: 12 tests, all failing because `src/lib/client/search.svelte.ts` doesn't exist yet.
+
+---
+
+## Task 2: Implement SearchStore to pass tests
+
+**Files:**
+- Create: `src/lib/client/search.svelte.ts`
+
+- [ ] **Step 1: Scaffold the class + types**
+
+Create `src/lib/client/search.svelte.ts` with this content:
+
+```ts
+import type { SearchHit } from '$lib/server/recipes/search-local';
+import type { WebHit } from '$lib/server/search/searxng';
+
+export type SearchSnapshot = {
+  query: string;
+  hits: SearchHit[];
+  webHits: WebHit[];
+  searchedFor: string | null;
+  webError: string | null;
+  localExhausted: boolean;
+  webPageno: number;
+  webExhausted: boolean;
+};
+
+export type SearchStoreOptions = {
+  pageSize?: number;
+  debounceMs?: number;
+  filterDebounceMs?: number;
+  minQueryLength?: number;
+  filterParam?: () => string;
+  fetchImpl?: typeof fetch;
+};
+
+export class SearchStore {
+  query = $state('');
+  hits = $state<SearchHit[]>([]);
+  webHits = $state<WebHit[]>([]);
+  searching = $state(false);
+  webSearching = $state(false);
+  webError = $state<string | null>(null);
+  searchedFor = $state<string | null>(null);
+  localExhausted = $state(false);
+  webPageno = $state(0);
+  webExhausted = $state(false);
+  loadingMore = $state(false);
+
+  private readonly pageSize: number;
+  private readonly debounceMs: number;
+  private readonly filterDebounceMs: number;
+  private readonly minQueryLength: number;
+  private readonly filterParam: () => string;
+  private readonly fetchImpl: typeof fetch;
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private skipNextDebounce = false;
+
+  constructor(opts: SearchStoreOptions = {}) {
+    this.pageSize = opts.pageSize ?? 30;
+    this.debounceMs = opts.debounceMs ?? 300;
+    this.filterDebounceMs = opts.filterDebounceMs ?? 150;
+    this.minQueryLength = opts.minQueryLength ?? 4;
+    this.filterParam = opts.filterParam ?? (() => '');
+    this.fetchImpl = opts.fetchImpl ?? ((...a) => fetch(...a));
+  }
+}
+```
+
+- [ ] **Step 2: Implement `runDebounced`, `runSearch`, private `runWebSearch`**
+
+Add to the class:
+
+```ts
+  runDebounced(): void {
+    // Consumer pattern:
+    //   $effect(() => { store.query; store.runDebounced(); });
+    // The bare `store.query` read registers the reactive dep; this method
+    // then reads `this.query` live to kick off / debounce the search.
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    if (this.skipNextDebounce) {
+      this.skipNextDebounce = false;
+      return;
+    }
+    const q = this.query.trim();
+    if (q.length < this.minQueryLength) {
+      this.resetResults();
+      return;
+    }
+    this.searching = true;
+    this.webHits = [];
+    this.webSearching = false;
+    this.webError = null;
+    this.debounceTimer = setTimeout(() => {
+      void this.runSearch(q);
+    }, this.debounceMs);
+  }
+
+  async runSearch(q: string): Promise<void> {
+    this.localExhausted = false;
+    this.webPageno = 0;
+    this.webExhausted = false;
+    try {
+      const res = await this.fetchImpl(
+        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}${this.filterParam()}`
+      );
+      const body = (await res.json()) as { hits: SearchHit[] };
+      if (this.query.trim() !== q) return;
+      this.hits = body.hits;
+      this.searchedFor = q;
+      if (this.hits.length < this.pageSize) this.localExhausted = true;
+      if (this.hits.length === 0) {
+        await this.runWebSearch(q, 1);
+      }
+    } finally {
+      if (this.query.trim() === q) this.searching = false;
+    }
+  }
+
+  private async runWebSearch(q: string, pageno: number): Promise<void> {
+    this.webSearching = true;
+    try {
+      const res = await this.fetchImpl(
+        `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${pageno}${this.filterParam()}`
+      );
+      if (this.query.trim() !== q) return;
+      if (!res.ok) {
+        const err = (await res.json().catch(() => ({}))) as { message?: string };
+        this.webError = err.message ?? `HTTP ${res.status}`;
+        this.webExhausted = true;
+        return;
+      }
+      const body = (await res.json()) as { hits: WebHit[] };
+      this.webHits = pageno === 1 ? body.hits : [...this.webHits, ...body.hits];
+      this.webPageno = pageno;
+      if (body.hits.length === 0) this.webExhausted = true;
+    } finally {
+      if (this.query.trim() === q) this.webSearching = false;
+    }
+  }
+```
+
+- [ ] **Step 3: Implement `loadMore`**
+
+```ts
+  async loadMore(): Promise<void> {
+    if (this.loadingMore) return;
+    const q = this.query.trim();
+    if (!q) return;
+    this.loadingMore = true;
+    try {
+      if (!this.localExhausted) {
+        const res = await this.fetchImpl(
+          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}&offset=${this.hits.length}${this.filterParam()}`
+        );
+        const body = (await res.json()) as { hits: SearchHit[] };
+        if (this.query.trim() !== q) return;
+        const more = body.hits;
+        const seen = new Set(this.hits.map((h) => h.id));
+        const deduped = more.filter((h) => !seen.has(h.id));
+        this.hits = [...this.hits, ...deduped];
+        if (more.length < this.pageSize) this.localExhausted = true;
+      } else if (!this.webExhausted) {
+        const nextPage = this.webPageno + 1;
+        const wasEmpty = this.webHits.length === 0;
+        if (wasEmpty) this.webSearching = true;
+        try {
+          const res = await this.fetchImpl(
+            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${this.filterParam()}`
+          );
+          if (this.query.trim() !== q) return;
+          if (!res.ok) {
+            const err = (await res.json().catch(() => ({}))) as { message?: string };
+            this.webError = err.message ?? `HTTP ${res.status}`;
+            this.webExhausted = true;
+            return;
+          }
+          const body = (await res.json()) as { hits: WebHit[] };
+          const more = body.hits;
+          const seen = new Set(this.webHits.map((h) => h.url));
+          const deduped = more.filter((h) => !seen.has(h.url));
+          if (deduped.length === 0) {
+            this.webExhausted = true;
+          } else {
+            this.webHits = [...this.webHits, ...deduped];
+            this.webPageno = nextPage;
+          }
+        } finally {
+          if (this.query.trim() === q) this.webSearching = false;
+        }
+      }
+    } finally {
+      this.loadingMore = false;
+    }
+  }
+```
+
+- [ ] **Step 4: Implement `reSearch`, `reset`, `resetResults`, snapshot methods**
+
+```ts
+  reSearch(): void {
+    const q = this.query.trim();
+    if (q.length < this.minQueryLength) return;
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.searching = true;
+    this.webHits = [];
+    this.webSearching = false;
+    this.webError = null;
+    this.debounceTimer = setTimeout(() => void this.runSearch(q), this.filterDebounceMs);
+  }
+
+  reset(): void {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = null;
+    this.query = '';
+    this.resetResults();
+  }
+
+  private resetResults(): void {
+    this.hits = [];
+    this.webHits = [];
+    this.searchedFor = null;
+    this.searching = false;
+    this.webSearching = false;
+    this.webError = null;
+    this.localExhausted = false;
+    this.webPageno = 0;
+    this.webExhausted = false;
+  }
+
+  captureSnapshot(): SearchSnapshot {
+    return {
+      query: this.query,
+      hits: this.hits,
+      webHits: this.webHits,
+      searchedFor: this.searchedFor,
+      webError: this.webError,
+      localExhausted: this.localExhausted,
+      webPageno: this.webPageno,
+      webExhausted: this.webExhausted
+    };
+  }
+
+  restoreSnapshot(s: SearchSnapshot): void {
+    this.skipNextDebounce = true;
+    this.query = s.query;
+    this.hits = s.hits;
+    this.webHits = s.webHits;
+    this.searchedFor = s.searchedFor;
+    this.webError = s.webError;
+    this.localExhausted = s.localExhausted;
+    this.webPageno = s.webPageno;
+    this.webExhausted = s.webExhausted;
+  }
+```
+
+- [ ] **Step 5: Run tests, iterate until all green**
+
+```bash
+npm test -- search-store.test
+```
+
+Expected: all 12 tests pass.
+
+- [ ] **Step 6: `npm run check`**
+
+```bash
+npm run check
+```
+
+Expected: 0 errors, 0 warnings in `search.svelte.ts`.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/lib/client/search.svelte.ts tests/unit/search-store.test.ts
+git commit -m "feat(search): SearchStore fuer Live-Search mit Web-Fallback
+
+Extrahiert die duplizierte Such-Logik aus +page.svelte und
++layout.svelte in eine gemeinsame Klasse. Pure Datenschicht
+mit injizierbarem fetch — UI-Concerns (URL-Sync, Dropdown,
+Snapshot) bleiben in den Komponenten."
+```
+
+---
+
+## Task 3: Migrate `+layout.svelte` header dropdown
+
+**Why first:** Smaller surface than `+page.svelte`, no snapshot API, no URL sync. If the store is wrong, here we find out with less code at risk.
+
+**Files:**
+- Modify: `src/routes/+layout.svelte:20-200`
+
+- [ ] **Step 1: Add import**
+
+At the top of `<script>`:
+```ts
+import { SearchStore } from '$lib/client/search.svelte';
+import { searchFilterStore } from '$lib/client/search-filter.svelte';
+```
+(Latter is already imported — just confirm.)
+
+- [ ] **Step 2: Replace the 11 `$state` declarations (navQuery, navHits, navWebHits, navSearching, navWebSearching, navWebError, navLocalExhausted, navWebPageno, navWebExhausted, navLoadingMore, debounceTimer) with one store instance.**
+
+Keep these (UI-only): `navOpen`, `navContainer`, `menuOpen`, `menuContainer`.
+
+New:
+```ts
+const navStore = new SearchStore({
+  pageSize: 30,
+  filterParam: () => {
+    const p = searchFilterStore.queryParam;
+    return p ? `&domains=${encodeURIComponent(p)}` : '';
+  }
+});
+```
+
+Remove the local `filterParam()` helper — the store owns it now.
+
+- [ ] **Step 3: Replace the big `$effect` (lines 52–109) with a 3-line `$effect`**
+
+```ts
+$effect(() => {
+  // Bare reads register the reactive deps; then kick the store.
+  const q = navStore.query;
+  navStore.runDebounced();
+  // navOpen follows query length: open while typing, close when cleared.
+  navOpen = q.trim().length > 3;
+});
+```
+
+- [ ] **Step 4: Replace `loadMoreNav` function (lines 111–159) with a pass-through**
+
+```ts
+function loadMoreNav() {
+  return navStore.loadMore();
+}
+```
+
+Or inline `onclick={() => navStore.loadMore()}` at the call-site — pick the less disruptive option when looking at the template.
+
+- [ ] **Step 5: Replace `submitNav` (lines 161–167)**
+
+```ts
+function submitNav(e: SubmitEvent) {
+  e.preventDefault();
+  const q = navStore.query.trim();
+  if (!q) return;
+  navOpen = false;
+  void goto(`/?q=${encodeURIComponent(q)}`);
+}
+```
+
+- [ ] **Step 6: Replace `pickHit` (lines 185–190)**
+
+```ts
+function pickHit() {
+  navOpen = false;
+  navStore.reset();
+}
+```
+
+- [ ] **Step 7: Update `afterNavigate` (lines 192+)**
+
+```ts
+afterNavigate(() => {
+  navStore.reset();
+  navOpen = false;
+  menuOpen = false;
+  // ... rest of existing body (wishlist refresh etc.)
+});
+```
+
+- [ ] **Step 8: Update the template**
+
+Every `navQuery` → `navStore.query`, every `navHits` → `navStore.hits`, etc. This is a mechanical rename — use find+replace scoped to `src/routes/+layout.svelte` only.
+
+Mapping:
+- `navQuery` → `navStore.query`
+- `navHits` → `navStore.hits`
+- `navWebHits` → `navStore.webHits`
+- `navSearching` → `navStore.searching`
+- `navWebSearching` → `navStore.webSearching`
+- `navWebError` → `navStore.webError`
+- `navLocalExhausted` → `navStore.localExhausted`
+- `navWebPageno` → `navStore.webPageno` (if referenced in template)
+- `navWebExhausted` → `navStore.webExhausted`
+- `navLoadingMore` → `navStore.loadingMore`
+
+`bind:value={navQuery}` on the `<input>` → `bind:value={navStore.query}`.
+
+- [ ] **Step 9: Run checks**
+
+```bash
+npm run check
+npm test
+```
+
+Both must be clean.
+
+- [ ] **Step 10: Smoke-test dev server manually**
+
+```bash
+npm run dev
+```
+
+Open a recipe page → type in header dropdown → verify: dropdown opens, shows local hits, falls back to web for unknown query, "+ weitere Ergebnisse" paginates, clicking a hit closes the dropdown, navigating back/forward clears the dropdown.
+
+- [ ] **Step 11: Commit**
+
+```bash
+git add src/routes/+layout.svelte
+git commit -m "refactor(layout): Header-Dropdown nutzt SearchStore
+
+Ersetzt die 11 lokalen \$state und den Debounce-Effect durch
+eine SearchStore-Instanz. Nav-Open-Toggle bleibt lokal, weil
+UI-Concern."
+```
+
+---
+
+## Task 4: Migrate `+page.svelte` home
+
+**Why after Task 3:** The store is now field-tested. Home adds snapshot + URL sync + filter-change re-search on top.
+
+**Files:**
+- Modify: `src/routes/+page.svelte:1-371`
+
+- [ ] **Step 1: Add imports**
+
+```ts
+import { SearchStore, type SearchSnapshot } from '$lib/client/search.svelte';
+```
+
+- [ ] **Step 2: Remove the duplicated `$state` block (lines 17–32)**
+
+Delete: `query`, `hits`, `webHits`, `searching`, `webSearching`, `webError`, `searchedFor`, `localExhausted`, `webPageno`, `webExhausted`, `loadingMore`, `skipNextSearch`, `debounceTimer`.
+
+Keep: `quote`, `recent`, `favorites` (not search-related), and all `all*` state (All-Recipes listing — unrelated to search).
+
+Add:
+```ts
+const store = new SearchStore({
+  pageSize: LOCAL_PAGE,
+  filterParam: () => {
+    const p = searchFilterStore.queryParam;
+    return p ? `&domains=${encodeURIComponent(p)}` : '';
+  }
+});
+```
+
+Remove the local `filterParam()` helper (lines 224–227).
+
+- [ ] **Step 3: Rewire the `Snapshot<>` API (lines 50–83)**
+
+```ts
+export const snapshot: Snapshot<SearchSnapshot> = {
+  capture: () => store.captureSnapshot(),
+  restore: (s) => store.restoreSnapshot(s)
+};
+```
+
+Delete the old `SearchSnapshot` local type alias (it's now imported).
+
+- [ ] **Step 4: Replace the two search `$effect`s (filter-change + query-change) with two one-liners**
+
+Remove lines 188–199 (filter-change effect) and lines 322–347 (query-change effect).
+
+Add:
+```ts
+$effect(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  store.query; // register reactive dep
+  store.runDebounced();
+});
+
+$effect(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  searchFilterStore.active;
+  store.reSearch();
+});
+```
+
+- [ ] **Step 5: Keep the URL-sync `$effect` as-is, but read from `store.query`**
+
+```ts
+$effect(() => {
+  if (typeof window === 'undefined') return;
+  const q = store.query.trim();
+  const url = new URL(window.location.href);
+  const current = url.searchParams.get('q') ?? '';
+  if (q === current) return;
+  if (q) url.searchParams.set('q', q);
+  else url.searchParams.delete('q');
+  history.replaceState(history.state, '', url.toString());
+});
+```
+
+- [ ] **Step 6: Update `onMount` URL-restore**
+
+```ts
+const urlQ = ($page.url.searchParams.get('q') ?? '').trim();
+if (urlQ) store.query = urlQ;
+```
+
+- [ ] **Step 7: Delete `runSearch` and `loadMore` local functions (lines 229–320)**
+
+The store provides both. Template references `loadMore` → change to `store.loadMore()`.
+
+- [ ] **Step 8: Update `submit`**
+
+```ts
+function submit(e: SubmitEvent) {
+  e.preventDefault();
+  const q = store.query.trim();
+  if (q.length <= 3) return;
+  void store.runSearch(q);
+}
+```
+
+- [ ] **Step 9: Update the template (same mechanical rename as Task 3)**
+
+`query` → `store.query`, `hits` → `store.hits`, etc. for all 11 fields.
+
+`bind:value={query}` → `bind:value={store.query}`.
+
+`activeSearch` derived stays: `const activeSearch = $derived(store.query.trim().length > 3);`
+
+- [ ] **Step 10: Run checks**
+
+```bash
+npm run check
+npm test
+```
+
+- [ ] **Step 11: Verify file is shorter than before**
+
+```bash
+wc -l src/routes/+page.svelte
+```
+
+Expected: under 700 lines (was 808). Target from roadmap: under 700 L.
+
+```bash
+wc -l src/routes/+layout.svelte
+```
+
+Expected: under 600 lines (was 681). Target from roadmap: under 600 L.
+
+- [ ] **Step 12: Smoke-test dev manually**
+
+- Type "lasagne" in home → local hits appear.
+- Type "pizza margherita" → web fallback.
+- Deep-link `/?q=lasagne` → query restored, results visible.
+- Navigate to recipe → back → home query + results preserved (snapshot).
+- Change domain filter while query is active → results re-fetch with new filter.
+
+- [ ] **Step 13: Commit**
+
+```bash
+git add src/routes/+page.svelte
+git commit -m "refactor(home): Live-Search auf SearchStore migriert
+
+Entfernt 11 duplizierte \$state, runSearch, loadMore und beide
+Debounce-Effekte. URL-Sync, Snapshot und Filter-Re-Search bleiben
+hier — aber alle delegieren an den Store."
+```
+
+---
+
+## Task 5: Remote E2E smoke (optional — only if CI deploy happens)
+
+**Trigger:** Only run this task if CI builds the `search-state-store` branch and deploys to `kochwas-dev.siegeln.net`. Otherwise skip to Task 6.
+
+**Files:**
+- Run: existing `tests/e2e/remote/search.spec.ts`
+
+- [ ] **Step 1: Run remote suite**
+
+```bash
+npm run test:e2e:remote -- search.spec.ts
+```
+
+Expected: 4/4 pass (existing coverage is sufficient — no new specs needed for a pure refactor).
+
+---
+
+## Task 6: Self-review + merge prep
+
+**Files:**
+- Review: all changed files
+
+- [ ] **Step 1: `npm test` full suite**
+
+```bash
+npm test
+```
+
+Expected: all pass (previous count + 12 new SearchStore tests).
+
+- [ ] **Step 2: `npm run check` full repo**
+
+```bash
+npm run check
+```
+
+Expected: 0 errors, 0 warnings.
+
+- [ ] **Step 3: `git diff main...HEAD` review**
+
+```bash
+git diff main...HEAD --stat
+git log main..HEAD --oneline
+```
+
+Expected commits:
+1. `feat(search): SearchStore fuer Live-Search mit Web-Fallback`
+2. `refactor(layout): Header-Dropdown nutzt SearchStore`
+3. `refactor(home): Live-Search auf SearchStore migriert`
+
+- [ ] **Step 4: Push branch**
+
+```bash
+git push -u origin search-state-store
+```
+
+CI builds branch-tagged image → user tests on `kochwas-dev.siegeln.net` → merges to main when clean.
+
+---
+
+## Risk Notes
+
+- **Svelte 5 `$state` in classes:** Standard pattern in this repo (`SearchFilterStore`, `PWAStore`). Works.
+- **Two instances of `SearchStore` simultaneously:** Each has its own timer + state. No shared mutable state between them — verified because the store has no static fields.
+- **Snapshot restore racing with `runDebounced`:** Handled via `skipNextDebounce` flag. Same mechanism as the current `skipNextSearch` in `+page.svelte`.
+- **Filter change on home while query is empty:** `reSearch()` early-exits when `q.length < minQueryLength`. Safe.
+- **`afterNavigate` firing during an in-flight search:** `reset()` clears timer and mutates `query`. Any in-flight fetch will race-guard-fail on the next `if (this.query.trim() !== q) return;`. Results get dropped, which is the desired behavior.
+
+## Deferred — NOT in this plan
+
+- **Search-Store-Tests mit echtem Browser-`$effect`:** Would need `@sveltejs/vite-plugin-svelte` test setup with component mount. Current Vitest setup is Node-only. Skip — the injected-fetch unit tests cover the state machine.
+- **Shared store instance (singleton) instead of per-consumer:** Rejected during design — would couple home and header search semantically.
+- **Web-Hit-Cache im Store:** Out of scope. The roadmap explicitly scopes this phase to state extraction, not perf work.

docs/superpowers/specs/2026-04-21-photo-recipe-magic-design.md

@@ -0,0 +1,336 @@
+# Foto-Rezept-Magie — Design Spec
+
+**Status:** approved (brainstorming)
+**Datum:** 2026-04-21
+**Ziel-Release:** v1.3.0
+
+## 1. Motivation & Scope
+
+Nutzer sollen ein **gedrucktes oder handgeschriebenes Rezept** fotografieren können. Das Foto wird an ein Vision-LLM (Gemini 2.5 Flash) gesendet, dort zu einer strukturierten Recipe-Shape extrahiert, und direkt in einen vorausgefüllten `RecipeEditor` gepackt — der Nutzer korrigiert bei Bedarf und speichert. Das Foto selbst wird nie persistiert.
+
+**In Scope (v1):**
+
+- Einzelnes Foto von gedrucktem Rezept ODER Handschrift.
+- Extraktion von Titel, Portionen, Zeiten, Zutaten (mit Menge/Einheit/Name), Zubereitungsschritten.
+- Auslöse-Button als `Camera`-Icon (lucide) im Header, disabled wenn offline oder ohne API-Key.
+- Direkter Flow in den `RecipeEditor` (kein separater Preview-Schritt).
+- Server-seitiger Gemini-Call mit structured-output-Schema, Zod-Validierung, 1× Retry bei Schema-Fehler.
+- Hartes Nicht-Speichern des Fotos nach dem Call.
+
+**Explizit Out-of-Scope (v1):**
+
+- Multi-Foto (Kochbuch-Doppelseite): Endpoint nimmt ein Bild entgegen; Erweiterung auf Array bei Bedarf.
+- Extraktion von `image_path` aus dem Bild (Dish-Crop aus Kochbuchseite).
+- Foto-Backup / Persistenz des Input-Fotos.
+- Claude als Fallback.
+- Interpretierende Felder: `cuisine`, `category`, `tags`, freie `description`.
+- Foto-vom-Gericht → AI-erfindet-Rezept (anderer Use-Case).
+
+## 2. User Flow
+
+```
+Header (Camera-Icon, lucide)
+   │
+   ▼
+/new/from-photo  (File-Picker: <input type="file" accept="image/*" capture="environment">)
+   │
+   ▼  Nutzer wählt/knipst Foto — File bleibt nur im Browser-State
+   │
+   ▼  POST /api/recipes/extract-from-photo (multipart/form-data)
+   │       Server: MIME + Größe validieren, sharp-Preprocess, Gemini-Call, Response
+   │       Foto wird NICHT persistiert.
+   │
+   ▼
+Seite swappt Spinner → <RecipeEditor initialData={recipe}>
+   │
+   ▼  Nutzer korrigiert, klickt „Speichern" (Editor-Save-Pfad — ob bestehend oder neu: siehe §11)
+   │
+   ▼
+/recipes/:id
+```
+
+**Invarianten:**
+
+- Extraktion erzeugt **kein** DB-Record. Erst der Save-Klick im Editor schreibt.
+- Bei Tab-Close während Extraktion: kein Müll in der DB, AbortController-fähiger Fetch.
+- Offline: Kamera-Icon im Header nicht geklickbar; falls trotzdem Route geöffnet, klare Offline-Meldung.
+
+## 3. Komponenten & Dateien
+
+**Neue Dateien**
+
+| Pfad | Zweck |
+|---|---|
+| `src/routes/new/from-photo/+page.svelte` | Shell. States: `idle` / `loading` / `success` / `error:<code>`. |
+| `src/lib/server/ai/gemini-client.ts` | Thin wrapper: `extractRecipeFromImage(buffer, mime): Promise<Partial<Recipe>>`. Liest `GEMINI_API_KEY`, `GEMINI_MODEL`, `GEMINI_TIMEOUT_MS` aus `$env/dynamic/private`. |
+| `src/lib/server/ai/recipe-extraction-prompt.ts` | System-Prompt (DE) + JSON-Schema für Gemini `responseSchema`. Isoliert, weil iterabel. |
+| `src/lib/server/ai/description-phrases.ts` | 50er-Pool von Magie-Phrasen für das `description`-Feld. Export `pickRandomPhrase(): string`. Siehe §5a. |
+| `src/lib/server/ai/image-preprocess.ts` | `sharp`-basierter Resize (≤1600px lange Kante) + JPEG re-encode (quality 85) + Metadata-Strip. HEIC → JPEG. |
+| `src/routes/api/recipes/extract-from-photo/+server.ts` | POST. Multipart-Parse, Validierung, preprocess, Gemini-Call, Zod-Validierung, Response. |
+| `src/lib/client/photo-upload.svelte.ts` | Frontend-Store für Upload-Zustand. |
+| `tests/unit/ai/recipe-extraction-prompt.test.ts` | Schema-Ping, Retry-Pfad, Zod-Ablehnung. |
+| `tests/unit/ai/image-preprocess.test.ts` | Resize, HEIC, Metadata-Strip. |
+| `tests/unit/ai/gemini-client.test.ts` | Timeout, 429-no-retry, 5xx-1x-retry, Network-Fehler. |
+| `tests/unit/ai/description-phrases.test.ts` | Pool hat 50 Einträge, alle unique non-empty, `pickRandomPhrase` liefert nur Pool-Einträge. |
+| `tests/api/extract-from-photo.test.ts` | Happy-Path, 413, 415, 422 (NO_RECIPE_IN_IMAGE). |
+| `tests/e2e/remote/photo-import.spec.ts` | Kamera-Icon, Upload-Fixture (Endpoint gestubt), Editor-Prefill, Save, Offline-State. |
+| `tests/fixtures/photo-recipe/` | 3 Fixture-Fotos: gedrucktes Rezept, Handschrift, No-Recipe-Bild. |
+
+**Geänderte Dateien**
+
+| Pfad | Änderung |
+|---|---|
+| `src/routes/+layout.svelte` | Header: `Camera`-Icon, `aria-label="Rezept aus Foto erstellen"`. Nur gerendert wenn `GEMINI_API_KEY` gesetzt (Graceful Degradation). Disabled wenn offline (`networkStore`). Führt zu `/new/from-photo`. |
+| `src/lib/components/RecipeEditor.svelte` | Akzeptiert optionale `initialData?: Partial<Recipe>`-Prop. Wenn gesetzt, Felder vorbefüllen, kein DB-Round-trip. Heute liest der Editor über eine Rezept-ID — dieser Pfad wird abstrahiert. |
+| `Dockerfile` | `sharp` im Native-Build-Stage ergänzen (wie `better-sqlite3`). |
+| `docker-compose.yml`, `docker-compose.prod.yml`, `.env.example` | Env-Vars `GEMINI_API_KEY`, `GEMINI_MODEL`, `GEMINI_TIMEOUT_MS` ergänzen. |
+| `docs/OPERATIONS.md` | Abschnitt zu Gemini-Config + Recreate-Hinweis bei Env-Änderung. |
+| `docs/ARCHITECTURE.md` | AI-Extraktionspfad ergänzen. |
+| `CLAUDE.md` | Zeile in Gotcha-Tabelle: Graceful Degradation ohne Key + `sharp` im Build-Stage. |
+
+**Keine DB-Migration.** Recipe-Shape bleibt; der Endpoint produziert ein `Partial<Recipe>` im Response-Body.
+
+## 4. API-Contract
+
+**`POST /api/recipes/extract-from-photo`**
+
+Request: `multipart/form-data`
+
+- `photo`: File. Erlaubt: `image/jpeg`, `image/png`, `image/webp`, `image/heic`, `image/heif`.
+- Max 8 MB (vor Preprocess).
+
+Response 200:
+
+```json
+{
+  "recipe": {
+    "title": "Zürcher Geschnetzeltes",
+    "description": "Aus dem Bild herbeigezaubert.",
+    "servings_default": 4,
+    "servings_unit": "Portionen",
+    "prep_time_min": 20,
+    "cook_time_min": 15,
+    "total_time_min": null,
+    "cuisine": null,
+    "category": null,
+    "image_path": null,
+    "source_url": null,
+    "source_domain": null,
+    "ingredients": [
+      { "position": 1, "quantity": 500, "unit": "g", "name": "Kalbsgeschnetzeltes", "note": null, "section": null },
+      { "position": 2, "quantity": 200, "unit": "ml", "name": "Rahm", "note": null, "section": null }
+    ],
+    "steps": [
+      { "position": 1, "text": "Fleisch in heißer Pfanne kurz anbraten, herausnehmen." }
+    ],
+    "tags": []
+  }
+}
+```
+
+Response Fehler-Codes:
+
+| Status | `code` | Bedeutung |
+|---|---|---|
+| 413 | `PAYLOAD_TOO_LARGE` | Photo > 8 MB. |
+| 415 | `UNSUPPORTED_MEDIA_TYPE` | MIME nicht in der Whitelist. |
+| 422 | `NO_RECIPE_IN_IMAGE` | AI-Output valide, aber `title` leer oder (`ingredients.length === 0` UND `steps.length === 0`). |
+| 429 | `AI_RATE_LIMITED` | Gemini 429 durchgereicht. |
+| 503 | `AI_TIMEOUT` | Gemini-Timeout (Default 20 s). |
+| 503 | `AI_FAILED` | Gemini-5xx nach 1 Retry ODER Schema-Validierung nach 1 Retry fehlgeschlagen. |
+| 503 | `AI_NOT_CONFIGURED` | `GEMINI_API_KEY` leer — Endpoint sollte dann ohnehin nicht erreichbar sein via UI, belt-and-suspenders. |
+
+## 5. Prompt-Strategie
+
+Datei: `src/lib/server/ai/recipe-extraction-prompt.ts`
+
+- **Sprache:** Deutsch.
+- **Rolle:** „Du bist ein Rezept-Extraktions-Assistent."
+- **Regeln:**
+  - Nur was lesbar auf dem Bild steht, ins Ergebnis. Sonst `null` oder leeres Array.
+  - Zutatenmengen: Zahl in `quantity`, Einheit separat (`g`, `ml`, `EL`, `TL`, `Stück`, `Prise`…).
+  - Bruchteile (`½`, `¼`, `1 ½`) zu Dezimalzahlen.
+  - Zubereitungsschritte: pro erkennbarer Nummerierung/Absatz ein Schritt.
+  - `description` wird server-seitig **nach** dem AI-Call aus einem 50er-Pool zufällig gewählt (`description-phrases.ts`, siehe §5a). Die AI bekommt `description` gar nicht erst im Schema — keine Halluzinationsfläche.
+- **Output:** Gemini `responseMimeType: "application/json"` + `responseSchema`. Strict-typed, keine zusätzlichen Keys.
+- **Temperature:** `0.1`.
+- **Retry bei Schema-Fehler:** Genau 1 zusätzlicher Call mit Appendix „Dein letztes JSON war invalid. Schema: … Bitte nur JSON zurück." Dann `AI_FAILED`.
+
+Zod-Schema spiegelt das Response-Schema serverseitig und wird auf die Gemini-Antwort angewendet.
+
+## 5a. Description-Phrasen-Pool
+
+Datei: `src/lib/server/ai/description-phrases.ts`
+
+50 deutsche Magie-Phrasen, zufällig gezogen pro Extraktions-Call. Die Auswahl geschieht server-seitig im Endpoint, nachdem die AI-Antwort validiert wurde. Der Nutzer kann die Phrase im Editor weiter editieren, sie ist also ein Starter, kein Lock-in.
+
+```ts
+export const DESCRIPTION_PHRASES: readonly string[] = [
+  'Mit dem Zauberstab aus dem Kochbuch geholt.',
+  'Foto-Magie frisch aus dem Ofen.',
+  'Aus dem Bild herbeigezaubert.',
+  'Ein Klick, ein Foto, fertig.',
+  'Knipsen statt Abtippen.',
+  'Von der Buchseite direkt in die Pfanne.',
+  'Die Kamera hat mitgelesen.',
+  'Abrakadabra — Rezept da.',
+  'Per Linse in die Küche teleportiert.',
+  'Von Oma abfotografiert, von der KI entziffert.',
+  'Frisch aus dem Bilderrahmen.',
+  'Klick, zisch, Rezept.',
+  'Das Foto wurde überredet, sich zu verraten.',
+  'Schnappschuss zur Schüssel.',
+  'Einmal lesen lassen, schon da.',
+  'Keine Hand hat dieses Rezept abgetippt.',
+  'Vom Bild in die Bratpfanne.',
+  'Papier ist geduldig, das Foto war es auch.',
+  'Eine Seite, ein Foto, ein Rezept.',
+  'Die KI hat drübergeschielt.',
+  'Handschriftlich entziffert — oder zumindest versucht.',
+  'Aus der Linse in die Liste.',
+  'Vom Küchentisch zur Kachel.',
+  'Knips und weg — zumindest der Zettel.',
+  'Das Bild hat geredet.',
+  'Keine Tippfehler, nur Sehfehler.',
+  'Per Foto eingebürgert.',
+  'Rezept-Übersetzung aus dem Bild.',
+  'Die Seite hat sich verraten.',
+  'Blitzlicht und dann Gulasch.',
+  'Ein Augenzwinkern der Kamera genügte.',
+  'Geknipst, gelesen, gespeichert.',
+  'Fotografische Gedächtnishilfe.',
+  'Aus der Schublade ans Licht.',
+  'Das Rezept stand schon da — wir haben nur hingeguckt.',
+  'Zaubertrick mit Kamera.',
+  'Vom Papier befreit.',
+  'Ein Foto sagt mehr als tausend Zutatenlisten.',
+  'Eingescannt, rausgelesen, reingeschrieben.',
+  'Die Kamera als Küchenhilfe.',
+  'Handy hoch, Rezept runter.',
+  'Aus dem Kochbuch gebeamt.',
+  'Ein scharfes Foto, ein klares Rezept.',
+  'Vom Regal zur App in einem Schritt.',
+  'Aus dem Bild geschöpft wie Suppe aus dem Topf.',
+  'Optisch erfasst, digital serviert.',
+  'Das Kleingedruckte hat die KI gelesen.',
+  'Vom Kladdenzettel in die Datenbank.',
+  'Kurz gezückt, schon gekocht.',
+  'Kein Schreibkrampf, nur ein Klick.'
+];
+
+export function pickRandomPhrase(): string {
+  return DESCRIPTION_PHRASES[Math.floor(Math.random() * DESCRIPTION_PHRASES.length)];
+}
+```
+
+**Invariant:** Genau 50 Einträge, alle non-empty, alle unique. Unit-Test prüft das.
+
+## 6. Fehlerbehandlung
+
+**Client-Zustände auf `/new/from-photo`:**
+
+| State | UI |
+|---|---|
+| `idle` | `Camera`-Button groß mittig, Text „Foto wählen oder aufnehmen". Hilfetext: „Gedrucktes Rezept oder Handschrift. Eine Seite, scharf, gut ausgeleuchtet." |
+| `loading` | `Loader2` (spin) + Text „Lese das Rezept…". `X`-Button für Abbrechen (AbortController). |
+| `success` | `<RecipeEditor initialData={recipe}>`. Top-Banner mit `Wand2`: „Aus Foto erstellt — bitte prüfen und ggf. korrigieren." Verschwindet nach erstem Feld-Edit. |
+| `error: NO_RECIPE_IN_IMAGE` | Yellow-Box. Buttons: `Camera` „Anderes Foto" (→ idle), `FilePlus` „Leer anlegen" (→ leerer Editor). |
+| `error: AI_TIMEOUT` / `AI_RATE_LIMITED` / `AI_FAILED` | Red-Toast, Grund. `RotateCw` „Nochmal versuchen" — reused das gleiche File-Objekt, kein Re-Upload durch den Nutzer. |
+| `error: PAYLOAD_TOO_LARGE` | Toast „Foto zu groß (max 8 MB). In besserer Beleuchtung neu aufnehmen." |
+| Offline (auf Route) | Hinweis „Diese Funktion braucht Internet." |
+
+**A11y:** Lade-State `aria-live="polite"`, Fehler-Boxen `role="alert"`, Kamera-Icon mit `aria-label`.
+
+**Server-Seite:**
+
+- Gemini-Call mit `AbortSignal`, Default-Timeout `GEMINI_TIMEOUT_MS` (20000).
+- Retry-Matrix:
+
+  | Gemini-Signal | Verhalten |
+  |---|---|
+  | 429 | `AI_RATE_LIMITED`, kein Retry. |
+  | Network/5xx | 1× Retry mit 500 ms backoff, dann `AI_FAILED`. |
+  | Invalid JSON | 1× Retry mit Append-Prompt, dann `AI_FAILED`. |
+  | Valid JSON aber Schema-invalid | gleicher Pfad wie Invalid JSON. |
+  | Timeout | `AI_TIMEOUT`, kein Retry. |
+
+- **Logging:** `console.warn` mit `{ code, durationMs, imageKB }` — **ohne** Prompt/Response-Inhalt (Privacy).
+
+**Icons (alle aus `lucide-svelte`):**
+
+| Zweck | Icon |
+|---|---|
+| Header-Button | `Camera` |
+| Lade-State | `Loader2` (spin) |
+| Erfolgs-Banner | `Wand2` |
+| Fehler | `AlertTriangle` |
+| „Nochmal versuchen" | `RotateCw` |
+| „Anderes Foto" | `Camera` |
+| „Leer anlegen" | `FilePlus` |
+| Abbrechen (Loading) | `X` |
+
+## 7. Sicherheit / Missbrauch
+
+- **Rate-Limit:** 10 Requests/Min pro IP, simple In-Memory-Throttle im Endpoint. Schützt vor versehentlichem Dauer-Tappen und Kosten-Runaways. Übertrieben für's Heimnetz, aber billig einzubauen.
+- **MIME-Validierung nicht blind client-seitig** — Buffer-Header prüfen (`sharp` metadata) nach Empfang.
+- **`.heic`/`.heif`** funktioniert, wenn `sharp` mit `libheif` gebaut ist (beim offiziellen sharp-arm64-Build dabei). Fixture-Test dafür.
+- **Kein Auth** (Kochwas-Policy). Key stays server-side.
+- **Privacy-Statement** im OPERATIONS.md: „Fotos gehen einmal an Google Gemini und werden danach nicht gespeichert. Gemini nutzt API-Daten im Paid-Tier nicht für Training."
+
+## 8. Konfiguration
+
+Env-Vars (alle in `docker-compose.yml`, `docker-compose.prod.yml`, `.env.example` ergänzen):
+
+| Var | Default | Zweck |
+|---|---|---|
+| `GEMINI_API_KEY` | — (required) | Ohne Key: Feature graceful deaktiviert. |
+| `GEMINI_MODEL` | `gemini-2.5-flash` | Modell-Wechsel (z.B. auf `gemini-2.5-pro`) ohne Rebuild. |
+| `GEMINI_TIMEOUT_MS` | `20000` | Timeout für Vision-Call. |
+
+**Wichtig:** Env-Änderungen greifen erst nach `docker compose up -d --force-recreate`, nicht nach `restart` (siehe Auto-Memory `project_deploy_env_recreate.md`).
+
+## 9. Testing
+
+**Unit (Vitest, mocked Gemini):**
+
+- `image-preprocess.test.ts`: Resize, HEIC→JPEG, Metadata-Strip, JPEG-Qualität.
+- `recipe-extraction-prompt.test.ts`: Prompt enthält Schema; Zod akzeptiert gültige Response; Zod lehnt invalide Response ab; Retry-Logik greift genau 1×.
+- `gemini-client.test.ts`: Timeout, 429-no-retry, 5xx-1x-retry, Network-Fehler.
+
+**API (SvelteKit-Endpoint, gemockter Gemini-Client):**
+
+- `tests/api/extract-from-photo.test.ts`: Happy-Path mit Fixture-JPEG; 413 bei >8MB; 415 bei nicht-Bild; 422 bei Titel-OK-aber-0-Ingredients-UND-0-Steps; 503 mit `AI_NOT_CONFIGURED` wenn Key fehlt.
+
+**E2E (Playwright gegen `kochwas-dev.siegeln.net`):**
+
+- `tests/e2e/remote/photo-import.spec.ts`: Kamera-Icon-Klick; File-Upload (Endpoint gestubt, kein echter Gemini-Call); Editor-Prefill; Save; Redirect auf `/recipes/:id`; Kamera-Icon-disabled bei `context.setOffline(true)`.
+
+**Fixtures:** `tests/fixtures/photo-recipe/`: gedruckte Seite, Handschrift-Karte, No-Recipe-Bild.
+
+**Explizit nicht getestet:** Die Gemini-Vision-Qualität selbst. Das ist Model-Verhalten, nicht unser Code. Manuelle Verifikation nach Deploy.
+
+## 10. PWA / Service Worker
+
+- `/new/from-photo` in den Shell-Pre-Cache aufnehmen.
+- Feature funktioniert nur online — Offline-State wird bewusst gehandhabt (siehe §6).
+- Service-Worker ändert nichts am Extract-Endpoint (keine SW-Cachung für `/api/recipes/extract-from-photo`).
+
+## 11. Offene Kleinigkeiten (in Planung zu entscheiden)
+
+- **Save-Endpoint:** Ob der bestehende Editor-Save-Endpoint das Anlegen eines Rezepts aus Scratch unterstützt, oder ob `insertRecipe` über einen neuen POST `/api/recipes` exponiert werden muss — vor dem Planning prüfen.
+- **Sharp Build-Stage:** Verifizieren, dass das offizielle `sharp`-npm-Package auf arm64 mit libheif-Support ausgeliefert wird; andernfalls Build-Stage-Rezept ähnlich zu `better-sqlite3`.
+- **Rate-Limit-Impl:** In-Memory-LRU oder Redis-like überflüssig — `Map<ip, {count, resetAt}>` reicht.
+
+## 12. Akzeptanz-Kriterien
+
+- [ ] Kamera-Icon in der Kopfzeile sichtbar, führt zu `/new/from-photo`.
+- [ ] Kamera-Icon unsichtbar wenn `GEMINI_API_KEY` leer.
+- [ ] Kamera-Icon disabled wenn offline (`networkStore.online === false`).
+- [ ] File-Picker öffnet mobile Rückkamera direkt (`capture="environment"`).
+- [ ] Gedrucktes Fixture-Rezept wird vom Prompt + Mock-Gemini-Response in gültige Recipe-Shape überführt.
+- [ ] Handschrift-Fixture ebenso (Mock).
+- [ ] No-Recipe-Fixture → 422 `NO_RECIPE_IN_IMAGE` → UI zeigt Yellow-Box mit beiden Buttons.
+- [ ] Editor öffnet mit vorbefüllten Feldern, Nutzer kann editieren, Speichern navigiert zu `/recipes/:id`.
+- [ ] Foto-Datei wird nach Request nicht auf Disk gefunden (Test-Assertion im API-Test).
+- [ ] Build im Dockerfile-arm64-Stage erfolgreich mit `sharp`.
+- [ ] `npm test` + `npm run check` grün.

docs/superpowers/specs/2026-04-21-shopping-list-design.md

@@ -0,0 +1,295 @@
+# Einkaufsliste — Design-Spec
+
+**Datum**: 2026-04-21
+**Status**: Spec, vor Implementierung
+
+## Ziel
+
+Aus Rezepten auf der Wunschliste eine flache, aggregierte Einkaufsliste erzeugen. Die Liste ist haushaltsweit geteilt, mobil-first, im Supermarkt abhakbar. Portionen sind pro Rezept anpassbar. Identische Zutaten (gleicher Name + gleiche Einheit) werden über mehrere Rezepte hinweg summiert.
+
+## Entscheidungen (aus Brainstorming)
+
+| Thema | Entscheidung |
+|---|---|
+| Sichtbarkeit | Global, eine Liste für alle Profile |
+| Portionen | Default `servings_default` beim Hinzufügen; zentral auf der Einkaufslisten-Seite anpassbar |
+| Aggregation | Flache Liste, exaktes Matching auf `(LOWER(TRIM(name)), LOWER(TRIM(unit)))`. Keine Fuzzy-Matches — lieber zwei Zeilen als falsche Summen. Rezept-Herkunft pro Zeile sichtbar. |
+| Abhaken | Checkbox, durchgestrichen, sortiert ans Ende. Manuelles Cleanup via „Erledigte entfernen" / „Liste leeren" |
+| Kopplung | Komplett entkoppelt von Wunschliste und `cooking_log`. Abhaken beeinflusst nur die Einkaufsliste. |
+| Header-Badge | Zählt **nicht-abgehakte** aggregierte Zutaten-Zeilen. Versteckt sich bei Count = 0. |
+| Manuelle Einträge | Out of scope. Nur rezeptbasiert. |
+
+## Datenmodell
+
+Migration `013_shopping_list.sql`:
+
+```sql
+CREATE TABLE shopping_cart_recipe (
+  recipe_id INTEGER PRIMARY KEY REFERENCES recipe(id) ON DELETE CASCADE,
+  servings INTEGER NOT NULL,
+  added_by_profile_id INTEGER REFERENCES profile(id) ON DELETE SET NULL,
+  added_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE shopping_cart_check (
+  name_key TEXT NOT NULL,
+  unit_key TEXT NOT NULL,
+  checked_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (name_key, unit_key)
+);
+```
+
+**Derivation-Prinzip**: Die aggregierte Liste wird **nicht materialisiert**. Sie wird bei jedem Lesen aus `shopping_cart_recipe JOIN recipe JOIN ingredient` plus Skalierungs-Faktor berechnet. Vorteil: Rezept-Edits wirken live auf die Liste.
+
+**Abhaken pro aggregierter Zeile**: `(name_key, unit_key)` — nicht pro Rezept-Zutat. Wenn zwei Rezepte beide „Mehl, g" haben, gibt es eine Zeile „400 g Mehl", und ein Haken reicht. Wird eines der Rezepte entfernt, bleibt „200 g Mehl" mit Haken sichtbar.
+
+**Orphan-Checks** (aggregierter Schlüssel ist nicht mehr durch ein Rezept im Cart abgedeckt): Werden nicht aktiv gelöscht, tauchen aber in der Ausgabe von `listShoppingList` nicht auf (der Join erzeugt keine Zeile). Späteres Cleanup optional via `clearCart` / `clearCheckedItems`.
+
+### Aggregations-SQL (Kern)
+
+```sql
+SELECT
+  LOWER(TRIM(i.name)) AS name_key,
+  LOWER(TRIM(COALESCE(i.unit, ''))) AS unit_key,
+  MIN(i.name) AS display_name,
+  MIN(i.unit) AS display_unit,
+  SUM(i.quantity * cr.servings * 1.0 / r.servings_default) AS total_quantity,
+  GROUP_CONCAT(DISTINCT r.title) AS from_recipes,
+  EXISTS(SELECT 1 FROM shopping_cart_check c
+         WHERE c.name_key = LOWER(TRIM(i.name))
+           AND c.unit_key = LOWER(TRIM(COALESCE(i.unit, '')))) AS checked
+FROM shopping_cart_recipe cr
+JOIN recipe r ON r.id = cr.recipe_id
+JOIN ingredient i ON i.recipe_id = r.id
+GROUP BY name_key, unit_key
+ORDER BY checked ASC, display_name COLLATE NOCASE;
+```
+
+**Edge Cases**:
+- `i.quantity IS NULL` → `total_quantity` bleibt NULL, UI rendert ohne Mengenangabe.
+- `r.servings_default IS NULL` → Division through-by-NULL → `total_quantity` NULL; defensiver: `COALESCE(r.servings_default, cr.servings)` (Faktor = 1, wenn kein Default bekannt).
+- `i.unit IS NULL` → `unit_key = ''`, Anzeige ohne Einheit.
+- Rezept hat keine Zutaten (sehr selten) → kein Beitrag zur Liste, Rezept-Chip erscheint trotzdem (Signal: „ups, keine Zutaten").
+
+## Server-Module
+
+### `src/lib/server/shopping/repository.ts`
+
+Neue Typen:
+
+```ts
+export type ShoppingCartRecipe = {
+  recipe_id: number;
+  title: string;
+  image_path: string | null;
+  servings: number;
+  servings_default: number;
+};
+
+export type ShoppingListRow = {
+  name_key: string;
+  unit_key: string;
+  display_name: string;
+  display_unit: string | null;
+  total_quantity: number | null;
+  from_recipes: string;  // comma-separated recipe titles
+  checked: 0 | 1;
+};
+
+export type ShoppingListSnapshot = {
+  recipes: ShoppingCartRecipe[];
+  rows: ShoppingListRow[];
+  uncheckedCount: number;
+};
+```
+
+Funktionen:
+
+- `addRecipeToCart(db, recipeId, profileId, servings?)` — `INSERT … ON CONFLICT(recipe_id) DO UPDATE SET servings = excluded.servings`. Wenn `servings` fehlt, nimmt `COALESCE(recipe.servings_default, 4)`.
+- `removeRecipeFromCart(db, recipeId)`
+- `setCartServings(db, recipeId, servings)` — App-seitig validiert: `1 ≤ servings ≤ 50`. SQL-Level `CHECK (servings > 0)` zusätzlich als Sicherheitsnetz.
+- `listShoppingList(db) → ShoppingListSnapshot` — liefert Cart-Rezepte, aggregierte Zeilen und `uncheckedCount` in einer Transaktion.
+- `toggleCheck(db, nameKey, unitKey, checked: boolean)` — Insert bzw. Delete in `shopping_cart_check`.
+- `clearCheckedItems(db)` — transaktional:
+  1. Aggregation laufen lassen und `recipe_id`s finden, deren sämtliche aggregierten Zeilen abgehakt sind (ein Rezept zählt als „erledigt", wenn all seine `(name_key, unit_key)`-Beiträge in `shopping_cart_check` stehen)
+  2. Diese Rezepte via `DELETE FROM shopping_cart_recipe WHERE recipe_id IN (…)` entfernen
+  3. Check-Einträge, die jetzt keinen Bezug mehr haben, mit `DELETE FROM shopping_cart_check WHERE (name_key, unit_key) NOT IN (<aktive Keys nach Step 2>)` aufräumen
+- `clearCart(db)` — `DELETE FROM shopping_cart_recipe; DELETE FROM shopping_cart_check;`
+
+### Routen
+
+| Methode + Pfad | Body/Params | Zweck |
+|---|---|---|
+| `GET /api/shopping-list` | — | Snapshot holen |
+| `POST /api/shopping-list/recipe` | `{ recipe_id, servings?, profile_id? }` | Rezept in Cart; idempotent |
+| `PATCH /api/shopping-list/recipe/:recipe_id` | `{ servings }` | Portionen ändern |
+| `DELETE /api/shopping-list/recipe/:recipe_id` | — | Rezept raus |
+| `POST /api/shopping-list/check` | `{ name_key, unit_key }` | Abhaken |
+| `DELETE /api/shopping-list/check` | `{ name_key, unit_key }` | Haken weg |
+| `DELETE /api/shopping-list/checked` | — | Erledigte entfernen |
+| `DELETE /api/shopping-list` | — | Liste leeren |
+
+Error-Handling: 404 wenn `recipe_id` nicht im Cart (nur bei DELETE/PATCH auf spezifischem Rezept), 400 bei Validation-Fehlern (servings ≤ 0, fehlende Felder), 500 mit JSON-Body `{ message }` bei DB-Fehlern.
+
+## Client-Store
+
+`src/lib/client/shopping-cart.svelte.ts` — analog zu `wishlist.svelte.ts`:
+
+```ts
+class ShoppingCartStore {
+  uncheckedCount = $state(0);
+  recipeIds = $state<Set<number>>(new Set());  // für „ist dieses Rezept im Cart?"
+  loaded = $state(false);
+
+  async refresh(): Promise<void>;
+  async addRecipe(recipeId: number): Promise<void>;
+  async removeRecipe(recipeId: number): Promise<void>;
+  isInCart(recipeId: number): boolean;
+}
+```
+
+- `refresh()` ruft `GET /api/shopping-list` auf und extrahiert `recipeIds` + `uncheckedCount` aus dem Snapshot. Ein separater Leichtgewichts-Count-Endpoint ist nicht nötig; der Snapshot ist klein.
+- Store wird in `+layout.svelte` beim `onMount` initialisiert (wie `wishlistStore.refresh()`).
+- Nach jedem Mutating-Call (add/remove/toggle/clear) wird `refresh()` vom aufrufenden Code getriggert.
+
+## UI
+
+### (a) Wunschlisten-Karte — Relayout
+
+Aktuell drücken zwei rechts-gestapelte Buttons den Titel-Text auf Handys zusammen. Neues Layout:
+
+```
+┌──────────┬─────────────────────────────┐
+│          │  [Utensils|3] [Cart] [Trash] │   Action-Leiste oben, horizontal
+│   Bild   │  Titel (fett, 2 Zeilen max)  │
+│   96px   │  Hendrik, Verena, Leana      │   wanted_by + ★
+│          │  ★ 4.5                        │
+└──────────┴─────────────────────────────┘
+```
+
+Konkret in `src/routes/wishlist/+page.svelte`:
+- `.actions` wird horizontal, als erste Zeile über dem Titel rechts-bündig.
+- `source_domain`-Span aus der `.meta`-Zeile entfernt (Platz).
+- Neuer Cart-Button zwischen Utensils und Trash:
+  - Nicht im Cart: neutral (Icon grau), aria-label „In den Einkaufswagen"
+  - Im Cart: grün gefüllt, Häkchen-Badge unten rechts, aria-label „Aus Einkaufswagen entfernen"
+- Alle drei Buttons ≥ 44 × 44 px (mobile Tap-Target).
+
+Vergleichbare Reorg in `src/routes/recipes/[id]/+page.svelte` nötig? — **Nein**. Der Cart-Button erscheint nur auf der Wunschliste. (Begründung: Rezept-Detail hat schon ein volles Action-Menü; das Hinzufügen zum Cart passiert bewusst aus der Wunschlisten-Perspektive.)
+
+### (b) Header-Badge
+
+`src/routes/+layout.svelte` — rechts neben dem bestehenden Kochtopf-Icon:
+
+- Icon `ShoppingCart` aus `lucide-svelte`
+- Badge-Kreis oben rechts mit `shoppingCartStore.uncheckedCount`
+- Nur sichtbar wenn `uncheckedCount > 0`
+- Klick → `goto('/shopping-list')`
+- Gleicher Visual-Style wie der CookingPot (Farb-Konsistenz grün)
+
+### (c) Seite `/shopping-list`
+
+Datei: `src/routes/shopping-list/+page.svelte`
+
+```
+┌──────────────────────────────────────┐
+│ Einkaufsliste                        │   Header
+│ 12 noch zu besorgen · 3 Rezepte      │
+├──────────────────────────────────────┤
+│ [Carbonara 4p- +] [Lasagne 6p- +] …  │   Rezept-Chips, horizontal scrollbar
+│                                       │   (Titel + Portions-Stepper + X)
+├──────────────────────────────────────┤
+│ ☐ 400 g Mehl                         │
+│    aus Carbonara, Lasagne             │
+│ ☐ 6 Stk Eier                          │
+│    aus Carbonara                      │
+│ …                                     │
+│ ☑ 200 g Butter  (durchgestrichen)     │   Abgehakt, ans Ende
+├──────────────────────────────────────┤
+│ [Erledigte entfernen] [Liste leeren] │   Sticky Footer
+└──────────────────────────────────────┘
+```
+
+**Komponenten** (neue Svelte-Dateien):
+- `src/lib/components/ShoppingCartChip.svelte` — Rezept-Chip mit Stepper + Remove
+- `src/lib/components/ShoppingListRow.svelte` — eine Zutatenzeile mit Checkbox
+
+**Portions-Stepper**: - und + Buttons, mittig die Zahl. Min 1, Max 50 (sanity). Klick sendet PATCH, triggert Store-Refresh → Liste rerendert.
+
+**Zutaten-Reihenfolge**: Erst nicht-abgehakt, dann abgehakt; innerhalb jeder Gruppe alphabetisch (`display_name COLLATE NOCASE`). Abgehakt = durchgestrichen + grauer Text.
+
+**Mengen-Formatierung** (`src/lib/quantity-format.ts`, neu):
+- `formatQuantity(q: number | null): string`
+- `null` → `''`
+- Ganz-nahe-Ganzzahl (Epsilon 0.01) → Integer
+- Sonst auf max. 2 Nachkommastellen, trailing Nullen weg
+- Beispiele: `400 → "400"`, `0.5 → "0.5"`, `0.333 → "0.33"`, `null → ""`
+
+**Aktionen im Footer**:
+- „Erledigte entfernen" — sichtbar wenn ≥ 1 Check, kein Confirm (reversibel genug)
+- „Liste leeren" — Confirm via `confirmAction`: „Komplette Einkaufsliste löschen? Das macht nicht rückgängig."
+
+**Empty State**: Icon `ShoppingCart` (große Version), „Einkaufswagen ist leer", Hint „Lege Rezepte auf der Wunschliste in den Wagen, um sie hier zu sehen."
+
+**Offline-Verhalten**: Wie die Wunschliste — alle Mutating-Calls via `requireOnline()`. Service-Worker cached nichts von `/api/shopping-list/*` (network-only analog zu Wishlist). Die PWA-Seite selbst wird vom SW-Shell-Cache serviert, aber ohne Daten. Offline-Robustheit (local queue + sync) ist **out of scope** für v1.
+
+## Testing
+
+### Unit/Integration-Tests (Vitest, in-memory DB)
+
+- `tests/integration/shopping-repository.test.ts`:
+  - `addRecipeToCart` idempotent, `ON CONFLICT` überschreibt `servings`
+  - Aggregation: gleiche `(name_key, unit_key)` summiert; unterschiedliche unit_keys bleiben getrennt
+  - Portions-Skalierung: `servings_default=4`, `servings=2` → alle Mengen halbiert
+  - Nulls: `quantity IS NULL` → `total_quantity IS NULL`; `unit IS NULL` → `unit_key=''`
+  - `toggleCheck` persistiert über `listShoppingList`-Aufrufe
+  - Abgehakt-Status überlebt Entfernen eines Rezepts, solange Schlüssel von einem anderen kommt
+  - `clearCheckedItems`: entfernt nur vollständig abgehakte Rezepte + räumt Orphan-Checks
+  - `countUncheckedItems` nach diversen Ops korrekt
+  - `clearCart` cleant beide Tabellen
+- `tests/unit/shopping-cart-store.test.ts`:
+  - Mock-Fetch, testet refresh-Trigger nach add/remove
+  - `isInCart(id)` reflektiert aktuellen Zustand
+  - `uncheckedCount` reactive nach refresh
+- `tests/unit/quantity-format.test.ts`:
+  - `formatQuantity(400) === "400"`
+  - `formatQuantity(0.5) === "0.5"`
+  - `formatQuantity(0.333333) === "0.33"`
+  - `formatQuantity(400.001) === "400"` (Epsilon)
+  - `formatQuantity(null) === ""`
+
+### E2E-Tests (Playwright, `tests/e2e/remote/shopping.spec.ts`)
+
+**Wichtig**: E2E-Tests laufen gegen `kochwas-dev.siegeln.net` und erfordern einen erfolgreichen Deploy des Features. Werden nach dem Feature-Merge manuell ausgelöst, nicht im Rahmen der Implementierungs-Phase.
+
+Abgedeckt:
+- Rezept auf Wunschliste → Cart-Button klicken → Header-Badge erscheint
+- Navigation zu `/shopping-list`, Portions-Stepper hoch/runter → Zutatenmengen reagieren
+- Zutat abhaken → Badge-Count sinkt, Zeile durchgestrichen, Reload persistiert
+- „Erledigte entfernen" → vollständig abgehakte Rezepte weg, teilweise abgehakte bleiben
+- „Liste leeren" → Empty-State, Badge verschwindet
+- Zwei Rezepte mit gleicher Zutat (Fixture-Setup) → aggregierte Zeile mit Summe
+- Cleanup-Fixture entfernt Cart + Checks nach jedem Test
+
+**Nicht getestet**: exakte CSS-Styles, Animationen — visuelle Kontrolle beim Deploy.
+
+## Implementierungs-Reihenfolge (Hinweis für Plan)
+
+1. Migration 013 + Repository + Unit-Tests
+2. API-Routen + Integrationstests
+3. Client-Store
+4. Header-Badge-Icon
+5. Wunschlisten-Karte Relayout + Cart-Button
+6. Seite `/shopping-list` (Chips → Rows → Footer → Empty State)
+7. Quantity-Formatter + Tests
+8. Service-Worker network-only für `/api/shopping-list/*`
+9. Deploy, dann E2E-Tests nachschieben
+
+## Out of Scope (für v1)
+
+- Manuelle Einträge („Klopapier")
+- Supermarkt-Abteilungs-Sortierung
+- Offline-Queue (add/check während offline, sync später)
+- Synonym/Fuzzy-Matching von Zutaten-Namen (der User harmonisiert langfristig händisch)
+- Auto-Kopplung zu `cooking_log` / Wunschliste-Remove
+- Teilen per Link / Export

docs/superpowers/specs/2026-04-22-views-and-collapsibles-design.md

@@ -0,0 +1,244 @@
+# Hauptseite: "Zuletzt angesehen" Sort + Collapsible Sections
+
+## Kontext
+
+Die Hauptseite (`src/routes/+page.svelte`) hat heute drei Sektionen — "Deine
+Favoriten", "Zuletzt hinzugefügt", "Alle Rezepte" — und vier Sort-Optionen
+für "Alle Rezepte" (Name, Bewertung, Zuletzt gekocht, Hinzugefügt). Der
+User möchte:
+
+1. Eine fünfte Sort-Option "Zuletzt angesehen" für "Alle Rezepte"
+2. "Deine Favoriten" und "Zuletzt hinzugefügt" auf-/zuklappbar machen
+
+Beides reduziert visuelle Last und gibt Zugriff auf "kürzlich
+beschäftigte mich" Rezepte ohne Suche.
+
+## Design-Entscheidungen (durch Brainstorming bestätigt)
+
+- **View-Tracking**: zählt sofort beim Laden der Detailseite — kein Threshold
+- **Storage**: SQLite, pro Profil (konsistent mit Ratings, Cooked, Wishlist)
+- **Collapsibles**: standardmäßig offen, User-Wahl persistiert pro Device
+
+## Sektion 1 — Schema & View-Tracking
+
+### Migration
+
+Neue Datei `src/lib/server/db/migrations/014_recipe_view.sql`
+(Numbering: aktuell ist die letzte Migration `013_shopping_list.sql`):
+
+```sql
+CREATE TABLE recipe_view (
+  profile_id INTEGER NOT NULL REFERENCES profiles(id) ON DELETE CASCADE,
+  recipe_id INTEGER NOT NULL REFERENCES recipes(id) ON DELETE CASCADE,
+  last_viewed_at TEXT NOT NULL DEFAULT (datetime('now')),
+  PRIMARY KEY (profile_id, recipe_id)
+);
+CREATE INDEX idx_recipe_view_recent
+  ON recipe_view(profile_id, last_viewed_at DESC);
+```
+
+Idempotent über `INSERT OR REPLACE` — mehrfache Visits ein- und desselben
+Profils auf dasselbe Rezept führen nur zur Aktualisierung des Timestamps,
+kein Multi-Insert.
+
+Cascade auf beide FKs: löscht ein User ein Rezept oder ein Profil, gehen
+zugehörige Views automatisch mit.
+
+### API
+
+Neuer Endpoint `POST /api/recipes/[id]/view`:
+
+```
+Request body: { "profile_id": number }
+Response: 204 No Content
+Errors:
+  - 400 wenn profile_id fehlt oder kein Number
+  - 404 wenn Recipe nicht existiert (FK-Violation)
+  - 404 wenn Profil nicht existiert (FK-Violation)
+```
+
+Implementation: einfache `INSERT OR REPLACE` mit den IDs. `last_viewed_at`
+nutzt den Default (`datetime('now')`).
+
+### Client-Hook
+
+In `src/routes/recipes/[id]/+page.svelte`, in `onMount`:
+
+```ts
+if (profileStore.active) {
+  void fetch(`/api/recipes/${recipe.id}/view`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ profile_id: profileStore.active.id })
+  });
+}
+```
+
+Fire-and-forget, kein UI-Block, kein Error-Handling — wenn der Beacon
+fehlschlägt, ist es kein User-Visible-Bug, das nächste View korrigiert
+es.
+
+## Sektion 2 — Sort "Zuletzt angesehen"
+
+### Page
+
+In `src/routes/+page.svelte`:
+
+```ts
+type AllSort = 'name' | 'rating' | 'cooked' | 'created' | 'viewed';
+const ALL_SORTS = [
+  ...,
+  { value: 'viewed', label: 'Zuletzt angesehen' }
+];
+```
+
+### API
+
+`GET /api/recipes/all` bekommt einen optionalen `profile_id`-Query-Param.
+Der Endpoint reicht ihn an `listAllRecipesPaginated` durch.
+
+### DB-Layer
+
+`listAllRecipesPaginated` in `src/lib/server/recipes/search-local.ts`
+bekommt einen optionalen `profileId: number | null`-Parameter. Wenn
+`sort === 'viewed'` UND `profileId !== null`:
+
+```sql
+SELECT r.*, ...
+FROM recipes r
+LEFT JOIN recipe_view v
+  ON v.recipe_id = r.id AND v.profile_id = :profileId
+ORDER BY v.last_viewed_at DESC NULLS LAST,
+         r.title COLLATE NOCASE ASC
+LIMIT :limit OFFSET :offset
+```
+
+Bei `sort === 'viewed'` ohne `profileId`: fällt auf alphabetische
+Sortierung zurück (kein Crash, sinnvolles Default-Verhalten).
+
+### Reactive Refetch bei Profile-Switch
+
+Auf Home-Page-Ebene: ein `$effect` der auf `profileStore.activeId` lauscht
+und — wenn `allSort === 'viewed'` — `setAllSort('viewed')` retriggert
+(forciert Refetch mit neuem profile_id). Sonst (anderer Sort) keine
+Aktion, weil andere Sorts nicht profilabhängig sind.
+
+### Snapshot-Kompatibilität
+
+Der existierende `rehydrateAll(sort, count, exhausted)` in `+page.svelte`
+muss `profile_id` mitschicken, sonst zeigt der Back-Nav für sort='viewed'
+einen anderen Inhalt als vor dem Forward-Klick. Das gleiche gilt für
+`loadAllMore` und `setAllSort`.
+
+## Sektion 3 — Auf-/Zuklappbare Sektionen
+
+### State
+
+In `src/routes/+page.svelte`:
+
+```ts
+type CollapseKey = 'favorites' | 'recent';
+let collapsed = $state<Record<CollapseKey, boolean>>({
+  favorites: false,
+  recent: false
+});
+
+const STORAGE_KEY = 'kochwas.collapsed.sections';
+
+function toggle(key: CollapseKey) {
+  collapsed[key] = !collapsed[key];
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsed));
+}
+```
+
+In `onMount`: aus localStorage parsen, fehlerhafte JSON ignorieren
+(default-state behalten).
+
+### Markup
+
+Pro Sektion:
+
+```svelte
+<section class="listing">
+  <button
+    class="section-head"
+    onclick={() => toggle('favorites')}
+    aria-expanded={!collapsed.favorites}
+  >
+    <ChevronDown size={18} class:rotated={collapsed.favorites} />
+    <h2>Deine Favoriten</h2>
+    <span class="count">{favorites.length}</span>
+  </button>
+  {#if !collapsed.favorites}
+    <div transition:slide={{ duration: 180 }}>
+      <ul class="cards">…</ul>
+    </div>
+  {/if}
+</section>
+```
+
+### Visual / CSS
+
+- Header `<button>`: transparenter Border, full-width, `display: flex`,
+  `align-items: center`, `gap: 0.5rem`, `min-height: 44px` (Tap-Target)
+- Chevron-Icon (lucide-svelte `ChevronDown`): rotiert auf
+  `transform: rotate(-90deg)` wenn `.rotated`
+- Count-Pill rechts: kleiner grauer Text, hilft zu sehen wie viel hinter
+  einer zugeklappten Sektion steckt
+- Hover: leichter Hintergrund (`#f4f8f5`, wie andere interaktive Elemente)
+- Animation: `svelte/transition`'s `slide`, ~180 ms
+
+### Persistenz-Format
+
+```json
+{ "favorites": false, "recent": true }
+```
+
+Truthy = collapsed. Default-Zustand wenn key fehlt: beide false.
+
+### "Alle Rezepte" bleibt nicht-collapsible
+
+Hauptliste, immer sichtbar — User würde das Scrollen verlieren.
+
+## Test-Strategie
+
+### Schema/Migration
+
+- Migrations-Test (existierendes Pattern in `tests/integration`): nach
+  `applyMigrations` muss `recipe_view` existieren mit erwarteten
+  Spalten
+
+### View-Endpoint
+
+- `POST /api/recipes/[id]/view` Integration-Test:
+  - Erstes POST → Row mit `last_viewed_at` ungefähr `now`
+  - Zweites POST → gleiche Row, `last_viewed_at` aktualisiert
+  - POST mit ungültiger profile_id → 404
+  - POST mit ungültiger recipe_id → 404
+  - POST ohne profile_id im Body → 400
+
+### Sort-Logik
+
+- Unit-Test für `listAllRecipesPaginated(db, 'viewed', limit, offset, profileId)`:
+  - Mit Views-Daten: angesehene Rezepte zuerst (DESC nach `last_viewed_at`),
+    Rest alphabetisch
+  - Ohne profileId: fallback auf alphabetisch
+  - Mit profileId aber ohne Views: alle als NULL → alphabetisch
+
+### Collapsibles (manuell oder unit)
+
+- localStorage-Persistenz: Toggle, Reload, gleicher State
+- Default-State wenn localStorage leer/corrupt: beide offen
+- Ein Unit-Test für eine reine Helper-Funktion (parse/serialize), Markup
+  ist Snapshot-mässig nicht so wertvoll testbar
+
+## Reihenfolge der Umsetzung
+
+1. Migration + DB-Layer + Sort-Query (`search-local.ts`-Erweiterung)
+2. View-Endpoint (`POST /api/recipes/[id]/view`) + Client-Beacon in
+   `recipes/[id]/+page.svelte`
+3. Sort-Option in `+page.svelte` UI + API-Param weiterreichen +
+   profile_id in `loadAllMore`/`rehydrateAll`/`setAllSort` durchreichen
+4. Collapsible-Pattern in `+page.svelte` für Favoriten und Recent
+
+Jede Phase atomar committen + pushen.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kochwas",
-  "version": "0.1.0",
+  "version": "1.4.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -14,7 +14,8 @@
     "format": "prettier --write .",
     "render:icons": "node scripts/render-icons.mjs",
     "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui"
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:remote": "playwright test --config=playwright.remote.config.ts"
   },
   "devDependencies": {
     "@playwright/test": "^1.59.1",
@@ -34,12 +35,15 @@
     "vitest": "^2.1.4"
   },
   "dependencies": {
+    "@google/generative-ai": "^0.24.1",
     "@types/archiver": "^7.0.0",
     "@types/yauzl": "^2.10.3",
     "archiver": "^7.0.1",
     "better-sqlite3": "^11.5.0",
     "linkedom": "^0.18.5",
     "lucide-svelte": "^1.0.1",
+    "node-addon-api": "^8.7.0",
+    "node-gyp": "^12.3.0",
     "yauzl": "^3.3.0",
     "zod": "^3.23.8"
   }

playwright.config.ts

@@ -5,6 +5,7 @@ import { defineConfig } from '@playwright/test';
 // Preview-Server (kein Dev-Server, damit der SW registrierbar ist).
 export default defineConfig({
   testDir: 'tests/e2e',
+  testIgnore: ['tests/e2e/remote/**'],
   fullyParallel: false,
   reporter: 'list',
   use: {

playwright.remote.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from '@playwright/test';
+
+// Zweite Playwright-Config fuer E2E-Smoketests gegen ein deployed
+// Environment (standardmaessig kochwas-dev.siegeln.net).
+//
+// Getrennt von playwright.config.ts, weil diese Tests:
+// - keinen lokalen Preview-Server starten
+// - gegen eine echte Datenbank laufen (daher workers: 1, afterEach-Cleanup)
+// - Service-Worker-Lifecycle nicht manipulieren (das macht offline.spec.ts lokal)
+//
+// Ausfuehrung: npm run test:e2e:remote
+// Ziel-URL ueberschreiben: E2E_REMOTE_URL=https://... npm run test:e2e:remote
+const BASE_URL = process.env.E2E_REMOTE_URL ?? 'https://kochwas-dev.siegeln.net';
+
+export default defineConfig({
+  testDir: 'tests/e2e/remote',
+  fullyParallel: false,
+  workers: 1,
+  retries: 0,
+  reporter: [['list'], ['html', { open: 'never', outputFolder: 'playwright-report-remote' }]],
+  use: {
+    baseURL: BASE_URL,
+    headless: true,
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    // Service-Worker blocken: Diese Suite testet Live-API-Verhalten gegen
+    // den Server, keine PWA-Features (dafuer offline.spec.ts lokal). Die
+    // frische SW-Registrierung pro Context akkumulierte im Single-Worker-
+    // Run Browser-State und crashte Chromium zufaellig nach 20-30 Specs.
+    serviceWorkers: 'block'
+  }
+});

src/lib/client/photo-upload.svelte.ts

@@ -0,0 +1,76 @@
+import type { Recipe } from '$lib/types';
+
+export type UploadStatus = 'idle' | 'loading' | 'success' | 'error';
+
+export class PhotoUploadStore {
+  status = $state<UploadStatus>('idle');
+  recipe = $state<Recipe | null>(null);
+  errorCode = $state<string | null>(null);
+  errorMessage = $state<string | null>(null);
+  lastFile = $state<File | null>(null);
+
+  private controller: AbortController | null = null;
+  private readonly fetchImpl: typeof fetch;
+
+  constructor(opts: { fetchImpl?: typeof fetch } = {}) {
+    this.fetchImpl = opts.fetchImpl ?? fetch;
+  }
+
+  async upload(file: File): Promise<void> {
+    this.lastFile = file;
+    await this.doUpload(file);
+  }
+
+  async retry(): Promise<void> {
+    if (this.lastFile) await this.doUpload(this.lastFile);
+  }
+
+  reset(): void {
+    this.status = 'idle';
+    this.recipe = null;
+    this.errorCode = null;
+    this.errorMessage = null;
+    this.lastFile = null;
+    this.controller?.abort();
+    this.controller = null;
+  }
+
+  abort(): void {
+    this.controller?.abort();
+  }
+
+  private async doUpload(file: File): Promise<void> {
+    this.status = 'loading';
+    this.recipe = null;
+    this.errorCode = null;
+    this.errorMessage = null;
+    this.controller = new AbortController();
+    const fd = new FormData();
+    fd.append('photo', file);
+    try {
+      const res = await this.fetchImpl('/api/recipes/extract-from-photo', {
+        method: 'POST',
+        body: fd,
+        signal: this.controller.signal
+      });
+      const body = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        this.status = 'error';
+        this.errorCode = typeof body.code === 'string' ? body.code : 'UNKNOWN';
+        this.errorMessage =
+          typeof body.message === 'string' ? body.message : `HTTP ${res.status}`;
+        return;
+      }
+      this.recipe = body.recipe as Recipe;
+      this.status = 'success';
+    } catch (e) {
+      if ((e as Error).name === 'AbortError') {
+        this.status = 'idle';
+        return;
+      }
+      this.status = 'error';
+      this.errorCode = 'NETWORK';
+      this.errorMessage = (e as Error).message;
+    }
+  }
+}

src/lib/client/profile.svelte.ts

@@ -66,12 +66,14 @@ export const profileStore = new ProfileStore();
  * Returns the active profile, or null after showing the standard
  * "kein Profil gewählt" dialog. Use as the first line of any per-profile
  * action so we don't repeat the guard at every call-site.
+ *
+ * `message` ueberschreibt den Default, wenn eine Aktion einen spezifischen
+ * Hinweis braucht (z. B. „um mitzuwünschen" auf der Wunschliste).
  */
-export async function requireProfile(): Promise<Profile | null> {
+export async function requireProfile(
+  message = 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
+): Promise<Profile | null> {
   if (profileStore.active) return profileStore.active;
-  await alertAction({
-    title: 'Kein Profil gewählt',
-    message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
-  });
+  await alertAction({ title: 'Kein Profil gewählt', message });
   return null;
 }

src/lib/client/scroll-restore.ts

@@ -0,0 +1,78 @@
+// Persistent scroll restoration across client navigations.
+//
+// SvelteKit only restores scroll synchronously after the new page mounts.
+// Pages whose content is fetched in onMount/afterNavigate (e.g. home,
+// wishlist, shopping-list) are still empty at that point, so the saved
+// scrollY can't be reached and the browser clamps to 0.
+//
+// We patch this by saving scrollY on beforeNavigate (keyed by the URL
+// we're leaving — NOT location.pathname, which on popstate is already
+// the new URL by the time the callback fires) and re-applying it after
+// popstate as soon as the document is tall enough — rAF-polled with a
+// hard time budget so we never spin.
+
+const STORAGE_KEY = 'kochwas:scroll';
+const POLL_BUDGET_MS = 1500;
+const MIN_RESTORE_Y = 40; // ignore noise: don't override a default top scroll
+
+type ScrollMap = Record<string, number>;
+
+function readMap(): ScrollMap {
+  if (typeof sessionStorage === 'undefined') return {};
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    return raw ? (JSON.parse(raw) as ScrollMap) : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeMap(map: ScrollMap): void {
+  if (typeof sessionStorage === 'undefined') return;
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(map));
+  } catch {
+    // quota exceeded — silently drop, scroll memory is best-effort
+  }
+}
+
+function keyFor(url: URL): string {
+  return url.pathname + url.search;
+}
+
+export function recordScroll(fromUrl: URL | null | undefined): void {
+  if (typeof window === 'undefined') return;
+  if (!fromUrl) return;
+  const map = readMap();
+  map[keyFor(fromUrl)] = window.scrollY;
+  writeMap(map);
+}
+
+export function restoreScroll(
+  navType: string | null | undefined,
+  toUrl: URL | null | undefined
+): void {
+  if (typeof window === 'undefined') return;
+  if (navType !== 'popstate') return;
+  if (!toUrl) return;
+  const target = readMap()[keyFor(toUrl)];
+  if (!target || target < MIN_RESTORE_Y) return;
+
+  const start = performance.now();
+  const step = () => {
+    const docHeight = document.documentElement.scrollHeight;
+    const reachable = Math.max(0, docHeight - window.innerHeight);
+    if (reachable >= target - 4) {
+      window.scrollTo({ top: target, left: 0, behavior: 'instant' });
+      return;
+    }
+    if (performance.now() - start >= POLL_BUDGET_MS) {
+      // Best effort — content never grew tall enough; clamp will land us
+      // at the bottom of what's available.
+      window.scrollTo({ top: target, left: 0, behavior: 'instant' });
+      return;
+    }
+    requestAnimationFrame(step);
+  };
+  requestAnimationFrame(step);
+}

src/lib/client/search.svelte.ts

@@ -0,0 +1,225 @@
+import type { SearchHit } from '$lib/server/recipes/search-local';
+import type { WebHit } from '$lib/server/search/searxng';
+
+export type SearchSnapshot = {
+  query: string;
+  hits: SearchHit[];
+  webHits: WebHit[];
+  searchedFor: string | null;
+  webError: string | null;
+  localExhausted: boolean;
+  webPageno: number;
+  webExhausted: boolean;
+};
+
+export type SearchStoreOptions = {
+  pageSize?: number;
+  debounceMs?: number;
+  filterDebounceMs?: number;
+  minQueryLength?: number;
+  webFilterParam?: () => string;
+  fetchImpl?: typeof fetch;
+};
+
+export class SearchStore {
+  query = $state('');
+  hits = $state<SearchHit[]>([]);
+  webHits = $state<WebHit[]>([]);
+  searching = $state(false);
+  webSearching = $state(false);
+  webError = $state<string | null>(null);
+  searchedFor = $state<string | null>(null);
+  localExhausted = $state(false);
+  webPageno = $state(0);
+  webExhausted = $state(false);
+  loadingMore = $state(false);
+
+  private readonly pageSize: number;
+  private readonly debounceMs: number;
+  private readonly filterDebounceMs: number;
+  private readonly minQueryLength: number;
+  private readonly webFilterParam: () => string;
+  private readonly fetchImpl: typeof fetch;
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private skipNextDebounce = false;
+
+  constructor(opts: SearchStoreOptions = {}) {
+    this.pageSize = opts.pageSize ?? 30;
+    this.debounceMs = opts.debounceMs ?? 300;
+    this.filterDebounceMs = opts.filterDebounceMs ?? 150;
+    this.minQueryLength = opts.minQueryLength ?? 4;
+    this.webFilterParam = opts.webFilterParam ?? (() => '');
+    this.fetchImpl = opts.fetchImpl ?? ((...a) => fetch(...a));
+  }
+
+  runDebounced(): void {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    if (this.skipNextDebounce) {
+      this.skipNextDebounce = false;
+      return;
+    }
+    const q = this.query.trim();
+    if (q.length < this.minQueryLength) {
+      this.resetResults();
+      return;
+    }
+    this.searching = true;
+    this.webHits = [];
+    this.webSearching = false;
+    this.webError = null;
+    this.debounceTimer = setTimeout(() => {
+      void this.runSearch(q);
+    }, this.debounceMs);
+  }
+
+  async runSearch(q: string): Promise<void> {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = null;
+    this.localExhausted = false;
+    this.webPageno = 0;
+    this.webExhausted = false;
+    try {
+      const res = await this.fetchImpl(
+        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}`
+      );
+      const body = (await res.json()) as { hits: SearchHit[] };
+      if (this.query.trim() !== q) return;
+      this.hits = body.hits;
+      this.searchedFor = q;
+      if (this.hits.length < this.pageSize) this.localExhausted = true;
+      if (this.hits.length === 0) {
+        await this.runWebSearch(q, 1);
+      }
+    } finally {
+      if (this.query.trim() === q) this.searching = false;
+    }
+  }
+
+  private async runWebSearch(q: string, pageno: number): Promise<void> {
+    this.webSearching = true;
+    try {
+      const res = await this.fetchImpl(
+        `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${pageno}${this.webFilterParam()}`
+      );
+      if (this.query.trim() !== q) return;
+      if (!res.ok) {
+        const err = (await res.json().catch(() => ({}))) as { message?: string };
+        this.webError = err.message ?? `HTTP ${res.status}`;
+        this.webExhausted = true;
+        return;
+      }
+      const body = (await res.json()) as { hits: WebHit[] };
+      this.webHits = pageno === 1 ? body.hits : [...this.webHits, ...body.hits];
+      this.webPageno = pageno;
+      if (body.hits.length === 0) this.webExhausted = true;
+    } finally {
+      if (this.query.trim() === q) this.webSearching = false;
+    }
+  }
+
+  async loadMore(): Promise<void> {
+    if (this.loadingMore) return;
+    const q = this.query.trim();
+    if (!q) return;
+    this.loadingMore = true;
+    try {
+      if (!this.localExhausted) {
+        const res = await this.fetchImpl(
+          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${this.pageSize}&offset=${this.hits.length}`
+        );
+        const body = (await res.json()) as { hits: SearchHit[] };
+        if (this.query.trim() !== q) return;
+        const more = body.hits;
+        const seen = new Set(this.hits.map((h) => h.id));
+        const deduped = more.filter((h) => !seen.has(h.id));
+        this.hits = [...this.hits, ...deduped];
+        if (more.length < this.pageSize) this.localExhausted = true;
+      } else if (!this.webExhausted) {
+        const nextPage = this.webPageno + 1;
+        const wasEmpty = this.webHits.length === 0;
+        if (wasEmpty) this.webSearching = true;
+        try {
+          const res = await this.fetchImpl(
+            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${this.webFilterParam()}`
+          );
+          if (this.query.trim() !== q) return;
+          if (!res.ok) {
+            const err = (await res.json().catch(() => ({}))) as { message?: string };
+            this.webError = err.message ?? `HTTP ${res.status}`;
+            this.webExhausted = true;
+            return;
+          }
+          const body = (await res.json()) as { hits: WebHit[] };
+          const more = body.hits;
+          const seen = new Set(this.webHits.map((h) => h.url));
+          const deduped = more.filter((h) => !seen.has(h.url));
+          if (deduped.length === 0) {
+            this.webExhausted = true;
+          } else {
+            this.webHits = [...this.webHits, ...deduped];
+            this.webPageno = nextPage;
+          }
+        } finally {
+          if (this.query.trim() === q) this.webSearching = false;
+        }
+      }
+    } finally {
+      this.loadingMore = false;
+    }
+  }
+
+  reSearch(): void {
+    const q = this.query.trim();
+    if (q.length < this.minQueryLength) return;
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.searching = true;
+    this.webHits = [];
+    this.webSearching = false;
+    this.webError = null;
+    this.debounceTimer = setTimeout(() => void this.runSearch(q), this.filterDebounceMs);
+  }
+
+  reset(): void {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.debounceTimer = null;
+    this.query = '';
+    this.resetResults();
+  }
+
+  private resetResults(): void {
+    this.hits = [];
+    this.webHits = [];
+    this.searchedFor = null;
+    this.searching = false;
+    this.webSearching = false;
+    this.webError = null;
+    this.localExhausted = false;
+    this.webPageno = 0;
+    this.webExhausted = false;
+  }
+
+  captureSnapshot(): SearchSnapshot {
+    return {
+      query: this.query,
+      hits: this.hits,
+      webHits: this.webHits,
+      searchedFor: this.searchedFor,
+      webError: this.webError,
+      localExhausted: this.localExhausted,
+      webPageno: this.webPageno,
+      webExhausted: this.webExhausted
+    };
+  }
+
+  restoreSnapshot(s: SearchSnapshot): void {
+    this.skipNextDebounce = true;
+    this.query = s.query;
+    this.hits = s.hits;
+    this.webHits = s.webHits;
+    this.searchedFor = s.searchedFor;
+    this.webError = s.webError;
+    this.localExhausted = s.localExhausted;
+    this.webPageno = s.webPageno;
+    this.webExhausted = s.webExhausted;
+  }
+}

src/lib/client/shopping-cart.svelte.ts

@@ -0,0 +1,52 @@
+type Snapshot = {
+  recipes: { recipe_id: number }[];
+  uncheckedCount: number;
+};
+
+export class ShoppingCartStore {
+  uncheckedCount = $state(0);
+  recipeIds = $state<Set<number>>(new Set());
+  loaded = $state(false);
+
+  private readonly fetchImpl: typeof fetch;
+
+  constructor(fetchImpl?: typeof fetch) {
+    this.fetchImpl = fetchImpl ?? ((...a) => fetch(...a));
+  }
+
+  async refresh(): Promise<void> {
+    try {
+      const res = await this.fetchImpl('/api/shopping-list');
+      if (!res.ok) return;
+      const body = (await res.json()) as Snapshot;
+      this.recipeIds = new Set(body.recipes.map((r) => r.recipe_id));
+      this.uncheckedCount = body.uncheckedCount;
+      this.loaded = true;
+    } catch {
+      // keep last known state on network error
+    }
+  }
+
+  async addRecipe(recipeId: number): Promise<void> {
+    const res = await this.fetchImpl('/api/shopping-list/recipe', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ recipe_id: recipeId })
+    });
+    // Consume body to avoid leaking response, even if we ignore the payload.
+    await res.json().catch(() => null);
+    await this.refresh();
+  }
+
+  async removeRecipe(recipeId: number): Promise<void> {
+    const res = await this.fetchImpl(`/api/shopping-list/recipe/${recipeId}`, { method: 'DELETE' });
+    await res.json().catch(() => null);
+    await this.refresh();
+  }
+
+  isInCart(recipeId: number): boolean {
+    return this.recipeIds.has(recipeId);
+  }
+}
+
+export const shoppingCartStore = new ShoppingCartStore();

src/lib/components/ImageUploadBox.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { ImagePlus, ImageOff } from 'lucide-svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
+  import { requireOnline } from '$lib/client/require-online';
+
+  type Props = {
+    recipeId: number;
+    imagePath: string | null;
+    onchange: (path: string | null) => void;
+  };
+
+  let { recipeId, imagePath: initial, onchange }: Props = $props();
+
+  let imagePath = $state<string | null>(untrack(() => initial));
+  let uploading = $state(false);
+  let fileInput: HTMLInputElement | null = $state(null);
+
+  const imageSrc = $derived(
+    imagePath === null
+      ? null
+      : /^https?:\/\//i.test(imagePath)
+        ? imagePath
+        : `/images/${imagePath}`
+  );
+
+  async function onFileChosen(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    input.value = '';
+    if (!file) return;
+    if (!requireOnline('Der Bild-Upload')) return;
+    uploading = true;
+    try {
+      const fd = new FormData();
+      fd.append('file', file);
+      const res = await asyncFetch(
+        `/api/recipes/${recipeId}/image`,
+        { method: 'POST', body: fd },
+        'Upload fehlgeschlagen'
+      );
+      if (!res) return;
+      const body = await res.json();
+      imagePath = body.image_path;
+      onchange(imagePath);
+    } finally {
+      uploading = false;
+    }
+  }
+
+  async function removeImage() {
+    if (imagePath === null) return;
+    const ok = await confirmAction({
+      title: 'Bild entfernen?',
+      message: 'Das Rezept wird danach ohne Titelbild angezeigt.',
+      confirmLabel: 'Entfernen',
+      destructive: true
+    });
+    if (!ok) return;
+    if (!requireOnline('Das Entfernen')) return;
+    uploading = true;
+    try {
+      const res = await asyncFetch(
+        `/api/recipes/${recipeId}/image`,
+        { method: 'DELETE' },
+        'Entfernen fehlgeschlagen'
+      );
+      if (!res) return;
+      imagePath = null;
+      onchange(null);
+    } finally {
+      uploading = false;
+    }
+  }
+</script>
+
+<div class="image-row">
+  <div class="image-preview" class:empty={!imageSrc}>
+    {#if imageSrc}
+      <img src={imageSrc} alt="" />
+    {:else}
+      <span class="placeholder">Kein Bild</span>
+    {/if}
+  </div>
+  <div class="image-actions">
+    <button
+      class="btn"
+      type="button"
+      onclick={() => fileInput?.click()}
+      disabled={uploading}
+    >
+      <ImagePlus size={16} strokeWidth={2} />
+      <span>{imagePath ? 'Bild ersetzen' : 'Bild hochladen'}</span>
+    </button>
+    {#if imagePath}
+      <button class="btn ghost" type="button" onclick={removeImage} disabled={uploading}>
+        <ImageOff size={16} strokeWidth={2} />
+        <span>Entfernen</span>
+      </button>
+    {/if}
+    {#if uploading}
+      <span class="upload-status">Lade …</span>
+    {/if}
+  </div>
+  <input
+    bind:this={fileInput}
+    type="file"
+    accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
+    class="file-input"
+    onchange={onFileChosen}
+  />
+</div>
+<p class="image-hint">Max. 10 MB. JPG, PNG, WebP, GIF oder AVIF.</p>
+
+<style>
+  .image-row {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+  .image-preview {
+    width: 160px;
+    aspect-ratio: 16 / 10;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #eef3ef;
+    border: 1px solid #e4eae7;
+    flex-shrink: 0;
+  }
+  .image-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .image-preview.empty {
+    display: grid;
+    place-items: center;
+    color: #999;
+    font-size: 0.85rem;
+  }
+  .image-preview .placeholder {
+    padding: 0 0.5rem;
+    text-align: center;
+  }
+  .image-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .upload-status {
+    color: #666;
+    font-size: 0.9rem;
+  }
+  .file-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .image-hint {
+    margin: 0.6rem 0 0;
+    color: #888;
+    font-size: 0.8rem;
+  }
+  .btn {
+    padding: 0.55rem 0.85rem;
+    border-radius: 10px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.9rem;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .btn.ghost {
+    color: #666;
+  }
+  .btn:disabled {
+    opacity: 0.6;
+    cursor: progress;
+  }
+</style>

src/lib/components/IngredientRow.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+  import { Trash2, ChevronUp, ChevronDown, Plus } from 'lucide-svelte';
+  import type { DraftIng } from './recipe-editor-types';
+
+  type Props = {
+    ing: DraftIng;
+    idx: number;
+    total: number;
+    onmove: (dir: -1 | 1) => void;
+    onremove: () => void;
+    onaddSection: () => void;
+    onremoveSection: () => void;
+  };
+
+  let { ing, idx, total, onmove, onremove, onaddSection, onremoveSection }: Props = $props();
+</script>
+
+{#if ing.section_heading === null}
+  <li class="section-insert">
+    <button type="button" class="add-section" onclick={onaddSection}>
+      <Plus size={12} strokeWidth={2.5} />
+      <span>Abschnitt hinzufügen</span>
+    </button>
+  </li>
+{:else}
+  <li class="section-heading-row">
+    <input
+      class="section-heading"
+      type="text"
+      bind:value={ing.section_heading}
+      placeholder='Sektion, z. B. „Für den Teig"'
+      aria-label="Sektionsüberschrift"
+    />
+    <button
+      type="button"
+      class="section-remove"
+      aria-label="Sektion entfernen"
+      onclick={onremoveSection}
+    >
+      <Trash2 size={14} strokeWidth={2} />
+    </button>
+  </li>
+{/if}
+<li class="ing-row">
+  <div class="move">
+    <button
+      class="move-btn"
+      type="button"
+      aria-label="Zutat nach oben"
+      disabled={idx === 0}
+      onclick={() => onmove(-1)}
+    >
+      <ChevronUp size={14} strokeWidth={2.5} />
+    </button>
+    <button
+      class="move-btn"
+      type="button"
+      aria-label="Zutat nach unten"
+      disabled={idx === total - 1}
+      onclick={() => onmove(1)}
+    >
+      <ChevronDown size={14} strokeWidth={2.5} />
+    </button>
+  </div>
+  <input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
+  <input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
+  <input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
+  <input class="note" type="text" bind:value={ing.note} placeholder="Notiz" aria-label="Notiz" />
+  <button class="del" type="button" aria-label="Zutat entfernen" onclick={onremove}>
+    <Trash2 size={16} strokeWidth={2} />
+  </button>
+</li>
+
+<style>
+  .ing-row {
+    display: grid;
+    grid-template-columns: 28px 70px 70px 1fr 1fr 40px;
+    gap: 0.35rem;
+    align-items: center;
+  }
+  .move {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .move-btn {
+    width: 28px;
+    height: 20px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #555;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+  .move-btn:hover:not(:disabled) {
+    background: #f4f8f5;
+  }
+  .move-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+  .ing-row input {
+    padding: 0.5rem 0.55rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    min-height: 38px;
+    font-family: inherit;
+    min-width: 0;
+  }
+  .del {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #f1b4b4;
+    background: white;
+    color: #c53030;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .del:hover {
+    background: #fdf3f3;
+  }
+  @media (max-width: 560px) {
+    .ing-row {
+      grid-template-columns: 28px 70px 1fr 40px;
+      grid-template-areas:
+        'move qty name del'
+        'move unit unit del'
+        'note note note note';
+    }
+    .ing-row .move {
+      grid-area: move;
+    }
+    .ing-row .qty {
+      grid-area: qty;
+    }
+    .ing-row .unit {
+      grid-area: unit;
+    }
+    .ing-row .name {
+      grid-area: name;
+    }
+    .ing-row .note {
+      grid-area: note;
+    }
+    .ing-row .del {
+      grid-area: del;
+    }
+  }
+  .section-insert {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    margin: -0.2rem 0 0.1rem;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+  /* Parent-UL liegt im RecipeEditor, daher :global(.ing-list). Ohne das
+     scopt Svelte die Klasse und der Selector matcht zur Laufzeit nicht. */
+  :global(.ing-list):hover .section-insert,
+  .section-insert:focus-within {
+    opacity: 1;
+  }
+  .add-section {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.2rem 0.55rem;
+    border: 1px dashed #cfd9d1;
+    background: white;
+    color: #2b6a3d;
+    border-radius: 999px;
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-family: inherit;
+  }
+  .add-section:hover {
+    background: #f4f8f5;
+  }
+  .section-heading-row {
+    display: grid;
+    grid-template-columns: 1fr 32px;
+    gap: 0.35rem;
+    list-style: none;
+    margin-top: 0.4rem;
+  }
+  .section-heading {
+    padding: 0.45rem 0.7rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #2b6a3d;
+    font-family: inherit;
+    background: #f4f8f5;
+  }
+  .section-remove {
+    width: 32px;
+    height: 38px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    border-radius: 8px;
+    color: #666;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .section-remove:hover {
+    background: #fdf3f3;
+    border-color: #f1b4b4;
+    color: #c53030;
+  }
+</style>

src/lib/components/ProfileSwitcher.svelte

@@ -99,7 +99,7 @@
     align-items: center;
     gap: 0.4rem;
     padding: 0.5rem 0.9rem;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     border: 1px solid #cfd9d1;
     background: white;
     font-size: 0.95rem;

src/lib/components/RecipeEditor.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
-  import { Plus, Trash2, ChevronUp, ChevronDown, ImagePlus, ImageOff } from 'lucide-svelte';
+  import { untrack } from 'svelte';
+  import { Plus } from 'lucide-svelte';
   import type { Recipe, Ingredient, Step } from '$lib/types';
-  import { alertAction, confirmAction } from '$lib/client/confirm.svelte';
-  import { requireOnline } from '$lib/client/require-online';
+  import ImageUploadBox from '$lib/components/ImageUploadBox.svelte';
+  import IngredientRow from '$lib/components/IngredientRow.svelte';
+  import StepList from '$lib/components/StepList.svelte';
+  import type { DraftIng, DraftStep } from '$lib/components/recipe-editor-types';
 
   type Props = {
     recipe: Recipe;
@@ -25,104 +28,32 @@
 
   let { recipe, saving = false, onsave, oncancel, onimagechange }: Props = $props();
 
-  let imagePath = $state<string | null>(recipe.image_path);
-  let uploading = $state(false);
-  let fileInput: HTMLInputElement | null = $state(null);
-
-  const imageSrc = $derived(
-    imagePath === null
-      ? null
-      : /^https?:\/\//i.test(imagePath)
-        ? imagePath
-        : `/images/${imagePath}`
-  );
-
-  async function onFileChosen(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const file = input.files?.[0];
-    input.value = '';
-    if (!file) return;
-    if (!requireOnline('Der Bild-Upload')) return;
-    uploading = true;
-    try {
-      const fd = new FormData();
-      fd.append('file', file);
-      const res = await fetch(`/api/recipes/${recipe.id}/image`, {
-        method: 'POST',
-        body: fd
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        await alertAction({
-          title: 'Upload fehlgeschlagen',
-          message: body.message ?? `HTTP ${res.status}`
-        });
-        return;
-      }
-      const body = await res.json();
-      imagePath = body.image_path;
-      onimagechange?.(imagePath);
-    } finally {
-      uploading = false;
-    }
-  }
-
-  async function removeImage() {
-    if (imagePath === null) return;
-    const ok = await confirmAction({
-      title: 'Bild entfernen?',
-      message: 'Das Rezept wird danach ohne Titelbild angezeigt.',
-      confirmLabel: 'Entfernen',
-      destructive: true
-    });
-    if (!ok) return;
-    if (!requireOnline('Das Entfernen')) return;
-    uploading = true;
-    try {
-      const res = await fetch(`/api/recipes/${recipe.id}/image`, { method: 'DELETE' });
-      if (!res.ok) {
-        await alertAction({
-          title: 'Entfernen fehlgeschlagen',
-          message: `HTTP ${res.status}`
-        });
-        return;
-      }
-      imagePath = null;
-      onimagechange?.(null);
-    } finally {
-      uploading = false;
-    }
-  }
-
-  let title = $state(recipe.title);
-  let description = $state(recipe.description ?? '');
-  let servings = $state<number | ''>(recipe.servings_default ?? '');
-  let prepMin = $state<number | ''>(recipe.prep_time_min ?? '');
-  let cookMin = $state<number | ''>(recipe.cook_time_min ?? '');
-  let totalMin = $state<number | ''>(recipe.total_time_min ?? '');
-
-  type DraftIng = {
-    qty: string;
-    unit: string;
-    name: string;
-    note: string;
-  };
-  type DraftStep = { text: string };
+  // Form-lokaler Zustand: Initialwerte aus dem Prop snapshotten (untrack),
+  // damit User-Edits nicht von prop-Updates ueberschrieben werden.
+  let title = $state(untrack(() => recipe.title));
+  let description = $state(untrack(() => recipe.description ?? ''));
+  let servings = $state<number | ''>(untrack(() => recipe.servings_default ?? ''));
+  let prepMin = $state<number | ''>(untrack(() => recipe.prep_time_min ?? ''));
+  let cookMin = $state<number | ''>(untrack(() => recipe.cook_time_min ?? ''));
+  let totalMin = $state<number | ''>(untrack(() => recipe.total_time_min ?? ''));
 
   let ingredients = $state<DraftIng[]>(
-    recipe.ingredients.map((i) => ({
-      qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
-      unit: i.unit ?? '',
-      name: i.name,
-      note: i.note ?? ''
-    }))
+    untrack(() =>
+      recipe.ingredients.map((i) => ({
+        qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
+        unit: i.unit ?? '',
+        name: i.name,
+        note: i.note ?? '',
+        section_heading: i.section_heading
+      }))
+    )
   );
   let steps = $state<DraftStep[]>(
-    recipe.steps.map((s) => ({ text: s.text }))
+    untrack(() => recipe.steps.map((s) => ({ text: s.text })))
   );
 
   function addIngredient() {
-    ingredients = [...ingredients, { qty: '', unit: '', name: '', note: '' }];
+    ingredients = [...ingredients, { qty: '', unit: '', name: '', note: '', section_heading: null }];
   }
   function removeIngredient(idx: number) {
     ingredients = ingredients.filter((_, i) => i !== idx);
@@ -134,6 +65,16 @@
     [next[idx], next[target]] = [next[target], next[idx]];
     ingredients = next;
   }
+  function addSection(idx: number) {
+    const next = [...ingredients];
+    next[idx] = { ...next[idx], section_heading: '' };
+    ingredients = next;
+  }
+  function removeSection(idx: number) {
+    const next = [...ingredients];
+    next[idx] = { ...next[idx], section_heading: null };
+    ingredients = next;
+  }
   function addStep() {
     steps = [...steps, { text: '' }];
   }
@@ -164,13 +105,15 @@
         if (qty !== null) rawParts.push(String(qty).replace('.', ','));
         if (unit) rawParts.push(unit);
         rawParts.push(name);
+        const heading = i.section_heading === null ? null : (i.section_heading.trim() || null);
         return {
           position: idx + 1,
           quantity: qty,
           unit,
           name,
           note,
-          raw_text: rawParts.join(' ')
+          raw_text: rawParts.join(' '),
+          section_heading: heading
         };
       });
     const cleanedSteps: Step[] = steps
@@ -191,51 +134,20 @@
 </script>
 
 <div class="editor">
-  <section class="block image-block">
-    <h2>Bild</h2>
-    <div class="image-row">
-      <div class="image-preview" class:empty={!imageSrc}>
-        {#if imageSrc}
-          <img src={imageSrc} alt="" />
-        {:else}
-          <span class="placeholder">Kein Bild</span>
-        {/if}
-      </div>
-      <div class="image-actions">
-        <button
-          class="btn"
-          type="button"
-          onclick={() => fileInput?.click()}
-          disabled={uploading}
-        >
-          <ImagePlus size={16} strokeWidth={2} />
-          <span>{imagePath ? 'Bild ersetzen' : 'Bild hochladen'}</span>
-        </button>
-        {#if imagePath}
-          <button
-            class="btn ghost"
-            type="button"
-            onclick={removeImage}
-            disabled={uploading}
-          >
-            <ImageOff size={16} strokeWidth={2} />
-            <span>Entfernen</span>
-          </button>
-        {/if}
-        {#if uploading}
-          <span class="upload-status">Lade …</span>
-        {/if}
-      </div>
-      <input
-        bind:this={fileInput}
-        type="file"
-        accept="image/jpeg,image/png,image/webp,image/gif,image/avif"
-        class="file-input"
-        onchange={onFileChosen}
+  {#if recipe.id !== null}
+    <section class="block">
+      <h2>Bild</h2>
+      <ImageUploadBox
+        recipeId={recipe.id}
+        imagePath={recipe.image_path}
+        onchange={(p) => onimagechange?.(p)}
       />
-    </div>
-    <p class="image-hint">Max. 10 MB. JPG, PNG, WebP, GIF oder AVIF.</p>
-  </section>
+    </section>
+  {:else}
+    <section class="block info">
+      <p class="hint">Bild kannst du nach dem Speichern hinzufügen.</p>
+    </section>
+  {/if}
 
   <div class="meta">
     <label class="field">
@@ -275,35 +187,15 @@
     <h2>Zutaten</h2>
     <ul class="ing-list">
       {#each ingredients as ing, idx (idx)}
-        <li class="ing-row">
-          <div class="move">
-            <button
-              class="move-btn"
-              type="button"
-              aria-label="Zutat nach oben"
-              disabled={idx === 0}
-              onclick={() => moveIngredient(idx, -1)}
-            >
-              <ChevronUp size={14} strokeWidth={2.5} />
-            </button>
-            <button
-              class="move-btn"
-              type="button"
-              aria-label="Zutat nach unten"
-              disabled={idx === ingredients.length - 1}
-              onclick={() => moveIngredient(idx, 1)}
-            >
-              <ChevronDown size={14} strokeWidth={2.5} />
-            </button>
-          </div>
-          <input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
-          <input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
-          <input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
-          <input class="note" type="text" bind:value={ing.note} placeholder="Notiz" aria-label="Notiz" />
-          <button class="del" type="button" aria-label="Zutat entfernen" onclick={() => removeIngredient(idx)}>
-            <Trash2 size={16} strokeWidth={2} />
-          </button>
-        </li>
+        <IngredientRow
+          {ing}
+          {idx}
+          total={ingredients.length}
+          onmove={(dir) => moveIngredient(idx, dir)}
+          onremove={() => removeIngredient(idx)}
+          onaddSection={() => addSection(idx)}
+          onremoveSection={() => removeSection(idx)}
+        />
       {/each}
     </ul>
     <button class="add" type="button" onclick={addIngredient}>
@@ -314,25 +206,7 @@
 
   <section class="block">
     <h2>Zubereitung</h2>
-    <ol class="step-list">
-      {#each steps as step, idx (idx)}
-        <li class="step-row">
-          <span class="num">{idx + 1}</span>
-          <textarea
-            bind:value={step.text}
-            rows="3"
-            placeholder="Schritt beschreiben …"
-          ></textarea>
-          <button class="del" type="button" aria-label="Schritt entfernen" onclick={() => removeStep(idx)}>
-            <Trash2 size={16} strokeWidth={2} />
-          </button>
-        </li>
-      {/each}
-    </ol>
-    <button class="add" type="button" onclick={addStep}>
-      <Plus size={16} strokeWidth={2} />
-      <span>Schritt hinzufügen</span>
-    </button>
+    <StepList {steps} onadd={addStep} onremove={removeStep} />
   </section>
 
   <div class="foot">
@@ -398,74 +272,21 @@
     border-radius: 12px;
     padding: 1rem;
   }
-  .image-row {
-    display: flex;
-    gap: 1rem;
-    align-items: flex-start;
-    flex-wrap: wrap;
-  }
-  .image-preview {
-    width: 160px;
-    aspect-ratio: 16 / 10;
-    border-radius: 10px;
-    overflow: hidden;
-    background: #eef3ef;
-    border: 1px solid #e4eae7;
-    flex-shrink: 0;
-  }
-  .image-preview img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-  .image-preview.empty {
-    display: grid;
-    place-items: center;
-    color: #999;
-    font-size: 0.85rem;
-  }
-  .image-preview .placeholder {
-    padding: 0 0.5rem;
-    text-align: center;
-  }
-  .image-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    align-items: center;
-  }
-  .image-actions .btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.55rem 0.85rem;
-    min-height: 40px;
-    font-size: 0.9rem;
-  }
-  .upload-status {
-    color: #666;
-    font-size: 0.9rem;
-  }
-  .file-input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    opacity: 0;
-    pointer-events: none;
-  }
-  .image-hint {
-    margin: 0.6rem 0 0;
-    color: #888;
-    font-size: 0.8rem;
-  }
   .block h2 {
     font-size: 1.05rem;
     margin: 0 0 0.75rem;
     color: #2b6a3d;
   }
-  .ing-list,
-  .step-list {
+  .block.info {
+    background: #f6faf7;
+    border: 1px dashed #cfd9d1;
+  }
+  .hint {
+    color: #666;
+    margin: 0;
+    font-size: 0.9rem;
+  }
+  .ing-list {
     list-style: none;
     padding: 0;
     margin: 0 0 0.6rem;
@@ -473,88 +294,6 @@
     flex-direction: column;
     gap: 0.4rem;
   }
-  .ing-row {
-    display: grid;
-    grid-template-columns: 28px 70px 70px 1fr 1fr 40px;
-    gap: 0.35rem;
-    align-items: center;
-  }
-  .move {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .move-btn {
-    width: 28px;
-    height: 20px;
-    border: 1px solid #cfd9d1;
-    background: white;
-    border-radius: 6px;
-    cursor: pointer;
-    color: #555;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-  }
-  .move-btn:hover:not(:disabled) {
-    background: #f4f8f5;
-  }
-  .move-btn:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-  .ing-row input {
-    padding: 0.5rem 0.55rem;
-    border: 1px solid #cfd9d1;
-    border-radius: 8px;
-    font-size: 0.9rem;
-    min-height: 38px;
-    font-family: inherit;
-    min-width: 0;
-  }
-  .step-row {
-    display: grid;
-    grid-template-columns: 32px 1fr 40px;
-    gap: 0.5rem;
-    align-items: start;
-  }
-  .num {
-    width: 32px;
-    height: 32px;
-    background: #2b6a3d;
-    color: white;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    font-weight: 600;
-    font-size: 0.9rem;
-    margin-top: 0.25rem;
-  }
-  .step-row textarea {
-    padding: 0.55rem 0.7rem;
-    border: 1px solid #cfd9d1;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    font-family: inherit;
-    resize: vertical;
-    min-height: 70px;
-  }
-  .del {
-    width: 40px;
-    height: 40px;
-    border: 1px solid #f1b4b4;
-    background: white;
-    color: #c53030;
-    border-radius: 8px;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .del:hover {
-    background: #fdf3f3;
-  }
   .add {
     display: inline-flex;
     align-items: center;
@@ -600,31 +339,4 @@
     opacity: 0.6;
     cursor: progress;
   }
-  @media (max-width: 560px) {
-    .ing-row {
-      grid-template-columns: 28px 70px 1fr 40px;
-      grid-template-areas:
-        'move qty name del'
-        'move unit unit del'
-        'note note note note';
-    }
-    .ing-row .move {
-      grid-area: move;
-    }
-    .ing-row .qty {
-      grid-area: qty;
-    }
-    .ing-row .unit {
-      grid-area: unit;
-    }
-    .ing-row .name {
-      grid-area: name;
-    }
-    .ing-row .note {
-      grid-area: note;
-    }
-    .ing-row .del {
-      grid-area: del;
-    }
-  }
 </style>

src/lib/components/RecipeView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { scaleIngredients } from '$lib/recipes/scaler';
   import type { Recipe } from '$lib/types';
+  import TimeDisplay from '$lib/components/TimeDisplay.svelte';
 
   type Props = {
     recipe: Recipe;
@@ -41,15 +42,6 @@
     if (Number.isInteger(q)) return String(q);
     return q.toLocaleString('de-DE', { maximumFractionDigits: 2 });
   }
-
-  function timeSummary(): string {
-    const parts: string[] = [];
-    if (recipe.prep_time_min) parts.push(`Vorb. ${recipe.prep_time_min} min`);
-    if (recipe.cook_time_min) parts.push(`Kochen ${recipe.cook_time_min} min`);
-    if (!recipe.prep_time_min && !recipe.cook_time_min && recipe.total_time_min)
-      parts.push(`Gesamt ${recipe.total_time_min} min`);
-    return parts.join(' · ');
-  }
 </script>
 
 {#if banner}
@@ -79,9 +71,11 @@
           {/each}
         {/if}
       </div>
-      {#if timeSummary()}
-        <p class="times">{timeSummary()}</p>
-      {/if}
+      <TimeDisplay
+        prepTimeMin={recipe.prep_time_min}
+        cookTimeMin={recipe.cook_time_min}
+        totalTimeMin={recipe.total_time_min}
+      />
       {#if recipe.source_url}
         <p class="src">
           Quelle: <a href={recipe.source_url} target="_blank" rel="noopener">{recipe.source_domain}</a>
@@ -133,6 +127,9 @@
       </div>
       <ul class="ing-list">
         {#each scaled as ing, i (i)}
+          {#if ing.section_heading && ing.section_heading.trim()}
+            <li class="section-heading">{ing.section_heading}</li>
+          {/if}
           <li>
             {#if ing.quantity !== null || ing.unit}
               <span class="qty">
@@ -204,7 +201,7 @@
   .pill {
     padding: 0.15rem 0.55rem;
     background: #eaf4ed;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.8rem;
     color: #2b6a3d;
   }
@@ -212,11 +209,6 @@
     font-size: 0.8rem;
     color: #888;
   }
-  .times {
-    margin: 0 0 0.25rem;
-    color: #666;
-    font-size: 0.9rem;
-  }
   .src {
     margin: 0;
     font-size: 0.85rem;
@@ -292,6 +284,19 @@
     padding: 0;
     margin: 0;
   }
+  .ing-list .section-heading {
+    list-style: none;
+    font-weight: 700;
+    color: #2b6a3d;
+    font-size: 1.2rem;
+    margin-top: 1.1rem;
+    margin-bottom: 0.3rem;
+    padding: 0.2rem 0;
+    border-bottom: 1px solid #e4eae7;
+  }
+  .ing-list .section-heading:first-child {
+    margin-top: 0;
+  }
   .ing-list li {
     display: flex;
     gap: 0.75rem;

src/lib/components/ShoppingCartChip.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { X, Minus, Plus } from 'lucide-svelte';
+  import type { ShoppingCartRecipe } from '$lib/server/shopping/repository';
+
+  let { recipe, onServingsChange, onRemove }: {
+    recipe: ShoppingCartRecipe;
+    onServingsChange: (id: number, servings: number) => void;
+    onRemove: (id: number) => void;
+  } = $props();
+
+  function dec() {
+    if (recipe.servings > 1) onServingsChange(recipe.recipe_id, recipe.servings - 1);
+  }
+  function inc() {
+    if (recipe.servings < 50) onServingsChange(recipe.recipe_id, recipe.servings + 1);
+  }
+</script>
+
+<div class="chip">
+  <a class="title" href={`/recipes/${recipe.recipe_id}`}>{recipe.title}</a>
+  <div class="controls">
+    <button aria-label="Portion weniger" onclick={dec} disabled={recipe.servings <= 1}>
+      <Minus size={16} />
+    </button>
+    <span class="val" aria-label="Portionen">{recipe.servings}p</span>
+    <button aria-label="Portion mehr" onclick={inc} disabled={recipe.servings >= 50}>
+      <Plus size={16} />
+    </button>
+    <button aria-label="Rezept aus Einkaufsliste entfernen" class="rm" onclick={() => onRemove(recipe.recipe_id)}>
+      <X size={16} />
+    </button>
+  </div>
+</div>
+
+<style>
+  .chip {
+    flex: 0 0 auto;
+    padding: 0.5rem 0.75rem;
+    background: white;
+    border: 1px solid #cfd9d1;
+    border-radius: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    min-width: 140px;
+  }
+  .title {
+    color: #2b6a3d;
+    font-weight: 600;
+    font-size: 0.92rem;
+    text-decoration: none;
+    line-height: 1.2;
+    max-width: 160px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .controls { display: flex; gap: 0.25rem; align-items: center; }
+  .controls button {
+    min-width: 32px;
+    min-height: 32px;
+    border-radius: 8px;
+    border: 1px solid #e4eae7;
+    background: white;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #444;
+  }
+  .controls button:disabled { opacity: 0.4; cursor: not-allowed; }
+  .controls button.rm { margin-left: auto; }
+  .controls button.rm:hover { color: #c53030; border-color: #f1b4b4; background: #fdf3f3; }
+  .val { min-width: 32px; text-align: center; font-weight: 600; color: #444; }
+</style>

src/lib/components/ShoppingListRow.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { ShoppingListRow } from '$lib/server/shopping/repository';
+  import { formatQuantity } from '$lib/quantity-format';
+
+  let { row, onToggle }: {
+    row: ShoppingListRow;
+    onToggle: (row: ShoppingListRow, next: boolean) => void;
+  } = $props();
+
+  const qtyStr = $derived(formatQuantity(row.total_quantity));
+  const hasUnit = $derived(!!row.display_unit && row.display_unit.trim().length > 0);
+</script>
+
+<label class="row" class:checked={row.checked}>
+  <input
+    type="checkbox"
+    checked={row.checked === 1}
+    onchange={(e) => onToggle(row, (e.currentTarget as HTMLInputElement).checked)}
+  />
+  <span class="text">
+    <span class="name">
+      {#if qtyStr}
+        <span class="qty">{qtyStr}{hasUnit ? ` ${row.display_unit}` : ''}</span>
+      {/if}
+      {row.display_name}
+    </span>
+    <span class="src">aus {row.from_recipes}</span>
+  </span>
+</label>
+
+<style>
+  .row {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    padding: 0.75rem;
+    border: 1px solid #e4eae7;
+    border-radius: 10px;
+    background: white;
+    cursor: pointer;
+    min-height: 60px;
+  }
+  .row input {
+    width: 24px;
+    height: 24px;
+    margin-top: 0.1rem;
+    flex-shrink: 0;
+    accent-color: #2b6a3d;
+  }
+  .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
+  .name { font-size: 1rem; }
+  .qty { font-weight: 600; margin-right: 0.3rem; }
+  .src { color: #888; font-size: 0.82rem; }
+  .row.checked { background: #f6f8f7; }
+  .row.checked .name,
+  .row.checked .qty { text-decoration: line-through; color: #888; }
+</style>

src/lib/components/StepList.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { Plus, Trash2 } from 'lucide-svelte';
+  import type { DraftStep } from './recipe-editor-types';
+
+  type Props = {
+    steps: DraftStep[];
+    onadd: () => void;
+    onremove: (idx: number) => void;
+  };
+
+  let { steps, onadd, onremove }: Props = $props();
+</script>
+
+<ol class="step-list">
+  {#each steps as step, idx (idx)}
+    <li class="step-row">
+      <span class="num">{idx + 1}</span>
+      <textarea
+        bind:value={step.text}
+        rows="3"
+        placeholder="Schritt beschreiben …"
+      ></textarea>
+      <button class="del" type="button" aria-label="Schritt entfernen" onclick={() => onremove(idx)}>
+        <Trash2 size={16} strokeWidth={2} />
+      </button>
+    </li>
+  {/each}
+</ol>
+<button class="add" type="button" onclick={onadd}>
+  <Plus size={16} strokeWidth={2} />
+  <span>Schritt hinzufügen</span>
+</button>
+
+<style>
+  .step-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 0.6rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+  .step-row {
+    display: grid;
+    grid-template-columns: 32px 1fr 40px;
+    gap: 0.5rem;
+    align-items: start;
+  }
+  .num {
+    width: 32px;
+    height: 32px;
+    background: #2b6a3d;
+    color: white;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-weight: 600;
+    font-size: 0.9rem;
+    margin-top: 0.25rem;
+  }
+  .step-row textarea {
+    padding: 0.55rem 0.7rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-family: inherit;
+    resize: vertical;
+    min-height: 70px;
+  }
+  .del {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #f1b4b4;
+    background: white;
+    color: #c53030;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .del:hover {
+    background: #fdf3f3;
+  }
+  .add {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.55rem 0.9rem;
+    border: 1px dashed #cfd9d1;
+    background: white;
+    color: #2b6a3d;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-family: inherit;
+  }
+  .add:hover {
+    background: #f4f8f5;
+  }
+</style>

src/lib/components/SyncIndicator.svelte

@@ -77,7 +77,7 @@
     padding: 0.3rem 0.65rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #555;
     font-size: 0.78rem;
     cursor: pointer;

src/lib/components/TimeDisplay.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  type Props = {
+    prepTimeMin: number | null;
+    cookTimeMin: number | null;
+    totalTimeMin: number | null;
+  };
+
+  let { prepTimeMin, cookTimeMin, totalTimeMin }: Props = $props();
+
+  const summary = $derived.by(() => {
+    const parts: string[] = [];
+    if (prepTimeMin) parts.push(`Vorb. ${prepTimeMin} min`);
+    if (cookTimeMin) parts.push(`Kochen ${cookTimeMin} min`);
+    if (!prepTimeMin && !cookTimeMin && totalTimeMin)
+      parts.push(`Gesamt ${totalTimeMin} min`);
+    return parts.join(' · ');
+  });
+</script>
+
+{#if summary}
+  <p class="times">{summary}</p>
+{/if}
+
+<style>
+  .times {
+    margin: 0 0 0.25rem;
+    color: #666;
+    font-size: 0.9rem;
+  }
+</style>

src/lib/components/UpdateToast.svelte

@@ -28,7 +28,7 @@
     padding: 0.6rem 0.85rem 0.6rem 1.1rem;
     background: #1a1a1a;
     color: white;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     z-index: 500;
     max-width: calc(100% - 2rem);
@@ -58,7 +58,7 @@
     background: #2b6a3d;
     color: white;
     border: 0;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.88rem;
     cursor: pointer;
     font-weight: 600;
@@ -75,7 +75,7 @@
     padding: 4px;
     display: inline-flex;
     align-items: center;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     flex-shrink: 0;
   }
   .dismiss:hover {

src/lib/components/recipe-editor-types.ts

@@ -0,0 +1,9 @@
+export type DraftIng = {
+  qty: string;
+  unit: string;
+  name: string;
+  note: string;
+  section_heading: string | null;
+};
+
+export type DraftStep = { text: string };

src/lib/quantity-format.ts

@@ -0,0 +1,7 @@
+export function formatQuantity(q: number | null): string {
+  if (q === null || q === undefined) return '';
+  const rounded = Math.round(q);
+  if (Math.abs(q - rounded) < 0.01) return String(rounded);
+  // auf max. 2 Nachkommastellen, trailing Nullen raus
+  return q.toFixed(2).replace(/\.?0+$/, '');
+}

src/lib/server/ai/description-phrases.ts

@@ -0,0 +1,56 @@
+export const DESCRIPTION_PHRASES: readonly string[] = [
+  'Mit dem Zauberstab aus dem Kochbuch geholt.',
+  'Foto-Magie frisch aus dem Ofen.',
+  'Aus dem Bild herbeigezaubert.',
+  'Ein Klick, ein Foto, fertig.',
+  'Knipsen statt Abtippen.',
+  'Von der Buchseite direkt in die Pfanne.',
+  'Die Kamera hat mitgelesen.',
+  'Abrakadabra — Rezept da.',
+  'Per Linse in die Küche teleportiert.',
+  'Von Oma abfotografiert, von der KI entziffert.',
+  'Frisch aus dem Bilderrahmen.',
+  'Klick, zisch, Rezept.',
+  'Das Foto wurde überredet, sich zu verraten.',
+  'Schnappschuss zur Schüssel.',
+  'Einmal lesen lassen, schon da.',
+  'Keine Hand hat dieses Rezept abgetippt.',
+  'Vom Bild in die Bratpfanne.',
+  'Papier ist geduldig, das Foto war es auch.',
+  'Eine Seite, ein Foto, ein Rezept.',
+  'Die KI hat drübergeschielt.',
+  'Handschriftlich entziffert — oder zumindest versucht.',
+  'Aus der Linse in die Liste.',
+  'Vom Küchentisch zur Kachel.',
+  'Knips und weg — zumindest der Zettel.',
+  'Das Bild hat geredet.',
+  'Keine Tippfehler, nur Sehfehler.',
+  'Per Foto eingebürgert.',
+  'Rezept-Übersetzung aus dem Bild.',
+  'Die Seite hat sich verraten.',
+  'Blitzlicht und dann Gulasch.',
+  'Ein Augenzwinkern der Kamera genügte.',
+  'Geknipst, gelesen, gespeichert.',
+  'Fotografische Gedächtnishilfe.',
+  'Aus der Schublade ans Licht.',
+  'Das Rezept stand schon da — wir haben nur hingeguckt.',
+  'Zaubertrick mit Kamera.',
+  'Vom Papier befreit.',
+  'Ein Foto sagt mehr als tausend Zutatenlisten.',
+  'Eingescannt, rausgelesen, reingeschrieben.',
+  'Die Kamera als Küchenhilfe.',
+  'Handy hoch, Rezept runter.',
+  'Aus dem Kochbuch gebeamt.',
+  'Ein scharfes Foto, ein klares Rezept.',
+  'Vom Regal zur App in einem Schritt.',
+  'Aus dem Bild geschöpft wie Suppe aus dem Topf.',
+  'Optisch erfasst, digital serviert.',
+  'Das Kleingedruckte hat die KI gelesen.',
+  'Vom Kladdenzettel in die Datenbank.',
+  'Kurz gezückt, schon gekocht.',
+  'Kein Schreibkrampf, nur ein Klick.'
+];
+
+export function pickRandomPhrase(): string {
+  return DESCRIPTION_PHRASES[Math.floor(Math.random() * DESCRIPTION_PHRASES.length)];
+}

src/lib/server/ai/gemini-client.ts

@@ -0,0 +1,170 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+import { env } from '$env/dynamic/private';
+import {
+  RECIPE_EXTRACTION_SYSTEM_PROMPT,
+  RECIPE_EXTRACTION_USER_PROMPT,
+  GEMINI_RESPONSE_SCHEMA,
+  extractionResponseSchema,
+  type ExtractionResponse
+} from './recipe-extraction-prompt';
+
+export type GeminiErrorCode =
+  | 'AI_NOT_CONFIGURED'
+  | 'AI_RATE_LIMITED'
+  | 'AI_TIMEOUT'
+  | 'AI_FAILED';
+
+export class GeminiError extends Error {
+  constructor(
+    public readonly code: GeminiErrorCode,
+    message: string
+  ) {
+    super(message);
+    this.name = 'GeminiError';
+  }
+}
+
+function getStatus(err: unknown): number | undefined {
+  if (err && typeof err === 'object' && 'status' in err) {
+    const s = (err as { status?: unknown }).status;
+    if (typeof s === 'number') return s;
+  }
+  return undefined;
+}
+
+function getCfg(): { apiKey: string; model: string; timeoutMs: number } {
+  const apiKey = env.GEMINI_API_KEY ?? process.env.GEMINI_API_KEY ?? '';
+  const model =
+    env.GEMINI_MODEL ?? process.env.GEMINI_MODEL ?? 'gemini-2.5-flash';
+  const rawTimeout =
+    env.GEMINI_TIMEOUT_MS ?? process.env.GEMINI_TIMEOUT_MS ?? '20000';
+  const timeoutMs = Number(rawTimeout) || 20000;
+  return { apiKey, model, timeoutMs };
+}
+
+async function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(
+      () => reject(new GeminiError('AI_TIMEOUT', `Gemini timeout after ${ms} ms`)),
+      ms
+    );
+    promise.then(
+      (v) => {
+        clearTimeout(timer);
+        resolve(v);
+      },
+      (e) => {
+        clearTimeout(timer);
+        reject(e);
+      }
+    );
+  });
+}
+
+async function callGemini(
+  imageBuffer: Buffer,
+  mimeType: string,
+  appendUserNote?: string
+): Promise<ExtractionResponse> {
+  const { apiKey, model: modelId, timeoutMs } = getCfg();
+  if (!apiKey) {
+    throw new GeminiError('AI_NOT_CONFIGURED', 'GEMINI_API_KEY is not set');
+  }
+
+  const client = new GoogleGenerativeAI(apiKey);
+  const model = client.getGenerativeModel({
+    model: modelId,
+    systemInstruction: RECIPE_EXTRACTION_SYSTEM_PROMPT,
+    generationConfig: {
+      temperature: 0.1,
+      responseMimeType: 'application/json',
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      responseSchema: GEMINI_RESPONSE_SCHEMA as any
+    }
+  });
+
+  const parts: Array<
+    { inlineData: { data: string; mimeType: string } } | { text: string }
+  > = [
+    { inlineData: { data: imageBuffer.toString('base64'), mimeType } },
+    { text: RECIPE_EXTRACTION_USER_PROMPT }
+  ];
+  if (appendUserNote) parts.push({ text: appendUserNote });
+
+  const result = await withTimeout(
+    model.generateContent({ contents: [{ role: 'user', parts }] }),
+    timeoutMs
+  );
+  const text = result.response.text();
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    throw new GeminiError('AI_FAILED', 'Gemini returned non-JSON output');
+  }
+  const validated = extractionResponseSchema.safeParse(parsed);
+  if (!validated.success) {
+    throw new GeminiError(
+      'AI_FAILED',
+      `Schema validation failed: ${validated.error.message}`
+    );
+  }
+  return validated.data;
+}
+
+// Public entry: one retry on recoverable failures (5xx or schema-invalid),
+// no retry on 429, AI_TIMEOUT, or config errors.
+export async function extractRecipeFromImage(
+  imageBuffer: Buffer,
+  mimeType: string
+): Promise<ExtractionResponse> {
+  let firstMsg: string | null = null;
+  try {
+    return await callGemini(imageBuffer, mimeType);
+  } catch (e) {
+    if (e instanceof GeminiError && e.code === 'AI_NOT_CONFIGURED') throw e;
+    if (e instanceof GeminiError && e.code === 'AI_TIMEOUT') throw e;
+
+    const status = getStatus(e);
+    if (status === 429) throw new GeminiError('AI_RATE_LIMITED', 'Gemini rate limit');
+
+    const recoverable =
+      (e instanceof GeminiError && e.code === 'AI_FAILED') ||
+      (status !== undefined && status >= 500);
+    if (!recoverable) {
+      throw e instanceof GeminiError
+        ? e
+        : new GeminiError('AI_FAILED', String(e));
+    }
+
+    firstMsg = e instanceof Error ? e.message : String(e);
+    console.warn(`[gemini-client] first attempt failed, retrying: ${firstMsg}`);
+
+    await new Promise((r) => setTimeout(r, 500));
+    try {
+      return await callGemini(
+        imageBuffer,
+        mimeType,
+        'Dein vorheriger Output war ungültig. Bitte antworte ausschließlich mit JSON gemäß Schema.'
+      );
+    } catch (retryErr) {
+      const retryMsg = retryErr instanceof Error ? retryErr.message : String(retryErr);
+      if (retryErr instanceof GeminiError) {
+        if (retryErr.code === 'AI_FAILED') {
+          throw new GeminiError(
+            'AI_FAILED',
+            `retry failed: ${retryMsg} (first: ${firstMsg})`
+          );
+        }
+        throw retryErr;
+      }
+      const retryStatus = getStatus(retryErr);
+      if (retryStatus === 429)
+        throw new GeminiError('AI_RATE_LIMITED', 'Gemini rate limit on retry');
+      throw new GeminiError(
+        'AI_FAILED',
+        `retry failed: ${retryMsg} (first: ${firstMsg})`
+      );
+    }
+  }
+}

src/lib/server/ai/image-preprocess.ts

@@ -0,0 +1,54 @@
+import type SharpType from 'sharp';
+import { createRequire } from 'node:module';
+
+const MAX_EDGE = 1600;
+const JPEG_QUALITY = 85;
+
+export type PreprocessedImage = {
+  buffer: Buffer;
+  mimeType: 'image/jpeg';
+};
+
+// sharp per Node-Runtime-require laden, nicht via ES-Import: adapter-node
+// bundelt ES-Imports (auch dynamische, auch mit @vite-ignore) ins Server-
+// Bundle, was sharp's internes dynamic-require fuer die Plattform-.node-Binary
+// zerstoert. createRequire + require() ist pure Node-Runtime-Logik, die
+// Rollup nicht anfasst -- sharp wird regulaer aus node_modules geladen.
+const nodeRequire = createRequire(import.meta.url);
+let sharpModule: typeof SharpType | null = null;
+function loadSharp(): typeof SharpType {
+  if (!sharpModule) {
+    sharpModule = nodeRequire('sharp') as typeof SharpType;
+  }
+  return sharpModule;
+}
+
+// Resize auf max 1600px lange Kante, JPEG re-encode, Metadata strippen.
+// sharp liest HEIC/HEIF transparent, wenn libheif im libvips-Build enthalten ist
+// (in Alpine's vips-dev + in den offiziellen sharp-Prebuilds).
+export async function preprocessImage(input: Buffer): Promise<PreprocessedImage> {
+  const sharp = loadSharp();
+  const pipeline = sharp(input, { failOn: 'error' }).rotate(); // respect EXIF orientation
+  const meta = await pipeline.metadata();
+  if (!meta.width || !meta.height) {
+    throw new Error('Unable to read image dimensions');
+  }
+
+  const longEdge = Math.max(meta.width, meta.height);
+  const resized =
+    longEdge > MAX_EDGE
+      ? pipeline.resize({
+          width: meta.width >= meta.height ? MAX_EDGE : undefined,
+          height: meta.height > meta.width ? MAX_EDGE : undefined,
+          withoutEnlargement: true
+        })
+      : pipeline;
+
+  // Default-Verhalten seit sharp 0.33: alle Metadata (EXIF/IPTC/XMP) werden
+  // gestripped. Nur `.keepMetadata()`/`.keepExif()` würde sie erhalten.
+  const buffer = await resized
+    .jpeg({ quality: JPEG_QUALITY, mozjpeg: true })
+    .toBuffer();
+
+  return { buffer, mimeType: 'image/jpeg' };
+}

src/lib/server/ai/rate-limit.ts

@@ -0,0 +1,21 @@
+export type RateLimiter = { check: (key: string) => boolean };
+
+export function createRateLimiter(opts: {
+  windowMs: number;
+  max: number;
+}): RateLimiter {
+  const store = new Map<string, { count: number; resetAt: number }>();
+  return {
+    check(key: string): boolean {
+      const now = Date.now();
+      const entry = store.get(key);
+      if (!entry || entry.resetAt <= now) {
+        store.set(key, { count: 1, resetAt: now + opts.windowMs });
+        return true;
+      }
+      if (entry.count >= opts.max) return false;
+      entry.count += 1;
+      return true;
+    }
+  };
+}

src/lib/server/ai/recipe-extraction-prompt.ts

@@ -0,0 +1,94 @@
+import { z } from 'zod';
+import { SchemaType } from '@google/generative-ai';
+
+export const RECIPE_EXTRACTION_SYSTEM_PROMPT = `Du bist ein hochpräziser OCR-Experte für kulinarische Dokumente (Rezepte). Deine Aufgabe ist die Extraktion von Rezeptdaten (Titel, Zutaten, Zubereitungsschritte, Zeiten, Portionen) in valides JSON gemäß dem vorgegebenen Schema.
+
+SPRACHE:
+- Die Texte sind ausschließlich auf Deutsch. Nutze deutsches Sprachverständnis (Umlaute ä/ö/ü/ß, deutsche Zutatennamen, deutsche Maßeinheiten) als starken Prior bei der Rekonstruktion unklarer Zeichen. Gib die Ausgabe vollständig auf Deutsch zurück.
+
+LOGIK-REGELN FÜR SCHWER LESBARE TEXTE:
+- Handle als "Kontext-Detektiv": Wenn Zeichen unklar sind, nutze kulinarisches Wissen zur Rekonstruktion (z.B. "Pr-se" -> "Prise").
+- Bei absoluter Unleserlichkeit eines Wortes: Nutze "[?]".
+- Halluziniere keine fehlenden Werte: Wenn eine Mengenangabe komplett fehlt, setze 'quantity' auf null. Was nicht auf dem Bild steht, ist null (oder leeres Array).
+
+FORMATIERUNGS-REGELN:
+- Zutaten: quantity (Zahl) separat von unit (String). Brüche (½, ¼, 1 ½) strikt in Dezimalzahlen (0.5, 0.25, 1.5).
+- Einheiten: Normalisiere auf (g, ml, l, kg, EL, TL, Stück, Prise, Msp).
+- Zubereitungsschritte: pro erkennbarer Nummerierung oder Absatz EIN Schritt.
+- Zeit: Alle Angaben strikt in Minuten (Integer). "1 Stunde" = 60.
+- Rauschen ignorieren: Keine Werbung, Einleitungstexte oder Bildunterschriften extrahieren.
+
+STRIKTE ANWEISUNG: Gib ausschließlich das rohe JSON-Objekt gemäß Schema zurück. Kein Markdown-Code-Block, kein Einleitungstext, keine Prosa.`;
+
+export const RECIPE_EXTRACTION_USER_PROMPT =
+  'Analysiere dieses Bild hochauflösend. Extrahiere alle rezeptrelevanten Informationen gemäß deiner System-Instruktion. Achte besonders auf schwache Handschriften oder verblassten Text und stelle sicher, dass die Zuordnung von Menge zu Zutat logisch korrekt ist.';
+
+// Gemini responseSchema (Subset von OpenAPI). Wird an GenerativeModel.generateContent
+// übergeben; Gemini respektiert die Struktur und liefert valides JSON.
+export const GEMINI_RESPONSE_SCHEMA = {
+  type: SchemaType.OBJECT,
+  properties: {
+    title: { type: SchemaType.STRING, nullable: false },
+    servings_default: { type: SchemaType.INTEGER, nullable: true },
+    servings_unit: { type: SchemaType.STRING, nullable: true },
+    prep_time_min: { type: SchemaType.INTEGER, nullable: true },
+    cook_time_min: { type: SchemaType.INTEGER, nullable: true },
+    total_time_min: { type: SchemaType.INTEGER, nullable: true },
+    ingredients: {
+      type: SchemaType.ARRAY,
+      items: {
+        type: SchemaType.OBJECT,
+        properties: {
+          quantity: { type: SchemaType.NUMBER, nullable: true },
+          unit: { type: SchemaType.STRING, nullable: true },
+          name: { type: SchemaType.STRING, nullable: false },
+          note: { type: SchemaType.STRING, nullable: true }
+        },
+        required: ['name']
+      }
+    },
+    steps: {
+      type: SchemaType.ARRAY,
+      items: {
+        type: SchemaType.OBJECT,
+        properties: {
+          text: { type: SchemaType.STRING, nullable: false }
+        },
+        required: ['text']
+      }
+    }
+  },
+  required: ['title', 'ingredients', 'steps']
+} as const;
+
+// Zod-Spiegel des Schemas. .strict() verhindert, dass Gemini zusätzliche Keys
+// unbemerkt durchschmuggelt.
+const ingredientSchema = z
+  .object({
+    quantity: z.number().nullable(),
+    unit: z.string().max(30).nullable(),
+    name: z.string().min(1).max(200),
+    note: z.string().max(300).nullable()
+  })
+  .strict();
+
+const stepSchema = z
+  .object({
+    text: z.string().min(1).max(4000)
+  })
+  .strict();
+
+export const extractionResponseSchema = z
+  .object({
+    title: z.string().min(1).max(200),
+    servings_default: z.number().int().nonnegative().nullable(),
+    servings_unit: z.string().max(30).nullable(),
+    prep_time_min: z.number().int().nonnegative().nullable(),
+    cook_time_min: z.number().int().nonnegative().nullable(),
+    total_time_min: z.number().int().nonnegative().nullable(),
+    ingredients: z.array(ingredientSchema),
+    steps: z.array(stepSchema)
+  })
+  .strict();
+
+export type ExtractionResponse = z.infer<typeof extractionResponseSchema>;

src/lib/server/db/migrations/012_ingredient_section.sql

@@ -0,0 +1,7 @@
+-- Nullable-Spalte fuer optionale Sektionsueberschriften bei Zutaten. User
+-- soll im Editor gruppieren koennen ("Fuer den Teig", "Fuer die Fuellung").
+-- Rendering-Regel: Ist section_heading gesetzt (nicht NULL, nicht leer),
+-- startet an dieser Zeile eine neue Sektion mit diesem Titel; alle folgenden
+-- Zutaten gehoeren dazu, bis die naechste Zeile wieder eine Ueberschrift hat.
+-- Ordnung bleibt die bestehende position-Spalte.
+ALTER TABLE ingredient ADD COLUMN section_heading TEXT;

src/lib/server/db/migrations/013_shopping_list.sql

@@ -0,0 +1,18 @@
+-- Einkaufsliste: haushaltsweit geteilt. shopping_cart_recipe haelt die
+-- Rezepte im Wagen (inkl. gewuenschter Portionsgroesse), shopping_cart_check
+-- die abgehakten aggregierten Zutaten-Zeilen. Aggregation wird bei jedem
+-- Read aus shopping_cart_recipe JOIN ingredient derived — nichts
+-- materialisiert, damit Rezept-Edits live durchschlagen.
+CREATE TABLE shopping_cart_recipe (
+  recipe_id INTEGER PRIMARY KEY REFERENCES recipe(id) ON DELETE CASCADE,
+  servings INTEGER NOT NULL CHECK (servings > 0),
+  added_by_profile_id INTEGER REFERENCES profile(id) ON DELETE SET NULL,
+  added_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE shopping_cart_check (
+  name_key TEXT NOT NULL,
+  unit_key TEXT NOT NULL,
+  checked_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (name_key, unit_key)
+);

src/lib/server/db/migrations/014_recipe_view.sql

@@ -0,0 +1,10 @@
+-- Merkt je Profil, wann ein Rezept zuletzt angesehen wurde.
+-- Dient als Basis fuer "Zuletzt gesehen"-Sortierung auf der Startseite.
+CREATE TABLE recipe_view (
+  profile_id INTEGER NOT NULL REFERENCES profile(id) ON DELETE CASCADE,
+  recipe_id INTEGER NOT NULL REFERENCES recipe(id) ON DELETE CASCADE,
+  last_viewed_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (profile_id, recipe_id)
+);
+CREATE INDEX idx_recipe_view_recent
+  ON recipe_view (profile_id, last_viewed_at DESC);

src/lib/server/parsers/ingredient.ts

@@ -105,16 +105,16 @@ export function parseIngredient(raw: string, position = 0): Ingredient {
     if (tail.length > 0) {
       const quantity = clampQuantity(UNICODE_FRACTION_MAP[firstChar]);
       const { unit, name } = splitUnitAndName(tail);
-      return { position, quantity, unit, name, note, raw_text: rawText };
+      return { position, quantity, unit, name, note, raw_text: rawText, section_heading: null };
     }
   }
 
   const qtyPattern = /^((?:\d+[.,]?\d*(?:\s*[-–]\s*\d+[.,]?\d*)?)|(?:\d+\/\d+))\s+(.+)$/;
   const qtyMatch = qtyPattern.exec(working);
   if (!qtyMatch) {
-    return { position, quantity: null, unit: null, name: working, note, raw_text: rawText };
+    return { position, quantity: null, unit: null, name: working, note, raw_text: rawText, section_heading: null };
   }
   const quantity = clampQuantity(parseQuantity(qtyMatch[1]));
   const { unit, name } = splitUnitAndName(qtyMatch[2]);
-  return { position, quantity, unit, name, note, raw_text: rawText };
+  return { position, quantity, unit, name, note, raw_text: rawText, section_heading: null };
 }

src/lib/server/recipes/repository.ts

@@ -64,11 +64,11 @@ export function insertRecipe(db: Database.Database, recipe: Recipe): number {
     const id = Number(info.lastInsertRowid);
 
     const insIng = db.prepare(
-      `INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text)
-       VALUES (?, ?, ?, ?, ?, ?, ?)`
+      `INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text, section_heading)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
     );
     for (const ing of recipe.ingredients) {
-      insIng.run(id, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text);
+      insIng.run(id, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text, ing.section_heading);
     }
 
     const insStep = db.prepare(
@@ -104,7 +104,7 @@ export function getRecipeById(db: Database.Database, id: number): Recipe | null
 
   const ingredients = db
     .prepare(
-      `SELECT position, quantity, unit, name, note, raw_text
+      `SELECT position, quantity, unit, name, note, raw_text, section_heading
          FROM ingredient WHERE recipe_id = ? ORDER BY position`
     )
     .all(id) as Ingredient[];
@@ -215,11 +215,11 @@ export function replaceIngredients(
   const tx = db.transaction(() => {
     db.prepare('DELETE FROM ingredient WHERE recipe_id = ?').run(recipeId);
     const ins = db.prepare(
-      `INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text)
-       VALUES (?, ?, ?, ?, ?, ?, ?)`
+      `INSERT INTO ingredient(recipe_id, position, quantity, unit, name, note, raw_text, section_heading)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
     );
     for (const ing of ingredients) {
-      ins.run(recipeId, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text);
+      ins.run(recipeId, ing.position, ing.quantity, ing.unit, ing.name, ing.note, ing.raw_text, ing.section_heading);
     }
     refreshFts(db, recipeId);
   });

src/lib/server/recipes/search-local.ts

@@ -30,15 +30,12 @@ export function searchLocal(
   db: Database.Database,
   query: string,
   limit = 30,
-  offset = 0,
-  domains: string[] = []
+  offset = 0
 ): SearchHit[] {
   const fts = buildFtsQuery(query);
   if (!fts) return [];
 
   // bm25: lower is better. Use weights: title > tags > ingredients > description
-  const hasFilter = domains.length > 0;
-  const placeholders = hasFilter ? domains.map(() => '?').join(',') : '';
   const sql = `SELECT r.id,
               r.title,
               r.description,
@@ -49,13 +46,9 @@ export function searchLocal(
          FROM recipe r
          JOIN recipe_fts f ON f.rowid = r.id
         WHERE recipe_fts MATCH ?
-          ${hasFilter ? `AND r.source_domain IN (${placeholders})` : ''}
         ORDER BY bm25(recipe_fts, 10.0, 0.5, 2.0, 5.0)
         LIMIT ? OFFSET ?`;
-  const params = hasFilter
-    ? [fts, ...domains, limit, offset]
-    : [fts, limit, offset];
-  return db.prepare(sql).all(...params) as SearchHit[];
+  return db.prepare(sql).all(fts, limit, offset) as SearchHit[];
 }
 
 export function listRecentRecipes(
@@ -95,18 +88,44 @@ export function listAllRecipes(db: Database.Database): SearchHit[] {
     .all() as SearchHit[];
 }
 
-export type AllRecipesSort = 'name' | 'rating' | 'cooked' | 'created';
+export type AllRecipesSort = 'name' | 'rating' | 'cooked' | 'created' | 'viewed';
 
 export function listAllRecipesPaginated(
   db: Database.Database,
   sort: AllRecipesSort,
   limit: number,
-  offset: number
+  offset: number,
+  profileId: number | null = null
 ): SearchHit[] {
+  // 'viewed' branch needs a JOIN against recipe_view — diverges from the
+  // simpler ORDER-BY-only path. We keep it in a separate prepare for
+  // clarity. Without profileId, fall back to alphabetical so the
+  // sort-chip still produces a sensible list.
+  if (sort === 'viewed' && profileId !== null) {
+    return db
+      .prepare(
+        `SELECT r.id,
+                r.title,
+                r.description,
+                r.image_path,
+                r.source_domain,
+                (SELECT AVG(stars) FROM rating WHERE recipe_id = r.id) AS avg_stars,
+                (SELECT MAX(cooked_at) FROM cooking_log WHERE recipe_id = r.id) AS last_cooked_at
+           FROM recipe r
+           LEFT JOIN recipe_view v
+             ON v.recipe_id = r.id AND v.profile_id = ?
+          ORDER BY CASE WHEN v.last_viewed_at IS NULL THEN 1 ELSE 0 END,
+                   v.last_viewed_at DESC,
+                   r.title COLLATE NOCASE ASC
+          LIMIT ? OFFSET ?`
+      )
+      .all(profileId, limit, offset) as SearchHit[];
+  }
+
   // NULLS-last-Emulation per CASE-Expression — SQLite unterstützt NULLS LAST
   // zwar seit 3.30, aber der Pi könnte auf einer älteren Version laufen und
   // CASE ist überall zuverlässig.
-  const orderBy: Record<AllRecipesSort, string> = {
+  const orderBy: Record<Exclude<AllRecipesSort, 'viewed'>, string> = {
     name: 'r.title COLLATE NOCASE ASC',
     rating:
       'CASE WHEN (SELECT AVG(stars) FROM rating WHERE recipe_id = r.id) IS NULL THEN 1 ELSE 0 END, ' +
@@ -116,6 +135,8 @@ export function listAllRecipesPaginated(
       '(SELECT MAX(cooked_at) FROM cooking_log WHERE recipe_id = r.id) DESC, r.title COLLATE NOCASE ASC',
     created: 'r.created_at DESC, r.id DESC'
   };
+  // Without profile, 'viewed' degrades to alphabetical.
+  const effectiveSort = sort === 'viewed' ? 'name' : sort;
   return db
     .prepare(
       `SELECT r.id,
@@ -126,7 +147,7 @@ export function listAllRecipesPaginated(
               (SELECT AVG(stars) FROM rating WHERE recipe_id = r.id) AS avg_stars,
               (SELECT MAX(cooked_at) FROM cooking_log WHERE recipe_id = r.id) AS last_cooked_at
          FROM recipe r
-        ORDER BY ${orderBy[sort]}
+        ORDER BY ${orderBy[effectiveSort]}
         LIMIT ? OFFSET ?`
     )
     .all(limit, offset) as SearchHit[];

src/lib/server/recipes/views.ts

@@ -0,0 +1,37 @@
+import type Database from 'better-sqlite3';
+
+export function recordView(
+  db: Database.Database,
+  profileId: number,
+  recipeId: number
+): void {
+  // ON CONFLICT DO UPDATE bumps only the timestamp field — avoids the
+  // DELETE+INSERT that INSERT OR REPLACE performs under the hood, which would
+  // silently cascade-delete any future FK-referencing children.
+  db.prepare(
+    `INSERT INTO recipe_view (profile_id, recipe_id)
+     VALUES (?, ?)
+     ON CONFLICT(profile_id, recipe_id) DO UPDATE
+       SET last_viewed_at = CURRENT_TIMESTAMP`
+  ).run(profileId, recipeId);
+}
+
+export type ViewRow = {
+  profile_id: number;
+  recipe_id: number;
+  last_viewed_at: string;
+};
+
+export function listViews(
+  db: Database.Database,
+  profileId: number
+): ViewRow[] {
+  return db
+    .prepare(
+      `SELECT profile_id, recipe_id, last_viewed_at
+         FROM recipe_view
+        WHERE profile_id = ?
+        ORDER BY last_viewed_at DESC`
+    )
+    .all(profileId) as ViewRow[];
+}

src/lib/server/shopping/repository.ts

@@ -0,0 +1,196 @@
+import type Database from 'better-sqlite3';
+
+// Fallback when a recipe has no servings_default set — matches the default
+// used by RecipeEditor's "new recipe" template.
+const DEFAULT_SERVINGS = 4;
+
+export type ShoppingCartRecipe = {
+  recipe_id: number;
+  title: string;
+  image_path: string | null;
+  servings: number;
+  servings_default: number;
+};
+
+export type ShoppingListRow = {
+  name_key: string;
+  unit_key: string;
+  display_name: string;
+  display_unit: string | null;
+  total_quantity: number | null;
+  from_recipes: string;
+  checked: 0 | 1;
+};
+
+export type ShoppingListSnapshot = {
+  recipes: ShoppingCartRecipe[];
+  rows: ShoppingListRow[];
+  uncheckedCount: number;
+};
+
+export function addRecipeToCart(
+  db: Database.Database,
+  recipeId: number,
+  profileId: number | null,
+  servings?: number
+): void {
+  const row = db
+    .prepare('SELECT servings_default FROM recipe WHERE id = ?')
+    .get(recipeId) as { servings_default: number | null } | undefined;
+  const resolved = servings ?? row?.servings_default ?? DEFAULT_SERVINGS;
+  // ON CONFLICT updates only servings — added_by_profile_id stays with the
+  // first profile that added the recipe (household cart, audit trail).
+  db.prepare(
+    `INSERT INTO shopping_cart_recipe (recipe_id, servings, added_by_profile_id)
+     VALUES (?, ?, ?)
+     ON CONFLICT(recipe_id) DO UPDATE SET servings = excluded.servings`
+  ).run(recipeId, resolved, profileId);
+}
+
+export function removeRecipeFromCart(
+  db: Database.Database,
+  recipeId: number
+): void {
+  db.prepare('DELETE FROM shopping_cart_recipe WHERE recipe_id = ?').run(recipeId);
+}
+
+export function setCartServings(
+  db: Database.Database,
+  recipeId: number,
+  servings: number
+): void {
+  if (!Number.isInteger(servings) || servings <= 0) {
+    throw new Error(`Invalid servings: ${servings}`);
+  }
+  db.prepare(
+    'UPDATE shopping_cart_recipe SET servings = ? WHERE recipe_id = ?'
+  ).run(servings, recipeId);
+}
+
+export function listShoppingList(
+  db: Database.Database
+): ShoppingListSnapshot {
+  const recipes = db
+    .prepare(
+      `SELECT cr.recipe_id, r.title, r.image_path, cr.servings,
+              COALESCE(r.servings_default, cr.servings) AS servings_default
+         FROM shopping_cart_recipe cr
+         JOIN recipe r ON r.id = cr.recipe_id
+        ORDER BY cr.added_at ASC`
+    )
+    .all() as ShoppingCartRecipe[];
+
+  const rows = db
+    .prepare(
+      `SELECT
+         LOWER(TRIM(i.name)) AS name_key,
+         LOWER(TRIM(COALESCE(i.unit, ''))) AS unit_key,
+         MIN(i.name) AS display_name,
+         MIN(i.unit) AS display_unit,
+         SUM(i.quantity * cr.servings * 1.0 / NULLIF(COALESCE(r.servings_default, cr.servings), 0)) AS total_quantity,
+         GROUP_CONCAT(DISTINCT r.title) AS from_recipes,
+         EXISTS(
+           SELECT 1 FROM shopping_cart_check c
+            WHERE c.name_key = LOWER(TRIM(i.name))
+              AND c.unit_key = LOWER(TRIM(COALESCE(i.unit, '')))
+         ) AS checked
+       FROM shopping_cart_recipe cr
+       JOIN recipe r ON r.id = cr.recipe_id
+       JOIN ingredient i ON i.recipe_id = r.id
+       GROUP BY name_key, unit_key
+       ORDER BY checked ASC, display_name COLLATE NOCASE`
+    )
+    .all() as ShoppingListRow[];
+
+  const uncheckedCount = rows.reduce((n, r) => n + (r.checked ? 0 : 1), 0);
+  return { recipes, rows, uncheckedCount };
+}
+
+export function toggleCheck(
+  db: Database.Database,
+  nameKey: string,
+  unitKey: string,
+  checked: boolean
+): void {
+  if (checked) {
+    db.prepare(
+      `INSERT INTO shopping_cart_check (name_key, unit_key)
+       VALUES (?, ?)
+       ON CONFLICT(name_key, unit_key) DO NOTHING`
+    ).run(nameKey, unitKey);
+  } else {
+    db.prepare(
+      'DELETE FROM shopping_cart_check WHERE name_key = ? AND unit_key = ?'
+    ).run(nameKey, unitKey);
+  }
+}
+
+export function clearCheckedItems(db: Database.Database): void {
+  const tx = db.transaction(() => {
+    // Alle aggregierten Zeilen mit checked-Status holen, pro recipe_id gruppieren
+    // und Rezepte finden, deren Zeilen ALLE abgehakt sind.
+    const allRows = db
+      .prepare(
+        `SELECT
+           cr.recipe_id,
+           LOWER(TRIM(i.name)) AS name_key,
+           LOWER(TRIM(COALESCE(i.unit, ''))) AS unit_key,
+           EXISTS(
+             SELECT 1 FROM shopping_cart_check c
+              WHERE c.name_key = LOWER(TRIM(i.name))
+                AND c.unit_key = LOWER(TRIM(COALESCE(i.unit, '')))
+           ) AS checked
+         FROM shopping_cart_recipe cr
+         JOIN ingredient i ON i.recipe_id = cr.recipe_id`
+      )
+      .all() as { recipe_id: number; name_key: string; unit_key: string; checked: 0 | 1 }[];
+
+    const perRecipe = new Map<number, { total: number; checked: number }>();
+    for (const r of allRows) {
+      const e = perRecipe.get(r.recipe_id) ?? { total: 0, checked: 0 };
+      e.total += 1;
+      e.checked += r.checked;
+      perRecipe.set(r.recipe_id, e);
+    }
+    const toRemove: number[] = [];
+    for (const [id, e] of perRecipe) {
+      if (e.total > 0 && e.total === e.checked) toRemove.push(id);
+    }
+    for (const id of toRemove) {
+      db.prepare('DELETE FROM shopping_cart_recipe WHERE recipe_id = ?').run(id);
+    }
+
+    // Orphan-Checks raeumen: alle Check-Keys, die jetzt in KEINEM Cart-Rezept
+    // mehr vorkommen.
+    const activeKeys = db
+      .prepare(
+        `SELECT DISTINCT
+           LOWER(TRIM(i.name)) AS name_key,
+           LOWER(TRIM(COALESCE(i.unit, ''))) AS unit_key
+         FROM shopping_cart_recipe cr
+         JOIN ingredient i ON i.recipe_id = cr.recipe_id`
+      )
+      .all() as { name_key: string; unit_key: string }[];
+    const activeSet = new Set(activeKeys.map((k) => `${k.name_key} ${k.unit_key}`));
+    const allChecks = db
+      .prepare('SELECT name_key, unit_key FROM shopping_cart_check')
+      .all() as { name_key: string; unit_key: string }[];
+    const del = db.prepare(
+      'DELETE FROM shopping_cart_check WHERE name_key = ? AND unit_key = ?'
+    );
+    for (const c of allChecks) {
+      if (!activeSet.has(`${c.name_key} ${c.unit_key}`)) {
+        del.run(c.name_key, c.unit_key);
+      }
+    }
+  });
+  tx();
+}
+
+export function clearCart(db: Database.Database): void {
+  const tx = db.transaction(() => {
+    db.prepare('DELETE FROM shopping_cart_recipe').run();
+    db.prepare('DELETE FROM shopping_cart_check').run();
+  });
+  tx();
+}

src/lib/sw/cache-strategy.ts

@@ -1,4 +1,4 @@
-export type CacheStrategy = 'shell' | 'swr' | 'images' | 'network-only';
+export type CacheStrategy = 'shell' | 'network-first' | 'images' | 'network-only';
 
 type RequestShape = { url: string; method: string };
 
@@ -16,7 +16,9 @@ export function resolveStrategy(req: RequestShape): CacheStrategy {
   if (
     path === '/api/recipes/import' ||
     path === '/api/recipes/preview' ||
-    path.startsWith('/api/recipes/search/web')
+    path === '/api/recipes/extract-from-photo' ||
+    path.startsWith('/api/recipes/search/web') ||
+    path.startsWith('/api/shopping-list')
   ) {
     return 'network-only';
   }
@@ -37,6 +39,7 @@ export function resolveStrategy(req: RequestShape): CacheStrategy {
     return 'shell';
   }
 
-  // Everything else: recipe pages, API reads, lists — all SWR.
-  return 'swr';
+  // Everything else: recipe pages, API reads, lists — network-first with
+  // timeout fallback to cache (handled in service-worker.ts).
+  return 'network-first';
 }

src/lib/types.ts

@@ -5,6 +5,7 @@ export type Ingredient = {
   name: string;
   note: string | null;
   raw_text: string;
+  section_heading: string | null;
 };
 
 export type Step = {

src/routes/+layout.server.ts

@@ -0,0 +1,9 @@
+import type { LayoutServerLoad } from './$types';
+import { env } from '$env/dynamic/private';
+
+export const load: LayoutServerLoad = () => {
+  return {
+    version: env.KOCHWAS_TAG ?? 'dev',
+    geminiConfigured: Boolean(env.GEMINI_API_KEY)
+  };
+};

src/routes/+layout.svelte

@@ -1,10 +1,20 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
-  import { goto, afterNavigate } from '$app/navigation';
-  import { Settings, CookingPot, Utensils, Menu, BookOpen, ArrowLeft } from 'lucide-svelte';
+  import { goto, afterNavigate, beforeNavigate } from '$app/navigation';
+  import {
+    Settings,
+    CookingPot,
+    Utensils,
+    Menu,
+    BookOpen,
+    ArrowLeft,
+    Camera,
+    ShoppingCart
+  } from 'lucide-svelte';
   import { profileStore } from '$lib/client/profile.svelte';
   import { wishlistStore } from '$lib/client/wishlist.svelte';
+  import { shoppingCartStore } from '$lib/client/shopping-cart.svelte';
   import { pwaStore } from '$lib/client/pwa.svelte';
   import { searchFilterStore } from '$lib/client/search-filter.svelte';
   import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte';
@@ -17,26 +27,21 @@
   import { network } from '$lib/client/network.svelte';
   import { installPrompt } from '$lib/client/install-prompt.svelte';
   import { registerServiceWorker } from '$lib/client/sw-register';
-  import type { SearchHit } from '$lib/server/recipes/search-local';
-  import type { WebHit } from '$lib/server/search/searxng';
+  import { SearchStore } from '$lib/client/search.svelte';
+  import { recordScroll, restoreScroll } from '$lib/client/scroll-restore';
 
-  let { children } = $props();
+  let { data, children } = $props();
 
-  const NAV_PAGE_SIZE = 30;
+  const navStore = new SearchStore({
+    pageSize: 30,
+    webFilterParam: () => {
+      const p = searchFilterStore.queryParam;
+      return p ? `&domains=${encodeURIComponent(p)}` : '';
+    }
+  });
 
-  let navQuery = $state('');
-  let navHits = $state<SearchHit[]>([]);
-  let navWebHits = $state<WebHit[]>([]);
-  let navSearching = $state(false);
-  let navWebSearching = $state(false);
-  let navWebError = $state<string | null>(null);
   let navOpen = $state(false);
-  let navLocalExhausted = $state(false);
-  let navWebPageno = $state(0);
-  let navWebExhausted = $state(false);
-  let navLoadingMore = $state(false);
   let navContainer: HTMLElement | undefined = $state();
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
   let menuOpen = $state(false);
   let menuContainer: HTMLElement | undefined = $state();
 
@@ -44,123 +49,21 @@
     $page.url.pathname.startsWith('/recipes/') || $page.url.pathname === '/preview'
   );
 
-  function filterParam(): string {
-    const p = searchFilterStore.queryParam;
-    return p ? `&domains=${encodeURIComponent(p)}` : '';
-  }
-
   $effect(() => {
-    const q = navQuery.trim();
-    if (debounceTimer) clearTimeout(debounceTimer);
-    if (q.length <= 3) {
-      navHits = [];
-      navWebHits = [];
-      navSearching = false;
-      navWebSearching = false;
-      navWebError = null;
-      navOpen = false;
-      navLocalExhausted = false;
-      navWebPageno = 0;
-      navWebExhausted = false;
-      return;
-    }
-    navSearching = true;
-    navWebHits = [];
-    navWebSearching = false;
-    navWebError = null;
-    navOpen = true;
-    navLocalExhausted = false;
-    navWebPageno = 0;
-    navWebExhausted = false;
-    debounceTimer = setTimeout(async () => {
-      try {
-        const res = await fetch(
-          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${NAV_PAGE_SIZE}${filterParam()}`
-        );
-        const body = await res.json();
-        if (navQuery.trim() !== q) return;
-        navHits = body.hits;
-        if (navHits.length < NAV_PAGE_SIZE) navLocalExhausted = true;
-        if (navHits.length === 0) {
-          navWebSearching = true;
-          try {
-            const wres = await fetch(
-              `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1${filterParam()}`
-            );
-            if (navQuery.trim() !== q) return;
-            if (!wres.ok) {
-              const err = await wres.json().catch(() => ({}));
-              navWebError = err.message ?? `HTTP ${wres.status}`;
-              navWebExhausted = true;
-            } else {
-              const wbody = await wres.json();
-              navWebHits = wbody.hits;
-              navWebPageno = 1;
-              if (navWebHits.length === 0) navWebExhausted = true;
-            }
-          } finally {
-            if (navQuery.trim() === q) navWebSearching = false;
-          }
-        }
-      } finally {
-        if (navQuery.trim() === q) navSearching = false;
-      }
-    }, 300);
+    // Bare reads register the reactive deps; then kick the store.
+    const q = navStore.query;
+    navStore.runDebounced();
+    // navOpen follows query length: open while typing, close when cleared.
+    navOpen = q.trim().length > 3;
   });
 
-  async function loadMoreNav() {
-    if (navLoadingMore) return;
-    const q = navQuery.trim();
-    if (!q) return;
-    navLoadingMore = true;
-    try {
-      if (!navLocalExhausted) {
-        const res = await fetch(
-          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${NAV_PAGE_SIZE}&offset=${navHits.length}${filterParam()}`
-        );
-        const body = await res.json();
-        if (navQuery.trim() !== q) return;
-        const more = body.hits as SearchHit[];
-        const seen = new Set(navHits.map((h) => h.id));
-        const deduped = more.filter((h) => !seen.has(h.id));
-        navHits = [...navHits, ...deduped];
-        if (more.length < NAV_PAGE_SIZE) navLocalExhausted = true;
-      } else if (!navWebExhausted) {
-        const nextPage = navWebPageno + 1;
-        navWebSearching = navWebHits.length === 0;
-        try {
-          const wres = await fetch(
-            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${filterParam()}`
-          );
-          if (navQuery.trim() !== q) return;
-          if (!wres.ok) {
-            const err = await wres.json().catch(() => ({}));
-            navWebError = err.message ?? `HTTP ${wres.status}`;
-            navWebExhausted = true;
-            return;
-          }
-          const wbody = await wres.json();
-          const more = wbody.hits as WebHit[];
-          const seen = new Set(navWebHits.map((h) => h.url));
-          const deduped = more.filter((h) => !seen.has(h.url));
-          if (deduped.length === 0) {
-            navWebExhausted = true;
-          } else {
-            navWebHits = [...navWebHits, ...deduped];
-            navWebPageno = nextPage;
-          }
-        } finally {
-          if (navQuery.trim() === q) navWebSearching = false;
-        }
-      }
-    } finally {
-      navLoadingMore = false;
-    }
+  function loadMoreNav() {
+    return navStore.loadMore();
   }
 
   function submitNav(e: SubmitEvent) {
     e.preventDefault();
-    const q = navQuery.trim();
+    const q = navStore.query.trim();
     if (!q) return;
     navOpen = false;
     void goto(`/?q=${encodeURIComponent(q)}`);
@@ -184,15 +87,23 @@
 
   function pickHit() {
     navOpen = false;
-    navQuery = '';
-    navHits = [];
-    navWebHits = [];
+    navStore.reset();
   }
 
-  afterNavigate(() => {
-    navQuery = '';
-    navHits = [];
-    navWebHits = [];
+  function goBack() {
+    if (typeof history !== 'undefined' && history.length > 1) {
+      history.back();
+    } else {
+      void goto('/');
+    }
+  }
+
+  beforeNavigate((nav) => {
+    recordScroll(nav.from?.url);
+  });
+
+  afterNavigate((nav) => {
+    navStore.reset();
     navOpen = false;
     menuOpen = false;
     // Badge nach jeder Client-Navigation frisch halten — sonst kann er
@@ -200,11 +111,14 @@
     // auf einem anderen Gerät oder in einem anderen Tab etwas geändert
     // wurde.
     void wishlistStore.refresh();
+    void shoppingCartStore.refresh();
+    restoreScroll(nav.type, nav.to?.url);
   });
 
   onMount(() => {
     profileStore.load();
     void wishlistStore.refresh();
+    void shoppingCartStore.refresh();
     void searchFilterStore.load();
     void pwaStore.init();
     network.init();
@@ -227,11 +141,14 @@
 <header class="bar">
   <div class="bar-inner">
     {#if $page.url.pathname === '/'}
-      <a href="/" class="brand">Kochwas</a>
+      <div class="brand-stack">
+        <a href="/" class="brand">Kochwas</a>
+        <span class="version" title="Deployment-Tag">{data.version}</span>
+      </div>
     {:else}
-      <a href="/" class="home-back" aria-label="Zurück zur Startseite">
+      <button type="button" class="home-back" aria-label="Zurück" onclick={goBack}>
         <ArrowLeft size={22} strokeWidth={2} />
-      </a>
+      </button>
     {/if}
     {#if showHeaderSearch}
       <div class="nav-search-wrap" bind:this={navContainer}>
@@ -239,9 +156,9 @@
           <SearchFilter inline />
           <input
             type="search"
-            bind:value={navQuery}
+            bind:value={navStore.query}
             onfocus={() => {
-              if (navHits.length > 0 || navQuery.trim().length > 3) navOpen = true;
+              if (navStore.hits.length > 0 || navStore.query.trim().length > 3) navOpen = true;
             }}
             placeholder="Rezept suchen…"
             autocomplete="off"
@@ -251,12 +168,12 @@
         </form>
         {#if navOpen}
           <div class="dropdown" role="listbox">
-            {#if navSearching && navHits.length === 0 && navWebHits.length === 0}
+            {#if navStore.searching && navStore.hits.length === 0 && navStore.webHits.length === 0}
               <SearchLoader scope="local" size="sm" />
             {:else}
-              {#if navHits.length > 0}
+              {#if navStore.hits.length > 0}
                 <ul class="dd-list">
-                  {#each navHits as r (r.id)}
+                  {#each navStore.hits as r (r.id)}
                     <li>
                       <a
                         href={`/recipes/${r.id}`}
@@ -282,14 +199,14 @@
                 </ul>
               {/if}
 
-              {#if navWebHits.length > 0}
-                {#if navHits.length > 0}
+              {#if navStore.webHits.length > 0}
+                {#if navStore.hits.length > 0}
                   <p class="dd-section">Aus dem Internet</p>
                 {:else}
                   <p class="dd-section">Keine lokalen Rezepte – aus dem Internet:</p>
                 {/if}
                 <ul class="dd-list">
-                  {#each navWebHits as w (w.url)}
+                  {#each navStore.webHits as w (w.url)}
                     <li>
                       <a
                         href={`/preview?url=${encodeURIComponent(w.url)}`}
@@ -313,23 +230,23 @@
                 </ul>
               {/if}
 
-              {#if navWebSearching}
+              {#if navStore.webSearching}
                 <SearchLoader scope="web" size="sm" />
-              {:else if navWebError && navWebHits.length === 0}
+              {:else if navStore.webError && navStore.webHits.length === 0}
                 <p class="dd-status dd-error">Internet-Suche zurzeit nicht möglich.</p>
-              {:else if navHits.length === 0 && navWebHits.length === 0 && !navSearching}
+              {:else if navStore.hits.length === 0 && navStore.webHits.length === 0 && !navStore.searching}
                 <p class="dd-status">Auch im Internet nichts gefunden.</p>
               {/if}
 
-              {#if !(navLocalExhausted && navWebExhausted) && (navHits.length > 0 || navWebHits.length > 0)}
+              {#if !(navStore.localExhausted && navStore.webExhausted) && (navStore.hits.length > 0 || navStore.webHits.length > 0)}
                 <button
                   class="dd-web"
                   type="button"
                   onclick={loadMoreNav}
-                  disabled={navLoadingMore || navWebSearching}
+                  disabled={navStore.loadingMore || navStore.webSearching}
                 >
                   <span
-                    >{navLoadingMore || navWebSearching
+                    >{navStore.loadingMore || navStore.webSearching
                       ? 'Lade …'
                       : '+ weitere Ergebnisse'}</span
                   >
@@ -341,6 +258,22 @@
       </div>
     {/if}
     <div class="bar-right">
+      {#if data.geminiConfigured}
+        <a
+          href={network.online ? '/new/from-photo' : ''}
+          class="nav-link magic-link"
+          class:disabled={!network.online}
+          aria-label="Rezept aus Foto erstellen"
+          title={network.online
+            ? 'Rezept aus Foto erstellen'
+            : 'Offline — braucht Internet'}
+          onclick={(e) => {
+            if (!network.online) e.preventDefault();
+          }}
+        >
+          <Camera size={20} strokeWidth={2} />
+        </a>
+      {/if}
       <a
         href="/wishlist"
         class="nav-link wishlist-link"
@@ -353,6 +286,16 @@
           <span class="badge">{wishlistStore.count}</span>
         {/if}
       </a>
+      {#if shoppingCartStore.uncheckedCount > 0}
+        <a
+          href="/shopping-list"
+          class="nav-link shopping-link"
+          aria-label={`Einkaufsliste (${shoppingCartStore.uncheckedCount})`}
+        >
+          <ShoppingCart size={20} strokeWidth={2} />
+          <span class="badge">{shoppingCartStore.uncheckedCount}</span>
+        </a>
+      {/if}
       <div class="menu-wrap" bind:this={menuContainer}>
         <button
           class="nav-link"
@@ -386,6 +329,9 @@
 </main>
 
 <style>
+  :global(:root) {
+    --pill-radius: 999px;
+  }
   :global(html, body) {
     margin: 0;
     padding: 0;
@@ -416,6 +362,13 @@
     padding: 0.6rem 1rem;
     position: relative;
   }
+  .brand-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: 1;
+    flex-shrink: 0;
+  }
   .brand {
     font-size: 1.15rem;
     font-weight: 700;
@@ -423,16 +376,28 @@
     color: #2b6a3d;
     flex-shrink: 0;
   }
+  .version {
+    margin-top: 2px;
+    font-size: 0.65rem;
+    color: #9aa8a0;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.02em;
+  }
   .home-back {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 999px;
+    border: 0;
+    border-radius: var(--pill-radius);
+    background: transparent;
     color: #2b6a3d;
     text-decoration: none;
     flex-shrink: 0;
+    cursor: pointer;
+    font: inherit;
+    padding: 0;
   }
   .home-back:hover {
     background: #f4f8f5;
@@ -621,7 +586,7 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     text-decoration: none;
     font-size: 1.15rem;
     position: relative;
@@ -629,6 +594,11 @@
   .nav-link:hover {
     background: #f4f8f5;
   }
+  .nav-link.disabled {
+    color: #999;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
   .badge {
     position: absolute;
     top: -2px;
@@ -636,7 +606,7 @@
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     background: #c53030;
     color: white;
     font-size: 0.7rem;
@@ -653,7 +623,7 @@
   }
   @media (max-width: 520px) {
     /* App-Icon auf engen Screens komplett aus — die Suche bekommt den Platz. */
-    .brand {
+    .brand-stack {
       display: none;
     }
     .nav-link {

src/routes/+page.svelte

@@ -1,44 +1,47 @@
 <script lang="ts">
-  import { onMount, tick } from 'svelte';
+  import { onMount, tick, untrack } from 'svelte';
   import { page } from '$app/stores';
-  import { CookingPot, X } from 'lucide-svelte';
+  import { CookingPot, X, ChevronDown } from 'lucide-svelte';
+  import { slide } from 'svelte/transition';
   import type { Snapshot } from './$types';
   import type { SearchHit } from '$lib/server/recipes/search-local';
-  import type { WebHit } from '$lib/server/search/searxng';
   import { randomQuote } from '$lib/quotes';
   import SearchLoader from '$lib/components/SearchLoader.svelte';
   import SearchFilter from '$lib/components/SearchFilter.svelte';
   import { profileStore } from '$lib/client/profile.svelte';
   import { searchFilterStore } from '$lib/client/search-filter.svelte';
   import { requireOnline } from '$lib/client/require-online';
+  import { SearchStore, type SearchSnapshot } from '$lib/client/search.svelte';
 
   const LOCAL_PAGE = 30;
 
-  let query = $state('');
+  const store = new SearchStore({
+    pageSize: LOCAL_PAGE,
+    webFilterParam: () => {
+      const p = searchFilterStore.queryParam;
+      return p ? `&domains=${encodeURIComponent(p)}` : '';
+    }
+  });
+
   let quote = $state('');
   let recent = $state<SearchHit[]>([]);
   let favorites = $state<SearchHit[]>([]);
-  let hits = $state<SearchHit[]>([]);
-  let webHits = $state<WebHit[]>([]);
-  let searching = $state(false);
-  let webSearching = $state(false);
-  let webError = $state<string | null>(null);
-  let searchedFor = $state<string | null>(null);
-  let localExhausted = $state(false);
-  let webPageno = $state(0);
-  let webExhausted = $state(false);
-  let loadingMore = $state(false);
-  let skipNextSearch = false;
-  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
   const ALL_PAGE = 10;
-  type AllSort = 'name' | 'rating' | 'cooked' | 'created';
+  type AllSort = 'name' | 'rating' | 'cooked' | 'created' | 'viewed';
   const ALL_SORTS: { value: AllSort; label: string }[] = [
     { value: 'name', label: 'Name' },
     { value: 'rating', label: 'Bewertung' },
     { value: 'cooked', label: 'Zuletzt gekocht' },
-    { value: 'created', label: 'Hinzugefügt' }
+    { value: 'created', label: 'Hinzugefügt' },
+    { value: 'viewed', label: 'Zuletzt angesehen' }
   ];
+  function buildAllUrl(sort: AllSort, limit: number, offset: number): string {
+    const profileId = profileStore.active?.id;
+    const profilePart = profileId ? `&profile_id=${profileId}` : '';
+    return `/api/recipes/all?sort=${sort}&limit=${limit}&offset=${offset}${profilePart}`;
+  }
+
   let allRecipes = $state<SearchHit[]>([]);
   let allSort = $state<AllSort>('name');
   let allExhausted = $state(false);
@@ -47,41 +50,68 @@
   let allChips: HTMLElement | undefined = $state();
   let allObserver: IntersectionObserver | null = null;
 
-  type SearchSnapshot = {
-    query: string;
-    hits: SearchHit[];
-    webHits: WebHit[];
-    searchedFor: string | null;
-    webError: string | null;
-    localExhausted: boolean;
-    webPageno: number;
-    webExhausted: boolean;
+  type CollapseKey = 'favorites' | 'recent';
+  const COLLAPSE_STORAGE_KEY = 'kochwas.collapsed.sections';
+  let collapsed = $state<Record<CollapseKey, boolean>>({
+    favorites: false,
+    recent: false
+  });
+
+  function toggleCollapsed(key: CollapseKey) {
+    collapsed[key] = !collapsed[key];
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(COLLAPSE_STORAGE_KEY, JSON.stringify(collapsed));
+    }
+  }
+
+  // Snapshot persists across history navigation. We capture not only the
+  // search store, but also the pagination depth ("user had loaded 60
+  // recipes via infinite scroll") so on back-nav we can re-hydrate the
+  // full list in one fetch — otherwise the document is too short and
+  // scroll-restore can't reach the saved Y position.
+  //
+  // SvelteKit calls snapshot.restore AFTER onMount (post-mount tick),
+  // so a flag-based handoff to onMount won't fire — we trigger
+  // rehydrateAll directly from restore. onMount still calls
+  // loadAllMore() for the fresh-mount case; if restore lands first,
+  // allLoading guards the duplicate fetch, otherwise rehydrateAll's
+  // larger result simply overwrites loadAllMore's initial 10 items.
+  type HomeSnapshot = SearchSnapshot & {
+    allLoaded: number;
+    allSort: AllSort;
+    allExhausted: boolean;
   };
 
-  export const snapshot: Snapshot<SearchSnapshot> = {
+  export const snapshot: Snapshot<HomeSnapshot> = {
     capture: () => ({
-      query,
-      hits,
-      webHits,
-      searchedFor,
-      webError,
-      localExhausted,
-      webPageno,
-      webExhausted
+      ...store.captureSnapshot(),
+      allLoaded: allRecipes.length,
+      allSort,
+      allExhausted
     }),
-    restore: (v) => {
-      query = v.query;
-      hits = v.hits;
-      webHits = v.webHits;
-      searchedFor = v.searchedFor;
-      webError = v.webError;
-      localExhausted = v.localExhausted;
-      webPageno = v.webPageno;
-      webExhausted = v.webExhausted;
-      skipNextSearch = true;
+    restore: (s) => {
+      store.restoreSnapshot(s);
+      if (s.allLoaded > 0) {
+        allSort = s.allSort;
+        void rehydrateAll(s.allSort, s.allLoaded, s.allExhausted);
+      }
     }
   };
 
+  async function rehydrateAll(sort: AllSort, count: number, exhausted: boolean) {
+    allLoading = true;
+    try {
+      const res = await fetch(buildAllUrl(sort, count, 0));
+      if (!res.ok) return;
+      const body = await res.json();
+      const hits = body.hits as SearchHit[];
+      allRecipes = hits;
+      allExhausted = exhausted || hits.length < count;
+    } finally {
+      allLoading = false;
+    }
+  }
+
   async function loadRecent() {
     const res = await fetch('/api/recipes/search');
     const body = await res.json();
@@ -92,9 +122,7 @@
     if (allLoading || allExhausted) return;
     allLoading = true;
     try {
-      const res = await fetch(
-        `/api/recipes/all?sort=${allSort}&limit=${ALL_PAGE}&offset=${allRecipes.length}`
-      );
+      const res = await fetch(buildAllUrl(allSort, ALL_PAGE, allRecipes.length));
       if (!res.ok) return;
       const body = await res.json();
       const more = body.hits as SearchHit[];
@@ -118,9 +146,7 @@
     const chipsBefore = allChips?.getBoundingClientRect().top ?? 0;
     allLoading = true;
     try {
-      const res = await fetch(
-        `/api/recipes/all?sort=${next}&limit=${ALL_PAGE}&offset=0`
-      );
+      const res = await fetch(buildAllUrl(next, ALL_PAGE, 0));
       if (!res.ok) return;
       const body = await res.json();
       const hits = body.hits as SearchHit[];
@@ -152,14 +178,28 @@
     // Restore query from URL so history.back() from preview/recipe
     // brings the user back to the same search results.
     const urlQ = ($page.url.searchParams.get('q') ?? '').trim();
-    if (urlQ) query = urlQ;
+    if (urlQ) store.query = urlQ;
     void loadRecent();
     void searchFilterStore.load();
     const saved = localStorage.getItem('kochwas.allSort');
-    if (saved && ['name', 'rating', 'cooked', 'created'].includes(saved)) {
+    if (saved && ['name', 'rating', 'cooked', 'created', 'viewed'].includes(saved)) {
       allSort = saved as AllSort;
     }
+    // Fresh-mount: kick off the initial 10. On back-nav, snapshot.restore
+    // also fires rehydrateAll(60); if it lands first, allLoading guards
+    // this; if loadAllMore lands first, rehydrateAll's larger result
+    // simply overwrites allRecipes once it resolves.
     void loadAllMore();
+    const rawCollapsed = localStorage.getItem(COLLAPSE_STORAGE_KEY);
+    if (rawCollapsed) {
+      try {
+        const parsed = JSON.parse(rawCollapsed) as Partial<Record<CollapseKey, boolean>>;
+        if (typeof parsed.favorites === 'boolean') collapsed.favorites = parsed.favorites;
+        if (typeof parsed.recent === 'boolean') collapsed.recent = parsed.recent;
+      } catch {
+        // Corrupt JSON — keep defaults (both open).
+      }
+    }
   });
 
   // IntersectionObserver an den Sentinel hängen — wenn sichtbar, nachladen.
@@ -188,14 +228,38 @@
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     searchFilterStore.active;
-    const q = query.trim();
-    if (!q || q.length <= 3) return;
-    if (debounceTimer) clearTimeout(debounceTimer);
-    searching = true;
-    webHits = [];
-    webSearching = false;
-    webError = null;
-    debounceTimer = setTimeout(() => void runSearch(q), 150);
+    store.reSearch();
+  });
+
+  // 'viewed' sort depends on the active profile. When the user switches
+  // profiles, refetch with the new profile_id so the list reflects what
+  // the *current* profile has viewed. Other sorts are profile-agnostic
+  // and don't need this.
+  //
+  // Only `profileStore.active` must be a tracked dep. `allSort` /
+  // `allLoading` are read inside untrack: otherwise the `allLoading = false`
+  // write in the fetch-finally would re-trigger the effect and start the
+  // next fetch → endless loop.
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    profileStore.active;
+    untrack(() => {
+      if (allSort !== 'viewed') return;
+      if (allLoading) return;
+      void (async () => {
+        allLoading = true;
+        try {
+          const res = await fetch(buildAllUrl('viewed', ALL_PAGE, 0));
+          if (!res.ok) return;
+          const body = await res.json();
+          const hits = body.hits as SearchHit[];
+          allRecipes = hits;
+          allExhausted = hits.length < ALL_PAGE;
+        } finally {
+          allLoading = false;
+        }
+      })();
+    });
   });
 
   // Sync current query back into the URL as ?q=... via replaceState,
@@ -203,7 +267,7 @@
   // when the user clicks a result or otherwise navigates away.
   $effect(() => {
     if (typeof window === 'undefined') return;
-    const q = query.trim();
+    const q = store.query.trim();
     const url = new URL(window.location.href);
     const current = url.searchParams.get('q') ?? '';
     if (q === current) return;
@@ -221,138 +285,17 @@
     void loadFavorites(active.id);
   });
 
-  function filterParam(): string {
-    const p = searchFilterStore.queryParam;
-    return p ? `&domains=${encodeURIComponent(p)}` : '';
-  }
-
-  async function runSearch(q: string) {
-    localExhausted = false;
-    webPageno = 0;
-    webExhausted = false;
-    try {
-      const res = await fetch(
-        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}${filterParam()}`
-      );
-      const body = await res.json();
-      if (query.trim() !== q) return;
-      hits = body.hits;
-      searchedFor = q;
-      if (hits.length < LOCAL_PAGE) localExhausted = true;
-      if (hits.length === 0) {
-        // Gar keine lokalen Treffer → erste Web-Seite gleich laden,
-        // damit der User nicht extra auf „+ weitere" klicken muss.
-        webSearching = true;
-        try {
-          const wres = await fetch(
-            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1${filterParam()}`
-          );
-          if (query.trim() !== q) return;
-          if (!wres.ok) {
-            const err = await wres.json().catch(() => ({}));
-            webError = err.message ?? `HTTP ${wres.status}`;
-            webExhausted = true;
-          } else {
-            const wbody = await wres.json();
-            webHits = wbody.hits;
-            webPageno = 1;
-            if (wbody.hits.length === 0) webExhausted = true;
-          }
-        } finally {
-          if (query.trim() === q) webSearching = false;
-        }
-      }
-    } finally {
-      if (query.trim() === q) searching = false;
-    }
-  }
-
-  async function loadMore() {
-    if (loadingMore) return;
-    const q = query.trim();
-    if (!q) return;
-    loadingMore = true;
-    try {
-      if (!localExhausted) {
-        // Noch mehr lokale Treffer holen.
-        const res = await fetch(
-          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}&offset=${hits.length}${filterParam()}`
-        );
-        const body = await res.json();
-        if (query.trim() !== q) return;
-        const more = body.hits as SearchHit[];
-        const seen = new Set(hits.map((h) => h.id));
-        const deduped = more.filter((h) => !seen.has(h.id));
-        hits = [...hits, ...deduped];
-        if (more.length < LOCAL_PAGE) localExhausted = true;
-      } else if (!webExhausted) {
-        // Lokale erschöpft → auf Web umschalten / weiterblättern.
-        const nextPage = webPageno + 1;
-        webSearching = webHits.length === 0;
-        try {
-          const wres = await fetch(
-            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}${filterParam()}`
-          );
-          if (query.trim() !== q) return;
-          if (!wres.ok) {
-            const err = await wres.json().catch(() => ({}));
-            webError = err.message ?? `HTTP ${wres.status}`;
-            webExhausted = true;
-            return;
-          }
-          const wbody = await wres.json();
-          const more = wbody.hits as WebHit[];
-          const seen = new Set(webHits.map((h) => h.url));
-          const deduped = more.filter((h) => !seen.has(h.url));
-          if (deduped.length === 0) {
-            webExhausted = true;
-          } else {
-            webHits = [...webHits, ...deduped];
-            webPageno = nextPage;
-          }
-        } finally {
-          if (query.trim() === q) webSearching = false;
-        }
-      }
-    } finally {
-      loadingMore = false;
-    }
-  }
-
   $effect(() => {
-    const q = query.trim();
-    if (debounceTimer) clearTimeout(debounceTimer);
-    if (skipNextSearch) {
-      // Snapshot-Restore hat hits/webHits/searchedFor wiederhergestellt —
-      // nicht erneut fetchen.
-      skipNextSearch = false;
-      return;
-    }
-    if (q.length <= 3) {
-      hits = [];
-      webHits = [];
-      searchedFor = null;
-      searching = false;
-      webSearching = false;
-      webError = null;
-      return;
-    }
-    searching = true;
-    webHits = [];
-    webSearching = false;
-    webError = null;
-    debounceTimer = setTimeout(() => {
-      void runSearch(q);
-    }, 300);
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    store.query; // register reactive dep
+    store.runDebounced();
   });
 
   function submit(e: SubmitEvent) {
     e.preventDefault();
-    const q = query.trim();
+    const q = store.query.trim();
     if (q.length <= 3) return;
-    if (debounceTimer) clearTimeout(debounceTimer);
-    searching = true;
-    void runSearch(q);
+    void store.runSearch(q);
   }
 
   async function dismissFromRecent(recipeId: number, e: MouseEvent) {
@@ -367,7 +310,7 @@
     });
   }
 
-  const activeSearch = $derived(query.trim().length > 3);
+  const activeSearch = $derived(store.query.trim().length > 3);
 </script>
 
 <section class="hero">
@@ -378,7 +321,7 @@
       <SearchFilter inline />
       <input
         type="search"
-        bind:value={query}
+        bind:value={store.query}
         placeholder="Rezept suchen…"
         autocomplete="off"
         inputmode="search"
@@ -390,12 +333,12 @@
 
 {#if activeSearch}
   <section class="results">
-    {#if searching && hits.length === 0 && webHits.length === 0}
+    {#if store.searching && store.hits.length === 0 && store.webHits.length === 0}
       <SearchLoader scope="local" />
     {:else}
-      {#if hits.length > 0}
+      {#if store.hits.length > 0}
         <ul class="cards">
-          {#each hits as r (r.id)}
+          {#each store.hits as r (r.id)}
             <li>
               <a href={`/recipes/${r.id}`} class="card">
                 {#if r.image_path}
@@ -413,20 +356,20 @@
             </li>
           {/each}
         </ul>
-      {:else if searchedFor === query.trim() && !webSearching && webHits.length === 0 && !webError}
-        <p class="muted no-local-msg">Keine lokalen Rezepte für „{searchedFor}".</p>
+      {:else if store.searchedFor === store.query.trim() && !store.webSearching && store.webHits.length === 0 && !store.webError}
+        <p class="muted no-local-msg">Keine lokalen Rezepte für „{store.searchedFor}".</p>
       {/if}
 
-      {#if webHits.length > 0}
-        {#if hits.length > 0}
+      {#if store.webHits.length > 0}
+        {#if store.hits.length > 0}
           <h3 class="sep">Aus dem Internet</h3>
-        {:else if searchedFor === query.trim()}
+        {:else if store.searchedFor === store.query.trim()}
           <p class="muted no-local-msg">
-            Keine lokalen Rezepte für „{searchedFor}" — Ergebnisse aus dem Internet:
+            Keine lokalen Rezepte für „{store.searchedFor}" — Ergebnisse aus dem Internet:
           </p>
         {/if}
         <ul class="cards">
-          {#each webHits as w (w.url)}
+          {#each store.webHits as w (w.url)}
             <li>
               <a class="card" href={`/preview?url=${encodeURIComponent(w.url)}`}>
                 {#if w.thumbnail}
@@ -444,16 +387,16 @@
         </ul>
       {/if}
 
-      {#if webSearching}
+      {#if store.webSearching}
         <SearchLoader scope="web" />
-      {:else if webError && webHits.length === 0}
-        <p class="error">Internet-Suche zurzeit nicht möglich: {webError}</p>
+      {:else if store.webError && store.webHits.length === 0}
+        <p class="error">Internet-Suche zurzeit nicht möglich: {store.webError}</p>
       {/if}
 
-      {#if searchedFor === query.trim() && !(localExhausted && webExhausted) && !(searching && hits.length === 0)}
+      {#if store.searchedFor === store.query.trim() && !(store.localExhausted && store.webExhausted) && !(store.searching && store.hits.length === 0)}
         <div class="more-cta">
-          <button class="more-btn" onclick={loadMore} disabled={loadingMore || webSearching}>
-            {loadingMore || webSearching ? 'Lade …' : '+ weitere Ergebnisse'}
+          <button class="more-btn" onclick={() => store.loadMore()} disabled={store.loadingMore || store.webSearching}>
+            {store.loadingMore || store.webSearching ? 'Lade …' : '+ weitere Ergebnisse'}
           </button>
         </div>
       {/if}
@@ -462,57 +405,91 @@
 {:else}
   {#if profileStore.active && favorites.length > 0}
     <section class="listing">
-      <h2>Deine Favoriten</h2>
-      <ul class="cards">
-        {#each favorites as r (r.id)}
-          <li class="card-wrap">
-            <a href={`/recipes/${r.id}`} class="card">
-              {#if r.image_path}
-                <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
-              {:else}
-                <div class="placeholder"><CookingPot size={36} /></div>
-              {/if}
-              <div class="card-body">
-                <div class="title">{r.title}</div>
-                {#if r.source_domain}
-                  <div class="domain">{r.source_domain}</div>
-                {/if}
-              </div>
-            </a>
-          </li>
-        {/each}
-      </ul>
+      <button
+        type="button"
+        class="section-head"
+        onclick={() => toggleCollapsed('favorites')}
+        aria-expanded={!collapsed.favorites}
+      >
+        <ChevronDown
+          size={18}
+          strokeWidth={2.2}
+          class={collapsed.favorites ? 'chev rotated' : 'chev'}
+        />
+        <h2>Deine Favoriten</h2>
+        <span class="count">{favorites.length}</span>
+      </button>
+      {#if !collapsed.favorites}
+        <div transition:slide={{ duration: 180 }}>
+          <ul class="cards">
+            {#each favorites as r (r.id)}
+              <li class="card-wrap">
+                <a href={`/recipes/${r.id}`} class="card">
+                  {#if r.image_path}
+                    <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
+                  {:else}
+                    <div class="placeholder"><CookingPot size={36} /></div>
+                  {/if}
+                  <div class="card-body">
+                    <div class="title">{r.title}</div>
+                    {#if r.source_domain}
+                      <div class="domain">{r.source_domain}</div>
+                    {/if}
+                  </div>
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
     </section>
   {/if}
   {#if recent.length > 0}
     <section class="listing">
-      <h2>Zuletzt hinzugefügt</h2>
-      <ul class="cards">
-        {#each recent as r (r.id)}
-          <li class="card-wrap">
-            <a href={`/recipes/${r.id}`} class="card">
-              {#if r.image_path}
-                <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
-              {:else}
-                <div class="placeholder"><CookingPot size={36} /></div>
-              {/if}
-              <div class="card-body">
-                <div class="title">{r.title}</div>
-                {#if r.source_domain}
-                  <div class="domain">{r.source_domain}</div>
-                {/if}
-              </div>
-            </a>
-            <button
-              class="dismiss"
-              aria-label="Aus Zuletzt-hinzugefügt entfernen"
-              onclick={(e) => dismissFromRecent(r.id, e)}
-            >
-              <X size={16} strokeWidth={2.5} />
-            </button>
-          </li>
-        {/each}
-      </ul>
+      <button
+        type="button"
+        class="section-head"
+        onclick={() => toggleCollapsed('recent')}
+        aria-expanded={!collapsed.recent}
+      >
+        <ChevronDown
+          size={18}
+          strokeWidth={2.2}
+          class={collapsed.recent ? 'chev rotated' : 'chev'}
+        />
+        <h2>Zuletzt hinzugefügt</h2>
+        <span class="count">{recent.length}</span>
+      </button>
+      {#if !collapsed.recent}
+        <div transition:slide={{ duration: 180 }}>
+          <ul class="cards">
+            {#each recent as r (r.id)}
+              <li class="card-wrap">
+                <a href={`/recipes/${r.id}`} class="card">
+                  {#if r.image_path}
+                    <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
+                  {:else}
+                    <div class="placeholder"><CookingPot size={36} /></div>
+                  {/if}
+                  <div class="card-body">
+                    <div class="title">{r.title}</div>
+                    {#if r.source_domain}
+                      <div class="domain">{r.source_domain}</div>
+                    {/if}
+                  </div>
+                </a>
+                <button
+                  class="dismiss"
+                  aria-label="Aus Zuletzt-hinzugefügt entfernen"
+                  onclick={(e) => dismissFromRecent(r.id, e)}
+                >
+                  <X size={16} strokeWidth={2.5} />
+                </button>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
     </section>
   {/if}
   <section class="listing">
@@ -632,6 +609,49 @@
     color: #444;
     margin: 0 0 0.75rem;
   }
+  .section-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.4rem 0.25rem;
+    background: transparent;
+    border: 0;
+    border-radius: 8px;
+    text-align: left;
+    cursor: pointer;
+    font-family: inherit;
+    color: inherit;
+    min-height: 44px;
+    margin-bottom: 0.4rem;
+  }
+  .section-head:hover {
+    background: #f4f8f5;
+  }
+  .section-head:focus-visible {
+    outline: 2px solid #2b6a3d;
+    outline-offset: 2px;
+  }
+  .section-head h2 {
+    margin: 0;
+    font-size: 1.05rem;
+    color: #444;
+    font-weight: 600;
+  }
+  .section-head .count {
+    margin-left: auto;
+    color: #888;
+    font-size: 0.85rem;
+    font-variant-numeric: tabular-nums;
+  }
+  .section-head :global(.chev) {
+    color: #2b6a3d;
+    flex-shrink: 0;
+    transition: transform 180ms;
+  }
+  .section-head :global(.chev.rotated) {
+    transform: rotate(-90deg);
+  }
   .listing-head {
     display: flex;
     align-items: center;
@@ -653,7 +673,7 @@
     padding: 0.4rem 0.85rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     font-size: 0.88rem;
     cursor: pointer;
@@ -760,7 +780,7 @@
     right: 0.4rem;
     width: 28px;
     height: 28px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     border: 0;
     background: rgba(255, 255, 255, 0.9);
     color: #444;

src/routes/admin/+layout.svelte

@@ -42,7 +42,7 @@
     padding: 0.5rem 0.95rem 0.5rem 0.8rem;
     background: white;
     border: 1px solid #e4eae7;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     text-decoration: none;
     color: #444;
     font-size: 0.95rem;

src/routes/admin/profiles/+page.svelte

@@ -185,7 +185,7 @@
     padding: 0.15rem 0.5rem;
     background: #eaf4ed;
     color: #2b6a3d;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     font-size: 0.75rem;
   }
   .actions {

src/routes/api/recipes/+server.ts

@@ -0,0 +1,61 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { z } from 'zod';
+import { getDb } from '$lib/server/db';
+import { validateBody } from '$lib/server/api-helpers';
+import { insertRecipe } from '$lib/server/recipes/repository';
+
+const IngredientSchema = z.object({
+  position: z.number().int().nonnegative(),
+  quantity: z.number().nullable(),
+  unit: z.string().max(30).nullable(),
+  name: z.string().min(1).max(200),
+  note: z.string().max(300).nullable(),
+  raw_text: z.string().max(500),
+  section_heading: z.string().max(200).nullable()
+});
+
+const StepSchema = z.object({
+  position: z.number().int().positive(),
+  text: z.string().min(1).max(4000)
+});
+
+const CreateRecipeSchema = z.object({
+  title: z.string().min(1).max(200),
+  description: z.string().max(2000).nullable(),
+  servings_default: z.number().int().nonnegative().nullable(),
+  servings_unit: z.string().max(30).nullable(),
+  prep_time_min: z.number().int().nonnegative().nullable(),
+  cook_time_min: z.number().int().nonnegative().nullable(),
+  total_time_min: z.number().int().nonnegative().nullable(),
+  ingredients: z.array(IngredientSchema),
+  steps: z.array(StepSchema)
+});
+
+// Anlegen eines kompletten Rezepts aus Scratch. Wird vom Foto-Import-Flow
+// genutzt, nachdem der Nutzer im Editor die AI-Extraktion geprüft/korrigiert
+// und auf Speichern getippt hat. Der bestehende /api/recipes/blank-Endpoint
+// bleibt für den „leer anlegen"-Flow unverändert.
+export const POST: RequestHandler = async ({ request }) => {
+  const body = await request.json().catch(() => null);
+  const p = validateBody(body, CreateRecipeSchema);
+  const id = insertRecipe(getDb(), {
+    id: null,
+    title: p.title,
+    description: p.description,
+    source_url: null,
+    source_domain: null,
+    image_path: null,
+    servings_default: p.servings_default,
+    servings_unit: p.servings_unit,
+    prep_time_min: p.prep_time_min,
+    cook_time_min: p.cook_time_min,
+    total_time_min: p.total_time_min,
+    cuisine: null,
+    category: null,
+    ingredients: p.ingredients,
+    steps: p.steps,
+    tags: []
+  });
+  return json({ id }, { status: 201 });
+};

src/routes/api/recipes/[id]/+server.ts

@@ -24,7 +24,8 @@ const IngredientSchema = z.object({
   unit: z.string().max(30).nullable(),
   name: z.string().min(1).max(200),
   note: z.string().max(300).nullable(),
-  raw_text: z.string().max(500)
+  raw_text: z.string().max(500),
+  section_heading: z.string().max(200).nullable()
 });
 
 const StepSchema = z.object({

src/routes/api/recipes/[id]/view/+server.ts

@@ -0,0 +1,27 @@
+import type { RequestHandler } from './$types';
+import { z } from 'zod';
+import { error } from '@sveltejs/kit';
+import { getDb } from '$lib/server/db';
+import { validateBody, parsePositiveIntParam } from '$lib/server/api-helpers';
+import { recordView } from '$lib/server/recipes/views';
+
+const Schema = z.object({
+  profile_id: z.number().int().positive()
+});
+
+export const POST: RequestHandler = async ({ params, request }) => {
+  const recipeId = parsePositiveIntParam(params.id, 'id');
+  const body = validateBody(await request.json().catch(() => null), Schema);
+
+  try {
+    recordView(getDb(), body.profile_id, recipeId);
+  } catch (e) {
+    // FK violation (unknown profile or recipe) → 404
+    if (e instanceof Error && /FOREIGN KEY constraint failed/i.test(e.message)) {
+      error(404, { message: 'Recipe or profile not found' });
+    }
+    throw e;
+  }
+
+  return new Response(null, { status: 204 });
+};

src/routes/api/recipes/all/+server.ts

@@ -6,13 +6,30 @@ import {
   type AllRecipesSort
 } from '$lib/server/recipes/search-local';
 
-const VALID_SORTS = new Set<AllRecipesSort>(['name', 'rating', 'cooked', 'created']);
+const VALID_SORTS = new Set<AllRecipesSort>([
+  'name',
+  'rating',
+  'cooked',
+  'created',
+  'viewed'
+]);
+
+function parseProfileId(raw: string | null): number | null {
+  if (!raw) return null;
+  const n = Number(raw);
+  return Number.isInteger(n) && n > 0 ? n : null;
+}
 
 export const GET: RequestHandler = async ({ url }) => {
   const sortRaw = (url.searchParams.get('sort') ?? 'name') as AllRecipesSort;
   if (!VALID_SORTS.has(sortRaw)) error(400, { message: 'Invalid sort' });
-  const limit = Math.min(50, Math.max(1, Number(url.searchParams.get('limit') ?? 10)));
+  // Cap is 200 (not 10's typical paging step) to support snapshot-based
+  // pagination restore on /+page.svelte: when the user navigates back
+  // after deep infinite-scroll, we re-hydrate the full loaded count in
+  // one round-trip so document height matches and scroll-restore lands.
+  const limit = Math.min(200, Math.max(1, Number(url.searchParams.get('limit') ?? 10)));
   const offset = Math.max(0, Number(url.searchParams.get('offset') ?? 0));
-  const hits = listAllRecipesPaginated(getDb(), sortRaw, limit, offset);
+  const profileId = parseProfileId(url.searchParams.get('profile_id'));
+  const hits = listAllRecipesPaginated(getDb(), sortRaw, limit, offset, profileId);
   return json({ sort: sortRaw, limit, offset, hits });
 };

src/routes/api/recipes/extract-from-photo/+server.ts

@@ -0,0 +1,183 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { extractRecipeFromImage, GeminiError } from '$lib/server/ai/gemini-client';
+import { preprocessImage } from '$lib/server/ai/image-preprocess';
+import { pickRandomPhrase } from '$lib/server/ai/description-phrases';
+import { createRateLimiter } from '$lib/server/ai/rate-limit';
+import type { Ingredient, Step } from '$lib/types';
+
+// 20 MB deckt auch Tablet- und iPad-Pro-Fotos ab (oft 10-15 MB JPEG/HEIC).
+// Muss zusammen mit BODY_SIZE_LIMIT (docker-compose.prod.yml) hochgezogen werden --
+// SvelteKit rejected groessere Bodies frueher und wirft dann undurchsichtige
+// "Multipart erwartet"-Fehler.
+const MAX_BYTES = 20 * 1024 * 1024;
+const ALLOWED_MIME = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+  'image/heic',
+  'image/heif'
+]);
+
+// Singleton-Limiter: 10 Requests/Minute pro IP. Verhindert Kosten-Runaways
+// bei versehentlichem Dauer-Tappen.
+const limiter = createRateLimiter({ windowMs: 60_000, max: 10 });
+
+function errJson(status: number, code: string, message: string) {
+  return json({ code, message }, { status });
+}
+
+function buildRawText(q: number | null, u: string | null, name: string): string {
+  const parts: string[] = [];
+  if (q !== null) parts.push(String(q).replace('.', ','));
+  if (u) parts.push(u);
+  parts.push(name);
+  return parts.join(' ');
+}
+
+export const POST: RequestHandler = async ({ request, getClientAddress }) => {
+  const ip = getClientAddress();
+  if (!limiter.check(ip)) {
+    return errJson(
+      429,
+      'RATE_LIMITED',
+      'Zu viele Anfragen — bitte einen Moment warten.'
+    );
+  }
+
+  // Header-Snapshot fuer Diagnose beim Upload-Parse-Fehler. Wir loggen
+  // Content-Type, -Length und User-Agent — nichts, was Inhalt verraet.
+  const contentType = request.headers.get('content-type') ?? '(missing)';
+  const contentLength = request.headers.get('content-length') ?? '(missing)';
+  const userAgent = request.headers.get('user-agent')?.slice(0, 120) ?? '(missing)';
+
+  let form: FormData;
+  try {
+    form = await request.formData();
+  } catch (e) {
+    const err = e as Error;
+    console.warn(
+      `[extract-from-photo] formData() failed: name=${err.name} msg=${err.message} ` +
+        `ct="${contentType}" len=${contentLength} ua="${userAgent}"`
+    );
+    return errJson(
+      400,
+      'BAD_REQUEST',
+      `Upload konnte nicht gelesen werden (${err.name}: ${err.message}).`
+    );
+  }
+  const photo = form.get('photo');
+  if (!(photo instanceof Blob)) {
+    console.warn(
+      `[extract-from-photo] photo field missing or not a Blob. ct="${contentType}" ` +
+        `len=${contentLength} fields=${[...form.keys()].join(',')}`
+    );
+    return errJson(400, 'BAD_REQUEST', 'Feld "photo" fehlt.');
+  }
+  console.info(
+    `[extract-from-photo] received photo size=${photo.size} mime="${photo.type}" ua="${userAgent}"`
+  );
+  if (photo.size > MAX_BYTES) {
+    return errJson(
+      413,
+      'PAYLOAD_TOO_LARGE',
+      `Foto zu groß (max ${MAX_BYTES / 1024 / 1024} MB).`
+    );
+  }
+  if (!ALLOWED_MIME.has(photo.type)) {
+    return errJson(
+      415,
+      'UNSUPPORTED_MEDIA_TYPE',
+      `MIME "${photo.type}" nicht unterstützt.`
+    );
+  }
+
+  const rawBuffer = Buffer.from(await photo.arrayBuffer());
+  let preprocessed: { buffer: Buffer; mimeType: 'image/jpeg' };
+  try {
+    preprocessed = await preprocessImage(rawBuffer);
+  } catch (e) {
+    return errJson(
+      415,
+      'UNSUPPORTED_MEDIA_TYPE',
+      `Bild konnte nicht gelesen werden: ${(e as Error).message}`
+    );
+  }
+
+  const startedAt = Date.now();
+  let extracted;
+  try {
+    extracted = await extractRecipeFromImage(
+      preprocessed.buffer,
+      preprocessed.mimeType
+    );
+  } catch (e) {
+    if (e instanceof GeminiError) {
+      const status =
+        e.code === 'AI_RATE_LIMITED'
+          ? 429
+          : e.code === 'AI_TIMEOUT'
+            ? 503
+            : e.code === 'AI_NOT_CONFIGURED'
+              ? 503
+              : 503;
+      // Nur Code + Meta + Error-Message loggen, niemals Prompt/Response-Inhalt.
+      // e.message enthaelt z.B. Zod-Validierungspfade oder "non-JSON output" --
+      // kein AI-Content, aber die Diagnose-Info, warum AI_FAILED kam.
+      console.warn(
+        `[extract-from-photo] ${e.code} after ${Date.now() - startedAt}ms, ${preprocessed.buffer.byteLength} bytes: ${e.message}`
+      );
+      return errJson(status, e.code, 'Die Bild-Analyse ist fehlgeschlagen.');
+    }
+    console.warn(`[extract-from-photo] UNEXPECTED ${(e as Error).message}`);
+    return errJson(503, 'AI_FAILED', 'Die Bild-Analyse ist fehlgeschlagen.');
+  }
+
+  // Minimum-Gültigkeit: Titel + (mind. 1 Zutat ODER mind. 1 Schritt).
+  if (
+    !extracted.title.trim() ||
+    (extracted.ingredients.length === 0 && extracted.steps.length === 0)
+  ) {
+    return errJson(
+      422,
+      'NO_RECIPE_IN_IMAGE',
+      'Ich konnte kein Rezept im Bild erkennen.'
+    );
+  }
+
+  const ingredients: Ingredient[] = extracted.ingredients.map((i, idx) => ({
+    position: idx + 1,
+    quantity: i.quantity,
+    unit: i.unit,
+    name: i.name,
+    note: i.note,
+    raw_text: buildRawText(i.quantity, i.unit, i.name),
+    section_heading: null
+  }));
+
+  const steps: Step[] = extracted.steps.map((s, idx) => ({
+    position: idx + 1,
+    text: s.text
+  }));
+
+  return json({
+    recipe: {
+      id: null,
+      title: extracted.title,
+      description: pickRandomPhrase(),
+      source_url: null,
+      source_domain: null,
+      image_path: null,
+      servings_default: extracted.servings_default,
+      servings_unit: extracted.servings_unit,
+      prep_time_min: extracted.prep_time_min,
+      cook_time_min: extracted.cook_time_min,
+      total_time_min: extracted.total_time_min,
+      cuisine: null,
+      category: null,
+      ingredients,
+      steps,
+      tags: []
+    }
+  });
+};

src/routes/api/recipes/search/+server.ts

@@ -7,13 +7,9 @@ export const GET: RequestHandler = async ({ url }) => {
   const q = url.searchParams.get('q')?.trim() ?? '';
   const limit = Math.min(Number(url.searchParams.get('limit') ?? 30), 100);
   const offset = Math.max(0, Number(url.searchParams.get('offset') ?? 0));
-  const domains = (url.searchParams.get('domains') ?? '')
-    .split(',')
-    .map((d) => d.trim())
-    .filter(Boolean);
   const hits =
     q.length >= 1
-      ? searchLocal(getDb(), q, limit, offset, domains)
+      ? searchLocal(getDb(), q, limit, offset)
       : offset === 0
         ? listRecentRecipes(getDb(), limit)
         : [];

src/routes/api/shopping-list/+server.ts

@@ -0,0 +1,13 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { getDb } from '$lib/server/db';
+import { clearCart, listShoppingList } from '$lib/server/shopping/repository';
+
+export const GET: RequestHandler = async () => {
+  return json(listShoppingList(getDb()));
+};
+
+export const DELETE: RequestHandler = async () => {
+  clearCart(getDb());
+  return json({ ok: true });
+};

src/routes/api/shopping-list/check/+server.ts

@@ -0,0 +1,23 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { z } from 'zod';
+import { getDb } from '$lib/server/db';
+import { validateBody } from '$lib/server/api-helpers';
+import { toggleCheck } from '$lib/server/shopping/repository';
+
+const CheckSchema = z.object({
+  name_key: z.string().min(1).max(200),
+  unit_key: z.string().max(50) // kann leer sein
+});
+
+export const POST: RequestHandler = async ({ request }) => {
+  const data = validateBody(await request.json().catch(() => null), CheckSchema);
+  toggleCheck(getDb(), data.name_key, data.unit_key, true);
+  return json({ ok: true });
+};
+
+export const DELETE: RequestHandler = async ({ request }) => {
+  const data = validateBody(await request.json().catch(() => null), CheckSchema);
+  toggleCheck(getDb(), data.name_key, data.unit_key, false);
+  return json({ ok: true });
+};

src/routes/api/shopping-list/checked/+server.ts

@@ -0,0 +1,9 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { getDb } from '$lib/server/db';
+import { clearCheckedItems } from '$lib/server/shopping/repository';
+
+export const DELETE: RequestHandler = async () => {
+  clearCheckedItems(getDb());
+  return json({ ok: true });
+};

src/routes/api/shopping-list/recipe/+server.ts

@@ -0,0 +1,18 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { z } from 'zod';
+import { getDb } from '$lib/server/db';
+import { validateBody } from '$lib/server/api-helpers';
+import { addRecipeToCart } from '$lib/server/shopping/repository';
+
+const AddSchema = z.object({
+  recipe_id: z.number().int().positive(),
+  servings: z.number().int().min(1).max(50).optional(),
+  profile_id: z.number().int().positive().optional()
+});
+
+export const POST: RequestHandler = async ({ request }) => {
+  const data = validateBody(await request.json().catch(() => null), AddSchema);
+  addRecipeToCart(getDb(), data.recipe_id, data.profile_id ?? null, data.servings);
+  return json({ ok: true }, { status: 201 });
+};

src/routes/api/shopping-list/recipe/[recipe_id]/+server.ts

@@ -0,0 +1,23 @@
+import type { RequestHandler } from './$types';
+import { json } from '@sveltejs/kit';
+import { z } from 'zod';
+import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam, validateBody } from '$lib/server/api-helpers';
+import { removeRecipeFromCart, setCartServings } from '$lib/server/shopping/repository';
+
+const PatchSchema = z.object({
+  servings: z.number().int().min(1).max(50)
+});
+
+export const PATCH: RequestHandler = async ({ params, request }) => {
+  const id = parsePositiveIntParam(params.recipe_id, 'recipe_id');
+  const data = validateBody(await request.json().catch(() => null), PatchSchema);
+  setCartServings(getDb(), id, data.servings);
+  return json({ ok: true });
+};
+
+export const DELETE: RequestHandler = async ({ params }) => {
+  const id = parsePositiveIntParam(params.recipe_id, 'recipe_id');
+  removeRecipeFromCart(getDb(), id);
+  return json({ ok: true });
+};

src/routes/new/from-photo/+page.server.ts

@@ -0,0 +1,12 @@
+import type { PageServerLoad } from './$types';
+import { error } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+
+export const load: PageServerLoad = async () => {
+  if (!env.GEMINI_API_KEY) {
+    error(503, {
+      message: 'Foto-Import ist nicht konfiguriert (GEMINI_API_KEY fehlt).'
+    });
+  }
+  return {};
+};

src/routes/new/from-photo/+page.svelte

@@ -0,0 +1,271 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import {
+    Camera,
+    ImageUp,
+    Loader2,
+    Wand2,
+    AlertTriangle,
+    RotateCw,
+    FilePlus,
+    X
+  } from 'lucide-svelte';
+  import RecipeEditor from '$lib/components/RecipeEditor.svelte';
+  import { PhotoUploadStore } from '$lib/client/photo-upload.svelte';
+  import { alertAction } from '$lib/client/confirm.svelte';
+  import { network } from '$lib/client/network.svelte';
+  import type { Recipe, Ingredient, Step } from '$lib/types';
+
+  const store = new PhotoUploadStore();
+  let saving = $state(false);
+  let cameraInput = $state<HTMLInputElement | null>(null);
+  let fileInput = $state<HTMLInputElement | null>(null);
+
+  function onPick(e: Event) {
+    const file = (e.target as HTMLInputElement).files?.[0];
+    if (file) void store.upload(file);
+  }
+
+  type SavePatch = {
+    title: string;
+    description: string | null;
+    servings_default: number | null;
+    prep_time_min: number | null;
+    cook_time_min: number | null;
+    total_time_min: number | null;
+    ingredients: Ingredient[];
+    steps: Step[];
+  };
+
+  async function onSave(patch: SavePatch) {
+    if (!store.recipe) return;
+    saving = true;
+    try {
+      const body = {
+        title: patch.title,
+        description: patch.description,
+        servings_default: patch.servings_default,
+        servings_unit: store.recipe.servings_unit,
+        prep_time_min: patch.prep_time_min,
+        cook_time_min: patch.cook_time_min,
+        total_time_min: patch.total_time_min,
+        ingredients: patch.ingredients,
+        steps: patch.steps
+      };
+      const res = await fetch('/api/recipes', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body)
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        await alertAction({
+          title: 'Speichern fehlgeschlagen',
+          message: err.message ?? `HTTP ${res.status}`
+        });
+        return;
+      }
+      const { id } = await res.json();
+      await goto(`/recipes/${id}`);
+    } finally {
+      saving = false;
+    }
+  }
+
+  function onCancel() {
+    history.back();
+  }
+</script>
+
+<svelte:head><title>Rezept aus Foto — Kochwas</title></svelte:head>
+
+{#if store.status === 'idle'}
+  <section class="picker">
+    <Camera size={48} strokeWidth={1.5} />
+    <h1>Rezept aus Foto</h1>
+    <p class="hint">
+      Fotografiere ein gedrucktes oder handgeschriebenes Rezept. Eine Seite,
+      scharf, gut ausgeleuchtet.
+    </p>
+    <div class="row">
+      <button
+        type="button"
+        class="btn primary"
+        onclick={() => cameraInput?.click()}
+        disabled={!network.online}
+      >
+        <Camera size={18} strokeWidth={2} />
+        <span>Kamera</span>
+      </button>
+      <button
+        type="button"
+        class="btn ghost"
+        onclick={() => fileInput?.click()}
+        disabled={!network.online}
+      >
+        <ImageUp size={18} strokeWidth={2} />
+        <span>Aus Dateien</span>
+      </button>
+    </div>
+    <!-- Zwei separate Inputs: capture="environment" oeffnet direkt die Kamera,
+         das andere zeigt den Datei-/Fotomediathek-Picker. Android-Chrome auf
+         Tablet zeigt sonst bei capture="environment" nur die Kamera; ohne
+         capture dagegen nur den Datei-Picker. Explizite Wahl ist eindeutig. -->
+    <input
+      bind:this={cameraInput}
+      type="file"
+      accept="image/*"
+      capture="environment"
+      hidden
+      onchange={onPick}
+    />
+    <input
+      bind:this={fileInput}
+      type="file"
+      accept="image/*"
+      hidden
+      onchange={onPick}
+    />
+    {#if !network.online}
+      <p class="offline">Offline — diese Funktion braucht Internet.</p>
+    {/if}
+  </section>
+{:else if store.status === 'loading'}
+  <section class="state" aria-live="polite">
+    <div class="spin"><Loader2 size={48} /></div>
+    <p>Lese das Rezept…</p>
+    <button type="button" class="btn ghost" onclick={() => store.abort()}>
+      <X size={18} /><span>Abbrechen</span>
+    </button>
+  </section>
+{:else if store.status === 'error'}
+  {#if store.errorCode === 'NO_RECIPE_IN_IMAGE'}
+    <section class="state yellow" role="alert">
+      <AlertTriangle size={40} />
+      <h2>Kein Rezept im Bild</h2>
+      <p>Ich konnte auf dem Foto kein Rezept erkennen.</p>
+      <div class="row">
+        <button
+          type="button"
+          class="btn primary"
+          onclick={() => {
+            store.reset();
+            fileInput?.click();
+          }}
+        >
+          <Camera size={18} /><span>Anderes Foto</span>
+        </button>
+        <a class="btn ghost" href="/">
+          <FilePlus size={18} /><span>Startseite</span>
+        </a>
+      </div>
+    </section>
+  {:else}
+    <section class="state red" role="alert">
+      <AlertTriangle size={40} />
+      <h2>Fehler</h2>
+      <p>{store.errorMessage ?? 'Unbekannter Fehler.'}</p>
+      <div class="row">
+        <button type="button" class="btn primary" onclick={() => store.retry()}>
+          <RotateCw size={18} /><span>Nochmal versuchen</span>
+        </button>
+        <button type="button" class="btn ghost" onclick={() => store.reset()}>
+          <Camera size={18} /><span>Anderes Foto</span>
+        </button>
+      </div>
+    </section>
+  {/if}
+{:else if store.status === 'success' && store.recipe}
+  <div class="banner">
+    <Wand2 size={18} />
+    <span>Aus Foto erstellt — bitte prüfen und ggf. korrigieren.</span>
+  </div>
+  <RecipeEditor
+    recipe={store.recipe as Recipe}
+    {saving}
+    onsave={onSave}
+    oncancel={onCancel}
+  />
+{/if}
+
+<style>
+  .picker,
+  .state {
+    text-align: center;
+    padding: 3rem 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+  .hint {
+    color: #666;
+    max-width: 400px;
+    line-height: 1.45;
+  }
+  .btn {
+    padding: 0.8rem 1.1rem;
+    min-height: 48px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 1rem;
+    border: 0;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .btn.primary {
+    background: #2b6a3d;
+    color: white;
+  }
+  .btn.primary:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .btn.ghost {
+    background: white;
+    color: #444;
+    border: 1px solid #cfd9d1;
+  }
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .state.yellow {
+    background: #fff6d7;
+    border: 1px solid #e6d48a;
+    border-radius: 12px;
+  }
+  .state.red {
+    background: #fde4e4;
+    border: 1px solid #e6a0a0;
+    border-radius: 12px;
+  }
+  .banner {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.7rem 1rem;
+    background: #eef8ef;
+    border: 1px solid #b7d9c0;
+    border-radius: 10px;
+    margin: 0.75rem 0 1rem;
+    color: #2b6a3d;
+  }
+  .spin {
+    animation: spin 1s linear infinite;
+    display: inline-flex;
+  }
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .offline {
+    color: #a05b00;
+    font-size: 0.9rem;
+  }
+</style>

src/routes/preview/+page.svelte

@@ -33,7 +33,12 @@
   $effect(() => {
     const u = ($page.url.searchParams.get('url') ?? '').trim();
     targetUrl = u;
-    if (u) void load(u);
+    if (u) {
+      void load(u);
+    } else {
+      loading = false;
+      errored = 'Kein ?url=-Parameter. Suche zuerst ein Rezept und klicke auf einen Treffer.';
+    }
   });
 
   async function save() {

src/routes/recipes/+page.svelte

@@ -441,7 +441,7 @@
     padding: 0.6rem 0.9rem;
     font-size: 0.95rem;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     background: white;
     min-height: 44px;
   }

src/routes/recipes/[id]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy, tick } from 'svelte';
+  import { onMount, onDestroy, tick, untrack } from 'svelte';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import {
@@ -41,7 +41,7 @@
 
   let editMode = $state(false);
   let saving = $state(false);
-  let recipeState = $state(data.recipe);
+  let recipeState = $state(untrack(() => data.recipe));
 
   // Einmalige Pulse-Animation beim Aktivieren (nicht beim Wieder-Abwählen).
   // Per tick()-Zwischenschritt "aus → an" erzwingen, damit die Animation
@@ -194,6 +194,28 @@
     }
   }
 
+  async function deleteComment(id: number) {
+    const ok = await confirmAction({
+      title: 'Kommentar löschen?',
+      message: 'Der Eintrag verschwindet ohne Umweg.',
+      confirmLabel: 'Löschen',
+      destructive: true
+    });
+    if (!ok) return;
+    if (!requireOnline('Das Löschen')) return;
+    const res = await asyncFetch(
+      `/api/recipes/${data.recipe.id}/comments`,
+      {
+        method: 'DELETE',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ comment_id: id })
+      },
+      'Löschen fehlgeschlagen'
+    );
+    if (!res) return;
+    comments = comments.filter((c) => c.id !== id);
+  }
+
   async function deleteRecipe() {
     const ok = await confirmAction({
       title: 'Rezept löschen?',
@@ -333,9 +355,28 @@
       }
     };
     document.addEventListener('visibilitychange', onVisibility);
+
     return () => document.removeEventListener('visibilitychange', onVisibility);
   });
 
+  // Track view per active profile (fire-and-forget). Lives in $effect, not
+  // onMount, because profileStore.load() runs from layout's onMount and the
+  // child onMount fires first — at mount time profileStore.active is still
+  // null on cold loads. The effect re-runs once active populates, the
+  // viewBeaconSent flag prevents duplicate POSTs on subsequent profile
+  // switches within the same page instance.
+  let viewBeaconSent = $state(false);
+  $effect(() => {
+    if (viewBeaconSent) return;
+    if (!profileStore.active) return;
+    viewBeaconSent = true;
+    void fetch(`/api/recipes/${data.recipe.id}/view`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ profile_id: profileStore.active.id })
+    });
+  });
+
   onDestroy(() => {
     void releaseWakeLock();
   });
@@ -466,6 +507,16 @@
         <div class="author">{c.author}</div>
         <div class="text">{c.text}</div>
         <div class="date">{new Date(c.created_at).toLocaleString('de-DE')}</div>
+        {#if profileStore.active?.id === c.profile_id}
+          <button
+            type="button"
+            class="comment-del"
+            aria-label="Kommentar löschen"
+            onclick={() => void deleteComment(c.id)}
+          >
+            <Trash2 size="14" />
+          </button>
+        {/if}
       </li>
     {/each}
   </ul>
@@ -673,6 +724,26 @@
     border: 1px solid #e4eae7;
     border-radius: 12px;
     padding: 0.75rem 0.9rem;
+    position: relative;
+  }
+  .comment-del {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    color: #888;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  .comment-del:hover {
+    background: #f3f5f3;
+    color: #b42626;
   }
   .comments .author {
     font-weight: 600;

src/routes/shopping-list/+page.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { ShoppingCart } from 'lucide-svelte';
+  import type { ShoppingListSnapshot } from '$lib/server/shopping/repository';
+  import ShoppingListRow from '$lib/components/ShoppingListRow.svelte';
+  import ShoppingCartChip from '$lib/components/ShoppingCartChip.svelte';
+  import type { ShoppingListRow as Row } from '$lib/server/shopping/repository';
+  import { shoppingCartStore } from '$lib/client/shopping-cart.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { requireOnline } from '$lib/client/require-online';
+
+  let snapshot = $state<ShoppingListSnapshot>({ recipes: [], rows: [], uncheckedCount: 0 });
+  let loading = $state(true);
+  const hasChecked = $derived(snapshot.rows.some((r) => r.checked === 1));
+
+  async function load() {
+    loading = true;
+    try {
+      const res = await fetch('/api/shopping-list');
+      snapshot = await res.json();
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function onToggleRow(row: Row, next: boolean) {
+    if (!requireOnline('Abhaken')) return;
+    const method = next ? 'POST' : 'DELETE';
+    await fetch('/api/shopping-list/check', {
+      method,
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ name_key: row.name_key, unit_key: row.unit_key })
+    });
+    await load();
+    void shoppingCartStore.refresh();
+  }
+
+  async function onServingsChange(recipeId: number, servings: number) {
+    if (!requireOnline('Portionen-Aenderung')) return;
+    await fetch(`/api/shopping-list/recipe/${recipeId}`, {
+      method: 'PATCH',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ servings })
+    });
+    await load();
+    void shoppingCartStore.refresh();
+  }
+
+  async function onRemoveRecipe(recipeId: number) {
+    if (!requireOnline('Rezept-Entfernung')) return;
+    await fetch(`/api/shopping-list/recipe/${recipeId}`, { method: 'DELETE' });
+    await load();
+    void shoppingCartStore.refresh();
+  }
+
+  async function clearChecked() {
+    if (!requireOnline('Erledigte entfernen')) return;
+    await fetch('/api/shopping-list/checked', { method: 'DELETE' });
+    await load();
+    void shoppingCartStore.refresh();
+  }
+
+  async function clearAll() {
+    if (!requireOnline('Liste leeren')) return;
+    const ok = await confirmAction({
+      title: 'Einkaufsliste leeren?',
+      message: 'Alle Rezepte und abgehakten Zutaten werden entfernt. Das lässt sich nicht rückgängig machen.',
+      confirmLabel: 'Leeren',
+      destructive: true
+    });
+    if (!ok) return;
+    await fetch('/api/shopping-list', { method: 'DELETE' });
+    await load();
+    void shoppingCartStore.refresh();
+  }
+
+  onMount(load);
+</script>
+
+<header class="head">
+  <h1>Einkaufsliste</h1>
+  {#if snapshot.recipes.length > 0}
+    <p class="sub">
+      {snapshot.uncheckedCount} noch zu besorgen · {snapshot.recipes.length} Rezept{snapshot.recipes.length === 1 ? '' : 'e'} im Wagen
+    </p>
+  {/if}
+</header>
+
+{#if loading}
+  <p class="muted">Lädt …</p>
+{:else if snapshot.recipes.length === 0}
+  <section class="empty">
+    <div class="big"><ShoppingCart size={48} strokeWidth={1.5} /></div>
+    <p>Einkaufswagen ist leer.</p>
+    <p class="hint">Lege Rezepte auf der Wunschliste in den Wagen, um sie hier zu sehen.</p>
+  </section>
+{:else}
+  <div class="chips">
+    {#each snapshot.recipes as r (r.recipe_id)}
+      <ShoppingCartChip recipe={r} {onServingsChange} onRemove={onRemoveRecipe} />
+    {/each}
+  </div>
+  <ul class="list">
+    {#each snapshot.rows as row (row.name_key + '|' + row.unit_key)}
+      <li>
+        <ShoppingListRow {row} onToggle={onToggleRow} />
+      </li>
+    {/each}
+  </ul>
+  <div class="footer">
+    {#if hasChecked}
+      <button class="btn secondary" onclick={clearChecked}>Erledigte entfernen</button>
+    {/if}
+    <button class="btn destructive" onclick={clearAll}>Liste leeren</button>
+  </div>
+{/if}
+
+<style>
+  .head { padding: 1.25rem 0 0.5rem; }
+  .head h1 { margin: 0; font-size: 1.6rem; color: #2b6a3d; }
+  .sub { margin: 0.2rem 0 0; color: #666; }
+  .muted { color: #888; text-align: center; padding: 2rem 0; }
+  .empty { text-align: center; padding: 3rem 1rem; }
+  .big { color: #8fb097; display: inline-flex; margin: 0 0 0.5rem; }
+  .hint { color: #888; font-size: 0.9rem; }
+  .list {
+    list-style: none;
+    padding: 0;
+    margin: 0.75rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .chips {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    padding: 0.5rem 0;
+    margin: 0.5rem 0;
+    -webkit-overflow-scrolling: touch;
+  }
+  .footer {
+    position: sticky;
+    bottom: 0;
+    background: #f4f8f5;
+    padding: 0.75rem 0;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    margin-top: 1rem;
+    border-top: 1px solid #e4eae7;
+  }
+  .btn {
+    padding: 0.6rem 1rem;
+    border-radius: 10px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.9rem;
+    min-height: 44px;
+  }
+  .btn.secondary { color: #2b6a3d; border-color: #b7d6c2; }
+  .btn.destructive { color: #c53030; border-color: #f1b4b4; }
+  .btn.destructive:hover { background: #fdf3f3; }
+</style>

src/routes/wishlist/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { Utensils, Trash2, CookingPot } from 'lucide-svelte';
-  import { profileStore } from '$lib/client/profile.svelte';
+  import { Utensils, Trash2, CookingPot, ShoppingCart } from 'lucide-svelte';
+  import { profileStore, requireProfile } from '$lib/client/profile.svelte';
   import { wishlistStore } from '$lib/client/wishlist.svelte';
-  import { alertAction, confirmAction } from '$lib/client/confirm.svelte';
+  import { shoppingCartStore } from '$lib/client/shopping-cart.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
   import { requireOnline } from '$lib/client/require-online';
   import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
 
@@ -35,15 +36,12 @@
   });
 
   async function toggleMine(entry: WishlistEntry) {
-    if (!profileStore.active) {
-      await alertAction({
-        title: 'Kein Profil gewählt',
-        message: 'Tippe oben rechts auf „Profil wählen", um mitzuwünschen.'
-      });
-      return;
-    }
+    const profile = await requireProfile(
+      'Tippe oben rechts auf „Profil wählen", um mitzuwünschen.'
+    );
+    if (!profile) return;
     if (!requireOnline('Die Wunschlisten-Aktion')) return;
-    const profileId = profileStore.active.id;
+    const profileId = profile.id;
     if (entry.on_my_wishlist) {
       await fetch(`/api/wishlist/${entry.recipe_id}?profile_id=${profileId}`, {
         method: 'DELETE'
@@ -73,9 +71,19 @@
     void wishlistStore.refresh();
   }
 
+  async function toggleCart(entry: WishlistEntry) {
+    if (!requireOnline('Die Einkaufsliste')) return;
+    if (shoppingCartStore.isInCart(entry.recipe_id)) {
+      await shoppingCartStore.removeRecipe(entry.recipe_id);
+    } else {
+      await shoppingCartStore.addRecipe(entry.recipe_id);
+    }
+  }
+
   onMount(() => {
     void load();
     void wishlistStore.refresh();
+    void shoppingCartStore.refresh();
   });
 
   function resolveImage(p: string | null): string | null {
@@ -128,16 +136,13 @@
               {#if e.wanted_by_names}
                 <span class="wanted-by">{e.wanted_by_names}</span>
               {/if}
-              {#if e.source_domain}
-                <span class="src">· {e.source_domain}</span>
-              {/if}
               {#if e.avg_stars !== null}
                 <span>· ★ {e.avg_stars.toFixed(1)}</span>
               {/if}
             </div>
           </div>
         </a>
-        <div class="actions">
+        <div class="actions-top">
           <button
             class="like"
             class:active={e.on_my_wishlist}
@@ -149,6 +154,16 @@
               <span class="count">{e.wanted_by_count}</span>
             {/if}
           </button>
+          <button
+            class="cart"
+            class:active={shoppingCartStore.isInCart(e.recipe_id)}
+            aria-label={shoppingCartStore.isInCart(e.recipe_id)
+              ? 'Aus Einkaufswagen entfernen'
+              : 'In den Einkaufswagen'}
+            onclick={() => toggleCart(e)}
+          >
+            <ShoppingCart size={18} strokeWidth={2} />
+          </button>
           <button
             class="del"
             aria-label="Für alle entfernen"
@@ -185,7 +200,7 @@
     padding: 0.4rem 0.85rem;
     background: white;
     border: 1px solid #cfd9d1;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     font-size: 0.88rem;
     cursor: pointer;
@@ -230,6 +245,7 @@
     gap: 0.75rem;
   }
   .card {
+    position: relative;
     display: flex;
     align-items: stretch;
     background: white;
@@ -258,7 +274,7 @@
   }
   .text {
     flex: 1;
-    padding: 0.7rem 0.75rem;
+    padding: 0.7rem 170px 0.7rem 0.75rem;
     min-width: 0;
     display: flex;
     flex-direction: column;
@@ -268,6 +284,8 @@
     font-weight: 600;
     font-size: 1rem;
     line-height: 1.3;
+    overflow-wrap: break-word;
+    word-break: break-word;
   }
   .meta {
     display: flex;
@@ -281,18 +299,19 @@
     color: #2b6a3d;
     font-weight: 500;
   }
-  .actions {
+  .actions-top {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
     display: flex;
-    flex-direction: column;
     gap: 0.4rem;
-    align-items: stretch;
-    justify-content: center;
-    padding: 0.5rem 0.6rem 0.5rem 0;
+    z-index: 1;
   }
   .like,
+  .cart,
   .del {
-    min-width: 48px;
-    min-height: 40px;
+    min-width: 44px;
+    min-height: 44px;
     border-radius: 10px;
     border: 1px solid #e4eae7;
     background: white;
@@ -300,8 +319,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.3rem;
-    font-size: 1.05rem;
+    gap: 0.25rem;
+    font-size: 1rem;
     color: #444;
   }
   .like.active {
@@ -309,6 +328,11 @@
     background: #eaf4ed;
     border-color: #b7d6c2;
   }
+  .cart.active {
+    color: #2b6a3d;
+    background: #eaf4ed;
+    border-color: #b7d6c2;
+  }
   .del:hover {
     color: #c53030;
     border-color: #f1b4b4;
@@ -318,4 +342,51 @@
     font-size: 0.85rem;
     font-weight: 600;
   }
+
+  /* Handy: 2-Spalten-Grid — Bild links ueber alle Rows, rechts stapeln
+     sich Titel, Meta, Actions. `display: contents` auf .body/.text zieht
+     die DOM-Kinder direkt in die Card-Grid, ohne Markup-Umbau. Vermeidet
+     die tote Weissflaeche unter dem Bild bei schmalen Viewports. */
+  @media (max-width: 600px) {
+    .card {
+      display: grid;
+      grid-template-columns: 96px 1fr;
+      grid-template-areas:
+        'img title'
+        'img meta'
+        'img actions';
+      column-gap: 0;
+    }
+    .body {
+      display: contents;
+    }
+    .body img,
+    .placeholder {
+      grid-area: img;
+      width: 96px;
+      height: 100%;
+      min-height: 100%;
+    }
+    .text {
+      display: contents;
+    }
+    .title {
+      grid-area: title;
+      padding: 0.7rem 0.75rem 0.15rem;
+    }
+    .meta {
+      grid-area: meta;
+      padding: 0 0.75rem;
+      margin-top: 0;
+    }
+    .actions-top {
+      grid-area: actions;
+      position: static;
+      display: flex;
+      gap: 0.4rem;
+      padding: 0.5rem 0.75rem 0.7rem;
+      justify-content: flex-end;
+      align-self: end;
+    }
+  }
 </style>

src/service-worker.ts

@@ -56,11 +56,13 @@ self.addEventListener('fetch', (event) => {
     event.respondWith(cacheFirst(req, SHELL_CACHE));
   } else if (strategy === 'images') {
     event.respondWith(cacheFirst(req, IMAGES_CACHE));
-  } else if (strategy === 'swr') {
-    event.respondWith(staleWhileRevalidate(req, DATA_CACHE));
+  } else if (strategy === 'network-first') {
+    event.respondWith(networkFirstWithTimeout(req, DATA_CACHE, NETWORK_TIMEOUT_MS));
   }
 });
 
+const NETWORK_TIMEOUT_MS = 3000;
+
 async function cacheFirst(req: Request, cacheName: string): Promise<Response> {
   const cache = await caches.open(cacheName);
   const hit = await cache.match(req);
@@ -70,16 +72,36 @@ async function cacheFirst(req: Request, cacheName: string): Promise<Response> {
   return fresh;
 }
 
-async function staleWhileRevalidate(req: Request, cacheName: string): Promise<Response> {
+// Network-first mit Timeout-Fallback: frische Daten gewinnen, wenn das Netz
+// innerhalb von NETWORK_TIMEOUT_MS antwortet. Sonst wird der Cache geliefert
+// (falls vorhanden), während der Netz-Fetch noch im Hintergrund weiterläuft
+// und den Cache für den nächsten Request aktualisiert. Ohne Cache wartet der
+// Client trotzdem aufs Netz, weil ein Error-Response hier nichts nützt.
+async function networkFirstWithTimeout(
+  req: Request,
+  cacheName: string,
+  timeoutMs: number
+): Promise<Response> {
   const cache = await caches.open(cacheName);
-  const hit = await cache.match(req);
-  const fetchPromise = fetch(req)
+  const networkPromise: Promise<Response | null> = fetch(req)
     .then((res) => {
       if (res.ok) cache.put(req, res.clone()).catch(() => {});
       return res;
     })
-    .catch(() => hit ?? Response.error());
-  return hit ?? fetchPromise;
+    .catch(() => null);
+
+  const timeoutPromise = new Promise<'timeout'>((resolve) =>
+    setTimeout(() => resolve('timeout'), timeoutMs)
+  );
+
+  const winner = await Promise.race([networkPromise, timeoutPromise]);
+  if (winner instanceof Response) return winner;
+
+  // Timeout oder Netzwerk-Fehler: Cache bevorzugen, sonst auf Netz warten.
+  const hit = await cache.match(req);
+  if (hit) return hit;
+  const late = await networkPromise;
+  return late ?? Response.error();
 }
 
 const META_CACHE = 'kochwas-meta';

tests/e2e/remote/README.md

@@ -0,0 +1,68 @@
+# E2E-Tests gegen kochwas-dev
+
+Playwright-Smoketests gegen ein deployed Environment — standardmaessig
+`https://kochwas-dev.siegeln.net`. Loest die bisherigen manuellen
+MCP-Runs ab.
+
+## Setup (einmalig)
+
+```bash
+npm install
+npx playwright install chromium
+```
+
+## Ausfuehren
+
+```bash
+npm run test:e2e:remote             # Headless, alle Tests
+npm run test:e2e:remote -- --ui     # Mit Playwright-UI (Trace-Viewer)
+npm run test:e2e:remote -- --debug  # Step-by-Step
+```
+
+Alternative URL:
+
+```bash
+E2E_REMOTE_URL=https://kochwas.siegeln.net npm run test:e2e:remote
+```
+
+## Was abgedeckt ist
+
+### Happy Paths (UI)
+
+| Spec | Was |
+|---|---|
+| `homepage.spec.ts` | H1, Recents/Alle-Rezepte-Sektionen, Sort-Tabs rendern unterschiedlich, keine Console-Errors |
+| `search.spec.ts` | Lokaler Treffer, Web-Fallback, Empty-State, Deep-Link `?q=` |
+| `profile.spec.ts` | Switcher-Dialog, Auswahl persistiert, "Deine Favoriten" erscheint nach Login |
+| `recipe-detail.spec.ts` | Header, Portionen-Skalierung (4->6, Mengen proportional), Favorit-Toggle, Rating persistiert ueber Reload, Gekocht-Counter, Wunschliste-Toggle |
+| `comments.spec.ts` | Eigenen Kommentar erstellen + via UI-Button loeschen; fremder Kommentar hat keinen Delete-Button |
+| `wishlist.spec.ts` | Seite laedt, Sort-Tabs, Header-Badge spiegelt API-Zaehler |
+| `preview.spec.ts` | Guard ohne `?url=`, echte URL laedt JSON-LD-Parsing, unparsbare URL zeigt error-box |
+| `admin.spec.ts` | Alle 4 Admin-Subrouten laden mit Tab-Nav, `/admin` redirected |
+
+### Negative Paths (API)
+
+| Spec | Was |
+|---|---|
+| `api-errors.spec.ts` | `parsePositiveIntParam` → 400 `Invalid id` (4 Call-Sites), `validateBody` → 400 `{message, issues}` (4 Call-Sites), 404 auf missing Ressource, Positiv-Sanity fuer /health, /profiles, /domains |
+
+## Design-Entscheidungen
+
+**`workers: 1`.** Tests mutieren echte Daten auf `kochwas-dev` (Rating,
+Favorit, Wunschliste, Kommentare). Parallelitaet wuerde Race-Conditions
+geben. `afterEach` raeumt per API auf — idempotent.
+
+**Hardcoded Test-Fixtures.** Rezept-ID 66 (Chicken Teriyaki) und
+Profile 1/2/3 (Hendrik/Verena/Leana) sind stabil auf dev. Bei
+DB-Reset muessen ggf. die Konstanten angepasst werden.
+
+**Kein Build/Server-Start.** Im Gegensatz zur lokalen `playwright.config.ts`
+startet diese Config keinen Preview-Server — die Tests laufen gegen das
+CI-Build auf dev.
+
+## Was NICHT hier ist
+
+- **Service-Worker-Lifecycle / Offline** → `tests/e2e/offline.spec.ts` (lokal).
+- **Bild-Upload** — File-Dialog + echte Dateien; nur manuell sinnvoll.
+- **Drucken** — oeffnet `window.print()`, headless unzuverlaessig.
+- **Sync unter Last** — braucht dediziertes Harness, nicht Smoke-Scope.

tests/e2e/remote/admin.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Admin-Routen', () => {
+  const SUBROUTES = ['domains', 'profiles', 'backup', 'app'] as const;
+
+  for (const sub of SUBROUTES) {
+    test(`/admin/${sub} laedt mit Nav-Tabs`, async ({ page }) => {
+      await page.goto(`/admin/${sub}`);
+      // Alle Admin-Subseiten haben dieselbe Tab-Leiste.
+      for (const label of ['Domains', 'Profile', 'Backup', 'App']) {
+        await expect(page.getByRole('link', { name: label })).toBeVisible();
+      }
+    });
+  }
+
+  test('/admin redirected auf /admin/domains', async ({ page }) => {
+    await page.goto('/admin');
+    await expect(page).toHaveURL(/\/admin\/domains$/);
+  });
+});

tests/e2e/remote/api-errors.spec.ts

@@ -0,0 +1,101 @@
+import { test, expect } from '@playwright/test';
+
+// Negative-Path Tests fuer die api-helpers: parsePositiveIntParam und
+// validateBody. Jeder neue API-Handler sollte dieselben Error-Shapes
+// liefern — wenn dieser Suite-Block kippt, ist der Helper-Contract kaputt.
+
+test.describe('API Error-Shapes', () => {
+  test.describe('parsePositiveIntParam', () => {
+    test('GET /api/recipes/abc -> 400 Invalid id', async ({ request }) => {
+      const r = await request.get('/api/recipes/abc');
+      expect(r.status()).toBe(400);
+      expect(await r.json()).toEqual({ message: 'Invalid id' });
+    });
+
+    test('GET /api/recipes/-1 -> 400 Invalid id', async ({ request }) => {
+      const r = await request.get('/api/recipes/-1');
+      expect(r.status()).toBe(400);
+      expect(await r.json()).toEqual({ message: 'Invalid id' });
+    });
+
+    test('GET /api/recipes/0 -> 400 Invalid id', async ({ request }) => {
+      const r = await request.get('/api/recipes/0');
+      expect(r.status()).toBe(400);
+      expect(await r.json()).toEqual({ message: 'Invalid id' });
+    });
+
+    test('POST /api/recipes/abc/comments -> 400 Invalid id', async ({ request }) => {
+      const r = await request.post('/api/recipes/abc/comments', { data: {} });
+      expect(r.status()).toBe(400);
+      expect(await r.json()).toEqual({ message: 'Invalid id' });
+    });
+  });
+
+  test.describe('validateBody', () => {
+    test('POST /api/wishlist leer -> 400 {message, issues}', async ({ request }) => {
+      const r = await request.post('/api/wishlist', { data: {} });
+      expect(r.status()).toBe(400);
+      const body = (await r.json()) as { message: string; issues?: unknown[] };
+      expect(body.message).toBe('Invalid body');
+      expect(Array.isArray(body.issues)).toBe(true);
+      expect((body.issues ?? []).length).toBeGreaterThanOrEqual(2); // recipe_id + profile_id
+    });
+
+    test('POST /api/recipes/66/comments leer -> 400 {message, issues}', async ({ request }) => {
+      const r = await request.post('/api/recipes/66/comments', { data: {} });
+      expect(r.status()).toBe(400);
+      const body = (await r.json()) as { message: string; issues?: unknown[] };
+      expect(body.message).toBe('Invalid body');
+      expect((body.issues ?? []).length).toBeGreaterThanOrEqual(1); // profile_id oder text
+    });
+
+    test('PUT /api/recipes/66/favorite leer -> 400 {message, issues}', async ({ request }) => {
+      const r = await request.put('/api/recipes/66/favorite', { data: {} });
+      expect(r.status()).toBe(400);
+      const body = (await r.json()) as { message: string; issues?: unknown[] };
+      expect(body.message).toBe('Invalid body');
+      expect((body.issues ?? []).length).toBeGreaterThanOrEqual(1);
+    });
+
+    test('POST /api/domains leer -> 400 {message, issues}', async ({ request }) => {
+      const r = await request.post('/api/domains', { data: {} });
+      expect(r.status()).toBe(400);
+      const body = (await r.json()) as { message: string; issues?: unknown[] };
+      expect(body.message).toBe('Invalid body');
+      expect((body.issues ?? []).length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  test.describe('404 auf missing Ressourcen', () => {
+    test('GET /api/recipes/99999 -> 404 Recipe not found', async ({ request }) => {
+      const r = await request.get('/api/recipes/99999');
+      expect(r.status()).toBe(404);
+      expect(await r.json()).toEqual({ message: 'Recipe not found' });
+    });
+  });
+
+  test.describe('Positive Sanity-Checks', () => {
+    test('GET /api/health -> 200 mit db:"ok"', async ({ request }) => {
+      const r = await request.get('/api/health');
+      expect(r.status()).toBe(200);
+      const body = (await r.json()) as { db: string };
+      expect(body.db).toBe('ok');
+    });
+
+    test('GET /api/profiles -> drei Profile', async ({ request }) => {
+      const r = await request.get('/api/profiles');
+      expect(r.status()).toBe(200);
+      const body = (await r.json()) as { id: number; name: string }[];
+      expect(body.length).toBeGreaterThanOrEqual(3);
+      const names = body.map((p) => p.name).sort();
+      expect(names).toEqual(expect.arrayContaining(['Hendrik', 'Leana', 'Verena']));
+    });
+
+    test('GET /api/domains -> liefert Array', async ({ request }) => {
+      const r = await request.get('/api/domains');
+      expect(r.status()).toBe(200);
+      const body = await r.json();
+      expect(Array.isArray(body)).toBe(true);
+    });
+  });
+});

tests/e2e/remote/comments.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test';
+import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+import { cleanupE2EComments, deleteComment } from './fixtures/api-cleanup';
+
+const RECIPE_ID = 66;
+
+test.describe('Kommentare', () => {
+  test.beforeEach(async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    // Stray E2E-Kommentare aus abgebrochenen Runs wegraeumen.
+    await cleanupE2EComments(request, RECIPE_ID, HENDRIK_ID);
+  });
+
+  test.afterEach(async ({ request }) => {
+    await cleanupE2EComments(request, RECIPE_ID, HENDRIK_ID);
+  });
+
+  test('Kommentar erstellen, Delete-Button erscheint, Loeschen via UI', async ({
+    page
+  }) => {
+    const unique = `E2E ${Date.now()}`;
+    await page.goto(`/recipes/${RECIPE_ID}`);
+
+    await page.getByRole('textbox').filter({ hasText: '' }).last().fill(unique);
+    await page.getByRole('button', { name: 'Kommentar speichern' }).click();
+
+    // Neuer Kommentar sichtbar
+    await expect(page.getByText(unique)).toBeVisible({ timeout: 5000 });
+
+    // Delete-Button NUR beim eigenen Kommentar
+    const delBtn = page.getByRole('button', { name: 'Kommentar löschen' });
+    await expect(delBtn).toBeVisible();
+
+    await delBtn.click();
+    // ConfirmDialog "Kommentar loeschen?" mit Loeschen-Button.
+    // Es gibt mehrere "Löschen"-Buttons auf der Seite (Rezept-Delete,
+    // Kommentar-Trash, Dialog-Bestaetigung) — deshalb Locator auf den
+    // Dialog einschraenken.
+    const dialog = page.getByRole('dialog', { name: /Kommentar löschen/i });
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole('button', { name: 'Löschen' }).click();
+
+    await expect(page.getByText(unique)).not.toBeVisible({ timeout: 5000 });
+  });
+
+  test('Fremder Kommentar zeigt KEINEN Delete-Button fuers aktuelle Profil', async ({
+    page,
+    request
+  }) => {
+    // Wir legen den Kommentar fuer ein anderes Profil (Leana, id=3) per API an.
+    const text = `E2E fremd ${Date.now()}`;
+    const res = await request.post(`/api/recipes/${RECIPE_ID}/comments`, {
+      data: { profile_id: 3, text }
+    });
+    expect(res.status()).toBe(201);
+    const { id } = (await res.json()) as { id: number };
+
+    try {
+      await page.goto(`/recipes/${RECIPE_ID}`);
+      const item = page
+        .locator('.comments li')
+        .filter({ hasText: text });
+      await expect(item).toBeVisible();
+      await expect(
+        item.getByRole('button', { name: 'Kommentar löschen' })
+      ).toHaveCount(0);
+    } finally {
+      await deleteComment(request, RECIPE_ID, id);
+    }
+  });
+});

tests/e2e/remote/fixtures/api-cleanup.ts

@@ -0,0 +1,74 @@
+import type { APIRequestContext } from '@playwright/test';
+
+// Cleanup-Helfer fuer afterEach-Hooks. Alle sind idempotent — wenn der
+// Zustand schon weg ist (z. B. der Test ist zwischen Action und Check
+// abgebrochen), fliegt nichts.
+
+export async function clearRating(
+  api: APIRequestContext,
+  recipeId: number,
+  profileId: number
+): Promise<void> {
+  await api.delete(`/api/recipes/${recipeId}/rating`, {
+    data: { profile_id: profileId }
+  });
+}
+
+export async function clearFavorite(
+  api: APIRequestContext,
+  recipeId: number,
+  profileId: number
+): Promise<void> {
+  await api.delete(`/api/recipes/${recipeId}/favorite`, {
+    data: { profile_id: profileId }
+  });
+}
+
+export async function removeFromWishlist(
+  api: APIRequestContext,
+  recipeId: number,
+  profileId: number
+): Promise<void> {
+  await api.delete(`/api/wishlist/${recipeId}?profile_id=${profileId}`);
+}
+
+export async function deleteComment(
+  api: APIRequestContext,
+  recipeId: number,
+  commentId: number
+): Promise<void> {
+  await api.delete(`/api/recipes/${recipeId}/comments`, {
+    data: { comment_id: commentId }
+  });
+}
+
+/**
+ * Safety-Net: loescht alle E2E-Kommentare eines Profils. Gedacht fuer
+ * afterEach/afterAll, falls ein Test abbricht bevor der eigene Cleanup
+ * greift. Markiert E2E-Kommentare am Prefix "E2E ".
+ */
+export async function cleanupE2EComments(
+  api: APIRequestContext,
+  recipeId: number,
+  profileId: number
+): Promise<void> {
+  const res = await api.get(`/api/recipes/${recipeId}/comments`);
+  if (!res.ok()) return;
+  const list = (await res.json()) as {
+    id: number;
+    profile_id: number;
+    text: string;
+  }[];
+  for (const c of list) {
+    if (c.profile_id === profileId && c.text.startsWith('E2E ')) {
+      await deleteComment(api, recipeId, c.id);
+    }
+  }
+}
+
+/**
+ * Leert den haushaltsweiten Einkaufswagen. Idempotent.
+ */
+export async function clearShoppingCart(api: APIRequestContext): Promise<void> {
+  await api.delete('/api/shopping-list');
+}

tests/e2e/remote/fixtures/profile.ts

@@ -0,0 +1,26 @@
+import type { Page } from '@playwright/test';
+
+// Profil-IDs auf kochwas-dev: 1 = Hendrik, 2 = Verena, 3 = Leana.
+// Die Tests hardcoden Hendrik als Standard, weil die Dev-DB diese
+// Profile stabil enthaelt.
+export const HENDRIK_ID = 1;
+export const VERENA_ID = 2;
+export const LEANA_ID = 3;
+
+/**
+ * Setzt das aktive Profil in localStorage, BEVOR die Seite geladen wird.
+ * addInitScript laeuft vor jedem Skript der Seite — damit ist das Profil
+ * schon da, wenn profileStore.load() das erste Mal liest.
+ */
+export async function setActiveProfile(page: Page, id: number): Promise<void> {
+  await page.addInitScript(
+    (pid) => window.localStorage.setItem('kochwas.activeProfileId', String(pid)),
+    id
+  );
+}
+
+export async function clearActiveProfile(page: Page): Promise<void> {
+  await page.addInitScript(() =>
+    window.localStorage.removeItem('kochwas.activeProfileId')
+  );
+}

tests/e2e/remote/homepage.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Startseite', () => {
+  test('laedt mit H1, Zuletzt-hinzugefuegt und Alle-Rezepte', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveTitle(/Kochwas/);
+    await expect(page.getByRole('heading', { level: 1, name: 'Kochwas' })).toBeVisible();
+    await expect(
+      page.getByRole('heading', { level: 2, name: 'Zuletzt hinzugefügt' })
+    ).toBeVisible();
+    await expect(page.getByRole('heading', { level: 2, name: 'Alle Rezepte' })).toBeVisible();
+  });
+
+  test('Sort-Tabs rendern unterschiedliche Top-Eintraege', async ({ page }) => {
+    await page.goto('/');
+    // Liste unter "Alle Rezepte"
+    const allSection = page.locator('section', { has: page.getByRole('heading', { name: 'Alle Rezepte' }) });
+    const firstItem = () => allSection.locator('li a').first().innerText();
+
+    await page.getByRole('tab', { name: 'Name' }).click();
+    await page.waitForTimeout(400);
+    const nameTop = await firstItem();
+
+    await page.getByRole('tab', { name: 'Hinzugefügt' }).click();
+    await page.waitForTimeout(400);
+    const addedTop = await firstItem();
+
+    expect(nameTop).not.toEqual(addedTop);
+  });
+
+  test('hat keine Console-Errors', async ({ page }) => {
+    const errors: string[] = [];
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') errors.push(msg.text());
+    });
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    // 404s auf externen Bildern (chefkoch-cdn, cloudfront) ignorieren —
+    // das ist kein App-Fehler, sondern externe Thumbnails.
+    const appErrors = errors.filter((e) => !/Failed to load resource/i.test(e));
+    expect(appErrors).toEqual([]);
+  });
+});

tests/e2e/remote/ingredient-sections.spec.ts

@@ -0,0 +1,216 @@
+import { test, expect, type APIRequestContext } from '@playwright/test';
+import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+
+// Helper: idempotent recipe delete.
+async function deleteRecipe(request: APIRequestContext, id: number): Promise<void> {
+  await request.delete(`/api/recipes/${id}`);
+}
+
+// Shared ingredient payload builder — fills all required Zod fields.
+function makeIngredient(
+  position: number,
+  name: string,
+  section_heading: string | null,
+  overrides: Partial<{
+    quantity: number | null;
+    unit: string | null;
+    note: string | null;
+    raw_text: string;
+  }> = {}
+) {
+  return {
+    position,
+    quantity: overrides.quantity ?? null,
+    unit: overrides.unit ?? null,
+    name,
+    note: overrides.note ?? null,
+    raw_text: overrides.raw_text ?? name,
+    section_heading
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Per-test cleanup scaffolding — single variable, reset in beforeEach.
+// ─────────────────────────────────────────────────────────────────────────────
+
+let createdId: number | null = null;
+
+test.beforeEach(() => {
+  createdId = null;
+});
+
+test.afterEach(async ({ request }) => {
+  if (createdId !== null) {
+    await deleteRecipe(request, createdId);
+    createdId = null;
+  }
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Test 1 — pure API roundtrip (no browser needed)
+// ─────────────────────────────────────────────────────────────────────────────
+
+test('API: section_heading persistiert ueber PATCH + GET', async ({ request }) => {
+  // 1. Create blank recipe.
+  const createRes = await request.post('/api/recipes/blank');
+  expect(createRes.status()).toBe(200);
+  const { id } = (await createRes.json()) as { id: number };
+  createdId = id;
+
+  // 2. PATCH with 3 ingredients carrying section_heading values.
+  const patchRes = await request.patch(`/api/recipes/${id}`, {
+    data: {
+      ingredients: [
+        makeIngredient(1, 'Mehl', 'Fuer den Teig', { quantity: 200, unit: 'g', raw_text: '200 g Mehl' }),
+        makeIngredient(2, 'Zucker', null, { quantity: 100, unit: 'g', raw_text: '100 g Zucker' }),
+        makeIngredient(3, 'Beeren', 'Fuer die Fuellung', { quantity: 150, unit: 'g', raw_text: '150 g Beeren' })
+      ]
+    }
+  });
+  expect(patchRes.status()).toBe(200);
+
+  // 3. GET and assert persisted values.
+  const getRes = await request.get(`/api/recipes/${id}`);
+  expect(getRes.status()).toBe(200);
+  const body = (await getRes.json()) as {
+    recipe: { ingredients: Array<{ name: string; section_heading: string | null }> };
+  };
+  const ings = body.recipe.ingredients;
+
+  const mehl = ings.find((i) => i.name === 'Mehl');
+  const zucker = ings.find((i) => i.name === 'Zucker');
+  const beeren = ings.find((i) => i.name === 'Beeren');
+
+  expect(mehl?.section_heading).toBe('Fuer den Teig');
+  expect(zucker?.section_heading).toBeNull();
+  expect(beeren?.section_heading).toBe('Fuer die Fuellung');
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Test 2 — UI edit flow: add section, save, assert view renders heading
+// ─────────────────────────────────────────────────────────────────────────────
+
+test('Editor: Abschnitt via Inline-Button anlegen, View rendert Ueberschrift', async ({
+  page,
+  request
+}) => {
+  // 1. Create blank recipe via API.
+  const createRes = await request.post('/api/recipes/blank');
+  expect(createRes.status()).toBe(200);
+  const { id } = (await createRes.json()) as { id: number };
+  createdId = id;
+
+  // 2. Open recipe in edit mode.
+  await setActiveProfile(page, HENDRIK_ID);
+  await page.goto(`/recipes/${id}?edit=1`);
+
+  // 3. Add two ingredient rows.
+  const addIngBtn = page.getByRole('button', { name: /Zutat hinzufügen/i });
+  await addIngBtn.click();
+  await addIngBtn.click();
+
+  // Fill the two ingredient rows by aria-label "Zutat" inputs.
+  const nameInputs = page.locator('.ing-list .ing-row input[aria-label="Zutat"]');
+  await nameInputs.nth(0).fill('Mehl');
+  await nameInputs.nth(1).fill('Zucker');
+
+  // 4. Click "Abschnitt hinzufügen" above the first row.
+  // The button is inside .section-insert which is opacity:0 until hover/focus.
+  // Hover the ing-list to trigger visibility, then click.
+  await page.hover('.ing-list');
+  await page.locator('.ing-list .add-section').first().click();
+
+  // 5. Type heading text into the section-heading input that appeared.
+  const headingInput = page.locator('.ing-list input[aria-label="Sektionsüberschrift"]').first();
+  await headingInput.fill('Fuer den Teig');
+
+  // 6. Save — exact match to avoid colliding with "Kommentar speichern".
+  await page.getByRole('button', { name: 'Speichern', exact: true }).click();
+
+  // After save, editMode becomes false — page switches to view mode.
+  // Wait for the section-heading element to confirm view mode is active.
+  await expect(page.locator('.ing-list .section-heading').first()).toBeVisible({ timeout: 8000 });
+
+  // 7. Assert heading text is rendered.
+  await expect(page.locator('.ing-list .section-heading').first()).toHaveText('Fuer den Teig');
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Test 3 — UI: remove an existing section heading, save, confirm it's gone
+// ─────────────────────────────────────────────────────────────────────────────
+
+test('Editor: Sektion entfernen speichert ohne Ueberschrift', async ({ page, request }) => {
+  // 1. Create blank recipe and pre-populate via API.
+  const createRes = await request.post('/api/recipes/blank');
+  expect(createRes.status()).toBe(200);
+  const { id } = (await createRes.json()) as { id: number };
+  createdId = id;
+
+  await request.patch(`/api/recipes/${id}`, {
+    data: {
+      ingredients: [makeIngredient(1, 'Butter', 'Teig', { raw_text: 'Butter' })]
+    }
+  });
+
+  // 2. Open editor.
+  await setActiveProfile(page, HENDRIK_ID);
+  await page.goto(`/recipes/${id}?edit=1`);
+
+  // The section-heading-row should be visible since heading = 'Teig'.
+  const removeBtn = page
+    .locator('.ing-list')
+    .getByRole('button', { name: 'Sektion entfernen' });
+  await expect(removeBtn).toBeVisible({ timeout: 6000 });
+
+  // 3. Click the section-remove X button.
+  await removeBtn.click();
+
+  // 4. Save — exact match to avoid colliding with "Kommentar speichern".
+  await page.getByRole('button', { name: 'Speichern', exact: true }).click();
+
+  // Wait for view mode (editMode = false makes RecipeEditor unmount).
+  // The .section-heading-row is part of the editor; in view mode we check
+  // the view's .ing-list for absence of .section-heading items.
+  await expect(page.locator('.ing-list .section-heading')).toHaveCount(0, { timeout: 8000 });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Test 4 — empty heading trims to null on save
+// ─────────────────────────────────────────────────────────────────────────────
+
+test('Editor: leeres Heading wird beim Speichern zu null', async ({ page, request }) => {
+  // 1. Create blank recipe.
+  const createRes = await request.post('/api/recipes/blank');
+  expect(createRes.status()).toBe(200);
+  const { id } = (await createRes.json()) as { id: number };
+  createdId = id;
+
+  // 2. Open editor, add one ingredient, open section input and leave it empty.
+  await setActiveProfile(page, HENDRIK_ID);
+  await page.goto(`/recipes/${id}?edit=1`);
+
+  await page.getByRole('button', { name: /Zutat hinzufügen/i }).click();
+  await page.locator('.ing-list .ing-row input[aria-label="Zutat"]').first().fill('Eier');
+
+  // Trigger add-section visibility and click.
+  await page.hover('.ing-list');
+  await page.locator('.ing-list .add-section').first().click();
+
+  // Leave the heading input empty (do not type anything).
+  // The save() function trims '' → null.
+
+  // 3. Save — exact match to avoid colliding with "Kommentar speichern".
+  await page.getByRole('button', { name: 'Speichern', exact: true }).click();
+
+  // Wait until view mode is active (editor gone).
+  await expect(page.locator('.ing-list .section-heading')).toHaveCount(0, { timeout: 8000 });
+
+  // 4. Confirm via API that section_heading is null.
+  const getRes = await request.get(`/api/recipes/${id}`);
+  expect(getRes.status()).toBe(200);
+  const body = (await getRes.json()) as {
+    recipe: { ingredients: Array<{ name: string; section_heading: string | null }> };
+  };
+  const eier = body.recipe.ingredients.find((i) => i.name === 'Eier');
+  expect(eier?.section_heading).toBeNull();
+});

tests/e2e/remote/photo-import.spec.ts

@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test';
+import { resolve } from 'node:path';
+
+// Wir stubben den Extract-Endpoint server-side nicht (das Feature liegt auf
+// dev hinter dem echten Gemini-Key), sondern auf context-Ebene: Playwright
+// fängt alle Requests auf /api/recipes/extract-from-photo ab und liefert
+// einen deterministischen JSON-Body zurück. Keine Gemini-Kosten in CI.
+
+test('Foto-Import Happy-Path mit gestubtem Extract-Endpoint', async ({
+  page,
+  context
+}) => {
+  await context.route('**/api/recipes/extract-from-photo', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        recipe: {
+          id: null,
+          title: 'E2E Testrezept',
+          description: 'Aus dem Bild herbeigezaubert.',
+          source_url: null,
+          source_domain: null,
+          image_path: null,
+          servings_default: 2,
+          servings_unit: 'Portionen',
+          prep_time_min: 5,
+          cook_time_min: 10,
+          total_time_min: null,
+          cuisine: null,
+          category: null,
+          ingredients: [
+            {
+              position: 1,
+              quantity: 1,
+              unit: 'Stk',
+              name: 'E2E-Apfel',
+              note: null,
+              raw_text: '1 Stk E2E-Apfel',
+              section_heading: null
+            }
+          ],
+          steps: [{ position: 1, text: 'Apfel waschen.' }],
+          tags: []
+        }
+      })
+    });
+  });
+
+  await page.goto('/new/from-photo');
+  await expect(page.getByRole('heading', { name: 'Rezept aus Foto' })).toBeVisible();
+
+  const fixture = resolve(__dirname, '../../fixtures/photo-recipe/sample-printed.jpg');
+  await page.locator('input[type="file"]').setInputFiles(fixture);
+
+  await expect(page.getByText('Aus Foto erstellt')).toBeVisible({ timeout: 5000 });
+  // Titel-Feld (das erste text-input im Editor)
+  await expect(page.locator('input[type="text"]').first()).toHaveValue(
+    'E2E Testrezept'
+  );
+});
+
+test('Camera-Icon im Header wird disabled, wenn der Client offline geht', async ({
+  page,
+  context
+}) => {
+  await page.goto('/');
+  const icon = page.locator('[aria-label="Rezept aus Foto erstellen"]');
+  // Nur relevant, wenn der Dev-Server einen Gemini-Key hat — andernfalls ist
+  // das Icon per Graceful-Degradation gar nicht gerendert und der Test wird
+  // hier early-skipped. (Im Prod und Dev mit Key gilt der zweite Pfad.)
+  if ((await icon.count()) === 0) {
+    test.skip(true, 'Dev-Env hat keinen GEMINI_API_KEY gesetzt.');
+    return;
+  }
+  await expect(icon).toBeVisible();
+  await context.setOffline(true);
+  await page.waitForFunction(() => !navigator.onLine);
+  await expect(icon).toHaveClass(/disabled/);
+});

tests/e2e/remote/preview.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Preview-Route', () => {
+  test('ohne ?url= zeigt Guard-Fehlermeldung', async ({ page }) => {
+    await page.goto('/preview');
+    await expect(page.getByText(/Kein \?url=-Parameter/)).toBeVisible();
+    await expect(page.getByRole('heading', { name: /kein Rezept/i })).toBeVisible();
+  });
+
+  test('mit echter URL laedt Vorschau + Speichern-Button', async ({ page }) => {
+    const u = encodeURIComponent('https://emmikochteinfach.de/chicken-teriyaki/');
+    await page.goto(`/preview?url=${u}`);
+    await expect(page.getByText('Vorschau — noch nicht gespeichert')).toBeVisible({
+      timeout: 20000
+    });
+    await expect(page.getByRole('button', { name: /speichern/i })).toBeVisible();
+    // Zutaten aus dem JSON-LD sollten geparst sein.
+    await expect(page.getByText(/Hähnchenbrustfilet/i).first()).toBeVisible();
+  });
+
+  test('mit unparsbarer URL zeigt error-box', async ({ page }) => {
+    // google.com hat kein Recipe-JSON-LD -> Parser-Fehler.
+    const u = encodeURIComponent('https://www.google.com');
+    await page.goto(`/preview?url=${u}`);
+    await expect(page.getByRole('heading', { name: /kein Rezept/i })).toBeVisible({
+      timeout: 20000
+    });
+  });
+});

tests/e2e/remote/profile.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+import { clearActiveProfile, setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+
+test.describe('Profil', () => {
+  test('Switcher zeigt alle 3 Profile', async ({ page }) => {
+    await clearActiveProfile(page);
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Profil wechseln' }).click();
+    await expect(page.getByText('Wer kocht heute?')).toBeVisible();
+    for (const name of ['Hendrik', 'Verena', 'Leana']) {
+      await expect(
+        page.locator('.profile-btn', { hasText: name })
+      ).toBeVisible();
+    }
+  });
+
+  test('Profil-Auswahl persistiert im Header', async ({ page }) => {
+    await clearActiveProfile(page);
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Profil wechseln' }).click();
+    await page.locator('.profile-btn', { hasText: 'Hendrik' }).click();
+    await expect(page.getByRole('button', { name: 'Profil wechseln' })).toContainText('Hendrik');
+  });
+
+  test('mit aktivem Profil: "Deine Favoriten"-Sektion erscheint', async ({ page }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    await page.goto('/');
+    await expect(
+      page.getByRole('heading', { level: 2, name: 'Deine Favoriten' })
+    ).toBeVisible();
+  });
+
+  test('ohne Profil: Rating-Klick oeffnet Standard-Hinweis', async ({ page }) => {
+    await clearActiveProfile(page);
+    await page.goto('/recipes/66');
+    await page.getByRole('button', { name: '5 Sterne' }).click();
+    await expect(page.getByText('Kein Profil gewählt')).toBeVisible();
+    await expect(page.getByText(/klappt die Aktion/)).toBeVisible();
+  });
+});

tests/e2e/remote/recipe-detail.spec.ts

@@ -0,0 +1,84 @@
+import { test, expect } from '@playwright/test';
+import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+import {
+  clearFavorite,
+  clearRating,
+  removeFromWishlist
+} from './fixtures/api-cleanup';
+
+// Chicken Teriyaki auf kochwas-dev: 4 Portionen, 500 g Haehnchen, 100 ml Soja.
+const RECIPE_ID = 66;
+
+test.describe('Rezept-Detail', () => {
+  test.beforeEach(async ({ page }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+  });
+
+  test.afterEach(async ({ request }) => {
+    await clearRating(request, RECIPE_ID, HENDRIK_ID);
+    await clearFavorite(request, RECIPE_ID, HENDRIK_ID);
+    await removeFromWishlist(request, RECIPE_ID, HENDRIK_ID);
+  });
+
+  test('Header + Zutaten sichtbar', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    await expect(
+      page.getByRole('heading', { level: 1, name: /Chicken Teriyaki/i })
+    ).toBeVisible();
+    await expect(page.getByText('Hähnchenbrustfilet').first()).toBeVisible();
+  });
+
+  test('Portionen-Scaler: 4 -> 6 skaliert Mengen proportional', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    // Start: 4 Portionen, 500 g Haehnchen, 100 ml Soja.
+    await expect(page.locator('.srv-value strong').first()).toHaveText('4');
+    await page.getByRole('button', { name: 'Mehr' }).first().click();
+    await page.getByRole('button', { name: 'Mehr' }).first().click();
+    await expect(page.locator('.srv-value strong').first()).toHaveText('6');
+    // Skalierte Mengen 1.5x — ueber das Item-Name-Filter, robuster
+    // gegenueber Whitespace-Quirks zwischen <span class="qty">-Teilen.
+    await expect(
+      page.locator('.ing-list li', { hasText: 'Hähnchenbrustfilet' })
+    ).toContainText('750 g');
+    await expect(
+      page.locator('.ing-list li', { hasText: 'Sojasauce' })
+    ).toContainText('150 ml');
+  });
+
+  test('Favorit toggelt heart-Klasse sauber', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    const favBtn = page.getByRole('button', { name: 'Favorit' });
+    await expect(favBtn).not.toHaveClass(/heart/);
+    await favBtn.click();
+    await expect(favBtn).toHaveClass(/heart/);
+    await favBtn.click();
+    await expect(favBtn).not.toHaveClass(/heart/);
+  });
+
+  test('Rating persistiert ueber Reload', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    await page.getByRole('button', { name: '4 Sterne' }).click();
+    await expect(page.getByRole('button', { name: '4 Sterne' })).toHaveClass(/filled/);
+    await page.reload();
+    await expect(page.getByRole('button', { name: '4 Sterne' })).toHaveClass(/filled/);
+  });
+
+  test('Heute gekocht inkrementiert Counter', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    const cookedBtn = page.getByRole('button', { name: /Heute gekocht/i });
+    const before = (await cookedBtn.innerText()).trim();
+    await cookedBtn.click();
+    // Der Button bekommt einen "(N)"-Suffix bzw. der existierende zaehler
+    // steigt. Wir pruefen nur, dass sich der Text aendert.
+    await expect(cookedBtn).not.toHaveText(before);
+  });
+
+  test('Auf Wunschliste-Toggle funktioniert', async ({ page }) => {
+    await page.goto(`/recipes/${RECIPE_ID}`);
+    const wishBtn = page.getByRole('button', { name: /Auf Wunschliste/i });
+    const initialLabel = (await wishBtn.getAttribute('aria-label')) ?? '';
+    await wishBtn.click();
+    // aria-label wechselt zwischen "setzen" und "Von der Wunschliste entfernen"
+    await expect(wishBtn).not.toHaveAttribute('aria-label', initialLabel);
+  });
+});

tests/e2e/remote/search.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Suche', () => {
+  test('lokaler Treffer erscheint live beim Tippen', async ({ page }) => {
+    await page.goto('/');
+    await page.getByRole('searchbox', { name: 'Suchbegriff' }).fill('lasagne');
+    await expect(page.getByRole('link', { name: /Pfannen Lasagne/i })).toBeVisible({
+      timeout: 5000
+    });
+  });
+
+  test('Web-Fallback bei unbekanntem Begriff', async ({ page }) => {
+    // Direkt per URL — spart den Debounce-Timer.
+    await page.goto('/?q=pizza+margherita');
+    await expect(page.getByText(/Keine lokalen Rezepte/i)).toBeVisible({ timeout: 15000 });
+    // Mindestens ein Web-Treffer mit einer Domain-Labeling.
+    await expect(page.getByText(/chefkoch\.de|rezeptwelt\.de/i).first()).toBeVisible();
+  });
+
+  test('Nonsense-Query rendert Fallback ohne Crash', async ({ page }) => {
+    // SearXNG matcht loose — selbst Nonsense gibt oft Fuzzy-Treffer.
+    // Wir pruefen deshalb nur, dass die Seite sinnvoll reagiert
+    // (entweder echter Empty-State ODER Web-Fallback) und kein JS-Fehler
+    // fliegt.
+    const errors: string[] = [];
+    page.on('pageerror', (err) => errors.push(err.message));
+    await page.goto('/?q=xxyyzznotarecipexxxxxxxx');
+    await expect(
+      page.getByText(/Schaue unter den Topfdeckeln|Keine lokalen Rezepte/i)
+    ).toBeVisible({ timeout: 15000 });
+    expect(errors).toEqual([]);
+  });
+
+  test('Deep-Link ?q=lasagne stellt Query im Input wieder her', async ({ page }) => {
+    await page.goto('/?q=lasagne');
+    const sb = page.getByRole('searchbox', { name: 'Suchbegriff' });
+    await expect(sb).toHaveValue('lasagne');
+  });
+});

tests/e2e/remote/shopping.spec.ts

@@ -0,0 +1,117 @@
+import { test, expect } from '@playwright/test';
+import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+import { clearShoppingCart } from './fixtures/api-cleanup';
+
+test.describe('Einkaufsliste E2E', () => {
+  test.beforeEach(async ({ request }) => {
+    await clearShoppingCart(request);
+  });
+
+  test.afterEach(async ({ request }) => {
+    await clearShoppingCart(request);
+  });
+
+  test('Cart-Button auf der Wunschliste erzeugt Header-Badge', async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    // Voraussetzung: Dev-System hat mindestens einen Wunschlisten-Eintrag
+    const wlRes = await request.get('/api/wishlist?sort=popular');
+    const wlBody = (await wlRes.json()) as { entries: { recipe_id: number }[] };
+    test.skip(wlBody.entries.length === 0, 'Wunschliste leer auf Dev — Test uebersprungen');
+
+    await page.goto('/wishlist');
+    await page.getByLabel('In den Einkaufswagen').first().click();
+    await expect(page.getByLabel(/Einkaufsliste \(\d+\)/)).toBeVisible();
+  });
+
+  test('Shopping-List-Seite zeigt Rezept-Chip + Zutaten', async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    const wlRes = await request.get('/api/wishlist?sort=popular');
+    const wlBody = (await wlRes.json()) as { entries: { recipe_id: number }[] };
+    test.skip(wlBody.entries.length === 0, 'Wunschliste leer');
+    const recipeId = wlBody.entries[0].recipe_id;
+
+    await request.post('/api/shopping-list/recipe', { data: { recipe_id: recipeId } });
+    await page.goto('/shopping-list');
+
+    await expect(page.getByRole('heading', { level: 1, name: 'Einkaufsliste' })).toBeVisible();
+    // Chip fuers Rezept sichtbar
+    await expect(page.getByLabel('Portion weniger').first()).toBeVisible();
+    // Mindestens eine Zutatenzeile
+    await expect(page.locator('.row').first()).toBeVisible();
+  });
+
+  test('Portions-Stepper veraendert Mengen live', async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    const wlRes = await request.get('/api/wishlist?sort=popular');
+    const wlBody = (await wlRes.json()) as { entries: { recipe_id: number }[] };
+    test.skip(wlBody.entries.length === 0, 'Wunschliste leer');
+
+    await request.post('/api/shopping-list/recipe', {
+      data: { recipe_id: wlBody.entries[0].recipe_id, servings: 4 }
+    });
+    await page.goto('/shopping-list');
+    // Menge der ersten Zeile "vorher" lesen
+    const qtyBefore = await page.locator('.qty').first().textContent();
+    // Portion +1
+    await page.getByLabel('Portion mehr').first().click();
+    // Nach Fetch+Rerender muss die Menge sich aendern (ungleich dem Vorher-Wert)
+    await expect
+      .poll(async () => (await page.locator('.qty').first().textContent())?.trim())
+      .not.toBe(qtyBefore?.trim());
+  });
+
+  test('Abhaken: Zeile durchgestrichen, Badge-Count sinkt, persistiert nach Reload', async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    const wlRes = await request.get('/api/wishlist?sort=popular');
+    const wlBody = (await wlRes.json()) as { entries: { recipe_id: number }[] };
+    test.skip(wlBody.entries.length === 0, 'Wunschliste leer');
+
+    await request.post('/api/shopping-list/recipe', {
+      data: { recipe_id: wlBody.entries[0].recipe_id }
+    });
+    await page.goto('/shopping-list');
+
+    const countBadge = page.getByLabel(/Einkaufsliste \(\d+\)/);
+    const badgeTextBefore = await countBadge.textContent();
+    const numBefore = Number((badgeTextBefore ?? '').replace(/\D+/g, '')) || 0;
+
+    // Anzahl abgehakter Zeilen vorher (sollte 0 sein, weil beforeEach cart leert)
+    const checkedBefore = await page.locator('label.row.checked').count();
+    // Erste Zeile abhaken — Playwright laesst die Checkbox direkt interagieren
+    await page.locator('label.row').first().locator('input[type=checkbox]').check();
+    // Nach Store-Refresh sortiert SQL "ORDER BY checked ASC" abgehakte ans
+    // Ende, also pruefen wir die Gesamtzahl, nicht die Position.
+    await expect(page.locator('label.row.checked')).toHaveCount(checkedBefore + 1);
+
+    // Badge muss sinken (nach Store-Refresh)
+    await expect
+      .poll(async () => {
+        const t = (await countBadge.textContent()) ?? '';
+        return Number(t.replace(/\D+/g, '')) || 0;
+      })
+      .toBeLessThan(numBefore);
+
+    // Reload persistiert
+    await page.reload();
+    await expect(page.locator('label.row.checked').first()).toBeVisible();
+  });
+
+  test('Liste leeren: Confirm + Empty-State + Badge weg', async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    const wlRes = await request.get('/api/wishlist?sort=popular');
+    const wlBody = (await wlRes.json()) as { entries: { recipe_id: number }[] };
+    test.skip(wlBody.entries.length === 0, 'Wunschliste leer');
+
+    await request.post('/api/shopping-list/recipe', {
+      data: { recipe_id: wlBody.entries[0].recipe_id }
+    });
+    await page.goto('/shopping-list');
+
+    await page.getByRole('button', { name: 'Liste leeren' }).click();
+    // Confirm-Dialog (ConfirmAction nutzt einen App-eigenen Dialog, kein native)
+    await page.getByRole('button', { name: 'Leeren', exact: true }).click();
+
+    await expect(page.getByText('Einkaufswagen ist leer.')).toBeVisible();
+    await expect(page.getByLabel(/Einkaufsliste \(\d+\)/)).toHaveCount(0);
+  });
+});

tests/e2e/remote/wishlist.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import { clearActiveProfile, setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+
+test.describe('Wunschliste-Seite', () => {
+  test('laedt Header + Sort-Tabs', async ({ page }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    await page.goto('/wishlist');
+    await expect(page.getByRole('heading', { level: 1, name: 'Wunschliste' })).toBeVisible();
+    for (const label of ['Meist gewünscht', 'Neueste', 'Älteste']) {
+      await expect(page.getByRole('tab', { name: label })).toBeVisible();
+    }
+  });
+
+  test('Badge im Header stimmt mit Anzahl Eintraegen ueberein', async ({ page, request }) => {
+    await setActiveProfile(page, HENDRIK_ID);
+    await page.goto('/wishlist');
+    // Die API zaehlt die Wunschlisten-Rezepte — der Header-Badge sollte
+    // die gleiche Zahl zeigen.
+    const res = await request.get('/api/wishlist?sort=popular');
+    const body = (await res.json()) as { entries: unknown[] };
+    const expected = body.entries.length;
+    if (expected === 0) {
+      // Kein Badge bei Null — der Link hat dann gar keine Zahl.
+      return;
+    }
+    const badge = page.locator('a[href="/wishlist"]').first();
+    await expect(badge).toContainText(String(expected));
+  });
+
+  test('requireProfile zeigt Custom-Message "um mitzuwuenschen"', async ({ page }) => {
+    await clearActiveProfile(page);
+    await page.goto('/wishlist');
+    // Erster "Ich will das auch"-Button eines beliebigen Eintrags.
+    // Falls Wunschliste leer ist, ueberspringen.
+    const btn = page.getByRole('button', { name: /Ich will das auch/i }).first();
+    const count = await btn.count();
+    test.skip(count === 0, 'Wunschliste leer — Custom-Message-Test uebersprungen');
+
+    await btn.click();
+    await expect(page.getByText('Kein Profil gewählt')).toBeVisible();
+    await expect(page.getByText('um mitzuwünschen')).toBeVisible();
+  });
+});

tests/integration/extract-from-photo.test.ts

@@ -0,0 +1,140 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import sharp from 'sharp';
+
+const { mockExtract } = vi.hoisted(() => ({ mockExtract: vi.fn() }));
+
+vi.mock('$lib/server/ai/gemini-client', () => ({
+  extractRecipeFromImage: mockExtract,
+  GeminiError: class GeminiError extends Error {
+    constructor(
+      public readonly code: string,
+      message: string
+    ) {
+      super(message);
+      this.name = 'GeminiError';
+    }
+  }
+}));
+
+import { POST } from '../../src/routes/api/recipes/extract-from-photo/+server';
+import { GeminiError } from '$lib/server/ai/gemini-client';
+
+async function makeJpeg(): Promise<Buffer> {
+  return sharp({
+    create: { width: 100, height: 100, channels: 3, background: '#888' }
+  })
+    .jpeg()
+    .toBuffer();
+}
+
+function mkEvent(body: FormData, ip = '1.2.3.4') {
+  return {
+    request: new Request('http://test/api/recipes/extract-from-photo', {
+      method: 'POST',
+      body
+    }),
+    getClientAddress: () => ip
+  };
+}
+
+const validAiResponse = {
+  title: 'Testrezept',
+  servings_default: 4,
+  servings_unit: 'Portionen',
+  prep_time_min: 10,
+  cook_time_min: 20,
+  total_time_min: null,
+  ingredients: [{ quantity: 1, unit: null, name: 'Apfel', note: null }],
+  steps: [{ text: 'Apfel schälen.' }]
+};
+
+beforeEach(() => {
+  mockExtract.mockReset();
+  process.env.GEMINI_API_KEY = 'test-key';
+});
+
+describe('POST /api/recipes/extract-from-photo', () => {
+  it('happy path: 200 with recipe shape', async () => {
+    mockExtract.mockResolvedValueOnce(validAiResponse);
+    const fd = new FormData();
+    fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }), 'x.jpg');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST(mkEvent(fd) as any);
+    expect(res.status).toBe(200);
+    const body = await res.json();
+    expect(body.recipe.title).toBe('Testrezept');
+    expect(typeof body.recipe.description).toBe('string');
+    expect(body.recipe.description.length).toBeGreaterThan(0);
+    expect(body.recipe.image_path).toBeNull();
+    expect(body.recipe.ingredients[0].raw_text).toContain('Apfel');
+    expect(body.recipe.id).toBeNull();
+  });
+
+  it('413 when file exceeds 20 MB', async () => {
+    const big = Buffer.alloc(21 * 1024 * 1024);
+    const fd = new FormData();
+    fd.append('photo', new Blob([new Uint8Array(big)], { type: 'image/jpeg' }));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST(mkEvent(fd, '1.1.1.1') as any);
+    expect(res.status).toBe(413);
+    expect((await res.json()).code).toBe('PAYLOAD_TOO_LARGE');
+  });
+
+  it('415 when content-type not in whitelist', async () => {
+    const fd = new FormData();
+    fd.append('photo', new Blob([new Uint8Array(Buffer.from('hi'))], { type: 'text/plain' }));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST(mkEvent(fd, '2.2.2.2') as any);
+    expect(res.status).toBe(415);
+    expect((await res.json()).code).toBe('UNSUPPORTED_MEDIA_TYPE');
+  });
+
+  it('400 when no photo field', async () => {
+    const fd = new FormData();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST(mkEvent(fd, '3.3.3.3') as any);
+    expect(res.status).toBe(400);
+  });
+
+  it('422 NO_RECIPE_IN_IMAGE when 0 ingredients AND 0 steps', async () => {
+    mockExtract.mockResolvedValueOnce({
+      ...validAiResponse,
+      ingredients: [],
+      steps: []
+    });
+    const fd = new FormData();
+    fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST(mkEvent(fd, '4.4.4.4') as any);
+    expect(res.status).toBe(422);
+    expect((await res.json()).code).toBe('NO_RECIPE_IN_IMAGE');
+  });
+
+  it('503 AI_NOT_CONFIGURED when GeminiError thrown', async () => {
+    mockExtract.mockRejectedValueOnce(
+      new GeminiError('AI_NOT_CONFIGURED', 'no key')
+    );
+    const fd = new FormData();
+    fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST(mkEvent(fd, '5.5.5.5') as any);
+    expect(res.status).toBe(503);
+    expect((await res.json()).code).toBe('AI_NOT_CONFIGURED');
+  });
+
+  it('429 when rate limit exceeded for same IP', async () => {
+    mockExtract.mockResolvedValue(validAiResponse);
+    const ip = '9.9.9.9';
+    for (let i = 0; i < 10; i++) {
+      const fd = new FormData();
+      fd.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await POST(mkEvent(fd, ip) as any);
+    }
+    const last = new FormData();
+    last.append('photo', new Blob([new Uint8Array(await makeJpeg())], { type: 'image/jpeg' }));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST(mkEvent(last, ip) as any);
+    expect(res.status).toBe(429);
+  });
+});

tests/integration/recipe-repository.test.ts

@@ -70,7 +70,8 @@ describe('recipe repository', () => {
             unit: 'g',
             name: 'Pancetta',
             note: null,
-            raw_text: '200 g Pancetta'
+            raw_text: '200 g Pancetta',
+            section_heading: null
           }
         ],
         tags: ['Italienisch']
@@ -118,13 +119,13 @@ describe('recipe repository', () => {
       baseRecipe({
         title: 'Pasta',
         ingredients: [
-          { position: 1, quantity: 200, unit: 'g', name: 'Pancetta', note: null, raw_text: '200 g Pancetta' }
+          { position: 1, quantity: 200, unit: 'g', name: 'Pancetta', note: null, raw_text: '200 g Pancetta', section_heading: null }
         ]
       })
     );
     replaceIngredients(db, id, [
-      { position: 1, quantity: 500, unit: 'g', name: 'Nudeln', note: null, raw_text: '500 g Nudeln' },
-      { position: 2, quantity: 2, unit: null, name: 'Eier', note: null, raw_text: '2 Eier' }
+      { position: 1, quantity: 500, unit: 'g', name: 'Nudeln', note: null, raw_text: '500 g Nudeln', section_heading: null },
+      { position: 2, quantity: 2, unit: null, name: 'Eier', note: null, raw_text: '2 Eier', section_heading: null }
     ]);
     const loaded = getRecipeById(db, id);
     expect(loaded?.ingredients.length).toBe(2);
@@ -154,4 +155,31 @@ describe('recipe repository', () => {
     const loaded = getRecipeById(db, id);
     expect(loaded?.steps.map((s) => s.text)).toEqual(['Erst', 'Dann']);
   });
+
+  it('persistiert section_heading und gibt es beim Laden zurueck', () => {
+    const db = openInMemoryForTest();
+    const recipe = baseRecipe({
+      title: 'Torte',
+      ingredients: [
+        { position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '200 g Mehl', section_heading: 'Für den Teig' },
+        { position: 2, quantity: 100, unit: 'g', name: 'Zucker', note: null, raw_text: '100 g Zucker', section_heading: null },
+        { position: 3, quantity: 300, unit: 'g', name: 'Beeren', note: null, raw_text: '300 g Beeren', section_heading: 'Für die Füllung' }
+      ]
+    });
+    const id = insertRecipe(db, recipe);
+    const loaded = getRecipeById(db, id);
+    expect(loaded!.ingredients[0].section_heading).toBe('Für den Teig');
+    expect(loaded!.ingredients[1].section_heading).toBeNull();
+    expect(loaded!.ingredients[2].section_heading).toBe('Für die Füllung');
+  });
+
+  it('replaceIngredients persistiert section_heading', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, baseRecipe({ title: 'X' }));
+    replaceIngredients(db, id, [
+      { position: 1, quantity: null, unit: null, name: 'A', note: null, raw_text: 'A', section_heading: 'Kopf' }
+    ]);
+    const loaded = getRecipeById(db, id);
+    expect(loaded!.ingredients[0].section_heading).toBe('Kopf');
+  });
 });

tests/integration/recipe-views.test.ts

@@ -0,0 +1,270 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { openInMemoryForTest } from '../../src/lib/server/db';
+
+// ---------------------------------------------------------------------------
+// Module-level mock so the POST handler uses the in-memory test DB.
+// Must be declared before any import of the handler itself.
+// ---------------------------------------------------------------------------
+const { testDb } = vi.hoisted(() => ({
+  testDb: { current: null as ReturnType<typeof openInMemoryForTest> | null }
+}));
+
+vi.mock('$lib/server/db', async () => {
+  const actual =
+    await vi.importActual<typeof import('../../src/lib/server/db')>(
+      '../../src/lib/server/db'
+    );
+  return {
+    ...actual,
+    getDb: () => {
+      if (!testDb.current) throw new Error('test DB not initialised');
+      return testDb.current;
+    }
+  };
+});
+
+import { recordView, listViews } from '../../src/lib/server/recipes/views';
+import { createProfile } from '../../src/lib/server/profiles/repository';
+import { listAllRecipesPaginated } from '../../src/lib/server/recipes/search-local';
+import { POST } from '../../src/routes/api/recipes/[id]/view/+server';
+
+function seedRecipe(db: ReturnType<typeof openInMemoryForTest>, title: string): number {
+  const r = db
+    .prepare("INSERT INTO recipe (title, created_at) VALUES (?, datetime('now')) RETURNING id")
+    .get(title) as { id: number };
+  return r.id;
+}
+
+function mkReq(body: unknown) {
+  return new Request('http://test/api/recipes/1/view', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body)
+  });
+}
+
+describe('014_recipe_views migration', () => {
+  it('creates recipe_view table with expected columns', () => {
+    const db = openInMemoryForTest();
+    const cols = db.prepare("PRAGMA table_info(recipe_view)").all() as Array<{
+      name: string;
+      type: string;
+      notnull: number;
+      pk: number;
+    }>;
+    const byName = Object.fromEntries(cols.map((c) => [c.name, c]));
+    expect(byName.profile_id?.type).toBe('INTEGER');
+    expect(byName.profile_id?.notnull).toBe(1);
+    expect(byName.profile_id?.pk).toBe(1);
+    expect(byName.recipe_id?.type).toBe('INTEGER');
+    expect(byName.recipe_id?.notnull).toBe(1);
+    expect(byName.recipe_id?.pk).toBe(2);
+    expect(byName.last_viewed_at?.type).toBe('TIMESTAMP');
+    expect(byName.last_viewed_at?.notnull).toBe(1);
+  });
+
+  it('has index on (profile_id, last_viewed_at DESC)', () => {
+    const db = openInMemoryForTest();
+    const idxList = db
+      .prepare("PRAGMA index_list(recipe_view)")
+      .all() as Array<{ name: string }>;
+    expect(idxList.some((i) => i.name === 'idx_recipe_view_recent')).toBe(true);
+  });
+});
+
+describe('recordView', () => {
+  it('inserts a view row with default timestamp', () => {
+    const db = openInMemoryForTest();
+    const profile = createProfile(db, 'Test');
+    const recipeId = seedRecipe(db, 'Pasta');
+
+    recordView(db, profile.id, recipeId);
+
+    const rows = listViews(db, profile.id);
+    expect(rows.length).toBe(1);
+    expect(rows[0].recipe_id).toBe(recipeId);
+    expect(rows[0].last_viewed_at).toMatch(/^\d{4}-\d{2}-\d{2}/);
+  });
+
+  it('updates timestamp on subsequent view of same recipe', async () => {
+    const db = openInMemoryForTest();
+    const profile = createProfile(db, 'Test');
+    const recipeId = seedRecipe(db, 'Pasta');
+
+    recordView(db, profile.id, recipeId);
+    const first = listViews(db, profile.id)[0].last_viewed_at;
+
+    // tiny delay so the second timestamp differs
+    await new Promise((r) => setTimeout(r, 1100));
+    recordView(db, profile.id, recipeId);
+
+    const rows = listViews(db, profile.id);
+    expect(rows.length).toBe(1);
+    expect(rows[0].last_viewed_at >= first).toBe(true);
+  });
+
+  it('throws on unknown profile_id (FK)', () => {
+    const db = openInMemoryForTest();
+    const recipeId = seedRecipe(db, 'Pasta');
+    expect(() => recordView(db, 999, recipeId)).toThrow();
+  });
+
+  it('throws on unknown recipe_id (FK)', () => {
+    const db = openInMemoryForTest();
+    const profile = createProfile(db, 'Test');
+    expect(() => recordView(db, profile.id, 999)).toThrow();
+  });
+});
+
+describe("listAllRecipesPaginated sort='viewed'", () => {
+  it('puts recently-viewed recipes first, NULLs alphabetically last', async () => {
+    const db = openInMemoryForTest();
+    const profile = createProfile(db, 'Test');
+    const recipeA = seedRecipe(db, 'Apfelkuchen');
+    const recipeB = seedRecipe(db, 'Brokkoli');
+    // Inserted in reverse-alphabetical order (Z before D) to prove the
+    // tiebreaker sorts by title, not insertion order.
+    const recipeC = seedRecipe(db, 'Zwiebelkuchen');
+    const recipeD = seedRecipe(db, 'Donauwelle');
+
+    // View order: B then A. C and D never viewed.
+    recordView(db, profile.id, recipeB);
+    await new Promise((r) => setTimeout(r, 1100));
+    recordView(db, profile.id, recipeA);
+
+    const hits = listAllRecipesPaginated(db, 'viewed', 50, 0, profile.id);
+    // Viewed: A (most recent), B — then unviewed alphabetically: D before C.
+    expect(hits.map((h) => h.id)).toEqual([recipeA, recipeB, recipeD, recipeC]);
+  });
+
+  it('falls back to alphabetical when profileId is null', () => {
+    const db = openInMemoryForTest();
+    seedRecipe(db, 'Couscous');
+    seedRecipe(db, 'Apfelkuchen');
+    seedRecipe(db, 'Brokkoli');
+
+    const hits = listAllRecipesPaginated(db, 'viewed', 50, 0, null);
+    expect(hits.map((h) => h.title)).toEqual(['Apfelkuchen', 'Brokkoli', 'Couscous']);
+  });
+
+  it('keeps existing sorts working unchanged', () => {
+    const db = openInMemoryForTest();
+    seedRecipe(db, 'Couscous');
+    seedRecipe(db, 'Apfelkuchen');
+    seedRecipe(db, 'Brokkoli');
+
+    const hits = listAllRecipesPaginated(db, 'name', 50, 0);
+    expect(hits.map((h) => h.title)).toEqual(['Apfelkuchen', 'Brokkoli', 'Couscous']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// POST /api/recipes/[id]/view — endpoint integration tests
+// ---------------------------------------------------------------------------
+
+beforeEach(() => {
+  testDb.current = openInMemoryForTest();
+});
+
+describe('POST /api/recipes/[id]/view', () => {
+  it('204 + view row written on success', async () => {
+    const db = testDb.current!;
+    const profile = createProfile(db, 'Tester');
+    const recipeId = seedRecipe(db, 'Pasta');
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST({ params: { id: String(recipeId) }, request: mkReq({ profile_id: profile.id }) } as any);
+
+    expect(res.status).toBe(204);
+    const rows = listViews(db, profile.id);
+    expect(rows.length).toBe(1);
+    expect(rows[0].recipe_id).toBe(recipeId);
+  });
+
+  it('400 on recipe id = 0', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '0' }, request: mkReq({ profile_id: 1 }) } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on non-numeric recipe id', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: 'abc' }, request: mkReq({ profile_id: 1 }) } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on missing profile_id in body', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '1' }, request: mkReq({}) } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on non-positive profile_id', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '1' }, request: mkReq({ profile_id: 0 }) } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on malformed JSON body', async () => {
+    const badReq = new Request('http://test/api/recipes/1/view', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: 'not-json'
+    });
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '1' }, request: badReq } as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('404 on unknown profile_id (FK violation)', async () => {
+    const recipeId = seedRecipe(testDb.current!, 'Pasta');
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: String(recipeId) }, request: mkReq({ profile_id: 999 }) } as any)
+    ).rejects.toMatchObject({ status: 404 });
+  });
+
+  it('404 on unknown recipe_id (FK violation)', async () => {
+    const profile = createProfile(testDb.current!, 'Tester');
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST({ params: { id: '99999' }, request: mkReq({ profile_id: profile.id }) } as any)
+    ).rejects.toMatchObject({ status: 404 });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// GET /api/recipes/all — sort=viewed + profile_id
+// ---------------------------------------------------------------------------
+
+import { GET as allGet } from '../../src/routes/api/recipes/all/+server';
+
+describe('GET /api/recipes/all sort=viewed', () => {
+  it('passes profile_id through and returns viewed-order hits', async () => {
+    const db = openInMemoryForTest();
+    testDb.current = db;
+    const profile = createProfile(db, 'Test');
+    const a = seedRecipe(db, 'Apfel');
+    const b = seedRecipe(db, 'Birne');
+    recordView(db, profile.id, b);
+    await new Promise((r) => setTimeout(r, 1100));
+    recordView(db, profile.id, a);
+
+    const url = new URL(`http://localhost/api/recipes/all?sort=viewed&profile_id=${profile.id}&limit=10`);
+    const res = await allGet({ url } as never);
+    expect(res.status).toBe(200);
+    const body = await res.json();
+    expect(body.sort).toBe('viewed');
+    expect(body.hits.map((h: { id: number }) => h.id)).toEqual([a, b]);
+  });
+
+  it('400 on invalid sort', async () => {
+    const url = new URL('http://localhost/api/recipes/all?sort=invalid');
+    await expect(allGet({ url } as never)).rejects.toMatchObject({ status: 400 });
+  });
+});

tests/integration/recipes-post.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { openInMemoryForTest } from '../../src/lib/server/db';
+
+const { testDb } = vi.hoisted(() => {
+  // Lazy holder; real DB instantiated in beforeEach.
+  return { testDb: { current: null as ReturnType<typeof openInMemoryForTest> | null } };
+});
+
+vi.mock('$lib/server/db', async () => {
+  const actual =
+    await vi.importActual<typeof import('../../src/lib/server/db')>(
+      '../../src/lib/server/db'
+    );
+  return {
+    ...actual,
+    getDb: () => {
+      if (!testDb.current) throw new Error('test DB not initialised');
+      return testDb.current;
+    }
+  };
+});
+
+import { POST } from '../../src/routes/api/recipes/+server';
+
+function mkReq(body: unknown) {
+  return {
+    request: new Request('http://test/api/recipes', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body)
+    })
+  };
+}
+
+const validBody = {
+  title: 'Aus Foto erstellt',
+  description: 'Abrakadabra — Rezept da.',
+  servings_default: 4,
+  servings_unit: 'Portionen',
+  prep_time_min: 10,
+  cook_time_min: 20,
+  total_time_min: null,
+  ingredients: [
+    {
+      position: 1,
+      quantity: 1,
+      unit: null,
+      name: 'Apfel',
+      note: null,
+      raw_text: '1 Apfel',
+      section_heading: null
+    }
+  ],
+  steps: [{ position: 1, text: 'Apfel schneiden.' }]
+};
+
+beforeEach(() => {
+  testDb.current = openInMemoryForTest();
+});
+
+describe('POST /api/recipes', () => {
+  it('happy path returns 201 + id', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const res = await POST(mkReq(validBody) as any);
+    expect(res.status).toBe(201);
+    const body = await res.json();
+    expect(typeof body.id).toBe('number');
+    expect(body.id).toBeGreaterThan(0);
+  });
+
+  it('400 on empty title', async () => {
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST(mkReq({ ...validBody, title: '' }) as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+
+  it('400 on missing ingredients array', async () => {
+    const bad = { ...validBody } as Partial<typeof validBody>;
+    delete bad.ingredients;
+    await expect(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      POST(mkReq(bad) as any)
+    ).rejects.toMatchObject({ status: 400 });
+  });
+});

tests/integration/search-local.test.ts

@@ -48,7 +48,7 @@ describe('searchLocal', () => {
       recipe({
         title: 'Pasta',
         ingredients: [
-          { position: 1, quantity: 200, unit: 'g', name: 'Pancetta', note: null, raw_text: '' }
+          { position: 1, quantity: 200, unit: 'g', name: 'Pancetta', note: null, raw_text: '', section_heading: null }
         ]
       })
     );
@@ -69,20 +69,11 @@ describe('searchLocal', () => {
     expect(searchLocal(db, '   ')).toEqual([]);
   });
 
-  it('filters by domain when supplied', () => {
+  it('ignores source_domain — local search is domain-agnostic', () => {
     const db = openInMemoryForTest();
     insertRecipe(db, recipe({ title: 'Apfelstrudel', source_domain: 'chefkoch.de' }));
     insertRecipe(db, recipe({ title: 'Apfeltraum', source_domain: 'rezeptwelt.de' }));
-    const hits = searchLocal(db, 'apfel', 10, 0, ['chefkoch.de']);
-    expect(hits.length).toBe(1);
-    expect(hits[0].source_domain).toBe('chefkoch.de');
-  });
-
-  it('no domain filter when array is empty', () => {
-    const db = openInMemoryForTest();
-    insertRecipe(db, recipe({ title: 'Apfelstrudel', source_domain: 'chefkoch.de' }));
-    insertRecipe(db, recipe({ title: 'Apfeltraum', source_domain: 'rezeptwelt.de' }));
-    const hits = searchLocal(db, 'apfel', 10, 0, []);
+    const hits = searchLocal(db, 'apfel');
     expect(hits.length).toBe(2);
   });
 

tests/integration/shopping-repository.test.ts

@@ -0,0 +1,306 @@
+import { describe, it, expect } from 'vitest';
+import { openInMemoryForTest } from '../../src/lib/server/db';
+import { insertRecipe } from '../../src/lib/server/recipes/repository';
+import {
+  addRecipeToCart,
+  removeRecipeFromCart,
+  listShoppingList,
+  setCartServings,
+  toggleCheck,
+  clearCheckedItems,
+  clearCart
+} from '../../src/lib/server/shopping/repository';
+import type { Recipe } from '../../src/lib/types';
+
+function recipe(overrides: Partial<Recipe> = {}): Recipe {
+  return {
+    id: null,
+    title: 'Test',
+    description: null,
+    source_url: null,
+    source_domain: null,
+    image_path: null,
+    servings_default: 4,
+    servings_unit: null,
+    prep_time_min: null,
+    cook_time_min: null,
+    total_time_min: null,
+    cuisine: null,
+    category: null,
+    ingredients: [],
+    steps: [],
+    tags: [],
+    ...overrides
+  };
+}
+
+describe('addRecipeToCart', () => {
+  it('inserts recipe with default servings from recipe.servings_default', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({ title: 'Pasta', servings_default: 4 }));
+    addRecipeToCart(db, id, null);
+    const snap = listShoppingList(db);
+    expect(snap.recipes).toHaveLength(1);
+    expect(snap.recipes[0].servings).toBe(4);
+  });
+
+  it('respects explicit servings override', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({ servings_default: 4 }));
+    addRecipeToCart(db, id, null, 2);
+    expect(listShoppingList(db).recipes[0].servings).toBe(2);
+  });
+
+  it('is idempotent: second insert updates servings, not fails', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({ servings_default: 4 }));
+    addRecipeToCart(db, id, null, 2);
+    addRecipeToCart(db, id, null, 6);
+    const snap = listShoppingList(db);
+    expect(snap.recipes).toHaveLength(1);
+    expect(snap.recipes[0].servings).toBe(6);
+  });
+
+  it('falls back to servings=4 when recipe has no default', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({ servings_default: null }));
+    addRecipeToCart(db, id, null);
+    expect(listShoppingList(db).recipes[0].servings).toBe(4);
+  });
+});
+
+describe('removeRecipeFromCart', () => {
+  it('deletes only the given recipe', () => {
+    const db = openInMemoryForTest();
+    const a = insertRecipe(db, recipe({ title: 'A' }));
+    const b = insertRecipe(db, recipe({ title: 'B' }));
+    addRecipeToCart(db, a, null);
+    addRecipeToCart(db, b, null);
+    removeRecipeFromCart(db, a);
+    const snap = listShoppingList(db);
+    expect(snap.recipes).toHaveLength(1);
+    expect(snap.recipes[0].recipe_id).toBe(b);
+  });
+
+  it('is idempotent when recipe is not in cart', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe());
+    expect(() => removeRecipeFromCart(db, id)).not.toThrow();
+  });
+});
+
+describe('setCartServings', () => {
+  it('updates servings for a cart recipe', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe());
+    addRecipeToCart(db, id, null, 4);
+    setCartServings(db, id, 8);
+    expect(listShoppingList(db).recipes[0].servings).toBe(8);
+  });
+
+  it('rejects non-positive servings', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe());
+    addRecipeToCart(db, id, null, 4);
+    expect(() => setCartServings(db, id, 0)).toThrow();
+    expect(() => setCartServings(db, id, -3)).toThrow();
+  });
+});
+
+describe('listShoppingList aggregation', () => {
+  it('aggregates same name+unit across recipes', () => {
+    const db = openInMemoryForTest();
+    const a = insertRecipe(db, recipe({
+      title: 'Carbonara', servings_default: 4,
+      ingredients: [{ position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '', section_heading: null }]
+    }));
+    const b = insertRecipe(db, recipe({
+      title: 'Lasagne', servings_default: 4,
+      ingredients: [{ position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, a, null, 4);
+    addRecipeToCart(db, b, null, 4);
+    const rows = listShoppingList(db).rows;
+    expect(rows).toHaveLength(1);
+    expect(rows[0].name_key).toBe('mehl');
+    expect(rows[0].unit_key).toBe('g');
+    expect(rows[0].total_quantity).toBe(400);
+    expect(rows[0].from_recipes).toContain('Carbonara');
+    expect(rows[0].from_recipes).toContain('Lasagne');
+  });
+
+  it('keeps different units as separate rows', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      servings_default: 4,
+      ingredients: [
+        { position: 1, quantity: 100, unit: 'g', name: 'Mehl', note: null, raw_text: '', section_heading: null },
+        { position: 2, quantity: 1, unit: 'Pck', name: 'Mehl', note: null, raw_text: '', section_heading: null }
+      ]
+    }));
+    addRecipeToCart(db, id, null, 4);
+    const rows = listShoppingList(db).rows;
+    expect(rows).toHaveLength(2);
+  });
+
+  it('scales quantities by servings/servings_default', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      servings_default: 4,
+      ingredients: [{ position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, id, null, 2);
+    expect(listShoppingList(db).rows[0].total_quantity).toBe(100);
+  });
+
+  it('null quantity stays null after aggregation', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      ingredients: [{ position: 1, quantity: null, unit: null, name: 'Salz', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, id, null);
+    const rows = listShoppingList(db).rows;
+    expect(rows[0].total_quantity).toBeNull();
+    expect(rows[0].unit_key).toBe('');
+  });
+
+  it('counts unchecked rows in uncheckedCount', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      ingredients: [
+        { position: 1, quantity: 1, unit: 'Stk', name: 'Apfel', note: null, raw_text: '', section_heading: null },
+        { position: 2, quantity: 1, unit: 'Stk', name: 'Birne', note: null, raw_text: '', section_heading: null }
+      ]
+    }));
+    addRecipeToCart(db, id, null);
+    expect(listShoppingList(db).uncheckedCount).toBe(2);
+  });
+
+  it('does not blow up when servings_default is zero (silent NULL total_quantity)', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      servings_default: 0,
+      ingredients: [{ position: 1, quantity: 100, unit: 'g', name: 'Mehl', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, id, null, 4);
+    const rows = listShoppingList(db).rows;
+    expect(rows).toHaveLength(1);
+    expect(rows[0].total_quantity).toBeNull();
+  });
+});
+
+describe('toggleCheck', () => {
+  function setupOneRowCart() {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      ingredients: [{ position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, id, null);
+    return { db, id };
+  }
+
+  it('marks a row as checked', () => {
+    const { db } = setupOneRowCart();
+    toggleCheck(db, 'mehl', 'g', true);
+    const rows = listShoppingList(db).rows;
+    expect(rows[0].checked).toBe(1);
+  });
+
+  it('unchecks a row when passed false', () => {
+    const { db } = setupOneRowCart();
+    toggleCheck(db, 'mehl', 'g', true);
+    toggleCheck(db, 'mehl', 'g', false);
+    expect(listShoppingList(db).rows[0].checked).toBe(0);
+  });
+
+  it('check survives removal of one recipe when another still contributes', () => {
+    const db = openInMemoryForTest();
+    const a = insertRecipe(db, recipe({
+      title: 'A',
+      ingredients: [{ position: 1, quantity: 100, unit: 'g', name: 'Mehl', note: null, raw_text: '', section_heading: null }]
+    }));
+    const b = insertRecipe(db, recipe({
+      title: 'B',
+      ingredients: [{ position: 1, quantity: 200, unit: 'g', name: 'Mehl', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, a, null);
+    addRecipeToCart(db, b, null);
+    toggleCheck(db, 'mehl', 'g', true);
+    // Rezept A weg, Mehl kommt noch aus B — check bleibt, mit neuer Menge
+    removeRecipeFromCart(db, a);
+    const rows = listShoppingList(db).rows;
+    expect(rows[0].checked).toBe(1);
+    expect(rows[0].total_quantity).toBe(200);
+  });
+});
+
+describe('clearCheckedItems', () => {
+  it('removes recipes where ALL rows are checked', () => {
+    const db = openInMemoryForTest();
+    const a = insertRecipe(db, recipe({
+      title: 'A',
+      ingredients: [{ position: 1, quantity: 1, unit: 'Stk', name: 'Apfel', note: null, raw_text: '', section_heading: null }]
+    }));
+    const b = insertRecipe(db, recipe({
+      title: 'B',
+      ingredients: [
+        { position: 1, quantity: 1, unit: 'Stk', name: 'Birne', note: null, raw_text: '', section_heading: null },
+        { position: 2, quantity: 1, unit: 'Stk', name: 'Salz', note: null, raw_text: '', section_heading: null }
+      ]
+    }));
+    addRecipeToCart(db, a, null);
+    addRecipeToCart(db, b, null);
+    toggleCheck(db, 'apfel', 'stk', true);
+    toggleCheck(db, 'birne', 'stk', true);
+    // Salz aus B noch nicht abgehakt → B bleibt, A fliegt
+    clearCheckedItems(db);
+    const snap = listShoppingList(db);
+    expect(snap.recipes.map((r) => r.recipe_id)).toEqual([b]);
+    // Birne-Check bleibt, weil B noch im Cart und Birne noch aktiv
+    const birneRow = snap.rows.find((r) => r.name_key === 'birne');
+    expect(birneRow?.checked).toBe(1);
+  });
+
+  it('purges orphan checks that no longer map to any cart recipe', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      ingredients: [{ position: 1, quantity: 1, unit: 'Stk', name: 'Apfel', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, id, null);
+    toggleCheck(db, 'apfel', 'stk', true);
+    clearCheckedItems(db);
+    // Apfel-Check haengt jetzt an nichts mehr → muss aus der Tabelle raus sein
+    const row = db
+      .prepare('SELECT * FROM shopping_cart_check WHERE name_key = ?')
+      .get('apfel');
+    expect(row).toBeUndefined();
+  });
+
+  it('is a no-op when nothing is checked', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      ingredients: [{ position: 1, quantity: 1, unit: 'Stk', name: 'Apfel', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, id, null);
+    clearCheckedItems(db);
+    expect(listShoppingList(db).recipes).toHaveLength(1);
+  });
+});
+
+describe('clearCart', () => {
+  it('deletes all cart recipes and all checks', () => {
+    const db = openInMemoryForTest();
+    const id = insertRecipe(db, recipe({
+      ingredients: [{ position: 1, quantity: 1, unit: 'Stk', name: 'Apfel', note: null, raw_text: '', section_heading: null }]
+    }));
+    addRecipeToCart(db, id, null);
+    toggleCheck(db, 'apfel', 'stk', true);
+    clearCart(db);
+    const snap = listShoppingList(db);
+    expect(snap.recipes).toEqual([]);
+    expect(snap.rows).toEqual([]);
+    expect(snap.uncheckedCount).toBe(0);
+    const anyCheck = db.prepare('SELECT 1 FROM shopping_cart_check').get();
+    expect(anyCheck).toBeUndefined();
+  });
+});