/* Was wir bauen (Spezifikation 7.3): Überschrift links, nummerierte Textzeilen rechts, ab 900 px.
   Darunter eine Wisch-Reihe. Keine Karten mit Symbolen, nur dünne Linien und viel Weißraum. */

.wk-leistungen__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2.5rem;
}

.wk-leistungen__kopf .wk-h2 {
  max-width: 10ch;
}

/* Einleitung: Endzustand ist voller Text; die Wörter dimmen nur, solange die Scroll-Animation läuft */
.wk-leistungen__einleitung {
  margin-top: 1.2em;
  max-width: 24rem;
  font-size: var(--fs-lead);
  line-height: 1.38;
  color: var(--fg);
  text-wrap: pretty;
}

/* ── Einträge ──────────────────────────────────────────────────────────── */

.wk-leistung__nr {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.43;
  color: var(--fg-muted);
}
.wk-leistung__text {
  margin-top: 0.55rem;
  color: var(--fg-muted);
}

.wk-leistungen__umzug {
  max-width: 34rem;
  color: var(--fg-muted);
}
.wk-leistungen__umzug strong {
  font-weight: 600;
  color: var(--fg);
}

/* Handy: Wisch-Reihe über die volle Breite, Karten mit dünner Linie oben */
.wk-leistungen__wisch {
  margin-inline: calc(-1 * var(--gutter));
}
.wk-leistungen__wisch .wk-leistung {
  height: 100%;
  padding-top: 1.25rem;
  padding-right: 0.5rem;
  border-top: 1px solid var(--line-strong);
}
.wk-leistungen__wisch .wk-leistung__nr {
  margin-bottom: 2rem;
}

/* Desktop: zwei Spalten, Liste rechts */
@media (min-width: 900px) {
  .wk-leistungen__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 7vw, 7rem);
    row-gap: 0;
  }
  .wk-leistungen__kopf {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--header-h) + 3rem);
    align-self: start;
  }
  .wk-leistungen__liste {
    grid-column: 2;
    grid-row: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    /* die erste Linie steht auf Höhe der Überschrift */
    margin-top: 0.6rem;
  }
  .wk-leistungen__zeile {
    border-top: 1px solid var(--line);
  }
  .wk-leistungen__zeile:last-child {
    border-bottom: 1px solid var(--line);
  }
  .wk-leistungen__zeile .wk-leistung {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
    padding-block: 2.1rem 2.35rem;
  }
  .wk-leistungen__zeile .wk-leistung__text {
    max-width: 32rem;
  }
  .wk-leistungen__umzug {
    grid-column: 2;
    grid-row: 2;
    padding-top: 2.25rem;
    padding-left: 4.5rem;
  }
}

/* ── Wort für Wort aufhellen: nur mit Scroll-Animationen und ohne reduzierte Bewegung ───────────
   Alle Wörter hängen an der Ansichts-Zeitleiste des Absatzes, jedes Wort bekommt einen etwas
   späteren Abschnitt. Gedimmt 0,18 → voll; nur opacity, wie in Spezifikation 8.4 vorgesehen. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wk-leistungen__einleitung {
      view-timeline: --wk-leistungen-einleitung block;
    }
    .wk-leistungen__wort {
      animation: wk-leistungen-wort linear both;
      animation-timeline: --wk-leistungen-einleitung;
      animation-range: cover calc(12% + var(--i) * 24% / var(--n)) cover calc(24% + var(--i) * 24% / var(--n));
    }
  }
}
@keyframes wk-leistungen-wort {
  from {
    opacity: 0.18;
  }
  to {
    opacity: 1;
  }
}