/* epieditor — richting C «Naast elkaar» (prototype 2026-09-11, gekozen door Siebe).
   Huisfonts van Elk Solutions (Outfit, Public Sans); de pastelvlakken van huisstijl A
   zijn vervangen door één werkbank en één vel, en oranje betekent alleen «hier veranderde
   iets», zoals in het ontwerpcontract van de console. Na het tokenblok staat er geen
   letterlijke kleur- of maatwaarde meer in een component. */
@font-face{font-family:Outfit;src:url('/fonts/outfit-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Public Sans';src:url('/fonts/public-sans-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --bank:#e9e8e3;--vel:#fbfaf8;--fhir:#eef0ee;--inkt:#1a1d21;--potlood:#4a545f;
  --lijn:#cfccc4;--lijn-zacht:#dedbd4;--wit:#fff;
  --revisie:#ff6600;--revisie-inkt:#8a3b0c;--komt:rgba(255,102,0,.10);
  --kop:Outfit,system-ui,sans-serif;--tekst:'Public Sans',system-ui,sans-serif;--mono:ui-monospace,'SF Mono',Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
  --duur:160ms;--streep:4px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bank);color:var(--inkt);font:400 16px/1.6 var(--tekst);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.blad{max-width:1320px;margin:auto;padding:0 var(--s10)}
h1,h2,h3{font-family:var(--kop);color:var(--inkt);text-wrap:pretty;overflow-wrap:break-word;margin:0}
h1{font-size:clamp(36px,4.2vw,58px);font-weight:500;line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(26px,2.8vw,36px);font-weight:500;line-height:1.15;letter-spacing:-.02em}
h3{font-size:19px;font-weight:500;line-height:1.3;margin-bottom:var(--s2)}
p{max-width:64ch;margin:0 0 var(--s4)}
a{color:var(--inkt);text-underline-offset:4px;text-decoration-thickness:1px}
code,pre{font-family:var(--mono);font-size:.92em}
:focus-visible{outline:3px solid var(--inkt);outline-offset:3px;border-radius:2px}
section,[id]{scroll-margin-top:var(--s6)}
.skip-link{position:absolute;top:-100px;left:var(--s6);padding:var(--s3) var(--s4);z-index:50;background:var(--vel)}
.skip-link:focus{top:var(--s3)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stil{color:var(--potlood)}
.klein{font-size:13px;color:var(--potlood)}

/* ── mast ── */
.mast{display:flex;align-items:center;gap:var(--s6);padding:var(--s5) 0;border-bottom:1px solid var(--lijn)}
.merk{font:600 22px/1 var(--kop);letter-spacing:-.02em;text-decoration:none;display:flex;gap:var(--s3);align-items:center;color:var(--inkt)}
.merk .teken{width:34px;height:24px;flex-shrink:0}
.merk small{font:400 12px/1 var(--tekst);color:var(--potlood);margin-left:var(--s2);letter-spacing:0}
.nav{margin-left:auto;display:flex;gap:var(--s6);align-items:center;font-size:14px}
.nav ul{display:flex;align-items:center;gap:inherit;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;padding-block:var(--s3)}
.nav a:hover{text-decoration:underline}
.nav .nav-contact{border-bottom:1px solid var(--inkt)}
.menu-knop{display:none;font:inherit;padding:10px 14px;background:var(--vel);color:var(--inkt);border:1px solid var(--lijn);min-height:44px}
.menu-knop[aria-expanded="true"]{border-color:var(--inkt)}

/* ── bouwstenen ── */
.knop{display:inline-flex;align-items:center;background:var(--inkt);color:var(--wit);padding:14px 22px;font:600 14px/1.4 var(--tekst);text-decoration:none;border:1px solid var(--inkt);cursor:pointer;transition:background var(--duur),transform var(--duur)}
.knop:hover{background:#000}
.knop:active{transform:translateY(1px)}
.acties{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center}
.tekstlink{font-size:14px}
section{padding:var(--s16) 0;border-top:1px solid var(--lijn)}
.rij{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s12)}
.rij > *,.ingangen > *{min-width:0}
.rij h2{max-width:16ch}
.sectiekop{margin-bottom:var(--s8)}

/* ── hero: kop boven, vergelijking eronder over de volle breedte ── */
.hero{padding:56px 0 var(--s6);border-top:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s12);align-items:end}
.hero h1{max-width:22ch}
.hero .rechts p{color:var(--potlood);font-size:17px;max-width:44ch}
.hero .acties{margin-top:var(--s2)}
.vergelijk{position:relative;margin:var(--s8) 0 0;height:520px;display:grid;grid-template-columns:var(--links,100%) minmax(0,1fr);border:1px solid var(--lijn);user-select:none;touch-action:pan-y;overflow:hidden}
.vergelijk .laag{position:relative;min-width:0;overflow:hidden;padding:56px 48px 40px 64px}
.vergelijk .word{background:var(--vel);border-right:1px solid var(--lijn)}
.vergelijk .fhirlaag{background:var(--fhir);font:14px/1.75 var(--mono);color:var(--potlood);white-space:pre-wrap;overflow-wrap:anywhere;padding-left:56px;margin:0}
.vergelijk .etiket{position:absolute;top:var(--s4);left:64px;font:600 11px/1 var(--tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--potlood);white-space:nowrap}
.vergelijk .fhirlaag .etiket{left:56px}
.vergelijk .rubriek{font:600 12px/1.4 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--potlood);margin:0 0 var(--s3)}
.vergelijk .word p{font-size:18px;line-height:1.6;max-width:none;margin-bottom:10px}
.vergelijk .word .bron{margin-top:28px;font-size:13px;color:var(--potlood)}
ins{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--revisie-inkt);color:var(--revisie-inkt);background:var(--komt)}
del{color:var(--revisie-inkt)}
.vergelijk .streep{position:absolute;left:36px;top:104px;width:var(--streep);height:34px;background:var(--revisie)}
.vergelijk .fhirlaag .n{background:var(--komt);color:var(--inkt);display:block;border-left:var(--streep) solid var(--revisie);margin-left:-20px;padding-left:16px}
.schuif{position:absolute;top:0;bottom:0;left:var(--links,100%);width:2px;margin-left:-1px;background:var(--inkt);z-index:3;cursor:ew-resize}
.schuif::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--inkt);background-image:linear-gradient(var(--wit),var(--wit)),linear-gradient(var(--wit),var(--wit));background-size:2px 14px,2px 14px;background-position:14px 15px,28px 15px;background-repeat:no-repeat}
.vergelijk input[type=range]{position:absolute;left:0;right:0;bottom:var(--s3);width:100%;margin:0;opacity:0;height:44px;z-index:4;cursor:ew-resize}
.vergelijk.veegt{transition:grid-template-columns 1100ms cubic-bezier(.3,.8,.2,1)}
.vergelijk.veegt .schuif{transition:left 1100ms cubic-bezier(.3,.8,.2,1)}
.onderschrift{display:flex;gap:var(--s8);flex-wrap:wrap;font-size:13px;color:var(--potlood);padding:var(--s3) 0 0;max-width:none}
.onderschrift b{font-weight:600;color:var(--inkt)}
.uitlees{font-variant-numeric:tabular-nums}

