/*
 * Die Nettolohnberechnung (Plugins salarych_nettolohn und
 * salarych_nettolohninfo).
 *
 * Die Seite besteht aus zwei Teilen: dem roten Kopf mit der weissen Karte
 * (Spalte "Header" der Seitenvorlage) und allem darunter (Hauptspalte). Die
 * Karte ragt absichtlich in den weissen Bereich hinein - daher der negative
 * Aussenabstand unten an der Karte und der Innenabstand oben am Inhalt.
 *
 * Warum jede Regel ihre Wurzelklasse DOPPELT nennt (.nlb-karte.nlb-karte):
 * die Seitenvorlage faerbt im roten Kopf jeden Absatz und jede Ueberschrift
 * weiss, und zwar ueber ".content-header .container p" - zwei Klassen und ein
 * Typ. Eine einfache Klasse verliert dagegen, und in der weissen Karte stuende
 * der Text weiss auf weiss. Die Verdopplung hebt die Spezifitaet gerade so
 * weit, dass die eigenen Regeln gewinnen - ohne ein einziges !important.
 *
 * Wird nur auf dieser Seite geladen (f:asset.css in den Vorlagen).
 */

/* Warum weiter unten !important steht
 *
 * Die Seitenvorlage belegt im roten Kopf Schrift, Farbe und Abstaende mit
 * vier Klassen:
 *   .content-header.content-header .container .col-header h2 { color: #fff; ... }
 * Dagegen kommt keine vertretbar kurze eigene Regel an - die Karte stuende
 * sonst weiss auf weiss, und die Ueberschrift saesse 130 Pixel zu tief.
 * Durchgesetzt werden deshalb genau die Eigenschaften, die die Vorlage dort
 * belegt, und ausschliesslich innerhalb dieser Komponente.
 */

/* --- Der rote Kopf ---------------------------------------------------------
 *
 * Die Seitenvorlage legt dort ein Hintergrundbild an. Hinter der Karte stoert
 * es; faellt :has() aus, ist es nur ein Bild zu viel - nichts bricht.
 */
.content-header .container:has(.nlb-kopf) { background-image: none; }
.content-header .col-header:has(.nlb-kopf) { padding-bottom: 0; }

.nlb-kopf.nlb-kopf { padding: 45px 0 0 !important; color: #fff !important; }
.nlb-kopf.nlb-kopf .nlb-kopf-text { padding-bottom: 45px !important; }

.nlb-kopf.nlb-kopf .nlb-plakette {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .18);
	border-radius: 20px;
	padding: 5px 14px 5px 11px !important;
	font-size: 13px !important;
	color: #fff !important;
	margin: 0 0 22px !important;
}
.nlb-kopf.nlb-kopf .nlb-haken { display: inline-flex; }

.nlb-kopf.nlb-kopf .nlb-titel {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif !important;
	font-size: 40px !important;
	line-height: 1.15 !important;
	font-weight: 500 !important;
	color: #fff !important;
	margin: 0 0 20px !important;
}
.nlb-kopf.nlb-kopf .nlb-vorspann {
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: rgba(255, 255, 255, .92) !important;
	margin: 0 0 14px !important;
	max-width: 34em;
}
.nlb-kopf.nlb-kopf .nlb-vorspann strong { color: #fff !important; }

.nlb-kopf.nlb-kopf .nlb-trenner {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .3);
	margin: 22px 0 !important;
}
.nlb-kopf.nlb-kopf .nlb-marke {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: rgba(255, 255, 255, .75) !important;
	margin: 0 0 8px !important;
}
.nlb-kopf.nlb-kopf .nlb-liste { margin: 0 !important; padding-left: 18px; }
.nlb-kopf.nlb-kopf .nlb-liste li { font-size: 15px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .92) !important; }

.nlb-kopf.nlb-kopf .nlb-grosszahl {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif !important;
	font-size: 46px !important;
	line-height: 1.1 !important;
	font-weight: 500 !important;
	color: #fff !important;
	margin: 0 0 8px !important;
}

/* Die Striche stehen fuer die Zahl, die nach der Berechnung hier steht. */
.nlb-kopf.nlb-kopf .nlb-platzhalter { margin: 0 0 14px !important; display: flex; gap: 10px; }
.nlb-kopf.nlb-kopf .nlb-platzhalter span {
	display: block;
	width: 34px;
	height: 7px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .45);
}

.nlb-kopf.nlb-kopf .nlb-zahlenreihe { display: flex; flex-wrap: wrap; gap: 25px; }
.nlb-kopf.nlb-kopf .nlb-zahlenreihe > div { min-width: 120px; }
.nlb-kopf.nlb-kopf .nlb-zahl-marke { display: block; font-size: 12px !important; color: rgba(255, 255, 255, .75) !important; margin-bottom: 3px !important; }
.nlb-kopf.nlb-kopf .nlb-zahl-wert { display: block; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; }
.nlb-kopf.nlb-kopf .nlb-fussnote { font-size: 12px !important; color: rgba(255, 255, 255, .75) !important; margin: 18px 0 0 !important; }

