/**
 * Gestaltung der Eingabemaske im Frontend.
 * Ohne Zusatzbibliotheken, auf Mobilgeräten bedienbar.
 */
.svfe-formular {
	--svfe-abstand: 1rem;
	--svfe-rand: #ccd2d9;
	--svfe-fehler: #a4262c;
	--svfe-erfolg: #1d6f42;
	max-width: 100%;
}
/*
 * Das Zwoelftelraster der Eingabemaske.
 * --svfe-breite ist eine blanke Zahl von 1 bis 12, kein Prozentwert.
 * Unter 48rem nimmt jedes Feld die ganze Zeile ein.
 */
.svfe-formular .svfe-felder {
	display: block;
}
.svfe-formular .svfe-zeile {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--svfe-abstand);
	margin-bottom: var(--svfe-abstand);
}
.svfe-formular .svfe-zeile:empty {
	display: none;
	margin: 0;
}
.svfe-formular .svfe-zeile[hidden] {
	display: none;
}
.svfe-formular .svfe-feld {
	min-width: 0;
}
.svfe-formular .svfe-zeile > .svfe-feld {
	grid-column: span 12;
	min-width: 0;
}
@media (min-width: 48rem) {
	.svfe-formular .svfe-zeile > .svfe-feld {
		grid-column: span var(--svfe-breite, 12);
	}
	.svfe-formular .svfe-zeile > .svfe-breite-1 {
		grid-column: span 1;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-2 {
		grid-column: span 2;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-3 {
		grid-column: span 3;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-4 {
		grid-column: span 4;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-5 {
		grid-column: span 5;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-6 {
		grid-column: span 6;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-7 {
		grid-column: span 7;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-8 {
		grid-column: span 8;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-9 {
		grid-column: span 9;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-10 {
		grid-column: span 10;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-11 {
		grid-column: span 11;
	}
	.svfe-formular .svfe-zeile > .svfe-breite-12 {
		grid-column: span 12;
	}
}
.svfe-formular .svfe-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}
.svfe-formular .svfe-pflicht {
	color: var(--svfe-fehler);
	margin-left: 0.15rem;
}
.svfe-formular .svfe-eingabe {
	width: 100%;
	box-sizing: border-box;
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--svfe-rand);
	border-radius: 0.25rem;
	font: inherit;
	background: #fff;
}
.svfe-formular .svfe-eingabe:focus {
	outline: 2px solid #2a6fb0;
	outline-offset: 1px;
}
.svfe-formular textarea.svfe-eingabe {
	min-height: 6rem;
	resize: vertical;
}
.svfe-formular .svfe-kreuz {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.4;
	cursor: pointer;
}
.svfe-formular .svfe-kreuz input {
	margin-top: 0.2rem;
	width: 1.15rem;
	height: 1.15rem;
}
.svfe-formular .svfe-entscheidung {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.svfe-formular .svfe-feldhinweis {
	margin: 0.25rem 0 0;
	font-size: 0.875em;
	opacity: 0.8;
}
.svfe-formular .svfe-feldfehler {
	margin: 0.25rem 0 0;
	color: var(--svfe-fehler);
	font-size: 0.9em;
}
.svfe-formular .svfe-fehler {
	margin: 0.25rem 0 0;
	color: var(--svfe-fehler);
	font-size: 0.9em;
}
.svfe-formular .svfe-fehler:empty {
	display: none;
}
.svfe-formular .svfe-feld-fehlerhaft {
	border-left: 3px solid var(--svfe-fehler);
	padding-left: 0.6rem;
}
.svfe-formular .svfe-feld-fehlerhaft .svfe-eingabe {
	border-color: var(--svfe-fehler);
}
.svfe-formular .svfe-verborgen {
	display: none;
}
.svfe-formular .svfe-koeder {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.svfe-formular .svfe-trennlinie {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--svfe-rand);
	margin: 0.5rem 0;
}
.svfe-formular .svfe-ueberschrift {
	margin: 0.5rem 0 0;
}
.svfe-hinweis {
	border-left: 4px solid var(--svfe-rand, #ccd2d9);
	background: #f5f7f9;
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	border-radius: 0.25rem;
}
.svfe-hinweis-fehler {
	border-left-color: #a4262c;
	background: #fdf3f3;
}
.svfe-hinweis-erfolg {
	border-left-color: #1d6f42;
	background: #f2f9f5;
}
.svfe-hinweis-warnung {
	border-left-color: #b8860b;
	background: #fdf9ef;
}
.svfe-leiste {
	margin-top: 1.25rem;
}
/* Anmeldeleiste über dem Formular. Die Hülle trennt sie von der Knopfzeile
des Formulars, die dieselbe Klasse trägt. */
.svfe-anmeldeleiste {
	margin: 0 0 1.25rem;
}
.svfe-anmeldeleiste .svfe-leiste {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0 0 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid #dcdcde;
	border-radius: 0.25rem;
	background: #f6f7f7;
	font-size: 0.85rem;
	line-height: 1.6;
}
.svfe-anmeldeleiste .svfe-leiste-zusatz {
	margin-top: -0.5rem;
	background: #fff;
}
.svfe-anmeldeleiste .svfe-leiste-name {
	font-weight: 600;
	color: #1d2327;
}
.svfe-anmeldeleiste .svfe-leiste-rolle {
	padding: 0.125rem 0.5rem;
	border-radius: 0.625rem;
	background: #e8eaec;
	color: #50575e;
	white-space: nowrap;
}
.svfe-anmeldeleiste .svfe-leiste-rechts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-left: auto;
}
.svfe-anmeldeleiste .svfe-leiste-knopf {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border: 1px solid #c3c4c7;
	border-radius: 0.1875rem;
	background: #fff;
	color: #14508c;
	text-decoration: none;
	min-height: 1.75rem;
}
.svfe-anmeldeleiste .svfe-leiste-knopf:hover,
.svfe-anmeldeleiste .svfe-leiste-knopf:focus {
	border-color: #14508c;
	background: #f0f6fc;
	color: #0f3d6b;
}
@media (max-width: 40rem) {
	.svfe-anmeldeleiste .svfe-leiste-rechts {
		margin-left: 0;
		width: 100%;
	}
}
.svfe-knopf {
	display: inline-block;
	padding: 0.65rem 1.25rem;
	border: 0;
	border-radius: 0.25rem;
	background: #14508c;
	color: #fff;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
	min-height: 2.75rem;
}
.svfe-knopf:hover,
.svfe-knopf:focus {
	background: #0f3d6b;
	color: #fff;
}
.svfe-knopf[disabled],
.svfe-knopf-warten {
	opacity: 0.6;
	cursor: progress;
}
.svfe-unterschrift-flaeche {
	display: block;
	width: 100%;
	height: 9rem;
	border: 1px dashed var(--svfe-rand, #ccd2d9);
	border-radius: 0.25rem;
	background: transparent;
	touch-action: none;
}
.svfe-unterschrift-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.svfe-unterschrift-loeschen,
.svfe-unterschrift-leeren {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--svfe-rand, #ccd2d9);
	border-radius: 0.25rem;
	background: #fff;
	color: #1d2327;
	font: inherit;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
}
.svfe-upload-vorschau {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.svfe-upload-eintrag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--svfe-rand, #ccd2d9);
	border-radius: 0.25rem;
}
.svfe-upload-bild {
	max-width: 4rem;
	max-height: 4rem;
	object-fit: contain;
}
.svfe-upload-fehler {
	width: 100%;
	margin: 0;
	color: #a4262c;
	font-size: 0.9em;
}
.svfe-upload-hinweis {
	margin: 0.35rem 0 0;
	font-size: 0.85em;
	opacity: 0.8;
}
.svfe-vorgangsnummer {
	font-size: 1.05em;
}
/*
 * Ankreuzzeile: das Kästchen steht oben links, der Text daneben.
 * Ein Ankreuzkästchen trägt svfe-kreuz-eingabe und nicht svfe-eingabe,
 * damit es nicht auf die volle Feldbreite gestreckt wird.
 */
.svfe-formular .svfe-kreuzzeile {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.4;
	cursor: pointer;
}
.svfe-formular .svfe-kreuzzeile input {
	width: auto;
	flex: 0 0 auto;
	margin: 0.15rem 0 0 0;
}
.svfe-formular .svfe-kreuztext {
	flex: 1 1 auto;
}
.svfe-formular .svfe-kreuz-eingabe {
	width: auto;
	height: auto;
	flex: 0 0 auto;
	box-sizing: border-box;
	margin: 0.15rem 0 0 0;
	padding: 0;
	border: 0;
	background: none;
}
/* Eigene Schrift eines Feldes: der Stil steht in der Hülle, alles darin erbt ihn. */
.svfe-formular .svfe-schrift-eigen {
	line-height: 1.4;
}
.svfe-formular .svfe-schrift-eigen .svfe-label,
.svfe-formular .svfe-schrift-eigen .svfe-kreuztext,
.svfe-formular .svfe-schrift-eigen .svfe-festtext,
.svfe-formular .svfe-schrift-eigen .svfe-eingabe {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	text-align: inherit;
}
/* Bereich um das Eingabeelement und die Beschreibung unter der Bezeichnung. */
.svfe-formular .svfe-eingabebereich {
	display: block;
	min-width: 0;
}
.svfe-formular .svfe-beschreibung {
	margin: 0 0 0.35rem;
	font-size: 0.875em;
	opacity: 0.75;
}
/* Mehrfachauswahl: die Ankreuzzeilen stehen untereinander. */
.svfe-formular .svfe-mehrfach {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
/* Datenschutz: Ankreuzzeile mit gut lesbarem Verweis darunter. */
.svfe-formular .svfe-datenschutz {
	align-items: flex-start;
}
.svfe-formular .svfe-datenschutz-verweis {
	margin: 0.35rem 0 0;
	font-size: 0.9em;
}
.svfe-formular .svfe-datenschutz-verweis a {
	color: #14508c;
	text-decoration: underline;
}
.svfe-formular .svfe-datenschutz-verweis a:hover,
.svfe-formular .svfe-datenschutz-verweis a:focus {
	color: #0f3d6b;
}
/* Dateiwahl, Bildwahl und die Liste der gewählten Dateien. */
.svfe-formular .svfe-upload,
.svfe-formular .svfe-foto {
	padding: 0.4rem 0.5rem;
	background: #fff;
}
/* Der Uploadblock umschliesst das Eingabefeld, die Vorschau und die Liste. */
.svfe-formular .svfe-upload-eingabe {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 1rem;
}
.svfe-formular .svfe-upload-liste {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0;
}
.svfe-formular .svfe-upload-liste li {
	padding: 0.25rem 0;
	border-bottom: 1px solid var(--svfe-rand, #ccd2d9);
	font-size: 0.95em;
}
.svfe-formular .svfe-upload-liste li:last-child {
	border-bottom: 0;
}
.svfe-formular .svfe-foto-vorschau {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.svfe-formular .svfe-foto-vorschau img {
	max-width: 8rem;
	max-height: 8rem;
	object-fit: contain;
}
/* Unterschrift: die Fläche liegt in einem eigenen Rahmen. */
.svfe-formular .svfe-unterschrift {
	padding: 0.5rem;
	border: 1px solid var(--svfe-rand, #ccd2d9);
	border-radius: 0.25rem;
	background: #fff;
}
.svfe-formular .svfe-unterschrift-leeren,
.svfe-formular .svfe-unterschrift-loeschen {
	margin-top: 0.5rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--svfe-rand, #ccd2d9);
	border-radius: 0.25rem;
	background: #fff;
	background-image: none;
	color: #1d2327;
	-webkit-text-fill-color: #1d2327;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	text-shadow: none;
	text-transform: none;
	opacity: 1;
	cursor: pointer;
}
.svfe-formular .svfe-unterschrift-leeren:hover,
.svfe-formular .svfe-unterschrift-leeren:focus,
.svfe-formular .svfe-unterschrift-loeschen:hover,
.svfe-formular .svfe-unterschrift-loeschen:focus {
	background: #f2f5f8;
	color: #1d2327;
	-webkit-text-fill-color: #1d2327;
}
.svfe-formular .svfe-unterschrift-datei,
.svfe-formular .svfe-unterschrift-bild {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.95em;
}
/* Reine Anzeigen: fester Text, freies Markup und Hinweiskasten. */
.svfe-formular .svfe-festtext {
	margin: 0;
	line-height: 1.5;
}
.svfe-formular .svfe-html,
.svfe-formular .svfe-htmlblock {
	line-height: 1.5;
}
.svfe-formular .svfe-html > :first-child,
.svfe-formular .svfe-htmlblock > :first-child {
	margin-top: 0;
}
.svfe-formular .svfe-hinweisbox {
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--svfe-rand, #ccd2d9);
	border-radius: 0.25rem;
	background: #f5f7f9;
}
.svfe-formular .svfe-hinweisbox-hinweis {
	border-left-color: #14508c;
}
.svfe-formular .svfe-hinweisbox-warnung {
	border-left-color: #b8860b;
	background: #fdf9ef;
}
.svfe-formular .svfe-hinweisbox-erfolg {
	border-left-color: var(--svfe-erfolg, #1d6f42);
	background: #f2f9f5;
}
/* Kästchenschrift und selbsttätig gefüllte Felder. */
.svfe-formular .svfe-kaestchen {
	font-family: "Courier New", Courier, monospace;
	letter-spacing: 0.35em;
}
.svfe-formular .svfe-selbsttaetig {
	background: #f5f7f9;
}
/* Rechenaufgabe des Spamschutzes und die Sendetaste. */
.svfe-formular .svfe-feld-rechnung {
	margin-top: var(--svfe-abstand, 1rem);
}
.svfe-formular .svfe-knopf-senden {
	min-width: 12rem;
}
/* Text über der Maske und die Breite je Spaltenzahl. */
.svfe-formular .svfe-text-oben {
	margin-bottom: var(--svfe-abstand, 1rem);
	line-height: 1.5;
}
.svfe-formular.svfe-spalten-1 {
	max-width: 46rem;
}
.svfe-formular.svfe-spalten-2 {
	max-width: 64rem;
}
.svfe-formular.svfe-spalten-3 {
	max-width: 78rem;
}
.svfe-formular.svfe-spalten-4 {
	max-width: 92rem;
}
/* Rahmen der Frontendseiten. */
.svfe-frontend {
	max-width: 100%;
}
.svfe-frontend-titel {
	margin: 0 0 0.75rem;
}
.svfe-frontend-inhalt {
	margin: 0;
}
/*
 * Klassen aus den Vorlagen der Verwaltung, die bisher keine Regel hatten.
 * Sie stehen hier, weil formular.css die einzige Stildatei dieser Stufe ist.
 */
.svfe-untertitel {
	margin: 1.25rem 0 0.5rem;
	font-size: 1.15em;
}
.svfe-marken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.svfe-marke-taste {
	cursor: pointer;
}
.svfe-marke-text {
	margin-left: 0.35rem;
	font-size: 0.9em;
	opacity: 0.8;
}