/* =========================================================
   Life Archive – Fitness

   Karten, Popups und die Auswahlfelder (.fit-select, .fit-field)
   stehen in styles/components.css – sie gehören inzwischen mehreren
   Bereichen. Hier steht das Eigene: Wochenstreifen, Diagramme,
   Körperkarte, Ränge, der laufende Lauf.

   Beide Rottöne aus AppColors werden getrennt eingesetzt:
     --accent-app  #ffa7a7  Flächen, Titel, Knöpfe   (fitnessFill)
     --accent-deep #f26c6c  Rahmen, Linien, Balken   (fitnessStroke)
   ========================================================= */

.fit {
  --accent-app: var(--c-fitness);
  --accent-deep: var(--c-fitness-stroke);
}

/* ---------- Wochenstreifen ------------------------------------------------ */

.fit-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.fit-day {
  display: grid;
  place-items: center;
  padding: 12px 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--g-21);
}

/* Training an diesem Tag absolviert */
.fit-day.is-done {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 12%, var(--surface));
}

/* Heute – heller Ton, damit sich beide Zustände überlagern können */
.fit-day.is-today { color: var(--accent-app); }

/* ---------- Statistik ------------------------------------------------------ */

/* Jede Statistikkarte hat ihre eigenen Auswahlfelder. */
.fit-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.fit-filters--single { grid-template-columns: minmax(0, 1fr); }

/* Kurzbeschreibung unter der Kartenkopfzeile: sie sagt, was die
   Grafik darunter genau zählt – dafür taugt eine Überschrift nicht. */
.fit-tracks {
  margin: -6px 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.fit-chartbox {
  padding: 10px 10px 12px;
  border-radius: 8px;
  background: var(--field-bg, var(--g-47));
}

/* Diagramm */

.fc { width: 100%; height: auto; display: block; overflow: visible; }
.fc-grid { stroke: rgba(var(--o), .08); stroke-width: 1; }
.fc-axis { fill: var(--g-28); font-size: max(var(--fs-floor), 10px); font-family: inherit; }
.fc-title { fill: var(--g-15); font-size: max(var(--fs-floor), 11px); font-family: inherit; }
.fc-empty { fill: var(--text-faint); font-size: 12px; font-family: inherit; }

/* Legende */

.fit-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 14px;
}

.fit-legend__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: start;
  border-radius: 6px;
  transition: opacity var(--dur) var(--ease-out);
}

.fit-legend__item.is-off { opacity: .42; }

.fit-legend__dot {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  flex: none;
  border-radius: 3px;
}

.fit-legend__body { display: grid; min-width: 0; }
.fit-legend__label { font-size: 13px; color: var(--g-10); }
.fit-legend__label b { font-weight: 600; color: var(--g-01); }

.fit-delta { font-size: 12px; }
.fit-delta.is-up { color: #4ade80; }
.fit-delta.is-down { color: #f26c6c; }

.fit-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Fällige Steigerungen */

.fit-stale { display: grid; gap: 6px; }

.fit-stale__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-inline-start: 3px solid var(--accent-deep);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
}

.fit-stale__meta { color: var(--text-dim); font-size: 12px; }
.fit-stale__row--ok { border-inline-start-color: #4ade80; color: var(--text-dim); }

/* ---------- Körperkarte ------------------------------------------------------ */

.bm-box { padding-bottom: 16px; }

.bodymap {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  margin: 2px auto 14px;
}

/* Platzhalter, solange die beiden Vorlagen geladen und zerlegt werden */
.bodymap--loading {
  height: 300px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* Silhouette – die Vorlagenfarbe Weiß wird durch das App-Grau ersetzt.
   Der feine Umriss trennt Arme, Beine und Rumpf voneinander. */
.bm-base {
  fill: var(--g-14);
  stroke: rgba(var(--o-ink), .22);
  stroke-width: .7;
  stroke-linejoin: round;
  transition: opacity 300ms var(--ease-out);
}

/* Muskelpartie: die Rangfarbe kommt als Inline-Stil. */
.bm-mg {
  stroke: rgba(var(--o-ink), .28);
  stroke-width: .6;
  stroke-linejoin: round;
  transition:
    fill 500ms var(--ease-out),
    opacity 300ms var(--ease-out),
    filter 300ms var(--ease-out);
  cursor: pointer;
}

/* Ohne Rang: sichtbar als Relief, damit der Körper plastisch bleibt. */
.bm-mg--idle { fill: var(--g-24); }

.bm-mg--glow { filter: drop-shadow(0 0 4px var(--glow)); }

/* Auswahl: der Körper tritt zurück, die gewählte Partie bekommt eine
   helle Kante und einen Schein in ihrer Rangfarbe. */
.bodymap.has-focus .bm-base { opacity: .4; }
.bodymap.has-focus .bm-mg { opacity: .12; }

.bodymap.has-focus .bm-mg.is-focus {
  opacity: 1;
  stroke: rgba(var(--o), .95);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 6px var(--halo, var(--g-01)));
}

/* Die Vorlagen sind nur 174 Einheiten breit – die Beschriftung muss
   in Nutzerkoordinaten entsprechend klein sein. */
.bm-side {
  fill: rgba(var(--o), .34);
  font-size: max(var(--fs-floor), 7px);
  font-family: inherit;
  letter-spacing: .22em;
}

.bm-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.bm-key {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: start;
  transition: background-color var(--dur) var(--ease-out);
}

.bm-key:hover { background: rgba(var(--o), .05); }
.bm-key.is-active { background: rgba(var(--o), .09); }

.bm-key__dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 3px;
}

.bm-key__body { display: grid; min-width: 0; }

.bm-key__name {
  font-size: 12.5px;
  color: var(--g-10);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bm-key__rank { font-size: max(var(--fs-floor), 11px); font-weight: 700; }

.bm-key__count {
  margin-inline-start: auto;
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-faint);
}

/* Untermenü der gewählten Gruppe */
.bm-parts {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--o), .07);
  animation: bm-parts-in 260ms var(--ease-out) both;
}

.bm-parts.is-open { display: flex; }

@keyframes bm-parts-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.bm-parts__label {
  width: 100%;
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.bm-part {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid rgba(var(--o), .12);
  border-radius: 999px;
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--g-11);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.bm-part__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--part);
}

.bm-part__rank { color: var(--part); font-weight: 700; }

.bm-part:hover { border-color: rgba(var(--o), .28); }

.bm-part.is-active {
  border-color: var(--part);
  background: color-mix(in srgb, var(--part) 16%, transparent);
}

/* ---------- Ränge ----------------------------------------------------------- */

.fit-rankhead {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 4px 0 14px;
}

.fit-rankbadge {
  padding: 6px 20px;
  border-radius: 999px;
  color: var(--g-48);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
}

.fit-rankhead__meta { font-size: max(var(--fs-floor), 11.5px); color: var(--text-dim); text-align: center; }

/* Verteilung als ein Balken, Breite je Rang nach Anzahl */
.fit-dist {
  display: flex;
  gap: 2px;
  height: 9px;
  margin-bottom: 8px;
  border-radius: 999px;
  overflow: hidden;
}

.fit-dist__seg { flex: var(--seg) 0 0; min-width: 4px; }

.fit-dist__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 16px;
  font-size: max(var(--fs-floor), 11px);
  color: var(--text-dim);
}

.fit-dist__key { display: inline-flex; align-items: center; gap: 5px; }

.fit-dist__dot { width: 9px; height: 9px; border-radius: 2px; }

/* Leiter je Übung */
/* minmax(0, 1fr): sonst wächst die Spalte auf die volle Breite des
   längsten Übungsnamens (nowrap) – bei 320 px stand die Liste 45 px über
   den Rand, bei langen Namen über 1000 px (10.10.2026). */
.fit-ranklist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.fit-rank { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; min-width: 0; }

.fit-rank__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fit-rank__name {
  min-width: 0;
  font-size: 13.5px;
  color: var(--g-09);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fit-rank__chip {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--g-48);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  white-space: nowrap;
}

.fit-rank__bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(var(--o), .07);
  overflow: hidden;
}

.fit-rank__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width var(--dur-slow) var(--ease-out);
}

.fit-rank__meta { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

/* Rangabzeichen im laufenden Workout */
.fit-ex__rank {
  position: relative;
  flex: none;
  margin-inline-start: auto;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--g-48);
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  white-space: nowrap;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.fit-ex__rank:active { transform: scale(.94); }

/* Hinweis auf die nächste Stufe: mit Maus beim Überfahren,
   per Finger auf Antippen (Klasse is-open aus run.js). */
.fit-tip {
  position: absolute;
  top: calc(100% + 9px);
  inset-inline-end: 0;
  z-index: 6;
  display: grid;
  gap: 1px;
  padding: 8px 11px;
  border: 1px solid var(--accent-deep);
  border-radius: 9px;
  background: var(--g-45);
  box-shadow: 0 10px 26px rgba(var(--o-deep), .55);
  color: var(--text);
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 500;
  text-align: end;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility var(--dur);
}

.fit-tip b { font-size: 12.5px; font-weight: 700; color: var(--accent-app); }
.fit-tip span { color: var(--text-dim); }

/* Kleiner Zeiger nach oben */
.fit-tip::before {
  content: "";
  position: absolute;
  inset-inline-end: 14px;
  bottom: 100%;
  border: 6px solid transparent;
  border-bottom-color: var(--accent-deep);
}

.fit-ex__rank.is-open .fit-tip,
.fit-ex__rank:focus-visible .fit-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (hover: hover) {
  .fit-ex__rank:hover { filter: brightness(1.08); }
  .fit-ex__rank:hover .fit-tip {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ---------- Fast Track ------------------------------------------------------ */

.pop--fast .pop__body { gap: 16px; }

.pop--fast .fit-start { justify-content: center; width: 100%; }

/* Popups eines Moduls erben dessen Akzente über die Ebenen-Klasse. */
.modal-layer.fit {
  --accent-app: var(--c-fitness);
  --accent-deep: var(--c-fitness-stroke);
}

/* ---------- Empfehlung ----------------------------------------------------- */

.fit-rec__head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--accent-app);
}

.fit-rec__icon { width: 30px; }
.fit-rec__name { font-size: 19px; }
.fit-rec__count { font-size: 13px; color: var(--text-dim); }

.fit-rec__list {
  margin: 12px 0 0;
  padding-inline-start: 22px;
  list-style: disc;
  display: grid;
  gap: 3px;
  font-size: 14px;
  color: var(--g-10);
}

.fit-rec__actions { display: flex; justify-content: flex-end; margin-top: 16px; }

.fit-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--accent-deep);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.fit-start img { width: 17px; }
.fit-start:hover { filter: brightness(1.08); }
.fit-start:active { transform: scale(.96); }

/* ---------- Liste aller Workouts -------------------------------------------- */

.fit-wlist { display: grid; }

.fit-wrow {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.fit-wrow:last-child { border-bottom: 0; }
.fit-wrow.is-today .fit-wrow__name { color: var(--accent-app); }

.fit-wrow__icon { width: 24px; }
.fit-wrow__name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-wrow__meta { font-size: 12.5px; color: var(--text-dim); }

/* =========================================================
   Laufendes Workout
   ========================================================= */

/* Unten bleibt Platz für zwei Dinge, die über der Seite liegen: die
   Leiste der App und der Streifen mit der nächsten Übung. Ohne das
   endete die letzte Übung unter beiden. */
.fit-run { padding-bottom: calc(var(--sh-tabs-clear) + 78px); }

/* Kopfzeile und Pausenwecker kleben gemeinsam – und zwar unter der festen
   Topbar (.sh-top, z-index 70), nicht am Fensterrand. Mit top: 0 schoben
   sie sich beim Scrollen darunter und waren zur Hälfte verdeckt.

   Ein Halter für beide, damit die Höhe der Kopfzeile nirgends als Zahl
   im Stilblatt steht. */
.fit-run__stick {
  position: sticky;
  top: calc(var(--safe-top) + var(--sh-top-h));
  z-index: 20;
  padding-bottom: 14px;
  background: var(--bg);
}

/* Der Abstand nach unten gehört dem Halter, nicht dem Wecker: als dessen
   Rand fiele er aus der Fläche heraus (zusammenfallende Ränder) und
   liesse einen Spalt, durch den der Inhalt sichtbar scrollte. */
.fit-run__stick .fit-rest { margin-bottom: 0; }

.fit-run__bar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
  margin-bottom: 12px;
  background: var(--bg);
  border-bottom: 1.5px solid var(--accent-deep);
}

.fit-run__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  transition: background-color var(--dur) var(--ease-out);
}

.fit-run__icon img { width: 18px; }

/* Mitte der Leiste: das Zeichen des Workouts und die Uhr. Beide
   zusammen zentriert, damit die Uhr dort bleibt, wo man sie sucht. */
.fit-run__mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.fit-run__wicon { width: 22px; flex: none; opacity: .75; }
.fit-run__icon:hover { background: rgba(var(--o), .07); }

/* Die Uhr ist zugleich der Knopf zum Anhalten – der einzige Platz, an dem
   er niemanden verdrängt, und der einzige, an dem man ihn sucht. */
.fit-run__clock {
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 4px 10px;
  border-radius: 9px;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease-out);
}

.fit-run__clock img { width: 19px; opacity: .8; }
.fit-run__clock:hover { background: rgba(var(--o), .07); }

/* Angehalten: die Uhr steht, und man soll sehen, dass das Absicht ist. */
.fit-run.is-paused .fit-run__clock {
  background: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  color: var(--accent-app);
}

.fit-run.is-paused .fit-run__clock img { opacity: 1; }

.fit-run__finish {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-deep);
  transition: filter var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.fit-run__finish img { width: 18px; }
.fit-run__finish:hover { filter: brightness(1.1); }
.fit-run__finish:active { transform: scale(.9); }

.fit-notes {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  resize: vertical;
  outline: none;
}

.fit-notes:focus { border-color: var(--accent-deep); }

/* Übungsblock */

.fit-ex {
  position: relative;
  margin-bottom: 14px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

/* Die Karte mit geöffnetem Rang-Hinweis nach vorn holen – sonst deckt
   die nächste Übungskarte den Hinweis halb zu. */
.fit-ex.is-raised,
.fit-ex:has(.fit-ex__rank:hover),
.fit-ex:has(.fit-ex__rank:focus-visible) { z-index: 12; }

/* Flex statt festem Raster: die Kopfzeile trägt je nach Übung
   unterschiedlich viele Abzeichen. */
.fit-ex__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Der Rangchip ist ein eigener Stapel (isolation: isolate, wegen des
   Sockels) – der z-index seines Hinweises gilt nur darin. Ohne eigene
   Ebene malten die Satzzeilen darunter über den Hinweis. Also hebt die
   Kopfzeile selbst sich über den Rumpf, solange der Hinweis offen ist. */
.fit-ex__head:has(.fit-ex__rank:is(:hover, :focus-visible, .is-open)) {
  position: relative;
  z-index: 5;
}

.fit-ex__icon { width: 26px; flex: none; }

/* Zeichen und Haken-Abzeichen als eine Fläche: das ist der Knopf, mit
   dem die ganze Übung auf einmal abgehakt wird. Das Abzeichen liegt in
   der Ecke darüber, nicht daneben – sonst wüchse die Kopfzeile, sobald
   eine Übung durch ist, und alle anderen sprängen mit. */
.fit-ex__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  padding: 3px;
  margin: -3px;
  border-radius: 8px;
  transition: background-color var(--dur) var(--ease-out);
}

/* Nachtragen (logpast.js): im Knopf steht nur Plus oder Haken, kein
   Übungszeichen – ohne Maß zog das SVG seine volle Größe auf. */
.fit-ex__markicon { width: 20px; height: 20px; }

.fit-ex__mark:hover { background: rgba(var(--o), .07); }
.fit-ex__mark:active { transform: scale(.94); }

.fit-ex__badge {
  position: absolute;
  inset-inline-end: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--accent-deep);
  /* Ein Ring in der Kartenfarbe trennt das Abzeichen vom Zeichen
     darunter, ohne eine zweite Farbe einzuführen. */
  box-shadow: 0 0 0 2px var(--surface);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.fit-ex__badge img { width: 9px; }

/* Durch: Rand und Grundton nehmen die Akzentfarbe auf, das Abzeichen
   klappt auf, der Name tritt zurück. Zusammen sagen die drei dasselbe
   auf drei Wegen – Farbe allein wäre für niemanden mit Rotschwäche zu
   lesen (WCAG 1.4.1). Der Haken je Satz bleibt davon unberührt: er ist
   klein und sitzt in der Zeile, dieser hier umfasst die Karte. */
.fit-ex.is-done {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 9%, var(--surface));
}

.fit-ex.is-done .fit-ex__badge { opacity: 1; transform: scale(1); }

/* Nur zurückgenommen, nicht durchgestrichen: der Name bleibt lesbar.
   Ein durchgestrichener Übungsname liest wie „gestrichen", nicht wie
   „geschafft" – und man liest ihn während des Laufs noch. Rand, Grund
   und Abzeichen sagen ohnehin schon dreifach, dass die Übung durch
   ist; die vierte Aussage war die einzige, die falsch klang. */
.fit-ex.is-done .fit-ex__name { color: var(--text-dim); }

.fit-ex.is-done .fit-ex__icon { opacity: .55; }

/* E-ink kennt keine Farbmischung – dort trägt die Kante allein. */
html[data-eink] .fit-ex.is-done { background: var(--surface); border-width: 2px; }

.fit-ex__name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fit-ex__opt {
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Hinweis auf fällige Steigerung – über der Satztabelle, damit er
   nicht mit Name und Rang um den Platz in der Kopfzeile kämpft. */
.fit-ex__stale {
  padding: 6px 10px;
  margin-bottom: 9px;
  border-inline-start: 3px solid var(--accent-deep);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-deep) 14%, transparent);
  color: var(--accent-app);
  font-size: 12px;
  font-weight: 600;
}

.fit-ex__btn {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  transition: background-color var(--dur) var(--ease-out);
}

.fit-ex__btn img { width: 14px; }
.fit-ex__btn:hover { background: rgba(var(--o), .07); }

.fit-ex.is-collapsed .fit-ex__body { display: none; }
.fit-ex.is-collapsed [data-collapse] img { transform: rotate(-90deg); }

.fit-ex__body { margin-top: 10px; }

/* Satz-Zeilen
   ----------
   Der Umschlag hält die Löschfläche, die Zeile selbst liegt deckend
   darüber und lässt sich nach links wegwischen. */

.fit-setwrap {
  position: relative;
  margin-bottom: 5px;
  border-radius: 8px;
  overflow: hidden;
}

.fit-setwrap__del {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 16px;
  background: color-mix(in srgb, var(--accent-deep) 26%, transparent);
  transition: background-color var(--dur) var(--ease-out);
}

.fit-setwrap__del img { width: 17px; opacity: .65; transition: opacity var(--dur) var(--ease-out); }

/* Ab der Schwelle: Loslassen löscht */
.fit-setwrap.is-armed .fit-setwrap__del { background: var(--accent-deep); }
.fit-setwrap.is-armed .fit-setwrap__del img { opacity: 1; }

.fit-setwrap.is-removing {
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  transition: max-height 180ms var(--ease-out), opacity 180ms var(--ease-out),
              margin-bottom 180ms var(--ease-out);
}

.fit-set {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 62px 62px 40px;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 8px;
  background: var(--surface);
  touch-action: pan-y;
  transition: background-color var(--dur) var(--ease-out),
              transform 220ms var(--ease-out);
}

.fit-set--head {
  padding-bottom: 2px;
  margin-bottom: 6px;
  background: none;
  touch-action: auto;
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

.fit-set--head span:nth-child(2) { text-align: center; }

.fit-set__n {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--g-17);
}

