/* ==========================================================================
   TALENTPULL — INSTELLINGEN — GEDEELDE STIJL
   Gedragen door de tien /instellingen-*-pagina's en door vier pagina's
   daarbuiten (uitnodiging, wachtwoord-vergeten, wachtwoord-herstel,
   onboarding, kandidaten) die dezelfde .page/.card/.btn/.inp gebruiken.

   DE STANS IS "PANEEL"
   Wat bij elkaar hoort staat in één paneel met een eigen kopbalk. Elk .card
   is zo'n paneel: witte bak, een band van --merk-vlak over de volle breedte
   met de kop in de kopletter, en daaronder de inhoud. Rijen binnen een
   paneel raken de randen en worden gescheiden door haarlijnen, niet door
   witruimte. --merk-accent komt spaarzaam terug als markering, altijd als
   vlak en nooit als letterkleur.

   Volgorde, flow en informatie blijven exact zoals ze waren. Nergens
   display:none, visibility:hidden, order, of iets buiten beeld. Alle
   klassenamen blijven staan — er hangt JavaScript aan.

   KLEUR KOMT UIT merk.css. In dit bestand staat geen enkele kleurcode.
   Doorzichtigheid via color-mix(), nooit een losse kleurfunctie.
   ========================================================================== */

/* Hier stonden vier @font-face-blokken voor de oude huisletters. Ze zijn weg:
   de letter komt nu uit merk.css als --font-kop (Matt) en --font-tekst
   (Figtree). Zie de aantekening onderaan dit bestand. */

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; font-family: var(--font-tekst); font-size: var(--maat-l);
  line-height: var(--regel);
  color: var(--tekst);                 /* 10,67:1 op --kaart */
  background: var(--grond);
}

/* --------------------------------------------------------------------------
   1. DE ACHTERGROND
   De twee zwevende kleurvlekken horen bij een luchtig scherm, niet bij een
   instellingenscherm. Ze blijven staan, ze schreeuwen alleen niet meer — net
   als op het dashboard. Radiale verlopen kunnen geen var() met alfa dragen,
   dus de doorzichtigheid zit in color-mix.
   -------------------------------------------------------------------------- */
.page-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pblob { position: absolute; border-radius: 50%; filter: blur(100px); }
.pblob--1 {
  width: 620px; height: 620px; top: -10%; left: -8%; opacity: .06; background: radial-gradient(circle,
  color-mix(in srgb, var(--merk) 90%, transparent),
  color-mix(in srgb, var(--merk) 0%, transparent) 68%);
}
.pblob--2 {
  width: 680px; height: 680px; top: 40%; right: -14%; opacity: .05; background: radial-gradient(circle,
  color-mix(in srgb, var(--merk-diep) 90%, transparent),
  color-mix(in srgb, var(--merk-diep) 0%, transparent) 70%);
}

.page {
  /* Links uitgelijnd met dezelfde marge als de kandidatenpagina (Sem, 21-09-2026). */
  position: relative; z-index: 1; max-width: 880px; margin: 0;
  padding: var(--ruimte-6) var(--ruimte-7) var(--ruimte-8);
}

/* --------------------------------------------------------------------------
   2. TERUGLINK EN PAGINAKOP
   -------------------------------------------------------------------------- */
.back {
  display: inline-flex; align-items: center; gap: var(--ruimte-2);
  min-height: 24px;                    /* raakvlak-eis */
  color: var(--tekst-zacht);           /* 4,73:1 op --grond */
  text-decoration: none; font-weight: 600; font-size: var(--maat-m); margin-bottom: var(--ruimte-5);
  border-radius: var(--rond-veld);
}
.back:hover { color: var(--link); }     /* 4,58:1 op --grond */
.back svg { width: 17px; height: 17px; }

