/* ============================================================
   fahrrad.css – grafisches Redesign des Fahrrad-Tourplaners
   ============================================================
   NUR für /Fahrrad/ geladen (siehe Fahrrad/index.html) und komplett
   unter .app-fahrrad verschachtelt. style.css bleibt unverändert und
   bedient weiterhin unangetastet den Streckenplaner (/Auto/), der sich
   css/style.css + js/app.js + js/map.js + js/navi.js mit dieser App teilt.
   Diese Datei überschreibt/ergänzt nur die OPTIK (Farben, Radien, Schatten,
   Typografie, Icons) – Logik/IDs/Datenfluss bleiben, wie sie sind.

   Referenz: Design-Canvas-Mockup (9 Artboards), siehe
   project_routenplaner_fahrrad_redesign_umsetzung.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

.app-fahrrad {
  --bg:        #f4f6f8;
  --panel:     #ffffff;
  --surface:   #ffffff;
  --sunken:    #eef2f6;
  --hover:     #eaf3ee;
  --glass:     rgba(255,255,255,.92);
  --ink:       #1c2733;
  --ink-soft:  #5b6b7b;
  --line:      #e2e8ee;
  --brand:     #1e824c;
  --brand-dk:  #166138;
  --brand-tint: #e6f2ea;
  --accent:    #2d7dd2;
  --accent-tint: #e5eef9;
  --danger:    #c0433f;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 8px 18px -10px rgba(28,39,51,.22);
  --shadow-md: 0 14px 30px -14px rgba(28,39,51,.35);
  --shadow-cta: 0 14px 26px -10px rgba(30,130,76,.5);
  --glow: 0 0 0 1px var(--brand), 0 6px 14px -6px rgba(30,130,76,.45);
  --toast-bg:  #1c2733;
  --toast-ink: #ffffff;
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}
/* map.js setzt data-theme auf <html> (document.documentElement), NICHT auf
   .app-fahrrad selbst - der Selektor muss darum von dort absteigen, sonst
   gewinnt der obige Hell-Block (er trifft .app-fahrrad direkt) immer, egal
   was auf <html> steht: eine direkt zutreffende Regel schlägt jede geerbte,
   unabhängig von deren Spezifität. */
html[data-theme="dark"] .app-fahrrad {
  --bg:      #0d1117;
  --panel:   #131a22;
  --surface: #161e27;
  --sunken:  #1e2832;
  --hover:   #1c2c24;
  --glass:   rgba(19,26,34,.92);
  --ink:     #e6edf3;
  --ink-soft:#93a3b3;
  --line:    #2a3641;
  --brand:   #2ea365;
  --brand-dk:#258452;
  --brand-tint: #16321f;
  --accent:  #3f8fd4;
  --accent-tint: #17293b;
  --danger:  #e5706c;
  --toast-bg:  #e8eef5;
  --toast-ink: #0d1117;
}

.app-fahrrad, .app-fahrrad input, .app-fahrrad select, .app-fahrrad button, .app-fahrrad textarea {
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}
.app-fahrrad h1,
.app-fahrrad .section-title,
.app-fahrrad .card-title,
.app-fahrrad .res-main,
.app-fahrrad .rec-stats,
.app-fahrrad .nav-meter,
.app-fahrrad .meter2,
.app-fahrrad .arrival-title,
.app-fahrrad .result-main {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
}

/* ---------- Grundfläche ---------- */
.app-fahrrad { background: var(--bg); }
.app-fahrrad .sidebar { background: var(--panel); border-right: 1px solid var(--line); }
.app-fahrrad #map { background: var(--sunken); }

