/* Hallmark · shape: kept · genre: editorial · theme: brand · redesign: restyle
 * paper: #FCFDFA · accent: #2F4A1A · display: Century Gothic (Questrial) · body: Century Gothic (Questrial) · hero: kept · nav: kept · footer: kept · signature: kept, the invoice ledger rows (Omschrijving, Bedrag) from the client's own invoice
 * dropped: topic pills above titles and on cards (eyebrows, 54); hero tagline above the headline (eyebrow, 54; the slogan stays under the logo); arrows after link text (63)
 * axes: white/geometric-sans/forest · posture: kept · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: restyle only, layout and words kept · weakest: home word count (58) is a note at restyle depth, left to the owner */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: #FCFDFA; --color-paper-2: #F7FAF4; --color-paper-3: #E3EFD9;
  --color-ink: #1F241B; --color-ink-2: #2F4A1A; --color-muted: #4B5246;
  --color-rule: #DCE7D2; --color-rule-strong: #7DB352; --color-accent-soft: #D3E7C2; --color-accent-deep: #223812; --color-shadow: rgb(47 74 26 / 0.18);
  --color-accent: #2F4A1A; --color-accent-ink: #FBFDF8; --color-focus: #2F4A1A;
  --font-display: "Century Gothic", "Questrial", "Avant Garde", Futura, ui-sans-serif, sans-serif; --font-body: "Century Gothic", "Questrial", "Avant Garde", Futura, ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-body);
  --radius-card: 8px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.02em;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline:auto; padding-inline:var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap:var(--space-3xl); --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap:var(--space-2xl); --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* ===== Huisstijl, afgeleid van de factuur ===== */
:root{
  --forest:var(--color-accent);      /* krachtig donkergroen: kopjes en knoppen */
  --forest-dark:var(--color-accent-deep);
  --leaf:var(--color-rule-strong);        /* goed zichtbare lijnen, zoals op de factuur */
  --row:var(--color-paper-3);         /* lichtgroene tabelrij, als op de factuur */
  --mint:var(--color-paper-2);        /* sectie-achtergrond, bijna wit */
  --paper:var(--color-paper);
  --ink:var(--color-ink);         /* bijna zwarte tekst voor maximale leesbaarheid */
  --muted:var(--color-muted);       /* donkerder grijs voor bijteksten */
  --line:var(--color-rule);
  --font:var(--font-body);
  color-scheme:light only;
}
*{box-sizing:border-box;margin:0;padding:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--space-2xl) + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--font);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6}
img,svg{max-width:100%}
a{color:var(--forest)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-lg)}
h1,h2,h3{color:var(--forest);font-weight:700;line-height:1.15;letter-spacing:0}
h1{font-size:clamp(2.3rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:.4em}
h3{font-size:1.2rem}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
section{padding:var(--space-3xl) 0}
.btn{display:inline-block;font-family:inherit;font-size:1rem;font-weight:700;text-decoration:none;padding:var(--space-md) var(--space-lg);border-radius:999px;border:2px solid var(--forest);cursor:pointer}
.btn-primary{background:var(--forest);color:var(--paper)}
.btn-primary:hover{background:var(--forest-dark);border-color:var(--forest-dark)}
.btn-ghost{background:transparent;color:var(--forest)}
.btn-ghost:hover{background:var(--row)}

/* ===== Header ===== */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--space-lg)}
.brand{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--forest);font-weight:700;font-size:1.2rem}
.brand-logo{height:56px;width:auto;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text small{font-size:.78rem;font-weight:400;font-style:italic;color:var(--muted);letter-spacing:0}
.nav ul{display:flex;gap:var(--space-lg);list-style:none}
.nav ul a{text-decoration:none;color:var(--ink)}
.nav ul a:hover{color:var(--forest)}
.menu-btn{display:none;background:none;border:0;color:var(--forest);font:inherit;font-size:1.6rem;cursor:pointer}
@media (max-width:860px){
  .nav ul{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line)}
  .nav ul.open{display:flex}
  .nav ul a{display:block;padding:var(--space-md) var(--space-lg)}
  .menu-btn{display:block}
  .nav .btn{display:none}
}

