/* spreadsheetproof.com — familiestijl van Elk Solutions. Kleuren en koppen komen uit brand/theme.css. */
@font-face{font-family:'Public Sans';src:url('/brand/fonts/public-sans-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --paper:#fcfcf7;--ink:#172d31;--muted:#536461;--teal:#086c70;
  --mint:#d8eccc;--purple:#e7e2f5;--peach:#ffe2ce;--coral:#f6b7a2;
  --orange:#ff6600;--action:#c64a00;--action-hover:#ad4100;--line:#c8d2c8;--white:#fff;
  --kop:'Public Sans',Arial,sans-serif;--tekst:'Public Sans',Arial,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;
  --straal:6px;--duur:160ms;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--tekst);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.blad{max-width:1280px;margin:auto;padding:0 var(--s10)}
h1,h2,h3{font-family:var(--kop);color:var(--ink);text-wrap:pretty;overflow-wrap:break-word;margin:0}
h1{font-size:clamp(38px,4.8vw,64px);font-weight:550;line-height:1.08;letter-spacing:-.035em}
h2{font-size:clamp(26px,3vw,36px);font-weight:500;line-height:1.16;letter-spacing:-.02em}
h3{font-size:23px;font-weight:500;line-height:1.25;margin-bottom:var(--s3)}
p{max-width:76ch;margin:0 0 var(--s4)}
a{color:var(--teal);text-underline-offset:4px}
code,pre{font-family:var(--mono);font-size:.92em}
:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:4px}
section,[id]{scroll-margin-top:var(--s6)}
img{max-width:100%;height:auto}
.skip-link{position:absolute;top:-100px;left:var(--s6);padding:var(--s3) var(--s4);z-index:50;background:var(--paper)}
.skip-link:focus{top:var(--s3)}

/* ── mast ── */
.mast{display:flex;align-items:center;gap:var(--s6);min-height:96px;padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.merk{display:flex;gap:var(--s3);align-items:center;font-family:var(--kop);font-size:26px;line-height:1.1;letter-spacing:-.6px;text-decoration:none;color:var(--ink)}
.merk .teken{width:42px;height:30px;flex-shrink:0}
.merk b{font-weight:650}
.merk small{display:block;font:400 10px/1.5 var(--tekst);letter-spacing:0;margin-top:var(--s1);color:var(--muted)}
.nav{display:flex;margin-left:auto;gap:var(--s6);align-items:center;font-size:13px;font-weight:550}
.nav ul{display:flex;align-items:center;gap:inherit;list-style:none;margin:0;padding:0}
.nav a{color:var(--ink);text-decoration:none;padding-block:var(--s3)}
.nav a:hover,.nav a[aria-current]{text-decoration:underline}
.nav .nav-contact{border-bottom:1px solid var(--ink)}
.menu-knop{display:none;font:inherit;padding:10px 14px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--straal);min-height:44px}
.menu-knop[aria-expanded="true"]{background:var(--mint);border-color:var(--teal)}

