/* ============================================================================
   Kredietbewust — funnel.css: Berekenen & Vergelijk funnel (/vergelijken/).
   Onderdeel van het kbd-design-systeem (DigiBoox-look): draait binnen de
   marketing-shell (kbd.css + Nunito geladen), gebruikt de kbd-header/footer
   en kbdBtn/kbdEyebrow waar mogelijk. Alleen tokens (BRAND.md hard rule 6).
   Snelle mobiele funnel: één kaart, grote tegels, duidelijke voortgang.
   ========================================================================== */

.kb-funnelpage{font-family:var(--kb-font);color:var(--kb-ink);background:var(--kb-grad-soft);border-bottom:1px solid var(--kb-line);padding:clamp(40px,6vw,76px) 0 clamp(56px,8vw,96px);}
.kb-funnelpage *{box-sizing:border-box;}
.kb-funnelpage .kb-wrap{max-width:820px;margin:0 auto;padding:0 20px;}

.kb-funnelpage__intro{text-align:center;margin-bottom:30px;}
.kb-funnelpage__intro .kbdEyebrow{margin-bottom:16px;}
.kb-funnelpage__intro h1{font-size:clamp(1.8rem,3.8vw,2.5rem);font-weight:800;line-height:1.14;letter-spacing:-.7px;margin:0 0 12px;}
p.kb-funnelpage__lead{font-size:1.05rem;line-height:1.65;color:var(--kb-ink-2);max-width:560px;margin:0 auto;}

/* -- De funnel-kaart -------------------------------------------------------- */
.kbf{background:var(--kb-bg-card);border:1px solid var(--kb-line);border-radius:var(--kb-radius-l);box-shadow:var(--kb-shadow-lift);padding:clamp(22px,4vw,36px);}