/* ===== Hero ===== */
.hero{padding:var(--space-2xl) 0 var(--space-3xl)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-2xl);align-items:center}
.tagline{font-style:italic;color:var(--muted);font-size:1.1rem;margin-bottom:var(--space-md)}
.checks{list-style:none;margin:var(--space-lg) 0 var(--space-xl);display:grid;gap:var(--space-sm)}
.checks li{padding-left:var(--space-lg);position:relative}
.checks li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--row);box-shadow:inset 0 0 0 2px var(--leaf)}
.checks li::after{content:"";position:absolute;left:6px;top:.62em;width:6px;height:3px;border-left:2px solid var(--forest);border-bottom:2px solid var(--forest);transform:rotate(-45deg)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr)}}

/* Telefoon met chat */
.phone{max-width:360px;margin:0 auto;border:8px solid var(--color-accent);border-radius:36px;overflow:hidden;background:var(--mint);box-shadow:0 20px 40px -24px var(--color-shadow)}
.phone-top{background:var(--color-accent);color:var(--color-paper);padding:var(--space-sm) var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--color-paper);display:grid;place-items:center}
.phone-top small{display:block;opacity:.8;font-size:.75rem}
.chat{padding:var(--space-md) var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs);font-size:.88rem;min-height:420px}
.msg{max-width:82%;padding:var(--space-xs) var(--space-sm);border-radius:14px;line-height:1.4}
.in{background:var(--paper);box-shadow:0 1px 0 var(--line);align-self:flex-start;border-top-left-radius:4px}
.out{background:var(--color-accent-soft);color:var(--color-ink);align-self:flex-end;border-top-right-radius:4px}
.msg time{display:block;text-align:right;font-size:.7rem;opacity:.6}
.receipt{background:var(--color-paper);color:var(--color-ink);font-size:.75rem;padding:var(--space-xs) var(--space-sm);border:1px dashed var(--color-rule-strong);width:150px}
.receipt b{display:block;color:var(--color-accent)}
.mini-invoice{background:var(--color-paper);color:var(--color-ink);border-radius:10px;padding:var(--space-sm);font-size:.78rem;align-self:flex-start;width:84%}
.mini-invoice strong{color:var(--color-accent)}
.mini-invoice .row{display:flex;justify-content:space-between;border-bottom:1px solid var(--color-rule-strong);padding:var(--space-2xs) 0}
.mini-invoice .row.mint{background:var(--color-paper-3)}

/* ===== Factuurtabel-stijl, het herkenningspunt ===== */
.ledger{width:100%;border-collapse:collapse;font-size:1rem}
.ledger th{font-weight:400;text-align:left;color:var(--forest);border-bottom:2px solid var(--leaf);padding:var(--space-xs) var(--space-sm)}
.ledger th:last-child,.ledger td:last-child{text-align:right;white-space:nowrap}
.ledger td{padding:var(--space-sm) var(--space-sm);border-bottom:1px solid var(--leaf);font-weight:700;color:var(--forest)}
.ledger td + td{border-left:1px solid var(--leaf);font-weight:400;color:var(--muted)}
.ledger tr.mint td{background:var(--row)}
.ledger tfoot td{border-bottom:0;font-size:1.1rem;color:var(--forest);font-weight:700}
.ledger tfoot td + td{border-left:0;color:var(--forest);font-weight:700}

/* ===== Stappen ===== */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);margin-top:var(--space-xl);counter-reset:s}
.steps li{border-top:3px solid var(--leaf);padding-top:var(--space-lg);counter-increment:s}
.steps li::before{content:"Stap " counter(s);display:block;color:var(--forest);font-weight:700;margin-bottom:var(--space-xs)}
.steps p{color:var(--muted);margin-top:var(--space-xs)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* ===== Meedenken ===== */
.tinted{background:var(--mint)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:start}
.split .ledger{background:var(--paper)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ===== Overstappen ===== */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg) var(--space-xl);margin-top:var(--space-xl)}
.quotes dt{font-weight:700;color:var(--forest);font-size:1.1rem}
.quotes dd{color:var(--muted);margin-top:var(--space-2xs)}
@media (max-width:700px){.quotes{grid-template-columns:1fr}}
.callout{margin-top:var(--space-xl);border:1px solid var(--leaf);border-radius:var(--radius-card);padding:var(--space-2xs) 0 var(--space-2xs) var(--space-lg);max-width:65ch}

