/* ==================================================================
   YOSENCO Group Docs
   ================================================================== */

:root{
  /* merkkleuren */
  --oranje:#FF8A00;
  --blauw:#0070DD;
  --grijs:#676A79;
  --merk-zwart:#111216;

  /* interface */
  --ink:#0B0C10;
  --ink-2:#101218;
  --surface:#161920;
  --surface-2:#1D2129;
  --line:#282D38;
  --line-soft:#1F242C;
  --text:#ECEEF2;
  --text-2:#9BA2B0;
  --text-3:#6C7382;
  --paper:#FFFFFF;
  --paper-2:#F3F4F6;
  --paper-line:#E3E5E9;
  --goed:#2FBF71;
  --niet:#E5342B;

  --hex:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  --streep:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.045) 5px 6px);
  --r-s:6px;
  --r-m:10px;
  --r-l:14px;
  --breedte:1160px;
  --kop:'Sora',system-ui,sans-serif;
  --tekst:'Inter',system-ui,sans-serif;
  --data:'JetBrains Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--tekst);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
a{color:inherit}

:focus-visible{
  outline:2px solid var(--oranje);
  outline-offset:3px;
  border-radius:3px;
}

.omhulsel{width:100%;max-width:var(--breedte);margin:0 auto;padding:0 28px}

/* ---------- typografie ---------- */

h1,h2,h3,h4{font-family:var(--kop);font-weight:700;letter-spacing:-.022em;margin:0;line-height:1.14}
h1{font-size:clamp(2.4rem,5.6vw,4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.12rem;letter-spacing:-.012em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.ooglid{
  font-family:var(--data);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-3);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.ooglid::before{
  content:'';
  width:9px;height:10px;
  flex:none;
  background:var(--oranje);
  clip-path:var(--hex);
}
.lood{font-size:1.06rem;color:var(--text-2);max-width:62ch}
.klein{font-size:.86rem;color:var(--text-3)}

/* ---------- koptekst / navigatie ---------- */

.overslaan{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--oranje);color:#111216;padding:12px 20px;font-weight:600;
}
.overslaan:focus{left:12px;top:12px}

.kop{
  position:sticky;top:0;z-index:50;
  background:rgba(11,12,16,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.kop-in{
  display:flex;align-items:center;gap:24px;
  height:68px;
}
.slot{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;flex:none;
}
.slot img{height:26px;width:auto}
.slot-lijn{width:1px;height:26px;background:var(--line);flex:none}
.slot-woord{
  font-family:var(--kop);font-weight:700;font-size:1.08rem;
  letter-spacing:-.02em;color:var(--text);
}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  font-size:.9rem;font-weight:500;text-decoration:none;color:var(--text-2);
  padding:8px 14px;border-radius:var(--r-s);
  transition:color .16s,background .16s;
}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--text);background:var(--surface-2)}

/* ---------- secties ---------- */

.sectie{padding:84px 0;border-top:1px solid var(--line-soft)}
.sectie:first-of-type{border-top:0}
.sectie-kop{max-width:64ch;margin-bottom:40px}
.sectie-kop h2{margin-bottom:14px}

/* ---------- hero ---------- */

.hero{padding:96px 0 76px;position:relative;overflow:hidden}
.hero::after{
  content:'';position:absolute;inset:0;background:var(--streep);
  mask-image:radial-gradient(1000px 460px at 88% 4%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(1000px 460px at 88% 4%,#000,transparent 72%);
  pointer-events:none;
}
.hero-in{position:relative;z-index:1;max-width:min(760px,100%)}
.hero h1{margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--oranje)}

.laatste{
  display:inline-flex;align-items:center;gap:16px;
  margin-top:34px;padding:12px 20px 12px 14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-m);text-decoration:none;
  transition:border-color .16s,transform .16s;
}
.laatste:hover{border-color:var(--oranje);transform:translateY(-2px)}
.laatste-tag{
  font-family:var(--data);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--oranje);
  padding:5px 9px;border-radius:4px;font-weight:600;
}
.laatste-tekst{font-size:.92rem;color:var(--text-2)}
.laatste-tekst b{color:var(--text);font-weight:600}
.laatste-tekst code{font-family:var(--data);font-size:.86em;color:var(--oranje)}

/* ---------- ingangen ---------- */

