/* ============================================================================
   SVS HRM — weergave 2 — schermen: beheer, rollen, hulp, instellingen, reglement,
   sjablonen, checklists, berichten, cao-tabel, persoonlijke instellingen
   ========================================================================= */

/* ---------------------------------------------------------------- de moduleschil
   Beheer heeft veertien onderdelen in vier groepen. Die staan links onder elkaar,
   gegroepeerd, zoals elk instellingenscherm dat mensen kennen. Afwezigheid heeft er
   drie en krijgt gewone tabbladen. */
.moduleblad { display: grid; grid-template-columns: var(--zijnav) minmax(0, 1fr); gap: var(--ruimte-6); align-items: start; }
.modulenav { position: sticky; top: calc(var(--topbalk) + var(--ruimte-4)); display: flex; flex-direction: column;
  gap: var(--ruimte-4); }
.modulenav-groep { display: flex; flex-direction: column; gap: 1px; }
.modulenav-groep > .zonelabel { padding: 0 var(--ruimte-2) var(--ruimte-1); }
.modulenav a { display: flex; align-items: center; gap: var(--ruimte-2); min-height: calc(34px * var(--dichtheid));
  padding: 0 var(--ruimte-2); border-radius: var(--radius-2); color: var(--tekst-2); font-size: var(--tekst-m);
  font-weight: 500; text-decoration: none; }
.modulenav a:hover { background: var(--vlak-diep); color: var(--tekst); }
.modulenav a[aria-current="page"] { background: var(--vlak); color: var(--tekst); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--rand); }
.moduleinhoud { min-width: 0; }
.moduleinhoud > .kaart + .kaart, .moduleinhoud > .paneel + .paneel { margin-top: var(--ruimte-4); }
.moduleinhoud > .toelichting { margin-bottom: var(--ruimte-4); }
@media (max-width: 1023px) {
  .moduleblad { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); }
  .modulenav { position: static; flex-direction: row; gap: var(--ruimte-1); overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--ruimte-4) * -1); padding: 0 var(--ruimte-4) 2px; }
  .modulenav-groep { flex-direction: row; gap: var(--ruimte-1); }
  .modulenav-groep > .zonelabel { display: none; }
  .modulenav a { white-space: nowrap; border: 1px solid var(--rand); background: var(--vlak); border-radius: var(--radius-pil);
    padding: 0 var(--ruimte-3); }
  .modulenav a[aria-current="page"] { background: var(--inkt-900); color: var(--tekst-op-donker); border-color: var(--inkt-900); box-shadow: none; }
}

/* ---------------------------------------------------------------- organisatie */
.orgblad { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.orgblad > .paneel { margin: 0; }
.orgnoot { padding: var(--ruimte-3) var(--inspring) 0; margin-bottom: var(--ruimte-2); }
.potregel-beheer { display: grid; grid-template-columns: 220px 200px 200px; gap: var(--ruimte-4); align-items: start;
  padding: var(--ruimte-3) 0; border-bottom: 1px solid var(--rand); }
.potregel-beheer:last-child { border-bottom: none; padding-bottom: 0; }
.potregel-beheer .veld { margin-bottom: 0; }
.potregel-beheer .micro { display: block; }
@media (max-width: 767px) { .potregel-beheer { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-2); } }
.rolrij { display: grid; grid-template-columns: 260px 1fr; gap: var(--ruimte-4); padding: var(--ruimte-3) 0;
  border-bottom: 1px solid var(--rand); align-items: start; }
.rolrij:last-child { border-bottom: none; padding-bottom: 0; }
.rolrechten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ruimte-2); }
.rechtje { display: flex; flex-direction: column; gap: 1px; padding: var(--ruimte-2) var(--ruimte-3); border-radius: var(--radius-2);
  background: var(--vlak-zacht); border: 1px solid var(--rand); }
.rechtje .rechtnaam { font-size: var(--tekst-m); color: var(--tekst); }
.rechtje .rechtcode { font-family: var(--letter-vast); font-size: var(--tekst-xs); color: var(--tekst-3); }

/* ---------------------------------------------------------------- rollen en rechten */
.rollenblad { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.rollenblad > .paneel { margin: 0; }
.rolraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ruimte-3); }
.rolkaart { display: flex; flex-direction: column; gap: var(--ruimte-2); padding: var(--ruimte-4); text-align: left;
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3); cursor: pointer;
  transition: border-color var(--duur-snel), background var(--duur-snel); }
.rolkaart:hover { border-color: var(--rand-invoer); }
.rolkaart:focus-visible { outline: none; box-shadow: var(--focus-gloed); }
.rolkaart.gekozen { border-color: var(--groen-700); }
.rolkaart.nieuw { border-style: dashed; background: var(--vlak-zacht); justify-content: center; }
.rolkaartkop { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; }
.rolnaam { display: inline-flex; align-items: center; gap: var(--ruimte-2); font-size: var(--tekst-kaart); font-weight: 600;
  color: var(--tekst); }
