feat(search): tone-aware product search with mobile + desktop triggers

Introduces:
- src/api/fixtures/products.js + src/api/index.js — placeholder catalog
  (24 products across Kaiser-Natron / Holste / Gazelle / Grüne Tante /
  Linda) so search has real data. Same shape the backend will return.
- Search.vue — Teleported dialog. Token-scored, diacritics-folded, ß→ss
  normalized so German terms still match when users type ASCII. Keyboard
  navigation (↑/↓/Enter/Esc), autofocus on open, scroll-lock. Full-screen
  on mobile, centered command-palette modal on md+. Tone prop defaults
  to 'brand' so the overlay reads as the site's primary affordance
  (green), with 'paper' and 'cream' variants available.
- SearchSection.vue + ds-search route + sidebar entry.
- DE + EN strings for the overlay and the showcase.

Navbar wires the triggers: desktop search button sits left of the
LanguageSwitcher in the right cluster; mobile gets a matching bottom-
left floating button (cream surface, safe-area padded) that mirrors the
existing bottom-right cart/menu cluster. The Search overlay is mounted
inside Navbar with the default catalog, so every page that renders a
Navbar gets search for free. Selected products bubble up as a
@select event for navigation handling.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/i18n/messages.js

@@ -13,6 +13,17 @@ const de = {
   'menu.open': 'Menü öffnen',
   'menu.close': 'Menü schließen',
   'language.label': 'Sprache',
+  'search.open': 'Suche öffnen',
+  'search.label': 'Produkte durchsuchen',
+  'search.placeholder': 'Produkte suchen …',
+  'search.clear': 'Suche zurücksetzen',
+  'search.results': 'Suchergebnisse',
+  'search.noResults': 'Keine Produkte gefunden',
+  'search.noResultsHint': 'Probiere eine andere Schreibweise oder einen allgemeineren Begriff.',
+  'search.emptyHint': 'Tippe, um Produkte zu finden – z. B. „Natron Pulver" oder „Entkalker".',
+  'search.hint.navigate': 'Navigieren',
+  'search.hint.select': 'Auswählen',
+  'search.hint.close': 'Schließen',
 
   // Design-system sidebar
   'ds.sidebar.brand': 'Marke',
@@ -34,8 +45,25 @@ const de = {
   'ds.nav.products': 'Produktkarten',
   'ds.nav.hero': 'Hero',
   'ds.nav.navbar': 'Navigation',
+  'ds.nav.search': 'Suche',
   'ds.nav.language': 'Sprachwahl',
 
+  // Search overlay
+  'ds.search.title': 'Suche',
+  'ds.search.description': 'Volltextsuche über den Produktkatalog mit Bildvorschau. Mobil als Vollbild-Overlay, am Desktop als zentrierte Kommando-Palette. Tastaturbedienbar und standardmäßig in der primären Markenfarbe.',
+  'ds.search.label': 'Produkte durchsuchen',
+  'ds.search.placeholder': 'Produkte durchsuchen…',
+  'ds.search.noResults': 'Keine Produkte gefunden.',
+  'ds.search.suggested': 'Vorschläge',
+  'ds.search.results': 'Ergebnisse',
+  'ds.search.open': 'Suche öffnen',
+  'ds.search.picked': 'Ausgewählt',
+  'ds.search.tryHint': 'Tipp: probier „natron", „kalk", „wäsche" oder „bad".',
+  'ds.search.integrationHint': 'Die Suche läuft über den im API-Layer (src/api/) exportierten Produktkatalog. Sobald das Backend steht, bleibt die Komponenten-Signatur unverändert.',
+  'ds.search.hint.navigate': 'Navigieren',
+  'ds.search.hint.select': 'Auswählen',
+  'ds.search.hint.close': 'Schließen',
+
   // Common section eyebrows
   'ds.eyebrow.brand': 'Marke',
   'ds.eyebrow.tokens': 'Tokens',
@@ -191,6 +219,12 @@ const de = {
   'ds.hero.headline.b': 'was glänzen soll.',
   'ds.hero.sub': 'Reinigt, backt und neutralisiert Gerüche. Die 250-g-Großpackung für den Haushalt, der sich auf das Original verlässt.',
 
+  // Search section
+  'ds.search.title': 'Produktsuche',
+  'ds.search.description': 'Suchknopf rechts in der Navbar (links der Sprachwahl) und links unten als Floating-Button auf dem Telefon. Klick öffnet ein Full-Screen-Overlay auf Mobilgeräten bzw. ein zentriertes Panel auf dem Desktop. Eingabefeld ist autofokussiert, Ergebnisliste aktualisiert sich beim Tippen, Pfeiltasten / Enter / Esc werden unterstützt.',
+  'ds.search.demo.label': 'Demo öffnen',
+  'ds.search.demo.hint': 'Probiere „Natron", „Pulver", „Entkalker" oder „Spray".',
+
   // Navbar section
   'ds.navbar.title': 'Navigation',
   'ds.navbar.description': 'Logo + Nav + Warenkorb, in drei Flächentönen. Auf Mobilgeräten behält die obere Leiste das Logo, Menü + Warenkorb wechseln in ein ergonomisches bodennahes rechtes Floating-Cluster. Das Menü öffnet ein vollflächiges markengrünes Overlay.',
@@ -243,6 +277,17 @@ const en = {
   'menu.open': 'Open menu',
   'menu.close': 'Close menu',
   'language.label': 'Language',
+  'search.open': 'Open search',
+  'search.label': 'Search products',
+  'search.placeholder': 'Search products…',
+  'search.clear': 'Clear search',
+  'search.results': 'Search results',
+  'search.noResults': 'No products found',
+  'search.noResultsHint': 'Try a different spelling or a broader term.',
+  'search.emptyHint': 'Type to find products — e.g. "Natron powder" or "descaler".',
+  'search.hint.navigate': 'Navigate',
+  'search.hint.select': 'Select',
+  'search.hint.close': 'Close',
 
   'ds.sidebar.brand': 'Brand',
   'ds.sidebar.tokens': 'Tokens',
@@ -263,8 +308,24 @@ const en = {
   'ds.nav.products': 'Product cards',
   'ds.nav.hero': 'Hero',
   'ds.nav.navbar': 'Navbar',
+  'ds.nav.search': 'Search',
   'ds.nav.language': 'Language',
 
+  'ds.search.title': 'Search',
+  'ds.search.description': 'Full-text search across the product catalog with image previews. Full-screen overlay on mobile, centered command palette on desktop. Keyboard-navigable and brand-green by default.',
+  'ds.search.label': 'Search products',
+  'ds.search.placeholder': 'Search products…',
+  'ds.search.noResults': 'No products found.',
+  'ds.search.suggested': 'Suggestions',
+  'ds.search.results': 'Results',
+  'ds.search.open': 'Open search',
+  'ds.search.picked': 'Picked',
+  'ds.search.tryHint': 'Try: "natron", "limescale", "laundry", or "bath".',
+  'ds.search.integrationHint': 'Search queries the catalog exported from the project API layer (src/api/). When the real backend lands, the component signature stays the same.',
+  'ds.search.hint.navigate': 'Navigate',
+  'ds.search.hint.select': 'Select',
+  'ds.search.hint.close': 'Close',
+
   'ds.eyebrow.brand': 'Brand',
   'ds.eyebrow.tokens': 'Tokens',
   'ds.eyebrow.components': 'Components',
@@ -406,6 +467,11 @@ const en = {
   'ds.hero.headline.b': 'that should shine.',
   'ds.hero.sub': 'Cleans, bakes, and neutralises odours. The 250 g large pack for the household that trusts the original.',
 
+  'ds.search.title': 'Product search',
+  'ds.search.description': 'Search trigger on the right of the navbar (left of the language switcher) and bottom-left as a floating button on mobile. Tapping it opens a full-screen overlay on mobile and a centered panel on desktop. The input auto-focuses, the results list updates as you type, and arrow keys / Enter / Esc are supported.',
+  'ds.search.demo.label': 'Open demo',
+  'ds.search.demo.hint': 'Try "Natron", "pulver", "entkalker" or "spray".',
+
   'ds.navbar.title': 'Navbar',
   'ds.navbar.description': 'Logo + nav + cart, in three surface tones. On mobile, the top bar keeps the logo and the menu + cart move to an ergonomic bottom-right floating cluster. The menu opens a full-screen brand-green overlay.',
   'ds.navbar.tone': 'Navbar tone',