/* ============ FORMULARE — GESTALTUNG IM SHOP-CI (seit 2.18.0) ============
   Wiederverwendbares Modul für alle Formulare des Shops. Die Hülle
   `.mb-form` legt inc/formulare.php um jede Ninja-Forms- und CF7-Ausgabe,
   das Verhalten steckt in assets/js/formular.js (novalidate, Fehlerfokus,
   eigene Auswahl/Dateiablage, Fortschritt, Erfolgszustand).

   Lädt nach dem gesamten Design-System (main.css / shop-listing.css).
   Ninja Forms bringt eigene Styles mit (display-opinions-light.css,
   Spezifität bis 0,3,1 und !important an Fehler-/OK-Rahmen) — deshalb
   beginnt hier jede Regel mit `.mb-form` und überschreibt die Rahmenfarben
   dort, wo das Plugin !important setzt.

   Formensprache (docs/design-konzept-2026-05-27.md): Industrial-Editorial,
   Eingaben weiß mit 1-px-Linie und 2-px-Radius, Karten eckig, Schatten nur
   als harter Versatz, Slope-Signatur an Abschnittsnummern und Absenden,
   Mono für Nummern und Metaangaben.

   Muster:
     Hülle ............... .mb-form [--nf | --cf7] [.is-gesendet]
     Abschnittskopf ...... .mb-form-abschnitt (Ninja-Forms-HTML-Feld mit h2)
     Feld ................ Label über Eingabe, 52 px hoch, Fokus = rote Unterkante
     Fehler .............. .nf-error / .mb-form-fehler (eigene Meldung)
     Dateiablage ......... .mb-form-ablage [.is-ziehen]
     Auswahl ............. .mb-select (mb-select.js)
     Seitenspalte ........ .mb-form-seite > __fortschritt, __block
*/

.mb-form {
	--mb-form-feld-h: 52px;
	--mb-form-linie: var(--mb-rule-strong);
	--mb-form-fokus: var(--mb-ink-900);
	font-family: var(--mb-font-body);
	color: var(--mb-ink-900);
	counter-reset: mb-abschnitt;
	max-width: 820px;
}

/* ---------- Pflichtfeld-Hinweis ---------- */
.mb-form .nf-form-fields-required {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mb-ink-600);
	margin: 0 0 var(--mb-space-5);
}
.mb-form .ninja-forms-req-symbol,
.mb-form .nf-form-fields-required .ninja-forms-req-symbol { color: var(--mb-red); }

/* ---------- Raster (Ninja Forms Zeilen/Zellen) ---------- */
.mb-form .nf-form-content { padding: 0; max-width: none; }
.mb-form .nf-row { display: block; margin: 0; }
.mb-form nf-cells { display: flex; gap: var(--mb-space-4); width: 100%; }
.mb-form .nf-cell { padding: 0 !important; margin: 0; min-width: 0; flex: 1 1 0; width: auto !important; }
.mb-form .nf-field-container { margin-bottom: var(--mb-space-4); }
.mb-form .nf-field-container .nf-field-label { margin: 0 0 var(--mb-space-1); }
.mb-form .nf-field-container.label-hidden .nf-field-label { display: none; }

/* ---------- Abschnittskopf: rote Mono-Nummer im Schrägschnitt, Linie ---------- */
.mb-form .mb-form-abschnitt {
	counter-increment: mb-abschnitt;
	margin-top: var(--mb-space-6);
	border-top: 2px solid var(--mb-ink-900);
	padding-top: var(--mb-space-4);
}
.mb-form .nf-row:first-child.mb-form-abschnitt,
.mb-form .nf-form-content .nf-row.mb-form-abschnitt:first-child { margin-top: 0; }
.mb-form .mb-form-abschnitt .nf-field-container { margin-bottom: var(--mb-space-3); }
.mb-form .mb-form-abschnitt .nf-field-label { display: none; }
.mb-form .mb-form-abschnitt .nf-field-element {
	display: flex;
	align-items: baseline;
	gap: var(--mb-space-3);
}
.mb-form .mb-form-abschnitt .nf-field-element::before {
	content: counter(mb-abschnitt, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-small);
	font-weight: var(--mb-weight-medium);
	line-height: 1;
	color: #fff;
	background: var(--mb-red);
	padding: 7px 12px 7px 10px;
	clip-path: var(--mb-slope-sm);
	transform: translateY(-4px);
}
.mb-form .mb-form-abschnitt h2,
.mb-form .mb-form-abschnitt h3 {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: var(--mb-fs-h4);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	scroll-margin-top: 124px;
}