.rolnaam svg { width: 16px; height: 16px; }
.rolsamenvatting { font-size: var(--tekst-s); line-height: 1.5; color: var(--tekst-2); }
.rolvoet { margin-top: var(--ruimte-1); font-size: var(--tekst-xs); font-weight: 500; color: var(--tekst-3);
  font-variant-numeric: tabular-nums; }
.rolsamenvatblok { padding: var(--ruimte-3) var(--ruimte-4); margin-bottom: var(--ruimte-4); background: var(--groen-50);
  border: 1px solid var(--groen-100); border-radius: var(--radius-2); }
.rolzin { margin: var(--ruimte-1) 0 0; font-size: var(--tekst-l); line-height: 1.5; font-weight: 500; color: var(--tekst); }
.rolvelden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--ruimte-4);
  margin-bottom: var(--ruimte-3); }
.rechtgroepen { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.rechtgroep { border: 1px solid var(--rand); border-radius: var(--radius-2); overflow: hidden; background: var(--vlak); }
.rechtgroepkop { display: flex; align-items: center; gap: var(--ruimte-3); width: 100%; padding: var(--ruimte-3) var(--ruimte-4);
  background: var(--vlak-zacht); border: none; text-align: left; cursor: pointer; }
.rechtgroepkop:hover { background: var(--vlak-diep); }
.rechtgroepkop:focus-visible { outline: none; box-shadow: inset var(--focus-gloed); }
.rechtgroepmerk { display: flex; color: var(--tekst-2); }
.rechtgroepmerk svg { width: 16px; height: 16px; }
.rechtgroepwat { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rechtgroepnaam { font-size: var(--tekst-m); font-weight: 600; color: var(--tekst); }
.rechtgroepuitleg { font-size: var(--tekst-s); color: var(--tekst-2); }
.rechtgroeptelling { flex: none; font-size: var(--tekst-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--tekst-3); padding: 2px var(--ruimte-2); border-radius: var(--radius-pil); background: var(--vlak-diep); }
.rechtgroeptelling.aan { background: var(--succes-bg); color: var(--succes); }
.rechtgroeplijf { display: flex; flex-direction: column; }
.rechtregel { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--ruimte-3);
  padding: var(--ruimte-3) var(--ruimte-4); border-top: 1px solid var(--rand); }
.rechtregel.zwaar { background: var(--letop-bg); }
.rechtwat { display: flex; flex-direction: column; gap: var(--ruimte-2); min-width: 0; }
.rechtnaam { display: flex; align-items: center; gap: var(--ruimte-2); font-size: var(--tekst-m); font-weight: 500;
  color: var(--tekst); line-height: 1.4; }
.rechtzwaar { display: inline-flex; color: var(--letop); }
.rechtzwaar svg { width: 14px; height: 14px; }
.rechtuitleg { margin: 0; font-size: var(--tekst-s); line-height: 1.55; color: var(--tekst-2); max-width: 62ch; }
.rechtwie { margin: 0; font-size: var(--tekst-s); color: var(--tekst); }
.rechtcode { margin: 0; font-size: var(--tekst-xs); font-family: var(--letter-vast); color: var(--tekst-3); }
.rechtinfo { display: grid; place-items: center; width: 30px; height: 30px; background: none; border: none; border-radius: 50%;
  color: var(--tekst-2); cursor: pointer; }
.rechtinfo:hover { background: var(--vlak-diep); color: var(--tekst); }
.rechtinfo:focus-visible { outline: none; box-shadow: var(--focus-gloed); }
.rechtinfo.open { color: var(--info); }
.rechtinfo svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .rolraster { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- hulp */
.hulpblad { display: flex; flex-direction: column; gap: var(--ruimte-5); }
.hulpzoek { position: relative; max-width: 560px; }
.hulpzoek input { width: 100%; min-height: var(--veld-hoogte); padding: 0 var(--ruimte-4) 0 40px; font-size: var(--tekst-l);
  background: var(--vlak); border: 1px solid var(--rand-invoer); border-radius: var(--radius-2); color: var(--tekst); }
.hulpzoek input:focus-visible { outline: none; border-color: var(--groen-700); box-shadow: var(--focus-gloed); }
.hulpzoekmerk { position: absolute; top: 50%; left: var(--ruimte-3); transform: translateY(-50%); display: flex;
  color: var(--tekst-3); pointer-events: none; }
.hulpzoekmerk svg { width: 17px; height: 17px; }
.hulpraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--ruimte-3); }
.hulpkaart { display: flex; gap: var(--ruimte-3); padding: var(--ruimte-4); background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-3); text-decoration: none; color: inherit; transition: border-color var(--duur-snel); }
.hulpkaart:hover { border-color: var(--rand-invoer); }
.hulpkaart:focus-visible { outline: none; box-shadow: var(--focus-gloed); }
.hulpkaart.breed { max-width: none; }
.hulpkaartmerk { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-2);
  background: var(--groen-50); color: var(--groen-700); }
