/* ============================================================
   DEIN EINSTIEG — Karten stapeln sich beim Scrollen
   ============================================================ */

.paths {
  background: var(--surface-soft);
}

/* ---------- Kopf ---------- */
.paths__head {
  display: flex;
  align-items: baseline;
  gap: 48px;
  margin-bottom: 32px;
}

.paths__title {
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--ink);
}

/* Wie in der About-Sektion: Sub-Headlines stehen in der
   Text-Schrift, nicht in Poppins. */
.paths__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--ink);
}

.paths__lead {
  max-width: 720px;
  margin-bottom: 32px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  font-weight: var(--fw-medium);
}

/* ---------- Stapel ----------
   Jede Karte klebt beim Scrollen weiter unten als die vorige,
   sodass 32px der darunterliegenden sichtbar bleiben. Weil alle
   Karten Kinder desselben Containers sind, lösen sie sich erst
   am Ende des Stapels — und fahren gemeinsam nach oben raus. */
.stack {
  display: grid;
  gap: 48px;
}

.stack__item {
  position: sticky;
  top: var(--stack-top);
}

.stack__item:nth-child(2) {
  top: calc(var(--stack-top) + 1 * var(--stack-step));
}

.stack__item:nth-child(3) {
  top: calc(var(--stack-top) + 2 * var(--stack-step));
}

.stack__item:nth-child(4) {
  top: calc(var(--stack-top) + 3 * var(--stack-step));
}

.stack__item:nth-child(5) {
  top: calc(var(--stack-top) + 4 * var(--stack-step));
}

/* ---------- Karte ---------- */
.pathcard {
  display: grid;
  grid-template-columns: 1fr var(--pathcard-media);
  column-gap: 48px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.pathcard__body {
  padding-left: 32px;
}

.pathcard__tag {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--brand);
}

.pathcard__title {
  margin-bottom: 24px;
  font-size: 40px;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--ink);
}

.pathcard__text {
  max-width: 500px;
  margin-bottom: 32px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.pathcard__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--ink);
}

.pathcard__note .icon {
  width: 15px;
  height: 15px;
  color: var(--brand);
}

/* `relative` trägt die KI-Kennzeichnung unten rechts im Bild. */
.pathcard__media {
  position: relative;
  margin: 0;
}

.pathcard__media picture img {
  width: var(--pathcard-media);
  height: 290px;
  object-fit: cover;
  border-radius: var(--radius);
}

.paths__cta {
  margin-top: 32px;
}