/*
 * STABAmix – Gestaltung der Plugins (Teil Formulare, plugins-formulare.css)
 * Abschnitt 1 aus plugins.css. Lädt nur auf Seiten mit WPForms-Formular, nach plugins.css
 * (Werte --stxp-… aus Abschnitt 0). Grundsätze siehe Kopf von plugins.css.
 */

/* ==========================================================================
   1. WPForms Lite (modernes Markup)
   Gilt für .stx-formular .wpforms-container und jedes andere Formular.
   WPForms setzt seine Variablen zusätzlich auf #wpforms-<ID> (aus den
   Formular-Einstellungen) – darum hier mit !important.
   ========================================================================== */

div.wpforms-container-full {
	--wpforms-field-border-radius: 8px !important;
	--wpforms-field-border-style: solid !important;
	--wpforms-field-border-size: 1px !important;
	--wpforms-field-background-color: #FFFFFF !important;
	--wpforms-field-border-color: var(--stxp-feldrand) !important;
	--wpforms-field-border-color-spare: var(--stxp-muted) !important;
	--wpforms-field-text-color: var(--stxp-ink) !important;
	--wpforms-field-menu-color: #FFFFFF !important;
	--wpforms-label-color: var(--stxp-ink) !important;
	--wpforms-label-sublabel-color: var(--stxp-muted) !important;
	--wpforms-label-error-color: var(--stxp-fehler) !important;
	--wpforms-button-border-radius: 8px !important;
	--wpforms-button-border-style: none !important;
	--wpforms-button-border-size: 1px !important;
	--wpforms-button-background-color: var(--stxp-blau) !important;
	--wpforms-button-border-color: var(--stxp-blau) !important;
	--wpforms-button-text-color: #FFFFFF !important;
	--wpforms-page-break-color: var(--stxp-blau) !important;
	--wpforms-field-size-input-height: 44px !important;
	--wpforms-field-size-input-spacing: 6px !important;
	--wpforms-field-size-font-size: 16px !important;
	--wpforms-field-size-line-height: 1.4 !important;
	--wpforms-field-size-padding-h: 12px !important;
	/* WPForms zeichnet den Kreis/das Kästchen 2 px grösser als diesen Wert: 16 → sichtbar 18 px wie im Entwurf */
	--wpforms-field-size-checkbox-size: 16px !important;
	--wpforms-field-size-sublabel-spacing: 4px !important;
	--wpforms-label-size-font-size: 15px !important;
	--wpforms-label-size-line-height: 1.4 !important;
	--wpforms-label-size-sublabel-font-size: 14px !important;
	--wpforms-label-size-sublabel-line-height: 1.4 !important;
	--wpforms-button-size-font-size: 16px !important;
	--wpforms-button-size-height: 44px !important;
	--wpforms-button-size-padding-h: 24px !important;
	--wpforms-button-size-margin-top: 8px !important;
	--wpforms-container-padding: 0px !important;
	--wpforms-container-border-style: none !important;
	--wpforms-container-shadow-size-box-shadow: none !important;
	--wpforms-background-color: transparent !important;
	--wpforms-background-url: none !important;
}

body div.wpforms-container-full,
body div.wpforms-container-full:not(:empty) {
	margin: 0;
	max-width: 100%;
	font-family: var(--stxp-sans);
	color: var(--stxp-text);
}

/* Felder untereinander mit 16 px Abstand (wie im Entwurf) */
body div.wpforms-container-full .wpforms-form .wpforms-field {
	padding-top: 8px;
	padding-bottom: 8px;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-container > .wpforms-field:first-child {
	padding-top: 0;
}

/* WPForms setzt ein unsichtbares Spam-Fangfeld (erkennbar an data-field-type) bei jedem Aufruf an eine
   zufällige Stelle. Steht es zuoberst, gilt das nächste Feld als erstes – sonst 8 px zu viel Abstand. */
body div.wpforms-container-full .wpforms-form .wpforms-field-container > .wpforms-field[data-field-type]:first-child + .wpforms-field {
	padding-top: 0;
}

/* Beschriftung 15/500 ink, Pflicht-Stern dezent */
body div.wpforms-container-full .wpforms-form .wpforms-field-label {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--stxp-ink);
}

body div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--stxp-muted);
	font-weight: 400;
}

