/* Stijl van de site. Kleurtokens op :root, donkere variant via prefers-color-scheme.
   De accentkleur komt uit lib/site.php (SITE_KLEUR) en wordt hier als standaard herhaald;
   thema's zetten --thema-kleur per pagina. */

:root {
  --bg: #faf9f6;
  --bg-kaart: #ffffff;
  --bg-zacht: #f1efe9;
  --inkt: #191a1f;
  --inkt-zacht: #54555e;
  --inkt-vaag: #8b8c96;
  --lijn: #e7e5df;
  --accent: #1f7a55;
  --accent-inkt: #ffffff;
  --accent-zacht: #e6f3ec;
  --thema-kleur: var(--accent);
  --let-op: #b45309;
  --let-op-bg: #fff7ea;
  --fout: #b91c1c;
  --fout-bg: #fef2f2;
  --ok: #166534;
  --ok-bg: #f0fdf4;
  --schaduw: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(25,26,31,.06);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101014; --bg-kaart: #18181f; --bg-zacht: #1f1f28;
    --inkt: #f0efeb; --inkt-zacht: #a8a8b3; --inkt-vaag: #6d6d78; --lijn: #26262f;
    --accent: #4fb586; --accent-inkt: #0d1a13; --accent-zacht: #17301f;
    --let-op: #f2b866; --let-op-bg: #2a2214; --fout: #f28b8b; --fout-bg: #2a1616; --ok: #8fd6a9; --ok-bg: #12261a;
    --schaduw: 0 1px 2px rgba(0,0,0,.4);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--inkt); background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-top: 1.4em; }
h3 { font-size: 1.15rem; margin-top: 1.2em; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .9em; background: var(--bg-zacht); padding: .1em .35em; border-radius: 5px; }
code.blok { display: block; padding: .6em .8em; word-break: break-all; white-space: pre-wrap; }
pre.log { font-family: var(--mono); font-size: 12px; background: var(--bg-zacht); padding: 12px; border-radius: 8px; overflow: auto; max-height: 360px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--accent-inkt); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.stil { color: var(--inkt-zacht); }
.klein { font-size: .88rem; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }
.fout { color: var(--fout); }
.intro { font-size: 1.1rem; color: var(--inkt-zacht); max-width: 42em; }

