:root{
  --bg:#F7F9FC; --card:#FFFFFF; --ink:#101826; --ink2:#3F4A5C; --mute:#6B7688;
  --line:#E2E7EF; --line2:#EEF1F6;
  --blue:#1D4ED8; --blue-d:#1739A8; --blue-l:#EAF0FE; --blue-t:#3B6BE8;
  --teal:#0E7C86; --green:#16794C; --amber:#B45309; --red:#B42318;
  --ink-grad:linear-gradient(135deg,#0F1D3D 0%,#14306B 55%,#1D4ED8 100%);
  --disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
  --sh:0 1px 2px rgba(16,24,38,.04),0 4px 16px rgba(16,24,38,.06);
  --sh-lg:0 8px 40px rgba(16,24,38,.12);
  --r:10px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
@media(max-width:480px){.wrap{padding:0 24px}}
.hidden{display:none !important}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- header ---------- */
.top{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.masthead{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);flex:0 0 auto}
.brandwrap{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hpowered{font-family:var(--mono);font-size:11.5px;color:var(--mute);white-space:nowrap}
.hpowered:hover{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.hpowered{display:none}}
.brand:hover{text-decoration:none}
.brand .logo{display:inline-flex}
.brand .mark{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.brand .mark b{color:var(--blue)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:2px;margin-left:0;flex:1 1 auto;min-width:0}
.nav>a,.navdrop-top{display:inline-flex;align-items:center;gap:5px;color:var(--ink2);font-size:14.5px;font-weight:500;padding:8px 12px;border-radius:7px;white-space:nowrap}
.nav>a:hover,.navdrop-top:hover{background:var(--blue-l);color:var(--blue);text-decoration:none}
.nav>a.here,.navdrop-top.here{color:var(--blue);background:var(--blue-l)}
.cta{background:var(--blue);color:#fff;font-weight:600;font-size:14.5px;padding:9px 18px;border-radius:8px;white-space:nowrap}
.cta:hover{background:var(--blue-d);text-decoration:none}

/* uitklapmenu: het pijltje staat in dezelfde link als de tekst */
.navdrop{position:relative;display:flex}
.navdrop-chevron{flex:0 0 auto;color:var(--mute);transition:transform .15s ease}
.navdrop-top:hover .navdrop-chevron{color:var(--blue)}
.navdrop.open .navdrop-chevron,.navdrop:hover .navdrop-chevron,.navdrop:focus-within .navdrop-chevron{transform:rotate(180deg)}
/* het paneel begint direct onder de link; padding-top is de brug waar de
   muis overheen gaat, zodat de hover onderweg niet wegvalt */
.navdrop-panel{position:absolute;top:100%;left:0;min-width:260px;padding-top:10px;display:none;z-index:50}
.navdrop-inner{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:8px}
.navdrop:hover .navdrop-panel,.navdrop:focus-within .navdrop-panel,.navdrop.open .navdrop-panel{display:block}
.navdrop-head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:8px 10px 4px}
.navdrop-panel a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink)}
.navdrop-panel a:hover{background:var(--blue-l);text-decoration:none}
.navdrop-panel a.here{background:var(--blue-l)}
.navdrop-lbl{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.navdrop-panel a:hover .navdrop-lbl{color:var(--blue)}
.navdrop-desc{display:block;font-size:12.5px;line-height:1.45;color:var(--mute);margin-top:1px}

/* mobiele menuknop */
.navtoggle{display:none;align-items:center;gap:8px;margin-left:auto;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.navtoggle-bars{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:16px}
.navtoggle-bars i{display:block;height:2px;background:var(--ink);border-radius:2px}

@media(max-width:900px){
  .masthead{gap:14px;height:auto;min-height:60px;flex-wrap:wrap;padding-top:0}
  .navtoggle{display:inline-flex}
  .nav{display:none;order:3;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:0;margin:0 0 12px;padding-top:8px;border-top:1px solid var(--line2)}
  .nav.open{display:flex}
  .nav>a,.navdrop-top{padding:11px 10px;font-size:16px}
  .navdrop{flex-direction:column}
  .navdrop-panel{position:static;display:none;min-width:0;padding:0 0 6px 10px}
  .navdrop-inner{border:0;box-shadow:none;background:transparent;padding:0}
  /* geen hover op mobiel: de link navigeert direct naar /converters,
     die alle converters op een rij toont */
  .navdrop:hover .navdrop-panel,.navdrop:focus-within .navdrop-panel{display:none}
  .navdrop-desc{display:none}
}

/* ---------- crumbs ---------- */
.crumbs{background:var(--card);border-bottom:1px solid var(--line2)}
.crumbs .wrap{display:flex;align-items:center;gap:8px;padding:11px 22px;font-size:13px;color:var(--mute)}
.crumbs a{color:var(--mute)} .crumbs a:hover{color:var(--blue)}
.crumbs i{font-style:normal;color:var(--line)}
.crumbs span[aria-current]{color:var(--ink2);font-weight:500}

/* ---------- ads ---------- */
.ad{margin:22px 0;text-align:center}
.ad-lbl{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#AAB2C0;margin-bottom:5px}
.ad-slot{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:var(--r);background:var(--card);color:#B7BECB;font-family:var(--mono);font-size:11px;min-height:90px}
.ad-slot.tall{min-height:250px}
.ad-slot-media{display:block;border:0;background:transparent;min-height:0;padding:0}
.ad-slot-media a{display:block;line-height:0}
.ad-media{display:block;max-width:100%;width:auto;height:auto;max-height:360px;object-fit:contain;margin:0 auto;border-radius:8px}
.ad-side .ad-media{max-height:420px}

/* ---------- hero ---------- */
.hero{padding:56px 0 28px}
.hero-txt{max-width:760px}
.kicker{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);background:var(--blue-l);padding:6px 12px;border-radius:999px;margin-bottom:18px}
h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.004em;font-size:clamp(38px,6vw,64px);line-height:.98;margin:0}
h1 em{font-style:normal;color:var(--blue)}
.lede{font-size:19px;color:var(--ink2);margin:18px 0 0;max-width:60ch}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-left:30px;color:var(--ink2);font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--blue-l);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231D4ED8'%3E%3Cpath d='M8 13.2 4.8 10l-1.2 1.2L8 15.6 16.4 7.2 15.2 6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}

/* ---------- dropzone ---------- */
.drop{position:relative;display:block;margin:8px 0 0;background:var(--card);border:2px dashed #C4D0E4;border-radius:16px;
  padding:44px 26px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;box-shadow:var(--sh)}
.drop:hover,.drop:focus-visible{border-color:var(--blue);background:#FCFDFF;outline:none;box-shadow:var(--sh-lg)}
.drop.hot{border-color:var(--blue);background:var(--blue-l)}
.drop i.c1,.drop i.c2,.drop::before,.drop::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--blue);pointer-events:none;opacity:0}
.drop-ico{color:var(--blue);margin-bottom:8px;display:inline-flex}
.drop h2{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:26px;margin:0 0 4px;color:var(--ink)}
.drop p{margin:0;color:var(--mute);font-size:14.5px}
.drop .ext{font-family:var(--mono);color:var(--blue);font-size:13px}
.drop input[type=file]{display:none}

.progress{display:none;margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.progress.on{display:block}
.bar{height:6px;background:var(--line2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--blue-t),var(--blue));transition:width .2s;border-radius:99px}
.progress .lbl{font-family:var(--mono);font-size:12px;color:var(--ink2);margin-top:9px}

.alert{display:none;margin-top:14px;padding:13px 16px;font-size:14.5px;border:1px solid;border-radius:var(--r)}
.alert.on{display:block}
.alert.err{background:#FEF3F2;border-color:#FDA29B;color:var(--red)}
.alert.warn{background:#FFFAEB;border-color:#FEDF89;color:var(--amber)}
.alert.ok{background:#ECFDF3;border-color:#A6F4C5;color:var(--green)}

.preview-limit{margin:18px 0 -8px;padding:11px 14px;border:1px solid #FEDF89;border-radius:9px;
  background:#FFFAEB;color:var(--amber);font-size:13.5px;line-height:1.45}
.preview-limit.hidden{display:none}

/* ---------- result ---------- */
.grid{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start;margin-top:26px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin-bottom:18px}
.panel>h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);
  margin:0;padding:13px 15px;border-bottom:1px solid var(--line2);font-weight:500;background:#FBFCFE;
  display:flex;justify-content:space-between;align-items:center}
.panel>h3 button{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--mute);padding:4px 9px;border-radius:6px;cursor:pointer}
.panel>h3 button:hover{color:var(--blue);border-color:var(--blue)}
.scroll{max-height:520px;overflow:auto}
.catrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:11px 15px 5px;border-bottom:1px solid var(--line2);background:#FCFDFE;position:sticky;top:0}
.lrow{display:flex;align-items:center;gap:9px;padding:7px 15px;border-bottom:1px solid var(--line2);cursor:pointer}
.lrow:hover{background:#F9FBFE}
.lrow input{accent-color:var(--blue);width:15px;height:15px;flex:none;cursor:pointer}
.sw{width:12px;height:12px;flex:none;border:1px solid rgba(0,0,0,.25);border-radius:3px}
.lname{font-family:var(--mono);font-size:11px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:left}
.cnt{font-family:var(--mono);font-size:11px;color:var(--mute);flex:none;min-width:42px;text-align:right}
.lrow.off .lname,.lrow.off .cnt{opacity:.34}

.sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:var(--sh)}
.model{position:relative;background:#0C1220;border-radius:8px;aspect-ratio:16/10;min-height:340px;overflow:hidden;cursor:crosshair}
.model svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.readout{position:absolute;left:9px;bottom:9px;font-family:var(--mono);font-size:10.5px;color:#96A0B4;background:rgba(12,18,32,.82);padding:3px 8px;border-radius:5px;pointer-events:none;z-index:2}
.hint{position:absolute;right:9px;top:9px;font-family:var(--mono);font-size:10px;color:#5C6678;pointer-events:none;z-index:2}
.tb{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:10px}
@media(max-width:640px){.tb{grid-template-columns:repeat(2,1fr)}}
.tb div{background:var(--card);padding:11px 13px;min-width:0}
.tb .k{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:block}
.tb .v{font-family:var(--disp);font-size:22px;font-weight:600;line-height:1.15;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.tb .v small{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--mute)}

.actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:18px}
.btn{font-family:var(--body);font-weight:600;font-size:15px;background:var(--blue);color:#fff;border:1px solid var(--blue);padding:12px 24px;border-radius:9px;cursor:pointer;transition:background .12s,transform .06s;display:inline-block}
.btn-cooldown{opacity:.7;cursor:default;pointer-events:none}
.btn:hover{background:var(--blue-d);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--line2);border-color:var(--line);color:var(--mute);cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink2);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.btn.lg{font-size:17px;padding:14px 30px;border-radius:10px}
.btn.sm{font-size:13.5px;padding:8px 16px}
.note{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin:14px 0 0}

/* ---------- steps ---------- */
.steps{margin:64px 0 0}
.steps h2,.prose h2{font-family:var(--disp);text-transform:uppercase;font-size:30px;font-weight:600;margin:0 0 22px;letter-spacing:.01em}
.stepgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.stepgrid{grid-template-columns:1fr}}
.stepgrid li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh);position:relative}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--ink-grad);color:#fff;font-family:var(--disp);font-size:22px;font-weight:700;margin-bottom:14px}
.stepgrid h3{font-family:var(--disp);text-transform:uppercase;font-size:20px;font-weight:600;margin:0 0 6px}
.stepgrid p{margin:0;color:var(--ink2);font-size:14.5px}

