/* Fastpacking-Bereich.
   Alle Farben aus tokens.css — keine Literale (just design-audit bricht sonst ab).

   Aufbau der Standansicht: die Karte traegt die Ansicht, der Stand liegt als
   Panel darueber, darunter der laufende Tag und die Etappen als Zeilen. Das
   Gegenmodell waere ein Stapel gleich grosser Karten — dort sagt nichts, was
   gerade wichtig ist. Kontext laut UX.md: Sonnenlicht, unterwegs, kurze
   Blicke, verschwitzte Finger. */

.fp-hinweis {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: var(--sp-2) 0 var(--sp-3);
}

.fp-dateiwahl { cursor: pointer; }

/* ── Karte + Spalte ──────────────────────────────────────────────────── */

.fp-karte {
  height: 46vh;
  min-height: 260px;
  max-height: 420px;
  background: var(--surface);
}

/* Das Panel schiebt sich ueber die untere Kante der Karte — die Karte laeuft
   dahinter weiter, statt in einem Kasten zu enden. */
.fp-panel {
  position: relative;
  margin-top: calc(-1 * var(--sp-6));
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--bg-elev);
  border-radius: var(--r-3) var(--r-3) 0 0;
}

.fp-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.fp-kopf h2 {
  margin: 0;
  font-size: var(--fs-lg);
}

.fp-status {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tile-label-spacing);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-1);
  background: var(--accent);
  color: var(--on-fill);
}

.fp-eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 var(--sp-1);
}

/* Die eine grosse Zahl. Sie beantwortet die Frage, die unterwegs zaehlt —
   alles andere ordnet sich darunter. */
.fp-gross {
  font-family: var(--ff-serif);
  font-size: 3.2rem;
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

.fp-gross small {
  font-size: 1.3rem;
  color: var(--muted);
  margin-left: .12em;
}

.fp-satz {
  font-size: var(--fs-md);
  color: var(--text-soft);
  margin: var(--sp-2) 0 0;
}

.fp-satz[data-lage="zurueck"] { color: var(--c-warn-text); }
.fp-satz[data-lage="vor"]     { color: var(--c-good-text); }

/* Drei bis vier Kennwerte in einer Reihe, ohne Rahmen: sie sind Beiwerk zur
   grossen Zahl, keine eigenstaendigen Kacheln. */
.fp-band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
}

.fp-band > div { min-width: 4.5rem; }

.fp-band b {
  display: block;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
}

.fp-band span {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tile-label-spacing);
  color: var(--muted);
}

.fp-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* Eine Hauptaktion, die den Platz bekommt; der Rest sitzt daneben. */
.fp-haupt {
  flex: 1 1 12rem;
  min-height: 52px;
  justify-content: center;
  font-size: var(--fs-md);
}

.fp-aktionen .btn-secondary { min-height: 52px; }

#fp-aktualisieren { min-width: 52px; justify-content: center; }

.fp-hier-antwort {
  font-size: var(--fs-base);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  border-radius: var(--r-2);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* ── Der laufende Tag ────────────────────────────────────────────────── */

.fp-heute {
  margin: var(--sp-4) var(--sp-4) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--bg-elev);
  overflow: hidden;
}

.fp-heute-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

.fp-heute-tag {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tile-label-spacing);
  color: var(--accent-text);
  font-weight: 600;
}

