/* Kennisbank van vanessenonline.com (/kennis en /kennis/...).
   Eén stylesheet voor alle artikelen. Huisstijl: geel #FBFF4A als markeerstift, Norwester-titels,
   Barlow Condensed voor labels, Barlow voor lopende tekst, driehoek in de hoek van de footer.
   Het menu heeft zijn eigen menu.css. */
@font-face{font-family:"Norwester";src:url(/fonts/norwester.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/fonts/barlow-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#FAFAF7; --surface:#F1F0EA; --ink:#17160F; --muted:#5D5B50; --line:#E1DFD5;
  --marker:#FBFF4A; --on-marker:#17160F;
  --f-title:"Norwester","Barlow Condensed","Arial Narrow",sans-serif;
  --f-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,48px); --tekst:720px; --max:1180px;
  --tri-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 310 269'%3E%3Cpath fill='%2317160F' d='M0 269L155 0L193 66L77 269Z'/%3E%3Cpath fill='%23575354' d='M77 269L193 66L310 269Z'/%3E%3C/svg%3E");
  --tri-geel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 310 269'%3E%3Cpath fill='%23FBFF4A' d='M0 269L155 0L193 66L77 269Z'/%3E%3Cpath fill='%23575354' d='M77 269L193 66L310 269Z'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14130E; --surface:#1C1B15; --ink:#F1EFE4; --muted:#A5A293; --line:#2D2B23; --tri-ink:var(--tri-geel); color-scheme:dark}}
:root[data-theme="dark"]{--paper:#14130E; --surface:#1C1B15; --ink:#F1EFE4; --muted:#A5A293; --line:#2D2B23; --tri-ink:var(--tri-geel); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--marker);outline-offset:3px;border-radius:2px}
mark{background:var(--marker);color:var(--on-marker);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:12px;z-index:1000;background:var(--marker);color:var(--on-marker);padding:10px 14px;border-radius:4px;font-weight:500;text-decoration:none}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.lees{max-width:var(--tekst);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-family:var(--f-cond);font-weight:500;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}

/* Kruimelpad */
.kruimel{padding-top:clamp(28px,5vw,48px)}
.kruimel ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3em .5em;font-size:.9rem;color:var(--muted)}
.kruimel li+li::before{content:"/";margin-right:.5em;color:var(--line)}
.kruimel a{color:var(--muted)}

/* Kop van het artikel */
.kop{padding-block:clamp(20px,3vw,32px) clamp(28px,4vw,44px);display:grid;gap:18px}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--f-title);font-weight:400;font-size:clamp(2.3rem,6vw,4rem);line-height:.98;letter-spacing:.01em}
.kop .intro{font-size:1.22rem;line-height:1.5;margin:0;max-width:62ch}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:.9rem;color:var(--muted)}
.meta img{width:36px;height:36px;border-radius:50%;filter:grayscale(1)}
.meta b{color:var(--ink);font-weight:500}

/* Lopende tekst */
.tekst{padding-bottom:clamp(40px,6vw,72px);border-top:2px solid var(--ink)}
.tekst>*+*{margin-top:1.05em}
.tekst h2{font-family:var(--f-title);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.05;letter-spacing:.01em;margin-top:1.9em;scroll-margin-top:96px}
.tekst h3{font-family:var(--f-cond);font-weight:700;font-size:1.35rem;line-height:1.15;margin-top:1.6em}
.tekst p,.tekst li{max-width:66ch}
.tekst ul,.tekst ol{padding-left:1.25em}
.tekst li+li{margin-top:.45em}
.tekst li::marker{color:var(--muted)}
.tekst code{font:500 .92em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface);padding:.12em .35em;border-radius:3px}
.tekst pre{background:var(--surface);border-left:3px solid var(--ink);padding:16px 18px;overflow-x:auto;font:400 .9rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border-radius:0 3px 3px 0}
.tekst pre code{background:none;padding:0;font-size:inherit}

/* Inhoudsopgave */
.toc{margin-top:28px;padding:18px 20px;background:var(--surface);border-radius:4px}
.toc ol{margin:.6em 0 0;padding-left:1.2em;columns:2 260px;column-gap:32px}
.toc li{margin:0 0 .35em;break-inside:avoid}

/* Kaders */
.tip{border-left:4px solid var(--marker);background:color-mix(in srgb,var(--marker) 10%,var(--paper));padding:16px 20px;border-radius:0 4px 4px 0}
.tip p{margin:0}
.tip p+p{margin-top:.6em}
.tabel{overflow-x:auto;margin-top:1.4em}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.96rem}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
thead th{font-family:var(--f-cond);font-weight:700;font-size:1rem;letter-spacing:.02em;border-bottom:2px solid var(--ink)}
td code{white-space:nowrap}

/* Stappen met nummer */
.punten{list-style:none;padding:0!important;counter-reset:p}
.punten>li{counter-increment:p;position:relative;padding-left:56px;max-width:none}
.punten>li+li{margin-top:1.4em}
.punten>li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:-.05em;font:400 1.9rem/1 var(--f-title);color:var(--muted)}
.punten h3{margin-top:0}
.punten p{margin:.35em 0 0}

/* Oproep tot actie */
.cta{margin-top:2.4em;background:#121109;color:#F1EFE4;border-radius:4px;padding:clamp(22px,4vw,32px);display:grid;gap:14px;position:relative;overflow:hidden;isolation:isolate}
.cta::after{content:"";position:absolute;z-index:-1;right:-18px;bottom:0;width:110px;aspect-ratio:310/269;background:var(--tri-geel) no-repeat bottom/100% 100%;opacity:.9}
.cta h2{margin:0!important;color:#F1EFE4;font-size:clamp(1.5rem,3vw,2rem)}
.cta p{margin:0;color:#D6D3C6;max-width:52ch}
.knop{justify-self:start;display:inline-flex;align-items:center;gap:.5em;font:500 1rem/1 var(--f-body);text-decoration:none;padding:.9em 1.2em;background:var(--marker);color:var(--on-marker);border-radius:3px}
.knop:hover{background:#fff}
.knop span{transition:transform .2s}
.knop:hover span{transform:translateX(3px)}

/* Vragen */
.faq{border-top:2px solid var(--ink);margin-top:1.2em}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--f-title);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.6em 0 0}

/* Verder lezen en overzicht */
.kaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:1.2em}
.kaart{display:grid;gap:6px;padding:20px 22px;border:1.5px solid var(--line);border-radius:4px;text-decoration:none;background:var(--paper);transition:border-color .2s,background .2s}
.kaart b{font:700 1.3rem/1.15 var(--f-cond)}
.kaart span{color:var(--muted);font-size:.96rem}
.kaart:hover{border-color:var(--ink);background:var(--surface)}
.kaart.hl{border-color:var(--marker);background:color-mix(in srgb,var(--marker) 12%,var(--paper))}
@media (max-width:640px){.kaarten{grid-template-columns:1fr}}

.bijgewerkt{font-size:.88rem;color:var(--muted);margin-top:2em!important}

/* Footer */
footer{border-top:2px solid var(--ink);padding-block:28px 40px;position:relative;overflow:hidden;isolation:isolate}
footer::after{content:"";position:absolute;z-index:-1;right:-20px;bottom:0;width:92px;aspect-ratio:310/269;background:var(--tri-ink) no-repeat bottom/100% 100%;pointer-events:none}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;justify-content:space-between}
footer .links{display:flex;gap:8px 20px;flex-wrap:wrap}
footer a{color:var(--muted);text-decoration:none;font-size:.9rem}
footer a:hover{color:var(--ink)}
footer img{display:block;height:22px;width:auto}