/* Voortgang */
.kbf__dots{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.kbf__dot{width:30px;height:30px;border-radius:99px;border:1.5px solid var(--kb-line);background:var(--kb-bg);color:var(--kb-muted);font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.kbf__dot.is-active{background:var(--kb-grad);border-color:transparent;color:#fff;}
.kbf__dot.is-done{background:var(--kb-primary-soft);border-color:var(--kb-pink);color:var(--kb-primary);}
.kbf__dotline{flex:1;height:1.5px;background:var(--kb-line);}
.kbf__bar{height:6px;background:var(--kb-bg-blush);border-radius:99px;overflow:hidden;margin-bottom:10px;}
.kbf__bar i{display:block;height:100%;width:25%;background:var(--kb-grad);border-radius:99px;transition:width .35s ease;}
.kbf__stepline{font-size:.8rem;font-weight:650;color:var(--kb-muted);text-transform:uppercase;letter-spacing:.8px;margin:0 0 26px;}
.kbf__stepline #kbf-stepnum{color:var(--kb-primary);}

/* Stappen */
.kbf__step{display:none;}
.kbf__step.is-active{display:block;animation:kbfIn .28s ease;}
@keyframes kbfIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.kbf__q{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;margin:0 0 18px;}

/* Tegels (leendoel + vragen) */
.kbf__tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kbf__tile{display:flex;align-items:center;gap:13px;padding:16px;border:1.5px solid var(--kb-line);border-radius:var(--kb-radius);background:var(--kb-bg);cursor:pointer;font-family:inherit;font-size:1rem;font-weight:650;color:var(--kb-ink);text-align:left;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;}
.kbf__tile:hover{border-color:var(--kb-primary);background:var(--kb-primary-soft);transform:translateY(-1px);}
.kbf__tile.is-active{border-color:var(--kb-primary);background:var(--kb-primary-soft);box-shadow:0 0 0 3px rgba(226,80,110,.12);}
.kbf__tile-ico{width:42px;height:42px;border-radius:12px;background:var(--kb-bg-blush);color:var(--kb-primary);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;}
.kbf__tile-ico svg{width:22px;height:22px;}

/* Stap 2: vragen verschijnen één voor één */
.kbf__vraag{display:none;margin-bottom:28px;}
.kbf__vraag.is-open{display:block;animation:kbfIn .28s ease;}

/* Stap 3: sliders + live berekening */
.kbf__veld{margin-bottom:26px;}
.kbf__veld label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.92rem;font-weight:650;color:var(--kb-ink-2);margin-bottom:12px;}
.kbf__veld output{font-size:1.15rem;font-weight:750;color:var(--kb-ink);font-variant-numeric:tabular-nums;}
.kbf__range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:var(--kb-bg-blush);outline:none;}
.kbf__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:99px;background:var(--kb-grad);border:3px solid #fff;box-shadow:0 2px 8px rgba(226,80,110,.4);cursor:pointer;}
.kbf__range::-moz-range-thumb{width:22px;height:22px;border-radius:99px;background:var(--kb-primary);border:3px solid #fff;box-shadow:0 2px 8px rgba(226,80,110,.4);cursor:pointer;}
.kbf__range:focus-visible{box-shadow:0 0 0 3px rgba(226,80,110,.25);}
.kbf__rangehints{display:flex;justify-content:space-between;font-size:.76rem;color:var(--kb-muted);margin-top:6px;}

/* Live berekening — maandlast ALTIJD met totaal ernaast (BRAND.md regel 1) */
.kbf__calc{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--kb-bg-soft);border:1px solid var(--kb-line);border-radius:var(--kb-radius);padding:18px;margin-bottom:8px;}
.kbf__calc>div{min-width:0;}
.kbf__calc label{display:block;font-size:.78rem;color:var(--kb-muted);margin-bottom:3px;}
.kbf__calc strong{font-size:1.3rem;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
p.kbf__calcnote{font-size:.78rem;color:var(--kb-muted);line-height:1.6;margin:8px 0 24px;}

/* Educatie-blok (vast onderdeel van de funnel — BRAND.md regel 3) */
.kbf__edu{background:var(--kb-grad-soft);border:1px solid var(--kb-line);border-radius:var(--kb-radius);padding:18px 18px 8px;margin-bottom:8px;}
.kbf__edu-title{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:700;margin:0 0 10px;}
.kbf__edu details{border-top:1px solid var(--kb-line);}
.kbf__edu details:first-of-type{border-top:0;}
.kbf__edu summary{padding:11px 0;font-size:.9rem;font-weight:650;color:var(--kb-ink-2);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.kbf__edu summary::-webkit-details-marker{display:none;}
.kbf__edu summary::after{content:'+';font-size:1.2rem;color:var(--kb-primary);font-weight:500;line-height:1;}
.kbf__edu details[open] summary::after{content:'\2013';}
.kbf__edu details p{font-size:.86rem;line-height:1.7;color:var(--kb-ink-2);margin:0 0 14px;}

/* Stap 4: indicatie */
.kbf__sum{border:1px solid var(--kb-line);border-radius:var(--kb-radius);padding:6px 18px;margin-bottom:16px;}
.kbf__sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--kb-line-2);font-size:.92rem;}
.kbf__sumrow:first-child{border-top:0;}
.kbf__sumrow span{color:var(--kb-muted);}
.kbf__sumrow strong{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;}
.kbf__sumrow strong svg{width:17px;height:17px;color:var(--kb-primary);flex-shrink:0;}
.kbf__ind{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px;}
.kbf__ind>div{background:var(--kb-bg-soft);border:1px solid var(--kb-line);border-radius:var(--kb-radius);padding:16px;min-width:0;}
.kbf__ind label{display:block;font-size:.76rem;color:var(--kb-muted);margin-bottom:3px;}
.kbf__ind strong{font-size:1.15rem;font-weight:750;font-variant-numeric:tabular-nums;}
p.kbf__indnote{font-size:.78rem;color:var(--kb-muted);line-height:1.65;margin:10px 0 22px;}
.kbf__cta{display:flex;flex-direction:column;gap:10px;}
.kbf__cta .kb-btn{width:100%;padding:14px;font-size:1rem;}
.kbf__soon{text-align:center;font-size:.82rem;color:var(--kb-muted);margin:4px 0 0;}

/* Navigatie onderin de kaart */
.kbf__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--kb-line-2);}
.kbf__navspacer{flex:1;}

