/**
 * Konfigurator im Frontend.
 *
 * Farben, Schriften und Radius aus dem Elementor-Kit der Website (BRIEFING §3),
 * damit sich die Seite nahtlos einfügt. Die Schriften selbst lädt das Theme;
 * hier wird nur darauf verwiesen.
 */

.nzk-konfigurator {
	--nzk-primaer: #211C15;
	--nzk-text: #5A5145;
	--nzk-gedaempft: #6E7681;
	--nzk-akzent: #E0611B;
	--nzk-akzent-dunkel: #A8641C;
	--nzk-grund: #FCFAF4;
	--nzk-sand: #F6EFE1;
	--nzk-sand-dunkel: #EFE6D4;
	--nzk-linie: #D9CDB6;
	--nzk-radius: 4px;

	color: var(--nzk-text);
	max-width: 1180px;
	margin-inline: auto;
}

/* Kopf ------------------------------------------------------------------- */

/*
 * Kopf und Raster tragen dieselbe Sandfläche, die Kante zwischen beiden
 * entsteht also nicht mehr durch den Farbwechsel. Der Rahmen — unten offen,
 * weil dort das Raster anschließt — hält die Karte optisch zusammen.
 */
.nzk-kopf {
	background: var(--nzk-sand);
	border: 1px solid var(--nzk-linie);
	border-bottom: 0;
	border-radius: var(--nzk-radius) var(--nzk-radius) 0 0;
	padding: 1.75rem 1.5rem 1.5rem;
}

/*
 * Die Eyebrow-Zeilen sind h2 im Markup. Das Theme gibt Überschriften eine
 * eigene Größe und Schrift mit — beides muss hier zurückgesetzt werden,
 * sonst erscheinen sie als große Serifen-Überschriften.
 */
.nzk-konfigurator .nzk-eyebrow {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nzk-akzent);
	margin: 0 0 .35rem;
}

.nzk-titel {
	font-family: "Zilla Slab", Georgia, serif;
	font-weight: 700;
	color: var(--nzk-primaer);
	margin: 0;
	line-height: 1.15;
}

.nzk-unterzeile {
	color: var(--nzk-gedaempft);
	margin: .4rem 0 0;
}

/* Raster ----------------------------------------------------------------- */

.nzk-raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: 0;
	background: var(--nzk-sand);
	border: 1px solid var(--nzk-linie);
	border-top: 0;
	border-radius: 0 0 var(--nzk-radius) var(--nzk-radius);
}

/*
 * Kein overflow: hidden auf dem Raster: Das macht den Container zum
 * Scroll-Kontext und setzt damit das position: sticky der Summenleiste
 * wirkungslos. Die unteren Ecken runden deshalb die Spalten selbst ab.
 */
.nzk-raster > :first-child {
	border-bottom-left-radius: var(--nzk-radius);
}

.nzk-raster > :last-child {
	border-bottom-right-radius: var(--nzk-radius);
}

.nzk-auswahl {
	padding: 1.5rem;
	min-width: 0;
}

.nzk-block + .nzk-block {
	margin-top: 2rem;
}

.nzk-block-kopf {
	color: var(--nzk-akzent);
	border-bottom: 1px solid var(--nzk-linie);
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}

/* Auswahlfelder ---------------------------------------------------------- */

.nzk-feld {
	margin: 0 0 1rem;
}

.nzk-label {
	display: block;
	font-weight: 600;
	color: var(--nzk-primaer);
	margin-bottom: .35rem;
}

/*
 * Schutzdachfarbe.
 *
 * Als Optionsfelder statt als Auswahlliste, weil eine der Farben Aufpreis
 * kostet: In einem <select> wäre der Betrag nur beim Aufklappen zu sehen.
 * Nebeneinander stehen alle vier Farben mit ihrem Preis sofort da — so wie
 * im Kasten „Schutzdachfarbe" auf dem Papierformular.
 */
