/* Kratomwijzer — zwart-wit met één signaalkleur */
:root{
  --bg:#f3f3ef; --vlak:#ffffff; --inkt:#121212; --grijs:#5f5f5a; --lijn:#d7d7d0; --zacht:#e8e8e2;
  --accent:#d9481c; --accent-tekst:#b23a12;
  --grotesk:"Avenir Next","Avenir","Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo","Cascadia Mono","Consolas",monospace;
  --breed:74rem; --tekstbreed:42rem;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111110; --vlak:#1b1b19; --inkt:#ecece6; --grijs:#a3a39b; --lijn:#34342f; --zacht:#22221f;
  --accent:#ff6b3d; --accent-tekst:#ff8a63;}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--inkt);font:400 1.0625rem/1.62 var(--grotesk);overflow-wrap:break-word}
a{color:var(--inkt);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.2em}
a:hover{color:var(--accent-tekst)}
img{max-width:100%;height:auto;display:block}
.spring{position:absolute;left:-999px}.spring:focus{left:1rem;top:1rem;background:var(--inkt);color:var(--bg);padding:.5rem .8rem;z-index:9}
.label,.rubriek,.meta,.kruimel,.nr,.menu{font-family:var(--mono)}

/* kop */
.kop{background:var(--inkt);color:var(--bg)}
.kop-in{max-width:var(--breed);margin:0 auto;padding:.85rem 1rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--bg);text-decoration:none;font-size:1.3rem;letter-spacing:-.02em;font-weight:500}
.logo b{font-weight:800}
.menu{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.menu a{color:var(--bg);text-decoration:none;padding:.25rem 0;border-bottom:3px solid transparent}
.menu a:hover{color:var(--bg);border-color:var(--grijs)}
.menu a[aria-current]{border-color:var(--accent)}

main{max-width:var(--breed);margin:0 auto;padding:0 1rem 3rem}
.kruimel{font-size:.75rem;color:var(--grijs);padding:1.1rem 0 0;letter-spacing:.02em}
.kruimel a{color:var(--grijs)}

h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2rem,6vw,3.4rem);margin:.15em 0 .3em;max-width:22ch}
h2{font-size:clamp(1.35rem,3vw,1.7rem);margin:2.6rem 0 .7rem;padding-top:.9rem;border-top:3px solid var(--inkt)}
h3{font-size:1.12rem;margin:1.7rem 0 .4rem;font-weight:700}
.rubriek,.label{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-tekst);margin:1.6rem 0 0}
.lead{font-size:1.22rem;line-height:1.5;color:var(--grijs);margin:.2rem 0 .9rem;max-width:38ch}
.meta{font-size:.74rem;color:var(--grijs);letter-spacing:.02em}

/* artikel + inhoudsopgave */
.blad{display:block}
.artikel{max-width:var(--tekstbreed)}
@media (min-width:62rem){
  .blad.met-toc{display:grid;grid-template-columns:minmax(0,var(--tekstbreed)) 15rem;gap:4rem;align-items:start}
  .toc{position:sticky;top:1.2rem;margin-top:8rem}
}
.toc{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1rem;font-size:.86rem}
.toc .label{margin:0 0 .5rem}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t;margin:.35rem 0;display:flex;gap:.5rem}
.toc li::before{content:counter(t,decimal-leading-zero);font:.72rem/1.9 var(--mono);color:var(--grijs)}
.toc a{text-decoration:none}
@media (max-width:61.99rem){.toc{display:none}}

.tekst p,.tekst ul,.tekst ol{margin:0 0 1.05em}
.tekst li{margin:.3em 0}
.tekst blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:3px solid var(--accent);font-size:1.08rem}
.tekst code{font-family:var(--mono);font-size:.9em}

/* foto met signaalblok */
.foto{margin:1.6rem 0 2rem;position:relative}
.foto img{position:relative;z-index:1;width:100%;filter:grayscale(1)}
.foto::before{content:"";position:absolute;z-index:0;right:0;top:2.2rem;width:42%;height:55%;background:var(--accent)}
.foto figcaption{font:.75rem/1.4 var(--mono);color:var(--grijs);margin-top:.7rem}
.foto{padding:0 .6rem 0 0}

/* kaders */
.kort,.let{background:var(--vlak);border:2px solid var(--inkt);padding:.3rem 1.1rem .4rem;margin:1.6rem 0;box-shadow:6px 6px 0 var(--accent)}
.kort .label,.let .label{margin:.7rem 0 .3rem}
.kort ul{padding-left:1.1rem}
.let{box-shadow:6px 6px 0 var(--inkt);border-color:var(--accent)}

/* tabellen */
.tekst table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.2rem 0 1.6rem;display:block;overflow-x:auto}
.tekst th,.tekst td{text-align:left;vertical-align:top;padding:.55rem .6rem;border-bottom:1px solid var(--lijn)}
.tekst thead th{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em;border-bottom:3px solid var(--inkt);background:transparent}
.tekst tbody tr:nth-child(odd){background:var(--zacht)}

