/* ELBOY Preiskalkulator — Gestaltung der Schublade (aus dem bisherigen Widget übernommen) */
#elboy-calc-widget{
  --brand:#bd332c;
  --accent:#f28c1d;
  --accent-dark:#b7630f;
  --card:#ffffff; --ink:#0d0d0d; --muted:#596273; --line:#e6e9ef; --chip:#f7f7f7; --chip-ink:#24324a;
  --site-offset:90px;
  --radius:4px; --radius-sm:2px; --radius-swatch:2px;
  font:15px/1.35 Helvetica, Arial, sans-serif; color:#0d0d0d;
}
#elboy-calc-widget *{ box-sizing:border-box }
#elboy-calc-widget .btn{background:var(--brand);border:1px solid var(--brand);color:#fff;border-radius:var(--radius);padding:8px 10px;cursor:pointer;font-weight:700;width:100%;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;letter-spacing:0;transition:none;transform:none}
#elboy-calc-widget .btn:hover{filter:brightness(.95);transform:none}
#elboy-calc-widget .btn.outline{background:#2c65ab;color:#fff;border:1px solid var(--line)}
#elboy-calc-widget .btn.block{display:block;width:100%;text-align:center}
#elboy-calc-widget .btn.soft{background:#2c65ab;border-color:#bf0d0d;color:#fff;box-shadow:4px 4px 10px #0000009e;margin-bottom:12px}
#elboy-calc-widget .btn.soft:hover{filter:brightness(.97);background:#bf0d0d;box-shadow:4px 4px 1px #0000009e}

html.elboy-lock, body.elboy-lock{ overflow:hidden !important; height:100% !important; }

/* Trigger rechts mittig */
#elboy-calc-widget #trigger{position:fixed; right:0; top:50%; --tx:0%; transform:translate(var(--tx), -50%); transition:transform .25s ease; z-index:99999; border:none; background:var(--brand); color:#fff; padding:10px 12px; border-radius:var(--radius) 0 0 var(--radius); box-shadow:-24px 0 48px rgba(0,0,0,.25); font-weight:800; letter-spacing:.3px; cursor:pointer; display:flex; align-items:center; gap:8px; will-change:transform;}
#elboy-calc-widget #trigger.hidden{ --tx:110% }
#elboy-calc-widget #trigger span.label{writing-mode:vertical-rl;text-orientation:mixed}
#elboy-calc-widget #trigger svg{width:20px;height:20px}

/* Backdrop + Drawer */
#elboy-calc-widget #backdrop{position:fixed; top:var(--site-offset); left:0; right:0; bottom:0; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:99990}
#elboy-calc-widget #backdrop.open{opacity:1; pointer-events:auto}
#elboy-calc-widget #drawer{position:fixed; top:var(--site-offset); right:0; bottom:0; width:min(920px,96vw); background:#fff; transform:translateX(100%); transition:transform .3s ease; z-index:99998; overflow:auto; border-left:0; box-shadow:-24px 0 48px rgba(0,0,0,.25);}
#elboy-calc-widget #drawer.open{transform:translateX(0)}
#elboy-calc-widget .topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;padding:8px 12px;background:#2c65ab;color:#fff;border-bottom:1px solid var(--brand)}
#elboy-calc-widget .topbar h1{margin:0}
#elboy-calc-widget .close-btn{border:none;background:transparent;color:#fff;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius);cursor:pointer}
#elboy-calc-widget .brand{display:flex;align-items:center;gap:12px;margin-left:auto;color:#fff}
#elboy-calc-widget .brand img{height:30px;max-width:180px;object-fit:contain}
#elboy-calc-widget .badge{font-size:.85rem}

/* Layout */
#elboy-calc-widget .layout{display:grid;grid-template-columns:260px 1fr;gap:14px;max-width:1100px;margin:0 auto;padding:12px}
#elboy-calc-widget .sidebar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;position:sticky;top:60px;align-self:start;max-height:calc(100vh - var(--site-offset) - 34px);overflow:auto}
#elboy-calc-widget .steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
#elboy-calc-widget .steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:normal}
#elboy-calc-widget .steps .n{width:28px;height:28px;border-radius:1%;display:grid;place-items:center;background:#2c65ab;color:#fff;font-weight:100}
#elboy-calc-widget .steps h3{margin:0;font-size:18px;font-weight:100}
#elboy-calc-widget .steps p{margin:0;color:#6b7280;font-size:.8rem}
#elboy-calc-widget .powered{position:sticky;bottom:0;margin-top:18px;padding-top:12px;border-top:1px dashed var(--line);background:#fff}
#elboy-calc-widget .powered a{display:flex;align-items:center;gap:8px;color:#111;text-decoration:none}
#elboy-calc-widget .soul-logo{width:30px;height:30px;object-fit:contain}

