fix(sw): network-first + 3s timeout statt SWR fuer Daten

SWR lieferte bei jedem Cache-Hit sofort die alte Antwort und
aktualisierte das Cache nur fuer den naechsten Request. Folge:
UI zeigte stale Daten, frische Daten erst nach Refresh.

Neu: network-first mit 3 s Timeout-Fallback. Netz gewinnt bei
frischer Antwort; Timeout oder Netzwerk-Fehler fallen auf Cache
zurueck. Pre-Cache-Logik (runSync) bleibt unveraendert, Shell
und Bilder bleiben cache-first.

CLAUDE.md

@@ -26,12 +26,14 @@ Selbstgehostete Rezept-PWA für die Familie Siegeln. Erreichbar unter `https://k
 - `src/routes/+layout.svelte` — Header, mobile expand, Dropdown-Search auf Rezeptseiten
 - `src/routes/recipes/[id]/+page.svelte` — Rezept-Detail mit allen Actions (Rating, Favorit, Cooked, Wunschliste, Kommentar, Umbenennen, Löschen)
 - `src/routes/preview/+page.svelte` — importierte Vorschau vor dem Speichern
+- `src/lib/components/RecipeView.svelte` / `RecipeEditor.svelte` — Lesen/Edit-Mode des Rezepts. Editor ist in Sub-Components aufgeteilt: `IngredientRow`, `StepList`, `ImageUploadBox`, `TimeDisplay` (+ shared types `recipe-editor-types.ts`)
 - `src/lib/server/search/searxng.ts` — Web-Suche + Thumbnail-Enrichment + SQLite-Cache
 - `src/lib/server/recipes/importer.ts` — JSON-LD → Recipe, orchestriert Bild-Download
 - `src/lib/server/db/migrations/*.sql` — Schema; bei Änderung immer **neue** Migration statt bestehende bearbeiten
 - `src/service-worker.ts` — Service-Worker-Orchestrator (Shell-Cache + Pre-Cache + SWR)
 - `src/lib/sw/` — reine Logik (Cache-Strategy-Entscheider, Diff-Manifest) für Unit-Tests
-- `src/lib/client/*.svelte.ts` — Frontend-Stores (Network, Sync-Status, Toast, Install-Prompt)
+- `src/lib/client/*.svelte.ts` — Frontend-Stores (Search, Network, Sync-Status, Toast, Install-Prompt, Wishlist, PWA, Profile, Confirm, Search-Filter)
+- `tests/e2e/remote/` — Playwright gegen `kochwas-dev.siegeln.net` (CRUD erlaubt; workers:1, serviceWorkers:block)
 
 ## Arbeitsweise (wie wir es machen)
 
@@ -67,7 +69,7 @@ docker compose -f docker-compose.prod.yml up --build
 
 ## Offene Themen / Stand
 
-Siehe Session-Handoff-Dokumente unter `docs/superpowers/` und dort besonders `session-handoff-2026-04-17.md`. Die Roadmap-Phasen liegen als `docs/superpowers/plans/*.md`. Was als „Later" markiert ist, ist nicht beauftragt.
+Siehe die Plan-Dateien unter `docs/superpowers/plans/*.md` für abgeschlossene Implementierungs-Phasen (v1.0 Foundations → v1.1 Offline-PWA → Post-Review-Roadmap → Search-State-Store → Editor-Split → Ingredient-Sections = v1.2). Was als „Later" markiert ist, ist nicht beauftragt.
 
 ## Auto-Memory (lokal, nicht im Repo)
 

docs/ARCHITECTURE.md

@@ -17,8 +17,12 @@ src/
 ├── app.html, app.d.ts        # Shell + Env-Types
 ├── service-worker.ts         # PWA-Shell
 ├── lib/
-│   ├── client/               # clientseitig: Profil-Store, Confirm-Dialog
-│   ├── components/           # Svelte-Komponenten (RecipeView, StarRating, ConfirmDialog, ProfileSwitcher)
+│   ├── client/               # reaktive Stores (Profile, Search, Wishlist, PWA, Network, Sync, Toast, Install, Confirm, API-Fetch-Wrapper)
+│   ├── components/           # Svelte-Komponenten:
+│   │                         #   - Recipe: RecipeView, RecipeEditor + Editor-Sub-Components
+│   │                         #     (IngredientRow, StepList, ImageUploadBox, TimeDisplay, recipe-editor-types)
+│   │                         #   - UI-Shell: ConfirmDialog, ProfileSwitcher, SyncIndicator, Toast, UpdateToast
+│   │                         #   - Search: SearchFilter, SearchLoader, StarRating
 │   ├── recipes/              # shared: Portionen-Scaler (Client UND Server)
 │   ├── server/               # nur Server-Code (nie in Client-Bundle!)
 │   │   ├── db/               # openDb, Migrations, DB-Singleton
@@ -56,6 +60,8 @@ src/
 
 ### Web-Suche
 
+Die gesamte Live-Search-Logik ist im `SearchStore` (`src/lib/client/search.svelte.ts`) gekapselt: Debounce, Race-Guard, Pagination, Web-Fallback, Snapshot/Restore für Back-Nav. Sowohl Header-Dropdown (`+layout.svelte`) als auch Startseite (`+page.svelte`) teilen sich die Klasse mit unterschiedlicher `filterParam`-Quelle.
+
 1. User tippt → 300 ms Debounce → `/api/recipes/search?q=...` (lokal FTS5)
 2. Wenn 0 Treffer: automatisch `/api/recipes/search/web?q=...`
 3. `searxng.ts` → SearXNG-API mit `site:domain OR site:domain2 ...`-Filter aus Whitelist
@@ -86,7 +92,8 @@ Gemeinsame Komponente `ConfirmDialog.svelte` wird im Root-Layout einmal gemounte
 - **JSON-LD first**: Alle drei Ziel-Domains (Chefkoch, Emmi, Experimente) liefern `schema.org/Recipe` im JSON-LD. LLM-Fallback war geplant, aktuell nicht nötig.
 - **SearXNG als Such-Engine**: Self-hosted, daher keine API-Keys. Das Bot-Detection-Theater wird mit gesetzten `X-Forwarded-For`-Headern aus Docker-IPs umgangen.
 - **Thumbnail-Cache in SQLite**: 30 Tage TTL (per `KOCHWAS_THUMB_TTL_DAYS`). Negative Einträge (Seite ohne Bild) werden auch gecacht.
-- **Svelte 5 Runes** — kein `$:` mehr, keine alten Stores außer `$app/stores`. Neue Stores via Klasse mit `$state`-Feldern.
+- **Svelte 5 Runes** — kein `$:` mehr, keine alten Stores außer `$app/stores`. Neue Stores via Klasse mit `$state`-Feldern. Form-lokale Snapshots in Edit-Komponenten mit `untrack()` aus `svelte`, damit Prop-Updates nicht laufende Edits überschreiben.
+- **Zutaten-Sektionen** (ab Migration 012, v1.2): `ingredient.section_heading TEXT NULL`. Ist das Feld gesetzt, startet an dieser Zeile eine neue Sektion — folgende Zutaten gehören dazu, bis die nächste Zeile wieder ein Heading hat. Kein zweites Tabellen-Modell, Ordnung bleibt `position`. Importer setzt immer `null` (schema.org/Recipe hat das Konzept nicht). Editor erlaubt Inline-Insert via `Abschnitt hinzufügen`-Button vor jeder Zeile; leeres Heading wird beim Save zu `null` normalisiert.
 - **Service Worker** rein zum Shell-Cachen für Offline-First-PWA, kein intelligentes Cache-Matching (keine externe Rezept-Seiten).
 
 ## Migrations-Workflow
@@ -100,10 +107,12 @@ Bei Schema-Änderung:
 
 ## Test-Strategie
 
-- **Unit**: `tests/unit/` — pure Funktionen (json-ld-recipe, iso8601-duration, quotes-random, smoke)
+- **Unit**: `tests/unit/` — pure Funktionen + Client-Stores via jsdom (json-ld-recipe, iso8601-duration, quotes-random, scaler, ingredient-parser, SearchStore, PWA/Toast/Sync-Stores, SW-Logik).
 - **Integration**: `tests/integration/` — mit `openInMemoryForTest()` fresh SQLite pro Test. Externe HTTP via `node:http`-TestServer auf Port 0 gemockt.
-- **Keine Svelte-Component-Tests** (bewusst, Aufwand/Nutzen stimmt nicht; UI wird manuell getestet)
-- **Vor Commit**: `npm test && npm run check` muss grün sein.
+- **E2E local**: `tests/e2e/` — Playwright gegen `npm run preview`, deckt PWA-Offline-Lifecycle ab (`offline.spec.ts`).
+- **E2E remote**: `tests/e2e/remote/` — Playwright gegen `kochwas-dev.siegeln.net` via `playwright.remote.config.ts` (`workers:1`, `serviceWorkers:block`). Testet Live-API-Verhalten, inkl. destruktiver CRUD-Flows (Recipes, Kommentare, Favoriten). Run: `npm run test:e2e:remote`. Siehe `tests/e2e/remote/fixtures/` für Profile-Setup + idempotente API-Cleanup-Helper.
+- **Keine Svelte-Component-Unit-Tests** (bewusst, Aufwand/Nutzen stimmt nicht; UI wird per E2E und manuell getestet).
+- **Vor Commit**: `npm test && npm run check` muss grün sein. Vor Merge zu main: zusätzlich `npm run test:e2e:remote`.
 
 ### Service Worker (PWA)
 
@@ -111,11 +120,11 @@ Bei Schema-Änderung:
 
 - **Pre-Cache** (alle Rezepte + Bilder beim Initial-Sync), über paginierten Fetch von `/api/recipes/all`.
 - **Delta-Sync** beim App-Start (diff vs. Cache-Manifest, nur Delta laden).
-- **Drei Cache-Strategien** (dispatcht per `resolveStrategy`): Shell = cache-first, Daten = SWR, Bilder = cache-first.
+- **Drei Cache-Strategien** (dispatcht per `resolveStrategy`): Shell = cache-first, Daten = network-first mit 3 s-Timeout-Fallback auf Cache, Bilder = cache-first.
 - **Message-Protokoll** (`sync-start`, `sync-progress`, `sync-done`, `sync-error`) zwischen SW und Client.
 
 Reine Logik-Einheiten (testbar, Unit-Tests in `tests/unit/`):
-- `src/lib/sw/cache-strategy.ts` — `resolveStrategy({url, method})` → `'shell' | 'swr' | 'images' | 'network-only'`
+- `src/lib/sw/cache-strategy.ts` — `resolveStrategy({url, method})` → `'shell' | 'network-first' | 'images' | 'network-only'`
 - `src/lib/sw/diff-manifest.ts` — `diffManifest(current, cached)` → `{toAdd, toRemove}`
 
 Client-Stores (SSR-safe via typeof-Guards):

docs/OPERATIONS.md

@@ -155,7 +155,7 @@ Kochwas ist eine installierbare PWA. Erkennbar an:
 
 Caches im Browser (siehe DevTools → Application → Cache Storage):
 - `kochwas-shell-<version>` — App-Shell (JS/CSS/Static-Icons), cache-first
-- `kochwas-data-v1` — Rezept-HTMLs + API-JSON (SWR)
+- `kochwas-data-v1` — Rezept-HTMLs + API-JSON (network-first, 3 s Timeout → Cache-Fallback)
 - `kochwas-images-v1` — Bilder (cache-first)
 - `kochwas-meta` — Cache-Manifest (Liste der gecachten Rezept-IDs unter `/__cache-manifest__`)
 
@@ -171,3 +171,19 @@ Bei SW-Problemen Debug-Pfad:
 E2E-Tests (Playwright): `npm run test:e2e`. Setzt `npm run build` voraus (Playwright startet automatisch `npm run preview`).
 
 Icons einmalig rendern: `npm run render:icons` (schreibt nach `static/icon-*.png`, committen).
+
+## Dev-System / Remote-E2E
+
+`https://kochwas-dev.siegeln.net/` ist ein separates Deployment (eigener Container, eigene DB unter `/opt/docker/kochwas-dev/data/`). Zweck: E2E-Tests gegen eine prod-nahe Umgebung ohne Angst vor DB-Schäden. Die Remote-Suite (`tests/e2e/remote/`, Config `playwright.remote.config.ts`) darf dort frei CRUDen — User stellt die DB bei Bedarf per Backup wieder her.
+
+```bash
+npm run test:e2e:remote                               # gegen kochwas-dev
+E2E_REMOTE_URL=https://... npm run test:e2e:remote   # andere URL
+```
+
+Wichtige Config-Eigenschaften:
+- `workers: 1` — DB-Race-Sicherheit bei CRUD-Tests.
+- `serviceWorkers: 'block'` — verhindert Chromium-Crashes durch akkumulierten SW-State über 40+ Contexts.
+- Fixtures unter `tests/e2e/remote/fixtures/`: `profile.ts` (Profile-Auswahl via localStorage vor Seitenladen), `api-cleanup.ts` (idempotente DELETE-Helfer für afterEach).
+
+**Niemals gegen `kochwas.siegeln.net` (ohne `-dev`)** die destruktiven Tests laufen lassen — das ist Prod.

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

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "kochwas",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kochwas",
-      "version": "0.1.0",
+      "version": "1.2.0",
       "dependencies": {
         "@types/archiver": "^7.0.0",
         "@types/yauzl": "^2.10.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kochwas",
-  "version": "0.1.0",
+  "version": "1.2.0",
   "private": true,
   "type": "module",
   "scripts": {

src/lib/components/IngredientRow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Trash2, ChevronUp, ChevronDown, Plus, X } from 'lucide-svelte';
+  import { Trash2, ChevronUp, ChevronDown, Plus } from 'lucide-svelte';
   import type { DraftIng } from './recipe-editor-types';
 
   type Props = {
@@ -37,7 +37,7 @@
       aria-label="Sektion entfernen"
       onclick={onremoveSection}
     >
-      <X size={14} strokeWidth={2.5} />
+      <Trash2 size={14} strokeWidth={2} />
     </button>
   </li>
 {/if}

src/lib/components/RecipeView.svelte

@@ -286,12 +286,12 @@
   }
   .ing-list .section-heading {
     list-style: none;
-    font-weight: 600;
+    font-weight: 700;
     color: #2b6a3d;
-    font-size: 1rem;
-    margin-top: 0.9rem;
-    margin-bottom: 0.2rem;
-    padding: 0.15rem 0;
+    font-size: 1.2rem;
+    margin-top: 1.1rem;
+    margin-bottom: 0.3rem;
+    padding: 0.2rem 0;
     border-bottom: 1px solid #e4eae7;
   }
   .ing-list .section-heading:first-child {

src/lib/sw/cache-strategy.ts

@@ -1,4 +1,4 @@
-export type CacheStrategy = 'shell' | 'swr' | 'images' | 'network-only';
+export type CacheStrategy = 'shell' | 'network-first' | 'images' | 'network-only';
 
 type RequestShape = { url: string; method: string };
 
@@ -37,6 +37,7 @@ export function resolveStrategy(req: RequestShape): CacheStrategy {
     return 'shell';
   }
 
-  // Everything else: recipe pages, API reads, lists — all SWR.
-  return 'swr';
+  // Everything else: recipe pages, API reads, lists — network-first with
+  // timeout fallback to cache (handled in service-worker.ts).
+  return 'network-first';
 }

src/service-worker.ts

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

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

@@ -1,11 +1,8 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, type APIRequestContext } 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> {
+async function deleteRecipe(request: APIRequestContext, id: number): Promise<void> {
   await request.delete(`/api/recipes/${id}`);
 }
 

tests/unit/cache-strategy.test.ts

@@ -6,14 +6,16 @@ describe('resolveStrategy', () => {
     expect(resolveStrategy({ url: '/images/favicon-abc.png', method: 'GET' })).toBe('images');
   });
 
-  it('swr for recipe HTML pages', () => {
-    expect(resolveStrategy({ url: '/recipes/42', method: 'GET' })).toBe('swr');
+  it('network-first for recipe HTML pages', () => {
+    expect(resolveStrategy({ url: '/recipes/42', method: 'GET' })).toBe('network-first');
   });
 
-  it('swr for recipe API reads', () => {
-    expect(resolveStrategy({ url: '/api/recipes/42', method: 'GET' })).toBe('swr');
-    expect(resolveStrategy({ url: '/api/recipes/all?sort=name', method: 'GET' })).toBe('swr');
-    expect(resolveStrategy({ url: '/api/wishlist', method: 'GET' })).toBe('swr');
+  it('network-first for recipe API reads', () => {
+    expect(resolveStrategy({ url: '/api/recipes/42', method: 'GET' })).toBe('network-first');
+    expect(resolveStrategy({ url: '/api/recipes/all?sort=name', method: 'GET' })).toBe(
+      'network-first'
+    );
+    expect(resolveStrategy({ url: '/api/wishlist', method: 'GET' })).toBe('network-first');
   });
 
   it('network-only for write methods', () => {
@@ -34,8 +36,8 @@ describe('resolveStrategy', () => {
     expect(resolveStrategy({ url: '/manifest.webmanifest', method: 'GET' })).toBe('shell');
   });
 
-  it('falls through to swr for other same-origin GETs (e.g. root page)', () => {
-    expect(resolveStrategy({ url: '/', method: 'GET' })).toBe('swr');
-    expect(resolveStrategy({ url: '/wishlist', method: 'GET' })).toBe('swr');
+  it('falls through to network-first for other same-origin GETs (e.g. root page)', () => {
+    expect(resolveStrategy({ url: '/', method: 'GET' })).toBe('network-first');
+    expect(resolveStrategy({ url: '/wishlist', method: 'GET' })).toBe('network-first');
   });
 });