.head { display: flex; align-items: center; gap: var(--ruimte-3); margin-bottom: var(--ruimte-2); }
.head .hic {
  width: 44px; height: 44px; flex: none; border-radius: var(--rond-tegel);
  display: flex; align-items: center; justify-content: center; background: var(--merk-vlak);
  color: var(--actie);                 /* 13,81:1 op --merk-vlak */
}
.head .hic svg { width: 22px; height: 22px; }
.head h1 {
  font-family: var(--font-kop); font-weight: 500; font-size: var(--kop-l);
  line-height: var(--regel-dicht); color: var(--tekst-sterk); margin: 0;
}
.sub { color: var(--tekst-zacht); margin: 0 0 var(--ruimte-5); font-size: var(--maat-l); }

/* --------------------------------------------------------------------------
   3. HET PANEEL
   De kaart draagt zijn binnenmarge zelf; de kopbalk trekt zich met een
   negatieve marge naar de randen toe. overflow:hidden knipt de vierkante
   hoeken van die balk weg, zodat hij de ronding van het paneel volgt.

   De balk hangt aan `> h2:first-child`. Dat is met opzet zo smal: op de
   inlog- en uitnodigingspagina's staat er een merkregel vóór de h2, en daar
   hoort midden in de kaart geen band te beginnen. Die koppen krijgen alleen
   de typografie.
   -------------------------------------------------------------------------- */
.card {
  position: relative; z-index: 1; background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--rond-kaart); padding: var(--ruimte-5); box-shadow: var(--schaduw-1);
  margin-bottom: var(--ruimte-5); overflow: hidden;
}

.card h2 {
  font-family: var(--font-kop); font-weight: 500; font-size: var(--maat-xl);
  line-height: var(--regel-dicht); letter-spacing: 0;
  color: var(--tekst-sterk);           /* 15,36:1 op --kaart */
  margin: 0 0 var(--ruimte-2);
}

/* De kopbalk zelf. */
.card > h2:first-child {
  margin: calc(-1 * var(--ruimte-5)) calc(-1 * var(--ruimte-5)) var(--ruimte-5);
  padding: var(--ruimte-3) var(--ruimte-5); min-height: 48px; display: flex; align-items: center;
  gap: var(--ruimte-2); background: var(--merk-vlak); border-bottom: 1px solid var(--lijn);
  color: var(--tekst-sterk);           /* 13,81:1 op --merk-vlak */
}

.card .desc {
  color: var(--tekst-zacht);           /* 4,86:1 op --kaart */
  font-size: var(--maat-m); line-height: var(--regel); margin: 0 0 var(--ruimte-4);
}

/* Een uitklapbaar paneel (de interne kaarten op de Meta-pagina). De summary
   is de kopbalk; hij moet net zo bedienbaar zijn als een knop. */
/* Dezelfde band, maar als los element — voor panelen waar de kop niet het
   eerste kind is maar in een rij staat met een icoon, een merkje of een
   beschrijving. Alleen een opmaakhaakje; er hangt geen JavaScript aan. */
.card > .kopbalk {
  margin: calc(-1 * var(--ruimte-5)) calc(-1 * var(--ruimte-5)) var(--ruimte-5);
  padding: var(--ruimte-3) var(--ruimte-5); min-height: 48px; background: var(--merk-vlak);
  border-bottom: 1px solid var(--lijn);
}
.card > .kopbalk h2 { margin: 0; }
/* Op de band is de ondergrond --merk-vlak; --tekst-zacht haalt daar maar
   4,37:1, dus beschrijvende tekst in de band staat op --tekst (9,60:1). */
.card > .kopbalk .desc { color: var(--tekst); margin: var(--ruimte-1) 0 0; }

details.card { padding: var(--ruimte-5); }
details.card > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--ruimte-2);
  margin: calc(-1 * var(--ruimte-5)) calc(-1 * var(--ruimte-5)) 0;
  padding: var(--ruimte-3) var(--ruimte-5); min-height: 48px; background: var(--merk-vlak);
  border-bottom: 1px solid var(--lijn);
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { margin: 0; }
details[open].card > summary { margin-bottom: var(--ruimte-5); }

/* --------------------------------------------------------------------------
   4. VELDEN
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--ruimte-4); }
.field label {
  display: block; font-weight: 700; font-size: var(--maat-m); color: var(--tekst-sterk);
  margin-bottom: var(--ruimte-2);
}
.field .hint {
  color: var(--tekst-zacht);           /* 4,86:1 op --kaart */
  font-size: var(--maat-s); margin-top: var(--ruimte-2); line-height: var(--regel);
}

