/* Newsletter-Anmeldung (parts/newsletter.html) in der dunklen Karte (#232326) auf Startseite und /thanks, nachgebaut nach
   dem HubSpot-Formular (Stil aus der Formular-Definition: Beschriftungen weiß in League Spartan, Felder #f5f8fa mit
   Rahmen #959494 und 3 px Rundung, Knopf #623CEA mit 3 px schwarzem Ring, Hinweis in Open Sans 14 px; Abstände im
   Browser nachgemessen). Fehlermeldungen weiß auf Dunkelrot, damit sie lesbar sind (Kontrast 7 : 1). */
.isl-nl {
	container-type: inline-size;
	box-sizing: border-box;
	padding: 40px;
	color: #fff;
	font: 400 16px/1.25 'League Spartan', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	text-align: left;
}
.isl-nl *, .isl-nl *::before, .isl-nl *::after { box-sizing: border-box; }
.isl-nl p { margin: 0; }
.isl-nl [hidden] { display: none !important; }

.isl-nl__row { display: flex; gap: 30px; }
.isl-nl__field { flex: 1 1 0; min-width: 0; }
.isl-nl label { display: block; margin-bottom: 8px; color: #fff; font-family: 'League Spartan', sans-serif; font-size: 16px; font-weight: 500; line-height: 1; }
.isl-nl__req { color: #e51520; }
.isl-nl input[type="text"], .isl-nl input[type="email"] {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 12px 10px;
	border: 1px solid #959494;
	border-radius: 3px;
	background: #f5f8fa;
	color: #232326;
	font: 400 16px/1 'League Spartan', sans-serif;
	-webkit-appearance: none;
	appearance: none;
}
.isl-nl input:focus { outline: 2px solid #fff; outline-offset: 2px; }
.isl-nl input[aria-invalid="true"] { border-color: #a3141c; }

.isl-nl__field-error, .isl-nl__error {
	margin-top: 8px !important;
	padding: 6px 10px;
	background: #a3141c;
	color: #fff;
	font: 400 14px/1.4 'Open Sans', sans-serif;
}
.isl-nl__note { margin-top: 22px !important; font: 400 14px/1.4 'Open Sans', sans-serif; }
.isl-nl__error { margin-top: 16px !important; }

/* Falle für Bots: aus dem Blick, aber nicht display:none (manche Bots überspringen versteckte Felder) */
.isl-nl__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.isl-nl__actions { display: flex; justify-content: flex-end; margin-top: 58px; padding-right: 3px; }
.isl-nl .isl-nl__btn, .isl-nl .isl-nl__btn:hover, .isl-nl .isl-nl__btn:focus {
	margin: 0;
	padding: 11px 12px;
	border: 0;
	border-radius: 3px;
	background: #623cea;
	box-shadow: 0 0 0 3px #000;
	color: #fff;
	font: 700 16px/15px 'League Spartan', sans-serif;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.isl-nl .isl-nl__btn:hover { filter: brightness(1.12); }
.isl-nl .isl-nl__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.isl-nl .isl-nl__btn:disabled { cursor: progress; filter: saturate(.6); }

.isl-nl__done { font: 400 18px/1.25 'Open Sans', sans-serif; }
.isl-nl__done p + p { margin-top: 18px; }
.isl-nl__done:focus { outline: none; }

/* Schmal wie auf dem Handy: Felder untereinander, Knopf über die volle Breite (wie HubSpot) */
@container (max-width: 400px) {
	.isl-nl__row { flex-direction: column; gap: 20px; }
	.isl-nl__actions { display: block; padding: 0 3px; }
	.isl-nl .isl-nl__btn { width: 100%; }
}