/* Kapitel 02: Das Plotdesk System. Kapitelkopf mittig, dann die gepinnte Szene: links die Aussage mit
   den drei Beweisen (klebt mit), rechts die Grafik «Wirkungstiefe» — eine Linien-Illustration je Stufe,
   die Treppe aus vier Balken, deren Füllstand am Scrollfortschritt hängt, und die Wirkung als Zeile.
   Unter 900 px und ohne Bewegung ist die Szene entpinnt und die Treppe wird zu vier Zeilen mit kleinem
   Balken und der Wirkung als eigener Spalte. */

/* ---------- Kapitelkopf ---------- */
/* Beide Zeilen der Headline (908 und 1012 px in .t-h2) brauchen mehr als den Satzspiegel eines Absatzes. */
.system-head {
  max-width: 68rem;
}

.system-head .t-lead {
  max-width: var(--measure);
  margin-inline: auto;
}

/* ---------- Bühne ---------- */
.system-scene {
  margin-top: clamp(40px, 5vw, 72px);
}

.system-layout {
  align-content: center;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--s3)) 0 var(--s5);
}

/* ---------- Links: die Aussage ---------- */
/* Spalten explizit: .span-N und .start-N aus dem Grundgerüst überschreiben einander (span setzt das Ende
   auf auto, start überschreibt den Anfang), zusammen ergäben sie eine einzige Spalte. */
.system-shift {
  grid-column: 1 / span 5;
  align-self: center;
}

.system-shift > * + * {
  margin-top: var(--s3);
}

/* In fünf Spalten trägt .t-h2 «Unternehmen arbeitet.» nicht auf einer Zeile (627 px bei 60 px); eine Stufe
   darunter stehen beide Sätze in je zwei Zeilen, ohne Wortwaise. */
.system-shift .t-h2 {
  font-size: clamp(30px, 3.2vw, 46px);
}

.system-shift .t-body {
  max-width: 34rem;
}

.system-proof {
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.system-proof li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 14px 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.system-proof li:last-child {
  border-bottom: 1px solid var(--line);
}

.system-proof svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--text-2);
}

.system-nowrap {
  white-space: nowrap;
}

/* ---------- Rechts: Wirkungstiefe ---------- */
.system-depth {
  --track: clamp(104px, 21vh, 192px);
  --illustration: clamp(140px, 26vh, 232px);
  grid-column: 7 / span 6;
  align-self: center;
  margin: 0;
}

/* Die vier Illustrationen liegen übereinander; app.js schaltet sie über data-step um. */
.system-illustrations {
  display: grid;
  height: var(--illustration);
}

.system-illustration {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.system-stroke {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.system-stroke--soft {
  stroke: var(--line-strong);
}

.system-stroke--accent {
  stroke: var(--accent);
}

/* Die Mint-Linie jeder Illustration zeichnet sich, sobald ihre Stufe aktiv ist (pathLength="1"). */
.system-illustration [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 650ms var(--ease-out) 120ms;
}

.system-illustration.is-active [data-draw] {
  stroke-dashoffset: 0;
}

.system-label {
  fill: var(--text-3);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-anchor: middle;
}

/* Die Treppe: vier Balken auf vier Spalten, Haarlinien-Rechtecke auf einer gemeinsamen Grundlinie. */
.system-stairs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.system-stairs::after {
  content: "";
  position: absolute;
  top: var(--track);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line-strong);
}

.system-bar {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--track) auto;
}

.system-bar__track {
  position: relative;
  display: block;
  align-self: end;
  height: calc(var(--track) * (var(--n, 0) + 1) / 4);
  overflow: hidden;
  border: 1px solid var(--line-strong);
}

/* Der Balken füllt sich im ersten Teil seiner Stufe: der Anteil des Scrollfortschritts, der auf diese
   Stufe entfällt, mal 2,5 und auf 0..1 begrenzt. Frühere Stufen sind damit voll, spätere leer. */
.system-bar__fill {
  position: absolute;
  inset: 0;
  background: var(--mint);
  transform: scaleY(clamp(0, (var(--progress, 0) * 4 - var(--n, 0)) * 2.5, 1));
  transform-origin: bottom;
  /* Der Scrollfortschritt steuert die Füllung direkt, ohne nachlaufende CSS-Transition. */
  transition: none;
}

.system-bar__label {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding-top: 14px;
  color: var(--text-3);
  transition: color 500ms ease;
}

.system-bar__label b {
  font-size: 12px;
  letter-spacing: 0.06em;
  transition: color 500ms ease;
}

