/*!
 * Konfigurator — uebernommen aus dem Premium-Theme Mirau Bau v1.
 *
 * Die Regeln stehen so da, wie sie dort standen. Nur eines ist geaendert:
 * Jeder Selektor haengt unter `.mb-konfig`. Der Konfigurator bringt generische
 * Klassennamen mit — .button, .eyebrow, .icon, .notice — und ohne diese
 * Kapselung wuerden sie die Knoepfe und Vorzeilen des uebrigen Themes
 * ueberschreiben.
 *
 * Die Farb- und Formwerte stehen als eigene Variablen auf der Huelle. Wer
 * den Konfigurator spaeter an die CI angleichen will, aendert sie dort —
 * und sonst nichts.
 *
 * Erzeugt aus assets/css/main.css des Premium-Themes.
 */

.mb-konfig {
	--color-brand: #2c4742;
	--color-brand-dark: #18312d;
	--color-brand-deep: #102522;
	--color-accent: #d4c5aa;
	--color-accent-soft: #eee7d9;
	--color-ink: #17211f;
	--color-copy: #4e5d59;
	--color-muted: #71807c;
	--color-line: #dfe5e2;
	--color-line-dark: rgba(255, 255, 255, 0.13);
	--color-surface: #ffffff;
	--color-surface-soft: #f4f5f2;
	--color-surface-warm: #f5f1e9;
	--color-success: #2d6d53;
	--color-error: #a73b36;
	--font-sans: inherit;
	--font-display: inherit;
	--container: 1240px;
	--container-narrow: 780px;
	--header-height: 78px;
	--radius-xs: 8px;
	--radius-sm: 14px;
	--radius-md: 22px;
	--radius-lg: 32px;
	--shadow-sm: 0 12px 30px rgba(16, 37, 34, 0.08);
	--shadow-md: 0 22px 60px rgba(16, 37, 34, 0.13);
	--shadow-lg: 0 38px 90px rgba(16, 37, 34, 0.18);
	--transition: 180ms ease;

	font-family: var(--font-sans);
	color: var(--color-copy);
}

