/* Utopia Forms — Basislayout. Farb-/Typografie-Feinschliff liegt zusätzlich in theme/utopia/assets/css/theme.css. */

.utopia-form {
	max-width: 640px;
}

.utopia-form__form--inline {
	max-width: none;
}

.utopia-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.utopia-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media ( max-width: 600px ) {
	.utopia-form__row {
		grid-template-columns: 1fr;
	}
}

.utopia-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.utopia-form__field label,
.utopia-form__consent label {
	font-size: var( --wp--preset--font-size--body-sm, 0.9375rem );
	font-weight: 500;
}

.utopia-form input[type='text'],
.utopia-form input[type='email'],
.utopia-form select,
.utopia-form textarea {
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var( --wp--preset--color--border, #e7e2d6 );
	border-radius: var( --wp--custom--radius--sm, 8px );
	background: var( --wp--preset--color--surface, #fff );
	color: var( --wp--preset--color--text, #1c1917 );
	font-family: inherit;
	font-size: 1rem;
	width: 100%;
	transition: box-shadow 150ms ease-out, border-color 150ms ease-out;
}

.utopia-form textarea {
	min-height: 120px;
	resize: vertical;
}

.utopia-form input:focus-visible,
.utopia-form select:focus-visible,
.utopia-form textarea:focus-visible {
	outline: none;
	border-color: var( --wp--preset--color--brand, #16a34a );
	box-shadow: var( --wp--custom--shadow--focus, 0 0 0 3px rgba( 22, 163, 74, 0.35 ) );
}

.utopia-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var( --wp--preset--font-size--body-sm, 0.9375rem );
	color: var( --wp--preset--color--muted, #6b6a62 );
}

.utopia-form__consent input {
	margin-top: 4px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.utopia-form__actions {
	margin: 8px 0 0;
}

.utopia-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 160px;
	padding: 12px 28px;
	border: none;
	border-radius: var( --wp--custom--radius--sm, 8px );
	/* Bonus-Fix (bei der Verifikation von Fund #9/#15 per Lighthouse entdeckt, nicht Teil der
	   19 Befunde): weißer Text auf "brand" (#16a34a) hat nur 3,3:1 Kontrast -- derselbe Fehler wie
	   beim Hero-CTA, hier direkt mitbehoben statt eine bekannte Kopie des Bugs stehen zu lassen.
	   "brand-hover" ist seit Fix-Runde 1 die kontraststarke Solid-Button-Farbe (5,4:1). */
	background: var( --wp--preset--color--brand-hover, #107a37 );
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 200ms ease-out, transform 150ms ease-out;
}

.utopia-form__submit:hover {
	background: var( --wp--preset--color--brand-active, #0c5d2a );
}

.utopia-form__submit:disabled {
	cursor: default;
	opacity: 0.85;
}

.utopia-form__submit.is-loading {
	position: relative;
}

.utopia-form__feedback {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: var( --wp--custom--radius--sm, 8px );
	font-size: var( --wp--preset--font-size--body-sm, 0.9375rem );
}

.utopia-form__feedback.is-success {
	background: var( --wp--preset--color--brand-tint, #e7f5ea );
	color: var( --wp--preset--color--text, #1c1917 );
}

.utopia-form__feedback.is-error {
	background: rgba( 179, 38, 30, 0.08 );
	color: var( --wp--preset--color--danger, #b3261e );
}

/* Newsletter: einzeilig auf Desktop */
.utopia-form--newsletter .utopia-form__form--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}

.utopia-form--newsletter input[type='email'] {
	flex: 1 1 200px;
}

.utopia-form--newsletter .utopia-form__submit {
	min-width: auto;
	flex: 0 0 auto;
}

.utopia-form--newsletter .utopia-form__feedback {
	flex-basis: 100%;
}

@media ( prefers-reduced-motion: reduce ) {
	.utopia-form__submit {
		transition: none;
	}
}