.system-bar__label strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.system-bar__label small {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-3);
  transition: color 500ms ease;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.system-bar.is-past .system-bar__label {
  color: var(--text-2);
}

.system-bar.is-active .system-bar__label {
  color: var(--text);
}

.system-bar.is-active .system-bar__label b {
  color: var(--accent);
}

.system-bar.is-active .system-bar__label small {
  color: var(--text-2);
}

/* Die Wirkung steht je Zeile für Hilfstechnik bereit; sichtbar wird sie erst in der Zeilenfassung. */
.system-bar__outcome {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Die Wirkung der aktiven Stufe: Zähler in Mint, Ergebnis als H3, beides blendet je Stufe über. */
.system-outcome {
  margin: var(--s4) 0 0;
  border-top: 1px solid var(--line);
  padding-top: var(--s2);
}

.system-outcome__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.system-outcome__head b {
  color: var(--accent);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.system-outcome__total {
  color: var(--text-3);
}

.system-outcome__stack {
  display: inline-grid;
  vertical-align: top;
}

.system-outcome__stack > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  font-style: normal;
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
}

.system-outcome__stack > .is-past {
  transform: translateY(-10px);
}

.system-outcome__stack > .is-active {
  opacity: 1;
  transform: none;
}

.system-outcome__value {
  margin: 10px 0 0;
  color: var(--text);
}

.system-outcome__value .system-outcome__stack {
  display: grid;
}

/* ---------- Abschluss ---------- */
.system-close {
  margin-top: var(--s12);
}

.system-close__row {
  align-items: center;
  padding-top: var(--s4);
}

.system-close__row .t-h3 {
  grid-column: 1 / span 6;
  margin: 0;
  max-width: 20ch;
}

.system-close__actions {
  grid-column: 7 / span 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

/* ---------- Flache Viewports (Laptops): alles muss unter dem Header in eine Bühne passen. ---------- */
@media (min-width: 901px) and (max-height: 840px) {
  .system-shift .t-h2 {
    font-size: clamp(30px, 3.3vw, 46px);
  }

  .system-shift > * + * {
    margin-top: var(--s2);
  }

  .system-proof {
    margin-top: var(--s3);
  }

  .system-proof li {
    padding: 10px 0;
  }

  .system-depth {
    --track: clamp(96px, 18vh, 160px);
    --illustration: clamp(120px, 22vh, 200px);
  }

  .system-stairs,
  .system-outcome {
    margin-top: var(--s3);
  }
}

/* ---------- Zeilenfassung: unter 900 px und ohne Bewegung ---------- */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .system-scene {
    height: auto;
  }

  .system-stage {
    position: static;
    height: auto;
    overflow: visible;
  }

  .system-layout {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .system-depth {
    margin-top: var(--s8);
  }

  .system-illustrations {
    display: none;
  }

  .system-stairs {
    display: block;
    margin: 0;
    border-top: 1px solid var(--line-strong);
  }

  .system-stairs::after {
    display: none;
  }

  /* Eine Zeile je Stufe: Nummer, Name und Untertitel links, die Wirkung rechts, der Balken darunter. */
  .system-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--gutter);
    row-gap: 14px;
    align-items: start;
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
  }

  .system-bar__label,
  .system-bar.is-past .system-bar__label,
  .system-bar.is-active .system-bar__label {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
    color: var(--text);
  }

  .system-bar__label b,
  .system-bar.is-active .system-bar__label b {
    color: var(--text-3);
  }

  .system-bar__label small,
  .system-bar.is-active .system-bar__label small {
    color: var(--text-2);
  }

  .system-bar__track {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: auto;
    width: calc((var(--n, 0) + 1) * 25%);
    height: 8px;
  }

  .system-bar__fill {
    transform: none;
    transition: none;
  }

  .system-bar__outcome {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-align: right;
    white-space: normal;
  }

  .system-outcome {
    display: none;
  }

  .system-close {
    margin-top: var(--s10);
  }

  .system-close__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  /* «KI-Implementierungen.» misst in .t-h2 355 px, der Satzspiegel 350: eine Stufe kleiner. */
  .system-head .t-h2 {
    font-size: 32px;
  }

  .system-bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 12px;
  }

  .system-bar__track {
    grid-column: 1;
    grid-row: 2;
  }

  .system-bar__outcome {
    grid-column: 1;
    grid-row: 3;
    font-size: 18px;
    text-align: left;
  }

  .system-close__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .system-illustration [data-draw] {
    stroke-dashoffset: 0;
    transition: none;
  }

  .system-bar__label,
  .system-bar__label b,
  .system-bar__label small {
    transition: none;
  }
}