/* ============================================================================
   SOLVO — "Het levende kasboek" (site v2, 2026-07)
   Eén ontwerptaal: inkt op groen-gelinieerd papier. Fraunces (kop, zetwerk),
   Libre Franklin (lopende tekst), IBM Plex Mono (cijfers, annotaties).
   Geen frameworks, geen build-stap. Beweging is choreografie, geen circus:
   inkt die zichzelf schrijft, een stempel die neerkomt, cijfers die optellen —
   en alles respecteert prefers-reduced-motion.
   Kleurregel: papier + inkt + grootboekgroen; zegelrood ALLEEN voor het
   stempel-/kantlijnmoment. Nooit als decoratie.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  color-scheme: light;

  /* papier & inkt */
  --paper:      #FBFAF7;   /* ivoor — de bladzijde */
  --paper-2:    #F4F0E7;   /* verweerd papier — afwisselende secties */
  --wash:       #ECF2ED;   /* groene waterrand — zachte accentvlakken */
  --ink:        #1C2420;   /* groenzwart — de pen */
  --ink-soft:   #3A423D;
  --green:      #275E43;   /* grootboekgroen — de annotatie */
  --green-deep: #1B4732;
  --seal:       #A63D2F;   /* zegelrood — ALLEEN stempel & kantlijn */
  --hint:       #6C6558;   /* AA op --paper-2 */
  --line:       #E2DDD0;   /* haarlijn */
  --rule:       #CBDFD2;   /* kasboek-liniëring */

  /* v3 — "drie inkten en één map": groen schrijft Solvo, blauw tekent de ondernemer,
     zegelrood legt vast (exclusief stempel), manilla bewaart. Kleur-inflatie is de dood
     van dit ontwerp — deze zes tokens en verder NIETS. */
  --blauw:      #24558A;   /* vulpenblauw — de hand van de ondernemer. VERBOD: nooit op de
                              .inkt-band, nooit als link/knop, nooit liniëring, nooit lopende tekst */
  --blauw-diep: #1B4066;   /* alleen donkere partner/stroke van blauwe figuren */
  --blauw-wash: #E9EFF5;   /* bankafschrift-machinepapier — alleen kleine componenten,
                              nooit sectie-achtergrond (.tint/.wasje blijven de enige twee) */
  --blauw-lijn: #C7D6E4;   /* haarlijn BINNEN een afschrift-strookje; nooit in .kasboek */
  --manilla:    #E8DCC0;   /* dossiermap-karton — gidsen-koppen en ruiters. VERBOD: nooit
                              achter zegelrood, nooit paginabreed */
  --oker:       #6B561C;   /* etiket-inkt — UITSLUITEND mono-kapitalen op/bij manilla */

  --font-kop:   "Fraunces", Georgia, serif;
  --font-tekst: "Libre Franklin", system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1140px;
  --wrap-smal: 760px;

  --sh-paper: 0 1px 2px rgba(28,36,32,.05), 0 8px 28px -12px rgba(28,36,32,.18);
  --sh-lift:  0 2px 4px rgba(28,36,32,.06), 0 18px 44px -16px rgba(28,36,32,.26);

  --t-slow: 700ms cubic-bezier(.22,1,.36,1);
  --t-med:  420ms cubic-bezier(.22,1,.36,1);
  --t-fast: 180ms ease;
}

/* ---- 2. Reset & basis ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* papierkorrel — getegelde ruis in de body-achtergrond zelf: geen extra
   composietlaag, geen blend-mode (een fixed multiply-laag maakt scrollen en
   screenshots traag). fill-opacity zit in de SVG gebakken. */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .14 0 0 0 0 .12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--green); text-decoration-color: color-mix(in srgb, var(--green) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--green); }
::selection { background: var(--green); color: var(--paper); }

h1, h2, h3, h4 { font-family: var(--font-kop); font-weight: 540; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.mono { font-family: var(--font-mono); }

.wrap       { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.wrap-smal  { max-width: var(--wrap-smal); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* ---- 3. Typografische stemmen ------------------------------------------- */
.kicker {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--green);
  display: block; margin-bottom: 14px;
}
.display {
  font-size: clamp(2.9rem, 7.2vw, 5.4rem);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.02em; line-height: 1.02;
}
.display em, .titel em { font-style: italic; color: var(--green); }
.titel {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-variation-settings: "opsz" 72;
}
.lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); max-width: 34em; }
.muted { color: var(--hint); }
.klein { font-size: .85rem; }