.fit-set__prev {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Woher die Vorgabe stammt.
   Sie kommt aus dem besten Satz der Woche, nicht aus der letzten
   Einheit – und eine Zahl, deren Herkunft man nicht sieht, ist eine
   Behauptung. Der Tag steht deshalb darunter: zu lesen, wenn man
   hinsieht, im Weg, wenn man es nicht tut. */
.fit-prev__day {
  display: block;
  font-size: max(var(--fs-floor), 10px);
  line-height: 1.2;
  color: var(--text-faint);
  letter-spacing: .02em;
}

.fit-in {
  width: 100%;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field-bg, var(--g-47));
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.fit-in:focus { border-color: var(--accent-deep); }
.fit-in--zone { font-size: 16px; }

.fit-check {
  width: 32px;
  height: 32px;
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.fit-check img { width: 14px; filter: invert(1); opacity: .55; }
.fit-check:active { transform: scale(.9); }

/* Abgehakter Satz – in den Akzentfarben hervorgehoben */
.fit-set.is-done {
  background: color-mix(in srgb, var(--accent-deep) 20%, transparent);
}

.fit-set.is-done .fit-in { border-color: var(--accent-deep); }
.fit-set.is-done .fit-check { background: var(--accent-deep); }
.fit-set.is-done .fit-check img { filter: none; opacity: 1; }

.fit-addset {
  width: 100%;
  padding: 9px 0;
  margin-top: 3px;
  border-radius: 8px;
  background: rgba(var(--o), .04);
  color: var(--text);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.fit-addset:hover { background: rgba(var(--o), .08); color: var(--text); }

@media (max-width: 359px) {
  .fit-set { grid-template-columns: 28px minmax(0, 1fr) 54px 54px 34px; }
}

/* ---------- Pausenwecker ----------------------------------------------------
   Ein Streifen direkt unter der Kopfzeile. Der Fortschritt läuft als Fläche
   hinter der Beschriftung ab, damit die Restzeit ohne Zahlenlesen sichtbar
   bleibt. */

.fit-rest {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}

/* Die Fläche liegt hinter allem – deshalb kein z-index auf ihr, sondern
   einer auf den Knöpfen. */
/* Die Breite setzt app/fitness/run.js pro Bild neu – eine Überblendung
   liefe hier nur hinterher. */
.fit-rest__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: color-mix(in srgb, var(--accent-deep) 16%, transparent);
}

.fit-rest__step,
.fit-rest__main { position: relative; z-index: 1; }

.fit-rest__step {
  padding: 8px 0;
  border-radius: 8px;
  background: rgba(var(--o), .05);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fit-rest__step:hover { background: rgba(var(--o), .1); color: var(--text); }
.fit-rest__step:active { transform: scale(.94); }

.fit-rest__main {
  display: grid;
  gap: 1px;
  padding: 4px 0;
  border-radius: 8px;
}

.fit-rest__clock {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease-out);
}

.fit-rest__hint {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.fit-rest.is-running { border-color: var(--accent-deep); }
.fit-rest.is-running .fit-rest__clock { color: var(--accent-app); }

/* Abgelaufen: der Streifen schlägt zweimal aus, danach steht wieder die
   Voreinstellung. */
.fit-rest.is-over {
  border-color: var(--accent-deep);
  animation: fit-rest-pulse 620ms var(--ease-out) 2;
}

.fit-rest.is-over .fit-rest__clock { color: var(--accent-app); }

@keyframes fit-rest-pulse {
  0%, 100% { background: var(--surface); }
  50% { background: color-mix(in srgb, var(--accent-deep) 26%, var(--surface)); }
}

/* Einstellungsfenster */

.fit-rest-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.fit-rest-set__unit {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fit-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field-bg, var(--g-47));
  text-align: start;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.fit-toggle__mark {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 7px;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.fit-toggle.is-on { border-color: var(--accent-deep); }
.fit-toggle.is-on .fit-toggle__mark {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
}

/* Der Haken wird gezeichnet – so braucht die Zeile kein weiteres Symbol. */
.fit-toggle.is-on .fit-toggle__mark::after {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.fit-toggle__text { display: grid; gap: 2px; }
.fit-toggle__text b { font-size: 15px; font-weight: 600; }
.fit-toggle__text span { font-size: 12.5px; color: var(--text-dim); }

.fit-toggle:hover { background: var(--g-42); }

/* =========================================================
   Abschluss eines Workouts
   ========================================================= */

.fit-done {
  display: grid;
  gap: 18px;
  padding: 8px 0 32px;
}

.fit-done__hero { display: grid; justify-items: center; gap: 8px; text-align: center; }

.fit-done__ring {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-deep);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-deep) 16%, transparent);
  animation: fit-done-in 520ms var(--ease-spring) both;
}

.fit-done__ring img { width: 40px; }

.fit-done__head {
  margin: 6px 0 0;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.fit-done__name { margin: 0; font-size: 15px; color: var(--text-dim); }

.fit-done__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.fit-done__stat {
  display: grid;
  gap: 3px;
  padding: 12px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
}

.fit-done__stat b {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fit-done__stat span {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.fit-done__block {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.fit-done__label {
  margin: 0 0 10px;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.fit-done__btn { justify-content: center; width: 100%; padding: 13px 16px; }

/* Bestwerte */

.fit-prs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.fit-pr {
  display: grid;
  gap: 2px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--accent-deep);
}

.fit-pr__name { font-size: 15px; }
.fit-pr__value { font-size: 12.5px; color: var(--accent-app); }

/* ---------- Rangaufstieg ----------------------------------------------------
   Das Abzeichen der höchsten neuen Stufe kommt zuerst und groß, die
   vollständige Liste zieht danach versetzt nach. */

.fit-rankup { display: grid; gap: 16px; }

.fit-rankup__hero { display: grid; justify-items: center; gap: 6px; text-align: center; }

.fit-rankup__badge {
  padding: 8px 20px;
  border-radius: 999px;
  color: var(--g-48);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  animation: fit-rank-pop 720ms var(--ease-spring) both;
}

.fit-rankup__title {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.fit-rankup__sub { margin: 0; font-size: 13.5px; color: var(--text-dim); }

.fit-rankup__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.fit-rankup__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  animation: fit-rank-row 420ms var(--ease-out) both;
}

.fit-rankup__ex {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fit-rankup__steps {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
}

.fit-rankup__from,
.fit-rankup__arrow { color: var(--text-dim); }
.fit-rankup__to { font-weight: 700; }

@keyframes fit-done-in {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: none; }
}

@keyframes fit-rank-pop {
  0% { opacity: 0; transform: scale(.4); box-shadow: 0 0 0 0 transparent; }
  55% {
    opacity: 1;
    transform: scale(1.14);
    box-shadow: 0 0 30px 6px color-mix(in srgb, var(--accent-app) 55%, transparent);
  }
  100% {
    opacity: 1;
    transform: none;
    box-shadow: 0 0 16px 0 color-mix(in srgb, var(--accent-app) 26%, transparent);
  }
}

@keyframes fit-rank-row {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Ohne Bewegung: alles sofort und still da. base.css kürzt zwar jede Dauer,
   die Verzögerungen der Liste bleiben aber – deshalb hier. */
@media (prefers-reduced-motion: reduce) {
  .fit-done__ring,
  .fit-rankup__badge,
  .fit-rankup__row {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .fit-rest.is-over { animation: none !important; }
}

/* =========================================================
   Der Streifen zum laufenden Workout (app/fitness/runner.js)

   Er hängt an document.body, außerhalb jeder Ansicht und damit
   außerhalb von .fit – die Farben kommen deshalb direkt aus den
   Modulvariablen und nicht aus --accent-*.

   Er sitzt über der Tableiste (z-index 80) und unter der Topbar
   (70), berührt also keine der beiden.
   ========================================================= */

.fit-chip {
  position: fixed;
  inset-inline-start: 50%;
  bottom: calc(var(--sh-tabs-clear) + 12px);
  z-index: 60;
  transform: translateX(-50%);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: min(var(--flow), calc(100vw - 2 * var(--gutter)));
  padding: 6px 6px 6px 10px;

  border: 1.5px solid var(--c-fitness-stroke);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(var(--o-deep), .55);
  animation: fit-chip-in var(--dur) var(--ease-out) both;
}

.fit-chip[hidden] { display: none; }

/* Mit offener Tastatur schrumpft das Layout, und der Streifen führe mit
   nach oben – mitten über die Zeile, in die man gerade schreibt (Journal
   während einer Pause). Er tritt dann zurück wie die Tableiste
   (shell.css, `has-keyboard`); die Uhr läuft weiter. */
body.has-keyboard .fit-chip { display: none; }

@keyframes fit-chip-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.fit-chip__go {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 2px;
  text-align: start;
}

.fit-chip__icon { width: 22px; }

.fit-chip__text { display: grid; min-width: 0; }

.fit-chip__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fit-chip__hint { font-size: 12px; color: var(--text-dim); }

.fit-chip__clock {
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--c-fitness);
}

/* Läuft die Pause, zählt der Streifen sie herunter. Die Farbe bleibt die
   des Bereichs – die Zahl bekommt stattdessen eine Kapsel, so wie der
   Pausenknopf daneben eine hat: „hier läuft etwas ab" statt nur einer
   zweiten roten Zahl. Der Zusatz am Hinweis sagt es noch einmal in
   Worten, damit es nicht allein an der Gestalt hängt. */
.fit-chip.is-rest .fit-chip__clock {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  background: color-mix(in srgb, var(--c-fitness-stroke) 22%, transparent);
}
.fit-chip.is-rest .fit-chip__hint::after { content: " · rest"; }

/* Angehalten: die Uhr tritt zurück, damit der Unterschied ohne
   Farbenlesen erkennbar bleibt. Angehalten schlägt Pausenuhr – wo
   nichts läuft, läuft auch der Wecker nicht weiter. */
.fit-chip.is-paused .fit-chip__clock,
.fit-chip.is-paused.is-rest .fit-chip__clock { color: var(--text-dim); }
.fit-chip.is-paused .fit-chip__hint::after { content: " · paused"; }
.fit-chip.is-paused.is-rest .fit-chip__hint::after { content: " · paused"; }

.fit-chip__pause {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-fitness-stroke) 20%, transparent);
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fit-chip__pause img { width: 16px; }
.fit-chip__pause:hover { background: color-mix(in srgb, var(--c-fitness-stroke) 34%, transparent); }
.fit-chip__pause:active { transform: scale(.94); }

/* ---------- Ein Lauf ist schon offen ---------------------------------------- */

.fit-busy { display: grid; gap: 12px; justify-items: stretch; }
.fit-busy .fit-start { justify-content: center; }
.fit-busy .opt-btn { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .fit-chip { animation: none; }
}

/* =========================================================
   Übungen, Workouts und Pläne pflegen (app/fitness/manage.js)

   Drei Bildschirme, ein Formenvorrat: Zeile mit Bild links, Liste
   darunter, Formular an derselben Stelle. Farben kommen wie überall
   aus den Variablen von .fit.
   ========================================================= */

.fitm-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 14px;
  border: 1.5px dashed var(--accent-deep);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-deep) 8%, transparent);
  color: var(--accent-app);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fitm-new img { width: 15px; }
.fitm-new:hover { background: color-mix(in srgb, var(--accent-deep) 16%, transparent); }
.fitm-new:active { transform: scale(.98); }

.fitm-count {
  font-family: var(--font-mono);
  /* Drei Ziffern (146 Übungen, 120 Dehnungen) brauchen ~22 px – mit 9 px
     Polster je Seite war der Platz im Kartenkopf (34 px) zu schmal, und
     die Zahl brach als „14 / 6" um. */
  display: inline-block;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(var(--o), .06);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
/* Wird die Zahl doch breiter, wächst sie nach innen, nicht über die Karte. */
.mnt-card__slot:has(> .fitm-count) { display: flex; justify-content: flex-end; }

/* ---------- Suche ---------------------------------------------------------- */

.fitm-search { display: block; margin-bottom: 10px; }
/* Swap: die Suche bleibt oben stehen, während die lange Liste rollt. */
.fit-pf > .fitm-search {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -20px;
  padding: 8px 20px;
  background: var(--surface);
}

.fitm-search input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--field-bg, var(--g-47));
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
}

.fitm-search input:focus { border-color: var(--accent-deep); }
.fitm-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }

/* ---------- Zeilen --------------------------------------------------------- */

.fitm-list { margin: 0; padding: 0; list-style: none; display: grid; }

.fitm-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.fitm-row:last-child { border-bottom: 0; }
.fitm-row.is-active { background: color-mix(in srgb, var(--accent-deep) 7%, transparent); }

.fitm-thumb {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(var(--o), .05);
  overflow: hidden;
}

.fitm-thumb img { width: 22px; }
.fitm-thumb--photo img { width: 100%; height: 100%; object-fit: cover; }
.fitm-thumb--sm { width: 30px; height: 30px; border-radius: 7px; }
.fitm-thumb--sm img { width: 18px; }
.fitm-thumb--sm.fitm-thumb--photo img { width: 100%; height: 100%; }

.fitm-row__body { display: grid; gap: 2px; min-width: 0; }

.fitm-row__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fitm-row__meta {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fitm-flag {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-deep);
  color: var(--ink);
  font-size: max(var(--fs-floor), 10px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fitm-rank {
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--g-48);
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  white-space: nowrap;
}

/* Immer in die letzte Spalte – ohne Rang blieb sie sonst leer, und die
   Knöpfe standen 10 px weiter links als in den Zeilen mit Rang. */
.fitm-row__acts { display: inline-flex; gap: 2px; grid-column: -2; }

.fitm-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  transition: background-color var(--dur) var(--ease-out);
}

.fitm-icon img { width: 16px; }
.fitm-icon:hover { background: rgba(var(--o), .08); }
.fitm-icon[disabled] { opacity: .3; pointer-events: none; }
.fitm-icon--danger img { filter: none; }

.fitm-icon--danger:hover { background: rgba(var(--t-fitness-stroke), .18); }

.fitm-textbtn {
  padding: 6px 12px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 8px;
  color: var(--accent-app);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out);
}

.fitm-textbtn:hover { background: color-mix(in srgb, var(--accent-deep) 16%, transparent); }

/* ---------- Formular ------------------------------------------------------- */

.fitm-block { display: grid; gap: 8px; margin-top: 14px; }

.fitm-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fitm-hint { font-size: 12px; line-height: 1.5; color: var(--text-dim); }

.fitm-actions { display: grid; gap: 10px; margin: 18px 0 8px; }
.fitm-wide { justify-content: center; width: 100%; padding: 13px 16px; }
.fitm-actions .opt-btn { justify-content: center; }

.fitm-empty { margin: 8px 0; }
/* Über Treffern aus einer anderen Sprache („panca" in einer englischen App) */
.fitm-lang-head {
  margin: 6px 0 2px;
  list-style: none;
  font-size: max(var(--fs-floor), 11px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Zwei Knöpfe, einer davon an – Art einer Übung, Art eines Workouts */

.fitm-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(var(--o), .05);
}

.fitm-seg__btn {
  padding: 9px 0;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.fitm-seg__btn.is-on { background: var(--accent-deep); color: var(--ink); }
.fitm-seg__btn:not(.is-on):hover { color: var(--text); background: rgba(var(--o), .06); }

/* Dieselben Knöpfe als Wegweiser: Workouts · Exercises · Plan. Sie
   sind Links auf die drei Routen, keine Schalter – jeder Abschnitt
   bleibt ein Lesezeichen wert. */
.fitm-seg--nav {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 16px;
}

.fitm-seg--nav .fitm-seg__btn { text-align: center; }

/* ---------- Symbole und Foto ------------------------------------------------ */

.fitm-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}

.fitm-icontile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--field-bg, var(--g-47));
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.fitm-icontile img { width: 26px; opacity: .8; }
.fitm-icontile:hover { border-color: var(--line-strong); }

.fitm-icontile.is-on {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 16%, var(--field-bg, var(--g-47)));
}

.fitm-icontile.is-on img { opacity: 1; }

.fitm-photorow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.fitm-photo {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(var(--o), .05);
}

.fitm-photo img { width: 100%; height: 100%; object-fit: cover; }
.fitm-photobtn { flex: 1; justify-content: center; font-size: 14px; padding: 12px 14px; gap: 10px; }
.fitm-photobtn img { width: 18px; height: 18px; }

/* ---------- Muskelpartien --------------------------------------------------- */

.fitm-mgroup { display: grid; gap: 6px; margin-top: 10px; }

.fitm-mgroup__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.fitm-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fitm-chip {
  padding: 7px 11px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--field-bg, var(--g-47));
  color: var(--text-dim);
  font-size: 12.5px;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.fitm-chip:hover { color: var(--text); border-color: var(--line-strong); }