/* ===== Pakketten ===== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-top:var(--space-xl)}
.plan{border:1px solid var(--leaf);border-radius:4px;padding:var(--space-lg);display:flex;flex-direction:column;background:var(--paper)}
.plan.featured{border:2px solid var(--forest);position:relative}
.plan .badge{position:absolute;top:-13px;left:24px;background:var(--forest);color:var(--paper);font-size:.8rem;padding:var(--space-2xs) var(--space-sm);border-radius:999px}
.plan .for{color:var(--muted);font-size:.92rem}
.price{font-variant-numeric:tabular-nums;font-size:2.6rem;font-weight:700;color:var(--forest);margin:var(--space-md) 0 var(--space-3xs)}
.price small{font-size:.95rem;font-weight:400;color:var(--muted)}
.plan ul{list-style:none;margin:var(--space-md) 0 var(--space-lg);flex:1}
.plan li{padding:var(--space-xs) 0;border-bottom:1px solid var(--line);font-size:.95rem}
.plan .btn{text-align:center}
@media (max-width:960px){.plans{grid-template-columns:1fr}}

/* ===== Rekenhulp (btw) ===== */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-top:var(--space-xl);align-items:start}
.field{margin-bottom:var(--space-lg)}
.field label{display:block;font-weight:700;color:var(--forest);margin-bottom:var(--space-xs)}
.field input[type=number]{width:100%;font:inherit;font-size:1.3rem;padding:var(--space-sm) var(--space-md);border:2px solid var(--leaf);border-radius:4px;background:var(--paper);color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.seg input{position:absolute;opacity:0}
.seg label{display:inline-block;padding:var(--space-xs) var(--space-md);border:2px solid var(--leaf);border-radius:999px;cursor:pointer;font-weight:400;color:var(--ink)}
.seg input:checked + label{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.seg input:focus-visible + label{outline:3px solid var(--leaf);outline-offset:2px}
@media (max-width:860px){.calc{grid-template-columns:1fr}}


/* ===== Tabs en extra velden rekenhulpen ===== */
.tabs{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xl);border-bottom:2px solid var(--leaf)}
.tabs button{font:inherit;font-weight:700;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:calc(-1 * var(--space-3xs));padding:var(--space-sm) var(--space-md);color:var(--muted);cursor:pointer}
.tabs button[aria-selected=true]{color:var(--forest);border-bottom-color:var(--forest)}
.tabs button:hover{color:var(--forest)}
.calc[hidden]{display:none}
.range{width:100%;margin-top:var(--space-md);accent-color:var(--forest)}
.check{display:block;padding:var(--space-sm) 0 var(--space-sm) var(--space-xl);position:relative;cursor:pointer;color:var(--ink)}
.check input{position:absolute;left:0;top:15px;width:20px;height:20px;accent-color:var(--forest)}
.check small{display:block;color:var(--muted);font-size:.88rem}
.flabel{display:block;font-weight:700;color:var(--forest);margin-bottom:var(--space-xs)}
.note{color:var(--muted);font-size:.9rem;max-width:50ch}
.ledger tfoot tr + tr td{font-size:1.4rem}

/* ===== Kennisbank ===== */
.kb{margin-top:var(--space-xl);border-top:2px solid var(--leaf)}
.kb details{border-bottom:1px solid var(--leaf)}
.kb summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:150px 1fr auto;gap:var(--space-md);align-items:baseline;padding:var(--space-md) var(--space-2xs)}
.kb summary::-webkit-details-marker{display:none}
.kb .cat{color:var(--muted);font-size:.9rem}
.kb .title{font-weight:700;color:var(--forest);font-size:1.1rem}
.kb .plus{color:var(--forest);font-size:1.4rem;line-height:1;transition:transform .2s}
.kb details[open] .plus{transform:rotate(45deg)}
.kb details[open] summary{background:var(--row)}
.kb .body{padding:var(--space-xs) var(--space-2xs) var(--space-lg) var(--space-4xl);color:var(--ink)}
.kb .body > p,.kb .body > ul{max-width:65ch}
.kb .body p,.kb .body ul{margin-bottom:var(--space-sm)}
.kb .body ul{padding-left:var(--space-lg)}
@media (max-width:700px){.kb summary{grid-template-columns:1fr auto}.kb .cat{grid-column:1/-1}.kb .body{padding-left:var(--space-2xs)}}


