/* ============================================================
   RoutenKnoten v0.5.111 – styles.css
   Basis-Styles: Nur Design-Token (CSS-Variablen) und globale
   Strukturregeln, die auf ALLEN Geräten gelten.

   REGEL: Kein einziger Media-Query in dieser Datei.
   Gerätespezifisches Design gehört ausschließlich in:
     → styles-mobile.css          (<480px)
     → styles-tablet.css          (480px–799px)
     → styles-desktop.css         (800px+)
   ============================================================ */


/* ============================================================
   1. DESIGN-TOKEN
   Alle Farben, Abstände, Schatten und z-index-Ebenen als
   CSS-Variablen. Änderungen hier wirken sich auf alle Geräte aus.
   ============================================================ */

:root {
  /* --- Markenfarben --- */
  --green:              #16a34a;
  --green-dark:         #15803d;
  --green-light-bg:     #f0fdf4;
  --green-border:       #bbf7d0;
  --green-text:         #166534;

  /* --- Knoten (blau) --- */
  --blue-node:          #2563eb;
  --blue-node-dark:     #1d4ed8;

  /* --- Route (orange) --- */
  --orange-route:       #f97316;
  --orange-route-dark:  #ea580c;

  /* --- Akzentfarben --- */
  --red:                #dc2626;
  --red-bg:             #fff5f5;
  --red-border:         #fecaca;
  --red-text:           #b91c1c;
  --blue:               #2563eb;

  /* --- Neutrale Töne --- */
  --bg:                 #f5f7f5;
  --text:               #111827;
  --muted:              #64748b;
  --border:             #e5e7eb;
  --surface:            #fff;
  --surface-muted:      #f8fafc;

  /* --- Schatten --- */
  --shadow:             0 2px 8px rgba(0, 0, 0, .12);
  --shadow-md:          0 4px 14px rgba(0, 0, 0, .18);
  --panel-shadow:       0 8px 26px rgba(15, 23, 42, .18);
  --sheet-shadow:       0 -4px 20px rgba(0, 0, 0, .15);

  /* --- Layout --- */
  --bar-h:              60px;         /* Höhe der Bottom-Navigation */
  --radius-sm:          12px;
  --radius-md:          22px;
  --radius-lg:          28px;
  --radius-pill:        999px;

  /* --- Typografie --- */
  --font-body:          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:          ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- z-index-Ebenen (geordnete Tabelle) ---
     Alle z-index-Werte in der App ausschließlich über diese
     Variablen setzen, niemals Direktwerte verwenden.           */
  --z-map-overlay:      400;    /* Leaflet Overlay-Pane        */
  --z-marker:           650;    /* Leaflet Marker-Pane         */
  --z-marker-active:    700;    /* Aktiver/gewählter Marker    */
  --z-controls:        1200;    /* Mobile Karten-Toolbar       */
  --z-route-info:      4200;    /* Routeninfo-Box unten        */
  --z-loading:         8500;    /* Knoten-Ladeoverlay          */
  --z-sheet:           9800;    /* Sheet / Dialog-Panel        */
  --z-nodes-sheet:     9300;    /* Knotenliste unten           */
  --z-menu:            9900;    /* Mobiles Seitenmenü          */
  --z-toast:          12000;    /* Toast-Benachrichtigungen    */
  --z-update:         99999;    /* Update-Overlay (immer oben) */

  --z-search-popover: 2000;
  --z-modal-helper: 2700;
  --z-map-zoom: 7200;
  --z-floating: 10050;
}


/* ============================================================
   2. RESET & GLOBALE REGELN
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-body);
  background: linear-gradient(180deg, #e6f7fb 0%, #d7eff5 45%, #a9d89d 100%);
  color: var(--text);
  overflow: hidden;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: .45;
  filter: grayscale(.25);
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Hilfsklasse – überall verwendbar */
.hidden {
  display: none !important;
}


/* ============================================================
   3. VIEWS (Ansichten-System)
   Jede Ansicht ist standardmäßig unsichtbar.
   .active zeigt sie an. Gerätegröße steuert die Höhe.
   ============================================================ */

.view {
  display: none;
  overflow-y: auto;
}

.view.active {
  display: block;
}

/* Die Kartenansicht hat overflow hidden, da Leaflet selbst scrollt */
.view-map {
  position: relative;
  overflow: hidden;
  overflow-x: hidden;
}

#map {
  width: 100%;
  height: 100%;
  background: #e5e7eb;
}


