*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(ellipse at 50% 0%,#18435a,#071929 75%);color:#e5faff;font:14px/1.5 system-ui,-apple-system,sans-serif}.shell{max-width:1170px;padding:14px 16px 35px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}header h1{margin:0;font-size:24px;letter-spacing:-.035em}header p{margin:3px 0;color:#9dbdcd;font-size:12px}.back{color:#c4f6ff;padding:8px 12px;background:#12344a;border:1px solid #33647b;border-radius:9px;text-decoration:none;font-size:12px;font-weight:750}#liveStatus{font-size:12px;color:#a8e5d0;background:#143c3d;border:1px solid #2b766f;border-radius:30px;padding:8px 12px}#liveStatus.warn{color:#ffd2b0;background:#493228;border-color:#a87350}.controls{display:flex;gap:8px;flex-wrap:wrap;background:#102b3e;border:1px solid #31566e;border-radius:14px;padding:10px;margin-top:15px}.controls button{appearance:none;min-height:43px;padding:10px 15px;background:#16425b;color:#e3f6ff;border:1px solid #34627a;border-radius:11px;font:750 12px system-ui;cursor:pointer;touch-action:manipulation}.controls button[aria-pressed=true]{background:#086c8e;border-color:#7de8f4;color:white}.controls button:focus-visible,.pin:focus-visible{outline:2px solid #baffff;outline-offset:3px}.controls #reload{margin-left:auto}.tip{font-size:12px;color:#a7c6d6;line-height:1.6;margin:13px 2px}.floors{display:grid;grid-template-columns:1fr;gap:15px}.floors.both{grid-template-columns:repeat(2,minmax(0,1fr))}.floor{overflow:hidden;border:1px solid #38627a;border-radius:15px;background:#0b2a3f;min-width:0;box-shadow:0 16px 28px #0003}.floor[hidden]{display:none!important}.floor h2{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:0;padding:10px 13px;font-size:15px;border-bottom:1px solid #345b73}.floor h2 small{font-size:10px;color:#a9c4d0;text-align:right;font-weight:500}.plan{position:relative;line-height:0}.plan>img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}.pins{position:absolute;inset:0}.pin{position:absolute;z-index:2;transform:translate(-50%,-50%);min-width:54px;max-width:28%;padding:5px;border:1px solid #69b8d4;border-radius:9px;color:#e5fbff;background:#05273bdc;text-align:center;box-shadow:0 5px 18px #0007;line-height:1.25;cursor:pointer;touch-action:manipulation}.pin small{display:block;font:720 9px system-ui;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pin strong{display:block;margin-top:3px;font:850 11px system-ui;font-variant-numeric:tabular-nums;white-space:nowrap}.pin[aria-pressed=true]{z-index:4;background:#0a6983;border-color:#b5fbff;box-shadow:0 0 0 2px #21c1e978}.pin.open{background:#6b301ef0;border-color:#ffad85}.pin.unknown{border-style:dashed;opacity:.85}.details{margin-top:15px;padding:17px;border:1px solid #386980;border-radius:15px;background:#103147}.eyebrow{margin:0;color:#94c8d9;text-transform:uppercase;font-size:10px;letter-spacing:.1em;font-weight:800}.details h2{margin:5px 0;font-size:22px}.details>p{font-size:12px;color:#b4cbd7}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.stat{background:#163e53;border:1px solid #365c73;border-radius:11px;padding:12px}.stat small{display:block;font-size:11px;color:#9ebfcf}.stat b{display:block;font-size:18px;margin-top:4px;font-variant-numeric:tabular-nums}.sensors{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.sensor{border:1px solid #345d72;background:#0b2b41;border-radius:9px;color:#d7eaf3;font-size:11px;padding:7px 9px}footer{font-size:11px;color:#94b1c3;margin-top:18px}footer a{color:#8eecf9}@media(max-width:800px){.floors.both{grid-template-columns:1fr}}@media(max-width:500px){.shell{padding:8px 9px 28px}header h1{font-size:19px}.back{order:3;width:100%;text-align:center}.controls{padding:8px}.controls button{flex:1;min-width:60px;padding:9px 6px}.controls #reload{flex-basis:100%}.pin{min-width:39px;max-width:29%;padding:3px;border-radius:7px}.pin small{font-size:8px}.pin strong{font-size:9px}.floor h2{font-size:13px}.floor h2 small{font-size:9px}.details{padding:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Live doorkijkmodus: originele grond + bovenlaag (afbeelding met alleen de
   buitenste witte achtergrond transparant). Geen nieuwe muren of kamers. */
