/**
 * Codewerk Forms — Variante „Fortschritt“
 *
 * Greift nur auf Formularen mit der Klasse `cod-form--variante`; die setzt das
 * JavaScript. cod-forms selbst bleibt unberührt.
 *
 * Farben kommen aus den Custom Properties von cod-forms. Dadurch passt sich
 * der Balken von allein an: im Popup grün auf Dunkelblau, inline blau auf
 * Weiß — ohne zweite Regelmenge.
 */

/* Der Nummern-Breadcrumb weicht dem Balken. Er bleibt im DOM, weil cod-forms
   ihn für die Schritt-Markierung mitführt. */
.cod-form--variante .cod-form__steps-nav {
	display: none;
}

/* ── Navigation zurückholen ───────────────────────────────────────────────
   cod-forms setzt `cod-form--single-step`, sobald `data-cod-initial-step > 0`
   ist, und blendet Weiter und Zurück per `!important` aus. Die Annahme
   dahinter — „ein Schritt übersprungen, also bleibt nur einer" — trifft auf
   das zweistufige Bestandsformular zu, nicht auf diese Variante mit fünf
   Schritten. Ohne die Regel hier sieht der Besucher ein Namensfeld ohne
   Weiter-Knopf.

   `:not([hidden])` ist entscheidend: Welche der drei Schaltflächen gerade
   gilt, steuert die Step-Engine weiterhin selbst über das hidden-Attribut. */
.cod-form--variante.cod-form--single-step .cod-form__nav:not([hidden]) {
	display: inline-flex !important;
}

@media (max-width: 767px) {
	.cod-form--variante.cod-form--single-step .cod-form__nav:not([hidden]) {
		width:           100%;
		justify-content: center;
	}
}

/* ── Fortschrittsbalken ───────────────────────────────────────────────────
   Die Zeile trägt nur den Schrittzähler. Den Titel rendert cod-forms ohnehin
   als Überschrift direkt darunter — zweimal brauchte ihn niemand, und rechts
   kollidierte er mit der Schließen-Schaltfläche des Popups. */

.cod-form__progress {
	margin-bottom: 22px;
}

.cod-form__progress[hidden] {
	display: none;
}

.cod-form__progress-meta {
	margin-bottom: 8px;
	font-size:     .8125rem;
	color:         var(--cod-color-muted);
}

.cod-form__progress-step {
	font-variant-numeric: tabular-nums;
}

.cod-form__progress-track {
	position:      relative;
	height:        4px;
	border-radius: 999px;
	background:    var(--cod-color-border);
	overflow:      hidden;
}

.cod-form__progress-bar {
	position:      absolute;
	inset:         0 auto 0 0;
	width:         0;
	border-radius: 999px;
	background:    var(--cod-color-accent);
	transition:    width .35s cubic-bezier(.4, 0, .2, 1);
	/* Auf Schritt 1 sind 0 % erledigt. Ein völlig leerer Balken sieht aber
	   defekt aus, deshalb ein sichtbarer Anfang — rein optisch, der über
	   aria-valuenow gemeldete Wert bleibt der echte. */
	min-width:     10px;
}

@media (prefers-reduced-motion: reduce) {
	.cod-form__progress-bar {
		transition: none;
	}
}

/* ── Nutzenversprechen über den Feldern ───────────────────────────────── */

.cod-form__promise {
	margin: 0 0 20px;
}

.cod-form__promise-title {
	margin:      0 0 6px;
	font-size:   1.25rem;
	font-weight: 600;
	line-height: 1.25;
	color:       var(--cod-color-text);
}

.cod-form__promise-text {
	margin:    0;
	font-size: .9375rem;
	color:     var(--cod-color-muted);
}

/* ── Ein Feld pro Schritt ─────────────────────────────────────────────── */

/* Ein einzelnes Feld wirkt im sonst leeren Schritt verloren. Etwas Luft
   darunter hält den Abstand zu den Schaltflächen gleich, egal wie viele
   Felder ein Schritt trägt. */
.cod-form--variante .cod-form__step {
	min-height: 96px;
}