.inp, .sel {
  width: 100%;
  min-height: 44px;                    /* raakvlak-eis, ruim boven 24 px */
  border: 1px solid var(--lijn-sterk); border-radius: var(--rond-veld);
  padding: var(--ruimte-3) var(--ruimte-4); font-family: inherit; font-size: var(--maat-l);
  color: var(--tekst-sterk); background: var(--kaart); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.inp:focus, .sel:focus { border-color: var(--actie-rand); }
.inp:focus-visible, .sel:focus-visible { border-color: var(--actie-rand); box-shadow: var(--focus); }
.inp[disabled], .sel[disabled] { background: var(--vlak); color: var(--tekst-zacht); }

/* Het pijltje van een keuzelijst was een SVG in een data-URI met een
   ingebakken kleurcode; in zo'n URI kan geen var() staan. Het wordt nu met
   twee verlopen getekend, in currentColor — dus in --tekst-sterk (15,36:1,
   ruim boven de 3:1 die een grafisch element nodig heeft). */
.sel {
  appearance: none; background-image: linear-gradient(45deg,  transparent 50%, currentColor 50%),
  linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 14px center; background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat; padding-right: var(--ruimte-7);
}

/* --------------------------------------------------------------------------
   5. KNOPPEN
   -------------------------------------------------------------------------- */
.btn {
  border: 1px solid transparent; border-radius: var(--rond-knop); font-family: inherit;
  font-weight: 700; font-size: var(--maat-m); cursor: pointer;
  min-height: 44px;                    /* raakvlak-eis */
  padding: var(--ruimte-3) var(--ruimte-5); display: inline-flex; align-items: center;
  justify-content: center; gap: var(--ruimte-2); text-decoration: none;
  transition: background-color .14s, border-color .14s, color .14s;
}
.btn svg { width: 17px; height: 17px; }

.btn--primary { background: var(--actie); color: var(--actie-tekst); }   /* 15,36:1 */
.btn--primary:hover { background: var(--actie-hover); }                  /* 11,89:1 */
.btn--primary[disabled] { opacity: .55; cursor: default; }

.btn--ghost { background: var(--kaart); color: var(--tekst-sterk); border-color: var(--lijn-sterk); }
.btn--ghost:hover { background: var(--vlak); border-color: var(--actie-rand); }

.btn--danger {
  background: var(--kaart);
  color: var(--fout);                  /* 6,54:1 op --kaart */
  border-color: color-mix(in srgb, var(--fout) 40%, var(--lijn));
}
.btn--danger:hover { background: var(--fout); color: var(--actie-tekst); border-color: var(--fout); } /* 6,54:1 */
.btn--danger[disabled] { opacity: .55; cursor: default; }

/* --------------------------------------------------------------------------
   6. MERKJES
   Alle vier krijgen een vlak met een donkere letter. --merk-accent is hier
   ondergrond en nooit letterkleur; dat is de spaarzame markering.
   -------------------------------------------------------------------------- */
.badge {
  display: inline-block; font-size: var(--maat-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-radius: var(--rond-chip); padding: var(--ruimte-1) var(--ruimte-3);
}
.badge--soon { color: var(--let-op); background: var(--accent-vlak); }          /* 6,95:1 */
.badge--on { color: var(--merk-diep); background: var(--merk-accent); }         /* 10,00:1 */
.badge--connected {
  display: inline-flex; align-items: center; gap: var(--ruimte-1);
  color: var(--gelukt); background: var(--gelukt-vlak);                         /* 5,25:1 */
}
.badge--connected svg { width: 11px; height: 11px; }
.badge--altijd { color: var(--actie); background: var(--merk-vlak); }           /* 13,81:1 */

/* --------------------------------------------------------------------------
   7. MELDINGSBLOKKEN
   -------------------------------------------------------------------------- */
.note, .warn, .ok {
  display: flex; gap: var(--ruimte-3); align-items: flex-start; border-radius: var(--rond-tegel);
  padding: var(--ruimte-4); font-size: var(--maat-m); line-height: var(--regel);
}
.note svg, .warn svg, .ok svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }

.note {
  background: var(--merk-vlak); border: 1px solid color-mix(in srgb, var(--merk) 30%, var(--merk-vlak));
  color: var(--tekst);                 /* 9,60:1 op --merk-vlak */
}
.note svg { color: var(--actie); }
.note b { color: var(--tekst-sterk); }

.warn {
  background: var(--accent-vlak);
  border: 1px solid color-mix(in srgb, var(--let-op) 25%, var(--accent-vlak));
  color: var(--let-op);                /* 6,95:1 op --accent-vlak */
}
.warn svg { color: var(--let-op); }

.ok {
  background: color-mix(in srgb, var(--gelukt) 10%, var(--kaart));
  border: 1px solid color-mix(in srgb, var(--gelukt) 25%, var(--kaart));
  color: var(--gelukt);                /* 5,42:1 op dat vlak */
}
.ok svg { color: var(--gelukt); }

/* --------------------------------------------------------------------------
   8. RIJEN IN EEN PANEEL
   Een lijst binnen een paneel loopt van rand tot rand: de haarlijnen zijn de
   scheiding, niet de witruimte. Daarom trekt .rows zich naar de zijkanten en
   dragen de rijen zelf de zijmarge terug. Een losse .rowi buiten .rows houdt
   gewoon de marge van de kaart aan.
   -------------------------------------------------------------------------- */
.rows { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--ruimte-5)); }
.rowi {
  display: flex; align-items: center; gap: var(--ruimte-4); min-height: 56px;
  padding: var(--ruimte-3) 0; border-bottom: 1px solid var(--lijn);
}
.rows > .rowi { padding-left: var(--ruimte-5); padding-right: var(--ruimte-5); }
.rowi:last-child { border-bottom: none; }
.rowi .tt { flex: 1; min-width: 0; }
.rowi .tt b { display: block; font-size: var(--maat-l); color: var(--tekst-sterk); }
.rowi .tt span {
  display: block;
  color: var(--tekst-zacht);           /* 4,86:1 op --kaart */
  font-size: var(--maat-s); margin-top: 2px; line-height: var(--regel);
}

