
.bb-ronde { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px; box-shadow: var(--schaduw); margin-bottom: 24px; scroll-margin-top: 80px; }
.bb-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.bb-kop h2 { margin: 0; overflow-wrap: anywhere; }
.bb-bedrag { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--dijk); }
.bb-fasen { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: fase; }
.bb-fasen li { counter-increment: fase; padding: 6px 12px; border-radius: 999px; background: var(--zand); font-size: .88rem; color: var(--tekst-zacht); }
.bb-fasen li::before { content: counter(fase) ". "; font-weight: 700; }
.bb-fasen li.is-nu { background: var(--zee); color: var(--wit); font-weight: 600; }
.bb-uitleg { margin-bottom: 12px; }
.bb-stand { margin: 0 0 14px; }
.bb-plannen { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bb-plan { border: 1px solid var(--rand); border-radius: var(--radius-s); padding: 12px 14px; min-width: 0; overflow-wrap: anywhere; }
.bb-plan.is-gekozen { border-color: var(--dijk); background: var(--dijk-licht); }
.bb-plan-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bb-plan-kop h3 { margin: 0; font-size: 1.08rem; }
.bb-plan.is-gekozen .bb-plan-kop h3::before { content: "✓ "; color: var(--dijk); }
.bb-plan-bedrag { flex: none; font-weight: 700; }
.bb-stem { min-height: 44px; }
.bb-stem[aria-pressed="true"] { background: var(--dijk-licht); border-color: var(--dijk); color: var(--dijk); }
.bb-indienen { border-top: 1px solid var(--rand); padding-top: 14px; }
.bb-indienen h3 { margin-top: 0; }

@media (min-width: 760px) {
  .bb-plannen { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
