/* ---------- SEGLER Tokens ---------- */
:root{
  --red:#B82435; --red-deep:#8F1A2A; --red-soft:#F7E6E8; --red-tint:#FBF3F4;
  --ink:#333333; --body:#666666; --muted:#8A8A8A; --line:#E3E1E1; --line-strong:#CFCCCC;
  --ground:#FFFFFF; --ground-soft:#F6F5F5; --ground-deep:#EDEBEB; --panel:#FFFFFF;
  --steel:#9EA2A6; --ok:#2E7D4F; --ok-soft:#E4F2EA; --warn:#B86A00; --warn-soft:#FBF0DE; --err:#B82435; --err-soft:#F7E6E8;
  --footer:#2B2B2B; --footer-text:#BDBDBD;
  --shadow:0 10px 30px rgba(51,51,51,.10);
  --grid:rgba(51,51,51,.055);
  --font:"Open Sans",Helvetica,Arial,sans-serif;
  --radius:3px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --red:#D8455A; --red-deep:#B82435; --red-soft:#3A1D22; --red-tint:#2A1A1D;
    --ink:#F2F0F0; --body:#C8C4C4; --muted:#8F8A8A; --line:#3A3737; --line-strong:#4A4646;
    --ground:#1B1A1A; --ground-soft:#232121; --ground-deep:#2C2929; --panel:#232121;
    --ok:#6FCB94; --ok-soft:#1E3327; --warn:#E8A23A; --warn-soft:#3A2C14; --err:#E0596B; --err-soft:#3A1D22;
    --footer:#111010; --footer-text:#9A9595; --shadow:0 10px 30px rgba(0,0,0,.45); --grid:rgba(255,255,255,.06);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --red:#D8455A; --red-deep:#B82435; --red-soft:#3A1D22; --red-tint:#2A1A1D;
  --ink:#F2F0F0; --body:#C8C4C4; --muted:#8F8A8A; --line:#3A3737; --line-strong:#4A4646;
  --ground:#1B1A1A; --ground-soft:#232121; --ground-deep:#2C2929; --panel:#232121;
  --ok:#6FCB94; --ok-soft:#1E3327; --warn:#E8A23A; --warn-soft:#3A2C14; --err:#E0596B; --err-soft:#3A1D22;
  --footer:#111010; --footer-text:#9A9595; --shadow:0 10px 30px rgba(0,0,0,.45); --grid:rgba(255,255,255,.06);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--body);font-family:var(--font);font-size:15px;line-height:1.6;}
h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance;line-height:1.2}
h1{font-size:clamp(24px,3.2vw,34px);font-weight:700;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
h3{font-size:16px;font-weight:700}
p{margin:0}
a{color:var(--red)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px;color:var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{color:var(--red);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.num{font-variant-numeric:tabular-nums}

/* ---------- Header ---------- */
.topbar{border-bottom:1px solid var(--line);background:var(--ground)}
.topbar-in{max-width:1320px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:24px}
.wordmark{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1;flex:none}
.wordmark .wm{font-size:26px;font-weight:800;letter-spacing:.06em;color:var(--red);display:inline-flex;align-items:flex-start;gap:3px}
.wordmark .wm i{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--red);margin-top:-2px}
.wordmark small{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-top:3px;font-weight:600}
.titlebox{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:20px;min-width:0}
.titlebox .eyebrow{font-size:10.5px}
.titlebox h1{font-size:18px;letter-spacing:.02em;white-space:nowrap}
.titlebox h1::after{display:none}
.mode{margin-left:auto;display:inline-grid;grid-auto-flow:column;border:1px solid var(--line-strong);border-radius:var(--radius);padding:2px;background:var(--ground-soft);gap:2px}
.mode button{border:0;background:transparent;color:var(--body);padding:6px 14px;border-radius:2px;font-weight:700;font-size:13px}
.mode button[aria-pressed="true"]{background:var(--red);color:#fff}
.phone{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);font-weight:700;font-size:13.5px;line-height:1.2;flex:none}
.phone small{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
@media (max-width:860px){.phone{display:none}.titlebox{padding-left:14px}.titlebox h1{font-size:15px}}
@media (max-width:560px){.titlebox{display:none}}

/* ---------- Stepper ---------- */
.stepper{background:var(--ground-soft);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.stepper-in{max-width:1320px;margin:0 auto;padding:0 24px;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow-x:auto}
.stepper li{min-width:0}
.stepper button{width:100%;border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:12px 10px 11px 0;text-align:left;color:var(--body);border-bottom:3px solid transparent;min-width:0}
.stepper .dot{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;color:var(--muted);background:var(--ground)}
.stepper .lbl{display:flex;flex-direction:column;min-width:0;font-weight:700;font-size:13.5px;color:var(--ink);line-height:1.25}
.stepper .lbl small{font-weight:400;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.stepper button:hover .lbl{color:var(--red)}
.stepper [data-state="done"] .dot{background:var(--ink);border-color:var(--ink);color:var(--ground);font-size:0}
.stepper [data-state="done"] .dot::before{content:"✓";font-size:13px}
.stepper [data-state="error"] .dot{background:var(--err-soft);border-color:var(--err);color:var(--err)}
.stepper [data-state="error"] .lbl small{color:var(--err)}
.stepper [aria-current="step"]{border-bottom-color:var(--red)}
.stepper [aria-current="step"] .dot{background:var(--red);border-color:var(--red);color:#fff;font-size:12.5px}
.stepper [aria-current="step"] .dot::before{content:none}
@media (max-width:860px){.stepper-in{grid-template-columns:repeat(5,auto);gap:14px}.stepper .lbl small{display:none}.stepper button{padding-right:0}}
@media (max-width:560px){.stepper .lbl{font-size:12px}.stepper-in{gap:10px;padding:0 16px}.stepper .dot{width:22px;height:22px}}

/* ---------- Layout ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:24px 24px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:32px;align-items:start}
.side{position:sticky;top:76px;display:grid;gap:14px;max-height:calc(100vh - 92px);overflow:auto;padding-bottom:2px}
@media (max-width:980px){.wrap{grid-template-columns:1fr;gap:18px;padding-top:16px}.side{display:contents}.side .panel:first-child{order:-1}.side .cart{order:1}.stage{aspect-ratio:16/9}}
@media (max-width:560px){.wrap{padding-inline:16px}}
[data-mode="expert"] .guided-only{display:none !important}
[data-mode="guided"] .expert-only{display:none !important}

/* ---------- Steps ---------- */
.step{display:none}
.step.is-active{display:block;animation:stepIn .22s ease-out}
@keyframes stepIn{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step.is-active{animation:none}}
.step-head{margin-bottom:18px}
.step-head h2{font-size:22px;text-transform:none;letter-spacing:0}
.step-head .sub{margin-top:6px;max-width:62ch;font-size:14.5px}
.step-head .opt{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-left:6px;vertical-align:middle}
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
[data-mode="expert"] .step.is-active + .step.is-active{margin-top:30px;padding-top:26px;border-top:2px solid var(--line)}
[data-mode="expert"] .step[data-step="1"] .step-nav,[data-mode="expert"] .step[data-step="2"] .step-nav,[data-mode="expert"] .step[data-step="3"] .step-nav{display:none}
[data-mode="expert"] .step[data-step="4"] [data-prev]{visibility:hidden}
[data-mode="expert"] .step-head{margin-bottom:12px}
[data-mode="expert"] .step-head h2{font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.info-inline{display:inline-flex;width:15px;height:15px;border-radius:50%;border:1px solid var(--line-strong);font-size:10px;font-weight:700;align-items:center;justify-content:center;color:var(--muted);vertical-align:1px}

/* type cards */
.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.types{grid-template-columns:repeat(2,minmax(0,1fr))}}
.type{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:14px 14px 12px;text-align:left;color:var(--body);display:grid;gap:6px;align-content:start;transition:border-color .15s}
.type svg{width:100%;height:46px;display:block;color:var(--steel)}
.type b{color:var(--ink);font-size:14px}
.type small{font-size:12.5px;line-height:1.35;color:var(--muted)}
.type:hover{border-color:var(--line-strong)}
.type[aria-pressed="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:var(--red-tint)}
.type[aria-pressed="true"] svg{color:var(--red)}
.type-desc{margin-top:14px;font-size:14px;padding-left:12px;border-left:2px solid var(--red);max-width:62ch}
[data-mode="expert"] .types{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
[data-mode="expert"] .type{padding:8px 8px 7px;gap:3px}
[data-mode="expert"] .type small{display:none}
[data-mode="expert"] .type b{font-size:12px}
[data-mode="expert"] .type svg{height:26px}
@media (max-width:760px){[data-mode="expert"] .types{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* fields */
.presets{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:10px 12px;background:var(--ground-soft);border-radius:var(--radius)}
.presets-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 18px}
.fields.one{grid-template-columns:1fr}
.fields.addr{grid-template-columns:repeat(4,minmax(0,1fr))}
.fields.addr .wide{grid-column:span 2}
.field{display:grid;gap:5px;align-content:start;min-width:0}
.field[hidden]{display:none}
.field.wide{grid-column:1/-1}
.field.span2{grid-column:span 2}
@media (max-width:760px){.fields,.fields.addr{grid-template-columns:repeat(2,minmax(0,1fr))}.fields.addr .wide{grid-column:1/-1}}
@media (max-width:460px){.fields,.fields.addr{grid-template-columns:1fr}.field.span2{grid-column:auto}}
.field label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.unit-wrap{position:relative;display:flex}
.unit-wrap input{width:100%;padding:10px 44px 10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel);font-variant-numeric:tabular-nums;font-size:16px;font-weight:600}
.unit-wrap .unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);font-weight:600;pointer-events:none}
.unit-wrap input:disabled{background:var(--ground-soft);color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=date],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--panel)}
input[type=file]{font-size:13px;max-width:100%}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--body) 50%),linear-gradient(135deg,var(--body) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px var(--red-soft)}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-color:var(--err);box-shadow:0 0 0 3px var(--err-soft)}
.field.is-warn input{border-color:var(--warn)}
.msg{font-size:12.5px;line-height:1.4;display:none;padding:5px 8px;border-radius:2px}
.field.is-err .msg.err{display:block;background:var(--err-soft);color:var(--err)}
.field.is-warn .msg.warn{display:block;background:var(--warn-soft);color:var(--warn)}
.info{display:inline-flex;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-strong);color:var(--muted);font-size:10.5px;align-items:center;justify-content:center;font-weight:700;cursor:help;position:relative;text-transform:none;flex:none}
.info:hover,.info:focus{border-color:var(--red);color:var(--red)}
.info:hover::after,.info:focus::after{content:attr(data-tip);position:absolute;left:-8px;top:22px;z-index:40;width:270px;background:var(--ink);color:var(--ground);padding:10px 12px;border-radius:3px;font-size:12.5px;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;box-shadow:var(--shadow)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);border-radius:20px;padding:4px 11px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--red);color:var(--red)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.check{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--body);cursor:pointer;text-transform:none !important;letter-spacing:0 !important;font-weight:400 !important}
.check input{margin:2px 0 0;accent-color:var(--red);width:14px;height:14px;flex:none}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;max-width:320px}
.seg button{border:0;background:var(--panel);color:var(--body);padding:9px 10px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button svg{width:30px;height:16px}
.seg button[aria-pressed="true"]{background:var(--red);color:#fff}

/* material */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
@media (max-width:560px){.apps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.app{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:12px;text-align:left;display:grid;gap:3px;color:var(--body);align-content:start}
.app b{color:var(--ink);font-size:14px}
.app small{font-size:12.5px;color:var(--muted);line-height:1.35}
.app em{font-style:normal;font-size:11.5px;color:var(--red);font-weight:700;margin-top:4px}
.app:hover{border-color:var(--line-strong)}
.app[aria-pressed="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:var(--red-tint)}
.mat-note{display:flex;gap:10px;align-items:flex-start;border-left:2px solid var(--red);padding:4px 0 4px 12px;font-size:13.5px;margin-top:14px}
.mat-note span{display:none}
.mat-note b{color:var(--ink)}

/* handoff hint */
.handoff{margin-top:22px;display:flex;gap:14px;align-items:center;background:var(--ground-soft);border-radius:var(--radius);padding:14px 16px;font-size:13.5px}
.handoff b{display:block;color:var(--ink)}
[data-mode="expert"] .handoff{display:none}

/* review + contact */
.review{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:24px}
.review-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--ground-soft)}
.review-head h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.review-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:baseline}
.review-row:last-child{border-bottom:0}
.review-row .no{color:var(--red);font-weight:700;font-size:12px;letter-spacing:.06em}
.review-row .spec{color:var(--ink);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}
.review-row .sub{font-size:12.5px;color:var(--muted)}
.review-row .qty{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.review-empty{padding:16px 14px;font-size:13.5px;color:var(--body)}
.review-empty.is-err{color:var(--err);background:var(--err-soft)}
.group-title{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:22px 0 10px}
#contact .group-title:first-child{margin-top:0}
details.more{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:22px}
details.more summary{cursor:pointer;padding:12px 0;font-weight:700;color:var(--ink);font-size:13.5px;list-style:none;display:flex;align-items:center;gap:10px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";width:18px;height:18px;border:1px solid var(--line-strong);border-radius:2px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--red);flex:none}
details.more[open] summary::before{content:"–"}
details.more .fields{padding:2px 0 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.filelist{margin:4px 0 0;padding-left:18px;font-size:12.5px}
.privacy{margin-top:18px;font-size:13px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--red);background:var(--red);color:#fff;padding:10px 20px;border-radius:var(--radius);font-weight:700;font-size:14px;text-decoration:none;transition:background .15s;white-space:nowrap}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn[data-next]::after{content:"→";font-weight:400}
.btn.ghost{background:transparent;color:var(--red)}
.btn.ghost:hover{background:var(--red-soft)}
.btn.lg{padding:13px 28px;font-size:15px}
.btn.sm{padding:6px 12px;font-size:13px}
.linkbtn{border:0;background:none;color:var(--red);font-weight:700;font-size:13px;padding:4px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.linkbtn:hover{color:var(--red-deep)}

/* ---------- Side panel ---------- */
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);gap:10px}
.panel-head .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.panel-head .live i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.panel-head .live i{animation:none}}
.tabs{display:inline-grid;grid-auto-flow:column;gap:2px;background:var(--ground-deep);border-radius:3px;padding:2px}
.tabs button{border:0;background:transparent;color:var(--body);padding:4px 11px;font-size:12.5px;font-weight:600;border-radius:2px}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.stage{position:relative;aspect-ratio:16/11;max-width:100%;background:var(--ground-soft);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:center}
.stage[hidden]{display:none}
.stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.stage canvas:active{cursor:grabbing}
.stage svg{display:block;width:100%;height:100%}
.stage .hint{position:absolute;left:10px;bottom:8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;pointer-events:none}
.stage .fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:13px}
.stage.no-webgl .fallback{display:flex}
.stage .view-tools{position:absolute;right:8px;bottom:6px}
.stage .view-tools button{border:1px solid var(--line-strong);background:var(--panel);color:var(--body);border-radius:2px;width:26px;height:26px;font-size:14px;display:flex;align-items:center;justify-content:center}
.stage .view-tools button:hover{color:var(--red);border-color:var(--red)}
.specline{padding:10px 12px 8px;font-size:13.5px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.45;word-break:break-word;border-top:1px solid var(--line)}
.specline .k{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:1px}
.specline .flag{display:block;color:var(--warn);font-weight:600;font-size:12px;margin-top:2px}
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.calc div{padding:8px 12px;border-right:1px solid var(--line);min-width:0}
.calc div:last-child{border-right:0}
.calc dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.calc dd{margin:0;color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.calc dd small{display:block;font-size:11px;color:var(--muted);font-weight:400;white-space:normal}
.addbar{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:end;padding:12px;border-top:1px solid var(--line);background:var(--ground-soft)}
.addbar .field label{font-size:11px}
.stepper-num{display:grid;grid-template-columns:32px 64px 32px;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.stepper-num button{border:0;background:var(--panel);color:var(--ink);font-size:17px;font-weight:600}
.stepper-num button:hover{background:var(--red-soft);color:var(--red)}
.stepper-num input{border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:700;font-size:15px;padding:8px 2px;width:100%;background:var(--panel);-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.stepper-num input::-webkit-outer-spin-button,.stepper-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-num input:focus{box-shadow:none}
.field.is-err .stepper-num{border-color:var(--err)}
.add-acts{display:grid;gap:2px;justify-items:stretch}
.add-acts .btn{width:100%;padding:10px 12px}
.add-acts .linkbtn{justify-self:center}
.addbar .msg{grid-column:1/-1}

/* cart */
.cart-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.cart-head h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.count{min-width:20px;height:20px;border-radius:10px;background:var(--ground-deep);color:var(--ink);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.count.has{background:var(--red);color:#fff}
.cart-empty{padding:14px 12px;font-size:13px;color:var(--muted)}
.cart-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);align-items:center}
.cart-row.is-editing{background:var(--red-tint);box-shadow:inset 3px 0 0 var(--red)}
.cart-row .t{font-size:13px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.35}
.cart-row .t span{color:var(--red);font-weight:700;font-size:11.5px;letter-spacing:.06em;margin-right:6px}
.cart-row .s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-row .acts{display:flex;gap:2px}
.icon-btn{border:0;background:none;color:var(--muted);width:28px;height:28px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--ground-deep);color:var(--red)}
.icon-btn svg{width:15px;height:15px}
.cart-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-size:12.5px;color:var(--body);font-variant-numeric:tabular-nums}
.cart-foot[hidden]{display:none}

/* ---------- Facts + footer ---------- */
.facts{max-width:1320px;margin:0 auto;padding:0 24px 28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;font-size:12.5px;color:var(--muted)}
.facts div{border-top:1px solid var(--line);padding-top:10px}
.facts b{display:block;color:var(--ink);font-size:13px}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:16px}}
.site-foot{background:var(--footer);color:var(--footer-text)}
.foot-in{max-width:1320px;margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;font-size:12.5px;line-height:1.6}
.foot-in b{color:#fff;display:block;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.foot-in a{color:#fff;text-decoration:none}
.foot-in a:hover{text-decoration:underline}
@media (max-width:760px){.foot-in{grid-template-columns:1fr;padding-inline:16px}}

/* ---------- Overlay + toast ---------- */
.overlay{position:fixed;inset:0;background:rgba(20,18,18,.55);display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto;z-index:50}
.overlay.open{display:flex}
.sheet{background:var(--panel);color:var(--body);max-width:760px;width:100%;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin-top:20px}
.sheet h2{margin:2px 0 8px}
.sheet p{margin-bottom:14px}
.sheet pre{white-space:pre-wrap;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--ground-soft);border:1px solid var(--line);padding:14px;border-radius:var(--radius);max-height:50vh;overflow:auto;color:var(--ink)}
.sheet .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:3px;font-size:13.5px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;max-width:calc(100% - 32px)}
.toast.show{opacity:1}

@media print{
  .topbar,.stepper,.wrap,.facts,.site-foot,.toast{display:none !important}
  .overlay{position:static;display:block;background:none;padding:0}
  .sheet{box-shadow:none;max-width:none;padding:0}
  .sheet .acts{display:none}
}

/* ---------- Kleine Bildschirme: nur aktueller Schritt beschriftet ---------- */
@media (max-width:640px){
  .stepper-in{display:flex;gap:6px;overflow:visible}
  .stepper li{flex:none}
  .stepper li:has([aria-current="step"]){flex:1 1 auto;min-width:0}
  .stepper button{padding:10px 0 9px;gap:8px}
  .stepper .lbl{display:none}
  .stepper [aria-current="step"] .lbl{display:flex;font-size:13px}
  .calc dt{letter-spacing:.04em}
}