/* Kopfzeile: dezenter, folgt jetzt derselben Formsprache statt Vollfarbe */
.app-fahrrad .topbar.bike {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
.app-fahrrad .topbar .logo { filter: none; }
.app-fahrrad .topbar h1 { font-family: "Bricolage Grotesque"; font-weight: 700; letter-spacing: -.2px; }

/* ---------- Reiterleiste (mobil): wird zur Pillen-Tabbar aus dem Mockup ---------- */
.app-fahrrad .mobile-tabs {
  background: var(--surface);
  border-bottom: none;
  padding: 10px 14px 8px;
}
.app-fahrrad .mtab {
  border-radius: var(--radius-pill);
  border-bottom: none !important;
  font-weight: 600;
  background: transparent;
  color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
/* Suchen/Einstellungen/Karte zeigen jetzt SVG statt Emoji (Fahrrad/index.html)
   - Größe folgt der Button-font-size, kein zusätzlicher Wert zu pflegen. */
.app-fahrrad .mtab-ico { display: inline-flex; }
.app-fahrrad .mtab-ico svg { width: 1em; height: 1em; }
.app-fahrrad .mtab.active {
  background: var(--sunken);
  color: var(--brand-dk);
}
/* Pillen-Optik braucht einen gemeinsamen "Track" hinter allen drei Reitern */
.app-fahrrad .mobile-tabs { position: relative; }
.app-fahrrad .mobile-tabs::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 10px; bottom: 8px;
  background: var(--sunken);
  border-radius: var(--radius-pill);
  z-index: 0;
}
.app-fahrrad .mtab { position: relative; z-index: 1; }
.app-fahrrad .mtab.active { box-shadow: var(--shadow-sm); }

/* ============================================================
   1. EINSTELLUNGEN – Karten statt loser Blöcke, Icon-Tiles statt Emoji-Grid
   ============================================================ */
.app-fahrrad .panel-settings {
  border-top: none;
  margin-top: 18px;
  padding-top: 0;
}
/* Jede .section-title + die Elemente bis zum nächsten .section-title bilden
   optisch eine Karte. Statt das Markup umzubauen, bekommt section-title den
   Kartenkopf und die Karte wird über padding/Radius auf dem umschließenden
   Bereich simuliert – robuster: section-title selbst plus Folgeinhalt in
   einen sichtbaren Card-Rahmen zu zwingen bräuchte neues Markup. Da die
   bestehende Struktur linear ist (kein Wrapper je Abschnitt), reicht ein
   Karten-Look direkt auf .section-title + Abstand nach unten. */
.app-fahrrad .panel-settings .section-title,
.app-fahrrad .panel-search .section-title {
  font-family: "Bricolage Grotesque";
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.1px;
  text-transform: none;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 14px 16px 10px;
  margin: 0 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-fahrrad .panel-settings .section-title::before,
.app-fahrrad .panel-search .section-title::before {
  content: "";
  width: 26px; height: 26px; flex: 0 0 auto;
  /* War bisher NUR die getönte Fläche ohne jedes Icon - "Freie Fahrt" &
     Co. wirkten dadurch wie leere Knöpfe. Jetzt wie die übrige Icon-
     Bibliothek dieser Datei (layer-btn, preset-btn, chk) als Maske über
     background-color, pro Abschnitt per data-icon (siehe HTML) gewählt. */
  background-color: var(--brand-dk);
  -webkit-mask-size: 62%; mask-size: 62%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.app-fahrrad .section-title[data-icon="freefahrt"]::before  { -webkit-mask-image: var(--ic-record);   mask-image: var(--ic-record); }
.app-fahrrad .section-title[data-icon="adresse"]::before     { -webkit-mask-image: var(--ic-pin);      mask-image: var(--ic-pin); }
.app-fahrrad .section-title[data-icon="wegpunkte"]::before   { -webkit-mask-image: var(--ic-flag);     mask-image: var(--ic-flag); }
.app-fahrrad .section-title[data-icon="route"]::before       { -webkit-mask-image: var(--ic-route);    mask-image: var(--ic-route); }
.app-fahrrad .section-title[data-icon="kartenanzeige"]::before { -webkit-mask-image: var(--ic-mapfold); mask-image: var(--ic-mapfold); }
.app-fahrrad .section-title[data-icon="kartenlayer"]::before { -webkit-mask-image: var(--ic-layers);   mask-image: var(--ic-layers); }
.app-fahrrad .section-title[data-icon="routeneinstellungen"]::before { -webkit-mask-image: var(--ic-sliders); mask-image: var(--ic-sliders); }
.app-fahrrad .section-title[data-icon="sprachausgabe"]::before { -webkit-mask-image: var(--ic-speaker); mask-image: var(--ic-speaker); }
/* Der Rest des Abschnitts (bis zum nächsten Titel) trägt den Kartenkörper:
   gleicher Hintergrund/Schatten wie der Kopf, aber ohne oberen Radius, und
   schließt den optischen Block nach unten mit Radius + Innenabstand ab. */
.app-fahrrad .panel-settings > *:not(.section-title):not(.app-switch):not(.btn),
.app-fahrrad .panel-search > *:not(.section-title):not(.app-switch):not(.btn) {
  background: var(--surface);
  padding-left: 16px;
  padding-right: 16px;
}
.app-fahrrad .panel-settings .section-title + *,
.app-fahrrad .panel-search .section-title + * {
  padding-top: 10px;
}
/* letztes Element vor dem nächsten Titel bekommt den Kartenabschluss */
.app-fahrrad .panel-settings .section-title:not(:first-of-type),
.app-fahrrad .panel-search .section-title:not(:first-of-type) {
  margin-top: 14px;
}
.app-fahrrad #hideDrizzle ~ .hint,
.app-fahrrad .panel-settings .hint:last-of-type,
.app-fahrrad #naviVoiceHint {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding-bottom: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.app-fahrrad .panel-settings .route-opts,
.app-fahrrad .panel-settings #optNaviVoice {
  box-shadow: var(--shadow-sm);
  padding-bottom: 14px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-bottom: 14px;
}
.app-fahrrad .panel-settings .layers { box-shadow: none; }

.app-fahrrad .hint {
  background: var(--brand-tint);
  border-left: none;
  color: var(--ink-soft);
  border-radius: var(--radius-md);
}

/* ---------- Icon-Tiles statt Layer-Buttons ---------- */
.app-fahrrad .layers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.app-fahrrad .layer-btn {
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  justify-content: flex-start;
  gap: 9px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.app-fahrrad .layer-btn::before {
  content: "";
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 9px;
  background-color: var(--sunken);
  -webkit-mask-size: 60%; mask-size: 60%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.app-fahrrad .layer-btn.active {
  background: var(--brand-tint);
  color: var(--brand-dk);
  border-color: var(--brand);
  box-shadow: var(--glow);
}
.app-fahrrad .layer-btn.active::before { background-color: var(--brand); }
/* Diagnose-Kachel ("Datenquellen") bleibt im Code für Debug-Zwecke nutzbar,
   ist aber kein normaler Layer-Knopf mehr – aus dem sichtbaren Raster genommen. */
.app-fahrrad #layerSourceDebug { display: none; }
/* #layerRadar ist der fünfte (letzte, ungerade) Knopf im 2-spaltigen Raster
   und stand deshalb allein in einer Zeile neben einer leeren Lücke - über
   die volle Breite ist der ohnehin recht lange Beschriftungstext auch
   besser lesbar. */
.app-fahrrad #layerRadar { grid-column: 1 / -1; }

.app-fahrrad #layerCharging::before { -webkit-mask-image: var(--ic-bolt); mask-image: var(--ic-bolt); }
.app-fahrrad #layerRest::before     { -webkit-mask-image: var(--ic-shelter); mask-image: var(--ic-shelter); }
.app-fahrrad #layerBiz::before      { -webkit-mask-image: var(--ic-shop); mask-image: var(--ic-shop); }
.app-fahrrad #layerTrails::before   { -webkit-mask-image: var(--ic-bike); mask-image: var(--ic-bike); }
.app-fahrrad #layerRadar::before    { -webkit-mask-image: var(--ic-radar); mask-image: var(--ic-radar); }
.app-fahrrad #layerAtm::before      { -webkit-mask-image: var(--ic-atm); mask-image: var(--ic-atm); }
/* E-Bike-Laden bewusst dauerhaft gelb (Blitz-Farbe) statt ink-soft/brand wie
   die übrigen Kacheln - genau wie im Mockup (style="fill:#eba300"). */
.app-fahrrad #layerCharging::before,
.app-fahrrad #layerCharging.active::before { background-color: #eba300; }

/* ---------- SVG-Icon-Bibliothek als CSS-Variablen (mask-image) ---------- */
.app-fahrrad {
  --ic-bolt:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");
  --ic-shelter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9 12 3l8 6'/%3E%3Cpath d='M5 9v2M19 9v2'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cpath d='M6 15v3M18 15v3'/%3E%3C/svg%3E");
  --ic-shop:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1-5h14l1 5M5 9v10h14V9M4 9a2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  --ic-bike:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18.5' cy='17.5' r='3.5'/%3E%3Ccircle cx='5.5' cy='17.5' r='3.5'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Cpath d='M12 17.5V14l-3-3 4-3 2 3h2'/%3E%3C/svg%3E");
  --ic-radar:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15a4 4 0 1 1 1-7.9A5 5 0 0 1 18 9a3.5 3.5 0 0 1-1 6.9'/%3E%3Cline x1='8' y1='18' x2='8' y2='21'/%3E%3Cline x1='12' y1='18' x2='12' y2='21'/%3E%3Cline x1='16' y1='18' x2='16' y2='21'/%3E%3C/svg%3E");
  --ic-mug:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3Cpath d='M16 12h2a2 2 0 0 1 0 4h-2'/%3E%3Cpath d='M8 7c0-1 1-1 1-2s-1-1-1-2'/%3E%3Cpath d='M12 7c0-1 1-1 1-2s-1-1-1-2'/%3E%3C/svg%3E");
  --ic-sun:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2 2M17 17l2 2M4.9 19.1l2-2M17 7l2-2'/%3E%3C/svg%3E");
  --ic-moon:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z'/%3E%3C/svg%3E");
  --ic-cyclosm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 10 6l4 8 3-5 3 11z'/%3E%3C/svg%3E");
  --ic-ebike:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16.5' cy='18' r='3'/%3E%3Ccircle cx='5.5' cy='18' r='3'/%3E%3Ccircle cx='13' cy='7' r='1'/%3E%3Cpath d='M10.5 18v-3l-2.5-2.5 3.5-2.5 1.5 2.5h1.5'/%3E%3C/svg%3E");
  --ic-tired:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 13 4 18h6z'/%3E%3Cline x1='7' y1='18' x2='7' y2='21'/%3E%3Cpath d='M16 9 12 17h8z'/%3E%3Cline x1='16' y1='17' x2='16' y2='21'/%3E%3C/svg%3E");
  --ic-speed:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16a8 8 0 0 1 16 0'/%3E%3Cline x1='12' y1='16' x2='16' y2='11'/%3E%3C/svg%3E");
  --ic-shortest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
  --ic-nature:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 5 14h8z'/%3E%3Cline x1='9' y1='14' x2='9' y2='16'/%3E%3Cpath d='M2 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0'/%3E%3C/svg%3E");
  --ic-triangle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20L12 3z'/%3E%3Cline x1='12' y1='9' x2='12' y2='14'/%3E%3C/svg%3E");
  /* Icons für die Abschnittsköpfe in der Seitenleiste (section-title::before
     oben) - vorher blieben diese Felder komplett leer. */
  --ic-record:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3C/svg%3E");
  --ic-pin:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.7 7-12a7 7 0 1 0-14 0c0 5.3 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.3'/%3E%3C/svg%3E");
  --ic-flag:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 3.5L16 11H5'/%3E%3C/svg%3E");
  --ic-route:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.2'/%3E%3Ccircle cx='18' cy='18' r='2.2'/%3E%3Cpath d='M8 6h6a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4h-6'/%3E%3C/svg%3E");
  --ic-mapfold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2z'/%3E%3Cpath d='M9 3v16M15 5v16'/%3E%3C/svg%3E");
  --ic-layers:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5z'/%3E%3Cpath d='M3 14l9 5 9-5'/%3E%3C/svg%3E");
  --ic-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='8' cy='18' r='2'/%3E%3C/svg%3E");
  --ic-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9v6h4l5 4V5l-5 4z'/%3E%3Cpath d='M17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E");
  --ic-atm:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='6' y1='15' x2='10' y2='15'/%3E%3C/svg%3E");
}

/* ---------- Segmentierte Kontrolle statt <select> (Hintergrundkarte / Radtyp / Radprofil) ---------- */
.app-fahrrad .rp-seg3 { display: flex; gap: 6px; margin: 4px 0 10px; }
.app-fahrrad .rp-seg-opt {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
}
.app-fahrrad .rp-seg-opt .ic { width: 18px; height: 18px; background: var(--ink-soft); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.app-fahrrad .rp-seg-opt.on {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-dk);
  box-shadow: 0 4px 10px -6px rgba(30,130,76,.5);
}
.app-fahrrad .rp-seg-opt.on .ic { background: var(--brand-dk); }
/* Das echte <select>/native Element bleibt die Datenquelle für app.js,
   verschwindet aber optisch – so bleibt jede bestehende change-Logik gültig. */
.app-fahrrad .opt-row select.rp-seg-source { display: none; }
.app-fahrrad .opt-row:has(select.rp-seg-source) { flex-direction: column; align-items: stretch; }
.app-fahrrad .opt-row:has(select.rp-seg-source) > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); margin-bottom: 2px; }

/* ---------- Switches statt Checkboxen ---------- */
.app-fahrrad .chk input[type="checkbox"],
.app-fahrrad .opt-row.switch input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--sunken);
  border: 1px solid var(--line);
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  accent-color: unset;
  margin: 0;
}
.app-fahrrad .chk input[type="checkbox"]::after,
.app-fahrrad .opt-row.switch input[type="checkbox"]::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .15s;
}
.app-fahrrad .chk input[type="checkbox"]:checked,
.app-fahrrad .opt-row.switch input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.app-fahrrad .chk input[type="checkbox"]:checked::after,
.app-fahrrad .opt-row.switch input[type="checkbox"]:checked::after { left: 18px; }
.app-fahrrad .chk { gap: 10px; font-size: 13px; }
.app-fahrrad .chk.sub { margin-left: 20px; padding-left: 12px; border-left: 2px solid var(--line); }
.app-fahrrad .chk-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 10px; }
.app-fahrrad .chk-grid .chk {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 9px; background: var(--surface);
}

