/* ==========================================================================
   SYB-website — één stylesheet. Tokens in :root; waarden 1-op-1 uit de
   hi-fi designs (design_handoff_syb_website). Theme-warm + koppen-editorial.
   Spelregel: oranje = alléén hoofdactie + de punt. NOOIT #C0833A.
   ========================================================================== */

/* ---------- Fonts (zelf gehost, latin subset) ---------- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/playfair-display-v40-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/playfair-display-v40-latin-500.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/playfair-display-v40-latin-600.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/playfair-display-v40-latin-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('/static/fonts/playfair-display-v40-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('/static/fonts/playfair-display-v40-latin-500italic.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url('/static/fonts/playfair-display-v40-latin-600italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/inter-v20-latin-300.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/inter-v20-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/inter-v20-latin-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/inter-v20-latin-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/inter-v20-latin-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;src:url('/static/fonts/inter-v20-latin-italic.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  /* Warm kern (= theme-warm / editorial, zelfde DNA als design-system/tokens) */
  --beige:#F4F3F1;        /* canvas */
  --wit:#FFFFFF;          /* kaarten */
  --rand:#E8E3DC;         /* haarlijnen */
  --donker:#2E2E2E;       /* koppen, primaire tekst — nooit als vlak */
  --grijs:#555555;        /* bodytekst */
  --taupe:#B8AFA1;        /* warme labels, italic accenten */
  --accent:#E05A28;       /* enige oranje: decoratief (punt, streepjes, ringen) */
  --accent-hover:#C94E24;
  /* WCAG AA (Fase 5): knop-vlakken met wítte tekst gebruiken een donkerder
     oranje (wit op #E05A28 = 3.71:1 → onvoldoende; wit op #C94E24 = 4.57:1).
     Decoratief oranje (schaduwen, kickers, punt) blijft --accent. */
  --accent-vlak:#C94E24;
  --accent-vlak-hover:#B44520;
  /* WCAG AA: KLEINE oranje tekst (kickers, labels, nummers <24px) gebruikt
     --accent-tekst (#B44520: 5.5:1 op wit, 5.3:1 op ivoor, 5.0:1 op beige,
     4.9:1 op tint). --accent-hover als tekstkleur haalt op ivoor/beige geen
     4.5:1 en blijft alleen voor grote serif-nummers/koppen >=24px (3:1). */
  --accent-tekst:#B44520;
  /* WCAG AA: taupe als TEKST op wit/beige haalt maar ~2:1 — tekst op lichte
     vlakken gebruikt --gedempt (#6B655C: 5.2:1 op beige, 5.8:1 op wit,
     5.5:1 op ivoor, 5.1:1 op tint). Taupe blijft voor tekst op espresso
     (7.8:1) en voor decoratie (borders, dots). */
  --gedempt:#6B655C;
  /* Editorial extra's (alleen website) */
  --espresso:#201C18;     /* donkere band + footer — enige donkere vlakken */
  --ivoor:#FBFAF8;        /* off-white vlak + tekst op espresso */
  --tint:#FBEEE8;         /* zachte oranje-tint (icoon-chips) */
  --cream:#D6CEC1;        /* nummers/secundair op espresso */
  --voet:#9A948B;         /* muted labels op ESPRESSO (5.6:1); als tekst op
                             lichte vlakken onvoldoende -> daar --gedempt */
  /* Status (spaarzaam, alleen in productmocks/pillen) */
  --succes:#4A7C59;
  --pil-wacht-bg:#F6EAD7; --pil-wacht:#9A6A20;
  --pil-groen-bg:#E4EFE7; --pil-groen:#3A6349;
  --pil-blauw-bg:#E3EDF6; --pil-blauw:#345F86;
  --pil-grijs-bg:#EFEDE9; --pil-grijs:#6B675F;
  /* Typografie */
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  /* Vorm en beweging */
  --overgang:.28s ease;
  --schaduw-kaart:0 2px 12px rgba(0,0,0,.04);
  --schaduw-zweef:0 8px 24px rgba(46,46,46,.08);
  --schaduw-cta:0 6px 18px rgba(224,90,40,.26);
  --maxb:1180px;
}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
/* hidden-attribuut wint altijd, ook van author-display (flex/grid) op het element */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--beige);color:var(--donker);font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.punt{color:var(--accent)}
.anker{scroll-margin-top:80px}
.binnen{max-width:var(--maxb);margin:0 auto;padding:0 28px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--wit);color:var(--donker);padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;font-size:13.5px;text-decoration:none}
.skip-link:focus{left:0}

@keyframes sybPulse{0%{transform:scale(.6);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@keyframes sybFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Kicker: uppercase-label met oranje streepje */
.kicker{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
.kicker-streep{width:24px;height:1px;background:var(--accent);flex:none}
.kicker-donker{color:var(--voet)}

/* Sectiekop-patroon */
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,46px);letter-spacing:-1px;line-height:1.06;margin:16px 0 0}
.h2 em{font-weight:500}
.sectie{border-bottom:1px solid var(--rand)}
.sectie-pad{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.sectie-ivoor{background:var(--ivoor)}

/* Woord-reveal-maskers. Bewuste verbetering op het design: compensatie aan
   álle kanten (boven/zijkant) zodat ascenders en cursieve overhang niet
   afknippen bij de krappe regelafstand van de koppen. */
.wr{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .1em .12em;margin:-.14em -.1em -.12em}
.wr-em{padding-bottom:.16em;margin-bottom:-.16em;padding-right:.14em;margin-right:-.14em}
.wr [data-wrw]{display:inline-block}

/* Knoppen */
.knop-cta{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;padding:15px 27px;border-radius:12px;background:var(--accent-vlak);color:#fff;text-decoration:none;border:none;box-shadow:var(--schaduw-cta);transition:all var(--overgang);cursor:pointer;font-family:inherit}
.knop-cta:hover{background:var(--accent-vlak-hover);transform:translateY(-1px)}
.hero .knop-cta:hover{box-shadow:0 10px 24px rgba(224,90,40,.32)}
.knop-cta-s{font-size:13.5px;padding:11px 19px;box-shadow:0 4px 16px rgba(224,90,40,.26)}
.tekstlink{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--donker);text-decoration:none;border-bottom:1.5px solid var(--rand);padding-bottom:3px}

/* ==========================================================================
   HEADER
   ========================================================================== */
.kop{position:sticky;top:0;z-index:60;background:rgba(244,243,241,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rand)}
.kop-binnen{max-width:var(--maxb);margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-family:var(--serif);font-weight:700;font-size:23px;letter-spacing:-.5px;color:var(--donker);text-decoration:none}
.sybnav{display:flex;align-items:center;gap:28px;font-size:13.5px;font-weight:600;color:var(--grijs);margin-left:auto}
.sybnav>a,.sybnav .sybdd>a{color:var(--grijs);text-decoration:none;transition:color var(--overgang)}
.sybnav>a:hover,.sybnav .sybdd>a:hover{color:var(--donker)}
.sybnav a.actief{color:var(--donker);border-bottom:2px solid var(--accent);padding-bottom:2px}
.sybdd{position:relative}
.sybdd>a{display:inline-flex;align-items:center;gap:6px}
.sybdd>a svg{width:11px;height:11px}
.sybdd-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);padding-top:14px;opacity:0;pointer-events:none;transition:opacity var(--overgang),transform var(--overgang);z-index:70}
.sybdd:hover .sybdd-panel,.sybdd:focus-within .sybdd-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.sybdd-kaart{width:600px;background:#fff;border:1px solid var(--rand);border-radius:16px;box-shadow:0 24px 60px -24px rgba(32,28,24,.28);padding:14px}
.sybdd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.sybdd-grid a{display:flex;gap:13px;padding:11px 13px;border-radius:10px;text-decoration:none;color:inherit;transition:background var(--overgang)}
.sybdd-grid a:hover{background:var(--ivoor)}
.sybdd-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:14px;color:var(--accent-tekst);width:22px;flex:none}
.sybdd-titel{display:block;font-weight:600;font-size:13.5px}
.sybdd-sub{display:block;font-size:12px;color:var(--gedempt);font-weight:400}
.sybdd-voet{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:12px 13px 6px;border-top:1px solid var(--rand)}
.sybdd-alle{font-size:13px;font-weight:600;color:var(--donker);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.sybdd-part{font-size:12.5px;font-weight:600;color:var(--gedempt);text-decoration:none}
.kop-rechts{display:flex;align-items:center;gap:20px}
/* Tapdoel 44x44 (richtlijn Apple/Material); het streepjesicoon blijft 22px
   breed. De negatieve marge houdt het icoon optisch op dezelfde plek in de
   balk, zodat de kop niet verspringt (22-09-2026). */
.sybburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;width:44px;height:44px;margin:-8px -6px -8px 0;padding:0;background:none;border:none}
.sybburger span{width:22px;height:1.8px;background:var(--donker);border-radius:2px}

