/*
 * Anpassung von WPForms Lite an das Design der Seite.
 * Abstände laufen über eine eigene Skala, damit die Proportionen im weißen
 * Formularkasten stimmen – WPForms setzt sonst sehr unterschiedliche Margins.
 */

.fbj-contact__form{
	--fbj-form-gap:1.15rem;
	--fbj-form-label-gap:.45rem;
}

.fbj-contact__form .wpforms-container,
.fbj-contact__form .wpforms-container-full{margin:0;padding:0}

.fbj-contact__form .wpforms-form{
	display:flex;flex-direction:column;gap:var(--fbj-form-gap);
}

/* WPForms bringt eigene Abstände mit – hier zählt der Flex-Gap. */
.fbj-contact__form .wpforms-field{padding:0!important;margin:0!important}
.fbj-contact__form .wpforms-field-container{
	display:flex;flex-direction:column;gap:var(--fbj-form-gap);
}

.fbj-contact__form .wpforms-field-label{
	display:block;margin:0 0 var(--fbj-form-label-gap);
	font-family:var(--fbj-font-body);font-weight:600;font-size:.9rem;
	line-height:1.4;color:var(--fbj-ink);
}
.fbj-contact__form .wpforms-required-label{color:var(--fbj-primary-dark);margin-left:.15rem}

.fbj-contact__form input[type="text"],
.fbj-contact__form input[type="email"],
.fbj-contact__form input[type="tel"],
.fbj-contact__form input[type="url"],
.fbj-contact__form input[type="number"],
.fbj-contact__form input[type="date"],
.fbj-contact__form input[type="time"],
.fbj-contact__form select,
.fbj-contact__form textarea{
	width:100%;max-width:100%;
	min-height:50px;padding:.7rem .9rem;
	background:#fff;color:var(--fbj-ink);
	font-family:var(--fbj-font-body);font-size:1rem;line-height:1.45;
	border:1px solid var(--fbj-hairline);border-radius:var(--fbj-radius);
	box-shadow:none;
	transition:border-color .2s var(--fbj-ease),box-shadow .2s var(--fbj-ease);
}
.fbj-contact__form textarea{min-height:130px;padding:.85rem .9rem;resize:vertical}
.fbj-contact__form select{min-height:50px;padding-right:2.25rem}

.fbj-contact__form input:focus,
.fbj-contact__form select:focus,
.fbj-contact__form textarea:focus{
	border-color:var(--fbj-primary);
	box-shadow:0 0 0 3px rgba(223,162,76,.22);
	outline:none;
}

.fbj-contact__form .wpforms-field-description,
.fbj-contact__form .wpforms-field-sublabel{
	margin:.4rem 0 0;font-size:.82rem;line-height:1.5;color:var(--fbj-muted);
}

/* Zweispaltige Felder aus dem Builder (Name / E-Mail nebeneinander). */
@media (min-width:560px){
	.fbj-contact__form .wpforms-field.wpforms-one-half,
	.fbj-contact__form .wpforms-field.wpforms-first{width:calc(50% - var(--fbj-form-gap) / 2)!important;float:none!important}
	.fbj-contact__form .wpforms-field-container{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
	.fbj-contact__form .wpforms-field:not(.wpforms-one-half){width:100%}
}

/* Absenden */
.fbj-contact__form .wpforms-submit-container{margin:.35rem 0 0;padding:0}
.fbj-contact__form button[type="submit"],
.fbj-contact__form .wpforms-submit{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:54px;padding:.95rem 2.4rem;
	background:var(--fbj-ink);color:#fff;
	font-family:var(--fbj-font-body);font-size:.82rem;font-weight:600;
	text-transform:uppercase;letter-spacing:var(--fbj-track);line-height:1;
	border:1px solid var(--fbj-ink);border-radius:var(--fbj-radius);
	cursor:pointer;
	transition:background .3s var(--fbj-ease),border-color .3s var(--fbj-ease),transform .3s var(--fbj-ease),box-shadow .3s var(--fbj-ease);
}
.fbj-contact__form button[type="submit"]:hover,
.fbj-contact__form .wpforms-submit:hover{
	background:var(--fbj-primary-dark);border-color:var(--fbj-primary-dark);
	transform:translateY(-2px);
	box-shadow:0 14px 26px -14px rgba(13,13,13,.7);
}
.fbj-contact__form .wpforms-submit-spinner{margin-left:.6rem}

@media (max-width:559px){
	.fbj-contact__form button[type="submit"],
	.fbj-contact__form .wpforms-submit{width:100%}
}

/* Fehler und Bestätigung */
.fbj-contact__form .wpforms-error,
.fbj-contact__form label.wpforms-error{
	display:block;margin:.4rem 0 0;
	font-size:.85rem;font-weight:500;color:#B3261E;
}
.fbj-contact__form input.wpforms-error,
.fbj-contact__form textarea.wpforms-error,
.fbj-contact__form select.wpforms-error{border-color:#B3261E}
.fbj-contact__form .wpforms-error-container{
	margin:0 0 var(--fbj-form-gap);padding:.9rem 1.1rem;
	background:#FDF3F2;border-left:2px solid #B3261E;
	font-size:.9rem;color:#7A1F19;
}

.fbj-contact__form .wpforms-confirmation-container-full,
.fbj-contact__form div.wpforms-confirmation-container{
	margin:0;padding:1.35rem 1.5rem;
	background:#F2F8F2;border:0;border-left:2px solid #2E7D32;
	color:#1B4620;font-size:1rem;line-height:1.65;
}
.fbj-contact__form .wpforms-confirmation-container p:last-child{margin-bottom:0}

/* Auswahlfelder, u. a. die Datenschutz-Einwilligung */
.fbj-contact__form .wpforms-field-checkbox ul,
.fbj-contact__form .wpforms-field-radio ul,
.fbj-contact__form .wpforms-field-gdpr-checkbox ul{
	list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
}
.fbj-contact__form .wpforms-field-checkbox label,
.fbj-contact__form .wpforms-field-radio label,
.fbj-contact__form .wpforms-field-gdpr-checkbox label{
	display:flex;gap:.65rem;align-items:flex-start;
	font-size:.9rem;font-weight:400;line-height:1.55;color:var(--fbj-muted);
}
.fbj-contact__form .wpforms-field-checkbox label a,
.fbj-contact__form .wpforms-field-gdpr-checkbox label a{color:var(--fbj-primary-dark)}
.fbj-contact__form input[type="checkbox"],
.fbj-contact__form input[type="radio"]{
	width:20px;height:20px;min-height:0;margin:.15rem 0 0;flex:none;
	accent-color:var(--fbj-primary);
}