.hulpkaartmerk svg { width: 19px; height: 19px; }
.hulpkaartwat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hulpkaarttitel { font-size: var(--tekst-l); font-weight: 600; color: var(--tekst); }
.hulpkaartuitleg { font-size: var(--tekst-s); line-height: 1.5; color: var(--tekst-2); }
.hulpkaartaantal { margin-top: var(--ruimte-2); font-size: var(--tekst-xs); font-weight: 500; color: var(--tekst-3); }
.hulplijstblok { display: flex; flex-direction: column; background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--radius-3); overflow: hidden; }
.hulpregel { display: flex; flex-direction: column; gap: 2px; padding: var(--ruimte-3) var(--ruimte-4);
  border-bottom: 1px solid var(--rand); text-decoration: none; color: inherit; }
.hulpregel:last-child { border-bottom: none; }
.hulpregel:hover { background: var(--vlak-zacht); }
.hulpregel:focus-visible { outline: none; box-shadow: inset var(--focus-gloed); }
.hulpregeltitel { font-size: var(--tekst-m); font-weight: 600; color: var(--tekst); }
.hulpregelonder { font-size: var(--tekst-s); color: var(--tekst-2); }
.hulpterug { display: inline-flex; align-items: center; gap: var(--ruimte-2); font-size: var(--tekst-s); font-weight: 500;
  color: var(--tekst-2); text-decoration: none; }
.hulpterug:hover { color: var(--tekst); }
.hulpterug svg { width: 14px; height: 14px; }
.hulpartikel { display: flex; flex-direction: column; gap: var(--ruimte-4); max-width: 68ch; }
.hulpartikel h1, .hulponderwerp { margin: 0; font-size: var(--tekst-pagina); font-weight: 600; color: var(--tekst); }
.hulpinleiding { margin: 0; font-size: var(--tekst-l); line-height: 1.6; color: var(--tekst-2); }
.hulpkop { display: flex; align-items: baseline; gap: var(--ruimte-3); margin: var(--ruimte-4) 0 0; font-size: var(--tekst-sectie);
  font-weight: 600; color: var(--tekst); }
.hulptekst { margin: 0; font-size: var(--tekst-l); line-height: 1.65; color: var(--tekst); }
.hulpstappen, .hulplijst { margin: 0; padding-left: var(--ruimte-5); display: flex; flex-direction: column; gap: var(--ruimte-2);
  font-size: var(--tekst-l); line-height: 1.6; color: var(--tekst); }
.hulpstappen li::marker { font-weight: 600; color: var(--tekst-2); }
.hulpnoot { display: flex; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); border: 1px solid var(--rand);
  border-radius: var(--radius-2); background: var(--vlak-zacht); }
