/* trizeps.css — nur was das Design-System nicht mitbringt.
   Keine Werte von Hand: alles ueber var(--dt-*). Praefix tz-. */

/* ---------- Buehne: Zeichnung und Bedienung ---------- */
.tz-stage { display: grid; gap: var(--dt-space-lg); align-items: start; }
@media (min-width: 800px) {
  .tz-stage--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.tz-panel { display: flex; flex-direction: column; gap: var(--dt-space-lg); }

/* ---------- Zeichnung ---------- */
.tz-svg { display: block; width: 100%; height: auto; color: var(--dt-fg); }
.tz-floor       { stroke: currentColor; stroke-width: 2; opacity: .5; }
.tz-floor-hatch { stroke: currentColor; stroke-width: 1; opacity: .2; }

.tz-link  { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.tz-link--thin   { stroke-width: 4; }
/* Das Bodenglied ist ein Glied wie jedes andere — genau das ist der Punkt.
   Es wird nur duenner gezeichnet, damit es den Boden nicht verdeckt. */
.tz-link--ground { stroke-width: 4; }
.tz-head { fill: none; stroke: currentColor; stroke-width: 4; }
.tz-ext  { stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .45; }
.tz-arc  { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .55; }
.tz-lab  {
  font-family: var(--dt-font-mono); font-size: 13px;
  fill: var(--dt-fg-muted); font-variant-numeric: tabular-nums;
}
/* Gelenke: gefuellt in der Flaechenfarbe, damit die Glieder darunter enden.
   Das angetriebene Gelenk traegt als einziges den Akzent — es haengt am Regler. */
.tz-joint { fill: var(--dt-surface); stroke: currentColor; stroke-width: 3; }
.tz-joint--driven { fill: var(--dt-link); stroke: var(--dt-link); }

/* ---------- Regler ---------- */
.tz-control { display: flex; flex-direction: column; gap: var(--dt-space-xxs); }
.tz-control > label {
  font-size: var(--dt-caption-size); font-weight: var(--dt-weight-semi);
  line-height: var(--dt-caption-strong-lh); letter-spacing: var(--dt-caption-ls);
  color: var(--dt-fg-muted);
}
.tz-slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: var(--dt-touch-target);
  background: transparent; cursor: pointer; margin: 0;
}
.tz-slider:focus-visible {
  outline: 2px solid var(--dt-primary-focus); outline-offset: 2px;
  border-radius: var(--dt-radius-pill);
}
.tz-slider::-webkit-slider-runnable-track {
  height: 4px; background: var(--dt-line); border-radius: var(--dt-radius-pill);
}
.tz-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px;
  border: 0; border-radius: var(--dt-radius-full); background: var(--dt-link);
}
.tz-slider::-moz-range-track {
  height: 4px; background: var(--dt-line); border-radius: var(--dt-radius-pill);
}
.tz-slider::-moz-range-thumb {
  width: 26px; height: 26px; border: 0;
  border-radius: var(--dt-radius-full); background: var(--dt-link);
}
.tz-ends {
  display: flex; justify-content: space-between;
  font-size: var(--dt-fine-print-size); line-height: var(--dt-caption-lh);
  letter-spacing: var(--dt-fine-print-ls); color: var(--dt-fg-muted);
}

/* ---------- Ablesewerte ---------- */
.tz-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dt-space-lg); }
.tz-readout--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tz-num { font-variant-numeric: tabular-nums; }