/* ── gedeelde bouwstenen ── */
.eyebrow{font-size:11px;font-weight:650;letter-spacing:.04em;margin:0 0 var(--s4)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);vertical-align:middle;margin-right:var(--s2)}
.accent{color:var(--teal);position:relative;display:inline-block;max-width:100%}
.accent svg{position:absolute;bottom:-14px;left:0;width:100%;height:18px;fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;pointer-events:none}
.lead{font-size:18px;color:var(--muted);line-height:1.65;margin:var(--s8) 0}
.acties{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4)}
.knop{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s5);background:var(--action);color:var(--white);border-radius:var(--straal);border:1px solid var(--action);padding:13px 20px;min-height:48px;font:550 14px/1.5 var(--tekst);text-decoration:none;cursor:pointer;transition:transform var(--duur) ease-out,background var(--duur)}
.knop:hover{background:var(--action-hover)}
.knop:active{transform:scale(.98)}
.knop:disabled{opacity:.55;cursor:default}
.tekstlink{font-size:13px;font-weight:550;padding-block:var(--s3)}
.handtekening{font-size:12px;color:var(--muted);border-left:2px solid var(--orange);padding-left:var(--s3);margin:var(--s8) 0 0}
.telling{font-family:var(--kop);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.telling b{font-weight:650;color:var(--ink)}
.telling span{font-weight:400;color:var(--muted)}
.telling .deel{opacity:.55;margin:0 .12em}


.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.papier-talen{display:flex;gap:2px;font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:4px;padding:2px;margin-left:var(--s4)}
.papier-talen a,.papier-talen span{padding:4px 9px;text-decoration:none;color:var(--muted);border-radius:3px}
.papier-talen [aria-current]{background:var(--teal);color:#fff}
.papier-talen a:hover{color:var(--ink);background:var(--mint)}
.mast .nav ul{gap:var(--s5)}
.mast .nav .nav-contact{border:1px solid #fff;padding:9px 14px;border-radius:2px}
.mast .papier-talen{border-color:#537692}
.mast .papier-talen a{color:#c5dbea}
.mast .papier-talen [aria-current]{background:#fff;color:#20496b}
.mast .papier-talen a:hover{color:#fff;background:#2d5d82}
.mast{min-height:84px;padding-block:var(--s4)}
.merk .teken{width:58px;height:42px}
.mast .menu-knop{background:transparent;color:#fff;border-color:#537692}
.mast .menu-knop[aria-expanded="true"]{background:#f7f9fc;color:#20496b}

/* ── hero: de demo staat rechts, op marineblauw ── */
.family-hero .hero-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);gap:40px;align-items:start}
.family-hero .hero-grid h1{font-size:clamp(32px,3.4vw,50px);letter-spacing:-.035em;line-height:1.08}
.family-hero .hero-grid>*{min-width:0}
.family-hero .lead{margin:0 0 var(--s4);max-width:46ch}
.family-hero .fine{max-width:46ch}
.family-hero .demo{font-size:13px;background:#fff;color:var(--ink);border:1px solid #c5d3de;border-radius:4px;padding:var(--s4)}
.demo a{color:var(--teal)}
.demo-kop{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.demo-kop h2{font:700 12px/1.3 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.family-hero .demo-kop h2{font-size:12px;letter-spacing:.06em;line-height:1.3;margin:0}
.demo .demo-reset{font:600 13px/1 var(--tekst);padding:8px 12px;min-height:36px;background:#fff;color:var(--ink);border:1px solid var(--teal);border-radius:3px;cursor:pointer}
.demo .demo-reset:hover{background:var(--mint)}
.demo-panelen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s4)}
.demo-panelen>*{min-width:0}
.demo .paneel-titel{font:700 12px/1 var(--tekst);color:var(--muted);margin:0 0 var(--s2);letter-spacing:.04em;text-transform:uppercase}
.demo .formulebalk{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.demo .formulebalk label{font:600 12px/1 var(--mono);white-space:nowrap;color:var(--teal);min-width:44px}
.demo .formulebalk input{flex:1;min-width:0;font:14px/1.3 var(--mono);padding:7px 8px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink)}
.demo .formulebalk input:focus-visible{border-color:var(--teal)}
.demo .rasterkader{overflow-x:auto;border:1px solid var(--line);border-radius:3px}
.demo table{border-collapse:collapse;width:100%}
.demo .raster{table-layout:fixed;min-width:336px;font-size:13px}
.demo .raster thead th:nth-child(1){width:26px}.raster thead th:nth-child(2),.raster thead th:nth-child(4){width:94px}.raster thead th:nth-child(3){width:58px}.raster thead th:nth-child(5){width:66px}
.demo .raster th{background:var(--mint);font:600 11px/1 var(--mono);color:var(--muted);padding:6px 4px;border:1px solid var(--lijn-zacht)}
.demo .raster td{border:1px solid var(--lijn-zacht);padding:0;height:34px;vertical-align:top}
.demo .raster .cel{display:block;width:100%;height:100%;min-height:33px;padding:4px 6px;font:13px/1.2 var(--tekst);text-align:left;background:transparent;border:0;color:var(--ink);cursor:pointer;white-space:normal;overflow-wrap:anywhere;border-radius:0}
.demo .raster .cel.getal{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.demo .raster .cel:hover{background:var(--mint)}
.demo .raster .cel[aria-current=true]{outline:2px solid var(--teal);outline-offset:-2px;background:#fff}
.demo .raster .cel.fout{color:#9b1c1c;font-weight:600}
.demo .raster td.gewijzigd{background:#ffe3cf}
.demo .demo-hint{font-size:12px;color:var(--muted);margin:var(--s2) 0 0;max-width:none}
.demo .db-tabel{font:11.5px/1.3 var(--mono);font-variant-numeric:tabular-nums}
.demo .db-tabel caption{caption-side:top;text-align:left;font:600 12px/1 var(--mono);color:var(--teal);padding-bottom:var(--s1)}
.demo .db-tabel th{text-align:left;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);padding:3px 6px 3px 0;white-space:nowrap}
.demo .db-tabel td{padding:3px 6px 3px 0;border-bottom:1px solid var(--lijn-zacht);overflow-wrap:anywhere;vertical-align:top}
.demo .db-tabel td:nth-child(1),.db-tabel td:nth-child(2){white-space:nowrap}
.demo .db-tabel .nul{color:var(--muted)}
.demo .db-blok{margin-bottom:var(--s3);overflow-x:auto;max-width:100%}
.demo .db-blok.hoog{max-height:340px;overflow-y:auto}
.demo .leeg{font:12px/1.4 var(--mono);color:var(--muted);margin:var(--s1) 0 0}
@keyframes vervaag{from{background-color:#ffe3cf}to{background-color:transparent}}
.demo .db-tabel tr.gewijzigd td,.raster td.gewijzigd{animation:vervaag 600ms ease-out forwards}

/* ── secties ── */
section{padding:var(--s10) 0;border-bottom:0}
.kop{margin-bottom:var(--s6);max-width:60ch}
.kop .eyebrow{margin-bottom:var(--s3);text-transform:uppercase;letter-spacing:.08em}
.kop p{color:var(--muted);margin-top:var(--s2)}
.feiten ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);list-style:none;margin:0;padding:0}
.feiten li{border-top:2px solid var(--orange);padding-top:var(--s3);font-size:15px}
.feiten sup a{font-size:12px;margin-left:2px}
.bronnen{margin:var(--s6) 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--muted)}
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin:0;padding:0;list-style:none}
.stappen li{border-top:2px solid var(--orange);background:#fff;padding:var(--s4) var(--s5) var(--s5);border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stappen .nr{font:600 12px/1 var(--mono);color:var(--teal);display:block;margin-bottom:var(--s2)}
.stappen h3{font-size:18px;font-weight:650}
.stappen p{font-size:15px;margin:0}
.verschil{margin-top:var(--s5);padding:var(--s3) var(--s5);border-left:3px solid var(--orange);max-width:none;font-size:15px}

/* controletabel */
.tabelkader{overflow-x:auto;border:1px solid var(--line);background:#fff}
.controles{width:100%;font-size:14px;line-height:1.45}
.controles caption{text-align:left;padding:var(--s3) var(--s4);font-size:13px;color:var(--muted);border-bottom:1px solid var(--line)}
.controles th,.controles td{text-align:left;vertical-align:top;padding:var(--s3) var(--s4);border-bottom:1px solid var(--lijn-zacht)}
.controles thead th{font:700 11px/1.3 var(--tekst);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--mint);border-bottom:1px solid var(--line)}
.controles tbody th{font-weight:650;width:22%;color:var(--ink)}
.controles tbody tr:last-child>*{border-bottom:0}
.controles td:last-child{width:28%;font-family:var(--tekst);color:var(--ink)}
.controles .vast{display:inline-block;font:600 11px/1 var(--mono);color:var(--teal);margin-right:var(--s2)}

/* pilot en partners */
.pilot,.partner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s10)}
.pilot>*,.partner>*{min-width:0}
.prijs{font:700 clamp(40px,5vw,60px)/1 var(--kop);letter-spacing:-.035em;margin:var(--s3) 0 var(--s2);color:var(--ink)}
.prijs-regel{color:var(--muted);margin-bottom:var(--s5)}
.pilot ul,.partner ul{margin:0 0 var(--s5);padding-left:20px}
.pilot li,.partner li{margin-bottom:var(--s2);max-width:64ch}
.behoud{font-weight:650}
.stil{color:var(--muted)}
.partner .lead{color:var(--ink);font-size:19px;margin:0 0 var(--s4);max-width:44ch}
.knop.rand{background:transparent;color:var(--ink);border-color:var(--ink)}
.knop.rand:hover{background:#fff}
.over-blok{max-width:78ch}
.faq details{border-top:1px solid var(--line);max-width:860px}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:var(--s4) 0;font:650 16px/1.35 var(--kop);list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--teal)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);margin:0 0 var(--s4)}

/* contact en voet */
.contact{display:block}
.contact p{max-width:60ch}
.voet{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);font-size:13px;color:var(--muted)}
.voet p{margin:0;max-width:none}
.voet a{color:var(--ink)}

/* 404 */
.nietgevonden{padding:var(--s16) 0}
.nietgevonden h1{margin-bottom:var(--s4)}

@media(hover:hover) and (pointer:fine){.knop:hover{filter:brightness(.97)}}
@media(max-width:1080px){.family-hero .hero-grid{grid-template-columns:minmax(0,1fr)}.feiten ul,.stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
  .mast{min-height:72px;flex-wrap:wrap;gap:var(--s3)}.merk{font-size:23px}
  .nav{width:100%;margin:0;flex-wrap:wrap}.nav ul{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}
  .papier-talen{margin-left:auto;order:4}
  .mast{flex-wrap:nowrap;gap:8px}.mast .merk{font-size:19px;gap:8px;min-width:0}.mast .merk .teken{width:44px;height:32px}.papier-talen a,.papier-talen span{padding:4px 7px}.mast .merk small{font-size:9px}.mast .nav{display:none}.js .menu-open .nav{display:none}
  .contact{padding:var(--s8) 22px}
  section{padding:var(--s8) 0}
  .demo-panelen,.pilot,.partner,.feiten ul,.stappen{grid-template-columns:minmax(0,1fr)}
  .pilot,.partner{gap:var(--s5)}
  .raster{min-width:0}
  .raster thead th:nth-child(1){width:22px}.raster thead th:nth-child(2),.raster thead th:nth-child(4){width:84px}.raster thead th:nth-child(3){width:54px}.raster thead th:nth-child(5){width:62px}
  .raster .cel{padding:4px}
  .db-blok.hoog{max-height:none}
  .controles{min-width:640px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}