/* ============================================================================
   MANNufaktur — Formulare

   Gilt fuer alle Forminator-Formulare, die mit dem Design-Stil "None"
   ausgeliefert werden. In diesem Modus laedt Forminator KEIN eigenes
   Design-CSS und keine externen Schriften — die gesamte Optik entsteht hier.

   Grundregeln (wie in theme.css und blocks.css):
   - Keine Hex-Werte. Farben ausschliesslich ueber die Presets aus theme.json
     (var(--wp--preset--color--...)), Groessen und Abstaende ebenso.
   - Struktur (Rahmen, Radius, Abstand) steht fest, Farbwerte kommen aus
     lokalen --mf-form-*-Variablen, damit sie an einer Stelle umschaltbar sind.
   - Vorlage: mannufaktur-deploy/public/index.html, Zeilen 606-700
     (Buchungsablauf) und Zeilen 34-40 (Buttons).

   HINWEIS ZUR FEHLERFARBE
   Der Design-Kontrakt hat bewusst keinen Rot-/Fehlerton (siehe
   FORMULAR-ENTSCHEIDUNG.md, offene Frage 9.5 — Entscheidung steht bei Eric aus).
   Bis dahin sind Fehler hier NICHT ueber Farbe allein markiert, sondern
   zusaetzlich ueber Rahmenstaerke, eine Balkenmarkierung und ein
   vorangestelltes Zeichen. Das erfuellt die Anforderung "Fehler auch ohne
   Farbe erkennbar" (Design-Kontrakt Abschnitt 8) auch dann, wenn spaeter ein
   echter Fehlerton ergaenzt wird.
   ========================================================================= */


/* ----------------------------------------------------------------------------
   1) Lokale Variablen
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form {
	/* Radien laut Design-Kontrakt Abschnitt 5. */
	--mf-form-radius-feld: 10px;
	--mf-form-radius-karte: 18px;

	/* Rahmenstaerken. 1.5px wie in der Vorlage (index.html Z. 636). */
	--mf-form-rahmen: 1.5px;
	--mf-form-rahmen-fehler: 2.5px;

	/* Farben. */
	--mf-form-feld-bg: var(--wp--preset--color--ground);
	--mf-form-feld-rahmen: var(--wp--preset--color--line);
	--mf-form-feld-rahmen-aktiv: var(--wp--preset--color--forest);
	--mf-form-text: var(--wp--preset--color--ink);
	/* Beschriftung und Hinweis bewusst in ink-soft.
	   Gemessen auf dem Kartengrund: ink-muted 3,75:1, ink-faint 2,58:1 —
	   beide unter den 4,5:1 aus Design-Kontrakt Abschnitt 8. Gerade an einem
	   Formular ist das keine Nebensache: Wer die Beschriftung nicht liest,
	   fuellt das falsche Feld aus. ink-soft liegt bei 6,91:1. */
	--mf-form-label: var(--wp--preset--color--ink-soft);
	--mf-form-hinweis: var(--wp--preset--color--ink-soft);
	--mf-form-signal: var(--wp--preset--color--accent-deep);

	--mf-uebergang: 0.35s ease;
}

/* Auf dunklen Sektionen (ink / forest-deep) dreht sich die Logik um:
   heller Text, hellere Rahmen. Damit funktioniert ein Formular auch in der
   dunkelgruenen Koffer-Sektion der Vorlage. */
.has-ink-background-color .forminator-ui.forminator-custom-form,
.has-forest-deep-background-color .forminator-ui.forminator-custom-form {
	--mf-form-feld-bg: var(--wp--preset--color--surface);
	--mf-form-text: var(--wp--preset--color--ink);
	--mf-form-label: var(--wp--preset--color--paper);
	/* forest-light erreicht auf forest-deep gemessen nur 3,53:1 — fuer Text zu
	   wenig (Design-Kontrakt Abschnitt 8). paper liegt bei 7,83:1. */
	--mf-form-hinweis: var(--wp--preset--color--paper);
	--mf-form-signal: var(--wp--preset--color--accent-light);
	--mf-form-feld-rahmen-aktiv: var(--wp--preset--color--accent-light);
}