.ingangen{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ingangen--drie{grid-template-columns:repeat(3,1fr)}
.ingang{
  display:flex;flex-direction:column;
  padding:32px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-l);
  text-decoration:none;position:relative;overflow:hidden;
  transition:border-color .18s,transform .18s,background .18s;
}
.ingang:hover{border-color:var(--line);background:var(--surface-2);transform:translateY(-3px)}
.ingang-hex{
  width:36px;height:40px;flex:none;margin-bottom:22px;
  clip-path:var(--hex);
  display:flex;align-items:center;justify-content:center;
}
.ingang-hex svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
/* de drie hexagons uit ons icoon: oranje, blauw, wit */
.ingang:nth-child(1) .ingang-hex{background:var(--oranje);color:#111216}
.ingang:nth-child(2) .ingang-hex{background:var(--blauw);color:#FFFFFF}
.ingang:nth-child(3) .ingang-hex{background:#FFFFFF;color:#111216}
.ingang h3{font-size:1.3rem;margin-bottom:8px}
.ingang p{font-size:.94rem;color:var(--text-2);margin-bottom:22px}
.ingang-pad{
  margin-top:auto;font-family:var(--data);font-size:.8rem;color:var(--text-3);
  display:flex;align-items:center;gap:8px;
}
.ingang:hover .ingang-pad{color:var(--oranje)}

/* nog niet uitgebracht product */
.wacht{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  font-family:var(--kop);font-weight:600;font-size:1.05rem;
  color:var(--text-3);letter-spacing:-.01em;
}
.wacht-hex{
  width:34px;height:38px;
  background:var(--surface-2);
  clip-path:var(--hex);
  background-image:var(--streep);
}

/* ---------- voettekst ---------- */

.voet{border-top:1px solid var(--line-soft);padding:52px 0 60px;margin-top:40px}
.voet-in{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.voet img{height:22px;width:auto;margin-bottom:14px}
.voet-links{display:flex;gap:26px;flex-wrap:wrap}
.voet-links a{font-size:.88rem;color:var(--text-2);text-decoration:none}
.voet-links a:hover{color:var(--text)}
.voet-fijn{font-size:.8rem;color:var(--text-3);font-family:var(--data)}

/* ==================================================================
   UPDATES
   ================================================================== */

.werkblad{display:grid;grid-template-columns:250px minmax(0,1fr);gap:52px;align-items:start;padding:52px 0 40px}
.werkblad>*{min-width:0}

.rail{position:sticky;top:96px}
.rail-titel{
  font-family:var(--data);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 14px;padding-left:14px;
}
.rail-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rail-knop{
  width:100%;text-align:left;display:flex;align-items:center;gap:12px;
  background:none;border:0;border-radius:var(--r-s);
  padding:11px 14px;cursor:pointer;color:var(--text-2);
  font-family:var(--tekst);font-size:.94rem;font-weight:500;
  transition:background .16s,color .16s;
}
.rail-knop:hover{background:var(--surface);color:var(--text)}
.rail-knop[aria-selected="true"]{background:var(--surface-2);color:var(--text);font-weight:600}
.rail-knop[aria-selected="true"] .rail-stip{background:var(--oranje)}
.rail-stip{width:9px;height:10px;flex:none;background:var(--line);clip-path:var(--hex)}
.rail-knop:disabled{cursor:not-allowed;color:var(--text-3);opacity:.62}
.rail-knop:disabled:hover{background:none;color:var(--text-3)}
.rail-later{
  margin-left:auto;font-family:var(--data);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);
  border:1px solid var(--line);border-radius:4px;padding:2px 6px;
}

/* leeg */
.leeg{
  border:1px dashed var(--line);border-radius:var(--r-l);
  padding:76px 40px;text-align:center;
}
.leeg-hexen{display:flex;justify-content:center;gap:7px;margin-bottom:26px}
.leeg-hexen span{width:16px;height:18px;background:var(--line);clip-path:var(--hex)}
.leeg-hexen span:nth-child(1){background:var(--oranje);opacity:.5}
.leeg-hexen span:nth-child(2){background:var(--blauw);opacity:.5}
.leeg h2{font-size:1.32rem;margin-bottom:10px}
.leeg p{color:var(--text-2);font-size:.95rem;max-width:44ch;margin-inline:auto}

/* productkop */
.prodkop{display:flex;align-items:flex-start;gap:18px;margin-bottom:8px}
.prodkop img{height:34px;width:auto;margin-top:4px}
.prodkop h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.prodkop-sub{color:var(--text-2);font-size:.98rem;margin-top:6px}

/* gereedschapsbalk */
.balk{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin:30px 0 8px;padding-bottom:22px;border-bottom:1px solid var(--line-soft);
}
.zoek{position:relative;flex:1 1 230px;max-width:320px}
.zoek input{
  width:100%;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-s);color:var(--text);
  font-family:var(--tekst);font-size:.9rem;
  padding:10px 12px 10px 36px;
}
.zoek input::placeholder{color:var(--text-3)}
.zoek svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--text-3);fill:none;stroke-width:2}
.filters{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.filter{
  background:none;border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--text-2);font-family:var(--data);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px;cursor:pointer;transition:.16s;
}
.filter:hover{color:var(--text);border-color:var(--text-3)}
.filter[aria-pressed="true"]{background:var(--surface-2);color:var(--text);border-color:var(--text-3)}

