/* =========================================================================
   Mobilheim Kolbe – v2-Preiskonfigurator (Frontend-Styles)
   Überarbeitet: responsiver (zusätzlicher Mobil-Breakpoint bei 480px,
   feinere Anpassungen für Tabelle/Buttons/Karten auf kleinen Screens)
   und visuell aufgewertet (Farbakzent, weichere Schatten/Radien,
   deutlichere Typografie-Hierarchie, Fokus-/Hover-Zustände).
   Alle Klassennamen sind unverändert – configurator-v2.js verlässt sich
   auf exakt diese Selektoren.
   ========================================================================= */

.kolbe-konfigurator-v2-root {
	--kolbe-kf-accent: #1d6fa5;
	--kolbe-kf-accent-dark: #135073;
	--kolbe-kf-accent-soft: #eaf3fa;
	--kolbe-kf-success: #1a7a3c;
	--kolbe-kf-border: #e2e5e9;
	--kolbe-kf-text: #22262b;
	--kolbe-kf-text-muted: #6b7280;
	--kolbe-kf-bg-card: #fff;
	--kolbe-kf-bg-page: #f7f8fa;
	--kolbe-kf-radius: 12px;
	--kolbe-kf-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 ), 0 4px 16px rgba( 16, 24, 40, 0.06 );
	--kolbe-kf-shadow-hover: 0 2px 4px rgba( 16, 24, 40, 0.06 ), 0 8px 24px rgba( 16, 24, 40, 0.09 );

	max-width: var( --kolbe-kf-max-width, 1140px );
	margin: 48px auto;
	font-family: inherit;
	color: var( --kolbe-kf-text );
	box-sizing: border-box;
	padding: 0 16px;
}

.kolbe-konfigurator-v2-root *,
.kolbe-konfigurator-v2-root *::before,
.kolbe-konfigurator-v2-root *::after {
	box-sizing: border-box;
}

.kolbe-v2-wrap {
	background: transparent;
}

.kolbe-v2-header {
	text-align: center;
	margin-bottom: 28px;
}

.kolbe-v2-header h3 {
	margin: 0 0 6px;
	font-size: 1.6em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.kolbe-v2-header::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	margin: 14px auto 0;
	background: var( --kolbe-kf-accent );
	border-radius: 3px;
}

.kolbe-v2-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 28px;
	align-items: start;
}

@media ( max-width: 780px ) {
	.kolbe-v2-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.kolbe-v2-sidebar {
		position: static !important;
		top: auto !important;
	}
}

@media ( max-width: 480px ) {
	.kolbe-konfigurator-v2-root {
		margin: 24px auto;
		padding: 0 10px;
	}
	.kolbe-v2-header h3 {
		font-size: 1.32em;
	}
}

.kolbe-v2-main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.kolbe-v2-card {
	border: 1px solid var( --kolbe-kf-border );
	border-radius: var( --kolbe-kf-radius );
	padding: 24px 28px;
	background: var( --kolbe-kf-bg-card );
	box-shadow: var( --kolbe-kf-shadow );
	transition: box-shadow 0.2s ease;
}

.kolbe-v2-card:hover {
	box-shadow: var( --kolbe-kf-shadow-hover );
}

@media ( max-width: 480px ) {
	.kolbe-v2-card {
		padding: 18px 16px;
		border-radius: 10px;
	}
}

.kolbe-v2-card h4 {
	margin: 0 0 16px;
	font-size: 1.12em;
	font-weight: 700;
	padding-bottom: 12px;
	border-bottom: 1px solid var( --kolbe-kf-border );
}

.kolbe-v2-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
}

@media ( max-width: 560px ) {
	.kolbe-v2-field-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.kolbe-v2-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 0.9em;
	color: var( --kolbe-kf-text );
}

.kolbe-v2-field select,
.kolbe-v2-field input,
.kolbe-v2-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 0.96em;
	font-family: inherit;
	color: var( --kolbe-kf-text );
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kolbe-v2-field select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
	cursor: pointer;
}

.kolbe-v2-field select:focus,
.kolbe-v2-field input:focus,
.kolbe-v2-field textarea:focus {
	outline: none;
	border-color: var( --kolbe-kf-accent );
	box-shadow: 0 0 0 3px var( --kolbe-kf-accent-soft );
}

