feat(ui): add web search page and preview-before-save flow

- /search shows 'Im Internet suchen' CTA when no local hits or always after search
- /search/web lists SearXNG hits with domain pill and snippet
- /preview loads recipe via preview endpoint and shows unified RecipeView with banner
- Save button imports via POST and navigates to the saved recipe

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

src/routes/preview/+page.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import RecipeView from '$lib/components/RecipeView.svelte';
+  import type { Recipe } from '$lib/types';
+
+  let targetUrl = $state(($page.url.searchParams.get('url') ?? '').trim());
+  let recipe = $state<Recipe | null>(null);
+  let loading = $state(true);
+  let errored = $state<string | null>(null);
+  let saving = $state(false);
+
+  async function load(url: string) {
+    loading = true;
+    errored = null;
+    try {
+      const res = await fetch(`/api/recipes/preview?url=${encodeURIComponent(url)}`);
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        errored = body.message ?? `HTTP ${res.status}`;
+        return;
+      }
+      recipe = await res.json();
+    } catch (e) {
+      errored = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => {
+    const u = ($page.url.searchParams.get('url') ?? '').trim();
+    targetUrl = u;
+    if (u) void load(u);
+  });
+
+  async function save() {
+    if (!targetUrl) return;
+    saving = true;
+    const res = await fetch('/api/recipes/import', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ url: targetUrl })
+    });
+    saving = false;
+    if (!res.ok) {
+      const body = await res.json().catch(() => ({}));
+      alert(`Speichern fehlgeschlagen: ${body.message ?? res.status}`);
+      return;
+    }
+    const body = await res.json();
+    goto(`/recipes/${body.id}`);
+  }
+</script>
+
+{#if loading}
+  <p class="muted">Vorschau wird geladen…</p>
+{:else if errored}
+  <section class="error-box">
+    <h2>Vorschau nicht möglich</h2>
+    <p>{errored}</p>
+    <p class="hint">
+      <button type="button" class="link" onclick={() => history.back()}>← Zurück</button>
+    </p>
+  </section>
+{:else if recipe}
+  <div class="banner">
+    <span class="pulse"></span>
+    <span>Vorschau — noch nicht gespeichert</span>
+  </div>
+  <RecipeView {recipe}>
+    {#snippet showActions()}
+      <div class="save-bar">
+        <button class="btn primary" onclick={save} disabled={saving}>
+          {saving ? 'Speichern…' : '💾 In meine Sammlung speichern'}
+        </button>
+        <button type="button" class="btn ghost" onclick={() => history.back()}>Zurück</button>
+      </div>
+    {/snippet}
+  </RecipeView>
+{/if}
+
+<style>
+  .muted {
+    color: #888;
+    text-align: center;
+    margin: 3rem 0;
+  }
+  .error-box {
+    text-align: center;
+    padding: 2rem 1rem;
+    background: #fdf3f3;
+    border: 1px solid #f1b4b4;
+    border-radius: 12px;
+    margin-top: 1rem;
+  }
+  .error-box h2 {
+    color: #c53030;
+    margin: 0 0 0.5rem;
+  }
+  .link {
+    background: none;
+    border: 0;
+    color: #666;
+    cursor: pointer;
+    padding: 0;
+    font: inherit;
+    text-decoration: underline;
+  }
+  .banner {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.7rem 1rem;
+    background: #fff6d7;
+    border: 1px solid #e6d48a;
+    border-radius: 10px;
+    margin: 0.75rem 0 1rem;
+    font-size: 0.9rem;
+    color: #6d5400;
+  }
+  .pulse {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #e6a800;
+    animation: pulse 1.8s infinite ease-in-out;
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 0.35; }
+    50% { opacity: 1; }
+  }
+  .save-bar {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .btn {
+    padding: 0.8rem 1.1rem;
+    min-height: 48px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 1rem;
+    border: 0;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+  .btn.primary {
+    background: #2b6a3d;
+    color: white;
+    flex: 1;
+    justify-content: center;
+  }
+  .btn.primary:disabled {
+    opacity: 0.6;
+    cursor: wait;
+  }
+  .btn.ghost {
+    background: white;
+    color: #444;
+    border: 1px solid #cfd9d1;
+  }
+</style>

src/routes/search/+page.svelte

@@ -48,7 +48,9 @@
 {:else if searched && hits.length === 0}
   <section class="empty">
     <p>Kein Rezept im Bestand für „{query}".</p>
-    <p class="hint">Bald: Internet durchsuchen.</p>
+    <a class="web-btn" href={`/search/web?q=${encodeURIComponent(query)}`}>
+      🌐 Im Internet suchen
+    </a>
   </section>
 {:else if hits.length > 0}
   <ul class="hits">
@@ -77,7 +79,11 @@
     {/each}
   </ul>
   {#if canWebSearch}
-    <p class="web-hint muted">Weitersuchen im Internet — Phase 4.</p>
+    <div class="web-cta">
+      <a class="web-btn" href={`/search/web?q=${encodeURIComponent(query)}`}>
+        🌐 Im Internet weitersuchen
+      </a>
+    </div>
   {/if}
 {/if}
 
@@ -116,10 +122,6 @@
     text-align: center;
     margin-top: 2rem;
   }
-  .hint {
-    color: #888;
-    font-size: 0.9rem;
-  }
   .hits {
     list-style: none;
     padding: 0;
@@ -169,7 +171,21 @@
     font-size: 0.8rem;
     flex-wrap: wrap;
   }
-  .web-hint {
+  .web-cta {
+    margin-top: 1.25rem;
+    text-align: center;
+  }
+  .web-btn {
+    display: inline-block;
+    padding: 0.8rem 1.25rem;
+    background: #2b6a3d;
+    color: white;
+    text-decoration: none;
+    border-radius: 10px;
+    font-size: 1rem;
+    min-height: 48px;
+  }
+  .empty .web-btn {
     margin-top: 1rem;
   }
 </style>

src/routes/search/web/+page.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import type { WebHit } from '$lib/server/search/searxng';
+
+  let query = $state(($page.url.searchParams.get('q') ?? '').trim());
+  let hits = $state<WebHit[]>([]);
+  let loading = $state(false);
+  let errored = $state<string | null>(null);
+  let searched = $state(false);
+
+  async function run(q: string) {
+    loading = true;
+    searched = true;
+    errored = null;
+    try {
+      const res = await fetch(`/api/recipes/search/web?q=${encodeURIComponent(q)}`);
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        errored = body.message ?? `HTTP ${res.status}`;
+        hits = [];
+      } else {
+        const body = await res.json();
+        hits = body.hits;
+      }
+    } catch (e) {
+      errored = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => {
+    const q = ($page.url.searchParams.get('q') ?? '').trim();
+    query = q;
+    if (q) void run(q);
+  });
+
+  function submit(e: SubmitEvent) {
+    e.preventDefault();
+    goto(`/search/web?q=${encodeURIComponent(query.trim())}`);
+  }
+</script>
+
+<nav class="crumbs">
+  <a href={`/search?q=${encodeURIComponent(query)}`}>← Lokale Suche</a>
+</nav>
+
+<form class="search-bar" onsubmit={submit}>
+  <input
+    type="search"
+    bind:value={query}
+    placeholder="Im Internet suchen…"
+    autocomplete="off"
+    inputmode="search"
+  />
+  <button type="submit">🌐 Suchen</button>
+</form>
+
+{#if loading}
+  <p class="muted">Suche im Internet läuft …</p>
+{:else if errored}
+  <section class="empty">
+    <p class="error">Internet-Suche zurzeit nicht möglich: {errored}</p>
+    <p class="hint">
+      SearXNG-Container läuft nicht? <code>docker compose up -d searxng</code>
+    </p>
+  </section>
+{:else if searched && hits.length === 0}
+  <section class="empty">
+    <p>Keine Treffer im Internet für „{query}".</p>
+    <p class="hint">
+      Prüfe, ob Whitelist-Domains gepflegt sind (Einstellungen folgen).
+    </p>
+  </section>
+{:else if hits.length > 0}
+  <p class="muted count">{hits.length} Treffer aus {new Set(hits.map((h) => h.domain)).size} Quellen</p>
+  <ul class="hits">
+    {#each hits as h (h.url)}
+      <li>
+        <a class="hit" href={`/preview?url=${encodeURIComponent(h.url)}`}>
+          {#if h.thumbnail}
+            <img src={h.thumbnail} alt="" loading="lazy" />
+          {:else}
+            <div class="placeholder">🍽️</div>
+          {/if}
+          <div class="hit-body">
+            <div class="title">{h.title}</div>
+            <div class="meta">
+              <span class="domain">{h.domain}</span>
+            </div>
+            {#if h.snippet}
+              <p class="snippet">{h.snippet}</p>
+            {/if}
+          </div>
+        </a>
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .crumbs {
+    padding: 0.75rem 0;
+    font-size: 0.9rem;
+  }
+  .crumbs a {
+    color: #666;
+    text-decoration: none;
+  }
+  .search-bar {
+    display: flex;
+    gap: 0.5rem;
+    padding-bottom: 1rem;
+  }
+  input[type='search'] {
+    flex: 1;
+    padding: 0.8rem 1rem;
+    font-size: 1.05rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 10px;
+    min-height: 48px;
+  }
+  button {
+    padding: 0.8rem 1.2rem;
+    background: #2b6a3d;
+    color: white;
+    border: 0;
+    border-radius: 10px;
+    min-height: 48px;
+    cursor: pointer;
+  }
+  .muted {
+    color: #888;
+  }
+  .count {
+    margin-bottom: 0.75rem;
+  }
+  .empty {
+    text-align: center;
+    margin-top: 2rem;
+  }
+  .error {
+    color: #c53030;
+  }
+  .hint {
+    color: #888;
+    font-size: 0.9rem;
+  }
+  .hint code {
+    background: #f4f8f5;
+    padding: 0.15rem 0.4rem;
+    border-radius: 4px;
+  }
+  .hits {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .hit {
+    display: flex;
+    gap: 0.75rem;
+    background: white;
+    border: 1px solid #e4eae7;
+    border-radius: 14px;
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+    min-height: 100px;
+  }
+  .hit img,
+  .placeholder {
+    width: 100px;
+    object-fit: cover;
+    background: #eef3ef;
+    display: grid;
+    place-items: center;
+    font-size: 2rem;
+    flex-shrink: 0;
+  }
+  .hit-body {
+    flex: 1;
+    padding: 0.75rem 0.9rem;
+    min-width: 0;
+  }
+  .title {
+    font-weight: 600;
+    font-size: 1rem;
+    line-height: 1.3;
+  }
+  .meta {
+    margin-top: 0.3rem;
+  }
+  .domain {
+    display: inline-block;
+    padding: 0.1rem 0.5rem;
+    background: #eaf4ed;
+    color: #2b6a3d;
+    border-radius: 999px;
+    font-size: 0.78rem;
+  }
+  .snippet {
+    margin: 0.4rem 0 0;
+    color: #555;
+    font-size: 0.88rem;
+    line-height: 1.4;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+</style>