:root {
  /* Lässt Formularfelder, Scrollbalken und den Default-Hintergrund mit dem Theme
     mitgehen -- ohne das blieben die Eingabefelder im Builder hell. */
  color-scheme: light dark;

  /* Neutrale, ruhige Palette */
  --bg:        #F5F6F7;
  --surface:   #FFFFFF;
  --surface-2: #FAFBFC;
  --ink:       #1F2933;  /* Haupttext  */
  --muted:     #6B7280;  /* Sekundär  */
  --hair:      #E3E6E9;  /* Linien     */
  --hair-strong: #CDD3D8; /* Linien bei Hover */
  --accent:    #2C6E9B;  /* gedecktes Stahlblau (einziger Akzent) */
  --accent-soft: #EAF1F6;
  --on-accent: #FFFFFF;  /* Text auf --accent */
  --star-off:  #C2CAD1;  /* nicht gemerkter Stern */
  --danger:      #B3261E;
  --danger-line: #E8C6C3;
  --danger-soft: #FBEEED;

  /* Die Karte bleibt in beiden Themes hell: OpenTopoMap hat keine dunkle Variante,
     und abgedunkeltes Relief liest sich schlecht. Alles, was auf der Karte liegt,
     braucht darum eine eigene Palette, die im Dark Mode nicht mitkippt. */
  --map-ink:    #1F2933;
  --map-accent: #2C6E9B;

  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --r: 12px;
}

/* Nur screen: im Druck soll nie das dunkle Theme greifen. Die Karten-Tokens
   (--map-*) bleiben bewusst unverändert. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg:        #12161A;
    --surface:   #1A1F25;
    --surface-2: #222930;
    --ink:       #E7EBEF;
    --muted:     #9CA7B2;
    --hair:      #2F3740;
    --hair-strong: #46505B;
    --accent:    #6FB3DC;
    --accent-soft: #1C2B36;
    --on-accent: #10171D;
    --star-off:  #525C67;
    --danger:      #F0938C;
    --danger-line: #5C2F2B;
    --danger-soft: #35211F;
  }
  /* Hell ist --surface-2 heller als --surface, dunkel ist es umgekehrt. Damit der
     aktive Tab weiter "erhaben" statt eingelassen wirkt, Schienen- und Pillenfarbe
     hier tauschen. */
  .tabs { background: var(--bg); }
  .tabs__btn.is-active { background: var(--surface-2); }
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;      /* Desktop: feste Höhe -> Panel scrollt eigenständig */
  overflow: hidden;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
}
.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.topbar__brand { display: flex; align-items: center; gap: 10px; }
.topbar__logo { flex: none; width: 30px; height: 30px; border-radius: 8px; }
.topbar__brand-text { display: flex; flex-direction: column; }
.topbar__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.topbar__eyebrow strong { color: var(--accent); }
.topbar__title {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  margin: 1px 0 0;
  letter-spacing: -0.01em;
}
.topbar__sub { margin: 0; max-width: 640px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.topbar__meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.topbar__author { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.topbar__updated {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Layout ---------- */
.body { flex: 1; display: flex; min-height: 0; }

.panel {
  width: 360px;
  flex: 0 0 360px;
  background: var(--surface);
  border-right: 1px solid var(--hair);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.panel__head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  padding: 15px 18px 11px;
  border-bottom: 1px solid var(--hair);
}
.panel__head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel__count { font-size: 12px; font-weight: 600; color: var(--ink); }
.panel__hint { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.fav-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 2px;
}
.fav-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---------- Tabs (Vorschläge / Eigene Route) ---------- */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 11px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 3px;
}
.tabs__btn {
  flex: 1 1 0;
  min-height: 38px;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tabs__btn:hover { color: var(--ink); }
.tabs__btn.is-active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tabs__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Marker-Legende */
.legend {
  display: flex;
  gap: 14px;
  margin: 9px 0 0;
  font-size: 11px;
  color: var(--muted);
}
.legend__item { display: inline-flex; align-items: center; gap: 5px; }
.legend__dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* Legende erklärt die Marker, also dieselbe feste Karten-Palette */
  background: var(--map-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
}
.legend__dot--af { background: var(--map-ink); border-radius: 4px; }

/* Visuell versteckt, aber für Screenreader vorhanden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Cards ---------- */
.routes { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; }
.routes__loading { padding: 24px 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden; /* rundet die Bildergalerie oben mit der Karte ab */
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--hair-strong); }

/* Der ganze Kartenkörper ist per Klick wählbar (Listener auf .card); für
   Tastatur und Screenreader gibt es genau diesen einen Button auf dem
   Routennamen. Früher war die ganze Karte ein <button> -- mit dem Merken-Stern
   darin, also ein Button im Button. */
.card__select {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.card__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.card__body { padding: 14px 15px 13px; }

/* ---------- Karten-Bildergalerie (0 / 1 / mehrere Bilder je Route) ---------- */
.card__gallery { position: relative; background: var(--surface-2); }

.card__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}
.card__track::-webkit-scrollbar { height: 6px; }
.card__track::-webkit-scrollbar-track { background: transparent; }
.card__track::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 4px; }
.card__track::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.card__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16 / 9;
}
.card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-2);
}

