/*
 * Pixies Wald – Contact Form 7
 * Felder, Button, Meldungen und Spamschutz im Theme-Stil.
 */

.wpcf7 {
	--pw-feld-rand: 2px solid var(--wp--preset--color--salbei);
	--pw-feld-radius: 16px 12px 18px 13px;
	max-width: 680px;
}

/* Beschriftungen */
.wpcf7-form label {
	display: block;
	font-weight: 700;
	color: var(--wp--preset--color--tanne);
	line-height: 1.4;
}
.wpcf7-form p {
	margin: 0 0 1.35rem;
}
.wpcf7-form label br {
	display: none;
}
.wpcf7-form-control-wrap {
	display: block;
	margin-top: .4rem;
	font-weight: 400;
}

/* Eingabefelder */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-url,
.wpcf7-form .wpcf7-number,
.wpcf7-form .wpcf7-date,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-textarea {
	box-sizing: border-box;
	width: 100%;
	padding: .75rem 1rem;
	border: var(--pw-feld-rand);
	border-radius: var(--pw-feld-radius);
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--tinte);
	font: inherit;
	line-height: 1.5;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form .wpcf7-textarea {
	min-height: 10rem;
	resize: vertical;
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):hover {
	border-color: var(--wp--preset--color--moos-hell);
}
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-color: var(--wp--preset--color--tanne);
	box-shadow: 0 0 0 4px rgba(224, 138, 46, .35);
}

/* Checkboxen, Radio-Buttons, Zustimmung */
.wpcf7-form .wpcf7-list-item {
	margin: .25rem 1.2rem .25rem 0;
}
.wpcf7-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 400;
	color: var(--wp--preset--color--tinte);
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"]:not([name="kc_captcha"]) {
	width: 1.2rem;
	height: 1.2rem;
	accent-color: var(--wp--preset--color--tanne);
}

/* Senden-Button wie die Theme-Buttons */
.wpcf7-form .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: .85em 1.9em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--laterne);
	color: var(--wp--preset--color--tinte);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	font-weight: 800;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible {
	background: var(--wp--preset--color--tanne);
	color: var(--wp--preset--color--birke);
}
.wpcf7-form .wpcf7-submit:focus-visible {
	outline: 3px solid var(--wp--preset--color--laterne);
	outline-offset: 3px;
}
.wpcf7-form .wpcf7-submit:disabled {
	opacity: .6;
	cursor: not-allowed;
}
.wpcf7-spinner {
	background-color: var(--wp--preset--color--moos);
}

/* Fehler und Meldungen */
.wpcf7-form .wpcf7-not-valid {
	border-color: #b3261e;
}
.wpcf7-not-valid-tip {
	margin-top: .35rem;
	color: #9f1f17;
	font-size: .95rem;
	font-weight: 700;
}
.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border: 2px solid var(--wp--preset--color--salbei);
	border-radius: var(--pw-feld-radius);
	background: var(--wp--preset--color--papier);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--moos);
	background: #eef3e3;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--wp--preset--color--laterne);
	background: #fbefdf;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #b3261e;
	background: #fbe9e7;
}

/* ---------------------------------------------------------------
   Spamschutz (Contact Form 7 Image Captcha)
---------------------------------------------------------------- */
.wpcf7 .captcha-image {
	display: block !important;
	box-sizing: border-box;
	max-width: 100%;
	padding: 1.25rem 1.25rem 1.4rem !important;
	border: 2px dashed var(--wp--preset--color--salbei) !important;
	border-radius: 22px 18px 26px 16px;
	background: var(--wp--preset--color--papier);
	text-align: center;
}
.wpcf7 .captcha-image .cf7ic_instructions,
.wpcf7 .captcha-image > p {
	display: block;
	margin: 0 0 .9rem;
	font-weight: 400;
	color: var(--wp--preset--color--tinte);
}
.wpcf7 .captcha-image .cf7ic_instructions span,
.wpcf7 .captcha-image > p span {
	font-family: var(--wp--preset--font-family--hand);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--rinde) !important;
}
.wpcf7 .captcha-image label {
	position: relative;
	display: inline-block;
	margin: 0 .35rem;
	cursor: pointer;
}

/* Radio-Button unsichtbar, aber per Tastatur erreichbar (Plugin blendet ihn ganz aus) */
.wpcf7 .captcha-image label > input[type="radio"] {
	display: block !important;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Symbol-Kachel (eigene Symbole und Plugin-Symbole) */
.wpcf7 .captcha-image label > svg,
.wpcf7 .captcha-image label > i {
	box-sizing: border-box;
	display: block;
	width: 76px;
	height: 76px;
	padding: 14px;
	border: 2px solid transparent !important;
	border-radius: 46% 54% 42% 58% / 52% 46% 54% 48%;
	background: #e8eedb;
	color: var(--wp--preset--color--tanne);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.wpcf7 .captcha-image label > i {
	font-size: 40px;
	line-height: 44px;
}
.wpcf7 .captcha-image label:nth-of-type(2) > svg,
.wpcf7 .captcha-image label:nth-of-type(2) > i {
	border-radius: 58% 42% 55% 45% / 44% 56% 44% 56%;
}
.wpcf7 .captcha-image label:nth-of-type(3) > svg,
.wpcf7 .captcha-image label:nth-of-type(3) > i {
	border-radius: 40% 60% 50% 50% / 56% 48% 52% 44%;
}
.wpcf7 .captcha-image label:hover > svg,
.wpcf7 .captcha-image label:hover > i {
	background: var(--wp--preset--color--salbei);
}
.wpcf7 .captcha-image label > input:focus-visible + svg,
.wpcf7 .captcha-image label > input:focus-visible + i {
	outline: 3px solid var(--wp--preset--color--laterne);
	outline-offset: 3px;
}
.wpcf7 .captcha-image label > input:checked + svg,
.wpcf7 .captcha-image label > input:checked + i {
	background: var(--wp--preset--color--tanne);
	color: var(--wp--preset--color--birke);
	border-color: var(--wp--preset--color--laterne) !important;
	transform: rotate(-4deg) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7 .captcha-image label > svg,
	.wpcf7 .captcha-image label > i {
		transition: none;
	}
	.wpcf7 .captcha-image label > input:checked + svg,
	.wpcf7 .captcha-image label > input:checked + i {
		transform: none;
	}
}