/* ── hoe het werkt: rijen met hairlines, geen kaarten ── */
.stappen{list-style:none;margin:0;padding:0;counter-reset:s}
.stappen li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--lijn-zacht)}
.stappen li:first-child{border-top:0;padding-top:0}
.stappen li::before{counter-increment:s;content:counter(s);font:500 13px/1.9 var(--mono);color:var(--potlood)}
.stappen h3{margin-bottom:6px}
.stappen p{margin:0;color:var(--potlood);font-size:15px}

/* ── twee ingangen ── */
.ingangen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);margin-top:var(--s8)}
.ingang{border-top:2px solid var(--inkt);padding-top:var(--s5);min-width:0}
.ingang .voor{font-size:13px;color:var(--potlood);margin-bottom:var(--s3)}
.ingang h3{font-size:24px;margin-bottom:var(--s3)}
.ingang p{font-size:15px}
.ingang ul{padding-left:1.1em;font-size:15px;margin:0 0 var(--s4)}
.ingang li{margin-bottom:var(--s1)}
.ingang pre{background:var(--vel);border:1px solid var(--lijn-zacht);padding:var(--s3) var(--s4);font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--s2) 0 var(--s4);color:var(--potlood)}
.ingang pre b{color:var(--inkt);font-weight:500}

/* ── bewijs: de rubriekenband uit het ontwerpcontract, en het register ── */
.tellingen{display:flex;gap:var(--s10);flex-wrap:wrap;margin:0 0 var(--s8)}
.tellingen div{border-top:2px solid var(--inkt);padding-top:10px;min-width:110px}
.tellingen div.rev{border-top-color:var(--revisie)}
.tellingen dt{font-size:13px;color:var(--potlood)}
.tellingen dd{margin:0;font:500 40px/1 var(--kop);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.band{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s1);margin-bottom:var(--s3)}
.band button{position:relative;font:500 12px/1 var(--mono);color:var(--inkt);background:var(--vel);border:1px solid var(--lijn-zacht);min-height:36px;padding:0 var(--s1);cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color var(--duur)}
.band button:hover{border-color:var(--inkt)}
.band button[aria-pressed="true"]{border-color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
.band button[data-gewijzigd]::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:var(--streep);background:var(--revisie)}
.no-js .band button{cursor:default}
.vel{background:var(--vel);border:1px solid var(--lijn-zacht);border-left:var(--streep) solid var(--lijn-zacht);padding:var(--s4) var(--s5);min-height:150px;font-size:15px;margin-bottom:var(--s3)}
.vel:has([data-gewijzigd-tekst]:not([hidden])){border-left-color:var(--revisie)}
.vel .rubriek{font:600 12px/1.4 var(--tekst);text-transform:uppercase;letter-spacing:.06em;color:var(--potlood);margin-bottom:var(--s3)}
.vel p{margin-bottom:var(--s3);max-width:none}
.vel .status{font-size:13px;color:var(--potlood);margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--lijn-zacht)}
.vel .status.gewijzigd{color:var(--inkt)}
.register{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px;margin-top:var(--s8)}
.register th{text-align:left;font:600 12px/1.4 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--potlood);padding:0 var(--s6) var(--s3) 0;border-bottom:1px solid var(--inkt)}
.register td{padding:14px var(--s6) 14px 0;border-bottom:1px solid var(--lijn-zacht);vertical-align:top}
.register td:first-child{white-space:nowrap;color:var(--potlood)}
.rapport{background:var(--vel);border:1px solid var(--lijn-zacht);padding:var(--s4);font-size:13px;line-height:1.55;overflow:auto;margin:var(--s6) 0 var(--s3)}
.rapport .id{font-weight:600}

