/* ── betaalkeuze: per maand of per jaar, zonder script ──
   De schakelaar boven de pakketkaarten, op de homepage en /prijzen.html (de
   markup maakt scripts/site-bouwen.mjs). Twee keuzerondjes; :has() op
   .prijskeuze wisselt de bedragen op de kaarten. Zonder :has() blijft de
   maandprijs staan, met de jaarprijs in de regel eronder. Alleen tokens: de
   kleuren volgen de sectie (nacht of ochtend). */
.betaalwijze{border:0;padding:0;margin:0 0 var(--m-ruimte-24);min-inline-size:0;text-align:center}
.betaalkeuze{display:inline-flex;gap:var(--m-ruimte-4);padding:var(--m-ruimte-4);border:1px solid var(--lijn);border-radius:var(--m-radius-pil);background:var(--kaart);max-width:100%}
.betaalkeuze label{position:relative;display:block;cursor:pointer}
.betaalkeuze input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.betaalkeuze label > span{display:flex;align-items:center;gap:var(--m-ruimte-10);min-height:44px;padding:0 var(--m-ruimte-20);border-radius:var(--m-radius-pil);
  font-size:var(--m-tekst-l);font-weight:600;color:var(--stil);transition:background-color var(--m-duur-basis) var(--m-curve),color var(--m-duur-basis) var(--m-curve)}
/* --amber-tekst komt uit module.css, ook op de homepage (sinds 20 okt 2026) */
.betaalkeuze label > span b{font-size:var(--m-tekst-xs);font-weight:700;color:var(--amber-tekst);white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--amber) 50%, var(--lijn));border-radius:var(--m-radius-pil);padding:var(--m-ruimte-2) var(--m-ruimte-10)}
.betaalkeuze label:hover > span{color:var(--tekst)}
.betaalkeuze input:checked + span{background:var(--tekst);color:var(--vlak)}
.betaalkeuze input:checked + span b{color:var(--vlak);border-color:color-mix(in srgb, var(--vlak) 40%, transparent)}
.betaalkeuze input:focus-visible + span{outline:3px solid var(--focus-kleur);outline-offset:3px}
.per-jaar{display:none}
.prijskeuze:has([value="jaar"]:checked) .per-maand{display:none}
.prijskeuze:has([value="jaar"]:checked) span.per-jaar{display:inline}
.prijskeuze:has([value="jaar"]:checked) p.per-jaar{display:block}
@container inhoud (max-width:599px){
  .betaalkeuze label > span{padding:0 var(--m-ruimte-12);font-size:var(--m-tekst-l)}
}