/* ==========================================================================
   „Drei Schritte bis zum Freudensprung“: versetzte Schritte, verbunden durch
   Sprungbögen; der letzte, große Bogen landet beim Einzug.
   ========================================================================== */

.leap__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-top: 100px; /* Platz für die Bögen über den Karten */
}
/* Kompakter als die übrigen Abschnitte, damit alles auf einen Bildschirm passt */
.leap { padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); }
.leap .section__head { margin-bottom: var(--space-5); }

.leap__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: leap;
}

.leap__step {
  position: relative;
  z-index: 1;
  counter-increment: leap;
  align-self: start;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-m);
  background: var(--nebel);
  box-shadow: 0 1px 0 rgb(36 33 28 / 0.05), 0 16px 32px -22px rgb(36 33 28 / 0.45);
}
/* Versatz: tief, hoch, tief */
.leap__step:nth-child(1),
.leap__step:nth-child(3) { margin-top: 80px; }

.leap__step::before {
  content: counter(leap);
  position: absolute;
  top: -1.25rem;
  left: var(--space-5);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--wiese);
  color: #fff;
  font: 700 1.15rem/1 var(--font-display);
}
.leap__step h3 { margin-bottom: var(--space-3); }
.leap__step p { margin: 0; }

/* Ziel: das Signet, auf dem der große Bogen landet */
.leap__goal {
  position: relative;
  z-index: 1;
  align-self: start;
  margin-top: 20px;
  text-align: center;
}
.leap__signet {
  width: 84px;
  height: auto;
  margin: 0 auto var(--space-3);
  color: var(--wiese);
}
.leap__goal h3 { margin-bottom: var(--space-3); }
.leap__goal p { margin: 0 auto; max-width: 18rem; }

/* Bögen (von leap.js gezeichnet) */
.leap__arcs {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.leap__arc {
  fill: none;
  stroke: var(--wiese);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
}
.leap__arc--final {
  stroke: var(--torf);
  stroke-width: 3.5;
  stroke-dasharray: 1 10;
}
.leap__dot { fill: var(--wiese); opacity: 0; transition: opacity 300ms var(--ease); }
.leap__dot--final { fill: var(--torf); }
.leap__dot.is-on { opacity: 1; }
.leap__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 12;
  stroke-linecap: round;
}

/* Schmal: untereinander, abwechselnd links und rechts eingerückt */
@media (max-width: 960px) {
  .leap__stage {
    grid-template-columns: 1fr;
    gap: 72px;
    padding-top: var(--space-5);
  }
  .leap__steps {
    grid-template-columns: 1fr;
    gap: 72px;
  }
  .leap__step:nth-child(1),
  .leap__step:nth-child(3) { margin-top: 0; margin-right: 14%; }
  .leap__step:nth-child(2) { margin-left: 14%; }
  .leap__goal { margin-top: 0; }
}

/* Desktop: Abschnitt darf bildschirmhoch sein, Elemente über die ganze Breite verteilt */
@media (min-width: 961px) {
  .leap .section__head { margin-bottom: 0; }
  .leap__stage,
  .leap__steps { gap: clamp(2rem, 5vw, 6rem); }
  .leap__stage { padding-top: clamp(80px, 13vh, 125px); }
  .leap__step,
  .leap__goal { justify-self: center; width: 100%; max-width: 21rem; }
  .leap__step:nth-child(1),
  .leap__step:nth-child(3) { margin-top: clamp(60px, 11vh, 105px); }
  .leap__goal { margin-top: 25px; }
}