From 54a6615ebbf388c0d40310cfa54c4dce114f9044 Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Sun, 19 Apr 2026 11:44:31 +0200
Subject: [PATCH] =?UTF-8?q?UX:=20Route-Pills=20kompakter,=20k=C3=BCrzere?=
 =?UTF-8?q?=20Texte,=20Rahmen=20sichtbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/css/components.css | 16 +++++++++-------
 backend/static/js/app.js          |  2 +-
 backend/static/js/pages/routes.js | 16 ++++++++--------
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/backend/static/css/components.css b/backend/static/css/components.css
index 4bd5839..96021eb 100644
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@@ -2208,16 +2208,18 @@ html.modal-open {
 .rk-pill {
   display:       inline-flex;
   align-items:   center;
-  font-size:     var(--text-xs);
-  font-weight:   var(--weight-medium);
-  padding:       3px 10px;
+  font-size:     10px;
+  font-weight:   var(--weight-semibold);
+  padding:       2px 8px;
   border-radius: var(--radius-full);
   white-space:   nowrap;
+  border:        1px solid transparent;
+  line-height:   1.4;
 }
-.rk-pill--neutral { background: var(--c-surface-2);  color: var(--c-text-secondary); }
-.rk-pill--dog     { background: #fef3c7;              color: #92400e; }
-.rk-pill--private { background: #dbeafe;              color: #1d4ed8; }
-.rk-pill--public  { background: #dcfce7;              color: #15803d; }
+.rk-pill--neutral { background: var(--c-surface-2);  color: var(--c-text-secondary); border-color: var(--c-border); }
+.rk-pill--dog     { background: #fef3c7;              color: #92400e;  border-color: #fde68a; }
+.rk-pill--private { background: #dbeafe;              color: #1d4ed8;  border-color: #bfdbfe; }
+.rk-pill--public  { background: #dcfce7;              color: #15803d;  border-color: #bbf7d0; }
 .rk-badge--leicht       { background: #dcfce7; color: #15803d; }
 .rk-badge--mittel       { background: #fef9c3; color: #a16207; }
 .rk-badge--anspruchsvoll{ background: #fee2e2; color: #b91c1c; }
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 21b43eb..3dbb5ac 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 = '230'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '231'; // ← 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 85624e0..2b04e32 100644
--- a/backend/static/js/pages/routes.js
+++ b/backend/static/js/pages/routes.js
@@ -30,14 +30,14 @@ window.Page_routes = (() => {
 
   // Mini-Karten auf den Route-Cards
   let _miniMaps      = new Map(); // routeId → L.map
-  const DIFFICULTY_LABEL = { leicht: 'Leicht', mittel: 'Mittel', anspruchsvoll: 'Anspruchsvoll' };
+  const DIFFICULTY_LABEL = { leicht: 'Leicht', mittel: 'Mittel', anspruchsvoll: 'Schwer' };
   const TERRAIN_LABEL    = { wald: 'Wald', asphalt: 'Asphalt', wiese: 'Wiese', mix: 'Mix' };
   const HUNDE_LABEL      = { eingeschränkt: '🐾', gut: '🐾🐾', sehr_gut: '🐾🐾🐾', premium: '🐾🐾🐾🐾' };
-  const HUNDE_TEXT       = { eingeschränkt: 'Eingeschränkt', gut: 'Hundefreundlich',
-                              sehr_gut: 'Sehr hundefreundlich', premium: 'Hundefreundlich' };
-  const DIFF_COLOR       = { leicht: 'background:#dcfce7;color:#15803d',
-                              mittel: 'background:#fef9c3;color:#92400e',
-                              anspruchsvoll: 'background:#fee2e2;color:#991b1b' };
+  const HUNDE_TEXT       = { eingeschränkt: 'Mit Leine', gut: 'Hundefrdl.',
+                              sehr_gut: 'Hunde top', premium: 'Hundefrdl.' };
+  const DIFF_COLOR       = { leicht: 'background:#dcfce7;color:#15803d;border-color:#bbf7d0',
+                              mittel: 'background:#fef9c3;color:#92400e;border-color:#fde68a',
+                              anspruchsvoll: 'background:#fee2e2;color:#991b1b;border-color:#fecaca' };
 
   // POI-Typen entlang der Route — nur relevante/interessante Orte
   const NEARBY_TYPES = [
@@ -722,8 +722,8 @@ window.Page_routes = (() => {
       <div id="rk-detail-map" style="height:200px;border-radius:var(--radius-md);
            margin-bottom:var(--space-3);background:var(--c-surface-2)"></div>
       ${photoGallery}
-      <div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0">
-        ${route.distanz_km ? `<span class="rk-pill rk-pill--neutral">${route.distanz_km.toFixed(2)} km</span>` : ''}
+      <div style="display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-3) 0">
+        ${route.distanz_km ? `<span class="rk-pill rk-pill--neutral">${route.distanz_km.toFixed(1)} km</span>` : ''}
         ${route.dauer_min  ? `<span class="rk-pill rk-pill--neutral">${_fmtDur(route.dauer_min)}</span>` : ''}
         ${route.schwierigkeit ? `<span class="rk-pill" style="${DIFF_COLOR[route.schwierigkeit]||''}">${DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit}</span>` : ''}
         ${route.hunde_tauglichkeit ? `<span class="rk-pill rk-pill--dog">${HUNDE_TEXT[route.hunde_tauglichkeit]||route.hunde_tauglichkeit}</span>` : ''}