/* Wat het kost */
.kost-balk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.wissel{display:inline-flex;padding:4px;border-radius:99px;border:1px solid var(--glas-rand);background:var(--glas)}
.wissel button{padding:.55em 1.2em;border-radius:99px;font-weight:600;font-size:.9rem;color:var(--tekst-zacht);transition:background .3s,color .3s}
.wissel button.is-aan{background:var(--tekst);color:#000}
.pakket-uitleg{color:var(--tekst-zacht);flex:1}
.pakket{transition:border-color .4s,box-shadow .4s,transform .5s var(--zacht)}
.pakket.is-gekozen{border-color:var(--oranje);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 90px -30px rgba(255,122,26,.5);transform:translateY(-6px)}
.vergelijk{margin-top:44px;padding:6px 8px}
#vergelijk th,#vergelijk td{text-align:center;white-space:nowrap;transition:background .4s,opacity .25s}
#vergelijk th:first-child,#vergelijk td:first-child{text-align:left;white-space:normal;min-width:190px}
#vergelijk thead th{font:800 1.05rem var(--font);letter-spacing:-.03em;text-transform:none;color:var(--tekst);padding-top:20px;cursor:pointer}
#vergelijk thead th small{display:block;font:500 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-dof);margin-top:4px}
#vergelijk .groep td{font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--paars-licht);padding-top:26px;border-bottom-color:rgba(143,107,255,.3)}
#vergelijk td .net{width:30px;height:30px;vertical-align:middle}
#vergelijk td.waarde{font-variant-numeric:tabular-nums;color:var(--tekst)}
#vergelijk [data-kol].is-gekozen{background:rgba(255,122,26,.06)}
#vergelijk thead [data-kol].is-gekozen{color:var(--oranje)}
#vergelijk .wisselt{opacity:0}
#vergelijk tr:last-child td{border-bottom:0}
.kost-onder{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.kost-vragen details{border-bottom:1px solid var(--glas-rand);padding:18px 0}
.kost-vragen summary{cursor:pointer;font-weight:700;font-size:1.08rem;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.kost-vragen summary::-webkit-details-marker{display:none}
.kost-vragen summary::after{content:"+";color:var(--paars-licht);font-weight:400;transition:transform .4s var(--zacht)}
.kost-vragen details[open] summary::after{transform:rotate(45deg);color:var(--oranje)}
.kost-vragen p{margin-top:10px;color:var(--tekst-zacht);max-width:60ch}
.kost-vragen a{color:var(--lila);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.kost-onder{grid-template-columns:1fr}}