/*
 * Gemeinsame Formulargestaltung der generierten Website.
 * Die Selektoren sind bewusst auf Kontakt, Authentifizierung, Widerruf und
 * Shop-Checkout begrenzt; Struktur und fachliche Sonderfelder bleiben lokal.
 */
:root {
	--site-form-background: #f7fbf8;
	--site-form-field-background: #fff;
	--site-form-text: var(--color-main-text, #4d4d4d);
	--site-form-border: #c4c4c4;
	--site-form-focus: #3399ff;
	--site-form-error: #c00;
	--site-form-error-background: #fff7f7;
	--site-form-success: #3bb143;
	--site-form-success-background: #f0fff0;
	--site-form-radius: 5px;
	--site-form-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

@supports (color: color-mix(in srgb, red, white)) {
	:root {
		--site-form-background: color-mix(in srgb, var(--color-main, #009933) 5%, white);
		--site-form-field-background: color-mix(in srgb, var(--color-main, #009933) 2%, white);
	}
}

/* Admin-Authentifizierungsseiten verwenden dieselbe H1-Typografie wie die Website. */
body[id="login"] h1 {
	padding-top: 20px;
	padding-bottom: 15px;
	background: transparent;
	color: var(--color-title, #565656);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 2.25em;
	font-weight: 600;
	letter-spacing: 1.5px !important;
	text-align: center;
	text-transform: uppercase;
}

/* Kartenrahmen – jeweils nur das eigentliche Formular. */
.cont_form #myForm,
body[id="login"] form.login,
body[id="datainput"] #checkout2 #mycheckout {
	box-sizing: border-box;
	min-width: 0;
	margin: 10px auto;
	padding: 20px;
	border: 0;
	border-radius: var(--site-form-radius);
	background: var(--site-form-background);
	box-shadow: var(--site-form-shadow);
	color: var(--site-form-text);
}

/* Kontaktformular: vorhandenes Status-Legend und Erfolgs-/Fehlerklassen bleiben erhalten. */
.cont_form #myForm fieldset {
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 5px;
	border: 1px solid transparent;
	border-radius: var(--site-form-radius);
	background: transparent;
}

.cont_form #myForm fieldset .fbody {
	box-sizing: border-box;
	min-width: 0;
	margin-top: 15px;
	padding: 22px;
	background: transparent;
}

.cont_form #myForm fieldset.okmsg2 {
	border-color: var(--site-form-success);
	background: var(--site-form-success-background);
}

.cont_form #myForm fieldset.errmsg2 {
	border-color: var(--site-form-error);
	background: var(--site-form-error-background);
}

/* Login, Benutzeranlage und Passwortaenderung. Die bisherigen Breiten bleiben erhalten. */
body[id="login"] form.login {
	max-width: 100%;
	font-family: inherit;
	font-size: inherit;
	font-weight: normal;
}

body[id="login"] #loginForm {
	width: 320px;
}

body[id="login"] form.login label,
#admin-register-page form.login label,
.cont_form #myForm label {
	display: block;
	margin: 0 0 5px;
	color: var(--site-form-text);
	font-weight: 700;
	line-height: 24px;
	text-align: left;
}

/* Einheitliche Textfelder und Selects. Checkboxen, Radios und Buttons sind ausgenommen. */
.cont_form #myForm input[type="text"],
.cont_form #myForm input[type="email"],
.cont_form #myForm input[type="tel"],
.cont_form #myForm input[type="date"],
.cont_form #myForm textarea,
body[id="login"] form.login input.login,
body[id="login"] form.login select.login,
body[id="datainput"] #checkout2 #mycheckout input[type="text"],
body[id="datainput"] #checkout2 #mycheckout input[type="email"],
body[id="datainput"] #checkout2 #mycheckout input[type="tel"],
body[id="datainput"] #checkout2 #mycheckout select,
body[id="datainput"] #checkout2 #mycheckout textarea {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 52px;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid var(--site-form-border);
	border-radius: 0;
	background: var(--site-form-field-background);
	color: var(--site-form-text);
	font: 18px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
	line-height: 40px;
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body[id="login"] form.login input.login,
body[id="login"] form.login select.login {
	margin-bottom: 20px;
}

/* Das Captcha bleibt trotz der allgemeinen Formularbreite ein kompaktes Sechs-Zeichen-Feld. */
.cont_form #myForm input#captcha {
	width: 120px;
	min-width: 120px;
	max-width: 120px;
}

