test(e2e): Zutaten-Sektionen CRUD + UI-Flow auf kochwas-dev

4 new remote specs: API roundtrip, editor add-section + view render,
section remove, empty heading -> null on save. All 46 pass.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitea/workflows/docker.yml

@@ -2,7 +2,7 @@ name: Build & Publish Docker Image
 
 on:
   push:
-    branches: [main]
+    branches: ['**']
     tags: ['v*']
   workflow_dispatch:
 

.gitignore

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

docs/ARCHITECTURE.md

@@ -31,14 +31,13 @@ src/
 │   │   ├── search/           # searxng.ts (Web-Suche + Thumbnail-Cache)
 │   │   ├── wishlist/         # Repo
 │   │   └── backup/           # ZIP-Export via archiver, Import via yauzl
-│   ├── quotes.ts             # 49 Flachwitze für die Homepage
+│   ├── quotes.ts             # 150 Flachwitze für die Homepage
 │   └── types.ts              # shared types
 └── routes/
     ├── +layout.svelte        # Header, Confirm-Dialog-Mount, Header-Search-Dropdown
     ├── +page.svelte          # Home: Hero + Live-Search + Zuletzt-hinzugefügt
     ├── recipes/[id]/         # Rezept-Detail
     ├── preview/              # Vorschau vor dem Speichern
-    ├── search/               # /search (lokal), /search/web (Internet)
     ├── wishlist/
     ├── admin/                # Whitelist, Profile, Backup/Restore
     ├── images/[filename]     # Statische Auslieferung lokaler Bilder
@@ -52,7 +51,7 @@ src/
 1. User klickt auf Web-Hit → `/preview?url=...`
 2. `/api/recipes/preview` → `importer.ts` lädt HTML, `parseHTML` von linkedom, `json-ld-recipe.ts` extrahiert `Recipe`-Objekt mit **externer** Bild-URL
 3. Preview-Seite rendert das `Recipe` via `RecipeView.svelte` (erkennt externe URL und lädt direkt vom Original-CDN)
-4. User klickt „Speichern" → `/api/recipes/import` → Importer lädt Bild (`images/downloader.ts`), SHA256-Hash-Dedup, speichert lokal, INSERT in `recipe` + `recipe_ingredient` + `recipe_step` + `recipe_tag`
+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]`
 
 ### Web-Suche

docs/OPERATIONS.md

@@ -133,7 +133,7 @@ Die App hat ein eingebautes Backup unter `/admin` (ZIP-Export mit DB + Bildern).
 | `SEARXNG_URL` | `http://localhost:8888` | SearXNG-Endpoint, im Compose auf `http://searxng:8080` |
 | `KOCHWAS_THUMB_TTL_DAYS` | `30` | TTL für Thumbnail-Cache in der SQLite |
 | `DATABASE_PATH` | `data/kochwas.db` | Pfad zur SQLite, relativ oder absolut |
-| `IMAGES_PATH` | `data/images` | Pfad für lokale Bild-Dateien |
+| `IMAGE_DIR` | `data/images` | Pfad für lokale Bild-Dateien |
 | `PORT` | `3000` | Node-HTTP-Port (adapter-node) |
 
 Siehe `.env.example` im Repo.

docs/superpowers/plans/2026-04-18-review-fixes.md

@@ -0,0 +1,153 @@
+# Review-Fixes 2026-04-18 — Implementation Plan
+
+> **Quelle:** `docs/superpowers/review/REVIEW-2026-04-18.md` + Sub-Reports.
+> **Branch:** `review-fixes-2026-04-18`
+> **Goal:** Alle HIGH/MEDIUM Findings aus dem Code-Review adressieren, bewusst verschobene Items dokumentieren.
+> **Architecture:** Inkrementelle Refactors, jeder atomar committed + gepusht, Tests nach jedem Wave grün.
+> **Tech-Stack:** SvelteKit, TypeScript-strict, Zod, Vitest, better-sqlite3, Service-Worker.
+
+---
+
+## Was wird angegangen (must-do)
+
+| # | Wave | Zeit | Begründung |
+|---|------|------|------------|
+| 1 | Doku-Fixes (ARCHITECTURE/OPERATIONS/handoff) | 5 min | Hoher Wert, trivialer Aufwand |
+| 2 | constants.ts + Image-Endpoint EN + interne Types | 30 min | Alle "Quick-Wins" aus REVIEW |
+| 3 | api-helpers.ts (parsePositiveIntParam + validateBody) | 1-2 h | Refactor A — 9+11 Call-Sites |
+| 4 | requireProfile() + asyncFetch Wrapper | 1 h | Profile-Guard 4× + fetch-Pattern 5× |
+| 5 | Cleanup (yauzl-Doku, baseRecipe-Fixture, Console-Logs) | 30 min | Restliche LOW-Findings |
+| 6 | Ingredient-Parser Edge-Cases (Refactor D) | 2-3 h | Locale-Komma, Unicode-Brüche, Bounds |
+| 7 | Verifikation (test/check/build, Docker-Smoke) | 30 min | Baseline gegen Regressionen |
+| 8 | Re-Review + OPEN-ISSUES-NEXT.md | 1 h | Beweis + Ausblick |
+
+## Was bewusst NICHT angegangen wird (Begründung in OPEN-ISSUES-NEXT.md)
+
+- **Refactor B** (Search-State-Store, halber Tag): Touch von 808-Zeilen-Page + 678-Zeilen-Layout, bricht riskant Frontend ohne UAT. Eigene Phase planen.
+- **Refactor C** (RecipeEditor zerlegen): Review sagt explizit "keine Eile, solange niemand sonst drin arbeitet".
+- **SearXNG Rate-Limit Recovery**: Größeres Feature, eigene Phase.
+- **SW-Zombie-Cleanup Unit-Tests**: Bereits 6 pwa-store-Tests vorhanden, Erweiterung wäre Bonus.
+- **JSON-LD Parser Edge-Cases** (Locales): Weniger Käse als Ingredient-Parser-Issues, eigene Iteration.
+
+---
+
+## Wave 1 — Doku-Fixes
+
+**Files:** `docs/ARCHITECTURE.md:55`, `docs/OPERATIONS.md:135`, `docs/superpowers/session-handoff-2026-04-17.md:46`
+
+- [ ] ARCHITECTURE.md: `recipe_ingredient` + `recipe_step` → `ingredient` + `step`
+- [ ] OPERATIONS.md: `IMAGES_PATH` → `IMAGE_DIR`
+- [ ] session-handoff: `/api/recipes/[id]/image` (POST/DELETE) ergänzen
+- [ ] Commit `docs(review): Doku-Mismatches korrigiert`
+
+## Wave 2 — Konstanten + Cleanup
+
+**Files:** `src/lib/constants.ts` (neu), `src/routes/+page.svelte`, `src/lib/client/pwa.svelte.ts`, `src/routes/api/recipes/[id]/image/+server.ts`, `src/lib/sw/cache-strategy.ts`, `src/lib/sw/diff-manifest.ts`
+
+- [ ] `src/lib/constants.ts` mit `SW_VERSION_QUERY_TIMEOUT_MS = 1500`, `SW_UPDATE_POLL_INTERVAL_MS = 30 * 60_000`
+- [ ] Image-Endpoint: deutsche Fehlermeldungen → englisch (Konsistenz)
+- [ ] `RequestShape` / `ManifestDiff`: `export` weg wenn rein intern
+- [ ] Test + check, Commit
+
+## Wave 3 — api-helpers.ts (TDD)
+
+**Files:** `src/lib/server/api-helpers.ts` (neu), `tests/unit/api-helpers.test.ts` (neu), `src/lib/types.ts` (ErrorResponse)
+
+### 3a Helper bauen
+- [ ] Test: `parsePositiveIntParam("42", "id")` → 42
+- [ ] Test: `parsePositiveIntParam("0", "id")` wirft 400
+- [ ] Test: `parsePositiveIntParam("abc", "id")` wirft 400
+- [ ] Test: `parsePositiveIntParam(null, "id")` wirft 400
+- [ ] Test: `validateBody(invalid, schema)` wirft 400 mit issues
+- [ ] Test: `validateBody(valid, schema)` returns parsed
+- [ ] Implement helpers
+- [ ] Tests grün, Commit
+
+### 3b Migration parseId → parsePositiveIntParam (9 Sites)
+Files (jeder Endpoint):
+- `src/routes/api/recipes/[id]/+server.ts`
+- `src/routes/api/recipes/[id]/favorite/+server.ts`
+- `src/routes/api/recipes/[id]/rating/+server.ts`
+- `src/routes/api/recipes/[id]/cooked/+server.ts`
+- `src/routes/api/recipes/[id]/comments/+server.ts`
+- `src/routes/api/recipes/[id]/image/+server.ts`
+- `src/routes/api/profiles/[id]/+server.ts`
+- `src/routes/api/domains/[id]/+server.ts`
+- `src/routes/api/wishlist/[recipe_id]/+server.ts`
+
+- [ ] Pro Endpoint: lokales parseId entfernen, Helper importieren
+- [ ] Tests grün
+- [ ] Commit
+
+### 3c Migration safeParse → validateBody
+Files: alle `+server.ts` mit `safeParse`. ErrorResponse-Shape standardisieren.
+
+- [ ] Pro Endpoint umstellen
+- [ ] Tests grün
+- [ ] Commit
+
+## Wave 4 — Client-Helpers
+
+### 4a requireProfile()
+- [ ] Helper in `src/lib/client/profile.svelte.ts` ergänzen
+- [ ] 4 Sites in `src/routes/recipes/[id]/+page.svelte` ersetzen
+- [ ] Test + Commit
+
+### 4b asyncFetch Wrapper
+- [ ] `src/lib/client/api-fetch-wrapper.ts` mit `asyncFetch(url, init, actionTitle)`
+- [ ] 5 Sites umstellen: `recipes/[id]/+page.svelte` (2×), `admin/domains/+page.svelte` (2×), `admin/profiles/+page.svelte`
+- [ ] Test + Commit
+
+## Wave 5 — Cleanup
+
+- [ ] yauzl: Inline-Kommentar in package.json: "Reserved for Phase 5b ZIP-Backup-Import"
+- [ ] baseRecipe Fixture nach `tests/fixtures/recipe.ts` (wenn dupliziert)
+- [ ] Console-Logs: per `if (import.meta.env.DEV)` wrappen oder absichtlich-Kommentar
+- [ ] Commit
+
+## Wave 6 — Ingredient-Parser Edge-Cases
+
+**Files:** `src/lib/server/parsers/ingredient.ts`, `tests/unit/ingredient.test.ts`
+
+### Tests zuerst (red)
+- [ ] Locale-Komma: `"1,5 kg Mehl"` → qty 1.5
+- [ ] Unicode-½: `"½ TL Salz"` → qty 0.5
+- [ ] Unicode-⅓: `"⅓ Tasse Wasser"` → qty 1/3
+- [ ] Unicode-¼: `"¼ kg Zucker"` → qty 0.25
+- [ ] Negativ: `"-1 EL Öl"` → wirft / qty=null
+- [ ] Null: `"0 g Mehl"` → wirft / qty=null
+- [ ] Führende Null: `"0.5 kg"` → 0.5
+- [ ] Wissenschaftliche Notation: `"1e3 g"` → wirft / qty=null
+
+### Parser fixen
+- [ ] Unicode-Brüche-Map
+- [ ] Locale-Komma-Handling (sicher: "1,5" wenn nur 1 Komma + Ziffern drumrum)
+- [ ] Bounds: 0 < qty <= 10000 (Zod refinement oder Pre-Check)
+- [ ] Tests grün, Commit
+
+## Wave 7 — Verifikation
+
+- [ ] `npm test` — 158+ Tests grün
+- [ ] `npm run check` — 0 Errors
+- [ ] `npm run build` — erfolgreich
+- [ ] Optional: Docker-Smoke `docker compose -f docker-compose.prod.yml up --build`
+- [ ] Push aller Commits
+
+## Wave 8 — Re-Review + OPEN-ISSUES-NEXT.md
+
+- [ ] Parallele Explore-Agenten: dead-code, redundancy, structure, docs-vs-code
+- [ ] Befunde in `docs/superpowers/review/OPEN-ISSUES-NEXT.md`
+- [ ] Bewusst verschobene Items mit Begründung
+- [ ] Neue Findings (falls vorhanden)
+- [ ] Commit + Push
+
+---
+
+## Erfolgs-Kriterien
+
+1. Tests grün (158+)
+2. svelte-check: 0 Errors, 0 Warnings (oder ≤ Baseline)
+3. Build erfolgreich
+4. Alle 8 Quick-Wins + Refactor A + Refactor D umgesetzt
+5. OPEN-ISSUES-NEXT.md vorhanden mit klarer Trennung "verschoben (warum)" vs "neu entdeckt"
+6. Branch ready zum Mergen / PR

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-post-review-roadmap.md