/* Kop en menu */
.testbanner { background: #7c3aed; color: #fff; text-align: center; font-weight: 800; font-size: 12px; letter-spacing: .06em; padding: 5px 10px; }
.omgeving-test .kop { border-bottom-color: #ea580c; }
.kop { background: var(--bg-kaart); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 20; }
.kop-binnen { max-width: 1100px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--inkt); letter-spacing: -.01em; }
.logo:hover { text-decoration: none; }
.logo-bol { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-zacht); }
.logo-test { font-size: .7rem; font-weight: 800; color: #ea580c; letter-spacing: .06em; }
.menu-knop { display: none; border: 1px solid var(--lijn); background: var(--bg-kaart); color: var(--inkt); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: .9rem; cursor: pointer; }
.menu { display: flex; gap: 4px; flex-wrap: wrap; }
.menu a { padding: 8px 12px; border-radius: 8px; color: var(--inkt-zacht); font-weight: 600; font-size: .95rem; }
.menu a:hover { background: var(--bg-zacht); text-decoration: none; color: var(--inkt); }
.menu a.actief { background: var(--accent-zacht); color: var(--accent); }
.menu a.menu-beheer { border: 1px dashed var(--lijn); }
.menu a.menu-login { background: var(--accent); color: var(--accent-inkt); }
@media (max-width: 760px) {
  .menu-knop { display: inline-block; }
  .menu { display: none; width: 100%; flex-direction: column; padding-bottom: 10px; }
  .menu.open { display: flex; }
}

/* Pagina en voet */
.pagina { max-width: 860px; margin: 0 auto; padding: 28px 16px 56px; }
.pagina-smal .pagina { max-width: 520px; }
.pagina-breed .pagina { max-width: 1240px; }
.voet { border-top: 1px solid var(--lijn); background: var(--bg-kaart); }
.voet-binnen { max-width: 1100px; margin: 0 auto; padding: 22px 16px; color: var(--inkt-zacht); font-size: .92rem; }
.voet-klein { font-size: .8rem; color: var(--inkt-vaag); margin: 0; }

/* Meldingen en kaders */
.melding { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; border: 1px solid var(--lijn); background: var(--bg-kaart); font-size: .95rem; }
.melding-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.melding-fout { background: var(--fout-bg); color: var(--fout); border-color: transparent; }
.melding-let-op { background: var(--let-op-bg); color: var(--let-op); border-color: transparent; }
.kader { border-left: 4px solid var(--accent); background: var(--accent-zacht); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 1.2em 0; }
.kader p:last-child { margin-bottom: 0; }
.kader-let-op { border-color: var(--let-op); background: var(--let-op-bg); }
.kader-tip { border-color: var(--ok); background: var(--ok-bg); }
.disclaimer { font-size: .95rem; margin-top: 2em; }
.md-onbekend { color: var(--fout); font-family: var(--mono); font-size: .9em; }

/* Kaarten, tegels, knoppen */
.kaart { background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--schaduw); }
.kaart h2:first-child, .kaart h1:first-child { margin-top: 0; }
.kaart.gevaar { border-color: var(--fout-bg); }
.kaart-login { margin-top: 20px; }
.kaart-link { display: block; color: inherit; }
.kaart-link:hover { text-decoration: none; border-color: var(--accent); }
.kaarten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kolommen { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.knop { display: inline-block; border: 1px solid var(--lijn); background: var(--bg-kaart); color: var(--inkt); padding: 10px 18px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.knop:hover { text-decoration: none; background: var(--bg-zacht); }
.knop-primair { background: var(--accent); color: var(--accent-inkt); border-color: var(--accent); }
.knop-primair:hover { filter: brightness(1.08); background: var(--accent); }
.knop-stil { background: transparent; }
.knop-breed { width: 100%; text-align: center; }
.knop-klein { padding: 5px 10px; font-size: .85rem; border-radius: 8px; }
.knop-gevaar { color: var(--fout); border-color: var(--fout); background: transparent; }
.knop-gevaar:hover { background: var(--fout-bg); }
.knop[disabled] { opacity: .5; cursor: not-allowed; }
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.inline { display: inline; }
.kop-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kop-rij h1, .kop-rij label { margin: 0; }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--bg-zacht); color: var(--inkt-zacht); vertical-align: middle; }
.badge-concept { background: var(--let-op-bg); color: var(--let-op); }
.badge-let-op { background: var(--let-op-bg); color: var(--let-op); }
.badge-gepubliceerd { background: var(--ok-bg); color: var(--ok); }
.badge-stil { background: var(--bg-zacht); }
.kleurstip { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }

/* Voorpagina */
.hero { padding: 24px 0 8px; }
.hero-label { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); max-width: 16em; }
.hero-intro { font-size: 1.15rem; color: var(--inkt-zacht); max-width: 40em; }
.hero-acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.blok { margin-top: 36px; }
.tegels { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tegel { display: flex; flex-direction: column; gap: 4px; background: var(--bg-kaart); border: 1px solid var(--lijn); border-top: 4px solid var(--tegel-kleur, var(--accent)); border-radius: var(--radius); padding: 18px 20px; color: inherit; box-shadow: var(--schaduw); }
.tegel:hover { text-decoration: none; transform: translateY(-2px); transition: transform .15s; }
.tegel-icoon { font-size: 1.8rem; }
.tegel-titel { font-weight: 700; font-size: 1.1rem; }
.tegel-sub { color: var(--inkt-zacht); font-size: .95rem; }
.tegel-meta { color: var(--inkt-vaag); font-size: .8rem; margin-top: 6px; }
.stappen { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stap { background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px 20px; }
.stap h3 { margin-top: 6px; font-size: 1.05rem; }
.stap p { margin: 0; color: var(--inkt-zacht); font-size: .95rem; }
.stap-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-inkt); font-weight: 800; }

/* Thema en hoofdstukken */
.kruimels { font-size: .88rem; color: var(--inkt-vaag); margin-bottom: 14px; }
.kruimels span { margin: 0 6px; }
.thema-kop { border-left: 5px solid var(--thema-kleur); padding-left: 16px; margin: 6px 0 16px; }
.thema-icoon { font-size: 2rem; display: block; }
.thema-intro { margin-bottom: 24px; }
.hoofdstuk-lijst { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.hoofdstuk-lijst a { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: 12px; padding: 14px 16px; color: inherit; }
.hoofdstuk-lijst a:hover { text-decoration: none; border-color: var(--thema-kleur); }
.hoofdstuk-nr { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--thema-kleur); color: #fff; font-weight: 800; }
.hoofdstuk-tekst { display: flex; flex-direction: column; gap: 2px; }
.hoofdstuk-titel { font-weight: 700; }
.hoofdstuk-sub { color: var(--inkt-zacht); font-size: .95rem; }
.hoofdstuk-meta { color: var(--inkt-vaag); font-size: .82rem; }
.hoofdstuk-label { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--thema-kleur); margin-bottom: 6px; }
.hoofdstuk header { border-bottom: 1px solid var(--lijn); padding-bottom: 12px; margin-bottom: 20px; }
.hoofdstuk-extra { margin-top: 32px; }
.buren { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.buur { display: flex; flex-direction: column; background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 16px; color: inherit; font-weight: 600; }
.buur span { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inkt-vaag); font-weight: 700; }
.buur-volgende { text-align: right; align-items: flex-end; }
.buur:hover { text-decoration: none; border-color: var(--thema-kleur); }
@media (max-width: 560px) { .buren { grid-template-columns: 1fr; } }

