/* Instellingen → Ondernemer en merk (nawerk markt 3, punt 4). Even breed als de andere instellingenbladen: Bedrijf en
   Adres naast elkaar, Eigen merken daaronder over de volle breedte; alleen variabelen uit bouwdoos.css.
   Smal (≤ 900 px): één kolom; mobiel (≤ 480 px): de merkentabel wordt rijen. */
.on-scherm { display: grid; gap: var(--a3); }
.on-schermkop h2 { font-size: var(--tekst-kop); font-weight: 600; margin: 0; }
.on-schermkop p { margin: var(--a1) 0 0; color: var(--tekst-zacht); font-size: var(--tekst-basis); }
.on-werkruimte { display: grid; gap: var(--a3); grid-template-columns: 1fr 1fr; align-items: stretch; }
.on-werkruimte > .on-ws-kop, .on-werkruimte > [data-on-kaart="merken"] { grid-column: 1 / -1; }
@media (max-width: 900px) { .on-werkruimte { grid-template-columns: 1fr; } }
.on-ws-kop { font-size: var(--tekst-titel); font-weight: 600; margin: var(--a2) 0 0; }
.on-kaart { display: grid; gap: var(--a3); padding: var(--a4); background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); }
.on-kop { display: flex; gap: var(--a2); align-items: flex-start; }
.on-kop h3 { font-size: var(--tekst-titel); font-weight: 600; margin: 0; }
.on-kop p { margin: var(--a1) 0 0; color: var(--tekst-zacht); font-size: var(--tekst-basis); }
.on-icoon { flex: none; color: var(--accent); margin-top: 2px; }
.on-rij { display: grid; gap: var(--a3); }
.on-rij--2 { grid-template-columns: 1fr 1fr; }
.on-veld { display: grid; gap: var(--a1); align-content: start; }
.on-veld label { font-size: var(--tekst-tabel); font-weight: 600; }
.on-veld input, .on-veld select, .on-merken input { font-size: var(--tekst-basis); min-height: var(--hoogte-veld); padding: 0 var(--a2); border-radius: var(--radius-veld); width: 100%; box-sizing: border-box; }
.on-veld input[aria-invalid="true"] { border-color: var(--fout-tekst); }
.on-fout { margin: 0; color: var(--fout-tekst); font-size: var(--tekst-tabel); }
.on-voet { display: flex; gap: var(--a2); align-items: center; justify-content: flex-end; }
.on-bevestiging { color: var(--tekst-zacht); font-size: var(--tekst-tabel); }
.on-merken { width: 100%; }
.on-merken td { vertical-align: middle; }
.on-merken .on-leeg td { color: var(--tekst-zacht); }
.on-acties { text-align: right; white-space: nowrap; }
.on-potlood { background: none; border: 0; color: var(--tekst-zacht); cursor: pointer; min-width: var(--klikdoel); min-height: var(--klikdoel); border-radius: var(--radius-veld); }
.on-potlood:hover, .on-potlood:focus-visible { color: var(--accent); background: var(--accent-licht); }
.on-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) {
  .on-kaart { padding: var(--a3); }
  .on-rij--2 { grid-template-columns: 1fr; }
  .on-merken thead { display: none; }
  .on-merken, .on-merken tbody, .on-merken tfoot, .on-merken tr, .on-merken td { display: block; width: 100%; box-sizing: border-box; }
  .on-merken tr { padding: var(--a2) 0; border-bottom: 1px solid var(--lijn); }
  .on-merken td { border: 0; padding: var(--a1) 0; }
  .on-merken td[data-label]::before { content: attr(data-label); display: block; font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
  .on-acties { text-align: left; }
}
.on-zacht { color: var(--tekst-zacht); }
.on-merken .bd-pil { font-size: var(--tekst-tabel); white-space: nowrap; }