/* Felder volle Breite (WPForms begrenzt «mittel» auf 60 %, «klein» auf 25 %) */
body div.wpforms-container-full .wpforms-form input.wpforms-field-small,
body div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
body div.wpforms-container-full .wpforms-form input.wpforms-field-large,
body div.wpforms-container-full .wpforms-form select.wpforms-field-small,
body div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
body div.wpforms-container-full .wpforms-form select.wpforms-field-large,
body div.wpforms-container-full .wpforms-form textarea.wpforms-field-small,
body div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium,
body div.wpforms-container-full .wpforms-form textarea.wpforms-field-large,
body div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-small,
body div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium,
body div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-large {
	width: 100%;
	max-width: 100%;
}

body div.wpforms-container-full .wpforms-form input::placeholder,
body div.wpforms-container-full .wpforms-form textarea::placeholder {
	color: var(--stxp-muted);
	opacity: 1;
}

body div.wpforms-container-full .wpforms-form textarea {
	line-height: 1.5;
	padding: 10px 12px;
	min-height: 150px;
}

/* Hinweis unter einem Feld (z. B. «Der Testzeitraum ist …») */
body div.wpforms-container-full .wpforms-form .wpforms-field-description {
	font-size: 14px;
	line-height: 1.4;
	color: var(--stxp-muted);
	margin-top: 4px;
}

/* Auswahl (Radio) als Raster wie im Entwurf: 2–3 Spalten, auf dem Handy eine */
body div.wpforms-container-full .wpforms-form .wpforms-field-radio:not(.wpforms-list-inline):not(.wpforms-list-2-columns):not(.wpforms-list-3-columns) ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 8px 16px;
}

/* «Inline»-Auswahl (Einstellung im Formular) ebenfalls als Raster wie im Entwurf
   (Kontakt: «Wie sind Sie auf uns aufmerksam geworden?» zweispaltig, Handy einspaltig) */
body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-radio.wpforms-list-inline ul,
body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-checkbox.wpforms-list-inline ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 6px 16px;
}

body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-radio ul li,
body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-checkbox ul li {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-checkbox ul li + li {
	margin-top: 8px;
}

/* Sichtbarer Kreis/Kästchen 18 × 18 an derselben Stelle wie im Entwurf (WPForms zeichnet
   ihn 2 px links und oberhalb des Feldes, darum 2 px Rand links) */
body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-radio ul li input,
body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-checkbox ul li input {
	flex: none;
	min-width: 16px;
	margin: 4px 0 0 2px;
}

body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-radio ul li input {
	margin-top: 5px;
}

/* Abstand Kästchen–Text: nur das gap (WPForms setzt zusätzlich 12 px Einzug) */
body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-radio ul li input + label,
body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-checkbox ul li input + label {
	padding-inline-start: 0;
	line-height: 1.6;
}

body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-radio .wpforms-field-label-inline {
	font-size: 16px;
	color: var(--stxp-text);
}

body div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-checkbox .wpforms-field-label-inline {
	font-size: 15px;
	color: var(--stxp-text);
}

/* Titel einer Auswahlgruppe (legend) wie eine Feldbeschriftung, 8 px Luft darunter (Entwurf: 6 px + Abstand 8 px) */
body div.wpforms-container-full .wpforms-form .wpforms-field fieldset > legend.wpforms-field-label {
	padding: 0 0 8px;
	margin: 0;
}

/* Name mit Unterbeschriftungen (Vorname / Nachname): wie im Entwurf zwei Felder
   nebeneinander mit eigener Beschriftung darüber; der Gruppentitel («Name») bleibt
   für Screenreader erhalten, wird aber nicht angezeigt. */
body div.wpforms-container-full .wpforms-form .wpforms-field-name:has(.wpforms-field-row) legend.wpforms-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row.wpforms-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	max-width: 100%;
}

/* Clearfix-Pseudoelemente von WPForms würden im Flex-Raster als leere Spalten zählen */
body div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row.wpforms-field-row::before,
body div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row.wpforms-field-row::after {
	content: none;
	display: none;
}

body div.wpforms-container-full .wpforms-form .wpforms-field .wpforms-field-row .wpforms-field-row-block.wpforms-field-row-block {
	display: flex;
	flex-direction: column;
	flex: 1 1 170px;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 0;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row-block .wpforms-field-sublabel {
	order: -1;
	min-width: 0;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--stxp-ink);
}

