/* Startseiten-Abschnitt „So einfach geht's" — Zeitstrahl mit 5 Schritten.
   Kopf (Eyebrow/Titel/Fließtext) und Fläche kommen aus impark-sektionen.css;
   hier steht nur der Zeitstrahl. Fläche dieses Abschnitts ist WEISS. */

.impark-ab__list {
  position: relative;
  max-width: 520px;
  margin: 56px auto 0;
  /* Der Strich läuft oben und unten über den ersten/letzten Kreis hinaus. */
  padding: 70px 0 54px;
  list-style: none;
}

/* Durchgehender Strich, exakt durch die Kreismitte. */
.impark-ab__list::before {
  content: "";
  position: absolute;
  inset-inline-start: 21px;   /* = halbe Kreisbreite */
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ipk-line-strong, rgba(65, 65, 65, .34));
}

.impark-ab__step {
  position: relative;
  padding-inline-start: 68px; /* Kreis (42) + Abstand (26) */
  min-height: 42px;
}

.impark-ab__step + .impark-ab__step { margin-top: 42px; }

/* Nummernkreis: weiß gefüllt, damit der Strich dahinter unterbrochen wirkt. */
.impark-ab__num {
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ipk-line-strong, rgba(65, 65, 65, .34));
  border-radius: 50%;
  background: var(--ipk-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ipk-orange, #ffa000);
}

.impark-ab__title {
  margin: 0 0 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ipk-blue, #2b7ee2);
}

.impark-ab__text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.28;
  color: var(--ipk-muted, #646464);
}

@media (max-width: 900px) {
  .impark-ab__list { margin-top: 40px; padding: 48px 0; max-width: none; }
}

@media (max-width: 560px) {
  .impark-ab__step { padding-inline-start: 56px; }
  .impark-ab__step + .impark-ab__step { margin-top: 32px; }
}