/* ══════════════════════════════════════════════════════════════
   BURO01 — HET DOSSIER (koel)  ·  gedeelde stylesheet
   Bron: design/proeven/proef-1-dossier.html (goedgekeurd 05-08-2026)
   ══════════════════════════════════════════════════════════════ */

/* — fonts (self-host, geen CDN) — */
@font-face{font-family:'Schibsted';src:url('../fonts/schibsted.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted';src:url('../fonts/schibsted-ext.woff2') format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Courier Prime';src:url('../fonts/courier-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Courier Prime';src:url('../fonts/courier-400-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Courier Prime';src:url('../fonts/courier-700.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Courier Prime';src:url('../fonts/courier-700-ext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* — tokens (goedgekeurde koele versie — NIET de crème) — */
:root{
  --archief:#EEF1F4;   /* ondergrond: koel papier-wit        */
  --karton:#D7DEE7;    /* tabbladen/mappen: staalblauw-grijs */
  --inkt:#16233F;      /* marine-inkt                        */
  --grijs:#55617A;     /* secundaire tekst                   */
  --stempel:#C22B21;   /* stempelrood                        */
  --wit:#FFFFFF;
  --lijn:#C3CCD8;
  --schaduw:6px 6px 0 rgba(22,35,63,.12);
  --schaduw-s:5px 5px 0 rgba(22,35,63,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--archief);color:var(--inkt);font-family:'Schibsted',sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--stempel);color:var(--wit)}
img{max-width:100%;display:block}
.mono{font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4.5vw,48px)}
main{display:block}

/* — topbalk als dossieromslag — */
header.top{border-bottom:2px solid var(--inkt);background:var(--archief);position:relative;z-index:40}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:18px;padding-bottom:18px;gap:20px}
.wordmark{font-weight:800;font-size:20px;letter-spacing:.18em;text-decoration:none;color:var(--inkt);white-space:nowrap}
.wordmark b{color:var(--stempel)}
nav.hoofd{display:flex;gap:26px;align-items:center}
nav.hoofd a{font-family:'Courier Prime',monospace;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--grijs)}
nav.hoofd a:hover,nav.hoofd a[aria-current="page"]{color:var(--inkt);border-bottom:2px solid var(--stempel)}
nav.hoofd a.knop-p{color:var(--wit);border-bottom:none;font-family:'Schibsted',sans-serif;letter-spacing:.02em;text-transform:none;font-size:15px;padding:11px 20px}
.hamb{display:none}

/* — tabbladen — */
.tabs{display:flex;gap:6px;margin-top:52px;align-items:flex-end}
.tab{font-family:'Courier Prime',monospace;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:12px 26px 10px;border:2px solid var(--inkt);border-bottom:none;border-radius:10px 10px 0 0;background:var(--karton);color:var(--grijs)}
.tab:hover{color:var(--inkt)}
.tab.actief{background:var(--wit);color:var(--inkt);padding-bottom:14px;position:relative;top:2px}

/* — dossierkaart — */
.kaart{background:var(--wit);border:2px solid var(--inkt);padding:clamp(28px,5vw,64px) clamp(22px,5vw,64px) clamp(28px,4.5vw,56px);position:relative;box-shadow:var(--schaduw)}
.dossierkop{display:flex;justify-content:space-between;gap:14px;border-bottom:2px solid var(--inkt);padding-bottom:13px;margin-bottom:clamp(28px,4vw,44px);flex-wrap:wrap}
.dossierkop .mono b{color:var(--stempel)}
h1{font-weight:800;font-size:clamp(38px,5.6vw,72px);line-height:1.04;letter-spacing:-.02em;max-width:15ch}
.sub{margin-top:22px;max-width:56ch;font-size:18px;color:var(--grijs)}
.sub strong{color:var(--inkt);font-weight:600}
.staccato{color:var(--grijs)}

/* — GEREGELD-stempel — */
.stempelvak{position:absolute;top:clamp(120px,22vw,320px);right:clamp(18px,6vw,84px);transform:rotate(-11deg);pointer-events:none}
.stempel{border:5px double var(--stempel);color:var(--stempel);font-family:'Courier Prime',monospace;font-weight:700;
  font-size:clamp(22px,3vw,34px);letter-spacing:.14em;padding:10px 24px 8px;text-transform:uppercase;display:inline-block;
  -webkit-mask-image:radial-gradient(circle at 30% 60%,black 92%,transparent 99%);mask-image:radial-gradient(circle at 30% 60%,black 92%,transparent 99%);opacity:.92}