/* Zwei einfache Namensfelder direkt hintereinander (Kontakt: «Vorname / Nachname» und
   «Firma») wie im Entwurf nebeneinander; wird es zu schmal, untereinander. Alle Felder
   behalten 8 px oben/unten, der Rand oben wird über die Hülle ausgeglichen.
   (Einfaches Namensfeld = Feld mit direktem <input>; :has() darf nicht verschachtelt sein.) */
body div.wpforms-container-full .wpforms-form .wpforms-field-container:has(> .wpforms-field-name + .wpforms-field-name > input) {
	display: flex;
	flex-wrap: wrap;
	column-gap: 12px;
	margin-top: -8px;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-container:has(> .wpforms-field-name + .wpforms-field-name > input) > .wpforms-field {
	box-sizing: border-box;
	flex: 1 1 100%;
	min-width: 0;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-container:has(> .wpforms-field-name + .wpforms-field-name > input) > .wpforms-field:first-child {
	padding-top: 8px;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-container:has(> .wpforms-field-name + .wpforms-field-name > input) > .wpforms-field-name:has(> input):has(+ .wpforms-field-name > input),
body div.wpforms-container-full .wpforms-form .wpforms-field-container:has(> .wpforms-field-name + .wpforms-field-name > input) > .wpforms-field-name:has(> input) + .wpforms-field-name:has(> input) {
	flex: 1 1 220px;
}

/* Pflichtfeld-Stern: Der Entwurf zeigt keine Sterne, sondern den Satz
   «Alle Felder sind Pflichtfelder.» (steht auf den Seiten). Die Felder bleiben
   technisch Pflichtfelder (required). Nur in der Formular-Hülle der Seiten. */
.stx-formular div.wpforms-container-full .wpforms-form .wpforms-required-label {
	display: none;
}

/* Fehlermeldungen: Logo-Rot dunkel, gut lesbar */
body div.wpforms-container-full .wpforms-form label.wpforms-error,
body div.wpforms-container-full .wpforms-form em.wpforms-error {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--stxp-fehler);
	margin-top: 6px;
}

body div.wpforms-container-full .wpforms-form .wpforms-error-container,
body div.wpforms-container-full .wpforms-form .wpforms-error-alert,
body div.wpforms-container-full .wpforms-error-noscript {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--stxp-fehler);
	border-radius: 8px;
	background: var(--stxp-fehler-flaeche);
	color: var(--stxp-fehler);
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
}

body div.wpforms-container-full .wpforms-form .wpforms-error-container.wpforms-error-styled-container .wpforms-error {
	padding: 0;
	border: 0;
}

/* Absende-Knopf = blauer Hauptknopf (Höhe 44 wie im Entwurf der Formulare) */
body div.wpforms-container-full .wpforms-form button[type=submit],
body div.wpforms-container-full .wpforms-form .wpforms-page-button {
	min-width: 0;
	max-width: 100%;
	font-family: var(--stxp-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
}

body div.wpforms-container-full .wpforms-form button[type=submit]:hover,
body div.wpforms-container-full .wpforms-form button[type=submit]:active,
body div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
body div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
	background: var(--stxp-blau-dunkel);
	color: #FFFFFF;
}

/* Bestätigung nach dem Absenden als Karte */
body div.wpforms-container-full .wpforms-confirmation-container-full,
body div.wpforms-container-full .wpforms-confirmation-container-full:not(.wpforms-redirection-message),
body div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
	margin: 0;
	padding: clamp(20px, 4vw, 28px);
	background: var(--stxp-weiss);
	border: 1px solid var(--stxp-line);
	border-radius: 12px;
	box-shadow: inset 4px 0 0 var(--stxp-gruen);
	color: var(--stxp-text);
	font-size: 16px;
	line-height: 1.6;
}

body div.wpforms-container-full .wpforms-confirmation-container-full p {
	margin: 0 0 12px;
}

body div.wpforms-container-full .wpforms-confirmation-container-full p:last-child {
	margin: 0;
}

/* Hülle auf den Seiten (Klasse aus §5) */
.stx-formular {
	min-width: 0;
	max-width: 100%;
}