/* DriveSolution – Ablauf / Schritte: Ghost-Nummern + durchlaufende Verbindungslinie
   Abstände in em (Projektvorgabe). */

.ds-steps{list-style:none;margin:.5em 0 0;padding:0;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2.25em}
.ds-step{position:relative}

.ds-step__num{display:block;font-size:clamp(3rem,5.5vw,4.6rem);margin-bottom:.375em}
.ds-step__dot{position:relative;display:block;width:16px;height:16px;border-radius:50%;
  background:var(--ds-accent);box-shadow:0 0 0 5px rgba(225,29,42,.14);margin:.5em 0 1.625em}
/* Horizontale Linie von diesem Punkt zum nächsten (rot -> verblassend). */
.ds-step:not(:last-child) .ds-step__dot::after{content:"";position:absolute;top:50%;left:.5em;transform:translateY(-50%);
  width:calc(100% + 2.25em);height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ds-accent),var(--ds-border-2))}
/* Letzter Schritt: kurzer auslaufender Strich, damit der Punkt nicht "nackt" wirkt (gleiches Motiv). */
.ds-step:last-child .ds-step__dot::after{content:"";position:absolute;top:50%;left:.5em;transform:translateY(-50%);
  width:2.6em;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ds-accent),transparent)}

.ds-step__title{font-family:"Archivo",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.3rem;
  line-height:1.06;letter-spacing:-.01em;margin-bottom:.54em}
.ds-step__text{color:var(--ds-muted);font-size:1rem;line-height:1.6;max-width:34ch}

.ds-steps__cta{margin-top:3.375em;text-align:center}

/* Mobil: vertikale Timeline (Punkt-Rail links, Inhalt rechts). */
@media(max-width:780px){
  .ds-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
  .ds-step{display:grid;grid-template-columns:24px 1fr;column-gap:1.25em;padding-bottom:2.375em}
  .ds-step__num{grid-column:2;font-size:2.8rem;margin-bottom:.06em}
  .ds-step__dot{grid-column:1;grid-row:1;justify-self:center;margin:.875em 0 0}
  .ds-step__dot::after{display:none}
  .ds-step:not(:last-child)::after{content:"";position:absolute;left:.6875em;top:2.125em;bottom:-.375em;width:2px;
    background:linear-gradient(180deg,var(--ds-accent),var(--ds-border-2))}
  .ds-step__title,.ds-step__text{grid-column:2}
  .ds-step__text{max-width:none}
  .ds-steps__cta{text-align:left}
}