@@ -0,0 +1,217 @@
+# Post-Review Roadmap 2026-04-19
+
+> **Quelle:** `docs/superpowers/review/OPEN-ISSUES-NEXT.md` (Items A–I) + UAT `kochwas-dev.siegeln.net` (Branch `review-fixes-2026-04-18`, 2026-04-19).
+> **Branch-Status:** Merge-ready — 8 atomare Commits, 184/184 Tests grün, svelte-check 0 Errors, UAT durchgeklickt (Profil, Suche, Rezept-Actions, Wunschliste, Preview, Admin, API-Shapes).
+> **Goal:** Die nach dem Review-Branch offenen 9 Items in priorisierte Phasen übersetzen, damit jede einzeln via `/gsd-plan-phase` → `/gsd-execute-phase` abgearbeitet werden kann.
+> **Architecture:** Keine Groß-Refactor-Phase, sondern getaktete Einzel-Phasen mit klarem Gate. Reihenfolge folgt Risiko × Wert: erst kleine Wins, dann eine strukturelle Phase (A), dann opportunistische.
+> **Tech-Stack:** SvelteKit, TypeScript-strict, Zod, Vitest, Playwright-UAT, better-sqlite3, Service-Worker.
+
+---
+
+## Merge-Entscheidung
+
+**Jetzt mergen.** Der Branch-UAT auf `kochwas-dev` war clean (siehe Session-Log 2026-04-19). Findings aus dem UAT:
+
+- Kommentar-Delete hat keinen UI-Button (MINOR, kein Branch-Regress — Zustand schon vor Refactor so).
+- `/preview` ohne `?url=` bleibt im Dauer-Lader (MINOR, harmlos — niemand ruft die Route blank auf).
+
+Beide werden als LOW-Items unten aufgenommen, sind aber **kein Merge-Blocker**.
+
+---
+
+## Tier-Zuordnung
+
+| Tier | Items | Wann | Aufwand total |
+|------|-------|------|---------------|
+| 1 — Schneller Cleanup-Batch | F, G, H, I | Direkt nach Merge | ~2 h |
+| 2 — Phase Search-State-Store | A | Nächster größerer Slot | halber Tag |
+| 3 — Phase SearXNG-Recovery | C | Wenn Rate-Limit-Schmerz konkret auftaucht | 1–2 h |
+| 4 — Opportunistisch | B, D, E, + Kommentar-Delete, Preview-Guard | Trigger-basiert | reaktiv |
+| 5 — Geparkt | yauzl / Phase 5b | Nur bei explizitem Bedarf | nicht geplant |
+
+---
+
+## Tier 1 — Cleanup-Batch (1 Phase, 4 Items)
+
+**Phasenname-Vorschlag:** `Phase Cleanup-Batch nach Review-Fixes` (via `/gsd-new-phase` oder `/gsd-add-phase`).
+
+Alle vier Items touchen wenige Zeilen, sind LOW/MEDIUM, und lassen sich in 1–2 Commits pro Item sauber atomar committen. **Gebündelt statt einzeln**, weil Kontext-Overhead pro Einzelphase größer wäre als der Fix.
+
+### Item I — RecipeEditor auf `$derived` umstellen
+
+**Files:** `src/lib/components/RecipeEditor.svelte:28,97–102,113,121`, `src/routes/recipes/[id]/+page.svelte:43`
+
+Pattern aktuell: `let foo = recipe.bar` → Svelte-5-Warning, Snapshot-only, bricht bei In-Place-Mutation des Rezepts.
+
+**Plan pro Warnung:**
+- [ ] Warning-Site auslesen, beurteilen: soll `foo` Mutations am `recipe` tracken oder bewusst ein Snapshot bleiben?
+- [ ] Track-Fall: `let foo = $derived(recipe.bar)`.
+- [ ] Snapshot-Fall: Variable umbenennen (z. B. `initialFoo`) und als `$state` deklarieren mit Kommentar `// intentional snapshot`.
+- [ ] `npm run check` — 0 Warnings erwartet.
+- [ ] `npm test` — grün.
+- [ ] Commit: `refactor(editor): RecipeEditor auf $derived umstellen`.
+
+**Gate:** svelte-check 0 Warnings, alle Editor-Flows (Titel, Zutaten, Schritte) per Hand getestet — In-Place-PATCH zeigt aktualisierten Wert.
+
+### Item H — RecipeEditor Bild-Upload/Delete auf `asyncFetch`
+
+**Files:** `src/lib/components/RecipeEditor.svelte:54,83`
+
+**Warum zusammen mit I:** Gleiche Datei, gleicher Touch.
+
+- [ ] Zeile 54 (Upload): `const res = await fetch(...); if (!res.ok) alertAction(...)` → `await asyncFetch(...)`.
+- [ ] Zeile 83 (Delete): dito.
+- [ ] Error-Messages beibehalten.
+- [ ] Test manuell: Bild hochladen + löschen in einem Test-Rezept.
+- [ ] Commit: `refactor(editor): Bild-Upload/Delete auf asyncFetch`.
+
+**Gate:** Bild-Upload + Delete-Flow grün in manuellem Smoke; `npm run check` clean.
+
+### Item F — Inline UI-Constants in `src/lib/theme.ts`
+
+**Files:** Neu `src/lib/theme.ts`, Modify `ConfirmDialog.svelte`, `ProfileSwitcher.svelte`, weitere Call-Sites via `grep`.
+
+- [ ] `grep -rn "z-index:\|border-radius: 999\|setTimeout.*[0-9]{3,4}" src/lib/components src/routes` — Call-Sites auflisten.
+- [ ] `src/lib/theme.ts` anlegen mit: `MODAL_Z_INDEX = 1000`, `POPOVER_Z_INDEX = 900`, `PILL_RADIUS = '999px'` (nur Werte, die wirklich mehrfach vorkommen — YAGNI).
+- [ ] Call-Sites durchgehen, Inline-Werte durch Import ersetzen.
+- [ ] `npm run check` + `npm test`.
+- [ ] Commit: `refactor(ui): shared theme constants fuer z-index/radius`.
+
+**Gate:** Keine visuellen Änderungen beim Durchklicken (Confirm-Dialog, Profile-Switcher, Toast, Menü).
+
+### Item G — `requireProfile()` mit optionaler Message
+
+**Files:** `src/lib/client/confirm.svelte.ts` (oder wo `requireProfile` liegt), `src/routes/wishlist/+page.svelte:38`
+
+**Option A — minimal invasiv:** `wishlist/+page.svelte` belassen, Custom-Message-Konstante in der Datei. Dann **nur dokumentieren** im Kommentar der `requireProfile`-Funktion, dass die Wunschliste bewusst eigenständig ist.
+
+**Option B — DRY:** `requireProfile(message?: string): Profile | null` mit Fallback auf Default.
+
+- [ ] **Entscheidung zuerst** — Option A sparsamer, Option B konsistent. Ich empfehle **A**, weil die Custom-Message in der Wunschliste wirklich Kontext ist („um mitzuwünschen"), nicht nur Deko. Aber: wenn B, dann sauber mit Unit-Test.
+- [ ] Commit: `refactor(client): requireProfile Custom-Message entscheiden` (je nach Entscheidung).
+
+**Gate:** Wunschliste zeigt beim Klick ohne Profil die korrekte Message; keine anderen Sites verhalten sich anders.
+
+---
+
+## Tier 2 — Phase Search-State-Store (Item A)
+
+**Empfohlener Einstieg:** `/gsd-discuss-phase Search-State-Store` (per OPEN-ISSUES Empfehlung), nicht direkt `/gsd-plan-phase`.
+
+**Warum eigene Phase:** Touch `+page.svelte` (808 L) + `+layout.svelte` (678 L), Reactive-Glue zwischen Header-Search-Dropdown und Home-Search muss 1:1 übernommen werden. **UAT-pflichtig**, weil es keine UI-Tests gibt.
+
+**Scope-Sketch (für die Discuss-Phase):**
+
+- Neu: `src/lib/client/search.svelte.ts` — reaktiver Store mit `query`, `hits`, `loading`, `error`, `hasMore`, `search(q)`, `loadMore()`, `clear()`.
+- Debounce (aktuell in `+page.svelte`) in den Store migrieren.
+- Web-Fallback-Logik (lokal leer → Web-Suche) beibehalten — Store muss beide Modi kennen (`mode: 'local' | 'web'`).
+- `+layout.svelte` Header-Dropdown zuerst migrieren (kleineres Surface), dann `+page.svelte`.
+- Duplizierten `$state`-Block entfernen.
+
+**Verifikation pro Wave:**
+1. Nach Store-Anlegen: Vitest-Unit-Tests für Store (mocked fetch).
+2. Nach Layout-Migration: Browser-UAT Header-Dropdown auf Rezept-Seite + Startseite.
+3. Nach Page-Migration: Browser-UAT Live-Suche (lokaler Treffer, Web-Fallback, Empty-State), inkl. Deep-Link `?q=xyz`.
+4. Playwright-Script wiederholen (existiert aus 2026-04-19 UAT).
+
+**Gate:** Alle 3 UAT-Pfade clean; `+page.svelte` unter 700 L; `+layout.svelte` unter 600 L; `npm test` + `npm run check` grün.
+
+**Aufwand:** halber Tag (4–6 h).
+
+---
+
+## Tier 3 — Phase SearXNG-Rate-Limit-Recovery (Item C)
+
+**Trigger:** Wenn konkreter Schmerz (User merkt „Suche liefert komische alte Sachen" oder SearXNG logt 429/403 gehäuft).
+
+**Scope:**
+
+- `src/lib/server/search/searxng.ts`: `lastFailureAt: Map<string, number>` pro Domain.
+- Exponentieller Backoff: bei wiederholtem 429/403 → 1 min → 5 min → 30 min (Cap).
+- Response-Shape erweitern: `isStale?: boolean` wenn aus Cache nach Fail.
+- UI: `src/routes/+page.svelte` Such-Ergebnisheader zeigt „Ergebnisse evtl. veraltet" wenn `isStale`.
+
+**Tests (TDD, Vitest):**
+
+- Simulierter 429 → nächster Call innerhalb 1 min geht nicht raus, Response aus Cache mit `isStale: true`.
+- Nach 1 min Wartezeit → Call geht wieder raus.
+- Nach erfolgreichem Call → Backoff-Zähler resettet.
+
+**Gate:** Tests grün; manuell: Fake-429 injizieren (z. B. über ENV-Toggle im Dev), UI zeigt Hinweis.
+
+**Aufwand:** 1–2 h.
+
+---
+
+## Tier 4 — Opportunistisch (Trigger-gesteuert)
+
+Alle Items hier werden **nicht proaktiv** geplant. Sie warten auf ihren Trigger.
+
+### Item B — RecipeEditor/RecipeView in Sub-Components
+
+**Trigger:** Zweite Person arbeitet am Projekt mit, ODER Editor-Bug-Hunt wird unübersichtlich.
+
+**Scope-Sketch:** `IngredientRow.svelte`, `StepList.svelte`, `TimeDisplay.svelte`, `ImageUploadBox.svelte`.
+
+**Vorbedingung:** Item I muss zuerst durch sein (die pre-existing Warnings würden sonst in die Sub-Components wandern).
+
+### Item D — SW Zombie-Cleanup unter Drosselung
+
+**Trigger:** Nächster Service-Worker-Touch (z. B. neue Cache-Strategy oder Chunks-Manifest-Änderung).
+
+**Scope:** Mit DevTools-Throttling-Profil „Slow 3G" durchgehen, prüfen ob der 1500ms-Timeout in `pwa.svelte.ts` False-Positives triggert. Falls ja: Timeout konfigurierbar oder Heuristik verfeinern.
+
+### Item E — JSON-LD Parser Locale-Edge-Cases
+
+**Trigger:** Echter Import-Bug aus dem Alltag.
+
+**Scope:** Gezielter Test für die Fail-URL + Fix. Kein Vorab-Sprint.
+
+### Kommentar-Delete-UI (UAT 2026-04-19)
+
+**Status:** Kommentar-DELETE-Endpoint existiert, aber keine UI-Exposition.
+
+**Vorschlag:** In `src/routes/recipes/[id]/+page.svelte` Kommentar-Liste pro Eintrag ein 🗑-Button für den Autor (`comment.profile_id === profileStore.active?.id`). Mit `confirmAction`-Dialog.
+
+**Trigger:** Erster Wunsch, einen Kommentar loszuwerden.
+
+**Aufwand:** ~30 min.
+
+### Preview-ohne-URL-Guard (UAT 2026-04-19)
+
+**Status:** `/preview` ohne `?url=` bleibt im Dauer-Lader.
+
+**Vorschlag:** `src/routes/preview/+page.svelte` Zeile 33ff.: wenn `u` leer, `errored = 'Kein URL-Parameter gesetzt'` oder Redirect auf `/`. **2-Zeilen-Fix.**
+
+**Trigger:** Bevor jemand die Route bookmarked.
+
+**Aufwand:** 5 min — könnte man auch sofort in Tier 1 reinnehmen, ist aber so trivial, dass es ohne Phase geht.
+
+---
+
+## Tier 5 — Geparkt
+
+### Phase 5b — ZIP-Backup-Restore via `yauzl`
+
+**Status:** Dokumentiert in `ARCHITECTURE.md:33` und `session-handoff-2026-04-17.md`. Dependency bleibt installiert.
+
+**Kein Plan.** Wird erst aktiviert, wenn jemand wirklich ein Backup-ZIP zurückspielen will. Dann: `/gsd-plan-phase Phase-5b-ZIP-Restore`.
+
+---
+
+## Empfohlene Ausführungs-Reihenfolge
+
+1. **Merge** `review-fixes-2026-04-18` → `main`.
+2. **Neuen Branch** `cleanup-batch-post-review` → Tier 1 (Items I + H zusammen in einem Wave, dann F, dann G).
+3. **Merge** → Tier 2 Discuss: `/gsd-discuss-phase Search-State-Store`.
+4. Tier 2 execution.
+5. Tier 3 erst wenn der Trigger da ist, sonst Tier 4 abwarten.
+
+---
+
+## Commit-Stil für alle Phasen
+
+- Deutsch, kleinteilig, eine Idee pro Commit.
+- Body erklärt das *Warum* (Reference auf Item-Nummer aus diesem Doc).
+- Nach jedem Commit `npm test` + `npm run check` grün.
+- Push direkt nach Commit (CI baut Branch-Tag, siehe `docker.yml`).

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/review/OPEN-ISSUES-NEXT.md

@@ -0,0 +1,166 @@
+# Open Issues — Stand nach Review-Fixes
+
+**Datum:** 2026-04-18 (Nacht-Session)
+**Branch:** `review-fixes-2026-04-18`
+**Baseline:** REVIEW-2026-04-18.md + 4 Sub-Reports vom Morgen
+**Tests:** 184/184 grün (Baseline waren 158, +26 neue Tests)
+**svelte-check:** 0 Errors, 10 Warnings (alle pre-existing in `RecipeEditor.svelte` / `recipes/[id]/+page.svelte`)
+**Build:** `npm run build` erfolgreich
+**Smoke-Test:** `npm run preview` + curl auf `/api/health`, `/api/profiles`, `/api/recipes/abc` (400), `/api/wishlist` mit invalider Body (400 + issues) — alle Endpunkte verhalten sich korrekt
+
+---
+
+## Was wurde gemacht (8 Commits)
+
+| Commit | Inhalt | Verifikation |
+|---|---|---|
+| `2289547` | docs(review): table names, IMAGE_DIR, image endpoints | grep auf alte Namen → 0 |
+| `830c740` | refactor(constants): SW-Timing-Konstanten, RequestShape/ManifestDiff intern, Image-Endpoint EN | tests + check grün |
+| `739cc2d` | feat(server): api-helpers.ts (parsePositiveIntParam, validateBody, ErrorResponse) | 13 neue Tests |
+| `ff293e9` | refactor(api): 13 +server.ts handler auf api-helpers (-67 Zeilen netto) | 171/171 |
+| `30a447a` | refactor(client): requireProfile() + asyncFetch wrapper | 5 + 4 Sites umgestellt |
+| `60c8352` | docs(searxng): Intent-Kommentar fuer Prod-Logs | — |
+| `6d9e79d` | feat(parser): Unicode-Brueche + Mengen-Plausibilitaet | 13 neue Tests |
+| `31c6e5c` | refactor(server): IMAGE_DIR/DATABASE_PATH zentralisieren + Doku-Drift | grep auf alte Pattern → 0 |
+
+Net: 31 Files, +626/-272.
+
+### Re-Review per 4 paralleler Explore-Agenten — Beweis
+
+**Dead-Code (HIGH-Confidence):** Alle vorherigen Findings resolved. RequestShape + ManifestDiff sind nur noch interne Types. yauzl ist explizit als Phase 5b markiert (in `session-handoff-2026-04-17.md` und `ARCHITECTURE.md:33`). Kein neuer toter Code durch die Refactors.
+
+**Redundancy (HIGH-Confidence):** 0 verbleibende `function parseId`/`parsePositiveInt`-Definitionen in `src/routes/api/`. 0 verbleibende `safeParse(...) + manueller error(400)`-Blöcke. Der gerade behobene `IMAGE_DIR`-Drift war 6× im Code und 1× in `db/index.ts`. Verbleibende kleine Pattern siehe unten.
+
+**Structure:** Constants-Extraktion + API-Error-Shape-Standardisierung erledigt. Ingredient-Parser-Edge-Cases mit 13 Tests abgesichert. Große Pages bleiben groß (siehe „Bewusst verschoben").
+
+**Docs-vs-Code:** Alle drei Original-Findings behoben. Zwei kleine zusätzliche Mismatches (149→150 Quote-Count, search/-Route gar nicht existent) heute gleich mitgenommen.
+
+---
+
+## ⚠ Verbleibende Items — bewusst verschoben mit Begründung
+
+### A. Refactor B — Search-State-Store extrahieren (HIGH, halber Tag)
+**Wo:** `src/routes/+page.svelte` (808 Zeilen, 20+ `$state`-Vars), `src/routes/+layout.svelte` (678 Zeilen, dupliziert das Header-Search-Dropdown).
+
+**Vorschlag:** `src/lib/client/search.svelte.ts` mit `search()`, `loadMore()`, `clear()` und reaktivem `query / hits / loading / error`-Zustand.
+
+**Warum nicht heute:**
+1. Touch in zwei der drei größten Files der Codebase (808L + 678L)
+2. Bricht Frontend-Verhalten subtil, wenn Reactive-Glue zwischen Layout-Search und Page-Search nicht 1:1 übernommen wird
+3. UAT-pflichtig (Live-Suche, Empty-State, Web-Suche-Fallback) — ohne UAT-Slot zu riskant
+4. Kein automatisches Test-Sicherheitsnetz für die UI-Layer
+
+**Empfehlung:** Eigene Phase mit `/gsd-discuss-phase` und Smoke-UAT vor dem Mergen. Anschließend `/gsd-execute-phase` mit Browser-Check pro Wave.
+
+---
+
+### B. Refactor C — RecipeEditor / RecipeView in Sub-Components zerlegen (MEDIUM, halber Tag)
+**Wo:** `src/lib/components/RecipeEditor.svelte` (630L), `RecipeView.svelte` (398L).
+
+**Kandidaten:** `IngredientRow.svelte`, `StepList.svelte`, `TimeDisplay.svelte`, `ImageUploadBox.svelte`.
+
+**Warum nicht heute:**
+- REVIEW-2026-04-18.md sagt explizit: *"Aber: keine Eile, solange niemand sonst drin arbeitet."*
+- Solange der Owner allein entwickelt, ist 630L pro Komponente kein Blocker.
+- Tests gibt es nur indirekt (über Importer-Tests und Unit-Tests der Parser).
+
+**Empfehlung:** Spätere Phase, falls eine zweite Person mitarbeitet oder wenn Editor-Bug-Hunting zu schwierig wird. Vorher zumindest die 10 pre-existing svelte-check WARNINGs in `RecipeEditor.svelte` fixen — die sind schon flackrige Reactive-Patterns (`$derived` statt `$state` für abgeleitete Werte).
+
+---
+
+### C. SearXNG Rate-Limit Recovery (MEDIUM, 1-2 h)
+**Wo:** `src/lib/server/search/searxng.ts`.
+
+**Was fehlt:** Bei 429/403 wird zwar geloggt, aber kein Backoff oder `isStale`-Flag. Folgesuchen liefern alten Cache, der User merkt nichts.
+
+**Empfehlung:** Eigene Phase. Drei mögliche Zutaten: (1) `lastFailureAt`-Map per Domain, (2) exponentieller Backoff, (3) `isStale: boolean` im Response, das die UI als „Ergebnisse evtl. veraltet" anzeigt.
+
+---
+
+### D. Service-Worker Zombie-Cleanup unter Last testen (MEDIUM, 2-3 h)
+**Wo:** `src/lib/client/pwa.svelte.ts` Zombie-Heuristik.
+
+**Status:** 6 Unit-Tests existieren bereits (`tests/unit/pwa-store.test.ts`), die beide Pfade abdecken.
+
+**Was offen ist:** Verhalten unter sehr langsamen Netzen (1500ms-Timeout könnte False-Positive triggern). Sehr edge-case, aber im REVIEW-Original als MEDIUM gelistet.
+
+**Empfehlung:** Beim nächsten Service-Worker-Touch mit Throttling-DevTools-Profil testen. Kein eigener Sprint nötig.
+
+---
+
+### E. JSON-LD Parser Edge-Cases (MEDIUM, halbe Phase)
+**Wo:** `src/lib/server/parsers/json-ld-recipe.ts` (402L).
+
+**Was abgesichert ist:** Ingredient-Parser-Käfer (Unicode-Brüche, Bounds, Komma-Dezimal) sind heute mit 13 neuen Tests dicht.
+
+**Was offen ist:** JSON-LD selbst hat Edge-Cases — null-Servings, Locale-spezifische Number-Formats, defekte `recipeIngredient`-Arrays.
+
+**Empfehlung:** Wenn beim Importieren ein Bug auftaucht, gezielt einen Test schreiben. Kein Vorab-Sprint.
+
+---
+
+### F. Inline UI-Constants (LOW, 30 min)
+**Wo:** `ConfirmDialog.svelte`, `ProfileSwitcher.svelte` etc. mit Hardcoded `z-index`, `border-radius: 999px`, kleinen Timeouts.
+
+**Vorschlag:** `src/lib/theme.ts` mit `MODAL_Z_INDEX`, `POPOVER_Z_INDEX`, `PILL_RADIUS`.
+
+**Warum nicht heute:** LOW-Severity, kein konkreter Bug damit verbunden, betrifft viele Files punktuell.
+
+---
+
+### G. wishlist/+page.svelte:38 — Profil-Guard mit individueller Message (LOW)
+**Was:** Eine 7. Stelle hat das Profil-Guard-Pattern, aber mit eigenem Text („um mitzuwünschen"). `requireProfile()` akzeptiert aktuell keine Custom-Message.
+
+**Empfehlung:** Entweder `requireProfile(message?)`-Variante einführen oder das Site so lassen — die Custom-Message ist dort wirklich Kontext-Information.
+
+---
+
+### H. RecipeEditor.svelte:54 + :83 — Bild-Upload/Delete mit inline `if (!res.ok)` (LOW)
+**Was:** Image-Upload und -Delete im Editor nutzen noch das Pattern, das `asyncFetch` ersetzen sollte. Der Aufwand wäre 5 Minuten, aber RecipeEditor steckt in den 10 svelte-check-WARNINGs (siehe Refactor B-Notiz) — beim nächsten Touch der Datei mitnehmen.
+
+---
+
+### I. Pre-Existing svelte-check Warnings (10 Stück)
+**Wo:** `RecipeEditor.svelte` (9× Zeilen 28, 97-102, 113, 121) + `recipes/[id]/+page.svelte` (1× Zeile 43).
+
+**Was:** Pattern `let foo = recipe.bar` im Top-Level-Script — Svelte 5 will `$derived(recipe.bar)`. Aktuell snapshot-only.
+
+**Risiko:** Bei In-Place-Mutation des Rezepts (z. B. nach PATCH) zeigt der Editor ggf. den alten Wert. **Tests fangen das nicht.**
+
+**Empfehlung:** Kleine Phase „RecipeEditor auf $derived umstellen" — passt gut zur RecipeEditor-Subkomponentenphase (B oben), oder vorab alleine.
+
+---
+
+## 📌 Neu entdeckt in der zweiten Runde — alle behoben
+
+| # | Fund | Severity | Status |
+|---|---|---|---|
+| 1 | `IMAGE_DIR` 6× dupliziert + `DATABASE_PATH` 2× | HIGH | ✅ `src/lib/server/paths.ts` |
+| 2 | `ARCHITECTURE.md:34` — „49 Flachwitze" | MEDIUM | ✅ → 150 |
+| 3 | `ARCHITECTURE.md:41` — `search/`-Route existiert nicht | LOW | ✅ entfernt |
+
+---
+
+## Empfohlene nächste Schritte
+
+1. **PR mergen** sobald lokal abgenickt — der Branch enthält 8 atomische Commits, jeder einzeln revert-bar.
+2. **Falls UAT erwünscht:** `npm run build && npm run preview`, dann manuell Profile-Switching, Rezept-Edit, Favoriten-Toggle, Wunschliste, Bild-Upload, Such-Pfade durchklicken. Erwartung: keine Verhaltensänderung gegenüber `main`.
+3. **Phase „RecipeEditor reactive cleanup"** für die 10 svelte-check-Warnings (klein) — schließt Item I.
+4. **Phase „Search-State-Store"** als nächste größere Phase — schließt Item A und drückt das größte Page-File spürbar runter.
+5. yauzl/Phase 5b (ZIP-Backup-Restore) bleibt als ungeplant bis explizit gebraucht.
+
+---
+
+## Code-Quality Snapshot
+
+| Metrik | Vorher | Nachher | Δ |
+|---|---|---|---|
+| Tests gesamt | 158 | 184 | +26 |
+| Tests Files | 23 | 24 | +1 (api-helpers) |
+| svelte-check Errors | 0 | 0 | — |
+| svelte-check Warnings | 10 | 10 | — (alle pre-existing) |
+| Build | ✓ | ✓ | — |
+| Größte Datei (recipes/[id]/+page.svelte) | 757 | 725 | -32 |
+| Größte Datei (+page.svelte) | 808 | 808 | — |
+| API +server.ts Boilerplate | ca. 11 Zeilen pro Handler | ca. 4 Zeilen pro Handler | -64% |
+| Duplizierte ENV-Defaults | 8 Sites | 1 Site | -7 |

docs/superpowers/review/REVIEW-2026-04-18.md

@@ -0,0 +1,140 @@
+# Deep Code Review — Kochwas
+
+**Datum:** 2026-04-18
+**Stand:** commit `5283ab9` auf `main`
+**Testsuite beim Start:** 158/158 grün
+**Scope:** `src/` (~97 Dateien), Migrations, Tests, Docker-Setup, alle Docs unter `docs/`
+
+---
+
+## TL;DR
+
+Der Code ist **gesund**. Keine toten Pfade, keine broken Features, keine strukturellen Fehlentscheidungen. Die vier auffälligsten Themen sind alle **Natural-Growth-Pressure** aus der v1.x-Phase, keine Fehler:
+
+1. **Ein echter Doku-Bug:** `docs/ARCHITECTURE.md:55` sagt `recipe_ingredient` + `recipe_step` — die Tabellen heißen in Wirklichkeit `ingredient` / `step` (siehe `001_init.sql`). 5-Minuten-Fix.
+2. **API-Handler duplizieren `parseId`** neunmal. Kandidat #1 für einen `src/lib/server/api-helpers.ts`.
+3. **Page-Komponenten sind groß** geworden (`+page.svelte` 808 Zeilen, `recipes/[id]/+page.svelte` 757 Zeilen). Solange du allein dran arbeitest: akzeptabel. Sobald jemand mitprogrammiert: refactor.
+4. **`yauzl` / `@types/yauzl` sind installiert, aber nicht importiert.** Reserviert für den noch fehlenden ZIP-Backup-Import. Entweder im Session-Handoff verankert lassen oder als Phase ziehen.
+
+Keine Sicherheits- oder Performance-Probleme im Code-Review aufgetaucht. Keine Reviewer-Korrekturen an der Architektur-Grundlinie (Server/Client-Trennung, Repository-Pattern, Runes-Stores).
+
+---
+
+## Quick-Wins (≤ 30 min pro Stück)
+
+| # | Titel | Aufwand | Wert |
+|---|---|---|---|
+| 1 | `ARCHITECTURE.md:55` auf `ingredient` + `step` korrigieren | 2 min | hoch (sonst debuggt jemand Geisterschema) |
+| 2 | `OPERATIONS.md:135` `IMAGES_PATH` → `IMAGE_DIR` | 2 min | niedrig, aber trivial |
+| 3 | `parseId` zentralisieren (`src/lib/server/api-helpers.ts`) | 20 min | hoch — 9 Call-Sites |
+| 4 | Unit-Test für `parseId`-Helper | 10 min | hoch — fängt zukünftige Regressionen |
+| 5 | `requireProfile()`-Helper in `recipes/[id]/+page.svelte` (Zeilen 124/143/166/188 räumen 4×7 Zeilen weg) | 15 min | mittel |
+| 6 | Timeout-Magic-Numbers nach `src/lib/constants.ts` (1500 ms, 30-min SW-Poll) | 10 min | mittel |
+| 7 | Deutsche Fehler-Texte in `api/recipes/[id]/image/+server.ts` englisch ziehen (Konsistenz) | 5 min | kosmetisch |
+| 8 | Im Session-Handoff `/api/recipes/[id]/image` (POST/DELETE) nachtragen | 5 min | niedrig |
+
+Summe: unter 90 Minuten — und du hast den Großteil der Haut-Irritationen unten.
+
+---
+
+## Größere Refactor-Kandidaten
+
+### A. API-Endpoints entkoppeln (HIGH, 1–2 Std)
+Extrahiere `src/lib/server/api-helpers.ts` mit:
+- `parsePositiveIntParam(raw: string, field: string): number` — wirft via SvelteKit `error(400, …)`
+- `validateBody<T>(body: unknown, schema: ZodSchema<T>): T` — ersetzt die `safeParse()`-Loops in 8+ Handlern
+- gemeinsame `ErrorResponse`-Shape (aktuell mal `{message}`, mal `{message, issues}`)
+
+Nach dem Helper-Refactor sollten die Handler nur noch echtes Business-Logik enthalten und je 30–50 Zeilen kürzer werden.
+
+### B. Search-State aus `+page.svelte` ziehen (HIGH, halber Tag)
+`+page.svelte` trägt 20+ `$state`-Variablen (`query`, `hits`, `webHits`, `searching`, `webError` …) und duplizierte Search-UI in `+layout.svelte`. Vorschlag: `src/lib/client/search.svelte.ts` mit `search()`, `loadMore()`, `clear()`. Danach ist das Page-File halbiert und der Layout-Nav-Search nutzt denselben Store.
+
+### C. `RecipeEditor` / `RecipeView` in Sub-Components zerlegen (MEDIUM, halber Tag)
+Kandidaten: `IngredientRow.svelte`, `StepList.svelte`, `TimeDisplay.svelte`, `ImageUploadBox.svelte`. Vorteile: isoliert testbar, wiederverwendbar in Preview-Seite. **Aber:** keine Eile, solange niemand sonst drin arbeitet.
+
+### D. Ingredient-Parser-Edge-Cases (HIGH, 2–3 Std)
+Der Parser (`src/lib/server/parsers/ingredient.ts`) und seine Tests decken ASCII-Ganzzahlen + Dezimal + Brüche ab. Fehlt:
+- Unicode-Brüche (½, ⅓, ¼)
+- führende Nullen, wissenschaftliche Notation
+- Locale-Kommadezimal (deutsche Rezepte!)
+- 0-Portionen, negative Mengen
+
+Parametrisierte Tests anlegen, dann Parser ggf. mit Zod-Refinement absichern.
+
+---
+
+## Einzelbefunde im Detail
+
+### Dead Code
+- Unused Deps: `yauzl`, `@types/yauzl` (absichtlich für Phase 5b; Entscheidung treffen: behalten oder entfernen bis Phase kommt).
+- `RequestShape` (`src/lib/sw/cache-strategy.ts:3`) und `ManifestDiff` (`src/lib/sw/diff-manifest.ts:4`) sind exportiert, aber nur intern benutzt — `export` weg oder im Test importieren.
+- Alle 97 Source-Files erreichbar, keine orphan-Assets, keine TODO/FIXME/HACK-Marker, keine großen auskommentierten Blöcke.
+
+### Redundanzen
+- `parseId`/`parsePositiveInt` — 9 Sites: `api/recipes/[id]/`, `…/favorite`, `…/rating`, `…/cooked`, `…/comments`, `…/image`, `api/profiles/[id]/`, `api/domains/[id]/`, `api/wishlist/[recipe_id]/`
+- Fetch-try/catch-alert-Pattern in 5 Svelte-Komponenten: `recipes/[id]/+page.svelte` (2×), `admin/domains/+page.svelte` (2×), `admin/profiles/+page.svelte`
+- Zod-`safeParse` + gleicher Error-Throw in 12+ Endpoints
+- `parseQty` + Zutat-Reassembly in `RecipeEditor` dupliziert Logik aus `parseIngredient` — könnte über `src/lib/shared/` geteilt werden
+- Profile-Guard (`if (!profile.active) alert(…)`) 4× identisch in `recipes/[id]/+page.svelte`
+
+### Struktur
+- Große Dateien: `+page.svelte` (808), `recipes/[id]/+page.svelte` (757), `+layout.svelte` (678), `RecipeEditor` (630), `recipes/+page.svelte` (539). Keine davon ist kaputt; alle sind Wachstum unter Last.
+- API-Error-Shape: mehrheitlich `{message}`, `profiles/+server.ts` gibt zusätzlich `{issues}` aus (Zod-Details). Festschreiben.
+- Store-Init-Races: `profile.svelte.ts` und `search-filter.svelte.ts` laden bei erstem Zugriff. Komponenten sehen ggf. Leer-State vor Fetch. Optional `loading`-Flag.
+- Konsolen-Logs: 6 Stück in Prod-Build (`service-worker.ts` 2×, `searxng.ts` 3×, `sw-register.ts` 1×). Vermutlich Absicht; als Dok-Kommentar festhalten oder in `if (DEV)`-Guards packen.
+- Svelte-5-Runes-Stores sind konsistent, keine God-Stores.
+- TypeScript: `strict` an, 0× `any`, 0× Server-Import-in-Client — bestätigt die CLAUDE.md-Regel.
+
+### Docs-vs-Code-Mismatches
+| Fundstelle | Fix |
+|---|---|
+| `ARCHITECTURE.md:55` — `recipe_ingredient` + `recipe_step` | `ingredient` + `step` |
+| `OPERATIONS.md:135` — `IMAGES_PATH` | `IMAGE_DIR` |
+| `session-handoff-2026-04-17.md:46` — fehlt `/api/recipes/[id]/image` (POST/DELETE) | ergänzen |
+| Alle Gotchas in `CLAUDE.md` | ✓ verifiziert, stimmen |
+| Alle Claims im offline-PWA-Spec | ✓ verifiziert, alle in Code vorhanden |
+
+---
+
+## Was bleibt wie es ist
+
+- **Migrationen:** 001–011 sind historisch sauber. 008 + 010 löschen beide den Thumbnail-Cache — Feature-Iteration, kein Bug. **Keine** bestehende Migration anfassen (das ist ohnehin die dokumentierte Regel).
+- **Service-Worker:** Zombie-Cleanup-Logik (`pwa.svelte.ts`) ist Kunst, aber funktioniert und ist kommentiert. Unit-Tests decken beide Zweige (Zombie vs alter SW) ab.
+- **Repository-Pattern:** Cleane Schichtung. Nicht refactoren.
+- **Test-Suite:** 23 Dateien, 158 Tests, volle Integration inkl. DB/HTTP/Import/SearXNG. Leichte Lücken bei Parser-Edge-Cases (siehe oben).
+
+---
+
+## Ampel
+
+| Dimension | Status |
+|---|---|
+| Architektur & Schichten | 🟢 gesund |
+| Dead Code | 🟢 minimal |
+| Redundanzen | 🟡 adressierbar, nicht dringend |
+| Datei-/Komponenten-Größen | 🟡 zwei Pages ≥ 750L |
+| Tests | 🟢 stark, Edge-Cases ausbaufähig |
+| Doku | 🟡 1 inhaltlicher Fehler + 1 ENV-Tippfehler, sonst stabil |
+| Sicherheit/Perf | 🟢 keine Funde im statischen Review |
+
+---
+
+## Vorgeschlagene Reihenfolge
+
+1. Heute (10 min): Quick-Wins 1 + 2 (ARCHITECTURE-Tabellen, OPERATIONS-ENV).
+2. Nächste Session (2 h): `api-helpers.ts` + `parseId`-Consolidation + Tests (Refactor A).
+3. Bei Zeit: Search-State-Store (Refactor B) — bringt beim nächsten Feature sofort Dividende.
+4. Phase-5b: `yauzl` einsetzen ODER Deps entfernen.
+
+---
+
+## Teilreports
+
+Die vollständigen Agent-Befunde liegen daneben:
+- `docs/superpowers/review/dead-code.md`
+- `docs/superpowers/review/redundancy.md`
+- `docs/superpowers/review/structure.md`
+- `docs/superpowers/review/docs-vs-code.md`
+
+Review-Metadaten: 4 parallele Explore-Agenten, jeweils read-only, Summen manuell gegen Code verifiziert (Line-Counts, Tabellen-Namen, ENV-Namen, `parseId`-Sites).

docs/superpowers/review/dead-code.md

@@ -0,0 +1,42 @@
+# Dead-Code Review
+
+## Summary
+Kochwas codebase is remarkably clean with minimal dead code. Primary finding: **yauzl dependency is unused** (reserved for future backup-restore feature). All exports are active, files are properly structured, and no unreachable code paths detected.
+
+## HIGH confidence findings
+
+### Unused Dependencies
+- **package.json: yauzl, @types/yauzl** — Declared in `dependencies` but never imported in source code. Added in commit for future backup ZIP import feature (currently only export via archiver is implemented). See `docs/superpowers/session-handoff-2026-04-17.md` which notes: "Import aus ZIP ist noch manueller DB-Copy. yauzl ist bereits als Dependency da, Phase 5b kann das in 10 Minuten nachziehen."
+
+### Exported Types Not Imported Elsewhere
+- **src/lib/sw/cache-strategy.ts:3** — `RequestShape` — Exported type only used within the same file as a function parameter. Not imported anywhere (type is passed inline at call site in service-worker.ts). Candidates for internal-only marking.
+- **src/lib/sw/diff-manifest.ts:4** — `ManifestDiff` — Exported type only used within same file as a return type of `diffManifest()`. Not imported by any other module.
+
+## MEDIUM confidence findings
+
+None identified. All functions, types, and stores are actively used. All 85 source files are reachable through proper route conventions (+page.svelte, +server.ts, +layout.svelte are auto-routed by SvelteKit).
+
+## LOW confidence / worth double-checking
+
+### Conditional Dead Code in Service Worker (Low risk)
+- **src/service-worker.ts:99-110** — The `GET_VERSION` message handler for zombie-SW cleanup is only triggered by `pwaStore` when specific conditions match (bit-identical versions detected after SKIP_WAITING). Works correctly but only fires on edge-case deployments (Chromium race condition). Verified it's needed—comments explain the scenario thoroughly.
+
+### Database Migrations
+- **src/lib/server/db/migrations/007-011** — Recent migrations (thumbnail_cache rerun, favicon resets) are cleanup/maintenance operations. Verified they're applied in sequence and read by code (e.g., searxng.ts queries thumbnail_cache). No orphaned migration tables.
+
+## Non-findings (places I checked and confirmed alive)
+
+- **All client stores** (confirm, install-prompt, network, profile, pwa, search-filter, sync-status, toast, wishlist) — Every export used in components
+- **All server repositories** (domains, profiles, recipes, wishlist) — All functions imported by API routes
+- **All parsers** (ingredient, iso8601-duration, json-ld-recipe) — Used by recipe importer and web search
+- **All API routes** — All 27 route handlers are reachable and handler import the functions they need
+- **All Svelte components** — No orphaned .svelte files; all imported by routes or other components
+- **Static assets** (/manifest.webmanifest, /icon.svg, /icon-192.png, /icon-512.png) — Referenced in app.html, cache-strategy.ts, and manifest
+- **Service worker** — All functions in service-worker.ts are called; no dead branches
+- **Commented code** — Only legitimate documentation comments (German docs explaining design decisions); no large disabled code blocks
+
+---
+
+**Review Scope:** src/ (~85 files), package.json dependencies, tests/
+**Tools used:** Grep (regex + pattern matching), Read (file inspection), Bash (git log)
+**Confidence Threshold:** HIGH = 100% sure, MEDIUM = 95%+, LOW = contextual

docs/superpowers/review/docs-vs-code.md

@@ -0,0 +1,130 @@
+# Docs vs Code Audit
+
+**Date:** 2026-04-18 | **Scope:** Full Documentation Review
+
+## Summary
+
+The documentation is **80% accurate and well-structured**, with most claims verifiable against the code. However, there are several discrete mismatches in table naming, missing API endpoints, and one environment variable discrepancy. Core concepts (architecture, deployment, gotchas) are reliable. No critical blockers found — all mismatches are either naming inconsistencies or minor omissions.
+
+---
+
+## CLAUDE.md Findings
+
+### ✅ All gotchas verified
+- **Healthcheck rule:** Confirmed in `Dockerfile` line 37: uses `http://127.0.0.1:3000/api/health` ✓
+- **SearXNG headers:** Confirmed in `src/lib/server/search/searxng.ts` — sets `X-Forwarded-For: 127.0.0.1` and `X-Real-IP: 127.0.0.1` ✓
+- **Icon rendering:** Confirmed — `scripts/render-icons.mjs` renders 192 + 512 PNG icons from `static/icon.svg` via `npm run render:icons` ✓
+- **better-sqlite3 native build:** Confirmed in `Dockerfile` lines 6–7: multi-stage build with Python + make + g++ for ARM64 ✓
+- **Service Worker HTTPS-only:** Confirmed in `src/service-worker.ts` and offline-pwa-design.md specs ✓
+- **Migration workflow:** Confirmed in `src/lib/server/db/migrations/` — 11 migrations exist, Vite glob bundled ✓
+
+### ⚠ Minor: Environment Variable Name
+- **Claim in doc:** OPERATIONS.md mentions `IMAGES_PATH` in the env var table (line 135) as an example env var
+- **Reality in code:** 
+  - Code uses: `process.env.IMAGE_DIR` (not `IMAGES_PATH`) — see `src/lib/server/db/index.ts`
+  - `.env.example` and `Dockerfile` both use `IMAGE_DIR`
+  - `.env.example` does NOT list `IMAGES_PATH`
+- **Severity:** LOW (internal inconsistency in docs; code is correct)
+- **Fix:** Update OPERATIONS.md line 135 to use `IMAGE_DIR` instead of `IMAGES_PATH`
+
+---
+
+## docs/ARCHITECTURE.md Findings
+
+### ❌ CRITICAL: Incorrect Table Names
+
+**Claim in doc (line 55):**
+> "INSERT in `recipe` + `recipe_ingredient` + `recipe_step` + `recipe_tag`"
+
+**Reality in code:**
+- Actual table names in `src/lib/server/db/migrations/001_init.sql`:
+  - Line 29: `CREATE TABLE IF NOT EXISTS ingredient` (NOT `recipe_ingredient`)
+  - Line 41: `CREATE TABLE IF NOT EXISTS step` (NOT `recipe_step`)
+  - Line 54: `CREATE TABLE IF NOT EXISTS recipe_tag` (this one is correct ✓)
+
+**Severity:** HIGH
+- **Impact:** Anyone reading docs will search for `recipe_ingredient` table and not find it; confuses debugging
+- **Fix:** Update ARCHITECTURE.md line 55 from `recipe_ingredient` + `recipe_step` to `ingredient` + `step`
+
+Also verify the same claim doesn't appear in design specs (section 8.8 of 2026-04-17-kochwas-design.md is correct — it already lists `ingredient` and `step` without the prefix).
+
+### ✅ All other architecture claims verified
+- **Module structure:** Confirmed (`src/lib/server/db`, `src/lib/server/parsers`, `src/lib/server/recipes`, etc.) ✓
+- **FTS5 virtual table:** Confirmed in `001_init.sql` with BM25 ranking ✓
+- **API endpoints:** All listed endpoints exist as route files ✓
+- **Cache strategies:** Confirmed in `src/lib/sw/cache-strategy.ts` ✓
+- **Service Worker behavior:** Confirmed in `src/service-worker.ts` ✓
+
+---
+
+## docs/OPERATIONS.md Findings
+
+### ⚠ MEDIUM: Environment Variable Discrepancy
+- **Same as CLAUDE.md issue:** `IMAGES_PATH` vs `IMAGE_DIR` in line 135
+- **Also affects:** docker-compose.prod.yml example in section "Umgebungsvariablen" — doc doesn't show it being set, but it's not needed (code defaults to `./data/images`)
+
+### ✅ All deployment claims verified
+- **Healthcheck interval/timeout:** Confirmed in Dockerfile ✓
+- **SearXNG configuration:** Confirmed `searxng/settings.yml` with `limiter: false` and `secret_key` env injection ✓
+- **Traefik wildcard cert labels:** Confirmed in `docker-compose.prod.yml` lines 26–27 ✓
+- **PWA offline behavior:** Confirmed in spec and code ✓
+- **Backup/restore UI:** Confirmed routes exist `/admin/backup` and `/api/admin/backup` ✓
+
+---
+
+## docs/superpowers/ Findings
+
+### ✅ Session Handoff (2026-04-17)
+
+**Routes listed (line 46):**
+- Session-handoff lists: `/images/[filename]` endpoint
+- **Actual code:** Route exists at `src/routes/images/[filename]/+server.ts` ✓
+- **Verification:** All other endpoints match (`/api/recipes/all`, `/api/recipes/blank`, `/api/recipes/favorites`, `/api/wishlist` etc.) ✓
+
+**Note:** Session-handoff does NOT mention `/api/recipes/[id]/image` (POST/DELETE for profile-specific image updates), which exists in code. This is not a *mismatch* but an **omission** (minor).
+
+### ✅ Design Spec (2026-04-17)
+
+**Section 8 (Datenmodell):**
+- Lists `ingredient` and `step` tables correctly (no prefix) ✓
+- This contradicts ARCHITECTURE.md (which says `recipe_ingredient` + `recipe_step`), but ARCHITECTURE.md is wrong
+- Design spec is the source of truth here ✓
+
+### ✅ Offline PWA Design (2026-04-18)
+
+**All claims verified:**
+- `src/service-worker.ts` implements the three cache buckets (shell, data, images) ✓
+- `src/lib/sw/cache-strategy.ts` implements the strategy dispatcher ✓
+- `src/lib/client/sync-status.svelte.ts` exists with message handler ✓
+- `src/lib/client/network.svelte.ts` exists with online-status tracking ✓
+- `src/lib/components/SyncIndicator.svelte` exists ✓
+- `src/lib/components/Toast.svelte` exists ✓
+- `/admin/app/+page.svelte` exists (confirmed in route listing) ✓
+- Icon rendering script confirmed ✓
+- PWA manifest with PNG icons confirmed ✓
+
+---
+
+## What the Docs Get Right
+
+1. **Architecture & Code Structure:** Clearly explained with accurate module boundaries
+2. **Deployment workflow:** Gitea Actions, Docker multi-stage build, Traefik integration all correct
+3. **Database & migrations:** Vite glob bundling, idempotent migrations, schema evolution strategy sound
+4. **PWA offline-first design:** Well thought out, faithfully implemented
+5. **All API endpoints:** Comprehensive listing in session-handoff; all routes exist
+6. **Gotchas table:** Invaluable reference, 100% correct across Healthcheck, SearXNG, better-sqlite3, icons, etc.
+7. **Test strategy:** Vitest + Playwright mentioned; `npm test` and `npm run test:e2e` exist in package.json
+8. **Icon rendering:** Accurately documented; `npm run render:icons` works as described
+
+---
+
+## Summary of Findings
+
+| Finding | Severity | File | Line | Action |
+|---------|----------|------|------|--------|
+| Table names: `recipe_ingredient` → should be `ingredient` | HIGH | ARCHITECTURE.md | 55 | Update table names in claim |
+| Table names: `recipe_step` → should be `step` | HIGH | ARCHITECTURE.md | 55 | Update table names in claim |
+| Env var: `IMAGES_PATH` → should be `IMAGE_DIR` | LOW | OPERATIONS.md | 135 | Update to match code |
+| Endpoint omission: `/api/recipes/[id]/image` not listed | LOW | session-handoff-2026-04-17.md | 46 | Add to routes list (optional) |
+
+**Total issues found:** 4 (1 HIGH, 2 MEDIUM, 1 LOW) | **Blocker for development:** None

docs/superpowers/review/redundancy.md

@@ -0,0 +1,61 @@
+# Redundancy Review
+
+## Summary
+Kochwas exhibits significant duplication in API endpoint handlers across 22 endpoints, with copy-pasted parameter parsing (parseId/parsePositiveInt) in 8+ files, repeated error-handling patterns in fetch wrappers across 5+ Svelte components, and schema validation blocks that could be consolidated.
+
+## HIGH severity
+
+### Duplicated parseId / parsePositiveInt helpers across API endpoints
+- **Sites**: /api/recipes/[id]/+server.ts:51-54, /api/recipes/[id]/favorite/+server.ts:9-13, /api/recipes/[id]/rating/+server.ts:14-18, /api/recipes/[id]/cooked/+server.ts:10-14, /api/recipes/[id]/comments/+server.ts:14-18, /api/profiles/[id]/+server.ts:9-13, /api/domains/[id]/+server.ts:19-23, /api/wishlist/[recipe_id]/+server.ts:9-13
+- **Pattern**: Eight API endpoints independently define nearly identical parameter-parsing functions that validate positive integers from route params.
+- **Suggestion**: Extract to src/lib/server/api-helpers.ts with parsePositiveIntParam(raw, field) returning the number or throwing via SvelteKit error().
+
+### Copy-pasted fetch error-handling + alert pattern in Svelte components
+- **Sites**: /recipes/[id]/+page.svelte:76-87, /recipes/[id]/+page.svelte:253-265, /admin/domains/+page.svelte:31-48, /admin/domains/+page.svelte:67-87, /admin/profiles/+page.svelte:30-44
+- **Pattern**: Five component functions repeat identical 6-line blocks: await fetch(); if not ok, parse JSON, show alert with body.message or HTTP status.
+- **Suggestion**: Create src/lib/client/api-fetch-wrapper.ts with asyncFetch(url, init, actionTitle) that wraps fetch, error handling, and alertAction.
+
+## MEDIUM severity
+
+### Repeated Zod schema validation + error pattern across API endpoints
+- **Sites**: /api/recipes/[id]/+server.ts, /api/recipes/[id]/favorite/+server.ts, /api/recipes/[id]/rating/+server.ts, /api/recipes/[id]/cooked/+server.ts, /api/recipes/[id]/comments/+server.ts, /api/profiles/+server.ts, /api/domains/[id]/+server.ts, /api/wishlist/+server.ts
+- **Pattern**: Every endpoint defines schemas locally with safeParse() followed by identical error handling: if not success, error 400 Invalid body. 12+ endpoints repeat this 3-4 line pattern.
+- **Suggestion**: Create src/lib/server/schemas.ts with common validators and validateBody<T>(body, schema) helper that centralizes the error throw.
+
+### Recipe scaling / ingredient manipulation scattered without consolidation
+- **Sites**: /lib/recipes/scaler.ts:10-16, /lib/server/parsers/ingredient.ts:42-68, /lib/components/RecipeEditor.svelte:144-149, /lib/components/RecipeEditor.svelte:156-175
+- **Pattern**: RecipeEditor re-implements parseQty and ingredient assembly (raw_text building) instead of importing parseIngredient from server parser. Logic is nearly identical in two places.
+- **Suggestion**: Expose parseIngredient as shared client code or create src/lib/shared/ingredient-utils.ts; import into component to avoid duplication.
+
+### Profile not-selected alert pattern duplicated 4x in same component
+- **Sites**: /recipes/[id]/+page.svelte:124-131, :143-150, :166-173, :188-195
+- **Pattern**: Four action functions (setRating, toggleFavorite, logCooked, addComment) all open with identical 7-line guard checking active profile and showing same alert message.
+- **Suggestion**: Extract requireProfile() helper in src/lib/client/profile.svelte that performs the alert and returns boolean; replace all four guard clauses.
+
+## LOW severity
+
+### WakeLock error handling try-catch pattern
+- **Sites**: /recipes/[id]/+page.svelte:318-327, :332-338
+- **Pattern**: Both functions independently have try-catch that silently swallows errors. Identical empty catch pattern duplicated.
+- **Suggestion**: Cosmetic - document once or combine into manageWakeLock(action) wrapper.
+
+### Migration cache-clearing pattern (historical only)
+- **Sites**: /db/migrations/008_thumbnail_cache_drop_unknown.sql, /db/migrations/010_thumbnail_cache_rerun_negatives.sql
+- **Pattern**: Two consecutive migrations both DELETE from thumbnail_cache due to feature iteration. Not a bug, just historical stacking.
+- **Note**: Safe to leave as-is.
+
+### Test fixture duplication: baseRecipe helper
+- **Sites**: /tests/integration/recipe-repository.test.ts:22-42
+- **Pattern**: baseRecipe factory defined locally; likely duplicated in other tests.
+- **Suggestion**: Move to tests/fixtures/recipe.ts and import everywhere.
+
+### API error message language inconsistency
+- **Sites**: /api/recipes/[id]/image/+server.ts (German), all others (English)
+- **Pattern**: Image endpoint uses German error messages; all other endpoints use English.
+- **Suggestion**: Standardize to German or English for consistent UX.
+
+---
+
+## Notes
+
+Strong separation of concerns observed in repositories and parsers. Type definitions well-centralized in src/lib/types.ts. No major SQL redundancy beyond historical migrations. Primary improvement opportunities are parameter validation, error handling, and component fetch logic consolidation.

docs/superpowers/review/structure.md

@@ -0,0 +1,146 @@
+# Structure / Design / Maintainability Review
+
+## Summary
+Kochwas has a healthy, maintainable codebase with strong architectural boundaries between server and client, comprehensive test coverage (integration + e2e), and disciplined use of TypeScript. The main pressure points are large page components (+700 lines) and some high-complexity features (search orchestration, image import pipeline) that could benefit from further decomposition.
+
+## Big-picture observations
+
+### Strengths
+1. **Clean architectural layers**: No server code bleeding into client. Strict separation of $lib/server/*, $lib/client/*.svelte.ts, and components.
+2. **Comprehensive testing**: 17+ integration tests, 4+ unit tests, 2 e2e suites covering recipes, images, parsers, search.
+3. **Type-safe API**: Domain types in src/lib/types.ts are exhaustive; Zod schemas match; no shadow types.
+4. **Consistent error handling**: Custom ImporterError with codes, mapped through mapImporterError().
+5. **Smart runes stores**: Separate concerns (profile, network, pwa, sync-status, toast, wishlist, search-filter). No god-stores.
+6. **Well-documented gotchas**: CLAUDE.md clearly marks traps (SW HTTPS-only, healthcheck IPv4, native module arm64).
+
+### Concerns
+1. **Large page components**: +page.svelte (808L), recipes/[id]/+page.svelte (757L), +layout.svelte (678L).
+2. **Dense components**: RecipeEditor (630L), RecipeView (398L), SearchFilter (360L) hard to unit-test.
+3. **Complex parsers**: json-ld-recipe.ts (402L) and searxng.ts (389L) lack edge-case validation.
+4. **State synchronization**: 20+ local state variables in search page; duplication in +layout.svelte.
+5. **Magic numbers**: Timeout constants (1500ms, 30min) and z-index values are inline.
+
+## HIGH severity findings
+
+### Large page components
+- **Where**: src/routes/+page.svelte (808L), src/routes/recipes/[id]/+page.svelte (757L), src/routes/+layout.svelte (678L)
+- **What**: Pages bundle view + component orchestration + state management (20+ $state vars) + fetch logic. Hard to test individual behaviors without mounting entire page.
+- **Suggestion**: Extract orchestration into composables/stores (e.g., usePageSearch()). Break out visual widgets as sub-components. Move fetch logic to +page.server.ts.
+
+### State density: 20+ variables in search page
+- **Where**: src/routes/+page.svelte lines 17-48
+- **What**: Local state controls search (query, hits, webHits, searching, webError, etc.). Duplication in +layout.svelte nav search. Risk of stale state.
+- **Suggestion**: Create useSearchState() rune or dedicated store with methods: .search(q), .loadMore(), .clear().
+
+### JSON-LD parser edge cases
+- **Where**: src/lib/server/parsers/json-ld-recipe.ts (402L)
+- **What**: Parser assumes well-formed JSON-LD. Tests only cover ASCII digits; no coverage for non-ASCII numerals, fraction chars, or 0 servings.
+- **Suggestion**: Add Zod refinement for quantity validation. Test against real recipes from different locales. Document assumptions.
+
+### Ingredient parsing gaps
+- **Where**: tests/unit/ingredient.test.ts
+- **What**: Tests cover integers/decimals/fractions but not: leading zeros, scientific notation, Unicode fractions, unusual separators, null ingredients.
+- **Suggestion**: Parametrized tests for edge cases. Clamp quantity range (0-1000) at parser level.
+
+### Unnamed timeout constants
+- **Where**: src/routes/+page.svelte, src/lib/client/pwa.svelte.ts
+- **What**: 1500ms (PWA version query), 30*60_000ms (SW update poll), implicit debounce. Hard to find all call sites.
+- **Suggestion**: Export to src/lib/constants.ts: SW_VERSION_QUERY_TIMEOUT_MS, SW_UPDATE_POLL_INTERVAL_MS.
+
+## MEDIUM severity findings
+
+### RecipeEditor/RecipeView component size
+- **Where**: src/lib/components/RecipeEditor.svelte (630L), src/lib/components/RecipeView.svelte (398L)
+- **What**: Feature-complete but dense; hard to test rendering in isolation (e.g., ingredient scaling).
+- **Suggestion**: Extract sub-components: IngredientRow.svelte, StepList.svelte, TimeDisplay.svelte, ImageUploadBox.svelte.
+
+### API error shape inconsistency
+- **Where**: src/routes/api/**/*.ts
+- **What**: Most return {message}. But profiles/+server.ts POST returns {message, issues} (Zod details). Implicit schema.
+- **Suggestion**: Standardize or define shared ErrorResponse type in src/lib/types.ts. Document in docs/API.md.
+
+### Service Worker zombie cleanup untested
+- **Where**: src/lib/client/pwa.svelte.ts (lines 1-72)
+- **What**: Clever but untested heuristic. 1500ms timeout may cause false positives on slow networks.
+- **Suggestion**: Unit test timeout scenario. Document 1500ms rationale in comments.
+
+### Searxng rate-limit recovery
+- **Where**: src/lib/server/search/searxng.ts (389L)
+- **What**: Caches per-query. On 429/403, logs but doesn't backoff. Second search returns stale cache with no signal.
+- **Suggestion**: Add isStale flag. Show "results may be outdated" banner or implement exponential backoff.
+
+### Store initialization races
+- **Where**: src/lib/client/profile.svelte.ts, src/lib/client/search-filter.svelte.ts
+- **What**: Load data on first access. If component mounts before fetch completes, shows stale state. No loading signal.
+- **Suggestion**: Add loading property. Load in +page.server.ts instead or await store.init() in onMount().
+
+## LOW severity findings
+
+### Missing named constants
+- **Where**: ConfirmDialog.svelte, ProfileSwitcher.svelte (z-index, border-radius, timeouts inline)
+- **What**: Z-index (100, 200), border-radius (999px), timeouts (1500ms) hardcoded.
+- **Suggestion**: Create src/lib/theme.ts: MODAL_Z_INDEX, POPOVER_Z_INDEX, etc.
+
+### console logging in production
+- **Where**: src/service-worker.ts (2), src/lib/server/search/searxng.ts (3), src/lib/client/sw-register.ts (1)
+- **What**: Likely intentional (production diagnostics) but unfiltered by log level.
+- **Suggestion**: Document intent. If not intentional, wrap in if (DEV) guards.
+
+### Unhandled DB errors
+- **Where**: src/routes/api/recipes/all/+server.ts
+- **What**: If DB query fails, error propagates as 500.
+- **Suggestion**: Wrap in try-catch for consistency (unlikely with local SQLite).
+
+### Migration ordering
+- **Where**: Tests don't verify migration sequence
+- **What**: Migrations autodiscovered via glob; out-of-order filenames won't cause build error.
+- **Suggestion**: CI check verifying 00X_* sequence.
+
+### Incomplete image downloader errors
+- **Where**: src/lib/server/images/image-downloader.ts
+- **What**: Generic error message; can't distinguish "URL wrong" from "network down."
+- **Suggestion**: Add error codes (NOT_FOUND, TIMEOUT, NETWORK).
+
+## Metrics
+
+### Lines per file (top 15)
+```
+  808  src/routes/+page.svelte
+  757  src/routes/recipes/[id]/+page.svelte
+  678  src/routes/+layout.svelte
+  630  src/lib/components/RecipeEditor.svelte
+  539  src/routes/recipes/+page.svelte
+  402  src/lib/server/parsers/json-ld-recipe.ts
+  398  src/lib/components/RecipeView.svelte
+  389  src/lib/server/search/searxng.ts
+  360  src/lib/components/SearchFilter.svelte
+  321  src/routes/wishlist/+page.svelte
+  318  src/routes/admin/domains/+page.svelte
+  259  src/service-worker.ts
+  244  src/lib/server/recipes/repository.ts
+  218  src/lib/components/ProfileSwitcher.svelte
+  216  src/routes/preview/+page.svelte
+```
+
+### Quality metrics
+| Metric | Value | Status |
+|--------|-------|--------|
+| Test suites (integration) | 17 | Good |
+| Test suites (unit) | 5+ | Adequate |
+| Zod validation endpoints | 11 | Excellent |
+| TypeScript strict | Yes | Excellent |
+| Any types found | 0 | Excellent |
+| Server code in client | 0 | Excellent |
+| Console logging | 6 instances | Minor |
+
+## Recommendations (priority)
+
+1. **Extract page state to stores** (HIGH, medium effort): Reduce +page.svelte by ~200L; enable isolated testing.
+2. **Split large components** (HIGH, medium effort): RecipeEditor/RecipeView sub-components.
+3. **Add ingredient validation** (HIGH, low effort): Zod refinement + edge-case tests.
+4. **Define named constants** (MEDIUM, low effort): src/lib/constants.ts for timeouts/z-index.
+5. **Standardize API errors** (MEDIUM, low effort): docs/API.md + shared ErrorResponse type.
+6. **Test SW zombie cleanup** (MEDIUM, medium effort): Unit tests + comments.
+
+## Conclusion
+Healthy, maintainable codebase. Main pressure: large page/component sizes (natural scaling). With recommendations above, ready for continued development and easy to onboard new developers.

docs/superpowers/session-handoff-2026-04-17.md

@@ -43,7 +43,7 @@ docker compose -f docker-compose.prod.yml up -d
 ### Server-Seite
 - **DB:** SQLite mit FTS5, Migrationen (`./migrations/*.sql`) werden von Vite gebündelt und beim ersten DB-Zugriff angewendet. Auto-mkdir für `data/` und `data/images/`.
 - **Module:** `parsers/` (iso8601, ingredient, json-ld-recipe), `recipes/` (scaler + repository + actions + importer + search-local), `domains/` (repository + whitelist), `profiles/`, `images/image-downloader`, `search/searxng`, `backup/export`, `http`.
-- **Routes:** `/api/health`, `/api/profiles`, `/api/profiles/[id]`, `/api/domains`, `/api/domains/[id]`, `/api/recipes/search`, `/api/recipes/search/web`, `/api/recipes/preview`, `/api/recipes/import`, `/api/recipes/[id]`, `/api/recipes/[id]/rating`, `/api/recipes/[id]/favorite`, `/api/recipes/[id]/cooked`, `/api/recipes/[id]/comments`, `/api/admin/backup`, `/images/[filename]`.
+- **Routes:** `/api/health`, `/api/profiles`, `/api/profiles/[id]`, `/api/domains`, `/api/domains/[id]`, `/api/recipes/search`, `/api/recipes/search/web`, `/api/recipes/preview`, `/api/recipes/import`, `/api/recipes/[id]`, `/api/recipes/[id]/rating`, `/api/recipes/[id]/favorite`, `/api/recipes/[id]/cooked`, `/api/recipes/[id]/comments`, `/api/recipes/[id]/image` (POST/DELETE), `/api/admin/backup`, `/images/[filename]`.
 
 ### Client-Seite (Svelte 5 Runes)
 - **Layout** mit Profil-Chip und Zahnrad zu Admin.

package.json

@@ -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",

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'
+  }
+});

searxng/settings.yml

@@ -1,4 +1,13 @@
-use_default_settings: true
+# Defaults laden, aber Engine-Liste rigoros auf brave eindampfen.
+# keep_only ist robuster als einzelne `disabled: true`-Overrides: SearXNGs
+# Merge-Semantik für partial overrides (nur name + disabled ohne engine:)
+# greift nicht zuverlässig — DDG & Co. wurden trotzdem abgefragt. keep_only
+# wirft alles andere vor dem Laden raus, kein Captcha-/403-Log-Lärm mehr.
+# Mojeek blockt die Pi-IP mit 403 und ist deshalb draußen.
+use_default_settings:
+  engines:
+    keep_only:
+      - brave
 
 server:
   # Platzhalter wird beim Container-Start per os.path.expandvars aus der
@@ -31,71 +40,21 @@ outgoing:
 ui:
   default_locale: de
 
-# Quieten engines that fail on cold start and aren't useful here
 enabled_plugins:
   - 'Hash plugin'
   - 'Tracker URL remover'
   - 'Open Access DOI rewrite'
 
 engines:
-  # Brave mit API-Key: stabiler als der HTML-Scraper, kein Rate-Limit-Spam
-  # mehr. Key kommt aus dem BRAVE_API_KEY-Env (.env auf dem Pi, nicht im Repo).
-  # Fehlt der Key oder ist er leer, fällt Brave bei der ersten Anfrage zurück
-  # auf einen 401 — andere Engines laufen normal weiter.
+  # Brave Search API (engine: braveapi). Die Engine "brave" ist der
+  # HTML-Scraper von search.brave.com und ignoriert api_key — deshalb
+  # hier explizit braveapi, sonst landen wir in Brave-Rate-Limits.
+  # Key kommt aus dem BRAVE_API_KEY-Env (.env auf dem Pi, nicht im Repo),
+  # expandiert via Python os.path.expandvars im searxng-init-Container.
   - name: brave
-    engine: brave
+    engine: braveapi
     shortcut: br
     categories: [general, web]
     timeout: 6.0
-    # Wert wird beim Container-Start durch Python-os.path.expandvars aus der
-    # BRAVE_API_KEY-Env-Variable eingesetzt (siehe docker-compose.prod.yml
-    # entrypoint-Override). SearXNG selbst hat kein !env-Tag.
     api_key: "${BRAVE_API_KEY}"
     disabled: false
-
-  # DuckDuckGo: deaktiviert, weil DDG die Pi-IP als Bot erkannt hat und
-  # bei jeder Anfrage mit CAPTCHA antwortet. Brave (API) + Mojeek decken
-  # die Websuche zuverlässig ab — DDG-Scraping wäre nur zusätzlicher Lärm.
-  - name: duckduckgo
-    disabled: true
-
-  # Mojeek: eigener Index, seltener Rate-Limits, ergänzt Brave.
-  - name: mojeek
-    engine: mojeek
-    shortcut: mjk
-    timeout: 6.0
-    disabled: false
-
-  # Video-/News-Engines abdrehen — wir wollen nur Text-Treffer für Rezeptseiten.
-  - name: google videos
-    disabled: true
-  - name: google news
-    disabled: true
-  - name: google images
-    disabled: true
-  - name: bing videos
-    disabled: true
-  - name: bing news
-    disabled: true
-  - name: bing images
-    disabled: true
-  - name: karmasearch videos
-    disabled: true
-
-  # Startpage: hat unsere Pi-IP als Bot erkannt und blockt mit Captcha
-  # (1h suspended_time pro Fehler). Bringt für Rezeptsuche nichts, was
-  # nicht schon Brave/DDG liefern.
-  - name: startpage
-    disabled: true
-
-  # Tor-basierte Engines brauchen einen Tor-Proxy im Container — haben
-  # wir nicht, also harmlos deaktivieren, um Init-Fehler loszuwerden.
-  - name: ahmia
-    disabled: true
-  - name: torch
-    disabled: true
-
-  # Wikidata produziert beim Cold-Start einen KeyError (Init-Bug in der
-  # aktuellen SearXNG-Version 2026.4). Für Rezeptsuche ohne Mehrwert.
-  - name: wikidata
-    disabled: true

src/lib/client/api-fetch-wrapper.ts

@@ -0,0 +1,25 @@
+import { alertAction } from '$lib/client/confirm.svelte';
+
+/**
+ * Fetch wrapper for actions where a non-OK response should pop a modal
+ * via alertAction(). Returns the Response on 2xx, or null after showing
+ * the alert. Caller should `if (!res) return;` after the call.
+ *
+ * Use this for *interactive* actions (rename, delete, save). For form
+ * submissions where the error should appear inline next to the field
+ * (e.g. admin/domains add()), keep manual handling.
+ */
+export async function asyncFetch(
+  url: string,
+  init: RequestInit | undefined,
+  errorTitle: string
+): Promise<Response | null> {
+  const res = await fetch(url, init);
+  if (res.ok) return res;
+  const body = (await res.json().catch(() => null)) as { message?: string } | null;
+  await alertAction({
+    title: errorTitle,
+    message: body?.message ?? `HTTP ${res.status}`
+  });
+  return null;
+}

src/lib/client/profile.svelte.ts

@@ -1,4 +1,5 @@
 import type { Profile } from '$lib/types';
+import { alertAction } from '$lib/client/confirm.svelte';
 
 const STORAGE_KEY = 'kochwas.activeProfileId';
 
@@ -60,3 +61,19 @@ class ProfileStore {
 }
 
 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(
+  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 });
+  return null;
+}