/* Mobiel uitklapmenu */
.mobielmenu{border-top:1px solid var(--rand);background:rgba(244,243,241,.97);padding:18px 28px 24px;display:flex;flex-direction:column;gap:4px;animation:sybFadeUp .3s ease both}
.mobielmenu[hidden]{display:none}
.mm-groot{color:var(--donker);text-decoration:none;font-family:var(--serif);font-weight:600;font-size:22px;padding:9px 0;border-bottom:1px solid var(--rand)}
.mm-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.mm-chips a{font-size:12.5px;font-weight:600;color:var(--grijs);background:#fff;border:1px solid var(--rand);border-radius:999px;padding:8px 15px;text-decoration:none}
.mm-acties{display:flex;align-items:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.mm-acties .knop-cta{font-size:14px;padding:13px 22px;box-shadow:0 4px 16px rgba(224,90,40,.26)}

/* ==========================================================================
   MOBIELE CTA-BALK
   ========================================================================== */
.sybctaspacer{display:none;height:66px;background:var(--espresso)}
.sybctabar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:10px;background:rgba(244,243,241,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--rand);padding:10px 14px}
.ctabar-bel{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--donker);background:#fff;border:1px solid var(--rand);border-radius:12px;padding:13px 16px;text-decoration:none;flex:none}
.ctabar-bel svg{width:15px;height:15px}
.ctabar-cta{flex:1;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;background:var(--accent-vlak);border-radius:12px;padding:13px 16px;text-decoration:none;box-shadow:0 4px 16px rgba(224,90,40,.26)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.voet{background:var(--espresso)}
.voet-binnen{max-width:var(--maxb);margin:0 auto;padding:56px 28px 40px}
.voet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px}
.voet-logo{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ivoor)}
.voet-blurb{margin:12px 0 0;font-size:13.5px;color:var(--voet);line-height:1.7;max-width:26em}
.voet-kolom{display:flex;flex-direction:column;gap:9px}
.voet-kolom>span{color:var(--taupe);font-size:13.5px}
.voet-kop{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--voet) !important;margin-bottom:5px}
.voet-kolom a{color:var(--taupe);text-decoration:none;font-size:13.5px;transition:color var(--overgang)}
.voet-kolom a:hover{color:var(--ivoor)}
.voet-social{display:flex;gap:8px;margin-top:8px}
.voet-social a{width:34px;height:34px;border-radius:10px;border:1px solid rgba(251,250,248,.18);display:grid;place-items:center;color:var(--taupe);transition:all var(--overgang)}
.voet-social a:hover{color:var(--ivoor);border-color:rgba(251,250,248,.5)}
.voet-social svg{width:15px;height:15px}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:44px;padding-top:22px;border-top:1px solid rgba(251,250,248,.14);font-size:12px;color:var(--voet)}
.voet-onder-rechts{display:inline-flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.voet-onder a{color:var(--voet);text-decoration:none;border-bottom:1px solid rgba(251,250,248,.2)}

/* ==========================================================================
   HOMEPAGE — hero
   ========================================================================== */
.hero{border-bottom:1px solid var(--rand)}
.hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(56px,7.5vw,92px) 28px 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-kicker{display:flex;align-items:center;gap:11px;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--grijs)}
.pulse-dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.pulse-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent);opacity:.5;animation:sybPulse 2.4s ease-out infinite}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(46px,8vw,96px);line-height:.98;letter-spacing:-.03em;margin:28px 0 0}
.hero h1 em{font-weight:500}
.hero-sub{color:var(--grijs);font-size:clamp(16px,1.8vw,18.5px);line-height:1.65;max-width:34em;margin:28px 0 0}
.hero-sub strong{color:var(--donker);font-weight:600}
.hero-ctas{display:flex;align-items:flex-start;gap:14px 26px;margin-top:32px;flex-wrap:wrap;justify-content:center}
.hero-cta-kolom{display:flex;flex-direction:column;align-items:center;gap:9px}
.microcopy{font-size:12.5px;color:var(--gedempt)}
.microcopy a{color:var(--grijs);font-weight:600;text-decoration:none}
.hero-omlaag{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--donker);text-decoration:none;padding:15px 0}
.cirkel-icoon{width:30px;height:30px;border-radius:50%;border:1px solid var(--rand);display:grid;place-items:center;background:#fff;transition:all var(--overgang)}
.cirkel-icoon svg{width:13px;height:13px}

/* bevestigingsregel houdt zijn ruimte (visibility i.p.v. display): de kaart verspringt niet tussen de fasen */

/* vertrouwensstrook */
.vertrouwen{border-top:1px solid var(--rand);background:var(--ivoor);margin-top:46px}
.vertrouwen-binnen{max-width:var(--maxb);margin:0 auto;padding:0 28px;display:flex;flex-wrap:wrap;justify-content:center}
.vertrouwen-item{flex:1 1 240px;display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 12px;font-size:13px;font-weight:500;color:var(--grijs)}
.vertrouwen-item+.vertrouwen-item{border-left:1px solid var(--rand)}
.vertrouwen-item svg{width:16px;height:16px;flex:none}

/* Teamblok op de homepage (#hoe). Verving de portaal-demo: wij verkopen
   persoonlijk werk, geen software. Alleen bestaande tokens, geen nieuwe
   hexen (tokens.css blijft de canonieke bron). */
.team-kop{max-width:38em}
.team-intro{color:var(--grijs);margin:18px 0 0;max-width:34em}
.team-kop .tekstlink{margin-top:18px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:44px;align-items:stretch}
.team-kaart{margin:0;background:#fff;border:1px solid var(--rand);border-radius:16px;padding:26px 28px;box-shadow:var(--schaduw-kaart)}
.team-foto{display:block;width:132px;max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;background:var(--ivoor)}
.team-kaart-tekst .team-bijschrift{margin-top:0}
.team-bijschrift{margin-top:18px}
.team-taak{margin:12px 0 0;font-size:14px;line-height:1.65;color:var(--grijs)}
.team-citaat{margin:12px 0 0;font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--donker)}

.beloften{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:56px}
.belofte{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:24px 26px;box-shadow:var(--schaduw-kaart)}
.belofte-icoon{width:38px;height:38px;border-radius:10px;background:var(--tint);display:grid;place-items:center}
.belofte-icoon svg{width:18px;height:18px}
.belofte-titel{font-family:var(--serif);font-weight:600;font-size:19px;margin-top:14px}
.belofte p{margin:8px 0 0;font-size:14px;color:var(--grijs)}

/* ==========================================================================
   HOMEPAGE — werkwijze (espresso, scrollverhaal)
   ========================================================================== */
.werkwijze{background:var(--espresso)}
.sybwk-sticky{height:300vh}
.wk-plakker{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.wk-grid{max-width:var(--maxb);margin:0 auto;padding:0 28px;width:100%;display:grid;grid-template-columns:minmax(280px,.95fr) 1.05fr;gap:64px;align-items:center}
.wk-kop{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.2vw,46px);letter-spacing:-1px;line-height:1.06;margin:16px 0 0;color:var(--ivoor)}
.wk-kop em{font-weight:500}
.wk-sub{color:var(--taupe);font-size:15px;margin:16px 0 0;max-width:26em}
.wk-stappen{position:relative;display:flex;flex-direction:column;gap:24px;margin-top:38px;padding-left:24px}
.wk-lijn{position:absolute;left:0;top:8px;bottom:8px;width:1px;background:rgba(251,250,248,.16)}
.wk-lijn>div{width:1px;height:0%;background:var(--accent)}
.wk-stap{display:flex;align-items:baseline;gap:14px;opacity:.4;transition:opacity .3s ease}
.wk-stap-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;color:var(--cream);width:26px;flex:none}
.wk-stap-tekst{font-weight:600;font-size:15px;color:var(--ivoor)}
.wk-kaarten{position:relative;height:min(440px,62vh)}
.wk-kaart{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0}
.wk-kaart:first-child{opacity:1}
.wk-kaart-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:40px;color:var(--cream)}
.wk-kaart-titel{font-family:var(--serif);font-weight:600;font-size:27px;color:var(--ivoor);margin-top:10px}
.wk-kaart p{margin:10px 0 0;font-size:15px;color:var(--taupe);line-height:1.75;max-width:30em}
.wk-slot{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--voet);margin-top:18px}
/* statische variant (mobiel + reduced motion) */
.sybwk-static{display:none;max-width:var(--maxb);margin:0 auto;padding:clamp(64px,8vw,104px) 28px}
.wk-static-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:rgba(251,250,248,.14);border:1px solid rgba(251,250,248,.14);border-radius:14px;overflow:hidden;margin-top:40px}
.wk-static-cel{background:var(--espresso);padding:28px 28px 30px}
.wk-static-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:30px;color:var(--cream)}
.wk-static-titel{font-weight:600;font-size:16.5px;color:var(--ivoor);margin-top:12px}
.wk-static-cel p{margin:8px 0 0;font-size:14px;color:var(--taupe);line-height:1.7}