.fitm-chip.is-on {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Rangleiter ------------------------------------------------------ */

.fitm-tier {
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.fitm-tier:last-child { border-bottom: 0; }
.fitm-tier__dot { width: 10px; height: 10px; border-radius: 50%; }

.fitm-tier__name {
  width: 66px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.fitm-rungs { display: flex; gap: 6px; flex-wrap: wrap; }

.fitm-rung { display: grid; gap: 2px; }

.fitm-rung__label {
  font-size: max(var(--fs-floor), 9.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.fitm-rung__in {
  width: 62px;
  padding: 7px 8px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: var(--field-bg, var(--g-47));
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}

.fitm-rung__in:focus { border-color: var(--accent-deep); }

/* ---------- Übungen eines Workouts ------------------------------------------ */

.fitm-items { margin: 0; padding: 0; list-style: none; display: grid; }

.fitm-item {
  display: grid;
  grid-template-columns: 20px 30px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.fitm-item:last-child { border-bottom: 0; }

.fitm-item__n {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  text-align: center;
}

.fitm-item__name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fitm-item__move { display: inline-flex; }

/* Derselbe Pfeil, einmal gedreht – so bleibt es bei einer Datei. */
.fitm-up { transform: rotate(180deg); }

.fitm-opt {
  padding: 4px 9px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

.fitm-opt.is-on { border-color: var(--accent-deep); background: var(--accent-deep); color: var(--ink); }

.fitm-addrow {
  width: 100%;
  padding: 10px 0;
  margin-top: 10px;
  border-radius: 8px;
  background: rgba(var(--o), .04);
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.fitm-addrow:hover { background: rgba(var(--o), .08); color: var(--text); }

/* ---------- Übungswähler ---------------------------------------------------- */

.fitm-picker {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1.5px solid var(--accent-deep);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-deep) 6%, transparent);
}

.fitm-picks {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.fitm-pick {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  text-align: start;
  transition: background-color var(--dur) var(--ease-out);
}

.fitm-pick:hover { background: rgba(var(--o), .07); }

/* Schon im Workout – hinzufügen bleibt trotzdem erlaubt, etwa für
   einen zweiten Durchgang derselben Übung. */
.fitm-pick.is-on .fitm-pick__name { color: var(--accent-app); }

.fitm-pick__name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fitm-pick__meta {
  font-size: max(var(--fs-floor), 11.5px);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* in ch, nicht in %: ein Prozent der auto-Spalte bezieht sich auf
     sich selbst und quetschte „Strength" zu „S…". */
  max-width: 12ch;
}

.fitm-picker .opt-btn { justify-content: center; font-size: 14px; padding: 10px 14px; }

/* ---------- Wochenraster eines Plans ---------------------------------------- */

.fitm-week { display: grid; gap: 10px; }

.fitm-day {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.fitm-day__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

@media (max-width: 379px) {
  .fitm-day { grid-template-columns: 1fr; gap: 4px; }
  .fitm-tier { grid-template-columns: 10px minmax(0, 1fr); }
  .fitm-tier__name { width: auto; }
  .fitm-tier .fitm-rungs { grid-column: 1 / -1; }
}

.fit-ex__icon--photo { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }

/* =========================================================
   Zuletzt trainiert (Karte auf der Tracking-Seite)

   Eine Zeile je Einheit. Wo ein Bestwert oder ein Rangsprung
   drinsteckt, bekommt die Zeile eine Kante in der Akzentfarbe –
   das ist der eigentliche Zweck der Karte.
   ========================================================= */

.fit-hlist { margin: 0; padding: 0; list-style: none; display: grid; }

.fit-hist { border-bottom: 1px solid rgba(var(--o), .06); }
.fit-hist:last-child { border-bottom: 0; }

.fit-hist__btn {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 10px 8px 10px 6px;
  border-radius: 9px;
  text-align: start;
  transition: background-color var(--dur) var(--ease-out);
}

.fit-hist__btn:hover { background: rgba(var(--o), .05); }
.fit-hist__btn:active { background: rgba(var(--o), .08); }

.fit-hist__icon { width: 24px; margin-top: 2px; }

.fit-hist__body { display: grid; gap: 4px; min-width: 0; }

.fit-hist__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fit-hist__name {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fit-hist__date {
  flex: none;
  font-size: 12px;
  color: var(--text-dim);
}

.fit-hist__meta {
  font-size: 12.5px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Einheit, in der etwas Neues gelungen ist */
.fit-hist.is-highlight .fit-hist__btn {
  border-inline-start: 3px solid var(--accent-deep);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  padding-inline-start: 9px;
  background: color-mix(in srgb, var(--accent-deep) 6%, transparent);
}

.fit-hist.is-highlight .fit-hist__btn:hover {
  background: color-mix(in srgb, var(--accent-deep) 13%, transparent);
}

/* ---------- Abzeichen -------------------------------------------------------- */

.fit-hist__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

.fit-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Bestwert: gefüllt, damit er als Erstes auffällt */
.fit-badge--pr {
  background: var(--accent-deep);
  color: var(--ink);
}

.fit-badge--pr img { width: 11px; }

/* Rangsprung: Rahmen und Punkt in der Rangfarbe, Text hell –
   so trägt auch der dunkelste Rang lesbare Schrift. */
.fit-badge--rank {
  border: 1.5px solid var(--tier, var(--line-strong));
  background: rgba(var(--o), .04);
  color: var(--text);
  font-weight: 600;
}

.fit-badge__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--tier, var(--line-strong));
}

/* Etwas heller als der übrige Nebentext: bei 11px ist der Abstand
   zum Untergrund sonst knapp. */
.fit-badge--more {
  background: rgba(var(--o), .07);
  color: var(--g-26);
  font-weight: 600;
}

/* ---------- Popup einer Einheit ---------------------------------------------- */

.fit-hpop { gap: 16px; }

.fit-hpop__date {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--text-dim);
  text-align: center;
}

.fit-hpop .fit-hist__badges { justify-content: center; margin: 0; }

.fit-hsets { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.fit-hset {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--o), .06);
}

.fit-hset:last-child { border-bottom: 0; }

.fit-hset__name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fit-hset__sets {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  text-align: end;
}

.fit-hpop__notes {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(var(--o), .04);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--g-10);
}

/* Auf schmalen Geräten bricht die Satzspalte unter den Namen, statt
   ihn zusammenzuquetschen. */
@media (max-width: 359px) {
  .fit-hset { grid-template-columns: 1fr; gap: 2px; }
  .fit-hset__sets { text-align: start; }
}

/* ---------- Übung mitten im Workout dazunehmen ------------------------------- */

.fit-addex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 16px;
  margin-top: 4px;
  border: 1.5px dashed var(--accent-deep);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-deep) 8%, transparent);
  color: var(--accent-app);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.fit-addex img { width: 14px; }
.fit-addex:hover { background: color-mix(in srgb, var(--accent-deep) 16%, transparent); }
.fit-addex:active { transform: scale(.98); }

/* Das Auswahlfenster teilt sich die Trefferliste mit dem Workout-Baukasten
   (.fitm-picks) – hier steht sie nur in einem Popup statt auf der Seite. */
.fit-addpop { gap: 12px; }
.fit-addpop .fitm-search { margin-bottom: 0; }
.fit-addpop .fitm-picks { max-height: 46vh; }
.fit-addpop .opt-btn { justify-content: center; }

/* Ab 900 sitzt der Lauf-Streifen über dem Inhalt, nicht über dem
   Fenster: die Mitte verschiebt sich um die halbe Schienenbreite
   nach rechts. Die Unterkante regelt sich von selbst – sie rechnet
   mit --sh-tabs-h, und das ist dort 0 (styles/shell.css), womit aus
   `safe-bottom + tabs + 12px` genau `safe-bottom + 12px` wird.

   Die Karten der Auswertung (.fit-tracks und alles andere in .mnt)
   hören schon bei --flow auf – die Grenze steht einmal für alle
   Modulseiten in styles/components.css. */
@media (min-width: 900px) {
  body[data-shell] .fit-chip { inset-inline-start: calc(50% + var(--rail-w) / 2); }
}

/* =========================================================
   Diagramme und Körperkarte wachsen nicht mit der Karte

   Beide sind SVG mit festem viewBox und `width: 100%`. Das heißt:
   sie skalieren als Ganzes – die Beschriftung eingeschlossen. Ein
   Diagramm ist auf 340px gezeichnet und schreibt dort mit 10px;
   auf 780px Kartenbreite wären daraus 23px, größer als jede
   Überschrift der App, und die Achsenbeschriftung schriee lauter
   als der Kartentitel darüber.

   Deshalb hören sie bei --figure auf und stehen mittig in ihrer
   Karte. Was in derselben Karte umbricht statt zu skalieren – die
   Legende, die Rangliste, die Kacheln – nimmt die Breite weiter
   ganz. Genau diese Trennung ist der Grund, warum --board breiter
   sein darf, ohne dass etwas aus dem Leim geht.

   Die Körperkarte behält damit die Größe, die sie immer hatte: sie
   ist eine Figur, kein Diagramm, und eine Figur, die mit dem Fenster
   wächst, ist ein Poster.
   ========================================================= */

.fc,
.bodymap {
  max-width: var(--figure);
  margin-inline: auto;
}

/* Der Pause-Knopf im Lauf-Streifen ist ein Knopf: gerade Ecken, kein
   Schnitt. Er steht in jeder Umgebung im Markup und fiel deshalb schon
   bei der Prüfung der Startseite auf. */
.fit-chip__pause { border-radius: 0; clip-path: none; }

/* Formensprache: der Diagrammkasten ist eine Fläche, also zwei
   geschnittene Ecken statt eines Radius. Er trägt keine Kontur,
   nur eine Fläche – hier fällt also nichts weg, was clip-path
   wegschneiden könnte. */
.fit-chartbox {
  --cut: 10px;
  border-radius: 0;
  clip-path: var(--cut-clip);
}

/* =========================================================
   Symbolwand (Übung und Workout)

   Sechzig Kacheln brauchen eine Gliederung, sonst sucht man
   in einer Wand statt in einer Gruppe. Die Wand selbst hat
   eine Höhe und scrollt in sich – im Formular darf sie nicht
   alles andere unter den Bildschirmrand schieben.
   ========================================================= */

.fitm-iconwall {
  max-height: 260px;
  overflow-y: auto;
  padding: 2px 2px 4px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overscroll-behavior: contain;
}

/* Bewusst nicht klebend: bei fünf kurzen Gruppen in 260px Höhe stünden
   sonst zwei Überschriften übereinander, sobald man scrollt. */
.fitm-icongroup {
  display: block;
  padding: 9px 6px 4px;
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fitm-iconwall .fitm-icons { padding: 0 4px 6px; }


/* =========================================================
   TEIL 3 – Die Formensprache, nachgezogen

   Der Bereich trug vierundsiebzig Stellen, die der Regel
   widersprachen: sieben volle Pillen (999px), fünf Kreise
   (50 %) und zweiundsechzig Radien dazwischen. Kein einziger
   Knopf hatte einen Sockel; neun skalierten beim Druck auf
   90–98 %, was in keiner Oberfläche der Welt etwas bedeutet.

   Die Regel, in einem Satz:

     Flächen bekommen zwei geschnittene Ecken – oben links und
     unten rechts, immer dieselbe Diagonale. Knöpfe sind rechte
     Winkel mit einem Sockel dahinter und sinken beim Druck um
     genau die Sockeltiefe ein. Nichts ist rund.

     Unter etwa 30px mit einem Zeichen darin entfällt der
     Schnitt – die Diagonale führe sonst durch das Zeichen. Ein
     Rechteck ist immer noch nicht rund.

   Wo die Grenze zwischen beiden liegt:

     Ein Knopf ist ein BEDIENELEMENT – Zeichen, Handlung,
     Auswahl, Schalter. Eine Fläche ist INHALT, auch wenn sie
     sich anfassen lässt: eine Zeile im Verlauf, ein Eintrag in
     der Legende, ein Reiter. Deshalb ist .fit-hist__btn eine
     Fläche und .fit-addset ein Knopf, obwohl beide <button>
     sind. Sonst trüge jede Liste dieser App dreißig Sockel.

   Warum das hier unten steht und nicht oben bei den Regeln
   selbst: gleiche Spezifität, spätere Regel gewinnt. So steht
   die Entscheidung je Baustein an EINER Stelle und ist
   nachlesbar, statt über 2 200 Zeilen verteilt zu sein.

   :is() hält die Listen lesbar. Ohne wären es fünf Wiederholungen
   derselben achtundzwanzig Namen – die erste Fassung dieses
   Blocks hatte sie, und schon beim zweiten Nachziehen stimmte
   eine der Listen nicht mehr mit den anderen überein.

   Dieselben drei Fallen wie in Nutrition:
     · clip-path schneidet border UND box-shadow mit weg. Ein
       Zustand, der auf einem Rand lag, wandert in die Fläche.
     · z-index:-1-Pseudoelemente brauchen isolation:isolate.
     · Jeder Sockel braucht eine E-ink-Fassung – siehe unten.
   ========================================================= */

/* ---------- Knöpfe: rechter Winkel, Sockel dahinter ------------------------ */

.fit-start,
.fit-run__icon,
.fit-run__clock,
.fit-run__finish,
.fit-check,
.fit-addset,
.fit-addex,
.fit-rest__step,
.fit-rest__main,
.fit-ex__btn,
.fit-ex__mark,
.fit-ex__rank,
.fit-toggle,
.fit-done__btn,
.fit-exlist__toggle,
.fit-group,
.bm-part,
.fitm-new,
.fitm-textbtn,
.fitm-icon,
.fitm-icontile,
.fitm-opt,
.fitm-chip,
.fitm-addrow,
.fitm-photobtn,
.fitm-wide,
.fitm-item__move,
.fitm-up,
.fit-chip__go,
.fit-chip__pause {
  --depth: 2.5px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);

  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

:is(.fit-start, .fit-run__icon, .fit-run__clock, .fit-run__finish, .fit-check,
    .fit-addset, .fit-addex, .fit-rest__step, .fit-rest__main, .fit-ex__btn,
    .fit-ex__mark, .fit-ex__rank, .fit-toggle, .fit-done__btn, .fit-exlist__toggle,
    .fit-group, .bm-part, .fitm-new, .fitm-textbtn, .fitm-icon, .fitm-icontile,
    .fitm-opt, .fitm-chip, .fitm-addrow, .fitm-photobtn, .fitm-wide,
    .fitm-item__move, .fitm-up, .fit-chip__go,
    .fit-chip__pause)::before,
:is(.fit-start, .fit-run__icon, .fit-run__clock, .fit-run__finish, .fit-check,
    .fit-addset, .fit-addex, .fit-rest__step, .fit-rest__main, .fit-ex__btn,
    .fit-ex__mark, .fit-ex__rank, .fit-toggle, .fit-done__btn, .fit-exlist__toggle,
    .fit-group, .bm-part, .fitm-new, .fitm-textbtn, .fitm-icon, .fitm-icontile,
    .fitm-opt, .fitm-chip, .fitm-addrow, .fitm-photobtn, .fitm-wide,
    .fitm-item__move, .fitm-up, .fit-chip__go,
    .fit-chip__pause)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* KEIN clip-path. Ein Rechteck mit geschnittenen Ecken ist ein
     Sechseck – und Sechsecke sind in dieser App Flächen, nicht
     Knöpfe. Der Schnitt hier wäre genau der Fehler, den die ganze
     Unterscheidung verhindern soll. */
}

:is(.fit-start, .fit-run__icon, .fit-run__clock, .fit-run__finish, .fit-check,
    .fit-addset, .fit-addex, .fit-rest__step, .fit-rest__main, .fit-ex__btn,
    .fit-ex__mark, .fit-ex__rank, .fit-toggle, .fit-done__btn, .fit-exlist__toggle,
    .fit-group, .bm-part, .fitm-new, .fitm-textbtn, .fitm-icon, .fitm-icontile,
    .fitm-opt, .fitm-chip, .fitm-addrow, .fitm-photobtn, .fitm-wide,
    .fitm-item__move, .fitm-up, .fit-chip__go,
    .fit-chip__pause)::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}

:is(.fit-start, .fit-run__icon, .fit-run__clock, .fit-run__finish, .fit-check,
    .fit-addset, .fit-addex, .fit-rest__step, .fit-rest__main, .fit-ex__btn,
    .fit-ex__mark, .fit-ex__rank, .fit-toggle, .fit-done__btn, .fit-exlist__toggle,
    .fit-group, .bm-part, .fitm-new, .fitm-textbtn, .fitm-icon, .fitm-icontile,
    .fitm-opt, .fitm-chip, .fitm-addrow, .fitm-photobtn, .fitm-wide,
    .fitm-item__move, .fitm-up, .fit-chip__go,
    .fit-chip__pause)::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
  transition: background-color var(--dur) var(--ease-out);
}

:is(.fit-start, .fit-run__icon, .fit-run__clock, .fit-run__finish, .fit-check,
    .fit-addset, .fit-addex, .fit-rest__step, .fit-rest__main, .fit-ex__btn,
    .fit-ex__mark, .fit-toggle, .fit-done__btn, .fit-exlist__toggle,
    .fit-group, .bm-part, .fitm-new, .fitm-textbtn, .fitm-icon, .fitm-icontile,
    .fitm-opt, .fitm-chip, .fitm-addrow, .fitm-photobtn, .fitm-wide,
    .fitm-item__move, .fitm-up, .fit-chip__go,
    .fit-chip__pause):hover::after { background: var(--btn-face-hover); }

/* Eingedrückt: der Knopf wandert auf den Sockel, der Sockel geht weg.
   Ein Knopf, der beim Druck nicht sichtbar einsinkt, ist ein
   Aufkleber. Vorher schrumpften neun davon auf 90–98 %. */
:is(.fit-start, .fit-run__icon, .fit-run__clock, .fit-run__finish, .fit-check,
    .fit-addset, .fit-addex, .fit-rest__step, .fit-rest__main, .fit-ex__btn,
    .fit-ex__mark, .fit-ex__rank, .fit-toggle, .fit-done__btn, .fit-exlist__toggle,
    .fit-group, .bm-part, .fitm-new, .fitm-textbtn, .fitm-icon, .fitm-icontile,
    .fitm-opt, .fitm-chip, .fitm-addrow, .fitm-photobtn, .fitm-wide,
    .fitm-item__move, .fitm-up, .fit-chip__go,
    .fit-chip__pause):active { transform: translate(var(--depth), var(--depth)); }

:is(.fit-start, .fit-run__icon, .fit-run__clock, .fit-run__finish, .fit-check,
    .fit-addset, .fit-addex, .fit-rest__step, .fit-rest__main, .fit-ex__btn,
    .fit-ex__mark, .fit-ex__rank, .fit-toggle, .fit-done__btn, .fit-exlist__toggle,
    .fit-group, .bm-part, .fitm-new, .fitm-textbtn, .fitm-icon, .fitm-icontile,
    .fitm-opt, .fitm-chip, .fitm-addrow, .fitm-photobtn, .fitm-wide,
    .fitm-item__move, .fitm-up, .fit-chip__go,
    .fit-chip__pause):active::before { opacity: 0; }

/* --- Sorte 1: Zeichen ohne eigene Fläche ---------------------------------
   Ein Sockel hinter einer durchsichtigen Fläche scheint auf voller
   Größe durch und macht aus dem Knopf einen Block. Diese hier tragen
   ihn deshalb erst, wenn es auch eine Fläche gibt, die ihn deckt.
   (Genau der Fehler, der in Nutrition erst auf Papier auffiel.) */
:is(.fit-run__icon, .fit-run__clock, .fit-ex__btn, .fit-ex__mark,
    .fitm-icon, .fit-chip__go, .fitm-item__move, .fitm-up)::before { opacity: 0; }

:is(.fit-run__icon, .fit-run__clock, .fit-ex__btn, .fit-ex__mark,
    .fitm-icon, .fit-chip__go, .fitm-item__move, .fitm-up):hover::before,
:is(.fit-run__icon, .fit-run__clock, .fit-ex__btn, .fit-ex__mark,
    .fitm-icon, .fit-chip__go, .fitm-item__move, .fitm-up):focus-visible::before,
.fit-run.is-paused .fit-run__clock::before { opacity: 1; }

/* --- Sorte 2: getönte Flächen brauchen eine deckende Unterlage -----------
   background-image trägt den Ton, background-color die Deckung. So
   bleibt --btn-face genau der Wert, der überall sonst gesetzt wird. */
:is(.fit-addset, .fit-addex, .fit-rest__step, .fitm-new, .fitm-textbtn,
    .fitm-opt, .fitm-chip, .fitm-addrow, .fit-group, .fit-exlist__toggle)::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--btn-under, var(--surface));
}

/* --- Die Flächen und Tiefen je Knopf ------------------------------------- */

/* Der handelnde Knopf: Akzentfläche, dunkler Sockel, dunkle Schrift.
   Auf der Fitness-Fläche trägt Schwarz 11:1 – helle Schrift auf
   Korall ist der klassische Kontrastfehler und stand hier schon. */
.fit-start,
.fit-run__finish,
.fit-done__btn {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  color: var(--on-accent);
  font-weight: 600;
}

.fit-start img,
.fit-run__finish img,
.fit-done__btn img { filter: none; }

/* Der zweite Knopf der Karte: dieselbe Form, ruhigere Fläche. Zwei
   Akzentknöpfe nebeneinander hätten keine Rangfolge mehr. */
.fit-start--quiet {
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);
  color: var(--text);
}

.fit-check { --depth: 2px; --btn-face: var(--btn-quiet); --btn-face-hover: var(--btn-quiet-hover);
              background: none; }
.fit-set.is-done .fit-check {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
}
.fit-set.is-done .fit-check img { filter: none; opacity: 1; }

.fit-addset     { --depth: 2px; --btn-face: var(--btn-quiet); --btn-face-hover: var(--btn-quiet-hover); }
.fit-addex      { --btn-face: var(--tint-face); --btn-face-hover: var(--tint-hover); --btn-lift: var(--tint-lift); }
.fit-rest__step { --depth: 2px; --btn-face: var(--btn-quiet); --btn-face-hover: var(--btn-quiet-hover); }
.fit-rest__main { --depth: 2px; }
.fitm-icon      { --depth: 2px; }
.fitm-icon--danger { --btn-face-hover: rgba(var(--t-fitness-stroke), .22); }
.fit-ex__btn,
.fit-ex__mark   { --depth: 2px; }
.fit-chip__pause{ --depth: 2px; --btn-face: var(--btn-quiet); }
.fitm-item__move,
.fitm-up        { --depth: 2px; }