.cont_form #myForm textarea,
body[id="datainput"] #checkout2 #mycheckout textarea {
	height: auto;
	line-height: 1.45;
	resize: vertical;
}

/* Das Passwortauge benoetigt seinen Platz innerhalb des unveraenderten Wrappers. */
body[id="login"] form.login .password-wrapper input.login {
	padding-right: 40px;
}

/* Fokuszustand wie bei der Online-Terminbuchung. */
.cont_form #myForm input[type="text"]:focus,
.cont_form #myForm input[type="email"]:focus,
.cont_form #myForm input[type="tel"]:focus,
.cont_form #myForm input[type="date"]:focus,
.cont_form #myForm textarea:focus,
body[id="login"] form.login input.login:focus,
body[id="login"] form.login select.login:focus,
body[id="datainput"] #checkout2 #mycheckout input[type="text"]:focus,
body[id="datainput"] #checkout2 #mycheckout input[type="email"]:focus,
body[id="datainput"] #checkout2 #mycheckout input[type="tel"]:focus,
body[id="datainput"] #checkout2 #mycheckout select:focus,
body[id="datainput"] #checkout2 #mycheckout textarea:focus {
	border-color: var(--site-form-focus);
	outline: 0;
	box-shadow: 0 0 0 2px rgba(51, 153, 255, .2);
	background-image: none;
}

/* Explizite Validierungszustände; keine :invalid-Regel, damit leere Pflichtfelder
   nicht bereits vor der ersten Benutzerinteraktion rot erscheinen. */
.cont_form #myForm input.error,
.cont_form #myForm textarea.error,
body[id="login"] form.login input.error,
body[id="login"] form.login select.error,
body[id="datainput"] #checkout2 #mycheckout .checkout-field-invalid,
body[id="datainput"] #checkout2 #mycheckout input.error,
body[id="datainput"] #checkout2 #mycheckout select.error,
body[id="datainput"] #checkout2 #mycheckout textarea.error {
	border-color: var(--site-form-error) !important;
	background-color: var(--site-form-error-background) !important;
}

.cont_form #myForm input.valid,
.cont_form #myForm textarea.valid,
body[id="login"] form.login input.valid,
body[id="login"] form.login select.valid,
body[id="datainput"] #checkout2 #mycheckout input.valid,
body[id="datainput"] #checkout2 #mycheckout select.valid,
body[id="datainput"] #checkout2 #mycheckout textarea.valid,
body[id="datainput"] #checkout2 #mycheckout .checkout-field-valid {
	border-color: var(--site-form-success) !important;
	background-color: var(--site-form-success-background) !important;
}

.cont_form #myForm label.error,
body[id="datainput"] #checkout2 #mycheckout .checkout-field-error {
	display: block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 4px 0 0;
	color: #8b0000;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	white-space: normal;
	overflow: visible;
}

/* Meldungen folgen denselben Rot-/Gruenzustaenden wie die Terminbuchung. */
body[id="login"] #maincont_inner > .textblock > .errmsg,
body[id="login"] #maincont_inner > .textblock > .okmsg,
#admin-register-page > .errmsg,
#admin-register-page > .okmsg,
body[id="datainput"] .checkout-form-error {
	display: block;
	box-sizing: border-box;
	margin: 0 auto 10px;
	padding: 8px 10px;
	border: 1px solid;
	border-radius: 4px;
	font-weight: 600;
	line-height: 1.4;
}

body[id="login"] #maincont_inner > .textblock > .errmsg,
#admin-register-page > .errmsg,
body[id="datainput"] .checkout-form-error {
	border-color: var(--site-form-error);
	background: #fff2f2;
	color: #900;
}

body[id="login"] #maincont_inner > .textblock > .okmsg,
#admin-register-page > .okmsg {
	border-color: var(--site-form-success);
	background: var(--site-form-success-background);
	color: green;
}

/* Shop-Dateneingabe: Fieldsets und Legenden bleiben semantisch und funktional erhalten. */
body[id="datainput"] #checkout2 #mycheckout fieldset {
	box-sizing: border-box;
	margin: 12px 0;
	padding: 12px 14px 16px;
	border: 1px solid var(--site-form-border);
	border-radius: var(--site-form-radius);
	background: transparent;
}

body[id="datainput"] #checkout2 #mycheckout legend {
	padding: 0 6px;
	color: var(--site-form-text);
	font-weight: 600;
}

