/* Lettertypen van de eigen server. Zie templates/basis.html voor waarom.

   Atkinson Hyperlegible voor de tekst: gemaakt om verwarring tussen tekens
   te voorkomen (0 en O, 1 en l). In 0.7 stond hier tijdelijk de letter van
   het systeem, omdat ik dacht dat Atkinson het verschil met het voorstel
   veroorzaakte. Inzoomen op Marks eigen screenshot van het voorstel liet
   het omgekeerde zien: dat ís Atkinson. Het verschil was donker tegenover
   licht; zie basis.html. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("lettertypen/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("lettertypen/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("lettertypen/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("lettertypen/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --papier:    #e6e9ee;
  --kolom:     #f1f3f6;
  --vel:       #ffffff;
  --rand:      #b9c1cc;
  --notitie:   #2b3542;
  --inkt:      #10141a;
  --zacht:     #44505f;
  --lijn:      #c6ccd6;
  --accent:    #10405f;
  --accentzacht:#dceaf4;
  --laat:      #96180f;
  --vandaag:   #7a4600;
  --rust:      #1f5d41;
  /* Tekst op een vlak in de accentkleur. In donker is de accent licht
     blauw, en wit daarop was nauwelijks te lezen (de knop Opslaan). */
  --opaccent:  #ffffff;

  --vlak-radius: 5px;
  --tekst: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cijfer: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* De lettergrootte. De knoppen boven het bord zetten --schaal (thema.js
     doet het op elke pagina vóór het tekenen). Alles groeit mee: de tekst
     via --basis, de rest via de lettergrootte van de pagina zelf (rem), en
     de kolommen en het paneel worden net zo veel breder, zodat bedrag,
     looptijd en termijn op één regel blijven passen. */
  --schaal: 1;
  --basis: calc(13.5px * var(--schaal));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0f141b; --kolom: #171e27; --vel: #313c4b; --inkt: #f6f8fb;
    --zacht: #c9d2de; --notitie: #e2e8ef; --lijn: #3f4a59; --rand: #576579;
    --accent: #8ecdf8; --accentzacht: #1e4f78;
    --laat: #ff8a80; --vandaag: #ffc65c; --rust: #6fdca3; --opaccent: #0f141a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #0f141b; --kolom: #171e27; --vel: #313c4b; --inkt: #f6f8fb;
  --zacht: #c9d2de; --notitie: #e2e8ef; --lijn: #3f4a59; --rand: #576579;
  --accent: #8ecdf8; --accentzacht: #1e4f78;
  --laat: #ff8a80; --vandaag: #ffc65c; --rust: #6fdca3; --opaccent: #0f141a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
html { font-size: calc(100% * var(--schaal)); }