.mb-konfig button,
.mb-konfig input,
.mb-konfig select,
.mb-konfig textarea {
	max-width: 100%;
	min-width: 0;
	font: inherit;
}
.mb-konfig button,
.mb-konfig [type="button"],
.mb-konfig [type="submit"] {
	cursor: pointer;
}
.mb-konfig p,
.mb-konfig li,
.mb-konfig dd,
.mb-konfig dt,
.mb-konfig a,
.mb-konfig button,
.mb-konfig label,
.mb-konfig span,
.mb-konfig strong,
.mb-konfig small,
.mb-konfig h1,
.mb-konfig h2,
.mb-konfig h3,
.mb-konfig h4,
.mb-konfig h5,
.mb-konfig h6 {
	overflow-wrap: anywhere;
	word-break: normal;
}
.mb-konfig .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	color: var(--color-brand);
	font-size: 0.77rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.35;
	text-transform: uppercase;
}
.mb-konfig .eyebrow::before {
	content: "";
	flex: 0 0 30px;
	width: 30px;
	height: 1px;
	background: currentColor;
}
.mb-konfig .eyebrow--light {
	color: var(--color-accent);
}
.mb-konfig .icon,
.mb-konfig .button-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}
.mb-konfig .icon svg,
.mb-konfig .button-icon svg {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mb-konfig .button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.mb-konfig .button {
	display: inline-flex;
	min-height: 50px;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px clamp(17px, 2vw, 23px);
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: clamp(0.82rem, 0.78rem + 0.16vw, 0.94rem);
	font-weight: 800;
	letter-spacing: 0.005em;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	text-wrap: balance;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.mb-konfig .button:hover {
	transform: translateY(-2px);
	text-decoration: none;
}
.mb-konfig .button:active {
	transform: translateY(0);
}
.mb-konfig .button .button-icon {
	font-size: 1.15em;
	transition: transform var(--transition);
}
.mb-konfig .button:hover .button-icon:not(.button-icon--back) {
	transform: translateX(3px);
}
.mb-konfig .button:hover .button-icon--back {
	transform: translateX(-3px) rotate(180deg);
}
.mb-konfig .button-icon--back {
	transform: rotate(180deg);
}
.mb-konfig .button--large {
	min-height: 58px;
	padding: 15px clamp(21px, 2.4vw, 29px);
	font-size: clamp(0.88rem, 0.83rem + 0.18vw, 1rem);
}
.mb-konfig .button--primary,
.mb-konfig .button--primary:link,
.mb-konfig .button--primary:visited,
.mb-konfig .button--primary:hover,
.mb-konfig .button--primary:focus-visible,
.mb-konfig .button--primary:active {
	color: #fff;
}
.mb-konfig .button--primary {
	background: var(--color-brand);
	box-shadow: 0 10px 28px rgba(44, 71, 66, 0.18);
}
.mb-konfig .button--primary:hover,
.mb-konfig .button--primary:focus-visible {
	background: var(--color-brand-dark);
	box-shadow: 0 16px 36px rgba(44, 71, 66, 0.25);
}
.mb-konfig .button--ghost {
	background: transparent;
	border-color: color-mix(in srgb, var(--color-brand) 28%, transparent);
	color: var(--color-brand-dark);
}
.mb-konfig .button--ghost:hover {
	background: var(--color-brand-dark);
	border-color: var(--color-brand-dark);
	color: #fff;
}
.mb-konfig .button--light {
	background: #fff;
	color: var(--color-brand-dark);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.mb-konfig .button--light:hover {
	background: var(--color-accent-soft);
	color: var(--color-brand-deep);
}
.mb-konfig .button--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.mb-konfig .button--outline-light:hover {
	background: #fff;
	border-color: #fff;
	color: var(--color-brand-dark);
}
.mb-konfig .text-link .button-icon {
	font-size: 1.15em;
	transition: transform var(--transition);
}
.mb-konfig .text-link:hover .button-icon {
	transform: translateX(4px);
}
.mb-konfig .hero-section__proof .icon {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--color-brand);
	color: #fff;
	font-size: 0.7rem;
}
.mb-konfig .hero-section__floating-icon {
	display: grid;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 50%;
	background: var(--color-surface-warm);
	color: var(--color-brand);
}
.mb-konfig .hero-section__floating-icon .icon {
	font-size: 1.35rem;
}
.mb-konfig .trust-strip__grid .icon {
	font-size: 1.35rem;
}
.mb-konfig .service-card__icon .icon {
	font-size: 2rem;
}
.mb-konfig .service-card__link .button-icon {
	transition: transform var(--transition);
}
.mb-konfig .service-card:hover .service-card__link .button-icon {
	transform: translateX(4px);
}
.mb-konfig .feature-list .icon {
	font-size: 1.45rem;
}
.mb-konfig .comparison__divider .icon {
	font-size: 1.06rem;
}
.mb-konfig .comparison__divider .icon:first-child {
	transform: rotate(180deg);
}
.mb-konfig .comparison__video-toggle-icon {
	display: grid;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	place-items: center;
	font-size: 0.7rem;
	line-height: 1;
}
.mb-konfig .process-grid__icon .icon {
	font-size: 2.1rem;
}
.mb-konfig .check-list {
	display: grid;
	gap: 11px;
	padding: 0;
	margin: 25px 0 33px;
	list-style: none;
}
.mb-konfig .check-list li {
	display: flex;
	min-width: 0;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.88rem;
	font-weight: 700;
}
.mb-konfig .check-list .icon {
	width: 21px;
	height: 21px;
	margin-top: 3px;
	border-radius: 50%;
	background: var(--color-brand);
	color: #fff;
	font-size: 0.7rem;
}
.mb-konfig .check-list--light li {
	color: rgba(255, 255, 255, 0.9);
}
.mb-konfig .check-list--light .icon {
	background: rgba(255, 255, 255, 0.14);
	color: var(--color-accent);
}
.mb-konfig .check-list--small {
	gap: 8px;
	margin: 22px 0 0;
}
.mb-konfig .check-list--small li {
	font-size: 0.77rem;
	font-weight: 650;
}
.mb-konfig .check-list--small .icon {
	width: 18px;
	height: 18px;
	font-size: 0.6rem;
}
.mb-konfig .accordion__item button {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 28px;
	gap: 18px;
	align-items: center;
	width: 100%;
	padding: 25px 2px;
	background: none;
	border: 0;
	color: var(--color-ink);
	font-weight: 780;
	line-height: 1.42;
	text-align: left;
}
.mb-konfig .accordion__item button i {
	position: relative;
	width: 28px;
	height: 28px;
	border: 1px solid var(--color-line);
	border-radius: 50%;
}
.mb-konfig .accordion__item button i::before,
.mb-konfig .accordion__item button i::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 1.5px;
	background: var(--color-brand);
	transform: translate(-50%, -50%);
	transition: transform var(--transition);
}
.mb-konfig .accordion__item button i::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
.mb-konfig .accordion__item button[aria-expanded="true"] i::after {
	transform: translate(-50%, -50%) rotate(0deg);
}
.mb-konfig .empty-state__icon .icon {
	font-size: 2.2rem;
}
.mb-konfig .whatsapp-link .icon {
	color: #87d199;
}
.mb-konfig .configurator-page {
	background: var(--color-surface-soft);
}
.mb-konfig .configurator-page__content {
	padding-block: clamp(50px, 7vw, 94px) clamp(80px, 9vw, 128px);
}
.mb-konfig .configurator-shell {
	min-width: 0;
}
.mb-konfig .configurator-shell__intro {
	display: flex;
	gap: 35px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 32px;
}
.mb-konfig .configurator-shell__intro > div {
	min-width: 0;
}
.mb-konfig .configurator-shell__intro h2 {
	margin-bottom: 17px;
	font-size: clamp(2.15rem, 3.5vw, 3.55rem);
}
.mb-konfig .configurator-shell__intro p {
	max-width: 780px;
	margin: 0;
	font-size: 0.96rem;
}
.mb-konfig .configurator-shell__trust {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: flex-end;
}
.mb-konfig .configurator-shell__trust span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 11px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	color: var(--color-brand-dark);
	font-size: 0.69rem;
	font-weight: 750;
	box-shadow: 0 7px 18px rgba(16, 37, 34, 0.04);
}
.mb-konfig .configurator-shell__trust .icon {
	color: var(--color-brand);
}
.mb-konfig .configurator {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	overflow: clip;
}
.mb-konfig .configurator__progress {
	padding: 29px clamp(24px, 4vw, 48px) 23px;
	background: var(--color-brand-dark);
	color: #fff;
}
.mb-konfig .configurator__progress-head {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 13px;
	font-size: 0.77rem;
}
.mb-konfig .configurator__progress-head span {
	color: rgba(255, 255, 255, 0.64);
	font-weight: 700;
}
.mb-konfig .configurator__progress-head strong {
	color: #fff;
}
.mb-konfig .configurator__progress-track {
	display: none;
	height: 5px;
	background: rgba(255, 255, 255, 0.13);
	border-radius: 99px;
	overflow: hidden;
}
.mb-konfig .configurator__progress-track span {
	display: block;
	width: 14.2857%;
	height: 100%;
	background: var(--color-accent);
	border-radius: inherit;
	transition: width 320ms ease;
}
.mb-konfig .configurator__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}
.mb-konfig .configurator__steps::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 7.1428%;
	right: 7.1428%;
	height: 1px;
	background: rgba(255, 255, 255, 0.17);
}
.mb-konfig .configurator__steps li {
	position: relative;
	z-index: 1;
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.46);
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	transition: color var(--transition);
}
.mb-konfig .configurator__steps li span {
	display: grid;
	width: 35px;
	height: 35px;
	place-items: center;
	background: var(--color-brand-dark);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.7);
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.mb-konfig .configurator__steps li small {
	font-size: inherit;
}
.mb-konfig .configurator__steps li.is-active,
.mb-konfig .configurator__steps li.is-complete {
	color: #fff;
}
.mb-konfig .configurator__steps li.is-active span {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-brand-deep);
	transform: scale(1.08);
}
.mb-konfig .configurator__steps li.is-complete span {
	background: var(--color-brand);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.mb-konfig .configurator__steps li.is-clickable {
	cursor: pointer;
}
.mb-konfig .configurator__form,
.mb-konfig .configurator__layout,
.mb-konfig .configurator__stage,
.mb-konfig .configurator-step {
	min-width: 0;
}
.mb-konfig .configurator__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
	align-items: stretch;
}
.mb-konfig .configurator__stage {
	padding: clamp(30px, 5vw, 58px);
	border-right: 1px solid var(--color-line);
}
.mb-konfig .configurator-step {
	min-height: 520px;
	animation: configuratorStepIn 300ms ease both;
}
@keyframes configuratorStepIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.mb-konfig .configurator-step__heading {
	max-width: 800px;
	margin-bottom: 33px;
}
.mb-konfig .configurator-step__heading .eyebrow {
	margin-bottom: 12px;
}
.mb-konfig .configurator-step__heading h3 {
	margin-bottom: 13px;
	font-size: clamp(1.75rem, 3vw, 2.65rem);
}
.mb-konfig .configurator-step__heading p {
	margin: 0;
	font-size: 0.9rem;
}
.mb-konfig .configurator__honeypot {
	position: absolute !important;
	left: -99999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}
