/* Opmaak voor de salesrekenhulp. Gebruikt de tokens uit style.css. */

.calc-hero{padding-bottom:8px}
.calc-hero h1{margin:8px 0 0;font-size:clamp(28px,4.4vw,44px);line-height:1.1;letter-spacing:-.02em;max-width:20ch}
.calc-lead{margin:14px 0 0;max-width:62ch;font-size:18px;line-height:1.6;color:var(--muted)}
.calc-hero-points{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.calc-hero-points li{position:relative;padding-left:20px;font-size:15px;color:var(--muted)}
.calc-hero-points li:before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--brand);
}

.calc-section{padding-top:24px}

.calc-form{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,3vw,34px);box-shadow:var(--shadow);max-width:760px;
}

.calc-voortgang{margin-bottom:22px}
.calc-voortgang-balk{height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.calc-voortgang-balk span{display:block;height:100%;width:0;border-radius:999px;background:var(--brand);transition:width .25s ease}
.calc-voortgang-tekst{margin:8px 0 0;font-size:13px;letter-spacing:.02em;color:var(--muted)}

.calc-groep{border:0;margin:0;padding:0;min-inline-size:0}
.calc-groep legend{
  padding:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
}
.calc-groep-uitleg{margin:6px 0 0;font-size:15px;color:var(--muted)}

/* Zonder JavaScript staan alle vragen onder elkaar en houden ze een scheiding. */
.calc-vraag{padding:22px 0;border-bottom:1px solid var(--line)}
.calc-form-stappen .calc-vraag{padding:14px 0 0;border-bottom:0;min-height:250px}
.calc-form-stappen .calc-groep-uitleg{margin-bottom:2px}
.calc-vraag-titel{margin:0;font-size:21px;line-height:1.3;letter-spacing:-.01em}
.calc-vraag-uitleg{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:52ch}

.calc-veld{margin-top:16px}
.calc-veld-label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.calc-veld-rij{display:flex;align-items:stretch;max-width:320px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.calc-veld-rij:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,111,224,.16)}
.calc-veld-eenheid{
  display:flex;align-items:center;padding:0 12px;background:var(--bg);border-right:1px solid var(--line);
  font-size:14px;color:var(--muted);min-width:52px;justify-content:center;
}
.calc-invoer{
  flex:1;min-width:0;border:0;padding:12px 14px;font:600 18px/1.2 var(--font);color:var(--ink);background:transparent;
}
.calc-invoer:focus{outline:none}
.calc-startwaarde{
  margin-top:10px;border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--brand);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.calc-startwaarde:hover{color:var(--brand-dark)}

.calc-keuzes{margin-top:16px;display:grid;gap:10px}
.calc-keuze{display:block;cursor:pointer}
.calc-keuze input{position:absolute;opacity:0;width:0;height:0}
.calc-keuze span{
  display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper);
  transition:border-color .15s ease,background .15s ease;
}
.calc-keuze strong{display:block;font-size:16px}
.calc-keuze small{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.calc-keuze input:checked + span{border-color:var(--brand);background:rgba(27,111,224,.06)}
.calc-keuze input:focus-visible + span{box-shadow:0 0 0 3px rgba(27,111,224,.22)}

.calc-stapknoppen{display:flex;gap:10px;margin-top:22px}
.calc-stapknoppen .btn[disabled]{opacity:.45;pointer-events:none}

.calc-uitkomst{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.calc-uitkomst h2{margin:0;font-size:22px;letter-spacing:-.01em}
.calc-uitkomst-uitleg{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:60ch}
.calc-kaarten{margin-top:18px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.calc-kaart{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg)}
.calc-kaart-waarde{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em}
.calc-kaart-label{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.calc-kaart-top{background:var(--brand);border-color:var(--brand);color:#fff}
.calc-kaart-top .calc-kaart-label{color:rgba(255,255,255,.85)}
.calc-capaciteit{margin:16px 0 0;font-size:15px;line-height:1.6;padding:12px 14px;border-radius:10px}
.calc-capaciteit:empty{display:none}
.calc-capaciteit-goed{background:rgba(31,122,60,.08);color:#1f7a3c}
.calc-capaciteit-krap{background:rgba(176,58,46,.08);color:#b03a2e}

.calc-afsluiter{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.calc-afsluiter h2{margin:0;font-size:20px;letter-spacing:-.01em}
.calc-afsluiter p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--muted);max-width:58ch}
.calc-mailveld{display:block;margin-top:18px;max-width:380px}
.calc-mailveld span{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.calc-mailveld input{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:16px/1.2 var(--font);
  color:var(--ink);background:var(--paper);
}
.calc-mailveld input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,111,224,.16)}
.calc-akkoord{display:flex;gap:10px;margin-top:14px;max-width:58ch;font-size:14px;line-height:1.55;color:var(--muted)}
.calc-akkoord input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--brand)}
.calc-akkoord a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.calc-lokaas{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.calc-verstuur{margin-top:18px}
.calc-kleine-letters{margin:10px 0 0;font-size:13px;color:var(--muted)}

.calc-melding{border-radius:14px;padding:16px 18px;margin-bottom:20px;max-width:760px}
.calc-melding h2{margin:0 0 6px;font-size:19px}
.calc-melding p{margin:0;line-height:1.6}
.calc-melding-goed{background:rgba(31,122,60,.08);color:#1f5b31}
.calc-melding-let-op{background:rgba(240,163,56,.14);color:#7a4b07}
.calc-melding-fout{background:rgba(176,58,46,.09);color:#8e2f25}

.calc-advies{margin-top:24px;max-width:760px;display:grid;gap:16px}
.calc-advies-blok{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.calc-advies-blok h3{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.calc-advies-blok h3 span{font-weight:400;color:var(--muted);font-size:16px}
.calc-advies-blok p{margin:12px 0 0;line-height:1.65}

.calc-advies-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

.calc-prijsregels{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;max-width:52ch}
.calc-prijsregels li{position:relative;padding-left:20px;line-height:1.55;color:var(--muted)}
.calc-prijsregels li:before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--brand);
}
.calc-prijsregels strong{color:var(--ink)}

.calc-vervolg h2{margin:0;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em}
.calc-vervolg p{margin:12px 0 0;max-width:62ch;line-height:1.65;color:var(--muted)}
.calc-vervolg .hero-actions{margin-top:20px}
.calc-vervolg-link{margin-top:16px;font-size:15px}

@media (max-width:620px){
  .calc-form{padding:18px;border-radius:14px}
  .calc-form-stappen .calc-vraag{min-height:0}
  .calc-stapknoppen{flex-direction:column-reverse}
  .calc-stapknoppen .btn{width:100%}
  .calc-kaarten{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}