.kolbe-v2-field-hinweis {
	margin: 6px 0 0;
	font-size: 0.8em;
	color: #6b7280;
	line-height: 1.4;
}

.kolbe-v2-static-value {
	padding: 10px 12px;
	background: var( --kolbe-kf-bg-page );
	border-radius: 8px;
	border: 1px solid var( --kolbe-kf-border );
	color: #333;
	font-weight: 600;
}

.kolbe-v2-hint {
	color: var( --kolbe-kf-text-muted );
	font-size: 0.88em;
	margin: 0 0 12px;
	line-height: 1.5;
}

.kolbe-v2-link-btn {
	background: none;
	border: none;
	color: var( --kolbe-kf-accent );
	text-decoration: none;
	cursor: pointer;
	padding: 6px 0 14px;
	font-size: 0.88em;
	font-weight: 600;
	display: block;
}

.kolbe-v2-link-btn:hover {
	text-decoration: underline;
	color: var( --kolbe-kf-accent-dark );
}

.kolbe-v2-moebel-group {
	margin-top: 20px;
}

.kolbe-v2-moebel-group:first-of-type {
	margin-top: 4px;
}

.kolbe-v2-moebel-group h5 {
	margin: 0 0 8px;
	border-bottom: 1px solid var( --kolbe-kf-border );
	padding-bottom: 6px;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var( --kolbe-kf-accent-dark );
	text-transform: uppercase;
}

/* Überschriften für die Gruppen-Unterteilung der Sonderausstattung
   (Taxonomie "Gruppen", z.B. "Design"/"Elektrik" wie bei Letniskowo) –
   optisch identisch zu .kolbe-v2-moebel-group h5, damit beide Listen im
   selben Look erscheinen. */
.kolbe-v2-options-gruppe-headline {
	margin: 20px 0 8px;
	border-bottom: 1px solid var( --kolbe-kf-border );
	padding-bottom: 6px;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var( --kolbe-kf-accent-dark );
	text-transform: uppercase;
}

.kolbe-v2-options-gruppe-headline:first-of-type {
	margin-top: 4px;
}

.kolbe-v2-moebel-list, .kolbe-v2-options-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kolbe-v2-moebel-list li, .kolbe-v2-options-list li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 12px 8px;
	border-bottom: 1px solid #f0f1f3;
	font-size: 0.94em;
	flex-wrap: wrap;
	transition: background 0.15s ease;
	border-radius: 8px;
}

.kolbe-v2-moebel-list li:hover, .kolbe-v2-options-list li:hover {
	background: var( --kolbe-kf-bg-page );
}

.kolbe-v2-moebel-list li:last-child, .kolbe-v2-options-list li:last-child {
	border-bottom: none;
}

/* Checkbox + Bezeichnung als eigener flex-Block, damit bei mehrzeiligen
   Labels (lange Bezeichnungen auf schmalen Screens) die Checkbox oben
   bündig bleibt statt mittig zwischen den Zeilen zu "schweben". */
.kolbe-v2-option-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	flex: 1 1 200px;
	line-height: 1.4;
}

.kolbe-v2-moebel-list input[type="checkbox"],
.kolbe-v2-options-list input[type="checkbox"],
.kolbe-v2-options-list input[type="radio"],
.kolbe-v2-option-label input[type="checkbox"],
.kolbe-v2-option-label input[type="radio"] {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: var( --kolbe-kf-accent );
	cursor: pointer;
}

/* Preis als eigenständiges Badge statt Fließtext-Klammer – bricht auf
   schmalen Screens sauber in eine eigene Zeile, statt mitten im Preis
   ("(+261,80" / "€)") umzubrechen. */
.kolbe-v2-option-price {
	flex-shrink: 0;
	align-self: flex-start;
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.86em;
	color: var( --kolbe-kf-accent-dark );
	background: var( --kolbe-kf-accent-soft );
	padding: 3px 11px;
	border-radius: 999px;
}

.kolbe-v2-moebel-remove {
	white-space: nowrap;
	font-size: 0.86em;
	font-weight: 700;
	color: #b3261e;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	background: #fdecea;
	padding: 3px 11px;
	border-radius: 999px;
	flex-shrink: 0;
}

.kolbe-v2-moebel-remove input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #b3261e;
	cursor: pointer;
}

