/* ============================================================
   META CLIP Regal-Konfigurator (Paket P12)
   Komponenten-CSS — Tokens kommen aus site.css (P3).
   ============================================================ */

.planer{padding:clamp(24px,4vw,42px) 0 70px}
.planer-head{max-width:64ch;margin-bottom:clamp(20px,3vw,32px)}
.planer-head .crumbs{color:var(--muted);font-size:var(--fs-ms);margin-bottom:.6rem}
.planer-head .crumbs a:hover{color:var(--text)}
.planer-head h1{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.planer-head h1 .accent{color:var(--text)}/* Design-Refresh 2026-07-16 P6: Deko-Akzent entdekoriert (Rot nur Signal) */
.planer-head .lead{color:var(--muted-2);margin-top:.8rem;font-size:var(--fs-lg)}

/* ---------- two-column layout: stage + control panel ---------- */
.planer-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}

/* ============================================================
   3D STAGE
   ============================================================ */
.cfg-stage{position:sticky;top:88px;border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--panel);overflow:hidden}
.stage-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.sys-chip{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted-2);border:1px solid var(--line-2);
  background:var(--panel-2);padding:.4rem .8rem;border-radius:999px;cursor:default;transition:.2s}
.sys-chip.is-on{color:var(--red-text);border-color:var(--red);background:rgba(226,0,26,.12)}
.sys-chip.soon{opacity:.45;cursor:not-allowed}
.sys-chip.soon::after{content:" · bald";color:var(--muted);font-weight:var(--fw-medium)}
.stage-head .spacer{flex:1}
.stage-tag{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--steel-2);
  display:inline-flex;align-items:center;gap:.45rem}
.stage-tag .live-dot{position:static}

/* 3D viewport */
/* Mobile-Audit 2026-07-11 (P2-7): touch-action:none machte die 3D-Stage zur Scroll-Falle
   (jede Berührung rotierte, Seiten-Scroll dort unmöglich). pan-y gibt die vertikale
   Seiten-Scrollbarkeit zurück; 1-Finger horizontal + Drag rotiert weiter (wie viewer3d.js:233). */
.stage3d{position:relative;height:clamp(340px,46vw,520px);
  perspective:1300px;perspective-origin:50% 42%;
  display:grid;place-items:center;cursor:grab;touch-action:pan-y;
  /* Design-Refresh 2026-07-16 P6: Blueprint-Raster raus → ruhige flache Fläche (wie .pdp-stage) */
  background:var(--panel)}
.stage3d.grabbing{cursor:grabbing}

/* WebGL mode (<model-viewer>): plain block, viewer fills the stage */
.stage3d.is-mv{display:block;perspective:none;cursor:default}
.cfg-mv{position:absolute;inset:0;width:100%;height:100%;
  --poster-color:transparent;--progress-bar-color:var(--red);
  background:transparent}
/* view-angle buttons (Vorne/Seite/Oben/3D) overlaid bottom-left */
.cfg-view{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;flex-wrap:wrap;gap:.4rem}
.cfg-view-btn{appearance:none;border:1px solid var(--line-2);
  background:rgba(12,14,18,.66);backdrop-filter:blur(8px);color:#fff;
  padding:.4em .8em;border-radius:999px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;transition:.18s var(--ease)}
.cfg-view-btn:hover{color:#fff;border-color:var(--steel);background:rgba(20,24,30,.82)}
.cfg-view-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.rack3d{position:relative;transform-style:preserve-3d;will-change:transform;
  transition:transform .08s linear}
.rack3d>div{position:absolute;left:0;top:0;transform-style:preserve-3d}

/* uprights */
.post{background:var(--postg,linear-gradient(180deg,#cdd4dc,#9aa6b4));
  border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.35) inset}
.post.side{filter:brightness(.78)}
/* shelf boards (lie flat via rotateX(90)) + front lip for thickness */
.shelf{background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.06)),
    var(--face,#b9c2cd);
  border:.5px solid var(--edge,#7d8a99);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.lip{background:var(--edge,#7d8a99);filter:brightness(.92);border-radius:0 0 2px 2px}

/* Visual-Audit 2026-07-24 (#79): explizites row-gap, damit die dichte Werkzeugleiste (Maße +
   Passung + Modus + Begehen + Undo/Redo + Auto-Dreh + Ansicht + Hinweis) beim Umbruch saubere
   Zeilenabstände hält statt eng aneinanderzukleben. */
.stage-foot{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  padding:13px 16px;border-top:1px solid var(--line);background:var(--panel-2)}
.rd-dims{font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-lg)}
.rd-swatch{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-2);flex:none}
.rd-s3{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  color:#fff;background:var(--red);padding:.2rem .5rem;border-radius:6px;letter-spacing:var(--ls-caps)}
.stage-foot .spacer{flex:1}
.rotate-hint{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:var(--fs-sm)}
.rotate-hint svg{width:16px;height:16px}
.rd-meta{display:flex;flex-wrap:wrap;gap:.35rem .7rem;padding:0 16px 13px;color:var(--muted-2);font-size:var(--fs-ms)}
.rd-meta span{position:relative;padding-left:.95rem}
.rd-meta span::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--steel);transform:translateY(-50%)}

/* ============================================================
   CONTROL PANEL
   ============================================================ */
.cfg-panel{border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--panel);overflow:hidden}
.cfg-step{padding:16px 18px;border-top:1px solid var(--line)}
.cfg-step:first-child{border-top:none}
.cfg-step .step-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.cfg-step .step-n{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  background:rgba(226,0,26,.14);border:1px solid rgba(226,0,26,.3);color:var(--red);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);font-family:'Sora';flex:none}
.cfg-step h3{font-size:var(--fs-md);font-family:'Sora'}
.cfg-step .step-sub{margin-left:auto;color:var(--muted);font-size:var(--fs-sm)}

/* segmented option buttons */
.cfg-opts{display:flex;flex-wrap:wrap;gap:.45rem}
.seg{padding:.5rem .85rem;border-radius:var(--r);border:1px solid var(--line-2);/* Design-Refresh 2026-07-16 P6: Control-Radius tokenisiert */
  background:var(--panel-2);color:var(--muted-2);font-size:var(--fs-base);font-weight:var(--fw-medium);
  cursor:pointer;transition:.18s var(--ease)}
.seg:hover:not(:disabled){color:var(--text);border-color:var(--steel);background:rgba(0,0,0,.04)}
.seg.is-on{color:var(--red-text);border-color:var(--red);background:rgba(226,0,26,.14);font-weight:var(--fw-semibold);
  box-shadow:0 0 0 1px var(--red) inset}
.seg:disabled{opacity:.32;cursor:not-allowed}
.cfg-na{color:var(--muted);font-size:var(--fs-base)}
.cfg-note{color:var(--muted);font-size:var(--fs-sm);margin-top:.6rem}

/* E9: konservativer Last-Hinweis (nur wenn das Modell eine belastbare Regel hat) */
.cfg-loadhint{margin:14px 18px 0;padding:.8rem .9rem;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--panel-2)}/* Design-Refresh 2026-07-16 P6: Karten-Radius tokenisiert */
.cfg-loadhint .lh-head{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.cfg-loadhint .lh-vals{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.cfg-loadhint .lh-item{font-size:var(--fs-base);color:var(--text);font-variant-numeric:tabular-nums}
.cfg-loadhint .lh-item b{font-weight:var(--fw-semibold);color:var(--text)}
.cfg-loadhint .lh-scope{color:var(--muted);font-size:var(--fs-sm)}
.cfg-loadhint .lh-caveat{margin:.6rem 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.4}

/* E10 Beipack-Hinweis „Benötigtes Montagematerial" — gleiche Karten-Optik wie der Last-Hinweis. */
.cfg-beipackhint{margin:14px 18px 0;padding:.8rem .9rem;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--panel-2)}/* Design-Refresh 2026-07-16 P6: Karten-Radius tokenisiert */
.cfg-beipackhint .bph-head{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
.cfg-beipackhint .bph-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.cfg-beipackhint .bph-item{font-size:var(--fs-ms);color:var(--text);line-height:1.45}
.cfg-beipackhint .bph-skus{display:inline-flex;flex-wrap:wrap;gap:.3rem .6rem;margin-left:.25rem}
.cfg-beipackhint .bph-sku{color:var(--red,#c0392b);text-decoration:underline;text-underline-offset:2px}
.cfg-beipackhint .bph-sku .bph-art{color:var(--muted);font-size:var(--fs-sm);text-decoration:none}
.cfg-beipackhint .bph-note{margin:.6rem 0 0;color:var(--muted);font-size:var(--fs-xs);line-height:1.4}

/* steppers */
.cfg-rowsteppers{display:grid;gap:12px}
.stepper-row{display:flex;align-items:center;gap:.8rem}
.stepper-row .lbl{display:flex;flex-direction:column;line-height:1.2}
.stepper-row .lbl b{font-weight:var(--fw-semibold);font-size:var(--fs-base)}
.stepper-row .lbl small{color:var(--muted);font-size:var(--fs-sm)}
.stepper-row .spacer{flex:1}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--ink)}/* Design-Refresh 2026-07-16 P6: Control-Radius tokenisiert */
.stepper button{width:38px;height:38px;display:grid;place-items:center;background:transparent;
  border:none;color:var(--text);font-size:var(--fs-xl);cursor:pointer;transition:.15s}
.stepper button:hover:not(:disabled){background:rgba(0,0,0,.04);color:var(--text)}
.stepper button:disabled{opacity:.3;cursor:not-allowed}
.stepper .val{min-width:40px;text-align:center;font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-md)}

/* ============================================================
   PRICE + BOM + ACTIONS
   ============================================================ */
.cfg-summary{padding:18px;border-top:1px solid var(--line);background:var(--panel-2)}
.price-box{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.price-main .now{font-family:'Sora';font-weight:var(--fw-black);font-size:var(--fs-5xl);color:var(--text);line-height:var(--lh-tight)}
.price-main .list{color:var(--muted);text-decoration:line-through;font-size:var(--fs-base);margin-left:.5rem}
.price-main .vat{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:.25rem}
.price-side{text-align:right}
.price-side .save{color:var(--good-text);font-weight:var(--fw-semibold);font-size:var(--fs-base)}
.price-side .delivery{display:block;color:var(--muted-2);font-size:var(--fs-sm);margin-top:.2rem}

.quote-hint{display:flex;gap:.6rem;align-items:flex-start;margin-top:14px;padding:.7rem .85rem;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel-2);/* Design-Refresh 2026-07-16 P6: Karten-Radius tokenisiert */
  color:var(--muted-2);font-size:var(--fs-ms)}
.quote-hint svg{color:var(--red);flex:none;margin-top:1px}

/* bill of materials */
.bom-head{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);
  margin:18px 0 .6rem}
