/* Gezinshuis Kwaliteitsmanagementsysteem
   ─────────────────────────────────────────────────────────────────────────────
   Huisstijl overgenomen van gezinshuissamengroeien.nl, gemeten op 2026-08-29:
   creme #FFFAF2, olijfgroen #495A29, terracotta #C97632, inkt #1D1910,
   Caudex voor koppen en Akatab voor de tekst. Beide lettertypes staan lokaal in
   merk/ - het systeem hoort ook zonder internet te kloppen.

   De site is licht en warm, geen donkere beheersschil. Dat is hier aangehouden:
   het scherm mag niet aanvoelen als een ander product dan het gezinshuis zelf.

   Twee dingen staan NIET op de site en zijn hier toegevoegd, apart gehouden zodat
   het verschil tussen bron en aanvulling zichtbaar blijft:
   1. statuskleuren voor verlopen, binnenkort en in orde. Een website heeft die niet
      nodig, een werkscherm wel. Afgeleid van het sitepalet: het groen voor in orde,
      de terracotta voor binnenkort, een diepere roest voor verlopen.
   2. lijn- en vlakkleuren voor tabellen, afgeleid uit het creme en het zand.
   Satisfy, het schrijfletter-accent van de site, is bewust NIET gebruikt: mooi op een
   voorpagina, onleesbaar in een werklijst.

   Sinds 0.44.0 draait het kwaliteitssysteem BINNEN de suite-schil, dus staat dit blad
   naast suite.css in dezelfde pagina. Daarom is elke selector hier gescoped onder .kws,
   de wikkel om de kwaliteitsschermen: zonder die scope zouden twee bladen tegelijk
   table, h2, button en .kaart bepalen en wint stilzwijgend de laatste. Wat alleen bij
   de OUDE paginaschil hoorde - bovenbalk, zijmenu, main en voettekst - is eruit; die
   levert de suite nu. Gescoped en gesnoeid met een wegwerpscript en niet met de
   hand: 194 blokken en 666 declaraties geteld voor en na het scopen, beide gelijk,
   en daarna alleen de schilregels geschrapt. Wie het overdoet, telt opnieuw. */

@import url("merk/lettertypes.css");

:root {
  /* van de website */
  --creme:      #FFFAF2;
  --vlak:       #FFFFFF;
  --vlak-warm:  #F8F5EC;
  --inkt:       #1D1910;
  --groen:      #495A29;
  --terra:      #C97632;
  --blauw:      #1C244B;
  --groen-vlak: #EEF5EB;
  --zand:       #EBDEC4;

  /* afgeleid, niet van de site */
  --inkt-zacht: #6E6656;
  --groen-diep: #37461E;
  --lijn:       #E7DFCE;
  --lijn-zacht: #F0EADC;
  --terra-vlak: #FBF0E4;
  --rood:       #9E3D1D;
  --rood-vlak:  #F8E9E1;

  --kop: "Caudex", "Iowan Old Style", Georgia, serif;
  --tekst: "Akatab", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
}

* { box-sizing: border-box; }

/* De wikkel om de kwaliteitsschermen. Was body toen dit een eigen pagina was;
   de maatvoering blijft, de paginadingen (achtergrond, 100vh) horen nu bij de suite. */
.kws {
  font-family: var(--tekst);
  font-size: 15px;
  line-height: 1.5;
  color: var(--inkt);
  -webkit-font-smoothing: antialiased;
}

.kws .verborgen { display: none !important; }

/* ── koppen en tekst ───────────────────────────────────────────────────────── */