.hulpnoot p { margin: 0; font-size: var(--tekst-m); line-height: 1.6; color: var(--tekst); }
.hulpnootmerk { flex: none; display: flex; padding-top: 2px; }
.hulpnootmerk svg { width: 17px; height: 17px; }
.hulpnoot.letop { background: var(--letop-bg); border-color: var(--letop-rand); }
.hulpnoot.letop .hulpnootmerk { color: var(--letop); }
.hulpnoot.tip { background: var(--succes-bg); border-color: var(--succes-rand); }
.hulpnoot.tip .hulpnootmerk { color: var(--succes); }
.hulpnoot.weetje { background: var(--info-bg); border-color: var(--info-rand); }
.hulpnoot.weetje .hulpnootmerk { color: var(--info); }
.uitgave { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.uitgaveversie { font-variant-numeric: tabular-nums; font-size: var(--tekst-sectie); font-weight: 600; }
.uitgavedatum { font-size: var(--tekst-s); font-weight: 500; color: var(--tekst-2); }
.uitgavepunt { display: grid; grid-template-columns: 104px 1fr; gap: var(--ruimte-3); align-items: baseline; }
.uitgavesoort { font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tekst-3); }
.uitgavepunt p { margin: 0; font-size: var(--tekst-m); line-height: 1.6; color: var(--tekst); }
@media (max-width: 640px) { .uitgavepunt { grid-template-columns: 1fr; gap: 2px; } .hulpraster { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- persoonlijke instellingen */
.mijnblad { display: flex; flex-direction: column; gap: var(--ruimte-4); max-width: 880px; }
.mijnblad > .paneel { margin: 0; }
.mijnblad .paneel-lijf > .zonelabel { margin-top: var(--ruimte-5); }
.mijnblad .paneel-lijf > .zonelabel:first-child { margin-top: 0; }
.mijnblad .tekstkiezer { padding: 0; max-width: 360px; }
.mijnblad .weergavewissel { padding: 0; max-width: 360px; }
.mijnblad .rechts { margin-top: var(--ruimte-3); }

/* ---------------------------------------------------------------- instellingen als regels */
.instelblad { display: grid; grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr); gap: var(--ruimte-6); align-items: start; }
.instelrail { position: sticky; top: calc(var(--topbalk) + var(--ruimte-4)); display: flex; flex-direction: column;
  gap: var(--ruimte-4); max-height: calc(100dvh - var(--topbalk) - var(--ruimte-8)); }
.railzoek { display: flex; align-items: center; gap: var(--ruimte-2); padding: 0 var(--ruimte-3); background: var(--vlak);
  border: 1px solid var(--rand-invoer); border-radius: var(--radius-2); min-height: var(--veld-hoogte);
  transition: border-color var(--duur-snel), box-shadow var(--duur-snel); }
.railzoek:focus-within { border-color: var(--groen-700); box-shadow: var(--focus-gloed); }
.railzoek svg { width: 15px; height: 15px; color: var(--tekst-3); flex: none; }
.railzoek input { flex: 1; min-width: 0; border: none; background: none; padding: 0; font-size: var(--tekst-m); color: var(--tekst); }
.railzoek input:focus-visible { outline: none; box-shadow: none; }
.railnav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.railgroep + .railgroep { margin-top: var(--ruimte-4); }
.railkop { display: flex; align-items: center; gap: var(--ruimte-2); font-size: var(--tekst-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-3); padding: 0 var(--ruimte-2) var(--ruimte-2); }
.railkop svg { width: 14px; height: 14px; }
.railnav ul { list-style: none; margin: 0 0 0 var(--ruimte-3); padding: 0; border-left: 2px solid var(--rand); }
.railnav li[hidden] { display: none; }
.railnav a { display: block; padding: var(--ruimte-1) var(--ruimte-3); margin-left: -2px; border-left: 2px solid transparent;
  color: var(--tekst-2); text-decoration: none; font-size: var(--tekst-m); font-weight: 500; }
.railnav a:hover { color: var(--tekst); }
.railnav a[aria-current] { color: var(--tekst); font-weight: 600; border-left-color: var(--groen-600); }
.railnoot { margin: 0; padding: 0 var(--ruimte-2); font-size: var(--tekst-s); color: var(--tekst-3); }
.instelinhoud { min-width: 0; padding-bottom: var(--ruimte-8); }
.hoofdstuk + .hoofdstuk { margin-top: var(--ruimte-7); }
.hoofdstuk[hidden], .deel[hidden] { display: none; }
.hoofdstukkop { font-size: var(--tekst-sectie); font-weight: 600; margin: 0 0 var(--ruimte-4); padding-bottom: var(--ruimte-2);
  border-bottom: 1px solid var(--rand-sterk); }
.deel + .deel { margin-top: var(--ruimte-5); }
.deelkop { font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-3);
  margin: 0 0 var(--ruimte-2); }
.deelkop:focus-visible { outline: 2px solid var(--groen-700); outline-offset: 4px; border-radius: var(--radius-1); }
.deelregels { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3); overflow: hidden; }
.instelregel { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: var(--ruimte-5); align-items: start;
  padding: var(--ruimte-4) var(--ruimte-5); border-bottom: 1px solid var(--rand); transition: background var(--duur-snel); }
.regeltekst { min-width: 0; }
.regelherkomst { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ruimte-2); padding-top: 4px; }
.instelregel:last-child { border-bottom: none; }
.instelregel:hover { background: var(--vlak-zacht); }
.instelregel[hidden] { display: none; }
/* De wettelijke regels dragen het zegel 'wettelijk' in de rechterkolom; geen streep erbij. */
.regelzin { margin: 0; max-width: 60ch; font-size: var(--tekst-l); line-height: 1.9; color: var(--tekst); }
.regelwaarom { margin: var(--ruimte-2) 0 0; max-width: 62ch; font-size: var(--tekst-s); line-height: 1.5; color: var(--tekst-2); }
.zegel { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 1px; padding: 2px 8px 2px 6px;
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-pil); background: var(--vlak-diep); color: var(--inkt-900);
  font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.zegel svg { width: 12px; height: 12px; }
.regelsleutel { font-family: var(--letter-vast); font-size: var(--tekst-xs); line-height: 1.4; color: var(--tekst-3);
  overflow-wrap: anywhere; user-select: all; }
.regelstand:not([data-stand]), .regelstand[data-stand=""] { display: none; }
.regelstand { display: flex; align-items: center; gap: var(--ruimte-2); margin-top: var(--ruimte-2); font-size: var(--tekst-s);
  font-weight: 600; color: var(--tekst-2); }
.regelstand[data-stand="bewaard"] { color: var(--succes); }
.regelstand[data-stand="mislukt"] { color: var(--gevaar); }
.standactie:empty { display: none; }
.terugknop { border: 1px solid var(--rand-sterk); background: var(--vlak); border-radius: var(--radius-pil); padding: 2px 10px;
  font-size: var(--tekst-s); font-weight: 600; color: var(--tekst-2); cursor: pointer; }