/* ----------------------------------------------------------------------------
   2) Grundgeruest: Reihen und Spalten

   Forminator gibt .forminator-row mit .forminator-col-<n> aus (12er-Raster).
   Statt das Raster nachzubauen, wird es hier auf ein modernes Grid abgebildet:
   weniger Code, kein horizontales Scrollen bei 375px.
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form {
	font-family: var(--wp--preset--font-family--sans);
	color: var(--mf-form-text);
}

/* Forminator laedt auch im Design-Stil "None" eine kleine Hilfsdatei
   (forminator-utilities.min.css). Darin steht "fieldset { line-height: 1 }" —
   das quetscht mehrzeilige Beschriftungen zusammen, sobald jemand spaeter ein
   Feld mit Fieldset einbaut (Name, Adresse, Datum). Hier zurueckgedreht. */
.forminator-ui.forminator-custom-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: inherit;
}

.forminator-ui.forminator-custom-form legend {
	padding: 0;
}

.forminator-ui.forminator-custom-form .forminator-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--sm);
	margin-block-end: var(--wp--preset--spacing--sm);
}

.forminator-ui.forminator-custom-form .forminator-row:last-child {
	margin-block-end: 0;
}

/* Spaltenbreiten. Mehr als diese vier braucht kein Formular dieses Projekts. */
.forminator-ui.forminator-custom-form [class*="forminator-col-"] { grid-column: span 12; }
.forminator-ui.forminator-custom-form .forminator-col-6 { grid-column: span 6; }
.forminator-ui.forminator-custom-form .forminator-col-4 { grid-column: span 4; }
.forminator-ui.forminator-custom-form .forminator-col-8 { grid-column: span 8; }

/* Unter 640px steht alles untereinander — sonst werden die Felder unlesbar schmal. */
@media (max-width: 640px) {
	.forminator-ui.forminator-custom-form [class*="forminator-col-"] {
		grid-column: span 12;
	}
}

/* Versteckte Felder (Zeitfalle, Anfrage-Typ) duerfen keine Luecke im Raster
   hinterlassen. Forminator setzt die Spalte eines versteckten Feldes auf
   .forminator-field-hidden — die erste Regel ist damit punktgenau. Die zweite
   raeumt zusaetzlich die dann leere Zeile weg; Browser ohne :has() ignorieren
   sie einfach, uebrig bleibt hoechstens ein Zeilenabstand zuviel. */
.forminator-ui.forminator-custom-form .forminator-field-hidden {
	display: none;
}

.forminator-ui.forminator-custom-form .forminator-row:not(:has(.forminator-field)) {
	display: none;
}


/* ----------------------------------------------------------------------------
   3) Beschriftungen und Hinweise
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form .forminator-label {
	display: block;
	margin-block-end: 6px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.35;
	color: var(--mf-form-label);
}

/* Das Sternchen fuer Pflichtfelder. Es ist NICHT der einzige Hinweis:
   Forminator setzt zusaetzlich aria-required am Eingabefeld. */
.forminator-ui.forminator-custom-form .forminator-required {
	margin-inline-start: 2px;
	color: var(--mf-form-signal);
	font-weight: 700;
}

.forminator-ui.forminator-custom-form .forminator-description {
	margin-block-start: 6px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--mf-form-hinweis);
}


/* ----------------------------------------------------------------------------
   4) Eingabefelder
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form input[type="text"],
.forminator-ui.forminator-custom-form input[type="email"],
.forminator-ui.forminator-custom-form input[type="tel"],
.forminator-ui.forminator-custom-form input[type="url"],
.forminator-ui.forminator-custom-form input[type="number"],
.forminator-ui.forminator-custom-form textarea,
.forminator-ui.forminator-custom-form select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	background-color: var(--mf-form-feld-bg);
	border: var(--mf-form-rahmen) solid var(--mf-form-feld-rahmen);
	border-radius: var(--mf-form-radius-feld);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--mf-form-text);
	transition: border-color var(--mf-uebergang), background-color var(--mf-uebergang);
	/* Verhindert das Auto-Zoom auf iOS bei Schriftgroessen unter 16px. */
	-webkit-text-size-adjust: 100%;
}

.forminator-ui.forminator-custom-form textarea,
.forminator-ui.forminator-custom-form .forminator-textarea {
	min-height: 7.5em;
	resize: vertical;
}

