/*
 * Öffentlicher, gespeicherter, Händler- und Portal-Konfigurator im ruhigen
 * Referenzsystem. Die Engine und sämtliche data-hc-Schnittstellen bleiben
 * unverändert.
 */
:root {
	--hc-bg: #f1f3f4;
	--hc-surface: #fff;
	--hc-surface-2: #f1f3f4;
	--hc-surface-3: #061a2d;
	--hc-stage: #fff;
	--hc-white: #fff;
	--hc-text: #0b1116;
	--hc-muted: #71808b;
	--hc-dark: #0b1116;
	--hc-line: #d7dde1;
	--hc-line-strong: #b8c2c8;
	--hc-brand: #009ddf;
	--hc-brand-2: #0078b6;
	--hc-action: #009ddf;
	--hc-action-hover: #0078b6;
	--hc-warn: #b67516;
	--hc-danger: #b73f39;
	--hc-ok: #267652;
	--hc-radius: 0;
	--hc-radius-sm: 0;
	--hc-gutter: clamp(16px,4vw,44px);
	--hc-head: 68px;
	--hc-action-height: 72px;
	--hc-font: Inter,Arial,sans-serif;
	color-scheme: light;
}

html,
body.hapert-configurator-shell {
	background: var(--hc-bg);
	color: var(--hc-text);
}

body.hapert-configurator-shell {
	font-family: Inter,Arial,sans-serif;
}

.hc-skip {
	border-radius: 0;
	background: #fff;
	color: var(--hc-dark);
}

/* Shell */
.hc-shellbar {
	height: var(--hc-head);
	padding-inline: max(var(--hc-gutter),calc((100vw - 1460px)/2 + var(--hc-gutter)));
	border-color: var(--hc-line);
	background: #fff;
}

.hc-logo {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
}

.hc-logo > .hc-logo__full {
	width: 128px;
	height: auto;
	max-height: 48px;
	object-fit: contain;
	filter: none;
}

.hc-shellbar__divider { background: var(--hc-line); }
.hc-shellbar__brand > strong { color: var(--hc-text); font-size: 13px; }
.hc-shelllink,
.hc-textbtn { color: var(--hc-muted); font-size: 12px; }
.hc-shelllink:hover,
.hc-textbtn:hover { color: var(--hc-text); }
.hc-country {
	border-color: var(--hc-line-strong);
	border-radius: 0;
}

.hc-country .seg__btn,
.hc-vat {
	min-height: 42px;
	border-radius: 0;
	color: var(--hc-muted);
}