.terugknop:hover { border-color: var(--rand-invoer); color: var(--tekst); }
.stelknop { display: inline-grid; grid-template-columns: 0fr auto auto 0fr; align-items: center; vertical-align: baseline;
  margin: 0 1px; padding: 1px 5px; border: 1px solid transparent; border-radius: var(--radius-2); background: var(--groen-50);
  transition: border-color var(--duur-snel), grid-template-columns var(--duur-normaal) var(--soepel), background var(--duur-snel),
    box-shadow var(--duur-snel); }
.stelknop:hover, .stelknop:focus-within { grid-template-columns: 1fr auto auto 1fr; border-color: var(--groen-100); background: var(--vlak); }
.stelknop:focus-within { border-color: var(--groen-700); box-shadow: var(--focus-gloed); }
.stelknop input { field-sizing: content; width: calc(var(--tekens, 2) * 1ch + 6px); min-width: 1.6ch; max-width: 8ch;
  border: none; background: none; padding: 0 3px; margin: 0; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--tekst); text-align: center; -moz-appearance: textfield; min-height: 0; }
@supports (field-sizing: content) { .stelknop input { width: auto; } }
.stelknop input[data-tekens="1"] { --tekens: 1; }
.stelknop input[data-tekens="2"] { --tekens: 2; }
.stelknop input[data-tekens="3"] { --tekens: 3; }
.stelknop input[data-tekens="4"] { --tekens: 4; }
.stelknop input[data-tekens="5"] { --tekens: 5; }
.stelknop input[data-tekens="6"] { --tekens: 6; }
.stelknop input::-webkit-outer-spin-button, .stelknop input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stelknop input:focus-visible { outline: none; box-shadow: none; }
.stel-eenheid { font-size: var(--tekst-m); font-weight: 600; color: var(--tekst-2); padding-right: 1px; white-space: nowrap; }
.stel-min, .stel-plus { display: grid; place-items: center; overflow: hidden; width: 100%; min-width: 0; height: 22px;
  border: none; background: none; padding: 0; cursor: pointer; color: var(--groen-700); opacity: 0;
  transition: opacity var(--duur-snel), background var(--duur-snel); border-radius: var(--radius-1); }
.stelknop:hover .stel-min, .stelknop:hover .stel-plus, .stelknop:focus-within .stel-min, .stelknop:focus-within .stel-plus { opacity: 1; }
.stel-min:hover, .stel-plus:hover { background: var(--groen-50); }
.stel-min svg, .stel-plus svg { width: 14px; height: 14px; }
@media (hover: none) {
  .stelknop, .stelknop:hover, .stelknop:focus-within { grid-template-columns: 0fr auto auto 0fr; }
  .stelknop:hover .stel-min, .stelknop:hover .stel-plus, .stelknop:focus-within .stel-min, .stelknop:focus-within .stel-plus { opacity: 0; }
  .stelknop input { min-width: 3ch; }
}
.zinschakelaar { display: inline-flex; vertical-align: baseline; margin: 0 2px; padding: 2px; gap: 2px; background: var(--vlak-diep);
  border: 1px solid var(--rand); border-radius: var(--radius-pil); }
.zinschakelaar button { border: none; background: none; cursor: pointer; padding: 1px 12px; border-radius: var(--radius-pil);
  font: inherit; font-size: var(--tekst-m); font-weight: 600; color: var(--tekst-2); white-space: nowrap;
  transition: background var(--duur-snel), color var(--duur-snel); }
.zinschakelaar button:hover { color: var(--tekst); }
.zinschakelaar button[aria-checked="true"] { background: var(--inkt-900); color: var(--tekst-op-donker); }
.zinschakelaar button:focus-visible { outline: none; box-shadow: var(--focus-gloed); }
.reeksveld { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; vertical-align: baseline; margin: 0 2px; }
.reekschip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px 1px 10px; border-radius: var(--radius-pil);
  background: var(--groen-50); border: 1px solid var(--groen-100); font-size: var(--tekst-m); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--groen-700); white-space: nowrap; }
.reekseenheid { font-size: var(--tekst-m); font-weight: 600; color: var(--tekst-2); margin-left: 2px; }
.reekschip button { display: grid; place-items: center; width: 20px; height: 20px; border: none; background: none; cursor: pointer;
  padding: 0; color: var(--groen-700); opacity: .6; border-radius: var(--radius-pil); }
.reekschip button:hover { opacity: 1; background: var(--groen-100); }
.reekschip button svg { width: 12px; height: 12px; }
.reeks-erbij input { width: 4.5ch; min-height: 0; padding: 1px 6px; text-align: center; border: 1px dashed var(--rand-invoer);
  border-radius: var(--radius-pil); background: none; font: inherit; font-size: var(--tekst-m); font-weight: 600; color: var(--tekst);
  -moz-appearance: textfield; }
