/* ---- zelfgehoste fonts (IBM Plex, OFL-licentie; geen Google-verzoeken) ---- */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700;
  font-display: swap; src: url(fonts/IBMPlexSans-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400;
  font-display: swap; src: url(fonts/IBMPlexSans-400i.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(fonts/IBMPlexMono-400.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(fonts/IBMPlexMono-600.woff2) format("woff2");
}

:root {
  --vlak: #F2F4F7;
  --inkt: #1B2430;
  --inkt-licht: #2A3647;
  --accent: #C73E1D;
  --lijn: #DBE0E6;
  --wit: #FFFFFF;
  --grijs: #4A5460;
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--vlak);
  color: var(--inkt);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  font-size: 17px;
}
code, pre, .meta, .typelabel, .typeicoon, .filters button, .tagline, .taalwissel, .statband span
  { font-family: "IBM Plex Mono", "Menlo", monospace; }
main { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem 4rem; }
a { color: var(--accent); }
h1, h2, h3, h4 { line-height: 1.25; }

/* ---- header ---- */
header.site {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(135deg, var(--inkt) 0%, var(--inkt-licht) 100%);
  border-bottom: 4px solid var(--accent);
  padding: 2.4rem 1.25rem 2rem;
}
header.site .binnen {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: .7rem 1.2rem; flex-wrap: wrap;
}
header.site .sitenaam { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
header.site .sitenaam .blok { width: .62em; height: .62em; background: var(--accent); flex: none; }
header.site .sitenaam a { color: var(--wit); text-decoration: none; }
header.site .tagline { margin: .55rem 0 0 1.55rem; font-size: .82rem; letter-spacing: .04em; color: #AEB7C2; }
.taalwissel {
  flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: .8rem; font-weight: 600;
  color: #8E99A6; text-decoration: none;
  letter-spacing: .12em;
  padding: .15rem 0;
  border-bottom: 2px solid transparent;
}
.taalwissel:hover { color: var(--wit); border-bottom-color: var(--accent); }
.taalkiezer { display: inline-flex; align-items: center; gap: .45rem; font-family: "IBM Plex Mono", monospace; font-size: .8rem; font-weight: 600; letter-spacing: .12em; }
.taalkiezer .globe { font-size: .95rem; line-height: 1; opacity: .85; }
.taalkiezer .taal-nu { color: var(--wit); }
.taalkiezer .taal-sep { color: #5B6677; }
.taalkiezer .taalwissel { padding: 0; }
.headeracties { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
.kop-zoek { margin: 0; position: relative; }
.kop-zoek input { padding: .35rem .6rem; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: .85rem; width: 9rem; }
.kop-zoek input::placeholder { color: #AEB7C2; }
.kop-zoek input:focus { outline: 2px solid var(--accent); background: var(--wit); color: var(--inkt); }
@media (max-width: 760px) { .kop-zoek input { width: 7rem; } }
.kop-zoek-sug { position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; margin: 0; padding: .25rem 0; list-style: none; background: var(--wit); color: var(--inkt); border: 1px solid #d4dae1; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.22); min-width: 17rem; max-width: 24rem; max-height: 64vh; overflow-y: auto; text-align: left; }
.kop-zoek-sug li { margin: 0; }
.kop-zoek-sug a { display: block; padding: .4rem .7rem; color: var(--inkt); text-decoration: none; font-size: .85rem; line-height: 1.35; }
.kop-zoek-sug li.actief a, .kop-zoek-sug a:hover { background: var(--vlak); }
@media (max-width: 760px) { .kop-zoek-sug { min-width: 14rem; max-width: 80vw; } }
.rap-recs { margin: 1.4rem 0; padding: 1rem 1.2rem; background: var(--vlak); border-radius: 10px; }
.rap-recs h3 { margin: 0 0 .5rem; font-size: 1rem; }
.rap-recs ul { margin: 0; padding-left: 1.1rem; }
.rap-recs li { margin: .3rem 0; }
.rap-recs a { color: var(--inkt); }
.kruimels { font-size: .82rem; color: var(--grijs); margin: 0 0 1.1rem; font-family: "IBM Plex Mono", monospace; }
.kruimels a { color: var(--accent); text-decoration: none; }
.kruimels a:hover { text-decoration: underline; }
.kruimels span { color: var(--inkt-licht); }


/* ---- fotohero (alleen index) ---- */
.hero {
  position: relative; overflow: hidden;
  width: 100vw; margin: 0 0 .6rem calc(50% - 50vw);
  padding: 3.8rem max(1.25rem, calc(50vw - 400px)) 3rem;
  background-color: #161E29;
  border-bottom: 3px solid var(--accent);
  color: var(--wit);
}
.hero > *:not(.hero-glow) { position: relative; z-index: 1; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(36px); pointer-events: none; z-index: 0; }
.hero-glow.g1 { width: 560px; height: 380px; top: -130px; right: -60px; background: radial-gradient(circle, rgba(199,62,29,.85), rgba(232,130,106,.22) 45%, transparent 70%); animation: heroDrift 9s ease-in-out infinite alternate; }
.hero-glow.g2 { width: 360px; height: 300px; bottom: -150px; left: -40px; background: radial-gradient(circle, rgba(232,150,90,.4), transparent 70%); animation: heroDrift2 11s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(-70px,50px) scale(1.22); } }
@keyframes heroDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(50px,-30px) scale(1.18); } }
.hero-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .12em; color: #F0A78F; margin: 0 0 1.1rem; }
.hero-up { opacity: 0; animation: heroUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes heroUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } .hero-up { animation: none; opacity: 1; } }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.4rem); margin: 0 0 .7rem; max-width: 19ch; line-height: 1.05; letter-spacing: -.02em; color: var(--wit); }
.hero h1 em { font-style: normal; color: #FF6A3D; }
.hero p { color: #cdd5df; max-width: 56ch; margin: 0; font-size: 1.05rem; }
.hero .statusbord h3 { color: #9aa3ae; }

/* ---- entry-banner in duotoon ---- */
.entry-beeld {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  height: 230px; overflow: hidden;
  border-bottom: 3px solid var(--accent);
}
.entry-beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(.97) contrast(1.05) sepia(.25) hue-rotate(178deg) saturate(1.3);
}
.entry-beeld::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(27,36,48,.28), rgba(27,36,48,.45));
}
.statband { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; }
.statband span {
  font-size: .74rem; letter-spacing: .04em;
  background: var(--wit); border: 1px solid var(--lijn);
  padding: .25rem .6rem; border-radius: 2px; color: var(--grijs);
}
.statband span strong { color: var(--inkt); font-weight: 600; }

/* ---- waarom-blok ---- */
.waarom { padding: 2rem 0 1.4rem; margin: 0; border-top: 1px solid var(--lijn); }
.waarom h2 { margin: 0 0 .75rem; font-size: 1.3rem; color: var(--inkt); }
.waarom p { margin: 0; font-size: .97rem; color: var(--grijs); max-width: 72ch; line-height: 1.65; }

/* ---- zoeken en filters ---- */
.zoekbalk { margin: 1.8rem 0 1rem; position: relative; }
.zoekbalk input {
  width: 100%;
  padding: .8rem 1rem .8rem 2.6rem;
  font-size: 1rem;
  border: 1px solid var(--lijn);
  border-radius: 3px;
  background: var(--wit);
  font-family: inherit;
}
.zoekbalk input:focus { outline: 2px solid var(--inkt); border-color: var(--inkt); }
.zoekbalk::before {
  content: "";
  position: absolute; left: .95rem; top: 50%;
  width: .8rem; height: .8rem; margin-top: -.55rem;
  border: 2px solid var(--grijs); border-radius: 50%;
}
.zoekbalk::after {
  content: "";
  position: absolute; left: 1.78rem; top: 50%; margin-top: .28rem;
  width: .42rem; height: 2px; background: var(--grijs);
  transform: rotate(45deg);
}
.filters { margin-bottom: 1.8rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button {
  font-size: .78rem;
  padding: .35rem .8rem;
  border: 1px solid var(--inkt);
  background: var(--wit);
  color: var(--inkt);
  border-radius: 2px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.filters button:hover { background: var(--vlak); }
.filters button.actief { background: var(--inkt); color: var(--wit); }
.telling { margin-left: auto; align-self: center;
  font-family: "IBM Plex Mono", monospace; font-size: .74rem; color: var(--grijs); }

/* ---- themakaart (Onderwerpen-overzicht) ---- */
.themakaart-wrap { margin: 1.6rem 0 .4rem; }
.themakaart-kop { font-family: "IBM Plex Mono", monospace; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); margin: 0 0 .6rem; }
.themakaart { display: flex; flex-wrap: wrap; gap: .5rem; }
.thema-chip { font-size: .82rem; padding: .4rem .7rem; text-decoration: none;
  display: inline-flex; align-items: center;
  border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt);
  border-radius: 2px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.themakaart-home { margin: 2.4rem 0; background: var(--wit); border: 1px solid var(--lijn);
  border-left: 4px solid var(--accent); border-radius: 10px; padding: 1.4rem 1.6rem; }
.themakaart-home h2 { margin-top: 0; }
.thema-chip:hover { background: var(--vlak); border-color: var(--inkt); }
.thema-chip.actief { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.thema-chip .n { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--grijs); margin-left: .35rem; }
.thema-chip.actief .n { color: var(--wit); }
.kopnav { font-weight: 600; }
.aanb-thema { margin: 1.6rem 0; }
.aanb-lijst { list-style: none; padding: 0; margin: .6rem 0 0; }
.aanb-lijst li { padding: .45rem 0; border-bottom: 1px solid var(--lijn); }
.aanb-sub { font-family: "IBM Plex Mono", monospace; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--grijs); margin: 1.2rem 0 .2rem; }
.themakaart-aanb { margin: 1rem 0 0; font-weight: 600; }
/* ---- intentie-band (Wat kun je hier?) ---- */
.intenties { position: relative; overflow: hidden; background: #161E29; margin: 2.6rem 0; padding: 2.4rem 1.7rem; border-radius: 20px; }
.intenties::before { content: ""; position: absolute; width: 460px; height: 460px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(255,106,61,.30), transparent 65%); pointer-events: none; }
.intenties > h2 { color: var(--wit); margin: 0 0 1.4rem; font-size: 1.6rem; position: relative; }
.intent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .85rem; position: relative; }
.intent-kaart { display: block; text-decoration: none; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 1.15rem 1.2rem; transition: background .15s, transform .15s, box-shadow .15s; }
.intent-kaart:hover { background: rgba(255,255,255,.10); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.35); }
.intent-kaart .kicker { font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: #FF6A3D; }
.intent-kaart h3 { color: var(--wit); margin: .35rem 0 .4rem; font-size: 1.18rem; line-height: 1.2; }
.intent-kaart p { color: #AEB7C2; margin: 0; font-size: .9rem; line-height: 1.45; }
/* ---- split-hero + monitor-visual ---- */
.hero { padding: 3.6rem max(1.5rem, calc(50vw - 550px)) 2.6rem; }
.hero-split { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 880px) { .hero-split { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }
.hero-visual { min-width: 0; }
.monitor { background: #1F2A39; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.42); }
.monitor-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.monitor-bar .dot { width: .58rem; height: .58rem; border-radius: 50%; background: rgba(255,255,255,.2); }
.monitor-bar .mtitle { margin-left: .5rem; font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: #9AA3AE; letter-spacing: .08em; }
.monitor-body { padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .65rem; }
.mrow { display: flex; justify-content: space-between; align-items: center; gap: .7rem; font-size: .94rem; color: #DDE2E8; }
.mbadge { font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .04em; padding: .2rem .5rem; border-radius: 6px; white-space: nowrap; }
.mbadge.hoog { background: rgba(199,62,29,.24); color: #FF8A66; }
.mbadge.mid { background: rgba(232,150,90,.18); color: #F0A78F; }
.mbadge.ok { background: rgba(93,202,165,.16); color: #7FD8BC; }
.malert { margin-top: .35rem; padding: .65rem .8rem; border-radius: 10px; background: rgba(199,62,29,.14); border: 1px solid rgba(199,62,29,.32); font-size: .86rem; color: #FFD2C4; }
.malert strong { color: #FF8A66; }
.mbadge { transition: background .3s, color .3s; }
.mbadge.mflip { background: rgba(232,150,90,.30) !important; color: #FFB07A !important; }
.malert { transition: box-shadow .3s, border-color .3s; }
.malert.mhot { box-shadow: 0 0 0 1px rgba(199,62,29,.55); border-color: rgba(199,62,29,.55); }
.monitor-live { width: .5rem; height: .5rem; border-radius: 50%; background: #5DCAA5; margin-left: auto; }
@keyframes mPulse { 0%,100% { opacity: .4; box-shadow: 0 0 0 0 rgba(93,202,165,.5); } 50% { opacity: 1; box-shadow: 0 0 0 5px rgba(93,202,165,0); } }
@keyframes mAlertIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mRow { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .monitor-live { animation: mPulse 1.9s ease-in-out infinite; }
  .malert { animation: mAlertIn .7s cubic-bezier(.2,.7,.2,1) 1.1s both; }
  .monitor-body .mrow { animation: mRow .5s ease-out both; }
  .monitor-body .mrow:nth-child(1) { animation-delay: .15s; }
  .monitor-body .mrow:nth-child(2) { animation-delay: .35s; }
  .monitor-body .mrow:nth-child(3) { animation-delay: .55s; }
}
.deadlineband { margin: 0 0 .2rem; }
/* monitor scan-sweep (alsof 'ie de wetgeving aftast) */
.monitor { position: relative; }
.monitor::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,106,61,.9), transparent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .monitor::after { animation: scan 3.6s cubic-bezier(.4,0,.2,1) infinite; } }
@keyframes scan { 0% { transform: translateY(42px); opacity: 0; } 12% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translateY(258px); opacity: 0; } }
/* scroll-reveal (secties faden op terwijl je scrolt) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
/* bento-grid voor de intentie-blokken */
@media (min-width: 780px) { .intent-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } .intent-kaart:first-child { grid-column: span 2; } }
/* deadlines als horizontale tijdlijn */
.deadlineband .tegels { position: relative; margin-top: 1.5rem; }
.deadlineband .tegels::before { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; top: -.8rem; height: 2px; background: linear-gradient(90deg, var(--accent), rgba(199,62,29,.22)); border-radius: 2px; }
.deadlineband .tegel { position: relative; overflow: visible; border-top: 1px solid var(--lijn); }
.deadlineband .tegel::before { content: ""; position: absolute; top: -1.18rem; left: 1.05rem; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--vlak); }
@media (prefers-reduced-motion: no-preference) { .deadlineband .tegel.aftellen::before { animation: tlPulse 2.1s ease-in-out infinite; } }
@keyframes tlPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(199,62,29,.55); } 50% { box-shadow: 0 0 0 6px rgba(199,62,29,0); } }
/* monitor-productpagina: demo-band */
.demo-blok { width: 100vw; margin: 2.2rem 0 0 calc(50% - 50vw); padding: 3rem max(1.25rem, calc(50vw - 540px)); background: #161E29; color: var(--wit); display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 860px) { .demo-blok { grid-template-columns: .92fr 1.08fr; } }
.demo-tekst h2 { color: var(--wit); margin-top: 0; }
.demo-tekst > p { color: #AEB7C2; }
.mstappen { list-style: none; padding: 0; margin: 1.3rem 0; display: flex; flex-direction: column; gap: .9rem; }
.mstappen li { display: flex; gap: .8rem; align-items: flex-start; }
.mstap-n { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--wit); font-family: "IBM Plex Mono", monospace; font-size: .82rem; display: flex; align-items: center; justify-content: center; }
.mstappen strong { color: var(--wit); }
.mstappen p { color: #AEB7C2; margin: .15rem 0 0; font-size: .92rem; }

/* ---- entrykaarten ---- */
.kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 14px;
  padding: 1.25rem 1.45rem 1.25rem 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 1.05rem;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.kaart:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27,36,48,.10);
  border-color: var(--inkt);
}
.typeicoon {
  flex: none;
  width: 2.45rem; height: 2.45rem;
  background: var(--inkt);
  color: var(--wit);
  font-size: 1.05rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid var(--accent);
}
.kaart .kop { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.kaart .thumb {
  flex: none; width: 96px; height: 96px; object-fit: cover;
  margin-left: auto; align-self: center;
  filter: grayscale(1) contrast(1.02);
  transition: filter .18s;
  border: 1px solid var(--lijn);
}
.kaart:hover .thumb { filter: grayscale(0); }
@media (max-width: 600px) { .kaart .thumb { display: none; } }
.kaart h2 { margin: .35rem 0 .35rem; font-size: 1.18rem; }
.kaart h2 a { color: var(--inkt); text-decoration: none; }
.kaart h2 a:hover { color: var(--accent); }
.kaart p { margin: 0; font-size: .95rem; color: var(--grijs); }

/* ---- labels en meta ---- */
.typelabel {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .1rem .45rem;
  border-radius: 2px;
}
.meta { font-size: .78rem; color: var(--grijs); letter-spacing: .02em; }
.byline-li svg { width: .85rem; height: .85rem; fill: var(--grijs); vertical-align: -.15em; }
.byline-li:hover svg { fill: var(--accent); }

/* ---- entrypagina ---- */
.terug { margin: 2rem 0 0; font-size: .85rem; }
.terug a { text-decoration: none; }
article h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1.12; letter-spacing: -.012em;
  margin: .9rem 0 .6rem;
  padding-top: .9rem;
  border-top: 4px solid var(--inkt);
  max-width: 30ch;
}
article .meta { margin-bottom: 2.2rem; }
article h2 { font-size: 1.25rem; margin-top: 2.4rem; padding-left: .75rem; border-left: 4px solid var(--accent); }
blockquote {
  border-left: 4px solid var(--accent);
  margin: 1.5rem 0;
  padding: .25rem 1.25rem;
  background: var(--wit);
}
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  background: var(--wit);
  font-size: .92rem;
  box-shadow: 0 2px 8px rgba(27,36,48,.06);
}
th, td { border: 1px solid var(--lijn); padding: .6rem .75rem; text-align: left; vertical-align: top; }
th { background: var(--inkt); color: var(--wit); font-weight: 600; letter-spacing: .02em; }
tbody tr:nth-child(even) { background: #F7F8FA; }
pre { background: var(--wit); border: 1px solid var(--lijn); padding: 1rem; overflow-x: auto; font-size: .85rem; }

.bronnen {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--inkt);
  border-radius: 3px;
  padding: 1.35rem 1.6rem;
  margin-top: 3rem;
}
.bronnen h2 { margin: 0 0 .9rem; font-size: 1.02rem; border: 0; padding: 0; }
.bronnen ol { padding-left: 1.2rem; margin-bottom: 0; }
.bronnen li { margin-bottom: .65rem; font-size: .9rem; word-break: break-word; }
.bronnen .annotatie { color: var(--grijs); }

/* ---- contextuele CTA na het artikel ---- */
.na-cta {
  margin: 2.2rem 0 0; padding: 1.1rem 1.3rem;
  background: #f6f7f9; border: 1px solid var(--lijn);
  border-left: 4px solid var(--accent); border-radius: 8px;
}
.na-cta strong { display: block; font-size: 1.02rem; }
.na-cta p { margin: .35rem 0 0; font-size: .92rem; color: var(--grijs); }
.na-cta-acties { margin-top: .8rem !important; }
.na-cta-acties .knop { font-size: .88rem; }

/* ---- briefing-aanmelding ---- */
.briefing {
  background: var(--wit); border-top: 4px solid var(--accent);
  margin-top: 4rem; padding: 2rem 1.25rem;
}
.briefing .binnen { max-width: 640px; margin: 0 auto; }
.briefing h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.briefing p { margin: 0 0 .9rem; font-size: .92rem; color: var(--grijs); }
.briefing form { display: flex; flex-wrap: wrap; gap: .6rem; }
.briefing input[type="email"] {
  flex: 1 1 100%; padding: .7rem .95rem; font-size: .98rem;
  border: 1px solid var(--lijn); border-radius: 3px; font-family: inherit;
}
.briefing input[type="email"]:focus { outline: 2px solid var(--inkt); }
.briefing .honing { display: none; }
.briefing-privacy { flex-basis: 100%; font-size: .74rem !important; }
/* gedeeld: optioneel 'vraag of opmerking'-veld op alle e-mailformulieren */
.epost-vraag {
  flex-basis: 100%; width: 100%; box-sizing: border-box; min-height: 60px;
  padding: .7rem .95rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--lijn); border-radius: 3px; resize: vertical;
}
.epost-vraag:focus { outline: 2px solid var(--inkt); }

/* ---- footer / colofon ---- */
footer.site {
  background: var(--inkt);
  color: #AEB7C2;
  margin-top: 4rem;
  padding: 2.2rem 1.25rem 2.6rem;
  font-size: .85rem;
  border-top: 4px solid var(--accent);
}
footer.site .binnen { max-width: 1100px; margin: 0 auto; }
footer.site strong { color: var(--wit); }
footer.site a { color: var(--wit); }
footer.site .auteur {
  display: flex; align-items: center; gap: .5rem;
  margin: .9rem 0 0;
}
footer.site .auteur svg { width: 1.05rem; height: 1.05rem; flex: none; fill: var(--wit); }
footer.site .disclaimer { margin: 1.1rem 0 0; font-size: .78rem; color: #7E8896; }
.geen-resultaat { color: var(--grijs); font-style: italic; }

/* ---- statusbord ---- */
.statusbord { margin: 1.6rem 0 0; }
.statusbord h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--grijs); margin: 0 0 .6rem; font-weight: 600;
}
.tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.tegel {
  display: block; text-decoration: none; color: var(--inkt);
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px;
  padding: .95rem 1.05rem; border-top: 3px solid var(--inkt);
  transition: border-color .12s, box-shadow .12s;
}
.tegel:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(27,36,48,.08); }
.tegel .kop {
  display: block;
  font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--grijs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tegel .groot {
  display: block;
  font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; font-weight: 600;
  margin: .15rem 0; color: var(--inkt); line-height: 1.1;
}
.tegel.aftellen .groot { color: var(--accent); }
.tegel .sub { display: block; font-size: .74rem; color: var(--grijs); line-height: 1.45; }

/* ---- hero-acties ---- */
.hero-acties { display: flex; gap: .7rem; margin-top: 1.4rem; flex-wrap: wrap; }
.knop {
  display: inline-block; text-decoration: none;
  font-family: "IBM Plex Mono", monospace; font-size: .85rem; font-weight: 600;
  padding: .62rem 1.2rem; border-radius: 10px;
  background: var(--accent); color: var(--wit); border: 1px solid var(--accent);
  transition: background .14s, border-color .14s, transform .12s, box-shadow .12s;
}
.knop:hover { background: #A93217; border-color: #A93217; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(27,36,48,.16); }
.knop.rustig { background: transparent; color: var(--inkt); border-color: var(--lijn); }
.knop.rustig:hover { background: #eef1f4; border-color: var(--inkt); }
.knop:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(199,62,29,.32); }
.hero .knop.rustig { color: var(--wit); border-color: rgba(255,255,255,.5); }
.hero .knop.rustig:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.hero .tegel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.28); color: var(--wit); }
.hero .tegel .groot { color: var(--wit); }
.hero .tegel .kop, .hero .tegel .sub { color: #9aa3ae; }
.hero .tegel.aftellen .groot { color: #FF6A3D; }
.hero .tegel:hover { border-color: var(--accent); box-shadow: none; transform: translateY(-2px); }
.versheid-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; justify-content: space-between; margin: 1rem 0 0; padding: .6rem .95rem; border: 1px solid var(--lijn); border-radius: 8px; background: #f6f8fa; font-size: .92rem; color: var(--grijs); }
.versheid-strip a { white-space: nowrap; font-weight: 600; color: var(--accent); text-decoration: none; }
.versheid-strip a:hover { text-decoration: underline; }
.versheid-strip .vers-pulse { color: var(--accent); font-size: .8em; vertical-align: middle; }
.knop.rustig:hover { background: var(--inkt); color: var(--wit); }
.print-knop { display: inline-block; background: none; border: 1px solid var(--lijn); color: var(--inkt); font: inherit; font-size: .82rem; padding: .4rem .8rem; border-radius: 2px; cursor: pointer; }
.print-knop:hover { background: var(--vlak); }
.cheatsheet-link { margin: .2rem 0 1.1rem; }

/* ---- handhavingstracker ---- */
.hh-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.2rem; }
.hh-f { font: inherit; font-size: .82rem; padding: .3rem .85rem; border: 1px solid var(--lijn); background: var(--wit); border-radius: 999px; cursor: pointer; }
.hh-f.actief { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.hh-wrap { overflow-x: auto; }
#hh-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
#hh-tab th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); border-bottom: 2px solid var(--lijn); padding: .5rem .6rem; white-space: nowrap; }
#hh-tab td { border-bottom: 1px solid var(--lijn); padding: .7rem .6rem; vertical-align: top; }
.hh-d { white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: .82rem; color: var(--grijs); }
.hh-sam { display: block; color: var(--grijs); font-size: .82rem; margin-top: .25rem; max-width: 48ch; }
.hh-land { display: block; color: var(--grijs); font-size: .78rem; }
.hh-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--lijn); white-space: nowrap; }
.hh-avg { background: #e7eef6; border-color: #bcd0e6; color: #2a3a4d; }
.hh-ai-act { background: #f6dcd4; border-color: #e0a392; color: #7a2412; }
.hh-evrm { background: #e2ece0; border-color: #b9d3b4; color: #2f5a2c; }

/* ---- 'Zo werkt het'-rondleiding ---- */
.tour-overlay { position: fixed; inset: 0; background: rgba(27,36,48,.62); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; }
.tour-overlay[hidden] { display: none !important; }
.tour-kaart { background: var(--wit); border-radius: 12px; max-width: 460px; width: 100%; padding: 1.9rem 1.9rem 1.1rem; position: relative; box-shadow: 0 14px 44px rgba(27,36,48,.32); }
.tour-x { position: absolute; top: .5rem; right: .7rem; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--grijs); cursor: pointer; padding: .2rem .5rem; }
.tour-x:hover { color: var(--inkt); }
.tour-stap h2 { font-size: 1.2rem; margin: 0 0 .6rem; border: 0; padding: 0; }
.tour-stap p { margin: 0 0 1rem; color: var(--inkt); }
.tour-stap .tour-go { margin-bottom: 0; }
.tour-voet { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; border-top: 1px solid var(--lijn); padding-top: .9rem; }
.tour-tel { font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: var(--grijs); }
.tour-nav { display: flex; gap: .5rem; }

/* ---- persoonlijk homepage-dashboard (terugkerende bezoeker) ---- */
.home-dash { background: var(--inkt); color: var(--wit); border-radius: 12px; padding: 1.4rem 1.6rem; margin: 1.5rem 0; }
.home-dash[hidden] { display: none; }
.home-dash-kop { margin: 0 0 .25rem; font-size: 1.25rem; border: 0; padding: 0; color: var(--wit); }
.home-dash-regels { margin: 0 0 .9rem; color: rgba(255,255,255,.85); font-size: .95rem; }
.home-dash-lijst { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .35rem .9rem; }
.home-dash-lijst li { font-size: .9rem; }
.home-dash-lijst a { color: var(--wit); }
.home-dash .hd-dl { color: rgba(255,255,255,.6); font-size: .82rem; }
.home-dash .knop { background: var(--accent); border-color: var(--accent); color: var(--wit); }

/* ---- live 'Vraag de analist'-box ---- */
.va-live { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 1.3rem 1.5rem; margin: 0 0 1.8rem; }
.va-live h2 { font-size: 1.12rem; margin: 0 0 .7rem; border: 0; padding: 0; }
.va-live textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--lijn); border-radius: 8px; font: inherit; resize: vertical; }
.va-live form { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.va-live .knop { align-self: flex-start; }
#va-out { margin: 1rem 0 0; }
#va-out .va-answer { white-space: pre-wrap; margin: 0 0 .5rem; }
#va-out .va-sources { font-size: .85rem; color: var(--grijs); margin: 0; }
.va-disc { font-size: .8rem; color: var(--grijs); margin: .8rem 0 0; }

/* ---- agenda-reminder-CTA ---- */
.agenda-cta { background: var(--vlak); border: 1px solid var(--lijn); border-left: 4px solid var(--accent); border-radius: 8px; padding: 1rem 1.2rem; margin: 1.4rem 0; }
.agenda-cta strong { display: block; margin-bottom: .25rem; }
.agenda-cta p { margin: .2rem 0 .7rem; font-size: .92rem; color: var(--inkt); }

/* ---- cijferband (homepage-autoriteit, dark card) ---- */
.cijferband-wrap { position: relative; overflow: hidden; background: #0F1621; border-radius: 20px; margin: 2.4rem 0; padding: 2.4rem 1.8rem; }
.cijferband-wrap::before { content: ""; position: absolute; width: 500px; height: 500px; right: -140px; top: -200px; background: radial-gradient(circle, rgba(93,202,165,.18), transparent 60%); pointer-events: none; }
.cijferband-wrap .band-kop { font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #5DCAA5; margin: 0 0 1.6rem; position: relative; }
.cijferband { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.2rem; position: relative; }
.cijferband .cijfer { text-align: left; padding: 0 0 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.cijferband .groot { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: 2.6rem; color: var(--accent); line-height: 1; letter-spacing: -.02em; }
.cijferband .label { display: block; font-size: .82rem; color: #7E8B9A; margin-top: .5rem; line-height: 1.4; }

/* ---- print: elk artikel als schone one-pager ---- */
@media print {
  header, footer, .kruimels, .na-cta, .auteur-box, .deel, .lees-ook, .tl-signup,
  .taalwissel, .kop-zoek, nav, .briefing, .print-knop, .cheatsheet-link { display: none !important; }
  body { color: #000; background: #fff; }
  article { max-width: 100%; margin: 0; }
  a { color: #000; text-decoration: none; }
  .inhoud { font-size: 11pt; }
  .bronnen a[href]::after { content: " (" attr(href) ")"; font-size: .72em; word-break: break-all; color: #444; }
  @page { margin: 1.6cm; }
}

/* ---- zelfcheck ---- */
.zelfcheck-vraag {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px;
  padding: 1.1rem 1.3rem; margin-bottom: .9rem;
}
.zelfcheck-vraag h2 { font-size: 1.02rem; margin: 0 0 .7rem; border: 0; padding: 0; }
.zelfcheck-vraag label {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .3rem 0; cursor: pointer; font-size: .95rem;
}
.zelfcheck-uitkomst { margin-top: 2rem; }
.diensten-verwijzing { margin-top: 1.4rem; font-size: .88rem; color: var(--inkt-licht); }
/* ---- AI Act-readiness scan ---- */
.scan-disclaimer { font-size: .85rem; color: var(--inkt-licht); border-left: 3px solid var(--lijn); padding-left: .8rem; }
.scan-stamp { font-size: .78rem; color: var(--grijs); font-family: "IBM Plex Mono", monospace; margin: .3rem 0 0; }
.rap-stamp { font-size: .76rem; color: var(--grijs); font-family: "IBM Plex Mono", monospace; margin: .1rem 0 1rem; }
.scan-beheer { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; }
.scan-hersteld { font-size: .82rem; color: #2f5a2c; }
#scan-app { margin-top: 1.5rem; }
.scan-toevoegen { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.scan-toevoegen input { flex: 1; min-width: 12rem; padding: .55rem .7rem; border: 1px solid var(--lijn); border-radius: 6px; font: inherit; }
.scan-sys { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--lijn); border-radius: 8px; margin-bottom: .6rem; flex-wrap: wrap; }
.scan-badges { margin-top: .3rem; }
.scan-niet { color: var(--inkt-licht); font-size: .85rem; }
.scan-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; margin: .1rem .15rem .1rem 0; background: var(--vlak); border: 1px solid var(--lijn); }
.scan-badge.ernst-kritiek { background: #C73E1D; color: #fff; border-color: #C73E1D; }
.scan-badge.ernst-hoog { background: #f6dcd4; border-color: #e0a392; color: #7a2412; }
.scan-badge.ernst-midden { background: #fbeecf; border-color: #e8cf95; color: #6b5212; }
.scan-badge.ernst-laag { background: #e2ece0; border-color: #b9d3b4; color: #2f5a2c; }
.scan-score { font-weight: 700; font-family: var(--mono, monospace); }
.knop.klein { padding: .3rem .7rem; font-size: .82rem; }
.scan-form { border: 1px solid var(--lijn); border-radius: 10px; padding: 1.1rem 1.2rem; margin: 1rem 0; background: var(--vlak); }
.scan-vraag { margin-bottom: 1rem; }
.scan-vraag > label, .scan-vraag-kop { display: block; font-weight: 600; margin-bottom: .4rem; }
.scan-vraag select { padding: .5rem; border: 1px solid var(--lijn); border-radius: 6px; font: inherit; max-width: 100%; }
.scan-check { display: block; font-weight: 400; margin: .25rem 0; }
.scan-form h4 { margin: 1rem 0 .4rem; padding-left: .5rem; border-left: 4px solid var(--lijn); }
.scan-form h4.ernst-kritiek { border-color: #C73E1D; }
.scan-form h4.ernst-hoog { border-color: #e0a392; }
.scan-form h4.ernst-midden { border-color: #e8cf95; }
.scan-gap { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--lijn); flex-wrap: wrap; }
.scan-gap-opts { display: flex; gap: .8rem; white-space: nowrap; }
.scan-gap-opts label { font-size: .85rem; }
.scan-gap-vraag { display: block; }
.scan-duiding { display: block; color: var(--inkt-licht); font-size: .78rem; margin-top: .15rem; }
.scan-badge.scan-stop { background: #C73E1D; color: #fff; border-color: #C73E1D; font-weight: 700; }
.rap-duiding { color: var(--inkt-licht); font-size: .82rem; margin: .15rem 0 0; }
.rap-score-duiding { font-size: .9rem; margin: .4rem 0 0; }
.rap-sys-kop { margin: 0 0 .3rem; }
.rap-rol { font-size: .76rem; color: var(--grijs); font-family: "IBM Plex Mono", monospace; }
.rap-cat { margin: .7rem 0 0; padding-left: .7rem; border-left: 3px solid var(--lijn); }
.rap-cat h4 { margin: 0 0 .1rem; padding-left: .5rem; border-left: 4px solid var(--lijn); }
.rap-cat-meta { margin: 0 0 .4rem; font-size: .8rem; }
.rap-cat-note { font-size: .85rem; color: var(--grijs); margin: .2rem 0; }
.rap-eisen { list-style: none; margin: 0; padding: 0; }
.rap-eisen li { margin: .35rem 0; font-size: .9rem; }
.rap-status { display: inline-block; font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 3px; margin-right: .4rem; vertical-align: 1px; }
.st-ja { background: #e2ece0; color: #2f5a2c; }
.st-deels { background: #fbeecf; color: #6b5212; }
.st-nee { background: #f6dcd4; color: #7a2412; }
.rap-eis { font-weight: 600; }
.rap-merk-kop { font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 .2rem; }
.rap-merk-voet { margin-top: 1.6rem; padding-top: .8rem; border-top: 1px solid var(--lijn); font-size: .76rem; color: var(--grijs); }
#scan-vol { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27340%27%20height%3D%27200%27%3E%3Ctext%20x%3D%278%27%20y%3D%27118%27%20font-family%3D%27monospace%27%20font-size%3D%2722%27%20fill%3D%27%231B2430%27%20fill-opacity%3D%270.05%27%20transform%3D%27rotate%28-26%20170%20100%29%27%3Eyrproject.nl%3C/text%3E%3C/svg%3E"); background-repeat: repeat; }
@media print { #scan-vol { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.scan-nudge { margin: .8rem 0 0; padding: .6rem .8rem; background: #fbeecf; border-radius: 6px; font-size: .85rem; color: #6b5212; }
.rap-visueel { background: var(--vlak); border-radius: 10px; padding: 1.2rem 1.3rem; margin-bottom: 1.4rem; }
.rap-visueel h3 { margin: 0 0 .9rem; border: 0; padding: 0; }
.rap-donuts { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rap-donut { margin: 0; text-align: center; width: 110px; }
.rap-donut svg { width: 84px; height: 84px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rap-donut-pct { font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: 17px; }
.rap-donut figcaption { font-size: .8rem; color: var(--inkt-licht); margin-top: .3rem; line-height: 1.3; }
.rap-balk-rij { display: flex; align-items: center; gap: .7rem; margin: .4rem 0; }
.rap-balk-label { flex: none; width: 11rem; font-size: .85rem; }
.rap-balk { flex: 1; height: 12px; background: #dfe3e8; border-radius: 6px; overflow: hidden; }
.rap-balk-fill { display: block; height: 100%; border-radius: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rap-balk-pct { flex: none; width: 3rem; text-align: right; font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .85rem; }
.rap-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; border: 1px solid var(--lijn); margin: .9rem 0 .5rem; }
.rap-stack span { display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rap-stack .st-ja { background: #3f7a4a; }
.rap-stack .st-deels { background: #b9892e; }
.rap-stack .st-nee { background: #C73E1D; }
.rap-legend { margin: 0; font-size: 0; }
.rap-legend .lg { display: inline-block; font-size: .74rem; padding: .08rem .45rem; border-radius: 3px; margin: 0 .4rem .3rem 0; }
@media (max-width: 540px) { .rap-balk-label { width: 7rem; } }
.rap-exec2 { margin: 0 0 1.2rem; }
.rap-exec2 h3 { margin: 0 0 .3rem; }
.rap-cat-intro { font-size: .85rem; color: var(--grijs); margin: .2rem 0 .5rem; }
.rap-methode { margin-top: 1.6rem; border-top: 1px solid var(--lijn); padding-top: 1rem; }
.rap-methode h3 { margin: 0 0 .3rem; }
.rap-methode p { font-size: .88rem; color: var(--inkt-licht); }
.scan-gate { border: 1px solid var(--accent); border-radius: 10px; padding: 1.1rem 1.2rem; margin: 1.2rem 0; background: var(--vlak); }
.scan-gate h3 { margin-top: 0; }
.scan-gate input[type=email] { width: 100%; max-width: 22rem; padding: .55rem .7rem; border: 1px solid var(--lijn); border-radius: 6px; font: inherit; margin-bottom: .6rem; }
.scan-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; margin: .3rem 0 .6rem; }
.scan-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.scan-gate-fout { color: var(--accent); font-size: .85rem; }
.scan-privacy { font-size: .78rem; color: var(--inkt-licht); margin-bottom: 0; }
.scan-bedankt { font-weight: 600; color: #2f5a2c; }
.kopcta { display: inline-block; background: var(--accent); color: #fff; padding: .3rem .7rem; border-radius: 6px; font-size: .8rem; font-weight: 600; text-decoration: none; }
.kopcta:hover { background: var(--inkt); }
.scan-promo { background: var(--inkt); color: var(--wit); border-radius: 12px; padding: 1.6rem 1.8rem; margin: 2rem 0; }
.scan-promo h2 { margin-top: 0; color: var(--wit); }
.scan-promo p { color: #D6DBE1; max-width: 60ch; }
.scan-promo .knop { margin-top: .4rem; }
.scan-promo-acties { display: flex; gap: .7rem; flex-wrap: wrap; }
.platform-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: center; margin: 2.2rem 0; }
.platform-showcase .ps-tekst h2 { margin-top: 0; }
.platform-showcase .ps-beeld img { width: 100%; height: auto; display: block; border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 18px 50px rgba(27,36,48,.18); }
@media (max-width: 720px) { .platform-showcase { grid-template-columns: 1fr; } }
.scan-promo .knop.rustig { color: var(--wit); border-color: rgba(255,255,255,.75); }
.scan-promo .knop.rustig:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.tl-signup-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .4rem 0 0; }
.tl-signup-form input[type=email] { flex: 1; min-width: 14rem; padding: .6rem .7rem; border: 1px solid var(--lijn); border-radius: 6px; font: inherit; }
.tl-signup-privacy { font-size: .78rem; color: var(--grijs); margin: .6rem 0 0; }
.tl-signup .honing { position: absolute; left: -9999px; }
.trust-strip { font-size: .76rem; color: #AEB7C2; margin: .8rem 0 0; }
.taalbalk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: center; font-size: .86rem; color: var(--grijs); margin: 0 0 1rem; padding: .5rem .8rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; }
.taalbalk-intro { color: var(--grijs); }
.taalbalk a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.taalbalk a:hover { border-bottom-color: var(--accent); }
.taalbalk strong { color: var(--inkt); }
.taalbalk-sep { color: var(--lijn); }
.taalbalk-neu { display: inline-block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--accent); border-radius: 999px; padding: .05rem .4rem; vertical-align: middle; }
.de-banner { background: #FFF8E7; border: 1px solid #E9D9A6; border-left: 4px solid var(--accent); border-radius: 10px; padding: 1rem 1.2rem; margin: 1.4rem 0; }
.de-banner-kop { font-weight: 700; color: var(--inkt); margin: 0 0 .3rem; }
.de-banner-tekst { margin: 0 0 .7rem; }
.de-banner-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.de-banner-form input[type=email] { flex: 1 1 220px; padding: .55rem .7rem; border: 1px solid var(--lijn); border-radius: 8px; font: inherit; }
.de-banner-privacy { font-size: .76rem; color: var(--grijs); margin: .5rem 0 0; }
.kort-antwoord { font-size: 1.12rem; line-height: 1.55; color: var(--inkt); border-left: 4px solid var(--accent); padding-left: 1rem; margin: 1.2rem 0 1.6rem; font-weight: 500; }
.auteur-box { display: flex; gap: 1rem; align-items: flex-start; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 1.1rem 1.3rem; margin: 2rem 0; }
.auteur-box .avatar-foto.groot { width: 72px; height: 72px; border-radius: 50%; flex: none; margin: 0; }
.auteur-box .auteur-naam { font-weight: 600; margin: 0 0 .35rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.auteur-box p { margin: .2rem 0; font-size: .92rem; }
.auteur-cta { margin-top: .5rem !important; }
.auteur-cta a { font-weight: 600; color: var(--accent); text-decoration: none; }
.auteur-cta a:hover { text-decoration: underline; }
.start-hier { font-size: .92rem; color: var(--inkt-licht); margin: 1.6rem 0 .4rem; }
.begrippen { margin-top: 1.4rem; }
.begrippen dt { font-weight: 600; margin-top: 1.1rem; }
.begrippen dd { margin: .2rem 0 0; color: var(--grijs); }
.scan-sub { margin-top: 1.4rem; }
.scan-oplevert, .scan-verschil { margin: .4rem 0 1.4rem; padding-left: 1.1rem; }
.scan-oplevert li, .scan-verschil li { margin-bottom: .35rem; }
.scan-org { margin: 1.6rem 0; border: 1px solid var(--lijn); border-radius: 10px; padding: 1.1rem 1.2rem; background: var(--vlak); }
.scan-org h2 { margin-top: 0; }
.scan-org-intro { color: var(--inkt-licht); font-size: .9rem; margin: 0 0 1rem; }
.scan-over, .scan-faq, .scan-hulp { margin-top: 2.2rem; border-top: 1px solid var(--lijn); padding-top: 1.2rem; }
.scan-hulp ul { padding-left: 1.1rem; }
.scan-hulp li { margin-bottom: .35rem; }
.scan-stappen { padding-left: 1.2rem; }
.scan-stappen li { margin-bottom: .4rem; }
.scan-faq-item { margin-bottom: 1rem; }
.scan-faq-item h3 { margin-bottom: .25rem; font-size: 1rem; }
.scan-faq-item p { margin-top: 0; color: var(--inkt-licht); }
@media print { .scan-gate, .scan-toevoegen, .scan-sys-acties, #scan-systemen, #scan-formulier, .rap-print, header.site, footer.site, .briefing, #stap1, #stap2, #tlscan .terug, #tlscan .concept, .tl-noprint { display: none !important; } #scan-vol, #tl-vol { display: block !important; } }
#scan-rapport { margin-top: 2rem; border-top: 2px solid var(--inkt); padding-top: 1rem; }
.rap-exec { background: var(--vlak); border-radius: 10px; padding: 1rem 1.2rem; }
.rap-rood { color: #C73E1D; font-weight: 600; }
.rap-sys { margin: .6rem 0; padding: .6rem .9rem; border: 1px solid var(--lijn); border-radius: 8px; }
.rap-sys ul { margin: .5rem 0 0; padding-left: 0; list-style: none; }
.rap-sys li { margin: .3rem 0; font-size: .9rem; }
.rap-datum { color: var(--inkt-licht); }
.rap-acties li { margin: .4rem 0; }
.scan-uitleg, .rap-acties em { color: var(--inkt-licht); font-size: .85rem; }
.uitkomst-blok {
  background: var(--wit); border: 1px solid var(--lijn);
  border-left: 4px solid var(--accent); border-radius: 3px;
  padding: 1rem 1.2rem; margin-bottom: .8rem;
}
.uitkomst-blok h3 { margin: 0 0 .35rem; font-size: 1rem; }
.uitkomst-blok p { margin: 0 0 .4rem; font-size: .92rem; color: var(--grijs); }
.uitkomst-blok a { font-size: .85rem; }

/* ---- visuals ---- */
figure.visual {
  margin: 1.8rem 0; padding: 1rem 1rem .7rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px;
}
figure.visual svg { width: 100%; height: auto; display: block; }
figure.visual figcaption {
  font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  color: var(--grijs); margin-top: .6rem; letter-spacing: .02em;
}

/* ---- auteursmonogram ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55em; height: 1.55em; vertical-align: -.35em;
  background: var(--inkt); color: var(--wit);
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .82em;
  border-bottom: 2px solid var(--accent);
  letter-spacing: 0;
}
.avatar.groot {
  width: 72px; height: 72px; font-size: 1.7rem;
  border-bottom-width: 5px; float: right; margin: 0 0 .8rem 1.2rem;
}
.avatar-foto {
  width: 1.7em; height: 1.7em; border-radius: 50%; object-fit: cover;
  object-position: center top; vertical-align: -.5em; margin-right: .15rem;
  border-bottom: 2px solid var(--accent);
}
.avatar-foto.groot {
  width: 150px; height: 150px; vertical-align: middle; float: right;
  margin: 0 0 1rem 1.4rem; border-bottom: 4px solid var(--accent);
}
.deel { margin-top: 1.6rem; }
.deel a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: "IBM Plex Mono", monospace; font-size: .8rem;
  text-decoration: none; color: var(--inkt);
  border: 1px solid var(--inkt); padding: .4rem .85rem; border-radius: 2px;
}
.deel a:hover { background: var(--inkt); color: var(--wit); }
.deel svg { width: .95rem; height: .95rem; fill: currentColor; }

/* ---- documentenbibliotheek ---- */
.doc-sectie h2 { font-size: 1.05rem; margin-top: 2.4rem; padding-left: .75rem; border-left: 4px solid var(--accent); }
.doc-item {
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 3px;
  padding: .9rem 1.15rem; margin-bottom: .7rem;
}
.doc-item h3 { margin: .15rem 0 .3rem; font-size: 1rem; }
.doc-item h3 a { color: var(--inkt); text-decoration: none; }
.doc-item h3 a:hover { color: var(--accent); }
.doc-meta { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--grijs);
  text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.doc-annotatie { margin: 0; font-size: .9rem; color: var(--grijs); max-width: 70ch; }

/* ---- lees ook ---- */
.lees-ook { margin-top: 2.5rem; }
.lees-ook h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--grijs); border: 0; padding: 0; margin-bottom: .8rem; }

/* ---- toegankelijkheid ---- */
.skiplink {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: var(--wit);
  padding: .6rem 1rem; z-index: 10; text-decoration: none;
}
.skiplink:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kaart, .filters button, .knop { transition: none; }
  .knop:hover { transform: none; }
  .kaart:hover { transform: none; }
}

/* ---- klikbare kaart + versheid ---- */
.kaart { position: relative; }
.kaart h2 a::after { content: ""; position: absolute; inset: 0; }
.nieuw {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--wit); background: var(--accent);
  padding: .12rem .45rem; border-radius: 2px;
}

/* ---- leesbaarheid entrypagina ---- */
.inhoud > p, .inhoud li { max-width: 66ch; }
.inhoud, .kort-antwoord { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 1.2rem; }
.artikel-toc { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: .9rem 1.1rem; margin: 1.4rem 0; }
.artikel-toc-kop { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); font-weight: 700; margin: 0 0 .5rem; }
.artikel-toc ul { margin: 0; padding-left: 1.1rem; line-height: 1.6; }
.artikel-toc li { font-size: .92rem; margin-bottom: .2rem; }
.artikel-toc a { text-decoration: none; }
.artikel-toc a:hover { text-decoration: underline; }
.artikel-2col { display: block; }
@media (min-width: 900px) {
  .artikel-2col { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.4rem; align-items: start; }
  .artikel-2col .toc-zijbalk { position: sticky; top: 1.4rem; }
  .artikel-2col .toc-zijbalk .artikel-toc { margin: 0; }
}
.hr-scan { margin: 1.5rem 0; }
.hr-scan h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
.hr-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .4rem .9rem; }
.hr-opt { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem 0; font-size: .95rem; cursor: pointer; }
.hr-opt input { margin-top: .25rem; }
.hr-vraag { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--lijn); }
.hr-vraag-t { flex: 1 1 60%; }
.hr-ja-nee { display: flex; gap: 1rem; white-space: nowrap; }
.hr-ja-nee label { cursor: pointer; }
.hr-res { margin: 1.5rem 0 0; padding: 1.1rem 1.3rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; }
.hr-res-count { font-weight: 700; margin: 0 0 .6rem; }
.hr-res-h { font-weight: 600; margin: 1rem 0 .3rem; }
.hr-res-list { margin: 0 0 .6rem; padding-left: 1.1rem; line-height: 1.6; }
.hr-res-note { margin: .4rem 0; color: var(--grijs); }
.hr-res-verbod { background: #FBEAEA; border: 1px solid #E3A9A9; border-left: 4px solid #B23A3A; border-radius: 8px; padding: .7rem .9rem; margin: 0 0 .8rem; }
.hr-res-verbod strong { color: #8E2A2A; }
.hr-res-cta { margin: 1rem 0 .3rem; }
.hr-res-disc { font-size: .8rem; color: var(--grijs); margin: .6rem 0 0; }
.aankondiging { background: linear-gradient(135deg, var(--inkt) 0%, var(--inkt-licht) 100%); color: #E8ECF1; border-radius: 12px; padding: 1.3rem 1.5rem; margin: 1.6rem 0; }
.aankondiging-badge { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--inkt); background: var(--accent); border-radius: 999px; padding: .12rem .55rem; margin-bottom: .5rem; }
.aankondiging-kop { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0 0 .4rem; }
.aankondiging-tekst { margin: 0 0 .8rem; color: #D6DBE1; }
.aankondiging-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.aankondiging-form input[type=email] { flex: 1 1 240px; padding: .6rem .8rem; border: 1px solid transparent; border-radius: 8px; font: inherit; }
.aankondiging-privacy { font-size: .76rem; color: #AEB7C2; margin: .6rem 0 0; }
.pro-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.6rem; }
.pro-feature { background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 1rem 1.1rem; }
.pro-feature h3 { margin: 0 0 .35rem; font-size: 1rem; }
.pro-feature p { margin: 0; font-size: .92rem; color: var(--grijs); }
.pro-cta { margin: 1.6rem 0; }
.pro-gratis { margin: 1.6rem 0 0; padding: 1rem 1.2rem; border-left: 4px solid var(--accent); background: var(--vlak); border-radius: 0 8px 8px 0; }
.pro-gratis h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.pro-gratis p { margin: 0; }
/* ---- sector-split (HR, Finance — dark card split-secties) ---- */
.sector-split { position: relative; overflow: hidden; border-radius: 20px; margin: 1.8rem 0; padding: 2.4rem 1.8rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 820px) { .sector-split { grid-template-columns: 1fr 1fr; gap: 3rem; } }
@media (min-width: 820px) { .sector-split.flip .sector-col-tekst { order: 2; } .sector-split.flip .sector-col-kaarten { order: 1; } }
.hr-split { background: linear-gradient(135deg, #1A2B1C 0%, #1B2430 100%); }
.hr-split::before { content: ""; position: absolute; width: 400px; height: 400px; right: -80px; top: -160px; background: radial-gradient(circle, rgba(93,202,165,.15), transparent 65%); pointer-events: none; }
.fin-split { background: linear-gradient(135deg, #111E35 0%, #1B2430 100%); }
.fin-split::before { content: ""; position: absolute; width: 400px; height: 400px; left: -80px; bottom: -160px; background: radial-gradient(circle, rgba(61,130,199,.15), transparent 65%); pointer-events: none; }
.tl-split { background: linear-gradient(135deg, #221A0E 0%, #1B2430 100%); }
.tl-split::before { content: ""; position: absolute; width: 400px; height: 400px; right: -80px; bottom: -160px; background: radial-gradient(circle, rgba(232,150,60,.14), transparent 65%); pointer-events: none; }
.sector-col-tekst { position: relative; }
.sector-col-kaarten { display: flex; flex-direction: column; gap: .6rem; position: relative; }
.sector-split .sector-eyebrow { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: #5DCAA5; margin-bottom: .6rem; }
.sector-split h2 { color: var(--wit); margin: 0 0 .85rem; font-size: 1.45rem; line-height: 1.2; }
.sector-split .sector-col-tekst p { color: #AEB7C2; margin: 0 0 1.4rem; font-size: .95rem; line-height: 1.6; }
.sector-mini-kaart { display: block; text-decoration: none; padding: .75rem 1rem; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: #DDE2E8; font-size: .9rem; transition: background .15s, border-color .15s, transform .12s; }
.sector-mini-kaart:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); transform: translateX(3px); }
.sector-mini-kaart .smk-label { font-size: .65rem; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); display: block; margin-bottom: .25rem; }
.sector-mini-kaart strong { display: block; }
/* Legacy sector-spot fallback voor andere blokken */
.sector-spot { background: var(--wit); border: 1px solid var(--lijn); border-left: 5px solid var(--accent); border-radius: 12px; padding: 1.4rem 1.6rem; margin: 1.6rem 0; }
.sector-spot h2 { margin: .1rem 0 .5rem; }
.sector-eyebrow { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); }
.sector-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1rem; }
.sector-chip { display: inline-block; font-size: .85rem; padding: .35rem .8rem; border: 1px solid var(--lijn); border-radius: 999px; background: var(--vlak); text-decoration: none; color: var(--inkt); }
.sector-chip:hover { border-color: var(--accent); color: var(--accent); }
/* cursus/API/tools nieuwe stijlen */
.cursus-split { background: linear-gradient(135deg, #1A1530 0%, #1B2430 100%); }
.cursus-split::before { content: ""; position: absolute; width: 420px; height: 420px; left: -100px; top: -140px; background: radial-gradient(circle, rgba(120,100,220,.18), transparent 60%); pointer-events: none; }
.cursus-voordelen { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.cursus-voordelen li { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; color: #DDE2E8; font-size: .91rem; line-height: 1.4; }
.cursus-voordelen li::before { content: "✓"; flex: none; font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: #9B8EF0; margin-top: .05rem; }
.api-card { position: relative; overflow: hidden; background: #0F1621; border-radius: 20px; margin: 1.8rem 0; padding: 2rem 2rem 2rem 2.2rem; display: grid; gap: 1.6rem; align-items: center; }
@media (min-width: 760px) { .api-card { grid-template-columns: 1fr auto; } }
.api-card::before { content: ""; position: absolute; width: 300px; height: 300px; right: -60px; top: -120px; background: radial-gradient(circle, rgba(93,202,165,.12), transparent 60%); pointer-events: none; }
.api-card-tekst { position: relative; }
.api-card-tekst .sector-eyebrow { color: #5DCAA5; }
.api-card-tekst h2 { color: var(--wit); margin: .4rem 0 .75rem; font-size: 1.3rem; }
.api-card-tekst p { color: #AEB7C2; margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.6; }
.api-card-code { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.1rem 1.3rem; font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: #7FD8BC; white-space: pre; line-height: 1.7; min-width: 220px; }
.api-card-code .c-key { color: #9BBEDF; }
.api-card-code .c-val { color: #F0A78F; }
.tools-sectie { margin: 2.4rem 0; }
.tools-sectie > h2 { margin: 0 0 .3rem; }
.tools-sectie > p { color: var(--grijs); margin: 0 0 1.2rem; font-size: .95rem; }
.tools-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: .75rem; }
.tool-link { display: block; text-decoration: none; padding: 1rem 1.1rem; border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); transition: border-color .13s, transform .12s, box-shadow .12s; }
.tool-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(27,36,48,.09); }
.tool-link .tl-kop { font-weight: 700; color: var(--inkt); font-size: .97rem; display: flex; align-items: center; gap: .45rem; }
.tool-link .tl-kop::after { content: "→"; color: var(--accent); font-size: .9rem; margin-left: auto; }
.tool-link .tl-oms { display: block; color: var(--grijs); font-size: .86rem; margin-top: .3rem; line-height: 1.4; }
.hulp-home { margin: 2rem 0; }
.hulp-home h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.hulp-home-intro { margin: 0 0 .9rem; color: var(--grijs); font-size: .92rem; }
.hulp-home-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 620px) { .hulp-home-lijst { grid-template-columns: 1fr 1fr; } }
.hulp-home-lijst li { line-height: 1.4; font-size: .9rem; }
.hulp-home-lijst a { font-weight: 600; text-decoration: none; color: var(--inkt); }
.hulp-home-lijst a:hover { color: var(--accent); }
.hulp-home-lijst span { display: block; font-size: .83rem; color: var(--grijs); }
.sector-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1rem; }
.sector-chip { display: inline-block; font-size: .85rem; padding: .35rem .8rem; border: 1px solid var(--lijn); border-radius: 999px; background: var(--vlak); text-decoration: none; color: var(--inkt); }
.sector-chip:hover { border-color: var(--accent); color: var(--accent); }
.inhoud > p:first-child { font-size: 1.07em; color: #2A3647; }

/* ---- footer-navigatie ---- */
footer.site .binnen { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.2rem; }
footer.site .footnav h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: #7E8896; margin: 0 0 .6rem; font-weight: 600;
}
footer.site .footnav ul { list-style: none; margin: 0; padding: 0; }
footer.site .footnav li { margin-bottom: .4rem; font-size: .82rem; }
footer.site .footnav a { text-decoration: none; }
footer.site .footnav a:hover { text-decoration: underline; }
footer.site .footnav-groepen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.4rem 1.6rem; }
footer.site .footnav-groep h3 { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: #AEB7C2; margin: 0 0 .5rem; font-weight: 600; }
.recent-home { margin: 2.4rem 0 0; }
.recent-home > h2 { margin: 0 0 1rem; }
.alle-onderwerpen { margin: 1.2rem 0 0; text-align: center; }

@media (max-width: 720px) { .tegels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  body { font-size: 16px; }
  .inhoud table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  article h1, .hero h1 { font-size: 1.45rem; }
  .kaart { gap: .8rem; }
  header.site { padding: 1.4rem 1.25rem 1.2rem; }
  header.site .binnen { flex-direction: column; align-items: stretch; gap: .85rem; }
  header.site .sitenaam { font-size: 1.02rem; display: block; line-height: 1.25; }
  header.site .sitenaam .blok { display: inline-block; vertical-align: middle; margin-right: .45rem; }
  header.site .tagline { font-size: .62rem; margin-left: 0; letter-spacing: .02em; }
  .headeracties { position: static; margin-top: 0; gap: .65rem 1.1rem; flex-wrap: wrap; align-items: center; }
  .taalwissel { font-size: .72rem; }
  .hero { padding-top: 2rem; padding-bottom: 1.8rem; }
  footer.site .binnen { grid-template-columns: 1fr; }
}

/* ---- print ---- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  header.site, footer.site, .zoekbalk, .filters, .terug, .taalwissel { display: none; }
  .inhoud > p, .inhoud li { max-width: none; }
  article h1 { border-top-color: #000; }
  .bronnen { border: 1px solid #000; }
  a { color: #000; }
  .bronnen a::after { content: ""; }
}