.kws h2 {
  font-family: var(--kop);
  font-size: 23px;
  font-weight: 700;
  color: var(--groen);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.kws h3.vakkop { font-family: var(--tekst); }
.kws .vakkop {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 700; color: var(--inkt-zacht); margin: 26px 0 9px;
}
.kws .kolommen .vakkop { margin-top: 0; }
.kws .toelichting {
  font-size: 14px; margin: -4px 0 18px; max-width: 74ch; color: var(--inkt-zacht);
}
.kws .kop-met-knop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kws .kop-met-knop h2 { margin: 0; }

/* ── knoppen: de ronde vorm van de website ─────────────────────────────────── */

.kws button {
  font-family: var(--tekst);
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 16px;
  border: 1px solid var(--groen);
  border-radius: 99px;
  background: var(--vlak);
  color: var(--groen);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.kws button:hover { background: var(--groen-vlak); }
.kws button.primair { background: var(--groen); border-color: var(--groen); color: #fff; }
.kws button.primair:hover { background: var(--groen-diep); }
.kws button.klein { padding: 3px 11px; font-size: 12.5px; }

/* ── tellers ───────────────────────────────────────────────────────────────── */

.kws .tellers { display: flex; gap: 11px; margin-bottom: 22px; flex-wrap: wrap; }
.kws .teller {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 13px 18px;
  min-width: 116px;
}
.kws .teller .getal { font-family: var(--kop); font-size: 27px; line-height: 1.05; }
.kws .teller .naam {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--inkt-zacht); font-weight: 700; margin-top: 2px;
}
.kws .teller.verlopen .getal,
.kws .teller.ontbreekt .getal,
.kws .teller.nietbewaakt .getal { color: var(--rood); }
.kws .teller.binnenkort .getal { color: var(--terra); }
.kws .teller.inorde .getal { color: var(--groen); }
.kws .teller.gepland .getal { color: var(--inkt-zacht); }

/* ── tabellen ──────────────────────────────────────────────────────────────── */

.kws table {
  width: 100%;
  border-collapse: collapse;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13.5px;
}
.kws th {
  text-align: left;
  background: var(--vlak-warm);
  color: var(--groen);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 9px 13px;
  border-bottom: 1px solid var(--lijn);
}
.kws td { padding: 10px 13px; vertical-align: top; border-top: 1px solid var(--lijn-zacht); }
.kws tr:nth-child(2) td { border-top: none; }

.kws .vlag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.kws .vlag.verlopen,
.kws .vlag.ontbreekt { background: var(--rood-vlak);   color: var(--rood); }
.kws .vlag.binnenkort              { background: var(--terra-vlak);  color: #8E4E14; }
.kws .vlag.inorde                  { background: var(--groen-vlak);  color: var(--groen); }
.kws .vlag.gepland                 { background: var(--vlak-warm);   color: var(--inkt-zacht); }
.kws .vlag.nietbewaakt             { background: var(--rood-vlak);   color: var(--rood); border: 1px dashed var(--rood); }
.kws .vlag.geengegevens            { background: var(--zand);        color: #6A5B3C; }
.kws .vlag.controleren             { background: #EDF0F7;           color: var(--blauw); border: 1px solid #C6CEE0; }
.kws .teller.controleren .getal { color: var(--blauw); }
.kws .vlag.buiten                  { background: var(--vlak);        color: var(--inkt-zacht); border: 1px solid var(--lijn); }

.kws .eis { font-size: 12.5px; margin-top: 4px; color: var(--inkt-zacht); }
.kws .eis .bron { display: block; font-size: 11.5px; margin-top: 2px; }
.kws .eiscode { font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; color: var(--inkt-zacht); }
.kws .bewaker { font-size: 11.5px; color: var(--inkt-zacht); display: block; }
.kws .regelcode { font-size: 11.5px; color: var(--inkt-zacht); font-family: ui-monospace, Menlo, monospace; }

.kws details.waarom { margin-top: 4px; }
.kws details.waarom summary {
  font-size: 11.5px; cursor: pointer; list-style: none; color: var(--terra); font-weight: 600;
}
.kws details.waarom summary::-webkit-details-marker { display: none; }
.kws details.waarom summary::before { content: "▸ "; }
.kws details.waarom[open] summary::before { content: "▾ "; }

/* ── lege staat en meldingen ───────────────────────────────────────────────── */

.kws .leeg {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--zand);
  border-radius: 10px;
  padding: 22px 24px;
  font-size: 14px;
  color: var(--inkt-zacht);
}
.kws .leeg strong { display: block; margin-bottom: 6px; font-size: 16px; color: var(--inkt); font-family: var(--kop); }

.kws .melding {
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--rood);
  background: var(--rood-vlak);
  border-radius: 10px;
  padding: 14px 17px;
  margin-bottom: 16px;
  font-size: 14px;
}
.kws .melding.goed { border-left-color: var(--groen); background: var(--groen-vlak); }
.kws .melding strong { display: block; margin-bottom: 3px; font-weight: 700; }

/* ── kaarten en hoofdstukpagina ────────────────────────────────────────────── */

.kws .hoofdstukkop { border-bottom: 2px solid var(--zand); padding-bottom: 11px; margin-bottom: 18px; }
.kws .hoofdstukkop h2 { margin: 0; }
.kws .hoofdstukkop .code {
  font-size: 12px; color: var(--terra); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.kws .kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 10px;
  padding: 17px 19px;
  margin-bottom: 16px;
}
.kws .kaart h3 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--inkt-zacht);
}
.kws .kaart p { margin: 0; font-size: 14px; }

/* ── beleidscyclus ─────────────────────────────────────────────────────────── */

.kws .ketenstap {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-left: 5px solid var(--zand);
  border-radius: 10px;
  padding: 13px 17px;
  margin-bottom: 5px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.kws .ketenstap.centraal { border-left-color: var(--groen); background: var(--groen-vlak); }
.kws .ketenstap .kern { flex: 1; min-width: 0; }
.kws .ketenstap h3 { margin: 0 0 3px; font-family: var(--kop); font-size: 16px; font-weight: 700; color: var(--groen); }
.kws .ketenstap p { margin: 0; font-size: 13px; color: var(--inkt-zacht); }
.kws .ketenstap .wie {
  font-size: 11px; font-weight: 700; color: var(--terra); text-transform: uppercase;
  letter-spacing: 0.07em; margin-top: 6px; display: block;
}
.kws .ketenpijl { text-align: center; font-size: 15px; color: var(--zand); margin: 1px 0 5px; }
.kws .ketenstuk {
  font-size: 11.5px; font-family: ui-monospace, Menlo, monospace;
  border: 1px solid var(--lijn); padding: 2px 9px; border-radius: 99px;
  background: var(--vlak); color: var(--inkt-zacht); cursor: pointer; font-weight: 700;
}
.kws .ketenstuk:hover { background: var(--groen-vlak); color: var(--groen); }
.kws .ketenterug {
  border: 1px dashed var(--zand); border-radius: 10px; padding: 13px 17px; margin-top: 9px;
  font-size: 13px; background: var(--vlak-warm); color: var(--inkt-zacht);
}

/* ── dashboard ─────────────────────────────────────────────────────────────── */

.kws .kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .kws .kolommen { grid-template-columns: 1fr; } }

.kws .aftelrij { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.kws .aftel {
  flex: 1; min-width: 215px;
  background: var(--groen); color: #fff;
  border-radius: 12px;
  padding: 15px 20px;
}
.kws .aftel.dichtbij { background: var(--terra); }
.kws .aftel .dagen { font-family: var(--kop); font-size: 30px; line-height: 1.05; }
.kws .aftel .wat { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.9; font-weight: 700; }
.kws .aftel .datum { font-size: 12px; opacity: 0.85; margin-top: 3px; }

.kws .puntje {
  background: var(--vlak); border: 1px solid var(--lijn);
  border-left: 4px solid var(--rood); border-radius: 8px;
  padding: 10px 13px; margin-bottom: 6px; font-size: 13.5px;
}
.kws .puntje.binnenkort { border-left-color: var(--terra); }
.kws .puntje .bij { display: block; font-size: 12px; color: var(--inkt-zacht); margin-top: 3px; }

.kws .balk { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--vlak-warm); }
.kws .balk div { height: 100%; }
.kws .balkrij { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.kws .balkrij .naam { flex: 0 0 140px; font-weight: 700; }
.kws .balkrij .balkvak { flex: 1; }
.kws .balkrij .getallen { flex: 0 0 130px; text-align: right; font-size: 12px; color: var(--inkt-zacht); }

.kws h3.kwartaal {
  font-family: var(--kop); font-size: 17px; font-weight: 700; color: var(--groen);
  margin: 24px 0 9px; padding-bottom: 5px; border-bottom: 2px solid var(--zand);
}
.kws h3.kwartaal:first-child { margin-top: 0; }
.kws h3.kwartaal .periode { font-family: var(--tekst); font-size: 13px; font-weight: 400; color: var(--inkt-zacht); margin-left: 9px; }

/* ── invoervenster ─────────────────────────────────────────────────────────── */

.kws .scherm {
  /* Boven de bovenbalk van de suite: die staat sticky op z-index 40, en zonder
     eigen laag zou hij dwars door het venster heen prikken. Zelfde hoogte als
     .vensterlaag van de suite, want het is dezelfde soort laag. */
  position: fixed; inset: 0; z-index: 60;
  background: rgba(29, 25, 16, 0.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; overflow: auto;
}
.kws .venster {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--groen);
  border-radius: 12px;
  padding: 25px 26px;
  width: 100%;
  max-width: 545px;
  box-shadow: 0 18px 50px rgba(29, 25, 16, 0.18);
}
.kws .venster h2 { margin-bottom: 18px; font-size: 20px; }
.kws .veld { margin-bottom: 15px; }
.kws .veld label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.kws .veld input,
.kws .veld select,
.kws .veld textarea {
  width: 100%;
  font-family: var(--tekst);
  font-size: 14px;
  padding: 8px 11px;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--vlak);
  color: var(--inkt);
}
.kws .veld input:focus,
.kws .veld select:focus {
  outline: none; border-color: var(--groen); box-shadow: 0 0 0 3px var(--groen-vlak);
}
.kws .veld .hint { font-size: 12px; margin-top: 4px; color: var(--inkt-zacht); }
.kws .venster-knoppen { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
/* ── schuiven ──────────────────────────────────────────────────────────────── */

.kws #takenlijst,
.kws #medewerkerslijst,
.kws #documentenlijst,
.kws #jaarcycluslijst,
.kws #registerlijst,
.kws #dekkinglijst { overflow-x: auto; }
.kws #takenlijst table,
.kws #medewerkerslijst table,
.kws #documentenlijst table,
.kws #jaarcycluslijst table,
.kws #registerlijst table,
.kws #dekkinglijst table { min-width: 700px; }
.kws #registerkeuze select {
  font-family: var(--tekst); font-size: 13.5px; padding: 6px 11px;
  border: 1px solid var(--lijn); border-radius: 99px; background: var(--vlak); color: var(--inkt);
}

/* ── het bestand uit Drive op de documentpagina ────────────────────────────── */
.kws .kaartkop { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.kws .kaartkop h3 { margin: 0; flex: 1; }
.kws .jaarkeuze {
  font-family: var(--tekst); font-size: 12.5px; padding: 4px 10px;
  border: 1px solid var(--lijn); border-radius: 99px; background: var(--vlak); color: var(--inkt);
}
.kws .drivevenster {
  width: 100%; height: 560px; border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--vlak-warm); display: block;
}
.kws .kaart a { color: var(--groen); text-decoration: underline; text-underline-offset: 2px; }
.kws .kaart a:hover { color: var(--terra); }

/* --- JPE-checklist --- */
.kws .jpecel {
  width: 44px; text-align: center; cursor: pointer; user-select: none;
  font-weight: 700; font-size: 15px;
}
.kws .jpecel.v { color: var(--groen); }
.kws .jpecel.x { color: var(--rood); }
.kws .jpecel.n { color: var(--inkt-zacht); }
.kws .jpecel.leeg { color: var(--lijn); }
.kws .jpecel:hover { background: var(--groen-vlak); border-radius: 6px; }

/* Risicomatrix. Niet van de site: een werkscherm heeft hem nodig, een website niet.
   De kleuren zijn dezelfde statuskleuren als de vlaggen, zodat een cel en een vlag
   met dezelfde ernst er ook hetzelfde uitzien. */
.kws table.matrix { width: auto; margin: 10px 0; border-collapse: collapse; }
.kws table.matrix th { font-size: 12px; color: var(--inkt-zacht); font-weight: 600;
                  padding: 4px 8px; background: none; border: 0; text-align: center; }
.kws td.matrixcel { width: 52px; height: 40px; text-align: center; vertical-align: middle;
               border: 1px solid var(--lijn); padding: 2px; }
/* Vier banden, vier tinten. De vlagkleuren kennen er maar drie, en dan zouden
   mitigeren en kritiek dezelfde cel opleveren - precies het onderscheid waarvoor
   je een matrix ophangt. */
.kws td.matrixcel.band-acceptabel { background: var(--groen-vlak); }
.kws td.matrixcel.band-monitoren  { background: #F7E6CC; }
.kws td.matrixcel.band-mitigeren  { background: #EFC7AE; }
.kws td.matrixcel.band-kritiek    { background: #DF9E82; }
.kws td.matrixcel.band-kritiek .matrixscore,
.kws td.matrixcel.band-mitigeren .matrixscore { color: #5E3218; }
.kws .matrixscore  { font-size: 11px; color: var(--inkt-zacht); }
.kws .matrixaantal { font-size: 15px; font-weight: 700; color: var(--inkt); }

/* Herkomst en gevolg van een registerregel: de keten waar een auditor naar vraagt.
   Bewust smal en grijs - het is context bij de regel, niet de regel zelf. */
.kws .herkomst { font-size: 12px; color: var(--inkt-zacht); margin-top: 4px; }
.kws button.schakel { background: none; border: 0; padding: 0 4px 0 0; font: inherit;
                 color: var(--groen-diep); text-decoration: underline; cursor: pointer; }
.kws button.schakel:hover { color: var(--terra); }

/* De stukkenkaart: deadline en verbindingen bij een stuk. Elke verbindingsregel is
   een zin met knoppen erin, geen tabel - het gaat om het verband, niet om de kolom. */
.kws .deadlineregel { margin: 6px 0 12px; }
.kws .verbinding { margin: 6px 0; font-size: 14px; }
.kws .verbinding .hint { margin-left: 0; }
.kws td.telaat { color: var(--terra); font-weight: 700; }
.kws label.aanvink { font-size: 13px; color: var(--inkt-zacht); margin-right: 12px; }
/* De eis waar je vanaf een stuk naartoe sprong, zodat je hem in de lijst terugvindt. */
.kws tr.geaccentueerd > td { background: var(--groen-vlak); }
.kws .vlag.jaarcyclus { background: var(--vlak-warm); color: var(--inkt-zacht); }
.kws .vlag.formulier  { background: var(--vlak);      color: var(--inkt-zacht);
                   border: 1px solid var(--lijn); }

/* Interne auditchecklist. Niet van de site: een auditvraag heeft een eigen vorm nodig -
   de vraag groot, het bewijs en de eis klein eronder, en de keuze als knoppen in plaats
   van als vinkje, zodat er geen twijfel is welk oordeel er staat. */
.kws .auditvraag {
  background: var(--vlak); border: 1px solid var(--lijn); border-left: 4px solid var(--lijn);
  border-radius: 8px; padding: 12px 14px; margin: 10px 0;
}
.kws .auditvraag.bevinding    { border-left-color: var(--rood); background: var(--rood-vlak); }
.kws .auditvraag.verbeterpunt { border-left-color: var(--terra); background: var(--terra-vlak); }
.kws .auditclausule {
  font-size: 12px; font-weight: 700; color: var(--groen); letter-spacing: 0.04em;
  margin: 0 0 2px;
}
.kws .audittekst  { margin: 0 0 6px; font-size: 15px; }
.kws .auditbewijs { margin: 0 0 2px; font-size: 13px; color: var(--inkt-zacht); }
.kws .auditbron   { margin: 0 0 8px; font-size: 12px; color: var(--inkt-zacht); }
.kws .auditknoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kws .auditknop {
  border: 1px solid var(--lijn); background: var(--vlak-warm); color: var(--inkt);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.kws .auditknop:hover { background: var(--groen-vlak); }
.kws .auditknop.aan   { background: var(--groen); border-color: var(--groen-diep); color: #fff; }
.kws .audittoelichting {
  width: 100%; min-height: 44px; border: 1px solid var(--lijn); border-radius: 6px;
  padding: 6px 8px; font: inherit; font-size: 13px; background: var(--vlak);
}
.kws table.clausuletabel { width: auto; margin: 6px 0 14px; }
.kws table.clausuletabel tr.onaf td { color: var(--inkt-zacht); }

/* --- Wettenboek ------------------------------------------------------------
   Wettekst leest anders dan een werklijst: langere regels, meer wit, en het
   verschil tussen oud en nieuw moet je in een oogopslag zien. Niet van de site
   overgenomen - dit zijn eigen keuzes voor leesbaarheid van lange tekst. */

.kws .wetartikel {
  border-left: 3px solid var(--lijn);
  padding: 6px 0 6px 12px;
  margin: 6px 0;
}
.kws .wetartikel.geraakt { border-left-color: var(--terra); }
.kws .wetartikel > summary { cursor: pointer; line-height: 1.7; }
.kws .wettekst {
  max-width: 62em;
  line-height: 1.65;
  margin: 8px 0 4px;
}
.kws .zoekveld {
  width: 100%;
  max-width: 32em;
  padding: 8px 10px;
  margin: 14px 0 6px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  font: inherit;
}
.kws .verschil {
  font-size: 0.95em;
  line-height: 1.55;
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 10px;
}
.kws .verschilregel {
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 3px;
  white-space: pre-wrap;
}
.kws .verschilregel.gelijk { color: var(--inkt-zacht); }
.kws .verschilregel.bij { background: var(--groen-vlak); }
.kws .verschilregel.weg { background: var(--rood-vlak); text-decoration: line-through; }
.kws .filterbalk { margin: 8px 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.kws tr.afgehandeld { opacity: 0.55; }
.kws a.wetlink { color: var(--groen); text-decoration: underline; cursor: pointer; }
.kws .waarschuwing { color: var(--terra); font-weight: 600; margin-top: 4px; }
.kws .wetartikel > summary .bewaker { display: inline-block; margin-left: 6px; }
.kws .lidnr {
  display: inline-block;
  min-width: 2.1em;
  font-weight: 600;
  color: var(--inkt-zacht);
}
.kws .wettekst + .wettekst { margin-top: 6px; }
.kws .wetgroep {
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--lijn);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--vlak);
}
.kws .wetgroep.geraakt { border-left-color: var(--terra); }
.kws .wetgroep.afgehandeld { opacity: 0.6; }
.kws .wetgroep > summary { cursor: pointer; line-height: 1.9; }
.kws .wetgroep > summary .vlag { margin-left: 8px; }
.kws .wetgroep table { margin-top: 10px; }
.kws .kaart.aandacht { border-left: 4px solid var(--terra); }

/* ── Verfijning (0.79.0) ─────────────────────────────────────────────────────
   Dezelfde afwerking als de laag onderaan suite.css, zodat de kwaliteitsschermen
   niet vlakker ogen dan de rest van de suite: ronder, zachte diepte, meer lucht
   in de tabelcellen. Geen nieuwe kleuren. */
.kws table {
  border-collapse: separate; border-spacing: 0; border-color: rgba(214,201,174,.55);
  border-radius: 14px; font-size: 14px;
  box-shadow: 0 1px 2px rgba(29,25,16,.04), 0 10px 28px -14px rgba(29,25,16,.14);
}
.kws th { background: linear-gradient(180deg, #FBF8F1, var(--vlak-warm)); color: var(--groen-diep); padding: 11px 14px; }
.kws td { padding: 12px 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.kws tbody tr, .kws tr { transition: background .12s; }
.kws tr:hover td { background: #FBF7EF; }
.kws .kaart {
  border-color: rgba(214,201,174,.55); border-radius: 16px; padding: 20px 22px; margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(29,25,16,.04), 0 10px 28px -14px rgba(29,25,16,.14);
}
.kws .teller {
  border-color: rgba(214,201,174,.55); border-radius: 14px; padding: 15px 20px;
  box-shadow: 0 1px 2px rgba(29,25,16,.04), 0 8px 22px -14px rgba(29,25,16,.14);
}
.kws .teller .getal { font-size: 31px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kws h2 { font-size: 25px; line-height: 1.2; text-wrap: balance; }
.kws .toelichting { line-height: 1.6; }
.kws button { transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
.kws button:hover { box-shadow: 0 4px 12px -6px rgba(55,70,30,.45); }
.kws button.primair {
  background: linear-gradient(180deg, #56692F, var(--groen));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px -8px rgba(55,70,30,.7);
}
.kws button.primair:hover { background: linear-gradient(180deg, #4E6029, var(--groen-diep)); transform: translateY(-1px); }
/* Op een telefoon schuift een brede tabel binnen zichzelf in plaats van de hele
   pagina mee te nemen (Signalen 194px, Jaarplanning 57px, Audit 41px op 375 breed). */
@media (max-width: 760px) {
  .kws table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}