.stempel small{display:block;font-size:11px;letter-spacing:.22em;border-top:2px solid var(--stempel);margin-top:6px;padding-top:4px}
/* stempel-motion: slaat neer bij in-view */
.stempel-slam{opacity:0;transform:scale(1.6)}
.in .stempel-slam,.stempel-slam.in{animation:slam .32s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes slam{0%{opacity:0;transform:scale(1.6)}62%{opacity:.92;transform:scale(1)}82%{transform:scale(1.02)}100%{opacity:.92;transform:scale(1)}}

/* — checklist — */
.checklist{margin-top:38px;max-width:600px}
.check{display:flex;align-items:center;gap:15px;padding:13px 0;border-bottom:1.5px dashed var(--lijn);font-family:'Courier Prime',monospace;font-size:15px}
.box{width:22px;height:22px;border:2px solid var(--inkt);flex:none;position:relative;background:var(--wit)}
.check.af .box::after{content:"";position:absolute;left:4px;top:4px;width:12px;height:7px;border-left:3px solid var(--stempel);border-bottom:3px solid var(--stempel);transform:rotate(-45deg)}
.check.af>span:first-of-type{text-decoration:line-through;text-decoration-color:rgba(22,35,63,.35);text-decoration-thickness:1.5px}
.check.af.geen-streep>span:first-of-type{text-decoration:none}
.check .status{margin-left:auto;font-size:12px;letter-spacing:.14em;color:var(--grijs);text-align:right;flex:none}
.check.af .status{color:var(--stempel);font-weight:700}
/* vink-motion: tekent zich af bij scroll (stagger via JS-delay) */
.tekent .check.af .box::after{border-color:transparent;animation:vink .15s steps(1) forwards;animation-delay:var(--d,0s)}
@keyframes vink{to{border-color:var(--stempel)}}

/* — knoppen (radius 0) — */
.cta-rij{margin-top:44px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.knop-p{background:var(--stempel);color:var(--wit);font-weight:700;font-size:16px;padding:15px 28px;text-decoration:none;border:2px solid var(--stempel);display:inline-block;cursor:pointer;font-family:'Schibsted',sans-serif}
.knop-p:hover{background:#A82117;border-color:#A82117}
.knop-s{border:2px solid var(--inkt);color:var(--inkt);font-weight:600;font-size:16px;padding:15px 28px;text-decoration:none;display:inline-block}
.knop-s:hover{background:var(--inkt);color:var(--archief)}

/* — hero-extra's — */
.strip-mono{margin-top:34px;padding-top:18px;border-top:1.5px dashed var(--lijn);font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
.kop2{font-weight:800;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.01em;margin-bottom:10px}
.kaart-intro{color:var(--grijs);max-width:62ch;margin-bottom:10px}
.kaart-intro strong{color:var(--inkt);font-weight:700}
.kaart-smal{max-width:960px}

/* — mappen-grid — */
.sectie{padding:clamp(64px,9vw,104px) 0}
.sectie-kop{margin-bottom:clamp(30px,4vw,46px)}
.sectie-kop h2{font-weight:800;font-size:clamp(30px,3.6vw,40px);letter-spacing:-.01em}
.sectie-kop .intro{color:var(--grijs);margin-top:8px;max-width:58ch}
.mapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.map{position:relative;display:block;text-decoration:none;color:inherit;background:var(--wit);border:2px solid var(--inkt);padding:72px 26px 26px;box-shadow:var(--schaduw-s)}
.map::before{content:attr(data-tab);position:absolute;top:-2px;left:-2px;padding:8px 20px 6px;background:var(--inkt);color:var(--archief);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;border-radius:0 0 10px 0}
.map h3{font-weight:800;font-size:clamp(21px,2.1vw,25px);margin-bottom:10px;line-height:1.2}
.map p{color:var(--grijs);font-size:15.5px}
.map .mono{display:block;margin-top:20px;color:var(--stempel);font-weight:700}
.map:hover{box-shadow:8px 8px 0 rgba(22,35,63,.14);}

/* — inkt-blok (marine) — */
.inkt-blok{background:var(--inkt);color:var(--archief);padding:clamp(64px,9vw,104px) 0;position:relative;overflow:hidden}
.inkt-blok h2{font-weight:800;font-size:clamp(28px,3.6vw,42px);max-width:22ch;margin-bottom:18px;letter-spacing:-.01em}
.inkt-blok p{color:#B9C2D6;max-width:60ch;margin-bottom:12px;font-size:17.5px}
.inkt-blok p strong{color:var(--wit);font-weight:700}
.inkt-blok .mono-route{color:#E8493F}
.inkt-blok .paperclip{position:absolute;top:0;right:clamp(20px,8vw,110px);width:2px;height:100%;border-left:2px dashed rgba(238,241,244,.14);pointer-events:none}

/* — route-links (mono) — */
.mono-route{font-family:'Courier Prime',monospace;font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stempel);text-decoration:none;display:inline-block;margin-top:14px}
.mono-route:hover{border-bottom:2px solid currentColor}

/* — platte lijst (herken / meemaken) — */
.platgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.plat-item{padding:26px 0;border-bottom:1.5px dashed var(--lijn)}
.plat-item h3{font-weight:800;font-size:clamp(19px,1.9vw,23px);margin-bottom:7px;line-height:1.25}
.plat-item h3 q{quotes:"„" "”"}
.plat-item h3 .rood{color:var(--stempel)}
.plat-item p{color:var(--grijs);font-size:15.5px;max-width:54ch}

/* — eerlijk-kader met label — */
.kader{border:2px solid var(--inkt);padding:clamp(26px,4vw,52px);position:relative;max-width:900px;background:var(--wit);box-shadow:var(--schaduw-s)}
.kader .label{position:absolute;top:-11px;left:28px;background:var(--wit);padding:0 12px;font-family:'Courier Prime',monospace;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--stempel)}
.kader h2{font-weight:800;font-size:clamp(24px,2.8vw,34px);margin-bottom:14px}
.kader p{color:var(--grijs);max-width:66ch;margin-bottom:10px}
.kader p strong{color:var(--inkt);font-weight:700}

/* — dienst-bladen (subpagina's) — */
.blad{background:var(--wit);border:2px solid var(--inkt);box-shadow:var(--schaduw-s);padding:clamp(24px,3.5vw,44px);margin-top:28px}
.blad .vraag{font-family:'Courier Prime',monospace;font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stempel);display:block;margin-bottom:10px}
.blad h3{font-weight:800;font-size:clamp(21px,2.4vw,27px);margin-bottom:10px;letter-spacing:-.01em}
.blad>p{color:var(--grijs);max-width:64ch}
.blad .klaar{display:flex;align-items:flex-start;gap:14px;margin-top:20px;padding-top:16px;border-top:1.5px dashed var(--lijn);font-family:'Courier Prime',monospace;font-size:14.5px}
.blad .klaar .box{margin-top:1px}
.blad .klaar b{color:var(--stempel);text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;display:block;margin-bottom:3px}
.blad .klaar .box::after{content:"";position:absolute;left:4px;top:4px;width:12px;height:7px;border-left:3px solid var(--stempel);border-bottom:3px solid var(--stempel);transform:rotate(-45deg)}

/* — platte lijst binnen een blad (AI-projecten e.d.) — */
.lijst-plat{list-style:none;margin-top:14px}
.lijst-plat li{padding:12px 0;border-bottom:1.5px dashed var(--lijn);color:var(--grijs);font-size:15.5px;max-width:70ch}
.lijst-plat li:last-child{border-bottom:none}
.lijst-plat li strong{color:var(--inkt);font-weight:700}

/* — afsluiter onderaan subpagina's — */
.afsluiter{margin-top:clamp(48px,7vw,80px);max-width:640px}
.afsluiter h2{font-weight:800;font-size:clamp(26px,3.2vw,36px);margin-bottom:12px;letter-spacing:-.01em}
.afsluiter p{color:var(--grijs);margin-bottom:24px;max-width:58ch}

/* — stappen (werkwijze) — */
.stap-item{display:flex;gap:clamp(16px,3vw,34px);padding:26px 0;border-bottom:1.5px dashed var(--lijn)}
.stap-item:last-child{border-bottom:none}
.stap-item .nr{font-family:'Courier Prime',monospace;font-weight:700;font-size:15px;color:var(--stempel);flex:none;width:34px;padding-top:4px}
.stap-item h3{font-weight:800;font-size:clamp(20px,2.2vw,25px);margin-bottom:6px}
.stap-item p{color:var(--grijs);max-width:60ch}
.stap-item p strong{color:var(--inkt);font-weight:700}

/* — formulier als document — */
.contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.contact-grid h2{font-weight:800;font-size:clamp(30px,4vw,46px);margin-bottom:16px;max-width:16ch;letter-spacing:-.01em}
.contact-grid .uitleg{color:var(--grijs);max-width:48ch}
.contact-grid .klein{margin-top:18px;font-size:14.5px;color:var(--grijs)}
.contact-grid .klein a{color:var(--stempel);font-weight:700;text-decoration:none}
.formulier{background:var(--wit);border:2px solid var(--inkt);box-shadow:var(--schaduw);padding:clamp(22px,3.5vw,38px)}
.formulier .formkop{display:flex;justify-content:space-between;border-bottom:2px solid var(--inkt);padding-bottom:10px;margin-bottom:22px}
.veld{margin-bottom:18px}
.veld label{display:block;font-family:'Courier Prime',monospace;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;color:var(--inkt)}
.veld label .optioneel{text-transform:none;letter-spacing:.02em;font-weight:400;color:var(--grijs)}
.veld textarea,.veld input{width:100%;border:2px solid var(--lijn);background:var(--archief);padding:12px 14px;font-family:'Schibsted',sans-serif;font-size:16px;color:var(--inkt)}
.veld textarea:focus,.veld input:focus{outline:none;border-color:var(--inkt)}
.veld textarea{min-height:120px;resize:vertical}
.formulier .knop-p{width:100%;text-align:center;border:none;font-size:16.5px}
.form-fout{display:none;margin-top:14px;font-family:'Courier Prime',monospace;font-size:14px;color:var(--stempel);border-left:3px solid var(--stempel);padding:10px 14px;background:var(--archief)}
.form-fout a{color:var(--stempel);font-weight:700}
.form-fout.zichtbaar{display:block}
.privacy-noot{margin-top:14px;font-size:13px;line-height:1.5;color:var(--grijs)}
.privacy-noot a{color:var(--grijs);text-decoration:underline}
.privacy-noot a:hover{color:var(--inkt)}

/* — na-bericht stappen — */
.nastappen{margin-top:30px}
.nastappen .stapje{display:flex;gap:14px;padding:12px 0;border-bottom:1.5px dashed var(--lijn);font-size:15.5px;color:var(--grijs)}
.nastappen .stapje:last-child{border-bottom:none}
.nastappen .stapje b{font-family:'Courier Prime',monospace;color:var(--stempel);flex:none}

/* — footer als archieflade — */
footer{background:var(--inkt);color:#8F9AB4;padding:52px 0 36px;font-size:14.5px;margin-top:clamp(56px,8vw,96px)}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px}
footer .wordmark{color:var(--wit)}
footer .wordmark b{color:#E8493F}
footer p{max-width:36ch;margin-top:12px}
footer h5{font-family:'Courier Prime',monospace;color:var(--archief);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
footer a{display:block;color:#8F9AB4;text-decoration:none;padding:3px 0}
footer a:hover{color:var(--wit)}
footer .onder{border-top:1px solid rgba(238,241,244,.14);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:'Courier Prime',monospace;font-size:12px;letter-spacing:.04em}

/* — entrance per componentsoort (géén uniforme fade-up) — */
.io{visibility:visible}

/* — responsive — */
/* tussenbreedte: stempel naast de (smallere) h1 houden, nooit over tekst */
@media(min-width:901px) and (max-width:1120px){
  .stempelvak{top:120px;right:clamp(14px,3vw,44px)}
  .stempel{font-size:clamp(18px,2.4vw,26px)}
}
@media(max-width:900px){
  nav.hoofd{display:none}
  nav.hoofd.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--archief);border-bottom:2px solid var(--inkt);padding:22px clamp(20px,4.5vw,48px);gap:16px;z-index:39}
  .hamb{display:block;background:none;border:2px solid var(--inkt);width:42px;height:42px;cursor:pointer;position:relative;flex:none}
  .hamb span,.hamb span::before,.hamb span::after{position:absolute;height:2px;background:var(--inkt);content:""}
  .hamb span{left:9px;right:9px;top:19px}
  .hamb span::before,.hamb span::after{left:0;right:0}
  .hamb span::before{top:-7px}.hamb span::after{top:7px}
  .mapgrid{grid-template-columns:1fr}
  .platgrid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .tabs{margin-top:36px;flex-wrap:wrap}
  .tab{padding:10px 16px 8px;font-size:12.5px}
  .tab.actief{padding-bottom:12px}
  .stempelvak{position:static;transform:rotate(-8deg);margin:26px 0 4px}
  .check .status{display:none}
  .blad .klaar{flex-direction:row}
  footer .wrap{grid-template-columns:1fr}
  header.top .mono-meta{display:none}
}
@media(min-width:901px){
  .check .status{display:block}
}

/* — reduced motion: alles direct in eindstand — */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .stempel-slam{opacity:.92;transform:scale(1)}
  .tekent .check.af .box::after{border-color:var(--stempel);animation:none}
}