/*
 * Anmeldeformular. Schrift und Farben kommen vom Theme; hier nur Abstände,
 * Breiten und die Kennzeichnung von Fehlern.
 */

.nst-anmeldung {
	--nst-fehler: #b32d2e;
	--nst-erfolg: #00a32a;
	max-width: var(--wp--style--global--content-size, 40em);
	margin-left: auto;
	margin-right: auto;
}

/* Breite und Ausrichtung aus dem Shortcode, z. B. [nst_anmeldung breite="weit" ausrichtung="links"]. */
.nst-anmeldung.nst-breite-weit {
	max-width: 960px;
}

.nst-anmeldung.nst-ausrichtung-links {
	margin-left: 0;
}

.nst-anmeldung.nst-ausrichtung-rechts {
	margin-right: 0;
}

.nst-anmeldung .nst-gruppe {
	border: 1px solid rgba(128, 128, 128, 0.4);
	border-radius: 4px;
	margin: 0 0 1.5em;
	padding: 1em;
	min-width: 0;
}

.nst-anmeldung legend {
	font-weight: 700;
	padding: 0 0.25em;
}

.nst-anmeldung .nst-feld {
	margin: 0 0 1em;
}

.nst-anmeldung .nst-feld > label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.nst-anmeldung input[type="text"],
.nst-anmeldung input[type="email"],
.nst-anmeldung input[type="tel"],
.nst-anmeldung input[type="number"],
.nst-anmeldung select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/* Mindestens 16px, sonst zoomt iOS beim Antippen in das Feld. */
	font-family: inherit;
	font-size: max(1em, 16px);
	padding: 0.5em;
}

.nst-anmeldung select:disabled {
	opacity: 0.6;
}

.nst-anmeldung .nst-pflicht {
	color: var(--nst-fehler);
}

.nst-anmeldung .nst-wunsch {
	margin: 0 0 1em;
}

.nst-anmeldung .nst-wunsch-titel {
	font-weight: 700;
	margin: 0 0 0.5em;
}

.nst-anmeldung .nst-wunsch-felder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
	gap: 0 1em;
}

.nst-anmeldung .nst-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: normal;
}

.nst-anmeldung .nst-checkbox input {
	margin-top: 0.3em;
	flex-shrink: 0;
}

.nst-anmeldung .nst-hinweis:empty {
	display: none;
}

.nst-anmeldung .nst-hinweis {
	font-style: italic;
	margin: -0.5em 0 1em;
}

.nst-anmeldung .nst-fehler {
	color: var(--nst-fehler);
	font-weight: 600;
	margin: 0.25em 0 0;
}

.nst-anmeldung .nst-feld-fehler input,
.nst-anmeldung .nst-feld-fehler select {
	border-color: var(--nst-fehler);
	outline: 1px solid var(--nst-fehler);
}

.nst-anmeldung .nst-meldung {
	border-left: 4px solid currentColor;
	margin: 0 0 1.5em;
	padding: 0.75em 1em;
}

.nst-anmeldung .nst-meldung-fehler {
	border-left-color: var(--nst-fehler);
}

.nst-anmeldung .nst-meldung-erfolg {
	border-left-color: var(--nst-erfolg);
}

.nst-anmeldung .nst-zusammenfassung {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25em 1em;
	margin: 1em 0;
}

.nst-anmeldung .nst-zusammenfassung dt {
	font-weight: 600;
}

.nst-anmeldung .nst-zusammenfassung dd {
	margin: 0;
}

@media (max-width: 480px) {
	.nst-anmeldung .nst-zusammenfassung {
		grid-template-columns: 1fr;
	}

	.nst-anmeldung .nst-zusammenfassung dd {
		margin-bottom: 0.5em;
	}
}

/* Honigtopf: für Menschen unsichtbar, für Spam-Programme ein normales Feld. */
.nst-anmeldung .nst-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nst-anmeldung .nst-meldung-demo {
	border-left-color: #dba617;
	background: #fcf0d6;
	color: #3c2c00;
}

.nst-anmeldung .nst-wunsch-entfaellt {
	opacity: 0.55;
}

.nst-anmeldung .nst-wunsch-entfaellt .nst-pflicht {
	visibility: hidden;
}