.grp {
  font-weight: 700; font-size: var(--maat-s); letter-spacing: .05em; text-transform: uppercase;
  color: var(--tekst-zacht);           /* 4,86:1 op --kaart */
  margin: var(--ruimte-5) 0 var(--ruimte-1);
}
.grp:first-child { margin-top: 0; }

.rowlink {
  display: flex; align-items: center; gap: var(--ruimte-3); min-height: 56px;
  padding: var(--ruimte-3) var(--ruimte-4); border: 1px solid var(--lijn);
  border-radius: var(--rond-tegel); margin-bottom: var(--ruimte-3); text-decoration: none;
  color: inherit; background: var(--kaart); cursor: pointer; width: 100%; font-family: inherit;
  text-align: left; transition: background-color .13s, border-color .13s;
}
.rowlink:hover { border-color: var(--actie-rand); background: var(--vlak); }
.rowlink .ric {
  width: 38px; height: 38px; flex: none; border-radius: var(--rond-veld);
  display: flex; align-items: center; justify-content: center; background: var(--merk-vlak);
  color: var(--actie);                 /* 13,81:1 op --merk-vlak */
}
.rowlink .ric svg { width: 19px; height: 19px; }
.rowlink .tt { flex: 1; min-width: 0; }
.rowlink .tt b { display: block; font-size: var(--maat-l); color: var(--tekst-sterk); }
.rowlink .tt span { display: block; color: var(--tekst-zacht); font-size: var(--maat-s); margin-top: 2px; }
.rowlink .ext { color: var(--tekst-zacht); display: inline-flex; }
.rowlink .ext svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   9. SCHAKELAAR
   De ring om de schakelaar is geen versiering: een lichtgrijze pil op wit
   haalt 1,5:1 en is als bedieningselement niet te onderscheiden. Met de ring
   in --tekst-zacht staat de rand op 4,86:1.
   -------------------------------------------------------------------------- */
