/* Keuzehulp en vergelijker (keuzehulp.html). Bouwt op site.css: .keuzes, .stappen, .card, .rows, .tabel. */

.kh-hero-link{margin-top:22px}
.js .kh-hero-link{animation:fadeUp 1s var(--ease) .34s both}
.kh-hero-link .act-link{text-decoration:underline;text-underline-offset:4px}

/* ---------- Het blok met de vragen ---------- */
.kh-grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);background:var(--panel);min-height:clamp(540px, 44vw, 640px)}
.kh-links{position:relative;min-width:0}
.kh-beeld{margin:0;position:absolute;inset:0}
.kh-beeld .crop{height:100%}
.kh-beeld figcaption{position:absolute;left:16px;bottom:16px;right:16px;display:flex;flex-wrap:wrap}
.kh-rechts{min-width:0;padding:clamp(32px, 4.4vw, 72px) clamp(24px, 4.4vw, 72px)}

.kh-vraag{display:flex;flex-direction:column;height:100%}
.kh-vraag .stappen{max-width:320px}
.kh-set{margin:34px 0 0;padding:0;border:0;min-width:0}
.kh-set legend{padding:0;float:left;width:100%}
.kh-set legend + *{clear:both}
.kh-kop{font-size:clamp(2rem, 3.4vw, 3rem);font-weight:700;letter-spacing:-.035em;line-height:1.08;max-width:18ch}
.kh-kop:focus{outline:none}
.kh-kop:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.kh-hint{padding-top:14px;color:var(--ink-2);max-width:52ch}