/* CTA-strip */
.cta-strip{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.cta-strip-binnen{max-width:var(--maxb);margin:0 auto;padding:36px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 32px;text-align:center}
.cta-strip-kop{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.5px}
.cta-strip-acties{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.cta-strip .knop-cta{font-size:14px;padding:13px 22px;box-shadow:0 5px 16px rgba(224,90,40,.26)}
.cta-strip-bel{font-size:13.5px;font-weight:600;color:var(--grijs);text-decoration:none;transition:color var(--overgang)}
.cta-strip-bel:hover{color:var(--donker)}

/* ==========================================================================
   HOMEPAGE — reviews / diensten / overstappen / over / prijs
   ========================================================================== */
.feiten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;margin-top:40px}
.feit{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:26px 28px;box-shadow:var(--schaduw-kaart)}
.feit-titel{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--donker)}
.feit p{margin:10px 0 0;font-size:14px;line-height:1.65;color:var(--grijs)}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:40px}
.review{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:28px;box-shadow:var(--schaduw-kaart);display:flex;flex-direction:column;gap:18px}
.review p{margin:0;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--donker)}
.review-bron{margin-top:auto;padding-top:14px;border-top:1px solid var(--rand)}
.review-naam{font-weight:600;font-size:14px}
.review-bedrijf{font-size:12.5px;color:var(--gedempt)}
.review-disclaimer{margin:18px 0 0;font-size:12px;color:var(--gedempt)}
.review-cta{display:flex;justify-content:center;margin-top:30px}
.review-cta a{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--donker);text-decoration:none;border-bottom:1.5px solid var(--rand);padding-bottom:3px}

.diensten-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.diensten-intro{color:var(--grijs);max-width:30em;margin:16px 0 0}
.diensten-lijst{display:flex;flex-direction:column}
.sybrow{display:flex;align-items:baseline;gap:20px;padding:17px 4px;border-bottom:1px solid var(--rand);transition:background var(--overgang);text-decoration:none;color:inherit}
.sybrow:last-child{border-bottom:none}
.sybrow:hover{background:var(--ivoor)}
.sybrow-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;color:var(--accent-tekst);width:28px;flex:none}
.sybrow-body{flex:1}
.sybrow-titel{font-family:var(--serif);font-weight:600;font-size:19px}
.sybrow-sub{font-size:13.5px;color:var(--grijs);margin-top:2px}
.sybrow-a{align-self:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--rand);display:grid;place-items:center;background:#fff;flex:none;opacity:0;transform:translateX(-6px);transition:opacity var(--overgang),transform var(--overgang)}
.sybrow:hover .sybrow-a{opacity:1;transform:none}
.sybrow-a svg{width:13px;height:13px}
.part-kaart{margin-top:48px;background:var(--ivoor);border:1px solid var(--rand);border-radius:14px;padding:26px 30px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px}
.part-kaart-tekst{flex:1 1 300px}
.part-kaart-titel{font-family:var(--serif);font-weight:600;font-size:21px}
.part-kaart-tekst p{margin:6px 0 0;font-size:14px;color:var(--grijs)}
.part-kaart-rechts{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.part-chips{display:flex;gap:8px;flex-wrap:wrap}
.part-chips span{font-size:12.5px;font-weight:600;color:var(--grijs);background:#fff;border:1px solid var(--rand);border-radius:999px;padding:7px 15px}

.stappen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:40px}
.stap-kaart{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:26px 28px;box-shadow:var(--schaduw-kaart)}
.stap-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:28px;color:var(--accent-hover)}
.stap-titel{font-weight:600;font-size:16px;margin-top:10px}
.stap-kaart p{margin:7px 0 0;font-size:14px;color:var(--grijs)}

.over-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center}
/* Tekstvariant zonder portret: bij de versobering is de rechterkolom met de
   foto vervallen, maar de brede houder bleef staan - de tekst vulde daardoor
   58% en liet een halve schermbreedte leeg, alsof de pagina niet af was. Het
   blok staat nu gecentreerd in een smalle maat: de witruimte valt links en
   rechts even breed uit en leest als een bewuste, persoonlijke passage. De
   tekst zelf blijft links uitgelijnd (22-09-2026). */
.over-grid-tekst{grid-template-columns:1fr;max-width:46em;margin-inline:auto}
.over-tekst>p{color:var(--grijs);margin:18px 0 0;max-width:34em}
.over-naamblok{margin-top:22px;padding-top:18px;border-top:1px solid var(--rand)}
.over-naam{font-family:var(--serif);font-weight:600;font-size:19px}
.over-rol{font-size:13px;color:var(--gedempt)}
.over-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.over-chips span{font-size:12px;font-weight:600;color:var(--grijs);background:#fff;border:1px solid var(--rand);border-radius:999px;padding:6px 14px}
.over-tekst .tekstlink{margin-top:20px}

.prijs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:start}
.prijs-intro{color:var(--grijs);margin:18px 0 0;max-width:34em}
.prijs-vinkjes{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.prijs-vink{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--donker)}
.prijs-vink svg{width:16px;height:16px;flex:none}
.prijs-vinkjes .tekstlink{margin-top:10px;align-self:flex-start;padding-bottom:2px}
.prijs-kaart{background:#fff;border:1px solid var(--rand);border-radius:16px;padding:32px 34px;box-shadow:var(--schaduw-zweef)}
.prijs-kaart-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gedempt)}
.prijs-stap{display:flex;gap:16px;margin-top:20px}
.prijs-stap+.prijs-stap{margin-top:18px;padding-top:18px;border-top:1px solid var(--rand)}
.prijs-stap-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--accent-tekst);width:30px;flex:none}
.prijs-stap-titel{font-weight:600;font-size:15px}
.prijs-stap p{margin:4px 0 0;font-size:13.5px;color:var(--grijs)}
.prijs-kaart-cta{display:flex;flex-direction:column;align-items:stretch;gap:9px;margin-top:26px}
.prijs-kaart-cta .knop-cta{font-size:15px;padding:14px 25px}
.prijs-kaart-cta .microcopy{text-align:center}

/* ==========================================================================
   HOMEPAGE — FAQ + contact
   ========================================================================== */
.faq-binnen{max-width:840px;margin:0 auto;padding:clamp(64px,8vw,104px) 28px}
.faq-kop{text-align:center}
.faq-lijst{display:flex;flex-direction:column;gap:10px;margin-top:40px}
.faq-item{background:#fff;border:1px solid var(--rand);border-radius:13px;overflow:hidden}
.faq-vraag{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 24px;cursor:pointer;width:100%;background:none;border:none;font-family:inherit;text-align:left}
.faq-vraag span:first-child{font-weight:600;font-size:15.5px;color:var(--donker)}
.faq-plus{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--rand);background:var(--ivoor);flex:none;transform:none;transition:transform .3s ease}
.faq-plus svg{width:15px;height:15px;display:block}
.faq-item.open .faq-plus{transform:rotate(45deg)}
.faq-antwoord{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease}
.faq-item.open .faq-antwoord{max-height:420px;opacity:1}
.faq-antwoord p{margin:0;padding:0 24px 20px;font-size:14px;color:var(--grijs);line-height:1.75}