src/lib/client/pwa.svelte.ts

@@ -1,3 +1,5 @@
+import { SW_UPDATE_POLL_INTERVAL_MS, SW_VERSION_QUERY_TIMEOUT_MS } from '$lib/constants';
+
 // Service-Worker-Update-Pattern: Workbox-Style Handshake (kein
 // skipWaiting im install-Handler, User bestätigt via Toast) mit
 // zusätzlichem Zombie-Schutz.
@@ -39,7 +41,7 @@ class PwaStore {
     // mitbekommt, wenn er die Seite lange offen lässt ohne zu navigieren.
     this.pollTimer = setInterval(() => {
       void this.registration?.update().catch(() => {});
-    }, 30 * 60_000);
+    }, SW_UPDATE_POLL_INTERVAL_MS);
   }
 
   private onUpdateFound(): void {
@@ -97,7 +99,7 @@ class PwaStore {
 function queryVersion(sw: ServiceWorker): Promise<string | null> {
   return new Promise((resolve) => {
     const channel = new MessageChannel();
-    const timer = setTimeout(() => resolve(null), 1500);
+    const timer = setTimeout(() => resolve(null), SW_VERSION_QUERY_TIMEOUT_MS);
     channel.port1.onmessage = (e) => {
       clearTimeout(timer);
       const v = (e.data as { version?: unknown } | null)?.version;

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;
+  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));
+  }
+
+  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}${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;
+    }
+  }
+
+  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;
+    }
+  }
+
+  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/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, 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>
+
+{#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">
+    <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,6 +1,11 @@
 <script lang="ts">
-  import { Plus, Trash2, GripVertical } from 'lucide-svelte';
+  import { untrack } from 'svelte';
+  import { Plus } from 'lucide-svelte';
   import type { Recipe, Ingredient, Step } from '$lib/types';
+  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;
@@ -16,43 +21,60 @@
       steps: Step[];
     }) => void | Promise<void>;
     oncancel: () => void;
