/* WerkPlus Forms – Frontend-Renderer. Alles auf .wpf-form gescoped (SPEC 8). */
.wpf-form {
	/* Basis (WerkPlus-CI). */
	--wpf-color-primary: #29f19c;
	--wpf-color-accent: #02a1f9;
	--wpf-color-bg: #ffffff;
	--wpf-color-text: #1a1a2e;
	--wpf-color-subtitle: #6b6b7b;
	--wpf-color-card-bg: #ffffff;
	--wpf-color-card-border: #e3e3ea;
	--wpf-color-input-bg: #ffffff;
	--wpf-color-input-border: #cdcdd6;
	--wpf-color-button-text: #ffffff;
	--wpf-input-icon-color: #06231a;

	/* Verläufe aus Primär + Akzent. */
	--wpf-gradient: linear-gradient(135deg, var(--wpf-color-primary), var(--wpf-color-accent));
	--wpf-gradient-h: linear-gradient(90deg, var(--wpf-color-primary), var(--wpf-color-accent));

	/* Maße / Radien / Abstände. */
	--wpf-input-height: 46px;
	--wpf-radius-card: 12px;
	--wpf-radius-button: 10px;
	--wpf-radius-input: 9px;
	--wpf-size-title: 22px;
	--wpf-size-subtitle: 15px;
	--wpf-size-option-label: 15px;
	--wpf-size-button: 15px;
	--wpf-spacing: 12px;
	--wpf-card-gap: 12px;
	--wpf-card-padding: 18px;
	--wpf-card-max-width: 200px;

	/* Schriftdicken. */
	--wpf-weight-title: 700;
	--wpf-weight-subtitle: 400;
	--wpf-weight-option-label: 400;
	--wpf-weight-button: 600;
	--wpf-weight-input-label: 500;

	--wpf-font-family: inherit;
	--wpf-shadow-card: none;

	/* Formular-Container (Bundle M). Defaults = bisheriges Erscheinungsbild:
	   kein Rand, keine Rundung, kein Innenabstand. Hintergrund via --wpf-color-bg. */
	--wpf-container-border-color: #e3e3ea;
	--wpf-container-border-width: 0px;
	--wpf-container-radius: 16px;
	--wpf-container-padding: 32px;
	/* System (Formular-Umbau 27.10.2026, UI-SOLL 7): Karte mit farbiger Oberkante, Breite, Schatten, Kopfzeile. */
	--wpf-container-max-width: 680px;
	--wpf-container-accent-width: 4px;
	--wpf-container-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
	--wpf-size-header: 20px;
	--wpf-weight-header: 700;

	/*
	 * Vererbte Tokens (nicht deklariert) greifen per Fallback auf Primär/Verlauf:
	 * --wpf-color-progress, --wpf-color-button-bg, --wpf-color-card-active,
	 * --wpf-color-input-focus, --wpf-input-icon-bg.
	 */

	box-sizing: border-box;
	position: relative;
	max-width: var(--wpf-container-max-width, 680px);
	margin: 0 auto;
	background: var(--wpf-color-bg);
	/* Farbige Oberkante als Innenschatten: folgt der Eckrundung, 0px = keine Kante. Leer = Hauptfarbe. */
	box-shadow: inset 0 var(--wpf-container-accent-width, 0px) 0 0 var(--wpf-container-accent-color, var(--wpf-color-primary)), var(--wpf-container-shadow, none);
	border: var(--wpf-container-border-width) solid var(--wpf-container-border-color);
	border-radius: var(--wpf-container-radius);
	/* Innenabstand je Seite; nicht gesetzte Seiten erben den Basiswert. */
	padding:
		var(--wpf-container-pad-top, var(--wpf-container-padding))
		var(--wpf-container-pad-right, var(--wpf-container-padding))
		var(--wpf-container-pad-bottom, var(--wpf-container-padding))
		var(--wpf-container-pad-left, var(--wpf-container-padding));
	color: var(--wpf-color-text);
	font-family: var(--wpf-font-family);
}
.wpf-form *,
.wpf-form *::before,
.wpf-form *::after { box-sizing: border-box; }

/* Design-Schrift überall im Formular durchsetzen – auch gegen Theme-/Pagebuilder-
   Regeln (z. B. Elementor-Mobil-Typografie), die die Karten sonst mobil auf eine
   andere Schrift ziehen. Der Font-Token ist die maßgebliche Wahl; ohne gesetzte
   Schrift = inherit (kontextuelle Theme-Schrift), einheitlich auf allen Elementen.
   Native Inputs/Buttons erben font-family ohnehin nicht von selbst. */
.wpf-form,
.wpf-form * { font-family: var(--wpf-font-family) !important; }

/* Abstand skaliert mit dem Spacing-Token. „below": normaler Inhaltsabstand,
   nur wenn eine Button-Zeile darüber steht wird er verdoppelt (spiegelt dann den
   oberhalb-Abstand). Nachbar-Selektor via :has – greift automatisch je Step,
   ohne JS (Auto-Weiter-Steps ohne .wpf-form__foot bekommen den einfachen Abstand). */
.wpf-form__progress { height: 6px; background: rgba(0, 0, 0, 0.08); border-radius: 999px; overflow: hidden; margin-bottom: calc(var(--wpf-spacing) * 2); }
.wpf-form__progress--below { margin-top: var(--wpf-spacing); margin-bottom: 0; }
.wpf-form__step:has(.wpf-form__foot) + .wpf-form__progress--below { margin-top: calc(var(--wpf-spacing) * 2); }
.wpf-form__progress-bar { height: 100%; width: 8%; background: var(--wpf-color-progress, var(--wpf-gradient-h)); border-radius: 999px; transition: width 0.35s ease; }