/* ===== Rekenhulpen in de kennisbank ===== */
.mini-calc{margin:var(--space-lg) 0 var(--space-xs);padding:var(--space-lg);border:1px solid var(--leaf);border-radius:4px;background:var(--mint)}
.mini-calc h3{margin-bottom:var(--space-2xs)}
.mini-calc .calc{margin-top:var(--space-md);gap:var(--space-lg)}
.mini-calc .ledger{background:var(--paper)}
.kb .body .mini-calc{margin-left:0}
.hint{display:block;color:var(--muted);font-size:.85rem;margin-top:var(--space-xs)}
.verdict{margin-top:var(--space-md);font-weight:700;color:var(--forest)}
.more-calcs{margin-top:var(--space-xl)}
.more-calcs ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-top:var(--space-sm)}
.more-calcs li{border-top:3px solid var(--leaf);padding-top:var(--space-sm)}
.more-calcs a{font-weight:700;text-decoration:none}
.more-calcs a:hover{text-decoration:underline}
.more-calcs small{display:block;color:var(--muted)}
@media (max-width:860px){.more-calcs ul{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.kb .body{max-width:none}}

/* ===== FAQ ===== */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--space-2xl)}
.faq details{border-bottom:1px solid var(--leaf);padding:var(--space-md) 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--forest)}
.faq p{margin-top:var(--space-sm);color:var(--muted);max-width:62ch}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}

/* ===== Contact ===== */
.contact-box{max-width:640px}
.contact-box textarea{width:100%;font:inherit;padding:var(--space-md);border:2px solid var(--leaf);border-radius:4px;min-height:130px;margin:var(--space-md) 0;background:var(--paper);color:var(--ink);resize:vertical}