+    /** Fires whenever the image was uploaded or removed — separate from save,
+     *  because the image is its own endpoint and persists immediately. */
+    onimagechange?: (image_path: string | null) => void;
   };
 
-  let { recipe, saving = false, onsave, oncancel }: Props = $props();
+  let { recipe, saving = false, onsave, oncancel, onimagechange }: Props = $props();
 
-  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[]>(
+    untrack(() =>
       recipe.ingredients.map((i) => ({
         qty: i.quantity !== null ? String(i.quantity).replace('.', ',') : '',
         unit: i.unit ?? '',
         name: i.name,
-      note: i.note ?? ''
+        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);
   }
+  function moveIngredient(idx: number, dir: -1 | 1) {
+    const target = idx + dir;
+    if (target < 0 || target >= ingredients.length) return;
+    const next = [...ingredients];
+    [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: '' }];
   }
@@ -83,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
@@ -110,6 +134,15 @@
 </script>
 
 <div class="editor">
+  <section class="block">
+    <h2>Bild</h2>
+    <ImageUploadBox
+      recipeId={recipe.id!}
+      imagePath={recipe.image_path}
+      onchange={(p) => onimagechange?.(p)}
+    />
+  </section>
+
   <div class="meta">
     <label class="field">
       <span class="lbl">Titel</span>
@@ -148,16 +181,15 @@
     <h2>Zutaten</h2>
     <ul class="ing-list">
       {#each ingredients as ing, idx (idx)}
-        <li class="ing-row">
-          <span class="grip" aria-hidden="true"><GripVertical size={16} /></span>
-          <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}>
@@ -168,25 +200,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">
@@ -257,8 +271,7 @@
     margin: 0 0 0.75rem;
     color: #2b6a3d;
   }
-  .ing-list,
-  .step-list {
+  .ing-list {
     list-style: none;
     padding: 0;
     margin: 0 0 0.6rem;
@@ -266,68 +279,6 @@
     flex-direction: column;
     gap: 0.4rem;
   }
-  .ing-row {
-    display: grid;
-    grid-template-columns: 16px 70px 70px 1fr 90px 40px;
-    gap: 0.35rem;
-    align-items: center;
-  }
-  .grip {
-    color: #bbb;
-    display: inline-flex;
-    justify-content: center;
-  }
-  .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;
@@ -373,31 +324,4 @@
     opacity: 0.6;
     cursor: progress;
   }
-  @media (max-width: 560px) {
-    .ing-row {
-      grid-template-columns: 70px 1fr 40px;
-      grid-template-areas:
-        'qty name del'
-        'unit unit del'
-        'note note note';
-    }
-    .grip {
-      display: none;
-    }
-    .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: 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;
+  }
   .ing-list li {
     display: flex;
     gap: 0.75rem;
@@ -347,7 +352,9 @@
 
   /* Querformat-Tablets und Desktop: Zutaten + Zubereitung nebeneinander,
      Tabs ausgeblendet. Zutaten sticky, damit sie beim Scrollen der
-     Zubereitung oben bleiben. */
+     Zubereitung oben bleiben.
+     Schriftgrößen hier bewusst größer — das Rezept wird auf einem 10"-
+     Tablet beim Kochen aus ~50 cm Abstand gelesen. */
   @media (min-width: 820px) {
     .tabs {
       display: none;
@@ -367,5 +374,30 @@
       max-height: calc(100vh - 2rem);
       overflow-y: auto;
     }
+    .ing-list li {
+      font-size: 1.2rem;
+      line-height: 1.5;
+      padding: 0.85rem 0.25rem;
+    }
+    .qty {
+      min-width: 6rem;
+    }
+    .srv-value strong {
+      font-size: 1.5rem;
+    }
+    .srv-value span {
+      font-size: 1rem;
+    }
+    .steps li {
+      font-size: 1.2rem;
+      line-height: 1.55;
+      padding: 1rem 0 1rem 3.4rem;
+    }
+    .steps li::before {
+      width: 2.4rem;
+      height: 2.4rem;
+      font-size: 1.1rem;
+      top: 1rem;
+    }
   }
 </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/constants.ts

@@ -0,0 +1,11 @@
+// Shared timing constants. Keep magic numbers here so callers stay readable
+// and the rationale lives next to the value.
+
+// How long to wait for a Service Worker to answer GET_VERSION before
+// treating the response as missing. Short on purpose — SWs that take this
+// long are likely the Chromium zombie case (see pwa.svelte.ts).
+export const SW_VERSION_QUERY_TIMEOUT_MS = 1500;
+
+// Active update check while the page sits open in a tab. 30 minutes is a
+// trade-off between being timely and not hammering the server.
+export const SW_UPDATE_POLL_INTERVAL_MS = 30 * 60_000;

src/lib/server/api-helpers.ts

@@ -0,0 +1,39 @@
+import { error } from '@sveltejs/kit';
+import type { ZodSchema } from 'zod';
+
+// Shared error body shape for SvelteKit `error()` calls. `issues` is set
+// when validateBody fails so the client can show a precise validation
+// hint; everywhere else only `message` is used.
+export type ErrorResponse = {
+  message: string;
+  issues?: unknown;
+};
+
+/**
+ * Parse a route param (or query param) as a positive integer (>=1).
+ * Throws SvelteKit `error(400)` with `Missing <field>` when null/undefined,
+ * or `Invalid <field>` when the value is not an integer >= 1.
+ */
+export function parsePositiveIntParam(
+  raw: string | undefined | null,
+  field: string
+): number {
+  if (raw == null) error(400, { message: `Missing ${field}` });
+  const n = Number(raw);
+  if (!Number.isInteger(n) || n <= 0) error(400, { message: `Invalid ${field}` });
+  return n;
+}
+
+/**
+ * Validate an unknown body against a Zod schema. Throws SvelteKit
+ * `error(400, { message: 'Invalid body', issues })` on mismatch and returns
+ * the typed parse result on success. Accepts `null` (the typical result of
+ * `await request.json().catch(() => null)`).
+ */
+export function validateBody<T>(body: unknown, schema: ZodSchema<T>): T {
+  const parsed = schema.safeParse(body);
+  if (!parsed.success) {
+    error(400, { message: 'Invalid body', issues: parsed.error.issues });
+  }
+  return parsed.data;
+}

src/lib/server/db/index.ts

@@ -1,15 +1,15 @@
 import Database from 'better-sqlite3';
 import { mkdirSync } from 'node:fs';
 import { dirname } from 'node:path';
+import { DATABASE_PATH, IMAGE_DIR } from '$lib/server/paths';
 import { runMigrations } from './migrate';
 
 let instance: Database.Database | null = null;
 
-export function getDb(path = process.env.DATABASE_PATH ?? './data/kochwas.db'): Database.Database {
+export function getDb(path = DATABASE_PATH): Database.Database {
   if (instance) return instance;
   mkdirSync(dirname(path), { recursive: true });
-  const imageDir = process.env.IMAGE_DIR ?? './data/images';
-  mkdirSync(imageDir, { recursive: true });
+  mkdirSync(IMAGE_DIR, { recursive: true });
   instance = new Database(path);
   instance.pragma('journal_mode = WAL');
   instance.pragma('foreign_keys = ON');

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/parsers/ingredient.ts

@@ -28,6 +28,42 @@ const FRACTION_MAP: Record<string, number> = {
   '3/4': 0.75
 };
 
+// Vulgar-Fraction-Codepoints — kommen in deutschsprachigen Rezept-Quellen
+// regelmäßig vor (Chefkoch et al. liefern sie vereinzelt, mehr aber bei
+// Apple's Food App, Fork etc.).
+const UNICODE_FRACTION_MAP: Record<string, number> = {
+  '\u00BD': 0.5, // ½
+  '\u00BC': 0.25, // ¼
+  '\u00BE': 0.75, // ¾
+  '\u2150': 1 / 7,
+  '\u2151': 1 / 9,
+  '\u2152': 1 / 10,
+  '\u2153': 1 / 3, // ⅓
+  '\u2154': 2 / 3, // ⅔
+  '\u2155': 0.2, // ⅕
+  '\u2156': 0.4, // ⅖
+  '\u2157': 0.6, // ⅗
+  '\u2158': 0.8, // ⅘
+  '\u2159': 1 / 6, // ⅙
+  '\u215A': 5 / 6, // ⅚
+  '\u215B': 0.125, // ⅛
+  '\u215C': 0.375, // ⅜
+  '\u215D': 0.625, // ⅝
+  '\u215E': 0.875 // ⅞
+};
+
+// Mengen außerhalb dieses Bereichs sind fast sicher ein Parse-Müll
+// (z. B. Microformat-Date oder Telefon-Nummer in einem JSON-LD-Quantity-
+// Feld). Wir geben null zurück, raw_text bleibt für die UI erhalten.
+const MAX_REASONABLE_QTY = 10000;
+
+function clampQuantity(n: number | null): number | null {
+  if (n === null || !Number.isFinite(n)) return null;
+  if (n <= 0) return null;
+  if (n > MAX_REASONABLE_QTY) return null;
+  return n;
+}
+
 function parseQuantity(raw: string): number | null {
   const trimmed = raw.trim();
   if (FRACTION_MAP[trimmed] !== undefined) return FRACTION_MAP[trimmed];
@@ -39,6 +75,16 @@ function parseQuantity(raw: string): number | null {
   return Number.isFinite(num) ? num : null;
 }
 
+// Splits "TL Salz" → unit "TL", name "Salz"; "Zitrone" → unit null, name "Zitrone".
+function splitUnitAndName(rest: string): { unit: string | null; name: string } {
+  const trimmed = rest.trim();
+  const firstTokenMatch = /^(\S+)\s+(.+)$/.exec(trimmed);
+  if (firstTokenMatch && UNITS.has(firstTokenMatch[1])) {
+    return { unit: firstTokenMatch[1], name: firstTokenMatch[2].trim() };
+  }
+  return { unit: null, name: trimmed };
+}
+
 export function parseIngredient(raw: string, position = 0): Ingredient {
   const rawText = raw.trim();
   let working = rawText;
@@ -51,18 +97,24 @@ export function parseIngredient(raw: string, position = 0): Ingredient {
     ).trim();
   }
 
+  // Unicode-Bruch am Anfang? Dann das eine Zeichen als Menge nehmen
+  // und den Rest wie üblich in Unit + Name aufteilen.
+  const firstChar = working.charAt(0);
+  if (UNICODE_FRACTION_MAP[firstChar] !== undefined) {
+    const tail = working.slice(1).trimStart();
+    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, 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 = parseQuantity(qtyMatch[1]);
-  let rest = qtyMatch[2].trim();
-  let unit: string | null = null;
-  const firstTokenMatch = /^(\S+)\s+(.+)$/.exec(rest);
-  if (firstTokenMatch && UNITS.has(firstTokenMatch[1])) {
-    unit = firstTokenMatch[1];
-    rest = firstTokenMatch[2].trim();
-  }
-  return { position, quantity, unit, name: rest, note, raw_text: rawText };
+  const quantity = clampQuantity(parseQuantity(qtyMatch[1]));
+  const { unit, name } = splitUnitAndName(qtyMatch[2]);
+  return { position, quantity, unit, name, note, raw_text: rawText, section_heading: null };
 }

src/lib/server/paths.ts

@@ -0,0 +1,6 @@
+// Filesystem paths read from env at module load. Centralized so a misset
+// env var only causes one place to be wrong, not six. Both defaults match
+// the docker-compose volume mounts under `/app/data`.
+
+export const DATABASE_PATH = process.env.DATABASE_PATH ?? './data/kochwas.db';
+export const IMAGE_DIR = process.env.IMAGE_DIR ?? './data/images';

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[];
@@ -196,6 +196,17 @@ export function updateRecipeMeta(
   db.prepare(`UPDATE recipe SET ${fields.join(', ')} WHERE id = ?`).run(...values, id);
 }
 
+export function updateImagePath(
+  db: Database.Database,
+  id: number,
+  filename: string | null
+): void {
+  db.prepare('UPDATE recipe SET image_path = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?').run(
+    filename,
+    id
+  );
+}
+
 export function replaceIngredients(
   db: Database.Database,
   recipeId: number,
@@ -204,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/search/searxng.ts

@@ -312,6 +312,10 @@ export async function searchWeb(
   // Nur Text-Engines abfragen — SearXNG-Video/Image-Engines (karmasearch etc.)
   // bringen uns für Rezeptseiten nichts und produzieren nur 403-Log-Noise.
   endpoint.searchParams.set('categories', 'general');
+  // Nur Brave (via API) — Mojeek blockt die Pi-IP mit 403, andere Engines
+  // sind von SearXNG-Seite durch keep_only ohnehin ausgeknipst. So bleibt
+  // das Log sauber und kochwas ist unabhängig von der globalen Engine-Liste.
+  endpoint.searchParams.set('engines', 'brave');
   if (pageno > 1) endpoint.searchParams.set('pageno', String(pageno));
 
   const body = await fetchText(endpoint.toString(), {
@@ -361,6 +365,9 @@ export async function searchWeb(
     });
     if (hits.length >= limit) break;
   }
+  // Absichtliches Prod-Logging: diese drei [searxng]-Zeilen erlauben "warum
+  // wurde Domain X gefiltert?" ohne Code-Änderung. Strukturiert genug für
+  // grep/awk, klein genug für jeden Log-Sammler.
   console.log(
     `[searxng] q=${JSON.stringify(trimmed)} pageno=${pageno} domains=${domains.length} raw=${results.length} non_whitelist=${dropNonWhitelist} non_recipe_url=${dropNonRecipeUrl} dup=${dropDup} kept_pre_enrich=${hits.length}`
   );

src/lib/sw/cache-strategy.ts

@@ -1,6 +1,6 @@
 export type CacheStrategy = 'shell' | 'swr' | 'images' | 'network-only';
 
-export type RequestShape = { url: string; method: string };
+type RequestShape = { url: string; method: string };
 
 // Pure function — sole decision-maker for "which strategy for this request?".
 // Called by the service worker for every fetch event.

src/lib/sw/diff-manifest.ts

@@ -1,7 +1,7 @@
 // Vergleicht die aktuelle Rezept-ID-Liste (vom Server) mit dem, was
 // der Cache schon hat. Der SW nutzt das Delta, um nur Neue zu laden
 // und Gelöschte abzuräumen.
-export type ManifestDiff = { toAdd: number[]; toRemove: number[] };
+type ManifestDiff = { toAdd: number[]; toRemove: number[] };
 
 export function diffManifest(currentIds: number[], cachedIds: number[]): ManifestDiff {
   const current = new Set(currentIds);

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.svelte

@@ -17,26 +17,20 @@
   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';
 
   let { children } = $props();
 
-  const NAV_PAGE_SIZE = 30;
+  const navStore = new SearchStore({
+    pageSize: 30,
+    filterParam: () => {
+      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 +38,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 +76,11 @@
 
   function pickHit() {
     navOpen = false;
-    navQuery = '';
-    navHits = [];
-    navWebHits = [];
+    navStore.reset();
   }
 
   afterNavigate(() => {
-    navQuery = '';
-    navHits = [];
-    navWebHits = [];
+    navStore.reset();
     navOpen = false;
     menuOpen = false;
     // Badge nach jeder Client-Navigation frisch halten — sonst kann er
@@ -239,9 +127,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 +139,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 +170,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 +201,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
                   >
@@ -386,6 +274,9 @@
 </main>
 
 <style>
+  :global(:root) {
+    --pill-radius: 999px;
+  }
   :global(html, body) {
     margin: 0;
     padding: 0;
@@ -429,7 +320,7 @@
     justify-content: center;
     width: 40px;
     height: 40px;
-    border-radius: 999px;
+    border-radius: var(--pill-radius);
     color: #2b6a3d;
     text-decoration: none;
     flex-shrink: 0;
@@ -621,7 +512,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;
@@ -636,7 +527,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;

src/routes/+page.svelte

@@ -4,32 +4,27 @@
   import { CookingPot, X } from 'lucide-svelte';
   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,
+    filterParam: () => {
+      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';
@@ -47,39 +42,9 @@
   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;
-  };
-
   export const snapshot: Snapshot<SearchSnapshot> = {
-    capture: () => ({
-      query,
-      hits,
-      webHits,
-      searchedFor,
-      webError,
-      localExhausted,
-      webPageno,
-      webExhausted
-    }),
-    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;
-    }
+    capture: () => store.captureSnapshot(),
+    restore: (s) => store.restoreSnapshot(s)
   };
 
   async function loadRecent() {
@@ -152,7 +117,7 @@
     // 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');
@@ -188,14 +153,7 @@
   $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();
   });
 
   // Sync current query back into the URL as ?q=... via replaceState,
@@ -203,7 +161,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 +179,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 +204,7 @@
     });
   }
 
-  const activeSearch = $derived(query.trim().length > 3);
+  const activeSearch = $derived(store.query.trim().length > 3);
 </script>
 
 <section class="hero">
@@ -378,7 +215,7 @@
       <SearchFilter inline />
       <input
         type="search"
-        bind:value={query}
+        bind:value={store.query}
         placeholder="Rezept suchen…"
         autocomplete="off"
         inputmode="search"
@@ -390,12 +227,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 +250,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 +281,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}
@@ -653,7 +490,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 +597,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/domains/+page.svelte

@@ -2,7 +2,8 @@
   import { onMount } from 'svelte';
   import { Pencil, Check, X, Globe } from 'lucide-svelte';
   import type { AllowedDomain } from '$lib/types';
-  import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
   import { requireOnline } from '$lib/client/require-online';
 
   let domains = $state<AllowedDomain[]>([]);
@@ -64,22 +65,19 @@
     if (!requireOnline('Das Speichern')) return;
     saving = true;
     try {
-      const res = await fetch(`/api/domains/${d.id}`, {
+      const res = await asyncFetch(
+        `/api/domains/${d.id}`,
+        {
           method: 'PATCH',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify({
             domain: editDomain.trim(),
             display_name: editLabel.trim() || null
           })
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        await alertAction({
-          title: 'Speichern fehlgeschlagen',
-          message: body.message ?? `HTTP ${res.status}`
-        });
-        return;
-      }
+        },
+        'Speichern fehlgeschlagen'
+      );
+      if (!res) return;
       cancelEdit();
       await load();
     } finally {

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { profileStore } from '$lib/client/profile.svelte';
-  import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
   import { requireOnline } from '$lib/client/require-online';
 
   let newName = $state('');
@@ -27,19 +28,16 @@
     const next = prompt('Neuer Name:', currentName);
     if (!next || next === currentName) return;
     if (!requireOnline('Das Umbenennen')) return;
-    const res = await fetch(`/api/profiles/${id}`, {
+    const res = await asyncFetch(
+      `/api/profiles/${id}`,
+      {
         method: 'PATCH',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify({ name: next.trim() })
-    });
-    if (!res.ok) {
-      const body = await res.json().catch(() => ({}));
-      await alertAction({
-        title: 'Umbenennen fehlgeschlagen',
-        message: body.message ?? `HTTP ${res.status}`
-      });
-      return;
-    }
+      },
+      'Umbenennen fehlgeschlagen'
+    );
+    if (!res) return;
     await profileStore.load();
   }
 
@@ -187,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/admin/backup/+server.ts

@@ -1,12 +1,10 @@
 import type { RequestHandler } from './$types';
 import { createBackupStream, backupFilename } from '$lib/server/backup/export';
+import { DATABASE_PATH, IMAGE_DIR } from '$lib/server/paths';
 import { Readable } from 'node:stream';
 
-const DB_PATH = process.env.DATABASE_PATH ?? './data/kochwas.db';
-const IMAGE_DIR = process.env.IMAGE_DIR ?? './data/images';
-
 export const GET: RequestHandler = async () => {
-  const archive = createBackupStream({ dbPath: DB_PATH, imagesDir: IMAGE_DIR });
+  const archive = createBackupStream({ dbPath: DATABASE_PATH, imagesDir: IMAGE_DIR });
   const filename = backupFilename();
   return new Response(Readable.toWeb(archive) as ReadableStream, {
     status: 200,

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

@@ -1,9 +1,11 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json, error, isHttpError } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { validateBody } from '$lib/server/api-helpers';
 import { addDomain, listDomains, setDomainFavicon } from '$lib/server/domains/repository';
 import { ensureFavicons, fetchAndStoreFavicon } from '$lib/server/domains/favicons';
+import { IMAGE_DIR } from '$lib/server/paths';
 
 const CreateSchema = z.object({
   domain: z.string().min(3).max(253),
@@ -11,8 +13,6 @@ const CreateSchema = z.object({
   added_by_profile_id: z.number().int().positive().nullable().optional()
 });
 
-const IMAGE_DIR = process.env.IMAGE_DIR ?? './data/images';
-
 export const GET: RequestHandler = async () => {
   const db = getDb();
   // Favicons lazy nachziehen — beim zweiten Aufruf gibt es nichts mehr zu tun.
@@ -21,16 +21,14 @@ export const GET: RequestHandler = async () => {
 };
 
 export const POST: RequestHandler = async ({ request }) => {
-  const body = await request.json().catch(() => null);
-  const parsed = CreateSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
+  const data = validateBody(await request.json().catch(() => null), CreateSchema);
   try {
     const db = getDb();
     const d = addDomain(
       db,
-      parsed.data.domain,
-      parsed.data.display_name ?? null,
-      parsed.data.added_by_profile_id ?? null
+      data.domain,
+      data.display_name ?? null,
+      data.added_by_profile_id ?? null
     );
     // Favicon direkt nach dem Insert mitziehen, damit die Antwort schon das
     // Icon enthält — der POST ist eh ein interaktiver Admin-Vorgang.
@@ -41,6 +39,7 @@ export const POST: RequestHandler = async ({ request }) => {
     }
     return json(d, { status: 201 });
   } catch (e) {
+    if (isHttpError(e)) throw e;
     error(409, { message: (e as Error).message });
   }
 };

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

@@ -1,35 +1,27 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json, error, isHttpError } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam, validateBody } from '$lib/server/api-helpers';
 import {
   removeDomain,
   updateDomain,
   setDomainFavicon
 } from '$lib/server/domains/repository';
 import { fetchAndStoreFavicon } from '$lib/server/domains/favicons';
-
-const IMAGE_DIR = process.env.IMAGE_DIR ?? './data/images';
+import { IMAGE_DIR } from '$lib/server/paths';
 
 const UpdateSchema = z.object({
   domain: z.string().min(3).max(253).optional(),
   display_name: z.string().max(100).nullable().optional()
 });
 
-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid id' });
-  return id;
-}
-
 export const PATCH: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
-  const body = await request.json().catch(() => null);
-  const parsed = UpdateSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
+  const id = parsePositiveIntParam(params.id, 'id');
+  const data = validateBody(await request.json().catch(() => null), UpdateSchema);
   try {
     const db = getDb();
-    const updated = updateDomain(db, id, parsed.data);
+    const updated = updateDomain(db, id, data);
     if (!updated) error(404, { message: 'Not found' });
     // Wenn updateDomain favicon_path genullt hat (Domain geändert), frisch laden.
     if (updated.favicon_path === null) {
@@ -41,12 +33,14 @@ export const PATCH: RequestHandler = async ({ params, request }) => {
     }
     return json(updated);
   } catch (e) {
+    // HTTP-Errors aus error() durchreichen, sonst landet ein 404 als 409.
+    if (isHttpError(e)) throw e;
     error(409, { message: (e as Error).message });
   }
 };
 
 export const DELETE: RequestHandler = async ({ params }) => {
-  const id = parseId(params.id!);
+  const id = parsePositiveIntParam(params.id, 'id');
   removeDomain(getDb(), id);
   return json({ ok: true });
 };

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

@@ -1,7 +1,8 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json, error, isHttpError } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { validateBody } from '$lib/server/api-helpers';
 import { createProfile, listProfiles } from '$lib/server/profiles/repository';
 
 const CreateSchema = z.object({
@@ -14,15 +15,12 @@ export const GET: RequestHandler = async () => {
 };
 
 export const POST: RequestHandler = async ({ request }) => {
-  const body = await request.json().catch(() => null);
-  const parsed = CreateSchema.safeParse(body);
-  if (!parsed.success) {
-    error(400, { message: 'Invalid body', issues: parsed.error.issues });
-  }
+  const data = validateBody(await request.json().catch(() => null), CreateSchema);
   try {
-    const p = createProfile(getDb(), parsed.data.name, parsed.data.avatar_emoji ?? null);
+    const p = createProfile(getDb(), data.name, data.avatar_emoji ?? null);
     return json(p, { status: 201 });
   } catch (e) {
+    if (isHttpError(e)) throw e;
     error(409, { message: (e as Error).message });
   }
 };

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

@@ -1,28 +1,21 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam, validateBody } from '$lib/server/api-helpers';
 import { deleteProfile, renameProfile } from '$lib/server/profiles/repository';
 
 const RenameSchema = z.object({ name: z.string().min(1).max(50) });
 
-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid id' });
-  return id;
-}
-
 export const PATCH: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
-  const body = await request.json().catch(() => null);
-  const parsed = RenameSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  renameProfile(getDb(), id, parsed.data.name);
+  const id = parsePositiveIntParam(params.id, 'id');
+  const data = validateBody(await request.json().catch(() => null), RenameSchema);
+  renameProfile(getDb(), id, data.name);
   return json({ ok: true });
 };
 
 export const DELETE: RequestHandler = async ({ params }) => {
-  const id = parseId(params.id!);
+  const id = parsePositiveIntParam(params.id, 'id');
   deleteProfile(getDb(), id);
   return json({ ok: true });
 };

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

@@ -2,6 +2,7 @@ import type { RequestHandler } from './$types';
 import { json, error } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam, validateBody } from '$lib/server/api-helpers';
 import {
   deleteRecipe,
   getRecipeById,
@@ -23,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({
@@ -48,14 +50,8 @@ const PatchSchema = z
   })
   .refine((v) => Object.keys(v).length > 0, { message: 'Empty patch' });
 
-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid id' });
-  return id;
-}
-
 export const GET: RequestHandler = async ({ params }) => {
-  const id = parseId(params.id!);
+  const id = parsePositiveIntParam(params.id, 'id');
   const db = getDb();
   const recipe = getRecipeById(db, id);
   if (!recipe) error(404, { message: 'Recipe not found' });
@@ -68,12 +64,10 @@ export const GET: RequestHandler = async ({ params }) => {
 };
 
 export const PATCH: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
+  const id = parsePositiveIntParam(params.id, 'id');
   const body = await request.json().catch(() => null);
-  const parsed = PatchSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
+  const p = validateBody(body, PatchSchema);
   const db = getDb();
-  const p = parsed.data;
   // Spezielle Kurz-Updates (bleiben als Sonderfall, weil sie FTS triggern
   // bzw. andere Tabellen mitpflegen).
   if (p.title !== undefined && Object.keys(p).length === 1) {
@@ -121,7 +115,7 @@ export const PATCH: RequestHandler = async ({ params, request }) => {
 };
 
 export const DELETE: RequestHandler = async ({ params }) => {
-  const id = parseId(params.id!);
+  const id = parsePositiveIntParam(params.id, 'id');
   deleteRecipe(getDb(), id);
   return json({ ok: true });
 };

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

@@ -1,7 +1,8 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam, validateBody } from '$lib/server/api-helpers';
 import { addComment, deleteComment, listComments } from '$lib/server/recipes/actions';
 
 const Schema = z.object({
@@ -11,30 +12,20 @@ const Schema = z.object({
 
 const DeleteSchema = z.object({ comment_id: z.number().int().positive() });
 
-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid id' });
-  return id;
-}
-
 export const GET: RequestHandler = async ({ params }) => {
-  const id = parseId(params.id!);
+  const id = parsePositiveIntParam(params.id, 'id');
   return json(listComments(getDb(), id));
 };
 
 export const POST: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
-  const body = await request.json().catch(() => null);
-  const parsed = Schema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  const cid = addComment(getDb(), id, parsed.data.profile_id, parsed.data.text);
+  const id = parsePositiveIntParam(params.id, 'id');
+  const data = validateBody(await request.json().catch(() => null), Schema);
+  const cid = addComment(getDb(), id, data.profile_id, data.text);
   return json({ id: cid }, { status: 201 });
 };
 
 export const DELETE: RequestHandler = async ({ request }) => {
-  const body = await request.json().catch(() => null);
-  const parsed = DeleteSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  deleteComment(getDb(), parsed.data.comment_id);
+  const data = validateBody(await request.json().catch(() => null), DeleteSchema);
+  deleteComment(getDb(), data.comment_id);
   return json({ ok: true });
 };

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

@@ -1,25 +1,18 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam, validateBody } from '$lib/server/api-helpers';
 import { logCooked } from '$lib/server/recipes/actions';
 import { removeFromWishlistForAll } from '$lib/server/wishlist/repository';
 
 const Schema = z.object({ profile_id: z.number().int().positive() });
 
-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid id' });
-  return id;
-}
-
 export const POST: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
-  const body = await request.json().catch(() => null);
-  const parsed = Schema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
+  const id = parsePositiveIntParam(params.id, 'id');
+  const data = validateBody(await request.json().catch(() => null), Schema);
   const db = getDb();
-  const entry = logCooked(db, id, parsed.data.profile_id);
+  const entry = logCooked(db, id, data.profile_id);
   // Wenn das Rezept heute gekocht wurde, ist der Wunsch erfüllt — für alle
   // Profile raus aus der Wunschliste. Client nutzt den removed_from_wishlist-
   // Flag, um den lokalen State (Badge, Button) ohne Reload zu aktualisieren.

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

@@ -1,31 +1,22 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam, validateBody } from '$lib/server/api-helpers';
 import { addFavorite, removeFavorite } from '$lib/server/recipes/actions';
 
 const Schema = z.object({ profile_id: z.number().int().positive() });
 
-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid id' });
-  return id;
-}
-
 export const PUT: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
-  const body = await request.json().catch(() => null);
-  const parsed = Schema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  addFavorite(getDb(), id, parsed.data.profile_id);
+  const id = parsePositiveIntParam(params.id, 'id');
+  const data = validateBody(await request.json().catch(() => null), Schema);
+  addFavorite(getDb(), id, data.profile_id);
   return json({ ok: true });
 };
 
 export const DELETE: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
-  const body = await request.json().catch(() => null);
-  const parsed = Schema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  removeFavorite(getDb(), id, parsed.data.profile_id);
+  const id = parsePositiveIntParam(params.id, 'id');
+  const data = validateBody(await request.json().catch(() => null), Schema);
+  removeFavorite(getDb(), id, data.profile_id);
   return json({ ok: true });
 };

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

@@ -0,0 +1,56 @@
+import type { RequestHandler } from './$types';
+import { json, error } from '@sveltejs/kit';
+import { createHash } from 'node:crypto';
+import { existsSync } from 'node:fs';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam } from '$lib/server/api-helpers';
+import { getRecipeById, updateImagePath } from '$lib/server/recipes/repository';
+import { IMAGE_DIR } from '$lib/server/paths';
+
+const MAX_BYTES = 10 * 1024 * 1024;
+
+const EXT_BY_MIME: Record<string, string> = {
+  'image/jpeg': '.jpg',
+  'image/jpg': '.jpg',
+  'image/png': '.png',
+  'image/webp': '.webp',
+  'image/gif': '.gif',
+  'image/avif': '.avif'
+};
+
+export const POST: RequestHandler = async ({ params, request }) => {
+  const id = parsePositiveIntParam(params.id, 'id');
+  const db = getDb();
+  if (!getRecipeById(db, id)) error(404, { message: 'Recipe not found' });
+
+  const form = await request.formData().catch(() => null);
+  const file = form?.get('file');
+  if (!(file instanceof File)) error(400, { message: 'Field "file" missing' });
+  if (file.size === 0) error(400, { message: 'Empty file' });
+  if (file.size > MAX_BYTES) error(413, { message: 'Image too large (max 10 MB)' });
+
+  const mime = file.type.toLowerCase();
+  const ext = EXT_BY_MIME[mime];
+  if (!ext) error(415, { message: `Image format ${file.type || 'unknown'} not supported` });
+
+  const buf = Buffer.from(await file.arrayBuffer());
+  const hash = createHash('sha256').update(buf).digest('hex');
+  const filename = `${hash}${ext}`;
+  const target = join(IMAGE_DIR, filename);
+  if (!existsSync(target)) {
+    await mkdir(IMAGE_DIR, { recursive: true });
+    await writeFile(target, buf);
+  }
+  updateImagePath(db, id, filename);
+  return json({ ok: true, image_path: filename });
+};
+
+export const DELETE: RequestHandler = ({ params }) => {
+  const id = parsePositiveIntParam(params.id, 'id');
+  const db = getDb();
+  if (!getRecipeById(db, id)) error(404, { message: 'Recipe not found' });
+  updateImagePath(db, id, null);
+  return json({ ok: true });
+};

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

@@ -1,7 +1,8 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam, validateBody } from '$lib/server/api-helpers';
 import { clearRating, setRating } from '$lib/server/recipes/actions';
 
 const Schema = z.object({
@@ -11,26 +12,16 @@ const Schema = z.object({
 
 const DeleteSchema = z.object({ profile_id: z.number().int().positive() });
 
-function parseId(raw: string): number {
-  const id = Number(raw);
-  if (!Number.isInteger(id) || id <= 0) error(400, { message: 'Invalid id' });
-  return id;
-}
-
 export const PUT: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
-  const body = await request.json().catch(() => null);
-  const parsed = Schema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  setRating(getDb(), id, parsed.data.profile_id, parsed.data.stars);
+  const id = parsePositiveIntParam(params.id, 'id');
+  const data = validateBody(await request.json().catch(() => null), Schema);
+  setRating(getDb(), id, data.profile_id, data.stars);
   return json({ ok: true });
 };
 
 export const DELETE: RequestHandler = async ({ params, request }) => {
-  const id = parseId(params.id!);
-  const body = await request.json().catch(() => null);
-  const parsed = DeleteSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
-  clearRating(getDb(), id, parsed.data.profile_id);
+  const id = parsePositiveIntParam(params.id, 'id');
+  const data = validateBody(await request.json().catch(() => null), DeleteSchema);
+  clearRating(getDb(), id, data.profile_id);
   return json({ ok: true });
 };

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

@@ -1,20 +1,18 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { validateBody } from '$lib/server/api-helpers';
 import { importRecipe } from '$lib/server/recipes/importer';
 import { mapImporterError } from '$lib/server/errors';
+import { IMAGE_DIR } from '$lib/server/paths';
 
 const ImportSchema = z.object({ url: z.string().url() });
 
-const IMAGE_DIR = process.env.IMAGE_DIR ?? './data/images';
-
 export const POST: RequestHandler = async ({ request }) => {
-  const body = await request.json().catch(() => null);
-  const parsed = ImportSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'Invalid body' });
+  const data = validateBody(await request.json().catch(() => null), ImportSchema);
   try {
-    const result = await importRecipe(getDb(), IMAGE_DIR, parsed.data.url);
+    const result = await importRecipe(getDb(), IMAGE_DIR, data.url);
     return json({ id: result.id, duplicate: result.duplicate });
   } catch (e) {
     mapImporterError(e);

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

@@ -1,7 +1,8 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { z } from 'zod';
 import { getDb } from '$lib/server/db';
+import { validateBody } from '$lib/server/api-helpers';
 import {
   addToWishlist,
   listWishlist,
@@ -32,9 +33,7 @@ export const GET: RequestHandler = async ({ url }) => {
 };
 
 export const POST: RequestHandler = async ({ request }) => {
-  const body = await request.json().catch(() => null);
-  const parsed = AddSchema.safeParse(body);
-  if (!parsed.success) error(400, { message: 'recipe_id and profile_id required' });
-  addToWishlist(getDb(), parsed.data.recipe_id, parsed.data.profile_id);
+  const data = validateBody(await request.json().catch(() => null), AddSchema);
+  addToWishlist(getDb(), data.recipe_id, data.profile_id);
   return json({ ok: true }, { status: 201 });
 };

src/routes/api/wishlist/[recipe_id]/+server.ts

@@ -1,26 +1,21 @@
 import type { RequestHandler } from './$types';
-import { json, error } from '@sveltejs/kit';
+import { json } from '@sveltejs/kit';
 import { getDb } from '$lib/server/db';
+import { parsePositiveIntParam } from '$lib/server/api-helpers';
 import {
   removeFromWishlist,
   removeFromWishlistForAll
 } from '$lib/server/wishlist/repository';
 
-function parsePositiveInt(raw: string | null, field: string): number {
-  const n = raw === null ? NaN : Number(raw);
-  if (!Number.isInteger(n) || n <= 0) error(400, { message: `Invalid ${field}` });
-  return n;
-}
-
 // DELETE /api/wishlist/:id?profile_id=X   → entfernt nur den eigenen Wunsch
 // DELETE /api/wishlist/:id?all=true       → entfernt für ALLE Profile
 export const DELETE: RequestHandler = async ({ params, url }) => {
-  const id = parsePositiveInt(params.recipe_id!, 'recipe_id');
+  const id = parsePositiveIntParam(params.recipe_id, 'recipe_id');
   const db = getDb();
   if (url.searchParams.get('all') === 'true') {
     removeFromWishlistForAll(db, id);
   } else {
-    const profileId = parsePositiveInt(url.searchParams.get('profile_id'), 'profile_id');
+    const profileId = parsePositiveIntParam(url.searchParams.get('profile_id'), 'profile_id');
     removeFromWishlist(db, id, profileId);
   }
   return json({ ok: true });

src/routes/images/[filename]/+server.ts

@@ -2,8 +2,7 @@ import type { RequestHandler } from './$types';
 import { error } from '@sveltejs/kit';
 import { createReadStream, existsSync, statSync } from 'node:fs';
 import { join, basename, extname } from 'node:path';
-
-const IMAGE_DIR = process.env.IMAGE_DIR ?? './data/images';
+import { IMAGE_DIR } from '$lib/server/paths';
 
 const MIME: Record<string, string> = {
   '.jpg': 'image/jpeg',

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 {
@@ -17,9 +17,10 @@
   import RecipeView from '$lib/components/RecipeView.svelte';
   import RecipeEditor from '$lib/components/RecipeEditor.svelte';
   import StarRating from '$lib/components/StarRating.svelte';
-  import { profileStore } from '$lib/client/profile.svelte';
+  import { profileStore, requireProfile } from '$lib/client/profile.svelte';
   import { wishlistStore } from '$lib/client/wishlist.svelte';
-  import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { asyncFetch } from '$lib/client/api-fetch-wrapper';
   import { requireOnline } from '$lib/client/require-online';
   import type { CommentRow } from '$lib/server/recipes/actions';
 
@@ -40,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
@@ -73,19 +74,16 @@
     if (!requireOnline('Das Speichern')) return;
     saving = true;
     try {
-      const res = await fetch(`/api/recipes/${data.recipe.id}`, {
+      const res = await asyncFetch(
+        `/api/recipes/${data.recipe.id}`,
+        {
           method: 'PATCH',
           headers: { 'content-type': 'application/json' },
           body: JSON.stringify(patch)
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        await alertAction({
-          title: 'Speichern fehlgeschlagen',
-          message: body.message ?? `HTTP ${res.status}`
-        });
-        return;
-      }
+        },
+        'Speichern fehlgeschlagen'
+      );
+      if (!res) return;
       const body = await res.json();
       if (body.recipe) {
         recipeState = body.recipe;
@@ -122,60 +120,44 @@
   );
 
   async function setRating(stars: number) {
-    if (!profileStore.active) {
-      await alertAction({
-        title: 'Kein Profil gewählt',
-        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
-      });
-      return;
-    }
+    const profile = await requireProfile();
+    if (!profile) return;
     if (!requireOnline('Das Rating')) return;
     await fetch(`/api/recipes/${data.recipe.id}/rating`, {
       method: 'PUT',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ profile_id: profileStore.active.id, stars })
+      body: JSON.stringify({ profile_id: profile.id, stars })
     });
-    const existing = ratings.find((r) => r.profile_id === profileStore.active!.id);
+    const existing = ratings.find((r) => r.profile_id === profile.id);
     if (existing) existing.stars = stars;
-    else ratings = [...ratings, { profile_id: profileStore.active.id, stars }];
+    else ratings = [...ratings, { profile_id: profile.id, stars }];
   }
 
   async function toggleFavorite() {
-    if (!profileStore.active) {
-      await alertAction({
-        title: 'Kein Profil gewählt',
-        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
-      });
-      return;
-    }
+    const profile = await requireProfile();
+    if (!profile) return;
     if (!requireOnline('Das Favorit-Setzen')) return;
-    const profileId = profileStore.active.id;
     const wasFav = isFav;
     const method = wasFav ? 'DELETE' : 'PUT';
     await fetch(`/api/recipes/${data.recipe.id}/favorite`, {
       method,
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ profile_id: profileId })
+      body: JSON.stringify({ profile_id: profile.id })
     });
     favoriteProfileIds = wasFav
-      ? favoriteProfileIds.filter((id) => id !== profileId)
-      : [...favoriteProfileIds, profileId];
+      ? favoriteProfileIds.filter((id) => id !== profile.id)
+      : [...favoriteProfileIds, profile.id];
     if (!wasFav) void firePulse('fav');
   }
 
   async function logCooked() {
-    if (!profileStore.active) {
-      await alertAction({
-        title: 'Kein Profil gewählt',
-        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
-      });
-      return;
-    }
+    const profile = await requireProfile();
+    if (!profile) return;
     if (!requireOnline('Der Kochjournal-Eintrag')) return;
     const res = await fetch(`/api/recipes/${data.recipe.id}/cooked`, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ profile_id: profileStore.active.id })
+      body: JSON.stringify({ profile_id: profile.id })
     });
     const entry = await res.json();
     cookingLog = [entry, ...cookingLog];
@@ -186,20 +168,15 @@
   }
 
   async function addComment() {
-    if (!profileStore.active) {
-      await alertAction({
-        title: 'Kein Profil gewählt',
-        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
-      });
-      return;
-    }
+    const profile = await requireProfile();
+    if (!profile) return;
     if (!requireOnline('Das Speichern des Kommentars')) return;
     const text = newComment.trim();
     if (!text) return;
     const res = await fetch(`/api/recipes/${data.recipe.id}/comments`, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ profile_id: profileStore.active.id, text })
+      body: JSON.stringify({ profile_id: profile.id, text })
     });
     if (res.ok) {
       const body = await res.json();
@@ -207,16 +184,38 @@
         ...comments,
         {
           id: body.id,
-          profile_id: profileStore.active.id,
+          profile_id: profile.id,
           text,
           created_at: new Date().toISOString(),
-          author: profileStore.active.name
+          author: profile.name
         }
       ];
       newComment = '';
     }
   }
 
+  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?',
@@ -250,19 +249,16 @@
       return;
     }
     if (!requireOnline('Das Umbenennen')) return;
