/*
 * SPL Newsletter-Block
 *
 * Farben aus dem vorhandenen Divi-Modul der Startseite uebernommen, damit der Block
 * nicht wie ein Fremdkoerper wirkt: Gold #e0cc9a fuer den Knopf, Text #161616.
 *
 * Mobil zuerst. Bei 375 px Fensterbreite ist Divis Inhaltsspalte nur 300 px breit,
 * deshalb stapeln sich Feld und Knopf und werden erst ab 480 px nebeneinander gesetzt.
 * Eine feste Mindestbreite haette hier dieselbe Falle aufgemacht wie die Tabelle in
 * Beitrag 14810, die das Layout ueber den Rand geschoben hat.
 */

.spl-nb {
	box-sizing: border-box;
	max-width: 100%;
	margin: 2.5em 0 1.5em;
	padding: 1.6em 1.4em;
	background: #f7f5f2;
	border: 1px solid #e2ddd5;
	color: #161616;
}

.spl-nb *,
.spl-nb *::before,
.spl-nb *::after {
	box-sizing: inherit;
}

.spl-nb .spl-nb-titel {
	margin: 0 0 .4em;
	font-size: 22px;
	line-height: 1.25;
	color: #161616;
}

.spl-nb .spl-nb-einleitung {
	margin: 0 0 1.1em;
	font-size: 16px;
	line-height: 1.6;
}

.spl-nb .spl-nb-form {
	margin: 0;
}

/* Der Honigtopf muss fuer Skripte im Dokument stehen und fuer Menschen unsichtbar
   sein. `display:none` wird von manchen Ausfuellhelfern erkannt, deshalb der Weg
   ueber die Position ausserhalb des Sichtfeldes. */
.spl-nb .spl-nb-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Beschriftung fuer Screenreader, sichtbar ist der Platzhalter. */
.spl-nb .spl-nb-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.spl-nb .spl-nb-zeile {
	display: flex;
	flex-direction: column;
	gap: .6em;
}

.spl-nb .spl-nb-eingabe {
	width: 100%;
	min-width: 0;
	padding: .85em 1em;
	font-size: 16px; /* unter 16px zoomt iOS beim Antippen in die Seite hinein */
	line-height: 1.4;
	color: #161616;
	background: #ffffff;
	border: 1px solid #c9c2b7;
	border-radius: 0;
	appearance: none;
}

.spl-nb .spl-nb-eingabe:focus {
	outline: 2px solid #161616;
	outline-offset: 1px;
}

.spl-nb .spl-nb-knopf {
	padding: .9em 1.6em;
	font-size: 16px;
	font-weight: 600;
	color: #161616;
	background: #e0cc9a;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color .15s ease;
}

.spl-nb .spl-nb-knopf:hover,
.spl-nb .spl-nb-knopf:focus {
	background: #d3bc84;
}

.spl-nb .spl-nb-knopf[disabled] {
	opacity: .6;
	cursor: default;
}

.spl-nb .spl-nb-hinweis {
	margin: .9em 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #5d564d;
}

.spl-nb .spl-nb-hinweis a {
	color: #5d564d;
	text-decoration: underline;
}

.spl-nb .spl-nb-antwort {
	margin: .8em 0 0;
	font-size: 15px;
	line-height: 1.5;
}

.spl-nb .spl-nb-antwort:empty {
	margin: 0;
}

.spl-nb .spl-nb-antwort.ist-gut {
	color: #2f5d3a;
}

.spl-nb .spl-nb-antwort.ist-fehler {
	color: #8a2b2b;
}

.spl-nb.ist-fertig .spl-nb-zeile,
.spl-nb.ist-fertig .spl-nb-hinweis {
	display: none;
}

@media (min-width: 480px) {
	.spl-nb .spl-nb-zeile {
		flex-direction: row;
		align-items: stretch;
	}

	.spl-nb .spl-nb-eingabe {
		flex: 1 1 auto;
	}

	.spl-nb .spl-nb-knopf {
		flex: 0 0 auto;
	}
}

@media (min-width: 981px) {
	.spl-nb {
		padding: 2em 1.8em;
	}

	.spl-nb .spl-nb-titel {
		font-size: 26px;
	}
}