feat(home): zufälliger Spruch zwischen Titel und Suche

Eine der 49 Flachwitze wird beim Laden der Startseite zufällig gewählt
und in kursiv unter "Kochwas" angezeigt. Die Auswahl passiert auf dem
Client (onMount), damit SSR und Hydration nicht miteinander streiten —
beim ersten Frame ist ein nicht-umbrechender Leerraum drin, damit das
Layout nicht springt.

src/routes/+page.svelte

@@ -3,8 +3,10 @@
   import { goto } from '$app/navigation';
   import type { SearchHit } from '$lib/server/recipes/search-local';
   import type { WebHit } from '$lib/server/search/searxng';
+  import { randomQuote } from '$lib/quotes';
 
   let query = $state('');
+  let quote = $state('');
   let recent = $state<SearchHit[]>([]);
   let hits = $state<SearchHit[]>([]);
   let webHits = $state<WebHit[]>([]);
@@ -14,6 +16,7 @@
   let searchedFor = $state<string | null>(null);
 
   onMount(async () => {
+    quote = randomQuote();
     const res = await fetch('/api/recipes/search');
     const body = await res.json();
     recent = body.hits;
@@ -78,6 +81,7 @@
 
 <section class="hero">
   <h1>Kochwas</h1>
+  <p class="tagline" aria-live="polite">{quote || '\u00a0'}</p>
   <form onsubmit={submit}>
     <input
       type="search"
@@ -178,10 +182,19 @@
   }
   .hero h1 {
     font-size: clamp(2.2rem, 8vw, 3.5rem);
-    margin: 0 0 1.5rem;
+    margin: 0 0 0.5rem;
     color: #2b6a3d;
     letter-spacing: -0.02em;
   }
+  .tagline {
+    margin: 0 auto 1.5rem;
+    max-width: 36rem;
+    color: #6a7670;
+    font-style: italic;
+    font-size: 1rem;
+    line-height: 1.35;
+    min-height: 1.4rem;
+  }
   form {
     display: flex;
     gap: 0.5rem;