#elboy-calc-widget .main{min-width:0}
#elboy-calc-widget .filters{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px}
#elboy-calc-widget .chip-group{display:flex;flex-wrap:wrap;gap:8px}
#elboy-calc-widget .chip{background:var(--chip);color:var(--chip-ink);border:1px solid var(--line);padding:6px 10px;border-radius:4px;font-size:.8rem;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
#elboy-calc-widget .chip.active{background:#2c65ab;color:#fff;border-color:#2c65ab}
#elboy-calc-widget .chip svg{width:16px;height:16px}
#elboy-calc-widget .search{width:100%;padding:8px 10px;border-radius:var(--radius);border:1px solid var(--line);font-size:.95rem}

/* Liste */
#elboy-calc-widget #grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:0}
#elboy-calc-widget .card{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid #eef2f7;background:transparent;cursor:pointer;transition:background .15s ease;border-radius:0;box-shadow:none}
#elboy-calc-widget .card:hover{background:#f7f9fc;border-color:#eef2f7;box-shadow:none}
#elboy-calc-widget .thumb{width:72px;height:72px;display:grid;place-items:center}
#elboy-calc-widget .thumb svg{width:62px;height:62px}
#elboy-calc-widget .thumb img{width:62px;height:62px;object-fit:contain;display:block}
#elboy-calc-widget .title{font-weight:100}
#elboy-calc-widget .sub{color:#6b7280;font-size:.8rem;margin-top:2px}