.contact{background:var(--ivoor)}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:start}
.contact-intro{color:var(--grijs);margin:18px 0 0;max-width:32em}
.contact-regels{display:flex;flex-direction:column;gap:16px;margin-top:30px}
.contact-regel{display:flex;align-items:center;gap:13px;font-size:14.5px}
.contact-regel a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rand);transition:border-color var(--overgang)}
.contact-regel a:hover{border-color:var(--donker)}
.contact-icoon{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--rand);display:grid;place-items:center;flex:none}
.contact-icoon svg{width:17px;height:17px}
.contact-reactie{font-size:13px;color:var(--gedempt);margin:26px 0 0}
.form-kaart{background:#fff;border:1px solid var(--rand);border-radius:16px;padding:32px 34px;box-shadow:var(--schaduw-zweef)}
.form-kaart form{display:flex;flex-direction:column;gap:16px}
.form-kaart label{display:block;font-size:12px;font-weight:600;color:var(--grijs);margin-bottom:6px}
.form-kaart label .optioneel{color:var(--gedempt);font-weight:400}
.form-kaart input,.form-kaart textarea{width:100%;border:1px solid var(--rand);border-radius:11px;padding:13px 14px;font-size:15px;font-family:inherit;background:#fff;color:var(--donker);outline:none}
.form-kaart input:focus,.form-kaart textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,90,40,.16)}
.form-kaart textarea{resize:vertical}
.form-acties{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.form-acties .knop-cta{border:1px solid var(--accent-vlak)}
.form-acties .microcopy{text-align:center}
.form-agenda{font-size:12.5px;font-weight:600;color:var(--donker);text-decoration:none;text-align:center;align-self:center;border-bottom:1.5px solid var(--rand);padding-bottom:2px}
.form-checks{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:4px}
.form-checks span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--grijs)}
.form-bedankt{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 10px;animation:sybFadeUp .5s ease both}
.form-bedankt[hidden]{display:none}
.form-bedankt-cirkel{width:52px;height:52px;border-radius:50%;background:var(--pil-groen-bg);display:grid;place-items:center}
.form-bedankt-cirkel svg{width:22px;height:22px}
.form-bedankt-titel{font-family:var(--serif);font-weight:600;font-size:26px;margin-top:18px}
.form-bedankt p{color:var(--grijs);font-size:14.5px;max-width:26em;margin:10px 0 0}
.form-fout{font-size:12.5px;color:#A04545;text-align:center;margin:0}
.form-fout[hidden]{display:none}
/* honeypot: onzichtbaar voor mensen, verleidelijk voor bots */
.hp-veld{position:absolute;left:-9999px;top:-9999px}
.vis-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   Gedeeld CTA-blok "kennismaken" (subpagina's)
   ========================================================================== */
.ctak{scroll-margin-top:88px}
.ctak-ivoor{background:var(--ivoor)}
.ctak-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(56px,7vw,88px) 28px}
.ctak-kaart{background:#fff;border:1px solid var(--rand);border-radius:18px;box-shadow:var(--schaduw-zweef);padding:clamp(36px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
/* Tekstkolom mag de wrap nooit zelf forceren: een lange kop (btw-artikel)
   breekt dan binnen de kolom i.p.v. het formulier naar een eigen regel te duwen. */
.ctak-kaart>div:first-child{flex:1 1 0;min-width:min(320px,100%)}
.ctak-kop{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,38px);letter-spacing:-1px;line-height:1.08;margin:0}
.ctak-intro{color:var(--grijs);margin:12px 0 0;max-width:36em}
.ctak-form{width:min(360px,100%);display:flex;flex-direction:column;gap:10px}
.ctak-form form{display:flex;flex-direction:column;gap:10px}
.ctak-form input{width:100%;border:1px solid var(--rand);border-radius:11px;padding:12px 14px;font-size:14.5px;font-family:inherit;background:var(--ivoor);color:var(--donker);outline:none}
.ctak-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,90,40,.16)}
.ctak-form .knop-cta{font-size:15px;padding:14px 25px;border:1px solid var(--accent-vlak)}
.ctak-form .microcopy{text-align:center}
.ctak-agenda{font-size:12.5px;font-weight:600;color:var(--donker);text-decoration:none;text-align:center;align-self:center;border-bottom:1.5px solid var(--rand);padding-bottom:2px}
.ctak-bedankt{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 6px;animation:sybFadeUp .5s ease both}
.ctak-bedankt[hidden]{display:none}
.ctak-bedankt-cirkel{width:44px;height:44px;border-radius:50%;background:var(--pil-groen-bg);display:grid;place-items:center}
.ctak-bedankt-cirkel svg{width:19px;height:19px}
.ctak-bedankt-titel{font-family:var(--serif);font-weight:600;font-size:21px;margin-top:12px}
.ctak-bedankt p{color:var(--grijs);font-size:13.5px;margin:6px 0 0}

/* ==========================================================================
   Responsive (hoofdknik 919px) + reduced motion
   ========================================================================== */
@media (max-width:919px){
  .sybnav{display:none !important}
  .sybhead-extra{display:none !important}
  .sybburger{display:flex !important}
  .sybwk-sticky{display:none !important}
  .sybwk-static{display:block !important}
  .sybctabar{display:flex !important}
  .sybctaspacer{display:block !important}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  /* bewuste afwijking van het design: ook smooth-scroll uit bij reduced motion */
  html{scroll-behavior:auto}
  .sybwk-sticky{display:none !important}
  .sybwk-static{display:block !important}
}

/* ==========================================================================
   HOE HET WERKT (hhw-)
   ========================================================================== */
.hhw-hero-pad{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(44px,5vw,60px)}
.hhw-kruimel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gedempt)}
.hhw-kruimel a{color:var(--gedempt);text-decoration:none;transition:color var(--overgang)}
.hhw-kruimel a:hover{color:var(--donker)}
.hhw-kruimel svg{width:10px;height:10px}
.hhw-kruimel>span{color:var(--grijs);font-weight:500}
.hhw-h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.5vw,64px);letter-spacing:-1.5px;line-height:1.02;margin:22px 0 0}
.hhw-hero-intro{color:var(--grijs);font-size:16.5px;max-width:40em;margin:18px 0 0}
.hhw-pad{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.hhw-pad-s{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(48px,6vw,72px)}
.hhw-h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.8vw,42px);letter-spacing:-1px;line-height:1.06;margin:16px 0 0}
.hhw-h2 em{font-weight:500}
.hhw-h2-klein{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.2vw,36px);letter-spacing:-1px;line-height:1.08;margin:16px 0 0}
.hhw-intro{color:var(--grijs);margin:16px 0 0;max-width:36em}
.hhw-intro-breed{max-width:38em}

/* Het idee */
.hhw-idee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:center}
.hhw-idee-p{color:var(--grijs);margin:18px 0 0;max-width:36em}
.hhw-idee-p+.hhw-idee-p{margin-top:14px}
.hhw-idee-grid-tekst{grid-template-columns:1fr;max-width:46em}

/* Stappenpad (bewust smaller: 900px) */
.hhw-stappen-binnen{max-width:900px;margin:0 auto;padding:clamp(56px,7vw,88px) 28px}
.hhw-stappen{display:flex;flex-direction:column;margin-top:40px}
.hhw-stap{display:flex;gap:26px;padding:26px 0;border-top:1px solid var(--rand)}
.hhw-stap:last-child{padding-bottom:6px}
.hhw-stap-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;color:var(--accent-hover);width:44px;flex:none}
.hhw-stap-titel{font-family:var(--serif);font-weight:600;font-size:21px}
.hhw-stap p{margin:8px 0 0;color:var(--grijs);font-size:14.5px;max-width:44em}

/* Het systeem */
.hhw-sys-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;color:var(--accent-tekst)}
.hhw-h3{font-family:var(--serif);font-weight:600;font-size:23px;margin:8px 0 0}
.hhw-sys-p{color:var(--grijs);font-size:14.5px;margin:12px 0 0;max-width:36em}
.hhw-werk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:36px 48px;margin-top:44px}
.hhw-werk-blok{border-top:1px solid var(--rand);padding-top:22px}

/* Jouw kant van de afspraak */
.hhw-taken-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
.hhw-taak-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:14px;padding:24px 26px;box-shadow:var(--schaduw-kaart)}
.hhw-taak-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;color:var(--accent-hover)}
.hhw-taak-titel{font-weight:600;font-size:15.5px;margin-top:10px}
.hhw-taak-kaart p{margin:7px 0 0;font-size:13.5px;color:var(--grijs)}

/* Wie doet wat */
.hhw-verdeling-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:36px}
.hhw-kolomkaart{background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:30px 32px;box-shadow:var(--schaduw-kaart)}
.hhw-kolomkaart-donker{background:var(--espresso);border-color:var(--espresso);box-shadow:none}
.hhw-kolomkaart-titel{font-family:var(--serif);font-weight:600;font-size:22px}
.hhw-kolomkaart-donker .hhw-kolomkaart-titel{color:var(--ivoor)}
.hhw-kolomkaart-sub{margin:6px 0 0;font-size:13px;color:var(--gedempt)}
.hhw-kolomlijst{display:flex;flex-direction:column;gap:11px;margin-top:18px}
.hhw-kolomitem{display:flex;align-items:flex-start;gap:10px;font-size:14.5px}
.hhw-kolomitem svg{flex:none;margin-top:4px}
.hhw-kolomkaart-donker .hhw-kolomitem{color:var(--cream)}
.hhw-kolomkaart-donker .hhw-kolomkaart-sub{color:var(--voet)}

/* Veiligheid & privacy */
.hhw-veilig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px;align-items:start}
.hhw-veilig-lijst{display:flex;flex-direction:column;gap:12px}
.hhw-veilig-item{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:var(--donker)}
.hhw-veilig-item svg{width:17px;height:17px;flex:none;margin-top:3px}

/* FAQ (eigen container: 840px, compactere padding dan .faq-binnen) */
.hhw-faq-binnen{max-width:840px;margin:0 auto;padding:clamp(56px,7vw,88px) 28px}
.hhw-faq-binnen .faq-lijst{margin-top:36px}