/* ============================================================
   4. ANSICHTSUMSCHALTUNG (hart, per JS-Klasse am body)
   Verhindert, dass Startseite und Karte gleichzeitig sichtbar sind.
   ============================================================ */

body.rk-map-active #homeView,
body.rk-map-active #homeView.view,
body.rk-map-active .sm-start {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.rk-map-active #mapView,
body.rk-map-active #mapView.view,
body.rk-map-active #mapView.view-map {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.rk-map-active #map {
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
}

body.rk-home-active #mapView,
body.rk-home-active #mapView.view,
body.rk-home-active #mapView.view-map {
  display: none !important;
}


/* ============================================================
   5. KARTE – GEMEINSAME ELEMENTE
   Position und Sichtbarkeit werden in den Gerätedateien gesetzt.
   ============================================================ */

/* Standardmäßig unsichtbar – Gerätedateien schalten sie ein */
.map-control-panel,
.desktop-map-controls,
.mobile-map-controls,
.mobile-map-menu {
  display: none;
}

/* Chips: Kleine Schaltflächen in der Karten-Toolbar */
.chip {
  background: var(--surface);
  border: 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  transition: transform .1s ease, box-shadow .1s ease;
}

.chip:active {
  transform: scale(.96);
}

/* Gefahren-Chip (Löschen) */
.chip.danger {
  color: var(--red-text);
  background: var(--red-bg);
  border: 1px solid var(--red-border);
}

/* Positions-Badge über der Karte (zeigt km und Knoten-Anzahl) */
.route-info-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  z-index: var(--z-controls);
  white-space: nowrap;
  font-family: var(--font-mono);
  pointer-events: none;
}

/* Ladebalken oben auf der Karte */
.loading-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 62px;
  height: 4px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  overflow-x: hidden;
  background: rgba(15, 23, 42, .12);
  z-index: var(--z-loading);
}

.loading-progress {
  height: 100%;
  width: 45%;
  border-radius: inherit;
  background: var(--green);
  animation: rk-loading 1.1s infinite ease-in-out;
}

@keyframes rk-loading {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}

/* Leaflet-Zoom-Buttons ausblenden (eigene Steuerung) */
.leaflet-control-zoom {
  display: none !important;
}

/* Leaflet-Ebenenreihenfolge */
.leaflet-overlay-pane {
  z-index: var(--z-map-overlay);
}

.leaflet-marker-pane {
  z-index: var(--z-marker);
}


/* ============================================================
   6. STARTSEITE – gemeinsame Strukturregeln
   Abstände und Größen: in den Gerätedateien.
   ============================================================ */

.sm-start {
  /* Gerätedateien legen padding und max-width fest */

  /* Landschafts-Hintergrund – nachempfunden dem Vorschaubild.
     Schichten von oben nach unten:
       1. Heller Overlay damit Karten und Text gut lesbar bleiben
       2. Wiesenheller Schimmer (Mitte)
       3. Wiese (untere Hälfte, sattgrün)
       4. Fluss (schmales Band, quer)
       5. Himmel mit Stadtsilhouette-Andeutung (obere Hälfte, hellblau) */
  background:
    /* 1. Leichter weißlicher Schleier über allem */
    linear-gradient(
      to bottom,
      rgba(245, 247, 245, .50) 0%,
      rgba(245, 247, 245, .38) 100%
    ),
    /* 2. Wiesenheller Glanzfleck (Mitte) */
    radial-gradient(
      ellipse 80% 30% at 50% 68%,
      rgba(158, 212, 122, .45) 0%,
      transparent 70%
    ),
    /* 3. Wiese unten */
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 46%,
      #7dc47a 50%,
      #6ab866 100%
    ),
    /* 4. Fluss – schmales horizontales Band */
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 43%,
      #7bbdd4 44.5%,
      #7bbdd4 48%,
      transparent 49%
    ),
    /* 5. Himmel und Stadtsilhouette-Andeutung */
    linear-gradient(
      to bottom,
      #c8e8f5 0%,
      #d8eef7 30%,
      #b8cfd9 42%,
      #c4d8bb 45%
    );
}

/* Kopfbereich (Header-Karte oben)
   Etwas mehr Schatten damit die Karte vor dem Landschafts-Hintergrund
   klar abgesetzt wirkt. */
.sm-start-card {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .13);
}

.sm-start-card h1 {
  color: var(--green);
  margin: 0 0 8px;
}

