/*! © 2026 Forward Bouwadvies — alle rechten voorbehouden.
 *  Ontwerp, 3D-model en code zijn auteursrechtelijk beschermd.
 *  Kopiëren, nabouwen of hergebruiken zonder schriftelijke toestemming is niet toegestaan. */

/* Sectie "Draai & ontdek" — gebruikt de tokens en lettertypen uit stijl.css */
.ontdek .kop{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.g3d{
  --g3-bg:var(--g-900,#0B1A16); --g3-bg2:var(--g-700,#173029);
  --g3-panel:rgba(16,37,31,.9); --g3-line:var(--g-600,#21423A);
  --g3-mint:var(--brand-l,#8FC2AE); --g3-fg:#fff; --g3-muted:#9FB4AB; --g3-brand:var(--brand,#24584A);
  position:relative;height:clamp(560px,78vh,760px);border-radius:var(--r,16px);overflow:hidden;isolation:isolate;
  background:radial-gradient(110% 85% at 50% 42%,var(--g3-bg2) 0%,var(--g3-bg) 72%);
  border:1px solid var(--g3-line);box-shadow:var(--sh-l,0 30px 70px rgba(8,22,18,.22));
  font-family:var(--f-mono);color:var(--g3-fg);
  -webkit-user-select:none;user-select:none;
}
.g3d::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(143,194,174,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(143,194,174,.055) 1px,transparent 1px);
  background-size:28px 28px}
.g3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent;z-index:1}
.g3d canvas.drag{cursor:grabbing}
.g3d canvas.hot{cursor:pointer}
.g3d .g3-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.g3d .g3-labels,.g3d .g3-tags{position:absolute;inset:0;pointer-events:none;z-index:3}
.g3d .g3-wacht{position:absolute;inset:0;display:grid;place-items:center;color:var(--g3-muted);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;z-index:1}

.g3-lab{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 11px;
  background:var(--g3-panel);border:1px solid var(--g3-line);border-radius:var(--r-xs,8px);
  font:500 11px/1.2 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--g3-fg);
  white-space:nowrap;cursor:pointer;will-change:transform,opacity;transition:border-color .2s,background .2s,box-shadow .2s;backdrop-filter:blur(4px)}
.g3-lab .sc{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:5px;background:var(--c);color:#fff;font-weight:500;font-size:11px;letter-spacing:0}
.g3-lab.on{border-color:var(--c);background:rgba(11,26,22,.97);box-shadow:0 0 0 1px var(--c),0 8px 30px rgba(0,0,0,.45)}
.g3-lab:focus-visible{outline:2px solid var(--g3-mint);outline-offset:2px}
.g3-tag{position:absolute;left:0;top:0;font:400 10px var(--f-mono);color:var(--g3-muted);letter-spacing:.08em;padding-right:6px}

.g3-som{position:absolute;top:16px;right:16px;z-index:4;background:var(--g3-panel);border:1px solid var(--g3-line);border-radius:var(--r-s,11px);padding:10px 13px;min-width:190px;backdrop-filter:blur(6px)}
.g3-som small{display:block;font:500 10px var(--f-mono);color:var(--g3-muted);letter-spacing:.12em;text-transform:uppercase}
.g3-som .rij{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.g3-som .groot{font:600 26px/1.2 var(--f-head);color:#fff;font-variant-numeric:tabular-nums}
.g3-som .verd{display:flex;gap:2px;margin-top:8px;height:6px;border-radius:3px;overflow:hidden}
.g3-som .verd i{display:block;flex:1}

.g3-info{position:absolute;left:50%;bottom:78px;transform:translate(-50%,12px);width:min(430px,calc(100% - 32px));z-index:5;
  background:var(--g3-panel);border:1px solid var(--g3-line);border-top:3px solid var(--c,var(--g3-mint));border-radius:var(--r-s,11px);
  padding:14px 16px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;backdrop-filter:blur(8px);font-family:var(--f-body)}
.g3-info.toon{opacity:1;transform:translate(-50%,0)}
.g3-info .k{font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--c,var(--g3-mint));text-transform:uppercase}
.g3-info h3{font:600 18px/1.25 var(--f-head);color:#fff;margin:5px 0 2px;letter-spacing:-.01em}
.g3-info .m{font-size:12.5px;color:var(--g3-muted);margin-bottom:8px}
.g3-info p{font-size:13.5px;line-height:1.55;color:#DCE7E2}
.g3-info .act{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px dashed var(--g3-line);padding-top:8px;margin-top:9px;font-size:12.5px;color:#DCE7E2}
.g3-info .act b{color:var(--c,var(--g3-mint));font-weight:600}

.g3-hint{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;padding:9px 12px 9px 10px;
  background:var(--g3-panel);border:1px solid var(--g3-line);border-radius:var(--r-s,11px);font:400 11px var(--f-body);color:var(--g3-muted);
  transition:opacity .3s,border-color .3s;white-space:nowrap;backdrop-filter:blur(6px);pointer-events:none}
.g3-hint b{display:block;font:600 15px/1.25 var(--f-head);color:#fff;margin-bottom:1px}
.g3-hint .hand{width:30px;height:30px;border:1.5px solid var(--g3-mint);border-radius:50%;position:relative;flex:none}
.g3-hint .hand::after{content:"";position:absolute;width:8px;height:8px;background:var(--g3-mint);border-radius:50%;top:9.5px;left:9.5px;animation:g3veeg 2.2s ease-in-out infinite}
@keyframes g3veeg{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
.g3-hint .prog{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font:500 12px var(--f-mono);font-variant-numeric:tabular-nums;color:#fff;border-left:1px solid var(--g3-line);padding-left:12px}
.g3-hint .prog i{display:block;width:56px;height:3px;border-radius:2px;background:var(--g3-line);overflow:hidden}
.g3-hint .prog em{display:block;height:100%;width:0;background:var(--g3-mint);transition:width .4s}
.g3-hint.klaar{border-color:var(--g3-mint)}

.g3-voet{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:0 16px 16px}
.g3-leg{display:flex;gap:10px;flex-wrap:wrap;font:400 10px var(--f-mono);color:var(--g3-muted);letter-spacing:.04em}
.g3-leg span{display:flex;align-items:center;gap:5px}
.g3-leg i{width:9px;height:9px;border-radius:2px;display:block}
.g3-knop{display:flex;gap:6px}
.g3-knop button{font:500 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--g3-panel);
  border:1px solid var(--g3-line);border-radius:999px;padding:9px 14px;cursor:pointer;display:flex;align-items:center;gap:8px}
.g3-knop button::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--g3-muted)}
.g3-knop button[aria-pressed="true"]{border-color:var(--g3-brand);background:var(--g3-brand)}
.g3-knop button[aria-pressed="true"]::before{background:#fff;border-color:#fff}
.g3-knop button:hover{border-color:var(--g3-mint)}
.g3-knop button:focus-visible{outline:2px solid var(--g3-mint);outline-offset:2px}
.g3-copy{font:400 10px var(--f-mono);letter-spacing:.06em;color:var(--g3-muted)}

/* smalle weergave (telefoon) — klasse wordt door het script gezet */
.g3d.smal{height:600px;border-radius:var(--r-s,11px)}
.g3d.smal .g3-lab{font-size:9px;padding:4px 5px 4px 7px;gap:6px;letter-spacing:.04em;border-radius:6px}
.g3d.smal .g3-lab .sc{min-width:15px;height:15px;font-size:9px;border-radius:4px}
.g3d.smal .g3-som,.g3d.smal .g3-leg{display:none}
.g3d.smal .g3-voet{flex-direction:column;justify-content:center;gap:8px;padding-bottom:12px}
.g3d.smal .g3-knop button{padding:8px 11px;font-size:9.5px;letter-spacing:.06em}
.g3d.smal .g3-copy{font-size:8.5px;text-align:center}
.g3d.smal .g3-hint{bottom:96px;white-space:normal;width:min(360px,calc(100% - 28px));gap:9px;padding:7px 10px 7px 8px;font-size:10.5px}
.g3d.smal .g3-hint b{font-size:13.5px}
.g3d.smal .g3-hint .hand{width:24px;height:24px}
.g3d.smal .g3-hint .hand::after{top:6.5px;left:6.5px}
.g3d.smal .g3-info{bottom:96px;padding:12px 14px}
.g3d.smal .g3-info h3{font-size:16px}
.g3d.smal .g3-info p{font-size:12.5px}
@media (max-width:640px){.ontdek .wrap{padding-inline:12px}.ontdek .kop{padding-inline:6px}}
@media (prefers-reduced-motion:reduce){.g3-lab,.g3-info{transition:none}.g3-hint .hand::after{animation:none}}

/* Mini-weergave in het klantportaal: alleen het draaiende model */
.g3d.mini{height:auto;border:0;border-radius:0;box-shadow:none}
.g3d.mini canvas{pointer-events:none;cursor:default}
.g3d.mini .g3-labels,.g3d.mini .g3-som,.g3d.mini .g3-hint,.g3d.mini .g3-voet,.g3d.mini .g3-info,.g3d.mini .g3-tags,.g3d.mini .g3-ov{display:none!important}