-    const res = await fetch(`/api/recipes/${data.recipe.id}`, {
+    const res = await asyncFetch(
+      `/api/recipes/${data.recipe.id}`,
+      {
         method: 'PATCH',
         headers: { 'content-type': 'application/json' },
         body: JSON.stringify({ title: next })
-    });
-    if (!res.ok) {
-      const body = await res.json().catch(() => ({}));
-      await alertAction({
-        title: 'Umbenennen fehlgeschlagen',
-        message: body.message ?? `HTTP ${res.status}`
-      });
-      return;
-    }
+      },
+      'Umbenennen fehlgeschlagen'
+    );
+    if (!res) return;
     title = next;
     editingTitle = false;
   }
@@ -278,28 +274,22 @@
   }
 
   async function toggleWishlist() {
-    if (!profileStore.active) {
-      await alertAction({
-        title: 'Kein Profil gewählt',
-        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
-      });
-      return;
-    }
+    const profile = await requireProfile();
+    if (!profile) return;
     if (!requireOnline('Das Wunschlisten-Setzen')) return;
-    const profileId = profileStore.active.id;
     const wasOn = onMyWishlist;
     if (wasOn) {
-      await fetch(`/api/wishlist/${data.recipe.id}?profile_id=${profileId}`, {
+      await fetch(`/api/wishlist/${data.recipe.id}?profile_id=${profile.id}`, {
         method: 'DELETE'
       });
-      wishlistProfileIds = wishlistProfileIds.filter((id) => id !== profileId);
+      wishlistProfileIds = wishlistProfileIds.filter((id) => id !== profile.id);
     } else {
       await fetch('/api/wishlist', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ recipe_id: data.recipe.id, profile_id: profileId })
+        body: JSON.stringify({ recipe_id: data.recipe.id, profile_id: profile.id })
       });
-      wishlistProfileIds = [...wishlistProfileIds, profileId];
+      wishlistProfileIds = [...wishlistProfileIds, profile.id];
     }
     void wishlistStore.refresh();
     if (!wasOn) void firePulse('wish');