/* hero */
.dn-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.dn-hero-pad{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(44px,5vw,60px)}
.dn-kruimel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gedempt)}
.dn-kruimel a{color:var(--gedempt);text-decoration:none}
.dn-kruimel a:hover{color:var(--donker)}
.dn-kruimel svg{width:10px;height:10px}
.dn-kruimel-hier{color:var(--grijs);font-weight:500}
.dn-h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.5vw,64px);letter-spacing:-1.5px;line-height:1.02;margin:22px 0 0}
.dn-hero-intro{color:var(--grijs);font-size:16.5px;max-width:40em;margin:18px 0 0}
.dn-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.dn-chips a{font-size:12.5px;font-weight:600;color:var(--grijs);background:#fff;border:1px solid var(--rand);border-radius:999px;padding:8px 16px;text-decoration:none;transition:all var(--overgang)}
.dn-chips a:hover{border-color:var(--taupe);color:var(--donker)}

/* accordeons */
.dn-accs{border-bottom:1px solid var(--rand)}
.dn-accs-pad{padding-top:clamp(44px,5vw,64px);padding-bottom:clamp(44px,5vw,64px);display:flex;flex-direction:column;gap:14px}
.dn-acc{scroll-margin-top:88px;background:#fff;border:1px solid var(--rand);border-radius:16px;overflow:hidden;box-shadow:var(--schaduw-kaart)}
/* De dienstnaam is een h2 (de knop zit erin, ARIA-accordeonpatroon). De h2
   zelf mag niets aan de vormgeving veranderen: de opmaak zit op .dn-acc-titel. */
.dn-acc-h2{margin:0;font:inherit;font-weight:inherit}
.dn-acc-kop{display:flex;align-items:center;gap:22px;padding:24px 28px;cursor:pointer;width:100%;background:none;border:none;font:inherit;color:inherit;text-align:left}
.dn-acc-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--accent-tekst);width:34px;flex:none}
.dn-acc-titelblok{flex:1}
.dn-acc-titel{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.4vw,26px)}
.dn-acc-sub{display:block;font-size:13.5px;color:var(--grijs);margin-top:2px}
.dn-acc-plus{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--rand);background:var(--ivoor);flex:none;transform:none;transition:transform .3s ease}
.dn-acc-plus svg{width:15px;height:15px;display:block}
.dn-acc.open .dn-acc-plus{transform:rotate(45deg)}
.dn-acc-paneel{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s ease}
.dn-acc.open .dn-acc-paneel{max-height:3200px;opacity:1;transition:max-height .65s ease,opacity .4s ease}
/* deeplink bij laden: zonder animatie openen zodat de scrollpositie klopt */
.dn-accs.dn-geen-anim .dn-acc-paneel{transition:none}
.dn-acc-body{padding:4px 28px 30px;border-top:1px solid var(--rand)}
.dn-acc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px;padding-top:24px}
.dn-acc-lead{margin:0;color:var(--grijs)}
.dn-acc-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gedempt);margin-top:24px}
.dn-checks{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.dn-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--donker)}
.dn-check svg{margin-top:4px}
.dn-acc-h3{font-family:var(--serif);font-weight:600;font-size:18px;margin:28px 0 0}
.dn-acc-h3 ~ .dn-acc-h3{margin-top:22px}
.dn-acc-h3 + p{margin:8px 0 0;color:var(--grijs);font-size:14px}
.dn-acc-zij{display:flex;flex-direction:column;gap:14px;align-self:start}
.dn-acc-zij .tekstlink{align-self:flex-start}
.dn-zijkaart{background:var(--ivoor);border:1px solid var(--rand);border-radius:13px;padding:18px 20px}
.dn-zijkaart-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gedempt)}
.dn-zijkaart p{margin:8px 0 0;font-size:13.5px;color:var(--grijs)}
.dn-zijkaart-links{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.dn-zijkaart-links a{font-size:13.5px;font-weight:600;color:var(--donker);text-decoration:none}
.dn-part-noot{margin:10px 0 0;font-size:13.5px;color:var(--gedempt)}
.dn-part-noot a{color:var(--donker);font-weight:600}

/* ==========================================================================
   PRIJS-pagina (pr-) — smalle leeskolom 760px, waarden 1-op-1 uit Prijs.dc.html
   ========================================================================== */
.pr-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.pr-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,64px) 28px clamp(44px,5vw,60px)}
.pr-kolom{max-width:760px;margin:0 auto}
.pr-hero .kicker{color:var(--accent-tekst)}
.pr-h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.8vw,56px);letter-spacing:-1.5px;line-height:1.06;margin:18px 0 0}
.pr-hero-intro{color:var(--grijs);font-size:16.5px;line-height:1.75;max-width:40em;margin:18px 0 0}
.pr-body-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,60px) 28px 0}
.pr-body-kolom{max-width:760px;margin:0 auto;display:flex;flex-direction:column}
.pr-blok{margin-top:clamp(36px,4.5vw,52px)}
.pr-h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,32px);letter-spacing:-.6px;line-height:1.15;margin:14px 0 0}
.pr-tekst{color:var(--grijs);margin:16px 0 0}
.pr-tekst+.pr-tekst{margin-top:14px}
.pr-notitie{background:var(--ivoor);border:1px dashed var(--cream);border-radius:14px;padding:18px 22px;margin-top:20px}
.pr-notitie-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gedempt)}
.pr-notitie p{color:var(--grijs);font-size:14px;margin:8px 0 0;line-height:1.65}
.pr-factoren{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:20px}
.pr-factor{background:var(--wit);border:1px solid var(--rand);border-radius:13px;padding:17px 20px}
.pr-factor-titel{font-weight:600;font-size:14px}
.pr-factor-sub{font-size:13px;color:var(--grijs);margin-top:3px}
.pr-inbegrepen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:20px}
.pr-inbegrepen-item{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--donker)}
.pr-route{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:20px}
.pr-route-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:24px 26px;box-shadow:var(--schaduw-kaart)}
.pr-route-nr{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--accent-tekst)}
.pr-route-titel{font-weight:600;font-size:15px;margin-top:8px}
.pr-route-kaart p{margin:5px 0 0;font-size:13.5px;color:var(--grijs);line-height:1.7}
.pr-vragen{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.pr-vraag-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:14px;padding:20px 24px}
.pr-vraag{font-weight:600;font-size:15px}
.pr-vraag-kaart p{color:var(--grijs);font-size:14px;margin:8px 0 0;line-height:1.7}

/* ==========================================================================
   PARTICULIEREN
   ========================================================================== */