.nlb-kopf.nlb-kopf .nlb-kopf-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px !important; }
.nlb-kopf.nlb-kopf .nlb-inline-form { display: inline; margin: 0 !important; }
.nlb-kopf.nlb-kopf .nlb-knopf-hell {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, .85);
	background: transparent;
	color: #fff !important;
	border-radius: 3px;
	padding: 11px 22px !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	text-decoration: none;
	cursor: pointer;
}
.nlb-kopf.nlb-kopf .nlb-knopf-hell:hover,
.nlb-kopf.nlb-kopf .nlb-knopf-hell:focus { background: rgba(255, 255, 255, .15); color: #fff !important; text-decoration: none; }
/* Sperrbeschriftung und Knopf liegen beide im Quelltext; sichtbar ist immer
 * genau einer. Der Server setzt ist-gesperrt, das Skript im Partial nimmt die
 * Klasse weg, sobald die Wartezeit abgelaufen ist - ohne Nachladen.
 *
 * Zwei Schalter tragen das: "Neue PIN anfordern" und der Knopf in der
 * Adressberichtigung. Beide verschicken eine Mail, beide unterliegen derselben
 * Minute - sonst waere die Bremse zu umgehen, indem man die Adresse wechselt. */
.nlb-kopf.nlb-kopf .nlb-schalter .nlb-knopf-gesperrt { display: none; }
.nlb-kopf.nlb-kopf .nlb-schalter.ist-gesperrt .nlb-knopf-gesperrt { display: inline-block; }
.nlb-kopf.nlb-kopf .nlb-schalter.ist-gesperrt .nlb-inline-form,
.nlb-kopf.nlb-kopf .nlb-schalter.ist-gesperrt button { display: none; }

/* Der gesperrte Knopf: sieht aus wie einer, ist aber keiner. Bewusst kein
 * disabled-Knopf - der waere mit der Tastatur nicht erreichbar und saehe je
 * nach Browser anders aus. Hier steht, was der Klick gerade nicht taete. */
.nlb-kopf.nlb-kopf .nlb-knopf-gesperrt {
	display: inline-block;
	padding: 12px 22px;
	border: 1px dashed rgba(255, 255, 255, .45);
	border-radius: 3px;
	font-size: 15px;
	font-weight: 700;
	color: rgba(255, 255, 255, .7) !important;
	cursor: default;
}
.nlb-kopf.nlb-kopf .nlb-knopf-voll { background: #fff; color: #f44336 !important; border-color: #fff; font-weight: 700 !important; }
.nlb-kopf.nlb-kopf .nlb-knopf-voll:hover { background: rgba(255, 255, 255, .9); color: #f44336 !important; }

/* --- Die weisse Karte ------------------------------------------------------ */
.nlb-karte.nlb-karte {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
	padding: 28px 30px 26px !important;
	/*
	 * Die Karte ragt in den weissen Bereich hinein, wie im Entwurf. Der Wert
	 * ist der Abstand, um den sie ueber das rote Band hinausreicht - und die
	 * Untergrenze fuer den Innenabstand oben am Seiteninhalt, sonst stossen
	 * beide zusammen.
	 */
	margin-bottom: -45px !important;
	color: #333 !important;
}
.nlb-karte.nlb-karte .nlb-karte-titel {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif !important;
	font-size: 25px !important;
	font-weight: 500 !important;
	color: #333 !important;
	margin: 0 0 18px !important;
	padding-bottom: 16px !important;
	border-bottom: 1px solid #e8e8e8;
}
.nlb-karte.nlb-karte p { color: #333 !important; font-size: 14px !important; }
.nlb-karte.nlb-karte .nlb-marke {
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #9e9e9e !important;
	margin: 22px 0 10px !important;
}

.nlb-karte.nlb-karte .nlb-balken { display: flex; gap: 8px; margin-bottom: 22px !important; }
.nlb-karte.nlb-karte .nlb-balken-teil { flex: 1 1 0; height: 4px; border-radius: 2px; background: #e0e0e0; }
.nlb-karte.nlb-karte .nlb-balken-teil.voll { background: #f44336; }

/*
 * Meldungen bestaetigen fast immer etwas Gelungenes - eine neue PIN, eine
 * angenommene Bitte um Beratung. Rot wie der Rest der Seite liess sie wie
 * Fehler aussehen, deshalb blassgruen. Was wirklich schiefgegangen ist,
 * traegt zusaetzlich nlb-meldung-fehler und bleibt rot.
 */
.nlb-karte.nlb-karte .nlb-meldung {
	background: #edf7ed;
	border-left: 3px solid #4caf50;
	padding: 10px 14px !important;
	font-size: 14px !important;
	color: #2e6930 !important;
	margin: 0 0 18px !important;
}
.nlb-karte.nlb-karte .nlb-meldung-fehler {
	background: #fdecea;
	border-left-color: #f44336;
	color: #b3261e !important;
}

.nlb-karte.nlb-karte .nlb-hinweisbox {
	background: #fdf2f1;
	border-left: 3px solid #f44336;
	padding: 14px 16px !important;
	margin: 0 0 22px !important;
}
.nlb-karte.nlb-karte .nlb-hinweisbox p { margin: 0 0 4px !important; font-size: 13px !important; line-height: 1.5 !important; }
.nlb-karte.nlb-karte .nlb-hinweisbox p:last-child { margin-bottom: 0 !important; }
.nlb-karte.nlb-karte .nlb-hinweisbox .nlb-marke { margin: 0 0 5px !important; color: #f44336 !important; }
.nlb-karte.nlb-karte .nlb-hinweisbox-titel { font-size: 16px !important; font-weight: 700 !important; }
.nlb-karte.nlb-karte .nlb-hinweisbox-zeile { color: #727272 !important; }
.nlb-karte.nlb-karte .nlb-hinweisbox-warnung { background: #fff8e6; border-left-color: #f0ad4e; }

/* --- Felder in der Karte --------------------------------------------------- */
.nlb-karte.nlb-karte .nlb-formular { margin: 0 !important; }
.nlb-karte.nlb-karte .nlb-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.nlb-karte.nlb-karte .nlb-raster-drei { grid-template-columns: 1fr 1fr 1fr; }

.nlb-karte.nlb-karte .nlb-feld { margin-bottom: 16px !important; }
.nlb-karte.nlb-karte .nlb-feld > label {
	display: block;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #333 !important;
	margin-bottom: 5px !important;
}
.nlb-karte.nlb-karte .nlb-pflicht { color: #f44336 !important; }
.nlb-karte.nlb-karte .nlb-feld-eingabe { position: relative; }
.nlb-karte.nlb-karte .nlb-feld input,
.nlb-karte.nlb-karte .nlb-feld select {
	width: 100%;
	height: 42px;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	padding: 0 12px !important;
	font-size: 15px !important;
	color: #333 !important;
	background: #fff;
}
.nlb-karte.nlb-karte .nlb-feld input:focus,
.nlb-karte.nlb-karte .nlb-feld select:focus { border-color: #f44336; outline: none; }
.nlb-karte.nlb-karte .nlb-feld input[disabled] { background: #f5f5f5; color: #9e9e9e !important; }
.nlb-karte.nlb-karte .hat-fehler input,
.nlb-karte.nlb-karte .hat-fehler select { border-color: #f44336; }
.nlb-karte.nlb-karte .nlb-einheit {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px !important;
	color: #9e9e9e !important;
	pointer-events: none;
}
.nlb-karte.nlb-karte .nlb-feld input[inputmode="numeric"] { padding-right: 46px; }
.nlb-karte.nlb-karte .nlb-feldnotiz { font-size: 12px !important; color: #9e9e9e !important; margin: 6px 0 0 !important; }
.nlb-karte.nlb-karte .nlb-fehler { color: #f44336 !important; font-size: 13px !important; margin: 6px 0 0 !important; }
.nlb-karte.nlb-karte .nlb-fehler-oben { margin: 0 0 16px !important; }

.nlb-karte.nlb-karte .nlb-pin-kaesten { display: flex; gap: 12px; margin-bottom: 4px; }
.nlb-karte.nlb-karte .nlb-pin-kasten {
	width: 58px;
	height: 58px;
	text-align: center !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	padding: 0 !important;
}
/*
 * Die Kaesten brauchen eine Klasse mehr als die allgemeine Feldregel
 * (".nlb-feld input { width: 100% }") - sonst zieht die sie in die Breite,
 * und aus den Quadraten werden schmale Streifen.
 */
.nlb-karte.nlb-karte .nlb-feld input.nlb-pin-kasten {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	text-align: center !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 0 !important;
	color: #333 !important;
}
.nlb-karte.nlb-karte .nlb-feld input.nlb-pin-kasten:focus {
	border-color: #f44336;
	box-shadow: 0 0 0 2px rgba(244, 67, 54, .15);
}
/* Ein Punkt im leeren Kaestchen - er zeigt, dass dort eine Ziffer hingehoert. */
.nlb-karte.nlb-karte .nlb-pin-kasten::placeholder { color: #d5d5d5; font-weight: 700; }

.nlb-karte.nlb-karte .nlb-knopf {
	display: inline-block;
	width: 100%;
	border: 0;
	background: #f44336;
	color: #fff !important;
	border-radius: 3px;
	padding: 14px 24px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-decoration: none;
	cursor: pointer;
	margin-top: 6px !important;
}
.nlb-karte.nlb-karte .nlb-knopf:hover,
.nlb-karte.nlb-karte .nlb-knopf:focus { background: #d93025; color: #fff !important; text-decoration: none; }
.nlb-karte.nlb-karte .nlb-kartenfuss { font-size: 12px !important; color: #9e9e9e !important; text-align: center !important; margin: 12px 0 0 !important; }

/* --- Ergebniskarte: Uebersicht und Berater --------------------------------- */
.nlb-karte.nlb-karte .nlb-uebersicht { width: 100%; margin-bottom: 4px !important; }
.nlb-karte.nlb-karte .nlb-uebersicht td { padding: 9px 0 !important; border-bottom: 1px solid #efefef; font-size: 14px !important; color: #333 !important; }
.nlb-karte.nlb-karte .nlb-uebersicht tr:last-child td { border-bottom: 0; }
.nlb-karte.nlb-karte .nlb-uebersicht td:last-child { text-align: right !important; font-weight: 700 !important; white-space: nowrap; }

.nlb-karte.nlb-karte .nlb-berater {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #f7f7f7;
	border-radius: 4px;
	padding: 14px 16px !important;
}
.nlb-karte.nlb-karte .nlb-berater-bild {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	/* Die Bilder sind unterschiedlich beschnitten - cover haelt sie rund und
	 * ohne Verzerrung, der Ausschnitt sitzt oben, wo das Gesicht ist. */
	object-fit: cover;
	object-position: 50% 20%;
}
.nlb-karte.nlb-karte .nlb-berater-bild-leer {
	background: #fff;
	color: #9e9e9e !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nlb-karte.nlb-karte .nlb-berater p { margin: 0 !important; }
.nlb-karte.nlb-karte .nlb-berater-name { font-weight: 700 !important; font-size: 15px !important; }
.nlb-karte.nlb-karte .nlb-berater-zeile { font-size: 13px !important; color: #727272 !important; }

/*
 * Die beiden Wege zum Berater stehen untereinander und gleich breit -
 * dieselbe Anordnung wie unter den Formularen der Site. Nebeneinander blieb
 * fuer die Unterzeile des WhatsApp-Knopfs zu wenig Platz, sie brach mitten im
 * Satz um; und zwei verschieden breite Flaechen lesen sich als zwei
 * verschiedene Dinge statt als zwei Wege zum selben Ziel.
 */
.nlb-karte.nlb-karte .nlb-karte-knoepfe { display: flex; flex-direction: column; gap: 10px; margin-top: 20px !important; }
.nlb-karte.nlb-karte .nlb-karte-knoepfe .nlb-inline-form { margin: 0 !important; }
.nlb-karte.nlb-karte .nlb-karte-knoepfe .nlb-knopf { margin-top: 0 !important; }
/*
 * Der WhatsApp-Knopf - derselbe Aufbau wie .wa-knopf der Site
 * (styles.less, .wa-knopf-aufbau): weiss mit gruenem Zeichen, Titel und
 * Unterzeile, Pfeil rechts. Nachgebaut und nicht wiederverwendet, weil die
 * Site .wa-knopf oberhalb von 992px verbirgt - dort fuehrt wa.me zu WhatsApp
 * Web. Hier ist der Knopf die Rueckfrage zu einer fertigen Berechnung und
 * bleibt auf jeder Breite sichtbar.
 */
.nlb-karte.nlb-karte .nlb-wa {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px !important;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	text-decoration: none;
	transition: border-color .15s, background .15s;
}
.nlb-karte.nlb-karte .nlb-wa:hover,
.nlb-karte.nlb-karte .nlb-wa:focus { border-color: #25d366; background: #f7f7f7; text-decoration: none; }
.nlb-karte.nlb-karte .nlb-wa:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; }
.nlb-karte.nlb-karte .nlb-wa-zeichen {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #25d366;
	color: #fff !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* min-width: 0 laesst den Text schrumpfen, statt den Pfeil aus dem Kasten zu
 * schieben - dieselbe Ueberlegung wie im Knopf der Site. */
.nlb-karte.nlb-karte .nlb-wa-text { flex: 1 1 auto; min-width: 0; display: block; }
.nlb-karte.nlb-karte .nlb-wa-titel {
	display: block;
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #333 !important;
	line-height: 1.3 !important;
}
.nlb-karte.nlb-karte .nlb-wa-unterzeile {
	display: block;
	font-size: 12.5px !important;
	color: #727272 !important;
	line-height: 1.35 !important;
}
.nlb-karte.nlb-karte .nlb-wa-pfeil { flex: 0 0 auto; color: #b2b2b2 !important; display: flex; align-items: center; }

/* --- Das Startformular in der Karte ---------------------------------------
 *
 * Die Felder tragen seit dem 12.09.2026 die Auszeichnung der Karte
 * (Forms/Partials/Nlb/), deshalb greifen die Regeln weiter oben. Hier bleibt
 * nur, was vom Lead-Formular selbst kommt: die Einwilligung und der
 * Absendeknopf.
 *
 * Bewusst KEINE pauschalen Regeln fuer p und label - sie wuerden .nlb-marke
 * und .nlb-feld > label ueberstimmen, weil sie eine Klasse mehr treffen.
 */
.nlb-karte.nlb-karte .nlb-raster-voll { margin-bottom: 0; }
/*
 * Die Einwilligung stand kleiner und enger als in den uebrigen Formularen der
 * Site. Sie ist der rechtlich erhebliche Teil des Formulars - sie soll sich
 * lesen lassen, nicht im Kleingedruckten verschwinden.
 */
.nlb-karte.nlb-karte .nlb-einwilligung { margin: 22px 0 20px; }
.nlb-karte.nlb-karte .checkbox.terms { margin: 0; }
.nlb-karte.nlb-karte .checkbox.terms label {
	display: block;
	padding-left: 26px;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	color: #5c5c5c !important;
	line-height: 1.6 !important;
}
.nlb-karte.nlb-karte .checkbox.terms input { margin-left: -26px; margin-top: 4px; }
.nlb-karte.nlb-karte .leadform .error { color: #f44336 !important; font-size: 13px !important; }

.nlb-karte.nlb-karte .leadform .btn-submit-formular {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 3px;
	background: #f44336 !important;
	color: #fff !important;
	padding: 14px 24px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-shadow: none;
	box-shadow: none;
	margin-top: 10px !important;
}
.nlb-karte.nlb-karte .leadform .btn-submit-formular:hover,
.nlb-karte.nlb-karte .leadform .btn-submit-formular:focus { background: #d93025 !important; color: #fff !important; }

/* --- Alles unterhalb des Kopfes -------------------------------------------- */
/*
 * Die Seitenvorlage setzt .content-wrap 100px vom roten Band ab. Zusammen mit
 * dem Innenabstand hier klaffte darunter eine Luecke von ueber 200 Pixeln.
 * Faellt :has() aus, ist es nur wieder etwas mehr Luft - nichts bricht.
 */
.content-wrap:has(.nlb-inhalt) { margin-top: 0; }

.nlb-inhalt.nlb-inhalt { padding-top: 62px; padding-bottom: 20px; }
.nlb-inhalt.nlb-inhalt .nlb-abschnitt { margin-bottom: 55px; }
.nlb-inhalt.nlb-inhalt .nlb-abschnitt-titel {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif;
	font-size: 30px;
	font-weight: 500;
	margin: 0 0 12px;
}
.nlb-inhalt.nlb-inhalt .nlb-abschnitt-text { color: #727272; max-width: 46em; margin: 0 0 28px; }

.nlb-inhalt.nlb-inhalt .nlb-kartenreihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.nlb-inhalt.nlb-inhalt .nlb-infokarte { border: 1px solid #e8e8e8; border-radius: 5px; padding: 22px 24px; }
.nlb-inhalt.nlb-inhalt .nlb-infokarte-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f44336;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 14px;
}
.nlb-inhalt.nlb-inhalt .nlb-infokarte h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.nlb-inhalt.nlb-inhalt .nlb-infokarte p { font-size: 14px; color: #727272; margin: 0; line-height: 1.6; }

/* --- Die Kaesten neben den Tabellen ---------------------------------------- */
.nlb-inhalt.nlb-inhalt .nlb-detail-spalte { padding-top: 6px; }
.nlb-inhalt.nlb-inhalt .nlb-kasten { background: #f7f7f7; border-radius: 5px; padding: 20px 22px; margin-bottom: 20px; }
.nlb-inhalt.nlb-inhalt .nlb-kasten h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.nlb-inhalt.nlb-inhalt .nlb-kasten p { font-size: 13px; color: #727272; line-height: 1.6; margin: 0 0 10px; }
.nlb-inhalt.nlb-inhalt .nlb-kasten p:last-child { margin-bottom: 0; }
.nlb-inhalt.nlb-inhalt .nlb-kasten-zahl { font-size: 26px; font-weight: 700; color: #f44336; }
.nlb-inhalt.nlb-inhalt .nlb-verweis { color: #f44336; font-weight: 700; }
.nlb-inhalt.nlb-inhalt .nlb-angabenliste { margin: 0; font-size: 13px; }
.nlb-inhalt.nlb-inhalt .nlb-angabenliste dt { float: left; clear: left; width: 55%; font-weight: 400; color: #727272; padding: 5px 0; }
.nlb-inhalt.nlb-inhalt .nlb-angabenliste dd { margin-left: 55%; padding: 5px 0; text-align: right; font-weight: 700; }

/* --- Die Positionen -------------------------------------------------------
 *
 * Dieselbe Auszeichnung wie im PDF (Partial Nettolohn/Ergebnistabelle),
 * deshalb hier nur die Darstellung fuer den Bildschirm. Die Spaltenbreiten
 * kommen als colgroup aus dem Partial - sie muessen dort stehen, weil dompdf
 * sonst die Betraege aus dem Papier draengt.
 */
.nlb-inhalt.nlb-inhalt .nlb-posten-titel {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif;
	font-size: 20px;
	font-weight: 500;
	color: #333;
	margin: 0 0 6px;
}
.nlb-inhalt.nlb-inhalt .nlb-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 34px; }
/* Dieselben Spaltenbreiten wie im PDF - die colgroup steht im Partial. */
.nlb-inhalt.nlb-inhalt .nlb-c-pos { width: 56%; }
.nlb-inhalt.nlb-inhalt .nlb-c-wert { width: 22%; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9e9e9e;
	text-align: right;
	vertical-align: bottom;
	white-space: nowrap;
	padding: 0 0 8px 14px;
	border-bottom: 1px solid #e0e0e0;
}
.nlb-inhalt.nlb-inhalt .nlb-tabelle th.nlb-pos { text-align: left; padding-left: 0; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle td {
	padding: 13px 0 13px 14px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	vertical-align: top;
}
.nlb-inhalt.nlb-inhalt .nlb-tabelle td.nlb-pos { padding-left: 0; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle td.nlb-wert { text-align: right; white-space: nowrap; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle td.nlb-pos strong { display: block; font-size: 15px; margin-bottom: 3px; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle td.nlb-pos span { display: block; font-size: 12px; color: #9e9e9e; line-height: 1.5; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle sup { font-size: 10px; vertical-align: super; color: #9e9e9e; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle .nlb-hervor td { font-weight: 700; font-size: 15px; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle .nlb-abzug td.nlb-wert { color: #f44336; }
/* --- Die Krankenversicherungszeile ---------------------------------------
 *
 * Die einzige Zeile der Aufstellung, in der eine Entscheidung steckt und
 * nicht nur eine Rechnung: Wer das Optionsrecht nutzt, hat diesen Betrag
 * nicht. Deshalb hebt sie sich ab - und traegt als einzige Knoepfe.
 *
 * Der Farbton ist der der Seite, stark aufgehellt. Kein zweiter Akzent: ein
 * Gruen oder Blau an dieser Stelle waere eine neue Farbe in einem Dokument,
 * das mit zweien auskommt.
 *
 * Die Randlinie links traegt die Hervorhebung, nicht die Flaeche allein - im
 * Ausdruck und auf schwachen Bildschirmen bleibt sie sichtbar, wo ein
 * flaechiges Rosa verschwindet.
 */
/* Die Sprungmarke nach dem Umlegen des Schalters. Ohne den Abstand klebt die
 * Zeile am oberen Bildrand und die Kopfzeile der Seite liegt darueber. */
.nlb-inhalt.nlb-inhalt .nlb-tabelle .nlb-kv { scroll-margin-top: 110px; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle .nlb-kv td { background: #fdf0ef; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle .nlb-kv td.nlb-pos {
	padding-left: 14px;
	border-left: 3px solid #f44336;
}
.nlb-inhalt.nlb-inhalt .nlb-tabelle .nlb-kv td.nlb-wert:last-child { padding-right: 14px; }
.nlb-inhalt.nlb-inhalt .nlb-tabelle .nlb-kv td.nlb-pos span { color: #7a6a69; }

/* Knopf und Schalter nebeneinander, mit Umbruch: auf schmalen Spalten stehen
 * sie sonst uebereinander gedraengt oder laufen aus der Zelle. */
.nlb-inhalt.nlb-inhalt .nlb-kv-aktionen {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 12px;
}
/* Der Knopf traegt seine Gestaltung selbst und borgt sie sich nicht von
 * .nlb-knopf: jene Regel haengt an .nlb-karte und an der Beratungsbox, in der
 * Aufstellung gilt sie nicht. Ein Knopf, der nur in einer von zwei Spalten
 * aussieht wie einer, ist schlimmer als gar keiner. */
.nlb-inhalt.nlb-inhalt .nlb-kv .nlb-kv-knopf {
	display: inline-block;
	border: 0;
	background: #f44336;
	color: #fff !important;
	border-radius: 3px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.nlb-inhalt.nlb-inhalt .nlb-kv .nlb-kv-knopf:hover,
.nlb-inhalt.nlb-inhalt .nlb-kv .nlb-kv-knopf:focus { background: #d93025; color: #fff !important; text-decoration: none; }
.nlb-inhalt.nlb-inhalt .nlb-kv-schalter { margin: 0; }

/* Die Bestaetigung an der Stelle des Knopfes, nachdem ein Angebot angefordert
 * wurde. Gruen und nicht rot: sie meldet etwas Erledigtes, sie fordert nichts. */
.nlb-inhalt.nlb-inhalt .nlb-kv-bestaetigt {
	display: inline-block !important;
	color: #1e8e3e !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

/* --- Das Angebotsfenster --------------------------------------------------
 *
 * Es haengt sich beim Laden an den Rumpf der Seite um. Damit greift die
 * Verdopplung der Wurzelklasse aus dem Kopf dieser Datei nicht mehr, und die
 * Regeln der Seitenvorlage fuer .modal gelten unveraendert - das ist auch
 * gewollt, denn das Fenster soll aussehen wie jedes andere.
 *
 * Hier stehen nur die drei Abweichungen, die styles.css unter
 * .form-modal-whatsapp fuehrt und die dort an den WhatsApp-Namen gebunden
 * sind. Sie ein zweites Mal unter diesem Namen zu schreiben ist ehrlicher,
 * als dem Angebotsfenster die Klasse .form-modal-whatsapp anzuhaengen - beim
 * naechsten Durchgang haette sich sonst jemand zu Recht gewundert.
 */
#nlb-angebot-fenster .modal-dialog { max-width: 560px; }
#nlb-angebot-fenster .whatsapp-intro { color: #727272; margin-bottom: 18px; }
#nlb-angebot-fenster .checkbox.terms label a { color: #212121; text-decoration: underline; }

/* Der Schalter ist ein Knopf, sieht aber aus wie ein Verweis.
 *
 * Ein Formular, weil er einen Wert aendert (siehe die Vorlage), und ein
 * Verweis dem Auge nach, weil er neben dem roten Knopf steht und nicht mit
 * ihm um Aufmerksamkeit ringen soll: der eine fuehrt weiter, der andere
 * nimmt etwas heraus. */
.nlb-inhalt.nlb-inhalt .nlb-verweis-knopf {
	border: 0;
	background: none;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	color: #9e9e9e;
	text-decoration: underline;
	cursor: pointer;
}
.nlb-inhalt.nlb-inhalt .nlb-verweis-knopf:hover,
.nlb-inhalt.nlb-inhalt .nlb-verweis-knopf:focus { color: #f44336; }

.nlb-inhalt.nlb-inhalt .nlb-tabelle tfoot td {
	border-top: 2px solid #e0e0e0;
	border-bottom: 0;
	font-weight: 700;
	font-size: 15px;
}

/* Die Schlusszeile ist das Ergebnis - sie traegt die Seitenfarbe. */
.nlb-inhalt.nlb-inhalt .nlb-netto { margin-bottom: 22px; }
.nlb-inhalt.nlb-inhalt .nlb-netto td {
	background: #f44336;
	color: #fff;
	border: 0;
	padding: 16px 14px;
	font-size: 17px;
	font-weight: 700;
}
.nlb-inhalt.nlb-inhalt .nlb-netto td.nlb-pos { border-radius: 4px 0 0 4px; padding-left: 18px; }
.nlb-inhalt.nlb-inhalt .nlb-netto td.nlb-wert:last-child { border-radius: 0 4px 4px 0; padding-right: 18px; }
.nlb-inhalt.nlb-inhalt .nlb-hinweise p { font-size: 12px; color: #9e9e9e; line-height: 1.7; margin: 0 0 10px; }

/* --- Der Kasten mit dem Beratungsgespraech --------------------------------- */
.nlb-inhalt.nlb-inhalt .nlb-beratungsbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: #f7f7f7;
	border-radius: 5px;
	padding: 28px 32px;
	margin-bottom: 40px;
}
.nlb-inhalt.nlb-inhalt .nlb-beratungsbox h2 {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif;
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 6px;
}
.nlb-inhalt.nlb-inhalt .nlb-beratungsbox p { color: #727272; margin: 0; max-width: 46em; }
.nlb-inhalt.nlb-inhalt .nlb-beratungsbox .nlb-knopf {
	display: inline-block;
	flex: 0 0 auto;
	background: #f44336;
	color: #fff;
	border: 0;
	border-radius: 3px;
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}
.nlb-inhalt.nlb-inhalt .nlb-beratungsbox .nlb-knopf:hover { background: #d93025; color: #fff; text-decoration: none; }

/* --- Die Adressberichtigung im PIN-Schritt --------------------------------
 *
 * Ein details-Element im roten Kopf. Zusammengeklappt ist es eine Zeile, und
 * wer sie nicht braucht, sieht nichts weiter - geoeffnet ein Feld und ein
 * Knopf. Bewusst kein Fenster: dafuer ist es zu wenig, und es kaeme
 * Javascript ins Spiel, wo keines gebraucht wird.
 */
.nlb-kopf.nlb-kopf .nlb-aendern { margin-top: 14px !important; }
.nlb-kopf.nlb-kopf .nlb-aendern > summary {
	display: inline-block;
	cursor: pointer;
	font-size: 14px !important;
	color: rgba(255, 255, 255, .85) !important;
	text-decoration: underline;
	list-style: none;
}
.nlb-kopf.nlb-kopf .nlb-aendern > summary::-webkit-details-marker { display: none; }
.nlb-kopf.nlb-kopf .nlb-aendern > summary:hover { color: #fff !important; }
.nlb-kopf.nlb-kopf .nlb-aendern[open] > summary { margin-bottom: 10px !important; }
/* Abstand nach unten nur im aufgeklappten Zustand: zugeklappt ist der Kasten
 * eine Zeile und soll dicht an den Knoepfen darueber bleiben, aufgeklappt
 * stand die Fussnote sonst unmittelbar auf der Kante des roten Bandes. */
.nlb-kopf.nlb-kopf .nlb-aendern-form { margin: 0 0 22px !important; max-width: 460px; }
.nlb-kopf.nlb-kopf .nlb-aendern-form label {
	display: block;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: rgba(255, 255, 255, .85) !important;
	margin-bottom: 6px !important;
}
.nlb-kopf.nlb-kopf .nlb-aendern-zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.nlb-kopf.nlb-kopf .nlb-aendern-zeile input {
	flex: 1 1 220px;
	min-width: 0;
	height: 42px;
	padding: 0 12px !important;
	border: 1px solid rgba(255, 255, 255, .45) !important;
	border-radius: 4px !important;
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
	font-size: 15px !important;
	box-shadow: none !important;
}
.nlb-kopf.nlb-kopf .nlb-aendern-zeile input:focus {
	border-color: #fff !important;
	background: rgba(255, 255, 255, .2) !important;
	outline: none;
}
.nlb-kopf.nlb-kopf .nlb-aendern-zeile .nlb-knopf-hell { flex: 0 0 auto; }
/* Die Meldung der Pflichtfeldpruefung im roten Kopf - dort ist die uebliche
 * rote Schrift nicht lesbar. */
.nlb-kopf.nlb-kopf .nlb-aendern-form .error {
	font-size: 13px !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	margin: 8px 0 0 !important;
}
.nlb-kopf.nlb-kopf .nlb-aendern-zeile.has-error input,
.nlb-kopf.nlb-kopf .nlb-aendern-form .has-error input { border-color: #ffffff !important; }
.nlb-kopf.nlb-kopf .nlb-aendern-form .nlb-feldnotiz {
	font-size: 12px !important;
	color: rgba(255, 255, 255, .7) !important;
	margin: 8px 0 0 !important;
}

/* --- Das WhatsApp-Fenster --------------------------------------------------
 *
 * Hier steht fast nichts mehr.
 *
 * Bis zum 15.09.2026 war das Fenster eine eigene Bauweise (.nlb-fenster) mit
 * eigenem Schirm, eigenen Feldern und eigenen Knoepfen - rund 150 Zeilen, die
 * nachbauten, was styles.css fuer jedes andere Dialogfenster der Site bereits
 * enthaelt. Es sah damit anders aus als die uebrigen, und die Felder brachten
 * eine eigene Auszeichnung mit.
 *
 * Jetzt traegt es die Huelle der Site (.modal.form-modal-netto
 * .form-modal-whatsapp) und deren Felder (.form-group, .form-control,
 * .checkbox.terms). Gestaltet wird es damit vollstaendig aus styles.css, wo
 * auch das Fenster der Angebotsseiten seine Regeln hat - eine Aenderung dort
 * erfasst nun beide.
 *
 * Eine Ausnahme steht hier: die Hoehe des Nachrichtenfeldes - und zwar nur
 * am Rechner.
 *
 * styles.css setzt sie fuer .form-modal-whatsapp auf 192 Pixel. Das ist eine
 * Entscheidung fuer das Handy: auf einem kleinen Bildschirm wird das
 * Schreiben muehsam, sobald mehr als ein Satz in einen Schlitz mit zwei
 * Zeilen soll. Dort bleibt sie deshalb unangetastet.
 *
 * Am Rechner liegt der Fall andersherum. Das Fenster der Angebotskarten steht
 * fuer sich, dieses haengt an einer fertigen Berechnung - mit 192 Pixeln war
 * es 893 Pixel hoch und damit hoeher als der Bildschirm, auf dem es stand.
 * Ab 992 Pixeln Breite sind es deshalb 120; das Feld laesst sich ausserdem
 * anfassen und groesser ziehen (resize: vertical aus styles.css).
 *
 * 992 Pixel, weil der Rest dieser Datei bei 991 umschaltet - ein zweiter
 * Haltepunkt daneben waere eine Fehlerquelle ohne Gewinn.
 *
 * Als min-height und nicht als height, genau wie dort: .form-control traegt
 * eine feste Hoehe von 40 Pixeln, die auch fuer mehrzeilige Felder gilt. Ein
 * rows="5" im Markup richtet dagegen nichts aus - die Mindesthoehe ist das
 * einzige, was sich darueber durchsetzt.
 *
 * Ueber die Kennung und nicht ueber eine Klasse: die Regel aus styles.css
 * traegt zwei Klassen und einen Elementnamen, eine Kennung schlaegt sie
 * unabhaengig von der Reihenfolge der Dateien. Und sie trifft ausdruecklich
 * nur dieses eine Fenster - das der Angebotskarten bleibt, wie es ist.
 */
@media (min-width: 992px) {
	#nlb-wa-fenster textarea.form-control { min-height: 120px !important; }
}

/* Der Knopf, der das Fenster oeffnet, in WhatsApp-Gruen und nicht im Rot der
 * Site. Der Absendeknopf im Fenster traegt dasselbe Gruen; seine Regel steht
 * in styles.css bei .form-modal-whatsapp und gilt fuer beide Fenster. */
.nlb-karte.nlb-karte .nlb-knopf-wa { background: #25d366 !important; color: #fff !important; }
.nlb-karte.nlb-karte .nlb-knopf-wa:hover { background: #1eb85a !important; color: #fff !important; }

/* Die Bestaetigung in der Karte, nachdem die Frage abgeschickt wurde.
 *
 * Sie steht von Anfang an im Quelltext und traegt hidden; sichtbar macht sie
 * das Skript des Fensters, sobald abgeschickt ist. Vom Server kann sie nicht
 * kommen - das Formular geht mit target="_blank" in einen neuen Tab, die
 * Berechnung wird gar nicht neu geladen.
 *
 * Das display:none ausdruecklich und mit !important: die Seitenvorlage setzt
 * display auf einige Bloecke, und ein hidden, das nicht greift, zeigte die
 * Bestaetigung fuer eine Frage, die niemand gestellt hat. */
.nlb-karte.nlb-karte .nlb-wa-gesendet { margin-top: 20px !important; }
.nlb-karte.nlb-karte .nlb-wa-gesendet[hidden] { display: none !important; }
.nlb-karte.nlb-karte .nlb-wa-gesendet .nlb-meldung { margin-bottom: 0 !important; }


/* --- Der Einstieg auf der Landingpage -------------------------------------
 *
 * Zwei Haelften: links das Feld, rechts die Vorschau auf das Ergebnis.
 *
 * Der Kasten belegt dafuer die ganze Breite des Bandes. Das Raster der Seite
 * sieht dort zwei Spalten vor (fce-50-50): links stand das Formular, rechts
 * eine Anleitung in drei Schritten. Die Anleitung ist am 13.09.2026 entfallen,
 * ihre Spalte damit leer - sie wird ausgeblendet und die verbleibende auf die
 * volle Breite gesetzt. Sonst stuende der Einstieg auf der halben Seite und
 * daneben nichts.
 *
 * :has() statt einer Klasse am Raster: das Raster gehoert dem Redakteur, und
 * ob dort der Einstieg steht, entscheidet die Buchung. Dieselbe Ueberlegung
 * wie bei den Regeln fuer den roten Kopfbereich weiter oben.
 */
.calculation-box .fce-50-50:has(.nlb-schnellstart) > .col-2 { display: none !important; }
.calculation-box .fce-50-50:has(.nlb-schnellstart) > .col-1 { width: 100% !important; }

.nlb-schnellstart-block {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: stretch;
}

/* --- Die Vorschau auf das Ergebnis ----------------------------------------
 *
 * Ein Blatt, wie es aus dem Rechner kommt: roter Kopf, die Zahl gross, die
 * drei Eckwerte darunter. Bewusst keine Bilddatei - so bleibt es bei jeder
 * Breite scharf, ist uebersetzbar und laeuft nicht auseinander, wenn sich die
 * Gestaltung des Ergebnisses aendert.
 */
.nlb-vorschau {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.nlb-vorschau .nlb-vorschau-blatt {
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}
.nlb-vorschau .nlb-vorschau-kopf {
	background: #f44336;
	padding: 12px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.nlb-vorschau .nlb-vorschau-marke {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #fff !important;
}
.nlb-vorschau .nlb-vorschau-typ {
	font-size: 12px !important;
	color: rgba(255, 255, 255, .85) !important;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.nlb-vorschau .nlb-vorschau-koerper { padding: 18px 20px 20px; }
.nlb-vorschau .nlb-vorschau-marke-klein {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9e9e9e !important;
	margin: 0 0 4px !important;
}
.nlb-vorschau .nlb-vorschau-zahl {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	color: #333 !important;
	line-height: 1.1 !important;
	margin: 0 !important;
}
.nlb-vorschau .nlb-vorschau-neben {
	font-size: 12.5px !important;
	color: #9e9e9e !important;
	margin: 4px 0 0 !important;
}
.nlb-vorschau .nlb-vorschau-tabelle {
	width: 100%;
	margin: 16px 0 0;
	border-top: 1px solid #eee;
}
.nlb-vorschau .nlb-vorschau-tabelle td {
	padding: 7px 0 !important;
	border-bottom: 1px solid #f2f2f2;
	font-size: 13px !important;
	color: #727272 !important;
	vertical-align: baseline;
}
.nlb-vorschau .nlb-vorschau-tabelle td + td {
	text-align: right;
	font-weight: 700 !important;
	color: #333 !important;
	white-space: nowrap;
}
.nlb-vorschau .nlb-vorschau-tabelle tr:last-child td { border-bottom: 0; }
.nlb-vorschau .nlb-vorschau-fuss {
	font-size: 12px !important;
	color: #9e9e9e !important;
	margin: 12px 0 0 !important;
	line-height: 1.5 !important;
}

/* --- Der Kasten selbst ----------------------------------------------------
 *
 * Ein Feld und ein Knopf, an der Stelle, an der bis zum 12.09.2026 das
 * vollstaendige Lead-Formular stand.
 *
 * Die Klassen sind eigene und nicht die der Formulare (.form-group,
 * .btn-submit-formular): jene gehoeren dem Formhandler, und ihre Regeln in
 * styles.less setzen unter anderem label { display: none } - genau die
 * Beschriftung also, die hier den Sinn traegt. Farben und Masse folgen dem
 * Knopf daneben, damit sich beides wie eine Seite liest.
 *
 * Eigene Wurzelklasse doppelt wie ueberall in dieser Datei: die Box steht in
 * der Landingpage und damit mitten in den Regeln der Seitenvorlage. */
.nlb-schnellstart.nlb-schnellstart {
	background: #fff;
	border-radius: 6px;
	padding: 26px 26px 22px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
	margin: 0;
	flex: 1 1 340px;
	min-width: 0;
	/* Mittig statt oben: die Vorschau daneben ist hoeher, und der Kasten
	 * haenge sonst an ihrer Oberkante statt neben ihr zu stehen. */
	align-self: center;
}
.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-titel {
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	color: #333 !important;
	margin: 0 0 16px !important;
	line-height: 1.25 !important;
	text-transform: none !important;
}
/* display:block ausdruecklich: styles.less blendet die Beschriftungen im
 * Formularbereich der Landingpage aus (.calculation-box .form-wrap label). */
.nlb-schnellstart.nlb-schnellstart label {
	display: block !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #333 !important;
	margin: 0 0 8px !important;
	text-transform: none !important;
}
.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}
/* Das Feld traegt die Einheit im Kasten, wie im Startformular des Rechners. */
.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-feld {
	position: relative;
	flex: 1 1 180px;
	min-width: 0;
	display: block;
}
.nlb-schnellstart.nlb-schnellstart input {
	width: 100%;
	height: 54px;
	padding: 0 56px 0 14px !important;
	border: 1px solid #dcdcdc !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: #333 !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}
.nlb-schnellstart.nlb-schnellstart input:focus { border-color: #f44336 !important; outline: none; }
.nlb-schnellstart.nlb-schnellstart input::placeholder { color: #b2b2b2 !important; font-weight: 400 !important; }
.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-einheit {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #9e9e9e !important;
	pointer-events: none;
}
.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-knopf {
	flex: 0 0 auto;
	height: 54px;
	border: 0;
	border-radius: 4px;
	background: #f44336;
	color: #fff !important;
	font-family: "Roboto Slab", "Roboto Slab Fallback", serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	padding: 0 26px !important;
	cursor: pointer;
}
.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-knopf:hover { background: #d93025; }
.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-notiz {
	font-size: 12.5px !important;
	color: #9e9e9e !important;
	margin: 14px 0 0 !important;
	line-height: 1.5 !important;
}

/*
	Die Sprachansage darunter. Sie erscheint nur dort, wo der Knopf die
	Sprache wechselt - auf Deutsch und Englisch steht sie gar nicht im
	Quelltext.

	Etwas dunkler als die Notiz darueber und mit einem kleinen Abstand: sie
	ist kein Kleingedrucktes, sondern eine Auskunft, die man vor dem Klick
	gelesen haben soll. Ein Kasten oder eine Warnfarbe waere zu viel - es
	geht nicht schief, es geht nur anders weiter als erwartet.
*/
.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-sprachnotiz {
	color: #6f6f6f !important;
	margin-top: 6px !important;
}

@media (max-width: 991px) {
	.nlb-kopf.nlb-kopf { padding-top: 30px; }
	.nlb-kopf.nlb-kopf .nlb-titel { font-size: 30px !important; }
	.nlb-kopf.nlb-kopf .nlb-grosszahl { font-size: 36px !important; }
	.nlb-kopf.nlb-kopf .nlb-kopf-text { padding-bottom: 30px !important; }
	/*
	 * Die Vorschau im ersten Schritt entfaellt am Handy.
	 *
	 * Auf dem Rechner stehen Kopf und Karte nebeneinander: links, wohin die
	 * Zahl kommt, rechts die Eingabe. Untereinander wird daraus eine
	 * Vorschau auf ein Ergebnis, das es noch nicht gibt - sie schob das
	 * Formular um eine halbe Bildschirmhoehe nach unten, und "Füllen Sie die
	 * Angaben rechts aus" zeigte ins Leere.
	 *
	 * Die Ueberschrift bleibt, darunter kommt sofort das Formular. Getragen
	 * wird die Klasse nur von Nettolohn/KopfAngaben, also allein im ersten
	 * Schritt und in der Aenderungsansicht; die Plakette im PIN-Schritt und
	 * im Ergebnis bleibt sichtbar - sie sagt dort, wo der Besucher steht.
	 */
	.nlb-kopf.nlb-kopf .nlb-nur-breit { display: none !important; }
	.nlb-karte.nlb-karte { margin-bottom: -30px !important; padding: 22px 20px 20px !important; }
	.nlb-karte.nlb-karte .nlb-raster,
	.nlb-karte.nlb-karte .nlb-raster-drei { grid-template-columns: 1fr; }
	.nlb-karte.nlb-karte .nlb-feld input.nlb-pin-kasten { width: 50px; height: 50px; font-size: 22px !important; }
	.nlb-inhalt.nlb-inhalt { padding-top: 46px; }
	.nlb-inhalt.nlb-inhalt .nlb-kartenreihe { grid-template-columns: 1fr; gap: 16px; }
	.nlb-inhalt.nlb-inhalt .nlb-abschnitt-titel { font-size: 24px; }
	.nlb-inhalt.nlb-inhalt .nlb-tabelle td.nlb-pos span { display: none; }
	.nlb-inhalt.nlb-inhalt .nlb-posten-titel { font-size: 17px; }
	.nlb-inhalt.nlb-inhalt .nlb-beratungsbox { padding: 22px; }
	.nlb-inhalt.nlb-inhalt .nlb-beratungsbox .nlb-knopf { width: 100%; text-align: center; }
	/* Feld und Knopf untereinander: nebeneinander blieb dem Knopf auf 375px
	 * zu wenig Platz, die Beschriftung brach mitten im Wort um.
	 *
	 * Die flex-Angabe des Feldes muss dabei zurueckgenommen werden. In einer
	 * Spalte bezieht sich flex-basis auf die HOEHE, nicht auf die Breite -
	 * aus "1 1 180px" wurde ein 180 Pixel hohes Feld und eine Box, die
	 * doppelt so hoch war wie noetig. */
	.nlb-schnellstart-block { gap: 22px; }
	.nlb-schnellstart.nlb-schnellstart { padding: 22px 20px 18px; flex: 1 1 100%; }
	.nlb-vorschau { flex: 1 1 100%; }
	.nlb-vorschau .nlb-vorschau-zahl { font-size: 26px !important; }
	.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-titel { font-size: 19px !important; }
	.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-zeile { flex-direction: column; }
	.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-feld { flex: 0 0 auto; width: 100%; }
	.nlb-schnellstart.nlb-schnellstart .nlb-schnellstart-knopf { width: 100%; }
}