/* ==========================================================================
   stijl2a-tools.css — één stijl voor /tools/ en alle zestien toolpagina's
   --------------------------------------------------------------------------
   Dit bestand vervangt de inline <style>-blokken in marketing/tools/**.
   Elke pagina houdt zijn eigen HTML en zijn eigen klassennamen; alleen de
   opmaak erachter verandert. Klassen die al bestonden en hier terugkomen:
     .wrap .kruim .lead .card .btn .btn2 .klein .cta .let .tabel .verder
     .uit .big .uitleg .rij .regel .weg .check details summary footer
   Nieuw: .toolkop .groep .kaart .kaart__uit .opbouw .bewaar .faq .verwant
   ========================================================================== */

/* ---- lettertypen: dezelfde bestanden als de rest van de site (/font/) ---- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/font/archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/font/archivo-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/font/archivo-700.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/font/archivo-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/font/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/font/plexmono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/font/plexmono-600.woff2') format('woff2')}

:root{
  --grond:#eef1f4;      /* paginagrond */
  --vlak:#ffffff;       /* kaarten en velden */
  --lijn:#bcc7d1;       /* elke scheiding en veldrand */
  --lijn2:#dde4ea;      /* lichte scheiding binnen een kaart */
  --diep:#101d26;       /* tekst, kopbalk, footer */
  --diep2:#1c3040;      /* paneelkop, uitkomstvlak */
  --dim:#4c5a67;        /* bijtekst en labels — 6,6:1 op --vlak */
  --amber:#ffb300;      /* ACTIE. tekst hierop is --op-amber */
  --op-amber:#14100a;   /* 11,2:1 op --amber */
  --amberz:#fff3d4;
  --amber-rand:#eed398;
  --op-amberz:#553d00;
  --staal:#175a94;      /* STAND en links — 5,6:1 op wit */
  --staalz:#f1f6fa;
  --groen:#136c3f;
  --rood:#a32418;
  --kop:Archivo,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wit:#fff;
  --opdiep:#b3c2cf;
  --opdiep2:#8ba1b3;
  --opdiep-link:#cddcec;
  --diepl:#2c4152;
  --diepl2:#22384a;
  --grijs:#9fadb9;
  --grijs2:#aab6c1;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--kop);color:var(--diep);background:var(--vlak);line-height:1.6;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.wrap--smal{max-width:760px}
a{color:var(--staal)}
a:hover{color:var(--diep)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
img{max-width:100%;display:block}

/* ---- kopbalk: donker, vlak, geen verloop ---- */
.toolkop{background:var(--diep)}
.toolkop .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;
  min-height:64px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.toolkop .merk{display:inline-flex;align-items:center;min-height:44px;font:800 20px/1 var(--kop);
  color:var(--wit);text-decoration:none;letter-spacing:-.02em}
.toolkop .merk span{color:var(--amber)}
.toolkop nav{display:flex;gap:6px;flex-wrap:wrap}
.toolkop nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font:600 14.5px/1 var(--kop);color:var(--opdiep);text-decoration:none}
.toolkop nav a:hover{color:var(--wit)}
.toolkop nav a.knop{background:var(--amber);color:var(--op-amber);font-weight:700}
.toolkop nav a.knop:hover{background:var(--wit);color:var(--diep)}

/* ---- pagina-inleiding ---- */
.intro{background:var(--grond);border-bottom:1px solid var(--lijn);padding:34px 0 30px}
.kruim{display:inline-flex;align-items:center;min-height:44px;font:600 13px/1 var(--kop);
  color:var(--dim);text-decoration:none}
.kruim:hover{color:var(--diep)}
h1{font:800 40px/1.08 var(--kop);letter-spacing:-.035em;color:var(--diep)}
@media(max-width:640px){h1{font-size:29px}}
.lead{color:var(--dim);font-size:18px;line-height:1.55;margin-top:12px;max-width:64ch;text-wrap:pretty}
.bovenkop{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--staal);margin-bottom:10px}
h2{font:800 27px/1.15 var(--kop);letter-spacing:-.03em;color:var(--diep);margin:0 0 8px}
h3{font:700 17.5px/1.3 var(--kop);color:var(--diep);margin:0 0 6px}
p{margin-bottom:14px;color:var(--dim);text-wrap:pretty}
main{padding:40px 0 0}
ul,ol{margin:0 0 16px 22px;color:var(--dim)}
li{margin-bottom:7px}
.klein{font-size:13px;line-height:1.55;color:var(--dim);margin-top:8px}

/* ---- kaart: rechte hoeken, haarlijn, geen schaduw ---- */
.card{background:var(--vlak);border:1px solid var(--lijn);padding:22px 24px;margin:20px 0}
.card--grond{background:var(--grond)}
.let{background:var(--amberz);border:1px solid var(--amber-rand);border-left:3px solid var(--amber);
  padding:13px 16px;margin:16px 0;font-size:14.5px;line-height:1.6;color:var(--op-amberz)}

