/* Rustige, neutrale basisstijl. De accentkleur komt per organisatie uit /thema.css. */
@font-face { font-family: Montserrat; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); }

:root {
  --accent: #5B6B7A; --accent-donker: #48555F; --accent-zacht: rgba(91,107,122,.10); --accent-rand: rgba(91,107,122,.35);
  --tekst: #23272B; --tekst-zacht: #5E666E; --tekst-licht: #8A9198;
  --achtergrond: #F6F5F3; --vlak: #FFFFFF; --rand: #E3E1DD; --rand-sterk: #CFCCC6;
  --ok: #2F7D5B; --ok-zacht: #E7F3EC; --let: #9A6A12; --let-zacht: #FBF2DF; --risico: #B23A3A; --risico-zacht: #FBE9E9; --open: #6B7480; --open-zacht: #EEF0F2;
  --radius: 8px; --schaduw: 0 1px 2px rgba(0,0,0,.04);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; color: var(--tekst); background: var(--achtergrond); }
a { color: var(--accent-donker); text-underline-offset: 2px; }
a:hover { color: var(--accent); }
h1 { font-size: 1.55rem; font-weight: 600; margin: 0 0 .6rem; letter-spacing: -.01em; }
h2 { font-size: 1.12rem; font-weight: 600; margin: 0 0 .8rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 1.4rem 0 .6rem; color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 .8rem; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
:focus-visible { outline: 3px solid var(--accent-rand); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.overslaan { position: absolute; left: -999px; top: 8px; background: var(--vlak); padding: 8px 12px; z-index: 10; }
.overslaan:focus { left: 8px; }

/* Kop en raamwerk */
.kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; height: 60px; background: var(--vlak); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 5; }
.kop-merk { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex: 1 1 auto; }
.merk { white-space: nowrap; }
.zijbalk .alleen-mobiel { display: none; }
.merk { font-weight: 700; font-size: 1.05rem; color: var(--tekst); text-decoration: none; letter-spacing: -.01em; }
.merk::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 9px; vertical-align: 1px; }
.org { color: var(--tekst-zacht); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop-gebruiker { display: flex; align-items: center; gap: 18px; font-size: .9rem; }
.gebruiker-naam { color: var(--tekst-zacht); }
.menuknop { display: none; }
.raamwerk { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.zijbalk { background: var(--vlak); border-right: 1px solid var(--rand); padding: 20px 12px; display: flex; flex-direction: column; gap: 2px; }
.zijbalk a, .zijbalk .binnenkort { display: block; padding: 8px 12px; border-radius: 6px; color: var(--tekst); text-decoration: none; font-size: .92rem; font-weight: 500; }
.zijbalk a:hover { background: var(--achtergrond); }
.zijbalk a.actief { background: var(--accent-zacht); color: var(--accent-donker); font-weight: 600; }
.zijbalk .binnenkort { color: var(--tekst-licht); font-weight: 400; cursor: default; }
.dossiermenu { margin: 10px 0 14px; padding: 10px 0 10px 8px; border-left: 2px solid var(--accent-rand); }
.dossiermenu-titel { font-size: .8rem; color: var(--tekst-zacht); padding: 0 12px 6px; margin: 0; line-height: 1.35; }
.dossiermenu-titel span { color: var(--tekst); font-weight: 600; font-size: .88rem; }
.submenu { padding-left: 12px; margin-bottom: 8px; }
.submenu a { font-size: .87rem; padding: 6px 12px; }
.inhoud { padding: 32px 40px 64px; max-width: 1200px; width: 100%; }
.inhoud:focus { outline: none; }

/* Kale pagina (inloggen) */
body.kaal { display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 40px; }
.kaart-midden { width: 100%; max-width: 440px; background: var(--vlak); border: 1px solid var(--rand); border-radius: 12px; padding: 32px; box-shadow: var(--schaduw); }
.merk-groot { font-weight: 700; font-size: 1.1rem; margin-bottom: 1.4rem; }
.merk-groot::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-right: 10px; }

/* Panelen en koppen */
.paneel { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--schaduw); }
.paneel.smal { max-width: 620px; }
.paneelkop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: .4rem; }
.paneelkop h2 { margin: 0; }
.paginakop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.paginakop h1 { margin-bottom: .2rem; }
.bovenkop { font-size: .82rem; color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .2rem; }
.onderkop { color: var(--tekst-zacht); margin: 0; }
.terug { margin-bottom: .6rem; font-size: .9rem; }
.terug a::before { content: "← "; }
.uitleg { color: var(--tekst-zacht); font-size: .88rem; }
.klein { font-size: .85rem; color: var(--tekst-zacht); }
.samenvatting { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 16px; font-size: .92rem; }
.scheiding { color: var(--rand-sterk); margin: 0 8px; }
.leeg { color: var(--tekst-zacht); padding: 8px 0; }
.tekst-risico { color: var(--risico); }
.tekst-let { color: var(--let); }