.bom-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem 1rem;align-items:baseline;
  padding:.55rem 0;border-top:1px solid var(--line)}
.bom-role{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);color:var(--steel-2);
  text-transform:uppercase;min-width:78px}
.bom-name{font-size:var(--fs-ms);color:var(--text);line-height:1.35}
.bom-sap{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:.1rem}
.bom-qty{color:var(--muted-2);font-size:var(--fs-ms);font-variant-numeric:tabular-nums}
.bom-sum{font-family:'Sora';font-weight:var(--fw-semibold);font-size:var(--fs-base);color:var(--text);font-variant-numeric:tabular-nums}
.bom-foot{color:var(--muted);font-size:var(--fs-xs);margin-top:.5rem}

.cfg-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:18px}
.cfg-actions .btn{flex:1;min-width:160px}
.cfg-actions .btn-lg{padding:1em 1.4em}

/* toast */
.cfg-toast{position:fixed;left:50%;bottom:74px;transform:translate(-50%,18px);z-index:90;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);/* Design-Refresh 2026-07-16 P6: Radius tokenisiert */
  padding:.75rem 1.1rem;color:var(--text);font-size:var(--fs-base);box-shadow:var(--sh-2);
  opacity:0;pointer-events:none;transition:.3s var(--ease)}
.cfg-toast.show{opacity:1;transform:translate(-50%,0)}
/* Toast mit Aktions-Link („Entfernt — Rückgängig", UX-Runde 2026-07-23 Schritt 2): nur mit
   .has-act sind pointer-events aktiv (der Basis-Toast bleibt bewusst durchklickbar). Der
   Button ist optisch ein Textlink (Rot = Signalfarbe der Handlung), das Tap-Ziel wird per
   Padding + Negativ-Margin vergrößert, ohne den Toast optisch aufzublähen. */
.cfg-toast.has-act{pointer-events:auto}
.cfg-toast .toast-act{border:0;background:none;font:inherit;font-weight:var(--fw-bold);cursor:pointer;
  color:var(--red-text,#e2001a);text-decoration:underline;text-underline-offset:3px;
  padding:.6rem .5rem;margin:-.6rem -.2rem -.6rem .1rem}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .planer-grid{grid-template-columns:1fr}
  .cfg-stage{position:static}
  .stage3d{height:clamp(300px,70vw,420px)}
}
@media (max-width:520px){
  .price-box{flex-direction:column;align-items:flex-start}
  .price-side{text-align:left}
  .cfg-actions .btn{min-width:100%}
}

/* ============================================================
   CAD-Showcase (Phase A) — echte META-CAD-Geometrie, montiert
   ============================================================ */
.cad-showcase{margin:0 0 clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--panel);overflow:hidden}
.cad-showcase-head{padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px) 0}
.cad-showcase-head .sys-chip{display:inline-block;margin-bottom:.7rem}
.cad-showcase-head h2{font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.15}
.cad-showcase-head h2 .accent{color:var(--text)}/* Design-Refresh 2026-07-16 P6: Deko-Akzent entdekoriert */
.cad-showcase-head p{color:var(--muted-2);margin-top:.5rem;max-width:62ch;font-size:var(--fs-md)}
.cad-bay{display:block;width:100%;height:clamp(360px,52vw,560px);margin-top:14px;
  background:var(--panel-2);/* Design-Refresh 2026-07-16 P6: weißes Radial → ruhige flache Fläche */
  --poster-color:#15181c;cursor:grab}
.cad-bay:active{cursor:grabbing}
.cad-bay-foot{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;
  padding:12px clamp(18px,2.2vw,26px);border-top:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-ms)}
.cad-bay-foot b{color:var(--text)}
.cad-bay-foot .spacer{flex:1}
@media (max-width:560px){.cad-bay-foot{font-size:var(--fs-sm)}}

/* System-Auswahl (alle CAD-Systeme) */
.planer-systems{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 clamp(18px,2.5vw,26px)}
.planer-systems .sys-chip{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.1;
  padding:.55rem .95rem;gap:.15rem;font-size:var(--fs-sm);cursor:pointer}
.planer-systems .sys-chip small{font-size:var(--fs-2xs);color:var(--muted);font-weight:var(--fw-medium)}
.planer-systems .sys-chip.is-on small{color:var(--muted)}
.planer-systems .sys-chip.soon{cursor:not-allowed}
.planer-systems .sys-chip.soon::after{content:" · bald";color:var(--muted);font-weight:var(--fw-medium);font-size:var(--fs-2xs)}

/* Übergangs-/Status-Karte */
.cfg-build{margin-top:clamp(18px,2.5vw,26px)}
.cfg-build-card{border:1px dashed var(--line-2);border-radius:var(--r-xl);padding:clamp(18px,2.4vw,28px);
  background:var(--panel-2);max-width:72ch}
.cfg-build-card h3{font-size:var(--fs-xl)}
.cfg-build-card p{color:var(--muted-2);margin:.55rem 0 1.1rem;font-size:var(--fs-md)}
.cfg-build-actions{display:flex;flex-wrap:wrap;gap:.7rem}

/* ============================================================
   three.js-Stage + Optionen (echte CAD-Engine)
   ============================================================ */
