/* AIT-Konfigurator – Storefront.
   Aufbau nach dem FBH-Konfigurator (Schritt-Pillen, Kartenraster, Zurück/Weiter, Ergebnisansicht),
   Aussehen nach homeperfect (Tokens aus dev.homeperfect.de, Stand 28.09.2026: Theme TWT Modern + zw-homeperfect-base).
   Die Markenwerte stehen bewusst fest (nicht var(--bs-primary)), damit der Konfigurator auch in Shops mit
   anderem Theme wie homeperfect aussieht. Alles unter .ait-configurator gekapselt. */

.ait-configurator {
    --hp-primary: #087d5f;
    --hp-primary-hover: #076a51;
    --hp-primary-active: #06644c;
    --hp-primary-dark: #034434;
    --hp-primary-subtle: #cee5df;
    --hp-primary-tint: #eef6f3;
    --hp-accent: #059d76;
    --hp-secondary: #404b58;
    --hp-text: #111111;
    --hp-text-muted: #4b5867;
    --hp-text-dim: #798490;
    --hp-surface: #f9f9f9;
    --hp-surface-2: #f6f6f6;
    --hp-border: #eaeaf0;
    --hp-border-card: #e4e7ea;
    --hp-info: #4aa3df;
    --hp-info-subtle: #eaf7ff;
    --hp-warning: #f1c40f;
    --hp-warning-subtle: #fcf3cf;
    --hp-warning-text: #604e06;
    --hp-danger: #c82f1e;
    --hp-danger-subtle: #f4d5d2;
    --hp-radius: 2px;
    --hp-radius-card: 4px;
    --hp-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --hp-shadow-card: 0 2px 8px rgba(0, 0, 0, .06);
    --hp-focus-ring: 0 0 0 .125rem #fff, 0 0 0 .25rem #087d5f;
    color: var(--hp-text);
    font-family: var(--bs-body-font-family, "Inter", sans-serif);
    padding: 24px 0 48px;
}

.ait-configurator .hidden { display: none !important; }

