:root{--gold:#a98958;--ink:#211d18;--line:#e6dfd5;--bg:#f7f5f0;--muted:#6f685f;--wall:28px;--floorA:#d7d0c4;--floorB:#efe8dd;--wallColor:#34322e}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}
.badge{position:fixed;right:12px;bottom:12px;z-index:50;background:var(--gold);color:#fff;border-radius:999px;padding:7px 12px;font:800 12px system-ui}
.planner{min-height:1160px;border:1px solid var(--line);border-radius:26px;overflow:hidden;background:linear-gradient(#fbfaf7,#f1ece3)}
.top{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:18px 22px;background:#fff;border-bottom:1px solid var(--line)}
.brand b{display:block;font-size:24px}.brand span{display:block;color:var(--muted);font-weight:700}.top-actions{display:flex;gap:10px;flex-wrap:wrap}
button{border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);font-weight:900;padding:11px 14px;cursor:pointer}
button:hover{border-color:var(--gold);transform:translateY(-1px)}button.gold,.primary{border:0;background:var(--gold);color:#fff}.alt{background:#6b7280!important;color:#fff!important}.danger{background:#b42318!important;color:#fff!important}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:14px 18px;background:#faf8f4;border-bottom:1px solid var(--line)}
.steps button{display:flex;align-items:center;gap:10px;padding:12px}.steps b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eee4d7;color:#634c2f}
.planner[data-step="1"] .steps [data-step-btn="1"],.planner[data-step="2"] .steps [data-step-btn="2"],.planner[data-step="3"] .steps [data-step-btn="3"],.planner[data-step="4"] .steps [data-step-btn="4"],.planner[data-step="5"] .steps [data-step-btn="5"],.planner[data-step="6"] .steps [data-step-btn="6"]{background:var(--gold);color:#fff}
.planner[data-step="1"] .steps [data-step-btn="1"] b,.planner[data-step="2"] .steps [data-step-btn="2"] b,.planner[data-step="3"] .steps [data-step-btn="3"] b,.planner[data-step="4"] .steps [data-step-btn="4"] b,.planner[data-step="5"] .steps [data-step-btn="5"] b,.planner[data-step="6"] .steps [data-step-btn="6"] b{background:#fff;color:#634c2f}
.page{display:none;grid-template-columns:330px 1fr;gap:18px;padding:18px}.planner[data-step="1"] [data-page="1"],.planner[data-step="2"] [data-page="2"],.planner[data-step="3"] [data-page="3"],.planner[data-step="4"] [data-page="4"],.planner[data-step="5"] [data-page="5"],.planner[data-step="6"] [data-page="6"]{display:grid}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 34px rgba(45,38,28,.08)}.side{padding:18px}.side h2{margin:0 0 10px}.hint{margin:0 0 16px;line-height:1.5;color:var(--muted);font-weight:650}
.side label{display:grid;gap:6px;margin:12px 0;font-weight:900}.side input{border:1px solid var(--line);border-radius:12px;padding:13px 12px;font:900 18px system-ui;background:#fff}.side small{font-size:12px;color:var(--muted)}.side button{width:100%;margin:5px 0}
.workspace{min-height:760px;position:relative;overflow:hidden}.title{height:52px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;font-weight:950;color:#57452e}
.plan-wrap{position:relative;height:calc(100% - 52px);min-height:700px;display:grid;place-items:center;padding:88px 64px 64px 92px;background-image:radial-gradient(#e6dfd5 1px,transparent 1px);background-size:15px 15px}
.plan{position:relative;width:var(--planW,520px);height:var(--planH,400px);background:linear-gradient(135deg,var(--floorA),var(--floorB));border:var(--wall) solid var(--wallColor);box-shadow:0 22px 45px rgba(41,34,25,.18),inset 0 0 0 1px #fff;overflow:visible}
.plan:before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.30) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.30) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
.item{position:absolute;border:1px solid rgba(38,32,24,.35);border-radius:13px;display:grid;place-items:center;text-align:center;font:900 12px system-ui;background:linear-gradient(#fff,#ece7df);box-shadow:0 10px 22px rgba(40,34,26,.16),inset 0 1px 0 #fff;cursor:grab;user-select:none;z-index:2;overflow:hidden}
.item.selected{outline:4px solid #d6a94e;box-shadow:0 0 0 8px rgba(214,169,78,.22),0 14px 28px rgba(37,32,25,.20)}.item span{position:relative;z-index:3;background:rgba(255,255,255,.82);border-radius:999px;padding:3px 7px}
.item.door,.item.window{overflow:visible;z-index:8}.item.opening-top,.item.opening-bottom{height:calc(var(--wall) + 12px)!important}.item.opening-left,.item.opening-right{width:calc(var(--wall) + 12px)!important}
.item.opening-left span,.item.opening-right span{transform:rotate(-90deg)}.item.door{background:linear-gradient(#d6aa72,#b9874f);border-style:dashed}.item.window{background:linear-gradient(#d9f2fb,#a9d9e7);border-style:double}
.item.door:after{content:"";position:absolute;width:72px;height:72px;border:2px solid rgba(0,0,0,.35);border-left:0;border-bottom:0;border-radius:0 100% 0 0;pointer-events:none}.item.opening-top:after{left:4px;top:calc(100% - 2px)}.item.opening-bottom:after{left:4px;bottom:calc(100% - 2px);transform:scaleY(-1)}.item.opening-left:after{top:4px;left:calc(100% - 2px);transform:rotate(-90deg);transform-origin:left top}.item.opening-right:after{top:4px;right:calc(100% - 2px);transform:rotate(90deg);transform-origin:right top}
.item.wc{background:linear-gradient(180deg,#fbfaf8,#ebe6dd)}.item.wc:before{content:"";position:absolute;left:8%;top:8%;width:34%;height:84%;background:linear-gradient(180deg,#ece4d7,#cfc2b1);border-radius:8px}.item.wc:after{content:"";position:absolute;right:10%;top:18%;width:46%;height:64%;background:radial-gradient(circle at 50% 45%,#fff 0 28%,#d8d3cb 29% 48%,transparent 49%),linear-gradient(180deg,#fff,#ece8e1);border-radius:46% 46% 40% 40%;box-shadow:inset 0 0 0 2px rgba(170,165,157,.38)}
.item.sink{background:linear-gradient(180deg,#b89368,#8a6846)}.item.sink:before{content:"";position:absolute;left:10%;right:10%;top:12%;height:46%;background:linear-gradient(180deg,#fbfbfa,#ece8e2);border-radius:12px}.item.sink:after{content:"";position:absolute;left:36%;top:22%;width:28%;height:18%;background:#c5c8ca;border-radius:0 0 40% 40%;box-shadow:0 12px 0 -4px #5a5f63}
.item.shower,.item.walkin{background:linear-gradient(135deg,rgba(203,236,246,.75),rgba(241,250,252,.95));border:2px solid rgba(126,176,190,.55)}.item.shower:before,.item.walkin:before{content:"";position:absolute;inset:6px;border:2px solid rgba(255,255,255,.85);border-radius:10px}
.item.tub{background:linear-gradient(180deg,#f6f2ea,#ddd7cd)}.item.tub:before{content:"";position:absolute;inset:6px;background:radial-gradient(ellipse at center,#fff 0 54%,#d8d1c6 56% 65%,transparent 66%);border-radius:999px}
.item.heater{background:repeating-linear-gradient(90deg,#393939 0 8px,#5c5c5c 8px 11px,#2f2f2f 11px 16px);color:#fff}.item.washer{background:linear-gradient(180deg,#fafafa,#dcdcdc)}.item.mirror{background:linear-gradient(135deg,#eef5f7,#cad8dc)}
.dim{position:absolute;font:950 14px system-ui;color:#1e1b16}.dim span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 10px;box-shadow:0 6px 18px rgba(31,28,23,.08)}.dim-top{top:36px;left:50%;transform:translateX(-42%);width:var(--planW,520px);border-top:2px solid #1e1b16;text-align:center}.dim-top span{position:relative;top:-24px}.dim-left{left:32px;top:50%;transform:translateY(-42%);height:var(--planH,400px);border-left:2px solid #1e1b16;display:grid;place-items:center}.dim-left span{transform:rotate(-90deg);white-space:nowrap}
.products{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-height:390px;overflow:auto;padding-right:4px}.products button{min-height:68px}.tools,.style-box{margin-top:16px;padding:14px;border:2px solid var(--gold);border-radius:16px;background:#fffcf7}.tools h3,.style-box h3{margin:0 0 8px}.tools p{margin:0 0 8px;color:var(--muted);font-weight:750}
.swatches{display:grid;gap:8px}.swatches button{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink)}.swatches button.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,137,88,.16)}.sw{display:inline-block;width:28px;height:28px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}.sw.warm{background:linear-gradient(135deg,#e4d5c3,#c6b49e)}.sw.greige{background:linear-gradient(135deg,#d6d0c5,#b8afa3)}.sw.anthracite{background:linear-gradient(135deg,#8a857f,#4f4b48)}.sw.spa{background:linear-gradient(135deg,#eae5da,#d9cfbf)}.sw.stone{background:linear-gradient(135deg,#d7d2ca,#bdb7ac)}.sw.wood{background:linear-gradient(135deg,#c79a66,#8d643f)}
.three-wrap{min-height:820px}.webgl{position:relative;width:100%;height:calc(100% - 52px);min-height:768px;background:radial-gradient(circle at 50% 30%,#fff,#d8cbbb);overflow:hidden}.webgl canvas{display:block;width:100%!important;height:100%!important;cursor:grab}.webgl canvas:active{cursor:grabbing}.loading{position:absolute;inset:auto 18px 18px auto;background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-weight:900;z-index:2}
.summary{padding:22px;font-size:16px;line-height:1.7}.summary ul{columns:2}
@media(max-width:900px){.page{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.top{align-items:flex-start;gap:12px;flex-direction:column}.top-actions,.top-actions button{width:100%}.workspace{min-height:650px}}
@media print{.steps,.side,.top,.badge{display:none!important}.planner{border:0}.page{display:grid!important;grid-template-columns:1fr;padding:0}.workspace{box-shadow:none;border:0}.workspace:not(.three-wrap){page-break-after:always}}

/* Version 4.1 – mehr Objekte, Drag-and-drop und Papierkorb */
.products button{cursor:grab}.products button:active{cursor:grabbing}
.trash{margin:12px 0;padding:14px;border:2px dashed #b42318;border-radius:16px;background:#fff7f6;color:#8b1d14;text-align:center;font-weight:950}
.trash.drag-over{background:#ffe4e1;box-shadow:0 0 0 4px rgba(180,35,24,.14)}
.plan.drop-ready{box-shadow:0 22px 45px rgba(41,34,25,.18), inset 0 0 0 4px rgba(169,137,88,.30)}
.item.standwc,.item.bidet,.item.urinal{background:linear-gradient(180deg,#fbfaf8,#ebe6dd)}
.item.bidet:after,.item.standwc:after,.item.urinal:after{content:"";position:absolute;right:16%;top:18%;width:48%;height:58%;background:radial-gradient(circle at 50% 45%,#fff 0 35%,#d8d3cb 36% 52%,transparent 53%);border-radius:999px}
.item.doublesink,.item.smallsink,.item.vanity{background:linear-gradient(180deg,#b89368,#8a6846)}
.item.doublesink:before,.item.smallsink:before,.item.vanity:before{content:"";position:absolute;inset:12% 10% auto 10%;height:42%;background:linear-gradient(180deg,#fbfbfa,#ece8e2);border-radius:12px}
.item.doublesink:after{content:"";position:absolute;left:18%;right:18%;top:23%;height:18%;background:radial-gradient(circle at 20% 50%,#ddd 0 12%,transparent 13%),radial-gradient(circle at 80% 50%,#ddd 0 12%,transparent 13%)}
.item.shower80,.item.walkin140{background:linear-gradient(135deg,rgba(203,236,246,.75),rgba(241,250,252,.95));border:2px solid rgba(126,176,190,.55)}
.item.tub170,.item.cornerTub{background:linear-gradient(180deg,#f6f2ea,#ddd7cd)}
.item.cornerTub:before{content:"";position:absolute;inset:7px;background:radial-gradient(circle at 100% 100%,#fff 0 55%,#d8d1c6 57% 68%,transparent 69%);border-radius:12px}
.item.highcabinet{background:linear-gradient(90deg,#a98055,#c7a47c)}
.item.towelrail{background:repeating-linear-gradient(0deg,#404040 0 7px,#777 7px 10px)}
.item.mirrorcabinet{background:linear-gradient(135deg,#eef5f7,#cad8dc);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 10px 22px rgba(40,34,26,.16)}
.item.niche,.item.shelf{background:linear-gradient(135deg,#c8b9a5,#eee8dd)}
.item.plant{background:radial-gradient(circle,#6f9b65 0 35%,#8a6b49 36% 52%,transparent 53%)}

/* Version 4.2 – Dropdown statt großer Produktliste */
.product-select-box{display:grid;gap:10px;margin:12px 0 14px}
.product-select-box label{display:grid;gap:7px;font-weight:950}
.product-select-box select{width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;font:800 15px system-ui;color:var(--ink)}
.mini-hint{font-size:13px;line-height:1.4;color:var(--muted);font-weight:750;margin:0}
.products{display:none!important}

/* Version 4.3 */
.product-select-box optgroup{font-weight:950;color:#3b3328}.product-select-box option{font-weight:700;color:#211d18}