:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#1f2e54;background:#eef3f5}*{box-sizing:border-box}body{margin:0;background:#eef3f5;color:#20305a}header{height:84px;background:#fffffff2;display:flex;justify-content:space-between;align-items:center;padding:0 34px;border-bottom:1px solid #dfe7eb;position:relative;z-index:5}.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%,#f6f9fa 0,#dbe9ec 61%,#c9dadd 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:#139ab8;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:#ffffffdf;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}.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}.zones h3{font-size:14px}.zones>div{display:grid;grid-template-columns:58px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid #edf1f3}.zones b{font-size:13px;color:#20a4c3}.zones span{font-size:13px;color:#59687a;line-height:1.4}figure{margin:22px 0 0}figure img{display:block;width:100%;height:135px;object-fit:cover;border-radius:10px}figcaption{font-size:11px;color:#768394;margin-top:7px}.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){.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}
}