/* Aanvulling op bwise.css voor de schermen onder "Meer". Ronde 4: groepslijsten zoals op iOS, getekende iconen, één accentkleur. */
.rolband { background: var(--brand); color: #fff; font-size: var(--t-xs); text-align: center; padding: var(--s1) var(--s3); font-weight: 600; }
.voortgang { position: relative; block-size: 10px; }
.voortgang > i, .voortgang > b { position: absolute; inset-block: 0; left: 0; border-radius: var(--r-pil); }
.voortgang > b { background: var(--projectie); }
.voortgang > i { background: var(--voortgang); }
.vw-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.vw { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s2); align-items: start; font-size: var(--t-s); }
.vw b { display: block; font-weight: 600; }
.vw-teken { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; }
.vw-teken .ico { inline-size: 16px; block-size: 16px; stroke-width: 2.6; }
.vw-teken.ok { color: var(--green-tekst); background: var(--green-bg); }
.vw-teken.nee { color: var(--red-tekst); background: var(--red-bg); }
.vw-teken.man { color: var(--gold-tekst); background: var(--gold-bg); }
.tabs { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); }
.tab { flex: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: var(--s2) var(--s3); min-block-size: 44px; color: var(--sub); font-weight: 600; font-size: var(--t-s); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--tint); }
.veld { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-s); }
.veld > span { color: var(--sub); font-weight: 650; font-size: var(--t-xs); }
.invoerveld { min-block-size: 44px; padding: 0 var(--s3); border-radius: var(--radius-sm); border: 1px solid var(--knop-rand); background: var(--card2); color: var(--text); inline-size: 100%; }
.invoerveld::placeholder { color: var(--sub); opacity: 1; }
.schakel { inline-size: 51px; block-size: 31px; border-radius: var(--r-pil); border: 0; background: var(--schakel-uit); position: relative; flex: none; padding: 0; transition: background var(--duur); }
.schakel::after { content: ""; position: absolute; top: 2px; left: 2px; inline-size: 27px; block-size: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: translate 220ms var(--uit); }
.schakel[aria-checked="true"] { background: var(--tint); }
.schakel[aria-checked="true"]::after { translate: 20px 0; }
.schakel-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-block-size: 44px; }
.lijst-kaart { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--kaart-schaduw, none); }
.lijst-kaart > li + li { border-top: 1px solid var(--border); }
.lijst-rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); inline-size: 100%; background: none; border: 0; color: inherit; text-align: left; min-block-size: 60px; transition: background var(--duur); }
.lijst-rij .wie { min-width: 0; }
.lijst-rij .wie b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.lijst-rij .wie .klein { display: block; }
@media (hover: hover) { button.lijst-rij:hover { background: var(--card2); } }
.ikoon { inline-size: 36px; block-size: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--ikoon-bg); color: var(--ikoon-tekst); flex: none; }
.ikoon .ico { inline-size: 21px; block-size: 21px; }
.pijl { color: var(--sub); display: grid; place-items: center; }
.pijl .ico { inline-size: 18px; block-size: 18px; }
.sectiekop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); font: 650 var(--t-xs)/1.2 var(--f-tekst); color: var(--sub); letter-spacing: .04em; text-transform: uppercase; margin: 0; padding-inline: var(--s1); }
.sectiekop h2 { font: inherit; letter-spacing: inherit; }
.mini-tabel td, .mini-tabel th { padding: var(--s1) var(--s2); }
.rij.tussen > .knop { flex: none; white-space: nowrap; }