.sm-start-card p {
  margin: 0;
  color: var(--muted);
}

/* Suchfeld-Wrapper */
.sm-search-wrap {
  position: relative;
  margin: 0 auto 24px;
}

.sm-search {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.sm-search input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: var(--radius-pill);
  font-size: 16px;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sm-search button {
  flex: 0 0 auto;
  min-width: 58px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 20px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
}

/* Schaltflächen-Bereich auf der Startseite */
.sm-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

/* Einzelne Startseiten-Schaltfläche
   Leicht transluzent damit der Hintergrund durchscheint. */
.sm-action {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .70);
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  transition: transform .1s ease, box-shadow .1s ease;
  text-align: left;
}

.sm-action:hover:not(:disabled) {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.sm-action:active:not(:disabled) {
  transform: scale(.98);
  box-shadow: var(--shadow);
}

/* Rote Variante (Route löschen) */
.sm-action-red {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-bg);
}

/* Fußzeile (Tipp-Text) */
.sm-login small {
  color: #666;
  font-size: 12px;
}


/* ============================================================
   7. AUTOCOMPLETE / SUCHVORSCHLÄGE
   ============================================================ */

.suggest-box {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  overflow: hidden;
  overflow-x: hidden;
  z-index: var(--z-toast);
  text-align: left;
}

.suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  border: 0;
  background: var(--surface);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eef2f7;
}

.suggest-item:last-child {
  border-bottom: 0;
}

.suggest-item:hover,
.suggest-item:active {
  background: var(--green-light-bg);
}

.suggest-main {
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}

.suggest-sub,
.suggest-pending {
  font-size: 12px;
  color: var(--muted);
}

.suggest-pending {
  padding: 12px 16px;
  background: var(--surface-muted);
}


/* ============================================================
   8. BOTTOM NAVIGATION
   Sichtbarkeit: nur auf Mobilgeräten (styles-mobile.css).
   ============================================================ */

.bottom-nav {
  position: fixed;
  bottom: 0;
  height: var(--bar-h);
  width: 100%;
  background: var(--surface);
  border-top: 1px solid #e5e5e5;
  display: none;             /* Gerätedateien schalten ein/aus */
  justify-content: space-around;
  align-items: center;
  z-index: var(--z-search-popover);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav button {
  background: none;
  border: 0;
  font-size: 20px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
}


/* ============================================================
   9. SHEET / DIALOG-PANELS
   ============================================================ */

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  z-index: var(--z-sheet);
  padding: 24px 20px 32px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--sheet-shadow);
}

/* Button-Reihe am unteren Rand des Sheets */
.sheet-grid {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: flex-end;
}

.sheet-grid button {
  flex: 0 0 auto;
  width: auto;
  min-width: 180px;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #f1f5f9;
  color: #1f2937;
  font-weight: 700;
  font-size: 16px;
}

/* Schließen-Button oben rechts im Sheet */
.footerCloseSheet {
  display: flex;
  justify-content: flex-end;
  margin: -2rem -1rem 0 0;
}

.sheet-note {
  margin: 0 0 12px;
  color: #475569;
  font-size: 14px;
  line-height: 1.4;
}