/* tijdlijn */
.tijdlijn{position:relative;padding:38px 0 0 0}
.tijdlijn::before{
  content:'';position:absolute;left:19px;top:52px;bottom:14px;width:1px;
  background:linear-gradient(180deg,var(--line) 0,var(--line) calc(100% - 90px),transparent 100%);
}
.knoop{position:relative;padding:0 0 46px 68px}
.knoop-hex{
  position:absolute;left:0;top:2px;
  width:39px;height:44px;
  background:var(--surface-2);clip-path:var(--hex);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--data);font-size:.66rem;font-weight:700;color:var(--text-2);
}
.knoop--nieuw .knoop-hex{background:var(--oranje);color:#111216}
.knoop--verbeterd .knoop-hex{background:var(--blauw);color:#fff}
.knoop--fix .knoop-hex{background:var(--surface-2);color:var(--text-2)}
.knoop--werk .knoop-hex{background:none;border:0;color:var(--text-3);
  box-shadow:none;background-image:var(--streep);background-color:var(--surface)}

.knoop-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:6px}
.knoop-versie{font-family:var(--kop);font-weight:700;font-size:1.42rem;letter-spacing:-.02em}
.knoop-build,.knoop-datum{font-family:var(--data);font-size:.78rem;color:var(--text-3)}
.knoop-kop{font-family:var(--kop);font-weight:600;font-size:1.02rem;color:var(--text-2);margin-bottom:18px}

.punten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.punt{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line-soft);
  padding:14px 18px;
}
.punt:first-child{border-radius:var(--r-m) var(--r-m) 0 0}
.punt:last-child{border-radius:0 0 var(--r-m) var(--r-m)}
.punt:only-child{border-radius:var(--r-m)}
.punt p{font-size:.93rem;color:var(--text-2);margin:0}
.merk{
  flex:none;margin-top:2px;
  font-family:var(--data);font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;min-width:82px;text-align:center;
}
.merk--nieuw{background:rgba(255,138,0,.14);color:var(--oranje)}
.merk--verbeterd{background:rgba(0,112,221,.16);color:#6BB4FF}
.merk--fix{background:rgba(155,162,176,.12);color:var(--text-2)}

.werkkaart{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-m);padding:18px;
}
.werkkaart h4{font-family:var(--kop);font-size:.98rem;font-weight:600;margin-bottom:6px}
.werkkaart p{font-size:.91rem;color:var(--text-2);margin:0}
.werkkaart + .werkkaart{margin-top:1px}

.geenresultaat{
  border:1px dashed var(--line);border-radius:var(--r-m);
  padding:44px 28px;text-align:center;color:var(--text-2);font-size:.95rem;
}

/* ==================================================================
   MERK
   ================================================================== */

.doek{
  background:var(--paper);border-radius:var(--r-m);
  display:flex;align-items:center;justify-content:center;
  padding:40px;min-height:150px;
}
.doek--donker{background:var(--merk-zwart)}
.doek--grijs{background:var(--paper-2)}