.hc-country .seg__btn[aria-pressed="true"] { background: var(--hc-dark); color: #fff; }
.hc-iconbtn {
	width: 44px;
	height: 44px;
	border-color: var(--hc-line-strong);
	border-radius: 0;
	color: var(--hc-text);
}

.hc-iconbtn:hover { background: var(--hc-bg); }
.hc-shellbar__fixed {
	min-height: 42px;
	border-color: var(--hc-line-strong);
	border-radius: 0;
	color: var(--hc-muted);
}
.hc-shellbar__fixed b { color: var(--hc-text); }
.hc-shellbar__dealer { color: var(--hc-text); }
.hc-shellbar__dealer small { color: var(--hc-muted); }
.hc-shellbar__dealer:hover strong { color: var(--hc-brand-2); }

.hc-legal {
	padding-inline: max(var(--hc-gutter),calc((100vw - 1460px)/2 + var(--hc-gutter)));
	border-color: rgba(255,255,255,.18);
	background: #061a2d;
	color: #8294a0;
}

.hc-legal a,
.hc-legal nav button { color: #fff; }

/* Fortschritt */
.hc-app { background: var(--hc-bg); }
.hc-apphead {
	min-height: 70px;
	grid-template-columns: minmax(240px,1fr) auto auto;
	padding: 9px max(var(--hc-gutter),calc((100vw - 1460px)/2 + var(--hc-gutter))) 11px;
	border-color: var(--hc-line);
	background: rgba(255,255,255,.97);
	color: var(--hc-text);
	box-shadow: none;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.hc-apphead__title h1 {
	color: var(--hc-text);
	font-size: 17px;
	font-weight: 760;
}

.hc-apphead__status { color: var(--hc-muted); }
.hc-kicker { color: var(--hc-brand-2); font-size: 10px; letter-spacing: .14em; }
.hc-progress { gap: 1px; }
.hc-progress li button {
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 0;
	color: var(--hc-muted);
}

.hc-progress li button span {
	width: 22px;
	height: 22px;
	border-color: var(--hc-line-strong);
	border-radius: 0;
	background: #fff;
}

.hc-progress li.is-active button { background: #e8f6fc; color: var(--hc-text); }
.hc-progress li.is-active button span { border-color: var(--hc-brand); background: var(--hc-brand); color: #fff; }
.hc-progress li.is-done button span { border-color: var(--hc-ok); background: var(--hc-ok); color: #fff; }
.hc-apphead__line { background: var(--hc-line); }
.hc-apphead__line span { background: var(--hc-brand); }

/* Gemeinsame eckige Komponenten */
.hc-recovery,
.hc-import,
.hc-import__promo,
.hc-import__open li,
.hc-codeentry,
.hc-resume,
.hc-models__filters,
.hc-modelcard,
.hc-empty,
.hc-stage__canvas,
.hc-stage__badges span,
.hc-stage__controls button,
.hc-stage__arrow,
.hc-thumb,
.hc-stage__selection button,
.hc-stage__selection button img,
.hc-stage__selection-more,
.hc-choiceblock__title > span,
.hc-choiceblock__count,
.hc-sizecard,
.hc-sizecard__shape,
.hc-sizecard__shape span,
.hc-variant,
.hc-height button,
.hc-unpriced,
.hc-inline-error,
.hc-search,
.hc-optiongroup,
.hc-optiongroup summary::after,
.hc-option input,
.hc-option__details,
.hc-option__media,
.hc-option__tag,
.hc-detailrules,
.hc-clarifications,
.hc-reviewstatus,
.hc-reviewstatus__icon,
.hc-warning,
.hc-warning::before,
.hc-summarysection,
.hc-summarysection__title > span,
.hc-summarysection__head button,
.hc-pricebox,
.hc-pricebox button,
.hc-pricebox__assurance i,
.hc-summary__tools,
.hc-summary__secondary .hc-secondary,
.hc-codebox,
.hc-requestpath,
.hc-requestpath li > span,
.hc-inlineoffer,
.hc-inlineoffer input,
.hc-inlineoffer select,
.hc-inlineoffer textarea,
.hc-inlineoffer__contact span,
.hc-inlineoffer__success > span,
.hc-secondary,
.hc-primary,
.hc-back,
.hc-quotebox,
.hc-quotebox__icon,
.hc-quotebox__facts li i,
.hc-quotebox__btn,
.hc-actionbar .hc-savebar,
.hc-dialog,
.hc-dialog--legal,
.hc-legal-dialog__dealer,
.hc-dialoggallery__thumbs button,
.hc-detailmedia,
.hc-toast,
.hc-spinviewer p {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.hc-modelcard:hover,
.hc-resume:hover {
	box-shadow: none;
	transform: none;
}

/* Modellauswahl */
body.hc-model-overview { background: var(--hc-bg); }
.hc-app[data-current-step="modell"] {
	background: var(--hc-bg);
	color: var(--hc-text);
}

.hc-app[data-current-step="modell"] .hc-apphead {
	min-height: 60px;
	padding-inline: max(var(--hc-gutter),calc((100vw - 1460px)/2 + var(--hc-gutter)));
	border-color: var(--hc-line);
	background: rgba(255,255,255,.97);
}

.hc-models {
	width: min(100%,1460px);
	max-width: none;
	padding: clamp(48px,6vw,82px) var(--hc-gutter) 84px;
}

.hc-models__intro {
	grid-template-columns: minmax(0,1fr) minmax(280px,360px);
	align-items:end;
	gap: clamp(34px,6vw,88px);
	margin-bottom: 40px;
}

.hc-models__intro h2 {
	max-width: 21ch;
	color: var(--hc-text);
	font-size: clamp(40px,4.5vw,70px);
	font-weight: 780;
	line-height: .98;
	letter-spacing: -.05em;
	overflow-wrap: normal;
	-webkit-hyphens: none;
	hyphens: none;
}

.hc-models__intro .hc-models__copy > p:last-child {
	max-width: 68ch;
	color: #364550;
	font-size: 16px;
}

.hc-models__aside { gap: 10px; }
.hc-codeentry {
	width: min(100%,360px);
	padding: 16px;
	border-color: var(--hc-line);
	background: #fff;
}

.hc-codeentry input {
	min-height: 46px;
	border-color: var(--hc-line-strong);
	border-radius: 0;
}

.hc-codeentry button {
	min-height: 46px;
	border-radius: 0;
	background: var(--hc-brand);
}

.hc-codeentry button:hover { background: var(--hc-brand-2); }
.hc-resume {
	min-height: 58px;
	border-color: var(--hc-line);
}

.hc-models__filters {
	grid-template-columns: minmax(0,1fr) minmax(240px,310px);
	gap: 24px;
	margin-bottom: 26px;
	padding: 18px;
	border-color: var(--hc-line);
	background: #fff;
}

.hc-filtergroup { gap: 7px; }
.hc-filter {
	min-height: 42px;
	padding-inline: 15px;
	border-color: var(--hc-line);
	border-radius: 0;
	background: var(--hc-bg);
	color: #364550;
}

.hc-filter:hover { border-color: var(--hc-dark); background: #fff; }
.hc-filter.is-active { border-color: var(--hc-dark); background: var(--hc-dark); color: #fff; }
.hc-select select {
	min-height: 46px;
	border: 1px solid var(--hc-line-strong);
	border-radius: 0;
	background-color: #fff;
	color: var(--hc-text);
}

.hc-resultsbar { color: var(--hc-muted); }
.hc-modelgrid {
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 1px;
	border: 1px solid var(--hc-line);
	background: var(--hc-line);
}

.hc-modelcard {
	border: 0;
	background: #fff;
}

.hc-modelcard[aria-pressed="true"] {
	border: 0;
	box-shadow: inset 0 0 0 3px var(--hc-brand) !important;
}

.hc-modelcard__media {
	aspect-ratio: 16/9;
	background: radial-gradient(82% 72% at 50% 60%,#fff 0%,#f1f3f4 58%,#e4e8ea 100%);
}

.hc-modelcard__media::after { content:none; }
.hc-modelcard__media img { filter:none; transform:none !important; }
.hc-modelcard__body { gap: 10px; padding: clamp(22px,2.5vw,34px); }
.hc-modelcard__series { color: var(--hc-brand-2); }
.hc-modelcard__title strong { font-size: clamp(22px,1.8vw,29px); font-weight:760; }
.hc-modelcard__body p { color:#586774; }
.hc-modelcard__meta--price { border-color:var(--hc-line); }
.hc-modelcard__arrow {
	width: 38px;
	height: 38px;
	border-color: var(--hc-dark);
	border-radius: 0;
	background: var(--hc-dark);
	transform:none !important;
}

/* Arbeitsfläche */
.hc-app:is([data-current-step="ausfuehrung"],[data-current-step="ausstattung"],[data-current-step="uebersicht"]) {
	background: var(--hc-bg);
	color: var(--hc-text);
}

.hc-workspace {
	grid-template-columns:minmax(0,1.6fr) minmax(410px,.9fr);
	background:#fff;
}

.hc-stage {
	padding: 20px 24px 16px;
	border-color: var(--hc-line);
	background:#fff;
}

.hc-stage__canvas { background:#fff; }
.hc-stage__canvas > img { padding: 16px 70px 68px; }
.hc-stage__badges span {
	border-color: var(--hc-line);
	background:rgba(255,255,255,.96);
	color:#364550;
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
}

.hc-stage__controls button,
.hc-stage__arrow {
	border-color: var(--hc-line-strong);
	background:rgba(255,255,255,.97);
	color:var(--hc-text);
	-webkit-backdrop-filter:none;
	backdrop-filter:none;
}

.hc-thumb { border-color:var(--hc-line); }
.hc-thumb.is-active { border-color:var(--hc-brand); box-shadow:inset 0 0 0 1px var(--hc-brand) !important; }
.hc-stage__selection button { border-color:var(--hc-line); }
.hc-decision {
	padding: 30px 28px calc(30px + var(--hc-action-height));
	border-color:var(--hc-line);
	background:var(--hc-bg) !important;
	color:var(--hc-text);
}

.hc-decision__head h2 {
	color:var(--hc-text) !important;
	font-size:clamp(28px,2.5vw,38px) !important;
	font-weight:780 !important;
	line-height:1.03;
}

.hc-decision__head p { color:var(--hc-muted) !important; }
.hc-choiceblock { border-color:var(--hc-line); }
.hc-choiceblock__title > span { background:var(--hc-brand); color:#fff; }
.hc-choiceblock__head h3 { color:var(--hc-text); }
.hc-choiceblock__title p { color:var(--hc-muted); }
.hc-choiceblock__count { background:#e4e8ea; color:var(--hc-muted); }
.hc-sizecard,
.hc-variant { border-color:var(--hc-line); background:#fff; }
.hc-sizecard:hover,
.hc-variant:hover { border-color:var(--hc-line-strong); box-shadow:none; }
.hc-sizecard[aria-pressed="true"],
.hc-variant[aria-pressed="true"] {
	border-color:var(--hc-brand);
	background:#eef9fd;
	box-shadow:inset 0 0 0 1px var(--hc-brand) !important;
}

.hc-sizecard[aria-pressed="true"]::after,
.hc-variant[aria-pressed="true"]::after {
	border-radius:0;
	background:var(--hc-brand);
}

.hc-sizecard__shape {
	border-color:#e4e8ea;
	background:var(--hc-bg);
}

.hc-sizecard__shape span {
	border-color:var(--hc-brand);
	background:rgba(0,157,223,.1);
}

.hc-height button {
	border-color:var(--hc-line);
	background:#fff;
}

.hc-height button.is-active { border-color:var(--hc-dark); background:var(--hc-dark); color:#fff; }

/* Ausstattung */
.hc-search {
	border-color:var(--hc-line-strong);
	background:rgba(255,255,255,.97) !important;
	box-shadow:none;
}

.hc-optiongroups { gap:8px; }
.hc-optiongroup {
	border-color:var(--hc-line);
	background:#fff;
}

.hc-optiongroup summary::after { background:var(--hc-bg); color:var(--hc-text); }
.hc-optiongroup[open] summary { border-color:var(--hc-line); }
.hc-option { border-color:#e9edef; }
.hc-option:hover { background:#f7f9fa; }
.hc-option.is-selected { background:#eaf7fc; }
.hc-option input { border-color:var(--hc-line-strong); border-radius:0; }
.hc-option input:checked { border-color:var(--hc-brand); background:var(--hc-brand); }
.hc-option__details { border-color:var(--hc-line); color:var(--hc-brand-2); }
.hc-option__tag { background:var(--hc-blue-pale,#e8f6fc); color:var(--hc-brand-2); }

/* Übersicht und Angebot */
.hc-reviewstatus,
.hc-warning,
.hc-summarysection,
.hc-pricebox,
.hc-summary__tools,
.hc-codebox,
.hc-requestpath,
.hc-inlineoffer {
	border-color:var(--hc-line);
	background:#fff;
}

.hc-reviewstatus { background:#f3faf6; }
.hc-summarysection__head { border-color:var(--hc-line); }
.hc-summarysection__title > span { background:#e8f6fc; color:var(--hc-brand-2); }
.hc-summarysection__head button { background:#e8f6fc; color:var(--hc-brand-2); }
.hc-pricebox {
	background:#f4fafc;
	box-shadow:none;
}

.hc-pricebox strong { font-size:34px; }
.hc-pricebox button { border-color:var(--hc-line-strong); }
.hc-pricebox__assurance { border-color:var(--hc-line); }
.hc-inlineoffer__eyebrow { color:var(--hc-brand-2); }
.hc-inlineoffer__head h3 { font-size:20px; }
.hc-inlineoffer input,
.hc-inlineoffer select,
.hc-inlineoffer textarea { border-color:var(--hc-line-strong); }
.hc-inlineoffer__contact span {
	border-color:var(--hc-line);
	background:var(--hc-bg);
}

.hc-inlineoffer__contact input:checked + span {
	border-color:var(--hc-brand);
	background:#e8f6fc;
	color:var(--hc-brand-2);
	box-shadow:inset 0 0 0 1px var(--hc-brand) !important;
}

.hc-primary,
.hc-secondary,
.hc-back {
	min-height:46px;
	border-radius:0;
}

.hc-primary { border-color:var(--hc-brand); background:var(--hc-brand); }
.hc-primary:hover { border-color:var(--hc-brand-2); background:var(--hc-brand-2); }
.hc-secondary { border-color:var(--hc-line-strong); background:#fff; color:var(--hc-text); }
.hc-secondary:hover { border-color:var(--hc-dark); background:var(--hc-dark); color:#fff; }
.hc-back { color:var(--hc-muted); }

.hc-quotebox {
	background:var(--hc-dark);
	color:#fff;
}

.hc-quotebox__btn { border-color:var(--hc-brand); background:var(--hc-brand); }

/* Aktionsleiste */
.hc-actionbar {
	height:var(--hc-action-height);
	padding-inline:max(var(--hc-gutter),calc((100vw - 1460px)/2 + var(--hc-gutter)));
	border-color:var(--hc-line);
	background:rgba(255,255,255,.97) !important;
	box-shadow:0 -8px 26px rgba(6,26,45,.08);
	color:var(--hc-text);
	-webkit-backdrop-filter:blur(18px);
	backdrop-filter:blur(18px);
}

.hc-actionbar__summary { color:var(--hc-text); }
.hc-actionbar__summary small,
.hc-actionbar__payload { color:var(--hc-muted); }
.hc-actionbar__summary strong { color:var(--hc-text); }
.hc-actionbar .hc-primary {
	min-height:48px !important;
	border-radius:0 !important;
	background:var(--hc-brand) !important;
}

.hc-actionbar .hc-savebar { border-radius:0; }

/* Dialoge */
.hc-dialog {
	border-color:var(--hc-line);
	background:#fff;
	color:var(--hc-text);
}

.hc-dialog::backdrop {
	background:rgba(6,26,45,.55);
	-webkit-backdrop-filter:blur(5px);
	backdrop-filter:blur(5px);
}

.hc-dialog__head { border-color:var(--hc-line); }
.hc-dialog__head h2 { color:var(--hc-text); }
.hc-dialog__head button { color:var(--hc-text); }
.hc-dialog__body { color:#364550; }
.hc-dialog--media .hc-dialog__body { background:#fff; }
.hc-toast { background:var(--hc-dark); color:#fff; }

/* Portal-Einbettung */
.hc-portal {
	--c-navy:#061a2d;
	--c-brand:#009ddf;
	--c-brand-strong:#0078b6;
	--c-line:#d7dde1;
	--c-ink:#0b1116;
	--c-ink-2:#364550;
	--c-ink-3:#71808b;
	--c-surface:#f1f3f4;
}

@media(max-width:1180px) {
	.hc-workspace { grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr); }
}

@media(max-width:900px) {
	:root { --hc-head:64px; --hc-action-height:68px; }
	.hc-shellbar { padding-inline:14px; }
	.hc-logo > .hc-logo__full { width:104px; max-height:42px; }
	.hc-apphead { padding:10px 14px 8px; }
	.hc-app[data-current-step="modell"] .hc-apphead { min-height:58px; padding-inline:14px; }
	.hc-models { padding:38px 16px 58px; }
	.hc-models__intro { grid-template-columns:minmax(0,1fr); gap:20px; }
	.hc-models__intro h2 { font-size:clamp(36px,9vw,50px); }
	.hc-models__aside { justify-items:start; width:100%; }
	.hc-codeentry { width:100%; }
	.hc-codeentry input,
	.hc-inlineoffer input,
	.hc-inlineoffer select,
	.hc-inlineoffer textarea { font-size:16px; }
	.hc-models__filters { grid-template-columns:minmax(0,1fr); padding:14px; }
	.hc-modelgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; }
	.hc-workspace { display:flex; height:auto; flex-direction:column; overflow:visible; }
	.hc-stage { height:clamp(310px,48vw,440px); padding:10px 12px 8px; }
	.hc-stage:has(.hc-stage__selection) { height:calc(clamp(310px,48vw,440px) + 50px); }
	.hc-decision { padding:25px 16px calc(25px + var(--hc-action-height)); border-left:0; border-top:1px solid var(--hc-line); }
	.hc-actionbar { padding:8px 12px calc(8px + env(safe-area-inset-bottom)); }
	.hc-dialog,
	.hc-dialog--legal { width:100%; max-width:none; border-radius:0 !important; }
}

@media(max-width:640px) {
	.hc-models { padding:30px 12px 52px; }
	.hc-models__intro h2 { font-size:38px; }
	.hc-models__filters { padding:12px; }
	.hc-filtergroup {
		flex-wrap:nowrap;
		overflow-x:auto;
		margin-inline:-12px;
		padding-inline:12px;
		scrollbar-width:none;
	}
	.hc-filter { flex:0 0 auto; }
	/* Scroll-Hinweis: Filterleiste läuft rechts weich aus statt hart abzuschneiden. */
	.hc-filtergroup { -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); }
	/* Kompakte Modellwahl: zwei Spalten mit Bild, Name, Gewicht und Preis statt 23 hoher Einzelkarten. */
	.hc-modelgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.hc-modelcard__body { gap:6px; padding:12px 11px 14px; }
	.hc-modelcard__series { font-size:10px; line-height:1.3; }
	.hc-modelcard__title strong { font-size:18px; }
	.hc-modelcard__arrow,
	.hc-modelcard__body p,
	.hc-modelcard__meta--use { display:none !important; }
	.hc-modelcard__meta--price { display:grid; gap:2px; padding-top:8px; font-size:11px; }
	.hc-modelcard__price { font-size:13px; }
	.hc-sizegrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.hc-inlineoffer__grid,
	.hc-inlineoffer__contact { grid-template-columns:minmax(0,1fr); }
}

@media(max-width:480px) {
	/* Händlerkontext: Name einzeilig kürzen, damit der Netto/Brutto-Schalter vollständig sichtbar bleibt. */
	.hc-shellbar__dealer small { display:none; }
	.hc-shellbar__dealer strong { max-width:130px; }
	.hc-shellbar__actions { flex:none; }
	.hc-progress {
		width:100%;
		justify-content:stretch;
		gap:0;
		overflow:visible;
	}
	.hc-progress li {
		flex:1 1 25%;
		min-width:0;
	}
	.hc-progress li button,
	.hc-app[data-current-step="modell"] .hc-progress li button {
		width:100%;
		justify-content:center;
		gap:4px;
		padding:6px 2px;
		font-size:9px;
	}
	.hc-progress li button span {
		width:18px;
		height:18px;
		flex:none;
	}
}

@media(max-width:440px) {
	.hc-logo > .hc-logo__full { width:94px; }
	.hc-models__intro h2 { font-size:34px; }
	.hc-stage { height:294px; }
	.hc-stage:has(.hc-stage__selection) { height:344px; }
	.hc-stage__canvas > img { padding:6px 48px 58px; }
}

@media(prefers-reduced-motion:reduce) {
	.hc-modelcard,
	.hc-apphead__line span,
	.hc-toast,
	.hc-portal .pt-side {
		transition:none !important;
	}
}