/* run – mobile first, dunkel wie hell benutzbar. */

:root {
  --bg: #0e1116;
  --surface: #171b23;
  --surface-2: #1f242e;
  --line: #262d39;
  --text: #eef2f7;
  --muted: #8b94a3;
  --accent: #c9f24e;
  --accent-text: #c9f24e;
  --accent-ink: #131a05;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --radius: 18px;
  /* Waagerechte Position im geteilten Hintergrundbild: rechte Hälfte. */
  --bg-x: 100%;
  --glass-edge: rgba(255, 255, 255, .16);
  --electric: #ccff00;   /* Start-Knopf */
  color-scheme: dark;
}

/* Helle Palette. Sie gilt, wenn das System hell steht und nicht ausdrücklich
   auf dunkel geschaltet wurde – oder wenn hell erzwungen ist. Beide Fälle
   brauchen dieselben Werte; eine Media-Query lässt sich nicht mit einem
   normalen Selektor in einer Regel zusammenfassen, daher zweimal. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #eef1f5;
    --line: #dfe4ea;
    --text: #12161d;
    --muted: #626b7a;
    --accent: #c9f24e;
    --accent-text: #4c8300;
    --accent-ink: #131a05;
    --danger: #c0392b;
    --shadow: 0 8px 24px rgba(18, 22, 29, .08);
    --bg-x: 0%;   /* linke Hälfte */
    --glass-edge: rgba(255, 255, 255, .75);
    --electric: #ccff00;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --line: #dfe4ea;
  --text: #12161d;
  --muted: #626b7a;
  --accent: #c9f24e;
  --accent-text: #4c8300;
  --accent-ink: #131a05;
  --danger: #c0392b;
  --shadow: 0 8px 24px rgba(18, 22, 29, .08);
  --bg-x: 0%;   /* linke Hälfte */
  --glass-edge: rgba(255, 255, 255, .75);
  --electric: #ccff00;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* App-Shell: Die Seite selbst scrollt nicht, nur der Inhaltsbereich. Eine
   Menüleiste mit position:fixed wandert auf iOS mit der ein- und ausfahrenden
   Adressleiste; als Teil einer Flex-Spalte sitzt sie wirklich fest. */
body {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Ein einziges Bild für beide Themes: bkgr.jpg ist mittig geteilt, links
     hell, rechts dunkel. Bei doppelter Breite füllt jede Hälfte genau das
     Fenster; --bg-x wählt aus, welche. Die Variable hängt an der Palette,
     damit Auto, Hell und Dunkel ohne Sonderfälle mitziehen.
     Darüber ein Schleier aus der Hintergrundfarbe, sonst konkurriert das
     Foto mit der Schrift. */
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg) 74%, transparent) 14%,
      color-mix(in srgb, var(--bg) 34%, transparent) 45%,
      color-mix(in srgb, var(--bg) 46%, transparent) 100%
    ),
    url("bkgr.jpg");
  background-size: 100% 100%, 200% auto;
  background-position: center, var(--bg-x) center;
  background-repeat: no-repeat, no-repeat;
}

h1 { font-size: 1.75rem; margin: 0 0 .3em; letter-spacing: -.02em; }
h2 { font-size: 1.02rem; margin: 0 0 .35em; letter-spacing: -.01em; }
p  { margin: 0 0 .8em; }

.muted { color: var(--muted); font-size: .9rem; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---- Layout ---------------------------------------------------------- */

#main {
  flex: 1 1 auto;
  min-height: 0;            /* sonst wächst der Flex-Kasten über die Höhe hinaus */
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: max(12px, env(safe-area-inset-top)) 16px 24px;
}
.screen { max-width: 560px; margin-inline: auto; }

.screen { display: none; animation: fade .18s ease-out; max-width: 560px; margin-inline: auto; }
.screen.visible { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 2px 14px;
}
.brand { font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem; }

/* Der Schriftzug als Vektor. Die Buchstaben folgen der Textfarbe, der
   diagonale Streifen der Akzentfarbe – damit sitzt er in beiden Themes. */
.logo-mark {
  display: block;
  height: 26px;   /* darunter laufen die vier Balken optisch ineinander */
  width: auto;
  color: var(--text);
}