body[id="datainput"] #checkout2 #mycheckout label:not(.legal-confirm) {
	display: block;
	margin: 0;
	padding: 0 0 5px;
	color: var(--site-form-text);
	font-weight: 700;
	line-height: 24px;
	text-align: left;
}

/* Widerruf: kundenspezifische Federation-Karte vor der generischen Formkarte. */
.withdrawal-box {
	box-sizing: border-box;
	width: 100%;
	margin: 1.5rem 0 2rem;
	padding: 1.25rem;
	border: 1px solid rgba(11, 42, 74, .22);
	border-left: 5px solid var(--fed-red, #9b111e);
	border-radius: 0;
	background: rgba(255, 255, 255, .72);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
	color: var(--site-form-text);
}

/* Admin-Oberflaechen verwenden dieselben zentralen Oberflaechenfarben.
   Die eigentliche Rechnungsvorlage (.invoice-paper) bleibt davon unberuehrt. */
body[id="tadmin"] #leftframe,
body[id="tadmin"] .overlay-content,
body[id="iedit"] #leftframe,
body[id="iedit"] .modal-content,
.ui-dialog .ui-dialog-content {
	background-color: var(--site-form-background);
	box-shadow: var(--site-form-shadow);
}

.ui-dialog .ui-dialog-titlebar {
	background: var(--site-form-background);
	border-color: var(--site-form-border);
}

body[id="Administration"] #maincont_inner .textblock form,
body[id="shopadmin"] #maincont_inner .textblock form {
	border-color: var(--site-form-border);
	border-radius: var(--site-form-radius);
	background-color: var(--site-form-background);
	box-shadow: var(--site-form-shadow);
}

body[id="tadmin"] .overlay-content input[type="text"],
body[id="tadmin"] .overlay-content input[type="number"],
body[id="tadmin"] .overlay-content select,
body[id="iedit"] #leftframe input[type="text"],
body[id="iedit"] #leftframe input[type="email"],
body[id="iedit"] #leftframe input[type="number"],
body[id="iedit"] #leftframe select {
	box-sizing: border-box;
	border-color: var(--site-form-border);
	background-color: var(--site-form-field-background);
	color: var(--site-form-text);
	font: 16px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
}

body[id="Administration"] #maincont_inner input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body[id="Administration"] #maincont_inner select,
body[id="Administration"] #maincont_inner textarea,
body[id="shopadmin"] #maincont_inner input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body[id="shopadmin"] #maincont_inner select,
body[id="shopadmin"] #maincont_inner textarea,
#showdown_wrap input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
#showdown_wrap select,
#showdown_wrap textarea {
	box-sizing: border-box;
	border-color: var(--site-form-border);
	border-radius: var(--site-form-radius);
	background-color: var(--site-form-field-background);
	color: var(--site-form-text);
	font-family: Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
}

body[id="Administration"] #maincont_inner input:focus,
body[id="Administration"] #maincont_inner select:focus,
body[id="Administration"] #maincont_inner textarea:focus,
body[id="shopadmin"] #maincont_inner input:focus,
body[id="shopadmin"] #maincont_inner select:focus,
body[id="shopadmin"] #maincont_inner textarea:focus,
#showdown_wrap input:focus,
#showdown_wrap select:focus,
#showdown_wrap textarea:focus {
	border-color: var(--site-form-focus);
	outline: 0;
	box-shadow: 0 0 0 2px rgba(51, 153, 255, .2);
}

body[id="Administration"] #maincont_inner input.error,
body[id="Administration"] #maincont_inner select.error,
body[id="Administration"] #maincont_inner textarea.error,
#showdown_wrap input.error,
#showdown_wrap select.error,
#showdown_wrap textarea.error {
	border-color: var(--site-form-error) !important;
	background-color: var(--site-form-error-background) !important;
}

body[id="Administration"] #maincont_inner input.valid,
body[id="Administration"] #maincont_inner select.valid,
body[id="Administration"] #maincont_inner textarea.valid,
#showdown_wrap input.valid,
#showdown_wrap select.valid,
#showdown_wrap textarea.valid {
	border-color: var(--site-form-success) !important;
	background-color: var(--site-form-success-background) !important;
}

body[id="Administration"] #maincont_inner .errmsg {
	color: var(--site-form-error);
}

body[id="Administration"] #maincont_inner .okmsg {
	color: var(--site-form-success);
}

