/* =========================================================
   Life Archive – Fitness: Cardio, Sport, Dehnen (0.5.0 beta)

   Die drei neuen Arten neben dem Studio. Eine eigene Datei, weil
   styles/fitness.css schon 4 700 Zeilen trägt; die Formen sind
   dieselben:

     Flächen    zwei Ecken geschnitten (oben links, unten rechts), Rand,
                getönte Fläche, Sockel – wie die Stats-Reiter (.pat-fig)
     Knöpfe     eckig mit Sockel (.btn3d), nie geschnitten
     Rund       nichts – außer Daten (Uhr, Karte) und Figuren (Körper)

   Präfix fx- (Fitness, neue Arten), fxl- für den laufenden Bildschirm.
   ========================================================= */

.fx {
  --accent-app: var(--c-fitness);
  --accent-deep: var(--c-fitness-stroke);
  --k: var(--c-fitness);
  display: grid;
  gap: 18px;
  min-width: 0;
  padding-bottom: 28px;
}

.fx > * { min-width: 0; }

/* ---------- Fläche wie in Stats ------------------------------------------------ */

.fx-panel {
  --cut: 14px;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px 14px 15px;
  filter: drop-shadow(4px 5px 0 var(--py-plinth));
}

.fx-panel::before,
.fx-panel::after,
.fx-tile::before,
.fx-tile::after,
.fx-chip::before,
.fx-chip::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  clip-path: var(--cut-clip);
  background: var(--fx-edge, var(--line-strong));
}

.fx-panel::after,
.fx-tile::after {
  inset: 1px;
  z-index: -1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--k) 9%, var(--fx-face, var(--surface))), var(--fx-face, var(--surface)) 70%);
}

.fx-panel--quiet { --fx-face: var(--surface-2); }
.fx-panel--hot { --fx-edge: var(--k); }

.fx-cap {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.fx-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.fx-note b { color: var(--text-strong); font-weight: 600; }

.fx-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-head__t {
  font-family: var(--font-mono);
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}
.fx-head__rule { flex: 1; height: 1px; background: var(--line-strong); }
.fx-head .fitm-textbtn, .fx-head .fx-link { margin-inline-start: auto; }

.fx-link {
  font-size: 13px;
  color: var(--c-fitness);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--c-fitness) 40%, transparent);
}

.fx-ico { width: 20px; height: 20px; flex: none; }

/* ---------- Kacheln ------------------------------------------------------------ */

.fx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fx-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 720px) { .fx-tiles:not(.fx-tiles--3) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fx-tile {
  --cut: 11px;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 11px 12px 10px;
  filter: drop-shadow(3px 4px 0 var(--py-plinth));
}

.fx-tile__v {
  font-family: var(--font-mono);
  font-size: clamp(18px, 5vw, 23px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
.fx-tile__l { font-size: 12px; color: var(--text-muted); }
.fx-tile__s { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); font-weight: 600; color: var(--text-subtle); }
.fx-tile__s.is-good { color: var(--state-good); }
.fx-tile.is-hot { --fx-edge: var(--c-fitness); }

/* ---------- Die vier Arten -------------------------------------------------------- */

.fx-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.fx-kind {
  --depth: 3px;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 11px 4px 10px;
  color: var(--text);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--depth) var(--depth) 0 0 var(--py-plinth);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fx-kind:hover { box-shadow: inset 0 0 0 1px var(--fk), var(--depth) var(--depth) 0 0 var(--py-plinth); }
.fx-kind:active { transform: translate(var(--depth), var(--depth)); box-shadow: inset 0 0 0 1px var(--fk); }
.fx-kind:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 3px; }

.fx-kind__hex {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--fk) 22%, var(--surface-2));
}
.fx-kind__ico { width: 22px; height: 22px; }
.fx-kind__name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.fx-kind__hint { font-size: max(var(--fs-floor), 10.5px); color: var(--text-subtle); text-align: center; line-height: 1.25; }
.fx-kinds--compact .fx-kind { padding: 9px 2px 8px; }

/* ---------- Anstrengung ------------------------------------------------------------ */

.fx-eff { display: grid; gap: 6px; }
.fx-eff__row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; touch-action: none; }

.fx-eff__cell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  aspect-ratio: 26 / 30;
  color: var(--text);
  cursor: pointer;
}
.fx-eff__cell svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-eff__cell path { fill: var(--surface-2); stroke: var(--text-subtle); stroke-width: 1.2; transition: fill var(--dur-fast) var(--ease-out); }
.fx-eff__cell span { position: relative; font-family: var(--font-mono); font-size: max(var(--fs-floor), 10.5px); font-weight: 600; }
.fx-eff__cell.is-on path { fill: var(--z); stroke: transparent; }
.fx-eff__cell.is-on span { color: var(--on-accent); }
.fx-eff__cell.is-top path { stroke: var(--text-strong); stroke-width: 2; }
.fx-eff__cell:hover path { stroke: var(--c-fitness); }
.fx-eff__cell:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 2px; }

.fx-eff__scale { display: flex; justify-content: space-between; font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); }
.fx-eff__word { margin: 0; font-size: 14px; color: var(--text-muted); }
.fx-eff__word b { font-family: var(--font-mono); color: var(--text-strong); }

/* ---------- Schritte (− Wert +) ------------------------------------------------------- */

.fx-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.fx-step__btn { min-width: 48px; min-height: 44px; font-size: 20px; }
.fx-step__val { display: flex; justify-content: center; align-items: baseline; gap: 6px; }
.fx-step__val b { font-family: var(--font-mono); font-size: 34px; font-weight: 700; color: var(--text-strong); letter-spacing: -.02em; }
.fx-step__val i { font-style: normal; font-size: 14px; color: var(--text-subtle); }

/* ---------- Segmente ------------------------------------------------------------------- */

.fx-seg {
  --cut: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  filter: drop-shadow(3px 3px 0 var(--py-plinth));
}
.fx-seg__btn {
  display: grid;
  gap: 1px;
  min-height: 40px;
  padding: 6px 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}
.fx-seg__btn small { font-size: max(var(--fs-floor), 10px); font-weight: 400; color: var(--text-subtle); }
.fx-seg__btn + .fx-seg__btn { border-inline-start: 1px solid var(--line); }
.fx-seg__btn:hover { color: var(--text-strong); background: color-mix(in srgb, var(--k) 8%, transparent); }
.fx-seg__btn.is-on { color: var(--on-accent); background: var(--c-fitness); }
.fx-seg__btn.is-on small { color: var(--on-accent); opacity: .75; }
.fx-seg__btn[disabled] { color: var(--text-disabled); }
.fx-seg__btn:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: -2px; }