.fp-heute-datum {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.fp-heute-werte {
  display: flex;
  gap: var(--sp-6);
  padding: 0 var(--sp-4) var(--sp-3);
}

.fp-heute-werte b {
  display: block;
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.fp-heute-werte span {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tile-label-spacing);
  color: var(--muted);
}

/* ── Hoehenprofil ────────────────────────────────────────────────────── */

.fp-profil { margin: 0; }

.fp-profil-flaeche svg {
  display: block;
  width: 100%;
  height: 96px;
}

.fp-profil-achse {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: var(--sp-1) var(--sp-4) var(--sp-3);
}

.fp-p-erledigt { fill: var(--accent); opacity: 0.32; }
.fp-p-heute    { fill: var(--accent-strong); opacity: 0.95; }
/* Der offene Teil war mit 0,18 praktisch unsichtbar — er ist aber die
   Strecke, die noch kommt. */
.fp-p-rest     { fill: var(--muted); opacity: 0.35; }
/* Vor dem Start ist alles offen: dann traegt das Profil den Akzent. */
.fp-p-geplant  { fill: var(--accent); opacity: 0.5; }

.fp-p-grenze {
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fp-p-hier {
  stroke: var(--accent-strong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.fp-p-tag {
  fill: var(--muted);
  font-family: var(--ff-sans);
  font-size: 11px;
  text-anchor: middle;
}

/* ── Etappen als Zeilen ──────────────────────────────────────────────── */

.fp-etappen { padding: var(--sp-6) var(--sp-4) var(--sp-8); }

.fp-abschnitt {
  font-size: var(--fs-md);
  margin: 0 0 var(--sp-2);
}

.fp-zeile {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.fp-zeile:last-child { border-bottom: 0; }

/* Erledigt gefuellt, offen hohl — dieselbe Unterscheidung wie die Marken auf
   der Karte: Leistung gegen Absicht. */
.fp-zeile-nr {
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--muted);
}

.fp-zeile.erledigt .fp-zeile-nr,
.fp-zeile.laufend .fp-zeile-nr {
  background: var(--accent);
  color: var(--on-fill);
}

/* Nach .erledigt notiert, damit der laufende Tag sichtbar bleibt, sobald er
   eine Position hat — sonst uebermalt ihn die Erledigt-Farbe. */
.fp-zeile.heute .fp-zeile-nr,
.fp-zeile.heute.erledigt .fp-zeile-nr,
.fp-zeile.heute.laufend .fp-zeile-nr {
  background: var(--accent-strong);
  color: var(--text-on-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fp-zeile-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.fp-zeile-name { font-weight: 500; }
.fp-zeile.heute .fp-zeile-name { color: var(--accent-text); }
.fp-zeile.offen .fp-zeile-name { color: var(--muted); font-weight: 400; }

.fp-zeile-wert {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  white-space: nowrap;
}

.fp-zeile-unten {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 1px;
}

.fp-streifen {
  height: 5px;
  border-radius: var(--r-1);
  background: var(--bg-soft);
  overflow: hidden;
  margin-top: var(--sp-2);
}

.fp-streifen i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width var(--t-base);
}

.fp-unsicher { color: var(--c-warn-text); }

.fp-zuordnen {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

/* ── Zuordnung: aufklappende Auswahl ─────────────────────────────────── */

.fp-auswahl {
  padding: var(--sp-3) 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.fp-auswahl-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 320px;
  overflow-y: auto;
}

.fp-auswahl-eintrag {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;          /* Daumenziel, verschwitzte Finger */
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  border: 1px solid var(--border);
  cursor: pointer;
}

.fp-auswahl-eintrag:hover { background: var(--surface-2); }

.fp-auswahl-eintrag input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.fp-auswahl-eintrag small { color: var(--muted); }

/* ── Rueckblick ──────────────────────────────────────────────────────── */

.fp-rueckblick { margin: var(--sp-4) var(--sp-4) 0; }

/* Muster von #kpi-grid-garmin in style.css: .kpi-grid malt sein Gitter ueber
   den Hintergrund, deshalb bliebe bei ausgeblendeten Kacheln rechts eine graue
   Flaeche stehen. Karten tragen ihre Kanten hier selbst. */
.fp-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
  justify-content: start;
  background: transparent;
  border-top: none;
  border-left: none;
}

.fp-kpi-grid .kpi-card {
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

/* ── Planansicht ─────────────────────────────────────────────────────── */

.fp-tabelle-huelle { overflow-x: auto; }

.fp-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.fp-tabelle th {
  text-align: left;
  white-space: nowrap;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.fp-tabelle td {
  padding: var(--sp-3) var(--sp-2) var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.fp-tabelle input[type="number"],
.fp-tabelle input[type="text"],
.fp-tabelle input[type="date"] {
  width: 100%;
  min-height: 44px;   /* WCAG 2.5.5, gemessen vom ux-review-Harness */
  padding: var(--sp-2);
}

.fp-tabelle input[type="text"] { min-width: 7rem; }

.fp-zeitraum {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-5);
}

.fp-zeitraum label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.fp-zeitraum input {
  min-height: 44px;
  padding: var(--sp-2);
}

/* Gesperrte Felder als solche zeigen — sonst wirkt ein Feld, das sich nicht
   aendern laesst, wie ein Fehler. */
.fp-zeitraum input[readonly] {
  background: var(--surface-2);
  color: var(--text-soft);
  cursor: default;
}

/* ── Kartenmarken ────────────────────────────────────────────────────── */

.fp-marke {
  background: var(--accent);
  color: var(--on-fill);
  border: 2px solid var(--bg-elev);
  border-radius: var(--r-pill);
  width: 22px;
  height: 22px;
  line-height: 18px;
  text-align: center;
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.fp-marke.offen {
  background: var(--bg-elev);
  color: var(--muted);
  border-color: var(--border-strong);
}

.fp-hier-marke {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-strong);
  border: 3px solid var(--bg-elev);
  box-shadow: 0 0 0 2px var(--accent);
}

/* ── Breitere Fenster ────────────────────────────────────────────────── */

/* ── Ab 900 px: Karte links, alles Uebrige rechts ─────────────────────
   Mobil ist die Ansicht ein Stapel — auf dem Rechner wurde daraus eine
   hochskalierte Handy-Seite: eine riesige Zahl, ein Knopf ueber die halbe
   Breite, Etappenzeilen mit metervielem Leerraum. Hier bekommt die Karte
   endlich Hoehe und bleibt beim Scrollen stehen, waehrend rechts der Stand,
   der laufende Tag und die Etappen laufen. */

@media (min-width: 900px) {
  #fp-stand:not([hidden]) {
    display: flex;
    align-items: flex-start;
    gap: 0;
    /* Als ein Stueck rahmen statt zwei Flaechen im Seitenrand schweben zu
       lassen — dieselbe Kante wie eine Karte im uebrigen Trail Hub. */
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    /* clip, nicht hidden: hidden macht den Kasten zum Scroll-Container und
       nimmt der Karte das position:sticky. */
    overflow: clip;
    box-shadow: var(--shadow-md);
  }

  /* Der Platz ueber der Karte: Navigationsleiste (56 px) PLUS das
     main-Padding (--sp-8). Nur die Leiste abzuziehen liess die Karte in
     JEDER Fenstergroesse um exakt 33 px unten herausragen — gemessen bei
     1440x900, 1512x862 und 1920x1080. Unten bleibt --sp-4 Luft. */
  .fp-karte {
    flex: 1.35 1 0;
    min-width: 0;
    height: calc(100vh - 56px - var(--sp-8) - var(--sp-4));
    max-height: none;
    position: sticky;
    top: var(--sp-4);
  }

  /* Feste Breite statt Mitwachsen: sonst bekommt die Spalte den Extraplatz
     und war bei 1024 px breiter als die Karte — die aber traegt die Ansicht. */
  .fp-spalte {
    flex: 0 1 27rem;
    min-width: 20rem;
    max-width: 30rem;
    align-self: stretch;
    border-left: 1px solid var(--border);
    background: var(--bg-elev);
  }

  /* Kein Ueberlappen mehr: die Karte steht daneben, nicht darueber. */
  .fp-panel {
    margin-top: 0;
    border-radius: 0;
    padding: var(--sp-6);
  }

  .fp-gross { font-size: 2.8rem; }

  /* Auf dem Telefon sind 52 px Pflicht (verschwitzte Finger). Mit Maus ist
     das eine Plakatwand — vier davon fuellten die halbe Spalte. */
  .fp-haupt {
    flex: 0 1 auto;
    min-width: 9rem;
    min-height: 40px;
    font-size: var(--fs-sm);
  }

  .fp-aktionen { gap: var(--sp-2) var(--sp-2); }
  .fp-aktionen .btn-secondary { min-height: 40px; font-size: var(--fs-sm); }
  #fp-aktualisieren { min-width: 40px; }

  .fp-zuordnen { min-width: 36px; min-height: 36px; }

  .fp-heute, .fp-rueckblick { margin: 0 var(--sp-6) var(--sp-4); }
  .fp-etappen { padding: var(--sp-2) var(--sp-6) var(--sp-8); }

  /* Vier Spalten statt Ort links und Kilometer weit rechts: der
     Fortschrittsstreifen fuellt die Mitte, die Zahl steht am Rand. */
  .fp-zeile {
    grid-template-columns: 26px minmax(0, 1fr) 4.5rem 44px;
    gap: var(--sp-3);
  }

  .fp-zeile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Sehr breite Fenster: die Spalte laeuft nicht ins Uferlose, die Karte
   bekommt den gewonnenen Platz. */
@media (min-width: 1500px) {
  .fp-spalte { flex-basis: 30rem; max-width: 32rem; }
}

/* Die Attribution sass genau in der Zone, die das Panel ueberlappt. Sie
   gehoert in die Karte — rechtlich sichtbar bleiben muss sie, aber nicht
   zwischen zwei Abschnitten stehen. */
.fp-karte .leaflet-control-attribution {
  margin-bottom: var(--sp-6);
  font-size: 10px;
  max-width: 78%;
}