.nzk-farben {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.nzk-farbe {
	display: flex;
	/* Hält den ausgeblendeten Haken bei sich, statt ihn ans Fenster zu hängen. */
	position: relative;
}

.nzk-farbe .nzk-haken {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nzk-farbe label {
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
	padding: .5rem .75rem;
	border: 1px solid var(--nzk-linie);
	border-radius: var(--nzk-radius);
	background: #fff;
	color: var(--nzk-text);
	cursor: pointer;
}

.nzk-farbe .nzk-haken:checked + label {
	border-color: var(--nzk-akzent);
	background: var(--nzk-sand);
	color: var(--nzk-primaer);
	font-weight: 600;
}

/* Tastaturbedienung: Der Haken selbst ist unsichtbar, der Rahmen zeigt ihn. */
.nzk-farbe .nzk-haken:focus-visible + label {
	outline: 2px solid var(--nzk-akzent);
	outline-offset: 2px;
}

.nzk-farbe-aufpreis {
	font-size: .875rem;
	font-weight: 700;
	color: var(--nzk-akzent-dunkel);
	white-space: nowrap;
}

/*
 * Schutzdachbreite.
 *
 * Dasselbe Muster wie die Schutzdachfarbe (siehe oben): Als Optionsfelder statt
 * als Auswahlliste, weil eine der Breiten Aufpreis kostet (FRAGEN.md, 26.09.2026).
 */
.nzk-breiten {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.nzk-breite {
	display: flex;
	/* Hält den ausgeblendeten Haken bei sich, statt ihn ans Fenster zu hängen. */
	position: relative;
}

.nzk-breite .nzk-haken {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nzk-breite label {
	display: inline-flex;
	align-items: baseline;
	gap: .35rem;
	padding: .5rem .75rem;
	border: 1px solid var(--nzk-linie);
	border-radius: var(--nzk-radius);
	background: #fff;
	color: var(--nzk-text);
	cursor: pointer;
}

.nzk-breite .nzk-haken:checked + label {
	border-color: var(--nzk-akzent);
	background: var(--nzk-sand);
	color: var(--nzk-primaer);
	font-weight: 600;
}

/* Tastaturbedienung: Der Haken selbst ist unsichtbar, der Rahmen zeigt ihn. */
.nzk-breite .nzk-haken:focus-visible + label {
	outline: 2px solid var(--nzk-akzent);
	outline-offset: 2px;
}

.nzk-breite-aufpreis {
	font-size: .875rem;
	font-weight: 700;
	color: var(--nzk-akzent-dunkel);
	white-space: nowrap;
}

/* Typ 6: Überstand, den es bei der gewählten Größe nicht gibt — sichtbar, aber nicht wählbar. */
.nzk-breite .nzk-haken:disabled + label {
	background: transparent;
	color: var(--nzk-gedaempft);
	cursor: not-allowed;
	text-decoration: line-through;
}

.nzk-breite .nzk-haken:disabled + label .nzk-breite-aufpreis {
	color: inherit;
	font-weight: 400;
	/* Der Durchstrich gilt nur der Bezeichnung, nicht dem Hinweis „nicht lieferbar". */
	display: inline-block;
	text-decoration: none;
}

/* Ein Typ mit nur einer gepflegten Breite — dann steht sie da, ohne Auswahl. */
.nzk-breite-fest {
	display: inline-block;
	padding: .5rem 0;
	color: var(--nzk-primaer);
	font-weight: 600;
}

.nzk-select {
	width: 100%;
	padding: .65rem .75rem;
	border: 1px solid var(--nzk-linie);
	border-radius: var(--nzk-radius);
	background: #fff;
	color: var(--nzk-primaer);
	font-size: 1rem;
}

.nzk-select:focus-visible,
.nzk-menge-feld:focus-visible,
.nzk-haken:focus-visible,
.nzk-knopf:focus-visible {
	outline: 2px solid var(--nzk-akzent);
	outline-offset: 2px;
}

.nzk-kennwert {
	color: var(--nzk-gedaempft);
	margin: 0;
}

/* Optionszeilen ---------------------------------------------------------- */

.nzk-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nzk-zeile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: .75rem;
	padding: .7rem 0;
	/* Auf der Sandfläche wäre --nzk-sand-dunkel als Trenner kaum zu sehen. */
	border-bottom: 1px solid var(--nzk-linie);
}

.nzk-zeile:last-child {
	border-bottom: 0;
}

.nzk-haken {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--nzk-akzent);
	margin: 0;
	cursor: pointer;
}

.nzk-zeile-text {
	cursor: pointer;
	min-width: 0;
}

.nzk-zeile-label {
	display: block;
	color: var(--nzk-primaer);
}

.nzk-zeile-hinweis {
	display: block;
	font-size: .875rem;
	color: var(--nzk-gedaempft);
	margin-top: .1rem;
}

.nzk-marke {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--nzk-sand-dunkel);
	color: var(--nzk-akzent-dunkel);
	border-radius: var(--nzk-radius);
	padding: .1rem .4rem;
	margin-left: .4rem;
	vertical-align: .05em;
}

/*
 * Nur für Screenreader. WordPress-Themes bringen diese Klasse meist mit, aber
 * darauf ist kein Verlass — ohne eigene Regel stünde „Anzahl" sichtbar da.
 */
.nzk-konfigurator .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.nzk-menge-feld {
	width: 4.25rem;
	padding: .35rem .4rem;
	border: 1px solid var(--nzk-linie);
	border-radius: var(--nzk-radius);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/*
 * Das Mengenfeld gehört zur angehakten Zeile. Ungewählt bleibt der Platz
 * erhalten — sonst springt die Zeile beim Anhaken —, das Feld ist aber
 * unsichtbar und für die Tastatur nicht erreichbar.
 */
.nzk-menge-feld:disabled {
	visibility: hidden;
}

.nzk-zeile-preis {
	font-weight: 600;
	color: var(--nzk-primaer);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.nzk-auf-anfrage {
	color: var(--nzk-gedaempft);
	font-weight: 400;
}

/* Summenleiste ----------------------------------------------------------- */

.nzk-summenleiste {
	border-left: 1px solid var(--nzk-linie);
	padding: 1.5rem;
}

/*
 * Ab 769 px läuft die Summenleiste beim Scrollen mit, damit Aufstellung und
 * Knopf sichtbar bleiben, während der Kunde die Optionsliste durchgeht.
 * Darunter steht sie im Fluss: Bei einspaltigem Aufbau würde eine klebende
 * Leiste den halben Bildschirm dauerhaft belegen.
 */
@media (min-width: 769px) {
	.nzk-summenleiste {
		align-self: start;
		position: sticky;
		top: 1rem;
		/* Ist die Leiste höher als das Fenster, muss sie scrollbar bleiben. */
		max-height: calc(100vh - 2rem);
		overflow-y: auto;
	}
}

.nzk-aufstellung {
	margin: 1rem 0 0;
}

.nzk-posten {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .4rem 0;
	font-size: .9375rem;
}

.nzk-posten dt,
.nzk-posten dd {
	margin: 0;
}

.nzk-posten dd {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.nzk-posten-weg {
	display: block;
	font-size: .8125rem;
	color: var(--nzk-gedaempft);
}

.nzk-posten-grund,
.nzk-posten-zwischen {
	font-weight: 600;
	color: var(--nzk-primaer);
}

.nzk-posten-zwischen {
	border-top: 1px solid var(--nzk-linie);
	margin-top: .4rem;
	padding-top: .7rem;
}

.nzk-posten-anfrage dd {
	color: var(--nzk-gedaempft);
}

.nzk-posten-summe {
	border-top: 2px solid var(--nzk-primaer);
	margin-top: .6rem;
	padding-top: .8rem;
	font-family: "Zilla Slab", Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--nzk-primaer);
}

.nzk-posten-summe dd {
	color: var(--nzk-akzent);
	font-size: 1.5rem;
}

.nzk-anfrage-hinweis {
	background: var(--nzk-sand-dunkel);
	/* Der Tonunterschied zur Sandfläche allein trägt den Kasten nicht. */
	border: 1px solid var(--nzk-linie);
	border-radius: var(--nzk-radius);
	padding: .6rem .75rem;
	font-size: .875rem;
	margin: .75rem 0 0;
}

.nzk-rechtlich {
	font-size: .8125rem;
	color: var(--nzk-gedaempft);
	margin: .75rem 0 1rem;
}

/* Hinweis in der Bestätigung: sichtbarer als das Kleingedruckte darüber. */
.nzk-beachten {
	font-size: .9375rem;
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	border-left: 3px solid var(--nzk-akzent);
}

/* Knöpfe ----------------------------------------------------------------- */

.nzk-knopf {
	display: block;
	width: 100%;
	padding: .9rem 1rem;
	border: 0;
	border-radius: var(--nzk-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.nzk-knopf-haupt {
	background: var(--nzk-akzent);
	color: #fff;
}

.nzk-knopf-haupt:hover,
.nzk-knopf-haupt:focus {
	background: var(--nzk-akzent-dunkel);
}

.nzk-noscript {
	font-size: .875rem;
	color: var(--nzk-gedaempft);
	margin: .75rem 0 0;
}

.nzk-zurueck {
	margin: 1rem 0 0;
	text-align: center;
	font-size: .875rem;
}

.nzk-zurueck a,
.nzk-zurueck .nzk-textknopf {
	color: var(--nzk-gedaempft);
}

/*
 * „Zurück" ist technisch ein Absende-Knopf, damit die Konfiguration mitgeht.
 * Hier werden nur die Stile entfernt, die Browser und Theme jedem <button>
 * mitgeben — er soll aussehen wie der Textlink zuvor, nicht wie eine zweite
 * Schaltfläche. Die Selektoren sind bewusst spezifisch genug, um die
 * Button-Regeln des Themes zu überschreiben.
 */
.nzk-konfigurator .nzk-zurueck .nzk-textknopf,
.nzk-konfigurator .nzk-zurueck .nzk-textknopf:hover,
.nzk-konfigurator .nzk-zurueck .nzk-textknopf:focus {
	display: inline;
	width: auto;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: var(--nzk-gedaempft);
	box-shadow: none;
	cursor: pointer;
}

.nzk-konfigurator .nzk-zurueck .nzk-textknopf:focus-visible {
	outline: 2px solid var(--nzk-akzent);
	outline-offset: 2px;
}

/* Hinweiskasten statt leerer Seite --------------------------------------- */

.nzk-hinweis-kasten {
	background: #F6EFE1;
	border: 1px solid #D9CDB6;
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
	max-width: 42rem;
}

.nzk-hinweis-kopf {
	font-weight: 600;
	color: #211C15;
	margin-top: 0;
}

/* Mobil ab 400 px (PROJEKTPLAN Schritt 5) -------------------------------- */

@media (max-width: 768px) {
	.nzk-raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.nzk-summenleiste {
		border-left: 0;
		border-top: 1px solid var(--nzk-linie);
	}

	/* Gestapelt sitzen beide Ecken unten am letzten Element. */
	.nzk-raster > :first-child {
		border-bottom-left-radius: 0;
	}

	.nzk-raster > :last-child {
		border-bottom-left-radius: var(--nzk-radius);
	}
}

@media (max-width: 560px) {
	.nzk-kopf,
	.nzk-auswahl,
	.nzk-summenleiste {
		padding: 1.1rem;
	}

	/*
	 * Schmale Ansicht: Haken und Text in der ersten Reihe, Menge und Preis in
	 * der zweiten. Vorher standen vier Spalten nebeneinander, wodurch der Preis
	 * aus dem Bild lief.
	 */
	.nzk-zeile {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: .45rem;
	}

	.nzk-zeile-text {
		grid-column: 2;
	}

	.nzk-menge {
		grid-row: 2;
		grid-column: 2;
		justify-self: start;
	}

	.nzk-zeile-preis {
		grid-row: 2;
		grid-column: 2;
		justify-self: end;
	}

	/* Ohne Mengenfeld steht der Preis allein in der zweiten Reihe. */
	.nzk-zeile-ohne-menge .nzk-zeile-preis {
		grid-row: 2;
	}

	.nzk-titel {
		font-size: 1.5rem;
	}
}

/* Anfrageformular (Schritt 2) -------------------------------------------- */

.nzk-felder {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem 1rem;
}

.nzk-feld-block {
	margin: 0;
}

.nzk-feld-schmal {
	max-width: 10rem;
}

.nzk-feld-breit {
	grid-column: 1 / -1;
}

.nzk-eingabe {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--nzk-linie);
	border-radius: var(--nzk-radius);
	background: #fff;
	color: var(--nzk-primaer);
	font-size: 1rem;
	font-family: inherit;
}

.nzk-eingabe:focus-visible {
	outline: 2px solid var(--nzk-akzent);
	outline-offset: 2px;
}

.nzk-eingabe[aria-invalid="true"] {
	border-color: #B3261E;
}

.nzk-pflicht {
	color: var(--nzk-akzent);
}

.nzk-feldfehler {
	display: block;
	color: #B3261E;
	font-size: .875rem;
	margin-top: .2rem;
}

.nzk-gruppenhinweis {
	color: var(--nzk-gedaempft);
	font-size: .9375rem;
	margin: -.4rem 0 .8rem;
}

.nzk-meldung {
	border-radius: var(--nzk-radius);
	padding: .8rem 1rem;
	margin: 1rem 0 0;
}

.nzk-meldung-fehler {
	background: #FBEAE9;
	border: 1px solid #B3261E;
	color: #8C1D18;
}

.nzk-einwilligung {
	display: block;
	margin: 0 0 .5rem;
}

.nzk-einwilligung label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .6rem;
	align-items: start;
	cursor: pointer;
}

.nzk-einwilligung input {
	margin-top: .2rem;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--nzk-akzent);
}

.nzk-pflichthinweis {
	color: var(--nzk-gedaempft);
	font-size: .875rem;
	margin: 0;
}

/*
 * Honigfalle: aus dem Bild geschoben statt display:none — manche Bots
 * überspringen versteckte Felder und liefen sonst durch.
 */
.nzk-honigfalle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Bestätigung ------------------------------------------------------------ */

.nzk-raster-schmal {
	grid-template-columns: minmax(0, 1fr);
}

.nzk-bestaetigung-typ {
	font-weight: 600;
	color: var(--nzk-primaer);
	margin: 0 0 .5rem;
}

.nzk-bestaetigung .nzk-aufstellung {
	max-width: 32rem;
}

@media (max-width: 560px) {
	.nzk-felder {
		grid-template-columns: minmax(0, 1fr);
	}

	.nzk-feld-schmal {
		max-width: none;
	}
}