.forminator-ui.forminator-custom-form .forminator-input:hover,
.forminator-ui.forminator-custom-form .forminator-textarea:hover,
.forminator-ui.forminator-custom-form select:hover {
	border-color: var(--mf-form-feld-rahmen-aktiv);
}

.forminator-ui.forminator-custom-form ::placeholder {
	color: var(--mf-form-hinweis);
	opacity: 1;
}

/* Fokus: exakt der Ring aus dem Design-Kontrakt Abschnitt 8.
   Bewusst auch bei :focus (nicht nur :focus-visible) — in einem Formular soll
   immer sichtbar sein, wo man gerade schreibt. */
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus,
.forminator-ui.forminator-custom-form input:focus,
.forminator-ui.forminator-custom-form textarea:focus,
.forminator-ui.forminator-custom-form select:focus,
.forminator-ui.forminator-custom-form button:focus-visible,
.forminator-ui.forminator-custom-form a:focus-visible {
	outline: 2.5px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
	border-color: var(--mf-form-feld-rahmen-aktiv);
}

.has-ink-background-color .forminator-ui.forminator-custom-form :focus,
.has-ink-background-color .forminator-ui.forminator-custom-form :focus-visible,
.has-forest-deep-background-color .forminator-ui.forminator-custom-form :focus,
.has-forest-deep-background-color .forminator-ui.forminator-custom-form :focus-visible {
	outline-color: var(--wp--preset--color--accent-light);
}


/* ----------------------------------------------------------------------------
   5) Auswahlfelder: Radio und Checkbox

   Wichtig fuer die Tastaturbedienung: Die Eingabefelder werden NICHT per
   display:none oder visibility versteckt (das nimmt ihnen den Fokus), sondern
   behalten ihre native Darstellung. accent-color faerbt sie in der
   Sekundaerfarbe ein — genau wie in der Vorlage (index.html Z. 665).
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form .forminator-radio,
.forminator-ui.forminator-custom-form .forminator-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block-end: 12px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	cursor: pointer;
}

.forminator-ui.forminator-custom-form .forminator-radio:last-child,
.forminator-ui.forminator-custom-form .forminator-checkbox:last-child {
	margin-block-end: 0;
}

.forminator-ui.forminator-custom-form .forminator-radio input,
.forminator-ui.forminator-custom-form .forminator-checkbox input {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin: 0.2em 0 0;
	accent-color: var(--wp--preset--color--forest);
	cursor: pointer;
}

/* Die Angebotsauswahl in Formular C soll wie eine Kartenliste wirken. */
.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-radio {
	padding: 14px 16px;
	background-color: var(--mf-form-feld-bg);
	border: var(--mf-form-rahmen) solid var(--mf-form-feld-rahmen);
	border-radius: var(--mf-form-radius-feld);
	transition: border-color var(--mf-uebergang);
}

.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-radio:hover,
.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-radio:has(input:checked) {
	border-color: var(--mf-form-feld-rahmen-aktiv);
}

/* Zusaetzlich zur Rahmenfarbe eine Schriftauszeichnung — damit die Auswahl
   auch ohne Farbwahrnehmung erkennbar ist. */
