/* ── Die Karte einer Ausfahrt ───────────────────────────────────────────────
   Ein Gitter mit drei Feldern: Karte, Leiste, Feld rechts. Am Schreibtisch
   steht rechts von der Karte das Feld (Zusammenfassung, Karte des gewählten
   Halts, Navigation) über die ganze Höhe, und unter der Karte die Leiste:
   ‹ ► › links, rechts davon die Zeitleiste der Halte. Auf dem Telefon:
   Karte, Leiste, Feld, untereinander (grid-template-areas), nichts wird
   zweimal gebaut.

   Ausserhalb des Mitgliederbereichs gibt es keine Zeitleiste: die öffentliche
   Fassung kennt nur die Karte, die Leiste (Pause/Überspringen/Noch einmal)
   und im Feld die Zusammenfassung ohne Namen.
   ────────────────────────────────────────────────────────────────────────── */

[data-strecke] {
  --k-ink-leise: #6b5f57;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  /* Die zweite Reihe nimmt, was das Feld rechts an Höhe mehr braucht, damit
     die Leiste direkt unter der Karte bleibt. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "karte  panel"
    "leiste panel";
  align-items: start;
  gap: 0.7rem 1rem;
  margin: 1.2rem 0;
}
.strecke-karte {
  grid-area: karte;
  position: relative;
  min-height: 420px;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--line, #d9cfc1);
  background: #efe9e0;
}
.strecke-karte .karte { position: absolute; inset: 0; }
.karte-ohne { padding: 2rem; text-align: center; font-size: 0.88rem; color: var(--k-ink-leise); }

.strecke-laedt,
.strecke-hinweis {
  font-size: 0.85rem;
  color: var(--k-ink-leise);
  padding: 0.6rem 0;
}

/* Das Feld rechts ───────────────────────────────────────────────────────
   Von oben nach unten: die Zusammenfassung, die Karte des gewählten Halts,
   der Hinweis, die Navigation. ── */