/* Leesbare tekst (Markdown-uitvoer) */
.prose { max-width: 42em; font-size: 1.05rem; }
.prose h2 { font-size: 1.45rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.2rem; }
.prose h4, .prose h5 { font-size: 1.05rem; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.2em 0; padding: 10px 18px; border-left: 4px solid var(--lijn); color: var(--inkt-zacht); background: var(--bg-zacht); border-radius: 0 10px 10px 0; }
.prose blockquote p:last-child { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--lijn); margin: 2em 0; }
.prose img { border-radius: 10px; }
.prose a { text-decoration: underline; text-decoration-color: var(--lijn); text-underline-offset: 3px; }
.preview { min-height: 200px; }

/* Video's */
.video { margin: 1.4em 0; }
.video-kader { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.video-kader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: .9rem; color: var(--inkt-zacht); margin-top: 8px; }
.video-samenvatting { display: block; margin-top: 4px; }
.video-lijst { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.video-item .video { margin: 0; }
.video-context { font-size: .88rem; color: var(--inkt-zacht); margin-top: 6px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.filters a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--lijn); font-size: .88rem; color: var(--inkt-zacht); font-weight: 600; }
.filters a.actief { background: var(--accent); color: var(--accent-inkt); border-color: var(--accent); }
.filters a:hover { text-decoration: none; background: var(--bg-zacht); }

