/**
 * Frontend-Styles für WPBS Formulare.
 *
 * Ergänzt Bootstrap 5. Die wichtigsten Regeln greifen auch ohne Bootstrap,
 * das eigentliche Layout ist jedoch auf Bootstrap 5 abgestimmt.
 */

.wpbs-formular {
	margin-bottom: 2rem;
}

.wpbs-formular-title {
	margin-bottom: 1.5rem;
}

/* Honeypot: visuell und für Screenreader ausgeblendet, aber im DOM vorhanden. */
.wpbs-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Fehlermeldung je Feld – auch ohne Bootstrap sichtbar machen. */
.wpbs-error.d-block {
	display: block;
}

.wpbs-error {
	color: #b32d2e;
	font-size: 0.875em;
	margin-top: 0.25rem;
}

/* Sichtbarer Fokus (WCAG 2.4.7). */
.wpbs-formular :focus-visible {
	outline: 3px solid #2563eb;
	outline-offset: 2px;
}

/* Fehler-/Erfolgsbereiche erhalten beim Fokussieren keinen störenden Umriss,
   bleiben aber per Tastatur ansteuerbar. */
.wpbs-form-alert:focus,
.wpbs-form-success:focus {
	outline: none;
}

.wpbs-legend {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
}

/* Fallback für „visually-hidden", falls Bootstrap nicht geladen ist. */
.wpbs-formular .visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Fallback für d-none, falls Bootstrap nicht geladen ist. */
.wpbs-formular .d-none {
	display: none !important;
}