.kh-keuzes{margin-top:30px;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
.kh-keuzes--3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.kh-keuzes .keuze{min-height:108px;padding:22px 22px 20px;gap:14px;align-items:flex-start;transition:border-color .3s var(--ease-quart),background-color .3s var(--ease-quart),transform .5s var(--ease)}
.kh-keuzes .keuze:hover{transform:translateY(-2px)}
.kh-keuzes .keuze b{font-size:1.125rem;line-height:1.3;letter-spacing:-.01em}
.kh-keuzes .keuze small{margin-top:6px;line-height:1.45}
.kh-keuzes .keuze input{margin-top:3px}
.js .is-nieuw .kh-keuzes .keuze{animation:fadeUp .6s var(--ease) both;animation-delay:calc(80ms + var(--i, 0) * 55ms)}

.kh-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:36px}
.kh-nav .btn svg,.kh-naar svg{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.kh-nav .btn:not([disabled]):hover svg,.kh-naar:hover svg{transform:translateX(4px)}
.kh-terug{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font-size:.9375rem}
.kh-terug svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kh-terug:hover{text-decoration:underline}

/* ---------- Advies ---------- */
.kh-grid.is-advies{min-height:0}
.kh-grid.is-advies .kh-links{padding:clamp(24px, 3vw, 44px);padding-right:0}
.kh-kaart .card .desc{min-height:0}
.kh-kop span{color:var(--olive)}
.kh-advies .eyebrow{color:var(--ink-2)}
.kh-advies > .kh-kop{margin-top:14px}
.kh-reden{margin-top:20px;font-size:clamp(1.0625rem, 1.3vw, 1.25rem);line-height:1.6;max-width:56ch}
.kh-tips{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.kh-tips li{position:relative;padding:12px 16px 12px 44px;background:var(--sage-tint);font-size:.9375rem;line-height:1.5}
.kh-tips li::before{content:"";position:absolute;left:18px;top:19px;width:10px;height:5px;border-left:1.6px solid var(--olive);border-bottom:1.6px solid var(--olive);transform:rotate(-45deg)}
.kh-tips a{font-weight:700;text-underline-offset:3px}

.kh-volgende{margin-top:30px;padding-top:24px;border-top:1px solid var(--ink)}
.kh-volgende .eyebrow{font-size:.75rem}
.kh-datum{margin-top:10px;display:grid;gap:4px}
.kh-datum b{font-size:clamp(1.5rem, 2.2vw, 1.875rem);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.kh-datum > span{color:var(--ink-2)}
.kh-plek{font-weight:700;color:var(--ink)}
.kh-plek.low{color:var(--red)}
.kh-let{margin-top:10px;font-size:.9375rem;font-weight:600;color:var(--red)}
.kh-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:20px}
.kh-cta .act-link{text-decoration:underline}
.kh-cta-prijs{font-weight:700}
.kh-notitie{margin-top:16px;padding:14px 16px;background:var(--grey);font-size:.9375rem;line-height:1.5;max-width:60ch}
.kh-notitie a{font-weight:700;text-underline-offset:3px}
.kh-notitie .btn{display:flex;width:max-content;margin-top:12px}
.kh-volgende .kh-notitie + .kh-cta{margin-top:16px}
.kh-alt{margin-top:22px;font-size:.9375rem;color:var(--ink-2);max-width:56ch}
.kh-alt a{color:var(--ink);font-weight:700;text-underline-offset:3px;white-space:nowrap}
.kh-acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.kh-advies .vertrouwen{margin-top:22px}

.kh-antwoorden{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.kh-antwoorden p{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.kh-antwoorden ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kh-antwoorden button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--line);background:var(--paper);font:inherit;font-size:.875rem;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .3s var(--ease-quart)}
.kh-antwoorden button > span:first-child{font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.kh-antwoorden button:hover{border-color:var(--ink)}

.kh-data{margin-top:clamp(48px, 6vw, 80px)}
.kh-data-kop{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 24px}
.kh-data-kop .sub-h{margin-bottom:20px}
.kh-data-kop .act-link{text-decoration:underline}
.kh-data .row.kh-passend{background:var(--sage-tint);box-shadow:-16px 0 0 var(--sage-tint), 16px 0 0 var(--sage-tint)}
.kh-label-past{background:var(--olive);color:var(--on-dark)}

/* ---------- Vergelijker ---------- */
.kh-vergelijk-head{align-items:flex-end;flex-wrap:wrap}
.kh-vergelijk-head .eyebrow{margin-bottom:12px}
.kh-tabel{table-layout:fixed;min-width:980px}
.kh-tabel thead td{border-bottom:1px solid var(--ink);width:14%}
.kh-tabel th,.kh-tabel td{padding:16px 18px 16px 0;line-height:1.5}
.kh-tabel td,.kh-tabel thead th{padding-left:16px}
.kh-tabel thead th{vertical-align:bottom;padding-top:0;padding-bottom:14px;letter-spacing:0;text-transform:none;font-size:1rem}
.kh-tabel tbody th{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding-top:19px}
.kh-tabel .is-kern{background:var(--sage-tint)}
.kh-tabel .is-advies{box-shadow:inset 1px 0 0 var(--ink), inset -1px 0 0 var(--ink)}
.kh-th-naam{display:block;font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.kh-th-tags{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;margin-bottom:10px;align-items:flex-end}
.kh-th-tags .tag-red{font-size:.6875rem;padding:4px 7px}
.kh-prijs{font-size:1.0625rem;font-weight:800}
.kh-volg{font-weight:400;text-underline-offset:3px}
.kh-volg b{font-weight:700}
.kh-naar{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-underline-offset:3px}
.kh-tabel .label--kennis{white-space:normal}
.kh-tabel .ph{font-size:.75rem}
.kh-sup{font-size:.75em;line-height:0;margin-left:1px}
.kh-noot{margin-top:18px;font-size:.875rem;line-height:1.55;color:var(--ink-2);max-width:72ch}

@media (min-width: 761px){ .kh-stapel{display:none} }

/* ---------- FAQ ---------- */
.kh-faq-grid{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);gap:clamp(32px, 5vw, 80px);align-items:start}
.kh-faq-grid .eyebrow{margin-bottom:12px}
.kh-faq .faq details > div .btn{margin-top:4px;color:var(--ink)}

@media (max-width: 1180px){
  .kh-keuzes--3{grid-template-columns:1fr}
}
@media (max-width: 900px){
  .kh-grid{grid-template-columns:1fr;min-height:0;margin-inline:calc(-1 * var(--pad))}
  .kh-beeld{display:none}
  .kh-rechts{padding:32px var(--pad) 36px}
  .kh-grid.is-advies .kh-rechts{order:-1;padding-bottom:12px}
  .kh-grid.is-advies .kh-links{padding:24px var(--pad) 40px}
  .kh-kaart .card{max-width:420px}
  .kh-faq-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .kh-set{margin-top:26px}
  .kh-kop{font-size:clamp(1.85rem, 8vw, 2.4rem)}
  .kh-keuzes,.kh-keuzes--3{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .kh-keuzes .keuze{min-height:0;padding:18px 18px 16px}
  .kh-keuzes .keuze b{font-size:1.0625rem}
  .kh-nav{padding-top:28px}
  .kh-nav .btn{flex:1 1 auto;max-width:62%}
  .kh-acties .btn{flex:1 1 0}
  .kh-cta .btn{width:100%}
  .kh-breed{display:none}
  .kh-stapel tbody{display:grid;gap:12px}
  .kh-stapel tr{padding:20px 18px 14px;background:var(--paper);border:1px solid var(--line)}
  .kh-stapel tr.is-kern{background:var(--sage-tint);border-color:var(--sage-deep)}
  .kh-stapel tr.is-advies{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .kh-stapel tbody th{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .kh-stapel .kh-th-tags{margin:0;min-height:0}
  .kh-stapel td{grid-template-columns:minmax(0, 38%) 1fr;padding:7px 0;font-size:.9375rem;line-height:1.5}
  .kh-stapel tr > td:last-child{padding-top:12px}
}
@media (prefers-reduced-motion: reduce){
  .kh-keuzes .keuze:hover{transform:none}
}