:where(.peiling) {
  --peiling-accent: #245c8f;
  --peiling-accent-tekst: #fff;
  --peiling-rand: rgba(0, 0, 0, .18);
  --peiling-vlak: rgba(0, 0, 0, .04);
  --peiling-balk: rgba(0, 0, 0, .1);
  --peiling-fout: #b42318;
  --peiling-radius: 10px;
  --peiling-ruimte: 16px;
}
.peiling {
  display: block;
  max-width: 40rem;
  padding: var(--peiling-ruimte);
  border: 1px solid var(--peiling-rand);
  border-radius: var(--peiling-radius);
  background: var(--peiling-vlak);
}
.peiling[hidden] { display: none; }
.peiling.is-laden { min-height: 6rem; }

.peiling-vraag { margin: 0 0 8px; font-size: 1.25em; font-weight: 700; line-height: 1.3; padding: 0; }
.peiling-vraag:focus { outline: none; }
.peiling-toelichting { margin: 0 0 12px; white-space: pre-line; }
.peiling-hint { margin: 0 0 10px; font-size: .9em; opacity: .8; }

.peiling-opties { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.peiling-opties legend { width: 100%; }
.peiling-optie { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--peiling-rand); border-radius: var(--peiling-radius); cursor: pointer; line-height: 1.4; }
.peiling-optie:hover { border-color: var(--peiling-accent); }
.peiling-optie input { width: 1.25em; height: 1.25em; margin: .05em 0 0; flex: none; accent-color: var(--peiling-accent); }
.peiling-optie:focus-within { outline: 2px solid var(--peiling-accent); outline-offset: 2px; }

.peiling-rij { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.peiling-label { font-weight: 600; }
.peiling-select, .peiling-textarea { font: inherit; width: 100%; box-sizing: border-box; padding: 10px 12px; min-height: 44px; border: 1px solid var(--peiling-rand); border-radius: var(--peiling-radius); background: #fff; color: #111; }
.peiling-textarea { resize: vertical; }
.peiling-teller { margin: 0; font-size: .85em; opacity: .75; }

.peiling-knop { font: inherit; font-weight: 700; min-height: 44px; padding: 10px 22px; border: 0; border-radius: var(--peiling-radius); background: var(--peiling-accent); color: var(--peiling-accent-tekst); cursor: pointer; }
.peiling-knop:disabled { opacity: .6; cursor: default; }
.peiling-knop:focus-visible { outline: 2px solid var(--peiling-accent); outline-offset: 3px; }

.peiling-fout { margin: 0 0 12px; color: var(--peiling-fout); font-weight: 600; }
.peiling-fout[hidden] { display: none; }
.peiling-melding, .peiling-bedankt { margin: 0 0 12px; }
.peiling-bedankt { font-weight: 700; }
.peiling-live:empty { display: none; }

.peiling-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.peiling-staven { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.peiling-staaf { display: flex; flex-direction: column; gap: 4px; }
.peiling-staaf-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.peiling-staaf-tekst { font-weight: 600; overflow-wrap: anywhere; }
.peiling-staaf-getal { white-space: nowrap; font-variant-numeric: tabular-nums; }
.peiling-balk { display: block; height: 12px; border-radius: 999px; background: var(--peiling-balk); overflow: hidden; }
.peiling-balk-vul { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--peiling-accent); }
.peiling-voet { margin: 0; font-size: .9em; opacity: .8; }

@media (prefers-reduced-motion: no-preference) {
  .peiling-balk-vul { transition: width .5s ease-out; }
}