.part-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.part-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,64px) 28px clamp(44px,5vw,60px)}
.part-kruimel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gedempt)}
.part-kruimel a{color:var(--gedempt);text-decoration:none}
.part-kruimel a:hover{color:var(--donker)}
.part-kruimel svg{width:10px;height:10px}
.part-kruimel-hier{color:var(--grijs);font-weight:500}
.part-h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.5vw,64px);letter-spacing:-1.5px;line-height:1.02;margin:22px 0 0}
.part-h1 em{font-weight:500}
.part-hero-intro{color:var(--grijs);font-size:16.5px;max-width:40em;margin:18px 0 0}
.part-pad{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.part-h2{font-size:clamp(28px,3.8vw,42px)}
.part-lead{color:var(--grijs);max-width:38em;margin:16px 0 0}
.part-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:36px}
.part-tegel{background:#fff;border:1px solid var(--rand);border-radius:14px;padding:24px 26px;box-shadow:var(--schaduw-kaart);transition:all var(--overgang)}
.part-tegel:hover{transform:translateY(-3px);box-shadow:var(--schaduw-zweef)}
.part-tegel-icoon{width:38px;height:38px;border-radius:10px;background:var(--tint);display:grid;place-items:center}
.part-tegel-titel{font-family:var(--serif);font-weight:600;font-size:18px;margin-top:14px}
.part-tegel p{margin:7px 0 0;font-size:13.5px;color:var(--grijs)}
.part-faq-binnen{max-width:840px;margin:0 auto;padding:clamp(56px,7vw,88px) 28px}
.part-faq-slot{margin:22px 0 0;font-size:13.5px;color:var(--gedempt);text-align:center}
.part-faq-slot a{color:var(--donker);font-weight:600}

/* ==========================================================================
   OVER ONS
   ========================================================================== */
.ov-hero-pad{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(44px,5vw,60px)}
.ov-kruimel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gedempt)}
.ov-kruimel a{color:var(--gedempt);text-decoration:none;transition:color var(--overgang)}
.ov-kruimel a:hover{color:var(--donker)}
.ov-kruimel svg{width:10px;height:10px;flex:none}
.ov-kruimel-hier{color:var(--grijs);font-weight:500}
.ov-hero-kop{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.5vw,64px);letter-spacing:-1.5px;line-height:1.02;margin:22px 0 0}
.ov-hero-kop em{font-weight:500}
.ov-hero-intro{color:var(--grijs);font-size:16.5px;max-width:40em;margin:18px 0 0}
.ov-pad{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px)}
.h2.ov-h2{font-size:clamp(28px,3.8vw,42px)}
.ov-alinea{color:var(--grijs);margin:14px 0 0;max-width:36em}
.ov-alinea-eerst{margin-top:18px}
.ov-mijlpalen-binnen{max-width:900px;margin:0 auto;padding:clamp(48px,6vw,72px) 28px}
.ov-tijdlijn{display:flex;flex-direction:column}
.ov-mijlpaal{display:flex;gap:26px;align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--rand)}
.ov-mijlpaal:last-child{border-bottom:none}
.ov-jaar{font-family:var(--serif);font-style:italic;font-weight:500;font-size:22px;color:var(--accent-tekst);width:90px;flex:none}
.ov-mijlpaal-titel{font-weight:600;font-size:16px}
.ov-mijlpaal-sub{font-size:13.5px;color:var(--grijs);margin-top:2px}
.stappen-grid.ov-principes{margin-top:36px}
.ov-principes .stap-kaart{transition:all var(--overgang)}
.ov-principes .stap-kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-zweef)}
.ov-principes .stap-nr{font-size:26px}
.ov-principes .stap-titel{font-size:15.5px}
.ov-principes .stap-kaart p{font-size:13.5px}
.ov-gegevens{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.ov-gegeven{display:flex;align-items:flex-start;gap:13px;font-size:14.5px}
.ov-gegeven strong{font-weight:600}
.ov-gegeven-waarde{color:var(--grijs)}
.ov-gegeven-waarde a{color:var(--donker);font-weight:600;text-decoration:none}

/* ==========================================================================
   PLAN EEN KENNISMAKING — hero + momentkiezer (bewust zonder scroll-animaties)
   ========================================================================== */
.plan-hero{border-bottom:1px solid var(--rand);background:var(--ivoor)}
.plan-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,64px) 28px clamp(44px,5vw,60px)}
.plan-hero-kop{max-width:820px;margin:0 auto;text-align:center}
.plan-kicker{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-tekst)}
.plan-h1{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5vw,58px);letter-spacing:-1.5px;line-height:1.04;margin:18px 0 0}
.plan-hero-intro{color:var(--grijs);font-size:16.5px;line-height:1.75;max-width:36em;margin:16px auto 0}
.plan-sectie{scroll-margin-top:88px}
.plan-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,60px) 28px clamp(56px,7vw,88px)}
.plan-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.plan-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:18px;box-shadow:var(--schaduw-kaart);padding:28px 30px}
.plan-kiezer{display:flex;flex-direction:column;gap:20px}
.plan-label{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
/* Terugvalregel als JavaScript niet draait: dan blijft de dagenlijst leeg. */
.plan-geen-js{margin:4px 0 0;font-size:14px;color:var(--grijs);line-height:1.6}
.plan-groep{display:flex;flex-direction:column;gap:8px}
.plan-groep-label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
.plan-chips{display:flex;gap:6px;flex-wrap:wrap}
.plan-chip{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.7;cursor:pointer;transition:all .28s ease;user-select:none;border:1px solid var(--rand);background:var(--ivoor);color:var(--grijs);font-family:inherit}
.plan-chip.aan{border-color:var(--donker);background:var(--donker);color:var(--ivoor)}
.plan-moment{background:var(--ivoor);border:1px solid var(--rand);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px}
.plan-moment svg{width:17px;height:17px;flex:none}
.plan-moment-tekst{font-size:14px;font-weight:600}
.plan-form{display:flex;flex-direction:column;gap:10px;margin-top:16px}
/* Zichtbare veldnamen, zelfde opmaak als het formulier op de homepage. De
   negatieve marge trekt het label tegen zijn eigen veld aan, zodat de 10px
   flex-gap tussen de velden blijft en niet tussen label en veld valt. */
.plan-form label{display:block;font-size:12px;font-weight:600;color:var(--grijs);margin-bottom:-4px}
.plan-form input,.plan-form textarea{width:100%;border:1px solid var(--rand);border-radius:11px;padding:12px 14px;font-size:14.5px;font-family:inherit;background:var(--ivoor);color:var(--donker);outline:none}
.plan-form textarea{resize:vertical;min-height:76px}
.plan-form input:focus,.plan-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,90,40,.16)}
.plan-form .knop-cta{font-size:15px;padding:14px 25px;border:1px solid var(--accent-vlak)}
.plan-form .microcopy{text-align:center}
.plan-bedankt{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 6px;animation:sybFadeUp .5s ease both}
.plan-bedankt[hidden]{display:none}
.plan-bedankt-cirkel{width:44px;height:44px;border-radius:50%;background:var(--pil-groen-bg);display:grid;place-items:center}
.plan-bedankt-cirkel svg{width:19px;height:19px}
.plan-bedankt-titel{font-family:var(--serif);font-weight:600;font-size:21px;margin-top:12px}
.plan-bedankt-moment{color:var(--grijs);font-size:14px;margin:8px 0 0;font-weight:600}
.plan-bedankt-sub{color:var(--grijs);font-size:13.5px;margin:6px 0 0}
.plan-voetnoot{max-width:980px;margin:22px auto 0;font-size:12.5px;color:var(--gedempt);line-height:1.7}
.plan-voetnoot a{color:var(--grijs);font-weight:600;text-decoration:none}

/* ==========================================================================
   KENNISBANK-ARTIKEL (kba-) — gedeelde artikel-layout + blokken-catalogus.
   Smalle leeskolom 760px; waarden 1-op-1 uit de zes Kennisbank-designs
   (Kennisbank - *.dc.html). Gebruikt door kennisbank/_artikel_basis.html
   en de macro's in _partials/artikel_blokken.html.
   ========================================================================== */
/* hero (ivoor, kruimel + kicker in accent-tekst zoals de prijs-hero) */
.kba-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.kba-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,64px) 28px clamp(44px,5vw,60px)}
.kba-kolom{max-width:760px;margin:0 auto}
.kba-kruimel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--gedempt)}
.kba-kruimel a{color:var(--gedempt);text-decoration:none;transition:color var(--overgang)}
.kba-kruimel a:hover{color:var(--donker)}
.kba-kruimel svg{width:10px;height:10px;flex:none}
.kba-kruimel-hier{color:var(--grijs);font-weight:500}
.kba-hero .kicker{color:var(--accent-tekst);margin-top:26px}
.kba-h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.8vw,56px);letter-spacing:-1.5px;line-height:1.06;margin:18px 0 0}
.kba-hero-intro{color:var(--grijs);font-size:16.5px;line-height:1.75;max-width:40em;margin:18px 0 0}
.kba-bijgewerkt{font-size:12.5px;color:var(--gedempt);margin-top:20px}

/* body: smalle leeskolom, onderkant open richting het CTA-blok */
.kba-body-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,60px) 28px 0}
.kba-body-kolom{max-width:760px;margin:0 auto;display:flex;flex-direction:column}

/* "In het kort"-kaart (bovenaan elk artikel) */
.kba-kort{background:var(--wit);border:1px solid var(--rand);border-radius:16px;box-shadow:var(--schaduw-kaart);padding:26px 28px}
.kba-kort-label{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
.kba-kort-lijst{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.kba-kort-item{display:flex;gap:12px;align-items:baseline}
.kba-kort-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;position:relative;top:-2px}
.kba-kort-tekst{font-size:14.5px;color:var(--grijs);line-height:1.65}

/* genummerd sectieblok + lopende tekst */
.kba-sectie{margin-top:clamp(36px,4.5vw,52px)}
.kba-h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,32px);letter-spacing:-.6px;line-height:1.15;margin:14px 0 0}
.kba-tekst{color:var(--grijs);margin:16px 0 0}
.kba-tekst+.kba-tekst{margin-top:14px}
.kba-tekst-na{margin-top:18px}   /* slotalinea ná een tabel/kaart-grid */

/* cijfertabel: label/waarde-rijen in een witte kaart; som-variant =
   rekenvoorbeeld (radius 16 + schaduw + ruimere rijen) */
.kba-tabel{background:var(--wit);border:1px solid var(--rand);border-radius:14px;margin-top:20px;overflow:hidden}
.kba-tabel-som{border-radius:16px;box-shadow:var(--schaduw-kaart)}
.kba-tabel-kop{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;padding:13px 20px;border-bottom:1px solid var(--rand);background:var(--ivoor)}
.kba-tabel-kop span:first-child{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs)}
.kba-tabel-kop-rechts{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gedempt)}
.kba-trij{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;padding:12px 20px;border-bottom:1px solid var(--rand)}
.kba-tabel-som .kba-trij{padding:13px 24px}
/* laatste rij zonder lijn; mét voetregel houdt de laatste rij zijn lijn
   (de voetregel is dan :last-child) — zo staat er overal precies één lijn */
.kba-tabel .kba-trij:last-child{border-bottom:none}
.kba-trij-label{font-size:14px;color:var(--grijs)}
.kba-trij-waarde{font-family:var(--serif);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums}
.kba-trij-gedempt .kba-trij-waarde{color:var(--gedempt)}
.kba-trij-nadruk{background:var(--ivoor)}
.kba-trij-nadruk .kba-trij-label{font-weight:600;color:var(--donker)}
.kba-trij-totaal .kba-trij-waarde{font-size:19px}
.kba-tabel-voet{padding:11px 20px;background:var(--ivoor);font-size:12.5px;color:var(--gedempt)}

/* kaartjes-grid (gemiste posten, vier toeslagen, wat verandert met een bv) */
.kba-kaartjes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:20px}
.kba-kaartje{background:var(--wit);border:1px solid var(--rand);border-radius:13px;padding:17px 20px}
.kba-kaartje-titel{font-weight:600;font-size:14px}
.kba-kaartje-tekst{font-size:13px;color:var(--grijs);margin-top:3px}

/* notitie-/tipkader (gestippeld, ivoor) */
.kba-notitie{background:var(--ivoor);border:1px dashed var(--cream);border-radius:14px;padding:18px 22px;margin-top:20px}
.kba-notitie-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gedempt)}
.kba-notitie p{color:var(--grijs);font-size:14px;margin:8px 0 0;line-height:1.65}