/* scotch rule: dun + dik — het zetsel van een jaarrekening */
.rule-head { border: 0; border-top: 1px solid var(--ink); position: relative; margin: 0 0 26px; }
.rule-head::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 3px solid var(--ink); }

/* marge-annotatie: groene pen in de kantlijn */
.marge {
  font-family: var(--font-kop); font-style: italic; color: var(--green);
  font-size: 1.05rem; line-height: 1.4;
}
.marge::before { content: "— "; }
/* de regel: de marge is GROEN als Solvo spreekt, BLAUW als de ondernemer spreekt */
.marge--jij { color: var(--blauw); }

/* bankafschrift-strookje: machinepapier waar de bankregel op binnenkomt (blauw komt binnen,
   groen boekt, rood stempelt). Hergebruikt .schrijf/--d zodat reduced-motion/no-JS gedekt zijn. */
.afschrift {
  background: var(--blauw-wash); border: 1px solid var(--blauw-lijn); border-radius: 3px;
  font-family: var(--font-mono); font-size: .8rem; color: var(--blauw);
  padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between;
}

/* ---- 4. Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-word { font-family: var(--font-kop); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a {
  color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 500;
  position: relative; padding-block: 4px;
}
/* inkt-onderstreping die zichzelf tekent */
.nav a:not(.nav-login):not(.nav-cta):not(.nav-lang)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--green); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-fast);
}
.nav a:not(.nav-login):not(.nav-cta):not(.nav-lang):hover::after,
.nav a[aria-current]:not(.nav-lang)::after { transform: scaleX(1); }
/* v3: de proef-CTA is de enige gevulde knop in de kop; Inloggen demoteert naar tekstlink */
.nav-cta {
  background: var(--green); color: #fff !important; border-radius: 999px;
  padding: 8px 20px !important; transition: background var(--t-fast);
}
.nav-cta:hover { background: var(--green-deep); }
.nav-login { color: var(--hint) !important; }
.nav-login:hover { color: var(--ink) !important; text-decoration: underline; }
/* taalwissel: leest als een annotatiestempeltje, geen nieuwe kleur */
.nav-lang {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em;
  border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px !important;
  text-decoration: none;
}
.nav-lang:hover { border-color: var(--green); color: var(--green) !important; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 1.3rem; padding: 4px 12px; cursor: pointer; color: var(--ink); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 0 16px;
  }
  /* inklappen alleen mét JS — zonder JS is het menu een gewone gestapelde lijst */
  .js .nav { display: none; }
  .js .nav.open { display: flex; }
  html:not(.js) .nav { display: flex; position: static; }
  html:not(.js) .nav-toggle { display: none; }
  .nav a { padding: 12px clamp(20px,4vw,40px); }
  .nav-cta, .nav-login, .nav-lang { margin: 10px clamp(20px,4vw,40px) 0; text-align: center; }
}

/* ---- 5. Knoppen ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-tekst); font-weight: 600; font-size: 1rem;
  padding: 14px 28px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid var(--ink); color: var(--ink); background: transparent;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-paper); }
.btn-vol { background: var(--ink); color: var(--paper); }
.btn-vol:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--paper); }
.btn-groen { background: var(--green); border-color: var(--green); color: #fff; }
.btn-groen:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn .pijl { transition: transform var(--t-fast); }
.btn:hover .pijl { transform: translateX(4px); }

/* ---- 6. Secties & ritme --------------------------------------------------- */
.sectie { padding-block: clamp(64px, 9vw, 120px); }
.sectie-strak { padding-block: clamp(44px, 6vw, 72px); }
.tint  { background: var(--paper-2); }
.wasje { background: var(--paper-2); }   /* beige afwisselband (was groene wash) — de donkere .inkt/.cta-band breekt het op */
.inkt  { background: var(--ink); color: var(--paper); }
.inkt .kicker { color: var(--rule); }
.inkt a { color: var(--rule); }
.inkt .muted { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.sectie-kop { max-width: 720px; margin-bottom: clamp(30px, 4vw, 52px); }

/* ---- 7. Het kasboek (de kern-illustratie) --------------------------------
   Groen-gelinieerd papier met de zegelrode kantlijn — het echte kasboek. */
.kasboek {
  background:
    linear-gradient(to right, transparent 56px, var(--seal) 56px, var(--seal) 57.5px, transparent 57.5px),
    repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 36px),
    linear-gradient(#FDFCF9, #FAF8F2);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--sh-paper);
  position: relative;
  overflow: hidden;
}
.kasboek-kop {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--hint);
  padding: 9px 18px 8px 74px; border-bottom: 1.5px solid var(--ink);
  display: flex; justify-content: space-between; gap: 12px;
}
.kasboek-regel {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px;
  padding: 6px 18px 5px 74px; min-height: 36px;
  font-size: .95rem;
}
.kasboek-regel .om  { font-family: var(--font-kop); font-style: italic; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kasboek-regel .bedrag { font-family: var(--font-mono); font-size: .9rem; font-variant-numeric: tabular-nums; }
.kasboek-regel .bedrag.bij { color: var(--green); }
.kasboek-som {
  border-top: 1px solid var(--ink); position: relative; margin-top: 4px;
  padding: 8px 18px 10px 74px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: .95rem;
}
.kasboek-som::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 3px double var(--ink); }