/* ---- formulier ---- */
label{display:block;font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin:16px 0 5px}
input,select,textarea{width:100%;min-height:48px;padding:12px 13px;border:1px solid var(--lijn);
  border-radius:0;font:400 16px/1.35 var(--kop);background:var(--vlak);color:var(--diep)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--amber);outline-offset:-1px;
  border-color:var(--amber)}
input[type=number]{font-family:var(--mono)}
.rij{display:flex;gap:12px}
.rij>*{flex:1}
@media(max-width:640px){.rij{flex-direction:column;gap:0}}

/* ---- knoppen: 50px, donkere tekst op amber ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;
  background:var(--amber);color:var(--op-amber);font:700 16px/1 var(--kop);border:none;border-radius:0;
  cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--diep);color:var(--wit)}
.btn--breed{width:100%}
.btn2{background:var(--vlak);color:var(--diep);border:1px solid var(--lijn);font-weight:600}
.btn2:hover{background:var(--diep);border-color:var(--diep);color:var(--wit)}
.btn3{background:transparent;color:var(--staal);border:none;min-height:44px;padding:0 4px;
  font:600 14.5px/1 var(--kop);text-decoration:underline;cursor:pointer}
.btn3:hover{color:var(--diep);background:transparent}

/* ---- uitkomst van een rekentool ---- */
.uit{background:var(--diep);color:var(--wit);padding:22px 24px;margin-top:20px}
.uit .lab{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--opdiep2)}
.uit .big{font:800 46px/1.02 var(--mono);color:var(--amber);letter-spacing:-.02em;margin:6px 0 2px}
@media(max-width:640px){.uit .big{font-size:36px}}
.uit .sub{font-size:14.5px;color:var(--opdiep)}
.opbouw{margin-top:18px;padding-top:14px;border-top:1px solid var(--diepl);
  display:flex;flex-direction:column;gap:7px}
.opbouw div{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--opdiep)}
.opbouw div b{color:var(--wit);font-family:var(--mono);font-weight:600;white-space:nowrap}
.opbouw div.eind{border-top:1px solid var(--diepl);padding-top:9px;color:var(--wit);font-weight:700}
.bewaar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--lijn)}
.bewaar .klein{margin:0;flex:1 1 200px}

/* ---- tabel ---- */
.tabel{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.tabel th,.tabel td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--lijn2)}
.tabel th{background:var(--diep);color:var(--wit);font:600 11.5px/1.4 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;border-bottom:none}
.tabel td.r,.tabel th.r{text-align:right;font-family:var(--mono)}

/* ---- een tabel mag de pagina nooit breder maken dan het scherm (deel 07) ---- */
.tabelwrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabelwrap .tabel{min-width:420px}
@media(min-width:641px){.tabelwrap .tabel{min-width:0}}
.opbouw div b.tekst{font-family:var(--mono);font-weight:400;white-space:normal;
  text-align:right;max-width:62%}

/* ---- overslaan-link: onzichtbaar tot je hem met tab bereikt ---- */
.overslaan{position:absolute;left:-9999px;top:0;z-index:99;display:inline-flex;align-items:center;
  min-height:44px;padding:0 16px;background:var(--amber);color:var(--op-amber);
  font:700 15px/1 var(--kop);text-decoration:none}
.overslaan:focus{left:0;color:var(--op-amber)}

/* ---- de tool-index: twee groepen, 1px-raster ---- */
.groep{margin:0 0 40px}
.groep__kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:16px}
.groep__kop p{margin:0;font-size:15px;max-width:52ch}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;
  background:var(--lijn);border:1px solid var(--lijn)}
.kaart{display:flex;flex-direction:column;gap:5px;background:var(--vlak);padding:18px;
  text-decoration:none;min-height:132px}
.kaart:hover{background:var(--staalz)}
.kaart b{font:700 16.5px/1.3 var(--kop);color:var(--diep);letter-spacing:-.01em}
.kaart span{font-size:14px;line-height:1.55;color:var(--dim)}
.kaart__uit{margin-top:auto;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--staal)}
.kaart:hover .kaart__uit{color:var(--diep)}

/* ---- verwante tools ---- */
.verwant,.verder{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);margin:14px 0 0}
.verwant a,.verder a{display:block;background:var(--vlak);padding:16px 18px;text-decoration:none}
.verwant a:hover,.verder a:hover{background:var(--staalz)}
.verwant b,.verder b{display:block;color:var(--diep);font:700 15.5px/1.3 var(--kop);margin-bottom:3px}
.verwant span,.verder span{color:var(--dim);font-size:13.5px;line-height:1.5}