/* logokaarten */
.logoraster{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.logokaart{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--surface)}
.logokaart .doek{border-radius:0;min-height:184px}
.logokaart-voet{padding:16px 20px;border-top:1px solid var(--line)}
.logokaart-voet strong{display:block;font-family:var(--kop);font-size:.96rem;font-weight:600;margin-bottom:3px}
.logokaart-voet span{font-size:.84rem;color:var(--text-3)}

/* wel en niet */
.regelraster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.regel{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:var(--surface)}
.regel-doek{
  background:var(--paper);height:172px;
  display:flex;align-items:center;justify-content:center;
  padding:26px;position:relative;overflow:hidden;
}
.regel-doek img{max-height:56px;width:auto}
.regel-badge{
  position:absolute;right:12px;bottom:12px;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.76rem;font-weight:700;line-height:1;
}
.regel-badge--niet{background:var(--niet)}
.regel-badge--goed{background:var(--goed)}
.regel-tekst{padding:14px 18px 16px;font-size:.88rem;color:var(--text-2);border-top:1px solid var(--line)}
.regel-tekst b{color:var(--text);font-weight:600}

/* iconen op faviconformaat */
.tegels{display:flex;align-items:center;gap:12px}
.tegel{
  width:34px;height:34px;flex:none;border-radius:7px;
  background:#EDEFF2;border:1px solid #DDE0E5;
  display:flex;align-items:center;justify-content:center;
}
.tegel--donker{background:#111216;border-color:#111216}
.tegel img{width:20px;height:auto;max-height:none}

/* misbruikvoorbeelden */
.mis--rek img{transform:scaleX(1.65)}
.mis--pers img{transform:scaleY(1.75)}
.mis--snij{padding:26px 0 26px 96px;justify-content:flex-start}
.mis--snij img{max-height:none;height:74px;min-width:0;transform:scale(2.05);transform-origin:left center}
.mis--draai img{transform:rotate(-13deg)}
.mis--schaduw img{filter:drop-shadow(7px 7px 5px rgba(0,0,0,.55))}
.mis--kleur img{filter:hue-rotate(122deg) saturate(1.7)}
.mis--masker{background:linear-gradient(120deg,#2b6cb0,#d97706 48%,#111216)}
.mis--masker img{mix-blend-mode:screen;opacity:.9}
.mis--druk{
  background-image:
    radial-gradient(circle at 22% 34%,#ffb703 0 42px,transparent 43px),
    radial-gradient(circle at 74% 66%,#0070DD 0 54px,transparent 55px),
    repeating-linear-gradient(45deg,#e5e7eb 0 9px,#d1d5db 9px 18px);
}

/* paginablad met inhoudsopgave rechts */
.merkblad{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:56px;align-items:start}
.merkinhoud{min-width:0}
.merkinhoud .sectie:first-child{padding-top:24px}

/* vrije ruimte diagram */
.vr{--x:46px;background:var(--paper);border-radius:var(--r-m);padding:34px}
.vr-kader{
  position:relative;max-width:520px;margin:0 auto;border:1px dashed #C5C9D1;
  padding:var(--x);
  display:flex;align-items:center;justify-content:center;min-height:120px;
}
.vr-kader img{height:44px;width:auto}
.vr-hex{
  position:absolute;height:var(--x);width:calc(var(--x)*.87);
  background:rgba(255,138,0,.2);clip-path:var(--hex);
}
.vr-hex[data-plek="lb"]{left:0;top:0}
.vr-hex[data-plek="rb"]{right:0;top:0}
.vr-hex[data-plek="lo"]{left:0;bottom:0}
.vr-hex[data-plek="ro"]{right:0;bottom:0}
.vr-hex[data-plek="mb"]{left:50%;transform:translateX(-50%);top:0}
.vr-hex[data-plek="mo"]{left:50%;transform:translateX(-50%);bottom:0}
.vr-hex[data-plek="ml"]{left:0;top:50%;transform:translateY(-50%)}
.vr-hex[data-plek="mr"]{right:0;top:50%;transform:translateY(-50%)}
.vr-maat{
  margin-top:18px;justify-content:center;font-family:var(--data);font-size:.74rem;color:#6B7280;
  display:flex;align-items:center;gap:9px;
}
.vr-maat i{width:13px;height:15px;background:rgba(255,138,0,.55);clip-path:var(--hex);display:block}

.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}

/* maten */
.maten{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.maat{
  border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);overflow:hidden;
}
.maat-doek{background:var(--paper);padding:28px;display:flex;align-items:flex-end;gap:24px;min-height:120px}
.maat-doek img{width:auto}
.maat-voet{padding:14px 18px;border-top:1px solid var(--line);font-size:.88rem;color:var(--text-2)}
.maat-voet code{font-family:var(--data);color:var(--oranje);font-size:.86em}

/* kleuren */
.kleuren{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.kleur{
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  background:var(--surface);text-align:left;
  font:inherit;color:inherit;cursor:pointer;padding:0;
  transition:border-color .16s,transform .16s;
}
.kleur:hover{border-color:var(--text-3);transform:translateY(-2px)}
.kleur-vlak{height:88px}
.kleur-voet{padding:13px 16px 15px}
.kleur-voet strong{display:block;font-family:var(--kop);font-size:.9rem;font-weight:600;margin-bottom:3px}
.kleur-voet span{font-family:var(--data);font-size:.8rem;color:var(--text-3)}
.kleur[data-gekopieerd="ja"] .kleur-voet span{color:var(--goed)}

/* typografie proef */
.proeven{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px}
.proef{border:1px solid var(--line);border-radius:var(--r-m);padding:24px;background:var(--surface)}
.proef-groot{font-size:2.5rem;line-height:1;margin-bottom:18px;letter-spacing:-.03em}
.proef:nth-child(1) .proef-groot{font-family:var(--kop);font-weight:700}
.proef:nth-child(2) .proef-groot{font-family:var(--tekst);font-weight:500}
.proef:nth-child(3) .proef-groot{font-family:var(--data);font-weight:500;font-size:2.1rem}
.proef h3{margin-bottom:6px}
.proef p{font-size:.88rem;color:var(--text-2)}
.proef-rol{font-family:var(--data);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:16px}

/* partnerschap */
.slot-voorbeeld{
  background:var(--paper);border-radius:var(--r-m);padding:48px 40px;
  display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;
}
.slot-voorbeeld img{height:38px;width:auto}
.slot-voorbeeld .streep{width:1px;height:52px;background:#C8CBD2}
.slot-partner{
  font-family:var(--kop);font-weight:700;font-size:1.05rem;color:#111216;
  line-height:1.2;max-width:110px;
}

/* download */
.download{
  border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--surface);padding:32px;
}
.instemming{display:flex;gap:13px;align-items:flex-start;margin-bottom:22px}
.instemming input{
  width:19px;height:19px;flex:none;margin:2px 0 0;accent-color:var(--oranje);cursor:pointer;
}
.instemming label{font-size:.92rem;color:var(--text-2);cursor:pointer}
.instemming a{color:var(--oranje);text-decoration:underline;text-underline-offset:2px}

.knop{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--kop);font-weight:600;font-size:.95rem;
  padding:14px 26px;border-radius:var(--r-s);
  border:1px solid transparent;background:var(--oranje);color:#111216;
  text-decoration:none;cursor:pointer;transition:.16s;
}
.knop:hover{background:#FF9B24}
.knop[aria-disabled="true"],.knop:disabled{
  background:var(--surface-2);color:var(--text-3);cursor:not-allowed;
  border-color:var(--line);
}
.knop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

.bestanden{margin-top:30px;border-top:1px solid var(--line);padding-top:26px}
.bestanden[data-vergrendeld="ja"]{opacity:.45;pointer-events:none}
.bestandgroep + .bestandgroep{margin-top:26px}
.bestandgroep h4{font-family:var(--kop);font-size:.92rem;font-weight:600;margin-bottom:12px}
.bestandlijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:8px}
.bestand{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-s);
  text-decoration:none;font-size:.87rem;color:var(--text-2);
  background:var(--ink-2);transition:.16s;
}
.bestand:hover{border-color:var(--oranje);color:var(--text)}
.bestand-type{
  font-family:var(--data);font-size:.62rem;font-weight:700;letter-spacing:.06em;
  color:var(--text-3);border:1px solid var(--line);border-radius:3px;
  padding:3px 5px;flex:none;
}
.bestand-maat{margin-left:auto;font-family:var(--data);font-size:.72rem;color:var(--text-3)}

/* voorwaarden */
.voorwaarden{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.voorwaarde{border-left:2px solid var(--line);padding:2px 0 2px 20px}
.voorwaarde h3{margin-bottom:8px}
.voorwaarde p{font-size:.92rem;color:var(--text-2)}
.voorwaarde:nth-child(odd){border-left-color:var(--oranje)}
.voorwaarde:nth-child(even){border-left-color:var(--blauw)}

/* inhoudsopgave */
.inhoud{
  position:sticky;top:96px;
  border-left:1px solid var(--line);padding-left:20px;
}
.inhoud-titel{font-family:var(--data);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin:0 0 14px}
.inhoud ol{list-style:none;margin:0;padding:0;counter-reset:i;display:flex;flex-direction:column;gap:3px}
.inhoud a{
  display:block;font-size:.88rem;color:var(--text-2);text-decoration:none;
  padding:5px 0;transition:color .16s;
}
.inhoud a:hover,.inhoud a.actief{color:var(--oranje)}


/* ==================================================================
   HANDLEIDINGEN
   ================================================================== */

.gids{display:grid;grid-template-columns:236px minmax(0,1fr);gap:48px;align-items:start;padding:44px 0 30px}
.gids>*{min-width:0}

.zijnav{position:sticky;top:92px;max-height:calc(100vh - 116px);overflow-y:auto;padding-right:6px}
.zijnav::-webkit-scrollbar{width:6px}
.zijnav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.zijnav-groep+.zijnav-groep{margin-top:24px}
.zijnav-kop{
  font-family:var(--data);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 8px;padding-left:14px;
}
.zijnav ul{list-style:none;margin:0;padding:0}
.zijnav a{
  display:block;font-size:.89rem;color:var(--text-2);text-decoration:none;
  padding:7px 12px;border-radius:var(--r-s);
  border-left:2px solid transparent;
  transition:color .16s,background .16s;
}
.zijnav a:hover{color:var(--text);background:var(--surface)}
.zijnav a.actief{color:var(--oranje);background:var(--surface);border-left-color:var(--oranje)}

.mobielnav{display:none}

.mobielnav details{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
}
.mobielnav summary{
  cursor:pointer;padding:14px 18px;
  font-family:var(--kop);font-weight:600;font-size:.95rem;
  display:flex;align-items:center;gap:11px;list-style:none;
}
.mobielnav summary::-webkit-details-marker{display:none}
.mobielnav summary::before{
  content:'';width:11px;height:12px;flex:none;
  background:var(--oranje);clip-path:var(--hex);
}
.mobielnav summary::after{content:'+';margin-left:auto;font-family:var(--data);color:var(--text-3)}
.mobielnav details[open] summary::after{content:'\\2212'}
.mobielnav-in{padding:0 12px 14px}
.mobielnav .zijnav-groep+.zijnav-groep{margin-top:16px}

/* onderdelen van een handleiding */
.kap{padding:0 0 60px;scroll-margin-top:96px}
.kap+.kap{border-top:1px solid var(--line-soft);padding-top:56px}
.kap h2{font-size:clamp(1.42rem,2.6vw,1.9rem);margin-bottom:14px}
.kap h3{font-size:1.05rem;margin:32px 0 10px}
.kap p{font-size:.96rem;color:var(--text-2);max-width:70ch}
.kap p strong{color:var(--text);font-weight:600}
.kap>p:first-of-type{font-size:1.02rem}
.kap a:not(.knop){color:var(--oranje);text-decoration:underline;text-underline-offset:2px}

.kap code,.pad{
  font-family:var(--data);font-size:.86em;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:4px;padding:2px 7px;color:var(--text);
}
.pad{white-space:nowrap}

/* genummerde stappen */
.stappen{list-style:none;margin:24px 0 0;padding:0;counter-reset:stap}
.stappen>li{position:relative;padding:0 0 24px 54px;counter-increment:stap}
.stappen>li:last-child{padding-bottom:0}
.stappen>li::before{
  content:counter(stap);
  position:absolute;left:0;top:-2px;
  width:31px;height:35px;
  background:var(--surface-2);clip-path:var(--hex);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--data);font-size:.8rem;font-weight:700;color:var(--text);
}
.stappen>li:not(:last-child)::after{
  content:'';position:absolute;left:15px;top:40px;bottom:4px;width:1px;background:var(--line);
}
.stappen>li>strong{display:block;font-family:var(--kop);font-weight:600;font-size:1rem;color:var(--text);margin-bottom:5px}
.stappen>li>p{margin:0 0 .6em;font-size:.94rem}
.stappen>li>p:last-child{margin-bottom:0}

/* opsomming */
.punteni{margin:16px 0;padding-left:20px}
.punteni li{font-size:.95rem;color:var(--text-2);margin-bottom:8px}
.punteni li::marker{color:var(--text-3)}
.punteni strong{color:var(--text);font-weight:600}

/* aandachtsblok */
.notitie{
  display:flex;flex-direction:column;gap:5px;
  margin:24px 0;padding:15px 18px;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--blauw);border-radius:var(--r-s);
}
.notitie--tip{border-left-color:var(--goed)}
.notitie--let{border-left-color:var(--oranje)}
.notitie--pas{border-left-color:var(--niet)}
.notitie b{
  font-family:var(--data);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.notitie p{margin:0;font-size:.92rem}

/* tabel */
.tabelwrap{overflow-x:auto;margin:24px 0}
.tabel{width:100%;border-collapse:collapse;font-size:.91rem;min-width:420px}
.tabel th{
  text-align:left;font-family:var(--data);font-size:.66rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
  padding:0 16px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tabel td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line-soft);color:var(--text-2);vertical-align:top}
.tabel tr:last-child td{border-bottom:0}
.tabel td strong{color:var(--text);font-weight:600}

/* voorbeeldvraag voor de assistent */
.vraag{
  margin:10px 0;padding:13px 16px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-s);
  font-size:.93rem;color:var(--text);
  display:flex;gap:11px;align-items:flex-start;
}
.vraag::before{content:'\201C';font-family:var(--kop);font-size:1.5rem;line-height:.8;color:var(--oranje);flex:none}

/* ---------- responsief ---------- */

@media (max-width:960px){
  .werkblad{grid-template-columns:1fr;gap:28px;padding-top:34px}
  .rail{position:static}
  .rail-lijst{flex-direction:row;overflow-x:auto;overscroll-behavior-x:contain;
    padding-bottom:6px;gap:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .rail-knop{white-space:nowrap;border:1px solid var(--line)}
  .rail-later{display:none}
  .regelraster{grid-template-columns:repeat(2,1fr)}
  .ingangen--drie{grid-template-columns:repeat(2,1fr)}
  .proeven{grid-template-columns:1fr}
  .merkblad{grid-template-columns:1fr;gap:0}
  .gids{grid-template-columns:1fr;gap:0;padding-top:26px}
  .zijnav{display:none}
  .mobielnav{display:block;margin-bottom:34px}
  .tweeluik{grid-template-columns:1fr}
  .inhoud{display:none}
}

@media (max-width:720px){
  .omhulsel{padding:0 20px}
  .sectie{padding:60px 0}
  .hero{padding:64px 0 52px}
  .ingangen,.ingangen--drie,.logoraster,.regelraster,.maten,.voorwaarden{grid-template-columns:1fr}
  .kop-in{height:60px;gap:12px}
  .slot{gap:10px}
  .slot img{height:20px}
  .slot-lijn{height:20px}
  .slot-woord{font-size:.95rem}
  .nav{gap:0}
  .nav a{padding:8px 9px;font-size:.85rem}
  .nav a[data-extern]{display:none}
  /* korte naam op smalle schermen. Valt de css weg, dan blijft de
     volledige naam staan in plaats van twee namen achter elkaar. */
  .nav a[data-kort]{font-size:0}
  .nav a[data-kort]::after{content:attr(data-kort);font-size:.85rem}
  .knoop{padding-left:56px}
  .knoop-hex{width:33px;height:37px}
  .tijdlijn::before{left:16px}
  .punt{flex-direction:column;gap:9px}
  .merk{min-width:0}
  .filters{margin-left:0}
  .zoek{max-width:none}
  .mis--snij{padding-left:52px}
  .kap{padding-bottom:48px}
  .kap+.kap{padding-top:44px}
  .stappen>li{padding-left:46px}
  .laatste{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@media print{
  .kop,.nav,.rail,.inhoud{display:none}
  body{background:#fff;color:#000}
}