/* Hinweis-HTML-Felder ohne Überschrift (z. B. Hinweise zum Dateiupload) */
.mb-form .html-container:not(.mb-form-abschnitt .html-container) .nf-field-label { display: none; }
.mb-form .html-container .nf-field-element p { margin: 0 0 var(--mb-space-1); color: var(--mb-ink-700); }
.mb-form .html-container .nf-field-element ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--mb-ink-700);
}
.mb-form .html-container .nf-field-element li {
	position: relative;
	padding-left: var(--mb-space-4);
}
.mb-form .html-container .nf-field-element li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.72em;
	width: 10px;
	height: 2px;
	background: var(--mb-red);
}

/* ---------- Beschriftung ---------- */
.mb-form label,
.mb-form .nf-field-label label {
	display: block;
	font-family: var(--mb-font-body);
	font-weight: var(--mb-weight-medium);
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--mb-ink-800);
	margin: 0;
}

/* ---------- Eingaben ---------- */
.mb-form .nf-form-content input.ninja-forms-field:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.mb-form .nf-form-content textarea.ninja-forms-field,
.mb-form--cf7 input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mb-form--cf7 textarea,
.mb-form input.mb-form-eingabe,
.mb-form textarea.mb-form-eingabe {
	display: block;
	width: 100%;
	height: var(--mb-form-feld-h);
	padding: 0 var(--mb-space-3);
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-body);
	line-height: 1.4;
	color: var(--mb-ink-900);
	background: var(--mb-card);
	border: 1px solid var(--mb-form-linie);
	border-radius: var(--mb-radius-input);
	box-shadow: inset 0 0 0 0 transparent;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--mb-dur-fast) var(--mb-ease-cut),
		box-shadow var(--mb-dur-fast) var(--mb-ease-cut),
		background-color var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-form .nf-form-content textarea.ninja-forms-field,
.mb-form--cf7 textarea {
	height: auto;
	min-height: 168px;
	padding: var(--mb-space-2) var(--mb-space-3);
	resize: vertical;
}
.mb-form .nf-form-content input.ninja-forms-field:hover,
.mb-form .nf-form-content textarea.ninja-forms-field:hover,
.mb-form--cf7 input:hover,
.mb-form--cf7 textarea:hover {
	border-color: var(--mb-ink-600);
}
/* Fokus: dunkle Linie + rote Unterkante (kein Browser-Fokusring) */
.mb-form .nf-form-content input.ninja-forms-field:not([type="submit"]):not([type="button"]):focus,
.mb-form .nf-form-content textarea.ninja-forms-field:focus,
.mb-form--cf7 input:not([type="submit"]):focus,
.mb-form--cf7 textarea:focus {
	border-color: var(--mb-form-fokus) !important;
	box-shadow: inset 0 -3px 0 0 var(--mb-red);
	background: var(--mb-card);
}
.mb-form ::placeholder { color: var(--mb-neutral-400); opacity: 1; }

/* Plugin-Zustandssymbole (FontAwesome-Häkchen/-Ausrufezeichen) aus */
.mb-form .nf-pass.field-wrap .nf-field-element::after,
.mb-form .nf-error.field-wrap .nf-field-element::after { display: none; content: none; }
.mb-form .nf-pass .ninja-forms-field { border-color: var(--mb-form-linie) !important; }

/* Gültig ausgefüllte Pflichtfelder: kleines Häkchen im Feld */
.mb-form .nf-pass.field-wrap .nf-field-element { position: relative; }
.mb-form .nf-pass.field-wrap:not(.textarea-wrap):not(.file_upload-wrap):not(.submit-wrap) .nf-field-element::before {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background-color: var(--mb-success);
	-webkit-mask: url('../icons/check-bold.svg') center / contain no-repeat;
	mask: url('../icons/check-bold.svg') center / contain no-repeat;
	pointer-events: none;
}
.mb-form .nf-pass.field-wrap:not(.textarea-wrap) .ninja-forms-field { padding-right: 44px !important; }

