From 85d6314ab437dacff3b7f551e2a5b86492af9694 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Tue, 30 Jun 2026 16:04:50 +0200
Subject: [PATCH] =?UTF-8?q?style(header=20mobile):=20Men=C3=BC=20kompakter?=
 =?UTF-8?q?=20+=20Such-Overlay=20an=20Men=C3=BC-Look=20angeglichen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Menü: Hauptpunkte text-sm + py-2.5 (kein Größensprung zu Subpunkten),
  Active nur per Farbe (kein font-bold), CTA-Buttons Ghost + Icons
- Search.svelte: dunkel-frosted Overlay (bg-stein-900/90 + blur), absolute
  statt in-flow, dunkler Input, helle Ergebnisse — konsistent mit dem Menü

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Header.svelte | 26 ++++++++++++++---------
 src/lib/components/Search.svelte | 36 ++++++++++++++++----------------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 4bbab41..1cd95cc 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -311,8 +311,14 @@
                 aria-label={t(T.header_nav_aria)}
             >
                 <div class="grid grid-cols-2 gap-2.5 pb-4 mb-2 border-b border-stein-0/10">
-                    <a href="/mitmachen/" class="btn-primary btn-sm justify-center rounded-full py-2 shadow-sm" onclick={closeMenu}>Mitmachen</a>
-                    <a href="/termin-melden" class="btn-warning btn-sm justify-center rounded-full py-2 shadow-sm" onclick={closeMenu}>Termin melden</a>
+                    <a href="/mitmachen/" class="inline-flex items-center justify-center gap-1.5 rounded-full border border-wald-400/40 px-3 py-2 text-sm font-medium text-wald-200 transition-colors hover:bg-stein-0/10" onclick={closeMenu}>
+                        <Icon icon="lucide:heart-handshake" class="size-4 shrink-0" aria-hidden="true" />
+                        Mitmachen
+                    </a>
+                    <a href="/termin-melden" class="inline-flex items-center justify-center gap-1.5 rounded-full border border-gelb-400/40 px-3 py-2 text-sm font-medium text-gelb-300 transition-colors hover:bg-stein-0/10" onclick={closeMenu}>
+                        <Icon icon="lucide:calendar-plus" class="size-4 shrink-0" aria-hidden="true" />
+                        Termin melden
+                    </a>
                 </div>
                 {#each links as link}
                     {@const active = isActiveTree(link, $page.url.pathname)}
@@ -321,7 +327,7 @@
                         <div>
                             <button
                                 type="button"
-                                class="flex w-full items-center justify-between py-4 px-3 rounded-xs transition-colors text-base text-stein-100 hover:bg-stein-0/10 border-l-4 {active ? 'border-wald-400 font-bold text-wald-300' : 'border-transparent'}"
+                                class="flex w-full items-center justify-between py-2.5 px-3 rounded-xs transition-colors text-sm text-stein-100 hover:bg-stein-0/10 border-l-4 {active ? 'border-wald-400 text-wald-300' : 'border-transparent'}"
                                 aria-expanded={expanded}
                                 onclick={() => toggleSubmenu(link.label)}
                             >
@@ -334,7 +340,7 @@
                                         {@const pActive = isActiveLink(link.href, $page.url.pathname)}
                                         <a
                                             href={link.href}
-                                            class="block py-3 px-3 text-sm {pActive ? 'font-bold text-wald-300' : 'text-stein-200 hover:text-stein-0'}"
+                                            class="block py-2 px-3 text-sm {pActive ? 'text-wald-300' : 'text-stein-200 hover:text-stein-0'}"
                                             aria-current={pActive ? "page" : undefined}
                                             onclick={closeMenu}
                                         >
@@ -345,7 +351,7 @@
                                         {@const cActive = isActiveLink(child.href, $page.url.pathname)}
                                         <a
                                             href={child.href}
-                                            class="block py-3 px-3 text-sm {cActive ? 'font-bold text-wald-300' : 'text-stein-200 hover:text-stein-0'}"
+                                            class="block py-2 px-3 text-sm {cActive ? 'text-wald-300' : 'text-stein-200 hover:text-stein-0'}"
                                             aria-current={cActive ? "page" : undefined}
                                             onclick={closeMenu}
                                         >
@@ -358,8 +364,8 @@
                     {:else}
                         <a
                             href={link.href}
-                            class="block py-4 px-3 rounded-xs transition-colors text-base {active
-                                ? 'font-bold text-wald-300 bg-wald-700/20 border-l-4 border-wald-400'
+                            class="block py-2.5 px-3 rounded-xs transition-colors text-sm {active
+                                ? 'text-wald-300 bg-wald-700/20 border-l-4 border-wald-400'
                                 : 'text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 border-l-4 border-transparent'}"
                             aria-current={active ? "page" : undefined}
                             onclick={closeMenu}