.mb-konfig .choice-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.mb-konfig .choice-grid--products {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mb-konfig .choice-grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mb-konfig .choice-grid--roof {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mb-konfig .choice-card,
.mb-konfig .color-choice,
.mb-konfig .extra-choice,
.mb-konfig .field-card {
	position: relative;
	min-width: 0;
}
.mb-konfig .choice-card {
	display: flex;
	min-height: 160px;
	flex-direction: column;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.mb-konfig .choice-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--color-brand) 38%, var(--color-line));
	box-shadow: var(--shadow-sm);
}
.mb-konfig .choice-card:has(input:checked),
.mb-konfig .choice-card.is-selected {
	background: color-mix(in srgb, var(--color-brand) 5%, #fff);
	border-color: var(--color-brand);
	box-shadow: 0 0 0 1px var(--color-brand), 0 12px 26px rgba(44, 71, 66, 0.1);
}
.mb-konfig .choice-card input,
.mb-konfig .color-choice input,
.mb-konfig .extra-choice input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.mb-konfig .choice-card input:focus-visible + .choice-card__check,
.mb-konfig .color-choice input:focus-visible ~ .color-choice__check,
.mb-konfig .extra-choice input:focus-visible + .extra-choice__box {
	outline: 3px solid var(--color-accent);
	outline-offset: 3px;
}
.mb-konfig .choice-card__check {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	color: transparent;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.mb-konfig .choice-card__check .icon {
	font-size: 0.72rem;
}
.mb-konfig .choice-card:has(input:checked) .choice-card__check,
.mb-konfig .choice-card.is-selected .choice-card__check {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}
.mb-konfig .choice-card__icon {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	margin-bottom: 20px;
	background: var(--color-surface-warm);
	border-radius: 50%;
	color: var(--color-brand);
}
.mb-konfig .choice-card__icon .icon {
	font-size: 1.65rem;
}
.mb-konfig .choice-card strong,
.mb-konfig .choice-card small,
.mb-konfig .choice-card__price {
	display: block;
	min-width: 0;
	line-height: 1.42;
}
.mb-konfig .choice-card strong {
	padding-right: 20px;
	color: var(--color-ink);
	font-size: 0.94rem;
}
.mb-konfig .choice-card small {
	margin-top: 6px;
	color: var(--color-muted);
	font-size: 0.72rem;
}
.mb-konfig .choice-card__price {
	margin-top: auto;
	padding-top: 15px;
	color: var(--color-brand);
	font-size: 0.7rem;
	font-weight: 800;
}
.mb-konfig .choice-card--compact {
	min-height: 124px;
	justify-content: center;
	padding: 22px 48px 22px 22px;
}
.mb-konfig .choice-card--compact strong {
	font-size: 0.9rem;
}
.mb-konfig .choice-card.is-hidden,
.mb-konfig .choice-card[hidden] {
	display: none !important;
}
.mb-konfig .field-note {
	margin-top: 21px;
	padding: 13px 16px;
	background: var(--color-surface-warm);
	border-left: 3px solid var(--color-accent);
	border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
	color: var(--color-copy);
	font-size: 0.78rem;
	line-height: 1.55;
}
.mb-konfig .field-note strong {
	color: var(--color-ink);
}
.mb-konfig .dimension-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
}
.mb-konfig .field-card {
	display: block;
	padding: 20px;
	background: var(--color-surface-soft);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
}
.mb-konfig .field-card > span:first-child {
	display: block;
	margin-bottom: 10px;
	color: var(--color-ink);
	font-size: 0.76rem;
	font-weight: 800;
}
.mb-konfig .field-card > small {
	display: block;
	margin-top: 8px;
	color: var(--color-muted);
	font-size: 0.65rem;
}
.mb-konfig .input-with-unit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xs);
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.mb-konfig .input-with-unit:focus-within {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(44, 71, 66, 0.1);
}
.mb-konfig .input-with-unit input {
	width: 100%;
	min-height: 48px;
	padding: 9px 5px 9px 13px;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--color-ink);
	font-size: 1rem;
	font-weight: 750;
}
.mb-konfig .input-with-unit b {
	padding: 0 12px;
	color: var(--color-muted);
	font-size: 0.72rem;
}
.mb-konfig .dimension-result {
	display: flex;
	align-items: center;
	gap: 13px;
	width: fit-content;
	max-width: 100%;
	margin-top: 21px;
	padding: 13px 17px;
	background: var(--color-brand-dark);
	border-radius: var(--radius-sm);
	color: #fff;
}
.mb-konfig .dimension-result > span {
	display: grid;
	width: 37px;
	height: 37px;
	place-items: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	color: var(--color-accent);
}
.mb-konfig .dimension-result small,
.mb-konfig .dimension-result strong {
	display: block;
	line-height: 1.25;
}
.mb-konfig .dimension-result small {
	color: rgba(255, 255, 255, 0.59);
	font-size: 0.65rem;
}
.mb-konfig .dimension-result strong {
	margin-top: 3px;
	color: #fff;
	font-family: var(--font-display);
	font-size: 1.15rem;
}
.mb-konfig .color-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.mb-konfig .color-choice {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 22px;
	gap: 10px;
	align-items: center;
	min-height: 76px;
	padding: 13px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.mb-konfig .color-choice:hover {
	border-color: color-mix(in srgb, var(--color-brand) 38%, var(--color-line));
}
.mb-konfig .color-choice:has(input:checked),
.mb-konfig .color-choice.is-selected {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 1px var(--color-brand);
}
.mb-konfig .color-choice__swatch {
	width: 38px;
	height: 38px;
	background: var(--swatch);
	border: 1px solid rgba(23, 33, 31, 0.17);
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4);
}
.mb-konfig .color-choice strong {
	min-width: 0;
	font-size: 0.7rem;
	line-height: 1.35;
}
.mb-konfig .color-choice__check {
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	color: transparent;
}
.mb-konfig .color-choice__check .icon {
	font-size: 0.65rem;
}
.mb-konfig .color-choice:has(input:checked) .color-choice__check,
.mb-konfig .color-choice.is-selected .color-choice__check {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}
.mb-konfig .extras-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.mb-konfig .extra-choice {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	min-height: 88px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.mb-konfig .extra-choice:hover {
	border-color: color-mix(in srgb, var(--color-brand) 38%, var(--color-line));
}
.mb-konfig .extra-choice:has(input:checked),
.mb-konfig .extra-choice.is-selected {
	background: color-mix(in srgb, var(--color-brand) 5%, #fff);
	border-color: var(--color-brand);
	box-shadow: 0 0 0 1px var(--color-brand);
}
.mb-konfig .extra-choice__box {
	display: grid;
	width: 26px;
	height: 26px;
	place-items: center;
	border: 1px solid var(--color-line);
	border-radius: 7px;
	color: transparent;
}
.mb-konfig .extra-choice__box .icon {
	font-size: 0.72rem;
}
.mb-konfig .extra-choice:has(input:checked) .extra-choice__box,
.mb-konfig .extra-choice.is-selected .extra-choice__box {
	background: var(--color-brand);
	border-color: var(--color-brand);
	color: #fff;
}
.mb-konfig .extra-choice strong,
.mb-konfig .extra-choice small {
	display: block;
	min-width: 0;
	line-height: 1.4;
}
.mb-konfig .extra-choice strong {
	color: var(--color-ink);
	font-size: 0.79rem;
}
.mb-konfig .extra-choice small {
	margin-top: 3px;
	color: var(--color-muted);
	font-size: 0.66rem;
}
.mb-konfig .extra-choice em {
	color: var(--color-brand);
	font-size: 0.68rem;
	font-style: normal;
	font-weight: 800;
	white-space: nowrap;
}
.mb-konfig .configurator-sidebar {
	min-width: 0;
	padding: clamp(18px, 2vw, 26px);
	background: var(--color-surface-warm);
}
.mb-konfig .configurator-sidebar__sticky {
	position: sticky;
	top: calc(var(--header-height) + 20px);
	display: grid;
	gap: 18px;
	min-width: 0;
}
.mb-konfig .configurator-preview {
	min-width: 0;
	padding: 13px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-line));
	border-radius: var(--radius-md);
	box-shadow: 0 14px 34px rgba(16, 37, 34, 0.08);
}
.mb-konfig .configurator-preview__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 3px 11px;
}
.mb-konfig .configurator-preview__head > div {
	min-width: 0;
}
.mb-konfig .configurator-preview__head .eyebrow {
	margin-bottom: 3px;
	font-size: 0.58rem;
}
.mb-konfig .configurator-preview__head h3 {
	margin: 0;
	font-size: clamp(1.2rem, 1.6vw, 1.48rem);
	line-height: 1.1;
}
.mb-konfig .configurator-preview__status {
	flex: 0 1 auto;
	max-width: 48%;
	padding: 7px 9px;
	background: color-mix(in srgb, var(--color-brand) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-line));
	border-radius: 999px;
	color: var(--color-brand-dark);
	font-size: clamp(0.57rem, 0.53rem + 0.12vw, 0.64rem);
	font-weight: 850;
	line-height: 1.25;
	text-align: center;
	text-wrap: balance;
}
.mb-konfig .visualizer__canvas-wrap {
	position: relative;
	min-width: 0;
	aspect-ratio: 30 / 19;
	background: linear-gradient(145deg, #f8fbfa, #e5eeeb);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	overflow: hidden;
	touch-action: none;
}
.mb-konfig .visualizer__canvas-wrap canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}
.mb-konfig .visualizer__canvas-wrap canvas:active {
	cursor: grabbing;
}
.mb-konfig .visualizer__badge,
.mb-konfig .visualizer__dimensions,
.mb-konfig .visualizer__hint {
	position: absolute;
	z-index: 2;
	max-width: calc(100% - 20px);
	pointer-events: none;
}
.mb-konfig .visualizer__badge {
	top: 10px;
	left: 10px;
	padding: 6px 9px;
	background: rgba(16, 37, 34, 0.84);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	color: #fff;
	font-size: clamp(0.5rem, 0.47rem + 0.1vw, 0.57rem);
	font-weight: 850;
	letter-spacing: 0.04em;
	line-height: 1.2;
	backdrop-filter: blur(7px);
}
.mb-konfig .visualizer__dimensions {
	top: 10px;
	right: 10px;
	padding: 6px 9px;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(44, 71, 66, 0.16);
	border-radius: 999px;
	color: var(--color-brand-dark);
	font-size: clamp(0.5rem, 0.47rem + 0.1vw, 0.57rem);
	font-weight: 850;
	line-height: 1.2;
	text-align: right;
	backdrop-filter: blur(7px);
}
.mb-konfig .visualizer__hint {
	left: 50%;
	bottom: 9px;
	padding: 5px 9px;
	background: rgba(255, 255, 255, 0.82);
	border-radius: 999px;
	color: var(--color-muted);
	font-size: clamp(0.48rem, 0.45rem + 0.1vw, 0.55rem);
	font-weight: 750;
	line-height: 1.2;
	text-align: center;
	transform: translateX(-50%);
	backdrop-filter: blur(6px);
}
.mb-konfig .configurator-preview__controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}
.mb-konfig .preview-control {
	display: inline-flex;
	min-width: 0;
	min-height: 42px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px clamp(8px, 1vw, 12px);
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	color: var(--color-brand-dark);
	font-family: var(--font-sans);
	font-size: clamp(0.72rem, 0.69rem + 0.12vw, 0.82rem);
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.mb-konfig .preview-control:hover,
.mb-konfig .preview-control:focus-visible {
	background: var(--color-brand-dark);
	border-color: var(--color-brand-dark);
	color: #fff;
	transform: translateY(-1px);
}
.mb-konfig .preview-control .icon {
	font-size: 0.82rem;
}
.mb-konfig .preview-control--left .icon {
	transform: rotate(180deg);
}
.mb-konfig .preview-control--reset,
.mb-konfig .preview-control--reset:link,
.mb-konfig .preview-control--reset:visited,
.mb-konfig .preview-control--reset:hover,
.mb-konfig .preview-control--reset:focus-visible,
.mb-konfig .preview-control--reset:active {
	color: #fff;
}
.mb-konfig .preview-control--reset {
	grid-column: 1 / -1;
	grid-row: 2;
	background: var(--color-brand);
	border-color: var(--color-brand);
	box-shadow: 0 8px 20px rgba(44, 71, 66, 0.16);
}
.mb-konfig .preview-control--reset:hover,
.mb-konfig .preview-control--reset:focus-visible {
	background: var(--color-brand-dark);
	border-color: var(--color-brand-dark);
}
.mb-konfig .configurator-preview__note {
	margin: 11px 3px 1px;
	color: var(--color-muted);
	font-size: clamp(0.59rem, 0.56rem + 0.1vw, 0.66rem);
	line-height: 1.48;
}
.mb-konfig .contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
}
.mb-konfig .contact-grid > label {
	display: block;
	min-width: 0;
}
.mb-konfig .contact-grid > label > span:first-child {
	display: block;
	margin-bottom: 6px;
	color: var(--color-ink);
	font-size: 0.71rem;
	font-weight: 800;
}
.mb-konfig .contact-grid input:not([type="checkbox"]),
.mb-konfig .contact-grid textarea {
	display: block;
	width: 100%;
	min-height: 49px;
	padding: 11px 13px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xs);
	color: var(--color-ink);
	font-size: 0.84rem;
	outline: 0;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.mb-konfig .contact-grid textarea {
	min-height: 112px;
	resize: vertical;
}
.mb-konfig .contact-grid input:focus,
.mb-konfig .contact-grid textarea:focus {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(44, 71, 66, 0.1);
}
.mb-konfig .contact-grid input.is-invalid,
.mb-konfig .contact-grid textarea.is-invalid,
.mb-konfig .consent-field.is-invalid {
	border-color: var(--color-error);
	box-shadow: 0 0 0 2px rgba(167, 59, 54, 0.09);
}
.mb-konfig .contact-grid__full {
	grid-column: 1 / -1;
}
.mb-konfig .consent-field {
	display: grid !important;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 14px;
	background: var(--color-surface-soft);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xs);
}
.mb-konfig .consent-field input {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--color-brand);
}
.mb-konfig .consent-field span {
	font-size: 0.69rem;
	line-height: 1.55;
}
.mb-konfig .consent-field a {
	color: var(--color-brand);
	font-weight: 750;
}
.mb-konfig .form-error {
	min-height: 1.4em;
	margin: 13px 0 0;
	color: var(--color-error);
	font-size: 0.72rem;
	font-weight: 700;
}
.mb-konfig .submit-status {
	min-height: 1.5em;
	margin-top: 13px;
	font-size: 0.76rem;
	font-weight: 700;
}
.mb-konfig .submit-status.is-error {
	color: var(--color-error);
}
.mb-konfig .submit-status.is-success {
	color: var(--color-success);
}
.mb-konfig .configurator__navigation {
	display: flex;
	gap: 11px;
	align-items: center;
	justify-content: space-between;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--color-line);
}
.mb-konfig .configurator__navigation .button:last-child,
.mb-konfig .configurator__navigation [data-next-step] {
	margin-left: auto;
}
.mb-konfig .configurator__navigation .button[disabled] {
	opacity: 0.42;
	pointer-events: none;
}
.mb-konfig .configurator-summary {
	position: relative;
	min-width: 0;
	padding: clamp(24px, 2.6vw, 34px) 24px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-line));
	border-radius: var(--radius-md);
	box-shadow: 0 14px 34px rgba(16, 37, 34, 0.07);
	overflow: hidden;
}
.mb-konfig .configurator-summary::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 33%;
	background: linear-gradient(180deg, transparent, rgba(44, 71, 66, 0.04));
	pointer-events: none;
}
.mb-konfig .configurator-summary > * {
	position: relative;
	z-index: 1;
}
.mb-konfig .configurator-summary__head {
	padding-bottom: 22px;
	border-bottom: 1px solid color-mix(in srgb, var(--color-brand) 15%, transparent);
}
.mb-konfig .configurator-summary__head .eyebrow {
	margin-bottom: 7px;
	font-size: 0.65rem;
}
.mb-konfig .configurator-summary__head h3 {
	margin: 0;
	font-size: 1.65rem;
}
.mb-konfig .configurator-summary__list {
	margin: 22px 0 0;
}
.mb-konfig .configurator-summary__list > div {
	display: grid;
	grid-template-columns: minmax(74px, 0.72fr) minmax(0, 1.28fr);
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(44, 71, 66, 0.1);
	font-size: 0.7rem;
	line-height: 1.4;
}
.mb-konfig .configurator-summary__list dt {
	color: var(--color-muted);
}
.mb-konfig .configurator-summary__list dd {
	margin: 0;
	color: var(--color-ink);
	font-weight: 750;
	text-align: right;
}
.mb-konfig .configurator-summary__price {
	margin-top: 25px;
	padding: 19px;
	background: var(--color-brand-dark);
	border-radius: var(--radius-sm);
	box-shadow: 0 12px 28px rgba(16, 37, 34, 0.16);
}
.mb-konfig .configurator-summary__price small,
.mb-konfig .configurator-summary__price strong,
.mb-konfig .configurator-summary__price span {
	display: block;
	line-height: 1.35;
}
.mb-konfig .configurator-summary__price small {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.62rem;
	font-weight: 700;
}
.mb-konfig .configurator-summary__price strong {
	margin: 7px 0 5px;
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(1.55rem, 2.4vw, 2.15rem);
	letter-spacing: -0.025em;
}
.mb-konfig .configurator-summary__price span {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.57rem;
}
.mb-konfig .configurator-success {
	padding: clamp(50px, 8vw, 100px) 25px;
	text-align: center;
}
.mb-konfig .configurator-success__icon {
	display: grid;
	width: 88px;
	height: 88px;
	place-items: center;
	margin: 0 auto 25px;
	background: color-mix(in srgb, var(--color-success) 12%, #fff);
	border: 1px solid color-mix(in srgb, var(--color-success) 35%, #fff);
	border-radius: 50%;
	color: var(--color-success);
}
.mb-konfig .configurator-success__icon .icon {
	font-size: 2.4rem;
}
.mb-konfig .configurator-success .eyebrow {
	justify-content: center;
}
.mb-konfig .configurator-success h3 {
	max-width: 740px;
	margin: 0 auto 17px;
	font-size: clamp(2rem, 4vw, 3.4rem);
}
.mb-konfig .configurator-success > p {
	max-width: 650px;
	margin-inline: auto;
}
.mb-konfig .configurator-success__reference {
	width: fit-content;
	max-width: 100%;
	padding: 10px 15px;
	margin: 25px auto !important;
	background: var(--color-surface-warm);
	border-radius: 999px;
	font-size: 0.8rem;
}
.mb-konfig .configurator-success .button-row {
	justify-content: center;
}
.mb-konfig .notice {
	padding: 15px;
	background: var(--color-surface-warm);
	border-left: 4px solid var(--color-brand);
}
@media (max-width: 1120px) {
.mb-konfig .configurator__layout {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 350px);
	}
.mb-konfig .configurator__stage {
		padding: 42px 35px;
	}
.mb-konfig .choice-grid--products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
.mb-konfig .color-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 980px) {
.mb-konfig .nav-toggle .icon {
		font-size: 1.35rem;
	}
.mb-konfig .configurator-shell__intro {
		align-items: flex-start;
		flex-direction: column;
	}
.mb-konfig .configurator-shell__trust {
		justify-content: flex-start;
	}
.mb-konfig .configurator__layout {
		grid-template-columns: 1fr;
	}
.mb-konfig .configurator__stage {
		border-right: 0;
	}
.mb-konfig .configurator-sidebar {
		padding: 28px;
		border-top: 1px solid var(--color-line);
	}
.mb-konfig .configurator-sidebar__sticky {
		position: static;
		grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
		align-items: start;
		gap: 22px;
	}
.mb-konfig .configurator-summary__list {
		display: block;
	}
.mb-konfig .configurator-summary__price {
		max-width: none;
	}
}
@media (max-width: 680px) {
.mb-konfig .button-row {
		align-items: stretch;
		flex-direction: column;
	}
.mb-konfig .button-row .button {
		width: 100%;
	}
.mb-konfig .accordion__item button {
		padding-block: 21px;
	}
.mb-konfig .configurator-page__content {
		width: 100%;
		padding-top: 40px;
	}
.mb-konfig .configurator-shell__intro {
		width: calc(100% - 28px);
		margin-inline: auto;
	}
.mb-konfig .configurator-shell__trust {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}
.mb-konfig .configurator-shell__trust span {
		justify-content: center;
	}
.mb-konfig .configurator {
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}
.mb-konfig .configurator__progress {
		padding: 20px 18px;
	}
.mb-konfig .configurator__progress-head,
.mb-konfig .configurator__progress-track {
		display: flex;
	}
.mb-konfig .configurator__progress-track {
		display: block;
	}
.mb-konfig .configurator__steps {
		display: none;
	}
.mb-konfig .configurator__stage {
		padding: 30px 17px;
	}
.mb-konfig .configurator-step {
		min-height: 0;
	}
.mb-konfig .configurator-step__heading {
		margin-bottom: 26px;
	}
.mb-konfig .configurator-step__heading h3 {
		font-size: clamp(1.75rem, 9vw, 2.4rem);
	}
.mb-konfig .choice-grid,
.mb-konfig .choice-grid--products,
.mb-konfig .choice-grid--three,
.mb-konfig .choice-grid--roof,
.mb-konfig .dimension-grid,
.mb-konfig .extras-grid,
.mb-konfig .color-grid,
.mb-konfig .contact-grid {
		grid-template-columns: 1fr;
	}
.mb-konfig .choice-card {
		min-height: 0;
	}
.mb-konfig .choice-card--product {
		min-height: 165px;
	}
.mb-konfig .color-choice {
		grid-template-columns: 42px minmax(0, 1fr) 24px;
	}
.mb-konfig .contact-grid__full {
		grid-column: auto;
	}
.mb-konfig .extra-choice {
		grid-template-columns: 26px minmax(0, 1fr);
	}
.mb-konfig .extra-choice em {
		grid-column: 2;
		white-space: normal;
	}
.mb-konfig .configurator__navigation {
		position: sticky;
		bottom: 67px;
		z-index: 10;
		margin: 28px -17px -30px;
		padding: 14px 17px;
		background: rgba(255, 255, 255, 0.97);
		border-top: 1px solid var(--color-line);
		box-shadow: 0 -8px 25px rgba(16, 37, 34, 0.07);
		backdrop-filter: blur(9px);
	}
.mb-konfig .configurator__navigation .button {
		min-height: 46px;
		padding: 10px clamp(12px, 4vw, 17px);
		font-size: clamp(0.72rem, 3.25vw, 0.82rem);
		line-height: 1.2;
	}
.mb-konfig .configurator-sidebar {
		padding: 17px;
	}
.mb-konfig .configurator-sidebar__sticky {
		grid-template-columns: 1fr;
		gap: 17px;
	}
.mb-konfig .configurator-preview {
		padding: 10px;
		border-radius: var(--radius-sm);
	}
.mb-konfig .configurator-preview__head {
		align-items: center;
	}
.mb-konfig .configurator-preview__controls {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
.mb-konfig .preview-control--reset {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: clamp(0.74rem, 3.2vw, 0.84rem);
	}
.mb-konfig .configurator-summary {
		padding: 28px 18px;
	}
.mb-konfig .configurator-summary__list {
		grid-template-columns: 1fr;
	}
.mb-konfig .configurator-summary__price {
		max-width: none;
	}
}
@media (max-width: 390px) {
.mb-konfig .configurator__navigation {
		gap: 7px;
	}
.mb-konfig .configurator__navigation .button {
		padding-inline: 12px;
	}
}
@media print {
.mb-konfig .configurator,
.mb-konfig .entry-card {
		box-shadow: none;
	}
}

/* -------------------------------------------------------------------------
 * Anpassung an dieses Theme
 *
 * Mehr steht hier nicht. Alles darueber kommt unveraendert aus dem
 * Premium-Theme.
 * ---------------------------------------------------------------------- */

/*
 * Die Schrittleiste des Konfigurators klebt auf dem Handy unten. Im
 * Premium-Theme stand darunter dessen eigene Aktionsleiste mit 67 px; die
 * hier ist 76 px hoch. Mit dem alten Wert ueberdeckte die Aktionsleiste die
 * untere Kante der Knoepfe.
 */
@media (max-width: 680px) {
	.mb-konfig .configurator__navigation { bottom: 0; }
	body.mb-hat-aktionsleiste .mb-konfig .configurator__navigation { bottom: 76px; }
}

/* Im Live-Builder ist die Aktionsleiste ausgeblendet — dann auch hier. */
body.mb-builder-aktiv .mb-konfig .configurator__navigation,
body.mb-bd-modus .mb-konfig .configurator__navigation { bottom: 0; }

/*
 * Bauart: Die Markise hat vier Varianten statt drei. Im Dreier-Raster
 * stuende die vierte allein in einer Zeile — deshalb 2 × 2. Auf dem Handy
 * bleibt es bei einer Spalte. data-anzahl setzt konfigurator.js.
 */
@media (min-width: 681px) {
	.mb-konfig .choice-grid--three[data-anzahl="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}