/* ---------- Fehler ---------- */
.mb-form .nf-error .ninja-forms-field:not([type="submit"]),
.mb-form [aria-invalid="true"] {
	border-color: var(--mb-error) !important;
	background-color: #FFF7F8 !important;
}
.mb-form .nf-error .ninja-forms-field:focus { box-shadow: inset 0 -3px 0 0 var(--mb-error); }
.mb-form .nf-after-field .nf-error-msg,
.mb-form .mb-form-fehler,
.mb-form--cf7 .wpcf7-not-valid-tip {
	display: flex;
	align-items: flex-start;
	gap: var(--mb-space-1);
	margin: var(--mb-space-1) 0 0;
	font-size: var(--mb-fs-small);
	font-weight: var(--mb-weight-medium);
	line-height: 1.35;
	color: var(--mb-error);
}
.mb-form .nf-after-field .nf-error-msg::before,
.mb-form .mb-form-fehler::before,
.mb-form--cf7 .wpcf7-not-valid-tip::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 0.2em;
	background-color: currentColor;
	-webkit-mask: url('../icons/x-bold.svg') center / contain no-repeat;
	mask: url('../icons/x-bold.svg') center / contain no-repeat;
}
.mb-form .nf-error-wrap:empty { display: none; }

/* Sammelmeldung unter dem Formular (Ninja Forms: .nf-form-errors, CF7: Antwort) */
.mb-form .nf-form-errors .nf-error-msg,
.mb-form .mb-form-zusammenfassung:not(:empty),
.mb-form--cf7 .wpcf7-response-output {
	margin: var(--mb-space-4) 0 0;
	padding: var(--mb-space-3) var(--mb-space-4);
	border: 0;
	border-left: 4px solid var(--mb-error);
	background: #FFF7F8;
	color: var(--mb-ink-900);
	font-size: var(--mb-fs-small);
	font-weight: var(--mb-weight-medium);
}
.mb-form .mb-form-zusammenfassung:empty { display: none; }
.mb-form .nf-form-errors .nf-error-msg + .nf-error-msg { margin-top: var(--mb-space-1); }

/* ---------- Auswahlfelder (mb-select.js) ---------- */
.mb-form .mb-select { position: relative; display: block; width: 100%; }
.mb-form .mb-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-2);
	width: 100%;
	height: var(--mb-form-feld-h);
	padding: 0 var(--mb-space-3);
	font: inherit;
	font-size: var(--mb-fs-body);
	color: var(--mb-ink-900);
	text-align: left;
	background: var(--mb-card);
	border: 1px solid var(--mb-form-linie);
	border-radius: var(--mb-radius-input);
	cursor: pointer;
}
.mb-form .mb-select__button::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-form .mb-select__button[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }
.mb-form .mb-select__button:hover { border-color: var(--mb-ink-600); }
.mb-form .mb-select__button:focus-visible {
	outline: none;
	border-color: var(--mb-form-fokus);
	box-shadow: inset 0 -3px 0 0 var(--mb-red);
}
.mb-form .mb-select__listbox {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--mb-card);
	border: var(--mb-border-thick);
	box-shadow: var(--mb-shadow-press);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--mb-dur-fast) var(--mb-ease-cut), transform var(--mb-dur-fast) var(--mb-ease-cut), visibility 0s linear var(--mb-dur-fast);
}
.mb-form .mb-select__listbox.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mb-form .mb-select__option { padding: var(--mb-space-2) var(--mb-space-3); cursor: pointer; }
.mb-form .mb-select__option.is-active { background: var(--mb-neutral-100); }
.mb-form .mb-select__option.is-selected { font-weight: var(--mb-weight-strong); box-shadow: inset 3px 0 0 var(--mb-red); }