/* Bootstrap-Buttons im Konfigurator auf HP-Stil (Radius 2px, ~40px Höhe, 16px/600) */
.ait-configurator .btn {
    border-radius: var(--hp-radius);
    font-weight: 600;
    min-height: 40px;
    padding: 2px 16px;
    line-height: 2.125rem;
    transition: none;
}
.ait-configurator .btn-sm { min-height: 32px; line-height: 1.75rem; font-size: .875rem; padding: 0 12px; }
.ait-configurator .btn:focus-visible { box-shadow: var(--hp-focus-ring); }
.ait-configurator .btn-primary,
.ait-configurator .btn-buy {
    --bs-btn-bg: var(--hp-primary); --bs-btn-border-color: var(--hp-primary);
    --bs-btn-hover-bg: var(--hp-primary-hover); --bs-btn-hover-border-color: var(--hp-primary-hover);
    --bs-btn-active-bg: var(--hp-primary-active); --bs-btn-active-border-color: var(--hp-primary-active);
    --bs-btn-disabled-bg: #eee; --bs-btn-disabled-border-color: #eee; --bs-btn-disabled-color: #bcc1c7;
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color);
}
.ait-configurator .btn-primary:hover, .ait-configurator .btn-buy:hover { background-color: var(--hp-primary-hover); border-color: var(--hp-primary-hover); color: #fff; }
.ait-configurator .btn-primary:disabled, .ait-configurator .btn-buy:disabled { background-color: #eee; border-color: #eee; color: #bcc1c7; opacity: 1; }
.ait-configurator .btn-light { background: #fff; border: 1px solid var(--hp-border-card); color: var(--hp-text); }
.ait-configurator .btn-light:hover { border-color: var(--hp-primary); color: var(--hp-primary); background: #fff; }
.ait-configurator .btn-outline-secondary { border-color: var(--hp-secondary); color: var(--hp-secondary); background: #fff; }
.ait-configurator .btn-outline-secondary:hover { background: var(--hp-secondary); color: #fff; }
.ait-configurator .btn:disabled { cursor: not-allowed; }
.ait-configurator .form-control {
    background: #f8f8f8; border: 0; border-bottom: 2px solid #ccc; border-radius: var(--hp-radius);
    min-height: 40px; font-size: .9375rem; color: #222;
}
.ait-configurator .form-control:focus { border-bottom-color: var(--hp-primary); box-shadow: var(--hp-focus-ring); }

/* Einleitung */
.ait-configurator .hp-cfg-intro .hp-cfg-title { color: var(--hp-primary); font-size: 2.125rem; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.ait-configurator .hp-cfg-intro p { color: var(--hp-text-muted); max-width: 860px; margin: 0 0 20px; line-height: 1.5; }

/* Vorgangsleiste (wie FBH .fbh-resume-bar) */
.ait-configurator .hp-cfg-resume {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 12px;
    background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-card); box-shadow: var(--hp-shadow-sm);
}
.ait-configurator .hp-cfg-resume .form-control { width: 320px; max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }
.ait-configurator .hp-cfg-resume-or { color: var(--hp-text-dim); font-size: .875rem; }
.ait-configurator .hp-cfg-resume-current { margin-left: auto; color: var(--hp-text-muted); font-size: .8125rem; }
.ait-configurator .hp-cfg-resume-current code { color: var(--hp-primary-dark); background: var(--hp-surface); padding: 2px 6px; border-radius: var(--hp-radius); }

/* Rahmen + Schritt-Pillen (wie FBH .fbh-wrap / .fbh-step-pill) */
.ait-configurator .hp-cfg-wrap { background: var(--hp-surface-2); border-radius: var(--hp-radius-card); padding: 16px; }
.ait-configurator .hp-cfg-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.ait-configurator .hp-cfg-pill {
    min-height: 34px; padding: 6px 10px; border: 0; border-radius: var(--hp-radius);
    background: #eeeeee; color: var(--hp-text-dim); font-size: .8125rem; font-weight: 600; text-align: center; cursor: default;
}
.ait-configurator .hp-cfg-pill.active { background: var(--hp-primary); color: #fff; }
.ait-configurator .hp-cfg-pill.done { background: var(--hp-primary-subtle); color: var(--hp-primary); cursor: pointer; }
.ait-configurator .hp-cfg-pill.done:hover { background: #bfddd4; }
.ait-configurator .hp-cfg-pill:focus-visible { outline: none; box-shadow: var(--hp-focus-ring); }

/* Schrittkarte (wie FBH .fbh-view) */
.ait-configurator .hp-cfg-view {
    display: none; background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-card);
    box-shadow: var(--hp-shadow-card); padding: 24px;
}
.ait-configurator .hp-cfg-view.active { display: block; }
.ait-configurator .hp-cfg-view h2 { color: var(--hp-primary); font-size: 1.375rem; font-weight: 700; margin: 0 0 6px; }
.ait-configurator .hp-cfg-view h3 { color: var(--hp-primary); font-size: 1.0625rem; font-weight: 700; margin: 24px 0 10px; }
.ait-configurator .hp-cfg-sub { color: var(--hp-text-muted); font-size: .875rem; margin: 0 0 18px; }

/* Kartenraster (wie FBH .fbh-options / .fbh-option) */
.ait-configurator .hp-cfg-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ait-configurator .hp-cfg-options--products { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ait-configurator .hp-cfg-options--schemes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Schritt 1 und 3: wenige Karten mittig statt linksbündig */
.ait-configurator .hp-cfg-options--centered { grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); justify-content: center; }
.ait-configurator .hp-cfg-option {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 14px; border: 2px solid var(--hp-border-card); border-radius: var(--hp-radius-card);
    background: #fff; color: var(--hp-text); text-align: center; cursor: pointer; font: inherit;
}
.ait-configurator .hp-cfg-option:hover { border-color: var(--hp-primary); }
.ait-configurator .hp-cfg-option:focus-visible { outline: none; box-shadow: var(--hp-focus-ring); }
.ait-configurator .hp-cfg-option.selected { border-color: var(--hp-primary); background: var(--hp-primary-tint); }
.ait-configurator .hp-cfg-option.selected::after {
    content: "✓"; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--hp-primary); color: #fff; font-size: .75rem; line-height: 22px; font-weight: 700; text-align: center;
}
.ait-configurator .hp-cfg-option.disabled { opacity: .45; cursor: not-allowed; }
.ait-configurator .hp-cfg-option-media { display: flex; align-items: center; justify-content: center; height: 130px; overflow: hidden; flex-shrink: 0; }
.ait-configurator .hp-cfg-options--schemes .hp-cfg-option-media { height: 180px; background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); }
/* Hydraulikschema-Dokumente: Kurzbeschreibung, PDF-Link, aufklappbar Aufbau/Hinweise */
.ait-configurator .hp-cfg-docs { display: grid; gap: 10px; text-align: left; font-size: .8125rem; }
.ait-configurator .hp-cfg-doc { display: grid; gap: 4px; }
.ait-configurator .hp-cfg-doc + .hp-cfg-doc { padding-top: 8px; border-top: 1px dashed var(--hp-border); }
.ait-configurator .hp-cfg-doc-title { font-weight: 700; color: var(--hp-secondary); }
.ait-configurator .hp-cfg-doc-summary {
    margin: 0; color: var(--hp-text-muted); line-height: 1.4;
}
.ait-configurator .hp-cfg-doc .hp-cfg-pdf { justify-self: start; }
.ait-configurator .hp-cfg-doc-details summary { cursor: pointer; color: var(--hp-primary); font-weight: 600; width: fit-content; border-radius: var(--hp-radius); }
.ait-configurator .hp-cfg-doc-details summary:focus-visible { outline: none; box-shadow: var(--hp-focus-ring); }
.ait-configurator .hp-cfg-doc-section { margin-top: 6px; }
.ait-configurator .hp-cfg-doc-section strong { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: var(--hp-text-muted); }
.ait-configurator .hp-cfg-doc-section ul { margin: 2px 0 0; padding-left: 18px; }
.ait-configurator .hp-cfg-doc-section li { margin: 1px 0; overflow-wrap: anywhere; }
.ait-configurator .hp-cfg-option-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.ait-configurator .hp-cfg-option-title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.ait-configurator .hp-cfg-option-desc { color: var(--hp-text-muted); font-size: .8125rem; line-height: 1.35; }
.ait-configurator .hp-cfg-option-price { color: var(--hp-secondary); font-weight: 600; font-size: .9375rem; }
/* Produktlink (PDP im neuen Tab) in Karten und Stückliste */
.ait-configurator .hp-cfg-pdp {
    position: relative; z-index: 1; color: var(--hp-primary); font-size: .8125rem; font-weight: 600;
    text-decoration: none; border-radius: var(--hp-radius); overflow-wrap: anywhere;
}
.ait-configurator .hp-cfg-pdp:hover { color: var(--hp-primary-hover); text-decoration: underline; }
.ait-configurator .hp-cfg-pdp:focus-visible { outline: none; box-shadow: var(--hp-focus-ring); }
.ait-configurator .hp-cfg-option > .hp-cfg-pdp, .ait-configurator .hp-cfg-item small .hp-cfg-pdp { white-space: nowrap; }
.ait-configurator .hp-cfg-item small .hp-cfg-pdp { font-size: inherit; }
.ait-configurator .hp-cfg-table .hp-cfg-pdp { font-size: inherit; font-weight: inherit; }
/* EU-Energielabels: Aussehen kommt aus LidEnEVLabels (Theme-SCSS); hier nur die Einbettung */
.ait-configurator .hp-cfg-enev .enevLabel { margin-bottom: 4px; }
.ait-configurator .hp-cfg-enev .enevLabel:last-child { margin-bottom: 0; }
.ait-configurator .hp-cfg-enev { max-width: 100%; }
/* In schmalen Karten umbrechen statt überlaufen: Datenblatt-Link oben, Pfeil und Piktogramm darunter */
.ait-configurator .hp-cfg-enev .enevLabel_container { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
/* LidEnEVLabels setzt eine feste Höhe; bricht der Pfeil unter den Datenblatt-Link um (schmale Karten in Schritt 4),
   ragte er heraus und wurde abgeschnitten – Höhe daher dem Inhalt überlassen */
.ait-configurator .hp-cfg-enev .enevLabel, .ait-configurator .hp-cfg-enev .enevLabel_container { height: auto; min-height: 0; }
.ait-configurator .hp-cfg-enev .enevLabel_arrow { flex-shrink: 0; }
.ait-configurator .hp-cfg-option > .hp-cfg-enev { align-items: center; }
.ait-configurator .hp-cfg-option > .hp-cfg-enev .enevLabel_container { justify-content: center; }
.ait-configurator .hp-cfg-item .hp-cfg-enev { align-items: flex-start; margin-top: 4px; font-size: .875rem; line-height: 1.5; }
.ait-configurator .hp-cfg-table .hp-cfg-enev { align-items: flex-start; }
.ait-configurator .hp-cfg-enev .enevLabel_datasheet { color: var(--hp-primary); }
.ait-configurator .hp-cfg-enev .enevLabel_arrow:focus-visible { outline: none; box-shadow: var(--hp-focus-ring); }
.ait-configurator .hp-cfg-table td.hp-cfg-energy { white-space: nowrap; }
.ait-configurator .hp-cfg-table td.hp-cfg-delivery { font-size: .8125rem; color: var(--hp-text-muted); min-width: 90px; }
/* Stückliste mit langen Shop-Namen: Label und Piktogramm sowie Spaltenköpfe nicht umbrechen */
.ait-configurator .hp-cfg-table .hp-cfg-enev .enevLabel_container { flex-wrap: nowrap; }
.ait-configurator .hp-cfg-table thead th { white-space: nowrap; }
/* ErP-Verbundlabel in der Zusammenfassung */
.ait-configurator .hp-cfg-package { margin: 20px 0; padding: 16px; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-card); background: #fff; }
.ait-configurator .hp-cfg-package h3 { margin-top: 0; }
.ait-configurator .hp-cfg-package-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 8px 0 12px; }
.ait-configurator .hp-cfg-package-row .hp-cfg-enev { align-items: flex-start; }
.ait-configurator .hp-cfg-package-thumb { display: block; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); background: #fff; }
.ait-configurator .hp-cfg-package-thumb img { display: block; width: 120px; height: auto; aspect-ratio: 210 / 297; object-fit: contain; }
.ait-configurator .hp-cfg-package-thumb:focus-visible { outline: none; box-shadow: var(--hp-focus-ring); }
.ait-configurator .hp-cfg-package-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ait-configurator .hp-cfg-groups + .hp-cfg-package, .ait-configurator #positions-package { margin-top: 0; }
.ait-configurator .hp-cfg-why { color: var(--hp-danger); font-size: .75rem; font-style: italic; }
.ait-configurator .hp-cfg-spec { display: grid; gap: 2px; margin-top: 2px; text-align: left; font-size: .8125rem; }
.ait-configurator .hp-cfg-spec div { display: flex; justify-content: space-between; gap: 8px; }
.ait-configurator .hp-cfg-spec dt { font-weight: 400; color: var(--hp-text-muted); }
.ait-configurator .hp-cfg-spec dd { margin: 0; font-weight: 700; }

/* Komponenten-Gruppen */
.ait-configurator .hp-cfg-groups { display: grid; gap: 22px; }
.ait-configurator .hp-cfg-group-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .9375rem; font-weight: 700; }
.ait-configurator .hp-cfg-group-title small { color: var(--hp-text-dim); font-weight: 400; font-size: .75rem; }
.ait-configurator .hp-cfg-badge {
    display: inline-block; padding: 1px 9px; border-radius: 50rem; color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.5;
}
.ait-configurator .hp-cfg-badge--required { background: var(--hp-secondary); }
.ait-configurator .hp-cfg-badge--optional { background: var(--hp-accent); }
.ait-configurator .hp-cfg-badge--na { background: var(--hp-danger); }
.ait-configurator .hp-cfg-groups .hp-cfg-options { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ait-configurator .hp-cfg-bundle { text-align: left; padding-right: 36px; }
.ait-configurator .hp-cfg-item > span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.ait-configurator .hp-cfg-bundle-items { display: grid; gap: 8px; }
.ait-configurator .hp-cfg-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; }
.ait-configurator .hp-cfg-item > img, .ait-configurator .hp-cfg-item-ph {
    width: 88px; height: 88px; padding: 4px; box-sizing: border-box; object-fit: contain; background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius);
}
.ait-configurator .hp-cfg-item strong { display: block; font-size: .875rem; line-height: 1.3; }
.ait-configurator .hp-cfg-item small { color: var(--hp-text-muted); font-size: .75rem; }
.ait-configurator .hp-cfg-bundle-price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 12px; row-gap: 2px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--hp-border); }
.ait-configurator .hp-cfg-bundle-price > span, .ait-configurator .hp-cfg-bundle-price > small { white-space: nowrap; }
.ait-configurator .hp-cfg-bundle-price small { color: var(--hp-text-dim); font-size: .75rem; }
.ait-configurator .hp-cfg-bundle-gross small { color: var(--hp-text-muted); }
.ait-configurator .hp-cfg-none { justify-content: center; text-align: center; color: var(--hp-text-muted); }

/* Hinweise (wie FBH .fbh-help / .fbh-warn-box) */
.ait-configurator .hp-cfg-help { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--hp-primary); background: var(--hp-surface); font-size: .875rem; color: var(--hp-text); }
.ait-configurator .hp-cfg-help.historical { border-left-color: var(--hp-warning); background: var(--hp-warning-subtle); color: var(--hp-warning-text); }
.ait-configurator .hp-cfg-warn { margin: 16px 0; padding: 10px 14px; border-left: 3px solid var(--hp-warning); background: var(--hp-warning-subtle); color: var(--hp-warning-text); font-size: .875rem; }
.ait-configurator .hp-cfg-warn.error { border-left-color: var(--hp-danger); background: var(--hp-danger-subtle); color: #7a1d12; }
.ait-configurator .hp-cfg-warn.ok { border-left-color: var(--hp-accent); background: #e6f4ef; color: var(--hp-primary-dark); }

/* Zusammenfassung (wie FBH .fbh-kv / table.fbh-comp) */
.ait-configurator .hp-cfg-kv {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0;
    padding: 12px 16px; background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-card);
}
.ait-configurator .hp-cfg-kv div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #dde1e6; }
.ait-configurator .hp-cfg-kv dt { font-weight: 400; color: var(--hp-text); }
.ait-configurator .hp-cfg-kv dd { margin: 0; font-weight: 700; color: var(--hp-primary-dark); text-align: right; }
/* Hydraulikschema: Kurzbeschreibung als Fließtext über beide Spalten */
.ait-configurator .hp-cfg-kv .hp-cfg-kv-scheme { grid-column: 1 / -1; flex-direction: column; gap: 4px; }
.ait-configurator .hp-cfg-kv .hp-cfg-kv-scheme dd { font-weight: 400; color: var(--hp-text); text-align: left; }
.ait-configurator .hp-cfg-kv-scheme-text { margin: 0; }
.ait-configurator .hp-cfg-kv-scheme-text + .hp-cfg-kv-scheme-text { margin-top: 6px; }
.ait-configurator .hp-cfg-table-wrap { overflow-x: auto; }
.ait-configurator .hp-cfg-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ait-configurator .hp-cfg-table thead th { background: var(--hp-surface); text-transform: uppercase; font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: 10px 12px; text-align: left; }
.ait-configurator .hp-cfg-table td, .ait-configurator .hp-cfg-table tfoot th { padding: 10px 12px; border-bottom: 1px solid var(--hp-border); vertical-align: middle; }
.ait-configurator .hp-cfg-table .num { text-align: right; white-space: nowrap; }
.ait-configurator .hp-cfg-table code { color: var(--hp-text-muted); background: var(--hp-surface-2); padding: 1px 5px; border-radius: var(--hp-radius); font-size: .75rem; }
.ait-configurator .hp-cfg-table .unavailable td { color: var(--hp-danger); }
.ait-configurator .hp-cfg-total-row th, .ait-configurator .hp-cfg-total-row td { font-weight: 700; font-size: 1rem; background: #fff; }
.ait-configurator .hp-cfg-total-row td { color: var(--hp-secondary); font-size: 1.375rem; }
.ait-configurator .hp-cfg-sub-row th, .ait-configurator .hp-cfg-sub-row td { font-weight: 400; background: #fff; }
.ait-configurator .hp-cfg-tax-row th, .ait-configurator .hp-cfg-tax-row td { font-weight: 400; color: var(--hp-text-muted); font-size: .8125rem; background: #fff; }
.ait-configurator .hp-cfg-net-row th, .ait-configurator .hp-cfg-net-row td { font-weight: 700; background: #fff; border-bottom: 0; }
.ait-configurator .hp-cfg-vat { color: var(--hp-text-dim); font-size: .75rem; text-align: right; margin: 6px 0 16px; }
.ait-configurator .hp-cfg-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.ait-configurator .hp-cfg-actions-secondary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ait-configurator #add-to-cart { min-width: 240px; font-size: 1rem; }
.ait-configurator .hp-cfg-result { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--hp-accent); background: #e6f4ef; color: var(--hp-primary-dark); font-size: .875rem; overflow-wrap: anywhere; }
.ait-configurator .hp-cfg-result.error { border-left-color: var(--hp-danger); background: var(--hp-danger-subtle); color: #7a1d12; }
.ait-configurator .hp-cfg-result a { font-weight: 700; color: inherit; }

/* Aktionsleiste unten (Zurück · laufende Summe · Weiter), bleibt beim Scrollen sichtbar */
.ait-configurator .hp-cfg-bar {
    position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
    margin-top: 12px; padding: 10px 16px; background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-card);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.ait-configurator .hp-cfg-bar-total { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 10px; text-align: center; }
.ait-configurator .hp-cfg-bar-total span { color: var(--hp-text-muted); font-size: .8125rem; }
.ait-configurator .hp-cfg-bar-total strong { color: var(--hp-secondary); font-size: 1.25rem; font-weight: 700; }
.ait-configurator .hp-cfg-bar-vat { color: var(--hp-text-muted); font-size: .75rem; }
/* obere Zurück/Weiter-Leiste in langen Schritten (2 und 4) */
.ait-configurator .hp-cfg-nav-top { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ait-configurator .hp-cfg-status { flex-basis: 100%; color: var(--hp-text-dim); font-size: .75rem; }
.ait-configurator .hp-cfg-status.error { color: var(--hp-danger); }

@media (max-width: 991px) {
    .ait-configurator .hp-cfg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ait-configurator .hp-cfg-kv { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ait-configurator { padding-top: 12px; }
    .ait-configurator .hp-cfg-intro .hp-cfg-title { font-size: 1.625rem; }
    .ait-configurator .hp-cfg-wrap { padding: 10px; margin: 0 -10px; border-radius: 0; }
    /* Handy: Pillen nur mit Nummer, die aktive zusätzlich mit Namen */
    .ait-configurator .hp-cfg-steps { display: flex; gap: 4px; }
    .ait-configurator .hp-cfg-pill { flex: 0 0 40px; padding: 6px 2px; font-size: .8125rem; }
    .ait-configurator .hp-cfg-pill .l { display: none; }
    .ait-configurator .hp-cfg-pill.active { flex: 1 1 auto; }
    .ait-configurator .hp-cfg-pill.active .l { display: inline; }
    .ait-configurator .hp-cfg-view { padding: 16px; }
    .ait-configurator .hp-cfg-options, .ait-configurator .hp-cfg-options--products, .ait-configurator .hp-cfg-options--schemes, .ait-configurator .hp-cfg-options--centered { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ait-configurator .hp-cfg-groups .hp-cfg-options { grid-template-columns: 1fr; }
    .ait-configurator .hp-cfg-item { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
    .ait-configurator .hp-cfg-item > img, .ait-configurator .hp-cfg-item-ph { width: 64px; height: 64px; }
    .ait-configurator .hp-cfg-option-media { height: 80px; }
    .ait-configurator .hp-cfg-options--schemes .hp-cfg-option-media { height: 110px; }
    .ait-configurator .hp-cfg-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; margin: 12px -10px -10px; border-radius: 0; }
    .ait-configurator .hp-cfg-bar .btn { padding: 2px 10px; font-size: .875rem; }
    .ait-configurator .hp-cfg-bar-total strong { font-size: 1.0625rem; }
    .ait-configurator .hp-cfg-resume .form-control { width: 100%; }
    .ait-configurator #add-to-cart { width: 100%; }
    /* Stückliste: lange Shop-Namen nicht auf Wortbreite quetschen; die Tabelle scrollt dafür seitlich */
    .ait-configurator .hp-cfg-table td:first-child { min-width: 190px; }
}