/* Trust-regel onder de kaart */
.kb-funnelpage__trust{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:.84rem;color:var(--kb-ink-2);}
.kb-funnelpage__trust span{display:inline-flex;align-items:center;gap:7px;}
.kb-funnelpage__trust svg{width:15px;height:15px;color:var(--kb-ok);}

/* -- Resultaten (run 7) ------------------------------------------------------ */
.kbf-res{margin-top:clamp(36px,6vw,64px);}
.kbf-res__head h2{font-size:clamp(1.5rem,2.8vw,1.9rem);font-weight:800;letter-spacing:-.6px;margin:0 0 8px;}
p.kbf-res__intro{font-size:.95rem;color:var(--kb-ink-2);line-height:1.65;margin:0 0 18px;}
.kbf-res__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.kbf-res__sort{display:inline-flex;gap:6px;background:var(--kb-bg-card);border:1px solid var(--kb-line);border-radius:99px;padding:4px;}
.kbf-res__sort button{border:0;background:transparent;font-family:inherit;font-size:.84rem;font-weight:650;color:var(--kb-ink-2);padding:8px 15px;border-radius:99px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;}
.kbf-res__sort button:hover{color:var(--kb-ink);}
.kbf-res__sort button.is-active{background:var(--kb-grad);color:#fff;}
.kbf-res__nl{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--kb-ink-2);cursor:pointer;}
.kbf-res__nl input{accent-color:var(--kb-primary);width:17px;height:17px;}

