From 385b4540b3acbfbe99423fc5f130db2379fd5a14 Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sun, 19 Apr 2026 12:28:18 +0200
Subject: [PATCH] =?UTF-8?q?UX:=20Routen-Header=20alle=20Zeilen=20gleiche?=
 =?UTF-8?q?=20H=C3=B6he=2046px,=20Inline-Styles=20durchg=C3=A4ngig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/js/pages/routes.js | 38 +++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/backend/static/js/pages/routes.js b/backend/static/js/pages/routes.js
index 884a4ba..54ba63a 100644
--- a/backend/static/js/pages/routes.js
+++ b/backend/static/js/pages/routes.js
@@ -105,16 +105,36 @@ window.Page_routes = (() => {
             <button class="rk-mode-btn${_browseMode==='mine'?' active':''}" id="rk-mode-mine">${UI.icon('user')} Meine Routen</button>
             <button class="rk-mode-btn${_browseMode==='discover'?' active':''}" id="rk-mode-discover">${UI.icon('compass')} Entdecken</button>
           </div>
-          <!-- Zeile 2: Suche + View-Toggle -->
-          <div style="display:flex;gap:var(--space-2);align-items:center">
-            <div class="diary-search-wrap" style="flex:1;min-width:0">
-              <svg class="ph-icon diary-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
-              <input class="diary-search-input" id="rk-search" type="search"
-                     placeholder="Routen suchen…" autocomplete="off">
+          <!-- Zeile 2: Suche + View-Toggle (gleiche Höhe wie Aktions-Buttons) -->
+          <div style="display:flex;gap:8px;align-items:stretch">
+            <div style="position:relative;flex:1;min-width:0">
+              <svg class="ph-icon" aria-hidden="true"
+                   style="position:absolute;left:12px;top:50%;transform:translateY(-50%);
+                          color:var(--c-text-muted);pointer-events:none;width:16px;height:16px">
+                <use href="/icons/phosphor.svg#magnifying-glass"></use>
+              </svg>
+              <input id="rk-search" type="search" placeholder="Routen suchen…" autocomplete="off"
+                     style="width:100%;height:46px;padding:0 12px 0 36px;
+                            border:1.5px solid var(--c-border);border-radius:10px;
+                            font-size:14px;font-family:inherit;
+                            background:var(--c-surface);color:var(--c-text);outline:none;
+                            box-sizing:border-box;">
             </div>
-            <div class="rk-view-toggle">
-              <button class="rk-view-btn${_viewMode==='list'?' active':''}" id="rk-view-list" title="Liste">${UI.icon('list')}</button>
-              <button class="rk-view-btn${_viewMode==='map'?' active':''}" id="rk-view-map" title="Karte">${UI.icon('map-trifold')}</button>
+            <div style="display:flex;border:1.5px solid var(--c-border);border-radius:10px;
+                        overflow:hidden;flex-shrink:0;height:46px">
+              <button id="rk-view-list" title="Liste"
+                      style="padding:0 14px;border:none;cursor:pointer;font-size:14px;
+                             background:${_viewMode==='list' ? 'var(--c-primary)' : 'var(--c-surface)'};
+                             color:${_viewMode==='list' ? '#fff' : 'var(--c-text-secondary)'}">
+                ${UI.icon('list')}
+              </button>
+              <button id="rk-view-map" title="Karte"
+                      style="padding:0 14px;border:none;border-left:1.5px solid var(--c-border);
+                             cursor:pointer;font-size:14px;
+                             background:${_viewMode==='map' ? 'var(--c-primary)' : 'var(--c-surface)'};
+                             color:${_viewMode==='map' ? '#fff' : 'var(--c-text-secondary)'}">
+                ${UI.icon('map-trifold')}
+              </button>
             </div>
           </div>
           <!-- Zeile 3: Aktions-Buttons gleichmäßig (Inline-Styles, cache-unabhängig) -->