/* Formulieren */
.formulier fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.formulier legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.veld { margin-bottom: 14px; min-width: 0; }
.veld label, .label-tekst { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: var(--tekst); }
.veld p { margin: 0; }
.verplicht { color: var(--risico); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=tel], select, textarea {
  width: 100%; font: inherit; color: var(--tekst); background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: 6px; padding: 9px 11px; min-height: 40px;
}
input[type=color] { width: 64px; height: 40px; padding: 3px; border: 1px solid var(--rand-sterk); border-radius: 6px; background: var(--vlak); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid var(--accent-zacht); outline-offset: 0; }
.heeft-fout input, .heeft-fout select, .heeft-fout textarea { border-color: var(--risico); }
.veldfout { color: var(--risico); font-size: .84rem; margin-top: 4px; }
.veld .uitleg { margin-top: 4px; font-size: .82rem; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.volle-breedte { grid-column: 1 / -1; }
.vinkjes { margin-top: 6px; }
.vinkje { display: inline-flex; align-items: center; gap: 7px; margin: 0 18px 8px 0; font-size: .92rem; font-weight: 500; }
.vinkje input { width: 17px; height: 17px; accent-color: var(--accent); }
.code-invoer { font-size: 1.4rem !important; letter-spacing: .3em; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; }
[data-toon][hidden] { display: none; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: .92rem; padding: 9px 18px; min-height: 40px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; }
.knop:hover { background: var(--accent-donker); border-color: var(--accent-donker); color: #fff; }
.knop-tweede { background: var(--vlak); color: var(--accent-donker); border-color: var(--rand-sterk); }
.knop-tweede:hover { background: var(--accent-zacht); color: var(--accent-donker); border-color: var(--accent-rand); }
.knop-gevaar { background: var(--risico); border-color: var(--risico); }
.knop-gevaar:hover { background: #8f2d2d; border-color: #8f2d2d; }
.knop-klein { padding: 6px 12px; min-height: 34px; font-size: .85rem; }
.knop-breed { width: 100%; margin-top: 6px; }
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-donker); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
form.inline { display: inline; }

/* Meldingen en labels */
.melding { border-radius: 6px; padding: 11px 14px; margin-bottom: 16px; font-size: .92rem; border: 1px solid transparent; }
.melding-ok { background: var(--ok-zacht); border-color: #cbe5d6; color: #1f5a40; }
.melding-info { background: var(--open-zacht); border-color: var(--rand); }
.melding-let { background: var(--let-zacht); border-color: #efdcb1; color: #6f4c0c; }
.melding-fout { background: var(--risico-zacht); border-color: #efc9c9; color: #8a2a2a; }
.label { display: inline-block; font-size: .76rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--open-zacht); color: var(--tekst-zacht); }
.label-actief { background: var(--accent-zacht); color: var(--accent-donker); }
.label-afgewikkeld { background: var(--ok-zacht); color: var(--ok); }
.label-wachten { background: var(--let-zacht); color: var(--let); }
.status { display: inline-block; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.status-ok { background: var(--ok-zacht); color: var(--ok); }
.status-let { background: var(--let-zacht); color: var(--let); }
.status-open { background: var(--open-zacht); color: var(--open); }
.status-risico { background: var(--risico-zacht); color: var(--risico); }

/* Tabellen */
.tabelwrap { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--vlak); }
.paneel .tabelwrap { border-radius: 6px; }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th, .tabel td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-zacht); font-weight: 600; background: #FAF9F7; }
.tabel tbody tr:last-child td, .tabel tbody tr:last-child th { border-bottom: 0; }
.tabel tbody tr:hover td { background: #FCFBFA; }
.tabel-klein { font-size: .85rem; margin-top: 8px; }
.tabel-klein th, .tabel-klein td { padding: 6px 10px; }
.tabel-invoer input { min-height: 36px; padding: 6px 9px; }
.tabel-invoer th[scope=row] { font-weight: 600; white-space: nowrap; }
.rij-fout th, .rij-fout td { background: var(--risico-zacht); }

/* Filterbalk en tabs */
.filterbalk { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filterbalk input[type=search] { flex: 1 1 260px; }
.filterbalk select { flex: 0 1 220px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs a { padding: 7px 14px; border: 1px solid var(--rand); border-radius: 99px; background: var(--vlak); text-decoration: none; color: var(--tekst); font-size: .88rem; font-weight: 500; }
.tabs a:hover { border-color: var(--accent-rand); }

/* Tegels */
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.tegel { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; }
.tegel-getal { font-size: 1.6rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tegel-label { color: var(--tekst-zacht); font-size: .85rem; }

/* Stappenplan */
.stappen { list-style: none; padding: 0; margin: 0; }
.stap { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.stap:last-child { border-bottom: 0; }
.stap-icoon { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--open); }
.stap-ok .stap-icoon { background: var(--ok); border-color: var(--ok); }
.stap-ok .stap-icoon::after { content: ""; display: block; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(4.5px, 1.5px) rotate(45deg); }
.stap-let .stap-icoon { border-color: var(--let); background: var(--let-zacht); }
.stap-risico .stap-icoon { border-color: var(--risico); background: var(--risico); }
.stap-tekst strong { display: block; font-weight: 600; font-size: .93rem; }
.stap-tekst span { color: var(--tekst-zacht); font-size: .86rem; }
.stap-link { font-size: .86rem; }

/* Logboek */
.logboek { list-style: none; padding: 0; margin: 0; }
.logboek > li { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px; }
.log-kop { display: flex; gap: 16px; flex-wrap: wrap; font-size: .88rem; color: var(--tekst-zacht); }
.log-actie { color: var(--tekst); font-weight: 600; }

/* Categorieën */
.categorielijst { list-style: none; padding: 0; margin: 0 0 12px; columns: 2; column-gap: 24px; }
.categorielijst li { break-inside: avoid; margin-bottom: 6px; }
.categorielijst li.uit input[type=text] { color: var(--tekst-licht); text-decoration: line-through; }
.regel-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.regel-form input[type=text] { flex: 1 1 180px; min-height: 36px; padding: 6px 9px; }
.regel-form .vinkje { margin: 0; font-size: .84rem; }
.regel-form.toevoegen { margin: 0 0 16px; }
.regel-form.toevoegen input[type=number] { width: 110px; min-height: 36px; }

/* Diversen */
.gevaar { margin-top: 24px; max-width: 620px; }
.gevaar summary { cursor: pointer; color: var(--risico); font-weight: 600; font-size: .9rem; }
.gevaar form { background: var(--risico-zacht); border: 1px solid #efc9c9; border-radius: var(--radius); padding: 16px; margin-top: 10px; }
.gegevens { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 16px; }
.gegevens dt { color: var(--tekst-zacht); font-size: .88rem; }
.gegevens dd { margin: 0; }
code.groot { font-size: 1.15rem; background: var(--achtergrond); padding: 4px 10px; border-radius: 6px; user-select: all; }
.qr { display: flex; justify-content: center; margin: 12px 0; min-height: 200px; }
.qr svg, .qr img { width: 200px; height: 200px; }
.sleutel { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; background: var(--achtergrond); padding: 8px 12px; border-radius: 6px; word-break: break-all; }
.handmatig { margin-bottom: 16px; font-size: .9rem; }
.handmatig summary { cursor: pointer; color: var(--accent-donker); }
.stappen-lijst { padding-left: 20px; }
.stappen-lijst li { margin-bottom: 4px; }
.herstelcodes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 16px; }
.herstelcodes code { display: block; text-align: center; background: var(--achtergrond); padding: 8px; border-radius: 6px; font-size: 1rem; letter-spacing: .06em; }
.kleurstip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--rand-sterk); }
dialog { border: 1px solid var(--rand); border-radius: 12px; padding: 24px; max-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,.15); }
dialog::backdrop { background: rgba(35,39,43,.35); }

/* Mobiel en tablet */
@media (max-width: 900px) {
  .raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inhoud { padding: 24px 20px 48px; }
}
@media (max-width: 760px) {
  .kop { padding: 0 16px; }
  .kop-gebruiker .gebruiker-naam, .kop-gebruiker .ww-link, .org { display: none; }
  .zijbalk .alleen-mobiel { display: block; }
  .kop { gap: 10px; }
  .menuknop { display: inline-flex; font: inherit; font-weight: 600; font-size: .88rem; background: var(--vlak); border: 1px solid var(--rand-sterk); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
  .raamwerk { grid-template-columns: 1fr; }
  .zijbalk { display: none; border-right: 0; border-bottom: 1px solid var(--rand); }
  .zijbalk.open { display: flex; }
  .raster-2, .raster-3 { grid-template-columns: 1fr; }
  .inhoud { padding: 20px 16px 40px; }
  .paneel { padding: 18px 16px; }
  .categorielijst { columns: 1; }
  .stap { grid-template-columns: 22px minmax(0, 1fr); }
  .stap .status, .stap-link { grid-column: 2; justify-self: start; }
  .kaart-midden { padding: 24px 18px; }
}
@media print {
  .kop, .zijbalk, .knoppen, .menuknop { display: none !important; }
  .raamwerk { display: block; }
  body { background: #fff; }
}

/* Bouwstap 2: boedel, bank, mutatieoverzicht */
.rechts { text-align: right !important; font-variant-numeric: tabular-nums; }
.tegels-geld .tegel, .tegels-3 .tegel { gap: 4px; }
.tegels-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tegel-bedrag { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.tegel-klein { font-size: .9rem; font-variant-numeric: tabular-nums; }
.tegel-nadruk { border-color: var(--accent-rand); background: linear-gradient(0deg, var(--accent-zacht), var(--accent-zacht)), var(--vlak); }
.tegel-link { font-size: .82rem; margin-top: 4px; }
.uitleg.kort { margin-top: -8px; margin-bottom: 20px; }
.groepregel th, .groepregel td { background: #FAF9F7; font-weight: 600; }
.boedeltabel td.inspring { padding-left: 28px; }
.bedrag-positief { color: var(--ok); }
.bedrag-negatief { color: var(--risico); }
.bedrag-nul { color: var(--tekst-licht); }
.totaalregel th, .totaalregel td { font-weight: 700; border-top: 2px solid var(--rand-sterk); background: #FAF9F7; }
.tabel-overzicht td:last-child, .tabel-overzicht th:last-child { width: 180px; }
.categorieregel summary { cursor: pointer; font-weight: 600; }
.categorieregel details[open] summary { margin-bottom: 8px; }
.eindsaldo { border-color: var(--accent-rand); }
.eindsaldo .tegel-bedrag { font-size: 1.5rem; }
.raster-bank { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; margin-bottom: 8px; }
.raster-bank .tegels { margin-bottom: 0; }
.saldocontrole { margin-bottom: 0; padding: 16px 18px; }
.saldocontrole h2 { font-size: .95rem; margin-bottom: 6px; }
.saldocontrole .regel-form label { font-size: .82rem; font-weight: 600; }
.saldocontrole .regel-form input[type=text] { flex: 1 1 110px; }
.saldocontrole .regel-form input[type=date] { width: auto; min-height: 36px; padding: 6px 9px; }
.controle-uitslag { font-size: .88rem; }
.controle-ok { border-color: #cbe5d6; }
.controle-verschil { border-color: #efc9c9; }
.mutatietabel { font-size: .86rem; min-width: 980px; }
.mutatietabel td { padding: 5px 6px; }
.mutatietabel input, .mutatietabel select { min-height: 34px; padding: 5px 7px; font-size: .86rem; }
.mutatietabel input[type=date] { width: 128px; }
.mutatietabel input.bedrag { width: 88px; text-align: right; }
.mutatietabel td:nth-child(2) { min-width: 200px; }
.mutatietabel select { max-width: 170px; }
.mutatietabel td:nth-child(6) select { max-width: 120px; }
.mutatietabel th:last-child, .mutatietabel td:last-child { width: 34px; text-align: center; }
.mutatietabel select:disabled { background: var(--achtergrond); color: var(--tekst-licht); }
.mutatietabel .nieuwe-regel td { background: #FCFBF9; }
.mutatietabel .veldfout { display: block; }
.paginering { display: flex; gap: 4px; flex-wrap: wrap; }
.paginering a { padding: 4px 10px; border: 1px solid var(--rand); border-radius: 6px; text-decoration: none; font-size: .85rem; }
.paginering a.actief { background: var(--accent); color: #fff; border-color: var(--accent); }
.plakkend { position: sticky; bottom: 0; background: var(--achtergrond); padding: 10px 0; z-index: 2; border-top: 1px solid var(--rand); }
.lijst-klein { font-size: .88rem; padding-left: 18px; }
[hidden] { display: none !important; }
@media (max-width: 900px) {
  .raster-bank { grid-template-columns: 1fr; }
  .tegels-3 { grid-template-columns: 1fr; }
}

/* Bouwstap 3: schenkingen, legaten, legitieme portie, erfbelasting */
.label-let { background: var(--let-zacht); color: var(--let); }
.label-risico { background: var(--risico-zacht); color: var(--risico); }
.status-info { background: var(--accent-zacht); color: var(--accent-donker); }
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 12px; }
.kaarten .kaart { border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px; background: var(--vlak); min-width: 0; }
.kaarten .kaart h3 { margin: 0 0 .6rem; text-transform: none; letter-spacing: 0; color: var(--tekst); font-size: 1rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kaarten .kaart .tabel-overzicht td:last-child { width: 130px; }
.kaarten .kaart .veld { margin-top: 12px; margin-bottom: 0; }
.paren { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: .9rem; }
.paren dt { color: var(--tekst-zacht); }
.paren dd { margin: 0; }
.veld .waarde { margin: 4px 0; font-size: 1rem; }
.subtotaal th, .subtotaal td { font-weight: 600; border-top: 1px solid var(--rand-sterk); }
.tabel-overzicht td.inspring { padding-left: 28px; }
.tabel-overzicht th[scope="row"] { text-align: left; }
@media (max-width: 720px) {
  .kaarten { grid-template-columns: 1fr; }
  .kaarten .kaart .tabel-overzicht td:last-child { width: 110px; }
}
.tabel-overzicht td.rechts, .tabel-overzicht td:last-child { white-space: nowrap; }
.tabel td.rechts, .tabel th.rechts { white-space: nowrap; }