.card__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none; /* rein visuell, Klick soll immer die Karte auswählen */
}
.card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  transition: background .15s, transform .15s;
}
.card__dot.is-active { background: #fff; transform: scale(1.3); }

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card__name { font-weight: 600; font-size: 16px; line-height: 1.2; margin: 0; }
.card__desc { margin: 7px 0 12px; font-size: 13px; line-height: 1.45; color: var(--muted); }

.card__readouts {
  display: flex;
  gap: 18px;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--hair);
  padding-top: 11px;
}
.readout { display: flex; flex-direction: column; gap: 1px; }
.readout b { font-size: 14px; font-weight: 600; }
.readout span { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }

/* Lange Routen (20+ Wegpunkte) machen den Streifen doppelt so hoch wie bei den
   übrigen Karten. Inaktiv auf drei Zeilen kürzen -- so hoch ist der Streifen bei
   den meisten Routen ohnehin -- und bei der gewählten Route ganz ausschreiben. */
.card__strip {
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.card.is-active .card__strip {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}
.card__strip .sep { padding: 0 2px; opacity: .6; }

/* Kosten-Richtwert: dezent, aber gut lesbar */
.card__cost {
  margin-top: 9px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Hinweis auf weitere Routen (keine Karte) */
.routes__note {
  margin: 4px 3px 2px;
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px dashed var(--hair);
  border-radius: var(--r);
}

/* ---------- Eigene Route (Builder) ---------- */
.builder { padding: 14px 15px 18px; display: flex; flex-direction: column; gap: 16px; }
.builder[hidden] { display: none; }
.builder__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.builder__section { display: flex; flex-direction: column; gap: 8px; }
.builder__label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.builder__count { text-transform: none; letter-spacing: normal; font-weight: 500; }

/* Buttons: min. 44px hoch als Touch-Ziel */
.btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--hair-strong); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { width: 100%; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { opacity: .92; }
.btn--place { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn--place.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.map.is-placing { cursor: crosshair; }
.btn--danger { color: var(--danger); border-color: var(--danger-line); }
.btn--danger:hover { background: var(--danger-soft); }
.btn__icon { font-size: 15px; line-height: 1; }

.builder__form { display: flex; flex-direction: column; gap: 8px; }
.builder__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.field textarea { min-height: 60px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.field__error { margin: 0; font-size: 12px; color: var(--danger); }

.wp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wp-list__empty {
  padding: 12px 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px dashed var(--hair);
  border-radius: var(--r);
}
.wp-list__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 12.5px;
}
.wp-list__name { flex: 1 1 auto; font-weight: 600; overflow-wrap: anywhere; }
.wp-list__coords { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wp-list__actions { display: flex; gap: 4px; flex: 0 0 auto; }
.wp-list__btn {
  min-width: 32px;
  min-height: 32px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.wp-list__btn:hover { border-color: var(--hair-strong); }
.wp-list__btn:disabled { opacity: .35; cursor: not-allowed; }
.wp-list__btn--danger { color: var(--danger); border-color: var(--danger-line); }
.wp-list__btn--danger:hover { background: var(--danger-soft); }

.builder__readouts {
  display: flex;
  gap: 18px;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 11px 0;
}

.builder__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.builder__actions .btn { flex: 1 1 120px; }
.builder__importHint { margin: 0; font-size: 12px; color: var(--muted); min-height: 1em; }
.builder__importHint.is-error { color: var(--danger); font-weight: 500; }

.import-more__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.import-more__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; }
.import-more__btn span:last-child { font-size: 11px; font-weight: 500; color: var(--muted); }

/* Merken-Stern (44x44 Touch-Target, optisch aber wie zuvor bündig oben rechts) */
.star {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -13px -15px -13px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--star-off);
  transition: color .15s;
}
.star:hover { color: var(--accent); }
.star.is-on { color: var(--accent); }
.star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Map ---------- */
.map { flex: 1; min-height: 0; background: var(--surface-2); }

/* Platz-Modus-Hinweis liegt auf der Karte statt im Panel: auf Mobile steht das
   Panel unter der Karte, dort wäre der Hinweis genau dann ausser Sicht, wenn man
   ihn braucht. Die Einzüge halten Zoom-Control (links, 44px breit) und
   Ebenen-Control (rechts, 58px) frei, je mit 10px Abstand; pointer-events: none,
   damit der Tipp die Karte erreicht. */
.map__banner {
  position: absolute;
  top: 10px;
  left: 54px;
  right: 68px;
  z-index: 1000;
  margin: 0;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: var(--map-accent);
  border-radius: var(--r);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.map__banner[hidden] { display: none; }

.wp {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--map-accent);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.wp--af { background: var(--map-ink); border-radius: 6px; }

/* ---------- Disclaimer ---------- */
/* Als <details>: die rechtlich relevante Aussage steht in der immer sichtbaren
   Zusammenfassung, nur die Begründung klappt auf. Das gibt auf dem Desktop die
   Dauerzeile am unteren Rand zurück, ohne den Hinweis zu verstecken.
   flex: none, damit bei offener Box die Karte schrumpft und nicht der Rechtstext. */
.disclaimer {
  flex: none;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
  border-top: 1px solid var(--hair);
}
.disclaimer__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 22px;
  cursor: pointer;
  list-style: none; /* Firefox-Dreieck */
}
.disclaimer__summary::-webkit-details-marker { display: none; } /* Safari-Dreieck */
.disclaimer__summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform .15s;
}
.disclaimer__box[open] .disclaimer__summary::before { transform: rotate(45deg); }
.disclaimer__summary strong { color: var(--ink); }
.disclaimer__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.disclaimer__text { margin: 0; padding: 0 22px 12px 37px; max-width: 92ch; }

/* ---------- Responsive ---------- */

/* Tablet / kleine Laptops im Querformat: Panel schmaler statt fix 360px.
   Hochkant wird stattdessen gestapelt (Regel unten) -- nebeneinander blieben der
   Karte sonst nur ~500px, und die Routenkarten werden im schmalen Panel sehr hoch. */
@media (max-width: 1024px) and (min-width: 761px) and (orientation: landscape) {
  .panel { width: 300px; flex: 0 0 300px; }
}

/* Gestapelt: Handy in jeder Lage und Tablet hochkant (768-1024px) */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .app { height: auto; min-height: 100dvh; overflow: visible; }
  .body { flex-direction: column; }
  .panel {
    width: 100%; flex: none; border-right: none; order: 2; overflow: visible;
    /* Flex-Items stapeln sich sonst per Malreihenfolge über der sticky Karte
       (unabhängig von z-index:auto) -- ohne dies fängt der Tab-Umschalter beim
       Scrollen an, sichtbar über der Karte zu "schweben" statt sauber dahinter
       zu verschwinden. */
    position: relative;
    z-index: 0;
  }
  .map {
    order: 1;
    position: sticky;
    top: 0;
    z-index: 1;
    /* Ohne dieses flex:none gewinnt das flex-basis:0% aus der Basisregel (.map { flex: 1 })
       gegen height:46dvh -- die Karte fiel dadurch auf ihre min-height von 240px
       zusammen statt die vorgesehenen 46dvh hoch zu sein. */
    flex: none;
    /* dvh, nicht vh: sonst springt die Kartenhöhe auf iOS Safari beim Ein- und
       Ausblenden der Adressleiste, während .app mit 100dvh stehen bleibt. */
    height: 46dvh;
    min-height: 240px;
    border-bottom: 1px solid var(--hair);
  }
  .panel__head { position: static; }
}

/* Handy im Querformat: 46dvh ist zu hoch, wenig Platz für die Liste darunter */
@media (max-width: 760px) and (orientation: landscape) {
  .map { height: min(46dvh, 220px); min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Druck ---------- */
@media print {
  .topbar__sub, .disclaimer, .panel__hint, .fav-toggle, .star, .map__banner,
  .leaflet-control-container, .routes__note, .card__gallery { display: none !important; }
  /* Auf Papier gibt es keine Auswahl -- Wegpunkte immer vollständig */
  .card__strip { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  .app { height: auto; overflow: visible; }
  .body { display: block; }
  .map {
    position: static;
    height: 320px;
    width: 100%;
    page-break-inside: avoid;
  }
  .panel { width: 100%; overflow: visible; }
  .card { break-inside: avoid; box-shadow: none; }
}