/*
 * Newsletter-Liste: Formular (W9) und Seiten W5a, W5b, W6.
 * Werte aus docs/klickdummies/newsletter-liste-klickdummy.html (Fassung 4)
 * bzw. dem Design-Startpaket. Alles unter .gs-nl, weil das Formular auch
 * in fremden Seitenaufbauten (Oxygen) steht.
 */
.gs-nl {
	--gs-nl-cta: #d81e5b;
	--gs-nl-cta-dunkel: #b8184d;
	--gs-nl-marke: #173753;
	--gs-nl-link: #2c7a86;
	--gs-nl-teal: #e7f4f6;
	--gs-nl-teal-rand: #cfe6ea;
	--gs-nl-fehler: #c0392b;
	--gs-nl-fehler-flaeche: #fdecea;
	--gs-nl-text2: #595959;
	--gs-nl-linie: #e2e2e2;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #000;
	box-sizing: border-box;
}
.gs-nl *, .gs-nl *::before, .gs-nl *::after { box-sizing: border-box; }
.gs-nl [hidden] { display: none !important; }

body.gs-nl-seite { margin: 0; background: #f7f7f5; }
.gs-nl-spalte { max-width: 520px; margin: 0 auto; padding: 48px 20px 56px; }
@media (max-width: 480px) { .gs-nl-spalte { padding: 32px 16px 44px; } }

.gs-nl-karte { background: #fff; border: 1px solid var(--gs-nl-linie); border-radius: 12px; padding: 24px; }
.gs-nl-block { max-width: 520px; margin: 0 auto; }

.gs-nl-titel { font-family: Anton, Impact, "Arial Narrow", sans-serif; font-weight: 400; font-size: 34px; line-height: 1.1; color: #2b2b2b; margin: 0 0 12px; }
.gs-nl-lead { font-size: 16px; line-height: 1.55; color: var(--gs-nl-text2); margin: 0 0 20px; }
.gs-nl-eng { margin-bottom: 8px; }
.gs-nl-h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: #000; }
.gs-nl-text { font-size: 15px; line-height: 1.5; color: var(--gs-nl-marke); margin: 0 0 12px; }
.gs-nl-klein { font-size: 13px; line-height: 1.55; color: var(--gs-nl-text2); margin: 10px 0 0; }
.gs-nl-klein a { color: var(--gs-nl-link); }
.gs-nl-abstand { margin: 0 0 12px; }
.gs-nl-grau { color: var(--gs-nl-text2); }
.gs-nl-danach { font-size: 15px; line-height: 1.55; color: #333; margin: 16px 0 14px; }
.gs-nl-adresse { font-weight: 600; overflow-wrap: anywhere; font-size: 17px; margin: 0 0 14px; }
.gs-nl-lead .gs-nl-adresse { font-size: inherit; margin: 0; }
.gs-nl-nowrap { white-space: nowrap; }
.gs-nl-frage { margin: 0 0 10px; font-size: 16px; font-weight: 500; }

.gs-nl-geschenk { display: flex; gap: 12px; align-items: flex-start; background: var(--gs-nl-teal); border: 1px solid var(--gs-nl-teal-rand); border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--gs-nl-marke); }

.gs-nl-feld { margin: 0 0 16px; }
.gs-nl-feld label { display: block; font-size: 15px; font-weight: 500; margin: 0 0 6px; }
.gs-nl-feld label small { font-weight: 400; color: var(--gs-nl-text2); font-size: 13px; }
.gs-nl-feld input[type=text], .gs-nl-feld input[type=email] { width: 100%; height: 50px; border: 1px solid #bdbdbd; border-radius: 8px; padding: 0 14px; font: 17px Roboto, Arial, sans-serif; background: #fff; color: #000; }
.gs-nl-feld input:focus { outline: none; border-color: var(--gs-nl-marke); box-shadow: 0 0 0 3px rgba(23, 55, 83, .15); }
.gs-nl-fehler input { border-color: var(--gs-nl-fehler) !important; background: var(--gs-nl-fehler-flaeche) !important; }
.gs-nl-fehlertext { color: var(--gs-nl-fehler); font-size: 14px; margin: 6px 0 0; }
.gs-nl-meldung { background: #fff4e0; border: 1px solid #e6c65c; border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.5; margin: 0 0 16px; }
.gs-nl-ok { background: var(--gs-nl-teal); border-color: var(--gs-nl-teal-rand); color: var(--gs-nl-marke); }
.gs-nl-test { background: #fcf9e8; border: 1px dashed #dba617; border-radius: 6px; padding: 6px 10px; font-size: 13px; margin: 0 0 14px; }
.gs-nl-honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.gs-nl-knopf { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border: 0; border-radius: 10px; background: var(--gs-nl-cta); color: #fff !important; font: 500 18px Roboto, Arial, sans-serif; cursor: pointer; padding: 12px 18px; text-align: center; text-decoration: none !important; }
.gs-nl-knopf:hover { background: var(--gs-nl-cta-dunkel); }
.gs-nl-knopf[disabled] { background: #d9d9d9; color: #777 !important; cursor: not-allowed; }
.gs-nl-zweit { background: #fff; color: var(--gs-nl-marke) !important; border: 2px solid var(--gs-nl-marke); }
.gs-nl-zweit:hover { background: #f2f5f8; }
.gs-nl-zweit[disabled] { background: #fff; border-color: #cfcfcf; }
.gs-nl-karte form + .gs-nl-knopf, .gs-nl-karte .gs-nl-knopf + form, .gs-nl-kasten .gs-nl-knopf + form, .gs-nl-kasten form { margin-top: 12px; }
.gs-nl-kasten > .gs-nl-knopf:first-of-type { margin-top: 0; }

.gs-nl-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 0 14px; }
.gs-nl-icon-ok { background: var(--gs-nl-teal); color: var(--gs-nl-link); }
.gs-nl-icon-info { background: #eef2f6; color: var(--gs-nl-marke); }
.gs-nl-icon-warn { background: #fff4e0; color: #9a6700; }

.gs-nl-kasten { background: #fff; border: 1px solid var(--gs-nl-linie); border-radius: 10px; padding: 16px; margin: 18px 0 0; }
.gs-nl-kasten-oben { margin-top: 0; }
.gs-nl-kasten-teal { background: var(--gs-nl-teal); border-color: var(--gs-nl-teal-rand); }
.gs-nl-liste { margin: 8px 0 14px; padding: 0 0 0 20px; font-size: 15px; line-height: 1.7; color: #333; }

.gs-nl-grund { display: inline-flex; align-items: center; border: 1px solid #bdbdbd; background: #fff; border-radius: 999px; padding: 10px 14px; margin: 0 8px 8px 0; font: 15px Roboto, Arial, sans-serif; cursor: pointer; color: #000; }
.gs-nl-gewaehlt { border-color: var(--gs-nl-marke); background: var(--gs-nl-marke); color: #fff; }
.gs-nl-abgesetzt { border-top: 1px solid var(--gs-nl-linie); margin-top: 22px; padding-top: 18px; }