/* ---- vragen ---- */
.faq details{border:1px solid var(--lijn);border-bottom:none;background:var(--vlak)}
.faq details:last-of-type{border-bottom:1px solid var(--lijn)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;
  padding:14px 20px;cursor:pointer;font:700 16.5px/1.35 var(--kop);color:var(--diep);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--staal);font:600 20px/1 var(--mono);flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 20px 18px;margin:0;font-size:15px;line-height:1.65}
details{border:1px solid var(--lijn);background:var(--vlak);padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:700;color:var(--diep);min-height:44px;display:flex;align-items:center}

/* ---- cta-band ---- */
.cta{background:var(--diep);color:var(--wit);padding:30px;margin:32px 0;text-align:center}
.cta h2{color:var(--wit);font-size:25px;margin-bottom:8px}
.cta p{color:var(--opdiep);margin-bottom:18px;max-width:56ch;margin-left:auto;margin-right:auto}
.cta .btn{background:var(--amber);color:var(--op-amber)}
.cta .btn:hover{background:var(--wit);color:var(--diep)}
.cta .onder{color:var(--opdiep2);font-size:13px;margin:12px 0 0}

/* ---- voet ---- */
footer{background:var(--diep);color:var(--opdiep);font-size:13.5px;line-height:1.7;padding:28px 0 34px;
  margin-top:40px}
footer a{color:var(--opdiep-link)}
footer .voetlinks{display:flex;gap:6px 18px;flex-wrap:wrap;margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px solid var(--diepl2)}
footer .voetlinks a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}

/* ---- documentbouwer (factuur/offerte/werkbon) ---- */
.bouwer{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.bouwer{grid-template-columns:1fr}}
.regel{display:grid;grid-template-columns:1fr 72px 104px 96px 48px;gap:8px;align-items:end;margin-bottom:8px}
@media(max-width:640px){.regel{grid-template-columns:1fr 1fr;gap:6px}}
.regel .weg{background:var(--vlak);border:1px solid var(--lijn);color:var(--rood);font-size:17px;
  cursor:pointer;min-height:48px;line-height:1}
.regel .weg:hover{border-color:var(--rood)}
#doc{background:var(--vlak);border:1px solid var(--lijn);padding:28px;font-size:14px;color:var(--diep)}
#doc .kop{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
#doc .van{font-size:13px;color:var(--dim);line-height:1.55;white-space:pre-line}
#doc .doctitel{font:800 23px/1.15 var(--kop);color:var(--diep);letter-spacing:-.03em}
#doc .meta{font:400 13px/1.55 var(--mono);color:var(--dim);margin-top:4px}
#doc .aan{margin-bottom:18px;font-size:13.5px;line-height:1.55;white-space:pre-line}
#doc .aan em{display:block;font:600 11px/1 var(--mono);font-style:normal;color:var(--dim);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:3px}
#doc table{width:100%;border-collapse:collapse;font-size:13.5px}
#doc th{text-align:left;color:var(--dim);font:600 11px/1 var(--mono);text-transform:uppercase;
  letter-spacing:.1em;border-bottom:1px solid var(--lijn);padding:0 0 7px}
#doc td{padding:8px 0;border-bottom:1px solid var(--lijn2);vertical-align:top}
#doc td.r,#doc th.r{text-align:right;font-family:var(--mono)}
#doc .tot{margin-top:14px;margin-left:auto;width:min(280px,100%);font-size:13.5px}
#doc .tot div{display:flex;justify-content:space-between;padding:6px 0;font-family:var(--mono)}
#doc .tot .eind{border-top:2px solid var(--diep);margin-top:4px;padding-top:9px;font-weight:700;
  font-size:17px;color:var(--diep)}
#doc .slot{margin-top:20px;padding-top:14px;border-top:1px solid var(--lijn);font-size:12.5px;
  color:var(--dim);line-height:1.6;white-space:pre-line}
#doc .merk{margin-top:14px;font:400 11px/1.5 var(--mono);color:var(--grijs)}
#doc .ph{color:var(--grijs2)}
.check{background:var(--grond);border:1px solid var(--lijn);padding:15px 17px;margin-top:16px;font-size:14px}
.check b{color:var(--diep);display:block;margin-bottom:7px}
.check ul{margin:0 0 0 20px;color:var(--op-amberz)}
.check li{margin-bottom:4px}
.check .goed{color:var(--groen);font-weight:600}

@media print{
  body{background:var(--wit)}
  .toolkop,.intro,footer,.card,.cta,.verwant,.verder,.klein,.kruim,h2,.uitleg,.geenprint,.faq,.bewaar,.overslaan
    {display:none!important}
  #doc{border:0;padding:0;font-size:12.5px}
  #dockaart{display:block!important;border:0;padding:0;margin:0}
  #doc .ph{display:none}
  .wrap{max-width:none;padding:0}
  @page{margin:16mm}
}