@@ -381,8 +387,8 @@
                                 rel={isInternal
                                     ? undefined
                                     : "noopener noreferrer"}
-                                class="flex items-center gap-3 py-4 px-3 rounded-xs transition-colors text-base border-l-4 {sActive
-                                    ? 'font-bold text-wald-300 bg-wald-700/20 border-wald-400'
+                                class="flex items-center gap-3 py-2.5 px-3 rounded-xs transition-colors text-sm border-l-4 {sActive
+                                    ? 'text-wald-300 bg-wald-700/20 border-wald-400'
                                     : 'text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 border-transparent'}"
                                 aria-current={sActive ? "page" : undefined}
                                 aria-label={social.label ||
@@ -391,7 +397,7 @@
                             >
                                 <Icon
                                     icon={social.icon}
-                                    class="text-base"
+                                    class="text-sm"
                                     aria-hidden="true"
                                 />
                                 {#if social.label}
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index fb5cd2f..8028754 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -88,7 +88,7 @@
       .join("|");
     return safe.replace(
       new RegExp(`(${pattern})`, "gi"),
-      '<mark class="bg-wald-100 text-inherit rounded-xs px-0.5">$1</mark>',
+      '<mark class="bg-wald-400/30 text-wald-100 rounded-xs px-0.5">$1</mark>',
     );
   }
 
@@ -154,16 +154,16 @@
 {#if open}
   <div
     id="search-panel"
-    class="border-t border-white/30 bg-white/95 backdrop-blur overflow-hidden"
+    class="absolute left-0 right-0 top-full z-30 shadow-2xl border-t border-stein-0/10 bg-stein-900/90 backdrop-blur-lg max-h-[calc(100dvh-3.5rem)] overflow-y-auto overscroll-contain"
     role="region"
     aria-label="Suche"
     in:slide={{ duration: 200 }}
     out:slide={{ duration: 150 }}
   >
-    <div class="container-custom py-4 overflow-auto max-h-[calc(100vh-120px)]">
+    <div class="container-custom pt-4 pb-[calc(2rem+env(safe-area-inset-bottom))]">
       <label class="relative block max-w-xl mx-auto">
         <span class="sr-only">Suche</span>
-        <span class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-stein-500">
+        <span class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-stein-300">
           <Icon icon="lucide:search" class="h-5 w-5" />
         </span>
         <input
@@ -171,14 +171,14 @@
           type="search"
           bind:value={query}
           placeholder="Seiten und Beiträge durchsuchen…"
-          class="w-full rounded-xs border border-stein-300 bg-white py-3 pl-10 pr-10 text-sm focus:border-stein-500 focus:outline-none"
+          class="w-full rounded-xs border border-stein-0/20 bg-stein-800/70 py-3 pl-10 pr-10 text-sm text-stein-0 placeholder:text-stein-400 focus:border-wald-400 focus:outline-none"
         />
         {#if query}
           <button
             type="button"
             onclick={() => (query = "")}
             aria-label="Eingabe leeren"
-            class="absolute top-1/2 right-2 -translate-y-1/2 rounded-xs p-1 text-stein-500 hover:bg-stein-100 hover:text-stein-900"
+            class="absolute top-1/2 right-2 -translate-y-1/2 rounded-xs p-1 text-stein-300 hover:bg-stein-0/10 hover:text-stein-0"
           >
             <Icon icon="lucide:x" class="h-4 w-4" />
           </button>
@@ -192,18 +192,18 @@
           {/if}
         </p>
         {#if loading}
-          <p class="text-stein-500 text-center py-2">Lade Suchindex…</p>
+          <p class="text-stein-300 text-center py-2">Lade Suchindex…</p>
         {:else if loadError}
-          <p class="text-fire-600 text-center py-2">Suche nicht verfügbar: {loadError}</p>
+          <p class="text-fire-400 text-center py-2">Suche nicht verfügbar: {loadError}</p>
         {:else if normalizedQuery.length < 2}
-          <p class="text-stein-500 text-center py-2">Mindestens 2 Zeichen eingeben.</p>
+          <p class="text-stein-300 text-center py-2">Mindestens 2 Zeichen eingeben.</p>
         {:else if results.length === 0}
-          <p class="text-stein-500 text-center py-2">Keine Treffer.</p>
+          <p class="text-stein-300 text-center py-2">Keine Treffer.</p>
         {:else}
           <p class="text-stein-400 text-xs mb-2">
             {results.length === MAX_RESULTS ? `${MAX_RESULTS}+ Treffer` : `${results.length} Treffer`} · ↑↓ zum Wählen, ⏎ zum Öffnen
           </p>
-          <ul class="divide-y divide-stein-200">
+          <ul class="divide-y divide-stein-0/10">
             {#each results as hit, i}
               <li>
                 <a
@@ -212,32 +212,32 @@
                   onclick={closeSearch}
                   onmouseenter={() => (activeIndex = i)}
                   aria-current={i === activeIndex ? "true" : undefined}
-                  class="flex items-start gap-3 py-3 rounded-xs px-2 -mx-2 no-underline {i === activeIndex ? 'bg-stein-100' : 'hover:bg-stein-50'}"
+                  class="flex items-start gap-3 py-3 rounded-xs px-2 -mx-2 no-underline {i === activeIndex ? 'bg-stein-0/10' : 'hover:bg-stein-0/10'}"
                 >
                   {#if hit.image}
                     <img
                       src={hit.image}
                       alt=""
-                      class="w-20 h-12 object-cover shrink-0 rounded-xs border border-stein-200"
+                      class="w-20 h-12 object-cover shrink-0 rounded-xs border border-stein-0/10"
                       loading="lazy"
                     />
                   {:else}
-                    <span class="w-20 h-12 shrink-0 bg-stein-100 rounded-xs border border-stein-200 flex items-center justify-center text-stein-400">
+                    <span class="w-20 h-12 shrink-0 bg-stein-0/10 rounded-xs border border-stein-0/10 flex items-center justify-center text-stein-400">
                       <Icon icon={hit.type === "post" ? "lucide:file-text" : "lucide:file"} class="h-5 w-5" />
                     </span>
                   {/if}
                   <div class="min-w-0 flex-1">
-                    <div class="flex items-center gap-2 text-[.65rem] uppercase tracking-wide text-stein-500">
+                    <div class="flex items-center gap-2 text-[.65rem] uppercase tracking-wide text-stein-300">
                       <span>{hit.type === "post" ? "Beitrag" : "Seite"}</span>
                       {#if hit.isEvent && hit.eventDate}
-                        <span class="text-wald-700">{formatDate(hit.eventDate)}</span>
+                        <span class="text-wald-300">{formatDate(hit.eventDate)}</span>
                       {:else if hit.created}
                         <span>{formatDate(hit.created)}</span>
                       {/if}
                     </div>
-                    <div class="font-medium text-stein-900 truncate">{@html highlight(hit.title)}</div>
+                    <div class="font-medium text-stein-0 truncate">{@html highlight(hit.title)}</div>
                     {#if hit.excerpt}
-                      <div class="text-xs text-stein-600 line-clamp-2">{@html highlight(hit.excerpt)}</div>
+                      <div class="text-xs text-stein-300 line-clamp-2">{@html highlight(hit.excerpt)}</div>
                     {/if}
                   </div>
                 </a>