.pill {
  font-size: .78rem; color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 3px 10px; border-radius: 999px;
}
.pill:empty { display: none; }

/* Flächen liegen leicht durchscheinend über dem Foto. Ohne Weichzeichner,
   damit es auf schwächeren Geräten nichts kostet – dafür deckend genug,
   dass die Schrift nicht mit dem Bild konkurriert. */
.card {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

/* ---- Liquid Glass ------------------------------------------------------
   Optional, weil backdrop-filter je Fläche einzeln gerechnet wird und auf
   älteren Geräten spürbar Leistung kostet. Drei Zutaten machen den Effekt:
   der Weichzeichner, eine kräftigere Sättigung (dadurch wirkt das Glas
   „gefärbt" statt nur milchig) und eine helle Kante an der Oberseite als
   Lichtreflex. */
:root[data-glass="on"] .card,
:root[data-glass="on"] .stat,
:root[data-glass="on"] .entry,
:root[data-glass="on"] .run-list li,
:root[data-glass="on"] .note {
  /* Ohne Eigenfarbe: Der Weichzeichner allein trägt die Fläche, so wie beim
     Vorbild. Die Lesbarkeit hängt dann am Schleier über dem Foto. */
  background: transparent;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 0 0 1px color-mix(in srgb, var(--glass-edge) 35%, transparent),
    var(--shadow);
}

/* Die Menüleiste gehört dazu, sonst wirkt sie wie angeklebt. */
:root[data-glass="on"] .tabs {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top-color: color-mix(in srgb, var(--text) 12%, transparent);
}

/* Die Karte im Routen-Kasten reicht bis an den Rand und würde die Glaskante
   überdecken – deshalb bleibt ihr Ausschnitt rund. */
:root[data-glass="on"] .route { overflow: hidden; }

/* Kann das Gerät keinen backdrop-filter, bleibt es bei der einfachen
   Transparenz statt bei einer fast unsichtbaren Fläche. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-glass="on"] .card,
  :root[data-glass="on"] .stat,
  :root[data-glass="on"] .entry,
  :root[data-glass="on"] .run-list li,
  :root[data-glass="on"] .note,
  :root[data-glass="on"] .tabs {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }
}

.hero { text-align: center; padding: 22px 4px 10px; }
.hero.tight { padding: 12px 4px 4px; }
.lede { color: var(--muted); font-size: .95rem; max-width: 34ch; margin-inline: auto; }

.logo {
  width: 68px; height: 68px; margin: 0 auto 14px;
  border-radius: 50%;
  border: 6px solid var(--accent);
  position: relative;
}
.logo::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); bottom: -9px; left: 50%; transform: translateX(-50%);
  box-shadow: 0 0 0 5px var(--bg);
}

.actions { display: grid; gap: 10px; margin-top: 4px; }

/* ---- Buttons & Felder ------------------------------------------------ */

button {
  font: inherit; cursor: pointer; border-radius: 14px; border: 1px solid transparent;
  padding: 13px 18px; transition: transform .08s ease, opacity .15s ease;
}
button:active { transform: scale(.985); }
button:disabled { opacity: .45; cursor: default; }

.cta {
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; width: 100%; font-size: 1.05rem;
  letter-spacing: .01em;
}
.cta.big { padding: 16px; font-size: 1.25rem; border-radius: 18px; }
.cta.stop { background: var(--danger); color: #fff; }

/* Der Start-Knopf ist die eine Handlung, um die es geht – deshalb ein
   kräftigeres Limette als die übrige Akzentfarbe, plus ein weicher Schein,
   der ihn vom Milchglas abhebt. Greift nur im Primärzustand: an einem
   Pausentag trägt der Knopf die Klasse .secondary und bleibt zurückhaltend. */
#startBtn.cta {
  background: var(--electric);
  color: #101806;
  box-shadow:
    0 6px 24px color-mix(in srgb, var(--electric) 34%, transparent),
    var(--shadow);
}
#startBtn.cta:active {
  background: color-mix(in srgb, var(--electric) 88%, #000);
}

.secondary {
  background: var(--surface-2); color: var(--text); border-color: var(--line);
}
.ghost { background: none; color: var(--muted); border-color: transparent; }
.danger { background: none; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.small { padding: 9px 14px; font-size: .88rem; border-radius: 11px; }

input, select {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px;
}

.row { display: flex; align-items: center; gap: 8px; }
.row.gap { gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row > button { flex: 0 0 auto; }
.unit { color: var(--muted); font-size: .9rem; }

.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; flex-wrap: wrap; }
.field > span { font-size: .92rem; }
.field select { width: auto; min-width: 88px; }
.field.stack { display: grid; gap: 5px; align-items: stretch; }
.field.stack > span { font-size: .85rem; color: var(--muted); }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; margin: 14px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.fixed-value {
  font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 650;
  margin: 0; letter-spacing: -.01em;
}
.hint { font-size: .8rem; color: var(--muted); margin: 8px 0 0; }
.hint:empty { display: none; }
.hint.bad { color: var(--danger); }
.small-note { margin-top: 14px; font-size: .82rem; }

.block { width: 100%; margin-bottom: 10px; }
.row.tight { margin-top: 4px; }

.fold { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.fold summary { font-size: .87rem; color: var(--muted); cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "＋ "; }
.fold[open] summary::before { content: "－ "; }
.fold[open] summary { margin-bottom: 12px; }

.entry-list { display: grid; gap: 10px; }
.entry {
  background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line); color: var(--text);
  display: grid; gap: 3px; text-align: left; padding: 16px; box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.entry:hover { border-color: var(--accent-text); }
.entry-label { font-weight: 650; font-size: 1rem; }
.entry-hint { font-size: .85rem; color: var(--muted); }

.results { list-style: none; margin: 10px 0 0; padding: 0; }
.results li { padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 7px; font-size: .9rem; cursor: pointer; background: var(--surface-2); }
.results li:hover { border-color: var(--accent-text); }

.toggles { display: flex; gap: 5px; flex-wrap: wrap; }
.toggles button {
  padding: 8px 0; width: 38px; text-align: center; font-size: .82rem;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); border-radius: 10px;
}
.toggles button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.toggles.seg button { width: auto; padding: 8px 14px; }

/* Kopfzeile des Zeichenmodus: Titel darf nicht umbrechen. */
.draw-bar-top .brand { white-space: nowrap; font-size: .98rem; }
.draw-bar-top button { flex: 0 0 auto; }

.windows { display: grid; gap: 4px; width: 100%; }
.win-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 6px 8px; padding: 10px 0; border-top: 1px solid var(--line);
}
.win-row:first-child { border-top: none; }
.win-row .wr-name { display: flex; align-items: center; gap: 8px; font-size: .92rem; min-width: 0; }
.win-row .chk { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
.win-row .prefer { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: .95rem; cursor: pointer; }
.win-row .prefer input { width: 16px; height: 16px; accent-color: var(--accent); }
.win-row:has(.prefer input:checked) .prefer { color: var(--accent-text); }
/* Uhrzeiten in eine eigene Zeile – nebeneinander passen sie auf 375 px nicht. */
.win-row .wr-times { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.win-row input[type=time] {
  width: auto; flex: 0 1 auto; min-width: 0; padding: 8px;
  font-variant-numeric: tabular-nums; font-size: .9rem;
}

/* ---- Heute ----------------------------------------------------------- */

.verdict { padding: 6px 2px 16px; }
.verdict .headline { font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.verdict .sub { color: var(--muted); font-size: .95rem; margin-top: 6px; }

.plan .plan-dist {
  font-size: 3.1rem; font-weight: 800; letter-spacing: -.045em; line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.plan .plan-sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.plan .plan-when { font-size: 1.02rem; font-weight: 600; margin-top: 12px; }
.plan .plan-weather { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.plan .plan-reason { color: var(--muted); font-size: .85rem; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

.route { padding: 0; overflow: hidden; }
.map { height: 220px; width: 100%; background: var(--surface-2); }
.route-fallback { display: none; padding: 8px; }
.route-fallback svg { width: 100%; height: auto; display: block; }
.route-meta { display: flex; gap: 6px 16px; padding: 12px 16px 0; font-size: .88rem; color: var(--muted); flex-wrap: wrap; }
/* Höhenprofil, bedienbar: Finger oder Maus darüber bewegt die Markierung
   auf der Karte mit. touch-action lässt vertikales Scrollen zu und fängt
   nur die waagerechte Geste ab. */
.profile { position: relative; line-height: 0; }
.profile svg { width: 100%; height: 84px; display: block; touch-action: pan-y; cursor: crosshair; }
.pf-readout {
  position: absolute; top: 4px; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 3px 8px; font-size: .74rem; line-height: 1.3;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transition: opacity .12s; pointer-events: none;
}
.pf-readout.on { opacity: 1; }
.pf-legend {
  display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 16px 0;
  font-size: .7rem; color: var(--muted); line-height: 1.4;
}
.pf-legend span { display: flex; align-items: center; gap: 5px; }
.pf-legend i { width: 12px; height: 3px; border-radius: 2px; }
.pf-legend .pf-note { flex: 1 0 100%; color: var(--text); font-weight: 600; }
.route-meta em { font-style: normal; font-size: .78rem; opacity: .7; }

.draw-stats .profile { flex: 1 0 100%; margin-bottom: 4px; }

/* Wie oft dieselbe Runde gelaufen wird. */
.laps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 16px 0; }
.laps-label { font-size: .8rem; color: var(--muted); margin-right: 2px; }
.laps button {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  padding: 6px 10px; border-radius: 10px; font-size: .84rem; font-weight: 600;
  display: flex; align-items: baseline; gap: 5px;
}
.laps button em { font-style: normal; font-weight: 400; font-size: .74rem; color: var(--muted); }
.laps button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.laps button[aria-pressed="true"] em { color: var(--accent-ink); opacity: .75; }
.route-meta b { color: var(--text); font-weight: 600; }
.route .row { padding: 12px 16px 14px; }

.loading { padding: 26px 16px; text-align: center; color: var(--muted); font-size: .9rem; }

/* Zeichenmodus */
.draw-bar-top { padding-bottom: 10px; gap: 8px; }
.draw-map {
  height: 56vh; min-height: 320px; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2);
}
.draw-stats {
  display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 2px 12px;
  font-size: .92rem; font-variant-numeric: tabular-nums;
}
.draw-stats b { font-weight: 650; }
.draw-stats .warn { color: var(--danger); }
.draw-stats .ok { color: var(--accent-text); }
.draw-actions { margin-bottom: 12px; }
.draw-actions input { flex: 1 1 140px; min-width: 120px; }
.wp-pin {
  background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--bg); border-radius: 50%;
  width: 24px; height: 24px; line-height: 20px; text-align: center;
  font-size: 12px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.custom-list { display: grid; gap: 8px; }
.custom-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); font-size: .9rem;
}
.custom-row .cr-meta { color: var(--muted); font-size: .82rem; }
.custom-row button { padding: 6px 10px; font-size: .8rem; }
.custom-list .empty { color: var(--muted); font-size: .88rem; }
.import-row { margin-top: 12px; }

.gpx-result {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); display: grid; gap: 8px;
}
.gpx-head { font-weight: 650; font-size: .95rem; }
.gpx-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .87rem; font-variant-numeric: tabular-nums; }
.gpx-facts em { display: block; font-style: normal; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.gpx-result .warn { color: var(--danger); font-size: .88rem; }

.route-meta .rm-fit { flex: 1 0 100%; }
.route-meta .ok, .draw-stats .ok { color: var(--accent-text); }
.route-meta .warn, .draw-stats .warn { color: var(--danger); }

.plan .plan-tight {
  margin-top: 10px; font-size: .85rem; line-height: 1.4;
  color: var(--danger);
}

/* Die Leiter: aktuelle Stufe plus die nächsten fünf. */
.ladder-card { margin-top: 22px; }
.ladder { display: grid; gap: 2px; margin-top: 6px; }
.ladder-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: baseline;
  padding: 10px 12px; border-radius: 11px; font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.ladder-row.current { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.ladder-row.deload .lr-name { color: var(--muted); }
.ladder-row .lr-name { font-weight: 600; }
.ladder-row.current .lr-name { color: var(--accent-text); }
.ladder-row .lr-name em { font-style: normal; font-weight: 400; font-size: .78rem; color: var(--muted); display: block; }
.ladder-row .lr-min { font-weight: 650; }
.ladder-row .lr-km { color: var(--muted); font-size: .84rem; min-width: 4.6em; text-align: right; }
.ladder-row .lr-dots { grid-column: 1 / -1; display: flex; gap: 5px; margin-top: 4px; }
.ladder-row .lr-dots:empty { display: none; }
.ladder-row .lr-dots i {
  width: 100%; height: 4px; border-radius: 99px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.ladder-row .lr-dots i.on { background: var(--accent); }

/* ---- Laufend --------------------------------------------------------- */

.running { text-align: center; padding-top: 6vh; }
.run-top { margin-bottom: 4vh; }
.run-dist { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.clock {
  font-size: clamp(4rem, 22vw, 7rem); font-weight: 800; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; line-height: 1; margin: 2vh 0;
}
.clock.small { font-size: clamp(3rem, 16vw, 4.6rem); }
/* Zieldauer erreicht – ab hier ist jede Sekunde Zugabe. */
.clock.reached { color: var(--accent-text); }
.running .actions { margin-top: 6vh; }

/* ---- Fertig ---------------------------------------------------------- */

.compare { display: grid; gap: 10px; }
.compare-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .95rem; }
.compare-row .k { color: var(--muted); font-size: .88rem; }
.compare-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.up { color: var(--accent-text); }
.down { color: var(--danger); }
.compare-row.hintrow .v { color: var(--muted); font-weight: 500; font-size: .88rem; }

.feels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.feels .feel {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  display: grid; gap: 4px; padding: 14px 4px; font-size: .82rem;
}
.feels .feel span { font-size: 1.5rem; }
.feels .feel[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }

.note {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; font-size: .93rem;
}

/* ---- Verlauf --------------------------------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat {
  background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 10px; text-align: center;
}
.stat .n { font-size: 1.35rem; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* ---- Kalender ---------------------------------------------------------- */

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; font-weight: 650; font-size: .95rem;
}
.navbtn {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  width: 34px; height: 34px; padding: 0; border-radius: 10px; font-size: 1.1rem; line-height: 1;
}

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow {
  font-size: .68rem; color: var(--muted); text-align: center;
  text-transform: uppercase; letter-spacing: .05em; padding-bottom: 4px;
}
.cal-cell {
  border-radius: 9px; border: 1px solid transparent; background: var(--surface-2);
  padding: 5px 3px; display: grid; gap: 1px; justify-items: center;
  min-height: 46px; align-content: start;
}
.cal.week .cal-cell { min-height: 66px; }
.cal-cell.outside { opacity: .28; }
.cal-num { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-detail {
  display: grid; justify-items: center; gap: 0; line-height: 1.15; text-align: center;
  font-variant-numeric: tabular-nums;
}
.cal-detail b { font-size: .74rem; font-weight: 700; }
.cal-detail em { font-style: normal; font-size: .62rem; color: var(--muted); }
.cal.month .cal-detail em { display: none; }

.cal-cell.today { border-color: var(--accent); }
.cal-cell.done { background: var(--accent); }
.cal-cell.done .cal-num, .cal-cell.done .cal-detail b { color: var(--accent-ink); }
.cal-cell.done .cal-detail em { color: color-mix(in srgb, var(--accent-ink) 70%, transparent); }
.cal-cell.planned {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.cal-cell.planned .cal-detail b { color: var(--accent-text); }
.cal-cell.planned.deload { background: var(--surface-2); border-style: dashed; }
.cal-cell.planned.deload .cal-detail b { color: var(--muted); }

.cal-summary {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.cal-summary b { color: var(--text); font-weight: 650; }
.cal-summary em { font-style: normal; font-size: .78rem; opacity: .8; }

.chart svg { width: 100%; height: auto; display: block; }
.chart .empty, .best-list .empty { color: var(--muted); font-size: .9rem; }

.best-list { display: grid; gap: 8px; }
.best-row { display: flex; justify-content: space-between; font-size: .93rem; font-variant-numeric: tabular-nums; }
.best-row .k { color: var(--muted); }

.run-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.run-list li {
  background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
}
.run-list .rl-date { font-size: .82rem; color: var(--muted); }
.run-list .rl-main { font-weight: 650; font-variant-numeric: tabular-nums; }
.run-list .rl-side { text-align: right; font-variant-numeric: tabular-nums; font-size: .95rem; }
.run-list .rl-sub { font-size: .8rem; color: var(--muted); grid-column: 1 / -1; }

.credits { font-size: .75rem; color: var(--muted); text-align: center; margin: 18px 0 4px; }

/* ---- Tabs & Toast ---------------------------------------------------- */

.tabs {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tabs button {
  background: none; border: none; color: var(--muted); padding: 10px 4px; font-size: .82rem; border-radius: 10px;
}
.tabs button[aria-selected="true"] { color: var(--text); font-weight: 650; }
.tabs.hidden { display: none; }

.toast {
  position: fixed; left: 50%; transform: translate(-50%, -20px); top: 14px; z-index: 900;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  padding: 11px 16px; border-radius: 999px; font-size: .88rem; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Leaflet. Helle Kachelsätze werden im dunklen Theme abgedunkelt – Kartenstile,
   die schon dunkel sind, bleiben unangetastet. Das setzt app.js als Klasse. */
.leaflet-container { background: var(--surface-2); font: inherit; }
.leaflet-container.tint-dark .leaflet-tile-pane { filter: brightness(.76) contrast(1.06) saturate(.85); }
.leaflet-control-attribution { font-size: 9px; }
.leaflet-control-attribution a { color: inherit; }

/* ---- Bedienelemente folgen den Karten ----------------------------------
   Gleiche Logik wie bei den Flächen: leicht durchscheinend als Grundzustand,
   im Glasmodus deutlich offener plus helle Kante.

   Bewusst OHNE eigenen backdrop-filter: Fast alle diese Elemente liegen auf
   einer Karte, die bereits einen hat – der Weichzeichner ist also schon da.
   Jede weitere gefilterte Fläche würde einzeln gerechnet, und allein die
   Monatsansicht hat über vierzig Zellen.

   Steht am Ende der Datei, damit die Regeln die früheren Hintergründe
   überschreiben. Zustände wie [aria-pressed="true"] haben höhere Spezifität
   und bleiben davon unberührt. */

.secondary,
input, select,
.navbtn,
.toggles button,
.laps button,
.feels .feel,
.results li,
.custom-row,
.gpx-result,
.cal-cell,
.win-row input[type=time] {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

/* :not(...) ist hier notwendig, nicht kosmetisch: Der Nachfahren-Selektor
   mit [data-glass] hat höhere Spezifität als etwa .cal-cell.done und würde
   sonst jeden gedrückten oder markierten Zustand überschreiben. */
:root[data-glass="on"] .secondary,
:root[data-glass="on"] input,
:root[data-glass="on"] select,
:root[data-glass="on"] .navbtn,
:root[data-glass="on"] .toggles button:not([aria-pressed="true"]),
:root[data-glass="on"] .laps button:not([aria-pressed="true"]),
:root[data-glass="on"] .feels .feel:not([aria-pressed="true"]),
:root[data-glass="on"] .results li,
:root[data-glass="on"] .custom-row,
:root[data-glass="on"] .gpx-result,
:root[data-glass="on"] .cal-cell:not(.done):not(.planned),
:root[data-glass="on"] .win-row input[type=time] {
  background: color-mix(in srgb, var(--surface-2) 34%, transparent);
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-edge) 60%, transparent);
}

/* Die beiden Handlungsknöpfe bleiben deckend. Ein durchscheinender
   Start-Knopf über einem Foto liest sich wie „ausgegraut" – genau das
   Gegenteil dessen, was er sagen soll. */
:root[data-glass="on"] .cta { box-shadow: var(--shadow); }
:root[data-glass="on"] #startBtn.cta {
  box-shadow:
    0 6px 24px color-mix(in srgb, var(--electric) 34%, transparent),
    var(--shadow);
}