/* Newsletter-Anmeldung (parts/newsletter.html) in der weißen Karte („Bleib immer auf dem Laufenden“), nachgebaut nach
   dem HubSpot-Formular (Stil aus der Formular-Definition: Beschriftung und Felder Hubot Sans, Felder #f5f8fa mit Rahmen
   #959494 und 3 px Rundung, Knopf #001523 mit 3 px Rundung, Hinweis Nunito Sans 14 px, Schrift schwarz; Abstände im
   Browser nachgemessen). Fehlermeldungen weiß auf Dunkelrot (Kontrast 7 : 1). Wie cowos-beeskow.com 1.3.0. */
.ivb-nl {
	container-type: inline-size;
	box-sizing: border-box;
	padding: 40px;
	color: #000;
	font: 400 16px/1.4 'Hubot Sans', 'Nunito Sans', sans-serif;
	text-align: left;
}
.ivb-nl *, .ivb-nl *::before, .ivb-nl *::after { box-sizing: border-box; }
.ivb-nl p { margin: 0; }
.ivb-nl [hidden] { display: none !important; }

.ivb-nl__row { display: flex; gap: 30px; }
.ivb-nl__field { flex: 1 1 0; min-width: 0; }
.ivb-nl label { display: block; margin-bottom: 10px; color: #000; font: 400 16px/1.4 'Hubot Sans', 'Nunito Sans', sans-serif; }
.ivb-nl__req { color: #e51520; }
.ivb-nl input[type="text"], .ivb-nl input[type="email"] {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 10px;
	border: 1px solid #959494;
	border-radius: 3px;
	background: #f5f8fa;
	color: #001523;
	font: 400 16px/21px 'Hubot Sans', 'Nunito Sans', sans-serif;
	-webkit-appearance: none;
	appearance: none;
}
.ivb-nl input:focus { outline: 2px solid #22577A; outline-offset: 2px; }
.ivb-nl input[aria-invalid="true"] { border-color: #a3141c; }

.ivb-nl__field-error, .ivb-nl__error {
	margin-top: 8px !important;
	padding: 6px 10px;
	border-radius: 3px;
	background: #a3141c;
	color: #fff;
	font: 400 14px/1.4 'Nunito Sans', sans-serif;
}
.ivb-nl__note { margin-top: 25px !important; font: 400 14px/1.3 'Nunito Sans', sans-serif; color: #000; }
.ivb-nl__error { margin-top: 16px !important; }

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

.ivb-nl__actions { display: flex; justify-content: flex-end; margin-top: 60px; }
.ivb-nl .ivb-nl__btn, .ivb-nl .ivb-nl__btn:hover, .ivb-nl .ivb-nl__btn:focus {
	margin: 0;
	padding: 12px;
	border: 0;
	border-radius: 3px;
	background: #001523;
	color: #fff;
	font: 700 16px/1.375 'Hubot Sans', 'Nunito Sans', sans-serif;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.ivb-nl .ivb-nl__btn:hover { background: #22577A; }
.ivb-nl .ivb-nl__btn:focus-visible { outline: 2px solid #22577A; outline-offset: 2px; }
.ivb-nl .ivb-nl__btn:disabled { cursor: progress; opacity: .7; }

.ivb-nl__done { font: 400 18px/1.25 'Nunito Sans', sans-serif; color: #000; }
.ivb-nl__done p + p { margin-top: 18px !important; }
.ivb-nl__done:focus { outline: none; }

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