/* Newsletter-Block (Thomas 18.10.2026: „den newsletter müssen wir schon auch bauen“ – About, Blog, Kategorien, Artikel; Contact bleibt ohne).
   Gleiche Sprache wie das Contact-Formular: Feld als feine Linie (zeichnet sich beim Hineintippen grün von links), kleine Versal-Beschriftung, Fraunces-Titel,
   feine Meldungen. Creme mit grünem Rahmen wie der Seitenkopf, bündig mit ihm (150–1290 px bei 1440) – Thomas 18.10.: „A“ (B grüne Fläche verworfen).
   Anmeldung geht weiter als Mail an hello@brianto.co (server/brianto-form.py, Formular-ID form_<zahl>, Feld email…).
   Blocs erzwingt Textfarben mit !important → eigene Farben ebenfalls mit !important. */
.nl-bloc { --nl-gruen: var(--swatch-var-2425); --nl-schrift: var(--swatch-var-5803); --nl-titel: var(--swatch-var-5657); --nl-linie: rgba(28, 25, 23, .22);
	--nl-fokus: var(--swatch-var-2425); --nl-blass: rgba(28, 25, 23, .34); --nl-innen: 45px; background: var(--swatch-var-3854); padding: 0 0 120px; }
.nl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: end; padding: 56px var(--nl-innen) 60px;
	border: 1px solid var(--nl-gruen); border-radius: 6px; }
.nl-etikett { margin: 0 0 22px !important; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif !important; font-weight: 300 !important; font-size: 19.2px !important;
	line-height: 1.6 !important; color: var(--nl-gruen) !important; }
.nl-titel { margin: 0 !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 250 !important; font-size: clamp(32px, 1.3rem + 1.9vw, 54px) !important;
	line-height: 1.08 !important; color: var(--nl-titel) !important; text-wrap: balance; max-width: 15ch; }
.nl-sub { margin: 20px 0 0 !important; font-size: 18px !important; line-height: 1.6 !important; color: var(--nl-schrift) !important; max-width: 30em; }
.nl-form { margin: 0; }
.nl-feld { margin: 0 !important; }
.nl-label { display: block; margin: 0 0 2px; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; letter-spacing: .1em;
	text-transform: uppercase; color: var(--nl-schrift) !important; opacity: .62; }
.nl-zeile { display: flex; align-items: flex-end; gap: 18px; }
.nl-bloc .nl-input { flex: 1 1 auto; min-width: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 0 11px !important; height: auto;
	background-color: transparent !important; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif !important; font-weight: 300; font-size: 19px !important; line-height: 1.4;
	color: var(--nl-schrift) !important;
	background-image: linear-gradient(var(--nl-fokus), var(--nl-fokus)), linear-gradient(var(--nl-linie), var(--nl-linie)) !important;
	background-size: 0% 1px, 100% 1px !important; background-position: left bottom, left bottom !important; background-repeat: no-repeat !important;
	transition: background-size .7s cubic-bezier(.44, 0, .28, .99); }
.nl-bloc .nl-input:focus { background-size: 100% 1px, 100% 1px !important; outline: none; }
.nl-bloc .nl-input::placeholder { color: var(--nl-blass) !important; opacity: 1; }
.nl-bloc .nl-input:-webkit-autofill { -webkit-text-fill-color: var(--nl-schrift); transition: background-color 600000s 0s; }
.nl-senden { flex: none; padding: 12px 20px !important; background: var(--nl-gruen) !important; border: 1px solid var(--nl-gruen) !important; color: var(--swatch-var-3854) !important;
	border-radius: 4px !important; }
.nl-senden:hover { background: transparent !important; color: var(--nl-gruen) !important; }
.nl-hinweis { margin: 16px 0 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; color: var(--nl-schrift) !important; opacity: .7; }
.nl-hinweis a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Prüfung + Meldungen (jqBootstrapValidation / formHandler.js) */
.nl-feld.error .nl-input { --nl-fokus: #b4534a; --nl-linie: #b4534a; }
.nl-form .help-block, .nl-form .help-block ul, .nl-form .help-block li { margin: 6px 0 0; padding: 0 !important; list-style: none; font-size: 13.5px; color: #b4534a !important;
	background: none !important; border: 0 !important; box-shadow: none !important; }
.nl-form .help-block .alert { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 6px 0 0 !important; font-size: 13.5px; color: #b4534a !important; }
.nl-form .alert { position: relative; margin-top: 18px; border: 0; border-left: 2px solid var(--nl-gruen); border-radius: 0; padding: 14px 40px 14px 16px;
	background: rgba(61, 158, 142, .08); color: var(--nl-schrift) !important; font-size: 15.5px; }
.nl-form .alert-danger { border-left-color: #b4534a; background: rgba(180, 83, 74, .07); }
.nl-form .alert .btn-close { position: absolute; top: 14px; right: 12px; float: none !important; width: 10px; height: 10px; opacity: .45; }

@media (max-width: 991.98px) {
	.nl-bloc { --nl-innen: 32px; padding-bottom: 88px; }
	.nl { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding-top: 44px; padding-bottom: 46px; }
}
@media (max-width: 575.98px) {
	.nl-bloc { --nl-innen: 20px; }
	.nl { padding-top: 34px; padding-bottom: 36px; }
	.nl-etikett { font-size: 17px !important; margin-bottom: 16px !important; }
	.nl-sub { font-size: 17px !important; }
	.nl-zeile { flex-direction: column; align-items: stretch; gap: 16px; }
	.nl-bloc .nl-input { font-size: 17px !important; }
	.nl-senden { width: 100%; padding: 14px 20px !important; text-align: center; justify-content: center; }
}

/* Rahmen bündig mit dem Seitenkopf (Blocs: .bloc .container ohne Seitenabstand, der Kopf hat 20 px) */
@media (max-width: 1199.98px) { .nl-bloc .container { padding-left: 20px; padding-right: 20px; } }
/* A: Abstand oben, wenn eine dunkle/farbige Fläche davor liegt (About: „Ready to work together?“) */
.d-bloc + .nl-bloc, .background-black + .nl-bloc { padding-top: 120px; }
@media (max-width: 991.98px) { .d-bloc + .nl-bloc, .background-black + .nl-bloc { padding-top: 88px; } }
.nl-bloc .nl-form { padding: 0 !important; }