/* vergelijk-kaarten (Route A/B, box 1 vs vpb+box 2) */
.kba-vergelijk{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:20px}
.kba-vgl-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:24px 26px;box-shadow:var(--schaduw-kaart)}
.kba-vgl-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-tekst)}
.kba-vgl-rijen{display:flex;flex-direction:column;margin-top:14px}
.kba-vgl-rij{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rand);font-size:13.5px}
.kba-vgl-rijen .kba-vgl-rij:last-child{border-bottom:none}
.kba-vgl-rij-label{color:var(--grijs)}
.kba-vgl-rij-waarde{font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.kba-vgl-voet{font-size:12.5px;color:var(--gedempt);margin-top:12px;line-height:1.6}

/* genummerde vragenlijst (haarlijn-regels, cursief serif-nummer) */
.kba-vragen{display:flex;flex-direction:column;margin-top:18px}
.kba-vraag{display:flex;gap:18px;padding:15px 4px;border-bottom:1px solid var(--rand);align-items:baseline}
.kba-vraag:last-child{border-bottom:none}
.kba-vraag-nr{font-family:var(--serif);font-weight:600;font-style:italic;color:var(--accent-tekst);flex:none}
.kba-vraag-tekst{font-size:14.5px;color:var(--grijs)}

/* doorlink binnen een sectie (bv. naar de rekentool) */
.kba-doorlink{margin-top:18px}

/* slot: disclaimer + lees-ook-kaart */
.kba-slot{margin-top:clamp(36px,4.5vw,52px);border-top:1px solid var(--rand);padding-top:24px}
.kba-disclaimer{font-size:12.5px;color:var(--gedempt);margin:0;line-height:1.7}
.kba-leesook{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:20px 24px;margin-top:22px;text-decoration:none;color:inherit;box-shadow:var(--schaduw-kaart);transition:all var(--overgang)}
.kba-leesook:hover{transform:translateY(-2px);box-shadow:var(--schaduw-zweef)}
.kba-leesook-tekst{display:flex;flex-direction:column;gap:3px}
.kba-leesook-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gedempt)}
.kba-leesook-titel{font-family:var(--serif);font-weight:600;font-size:18px}
.kba-leesook svg{flex:none}

/* responsive: de grids klappen vanzelf via auto-fit; op smalle telefoons
   alleen de kaart-paddings iets krapper zodat 390px comfortabel blijft */
@media (max-width:480px){
  .kba-kort{padding:22px 20px}
  .kba-trij,.kba-tabel-kop{padding-left:16px;padding-right:16px}
  .kba-tabel-som .kba-trij{padding-left:18px;padding-right:18px}
  .kba-tabel-voet{padding-left:16px;padding-right:16px}
  .kba-vgl-kaart{padding:20px 18px}
  .kba-leesook{padding:18px 20px}
}

/* hero (ivoor) */
.kb-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.kb-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,64px) 28px clamp(44px,5vw,60px)}
.kb-kruimel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gedempt)}
.kb-kruimel a{color:var(--gedempt);text-decoration:none;transition:color var(--overgang)}
.kb-kruimel a:hover{color:var(--donker)}
.kb-kruimel svg{width:10px;height:10px;flex:none}
.kb-kruimel-hier{color:var(--grijs);font-weight:500}
.kb-h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.5vw,64px);letter-spacing:-1.5px;line-height:1.02;margin:22px 0 0}
.kb-hero-intro{color:var(--grijs);font-size:16.5px;max-width:40em;margin:18px 0 0}

/* actueel: kwartaallabel met oranje dot + 3 datumkaarten */
.kb-actueel{border-bottom:1px solid var(--rand)}
.kb-actueel-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(36px,4.5vw,52px) 28px}
.kb-actueel-label{display:flex;align-items:center;gap:11px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
.kb-actueel-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.kb-actueel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:20px}
.kb-actueel-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:13px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.kb-actueel-datum{font-family:var(--serif);font-style:italic;font-weight:600;font-size:15px;color:var(--accent-tekst);flex:none}
.kb-actueel-titel{font-weight:600;font-size:14px}
.kb-actueel-kaart p{font-size:13px;color:var(--grijs);margin:2px 0 0}

/* artikelen (ivoor): 2 grote featured-kaarten + rij kleine kaarten */
.kb-artikelen{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.kb-artikelen-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(48px,6vw,72px) 28px}
.kb-h2{font-size:clamp(28px,3.8vw,42px)}
.kb-groot{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:36px}
.kb-kaart-groot{background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:28px 30px;box-shadow:var(--schaduw-kaart);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:all var(--overgang)}
.kb-kaart-groot:hover{transform:translateY(-3px);box-shadow:var(--schaduw-zweef)}
.kb-kaart-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-tekst)}
.kb-kaart-groot-titel{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.2;margin:12px 0 0}
.kb-kaart-groot-intro{font-size:14px;color:var(--grijs);margin-top:10px;line-height:1.65}
.kb-kaart-lees{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px;color:var(--donker);margin-top:auto;padding-top:18px}
.kb-klein{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:14px}
.kb-kaart-klein{background:var(--wit);border:1px solid var(--rand);border-radius:14px;padding:20px 22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;box-shadow:var(--schaduw-kaart);transition:all var(--overgang)}
.kb-kaart-klein:hover{transform:translateY(-3px);box-shadow:var(--schaduw-zweef)}
.kb-kaart-klein-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-tekst)}
.kb-kaart-klein-titel{font-family:var(--serif);font-weight:600;font-size:17px;margin:8px 0 0}

/* ---- Hero ---- */
.rt-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.rt-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,64px) 28px clamp(44px,5vw,60px)}
.rt-kolom{max-width:820px;margin:0 auto}
.rt-kruimel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--gedempt)}
.rt-kruimel a{color:var(--gedempt);text-decoration:none;transition:color var(--overgang)}
.rt-kruimel a:hover{color:var(--donker)}
.rt-kruimel svg{width:10px;height:10px;flex:none}
.rt-kruimel-hier{color:var(--grijs);font-weight:500}
.rt-hero .kicker{color:var(--accent-tekst);margin-top:26px}
.rt-h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.8vw,56px);letter-spacing:-1.5px;line-height:1.06;margin:18px 0 0}
.rt-hero-intro{color:var(--grijs);font-size:16.5px;line-height:1.75;max-width:40em;margin:18px 0 0}

/* ---- Tool-grid ---- */
.rt-body-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(40px,5vw,60px) 28px 0}
.rt-tool{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px;align-items:start}

/* ---- Formulierkaart "Jouw situatie" ---- */
.rt-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:18px;box-shadow:var(--schaduw-kaart);padding:28px 30px;display:flex;flex-direction:column;gap:18px;margin:0}
.rt-kaart-label{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
.rt-veld{display:flex;flex-direction:column;gap:6px}
.rt-label{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}
.rt-chips{display:flex;gap:6px;flex-wrap:wrap}
.rt-chip{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;font-family:inherit;line-height:inherit;cursor:pointer;transition:all var(--overgang);user-select:none;border:1px solid var(--rand);background:var(--ivoor);color:var(--grijs)}
.rt-chip.aan{border-color:var(--donker);background:var(--donker);color:var(--ivoor)}
.rt-invoer{width:100%;box-sizing:border-box;border:1px solid var(--rand);border-radius:11px;padding:12px 14px;font-size:15px;font-family:inherit;font-variant-numeric:tabular-nums;background:var(--ivoor);color:var(--donker);outline:none;transition:border-color var(--overgang),box-shadow var(--overgang)}
.rt-invoer:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,90,40,.16)}

/* ---- Uitkomstkolom: route-kaarten + espresso-uitkomst ---- */
.rt-uitkomsten{display:flex;flex-direction:column;gap:14px}
.rt-route{background:var(--wit);border:1px solid var(--rand);border-radius:18px;box-shadow:var(--schaduw-kaart);padding:26px 28px}
.rt-route-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-tekst)}
.rt-regels{display:flex;flex-direction:column;margin-top:12px}
.rt-regel{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--rand);font-size:13.5px}
.rt-regel>span:first-child{color:var(--grijs)}
.rt-regel-bedrag{font-weight:600;flex:none;font-variant-numeric:tabular-nums;color:var(--donker)}
.rt-plus{color:var(--pil-groen)}
.rt-totaal{display:flex;justify-content:space-between;gap:14px;padding:11px 0 2px;font-size:14.5px;align-items:baseline}
.rt-totaal>span:first-child{font-weight:600}
.rt-totaal-bedrag{font-family:var(--serif);font-weight:600;font-size:21px;flex:none;font-variant-numeric:tabular-nums}
.rt-verdict{background:var(--espresso);border-radius:18px;padding:22px 26px}
.rt-verdict-label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--voet)}
.rt-verdict-tekst{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ivoor);margin-top:8px;line-height:1.4}

/* ---- Voetnoot + doorlees-link ---- */
.rt-voetnoot{max-width:980px;margin:22px auto 0}
.rt-voetnoot p{font-size:12.5px;color:var(--gedempt);margin:0;line-height:1.7}
.rt-voetnoot .tekstlink{margin-top:14px}