/* ---------- Kontrollkästchen und Optionsfelder (eigene Form) ---------- */
.mb-form input[type="checkbox"],
.mb-form input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0 var(--mb-space-2) 0 0;
	vertical-align: -5px;
	background: var(--mb-card);
	border: 1.5px solid var(--mb-ink-700);
	border-radius: var(--mb-radius-input);
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: background-color var(--mb-dur-fast) var(--mb-ease-cut), border-color var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-form input[type="radio"] { border-radius: 50%; }
.mb-form input[type="checkbox"]::before {
	content: "";
	width: 12px;
	height: 12px;
	background-color: #fff;
	-webkit-mask: url('../icons/check-bold.svg') center / contain no-repeat;
	mask: url('../icons/check-bold.svg') center / contain no-repeat;
	transform: scale(0);
	transition: transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-form input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	transform: scale(0);
	transition: transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-form input[type="checkbox"]:checked,
.mb-form input[type="radio"]:checked { background: var(--mb-ink-900); border-color: var(--mb-ink-900); }
.mb-form input[type="checkbox"]:checked::before,
.mb-form input[type="radio"]:checked::before { transform: scale(1); }
.mb-form input[type="checkbox"]:focus-visible,
.mb-form input[type="radio"]:focus-visible { outline: 2px solid var(--mb-red); outline-offset: 2px; }

/* ---------- Dateiablage ---------- */
.mb-form .mb-form-ablage {
	position: relative;
	padding: var(--mb-space-4);
	background: var(--mb-neutral-100);
	border: 1.5px dashed var(--mb-neutral-400);
	border-radius: var(--mb-radius-input);
	transition: border-color var(--mb-dur-fast) var(--mb-ease-cut), background-color var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-form .mb-form-ablage.is-ziehen {
	border-color: var(--mb-red);
	border-style: solid;
	background: var(--mb-red-tint);
}
.mb-form .mb-form-ablage .nf-field-element {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mb-space-2) var(--mb-space-3);
}
.mb-form .mb-form-ablage .nf-fu-fileinput-button,
.mb-form .mb-form-ablage__knopf {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	min-height: 48px;
	margin: 0;
	padding: 0 var(--mb-space-4);
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-body);
	font-weight: var(--mb-weight-strong);
	line-height: 1;
	color: #fff;
	background: var(--mb-ink-900);
	border: 0;
	border-radius: 0;
	clip-path: var(--mb-slope-sm);
	cursor: pointer;
	transition: background-color var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-form .mb-form-ablage .nf-fu-fileinput-button::before,
.mb-form .mb-form-ablage__knopf::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url('../icons/upload-bold.svg') center / contain no-repeat;
	mask: url('../icons/upload-bold.svg') center / contain no-repeat;
}
.mb-form .mb-form-ablage .nf-fu-fileinput-button:hover,
.mb-form .mb-form-ablage .nf-fu-fileinput-button:focus,
.mb-form .mb-form-ablage__knopf:hover {
	background: var(--mb-ink-700);
	color: #fff;
	border: 0;
}
.mb-form .mb-form-ablage .nf-fu-fileinput-button:focus-visible,
.mb-form .mb-form-ablage--nativ:focus-within .mb-form-ablage__knopf {
	outline: 2px solid var(--mb-red);
	outline-offset: 3px;
	clip-path: none;
}
.mb-form .mb-form-ablage__hinweis {
	display: flex;
	align-items: center;
	gap: var(--mb-space-2);
	margin: 0;
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-700);
}
.mb-form .mb-form-ablage__hinweis > span:last-child { display: flex; flex-direction: column; }
.mb-form .mb-form-ablage__icon { display: none; }
.mb-form .mb-form-ablage__typen {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	color: var(--mb-ink-600);
}
.mb-form .mb-form-ablage .nf-fu-button-cancel {
	order: 5;
	min-height: 40px;
	padding: 0 var(--mb-space-3);
	font: inherit;
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-900);
	background: transparent;
	border: 1px solid var(--mb-ink-900);
	border-radius: 0;
}
.mb-form .mb-form-ablage .nf-fu-progress {
	flex: 1 0 100%;
	order: 6;
	height: 4px;
	margin: 0;
	background: var(--mb-rule);
	border-radius: 0;
	box-shadow: none;
}
.mb-form .mb-form-ablage .nf-fu-progress:not(:has(.nf-fu-progress-bar[style*="%"])) { display: none; }
.mb-form .mb-form-ablage .nf-fu-progress-bar { background: var(--mb-red); box-shadow: none; }
.mb-form .mb-form-ablage .files_uploaded,
.mb-form .mb-form-ablage__liste {
	flex: 1 0 100%;
	order: 7;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mb-form .mb-form-ablage .files_uploaded:empty,
.mb-form .mb-form-ablage__liste:empty { display: none; }
.mb-form .mb-form-ablage .files_uploaded p,
.mb-form .mb-form-ablage__liste li {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	max-width: 100%;
	margin: 0;
	padding: 6px 6px 6px 12px;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-900);
	background: var(--mb-card);
	border: 1px solid var(--mb-ink-900);
	overflow-wrap: anywhere;
}
.mb-form .mb-form-ablage .files_uploaded .delete {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 8px;
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-meta);
	font-weight: var(--mb-weight-medium);
	color: var(--mb-ink-900);
	background: var(--mb-neutral-100);
	text-decoration: none;
}
.mb-form .mb-form-ablage .files_uploaded .mb-form-ablage__entfernen {
	position: relative;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	color: transparent;
}
.mb-form .mb-form-ablage .files_uploaded .mb-form-ablage__entfernen::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 8px;
	width: 12px;
	height: 12px;
	background-color: var(--mb-ink-900);
	-webkit-mask: url('../icons/x-bold.svg') center / contain no-repeat;
	mask: url('../icons/x-bold.svg') center / contain no-repeat;
}
.mb-form .mb-form-ablage .files_uploaded .delete:hover,
.mb-form .mb-form-ablage .files_uploaded .delete:focus-visible { background: var(--mb-red); color: #fff; outline: none; }
.mb-form .mb-form-ablage .files_uploaded .mb-form-ablage__entfernen:hover,
.mb-form .mb-form-ablage .files_uploaded .mb-form-ablage__entfernen:focus-visible { color: transparent; }
.mb-form .mb-form-ablage .files_uploaded .mb-form-ablage__entfernen:hover::before,
.mb-form .mb-form-ablage .files_uploaded .mb-form-ablage__entfernen:focus-visible::before { background-color: #fff; }
.mb-form .mb-form-ablage__nativ {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ---------- Absenden: roter CTA mit Schrägschnitt ---------- */
.mb-form .submit-container { margin-top: var(--mb-space-5); margin-bottom: 0; }
.mb-form .submit-container .field-wrap .nf-field-element { position: relative; display: inline-block; width: fit-content; max-width: 100%; }
.mb-form .submit-container .nf-field-element::after {
	content: "››";
	position: absolute;
	right: var(--mb-space-5);
	top: 50%;
	transform: translateY(-52%);
	font-family: var(--mb-font-mono);
	font-weight: var(--mb-weight-medium);
	color: #fff;
	pointer-events: none;
	transition: transform var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-form .submit-container .nf-field-element:hover::after { transform: translate(4px, -52%); }
.mb-form .nf-form-content input[type="submit"],
.mb-form--cf7 input[type="submit"],
.mb-form .mb-form-absenden {
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	height: auto;
	padding: var(--mb-space-3) calc(var(--mb-space-5) + 28px) var(--mb-space-3) var(--mb-space-5);
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-body);
	font-weight: var(--mb-weight-strong);
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--mb-red);
	border: 0;
	border-radius: 0;
	clip-path: var(--mb-slope-md);
	cursor: pointer;
	transition: background-color var(--mb-dur-fast) var(--mb-ease-cut), transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-form .nf-form-content input[type="submit"]:hover,
.mb-form .nf-form-content input[type="submit"]:focus,
.mb-form--cf7 input[type="submit"]:hover {
	background: var(--mb-red-hover);
	color: #fff;
}
.mb-form .nf-form-content input[type="submit"]:focus-visible,
.mb-form--cf7 input[type="submit"]:focus-visible {
	outline: 3px solid var(--mb-ink-900);
	outline-offset: 3px;
	clip-path: none;
}
.mb-form .nf-form-content input[type="submit"]:disabled,
.mb-form .nf-form-content input[type="submit"][disabled] { background: var(--mb-ink-500); cursor: progress; }

/* ---------- Erfolgszustand (Antwort des Plugins, ohne Neuladen) ---------- */
.mb-form .nf-response-msg:not(:empty),
.mb-form--cf7 .wpcf7 form.sent .wpcf7-response-output {
	position: relative;
	display: block;
	padding: var(--mb-space-6) var(--mb-space-5) var(--mb-space-5) calc(var(--mb-space-5) + 64px);
	background: var(--mb-card);
	border: 2px solid var(--mb-ink-900);
	box-shadow: var(--mb-shadow-press);
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: var(--mb-fs-h4);
	line-height: 1.2;
	color: var(--mb-ink-900);
	outline: none;
}
.mb-form .nf-response-msg:not(:empty)::before,
.mb-form--cf7 .wpcf7 form.sent .wpcf7-response-output::before {
	content: "";
	position: absolute;
	left: var(--mb-space-5);
	top: var(--mb-space-6);
	width: 44px;
	height: 44px;
	background: var(--mb-red);
	clip-path: var(--mb-slope-sm);
}
.mb-form .nf-response-msg:not(:empty)::after,
.mb-form--cf7 .wpcf7 form.sent .wpcf7-response-output::after {
	content: "";
	position: absolute;
	left: calc(var(--mb-space-5) + 12px);
	top: calc(var(--mb-space-6) + 12px);
	width: 20px;
	height: 20px;
	background-color: #fff;
	-webkit-mask: url('../icons/check-bold.svg') center / contain no-repeat;
	mask: url('../icons/check-bold.svg') center / contain no-repeat;
}
.mb-form .nf-response-msg p { margin: 0; }
.mb-form.is-gesendet .nf-form-fields-required { display: none; }

/* ---------- Seitenspalte ---------- */
.mb-form-seite {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-4);
	font-family: var(--mb-font-body);
}
.mb-form-seite__block,
.mb-form-seite__fortschritt {
	padding: var(--mb-space-4);
	background: var(--mb-card);
	border: 1px solid var(--mb-rule);
}
.mb-form-seite__block--kontakt { border-top: 3px solid var(--mb-red); }
.mb-form-seite__titel {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: 1.25rem;
	line-height: 1.2;
	margin: 0 0 var(--mb-space-2);
}
.mb-form-seite__block p {
	margin: 0 0 var(--mb-space-2);
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-700);
}
.mb-form-seite__wege { margin: var(--mb-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--mb-space-1); }
.mb-form-seite__wege li { display: flex; align-items: center; gap: var(--mb-space-2); }
.mb-form-seite__wege .mb-icon { width: 18px; height: 18px; background-color: var(--mb-red); flex: 0 0 auto; }
.mb-form-seite__wege a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-weight: var(--mb-weight-strong);
	color: var(--mb-ink-900);
	overflow-wrap: anywhere;
}
.mb-form-seite__wege a:hover { color: var(--mb-red); }
.mb-form-seite__schritte { margin: var(--mb-space-2) 0 0; padding: 0; list-style: none; counter-reset: mb-ablauf; display: grid; gap: var(--mb-space-3); }
.mb-form-seite__schritte li {
	counter-increment: mb-ablauf;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: var(--mb-space-2);
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-800);
}
.mb-form-seite__schritte li::before {
	content: counter(mb-ablauf, decimal-leading-zero);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	font-weight: var(--mb-weight-medium);
	color: var(--mb-red);
	padding-top: 3px;
	border-top: 2px solid var(--mb-ink-900);
}