@@ -379,6 +369,7 @@
     {saving}
     onsave={saveRecipe}
     oncancel={() => (editMode = false)}
+    onimagechange={(path) => (recipeState = { ...recipeState, image_path: path })}
   />
 {:else}
 <RecipeView recipe={recipeState}>
@@ -497,6 +488,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>
@@ -704,6 +705,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/wishlist/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { Utensils, Trash2, CookingPot } from 'lucide-svelte';
-  import { profileStore } from '$lib/client/profile.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 { confirmAction } from '$lib/client/confirm.svelte';
   import { requireOnline } from '$lib/client/require-online';
   import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
 
@@ -35,15 +35,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'
@@ -185,7 +182,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;

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,67 @@
+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);
+    }
+  }
+}

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,219 @@
+import { test, expect } from '@playwright/test';
+import { setActiveProfile, HENDRIK_ID } from './fixtures/profile';
+
+// Helper: idempotent recipe delete.
+async function deleteRecipe(
+  request: Parameters<Parameters<typeof test>[1]>[0]['request'],
+  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/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/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/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/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 }
         ]
       })
     );

tests/unit/api-helpers.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { z } from 'zod';
+import { parsePositiveIntParam, validateBody } from '../../src/lib/server/api-helpers';
+
+// SvelteKit's `error()` throws an HttpError shape with { status, body }.
+// We verify both — wrapping these everywhere costs nothing and keeps the
+// API contract stable.
+
+function expectHttpError(fn: () => unknown, status: number, message?: string) {
+  try {
+    fn();
+  } catch (err) {
+    const e = err as { status?: number; body?: { message?: string } };
+    expect(e.status, `status should be ${status}`).toBe(status);
+    if (message !== undefined) {
+      expect(e.body?.message).toBe(message);
+    }
+    return;
+  }
+  throw new Error('expected fn to throw, but it returned normally');
+}
+
+describe('parsePositiveIntParam', () => {
+  it('parses a valid positive integer', () => {
+    expect(parsePositiveIntParam('42', 'id')).toBe(42);
+    expect(parsePositiveIntParam('1', 'id')).toBe(1);
+    expect(parsePositiveIntParam('999999', 'id')).toBe(999999);
+  });
+
+  it('throws 400 for zero', () => {
+    expectHttpError(() => parsePositiveIntParam('0', 'id'), 400, 'Invalid id');
+  });
+
+  it('throws 400 for negative numbers', () => {
+    expectHttpError(() => parsePositiveIntParam('-1', 'id'), 400, 'Invalid id');
+  });
+
+  it('throws 400 for non-integer', () => {
+    expectHttpError(() => parsePositiveIntParam('1.5', 'id'), 400, 'Invalid id');
+  });
+
+  it('throws 400 for non-numeric strings', () => {
+    expectHttpError(() => parsePositiveIntParam('abc', 'id'), 400, 'Invalid id');
+  });
+
+  it('throws 400 for empty string', () => {
+    expectHttpError(() => parsePositiveIntParam('', 'id'), 400, 'Invalid id');
+  });
+
+  it('throws 400 for null', () => {
+    expectHttpError(() => parsePositiveIntParam(null, 'id'), 400, 'Missing id');
+  });
+
+  it('throws 400 for undefined', () => {
+    expectHttpError(() => parsePositiveIntParam(undefined, 'id'), 400, 'Missing id');
+  });
+
+  it('uses the provided field name in error messages', () => {
+    expectHttpError(() => parsePositiveIntParam('foo', 'recipe_id'), 400, 'Invalid recipe_id');
+    expectHttpError(() => parsePositiveIntParam(null, 'recipe_id'), 400, 'Missing recipe_id');
+  });
+});
+
+describe('validateBody', () => {
+  const Schema = z.object({
+    name: z.string().min(1),
+    age: z.number().int().nonnegative()
+  });
+
+  it('returns parsed data when valid', () => {
+    const result = validateBody({ name: 'foo', age: 42 }, Schema);
+    expect(result).toEqual({ name: 'foo', age: 42 });
+  });
+
+  it('throws 400 with message and issues on schema mismatch', () => {
+    try {
+      validateBody({ name: '', age: -1 }, Schema);
+      throw new Error('expected throw');
+    } catch (err) {
+      const e = err as { status?: number; body?: { message?: string; issues?: unknown[] } };
+      expect(e.status).toBe(400);
+      expect(e.body?.message).toBe('Invalid body');
+      expect(Array.isArray(e.body?.issues)).toBe(true);
+      expect(e.body?.issues?.length).toBeGreaterThan(0);
+    }
+  });
+
+  it('throws 400 for null body (request.json failure case)', () => {
+    expectHttpError(() => validateBody(null, Schema), 400, 'Invalid body');
+  });
+
+  it('throws 400 for primitive non-object body', () => {
+    expectHttpError(() => validateBody('a string', Schema), 400, 'Invalid body');
+  });
+});