/* Formular */
#elboy-calc-widget .form{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px}
#elboy-calc-widget .form h2{font-size:1.3rem;margin:0 0 12px}
#elboy-calc-widget .form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:980px){#elboy-calc-widget .layout{grid-template-columns:220px 1fr} #elboy-calc-widget #grid{grid-template-columns:1fr} #elboy-calc-widget .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){#elboy-calc-widget .layout{grid-template-columns:1fr} #elboy-calc-widget .sidebar{position:static;max-height:none}}
@media (max-width:520px){#elboy-calc-widget .form-grid{grid-template-columns:1fr}}
#elboy-calc-widget .form-grid .full{grid-column:1 / -1}
#elboy-calc-widget label{display:block;font-size:.8rem;color:#333;margin-bottom:3px}
#elboy-calc-widget input,#elboy-calc-widget select,#elboy-calc-widget textarea{width:100%;padding:8px 10px;border-radius:var(--radius);border:1px solid #ccc;font-size:.95rem;background:#fff;font-family:inherit}
#elboy-calc-widget input[type=checkbox]{width:auto}
#elboy-calc-widget textarea{resize:vertical}
#elboy-calc-widget .inline{display:flex;gap:8px;align-items:center}
#elboy-calc-widget .badge-color{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.9rem}
#elboy-calc-widget .badge-color::before{content:'';width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.15);background:var(--col,#444)}
#elboy-calc-widget .price{font-size:1.4rem;font-weight:800}
#elboy-calc-widget .ral-group{display:flex;flex-direction:column;gap:8px}
#elboy-calc-widget .req{ color:#bd332c; margin-left:4px; }

/* Formular-Vorschau rechts */
#elboy-calc-widget .form-grid .visual{grid-column:3 / -1; grid-row:1 / span 6}
@media (max-width:980px){#elboy-calc-widget .form-grid .visual{grid-column:1 / -1; grid-row:auto}}
#elboy-calc-widget .sel-visual{border:1px solid var(--line);border-radius:var(--radius);background:#f5f7fb;padding:10px;display:flex;flex-direction:column;gap:8px}
#elboy-calc-widget .sel-visual .img{height:auto;display:grid;place-items:center;background:linear-gradient(#fff,#eef2f7);border:1px dashed #d7dde7;border-radius:8px;overflow:hidden}
#elboy-calc-widget .sel-visual .img img,
#elboy-calc-widget .sel-visual .img svg{width:100%;height:auto;object-fit:contain;display:block}
#elboy-calc-widget .sel-visual .cap{font-size:.8rem;color:#6b7280}

/* Modal (RAL & Vorschau) */
#elboy-calc-widget .modal{position:fixed;inset:0;z-index:100000;display:flex}
#elboy-calc-widget .modal[hidden]{display:none}
#elboy-calc-widget .modal .mask{position:absolute;inset:0;background:rgba(0,0,0,.72)}
#elboy-calc-widget .modal .dlg{position:absolute; left:0; right:0; top:4.5rem; bottom:auto; margin:0 auto 2rem auto; width:min(1040px,94vw); background:#fff; border-radius:var(--radius); display:flex; flex-direction:column; box-shadow:0 32px 72px rgba(0,0,0,.45); max-height:calc(100vh - 8rem); overflow:auto}
#elboy-calc-widget .modal header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
#elboy-calc-widget .modal header h3{margin:0;font-size:18px;font-weight:100}
#elboy-calc-widget .modal header .btn{width:auto}
#elboy-calc-widget .modal .body{padding:10px 12px}

#elboy-calc-widget .modal .dlg.centered{ top:50%; transform:translateY(-50%); width:min(720px,92vw) }
#elboy-calc-widget .result-ok{border-left:6px solid #2e7d32;background:#f0f8f1;padding:10px 12px;border-radius:6px;margin-top:8px}
#elboy-calc-widget .result-err{border-left:6px solid #c62828;background:#fff2f2;padding:10px 12px;border-radius:6px;margin-top:8px}


/* Swatches */
#elboy-calc-widget button.sw{all:unset; display:flex; flex-direction:column; width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.06)}
#elboy-calc-widget .sw .box{ position:relative; height:96px; display:block }
#elboy-calc-widget .sw .cap{ position:absolute; left:0; right:0; bottom:0; padding:8px 10px; display:flex; align-items:baseline; gap:10px; background:rgba(0,0,0,.38); color:#fff !important; text-shadow:0 1px 1px rgba(0,0,0,.35)}
#elboy-calc-widget .sw .cap .cd{font-weight:800;font-size:.95rem;letter-spacing:.2px}
#elboy-calc-widget .sw .cap .nm{font-weight:600;font-size:.85rem;opacity:.95}
#elboy-calc-widget .sw:hover .box{filter:brightness(.98)}
#elboy-calc-widget .sw.active{outline:2px solid var(--brand);outline-offset:0}


/* Scene + BG */
#elboy-calc-widget .scene{position:relative;height:260px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#eef1f6;margin-top:6px;touch-action:none; isolation:isolate; contain:paint;}
#elboy-calc-widget .scene .bg{position:absolute;inset:0;z-index:0;background:var(--bg-img, none) center/var(--bg-fit,cover) no-repeat}
#elboy-calc-widget .scene .gl{position:absolute;inset:0;z-index:1; transform:translateZ(0); -webkit-transform:translateZ(0); transform-style:preserve-3d; will-change:transform;}
#elboy-calc-widget .scene .gl canvas{position:absolute; inset:0; transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform; backface-visibility:hidden; -webkit-backface-visibility:hidden}



@media (max-width:640px){ #elboy-calc-widget .scene{height:240px} }




/* ===== 3D-Vorschau im Vollbild ===== */
html.elboy-pv-open, html.elboy-pv-open body{overflow:hidden !important}
#elboy-calc-widget .pv-full{position:fixed;inset:0;z-index:100002;background:#0f1417;display:flex;flex-direction:column;color:#0d0d0d}
#elboy-calc-widget .pv-full[hidden]{display:none}
#elboy-calc-widget .pv-top{display:flex;align-items:center;gap:12px;padding:8px 14px;background:#1c272a;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);flex:0 0 auto;flex-wrap:wrap}
#elboy-calc-widget .pv-top strong{font-size:1.05rem;font-weight:700;letter-spacing:.02em}
#elboy-calc-widget .pv-top .badge-color{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
#elboy-calc-widget .pv-hint{color:rgba(255,255,255,.7);font-size:.8rem;margin-left:auto}
#elboy-calc-widget .pv-top .btn{width:auto;padding:8px 16px}
#elboy-calc-widget .pv-top .btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
#elboy-calc-widget .pv-body{flex:1 1 auto;display:flex;min-height:0}
#elboy-calc-widget .pv-scene{flex:1 1 auto;height:auto;min-height:0;margin:0;border:0;border-radius:0;background:#e8ecf1}
#elboy-calc-widget .pv-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#596273;font-size:.95rem;z-index:2}
#elboy-calc-widget .pv-panel{flex:0 0 380px;width:380px;background:#fff;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
#elboy-calc-widget .pv-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);flex:0 0 auto}
#elboy-calc-widget .pv-tabs button{border:0;background:#f4f6f9;padding:12px 4px;font-size:.82rem;font-weight:700;color:#596273;cursor:pointer;border-bottom:3px solid transparent}
#elboy-calc-widget .pv-tabs button.active{background:#fff;color:#2c65ab;border-bottom-color:#2c65ab}
#elboy-calc-widget .pv-panes{flex:1 1 auto;overflow:auto;padding:12px;-webkit-overflow-scrolling:touch}
#elboy-calc-widget .pv-panes [data-pane][hidden]{display:none}
#elboy-calc-widget .pv-panes label{margin-top:10px}
#elboy-calc-widget .pv-panes .note{color:#666;font-size:.8rem;margin:10px 0 0}
#elboy-calc-widget .pv-panes .btn{width:100%;margin-top:8px}
#elboy-calc-widget .pv-panes .btn.outline{background:#fff;color:#0d0d0d;border:1px solid #c9ced6}
#elboy-calc-widget .pv-objgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#elboy-calc-widget .pv-obj{border:1px solid var(--line);background:#f7f8fa;border-radius:6px;padding:12px 8px;font-size:.88rem;font-weight:600;color:#24324a;cursor:pointer;text-align:center}
#elboy-calc-widget .pv-obj:hover{background:#eef3fa}
#elboy-calc-widget .pv-obj.active{background:#2c65ab;border-color:#2c65ab;color:#fff}
#elboy-calc-widget .pv-upload{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
#elboy-calc-widget #pvGroups{margin-bottom:8px}
#elboy-calc-widget #pvRalSearch{margin-bottom:10px}
#elboy-calc-widget .pv-ralgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#elboy-calc-widget .pv-ralgrid .sw .box{height:64px}
#elboy-calc-widget .pv-ralgrid .sw .cap{padding:5px 8px;gap:6px;flex-wrap:wrap}
#elboy-calc-widget .pv-ralgrid .sw .cap .cd{font-size:.82rem}
#elboy-calc-widget .pv-ralgrid .sw .cap .nm{font-size:.74rem}
@media (max-width:820px){
  #elboy-calc-widget .pv-body{flex-direction:column}
  #elboy-calc-widget .pv-scene{flex:0 0 46vh;height:46vh}
  #elboy-calc-widget .pv-panel{flex:1 1 auto;width:100%;border-left:0;border-top:1px solid var(--line)}
  #elboy-calc-widget .pv-hint{display:none}
  #elboy-calc-widget .pv-top{padding:8px 10px;gap:8px}
  #elboy-calc-widget .pv-top .badge-color{font-size:.78rem;padding:4px 8px}
  #elboy-calc-widget .pv-top .btn{padding:7px 10px;font-size:.85rem}
}

/* ===== Schublade: volle Hoehe und Breite, Inhalt mittig auf 1240 px ===== */
#elboy-calc-widget{--site-offset:0px}
#elboy-calc-widget #backdrop{top:0}
#elboy-calc-widget #drawer{top:0;bottom:0;right:0;width:100vw;max-width:100vw;box-shadow:none}
#elboy-calc-widget #drawer .topbar{margin-top:0;padding:12px clamp(16px,3vw,40px);gap:14px;min-height:64px}
#elboy-calc-widget .topbar-title{font-size:1.05rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff}
#elboy-calc-widget .close-btn{width:40px;height:40px;background:rgba(255,255,255,.12)}
#elboy-calc-widget .close-btn:hover{background:rgba(255,255,255,.22)}
#elboy-calc-widget .layout{max-width:1240px;padding:26px clamp(16px,3vw,40px) 48px;gap:24px;grid-template-columns:300px 1fr}
#elboy-calc-widget .sidebar{top:88px;max-height:calc(100vh - 112px);padding:16px}
#elboy-calc-widget .steps{gap:18px}
#elboy-calc-widget .filters{padding:14px}
#elboy-calc-widget .form{padding:18px;margin-top:22px}
@media (max-width:980px){#elboy-calc-widget .layout{grid-template-columns:260px 1fr}}
@media (max-width:820px){#elboy-calc-widget .layout{grid-template-columns:1fr;padding:12px 12px 40px}#elboy-calc-widget #drawer .topbar{min-height:56px}}

/* ===== Aufteilung: links 40 px Rand, Beschreibung | 20 px | Teile, rechts 40 px Rand ===== */
#elboy-calc-widget .layout{max-width:none;margin:0;padding:24px 40px 48px;gap:20px;grid-template-columns:340px minmax(0,1fr)}
#elboy-calc-widget .filters{padding:16px 20px}
#elboy-calc-widget #grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;margin-top:6px}
#elboy-calc-widget .card{padding:14px 8px}
#elboy-calc-widget .powered a{align-items:center}
#elboy-calc-widget .soul-logo{width:34px;height:34px}
@media (max-width:1280px){#elboy-calc-widget #grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){#elboy-calc-widget .layout{grid-template-columns:280px minmax(0,1fr);padding:20px 24px 40px}}
@media (max-width:820px){#elboy-calc-widget .layout{grid-template-columns:1fr;padding:12px 12px 40px}#elboy-calc-widget #grid{grid-template-columns:1fr}}