/* ---------- batterijadvies op de homepage ---------- */
.ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2.5vw,1.75rem);align-items:start}
.ba-vragen{background:var(--paper);border-radius:var(--r-paneel);box-shadow:var(--schaduw-kaart);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1.35rem;align-content:start;margin:0}
.ba-vraag{border:0;margin:0;padding:0;display:grid;gap:.5rem;min-width:0}
.ba-vraag > label,.ba-vraag legend{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:600;color:var(--inkt);padding:0;width:100%}
.ba-vraag output{font-weight:700;color:var(--sage-diep);font-variant-numeric:tabular-nums}
.ba-vraag small{font-size:var(--fs-xs);color:var(--muted)}
.ba-vraag input[type=range]{width:100%;accent-color:var(--actie);height:28px;margin:0}
.ba-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem}
.ba-keuze{display:flex;flex-wrap:wrap;gap:.4rem}
.ba-keuze label{position:relative}
.ba-keuze input{position:absolute;opacity:0;pointer-events:none}
.ba-keuze span{display:inline-block;padding:.55rem .95rem;border-radius:var(--r-pill);background:var(--canvas);box-shadow:inset 0 0 0 1px var(--lijn-2);font-size:var(--fs-sm);font-weight:500;color:var(--tekst);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.ba-keuze input:checked + span{background:var(--actie-vlak);color:#fff;box-shadow:none}
.ba-keuze input:focus-visible + span{outline:2px solid var(--blauw);outline-offset:2px}
.ba-uitkomst{background:var(--veld);border-radius:var(--r-paneel);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1rem;align-content:start}
.ba-uitkomst .eyebrow{margin:0}
.ba-groot{display:flex;align-items:baseline;gap:.5rem;color:var(--inkt)}
.ba-groot b{font-size:clamp(3rem,6vw,4.25rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ba-groot span{font-size:1.25rem;font-weight:600}
.ba-model{color:var(--tekst-2);margin-top:-.4rem}
.ba-meter{background:var(--paper);border-radius:var(--r-kaart);padding:1rem 1.1rem;display:grid;gap:.6rem}
.ba-meter > b{font-size:var(--fs-sm)}
.ba-balk{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 3rem;gap:.6rem;align-items:center;font-size:var(--fs-sm);color:var(--tekst-2)}
.ba-balk i{display:block;height:12px;border-radius:999px;background:var(--canvas);position:relative;overflow:hidden}
.ba-balk i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:999px;background:var(--lijn-2);transition:width .5s var(--ease)}
.ba-balk.met i::after{background:var(--actie)}
.ba-balk em{font-style:normal;font-weight:700;color:var(--inkt);text-align:right;font-variant-numeric:tabular-nums}
.ba-geen-zon{background:var(--paper);border-radius:var(--r-kaart);padding:1rem 1.1rem;font-size:var(--fs-sm);color:var(--tekst-2)}
.ba-feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.ba-feiten div{background:var(--paper);border-radius:var(--r-klein);padding:.75rem .85rem;display:grid;gap:.15rem;align-content:start}
.ba-feiten span{font-size:var(--fs-xs);color:var(--muted)}
.ba-feiten b{font-size:.95rem;line-height:1.3;font-variant-numeric:tabular-nums}
.ba-noot{font-size:var(--fs-sm);color:var(--tekst-2)}
.ba-noot:empty{display:none}
.ba-aannames{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.advies-mee{background:var(--veld);border-radius:var(--r-klein);padding:.7rem .9rem;font-size:var(--fs-sm);color:var(--tekst)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){.ba{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.ba-rij{grid-template-columns:minmax(0,1fr)}.ba-feiten{grid-template-columns:minmax(0,1fr)}.ba-balk{grid-template-columns:6.5rem minmax(0,1fr) 2.6rem}}
.advies textarea{font:inherit;font-weight:400;padding:.75rem .9rem;border-radius:var(--r-klein);border:1px solid var(--lijn-2);background:var(--paper);color:var(--inkt);width:100%;resize:vertical;min-height:4.5rem}
.advies textarea:focus{outline:2px solid var(--actie);outline-offset:1px;border-color:var(--actie)}
.advies .melding.fout{background:var(--blauw-zacht);color:var(--blauw)}
