feat(ui): add layout with profile bar, home, search, recipe pages

- Homepage with search and recent recipes
- Search page listing local hits (FTS5)
- Recipe page with ratings, favorites, cooking log, comments
- Wake-Lock on recipe view for mobile kitchen use

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

src/routes/+page.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">
-  let query = '';
+  import { onMount } from 'svelte';
+  import type { SearchHit } from '$lib/server/recipes/search-local';
+
+  let query = $state('');
+  let recent = $state<SearchHit[]>([]);
+
+  onMount(async () => {
+    const res = await fetch('/api/recipes/search');
+    const body = await res.json();
+    recent = body.hits;
+  });
 </script>
 
-<main>
+<section class="hero">
   <h1>Kochwas</h1>
   <form method="GET" action="/search">
     <input
@@ -12,47 +22,125 @@
       placeholder="Rezept suchen…"
       autocomplete="off"
       inputmode="search"
+      aria-label="Suchbegriff"
     />
-    <button type="submit">Suchen</button>
+    <button type="submit" aria-label="Suchen">Suchen</button>
   </form>
-  <p class="muted">Phase 1: Foundations — Suche folgt in Phase 3.</p>
-</main>
+</section>
+
+{#if recent.length > 0}
+  <section class="recent">
+    <h2>Zuletzt hinzugefügt</h2>
+    <ul class="cards">
+      {#each recent as r (r.id)}
+        <li>
+          <a href={`/recipes/${r.id}`} class="card">
+            {#if r.image_path}
+              <img src={`/images/${r.image_path}`} alt="" loading="lazy" />
+            {:else}
+              <div class="placeholder">🥘</div>
+            {/if}
+            <div class="card-body">
+              <div class="title">{r.title}</div>
+              {#if r.source_domain}
+                <div class="domain">{r.source_domain}</div>
+              {/if}
+            </div>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </section>
+{/if}
 
 <style>
-  main {
-    max-width: 640px;
-    margin: 4rem auto;
-    padding: 0 1rem;
-    font-family: system-ui, -apple-system, sans-serif;
-  }
-  h1 {
+  .hero {
     text-align: center;
-    font-size: 3rem;
-    margin-bottom: 2rem;
+    padding: 3rem 0 1.5rem;
+  }
+  .hero h1 {
+    font-size: clamp(2.2rem, 8vw, 3.5rem);
+    margin: 0 0 1.5rem;
+    color: #2b6a3d;
+    letter-spacing: -0.02em;
   }
   form {
     display: flex;
     gap: 0.5rem;
   }
-  input {
+  input[type='search'] {
     flex: 1;
-    padding: 0.75rem 1rem;
+    padding: 0.9rem 1rem;
     font-size: 1.1rem;
-    border: 1px solid #bbb;
-    border-radius: 8px;
+    border: 1px solid #cfd9d1;
+    border-radius: 10px;
+    background: white;
+    min-height: 48px;
+  }
+  input[type='search']:focus {
+    outline: 2px solid #2b6a3d;
+    outline-offset: 1px;
   }
   button {
-    padding: 0.75rem 1.25rem;
-    font-size: 1.1rem;
-    border-radius: 8px;
+    padding: 0.9rem 1.25rem;
+    font-size: 1rem;
+    border-radius: 10px;
     border: 0;
     background: #2b6a3d;
     color: white;
+    min-height: 48px;
+    cursor: pointer;
   }
-  .muted {
-    color: #888;
-    font-size: 0.9rem;
-    text-align: center;
+  .recent {
     margin-top: 2rem;
   }
+  .recent h2 {
+    font-size: 1.05rem;
+    color: #444;
+    margin: 0 0 0.75rem;
+  }
+  .cards {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 0.75rem;
+  }
+  .card {
+    display: block;
+    background: white;
+    border: 1px solid #e4eae7;
+    border-radius: 14px;
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+    transition: transform 0.1s;
+  }
+  .card:active {
+    transform: scale(0.98);
+  }
+  .card img,
+  .placeholder {
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+    background: #eef3ef;
+    display: grid;
+    place-items: center;
+    font-size: 2rem;
+  }
+  .card-body {
+    padding: 0.6rem 0.75rem 0.75rem;
+  }
+  .title {
+    font-weight: 600;
+    font-size: 0.95rem;
+    line-height: 1.25;
+  }
+  .domain {
+    font-size: 0.8rem;
+    color: #888;
+    margin-top: 0.25rem;
+  }
 </style>