/* Scherm 2 — "Welk formaat flashcards wil je?": drie zwevende rondjes A7 / A7 ½ / A6 in één kolom */
.rondje{position:absolute;z-index:1;width:var(--d,96px);height:var(--d,96px);margin:calc(var(--d,96px)/-2) 0 0 calc(var(--d,96px)/-2);border:0;padding:0;background:none;cursor:pointer;font-family:inherit;
  opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.34,1.56,.64,1)}
.rondje.aan{opacity:1;transform:none;pointer-events:auto}
.bol{position:absolute;inset:0;border-radius:50%;background:#fff;box-shadow:0 12px 28px rgba(124,72,24,.18),inset 0 0 0 2px #FFE3CB;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;animation:zweef 3.6s ease-in-out infinite}
#r-a7h .bol{animation-delay:-1.2s}#r-a6 .bol{animation-delay:-2.4s}
.bol i{display:block;width:calc(var(--b) * var(--k));height:calc(var(--h) * var(--k));border:2px solid var(--oranje);border-radius:3px;background:#FFF7F0;margin-bottom:3px}
.bol b{font-size:calc(var(--d,96px) * .2);font-weight:900;color:var(--inkt);line-height:1}
.bol em{font-style:normal;font-size:max(8.5px,calc(var(--d,96px) * .094));font-weight:800;color:var(--grijs);line-height:1.1;white-space:nowrap}
.rondje::after{content:"";position:absolute;inset:-6px;border-radius:50%;opacity:0;pointer-events:none}
.rondje.flits::after{animation:halo .7s ease-out}
.rondje.gekozen .bol{box-shadow:0 12px 28px rgba(124,72,24,.18),inset 0 0 0 3px var(--oranje)}
.vragen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vragen button{display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;background:var(--oranje-zacht);color:#9A4A06;border-radius:14px;padding:9px 4px;font:900 16px Nunito,system-ui,sans-serif;cursor:pointer;line-height:1.15}
.vragen button span{font-size:11.5px;font-weight:700;color:#C2410C;opacity:.85}
.scherm[data-scherm="formaat"] .afzender{min-height:60px}
@media (prefers-reduced-motion:reduce){.bol{animation:none}}