/* Speichern-Dialog: 4-spaltig auf Desktop, 1-spaltig auf Mobil (Gerätedateien) */
.save-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.save-choice-grid button {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Kontextmenü für Knoten: 4-spaltig auf Desktop, 1-spaltig auf Mobil (Gerätedateien) */
.node-context-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.node-context-grid button {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

/* Info-Sheet (scrollbarer Inhalt) */
.app-info-sheet {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app-info-sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Kopfbereich im Info-Sheet */
.info-hero {
  display: grid;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.info-hero h3 {
  margin: 0 0 6px;
  color: var(--green-text);
}

.info-subtitle {
  margin: 0;
  color: #475569;
  line-height: 1.45;
}

.info-hero-icon {
  display: none;           /* Gerätedateien schalten sichtbar */
  object-fit: contain;
}

/* Zweispaltiges (oder einspaltig auf Mobil) Grid im Info-Sheet */
.app-info-grid {
  display: grid;
  gap: 16px;
}

/* Grünes Infotextfeld */
.app-info-text {
  background: var(--green-light-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.app-info-text h4,
.donation-panel h4 {
  margin: 0 0 8px;
  color: var(--green-text);
}

.app-info-text p,
.donation-panel p {
  margin: 8px 0;
  line-height: 1.45;
}

/* Spendenfeld */
.donation-panel {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.donation-card {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px;
  border: 1px solid var(--border);
}

.donation-card img {
  display: block;
  object-fit: contain;
}

/* Lizenz & Datum */
.license-note,
.last-modified {
  font-size: 14px;
  color: #334155;
  line-height: 1.45;
}

.license-note a {
  color: #2424a4;
  text-decoration: none;
  font-weight: 700;
}

/* Lizenzzeile: Link beginnt in eigener Zeile, Badge bleibt danach in derselben Zeile */
.license-linebreak {
  display: block;
}

.cc-badge-link {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
}

.cc-badge {
  display: block;
  width: 88px;
  height: 31px;
  vertical-align: middle;
}

.license-extra {
  display: inline-block;
  margin-top: 0.25rem;
  color: #475569;
  font-size: 0.95em;
}


/* ============================================================
   10. TOAST-BENACHRICHTIGUNGEN
   Position: in den Gerätedateien.
   ============================================================ */

/* Grundstruktur des Toasts. Position oben zentriert – gilt auf allen Geräten. */
.toast,
#toast {
  position: fixed;
  top: 84px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: auto;
  background: rgba(15, 23, 42, .9);
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  z-index: var(--z-toast);
  font-size: 14px;
  pointer-events: none;
  max-width: min(92vw, 620px);
}


/* ============================================================
   11. UPDATE-OVERLAY
   ============================================================ */

#updateProgressOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-update);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .62);
  padding: 24px;
}

#updateProgressOverlay.hidden {
  display: none !important;
}

.update-progress-card {
  width: min(360px, 92vw);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
  padding: 26px 22px;
  text-align: center;
  font-weight: 800;
  color: var(--text);
}

.update-spinner {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 12px;
}


/* ============================================================
   12. NAVIGATIONS-STATUS (Karte, während Navigation läuft)
   ============================================================ */

#navigationStatus {
  position: absolute;
  z-index: var(--z-modal-helper);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, .90);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  font-size: 14px;
}

#navigationStatus.hidden {
  display: none !important;
}

#navigationStatus button {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
}


/* ============================================================
   13. KNOTENPUNKT-MARKER (Leaflet)
   ============================================================ */

/* Einzelner Knoten-Marker: Der äußere divIcon-Container ist unsichtbar.
   Alle Darstellung liegt am inneren <span>. */
.cycle-node-marker,
.leaflet-marker-icon.cycle-node-marker {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  overflow: visible;
  z-index: var(--z-marker-active);
  -webkit-tap-highlight-color: transparent;
}

.cycle-node-marker:focus,
.cycle-node-marker:focus-visible,
.leaflet-marker-icon:focus,
.leaflet-marker-icon:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}

/* Innerer <span>: zeigt die Knotennummer als Pill */
.cycle-node-marker span,
.leaflet-marker-icon.cycle-node-marker span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  border: 3px solid var(--blue-node);
  color: var(--blue-node);
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
  box-shadow: var(--shadow);
  white-space: nowrap;
  outline: none;
}

/* Dreistellige Knotennummern (z.B. 899): breiter Pill */
.cycle-node-marker.node-label-3 span {
  min-width: 44px;
  height: 34px;
  font-size: 12px;
  letter-spacing: -0.03em;
}

/* Vierstellige oder längere Knotennummern */
.cycle-node-marker.node-label-wide span {
  min-width: 52px;
  height: 34px;
  font-size: 11px;
  letter-spacing: -0.04em;
}

/* Ausgewählter Knoten – orange mit blauem Leuchtring */
.cycle-node-marker.selected span,
.cycle-node-marker.is-selected span,
.leaflet-marker-icon.selected span,
.leaflet-marker-icon.is-selected span {
  background: var(--orange-route);
  color: #ffffff;
  border-color: #2563eb;
  box-shadow:
    0 0 0 5px rgba(37, 99, 235, .42),
    0 8px 20px rgba(15, 23, 42, .25);
  transform: none;
}

/* Knoten-Cluster
   Blau = Rad/Bike, Braun = Fuß/Wandern.
   Wichtig: Cluster dürfen nicht nur nach Menge gefärbt werden, sondern nach aktivem Modus. */
.cycle-node-cluster {
  border-radius: 50%;
  border: 0;
}