/* de stempel — zegelrood, alleen op het GEBOEKT-moment */
.stempel {
  display: inline-block; font-family: var(--font-mono); font-weight: 500;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--seal); border: 2px solid var(--seal); border-radius: 4px;
  padding: 3px 10px; transform: rotate(-6deg);
}
/* de verborgen beginstand van de stempel staat verderop, gegate op html.js —
   zonder JS moet elke stempel gewoon zichtbaar zijn (ook op de 404) */
.is-in .stempel-in, .stempel-in.is-in {
  opacity: 1; transform: rotate(-6deg) scale(1); filter: blur(0);
  transition: transform 320ms cubic-bezier(.34,1.56,.64,1), opacity 200ms ease, filter 200ms ease;
  transition-delay: var(--d, 0ms);
}

/* inkt die zichzelf schrijft: JS meet de padlengte en zet --len.
   NB: alle verborgen BEGINSTANDEN zijn gegate op html.js (inline head-script) —
   zonder JS is elke pagina meteen volledig zichtbaar, geen verstopte h1's/CTA's. */
.js .ink [data-ink] { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); fill: none; }
.is-in [data-ink], [data-ink].is-in {
  animation: ink-schrijft 1100ms cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes ink-schrijft { to { stroke-dashoffset: 0; } }

/* handschrift-regel in het kasboek: verschijnt alsof hij geschreven wordt */
.js .schrijf { opacity: 0; clip-path: inset(0 100% 0 0); }
.is-in .schrijf, .schrijf.is-in {
  opacity: 1; clip-path: inset(0 -2% 0 0);
  transition: clip-path 900ms cubic-bezier(.4,0,.2,1), opacity 120ms ease;
  transition-delay: var(--d, 0ms);
}

/* de stempel-beginstand ook alleen mét JS */
.js .stempel-in { opacity: 0; transform: rotate(-6deg) scale(2.6); filter: blur(2px); }

/* ---- 8. Onthulling & choreografie ---------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow), transform var(--t-slow); transition-delay: var(--d, 0ms); }
.js [data-reveal="links"]  { transform: translateX(-26px); }
.js [data-reveal="rechts"] { transform: translateX(26px); }
[data-reveal].is-in { opacity: 1; transform: none; }
/* gestaffelde kinderen */
.js [data-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow), transform var(--t-slow); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > :nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-in > :nth-child(2) { transition-delay: 90ms; }
[data-stagger].is-in > :nth-child(3) { transition-delay: 180ms; }
[data-stagger].is-in > :nth-child(4) { transition-delay: 270ms; }
[data-stagger].is-in > :nth-child(5) { transition-delay: 360ms; }
[data-stagger].is-in > :nth-child(6) { transition-delay: 450ms; }
/* drukkersregel die zichzelf trekt */
.js [data-rule] { transform: scaleX(0); transform-origin: left center; transition: transform 900ms cubic-bezier(.22,1,.36,1); }
[data-rule].is-in, .is-in [data-rule] { transform: scaleX(1); }

/* ---- 9. Held -------------------------------------------------------------- */
.held { position: relative; padding-block: clamp(56px, 8vw, 104px) clamp(72px, 9vw, 128px); overflow: hidden; }
.held-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.held-acties { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.held-noot { margin-top: 18px; font-size: .85rem; color: var(--hint); }
.held .kasboek { transform: rotate(.6deg); }
@media (max-width: 880px) { .held-grid { grid-template-columns: 1fr; } .held .kasboek { transform: none; } }

/* tweekoloms redactionele grid (definitie, vertrouwen) — klapt op mobiel */
.def-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 880px) { .def-grid { grid-template-columns: 1fr; } }

/* ---- 10. Woordenboek-definitie -------------------------------------------- */
.definitie {
  font-family: var(--font-kop); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.4;
  max-width: 30em; margin: 0;
}
.definitie .lemma { font-weight: 600; letter-spacing: .01em; }
.definitie .klasse { font-style: italic; color: var(--hint); font-size: .65em; margin-inline: .35em; }
.definitie .betekenis em { color: var(--green); }

/* ---- 11. Ambacht (het proces) ---------------------------------------------- */
.ambacht { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 34px); counter-reset: stap; }
.stap {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 30px 26px; position: relative; box-shadow: var(--sh-paper);
}
.stap::before {
  counter-increment: stap; content: counter(stap, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .15em; color: var(--green);
}
.stap h3 { font-size: 1.35rem; margin-top: 10px; }
.stap p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.stap .ink { color: var(--green); margin-top: 16px; display: block; }
@media (max-width: 880px) { .ambacht { grid-template-columns: 1fr; } }
/* de handtekening-stap (de mens) op kasboekpapier */
.stap-mens { background:
  linear-gradient(to right, transparent 30px, var(--seal) 30px, var(--seal) 31px, transparent 31px),
  repeating-linear-gradient(to bottom, transparent 0 30px, var(--rule) 30px 31px),
  #FDFCF9; }

/* ---- 12. Statement-cijfers -------------------------------------------------- */
.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
.cijfer .waarde {
  font-family: var(--font-kop); font-variation-settings: "opsz" 144;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 560; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cijfer .waarde .eenheid { font-size: .4em; color: var(--green); font-style: italic; }
.inkt .cijfer .waarde .eenheid { color: var(--rule); }
.cijfer .label { margin-top: 8px; font-size: .9rem; color: var(--hint); max-width: 18em; }
.inkt .cijfer .label { color: color-mix(in srgb, var(--paper) 62%, transparent); }
@media (max-width: 880px) { .cijfers { grid-template-columns: repeat(2, 1fr); } }

/* ---- 13. Dienstentegels ------------------------------------------------------ */
.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.tegel {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 26px 24px 22px; box-shadow: var(--sh-paper);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.tegel:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--green); }
.tegel .ink { color: var(--green); height: 44px; display: block; }
.tegel h3 { font-size: 1.2rem; margin: 14px 0 6px; }
.tegel p { font-size: .92rem; color: var(--ink-soft); margin: 0 0 12px; }
.tegel .meer { font-size: .88rem; font-weight: 600; color: var(--green); position: relative; }
.tegel .meer::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast); }
.tegel:hover .meer::after { transform: scaleX(1); }
@media (max-width: 880px) { .tegels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tegels { grid-template-columns: 1fr; } }

