chore: .prettierignore fuer Fixtures, Docs und Templates

npm run format hat zuletzt 18k Zeilen HTML-Fixture und alle
Markdown-Plaene angefasst. Ignore-Liste deckt jetzt ab:

- tests/fixtures (byte-exakte HTML-Captures fuer Parser-Tests)
- *.md (hand-aligned Tabellen, historische Plan-Artefakte)
- searxng/settings.yml (Template mit VAR-Platzhaltern)
- data/, build/, .svelte-kit, node_modules, Lockfile

Damit bleibt npm run format auf Code beschraenkt.

.prettierignore

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

CLAUDE.md

@@ -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)
 

docker-compose.prod.yml

@@ -11,6 +11,8 @@ services:
       - IMAGE_DIR=/data/images
       - SEARXNG_URL=http://searxng:8080
       - NODE_ENV=production
+      # Im Header als kleine Versionsnummer unter dem Logo angezeigt.
+      - KOCHWAS_TAG=${KOCHWAS_TAG:-dev}
     depends_on:
       - searxng
     restart: unless-stopped

docs/ARCHITECTURE.md

@@ -17,8 +17,12 @@ src/
 ├── app.html, app.d.ts        # Shell + Env-Types
 ├── service-worker.ts         # PWA-Shell
 ├── lib/
-│   ├── client/               # clientseitig: Profil-Store, Confirm-Dialog
-│   ├── components/           # Svelte-Komponenten (RecipeView, StarRating, ConfirmDialog, ProfileSwitcher)
+│   ├── client/               # reaktive Stores (Profile, Search, Wishlist, PWA, Network, Sync, Toast, Install, Confirm, API-Fetch-Wrapper)
+│   ├── components/           # Svelte-Komponenten:
+│   │                         #   - Recipe: RecipeView, RecipeEditor + Editor-Sub-Components
+│   │                         #     (IngredientRow, StepList, ImageUploadBox, TimeDisplay, recipe-editor-types)
+│   │                         #   - UI-Shell: ConfirmDialog, ProfileSwitcher, SyncIndicator, Toast, UpdateToast
+│   │                         #   - Search: SearchFilter, SearchLoader, StarRating
 │   ├── recipes/              # shared: Portionen-Scaler (Client UND Server)
 │   ├── server/               # nur Server-Code (nie in Client-Bundle!)
 │   │   ├── db/               # openDb, Migrations, DB-Singleton
@@ -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 } from 'lucide-svelte';
+  import { Trash2, ChevronUp, ChevronDown, Plus } from 'lucide-svelte';
   import type { DraftIng } from './recipe-editor-types';
 
   type Props = {
@@ -8,11 +8,39 @@
     total: number;
     onmove: (dir: -1 | 1) => void;
     onremove: () => void;
+    onaddSection: () => void;
+    onremoveSection: () => void;
   };
 
-  let { ing, idx, total, onmove, onremove }: Props = $props();
+  let { ing, idx, total, onmove, onremove, onaddSection, onremoveSection }: Props = $props();
 </script>
 
+{#if ing.section_heading === null}
+  <li class="section-insert">
+    <button type="button" class="add-section" onclick={onaddSection}>
+      <Plus size={12} strokeWidth={2.5} />
+      <span>Abschnitt hinzufügen</span>
+    </button>
+  </li>
+{:else}
+  <li class="section-heading-row">
+    <input
+      class="section-heading"
+      type="text"
+      bind:value={ing.section_heading}
+      placeholder='Sektion, z. B. „Für den Teig"'
+      aria-label="Sektionsüberschrift"
+    />
+    <button
+      type="button"
+      class="section-remove"
+      aria-label="Sektion entfernen"
+      onclick={onremoveSection}
+    >
+      <Trash2 size={14} strokeWidth={2} />
+    </button>
+  </li>
+{/if}
 <li class="ing-row">
   <div class="move">
     <button
@@ -126,4 +154,68 @@
       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/RecipeEditor.svelte

@@ -43,7 +43,8 @@
         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
       }))
     )
   );
@@ -52,7 +53,7 @@
   );
 
   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);
@@ -64,6 +65,16 @@
     [next[idx], next[target]] = [next[target], next[idx]];
     ingredients = next;
   }
+  function addSection(idx: number) {
+    const next = [...ingredients];
+    next[idx] = { ...next[idx], section_heading: '' };
+    ingredients = next;
+  }
+  function removeSection(idx: number) {
+    const next = [...ingredients];
+    next[idx] = { ...next[idx], section_heading: null };
+    ingredients = next;
+  }
   function addStep() {
     steps = [...steps, { text: '' }];
   }
@@ -94,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
@@ -174,6 +187,8 @@
           total={ingredients.length}
           onmove={(dir) => moveIngredient(idx, dir)}
           onremove={() => removeIngredient(idx)}
+          onaddSection={() => addSection(idx)}
+          onremoveSection={() => removeSection(idx)}
         />
       {/each}
     </ul>

src/lib/components/RecipeView.svelte

@@ -127,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">
@@ -281,6 +284,19 @@
     padding: 0;
     margin: 0;
   }
+  .ing-list .section-heading {
+    list-style: none;
+    font-weight: 700;
+    color: #2b6a3d;
+    font-size: 1.2rem;
+    margin-top: 1.1rem;
+    margin-bottom: 0.3rem;
+    padding: 0.2rem 0;
+    border-bottom: 1px solid #e4eae7;
+  }
+  .ing-list .section-heading:first-child {
+    margin-top: 0;
+  }
   .ing-list li {
     display: flex;
     gap: 0.75rem;

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

@@ -3,6 +3,7 @@ export type DraftIng = {
   unit: string;
   name: string;
   note: string;
+  section_heading: string | null;
 };
 
 export type DraftStep = { text: string };

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

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

src/lib/server/recipes/repository.ts

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

src/lib/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/lib/types.ts

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

src/routes/+layout.server.ts

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

src/routes/+layout.svelte

@@ -19,7 +19,7 @@
   import { registerServiceWorker } from '$lib/client/sw-register';
   import { SearchStore } from '$lib/client/search.svelte';
 
-  let { children } = $props();
+  let { data, children } = $props();
 
   const navStore = new SearchStore({
     pageSize: 30,
@@ -115,7 +115,10 @@
 <header class="bar">
   <div class="bar-inner">
     {#if $page.url.pathname === '/'}
-      <a href="/" class="brand">Kochwas</a>
+      <div class="brand-stack">
+        <a href="/" class="brand">Kochwas</a>
+        <span class="version" title="Deployment-Tag">{data.version}</span>
+      </div>
     {:else}
       <a href="/" class="home-back" aria-label="Zurück zur Startseite">
         <ArrowLeft size={22} strokeWidth={2} />
@@ -307,6 +310,13 @@
     padding: 0.6rem 1rem;
     position: relative;
   }
+  .brand-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    line-height: 1;
+    flex-shrink: 0;
+  }
   .brand {
     font-size: 1.15rem;
     font-weight: 700;
@@ -314,6 +324,13 @@
     color: #2b6a3d;
     flex-shrink: 0;
   }
+  .version {
+    margin-top: 2px;
+    font-size: 0.65rem;
+    color: #9aa8a0;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.02em;
+  }
   .home-back {
     display: inline-flex;
     align-items: center;
@@ -544,7 +561,7 @@
   }
   @media (max-width: 520px) {
     /* App-Icon auf engen Screens komplett aus — die Suche bekommt den Platz. */
-    .brand {
+    .brand-stack {
       display: none;
     }
     .nav-link {

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

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

src/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

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

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

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