.cycle-node-cluster span {
  width: 38px;
  height: 38px;
  margin: 4px;
  border-radius: 50%;
  border: 3px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

/* Rad-Cluster */
.cycle-node-cluster,
.cycle-node-cluster.bike-node-cluster {
  background: rgba(37, 99, 235, .24);
}

.cycle-node-cluster span,
.cycle-node-cluster.bike-node-cluster span {
  background: rgba(37, 99, 235, .92);
}

/* Wander-/Foot-Cluster */
.cycle-node-cluster.foot-node-cluster {
  background: rgba(120, 65, 0, .26);
}

.cycle-node-cluster.foot-node-cluster span {
  background: rgba(120, 65, 0, .94);
  color: #fff;
}

/* Standard Leaflet-Cluster-Klassen überschreiben */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: rgba(37, 99, 235, .24);
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: rgba(37, 99, 235, .92);
  color: #fff;
  font-weight: 900;
}


/* ============================================================
   14. MODUS-UMSCHALTER (Rad / Wandern)
   ============================================================ */

/* Runder Umschalter-Button allgemein */
.mode-toggle-btn,
.mode-toggle-chip {
  width: 54px;
  height: 54px;
  min-width: 54px;
  min-height: 54px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-md);
}

.mode-toggle-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto 8px;
}

.mode-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  line-height: 1;
}

/* Die Textbeschriftung wird auf Mobil ausgeblendet, kann auf Desktop eingeschaltet werden */
.mode-toggle-label {
  display: none;
}

/* Umschalter im Header der Startseite */
.mode-header-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mode-header-toggle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(15, 118, 110, .28);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
}

.mode-header-toggle:active {
  transform: translateY(1px);
}

/* Rad-Modus: grüne Tönung */
body.rk-mode-bike .mode-toggle-btn,
body.rk-mode-bike .mode-toggle-chip {
  background: #ecfdf5;
  border-color: #16a34a;
}

/* Wander-Modus: warme Tönung */
body.rk-mode-hiking .mode-toggle-btn,
body.rk-mode-hiking .mode-toggle-chip {
  background: #fef3c7;
  border-color: #d97706;
}

body.rk-mode-hiking .mode-header-toggle {
  border-color: rgba(120, 113, 108, .36);
  background: #fff7ed;
}

/* Rad-Modus: blaue Marker */
body.rk-mode-bike .cycle-node-marker span,
body.rk-mode-bike .leaflet-marker-icon.cycle-node-marker span {
  border-color: var(--blue-node);
  color: var(--blue-node);
}

body.rk-mode-bike .cycle-node-marker.selected span,
body.rk-mode-bike .cycle-node-marker.is-selected span,
body.rk-mode-bike .leaflet-marker-icon.selected span,
body.rk-mode-bike .leaflet-marker-icon.is-selected span {
  background: var(--orange-route);
  color: #fff;
  border-color: #2563eb;
  box-shadow:
    0 0 0 5px rgba(37, 99, 235, .42),
    0 8px 20px rgba(15, 23, 42, .25);
}

/* Wander-Modus: braune Marker */
body.rk-mode-hiking .cycle-node-marker span,
body.rk-mode-hiking .leaflet-marker-icon.cycle-node-marker span {
  border-color: #a16207;
  color: #854d0e;
}

body.rk-mode-hiking .cycle-node-marker.selected span,
body.rk-mode-hiking .cycle-node-marker.is-selected span,
body.rk-mode-hiking .leaflet-marker-icon.selected span,
body.rk-mode-hiking .leaflet-marker-icon.is-selected span {
  background: #a16207;
  color: #ffffff;
  border-color: #ffffff;
  box-shadow:
    0 0 0 5px rgba(161, 98, 7, .32),
    0 8px 20px rgba(15, 23, 42, .25);
}

/* Unstruttal-Planungsknoten (spezielle Darstellung) */
.unstruttal-plan-node span {
  background: #fff7ed;
  color: #7c2d12;
  border: 2px solid rgba(154, 52, 18, .75);
  border-radius: var(--radius-pill);
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .18);
}

body.rk-mode-hiking .unstruttal-plan-node span {
  background: #ecfccb;
  border-color: rgba(77, 124, 15, .78);
  color: #365314;
}


/* ============================================================
   15. KNOTEN-LADEOVERLAY (erscheint beim Laden der Knotenpunkte)
   ============================================================ */

.knoten-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-loading);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, .36);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.knoten-loading-overlay.hidden {
  display: none !important;
}

