/* Formular in Schritten (inc/formulare.php, assets/js/formular-schritte.js).
   Schrittliste als ruhige Textzeile: aktueller Schritt fett und unterstrichen,
   erledigte mit Haken — keine Kreise, keine Pillen. */

.wir-schritte { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0 0 1.4rem; padding: 0 0 .9rem; list-style: none; counter-reset: wir-schritt; border-bottom: 1px solid var(--wp--preset--color--linie); font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-leise); scroll-margin-top: 7rem; }
.wir-schritte li { counter-increment: wir-schritt; }
.wir-schritte li::before { content: counter(wir-schritt) ". "; font-variant-numeric: tabular-nums; }
.wir-schritte li.ist-erledigt { color: var(--wp--preset--color--text); }
.wir-schritte li.ist-erledigt::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: .3em; vertical-align: -.15em; background: var(--wp--preset--color--primaer); -webkit-mask: var(--wir-symbol-haken) center / contain no-repeat; mask: var(--wir-symbol-haken) center / contain no-repeat; }
.wir-schritte li[aria-current="step"] { color: var(--wp--preset--color--wald); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }

.wir-schritt__kopf { margin: 0 0 1.1rem; font: 600 var(--wp--preset--font-size--titel-3)/1.25 var(--wp--preset--font-family--titel); color: var(--wp--preset--color--wald); }
.wir-schritt__kopf:focus-visible { outline: 3px solid var(--wir-fokus-ring); outline-offset: 4px; }

/* Ohne JavaScript gibt es keine Schritt-Überschriften; mit JS ist immer nur ein Schritt sichtbar */
.wir-schritt[hidden] { display: none; }

.wir-schritt__knoepfe, .wir-schritte-aktiv .wir-form-absenden { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.4rem; }
.wir-schritt__knoepfe:has(> :only-child) { justify-content: flex-end; }
.wir-schritte-aktiv .wir-form-absenden > p { margin: 0; }

@media (max-width: 599px) {
	.wir-schritte { gap: .3rem 1.1rem; }
	.wir-schritt__knoepfe .wir-knopf, .wir-schritte-aktiv .wir-form-absenden .wir-knopf { flex: 1 1 auto; }
}