/* ---- 14. Persona's / kaarten ------------------------------------------------- */
.kaarten { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.kaart {
  display: block; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  padding: 24px 22px; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.kaart:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--green); }
.kaart h3 { font-size: 1.15rem; }
.kaart p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.kaart .marge { display: block; margin-top: 12px; font-size: .95rem; }
@media (max-width: 880px) { .kaarten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kaarten { grid-template-columns: 1fr; } }

/* ---- 15. FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 20px 4px; font-family: var(--font-kop); font-size: 1.25rem; font-weight: 540;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--green); font-size: 1.3rem; transition: transform var(--t-fast); flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .antwoord { padding: 0 4px 22px; color: var(--ink-soft); max-width: 62ch; }

/* ---- 16. Inkt-CTA-band ---------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .titel { color: var(--paper); }
.cta-band .btn-stempel {
  background: var(--paper); border-color: var(--paper); color: var(--ink);
  font-weight: 700; letter-spacing: .02em;
}
.cta-band .btn-stempel:hover { background: var(--rule); border-color: var(--rule); transform: translateY(-1px) rotate(-1deg); }

/* ---- 17. Footer ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--ink); position: relative; padding-block: 40px 34px; background: var(--paper); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 3px double var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
.site-footer h4 { font-size: .8rem; font-family: var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--hint); font-weight: 500; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--ink); text-decoration: none; font-size: .95rem; }
.site-footer a:hover { color: var(--green); text-decoration: underline; }
.footer-slot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .82rem; color: var(--hint); }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---- 18. Gidsen (kennisbank) ------------------------------------------------------- */
.gids-lijst { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
/* v3: de gids als dossiermap — manilla karton met een ruiter-tab (één materiaal voor
   alle kaarten; géén roterende kleuren per gids — archief, geen catalogus) */
.gids-kaart {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper); overflow: visible;
  position: relative;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.gids-kaart::before { /* de ruiter van de map */
  content: ""; position: absolute; top: -9px; left: 22px; width: 64px; height: 10px;
  background: var(--manilla); border: 1px solid color-mix(in srgb, var(--oker) 30%, var(--manilla));
  border-bottom: none; border-radius: 5px 5px 0 0;
}
.gids-kaart:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); border-color: var(--green); }
.gids-kop {
  background: repeating-linear-gradient(to bottom, transparent 0 26px,
              color-mix(in srgb, var(--oker) 22%, transparent) 26px 27px), var(--manilla);
  border-radius: 7px 7px 0 0;
  padding: 22px; font-family: var(--font-kop); font-style: italic; color: var(--ink);
  font-size: 1.05rem; min-height: 96px; display: flex; align-items: flex-end;
}
.gids-body { padding: 18px 22px 22px; }
.gids-body h3 { font-size: 1.15rem; margin-bottom: 6px; }
.gids-body p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.gids-body .leestijd { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oker); }
@media (max-width: 880px) { .gids-lijst { grid-template-columns: 1fr; } }