.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-radio:has(input:checked) .forminator-radio-label {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.forminator-ui.forminator-custom-form .forminator-radio-label,
.forminator-ui.forminator-custom-form .forminator-checkbox-label {
	display: block;
}

/* Links in Einwilligungstexten (AGB, Datenschutz) muessen als Links erkennbar
   bleiben — unterstrichen, nicht nur farbig. */
.forminator-ui.forminator-custom-form .forminator-checkbox a,
.forminator-ui.forminator-custom-form .forminator-radio a {
	/* Ueber die Variable, nicht fest accent-deep: In der dunkelgruenen
	   Koffer-Sektion ergibt accent-deep gemessen 1,70:1. --mf-form-signal
	   schaltet dort auf accent-light (4,58:1). */
	color: var(--mf-form-signal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Das Einwilligungs-Haekchen (Feldtyp `consent`) baut sein Markup anders als
   eine einfache Checkbox: Der Beschreibungstext steht NICHT im <label>, sondern
   als Geschwister-Element daneben:

       <div class="forminator-checkbox__wrapper">
         <label class="forminator-checkbox forminator-consent"><input ...></label>
         <div class="forminator-checkbox__label forminator-consent__label">Text</div>
       </div>

   Die Regeln oben greifen deshalb nicht: Ohne die folgenden vier Bloecke stuende
   der Text unter dem Kaestchen statt daneben, in Fliesstextgroesse statt in der
   kleinen Schrift der uebrigen Auswahlfelder. In dieser Instanz nachgemessen:
   19px statt 15px, Kaestchen und Text untereinander.
   (Warum ueberhaupt `consent` und nicht `gdprcheckbox`: setup/formulare-anlegen.php,
   Korrektur 1 — nur `consent` behaelt den Link im Text.) */
.forminator-ui.forminator-custom-form .forminator-checkbox__wrapper {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* Das Kaestchen behaelt seine Breite; der eigene Abstand entfaellt, sonst
   entstuende hinter dem Eingabefeld eine zweite Luecke (das leere
   .forminator-checkbox-box zaehlt als Flex-Kind). */
.forminator-ui.forminator-custom-form .forminator-checkbox__wrapper .forminator-checkbox {
	flex: 0 0 auto;
	gap: 0;
	margin-block-end: 0;
}

/* Farbe ueber die Variablen, nicht fest verdrahtet: Das Einwilligungs-Haekchen
   des Erste-Hilfe-Koffers steht in der DUNKELGRUENEN Sektion. Mit dem festen
   ink-soft ergab der Text dort gemessen 1,23:1 und der Link 1,70:1 — auf einem
   Pflicht-Haekchen nach DSGVO die schlechteste Stelle fuer unlesbaren Text.
   Ueber --mf-form-label / --mf-form-signal schaltet beides auf hellem Grund
   auf ink-soft / accent-deep (6,91:1 / 5,03:1) und auf dunklem Grund auf
   paper / accent-light (7,83:1 / 4,58:1). */
.forminator-ui.forminator-custom-form .forminator-checkbox__label {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--mf-form-label);
	font-weight: 400;
}

.forminator-ui.forminator-custom-form .forminator-checkbox__label a {
	color: var(--mf-form-signal);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* ----------------------------------------------------------------------------
   6) Knoepfe

   Primaer = accent (Terrakotta), Hover accent-deep. Zurueck = Outline.
   Beide Varianten aus der Vorlage (index.html Z. 34-37).
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form .forminator-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	border: 1.5px solid transparent;
	border-radius: var(--mf-form-radius-feld);
	/* Flaeche accent-deep statt accent: Papierweiss auf accent ergibt gemessen
	   nur 3,71:1 und verfehlt die 4,5:1 aus Design-Kontrakt Abschnitt 8; auf
	   accent-deep sind es 4,62:1. Dieselbe Entscheidung steht in theme.json
	   (elements.button) und in inc/generatepress.php — alle drei Stellen
	   muessen denselben Slug nennen, sonst sehen Formular-Knopf und
	   Block-Button verschieden aus. */
	background-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--mf-uebergang), border-color var(--mf-uebergang), transform var(--mf-uebergang);
}

.forminator-ui.forminator-custom-form .forminator-button:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	transform: translateY(-1px);
}

.forminator-ui.forminator-custom-form .forminator-button[disabled],
.forminator-ui.forminator-custom-form .forminator-button.forminator-button-onload {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

/* Absende- und Weiter-Knopf nehmen die volle Breite — wie in der Vorlage. */
.forminator-ui.forminator-custom-form .forminator-button-submit,
.forminator-ui.forminator-custom-form .forminator-button-next {
	flex: 1 1 auto;
	width: 100%;
}

/* "Zurueck & korrigieren" ist die Sekundaeraktion. */
.forminator-ui.forminator-custom-form .forminator-button-back {
	flex: 0 0 auto;
	width: auto;
	padding: 16px 24px;
	background-color: transparent;
	border-color: var(--mf-form-feld-rahmen);
	color: var(--wp--preset--color--ink);
}

.forminator-ui.forminator-custom-form .forminator-button-back:hover {
	background-color: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--ink);
	transform: none;
}

.forminator-ui.forminator-custom-form .forminator-pagination-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: var(--wp--preset--spacing--md);
}

@media (max-width: 480px) {
	.forminator-ui.forminator-custom-form .forminator-pagination-footer {
		flex-direction: column;
	}

	.forminator-ui.forminator-custom-form .forminator-button-back {
		width: 100%;
	}
}