body[id="tadmin"] .overlay-content input[type="text"]:focus,
body[id="tadmin"] .overlay-content input[type="number"]:focus,
body[id="tadmin"] .overlay-content select:focus,
body[id="iedit"] #leftframe input[type="text"]:focus,
body[id="iedit"] #leftframe input[type="email"]:focus,
body[id="iedit"] #leftframe input[type="number"]:focus,
body[id="iedit"] #leftframe select:focus {
	border-color: var(--site-form-focus);
	outline: 0;
	box-shadow: 0 0 0 2px rgba(51, 153, 255, .2);
}

.withdrawal-form {
	margin: 1rem 0 0;
}

.withdrawal-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.withdrawal-field,
.withdrawal-field label,
.withdrawal-field label > span {
	display: block;
	box-sizing: border-box;
	width: 100%;
}

.withdrawal-field label > span {
	margin: 0 0 5px;
	color: var(--site-form-text);
	font-weight: 700;
	line-height: 24px;
}

.withdrawal-field input[type="text"],
.withdrawal-field input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: .65rem .75rem;
	border: 1px solid rgba(11, 42, 74, .35);
	border-radius: 0;
	background: #fff;
	color: var(--site-form-text);
	font-size: 1rem;
	line-height: normal;
	transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.withdrawal-field input[type="text"]:focus,
.withdrawal-field input[type="email"]:focus {
	border-color: var(--site-form-focus);
	outline: 0;
	box-shadow: 0 0 0 2px rgba(51, 153, 255, .2);
}

.withdrawal-field input.withdrawal-input-error {
	border-color: var(--site-form-error);
	background: var(--site-form-error-background);
}

.withdrawal-field input.withdrawal-input-valid {
	border-color: var(--site-form-success);
	background: var(--site-form-success-background);
}

.withdrawal-field-error {
	box-sizing: border-box;
	width: 100%;
	padding-top: 4px;
	color: #9b111e;
	font-size: .92rem;
	font-weight: 700;
}

.withdrawal-message {
	box-sizing: border-box;
	margin: 0 0 1rem;
	padding: .85rem 1rem;
	border: 0;
	border-left: 4px solid rgba(11, 42, 74, .45);
	border-radius: 0;
	background: rgba(11, 42, 74, .08);
	line-height: 1.45;
}

.withdrawal-message-error {
	border-color: var(--site-form-error);
	background: var(--site-form-error-background);
	color: #900;
}

.withdrawal-message-success {
	border-color: var(--site-form-success);
	background: var(--site-form-success-background);
}

.withdrawal-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.withdrawal-check input {
	flex: 0 0 auto;
}

.withdrawal-help {
	margin: .85rem 0 0;
}

@media (max-width: 600px) {
	.cont_form,
	.cont_form #myForm ol,
	.cont_form #myForm li {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}

	.cont_form #myForm li,
	.cont_form #myForm li[id="comp"],
	.cont_form #myForm li[id="phon"],
	.cont_form #myForm li[id="fname"],
	.cont_form #myForm li[id="lname"],
	.cont_form #myForm li[id="b_dat"] {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.cont_form #myForm,
	body[id="login"] form.login,
	body[id="datainput"] #checkout2 #mycheckout {
		padding: 10px;
	}

	.withdrawal-grid {
		grid-template-columns: 1fr;
	}

	.cont_form #myForm fieldset .fbody {
		padding: 12px 5px;
	}
}

@media (max-width: 904px) {
	body[id="login"] h1 {
		font-size: 2.05em;
	}
}

@media (max-width: 565px) {
	body[id="login"] h1 {
		font-size: 1.35em;
	}
}

@media (max-width: 390px) {
	body[id="login"] h1 {
		font-size: 1.15em;
	}
}

/* Das sechsstellige Captcha bleibt auch bei 320 px in einer Zeile. */
@media (max-width: 400px) {
	.cont_form #myForm li#caprow {
		display: flex;
		align-items: flex-start;
		gap: 8px;
	}
	.cont_form #myForm #caprow .realperson-challenge {
		flex: 0 0 120px;
		width: 120px;
		margin-right: 0;
		float: none;
	}
	.cont_form #myForm #caprow .realperson-text {
		width: 160px;
		transform: scale(.75);
		transform-origin: left top;
	}
	.cont_form #myForm input#captcha {
		flex: 0 0 96px;
		width: 96px;
		min-width: 96px;
		max-width: 96px;
		padding-inline: 6px;
		float: none;
	}
	.cont_form #myForm #caprow .place_holder2 { display: none; }
}

@media (max-width: 325px) {
	body[id="login"] h1 {
		font-size: 1.1em;
	}
}