/* Selectly · rekenvoorbeelden (19b §M). Enkel tokens uit ui/merk.css; bouwt op home.css + dienst.css. Gedrag: ui/reken.js. */
.rk-sectie{position:relative;padding:clamp(80px,10vw,140px) 0 clamp(40px,6vw,70px);border-top:1px solid var(--haar)}
.rk-sectie .dn-sectiekop h2{max-width:18ch}
.rk{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rk.rk-twee{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.rk-deel{display:grid;gap:16px;align-content:start;min-width:0;padding:clamp(20px,2.6vw,30px);border-radius:26px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.rk-deel.rk-gemist{background:linear-gradient(180deg,rgba(var(--goud-rgb),.05),transparent 60%),var(--zwart-2)}
.rk-kop{font-size:calc(clamp(22px,1.9vw,27px) * var(--kop-schaal))}
.rk-velden{display:grid;gap:18px}
.rk-velden:not(:has(.rk-veld)){display:none}
.rk-veld{display:grid;gap:8px;min-width:0}
.rk-veld label{font-size:14.5px;line-height:1.4;color:var(--tekst)}
.rk-veld label span{color:var(--tekst-3);font-size:13px}
.rk-rij{display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:14px;align-items:center}
.rk-getalveld{position:relative;display:flex;align-items:center;height:46px;border-radius:12px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);transition:box-shadow .3s}
.rk-getalveld:focus-within{box-shadow:inset 0 0 0 1.5px var(--goud)}
.rk-getalveld i{flex:none;font-style:normal;font-size:15px;color:var(--tekst-3);padding:0 0 0 12px}
.rk-getalveld.pct i{padding:0 12px 0 0}
.rk-getalveld input{flex:1;min-width:0;width:100%;height:100%;padding:0 12px;border:0;background:transparent;font:500 16px var(--font-mono);color:var(--tekst);outline:0;-moz-appearance:textfield;appearance:textfield}
.rk-getalveld.eur input{padding-left:6px}
.rk-getalveld.pct input{text-align:right;padding-right:6px}
.rk-getalveld input::-webkit-outer-spin-button,.rk-getalveld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rk-getalveld input::placeholder{color:var(--tekst-3);font-family:var(--font-tekst);font-weight:400;font-size:14px}
.rk-getalveld input:focus-visible{outline:0}
/* schuifje: goud gevuld tot de duim; leeg = grijs en de duim links */
.rk-veld input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;touch-action:pan-y}
.rk-veld input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--goud) var(--vul,0%),var(--zwart-3) var(--vul,0%))}
.rk-veld input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--goud) var(--vul,0%),var(--zwart-3) var(--vul,0%))}
.rk-veld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--goud-verloop);box-shadow:0 0 0 4px rgba(var(--goud-rgb),.14),0 4px 12px rgba(0,0,0,.5);transition:transform .25s var(--uit)}
.rk-veld input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--goud-verloop);box-shadow:0 0 0 4px rgba(var(--goud-rgb),.14)}
.rk-veld input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.rk-veld.leeg input[type=range]::-webkit-slider-runnable-track{background:var(--zwart-3)}
.rk-veld.leeg input[type=range]::-moz-range-track{background:var(--zwart-3)}
.rk-veld.leeg input[type=range]::-webkit-slider-thumb{background:var(--tekst-3);box-shadow:none}
.rk-veld.leeg input[type=range]::-moz-range-thumb{background:var(--tekst-3);box-shadow:none}
.rk-meer{border-top:1px solid var(--haar);padding-top:12px}
.rk-meer summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:14px;color:var(--goud-licht)}
.rk-meer summary::-webkit-details-marker{display:none}
.rk-meer summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.45);font-size:15px;line-height:1}
.rk-meer[open] summary::before{content:"−"}
.rk-meer summary span{color:var(--tekst-3)}
.rk-meer .rk-velden{margin-top:12px}
/* resultaat */
.rk-uit{min-height:84px;padding:18px 20px;border-radius:18px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);display:grid;gap:10px;align-content:center;transition:box-shadow .5s}
.rk-uit.vol{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35),0 20px 50px -30px rgba(0,0,0,.8)}
.rk-leeg{color:var(--tekst-3);font-size:15px}
.rk-zin{font-size:15.5px;line-height:1.5;color:var(--tekst-2)}
.rk-zin.groot{font-size:clamp(17px,1.45vw,20px);line-height:1.45;color:var(--tekst)}
.rk-n{font:600 1em var(--font-mono);letter-spacing:-.01em;color:var(--goud-licht);font-variant-numeric:tabular-nums;white-space:nowrap}
.rk-hint{font-size:13.5px;color:var(--tekst-3)}
.rk-nul{font-size:15px;color:var(--goud-licht)}
.rk-raad{font-size:15px;color:var(--tekst)}
.rk-onbekend{font:500 .9em var(--font-mono);letter-spacing:.04em;color:var(--tekst-3)}
.rk-lijst{list-style:none;display:grid;gap:6px;font-size:15.5px;color:var(--tekst-2)}
.rk-kanaalnaam{color:var(--tekst);font-weight:600}
.rk-extra{font-size:13.5px;color:var(--tekst-3)}
.rk-onder{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.rk-som-knop{height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.4);color:var(--goud-licht);font-size:13.5px;cursor:pointer;transition:box-shadow .3s}
.rk-som-knop:hover{box-shadow:inset 0 0 0 1px var(--goud)}
.rk-link{font-size:14px;color:var(--goud-licht);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(var(--goud-rgb),.4)}
.rk-som{font-size:14px;line-height:1.55;color:var(--tekst-2);padding:12px 14px;border-left:2px solid rgba(var(--goud-rgb),.5);background:rgba(255,255,255,.02);border-radius:0 10px 10px 0}
.rk-disclaimer{margin-top:18px;max-width:80ch;font-size:13px;line-height:1.55;color:var(--tekst-3)}
/* M5 · kanaalrijen */
.rk-kanalen{display:grid;gap:14px}
.rk-kanaal{border:0;display:grid;gap:14px;padding:16px;border-radius:18px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);min-width:0}
.rk-kanaal[hidden]{display:none}
.rk-kanaal legend{float:left;width:100%;margin-bottom:2px;font-size:11px;letter-spacing:.14em;color:var(--goud)}
.rk-tekst input{height:46px;width:100%;padding:0 14px;border:0;border-radius:12px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);font-size:16px;color:var(--tekst);outline:0}
.rk-tekst input:focus{box-shadow:inset 0 0 0 1.5px var(--goud)}
.rk-kanaal .rk-getalveld{background:var(--zwart-2)}
.rk-plus{justify-self:start;height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.4);color:var(--goud-licht);font-size:14px;cursor:pointer}
/* M9 · de vijfhoek met de lekken */
.rk.rk-lek{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}
.rk-vijf{position:relative;margin:0;aspect-ratio:128/120;max-width:440px;width:100%;justify-self:center}
.rk-vijf svg{width:100%;height:100%;overflow:visible}
.rk-vijf-vlak{fill:rgba(var(--goud-rgb),.04)}
.rk-vijf-lijn{fill:none;stroke:rgba(var(--goud-rgb),.5);stroke-width:.6}
.rk-vijf-hoek{fill:var(--zwart-1);stroke:var(--goud);stroke-width:.8}
.rk-vijf-label{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;padding:6px 10px;border-radius:12px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);text-align:center;white-space:nowrap}   /* 28/10: dekkend, de hoekbol scheen door de tekst */
.rk-vijf-label small{font-size:10px;letter-spacing:.12em;color:var(--tekst-3)}
.rk-vijf-label b{font-size:13.5px;font-weight:500;color:var(--tekst-2)}
.rk-vijf-label em{font:600 14px var(--font-mono);font-style:normal;color:var(--accent,var(--goud-licht))}
.rk-vijf-label.h3{--accent:var(--taak-op)}.rk-vijf-label.h4{--accent:var(--taak-plan)}.rk-vijf-label.h5{--accent:var(--taak-volg)}
.rk-vijf-label.lek{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent)}
.rk-vijf-label.grootst{animation:rk-puls 1.4s var(--uit) 1}
@keyframes rk-puls{0%{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:inset 0 0 0 1px var(--accent),0 0 0 22px transparent}}
.rk-vijf-label.grootst{box-shadow:inset 0 0 0 1.5px var(--accent)}
@media (max-width:899px){
  .rk.rk-twee,.rk.rk-lek{grid-template-columns:minmax(0,1fr)}
  .rk-vijf{max-width:340px;order:-1}
}
@media (max-width:420px){
  .rk-rij{grid-template-columns:minmax(0,1fr) 104px;gap:10px}
  .rk-vijf-label{padding:4px 7px}
  .rk-vijf-label b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.rk-vijf-label.grootst{animation:none}}
@media (max-width:760px){.rk-link{display:inline-flex;align-items:center;min-height:44px;margin-block:-11px}}

/* 28/10 lek-blok: per stap wat er blijft liggen, in euro, en de vergelijking met de maandprijs */
.rk-stappen{gap:0;margin-top:4px;border-top:1px solid var(--haar)}
.rk-stappen li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--haar)}
.rk-stappen li > .mono{font-size:11px;color:var(--tekst-3)}
.rk-stappen li small{display:block;font-size:12.5px;color:var(--tekst-3);margin-top:2px}
.rk-stappen li > b{text-align:right;color:var(--tekst);font-weight:600}
.rk-stappen li > b small{font-weight:400}
.rk-vergelijk{padding:12px 14px;border-radius:12px;background:rgba(var(--goud-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.22);color:var(--tekst)}
@media (max-width:560px){.rk-stappen li{grid-template-columns:24px minmax(0,1fr)}.rk-stappen li > b{grid-column:2;text-align:left}}