/* Rad-Präferenzen-Chips (Rad-/Wanderrouten, Städte umfahren, Naturnah, Nur
   geteert, Fähren, Engpässe meiden) bekommen je ein Icon vor den Text. */
.app-fahrrad #optStickRoutes { --chk-ic: var(--ic-bike); }
.app-fahrrad #optBypassTown  { --chk-ic: var(--ic-shortest); }
.app-fahrrad #optNature      { --chk-ic: var(--ic-nature); }
.app-fahrrad #optPaved       { --chk-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='20' x2='20' y2='4'/%3E%3Cline x1='9' y1='20' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='15' y2='4'/%3E%3C/svg%3E"); }
.app-fahrrad #optFerries     { --chk-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l2-6h14l2 6'/%3E%3Cpath d='M6 11V5h6l3 6'/%3E%3Cpath d='M2 20c2 1 4 1 6 0s4-1 6 0 4 1 6 0'/%3E%3C/svg%3E"); }
.app-fahrrad #optAvoidObstacles { --chk-ic: var(--ic-triangle); }
.app-fahrrad .chk-grid .chk[style*="display"],
.app-fahrrad .chk-grid .chk {
  position: relative;
}
.app-fahrrad #optStickRoutes::before,
.app-fahrrad #optBypassTown::before,
.app-fahrrad #optNature::before,
.app-fahrrad #optPaved::before,
.app-fahrrad #optFerries::before,
.app-fahrrad #optAvoidObstacles::before {
  content: "";
  width: 15px; height: 15px; flex: 0 0 auto;
  background: var(--ink-soft);
  -webkit-mask: var(--chk-ic) center/contain no-repeat;
  mask: var(--chk-ic) center/contain no-repeat;
  order: -1;
}
.app-fahrrad #optAvoidObstacles::before { background: #c2410c; }
/* Icon zuerst, Text in der Mitte, Schalter am Ende - wie die Chip-Zeile im
   Mockup. Das Checkbox-Element selbst IST der Schalter (siehe oben "Switches
   statt Checkboxen"); es steht im HTML als erstes Kind vor dem Textknoten,
   wandert hier per flex-order ans Zeilenende. Der reine Text dazwischen ist
   ein anonymer Flex-Item mit order:0 (Default) und braucht keine eigene Regel. */