.xray{margin:0 0 17px;border:1px solid #3d6f87;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#0a2c43,#081d30);box-shadow:0 14px 32px #0004}
.xray[hidden]{display:none!important}
.xray-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;border-bottom:1px solid #34566d}
.xray-head strong{font-size:16px;letter-spacing:-.02em;color:#e1fbff}
.xray-head small{font-size:10px;color:#a7c6d8;text-align:right}
.xray-tool{display:grid;gap:8px;padding:14px 16px 12px;background:#12364b}
.xray-tool label{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;font-weight:760}
.xray-tool output{font-variant-numeric:tabular-nums;font-size:15px;color:#91f3fa;font-weight:850}
.xray-tool input[type=range]{display:block;width:100%;height:26px;margin:0;accent-color:#47d5e7;cursor:pointer;touch-action:pan-x}
.xray-range-labels{display:flex;justify-content:space-between;gap:8px;color:#9bbaca;font-size:10px}
.xray-sensor-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
.xray-sensor-buttons button{border:1px solid #457084;border-radius:10px;background:#0a273b;color:#d8f4fc;min-height:38px;padding:7px 12px;font:750 12px system-ui;cursor:pointer;touch-action:manipulation}
.xray-sensor-buttons button[aria-pressed=true]{background:#11718b;border-color:#75e5f0;color:white}
.xray-canvas-outer{padding:13px 14px 4px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#204059,#061b2b)}
.xray-stage{position:relative;width:min(100%,660px);aspect-ratio:1086 / 1448;overflow:hidden;background:#f6f7f5;border:1px solid #7f99a5;border-radius:13px;isolation:isolate;box-shadow:0 12px 35px #0008}
.xray-stage>img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.xray-stage>.xray-ground{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:1}
.xray-stage>.xray-upper{position:absolute;z-index:2;left:11%;top:25%;width:78%;height:auto;opacity:var(--xray-upper-opacity,.55);transition:opacity 80ms linear;will-change:opacity;transform:translateZ(0)}
.xray-stage .xray-pins{z-index:4}
.xray-stage .xray-pins[hidden]{display:none!important}
.xray-stage .pin{min-width:44px;max-width:25%;background:#082d46e7;white-space:normal}
.xray-stage .pin small{font-size:9px}
.xray-stage .pin strong{font-size:10px}
.xray-disclaimer{padding:0 16px 14px;color:#9dbece;font-size:11px;line-height:1.6}
.floors.is-xray{display:none!important}
@media(max-width:560px){.xray-head{align-items:start;flex-direction:column;gap:2px}.xray-tool{padding:12px}.xray-canvas-outer{padding:8px 6px 0}.xray-stage{border-radius:8px}.xray-stage .pin{min-width:35px;max-width:23%;padding:3px}.xray-stage .pin small{font-size:7px}.xray-stage .pin strong{font-size:8px}.xray-sensor-buttons button{flex:1;font-size:11px;min-height:43px}.xray-disclaimer{font-size:10px}}
@media(prefers-reduced-motion:reduce){.xray-stage>.xray-upper{transition:none}}

/* 360° 3D rotatie van de bestaande bronbeelden; geen fictieve kamers. */
.spin{overflow:hidden;margin:0 0 17px;background:#092137;border:1px solid #396c82;border-radius:16px;box-shadow:0 12px 32px #0005}
.spin[hidden]{display:none!important}
.spin-head{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid #2d5369}
.spin-head strong{font-size:16px;color:#d9fbff}
.spin-head small{font-size:11px;color:#a2c7d8;text-align:right}
.spin-controls{display:grid;gap:8px;padding:12px 16px;background:linear-gradient(150deg,#143b50,#0b2b40)}
.spin-controls label{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12px;font-weight:800}
.spin-controls output{font-variant-numeric:tabular-nums;font-size:15px;color:#87f2fb}
.spin-controls input[type=range]{display:block;width:100%;height:27px;margin:0;accent-color:#56d6ed;cursor:pointer;touch-action:pan-x}
.spin-directions{display:flex;justify-content:space-between;color:#9cbdce;font-size:9px;gap:3px}
.spin-range-labels{display:flex;justify-content:space-between;gap:8px;color:#a4c6d5;font-size:10px}
.spin-control-row{display:flex;flex-wrap:wrap;gap:8px;margin:3px 0}
.spin-control-row button{flex:1;min-width:98px;min-height:41px;padding:8px 12px;border-radius:11px;background:#103449;color:#dff8ff;border:1px solid #47738a;font:750 12px system-ui;cursor:pointer;touch-action:manipulation}
.spin-control-row button[aria-pressed=true]{border-color:#80e7f5;background:#126b86;color:white}
.spin-viewport{position:relative;height:clamp(380px,60vw,680px);overflow:hidden;perspective:1040px;perspective-origin:50% 46%;background:
 radial-gradient(ellipse at 50% 78%,rgba(85,136,160,.22),transparent 55%),
 radial-gradient(ellipse at 48% 20%,#27516a 0%,#112d46 48%,#07192b 100%);
 isolation:isolate;touch-action:none;cursor:grab;user-select:none}
.spin-viewport.is-dragging{cursor:grabbing}
.spin-viewport:focus-visible{outline:3px solid #98f3ff;outline-offset:-5px}
.spin-viewport::before{content:"";position:absolute;left:12%;right:12%;bottom:8%;height:18%;border-radius:50%;background:#031522b5;filter:blur(23px);pointer-events:none}
.spin-orbit{position:absolute;left:50%;top:49%;width:320px;height:427px;transform-style:preserve-3d;
 transform:translate(-50%,-50%) rotateX(-55deg) rotateY(var(--spin-yaw,0deg));
 transition:transform .24s ease;pointer-events:none;scale:1.40}
.spin-viewport.is-dragging .spin-orbit{transition:none}
.spin-plane{position:absolute;left:50%;top:50%;transform-style:preserve-3d;isolation:isolate;
 overflow:visible;pointer-events:none;backface-visibility:visible}
.spin-plane>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;
 pointer-events:none;-webkit-user-drag:none;user-select:none;
 filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));backface-visibility:visible}
.spin-plane-ground{width:320px;height:427px;transform:translate(-50%,-50%) translateY(59px) rotateX(90deg)}
.spin-plane-upper{width:250px;height:312px;
 transform:translate(-50%,-50%) translateY(-38px) translateZ(47px) rotateX(90deg);
 opacity:var(--spin-upper-opacity,.75)}
.spin-edge{position:absolute;left:50%;top:50%;transform-style:preserve-3d;pointer-events:none;
 border:1px solid rgba(166,216,232,.42);
 background:linear-gradient(180deg,rgba(166,205,220,.28),rgba(21,61,79,.10));
 box-shadow:0 0 9px rgba(26,109,141,.16);backface-visibility:visible}
.spin-edge-ground-front{width:320px;height:10px;transform:translate(-50%,-50%) translateY(64px) translateZ(214px)}
.spin-edge-ground-side{width:427px;height:10px;transform:translate(-50%,-50%) translateX(160px) translateY(64px) rotateY(90deg)}
.spin-edge-upper-front{width:250px;height:84px;transform:translate(-50%,-50%) translateY(11px) translateZ(203px);opacity:var(--spin-upper-opacity,.75)}
.spin-edge-upper-side{width:312px;height:84px;transform:translate(-50%,-50%) translateX(125px) translateY(11px) translateZ(47px) rotateY(90deg);opacity:var(--spin-upper-opacity,.75)}
.spin-plane .spin-pins{position:absolute;inset:0;z-index:2;pointer-events:none}
.spin-plane .spin-pins[hidden]{display:none!important}
.spin-plane .spin-pins .pin{pointer-events:auto;min-width:40px;max-width:33%;padding:4px 5px;
 font-size:9px;background:#082d46ed;border:1px solid #6bd7ed;cursor:pointer}
.spin-plane .spin-pins .pin small{font-size:8px}
.spin-plane .spin-pins .pin strong{font-size:9px}
.spin-compass{position:absolute;left:14px;bottom:13px;padding:6px 10px;border:1px solid #49788e;
 border-radius:9px;color:#cdfbff;background:#09283de8;font-size:11px;font-weight:750;pointer-events:none}
.spin-footnote{margin:0;padding:11px 15px 15px;color:#a1c1d0;font-size:11px;line-height:1.6}
@media(max-width:600px){.spin-head{flex-direction:column;align-items:start;gap:2px}
 .spin-head small{text-align:left}.spin-controls{padding:10px 12px}
 .spin-directions{font-size:8px}.spin-directions span:nth-child(2),
 .spin-directions span:nth-child(4){display:none}
 .spin-viewport{height:420px;perspective:820px}
 .spin-orbit{scale:.88}
 .spin-plane .spin-pins .pin{min-width:32px;padding:3px}
 .spin-plane .spin-pins .pin small{font-size:7px}
 .spin-plane .spin-pins .pin strong{font-size:8px}
 .spin-footnote{font-size:10px}
}
@media(max-width:390px){.spin-orbit{scale:.7}.spin-viewport{height:365px}}
@media(prefers-reduced-motion:reduce){.spin-orbit{transition:none!important}}

/* iPhone: vijf weergaveknoppen in nette rijen, zonder zijwaarts scrollen. */
@media(max-width:600px) {
  .shell{min-width:0;overflow-x:clip}
  .controls{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;min-width:0}
  .controls button{min-width:0!important;width:100%;flex:none!important;padding:10px 5px!important;font-size:11px!important;white-space:normal;line-height:1.2}
  .controls button#reload{grid-column:1/-1;margin-left:0}
  .spin{min-width:0;max-width:100%}
  .spin-control-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .spin-control-row button{width:100%;min-width:0!important;flex:none!important;padding:9px 4px;font-size:11px}
  .spin-control-row[role=group]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Extra bediening in dezelfde draaibare woning: verdieping verbergen en van onder kijken */
.spin-level-controls{margin:3px 0 0;padding:10px;border:1px solid #47748a;border-radius:12px;background:#092c41;min-width:0}
.spin-level-controls legend{padding:0 6px;font-size:12px;font-weight:850;color:#d7f9ff}
.spin-level-controls small{display:block;margin:7px 1px 1px;color:#b0cfdb;font-size:11px;line-height:1.45}
.spin-level-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.spin-level-buttons button{min-width:0;min-height:44px;padding:8px 6px;border:1px solid #517c90;border-radius:9px;background:#143d53;color:#e2f9ff;font:800 12px system-ui;cursor:pointer;touch-action:manipulation}
.spin-level-buttons button[aria-pressed=true]{background:#13768d;color:#fff;border-color:#8bf5fc;box-shadow:inset 0 0 0 1px #5fd7e9}
.spin-level-buttons button:focus-visible,.spin-angle-presets button:focus-visible{outline:2px solid #baffff;outline-offset:2px}
.spin-plane[hidden],.spin-edge[hidden]{display:none!important;visibility:hidden!important}
.spin-plane-ground{pointer-events:auto;cursor:pointer}
.spin-plane-ground .spin-pins{pointer-events:none}
.spin-plane-upper .spin-pins{pointer-events:none}
.spin-control-row.spin-angle-presets{margin:0}
.spin-control-row.spin-angle-presets button{min-width:0}
@media(max-width:600px){
 .spin-level-controls{padding:9px 7px}
 .spin-level-controls small{font-size:10px}
 .spin-level-buttons{gap:6px}
 .spin-level-buttons button{font-size:11px}
 .spin-angle-presets button{font-size:10px!important}
 .spin-control-row.spin-angle-presets{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Side cross-section: from the actual CHIEL floor images and existing room pins.
 * Section track is a relative longitudinal view, not an invented wall drawing. */
.spin.is-section .spin-controls{display:none!important}
.spin.is-section .spin-head{background:linear-gradient(90deg,#11364b,#0b2a42)}
.spin.is-section .spin-viewport{height:clamp(390px,52vw,600px);perspective:930px}
.spin.is-section .spin-orbit{scale:1.36}
.spin.is-section .spin-edge{border-color:rgba(113,222,234,.65);background:linear-gradient(180deg,rgba(164,225,237,.25),rgba(15,77,101,.09))}
.section-controls{display:grid;gap:11px;padding:12px 15px;background:#133b50;border-bottom:1px solid #44788d}
.section-controls[hidden],.section-stack[hidden]{display:none!important}
.section-intro{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.section-intro strong{color:#e5fcff;font-size:14px}
.section-intro span{color:#a8c9d8;font-size:11px}
.section-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.section-sides button{min-height:43px;border-radius:11px;padding:9px;background:#0d3045;color:#e0f6fb;border:1px solid #42778b;font:800 12px system-ui;cursor:pointer;touch-action:manipulation}
.section-sides button[aria-pressed=true]{background:#0a758b;border-color:#8eeefa;color:#fff}
.section-sides button:focus-visible,.section-pin:focus-visible{outline:3px solid #9cfcff;outline-offset:2px}
.section-control-link{display:inline-flex;align-items:center;justify-content:center;min-height:43px;width:100%;padding:8px 13px;border:1px solid #7ed3d5;border-radius:11px;background:#104e56;color:#ecffff;font-weight:800;font-size:12px;text-decoration:none}
.section-stack{margin:0;padding:13px 12px 5px;background:linear-gradient(145deg,#091d30,#0b2a40);border-top:1px solid #396d85}
.section-stack-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.section-stack-head strong{font-size:15px;color:#d6faff}
.section-stack-head small{font-size:10px;color:#a4bece;text-align:right}
.section-stack-art{position:relative;padding:2px 0 0 0;border-radius:13px;background:radial-gradient(ellipse at 45% 90%,#123b55,#091c2b);overflow:hidden;border:1px solid #29566f}
.section-roofline{height:20px;margin:0 20% 0 2%;border-bottom:2px dashed #8bc7cd80;display:flex;justify-content:center;align-items:center}
.section-roofline span{font-size:9px;color:#98b6c6;background:#0b293f;padding:0 6px}
.section-upper-floor,.section-lower-floor{position:relative;isolation:isolate;margin-left:2%;background:linear-gradient(180deg,#244e63dd 0%,#173b52e8 100%);border:1px solid #83bed299;border-bottom:5px solid #8cb0b5;box-shadow:0 6px 12px #0004}
.section-upper-floor{height:137px;width:77%;border-radius:5px 5px 0 0}
.section-lower-floor{width:96%;height:158px;margin-top:8px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#154054,#123245 100%)}
.section-floor-info{position:absolute;top:4px;left:8px;right:7px;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none}
.section-floor-info strong{font-size:10px;color:#c9edfa;text-transform:uppercase;letter-spacing:.05em}
.section-floor-info small{font-size:9px;color:#a4c6d4}
.section-room-track{position:absolute;inset:27px 14px 11px 14px}
.section-pin{position:absolute;min-width:44px;max-width:29%;min-height:34px;padding:3px 6px;border-radius:9px;border:1px solid #70c2d7;background:#062b44ee;box-shadow:0 4px 11px #0008;color:#effdff;font:800 10px system-ui;cursor:pointer;transform:translate(-50%,-50%);z-index:2;text-align:center;touch-action:manipulation}
.section-pin small{display:block;white-space:nowrap;max-width:100%;text-overflow:ellipsis;overflow:hidden;font-size:9px;font-weight:750}
.section-pin strong{display:block;margin-top:2px;white-space:nowrap;font:850 10px system-ui;font-variant-numeric:tabular-nums;color:#9ceeff}
.section-pin.open{background:#663022ee;border-color:#ffac78}
.section-pin.open strong{color:#ffe1aa}
.section-pin.unknown{border-style:dashed;opacity:.8}
.section-pin[aria-pressed=true]{outline:2px solid #91f8f9;outline-offset:1px;z-index:4}
.section-extension{position:absolute;top:7px;bottom:6px;right:1%;width:23%;border-left:2px dashed #c8f7ff80;display:flex;align-items:flex-end;justify-content:center;color:#b8dfec;text-shadow:0 2px 3px #000a;pointer-events:none;font-size:11px;font-weight:800;padding-bottom:10px;z-index:0}
.section-foundation{height:10px;margin:0 1% 0 2%;border:1px solid #647e8c;background:repeating-linear-gradient(90deg,#3b5361 0 16px,#637b84 16px 18px);box-shadow:0 3px 12px #0007}
.section-orientation{display:flex;justify-content:space-between;padding:6px 13px 9px;color:#aad6e2;font-size:11px}
.section-stack-note{font-size:11px;color:#a9c9d7;line-height:1.65;padding:6px 3px;margin:5px 0 8px}
.room-control-shortcut{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;border-top:1px solid #3d6476;padding-top:11px;flex-wrap:wrap}
.room-control-shortcut a{display:inline-flex;justify-content:center;align-items:center;min-height:43px;padding:8px 12px;background:#0c6074;border:1px solid #7cdae4;border-radius:10px;color:#edffff;font-weight:800;font-size:12px;text-decoration:none}
.room-control-shortcut small{font-size:10px;color:#acc9d9}
@media(max-width:580px){
  .spin.is-section .spin-viewport{height:420px}
  .spin.is-section .spin-orbit{scale:.90}
  .section-controls{padding:10px 11px}
  .section-intro span{font-size:10px}
  .section-stack{padding:11px 7px 4px}
  .section-upper-floor{height:142px}
  .section-lower-floor{height:169px}
  .section-roofline span{font-size:8px}
  .section-room-track{inset:28px 5px 12px}
  .section-pin{min-width:35px;min-height:35px;padding:3px 3px;max-width:33%}
  .section-pin small{font-size:8px}
  .section-pin strong{font-size:9px}
  .section-floor-info{left:5px}
  .section-floor-info strong{font-size:9px}
  .section-floor-info small{font-size:8px}
  .section-extension{font-size:9px}
}

/* CHIEL huis als één aaneengesloten tussenwoning.
 * Modelverhouding: 1 m = 40 CSS-px; 2,50 m per woonlaag = 100 CSS-px.
 * De geveltekeningen zijn doorzichtige hulpvlakken, GEEN opgemeten bouwmuren.
 * De originele cutaway-afbeeldingen en Homey hotspots blijven exact dezelfde. */
.spin-orbit{
  --spin-meters-to-px:40px;
  --spin-story-height:calc(var(--spin-meters-to-px) * 2.5);
}
.spin-plane-upper{
  transform:translate(-50%,-50%) translateY(-41px) translateZ(47px) rotateX(90deg);
}
/* Remove the disconnected floating rail illusion, replacing it with wall bands. */
.spin-orbit.has-shell>.spin-edge{display:none!important}
.spin-shell{
 position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;
}
.spin-shell [hidden]{display:none!important}
.spin-wall,
.spin-annex-wall{
 position:absolute;left:50%;top:50%;height:var(--spin-story-height);
 transform-style:preserve-3d;pointer-events:none;
 backface-visibility:visible;
 border:1px solid rgba(162,212,225,.64);
 box-shadow:inset 0 0 12px rgba(33,111,137,.10),0 0 13px rgba(61,165,190,.10);
 background:
   repeating-linear-gradient(0deg,transparent 0,transparent 20px,rgba(196,231,233,.055) 20px,rgba(196,231,233,.055) 21px),
   linear-gradient(90deg,rgba(157,200,214,.13),rgba(35,109,139,.055),rgba(140,208,221,.12));
}
.spin-wall.spin-front,.spin-wall.spin-back{
 width:250px;
}
.spin-wall.spin-left,.spin-wall.spin-right{
 width:312px;
 background:repeating-linear-gradient(0deg,rgba(120,172,184,.12) 0,rgba(120,172,184,.12) 20px,rgba(65,104,126,.11) 20px,rgba(65,104,126,.11) 21px);
}
.spin-wall.spin-front.spin-story-ground{
 transform:translate(-50%,-50%) translateY(9px) translateZ(203px);
}
.spin-wall.spin-front.spin-story-first{
 transform:translate(-50%,-50%) translateY(-91px) translateZ(203px);
}
.spin-wall.spin-back.spin-story-ground{
 transform:translate(-50%,-50%) translateY(9px) translateZ(-109px) rotateY(180deg);
}
.spin-wall.spin-back.spin-story-first{
 transform:translate(-50%,-50%) translateY(-91px) translateZ(-109px) rotateY(180deg);
}
.spin-wall.spin-left.spin-story-ground{
 transform:translate(-50%,-50%) translateX(-125px) translateY(9px) translateZ(47px) rotateY(-90deg);
}
.spin-wall.spin-left.spin-story-first{
 transform:translate(-50%,-50%) translateX(-125px) translateY(-91px) translateZ(47px) rotateY(-90deg);
}
.spin-wall.spin-right.spin-story-ground{
 transform:translate(-50%,-50%) translateX(125px) translateY(9px) translateZ(47px) rotateY(90deg);
}
.spin-wall.spin-right.spin-story-first{
 transform:translate(-50%,-50%) translateX(125px) translateY(-91px) translateZ(47px) rotateY(90deg);
}
.spin-roof-outline{
 position:absolute;left:50%;top:50%;width:250px;height:312px;
 transform:translate(-50%,-50%) translateY(-141px) translateZ(47px) rotateX(90deg);
 background:linear-gradient(145deg,rgba(123,171,191,.07),rgba(180,229,241,.025));
 border:2px solid rgba(135,199,216,.57);
 box-shadow:inset 0 0 17px rgba(85,162,184,.04);
 pointer-events:none;backface-visibility:visible;
}
/* The lower, narrower annex joins the right-hand rear main wall.
   Its illustration still comes from the original ground-floor image. */
.spin-annex-wall{
 border-color:rgba(139,195,200,.46);
 background:linear-gradient(110deg,rgba(131,188,198,.09),rgba(38,100,123,.065));
}
.spin-annex-rear{
 width:135px;
 transform:translate(-50%,-50%) translateX(82.5px) translateY(9px) translateZ(-213px) rotateY(180deg);
}
.spin-annex-right{
 width:104px;
 transform:translate(-50%,-50%) translateX(150px) translateY(9px) translateZ(-161px) rotateY(90deg);
}
.spin-annex-left{
 width:104px;
 transform:translate(-50%,-50%) translateX(15px) translateY(9px) translateZ(-161px) rotateY(-90deg);
}
.spin-annex-outline{
 position:absolute;left:50%;top:50%;width:135px;height:104px;
 transform:translate(-50%,-50%) translateX(82.5px) translateY(-41px) translateZ(-161px) rotateX(90deg);
 background:rgba(105,158,181,.035);
 border:1px dashed rgba(142,211,224,.46);
 pointer-events:none;
}
.spin-height-mark{
 position:absolute;left:50%;top:50%;
 transform:translate(-50%,-50%) translateX(165px) translateZ(214px);
 pointer-events:none;transform-style:preserve-3d;
}
.spin-height-half{
 position:absolute;left:0;width:1px;height:100px;
 border-left:2px dashed rgba(157,235,243,.85);
 box-shadow:0 0 4px rgba(9,25,39,.8);
 transform:translateY(-50%);
}
.spin-height-ground{top:9px}
.spin-height-first{top:-91px}
.spin-height-half::before,.spin-height-half::after{
 content:'';position:absolute;left:-6px;width:10px;height:2px;background:#bffbff;
}
.spin-height-half::before{top:0}
.spin-height-half::after{bottom:0}
.spin-height-half>span{
 position:absolute;left:6px;top:50%;transform:translateY(-50%);
 display:inline-block;white-space:nowrap;
 color:#cfffff;background:#10364ce3;border:1px solid rgba(135,235,245,.51);
 padding:3px 5px;border-radius:4px;font:850 10px system-ui;
 text-shadow:0 1px 2px #0008;
}
.spin-dimensions{
 display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
 padding:8px 14px;background:#0d334b;border-top:1px solid #2d6980;border-bottom:1px solid #2d6980;
 font-size:11px;color:#bddce7;
}
.spin-dimensions strong{font-size:12px;color:#aff8fc}
.spin-dimensions span{font-size:10px}
.spin.is-section .spin-dimensions{background:#154052}
.section-upper-floor,.section-lower-floor{
 /* Comparable schematic height in side elevation: 2.50 m per story. */
 height:140px;
}
.section-floor-info strong::after{
 content:' · 2,50 m';color:#7ff0ee;font-size:9px;letter-spacing:0;
}
.section-stack-note{line-height:1.55}
@media(max-width:600px){
 .spin-dimensions{padding:8px 10px;gap:4px}
 .spin-dimensions strong{font-size:11px}
 .spin-dimensions span{font-size:9px}
 .spin-height-half>span{font-size:8px;padding:2px 3px}
 .section-upper-floor,.section-lower-floor{height:143px}
 .section-floor-info strong::after{font-size:8px}
}

/* De nieuwe aaneengesloten gevel past ook volledig op een iPhone. */
@media(min-width:601px){
 .spin:not(.is-section) .spin-orbit{scale:.94}
}
@media(max-width:600px){
 .spin:not(.is-section) .spin-orbit{scale:.66;left:calc(50% - 80px);top:calc(49% - 96px)}
 .spin.is-section .spin-orbit{scale:.76}
}
@media(max-width:390px){
 .spin:not(.is-section) .spin-orbit{scale:.55;left:calc(50% - 80px);top:calc(49% - 96px)}
 .spin.is-section .spin-orbit{scale:.66}
}
/* Groot binnenkijken: alle bestaande meubels komen uit de originele cutaway,
   dus geen objecten of kamers toevoegen, alleen echt zoomen in het 3D-beeld. */
.inside-view{margin:0 0 18px;min-width:0;border-radius:18px;overflow:hidden;
 border:1px solid #36677e;background:#091f31;box-shadow:0 22px 52px #0006}
.inside-view[hidden]{display:none!important}
.inside-head{padding:18px 20px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;
 background:linear-gradient(110deg,#123b52,#082539 65%,#091e2e);border-bottom:1px solid #305b74}
.inside-head h2{margin:4px 0 2px;font-size:clamp(20px,3vw,27px);line-height:1.18;letter-spacing:-.045em;color:#e5fbff}
.inside-head p{margin:5px 0 0;color:#afcfdb;font-size:12px;max-width:570px;line-height:1.55}
.inside-overline{color:#83e3ed;letter-spacing:.12em;font:850 10px system-ui}
.inside-home-link{flex:0 0 auto;display:inline-flex;justify-content:center;align-items:center;
 min-height:42px;padding:9px 14px;background:#075d77;border:1px solid #7adee8;border-radius:11px;
 color:#eaffff;font:800 12px system-ui;text-decoration:none}
.inside-toolbar{padding:12px 15px;background:#113448;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.inside-floor-buttons,.inside-zoom-buttons{display:flex;align-items:center;gap:7px}
.inside-toolbar button,.inside-stage-toolbar button,.inside-focus-bar button{
 appearance:none;min-height:41px;padding:9px 13px;border:1px solid #3c7992;border-radius:10px;
 color:#e6faff;background:#113c52;font:800 12px system-ui;cursor:pointer;touch-action:manipulation}
.inside-toolbar button[aria-pressed=true],.inside-stage-toolbar button[aria-pressed=true]{
 border-color:#8be9f0;background:#0b7285;color:#fff}
.inside-toolbar button:focus-visible,.inside-stage-toolbar button:focus-visible,
.inside-room-buttons button:focus-visible,.inside-focus-bar button:focus-visible{
 outline:2px solid #aafaff;outline-offset:3px}
.inside-zoom-buttons button:not(#insideReset){width:44px;padding:6px;font:750 21px system-ui}
.inside-zoom-buttons output{min-width:52px;text-align:center;font:800 13px system-ui;color:#b0edf7;font-variant-numeric:tabular-nums}
.inside-stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 15px;
 background:#092337;border-block:1px solid #244960}
.inside-stage-toolbar span{color:#d8f6fd;font-weight:850;font-size:13px}
.inside-stage-toolbar button{min-height:35px;padding:6px 10px;font-size:11px}
.inside-viewport{
 position:relative;width:100%;height:clamp(540px,77vh,920px);height:clamp(540px,77dvh,920px);
 overflow:hidden;background:
  radial-gradient(ellipse at 52% 42%,#eef2f1 0%,#cbd6d6 58%,#86a1ae 100%);
 touch-action:none;cursor:grab;user-select:none;isolation:isolate;
 box-shadow:inset 0 0 65px rgba(5,30,50,.18)
}
.inside-viewport.is-panning{cursor:grabbing}
.inside-viewport:focus-visible{outline:3px solid #62dcea;outline-offset:-4px}
.inside-canvas{position:absolute;left:50%;top:50%;transform-origin:50% 50%;
 will-change:transform;line-height:0;transform:translate(-50%,-50%);
 box-shadow:0 25px 90px #051e3340}
.inside-canvas img{display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.inside-pins{position:absolute;inset:0;z-index:5;pointer-events:none}
.inside-pins[hidden]{display:none!important}
.inside-pins .pin{pointer-events:auto;min-width:43px;max-width:26%;
 padding:5px 7px;background:#082d41e9;border-color:#58bace}
.inside-pins .pin small{font-size:9px}
.inside-pins .pin strong{font-size:10px}
.inside-hint{position:absolute;bottom:14px;right:15px;padding:7px 11px;border-radius:30px;
 color:#eaffff;background:#0b2d43cc;border:1px solid #93d5e0a8;font-size:11px;
 font-weight:730;pointer-events:none;backdrop-filter:blur(8px)}
.inside-focus-bar{padding:14px 16px 9px;display:flex;align-items:center;justify-content:space-between;gap:10px;
 background:#0d2b40}
.inside-focus-bar strong{display:block;font-size:14px;color:#edffff}
.inside-focus-bar small{display:block;margin-top:3px;font-size:11px;color:#aacbd7}
.inside-focus-bar button{min-height:38px;padding:7px 10px;flex:none}
.inside-room-buttons{display:flex;flex-wrap:wrap;gap:8px;padding:9px 15px 15px;background:#0d2b40}
.inside-room-buttons button{display:inline-flex;align-items:center;gap:7px;min-height:42px;
 background:#133e53;color:#dff7ff;border:1px solid #4a7890;border-radius:30px;
 padding:9px 13px;font:800 11px system-ui;cursor:pointer;touch-action:manipulation}
.inside-room-buttons button[aria-pressed=true]{background:#076e89;border-color:#95e8f2;box-shadow:0 0 0 1px #4bc3d377}
.inside-room-buttons button small{font-weight:760;color:#a7e3eb;font-size:10px}
.inside-footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:12px 16px;
 color:#9dbbc9;background:#071e2f;border-top:1px solid #2a536c;font-size:10px;line-height:1.5}
.inside-footer span:first-child{color:#a5ead8}
@media(max-width:700px){
 .inside-head{padding:14px 12px;align-items:start;flex-direction:column;gap:10px}
 .inside-head h2{font-size:21px}
 .inside-home-link{width:100%}
 .inside-toolbar{padding:10px;gap:8px;justify-content:center}
 .inside-floor-buttons,.inside-zoom-buttons{flex:1;justify-content:center}
 .inside-floor-buttons button{flex:1;max-width:220px}
 .inside-stage-toolbar{padding:8px 10px}
 .inside-stage-toolbar span{font-size:11px}
 .inside-stage-toolbar button{font-size:10px}
 .inside-viewport{height:clamp(480px,70dvh,780px)}
 .inside-hint{bottom:10px;right:10px;font-size:10px}
 .inside-focus-bar{padding:12px 11px 8px}
 .inside-room-buttons{gap:7px;padding:8px 10px 12px}
 .inside-room-buttons button{padding:8px 10px;min-height:40px;font-size:10px}
 .inside-footer{padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){.inside-canvas{scroll-behavior:auto!important}}

/* Schermvullend binnenkijken werkt ook op iPhone Safari zonder Fullscreen API. */
body.inside-fullscreen-open{overflow:hidden!important}
.inside-viewport.is-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;
 height:100vh!important;height:100dvh!important;z-index:10000!important;border-radius:0!important;
 border:0!important;max-height:none!important}
.inside-exit-fullscreen{position:absolute;z-index:11;right:calc(14px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));
 min-height:46px;min-width:96px;border:1px solid #8af6fd;border-radius:12px;background:#0c354bde;
 color:#f2ffff;font:850 12px system-ui;cursor:pointer;padding:10px 14px;
 box-shadow:0 4px 15px #0008;touch-action:manipulation}
.inside-exit-fullscreen[hidden]{display:none!important}
.inside-exit-fullscreen:focus-visible{outline:3px solid #e7fcff;outline-offset:3px}
.inside-viewport.is-fullscreen .inside-hint{bottom:calc(15px + env(safe-area-inset-bottom))}

/* Werkelijke 3D-meshwoning (Three.js) — 2.50m verdieping; bestaande CHIEL behouden */
.model3d{border:1px solid #386e86;border-radius:18px;overflow:hidden;margin:0 0 16px;background:#071e30;box-shadow:0 16px 34px #0007;min-width:0}
.model3d[hidden],.model3d [hidden]{display:none!important}
.model3d-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 20px;background:linear-gradient(115deg,#174d63,#0a2e47)}
.model3d-overline{font:800 10px system-ui;color:#74e1eb;letter-spacing:.12em}
.model3d-head h2{font-size:clamp(19px,2.9vw,29px);letter-spacing:-.04em;margin:3px 0 4px;line-height:1.24;color:#edfcff}
.model3d-head p{font-size:12px;color:#bfdbe5;line-height:1.5;max-width:640px;margin:0}
.model3d-control-link{color:white;background:#075e78;border:1px solid #81dce8;padding:10px 14px;min-height:43px;white-space:nowrap;border-radius:10px;text-decoration:none;font-weight:800;font-size:12px}
.model3d-toolbar{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#0e3548;border-top:1px solid #356478}
.model3d-pills{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.model3d-pills button{appearance:none;min-height:41px;border:1px solid #456d85;border-radius:9px;padding:8px 11px;background:#0e2d43;color:#d6f5ff;font:800 11px system-ui;cursor:pointer;touch-action:manipulation}
.model3d-pills button[aria-pressed=true]{background:#0c7087;border-color:#88edfb;color:#fff}
.model3d button:focus-visible{outline:3px solid #e2feff;outline-offset:2px}
.model3d-viewer{position:relative;width:100%;height:clamp(520px,72vw,790px);overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(ellipse at 50% 20%,#dbe7e9,#91aab7 70%,#52687a 100%);isolation:isolate}
.model3d-viewer.is-dragging{cursor:grabbing}
.model3d-viewer.is-fullscreen{position:fixed;inset:0;z-index:10020;width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0}
body.model3d-fullscreen-open{overflow:hidden!important}
.model3d-canvas,.model3d-canvas>canvas{display:block;width:100%;height:100%}
.model3d-canvas canvas{touch-action:none}
.model3d-labels{position:absolute;inset:0;pointer-events:none}
.model3d-label{position:absolute;transform:translate(-50%,-100%);max-width:105px;min-width:55px;border:1px solid #7edeea;border-radius:8px;background:#103b53e8;color:#f1ffff;padding:5px;box-shadow:0 5px 18px #1238;font:800 10px system-ui;text-align:center;cursor:pointer;pointer-events:auto;white-space:normal}
.model3d-label small{display:block;font-size:9px;color:#b8e2ed}
.model3d-label.active{background:#0b7691;border-color:#adfff8}
.model3d-label.open{background:#713c2ceb;border-color:#ffbc91}
.model3d-label.unknown{opacity:.72;border-style:dashed}
.model3d-label[hidden]{display:none!important}
.model3d-topbar{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.model3d-topbar>span{max-width:72%;display:inline-flex;align-items:center;padding:7px 10px;background:#09283de7;border:1px solid #80bec5;color:#d9faff;border-radius:10px;box-shadow:0 4px 12px #0004;font-size:11px;font-weight:780}
.model3d-topbar>button{pointer-events:auto;min-height:36px;border:1px solid #7edeea;border-radius:10px;padding:7px 10px;color:#fff;background:#093952e8;cursor:pointer;font-weight:780;font-size:11px}
.model3d-topbar>button[aria-pressed=true]{background:#0c7787}
.model3d-bottom{position:absolute;bottom:11px;left:11px;right:11px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;color:#dff9ff;text-shadow:0 1px 4px #001724;font-weight:800;font-size:11px}
.model3d-bottom span{background:#143e52c9;border-radius:8px;padding:5px 8px}
.model3d-walk-pad{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:min(94%,410px);padding:8px;background:#0b2d42ce;border:1px solid #6eabbc;border-radius:12px}
.model3d-walk-pad>button{min-height:43px;padding:6px 5px;background:#1b556a;border:1px solid #89c8d2;border-radius:9px;color:#ecffff;font-size:11px;font-weight:800;touch-action:manipulation}
.model3d-rooms{padding:13px 15px;background:#0c2c40}
.model3d-rooms>strong{color:#d8fcff;font-size:13px}
.model3d-room-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.model3d-room-buttons button{border:1px solid #507c8e;border-radius:24px;background:#164056;color:#dbf5fc;min-height:40px;padding:8px 12px;font-weight:780;font-size:11px;cursor:pointer;touch-action:manipulation}
.model3d-room-buttons button[aria-pressed=true]{background:#11738a;border-color:#9ff4f4}
.model3d-room-buttons button[hidden]{display:none!important}
.model3d-description{padding:11px 16px 16px;background:#081e30;color:#b8d3df;font-size:11px;line-height:1.7;border-top:1px solid #274f66}
.model3d-description strong{color:#dafffb}
.model3d-fallback{position:absolute;inset:10%;z-index:25;background:#0c314af0;border:1px solid #a0dce6;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:13px;padding:20px;color:#edfaff}
.model3d-fallback p{margin:0;font-size:12px}
.model3d-fallback button{padding:12px 16px;background:#127692;color:#fff;font-weight:850;border-radius:10px;border:1px solid #8feaf2}
@media(max-width:700px){
 .model3d-head{padding:13px;align-items:start;flex-direction:column;gap:9px}
 .model3d-control-link{align-self:stretch;text-align:center}
 .model3d-toolbar{padding:9px;justify-content:center;gap:8px}
 .model3d-pills{justify-content:center;width:100%}
 .model3d-pills button{flex:1;white-space:normal;font-size:10px;padding:7px 5px}
 .model3d-viewer{height:clamp(510px,69dvh,800px)}
 .model3d-topbar{top:9px;left:8px;right:8px}
 .model3d-topbar>span{font-size:10px}
 .model3d-bottom{font-size:9px;left:7px;right:7px}
 .model3d-rooms{padding:11px}
 .model3d-room-buttons{gap:6px}
 .model3d-room-buttons button{font-size:10px;padding:8px 10px}
 .model3d-label{font-size:9px;min-width:40px}
 .model3d-label small{font-size:8px}
}


/* Eén woningweergave: bestaande echte 3D. Andere historische weergaven blijven
   voor rollback intact, maar zijn niet zichtbaar of bereikbaar via de interface. */
.controls button[hidden]{display:none!important}
body.chiel-model-only .tip,body.chiel-model-only .details,
body.chiel-model-only > .shell > footer{display:none!important}
body.chiel-model-only .controls{padding:5px 12px 9px;justify-content:center}
body.chiel-model-only .controls [data-floor=model]{width:min(400px,100%);font-weight:900}
body.chiel-model-only .model3d{margin-top:3px}
body.chiel-model-only .model3d-description{display:none}

/* Native, isolated Homey room controls — no duplicate dashboard in an iframe. */
body.model-room-modal-open{overflow:hidden!important}
.model-room-dialog[hidden]{display:none!important}
.model-room-dialog{
 position:fixed;inset:0;z-index:10060;display:flex;align-items:center;
 justify-content:center;padding:12px;isolation:isolate;
}
.model-room-backdrop{position:absolute;inset:0;background:rgba(1,9,22,.79);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.model-room-sheet{
 position:relative;width:min(660px,100%);height:min(820px,calc(100dvh - 24px));
 display:flex;flex-direction:column;min-height:0;overflow:hidden;
 background:#0c283d;border:1px solid #71b8c8;border-radius:19px;
 box-shadow:0 25px 95px rgba(0,0,0,.76);color:#eafaff
}
.model-room-sheet-header{
 display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
 padding:18px 17px 15px;background:linear-gradient(105deg,#134961,#0a3044);
 border-bottom:1px solid #33677f
}
.model-room-eyebrow{font:850 10px system-ui;color:#74eadb;letter-spacing:.12em}
.model-room-sheet-header h2{font-size:23px;line-height:1.16;margin:6px 0 4px;
 letter-spacing:-.035em}
.model-room-sheet-header p{font-size:12px;color:#b9d9e3;margin:0}
.model-room-close{width:45px;height:45px;flex:none;display:grid;place-items:center;
 border:1px solid #82d4dc;background:#144e62;color:#fff;border-radius:13px;
 font-size:19px;cursor:pointer;touch-action:manipulation}
.model-room-status{padding:9px 17px;background:#0b3349;color:#bff5ff;font-size:12px;
 border-bottom:1px solid #315b6b;min-height:38px}
.model-room-status.warning{background:#453321;color:#ffebc0}
.model-room-status.success{color:#bdffe8}
.model-room-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:15px 16px 26px;
 -webkit-overflow-scrolling:touch;touch-action:pan-y}
.model-room-body p{line-height:1.55;color:#afceda;font-size:13px}
.model-room-section{margin:0 0 21px}
.model-room-section h3{margin:0 0 10px;color:#eafaff;font-size:15px}
.model-room-section .model-room-help{font-size:11px;color:#a7c9d6;line-height:1.5;margin:4px 0 11px}
.model-room-device{border:1px solid #36697e;border-radius:13px;
 padding:13px;background:linear-gradient(120deg,#123a50,#092e43);
 margin:0 0 10px}
.model-room-device-title{display:flex;justify-content:space-between;align-items:center;gap:9px;
 font-weight:840;font-size:13px;margin-bottom:8px}
.model-room-device-title .model-room-value{font-size:12px;color:#88e5e9;
 font-weight:750;white-space:nowrap}
.model-room-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.model-room-actions button,.model-room-temp-controls button,.model-room-apply{
 min-height:43px;min-width:80px;background:#17435a;color:#eaffff;
 border:1px solid #568aa1;border-radius:10px;cursor:pointer;
 font:850 13px system-ui;padding:9px 14px;touch-action:manipulation
}
.model-room-actions button[aria-pressed=true]{background:#0a8290;border-color:#8cf0ee}
.model-room-actions button:disabled,.model-room-temp-controls button:disabled,
.model-room-apply:disabled{opacity:.52;cursor:wait}
.model-room-actions button:focus-visible,.model-room-close:focus-visible,
.model-room-temp-controls button:focus-visible,.model-room-apply:focus-visible{
 outline:3px solid #bdfeff;outline-offset:2px
}
.model-room-device-status{min-height:17px;color:#a2c5d0;font-size:10px;
 margin-top:7px;line-height:1.4}
.model-room-device-status.error{color:#ffbaab}
.model-room-device-status.success{color:#b9ffcf}
.model-room-temp-controls{display:flex;align-items:center;justify-content:space-between;
 gap:8px;flex-wrap:wrap}
.model-room-temp-controls button{min-width:48px;min-height:43px;padding:8px;font-size:19px}
.model-room-temp-controls output{font-size:18px;font-weight:850;color:#b4f6fc;
 min-width:70px;text-align:center;font-variant-numeric:tabular-nums}
.model-room-temp-controls .model-room-apply{font-size:12px;min-width:99px;
 background:#176676;border-color:#92d6db}
.model-room-dimmer{display:grid;grid-template-columns:1fr auto;gap:5px 8px;margin-top:10px;
 font-size:11px;color:#b5d5e0}
.model-room-dimmer input{width:100%;accent-color:#5dd0e5;touch-action:pan-x}
.model-room-dimmer output{font-variant-numeric:tabular-nums}
.model-room-sensor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.model-room-sensor-card{background:#133d52;border:1px solid #3f6a80;border-radius:12px;
 padding:12px}
.model-room-sensor-card small{display:block;color:#a9c9d5;font-size:10px;margin-bottom:5px}
.model-room-sensor-card strong{color:#ddfaff;font-size:16px}
.model-room-sheet-footer{padding:12px 15px 14px;border-top:1px solid #305c74;
 display:flex;align-items:center;justify-content:space-between;gap:11px;flex-wrap:wrap;
 background:#092133;font-size:10px;color:#a9c8d3}
.model-room-sheet-footer a{color:#baffff;text-decoration:none;font-size:12px;
 font-weight:800;padding:7px 0}
@media(max-width:650px){
 .model-room-dialog{padding:0;align-items:stretch}
 .model-room-sheet{width:100%;height:100dvh;max-height:none;border:0;
 border-radius:0;padding-top:env(safe-area-inset-top);
 padding-bottom:env(safe-area-inset-bottom)}
 .model-room-sheet-header{padding:13px 13px 12px}
 .model-room-sheet-header h2{font-size:21px}
 .model-room-body{padding:12px 12px 22px}
 .model-room-status{padding:9px 12px}
 .model-room-device{padding:11px}
 .model-room-sheet-footer{padding:9px 12px 12px}
 .model-room-sensor-grid{gap:7px}
}


/* Echte 3D-lichtweergave: lampen volgen Homey-aan/uit en dimstanden. */
.model3d-topbar{flex-wrap:wrap}
.model3d-topbar>span#modelLightState{
 order:3;flex:0 1 auto;max-width:min(100%,340px);
 background:#173a4fe9;border-color:#7cc8a8;color:#effff0;
 font-variant-numeric:tabular-nums;font-size:10px;
 line-height:1.35;text-shadow:0 1px 2px #06172166
}
.model3d-topbar>span#modelLightState.unknown{color:#ffe3c5;border-color:#ab8a76}
.model3d-pills #modelEvening[aria-pressed=true]{
 background:#314565;border:1px solid #ccbd87;color:#fff2d2
}
.model3d-pills #modelEvening{white-space:nowrap}
.model3d-light-explain{
 display:block;padding:3px 2px 1px;color:#9dc5d4;font-size:10px;
 line-height:1.5;max-width:760px
}
@media(max-width:650px){
 .model3d-topbar>span#modelLightState{order:3;font-size:9px}
 .model3d-light-explain{font-size:9px}
}