/* Arena Adlersaal – Formulare (WPForms Lite, Modern Markup, volles Styling).

   Wird nur auf Seiten mit Formular geladen (siehe functions.php). WPForms gibt sein CSS
   teils erst im Footer aus, also nach diesem; deshalb stärkere Selektoren statt Reihenfolge.
   Farben und Schriften kommen aus den Theme-Variablen. Die Farbe "fehler" nur für Fehler. */


/* 1. WPForms-Variablen.
   !important nur hier: Der WPForms-Block gibt seine Variablen mit einem ID-Selektor aus
   (#wpforms-ID.wpforms-block-…), den keine Klassenregel schlagen kann. Beim Shortcode liegen
   sie auf :root, dort wirkt die Regel auch ohne !important. */
.wpforms-container.wpforms-render-modern {
	/* Felder (Werte wie .field der Referenz) */
	--wpforms-field-border-size: 1px !important;
	--wpforms-field-border-style: solid !important;
	--wpforms-field-border-color: rgba(0, 0, 0, 0.45) !important;
	--wpforms-field-border-color-spare: var(--wp--preset--color--text-muted) !important; /* u. a. Pfeil des Dropdowns */
	--wpforms-field-border-radius: var(--wp--custom--radius) !important;
	--wpforms-field-background-color: var(--wp--preset--color--paper) !important;
	--wpforms-field-text-color: var(--wp--preset--color--ink) !important;
	--wpforms-field-menu-color: var(--wp--preset--color--paper) !important;
	--wpforms-field-size-input-height: var(--wp--custom--button-min-height) !important;
	--wpforms-field-size-padding-h: 14px !important;
	--wpforms-field-size-font-size: 16px !important;
	--wpforms-field-size-checkbox-size: 20px !important;

	/* Beschriftungen */
	--wpforms-label-color: var(--wp--preset--color--ink) !important;
	--wpforms-label-sublabel-color: var(--wp--preset--color--text-muted) !important;
	--wpforms-label-error-color: var(--wp--preset--color--fehler) !important;
	--wpforms-label-size-font-size: 14px !important;

	/* Absende-Button: Standard-Variante des Theme */
	--wpforms-button-background-color: var(--wp--preset--color--ink) !important;
	--wpforms-button-background-color-alt: var(--wp--preset--color--ink) !important;
	--wpforms-button-text-color: var(--wp--preset--color--paper) !important;
	--wpforms-button-text-color-alt: var(--wp--preset--color--paper) !important;
	--wpforms-button-border-style: none !important;
	--wpforms-button-border-radius: var(--wp--custom--radius) !important;
	--wpforms-button-size-height: var(--wp--custom--button-min-height) !important;
	--wpforms-button-size-padding-h: 28px !important;
	--wpforms-button-size-font-size: var(--wp--preset--font-size--small) !important;
	--wpforms-page-break-color: var(--wp--preset--color--ink) !important;

	/* Container ohne eigene Fläche, damit er auf Weiß und auf surface passt */
	--wpforms-background-color: transparent !important;
	--wpforms-container-padding: 0px !important;
	--wpforms-container-border-style: none !important;
}


/* 2. Schrift */
.wpforms-container.wpforms-render-modern,
.wpforms-container.wpforms-render-modern :is(input, select, textarea, button) {
	font-family: var(--wp--preset--font-family--body);
}
.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-label {
	font-weight: 500;
}


/* 3. Breiten: alle Felder auf volle Spaltenbreite (WPForms: small/medium/large begrenzt).
   Vor- und Nachname bleiben nebeneinander, unter 600 px (Mobil-Umbruch von WPForms) untereinander. */
.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field :is(input, select, textarea, .wpforms-field-row):is(.wpforms-field-small, .wpforms-field-medium, .wpforms-field-large) {
	max-width: 100%;
}
@media (max-width: 600px) {
	.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field .wpforms-field-row .wpforms-field-row-block {
		width: 100%;
		padding: 0;
	}
}


/* 4. Fokus: Feldrahmen schwarz statt des WPForms-Schattens, dazu der Fokus-Rahmen des Theme */
.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--ink);
	box-shadow: none;
}
/* .wpforms-field doppelt: stärker als die WPForms-Regeln für Pflichtfelder (:focus:invalid)
   und für Felder im Fehlerzustand (.wpforms-error:focus, .user-invalid:focus) */
.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field :is(input, select, textarea):focus-visible,
.wpforms-container.wpforms-container-full .wpforms-form :is(button[type="submit"], .wpforms-submit):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--paper);
}


/* 5. Absende-Button: Rest der Standard-Variante (Werte wie in theme.json) */
.wpforms-container.wpforms-container-full .wpforms-form :is(button[type="submit"], .wpforms-submit) {
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}
.wpforms-container.wpforms-container-full .wpforms-form :is(button[type="submit"], .wpforms-submit):hover {
	background: var(--wp--preset--color--text-muted);
}


/* 6. Fehler: Texte, Fehlerkasten und Rahmen fehlerhafter Felder in "fehler"
   (6,3:1 auf Weiß, 5,6:1 auf surface). WPForms setzt hier teils ein festes Rot. */
.wpforms-container.wpforms-container-full :is(label.wpforms-error, em.wpforms-error, .wpforms-error-container, .wpforms-error-noscript, .wpforms-error-alert) {
	color: var(--wp--preset--color--fehler);
}
.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field :is(input, select, textarea):is(.wpforms-error, .user-invalid) {
	border-color: var(--wp--preset--color--fehler);
}


/* 7. Bestätigung nach dem Absenden: bündig unter der Überschrift, ohne Rahmen, Innenabstand und Hintergrund,
   Text in der Farbe des Fließtexts. WPForms setzt Hellgrün, Rahmen, 15 px Innenabstand, 24 px Abstand unten
   und #333 für Absätze (div.wpforms-container-full .wpforms-confirmation-container-full …); doppelte Klassen sind stärker.
   Den Abstand nach unten regelt der Stapel um das Formular (.aa-stapel). */
.wpforms-container.wpforms-container .wpforms-confirmation-container-full.wpforms-confirmation-container-full {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--text-muted);
}
.wpforms-container.wpforms-container .wpforms-confirmation-container-full.wpforms-confirmation-container-full p {
	color: inherit;
}
/* Container immer volle Spaltenbreite (Formular und Bestätigung). WPForms setzt margin-left/right: auto
   (div.wpforms-container-full in wpforms-full.min.css). In der Flex-Spalte des Stapels (.aa-stapel) wird der Container
   dadurch nur so breit wie sein Inhalt und steht mittig: beim Formular füllt der lange Datenschutz-Text die Spalte
   nur zufällig, eine kurze Bestätigung stand mittig. Mit fester Breite bleibt für "auto" kein Platz. */
.wpforms-container.wpforms-container-full {
	width: 100%;
}
/* Fokus nach dem Absenden (assets/js/formular-bestaetigung.js) nur für Screenreader: kein Fokusrahmen,
   die Bestätigung ist kein Bedienelement (tabindex="-1", nicht in der Tab-Reihenfolge). */
.wpforms-container.wpforms-container :is(.wpforms-confirmation-container-full, .wpforms-confirmation-container)[tabindex="-1"]:focus {
	outline: none;
	box-shadow: none;
}


/* 8. Auswahltexte der Checkboxen (u. a. Datenschutz-Satz): keine automatische Silbentrennung.
   WPForms setzt hyphens: auto auf die Listeneinträge, das trennte den Link "Datenschutzerklärung". */
.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-checkbox :is(li, .wpforms-field-label-inline) {
	-webkit-hyphens: manual;
	hyphens: manual;
}