/* ---------- prose ---------- */
.prose{margin:56px 0 0}
.prose.two{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media(max-width:800px){.prose.two{grid-template-columns:1fr;gap:34px}}
.prose h2{font-size:26px;margin-bottom:12px}
.prose h3{font-family:var(--disp);text-transform:uppercase;font-size:18px;font-weight:600;margin:22px 0 4px}
.prose p{margin:0 0 13px;color:var(--ink2);font-size:15.5px}
.prose code{font-family:var(--mono);font-size:12.5px;background:var(--blue-l);color:var(--blue-d);padding:2px 6px;border-radius:5px;word-break:break-all}
.more a{font-weight:600}

/* ---------- article ---------- */
.article{padding:14px 0 20px;max-width:860px}
.article.narrow{max-width:760px}
.art-head{padding:26px 0 30px;border-bottom:1px solid var(--line);margin-bottom:30px}
.art-head h1{font-size:clamp(34px,5vw,52px)}
.art-head .lead{font-size:19px;color:var(--ink2);margin:16px 0 0;max-width:64ch}
.art-head .btn{margin-top:24px}
.art-body{font-size:16.5px;color:var(--ink2)}
.art-body h2{font-family:var(--disp);text-transform:uppercase;font-size:28px;font-weight:600;color:var(--ink);margin:38px 0 12px;letter-spacing:.01em}
.art-body h3{font-family:var(--disp);text-transform:uppercase;font-size:19px;font-weight:600;color:var(--ink);margin:26px 0 6px}
.art-body p{margin:0 0 15px}
.art-body code{font-family:var(--mono);font-size:13px;background:var(--blue-l);color:var(--blue-d);padding:2px 6px;border-radius:5px;word-break:break-all}
.code-lead{margin:0 0 16px}
.code-lead code{font-size:15px;padding:8px 14px;display:inline-block}
.numbered{counter-reset:n;list-style:none;margin:0 0 18px;padding:0}
.numbered li{counter-increment:n;position:relative;padding:4px 0 14px 44px;margin:0}
.numbered li::before{content:counter(n);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:8px;background:var(--blue-l);color:var(--blue-d);font-family:var(--disp);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center}
.examples{list-style:none;margin:0 0 18px;padding:0}
.examples li{position:relative;padding:6px 0 6px 26px;border-bottom:1px solid var(--line2)}
.examples li::before{content:"";position:absolute;left:2px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.examples code{font-size:12.5px}
.spec{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:14.5px}
.spec th,.spec td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.spec th{background:#FBFCFE;font-weight:600;color:var(--ink);white-space:nowrap;width:34%}
.qa{border:1px solid var(--line);border-radius:var(--r);margin:0 0 10px;background:var(--card);overflow:hidden}
.qa summary{cursor:pointer;padding:15px 18px;font-weight:600;color:var(--ink);list-style:none;position:relative;padding-right:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--blue);font-weight:400}
.qa[open] summary::after{content:"−"}
.qa summary:hover{color:var(--blue)}
.qa p{margin:0;padding:0 18px 16px;color:var(--ink2);font-size:15px}
.qa a{font-weight:500}
.related{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--mute)}
.related a{font-weight:500}

/* cta-band */
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--ink-grad);border-radius:14px;padding:28px 32px;margin:38px 0;color:#fff;box-shadow:var(--sh-lg)}
.cta-band h2{color:#fff;margin:0 0 4px;font-size:26px}
.cta-band p{margin:0;color:rgba(255,255,255,.82);font-size:15px}
.cta-band .btn{background:#fff;color:var(--blue-d);border-color:#fff;flex:none}
.cta-band .btn:hover{background:#EAF0FE}

/* vergelijking gratis vs betaald */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 22px}
@media(max-width:640px){.compare{grid-template-columns:1fr}}
.compare-col{border-radius:var(--r);padding:22px 24px;border:1px solid var(--line)}
.compare-col.free{background:var(--blue-l);border-color:#C3D4FB}
.compare-col.paid{background:var(--card)}
.compare-col h3{font-family:var(--disp);text-transform:uppercase;font-size:20px;font-weight:600;margin:0 0 14px;color:var(--ink)}
.checks,.crosses{list-style:none;margin:0;padding:0}
.checks li,.crosses li{position:relative;padding:6px 0 6px 28px;font-size:14.5px;color:var(--ink2)}
.checks li::before{content:"✓";position:absolute;left:0;top:5px;color:var(--green);font-weight:700}
.crosses li::before{content:"×";position:absolute;left:2px;top:4px;color:var(--mute);font-weight:700;font-size:17px}

/* ---------- footer ---------- */
.foot{background:#0D1524;color:#9AA6B8;margin-top:72px;padding:48px 0 26px}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media(max-width:760px){.footgrid{grid-template-columns:1fr 1fr;gap:26px}}
.fbrand{font-family:var(--disp);text-transform:uppercase;font-size:24px;font-weight:700;color:#fff;margin:0 0 10px}
.fbrand b{color:var(--blue-t)}
.fmuted{font-size:14px;color:#8892A4;margin:0;max-width:38ch}
.fhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B7688;margin:0 0 12px}
.footgrid a{display:block;color:#B8C2D2;font-size:14.5px;padding:4px 0}
.footgrid a:hover{color:#fff;text-decoration:none}
.fbar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;color:#6B7688}
.fbar .fine{font-family:var(--mono);font-size:11px;max-width:60ch}
.fbar .fine a{color:#9AA6B8;text-decoration:underline;text-underline-offset:2px}
.fbar .fine a:hover{color:#fff}
.fbar a.fpowered{color:#9AA6B8;text-decoration:underline;text-underline-offset:2px}
.fbar a.fpowered:hover{color:#fff}

/* ---------- cookiebanner ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 30px rgba(16,24,38,.12)}
.cookie-in{display:flex;align-items:center;gap:20px;padding:16px 22px;flex-wrap:wrap}
.cookie-in p{margin:0;flex:1;min-width:260px;font-size:13.5px;color:var(--ink2)}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto}.ohint.busy::before{animation:none}}

/* ingesloten formulier: geen kader, geen scrollbalk, achtergrond van de pagina */
/* Geen min-height: het externe resizer-script moet het iframe ook kleiner kunnen maken. */
.form-embed{margin:0 0 10px;background:transparent}
.form-embed iframe{display:block;width:100%;border:0;background:transparent;overflow:hidden;min-height:0}
.contact-mail{margin:0 0 26px}

/* ---------- onderlegger ---------- */
.overlay-opts{padding:4px 0}
.orow{display:flex;align-items:flex-start;gap:10px;padding:10px 15px;cursor:pointer;border-bottom:1px solid var(--line2)}
.orow:last-child{border-bottom:0}
.orow:hover{background:#F9FBFE}
.orow input{accent-color:var(--blue);width:15px;height:15px;flex:none;margin-top:2px;cursor:pointer}
.orow span{display:flex;flex-direction:column;min-width:0}
.orow strong{font-size:14px;font-weight:600;color:var(--ink)}
.orow em{font-style:normal;font-size:12px;color:var(--mute);margin-top:1px}
.orow input:disabled + span{opacity:.5}
.ohint{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin:0;padding:9px 15px;border-top:1px solid var(--line2);background:#FBFCFE}
.ohint.busy{display:flex;align-items:center;gap:8px;color:var(--ink2)}
.ohint.busy::before{content:"";width:13px;height:13px;flex:0 0 13px;border:2px solid #C8D3E5;border-top-color:var(--blue);border-radius:50%;animation:k2c-spin .8s linear infinite}
@keyframes k2c-spin{to{transform:rotate(360deg)}}

/* ---------- plotvenster ---------- */
.plotwrap{position:fixed;inset:0;z-index:80;background:#0C1220;display:flex;flex-direction:column}
.plotwrap[hidden]{display:none}
.plotbar{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:12px 18px;background:var(--card);
  border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(0,0,0,.2);z-index:2}
.pb-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-group:nth-child(2){flex:1;min-width:240px}
.plotbar label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2);margin:0}
.plotbar select,.plotbar input[type=text]{font:14px var(--body);padding:7px 10px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--ink)}
.plotbar input[type=text]{flex:1;min-width:120px}
.plotbar select:focus,.plotbar input:focus{outline:2px solid var(--blue);outline-offset:-1px}
.pb-check{white-space:nowrap;cursor:pointer}.pb-check input{width:15px;height:15px;margin:0;accent-color:var(--blue);cursor:pointer}
.pb-cov{font-family:var(--mono);font-size:11.5px;color:var(--blue);background:var(--blue-l);padding:6px 10px;border-radius:6px;white-space:nowrap}

.plotstage{position:relative;flex:1;overflow:hidden;cursor:grab;background:#0C1220}
.plotstage.grabbing{cursor:grabbing}
/* breedte en hoogte worden in plot.js gelijk aan de viewBox gezet:
   een SVG-eenheid is dan exact een pixel, zodat de schaal klopt */
.plotstage .plotsvg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.plothint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:11px;color:#8B94A3;background:rgba(12,18,32,.85);padding:6px 12px;border-radius:6px}

/* het vaste blad */
.paper{--paper-k:1;position:absolute;z-index:3;pointer-events:none;box-shadow:0 0 0 9999px rgba(8,12,20,.62),0 10px 40px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.85);background:transparent}
.paper-usable{position:absolute;border:1px dashed rgba(255,255,255,.45)}

/*
 * Preview-overlay in echte bladverhouding. De buitenmaten van legenda en
 * titelblok komen uit millimeters in plot.js; de interne maten schalen nu met
 * exact dezelfde px/mm-factor. Een kleine leesbaarheidsvloer voorkomt dat
 * tekst op A0/A1 bij fit-to-screen letterlijk enkele pixels hoog wordt.
 */
.paper-legend{position:absolute;z-index:2;background:rgba(255,255,255,.97);
  box-sizing:border-box;border:max(1px,calc(.25px * var(--paper-k))) solid rgba(20,30,50,.78);
  color:#101826;padding:calc(3px * var(--paper-k));overflow:hidden;display:flex;
  flex-direction:column;gap:calc(.45px * var(--paper-k))}
.paper-legend[hidden]{display:none}
.paper-legend-title{font-family:var(--mono);font-weight:700;
  font-size:clamp(7px,calc(2.65px * var(--paper-k)),12px);letter-spacing:.12em;
  padding-bottom:calc(1.2px * var(--paper-k));margin-bottom:calc(.45px * var(--paper-k));
  border-bottom:max(1px,calc(.18px * var(--paper-k))) solid #B8C0CC}
.paper-legend-row{display:flex;align-items:center;gap:calc(3px * var(--paper-k));
  min-height:calc(5.5px * var(--paper-k));
  font-size:clamp(6px,calc(2.47px * var(--paper-k)),11px);line-height:1;white-space:nowrap}
.paper-legend-row i{display:block;width:calc(11px * var(--paper-k));height:max(1.5px,calc(.53px * var(--paper-k)));
  border-radius:2px;flex:none}
.paper-legend-row span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.paper-block{position:absolute;right:0;bottom:0;width:34%;max-width:210px;min-height:52px;
  box-sizing:border-box;background:rgba(255,255,255,.94);
  border:max(1px,calc(.25px * var(--paper-k))) solid rgba(20,30,50,.7);border-right:0;border-bottom:0;
  padding:calc(2.2px * var(--paper-k));display:flex;flex-direction:column;
  gap:calc(.35px * var(--paper-k));overflow:hidden}
.paper-block span{font-family:var(--mono);font-size:clamp(6px,calc(1.76px * var(--paper-k)),9px);
  letter-spacing:.14em;color:#8A93A2}
.paper-block b{font-size:clamp(10px,calc(3.70px * var(--paper-k)),18px);font-weight:700;color:#101826;line-height:1.08;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paper-block > span:nth-of-type(2){font-family:var(--body);font-size:clamp(8px,calc(2.82px * var(--paper-k)),14px);
  letter-spacing:0;color:#3F4A5C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paper-block i{font-style:normal;font-family:var(--mono);font-size:clamp(7px,calc(1.94px * var(--paper-k)),11px);
  color:#6B7688;margin-top:auto}
.paper-block em{font-style:normal;font-family:var(--mono);font-size:clamp(6px,calc(1.76px * var(--paper-k)),9px);
  color:#3F4A5C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paper-note{position:absolute;z-index:2;box-sizing:border-box;background:rgba(255,255,255,.96);
  border:max(1px,calc(.18px * var(--paper-k))) solid rgba(20,30,50,.7);color:#303A49;
  padding:0 calc(2.2px * var(--paper-k));display:flex;align-items:center;overflow:hidden;
  white-space:nowrap;font-family:var(--body);font-size:clamp(6px,calc(1.90px * var(--paper-k)),10px)}
@media(max-width:700px){
  .plotbar{gap:12px;padding:10px 12px}
  .pb-group:nth-child(2){order:3;width:100%}
  .paper-block{width:44%}
}


/* ---------- download wachtdialoog ---------- */
html.download-gate-open{overflow:hidden}
.download-gate{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:22px}
.download-gate[hidden]{display:none}
.download-gate-backdrop{position:absolute;inset:0;background:rgba(8,13,23,.72);backdrop-filter:blur(2px)}
.download-gate-card{position:relative;z-index:1;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 44px);overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.28);padding:24px}
.download-gate-main{display:flex;align-items:center;gap:16px}
.download-gate-main h2{font-family:var(--disp);font-size:24px;line-height:1.1;text-transform:uppercase;margin:0 0 6px;color:var(--ink)}
.download-gate-main p{margin:0;color:var(--ink2);font-size:14.5px}
.download-gate-main strong{color:var(--blue);font-size:17px;font-variant-numeric:tabular-nums}
.download-gate-spinner{width:38px;height:38px;flex:0 0 38px;border:4px solid #D9E2F0;border-top-color:var(--blue);border-radius:50%;animation:k2c-spin .8s linear infinite}
.download-gate-ad{margin-top:22px;padding-top:17px;border-top:1px solid var(--line2)}
.download-gate-ad[hidden]{display:none}
.download-gate-ad-label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);text-align:center;margin-bottom:8px}
.download-gate-ad-inner{min-height:70px;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.download-gate-ad-inner>img,.download-gate-ad-inner>a>img,.download-gate-ad-inner video{max-width:100%;height:auto}
@media(max-width:560px){
  .download-gate-card{padding:20px}
  .download-gate-main{align-items:flex-start;gap:13px}
  .download-gate-main h2{font-size:21px}
  .download-gate-spinner{width:32px;height:32px;flex-basis:32px;border-width:3px}
}


/* ---------- verantwoording van de conversie ---------- */
.report{border-radius:var(--r);border:1px solid;padding:14px 16px;margin:0 0 18px;font-size:14.5px}
.report[hidden]{display:none}
.report.ok{background:#ECFDF3;border-color:#A6F4C5;color:var(--green)}
.report.warn{background:#FFFAEB;border-color:#FEDF89;color:var(--amber)}
.report.err{background:#FEF3F2;border-color:#FDA29B;color:var(--red)}
.rsum{margin:0;font-weight:600;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.ricon{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;background:currentColor}
.report.ok .ricon,.report.warn .ricon,.report.err .ricon{color:#fff}
.report.ok .ricon{background:var(--green)}
.report.warn .ricon{background:var(--amber)}
.report.err .ricon{background:var(--red)}
.rlist{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid currentColor;padding-top:10px}
.rlist{border-color:rgba(0,0,0,.12)}
.rlist li{padding:5px 0;color:var(--ink2);font-size:13.5px;line-height:1.5}
.rlist li b{font-weight:700;margin-right:4px}
.rlist li.error b{color:var(--red)}
.rlist li.warn b{color:var(--amber)}
.rlist li.info b{color:var(--mute)}
.rn{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.rs{display:block;font-family:var(--mono);font-size:11.5px;color:var(--mute);margin-top:2px}

/* ================= BGT naar CAD ================= */
/* De schil komt van KLIC2CAD; hieronder alleen wat specifiek is voor de
   kaartselectie. Alles is gescoped onder .bgtapp zodat de rest van de site
   er niets van merkt. */
.bgtapp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh);margin:8px 0 0}
.bgtapp .appcard{background:#fff;border:1px solid #dce3e7;border-radius:15px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:36px}.bgtapp .steps{display:flex;border-bottom:1px solid var(--line);background:#fafbfb}.bgtapp .steps span{padding:13px 20px;font-size:13px;font-weight:700;color:#8a949c;border-right:1px solid var(--line)}.bgtapp .steps .active{color:var(--blue);background:#fff}.bgtapp .toolbar{display:flex;gap:9px;padding:16px;align-items:stretch;flex-wrap:wrap}.bgtapp .searchbox{position:relative;display:flex;min-width:330px;flex:1}.bgtapp .searchbox input{width:100%;border:1px solid #cbd5db;border-radius:8px 0 0 8px;padding:11px 13px;outline:none}.bgtapp .searchbox input:focus{border-color:#70a9d7;box-shadow:0 0 0 3px rgba(39,124,198,.1)}.bgtapp .searchbox button{border-radius:0 8px 8px 0}.bgtapp .suggest{display:none;position:absolute;left:0;right:0;top:45px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px rgba(20,40,60,.15);z-index:1001;overflow:hidden}.bgtapp .suggest.open{display:block}.bgtapp .suggest button{display:block;width:100%;padding:10px 12px;border:0;border-bottom:1px solid #edf0f2;background:#fff;text-align:left;color:var(--ink);cursor:pointer}.bgtapp .suggest button:hover{background:#f3f7fa}.bgtapp .suggest small{display:block;color:#84909a;margin-top:1px}.bgtapp .suggest .empty{padding:11px;color:var(--muted)}.bgtapp #map{position:relative;z-index:0;height:490px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#e9eef0}.bgtapp .selectionbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px;background:#f8fafb;border-bottom:1px solid var(--line)}.bgtapp .selectionbar strong{font-size:13px}.bgtapp .selectionbar span{font-size:12px;color:var(--muted)}.bgtapp .selectionbar .limit{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:20px;padding:4px 8px}.bgtapp .selectionbar.invalid strong{color:#aa342a}.bgtapp .selectionbar.valid strong{color:#347725}.bgtapp .sourcegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}.bgtapp .source{display:grid;grid-template-columns:18px 11px 1fr;gap:9px;align-items:start;padding:13px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}.bgtapp .source:has(input:checked){background:#f8fbfd;border-color:#bdcfdb}.bgtapp .source input{margin:3px 0}.bgtapp .source .dot{width:10px;height:10px;border-radius:50%;margin-top:5px}.bgtapp .dot.bgt{background:#718975}.bgtapp .dot.bag{background:var(--orange)}.bgtapp .dot.kad{background:var(--magenta)}.bgtapp .source b{display:block}.bgtapp .source small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.bgtapp .actionrow{padding:0 16px 18px;display:flex;align-items:center;gap:14px}.bgtapp .actionrow .primary{min-width:175px}.bgtapp .actionrow #progress{font-size:13px;color:var(--muted)}.bgtapp .resulthead{display:flex;justify-content:space-between;align-items:start;gap:14px}.bgtapp .resulthead p{margin:0;color:var(--muted);font-size:13px}.bgtapp .notice{background:#fff8e8;border:1px solid #f1dfad;padding:9px 11px;border-radius:8px;margin:12px 0;font-size:12px;color:#705d27}.bgtapp .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 12px;margin:14px 0 20px;max-height:300px;overflow:auto;padding-right:4px}.bgtapp .layer{display:grid;grid-template-columns:18px 10px 1fr auto;gap:7px;align-items:center;padding:7px 8px;background:#f8fafb;border-radius:7px;font-size:12px}.bgtapp .layer .swatch{height:9px;width:9px;border-radius:2px}.bgtapp .layer .count{color:#87929b;font-variant-numeric:tabular-nums}.bgtapp .exports{display:grid;grid-template-columns:1fr 1.25fr;gap:13px}.bgtapp .exportbox{border:1px solid var(--line);border-radius:11px;padding:15px;background:#fbfcfc}.bgtapp .exportbox h3{margin:0 0 4px}.bgtapp .exportbox p{margin:0 0 13px;color:var(--muted);font-size:12px}.bgtapp .pdfopts select, .bgtapp .exportbox>input{display:block;width:100%;margin-top:4px;padding:8px 9px;border:1px solid #ccd6dc;border-radius:7px;background:#fff}.bgtapp .exportbox>input{margin:7px 0}.bgtapp .exportbox>.primary{margin-top:4px}.bgtapp .sourcegrid, .bgtapp .layers{grid-template-columns:1fr 1fr}.bgtapp .exports{grid-template-columns:1fr}.bgtapp #map{height:430px}.bgtapp .toolbar{display:grid;grid-template-columns:1fr 1fr}.bgtapp .searchbox{grid-column:1/-1;min-width:0}.bgtapp .toolbar .ghost{grid-column:1/-1}.bgtapp .sourcegrid, .bgtapp .layers{grid-template-columns:1fr}.bgtapp .selectionbar{align-items:flex-start;flex-direction:column;gap:5px}.bgtapp .steps span{padding:10px 11px;font-size:11px}.bgtapp #map{height:390px}.bgtapp /* v1.1 */
.drawhint{padding:9px 16px;background:#eaf5ff;border-top:1px solid #c7dff2;color:#285c80;font-size:13px;font-weight:650}.bgtapp .drawhint[hidden]{display:none}.bgtapp .layers.grouped{display:block}.bgtapp .layergroup{margin:12px 0 16px;border:1px solid var(--line);border-radius:10px;overflow:hidden}.bgtapp .layergroup h4{margin:0;padding:8px 11px;background:#f7f9fa;border-bottom:1px solid var(--line);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.bgtapp .layergroup .layer{display:grid;grid-template-columns:18px 14px 1fr auto;gap:7px;align-items:center;padding:7px 10px;border-bottom:1px solid #edf0f2}.bgtapp .layergroup .layer:last-child{border-bottom:0}.bgtapp .layergroup .swatch{width:12px;height:3px;border-radius:2px}.bgtapp .layergroup .count{font-size:11px;color:var(--muted)}.loading-modal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:20px}.loading-modal[hidden]{display:none}.loading-backdrop{position:absolute;inset:0;background:rgba(7,14,24,.72);backdrop-filter:blur(2px)}.loading-card{position:relative;z-index:1;width:min(560px,calc(100vw - 32px));background:#fff;border-radius:15px;padding:28px;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.35)}.loading-card h2{margin:4px 0 6px;font-size:24px}.loading-card p{margin:0;color:var(--muted)}.hourglass{font-size:34px}.loading-spinner{width:30px;height:30px;margin:18px auto;border:3px solid #dbe5ec;border-top-color:var(--blue);border-radius:50%;animation:k2c-spin .8s linear infinite}.loading-ad{margin-top:18px;min-height:100px;border:1px dashed #cbd5dc;border-radius:9px;background:#fafbfc;display:grid;place-items:center;color:#9aa4ac;font-size:12px}.bgtapp /* v1.3 - echte voortgang + losse PDF-pagina */
.loading-progress{height:10px;margin:18px 0 7px;background:#edf2f5;border-radius:999px;overflow:hidden}.loading-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#277cc6,#75ad24);border-radius:inherit;transition:width .35s ease}.loading-progress-row{display:flex;align-items:center;gap:10px;text-align:left}.loading-progress-row strong{min-width:46px;font-size:17px;color:#276fa9}.loading-progress-row span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.large-area-note{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:9px 11px;border-radius:8px;background:#fff6df;border:1px solid #efdba4;text-align:left;font-size:12px;color:#725c22}.large-area-note[hidden]{display:none}.large-area-note b{white-space:nowrap}.loading-card .loading-ad{margin-top:16px}.bgtapp /* v1.7 - vertraagde melding bij lange PDOK-opdrachten */
.slow-load-note{display:flex;gap:8px;align-items:flex-start;margin:9px 0 0;padding:9px 11px;border-radius:8px;background:#eef6fb;border:1px solid #c9dfed;text-align:left;font-size:12px;color:#315b75}.slow-load-note[hidden]{display:none}.slow-load-note b{white-space:nowrap}
/* BGT-knoppen en velden op de KLIC2CAD-stijl zetten */
.bgtapp button{font-family:var(--body);font-weight:600;font-size:14.5px;border-radius:8px;
  padding:10px 18px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2)}
.bgtapp button:hover{border-color:var(--blue);color:var(--blue)}
.bgtapp button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.bgtapp button.primary:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.bgtapp button.primary:disabled{background:var(--line2);border-color:var(--line);color:var(--mute);cursor:not-allowed}
.bgtapp button.small{font-size:13px;padding:7px 13px}
.bgtapp input[type=text],.bgtapp input:not([type]){font-family:var(--body);font-size:14.5px;
  padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%}
.bgtapp input:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.bgtapp .searchbox{display:flex;gap:8px;position:relative;flex:1;min-width:240px}
.bgtapp .toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.bgtapp .steps{display:flex;gap:6px;margin-bottom:14px}
.bgtapp .steps span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);background:#F4F6FA;padding:6px 12px;border-radius:99px}
.bgtapp .steps span.active{background:var(--blue-l);color:var(--blue-d);font-weight:600}
.bgtapp #map{height:420px;border-radius:var(--r);border:1px solid var(--line);margin:0 0 12px}
.bgtapp .selectionbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  background:#F7F9FC;border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;margin-bottom:16px;font-size:14px}
.bgtapp .selectionbar .limit{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.bgtapp .sourcegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(max-width:760px){.bgtapp .sourcegrid{grid-template-columns:1fr}}
.bgtapp .source{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;cursor:pointer;background:#fff}
.bgtapp .source:hover{border-color:var(--blue);background:#FBFCFF}
.bgtapp .source input{width:16px;height:16px;accent-color:var(--blue);margin-top:2px;flex:none}
.bgtapp .source b{display:block;font-size:14.5px;color:var(--ink)}
.bgtapp .source small{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.bgtapp .source .dot{display:none}
.bgtapp .actionrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bgtapp .exports{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:760px){.bgtapp .exports{grid-template-columns:1fr}}
.bgtapp .exportbox{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:#FBFCFE}
.bgtapp .exportbox h3{font-family:var(--disp);text-transform:uppercase;font-size:19px;margin:0 0 5px}
.bgtapp .exportbox p{font-size:13.5px;color:var(--ink2);margin:0 0 12px}
.bgtapp .layers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:14px 0}
.bgtapp .layergroup{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff}
.bgtapp .layergroup h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin:0 0 8px;font-weight:500}
.bgtapp .layer{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;cursor:pointer}
.bgtapp .layer .swatch{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.2);flex:none}
.bgtapp .layer .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--mute)}
.bgtapp .layer input{width:14px;height:14px;accent-color:var(--blue);flex:none}
.bgtapp .notice{background:#FFFAEB;border:1px solid #FEDF89;color:var(--amber);border-radius:8px;
  padding:9px 12px;font-size:13.5px;margin-bottom:8px}
.bgtapp .suggest{position:absolute;top:100%;left:0;right:0;z-index:20;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:var(--sh-lg);margin-top:4px;max-height:260px;overflow:auto;display:none}
.bgtapp .suggest.open{display:block}
.bgtapp .suggest button{display:flex;flex-direction:column;align-items:flex-start;width:100%;border:0;
  border-radius:0;background:none;padding:9px 13px;text-align:left;font-weight:500}
.bgtapp .suggest button:hover{background:var(--blue-l)}
.bgtapp .suggest small{color:var(--mute);font-size:12px;font-weight:400}
.bgtapp .suggest .empty{padding:11px 13px;color:var(--mute);font-size:13.5px}
.bgtapp .drawhint{background:var(--blue-l);color:var(--blue-d);border-radius:8px;padding:9px 13px;
  font-size:13.5px;margin-bottom:10px}
.bgtapp .resulthead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.bgtapp .resulthead h2{font-family:var(--disp);text-transform:uppercase;font-size:22px;margin:0}
.bgtapp .resulthead p{margin:3px 0 0;color:var(--ink2);font-size:14px}
.bgtapp .result.hidden{display:none}

/* verwijzing naar de BGT-sectie op de homepage */
.crosslink{margin:56px 0 0}
.cl-card{background:var(--ink-grad);border-radius:14px;padding:32px 34px;color:#fff;box-shadow:var(--sh-lg)}
.cl-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.16);padding:5px 11px;border-radius:99px;margin-bottom:12px}
.cl-card h2{font-family:var(--disp);text-transform:uppercase;font-size:30px;font-weight:600;margin:0 0 8px;color:#fff}
.cl-card p{margin:0 0 20px;color:rgba(255,255,255,.85);font-size:15.5px;max-width:62ch}
.cl-card .btn{background:#fff;color:var(--blue-d);border-color:#fff}
.cl-card .btn:hover{background:#EAF0FE;color:var(--blue-d)}

/* advertentieplek in de voettekst */
.footad{padding:0 22px}
.footad .ad{margin:0 0 26px}
.footad .ad-lbl{color:#6B7688}
.footad .ad-slot{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#6B7688}

/* ======================================================================
   BGT v11 afwerking — compacte bronkeuze, echte laadvoortgang en PDF-editor
   ====================================================================== */

/* De vier databronnen staan op desktop compact naast elkaar. */
.bgtapp .sourcegrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:0 0 16px;
  padding:0;
}
.bgtapp .source{
  min-width:0;
  padding:10px 11px;
  gap:8px;
}
.bgtapp .source b{font-size:13.5px;line-height:1.25}
.bgtapp .source small{font-size:11.5px;line-height:1.35}
@media(max-width:980px){.bgtapp .sourcegrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.bgtapp .sourcegrid{grid-template-columns:1fr}}

/* DXF en PDF blijven even hoog; de actieknoppen staan exact op één lijn. */
.bgtapp .exports{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}
.bgtapp .exportbox{display:flex;flex-direction:column;min-height:174px}
.bgtapp .exportbox p{flex:1}
.bgtapp .exportbox>.primary{align-self:flex-start;margin-top:auto}
@media(max-width:760px){.bgtapp .exports{grid-template-columns:1fr}.bgtapp .exportbox{min-height:0}}

/* De laadpopup staat buiten .bgtapp. Deze selectors moeten daarom bewust
   niet onder .bgtapp gescoped zijn. */
.loading-modal .loading-progress{
  display:block;
  height:12px;
  margin:18px 0 8px;
  background:#E9EEF5;
  border:1px solid #DCE4EE;
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(16,24,38,.05);
}
.loading-modal .loading-progress-fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--blue),#3B6BE8 55%,#16794C);
  border-radius:inherit;
  transition:width .35s ease;
}
.loading-modal .loading-progress-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:24px;
  text-align:left;
}
.loading-modal .loading-progress-row strong{
  min-width:48px;
  font-family:var(--mono);
  font-size:16px;
  color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.loading-modal .loading-progress-row span{
  min-width:0;
  flex:1;
  font-size:12px;
  color:var(--mute);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.loading-modal .large-area-note{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin:14px 0 0;
  padding:10px 11px;
  border-radius:8px;
  background:#FFF6DF;
  border:1px solid #EFD9A0;
  text-align:left;
  font-size:12px;
  line-height:1.45;
  color:#725C22;
}
.loading-modal .large-area-note[hidden]{display:none}
.loading-modal .large-area-note b{white-space:nowrap}

/* ----------------------------------------------------------------------
   BGT PDF-creator. De pagina /bgt/pdf.php gebruikt de bestaande KLIC2CAD-
   plotcomponenten, aangevuld met een objectenpaneel. Alles is gescoped op
   .pdf-page zodat de gewone KLIC-PDF-editor niet wordt beïnvloed.
   ---------------------------------------------------------------------- */
.pdf-page{margin:0;overflow:hidden;background:#0C1220;font-family:var(--body)}
.pdf-page .plotwrap{position:fixed;inset:0;z-index:1;background:#0C1220;display:flex;flex-direction:column}
.pdf-page .plotbar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:10px 12px;
  min-height:56px;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(0,0,0,.22);
  z-index:5;
}
.pdf-page .pb-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pdf-page .pb-group:nth-child(2){flex:1;min-width:320px}
.pdf-page .pb-group:last-child{margin-left:auto}
.pdf-page .plotbar label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink2);margin:0}
.pdf-page .plotbar select,.pdf-page .plotbar input[type=text],.pdf-page .plotbar input:not([type]){
  font:13px var(--body);
  padding:6px 8px;
  border:1px solid #CCD6DD;
  border-radius:7px;
  background:#fff;
  color:var(--ink);
}
.pdf-page .plotbar input[type=text],.pdf-page .plotbar input:not([type]){min-width:100px;flex:1}
.pdf-page .pb-cov{font:11px var(--mono);background:var(--blue-l);color:var(--blue);border-radius:6px;padding:5px 8px;white-space:nowrap}
.pdf-page .pb-check{white-space:nowrap}.pdf-page .pb-check input{width:15px;height:15px;min-width:0;margin:0;accent-color:var(--blue)}
.pdf-page .pdf-make-status{font-size:11px;color:var(--mute);min-width:0}
.pdf-page .plotbody{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:0;flex:1}
.pdf-page .plotlayers{background:#fff;border-right:1px solid #D3D9DE;overflow:auto;padding:10px}
.pdf-page .plotlayers-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pdf-page .plotlayers>p{font-size:12px;line-height:1.45;color:var(--mute);margin:4px 0 11px}
.pdf-page .tiny{font-size:11px;padding:4px 7px}
.pdf-page .plot-layer-group{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;overflow:hidden;background:#fff}
.pdf-page .plot-group-head{display:flex;gap:7px;align-items:center;background:#F6F8FA;padding:7px 8px;border-bottom:1px solid var(--line);font-size:12px}
.pdf-page .plot-group-head input,.pdf-page .plot-layer-row input{width:14px;height:14px;accent-color:var(--blue);margin:0}
.pdf-page .plot-layer-row{display:grid;grid-template-columns:18px 12px minmax(0,1fr) auto;align-items:center;gap:7px;padding:6px 8px;font-size:11.5px;border-bottom:1px solid #EDF0F2;cursor:pointer}
.pdf-page .plot-layer-row:last-child{border-bottom:0}
.pdf-page .plot-layer-row i{width:11px;height:3px;border-radius:2px}
.pdf-page .plot-layer-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-page .plot-layer-row small{font:10px var(--mono);color:#87929B;font-variant-numeric:tabular-nums}
.pdf-page .plotstage{position:relative;overflow:hidden;cursor:grab;background:#0C1220;min-width:0;min-height:240px}
.pdf-page .plotstage.grabbing{cursor:grabbing}
.pdf-page .plotstage .plotsvg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:3}
.pdf-page .plothint{position:absolute;z-index:10;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(12,18,32,.84);color:#AEB7C4;padding:6px 10px;border-radius:6px;font:11px var(--mono);pointer-events:none;white-space:nowrap}
.pdf-page .plotstage .plotpaperbg{position:absolute;z-index:1;overflow:hidden;background:#fff;pointer-events:none}
.pdf-page .plotstage .plotpaperbg img.plotair{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block!important;opacity:1;background:transparent!important;pointer-events:none;will-change:transform;transform:translate(0,0)}
.pdf-page .plotstage .plotpaperbg img.plotair[hidden]{display:none!important}
.pdf-page .paper{z-index:4}
.pdf-page .pdf-error{width:min(620px,calc(100% - 32px));margin:80px auto;background:#fff;padding:28px;border-radius:14px}
.pdf-page .pdf-error h1{margin-top:0}
.pdf-page .linkbtn{display:inline-block;text-decoration:none;padding:10px 14px;border-radius:8px}
@media(max-width:900px){.pdf-page .plotbody{grid-template-columns:210px minmax(0,1fr)}.pdf-page .pb-group:nth-child(2){order:3;width:100%}}
@media(max-width:650px){.pdf-page .plotlayers{display:none}.pdf-page .plotbody{grid-template-columns:1fr}.pdf-page .plotbar{gap:9px}.pdf-page .pb-group:nth-child(2){display:none}}

/* BGT laadvenster - beheerbare advertentiepositie */
.loading-modal .loading-ad[hidden]{display:none!important}
.loading-modal .loading-ad{position:relative;padding:20px 12px 12px;min-height:0;display:block;text-align:center}
.loading-modal .loading-ad-label{position:absolute;top:4px;left:8px;font:9px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9aa4ac}
.loading-modal .loading-ad-inner{min-height:90px;display:grid;place-items:center;overflow:hidden}
.loading-modal .loading-ad-inner ins,.loading-modal .loading-ad-inner iframe{max-width:100%}

/* ----------------------------------------------------------------------
   LUFO naar CAD
   ---------------------------------------------------------------------- */
.lufoapp #lufoMap{position:relative;z-index:0;height:490px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#e9eef0}
.lufo-picker{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(240px,.9fr) minmax(300px,1.45fr);gap:10px;padding:16px;border-bottom:1px solid var(--line);background:#fbfcfd}
.lufo-picker>label,.lufo-choice-info{border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px 12px}
.lufo-picker>label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--ink2)}
.lufo-picker select{width:100%;font:14px var(--body);padding:9px 10px;border:1px solid #cbd5db;border-radius:7px;background:#fff;color:var(--ink)}
.lufo-picker select:focus{outline:2px solid var(--blue);outline-offset:-1px}.lufo-picker select:disabled{background:#f3f5f6;color:var(--mute)}
.lufo-choice-info{display:flex;flex-direction:column;justify-content:center;gap:4px}.lufo-choice-info b{font-size:13.5px;color:var(--ink)}.lufo-choice-info span{font-size:12px;color:var(--mute);line-height:1.4}
.lufo-result-grid{display:grid;grid-template-columns:minmax(320px,1.25fr) minmax(250px,.75fr);gap:14px;margin:14px 0}
.lufo-preview-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f6f8f9}.lufo-preview-card img{display:block;width:100%;height:300px;object-fit:cover;background:#e7ebed}.lufo-preview-card span{display:block;padding:7px 10px;font-size:11px;color:var(--mute);background:#fff;border-top:1px solid var(--line)}
.lufo-result-meta{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px}.lufo-result-meta dl,.lufo-pdf-info dl{margin:0}.lufo-result-meta dt,.lufo-pdf-info dt{font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:10px}.lufo-result-meta dt:first-child,.lufo-pdf-info dt:first-child{margin-top:0}.lufo-result-meta dd,.lufo-pdf-info dd{margin:2px 0 0;font-size:13px;color:var(--ink);overflow-wrap:anywhere}.lufo-result-meta code{font-size:11px}
.lufo-exports .exportbox{display:flex;flex-direction:column}.lufo-exports .exportbox p{flex:1}.lufo-exports .exportbox button{align-self:flex-start}
.lufo-pdf-info{padding:14px!important}.lufo-pdf-info .lufo-pdf-note{margin-top:18px!important;padding:10px;border-radius:7px;background:var(--blue-l);color:var(--ink2)!important}
.lufo-pdf-page .plotstage .plotpaperbg{z-index:2}.lufo-pdf-page .paper{z-index:4}
.crosslink{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.crosslink .cl-card{height:100%;box-sizing:border-box}
@media(max-width:850px){.lufo-picker{grid-template-columns:1fr 1fr}.lufo-choice-info{grid-column:1/-1}.lufo-result-grid{grid-template-columns:1fr}.crosslink{grid-template-columns:1fr}}
@media(max-width:600px){.lufoapp #lufoMap{height:390px}.lufo-picker{grid-template-columns:1fr}.lufo-choice-info{grid-column:auto}.lufo-preview-card img{height:240px}}

/* ---------- CAD hoeveelheden ---------- */
.qty-hero{padding-bottom:20px}.qty-app{margin-top:8px}.qty-processing{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--sh);text-align:center}.qty-processing h2{font-family:var(--disp);text-transform:uppercase;font-size:28px;margin:4px 0 18px}.qty-spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;margin:0 auto;animation:k2c-spin .8s linear infinite}.qty-processing .bar{max-width:650px;margin:0 auto}.qty-progressline{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--mute)}.qty-progressline strong{color:var(--blue);font-size:14px}.qty-result{margin-top:22px}.qty-result[hidden],.qty-processing[hidden],.qty-drop[hidden]{display:none!important}.qty-result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}.qty-result-head .kicker.mini{margin:0 0 7px;padding:4px 9px;font-size:9px}.qty-result-head h2{font-family:var(--disp);text-transform:uppercase;font-size:32px;line-height:1;margin:0}.qty-result-head p{margin:7px 0 0;color:var(--mute);font-size:13px}.qty-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 12px}.qty-stats div{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:12px 13px}.qty-stats span{display:block;color:var(--mute);font:9px var(--mono);letter-spacing:.08em;text-transform:uppercase}.qty-stats strong{display:block;font-family:var(--disp);font-size:24px;line-height:1.1;margin-top:3px}.qty-unitbox{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#F3F7FD;border:1px solid #C9D7F1;border-radius:10px;padding:12px 14px;margin-bottom:12px}.qty-unitbox.warn{background:#FFFAEB;border-color:#FEDF89}.qty-unitbox strong,.qty-unitbox span{display:block}.qty-unitbox strong{font-size:14px}.qty-unitbox span{font-size:12px;color:var(--mute);margin-top:2px}.qty-unitbox select{min-width:150px;padding:8px 10px;border:1px solid #C8D1DF;border-radius:7px;background:#fff}.qty-toolbar{background:var(--card);border:1px solid var(--line);border-radius:11px 11px 0 0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px}.qty-tabs{display:flex;gap:4px;overflow:auto}.qty-tabs button{border:0;background:transparent;color:var(--ink2);font-weight:650;padding:8px 10px;border-radius:7px;white-space:nowrap;cursor:pointer}.qty-tabs button.active{background:var(--blue-l);color:var(--blue)}.qty-filter{display:flex;align-items:center;gap:10px}.qty-filter input[type=search]{width:240px;padding:8px 10px;border:1px solid var(--line);border-radius:7px}.qty-filter label{font-size:12px;color:var(--mute);white-space:nowrap}.qty-pane{display:none;background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 11px 11px;overflow:hidden}.qty-pane.active{display:block}.qty-pane-head{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:16px;border-bottom:1px solid var(--line2)}.qty-pane-head h3{font-family:var(--disp);text-transform:uppercase;font-size:22px;margin:0}.qty-pane-head p{font-size:12px;color:var(--mute);margin:2px 0 0}.qty-pane-head>input{min-width:250px;padding:9px 10px;border:1px solid var(--line);border-radius:7px}.qty-pane-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.qty-table-wrap{overflow:auto;max-height:560px}.qty-table{width:100%;border-collapse:collapse;font-size:12px}.qty-table th{position:sticky;top:0;z-index:2;text-align:left;background:#F9FBFD;border-bottom:1px solid var(--line);padding:8px 9px;color:var(--mute);font:9px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.qty-table td{padding:8px 9px;border-bottom:1px solid var(--line2);vertical-align:middle}.qty-table tr:hover td{background:#FBFCFE}.qty-table code{font-size:10px;white-space:nowrap}.qty-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.qty-table .q-desc{width:100%;min-width:180px;padding:6px 7px;border:1px solid transparent;border-radius:5px;background:transparent}.qty-table .q-desc:hover,.qty-table .q-desc:focus{background:#fff;border-color:#CAD4E3;outline:none}.qty-table input[type=checkbox]{accent-color:var(--blue)}.qty-empty{text-align:center!important;color:var(--mute);padding:28px!important}.merge-tag{display:block;font:8px var(--mono);color:var(--blue);text-transform:uppercase;margin-top:2px}.source-layers{max-width:380px;color:var(--mute);font-size:10px}.qty-unmerge{border:1px solid var(--line);background:#fff;border-radius:6px;padding:4px 7px;color:var(--mute);cursor:pointer}.qty-control-info{display:flex;gap:9px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line2)}.qty-control-info span{background:#F7F9FC;border:1px solid var(--line);border-radius:999px;padding:5px 9px;font-size:11px}.qty-downloads{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:14px;padding:16px 18px;background:#FFFDF8;border:1px solid #EADFBF;border-radius:10px}.qty-downloads strong,.qty-downloads span{display:block}.qty-downloads strong{font-size:13px}.qty-downloads span{font-size:11px;color:var(--mute);margin-top:2px}.qty-download-actions{display:flex;gap:8px;white-space:nowrap}.stepgrid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.qty-stats{grid-template-columns:repeat(3,1fr)}.qty-toolbar{align-items:stretch;flex-direction:column}.qty-filter input[type=search]{flex:1;width:auto}.qty-filter{width:100%}.qty-pane-head{align-items:flex-start;flex-direction:column}.qty-pane-actions{justify-content:flex-start}.stepgrid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.qty-result-head,.qty-unitbox,.qty-downloads{flex-direction:column;align-items:stretch}.qty-stats{grid-template-columns:repeat(2,1fr)}.qty-filter{align-items:stretch;flex-direction:column}.qty-download-actions{display:grid;grid-template-columns:1fr 1fr}.qty-download-actions .btn{padding-left:10px;padding-right:10px}.stepgrid.four{grid-template-columns:1fr}.qty-pane-head>input{min-width:0;width:100%}}


/* ================= Kennisbank ================= */
.kb-page{padding:14px 22px 64px}.kb-head{max-width:860px}.kb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:4px 0 42px}.kb-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:var(--sh);display:flex;flex-direction:column;min-height:260px}.kb-card>span{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}.kb-card h2{font-family:var(--disp);text-transform:uppercase;font-size:24px;line-height:1.08;margin:0 0 11px}.kb-card h2 a{color:var(--ink)}.kb-card h2 a:hover{color:var(--blue);text-decoration:none}.kb-card p{font-size:14px;color:var(--ink2);margin:0 0 18px}.kb-card .kb-more{font-weight:600;font-size:13px;margin-top:auto}.kb-existing{border-top:1px solid var(--line);padding-top:26px;max-width:860px}.kb-existing h2{font-size:28px;margin:0 0 8px}.kb-existing p{color:var(--ink2);margin:0}.art-body a:not(.btn){text-decoration:underline;text-decoration-color:rgba(29,78,216,.25);text-underline-offset:2px}.art-body a:not(.btn):hover{text-decoration-color:currentColor}@media(max-width:900px){.kb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.kb-grid{grid-template-columns:1fr}.kb-card{min-height:0}}

/* advertentie in het wachtscherm bij het ophalen van kaartdata */
.loading-ad{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.loading-ad:empty{display:none}
.loading-ad .ad{margin:0}

/* ---------- kaarten met knoppen op één lijn ---------- */
/* Flexkolom met de knop op auto-marge: die zakt dan naar de onderkant,
   ongeacht hoeveel tekst erboven staat. */
.crosslink .cl-card{display:flex;flex-direction:column}
.crosslink .cl-card p{flex:1 1 auto}
.crosslink .cl-card .btn{align-self:flex-start;margin-top:auto}

/* ---------- homepage ---------- */
.home-hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.home-hero .ticks{margin-top:26px}

.tools{margin:64px 0 0}
.tools h2{font-family:var(--disp);text-transform:uppercase;font-size:30px;font-weight:600;margin:0 0 8px}
.sectionlead{color:var(--ink2);font-size:16px;margin:0 0 26px;max-width:66ch}
.toolgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.toolgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.toolgrid{grid-template-columns:1fr}}
.tool{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 24px 22px;box-shadow:var(--sh);color:inherit;
  transition:border-color .14s,box-shadow .14s,transform .08s}
.tool:hover{border-color:var(--blue);box-shadow:var(--sh-lg);text-decoration:none;transform:translateY(-2px)}
.tool h3{font-family:var(--disp);text-transform:uppercase;font-size:21px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.tool p{flex:1 1 auto;margin:0 0 16px;font-size:14.5px;color:var(--ink2)}
.toollink{font-weight:600;font-size:14.5px;color:var(--blue);margin-top:auto}
.tool-kb{background:#F7F9FC}

/* ---------- KLIC naar CAD: converter als hoofdinhoud ---------- */
.klic-cad-hero{padding-bottom:22px}
.klic-converter-page>.drop{margin-top:4px}
.klic-cad-info{margin-top:54px}
.klic-converter-page .crosslink .cl-card{min-width:0}
@media(max-width:700px){
  .klic-cad-hero{padding-top:30px}
  .klic-cad-hero .lede{font-size:17px}
  .klic-converter-page .crosslink{margin-top:40px}
}

/* KLIC naar CAD: onderkant in volgorde specificaties > FAQ > Nieuw > Verder lezen */
.klic-cad-bottom{margin-top:24px;width:100%;max-width:none}
.klic-cad-bottom>h2{font-family:var(--disp);text-transform:uppercase;font-size:30px;font-weight:600;margin:34px 0 18px}
.klic-cad-bottom>h2:first-child{margin-top:0}
.klic-cad-bottom .spec{margin-bottom:34px}
.klic-cad-related{margin-top:34px}
@media(max-width:700px){
  .klic-cad-bottom>h2{font-size:26px}
}

/* Algemene voorwaarden */
.legal-page .legal-version{font-family:var(--mono);font-size:12px;color:var(--mute);margin:10px 0 14px}
.legal-page .art-body ul{margin:0 0 18px;padding-left:23px}
.legal-page .art-body li{margin:0 0 7px}
.legal-short{margin-top:44px;padding:24px 26px;background:#f7f9fc;border:1px solid var(--line);border-radius:12px}
.legal-short h2{margin-top:0}
.legal-short p:last-child{margin-bottom:0}