.reeks-erbij input::-webkit-outer-spin-button, .reeks-erbij input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.reeks-erbij input::placeholder { color: var(--tekst-3); font-weight: 700; }
.reeks-erbij input:focus-visible { outline: none; border-style: solid; border-color: var(--groen-700); box-shadow: var(--focus-gloed); }
.keuzeveld { display: flex; flex-wrap: wrap; gap: var(--ruimte-2); margin-top: var(--ruimte-3); }
.keuzechip { display: inline-flex; align-items: center; gap: 5px; padding: var(--ruimte-1) var(--ruimte-3) var(--ruimte-1) var(--ruimte-2);
  border: 1px solid var(--rand); border-radius: var(--radius-2); background: var(--vlak); color: var(--tekst-2);
  font-size: var(--tekst-m); font-weight: 500; cursor: pointer; min-height: var(--knop-hoogte-klein);
  transition: border-color var(--duur-snel), background var(--duur-snel), color var(--duur-snel); }
.keuzechip svg { width: 14px; height: 14px; flex: none; color: var(--groen-700); opacity: 0; transition: opacity var(--duur-snel); }
.keuzechip:hover { border-color: var(--rand-invoer); color: var(--tekst); }
.keuzechip[aria-pressed="true"] { background: var(--groen-50); border-color: var(--groen-100); color: var(--groen-700); }
.keuzechip[aria-pressed="true"] svg { opacity: 1; }
.keuzechip:focus-visible { outline: none; box-shadow: var(--focus-gloed); }
.zintekst { display: inline-block; vertical-align: baseline; margin: 0 2px; }
.zintekst input { min-width: 22ch; width: 30ch; max-width: 100%; min-height: 0; padding: 1px 10px; border: 1px solid transparent;
  border-bottom-color: var(--rand-invoer); border-radius: var(--radius-1); background: var(--vlak-zacht); font: inherit;
  font-weight: 600; color: var(--tekst); transition: border-color var(--duur-snel), background var(--duur-snel), box-shadow var(--duur-snel); }
.zintekst input::placeholder { font-weight: 400; color: var(--tekst-3); }
.zintekst input:hover { background: var(--vlak); border-color: var(--rand-sterk); }
.zintekst input:focus-visible { outline: none; background: var(--vlak); border-color: var(--groen-700); box-shadow: var(--focus-gloed); }
.geenresultaat { margin: var(--ruimte-5) 0 0; padding: var(--ruimte-4); background: var(--vlak); border: 1px dashed var(--rand-sterk);
  border-radius: var(--radius-3); color: var(--tekst-2); max-width: 60ch; font-size: var(--tekst-m); }
@media (max-width: 1023px) {
  .instelblad { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-4); }
  .instelrail { position: static; max-height: none; }
  .railnav { display: flex; gap: var(--ruimte-4); overflow-x: auto; padding-bottom: var(--ruimte-2); }
  .railgroep + .railgroep { margin-top: 0; }
  .railnav ul { display: flex; gap: var(--ruimte-1); border-left: none; margin-left: 0; }
  .railnav a { white-space: nowrap; border-left: none; border-radius: var(--radius-pil); border: 1px solid var(--rand);
    background: var(--vlak); margin-left: 0; }
  .railnav a[aria-current] { background: var(--groen-50); border-color: var(--groen-100); }
  .railnoot { display: none; }
  .regelzin { font-size: var(--tekst-m); line-height: 1.8; }
  .instelregel { padding: var(--ruimte-3) var(--ruimte-4); grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-2); }
  .regelherkomst { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--ruimte-3); padding-top: 0; }
}

/* ---------------------------------------------------------------- reglement */
.reglement { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--ruimte-4); align-items: start; }
.reglementboom { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius-3); position: sticky;
  top: calc(var(--topbalk) + var(--ruimte-4)); display: flex; flex-direction: column;
  max-height: calc(100dvh - var(--topbalk) - var(--ruimte-8)); }
.boomkop { display: flex; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-3) var(--inspring); border-bottom: 1px solid var(--rand); }
.boomkop .label { flex: 1; }
.boom { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ruimte-2); }
.boomregel { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--ruimte-2); align-items: baseline; width: 100%;
  min-height: 32px; padding: var(--ruimte-1) var(--ruimte-2); border: none; background: none; border-radius: var(--radius-2);
  text-align: left; cursor: pointer; color: var(--tekst-2); font-size: var(--tekst-m); }
.boomregel:hover { background: var(--vlak-diep); color: var(--tekst); }
.boomregel.actief { background: var(--groen-50); color: var(--tekst); font-weight: 600; }
.boomregel .nr { font-variant-numeric: tabular-nums; font-size: var(--tekst-s); color: var(--tekst-3); }
.boomregel.actief .nr { color: var(--groen-700); }
.boomregel .tt { overflow-wrap: anywhere; }
.boomregel.n1 { font-weight: 600; color: var(--tekst); margin-top: var(--ruimte-2); }
.boomregel.n2 { padding-left: var(--ruimte-4); }
.boomregel.n3 { padding-left: var(--ruimte-6); }
.reglementbalk { display: flex; align-items: center; gap: var(--ruimte-2); flex-wrap: wrap; margin-bottom: var(--ruimte-4); }
.artikelkop { display: flex; align-items: flex-start; gap: var(--ruimte-3); flex-wrap: wrap; margin-bottom: var(--ruimte-4);
  padding-bottom: var(--ruimte-3); border-bottom: 1px solid var(--rand); }
