:root {
  --white: #fff;
  --paper: #f6f8fa;
  --ink: #09263d;
  --muted: #617486;
  --navy: #082f49;
  --blue: #0878d1;
  --blue-dark: #075a9c;
  --blue-pale: #edf7ff;
  --orange: #f57a16;
  --green: #168654;
  --green-pale: #eef9f3;
  --line: #dbe4ea;
  --line-dark: #bdccd5;
  --danger: #b24646;
  --shadow: 0 20px 55px rgba(8, 47, 73, .09);
  --sans: Inter, Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
  --shell: min(1510px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
h1, h2, h3, p { text-wrap: pretty; }
.demo-note { min-height: 28px; display: grid; place-items: center; color: #3f6379; background: #eaf4fa; border-bottom: 1px solid #cfe3ed; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.config-header { min-height: 74px; padding: 0 max(28px, calc((100vw - 1510px) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; background: var(--white); border-bottom: 1px solid var(--line); }
.config-logo { width: max-content; display: flex; flex-direction: column; color: var(--ink); line-height: 1; text-decoration: none; }
.config-logo > span { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.config-logo strong { margin-top: 3px; font-size: 24px; letter-spacing: -.06em; }
.config-logo i { color: var(--blue); font-style: normal; }
.header-nav { display: flex; gap: 38px; }
.header-nav a { color: var(--ink); font-size: 11px; font-weight: 650; text-decoration: none; }
.help-link { justify-self: end; display: flex; flex-direction: column; text-align: right; text-decoration: none; }
.help-link span { color: var(--muted); font-size: 8px; }
.help-link strong { color: var(--blue); font-size: 11px; }

.progress-shell { background: var(--white); border-bottom: 1px solid var(--line); }
.step-progress { width: min(980px, calc(100vw - 46px)); min-height: 86px; margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; align-items: center; }
.step-progress button { min-width: 98px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #81919c; border: 0; background: transparent; cursor: pointer; }
.step-progress button > span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #c8d4da; border-radius: 50%; background: var(--white); font-size: 10px; font-weight: 800; transition: 180ms ease; }
.step-progress button b { font-size: 9px; font-weight: 720; white-space: nowrap; }
.step-progress > i { height: 1px; background: #cfd9de; }
.step-progress button.is-active, .step-progress button.is-complete { color: var(--blue); }
.step-progress button.is-active > span { color: var(--white); border-color: var(--navy); background: var(--navy); box-shadow: 0 0 0 5px var(--blue-pale); }
.step-progress button.is-complete > span { color: var(--white); border-color: var(--green); background: var(--green); }
.step-progress button.is-complete + i { background: var(--green); }

.mode-bar { width: var(--shell); min-height: 52px; margin: 18px auto -12px; display: flex; align-items: center; gap: 12px; }
.mode-bar > span { color: var(--muted); font-size: 9px; font-weight: 700; }
.mode-bar > p { margin: 0 0 0 auto; color: var(--muted); font-size: 9px; }
.info-dot { width: 17px; height: 17px; padding: 0; display: inline-grid; place-items: center; color: var(--blue); border: 1px solid #b9d6e8; border-radius: 50%; background: var(--white); font-size: 9px; font-weight: 800; cursor: help; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; width: 212px; border: 1px solid #adc1cd; border-radius: 8px; overflow: hidden; }
.mode-switch button { min-height: 32px; color: var(--ink); border: 0; background: var(--white); font-size: 9px; font-weight: 750; cursor: pointer; }
.mode-switch button.is-active { color: var(--white); background: var(--navy); }

.config-main { width: var(--shell); margin: 30px auto 76px; display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 22px; align-items: start; }
.config-workspace { min-width: 0; padding: 32px 34px 24px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(8,47,73,.05); }
.step-panel { display: none; min-height: 610px; }
.step-panel.is-active { display: block; animation: panel-in 230ms ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.step-heading > span { color: var(--blue); font-size: 8px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.step-heading h1 { margin: 8px 0 0; font-size: clamp(30px, 3vw, 43px); font-weight: 650; letter-spacing: -.052em; line-height: 1.05; }
.step-heading > p, .step-heading-row > div > p { max-width: 760px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.compact-heading h1 { font-size: clamp(28px, 2.4vw, 38px); }
.step-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; }
.measure-help { margin-top: 10px; min-height: 38px; padding: 0 15px; color: var(--blue); border: 1px solid #b8d8eb; border-radius: 8px; background: var(--blue-pale); font-size: 9px; font-weight: 750; cursor: pointer; white-space: nowrap; }

.building-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.select-card { min-height: 172px; padding: 20px; position: relative; display: flex; flex-direction: column; align-items: flex-start; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--white); text-align: left; cursor: pointer; transition: 180ms ease; }
.select-card:hover { border-color: #91bed9; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(8,47,73,.08); }
.select-card.is-selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.select-card svg { width: 36px; height: 36px; margin-bottom: auto; fill: none; stroke: currentColor; stroke-width: 1.7; }
.select-card strong { font-size: 11px; }
.select-card small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.selection-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; display: none; place-items: center; color: var(--white); border-radius: 50%; background: var(--blue); font-size: 10px; }
.is-selected > .selection-check { display: grid; }
.briefing-row { margin-top: 18px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; }
.briefing-row fieldset { min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; }
.briefing-row legend { padding: 0 7px; color: var(--muted); font-size: 9px; font-weight: 720; }
.choice-strip { display: flex; flex-wrap: wrap; gap: 7px; }
.choice-strip button { min-height: 34px; padding: 0 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: var(--white); font-size: 8px; font-weight: 700; cursor: pointer; }
.choice-strip button.is-active { color: var(--blue-dark); border-color: #93c5e2; background: var(--blue-pale); }
.existing-toggle { margin-top: 17px; padding: 15px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.existing-toggle input, .mini-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-ui, .mini-toggle > span { width: 36px; height: 20px; position: relative; flex: 0 0 auto; border-radius: 30px; background: #c7d2d8; transition: 180ms ease; }
.toggle-ui::after, .mini-toggle > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); transition: 180ms ease; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.existing-toggle input:checked + .toggle-ui, .mini-toggle input:checked + span { background: var(--blue); }
.existing-toggle input:checked + .toggle-ui::after, .mini-toggle input:checked + span::after { transform: translateX(16px); }
.existing-toggle > span:last-child { display: flex; flex-direction: column; }
.existing-toggle strong { font-size: 10px; }
.existing-toggle small { color: var(--muted); font-size: 8px; }

.product-config-grid { margin-top: 22px; display: grid; grid-template-columns: 165px minmax(440px, 1fr) 225px; gap: 14px; min-height: 510px; }
.door-rail, .viewer-card, .product-inspector, .role-panel, .plan-canvas, .matrix-panel, .option-library { border: 1px solid var(--line); border-radius: 11px; background: var(--white); }
.door-rail, .product-inspector { padding: 14px; }
.panel-label { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-label strong { font-size: 10px; }
.panel-label > span { min-width: 22px; height: 22px; display: grid; place-items: center; color: var(--blue); border-radius: 50%; background: var(--blue-pale); font-size: 8px; font-weight: 800; }
.door-rail-list { margin-top: 10px; display: grid; gap: 8px; }
.rail-door { width: 100%; min-height: 58px; padding: 10px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--white); text-align: left; cursor: pointer; }
.rail-door.is-active { color: var(--blue-dark); border-color: var(--blue); background: var(--blue-pale); }
.rail-door > i { width: 24px; height: 24px; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--navy); font-size: 8px; font-style: normal; font-weight: 800; }
.rail-door.is-active > i { background: var(--blue); }
.rail-door span { display: flex; flex-direction: column; min-width: 0; }
.rail-door strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.rail-door small { color: var(--muted); font-size: 6px; }
.rail-door em { color: var(--muted); font-size: 12px; font-style: normal; }
.rail-add { width: 100%; min-height: 38px; margin-top: 9px; color: var(--blue); border: 1px dashed #8ec5e5; border-radius: 8px; background: var(--white); font-size: 8px; font-weight: 740; cursor: pointer; }
.door-rail > p { margin: 18px 2px 0; padding: 10px; color: var(--muted); background: var(--blue-pale); font-size: 7px; line-height: 1.55; }

.viewer-card { min-width: 0; overflow: hidden; }
.viewer-toolbar { min-height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.viewer-toolbar strong { font-size: 11px; }
.viewer-toolbar span { color: var(--muted); font-size: 8px; }
.viewer-toolbar .fit-status { padding: 5px 9px; color: var(--green); border: 1px solid #add8c1; border-radius: 6px; background: var(--green-pale); font-size: 7px; font-weight: 740; }
.viewer-options { min-height: 42px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.mini-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; cursor: pointer; }
.mini-toggle > span { width: 30px; height: 17px; }
.mini-toggle > span::after { top: 2px; width: 13px; height: 13px; }
.mini-toggle input:checked + span::after { transform: translateX(13px); }
.viewer-options button { padding: 5px 8px; color: var(--blue); border: 0; background: transparent; font-size: 7px; cursor: pointer; }

.model-stage { min-height: 368px; position: relative; overflow: hidden; cursor: grab; user-select: none; perspective: 900px; background: #fbfdfe; }
.model-stage:active { cursor: grabbing; }
.cylinder-scene { position: absolute; inset: 70px 20px 64px; display: grid; place-items: center; perspective: 900px; }
.cylinder-model { --rotation: -14deg; width: 460px; height: 165px; position: relative; transform-style: preserve-3d; transform: rotateX(-7deg) rotateY(var(--rotation)) rotateZ(-1deg); transition: transform 260ms ease; filter: drop-shadow(0 26px 18px rgba(12,38,52,.17)); }
.cylinder-model.is-rotating { animation: product-orbit 7s ease-in-out infinite alternate; }
@keyframes product-orbit { from { transform: rotateX(-7deg) rotateY(-20deg) rotateZ(-1deg); } to { transform: rotateX(-4deg) rotateY(20deg) rotateZ(1deg); } }
.cylinder-half { position: absolute; top: 24px; width: 204px; height: 103px; border: 1px solid #8d9aa1; background: linear-gradient(180deg, #f6f8f8 0%, #aab4b8 22%, #f7f8f8 48%, #7d898f 76%, #cfd5d7 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); transform-style: preserve-3d; transition: 350ms ease; }
.cylinder-half::after { content: ""; position: absolute; left: 18px; right: 18px; top: 20px; height: 1px; background: rgba(255,255,255,.8); }
.cylinder-left { left: 22px; border-radius: 52px 9px 9px 52px; }
.cylinder-right { right: 22px; border-radius: 9px 52px 52px 9px; }
.end-face { position: absolute; top: 7px; width: 87px; height: 87px; display: grid; place-items: center; border: 1px solid #727f85; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fafafa, #7f8b90 48%, #e2e5e6 65%, #768288); box-shadow: inset 0 0 0 6px rgba(255,255,255,.22); }
.cylinder-left .end-face { left: -9px; }
.cylinder-right .end-face { right: -9px; }
.key-slot { width: 8px; height: 32px; position: relative; border-radius: 4px; background: #25343b; transform: rotate(2deg); }
.key-slot::after { content: ""; position: absolute; left: -6px; bottom: 1px; width: 13px; height: 7px; background: #25343b; clip-path: polygon(0 0,100% 0,75% 100%,0 100%); }
.center-cam { position: absolute; z-index: 4; left: 208px; top: 18px; width: 44px; height: 118px; border: 1px solid #27353b; border-radius: 7px; background: linear-gradient(90deg, #141d22, #70797d, #141d22); transition: 350ms ease; }
.center-cam i { position: absolute; left: 7px; right: 7px; bottom: -32px; height: 42px; border-radius: 4px 4px 10px 10px; background: #303c42; transform: skewX(-8deg); }
.mount-hole { position: absolute; z-index: 5; left: 216px; top: 118px; width: 28px; height: 28px; border: 6px solid #59666b; border-radius: 50%; background: #172126; }
.knob-part { position: absolute; z-index: 5; right: -3px; top: 28px; width: 78px; height: 94px; display: none; border: 1px solid #67747a; border-radius: 14px 42px 42px 14px; background: linear-gradient(90deg, #8e999e, #f4f5f5 45%, #858f93); transition: 350ms ease; }
.knob-part i { position: absolute; inset: 13px 17px; border-radius: 50%; border: 1px solid #6e7b80; }
.half-cap { position: absolute; z-index: 6; right: 190px; top: 24px; width: 33px; height: 103px; display: none; border: 1px solid #7d8a90; border-radius: 0 50px 50px 0; background: linear-gradient(180deg, #fafafa, #89969b, #dce1e3); }
.cylinder-model.type-knob .knob-part { display: block; }
.cylinder-model.type-knob .cylinder-right .end-face { opacity: 0; }
.cylinder-model.type-half .cylinder-right, .cylinder-model.type-half .knob-part { opacity: 0; transform: translateX(-75px) scaleX(.2); }
.cylinder-model.type-half .half-cap { display: block; }
.cylinder-model.type-outside .cylinder-left { width: 135px; }
.cylinder-model.type-outside .cylinder-right, .cylinder-model.type-outside .center-cam, .cylinder-model.type-outside .mount-hole { opacity: .18; transform: scale(.82); }
.cylinder-model.is-exploded .cylinder-left { transform: translateX(-58px); }
.cylinder-model.is-exploded .cylinder-right { transform: translateX(58px); }
.cylinder-model.is-exploded .center-cam { transform: rotateY(34deg) translateZ(20px); }
.exploded-detail { position: absolute; z-index: 7; right: 18px; top: 90px; width: 165px; padding: 10px; display: flex; gap: 9px; border: 1px solid #b7d7e9; border-radius: 8px; background: rgba(255,255,255,.96); opacity: 0; transform: translateX(20px); pointer-events: none; transition: 260ms ease; box-shadow: 0 14px 28px rgba(8,47,73,.12); }
.exploded-detail.is-visible { opacity: 1; transform: none; }
.module-ring { width: 38px; height: 38px; flex: 0 0 auto; border: 8px double #a88a45; border-radius: 50%; }
.exploded-detail div { display: flex; flex-direction: column; }
.exploded-detail strong { font-size: 8px; }
.exploded-detail small { color: var(--muted); font-size: 6px; }
.measure-guide { position: absolute; z-index: 8; top: 30px; display: flex; flex-direction: column; color: var(--blue); font-size: 8px; text-align: center; pointer-events: none; }
.measure-guide strong { font-size: 11px; }
.measure-guide i { width: 164px; margin-top: 7px; display: block; border-top: 1px dashed var(--blue); }
.measure-guide i::before, .measure-guide i::after { content: ""; display: block; width: 1px; height: 35px; background: var(--blue); opacity: .55; }
.measure-guide i::before { float: left; }.measure-guide i::after { float: right; }
.guide-out { left: 76px; }.guide-in { right: 75px; }
.orbit { position: absolute; z-index: 8; top: 48%; color: #9db1bd; font-size: 26px; pointer-events: none; }.orbit-left { left: 20px; }.orbit-right { right: 20px; }
.drag-hint { position: absolute; z-index: 8; left: 50%; bottom: 17px; color: var(--muted); font-size: 8px; transform: translateX(-50%); pointer-events: none; }
.view-controls { min-height: 48px; padding: 0 12px; display: flex; align-items: center; gap: 5px; border-top: 1px solid var(--line); }
.view-controls button { min-height: 31px; padding: 0 10px; color: var(--muted); border: 1px solid transparent; border-radius: 6px; background: transparent; font-size: 7px; font-weight: 700; cursor: pointer; }
.view-controls button.is-active { color: var(--blue); border-color: #9bc9e4; background: var(--blue-pale); }
.view-controls .reset-view { margin-left: auto; border-color: var(--line); }

.type-grid { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.type-grid button { min-height: 55px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: var(--white); font-size: 6px; cursor: pointer; }
.type-grid button span { color: var(--ink); font-size: 16px; }
.type-grid button.is-active { color: var(--blue); border-color: var(--blue); background: var(--blue-pale); }
.inspector-fields { margin-top: 14px; display: grid; gap: 10px; }
.inspector-fields label { display: grid; gap: 4px; color: var(--muted); font-size: 7px; font-weight: 700; }
.inspector-fields select, .inspector-fields input { width: 100%; height: 35px; padding: 0 8px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--white); font-size: 8px; }
.dual-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.expert-field { display: none !important; }
body.expert-mode .expert-field { display: grid !important; }
.inspector-status { margin-top: 13px; padding: 9px; display: flex; align-items: center; gap: 8px; background: var(--green-pale); }
.inspector-status i { width: 22px; height: 22px; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: 8px; font-style: normal; }
.inspector-status span { display: flex; flex-direction: column; }
.inspector-status strong { font-size: 7px; }.inspector-status small { color: #557868; font-size: 6px; }
.duplicate-door { width: 100%; min-height: 34px; margin-top: 9px; color: var(--blue); border: 1px solid #a9cee3; border-radius: 7px; background: var(--white); font-size: 7px; cursor: pointer; }

.access-layout { margin-top: 22px; display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 14px; }
.role-panel { padding: 14px; }
.role-list { margin-top: 10px; display: grid; gap: 8px; }
.role-item { width: 100%; min-height: 66px; padding: 10px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--white); text-align: left; cursor: pointer; }
.role-item.is-active { color: var(--blue-dark); border-color: var(--blue); background: var(--blue-pale); }
.role-item > i { width: 28px; height: 28px; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--navy); font-size: 9px; font-style: normal; font-weight: 800; }
.role-item span { display: flex; flex-direction: column; }
.role-item strong { font-size: 9px; }.role-item small { color: var(--muted); font-size: 7px; }
.key-count-control { margin-top: 12px; padding: 10px; background: var(--paper); }
.key-count-control label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 7px; }
.key-count-control select { height: 30px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); font-size: 8px; }
.plan-canvas { padding: 16px; }
.canvas-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.canvas-head > div:first-child { display: flex; flex-direction: column; }
.canvas-head strong { font-size: 11px; }.canvas-head strong span { color: var(--blue); }.canvas-head small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.canvas-head > div:last-child { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 6px; }
.canvas-head i { width: 16px; height: 2px; background: var(--green); }.canvas-head i:nth-of-type(2) { margin-left: 7px; background: var(--blue); }
.plan-network { min-height: 330px; margin-top: 10px; position: relative; overflow: hidden; background: #fcfdfe; border: 1px solid #edf1f3; }
.network-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.network-svg path { fill: none; stroke: var(--blue); stroke-width: 2; opacity: .76; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw-line 650ms ease forwards; }
.network-svg path.full { stroke: var(--green); }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.network-role, .network-door { position: absolute; z-index: 2; min-height: 55px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 5px 16px rgba(8,47,73,.06); }
.network-role { left: 18px; width: 170px; padding: 10px; }
.network-role i { width: 24px; height: 24px; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--navy); font-size: 8px; font-style: normal; }
.network-role span, .network-door span { display: flex; flex-direction: column; }.network-role strong, .network-door strong { font-size: 8px; }.network-role small, .network-door small { color: var(--muted); font-size: 6px; }
.network-door { right: 18px; width: 155px; padding: 10px 30px 10px 11px; cursor: pointer; }
.network-door::after { content: ""; position: absolute; right: 10px; width: 13px; height: 13px; border: 1px solid #a5b5be; border-radius: 50%; }
.network-door.is-on { border-color: #9ed5b6; background: var(--green-pale); }.network-door.is-on::after { content: "✓"; display: grid; place-items: center; color: var(--white); border-color: var(--green); background: var(--green); font-size: 7px; }
.access-presets { margin-top: 12px; display: flex; align-items: center; gap: 7px; }.access-presets span { margin-right: auto; color: var(--muted); font-size: 7px; }.access-presets button { min-height: 30px; padding: 0 10px; color: var(--blue); border: 1px solid #aed1e5; border-radius: 6px; background: var(--white); font-size: 7px; cursor: pointer; }
.matrix-panel { margin-top: 14px; padding: 0 15px 15px; }.matrix-panel summary { min-height: 45px; display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 750; cursor: pointer; }.matrix-panel summary span { color: var(--muted); font-size: 7px; font-weight: 400; }.matrix-scroll { overflow-x: auto; }.matrix-panel table { width: 100%; border-collapse: collapse; font-size: 7px; }.matrix-panel th, .matrix-panel td { min-width: 95px; padding: 9px; border: 1px solid var(--line); text-align: center; }.matrix-panel th:first-child, .matrix-panel td:first-child { min-width: 140px; text-align: left; }.matrix-toggle { width: 22px; height: 22px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: var(--white); cursor: pointer; }.matrix-toggle.is-on { color: var(--white); border-color: var(--green); background: var(--green); }
body:not(.expert-mode) .expert-reveal { display: none; }

.tier-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tier-grid button { min-height: 156px; padding: 18px; position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto 1fr auto; gap: 4px 9px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--white); text-align: left; cursor: pointer; }
.tier-grid button.is-selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), 0 12px 28px rgba(8,120,209,.08); }
.tier-grid button > span { grid-row: 1 / 3; font-size: 24px; color: var(--navy); }.tier-grid button strong { font-size: 12px; }.tier-grid button small { color: var(--muted); font-size: 7px; line-height: 1.7; }.tier-grid button b { grid-column: 1 / 3; margin-top: 8px; font-size: 11px; }.tier-grid button em { position: absolute; top: 10px; right: 10px; padding: 4px 7px; color: var(--white); border-radius: 5px; background: var(--blue); font-size: 6px; font-style: normal; font-weight: 800; }
.option-library { margin-top: 14px; display: grid; grid-template-columns: 150px 1fr; min-height: 282px; overflow: hidden; }
.option-tabs { padding: 8px; border-right: 1px solid var(--line); background: #fbfcfd; }
.option-tabs button { width: 100%; min-height: 42px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); border: 0; border-left: 2px solid transparent; background: transparent; text-align: left; font-size: 8px; cursor: pointer; }.option-tabs button.is-active { color: var(--blue); border-left-color: var(--blue); background: var(--blue-pale); }.option-tabs b { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); font-size: 6px; }
.option-table { min-width: 0; padding: 8px; }.option-head, .option-row { display: grid; grid-template-columns: 48px 1fr 1.65fr 92px 55px; align-items: center; gap: 8px; }.option-head { min-height: 32px; color: var(--muted); font-size: 6px; font-weight: 800; }.option-row { min-height: 48px; padding: 6px 0; border-top: 1px solid var(--line); }.option-row > b { font-size: 8px; }.option-row > span { display: flex; flex-direction: column; }.option-row strong { font-size: 8px; }.option-row small { color: var(--muted); font-size: 6px; }.option-description { color: var(--muted); font-size: 7px; }.option-compatible { color: var(--green); font-size: 6px; }.option-select { width: 24px; height: 24px; justify-self: center; color: transparent; border: 1px solid #afbdc5; border-radius: 5px; background: var(--white); cursor: pointer; }.option-select.is-selected { color: var(--white); border-color: var(--blue); background: var(--blue); }
.guided-benefits { margin-top: 12px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #cfe2ed; background: var(--blue-pale); }.guided-benefits > div { display: flex; align-items: center; gap: 9px; }.guided-benefits i { width: 23px; height: 23px; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: 8px; font-style: normal; }.guided-benefits span { display: flex; flex-direction: column; }.guided-benefits strong { font-size: 8px; }.guided-benefits small { color: var(--muted); font-size: 6px; }.guided-benefits button { min-height: 32px; padding: 0 11px; color: var(--blue); border: 1px solid #aad0e5; border-radius: 6px; background: var(--white); font-size: 7px; cursor: pointer; }

.final-dashboard { margin-top: 22px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px; }.final-overview { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.final-overview article { min-height: 64px; padding: 0 13px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.final-overview article:last-child { border-bottom: 0; }.final-overview article > span { color: var(--blue); font-size: 8px; font-weight: 800; }.final-overview div { display: flex; flex-direction: column; }.final-overview small { color: var(--muted); font-size: 6px; }.final-overview strong { font-size: 8px; }.final-overview button { color: var(--blue); border: 0; background: transparent; font-size: 7px; cursor: pointer; }.final-plan { min-height: 260px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }.final-plan-head { min-height: 46px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.final-plan-head strong { font-size: 9px; }.final-plan-head span { color: var(--green); font-size: 7px; }.final-mini-network { height: 210px; position: relative; display: grid; place-items: center; background: #fbfdfe; }.final-mini-network svg { width: 100%; height: 100%; }.final-mini-network path { fill: none; stroke: var(--blue); stroke-width: 2; }.final-mini-network circle { fill: var(--white); stroke: var(--navy); stroke-width: 2; }.final-mini-network text { fill: var(--ink); font: 7px var(--sans); }
.handoff-box { margin-top: 14px; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--white); background: var(--navy); }.handoff-box > div:first-child { max-width: 600px; }.handoff-box span { color: #7dc8f0; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.handoff-box h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.03em; }.handoff-box p { margin: 6px 0 0; color: #c5d4dc; font-size: 8px; }.final-actions { display: flex; gap: 8px; flex: 0 0 auto; }.config-button { min-height: 42px; padding: 0 13px; border-radius: 7px; font-size: 8px; font-weight: 750; cursor: pointer; }.config-button-secondary { color: var(--white); border: 1px solid #6e8a99; background: transparent; }.config-button-primary { color: var(--white); border: 1px solid var(--orange); background: var(--orange); }.privacy-note { margin: 9px 0 0; color: var(--muted); font-size: 7px; text-align: right; }

.step-controls { margin-top: 23px; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); }.back-button, .next-button { min-height: 42px; padding: 0 18px; border-radius: 7px; font-size: 9px; font-weight: 760; cursor: pointer; }.back-button { color: var(--muted); border: 1px solid var(--line); background: var(--white); }.back-button:disabled { opacity: .35; cursor: default; }.next-button { min-width: 205px; color: var(--white); border: 1px solid var(--orange); background: var(--orange); }.next-button:hover { background: #dc6810; }

.live-summary { position: sticky; top: 18px; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.summary-head { padding-bottom: 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.summary-head span { font-size: 12px; font-weight: 790; }
.progress-score { min-height: 90px; display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--line); }.progress-score svg { width: 63px; height: 63px; transform: rotate(-90deg); }.progress-score circle { fill: none; stroke: #e4ebef; stroke-width: 4; }.progress-score .score-value { stroke: var(--navy); stroke-linecap: round; stroke-dasharray: 138.23; stroke-dashoffset: 110.5; transition: 300ms ease; }.progress-score > div { position: absolute; display: flex; flex-direction: column; align-items: center; }.progress-score strong { font-size: 11px; }.progress-score small { color: var(--muted); font-size: 6px; }
.live-summary dl { margin: 0; }.live-summary dl > div { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }.live-summary dt { color: var(--muted); font-size: 7px; }.live-summary dd { margin: 0; font-size: 8px; font-weight: 760; }
.compatibility { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); }.compatibility span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 7px; }.compatibility i { width: 18px; height: 18px; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: 7px; font-style: normal; }.compatibility strong { color: var(--green); font-size: 7px; }
.selection-facts { padding: 11px 0; display: grid; gap: 7px; border-bottom: 1px solid var(--line); }.selection-facts span { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 7px; }.selection-facts b { color: var(--ink); text-align: right; }
.summary-price { padding: 15px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }.summary-price > span { display: flex; flex-direction: column; font-size: 8px; font-weight: 740; }.summary-price small { color: var(--muted); font-size: 6px; font-weight: 400; }.summary-price strong { color: var(--navy); font-size: 23px; letter-spacing: -.04em; }.summary-status { margin-top: 13px; padding: 10px; display: flex; align-items: center; gap: 8px; background: var(--green-pale); }.summary-status i { width: 22px; height: 22px; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: 8px; font-style: normal; }.summary-status span { display: flex; flex-direction: column; }.summary-status strong { font-size: 7px; }.summary-status small { color: #507568; font-size: 6px; }.live-summary > p { margin: 12px 0 0; color: var(--muted); font-size: 6px; line-height: 1.55; }.mobile-summary { display: none; }

.config-dialog { width: min(570px, calc(100vw - 32px)); padding: 31px; color: var(--ink); border: 0; border-radius: 12px; box-shadow: 0 36px 90px rgba(0,0,0,.35); }.config-dialog::backdrop { background: rgba(6,35,52,.66); backdrop-filter: blur(5px); }.dialog-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: var(--white); font-size: 20px; cursor: pointer; }.config-dialog > span { color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.config-dialog h2 { margin: 8px 0 0; font-size: 28px; letter-spacing: -.04em; }.door-templates { margin-top: 23px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.door-templates button { min-height: 56px; padding: 0 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; background: var(--white); text-align: left; font-size: 10px; font-weight: 720; cursor: pointer; }.door-templates button:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-pale); }
.measure-illustration { height: 180px; margin-top: 25px; position: relative; background: var(--blue-pale); overflow: hidden; }.door-edge { position: absolute; left: 50%; top: 20px; width: 18px; height: 140px; background: #8b969c; transform: translateX(-50%); }.measure-cylinder { position: absolute; left: 17%; right: 17%; top: 70px; height: 42px; border: 1px solid #86959d; border-radius: 20px 20px 8px 8px; background: #d8dfe2; }.measure-cylinder i { position: absolute; left: 50%; top: -5px; width: 14px; height: 52px; background: #4e5d65; transform: translateX(-50%); }.measure-a, .measure-b { position: absolute; bottom: 20px; color: var(--blue); font-size: 9px; font-weight: 760; }.measure-a { left: 18%; }.measure-b { right: 18%; }.measure-dialog ol { margin: 20px 0 0; padding-left: 20px; color: var(--muted); font-size: 10px; }.measure-dialog li { margin: 8px 0; }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; width: min(390px, calc(100vw - 32px)); padding: 16px; display: flex; align-items: center; gap: 12px; color: var(--ink); background: var(--white); border: 1px solid #a8d1c2; border-radius: 10px; box-shadow: 0 22px 60px rgba(8,47,73,.2); opacity: 0; pointer-events: none; transform: translateY(20px); transition: 180ms ease; }.toast.is-visible { opacity: 1; transform: none; }.toast i { width: 30px; height: 30px; display: grid; place-items: center; color: var(--white); background: var(--green); border-radius: 50%; font-style: normal; }.toast span { display: flex; flex-direction: column; }.toast strong { font-size: 10px; }.toast small { color: var(--muted); font-size: 7px; }

@media (max-width: 1250px) {
  :root { --shell: min(1180px, calc(100vw - 36px)); }
  .config-main { grid-template-columns: minmax(0, 1fr) 245px; }
  .product-config-grid { grid-template-columns: 135px minmax(380px,1fr) 195px; }
  .cylinder-model { transform: scale(.86) rotateX(-7deg) rotateY(var(--rotation)); }
  .cylinder-model.is-rotating { animation: none; }
  .guide-out { left: 35px; }.guide-in { right: 35px; }
}

@media (max-width: 1020px) {
  :root { --shell: min(100% - 34px, 900px); }
  .header-nav { display: none; }
  .config-header { grid-template-columns: 1fr auto; }
  .config-main { grid-template-columns: 1fr; }
  .live-summary { position: fixed; z-index: 80; left: 18px; right: 18px; bottom: 72px; top: auto; display: none; max-height: calc(100vh - 120px); overflow: auto; }
  .live-summary.is-open { display: block; }
  .mobile-summary { position: fixed; z-index: 81; left: 0; bottom: 0; width: 100%; min-height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: var(--white); border: 0; background: var(--navy); font-size: 10px; cursor: pointer; }.mobile-summary strong { font-size: 18px; }
  .product-config-grid { grid-template-columns: 150px 1fr; }.product-inspector { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 14px; align-items: start; }.product-inspector > .panel-label { align-self: start; }.inspector-fields { margin-top: 0; grid-template-columns: repeat(3, 1fr); }.inspector-status { margin-top: 0; }.duplicate-door { grid-column: 3; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100vw - 22px); }
  .demo-note { padding: 5px 10px; min-height: 30px; text-align: center; font-size: 7px; }
  .config-header { min-height: 62px; padding: 0 13px; }.help-link span { display: none; }
  .progress-shell { overflow-x: auto; scrollbar-width: none; }.progress-shell::-webkit-scrollbar { display: none; }.step-progress { min-width: 610px; min-height: 72px; }.step-progress button b { font-size: 7px; }
  .mode-bar { margin-top: 12px; flex-wrap: wrap; }.mode-bar > p { width: 100%; margin: 0; }
  .config-main { margin: 20px auto 92px; }.config-workspace { padding: 22px 15px 18px; }.step-panel { min-height: 520px; }
  .step-heading h1 { font-size: 31px; }.step-heading-row { flex-direction: column; }.building-grid { grid-template-columns: 1fr 1fr; }.select-card { min-height: 145px; padding: 15px; }.briefing-row { grid-template-columns: 1fr; }
  .product-config-grid { grid-template-columns: 1fr; }.door-rail { order: 2; }.viewer-card { order: 1; }.product-inspector { order: 3; grid-column: auto; display: block; }.door-rail-list { grid-template-columns: 1fr 1fr; }.model-stage { min-height: 330px; }.cylinder-scene { transform: scale(.66); }.measure-guide i { width: 112px; }.guide-out { left: 18px; }.guide-in { right: 18px; }.exploded-detail { width: 140px; right: 7px; top: 86px; }.view-controls { overflow-x: auto; }
  .access-layout { grid-template-columns: 1fr; }.role-list { grid-template-columns: 1fr 1fr; }.plan-network { min-height: 360px; }.network-role { width: 125px; }.network-door { width: 120px; }.canvas-head > div:last-child { display: none; }
  .tier-grid { grid-template-columns: 1fr; }.tier-grid button { min-height: 125px; }.option-library { grid-template-columns: 1fr; }.option-tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }.option-tabs button { min-width: 105px; }.option-head { display: none; }.option-row { grid-template-columns: 38px 1fr 28px; padding: 10px 0; }.option-description, .option-compatible { display: none; }.guided-benefits { align-items: flex-start; flex-direction: column; }
  .final-dashboard { grid-template-columns: 1fr; }.handoff-box { align-items: flex-start; flex-direction: column; }.final-actions { width: 100%; flex-direction: column; }.config-button { width: 100%; }.step-controls { flex-direction: column-reverse; gap: 8px; }.back-button, .next-button { width: 100%; }.privacy-note { text-align: left; }.door-templates { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .building-grid { grid-template-columns: 1fr; }.select-card { min-height: 125px; }.door-rail-list, .role-list { grid-template-columns: 1fr; }.cylinder-scene { transform: scale(.52); }.measure-guide { top: 25px; }.measure-guide i { width: 80px; }.model-stage { min-height: 300px; }.network-role { left: 7px; width: 110px; }.network-door { right: 7px; width: 108px; }.option-row { grid-template-columns: 35px 1fr 28px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Lesbarkeits-Pass: große Bedienelemente und Schrift für die reale Kundenansicht */
.demo-note { min-height: 34px; font-size: 11px; }
.config-header { min-height: 82px; }
.config-logo > span { font-size: 9px; }
.config-logo strong { font-size: 28px; }
.header-nav a { font-size: 13px; }
.help-link span { font-size: 10px; }
.help-link strong { font-size: 14px; }
.step-progress { min-height: 96px; }
.step-progress button { min-width: 112px; gap: 8px; }
.step-progress button > span { width: 38px; height: 38px; font-size: 13px; }
.step-progress button b { font-size: 12px; }
.mode-bar { min-height: 62px; margin-top: 20px; }
.mode-bar > span, .mode-bar > p { font-size: 12px; }
.info-dot { width: 22px; height: 22px; font-size: 11px; }
.mode-switch { width: 250px; }
.mode-switch button { min-height: 42px; font-size: 12px; }
.config-workspace { padding: 36px 38px 28px; }
.step-heading > span { font-size: 11px; }
.step-heading > p, .step-heading-row > div > p { font-size: 15px; line-height: 1.65; }
.measure-help { min-height: 46px; padding: 0 19px; font-size: 12px; }
.select-card strong { font-size: 14px; }
.select-card small { font-size: 11px; line-height: 1.5; }
.briefing-row legend { font-size: 12px; }
.choice-strip button { min-height: 44px; padding: 0 15px; font-size: 11px; }
.existing-toggle { min-height: 70px; }
.existing-toggle strong { font-size: 13px; }
.existing-toggle small { font-size: 10px; }

.panel-label { min-height: 32px; }
.panel-label strong { font-size: 13px; }
.panel-label > span { min-width: 28px; height: 28px; font-size: 11px; }
.rail-door { min-height: 70px; padding: 12px; grid-template-columns: 30px 1fr auto; gap: 9px; }
.rail-door > i { width: 30px; height: 30px; font-size: 11px; }
.rail-door strong { font-size: 11px; }
.rail-door small { font-size: 9px; }
.rail-door em { font-size: 17px; }
.rail-add { min-height: 46px; font-size: 11px; }
.door-rail > p { padding: 13px; font-size: 10px; }
.viewer-toolbar { min-height: 58px; }
.viewer-toolbar strong { font-size: 14px; }
.viewer-toolbar span { font-size: 11px; }
.viewer-toolbar .fit-status { padding: 7px 11px; font-size: 10px; }
.viewer-options { min-height: 50px; }
.mini-toggle { font-size: 11px; }
.viewer-options button { min-height: 38px; padding: 0 10px; font-size: 10px; }
.measure-guide { font-size: 11px; }
.measure-guide strong { font-size: 15px; }
.exploded-detail { width: 185px; padding: 13px; }
.exploded-detail strong { font-size: 11px; }
.exploded-detail small { font-size: 9px; }
.drag-hint { font-size: 11px; }
.view-controls { min-height: 62px; gap: 7px; }
.view-controls button { min-height: 42px; padding: 0 13px; font-size: 10px; }
.type-grid button { min-height: 72px; padding: 8px 4px; font-size: 10px; }
.type-grid button span { font-size: 20px; }
.inspector-fields { gap: 13px; }
.inspector-fields label { gap: 6px; font-size: 10px; }
.inspector-fields select, .inspector-fields input { height: 44px; padding: 0 10px; font-size: 11px; }
.inspector-status { padding: 12px; }
.inspector-status i { width: 28px; height: 28px; font-size: 10px; }
.inspector-status strong { font-size: 10px; }
.inspector-status small { font-size: 8px; }
.duplicate-door { min-height: 44px; font-size: 10px; }

.role-item { min-height: 78px; padding: 12px; }
.role-item > i { width: 34px; height: 34px; font-size: 12px; }
.role-item strong { font-size: 12px; }
.role-item small { font-size: 10px; }
.key-count-control { padding: 13px; }
.key-count-control label { font-size: 10px; }
.key-count-control select { height: 38px; font-size: 11px; }
.canvas-head strong { font-size: 14px; }
.canvas-head small { font-size: 10px; }
.canvas-head > div:last-child { font-size: 9px; }
.network-role, .network-door { min-height: 64px; }
.network-role i { width: 30px; height: 30px; font-size: 10px; }
.network-role strong, .network-door strong { font-size: 11px; }
.network-role small, .network-door small { font-size: 9px; }
.network-door::after { width: 19px; height: 19px; }
.network-door.is-on::after { font-size: 10px; }
.access-presets span { font-size: 10px; }
.access-presets button { min-height: 40px; padding: 0 14px; font-size: 10px; }
.matrix-panel summary { min-height: 54px; font-size: 12px; }
.matrix-panel summary span { font-size: 10px; }
.matrix-panel table { font-size: 10px; }
.matrix-panel th, .matrix-panel td { padding: 12px; }
.matrix-toggle { width: 30px; height: 30px; }

.tier-grid button { min-height: 180px; padding: 22px; }
.tier-grid button strong { font-size: 15px; }
.tier-grid button small { font-size: 10px; }
.tier-grid button b { font-size: 14px; }
.tier-grid button em { padding: 6px 9px; font-size: 9px; }
.option-tabs button { min-height: 50px; padding: 0 12px; font-size: 11px; }
.option-tabs b { min-width: 24px; height: 24px; font-size: 9px; }
.option-head { min-height: 40px; font-size: 9px; }
.option-row { min-height: 60px; }
.option-row > b, .option-row strong { font-size: 11px; }
.option-row small { font-size: 9px; }
.option-description { font-size: 10px; line-height: 1.5; }
.option-compatible { font-size: 9px; }
.option-select { width: 32px; height: 32px; }
.guided-benefits { padding: 15px 17px; }
.guided-benefits i { width: 30px; height: 30px; font-size: 11px; }
.guided-benefits strong { font-size: 11px; }
.guided-benefits small { font-size: 9px; }
.guided-benefits button { min-height: 42px; padding: 0 14px; font-size: 10px; }

.final-overview article { min-height: 76px; }
.final-overview article > span { font-size: 11px; }
.final-overview small { font-size: 9px; }
.final-overview strong { font-size: 11px; }
.final-overview button { min-height: 36px; font-size: 10px; }
.final-plan-head { min-height: 56px; }
.final-plan-head strong { font-size: 12px; }
.final-plan-head span { font-size: 10px; }
.handoff-box span { font-size: 9px; }
.handoff-box h2 { font-size: 24px; }
.handoff-box p { font-size: 11px; }
.config-button { min-height: 50px; padding: 0 17px; font-size: 11px; }
.privacy-note { font-size: 10px; }
.back-button, .next-button { min-height: 52px; padding: 0 22px; font-size: 12px; }

.live-summary { padding: 21px; }
.summary-head span { font-size: 15px; }
.progress-score { min-height: 104px; }
.progress-score strong { font-size: 14px; }
.progress-score small { font-size: 9px; }
.live-summary dl > div { min-height: 52px; }
.live-summary dt { font-size: 10px; }
.live-summary dd { font-size: 11px; }
.compatibility { min-height: 58px; }
.compatibility span, .compatibility strong { font-size: 10px; }
.compatibility i { width: 23px; height: 23px; font-size: 9px; }
.selection-facts { gap: 10px; padding: 14px 0; }
.selection-facts span { font-size: 10px; }
.summary-price > span { font-size: 11px; }
.summary-price small { font-size: 9px; }
.summary-price strong { font-size: 27px; }
.summary-status { padding: 13px; }
.summary-status strong { font-size: 10px; }
.summary-status small { font-size: 8px; }
.live-summary > p { font-size: 9px; }
.config-dialog > span { font-size: 11px; }
.door-templates button { min-height: 62px; font-size: 13px; }
.measure-a, .measure-b { font-size: 12px; }
.measure-dialog ol { font-size: 13px; }
.toast strong { font-size: 13px; }
.toast small { font-size: 10px; }

@media (max-width: 1020px) {
  .product-inspector { grid-template-columns: 1fr; }
  .inspector-fields { grid-template-columns: 1fr 1fr; }
  .duplicate-door { grid-column: auto; }
}

@media (max-width: 720px) {
  .demo-note { font-size: 9px; }
  .step-progress { min-width: 670px; min-height: 82px; }
  .step-progress button b { font-size: 10px; }
  .mode-bar > p { font-size: 10px; }
  .config-workspace { padding: 25px 18px 20px; }
  .step-heading > p, .step-heading-row > div > p { font-size: 14px; }
  .door-rail-list, .role-list { grid-template-columns: 1fr; }
  .product-inspector { display: block; }
  .inspector-fields { grid-template-columns: 1fr; }
  .network-role { width: 138px; }
  .network-door { width: 136px; }
  .option-row { min-height: 66px; }
}

/* Geführter Schnellstart für Kunden ohne Fachwissen */
.guided-assistant { margin-top: 24px; padding: 22px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; border: 1px solid #b9dbea; border-left: 4px solid var(--blue); border-radius: 12px; background: #f8fcff; }
.assistant-intro > span { color: var(--blue); font-size: 10px; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; }
.assistant-intro h2 { margin: 7px 0 0; font-size: 24px; letter-spacing: -.035em; line-height: 1.08; }
.assistant-intro > p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.audience-switch { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.audience-switch button { min-height: 62px; padding: 9px 11px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--ink); border: 1px solid var(--line-dark); border-radius: 8px; background: var(--white); text-align: left; cursor: pointer; }
.audience-switch button.is-active { color: var(--blue-dark); border-color: var(--blue); background: var(--blue-pale); box-shadow: inset 0 0 0 1px var(--blue); }
.audience-switch b { font-size: 13px; }
.audience-switch small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.smart-recommendation { min-width: 0; padding-left: 23px; border-left: 1px solid #cfe2ed; }
.recommendation-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.recommendation-top > div:first-child { min-width: 0; }
.recommendation-top span { color: var(--green); font-size: 10px; font-weight: 800; }
.recommendation-top h3 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.025em; }
.guide-price { min-width: 112px; display: flex; flex-direction: column; align-items: flex-end; }
.guide-price small { color: var(--muted); font-size: 9px; }
.guide-price strong { color: var(--navy); font-size: 23px; letter-spacing: -.04em; }
.guide-price em { color: var(--green); font-size: 8px; font-style: normal; }
.smart-recommendation > p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.guide-benefits { margin-top: 13px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.guide-benefits > span { min-height: 54px; padding: 9px; display: flex; align-items: flex-start; gap: 7px; border: 1px solid #d9e8ef; border-radius: 8px; background: var(--white); }
.guide-benefits i { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; color: var(--white); border-radius: 50%; background: var(--green); font-size: 8px; font-style: normal; }
.guide-benefits b { font-size: 9px; line-height: 1.4; }
.saving-note { margin-top: 10px; padding: 9px 11px; display: flex; gap: 8px; color: #6b5316; border: 1px solid #ead7a8; border-radius: 7px; background: #fffaf0; font-size: 9px; line-height: 1.45; }
.saving-note strong { flex: 0 0 auto; }
.accept-guide { width: 100%; min-height: 48px; margin-top: 12px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; color: var(--white); border: 1px solid var(--orange); border-radius: 8px; background: var(--orange); font-size: 12px; font-weight: 780; cursor: pointer; }
.accept-guide:hover { background: #dc6810; }
.individual-divider { margin: 24px 0 -5px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.individual-divider::before, .individual-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
body.expert-mode .guided-assistant, body.expert-mode .individual-divider { display: none; }

@media (max-width: 940px) {
  .guided-assistant { grid-template-columns: 1fr; }
  .smart-recommendation { padding: 20px 0 0; border-left: 0; border-top: 1px solid #cfe2ed; }
}

@media (max-width: 620px) {
  .guided-assistant { padding: 17px; }
  .assistant-intro h2 { font-size: 22px; }
  .recommendation-top { flex-direction: column; }
  .guide-price { align-items: flex-start; }
  .guide-benefits { grid-template-columns: 1fr; }
  .saving-note { flex-direction: column; }
}