/* artikelpagina */
.artikel { max-width: 68ch; }
.artikel h2 { font-size: 1.7rem; margin-top: 1.6em; }
.artikel h3 { font-size: 1.25rem; margin-top: 1.4em; }
.artikel .intro { font-size: 1.15rem; color: var(--ink-soft); }
.artikel blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--green); font-family: var(--font-kop); font-style: italic; font-size: 1.2rem; color: var(--green-deep); }
.artikel blockquote p { margin: 0; }
/* blauw citaat = de stem van de ondernemer (max één per pagina) */
.artikel blockquote.jij, blockquote.jij { border-left-color: var(--blauw); color: var(--blauw-diep); }
.artikel table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1.4em 0; }
.artikel th, .artikel td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.artikel th { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hint); }

/* ---- 19. Prijzen ---------------------------------------------------------------------- */
.prijs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.prijs-kaart {
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  padding: 30px 28px; display: flex; flex-direction: column; box-shadow: var(--sh-paper);
  position: relative;
}
.prijs-kaart.aanbevolen { border: 1.5px solid var(--green); box-shadow: var(--sh-lift); }
.prijs-badge {
  position: absolute; top: -13px; left: 24px; background: var(--green); color: #fff;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 14px;
}
.prijs { font-family: var(--font-kop); font-size: 3rem; font-weight: 560; line-height: 1; font-variant-numeric: tabular-nums; }
.prijs .per { font-size: .95rem; font-family: var(--font-tekst); font-weight: 400; color: var(--hint); }
.prijs-kaart ul { list-style: none; padding: 0; margin: 18px 0 26px; flex: 1; }
.prijs-kaart li { padding: 7px 0 7px 26px; position: relative; font-size: .93rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.prijs-kaart li::before { content: "✓" / ""; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
@media (max-width: 880px) { .prijs-grid { grid-template-columns: 1fr; } }

/* ---- 20. Formulieren -------------------------------------------------------------------- */
.veld { display: block; margin-bottom: 16px; }
.veld span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.veld input, .veld textarea, .veld select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.veld input:focus, .veld textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }

/* ---- 21. Toegankelijkheid & beweging-uit -------------------------------------------------- */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal], [data-stagger] > *, [data-rule], .stempel-in, .schrijf { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ink [data-ink], [data-ink] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ---- 22. Bladzijde omslaan (cross-document view transitions) ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}

/* ---- 23. Drukwerk — het merk op papier ------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .nav-toggle, .btn, .cta-band, .skip-link { display: none !important; }
  /* een verse bezoeker die meteen print mag géén lege secties krijgen: alle
     animatie-beginstanden geforceerd zichtbaar */
  [data-reveal], [data-stagger] > *, [data-rule], .stempel-in, .schrijf {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .ink [data-ink], [data-ink] { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  body { background: #fff; color: #000; }
  .sectie, .sectie-strak, .held { padding-block: 18px; }
  .kasboek, .kaart, .gids-kaart, .prijs-kaart, .stap { break-inside: avoid; }
  .inkt { background: #fff !important; color: #000 !important; }
  /* linkdoelen zichtbaar in artikelen (gidsen op papier blijven bruikbaar) */
  .artikel a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #444; }
}