.kbf-card{background:var(--kb-bg-card);border:1px solid var(--kb-line);border-radius:var(--kb-radius-l);box-shadow:var(--kb-shadow);padding:22px;margin-bottom:14px;transition:transform .18s,box-shadow .18s;}
.kbf-card:hover{transform:translateY(-2px);box-shadow:var(--kb-shadow-lift);}
.kbf-card__kop{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.kbf-card__logo{width:52px;height:52px;border-radius:13px;object-fit:contain;background:var(--kb-bg-soft);border:1px solid var(--kb-line);flex-shrink:0;}
.kbf-card__logo--tekst{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;color:var(--kb-primary);background:var(--kb-bg-blush);border-color:transparent;}
.kbf-card__wie{flex:1;min-width:0;}
.kbf-card__wie strong{display:block;font-size:1.08rem;font-weight:800;letter-spacing:-.01em;margin-bottom:7px;}
.kbf-card__badges{display:flex;gap:7px;flex-wrap:wrap;}
.kbf-card__badge{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:650;color:var(--kb-ink-2);background:var(--kb-bg-soft);border:1px solid var(--kb-line);border-radius:99px;padding:4px 11px;}
.kbf-card__badge--r1{background:var(--kb-ok-soft);color:var(--kb-ok);border-color:transparent;}
.kbf-card__badge--r2{background:var(--kb-warn-soft);color:var(--kb-warn);border-color:transparent;}
.kbf-card__badge--r3{background:var(--kb-err-soft);color:var(--kb-err);border-color:transparent;}
.kbf-card__match{flex-shrink:0;width:58px;height:58px;border-radius:99px;background:var(--kb-grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.kbf-card__match span{font-size:1.15rem;font-weight:800;line-height:1;letter-spacing:0;}
.kbf-card__cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:var(--kb-bg-soft);border:1px solid var(--kb-line);border-radius:var(--kb-radius);padding:15px;margin-bottom:10px;}
.kbf-card__cijfers>div{min-width:0;}
.kbf-card__cijfers label{display:block;font-size:.74rem;color:var(--kb-muted);margin-bottom:2px;}
.kbf-card__cijfers strong{font-size:1.12rem;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
p.kbf-card__vanaf{font-size:.8rem;color:var(--kb-muted);margin:0 0 10px;line-height:1.6;}
p.kbf-card__tekst{font-size:.88rem;color:var(--kb-ink-2);line-height:1.65;margin:0 0 14px;}
.kbf-card__cta .kb-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;}
p.kbf-res__weging{font-size:.78rem;color:var(--kb-muted);line-height:1.6;margin:16px 0;}
.kbf-res__edu{margin-top:8px;}

/* -- Aanvraag-modal (run 8) -------------------------------------------------- */
.kbf-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;}
.kbf-modal[hidden]{display:none;}
.kbf-modal__overlay{position:absolute;inset:0;background:rgba(29,20,32,.55);animation:kbfIn .2s ease;}
.kbf-modal__card{position:relative;z-index:1;background:var(--kb-bg-card);border-radius:var(--kb-radius-l);box-shadow:var(--kb-shadow-lift);width:100%;max-width:480px;max-height:calc(100vh - 40px);overflow-y:auto;padding:clamp(24px,4vw,34px);animation:kbfPop .24s cubic-bezier(.2,.7,.3,1);}
@keyframes kbfPop{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.kbf-modal__x{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:10px;background:var(--kb-bg-soft);color:var(--kb-ink-3);font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;}
.kbf-modal__x:hover{background:var(--kb-bg-blush);color:var(--kb-primary);}
.kbf-modal__intro{font-size:.92rem;line-height:1.65;color:var(--kb-ink-2);margin:0 0 16px;}
.kbf-modal .kbf__sum{margin-bottom:20px;}
.kbf-field{margin-bottom:14px;}
.kbf-field label{display:block;font-size:.86rem;font-weight:700;color:var(--kb-ink-2);margin-bottom:6px;}
.kbf-field label span{font-weight:500;color:var(--kb-muted);}
.kbf-field input{width:100%;font-family:inherit;font-size:1rem;color:var(--kb-ink);background:var(--kb-bg);border:1.5px solid var(--kb-line);border-radius:var(--kb-radius-s);padding:12px 14px;transition:border-color .15s,box-shadow .15s;}
.kbf-field input:focus{outline:none;border-color:var(--kb-primary);box-shadow:0 0 0 3px rgba(226,80,110,.14);}
.kbf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.kbf-modal__consent{font-size:.78rem;line-height:1.6;color:var(--kb-muted);margin:4px 0 16px;}
.kbf-modal__fout{font-size:.86rem;font-weight:700;color:var(--kb-err);background:var(--kb-err-soft);border-radius:var(--kb-radius-s);padding:10px 13px;margin:0 0 14px;}
.kbf-modal__card .kb-btn{width:100%;padding:14px;font-size:1rem;}
.kbf-modal__ok{width:64px;height:64px;border-radius:99px;background:var(--kb-ok-soft);color:var(--kb-ok);display:grid;place-items:center;margin:6px auto 16px;}
.kbf-modal__ok svg{width:30px;height:30px;}
#kbf-aanvraag-klaar{text-align:center;}
#kbf-aanvraag-klaar .kbf__q{justify-content:center;}
.kbf-modal__nummer{font-size:1.4rem;font-weight:800;letter-spacing:.5px;color:var(--kb-primary);background:var(--kb-primary-soft);border-radius:var(--kb-radius);padding:14px;margin:0 0 16px;font-variant-numeric:tabular-nums;}

@media (max-width:640px){
  .kbf__tiles{grid-template-columns:1fr;}
  .kbf__calc{grid-template-columns:1fr;}
  .kbf__ind{grid-template-columns:1fr;}
  .kbf__dots{display:none;}
  .kbf-card__cijfers{grid-template-columns:1fr;}
  .kbf-res__bar{flex-direction:column;align-items:stretch;}
  .kbf-res__sort{justify-content:space-between;}
  .kbf-res__sort button{flex:1;padding:8px 8px;font-size:.78rem;}
  .kbf-card__cta .kb-btn{width:100%;}
}