/* faq / bronnen / zie ook */
.faq .vraag{border-top:1px solid var(--lijn);padding:.2rem 0 .3rem}
.faq .vraag h3{margin-top:1rem}
.bronnen ol{font-size:.86rem;color:var(--grijs);padding-left:1.4rem}
.bronnen li{margin:.35rem 0}
.bronnen a{color:var(--grijs)}
.zie ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
@media (min-width:40rem){.zie ul{grid-template-columns:1fr 1fr}}
.zie a{display:block;height:100%;text-decoration:none;background:var(--vlak);border:1px solid var(--lijn);padding:.8rem .9rem;border-top:3px solid var(--inkt)}
.zie a:hover{border-top-color:var(--accent);color:var(--inkt)}
.zie span{display:block;font-weight:700;line-height:1.25}
.zie small{display:block;color:var(--grijs);font-size:.84rem;margin-top:.3rem;line-height:1.4}

/* sectie-overzicht */
.sectie-kop{max-width:var(--tekstbreed)}
.lijst{list-style:none;padding:0;margin:2rem 0 0;border-top:3px solid var(--inkt)}
.lijst a{display:grid;grid-template-columns:3rem 1fr;gap:.1rem 1rem;padding:1rem 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.lijst a:hover .t{color:var(--accent-tekst)}
.lijst .nr{grid-row:span 2;font-size:1.5rem;color:var(--accent-tekst);line-height:1.1}
.lijst .t{font-weight:800;font-size:1.15rem;line-height:1.25}
.lijst .d{color:var(--grijs);font-size:.95rem}
@media (min-width:52rem){.lijst a{grid-template-columns:4rem 22rem 1fr}.lijst .nr{grid-row:auto}}

/* voorpagina */
.held{display:grid;gap:1.5rem;padding:1.6rem 0 1rem;align-items:end}
@media (min-width:56rem){.held{grid-template-columns:1.1fr .9fr;gap:3rem}}
.held h1{max-width:16ch}
.held .foto{margin:0}
.wijzerplaat{display:grid;gap:0;margin:2rem 0;border-top:3px solid var(--inkt);border-left:1px solid var(--lijn)}
@media (min-width:36rem){.wijzerplaat{grid-template-columns:1fr 1fr}}
@media (min-width:60rem){.wijzerplaat{grid-template-columns:repeat(4,1fr)}}
.wijzerplaat a{display:block;padding:1rem;border-right:1px solid var(--lijn);border-bottom:1px solid var(--lijn);text-decoration:none;background:var(--vlak);min-height:8.5rem}
.wijzerplaat a:hover{background:var(--inkt);color:var(--bg)}
.wijzerplaat a:hover .d{color:var(--lijn)}
.wijzerplaat .nr{display:block;font-size:.72rem;color:var(--accent-tekst);letter-spacing:.1em}
.wijzerplaat .t{display:block;font-weight:800;font-size:1.08rem;line-height:1.25;margin:.3rem 0}
.wijzerplaat .d{display:block;font-size:.86rem;color:var(--grijs);line-height:1.4}
.twee{display:grid;gap:2rem}
@media (min-width:56rem){.twee{grid-template-columns:1fr 1fr;gap:3rem}}
.abc{display:flex;flex-wrap:wrap;gap:.3rem;margin:1rem 0;padding:0;list-style:none}
.abc a{display:inline-block;min-width:2.2rem;text-align:center;font:700 .95rem/2.2rem var(--mono);border:1px solid var(--inkt);text-decoration:none;background:var(--vlak)}
.abc a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* begrippenlijst */
.begrip{border-top:1px solid var(--lijn);padding:.3rem 0 .4rem}
.begrip h3{display:flex;gap:.6rem;align-items:baseline}
.letter{font:800 2.4rem/1 var(--grotesk);color:var(--accent);margin:2.4rem 0 .4rem;border-top:3px solid var(--inkt);padding-top:.6rem}

/* winkels */
.winkel{background:var(--vlak);border:2px solid var(--inkt);padding:.3rem 1.2rem 1rem;margin:1.6rem 0}
.winkel h3{font-size:1.4rem}
.knop{display:inline-block;background:var(--inkt);color:var(--bg);padding:.6rem 1rem;text-decoration:none;font:600 .85rem var(--mono);letter-spacing:.04em}
.knop:hover{background:var(--accent);color:#fff}
.klein{font-size:.8rem;color:var(--grijs)}

/* voet */
.voet{border-top:3px solid var(--inkt);background:var(--vlak)}
.voet-in{max-width:var(--breed);margin:0 auto;padding:1.6rem 1rem 2.4rem;display:grid;gap:1.4rem;font-size:.9rem;color:var(--grijs)}
@media (min-width:48rem){.voet-in{grid-template-columns:2fr 1fr}}
.voet-merk{font-size:1.15rem;color:var(--inkt);margin:0 0 .4rem}
.voet nav{display:flex;flex-direction:column;gap:.35rem}