.app-fahrrad #optStickRoutes input,
.app-fahrrad #optBypassTown input,
.app-fahrrad #optNature input,
.app-fahrrad #optPaved input,
.app-fahrrad #optFerries input,
.app-fahrrad #optAvoidObstacles input {
  order: 1;
  margin-left: auto;
}

/* ---------- Sprachausgabe-Karte ---------- */
.app-fahrrad .voice-row select { border-radius: var(--radius-pill); }
.app-fahrrad .voice-row .sri-btn {
  border-radius: var(--radius-pill);
  background: var(--brand-tint); color: var(--brand-dk); border: none;
}

/* ============================================================
   2. SUCHEN / ROUTE
   ============================================================ */
.app-fahrrad .btn {
  border-radius: var(--radius-pill);
  font-weight: 700;
  background: linear-gradient(180deg, #22935a, var(--brand-dk));
  box-shadow: var(--shadow-cta);
  transition: transform .1s, box-shadow .15s;
}
.app-fahrrad .btn:hover { background: linear-gradient(180deg, #24a061, var(--brand-dk)); }
.app-fahrrad .btn:active { transform: scale(.98); }
.app-fahrrad .btn.secondary {
  background: var(--sunken); color: var(--ink); box-shadow: none; border: 1px solid var(--line);
}
.app-fahrrad .btn.wide { padding: 14px; font-size: 14.5px; }
.app-fahrrad .sri-btn.danger,
.app-fahrrad .btn.wide.sri-btn.danger {
  background: linear-gradient(180deg, #e5706c, var(--danger));
  color: #fff; border-radius: var(--radius-pill); box-shadow: 0 12px 22px -10px rgba(197,66,61,.5);
}

.app-fahrrad .nav-start.nav-stop-btn { background: linear-gradient(180deg, #e5706c, var(--danger)); }
.app-fahrrad .nav-start:not(.nav-stop-btn) { background: linear-gradient(180deg, #14a89a, #0f766e); }

/* Adresseingabe: pillenförmige Felder wie im Mockup */
.app-fahrrad input[type="text"] {
  border-radius: var(--radius-pill);
  background: var(--sunken);
  border: 1px solid var(--line);
  padding: 11px 16px;
}
.app-fahrrad input[type="text"]:focus { border-color: var(--brand); background: var(--surface); }

/* PLZ + Ort-Zeile: geführtes Feld, matcht den Mockup-Aufbau plz-row/plz-field/plz-ort */
.app-fahrrad .addr-plz-row { gap: 10px; }
.app-fahrrad #addrPlz {
  width: 96px; min-width: 96px; text-align: center; font-weight: 700; letter-spacing: .5px;
}
/* "(optional)" stand bisher als Platzhaltertext IM 96px-Feld - bei fett+
   letter-spacing+zentriert wurde das Wort selbst abgeschnitten, nicht nur
   knapp. Jetzt eigener Hinweistext daneben, verschwindet sobald der
   Orts-Chip (Suchergebnis) den Platz braucht. */
.app-fahrrad .plz-optional-hint {
  color: var(--ink-soft); font-size: 12px; white-space: nowrap; flex: 0 0 auto;
}
.app-fahrrad .addr-plz-row:has(.ort-chip:not([hidden])) .plz-optional-hint { display: none; }
.app-fahrrad .ort-chip {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  padding: 10px 14px;
  font-weight: 700; font-size: 13px;
  flex: 1;
}
.app-fahrrad .ort-chip.suggest { background: var(--surface); border-color: var(--brand); color: var(--brand-dk); }
.app-fahrrad .ort-chip.confirmed {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: var(--glow);
}
.app-fahrrad .address-input .row:not(.addr-plz-row) {
  border: 1px solid var(--line); background: var(--sunken);
  border-radius: var(--radius-pill); padding: 3px 14px; align-items: center;
}
.app-fahrrad .address-input .row:not(.addr-plz-row) input[type="text"] {
  background: transparent; border: none; padding: 8px 4px;
}
.app-fahrrad #addrBtn {
  border-radius: var(--radius-pill); padding: 9px 14px; font-size: 13.5px;
}

.app-fahrrad .suggestions { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); border-color: var(--line); }

/* Wegpunkte */
.app-fahrrad .waypoints li { border-bottom-color: var(--line); }
.app-fahrrad .wp-num { box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.app-fahrrad .empty {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 22px 16px;
  margin-top: 6px;
}
.app-fahrrad .counter {
  display: inline-flex; align-items: center;
  background: var(--sunken); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: var(--radius-pill);
}

/* Schnellwahl-Presets als Pillen mit Icon */
.app-fahrrad .preset-row { gap: 7px; }
.app-fahrrad .preset-btn {
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.app-fahrrad .preset-btn::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  background: currentColor; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
}
.app-fahrrad .preset-btn[data-preset="ruhig"]::before      { -webkit-mask-image: var(--ic-tired); mask-image: var(--ic-tired); }
.app-fahrrad .preset-btn[data-preset="landschaft"]::before { -webkit-mask-image: var(--ic-nature); mask-image: var(--ic-nature); }
.app-fahrrad .preset-btn[data-preset="direkt"]::before     { -webkit-mask-image: var(--ic-shortest); mask-image: var(--ic-shortest); }
.app-fahrrad .preset-btn[data-preset="sport"]::before      { -webkit-mask-image: var(--ic-speed); mask-image: var(--ic-speed); }
.app-fahrrad .preset-btn.active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(30,130,76,.6);
}

/* Rundtour-Schalter, Freie-Fahrt-CTA */
.app-fahrrad .opt-row.switch { padding: 6px 0 14px; }
.app-fahrrad #recordBtn { display: flex; align-items: center; justify-content: center; gap: 9px; }

/* ---------- Ergebnis-Karte ---------- */
.app-fahrrad .result {
  background: var(--brand-tint);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}
.app-fahrrad .res-main { font-size: 26px; font-weight: 800; color: var(--brand-dk); }
.app-fahrrad .res-sub { color: var(--ink-soft); }
.app-fahrrad .res-stau {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fef9ec; border: 1px solid #f5dfa0; color: #92610b;
  border-radius: var(--radius-pill); padding: 5px 11px; font-weight: 700;
}
.app-fahrrad .res-ruhe .ruhe-bar { border-radius: var(--radius-pill); }
.app-fahrrad .legend { background: var(--surface); border-radius: var(--radius-md); padding: 10px 12px; box-shadow: var(--shadow-sm); }

/* ---------- Route speichern / Meine Routen ---------- */
.app-fahrrad .save-route-row,
.app-fahrrad #myRoutesSection {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 14px 16px; margin-bottom: 14px;
}
.app-fahrrad .save-form input[type="text"],
.app-fahrrad #recordName,
.app-fahrrad #saveRouteName {
  border-radius: var(--radius-pill); background: var(--sunken); border: 1px solid var(--line);
}
.app-fahrrad .save-form .btn { border-radius: var(--radius-pill); }
.app-fahrrad .save-success {
  background: var(--brand-tint); color: var(--brand-dk);
  border-radius: var(--radius-md); display: flex; align-items: center; gap: 8px;
}
.app-fahrrad .save-success::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background: var(--brand-dk);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.app-fahrrad .section-title.clickable {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.app-fahrrad .saved-routes-list { border-radius: var(--radius-md); overflow: hidden; }
.app-fahrrad .sri-btn { border-radius: var(--radius-pill); }

/* Track-Info (aufgezeichnete Fahrt ansehen/kürzen) */
.app-fahrrad .track-info-row {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: none;
}

/* App-Wechsel-Link unten */
.app-fahrrad .app-switch {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  border-top: none; padding: 13px 15px; font-weight: 700; color: var(--accent);
  display: flex; align-items: center; gap: 10px;
}
.app-fahrrad .app-switch::before {
  content: ""; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7dd2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='13' width='18' height='5' rx='2'/%3E%3Cpath d='M6.5 13 8 8h8l1.5 5'/%3E%3Ccircle cx='7.5' cy='18' r='1.8'/%3E%3Ccircle cx='16.5' cy='18' r='1.8'/%3E%3C/svg%3E") center/18px no-repeat;
}

/* ============================================================
   3. KARTE – Wetter+Radar-Pille, 3D/Theme/Pitch-Cluster, Melde-Leiste
   ============================================================ */
.app-fahrrad .maplibregl-ctrl-top-left,
.app-fahrrad .maplibregl-ctrl-top-right {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.app-fahrrad .maplibregl-ctrl-top-right { align-items: center; }
.app-fahrrad .maplibregl-ctrl.maplibregl-ctrl-group {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  border: none !important;
  background: var(--surface);
  margin: 0 !important;
}
/* Der Neigungsregler sitzt in seiner eigenen maplibregl-ctrl-group (siehe
   navi.js addPitchControl) - GENAU dieser Wrapper hat das overflow:hidden
   von oben erneut geklemmt, nachdem es schon von .ctrl-pitch selbst entfernt
   wurde (Commit 12cd36e): .ctrl-pitch-thumb ragt gewollt über bottom:0/100%
   hinaus, um sich auf der Wertlinie zu zentrieren. Die abgerundeten Ecken
   kommen hier ohnehin schon von .ctrl-pitch selbst (eigener Hintergrund +
   border-radius), overflow:hidden auf dem Wrapper ist für diese eine Gruppe
   also nur schädlich, nicht nötig. */
.app-fahrrad .maplibregl-ctrl-group:has(.ctrl-pitch) {
  overflow: visible;
}
.app-fahrrad .maplibregl-ctrl-group button { background: var(--surface); }
.app-fahrrad .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }

/* Wetter- und Regenradar-Kopfzeile verschmelzen optisch zu EINER Glaspille,
   ohne dass map.js zwei getrennte MapLibre-Controls anders bauen müsste –
   beide landen ohnehin direkt nacheinander im selben top-left-Container. */
.app-fahrrad .ctrl-weather-badge {
  background: var(--glass);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.app-fahrrad .ctrl-radar-badge {
  background: var(--glass);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 5px 8px;
  gap: 4px;
}
.app-fahrrad .ctrl-weather-badge:has(+ .ctrl-radar-badge:not([hidden])) {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: none;
  padding-bottom: 6px;
}
.app-fahrrad .ctrl-radar-badge:not([hidden]) {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-top: -8px;
  padding-top: 6px;
  box-shadow: var(--shadow-sm);
}
.app-fahrrad .ctrl-weather-badge:has(+ .ctrl-radar-badge:not([hidden]))::after {
  content: ""; display: block; height: 1px; background: var(--line); margin: 6px -12px -1px;
}
.app-fahrrad .ctrl-radar-badge .icon-btn {
  width: 26px; height: 26px; border-radius: 8px; color: var(--ink-soft);
}
.app-fahrrad .ctrl-radar-badge .icon-btn.active,
.app-fahrrad .ctrl-radar-badge .icon-btn#radarPlay {
  background: var(--brand); color: #fff;
}
.app-fahrrad .radar-time { font-weight: 700; }

/* Melde-Button (Hindernisse) bleibt eigenständig, folgt aber derselben Optik.
   Größe bewusst über die geerbten 29/30 px hinaus angehoben: neben den
   46 px großen "Punkt melden"-Tasten wirkte dieser einzelne Knopf winzig,
   und 30 px reißt außerdem die 44-px-Mindestgröße für Fingerbedienung. */
.app-fahrrad .ctrl-report-badge .icon-btn,
.app-fahrrad .ctrl-obstacle-badge .icon-btn {
  background: var(--glass); backdrop-filter: blur(6px); border: none;
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  width: 44px; height: 44px; font-size: 21px;
}
.app-fahrrad .report-panel { background: var(--glass); backdrop-filter: blur(6px); border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.app-fahrrad .report-btn { border-radius: var(--radius-sm); }

/* 3D / Hell-Dunkel / CyclOSM / Pitch-Regler – Zylinder aus dem Mockup */
.app-fahrrad .ctrl-3d,
.app-fahrrad .ctrl-theme { background: var(--surface); color: var(--ink); }
.app-fahrrad .ctrl-3d.active { background: var(--brand); color: #fff; }
.app-fahrrad .ctrl-pitch {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface);
  /* Kein overflow:hidden hier (siehe .maplibregl-ctrl-group:has(.ctrl-pitch)
     weiter unten) - der Zeiger-Punkt bewegt sich per JS (map.js paint())
     ohnehin schon eingerückt um seinen eigenen Radius, braucht also kein
     Verstecken der Ränder mehr. Feld selbst deutlich höher als im Original
     (90px) - bei 90px lag der Punkt an den Enden zu dicht an der gerundeten
     Kante, wirkte trotz korrekter Einrückung wie überlappend. */
  width: 32px; height: 150px;
}
.app-fahrrad .ctrl-pitch-fill { background: var(--brand); }
.app-fahrrad .ctrl-pitch-thumb { border-color: var(--brand); }

/* ---------- Schnellerfassung: Melde-Leiste ---------- */
.app-fahrrad .qp-title {
  background: var(--glass); backdrop-filter: blur(6px);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
  font-weight: 700; color: var(--ink-soft);
}
.app-fahrrad .qp-mode {
  background: var(--glass); backdrop-filter: blur(6px);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: 4px;
}
.app-fahrrad .qp-mode-btn { border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 700; }
/* Melden/Finden zeigen jetzt SVG statt Emoji (quickpoi.js PIN_SVG/SEARCH_SVG)
   - Größe folgt weiterhin der font-size von .qp-mode-ico (style.css, inkl.
   Mobil-Breakpoint 17px), damit hier keine Größe doppelt gepflegt wird. */
.app-fahrrad .qp-mode-ico svg { width: 1em; height: 1em; display: block; }
.app-fahrrad .qp-mode-btn.active { background: var(--brand); color: #fff; }
.app-fahrrad .qp-mode-btn[data-mode="finden"].active { background: #c2740b; }
.app-fahrrad .qp-btn {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
.app-fahrrad .qp-ctrl {
  background: var(--glass); backdrop-filter: blur(6px);
  border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-md);
}
.app-fahrrad .qp-ctrl.active { background: var(--brand); color: #fff; }

/* Alle vier Melde-Tasten als eingebettetes SVG statt der alten PNG-Kacheln
   (bench/rest/charging kamen als Sticker-Grafiken aus der Vor-Redesign-Zeit,
   "repair" hatte als einziger Typ schon das neue Icon - siehe quickpoi.js
   TYPES). 'shelter' ist seit der Rastmöglichkeit-Zusammenlegung kein eigener
   Typ/Knopf mehr, Dach ist jetzt ein Merkmal im qp-attr-Raster unten. Jede
   Taste bekommt ein helles Farbfeld in ihrer Kategoriefarbe statt der eigen-
   farbigen PNG-Kachel; die Karten-Marker-Farbe (--poi-col, siehe
   .poi-marker.qp-marker in style.css) bleibt unverändert dieselbe
   Kategoriefarbe wie zuvor. */
.app-fahrrad .qp-btn[data-type="bench"],
.app-fahrrad .qp-btn[data-type="rest"],
.app-fahrrad .qp-btn[data-type="charging"],
.app-fahrrad .qp-btn[data-type="repair"] {
  display: flex; align-items: center; justify-content: center;
}
.app-fahrrad .qp-btn[data-type="bench"] svg,
.app-fahrrad .qp-btn[data-type="rest"] svg,
.app-fahrrad .qp-btn[data-type="charging"] svg,
.app-fahrrad .qp-btn[data-type="repair"] svg { width: 62%; height: 62%; }
.app-fahrrad .qp-btn[data-type="bench"]    { background: #f3ecfd; color: #7c3aed; }
.app-fahrrad .qp-btn[data-type="rest"]     { background: #fdece0; color: #ea580c; }
.app-fahrrad .qp-btn[data-type="charging"] { background: #e5f5ea; color: #16a34a; }
.app-fahrrad .qp-btn[data-type="repair"]   { background: var(--accent-tint); color: var(--accent); }
/* Kartenmarker: äußerer Ring bleibt die Kategoriefarbe (--poi-col, per
   style.css .poi-marker.qp-marker), innerer Kreis bleibt weiß (siehe
   .poi-marker.qp-marker > span in style.css) - das Icon selbst braucht also
   seine Kategoriefarbe statt des von .poi-marker > span geerbten Weiß, sonst
   verschwindet es auf dem weißen Kreis. */
.app-fahrrad .qp-marker-bench    > span { color: #7c3aed; }
.app-fahrrad .qp-marker-rest     > span { color: #ea580c; }
.app-fahrrad .qp-marker-charging > span { color: #16a34a; }
.app-fahrrad .qp-marker-repair   > span { color: var(--accent); }

/* ============================================================
   4. NAVIGATION – "B, verfeinert": Glaskarte, Text oben, Pfeil+Meter unten
   ============================================================ */
.app-fahrrad .nav-hud {
  max-width: 300px;
  background: var(--glass);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  color: var(--ink);
  text-shadow: none;
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 0;
  column-gap: 12px;
}
.app-fahrrad .nav-hud.an { display: grid; }
.app-fahrrad .nav-ziel {
  grid-column: 1 / -1;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft); opacity: 1;
  order: 1;
}
/* Die Anweisung ist bei Kreisverkehr-Ausfahrten weiterhin die EINZIGE
   Textzeile aus navi.js (nav-text); im Normalfall zeigt navi.js hier jetzt
   (nur für RP_APP==='fahrrad', siehe navi.js) den vollen Manöver-Satz. */
.app-fahrrad .nav-text {
  grid-column: 1 / -1;
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-top: 3px; line-height: 1.3;
  order: 2;
}
.app-fahrrad .nav-steig {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 800; margin-top: 5px; color: #c2410c;
  display: flex; align-items: center; gap: 3px;
  order: 3;
}
.app-fahrrad .nav-steig.ab { color: #0891b2; }
/* Trennlinie zwischen Textblock und Pfeil-Zeile */
.app-fahrrad .nav-hud::after {
  content: "";
  grid-column: 1 / -1;
  order: 4;
  height: 1px; background: var(--line); margin: 11px 0;
}
.app-fahrrad .nav-pfeil {
  order: 5;
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--brand-tint);
  display: flex; align-items: center; justify-content: center;
  filter: none;
}
.app-fahrrad .nav-pfeil svg { width: 60%; height: 60%; stroke: var(--brand-dk); }
.app-fahrrad .nav-meter {
  order: 6;
  align-self: center;
  font-size: 30px; font-weight: 800; color: var(--brand-dk);
  letter-spacing: 0;
}
.app-fahrrad .nav-meter.nah { color: #c2410c; }
.app-fahrrad .nav-meter::after {
  content: "bis zur Abbiegung";
  display: block;
  font-family: "Hanken Grotesk";
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  margin-top: 1px;
}
.app-fahrrad .nav-ton {
  position: absolute; right: 12px; top: 12px;
  width: 28px; height: 28px;
  background: var(--brand-tint); border: none; color: var(--brand-dk);
  font-size: 13px;
}
.app-fahrrad .nav-ton.aus { opacity: .55; }

/* Purismus-Modus: nur Pfeil + Meter, zurück zu reiner Schattenschrift auf
   der Karte selbst (keine Glasfläche) – aktiviert über .nav-hud.purist,
   von navi.js gesetzt (siehe puristUmschalten). */
.app-fahrrad .nav-hud.purist {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-fahrrad .nav-hud.purist::after,
.app-fahrrad .nav-hud.purist .nav-ziel,
.app-fahrrad .nav-hud.purist .nav-text,
.app-fahrrad .nav-hud.purist .nav-steig,
.app-fahrrad .nav-hud.purist .nav-ton { display: none; }
.app-fahrrad .nav-hud.purist .nav-pfeil {
  background: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,.7));
}
.app-fahrrad .nav-hud.purist .nav-pfeil svg { stroke: #fff; width: 56px; height: 56px; }
.app-fahrrad .nav-hud.purist .nav-meter {
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.65);
  font-size: 40px;
}
.app-fahrrad .nav-hud.purist .nav-meter.nah { color: #fbbf24; }
.app-fahrrad .nav-hud.purist .nav-meter::after { display: none; }

/* Purismus-Schalter (Einstellungen, Sprachausgabe-Karte) */
.app-fahrrad .purist-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 2px; }

/* ---------- Eigener Positionsmarker: Kite-Pfeil statt CSS-Border-Dreieck ---------- */
.app-fahrrad .nav-ich::before { background: rgba(37,99,235,.2); border-color: rgba(255,255,255,.85); }
.app-fahrrad .nav-ich-pfeil {
  border: none !important;
  width: var(--ich); height: var(--ich);
  background: #2563eb;
  clip-path: polygon(50% 6%, 84% 90%, 50% 68%, 16% 90%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.9);
  position: relative;
}
.app-fahrrad .nav-ich-pfeil::after { display: none; }

/* ============================================================
   5. Rückfrage-Box, Start/Stop, Ziel erreicht, Login, Toast, Betriebskarte
   ============================================================ */
.app-fahrrad .ask-box {
  background: #1c2733;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
}
.app-fahrrad .ask-text { font-size: 15.5px; }
.app-fahrrad .ask-btn { border-radius: 12px; }
.app-fahrrad .ask-btn.ja { background: var(--brand); }

.app-fahrrad .qp-attr-box {
  background: #1c2733;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
}
.app-fahrrad .qp-attr-toggle { border-radius: var(--radius-md); }
.app-fahrrad .qp-attr-btn { border-radius: 12px; }
.app-fahrrad .qp-attr-btn.confirm { background: var(--brand); }

.app-fahrrad .toast {
  border-radius: var(--radius-pill);
  padding: 12px 12px 12px 18px;
  box-shadow: var(--shadow-md);
}
.app-fahrrad .toast-undo { border-radius: var(--radius-pill); }

.app-fahrrad .modal-box { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.app-fahrrad .modal-tabs {
  background: var(--sunken); border-bottom: none; border-radius: var(--radius-pill);
  padding: 4px; gap: 2px; margin-bottom: 20px;
}
.app-fahrrad .modal-tab {
  border-radius: var(--radius-pill); margin-bottom: 0;
  border-bottom: none !important;
}
.app-fahrrad .modal-tab.active { background: var(--surface); box-shadow: var(--shadow-sm); }
.app-fahrrad .form-group input { border-radius: var(--radius-md); background: var(--sunken); }

/* Betriebsprofil-Popup */
.app-fahrrad .biz-popup { font-family: "Hanken Grotesk"; }
.app-fahrrad .biz-popup-name { font-family: "Bricolage Grotesque"; }
.app-fahrrad .biz-popup-cover { border-radius: var(--radius-md); }
.app-fahrrad .biz-popup-amenities span,
.app-fahrrad .biz-popup-cat { border-radius: var(--radius-pill); }
.app-fahrrad .biz-popup-amenities span { background: var(--brand-tint); color: var(--brand-dk); padding: 3px 9px; }
.app-fahrrad .biz-popup-verified { color: var(--brand-dk); }
.app-fahrrad .biz-popup-unclaimed { border-radius: var(--radius-sm); }
.app-fahrrad .maplibregl-popup-content { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-md) !important; }

/* Login-/Nutzerbereich in der Seitenleiste */
.app-fahrrad .btn-login { border-radius: var(--radius-pill); }
.app-fahrrad .btn-logout { border-radius: var(--radius-pill); }

/* ---------- Responsive: gleiche Bruchpunkte wie style.css, nur Optik ---------- */
@media (max-width: 720px), (orientation: landscape) and (max-height: 720px) and (max-width: 1180px) {
  .app-fahrrad .qp-bar { background: transparent; }
  /* Mobil ist der Regler ohnehin schon auf 48x132 vergrößert (style.css,
     dicke Finger) - im Fahrrad-Redesign zusätzlich höher, aus demselben
     Grund wie bei der Desktop-Größe oben: mehr Luft zum gerundeten Rand. */
  .app-fahrrad .ctrl-pitch { height: 190px !important; }
}