/* Forminator blendet Knoepfe ueber diese Klasse aus. */
.forminator-ui.forminator-custom-form .forminator-hidden {
	display: none !important;
}


/* ----------------------------------------------------------------------------
   7) Schrittleiste (Formular C)

   Markup kommt aus front.pagination.js:
   <div role="tablist" class="forminator-pagination-steps">
     <button role="tab" class="forminator-step forminator-step-0" aria-selected>
       <span class="forminator-step-label">…</span>
       <span class="forminator-step-dot"></span>
     </button>
     <div class="forminator-break"></div> …
   Vorlage: index.html Z. 621-625.
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form .forminator-pagination-steps {
	display: flex;
	margin-block-end: var(--wp--preset--spacing--md);
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.forminator-ui.forminator-custom-form .forminator-step {
	flex: 1 1 0;
	padding: 16px 8px;
	background-color: transparent;
	border: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-faint);
	text-align: center;
	cursor: default;
}

.forminator-ui.forminator-custom-form .forminator-step.forminator-current,
.forminator-ui.forminator-custom-form .forminator-step[aria-selected="true"] {
	background-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--ink);
}

/* Der Punkt ist reine Dekoration (aria-hidden) und stoert im Nav-Stil nur. */
.forminator-ui.forminator-custom-form .forminator-step-dot,
.forminator-ui.forminator-custom-form .forminator-pagination-steps .forminator-break {
	display: none;
}

/* Fortschrittsbalken, falls jemand im Builder auf "bar" umstellt. */
.forminator-ui.forminator-custom-form .forminator-pagination-progress {
	height: 4px;
	margin-block-end: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--line);
	border-radius: 100px;
	overflow: hidden;
}


/* ----------------------------------------------------------------------------
   8) Fehler und Rueckmeldungen

   Erkennbar OHNE Farbe: dickerer Rahmen am Feld, Balken und Zeichen vor der
   Meldung, fette Schrift. Die Farbe kommt obendrauf, nicht statt dessen.
   -------------------------------------------------------------------------- */

.forminator-ui.forminator-custom-form .forminator-has_error .forminator-input,
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea,
.forminator-ui.forminator-custom-form [aria-invalid="true"] {
	border-width: var(--mf-form-rahmen-fehler);
	border-color: var(--mf-form-signal);
}

