From 3cd22544d3ea9f73e29cac346ffa2797f4424c05 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Fri, 17 Apr 2026 17:52:51 +0200
Subject: [PATCH] feat(search): mobile header search expands on focus; drop
 hero button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Home:
- "Suchen"-Button entfernt. Die Suche feuert ohnehin debounced beim
  Tippen; der Button war ein Relikt aus dem Submit-Modell. Enter auf
  dem Input löst weiterhin einen Submit aus (geht zur /search-Seite).

Header (< 520 px):
- Sobald das Suchfeld fokussiert wird, wandert das nav-search-wrap
  via :focus-within auf position: absolute und dehnt sich bis zum
  rechten Rand (1 rem Abstand) aus. Die Action-Icons werden dabei
  vom Suchfeld überlagert (z-index 60), sodass der Anwender auf
  engen Displays deutlich mehr Platz zum Tippen hat.
- Bar-Inner bekam position: relative, damit das absolute Ausdehnen
  innerhalb der Header-Zeile greift.
---
 src/routes/+layout.svelte | 14 ++++++++++++++
 src/routes/+page.svelte   | 11 -----------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2e9bf10..651ccff 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -248,6 +248,7 @@
     align-items: center;
     gap: 0.6rem;
     padding: 0.6rem 1rem;
+    position: relative;
   }
   .brand {
     font-size: 1.15rem;
@@ -420,5 +421,18 @@
       height: 36px;
       font-size: 1.05rem;
     }
+    /* Beim Tippen auf engen Screens nach rechts ausdehnen
+       und die Action-Icons dahinter verschwinden lassen. */
+    .nav-search-wrap:focus-within {
+      position: absolute;
+      top: 0.6rem;
+      bottom: 0.6rem;
+      left: calc(1rem + 1.6rem + 0.6rem);
+      right: 1rem;
+      z-index: 60;
+    }
+    .nav-search-wrap:focus-within .nav-search input {
+      background: white;
+    }
   }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9d2b580..9f07aea 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -87,7 +87,6 @@
       inputmode="search"
       aria-label="Suchbegriff"
     />
-    <button type="submit" aria-label="Suchen">Suchen</button>
   </form>
 </section>
 
@@ -200,16 +199,6 @@
     outline: 2px solid #2b6a3d;
     outline-offset: 1px;
   }
-  button {
-    padding: 0.9rem 1.25rem;
-    font-size: 1rem;
-    border-radius: 10px;
-    border: 0;
-    background: #2b6a3d;
-    color: white;
-    min-height: 48px;
-    cursor: pointer;
-  }
   .results,
   .recent {
     margin-top: 1.5rem;