From 26bcd07f8472db5b34043184b47b1a7641fac9fb Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sun, 19 Apr 2026 12:00:39 +0200
Subject: [PATCH] =?UTF-8?q?UX:=20Routen=C3=BCbersicht-Cards=20nutzen=20gle?=
 =?UTF-8?q?iche=20Pill-Darstellung=20wie=20Detail?=
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 | 20 +++++++++-----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 0fe95ee..394ed4a 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 = '233'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '234'; // ← 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 bdd176e..371eefe 100644
--- a/backend/static/js/pages/routes.js
+++ b/backend/static/js/pages/routes.js
@@ -591,17 +591,15 @@ window.Page_routes = (() => {
         <div class="rk-card-body">
           ${authorLine}
           <div class="rk-card-name">${UI.escape(r.name)}</div>
-          <div class="rk-card-stats">
-            ${dist ? `<span>${UI.icon('map-trifold')} ${dist}</span>` : ''}
-            ${dur  ? `<span>${UI.icon('timer')} ${dur}</span>`   : ''}
-            ${terrain ? `<span>${terrain}</span>` : ''}
-            ${paws    ? `<span title="Hundetauglichkeit">${paws}</span>` : ''}
-          </div>
-          <div class="rk-card-tags">
-            ${isDiscover ? '' : privBadge}
-            ${diffLabel ? `<span class="rk-badge rk-badge--${r.schwierigkeit}">${diffLabel}</span>` : ''}
-            ${r.schatten        ? `<span class="rk-badge">${UI.icon('tree')} Schatten</span>`   : ''}
-            ${r.leine_empfohlen ? `<span class="rk-badge">${UI.icon('link')} Leine</span>`      : ''}
+          <div style="display:flex;flex-wrap:wrap;gap:5px;margin:var(--space-2) 0">
+            ${dist ? _pill(dist, '#f1f5f9','#475569','#e2e8f0') : ''}
+            ${dur  ? _pill(dur,  '#f1f5f9','#475569','#e2e8f0') : ''}
+            ${diffLabel ? _pill(diffLabel,
+                ({leicht:'#dcfce7',mittel:'#fef9c3',anspruchsvoll:'#fee2e2'})[r.schwierigkeit]||'#f1f5f9',
+                ({leicht:'#15803d',mittel:'#92400e',anspruchsvoll:'#991b1b'})[r.schwierigkeit]||'#475569',
+                ({leicht:'#bbf7d0',mittel:'#fde68a',anspruchsvoll:'#fecaca'})[r.schwierigkeit]||'#e2e8f0') : ''}
+            ${r.hunde_tauglichkeit ? _pill(HUNDE_TEXT[r.hunde_tauglichkeit]||'', '#fef3c7','#92400e','#fde68a') : ''}
+            ${!isDiscover && !r.is_public ? _pill('Privat','#dbeafe','#1d4ed8','#bfdbfe') : ''}
           </div>
           <div class="rk-card-footer">
             <div class="rk-stars">${_starsHTML(r.id, r.bewertung||0, r.anz_bewertungen||0)}</div>