.forminator-ui.forminator-custom-form .forminator-error-message {
	display: block;
	margin-block-start: 8px;
	padding-inline-start: 10px;
	border-inline-start: 3px solid var(--mf-form-signal);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* Zeichen vor der Meldung — der Hinweis funktioniert damit auch in
   Schwarz-Weiss und bei jeder Form von Farbfehlsichtigkeit. */
.forminator-ui.forminator-custom-form .forminator-error-message::before {
	content: "\2717\00a0";
	color: var(--mf-form-signal);
}

/* Leere Fehlerhuellen (Forminator legt sie vorsorglich an) nicht anzeigen. */
.forminator-ui.forminator-custom-form .forminator-error-message:empty {
	display: none;
}

/* Der Antwortbereich oben am Formular — role="alert", aria-live="polite". */
.forminator-ui.forminator-custom-form .forminator-response-message {
	margin-block-end: var(--wp--preset--spacing--md);
	padding: 18px 22px;
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 4px solid var(--wp--preset--color--forest);
	border-radius: var(--mf-form-radius-feld);
	background-color: var(--wp--preset--color--tint);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.forminator-ui.forminator-custom-form .forminator-response-message.forminator-error {
	border-inline-start-color: var(--mf-form-signal);
	font-weight: 700;
}

.forminator-ui.forminator-custom-form .forminator-response-message[aria-hidden="true"],
.forminator-ui.forminator-custom-form .forminator-response-message:empty {
	display: none;
}

.forminator-ui.forminator-custom-form .forminator-response-message p:last-child {
	margin-block-end: 0;
}


/* ----------------------------------------------------------------------------
   9) Bausteine aus den HTML-Feldern der Formulare

   Diese Klassen stehen im Formular-Builder (inc/formulare.php legt sie an).
   Qiu kann die Texte darin aendern, ohne dass die Optik kippt.
   -------------------------------------------------------------------------- */

/* Info-Block ueber der Anmeldung (Formular B). */
.mf-formular-info {
	margin-block-end: var(--wp--preset--spacing--sm);
	padding: 20px 22px;
	background-color: var(--wp--preset--color--tint);
	border-radius: 14px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

.mf-formular-info p {
	margin-block: 0 8px;
}

.mf-formular-info p:last-child {
	margin-block-end: 0;
}

.mf-formular-info__titel {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

/* Hinweis "Unverbindliche Anfrage" auf Seite 2 von Formular C. */
.mf-hinweis {
	margin-block-end: var(--wp--preset--spacing--sm);
}

.mf-hinweis p {
	margin-block: 0 6px;
}

.mf-hinweis__eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.mf-hinweis__titel {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.mf-hinweis__text {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
	margin-block-end: 0 !important;
}

/* Uebersicht der Eingaben (Formular C, Schritt 2).
   Die Werte setzt Forminator per Merge-Tag live ein. */
.mf-uebersicht {
	padding: 22px 24px;
	background-color: var(--wp--preset--color--ground);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}

.mf-uebersicht__zeile {
	display: grid;
	grid-template-columns: minmax(7rem, 10rem) 1fr;
	gap: 4px 16px;
	margin-block: 0 12px;
	padding-block-end: 12px;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.mf-uebersicht__zeile:last-child {
	margin-block-end: 0;
	padding-block-end: 0;
	border-block-end: 0;
}

@media (max-width: 480px) {
	.mf-uebersicht__zeile {
		grid-template-columns: 1fr;
	}
}

.mf-uebersicht__label {
	font-weight: 700;
	color: var(--wp--preset--color--ink-muted);
}

.mf-uebersicht__wert {
	color: var(--wp--preset--color--ink);
	/* Lange Angebotsbeschreibungen duerfen umbrechen, aber nicht ueberlaufen. */
	overflow-wrap: anywhere;
}

/* Widerrufsbelehrung als Aufklapper. */
.mf-widerruf {
	margin-block-start: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-muted);
}

.mf-widerruf > summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wp--preset--color--ink-muted);
	list-style-position: outside;
}

.mf-widerruf > summary:hover {
	color: var(--wp--preset--color--ink);
}

.mf-widerruf > summary:focus-visible {
	outline: 2.5px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

.mf-widerruf p {
	margin-block: 12px 0;
}


/* ----------------------------------------------------------------------------
   10) Bestaetigungsseite des Erste-Hilfe-Koffers

   Markup aus dem Shortcode [mannufaktur_koffer_bestaetigung]
   (inc/formulare.php). Kommt ohne JavaScript aus.
   -------------------------------------------------------------------------- */

.mf-koffer {
	max-width: 34rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 4px solid var(--wp--preset--color--forest);
	border-radius: 18px;
	text-align: start;
}

.mf-koffer--fehler {
	border-inline-start-color: var(--wp--preset--color--accent-deep);
}

.mf-koffer--hinweis {
	border-inline-start-color: var(--wp--preset--color--ink-faint);
}

.mf-koffer__titel {
	margin-block: 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.mf-koffer__text {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-soft);
}

.mf-koffer__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--sm);
	padding: 16px 28px;
	/* accent-deep wegen des Kontrasts — siehe Abschnitt zu .forminator-button. */
	background-color: var(--wp--preset--color--accent-deep);
	border: 1.5px solid transparent;
	border-radius: 10px;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.35s ease, transform 0.35s ease;
}

.mf-koffer__button:hover {
	background-color: var(--wp--preset--color--ink);
	transform: translateY(-1px);
}

.mf-koffer__button:focus-visible {
	outline: 2.5px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}


/* ----------------------------------------------------------------------------
   11) Ruecksicht auf Systemeinstellungen
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.forminator-ui.forminator-custom-form *,
	.mf-koffer__button {
		transition-duration: 0.01ms !important;
	}

	.forminator-ui.forminator-custom-form .forminator-button:hover,
	.mf-koffer__button:hover {
		transform: none;
	}
}

/* Bei erhoehtem Kontrastbedarf die Rahmen deutlicher zeichnen. */
@media (prefers-contrast: more) {
	.forminator-ui.forminator-custom-form {
		--mf-form-feld-rahmen: var(--wp--preset--color--ink-muted);
	}
}