tests/unit/ingredient.test.ts

@@ -39,4 +39,66 @@ describe('parseIngredient', () => {
     expect(p.quantity).toBe(2);
     expect(p.name).toBe('Tomaten');
   });
+
+  describe('Unicode-Bruchzeichen', () => {
+    it.each([
+      ['½ TL Salz', 0.5, 'TL', 'Salz'],
+      ['¼ kg Zucker', 0.25, 'kg', 'Zucker'],
+      ['¾ l Milch', 0.75, 'l', 'Milch'],
+      ['⅓ Tasse Mehl', 1 / 3, 'Tasse', 'Mehl'],
+      ['⅔ TL Pfeffer', 2 / 3, 'TL', 'Pfeffer'],
+      ['⅛ TL Muskat', 0.125, 'TL', 'Muskat']
+    ] as const)('%s', (input, qty, unit, name) => {
+      const p = parseIngredient(input);
+      expect(p.quantity).toBeCloseTo(qty, 5);
+      expect(p.unit).toBe(unit);
+      expect(p.name).toBe(name);
+    });
+
+    it('Unicode-Bruch ohne Unit', () => {
+      const p = parseIngredient('½ Zitrone');
+      expect(p.quantity).toBeCloseTo(0.5, 5);
+      expect(p.unit).toBe(null);
+      expect(p.name).toBe('Zitrone');
+    });
+  });
+
+  describe('Mengen-Plausibilitaet (Bounds)', () => {
+    it('weist 0 als Menge ab → quantity null', () => {
+      const p = parseIngredient('0 g Mehl');
+      expect(p.quantity).toBe(null);
+      // name bleibt das was nach der "0" kommt — Importer muss das nicht
+      // perfekt rekonstruieren, der raw_text bleibt erhalten.
+      expect(p.raw_text).toBe('0 g Mehl');
+    });
+
+    it('weist negative Menge ab', () => {
+      // "-1 EL Öl" — Minus führt regex direkt ins Fallback (kein \d am Start),
+      // also bleibt name = full text.
+      const p = parseIngredient('-1 EL Öl');
+      expect(p.quantity).toBe(null);
+    });
+
+    it('weist Menge > 10000 ab', () => {
+      const p = parseIngredient('99999 g Hokuspokus');
+      expect(p.quantity).toBe(null);
+    });
+
+    it('akzeptiert die Obergrenze 10000 selbst', () => {
+      const p = parseIngredient('10000 g Mehl');
+      expect(p.quantity).toBe(10000);
+    });
+
+    it('akzeptiert führende Null bei Dezimalbrüchen', () => {
+      const p = parseIngredient('0.5 kg Salz');
+      expect(p.quantity).toBe(0.5);
+      expect(p.unit).toBe('kg');
+    });
+
+    it('akzeptiert deutsche führende Null', () => {
+      const p = parseIngredient('0,25 l Wasser');
+      expect(p.quantity).toBe(0.25);
+      expect(p.unit).toBe('l');
+    });
+  });
 });