/* ===== Footer ===== */
footer{background:var(--mint);color:var(--ink);border-top:1px solid var(--line);padding:var(--space-2xl) 0 var(--space-xl);font-size:.95rem}
footer a{color:var(--forest);text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-xl)}
footer h4{font-size:1rem;margin-bottom:var(--space-sm);color:var(--forest)}
footer ul{list-style:none;display:grid;gap:var(--space-xs)}
.foot-bottom{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--line);color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;font-size:.85rem;opacity:.85}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ===== Meerdere pagina's ===== */
.nav ul a[aria-current="page"]{color:var(--forest);font-weight:700}
.page-hero{padding:var(--space-2xl) 0 var(--space-lg)}
.page-hero h1{font-size:clamp(2rem,4.2vw,3rem)}
.page-hero .lead{margin-top:var(--space-md)}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:var(--space-sm)}
.crumbs a{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}
.chips a{display:inline-block;padding:var(--space-xs) var(--space-md);border:2px solid var(--leaf);border-radius:999px;text-decoration:none;color:var(--ink)}
.chips a:hover{background:var(--row);border-color:var(--forest)}
.group{padding:var(--space-xl) 0 var(--space-xs);scroll-margin-top:var(--space-3xl)}
.group h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-md)}
.group-intro{color:var(--muted);max-width:62ch;margin-bottom:var(--space-xs)}
.kb-group .kb{margin-top:var(--space-md)}
.kb-group .kb summary{grid-template-columns:1fr auto}
.kb-group .kb .body{padding-left:var(--space-2xs)}
.kb details{scroll-margin-top:var(--space-3xl)}
.read-calc{margin-top:var(--space-xs)}
.read-calc a{display:inline-block;font-weight:700;text-decoration:none;border-bottom:2px solid var(--leaf);padding-bottom:var(--space-3xs)}
.read-calc a:hover{border-color:var(--forest)}
.search{margin-top:var(--space-lg);max-width:460px}
.search input{width:100%;font:inherit;padding:var(--space-sm) var(--space-md);border:2px solid var(--leaf);border-radius:999px;background:var(--paper);color:var(--ink)}
.no-results{display:none;color:var(--muted);margin-top:var(--space-lg)}
.calc-card{border:1px solid var(--leaf);border-radius:4px;background:var(--paper);padding:var(--space-lg);margin-top:var(--space-lg);scroll-margin-top:var(--space-3xl)}
.calc-card > h3{font-size:1.35rem}
.calc-card > .intro{color:var(--muted);max-width:62ch;margin-top:var(--space-2xs)}
.calc-card .calc{margin-top:var(--space-lg)}
.calc-card .mini-calc{border:0;padding:0;background:none;margin:0}
.calc-card .more{margin-top:var(--space-md)}
.calc-card:target{border-color:var(--forest);box-shadow:0 0 0 3px var(--row)}
.teaser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-top:var(--space-xl);list-style:none}
.teaser-grid li{border-top:3px solid var(--leaf);padding-top:var(--space-sm)}
.teaser-grid a{font-weight:700;text-decoration:none}
.teaser-grid a:hover{text-decoration:underline}
.teaser-grid small{display:block;color:var(--muted)}
.kb-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-top:var(--space-xl)}
.kb-teaser h3{font-size:1.05rem;border-bottom:2px solid var(--leaf);padding-bottom:var(--space-xs);margin-bottom:var(--space-xs)}
.kb-teaser ul{list-style:none;display:grid;gap:var(--space-xs)}
.kb-teaser a{text-decoration:none}
.kb-teaser a:hover{text-decoration:underline}
.section-cta{margin-top:var(--space-xl)}
@media (max-width:860px){.teaser-grid{grid-template-columns:1fr 1fr}.kb-teaser{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.teaser-grid,.kb-teaser{grid-template-columns:1fr}.calc-card{padding:var(--space-lg)}}

/* ===== Kaarten, artikelen en rekenhulppagina's ===== */
.topic-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-sm);margin-top:var(--space-xl)}
@media (max-width:1100px){.topic-nav{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.topic-nav{grid-template-columns:1fr 1fr}}
.topic-nav a{display:block;padding:var(--space-md);border:1px solid var(--leaf);border-radius:6px;text-decoration:none;background:var(--paper)}
.topic-nav a:hover{border-color:var(--forest);background:var(--row)}
.topic-nav strong{display:block;color:var(--forest)}
.topic-nav span{color:var(--muted);font-size:.88rem}
.topic{padding:var(--space-xl) 0 0;scroll-margin-top:var(--space-3xl)}
.topic-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-xs);border-bottom:2px solid var(--leaf);padding-bottom:var(--space-sm)}
.topic-head h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem)}
.topic-head p{color:var(--muted);margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);margin-top:var(--space-lg)}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-top:4px solid var(--leaf);border-radius:6px;padding:var(--space-lg);background:var(--paper);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.card:hover{border-color:var(--leaf);border-top-color:var(--forest);box-shadow:0 10px 24px -16px var(--color-shadow);transform:translateY(-2px)}
.card .tag{font-size:.8rem;color:var(--muted);letter-spacing:0}
.card h3{font-size:1.15rem;margin:var(--space-xs) 0 var(--space-xs);color:var(--forest)}
.card p{color:var(--muted);font-size:.95rem;flex:1}
.card .go{margin-top:var(--space-md);font-weight:700;color:var(--forest)}
.card .badge-calc{display:inline-block;margin-top:var(--space-sm);font-size:.8rem;color:var(--forest);background:var(--row);border-radius:999px;padding:var(--space-2xs) var(--space-sm);align-self:flex-start}
.cards[hidden],.topic[hidden],.card[hidden]{display:none}
@media (max-width:960px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

.article-hero{padding-bottom:var(--space-sm)}
.article-hero .tag{display:inline-block;font-size:.85rem;color:var(--forest);background:var(--row);border-radius:999px;padding:var(--space-2xs) var(--space-sm);margin-bottom:var(--space-md);text-decoration:none}
.meta{color:var(--muted);font-size:.92rem;margin-top:var(--space-sm)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-2xl);align-items:start;padding:var(--space-lg) 0 var(--space-2xl)}
.prose{font-size:1.06rem;max-width:68ch}
.prose p,.prose ul{margin-bottom:var(--space-md)}
.prose ul{padding-left:var(--space-lg)}
.prose li{margin-bottom:var(--space-xs)}
.calc-cta{margin-top:var(--space-lg);padding:var(--space-lg) var(--space-lg);border:1px solid var(--leaf);border-radius:6px;background:var(--mint)}
.calc-cta h3{font-size:1.1rem;margin-bottom:var(--space-xs)}
.calc-cta p{color:var(--muted);margin-bottom:var(--space-md)}
.side{position:sticky;top:96px;display:grid;gap:var(--space-lg)}
.side-box{border:1px solid var(--line);border-radius:6px;padding:var(--space-lg);background:var(--paper)}
.side-box h3{font-size:1rem;margin-bottom:var(--space-sm)}
.side-box ul{list-style:none;display:grid;gap:var(--space-xs)}
.side-box a{text-decoration:none}
.side-box a:hover{text-decoration:underline}
.side-box.ask{background:var(--mint);border-color:var(--leaf)}
.side-box.ask p{color:var(--muted);font-size:.95rem;margin-bottom:var(--space-md)}
@media (max-width:900px){.article-grid{grid-template-columns:1fr;gap:var(--space-xl)}.side{position:static}}
.calc-page .calc-card{margin-top:var(--space-xs)}
.more-section{padding:var(--space-2xl) 0}

