/* ═══════════════════════════════════════════════════════
   TWEEHUIZENHULP.NL — stijl.css
   Extern gedeeld CSS. Één bestand, alle pagina's.
   <link rel="stylesheet" href="/stijl.css">
   ═══════════════════════════════════════════════════════ */

/* ── Variabelen ── */
:root{
  --spar:#143A37;
  --spar-donker:#0D2B29;
  --honing:#D9851E;
  --honing-donker:#B96D12;
  --salie:#9DBBAF;
  --zeeglas:#ECF2EF;
  --lijn:#D7E3DD;
  --inkt:#22332F;
  --krijt:#F8FAF9;
  --wmax:1080px;
  --radius:14px;
  --schaduw:0 4px 24px rgba(20,58,55,.10);
}

/* ── Reset & basis ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Albert Sans",system-ui,sans-serif;color:var(--inkt);line-height:1.65;font-size:16px;background:#fff}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Albert Sans",sans-serif;color:var(--spar);line-height:1.2}
p{margin-bottom:.9rem;line-height:1.75;color:#33524c}
a{color:var(--spar)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--honing);outline-offset:2px;border-radius:6px}

/* ── Wrap ── */
.wrap{max-width:var(--wmax);margin:0 auto;padding:0 20px}

/* ════════════════════════════════════════════════════════════
   KNOPPEN — één bron van waarheid, nergens anders definiëren
   ════════════════════════════════════════════════════════════
   Basis: .knop (vorm, geen kleur)
   Varianten (kies er altijd precies één):
     .knop-primair  oranje, wit  → altijd, op elke achtergrond
     .knop-gevuld   spar, wit    → op lichte achtergrond, sterke nadruk
     .knop-rustig   transparant, spar-rand → ALLEEN op lichte achtergrond
     .knop-licht    transparant, witte rand → ALLEEN op donkere achtergrond
   Contextregel: in een donker blok (.op-donker) wordt .knop-rustig
   automatisch licht, zodat een verkeerde keuze nooit onzichtbaar is.
   ──────────────────────────────────────────────────────────── */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-family:inherit;font-size:1rem;font-weight:600;line-height:1;padding:.7rem 1.4rem;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.knop:active{transform:scale(.98)}

