UX: Routen-Header aufgeräumt — 3 saubere Zeilen, einheitliche Buttons

backend/static/css/components.css

@@ -2047,23 +2047,50 @@ html.modal-open {
   outline:       none;
 }
 .rk-search:focus { border-color: var(--c-primary); }
-.rk-rec-btn {
-  white-space: nowrap;
-  flex-shrink: 0;
-}
 .rk-rec-btn--active {
   animation: rec-pulse 1.2s ease-in-out infinite;
 }
-/* Filter-Panel (aufklappbar) */
+
-.rk-filter-toggle-btn {
+/* Einheitliche Aktions-Buttons (Filter / Import / Aufzeichnen) */
-  position: relative;
+.rk-action-btn {
-  flex-shrink: 0;
+  flex:            1;
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  gap:             var(--space-2);
+  padding:         var(--space-2) var(--space-3);
+  min-height:      40px;
+  font-size:       var(--text-sm);
+  font-weight:     var(--weight-semibold);
+  border:          1.5px solid var(--c-border);
+  border-radius:   var(--radius-md);
+  background:      var(--c-surface);
+  color:           var(--c-text);
+  cursor:          pointer;
+  white-space:     nowrap;
+  transition:      background var(--transition-fast), border-color var(--transition-fast);
+  -webkit-tap-highlight-color: transparent;
 }
-.rk-filter-toggle-btn.active {
+.rk-action-btn:hover  { background: var(--c-surface-2); }
+.rk-action-btn:active { background: var(--c-border); }
+.rk-action-btn--primary {
   background:   var(--c-primary);
   border-color: var(--c-primary);
   color:        #fff;
 }
+.rk-action-btn--primary:hover  { background: var(--c-primary-dark); }
+.rk-action-btn--danger {
+  background:   var(--c-danger);
+  border-color: var(--c-danger);
+  color:        #fff;
+}
+
+/* Filter-Panel (aufklappbar) */
+.rk-filter-toggle-btn.active {
+  background:   var(--c-primary-subtle);
+  border-color: var(--c-primary);
+  color:        var(--c-primary);
+}
 .rk-filter-badge {
   position:     absolute;
   top:          2px;

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '234'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '235'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 

backend/static/js/pages/routes.js

@@ -78,25 +78,29 @@ 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>
-          <div class="rk-search-row">
+          <!-- 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 durchsuchen…" autocomplete="off">
+                     placeholder="Routen suchen…" autocomplete="off">
             </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>
-            <button class="btn btn-secondary btn-sm rk-filter-toggle-btn" id="rk-filter-btn" title="Filter">
+          </div>
+          <!-- Zeile 3: Aktions-Buttons gleichmäßig -->
+          <div style="display:flex;gap:var(--space-2)">
+            <button class="rk-action-btn rk-filter-toggle-btn" id="rk-filter-btn" style="position:relative">
               ${UI.icon('funnel')} Filter
               <span class="rk-filter-badge" id="rk-filter-badge" style="display:none"></span>
             </button>
-            <label class="btn btn-secondary btn-sm rk-imp-btn" id="rk-imp-wrap" title="GPX / KML / TCX importieren">
+            <label class="rk-action-btn rk-imp-btn" id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="cursor:pointer">
               ${UI.icon('download-simple')} Import
               <input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" style="display:none">
             </label>
-            <button class="btn btn-primary btn-sm rk-rec-btn" id="rk-rec-btn">${UI.icon('path')} Aufzeichnen</button>
+            <button class="rk-action-btn rk-action-btn--primary rk-rec-btn" id="rk-rec-btn">${UI.icon('path')} Aufzeichnen</button>
           </div>
           <div class="rk-filter-panel" id="rk-filter-panel" style="display:none">
             <div class="rk-filters" id="rk-filters">
@@ -200,10 +204,10 @@ window.Page_routes = (() => {
     const btn = document.getElementById('rk-rec-btn');
     if (!btn) return;
     if (recording) {
-      btn.className = 'btn btn-danger btn-sm rk-rec-btn rk-rec-btn--active';
+      btn.className = 'rk-action-btn rk-action-btn--danger rk-rec-btn rk-rec-btn--active';
-      btn.innerHTML = UI.icon('path') + ' Stopp aufnehmen';
+      btn.innerHTML = UI.icon('path') + ' Stopp';
     } else {
-      btn.className = 'btn btn-primary btn-sm rk-rec-btn';
+      btn.className = 'rk-action-btn rk-action-btn--primary rk-rec-btn';
       btn.innerHTML = UI.icon('path') + ' Aufzeichnen';
     }
   }