/* ---------- Momentbalken ---------- */
.tz-bars { display: flex; flex-direction: column; gap: var(--dt-space-md); }
.tz-bar__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--dt-space-sm); margin-bottom: var(--dt-space-xxs);
}
.tz-bar__name {
  font-size: var(--dt-caption-size); font-weight: var(--dt-weight-semi);
  line-height: var(--dt-caption-strong-lh); letter-spacing: var(--dt-caption-ls);
}
.tz-bar__sub { display: block; font-weight: var(--dt-weight-regular); color: var(--dt-fg-muted); }
.tz-bar__val {
  font-family: var(--dt-font-mono); font-size: var(--dt-caption-size);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tz-track { position: relative; height: 14px; }
.tz-bar {
  height: 14px; background: var(--dt-line);
  border-radius: var(--dt-radius-pill); overflow: hidden;
}
.tz-bar > i {
  display: block; height: 100%; width: 0;
  background: currentColor; transition: width .18s ease;
}
.tz-bar--accent > i { background: var(--dt-link); }
/* Was eine menschliche Schulter aufbringt: 50-90 Nm auf einer Skala bis 120.
   Schraffur statt zweiter Farbe — das Muster traegt die Bedeutung. */
.tz-band {
  position: absolute; inset-block: 0; left: 41.67%; width: 33.33%;
  pointer-events: none; border-radius: var(--dt-radius-xs); opacity: .5;
  border-inline: 1px solid currentColor;
  background: repeating-linear-gradient(45deg,
    currentColor 0 1px, transparent 1px 5px);
}
.tz-scale {
  display: flex; justify-content: space-between; margin-top: var(--dt-space-xxs);
  font-size: var(--dt-fine-print-size); line-height: var(--dt-caption-lh);
  letter-spacing: var(--dt-fine-print-ls); color: var(--dt-fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Muskelwahl ---------- */
.tz-choice { display: flex; flex-wrap: wrap; gap: var(--dt-space-xs); }

/* ---------- Kleinkram ---------- */
.tz-note {
  font-size: var(--dt-caption-size); line-height: var(--dt-caption-lh);
  letter-spacing: var(--dt-caption-ls); color: var(--dt-fg-muted);
}
.tz-gruebler {
  font-family: var(--dt-font-mono); font-size: var(--dt-body-size);
  line-height: var(--dt-body-lh);
}
.tz-steps {
  display: inline-flex; align-items: center; gap: var(--dt-space-xs);
  font-size: var(--dt-caption-size); font-weight: var(--dt-weight-semi);
  letter-spacing: var(--dt-caption-ls); color: var(--dt-fg-muted);
  margin-bottom: var(--dt-space-sm);
}
.tz-steps > b {
  font-family: var(--dt-font-mono); font-weight: var(--dt-weight-semi);
  border: 1px solid var(--dt-line); border-radius: var(--dt-radius-full);
  width: 26px; height: 26px; display: grid; place-content: center;
  color: var(--dt-fg);
}
.tz-chain {
  font-family: var(--dt-font-mono); font-size: var(--dt-caption-size);
  line-height: 1.9; letter-spacing: var(--dt-caption-ls); color: var(--dt-fg-muted);
}
.tz-chain b { color: var(--dt-fg); font-weight: var(--dt-weight-semi); }

@media (prefers-reduced-motion: reduce) {
  .tz-bar > i { transition: none; }
}

/* Auslauf des Rumpfes in Stufe 1: die Kette ist hier offen, nicht abgeschnitten. */
.tz-tail {
  stroke: currentColor; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 0.1 11; opacity: .45;
}
.tz-lab--hint { font-family: var(--dt-font-text); font-style: italic; }

/* ---------- Varianten: eine Seite, zwei Modelle ---------- */
body[data-variante="schulter"] [data-var="brust"],
body[data-variante="brust"]    [data-var="schulter"] { display: none; }

/* Rumpfquerschnitt in der Frontalansicht — Brustkorb von den Füßen her gesehen. */
.tz-torso { fill: none; stroke: currentColor; stroke-width: 5; }

.tz-subnav__choice { margin-left: auto; display: flex; gap: var(--dt-space-xs); }
@media (max-width: 620px) {
  .dt-subnav { height: auto; padding-block: var(--dt-space-xs); }
  .dt-subnav__inner { flex-wrap: wrap; }
  .tz-subnav__choice { margin-left: 0; width: 100%; }
}