#body {
  max-width: 960px;
  margin-inline: auto;
  color: var(--text);
  font-family: var(--font-system);
}

.body-screen {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) calc(var(--space-5) * 4);
}

.body-root-header,
.body-panel-header,
.body-card-head,
.body-checkin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.body-root-header h1,
.body-panel-header h2,
.body-card-head h3,
.body-panel-header p,
.body-card-head p {
  margin: 0;
}

.body-root-header h1 {
  font: var(--font-weight-medium) var(--font-size-tab-root) / 1.2 var(--font-system);
}

.body-panel-header h2,
.body-card-head h3 {
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
}

.body-panel-header p,
.body-card-head p {
  margin-top: var(--space-1);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-icon-button {
  display: inline-grid;
  width: var(--control-height);
  height: var(--control-height);
  flex: 0 0 var(--control-height);
  place-items: center;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
}

.body-icon-button svg,
.body-insight-link svg,
.body-regeneration-link svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

.body-icon-button:focus-visible,
.body-tabs button:focus-visible,
.body-period-tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: var(--space-1);
}

.body-tabs,
.body-period-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.body-tabs::-webkit-scrollbar,
.body-period-tabs::-webkit-scrollbar {
  display: none;
}

/* Jede Pille mindestens so breit wie ihr Wort samt Innenabstand (vorher stiess «Regeneration» bei 320 px an den Rand
   der Pille); der Rest der Zeile verteilt sich gleichmässig. */
.body-tabs .ui-pill {
  min-width: max-content;
  flex: 1 1 auto;
  padding-inline: var(--space-2);
  font-size: var(--font-size-label);
}

/* Unter 360 px weniger Innenabstand: Mit breiter Schrift war die Reihe bei 320 px 6 px breiter als der Bildschirm und
   blätterte seitlich. Die Pillen wachsen weiter auf die ganze Zeile, mit gewöhnlicher Schrift sieht die Reihe gleich aus. */
@media (max-width: 359px) {
  .body-tabs {
    gap: var(--space-1);
  }

  .body-tabs .ui-pill {
    padding-inline: var(--space-1);
  }
}

.body-panel {
  display: grid;
  gap: var(--space-4);
}

.body-panel[hidden] {
  display: none;
}

.body-header-actions,
.body-chart-controls,
.body-checkin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.body-header-actions button,
.body-checkin-actions button {
  min-height: var(--control-height);
}

.body-screen .secondary,
.body-primary-action {
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-list) / 1 var(--font-system);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  box-shadow: none;
}

.body-primary-action {
  color: var(--card);
  background: var(--accent);
  border-color: var(--accent);
}

.body-overview-grid,
.body-insight-grid,
.body-regeneration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.body-metric-card {
  min-width: 0;
}

.body-metric-card > span,
.body-metric-card > small,
.body-insight-card > span,
.body-insight-card > small,
.body-regeneration-card > span,
.body-regeneration-card > small {
  display: block;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-metric-card > strong,
.body-insight-card > strong,
.body-regeneration-card > strong {
  display: block;
  margin: var(--space-1) 0;
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.3 var(--font-system);
  font-variant-numeric: tabular-nums;
}

/* Heldenzahl in Fortschritt (Stand 28.09.2026, docs/DESIGN-SYSTEM.md «Heldenzahl»): das zuletzt gemessene Gewicht in
   Heldengrösse über die ganze Breite; darunter Körperfett und BMI nebeneinander, das Zielgewicht über die übrige Breite
   (bei zwei Spalten eine eigene Zeile, bei vier Spalten die zweite Hälfte). */
.body-overview-grid > .body-metric-card:first-child {
  grid-column: 1 / -1;
}

.body-metric-card > strong.ui-hero-number {
  font: var(--font-weight-medium) var(--font-size-hero) / 1.2 var(--font-system);
  font-variant-numeric: tabular-nums;
}

.body-overview-grid > #bodyTargetTile {
  grid-column: span 2;
}

.body-progress-main > .ui-card,
.body-progress-side > .ui-card,
.body-progress-main > .body-two-col {
  margin: 0;
}

.body-progress-card,
.body-progress-main > .ui-card,
.body-progress-side > .ui-card {
  display: grid;
  gap: var(--space-3);
}

.body-chart-controls .ui-pill {
  border: 1px solid var(--border);
}