.artikelkop h2 { flex: 1; min-width: 200px; }
.artikelkop .veld { flex: 1; min-width: 240px; }
.begripveld { width: 100%; }
.verschil { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.begrippen { display: grid; grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); gap: 0; margin: 0; }
.begrippen dt, .begrippen dd { padding: var(--ruimte-2) 0; border-bottom: 1px solid var(--rand); margin: 0; font-size: var(--tekst-m); }
.begrippen dt { font-weight: 600; padding-right: var(--ruimte-4); }
.begrippen dd { color: var(--tekst-2); }
.begrippen dt:last-of-type, .begrippen dd:last-of-type { border-bottom: none; }
.artikeltekst { max-width: 72ch; font-size: var(--tekst-l); line-height: 1.6; }
.artikeltekst p { margin: 0 0 var(--ruimte-3); }
.artikeltekst p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  .reglement { grid-template-columns: minmax(0, 1fr); }
  .reglementboom { position: static; max-height: 42dvh; }
}
@media (max-width: 767px) { .begrippen { grid-template-columns: minmax(0, 1fr); } .begrippen dt { padding-bottom: 0; border-bottom: none; } }

/* ---------------------------------------------------------------- sjabloon- en checklistbouwer */
.bouwer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ruimte-4); align-items: start; }
.bouwkant { min-width: 0; }
.voorbeeldkant { min-width: 0; position: sticky; top: calc(var(--topbalk) + var(--ruimte-4)); }
.bouwlijst { display: flex; flex-direction: column; gap: var(--ruimte-2); margin-bottom: var(--ruimte-3); }
.bouwregel { display: flex; align-items: center; gap: var(--ruimte-2); padding: var(--ruimte-2); background: var(--vlak);
  border: 1px solid var(--rand); border-radius: var(--radius-2); transition: border-color var(--duur-snel); }
.bouwregel:hover { border-color: var(--rand-invoer); }
.bouwregel.actief { border-color: var(--groen-700); background: var(--groen-50); }
.bouwvolgorde { display: flex; flex-direction: column; gap: 2px; flex: none; }
.bouwvolgorde .icoonknop { width: 28px; height: 24px; }
.bouwvolgorde .icoonknop svg { width: 13px; height: 13px; }
.bouwknop { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: var(--ruimte-1) var(--ruimte-3);
  background: none; border: none; text-align: left; border-radius: var(--radius-1); cursor: pointer; }
.bouwknop:hover { background: var(--vlak-diep); }
.bouwlabel { font-size: var(--tekst-m); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bouwsoort { font-size: var(--tekst-s); color: var(--tekst-2); }
.voorbeeld .kaart-lijf { background: var(--vlak-zacht); }
.voorbeeld .veld input, .voorbeeld .veld select, .voorbeeld .veld textarea { background: var(--vlak); pointer-events: none; }
.vbkop { margin: var(--ruimte-5) 0 var(--ruimte-3); font-size: var(--tekst-xl); }
.vbkop:first-child { margin-top: 0; }
.vbuitleg { margin: 0 0 var(--ruimte-4); color: var(--tekst-2); font-size: var(--tekst-m); }
.schaal { display: flex; gap: var(--ruimte-2); }
.schaalknop { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--rand-invoer);
  border-radius: var(--radius-2); background: var(--vlak); font-weight: 600; }
.vbtekenen { display: flex; align-items: center; gap: var(--ruimte-2); margin-top: var(--ruimte-5); padding: var(--ruimte-3) var(--ruimte-4);
  border: 1px dashed var(--rand-sterk); border-radius: var(--radius-2); color: var(--tekst-2); font-size: var(--tekst-m); }
.vbtekenen svg { width: 16px; height: 16px; }
.soortkiezer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--ruimte-2); }
.soortknop { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: var(--ruimte-3); background: var(--vlak);
  border: 1px solid var(--rand); border-radius: var(--radius-2); transition: border-color var(--duur-snel), background var(--duur-snel); }
.soortknop:hover { border-color: var(--rand-invoer); background: var(--vlak-zacht); }
.soortknop.actief { border-color: var(--groen-700); background: var(--groen-50); }
.soortnaam { font-size: var(--tekst-m); font-weight: 600; }
.soortuitleg { font-size: var(--tekst-s); color: var(--tekst-2); }
@media (max-width: 1023px) { .bouwer { grid-template-columns: minmax(0, 1fr); } .voorbeeldkant { position: static; } }
.taaklijn { position: relative; padding-left: var(--ruimte-5); }
.taaklijn::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: var(--radius-pil);
  background: var(--rand); }