/* ---- Zonder JavaScript: korte melding i.p.v. een dood formulier ---- */
.rt-nojs{max-width:980px;margin:0 auto;background:var(--wit);border:1px dashed var(--cream);border-radius:14px;padding:18px 22px}
.rt-nojs p{margin:0;color:var(--grijs);font-size:14px;line-height:1.7}
.rt-nojs a{color:var(--donker);font-weight:600}

/* ---- Responsive (hoofdknik 919px; grid klapt zelf via auto-fit) ---- */
@media (max-width:919px){
  .rt-kaart{padding:24px 22px}
  .rt-route{padding:22px 22px}
}

/* ==========================================================================
   NICHE-pagina's (ni-) — gedeeld sjabloon voor de SEO-sectorpagina's
   (templates/niche.html + inhoud/niches/*.yaml). Waarden 1-op-1 uit
   Niche - Kraamzorg.dc.html: hero ivoor (links, 820px) -> herkenning
   (witte kaarten) -> werkwijze (espresso band) -> citaat (ivoor,
   gecentreerd) -> gedeeld CTA-blok (.ctak, bestaat al). Grids via
   auto-fit; geen extra knik nodig op 919/390.
   ========================================================================== */
.ni-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.ni-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(48px,6vw,84px) 28px clamp(48px,6vw,72px)}
.ni-hero-kolom{max-width:820px}
.ni-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
.ni-h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.5vw,64px);letter-spacing:-1.5px;line-height:1.02;margin:22px 0 0}
.ni-hero-intro{color:var(--grijs);font-size:16.5px;line-height:1.75;max-width:38em;margin:18px 0 0}
.ni-hero-ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.ni-hero-usps{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:12.5px;color:var(--gedempt)}
.ni-hero-usp{display:inline-flex;align-items:center;gap:7px}

/* ---- Secties: gedeelde kop + herkenning-kaarten ---- */
.ni-sectie{border-bottom:1px solid var(--rand)}
.ni-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(48px,6vw,72px) 28px}
.ni-h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.8vw,42px);letter-spacing:-1px;line-height:1.06;margin:16px 0 0}
.ni-h2-smal{max-width:20em}
.ni-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:36px}
.ni-kaart{background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:26px 28px;box-shadow:var(--schaduw-kaart)}
.ni-kaart-nr{font-family:var(--serif);font-weight:600;font-style:italic;font-size:15px;color:var(--accent-tekst)}
.ni-kaart-titel{font-weight:600;font-size:15.5px;margin-top:10px}
.ni-kaart p{font-size:13.5px;color:var(--grijs);margin:8px 0 0;line-height:1.7}
.ni-slot{color:var(--grijs);margin:28px 0 0;max-width:44em}
.ni-slot a{color:var(--donker);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--rand);transition:border-color var(--overgang)}
.ni-slot a:hover{border-color:var(--donker)}

/* ---- Werkwijze (espresso band, omrande kaarten) ---- */
.ni-werkwijze{background:var(--espresso)}
.ni-werkwijze-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(56px,7vw,84px) 28px}
.ni-werkwijze .ni-h2{color:var(--ivoor)}
.ni-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
.ni-stap{border:1px solid rgba(251,250,248,.14);border-radius:16px;padding:26px 28px}
.ni-stap-nr{font-family:var(--serif);font-weight:600;font-style:italic;font-size:15px;color:var(--accent)}
.ni-stap-titel{font-weight:600;font-size:15.5px;margin-top:10px;color:var(--ivoor)}
.ni-stap p{font-size:13.5px;color:var(--taupe);margin:8px 0 0;line-height:1.7}

/* ---- Citaat (ivoor, gecentreerd) ---- */
.ni-citaat{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.ni-citaat-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(48px,6vw,72px) 28px}
.ni-citaat-kolom{max-width:760px;margin:0 auto;text-align:center}
.ni-citaat-tekst{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(20px,2.6vw,27px);line-height:1.45;color:var(--donker);margin:0}
.ni-citaat-naam{font-size:13px;font-weight:600;margin-top:18px}
.ni-citaat-bron{font-size:11.5px;color:var(--gedempt);margin-top:3px}

/* ---------- Hero: ivoor, kruimelpad + kicker + versieregel ---------- */
.jur-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.jur-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(36px,4.5vw,56px) 28px}
.jur-kolom{max-width:760px;margin:0 auto}
.jur-kruimel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--gedempt)}
.jur-kruimel a{color:var(--gedempt);text-decoration:none;transition:color var(--overgang)}
.jur-kruimel a:hover{color:var(--donker)}
.jur-kruimel svg{width:10px;height:10px;flex:none}
.jur-kruimel-hier{color:var(--grijs);font-weight:500}
/* Design-afwijking t.o.v. de standaard-kicker: op de juridische pagina's
   is de kicker-tekst oranje (--accent-tekst; AA-donkerder dan het design-
   #C94E24), streepje blijft --accent via de macro. */
.jur-hero .kicker{color:var(--accent-tekst);margin-top:24px}
.jur-h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,46px);letter-spacing:-1px;line-height:1.06;margin:16px 0 0}
.jur-versie{font-size:12.5px;color:var(--gedempt);margin-top:14px}

/* ---------- Body: beige canvas, concept-callout + blokken ---------- */
.jur-body-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(36px,4.5vw,52px) 28px clamp(56px,7vw,80px)}

/* Genummerd artikelblok: serif-h2 met cursief oranje nummer */
.jur-blok{margin-top:clamp(28px,3.5vw,40px)}
.jur-h2{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.4px;line-height:1.2;margin:0}
.jur-nr{color:var(--accent-tekst);font-style:italic;margin-right:10px}
.jur-tekst{color:var(--grijs);font-size:14.5px;margin:12px 0 0;line-height:1.75}
.jur-link{color:inherit;text-decoration:underline;text-decoration-color:var(--rand);text-underline-offset:3px;transition:text-decoration-color var(--overgang)}
.jur-link:hover{text-decoration-color:var(--grijs)}

/* Puntenlijst met taupe bolletjes */
.jur-lijst{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.jur-lijst-item{display:flex;gap:11px;align-items:baseline;font-size:14px;color:var(--grijs);line-height:1.65}
.jur-dot{width:5px;height:5px;border-radius:50%;background:var(--taupe);flex:none;position:relative;top:-2px}

/* ==========================================================================
   404 — NIET GEVONDEN (nf-) — templates/404.html (W5).
   Vrij werk (geen design): ivoor hero in de smalle leeskolom-stijl van
   prijs/juridisch (760px gecentreerd) met kicker + woord-reveal-kop +
   drie route-kaarten. Hergebruikt .kicker/.wr/.punt en de tokens; bewust
   geen CTA-blok. Eén kolom die vanzelf meeschaalt — geen 919/390-knik.
   ========================================================================== */
.nf-hero{background:var(--ivoor);border-bottom:1px solid var(--rand)}
.nf-hero-binnen{max-width:var(--maxb);margin:0 auto;padding:clamp(56px,8vw,104px) 28px clamp(64px,9vw,120px)}
.nf-kolom{max-width:760px;margin:0 auto}
.nf-hero .kicker{color:var(--accent-tekst)}
.nf-h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.8vw,56px);letter-spacing:-1.5px;line-height:1.06;margin:18px 0 0}
.nf-intro{color:var(--grijs);font-size:16.5px;line-height:1.75;max-width:40em;margin:18px 0 0}

/* ---- Routes: drie kaarten onder elkaar ---- */
.nf-routes{display:flex;flex-direction:column;gap:14px;margin-top:clamp(32px,4vw,44px)}
.nf-kaart{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--wit);border:1px solid var(--rand);border-radius:16px;padding:20px 24px;box-shadow:var(--schaduw-kaart);text-decoration:none;color:inherit;transition:all var(--overgang)}
.nf-kaart:hover{transform:translateY(-2px);box-shadow:var(--schaduw-zweef)}
.nf-kaart-tekst{display:flex;flex-direction:column}
.nf-kaart-titel{font-weight:600;font-size:15.5px;color:var(--donker)}
.nf-kaart-sub{color:var(--grijs);font-size:13.5px;line-height:1.6;margin-top:3px}
.nf-kaart-pijl{flex:none;color:var(--donker);display:inline-flex}
.nf-kaart-pijl svg{transition:transform var(--overgang)}
.nf-kaart:hover .nf-kaart-pijl svg{transform:translateX(3px)}

/* Mobiele CTA-balk verbergen zodra er al een primaire knop of de voettekst in
   beeld staat (site.js zet de klasse). Zonder JavaScript blijft de balk staan:
   .ctabar-weg wordt dan nooit gezet. De transitie is een nette schuif; bij
   prefers-reduced-motion schakelt de globale regel hierboven hem uit. */
.sybctabar{transition:opacity .22s ease,transform .22s ease}
.sybctabar.ctabar-weg{opacity:0;transform:translateY(105%);pointer-events:none}

/* Zolang het mobiele menu openstaat blijft de vaste CTA-balk weg: het menu
   heeft zijn eigen knop, en twee oranje knoppen op een scherm is er een te
   veel. site.js zet body.menu-open. */
body.menu-open .sybctabar{opacity:0;transform:translateY(105%);pointer-events:none}