/* ── downloads ── */
.downloads{margin-top:var(--s8);border-top:2px solid var(--inkt);padding-top:var(--s4)}
.downloads ul{list-style:none;padding:0;margin:0 0 var(--s4)}
.downloads li{padding:var(--s3) 0;border-bottom:1px solid var(--lijn-zacht);display:flex;gap:var(--s4);flex-wrap:wrap;align-items:baseline}
.downloads li a{font-weight:600;text-decoration-thickness:1px}

/* ── grenzen, inbeddingen ── */
.grenzen{list-style:none;padding:0;margin:0}
.grenzen li{padding:var(--s3) 0 var(--s3) var(--s4);border-left:2px solid var(--inkt);margin-bottom:var(--s3);max-width:70ch}
.grenzen b{font-family:var(--kop);font-weight:500;font-size:18px;display:block}
.inbeddingen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);font-size:15px}
.inbeddingen div{border-top:2px solid var(--inkt);padding-top:var(--s3)}
.inbeddingen b{font-family:var(--kop);font-weight:500;font-size:18px;display:block;margin-bottom:var(--s1)}

/* ── prijzen: vier kolommen, hairlines ── */
.aanbod{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s8);margin-top:var(--s8)}
.aanbod article{border-top:2px solid var(--inkt);padding-top:var(--s4);display:flex;flex-direction:column;min-width:0}
.aanbod .prijs{font:500 34px/1.1 var(--kop);letter-spacing:-.02em;margin:var(--s2) 0 var(--s1)}
.aanbod .prijs small{font:400 13px/1.5 var(--tekst);color:var(--potlood);display:block;letter-spacing:0}
.aanbod ul{padding-left:1.1em;font-size:14px;margin:var(--s4) 0 var(--s6);color:var(--potlood)}
.aanbod li{margin-bottom:var(--s1)}
.aanbod .knop{margin-top:auto;align-self:start}
.anker{font-size:13px;color:var(--potlood);margin:var(--s8) 0 0;max-width:none;border-left:2px solid var(--inkt);padding-left:var(--s3)}
.stoppen{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--lijn-zacht);font-size:14px}
.stoppen h3{font-size:17px}
.stoppen p{margin:0 0 var(--s1);max-width:none}