.knoten-loading-card {
  width: min(340px, 88vw);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .30);
  padding: 24px 20px;
  text-align: center;
  color: var(--text);
}

.knoten-loading-hourglass {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  line-height: 1;
  animation: rk-hourglass-spin 1.15s linear infinite;
  transform-origin: center;
}

.knoten-loading-text {
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
}

.knoten-loading-time {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

@keyframes rk-hourglass-spin {
  0%   { transform: rotate(0deg); }
  45%  { transform: rotate(180deg); }
  55%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}


/* ============================================================
   16. ROUTENINFO (untere Anzeigebox mit km, Knotenanzahl, Liste)
   ============================================================ */

.route-info {
  position: absolute;
  left: 12px;
  bottom: 18px;
  z-index: var(--z-route-info);
  max-width: min(360px, calc(100vw - 24px));
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(15, 118, 110, .25);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
  padding: 18px;
  color: #0f172a;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 12px;
  overflow: visible;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.route-info.hidden {
  display: none !important;
}

.route-info:active {
  transform: scale(0.995);
}

.route-info * {
  pointer-events: auto;
}

.route-info-total {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 900;
  color: #0f766e;
  line-height: 1.1;
}

.route-info-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: clamp(16px, 3vw, 24px);
  font-weight: 900;
  margin-top: 2px;
}

/* Knotenliste als unterer Teil der Routeninfo */
.route-info-list {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  text-align: center;
  line-height: 1.35;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  margin: 2px 0 0 0;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

/* Schriftgröße je nach Anzahl der Knoten (density-Klassen werden per JS gesetzt) */
.route-info-list.route-list-density-1 {
  font-size: clamp(1.30rem, 3.8vw, 1.70rem);
}

.route-info-list.route-list-density-2 {
  font-size: clamp(1.08rem, 3.1vw, 1.42rem);
}

.route-info-list.route-list-density-3 {
  font-size: clamp(0.92rem, 2.6vw, 1.18rem);
  line-height: 1.30;
}

.route-info-list.route-list-density-4 {
  font-size: clamp(0.78rem, 2.2vw, 1.02rem);
  line-height: 1.24;
}


/* ============================================================
   17. ZOOM-BUTTONS (außerhalb der Routeninfo, eigene Position)
   ============================================================ */

/* Zoom-Buttons in der Karte (rechts unten) */
.route-map-zoom-controls {
  position: absolute;
  right: 42px;
  bottom: 118px;
  z-index: var(--z-map-zoom);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.route-map-zoom-controls.hidden {
  display: none !important;
}

.route-map-zoom-controls button,
#routeMapZoomControls button {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: var(--radius-pill);
  border: 0;
  background: #ffffff;
  color: #0f172a;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: manipulation;
}

.route-map-zoom-controls button:active {
  transform: translateY(1px);
}

/* Die alten Zoom-Buttons innerhalb der Routeninfo sind deaktiviert */
.route-info .route-info-zoom-controls {
  display: none !important;
}


/* ============================================================
   18. KNOTENLISTE (Overlay-Panel mit allen gewählten Knoten)
   ============================================================ */

.route-nodes-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-nodes-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
}

.route-nodes-sheet.hidden {
  display: none !important;
}

.route-nodes-sheet.open {
  display: flex;
  pointer-events: auto;
}

.route-nodes-card {
  width: min(720px, calc(100vw - 24px));
  max-height: min(78vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 28px 28px 18px 18px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.34);
  pointer-events: auto;
  z-index: calc(var(--z-nodes-sheet) + 1);
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.route-nodes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: #ffffff;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  pointer-events: auto;
  opacity: 1;
}

.route-nodes-head strong {
  font-size: 1.08rem;
  color: #0f172a;
}

#routeNodesCloseBtn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #eef2f7;
  color: #0f172a;
  font-size: 1.6rem;
  line-height: 1;
}

.route-nodes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow: auto;
  background: #eef2f6;
  pointer-events: auto;
  opacity: 1;
}

.route-nodes-empty {
  margin: 0;
  padding: 18px;
  border-radius: 18px;
  background: #ffffff;
  color: #475569;
  border: 1px dashed rgba(148, 163, 184, 0.45);
}

/* Einzelne Zeile in der Knotenliste */
.route-node-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 22px;
  padding: 8px 10px;
  min-height: 82px;
  pointer-events: auto;
  opacity: 1;
}