@media ( max-width: 480px ) {
	.kolbe-v2-moebel-list li, .kolbe-v2-options-list li {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 8px;
		padding: 12px 6px;
	}
	/* Ohne dies erbt das Label seine "flex: 1 1 200px" (für die
	   Zwei-Spalten-Anordnung auf breiteren Screens) weiter – im
	   Spalten-Layout (flex-direction:column) wirkt "200px" dann aber als
	   Mindest-HÖHE statt Breite, plus flex-grow:1 füllt zusätzlich den
	   ganzen Platz. Ergebnis war eine riesige Lücke zwischen Bezeichnung
	   und Preis-Pille. Im Spalten-Layout soll das Label nur so hoch sein
	   wie sein Inhalt.
	*/
	.kolbe-v2-option-label {
		flex: 0 0 auto;
		width: 100%;
	}
	.kolbe-v2-option-price {
		margin-left: 29px;
	}
}

.kolbe-v2-moebel-hint {
	font-size: 0.85em;
	color: #9aa1ab;
	font-style: italic;
	white-space: nowrap;
}

.kolbe-v2-lead-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: linear-gradient( 180deg, var( --kolbe-kf-bg-card ), #fbfdff );
}

.kolbe-v2-sidebar {
	position: sticky;
	top: 20px;
}

.kolbe-v2-kalkulation-card {
	background: var( --kolbe-kf-bg-card );
	border: 1px solid var( --kolbe-kf-border );
	border-top: 4px solid var( --kolbe-kf-accent );
}

.kolbe-v2-kalkulation-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94em;
}

.kolbe-v2-kalkulation-table th {
	text-align: right;
	font-weight: 700;
	color: var( --kolbe-kf-text-muted );
	font-size: 0.78em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-bottom: 10px;
}

.kolbe-v2-kalkulation-table th:first-child {
	text-align: left;
}

.kolbe-v2-kalkulation-table td {
	padding: 9px 0;
	border-bottom: 1px solid #f0f1f3;
}

.kolbe-v2-kalkulation-table td:first-child {
	color: #444;
}

.kolbe-v2-kalkulation-table td:not( :first-child ) {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 480px ) {
	.kolbe-v2-kalkulation-table {
		font-size: 0.88em;
	}
	.kolbe-v2-kalkulation-table td,
	.kolbe-v2-kalkulation-table th {
		padding-top: 7px;
		padding-bottom: 7px;
	}
}

.kolbe-v2-total-row td {
	border-top: 2px solid var( --kolbe-kf-text );
	border-bottom: none;
	font-weight: 700;
	font-size: 1.2em;
	padding-top: 14px;
	color: var( --kolbe-kf-success );
}

.kolbe-v2-vat-note {
	color: var( --kolbe-kf-text-muted );
	font-size: 0.8em;
	margin: 10px 0 0;
	text-align: right;
}

.kolbe-v2-btn {
	padding: 13px 26px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	font-size: 1em;
	font-weight: 600;
	align-self: flex-start;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

@media ( max-width: 560px ) {
	.kolbe-v2-btn {
		width: 100%;
		align-self: stretch;
		text-align: center;
	}
}

.kolbe-v2-btn-primary {
	background: var( --kolbe-kf-accent );
	color: #fff;
	box-shadow: 0 2px 8px rgba( 29, 111, 165, 0.28 );
}

.kolbe-v2-btn-primary:hover {
	background: var( --kolbe-kf-accent-dark );
	box-shadow: 0 4px 14px rgba( 29, 111, 165, 0.34 );
}

.kolbe-v2-btn-primary:active {
	transform: translateY( 1px );
}

.kolbe-v2-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
}

.kolbe-v2-form-status {
	min-height: 1.2em;
	font-size: 0.92em;
}

.kolbe-v2-form-status-error {
	color: #c00;
	font-weight: 600;
}

.kolbe-v2-thankyou {
	text-align: center;
	padding: 56px 24px;
	background: var( --kolbe-kf-bg-card );
	border: 1px solid var( --kolbe-kf-border );
	border-radius: var( --kolbe-kf-radius );
	box-shadow: var( --kolbe-kf-shadow );
}

.kolbe-v2-thankyou h3 {
	color: var( --kolbe-kf-success );
	font-size: 1.4em;
	margin: 0 0 10px;
}