/* ── contact en voet ── */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s12);align-items:end}
.contact h2{margin-bottom:var(--s4)}
footer{padding:var(--s8) 0 var(--s12);border-top:1px solid var(--lijn);font-size:13px;color:var(--potlood);display:flex;gap:var(--s8);flex-wrap:wrap}
footer p{margin:0}

@media(max-width:1100px){.aanbod{grid-template-columns:1fr 1fr}.inbeddingen{grid-template-columns:1fr}}
@media(max-width:960px){
  .blad{padding-inline:var(--s5)}
  .mast{flex-wrap:wrap;gap:var(--s4)}
  .nav{width:100%;margin:0;flex-wrap:wrap;gap:var(--s2) var(--s5)}.menu-knop{margin-left:auto;display:block}
  .js .nav{display:none}.js .menu-open .nav{display:flex}
  .js .menu-open .nav ul{flex-direction:column;align-items:stretch;width:100%;gap:0}
  .js .menu-open .nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--lijn-zacht)}
  .js .menu-open .nav li:last-child a{border-bottom:0}
  .hero{grid-template-columns:1fr;gap:var(--s5);padding:36px 0 var(--s4)}
  .vergelijk{height:auto;grid-template-columns:1fr!important;grid-template-rows:auto auto}
  .schuif,.vergelijk input[type=range]{display:none}
  .vergelijk .word{border-right:0;border-bottom:1px solid var(--lijn)}
  .vergelijk .laag{padding:44px var(--s4) var(--s6) 36px}.vergelijk .etiket{left:36px}.vergelijk .fhirlaag{padding-left:28px;font-size:11px}.vergelijk .fhirlaag .etiket{left:28px}.vergelijk .fhirlaag .n{margin-left:-12px;padding-left:8px}
  .vergelijk .word p{font-size:15px}.vergelijk .streep{left:20px}
  .onderschrift .sleep{display:none}
  .rij,.contact,.ingangen{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  section{padding:var(--s10) 0}
  .register td:first-child{white-space:normal}
  .aanbod{grid-template-columns:1fr}
  .tellingen{gap:var(--s4) var(--s6)}.tellingen div{min-width:0;flex:1 1 40%}.tellingen dd{font-size:34px}
  .band button{min-height:40px}
  footer{display:block}footer p{margin-bottom:var(--s2)}
}
@media(max-width:400px){.band{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}