/* Waagerecht wischbar, wenn es zu viele werden (Aktivitäten). */
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-pick {
  --depth: 2.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--depth) var(--depth) 0 0 var(--py-plinth);
  transition: transform var(--dur-fast) var(--ease-out);
}
.fx-pick img { width: 18px; height: 18px; }
.fx-pick:active { transform: translate(var(--depth), var(--depth)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.fx-pick.is-on { color: var(--on-accent); background: var(--c-fitness); box-shadow: inset 0 0 0 1px var(--c-fitness), var(--depth) var(--depth) 0 0 var(--fit-lift, #9e3f3f); }
.fx-pick.is-on img { filter: none; }
.fx-pick:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 3px; }

/* ---------- Zustand (GPS, Gurt, Akku) ---------------------------------------------------- */

.fx-chip {
  --cut: 6px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.fx-chip::after { inset: 1px; z-index: -1; background: var(--surface-2); }
.fx-chip i { width: 8px; height: 8px; flex: none; background: var(--text-subtle); }
.fx-chip--ok i { background: var(--state-good); }
.fx-chip--fair i { background: var(--hz-3); }
.fx-chip--weak i, .fx-chip--lost i, .fx-chip--denied i { background: var(--hz-5); }
.fx-chip--wait i { background: var(--hz-3); animation: fx-blink 1.2s steps(2) infinite; }
button.fx-chip { cursor: pointer; }
button.fx-chip:hover { color: var(--text-strong); }
@keyframes fx-blink { 50% { opacity: .25; } }

/* ---------- Ring, Zonen ---------------------------------------------------------------- */

.fx-ring { width: 100%; max-width: 220px; height: auto; display: block; }
.fx-ring__track { fill: none; stroke: var(--surface-3); stroke-width: 12; stroke-linejoin: miter; }
.fx-ring__fill { fill: none; stroke: var(--c-fitness); stroke-width: 12; stroke-linejoin: miter; transition: stroke-dashoffset 1s linear; }
.fx-ring__text { font-family: var(--font-mono); font-size: 46px; font-weight: 700; fill: var(--text-strong); letter-spacing: -.02em; }
.fx-ring__sub { font-size: 14px; fill: var(--text-muted); }
.fx-ring--prep .fx-ring__fill { stroke: var(--hz-3); }

.fx-zones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; height: 12px; }
.fx-zones__z { display: block; background: var(--z); opacity: .32; }
.fx-zones__z.is-target { opacity: .7; }
.fx-zones__z.is-now { opacity: 1; box-shadow: 0 0 0 2px var(--text-strong); }

/* ---------- Plan-Karten auf Today ------------------------------------------------------- */

.fx-plan { display: grid; gap: 12px; }

.fx-pcard { --cut: 14px; }
.fx-pcard__top { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.fx-pcard__hex {
  display: grid;
  place-items: center;
  width: 42px;
  height: 37px;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--fk, var(--c-fitness)) 24%, var(--surface-2));
}
.fx-pcard__hex img { width: 24px; height: 24px; }
.fx-pcard__kick { font-family: var(--font-mono); font-size: max(var(--fs-floor), 10.5px); letter-spacing: .12em; text-transform: uppercase; color: var(--c-fitness); }
.fx-pcard__name { margin: 1px 0 0; font-size: 19px; font-weight: 700; color: var(--text-strong); line-height: 1.2; overflow-wrap: anywhere; }
.fx-pcard__meta { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.fx-pcard__shape { width: 72px; height: 48px; }
.fx-pcard__acts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.fx-pcard__acts .btn3d--accent { flex: 1 1 auto; min-height: 46px; font-size: 15px; }
/* Ein geplanter Lauf trägt drei Wege: Start ganz oben, darunter die zwei
   leisen (Something else · Quick track) nebeneinander statt verrutscht. */
.fx-pcard__acts--three { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fx-pcard__acts--three > :first-child { grid-column: 1 / -1; }
.fx-pcard__acts--three .fitm-textbtn { justify-content: center; text-align: center; }
.fx-pcard__then {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-muted);
}
.fx-pcard.is-done { --fx-face: var(--surface-2); }
.fx-pcard.is-done .fx-pcard__name { font-size: 15px; }
.fx-pcard.is-later .fx-pcard__name { font-size: 16px; }

.fx-done-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--state-good); }

/* ---------- Bildschirme (Start, Laufen, Zusammenfassung) ------------------------------- */

.fx-hero { display: grid; gap: 4px; }
.fx-hero__kick { font-family: var(--font-mono); font-size: max(var(--fs-floor), 10.5px); letter-spacing: .14em; text-transform: uppercase; color: var(--c-fitness); }
.fx-hero__title { margin: 0; font-size: 24px; font-weight: 700; color: var(--text-strong); line-height: 1.15; overflow-wrap: anywhere; }
.fx-hero__sub { margin: 0; font-size: 13.5px; color: var(--text-muted); }

.fx-go { display: grid; gap: 10px; }
.fx-go .btn3d--accent { min-height: 54px; font-size: 17px; }

.fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fx-row--between { justify-content: space-between; }
.fx-stack { display: grid; gap: 10px; }
.fx-stack > * { min-width: 0; }

.fx-field { display: grid; gap: 6px; }
.fx-field__label { font-size: 12.5px; color: var(--text-muted); }
.fx-input {
  --cut: 7px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--text-strong);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  clip-path: var(--cut-clip);
}
.fx-input:focus { outline: none; border-color: var(--c-fitness); }
textarea.fx-input { min-height: 84px; resize: vertical; }

.fx-list { display: grid; margin: 0; padding: 0; list-style: none; }
.fx-li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.fx-li:last-child { border-bottom: 0; }
.fx-li__body { display: grid; gap: 2px; min-width: 0; }
.fx-li__name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.fx-li__meta { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.fx-li__val { font-family: var(--font-mono); font-size: 13px; color: var(--text); text-align: end; white-space: nowrap; }
.fx-li--btn { width: 100%; text-align: start; color: inherit; }
.fx-li--btn:hover .fx-li__name { color: var(--c-fitness); }
.fx-li .pose-fig { width: 62px; height: 46px; }
.fx-li .fmap--thumb { width: 64px; height: 44px; }

/* ---------- Der laufende Bildschirm ------------------------------------------------------ */

.fxl { display: grid; gap: 16px; padding-bottom: 120px; }

.fxl-step { --cut: 12px; gap: 8px; }
.fxl-step__top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); }
.fxl-step__what { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fxl-step__what b { font-size: 21px; color: var(--text-strong); }
.fxl-step__what span { font-family: var(--font-mono); font-size: 15px; color: var(--text-strong); }
.fxl-step__bar { height: 6px; background: var(--surface-3); overflow: hidden; }
.fxl-step__bar i { display: block; height: 100%; background: var(--c-fitness); transition: width 1s linear; }
.fxl-step__target { font-size: 13px; color: var(--text-muted); }
.fxl-step__target b { color: var(--text-strong); }
.fxl-step.is-in { --fx-edge: var(--state-good); }
.fxl-step.is-out { --fx-edge: var(--hz-4); }

.fxl-big { display: grid; justify-items: center; gap: 2px; padding: 6px 0 2px; }
.fxl-big__v { font-family: var(--font-mono); font-size: clamp(64px, 22vw, 96px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fxl-big__l { font-size: 13px; color: var(--text-muted); }

.fxl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.fxl-stat__v { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fxl-stat__l { font-size: max(var(--fs-floor), 11px); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }

.fxl-hr { gap: 8px; }
.fxl-hr__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-muted); }
.fxl-hr__top b { font-family: var(--font-mono); font-size: 20px; color: var(--text-strong); }
.fxl-hr__verdict.is-in { color: var(--state-good); }
.fxl-hr__verdict.is-out { color: var(--hz-4); }

.fxl-alert {
  --cut: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--hz-4) 22%, var(--surface));
  clip-path: var(--cut-clip);
}
.fxl-alert__arrow { width: 22px; height: 22px; flex: none; }
.fxl-alert__arrow path { fill: var(--text-strong); }

