:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1f2e54;background:#eef2f4}
*{box-sizing:border-box}
body{margin:0;background:#eef2f4;color:#20305a}
header{height:84px;background:#fffffff2;backdrop-filter:blur(18px);display:flex;justify-content:space-between;align-items:center;padding:0 34px;border-bottom:1px solid #dfe5e9;position:relative;z-index:5}
/* 06/09/2026 — echt sitelogo i.p.v. losse tekst, en de link gaat naar de
   homepagina zoals overal elders op de site. */
.brand{text-decoration:none;display:inline-flex;align-items:center}
.brand img{display:block;height:46px;width:auto}
@media(max-width:760px){.brand img{height:38px}}
.edition{font-size:12px;letter-spacing:2px;font-weight:750}.edition span{display:block;font-size:10px;color:#718092;text-align:right;margin-top:6px}
main{display:grid;grid-template-columns:minmax(0,1fr) 370px;min-height:calc(100svh - 84px)}
.viewer{position:relative;min-height:700px;overflow:hidden;background:radial-gradient(circle at 48% 34%,#f4f7f7 0,#dce6e7 65%,#cedadc 100%)}
.heading{position:absolute;top:28px;left:34px;pointer-events:none;z-index:2;text-shadow:0 1px 12px rgba(255,255,255,.85),0 2px 18px rgba(255,255,255,.6);background:linear-gradient(100deg,rgba(255,255,255,.82),rgba(255,255,255,0) 78%);padding:10px 90px 12px 14px;margin:-10px 0 0 -14px;border-radius:14px}
.heading p,.eyebrow{font-size:11px;letter-spacing:2.2px;color:#198eab;font-weight:800;margin:0}
h1{font-size:clamp(27px,2.8vw,41px);font-weight:520;letter-spacing:-1.4px;margin:9px 0}
#canvas{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}
#loading,.fallback{position:absolute;inset:45% 0;text-align:center;color:#536179}
.view-controls,.tools{position:absolute;display:flex;gap:6px;z-index:3}
.view-controls{top:126px;left:34px;max-width:calc(100% - 68px);overflow:auto;scrollbar-width:none;background:#ffffffdb;padding:5px;border:1px solid #fff;border-radius:30px;box-shadow:0 12px 34px #23336118;backdrop-filter:blur(14px)}
.view-controls::-webkit-scrollbar{display:none}
.view-controls button{border:0;background:transparent;border-radius:22px;padding:11px 14px;color:#506078;white-space:nowrap}
.view-controls .active{background:#233663;color:white;box-shadow:0 4px 12px #20335c2b}
.tools{bottom:62px;left:50%;transform:translateX(-50%);white-space:nowrap}
button{font:inherit;font-size:14px;cursor:pointer;min-height:42px;transition:background .2s,transform .2s}
button:hover{transform:translateY(-1px)}button:focus-visible{outline:3px solid #29b4d2;outline-offset:3px}
.tools button,.zoom button{border:1px solid #d3dde4;background:#fffffff2;color:#233361;border-radius:10px;padding:10px 16px;box-shadow:0 5px 18px #23336112;backdrop-filter:blur(12px)}
.tools button[aria-pressed=true]{background:#243766;color:white}
.gesture{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-size:12px;color:#53667a;pointer-events:none;text-shadow:0 1px 8px #fff}
.zoom{position:absolute;right:22px;bottom:64px;display:flex;flex-direction:column;gap:6px}.zoom button{font-size:22px;padding:4px 13px}
aside{padding:38px 30px 34px;background:#fff;border-left:1px solid #e6ebf1;overflow:auto}
h2{font-size:31px;line-height:1.13;letter-spacing:-.9px;font-weight:540;margin:15px 0}
p.intro{font-size:15px;line-height:1.7;color:#5f6d80;margin:10px 0 26px}
.concept{margin:24px 0 0;background:#f6f9fb;border:1px solid #e2eaf0;border-left:3px solid #3bb0cb;color:#48566b;padding:15px 17px;border-radius:10px}
.concept span,.concept strong,.concept small{display:block}.concept span{font-size:10.5px;letter-spacing:1.5px;color:#1a8ba6;text-transform:uppercase;font-weight:800}.concept strong{font-size:14.5px;line-height:1.45;font-weight:650;color:#243467;margin:6px 0 5px}.concept small{font-size:12.5px;line-height:1.6;color:#6a788c}
.included{border-top:1px solid #eaeef3;padding-top:16px}.included h3{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8a97a8;margin:0 0 8px}.included ul{list-style:none;padding:0;margin:0}
.included li{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:13.5px;line-height:1.45;color:#48566b;border-bottom:1px solid #f1f4f7}.included li:last-child{border-bottom:0}.included li span{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8f7fb;color:#1a8ba6;font-size:10px;font-weight:800}
.specs{margin:22px 0 0;display:flex;gap:1px;background:#eaeef3;border-radius:12px;overflow:hidden;border:1px solid #eaeef3}.specs>div{padding:15px 16px;background:#f8fafc;flex:1}
.specs strong{font-size:19px;font-weight:640;display:block;color:#243467}.specs small{font-size:13px;font-weight:400;color:#7a8798}.specs span{display:block;color:#8a97a8;font-size:11.5px;margin-top:5px;letter-spacing:.4px}
.note{margin-top:18px;padding-top:15px;border-top:1px solid #eaeef3;font-size:11.5px;color:#8a97a8;line-height:1.6}.note b{font-weight:650;color:#3f526a}.note p{margin:6px 0}
@media(max-width:900px){
  main{grid-template-columns:1fr}.viewer{height:72svh;min-height:590px}aside{border:0;padding:28px}
  header{height:74px;padding:0 20px}.heading{left:20px;top:18px}.view-controls{left:14px;right:14px;top:106px;max-width:none;border-radius:13px}
  .view-controls button{flex:0 0 auto}.zoom{right:12px;bottom:120px}.tools{bottom:55px}.tools button{padding:10px 11px;font-size:13px}
  .edition{font-size:10px}h1{font-size:28px}
}
@media(max-width:520px){
  .heading p{max-width:270px;line-height:1.45}.view-controls button{padding:9px 11px;font-size:13px}
  .tools{left:12px;right:12px;transform:none;justify-content:center}.tools button{font-size:12px}.edition{display:none}.viewer{min-height:605px}
}

/* 06/09/2026 — op mobiel viel de knoppenbalk over de titel (gemeten: 22 px
   overlap op 360-430 px). Oorzaak: kop en balk stonden allebei absoluut op een
   vaste top, terwijl de titel daar over twee regels loopt. Ze staan nu onder
   elkaar in de stroom; relative in plaats van static, anders schildert het
   absoluut gepositioneerde canvas eroverheen. */
@media(max-width:900px){
  .viewer{display:flex;flex-direction:column;align-items:flex-start;
    padding:16px 14px 0}
  .heading{position:relative;z-index:3;top:auto;left:auto;
    margin:0 0 14px;padding:8px 16px 10px}
  .view-controls{position:relative;z-index:3;top:auto;left:auto;right:auto;
    width:100%;margin:0;max-width:none}
}