From d374b5af617bc2dbde7d67a1980fd0d0c575c2e2 Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sun, 19 Apr 2026 12:07:37 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20Routen-Header=20Buttons=20mit=20Inline-S?=
 =?UTF-8?q?tyles=20(cache-unabh=C3=A4ngig=20wie=20Pills)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/js/app.js          |  2 +-
 backend/static/js/pages/routes.js | 29 ++++++++++++++++++++---------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index d0b82bf..31e66d0 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '235'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '236'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 
diff --git a/backend/static/js/pages/routes.js b/backend/static/js/pages/routes.js
index d77ede5..b869021 100644
--- a/backend/static/js/pages/routes.js
+++ b/backend/static/js/pages/routes.js
@@ -90,17 +90,17 @@ window.Page_routes = (() => {
               <button class="rk-view-btn${_viewMode==='map'?' active':''}" id="rk-view-map" title="Karte">${UI.icon('map-trifold')}</button>
             </div>
           </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">
+          <!-- Zeile 3: Aktions-Buttons gleichmäßig (Inline-Styles, cache-unabhängig) -->
+          <div style="display:flex;gap:8px">
+            <button id="rk-filter-btn" style="${_btnStyle()}position:relative">
               ${UI.icon('funnel')} Filter
               <span class="rk-filter-badge" id="rk-filter-badge" style="display:none"></span>
             </button>
-            <label class="rk-action-btn rk-imp-btn" id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="cursor:pointer">
+            <label id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="${_btnStyle()}cursor:pointer">
               ${UI.icon('download-simple')} Import
               <input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" style="display:none">
             </label>
-            <button class="rk-action-btn rk-action-btn--primary rk-rec-btn" id="rk-rec-btn">${UI.icon('path')} Aufzeichnen</button>
+            <button class="rk-rec-btn" id="rk-rec-btn" style="${_btnStyle(true)}">${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">
@@ -204,11 +204,14 @@ window.Page_routes = (() => {
     const btn = document.getElementById('rk-rec-btn');
     if (!btn) return;
     if (recording) {
-      btn.className = 'rk-action-btn rk-action-btn--danger rk-rec-btn rk-rec-btn--active';
-      btn.innerHTML = UI.icon('path') + ' Stopp';
+      btn.className  = 'rk-rec-btn rk-rec-btn--active';
+      btn.style.cssText = _btnStyle() +
+        'border-color:var(--c-danger);background:var(--c-danger);color:#fff;flex:1;';
+      btn.innerHTML  = UI.icon('path') + ' Stopp';
     } else {
-      btn.className = 'rk-action-btn rk-action-btn--primary rk-rec-btn';
-      btn.innerHTML = UI.icon('path') + ' Aufzeichnen';
+      btn.className  = 'rk-rec-btn';
+      btn.style.cssText = _btnStyle(true) + 'flex:1;';
+      btn.innerHTML  = UI.icon('path') + ' Aufzeichnen';
     }
   }
 
@@ -694,6 +697,14 @@ window.Page_routes = (() => {
     </svg>`;
   }
 
+  // Button-Hilfsfunktion für Header-Buttons (cache-unabhängig)
+  const _btnStyle = (primary = false) =>
+    `flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;` +
+    `padding:8px 12px;min-height:40px;font-size:13px;font-weight:600;` +
+    `border-radius:8px;border:1.5px solid ${primary ? 'var(--c-primary)' : 'var(--c-border)'};` +
+    `background:${primary ? 'var(--c-primary)' : 'var(--c-surface)'};` +
+    `color:${primary ? '#fff' : 'var(--c-text)'};white-space:nowrap;`;
+
   // Pill-Hilfsfunktionen (inline styles — unabhängig vom CSS-Cache)
   const _pillStyle = (bg, color, border) =>
     `display:inline-flex;align-items:center;font-size:10px;font-weight:600;` +