.fxl-pages { display: grid; gap: 14px; }

/* Die Knöpfe unten: kleben über der Tableiste, damit der Daumen sie
   immer an derselben Stelle findet – auch mitten im Lauf. */
.fxl-bar {
  position: fixed;
  inset-inline-start: 50%;
  bottom: calc(var(--sh-tabs-clear, 72px) + 10px);
  z-index: 55;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 10px;
  width: min(var(--flow), calc(100vw - 2 * var(--gutter)));
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.fxl-bar .btn3d { min-height: 54px; font-size: 15px; font-weight: 600; }
.fxl-bar .btn3d--accent { font-size: 17px; }
.fxl-bar--two { grid-template-columns: 1fr 1.6fr; }

/* „Halten zum Beenden": der Rand füllt sich, solange der Finger liegt. */
.fxl-hold { position: relative; overflow: hidden; }
.fxl-hold__fill {
  position: absolute;
  inset-inline-start: 0; top: 0; bottom: 0;
  width: 0;
  background: color-mix(in srgb, var(--hz-5) 45%, transparent);
  pointer-events: none;
}
.fxl-hold.is-holding .fxl-hold__fill { width: 100%; transition: width 1.2s linear; }

/* ---------- Pocket: schwarz, gesperrt ----------------------------------------------------- */

.fxl-pocket {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px));
  background: #000;
  color: #6a6a6a;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.fxl-pocket[hidden] { display: none; }