/* Primair — oranje */
.knop-primair{background:var(--honing);color:#fff;border-color:var(--honing)}
.knop-primair:hover,.knop-primair:focus-visible{background:var(--honing-donker);border-color:var(--honing-donker);color:#fff}

/* Gevuld — donkergroen, voor nadruk op lichte achtergrond */
.knop-gevuld{background:var(--spar);color:#fff;border-color:var(--spar)}
.knop-gevuld:hover,.knop-gevuld:focus-visible{background:var(--spar-donker);border-color:var(--spar-donker);color:#fff}

/* Rustig — transparant met spar-rand, voor LICHTE achtergrond */
.knop-rustig{background:transparent;color:var(--spar);border-color:var(--lijn)}
.knop-rustig:hover,.knop-rustig:focus-visible{background:var(--spar);color:#fff;border-color:var(--spar)}

/* Licht — transparant met witte rand, voor DONKERE achtergrond */
.knop-licht{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.knop-licht:hover,.knop-licht:focus-visible{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

/* Contextcorrectie: rustig-knop op donker blok wordt automatisch licht */
.op-donker .knop-rustig{color:#fff;border-color:rgba(255,255,255,.5)}
.op-donker .knop-rustig:hover,.op-donker .knop-rustig:focus-visible{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

/* ── Knop-groepen (layout, geen kleur) ── */
/* Verticale stapel knoppen, volle breedte */
.knop-acties{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.knop-acties .knop{width:100%}
/* Wizard navigatie: volgende rechts, terug links als zichtbaar */
.wizard-acties{display:flex;justify-content:space-between;gap:1rem;margin-top:1.8rem}
.wizard-acties .knop{min-width:160px}
.wizard-acties #verderKnop{margin-left:auto}
.wizard-acties .knop[hidden]{display:none}

/* ── Header ── */
.kop{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--lijn)}
.kop-binnen{display:flex;align-items:center;gap:1.2rem;height:64px}
.merk{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.1rem;color:var(--spar);text-decoration:none;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.merk-logo{color:var(--spar);flex-shrink:0}
.kop-cta{margin-left:auto;font-size:.88rem;padding:.5rem 1.1rem;flex-shrink:0}

/* ── Navigatie ── */
.hoofd-nav{display:flex;align-items:center;gap:.2rem;margin-left:.4rem}
.nav-link{font-size:.9rem;font-weight:600;color:var(--spar);text-decoration:none;padding:.4rem .65rem;border-radius:8px;white-space:nowrap;background:transparent;border:none;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:.3rem;transition:background .12s}
.nav-link.actief{color:var(--honing)}
.nav-binnenkort{opacity:.45;cursor:default;pointer-events:none;position:relative}
.nav-binnenkort .nav-soon{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--salie);color:var(--spar);border-radius:999px;padding:.1rem .4rem;margin-left:.3rem;vertical-align:middle;line-height:1.4}
.nav-dropdown{position:relative}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--lijn);border-radius:12px;box-shadow:0 8px 28px rgba(20,58,55,.12);min-width:240px;padding:.4rem;z-index:200}
.nav-dropdown-menu a{display:block;padding:.5rem .9rem;font-size:.9rem;font-weight:500;color:var(--inkt);text-decoration:none;border-radius:8px;transition:background .1s}
.nav-dropdown-menu a:hover{background:var(--zeeglas)}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-knop svg{transition:transform .2s}
.nav-dropdown.open .nav-dropdown-knop svg{transform:rotate(180deg)}

/* ── Mobiel menu ── */
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.5rem;margin-left:auto}
.menu-toggle span{width:22px;height:2px;background:var(--spar);border-radius:2px}

/* ── Secties ── */
.sectie{padding:56px 0}
.sectie.s-wit{background:#fff}
.sectie.s-groen{background:var(--zeeglas)}
.sectie.s-donker{background:var(--spar-donker);color:#BFD2CB}
.sectie-label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--honing);margin-bottom:.5rem}
.wenkbrauw{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--honing);background:rgba(217,133,30,.12);border:1px solid rgba(217,133,30,.40);border-radius:8px;padding:.45rem .85rem;margin-bottom:1.1rem;max-width:100%;white-space:normal;line-height:1.5}
.op-donker .wenkbrauw{color:#F2B873;background:rgba(217,133,30,.16);border-color:rgba(217,133,30,.45)}
.intro{font-size:1.05rem;color:#42554f;max-width:640px;margin-bottom:2rem;line-height:1.7}

/* ── Kaarten ── */
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.kaart{background:var(--zeeglas);border-radius:16px;padding:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.kaart h3{font-size:1.1rem;margin-bottom:.5rem}
.kaart p{font-size:.95rem}
.ikoon-rond{width:44px;height:44px;border-radius:50%;background:var(--spar);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ikoon{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Donkere ikoon-rond (spar achtergrond): icoon altijd wit */
.ikoon-rond .ikoon{stroke:#fff}
/* Lichte ikoon-rond variant in kaarten op witte/lichte achtergrond: icoon spar-kleur */
.kaart .ikoon-rond{background:var(--zeeglas);border-radius:12px}
.kaart .ikoon-rond .ikoon{stroke:var(--spar)}
/* Partneralimentatie stap-kaarten: ikoon-rond behoudt spar achtergrond, icoon wit */
.pa-methode .kaart .ikoon-rond{background:var(--spar);border-radius:50%}
.pa-methode .kaart .ikoon-rond .ikoon{stroke:#fff}
.stapwoord{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--honing)}

/* Sticky header compensatie voor anchor links */
section[id],div[id]{scroll-margin-top:80px}
.artikel-hero{padding:64px 0 52px;background:linear-gradient(160deg,var(--spar-donker),var(--spar) 65%,#1C4A45)}
.artikel-hero h1{color:#fff;max-width:720px;font-size:clamp(1.8rem,4vw,2.8rem)}
.artikel-hero .intro{color:#BFD2CB;max-width:600px;margin-top:.8rem}
.artikel-hero .held-acties{display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
.artikel-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.artikel-hero-grid .artikel-hero-tekst{min-width:0}
.artikel-hero-illu{display:flex;align-items:center;justify-content:center}
.artikel-hero-illu img{width:100%;max-width:340px;height:auto}

/* ── Breadcrumb ── */
.breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:#8AA39A;padding:.8rem 0;list-style:none;flex-wrap:wrap}
.breadcrumb li{display:flex;align-items:center;gap:.4rem}
.breadcrumb li:not(:last-child)::after{content:"/";color:#C8D9D3}
.breadcrumb a{color:#8AA39A;text-decoration:none}
.breadcrumb a:hover{color:var(--spar)}

/* ── Artikel inhoud ── */
.artikel-wrap{max-width:780px}
.artikel-wrap h2{font-size:1.65rem;margin:3rem 0 .7rem;padding-top:.5rem;border-top:1px solid var(--lijn);color:var(--spar)}
.artikel-wrap h2:first-of-type{border-top:none;margin-top:0}
.artikel-wrap h3{font-size:1.1rem;margin:1.8rem 0 .5rem;color:var(--spar)}
.artikel-wrap p{margin-bottom:.9rem;line-height:1.8;color:#33524c}
.artikel-wrap ul,.artikel-wrap ol{margin:.5rem 0 1.2rem 1.4rem;line-height:1.8;color:#33524c}
.artikel-wrap li{margin-bottom:.3rem}
.artikel-wrap a{color:var(--spar);font-weight:600}
.artikel-wrap strong{color:var(--inkt)}

/* Inhoudsopgave */
.inhoudsopgave{background:var(--zeeglas);border-radius:12px;padding:1.2rem 1.5rem;margin:2rem 0;border-left:4px solid var(--honing)}
.inhoudsopgave h4{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--honing);margin-bottom:.7rem}
.inhoudsopgave ol{margin-left:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.inhoudsopgave li a{color:var(--spar);font-size:.94rem;text-decoration:none;font-weight:500}
.inhoudsopgave li a:hover{text-decoration:underline}

/* Artikel CTA blok */
.artikel-cta{background:var(--zeeglas);border-radius:12px;padding:1.4rem 1.6rem;margin:2.5rem 0;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.artikel-cta p{margin:0;font-weight:600;color:var(--spar);flex:1;min-width:180px}

/* Info kader */
.kader{background:var(--zeeglas);border-radius:10px;padding:1rem 1.2rem;margin:1.2rem 0;border-left:3px solid var(--salie)}
.kader.waarschuwing{background:#FBF3E6;border-left-color:var(--honing)}
.kader strong{color:var(--spar);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:.3rem}

/* Tabel */
.tabel-wrap{overflow-x:auto;margin:1rem 0 1.5rem}
table.info{width:100%;border-collapse:collapse;font-size:.94rem}
table.info th{background:var(--spar);color:#fff;padding:.6rem .8rem;text-align:left;font-size:.82rem;letter-spacing:.06em}
table.info td{padding:.6rem .8rem;border-bottom:1px solid var(--lijn)}
table.info tr:nth-child(even) td{background:var(--zeeglas)}
table.info tr.actueel td{background:#E8F4D4;font-weight:600}

/* FAQ op subpagina's */
.faq-sectie details{border-bottom:1px solid var(--lijn)}
.faq-sectie details summary{cursor:pointer;font-weight:600;color:var(--spar);padding:1rem .2rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-sectie details summary::-webkit-details-marker{display:none}
.faq-sectie details summary::after{content:"+";font-size:1.4rem;font-weight:300;color:var(--honing);flex-shrink:0}
.faq-sectie details[open] summary::after{content:"−"}
.faq-sectie details p{padding:.2rem .2rem 1rem;color:#42554f;line-height:1.7;font-size:.97rem}

/* Gerelateerde kaarten */
.gerelateerd{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0}
.gerelateerd-kaart{background:var(--zeeglas);border-radius:12px;padding:1.2rem;text-decoration:none;display:flex;flex-direction:column;gap:.4rem;transition:background .15s}
.gerelateerd-kaart:hover{background:#DCE9E3}
.gerelateerd-kaart .gc-label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--honing)}
.gerelateerd-kaart .gc-titel{font-size:1rem;font-weight:700;color:var(--spar)}
.gerelateerd-kaart .gc-tekst{font-size:.88rem;color:#5d716b;line-height:1.5}

/* ── FAQ homepage ── */
.faq details{border-bottom:1px solid var(--lijn)}
.faq details summary{cursor:pointer;font-weight:600;color:var(--spar);padding:1rem .2rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq details summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:300;color:var(--honing);flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:.2rem .2rem 1rem;color:#42554f;line-height:1.7;font-size:.96rem}
.faq details ul{padding:.2rem .2rem .8rem 1.4rem;color:#42554f;font-size:.96rem;line-height:1.7}

/* ── SEO-content sectie ── */
.seo-content{background:#fff}
.seo-wrap{max-width:780px}
.seo-wrap h2{font-size:1.75rem;margin:2.5rem 0 .7rem;color:var(--spar);padding-top:.5rem}
.seo-wrap h2:first-of-type{margin-top:0}
.seo-wrap h3{font-size:1.1rem;margin:1.6rem 0 .5rem;color:var(--spar);padding-top:.4rem;border-top:1px solid var(--lijn)}
.seo-wrap h3:first-of-type{border-top:none}
.seo-wrap p{margin-bottom:.9rem;line-height:1.75;color:#33524c}
.seo-wrap ul{margin:.4rem 0 1rem 1.4rem;line-height:1.75;color:#33524c}
.seo-wrap a{color:var(--spar);font-weight:600}
.seo-cta-blok{background:var(--zeeglas);border-radius:12px;padding:1.4rem 1.6rem;margin:2rem 0;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.seo-cta-blok p{margin:0;font-weight:600;color:var(--spar);flex:1;min-width:180px}
.seo-lijst{list-style:none;margin:.5rem 0 1rem;padding:0;display:flex;flex-direction:column;gap:.3rem}
.seo-lijst li{padding:.45rem .7rem;background:#FAFCFB;border-radius:6px;font-size:.95rem;color:#33524c;border-left:3px solid var(--salie)}
.seo-links{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.seo-links li{padding:.5rem .8rem;background:var(--zeeglas);border-radius:8px;font-size:.95rem}
.seo-links a{color:var(--spar);font-weight:600;text-decoration:none}
.seo-links a:hover{text-decoration:underline}

/* ── Vertrouwensectie ── */
.vertrouwen .kaart{background:#fff;border:1px solid var(--lijn)}

/* ── Footer ── */
footer{background:var(--spar-donker);color:#BFD2CB;padding:52px 0 32px;font-size:.88rem}
footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
footer h3,footer h4{color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;font-family:"Albert Sans",sans-serif;font-weight:700}
footer a{display:block;color:#BFD2CB;text-decoration:none;margin-bottom:.5rem;transition:color .12s}
footer a:hover{color:#fff}
footer .merk{color:#fff;font-size:1.05rem;margin-bottom:.7rem;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;display:flex;align-items:center;gap:.5rem}
footer p{color:#8AA39A;margin-bottom:.5rem;line-height:1.6}
footer .voetnoot{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:1.2rem;color:#5d716b;font-size:.8rem;line-height:1.6}

/* ── Auteurblok / EEAT / bronnen (gedeeld door alle informatiepagina's) ── */
.auteur-blok{background:var(--zeeglas);border-left:3px solid var(--spar);padding:1rem 1.2rem;border-radius:0 8px 8px 0;margin:2rem 0;font-size:.88rem;color:#42554f}
.auteur-blok strong{color:var(--spar);display:block;margin-bottom:.25rem}
.ymyl-disclaimer{background:#FBF3E6;border:1px solid #ECD9B8;border-radius:8px;padding:.9rem 1.1rem;margin:1.6rem 0;font-size:.88rem;color:#6B3E10}
.ymyl-disclaimer strong{display:block;margin-bottom:.2rem}
.aandacht{background:#FBF3E6;border:1px solid #ECD9B8;border-radius:8px;padding:.8rem 1rem;margin:.6rem 0;font-size:.9rem;color:#6B3E10}
.aandacht strong{color:#6B3E10}
.bronnen-blok{border:1px solid var(--lijn);border-radius:10px;padding:1.2rem 1.4rem;margin:1.8rem 0}
.bronnen-blok h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;color:var(--spar);margin-bottom:.8rem}
.bronnen-lijst{list-style:none;padding:0;margin:0}
.bronnen-lijst li{padding:.4rem 0;border-bottom:1px dotted var(--lijn);font-size:.85rem}
.bronnen-lijst li:last-child{border-bottom:none}
.bronnen-lijst a{color:var(--spar);text-decoration:none}
.bronnen-lijst a:hover{text-decoration:underline}
.afwijkingen-lijst{list-style:none;padding:0;margin:.6rem 0 1rem}
.afwijkingen-lijst li{padding:.4rem 0 .4rem 1.6rem;position:relative;border-bottom:1px dotted var(--lijn);font-size:.9rem;color:#42554f}
.afwijkingen-lijst li::before{content:"!";position:absolute;left:0;top:.5rem;width:14px;height:14px;background:var(--honing);color:#fff;border-radius:50%;font-size:.65rem;font-weight:700;text-align:center;line-height:14px}
.update-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:#42554f;background:var(--zeeglas);border:1px solid var(--lijn);border-radius:999px;padding:.25rem .75rem;margin-bottom:1.2rem}
.update-badge svg{color:var(--honing)}

/* ── Kennisbank / categoriepagina ── */
.kennisbank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.5rem 0}
.kb-kaart{background:#fff;border:1px solid var(--lijn);border-radius:14px;padding:1.4rem;text-decoration:none;display:flex;flex-direction:column;gap:.5rem;transition:box-shadow .15s,border-color .15s}
.kb-kaart:hover{box-shadow:0 4px 16px rgba(20,58,55,.1);border-color:var(--salie)}
.kb-kaart .kb-label{font-size:.73rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--honing)}
.kb-kaart .kb-titel{font-size:1rem;font-weight:700;color:var(--spar);line-height:1.3}
.kb-kaart .kb-omschrijving{font-size:.87rem;color:#5d716b;line-height:1.5}

/* ── Inhoudsopgave ── */
.inhoudsopgave{background:var(--zeeglas);border-radius:12px;padding:1.4rem 1.6rem;margin:1.5rem 0}
.inhoudsopgave h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--honing);margin-bottom:.8rem}
.inhoudsopgave ol{padding-left:1.2rem;color:var(--spar)}
.inhoudsopgave ol li{margin-bottom:.3rem;font-size:.93rem}
.inhoudsopgave a{color:var(--spar);text-decoration:underline;text-decoration-color:var(--lijn)}
.inhoudsopgave a:hover{text-decoration-color:var(--spar)}

/* ── Volgende stap sectie ── */
.volgende-stap{background:linear-gradient(135deg,var(--spar-donker),var(--spar));border-radius:16px;padding:2.5rem;margin:3rem 0;color:#fff;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.volgende-stap h3{color:#fff;font-size:1.3rem;margin-bottom:.5rem}
.volgende-stap p{color:#BFD2CB;margin:0 0 1.2rem;max-width:480px}
.volgende-stap .knop-licht{background:#fff;color:var(--spar);font-weight:700;border-radius:999px;padding:.7rem 1.5rem;text-decoration:none;font-size:.95rem;display:inline-block}
.volgende-stap .knop-licht:hover{background:var(--zeeglas)}

/* ── Bronvermelding ── */
.bronnen{border-top:1px solid var(--lijn);padding-top:1.2rem;margin-top:2.5rem}
.bronnen h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#7a9991;margin-bottom:.6rem}
.bronnen ul{list-style:none;padding:0}
.bronnen li{font-size:.82rem;color:#7a9991;margin-bottom:.3rem}
.bronnen a{color:#7a9991;text-decoration:underline}

/* ── Responsive ── */
@media(max-width:840px){
  .menu-toggle{display:flex}
  .hoofd-nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;padding:1.5rem;gap:.2rem;overflow-y:auto;border-top:1px solid var(--lijn);z-index:99}
  .hoofd-nav.open{display:flex}
  .nav-link{font-size:1.1rem;padding:.7rem .9rem}
  .nav-dropdown-menu{position:static;box-shadow:none;border:none;background:var(--zeeglas);margin:.2rem 0;border-radius:8px}
  .nav-dropdown.open .nav-dropdown-menu{display:block}
  .kop-cta{display:none}
  .sectie{padding:48px 0}
  .drie,.gerelateerd{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
  footer .voetnoot{grid-column:1/-1}
  .artikel-hero{padding:48px 0 36px}
  .artikel-hero-grid{grid-template-columns:1fr}
  .artikel-hero-illu{display:none}
  .kennisbank-grid{grid-template-columns:1fr 1fr}
  .volgende-stap{flex-direction:column;gap:1.2rem}
}
@media(max-width:560px){
  footer .wrap{grid-template-columns:1fr}
  .artikel-cta,.seo-cta-blok{flex-direction:column;align-items:flex-start}
  .kennisbank-grid{grid-template-columns:1fr}
  .artikel-hero .held-acties,.pa-hero .held-acties,.hero .held-acties{flex-direction:column;align-items:stretch}
  .artikel-hero .held-acties .knop,.pa-hero .held-acties .knop,.hero .held-acties .knop{width:100%;white-space:normal}
}

/* ── Strook / rekenstrook (gedeeld door kinder- en partneralimentatie) ── */
.strook{background:var(--krijt);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);padding:1.4rem 1.5rem;font-variant-numeric:tabular-nums}
.strook-kop{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--salie);border-bottom:1.5px dashed var(--lijn);padding-bottom:.6rem;margin-bottom:.6rem;display:flex;justify-content:space-between}
.strook-regel{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px dotted var(--lijn);font-size:.97rem}
.strook-regel .post{color:var(--inkt)}
.strook-regel .bedrag{font-weight:600;color:var(--spar);white-space:nowrap}
.strook-regel.af .bedrag::before{content:"af  ";font-weight:400;color:var(--salie)}
.strook-regel .bedrag.slot{font-weight:500;font-style:italic;color:#7d938c;font-size:.84rem;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.strook-regel .bedrag.slot svg{flex-shrink:0}
.strook-totaal{display:flex;justify-content:space-between;align-items:baseline;padding-top:.9rem;margin-top:.3rem;border-top:2px solid var(--spar)}
.strook-totaal .post{font-weight:600;color:var(--spar)}
.strook-totaal .bedrag{font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;font-weight:700;color:var(--spar);white-space:nowrap}
.strook-totaal .bedrag.band{font-size:clamp(1.15rem,4.2vw,1.7rem)}
.strook-voet{font-size:.8rem;color:#5d716b;margin-top:.7rem}
@keyframes regel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.strook.animeer .strook-regel,.strook.animeer .strook-totaal{animation:regel-in .45s ease both}
.strook.animeer .strook-regel:nth-child(2){animation-delay:.08s}
.strook.animeer .strook-regel:nth-child(3){animation-delay:.16s}
.strook.animeer .strook-regel:nth-child(4){animation-delay:.24s}
.strook.animeer .strook-regel:nth-child(5){animation-delay:.32s}
.strook.animeer .strook-regel:nth-child(6){animation-delay:.40s}
.strook.animeer .strook-regel:nth-child(7){animation-delay:.48s}
.strook.animeer .strook-totaal{animation-delay:.6s}

/* ── Over-ons pagina ── */
.over-principe{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.8rem 0}
.over-principe-kaart{background:var(--zeeglas);border-radius:12px;padding:1.4rem}
.over-principe-kaart strong{display:block;color:var(--spar);margin-bottom:.4rem;font-size:1rem}
.over-principe-kaart p{font-size:.9rem;color:#42554f;margin:0}
.bron-blok{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:1.4rem;margin:1.8rem 0}
.bron-blok h3{font-size:.95rem;margin:0 0 1rem;color:var(--spar)}
.bron-lijst{list-style:none;padding:0;margin:0}
.bron-lijst li{padding:.5rem 0;border-bottom:1px dotted var(--lijn);font-size:.9rem;display:flex;align-items:baseline;gap:.6rem}
.bron-lijst li:last-child{border-bottom:none}
.bron-lijst li::before{content:"\2197";color:var(--honing);font-size:.85rem;flex-shrink:0}
.disclaimer-blok{background:#FBF3E6;border:1px solid #ECD9B8;border-radius:10px;padding:1.2rem 1.4rem;margin:2rem 0;font-size:.9rem;color:#6B3E10}
.disclaimer-blok strong{display:block;margin-bottom:.4rem}
.over-ons-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media(max-width:720px){
  .over-principe{grid-template-columns:1fr}
  .over-ons-hero-grid{grid-template-columns:1fr}
  .over-ons-svg{display:none}
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE (kinderalimentatie) — hero, wizard, modal, prijzen
   ═══════════════════════════════════════════════════════════ */

/* ── Hero (homepage kinderalimentatie) ── */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--spar-donker) 0%,var(--spar) 55%,#1C4A45 100%);padding:84px 0 96px;border-radius:0 0 32px 32px}
.hero::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(157,187,175,.22),transparent 65%);top:-200px;right:-140px;pointer-events:none}
.hero::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(217,133,30,.15),transparent 65%);bottom:-220px;left:-160px;pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.8vw,3.3rem);font-weight:700;margin-bottom:1rem;color:#fff}
.hero p.sub{font-size:1.1rem;max-width:34rem;margin-bottom:1.6rem;color:#CFE0D8}
.hero-acties{display:flex;gap:.8rem;flex-wrap:wrap}
.zeker{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.8rem;font-size:.92rem;color:#CFE0D8}
.zeker span{display:flex;align-items:center;gap:.45rem}
.hero .strook{box-shadow:0 30px 70px rgba(0,0,0,.35);border-color:rgba(255,255,255,.5)}
.hero-visual{position:relative;padding:26px 0 0 26px}
.hero-visual .strook{position:relative;z-index:2;box-shadow:0 30px 70px rgba(0,0,0,.35);border-color:rgba(255,255,255,.5)}
.pdf-mock{position:absolute;z-index:1;top:0;left:0;width:82%;height:88%;background:#fff;border-radius:12px;transform:rotate(-6deg);box-shadow:0 18px 45px rgba(0,0,0,.3);padding:1.1rem;overflow:hidden}
.pdf-mock::before{content:"";display:block;height:100%;background:repeating-linear-gradient(to bottom,var(--lijn) 0 2px,transparent 2px 14px);opacity:.7;border-radius:4px}
.pdf-mock .pdf-label{position:absolute;top:.8rem;left:.9rem;background:var(--honing);color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;border-radius:6px;padding:.2rem .5rem}
.pdf-mock .pdf-zegel{position:absolute;right:.9rem;bottom:.9rem;width:64px;height:64px;border:2px solid var(--salie);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Bricolage Grotesque",sans-serif;font-size:.55rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--spar);transform:rotate(8deg);background:#fff}
.badge-zweef{position:absolute;z-index:3;top:6px;right:-8px;background:var(--honing);color:#fff;font-weight:600;font-size:.78rem;border-radius:999px;padding:.4rem .85rem;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.hero-lijn{position:absolute;left:-30px;bottom:-18px;width:min(560px,70%);opacity:.32;pointer-events:none;z-index:0}
.zeker span{display:inline-flex;align-items:center;gap:.5rem}

/* ── Wizard (rekenmachine) ── */
.wizard{background:var(--krijt);border:1px solid var(--lijn);border-radius:var(--radius);box-shadow:var(--schaduw);max-width:680px;margin:0 auto;padding:2rem;}
.stap-teller{font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--salie);margin-bottom:.4rem}
.balk{height:6px;background:var(--zeeglas);border-radius:99px;margin-bottom:1.6rem;overflow:hidden}
.balk-vul{height:100%;width:20%;background:var(--salie);border-radius:99px;transition:width .3s ease}
.wizard h3{font-size:1.35rem;margin-bottom:.4rem}
.wizard p.hulp{font-size:.95rem;color:#5d716b;margin-bottom:1.3rem}
.veld{margin-bottom:1.2rem}
.veld label{display:block;font-weight:600;font-size:.97rem;margin-bottom:.35rem;color:var(--spar)}
.veld .toelichting{display:block;font-weight:400;font-size:.85rem;color:#5d716b;margin-top:.15rem}
.euro-invoer{display:flex;align-items:center;background:#fff;border:1.5px solid var(--lijn);border-radius:10px;overflow:hidden}
.euro-invoer:focus-within{border-color:var(--spar)}
.euro-invoer span{padding:.7rem .9rem;background:var(--zeeglas);color:var(--spar);font-weight:600}
.euro-invoer input{border:0;outline:0;flex:1;padding:.7rem .9rem;font-size:1.05rem;font-family:inherit;min-width:0;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:1.5px solid var(--lijn);background:#fff;border-radius:999px;padding:.55rem 1.1rem;font-family:inherit;font-size:1rem;cursor:pointer;transition:all .12s ease}
.chip[aria-pressed="true"]{background:var(--spar);border-color:var(--spar);color:#fff;font-weight:600}
.vink{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .2rem;cursor:pointer}
.vink input{width:20px;height:20px;margin-top:3px;accent-color:var(--spar);flex-shrink:0}
.vink span{font-size:.97rem}
.wizard-acties{display:flex;justify-content:space-between;gap:1rem;margin-top:1.8rem}
.wizard-acties #verderKnop{margin-left:auto}
.fout{color:#A33B12;font-size:.9rem;margin-top:.5rem;display:none}
.fout.zichtbaar{display:block}
.melding{background:#FBF3E6;border:1px solid #ECD9B8;border-radius:10px;padding:.8rem 1rem;font-size:.92rem;margin-top:1rem}
.maatwerk{background:#fff;border:1.5px solid var(--honing);border-radius:10px;padding:1rem 1.2rem;margin-top:1rem;font-size:.95rem}
.weetje{background:var(--zeeglas);border-left:3px solid var(--salie);border-radius:0 10px 10px 0;padding:.7rem 1rem;font-size:.88rem;color:#42554f;margin-top:1.2rem}
.weetje strong{color:var(--spar)}

/* ── Resultaat en prijzen ── */
.resultaat-cta{background:var(--spar);color:#E8F0ED;border-radius:var(--radius);padding:1.6rem;margin-top:1.6rem}
.resultaat-cta h3{color:#fff;font-size:1.25rem;margin-bottom:.5rem}
.resultaat-cta ul{list-style:none;margin:.8rem 0 1.2rem}
.resultaat-cta li{padding:.25rem 0 .25rem 1.5rem;position:relative;font-size:.95rem}
.resultaat-cta li::before{content:"✓";position:absolute;left:0;color:var(--honing);font-weight:700}
.prijsregel{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.prijsregel .nu{font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;font-weight:700;color:#fff;white-space:nowrap;margin-left:auto}
.prijsregel .was{font-size:.9rem;color:var(--salie);line-height:1.4}
.prijskaart .wie{display:flex;align-items:center;gap:.5rem}
.prijskaart .wie .ikoon{width:18px;height:18px;color:var(--salie)}
.vergelijk{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.prijskaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column}
.prijskaart.uitgelicht{border:2px solid var(--spar);box-shadow:var(--schaduw)}
.prijskaart .wie{font-weight:600;color:var(--spar)}
.prijskaart .prijs{font-family:"Bricolage Grotesque",sans-serif;font-size:1.9rem;font-weight:700;color:var(--spar);margin:.4rem 0}
.prijskaart p{font-size:.93rem;flex:1}
.prijskaart .knop{margin-top:1.2rem}
.li-optioneel{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--honing);background:rgba(217,133,30,.18);border-radius:999px;padding:.1rem .5rem;margin-left:.45rem;vertical-align:middle;white-space:nowrap}
.li-optioneel svg{flex-shrink:0}

/* ── Rapport-grid en FAQ homepage ── */
.rapport-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.rapport-grid .kaart h3{margin-bottom:.5rem}
.faq details{border-bottom:1px solid var(--lijn)}
.faq details summary{cursor:pointer;font-weight:600;color:var(--spar);padding:1rem .2rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq details summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:300;color:var(--honing);flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:.2rem .2rem 1rem;color:#42554f;line-height:1.7;font-size:.96rem}
.faq details ul{padding:.2rem .2rem .8rem 1.4rem;color:#42554f;font-size:.96rem;line-height:1.7}

/* ── Checkout modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(13,43,41,.72);z-index:100;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .22s ease;padding:1rem}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:22px;width:100%;max-width:480px;padding:0;box-shadow:0 8px 48px rgba(0,0,0,.28);transform:translateY(16px) scale(.98);transition:transform .26s cubic-bezier(.22,.8,.36,1)}
.modal-overlay.open .modal{transform:translateY(0) scale(1)}
.modal-kop{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.5rem .8rem;border-bottom:1px solid var(--lijn)}
.modal-kop h3{font-size:1.1rem;color:var(--spar);margin:0}
.modal-sluit{background:none;border:none;cursor:pointer;color:var(--salie);font-size:1.5rem;line-height:1;padding:.2rem .4rem;border-radius:6px}
.modal-sluit:hover{color:var(--spar)}
.modal-body{padding:1.3rem 1.5rem}
.modal-regel{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-bottom:1px dotted var(--lijn);gap:.8rem}
.modal-regel:last-of-type{border-bottom:none}
.modal-regel-tekst strong{display:block;color:var(--spar);font-size:.97rem}
.modal-regel-tekst span{display:block;font-size:.82rem;color:#5d716b;margin-top:.1rem}
.modal-regel-prijs{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--spar);font-size:1.05rem;white-space:nowrap}
.modal-optie-rij{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:var(--zeeglas);border-radius:10px;padding:.8rem 1rem;margin:.4rem 0}
.modal-optie-rij label{display:flex;align-items:center;gap:.7rem;cursor:pointer;flex:1}
.modal-optie-rij .toggle-wrap{position:relative;flex-shrink:0}
.modal-optie-rij .toggle-wrap input{position:absolute;opacity:0;width:0;height:0}
.modal-optie-rij .toggle-slider{display:block;width:46px;height:26px;background:var(--salie);border-radius:999px;transition:background .18s ease;position:relative}
.modal-optie-rij .toggle-slider::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s ease}
.modal-optie-rij .toggle-wrap input:checked + .toggle-slider{background:var(--honing)}
.modal-optie-rij .toggle-wrap input:checked + .toggle-slider::after{transform:translateX(20px)}
.modal-optie-rij .toggle-wrap input:focus-visible + .toggle-slider{outline:3px solid var(--honing);outline-offset:2px}
.modal-optie-label strong{display:block;font-size:.92rem;color:var(--spar)}
.modal-optie-label span{display:block;font-size:.8rem;color:#5d716b}
.modal-optie-prijs{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--honing);font-size:1rem;white-space:nowrap;flex-shrink:0}
.modal-totaal{display:flex;align-items:baseline;justify-content:space-between;padding:1rem 0 .3rem;border-top:2px solid var(--spar);margin-top:.4rem}
.modal-totaal .t-label{font-weight:700;color:var(--spar)}
.modal-totaal .t-bedrag{font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;font-weight:700;color:var(--spar)}
.modal-footer{padding:.3rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.6rem}
.modal-footer .knop{width:100%}
.modal-mail-veld{margin-top:.8rem}
.modal-mail-veld label{font-size:.82rem;font-weight:600;color:var(--spar);display:block;margin-bottom:.35rem}
.modal-mail-veld input{width:100%;border:1.5px solid var(--lijn);border-radius:10px;padding:.65rem .9rem;font-size:1rem;font-family:inherit;color:var(--inkt);outline:none;transition:border-color .15s}
.modal-mail-veld input:focus{border-color:var(--spar)}
.modal-mail-veld input.fout-veld{border-color:#C0392B}
.modal-mail-fout{font-size:.82rem;color:#C0392B;margin-top:.3rem;display:none}
.modal-mail-fout.zichtbaar{display:block}
.modal-veilig{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.78rem;color:#5d716b;padding-top:.4rem}
.modal-veilig svg{flex-shrink:0}

/* ── Homepage responsive ── */
@media(max-width:840px){
  .hero{padding:52px 0 64px;border-radius:0 0 22px 22px}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-visual{display:none}
  .vergelijk,.rapport-grid{grid-template-columns:1fr}
  .wizard{padding:1.4rem}
  .strook-totaal .bedrag{font-size:1.45rem}
  .prijsregel{flex-direction:column;gap:.3rem}
  .zeker{flex-direction:column;gap:.6rem}
}


/* ═══════════════════════════════════════════════════════════
   PARTNERALIMENTATIE — hero, pakketten, vergelijktabel
   ═══════════════════════════════════════════════════════════ */
.pa-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0D2B29 0%,#143A37 55%,#1C4A45 100%);padding:72px 0 80px}
.pa-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.pa-hero h1{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;color:#fff;line-height:1.15;margin-bottom:1rem;max-width:560px}
.pa-hero .sub{color:#BFD2CB;font-size:1.05rem;line-height:1.7;max-width:500px;margin-bottom:2rem}
.pa-hero .held-acties{display:flex;gap:.8rem;flex-wrap:wrap}
.pa-hero .zeker{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;margin-top:1.4rem}
.pa-hero .zeker span{display:flex;align-items:center;gap:.4rem;font-size:.87rem;color:#9DBBAF}
.pa-hero .ikoon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.pa-hero .strook-kop{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--spar);margin-bottom:.8rem;font-weight:600}
.pa-hero .strook-totaal .band{color:var(--honing);font-size:1.1rem}
.pa-hero .strook-voet{font-size:.72rem;color:#5d8a7e;margin-top:.8rem;line-height:1.5}
.pa-hero .strook .slot{display:flex;align-items:center;gap:.3rem;color:#5d8a7e}
.pa-hero .strook .band{color:#D9851E;font-size:1.1rem}
.pakketten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.5rem 0}
.pakket-kaart{border:1.5px solid var(--lijn);border-radius:14px;padding:1.4rem;background:#fff;display:flex;flex-direction:column}
.pakket-kaart.uitgelicht{border-color:var(--honing);border-width:2px}
.pakket-kaart .pk-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--honing);margin-bottom:.6rem}
.pakket-kaart .pk-prijs{font-size:2rem;font-weight:700;color:var(--spar);font-family:"Bricolage Grotesque",sans-serif;margin:.3rem 0}
.pakket-kaart .pk-sub{font-size:.85rem;color:#5d716b;margin-bottom:1rem;flex:1}
.pakket-kaart ul{list-style:none;padding:0;margin:0 0 1.2rem;font-size:.85rem;color:#42554f}
.pakket-kaart ul li{padding:.25rem 0 .25rem 1.2rem;position:relative;border-bottom:1px dotted var(--lijn)}
.pakket-kaart ul li::before{content:"✓";position:absolute;left:0;color:var(--honing);font-weight:700}
.tabel-vergelijk{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.93rem}
.tabel-vergelijk th{background:var(--zeeglas);padding:.7rem 1rem;text-align:left;font-weight:700;color:var(--spar);border-bottom:2px solid var(--lijn)}
.tabel-vergelijk td{padding:.65rem 1rem;border-bottom:1px solid var(--lijn);color:#42554f}
.tabel-vergelijk tr:nth-child(even) td{background:#fafcfb}

/* ── Partneralimentatie responsive ── */
@media(max-width:840px){
  .pa-hero-grid,.pakketten{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pakketten{grid-template-columns:1fr}
}