/* Fortschritt */
.mb-form-seite__fortschritt[hidden] { display: none; }
.mb-form-seite__fortschritt { background: var(--mb-ink-900); border-color: var(--mb-ink-900); color: #fff; }
.mb-form-fortschritt__kopf {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--mb-space-2);
	margin: 0 0 var(--mb-space-2);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mb-neutral-400);
}
.mb-form-fortschritt__kopf > span:first-child { color: #fff; }
.mb-form-fortschritt__balken { height: 4px; background: var(--mb-ink-700); margin-bottom: var(--mb-space-2); }
.mb-form-fortschritt__balken span { display: block; height: 100%; width: 0; background: var(--mb-red); transition: width var(--mb-dur-base) var(--mb-ease-cut); }
.mb-form-fortschritt__liste { margin: 0; padding: 0; list-style: none; }
.mb-form-seite button.mb-form-fortschritt__schritt,
.mb-form-seite button.mb-form-fortschritt__schritt:hover,
.mb-form-seite button.mb-form-fortschritt__schritt:focus {
	background: none;
	color: #fff;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 0;
}
.mb-form-seite button.mb-form-fortschritt__schritt {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--mb-space-2);
	width: 100%;
	min-height: 44px;
	padding: 6px 0;
	font: inherit;
	font-size: var(--mb-fs-small);
	text-align: left;
	color: #fff;
	background: none;
	border: 0;
	border-top: 1px solid var(--mb-ink-700);
	cursor: pointer;
}
.mb-form-fortschritt__liste li:first-child .mb-form-fortschritt__schritt { border-top: 0; }
.mb-form-fortschritt__schritt:hover .mb-form-fortschritt__titel { text-decoration: underline; text-underline-offset: 3px; }
.mb-form-fortschritt__schritt:focus-visible { outline: 2px solid var(--mb-red); outline-offset: 2px; }
.mb-form-fortschritt__nr { font-family: var(--mb-font-mono); font-size: var(--mb-fs-meta); color: var(--mb-neutral-400); }
.mb-form-fortschritt__titel { font-weight: var(--mb-weight-medium); line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
.mb-form-fortschritt__status {
	font-family: var(--mb-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 6px;
	color: var(--mb-neutral-400);
	border: 1px solid var(--mb-ink-700);
	white-space: nowrap;
}
.mb-form-fortschritt__schritt[data-zustand="begonnen"] .mb-form-fortschritt__status { color: #fff; border-color: var(--mb-neutral-400); }
.mb-form-fortschritt__schritt[data-zustand="fertig"] .mb-form-fortschritt__status { color: var(--mb-ink-900); background: #fff; border-color: #fff; }
.mb-form-fortschritt__schritt[data-zustand="fertig"] .mb-form-fortschritt__nr { color: var(--mb-red); }
.mb-form-seite.is-gesendet .mb-form-seite__fortschritt { display: none; }

/* ---------- Einbettung in den Inhaltsbaukasten (.mb-formular, inhalte.css) ----------
   Mit Seitenspalte läuft nicht mehr das Bild mit, sondern die Spalte mit
   Fortschritt und Kontakt: Bildspalte über die ganze Formularhöhe, Bild
   oben, Seitenspalte darunter klebend. */
.e-con.mb-formular.mb-formular--mit-seite > .mb-formular__bild {
	position: static;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-4);
}
.mb-formular--mit-seite > .mb-formular__bild > .mb-form-seite { flex: 1 1 auto; }
/* Kontakt und Ablauf stehen fest unter dem Bild, der Fortschritt läuft
   darunter bis zum Formularende mit. */
.mb-formular--mit-seite .mb-form-seite__fortschritt {
	position: sticky;
	top: 124px;
}

/* ---------- Umbrüche ---------- */
@media (max-width: 1024px) {
	.mb-form-seite__fortschritt { display: none; }
}
@media (max-width: 767px) {
	.mb-form nf-cells { flex-direction: column; gap: 0; }
	.mb-form .nf-cell { flex: 1 1 auto; }
	.mb-form .mb-form-abschnitt { margin-top: var(--mb-space-5); }
	.mb-form .mb-form-abschnitt h2,
	.mb-form .mb-form-abschnitt h3 { font-size: 1.375rem; }
	.mb-form .submit-container .field-wrap .nf-field-element,
	.mb-form .nf-form-content input[type="submit"] { display: block; width: 100%; text-align: left; }
	.mb-form .nf-response-msg:not(:empty) {
		padding: calc(var(--mb-space-5) + 60px) var(--mb-space-4) var(--mb-space-4);
		font-size: 1.25rem;
	}
	.mb-form .nf-response-msg:not(:empty)::before { left: var(--mb-space-4); top: var(--mb-space-4); }
	.mb-form .nf-response-msg:not(:empty)::after { left: calc(var(--mb-space-4) + 12px); top: calc(var(--mb-space-4) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
	.mb-form *,
	.mb-form-seite * { transition: none !important; }
}