/* Gelber Knotenbutton (springt auf der Karte zum Knoten) */
.route-node-jump {
  flex: 0 0 108px;
  width: 108px;
  min-width: 108px;
  height: 66px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: #FFEB3B;
  color: #0f172a;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.route-node-jump:active,
.route-node-jump:focus-visible {
  background: #FDD835;
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

/* Entfernungsangabe zwischen zwei Knoten */
.route-node-distance {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 500;
  color: #475569;
  text-align: center;
  line-height: 1.2;
}

/* Entfernen-Button für einen Knoten */
.route-node-remove {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 2px solid rgba(203, 213, 225, 0.95);
  background: #f8fafc;
  font-size: 1.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.route-node-remove:hover,
.route-node-remove:focus-visible {
  background: #fee2e2;
  border-color: #f87171;
}

/* Alte Felder, die durch die neue Struktur ersetzt wurden */
.route-node-main,
.route-node-actions,
.route-node-center {
  all: unset;
}


/* ============================================================
   19. MOBILES SEITENMENÜ (Overlay links)
   ============================================================ */

/* Der Menü-Container: Basisregeln gelten auf Handy und Tablet.
   Sichtbarkeit wird ausschließlich über .hidden / .open gesteuert. */
.mobile-map-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: rgba(15, 23, 42, .35);
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  pointer-events: auto;
}

.mobile-map-menu.hidden {
  display: none !important;
}

.mobile-map-menu.open {
  display: flex;
  pointer-events: auto;
}

/* Die Menükarte (linke Seite) */
.mobile-menu-card {
  width: min(86vw, 360px);
  max-width: 360px;
  height: 100dvh;
  border-radius: 0 24px 24px 0;
  background: rgba(255, 255, 255, .97);
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 12px 0 35px rgba(15, 23, 42, .28);
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

/* Alle Menü-Buttons */
.mobile-menu-card button {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  text-align: left;
  justify-content: flex-start;
  padding-inline: 18px;
  font-weight: 800;
}

/* Schließen-Button ist rund */
#mobileMenuCloseBtn {
  width: 46px;
  min-height: 46px;
  border-radius: 50%;
  text-align: center;
  justify-content: center;
  padding: 0;
}

/* Hamburger-Button in der Karte */
#mobileMenuBtn {
  position: relative;
  z-index: var(--z-controls);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

/* Zoom-Buttons im Hamburger-Menü (floating, rechts unten) */
.mobile-map-menu .zoom-buttons {
  position: fixed;
  left: 12rem;
  bottom: 13rem;
  z-index: calc(var(--z-menu) + 1);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.mobile-map-menu .zoom-buttons button,
button#menuZoomInBtn,
button#menuZoomOutBtn {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  max-width: 52px;
  max-height: 52px;
  padding: 0;
  border-radius: var(--radius-pill);
  border: 0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button#menuZoomOutBtn span,
button#menuZoomInBtn span {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  position: relative;
  top: -3px;
}

/* Knoten laden + Zoom-Buttons als einfacher Block */
.mobile-map-menu .menu-control-group {
  display: block;
  position: relative;
  width: 100%;
}

.mobile-map-menu .menu-control-group #menuLoadAreaBtn {
  width: 100%;
  justify-content: flex-start;
}

/* Disabled-Zustand für Lade-Buttons */
#desktopLoadAreaBtn:disabled,
#mobileLoadAreaBtn:disabled,
#menuLoadAreaBtn:disabled {
  opacity: .42;
  cursor: not-allowed;
}


/* ============================================================
   20. MOBILE KARTEN-TOOLBAR (oben in der Kartenansicht)
   Wird nur auf Mobil angezeigt – Gerätedatei schaltet sie ein.
   ============================================================ */

.mobile-map-controls {
  pointer-events: none;
}

.mobile-map-controls #mobileMenuBtn {
  pointer-events: auto;
}


/* ============================================================
   21. OVERLAY-REIHENFOLGE (Zusammenfassung)
   Alle z-index-Werte kommen aus den Variablen in :root.
   Hier nur explizite Ausnahmen dokumentiert.
   ============================================================ */

/* Das Sheet selbst liegt über der Knotenliste */
#sheet {
  z-index: var(--z-sheet);
}

/* Knoten-Kontextmenü liegt direkt über dem Sheet */
.node-context-grid,
.sheet-grid.node-context-grid {
  position: relative;
  z-index: calc(var(--z-sheet) + 2);
}