/**
 * Grundgestaltung der Formulare.
 *
 * Absichtlich zurückhaltend: Farben und Abstände kommen aus dem Theme
 * (docs/05-design-system.md). Hier steht nur, was für Bedienbarkeit und Barrierefreiheit
 * nötig ist — vor allem ein sichtbarer Fokusrahmen und ausreichend große Klickflächen.
 */

.evendo-formular__form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 40rem;
}

.evendo-formular__feld {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.evendo-formular__label {
	font-weight: 600;
}

.evendo-formular__eingabe,
.evendo-formular__form select,
.evendo-formular__form textarea {
	/* 2.75rem entspricht rund 44 Pixeln — die von WCAG 2.5.5 empfohlene Zielgröße. */
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	font: inherit;
	color: inherit;
	background-color: #fff;
}

.evendo-formular__form textarea {
	min-height: 7rem;
	resize: vertical;
}

/* Sichtbarer Fokusrahmen: Ohne ihn ist die Tastaturbedienung praktisch unmöglich (WCAG 2.4.7). */
.evendo-formular__form :focus-visible {
	outline: 3px solid #0b5fff;
	outline-offset: 2px;
}

.evendo-formular__hilfe {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.85;
}

.evendo-formular__pflicht {
	color: #b3261e;
}

.evendo-formular__feldfehler,
.evendo-formular__meldung--fehler {
	margin: 0;
	color: #b3261e;
	font-weight: 600;
}

.evendo-formular__meldungen:empty {
	display: none;
}

.evendo-formular__meldungen {
	padding: 0.75rem 1rem;
	border-left: 4px solid #b3261e;
	background-color: #fdf1f0;
}

.evendo-formular__meldungen--erfolg {
	border-left-color: #1e7a3c;
	background-color: #f0f8f2;
}

.evendo-formular__gruppe {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
}

.evendo-formular__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.evendo-formular__option input,
.evendo-formular__kaestchen {
	width: 1.15rem;
	height: 1.15rem;
}

.evendo-formular__feld--zustimmung {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem;
	align-items: start;
}

.evendo-formular__feld--zustimmung .evendo-formular__verweis,
.evendo-formular__feld--zustimmung .evendo-formular__feldfehler,
.evendo-formular__feld--zustimmung .evendo-formular__hilfe {
	grid-column: 2;
	margin: 0;
}

.evendo-formular__absenden {
	min-height: 2.75rem;
	padding: 0.5rem 1.5rem;
	border: 0;
	border-radius: 0.25rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.evendo-formular__absenden[disabled] {
	cursor: progress;
	opacity: 0.7;
}

/* Visuell versteckt, für Screenreader vorhanden. Die meisten Themes bringen diese Klasse mit;
   verlassen kann man sich darauf nicht, und ohne sie stünde der Titel doppelt auf der Seite. */
.evendo-formular .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Der Köder darf niemals sichtbar werden — auch nicht, wenn dieses Stylesheet fehlt.
   Deshalb steht die eigentliche Verbergung zusätzlich im HTML-Attribut style. */
.evendo-formular__koeder {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Hinweis auf Zweck und Rechtsgrundlage — steht über der Bestätigung. */
.evendo-formular__datenschutzhinweis {
	margin: 0;
	font-size: 0.9em;
	opacity: 0.85;
}

/* Die Datenschutzerklärung im Dialog. Das native dialog-Element bringt Fokusfalle und
   Escape mit; hier steht nur, was es aussehen lässt wie der Rest. */
.evendo-formular__dialog {
	width: min(46rem, 92vw);
	max-height: 82vh;
	padding: 0;
	border: 0;
	border-radius: 0.5rem;
	color: inherit;
}

.evendo-formular__dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.evendo-formular__dialog-kopf {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
}

.evendo-formular__dialog-inhalt {
	max-height: calc(82vh - 4.5rem);
	padding: 1.25rem;
	overflow-y: auto;
}

.evendo-formular__dialog-schliessen {
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid currentColor;
	border-radius: 0.25rem;
	font: inherit;
	background: transparent;
	cursor: pointer;
}