body { margin: 0; display: flex; flex-direction: column; }

  /* ── Root layout ──────────────────────────────────────────────────── */
  .rp-layout {
    display: flex;
    height: calc(100vh - 96px);
    margin-top: 96px;
    width: 100%;
    overflow: hidden;
  }

  /* ── Settings panel ───────────────────────────────────────────────── */
  .rp-panel {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--ac-bg);
    border-right: 1px solid var(--ac-border);
    z-index: 20;
    box-shadow: 10px 0 30px rgba(0,0,0,0.15);
  }
  .rp-panel__header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--ac-border);
    flex-shrink: 0;
  }
  .rp-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }
  .rp-panel__body::-webkit-scrollbar { width: 4px; }
  .rp-panel__body::-webkit-scrollbar-track { background: transparent; }
  .rp-panel__body::-webkit-scrollbar-thumb {
    background: var(--ac-border-strong);
    border-radius: 2px;
  }
  .rp-panel__footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--ac-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: var(--ac-bg);
  }
  /* ── Section label ────────────────────────────────────────────────── */
  .rp-label {
    font-size: var(--ac-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ac-tracking-widest);
    color: var(--ac-text-muted);
    margin-bottom: 0.75rem;
    display: block;
  }

  /* ── Form inputs ──────────────────────────────────────────────────── */
  .rp-input {
    width: 100%;
    background: var(--ac-surface);
    color: var(--ac-text-main);
    border: none;
    border-radius: var(--ac-radius-xl);
    padding: 0.75rem 1rem;
    font-size: var(--ac-text-sm);
    font-family: var(--ac-font-sans);
    outline: none;
    transition: box-shadow 150ms;
    box-sizing: border-box;
  }
  .rp-input:focus { box-shadow: 0 0 0 1px var(--ac-brand-500); }
  .rp-input::placeholder { color: var(--ac-text-muted); }
  .rp-select-wrap { position: relative; }
  .rp-select-wrap select.rp-input { appearance: none; cursor: pointer; padding-right: 2.5rem; }
  .rp-select-arrow {
    position: absolute; right: 0.875rem; top: 50%;
    transform: translateY(-50%); pointer-events: none;
    color: var(--ac-text-muted); font-size: 18px;
  }

  /* ── Routing mode: pill toggle ────────────────────────────────────── */
  .rp-pill-group {
    display: flex;
    background: var(--ac-surface);
    border-radius: var(--ac-radius-xl);
    padding: 3px;
    margin-bottom: 1rem;
  }
  .rp-pill {
    flex: 1; padding: 0.45rem 0.5rem;
    font-size: var(--ac-text-sm); font-weight: 500;
    border: none; background: transparent;
    color: var(--ac-text-muted); border-radius: var(--ac-radius-lg);
    cursor: pointer; transition: all 150ms;
    font-family: var(--ac-font-sans);
    display: flex; align-items: center; justify-content: center; gap: 4px;
  }
  .rp-pill--active {
    background: var(--ac-surface-hover);
    color: var(--ac-text-main);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* ── Strecken-Charakter: 3-col icon grid ──────────────────────────── */
  .rp-char-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .rp-char-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0.6rem 0.25rem;
    border-radius: var(--ac-radius-xl);
    background: var(--ac-surface);
    color: var(--ac-text-muted);
    border: 1px solid transparent;
    cursor: pointer; transition: all 150ms;
    font-size: var(--ac-text-xs); font-weight: 500;
    font-family: var(--ac-font-sans); gap: 3px;
  }
  .rp-char-btn:hover { background: var(--ac-surface-hover); color: var(--ac-text-main); }
  .rp-char-btn--active {
    background: color-mix(in oklch, var(--ac-brand-500) 12%, transparent);
    color: var(--ac-brand-400);
    border-color: color-mix(in oklch, var(--ac-brand-500) 30%, transparent);
  }

  /* ── Waypoint list rows (drag-to-reorder) ─────────────────────────── */
  .rp-wp-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: var(--ac-text-sm);
    padding: 0.2rem 0.4rem;
    border-radius: var(--ac-radius-md);
    cursor: grab; user-select: none; transition: background 0.1s;
  }
  .rp-wp-row:hover { background: var(--ac-surface); }

  /* ── Stop fields (A / B / Via inputs) ───────────────────────────── */

  /* Wrapper that draws the vertical line through all badge circles */
  .rp-stops-wrap {
    position: relative;
  }
  .rp-stops-wrap::before {
    content: '';
    position: absolute;
    left: 11px;           /* center of the 24px badge */
    top: 12px;            /* half badge height */
    bottom: 12px;
    width: 2px;
    background: var(--ac-border);
    border-radius: 1px;
    z-index: 0;
  }

  .rp-stop-row {
    display: flex; align-items: center; gap: 0.625rem;
    position: relative;   /* kein z-index → kein eigener Stacking-Context */
    padding: 0.25rem 0;
  }
  .rp-stop-badge {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff;
    font-family: var(--ac-font-sans);
    box-shadow: 0 0 0 3px var(--ac-bg);   /* white ring hides the connector line */
  }

  /* Underline-style input — cleaner than the pill */
  .rp-stop-input {
    width: 100%;
    background: transparent;
    color: var(--ac-text-main);
    border: none;
    border-bottom: 1.5px solid var(--ac-border);
    border-radius: 0;
    padding: 0.6rem 0.25rem;
    font-size: var(--ac-text-sm);
    font-family: var(--ac-font-sans);
    outline: none;
    transition: border-color 150ms;
    box-sizing: border-box;
  }
  .rp-stop-input:focus { border-bottom-color: var(--ac-brand-500); }
  .rp-stop-input::placeholder { color: var(--ac-text-muted); }

  .rp-stop-clear {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--ac-text-muted); flex-shrink: 0;
    display: flex; align-items: center; transition: color 150ms;
  }
  .rp-stop-clear:hover { color: var(--ac-text-main); }

  /* Connector between stop rows — now only a tiny spacer (visual line is via ::before) */
  .rp-stop-connector { height: 0.25rem; }

  .rp-btn-add-stop {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: var(--ac-text-sm); font-weight: 600; color: var(--ac-brand-400);
    background: none; border: none; cursor: pointer;
    padding: 0.5rem 0.5rem 0.5rem 0;
    margin-top: 0.25rem;
    font-family: var(--ac-font-sans); transition: opacity 150ms;
    border-radius: var(--ac-radius-md);
  }
  .rp-btn-add-stop:hover { opacity: 0.7; }

  /* ── Saved routes ─────────────────────────────────────────────────── */
  .rp-saved-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-lg);
    cursor: pointer; transition: background 150ms;
    margin: 0 -0.5rem;
  }
  .rp-saved-item:hover { background: var(--ac-surface); opacity: 1; }
  .rp-saved-item:last-child { border-bottom: none; }

  /* ── Footer buttons ───────────────────────────────────────────────── */
  .rp-undo-row { display: flex; gap: 0.5rem; }
  .rp-btn-ui {
    flex: 1; padding: 0.5rem;
    background: var(--ac-surface); color: var(--ac-text-dim);
    border: none; border-radius: var(--ac-radius-lg);
    font-size: var(--ac-text-sm); font-family: var(--ac-font-sans); font-weight: 500;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    gap: 0.25rem; transition: all 150ms;
  }
  .rp-btn-ui:hover:not(:disabled) { background: var(--ac-surface-hover); color: var(--ac-text-main); }
  .rp-btn-ui:disabled { opacity: 0.4; cursor: default; }

  .rp-save-panel {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ac-border);
    margin-bottom: 0.5rem;
  }
  .rp-btn-save {
    width: 100%; padding: 0.6rem;
    background: var(--ac-text-main); color: var(--ac-bg);
    border: none; border-radius: var(--ac-radius-xl);
    font-weight: 600; font-size: var(--ac-text-sm);
    font-family: var(--ac-font-sans); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: opacity 150ms;
  }
  .rp-btn-save:hover { opacity: 0.88; }

  .rp-btn-export {
    width: 100%; padding: 0.5rem;
    background: transparent; color: var(--ac-brand-400);
    border: none; border-radius: var(--ac-radius-xl);
    font-weight: 500; font-size: var(--ac-text-sm);
    font-family: var(--ac-font-sans); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: all 150ms;
  }
  /* GPX Export + Import nebeneinander in einer kompakten Reihe (spart Footer-Höhe). */
  .rp-export-row { display: flex; gap: 0.5rem; }
  .rp-export-row .rp-btn-export { flex: 1; width: auto; }
  /* Verstecktes File-Input (statt Inline-Style display:none). */
  .rp-file-hidden { display: none; }
  .rp-btn-export:hover { background: color-mix(in oklch, var(--ac-brand-500) 10%, transparent); }
  .rp-btn-export:disabled { color: var(--ac-text-muted); cursor: default; }
  .rp-btn-export:disabled:hover { background: transparent; }

  /* ── Sport pill (header) ────────────────────────────────────────── */
  .rp-sport-pill {
    display: flex; align-items: center; gap: 0.3rem;
    background: var(--ac-surface); border-radius: var(--ac-radius-2xl);
    padding: 0.3rem 0.65rem 0.3rem 0.5rem; cursor: pointer;
    transition: background 150ms; position: relative; border: none;
  }
  .rp-sport-pill:hover { background: var(--ac-surface-hover); }
  .rp-sport-pill select {
    background: var(--ac-surface); border: none; outline: none;
    color: var(--ac-text-main); font-size: var(--ac-text-sm); font-weight: 600;
    cursor: pointer; font-family: var(--ac-font-sans); appearance: none;
  }

  /* ── Toggle switch ───────────────────────────────────────────────── */
  .rp-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink:0; }
  .rp-toggle input { opacity: 0; width: 0; height: 0; }
  .rp-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--ac-border-strong); border-radius: 20px; transition: 250ms;
  }
  .rp-toggle-slider:before {
    content: ''; position: absolute;
    width: 14px; height: 14px; border-radius: 50%; background: white;
    left: 3px; bottom: 3px; transition: 250ms;
  }
  .rp-toggle input:checked + .rp-toggle-slider { background: var(--ac-brand-400); }
  .rp-toggle input:checked + .rp-toggle-slider:before { transform: translateX(16px); }

  /* ── Material 3 Search Pill ──────────────────────────────────────── */
  .rp-search-pill {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--ac-surface); border: none; border-radius: 999px;
    font-size: var(--ac-text-sm); color: var(--ac-text-muted);
    font-family: var(--ac-font-sans); cursor: pointer;
    transition: background 150ms; text-align: left;
  }
  .rp-search-pill:hover { background: var(--ac-surface-hover); }
  .rp-search-pill .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }

  /* ── Options Section ─────────────────────────────────────────────── */
  .rp-options-section {
    margin-top: 0.5rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-xl);
  }
  .rp-options-section .rp-section-toggle {
    margin: 0; border-radius: 0;
    border-bottom: 1px solid var(--ac-border);
    padding: 0.75rem 1rem;
  }
  .rp-options-section .rp-section-toggle:first-child {
    border-radius: var(--ac-radius-xl) var(--ac-radius-xl) 0 0;
  }
  .rp-options-section .rp-section-toggle:last-child {
    border-bottom: none;
    border-radius: 0 0 var(--ac-radius-xl) var(--ac-radius-xl);
  }

  /* ── Expand Panel (RT controls, POI chips — below options card) ─── */
  .rp-expand-panel {
    padding: 0.75rem 1rem;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-xl);
    margin-top: 0.35rem;
    background: color-mix(in oklch, var(--ac-surface-100) 50%, transparent);
  }

  /* ── Section Toggle Row (POI, zukünftig weitere) ────────────────── */
  .rp-section-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.5rem; border-radius: var(--ac-radius-lg);
    cursor: pointer; transition: background 150ms; margin: 0 -0.5rem;
  }
  .rp-section-toggle:hover { background: var(--ac-surface); }

  /* ── Gradient toggle button ──────────────────────────────────────── */
  #gradient-toggle-btn:hover { background: rgba(20, 184, 166, 0.24); }
  #gradient-toggle-btn.active {
    background: var(--ac-brand-600);
    color: #fff;
    border-color: var(--ac-brand-600);
  }
  /* Refresh-/Einklappen-Icons im Höhenprofil: dezentes Hover-Feld. */
  #rp-refresh-elev-btn:hover { background: rgba(15, 118, 110, 0.12); }
  #rp-elev-collapse-btn:hover { background: rgba(82, 82, 91, 0.12); }

  /* ── Ausschluss-Zonen-Popover: helles frosted Panel statt dunklem Glas
     (passt zum Look von Difficulty/Höhenprofil), weicher Schatten statt
     schwerem Blur. Themeunabhängig hell. ──────────────────────────────── */
  #rp-zone-panel {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  }
  #rp-zone-panel .rp-label { color: #52525b; }

  /* ── Zone draw button ── Teal-Chip (Basis in CSS, damit das JS beim
     Deaktivieren via style.background='' zurück auf Teal fällt); der
     Aktiv-Zustand „Abbrechen" wird vom JS inline auf Rot gesetzt. ──────── */
  #zone-draw-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(20, 184, 166, 0.14);
    border: 1px solid #0d9488; border-radius: 999px;
    cursor: pointer; color: #0f766e; font-weight: 600;
    font-size: var(--ac-text-xs); padding: 4px 12px; line-height: 1.4;
    transition: background 150ms, color 150ms, border-color 150ms;
  }
  #zone-draw-btn:hover { background: rgba(20, 184, 166, 0.24); }
  #zone-draw-btn.active {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
  }

  /* ── Klassischer Kompass ─────────────────────────────────────────────── */
  #rp-compass-btn {
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  #rp-compass-btn:hover { background: #fff; }
  #rp-compass-rose {
    width: 100%; height: 100%;
    transition: transform 200ms ease-out;
  }
  #rp-compass-rose svg { width: 100%; height: 100%; display: block; }

  /* ── Fotospots: Export-Chips ─────────────────────────────────────────── */
  .photo-export-btn {
    background: rgba(20, 184, 166, 0.12); border: 1px solid #0d9488;
    border-radius: 999px; cursor: pointer; color: #0f766e; font-weight: 600;
    font-size: var(--ac-text-xs); padding: 3px 12px;
  }
  .photo-export-btn:hover { background: rgba(20, 184, 166, 0.22); }
  .photo-anno-tool {
    background: var(--ac-surface-100); border: 1px solid var(--ac-border);
    border-radius: 999px; cursor: pointer; color: var(--ac-text-main);
    font-size: var(--ac-text-xs); padding: 3px 11px;
  }
  .photo-anno-tool:hover { background: var(--ac-surface-hover); }
  .photo-anno-tool.active { background: #f59e0b; color: #fff; border-color: #f59e0b; }

  /* ── Zentrales Dialog-Element (RP.confirm / RP.prompt) ───────────────────
     EIN Popup-Design für die ganze App (ersetzt natives confirm/prompt und den
     früheren Foto-eigenen Dialog). Siehe rp/dialog.js. */
  .rp-modal-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.35);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .rp-modal {
    background: var(--ac-surface); color: var(--ac-text-main);
    border: 1px solid var(--ac-border); border-radius: var(--ac-radius-xl);
    box-shadow: var(--ac-shadow-lg); padding: 1.1rem 1.2rem;
    width: min(420px, 100%); display: flex; flex-direction: column; gap: 0.85rem;
  }
  .rp-modal__title { font-size: var(--ac-text-base); font-weight: 700; }
  .rp-modal__msg { font-size: var(--ac-text-sm); color: var(--ac-text-muted); }
  .rp-modal__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.1rem; }
  .rp-modal__btn {
    cursor: pointer; border-radius: 999px; font-size: var(--ac-text-sm);
    font-weight: 600; padding: 6px 16px; border: 1px solid transparent;
  }
  .rp-modal__btn--ghost {
    background: none; border-color: var(--ac-border); color: var(--ac-text-muted);
  }
  .rp-modal__btn--ghost:hover { background: var(--ac-surface-hover); }
  .rp-modal__btn--primary { background: var(--ac-brand-600); color: #fff; }
  .rp-modal__btn--primary:hover { background: var(--ac-brand-500); }
  .rp-modal__btn--danger { background: var(--ac-red-500, #ef4444); color: #fff; }
  .rp-modal__btn--danger:hover { background: var(--ac-red-600, #dc2626); }
  /* aktiver „Spot setzen"-Button */
  #photo-add-spot-btn.active { background: var(--ac-brand-600); color: #fff; }

  /* ── POI Panel ───────────────────────────────────────────────────── */
  #rp-poi-panel {
    padding: 0.5rem 0 0.25rem;
    border-top: 1px solid var(--ac-border);
    margin-top: 0.25rem;
  }
  .rp-poi-hint {
    font-size: var(--ac-text-xs); color: var(--ac-text-muted);
    margin: 0.5rem 0 0; font-style: italic;
  }
  .rp-poi-count {
    font-size: var(--ac-text-xs); color: var(--ac-brand-400);
    margin-top: 0.4rem; min-height: 1rem;
  }

  /* ── POI Kategorie-Chips ─────────────────────────────────────────── */
  .rp-poi-chips-row {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
  }
  .rp-poi-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    height: 32px; padding: 0 0.75rem 0 0.55rem;
    border-radius: var(--ac-radius-lg); border: 1.5px solid var(--ac-border);
    background: none; cursor: pointer; user-select: none;
    font-size: var(--ac-text-xs); color: var(--ac-text-muted);
    font-family: var(--ac-font-sans); transition: all 150ms;
    white-space: nowrap;
  }
  .rp-poi-chip .material-symbols-outlined { font-size: 15px; color: var(--ac-text-muted); transition: color 150ms; }
  .rp-poi-chip:hover:not(.rp-poi-chip--active) {
    border-color: var(--ac-border-strong, var(--ac-text-muted));
    color: var(--ac-text-main);
  }
  .rp-poi-chip--active {
    color: var(--ac-text-main);
    border-color: var(--poi-color, var(--ac-brand-400));
    background: color-mix(in oklch, var(--poi-color, var(--ac-brand-400)) 14%, transparent);
  }
  .rp-poi-chip--active .material-symbols-outlined {
    color: var(--poi-color, var(--ac-brand-400));
  }

  /* ── Werkzeug-Listeneinträge ─────────────────────────────────────── */
  .rp-tool-item {
    display: flex; align-items: center; gap: 0.875rem;
    width: 100%; padding: 0.65rem 0.5rem;
    border-radius: var(--ac-radius-lg); border: none;
    background: none; cursor: pointer; text-align: left;
    font-family: var(--ac-font-sans); transition: background 150ms;
  }
  .rp-tool-item:hover { background: var(--ac-surface); }
  .rp-tool-item__icon {
    font-size: 20px; color: var(--ac-text-muted); flex-shrink: 0;
  }
  .rp-tool-item__text {
    font-size: var(--ac-text-sm); font-weight: 500; color: var(--ac-text-main);
    flex: 1;
  }
  .rp-tool-item__chevron {
    font-size: 18px; color: var(--ac-text-muted);
  }

  /* ── Inline RT controls ──────────────────────────────────────────── */
  .rp-rt-inline {
    background: var(--ac-surface); border-radius: var(--ac-radius-xl);
    padding: 0.875rem; display: flex; flex-direction: column; gap: 0.6rem;
    border: 1px solid color-mix(in oklch, var(--ac-brand-500) 25%, transparent);
  }

  /* ── Map area ─────────────────────────────────────────────────────── */
  .rp-map { flex: 1; position: relative; overflow: hidden; }
  #planner-map { width: 100%; height: 100%; }

  /* ── Right-click context menu ─────────────────────────────────────── */
  .rp-ctx-item {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; padding: 0.6rem 0.875rem;
    background: none; border: none; cursor: pointer;
    color: var(--ac-text-main); font-size: var(--ac-text-sm);
    font-family: var(--ac-font-sans); text-align: left;
    transition: background 100ms;
  }
  .rp-ctx-item:hover { background: var(--ac-surface-hover); }
  .rp-ctx-item + .rp-ctx-item { border-top: 1px solid var(--ac-border); }

  /* ── Glassmorphism ────────────────────────────────────────────────── */
  .rp-glass {
    background: color-mix(in oklch, var(--ac-surface) 82%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in oklch, var(--ac-border) 70%, transparent);
  }

  /* Dropdown-Listen brauchen soliden Hintergrund – Glass lässt Panel-Inhalt
     darunter durchscheinen. Höhere Spezifität statt !important. */
  .rp-glass[id^="rp-stop-dd-"],
  .rp-glass#disc-start-dd {
    background: var(--ac-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--ac-border);
    box-shadow: var(--ac-shadow-lg);
  }

  /* Map-Geocode-Dropdown: Opazität erhöhen, Blur bleibt (liegt über Karte) */
  div#geocode-dropdown.rp-glass {
    background: color-mix(in oklch, var(--ac-surface) 96%, transparent);
  }

  /* ── Floating search bar ──────────────────────────────────────────── */
  .rp-float-search {
    position: absolute; top: calc(96px + var(--ac-space-3)); left: 1.25rem;
    z-index: 100; width: 380px;
  }
  /* Schwierigkeit: schwebende Karte direkt unter der Suche (oben links). */
  .rp-float-difficulty {
    position: absolute;
    top: calc(96px + var(--ac-space-3) + 3.6rem);
    left: 1.25rem;
    z-index: 95;
    width: max-content; max-width: 320px;
    /* Kein dominanter Karten-Hintergrund mehr – nur dezente Chips je Metrik. */
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
  }
  /* Schwierigkeit: dezente, theme-adaptive „Chip"-Hervorhebung je Metrik.
     Die farbige Pille (DIFF_COLORS) trägt die eigentliche Aussage; der Chip
     darunter hält den Text nur leicht lesbar über der Karte (Light/Dark). */
  /* Kein Kasten hinter der ganzen Zeile mehr — nur die farbige Pille trägt die
     Aussage. Icon + Text bekommen eine leicht weiße Hervorhebung (wie das
     km-Band im Höhenprofil), damit sie über der Karte lesbar bleiben. */
  .rp-diff-chip {
    display: flex; align-items: center; gap: 0.6rem;
    width: max-content; max-width: 100%;
  }
  .rp-diff-pill {
    display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: var(--ac-text-xs); font-weight: 600; letter-spacing: 0.01em;
    background: var(--ac-surface-200); color: var(--ac-text-main); white-space: nowrap;
  }
  /* Leicht weiße Hervorhebung hinter Icon + Text (themeunabhängig). */
  .rp-diff-meta {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.16rem 0.6rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
  }
  .rp-diff-info { font-size: 15px; color: #52525b; flex-shrink: 0; }
  .rp-diff-text { font-size: var(--ac-text-xs); color: #52525b; white-space: nowrap; }
  .rp-diff-cat { color: #3f3f46; font-weight: 600; }
  /* Wegpunkt-Marker (A/B/C …) am oberen Höhenprofil-Rand. Position per JS;
     Farblogik wie die Karten-Marker (Start grün, Ziel rot, sonst teal). */
  .rp-elev-wp {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 17px; height: 17px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
  /* Höhenprofil: schwebende Schublade über der HUD-Leiste (bottom-center). */
  .rp-float-elev {
    position: absolute;
    bottom: 7.5rem; left: 50%; transform: translateX(-50%);
    z-index: 95;
    /* Etwas breiter, dafür flacher (Höhe steuert der Chart-aspectRatio in JS). */
    width: min(680px, calc(100% - 2rem));
    /* Mehr Luft unten, damit die km-Achse nicht an der weichen Kante klebt. */
    padding: 0.5rem 0.9rem 0.95rem; border-radius: var(--ac-radius-xl);
    /* Kein Kasten/Rahmen, kein Blur (der zog eine harte Rechteck-Kante):
       nur ein leicht weiß getönter Verlauf, der zu BEIDEN Kanten (oben + unten)
       ausfadet — Peak hinter dem Chart, Ränder weich. */
    background: linear-gradient(to top,
      rgba(255, 255, 255, 0.07) 0%,    /* unterste Kante weich (+30%) */
      rgba(255, 255, 255, 0.21) 6%,
      rgba(255, 255, 255, 1.00) 13%,   /* km-Achsen-Band: voll deckend, klar zum Ablesen */
      rgba(255, 255, 255, 0.81) 30%,
      rgba(255, 255, 255, 0.57) 66%,
      rgba(255, 255, 255, 0.10) 100%); /* obere Kante weich */
  }
  /* ── Zentraler rechter Dock-Stapel (Benachrichtigungen + aufklappbare Panels) ──
     Eine flex-Spalte oben rechts, links neben der Control-Spalte. Alle rechtsseitigen
     Overlays stapeln hier kollisionsfrei. Die Zone selbst klickt durch
     (pointer-events:none), nur die Karten/Panels fangen Klicks ab. */
  #rp-dock {
    position: absolute;
    top: 10px; right: 56px;
    z-index: 250;
    display: flex; flex-direction: column; gap: 0.5rem;
    width: min(320px, calc(100vw - 5rem));
    pointer-events: none;
  }
  #rp-dock > * { pointer-events: auto; }
  #rp-notices { display: flex; flex-direction: column; gap: 0.5rem; }

  /* Hinweis-Karte (von RP.notify erzeugt) */
  .rp-notice {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.6rem 0.8rem; border-radius: var(--ac-radius-xl);
  }
  .rp-notice__icon { font-size: 18px; color: var(--ac-brand-400); flex-shrink: 0; }
  .rp-notice__body {
    flex: 1; min-width: 0;
    font-size: var(--ac-text-xs); color: var(--ac-text-dim); line-height: 1.5;
  }
  .rp-notice__btn {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--ac-text-muted); flex-shrink: 0; display: flex; align-items: center;
    transition: color 150ms;
  }
  .rp-notice__btn:hover { color: var(--ac-text-main); }
  .rp-notice__btn-icon { font-size: 16px; display: block; }
  /* Eingeklappt: nur Icon + Buttons sichtbar (Text ausgeblendet). */
  .rp-notice--collapsed .rp-notice__body { display: none; }

  /* Aufklappbare Panels (Zonen/Teilen) als Dock-Kinder: volle Spaltenbreite. */
  .rp-dock-panel {
    width: 100%;
    padding: 0.7rem 0.8rem; border-radius: var(--ac-radius-xl);
  }

  /* Mobile-Hinweis: jetzt Dock-Kind → keine eigene Positionierung mehr (nur Default aus,
     Media Query unten zeigt ihn auf Smartphones). */
  #rp-mobile-notice {
    display: none;
    align-items: flex-start; gap: 0.6rem;
    padding: 0.75rem 0.85rem; border-radius: var(--ac-radius-xl);
  }
  /* Mehrtages-Vorschlag: Dock-Kind, volle Breite (Slide-Animation am inneren Element). */
  .rp-float-multiday-wrap { width: 100%; }
  .rp-float-search__wrap {
    display: flex; align-items: center;
    padding: 0.65rem 1rem;
    border-radius: var(--ac-radius-2xl);
    gap: 0.5rem; position: relative;
  }
  .rp-float-search input {
    background: transparent; border: none; outline: none;
    color: var(--ac-text-main); font-size: var(--ac-text-sm);
    width: 100%; font-family: var(--ac-font-sans);
  }
  .rp-float-search input::placeholder { color: var(--ac-text-muted); }

  /* ── Geocode dropdown ─────────────────────────────────────────────── */
  #geocode-dropdown {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    border-radius: var(--ac-radius-xl); overflow: hidden;
    box-shadow: var(--ac-shadow-lg); z-index: 200;
    max-height: 280px; overflow-y: auto;
  }

  /* ── Floating top-right controls ──────────────────────────────────── */
  /* ── Layer style menu ─────────────────────────────────────────────── */
  /* Button is a MapLibre control (LayersControl in map.js) sitting at the top   */
  /* of .maplibregl-ctrl-top-right. ctrl margin=10px, button=29px → 43px offset. */
  #rp-layer-menu {
    position: absolute; top: calc(96px + var(--ac-space-3) + 43px); right: 10px;
    z-index: 101; border-radius: var(--ac-radius-xl);
    padding: 0.4rem; min-width: 140px;
  }
  .rp-layer-btn {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.75rem; border: none; background: transparent;
    color: var(--ac-text-dim); font-size: var(--ac-text-sm);
    border-radius: var(--ac-radius-md); cursor: pointer;
    transition: all 150ms; font-family: var(--ac-font-sans);
    width: 100%; text-align: left;
  }
  .rp-layer-btn:hover { background: var(--ac-surface-hover); color: var(--ac-text-main); }
  .rp-layer-btn--active { color: var(--ac-brand-400); }

  /* ── Routing spinner ──────────────────────────────────────────────── */
  #routing-spinner {
    position: absolute; top: calc(96px + var(--ac-space-3)); left: 50%; transform: translateX(-50%);
    z-index: 100; border-radius: var(--ac-radius-lg);
    padding: 0.4rem 1rem;
    font-size: var(--ac-text-xs); color: var(--ac-text-muted); white-space: nowrap;
  }

  /* ── Floating HUD stats bar ───────────────────────────────────────── */
  .rp-hud {
    position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
    z-index: 100; border-radius: var(--ac-radius-card);
    padding: 0.875rem 2rem;
    display: flex; align-items: center; gap: 2rem; white-space: nowrap;
  }
  .rp-hud__stat { text-align: center; min-width: 64px; }
  .rp-hud__label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ac-text-muted); margin-bottom: 4px;
  }
  .rp-hud__val {
    font-size: var(--ac-text-2xl); font-weight: 700;
    line-height: 1; color: var(--ac-text-main);
    letter-spacing: var(--ac-tracking-tight);
  }
  .rp-hud__val--up  { color: var(--ac-green-400); }
  .rp-hud__val--dim { color: var(--ac-text-dim); }
  .rp-hud__unit {
    font-size: var(--ac-text-sm); font-weight: 500; color: var(--ac-text-muted);
  }
  .rp-hud__divider { width: 1px; height: 2rem; background: var(--ac-border); }

  /* ── Status line ──────────────────────────────────────────────────── */
  #rp-status { font-size: var(--ac-text-xs); text-align: center; display: none; }

  /* ── MapLibre control overrides ───────────────────────────────────── */
  /* MapLibre-eigene Control-Container unterhalb der Topbar positionieren */
  .maplibregl-ctrl-top-right {
    top: calc(96px + var(--ac-space-3)) !important;
  }
  .maplibregl-ctrl-top-left {
    top: calc(96px + var(--ac-space-3)) !important;
  }

  .maplibregl-ctrl-group {
    background: color-mix(in oklch, var(--ac-surface) 85%, transparent) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius-xl) !important;
    box-shadow: none !important;
  }
  .maplibregl-ctrl-group button {
    background-color: transparent !important;
    color: var(--ac-text-dim) !important;
  }
  .maplibregl-ctrl-group button:hover {
    background-color: var(--ac-surface-hover) !important;
  }

  .maplibregl-ctrl-group button.rp-pan-active {
    background-color: var(--ac-surface-hover) !important;
    color: var(--ac-text-main) !important;
  }

  /* Dark mode: MapLibre's built-in buttons use dark SVG background-images     */
  /* → invert them so they appear light on the dark ctrl-group background.      */
  /* Material-Symbol buttons (layers, pan_tool) use `color` → brighten those. */
  .dark .maplibregl-ctrl-zoom-in,
  .dark .maplibregl-ctrl-zoom-out,
  .dark .maplibregl-ctrl-fullscreen,
  .dark .maplibregl-ctrl-shrink,
  .dark .maplibregl-ctrl-compass {
    filter: invert(1) !important;
  }
  .dark .maplibregl-ctrl-group button {
    color: rgba(255, 255, 255, 0.75) !important;
  }
  .dark .maplibregl-ctrl-group button:hover {
    color: rgba(255, 255, 255, 1) !important;
  }

  /* ── Mode tabs ───────────────────────────────────────────────────────── */
  .rp-mode-tabs {
    display: flex;
    background: var(--ac-surface);
    border-radius: var(--ac-radius-xl);
    padding: 3px;
    margin-top: 0.75rem;
    gap: 2px;
  }
  .rp-mode-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.5rem;
    border: none; background: transparent;
    border-radius: var(--ac-radius-lg);
    color: var(--ac-text-muted);
    font-size: var(--ac-text-sm); font-weight: 500;
    font-family: var(--ac-font-sans);
    cursor: pointer; transition: all 150ms;
    white-space: nowrap;
  }
  .rp-mode-tab:hover { background: var(--ac-surface-hover); color: var(--ac-text-main); }
  .rp-mode-tab--active {
    background: var(--ac-surface-hover);
    color: var(--ac-text-main);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  }

  /* ── Plan panel wrappers: transparent (display:contents) ────────────── */
  #rp-plan-panel,
  #rp-plan-extras { display: contents; }

  /* ── Discover panel ──────────────────────────────────────────────────── */
  #rp-discover-panel {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Compass rose container */
  .rp-discover-compass {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0;
    user-select: none;
  }

  /* ── Discover route cards ─────────────────────────────────────────────── */
  #disc-results {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .disc-card {
    border: 1.5px solid var(--ac-border);
    border-radius: var(--ac-radius-xl);
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    background: var(--ac-surface);
  }
  .disc-card:hover:not(.disc-card--skeleton):not(.disc-card--error) {
    border-color: var(--ac-brand-600);
  }
  .disc-card--active {
    border-color: var(--ac-brand-400) !important;
    background: color-mix(in oklch, var(--ac-brand-500) 6%, var(--ac-surface));
  }
  .disc-card--skeleton,
  .disc-card--error {
    opacity: 0.55;
    cursor: default;
  }
  .disc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  .disc-card__num {
    font-size: var(--ac-text-sm);
    font-weight: 700;
    color: var(--ac-text-main);
  }
  .disc-card__dir {
    font-size: var(--ac-text-xs);
    color: var(--ac-brand-400);
    background: color-mix(in oklch, var(--ac-brand-500) 12%, transparent);
    padding: 0.15rem 0.55rem;
    border-radius: var(--ac-radius-md);
    font-weight: 500;
  }
  .disc-card__stats {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
  }
  .disc-card__stat {
    font-size: var(--ac-text-xs);
    color: var(--ac-text-muted);
  }
  .disc-card__stat b { color: var(--ac-text-main); font-weight: 700; }
  .disc-card__diff {
    margin-left: auto;
    font-size: var(--ac-text-xs);
    color: var(--ac-text-muted);
    font-style: italic;
  }
  .disc-card__adopt {
    width: 100%;
    padding: 0.45rem;
    background: var(--ac-text-main);
    color: var(--ac-bg);
    border: none;
    border-radius: var(--ac-radius-lg);
    font-size: var(--ac-text-xs);
    font-weight: 600;
    font-family: var(--ac-font-sans);
    cursor: pointer;
    transition: opacity 150ms;
  }
  .disc-card__adopt:hover { opacity: 0.85; }
  .disc-card--active .disc-card__adopt { background: var(--ac-brand-400); }
  .disc-card__skel-line {
    height: 11px;
    background: var(--ac-border);
    border-radius: 4px;
    animation: disc-shimmer 1.6s ease-in-out infinite;
  }
  @keyframes disc-shimmer {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.9; }
  }

  /* ── Mobile: Panel als Bottom-Sheet, Map oben ────────────────────── */
  @media (max-width: 639px) {

    /* Dock auf Smartphones: volle Breite mit Rand, links nicht mehr neben Controls
       klemmen (sonst zu schmal / aus den Fugen). */
    #rp-dock {
      top: calc(56px + var(--ac-space-3));
      left: var(--ac-space-3); right: var(--ac-space-3);
      width: auto;
    }

    /* Mobile-Hinweis nur hier einblenden (Tablets/Desktop bleiben aus). */
    #rp-mobile-notice { display: flex; }

    .rp-layout {
      flex-direction: column;
      height: calc(100vh - 64px);
      margin-top: 64px;
    }

    /* Map: obere Hälfte */
    .rp-map {
      flex: none;
      height: 45vh;
      min-height: 200px;
    }

    /* Panel: untere Hälfte, scrollbar — kein Topbar-Offset nötig */
    .rp-panel {
      width: 100%;
      flex: none;
      height: 55vh;
      border-right: none;
      border-top: 1px solid var(--ac-border);
      box-shadow: none;
      overflow-y: auto;
      padding-top: 0;
    }

    /* Panel-Body darf nicht doppelt scrollen */
    .rp-panel__body {
      overflow-y: visible;
    }

    /* Float-Search: unterhalb Mobile-Topbar (64px), volle Breite */
    .rp-float-search {
      top: calc(64px + var(--ac-space-3));
      left: var(--ac-space-3);
      right: var(--ac-space-3);
      width: auto;
    }

    /* MapLibre-Controls: unterhalb Mobile-Topbar */
    .maplibregl-ctrl-top-right {
      top: calc(64px + var(--ac-space-3)) !important;
    }

    #rp-layer-menu {
      top: calc(64px + var(--ac-space-3) + 43px);
    }

    #routing-spinner {
      top: calc(64px + var(--ac-space-3));
    }

    /* HUD: oberhalb der Panel-Kante einblenden */
    .rp-hud {
      bottom: auto;
      top: calc(45vh - 56px);
      left: 50%;
      transform: translateX(-50%);
      padding: var(--ac-space-2) var(--ac-space-4);
      gap: var(--ac-space-4);
      border-radius: var(--ac-radius-2xl);
    }

    .rp-hud__val {
      font-size: var(--ac-text-lg);
    }

    .rp-hud__divider {
      height: var(--ac-space-6);
    }

  }