.fit-exlist__toggle { --depth: 2px; --btn-face: var(--btn-quiet); }
.fit-group          { --depth: 2px; --btn-face: var(--btn-quiet); }
.fit-group.is-active {
  --btn-face: rgba(var(--t-fitness), var(--btn-tint-on-a));
  --btn-face-hover: var(--tint-hover); --btn-lift: var(--tint-lift);
  color: var(--text);
}

/* Der Rangchip im Lauf trägt seine Tierfarbe – die kommt aus dem
   Markup. Sie stand dort als `background:` inline und hätte den
   Sockelbau überstimmt; jetzt setzt run.js --btn-face (siehe
   app/fitness/run.js, rankChip). */
.fit-ex__rank {
  --depth: 2px;
  --btn-face: var(--rank-dim, rgba(var(--o), .12));
  --btn-face-hover: var(--btn-face);
  color: var(--g-48);
}
.fit-ex__rank:hover { filter: brightness(1.08); }

/* Zustand in der Fläche, nicht auf einem Rand: ein Rand überlebt
   weder Schnitt noch Sockel, und er ließ vorher an beiden Diagonalen
   farbige Splitter stehen. */
.bm-part {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  border: 0;
  color: var(--g-11);
}
.bm-part.is-active {
  --btn-face: color-mix(in srgb, var(--part) 26%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--part) 34%, transparent);
  color: var(--text);
}
.bm-part.is-active::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--surface);
}

.fitm-textbtn {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover); --btn-lift: var(--tint-lift);
  border: 0;
  color: var(--accent-app);
}

.fitm-new {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover); --btn-lift: var(--tint-lift);
  border: 0;
  color: var(--accent-app);
}

.fitm-chip {
  --depth: 2px;
  --btn-face: var(--field-bg, var(--g-47));
  --btn-face-hover: var(--g-42);
  border: 0;
  color: var(--text-dim);
}
.fitm-chip.is-on {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  color: var(--on-accent);
  font-weight: 600;
}

.fitm-opt {
  --depth: 2px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  border: 0;
  color: var(--text-dim);
}
.fitm-opt.is-on {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  color: var(--on-accent);
}

.fitm-addrow { --depth: 2px; --btn-face: var(--btn-quiet); --btn-face-hover: var(--btn-quiet-hover); }

.fitm-icontile {
  --depth: 2px;
  --btn-face: var(--field-bg, var(--g-47));
  --btn-face-hover: var(--g-42);
  border: 0;
}
.fitm-icontile.is-on {
  --btn-face: color-mix(in srgb, var(--accent-deep) 34%, var(--field-bg, var(--g-47)));
  --btn-face-hover: var(--btn-face);
}

.fit-toggle {
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  background: none;   /* die Fläche liegt in ::after – eine eigene
                         Hintergrundfarbe läge darüber und verdeckte sie */
  border: 0;
}
.fit-toggle.is-on {
  --btn-face: color-mix(in srgb, var(--accent-deep) 20%, var(--surface-2));
}

/* Abgeschaltet heißt: kein Sockel, keine Bewegung. WCAG nimmt
   abgeschaltete Bedienelemente vom Kontrastminimum aus. */
:is(.fitm-icon, .fit-start, .fit-done__btn, .fitm-textbtn,
    .fitm-wide)[disabled]::before { opacity: 0; }
:is(.fitm-icon, .fit-start, .fit-done__btn, .fitm-textbtn,
    .fitm-wide)[disabled]:active { transform: none; }
:is(.fitm-icon, .fit-start, .fit-done__btn, .fitm-textbtn,
    .fitm-wide)[disabled] { color: var(--text-disabled); opacity: .55; }


/* ---------- Flächen: zwei geschnittene Ecken -------------------------------- */

/* Auch die vier hier, obwohl sie <button> sind: eine Verlaufszeile,
   ein Eintrag in der Legende, eine Zeile im Wähler und eine Zelle
   des Wochenstreifens sind INHALT, den man anfassen kann – kein
   Bedienelement. Ein Sockel an jeder von ihnen wären dreißig
   Sockel in einer Liste. */
.fit-day,
.fit-hist__btn,
.fit-legend__item,
.bm-key,
.fitm-pick,
.fit-stale__row,
.fit-stale__btn,
.fit-tip,
.fit-notes,
.fit-in,
.fit-ex,
.fit-setwrap,
.fit-rest,
.fit-done__stat,
.fit-done__block,
.fit-done__ring,
.fit-rankbadge,
.fit-chip,
.fit-hpop__notes,
.fit-card,
.fit-tile,
.fit-exlist,
.bodymap--loading,
.fitm-search input,
.fitm-thumb,
.fitm-photo,
.fitm-seg,
.fitm-picker,
.fitm-rung__in,
.fitm-iconwall,
.fit-date,
.fit-select,
.fit-rest-set {
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.fit-day          { --cut: 8px; }
.fit-hist__btn    { --cut: 9px; }
.fit-legend__item { --cut: 7px; }
.bm-key           { --cut: 8px; }
.fitm-pick        { --cut: 8px; }
.fit-stale__row   { --cut: 8px; }
.fit-stale__btn   { --cut: 8px; }
.fit-tip          { --cut: 8px; }
.fit-notes        { --cut: 10px; }
.fit-in           { --cut: 7px; }
.fit-ex           { --cut: 10px; }
.fit-setwrap      { --cut: 8px; }
.fit-rest         { --cut: 10px; }
.fit-done__stat   { --cut: 9px; }
.fit-done__block  { --cut: 12px; }
.fit-done__ring   { --cut: 14px; }
.fit-rankbadge    { --cut: 10px; }
.fit-chip         { --cut: 12px; }
.fit-hpop__notes  { --cut: 10px; }
.fit-card         { --cut: 14px; }
.fit-tile         { --cut: 9px; }
.fit-exlist       { --cut: 9px; }
.bodymap--loading { --cut: 10px; }
.fitm-search input{ --cut: 8px; }
.fitm-thumb       { --cut: 8px; }
.fitm-photo       { --cut: 10px; }
.fitm-seg         { --cut: 8px; }
.fitm-picker      { --cut: 10px; }
.fitm-rung__in    { --cut: 6px; }
.fitm-iconwall    { --cut: 10px; }
.fit-date         { --cut: 8px; }
.fit-select       { --cut: 8px; }
.fit-rest-set     { --cut: 8px; }

/* Anfassbare Flächen brauchen trotzdem eine Antwort auf den Druck.
   Ohne Sockel bleibt die Fläche selbst: sie wird kurz heller. */
:is(.fit-day, .fit-hist__btn, .fit-legend__item, .bm-key,
    .fitm-pick, .fit-stale__btn) {
  transition: background-color var(--dur) var(--ease-out);
}
:is(.fit-day, .fit-hist__btn, .fit-legend__item, .bm-key,
    .fitm-pick, .fit-stale__btn):hover { background: rgba(var(--o), .06); }
:is(.fit-day, .fit-hist__btn, .fit-legend__item, .bm-key,
    .fitm-pick, .fit-stale__btn):active { background: rgba(var(--o), .12); }

.bm-key.is-active { background: rgba(var(--o), .09); }

/* Zwei Rahmen, die unter dem Schnitt an den Diagonalen aufbrechen
   würden. Die Fläche trägt sie jetzt. */
.fitm-iconwall { border: 0; background: rgba(var(--o), .04); }
.fitm-picker   { border: 0; background: color-mix(in srgb, var(--accent-deep) 12%, var(--surface)); }

/* Eine Zeile INNERHALB eines schon geschnittenen Umschlags bekommt
   keinen zweiten Schnitt – das wäre eine doppelte Kante. */
.fit-set,
.fit-setwrap .fit-set { border-radius: 0; clip-path: none; }
.fit-stale__row .fit-stale__btn { clip-path: none; }

/* Das Segment im Umschalter schneidet nicht selbst – der Rahmen darum
   tut es. Sonst stünden zwei Sechsecke in einem. Genauso das Bild
   innerhalb einer schon geschnittenen Kachel. */
.fitm-seg__btn { border-radius: 0; clip-path: none; }
.fitm-thumb img,
.fitm-photo img,
.fit-ex__icon--photo { border-radius: 0; clip-path: none; }

/* Eingabefelder sind Flächen. Ihr Fokus lag auf border-color, und ein
   Rand überlebt den Schnitt nicht; ein <input> kann außerdem keine
   Pseudoelemente tragen. Also liegt der Fokus als innerer Schatten an:
   er folgt der Fläche und wird an den Diagonalen mitgeschnitten. */
.fit-in,
.fit-notes,
.fit-date,
.fitm-search input,
.fitm-rung__in { border: 0; }

:is(.fit-in, .fit-notes, .fit-date, .fitm-search input, .fitm-rung__in):focus {
  box-shadow: inset 0 0 0 2px var(--accent-app);
  outline: none;
}

/* Der Hinweis am Rangchip trug seine Kontur als border – unter dem
   Schnitt bleiben davon Splitter. Sie liegt jetzt als innerer
   Schatten an, der der Fläche folgt. */
.fit-tip {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--accent-deep),
              0 10px 26px rgba(var(--o-deep), .55);
}


/* ---------- Unter der Größenschwelle: Rechteck, ohne Schnitt ---------------- */

/* Ein 6px hoher Balken mit einem 8px-Schnitt hätte keine Fläche mehr
   übrig, und ein 11px-Punkt auch nicht. Sie bleiben rechteckig – und
   damit weiterhin nicht rund, was der eigentliche Punkt ist. */
.fit-legend__dot,
.bm-key__dot,
.bm-part__dot,
.fit-dist,
.fit-dist__dot,
.fit-dist__seg,
.fit-badge,
.fit-badge__dot,
.fit-rank__chip,
.fit-rank__bar,
.fit-rank__fill,
.fit-rankup__badge,
.fit-ex__badge,
.fit-ex__stale,
.fit-rest__fill,
.fit-goalbar,
.fit-goalbar__fill,
.fit-group__dot,
.fit-day__mark--rest,
.fitm-flag,
.fitm-count,
.fitm-rank,
.fitm-tier__dot,
.fitm-thumb--sm,
.fit-toggle__mark {
  border-radius: 0;
  clip-path: none;
}


/* ---------- E-ink: jeder Sockel braucht seine Fassung ----------------------- */

/* Auf Papier ist ein voller schwarzer Sockel das schärfste Mittel –
   die Graustufen-Leiter dreht sich um, und ein --g-33 wäre dort ein
   heller Ton, also unsichtbar. */
html[data-eink] :is(.fit-start, .fit-run__icon, .fit-run__clock, .fit-run__finish,
    .fit-check, .fit-addset, .fit-addex, .fit-rest__step, .fit-rest__main,
    .fit-ex__btn, .fit-ex__mark, .fit-ex__rank, .fit-toggle, .fit-done__btn,
    .fit-exlist__toggle, .fit-group, .bm-part, .fitm-new, .fitm-textbtn,
    .fitm-icon, .fitm-icontile, .fitm-opt, .fitm-chip, .fitm-addrow,
    .fitm-photobtn, .fitm-wide, .fitm-item__move, .fitm-up, .fit-chip__go,
    .fit-chip__pause) {
  --btn-lift: #000000;
  --btn-under: var(--eink-paper);
}

/* Was auf dem Bildschirm die Akzentfläche trägt, trägt auf Papier
   Tinte – und dann helle Schrift darauf. */
html[data-eink] :is(.fit-start, .fit-run__finish, .fit-done__btn,
    .fitm-chip.is-on, .fitm-opt.is-on, .fitm-icontile.is-on,
    .fit-toggle.is-on, .bm-part.is-active, .fit-group.is-active),
html[data-eink] .fit-set.is-done .fit-check {
  --btn-face: #1c1c1c;
  --btn-face-hover: #000000;
  color: var(--eink-paper);
}

html[data-eink] .fit-start--quiet {
  --btn-face: #ffffff;
  --btn-face-hover: #ebebeb;
  color: #1c1c1c;
}

html[data-eink] :is(.fit-start, .fit-run__finish, .fit-done__btn) img,
html[data-eink] .fit-set.is-done .fit-check img { filter: invert(1); }
html[data-eink] .fit-start--quiet img { filter: none; }

/* Rangfarben sind auf Papier neun kaum unterscheidbare Grautöne. Der
   Chip trägt dort deshalb Kontur statt Farbe – der Text sagt ohnehin,
   welche Stufe es ist. */
html[data-eink] .fit-ex__rank { --btn-face: #ffffff; color: #1c1c1c; }
html[data-eink] .fit-ex__rank::after { box-shadow: inset 0 0 0 1.5px #1c1c1c; }

/* Der Zielbalken und der Körper auf „Today": auf Papier trägt die
   Füllung Tinte, die Rinne bleibt hell. Zwei Grautöne nebeneinander
   sind auf E-ink kaum zu unterscheiden. */
html[data-eink] .fit-goalbar { background: #dcdbd9; }
html[data-eink] .fit-goalbar__fill { background: #1c1c1c; }
html[data-eink] .fit-day.is-done { background: #dcdbd9; }


/* =========================================================
   TEIL 4 – „Today": die Bausteine, die es vorher nicht gab

   Wochenstreifen, Einheitskarte mit Körper, Wochenkacheln.
   Die Formregeln dafür stehen oben in TEIL 3 – hier steht nur
   noch, wie groß und in welcher Ordnung.
   ========================================================= */

/* ---------- 1 · Wochenstreifen --------------------------------------------- */

.fit-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 14px;
}

.fit-day {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 9px 2px 8px;
  background: var(--surface);
  /* --text-dim statt --text-faint: auf der helleren Fläche kam „TH" nur
     auf 3,9 : 1 (AA verlangt 4,5 : 1 bei 10,5 px, 10.10.2026). */
  color: var(--text-dim);
  text-align: center;
}

.fit-day__name {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  letter-spacing: .07em;
}

.fit-day__mark { width: 14px; height: 14px; opacity: .55; }
.fit-day__mark--plan { opacity: .38; }
.fit-day__mark--rest {
  width: 10px;
  height: 2px;
  background: currentColor;
  opacity: .35;
}

.fit-day.is-done { background: rgba(var(--t-fitness), .14); color: var(--accent-app); }
.fit-day.is-done .fit-day__mark { opacity: 1; }
.fit-day.is-missed { color: var(--text-disabled); }

/* Heute trägt eine volle Kontur statt eines Rahmens – ein Rand
   bräche unter dem Schnitt an beiden Diagonalen auf. */
.fit-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent-deep); color: var(--text); }

/* ---------- 2 · Die Einheit von heute --------------------------------------- */

.fit-card {
  display: grid;
  gap: 12px;
  padding: 16px 16px 18px;
  margin-bottom: 14px;
  background: var(--surface);
}

.fit-card__figure { display: grid; place-items: center; }

/* Auf Progress läuft die Figur über etwa 630px. Hier ist sie eine
   Angabe neben einer Überschrift, kein Poster – ein Drittel der
   Höhe genügt, und beide Seiten müssen bleiben: Lat, Gesäß und
   Beinbeuger sind die Hälfte dessen, was ein Plan ausgleicht. */
.bodymap--compact { max-width: min(100%, 320px); max-height: 210px; }

.fit-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Acht Gruppen brauchen zwei Zeilen, nicht drei: die dritte schob den
   Start-Knopf unter die Falz, und der ist der Grund, warum es diesen
   Bildschirm gibt. */
.fit-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  font-size: max(var(--fs-floor), 10.5px);
  color: var(--text);
}

.fit-group__dot {
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--line-strong);
}