.body-chart-controls .is-active,
.body-chart-controls .active {
  color: var(--card);
  background: var(--accent);
  border-color: var(--accent);
}

.body-chart-toolbar {
  max-width: 240px;
}

/* Keine Karte in der Karte (Stand 27.09.2026): Die Diagrammfläche ist durch eine Trennlinie von der Auswahl darüber
   abgesetzt, nicht durch einen eigenen Rahmen. */
.body-chart {
  min-height: 280px;
  padding: var(--space-3) 0 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
}

.body-chart svg {
  display: block;
  width: 100%;
  height: 280px;
}

.body-chart-empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  padding: var(--space-5);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-error) / 1.4 var(--font-system);
  text-align: center;
}

.body-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.body-two-col > .ui-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

/* Eine ausgeblendete Karte («Zielverlauf» ohne Zielgewicht) bleibt ausgeblendet: display: grid oben würde [hidden]
   sonst überschreiben und eine leere Karte zeigen (Stand 28.09.2026). */
.body-two-col > .ui-card[hidden] {
  display: none;
}

.body-measurement-list,
.body-history {
  display: grid;
}

.body-measurement-row,
.body-history-item {
  display: grid;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.body-measurement-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.body-measurement-row span,
.body-history-item .meta,
.body-history-item .type,
.body-source {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-measurement-row strong,
.body-history-item .date {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-list) / 1.4 var(--font-system);
}

.body-source {
  display: block;
}

.body-history-item {
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto;
}

.body-progress-row {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.body-progress-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.body-progress-bar {
  height: var(--progress-height);
  overflow: hidden;
  background: var(--border);
  border-radius: var(--radius-progress);
}

.body-progress-bar > div {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.body-checkin-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding-block: var(--space-2);
  cursor: pointer;
  list-style: none;
}

.body-checkin-details summary::-webkit-details-marker {
  display: none;
}

.body-checkin-details summary strong,
.body-checkin-details summary small {
  display: block;
}

.body-checkin-details summary strong,
.body-checkin-head strong {
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
}

.body-checkin-details summary small {
  margin-top: var(--space-1);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-checkin-inner {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.body-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.body-checkin-actions .ui-primary-button {
  width: auto;
}

/* Wochen-Check-in: Hinweis, solange Vorschläge aus den letzten Werten im Formular stehen (js/12-body.js). */
.body-checkin-suggest {
  margin: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-checkin-suggest[hidden] {
  display: none;
}

/* Wochen-Check-in mit Coach (Stand 28.09.2026): offene Anfrage mit «Diese Woche nicht» und der Satz unter «Schmerz». */
.body-checkin-request {
  display: grid;
  gap: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.body-checkin-request[hidden],
.body-scale__coach[hidden] {
  display: none;
}

.body-checkin-request .coach-link-button {
  line-height: 1.4;
}

.body-checkin-request p {
  margin: 0;
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.body-scale__coach {
  margin: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-checkin-details[open] .body-chevron {
  transform: rotate(180deg);
}

.body-empty,
.empty {
  margin: 0;
  padding: var(--space-3) 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.body-period-tabs .ui-pill {
  min-width: 56px;
}

.body-insight-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.body-insight-summary h3,
.body-insight-summary p,
.body-insight-method h3,
.body-insight-method p {
  margin: 0;
}

.body-insight-summary h3 {
  margin-top: var(--space-1);
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
}

.body-insight-summary p,
.body-insight-method p {
  margin-top: var(--space-2);
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.5 var(--font-system);
}

.body-insight-count {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-hero) / 1 var(--font-system);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.body-insight-count small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-insight-grid {
  margin-top: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.body-insight-card,
.body-regeneration-card {
  display: grid;
  align-content: start;
}

.body-insight-link,
.body-regeneration-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) 0 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
}

.body-insight-method {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.body-insight-method h3 {
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
}

.body-insight-method .secondary {
  justify-self: start;
}

.body-regeneration-grid {
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-5) * 6), 1fr));
}

@media (max-width: 760px) {
  .body-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .body-insight-grid,
  .body-regeneration-grid,
  .body-two-col {
    grid-template-columns: 1fr;
  }

  .body-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .body-panel-header {
    align-items: flex-start;
  }

  .body-progress-panel > .body-panel-header {
    display: grid;
  }

  .body-history-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .body-tabs {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }

  .body-form-grid,
  .body-overview-grid {
    grid-template-columns: 1fr;
  }

  .body-header-actions button,
  .body-checkin-actions button {
    width: 100%;
  }
}

/* Trendgewicht: Werteliste unter den Kennzahlen, Rate in Bordeaux mit Pfeil. */
.body-trend-card {
  display: grid;
  padding-block: 0;
}

.body-trend-card[hidden] {
  display: none;
}

/* Die Karte hat oben und unten keinen Innenabstand; ihn geben die Zeilen, damit eine umbrechende Erklärung nicht am
   Kartenrand oder an der Trennlinie klebt. */
.body-trend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: calc(var(--control-height) + var(--space-2));
  padding-block: var(--space-2);
}

.body-trend-row + .body-trend-row {
  border-top: 1px solid var(--border);
}

.body-trend-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.body-trend-row strong {
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.3 var(--font-system);
}

.body-trend-row small {
  color: var(--text-3);
  font-size: var(--font-size-label);
  line-height: 1.4;
}

.body-trend-row b {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1 var(--font-system);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.body-trend-row b.body-trend-rate {
  color: var(--accent);
  font-size: var(--font-size-list);
}

.body-chart-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--text-3);
  font-size: var(--font-size-label);
}

.body-chart-legend__dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.body-chart-legend__dash {
  width: 16px;
  height: 0;
  margin-left: var(--space-2);
  border-top: 2px dashed var(--accent-mid);
}

/* Wochen-Check-in: Befinden als Skalen 1 bis 5 (freiwillig) und «Notiz nur für mich». Tippflächen 44 px. */
.body-scales {
  display: grid;
  gap: var(--space-3);
}

.body-scales__title {
  margin: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

.body-scale {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.body-scale legend {
  margin-bottom: var(--space-1);
  padding: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-scale__options {
  display: grid;
  grid-template-columns: repeat(5, minmax(var(--control-height), 1fr));
  gap: var(--space-1);
}

.body-scale__options label {
  position: relative;
}

.body-scale__options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.body-scale__options span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1 var(--font-system);
  font-variant-numeric: tabular-nums;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
}

.body-scale__options input:checked + span {
  color: var(--card);
  background: var(--accent);
  border-color: var(--accent);
}

.body-scale__options input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.body-scale__ends {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--space-4);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-scale__clear {
  min-height: var(--control-height);
  padding: 0 var(--space-2);
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1 var(--font-system);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}

.body-scale__clear[hidden],
.body-private-note[hidden] {
  display: none;
}

.body-private-note {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: var(--control-height);
  cursor: pointer;
}

.body-private-note input {
  width: var(--icon-size);
  height: var(--icon-size);
  margin: 0;
  accent-color: var(--text);
}

.body-private-note span {
  display: grid;
}

.body-private-note strong {
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.body-private-note small,
.body-history-scales {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-history-scales {
  display: block;
}

.body-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Eigene Normen (Body → Regeneration, Schlaf, Cardio; js/12-body-norms.js): der übliche Bereich als ruhige Zeile
   unter dem Wert und als neutrales graues Band im Verlauf. Keine Farbe für «über» oder «unter», keine Bewertung. */
.body-regeneration-card > .body-regeneration-norm,
.sleep-value-row .norm-line,
.cardio-value-row span .norm-line {
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-regeneration-card > .body-regeneration-norm {
  margin-top: var(--space-1);
}

/* Noch ohne üblichen Bereich (Stand 28.09.2026): nur gezählt, an der Stelle der späteren Zeile, 11 px in --text-3,
   ohne Balken und ohne Farbe; ebenso beim Trendgewicht, solange die Veränderung pro Woche fehlt. */
.body-regeneration-card > .norm-progress,
.sleep-value-row .norm-progress,
.cardio-value-row span .norm-progress,
.body-trend-progress {
  display: block;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
}

.body-regeneration-card > .norm-progress {
  margin-top: var(--space-1);
}

.body-trend-progress {
  margin: 0;
  padding-block: var(--space-2);
  border-top: 1px solid var(--border);
}

.body-trend-progress + .body-trend-row {
  border-top: 1px solid var(--border);
}

/* «Gewicht zurückhaltend zeigen» (Stand 28.09.2026): Platzhalter statt Kacheln, Trend und Verlauf, mit «Werte anzeigen». */
.body-weight-hidden {
  display: grid;
  gap: var(--space-1);
}

.body-weight-hidden[hidden],
.body-overview-grid[hidden],
.body-progress-card[hidden],
.body-two-col > .ui-card[hidden] {
  display: none;
}

.body-weight-hidden p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.body-weight-hidden strong {
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.3 var(--font-system);
}

.body-weight-hidden small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

/* Zielverlauf mit Schutzregel: nur «Gespeichert», darunter der Satz ruhig in --text-2 (ohne Warnzeichen). */
.body-goal-note {
  margin: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-weight-sheet__saved {
  margin: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.norm-band {
  fill: var(--border);
}

.norm-chart {
  display: block;
  width: 100%;
  height: auto;
}

.norm-chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.norm-chart__dot {
  fill: var(--accent);
}

.norm-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.norm-legend__band {
  flex: none;
  width: var(--space-4);
  height: var(--space-2);
  background: var(--border);
  border-radius: var(--radius-progress);
}

/* Wochenstatistik in Insights: der Pfeil einer Veränderung in --accent, der Betrag ohne Vorzeichen (Stand 27.09.2026).
   Inline, damit der Pfeil auf der Zeile der Zahl bleibt (die Zeile setzt ihre Spans sonst als Raster). */
.body-change-arrow,
.body-week-row .body-change-arrow {
  display: inline;
  color: var(--accent);
}

/* Insights, Zeitraum (Stand 28.09.2026): unter den Pills die Daten des gewählten Zeitraums; «Von–bis» öffnet das Blatt
   «Eigener Zeitraum». Auf schmalen Geräten teilen sich die fünf Pills die Breite, nichts wird abgeschnitten. */
.body-insights-range {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
}

.body-insights-range:empty {
  display: none;
}

@media (max-width: 420px) {
  .body-period-tabs .ui-pill {
    min-width: 0;
    flex: 1 1 auto;
    padding-inline: var(--space-2);
  }
}

.body-range-sheet__body {
  display: grid;
  gap: var(--space-3);
}

.body-range-sheet__hint {
  margin: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-range-sheet__body .ui-error-text {
  margin-top: calc(var(--space-2) * -1);
}

/* Insights, «Zusammenhänge» (js/45-insight-relations.js): nur Text in --text, --text-2 und --text-3, keine Farbe für
   höher oder tiefer, Zeilen durch Trennlinien gegliedert (keine Karte in der Karte). */
.body-relations {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
}

.body-relations > .ui-skeleton {
  --skeleton-height: calc(var(--control-height) * 3);
}

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

.body-relations__item {
  display: grid;
  gap: 2px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.body-relations__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.body-relations__item p,
.body-relations__empty {
  margin: 0;
}

.body-relations__lead,
.body-relations__empty {
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.body-relations__value {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
}

.body-relations__detail {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
}

/* Am Computer (ab 1024 px, Stand 28.09.2026): Body nutzt die ganze Breite des Hauptbereichs. Insights zeigt die Karten
   in zwei Spalten, Zeile für Zeile in derselben Reihenfolge wie auf dem Handy; Kacheln und «Was ist Volumen?» über
   beide Spalten. Fortschritt: links Kennzahlen, Trendgewicht, Verlauf, aktuelle Daten und Zielverlauf, rechts
   Wochen-Check-in und Historie (im Code zuerst die linke, dann die rechte Spalte). Darunter eine Spalte wie bisher. */
@media (min-width: 1024px) {
  #body {
    max-width: none;
  }

  #bodyInsightsContent {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    align-items: start;
  }

  #bodyInsightsContent > * {
    margin: 0;
  }

  #bodyInsightsContent > .body-insight-grid,
  #bodyInsightsContent > .ui-empty-state,
  #bodyInsightsContent > .glossary-ask {
    grid-column: 1 / -1;
  }

  .body-progress-panel {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: var(--space-5);
    align-items: start;
  }

  .body-progress-panel > .body-panel-header,
  .body-progress-panel > .body-progress-actions {
    grid-column: 1 / -1;
  }

  .body-progress-actions {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: var(--space-5);
  }

  .body-progress-main .body-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .body-progress-side .body-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.body-progress-main,
.body-progress-side {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

/* Bericht «Seit Beginn» und «Letzte 3 Monate» (js/50-body-report.js, Stand 28.09.2026): Einstieg als Menüzeile (Icon,
   Titel, Beschreibung, Chevron; 52 px) in Fortschritt und Insights, das Blatt mit zwei Pills und Wertelisten für Körper
   und Training. Veränderungen mit Pfeil in --accent (.body-change-arrow), sonst nur Textfarben. */
.body-report-link {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr) var(--icon-size);
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-1) var(--space-3);
  color: var(--text);
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.body-report-link > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-block: var(--space-1);
}

.body-report-link strong {
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-value) / 1.3 var(--font-system);
}

.body-report-link small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.body-report-link svg {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--text-2);
}

.body-report-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.body-report-sheet__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0;
  background: var(--card);
}

.body-report-sheet__body {
  display: grid;
  gap: var(--space-3);
}

.body-report {
  display: grid;
  gap: var(--space-4);
}

.body-report__section {
  display: grid;
  min-width: 0;
}

.body-report__heading {
  margin: 0 0 var(--space-1);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

.body-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

.body-report-row > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.body-report-row strong {
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.body-report-row small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
}

.body-report-row__value {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.body-report-row__value b {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.3 var(--font-system);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.body-report-row__change {
  white-space: nowrap;
}

.body-report__empty,
.body-report__hint {
  margin: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.body-report__hint {
  color: var(--text-3);
  font-size: var(--font-size-label);
}

@media (min-width: 1024px) {
  #bodyInsightsContent > .body-report-link {
    grid-column: 1 / -1;
  }
}

/* Taille-Hüfte-Verhältnis in «Aktuelle Daten» (Stand 28.09.2026): der Pfeil der Veränderung in --accent, auch in der
   Zeile, die ihre Spans sonst in --text-3 setzt. */
.body-measurement-row .body-change-arrow {
  color: var(--accent);
}

/* Eigene Messwerte und markierte Tage (js/49-custom-metrics.js, Stand 28.09.2026): Liste wie die Verlaufsliste (Name,
   darunter Datum und Uhrzeit, rechts der letzte Wert und der Chevron), ruhiger Stand des Abgleichs, zwei Knöpfe mit
   Rahmen. Blätter mit Kopf und «Schliessen»; der Verlauf in Bildschirmpixeln (Achsen 11 px), markierte Tage als
   gestrichelte Linie in --accent-mid. Keine Farbe für Werte, keine Bereiche. */
.cm-card {
  display: grid;
  gap: var(--space-3);
}

.cm-list,
.cm-entries {
  display: grid;
}

.cm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--icon-size);
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) 0;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.cm-row.cm-entry {
  grid-template-columns: minmax(0, 1fr) var(--icon-size);
}

.cm-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cm-row strong {
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  overflow-wrap: break-word;
}

.cm-row small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.cm-entry__note {
  white-space: pre-line;
}

.cm-row b {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-list) / 1.4 var(--font-system);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cm-row svg {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--text-3);
}

.cm-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cm-empty,
.cm-hint,
.cm-status {
  margin: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.cm-hint,
.cm-status {
  color: var(--text-3);
  font-size: var(--font-size-label);
}

.cm-status[hidden] {
  display: none;
}

.cm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.cm-actions > button {
  min-width: 0;
}

.cm-sheet__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0;
  background: var(--card);
}

.cm-sheet__header .ui-bottom-sheet__title {
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.cm-sheet__body,
.cm-form,
[data-cm-detail],
[data-cm-tags-body] {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.cm-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.cm-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.cm-heading {
  margin: var(--space-2) 0 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

.cm-chart {
  min-width: 0;
  overflow: hidden;
}

.cm-chart__svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.cm-chart__axis {
  font-variant-numeric: tabular-nums;
}

.cm-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cm-suggestions .ui-pill {
  min-height: var(--control-height);
}

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

.cm-tag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
}

.cm-tag span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cm-tag strong {
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  overflow-wrap: break-word;
}

.cm-tag small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

/* Markierte Tage im Verlauf von Body → Fortschritt (js/12-body.js): Linie im Diagramm, darunter als Text. */
.body-chart-tags {
  margin: var(--space-2) 0 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}