/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E425-keuzehulp-een-vraag-tegelijk/effect.css (03-10-2026), ongewijzigd. */
/* ==========================================================================
   E425 · Keuzehulp met één vraag tegelijk
   Een korte keuzehulp waarin telkens één vraag in beeld staat. Kies je een
   antwoord, dan licht het op en schuift de volgende vraag van onderen in. Na de
   laatste vraag volgt een advies. Toetsen A tot en met D kiezen meteen een
   antwoord. Alleen transform en opacity bewegen.
   Instellen op .e425 met CSS-variabelen:
     --e425-accent   kleur van balk en gekozen antwoord (standaard #e4572e)
     --e425-vlak     achtergrond van een antwoord      (standaard #fff)
     --e425-duur     duur van een wissel                (standaard 420ms)
   ========================================================================== */

.e425 { position: relative; }
.e425-voortgang { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 14px; font-weight: 600; }
html:not(.js) .e425 [data-alleen-js] { display: none; }
.e425-balk { flex: 1; height: 4px; border-radius: 4px; background: var(--e425-balk-achter, rgba(0, 0, 0, .1)); overflow: hidden; }
.e425-balk span { display: block; height: 100%; background: var(--e425-accent, #e4572e); transform: scaleX(var(--e425-p, 0)); transform-origin: 0 50%; }

.e425-vraag { margin: 0; padding: 0; border: 0; min-width: 0; }
html:not(.js) .e425-vraag + .e425-vraag { margin-top: 30px; }
.e425-vraag[hidden] { display: none; }
.e425-vraag > legend { padding: 0; margin-bottom: 16px; font-size: clamp(22px, 3vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.e425-vraag > legend:focus { outline: none; }
.e425-antwoorden { display: grid; gap: 10px; }
.e425-antwoord { position: relative; display: block; cursor: pointer; }
.e425-antwoord input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.e425-antwoord > span {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border-radius: 14px;
  border: 1.5px solid var(--e425-lijn, rgba(0, 0, 0, .14)); background: var(--e425-vlak, #fff); font-weight: 600; line-height: 1.3;
}
.e425-antwoord kbd {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  border: 1.5px solid var(--e425-lijn, rgba(0, 0, 0, .18)); font: 700 13px/1 system-ui, sans-serif;
}
html:not(.js) .e425-antwoord kbd { display: none; }
.e425-antwoord input:checked + span { border-color: var(--e425-accent, #e4572e); background: var(--e425-gekozen, #fdebe5); }
.e425-antwoord input:checked + span kbd { background: var(--e425-accent, #e4572e); border-color: var(--e425-accent, #e4572e); color: #fff; }
.e425-antwoord input:focus-visible + span { outline: 2px solid var(--e425-accent, #e4572e); outline-offset: 2px; }
.e425-antwoord small { display: block; font-weight: 500; font-size: 14px; opacity: .7; }
.e425-onder[hidden] { display: none; }
.e425-onder { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; min-height: 44px; }
.e425-terug { min-height: 44px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.e425-terug[hidden] { visibility: hidden; display: inline; }
.e425-tip { font-size: 13px; opacity: .6; }
@media (hover: none) { .e425-tip { display: none; } }

.e425-advies { display: grid; gap: 14px; }
.e425-advies[hidden] { display: none; }
.e425-advies h3 { margin: 0; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.e425-advies h3:focus { outline: none; }
.e425-advies ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.e425-verstuur { justify-self: start; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e425-balk span { transition: transform var(--e425-duur, 420ms) cubic-bezier(.65, 0, .35, 1); }
  html:not([data-rm]) .e425-vraag.e425-in, html:not([data-rm]) .e425-advies.e425-in { animation: e425-in var(--e425-duur, 420ms) cubic-bezier(.2, .8, .2, 1) both; }
  html:not([data-rm]) .e425-vraag.e425-terug-in { animation: e425-terug var(--e425-duur, 420ms) cubic-bezier(.2, .8, .2, 1) both; }
  html:not([data-rm]) .e425-vraag.e425-uit { animation: e425-uit calc(var(--e425-duur, 420ms) * .6) ease both; }
  html:not([data-rm]) .e425-antwoord input:checked + span { animation: e425-tik .3s ease; }
}
@keyframes e425-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes e425-terug { from { opacity: 0; transform: translate3d(0, -28px, 0); } to { opacity: 1; transform: none; } }
@keyframes e425-uit { to { opacity: 0; transform: translate3d(0, -20px, 0); } }
@keyframes e425-tik { 40% { transform: scale(.97); } 100% { transform: none; } }