.fit-group__name { font-weight: 600; }
.fit-group__meta { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.fit-card__text { display: grid; gap: 3px; }

.fit-card__kicker {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.fit-card__name {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  /* Ein langer Name (deutsche Komposita) zog die Karte auf 1700 px –
     das iPhone zoomte dann die ganze Seite heraus (10.10.2026). */
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.fit-card__icon { width: 22px; flex: none; }
.fit-card__meta { margin: 0; font-size: 13px; color: var(--text-dim); }
.fit-card__meta b { color: var(--text); font-variant-numeric: tabular-nums; }

.fit-card__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fit-card__acts .fit-start { flex: 1 1 auto; justify-content: center; }

/* Die Übungsliste steht zusammengeklappt: wer sein Workout kennt,
   braucht zehn Namen nicht zu lesen, bevor er den Knopf erreicht.
   Vorher standen sie immer da und schoben ihn unter die Falz. */
.fit-exlist { background: rgba(var(--o), .04); overflow: hidden; }

.fit-exlist__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.fit-exlist__toggle img {
  width: 14px;
  opacity: .6;
  transition: transform var(--dur) var(--ease-out);
}
.fit-exlist.is-open .fit-exlist__toggle img { transform: rotate(180deg); }

.fit-exlist__body {
  display: none;
  margin: 0;
  padding: 0 12px 10px 28px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.fit-exlist.is-open .fit-exlist__body { display: block; }
.fit-exlist__body li { margin: 3px 0; }
.fit-exlist__body li.is-optional { color: var(--text-faint); }
.fit-exlist__body i { font-style: normal; font-size: max(var(--fs-floor), 11px); opacity: .7; }

/* ---------- 3 · Diese Woche -------------------------------------------------- */

.fit-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.fit-tile {
  display: grid;
  gap: 2px;
  padding: 11px 10px;
  background: rgba(var(--o), .04);
  text-align: center;
}

.fit-tile__value {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fit-tile__value i { font-style: normal; font-size: 12px; color: var(--text-faint); }

.fit-tile__label {
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fit-tile.is-reached .fit-tile__value { color: var(--accent-app); }

.fit-goalbar { height: 5px; background: rgba(var(--o), .08); }
.fit-goalbar__fill {
  display: block;
  height: 100%;
  background: var(--accent-deep);
  transition: width var(--dur) var(--ease-out);
}

/* ---------- 4 · Zuletzt ------------------------------------------------------ */

.fit-seclink {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-app);
}

/* ---------- Progress: der eine Zeitraum-Schalter ----------------------------- */

.fit-rangebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 14px;
}

/* ---------- Die Muskel-Fläche ------------------------------------------------ */

.fit-msheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fit-msheet__title {
  margin: 16px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fit-rankbadge--none { background: var(--line); color: var(--text-dim); }

/* ---------- Nachtragen ------------------------------------------------------- */

.fit-doors { display: grid; gap: 8px; margin-top: 14px; }
.fit-doors .fit-start { justify-content: center; width: 100%; padding: 13px 16px; }

.fit-note--small { font-size: 12px; color: var(--text-faint); margin-top: 10px; }

.fit-hpop__acts { margin-top: 16px; }

/* Die Zeile im „Time to add weight" ist jetzt ein Weg – sie führt zu
   den Übungen dieser Partie. */
.fit-stale__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  text-align: start;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
}


/* =========================================================
   TEIL 5 – Das laufende Workout: ein Baustein statt dreier

   Vorher: die feste Topbar, darunter eine eigene klebende
   Kopfzeile des Laufs (rund 90 Punkte) und darunter der
   Pausenwecker als Dauerblock (rund 90). Zusammen rund 280 von
   812 Punkten, bevor die erste Satzzeile begann – und der
   Pausenwecker zeigte „3:00" auch dann, wenn keine Pause lief.

   Ein Zwischenstand schob die Knöpfe in den Werkzeugplatz der
   Topbar und ließ die Tableiste verschwinden. Das war zu weit:
   eine laufende Einheit ist ein Zustand EINES Bildschirms und
   darf die Leiste der App nicht übernehmen – die Überschrift
   des Bereichs und sein Handgriff gehören nicht ihr.

   Jetzt: die Topbar bleibt unangetastet. Darunter steht EIN
   Baustein – Knöpfe und Uhr in der ersten Zeile, der
   Pausenwecker als zweite in derselben Fläche, im Ruhezustand
   nur eine Schiene. Aus drei gestapelten Blöcken ist einer
   geworden, ohne der App etwas wegzunehmen.
   ========================================================= */

/* ---------- Der Pausenwecker: erst Schiene, dann Block --------------------- */

.fit-rest {
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: grid-template-columns var(--dur) var(--ease-out),
              padding var(--dur) var(--ease-out);
}

/* Ruht der Wecker, nimmt er die Höhe einer Zeile ein: die ±15 fallen
   weg (es gibt nichts zu verlängern), und übrig bleibt „Rest timer
   3:00" zum Antippen. Sobald gezählt wird, ist der Block wieder da. */
.fit-rest.is-idle {
  grid-template-columns: 1fr;
  padding: 0;
  margin-bottom: 10px;
}

.fit-rest.is-idle .fit-rest__step { display: none; }

.fit-rest.is-idle .fit-rest__main {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
}

.fit-rest.is-idle .fit-rest__clock { font-size: 14px; }
.fit-rest.is-idle .fit-rest__hint { font-size: max(var(--fs-floor), 11.5px); }
.fit-rest.is-idle .fit-rest__fill { display: none; }

/* ---------- Die nächste offene Übung --------------------------------------- */

/* Eine Zeile am unteren Rand – und zwar wirklich am Rand.
 *
 * Sie klebte vorher (position: sticky) und konnte das nicht: ein
 * klebendes Element bewegt sich nur innerhalb seines Elternteils, und
 * dieses hier ist das LETZTE Kind. Sein Elternteil endet mit ihm, also
 * gab es keinen Weg, an dem es hätte kleben können – es hing schlicht
 * am Ende der Seite, unter der Tableiste, und war nie zu sehen.
 *
 * Es klebt weiterhin – aber jetzt hat es woran: .fit-run bringt unten
 * einen Fußabstand mit, und der gehört zum selben Kasten. Der Streifen
 * kann darin wandern und bleibt über der Leiste stehen, statt hinter
 * ihr zu verschwinden.
 *
 * Gerechnet wird gegen --sh-tabs-clear, also gegen das, was die Leiste
 * wirklich verdeckt. Mit --sh-tabs-h stünde er um den Aufstieg des
 * Sechsecks zu hoch. `position: fixed` verbietet sich hier: die View
 * trägt beim Eintreten eine Transformation, und die macht jedes feste
 * Element in ihr wieder relativ. */
.fit-next {
  position: sticky;
  bottom: calc(var(--sh-tabs-clear) + 10px);
  z-index: 18;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 13px;

  --cut: 9px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
  box-shadow: 0 8px 24px rgba(var(--o-deep), .45);
  text-align: start;
}

.fit-next__label {
  font-size: max(var(--fs-floor), 10px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.fit-next__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fit-next__meta {
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.fit-next.is-done { grid-template-columns: auto minmax(0, 1fr); }
.fit-next.is-done .fit-next__label { color: var(--state-good, var(--accent-app)); }

html[data-eink] .fit-next { box-shadow: none; outline: 1.5px solid #1c1c1c; }

/* ---------- Nachtragen: derselbe Bildschirm, ohne Uhr ---------------------- */

.fit-log__head {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 14px;

  --cut: 10px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: rgba(var(--t-fitness), .10);
}

.fit-log__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.fit-log__meta  { margin: 0; font-size: 12.5px; color: var(--text-dim); }

.fit-log__acts { display: grid; gap: 8px; margin-top: 16px; }
.fit-log__acts .fit-start { justify-content: center; width: 100%; padding: 13px 16px; }

/* Der Start an der Workout-Zeile. Er war eine volle Akzentfläche – in
   der Library stand sie damit an jeder Zeile, zwölf gleich laute Knöpfe
   untereinander, und der Blick fand keinen. Seit Night Pond (0.6.0
   beta) getönt wie das „+" einer Kachel auf Home: gleiche Handlung,
   gleicher Knopf (--tint-*, styles/pond.css). Die volle Fläche bleibt
   dem einen Start auf Today. */
.fitm-icon--go {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover);
  --btn-lift: var(--tint-lift);
  color: var(--tint-ink);
  filter: var(--tint-glow);
}
.fitm-icon--go::before { opacity: 1; }
.fitm-icon--go::after { box-shadow: inset 0 0 0 1.5px var(--tint-edge); }
.fitm-icon--go img { filter: none; width: 14px; }
.fitm-icon--go .la-glyph { width: 14px; height: 14px; }

html[data-eink] .fitm-icon--go img { filter: invert(1); }


/* =========================================================
   TEIL 6 – Die Leiste des Laufs, unter der Topbar

   Knöpfe, Uhr und Pausenwecker liegen in EINER Fläche: erste
   Zeile hinaus · Uhr · fertig, zweite Zeile die Pause. Zwei
   Zeilen, ein Baustein, eine Kontur – statt zweier Kästen mit
   einem Spalt dazwischen.

   Die Topbar darüber bleibt vollständig, wie in jedem anderen
   Bildschirm auch.
   ========================================================= */

/* Schnitt und Innenabstand gehören zusammen: der Knopf „hinaus" ist ein
   Rechteck und sitzt in der geschnittenen Ecke oben links. Bei 12 px
   Schnitt und 6 px Abstand lief die Diagonale genau durch seine Ecke –
   2 × Abstand muss sichtbar größer sein als der Schnitt (hier 4 px Luft). */
.fit-runbar {
  --cut: 10px;
  position: relative;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--surface);
}

.fit-runbar__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
}

/* Der Pausenwecker sitzt IN der Leiste, nicht darunter: kein
   eigener Abstand, keine zweite Kontur. */
/* Der eigene Schnitt unten rechts läuft parallel zu dem der Leiste:
   Abstand der Diagonalen = (2·8 + 6 − 10) / √2 ≈ 8 px, wie an den Seiten. */
.fit-runbar .fit-rest {
  --cut: 6px;
  margin-bottom: 0;
  box-shadow: none;
  background: rgba(var(--o), .05);
}

.fit-runbar .fit-rest.is-idle { margin-bottom: 0; }

/* Angehalten: die Uhr steht, und man soll sehen, dass das Absicht
   ist. Die Fläche sagt es, nicht ein Rand. */
.fit-run.is-paused .fit-run__clock { --btn-face: rgba(var(--t-fitness), .20); }
.fit-run.is-paused .fit-run__clock::before { opacity: 1; }


/* =========================================================
   TEIL 7 – „Today" auf breiten Schirmen: zwei Spalten

   Auf dem Telefon steht die Karte in einer Spalte: Körper,
   Gruppen, Text, Knopf. Auf einem breiten Schirm war der Körper
   dann eine kleine Zeichnung mit sehr viel Weiß daneben – die
   Figur ist das Informativste an der Karte und stand da wie eine
   Briefmarke.

   Ab 760px teilt sich die Karte: links die Figur über die ganze
   Höhe, rechts alles andere. Ab 1100px darf die Figur noch
   wachsen. Der Umbruchpunkt hängt an der Karte, nicht am
   Fenster – auf dem Desktop nimmt die Seitenleiste links Platz
   weg, und ein reiner Fenster-Umbruch hätte zu früh geschaltet.
   ========================================================= */

.fit-card__side { display: grid; gap: 12px; align-content: start; }

@media (min-width: 760px) {
  .fit-card {
    grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1fr);
    align-items: start;
    column-gap: 26px;
    padding: 20px 22px 22px;
  }

  /* Die Figur bekommt die ganze linke Spalte und darf so hoch
     werden, wie die rechte Spalte lang ist. */
  .fit-card__figure { align-self: stretch; }

  .bodymap--compact {
    max-width: 100%;
    max-height: min(58vh, 460px);
  }

  /* Mehr Platz heißt: die Gruppen dürfen wieder lesbar groß sein. */
  .fit-card .fit-group { padding: 5px 9px; font-size: max(var(--fs-floor), 11.5px); }
  .fit-card .fit-group__dot { width: 8px; height: 8px; }

  .fit-card__name { font-size: 24px; }
  .fit-card__acts .fit-start { padding: 12px 18px; font-size: 16px; }
}

@media (min-width: 1100px) {
  .fit-card { column-gap: 34px; }
  .bodymap--compact { max-height: min(64vh, 560px); }
}

/* ---------- Nachtrag: der Knopf im Verlauf --------------------------------

   .fit-hist__btn trug den Eckschnitt der Flächen und ist doch ein
   Knopf. Eckig – siehe die Formensprache in styles/components.css. */
.fit-hist__btn {
  border-radius: 0;
  clip-path: none;
}

/* =========================================================
   TEIL 8 – Fitness „Next Level" (0.1.0 beta)

   Rang-Erklärung, Fenster vor dem Start (Welcome back, Plateau,
   Deload), Phasen und Pause, Aufwärmsätze, Reps in reserve, die
   Rückfrage bei einem großen Rangsprung und das Angebot am Ende.

   Formensprache wie überall (TEIL 3): Flächen mit zwei Schnitten
   (oben links, unten rechts), Knöpfe als Rechteck mit Sockel, nichts
   rund. Kleines unter ~30 px mit Schrift darin bleibt ein schlichtes
   Rechteck – der Schnitt würde die Zeichen anschneiden.
   ========================================================= */

/* ---------- Flächen mit Schnitt ------------------------------------------ */

.fit-why__step,
.fit-weighin,
.fit-phase,
.fit-status,
.fit-empty,
.fit-jump,
.fit-pf__row,
.fit-pf__deload,
.fit-pf__alt .fitm-pick {
  border-radius: 0;
  clip-path: var(--cut-clip);
}

.fit-why__step          { --cut: 9px; }
.fit-weighin            { --cut: 10px; }
.fit-phase              { --cut: 8px; }
.fit-status             { --cut: 10px; }
.fit-empty              { --cut: 12px; }
.fit-jump               { --cut: 8px; }
.fit-pf__row            { --cut: 10px; }
.fit-pf__deload         { --cut: 10px; }
.fit-pf__alt .fitm-pick { --cut: 9px; }

/* ---------- Die Satznummer als Schalter „Aufwärmsatz" ---------------------
   Ein Knopf wie jeder andere: Rechteck, Sockel, sinkt beim Drücken. */

.fit-set__warm {
  --depth: 2px;
  --btn-face: rgba(var(--o), .05);
  --btn-face-hover: rgba(var(--o), .11);
  --btn-lift: rgba(var(--o), .14);

  position: relative;
  isolation: isolate;
  justify-self: center;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  transition: transform var(--dur-fast) var(--ease-out);
}
.fit-set__warm::before,
.fit-set__warm::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.fit-set__warm::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* Die Fläche liegt deckend auf der Zeile – sonst schiene der Sockel
   durch eine durchsichtige Fläche und der Knopf wäre ein grauer Block. */
.fit-set__warm::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--surface);
}
.fit-set__warm:hover::after {
  background-image: linear-gradient(var(--btn-face-hover), var(--btn-face-hover));
}
.fit-set__warm:active { transform: translate(var(--depth), var(--depth)); }
.fit-set__warm:active::before { opacity: 0; }
.fit-set__warm[aria-pressed="true"] {
  --btn-face: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  --btn-face-hover: color-mix(in srgb, var(--accent-deep) 30%, transparent);
  color: var(--accent-app);
}

/* Ein Aufwärmsatz tritt zurück – er zählt nirgends mit. Die Zeile bleibt
   deckend: darunter liegt die rote Löschfläche, eine durchsichtige Tönung
   ließe sie durchscheinen, und der Satz sähe abgehakt aus. */
.fit-set.is-warm {
  background-image: linear-gradient(rgba(var(--o), .025), rgba(var(--o), .025));
  background-color: var(--surface);
}
.fit-set.is-warm.is-done {
  background: color-mix(in srgb, var(--accent-deep) 20%, transparent);
}
.fit-set.is-warm .fit-in,
.fit-set.is-warm .fit-set__prev { opacity: .62; }

/* ---------- Reps in reserve ------------------------------------------------ */

.fit-rir {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 8px 40px;
}
.fit-rir__label {
  margin-inline-end: 4px;
  font-size: max(var(--fs-floor), 10.5px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.fit-rir .fitm-chip {
  min-width: 32px;
  padding: 5px 0;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Rückfrage bei einem großen Sprung ------------------------------- */

.fit-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 2px 0 8px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--accent-deep) 18%, var(--surface));
  color: var(--text);
  font-size: 12.5px;
}
.fit-jump span { flex: 1 1 180px; }
.fit-jump .fitm-textbtn,
.fit-jump .fitm-opt { padding: 6px 12px; font-size: 12.5px; }

/* ---------- Hinweise über den Sätzen ----------------------------------------- */

.fit-ex__stale--act {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fit-ex__stale--act .fitm-textbtn { flex: none; padding: 6px 12px; font-size: 12px; }

.fit-ex__stale--phase {
  border-inline-start-color: var(--line-strong);
  background: rgba(var(--o), .06);
  color: var(--text-dim);
}

/* ---------- Phase, Pause, leeres Workout ------------------------------------- */

.fit-phase {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent-deep) 14%, var(--surface));
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}
.fit-phase--done { margin: 0; text-align: center; font-weight: 500; color: var(--text-dim); }

.fit-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent-deep) 12%, var(--surface));
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}
.fit-status .fitm-textbtn { flex: none; padding: 7px 12px; font-size: 12.5px; }

.fit-empty {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 20px 18px;
  background: rgba(var(--o), .04);
  text-align: center;
}
.fit-empty__title { margin: 0; font-size: 16px; font-weight: 650; }
.fit-empty .fit-note { margin: 0; }

/* ---------- Fenster vor dem Start --------------------------------------------- */

.fit-pf { gap: 14px; }
.fit-pf__lead { margin: 0; }
.fit-pf__lead b { color: var(--text); }
.fit-pf__group { display: grid; gap: 8px; }
.fit-pf__preview { margin: 0; font-size: 13px; color: var(--text-dim); }
.fit-pf__preview b { color: var(--text); font-weight: 700; }
.fit-pf__quiet { justify-self: center; padding: 8px 14px; font-size: 12.5px; }

.fit-pf__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

/* Swap: oben „Same muscles" als volle Karten mit Startgewicht, darunter
   „All other exercises" als ruhige Liste – zwei Gruppen, klar getrennt. */
.fit-swap { display: grid; gap: 20px; }
.fit-swap__group { display: grid; gap: 8px; }
.fit-swap__group + .fit-swap__group {
  padding-top: 16px;
  border-top: 1px solid rgba(var(--o), .08);
}
.fit-swap__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.fit-swap__head span {
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 600;
  font-size: 12px;
  color: var(--accent-app);
}
.fit-swap .fitm-picks { max-height: none; overflow: visible; }
.fit-swap .fit-note { margin: 0; }

.fit-pf__row {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(var(--o), .05);
}
.fit-pf__row.is-done { background: rgba(var(--o), .03); }

.fit-pf__rowhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fit-pf__rowtext { display: grid; gap: 2px; min-width: 0; text-align: start; }
.fit-pf__rowtext b { font-size: 14.5px; font-weight: 650; color: var(--text); }
.fit-pf__rowtext > span { font-size: 12px; color: var(--text-dim); }

.fit-pf__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fit-pf__acts .fitm-textbtn,
.fit-pf__acts .fitm-opt { padding: 7px 11px; font-size: 12.5px; }

/* Nebeneinander stehende Handgriffe sprechen gleich: kein Versal-Knopf
   neben einem Knopf in normaler Schreibung. */
:is(.fit-pf__acts, .fit-jump) .fitm-opt {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

.fit-pf__status { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--accent-app); }

.fit-pf__deload {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--accent-deep) 10%, transparent);
}
.fit-pf__deload p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.fit-pf__deload b { color: var(--text); }
.fit-pf__deload .fitm-textbtn { justify-self: start; padding: 7px 12px; font-size: 12.5px; }

.fit-pf__alt .fitm-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(var(--o), .05);
  text-align: start;
}
.fit-pf__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fit-pf__chip {
  padding: 2px 6px;
  background: rgba(var(--o), .08);
  color: var(--text-dim);
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 600;
}

/* ---------- „Wie dieser Rang entsteht" ------------------------------------------ */

.fit-whypop { gap: 14px; }

.fit-why__hero { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.fit-why__bar {
  flex: 1 1 80px;
  height: 8px;
  background: rgba(var(--o), .1);
  overflow: hidden;
}
.fit-why__bar span { display: block; height: 100%; }

.fit-why { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fit-why__step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(var(--o), .05);
}
.fit-why__n {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--accent-deep);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
}
.fit-why__body { display: grid; gap: 2px; min-width: 0; }
.fit-why__label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.fit-why__note { font-size: max(var(--fs-floor), 11.5px); line-height: 1.35; color: var(--text-dim); }
.fit-why__value { font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--text); }
.fit-why__next { margin: 0; font-size: 14px; font-weight: 650; color: var(--accent-app); }
.fit-why__fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-dim); }

/* ---------- Noch ohne Rang: die Leiter vorab --------------------------------------
   Dasselbe Fenster wie für einen Rang, nur steht statt des Weges vom
   Satz zur Stufe die Leiter selbst da – in Kilogramm für diesen Körper. */