.cad-stage{position:relative;width:100%;height:clamp(380px,52vw,580px);cursor:grab;
  background:radial-gradient(76% 66% at 50% 14%,#eef1f4 0%,#d4dae1 50%,#aab3bd 100%)}
.cad-stage:active{cursor:grabbing}
.cad-stage canvas{display:block;width:100%;height:100%}

/* ===== Vollflächiges Konfigurator-Layout (3D dominiert) ===== */
.planer-full{width:100%}
.planer-bar{display:flex;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;
  padding:12px var(--gutter);border-bottom:1px solid var(--line);background:var(--ink)}/* Visual-Audit 2026-07-06 (#41): Titel fluchtet mit Header/Content-Kante */
.planer-title h1{display:inline;font-size:clamp(1.2rem,2.2vw,1.7rem)}
.planer-title h1 .accent{color:var(--text)}/* Design-Refresh 2026-07-16 P6: Deko-Akzent entdekoriert */
.planer-sub{color:var(--muted);font-size:var(--fs-ms);margin-left:.55rem}
.planer-bar .planer-systems{margin-left:auto;margin-bottom:0}
.planer-systems .sys-chip{padding:.42rem .8rem;font-size:var(--fs-sm)}
.planer-stagewrap{display:grid;grid-template-columns:1fr clamp(330px,28vw,430px);
  height:calc(100dvh - 166px);min-height:560px}/* Visual-Audit 2026-07-06 (#40): 128->166 (Topbar 39 + Nav 73 + Bar 54), dvh -> kein vertikaler Overflow */
.planer-stagewrap .cfg-stage{position:static;border:0;border-right:1px solid var(--line);border-radius:0;
  background:none;display:flex;flex-direction:column;overflow:hidden}
.planer-stagewrap .cad-stage{flex:1;height:auto;min-height:0;overflow:hidden}/* gleiche Canvas-Minhöhen-Falle wie .ov-stagewrap (2026-07-17) */
.planer-stagewrap .stage-foot{border-top:1px solid var(--line);background:var(--ink)}
.cfg-panel{height:100%;overflow-y:auto;padding:clamp(14px,1.5vw,22px);
  display:flex;flex-direction:column;gap:14px;background:var(--ink-2)}
.stage-btn{font-size:var(--fs-sm);color:var(--muted-2);border:1px solid var(--line-2);background:transparent;
  padding:.3rem .7rem;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap}/* Design-Refresh 2026-07-16 P6: Control-Radius tokenisiert; Visual-Audit 2026-07-24 (#79): nowrap → Labels wie „Halle begehen" nie mitten im Wort abgeschnitten, sie wandern beim Platzmangel als Ganzes in die nächste Zeile */
.stage-btn:hover{color:var(--text);border-color:var(--steel-2)}
.stage-btn.is-on{color:var(--red-text);border-color:var(--red);background:rgba(226,0,26,.14)}
/* Höhen-Editor: prominenter Toggle — als kleiner stage-btn war er schwer zu finden */
.stage-btn-edit{display:inline-flex;align-items:center;gap:.42rem;font-size:var(--fs-ms);font-weight:var(--fw-semibold);
  color:var(--text);border-color:var(--steel-2);background:var(--panel-2);padding:.46rem .9rem}
.stage-btn-edit svg{flex:none}
.stage-btn-edit:hover{color:var(--text);border-color:var(--red);background:rgba(0,0,0,.04)}
.stage-btn-edit.is-on{color:#fff;background:var(--red);border-color:var(--red);box-shadow:0 0 0 3px rgba(226,0,26,.22)}
.cfg-toggles{flex-direction:column;gap:.4rem}
.cfg-toggles .opt{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left}

/* Zubehör-Toggle (an/aus) */
.cfg-toggle-row{margin-top:.2rem}
.opt-toggle{display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;text-align:left;
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--muted-2);
  padding:.55rem .8rem;border-radius:var(--r);cursor:pointer;transition:.15s}/* Design-Refresh 2026-07-16 P6: Control-Radius tokenisiert */
.opt-toggle:hover{color:var(--text);border-color:var(--steel-2)}
.opt-toggle .tg-label{display:flex;flex-direction:column;line-height:1.15}
.opt-toggle .tg-label small{font-size:var(--fs-xs);color:var(--muted)}
.opt-toggle .tg-switch{flex:none;width:38px;height:21px;border-radius:999px;background:var(--line-2);
  position:relative;transition:.18s}
.opt-toggle .tg-switch::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;
  border-radius:50%;background:#fff;transition:.18s}
.opt-toggle.is-on{color:var(--red-text);border-color:var(--red);background:rgba(226,0,26,.10)}
.opt-toggle.is-on .tg-switch{background:var(--red)}
.opt-toggle.is-on .tg-switch::after{left:19px}
.opt-toggle.is-disabled{opacity:.35;cursor:not-allowed}
.opt-toggle.is-disabled .tg-label b::after{content:" – nicht für dieses Maß";font-weight:var(--fw-body);color:var(--muted);font-size:var(--fs-2xs)}
@media(max-width:880px){
  .planer-stagewrap{grid-template-columns:1fr;height:auto}
  .planer-stagewrap .cfg-stage{border-right:0;border-bottom:1px solid var(--line)}
  /* Visual-Audit 2026-07-24 (#83): mobile 3D-Vorschau las sich als kurzes, letterboxed Band mit
     breiten grauen Rändern (die three.js-Kamera rahmt eine breite, aber niedrige Fläche). Ein
     höheres Viewport gibt der Halle vertikal mehr Raum → sie füllt spürbar mehr Fläche. Deckel
     bei 520px, damit die Fußleiste + Panel darunter ohne langes Scrollen erreichbar bleiben. */
  .planer-stagewrap .cad-stage{height:min(64vh,520px)}
  .cfg-panel{height:auto}
  /* Fußleiste mobil etwas flacher → zusätzliche vertikale Fläche für die Vorschau. */
  .planer-stagewrap .stage-foot{padding:10px 12px}
  .planer-bar .planer-systems{margin-left:0;width:100%}
  /* Mobile-Audit 2026-07-14: 44px-Tap-Ziele für die Kern-Buttons (Rückgängig/Ansicht/Werkzeuge)
     — analog zur bestehenden Overlay-Regel. Maus-Hover-Hinweis + Auto-Drehung sind auf Touch
     nutzlos bzw. Platzfresser → ausblenden. */
  .planer-stagewrap .stage-foot .stage-btn,.plan-tools .stage-btn,.props-actions .stage-btn{min-height:44px}
  .planer-stagewrap .stage-foot .rotate-hint{display:none}
  .planer-stagewrap .stage-foot #cfg-autorotate{display:none}
}
/* Rückhol-Button (Regal außerhalb der Halle): amber wie die zugehörige Warnung, gut sichtbar. */
.stage-btn-rescue{color:#9a5b00;border-color:#e5b96b;background:rgba(255,150,40,.12);font-weight:var(--fw-semibold)}
.stage-btn-rescue:hover{color:#7a4800;border-color:#c98f2e;background:rgba(255,150,40,.2)}

/* Options-Chips */
.cfg-opts{display:flex;flex-wrap:wrap;gap:.45rem}
.cfg-opts .opt{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--muted-2);border:1px solid var(--line-2);
  background:var(--panel-2);padding:.5rem .85rem;border-radius:var(--r);cursor:pointer;transition:.15s}/* Design-Refresh 2026-07-16 P6: Control-Radius tokenisiert */
.cfg-opts .opt:hover{color:var(--text);border-color:var(--steel-2)}
.cfg-opts .opt.is-on{color:var(--red-text);border-color:var(--red);background:rgba(226,0,26,.14)}
.cfg-opts .opt.is-disabled{opacity:.32;cursor:not-allowed;text-decoration:line-through;
  border-color:var(--line);background:transparent}
.cfg-opts .opt.is-disabled:hover{color:var(--muted-2);border-color:var(--line)}

/* ============================================================
   HALLENPLANER (Geschossanlage) — Hallen-Eingabe, Kennzahlen, Passung
   ============================================================ */
.planer-badge{margin-left:auto;font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--steel-2);
  border:1px solid var(--line-2);background:var(--panel-2);
  padding:.35rem .7rem;border-radius:999px}
.hall-step .hall-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
/* Beschriftung + Einheit ("m") auf EINER Zeile, Eingabe darunter (display:block statt Flex-
   Spalte — sonst brach Text/Einheit-span/Input je auf eine eigene Zeile und das „m" wirkte
   verrutscht). Einheit steht so direkt hinter der Beschriftung. */
.hall-inputs label{display:block;font-size:var(--fs-sm);color:var(--muted-2)}
.hall-inputs label span{color:var(--muted);font-size:var(--fs-2xs)}
.hall-inputs input{display:block;width:100%;margin-top:.25rem;padding:.5rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--ink);color:var(--text);font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-md);
  font-variant-numeric:tabular-nums}/* Design-Refresh 2026-07-16 P6: Input-Radius tokenisiert */
.hall-inputs input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
/* UX-Runde 2026-07-23 Schritt 3 (A): Kurz-Hilfetext unter den Hallen-Feldern (Einrasten/Gang) */
.hall-help{display:block;margin-top:.55rem;color:var(--muted);font-size:var(--fs-xs);line-height:1.45}

.readout{display:flex;flex-direction:column;gap:.1rem}
.ro-row{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;align-items:baseline;
  padding:.4rem 0;border-bottom:1px solid var(--line)}
.ro-k{color:var(--muted-2);font-size:var(--fs-ms)}
.ro-v{font-family:'Sora';font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums}
.ro-n{grid-column:2;color:var(--muted);font-size:var(--fs-xs);text-align:right}

.hall-fit{font-size:var(--fs-ms);font-weight:var(--fw-semibold);padding:.2rem .6rem;border-radius:7px}
.hall-fit.ok{color:var(--good-text);background:rgba(60,180,90,.12)}
.hall-fit.warn{color:#9a5b00;background:rgba(255,150,40,.12)}

/* Stückliste */
#cfg-bom{display:flex;flex-direction:column;gap:.3rem;margin:.5rem 0 1rem}
.bom-row{display:flex;align-items:baseline;gap:.6rem;font-size:var(--fs-ms);color:var(--muted-2);
  padding:.35rem 0;border-bottom:1px solid var(--line)}
.bom-row .q{color:var(--text);font-weight:var(--fw-bold);min-width:2.2rem}
.bom-row .n{flex:1}
.bom-row .a{color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
/* gepreiste Shop-SKU-Zeilen (Grund-/Anbau-/Komplettregal) hervorheben */
.bom-row.bom-sku{color:var(--text)}
.bom-row.bom-sku .n{color:var(--text);font-weight:var(--fw-medium)}
.bom-row.bom-sku .a{color:var(--steel-2)}
.bom-sub{color:var(--muted);font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  margin:.55rem 0 .15rem;opacity:.8}

/* ============================================================
   HALLEN-LAYOUT-PLANER (Multi-System) — Palette, Eigenschaften, Liste, Tools
   ============================================================ */
/* Overflow-Audit 2026-07-24: „Einrasten"-Select (längste Option „aus – frei verschieben") passte in 2 Spalten NIE (auch Desktop-Panel) → hart abgeschnitten unter dem Pfeil. Einspaltig gestapelt = volle Breite. */
.hall-inputs.hall-inputs-2{grid-template-columns:1fr;margin-top:.6rem}
.hall-inputs select{display:block;width:100%;margin-top:.25rem;padding:.5rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--ink);color:var(--text);font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-base)}/* Design-Refresh 2026-07-16 P6: Input-Radius tokenisiert */

/* Palette: System-Chips kompakt + Schnellkonfig + Hinzufügen */
.pal-step .planer-systems{margin:0 0 .8rem;gap:.4rem}
.pal-step .sys-chip{padding:.45rem .7rem;font-size:var(--fs-sm)}
.pal-config{margin:0 -18px}
.pal-config .cfg-step{padding:.55rem 18px;border-top:1px dashed var(--line)}
.pal-config .cfg-step:first-child{border-top:none}
.pal-config .step-h{margin-bottom:.5rem}
.pal-config .step-n{display:none}
.btn-add{width:100%;margin-top:.9rem}