.lijnmoment { position: relative; padding-bottom: var(--ruimte-5); }
.lijnmoment:last-child { padding-bottom: 0; }
.lijnkop { display: flex; align-items: center; gap: var(--ruimte-2); margin-bottom: var(--ruimte-2); }
.lijnstip { position: absolute; left: calc(var(--ruimte-5) * -1 + 1px); top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--vlak); border: 2px solid var(--rand-sterk); }
.lijnwanneer { font-size: var(--tekst-s); font-weight: 600; color: var(--tekst-2); }
.lijnmoment.start .lijnstip { background: var(--groen-600); border-color: var(--groen-600); }
.lijnmoment.start .lijnwanneer { color: var(--groen-700); }
.lijnmoment.voor .lijnstip { border-color: var(--info-rand); }
.lijntaken { display: flex; flex-direction: column; gap: 2px; }
.lijntaak { display: flex; align-items: baseline; gap: var(--ruimte-3); padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--radius-1); background: var(--vlak-zacht); font-size: var(--tekst-m); }
.lijntaak > span:first-child { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- berichten (mailteksten) */
.berichtenblad { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.berichtenblad > .paneel { margin: 0; }
.voorbeeldmail { margin-top: var(--ruimte-4); border: 1px solid var(--rand-sterk); border-radius: var(--radius-2);
  background: var(--vlak-zacht); overflow: hidden; }
.voorbeeldkop { display: flex; gap: var(--ruimte-3); align-items: baseline; padding: var(--ruimte-2) var(--ruimte-4);
  border-bottom: 1px solid var(--rand); background: var(--vlak); }
.voorbeeldkop .wat { font-size: var(--tekst-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tekst-2); }
.voorbeeldkop .waarde { font-weight: 600; color: var(--tekst); font-size: var(--tekst-m); }
.voorbeeldtekst { margin: 0; padding: var(--ruimte-4); white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit;
  font-size: var(--tekst-m); line-height: 1.55; color: var(--tekst); max-width: 68ch; }
.veldenlijst { margin: var(--ruimte-3) 0; border: 1px solid var(--rand); border-radius: var(--radius-2); padding: var(--ruimte-2) var(--ruimte-3); }
.veldenlijst > summary { cursor: pointer; font-size: var(--tekst-s); color: var(--tekst-2); }
.veldenlijst .verdeling { margin-top: var(--ruimte-3); }
.veldenlijst code { font-size: var(--tekst-s); }

/* ---------------------------------------------------------------- cao-tabel */
.caoblad { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.caotabel { font-variant-numeric: tabular-nums; }
.caotabel th[scope="row"] { font-weight: 600; text-align: left; }
.caotabel td.leeg { color: var(--tekst-3); padding: var(--ruimte-1) var(--inspring); text-align: left; }
.caotabel td.afgeleid { color: var(--letop); font-style: italic; }
.caoplak { margin-top: var(--ruimte-6); padding-top: var(--ruimte-5); border-top: 1px solid var(--rand-sterk); }
.caoplak h2 { font-size: var(--tekst-kaart); margin: 0 0 var(--ruimte-2); }
.caoplak textarea { font-family: var(--letter-vast); font-size: var(--tekst-s); white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.voorbeeldvak { margin-top: var(--ruimte-4); padding: var(--ruimte-4); background: var(--vlak-zacht); border: 1px solid var(--rand);
  border-radius: var(--radius-2); }
.voorbeeldvak > p { margin-top: 0; }
.voorbeeldfouten { margin: 0 0 var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-4); background: var(--letop-bg);
  border: 1px solid var(--letop-rand); border-radius: var(--radius-2); color: var(--letop); }
.voorbeeldfouten li { margin-left: var(--ruimte-4); }
.foutregel { color: var(--gevaar); }

/* ---------------------------------------------------------------- juridische pagina's */
.juridischblad { max-width: 46rem; margin: 0 auto; padding: var(--ruimte-7) var(--ruimte-5) var(--ruimte-8); display: flex;
  flex-direction: column; gap: var(--ruimte-6); background: var(--vlak); color: var(--tekst); }
.juridischkop { display: flex; flex-direction: column; gap: var(--ruimte-2); padding-bottom: var(--ruimte-5);
  border-bottom: 2px solid var(--inkt-900); }
.juridischlogo { width: 132px; height: auto; margin-bottom: var(--ruimte-3); }
.juridischkop h1 { margin: 0; }
.juridischmeta { margin: var(--ruimte-2) 0 0; font-size: var(--tekst-s); color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.juridischblad section { display: flex; flex-direction: column; gap: var(--ruimte-3); }
.juridischblad h2 { margin: 0; padding-bottom: var(--ruimte-2); border-bottom: 1px solid var(--rand); }
.juridischblad h3 { margin: var(--ruimte-2) 0 0; }
.juridischblad p { margin: 0; }
.juridischblad .opsomming li { display: list-item; list-style: disc; margin-left: 1.1em; }
.juridischvoet { padding-top: var(--ruimte-5); border-top: 1px solid var(--rand); font-size: var(--tekst-s); color: var(--tekst-2);
  display: flex; flex-direction: column; gap: var(--ruimte-2); }