.wpf-form__head { margin-bottom: 20px; }
.wpf-form__head--left { text-align: left; }
.wpf-form__head--center { text-align: center; }
.wpf-form__head--right { text-align: right; }
.wpf-form__title { margin: 0 0 6px; font-size: var(--wpf-size-title); font-weight: var(--wpf-weight-title); line-height: 1.25; color: var(--wpf-color-text); }
.wpf-form__subtitle { margin: 0; font-size: var(--wpf-size-subtitle); font-weight: var(--wpf-weight-subtitle); color: var(--wpf-color-subtitle); }

.wpf-form__body { display: flex; flex-direction: column; gap: var(--wpf-spacing); }

.wpf-form__input,
.wpf-form__range { width: 100%; font-family: inherit; font-size: 15px; color: var(--wpf-color-text); }
.wpf-form__input { padding: 12px 14px; border: 1px solid var(--wpf-color-input-border); border-radius: var(--wpf-radius-input); background: var(--wpf-color-input-bg); }
/* Einheitliche Höhe für einzeilige Felder (Text/Datum/Select) – kein Datepicker-Übermaß, kein Select-Clipping. */
.wpf-form__input:not(textarea) { height: var(--wpf-input-height); line-height: normal; }
textarea.wpf-form__input { min-height: 96px; resize: vertical; }
select.wpf-form__input {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}
.wpf-form__input:focus { outline: none; border-color: var(--wpf-color-input-focus, var(--wpf-color-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpf-color-input-focus, var(--wpf-color-primary)) 25%, transparent); }

/* Auswahlkarten v3 – Layout kommt aus den Modus-Klassen (--grid Desktop, --list /
   --tiles Mobil); nur icon_size und padding_y sind inline. Deckungsgleich mit der
   Editor-Vorschau (preview.js ChoiceField). */
.wpf-form__cards { display: flex; flex-wrap: wrap; gap: 12px; }
.wpf-form__card {
	display: flex; align-items: center; gap: var(--wpf-card-gap);
	padding: var(--wpf-card-padding);
	background: var(--wpf-color-card-bg);
	border: 2px solid var(--wpf-color-card-border);
	border-radius: var(--wpf-radius-card);
	box-shadow: var(--wpf-shadow-card);
	color: var(--wpf-color-text); font-family: inherit; font-size: var(--wpf-size-option-label); font-weight: var(--wpf-weight-option-label); text-align: left; cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.wpf-form__card:hover { border-color: var(--wpf-color-card-active, var(--wpf-color-primary)); }
.wpf-form__card.is-selected { border-color: var(--wpf-color-card-active, var(--wpf-color-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpf-color-card-active, var(--wpf-color-primary)) 25%, transparent); }
.wpf-form__cardicon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--wpf-color-primary); }
.wpf-form__cardicon .wpf-icon svg,
.wpf-form__cardicon .wpf-icon { width: 100%; height: 100%; display: block; }
/* Eigene Icon-Bilder (Mediathek): füllen die Icon-Fläche wie die SVGs, Seitenverhältnis bleibt */
.wpf-icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wpf-form__inputicon .wpf-icon--img img { width: 22px; height: 22px; }
.wpf-form__cardlabel { flex: 1; min-width: 0; }
/* Lange Wörter („Ein-/Zweifamilienhaus“) umbrechen statt am Kachelrand abschneiden: erst Silbentrennung (lang="de"), sonst an beliebiger Stelle. */
.wpf-form__cardlabel, .wpf-form__cardlabel-below { overflow-wrap: anywhere; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }

/* Desktop: festes 4er-Grid. Breite = ¼ Inhaltsbreite − Abstände (3 Lücken à 12px),
   quadratisch, Icon + Label zentriert. Unvollständige Restreihe wird zentriert. */
.wpf-form__cards--grid { justify-content: center; }
.wpf-form__cards--grid > .wpf-form__gcard,
.wpf-form__cards--grid > .wpf-form__cardwrap {
	flex: 0 0 calc((100% - 36px) / 4);
	max-width: calc((100% - 36px) / 4);
}
.wpf-form__gcard {
	flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	aspect-ratio: 1 / 1; text-align: center; overflow: hidden;
}
/* Label INNEN (inside): auf max. 3 Zeilen begrenzt, damit lange Labels das
   quadratische Format nicht sprengen – Kachelgröße bleibt einheitlich. */