/* Eigenschaften-Panel */
.props-empty{color:var(--muted);font-size:var(--fs-ms);line-height:1.4}
.props-head{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.5rem}
.props-title{flex:1;min-width:0;overflow-wrap:anywhere;font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-md);line-height:1.2}
.props-title small{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.props-actions{display:flex;gap:.3rem;flex:none}
.props-pos{color:var(--muted-2);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;margin-bottom:.6rem}
.props-label-row{display:flex;flex-direction:column;gap:.25rem;font-size:var(--fs-sm);color:var(--muted-2);margin-bottom:.4rem}
.props-label-row input{padding:.45rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--ink);color:var(--text);font-size:var(--fs-base)}/* Design-Refresh 2026-07-16 P6: Input-Radius tokenisiert */
.props-config{margin:0 -18px}
.props-config .cfg-step{padding:.5rem 18px;border-top:1px dashed var(--line)}
.props-config .step-n{display:none}

/* Regal-Liste */
.inst-list{display:flex;flex-direction:column;gap:.25rem}
.inst-empty{color:var(--muted);font-size:var(--fs-ms);line-height:1.4;padding:.3rem 0}
.inst-row{display:flex;align-items:center;gap:.55rem;padding:.45rem .55rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel-2);cursor:pointer;transition:.13s}/* Design-Refresh 2026-07-16 P6: Karten-Radius tokenisiert */
.inst-row:hover{border-color:var(--steel-2);background:rgba(0,0,0,.04)}
.inst-row.is-on{border-color:var(--red);background:rgba(226,0,26,.10)}
.inst-dot{width:10px;height:10px;border-radius:50%;background:var(--c,#9aa3ad);flex:none}
.inst-name{flex:1;font-size:var(--fs-ms);color:var(--text);line-height:1.2;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.inst-name small{display:block;color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inst-act{flex:none;width:26px;height:26px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:transparent;color:var(--muted-2);cursor:pointer;font-size:var(--fs-ms);line-height:1}/* Design-Refresh 2026-07-16 P6: Control-Radius tokenisiert */
.inst-act:hover{color:var(--text);border-color:var(--red)}

/* Schritt „Regal hinzufügen" + leere Halle */
.add-step .btn-add{width:100%}
.add-step .add-hint{color:var(--muted);font-size:var(--fs-sm);line-height:1.45;margin-top:.6rem}
.btn-cfg{width:100%;margin-top:.2rem}
/* Leere Halle: kontextuelle Teile ausblenden, bis das erste Regal steht (UX-Runde 2026-07-23
   Schritt 3: readout/summary leben jetzt in der Akkordeon-Gruppe „Plan & Preis" → die ganze
   Gruppe aus; die Gruppen Halle/Regale/Objekte/Automatisch/Bedienung/Darstellung bleiben). */
#hall-app.is-empty .props-step,
#hall-app.is-empty .list-step,
#hall-app.is-empty #acc-plan{display:none}

/* ============================================================
   Visual-Audit 2026-07-24 (#80/#81/#82): Empty-State-Bausteine
   (Hinweis in der 3D-Stage + persistente Lead-Karte im Panel).
   JS baut sie (hallenplaner.js ensureEmptyUI); hier nur die Optik.
   Doktrin: flat, kleine Radien, Rot nur Signal (btn-primary CTA).
   ============================================================ */
/* (#82) In-Canvas-Hinweis über der leeren Stage. Wrapper fängt KEINE Zeiger (Drag/Zoom der
   3D-Stage ungestört) — nur die Karte selbst ist bedienbar. [hidden] explizit gegen das
   display:grid absichern (Author > UA — sonst verlöre das hidden-Attribut). */
.hall-empty-hint{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  padding:clamp(14px,3vw,28px);pointer-events:none}
.hall-empty-hint[hidden]{display:none}
.hall-empty-card{pointer-events:auto;max-width:min(420px,92%);text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);padding:clamp(18px,2.4vw,26px)}
.hall-empty-eyebrow{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--steel-2);font-weight:var(--fw-bold);margin-bottom:.5rem}
.hall-empty-lead{color:var(--muted-2);font-size:var(--fs-ms);line-height:1.5;margin:0 0 1rem}
.hall-empty-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}
.hall-empty-cta .btn{flex:0 1 auto}
@media (max-width:520px){ .hall-empty-cta .btn{flex:1 1 100%} }

/* (#80/#81) Persistente Lead-Karte am Fuß der Panel-Spalte — füllt den Weißraum, der im leeren
   Zustand durch das ausgeblendete „Plan & Preis" entsteht, mit einem echten Conversion-Weg. */
.cfg-lead{flex-shrink:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:clamp(14px,1.8vw,18px)}
.cfg-lead[hidden]{display:none}
.cfg-lead-eyebrow{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--red-text);font-weight:var(--fw-bold);margin-bottom:.4rem}
.cfg-lead-lead{color:var(--muted-2);font-size:var(--fs-ms);line-height:1.5;margin:0 0 .9rem}
.cfg-lead-cta{display:flex;flex-wrap:wrap;gap:.55rem}
.cfg-lead-cta .btn{flex:1 1 auto;min-width:140px}
@media (pointer:coarse){ .hall-empty-cta .btn,.cfg-lead-cta .btn{min-height:44px} }

/* ============================================================
   KONFIG-OVERLAY (Hallenplaner) — voller Einzel-System-Konfigurator als Modal
   ============================================================ */
body.ov-lock{overflow:hidden}
.ov-backdrop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(6,8,11,.74);backdrop-filter:blur(4px);padding:clamp(6px,1.2vw,16px)}
.ov-backdrop[hidden]{display:none}
/* Fast-Vollbild: der Konfigurator soll die 3D-Vorschau dominieren lassen (kein 860px-Höhencap mehr). */
.ov-dialog{display:flex;flex-direction:column;width:min(1860px,97vw);height:97vh;
  border:1px solid var(--line-2);border-radius:var(--r-xl);overflow:hidden;
  background:var(--panel);box-shadow:var(--sh-2)}
.ov-head{display:flex;align-items:center;gap:1rem;padding:14px clamp(16px,2vw,24px);
  border-bottom:1px solid var(--line);background:var(--ink)}
