/* Zähler zurücksetzen */
.sd__steps_grid {
    counter-reset: step;
}

/* Allgemeine Styles für die Schritte */
.sd__steps_step {
    position: relative; /* Ermöglicht die absolute Positionierung von Pseudo-Elementen innerhalb des Schritts */
    padding-top: 5rem; /* Platz für den Kreis oben einfügen */
}

/* Kreis mit der Zahl über jedem Schritt */
.sd__steps_step::before {
    content: counter(step);
    counter-increment: step;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 2.5rem;
    background-color: #400C37;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    z-index: 1;
}

@media (min-width: 768px) {
    .sd__steps_step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 1.25rem; /* Vertikale Mitte des Kreises */
        left: 50%;
        width: calc(100% + 1rem);
        height: 2px;
        background-color: #ccc; /* Farbe der Linie */
        z-index: 0;
    }
}