.wpf-form__gcard .wpf-form__cardlabel { flex: 0 0 auto; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* label_position: below – nur Icon in der quadratischen Karte, Label darunter außerhalb. */
.wpf-form__cardwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wpf-form__card--iconly { width: 100%; }
/* Fester Höhen-Slot (bis 2 Zeilen) -> Block Karte+Label immer gleich hoch,
   einzeilige Labels konsistent zu zweizeiligen. Überlauf wird abgeschnitten. */
.wpf-form__cardlabel-below {
	width: 100%; height: 2.6em; overflow: hidden;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	text-align: center; line-height: 1.3;
	font-size: var(--wpf-size-option-label); font-weight: var(--wpf-weight-option-label); color: var(--wpf-color-text);
}

/* Mobil list – volle Zeilen untereinander, Icon links, Label rechts. padding_y inline. */
.wpf-form__cards--list { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.wpf-form__cards--list > .wpf-form__row { width: 100%; text-align: left; }
/* Desktop-Liste (layout_mode "list"): denselben Listen-Stil nutzen, aber die
   Zeilenbreite sinnvoll deckeln (Kontaktformular-Default 640px) und zentrieren –
   sonst würden die Zeilen die volle Formularbreite (bis 1200px) einnehmen. */
.wpf-form__cards--listdesktop { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
/* Liste: Label bricht um und wird nie gekürzt (Zeile wächst mit). */
.wpf-form__cards--list > .wpf-form__row .wpf-form__cardlabel { display: block; overflow: visible; }

/* Mobil tiles – immer 2 quadratische Kacheln/Reihe, Icon zentriert, Label darunter innen. */
.wpf-form__cards--tiles > .wpf-form__tile {
	flex: 0 0 calc((100% - 12px) / 2);
	max-width: calc((100% - 12px) / 2);
	flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	aspect-ratio: 1 / 1; text-align: center; overflow: hidden;
}
.wpf-form__cards--tiles > .wpf-form__tile .wpf-form__cardlabel { flex: 0 0 auto; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Slider */
.wpf-form__slider { display: flex; flex-direction: column; gap: 10px; }
.wpf-form__sliderval { font-size: 20px; font-weight: 700; color: var(--wpf-color-primary); }
.wpf-form__range { accent-color: var(--wpf-color-primary); }
.wpf-form__sliderrange { display: flex; justify-content: space-between; color: var(--wpf-color-subtitle); font-size: 12px; }

/* Adresse: Straße volle Breite, PLZ/Ort nebeneinander (mobil gestapelt). */
.wpf-form__address { display: flex; flex-direction: column; gap: var(--wpf-spacing); }
.wpf-form__addressrow { display: flex; gap: 10px; }
.wpf-form__addressrow .wpf-form__input { flex: 1; min-width: 0; }

/* HTML-Inhalt */
.wpf-form__htmlcontent { font-size: 15px; line-height: 1.6; }

/* Kontaktformular */
.wpf-form__contact { display: flex; flex-direction: column; gap: 14px; }
.wpf-form__field { display: flex; flex-direction: column; gap: 6px; }
.wpf-form__label { font-size: 14px; font-weight: var(--wpf-weight-input-label); }
.wpf-form__inputwrap { position: relative; }
.wpf-form__inputwrap.has-icon { display: flex; align-items: stretch; overflow: hidden; background: var(--wpf-color-input-bg); border: 1px solid var(--wpf-color-input-border); border-radius: var(--wpf-radius-input); }
.wpf-form__inputwrap.has-icon:focus-within { border-color: var(--wpf-color-input-focus, var(--wpf-color-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpf-color-input-focus, var(--wpf-color-primary)) 25%, transparent); }
.wpf-form__inputwrap.has-icon .wpf-form__input { border: 0; border-radius: 0; background: transparent; }
.wpf-form__inputwrap.has-icon .wpf-form__input:not(textarea) { height: var(--wpf-input-height); }
.wpf-form__inputicon { flex: 0 0 var(--wpf-input-height); display: flex; align-items: center; justify-content: center; width: var(--wpf-input-height); background: var(--wpf-input-icon-bg, var(--wpf-color-primary)); color: var(--wpf-input-icon-color); }
.wpf-form__inputicon .wpf-icon svg, .wpf-form__inputicon .wpf-icon { width: 22px; height: 22px; display: block; }
.wpf-form__privacy { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--wpf-color-subtitle); }
.wpf-form__privacy input[type="checkbox"] { flex: 0 0 auto; margin: 0; width: 16px; height: 16px; color-scheme: light; accent-color: var(--wpf-color-primary); }
.wpf-form__privacylink { color: var(--wpf-color-primary); text-decoration: none; }

/* Footer / Buttons */
/* margin-top = Abstand Inhalt -> Navigations-Buttons, per Design-Token regelbar. */
.wpf-form__foot { display: flex; align-items: center; gap: 12px; margin-top: var(--wpf-nav-gap, 22px); }
.wpf-form__back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; padding: 10px 16px; border: 1px solid var(--wpf-color-input-border); border-radius: var(--wpf-radius-button); background: transparent; color: var(--wpf-color-subtitle); font-family: inherit; font-size: var(--wpf-size-button); cursor: pointer; }
.wpf-form__back.is-disabled { opacity: 0.4; cursor: not-allowed; }
.wpf-form__navicon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; }
.wpf-form__navicon .wpf-icon svg, .wpf-form__navicon .wpf-icon { width: 100%; height: 100%; display: block; }
.wpf-form__next,
.wpf-form__submit {
	margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1;
	padding: 12px 24px; border: 0; border-radius: var(--wpf-radius-button);
	background: var(--wpf-color-button-bg, var(--wpf-gradient)); color: var(--wpf-color-button-text); font-family: inherit; font-size: var(--wpf-size-button); font-weight: var(--wpf-weight-button); cursor: pointer;
	transition: filter 0.12s ease;
}
.wpf-form__next:hover, .wpf-form__submit:hover { filter: brightness(1.06); }
.wpf-form__submiticon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.wpf-form__submiticon .wpf-icon svg, .wpf-form__submiticon .wpf-icon { width: 100%; height: 100%; display: block; }

/* Fehlermeldung über der Button-Zeile. Solange leer, nimmt sie KEINEN Platz ein
   (weder Höhe noch Flex-Gap) – sonst wäre der Abstand zu den Navigations-Buttons
   nicht steuerbar und je nach Step-Typ unterschiedlich (Slider/HTML haben keinen
   Fehler-Slot). Der Abstand kommt allein aus --wpf-nav-gap. */
.wpf-form__err { min-height: 18px; color: #c0392b; font-size: 13px; }
.wpf-form__err:empty { display: none; }
.wpf-form .wpf-form__input[aria-invalid="true"] { border-color: #c0392b !important; box-shadow: 0 0 0 1px #c0392b !important; }

/* Upload-Frage (file_upload). Icon steckt IM Button (oben), Text darunter. */
.wpf-form__filecontrols { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 12px; }
.wpf-form__filehint { margin: 0 0 12px; text-align: center; color: var(--wpf-color-subtitle); font-size: 13px; }
.wpf-form__fileinput { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.wpf-form__filebtn {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	padding: 14px 22px; border: 1px solid var(--wpf-color-input-border); border-radius: var(--wpf-radius-button);
	background: var(--wpf-color-input-bg); color: var(--wpf-color-text); font-family: inherit;
	font-size: var(--wpf-size-button); font-weight: var(--wpf-weight-button); line-height: 1.2; cursor: pointer;
	transition: border-color 0.12s ease;
}
/* Icon erbt currentColor des Buttons (Button-Textfarbe), keine Akzentfarbe. */
.wpf-form__fileicon { display: flex; }
.wpf-form__fileicon svg { width: 30px; height: 30px; display: block; }
.wpf-form__filebtn:hover { border-color: var(--wpf-color-primary); }
.wpf-form__uploads { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.wpf-form__upload {
	display: flex; align-items: center; gap: 12px; padding: 8px 10px;
	border: 1px solid var(--wpf-color-card-border); border-radius: var(--wpf-radius-input);
	background: var(--wpf-color-card-bg);
}
.wpf-form__upload--busy { color: var(--wpf-color-subtitle); font-size: 13px; }
.wpf-form__uploadthumb { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: #f0f0f4; }
.wpf-form__uploadthumb--file {
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--wpf-color-subtitle); font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}
.wpf-form__uploadname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.wpf-form__uploadsize { flex: 0 0 auto; color: var(--wpf-color-subtitle); font-size: 12px; }
.wpf-form__uploadremove {
	flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
	background: transparent; color: var(--wpf-color-subtitle); font-size: 20px; line-height: 1; cursor: pointer;
}
.wpf-form__uploadremove:hover { color: #c0392b; }

/* Termin-Frage (appointment): kompakter Monatskalender + Zeitfenster (I3). */
.wpf-form__aptcols { display: flex; gap: 16px; align-items: flex-start; }
.wpf-form__aptcal { flex: 1 1 auto; min-width: 0; }            /* ~80% */
.wpf-form__aptslots { flex: 0 0 24%; min-width: 150px; }       /* ~20% */
.wpf-form__cal {
	padding: 8px; border: 1px solid var(--wpf-color-card-border);
	border-radius: var(--wpf-radius-card); background: var(--wpf-color-card-bg);
}
.wpf-form__calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.wpf-form__calmonth { font-weight: 700; font-size: 14px; }
.wpf-form__calnav {
	width: 30px; height: 30px; border: 1px solid var(--wpf-color-input-border); border-radius: 7px;
	background: var(--wpf-color-input-bg); color: var(--wpf-color-text); font-size: 17px; line-height: 1; cursor: pointer;
}
.wpf-form__calnav:disabled { opacity: 0.35; cursor: default; }
.wpf-form__calweek, .wpf-form__calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wpf-form__calwd { text-align: center; padding: 2px 0; color: var(--wpf-color-subtitle); font-size: 11px; font-weight: 600; }
.wpf-form__calday {
	aspect-ratio: 1 / 1; min-height: 30px; display: flex; align-items: center; justify-content: center;
	border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--wpf-color-text);
	font: inherit; font-size: 13px; cursor: pointer; transition: background 0.1s ease, border-color 0.1s ease;
}
.wpf-form__calday:not(.is-disabled):hover { border-color: var(--wpf-color-primary); }
.wpf-form__calday.is-selected { background: var(--wpf-color-button-bg, var(--wpf-gradient)); color: var(--wpf-color-button-text); font-weight: 700; }
.wpf-form__calday.is-disabled { color: var(--wpf-color-subtitle); opacity: 0.4; cursor: default; }
.wpf-form__calday--empty { border: 0; cursor: default; }
.wpf-form__slots { margin-top: 14px; }
.wpf-form__slotlabel { margin-bottom: 8px; color: var(--wpf-color-subtitle); font-size: 13px; font-weight: 600; }
.wpf-form__slothint { color: var(--wpf-color-subtitle); font-size: 13px; }
.wpf-form__slotrow { display: flex; flex-wrap: wrap; gap: 8px; }
.wpf-form__slot {
	padding: 9px 14px; border: 1px solid var(--wpf-color-input-border); border-radius: var(--wpf-radius-button);
	background: var(--wpf-color-input-bg); color: var(--wpf-color-text); font: inherit; font-size: 14px; cursor: pointer;
}
.wpf-form__slot:hover { border-color: var(--wpf-color-primary); }
.wpf-form__slot.is-selected { border-color: transparent; background: var(--wpf-color-button-bg, var(--wpf-gradient)); color: var(--wpf-color-button-text); font-weight: 600; }
/* In der schmalen rechten Spalte die Zeitfenster vertikal, volle Breite. */
.wpf-form__aptslots .wpf-form__slots { margin-top: 0; }
.wpf-form__aptslots .wpf-form__slotrow { flex-direction: column; flex-wrap: nowrap; }
.wpf-form__aptslots .wpf-form__slot { width: 100%; text-align: center; }

.wpf-form__success { text-align: center; padding: 30px 10px; }
.wpf-form__successmark { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--wpf-color-button-bg, var(--wpf-gradient)); color: var(--wpf-color-button-text); font-size: 30px; }
.wpf-form__successtext { font-size: 17px; }

.wpf-form__error { padding: 16px; border: 1px solid #e3b0b0; border-radius: 10px; background: #fbeaea; color: #a33; }

@media (max-width: 767px) {
	/* Mobiler Innenabstand: je Seite eigenständig; nicht gesetzt -> erbt den
	   Desktop-Wert, der wiederum den Basiswert erbt. */
	.wpf-form {
		padding:
			var(--wpf-container-pad-top-m, var(--wpf-container-pad-top, var(--wpf-container-padding)))
			var(--wpf-container-pad-right-m, var(--wpf-container-pad-right, var(--wpf-container-padding)))
			var(--wpf-container-pad-bottom-m, var(--wpf-container-pad-bottom, var(--wpf-container-padding)))
			var(--wpf-container-pad-left-m, var(--wpf-container-pad-left, var(--wpf-container-padding)));
	}

	/* Abstand zu den Navigations-Buttons: eigener Mobil-Wert; nicht gesetzt ->
	   erbt den Desktop-Wert, der wiederum auf den CSS-Default (22px) fällt. */
	.wpf-form__foot { margin-top: var(--wpf-nav-gap-m, var(--wpf-nav-gap, 22px)); }

	.wpf-form__addressrow { flex-direction: column; }
	/* Termin-Frage: Spalten untereinander stapeln, beide über die volle Breite.
	   align-items muss hier von flex-start auf stretch – in column-Richtung ist das
	   die Querachse, sonst schrumpft der Kalender auf seine Inhaltsbreite. */
	.wpf-form__aptcols { flex-direction: column; align-items: stretch; }
	.wpf-form__aptcal { width: 100%; }
	.wpf-form__aptslots { flex-basis: auto; width: 100%; min-width: 0; }
	.wpf-form__aptslots .wpf-form__slots { margin-top: 12px; }
}

/* =========================================================================
   Bundle R – Theme-Härtung / CSS-Isolierung
   -------------------------------------------------------------------------
   Fremde Themes/Page-Builder setzen globale Regeln auf button/input/h2/… , die
   unsere gescopten Einzelklassen (Spezifität 0,1,0) überstimmen und die Optik
   kippen (Kartenfarben, Button-Hintergründe, Kachelmaße). Diese Sektion hebt die
   Spezifität gezielt über die DOPPELTE Wurzelklasse `.wpf-form.wpf-form` (0,2,0)
   an – das schlägt Element- (0,0,1), Klassen- (0,1,0) und Klasse+Element-Regeln
   (0,1,1) des Themes, ohne flächig !important zu streuen. Zustands-Regeln
   (hover/selected/focus) werden hier auf derselben erhöhten Ebene nachgezogen,
   damit sie die Grundregeln weiterhin schlagen. Reihenfolge: Diese Sektion steht
   bewusst am Dateiende, sodass bei Gleichstand auch die Quellreihenfolge gewinnt.

   `!important` NUR als letzte Instanz für (a) die Farb-Token der Kern-Elemente
   (Hintergrund/Textfarbe) und (b) die feste Karten-Grid-Breite – damit selbst
   Theme-Regeln mit eigenem !important oder ID-Spezifität nicht durchschlagen.
   ========================================================================= */

/* box-sizing gegen Theme-Overrides absichern (Theme `*{}` ist 0,0,0). */
.wpf-form.wpf-form,
.wpf-form.wpf-form *,
.wpf-form.wpf-form *::before,
.wpf-form.wpf-form *::after { box-sizing: border-box; }

/* Interaktive Elemente: nur unkritische, von uns NIE genutzte Theme-Chrome-Props
   neutralisieren (Großschreibung, Laufweite, Textschatten). Farben/Rahmen/Maße
   folgen weiter unten explizit – hier bewusst NICHT anfassen. */
.wpf-form.wpf-form :is(button, input, textarea, select, a, label) {
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
}
.wpf-form.wpf-form :is(button, input, textarea, select) { font-family: inherit; }
.wpf-form.wpf-form button {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	text-decoration: none;
}
.wpf-form.wpf-form :is(img, svg) { box-shadow: none; border: 0; background: none; }

/* Überschriften/Texte: Theme-`.x h2{color!important}`-Regeln neutralisieren.
   Farbe = Token-Anwendung -> !important; Maße per Spezifität. */
.wpf-form.wpf-form .wpf-form__title { color: var(--wpf-color-text) !important; font-size: var(--wpf-size-title); font-weight: var(--wpf-weight-title); line-height: 1.25; margin: 0 0 6px; }
.wpf-form.wpf-form .wpf-form__subtitle { color: var(--wpf-color-subtitle) !important; font-size: var(--wpf-size-subtitle); font-weight: var(--wpf-weight-subtitle); margin: 0; }
.wpf-form.wpf-form .wpf-form__label { color: var(--wpf-color-text) !important; font-size: 14px; font-weight: var(--wpf-weight-input-label); }

/* --- Token-Farben der Kern-Elemente (letzte Instanz: !important) --------- */
.wpf-form.wpf-form .wpf-form__card { background: var(--wpf-color-card-bg) !important; color: var(--wpf-color-text) !important; }
.wpf-form.wpf-form .wpf-form__input,
.wpf-form.wpf-form textarea.wpf-form__input,
.wpf-form.wpf-form select.wpf-form__input { background-color: var(--wpf-color-input-bg) !important; color: var(--wpf-color-text) !important; }
.wpf-form.wpf-form .wpf-form__inputwrap.has-icon { background: var(--wpf-color-input-bg) !important; }
.wpf-form.wpf-form .wpf-form__inputwrap.has-icon .wpf-form__input { background: transparent !important; }
.wpf-form.wpf-form .wpf-form__inputicon { background: var(--wpf-input-icon-bg, var(--wpf-color-primary)) !important; color: var(--wpf-input-icon-color) !important; }
.wpf-form.wpf-form .wpf-form__next,
.wpf-form.wpf-form .wpf-form__submit { background: var(--wpf-color-button-bg, var(--wpf-gradient)) !important; color: var(--wpf-color-button-text) !important; }
.wpf-form.wpf-form .wpf-form__back { background: transparent !important; color: var(--wpf-color-subtitle) !important; }
.wpf-form.wpf-form .wpf-form__filebtn { background: var(--wpf-color-input-bg) !important; color: var(--wpf-color-text) !important; }
.wpf-form.wpf-form .wpf-form__slot,
.wpf-form.wpf-form .wpf-form__calnav { background: var(--wpf-color-input-bg) !important; color: var(--wpf-color-text) !important; }
.wpf-form.wpf-form .wpf-form__calday { background: transparent !important; color: var(--wpf-color-text) !important; }
/* Gewählte Zustände MÜSSEN die Grund-Einfärbung schlagen (ebenfalls !important). */
.wpf-form.wpf-form .wpf-form__slot.is-selected,
.wpf-form.wpf-form .wpf-form__calday.is-selected { background: var(--wpf-color-button-bg, var(--wpf-gradient)) !important; color: var(--wpf-color-button-text) !important; }

/* --- Rahmen/Radius der Kern-Elemente = ebenfalls Token-Anwendung -----------
   Themes setzen `border`/`box-shadow` auf generische button/input oft MIT
   !important – das schlägt jede nicht-wichtige Regel unabhängig von der
   Spezifität. Daher hier !important im hochspezifischen Scope; Zustände
   (hover/selected/focus) auf noch höherer Spezifität nachgezogen, damit die
   Auswahl-/Fokusringe weiterhin gewinnen. */
.wpf-form.wpf-form .wpf-form__card { border: 2px solid var(--wpf-color-card-border) !important; border-radius: var(--wpf-radius-card) !important; box-shadow: var(--wpf-shadow-card) !important; }
.wpf-form.wpf-form .wpf-form__card:hover { border-color: var(--wpf-color-card-active, var(--wpf-color-primary)) !important; }
.wpf-form.wpf-form .wpf-form__card.is-selected { border-color: var(--wpf-color-card-active, var(--wpf-color-primary)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpf-color-card-active, var(--wpf-color-primary)) 25%, transparent) !important; }
.wpf-form.wpf-form .wpf-form__input { border: 1px solid var(--wpf-color-input-border) !important; border-radius: var(--wpf-radius-input) !important; box-shadow: none !important; }
.wpf-form.wpf-form .wpf-form__input:focus { outline: none !important; border-color: var(--wpf-color-input-focus, var(--wpf-color-primary)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpf-color-input-focus, var(--wpf-color-primary)) 25%, transparent) !important; }
.wpf-form.wpf-form .wpf-form__inputwrap.has-icon { border: 1px solid var(--wpf-color-input-border) !important; border-radius: var(--wpf-radius-input) !important; }
.wpf-form.wpf-form .wpf-form__inputwrap.has-icon .wpf-form__input { border: 0 !important; box-shadow: none !important; }
.wpf-form.wpf-form .wpf-form__next,
.wpf-form.wpf-form .wpf-form__submit { border: 0 !important; border-radius: var(--wpf-radius-button) !important; box-shadow: none !important; }
.wpf-form.wpf-form .wpf-form__back { border: 1px solid var(--wpf-color-input-border) !important; border-radius: var(--wpf-radius-button) !important; box-shadow: none !important; }
.wpf-form.wpf-form .wpf-form__filebtn { border: 1px solid var(--wpf-color-input-border) !important; border-radius: var(--wpf-radius-button) !important; box-shadow: none !important; }

/* Design-Schrift auf den Kern-Elementen gegen Theme-`.x button{font-family!important}`
   absichern (die bestehende `.wpf-form *`-Regel ist nur 0,1,0). */
.wpf-form.wpf-form :is(button, input, textarea, select, .wpf-form__card, .wpf-form__title, .wpf-form__subtitle, .wpf-form__label) { font-family: var(--wpf-font-family) !important; }

/* --- Karten-Grid: feste Spaltenzahl gegen inhaltsabhängiges Theme-Verhalten ---
   Die Kachelbreite MUSS bei 3 wie bei 4 Optionen identisch sein. Deshalb Flex-
   Container + feste Flex-Basis hart absichern (letzte Instanz: !important), damit
   Theme-Regeln wie `button{width:100%}` oder `flex:1` die Kacheln nicht kippen. */
.wpf-form.wpf-form .wpf-form__cards { display: flex; flex-wrap: wrap; }
.wpf-form.wpf-form .wpf-form__cards--grid { display: flex !important; flex-wrap: wrap !important; justify-content: center; }
.wpf-form.wpf-form .wpf-form__cards--grid > .wpf-form__gcard,
.wpf-form.wpf-form .wpf-form__cards--grid > .wpf-form__cardwrap {
	flex: 0 0 calc((100% - 36px) / 4) !important;
	max-width: calc((100% - 36px) / 4) !important;
	width: auto !important;
}
.wpf-form.wpf-form .wpf-form__cards--tiles { display: flex !important; flex-wrap: wrap !important; }
.wpf-form.wpf-form .wpf-form__cards--tiles > .wpf-form__tile {
	flex: 0 0 calc((100% - 12px) / 2) !important;
	max-width: calc((100% - 12px) / 2) !important;
	width: auto !important;
}
.wpf-form.wpf-form .wpf-form__cards--list { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; }
.wpf-form.wpf-form .wpf-form__cards--list > .wpf-form__row { width: 100%; max-width: none; }
/* Quadratisches Format + Icon/Label-Achse gegen Theme-Overrides sichern. */
.wpf-form.wpf-form .wpf-form__gcard,
.wpf-form.wpf-form .wpf-form__cards--tiles > .wpf-form__tile { flex-direction: column; aspect-ratio: 1 / 1; }
.wpf-form.wpf-form .wpf-form__cardicon { width: 44px; height: 44px; }
.wpf-form.wpf-form .wpf-form__cardicon svg,
.wpf-form.wpf-form .wpf-form__cardicon .wpf-icon { width: 100%; height: 100%; }

/* --- IMG-Icons: Größe kommt IMMER vom Wrapper, nie vom Theme -----------------
   Page-Builder-Themes streuen gern `img { width:100% !important; max-width:100%
   !important; height:auto !important }` (z. B. .img-max). Ein 150x150-Icon-IMG
   würde damit auf Kachelbreite gezwungen und bläht die Kachel auf – bei nicht
   voller Reihe (3 statt 4) entstünden andere Kachelmaße. Deshalb füllt das IMG
   seinen fix dimensionierten Wrapper exakt (width/height UND max-/min-Werte hart),
   Ausnahme Kontaktfeld-Icon: dort ist 22px im 46px-Wrapper das Soll. */
.wpf-form.wpf-form .wpf-form__cardicon :is(img, svg),
.wpf-form.wpf-form .wpf-form__navicon :is(img, svg),
.wpf-form.wpf-form .wpf-form__submiticon :is(img, svg) {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	display: block;
	object-fit: contain;
}
.wpf-form.wpf-form .wpf-form__inputicon :is(img, svg) {
	width: 22px !important;
	height: 22px !important;
	max-width: 22px !important;
	max-height: 22px !important;
	display: block;
	object-fit: contain;
}
/* Kachelmaß vom Inhalt entkoppeln: selbst ein fehlgeleitetes Bild kann die
   Kachel nie mehr aufblähen (Grid-/Flex-Basis + Overflow sind maßgeblich). */
.wpf-form.wpf-form .wpf-form__card { min-width: 0 !important; overflow: hidden; }
.wpf-form.wpf-form .wpf-form__cardicon { flex: 0 0 auto !important; overflow: hidden; }

/* =========================================================================
   WerkPlus-System (L1.1, 27.10.2026): Ergänzungen zum Plugin-CSS
   (eigene Formularseite, Hinweise, Fokus, Vorschau-Leiste)
   ========================================================================= */
.wpf-form__hint { padding: 10px 12px; border-radius: var(--wpf-radius-input); background: color-mix(in srgb, var(--wpf-color-primary) 12%, transparent); color: var(--wpf-color-text); font-size: 14px; line-height: 1.45; }
.wpf-form__hint:empty { display: none; }
.wpf-form__hpwrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wpf-form__privacy { align-items: flex-start; line-height: 1.4; }
.wpf-form__privacy input[type="checkbox"] { margin-top: 3px; }
.wpf-form__privacy a { color: var(--wpf-color-primary); text-decoration: underline; }
.wpf-form__card:focus-visible, .wpf-form__next:focus-visible, .wpf-form__submit:focus-visible, .wpf-form__back:focus-visible, .wpf-form__calday:focus-visible, .wpf-form__slot:focus-visible { outline: 3px solid color-mix(in srgb, var(--wpf-color-primary) 60%, transparent) !important; outline-offset: 2px; }
.wpf-form__submit[disabled] { opacity: 0.6; cursor: progress; }
html.wpf-page, html.wpf-page body { margin: 0; padding: 0; }
html.wpf-page body { background: transparent; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #1a1a2e; }
html.wpf-standalone body { background: #f6f7f9; }
.wpf-page__wrap { padding: 24px 16px 32px; }
html.wpf-embed .wpf-page__wrap { padding: 8px 4px; }
.wpf-page__brand { display: flex; justify-content: center; margin: 0 auto 18px; max-width: 680px; }
.wpf-page__brand img { max-height: 44px; max-width: 220px; }
.wpf-page__foot { max-width: 680px; margin: 24px auto 0; text-align: center; font-size: 12px; color: #6b6b7b; }
.wpf-page__foot a { color: inherit; margin: 0 6px; }
.wpf-page__msg { max-width: 640px; margin: 24px auto; padding: 18px; border-radius: 12px; background: #fff; border: 1px solid #e3e3ea; text-align: center; }
.wpf-page__testbar { max-width: 680px; margin: 0 auto 12px; padding: 8px 12px; border-radius: 8px; background: #fffaeb; color: #93370d; font-size: 13px; text-align: center; }

/* =========================================================================
   Formular-Umbau (27.10.2026, UI-SOLL 7/14/15/25): Kopfzeile mit Vertrauenszeile,
   Kontaktformular mit Formularbreite, Button-Ausrichtung und Pflicht-Sternchen
   ========================================================================= */
.wpf-form__header { text-align: center; margin: 0 0 14px; }
.wpf-form.wpf-form .wpf-form__headertitle { margin: 0; color: var(--wpf-color-text) !important; font-size: var(--wpf-size-header, 20px); font-weight: var(--wpf-weight-header, 700); line-height: 1.3; }
.wpf-form__header + .wpf-form__progress { margin-top: 4px; }
/* Link „Datenschutz“ unter jedem Formular (klein, dezent) */
.wpf-form__legal { margin: 10px 0 0; text-align: center; font-size: 12px; line-height: 1.4; }
.wpf-form__legal .wpf-form__legallink { color: var(--wpf-color-subtitle); text-decoration: underline; }
.wpf-form__legal .wpf-form__legallink:hover { color: var(--wpf-color-primary); }

.wpf-form__contactwrap { width: 100%; margin: 0 auto; }
.wpf-form__req { margin-left: 3px; color: var(--wpf-color-primary); }
.wpf-form__foot--center { justify-content: center; }
.wpf-form__foot--center .wpf-form__submit { margin-left: 0; }
.wpf-form__foot--left .wpf-form__submit { margin-left: 0; }
.wpf-form__foot--right .wpf-form__submit { margin-left: auto; }
/* Mit Zurück-Knopf: Zurück bleibt links, Absenden nach der Ausrichtung im übrigen Raum. */
.wpf-form__foot--center .wpf-form__back + .wpf-form__submit { margin-left: auto; margin-right: auto; }
.wpf-form__foot--left .wpf-form__back + .wpf-form__submit { margin-left: 0; }
.wpf-form__inputwrap.has-icon:has(textarea) { align-items: stretch; }
.wpf-form__inputwrap.has-icon:has(textarea) .wpf-form__inputicon { align-items: flex-start; padding-top: 12px; }

@media (max-width: 767px) {
	.wpf-form__header { margin-bottom: 12px; }
	.wpf-form.wpf-form .wpf-form__headertitle { font-size: calc(var(--wpf-size-header, 20px) - 2px); }
	.wpf-page__wrap { padding: 16px 12px 24px; }
}

/* =========================================================================
   Barrierefreiheit (28.10.2026, Regelwerk §8.1/§8.3): Tippflächen ≥ 44 px,
   Eingabeschrift ≥ 16 px am Handy (kein iOS-Zoom). Aussehen bleibt: nur
   Mindestmaße, keine neuen Farben. Doppelte Wurzelklasse wie Bundle R, damit
   Seiten-CSS (Premium-Seiten, Themes) die Maße nicht wieder drückt.
   ========================================================================= */
.wpf-form.wpf-form .wpf-form__next,
.wpf-form.wpf-form .wpf-form__submit,
.wpf-form.wpf-form .wpf-form__back { min-height: 44px; min-width: 44px; }
.wpf-form.wpf-form .wpf-form__card { min-height: 44px; }
.wpf-form.wpf-form .wpf-form__slot { min-height: 44px; }
.wpf-form.wpf-form .wpf-form__calnav { width: 44px; height: 44px; }
.wpf-form.wpf-form .wpf-form__uploadremove { width: 44px; height: 44px; }
.wpf-form.wpf-form .wpf-form__filebtn { min-height: 44px; }
/* Datenschutz-Zustimmung: die ganze Zeile (label) ist die Tippfläche. */
.wpf-form.wpf-form .wpf-form__privacy { min-height: 44px; padding: 4px 0; cursor: pointer; }
.wpf-form.wpf-form .wpf-form__privacy input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; }
/* Link „Datenschutz“ unter dem Formular: Schrift bleibt klein, die Tippfläche wächst unsichtbar (44 px hoch, seitlich Luft). */
.wpf-form__legal { margin: 0; }
.wpf-form.wpf-form .wpf-form__legal .wpf-form__legallink { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; }

/* Text in der Hauptfarbe auf dem Formular-Grund: abgedunkelte Hauptfarbe, wenn sie dort unter 4,5:1 liegt (forms.js setzt
   --wpf-color-primary-ink nur dann). Flächen, Rahmen und Symbole behalten die Markenfarbe. */
.wpf-form.wpf-form .wpf-form__privacy a,
.wpf-form.wpf-form .wpf-form__privacylink,
.wpf-form.wpf-form .wpf-form__req,
.wpf-form.wpf-form .wpf-form__sliderval { color: var(--wpf-color-primary-ink, var(--wpf-color-primary)); }
.wpf-form.wpf-form .wpf-form__legal .wpf-form__legallink:hover { color: var(--wpf-color-primary-ink, var(--wpf-color-primary)); }

@media (max-width: 767px) {
	.wpf-form.wpf-form .wpf-form__input,
	.wpf-form.wpf-form .wpf-form__range { font-size: 16px; }
}

/* Kapselung gegen Seiten-CSS (Premium-Seiten legen ihr CSS in `@layer premium`): Bei !important gewinnt die ZUERST
   angelegte Ebene, ungeschichtetes !important verliert gegen jede Ebene. forms.css steht im <head> vor dem Seiten-Stil,
   `wpf-guard` ist damit die erste Ebene – deren !important-Werte kann kein `button{…!important}` der Seite überdecken.
   Nur auf Premium-Seiten (body.wp-premium; eigenes Formular-CSS der Agentur auf /f/ bleibt wirksam), nur Lesbarkeit und
   Tippflächen; die übrigen Formular-Stile bleiben ungeschichtet (schlagen normale Seiten-Regeln ohnehin). */
@layer wpf-guard {
	.wp-premium .wpf-form.wpf-form .wpf-form__next,
	.wp-premium .wpf-form.wpf-form .wpf-form__submit { background: var(--wpf-color-button-bg, var(--wpf-gradient)) !important; color: var(--wpf-color-button-text) !important; opacity: 1 !important; min-height: 44px !important; min-width: 44px !important; visibility: visible !important; }
	.wp-premium .wpf-form.wpf-form .wpf-form__submit[disabled] { opacity: 0.6 !important; }
	.wp-premium .wpf-form.wpf-form :is(.wpf-form__next, .wpf-form__submit, .wpf-form__back) :is(span, svg) { color: inherit !important; }
	.wp-premium .wpf-form.wpf-form .wpf-form__back { color: var(--wpf-color-subtitle) !important; min-height: 44px !important; min-width: 44px !important; }
	.wp-premium .wpf-form.wpf-form .wpf-form__back.is-disabled { opacity: 0.4 !important; }
	.wp-premium .wpf-form.wpf-form .wpf-form__card { background: var(--wpf-color-card-bg) !important; color: var(--wpf-color-text) !important; min-height: 44px !important; }
	.wp-premium .wpf-form.wpf-form :is(.wpf-form__title, .wpf-form__label, .wpf-form__headertitle, .wpf-form__cardlabel, .wpf-form__cardlabel-below) { color: var(--wpf-color-text) !important; }
	.wp-premium .wpf-form.wpf-form .wpf-form__subtitle { color: var(--wpf-color-subtitle) !important; }
	.wp-premium .wpf-form.wpf-form :is(input.wpf-form__input, textarea.wpf-form__input, select.wpf-form__input) { color: var(--wpf-color-text) !important; }
	.wp-premium .wpf-form.wpf-form .wpf-form__legal .wpf-form__legallink { color: var(--wpf-color-subtitle) !important; display: inline-flex !important; min-height: 44px !important; min-width: 44px !important; }
	.wp-premium .wpf-form.wpf-form .wpf-form__legal .wpf-form__legallink:hover { color: var(--wpf-color-primary-ink, var(--wpf-color-primary)) !important; }
	.wp-premium .wpf-form.wpf-form :is(.wpf-form__privacy a, .wpf-form__privacylink, .wpf-form__req) { color: var(--wpf-color-primary-ink, var(--wpf-color-primary)) !important; }
	.wp-premium .wpf-form.wpf-form .wpf-form__privacy { color: var(--wpf-color-subtitle) !important; min-height: 44px !important; }
}
@media (max-width: 767px) {
	@layer wpf-guard {
		.wp-premium .wpf-form.wpf-form :is(input.wpf-form__input, textarea.wpf-form__input, select.wpf-form__input) { font-size: 16px !important; }
	}
}