.strecke-panel {
  grid-area: panel;
  display: flex; flex-direction: column; gap: 0.85rem;
  min-width: 0;
  font-size: 0.85rem;
}
.strecke-panel .strecke-hinweis { padding: 0; margin: 0; }
.strecke-kopf {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line, #d9cfc1);
  color: var(--k-ink-leise);
}
.strecke-kopf b { color: var(--burgundy, #6b2030); font-weight: 500; }

/* Navigation (nur Mitglieder) ───────────────────────────────────────────────
   Der Hauptknopf unten im Feld: das Gold des Hauses mit dunkler Schrift, auf
   der ganzen Breite der Spalte, auf dem Telefon also der Seite. Darunter der
   leise Knopf zum nächsten Halt und der Hinweis. ── */
.navi-block { display: grid; gap: 0.5rem; margin: 0; }
.navi-start,
.navi-naechster {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; box-sizing: border-box;
  min-height: 2.9rem;
  border-radius: 2rem;
  font: 600 0.84rem/1.2 'Inter', sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.navi-start {
  background: var(--gold, #f5c800);
  color: var(--ink, #1f1a17);
  border: 1px solid var(--gold, #f5c800);
}
.navi-start:hover { background: #ffd700; border-color: #ffd700; }
.navi-start svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.navi-naechster {
  flex-direction: column; gap: 0.1rem;
  background: #fff;
  color: var(--burgundy, #6b2030);
  border: 1px solid var(--burgundy, #6b2030);
  padding: 0.5rem 1rem;
  font-weight: 500;
}
.navi-naechster[hidden] { display: none; }
.navi-naechster:hover { background: var(--burgundy, #6b2030); color: #fff; }
.navi-naechster-ziel { font-size: 0.75rem; font-weight: 400; opacity: 0.85; }
.navi-naechster-ziel:empty { display: none; }
.navi-hinweis { margin: 0.1rem 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--k-ink-leise); }
.navi-start:focus-visible, .navi-naechster:focus-visible,
.navi-app:focus-visible, .navi-leg:focus-visible, .navi-abbrechen:focus-visible {
  outline: 2px solid var(--ink, #1f1a17); outline-offset: 2px;
}

/* Die Auswahl: zwei Apps, Abbrechen. Die vorgewählte trägt das Gold. ── */
.navi-dialog {
  /* Mitte des Bildschirms, waagrecht und senkrecht. Die Seite setzt für
     jedes Element margin: 0, und das nimmt dem Fenster seinen automatischen
     Rand: ohne die Zeilen hier klebte es links oben. */
  position: fixed; inset: 0; margin: auto;
  width: min(24rem, calc(100vw - 2rem)); height: fit-content;
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow-y: auto; overscroll-behavior: contain;
  box-sizing: border-box; padding: 0; border: 0; border-radius: 1rem;
  color: var(--ink, #1f1a17); background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.navi-inhalt { padding: 1.4rem; }
/* Sehr dunkler, halbdurchsichtiger Grund: die Auswahl ist das Einzige, was zählt. */
.navi-dialog::backdrop { background: rgba(20, 14, 16, 0.82); }
.navi-dialog h4 { font: 400 1.25rem/1.2 'Cormorant Garamond', serif; color: var(--burgundy, #6b2030); margin: 0 0 1rem; }
.navi-apps { display: grid; gap: 0.5rem; margin-bottom: 0.7rem; }
.navi-app {
  min-height: 2.8rem; border-radius: 2rem; cursor: pointer;
  background: #fff; color: var(--burgundy, #6b2030); border: 1px solid var(--burgundy, #6b2030);
  font: 600 0.88rem 'Inter', sans-serif;
}
.navi-app.vorgabe { background: var(--gold, #f5c800); color: var(--ink, #1f1a17); border-color: var(--gold, #f5c800); }
.navi-app:hover { background: var(--bg-warm, #ede5d9); }
.navi-app.vorgabe:hover { background: #ffd700; }
.navi-abbrechen {
  background: none; border: 0; padding: 0.5rem 0.3rem; cursor: pointer;
  font: 500 0.8rem 'Inter', sans-serif; color: var(--k-ink-leise); text-decoration: underline;
}
.navi-geteilt { font-size: 0.82rem; line-height: 1.5; color: var(--k-ink-leise); margin: 0 0 0.8rem; }
.navi-etappen { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.6rem; }
.navi-etappen li { display: grid; gap: 0.35rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line, #d9cfc1); border-radius: 0.8rem; font-size: 0.85rem; }
.navi-leg {
  justify-self: start; min-height: 2.3rem; display: inline-flex; align-items: center;
  padding: 0 1.1rem; border-radius: 2rem; text-decoration: none;
  background: var(--gold, #f5c800); color: var(--ink, #1f1a17); font: 600 0.8rem 'Inter', sans-serif;
}
.navi-leg:hover { background: #ffd700; }
.navi-fuss { display: flex; justify-content: space-between; gap: 1rem; }

/* Pastillen und der fahrende Punkt ───────────────────────────────────────
   Dieselbe Pastille wie im Planer. Sie steht hier noch einmal, weil der
   Mitgliederbereich das Papier der Verwaltung nicht lädt. ── */
.karten-marke {
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--burgundy, #6b2030);
  color: #fff;
  font: 500 0.75rem/1 'Inter', sans-serif;
  display: grid; place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(31, 26, 23, 0.3);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
/* Ein Halt, an dem die Führung schon vorbei ist: gedämpft, aber lesbar.
   Der aktuelle bekommt einen Hof, damit er auch auf einen Blick auffällt. */
.karten-marke.vergangen { opacity: 0.45; }
.karten-marke.aktuell { box-shadow: 0 0 0 4px rgba(107, 32, 48, 0.25), 0 2px 6px rgba(31, 26, 23, 0.3); }
/* Mehrere Halte am selben Ort, eine Pastille: breiter statt rund, mit allen
   Nummern («3 · 8») statt einer – wie im Planer (assets/planer.css). Ein
   Klick springt zum ersten der Gruppe. */
.karten-marke-gruppe {
  width: auto; height: 1.7rem;
  padding: 0 0.5rem;
  white-space: nowrap;
  border-radius: 1rem;
  font-size: 0.7rem;
}
.karten-marke-gruppe:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Drei Stufen, drei Grössen, dieselben Masse wie im Planer (assets/
   planer.css): ein gewöhnlicher Halt braucht keine eigene Klasse. Ein
   Hauptstopp ist nur wenig grösser – sein Name daneben (.marke-name)
   trägt die Betonung, nicht die Pastille. */
.karten-marke-hauptstopp { width: 1.95rem; height: 1.95rem; font-size: 0.8rem; }
.karten-marke-infopunkt { width: 1.05rem; height: 1.05rem; font-size: 0.55rem; border-width: 1.5px; }
.karten-marke-gruppe.karten-marke-hauptstopp { width: auto; height: 1.95rem; font-size: 0.75rem; }
.karten-marke-gruppe.karten-marke-infopunkt { width: auto; height: 1.05rem; font-size: 0.55rem; }
/* Derselbe Name wie im Planer (assets/planer.css): ein eigenes DOM-
   Element, kein MapLibre-Symbol, das bei Gedränge verschwinden dürfte. */
.marke-name {
  font: 500 0.72rem/1.15 'Inter', sans-serif;
  color: var(--burgundy, #6b2030);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(31, 26, 23, 0.18);
}

/* Der Punkt, der die Strecke abfährt. Der Kern steht still, der Ring weitet
   sich einmal in der Sekunde und vergeht. */
.karten-punkt {
  position: relative;
  width: 1rem; height: 1rem;
  pointer-events: none;
}
.karten-punkt .kern {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--punkt, #6b2030);
  border: 2px solid #fff;
  box-sizing: border-box;
}
.karten-punkt .puls {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--punkt, #6b2030);
  animation: punkt-puls 1.1s ease-out infinite;
}
@keyframes punkt-puls {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.6); opacity: 0;    }
  100% { transform: scale(2.6); opacity: 0;    }
}

/* Die Karte des gewählten Halts ─────────────────────────────────────────
   So hoch wie ihr Inhalt, ohne Mindesthöhe: ein Halt ohne Bild und mit zwei
   Zeilen Text ist eine kleine Karte. Oben der Vorspann («Hauptstopp 2») mit
   ‹ › für den vorherigen und den nächsten Halt. Leer (öffentlich, zwischen
   zwei Halten) steht gar nichts da. ── */
.fuehrung-karte {
  background: #fff;
  border-radius: 0.9rem;
  border: 1px solid var(--line, #d9cfc1);
  box-shadow: 0 6px 20px rgba(31, 26, 23, 0.08);
  overflow: hidden;
}
.fuehrung-karte:empty { display: none; }
.fuehrung-karte img { width: 100%; height: 8rem; object-fit: cover; display: block; }
.fuehrung-text { padding: 0.8rem 0.95rem 0.9rem; }
.fuehrung-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2rem; }
.fuehrung-karte .art { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-ink-leise); }
.fuehrung-karte h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 400; margin: 0.1rem 0 0.2rem; }
.fuehrung-karte .zeit { font-size: 0.78rem; color: var(--burgundy, #6b2030); font-weight: 500; margin-bottom: 0.3rem; }
.fuehrung-karte p { font-size: 0.83rem; margin: 0; line-height: 1.45; }
.fuehrung-karte p.naechste { margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px dashed var(--line, #d9cfc1); color: var(--k-ink-leise); }
.fuehrung-karte p.naechste b { color: var(--burgundy, #6b2030); font-weight: 500; }
.fuehrung-pfeile { display: inline-flex; gap: 0.3rem; flex: 0 0 auto; }
.fuehrung-pfeile button {
  width: 2.1rem; height: 2.1rem; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line, #d9cfc1);
  background: #fff; color: var(--k-ink-leise);
  font: 400 1.1rem/1 'Inter', sans-serif;
  cursor: pointer;
}
.fuehrung-pfeile button:hover:not(:disabled) { border-color: var(--burgundy, #6b2030); color: var(--burgundy, #6b2030); }
.fuehrung-pfeile button:disabled { opacity: 0.35; cursor: default; }
.fuehrung-pfeile button:focus-visible { outline: 2px solid var(--burgundy, #6b2030); outline-offset: 2px; }

/* Die Leiste unter der Karte ──────────────────────────────────────────────
   Bei Mitgliedern: links Zurück, Play/Pause, Vor, rechts davon die Zeitleiste
   (ein Chip je Halt), die für sich waagrecht scrollt. Die öffentliche Fassung
   zeigt statt dessen ihre textbeschrifteten Knöpfe (Pause/Überspringen/Noch
   einmal) in derselben Leiste. ── */
.fuehrung-leiste {
  grid-area: leiste;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-height: 2.3rem;
  min-width: 0;
}
.fuehrung-leiste.mit-zeitleiste { flex-wrap: nowrap; gap: 0.6rem; }
.fuehrung-leiste > button,
.fuehrung-knoepfe > button {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.75rem;
  border-radius: 2rem;
  border: 1px solid var(--line, #d9cfc1);
  background: #fff;
  color: var(--k-ink-leise);
  cursor: pointer;
  min-width: 2.3rem;
  min-height: 2.3rem;
}
.fuehrung-leiste > button:hover:not(:disabled),
.fuehrung-knoepfe > button:hover:not(:disabled) { border-color: var(--burgundy, #6b2030); color: var(--burgundy, #6b2030); }
.fuehrung-leiste > button:disabled,
.fuehrung-knoepfe > button:disabled { opacity: 0.35; cursor: default; }
.fuehrung-knoepfe > button[data-tat="spiel"] { font-size: 0.9rem; }
.fuehrung-knoepfe { display: flex; gap: 0.4rem; flex: 0 0 auto; }

.zeit-reihe {
  list-style: none; margin: 0;
  padding: 0.4rem 0.3rem;
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center;
  position: relative;               /* damit offsetLeft der Chips von hier zählt */
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;   /* wischen in der Leiste blättert nicht die Seite */
  scrollbar-width: thin;
  /* Weiche Ränder: was weiter rechts oder links liegt, läuft aus dem Bild. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 0.5rem, #000 calc(100% - 0.5rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 0.5rem, #000 calc(100% - 0.5rem), transparent);
}
.zeit-halt { display: flex; align-items: center; flex: 0 0 auto; }
.zeit-halt:not(:last-child)::after {
  content: ''; width: 0.8rem; height: 2px; flex: 0 0 auto;
  background: var(--line, #d9cfc1);
}
.zeit-halt.vergangen:not(:last-child)::after { background: var(--burgundy, #6b2030); opacity: 0.45; }
.zeit-chip {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; box-sizing: border-box;
  padding: 0.3rem 0.85rem 0.3rem 0.35rem;
  border-radius: 1.7rem;
  border: 1px solid var(--line, #d9cfc1);
  background: #fff; color: var(--ink, #1f1a17);
  font-family: 'Inter', sans-serif; text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.zeit-chip:hover { border-color: var(--burgundy, #6b2030); }
.zeit-chip:focus-visible { outline: 2px solid var(--ink, #1f1a17); outline-offset: 2px; }
.zeit-chip .zn {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--burgundy, #6b2030); color: #fff;
  font-size: 0.72rem; font-weight: 500;
}
.zeit-chip .zw { display: grid; gap: 0.05rem; min-width: 0; line-height: 1.2; }
.zeit-chip .zname {
  font-size: 0.78rem; font-weight: 500;
  max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zeit-chip .zzeit { font-size: 0.7rem; color: var(--k-ink-leise); }
.zeit-chip .zmarke { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy, #6b2030); }
/* Hauptstopp: in Burgund gefüllt, der Name immer ganz. */
.zeit-hauptstopp .zeit-chip { background: var(--burgundy, #6b2030); border-color: var(--burgundy, #6b2030); color: #fff; }
.zeit-hauptstopp .zn { background: #fff; color: var(--burgundy, #6b2030); }
.zeit-hauptstopp .zname { max-width: none; overflow: visible; text-overflow: clip; font-weight: 600; }
.zeit-hauptstopp .zzeit, .zeit-hauptstopp .zmarke { color: rgba(255, 255, 255, 0.85); }
/* Infopunkt: kleiner und leiser, gestrichelt. */
.zeit-infopunkt .zeit-chip { min-height: 2.2rem; padding: 0.2rem 0.65rem 0.2rem 0.25rem; border-style: dashed; background: transparent; gap: 0.35rem; }
.zeit-infopunkt .zn { width: 1.2rem; height: 1.2rem; font-size: 0.58rem; background: var(--k-ink-leise); }
.zeit-infopunkt .zname { font-size: 0.7rem; font-weight: 400; color: var(--k-ink-leise); max-width: 6rem; }
.zeit-infopunkt .zzeit { font-size: 0.62rem; }
/* Start und Ziel: dunkler Rand und eine Marke über dem Namen. */
.zeit-start .zeit-chip, .zeit-ziel .zeit-chip { border: 2px solid var(--ink, #1f1a17); }
/* Vergangen: gedämpft. Der aktuelle Halt: Goldring, getönt (der Hauptstopp
   bleibt gefüllt) – dasselbe Gold wie der Navigationsknopf. */
.zeit-halt.vergangen .zeit-chip { opacity: 0.6; }
.zeit-chip.aktuell {
  opacity: 1;
  border-color: var(--burgundy, #6b2030);
  background: #fde8eb;
  box-shadow: 0 0 0 3px var(--gold, #f5c800);
}
.zeit-hauptstopp .zeit-chip.aktuell { background: var(--burgundy, #6b2030); }
.zeit-start .zeit-chip.aktuell, .zeit-ziel .zeit-chip.aktuell { border-color: var(--ink, #1f1a17); }
/* Keine Karte, kein Sprung: die Zeitleiste liest sich nur. */
.ohne-karte .zeit-chip { pointer-events: none; }

@media (max-width: 820px) {
  [data-strecke] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "karte" "leiste" "panel";
  }
  .strecke-karte { min-height: 50vh; }
  .fuehrung-karte img { height: 6.5rem; }
  .fuehrung-pfeile button { width: 2.5rem; height: 2.5rem; }
  /* Schmale Leiste: der Name eines Hauptstopps bricht auf zwei Zeilen um,
     statt einen Chip zu bauen, der breiter ist als die Leiste. */
  .zeit-hauptstopp .zname {
    max-width: 7rem; white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}

/* Weniger Bewegung: kein automatischer Ablauf (das steuert das Modul selbst,
   über prefers-reduced-motion), aber der pulsierende Ring stünde ohnehin
   still, wenn der Punkt sich nicht mehr bewegt – er hört hier ganz auf. */
@media (prefers-reduced-motion: reduce) {
  .karten-punkt .puls { animation: none; opacity: 0; }
  .karten-marke { transition: none; }
  .zeit-chip { transition: none; }
}