UX: Route-Detail Pills text-only, keine Icons, Farben nach Bedeutung

backend/static/css/components.css

@@ -2203,6 +2203,21 @@ html.modal-open {
   background:    var(--c-surface-2);
   color:         var(--c-text-secondary);
 }
+
+/* Text-only Pills für Route-Detail */
+.rk-pill {
+  display:       inline-flex;
+  align-items:   center;
+  font-size:     var(--text-xs);
+  font-weight:   var(--weight-medium);
+  padding:       3px 10px;
+  border-radius: var(--radius-full);
+  white-space:   nowrap;
+}
+.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-badge--leicht       { background: #dcfce7; color: #15803d; }
 .rk-badge--mittel       { background: #fef9c3; color: #a16207; }
 .rk-badge--anspruchsvoll{ background: #fee2e2; color: #b91c1c; }

backend/static/js/app.js

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

backend/static/js/pages/routes.js

@@ -30,9 +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: 'Anspruchsvoll' };
-  const TERRAIN_LABEL    = { wald: '🌲 Wald', asphalt: '🛣️ Asphalt', wiese: '🌿 Wiese', mix: '🔀 Mix' };
+  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' };
 
   // POI-Typen entlang der Route — nur relevante/interessante Orte
   const NEARBY_TYPES = [
@@ -718,21 +723,18 @@ window.Page_routes = (() => {
            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-badge rk-badge--info">${UI.icon('map-trifold')} ${route.distanz_km.toFixed(2)} km</span>` : ''}
+        ${route.distanz_km ? `<span class="rk-pill rk-pill--neutral">${route.distanz_km.toFixed(2)} km</span>` : ''}
-        ${route.dauer_min  ? `<span class="rk-badge rk-badge--info">${UI.icon('timer')} ${_fmtDur(route.dauer_min)}</span>` : ''}
+        ${route.dauer_min  ? `<span class="rk-pill rk-pill--neutral">${_fmtDur(route.dauer_min)}</span>` : ''}
-        ${route.schwierigkeit ? `<span class="rk-badge rk-badge--${route.schwierigkeit}">${DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit}</span>` : ''}
+        ${route.schwierigkeit ? `<span class="rk-pill" style="${DIFF_COLOR[route.schwierigkeit]||''}">${DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit}</span>` : ''}
-        ${route.untergrund ? `<span class="rk-badge">${TERRAIN_LABEL[route.untergrund]||route.untergrund}</span>` : ''}
+        ${route.hunde_tauglichkeit ? `<span class="rk-pill rk-pill--dog">${HUNDE_TEXT[route.hunde_tauglichkeit]||route.hunde_tauglichkeit}</span>` : ''}
-        ${paws ? `<span class="rk-badge rk-badge--dog" title="Hundetauglichkeit">${paws}</span>` : ''}
-        ${route.schatten        ? `<span class="rk-badge">${UI.icon('tree')} Schatten</span>`         : ''}
-        ${route.leine_empfohlen ? `<span class="rk-badge">${UI.icon('link')} Leine empfohlen</span>` : ''}
         ${isOwn
           ? `<button type="button" id="rd-vis-pill"
-                     class="rk-badge ${route.is_public ? 'rk-badge--public' : 'rk-badge--private'}"
+                     class="rk-pill ${route.is_public ? 'rk-pill--public' : 'rk-pill--private'}"
                      style="border:none;cursor:pointer;font:inherit"
                      title="${route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen'}">
-               ${route.is_public ? UI.icon('lock-open')+' Öffentlich' : UI.icon('lock')+' Privat'}
+               ${route.is_public ? 'Öffentlich' : 'Privat'}
              </button>`
-          : (!route.is_public ? `<span class="rk-badge rk-badge--private">${UI.icon('lock')} Privat</span>` : '')
+          : (!route.is_public ? `<span class="rk-pill rk-pill--private">Privat</span>` : `<span class="rk-pill rk-pill--public">Öffentlich</span>`)
         }
       </div>
       ${route.beschreibung ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-3)">${UI.escape(route.beschreibung)}</p>` : ''}
@@ -823,10 +825,9 @@ window.Page_routes = (() => {
         await API.routes.update(route.id, { is_public: !route.is_public });
         route.is_public = !route.is_public;
         if (pill) {
-          pill.className = `rk-badge ${route.is_public ? 'rk-badge--public' : 'rk-badge--private'}`;
+          pill.className = `rk-pill ${route.is_public ? 'rk-pill--public' : 'rk-pill--private'}`;
-          pill.style.cssText = 'border:none;cursor:pointer;font:inherit';
+          pill.innerHTML = route.is_public ? 'Öffentlich' : 'Privat';
-          pill.innerHTML     = route.is_public ? UI.icon('lock-open')+' Öffentlich' : UI.icon('lock')+' Privat';
+          pill.title     = route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen';
-          pill.title         = route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen';
         }
         const r = _data.find(x => x.id === route.id);
         if (r) r.is_public = route.is_public;