.sw { position: relative; width: 46px; height: 26px; flex: none; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 2; }
.sw .tr {
  position: absolute; inset: 0; border-radius: var(--rond-chip); background: var(--lijn-sterk);
  box-shadow: inset 0 0 0 1px var(--tekst-zacht); transition: background-color .16s, box-shadow .16s;
}
.sw .tr::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--kaart);
  box-shadow: var(--schaduw-1), 0 0 0 1px color-mix(in srgb, var(--tekst-zacht) 45%, transparent);
  transition: left .16s;
}
.sw input:checked + .tr { background: var(--actie); box-shadow: inset 0 0 0 1px var(--actie); }
.sw input:checked + .tr::after { left: 23px; }
.sw input:disabled { cursor: default; }
.sw input:disabled + .tr { opacity: .5; }
.sw input:focus-visible + .tr { box-shadow: inset 0 0 0 1px var(--tekst-zacht), var(--focus); }
.sw input:checked:focus-visible + .tr { box-shadow: inset 0 0 0 1px var(--actie), var(--focus); }

/* --------------------------------------------------------------------------
   10. STATISTIEK-TEGELS
   Getallen in kolommen krijgen tabelcijfers, zodat de eenheden onder elkaar
   staan en je de tegels tegen elkaar kunt aflezen.
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ruimte-4);
  margin-bottom: var(--ruimte-5);
}
.stat {
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond-tegel);
  padding: var(--ruimte-4) var(--ruimte-5); box-shadow: var(--schaduw-1);
}
.stat .lbl {
  display: flex; align-items: center; justify-content: space-between; font-size: var(--maat-s);
  font-weight: 700;
  color: var(--tekst-zacht);           /* 4,86:1 op --kaart */
}
.stat .lbl svg { width: 17px; height: 17px; color: var(--tekst-zacht); }
.stat .val {
  font-family: var(--font-kop); font-weight: 500; font-size: var(--kop-m);
  line-height: var(--regel-dicht); color: var(--tekst-sterk); font-variant-numeric: tabular-nums;
  margin-top: var(--ruimte-2);
}
.stat .sub2 { color: var(--tekst-zacht); font-size: var(--maat-s); margin-top: var(--ruimte-1); }

/* --------------------------------------------------------------------------
   11. KEUZEKAARTEN (Meta-koppeling)
   -------------------------------------------------------------------------- */
.rcard {
  display: block; border: 1px solid var(--lijn-sterk); border-radius: var(--rond-tegel);
  padding: var(--ruimte-4) var(--ruimte-5); margin-bottom: var(--ruimte-3); cursor: pointer;
  background: var(--kaart); transition: border-color .13s, background-color .13s, box-shadow .13s;
}
.rcard:hover { border-color: var(--actie-rand); }
.rcard.sel {
  border-color: var(--actie-rand); background: var(--merk-vlak);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 22%, transparent);
}
.rcard .rhead { display: flex; align-items: center; gap: var(--ruimte-3); }
.rcard .rdot {
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  border: 2px solid var(--tekst-zacht);   /* 4,86:1 — de rand moet leesbaar zijn */
  position: relative; transition: border-color .13s;
}
.rcard.sel .rdot { border-color: var(--actie); }
.rcard.sel .rdot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--actie); }
.rcard .rhead b { font-size: var(--maat-xl); color: var(--tekst-sterk); }
/* Op de gekozen kaart is de ondergrond --merk-vlak; --tekst-zacht haalt daar
   maar 4,37:1, dus de beschrijving staat op --tekst (9,60:1). */
.rcard .rdesc {
  color: var(--tekst); font-size: var(--maat-m); line-height: var(--regel);
  margin: var(--ruimte-2) 0 var(--ruimte-3) 30px;
}
.rcard ul { margin: 0 0 0 30px; padding: 0; list-style: none; }
.rcard li {
  display: flex; gap: var(--ruimte-2); align-items: center; color: var(--tekst);
  font-size: var(--maat-m); padding: 2px 0;
}
.rcard li svg { width: 15px; height: 15px; color: var(--gelukt); flex: none; }

