/**
 * Contact Form 7 im Stil des Themes.
 *
 * Wird nur geladen, wenn Contact Form 7 aktiv ist (inc/setup.php).
 *
 * Werte anpassen – zentral in theme.json → settings.custom.form:
 *   radius          Eckenrundung der Felder und Buttons   → --wp--custom--form--radius
 *   paddingY/X      Innenabstand oben/unten, links/rechts → --wp--custom--form--padding-y/-x
 *   lineHeight      Zeilenhöhe im Feld                    → --wp--custom--form--line-height
 *   fieldHeight     Mindesthöhe einzeiliger Felder        → --wp--custom--form--field-height
 *   textareaHeight  Mindesthöhe des Nachrichtenfelds      → --wp--custom--form--textarea-height
 * Die Fallback-Werte hinter dem Komma greifen, falls theme.json nichts liefert.
 */

.wpcf7 {
	--twid-form-radius: var(--wp--custom--form--radius, 6px);
	--twid-form-padding-y: var(--wp--custom--form--padding-y, 0.85rem);
	--twid-form-padding-x: var(--wp--custom--form--padding-x, 1rem);
	--twid-form-line-height: var(--wp--custom--form--line-height, 1.6);
	--twid-form-field-height: var(--wp--custom--form--field-height, 3.2rem);
	--twid-form-textarea-height: var(--wp--custom--form--textarea-height, 9rem);
}

/* ---------- Aufbau ---------- */

.wpcf7 form > p,
.wpcf7 form .wpcf7-form > p {
	margin: 0 0 1.1rem;
}

.wpcf7 label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

/* ---------- Eingabefelder ---------- */

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-email,
.wpcf7 .wpcf7-tel,
.wpcf7 .wpcf7-url,
.wpcf7 .wpcf7-number,
.wpcf7 .wpcf7-date,
.wpcf7 .wpcf7-select,
.wpcf7 .wpcf7-textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: var(--twid-form-field-height);
	margin: 0;
	padding: var(--twid-form-padding-y) var(--twid-form-padding-x);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--twid-form-radius);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: var(--twid-form-line-height);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 .wpcf7-textarea {
	/* Feste Starthöhe statt der 10 Zeilen, die CF7 per rows="10" vorgibt; vergrößerbar. */
	height: var(--twid-form-textarea-height);
	min-height: var(--twid-form-textarea-height);
	resize: vertical;
}

.wpcf7 .wpcf7-select {
	appearance: none;
	padding-right: calc(var(--twid-form-padding-x) + 1.5rem);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132846' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--twid-form-padding-x) center;
	background-size: 1rem;
}

.wpcf7 .wpcf7-form-control::placeholder {
	color: var(--wp--preset--color--steel);
	opacity: 0.8;
}

.wpcf7 .wpcf7-form-control:hover:not(.wpcf7-submit) {
	border-color: var(--wp--preset--color--mist);
}

.wpcf7 .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--amber);
	box-shadow: 0 0 0 3px var(--wp--preset--color--amber-soft);
}

/* ---------- Checkboxen, Radio-Buttons, Zustimmung ---------- */

.wpcf7 .wpcf7-list-item {
	margin: 0 1rem 0.4rem 0;
}

.wpcf7 .wpcf7-acceptance label,
.wpcf7 .wpcf7-checkbox label,
.wpcf7 .wpcf7-radio label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.2rem 0 0;
	accent-color: var(--wp--preset--color--amber);
}

/* ---------- Absenden-Button ---------- */

.wpcf7 .wpcf7-submit {
	display: inline-block;
	min-height: var(--twid-form-field-height);
	padding: var(--twid-form-padding-y) 1.8rem;
	border: 0;
	border-radius: var(--twid-form-radius);
	background-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wpcf7 .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--amber-dark);
	transform: translateY(-1px);
}

.wpcf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
	box-shadow: none;
}

.wpcf7 .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.wpcf7 .wpcf7-spinner {
	vertical-align: middle;
}

/* ---------- Fehler und Rückmeldungen ---------- */

.wpcf7 .wpcf7-not-valid {
	border-color: #d63638;
}

.wpcf7 .wpcf7-not-valid:focus {
	box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.15);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: #d63638;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.85rem 1rem;
	border-width: 1px;
	border-radius: var(--twid-form-radius);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output:empty {
	display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450;
	background: #edfaef;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--wp--preset--color--amber);
	background: var(--wp--preset--color--amber-soft);
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7 .wpcf7-form-control,
	.wpcf7 .wpcf7-submit {
		transition: none;
	}
}