tests/unit/scaler.test.ts

@@ -8,7 +8,8 @@ const mk = (q: number | null, unit: string | null, name: string): Ingredient =>
   unit,
   name,
   note: null,
-  raw_text: ''
+  raw_text: '',
+  section_heading: null
 });
 
 describe('roundQuantity', () => {
@@ -40,4 +41,15 @@ describe('scaleIngredients', () => {
     const scaled = scaleIngredients([mk(100, 'g', 'Butter')], 1 / 3);
     expect(scaled[0].quantity).toBe(33);
   });
+
+  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);
+  });
 });

tests/unit/search-store.test.ts

@@ -0,0 +1,264 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { SearchStore, type SearchSnapshot } 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);
+  });
+
+  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('race-guard: stale fetch response discarded when query was cleared/changed', async () => {
+    vi.useFakeTimers();
+    let resolveFetch!: (v: Response) => void;
+    const fetchImpl = vi.fn(
+      () =>
+        new Promise<Response>((resolve) => {
+          resolveFetch = resolve;
+        })
+    );
+    const store = new SearchStore({ fetchImpl, debounceMs: 10 });
+    store.query = 'stale-query';
+    store.runDebounced();
+    await vi.advanceTimersByTimeAsync(15);
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+    // User keeps typing BEFORE the response arrives — race-guard should kick in
+    // when the fetch finally resolves.
+    store.query = 'different';
+    resolveFetch({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        hits: [
+          {
+            id: 99,
+            title: 'Stale',
+            description: null,
+            image_path: null,
+            source_domain: null,
+            avg_stars: null,
+            last_cooked_at: null
+          }
+        ]
+      })
+    } as Response);
+    // Flush microtasks so the awaited response + race-guard run.
+    await vi.runOnlyPendingTimersAsync();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(store.hits).toEqual([]);
+    expect(store.searchedFor).toBeNull();
+  });
+
+  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 } },
+      { 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();
+    expect(store.webHits).toHaveLength(1);
+    await store.loadMore();
+    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();
+    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('runSearch(q) cancels pending debounce to avoid double-fetch', async () => {
+    vi.useFakeTimers();
+    const fetchImpl = mockFetch([
+      { body: { hits: [{ id: 1, title: 'immediate', description: null, image_path: null, source_domain: null, avg_stars: null, last_cooked_at: null }] } }
+    ]);
+    const store = new SearchStore({ fetchImpl, debounceMs: 300 });
+    store.query = 'meal';
+    store.runDebounced(); // schedules the 300ms timer
+    // Before the timer fires, call runSearch immediately (e.g. form submit).
+    await store.runSearch('meal');
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+    // Now advance past the original debounce — timer must not still fire.
+    await vi.advanceTimersByTimeAsync(400);
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+  });
+
+  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);
+    filter = '&domains=chefkoch.de';
+    store.reSearch();
+    await vi.advanceTimersByTimeAsync(10);
+    await vi.waitFor(() => expect(store.hits).toHaveLength(1));
+    const last = fetchImpl.mock.calls.at(-1)?.[0] as string;
+    expect(last).toMatch(/&domains=chefkoch\.de/);
+  });
+});