/* SAMA Konfigurator – Farben aus dem Elementor Global Kit (mit Fallbacks). */
.sama-konfigurator {
	--k-primaer: var(--sama-primaer, #1f7a6d);
	--k-primaer-dunkel: var(--sama-primaer-dunkel, #155c52);
	--k-primaer-hell: var(--sama-primaer-hell, #e3f1ee);
	--k-text: var(--sama-text, #2b3135);
	--k-gedaempft: var(--sama-text-gedaempft, #5a6469);
	--k-linie: var(--sama-linie, #dde3e1);
	--k-akzent: var(--sama-akzent, #f2a93b);
	--k-akzent-dunkel: var(--sama-akzent-dunkel, #d98e1f);
	--k-fehler: var(--sama-fehler, #c62828);
	--k-erfolg: var(--sama-erfolg, #2e7d32);
	--k-radius: var(--sama-radius, 12px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	font-family: var(--sama-schrift, Manrope), system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--k-text);
	text-align: left;
}

.sama-konfigurator *,
.sama-konfigurator *::before,
.sama-konfigurator *::after {
	box-sizing: border-box;
}

.sama-konfigurator button {
	text-transform: none;
	letter-spacing: normal;
}

.sama-konfigurator :focus-visible {
	outline: 3px solid var(--k-akzent);
	outline-offset: 2px;
}

.sama-konfigurator .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Fortschritt */
.sama-fortschritt {
	display: flex;
	gap: 6px;
	margin: 0 0 4px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.sama-fortschritt li {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--k-gedaempft);
	text-align: center;
	position: relative;
}
.sama-fortschritt li::after {
	content: "";
	position: absolute;
	top: 13px;
	left: calc(50% + 16px);
	right: calc(-50% + 16px);
	height: 2px;
	background: var(--k-linie);
}
.sama-fortschritt li:last-child::after { display: none; }
.sama-fortschritt__nr {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--k-linie);
	background: #fff;
	font-weight: 800;
	font-size: 13px;
}
.sama-fortschritt li.is-aktiv .sama-fortschritt__nr { border-color: var(--k-primaer); color: var(--k-primaer); }
.sama-fortschritt li.is-fertig .sama-fortschritt__nr { background: var(--k-primaer); border-color: var(--k-primaer); color: #fff; }
.sama-fortschritt li.is-fertig::after { background: var(--k-primaer); }
@media (max-width: 480px) {
	.sama-fortschritt__titel { display: none; }
}

/* Schritte */
.sama-schritt {
	border: 1px solid var(--k-linie);
	border-radius: var(--k-radius);
	background: #fff;
	overflow: hidden;
}
.sama-schritt.is-offen { border-color: var(--k-primaer); box-shadow: 0 6px 24px rgba(34, 39, 43, 0.07); }
.sama-schritt__kopf { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.sama-konfigurator .sama-schritt__kopf button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 16px 18px;
	border: 0;
	background: transparent;
	color: var(--sama-anthrazit, #22272b);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.sama-konfigurator .sama-schritt__kopf button:hover,
.sama-konfigurator .sama-schritt__kopf button:focus { background: var(--k-primaer-hell); color: var(--sama-anthrazit, #22272b); }
.sama-schritt__nr {
	display: grid;
	place-items: center;
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--k-primaer-hell);
	color: var(--k-primaer);
	font-weight: 800;
	font-size: 14px;
}
.sama-schritt.is-fertig .sama-schritt__nr { background: var(--k-primaer); color: #fff; }
.sama-schritt__wahl {
	margin-left: auto;
	font-size: 14px;
	font-weight: 500;
	color: var(--k-gedaempft);
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 55%;
}
.sama-schritt__inhalt { display: flex; flex-direction: column; gap: 18px; padding: 4px 18px 20px; }
.sama-konfigurator.is-js .sama-schritt:not(.is-offen) .sama-schritt__inhalt { display: none; }

/* Felder */
.sama-feld { margin: 0; padding: 0; border: 0; min-width: 0; }
.sama-feld legend,
.sama-feld > label,
.sama-feld--mass label {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--sama-anthrazit, #22272b);
}
.sama-hilfe { margin: 6px 0 0; font-size: 14px; color: var(--k-gedaempft); }
.sama-fehler { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--k-fehler); }
.sama-fehler:empty { display: none; }

/* Kacheln */
.sama-kacheln { display: grid; gap: 10px; }
.sama-kacheln--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) { .sama-kacheln--2 { grid-template-columns: 1fr; } }
.sama-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 14px 14px 44px;
	border: 2px solid var(--k-linie);
	border-radius: var(--k-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.sama-kachel:hover { border-color: var(--k-primaer); }
.sama-kachel input {
	position: absolute;
	top: 16px;
	left: 14px;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--k-primaer);
}
.sama-kachel:has(input:checked) { border-color: var(--k-primaer); background: var(--k-primaer-hell); }
.sama-kachel:has(input:focus-visible) { outline: 3px solid var(--k-akzent); outline-offset: 2px; }
.sama-kachel__titel { font-weight: 700; color: var(--sama-anthrazit, #22272b); }
.sama-kachel__text { font-size: 14px; color: var(--k-gedaempft); }
.sama-kachel__preis { font-size: 14px; font-weight: 700; color: var(--k-primaer-dunkel); }
.sama-kachel--bild { padding-top: 12px; }
.sama-kachel__grafik { display: block; color: var(--sama-anthrazit, #22272b); }
.sama-kachel__grafik svg { display: block; width: 100%; max-width: 140px; height: auto; }
.has-fehler .sama-kachel { border-color: var(--k-fehler); }

/* Maße */
.sama-masse { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; align-items: start; }
@media (max-width: 560px) { .sama-masse { grid-template-columns: 1fr; } .sama-vorschau { max-width: 180px; } }
.sama-masse__felder { display: flex; flex-direction: column; gap: 14px; }
.sama-eingabe { position: relative; }
.sama-eingabe input {
	width: 100%;
	height: 52px;
	padding: 0 52px 0 14px;
	border: 2px solid var(--k-linie);
	border-radius: var(--k-radius);
	background: #fff;
	font: inherit;
	font-size: 20px;
	font-weight: 700;
	color: var(--sama-anthrazit, #22272b);
}
.sama-eingabe input:focus { border-color: var(--k-primaer); outline: none; box-shadow: 0 0 0 3px var(--k-primaer-hell); }
.has-fehler .sama-eingabe input { border-color: var(--k-fehler); }
.sama-eingabe__einheit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--k-gedaempft); font-weight: 600; }
.sama-einheit { font-weight: 500; color: var(--k-gedaempft); }
.sama-konfigurator .sama-link-button,
.sama-konfigurator .sama-link-button:hover,
.sama-konfigurator .sama-link-button:focus {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--k-primaer);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.sama-vorschau { margin: 0; color: var(--k-primaer); text-align: center; }
.sama-vorschau__svg { display: block; width: 100%; height: auto; }
.sama-vorschau figcaption { font-size: 13px; color: var(--k-gedaempft); }

/* Farben */
.sama-farben { display: flex; flex-wrap: wrap; gap: 12px; }
.sama-farbe {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	border: 2px solid var(--k-linie);
	border-radius: 999px;
	cursor: pointer;
}
.sama-farbe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sama-farbe__kreis { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); }
.sama-farbe__label { font-weight: 600; font-size: 15px; }
.sama-farbe:has(input:checked) { border-color: var(--k-primaer); background: var(--k-primaer-hell); }
.sama-farbe:has(input:focus-visible) { outline: 3px solid var(--k-akzent); outline-offset: 2px; }
.has-fehler .sama-farbe { border-color: var(--k-fehler); }

/* Weiter */
.sama-konfigurator .sama-weiter {
	align-self: flex-start;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--k-radius);
	background: var(--k-primaer);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.sama-konfigurator .sama-weiter:hover,
.sama-konfigurator .sama-weiter:focus { background: var(--k-primaer-dunkel); color: #fff; }
.sama-konfigurator:not(.is-js) .sama-weiter[data-weiter] { display: none; }

/* Zusammenfassung */
.sama-zusammenfassung { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 15px; }
.sama-zusammenfassung dt { color: var(--k-gedaempft); }
.sama-zusammenfassung dd { margin: 0; font-weight: 700; }
.sama-bestaetigung { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.sama-bestaetigung input { flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--k-primaer); }

/* Kaufleiste */
.sama-kaufleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px;
	border-radius: var(--k-radius);
	background: var(--sama-anthrazit, #22272b);
	color: #fff;
}
.sama-kaufleiste__preis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sama-kaufleiste__label { font-size: 13px; color: #c9d1ce; }
.sama-kaufleiste__betrag { font-size: 28px; font-weight: 800; line-height: 1.1; color: #fff; }
.sama-kaufleiste__betrag .woocommerce-Price-amount { color: inherit; }
.sama-konfigurator.is-rechnet .sama-kaufleiste__betrag { opacity: 0.6; }
.sama-kaufleiste__info,
.sama-kaufleiste__lieferzeit { font-size: 13px; color: #c9d1ce; }
.sama-kaufleiste__info a { color: #fff; }
.sama-kaufleiste__aktion { display: flex; gap: 10px; align-items: stretch; }
.sama-menge {
	width: 68px;
	height: 52px;
	padding: 0 8px;
	border: 0;
	border-radius: var(--k-radius);
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
.sama-konfigurator .sama-warenkorb-button {
	height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--k-radius);
	background: var(--k-akzent);
	color: var(--sama-anthrazit, #22272b);
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
	white-space: nowrap;
}
.sama-konfigurator .sama-warenkorb-button:hover,
.sama-konfigurator .sama-warenkorb-button:focus { background: var(--k-akzent-dunkel); color: var(--sama-anthrazit, #22272b); }
.sama-konfigurator.is-sendet .sama-warenkorb-button { opacity: 0.7; pointer-events: none; }
.sama-fehler--gesamt { flex-basis: 100%; margin: 0; color: #ffb4a9; }

@media (max-width: 767px) {
	.sama-kaufleiste {
		position: sticky;
		bottom: 0;
		z-index: 50;
		margin: 0 -16px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		border-radius: 0;
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
	}
	.sama-kaufleiste { flex-wrap: nowrap; gap: 10px; }
	.sama-kaufleiste__preis { flex: 1 1 auto; }
	.sama-kaufleiste__label,
	.sama-kaufleiste__lieferzeit { display: none; }
	.sama-kaufleiste__betrag { font-size: 20px; white-space: nowrap; }
	.sama-kaufleiste__info { font-size: 11px; line-height: 1.35; }
	.sama-kaufleiste__aktion { flex: 0 0 auto; gap: 6px; }
	.sama-menge { width: 48px; height: 48px; padding: 0 4px; font-size: 16px; }
	.sama-konfigurator .sama-warenkorb-button { height: 48px; padding: 0 12px; font-size: 15px; }
	.sama-fehler--gesamt { position: absolute; left: 16px; right: 16px; bottom: 100%; margin-bottom: 6px; padding: 8px 12px; border-radius: 8px; background: var(--k-fehler); color: #fff; }
}

/* Messhilfe */
.sama-messhilfe {
	width: min(560px, calc(100% - 32px));
	padding: 0;
	border: 0;
	border-radius: var(--k-radius);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.sama-messhilfe::backdrop { background: rgba(34, 39, 43, 0.55); }
.sama-messhilfe__inhalt { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.sama-messhilfe h3 { margin: 0; font-size: 21px; }
.sama-messhilfe ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

.sama-hinweise:empty { display: none; }
.sama-hinweise .woocommerce-message,
.sama-hinweise .woocommerce-error,
.sama-hinweise .woocommerce-info {
	margin: 0 0 8px;
	padding: 12px 16px;
	border-radius: var(--k-radius);
	list-style: none;
}