feat(search): Home als einzige Suchseite, inline „+ weitere Ergebnisse"

Die separaten /search und /search/web Routen sind weg. Auf der Hauptseite
gibt es jetzt einen einzigen „+ weitere Ergebnisse"-Button am Ende der
Trefferliste, der erst weitere lokale Treffer lädt und — sobald die
erschöpft sind — auf die SearXNG-Web-Suche umschaltet und dort Seite für
Seite weiterblättert. Web-Treffer werden unter die lokalen angehängt,
getrennt durch eine „Aus dem Internet"-Zwischenüberschrift.

Alte Layout-Links auf /search bzw. /search/web zeigen jetzt auf /?q=.

Der Snapshot der Suche merkt sich auch Paginations-Zustand, damit
Rücknavigation vom Rezept/Preview die volle Liste wiederherstellt.

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

src/routes/+layout.svelte

@@ -81,7 +81,7 @@
     const q = navQuery.trim();
     if (!q) return;
     navOpen = false;
-    void goto(`/search?q=${encodeURIComponent(q)}`);
+    void goto(`/?q=${encodeURIComponent(q)}`);
   }
 
   function handleClickOutside(e: MouseEvent) {
@@ -186,7 +186,7 @@
               </ul>
               <a
                 class="dd-web"
-                href={`/search/web?q=${encodeURIComponent(navQuery.trim())}`}
+                href={`/?q=${encodeURIComponent(navQuery.trim())}`}
                 onclick={pickHit}
               >
                 <Globe size={16} strokeWidth={2} />

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
-  import { CookingPot, Globe, X } from 'lucide-svelte';
+  import { CookingPot, X } from 'lucide-svelte';
   import type { Snapshot } from './$types';
   import type { SearchHit } from '$lib/server/recipes/search-local';
   import type { WebHit } from '$lib/server/search/searxng';
@@ -9,6 +9,8 @@
   import SearchLoader from '$lib/components/SearchLoader.svelte';
   import { profileStore } from '$lib/client/profile.svelte';
 
+  const LOCAL_PAGE = 30;
+
   let query = $state('');
   let quote = $state('');
   let recent = $state<SearchHit[]>([]);
@@ -19,6 +21,10 @@
   let webSearching = $state(false);
   let webError = $state<string | null>(null);
   let searchedFor = $state<string | null>(null);
+  let localExhausted = $state(false);
+  let webPageno = $state(0);
+  let webExhausted = $state(false);
+  let loadingMore = $state(false);
   let skipNextSearch = false;
 
   type SearchSnapshot = {
@@ -27,16 +33,31 @@
     webHits: WebHit[];
     searchedFor: string | null;
     webError: string | null;
+    localExhausted: boolean;
+    webPageno: number;
+    webExhausted: boolean;
   };
 
   export const snapshot: Snapshot<SearchSnapshot> = {
-    capture: () => ({ query, hits, webHits, searchedFor, webError }),
+    capture: () => ({
+      query,
+      hits,
+      webHits,
+      searchedFor,
+      webError,
+      localExhausted,
+      webPageno,
+      webExhausted
+    }),
     restore: (v) => {
       query = v.query;
       hits = v.hits;
       webHits = v.webHits;
       searchedFor = v.searchedFor;
       webError = v.webError;
+      localExhausted = v.localExhausted;
+      webPageno = v.webPageno;
+      webExhausted = v.webExhausted;
       skipNextSearch = true;
     }
   };
@@ -92,23 +113,34 @@
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
   async function runSearch(q: string) {
+    localExhausted = false;
+    webPageno = 0;
+    webExhausted = false;
     try {
-      const res = await fetch(`/api/recipes/search?q=${encodeURIComponent(q)}`);
+      const res = await fetch(
+        `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}`
+      );
       const body = await res.json();
       if (query.trim() !== q) return;
       hits = body.hits;
       searchedFor = q;
-      if (body.hits.length === 0) {
+      if (hits.length < LOCAL_PAGE) localExhausted = true;
+      if (hits.length === 0) {
+        // Gar keine lokalen Treffer → erste Web-Seite gleich laden,
+        // damit der User nicht extra auf „+ weitere" klicken muss.
         webSearching = true;
         try {
-          const wres = await fetch(`/api/recipes/search/web?q=${encodeURIComponent(q)}`);
+          const wres = await fetch(`/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=1`);
           if (query.trim() !== q) return;
           if (!wres.ok) {
             const err = await wres.json().catch(() => ({}));
             webError = err.message ?? `HTTP ${wres.status}`;
+            webExhausted = true;
           } else {
             const wbody = await wres.json();
             webHits = wbody.hits;
+            webPageno = 1;
+            if (wbody.hits.length === 0) webExhausted = true;
           }
         } finally {
           if (query.trim() === q) webSearching = false;
@@ -119,6 +151,58 @@
     }
   }
 
+  async function loadMore() {
+    if (loadingMore) return;
+    const q = query.trim();
+    if (!q) return;
+    loadingMore = true;
+    try {
+      if (!localExhausted) {
+        // Noch mehr lokale Treffer holen.
+        const res = await fetch(
+          `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${LOCAL_PAGE}&offset=${hits.length}`
+        );
+        const body = await res.json();
+        if (query.trim() !== q) return;
+        const more = body.hits as SearchHit[];
+        const seen = new Set(hits.map((h) => h.id));
+        const deduped = more.filter((h) => !seen.has(h.id));
+        hits = [...hits, ...deduped];
+        if (more.length < LOCAL_PAGE) localExhausted = true;
+      } else if (!webExhausted) {
+        // Lokale erschöpft → auf Web umschalten / weiterblättern.
+        const nextPage = webPageno + 1;
+        webSearching = webHits.length === 0;
+        try {
+          const wres = await fetch(
+            `/api/recipes/search/web?q=${encodeURIComponent(q)}&pageno=${nextPage}`
+          );
+          if (query.trim() !== q) return;
+          if (!wres.ok) {
+            const err = await wres.json().catch(() => ({}));
+            webError = err.message ?? `HTTP ${wres.status}`;
+            webExhausted = true;
+            return;
+          }
+          const wbody = await wres.json();
+          const more = wbody.hits as WebHit[];
+          const seen = new Set(webHits.map((h) => h.url));
+          const deduped = more.filter((h) => !seen.has(h.url));
+          if (deduped.length === 0) {
+            webExhausted = true;
+          } else {
+            webHits = [...webHits, ...deduped];
+            webPageno = nextPage;
+          }
+        } finally {
+          if (query.trim() === q) webSearching = false;
+        }
+      }
+    } finally {
+      loadingMore = false;
+    }
+  }
+
   $effect(() => {
     const q = query.trim();
     if (debounceTimer) clearTimeout(debounceTimer);
@@ -186,40 +270,41 @@
 
 {#if activeSearch}
   <section class="results">
-    {#if searching && hits.length === 0}
+    {#if searching && hits.length === 0 && webHits.length === 0}
       <SearchLoader scope="local" />
-    {:else if hits.length > 0}
+    {:else}
-      <ul class="cards">
+      {#if hits.length > 0}
-        {#each hits as r (r.id)}
+        <ul class="cards">
-          <li>
+          {#each hits as r (r.id)}
-            <a href={`/recipes/${r.id}`} class="card">
+            <li>
-              {#if r.image_path}
+              <a href={`/recipes/${r.id}`} class="card">
-                <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
+                {#if r.image_path}
-              {:else}
+                  <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
-                <div class="placeholder"><CookingPot size={36} /></div>
+                {:else}
-              {/if}
+                  <div class="placeholder"><CookingPot size={36} /></div>
-              <div class="card-body">
-                <div class="title">{r.title}</div>
-                {#if r.source_domain}
-                  <div class="domain">{r.source_domain}</div>
                 {/if}
-              </div>
+                <div class="card-body">
-            </a>
+                  <div class="title">{r.title}</div>
-          </li>
+                  {#if r.source_domain}
-        {/each}
+                    <div class="domain">{r.source_domain}</div>
-      </ul>
+                  {/if}
-      <a class="web-more" href={`/search/web?q=${encodeURIComponent(query.trim())}`}>
+                </div>
-        <Globe size={18} strokeWidth={2} /> Im Internet weitersuchen
+              </a>
-      </a>
+            </li>
-    {:else if searchedFor === query.trim()}
+          {/each}
-      <p class="muted no-local-msg">
+        </ul>
-        Keine lokalen Rezepte für „{searchedFor}" — Ergebnisse aus dem Internet:
+      {:else if searchedFor === query.trim() && !webSearching && webHits.length === 0 && !webError}
-      </p>
+        <p class="muted no-local-msg">Keine lokalen Rezepte für „{searchedFor}".</p>
-      {#if webSearching}
+      {/if}
-        <SearchLoader scope="web" />
+
-      {:else if webError}
+      {#if webHits.length > 0}
-        <p class="error">Internet-Suche zurzeit nicht möglich: {webError}</p>
+        {#if hits.length > 0}
-      {:else if webHits.length > 0}
+          <h3 class="sep">Aus dem Internet</h3>
+        {:else if searchedFor === query.trim()}
+          <p class="muted no-local-msg">
+            Keine lokalen Rezepte für „{searchedFor}" — Ergebnisse aus dem Internet:
+          </p>
+        {/if}
         <ul class="cards">
           {#each webHits as w (w.url)}
             <li>
@@ -237,8 +322,20 @@
             </li>
           {/each}
         </ul>
-      {:else}
+      {/if}
-        <p class="muted">Auch im Internet nichts gefunden.</p>
+
+      {#if webSearching}
+        <SearchLoader scope="web" />
+      {:else if webError && webHits.length === 0}
+        <p class="error">Internet-Suche zurzeit nicht möglich: {webError}</p>
+      {/if}
+
+      {#if searchedFor === query.trim() && !(localExhausted && webExhausted) && !(searching && hits.length === 0)}
+        <div class="more-cta">
+          <button class="more-btn" onclick={loadMore} disabled={loadingMore || webSearching}>
+            {loadingMore || webSearching ? 'Lade …' : '+ weitere Ergebnisse'}
+          </button>
+        </div>
       {/if}
     {/if}
   </section>
@@ -438,20 +535,35 @@
     background: #fff;
     color: #c53030;
   }
-  .web-more {
+  .sep {
-    display: inline-flex;
+    margin: 1.5rem 0 0.5rem;
-    align-items: center;
+    font-size: 0.9rem;
-    gap: 0.4rem;
+    font-weight: 600;
-    margin-top: 1rem;
+    color: #666;
-    padding: 0.7rem 1.1rem;
+    text-transform: uppercase;
-    border: 1px solid #b7d6c2;
+    letter-spacing: 0.04em;
-    border-radius: 10px;
+    padding-bottom: 0.3rem;
-    text-decoration: none;
+    border-bottom: 1px solid #e4eae7;
-    color: #2b6a3d;
-    background: #eaf4ed;
-    font-size: 0.95rem;
   }
-  .web-more:hover {
+  .more-cta {
-    background: #d8e8df;
+    margin-top: 1.25rem;
+    text-align: center;
+  }
+  .more-btn {
+    padding: 0.75rem 1.25rem;
+    background: white;
+    color: #2b6a3d;
+    border: 1px solid #cfd9d1;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    min-height: 44px;
+    cursor: pointer;
+  }
+  .more-btn:hover:not(:disabled) {
+    background: #f4f8f5;
+  }
+  .more-btn:disabled {
+    opacity: 0.6;
+    cursor: progress;
   }
 </style>

src/routes/search/+page.svelte

@@ -1,245 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  import { goto } from '$app/navigation';
-  import type { SearchHit } from '$lib/server/recipes/search-local';
-
-  const PAGE_SIZE = 30;
-
-  let query = $state(($page.url.searchParams.get('q') ?? '').trim());
-  let hits = $state<SearchHit[]>([]);
-  let loading = $state(false);
-  let loadingMore = $state(false);
-  let exhausted = $state(false);
-  let searched = $state(false);
-  let canWebSearch = $state(false);
-
-  async function run(q: string) {
-    loading = true;
-    searched = true;
-    canWebSearch = true;
-    exhausted = false;
-    const res = await fetch(
-      `/api/recipes/search?q=${encodeURIComponent(q)}&limit=${PAGE_SIZE}`
-    );
-    const body = await res.json();
-    hits = body.hits;
-    exhausted = hits.length < PAGE_SIZE;
-    loading = false;
-    if (hits.length === 0) {
-      // Kein lokaler Treffer → automatisch im Internet weitersuchen.
-      // replaceState, damit die Zurück-Taste nicht zwischen leerer Liste und Web-Suche pingt.
-      void goto(`/search/web?q=${encodeURIComponent(q)}`, { replaceState: true });
-    }
-  }
-
-  async function loadMore() {
-    if (loadingMore || exhausted || !query) return;
-    loadingMore = true;
-    try {
-      const res = await fetch(
-        `/api/recipes/search?q=${encodeURIComponent(query)}&limit=${PAGE_SIZE}&offset=${hits.length}`
-      );
-      const body = await res.json();
-      const more = body.hits as SearchHit[];
-      // Gegen Doppel-Treffer absichern (z.B. Race oder identisches bm25-Scoring).
-      const seen = new Set(hits.map((h) => h.id));
-      const deduped = more.filter((h) => !seen.has(h.id));
-      hits = [...hits, ...deduped];
-      if (more.length < PAGE_SIZE) exhausted = true;
-    } finally {
-      loadingMore = 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?q=${encodeURIComponent(query.trim())}`);
-  }
-</script>
-
-<form class="search-bar" onsubmit={submit}>
-  <input
-    type="search"
-    bind:value={query}
-    placeholder="Rezept suchen…"
-    autocomplete="off"
-    inputmode="search"
-    aria-label="Suchbegriff"
-  />
-  <button type="submit">Suchen</button>
-</form>
-
-{#if loading}
-  <p class="muted">Suche läuft …</p>
-{:else if searched && hits.length === 0}
-  <section class="empty">
-    <p>Kein lokales Rezept für „{query}" — suche jetzt im Internet …</p>
-  </section>
-{:else if hits.length > 0}
-  <ul class="hits">
-    {#each hits as r (r.id)}
-      <li>
-        <a href={`/recipes/${r.id}`} class="hit">
-          {#if r.image_path}
-            <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
-          {:else}
-            <div class="placeholder">🥘</div>
-          {/if}
-          <div class="hit-body">
-            <div class="title">{r.title}</div>
-            <div class="meta">
-              {#if r.source_domain}<span>{r.source_domain}</span>{/if}
-              {#if r.avg_stars !== null}
-                <span>★ {r.avg_stars.toFixed(1)}</span>
-              {/if}
-              {#if r.last_cooked_at}
-                <span>Zuletzt: {new Date(r.last_cooked_at).toLocaleDateString('de-DE')}</span>
-              {/if}
-            </div>
-          </div>
-        </a>
-      </li>
-    {/each}
-  </ul>
-  {#if !exhausted}
-    <div class="more-cta">
-      <button class="more-btn" onclick={loadMore} disabled={loadingMore}>
-        {loadingMore ? 'Lade …' : '+ weitere Ergebnisse'}
-      </button>
-    </div>
-  {/if}
-  {#if canWebSearch}
-    <div class="web-cta">
-      <a class="web-btn" href={`/search/web?q=${encodeURIComponent(query)}`}>
-        🌐 Im Internet weitersuchen
-      </a>
-    </div>
-  {/if}
-{/if}
-
-<style>
-  .search-bar {
-    display: flex;
-    gap: 0.5rem;
-    padding: 1rem 0;
-    position: sticky;
-    top: 0;
-    background: #f8faf8;
-  }
-  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;
-    text-align: center;
-    margin-top: 2rem;
-  }
-  .empty {
-    text-align: center;
-    margin-top: 2rem;
-  }
-  .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: 96px;
-  }
-  .hit img,
-  .placeholder {
-    width: 104px;
-    min-height: 96px;
-    object-fit: cover;
-    background: #eef3ef;
-    display: grid;
-    place-items: center;
-    font-size: 2rem;
-  }
-  .hit-body {
-    flex: 1;
-    padding: 0.75rem 0.9rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-  .title {
-    font-weight: 600;
-    font-size: 1rem;
-    line-height: 1.25;
-  }
-  .meta {
-    display: flex;
-    gap: 0.6rem;
-    margin-top: 0.25rem;
-    color: #888;
-    font-size: 0.8rem;
-    flex-wrap: wrap;
-  }
-  .more-cta {
-    margin-top: 1rem;
-    text-align: center;
-  }
-  .more-btn {
-    padding: 0.7rem 1.25rem;
-    background: white;
-    color: #2b6a3d;
-    border: 1px solid #cfd9d1;
-    border-radius: 10px;
-    font-size: 0.95rem;
-    min-height: 44px;
-    cursor: pointer;
-  }
-  .more-btn:hover:not(:disabled) {
-    background: #f4f8f5;
-  }
-  .more-btn:disabled {
-    opacity: 0.6;
-    cursor: progress;
-  }
-  .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;
-  }
-</style>

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

@@ -1,268 +0,0 @@
-<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 loadingMore = $state(false);
-  let exhausted = $state(false);
-  let pageno = $state(1);
-  let errored = $state<string | null>(null);
-  let searched = $state(false);
-
-  async function run(q: string) {
-    loading = true;
-    searched = true;
-    errored = null;
-    pageno = 1;
-    exhausted = false;
-    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 = [];
-        exhausted = true;
-      } else {
-        const body = await res.json();
-        hits = body.hits;
-        if (hits.length === 0) exhausted = true;
-      }
-    } catch (e) {
-      errored = (e as Error).message;
-      exhausted = true;
-    } finally {
-      loading = false;
-    }
-  }
-
-  async function loadMore() {
-    if (loadingMore || exhausted || !query) return;
-    loadingMore = true;
-    try {
-      const next = pageno + 1;
-      const res = await fetch(
-        `/api/recipes/search/web?q=${encodeURIComponent(query)}&pageno=${next}`
-      );
-      if (!res.ok) {
-        exhausted = true;
-        return;
-      }
-      const body = await res.json();
-      const more = body.hits as WebHit[];
-      // Dedup über URL — SearXNG kann dasselbe Ergebnis auf zwei Seiten liefern.
-      const seen = new Set(hits.map((h) => h.url));
-      const deduped = more.filter((h) => !seen.has(h.url));
-      if (deduped.length === 0) {
-        exhausted = true;
-      } else {
-        hits = [...hits, ...deduped];
-        pageno = next;
-      }
-    } finally {
-      loadingMore = 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>
-
-<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 !exhausted}
-    <div class="more-cta">
-      <button class="more-btn" onclick={loadMore} disabled={loadingMore}>
-        {loadingMore ? 'Lade …' : '+ weitere Ergebnisse'}
-      </button>
-    </div>
-  {/if}
-{/if}
-
-<style>
-  .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;
-  }
-  .more-cta {
-    margin-top: 1rem;
-    text-align: center;
-  }
-  .more-btn {
-    padding: 0.7rem 1.25rem;
-    background: white;
-    color: #2b6a3d;
-    border: 1px solid #cfd9d1;
-    border-radius: 10px;
-    font-size: 0.95rem;
-    min-height: 44px;
-    cursor: pointer;
-  }
-  .more-btn:hover:not(:disabled) {
-    background: #f4f8f5;
-  }
-  .more-btn:disabled {
-    opacity: 0.6;
-    cursor: progress;
-  }
-</style>