/* ===== 2027 en jaarkeuze ===== */
.topic-nav a.new{border-color:var(--forest);background:var(--row)}
.topic-nav a.new strong::after{content:"Nieuw";margin-left:var(--space-xs);font-size:.7rem;font-weight:700;color:var(--paper);background:var(--forest);border-radius:999px;padding:var(--space-3xs) var(--space-xs);vertical-align:2px}
.topic.highlight .topic-head{border-bottom-color:var(--forest)}
.prose h3{font-size:1.2rem;margin:var(--space-lg) 0 var(--space-xs)}
.year-switch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--line)}
.year-switch .flabel{margin:0}
.year-note{color:var(--muted);font-size:.88rem;width:100%}

/* ===== Kaartknop, lichtgroen ===== */
.card .go{align-self:flex-start;display:inline-block;margin-top:var(--space-md);padding:var(--space-xs) var(--space-md);border-radius:999px;background:var(--row);color:var(--forest);font-size:.85rem;transition:background .15s}
.card:hover .go{background:var(--color-accent-soft)}
/* ===== Dienstpagina's ===== */
.plan-more{display:block;margin-top:var(--space-sm);text-align:center;font-size:.92rem;color:var(--forest)}
.price-box .price{font-size:2.2rem;font-weight:700;color:var(--forest);margin:var(--space-2xs) 0 var(--space-3xs)}
.price-box .price small{font-size:.9rem;font-weight:400;color:var(--muted)}
.price-box p{color:var(--muted);font-size:.95rem;margin-bottom:var(--space-md)}
.prose ul.inc{list-style:none;padding-left:0}
.prose ul.inc li{padding:var(--space-sm) 0 var(--space-sm) var(--space-lg);border-bottom:1px solid var(--line);position:relative;margin:0}
.prose ul.inc li::before{content:"";position:absolute;left:0;top:15px;width:16px;height:16px;border-radius:50%;background:var(--row);box-shadow:inset 0 0 0 2px var(--leaf)}
.related{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-sm)}
.related a{display:inline-block;padding:var(--space-xs) var(--space-md);border:1px solid var(--leaf);border-radius:999px;text-decoration:none;color:var(--forest);font-size:.95rem}
.related a:hover{background:var(--row)}
.faq-section .faq{max-width:760px}

/* ===== Hallmark restyle: states, focus, kopjes ===== */
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;transition:none}
.btn:active,.card:active .go,.seg label:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"],button:disabled{opacity:.5;cursor:not-allowed}
.btn{transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}
.card{transition:border-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.card .go{transition:background-color var(--dur-short) var(--ease-out)}
h1,h2,h3{overflow-wrap:break-word;min-width:0;letter-spacing:var(--tracking-display)}
.foot-h{font-family:var(--font-body);font-size:1rem;font-weight:700;margin:0 0 var(--space-sm);max-width:none;letter-spacing:0;line-height:1.3}
.plan .badge{position:static;display:inline-block;margin-top:var(--space-xs);align-self:flex-start}
.card .meta-topic{display:block;margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-muted)}
.prose h2.sub{font-size:1.2rem;line-height:1.25;max-width:40ch}
.calc-cta h2{font-size:1.1rem;line-height:1.25}