body {
  margin: 0;
  font: var(--basis)/1.45 var(--tekst);
  color: var(--inkt);
  background: var(--papier);
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.balk {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  padding: .6rem 1rem;
  background: var(--vel);
  border-bottom: 1px solid var(--lijn);
  position: sticky;
  top: 0;
  z-index: 5;
}
.balk nav { display: flex; gap: 1rem; font-weight: 600; }
.balk .zoek { flex: 1 1 14rem; }
.balk .zoek input { width: 100%; }
.balk .uit { margin-left: auto; }

input, select, textarea, button {
  font: inherit;
  padding: .35rem .5rem;
  border: 1px solid var(--lijn);
  border-radius: 4px;
  background: var(--vel);
  color: inherit;
}
button { cursor: pointer; background: var(--vel); }
button[type=submit].hoofd { background: var(--accent); color: var(--opaccent); border-color: var(--accent); }

main { padding: 1rem; }

/* --- Bord -------------------------------------------------------------- */

.bord {
  display: flex; gap: 8px;
  padding: 8px 12px 12px;
  height: calc(100% - 46px);
  overflow-x: auto; overflow-y: hidden;
  align-items: stretch;
}
.kolom {
  /* De breedte van het voorstel dat Mark koos (236 pixels), zodat bedrag,
     looptijd en termijn op één regel passen. Smaller persen maakte elke
     kaart twee keer zo hoog. Past het bord niet, dan schuift het: de pijlen
     aan de rand en de kolomkiezer laten zien dat het doorloopt, en tijdens
     slepen schuift het bord vanzelf mee. */
  flex: 1 0 calc(236px * var(--schaal));
  min-width: calc(236px * var(--schaal));
  max-width: calc(300px * var(--schaal));
  /* Nodig voor de scheiding bij het zijspoor, die zich anders aan de hele
     pagina meet in plaats van aan deze kolom. */
  position: relative;
  display: flex; flex-direction: column;
  background: var(--kolom);
  border: 1px solid var(--lijn);
  border-radius: var(--vlak-radius);
}
.kolom > h2 {
  display: flex; align-items: baseline; gap: .4rem; min-width: 0;
  margin: 0; padding: .4rem .5rem .35rem;
  font-size: .85em; font-weight: 700; letter-spacing: .01em;
  color: var(--inkt);
  border-bottom: 1px solid var(--lijn);
}
.kolom > h2 .n {
  margin-left: auto; font-family: var(--cijfer); font-size: .75em;
  color: var(--zacht); font-variant-numeric: tabular-nums;
}
.kolom > h2 .toets {
  font-family: var(--cijfer); font-size: .7em; color: var(--accent);
  border: 1px solid var(--lijn); border-radius: 3px; padding: 0 .25em;
}
.stapel { flex: 1; min-width: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.kolom.doelwit { outline: 2px solid var(--accent); outline-offset: -1px; }
.kolom.doelwit .stapel { background: var(--accentzacht); }
.kaart.stil { border-left-color: var(--rand); }

.groep {
  font-size: .78em; font-weight: 700; letter-spacing: .02em;
  color: var(--zacht); text-transform: none;
  padding: .3rem .1rem .1rem; display: flex; gap: .3rem; align-items: baseline;
}
.groep .n { font-family: var(--cijfer); }

/* --- Kaart ------------------------------------------------------------- */

.kaart {
  background: var(--vel); border: 1px solid var(--rand);
  border-left: 4px solid var(--rand);
  border-radius: 5px; padding: .4rem .5rem;
  box-shadow: 0 1px 2px rgba(10, 20, 35, .08);
  cursor: grab; user-select: none;
}
.kaart:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kaart.actief { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kaart .naam { font-weight: 700; font-size: 1em; line-height: 1.25; }
/* De naam is een link, zodat het bord ook zonder javascript werkt, maar hij
   hoort niet als link te schreeuwen: de hele kaart is al aanklikbaar. */
/* De naam links, het signaal rechts. Het signaal stond als slotregel onder
   de opmerking: daar las je het pas nadat je de hele kaart had gelezen,
   terwijl het juist bepaalt of je die kaart moet lezen. */
.kaart .naamregel { margin: 0; }
.kaart a.naam { color: var(--inkt); text-decoration: none; display: block; }
.kaart a.naam:hover, .kaart a.naam:focus-visible { text-decoration: underline; }
.kaart .rij { display: flex; gap: .35rem; align-items: baseline; flex-wrap: wrap; }
.kaart .geld {
  font-family: var(--cijfer); font-size: .92em; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--inkt);
}
.kaart .bij { font-size: .88em; color: var(--notitie); }
.kaart .mij {
  font-size: .8em; font-weight: 700; color: var(--accent);
  background: var(--accentzacht); border-radius: 3px; padding: .05em .4em;
}
.kaart .regel {
  font-size: .93em; margin: .3rem 0 0; color: var(--inkt); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kaart .notitie {
  font-size: .88em; color: var(--notitie); margin: .35rem 0 0; line-height: 1.4;
  border-top: 1px solid var(--lijn); padding-top: .3rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.kaart .notitie .wie { font-weight: 400; color: inherit; }
.kaart .sein { font-size: .85em; font-weight: 700; margin-top: .3rem; }
.kaart.te-laat   { border-left-color: var(--laat); }
.kaart.te-laat .sein { color: var(--laat); }
.kaart.vandaag   { border-left-color: var(--vandaag); }
.kaart.vandaag .sein { color: var(--vandaag); }
.kaart.stil      { border-left-color: var(--zacht); }
.kaart.stil .sein { color: var(--zacht); }
.kaart.rustig    { border-left-color: var(--rust); }



.sleepbeeld {
  position: fixed; z-index: 50; pointer-events: none;
  width: calc(222px * var(--schaal)); opacity: .95; transform: rotate(-1.2deg);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.gat { border: 1px dashed var(--accent); border-radius: 4px; background: var(--accentzacht); }


/* --- Dagoverzicht -----------------------------------------------------
   Vier groepen naast elkaar op een breed scherm, onder elkaar op een smal.
   Elk dossier is een kaartje met genoeg om te beslissen, en de knoppen om
   de opvolging hier te verzetten. Het was een smalle lijst links bovenin met
   een lege pagina ernaast. */

.overzicht { max-width: 96rem; }
.overzichtkop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.2rem;
  margin-bottom: .8rem; }
.overzichtkop h1 { margin: 0; }
.overzichtkop .datum { font-weight: 400; color: var(--zacht); font-size: .6em; margin-left: .4rem; }
.overzichtkop .samenvatting { margin: 0; color: var(--zacht); }
.overzichtgroepen {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.overzichtgroep {
  background: var(--kolom); border: 1px solid var(--lijn);
  border-radius: var(--vlak-radius); padding: 0 8px 8px;
}
.overzichtgroep h2 {
  font-size: .95em; margin: 0 -8px 8px; padding: .5rem .7rem;
  border-bottom: 1px solid var(--lijn);
}
.groep-te_laat h2 { color: var(--laat); }
.groep-vandaag h2 { color: var(--vandaag); }
.overzicht .leeg { color: var(--zacht); font-style: italic; margin: .3rem .2rem; }

.taak {
  background: var(--vel); border: 1px solid var(--rand);
  border-left: 4px solid var(--rand); border-radius: 5px;
  padding: .45rem .6rem; margin-bottom: 6px;
}
.taak.signaal-te_laat { border-left-color: var(--laat); }
.taak.signaal-vandaag { border-left-color: var(--vandaag); }
.taak p { margin: .18rem 0 0; }
.taak .taakkop { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem .5rem;
  justify-content: space-between; align-items: baseline; }
.taak .naam { font-weight: 700; color: var(--inkt); }
.taak .sein { font-size: .85em; font-weight: 700; white-space: nowrap; margin-left: auto; }
.taak.signaal-te_laat .sein { color: var(--laat); }
.taak.signaal-vandaag .sein { color: var(--vandaag); }
.taak.signaal-stil .sein, .taak.signaal-zonder_datum .sein { color: var(--zacht); }
.taakfeiten { display: flex; flex-wrap: wrap; gap: .1rem .45rem; align-items: baseline;
  font-size: .9em; color: var(--zacht); }
.taakfeiten .geld { font-family: var(--cijfer); font-weight: 600; color: var(--inkt); }
.taakfeiten .mij { font-size: .9em; font-weight: 700; color: var(--accent);
  background: var(--accentzacht); border-radius: 3px; padding: 0 .4em; }
.taak .regel { font-size: .95em; }
.taak .notitie { font-size: .88em; color: var(--notitie);
  border-top: 1px solid var(--lijn); padding-top: .25rem; margin-top: .3rem; }
.taak .notitie .wie { font-weight: 700; color: var(--zacht); }
.taakknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin-top: .4rem; font-size: .85em; }
.taakknoppen .zacht { color: var(--zacht); }
.taakknoppen button {
  background: var(--papier); color: var(--inkt); border: 1px solid var(--rand);
  border-radius: 4px; padding: .1rem .45rem; cursor: pointer; font-size: 1em;
}
.taakknoppen button:hover { background: var(--accentzacht); border-color: var(--accent); }
.taakknoppen a { margin-left: auto; }

/* --- Dossier ---------------------------------------------------------- */

/* De dossierpagina heeft twee kolommen: gegevens en opmerkingen. 52rem was
   de maat van toen alles onder elkaar stond, en perste de velden tot twee per
   rij terwijl er ruimte zat. Een pagina met één kolom blijft smal: een
   invoerveld van elf centimeter leest niemand prettig. */
.dossier { max-width: 86rem; }
.dossier.smal { max-width: 58rem; }
.velden { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem 1.1rem; }
.velden label { display: flex; flex-direction: column; font-size: .85rem; color: var(--zacht); }
.velden input, .velden select { margin-top: .15rem; color: var(--inkt); }
fieldset { border: 1px solid var(--lijn); border-radius: 6px; background: var(--vel); margin: 0 0 1rem; }
/* Geen hoofdletters: WIE en HOEVEEL schreeuwen, en het zijn gewone
   woorden. Een kopje mag een kopje zijn. */
legend {
  font-size: .95rem; font-weight: 700; color: var(--inkt);
  padding: 0 .3rem 0 0;
}
.veldfout { color: var(--laat); font-size: .8rem; }

/* --- Telefoon --------------------------------------------------------- */

@media (max-width: 700px) {
  .kolomkiezer {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
  }
  .kolomkiezer a {
    white-space: nowrap;
    text-decoration: none;
    background: var(--vel);
    border: 1px solid var(--lijn);
    border-radius: 999px;
    padding: .3rem .7rem;
    font-size: .85rem;
  }
  .kolomkiezer a.actief { background: var(--accent); color: var(--opaccent); border-color: var(--accent); }
  .bord { display: block; }
  /* Gestapeld hoort een kolom de volle breedte te krijgen; de bovengrens van
     320px liet anders bijna de helft van een telefoonscherm ongebruikt. */
  .kolom { min-width: 0; max-width: none; margin-bottom: .75rem; }
  /* Inklappen doet hier niets, want de kolommen staan onder elkaar. Een knop
     die zichtbaar niets doet maar wel iets bewaart voor straks op de laptop,
     is erger dan geen knop. */
  .kolom h2 { padding-right: 0; }
  .kolom h2 .inklap { display: none; }
  .kaart { cursor: default; }
}

/* --- Controlescherm --------------------------------------------------- */

.controle-naast-elkaar { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.controle-naast-elkaar .bron pre {
  background: var(--vel);
  border: 1px solid var(--lijn);
  border-radius: 4px;
  padding: .6rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 24rem;
  overflow: auto;
  font-size: .85rem;
}
.controle .herkend label { display: flex; flex-direction: column; margin-bottom: .5rem;
  font-size: .85rem; color: var(--zacht); }
/* Onzeker is geen fout: de waarde staat er wel, maar er moet iemand naar
   kijken. Een dikke rand links valt op zonder dat kleur het enige signaal is,
   zodat het ook in de donkere stand en zonder kleurwaarneming te zien is. */
.controle .herkend label.onzeker input {
  border-color: var(--vandaag);
  border-left: 4px solid var(--vandaag);
  padding-left: calc(.5rem - 3px);
}
.plakveld textarea { width: 100%; }
@media (max-width: 700px) { .controle-naast-elkaar { grid-template-columns: 1fr; } }

#sneltoetsen {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: var(--vel);
  border: 1px solid var(--lijn);
  border-radius: 6px;
  padding: .75rem 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
#sneltoetsen h2 { font-size: .9rem; margin: 0 0 .4rem; }
#sneltoetsen ul { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
#sneltoetsen li { margin-bottom: .2rem; }
kbd {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  border: 1px solid var(--lijn);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 .3em;
  background: var(--papier);
  font-family: inherit;
  font-size: .85em;
}
.kopieerbalk { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.kopieerbalk button { font-size: .85rem; }

.meldingen p {
  background: #fff6d9;
  border: 1px solid #e0cf96;
  border-radius: 4px;
  padding: .45rem .7rem;
  margin: 0 0 .5rem;
}

.verkoper {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  background: var(--vel); border: 1px solid var(--lijn); border-radius: 4px;
  padding: .4rem .5rem; margin-bottom: .35rem;
}
.verkoper .verkopernaam { font-weight: 700; min-width: 7rem; }
.verkoper input { flex: 1 1 9rem; min-width: 0; }

/* --- Telefoon: één kolom tegelijk -------------------------------------- */

@media (max-width: 700px) {
  .kolomkiezer {
    display: flex; gap: .4rem; overflow-x: auto;
    padding-bottom: .5rem; margin-bottom: .5rem;
  }
  .kolomkiezer a {
    white-space: nowrap; text-decoration: none; background: var(--vel);
    border: 1px solid var(--rand); border-radius: 999px;
    padding: .3rem .7rem; font-size: .9em;
  }
  .kolomkiezer a.actief { background: var(--accent); color: var(--opaccent); border-color: var(--accent); }
  .bord { display: block; height: auto; overflow: visible; }
  .kolom { min-width: 0; margin-bottom: .75rem; }
  .kaart { cursor: default; }
}
@media (min-width: 701px) {
  .kolomkiezer { display: none; }
  /* Alleen op een breed scherm neemt het slepen de aanwijzer over; op een
     telefoon moet een veeg over een kaart gewoon de pagina scrollen. */
  .kaart { touch-action: none; }
}

.kaart.gekozen { outline: 2px solid var(--accent); outline-offset: 1px; }
.kaart:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- Weergaveknoppen en het detailpaneel -------------------------------- */

.weergave { display: flex; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; }
.schakel {
  display: flex; border: 1px solid var(--rand); border-radius: var(--vlak-radius);
  overflow: hidden;
}
.schakel button {
  border: 0; background: var(--vel); padding: .3rem .65rem; cursor: pointer;
  font-size: .85em; color: var(--inkt);
}
.schakel button[aria-pressed="true"] { background: var(--accent); color: var(--opaccent); }
.letterkeuze button { font-weight: 700; padding-inline: .55rem; }

.paneel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(calc(430px * var(--schaal)), 94vw);
  background: var(--vel); border-left: 1px solid var(--rand);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
  padding: 1rem; overflow-y: auto; z-index: 40;
}
.paneel .sluit {
  position: absolute; top: .6rem; right: .6rem;
  border: 1px solid var(--rand); background: var(--papier);
  border-radius: 4px; padding: .1rem .45rem; cursor: pointer;
}
.paneel h2 { margin: 0 0 .1rem; font-size: 1.15em; }
.paneel .sub { color: var(--zacht); font-size: .88em; margin: 0 0 .8rem; }
.paneel .statusregel-tekst {
  background: var(--accentzacht); border-radius: 4px; padding: .45rem .6rem;
  margin: 0 0 .8rem;
}
.paneel .velden p { margin: 0 0 .5rem; }
.paneel .kop { font-size: .78em; color: var(--zacht); font-weight: 700; }
.paneel .geldwaarde { font-family: var(--cijfer); font-weight: 600; }
.paneel [data-kopieer] { cursor: pointer; border-bottom: 1px dotted var(--rand); }

body[data-dicht="compact"] .kaart .notitie,
body[data-dicht="compact"] .kaart .bij { display: none; }
body[data-dicht="ruim"] .kaart .regel { -webkit-line-clamp: 6; }

/* --- Kaartdetails ------------------------------------------------------- */

.kaart { margin: 0; }
.kaart p { margin: .18rem 0 0; }
.kaart .naam { margin: 0; }
.kaart .bij.zakelijk {
  font-weight: 700; color: var(--rust);
}
.verborgen-knop { position: absolute; left: -9999px; }

.aantal {
  display: inline-block; min-width: 1.5em; text-align: center;
  background: var(--papier); border-radius: 999px;
  font-size: .78em; padding: 0 .35em; font-variant-numeric: tabular-nums;
}

/* Signaalkleuren: het eerste waar je oog op valt als je een kolom afzoekt. */
.kaart.signaal-te_laat { border-left-color: var(--laat); }
.kaart.signaal-te_laat .sein { color: var(--laat); }
.kaart.signaal-vandaag { border-left-color: var(--vandaag); }
.kaart.signaal-vandaag .sein { color: var(--vandaag); }
.kaart.signaal-stil, .kaart.signaal-zonder_datum { border-left-color: var(--zacht); }
.kaart.signaal-stil .sein,
.kaart.signaal-zonder_datum .sein { color: var(--zacht); }

/* Hoe langer een dossier zonder datum stilligt, hoe meer het opvalt. */
.kaart.stilte-1 { border-left-color: #b9a46a; }
.kaart.stilte-2 { border-left-color: #c98f2e; }
.kaart.stilte-3 { border-left-color: var(--laat); }
.kaart.stilte-3 .sein { color: var(--laat); font-weight: 700; }

.filterbalk {
  background: var(--accentzacht); border: 1px solid var(--rand);
  border-radius: 4px; padding: .4rem .7rem; margin: 0 0 .75rem;
}
.filter-uit { text-decoration: none; font-weight: 700; margin-left: .4rem; }

body[data-dicht="compact"] .kaart .notitie,
body[data-dicht="compact"] .kaart .bron { display: none; }
body[data-dicht="ruim"] .kaart .notitie { -webkit-line-clamp: 8; }

/* Het knipsel naast de herkende velden. Breedte volgt de kolom, hoogte is
   begrensd zodat een lange schermafdruk het formulier niet wegduwt; klikken
   opent hem op ware grootte. */
.controle .bron .knipselbeeld {
  max-width: 100%; max-height: 50vh; display: block;
  border: 1px solid var(--lijn); border-radius: var(--vlak-radius);
  background: var(--vel);
}
.controle .bron h3 { font-size: .85rem; color: var(--zacht); margin: .6rem 0 .2rem; }
.fout .opdracht {
  font: 0.95rem/1.4 var(--cijfer); background: var(--kolom);
  border: 1px solid var(--lijn); border-radius: var(--vlak-radius);
  padding: .5rem .6rem; overflow-x: auto;
}
.fout .zacht { color: var(--zacht); font-size: .85rem; }

/* De knipselknop staat boven het plakveld: eerst de snelle weg, dan de tekst. */
.knipselveld { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; }
/* Een toelichting bij een veld of een keuze. Stond alleen als
   .knipselveld .hint, waardoor de waarschuwing bij "bewaar dit knipsel" als
   gewone bodytekst verscheen: luider dan de keuze die hij toelicht. */
.hint { color: var(--zacht); font-size: .82rem; }
.knipselveld .hint { flex: 1 1 18rem; }
.knipsels { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.knipsels img {
  max-height: 7rem; border: 1px solid var(--lijn);
  border-radius: var(--vlak-radius); background: var(--vel);
}

/* Een vinkje met zijn tekst ernaast in plaats van eronder: anders leest het
   als twee losse dingen. */
.keuze { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.keuze input { margin: 0; }

/* Narekenen: een waarschuwing, geen fout. Geel-oranje, met een rand links
   zodat het ook zonder kleur als "let op" leest, en geen bolletjes want het
   zijn hele zinnen. */
.nareken {
  list-style: none; margin: .6rem 0; padding: .5rem .7rem;
  border-left: 4px solid var(--vandaag);
  background: var(--kolom); border-radius: var(--vlak-radius);
  color: var(--inkt); font-size: .9rem;
}
.nareken li + li { margin-top: .35rem; }

/* Een label met een tekstvak eronder dat de volle breedte pakt. Werd op vier
   plaatsen gebruikt zonder dat er ooit opmaak voor was. */
/* Deze regel stond op "textarea" terwijl het veld een input is, en greep dus
   nergens aan: het label at de regel op en voor de tekst bleef een stompje
   van tien tekens over. Allebei nu, want welk element het wordt mag niet
   uitmaken voor de breedte. */
.statusregel-veld { display: block; margin: .5rem 0; }
.statusregel-veld input,
.statusregel-veld textarea { width: 100%; display: block; margin-top: .25rem; }

/* --- Voet met de versie ---------------------------------------------- */

.voet {
  padding: .35rem .9rem .5rem;
  color: var(--zacht);
  font-size: .76rem;
  text-align: right;
}
.voet .versie { font-family: var(--cijfer, inherit); }

/* --- Kolommen in- en uitklappen -------------------------------------- */

/* Ruimte rechts in de kop, zodat de knop het aantal niet bedekt. De langste
   status ("Uitbetaald - administratief verwerken") duwde het aantal anders
   tot onder de knop. */
.kolom h2 { position: relative; padding-right: 2.3rem; align-items: flex-start; }
/* De naam wijkt, het aantal niet: dat moet leesbaar blijven. */
.kolom > h2 .kolomnaam {
  /* Niet afkappen. "Uitbetaald - a..." zegt niets; twee regels mag. */
  min-width: 0; line-height: 1.2;
}
.kolom > h2 .nuance {
  display: block; font-weight: 400; color: var(--zacht); font-size: .92em;
}
/* Alle koppen even hoog, zodat de kaarten op één lijn beginnen. */
.kolom > h2 { min-height: 2.9em; }
.kolom > h2 .aantal { margin-left: auto; flex: 0 0 auto; }
.kolom h2 .inklap {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  min-width: 1.4rem; padding: 0 .3rem;
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--zacht); font-size: .95rem; line-height: 1.3; cursor: pointer;
}
.kolom h2 .inklap:hover,
.kolom h2 .inklap:focus-visible { border-color: var(--lijn); color: var(--tekst); }

.kolom.ingeklapt {
  flex: 0 0 2.6rem;
  min-width: 2.6rem;
  max-width: 2.6rem;
}
.kolom.ingeklapt .stapel { display: none; }
.kolom.ingeklapt h2 {
  /* De naam staat verticaal, zodat je ziet welke kolom het is zonder dat hij
     ruimte kost. Niet height: 100%: dat maakte de ingeklapte kolom hoger dan
     het bord en gaf de pagina alsnog een verticale schuifbalk — dezelfde fout
     als bij de scheidingslijn, in de enige stand die de tests niet meten. */
  writing-mode: vertical-rl;
  height: auto;
  flex: 1;
  margin: 0;
  padding: .5rem .25rem;
  gap: .4rem;
  align-items: center;
}
.kolom.ingeklapt h2 .kolomnaam { white-space: nowrap; }
.kolom.ingeklapt h2 .inklap {
  position: static;
  writing-mode: horizontal-tb;
  align-self: center;
}
.kolom.ingeklapt h2 .toets { writing-mode: horizontal-tb; }

/* Akkoord wachten is geen stap in de pijplijn maar een zijspoor; dat hoort
   je te zien zonder de kolomnaam te lezen. */
.kolom.zijspoor {
  margin-left: 1.9rem;
  border-left-width: 3px;
  border-left-color: var(--accent);
}
.kolom.zijspoor::before {
  content: "";
  /* Let op: zonder position: relative op .kolom meet dit zich aan de pagina.
     De lijn werd dan een heel scherm hoog, liep door onder het bord en de
     voettekst, en gaf elke bordpagina een verticale schuifbalk. */
  position: absolute;
  top: 0;
  margin-left: -1.15rem;
  width: 1px;
  height: 100%;
  background: var(--lijn);
}

/* --- Schuifknoppen langs de rand ------------------------------------- */

.schuifknop {
  position: fixed; top: 50%; z-index: 30;
  width: 2rem; height: 3rem; margin-top: -1.5rem;
  padding: 0;
  background: var(--vel); color: var(--tekst);
  border: 1px solid var(--lijn); border-radius: 4px;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.schuifknop.links { left: 2px; }
.schuifknop.rechts { right: 2px; }
.schuifknop:hover { border-color: var(--accent); }

@media (max-width: 700px) {
  .schuifknop { display: none; }
  .kolom.zijspoor { margin-left: 0; }
  .kolom.ingeklapt { flex: auto; min-width: 0; max-width: none; }
  .kolom.ingeklapt .stapel { display: flex; }
  .kolom.ingeklapt h2 { writing-mode: horizontal-tb; height: auto; }
}

/* --- Labels op een kaart --------------------------------------------- */

.labels { display: flex; flex-wrap: wrap; gap: .25rem; margin: .25rem 0 0; }
.label {
  padding: .05rem .4rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  font-size: .72rem;
  line-height: 1.5;
  white-space: nowrap;
}
.label-zakelijk { border-color: var(--accent); color: var(--accent); }
.label-particulier { color: var(--zacht); }
.label-toetsing { border-style: dashed; color: var(--zacht); }

/* De labels staan in een kolom, dus alles in een label wordt een eigen regel.
   De labeltekst en de markering horen op dezelfde regel, anders leest het
   kadertje als een tweede, leeg invoerveld boven het echte. */
.labelregel { display: flex; align-items: baseline; gap: .35rem; }



/* --- Dossierpagina: gegevens links, opmerkingen rechts ------------------ */

.dossierindeling {
  display: grid; gap: 1.5rem;
  /* De gegevens krijgen de ruimte, want daar staan drie velden naast elkaar.
     De opmerkingen hebben genoeg aan een leesbare kolom. */
  grid-template-columns: minmax(0, 2.3fr) minmax(300px, 1fr);
  align-items: start;
}
@media (max-width: 1100px) {
  .dossierindeling { grid-template-columns: 1fr; }
}
.gegevens { min-width: 0; }

/* Zo begin je een dossier: knip het aanvraagscherm en plak het hier. Dit
   stond onderaan de pagina onder een kopje "Plakken", waar je het niet vindt
   als je niet weet dat het bestaat. */
.snelinvullen {
  background: var(--accentzacht);
  border: 1px solid var(--rand);
  border-radius: var(--vlak-radius);
  padding: .8rem 1rem; margin: 0 0 1.25rem;
  display: grid; gap: .6rem;
}
.snelinvullen .knipselveld { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.snelinvullen .hint { font-size: .88em; color: var(--zacht); margin: 0; }
.snelinvullen kbd {
  font-family: var(--cijfer); font-size: .85em; background: var(--vel);
  border: 1px solid var(--lijn); border-bottom-width: 2px; border-radius: 3px;
  padding: 0 .3em;
}
.snelinvullen .plakveld { display: flex; gap: .6rem; align-items: flex-start; }
.snelinvullen .plakveld textarea { flex: 1; min-width: 0; }

/* --- Opmerkingen -------------------------------------------------------- */

.opmerkingkolom { min-width: 0; max-width: 34rem; }
.opmerkingkolom h2 { margin-top: 0; }
.nieuwe-opmerking {
  background: var(--vel); border: 1px solid var(--rand);
  border-radius: var(--vlak-radius); padding: .7rem .8rem; margin-bottom: 1rem;
}
.nieuwe-opmerking textarea { width: 100%; min-height: 5.5rem; resize: vertical; }
.nieuwe-opmerking .opvolging {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .5rem 0 .6rem;
  font-size: .9em;
}
.nieuwe-opmerking .opvolging label { display: flex; align-items: center; gap: .3rem; }

/* Een opmerking is tekst om te lezen. Hij stond in een invoervak van drie
   regels met een knop ernaast: daarin kon je niets lezen en niets kwijt. */
.opmerking {
  background: var(--vel); border: 1px solid var(--lijn);
  border-left: 3px solid var(--rand);
  border-radius: var(--vlak-radius);
  padding: .6rem .8rem; margin-bottom: .6rem;
}
.opmerking .kop {
  margin: 0 0 .3rem; font-size: .8rem; color: var(--zacht);
  font-family: var(--cijfer);
}
.opmerking .opvolgen { color: var(--vandaag); font-weight: 700; }
.opmerking .tekst {
  margin: 0; font-size: 1rem; line-height: 1.5; color: var(--inkt);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.opmerking .bewerken { margin-top: .45rem; }
.opmerking .bewerken > summary {
  font-size: .85em; color: var(--zacht); cursor: pointer; width: max-content;
}
.opmerking .bewerken[open] > summary { margin-bottom: .4rem; }
.opmerking .bewerken textarea {
  width: 100%; min-height: 6rem; resize: vertical; margin-bottom: .4rem;
}
.opmerking .bewerken .weg { margin-top: .4rem; }
.opmerking .bewerken .weg button { color: var(--laat); }


/* De knoppen onder het formulier hoorden bij elkaar maar lagen los: opslaan,
   RDW, en de kopieerknoppen met elk hun eigen regel ertussen. */
.dossieracties {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 1rem 0 0; padding: .7rem .8rem;
  background: var(--vel); border: 1px solid var(--lijn);
  border-radius: var(--vlak-radius);
}
.dossieracties form { display: contents; }
.dossieracties .scheiding {
  width: 1px; align-self: stretch; background: var(--lijn); margin: 0 .3rem;
}
.dossieracties .kop { font-size: .85em; color: var(--zacht); flex-basis: 100%; }
.naardealer { margin: .2rem 0 0; font-size: .88em; grid-column: 1 / -1; }

/* Bij een keuzelijst hoort een vrij veld voor een waarde die er niet in
   staat. Dat mag kleiner: het is de uitzondering, niet de regel. */
.velden label > input[name$="_anders"] { margin-top: .25rem; font-size: .92em; }

.verkoper.nieuw {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--accentzacht); border: 1px solid var(--rand);
  border-radius: var(--vlak-radius); padding: .6rem .7rem; margin-bottom: .8rem;
}
.verkoper.nieuw input { flex: 1 1 11rem; min-width: 0; }


/* Twee labels op de kaart. Zakelijk is de uitzondering en mag opvallen;
   particulier is de regel en hoeft niet te roepen. */
/* Merkjes op de kaart: alleen de uitzondering. Particulier op elke kaart
   zetten is een regel tekst die niets onderscheidt; zakelijk en een
   pre-beoordeling zeggen wel iets, en staan op dezelfde regel als de
   maatschappij in plaats van op een eigen regel. */
.kaart .merk {
  font-size: .78em; border-radius: 3px; padding: 0 .35em;
  border: 1px solid var(--lijn); color: var(--zacht); white-space: nowrap;
}
.kaart .merk-zakelijk { border-color: var(--rust); color: var(--rust); font-weight: 700; }
.kaart .merk-pre { border-style: dashed; }
body[data-dicht="compact"] .kaart .merk { display: none; }

/* --- Opvolging -----------------------------------------------------------
   Eén regel bovenaan het dossier: wanneer kom je hierop terug, en in één
   klik iets anders. Het stond onderin het opmerkingenformulier, dus je moest
   een opmerking verzinnen om een datum te verzetten. */

.opvolgbalk {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  background: var(--vel);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--accent);
  border-radius: var(--vlak-radius);
  padding: .5rem .75rem;
  margin: 0 0 .9rem;
}
.opvolgbalk .stand { margin: 0; font-size: 1em; }
.opvolgbalk .stand strong { font-family: var(--cijfer); font-weight: 600; }
.opvolgbalk .geendatum { color: var(--zacht); }
.opvolgbalk .sein { font-weight: 700; }
.opvolgbalk .sein-te_laat { color: var(--laat); }
.opvolgbalk .sein-vandaag { color: var(--vandaag); }
.opvolgbalk .sein-stil, .opvolgbalk .sein-zonder_datum { color: var(--zacht); }
.opvolgknoppen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin-left: auto;
}
.opvolgknoppen button {
  background: var(--papier); color: var(--inkt);
  border: 1px solid var(--rand); border-radius: 4px;
  padding: .2rem .55rem; cursor: pointer; font-size: .92em;
}
.opvolgknoppen button:hover { background: var(--accentzacht); border-color: var(--accent); }
.opvolgknoppen .opdatum {
  display: flex; align-items: center; gap: .3rem;
  color: var(--zacht); font-size: .92em;
}
.opvolgknoppen .opdatum input { font-size: .95em; padding: .15rem .3rem; }
.opvolgknoppen .wissen { color: var(--zacht); }

/* In het opmerkingenformulier is opvolging één keuze naast de datum, niet
   vijf radioknoppen onder elkaar. */
.nieuwe-opmerking .opvolging {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center;
  margin: .4rem 0 .5rem; font-size: .93em; color: var(--zacht);
}
.nieuwe-opmerking .opvolging label {
  display: flex; align-items: center; gap: .3rem; margin: 0;
}
.nieuwe-opmerking .opvolging select,
.nieuwe-opmerking .opvolging input { color: var(--inkt); }

/* In het paneel staan de knoppen onder de gegevens, niet rechts uitgelijnd. */
.paneelopvolging { margin: .8rem 0 .4rem; justify-content: flex-start; }
.paneelopvolging .stand { flex: 1 0 100%; margin: 0 0 .2rem; color: var(--zacht); }
.paneelopvolging .stand strong { color: var(--inkt); font-family: var(--cijfer); }

/* Uitleg op het controlescherm over wat er bewust níet is overgenomen. */
.toelichting {
  background: var(--accentzacht); border: 1px solid var(--rand);
  border-radius: 4px; padding: .45rem .65rem; margin: 0 0 .7rem;
  font-size: .92em; color: var(--inkt);
}

/* De twee gegevensregels van een kaart. */
.kaart .cijferrij { column-gap: .4rem; }
.kaart .herkomst { column-gap: .3rem; row-gap: .1rem; }

/* Kenteken en telefoonnummer in de cijferletter: daar is 0 tegen O en 1
   tegen l echt een verschil. Dat was de reden voor Atkinson Hyperlegible;
   IBM Plex Mono doet hetzelfde en hebben we al. */
input[name="kenteken"], input[type="tel"] { font-family: var(--cijfer); }

.themaknop {
  background: transparent; border: 1px solid var(--rand); color: var(--inkt);
  border-radius: 4px; padding: .2rem .5rem; cursor: pointer; font-size: 1em;
}


/* --- Snel invullen op het formulier ------------------------------------ */

/* Een element dat verborgen is, blijft verborgen, ook als een regel hierboven
   het display: flex geeft. Zonder dit verscheen "nieuwe dealer" altijd. */
[hidden] { display: none !important; }

.plakvlak {
  border: 2px dashed var(--accent); border-radius: var(--vlak-radius);
  background: var(--vel); padding: .8rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  cursor: text;
}
.plakvlak:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.plakvlak.erboven { background: var(--accentzacht); }
.plakvlak .plakkop { margin: 0; flex: 1 1 20rem; }
.plakvlak .plakkop strong { font-size: 1.05em; }
.plakvlak .plakkop .hint { display: block; margin-top: .15rem; }
.plaktekstregel { display: flex; gap: .6rem; align-items: stretch; }
.plaktekstregel textarea { flex: 1; min-width: 0; }

.leesresultaten { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.leesresultaten:empty { display: none; }
.leesresultaten li {
  display: flex; align-items: center; gap: .6rem;
  background: var(--vel); border: 1px solid var(--rand); border-radius: 4px;
  padding: .3rem .5rem; font-size: .92em;
}
.leesresultaten img {
  width: 4.5rem; height: 2.6rem; object-fit: cover; object-position: left top;
  border: 1px solid var(--lijn); border-radius: 3px;
}
.leesresultaten .bezig { color: var(--zacht); }
.leesresultaten .klaar { border-left: 4px solid var(--rust); }
.leesresultaten .fout { border-left: 4px solid var(--laat); color: var(--laat); }

/* Wat net is ingevuld licht even op en houdt daarna een randje, zodat je
   kunt zien wat van het knipsel kwam. Oranje: kijk dit even na. */
@keyframes oplichten { from { background: var(--accentzacht); } to { background: transparent; } }
label.ingevuld, label.nakijken { border-radius: 4px; animation: oplichten 1.6s ease-out; }
label.ingevuld input, label.ingevuld select { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust); }
label.nakijken input, label.nakijken select { border-color: var(--vandaag); box-shadow: 0 0 0 2px var(--vandaag); }
label.nakijken::after { content: "kijk dit na"; color: var(--vandaag); font-size: .8em; font-weight: 700; }

/* Dealer, nieuwe dealer en verkoper. */
.nieuwnaam { margin-top: .3rem; }
.nieuweverkoper {
  margin-top: .6rem; padding: .6rem; border: 1px dashed var(--rand);
  border-radius: 4px; background: var(--kolom);
}
.contact { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .9em; margin-top: .2rem; }
.contact a { font-family: var(--cijfer); }
.rdw { display: block; font-size: .88em; color: var(--zacht); margin-top: .2rem; min-height: 1.2em; }

/* De stand van zaken is groot genoeg om een zin in te lezen. */
.standvanzaken textarea {
  width: 100%; min-height: 4.6em; font-size: 1.05em; line-height: 1.4; resize: vertical;
}
.standvanzaken .hint { display: block; }

/* Opslaan blijft in beeld, ook onderaan een lang formulier en op de telefoon. */
.opslaanbalk {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: .8rem;
  background: var(--papier); padding: .6rem 0; margin-top: .4rem;
  border-top: 1px solid var(--lijn);
}
.opslaanbalk .hoofd { padding: .5rem 1.4rem; font-size: 1.05em; }

/* Contact in het paneel naast het bord. */
.contactblok { display: grid; gap: .4rem; margin: .6rem 0; }
.contactblok p { margin: 0; }
.contactblok a { margin-right: .7rem; font-family: var(--cijfer); }
.contactblok a.zacht { font-family: var(--tekst); color: var(--zacht); }
a.knop {
  display: inline-block; border: 1px solid var(--rand); border-radius: 4px;
  padding: .25rem .6rem; color: var(--inkt); background: var(--vel);
}

/* Een nieuw dossier heeft nog geen opmerkingen: dan het hele vlak voor de velden. */
.dossierindeling.zonderkolom { grid-template-columns: minmax(0, 1fr); max-width: 64rem; }

/* Kolom kiezen in het paneel: één tik in plaats van slepen. */
.statuskeuze { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0 .4rem; }
.statuskeuze .stand { flex: 1 0 100%; margin: 0 0 .2rem; color: var(--zacht); }
.statuskeuze button {
  background: var(--papier); color: var(--inkt); border: 1px solid var(--rand);
  border-radius: 4px; padding: .2rem .5rem; cursor: pointer; font-size: .9em;
}
.statuskeuze button[disabled] { background: var(--accent); color: var(--vel); border-color: var(--accent); }

/* --- Telefoon: de kop op twee rustige regels -------------------------- */
@media (max-width: 700px) {
  .balk { gap: .4rem .5rem; padding: .45rem .6rem; }
  /* De menu-items op één regel die zijwaarts schuift, niet afgebroken over
     drie regels ("Nieuw / dossier"). */
  .balk nav {
    flex: 1 0 100%; gap: .9rem; overflow-x: auto; white-space: nowrap;
    scrollbar-width: none; padding-bottom: .1rem;
  }
  .balk .zoek { flex: 1 1 0; min-width: 0; }
  .balk .uit { margin-left: 0; }
  .balk .uit button { font-size: 0; padding: .3rem .55rem; }
  .balk .uit button::after { content: "Uit"; font-size: .9rem; }
  .weergave { display: none; }   /* dichtheid en lettergrootte zijn voor de laptop */
  .dossier h1 { font-size: 1.5rem; margin: .4rem 0 .6rem; }
  .velden { grid-template-columns: 1fr 1fr; }
  .velden label:has(textarea), .velden .breed { grid-column: 1 / -1; }
  .opvolgknoppen { margin-left: 0; }
  .plaktekstregel { flex-direction: column; }
  .paneel { width: 100vw; }
  /* Grote tikdoelen in het paneel. */
  .statuskeuze button, .opvolgknoppen button, .contactblok a { padding: .45rem .6rem; }
  .contactblok a { display: inline-block; border: 1px solid var(--rand); border-radius: 4px; margin: .2rem .3rem .2rem 0; }
}
@media (max-width: 420px) {
  .velden { grid-template-columns: 1fr; }
}

/* --- Exact het voorstel (Marks screenshot) ------------------------------
   Gemeten op zijn screenshot: rustig groen #96dab5, vandaag #f5c478, te laat
   #ffa49d, kaart #242c36 op kolom #161b22. Deze regels staan onderaan zodat
   niets eerder in dit bestand ze overschrijft. */
.kaart.rustig { border-left-color: var(--rust); }
.kaart { border-left-width: 3px; border-color: var(--rand); }
/* Het inklapknopje alleen als je met de muis boven de kop staat, of erop
   tabt: het voorstel had geen knop in de kop, en hij leidde af. */
.kolom > h2 .inklap { opacity: 0; transition: opacity .12s; }
.kolom > h2:hover .inklap, .kolom > h2 .inklap:focus-visible,
.kolom.ingeklapt > h2 .inklap { opacity: 1; }
@media (hover: none) { .kolom > h2 .inklap { opacity: 1; } }


/* =========================================================================
   Frisser, in de taal van het bord
   -------------------------------------------------------------------------
   Het bord is het ene wat mag opvallen: kaarten met een gekleurd balkje.
   De rest gebruikt dezelfde drie lagen — pagina, vlak, kaart — en verder
   niets. Geen kaders met de titel in de rand, geen grijze knoppenrijen: een
   vlak met een kop erin, velden die donkerder zijn dan het vlak, en één
   knop in de accentkleur voor wat je komt doen.
   ========================================================================= */

/* De kop: woordmerk, menu met "hier ben je", zoeken. */
.balk { gap: .5rem 1.4rem; padding: .55rem 1rem; background: var(--kolom); }
.woordmerk {
  font-weight: 700; color: var(--inkt); font-size: 1.05rem; letter-spacing: -.01em;
  text-decoration: none; padding-right: .4rem;
}
.woordmerk:hover { text-decoration: none; color: var(--accent); }
.balk nav { gap: .2rem; align-items: center; }
.balk nav a {
  color: var(--zacht); font-weight: 600; text-decoration: none;
  padding: .3rem .6rem; border-radius: 5px;
}
.balk nav a:hover { color: var(--inkt); background: var(--vel); }
.balk nav a[aria-current="page"] { color: var(--inkt); background: var(--vel);
  box-shadow: inset 0 -2px 0 var(--accent); }
.balk nav a.nieuwknop { color: var(--accent); }
.balk .zoek input { background: var(--papier); border-color: var(--lijn); padding: .38rem .7rem; }
/* Het zoekveld geeft als eerste ruimte af, zodat de balk bij grote letters
   op één regel blijft. */
.balk .zoek { max-width: 30rem; flex-basis: 8rem; min-width: 7rem; }
.themaknop, .balk .uit button { background: transparent; color: var(--zacht); border-color: var(--lijn); }
.themaknop:hover, .balk .uit button:hover { color: var(--inkt); border-color: var(--rand); }
.balk .uit { margin-left: 0; }

/* Velden: donkerder dan het vlak eromheen, met een duidelijke focus. */
input, select, textarea {
  background: var(--papier); border: 1px solid var(--lijn); border-radius: 5px;
  padding: .45rem .6rem; color: var(--inkt);
}
input::placeholder, textarea::placeholder { color: var(--zacht); opacity: .7; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accentzacht);
}
button { border-radius: 5px; border-color: var(--rand); color: var(--inkt); background: var(--vel); }
button:hover { border-color: var(--accent); }
button[type=submit].hoofd, button.hoofd { font-weight: 700; padding: .45rem 1.1rem; }

/* Groepen in het formulier: een vlak met de kop erin, zoals een kaart. */
fieldset {
  background: var(--vel); border: 1px solid var(--lijn); border-radius: 8px;
  padding: .9rem 1rem 1rem; margin: 0 0 .9rem; position: relative;
}
legend {
  float: left; width: 100%; padding: 0; margin: 0 0 .7rem;
  font-size: 1rem; font-weight: 700; color: var(--inkt);
}
legend + * { clear: both; }
.velden label { color: var(--zacht); font-size: .82rem; gap: .2rem; }

/* Paginatitel: rustig, niet schreeuwen. */
.dossier h1, .overzicht h1, main > h1 { font-size: 1.6rem; letter-spacing: -.01em; margin: .3rem 0 .9rem; }

/* Het plakvak is het eerste wat je bij een nieuwe klant doet: het mag
   opvallen, met het accent in de rand en verder rustig. */
.snelinvullen { background: var(--kolom); border-color: var(--lijn); border-radius: 8px; }
.plakvlak { background: var(--vel); border-color: var(--accent); border-radius: 8px; padding: 1rem 1.1rem; }

/* De opvolgbalk en de opmerkingen in dezelfde vlakken. */
.opvolgbalk { border-radius: 8px; border-color: var(--lijn); border-left-color: var(--accent); }
.nieuwe-opmerking, .opmerking { border-radius: 8px; }

/* Bord: de weergaveknoppen klein, rechts, niet als eerste blok. */
.weergave { justify-content: flex-end; margin: -.2rem 0 .5rem; }
.weergave .schakel button { padding: .15rem .55rem; font-size: .8rem; }
/* Elke A in zijn eigen grootte, en vast in pixels: de knoppen groeien niet
   mee met de keuze. Tot 0.17 won de regel hierboven, en waren de drie A's
   even groot. */
.weergave .letterkeuze button { font-size: 13px; line-height: 1.2; min-width: 2.1rem; }
.weergave .letterkeuze button:nth-child(1) { font-size: 11px; }
.weergave .letterkeuze button:nth-child(3) { font-size: 15px; }
.weergave .letterkeuze button:nth-child(4) { font-size: 17px; }
.weergave .letterkeuze button:nth-child(5) { font-size: 19px; }
.schakel { border-color: var(--lijn); border-radius: 5px; }

/* Vandaag: dezelfde vlakken als de kolommen. */
.overzichtgroep { border-radius: 8px; }
.taak { border-left-width: 3px; }
.taak.signaal-zonder_datum, .taak.signaal-stil { border-left-color: var(--rand); }

@media (max-width: 700px) {
  .woordmerk { display: none; }
  .balk nav a { padding: .3rem .45rem; }
}

/* Een nieuw dossier heeft geen opmerkingenkolom: alles op één breedte. */
.dossier.nieuw { max-width: 64rem; }
.dossier.nieuw .dossierindeling.zonderkolom { max-width: none; }

/* --- Instellingen en dealers -------------------------------------------
   Dezelfde vlakken als het dossierformulier. Tabellen waar het om rijen van
   hetzelfde gaat (kolommen, dealers, verkopers), zodat je recht naar
   beneden leest in plaats van door een raster van losse velden te zoeken. */

.instellingen, .dealerpagina { max-width: 66rem; }
.paginakop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .3rem 0 .9rem; }
.paginakop h1 { margin: 0; font-size: 1.6rem; letter-spacing: -.01em; }
.paginakop .filter { margin-left: auto; flex: 0 1 22rem; }
.paginakop .filter input { width: 100%; }
.paginakop .terug { margin-left: auto; color: var(--zacht); }
.bevestiging { margin: 0; color: var(--rust); font-weight: 700; }

.vlak {
  background: var(--vel); border: 1px solid var(--lijn); border-radius: 8px;
  padding: 1rem 1.1rem 1.1rem; margin: 0 0 .9rem;
}
.vlak > h2 { margin: 0 0 .35rem; font-size: 1.05rem; }
.vlak .uitleg { margin: 0 0 .8rem; color: var(--zacht); font-size: .9rem; max-width: 60ch; }

/* Tabellen: kop klein en zacht, rijen met een dunne lijn ertussen. */
.kolomtabel, .dealertabel, .verkopertabel { width: 100%; border-collapse: collapse; }
.kolomtabel th, .dealertabel th, .verkopertabel th {
  text-align: left; font-size: .78rem; font-weight: 700; color: var(--zacht);
  padding: 0 .5rem .4rem; border-bottom: 1px solid var(--lijn);
}
.kolomtabel td, .dealertabel td, .verkopertabel td {
  padding: .45rem .5rem; border-bottom: 1px solid var(--lijn); vertical-align: middle;
}
.kolomtabel tr:last-child td, .verkopertabel tr:last-child td { border-bottom: 0; }
.kolomtabel .nummer {
  width: 2.2rem; font-family: var(--cijfer); color: var(--accent); font-weight: 600;
}
.kolomtabel td input { width: 100%; }
.kolomtabel td.dagen { width: 12rem; white-space: nowrap; }
.kolomtabel td.dagen input { width: 5rem; text-align: right; font-family: var(--cijfer); }
.eenheid { color: var(--zacht); font-size: .88rem; margin-left: .35rem; }
.metEenheid { display: flex; align-items: center; }
.metEenheid input { width: 6rem; text-align: right; font-family: var(--cijfer); }
label.kort { display: flex; flex-direction: column; gap: .3rem; color: var(--zacht); font-size: .85rem; }
[aria-invalid="true"] { border-color: var(--laat) !important; box-shadow: 0 0 0 2px var(--laat) !important; }

.lijsten { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.lijsten label { display: flex; flex-direction: column; gap: .3rem; color: var(--zacht); font-size: .85rem; }
.lijsten textarea { color: var(--inkt); line-height: 1.55; resize: vertical; }

.herkomst dl { margin: .4rem 0; display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.herkomst dt { color: var(--zacht); font-size: .85rem; }
.herkomst dd { margin: 0; overflow-wrap: anywhere; }

/* Dealers */
.nieuwedealer .velden { margin-bottom: .7rem; }
.dealertabel { background: var(--vel); border: 1px solid var(--lijn); border-radius: 8px;
  border-collapse: separate; border-spacing: 0; overflow: hidden; }
.dealertabel th { padding-top: .6rem; }
.dealertabel tbody tr:hover { background: var(--kolom); }
.dealertabel .dealernaam a { font-weight: 700; color: var(--inkt); }
.dealertabel .contact { display: flex; flex-wrap: wrap; gap: .1rem .8rem; font-size: .9rem; }
.dealertabel .contact a { font-family: var(--cijfer); }
.verkoperchip {
  display: inline-block; margin: .1rem .25rem .1rem 0; padding: .05rem .5rem;
  border-radius: 999px; background: var(--accentzacht); color: var(--accent);
  font-size: .85rem; font-weight: 700;
}
.getal { text-align: right; font-family: var(--cijfer); }
.dealertabel td.getal a { font-weight: 700; }
.leeg { color: var(--zacht); }

.dealerindeling { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
.dealerindeling .breed { grid-column: 1 / -1; }
.verkopertabel td input { width: 100%; min-width: 0; }
.verkopertabel .verkopernaam a { font-weight: 700; color: var(--inkt); }
.verkopertabel .acties { white-space: nowrap; display: flex; gap: .3rem; align-items: center; }
.verkopertabel .acties form { margin: 0; }
.verkopertabel .nieuwerij td { padding-top: .7rem; }
.dossierrijen { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.dossierrijen li { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline;
  padding: .35rem .5rem; border-left: 3px solid var(--rust); background: var(--kolom); border-radius: 4px; }
.dossierrijen a { font-weight: 700; color: var(--inkt); }
.dossierrijen .status { color: var(--zacht); font-size: .9rem; }

@media (max-width: 800px) {
  .dealerindeling { grid-template-columns: 1fr; }
  .dealertabel thead { display: none; }
  .dealertabel, .dealertabel tbody, .dealertabel tr, .dealertabel td { display: block; }
  .dealertabel tr { border-bottom: 1px solid var(--lijn); padding: .4rem 0; }
  .dealertabel td { border: 0; padding: .15rem .7rem; }
  .dealertabel td.getal { text-align: left; }
  .verkopertabel thead { display: none; }
  .verkopertabel tr { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .5rem 0;
    border-bottom: 1px solid var(--lijn); }
  .verkopertabel td { border: 0; padding: 0; }
  .verkopertabel td.verkopernaam, .verkopertabel .nieuwerij td:first-child { grid-column: 1 / -1; }
  .kolomtabel td.dagen { width: auto; }
}
.dealertabel th.getal { text-align: right; }
.kolomtabel td input[name^="naam_"] { max-width: 30rem; }

/* --- Meer contrast in donker (Mark, 9 oktober: "allemaal heel donker") ---
   Zelfde verhoudingen als het voorstel, een stap lichter: pagina, kolom en
   kaart liggen verder uit elkaar, de balkjes zijn dikker en verzadigder, en
   de maatschappij staat op een duidelijke blauwe achtergrond. */
.kaart { border-left-width: 4px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.kolom { border-color: var(--lijn); }
.kolom > h2 { background: color-mix(in srgb, var(--kolom) 70%, var(--vel)); border-radius: var(--vlak-radius) var(--vlak-radius) 0 0; }
.kaart .mij { background: var(--accentzacht); color: var(--accent); }
:root[data-theme="dark"] .kaart .mij { color: #d3ebff; }
.kaart .sein { letter-spacing: .01em; }

.nieuwedealer summary { cursor: pointer; list-style: none; }
.nieuwedealer summary::-webkit-details-marker { display: none; }
.nieuwedealer summary h2 { display: inline; margin: 0; font-size: 1.05rem; color: var(--accent); }
.nieuwedealer[open] summary { margin-bottom: .7rem; }
.alleenmobiel { display: none; }

@media (max-width: 800px) {
  /* Een dealer als één blokje: naam en aantal op een regel, en alleen de
     cellen die iets zeggen. Lege cellen ("—", "nog geen") onder elkaar
     maakten de lijst drie keer zo lang. */
  .dealertabel tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; padding: .55rem .2rem; }
  .dealertabel td { padding: 0 .5rem; }
  .dealertabel td.dealernaam { order: 1; flex: 1 1 auto; }
  .dealertabel td.getal { order: 2; }
  .dealertabel td.contact, .dealertabel td.verkoperlijst { order: 3; flex: 1 0 100%; }
  .dealertabel td:has(> .leeg:only-child) { display: none; }
  .alleenmobiel { display: inline; font-family: var(--tekst); font-weight: 400; color: var(--zacht); }
  /* Kolommen in de instellingen: naam over de hele breedte, dagen eronder. */
  .kolomtabel thead { display: none; }
  .kolomtabel tr { display: grid; grid-template-columns: 2rem 1fr; gap: .3rem .4rem;
    padding: .55rem 0; border-bottom: 1px solid var(--lijn); }
  .kolomtabel td { border: 0; padding: 0; }
  .kolomtabel td.dagen { grid-column: 2; }
  .kolomtabel td.dagen::before { content: "Valt op na"; color: var(--zacht); font-size: .85rem; margin-right: .4rem; }
}

/* Account en gebruikers */
.instellingen.smaller { max-width: 44rem; }
.subnav { display: flex; gap: .2rem; margin-left: auto; }
.subnav a { padding: .3rem .7rem; border-radius: 5px; color: var(--zacht); font-weight: 600; text-decoration: none; }
.subnav a[aria-current="page"] { background: var(--vel); color: var(--inkt); box-shadow: inset 0 -2px 0 var(--accent); }
.accountlink { color: var(--zacht); font-weight: 600; text-decoration: none; }
.accountlink:hover { color: var(--inkt); }
.gebruikerstabel { width: 100%; border-collapse: collapse; }
.gebruikerstabel th { text-align: left; font-size: .78rem; color: var(--zacht); padding: 0 .5rem .4rem; border-bottom: 1px solid var(--lijn); }
.gebruikerstabel td { padding: .5rem; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.gebruikerstabel tr.uit td { opacity: .6; }
.gebruikerstabel .naam span { margin-left: .4rem; font-size: .85rem; }
.regelformulier { display: flex; gap: .3rem; }
.regelformulier input { min-width: 0; flex: 1 1 9rem; }
.sein-te_laat { color: var(--laat); font-weight: 700; }
@media (max-width: 800px) {
  .gebruikerstabel thead { display: none; }
  .gebruikerstabel tr { display: grid; grid-template-columns: 1fr auto; gap: .3rem; padding: .5rem 0; border-bottom: 1px solid var(--lijn); }
  .gebruikerstabel td { border: 0; padding: 0; }
  .gebruikerstabel td:nth-child(4) { grid-column: 1 / -1; }
  .accountlink { display: none; }
}

/* Afsluiten en archief */
.afgeslotenbalk {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  background: var(--vel); border: 1px solid var(--lijn); border-left: 4px solid var(--zacht);
  border-radius: 8px; padding: .6rem .9rem; margin: 0 0 .9rem;
}
.afgeslotenbalk p { margin: 0; flex: 1 1 20rem; }
.afsluiten { margin-top: 1rem; }
.afsluiten .redenen { border: 0; background: none; padding: 0; margin: 0 0 .7rem;
  display: flex; flex-wrap: wrap; gap: .4rem; }
.afsluiten .reden {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 6px; padding: .4rem .7rem; background: var(--papier);
}
.afsluiten .reden:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accentzacht); }
.afsluiten .duiding { display: flex; flex-direction: column; gap: .3rem; color: var(--zacht);
  font-size: .85rem; margin-bottom: .7rem; max-width: 34rem; }
.redenlabel { font-weight: 700; margin-right: .4rem; }
.archieftabel .reden-afgewezen .redenlabel { color: var(--laat); }
.archieftabel .reden-geen-interesse .redenlabel { color: var(--zacht); }
.archieftabel .dealernaam .zacht { margin-left: .5rem; font-weight: 400; }

.binnenkort { border-left: 4px solid var(--vandaag); }
.binnenkort .dossierrijen li { border-left-color: var(--vandaag); align-items: center; }
form.inline { margin: 0 0 0 auto; }
.afgeslotenbalk .verwijderen { flex: 1 0 100%; color: var(--zacht); font-size: .9rem; }
.afgeslotenbalk .verwijderen summary { cursor: pointer; }
.afgeslotenbalk .verwijderen form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
button.gevaar { border-color: var(--laat); color: var(--laat); background: transparent; font-weight: 700; }
button.gevaar:hover { background: var(--laat); color: var(--opaccent); }

/* Laatste back-up op de instellingenpagina: valt alleen op als er iets mis is. */
.herkomst .backupstand.waarschuwing { color: var(--laat); }

/* ======================================================================
   0.12 — bord passend, koppen vast, signaal naast de naam
   ====================================================================== */

/* Het signaal (te laat, vandaag, stil, de opvolgdatum) staat rechtsboven
   naast de naam, zoals op Vandaag. Onderaan las je het pas als laatste. */
.kaart .naamregel {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0 .5rem;
}
.kaart .naamregel .naam { min-width: 0; }
.kaart .naamregel .sein {
  margin: 0 0 0 auto; font-size: .78em; white-space: nowrap; text-align: right;
}
.kaart.rustig .sein { color: var(--zacht); font-weight: 600; }
/* Bedrag, looptijd en termijn: past het niet op één regel, dan gaat het
   tweede deel netjes naar de volgende in plaats van midden in een bedrag. */
.kaart .cijferrij { display: flex; flex-wrap: wrap; gap: 0 .4rem; align-items: baseline; }

@media (min-width: 701px) {
  /* Het bord is precies zo hoog als het venster; elke kolom scrolt zelf.
     Eerst scrolde de hele pagina: bij veertien kaarten verdwenen de
     kolomkoppen boven uit beeld en zag je niet meer in welke kolom je zat. */
  body.bordpagina { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body.bordpagina > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; }
  body.bordpagina .bord { flex: 1 1 auto; min-height: 0; height: auto; }
  body.bordpagina .voet { padding: .1rem 1rem .25rem; }

  /* Alle zeven kolommen in beeld vanaf een gewoon laptopscherm. Met een
     vaste breedte van 236 pixels viel op 1440 de kolom Akkoord wachten
     buiten beeld. Pas onder de 168 pixels per kolom gaat het bord schuiven. */
  .kolom { flex: 1 1 0; min-width: calc(168px * var(--schaal)); max-width: calc(320px * var(--schaal)); }
  .kolom.ingeklapt { flex: 0 0 auto; min-width: 0; }
  .kolom.zijspoor { margin-left: 1.2rem; }
  .kolom.zijspoor::before { margin-left: -.75rem; }
}

/* --- Contact vastleggen (Vandaag, paneel, dossier) ----------------------- */
.vastleg { margin: .55rem 0 0; }
.contact-regel { display: flex; gap: .4rem; }
.contact-regel input { flex: 1 1 auto; min-width: 0; }
.contact-bewaar { flex: 0 0 auto; border-color: var(--accent); color: var(--accent); background: transparent; font-weight: 600; }
.contact-bewaar:hover { background: var(--accentzacht); }
.contact-meer { display: none; margin-top: .45rem; }
.vastleg.open .contact-meer, .vastleg:focus-within .contact-meer { display: block; }
.contact-snel, .contact-wanneer { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .35rem; }
.contact-snel button, .contact-wanneer button {
  font-size: .82em; padding: .18rem .55rem; border-radius: 999px;
  border-color: var(--rand); background: var(--papier);
}
.contact-snel button:hover, .contact-wanneer button:hover { border-color: var(--accent); color: var(--accent); }
.contact-wanneer .kop { font-size: .8em; color: var(--zacht); margin-right: .15rem; }
.contact-wanneer .wissen { border-style: dashed; color: var(--zacht); }
.contact-datum { display: inline-flex; gap: .25rem; align-items: center; }
.contact-datum input { font-size: .82em; padding: .12rem .35rem; }
.contact-kaart { display: inline-flex; gap: .35rem; align-items: center; font-size: .82em; color: var(--zacht); }
.contact-melding { margin: .35rem 0 0; font-size: .85em; font-weight: 600; color: var(--rust); }
.contact-melding.fout { color: var(--laat); }
.vastleg.bezig { opacity: .6; pointer-events: none; }

/* Een nummer om te bellen: op de telefoon een tik, op de laptop kopiëren. */
a.tel { font-family: var(--cijfer); font-weight: 600; }
a.wa { font-size: .82em; margin-left: .35rem; }
.taakbel { margin: .35rem 0 0; }

/* Afgehandeld op Vandaag: blijft staan tot je herlaadt, maar stapt terug. */
.taak.afgehandeld { opacity: .6; border-left-color: var(--rust) !important; }
.taak.afgehandeld:focus-within, .taak.afgehandeld:hover { opacity: 1; }
#afgehandeld { color: var(--rust); font-weight: 600; }

.paneelvolgende { margin: .8rem 0 0; font-size: .9em; color: var(--zacht); }
.paneelvolgende strong { color: var(--inkt); }
.paneel .vastleg { margin-bottom: 1rem; }
.contact-wanneer .wd { font-size: .85em; color: var(--zacht); margin-left: .1rem; }

/* ======================================================================
   0.12 — dossierpagina: samenvatting bovenaan, knipsel ernaast
   ====================================================================== */

.dossier.nieuw { max-width: 92rem; }
.dossier.nieuw .dossierindeling { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); }
.dossierindeling:has(> aside[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 66rem; }
@media (max-width: 1100px) {
  .dossier.nieuw .dossierindeling { grid-template-columns: 1fr; }
}

.dossierkop {
  background: var(--vel); border: 1px solid var(--lijn); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: .9rem 1.1rem 1rem; margin: 0 0 1rem;
}
.dossierkop .kopregel { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.dossier .dossierkop h1 { margin: 0; }
.statuspil {
  font-size: .82em; font-weight: 700; padding: .12rem .6rem; border-radius: 999px;
  background: var(--accentzacht); color: var(--inkt); border: 1px solid var(--accent);
}
.kerncijfers { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin: .55rem 0 0; }
.kerncijfers .mij { color: var(--accent); font-weight: 600; }
button.waarde {
  padding: .05rem .45rem; font-family: var(--cijfer); font-weight: 600;
  background: transparent; border: 1px dashed var(--rand);
}
button.waarde.geld { font-size: 1.12em; border-style: solid; border-color: transparent; padding-left: 0; }
button.waarde:hover { border-color: var(--accent); }
.kopcontact { display: flex; flex-wrap: wrap; gap: .3rem 2rem; align-items: baseline; margin: .55rem 0 0; }
.kopcontact p { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.kopcontact .kop { font-size: .78em; color: var(--zacht); text-transform: uppercase; letter-spacing: .05em; }
.kopcontact a.tel { font-size: 1.05em; }
.kopcontact .kopieeralles { margin-left: auto; }
.kopcontact .kopieeralles button { font-size: .85em; }
.kopstand {
  margin: .75rem 0 0; padding: .55rem .75rem; border-radius: 6px;
  background: var(--accentzacht); font-size: 1.05em;
}
.kopvolgende { margin: .7rem 0 0; color: var(--zacht); }
.kopvolgende strong { color: var(--inkt); }
.dossierkop .vastleg { margin-top: .5rem; }
.dossierkop .vastleg .contact-regel input { font-size: 1.02em; padding: .45rem .6rem; }

/* Het plakvak bij een bestaand dossier: één smalle regel. Plakken werkt
   overal op de pagina; het vak hoeft niet de halve pagina te zijn. */
.snelinvullen.compact { padding: .45rem .7rem; gap: .4rem; }
.snelinvullen.compact .plakvlak { padding: .4rem .7rem; border-width: 1px; }
.snelinvullen.compact .plakkop strong { font-size: .95em; }
.snelinvullen.compact .plakkop .hint { display: inline; margin-left: .4rem; }
.snelinvullen.compact > .hint { display: none; }
.snelinvullen.compact .plaktekstregel textarea { min-height: 2.2rem; }

.alleen-telefoon { display: none !important; }
@media (hover: none) and (pointer: coarse) {
  .alleen-telefoon { display: inline !important; }
  .plakkop .alleen-telefoon.hint { display: block !important; }
  .alleen-laptop { display: none !important; }
}

/* Het knipsel groot naast het formulier, en op klik nog groter. */
.knipselkolom { position: sticky; top: 4rem; min-width: 0; }
.knipselkolom h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.knipselvoorbeeld { display: grid; gap: .6rem; margin-top: .5rem; max-height: calc(100vh - 9rem); overflow-y: auto; }
.knipselvoorbeeld img {
  width: 100%; height: auto; display: block; cursor: zoom-in;
  border: 1px solid var(--rand); border-radius: 6px; background: #fff;
}
.leesresultaten img { cursor: zoom-in; }
.knipsellaag {
  position: fixed; inset: 0; z-index: 100; background: rgba(5, 8, 12, .82);
  display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out;
}
.knipsellaag img { max-width: 100%; max-height: 100%; border-radius: 6px; background: #fff; }

/* Lege velden bij een bestaand dossier achter een knop per blok. */
.dossier.bestaand fieldset:not(.allesopen) label.leegveld { display: none; }
.toonleeg {
  margin: .6rem 0 0; font-size: .82em; padding: .15rem .6rem;
  background: transparent; border: 1px dashed var(--rand); color: var(--zacht);
}
.toonleeg:hover { color: var(--accent); border-color: var(--accent); }

/* Ingevulde velden lezen als tekst; de rand komt pas als je eroverheen gaat
   of erin klikt. Zo zie je wat er bekend is in plaats van een muur vakjes. */
.dossier.bestaand .gegevens .velden input:not(:focus):not(:hover),
.dossier.bestaand .gegevens .velden select:not(:focus):not(:hover) {
  border-color: transparent; background: transparent; padding-left: 0;
}
.dossier.bestaand .gegevens .velden label:not(.ingevuld):not(.nakijken) input:not(:focus):not(:hover) { box-shadow: none; }

/* Voorbeeldtekst is een voorbeeld, geen gegeven: zachter en schuin. */
input::placeholder, textarea::placeholder { color: var(--zacht); opacity: .55; font-style: italic; font-family: var(--tekst); }

.opmerking.nieuw { border-color: var(--rust); }
.opmerkingkolom > .hint { font-size: .85em; color: var(--zacht); margin: -.2rem 0 .8rem; }

/* --- Zoeken terwijl je typt ------------------------------------------------ */
.balk .zoek { position: relative; }
.zoeksuggesties {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  list-style: none; margin: 0; padding: .25rem; max-height: 70vh; overflow-y: auto;
  background: var(--vel); border: 1px solid var(--rand); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.zoeksuggesties li a {
  display: flex; flex-direction: column; gap: .05rem; padding: .4rem .6rem;
  border-radius: 5px; color: var(--inkt); text-decoration: none;
}
.zoeksuggesties li a span { font-size: .82em; color: var(--zacht); }
.zoeksuggesties li.gekozen a, .zoeksuggesties li a:hover { background: var(--accentzacht); }
.zoeksuggesties li.leeg { padding: .4rem .6rem; color: var(--zacht); font-size: .9em; }

/* --- Telefoon: menu onderin, actiebalk bovenaan ---------------------------- */
.onderbalk { display: none; }
@media (max-width: 700px) {
  body { padding-bottom: 4.2rem; }
  .balk nav, .balk .themaknop, .balk .accountlink, .balk .uit { display: none; }
  .balk .zoek { flex: 1 1 100%; }
  .onderbalk {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--vel); border-top: 1px solid var(--lijn);
    padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
  }
  .onderbalk > a, .onderbalk summary {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .05rem;
    padding: .3rem 0; font-size: .72rem; font-weight: 600; color: var(--zacht);
    text-decoration: none; list-style: none; cursor: pointer;
  }
  .onderbalk summary::-webkit-details-marker { display: none; }
  .onderbalk .ic { font-size: 1.25rem; line-height: 1.1; }
  .onderbalk a[aria-current="page"] { color: var(--accent); }
  .onderbalk a.nieuw .ic {
    background: var(--accent); color: var(--opaccent); border-radius: 999px;
    width: 1.7rem; height: 1.7rem; display: grid; place-items: center; font-weight: 700;
  }
  .onderbalk .meer { flex: 1 1 0; display: flex; }
  .onderbalk .meer summary { flex: 1; }
  .meerlijst {
    position: absolute; right: .4rem; bottom: calc(100% + .3rem); min-width: 13rem;
    background: var(--vel); border: 1px solid var(--rand); border-radius: 8px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); padding: .3rem; display: grid;
  }
  .meerlijst a, .meerlijst button {
    display: block; text-align: left; padding: .65rem .8rem; border: 0; background: transparent;
    color: var(--inkt); font-size: .95rem; border-radius: 5px; width: 100%;
  }
  .meerlijst form { margin: 0; }
  .paneel { padding-bottom: 5rem; }

  /* Bovenaan het dossier: de naam, en bellen als grote knop. */
  .dossierkop { padding: .75rem .8rem; }
  .kopcontact { gap: .5rem 1rem; }
  .kopcontact a.tel {
    display: inline-block; padding: .4rem .8rem; border: 1px solid var(--accent);
    border-radius: 999px; background: var(--accentzacht); color: var(--inkt);
  }
  .kopcontact a.tel::before { content: "Bel "; font-family: var(--tekst); font-weight: 600; }
  .kopcontact .kopieeralles { display: none; }
  .vastleg .contact-regel input { font-size: 16px; }   /* geen inzoomen op iOS */
  .contact-snel button, .contact-wanneer button { padding: .35rem .7rem; font-size: .88em; }
  .taakbel a.tel {
    display: inline-block; padding: .3rem .7rem; border: 1px solid var(--accent);
    border-radius: 999px; background: var(--accentzacht); color: var(--inkt);
  }
}
/* Het product is een lange naam ("Lender & Spender PL (afh. door
   intermediair)"); in een kwart van de breedte werd hij afgekapt. */
.velden > .breed { grid-column: span 2; }
.velden > .breed label { display: block; }
.velden > .breed input { width: 100%; }
@media (max-width: 420px) { .velden > .breed { grid-column: auto; } }
.statusregel-veld.dichtgeklapt { display: none; }
.kopstand { display: flex; gap: .6rem; align-items: baseline; justify-content: space-between; }
.standwijzigen { font-size: .78em; padding: .05rem .5rem; background: transparent; border-color: transparent; color: var(--accent); }
.standwijzigen:hover { border-color: var(--accent); }
/* Op Vandaag staat de knop bij elke kaart; rustig tot je erin werkt. */
.taak .vastleg:not(.open):not(:focus-within) .contact-bewaar { border-color: var(--lijn); color: var(--zacht); font-weight: 500; }
/* De kop zweeft; wat erna komt moet eronder, ook als het eerste element
   (de dichtgeklapte stand van zaken) verborgen is. */
legend ~ .velden, legend ~ label { clear: both; }

/* --- Een bestand slepen ----------------------------------------------------- */
.sleeplaag {
  position: fixed; inset: 1rem; z-index: 120; pointer-events: none;
  display: grid; place-items: center; text-align: center; padding: 2rem;
  border: 3px dashed var(--accent); border-radius: 14px;
  background: color-mix(in srgb, var(--papier) 82%, transparent);
  font-size: 1.4rem; font-weight: 700; color: var(--inkt);
}
body.sleept .plakvlak { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --- Klantnamen in hun eigen kleur (Instellingen → Weergave) -------------- */
.kaart a.naam, .taak .naam, .paneel h2, .dossier .dossierkop h1,
.zoeksuggesties li a strong, .archieftabel .dealernaam > a { color: var(--naam, var(--inkt)); }
.kleurkeuze { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.kleuroptie {
  display: grid; gap: .25rem; justify-items: center; cursor: pointer;
  border: 1px solid var(--lijn); border-radius: 8px; padding: .6rem .9rem; background: var(--kolom);
}
.kleuroptie:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kleuroptie input { position: absolute; opacity: 0; pointer-events: none; }
.kleuroptie .staal { font-weight: 700; font-size: 1.05em; }
:root[data-theme="dark"] .kleuroptie .staal { color: var(--d); }
:root[data-theme="light"] .kleuroptie .staal { color: var(--l); }
.kleuroptie .kleurnaam { font-size: .8em; color: var(--zacht); }
.kleuroptie:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Zonder knipsel naast het formulier: één kolom over de volle breedte. De
   regel hierboven verloor het van ".dossier.nieuw .dossierindeling". */
.dossier.nieuw .dossierindeling:has(> aside[hidden]) { grid-template-columns: minmax(0, 1fr); max-width: 66rem; }

/* --- Aan wie het dossier gekoppeld is (Instellingen → Gebruikers) --------- */
.wie-label {
  display: inline-block; padding: .02rem .5rem; border-radius: 999px;
  background: var(--k, #c3ccd8); color: #10161e !important; font-weight: 700;
  font-size: .78em; line-height: 1.5; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, .12);
}
.wie-label:hover, .wie-label:focus-visible { text-decoration: none; filter: brightness(1.08); outline: 2px solid var(--k); outline-offset: 1px; }
.dossierkop .wie-label { font-size: .85em; }
.paneel .sub .wie-label { margin-right: .3rem; }
.labelkleurkeuze { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0; }
.labelkleurkeuze .stalen { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.labelkleurkeuze .staal {
  width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--k);
  border: 2px solid transparent; cursor: pointer; position: relative;
}
.labelkleurkeuze .staal:has(input:checked) { border-color: var(--inkt); box-shadow: 0 0 0 2px var(--papier) inset; }
.labelkleurkeuze .staal:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.labelkleurkeuze .staal input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }

/* Een oude versie open: dat moet je niet kunnen missen. */
.oudeversie {
  margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 8px;
  background: var(--laat); color: #1a0f0e; font-size: 1rem;
}
.oudeversie code { background: rgba(255, 255, 255, .35); padding: 0 .3rem; border-radius: 3px; }

/* --- Aan mij (0.17) ---------------------------------------------------------
   Naast het label, even klein. De gestippelde rand zegt "hier hoort een naam"
   zonder dat het een tweede label lijkt. */
.toewijzing { display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }
.toewijsform { display: inline; margin: 0; }
.toewijsknop {
  font: inherit; font-size: .78em; font-weight: 700; line-height: 1.5;
  padding: .02rem .55rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--accent);
  border: 1px dashed var(--accent);
}
.toewijsknop:hover, .toewijsknop:focus-visible { background: var(--accentzacht); }
.toewijsknop:disabled { opacity: .55; cursor: progress; }
.toewijsknop.vrijgeven { border-color: var(--rand); color: var(--zacht); font-weight: 400; }
.dossierkop .toewijsknop { font-size: .85em; }
.paneel .sub .toewijzing { margin-right: .3rem; }
.paneel .sub .wie-label { margin-right: 0; font-size: .9em; }
.paneel .sub .toewijsknop { font-size: .9em; }
.toewijsfout { color: var(--laat); font-size: .8em; }
/* Na een klik even oplichten, zodat je ziet dat het gelukt is. */
.toewijzing.net .wie-label { animation: toegewezen 1.2s ease-out; }
@keyframes toegewezen { from { box-shadow: 0 0 0 4px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .toewijzing.net .wie-label { animation: none; } }

/* --- De balk bovenin groeit maar tot "Groot" mee (0.17) ---------------------
   De keuze is voor wat je leest: kaarten, het paneel, het dossier. Groeide de
   balk ook mee tot de grootste stand, dan paste hij op een laptop niet meer
   op één regel. --b is de verhouding tussen de begrensde en de echte schaal;
   rem-maten in de balk gaan daarmee keer. */
@media (min-width: 701px) {
  .balk {
    --b: calc(min(var(--schaal), 1.12) / var(--schaal));
    font-size: calc(13.5px * min(var(--schaal), 1.12));
    gap: calc(.5rem * var(--b)) calc(1.4rem * var(--b));
    padding: calc(.55rem * var(--b)) calc(1rem * var(--b));
  }
  .woordmerk { font-size: calc(1.05rem * var(--b)); padding-right: calc(.4rem * var(--b)); }
  .balk nav a { padding: calc(.3rem * var(--b)) calc(.6rem * var(--b)); }
  .balk .zoek { max-width: calc(30rem * var(--b)); flex-basis: calc(8rem * var(--b)); min-width: calc(7rem * var(--b)); }
  .balk .zoek input { padding: calc(.38rem * var(--b)) calc(.7rem * var(--b)); }
  .balk .themaknop { padding: calc(.2rem * var(--b)) calc(.5rem * var(--b)); }
  .balk .uit button { padding: calc(.35rem * var(--b)) calc(.5rem * var(--b)); }
}

/* --- Dealers in hun eigen kleur (0.18, Instellingen → Weergave) ------------
   Eerst grijs, net als de rest van de bijzaken, en op het donkere bord viel
   de dealer weg. --dealer zet basis.html uit de instelling. */
.kaart .bron, .taak .bron { color: var(--dealer, var(--zacht)); font-weight: 600; }
a.dealerlink, .dealertabel .dealernaam a { color: var(--dealer, var(--accent)); font-weight: 700; }
.kleuroptie .staal-dealer { font-weight: 600; font-size: .95em; }

/* --- Het label: Autokrediet of Kredietshopper (0.18) -------------------------
   Autokrediet houdt de kaart zoals hij was; Kredietshopper krijgt een lichtere
   kaart (Mark: "voor Kredietshopper een lichtere kleur"). Het merkje staat
   vooraan op de regel met de medewerker en de maatschappij; een klik toont
   het bord met alleen dat label. */
:root {
  --kaart-shopper: #eaf1fa; --rand-shopper: #9fb3cc;
  --merk-auto-vlak: #e3e8ef; --merk-auto-tekst: #1d2733; --merk-auto-rand: #b9c1cc;
  --merk-shop-vlak: #ffffff; --merk-shop-tekst: #10161e; --merk-shop-rand: #6d84a3;
}
:root[data-theme="dark"] {
  --kaart-shopper: #46546a; --rand-shopper: #6c7d96;
  --merk-auto-vlak: #18202b; --merk-auto-tekst: #dfe6ef; --merk-auto-rand: #4f5f75;
  --merk-shop-vlak: #e6edf6; --merk-shop-tekst: #10161e; --merk-shop-rand: #e6edf6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kaart-shopper: #46546a; --rand-shopper: #6c7d96;
    --merk-auto-vlak: #18202b; --merk-auto-tekst: #dfe6ef; --merk-auto-rand: #4f5f75;
    --merk-shop-vlak: #e6edf6; --merk-shop-tekst: #10161e; --merk-shop-rand: #e6edf6;
  }
}
.kaart.handelsnaam-kredietshopper, .taak.handelsnaam-kredietshopper {
  background: var(--kaart-shopper);
  border-top-color: var(--rand-shopper); border-right-color: var(--rand-shopper);
  border-bottom-color: var(--rand-shopper);
}
a.labelmerk {
  display: inline-block; font-size: .72em; font-weight: 700; line-height: 1.5;
  letter-spacing: .02em; padding: 0 .45em; border-radius: 3px;
  border: 1px solid; text-decoration: none; white-space: nowrap;
  vertical-align: baseline;
}
a.labelmerk:hover, a.labelmerk:focus-visible { text-decoration: none; filter: brightness(1.1); }
a.labelmerk.handelsnaam-autokrediet {
  background: var(--merk-auto-vlak); color: var(--merk-auto-tekst); border-color: var(--merk-auto-rand);
}
a.labelmerk.handelsnaam-kredietshopper {
  background: var(--merk-shop-vlak); color: var(--merk-shop-tekst); border-color: var(--merk-shop-rand);
}
.dossierkop a.labelmerk, .paneel .sub a.labelmerk { font-size: .8em; }
.paneel .sub a.labelmerk { margin-right: .3rem; }
.kleurkeuze + .uitleg { margin-top: 1.1rem; }

/* --- Opmerkingen die je uit elkaar houdt (0.19) ----------------------------
   Op de kaart stonden de stand van zaken en de laatste opmerking in dezelfde
   kleur onder elkaar, met alleen een dun lijntje ertussen; in het paneel was
   het een opsomming waarin tijd en tekst in elkaar overliepen. Nu is een
   opmerking overal een eigen blokje met een streep links, en staat wie hem
   schreef in de kleur van zijn label. */
.kaart .notitie, .taak .notitie {
  margin: .4rem 0 0; padding: .25rem .5rem; border-top: 0;
  background: color-mix(in srgb, var(--papier) 60%, transparent);
  border-left: 2px solid var(--rand); border-radius: 0 4px 4px 0;
  font-size: .86em; line-height: 1.4; color: var(--notitie);
}
.kaart .notitie .wie, .taak .notitie .wie { font-weight: 700; color: var(--k, var(--zacht)); }

.opmerkingenlog { list-style: none; margin: .4rem 0 0; padding: 0; }
.opmerkingenlog .opm {
  margin: 0 0 .5rem; padding: .45rem .65rem;
  background: color-mix(in srgb, var(--papier) 55%, transparent);
  border-left: 3px solid var(--rand); border-radius: 0 6px 6px 0;
}
.opmerkingenlog .kop { margin: 0 0 .15rem; font-size: .8em; color: var(--zacht); }
.opmerkingenlog .tijd { font-family: var(--cijfer); }
.opmerkingenlog .tekst {
  margin: 0; color: var(--inkt); line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.opmerkingenlog .leeg { color: var(--zacht); font-style: italic; }
.opmerkingenlog .auteur, .opmerking .kop .auteur { font-weight: 700; color: var(--k, var(--inkt)); }
.opmerking .kop .auteur { font-family: var(--tekst); }

/* --- Kenteken en type auto (0.19) ------------------------------------------ */
.kaart .rij.auto { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.kentekenplaat {
  font-family: var(--cijfer); font-weight: 600; font-size: .8em; letter-spacing: .04em;
  padding: 0 .35em; border: 1px solid var(--rand); border-radius: 3px; color: var(--inkt);
}
.kaart .automodel { font-size: .88em; color: var(--notitie); }
.dossierkop .automodel { color: var(--zacht); }
button.waarde.kentekenplaat { font-size: inherit; }

/* --- Keuzelijst met eigen waarde (0.19, keuzelijst.js) ----------------------
   Soort, Doel en Maatschappij: altijd de hele lijst bij een klik, ook als er
   al iets staat. Het pijltje zegt dat het een keuzelijst is. */
.keuzeveld { position: relative; display: block; }
.keuzeveld > input { width: 100%; padding-right: 2rem; }
.keuzeknop {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 1.9rem;
  border: 0; border-radius: 0 5px 5px 0; background: transparent;
  color: var(--zacht); font-size: 1em; line-height: 1; cursor: pointer; padding: 0;
}
.keuzeknop:hover { color: var(--inkt); background: var(--vel); }
.keuzeveld.open .keuzeknop { color: var(--accent); }
.keuzes {
  position: absolute; z-index: 45; top: calc(100% + 3px); left: 0; right: 0;
  margin: 0; padding: .25rem 0; list-style: none;
  max-height: 16rem; overflow-y: auto;
  background: var(--vel); border: 1px solid var(--rand); border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  font-size: .95rem; font-weight: 400; color: var(--inkt);
}
.keuzes li { padding: .38rem .7rem; cursor: pointer; }
.keuzes li.huidig { font-weight: 700; }
.keuzes li.huidig::after { content: " \2713"; color: var(--accent); }
.keuzes li.actief, .keuzes li:hover { background: var(--accentzacht); color: var(--inkt); }
.keuzes li.geen { color: var(--zacht); font-style: italic; cursor: default; background: none; }
/* Labelkleuren zijn pastels, gemaakt voor donkere tekst erop. Als tekstkleur
   op een licht vlak zijn ze te bleek; in de lichte weergave donkerder. */
:root[data-theme="light"] .kaart .notitie .wie,
:root[data-theme="light"] .taak .notitie .wie,
:root[data-theme="light"] .opmerkingenlog .auteur,
:root[data-theme="light"] .opmerking .kop .auteur { color: color-mix(in srgb, var(--k, #44505f) 40%, #10141a); }

/* --- Opmerkingen bovenaan (0.20) --------------------------------------------
   In het paneel staan ze direct onder "Wat is er gebeurd?". Op de
   dossierpagina staan ze op een breed scherm al rechts naast het formulier;
   op een smaller scherm, waar alles onder elkaar komt, gaan ze nu vóór het
   formulier in plaats van erna. */
.paneel .opmerkingenkop { margin: 1rem 0 .3rem; }
details.ouder { margin: 0 0 .8rem; }
details.ouder > summary { cursor: pointer; color: var(--zacht); font-size: .88em; margin: 0 0 .45rem; width: max-content; }
details.ouder > summary:hover { color: var(--inkt); }
@media (max-width: 1100px) {
  .opmerkingkolom { order: -1; max-width: none; }
}

/* --- Wiens kaarten (0.21) ---------------------------------------------------
   Knoppen die je aan- en uitzet; een ingedrukte knop is gevuld, in de kleur
   van het label van die gebruiker. "Iedereen" maakt de keuze leeg. */
.wiekeuze {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem;
  margin: 0 0 .5rem; font-size: .9em;
}
.wiekeuze .kop { color: var(--zacht); font-weight: 600; }
.wieknoppen { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.wieknoppen button {
  font: inherit; font-size: .95em; font-weight: 700; line-height: 1.4;
  padding: .12rem .7rem; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--inkt); border: 1px solid var(--rand);
}
.wieknoppen button.wiechip { border-color: var(--k, var(--rand)); color: var(--k, var(--inkt)); }
.wieknoppen button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--opaccent); }
.wieknoppen button.wiechip[aria-pressed="true"] { background: var(--k); border-color: var(--k); color: #10161e; }
.wieknoppen button.niemand { border-style: dashed; color: var(--zacht); }
.wieknoppen button.niemand[aria-pressed="true"] { background: var(--zacht); border-color: var(--zacht); color: var(--papier); }
.wieknoppen button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiekeuze .meekijken { color: var(--zacht); font-size: .9em; }
.wiekeuze .beheerlink { margin-left: auto; color: var(--zacht); font-size: .9em; }
:root[data-theme="light"] .wieknoppen button.wiechip:not([aria-pressed="true"]) {
  color: color-mix(in srgb, var(--k, #44505f) 40%, #10141a);
}
/* De keuze en de weergaveknoppen op één regel boven het bord. */
.bordkop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin: 0 0 .5rem; }
.bordkop .wiekeuze, .bordkop .weergave { margin: 0; }
.bordkop .weergave { margin-left: auto; }
.wiekeuze .beheerlink { margin-left: .4rem; }