/*
 * Kontakt- und Anfrageformular.
 *
 * Über die theme.json-Variablen gebaut, damit das Formular der Style-Variation
 * der Seite folgt; die Rückfallwerte gelten unter fremden Themes.
 */

.sa-formular {
	--sa-feld-rahmen: var(--wp--preset--color--linie, #bdb7aa);
	--sa-feld-grund: var(--wp--preset--color--papier, #fff);
	--sa-feld-text: var(--wp--preset--color--tinte, #1f1f1f);
	--sa-fehler: #b32d2e;
	--sa-erfolg: #1d6b3a;

	box-sizing: border-box;
	max-inline-size: 34rem;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
	text-align: start;
}

.sa-formular__feld {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
}

.sa-formular label {
	display: block;
	margin-block-end: 0.35rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.sa-formular input:not([type="hidden"]),
.sa-formular textarea {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 44px;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--sa-feld-rahmen);
	border-radius: 6px;
	background: var(--sa-feld-grund);
	color: var(--sa-feld-text);
	font: inherit;
	font-size: 1rem;
}

.sa-formular textarea {
	resize: vertical;
}

.sa-formular input[readonly] {
	background: transparent;
	border-style: dashed;
}

.sa-formular input:focus-visible,
.sa-formular textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--akzent, currentColor);
	outline-offset: 2px;
}

.sa-formular input[aria-invalid="true"],
.sa-formular textarea[aria-invalid="true"] {
	border-color: var(--sa-fehler);
}

.sa-formular__pflicht {
	color: var(--sa-fehler);
}

.sa-formular__fehler {
	display: block;
	margin-block-start: 0.25rem;
	color: var(--sa-fehler);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.sa-formular__fehler:empty {
	display: none;
}

.sa-formular__hinweis {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	opacity: 0.85;
}

.sa-formular__meldung:focus {
	outline: none;
}

.sa-formular__meldung p {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-inline-start: 4px solid currentColor;
	background: var(--sa-feld-grund);
	color: var(--sa-feld-text);
}

.sa-formular__meldung .is-erfolg {
	border-color: var(--sa-erfolg);
}

.sa-formular__meldung .is-fehler {
	border-color: var(--sa-fehler);
}

.sa-formular[aria-busy="true"] [type="submit"] {
	opacity: 0.6;
	cursor: progress;
}