.ov-titlewrap{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ov-head h2{font-family:'Sora';font-size:clamp(1.05rem,1.8vw,1.4rem)}
.ov-sub{color:var(--muted);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-close{margin-left:auto;flex:none;width:34px;height:34px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:transparent;color:var(--muted-2);font-size:var(--fs-md);cursor:pointer;transition:.15s}/* Design-Refresh 2026-07-16 P6: Control-Radius tokenisiert */
.ov-close:hover{color:var(--text);border-color:var(--red)}
.ov-systems{padding:12px clamp(16px,2vw,24px);border-bottom:1px solid var(--line);margin:0;
  gap:.5rem;background:var(--panel-2)}
.ov-systems[hidden]{display:none}
.ov-body{flex:1;display:grid;grid-template-columns:1fr clamp(320px,30%,420px);min-height:0}
.ov-stagewrap{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
/* min-height:0 + overflow:hidden (2026-07-17): ohne sie stützt das Engine-Canvas (feste
   Pixelhöhe, einmal gemessen) die automatische Flex-Mindesthöhe — die Stage kann nie mehr
   schrumpfen und drückt bei bestimmten Fensterhöhen die stage-foot (Maße + „Höhen-Editor")
   aus dem Dialog UNTER die ov-foot-Aktionsleiste (Ludwig: „hab gar keinen Höheneditor mehr",
   reproduziert bei 1920×945). Der ResizeObserver in cad_engine.js zieht das Canvas nach. */
.ov-stagewrap .cad-stage{flex:1;height:auto;min-height:0;overflow:hidden}
.ov-stagewrap .stage-foot{border-top:1px solid var(--line);background:var(--ink)}
.ov-panel{overflow-y:auto;background:var(--ink-2);display:flex;flex-direction:column}
.ov-panel #ov-controls .cfg-step:first-child{border-top:none}
.ov-price{margin-top:auto;padding:16px clamp(16px,2vw,20px);border-top:1px solid var(--line);
  background:var(--panel-2);display:flex;flex-direction:column;gap:.25rem}
.ov-pricenote{color:var(--muted);font-size:var(--fs-xs)}
.ov-foot{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:14px clamp(16px,2vw,24px);border-top:1px solid var(--line);background:var(--ink)}
.ov-foot .spacer{flex:1}
.ov-labelrow{display:flex;flex-direction:column;gap:.2rem;font-size:var(--fs-xs);color:var(--muted-2)}
.ov-labelrow input{padding:.45rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--ink);color:var(--text);font-size:var(--fs-base);min-width:min(280px,60vw)}/* Design-Refresh 2026-07-16 P6: Input-Radius tokenisiert */
.ov-foot .btn{padding:.7em 1.3em}
@media (max-width:860px){
  .ov-dialog{height:97vh;width:100%}
  /* System-Chips: EINE horizontal scrollbare Reihe statt 3–4 Zeilen Umbruch (spart ~120px Höhe) */
  .ov-systems{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
    padding-top:10px;padding-bottom:10px}
  .ov-systems .sys-chip{flex:0 0 auto}
  /* Body als EINE scrollende Spalte: Stage kompakt + sticky oben (3D bleibt sichtbar), Controls
     darunter mit echtem Platz und scrollen mit. (Vorher Grid mit minmax(50vh) → Panel auf 0 px
     gequetscht → die Detail-Controls waren unerreichbar.) */
  .ov-body{display:flex;flex-direction:column;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .ov-stagewrap{position:sticky;top:0;z-index:2;flex:0 0 auto;height:32vh;min-height:210px;
    border-right:0;border-bottom:1px solid var(--line)}
  .ov-panel{overflow:visible}
  .ov-price{margin-top:0}
  /* fingerfreundliche Tap-Ziele */
  .ov-panel .cfg-opts .opt{min-height:44px}
  .ov-panel .stepper button{width:44px;height:44px}
  /* Aktionsleiste kompakt: Label volle Zeile, Abbrechen/Übernehmen teilen sich eine Reihe */
  .ov-labelrow{flex:1 1 100%}
  .ov-labelrow input{min-width:100%}
  .ov-foot{flex-wrap:wrap;gap:.55rem}
  .ov-foot .spacer{display:none}
  .ov-foot .btn{flex:1 1 0;min-width:0}
  /* Stage-Leiste kompakt, damit sie in der sticky 32vh-Stage nicht mehrzeilig wird */
  .ov-stagewrap .stage-foot{gap:.5rem;padding:9px 12px}
  .ov-stage-foot #ov-autorotate{display:none}        /* auf Touch dreht man per Drag → Auto-Dreh raus */
  .ov-stage-foot .stage-btn-edit{padding:.4rem .72rem}
}

/* Tools + quote-only-Preis */
.plan-tools{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.bom-quote{color:var(--steel-2);font-size:var(--fs-sm);font-style:italic}
/* Geschoss: Material-Richtpreis (echte SKUs) + „Statik auf Anfrage" */
.bom-guide{display:inline-flex;flex-direction:column;align-items:flex-end;color:var(--text);
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.bom-guide small{color:var(--muted);font-size:var(--fs-2xs);font-style:italic}
.bom-row .n small{display:block;color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}

/* ============================================================
   SHOP-EMBED — Einzelregal-Konfigurator auf Produkt-/Kategorieseite
   (assets/js/shop-configurator.js). Reine Layout-Schicht über den schon
   definierten Tokens/Bauteilen (.cfg-step/.cfg-opts/.sys-chip/.cad-stage/.price-main).
   ============================================================ */
.shop-cfg-widget{display:block;border:1px solid var(--line,#272d38);border-radius:var(--r-xl,18px);
  background:var(--panel,#161a22);overflow:hidden;margin:clamp(20px,3vw,34px) 0}
.shop-cfg-fallback{padding:1rem 1.2rem;color:var(--muted,#8a93a3);font-size:var(--fs-base)}
.shop-cfg-fallback a{color:var(--red,#e2001a)}

/* Kopf / Aufklapp-Trigger */
.shop-cfg-toggle{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;cursor:pointer;
  border:0;background:transparent;color:var(--text,#eef1f6);padding:clamp(14px,2vw,20px) clamp(16px,2.2vw,24px)}
.shop-cfg-eyebrow{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--steel-2,#8a93a3);
  font-weight:var(--fw-bold);flex:none}
.shop-cfg-h{font-family:'Sora',system-ui,sans-serif;font-weight:var(--fw-bold);font-size:clamp(1.02rem,1.6vw,1.22rem);flex:1 1 auto;min-width:0}
.shop-cfg-teaser{color:var(--muted,#8a93a3);font-size:var(--fs-ms);font-variant-numeric:tabular-nums;white-space:nowrap}
.shop-cfg-chev{color:var(--muted,#8a93a3);flex:none;transition:transform .2s}
.shop-cfg-widget.is-open .shop-cfg-chev{transform:rotate(180deg)}

/* Body (eingeklappt = aus; Mobile startet eingeklappt, Desktop offen) */
.shop-cfg-body{display:none;border-top:1px solid var(--line,#272d38)}
.shop-cfg-widget.is-open .shop-cfg-body{display:block}
.shop-cfg-body .planer-systems{padding:clamp(12px,2vw,16px) clamp(16px,2.2vw,24px) clamp(10px,1.6vw,14px);margin:0}

/* Visual-Audit 2026-07-24 (#39/#40): align-items:stretch zwang beide Grid-Spalten auf dieselbe
   Zeilenhöhe — die höhere Optionsspalte (Höhe/Breite/Tiefe/Oberfläche/Wunschfarbe RAL) wurde
   dann vom .shop-cfg-panel-Cap (max-height:560px) + overflow:hidden der Karte auf Vorschauhöhe
   abgeschnitten (RAL-Swatches nur zur Hälfte sichtbar, kein Scroll-Hinweis). align-items:start
   lässt jede Spalte ihre eigene Höhe behalten → die Karte wächst mit der Optionsspalte, die
   3D-Stage hält ihre min-height selbst. */
.shop-cfg-main{display:grid;grid-template-columns:1.12fr .88fr;gap:0;align-items:start}
.shop-cfg-stagewrap{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line,#272d38)}
.shop-cfg-stagewrap .cad-stage{flex:1;height:auto;min-height:clamp(320px,40vw,460px);
  background:radial-gradient(115% 100% at 50% 6%,#ffffff 0%,#fbfcfd 55%,#eef1f5 100%)}
.shop-cfg-stagefoot{display:flex;align-items:center;gap:.5rem;padding:9px 14px;border-top:1px solid var(--line,#272d38);background:var(--ink,#0c0e12)}
.shop-cfg-stagefoot .spacer{flex:1}
.shop-cfg-dims{color:var(--muted,#8a93a3);font-size:var(--fs-ms);font-variant-numeric:tabular-nums}

/* Visual-Audit 2026-07-24 (#39/#40): kein Höhen-Cap mehr — zusammen mit .shop-cfg-main{align-items:start}
   rendert die Optionsspalte vollständig und die Karte reicht bis unter die letzte RAL-Swatch-Reihe
   (vorher schnitt max-height:560px + der overflow:hidden-Rahmen der Karte die unteren Reihen ab). */
.shop-cfg-panel{display:flex;flex-direction:column;background:var(--ink-2,#10131a);overscroll-behavior:contain}
.shop-cfg-panel .shop-cfg-controls .cfg-step:first-child{border-top:none}
.shop-cfg-price{padding:14px 18px;border-top:1px solid var(--line,#272d38);margin-top:auto}
.shop-cfg-cta{display:flex;flex-wrap:wrap;gap:.6rem;padding:0 18px 18px}
.shop-cfg-cta .shop-cfg-add{flex:1 1 auto}
/* B2B Stufe 1 (Teilpaket 3a): Status-Zeile des „Angebot als PDF"-Buttons (Backend-Fallback-Hinweis). */
.shop-cfg-pdfstatus{display:block;padding:0 18px;margin:-.4rem 0 .8rem;font-size:var(--fs-sm);line-height:1.45;color:var(--muted,#8a93a3)}
.shop-cfg-pdfstatus:empty{display:none}

/* Toast */
.shop-cfg-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);
  background:#0c0e12;border:1px solid var(--line-2,#3a424f);color:#fff;padding:.7rem 1.1rem;border-radius:12px;
  font-size:var(--fs-base);box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.25s;z-index:60}
.shop-cfg-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.shop-cfg-toast a{color:var(--red,#e2001a);font-weight:var(--fw-semibold)}

@media(max-width:760px){
  .shop-cfg-main{grid-template-columns:1fr}
  .shop-cfg-stagewrap{border-right:0;border-bottom:1px solid var(--line,#272d38)}
  /* Mobil-Fix 2026-07-12: 3D-Sichtfeld etwas größer (vorher min. 320px). Jetzt an der Viewport-
     HÖHE bemessen, aber bewusst unter ~56vh gedeckelt, damit Fußleiste + Optionen darunter ohne
     Scrollen erreichbar bleiben (touchAction:'none' dreht IM Canvas, gescrollt wird daneben). */
  .shop-cfg-stagewrap .cad-stage{min-height:clamp(380px,56vh,480px)}
  .shop-cfg-teaser{font-size:var(--fs-sm)}
  /* W4m-4: fingerfreundliche Tap-Ziele im Shop-Embed (wie Overlay .ov-panel) */
  .shop-cfg-panel .stepper button{width:44px;height:44px}
  .shop-cfg-panel .cfg-opts .opt{min-height:44px}
  /* Mobile-Audit 2026-07-11 (P2-1 / P3-4): iOS-Auto-Zoom bei Fokus auf Planer-Felder <16px.
     Hallen-/Regal-Eingaben, Selects und Label-Inputs mobil auf ≥16px (Desktop unberührt). */
  .hall-inputs input,.hall-inputs select,
  .props-label-row input,.props-config input,
  .ov-labelrow input{font-size:16px}
}

/* Visual-Audit 2026-07-24 (#41 pdp-clip-config / #114 responsive-mobile): die eingeklappte
   Kopfleiste des 3D-Konfigurator-Embeds behielt das Desktop-Einzeiler-Layout — Eyebrow
   (flex:none) + Preis (white-space:nowrap) belegten festen Platz und quetschten die mittlere
   Titelspalte auf wenige Zeichen, sodass „Dieses Regal in 3D konfigurieren" Wort-für-Wort
   umbrach. Unter 640px die Leiste auf ein umbruchfreundliches 3-Zeilen-Layout stellen:
   Zeile 1 = Eyebrow, Zeile 2 = Titel volle Breite (natürlicher Wortumbruch), Zeile 3 =
   Preis links + Chevron rechts. Reine Layout-Schicht, Markup/JS unberührt. */
@media(max-width:640px){
  .shop-cfg-toggle{flex-wrap:wrap;row-gap:.35rem;column-gap:.7rem;align-items:baseline}
  .shop-cfg-eyebrow{flex:1 1 100%}
  .shop-cfg-h{flex:1 1 100%;min-width:0}
  .shop-cfg-teaser{flex:1 1 auto;white-space:normal}
  .shop-cfg-chev{margin-left:auto;align-self:center}
}

/* Vollaudit 2026-07-13 F03: Ehrlichkeits-Hinweis auf Anbauregal-PDPs — der Embed bepreist
   das freistehende Grundregal, nicht den (günstigeren) Anbau-Artikel der Seite. */
.shop-cfg-arnote{margin:.2rem 0 .6rem;font-size:var(--fs-sm);line-height:1.45;color:var(--muted,#8a93a3)}

/* ============================================================
   Hallenplaner Welle 2 (CAD-Ideen 2026-07-22): Panel „Darstellung"
   (Hallen-Stil, Füllgrad, Gangmaße) + Begehungs-Modus-Overlays.
   Doktrin: flat, ortsfest, kleine Radien, Rot nur als Signal/aktiv
   (is-on folgt dem bestehenden .stage-btn.is-on-Muster).
   ============================================================ */
/* (UX-Runde 2026-07-23 Schritt 3: eigener view-head entfällt — Akkordeon-Gruppe übernimmt) */
.view-step .view-body{margin-top:.8rem;display:flex;flex-direction:column;gap:.7rem}
.view-step .view-row{display:flex;flex-direction:column;gap:.4rem}
.view-step .view-seg{display:flex;flex-wrap:wrap;gap:.4rem}
.view-step .view-lbl{font-size:var(--fs-ms);font-weight:var(--fw-semibold)}
.view-step .view-note{color:var(--muted);font-size:var(--fs-xs);line-height:1.4}
.view-step .stage-btn small{margin-left:.35rem;font-size:var(--fs-2xs);color:var(--muted);font-weight:var(--fw-body)}
.view-step .stage-btn:disabled{opacity:.45;cursor:not-allowed}
.view-step .stage-btn:disabled:hover{color:var(--muted-2);border-color:var(--line-2)}
@media (pointer:coarse){ .view-step .stage-btn{min-height:44px} }

/* Begehungs-Modus (Idee 8): Fadenkreuz + Blick-Info + Steuerungs-Hinweis in der Stage.
   pointer-events:none — Zeiger gehören PointerLock bzw. dem walk.js-Touch-Overlay (z-index 30);
   die Overlays liegen mit 26 knapp darunter und bleiben durch dessen transparenten Grund sichtbar. */
.walk-cross{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border:2px solid rgba(255,255,255,.9);outline:1px solid rgba(26,31,40,.55);border-radius:50%;
  pointer-events:none;z-index:26}
.walk-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);max-width:min(92%,600px);
  text-align:center;background:rgba(20,24,31,.82);color:#f3f5f7;font-size:var(--fs-sm);line-height:1.35;
  padding:.4rem .75rem;border:1px solid rgba(255,255,255,.14);border-radius:8px;pointer-events:none;z-index:26}
.walk-info{position:absolute;left:50%;top:12px;transform:translateX(-50%);max-width:min(92%,600px);
  text-align:center;background:rgba(255,255,255,.93);color:#1a1f28;border:1px solid var(--line-2);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:.35rem .7rem;border-radius:8px;pointer-events:none;z-index:26}

/* Auswahl-Werkzeugleiste (UX-Runde 2026-07-23 Schritt 2): schwebt über der selektierten
   Instanz im 3D. JS setzt left/top (Kamera-Projektion des Auswahl-Zentrums, in die Stage
   geklemmt); translate(-50%,-100%) zentriert die Leiste ÜBER dem Ankerpunkt. Flat/entpillt,
   44px-Tap-Ziele (Touch), Rot nur als Signal am Entfernen-Hover. [hidden] explizit gegen
   display:flex absichern (das globale hidden-Attribut verlöre sonst). */
.sel-toolbar{position:absolute;left:0;top:0;z-index:27;display:flex;align-items:stretch;gap:2px;
  padding:3px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--sh-2);transform:translate(-50%,-100%);white-space:nowrap;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
.sel-toolbar[hidden]{display:none}
.sel-tb-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:44px;min-height:44px;padding:2px 8px;border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--muted-2);font-size:var(--fs-2xs);line-height:1.1;cursor:pointer}
.sel-tb-btn .ico{font-size:var(--fs-lg);line-height:1}
.sel-tb-btn:hover{color:var(--text);border-color:var(--steel-2);background:var(--panel)}
#sel-tb-del:hover{color:var(--red-text);border-color:var(--red);background:rgba(226,0,26,.08)}
.sel-tb-count{align-self:center;padding:0 .1rem 0 .4rem;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted-2)}

/* ============================================================
   Hallenplaner Welle 2 Schritt 2 (CAD-Ideen 2026-07-22, Idee 2):
   Planungsobjekte — Palette im „Regal hinzufügen"-Schritt, Objekt-
   Maßfelder in den Eigenschaften, Stützenraster-Dialog.
   Doktrin: flat, kleine Radien, Rot nur Signal (is-on-Muster).
   ============================================================ */
.obj-pal{margin-top:1rem;border-top:1px solid var(--line-2);padding-top:.85rem}
.obj-pal-h{font-size:var(--fs-ms);font-weight:var(--fw-semibold)}
.obj-pal-h small{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-body);margin-top:.2rem;line-height:1.4}
.obj-pal-btns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.obj-form{margin-top:.6rem;display:flex;flex-direction:column;gap:.55rem;
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.65rem;background:var(--panel-2)}
/* Aufräumer UX-Runde 2026-07-23 Schritt 3 (C): eigenes display:flex/inline-flex schlägt das
   hidden-Attribut (Author > UA — gleiche Falle wie .sel-toolbar/.ov-backdrop). Browser-Belege:
   leere weiße Box unter den Objekt-Buttons (#obj-form), KI-Feld trotz not_configured sichtbar
   (#gen-ai, 210 px), „Wand"-Zeile im Fläche-füllen-Modus (#gen-wall-row), „Bearbeiten"-Knopf
   der Auswahl-Toolbar bei Objekt-Auswahl (#sel-tb-edit), System-Chips im Edit-Overlay
   (#ov-systems). ALLE versteckbaren Planer-Bausteine mit eigenem display hier absichern. */
.obj-form[hidden],
.gen-ai[hidden],
.gen-ai-hints[hidden],
.gen-lbl[hidden],
.asr-anfahr[hidden],
.props-load[hidden],
.ro-bom-wrap[hidden],
.sel-tb-btn[hidden],
.ov-systems[hidden]{display:none}
.obj-form .obj-fields,.props-obj .obj-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.obj-form .obj-name{display:flex;flex-direction:column;gap:.25rem;font-size:var(--fs-sm);color:var(--muted-2)}
.obj-form .obj-name input{width:100%;padding:.5rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--panel);color:var(--text);font:inherit;font-size:var(--fs-base)}
.obj-form .obj-note{color:var(--muted);font-size:var(--fs-xs);line-height:1.4}
.obj-form .obj-place{width:100%}
.props-obj{margin:.6rem 0 .2rem}
@media (pointer:coarse){ .obj-pal .stage-btn{min-height:44px} }

/* Stützenraster-Dialog (kleines eigenständiges Modal, Muster ov-backdrop vereinfacht) */
.objgrid-bd{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(12,14,18,.55);padding:16px}
.objgrid-bd[hidden]{display:none}
.objgrid-dlg{width:min(460px,100%);max-height:min(92vh,640px);overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:18px}
.objgrid-dlg h3{font-size:var(--fs-lg);font-family:'Sora';margin:0 0 .35rem}
.objgrid-sub{color:var(--muted);font-size:var(--fs-sm);line-height:1.45;margin:0 0 .8rem}
.objgrid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.objgrid-grid .og-wd{display:flex;gap:.35rem}
.objgrid-grid .og-wd input{min-width:0}
.objgrid-note{margin-top:.7rem;font-size:var(--fs-ms);font-weight:var(--fw-semibold);color:var(--text)}
.objgrid-note.is-warn{color:var(--red-text,#e2001a)}
.objgrid-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.9rem}
@media (max-width:430px){ .objgrid-grid{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   Hallenplaner Welle 2 Schritt 3 (CAD-Ideen 2026-07-22, Ideen 3+4):
   Bediengerät/ASR-Verkehrswege-Panel + Traglast-Ampel + Belastungsschilder.
   Doktrin: flat, kleine Radien, Rot NUR als Signal (Ampel/Kollision).
   ============================================================ */
/* (A+B) Panel „Bedienung & Sicherheit" (eigener asr-head entfällt — Akkordeon-Gruppe übernimmt) */
.asr-body{margin-top:.8rem;display:flex;flex-direction:column;gap:.7rem}
.asr-row{display:flex;flex-direction:column;gap:.35rem}
/* Overflow-Audit 2026-07-24: Nutzungsart-Select ("Begegnungsverkehr"/"Einbahn (eine Fahrspur)") war in 2-Spalten zu schmal → Option überlappte den Pfeil. Full-width gestapelt, damit die Option ganz passt. */
.asr-row-2{gap:.6rem}
/* wie .hall-inputs/.gen-lbl: Beschriftung + Einheit ("mm") inline, Control darunter (kein verrutschtes „mm") */
/* Overflow-Audit 2026-07-24: asr-row/asr-row-2 sind Flex-SPALTEN → `flex:1 1 8rem` machte die
   flex-basis zur HÖHE (128px hohe Labels, riesige Lücken). Als Block volle Breite, natürliche Höhe. */
.asr-lbl{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted-2);display:block}
.asr-lbl span{color:var(--muted);font-weight:var(--fw-body);font-size:var(--fs-xs)}
.asr-step select,.asr-step .asr-loadw input{display:block;width:100%;margin-top:.25rem;padding:.5rem .6rem;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel);color:var(--text);font:inherit;font-size:var(--fs-base)}
/* Overflow-Audit 2026-07-24: lange Stapler-Optionen ("Schmalgangstapler (Kommissionier-/Dreiseitenstapler)") im ~248px schmalen Panel-Select nicht unter den Dropdown-Pfeil klippen — Schrift leicht kleiner + Ellipsis. */
.asr-step select{font-size:var(--fs-ms);max-width:100%;text-overflow:ellipsis}
.asr-soll{font-size:var(--fs-ms);line-height:1.4}
.asr-soll .asr-soll-val b{color:var(--text)}
.asr-soll small{display:block;color:var(--muted);font-size:var(--fs-xs);margin-top:.15rem}
.asr-soll-manual{color:var(--muted)}
.asr-tbl-head{display:flex;align-items:center;gap:.4rem;width:100%;padding:.5rem 0 0;margin-top:.2rem;
  background:none;border:0;border-top:1px solid var(--line-2);cursor:pointer;text-align:left;
  color:var(--text);font:inherit;font-size:var(--fs-ms);font-weight:var(--fw-semibold)}
.asr-tbl-chev{color:var(--muted);font-size:var(--fs-2xs)}
.asr-tbl-badge{margin-left:auto;font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.asr-tbl-badge.is-ok{color:#127a3a}
.asr-tbl-badge.is-tight{color:var(--red-text,#b7791f)}
.asr-tbl-badge.is-collide{color:var(--red-text,#e2001a)}
.asr-tbl-wrap{margin-top:.2rem}
.asr-tbl-scroll{overflow-x:auto}
.asr-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.asr-tbl th{text-align:left;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--ls-caps-sm);color:var(--muted);
  border-bottom:1px solid var(--line-2);padding:.35rem .4rem;font-weight:var(--fw-semibold);white-space:nowrap}
.asr-tbl td{padding:.35rem .4rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.asr-tbl td.asr-num{color:var(--muted);font-weight:var(--fw-bold)}
.asr-tbl td.asr-ist,.asr-tbl td.asr-soll-td{white-space:nowrap}
.asr-usage-sel{width:100%;min-width:8.5rem;padding:.3rem .4rem;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel);color:var(--text);font:inherit;font-size:var(--fs-sm)}
.asr-st{white-space:nowrap;font-weight:var(--fw-semibold)}
.asr-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.35rem;vertical-align:middle;background:var(--muted)}
.asr-dot-ok{background:#22a559}
.asr-dot-tight{background:#e6a417}
.asr-dot-collide{background:var(--red,#e2001a)}
.asr-tbl-empty{color:var(--muted);font-size:var(--fs-sm);line-height:1.4;margin:.4rem 0}
.asr-tbl-disc{color:var(--muted);font-size:var(--fs-2xs);line-height:1.4;margin:.5rem 0 0}
.asr-disc{color:var(--muted);font-size:var(--fs-xs);line-height:1.4;margin:0;border-top:1px solid var(--line-2);padding-top:.55rem}
/* (C) Anfahrschutz-Cross-Sell */
.asr-anfahr{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.65rem;background:var(--panel-2);
  display:flex;flex-direction:column;gap:.4rem}
.asr-anfahr-h{font-size:var(--fs-ms);font-weight:var(--fw-semibold)}
.asr-anfahr-h small{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-body);margin-top:.2rem;line-height:1.4}
.asr-anfahr-row{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm)}
.asr-anfahr-n{flex:1 1 auto;min-width:0}
.asr-anfahr-p{white-space:nowrap;font-weight:var(--fw-semibold)}
.asr-anfahr-add{flex:0 0 auto}
.asr-anfahr-all{width:100%;margin-top:.2rem}
/* (D) Traglast-Ampel */
.props-load{margin:.6rem 0 .2rem;border-top:1px solid var(--line-2);padding-top:.6rem;
  display:flex;flex-direction:column;gap:.45rem}
.load-head{font-size:var(--fs-ms);font-weight:var(--fw-semibold);display:flex;align-items:center;gap:.5rem}
/* wie .hall-inputs/.gen-lbl/.asr-lbl: Beschriftung + Einheit ("kg") inline, Eingabe darunter */
.load-inp{display:block;font-size:var(--fs-sm);color:var(--muted-2)}
.load-inp span{color:var(--muted);font-weight:var(--fw-body);font-size:var(--fs-xs)}
.load-inp input{display:block;width:100%;margin-top:.25rem;padding:.5rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--panel);color:var(--text);font:inherit;font-size:var(--fs-base)}
.load-limit{font-size:var(--fs-sm);color:var(--muted-2)}
.load-warn{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--red-text,#e2001a);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.load-cfg-link{background:none;border:0;color:var(--red-text,#e2001a);text-decoration:underline;cursor:pointer;font:inherit;font-size:var(--fs-sm);padding:0}
.load-src{font-size:var(--fs-2xs);color:var(--muted);line-height:1.4;margin:0}
.load-badge{display:inline-flex;align-items:center;gap:.2rem;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  padding:.1rem .4rem;border-radius:999px;white-space:nowrap}
.load-badge.load-green{color:#0e6b31;background:rgba(34,165,89,.14)}
.load-badge.load-amber{color:#8a5a00;background:rgba(230,164,23,.16)}
.load-badge.load-red{color:var(--red-text,#e2001a);background:rgba(226,0,26,.12)}
.bom-load{margin-left:.4rem;display:inline-flex;vertical-align:middle}
@media (pointer:coarse){ .asr-step select,.asr-step input,.asr-usage-sel,.load-inp input,.asr-anfahr .stage-btn{min-height:40px} }

/* ============================================================
   Hallenplaner Welle 2 Schritt 4 (CAD-Ideen 2026-07-22, Idee 5):
   Panel „Halle planen" — deterministischer Layout-Generator mit
   Varianten-Karten (Kennzahlen + Mini-Grundriss + Preis).
   Doktrin: flat, kleine Radien, Rot nur Signal (btn-primary CTA).
   ============================================================ */
/* (eigener gen-head entfällt — Akkordeon-Gruppe „Automatisch planen" übernimmt) */
.gen-body{margin-top:.8rem;display:flex;flex-direction:column;gap:.7rem}
.gen-row{display:flex;flex-direction:column;gap:.35rem}
.gen-row-2{flex-direction:row;flex-wrap:wrap;gap:.6rem}
/* wie .hall-inputs label: Beschriftung + Einheit inline, Control darunter (kein verrutschtes „m") */
.gen-lbl{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted-2);display:block;flex:1 1 8rem}
.gen-lbl span{color:var(--muted);font-weight:var(--fw-body);font-size:var(--fs-xs)}
/* Overflow-Audit 2026-07-24: in der einspaltigen .gen-row (Flex-Spalte) machte `flex:1 1 8rem` die
   flex-basis zur HÖHE → 128px hohes „Regalsystem"-Feld. Nur dort natürliche Höhe; .gen-row-2 (Zeile) behält flex. */
.gen-row:not(.gen-row-2) > .gen-lbl{flex:none}
.gen-step select,.gen-step input,.gen-step textarea{display:block;width:100%;margin-top:.25rem;
  padding:.5rem .6rem;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel);color:var(--text);font:inherit;font-size:var(--fs-base)}
.gen-base-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.gen-base{flex:1 1 10rem;min-width:0;font-size:var(--fs-sm);color:var(--muted-2)}
.gen-note{color:var(--muted);font-size:var(--fs-xs);line-height:1.4}
.gen-run{width:100%}
.gen-results{display:flex;flex-direction:column;gap:.6rem}
.gen-results:empty{display:none}
.gen-stale{color:#8a5a00;background:rgba(230,164,23,.12);border:1px solid rgba(230,164,23,.4);
  border-radius:var(--r-sm);font-size:var(--fs-xs);line-height:1.4;padding:.4rem .55rem;margin:0}
.gen-cards{display:flex;flex-direction:column;gap:.6rem}
.gen-card{border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel-2);padding:.65rem;
  display:flex;flex-direction:column;gap:.45rem}
.gen-card-h{font-size:var(--fs-ms);font-weight:var(--fw-bold)}
.gen-desc{color:var(--muted);font-size:var(--fs-xs);line-height:1.4;margin:0}
.gen-svg{width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--r-sm);background:#fff}
.gen-stats{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:var(--fs-xs);color:var(--muted-2)}
.gen-price{font-size:var(--fs-base);font-weight:var(--fw-bold)}
.gen-price small{display:block;font-size:var(--fs-2xs);color:var(--muted);font-weight:var(--fw-body);margin-top:.1rem}
.gen-price .gen-price-note{display:inline;font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-body)}
.gen-warn{color:#8a5a00;font-size:var(--fs-xs);line-height:1.4}
.gen-reason{color:#8a5a00;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1.4;margin:0}
.gen-card-actions{display:flex;gap:.5rem}
.gen-card-actions .btn{flex:1 1 auto;padding:.5rem .6rem;font-size:var(--fs-ms)}
.gen-empty{color:var(--muted);font-size:var(--fs-sm);line-height:1.4;margin:.2rem 0}
.gen-disc{color:var(--muted);font-size:var(--fs-2xs);line-height:1.4;margin:0;border-top:1px solid var(--line-2);padding-top:.55rem}
/* KI-Prompt „Halle beschreiben" (Idee 5 Abschluss, Welle 4): standardmäßig hidden — sichtbar
   erst, wenn GET /api/layout-assist configured:true meldet (lokal/ohne Functions: nur Formular). */
.gen-ai{display:flex;flex-direction:column;gap:.5rem;border-bottom:1px solid var(--line-2);padding-bottom:.7rem}
.gen-ai textarea{width:100%;min-height:3.4rem;resize:vertical;padding:.5rem .6rem;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel);color:var(--text);font:inherit;font-size:var(--fs-base)}
.gen-ai-run{width:100%}
.gen-ai-run:disabled{opacity:.6;cursor:progress}
.gen-ai-hints{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.25rem}
.gen-ai-hints li{color:var(--muted-2);font-size:var(--fs-xs);line-height:1.4}
.gen-ai-hints li.is-warn{color:#8a5a00}
/* Stellplatz-Ziel-Marker auf den Varianten-Karten (nur nach KI-Lauf mit demand.count). */
.gen-tgt.is-ok{color:#0e6b31;font-weight:var(--fw-semibold)}
.gen-tgt.is-miss{color:#8a5a00;font-weight:var(--fw-semibold)}
@media (pointer:coarse){
  .gen-step select,.gen-step input,.gen-step .stage-btn{min-height:44px}
  .gen-card-actions .btn,.gen-ai-run{min-height:44px}
}

/* ============================================================
   Hallenplaner Welle 2 Schritt 5 (CAD-Ideen 2026-07-22, Idee 7):
   Kurzlink-Erstellung (busy-State) + Read-only-Freigabe.
   Doktrin: flat, kleine Radien, Rot nur Signal (CTA = btn-primary).
   ============================================================ */

/* Kurzlink-Button: dezenter Lade-Zustand (kein Spinner-Asset — Text + reduzierte Deckkraft). */
#btn-shortlink.is-busy{opacity:.6;cursor:progress}
#btn-shortlink:disabled{cursor:progress}

/* ---- Read-only-Modus: Edit-UI ausblenden, reine Ansicht + Zusammenfassungs-Leiste ---- */
/* UX-Runde 2026-07-23 Schritt 3 (B): sichtbar bleiben NUR die Akkordeon-Gruppen „Darstellung"
   (acc-view) und „Plan & Preis" (acc-plan) — Kennzahlen/Stückliste/Teilen/Drucken/Export sind
   reine Ansicht bzw. Konvertierung. Die Edit-Gruppen (Halle/Regale/Objekte/Automatisch/
   Bedienung) und die Eigenschaften-Kontextkarte sind aus; mutierende Werkzeuge in „Plan & Preis"
   (Import ersetzt den Plan, Leeren zerstört ihn) zusätzlich einzeln. */
#hall-app.is-readonly #acc-halle,
#hall-app.is-readonly #acc-add,
#hall-app.is-readonly #acc-obj,
#hall-app.is-readonly #acc-auto,
#hall-app.is-readonly #acc-asr,
#hall-app.is-readonly .props-step{display:none}
#hall-app.is-readonly #btn-import,
#hall-app.is-readonly #btn-clear{display:none}

/* Zusammenfassungs-Leiste (ganz oben in der Panel-Spalte). */
.ro-bar{background:var(--panel-2)}
.ro-bar-h{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.ro-bar-eyebrow{font-size:var(--fs-xs);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--red-text);font-weight:var(--fw-bold)}
.ro-bar h3{font-size:var(--fs-xl);font-family:'Sora'}
.ro-bar-lead{color:var(--muted-2);font-size:var(--fs-ms);line-height:1.45;margin:0}
.ro-stats{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-bottom:.9rem}
.ro-stat{display:flex;flex-direction:column;gap:.1rem}
.ro-stat .ro-v{font-family:'Sora';font-weight:var(--fw-black);font-size:var(--fs-2xl);color:var(--text);line-height:var(--lh-tight)}
.ro-stat .ro-k{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--muted);line-height:var(--lh-title)}
/* Nachfix 2026-07-23: vom 20-px-Textzeilen-Toggle zum vollwertigen Tap-Target (≥44 px,
   flacher Control-Rahmen wie .seg/.stepper) — mobil wie Desktop gut treffbar. */
.ro-bom-head{display:flex;align-items:center;gap:.45rem;width:100%;margin:0 0 .6rem;padding:.55rem .7rem;
  min-height:44px;background:transparent;border:1px solid var(--line-2);border-radius:var(--r);
  cursor:pointer;text-align:left;color:var(--muted-2);font:inherit;font-size:var(--fs-ms);font-weight:var(--fw-semibold)}
.ro-bom-head:hover{color:var(--text);background:var(--panel)}
.ro-bom-chev{color:var(--muted);font-size:var(--fs-sm);line-height:1}
.ro-bom-wrap{margin:0 0 .9rem;display:flex;flex-direction:column;gap:.35rem}
.ro-bom-wrap .bom-row{display:flex;align-items:baseline;gap:.5rem;font-size:var(--fs-ms)}
.ro-bom-wrap .bom-row .q{color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.ro-bom-wrap .bom-row .n{flex:1 1 auto;min-width:0}
.ro-bom-wrap .bom-row .a{margin-left:auto;font-weight:var(--fw-bold);white-space:nowrap;font-variant-numeric:tabular-nums}
.ro-cta{display:flex;flex-direction:column;gap:.5rem}
.ro-cta .btn{width:100%}
.ro-note{color:var(--muted);font-size:var(--fs-xs);line-height:1.4;margin:.7rem 0 0}
@media (pointer:coarse){ .ro-cta .btn,.ro-bom-head{min-height:44px} }

/* ============================================================
   UX-Runde 2026-07-23 Schritt 3 (B): Seitenleisten-Akkordeon
   7 feste Gruppen (Halle · Regale hinzufügen · Planungsobjekte ·
   Automatisch planen · Bedienung & Sicherheit · Darstellung ·
   Plan & Preis), maximal EINE offen. Bestehende Karten werden nur
   UMGEHÄNGT — ihre Innen-Styles bleiben; hier nur Rahmen/Kopf +
   Neutralisierung doppelter Abstände/Trennlinien.
   Doktrin: flat, kleine Radien, Rot nur Signal. Scope bewusst
   .planer-stagewrap (NUR der Hallenplaner, kein anderes cfg-panel).
   ============================================================ */
/* Karten statt loser Blöcke: die alten border-top-Trenner ergaben mit dem 14px-Flex-gap
   doppelte Linien (Aufräumer C) — Gruppen/Kontextkarten rahmen jetzt selbst. */
.planer-stagewrap .cfg-panel > .cfg-step{border-top:0}
/* Die Panel-Spalte ist ein scrollbarer Flex-Column (overflow-y:auto, feste Höhe). OHNE
   flex-shrink:0 quetscht der Flex-Algorithmus bei Platzmangel die Akkordeon-Gruppen
   zusammen — Titel/Untertitel werden per .acc-group{overflow:hidden} abgeschnitten UND
   scrollHeight bleibt == clientHeight, also erscheint KEIN Scrollbalken (man kann nicht
   nach unten scrollen). Kinder in Natur-Höhe halten → echter Überlauf → overflow-y greift. */
.planer-stagewrap .cfg-panel > *{flex-shrink:0}
.planer-stagewrap .cfg-panel > .props-step,
.planer-stagewrap .cfg-panel > .ro-bar{border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.planer-stagewrap .cfg-panel > .ro-bar{background:var(--panel-2)}
.acc-group{padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.acc-head{display:flex;align-items:center;gap:.6rem;width:100%;min-height:48px;padding:10px 14px;
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.acc-head:hover{background:var(--panel-2)}
.acc-titles{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.acc-title{font-family:'Sora';font-weight:var(--fw-bold);font-size:var(--fs-md);line-height:1.2}
.acc-sub{color:var(--muted);font-size:var(--fs-xs);line-height:1.3}
.acc-chev{color:var(--muted);font-size:var(--fs-sm);line-height:1;transition:transform .15s ease;flex:none}
.acc-head[aria-expanded="true"] .acc-chev{transform:rotate(180deg)}
.acc-group.is-open .acc-head{border-bottom:1px solid var(--line)}
.acc-body{padding:12px 14px 14px}
.acc-body[hidden]{display:none}
/* Umgehängte Bestandskarten: Innenabstand/Trennlinie neutralisieren (die Gruppe rahmt schon). */
.acc-body .cfg-step{padding:0;border-top:0}
.acc-body .acc-hosted > .step-h{display:none}      /* Kopf doppelt den Gruppen-Titel (Halle/Regal hinzufügen) */
.acc-body .cfg-step > .step-h{margin-bottom:.5rem} /* kompakte Zwischen-Köpfe (Regale/Kennzahlen) */
.acc-body .cfg-step > .step-h .step-n{display:none}
.acc-body .cfg-step > .step-h h3{font-size:var(--fs-ms)}
.acc-body .list-step{margin-top:1rem;border-top:1px solid var(--line-2);padding-top:.8rem}
.acc-body .cfg-summary{border-top:0;background:transparent;padding:0}
.acc-body .readout-step + .cfg-summary{margin-top:1rem;border-top:1px solid var(--line-2);padding-top:.8rem}
.acc-body .view-body,.acc-body .asr-body,.acc-body .gen-body{margin-top:0}
.acc-body > .obj-pal{margin-top:0;border-top:0;padding-top:0}
/* „Belastungsschilder"-Zeile in „Bedienung & Sicherheit" (Traglast, aus den Plan-Tools umgezogen) */
.asr-signs{display:flex;flex-direction:column;gap:.4rem;border-top:1px solid var(--line-2);padding-top:.55rem}
.asr-signs .stage-btn{align-self:flex-start}
.asr-signs small{color:var(--muted);font-size:var(--fs-xs);line-height:1.4}
@media (pointer:coarse){ .asr-signs .stage-btn{min-height:44px} }