/* --------------------------------------------------------------------------
   12. LOSSE ONDERDELEN
   -------------------------------------------------------------------------- */
.feat {
  display: flex; gap: var(--ruimte-2); align-items: center;
  color: var(--tekst);                 /* 10,67:1 op --kaart */
  font-size: var(--maat-m); padding: var(--ruimte-1) 0;
}
.feat svg { width: 16px; height: 16px; color: var(--gelukt); flex: none; }

/* :not(svg) omdat het kruimelpad op de Meta-paginakiezer een <svg class="sep">
   als chevron gebruikt; zonder deze uitzondering wordt die platgedrukt. */
.sep:not(svg) { height: 1px; background: var(--lijn); margin: var(--ruimte-4) 0; }

/* Staat een scheidingslijn meteen onder de kopbalk, dan is dat een tweede
   streep vlak onder de eerste — de band scheidt daar al. Het element blijft
   staan en houdt zijn ruimte; alleen de lijn zelf vervalt. */
.card > .kopbalk + .sep:not(svg) { background: none; }

.muted-box {
  border: 1px dashed var(--lijn-sterk); border-radius: var(--rond-tegel); padding: var(--ruimte-5);
  text-align: center;
  color: var(--tekst-zacht);           /* 4,86:1 op --kaart */
  font-size: var(--maat-m);
}

.toast {
  position: fixed; bottom: var(--ruimte-5); left: 50%; transform: translateX(-50%) translateY(16px);
  z-index: 99; background: var(--merk-diep);
  color: var(--tekst-op-diep);         /* 15,36:1 */
  border-radius: var(--rond-knop); padding: var(--ruimte-3) var(--ruimte-5); font-size: var(--maat-m);
  font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: var(--schaduw-3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --------------------------------------------------------------------------
   13. BEDIENBAARHEID
   Eén ring voor alles wat je met het toetsenbord kunt bereiken. De schakelaar
   en de velden hierboven zetten hun eigen variant, omdat ze de box-shadow al
   voor iets anders gebruiken.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.rcard:focus-visible,
.rowlink:focus-visible { outline: none; box-shadow: var(--focus); }

/* Brede inhoud schuift in zijn eigen bak; de pagina zelf schuift nooit. */
.card table { width: 100%; }
body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  .page { padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-7); }
  .card { padding: var(--ruimte-4); }
  .card > h2:first-child,
  .card > .kopbalk,
  details.card > summary {
    margin-left: calc(-1 * var(--ruimte-4)); margin-right: calc(-1 * var(--ruimte-4));
    padding-left: var(--ruimte-4); padding-right: var(--ruimte-4);
  }
  .card > h2:first-child,
  .card > .kopbalk { margin-top: calc(-1 * var(--ruimte-4)); }
  details.card > summary { margin-top: calc(-1 * var(--ruimte-4)); }
  .rows { margin-left: calc(-1 * var(--ruimte-4)); margin-right: calc(-1 * var(--ruimte-4)); }
  .rows > .rowi { padding-left: var(--ruimte-4); padding-right: var(--ruimte-4); }
}

/* ==========================================================================
   AANTEKENING BIJ DE VERWIJDERDE @font-face
   De vier @font-face-blokken voor de oude huisletters stonden alleen hier.
   Twee pagina's die dit bestand meeladen roepen de oude kopletter nog aan in
   hun eigen <style> en hebben zelf geen @font-face:

     public/kandidaten.html   regels 36, 39, 100   (.kctx__n, .kctx__cijfer b, .mcard h3)
     public/onboarding.html   regel 25             (.ohead h1)

   Die vier regels vallen nu terug op hun eigen fallback (system-ui). Beide
   pagina's laden merk.css, dus var(--font-kop) ligt er klaar — de omzetting
   hoort in dezelfde ronde te gebeuren. Dit is gemeld, niet vergeten.
   ========================================================================== */