/* Keuzehulp "Wat past bij jou?" op het bladgroene vlak */
.keuze-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--ruimte-l); align-items: start; }
.keuze-intro h2 { max-width: 12ch; }
.keuze-intro .inleiding { margin-top: 1rem; }
.keuzehulp {
  background: var(--luik-diep); border-radius: calc(var(--r-paneel) * 1.5);
  padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); min-height: 22rem;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.keuzehulp__stappen { display: flex; gap: 0.4rem; margin-bottom: 1.5rem; }
.keuzehulp__stappen span { height: 5px; flex: 1; border-radius: 5px; background: rgb(255 255 255 / 0.14); transition: background-color 0.4s var(--uit); }
.keuzehulp__stappen span.is-actief { background: var(--blad-fel); }
.keuzehulp__vak { transition: opacity 0.18s ease, transform 0.18s ease; }
.keuzehulp__vak.is-weg { opacity: 0; transform: translateY(8px); }
.keuzehulp__vraag { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1.25rem; outline: none; }
.keuzehulp__keuzes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.keuze {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 4.25rem;
  padding: 1rem 1.25rem; border-radius: var(--r-paneel); border: 2px solid rgb(152 200 8 / 0.55);
  background: rgb(255 255 255 / 0.04); color: var(--op-luik); text-align: left; text-decoration: none; cursor: pointer;
  font: 700 var(--step-0)/1.25 var(--font-display);
  transition: background-color 0.25s, border-color 0.25s, transform 0.3s var(--uit);
}
.keuze .icoon { flex: none; color: var(--blad-fel); transition: transform 0.3s var(--uit); }
.keuze:hover { background: var(--blad-fel); border-color: var(--blad-fel); color: var(--inkt); transform: translateY(-2px); }
.keuze:hover .icoon { color: var(--inkt); transform: translateX(4px); }
.keuze:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }
.keuzehulp__terug {
  margin-top: 1.25rem; background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
  color: var(--op-luik-zacht); font: 700 1rem var(--font-body); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--geel);
}
.keuzehulp__terug:hover { color: var(--op-luik); }

.advies { background: var(--kalk); color: var(--inkt); border-radius: var(--r-paneel); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.advies__label { font-weight: 700; color: var(--luik); font-size: 0.95rem; margin-bottom: 0.4rem; }
.advies__titel { font-size: var(--step-2); outline: none; margin-bottom: 0.6rem; }
.advies__feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.25rem; }
.advies__feiten div { background: #fff; border-radius: 10px; padding: 0.8rem 1rem; }
.advies__feiten dt { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); }
.advies__feiten dd { margin: 0.2rem 0 0; color: var(--inkt-zacht); font-size: 0.98rem; line-height: 1.4; }
.advies .knoppen { margin-top: 1.5rem; }
.advies .knop { --knop-bg: var(--luik); --knop-fg: var(--op-luik); }
.advies .knop--lijn { --knop-bg: transparent; --knop-fg: var(--inkt); }
@media (prefers-reduced-motion: no-preference) {
  .advies { animation: advies-in 0.5s var(--uit); }
}
@keyframes advies-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

.keuze-zelf { margin-top: var(--ruimte-xl); }
.keuze-zelf__kop { font-size: var(--step-2); margin-bottom: var(--ruimte-m); }
@media (max-width: 56rem) {
  .keuze-grid { grid-template-columns: 1fr; }
  .keuzehulp__keuzes, .advies__feiten { grid-template-columns: 1fr; }
}