/* Deskundigen en bronnen */
.deskundige-kaart { background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 18px; margin: 1.4em 0; font-size: .97rem; }
.deskundige-kop { display: flex; flex-direction: column; margin-bottom: 8px; }
.deskundige-naam { font-weight: 700; font-size: 1.05rem; }
.deskundige-rol { color: var(--inkt-zacht); font-size: .9rem; }
.deskundige-kort { color: var(--inkt-zacht); font-size: .92rem; margin-top: 6px; display: block; }
.deskundige-waarom p:last-child { margin: 0; }
.deskundige-kanttekening { margin-top: 10px; padding: 8px 12px; background: var(--let-op-bg); border-radius: 8px; font-size: .9rem; }
.deskundige-kanttekening .label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--let-op); }
.deskundige-kanttekening p:last-child { margin: 0; }
.deskundige-link { display: inline-block; margin-top: 10px; font-weight: 600; font-size: .9rem; }
.kaart.deskundige { display: flex; flex-direction: column; }
.bronnen { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.bronnen li { padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: .95rem; }
.bron-omschrijving { display: block; color: var(--inkt-zacht); font-size: .88rem; }

/* Formulieren */
label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 5px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 6px 0; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], select, textarea {
  width: 100%; font: inherit; color: var(--inkt); background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: 9px; padding: 10px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
textarea { resize: vertical; line-height: 1.5; }
input[type=color] { width: 60px; height: 42px; padding: 2px; border: 1px solid var(--lijn); border-radius: 9px; background: var(--bg-kaart); }
input.smal { width: 90px; display: inline-block; }
.formulier button[type=submit] { margin-top: 14px; }
.formulier-rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.formulier-rij label { margin: 0; display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }
.formulier-rij input[type=text] { width: auto; }
.rij-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.rij-3 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1fr; }
.rij-knop { display: flex; gap: 8px; align-items: stretch; }
.rij-knop input { flex: 1; }
@media (max-width: 640px) { .rij-2, .rij-3 { grid-template-columns: 1fr; } }
.checkgroep { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.hulp { margin-top: 10px; font-size: .9rem; }
.hulp summary { cursor: pointer; font-weight: 600; }
.editor { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.editor textarea { font-family: var(--mono); font-size: .92rem; line-height: 1.55; }
@media (max-width: 900px) { .editor { grid-template-columns: 1fr; } }
#editor-status.waarschuwing { color: var(--let-op); font-weight: 600; }

/* Tabellen (beheer) */
.tabel-wrapper { overflow-x: auto; background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: var(--radius); margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.klein { font-size: .85rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-vaag); background: var(--bg-zacht); }
tr:last-child td { border-bottom: 0; }
tr.ikzelf td { background: var(--accent-zacht); }
tr.rij-open td { background: var(--let-op-bg); }
td.acties { white-space: nowrap; font-size: .9rem; }
.lijst-los { list-style: none; padding: 0; margin: 0 0 12px; }
.lijst-los li { padding: 7px 0; border-bottom: 1px solid var(--lijn); }
.lijst-los li:last-child { border-bottom: 0; }

/* Beheer */
.subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: -8px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.subnav a { padding: 6px 11px; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--inkt-zacht); }
.subnav a.actief { background: var(--inkt); color: var(--bg); }
.subnav a:hover { text-decoration: none; background: var(--bg-zacht); color: var(--inkt); }
.stat-tegels { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 18px; }
.stat { display: flex; flex-direction: column; background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: 12px; padding: 14px 16px; color: inherit; }
.stat:hover { text-decoration: none; border-color: var(--accent); }
.stat-getal { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.stat-van { font-size: 1rem; color: var(--inkt-vaag); font-weight: 600; }
.stat-label { font-size: .85rem; color: var(--inkt-zacht); }

/* Testresultaten */
.test-ok { color: var(--ok); }
.test-fout { color: var(--fout); font-weight: 700; }
.test-skip { color: var(--inkt-vaag); }

/* ── Voorpagina v2: lichte leefstijlpagina met illustratie en iconen ─────────── */
:root {
  --font-kop: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --zon: #f2b84b; --zon-licht: #ffe6a3; --lucht: #e3f1ea; --heuvel: #7fbf9c; --heuvel-ver: #b9dcc9;
  --blad: #2f9a6a; --hout: #8a5a3c; --bes: #d9534f;
  --o-groen: #e6f3ec; --o-groen-i: #1f7a55;
  --o-oranje: #fff0e3; --o-oranje-i: #c2570f;
  --o-paars: #f1ecfb; --o-paars-i: #6d3fc2;
  --o-blauw: #e8f1fb; --o-blauw-i: #1d5fa8;
  --o-geel: #fff7dd; --o-geel-i: #9a6b00;
  --o-teal: #e3f5f4; --o-teal-i: #0f766e;
  --o-rood: #fdeaea; --o-rood-i: #b42323;
  --o-roze: #fdeaf3; --o-roze-i: #b0286c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zon: #e0a63a; --zon-licht: #f6cf7a; --lucht: #17231d; --heuvel: #2c6b4d; --heuvel-ver: #1f4a36;
    --blad: #3fa574; --hout: #a0704f; --bes: #d9534f;
    --o-groen: #16301f; --o-groen-i: #7fd3a6;
    --o-oranje: #33210f; --o-oranje-i: #f0a768;
    --o-paars: #251a3a; --o-paars-i: #c4a8f5;
    --o-blauw: #14243a; --o-blauw-i: #8fbcf2;
    --o-geel: #302a10; --o-geel-i: #f1d27a;
    --o-teal: #0f2b2a; --o-teal-i: #7fd6cf;
    --o-rood: #331616; --o-rood-i: #f39b9b;
    --o-roze: #331626; --o-roze-i: #f3a3c9;
  }
}

.voorpagina .pagina { max-width: 1100px; padding-top: 12px; }
.voorpagina h1, .voorpagina h2 { font-family: var(--font-kop); letter-spacing: -.015em; font-weight: 700; }

.ico { width: 1.25em; height: 1.25em; vertical-align: -.25em; flex: none; }
.ico-knop { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.knop-groot { padding: 13px 22px; font-size: 1.02rem; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; }

/* Hero met achtergrondfoto over de volle breedte (breekt uit de pagina-breedte) */
.hero-foto { position: relative; width: 100vw; margin: -12px calc(50% - 50vw) 0; padding: clamp(24px, 3.5vw, 40px) 24px clamp(64px, 9vw, 110px); color: #fff;
  background: var(--inkt) var(--hero-foto) center 40% / cover no-repeat; overflow: hidden; }
@media (max-width: 800px) { .hero-foto { background-image: var(--hero-foto-klein); background-position: center 35%; } }
.hero-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,22,18,.86) 0%, rgba(14,22,18,.66) 50%, rgba(14,22,18,.28) 100%); }
@media (max-width: 800px) { .hero-foto::before { background: linear-gradient(180deg, rgba(14,22,18,.55) 0%, rgba(14,22,18,.86) 100%); } }
.hero-binnen { position: relative; max-width: 1100px; margin: 0 auto; }
.voorpagina .hero-foto .hero-label { color: #cfe9db; }
.voorpagina .hero-foto h1 { color: #fff; font-size: clamp(2.4rem, 5.4vw, 3.9rem); line-height: 1.06; max-width: 13em; margin-bottom: .5em; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.voorpagina .hero-foto .hero-intro { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34em; }
.voorpagina .hero-foto .hero-intro p:last-child { margin-bottom: 0; }
.hero-foto .hero-chips { color: rgba(255,255,255,.88); margin-top: 28px; }
.hero-foto .hero-chips .ico { color: #8fd6a9; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 26px 0 0; font-size: .95rem; font-weight: 600; }
.hero-chips li { display: inline-flex; align-items: center; gap: 6px; }
.hero-bron { position: absolute; right: 16px; bottom: 10px; margin: 0; color: rgba(255,255,255,.55); font-size: .7rem; }
.foto-bron { font-size: .72rem; color: var(--inkt-vaag); text-align: right; margin: 8px 6px 0; }

.blok-kop { max-width: 40em; margin-bottom: 22px; }
.blok-label { text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 800; color: var(--accent); margin: 0 0 6px; }
.blok-kop h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 .35em; }
.blok-intro { color: var(--inkt-zacht); font-size: 1.05rem; margin: 0; }
.voorpagina .blok { margin-top: 56px; }

.onderwerpen { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.onderwerp { background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: 18px; padding: 22px 22px 20px; box-shadow: var(--schaduw); transition: transform .18s ease, border-color .18s ease; }
.onderwerp:hover { transform: translateY(-3px); border-color: var(--o-i, var(--accent)); }
.onderwerp h3 { margin: 14px 0 6px; font-size: 1.12rem; }
.onderwerp p { margin: 0; color: var(--inkt-zacht); font-size: .96rem; }
.onderwerp-icoon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--o-bg, var(--accent-zacht)); color: var(--o-i, var(--accent)); }
.onderwerp-icoon .ico { width: 26px; height: 26px; }
.o-groen  { --o-bg: var(--o-groen);  --o-i: var(--o-groen-i); }
.o-oranje { --o-bg: var(--o-oranje); --o-i: var(--o-oranje-i); }
.o-paars  { --o-bg: var(--o-paars);  --o-i: var(--o-paars-i); }
.o-blauw  { --o-bg: var(--o-blauw);  --o-i: var(--o-blauw-i); }
.o-geel   { --o-bg: var(--o-geel);   --o-i: var(--o-geel-i); }
.o-teal   { --o-bg: var(--o-teal);   --o-i: var(--o-teal-i); }
.o-rood   { --o-bg: var(--o-rood);   --o-i: var(--o-rood-i); }
.o-roze   { --o-bg: var(--o-roze);   --o-i: var(--o-roze-i); }

.band { background: var(--bg-kaart); border: 1px solid var(--lijn); border-radius: 28px; padding: 34px clamp(20px, 4vw, 44px) 30px; box-shadow: var(--schaduw); }
.principes { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.principe { position: relative; padding-top: 6px; }
.principe-nr { position: absolute; right: 0; top: -6px; font-family: var(--font-kop); font-size: 3.2rem; line-height: 1; color: var(--lijn); font-weight: 700; }
.principe-icoon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-zacht); color: var(--accent); }
.principe-icoon .ico { width: 24px; height: 24px; }
.principe h3 { margin: 14px 0 6px; font-size: 1.12rem; }
.principe p { margin: 0; color: var(--inkt-zacht); font-size: .96rem; }

.kring { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 32px; align-items: center; background: linear-gradient(135deg, var(--accent-zacht), var(--bg-kaart)); border: 1px solid var(--lijn); border-radius: 28px; padding: 34px clamp(20px, 4vw, 44px); }
.kring h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .4em; }
.kring p:last-child { margin: 0; color: var(--inkt-zacht); }
.kring-beeld { margin: 0; }
.kring-beeld img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: var(--schaduw); }
@media (max-width: 760px) { .kring { grid-template-columns: 1fr; } }

.voorpagina .blok-disclaimer { margin-top: 44px; }
.voorpagina .blok-disclaimer .disclaimer { margin-top: 0; }
.voorpagina .tegels { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }