/* --- Prozess-Schritt (40:25) --------------------------------------------
   Nummer im Quadrat mit 2-px-Ecke, nicht im Kreis (Signaturmerkmal Feld).
   Keine Verbindungslinie: die Reihenfolge steht in der Nummer. */

.epi-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: epi-step;
}

/* Genau fuenf Schritte: eine Zeile statt 3 + 2, sonst wirkt der letzte
   Schritt wie ein Nachtrag. */
@media screen and (min-width: 1024px) {
    .epi-steps:has(> .epi-step:nth-child(5):last-child) {
        grid-template-columns: repeat(5, 1fr);
    }
}

.epi-step {
    display: grid;
    gap: var(--wp--preset--spacing--md);
    justify-items: start;
    /* Kuerzere Schritte werden auf Zeilenhoehe gestreckt; ohne start verteilt
       das Grid den Rest auf Nummer, Titel und Text, und die Titel springen. */
    align-content: start;
    counter-increment: epi-step;
}

/* Die Nummer kommt aus dem CSS-Zaehler: im Markup stehen damit nur
   Ueberschrift und Absatz, beide im Editor bearbeitbar. */
.epi-step::before {
    content: counter(epi-step);
    display: grid;
    place-items: center;
    inline-size: var(--touch-min);
    block-size: var(--touch-min);
    border: 2px solid var(--color-accent-dark-wcag);
    border-radius: 2px;
    font-family: var(--font-handlee);
    font-size: 1.75rem;
    line-height: 30px;
    color: var(--color-accent-dark-wcag);
}

.epi-step__title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

.epi-step__body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}