.fxl-pocket__state { font-family: var(--font-mono); font-size: max(var(--fs-floor), 11px); letter-spacing: .14em; text-transform: uppercase; color: #5a5a5a; }
.fxl-pocket__big { font-family: var(--font-mono); font-size: 72px; font-weight: 700; color: #7d7d7d; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fxl-pocket__sub { font-family: var(--font-mono); font-size: 15px; color: #5f5f5f; }
.fxl-pocket__hint { margin-top: 60px; font-size: 13px; color: #4f4f4f; }
.fxl-pocket__track { width: min(280px, 80vw); height: 46px; border: 1px solid #333; position: relative; }
.fxl-pocket__knob { position: absolute; inset-inline-start: 3px; top: 3px; bottom: 3px; width: 60px; background: #262626; }
html[data-eink] .fxl-pocket { background: #fff; color: #000; }
/* Der Countdown teilt die Fläche der Tasche, aber nicht ihre Dunkelheit:
   wer gleich losläuft, schaut hin – die Zahl ist das Hellste im Bild. */
.fx-count { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.fx-count .fxl-pocket__state { color: var(--c-fitness); }
.fx-count .fxl-pocket__big { font-size: 128px; color: var(--text-strong); animation: fx-count-pop 1s var(--ease-out) infinite; }
.fx-count .fxl-pocket__hint { color: var(--text-muted); }
@keyframes fx-count-pop { 0% { transform: scale(1.18); opacity: .4; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-count .fxl-pocket__big { animation: none; } }
html[data-motion="reduce"] .fx-count .fxl-pocket__big { animation: none; }
html[data-eink] .fx-count { background: #fff; backdrop-filter: none; }
html[data-eink] .fx-count .fxl-pocket__big { animation: none; color: #000; }

/* ---------- Karte -------------------------------------------------------------------- */

.fmap { display: block; width: 100%; height: auto; }
.fmap__plan { stroke: var(--c-fitness); stroke-width: 4; stroke-dasharray: 7 6; opacity: .5; stroke-linejoin: round; }
.fmap__under { stroke: var(--bg); stroke-width: 6.5; stroke-linejoin: round; stroke-linecap: round; opacity: .7; }
.fmap__line { stroke: var(--c-fitness-stroke); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.fmap__start { fill: var(--state-good); stroke: var(--bg); stroke-width: 1.5; }
.fmap__end { fill: var(--text-strong); stroke: var(--bg); stroke-width: 1.5; }
.fmap__me { fill: var(--text-strong); stroke: var(--c-fitness-stroke); stroke-width: 3; }
.fmap__ghost { fill: var(--surface-3); stroke: var(--text-muted); stroke-width: 2; }
.fmap__credit { font-size: max(var(--fs-floor), 8px); fill: var(--text-subtle); }
.fmap__wait { font-size: 13px; fill: var(--text-subtle); }
.fmap--thumb .fmap__line { stroke-width: 3; stroke: var(--c-fitness); }
.fmap--thumb .fmap__under, .fmap--thumb .fmap__start, .fmap--thumb .fmap__end { display: none; }
.fmap--thumb rect:first-child { fill: transparent; }

.fx-mapbox { --cut: 14px; padding: 0; overflow: hidden; }
.fx-mapbox .fmap { clip-path: var(--cut-clip); }
.fx-mapbox__over {
  position: absolute;
  inset-inline-start: 10px;
  top: 10px;
  padding: 6px 9px;
  font-size: 12.5px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
.fx-mapbox__over b { color: var(--state-good); }

/* ---------- Abschnitte, Zonen, Bestzeiten ----------------------------------------------- */

.fx-splits { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12px; }
.fx-split { display: grid; grid-template-columns: 26px minmax(0, 1fr) 52px 44px; align-items: center; gap: 8px; color: var(--text); }
.fx-split__n { color: var(--text-subtle); }
.fx-split__bar { height: 10px; background: var(--surface-3); }
.fx-split__bar i { display: block; height: 100%; background: var(--z, var(--c-fitness)); }
.fx-split__hr { color: var(--text-subtle); text-align: end; }
.fx-split.is-fast .fx-split__v { color: var(--state-good); }

.fx-zonebars { display: grid; gap: 7px; }
.fx-zonebar { display: grid; grid-template-columns: 30px minmax(0, 1fr) 56px; align-items: center; gap: 8px; font-size: 12.5px; }
.fx-zonebar b { font-family: var(--font-mono); color: var(--z); }
.fx-zonebar__track { height: 12px; background: var(--surface-3); }
.fx-zonebar__track i { display: block; height: 100%; background: var(--z); }
.fx-zonebar span:last-child { font-family: var(--font-mono); color: var(--text-muted); text-align: end; }

.fx-badge {
  --cut: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  background: color-mix(in srgb, var(--state-good) 22%, var(--surface-2));
  clip-path: var(--cut-clip);
}
.fx-badge--pr { background: color-mix(in srgb, var(--c-fitness) 26%, var(--surface-2)); }
.fx-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Intervall-Profil und Editor ------------------------------------------------- */

.fx-profile { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.fx-profile i { display: block; min-width: 2px; background: var(--z); }
.fx-profile__meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }

.fx-steps { display: grid; gap: 10px; }
.fx-stepcard { --cut: 10px; padding: 10px 12px; gap: 8px; }
.fx-stepcard.is-repeat { --fx-edge: var(--c-fitness); }
.fx-stepcard__row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.fx-stepcard__dot { width: 10px; height: 10px; background: var(--z, var(--text-subtle)); }
.fx-stepcard__name { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.fx-stepcard__meta { font-size: 12.5px; color: var(--text-muted); }
.fx-stepcard__inner { display: grid; gap: 6px; padding-inline-start: 12px; border-inline-start: 2px solid var(--line-strong); }

/* ---------- Sport -------------------------------------------------------------------- */

.fx-sports { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.fx-sport {
  --depth: 3px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-height: 86px;
  padding: 12px 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--depth) var(--depth) 0 0 var(--py-plinth);
  transition: transform var(--dur-fast) var(--ease-out);
}
.fx-sport img { width: 30px; height: 30px; }
.fx-sport.is-generic img { opacity: .55; }
.fx-sport:active { transform: translate(var(--depth), var(--depth)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.fx-sport:hover { box-shadow: inset 0 0 0 1px var(--c-fitness), var(--depth) var(--depth) 0 0 var(--py-plinth); }
.fx-sport:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 3px; }
.fx-sport small { font-size: max(var(--fs-floor), 10.5px); font-weight: 400; color: var(--text-subtle); }

.fx-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.fx-score { display: flex; align-items: center; gap: 8px; }
.fx-score input { width: 56px; text-align: center; font-family: var(--font-mono); font-size: 20px; }
.fx-score span { font-family: var(--font-mono); font-size: 18px; color: var(--text-subtle); }

/* Der Kopf ist .la-fold (styles/components.css) wie jede „mehr davon“-
   Klappe; hier nur die Bereichsfarbe. */
.fx-more { --fold-accent: var(--c-fitness); }
.fx-more__body { display: grid; gap: 12px; padding-top: 8px; }

/* ---------- Dehnen ------------------------------------------------------------------- */

.pose-fig { display: block; width: 100%; height: auto; overflow: visible; }

.fx-stretch-live { display: grid; gap: 14px; justify-items: stretch; padding-bottom: 120px; }
.fx-stretch-live__top { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.fx-stretch-live__bar { height: 4px; background: var(--surface-3); }
.fx-stretch-live__bar i { display: block; height: 100%; background: var(--c-fitness); }
.fx-stretch-live__name { margin: 0; font-size: 24px; font-weight: 700; color: var(--text-strong); text-align: center; line-height: 1.2; }
.fx-stretch-live__side { margin: 2px 0 0; font-size: 13px; color: var(--c-fitness); text-align: center; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); }
.fx-stretch-live__cue { margin: 0; font-size: 14px; color: var(--text-muted); text-align: center; line-height: 1.5; }
.fx-stretch-live__fig { --cut: 14px; padding: 10px 12px 8px; }
.fx-stretch-live__fig .pose-fig { max-height: 220px; }
.fx-stretch-live__timer { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: center; gap: 16px; }
.fx-stretch-live__aside { display: grid; gap: 6px; }
.fx-stretch-live__aside b { color: var(--c-fitness); }

.fx-poses { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fx-pose { --cut: 12px; gap: 6px; padding: 10px 10px 12px; text-align: start; color: inherit; }
.fx-pose .pose-fig { height: 108px; }
.fx-pose__name { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.fx-pose__meta { font-size: max(var(--fs-floor), 11.5px); color: var(--text-muted); }

.fx-feel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fx-feel .btn3d { min-height: 46px; }
.fx-feel .btn3d.is-on { --btn-face: var(--c-fitness); --btn-face-hover: var(--c-fitness); color: var(--on-accent); }

.fx-body { max-width: 300px; justify-self: center; width: 100%; }

/* ---------- Strecken ------------------------------------------------------------------ */

.fx-routes { display: grid; gap: 12px; }
.fx-route { --cut: 12px; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; width: 100%; text-align: start; color: inherit; font: inherit; cursor: pointer; }
.fx-route .fmap { width: 70px; height: 48px; }
.fx-route__name { font-size: 15px; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.fx-route__meta { font-size: 12.5px; color: var(--text-muted); }
.fx-route__best { font-family: var(--font-mono); font-size: 14px; color: var(--text-strong); text-align: end; }
.fx-route__best small { display: block; font-family: var(--font); font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); }

/* ---------- Der Streifen unten (laufende Einheit) ---------------------------------------- */

.fit-chip--live { border-color: var(--c-fitness); }

/* ---------- Breite Bildschirme ----------------------------------------------------------- */

@media (min-width: 720px) {
  .fx-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .fx-sports { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-ring__fill, .fxl-step__bar i { transition: none; }
  .fx-chip--wait i { animation: none; }
}
html[data-eink] .fx-ring__fill, html[data-eink] .fxl-step__bar i { transition: none; }

/* Today › This week: seit 0.5.0 beta vier Kacheln (Einheiten, aktive Zeit,
   Strecke oder Volumen, Serie) – zwei mal zwei auf dem Telefon, eine Reihe
   ab 560 px. */
.fit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .fit-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fit-card__before { margin: 10px 0 0; }
.fx-more--panel { padding-top: 6px; padding-bottom: 6px; gap: 0; }
.fx-seg--sm .fx-seg__btn { min-height: 34px; font-size: 12px; }

/* Die Kacheln der OpenStreetMap sind hell. Umgekehrt, Farbton gedreht und
   gedämpft werden sie eine dunkle Karte, auf der die Strecke leuchtet. */
.fmap__tiles { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.45); opacity: .9; }
html[data-eink] .fmap__tiles { filter: grayscale(1) contrast(.8); opacity: .6; }

/* Frühere Einträge unter einer Tür (Sport, Dehnroutine): Überschrift + Liste. */
.fx-past { display: grid; gap: 8px; }

/* Der Countdown-Ring als Knopf: ohne eigene Fläche, nur der Ring. */
.fx-ring-btn { display: block; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
.fx-ring-btn:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 4px; }

.fxl-step__skip { justify-self: end; margin-top: 2px; padding: 6px 0; background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.fxl-step__skip:hover, .fxl-step__skip:focus-visible { color: var(--text); }

/* Filterleisten als Wischreihe (Telefon-Form): eine Zeile je Filter statt
   eines Blocks aus Chips. Ab 720 px brechen sie um wie gewohnt. */
.fx-chips--row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; }
.fx-chips--row::-webkit-scrollbar { display: none; }
.fx-chips--row > * { flex: none; }
@media (min-width: 720px) { .fx-chips--row { flex-wrap: wrap; overflow: visible; } }

/* Library: der Name einer Cardio-/Dehnzeile ist ein Knopf ohne eigene Fläche. */
.fitm-row__open { padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.fitm-row__open:hover .fitm-row__name { color: var(--text-strong); }
.fitm-row__open:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 3px; }

/* Plan: „+ Add another" ist ein Angebot, kein Eintrag – leiser als die
   gewählten Workouts darüber (gestrichelt, gedämpfte Schrift). */
.fit-select:has(> select[data-slot-add]) { border-style: dashed; background: transparent; box-shadow: none; }
.fit-select > select[data-slot-add] { color: var(--text-muted); font-weight: 500; }

/* Zeile ohne Zeichen vorn: Name links, Wert rechts. */
.fx-li--pair { grid-template-columns: minmax(0, 1fr) auto; }
.fx-li > b.mono { font-family: var(--font-mono); font-size: 15px; color: var(--text-strong); }

/* ---------- Eine laufende Einheit beenden (0.6.0 beta) ----------------------------
   Dieselbe Frage für jede Art (LA.fitness.ui.stillRunning): oben, was
   gespeichert oder verloren würde, darunter immer in dieser Reihenfolge
   Continue · Finish and save · Discard… */
.fxe-body { display: grid; gap: 10px; }
.fxe-sum {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  margin: 2px 0 6px;
}
.fxe-sum div { display: grid; justify-items: center; gap: 2px; min-width: 60px; }
.fxe-sum b {
  font: 500 20px/1.1 var(--font-mono); color: var(--text-strong);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.fxe-sum span { font-size: 12px; color: var(--text-subtle); }
/* Der Auslöser einer Zerstörung ist leise: rote Schrift, keine Fläche. */
.fxe-discard {
  justify-self: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--c-fitness);
}
.fxe-discard:hover { background: rgba(var(--t-fitness-stroke), .12); }
.fxe-discard:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 2px; }

/* =====================================================================
   0.6.0 beta – Davor/danach, Dehnkarte, Sport-Blatt, Lauf mit Karte
   Alles in den zwei Rottönen des Bereichs (--c-fitness, --c-fitness-stroke);
   die Arten erkennt man am Zeichen, nicht an einer eigenen Farbe.
   ===================================================================== */

/* ---------- Kopfzeile eines Teils im Lauf (run.js) ---------- */
.fxp-part {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 18px 0 10px;
  text-align: start;
}
.fit-exzone > .fxp-part:first-child { margin-top: 4px; }
.fxp-part__hex {
  width: 38px; height: 34px;
  display: grid; place-items: center;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--c-fitness-stroke) 22%, var(--surface-2));
}
.fxp-part__hex img { width: 20px; height: 20px; }
.fxp-part__t { display: grid; gap: 1px; min-width: 0; }
.fxp-part__kick {
  font: 500 max(var(--fs-floor), 10.5px)/1.3 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-fitness);
}
.fxp-part__name { font-size: 16px; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.fxp-part__meta { font-size: 12.5px; color: var(--text-subtle); }
.fxp-part__go {
  min-height: 40px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.fxp-part__go:hover { color: var(--text); background: rgba(var(--o), .06); }
.fxp-part__go:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 2px; }
/* Fertig: eine Zeile mit rotem Rand – antippen klappt wieder auf. */
.fxp-part.is-done {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--c-fitness-stroke);
  border-radius: 10px;
  background: var(--surface);
  margin: 4px 0 14px;
  cursor: pointer;
}
.fxp-part.is-done:hover { background: var(--surface-2); }
.fxp-part.is-done .fxp-part__hex { width: 26px; height: 24px; }
.fxp-part.is-done .fxp-part__hex img { width: 15px; height: 15px; }
.fxp-part.is-done .fxp-part__name { font-size: 14px; }
.fxp-part.is-skipped { opacity: .7; }
/* Das Workout selbst: ein Kapitelanfang, kein weiterer Teil. Haarlinie über die
   ganze Breite, das Stück über dem Zeichen in Rot – wie die Akzentlinie der
   Topbar; Zeichen und Name eine Stufe größer als die Karten darunter. */
.fxp-part--main {
  position: relative;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  margin: 30px 0 14px;
  padding-top: 20px;
}
.fxp-part--main::before {
  content: '';
  position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, var(--c-fitness-stroke) 0 48px, var(--line) 48px);
}
.fit-exzone > .fxp-part--main:first-child { margin-top: 4px; padding-top: 0; }
.fit-exzone > .fxp-part--main:first-child::before { content: none; }
.fxp-part--main .fxp-part__hex { width: 48px; height: 42px; background: color-mix(in srgb, var(--c-fitness-stroke) 34%, var(--surface-2)); }
.fxp-part--main .fxp-part__hex img { width: 24px; height: 24px; }
.fxp-part--main .fxp-part__t { gap: 2px; }
.fxp-part--main .fxp-part__name { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.fxp-part__check { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.fxp-part__check img { width: 14px; height: 14px; }

/* Die Art an der Stelle des Rangchips – still, ohne Farbe. */
.fxp-tag {
  flex: none;
  padding: 4px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: 500 max(var(--fs-floor), 10px)/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Satznummer ohne Knopf (Teile): dieselbe Fläche wie die der Übungen. */
.fit-set__n--plain { pointer-events: none; }

/* Sport: die Stufe als Feld – antippen schaltet weiter. */
.fxp-level { font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; }

/* ---------- Die Dehnkarte ---------- */
.fxs .fit-ex__head { align-items: flex-start; }
.fit-ex__mark.fxs-fig {
  width: 52px; height: 52px;
  padding: 2px; margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}
.fxs-fig svg { width: 46px; height: 46px; display: block; }
.fxs-fig .fit-ex__badge { inset-inline-end: -4px; bottom: -4px; }
.fxs-title { flex: 1; min-width: 0; display: grid; gap: 3px; padding-top: 3px; text-align: start; }
.fxs-title .fit-ex__name { flex: none; white-space: normal; }
.fxs-meta { font-size: 12.5px; color: var(--text-subtle); }
.fxs .fit-ex__btn { margin-top: 4px; }
.fxs-about {
  display: block; width: 100%;
  margin: 10px 0 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(var(--o), .035);
  font-size: 14px; line-height: 1.5;
  color: var(--text);
  text-align: start;
}
.fxs-about:hover { background: rgba(var(--o), .06); }
.fxs-about:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 2px; }
.fxs-about__more {
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--c-fitness);
}
.fit-set.fxs-set { grid-template-columns: 34px minmax(0, 1fr) 62px 40px; }
@media (max-width: 359px) { .fit-set.fxs-set { grid-template-columns: 28px minmax(0, 1fr) 54px 34px; } }
.fit-set--head.fxs-set span:nth-child(2) { text-align: start; padding-inline-start: 4px; }
.fxs-side { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text); padding-inline-start: 4px; }
.fxs-side.is-both > span:last-child { color: var(--text-subtle); }
.fxs-side__fig {
  width: 34px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 6px; background: var(--surface-2);
}
.fxs-side__fig svg { width: 30px; height: 28px; display: block; }
.fit-set.is-done .fxs-side { color: var(--text-strong); }
.fxs-unit { position: relative; display: block; }
.fxs-unit .fit-in { padding-inline-end: 16px; }
.fxs-unit i {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: max(var(--fs-floor), 11px); color: var(--text-subtle); pointer-events: none;
}

/* Eine Dehnroutine für sich: ihr Fortschritt statt des Pausenweckers. */
.fxs-progress {
  display: grid; gap: 6px;
  margin-top: 8px;
  padding: 8px 12px 10px;
  border-radius: 8px;
  background: rgba(var(--o), .04);
}
.fxs-progress__row {
  display: flex; justify-content: space-between; gap: 10px;
  font: 500 max(var(--fs-floor), 11px)/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.fxs-progress__row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxs-progress__row > span:last-child { flex: none; }
.fxs-progress__row b { color: var(--text-strong); font-weight: 500; }
.fxs-progress__bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.fxs-progress__bar i { display: block; height: 100%; background: var(--c-fitness-stroke); transition: width var(--dur) var(--ease-out); }

/* ---------- Das Fenster einer Dehnung (stretch.js, sheet) ---------- */
.fxs-sheet { gap: 12px; }
.fxs-sheet__fig {
  display: grid; place-items: center;
  padding: 10px 0 4px;
  border-radius: 12px;
  background: var(--surface-2);
}
.fxs-sheet__fig svg { width: min(240px, 100%); height: 180px; }
.fxs-sheet__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fxs-fact {
  padding: 5px 8px; border-radius: 6px;
  background: rgba(var(--o), .05);
  font-size: 12.5px; color: var(--text-muted);
}
.fxs-fact b { color: var(--text-strong); font-weight: 600; }
.fxs-sheet__about { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.fxs-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: fxs-step; }
.fxs-steps li {
  counter-increment: fxs-step;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.fxs-steps li::before {
  content: counter(fxs-step);
  width: 24px; height: 22px;
  display: grid; place-items: center;
  clip-path: var(--hex-clip);
  background: color-mix(in srgb, var(--c-fitness-stroke) 28%, var(--surface-2));
  font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono); color: var(--text-strong);
  margin-top: 1px;
}
.fxs-feel { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; }
.fxs-feel .fx-body { max-width: 120px; }
.fxs-feel p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.fxs-avoid {
  margin: 0; padding: 10px 12px;
  border-inline-start: 3px solid var(--c-fitness-stroke);
  border-radius: 0 8px 8px 0;
  background: rgba(var(--o), .035);
  font-size: 14px; line-height: 1.5; color: var(--text);
}
/* Die Figur in der Liste des Editors ist ein Knopf: ihr Fenster. */
.fxs-thumb { padding: 0; overflow: hidden; }
.fxs-thumb svg { width: 100%; height: 100%; }

/* ---------- Zeilen: Davor/danach, Ziel, Dehnen auf dem Startbildschirm ---------- */
.fxp-rows { display: grid; gap: 6px; margin: 10px 0 4px; }
.fxp-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
  text-align: start;
}
button.fxp-row:hover { background: var(--surface-2); }
button.fxp-row:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 2px; }
.fxp-row img { width: 22px; height: 22px; }
.fxp-row b { display: block; font-size: 14px; color: var(--text-strong); font-weight: 600; }
.fxp-row__meta { display: block; font-size: 12.5px; color: var(--text-subtle); }
.fxp-row__k { display: block; font: 500 max(var(--fs-floor), 10px)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-fitness); }
.fxp-row__go { color: var(--text-muted); font-size: 18px; }
.fxp-row--quiet { padding: 8px 10px; background: rgba(var(--o), .025); }
.fxp-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fxp-mark {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px 2px 2px;
  border-radius: 6px;
  background: rgba(var(--o), .05);
  font-size: max(var(--fs-floor), 11px); color: var(--text-subtle);
}
.fxp-mark img { width: 16px; height: 16px; padding: 2px; clip-path: var(--hex-clip); background: color-mix(in srgb, var(--c-fitness-stroke) 22%, var(--surface-2)); }
.fxp-routines { gap: 6px; }
.fxe-note { margin: 0; text-align: center; font-size: 13px; color: var(--text-muted); }

/* Verlauf: die Teile eines Besuchs in der Zeile seines Workouts. */
.fit-hist__parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.fit-hist__part { display: inline-flex; align-items: center; gap: 4px; font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }
.fit-hist__part img { width: 13px; height: 13px; opacity: .8; }

/* „One at a time" – dieselbe Frage wie beim Verlassen, als Karte. */
.fit-busy__card { margin-top: 12px; }
.fit-busy__title { margin: 0; text-align: center; font-size: 18px; font-weight: 600; color: var(--text-strong); }

/* ---------- Sport: „Log a game" ---------- */
.fxq .fx-sports { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-sport.is-on {
  box-shadow: inset 0 0 0 2px var(--c-fitness-stroke), var(--depth) var(--depth) 0 0 var(--py-plinth);
  color: var(--text-strong);
}
.fxq-all { justify-self: start; }
.fxq-results { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.fxq-mins .fx-step { width: 100%; justify-content: space-between; }
.fxq-when { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); }
.fxq-when .fx-field { flex: 1; }
.fxq-log { min-height: 52px; }
.fxq-kcal { margin: 0; text-align: center; font-size: 13px; color: var(--text-subtle); }
.fxq-kcal b { color: var(--text); }
.fxq-after {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.fxq-after__what { display: grid; gap: 1px; text-align: start; font-size: 13px; color: var(--text-muted); }
.fxq-after__what b { color: var(--text); font-weight: 600; }

/* ---------- Cardio: Start mit Karte ---------- */
.fx-cstart { padding-bottom: calc(var(--sh-tabs-clear, 72px) + 92px); }
.fxr-start {
  position: relative;
  margin: -6px calc(-1 * var(--gutter, 16px)) 6px;
  height: 230px;
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
}
.fxr-start .fxr-map, .fxr-start .fxr-map svg { width: 100%; height: 100%; display: block; }
.fxr-nogps { position: absolute; inset: 0; display: grid; place-items: center; padding: 44px 20px 16px; text-align: center; }
.fxr-nogps > div { display: grid; gap: 8px; justify-items: center; max-width: 300px; }
.fxr-nogps b { font-size: 16px; color: var(--text-strong); }
.fxr-nogps span { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.fxr-nogps__ico { width: 34px; height: 34px; opacity: .6; }
.fxr-chips { position: absolute; inset-inline-start: 12px; top: 12px; inset-inline-end: 12px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.fxr-chips .fx-chip { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fxr-go {
  position: fixed;
  inset-inline-start: 50%; transform: translateX(-50%);
  bottom: calc(var(--sh-tabs-clear, 72px) + 10px);
  z-index: 55;
  width: min(var(--flow), calc(100vw - 2 * var(--gutter)));
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.fxr-go .btn3d { width: 100%; min-height: 54px; font-size: 17px; font-weight: 600; }

/* ---------- Cardio: der laufende Lauf ---------- */
/* Die Fläche zwischen Topbar und Tableiste – fest, die Karte füllt sie. */
.fxr-stage {
  position: fixed;
  inset-inline-start: 0; inset-inline-end: 0;
  top: calc(var(--safe-top, 0px) + var(--sh-top-h));
  bottom: var(--sh-tabs-clear, 72px);
  z-index: 1;
  overflow: hidden;
  background: var(--bg-deep);
}
@media (min-width: 900px) { .fxr-stage { inset-inline-start: var(--rail-w, 0px); } }
.fxr-map { position: absolute; inset: 0; }
.fxr-map svg { width: 100%; height: 100%; display: block; }
.fxr-over { position: absolute; inset-inline-start: 12px; inset-inline-end: 12px; top: 12px; z-index: 2; display: grid; gap: 8px; justify-items: start; }
.fxr-over .fxr-chips { position: static; }
.fxr-over .fxl-step, .fxr-over .fxl-alert { width: 100%; max-width: 520px; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fxr--timed .fxr-stage { background: var(--bg); }
.fxr-centre {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center; gap: 8px;
  padding: 80px 20px 230px;
  text-align: center;
}
.fxr-clock { font: 500 clamp(56px, 18vw, 96px)/1 var(--font-mono); letter-spacing: -.03em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fxr-note { max-width: 300px; margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.fxr-pool { width: min(320px, 80vw); min-height: 150px; font-size: 22px; }

.fxr-card {
  position: fixed;
  inset-inline-start: 50%; transform: translateX(-50%);
  bottom: calc(var(--sh-tabs-clear, 72px) + 10px);
  z-index: 55;
  display: grid; gap: 10px;
  width: min(var(--flow), calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - var(--sh-top-h) - var(--sh-tabs-clear, 72px) - 40px);
  overflow-y: auto;
  padding: 6px 14px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@media (min-width: 900px) { .fxr-card { inset-inline-start: calc(50% + var(--rail-w, 0px) / 2); } }
.fxr-grab { justify-self: center; width: 64px; height: 18px; display: grid; place-items: center; border-radius: 8px; }
.fxr-grab i { width: 38px; height: 4px; border-radius: 2px; background: var(--surface-3); }
.fxr-grab:hover i, .fxr-card.is-open .fxr-grab i { background: var(--c-fitness); }
.fxr-grab:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 2px; }
.fxr-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.fxr-big { font: 500 46px/1 var(--font-mono); letter-spacing: -.03em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fxr-big small { font: 500 13px var(--font); color: var(--text-subtle); margin-inline-start: 6px; letter-spacing: 0; }
.fxr-time { text-align: end; }
.fxr-time b { display: block; font: 500 24px/1.1 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fxr-lbl { display: block; font: 500 max(var(--fs-floor), 10px)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); }
.fxr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.fxr-three b { display: block; font: 500 17px/1.2 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.fxr-ghost { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.fxr-more { display: grid; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.fxr-bar { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px; }
.fxr-bar .btn3d { min-height: 52px; font-size: 15px; font-weight: 600; }
.fxr-bar--two { grid-template-columns: 1fr 1fr; }
/* Finish, einmal angetippt: voll im kräftigen Rot, ein Streifen läuft ab. */
.fxr-finish { position: relative; overflow: hidden; }
.fxr-finish.is-armed { --btn-face: var(--c-fitness-stroke); --btn-face-hover: var(--c-fitness-stroke); }
.fxr-finish__fill { position: absolute; inset-inline-start: 0; bottom: 0; height: 4px; width: 0; background: rgba(0, 0, 0, .35); }
.fxr-finish.is-armed .fxr-finish__fill { animation: fxr-arm 2s linear forwards; }
@keyframes fxr-arm { from { width: 100%; } to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .fxr-finish.is-armed .fxr-finish__fill { animation: none; width: 100%; } }
html[data-motion="reduce"] .fxr-finish.is-armed .fxr-finish__fill { animation: none; width: 100%; }
.fxr-hint { margin: 0; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* „How far did you run?" */
.fxr-dist { display: grid; gap: 12px; }
.fxr-dist__field { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.fxr-dist__field .fit-in { width: 140px; font: 500 34px/1.1 var(--font-mono); text-align: center; padding: 10px 6px; }
.fxr-dist__save { min-height: 52px; }
.fxr-dist__skip { justify-self: center; }
.fxr-splits { display: grid; gap: 4px; }
.fxr-splits div { display: grid; grid-template-columns: 52px minmax(0, 1fr) 56px; gap: 8px; align-items: center; font: 500 12.5px/1 var(--font-mono); color: var(--text-muted); }
.fxr-splits i { display: block; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--c-fitness) 55%, var(--surface-3)); }
.fxr-splits div span:last-child { text-align: end; }
.fxr-est { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--text-subtle); }
.fxr-est b { color: var(--text); }
.fxr-splits-list { max-height: 30vh; overflow-y: auto; }

html[data-eink] .fxr-card, html[data-eink] .fxr-go, html[data-eink] .fxr-chips .fx-chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
.fxq-after__min { color: var(--text-muted); font-weight: 400; }

/* ---------- Today: drei Wege an jeder Karte + ⋯ (0.6.0 beta) -----------------------------
   Start füllt die erste Zeile; Quick track und Not today teilen sich die
   zweite. ⋯ öffnet dasselbe Menü wie Halten (LA.hold) – an der Studio-
   Karte steht es am Ende der zweiten Zeile, an den anderen oben rechts. */
.fx-more { --depth: 2.5px; width: 36px; height: 36px; padding: 0; flex: none; }
.fx-more img { width: 16px; height: 16px; }
.fx-pcard__morerow { display: flex; justify-content: flex-end; }
.fit-card__acts--three {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.fit-card__acts--three > .fit-start { grid-column: 1 / -1; }
.fit-card__acts--three .fitm-textbtn,
.fx-pcard__acts--three .fitm-textbtn { justify-content: center; text-align: center; min-height: 36px; }
.fit-card__acts--three .fx-more { height: auto; min-height: 36px; }

/* Ein bewusst weggelassener Tag: ein Strich, kein Rot. */
.fit-day.is-skipped { color: var(--text-subtle); }
.fit-day.is-skipped .fit-day__mark--rest { opacity: .9; }

/* ---------- Formprüfung Fitness (0.6.0 beta) ------------------------------------------------
   In dieser Datei standen achtzehn Rundungen aus 0.5/0.6 – „rund ist in
   der App nichts". Flächen bekommen den Eckschnitt (Rand und Fläche als
   zwei Schichten, weil clip-path einen border abschneidet), alles unter
   ~30 px ein Rechteck, Knöpfe ein Rechteck. Steht am Ende, damit es die
   Regeln weiter oben schlägt, ohne sie einzeln zu suchen. */

/* Zeilen auf dem Cardio-Start (Goal, Stretching) und davor/danach. */
.fxp-row {
  --cut: 10px;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
}
.fxp-row::before,
.fxp-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: var(--cut-clip);
  background: var(--line-strong);
}
.fxp-row::after { inset: 1px; z-index: -1; background: var(--surface); }
button.fxp-row:hover { background: none; }
button.fxp-row:hover::after { background: var(--surface-2); }
.fxp-row--quiet::before { background: var(--line); }
.fxp-row--quiet::after { background: color-mix(in srgb, var(--surface) 70%, transparent); }

/* Ein fertiger Teil: der Zustand steckt in der Fläche (Streifen links), nicht im Rand. */
.fxp-part.is-done {
  --cut: 10px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: linear-gradient(90deg, var(--c-fitness-stroke) 0 3px, var(--surface) 3px);
}

/* Lesbare Flächen: Beschreibung, Fortschritt, Figur einer Dehnung. */
.fxs-about,
.fxs-progress,
.fxs-sheet__fig {
  --cut: 10px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}
.fit-ex__mark.fxs-fig {
  --cut: 8px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
}
.fxr-card {
  --cut: 14px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Unter 30 px mit Schrift oder Zeichen: ein Rechteck, kein Schnitt. */
.fxp-tag,
.fxp-mark,
.fxs-side__fig,
.fxs-fact,
.fxs-progress__bar,
.fxr-grab,
.fxr-grab i,
.fxr-splits i { border-radius: 0; }

/* Knöpfe: eckig. */
.fxe-discard,
.fxp-part__go { border-radius: 0; }

/* Das Zitat einer Dehnung (Feel / Avoid): ein Streifen links, sonst eckig. */
.fxs-avoid { border-radius: 0; }

/* Der feste Streifen unten auf dem Cardio-Start: Quick track | Start. */
.fxr-go--two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.fxr-go--two .btn3d:first-child { font-size: 15px; color: var(--c-fitness); }

html[data-eink] .fxp-row::before { background: #000; }
html[data-eink] .fxp-row::after { background: #fff; }
html[data-eink] .fxp-part.is-done { background: linear-gradient(90deg, #000 0 3px, #fff 3px); }
html[data-eink] .fxr-card { box-shadow: inset 0 0 0 2px #000; }

/* ---------- Sprint-Uhr (app/fitness/sprint.js, 0.6.0 beta) -----------------------------
   Vorbereiten wie der Cardio-Start. Läuft: oben die Zeile (Rep 3 / 6),
   darunter EINE große Fläche – sie ist der Knopf, die Zahl darin die
   Hauptsache. Rand in Fitness-Rot, damit man sie auch aus dem Augen-
   winkel trifft. */
.fsp { padding-bottom: 96px; }
.fsp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fsp-rank {
  width: 30px; height: 26px; flex: none;
  clip-path: var(--hex-clip);
  background: var(--rk, var(--surface-3));
}
.fsp--live {
  display: flex; flex-direction: column; gap: 12px;
  min-height: calc(100dvh - var(--sh-top-h, 64px) - var(--sh-tabs-clear, 72px) - 24px);
  padding-bottom: 12px;
}
.fsp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fsp-mono { font: 500 max(var(--fs-floor), 11px)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.fsp-mono b { color: var(--text-strong); font-weight: 600; }
.fsp-acc { color: var(--c-fitness); }
.fsp-zone {
  --cut: 18px;
  position: relative; isolation: isolate;
  flex: 1 1 auto; min-height: 320px;
  display: grid; place-items: center; align-content: center; gap: 14px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fsp-zone::before, .fsp-zone::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  clip-path: var(--cut-clip);
  background: var(--c-fitness-stroke);
}
.fsp-zone::after {
  inset: 2px; z-index: -1;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--c-fitness-stroke) 14%, var(--bg-deep)), var(--bg-deep) 70%);
}
.fsp-zone:focus-visible { outline: 2px solid var(--c-fitness); outline-offset: 3px; }
.fsp-zone:active::after { background: color-mix(in srgb, var(--c-fitness-stroke) 22%, var(--bg-deep)); }
.fsp-ready { font-size: 30px; font-weight: 700; color: var(--text-strong); line-height: 1.1; text-wrap: balance; }
.fsp-time {
  font: 700 clamp(64px, 22vw, 120px)/1 var(--font-mono);
  letter-spacing: -.04em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.fsp-time small { font-size: .48em; color: var(--c-fitness); letter-spacing: -.02em; }
.fsp-stopword { font-size: 17px; color: var(--text-strong); }
.fsp-cam {
  position: relative; width: min(260px, 70%); aspect-ratio: 3 / 4;
  overflow: hidden; background: #000;
}
.fsp-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsp-cam i { position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 3px; margin-inline-start: -1.5px; background: var(--state-bad); }
.fsp-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fsp-tiles div {
  --cut: 8px; padding: 10px; text-align: center;
  clip-path: var(--cut-clip); background: var(--surface-2);
}
.fsp-tiles b { display: block; font: 700 20px/1.2 var(--font-mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fsp-tiles span { font: 500 max(var(--fs-floor), 9.5px)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.fsp-rest { display: grid; gap: 14px; justify-items: stretch; }
.fsp-rest > [data-sp-ring] { justify-self: center; width: 190px; }
.fsp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fsp-row .btn3d { min-height: 50px; font-size: 15px; font-weight: 600; }
.fsp-fade { gap: 8px; }
.fsp-fade b { color: var(--text-strong); }
.fsp-chart { width: 100%; height: auto; display: block; }
.fsp-grid { stroke: var(--grid-line); stroke-width: 1; }
.fsp-axis { fill: var(--text-subtle); font: 500 max(var(--fs-floor), 9px) var(--font-mono); }
.fsp-val { fill: var(--text); font: 500 max(var(--fs-floor), 10px) var(--font-mono); }
.fsp-val.is-best { fill: var(--c-fitness); font-weight: 700; }
.fsp-bar { fill: color-mix(in srgb, var(--text-muted) 45%, var(--surface-3)); }
.fsp-bar.is-best { fill: var(--c-fitness); }
.fsp-typedlist { display: grid; gap: 8px; }
.fsp-typed { display: grid; grid-template-columns: 70px minmax(0, 1fr) 16px; align-items: center; gap: 10px; }
.fsp-typed span { font: 500 max(var(--fs-floor), 11px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.fsp-typed i { font-style: normal; color: var(--text-subtle); }
.fsp-typed__in { font: 600 18px var(--font-mono); text-align: end; }
.fsp-pr { gap: 10px; }
.fsp-pr__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; }
.fsp-pr__row b { display: block; color: var(--text-strong); font-size: 15px; }
.fsp-rep { grid-template-columns: 28px minmax(0, 1fr) auto; }
.fsp-rep__n { font: 700 12px var(--font-mono); color: var(--text-muted); text-align: center; }
.fsp-rep.is-void .fx-li__name { color: var(--text-subtle); text-decoration: line-through; }

html[data-eink] .fsp-zone::before { background: #000; }
html[data-eink] .fsp-zone::after { background: #fff; }
html[data-eink] .fsp-bar { fill: #9a9a9a; }
html[data-eink] .fsp-bar.is-best { fill: #000; }
html[data-eink] .fsp-tiles div { background: #fff; box-shadow: inset 0 0 0 2px #000; clip-path: none; }

/* Intervall-Uhr und Bahn auf dem laufenden Bildschirm (0.6.0 beta). */
.fxr-iv__word { font-size: 14px; color: var(--c-fitness); letter-spacing: .2em; }
.fxr-iv .fxr-clock { font-size: clamp(72px, 24vw, 128px); }
.fxr-centre .fxr-pool { margin-top: 10px; }
.fsp-build::before { background: var(--c-fitness-stroke); }
/* Zwei Stepper nebeneinander: kleinere Zahl, sonst stößt „6:00" an die Knöpfe. */
.fsp-two .fx-step { gap: 6px; }
.fsp-two .fx-step__val b { font-size: 22px; }
.fsp-two .fx-step__btn { min-width: 38px; padding-inline: 0; }
@media (max-width: 380px) { .fsp-two { grid-template-columns: minmax(0, 1fr); } }
.fxr-go--two .btn3d { white-space: nowrap; padding-inline: 10px; }

/* Fläche der Panels außerhalb von .fx (0.6.0 beta): --k stand nur an
   .fx. Auf Today (.fit) und in Fenstern war die Farbe damit ungültig,
   die ganze Fläche durchsichtig – der Sockel (drop-shadow) schien durch,
   die Karte wurde grau und jede Schrift stand doppelt. */
.fit, .fx-panel, .modal-layer.fit { --k: var(--c-fitness); }