.fit-why__count { font-size: 12px; font-weight: 650; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fit-why__lead  { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }

.fit-why__muscles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fit-why__muscles span {
  padding: 3px 9px;
  background: rgba(var(--o), .07);
  color: var(--text-dim);
  font-size: max(var(--fs-floor), 11.5px);
  font-weight: 600;
}

.fit-ladder { display: grid; gap: 8px; }
.fit-ladder__title {
  margin: 4px 0 0;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.fit-ladder__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

.fit-ladder__row {
  --cut: 8px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  grid-template-areas: "hex name kg" "hex bar bar" "hex span span";
  align-items: center;
  gap: 3px 10px;
  padding: 8px 12px;
  background: rgba(var(--o), .04);
  clip-path: var(--cut-clip);
  animation: fit-ladder-in var(--dur-slow, .4s) var(--ease-out) both;
}
.fit-ladder__row:nth-child(2) { animation-delay: 30ms; }
.fit-ladder__row:nth-child(3) { animation-delay: 60ms; }
.fit-ladder__row:nth-child(4) { animation-delay: 90ms; }
.fit-ladder__row:nth-child(5) { animation-delay: 120ms; }
.fit-ladder__row:nth-child(6) { animation-delay: 150ms; }
.fit-ladder__row:nth-child(7) { animation-delay: 180ms; }
.fit-ladder__row:nth-child(8) { animation-delay: 210ms; }
.fit-ladder__row:nth-child(9) { animation-delay: 240ms; }

@keyframes fit-ladder-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Der nächste Rang ist das Ziel – seine Zeile trägt die Rangfarbe. */
.fit-ladder__row.is-next {
  background: color-mix(in srgb, var(--tier) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--tier);
}

.fit-ladder__hex {
  grid-area: hex;
  align-self: start;
  width: 16px;
  height: 14px;
  margin-top: 2px;
  background: var(--tier);
  clip-path: var(--hex-clip);
}
.fit-ladder__name {
  grid-area: name;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
}
.fit-ladder__name em {
  font-style: normal;
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tier);
}
.fit-ladder__kg {
  grid-area: kg;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fit-ladder__bar {
  grid-area: bar;
  height: 4px;
  background: rgba(var(--o), .08);
  overflow: hidden;
}
.fit-ladder__bar span {
  display: block;
  height: 100%;
  background: var(--tier);
  transform-origin: left;
  animation: fit-ladder-bar .6s var(--ease-out) both;
  animation-delay: inherit;
}
@keyframes fit-ladder-bar { from { transform: scaleX(0); } }

.fit-ladder__span { grid-area: span; font-size: max(var(--fs-floor), 11px); color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .fit-ladder__row, .fit-ladder__bar span { animation: none; }
}
html[data-motion="reduce"] .fit-ladder__row,
html[data-motion="reduce"] .fit-ladder__bar span { animation: none; }

/* Das Schild im laufenden Workout: eine leere Fassung statt eines
   grauen Blocks. Eine Rangmarke ist Metall (siehe „Rangmarken mit
   Metallverlauf"); hier fehlt das Metall noch – also eingelassene
   dunkle Fläche, gestrichelter Rand, und ein hohles Sechseck in der
   Farbe des ersten Rangs: das, was hier hinein soll. Kein Sockel –
   eine Fassung steht nicht hervor, sie ist vertieft. */
.fit-ex__rank--none {
  --depth: 0px;
  --btn-face: rgba(0, 0, 0, .28);
  --goal: var(--rank-wood, #9a7b56);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 4px 10px 4px 8px;
  color: var(--text-dim);
}
.fit-ex__rank--none::before { display: none; }
.fit-ex__rank--none::after {
  border: 1px dashed rgba(var(--o), .26);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
  transition: border-color var(--dur) var(--ease-out);
}

.fit-ex__slot { width: 14px; height: 12px; flex: none; overflow: visible; }
.fit-ex__slot-line {
  fill: none;
  stroke: var(--goal);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.fit-ex__slot-fill {
  fill: var(--goal);
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(.4);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring, var(--ease-out));
}

.fit-ex__slot-text {
  font-size: max(var(--fs-floor), 9.5px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

/* Berühren lässt das Metall ahnen: das Sechseck füllt sich, der Rand
   nimmt die Farbe des ersten Rangs an. */
.fit-ex__rank--none:is(:hover, :focus-visible, .is-open) { filter: none; color: var(--text); }
.fit-ex__rank--none:is(:hover, :focus-visible, .is-open)::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  border-color: color-mix(in srgb, var(--goal) 70%, transparent);
}
.fit-ex__rank--none:is(:hover, :focus-visible, .is-open) .fit-ex__slot-fill {
  opacity: .9;
  transform: none;
}
.fit-ex__rank--none:active { transform: scale(.96); }

html[data-eink] .fit-ex__rank--none { --goal: #000000; color: #000000; }
html[data-eink] .fit-ex__rank--none::after {
  background: #ffffff;
  border: 1.5px dashed #1c1c1c;
  box-shadow: none;
}
html[data-eink] .fit-ex__slot-fill { transition: none; }

html[data-eink] .fit-ladder__row,
html[data-eink] .fit-ladder__row.is-next { background: #ffffff; box-shadow: inset 0 0 0 1.5px #1c1c1c; animation: none; }
html[data-eink] .fit-ladder__row.is-next { box-shadow: inset 4px 0 0 #000000, inset 0 0 0 1.5px #1c1c1c; }
html[data-eink] .fit-ladder__hex,
html[data-eink] .fit-ladder__bar span { background: #000000; animation: none; }
html[data-eink] .fit-ladder__name em,
html[data-eink] .fit-ladder__kg { color: #000000; }
html[data-eink] .fit-why__muscles span { background: #ffffff; color: #000000; box-shadow: inset 0 0 0 1px #1c1c1c; }

/* Der alte Rang als Abzeichen – gelesen, nicht gedrückt, und klein:
   Rechteck ohne Schnitt, die Rangfarbe in der Fläche. */
.fit-legacy {
  flex: none;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--tier, var(--line-strong)) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier, var(--line-strong)) 70%, transparent);
  color: var(--text);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 650;
  white-space: nowrap;
}

/* Die Zeile einer Übung ist als Ganzes der Weg zur Erklärung. */
.fit-rank { position: relative; }
.fit-rank__hit {
  position: absolute;
  inset: -4px;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fit-rank__hit:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }
.fit-rank__top .fit-legacy { margin-inline-start: auto; }

.fit-weighin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent-deep) 12%, var(--surface));
}
.fit-weighin__text { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--text); }
.fit-weighin__field .fit-date { width: 84px; }
.fit-weighin .fitm-textbtn { padding: 8px 14px; font-size: 12.5px; }

/* ---------- Die einmalige Karte nach der Umstellung --------------------------------- */

.fit-notice__list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; }
.fit-notice__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.fit-notice__row:last-child { border-bottom: 0; }
.fit-notice__move { white-space: nowrap; }
.fit-notice__acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* ---------- Am Ende: als Workout behalten -------------------------------------------- */

.fit-offer { display: grid; gap: 10px; }
.fit-offer .fit-note { margin: 0; }
.fit-offer__line { margin: 0; font-size: 13.5px; color: var(--text); }
.fit-offer__name { width: 100%; }
.fit-offer .fit-start,
.fit-offer .opt-btn { justify-content: center; width: 100%; }

.fit-diff { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.fit-diff__row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; }
.fit-diff__row > span { width: 18px; font-weight: 800; text-align: center; color: var(--text-dim); }
.fit-diff__row.is-add > span { color: var(--accent-app); }
.fit-diff__row i { margin-inline-start: auto; font-style: normal; font-size: max(var(--fs-floor), 11.5px); color: var(--text-dim); }
.fit-diff__row .fitm-chip { order: 5; flex-basis: 100%; padding: 6px 10px; font-size: 12px; text-align: start; }
.fit-diff--plain { list-style: decimal; padding-inline-start: 22px; gap: 3px; font-size: 13px; color: var(--text); }

/* ---------- Abzeichen „Comeback" / „Deload" im Verlauf ----------------------------- */

.fit-badge--phase {
  background: rgba(var(--o), .08);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text-dim);
}

/* ---------- Vorbildschirm ------------------------------------------------------------- */

.fit-prestart { padding-top: 12px; }

/* ---------- E-ink ---------------------------------------------------------------------- */

html[data-eink] .fit-set__warm { --btn-lift: #000000; color: #1c1c1c; }
html[data-eink] .fit-set__warm[aria-pressed="true"] { --btn-face: #1c1c1c; color: #ffffff; }
html[data-eink] :is(.fit-phase, .fit-status, .fit-weighin, .fit-jump, .fit-pf__deload) {
  background: #e8e8e8;
  color: #000000;
}
html[data-eink] :is(.fit-why__step, .fit-pf__row, .fit-pf__alt .fitm-pick, .fit-empty) {
  background: #f2f2f2;
}
html[data-eink] .fit-why__n { background: #000000; color: #ffffff; }
html[data-eink] .fit-legacy { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; color: #000000; }

@media (prefers-reduced-motion: reduce) {
  .fit-set__warm { transition: none; }
}

/* Der Zweitweg in den neuen Fenstern: ein Knopf (Rechteck mit Sockel),
   keine Optionszeile – .opt-btn trägt den Schnitt einer Fläche und bleibt
   den Zeilen eines Menüs vorbehalten. */
.fit-secbtn { width: 100%; justify-content: center; }

/* =========================================================
   TEIL 9 – Programme (0.1.0 beta)

   Library › Programs (das Regal), /fitness/program/:id (ein Ordner),
   das Fenster „Make this your week", und was ein Programm im Lauf
   zeigt: Zielzeile, Supersatz, Programmzeile.

   Ein Programm ist ein ORDNER: oben ein Reiter mit Kürzel und Stufe,
   darin die Workouts als Blätter. Eigene Workouts sind Zeilen – die
   Form unterscheidet „vorgefertigt" von „selbst gebaut", bevor ein
   Wort es tut. Formensprache wie TEIL 3: Flächen zwei Schnitte
   (oben links, unten rechts), Knöpfe Rechtecke mit Sockel, nichts rund.
   ========================================================= */

/* Fünf Abschnitte: Workouts · Programs · Exercises · Routes · Plan. Jeder
   so breit wie sein Wort – gleich breite Spalten brachen auf 390 px um.
   Unter 360 px rollt die Leiste seitwärts, statt zu umbrechen. */
.fitm-seg--nav { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.fitm-seg--nav::-webkit-scrollbar { display: none; }
.fitm-seg--nav .fitm-seg__btn { flex: 1 0 auto; padding-inline: 6px; font-size: 13px; white-space: nowrap; }
@media (min-width: 560px) { .fitm-seg--nav .fitm-seg__btn { font-size: 14px; padding-inline: 10px; } }

.fitp-eyebrow {
  display: block;
  font: 600 max(var(--fs-floor), 11px)/1.3 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.fitp-intro { margin: 2px 2px 14px; }
.fitp-intro p { margin: 8px 0 0; color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.fitp-intro a { color: var(--accent-app); text-underline-offset: 3px; }

.fitp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }

.fitp-shelf { list-style: none; margin: 0; padding: 0; }

/* ---------- Der Ordner ------------------------------------------------------ */

.fitp-folder {
  --cut: 16px;
  position: relative;
  display: block;
  margin: 34px 0 22px;
  color: inherit;
  text-decoration: none;
}

.fitp-folder__tab {
  position: absolute;
  inset-inline-start: 0;
  top: -23px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 14px 0 16px;
  background: var(--accent-deep);
  color: var(--ink);
  font: 700 max(var(--fs-floor), 11px)/1 var(--font-mono);
  letter-spacing: .12em;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
}

.fitp-folder__tab i {
  font-style: normal;
  font-weight: 500;
  letter-spacing: .05em;
  opacity: .78;
}

.fitp-folder__body {
  display: block;
  padding: 18px 16px 16px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  box-shadow: inset 0 2px 0 var(--accent-deep);
  transition: background var(--dur) var(--ease-out);
}

a.fitp-folder:hover .fitp-folder__body { background: var(--surface-2); }
a.fitp-folder:focus-visible { outline: none; }
a.fitp-folder:focus-visible .fitp-folder__body { box-shadow: inset 0 0 0 2px var(--accent-app); }

.fitp-folder.is-active .fitp-folder__body {
  box-shadow: inset 0 2px 0 var(--accent-deep), inset 3px 0 0 var(--accent-deep);
}

.fitp-folder__title {
  display: block;
  margin: 0;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--text-strong);
}

.fitp-folder--hero .fitp-folder__title { font-size: 26px; }

.fitp-folder__line {
  display: block;
  margin: 4px 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Die Workouts als Blätter, leicht gefächert. */
.fitp-sheets { display: grid; margin: 0 0 14px; }

.fitp-sheet {
  display: grid;
  grid-template-columns: minmax(36px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--bg);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

.fitp-sheet:nth-child(2) { margin-inline-start: 7px; background: var(--surface-3); }
.fitp-sheet:nth-child(3) { margin-inline-start: 14px; background: color-mix(in srgb, var(--surface-3) 70%, var(--g-33)); }
.fitp-sheet:nth-child(n+4) { margin-inline-start: 21px; background: color-mix(in srgb, var(--surface-3) 45%, var(--g-33)); }

.fitp-sheet__key {
  font: 700 max(var(--fs-floor), 11px)/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--accent-app);
}

.fitp-sheet__what {
  overflow: hidden;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Die Woche: sieben Zellen, Trainingstage getönt. */
.fitp-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0 0 12px;
}

.fitp-week span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  height: 36px;
  background: var(--surface-2);
  font: 600 max(var(--fs-floor), 10px)/1 var(--font-mono);
  color: var(--text-subtle);
}

.fitp-week span b { font-size: max(var(--fs-floor), 10px); letter-spacing: .02em; color: var(--text); }
.fitp-week span.is-on { background: color-mix(in srgb, var(--accent-deep) 22%, var(--surface-2)); color: var(--accent-app); }
.fitp-week span.is-on b { color: var(--text-strong); }

.fitp-rotnote {
  display: block;
  margin: 0 0 12px;
  padding: 9px 12px;
  background: var(--surface-2);
  font: 500 max(var(--fs-floor), 11.5px)/1.3 var(--font-mono);
  color: var(--text-muted);
}

.fitp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font: 500 max(var(--fs-floor), 11.5px)/1.2 var(--font-mono);
  color: var(--text-muted);
}

.fitp-meta b { font-weight: 600; color: var(--text-strong); }

/* ---------- Aufstieg ---------------------------------------------------------- */

.fitp-grad {
  --cut: 14px;
  margin: 4px 0 18px;
  padding: 16px;
  background: color-mix(in srgb, var(--accent-deep) 14%, var(--surface));
  clip-path: var(--cut-clip);
  box-shadow: inset 0 2px 0 var(--accent-app);
}

.fitp-grad__title { margin: 8px 0 4px; font-size: 20px; color: var(--text-strong); }
.fitp-grad__text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.fitp-grad__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fitp-grad__acts .fit-start { text-decoration: none; }

/* ---------- Ein Ordner offen ---------------------------------------------------- */

.fitp-folder--hero { margin-top: 26px; }

.fitp-status {
  margin: -6px 0 14px;
  font: 500 max(var(--fs-floor), 11.5px)/1.4 var(--font-mono);
  color: var(--accent-app);
}

.fitp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 14px;
}

.fitp-stat {
  --cut: 8px;
  padding: 10px 8px 9px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
}

.fitp-stat b { display: block; font: 600 17px/1 var(--font-mono); color: var(--text-strong); }
.fitp-stat span { display: block; margin-top: 6px; font-size: max(var(--fs-floor), 11px); color: var(--text-muted); }

.fitp-seg { margin: 0 0 10px; }
.fitp-note { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--text-subtle); }

.fitp-cta { display: grid; gap: 10px; }
.fitp-cta .fit-start { justify-content: center; padding: 13px 16px; font-size: 16px; }
.fitp-cta .fitm-textbtn { justify-self: center; }

.fitp-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 26px 2px 10px;
}

.fitp-h h3 {
  margin: 0;
  font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fitp-h span { font-size: 12px; color: var(--text-subtle); }

/* Ein Workout im Ordner. */
.fitp-wk {
  --cut: 14px;
  margin: 0 0 10px;
  background: var(--surface);
  clip-path: var(--cut-clip);
}

.fitp-wk__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
}

.fitp-wk__toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.fitp-wk__toggle:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.fitp-wk__key {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 30px;
  padding: 0 8px;
  background: var(--accent-deep);
  color: var(--ink);
  font: 700 max(var(--fs-floor), 11px)/1 var(--font-mono);
  letter-spacing: .08em;
}

.fitp-wk__name { display: block; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.fitp-wk__meta {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font: 500 max(var(--fs-floor), 10.5px)/1.2 var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fitp-wk__text { min-width: 0; }

.fitp-exlist { margin: 0; padding: 0 14px 10px 12px; list-style: none; }

.fitp-ex {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.fitp-ex.is-optional { opacity: .72; }

.fitp-ex__name {
  overflow: hidden;
  font-size: 14px;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fitp-ex__name small { display: block; margin-top: 2px; font-size: max(var(--fs-floor), 11.5px); color: var(--text-subtle); }

.fitp-ex__rx {
  font: 600 12.5px/1.15 var(--font-mono);
  color: var(--text-strong);
  text-align: end;
  white-space: nowrap;
}

.fitp-ex__rx i { font-style: normal; font-weight: 500; font-size: max(var(--fs-floor), 10.5px); color: var(--text-muted); }
.fitp-ex__rx small { display: block; margin-top: 3px; font-weight: 500; font-size: max(var(--fs-floor), 10.5px); color: var(--text-subtle); }

/* Supersatz-Marke: A1, A2 – klein, also ohne Schnitt (Größengrenze). */
.fitp-ss {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 18px;
  margin-inline-end: 8px;
  padding: 0 4px;
  background: var(--accent-deep);
  color: var(--ink);
  font: 700 max(var(--fs-floor), 10px)/1 var(--font-mono);
  vertical-align: 1px;
}

/* „Why this works" – zu: eine Zeile; offen: Begründung und Punktreihe. */
.fitp-why {
  --cut: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 0;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: start;
  cursor: pointer;
}

.fitp-why b { font-weight: 600; }
.fitp-why span { font-size: 12px; color: var(--text-subtle); }
.fitp-why.is-open { display: block; cursor: default; }

.fitp-why__head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.fitp-why__h { margin: 14px 0 4px; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.fitp-why__p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.fitp-vol { display: block; width: 100%; height: auto; margin-top: 10px; }
.fitp-vol__band { fill: color-mix(in srgb, var(--accent-deep) 16%, transparent); }
.fitp-vol__grid { stroke: var(--line); stroke-width: 1; }
.fitp-vol__stem { stroke: var(--line-strong); stroke-width: 1; }
.fitp-vol__dot { fill: var(--accent-app); }
.fitp-vol__dot.is-low { fill: var(--text-muted); }
.fitp-vol__label { fill: var(--text); font: 500 max(var(--fs-floor), 11px) var(--font); }
.fitp-vol__value { fill: var(--text-strong); font: 600 max(var(--fs-floor), 10px) var(--font-mono); }
.fitp-vol__tick { fill: var(--text-subtle); font: 500 max(var(--fs-floor), 9.5px) var(--font-mono); letter-spacing: .06em; }

/* ---------- Das Fenster „Make this your week" ------------------------------------- */

.fitp-adopt .fitp-eyebrow { margin-bottom: 6px; }
.fitp-adopt .fitp-seg { margin: 12px 0 4px; }

.fitp-label {
  display: flex;
  justify-content: space-between;
  margin: 16px 0 8px;
  font: 600 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.fitp-label span { letter-spacing: .04em; text-transform: none; color: var(--accent-app); }
.fitp-label span.is-off { color: var(--text-muted); }

.fitp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.fitp-days .fitm-chip { justify-content: center; padding: 10px 0; font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono); }

.fitp-weekbig { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.fitp-weekbig span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-height: 54px;
  padding: 4px 2px;
  background: var(--surface-2);
  font: 600 max(var(--fs-floor), 10px)/1 var(--font-mono);
  color: var(--text-subtle);
  text-align: center;
}

.fitp-weekbig span b {
  max-width: 100%;
  overflow: hidden;
  font-size: max(var(--fs-floor), 10.5px);
  color: var(--text-strong);
  text-overflow: ellipsis;
}

.fitp-weekbig span.is-on { background: color-mix(in srgb, var(--accent-deep) 24%, var(--surface-2)); color: var(--accent-app); }

.fitp-rotlead { margin: 12px 0 4px; }

.fitp-replace {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin: 16px 0;
  padding: 10px 12px;
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.fitp-replace img { width: 18px; margin-top: 1px; }
.fitp-replace b { color: var(--text); }
.fitp-adopt [data-fitp-use] { margin-top: 16px; }
.fitp-adopt [data-fitp-use][disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Im Lauf -------------------------------------------------------------- */

/* Die Programmzeile über den Notizen. */
.fitp-banner {
  --cut: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}

.fitp-banner b { font-weight: 600; color: var(--accent-app); }
.fitp-banner__week { font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }

/* Die Zielzeile über den Sätzen. */
.fitp-rx {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono);
  color: var(--text);
}

.fitp-rx__chip { padding: 6px 8px; background: var(--surface-2); }
.fitp-rx__chip em { margin-inline-end: 5px; font-style: normal; font-weight: 500; color: var(--text-subtle); }
.fitp-rx__chip.is-target { background: color-mix(in srgb, var(--accent-deep) 22%, var(--surface-2)); color: var(--text-strong); }

/* Supersatz: eine Klammer links an beiden Karten des Paars. */
.fit-ex.fitp-pair { box-shadow: inset 3px 0 0 var(--accent-deep); }
.fit-ex.fitp-pair--first { margin-bottom: 6px; }

/* Eine Zeile der Rotation im Plan-Editor: Nummer, Name, hoch/runter, weg –
   ohne Bild und ohne „opt" wie im Workout-Editor. */
.fitm-item.fitp-step { grid-template-columns: 20px minmax(0, 1fr) auto auto; }

/* Kuratierte Ersatzübung im Tausch-Fenster. */
.fitp-alt .fit-pf__rowtext span { color: var(--accent-app); }


/* ---------- „Pick a workout“: aus einem Programm ------------------------------------
   Unter den eigenen Workouts je Programm eine Ordnerzeile mit Reiter (PPL,
   U/L …); aufgeklappt tragen die Workouts ihr Kürzel statt eines Bildes. */

.fitp-pickhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 16px 2px 6px;
  font: 600 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.fitp-pickhead span { letter-spacing: .04em; text-transform: none; color: var(--text-subtle); }

.fitp-picklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.fitp-pickprog {
  --cut: 10px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
}

.fitp-pickprog.is-open { box-shadow: inset 3px 0 0 var(--accent-deep); }

.fitp-pickprog__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.fitp-pickprog__head:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }

.fitp-pickprog__tab {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 24px;
  padding: 0 10px 0 12px;
  background: var(--accent-deep);
  color: var(--ink);
  font: 700 max(var(--fs-floor), 10.5px)/1 var(--font-mono);
  letter-spacing: .1em;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}

.fitp-pickprog__chev { width: 16px; height: 16px; opacity: .7; transition: transform var(--dur-fast) var(--ease-out); }
.fitp-pickprog.is-open .fitp-pickprog__chev { transform: rotate(180deg); }

.fitp-pickprog__list { margin: 0; padding: 0 12px 6px 14px; list-style: none; }
.fitp-pickprog__list .fitp-pickrow {
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.fitp-pickrow__key {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 26px;
  padding: 0 6px;
  background: color-mix(in srgb, var(--accent-deep) 24%, var(--surface-3));
  color: var(--accent-app);
  font: 700 max(var(--fs-floor), 10px)/1 var(--font-mono);
  letter-spacing: .08em;
}

.fitp-pickrow.is-today .fitp-pickrow__key { background: var(--accent-deep); color: var(--ink); }

html[data-eink] .fitp-pickprog { background: #f2f2f2; }
html[data-eink] :is(.fitp-pickprog__tab, .fitp-pickrow.is-today .fitp-pickrow__key) { background: #1c1c1c; color: #ffffff; }
html[data-eink] .fitp-pickrow__key { background: #e8e8e8; color: #000000; }
html[data-eink] .fitp-pickprog.is-open { box-shadow: inset 3px 0 0 #1c1c1c; }

@media (prefers-reduced-motion: reduce) {
  .fitp-pickprog__chev { transition: none; }
}

/* ---------- E-ink ------------------------------------------------------------------ */

html[data-eink] :is(.fitp-week span.is-on, .fitp-weekbig span.is-on, .fitp-rx__chip.is-target, .fitp-grad) {
  background: #e8e8e8;
  color: #000000;
}
html[data-eink] :is(.fitp-sheet, .fitp-stat, .fitp-why, .fitp-banner, .fitp-replace, .fitp-rotnote) {
  background: #f2f2f2;
}
html[data-eink] .fitp-folder__body { background: #ffffff; box-shadow: inset 0 2px 0 #1c1c1c, inset 0 0 0 1px #1c1c1c; }
html[data-eink] :is(.fitp-folder__tab, .fitp-wk__key, .fitp-ss) { background: #1c1c1c; color: #ffffff; }
html[data-eink] .fitp-vol__band { fill: #e8e8e8; }
html[data-eink] .fitp-vol__dot { fill: #000000; }
html[data-eink] .fit-ex.fitp-pair { box-shadow: inset 3px 0 0 #1c1c1c; }

@media (prefers-reduced-motion: reduce) {
  .fitp-folder__body { transition: none; }
}

/* ---------- Quick track (app/fitness/quicklog.js) ----------------------------
   Ein Fenster, ein Knopf: oben Workout und Tag nebeneinander, darunter
   die Vorschau dessen, was abgehakt wird – eine ruhige Liste, keine
   Karten. Gelesen wird sie einmal, dann wird bestätigt. */

.fit-qt__fields {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.fit-qt__fields .fit-field { margin: 0; min-width: 0; }
.fit-qt__fields .fit-date { width: 100%; min-width: 0; }

.fit-qt__preview { margin-top: 14px; }

.fit-qt__count {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fit-qt__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(var(--o), .08);
}

.fit-qt__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 8px 0 8px 12px;
  border-bottom: 1px solid rgba(var(--o), .06);
  /* Die Marke links in Akzentfarbe: diese Zeile wird abgehakt. */
  background: linear-gradient(var(--accent-app), var(--accent-app)) left 13px / 3px 9px no-repeat;
}

.fit-qt__name { min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

.fit-qt__sets {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.fit-qt__row.is-skipped { background: none; }
.fit-qt__row.is-skipped .fit-qt__name { color: var(--text-faint); font-weight: 500; }
.fit-qt__row.is-skipped .fit-qt__sets { color: var(--text-faint); font-style: italic; }

.fit-qt .fit-start:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 360px) {
  .fit-qt__fields { grid-template-columns: minmax(0, 1fr); }
}

/* Seit 0.6.0 beta zwei Schritte. Die Auswahl ist dieselbe Liste wie
   „Pick a workout" (Programm-Ordner, Kürzel statt Bild), nur dass jede
   Zeile EIN Knopf ist – hier gibt es nichts zu starten, nur zu wählen.
   Geplantes steht oben mit Akzentkante; der Umschalter trennt Studio
   und Laufen, damit nie beide Listen zugleich dastehen. */

.fitq { gap: 14px; }
.fitq > .fit-note { margin: 0; }
.fitq .fitp-pickhead { margin: 2px 2px 6px; }
.fitq-group + .fitq-group { margin-top: 10px; }
/* Gleich breite Reiter, damit die Namen der Ordner untereinander stehen. */
.fitq .fitp-pickprog__tab { min-width: 76px; }
.fitq-pane { display: grid; gap: 4px; }

.fitq-list { margin: 0; padding: 0; list-style: none; }
.fitq-li { border-bottom: 1px solid rgba(var(--o), .06); }
.fitq-li:last-child { border-bottom: 0; }

.fitq-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.fitq-row--key { grid-template-columns: 50px minmax(0, 1fr) 14px; }
.fitq-row:hover { background: rgba(var(--o), .05); }
.fitq-row:active { background: rgba(var(--o), .1); }
.fitq-row:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }
.fitq-row__go { width: 14px; height: 14px; opacity: .45; transform: rotate(-90deg); }
.fitq-row:hover .fitq-row__go { opacity: .8; }

/* Geplant: dieselbe Zeile, links die Akzentkante – „das hier stand an". */
.fitq-li.is-today > .fitq-row { box-shadow: inset 3px 0 0 var(--accent-deep); padding-inline-start: 12px; }
.fitq-li.is-today .fitq-row__go { opacity: .8; }

/* Im Ordner: die Zeile ist keine Rasterzeile mehr, der Knopf darin ist es. */
.fitp-pickprog__list .fitq-li {
  display: block;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.fitp-pickprog__list .fitq-row { padding-inline-start: 0; padding-inline-end: 0; }

/* Schritt 2: was geloggt wird, als Kopf. */
.fitq-what {
  --cut: 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  clip-path: var(--cut-clip);
}
.fitq-what__name { font-size: 16px; font-weight: 700; color: var(--text-strong); overflow-wrap: anywhere; }
.fitq-what .fitm-row__meta { white-space: normal; }
.fit-qt .fitq-what + .fit-note { margin-top: 0; }

.fit-qt__fields--one { grid-template-columns: minmax(0, 1fr); }

.fitq-cardio { gap: 14px; }
.fitq-cardio .fit-qt__fields { margin-top: 0; }
.fitq-unit { font-style: normal; color: var(--text-subtle); text-transform: none; letter-spacing: 0; }
.fitq-num { font-variant-numeric: tabular-nums; }
.fitq-readout {
  margin: 0;
  text-align: center;
  font: 600 13px/1.4 var(--font-mono);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.fitq-src { margin: 0; text-align: center; }

html[data-eink] .fitq-what { background: #f2f2f2; }
html[data-eink] .fitq-row:hover { background: #f2f2f2; }
html[data-eink] .fitq-li.is-today > .fitq-row { box-shadow: inset 3px 0 0 #1c1c1c; }

@media (prefers-reduced-motion: reduce) {
  .fitq-row { transition: none; }
}

/* In „Pick a workout": Quick neben Start, leiser als Start. */
.fit-pickacts { display: flex; gap: 6px; }
.fitm-textbtn.fit-pickacts__quick {
  --btn-face: transparent;
  color: var(--text-dim);
}


/* ---------- Rangmarken mit Metallverlauf ------------------------------------

   Ein Rang ist eine Auszeichnung, keine Kategorie – flach gefüllt sah
   Gold aus wie ein gelber Aufkleber. Jede Marke trägt jetzt ihr Metall:
   oben links ins Helle gemischt, unten rechts ins Dunkle, dazu ein
   schmaler Glanzstreifen. Dieselbe Richtung (160°) wie der Schein
   der Flächen (.la-shine), damit das Licht überall aus derselben Ecke
   kommt.

   Die Farbe kommt als --tier aus dem Markup, nicht mehr als
   `background:` inline – das hätte den Verlauf überschrieben. Die
   Mitte bleibt die reine Rangfarbe, dort steht die Schrift; der
   dunkle Rand liegt nur in der Ecke, im Innenabstand. */
:is(.fit-rankbadge, .fit-rank__chip, .fitm-rank, .fit-rankup__badge)[style*="--tier"],
.fit-ex__rank::after {
  background-color: var(--tier);
  background-image:
    linear-gradient(115deg,
      transparent 0 36%,
      color-mix(in srgb, var(--rank-glint) 48%, transparent) 47%,
      transparent 58%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--tier) 48%, var(--rank-glint)) 0%,
      var(--tier) 62%,
      color-mix(in srgb, var(--tier) 84%, var(--rank-shade)) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 22% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rank-glint) 45%, transparent);
}

/* Ohne Rangfarbe (der Platzhalter vor dem ersten Satz) bleibt die
   Fläche des Chips, wie sie war. */
.fit-ex__rank:not([style*="--tier"])::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  box-shadow: none;
}

/* Wo ein Rang groß steht – Kopf der Ranks, „How this rank is made",
   der Rangsprung am Ende –, zieht der Glanz einmal darüber. */
:is(.fit-rankbadge, .fit-rankup__badge)[style*="--tier"] {
  animation: fit-rank-sheen 1400ms var(--ease-out) 240ms both;
}
.fit-rankup__badge[style*="--tier"] {
  animation: fit-rank-pop 720ms var(--ease-spring) both,
             fit-rank-sheen 1400ms var(--ease-out) 520ms both;
}

@keyframes fit-rank-sheen {
  from { background-position: 100% 0, 0 0; }
  to   { background-position: 22% 0, 0 0; }
}

/* Die Fortschrittsbalken laufen aus dem Dunkel in die Rangfarbe – der
   Rand rechts ist der Stand, dort ist der Balken am hellsten. */
.fit-rank__fill[style*="--tier"],
.fit-why__bar span[style*="--tier"] {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tier) 35%, transparent),
    var(--tier));
}

@media (prefers-reduced-motion: reduce) {
  :is(.fit-rankbadge, .fit-rankup__badge)[style*="--tier"] { animation: none; }
}
html[data-motion="reduce"] :is(.fit-rankbadge, .fit-rankup__badge)[style*="--tier"] { animation: none; }

/* Auf Papier zählt die Fläche, nicht der Glanz. */
html[data-eink] :is(.fit-rankbadge, .fit-rank__chip, .fitm-rank, .fit-rankup__badge)[style*="--tier"],
html[data-eink] .fit-ex__rank::after {
  background-image: none;
  box-shadow: none;
  animation: none;
}
html[data-eink] .fit-ex__rank::after { box-shadow: inset 0 0 0 1.5px #1c1c1c; background-color: #ffffff; }
html[data-eink] :is(.fit-rank__fill, .fit-why__bar span)[style*="--tier"] { background: var(--tier); }

/* ==========================================================================
   Das Menü einer Übung, Reorder, Session (app/fitness/exmenu.js,
   settings.js › session) – seit 0.4.0 beta
   ========================================================================== */

.fit-exmenu,
.fit-session { display: grid; gap: 10px; }
.fit-session__lead { margin: -4px 0 4px; }
.fit-session__done { width: 100%; margin-top: 4px; }

/* Target: drei kleine Zahlenfelder in einer Reihe. */
.fit-tgt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; }
.fit-tgt__in {
  --cut: 6px;
  width: 56px;
  padding: 8px 6px;
  border: 0;
  border-radius: 0;
  clip-path: var(--cut-clip);
  background: var(--surface-3);
  color: var(--text-strong);
  font: 600 14px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}
.fit-tgt__in::-webkit-outer-spin-button,
.fit-tgt__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fit-tgt__in::placeholder { color: var(--text-subtle); }
.fit-tgt__in:focus-visible { outline: none; background: color-mix(in srgb, var(--accent-deep) 14%, var(--surface-3)); }
.fit-tgt__x { font: 500 max(var(--fs-floor), 11px)/1 var(--font-mono); color: var(--text-subtle); }

/* Sieben Werte RIR: in voller Breite, gleich breit. */
.fit-exmenu .sheet-row--stack .sheet-seg__opt { min-width: 0; padding-inline: 2px; }

/* Superset-Auswahl */
.fit-pairpick { display: grid; gap: 10px; }
.fit-pairpick .fitm-pick { display: flex; align-items: center; gap: 8px; }
.fit-pairpick .fitp-ss { margin-inline-end: 0; }

/* ---------- Reorder ---------------------------------------------------------- */

.fit-reorder { display: grid; gap: 12px; }

.fitro { display: grid; gap: 6px; }

.fitro__row {
  --cut: 8px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 4px 12px 4px 6px;
  clip-path: var(--cut-clip);
  background: var(--surface-2);
  touch-action: pan-y;
}

.fitro__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text-strong);
}
.fitro__sub { font: 500 max(var(--fs-floor), 11px)/1 var(--font-mono); color: var(--text-subtle); white-space: nowrap; }

/* Der Griff ist ein Knopf (Pfeiltasten, Ziehen): eckig, mit Sockel. */
.fitro__grip {
  --depth: 2px;
  --btn-face: var(--surface-3);
  --btn-lift: var(--bg);
  position: relative;
  isolation: isolate;
  width: 30px;
  height: 34px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.fitro__grip::before,
.fitro__grip::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.fitro__grip::before { background: var(--btn-lift); transform: translate(var(--depth), var(--depth)); transition: opacity var(--dur-fast) var(--ease-out); }
.fitro__grip::after { background: var(--btn-face); }
.fitro__grip:active { transform: translate(var(--depth), var(--depth)); cursor: grabbing; }
.fitro__grip:active::before { opacity: 0; }
.fitro__grip:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }
.fitro__grip span { width: 14px; height: 2px; background: var(--text-muted); }

/* Ein Supersatz ist EIN Block: getönte Fläche, Kopf mit eigenem Griff. */
.fitro__group {
  --cut: 10px;
  display: grid;
  gap: 4px;
  padding: 6px;
  clip-path: var(--cut-clip);
  background: color-mix(in srgb, var(--accent-deep) 14%, var(--surface));
}
.fitro__ghead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 2px;
  font: 600 max(var(--fs-floor), 11px)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-app);
}
.fitro__ghead .fitro__grip { height: 28px; }
.fitro__members { display: grid; gap: 4px; }

/* Was gerade gezogen wird (LA.sortable setzt is-dragging / den Klon). */
.fitro .is-dragging { opacity: .35; }

.fitro__live { margin: 0; min-height: 0; font-size: 12px; color: var(--text-subtle); }
.fitro__live:empty { display: none; }

.fitro__acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.fitro__acts > * { margin: 0; }

/* ---------- Workout-Editor: Zeile mit Menü ------------------------------------ */

.fitm-item { grid-template-columns: 20px 30px minmax(0, 1fr) auto auto; }
.fitm-item__text { display: grid; gap: 3px; min-width: 0; }
.fitm-item__name { display: flex; align-items: center; min-width: 0; }
.fitm-item__rx {
  font: 500 max(var(--fs-floor), 11px)/1.3 var(--font-mono);
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fitm-item.is-paired { box-shadow: inset 3px 0 0 var(--accent-deep); padding-inline-start: 6px; }
.fitm-item.is-paired-open { border-bottom-color: transparent; }

/* Änderungen an den Vorgaben in der Karte am Ende. */
.fit-diff__row.is-tune span { color: var(--accent-app); }

html[data-eink] .fitro__group { background: #ffffff; box-shadow: inset 0 0 0 2px #000000; clip-path: none; }
html[data-eink] .fitro__row { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; clip-path: none; }
html[data-eink] .fitro__grip { --btn-face: #ffffff; --btn-lift: #000000; }
html[data-eink] .fitro__grip span { background: #000000; }
html[data-eink] .fitro__ghead { color: #000000; }
html[data-eink] .fit-tgt__in { background: #ffffff; color: #000000; box-shadow: inset 0 0 0 2px #000000; clip-path: none; }
html[data-eink] .fitm-item.is-paired { box-shadow: inset 3px 0 0 #000000; }

/* „+ Add exercise" und „Reorder" teilen sich eine Zeile unter der Liste. */
.fitm-rowacts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.fitm-rowacts > .fitm-addrow:only-child { grid-column: 1 / -1; }
.fitm-rowacts > [data-reorder] { padding-inline: 16px; }
.fitm-item__rx { white-space: normal; }
.fit-exmenu > div { min-width: 0; }
.fit-exmenu .sheet-row__value { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }


/* =========================================================
   Mehr Gewicht – der Hinweis als Weg und sein Fenster
   (app/fitness/weightup.js)

   Der Hinweis über den Sätzen war Text. Jetzt ist er ein Weg: die
   ganze Zeile tippt ins Fenster, rechts sagt eine kleine Marke, was
   dort wartet („Add" / „More"). Die Zeile bleibt eine Fläche, kein
   Knopf mit Sockel – sie ZEIGT etwas und führt hin; der Knopf, der
   etwas TUT, ist „Apply" daneben und „Add …" im Fenster.
   ========================================================= */

.fit-ex__up { padding: 0; }
.fit-ex__stale--act.fit-ex__up { padding-inline-end: 6px; }

.fit-ex__uptext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.fit-ex__uptext:hover { background: color-mix(in srgb, var(--accent-deep) 10%, transparent); }
.fit-ex__uptext:active { background: color-mix(in srgb, var(--accent-deep) 18%, transparent); }
.fit-ex__uptext:focus-visible { outline: 2px solid var(--accent-app); outline-offset: -2px; }

/* Die Marke rechts: still, aber eindeutig ein „hier geht's weiter". */
.fit-ex__upgo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  color: var(--accent-app);
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fit-ex__upgo::after { content: "›"; font-size: 14px; line-height: 1; }

.fit-ex__stale--done {
  border-inline-start-color: var(--line-strong);
  background: rgba(var(--o), .05);
  color: var(--text-dim);
}

/* „Time to add weight" in Stats: Name, Stand, Pfeil. */
.fit-stale__btn .fit-stale__name { flex: 1 1 auto; min-width: 0; }
.fit-stale__next { color: var(--accent-app); font-size: 12px; font-weight: 650; }
.fit-stale__go { flex: none; color: var(--text-faint); font-size: 18px; line-height: 1; }

/* ---------- Das Fenster ---------------------------------------------------- */

.fit-up { display: grid; gap: 18px; }

.fit-up__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fit-up__headtext { display: grid; gap: 2px; min-width: 0; }
.fit-up__headtext b { font-size: 16px; font-weight: 650; color: var(--text); }
.fit-up__headtext span { font-size: 12.5px; color: var(--text-dim); }

.fit-up__label {
  margin: 0 0 8px;
  font-size: max(var(--fs-floor), 11px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Wie viel: die Zahl ist das Größte im Fenster – sie ist die Frage. */
.fit-up__stepper {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 12px;
}
.fit-up__pm { height: 44px; padding: 0; font-size: 22px; font-weight: 500; }
.fit-up__pm:disabled { opacity: .35; pointer-events: none; }
.fit-up__value { display: grid; justify-items: center; gap: 2px; }
.fit-up__value b {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-app);
}
.fit-up__value span { font-size: 12px; color: var(--text-dim); }

/* Schnellwahl: Schalter, also Flächen – kein Sockel. */
.fit-up__chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.fit-up__chip {
  --cut: 6px;
  min-height: 36px;
  padding: 6px 4px;
  border: 0;
  clip-path: var(--cut-clip);
  background: rgba(var(--o), .06);
  color: var(--text-dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fit-up__chip:hover { background: rgba(var(--o), .11); color: var(--text); }
.fit-up__chip.is-on { background: var(--accent-deep); color: var(--ink); }
.fit-up__chip:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

/* Was sich ändert, Satz für Satz: alt leise, neu in der Akzentfarbe. */
.fit-up__plan { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fit-up__ex {
  --cut: 10px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  clip-path: var(--cut-clip);
  background: rgba(var(--o), .04);
}
.fit-up__name { font-size: 13px; font-weight: 650; color: var(--text); }
.fit-up__sets { display: grid; gap: 4px; }
.fit-up__set {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.fit-up__no { min-width: 40px; font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }
.fit-up__from { justify-self: end; color: var(--text-dim); }
.fit-up__arrow { color: var(--text-faint); }
.fit-up__to { color: var(--accent-app); font-weight: 700; }
.fit-up__reps { min-width: 34px; color: var(--text-dim); font-size: 12.5px; }
.fit-up__kept { font-size: max(var(--fs-floor), 11.5px); color: var(--text-faint); }

.fit-up__apply { width: 100%; min-height: 48px; font-size: 15px; font-weight: 650; }

.fit-up__empty {
  --cut: 10px;
  margin: 0;
  padding: 12px;
  clip-path: var(--cut-clip);
  background: rgba(var(--o), .04);
  font-size: 13.5px;
  color: var(--text-dim);
}

/* Zurücksetzen: die zweite Antwort, deutlich leiser als „Add". */
.fit-up__reset { padding-top: 14px; border-top: 1px solid var(--line); }
.fit-up__resetnote { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.fit-up__resetacts { display: flex; flex-wrap: wrap; gap: 10px; }

.fit-up--confirm { gap: 14px; }
.fit-up__names { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--text); }
.fit-up__confirmacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.fit-up__confirmacts .btn3d { min-height: 44px; }

/* =========================================================
   Das Zahlenfeld (app/fitness/keypad.js)

   Steht an der Stelle der Systemtastatur und deckt wie sie auch die
   Tableiste (80) – darunter liegen Sheet (75) und Popups (80), die
   es ohnehin schließen: jeder Druck außerhalb klappt es zu.

   Aufbau: Kopf mit dem Wert (groß in der eigenen Einheit, klein in
   der anderen) und „i", in der Mitte die Ziffern, links davon die
   Schritte nach unten (−), rechts die nach oben (+), unten
   Ausblenden und EIN Akzentknopf „Next". Die Schritte der eigenen
   Einheit tragen den Ton des Bereichs, die der anderen sind still –
   so ist auf einen Blick klar, welche Reihe die „runde" ist.
   ========================================================= */

.fkp {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 85;
  pointer-events: none;
}
.fkp[hidden] { display: none; }

.fkp__panel {
  --cut: 16px;
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 12px calc(10px + var(--safe-bottom));
  display: grid;
  gap: 10px;
  pointer-events: auto;
  background: var(--surface);
  clip-path: var(--cut-clip);
  box-shadow: inset 0 2px 0 rgba(var(--t-fitness-stroke), .9);
  touch-action: manipulation;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.fkp.is-in .fkp__panel { animation: fkp-up 220ms var(--ease-out) both; }
@keyframes fkp-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ---------- Kopf: wo man tippt, was gilt ------------------------------------ */

.fkp__head {
  --cut: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 7px 14px 7px 16px;
  clip-path: var(--cut-clip);
  background: var(--field-bg);
}

.fkp__where { display: grid; gap: 2px; min-width: 0; }
.fkp__label { display: flex; align-items: center; gap: 8px; }

/* „i": klein und still neben dem Feldnamen – eckig mit Sockel wie
   jeder Knopf, die Trefferfläche größer als das Bild (24 px). */
.fkp__info {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--btn-quiet);
  box-shadow: 2px 2px 0 var(--btn-quiet-lift), inset 0 0 0 1px var(--line-strong, rgba(255,255,255,.14));
  color: var(--text-dim);
  font: 700 12px/1 var(--font);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fkp__info::before { content: ""; position: absolute; inset: -6px; }
.fkp__info:hover { color: var(--accent-app); }
.fkp__info:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px var(--line-strong, rgba(255,255,255,.14)); }
.fkp__info:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.fkp__field {
  font-size: max(var(--fs-floor), 10.5px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-app);
}

.fkp__ctx {
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fkp__read {
  display: grid;
  justify-items: end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.fkp__value { display: flex; align-items: baseline; gap: 5px; }
.fkp__value b {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--text);
}
.fkp__value i {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

/* Die andere Einheit: klein, aber lesbar. */
.fkp__alt { font-size: 12px; color: var(--text-dim); }
.fkp__alt:empty { display: none; }

.fkp__read.is-bump .fkp__value b { animation: fkp-bump 260ms var(--ease-out); }
@keyframes fkp-bump {
  0%   { color: var(--accent-app); transform: translateY(-2px); }
  100% { color: var(--text);       transform: none; }
}

/* ---------- Tasten ------------------------------------------------------------ */

.fkp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr) minmax(0, 1fr);
  gap: 10px;
}

.fkp__digits,
.fkp__steps {
  display: grid;
  grid-template-rows: repeat(4, 48px);
  gap: 7px;
}
.fkp__digits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fkp__steps  { grid-template-columns: minmax(0, 1fr); }

/* Zwischen eigener und anderer Einheit eine Fuge – zwei Gruppen,
   nicht vier gleiche Knöpfe. Die Höhe bleibt dieselbe wie die Ziffern. */
.fkp[data-kind="weight"] .fkp__steps { grid-template-rows: 48px 48px 45px 45px; }
.fkp[data-kind="weight"] .fkp__step--alt:nth-child(3) { margin-top: 6px; }

/* Rechter Winkel, Sockel dahinter – derselbe Knopf wie überall im
   Studio. Kein Schnitt: ein geschnittener Knopf wäre ein Sechseck. */
.fkp__key {
  --depth: 2.5px;
  --btn-face: var(--btn-quiet);
  --btn-face-hover: var(--btn-quiet-hover);
  --btn-lift: var(--btn-quiet-lift);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.fkp__key::before,
.fkp__key::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.fkp__key::before {
  background: var(--btn-lift);
  transform: translate(var(--depth), var(--depth));
  transition: opacity var(--dur-fast) var(--ease-out);
}
.fkp__key::after {
  background-image: linear-gradient(var(--btn-face), var(--btn-face));
  background-color: var(--surface);
  transition: background-color var(--dur) var(--ease-out);
}
.fkp__key:hover::after { background-image: linear-gradient(var(--btn-face-hover), var(--btn-face-hover)); }
.fkp__key:active { transform: translate(var(--depth), var(--depth)); }
.fkp__key:active::before { opacity: 0; }
.fkp__key:disabled { color: var(--text-faint); cursor: default; }
.fkp__key:disabled:active { transform: none; }
.fkp__key:disabled:active::before { opacity: 1; }
.fkp__key:focus-visible { outline: 2px solid var(--accent-app); outline-offset: 2px; }

.fkp__key svg { width: 22px; height: 22px; }
.fkp__key--fn { color: var(--text-dim); }

/* Die Schritte: Zahl groß, Einheit darunter klein. */
.fkp__step { gap: 0; line-height: 1.1; }
.fkp__step b { font-size: 16px; font-weight: 600; }
.fkp__step i {
  font-family: var(--font);
  font-style: normal;
  font-size: max(var(--fs-floor), 10px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Die eigene Einheit trägt den Ton des Bereichs … */
.fkp__step:not(.fkp__step--alt) {
  --btn-face: var(--tint-face);
  --btn-face-hover: var(--tint-hover); --btn-lift: var(--tint-lift);
}
.fkp__step:not(.fkp__step--alt) i { color: var(--accent-app); }

/* … die andere bleibt still – und sagt klein, was sie in der eigenen
   Einheit ist (−5 LB · 2.27 kg). */
.fkp__step--alt { line-height: 1; gap: 2px; }
.fkp__step--alt b { font-size: 14px; color: var(--text-dim); }
.fkp__step--alt i { font-size: max(var(--fs-floor), 9px); }
.fkp__step s {
  font-family: var(--font);
  font-size: max(var(--fs-floor), 10px);
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted, var(--text-dim));
  font-variant-numeric: tabular-nums;
}

/* ---------- „i"-Popup ---------------------------------------------------------- */

.fkp-help { gap: 12px; }
.fkp-help__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fkp-help__item {
  display: grid;
  gap: 3px;
  padding-inline-start: 12px;
  box-shadow: inset 2px 0 0 rgba(var(--t-fitness-stroke), .7);
}
.fkp-help__item b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.fkp-help__item span { font-size: 13px; line-height: 1.5; color: var(--text-dim); }
html[data-eink] .fkp-help__item { box-shadow: inset 2px 0 0 #1c1c1c; }
html[data-eink] .fkp__info { background: #ffffff; color: #1c1c1c; box-shadow: 2px 2px 0 #000000, inset 0 0 0 1.5px #1c1c1c; }

/* ---------- Fuß: Next · Ausblenden -------------------------------------------
   Zwei gleich große Knöpfe; Next vorn, das Zuklappen rechts außen, wo der
   Daumen das Feld auch wieder wegnimmt. */

.fkp__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fkp__foot .fkp__key { height: 46px; }

.fkp__next {
  --btn-face: var(--accent-deep);
  --btn-face-hover: var(--accent-app);
  --btn-lift: var(--g-42);
  grid-auto-flow: column;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--on-accent);
}
.fkp__next svg { width: 18px; height: 18px; }
.fkp__next.is-last svg { display: none; }

/* ---------- Das Feld, in das gerade getippt wird ----------------------------- */

.fit-in[data-keypad] { caret-color: var(--accent-app); cursor: pointer; }
.fit-in.is-keyed {
  box-shadow: inset 0 0 0 2px var(--accent-app);
  background: color-mix(in srgb, var(--accent-deep) 14%, var(--field-bg));
}
/* „Die nächste Ziffer ersetzt": der Wert steht wie markiert da. */
.fit-in.is-fresh {
  caret-color: transparent;
  background: color-mix(in srgb, var(--accent-deep) 34%, var(--field-bg));
}

/* Platz unter dem letzten Satz, damit jede Zeile über das Feld
   rollen kann – und die Zeile „Next" geht, solange getippt wird.
   Sie gehört an den Rand der Seite; über einer Tastatur schwebte
   sie mitten im Bild (auch beim Notizfeld, das die Systemtastatur
   behält). */
.fkp-open :is(#fit-run, #fit-log) { padding-bottom: calc(var(--fkp-h, 340px) + 24px); }
.fkp-open .fit-next,
#fit-run:has(.fit-notes:focus) .fit-next { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fkp.is-in .fkp__panel,
  .fkp__read.is-bump .fkp__value b { animation: none; }
}
html[data-motion="reduce"] .fkp.is-in .fkp__panel { animation: none; }

/* ---------- E-ink: Tinte statt Ton ------------------------------------------- */

html[data-eink] .fkp__panel {
  background: var(--eink-paper);
  box-shadow: inset 0 2px 0 #1c1c1c;
}
html[data-eink] .fkp__head { background: #ffffff; box-shadow: inset 0 0 0 1.5px #1c1c1c; }
html[data-eink] .fkp__key {
  --btn-face: #ffffff;
  --btn-face-hover: #ebebeb;
  --btn-lift: #000000;
  color: #1c1c1c;
}
html[data-eink] .fkp__key::after { background-color: var(--eink-paper); box-shadow: inset 0 0 0 1.5px #1c1c1c; }
html[data-eink] .fkp__step i,
html[data-eink] .fkp__step--alt b,
html[data-eink] .fkp__field { color: #1c1c1c; }
html[data-eink] .fkp__next { --btn-face: #1c1c1c; --btn-face-hover: #000000; color: var(--eink-paper); }
html[data-eink] .fit-in.is-keyed { box-shadow: inset 0 0 0 2px #1c1c1c; background: #ffffff; }
html[data-eink] .fit-in.is-fresh { background: #dcdbd9; }
/* Auf Papier trägt der Rand die Rangfolge: eigene Einheit kräftig,
   die andere dünn – Farbe gibt es dort nicht. */
html[data-eink] .fkp__step:not(.fkp__step--alt)::after { box-shadow: inset 0 0 0 2.5px #1c1c1c; }
html[data-eink] .fkp__step--alt::after { box-shadow: inset 0 0 0 1px #1c1c1c; }

/* Am Rechner steht links die Schiene der Reiter; das Zahlenfeld
   gehört unter die Spalte der Sätze, nicht unter die Fenstermitte. */
@media (min-width: 900px) {
  body[data-shell] .fkp { inset-inline-start: var(--rail-w); }
}

/* ---------- Library › Workouts für jede Art (0.6.0 beta) ------------------------------
   Filter, je Art eine Überschrift (Name links, Bestand rechts), Zeilen
   mit EINEM Knopf (▶) und einem leisen ⋯ – der Rest steht im Halte-Menü. */
.fitl-filter { margin: 4px 0 6px; }
.fitl-sec { display: grid; gap: 6px; margin-top: 18px; }
.fitl-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0; padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
  font: 500 max(var(--fs-floor), 10.5px)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-subtle);
}
.fitl-head b { color: var(--c-fitness); font-weight: 600; }
.fitl-head span { margin-inline-start: auto; letter-spacing: .06em; }
.fitl-sub {
  margin: 10px 0 0;
  font: 500 max(var(--fs-floor), 10px)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.fitl-row .fitm-row__open { display: grid; gap: 2px; min-width: 0; text-align: start; padding: 0; }
.fitl-tag {
  display: inline-block; margin-inline-end: 6px; padding: 1px 5px;
  font: 600 max(var(--fs-floor), 9px)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-fitness); background: color-mix(in srgb, var(--c-fitness) 16%, transparent);
  vertical-align: 1px;
}
.fitl-prof { display: flex; align-items: flex-end; gap: 1px; height: 12px; margin-top: 4px; max-width: 180px; }
.fitl-prof i { display: block; min-width: 2px; background: var(--c-fitness-stroke); opacity: .8; }
.fitl-more { opacity: .75; }
.fitl-more:hover, .fitl-more:focus-visible { opacity: 1; }
.fitl-all {
  justify-self: start;
  padding: 6px 0;
  color: var(--c-fitness); font-size: 13.5px; font-weight: 600;
}
.fitl-all:hover { text-decoration: underline; }
#fit-lib-routes { margin-top: 4px; }
html[data-eink] .fitl-tag { background: none; box-shadow: inset 0 0 0 1px #000; color: #000; }
html[data-eink] .fitl-prof i { background: #000; }
.fitl-bar { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.fitl-bar .fitl-filter { margin: 0; flex: 1 1 auto; min-width: 0; }
.fitl-new { flex: none; gap: 6px; }
.fitl-new img { width: 13px; height: 13px; }

/* ---------- Programme für jede Art (0.6.0 beta) ------------------------------------
   Art-Filter über dem Regal, eine Leiter der Wochen (erledigt · jetzt ·
   kommt), die Einheiten einer Woche mit Wochentag und Profil. Kleine
   Felder (< 30 px) sind Rechtecke ohne Schnitt. */
.fitp-kinds { margin: 4px 0 10px; }
.fitp-ladder {
  display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 3px;
  margin: 10px 0 2px;
}
.fitp-ladder__w {
  min-height: 26px; display: grid; place-items: center;
  border: 0; border-radius: 0; padding: 0;
  background: rgba(var(--o), .06);
  font: 700 max(var(--fs-floor), 11px) var(--font-mono); color: var(--text-subtle);
}
.fitp-ladder__w.is-done { background: color-mix(in srgb, var(--c-fitness) 18%, transparent); color: var(--c-fitness); }
.fitp-ladder__w.is-now { background: var(--c-fitness); color: var(--on-accent); }
button.fitp-ladder__w { cursor: pointer; min-height: 32px; }
button.fitp-ladder__w:hover { background: rgba(var(--o), .12); }
button.fitp-ladder__w.is-now:hover { background: var(--c-fitness); }
.fitp-ladder__w.is-picked { box-shadow: inset 0 -3px 0 var(--c-fitness-stroke); color: var(--text-strong); }
.fitp-ladder__w.is-now.is-picked { box-shadow: inset 0 -3px 0 var(--on-accent); }
.fitp-day {
  width: 38px; text-align: center;
  font: 700 max(var(--fs-floor), 10.5px) var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-fitness);
}
.fitp-sessions .fitm-row__name { overflow-wrap: anywhere; }
html[data-eink] .fitp-ladder__w { background: #fff; box-shadow: inset 0 0 0 1px #000; color: #000; }
html[data-eink] .fitp-ladder__w.is-now { background: #000; color: #fff; }
html[data-eink] .fitp-ladder__w.is-done { background: #ccc; color: #000; }
.fitp-stat b.is-long { font-size: 13px; letter-spacing: -.03em; white-space: nowrap; }

/* Formprüfung 0.6.0 beta: die Verlaufszeile hatte links 3 px Rundung. */
.fit-hist__btn { border-radius: 0; }

/* Quick track › Sport (0.6.0 beta): der Weg zu allen Sportarten unter der Liste. */
.fitq-allsports { display: inline-flex; margin-top: 12px; }

/* Night Pond (0.6.0 beta): die getönten Knöpfe dieses Bereichs tragen
   dieselbe Kante wie das „+" auf Home – 1,5 px im vollen Ton, auf der
   Fläche (::after) statt am Element, wo die deckende Fläche sie verdeckte.
   Fläche, Sockel und Schrift kommen aus --tint-* (styles/pond.css). */
.fit-addex::after,
.fitm-textbtn::after,
.fitm-new::after,
.fkp__step:not(.fkp__step--alt)::after { box-shadow: inset 0 0 0 1.5px var(--tint-edge); }
.fit-addex,
.fitm-textbtn,
.fitm-new,
.fkp__step:not(.fkp__step--alt) { color: var(--tint-ink); filter: var(--tint-glow); }

/* ---------- Das „i" am KG-Kopf und hinter dem Namen (loadinfo.js) ------- */

/* Der Kopf der Sätze ist klein und blass; „KG ⓘ" steht darin mittig wie
   die anderen Spalten, und die ganze Beschriftung ist der Knopf. */
.fit-set__kg { display: flex; justify-content: center; }
.fit-set__kg .la-i { margin-block: -6px; }

/* In der Bibliothek: still hinter dem Namen, in der Zeile. Nur der Name
   kürzt sich mit „…" – das „i" steht daneben und fällt nie heraus. */
.fitm-row__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fitm-row__name .la-i { flex: none; }
.fitm-row__name .la-i .la-i__mark { width: 14px; height: 14px; font-size: 10px; }

/* Die Lehre aus dem Editor-Hinweis: der Kopfsatz fett, dann der Rest. */
.fitm-hint b { color: var(--text); font-weight: 600; }