/* ===========================================================================
   FRANCHISEHUB, DE COMPOSITIE VAN /crm

   Alleen deze pagina laadt dit bestand. De basis, de bouwstenen, de kopbalk,
   het menupaneel, de voet, het donkere oppervlak, de vierkantjes-taal en de
   twee slotblokken staan in landing-gedeeld.css en worden VOOR dit bestand
   geladen.

   DE VORM: EEN TRAP
   /matching is een tweeluik en gebruikt breedte als grens. /bewijs is een
   grootboek en gebruikt hoogte als volgorde. /ai-assistent legt een
   horizontale grens dwars door de pagina. Deze pagina is geen van die drie.

   Hier staat een trap. Vijf treden, elk een stap naar rechts en elk met zijn
   bovenrand over de vorige heen, met de latere trede bovenop. Het oog loopt
   omlaag en tegelijk opzij.

   WAAROM DIE VORM EN NIET VIJF TEGELS
   De opdracht noemt vijf onderwerpen die in het product geen vijf
   datamodellen zijn maar een doorlopende werkstroom. Vijf tegels naast elkaar
   zouden precies het omgekeerde zeggen: vijf losse functies, elk met een eigen
   scherm. De overlap zegt wat er echt gebeurt: elke trede begint voordat de
   vorige klaar is. Het bord oordeelt terwijl het dossier nog wordt gevuld en
   de uitgang wordt vastgelegd terwijl er elders al een voordracht ligt.

   DE ZESDE STAP BREEKT ERUIT
   Het portaal is geen trede in de interne keten maar hetzelfde dossier van
   buitenaf. Die sectie stapt daarom terug naar de volle breedte, op het
   donkere oppervlak. Zou hij als zesde trede meelopen, dan leest hij als nog
   een interne stap en dat is hij niet.

   DE INSPRINGING STAAT IN PROCENTEN, NIET IN PIXELS
   Breedte plus inspringing is altijd samen 100% van de container. Met een
   inspringing in pixels wordt het document op een smal venster breder dan het
   scherm. Dat is precies de fout die deze vorm makkelijk maakt.

   VOLGORDE: landing-tokens.css, landing-gedeeld.css, dit bestand.
   =========================================================================== */

/* ---------- De opening ----------
   Titel links, de drie woorden rechts. De rechterkolom is smaller: het zijn
   korte begrippen met een regel uitleg en een brede kolom zou daar drie losse
   woorden per regel van maken. */
.crm-opening{background:var(--wit)}
.crm-opening-spread{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(34px,5vw,90px);align-items:start;
}
.crm-opening .titel-1{margin-top:var(--r5);max-width:14ch}
.crm-opening .lead{margin-top:var(--r6);max-width:48ch}

.crm-opening-zij{padding-top:clamp(0px,2vw,26px)}
/* Haarlijnen tussen de drie woorden in plaats van drie omlijnde blokken. Drie
   begrippen in drie dozen lezen als drie producten en de hele bewering van
   deze sectie is dat het er een is. */
.crm-woorden{margin:var(--r5) 0 0;display:grid;gap:0}
.crm-woord{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:var(--r4);align-items:baseline;
  padding:var(--r5) 0;border-top:1px solid var(--rand);
}
.crm-woord:last-child{border-bottom:1px solid var(--rand)}
.crm-woord dt{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
.crm-woord dd{margin:0;font-size:var(--t-md);line-height:1.6;color:var(--ink-600)}
.crm-opening-slot{margin-top:var(--r5);font-size:var(--t-md);line-height:1.65;color:var(--ink-600);max-width:54ch}

/* ---------- DE TRAP ---------- */
.crm-trap-sectie{background:var(--papier);border-top:1px solid var(--rand)}
.crm-trap-kop{max-width:62ch}
.crm-trap-kop .titel-2{margin-top:var(--r5);max-width:18ch}
.crm-trap-kop .lead{margin-top:var(--r5)}

/* De twee maten die de trap bepalen. Samen altijd 100%: de laatste trede eindigt
   precies op de rechterrand van de container en geen pixel erbuiten. */
.crm-trap{
  --trede-breed:68%;
  --trede-stap:8%;
  --trede-overlap:30px;
  margin-top:clamp(34px,4vw,58px);display:block;
}
.trede{
  position:relative;box-sizing:border-box;
  width:var(--trede-breed);
  background:var(--wit);border:1px solid var(--rand);
  border-radius:var(--rond-lg);
  padding:clamp(24px,3vw,40px);
  /* Extra ruimte onderaan, want de volgende trede legt zijn bovenrand over de
     onderrand van deze heen. Zonder deze marge zou de laatste alinea van een
     trede deels onder de volgende verdwijnen. */
  padding-bottom:calc(clamp(24px,3vw,40px) + var(--trede-overlap));
  box-shadow:var(--schaduw-2);
}
/* Elke volgende trede een stap naar rechts en een stukje omhoog. De latere
   ligt bovenop: dat is wat het als een trede laat lezen in plaats van als twee
   blokken die elkaar toevallig raken. */
.trede:nth-child(1){margin-left:0;z-index:1}
.trede:nth-child(2){margin-left:var(--trede-stap);z-index:2}
.trede:nth-child(3){margin-left:calc(var(--trede-stap) * 2);z-index:3}
.trede:nth-child(4){margin-left:calc(var(--trede-stap) * 3);z-index:4}
.trede:nth-child(5){margin-left:calc(var(--trede-stap) * 4);z-index:5}
.trede + .trede{margin-top:calc(var(--trede-overlap) * -1)}

.trede-kop{display:flex;align-items:baseline;gap:var(--r4);padding-bottom:var(--r4);border-bottom:1px solid var(--rand-zacht)}
/* Het nummer op de basislijn van het label ernaast en niet erboven. Zo leest de
   regel als een trede in een reeks en niet als een kaart met een cijfer in de
   hoek. */
.trede-nr{
  font-family:var(--mono);font-size:var(--t-lg);color:var(--blauw);
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:.02em;
}
.trede-titel{
  margin-top:var(--r5);font-size:var(--t-2xl);font-weight:600;
  color:var(--ink-900);line-height:1.2;letter-spacing:-.02em;max-width:26ch;
}
.trede-tekst{margin-top:var(--r4);font-size:var(--t-md);line-height:1.7;color:var(--ink-600);max-width:74ch}
.trede-slot{margin-top:var(--r5);font-size:var(--t-md);line-height:1.7;color:var(--ink-700);max-width:74ch;font-weight:500}

/* ---------- Trede 01: het nieuwe dossier ----------
   Een definitielijst en geen tabel: er is geen tweede rij om tegen te
   vergelijken, het is een opsomming van wat er in dit ene dossier staat. */
.crm-nieuw{
  margin-top:var(--r6);border:1px solid var(--rand-sterk);border-radius:var(--rond);
  background:var(--papier);padding:var(--r5);
}
.crm-nieuw-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r2) var(--r5)}
.crm-nieuw-kop .mono{color:var(--blauw-diep);font-size:var(--t-sm);letter-spacing:.1em}
.crm-nieuw-bij{font-size:var(--t-xs);color:var(--ink-400)}
.crm-velden{
  margin-top:var(--r4);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(20px,3vw,52px);
}
.crm-veld{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--r3);
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rand);
}
.crm-veld dt{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-400)}
.crm-veld dd{margin:0;font-size:var(--t-md);color:var(--ink-900);line-height:1.5}
/* Een leeg veld krijgt geen streepje en geen nul maar het vakje in de stand
   onbekend, plus het woord erbij. Kleur en vorm dragen hier hetzelfde en de
   tekst draagt het ook, want dit is precies de plek waar leeg nooit als nul
   gelezen mag worden. */
.crm-veld-leeg dd{color:var(--ink-400);font-style:normal}

/* ---------- Trede 02: de weg terug ----------
   Eén regel, geen tabel met een geschiedenis eronder. De bewering is dat het
   met één klik terug kan en een lijst met twintig regels zou daar een archief
   van maken. */
.crm-herstel{margin-top:var(--r6)}
.crm-herstel-regel{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r3);
  padding:var(--r4);border:1px solid var(--blauw-rand);border-radius:var(--rond);
  background:var(--blauw-zacht);
}
.crm-herstel-veld{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--blauw-diep);
}
.crm-herstel-was{font-size:var(--t-md);color:var(--ink-500);text-decoration:line-through}
/* --ink-400 haalde op dit blauwe vlak 4,20 tegen een eis van 4,50. Gemeten op
   de echte DOM en niet op de losse hexwaarde: de eis geldt tegen de
   ondergrond waar het teken werkelijk op staat en dat is hier niet wit. */
.crm-herstel-pijl{color:var(--ink-600)}
.crm-herstel-is{font-size:var(--t-md);font-weight:600;color:var(--ink-900)}
.crm-herstel-wie{font-size:var(--t-xs);color:var(--ink-500)}
/* Ziet eruit als een knop en is er geen: dit is een nagebouwd scherm en geen
   werkend formulier. Daarom geen button en geen cursor die iets belooft. */
.crm-herstel-knop{
  margin-left:auto;padding:7px 14px;border-radius:var(--rond-sm);
  background:var(--wit);border:1px solid var(--blauw-rand);
  font-size:var(--t-sm);font-weight:600;color:var(--blauw-diep);
}

/* ---------- Trede 03: de kaarten met hun stilstandoordeel ----------
   Drie regels onder elkaar en niet drie kolommen van een bord. Het bord staat
   al op de voorpagina; hier gaat het om het OORDEEL per kaart en dat is een
   regel met een reden, geen kolom met een stapel. */
.crm-kaarten{margin-top:var(--r6);display:grid;gap:var(--r2)}
.crm-kaart{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,.9fr) minmax(0,1.5fr) auto;
  gap:var(--r3) var(--r4);align-items:center;
  padding:12px var(--r4);border-radius:var(--rond-sm);
  border:1px solid var(--rand-zacht);background:var(--wit);
}
.crm-kaart-naam{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink-900);letter-spacing:.04em}
.crm-kaart-fase{font-size:var(--t-md);color:var(--ink-600)}
.crm-kaart-reden{font-size:var(--t-md);color:var(--ink-500)}
/* De stand staat er voluit. Kleur is de tweede drager en nooit de eerste:
   zonder het woord zou dit bij kleurenblindheid drie identieke regels zijn en
   juist het verschil tussen loopt en stil is waar deze sectie over gaat. */
.crm-kaart-stand{
  justify-self:end;font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  padding:5px 11px;border-radius:var(--rond-vol);
}
.kaart-loopt{background:var(--papier-mint);border-color:var(--mint-rand)}
.kaart-loopt .crm-kaart-stand{color:var(--mint);background:var(--wit);border:1px solid var(--mint-rand)}
.kaart-letop{background:var(--papier-amber);border-color:var(--amber-rand)}
.kaart-letop .crm-kaart-stand{color:var(--amber);background:var(--wit);border:1px solid var(--amber-rand)}
.kaart-stil{background:var(--roze-zacht);border-color:var(--roze-rand)}
.kaart-stil .crm-kaart-stand{color:var(--roze-diep);background:var(--wit);border:1px solid var(--roze-rand)}

/* ---------- Trede 04: de uitgang ----------
   De vier fasen als chips, de negen redenen als een reeks op één regel. Twee
   verschillende vormen met opzet: een fase is een keuze uit vier en een reden
   een keuze uit negen. Negen chips onder elkaar zouden lezen als een menu
   in plaats van als een woordenlijst. */
.crm-uitgang{margin-top:var(--r6);display:grid;gap:var(--r6)}
.crm-uitgang-blok .mono{color:var(--ink-400)}
.crm-chips{margin-top:var(--r3);display:flex;flex-wrap:wrap;gap:var(--r2)}
.crm-redenen{margin-top:var(--r3);font-size:var(--t-md);color:var(--ink-600);line-height:1.7}

/* ---------- Trede 05: de voordracht ----------
   Een paneel met een rand, want dit IS een besluitformulier en een formulier
   heeft een omtrek. Op de andere reconstructies is dat juist niet zo. */
.crm-voordracht{
  margin-top:var(--r6);border:1px solid var(--rand-sterk);border-radius:var(--rond);
  background:var(--papier);padding:var(--r5);
}
.crm-voordracht-kop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3);justify-content:space-between}
.crm-voordracht-kop .mono{color:var(--ink-900);font-size:var(--t-sm);letter-spacing:.08em}
.crm-voordracht-klasse{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);background:var(--papier-amber);border:1px solid var(--amber-rand);
  padding:5px 11px;border-radius:var(--rond-vol);white-space:nowrap;
}
.crm-voordracht-bij{margin-top:var(--r2);font-size:var(--t-xs);color:var(--ink-500)}
.crm-pleit{margin-top:var(--r5);display:grid;gap:var(--r4)}
.crm-pleit dt{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-400);
}
.crm-pleit dd{margin:var(--r1) 0 0;font-size:var(--t-md);line-height:1.6;color:var(--ink-700);max-width:78ch}
.crm-afwijk{
  margin-top:var(--r5);padding-top:var(--r4);border-top:1px solid var(--rand-sterk);
  display:flex;align-items:center;gap:var(--r3);
  font-size:var(--t-md);font-weight:600;color:var(--ink-900);
}
/* Een leeg vierkantje van 16px en niet het vakje uit de gedeelde taal. Dat
   vocabulaire betekent "een ding waar een oordeel over gaat" en dit is een
   aankruisvakje op een formulier. Dezelfde vorm voor twee betekenissen zou de
   taal breken. */
.crm-afwijk-vak{
  flex:0 0 auto;width:16px;height:16px;border-radius:4px;
  background:var(--wit);border:1.5px solid var(--ink-400);
}

/* ---------- De andere kant: het formuledossier ----------
   Een matrix. Drie formules tegen dezelfde vijf kernpunten, want de bewering
   van deze sectie is dat het huiswerk per formule op de LIJST zichtbaar is en
   niet pas als je hem opent. Zo leest zo'n lijst ook echt. */
.crm-formule{background:var(--wit)}
.crm-formule-kop{max-width:62ch}
.crm-formule-kop .titel-2{margin-top:var(--r5);max-width:20ch}
.crm-formule-kop .lead{margin-top:var(--r5)}
.crm-formule-uitleg{margin-top:var(--r6);font-size:var(--t-md);line-height:1.7;color:var(--ink-600);max-width:84ch}

.crm-matrix{margin-top:clamp(30px,3.6vw,50px)}
/* De kolomkoppen. Dezelfde eerste kolom en dezelfde tussenruimte als in een
   rij, anders staan de koppen niet boven hun eigen cel. */
.crm-matrix-kop{
  display:grid;grid-template-columns:200px repeat(5,minmax(0,1fr));
  gap:0 var(--r2);padding-bottom:var(--r3);
}
.crm-matrix-kop span{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-400);line-height:1.4;
}
.crm-rij{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--r3) var(--r2);
  align-items:center;padding:var(--r5) 0;border-top:1px solid var(--rand-sterk);
}
.crm-rij:last-child{border-bottom:1px solid var(--rand-sterk)}
.crm-rij-naam{display:grid;gap:2px}
.crm-rij-naam .mono{color:var(--ink-900);font-size:var(--t-sm);letter-spacing:.06em}
.crm-rij-sector{font-size:var(--t-md);color:var(--ink-500)}
.crm-punten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--r2)}
.pt{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:38px;padding:6px 8px;border-radius:var(--rond-sm);
  border:1px solid var(--rand);text-align:center;
}
.crm-punt-stand{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.08em;
  text-transform:uppercase;line-height:1.3;
}
.pt-vast{background:var(--papier-mint);border-color:var(--mint-rand)}
.pt-vast .crm-punt-stand{color:var(--mint)}
.pt-open{background:var(--papier-amber);border-color:var(--amber-rand)}
.pt-open .crm-punt-stand{color:var(--amber)}
.pt-tekort{background:var(--roze-zacht);border-color:var(--roze-rand)}
.pt-tekort .crm-punt-stand{color:var(--roze-diep)}
.crm-rij-uit{grid-column:2;font-size:var(--t-md);line-height:1.5;color:var(--ink-600)}
.crm-rij-kan{color:var(--mint);font-weight:600}
.crm-formule-slot{margin-top:clamp(28px,3.4vw,46px);font-size:var(--t-md);line-height:1.7;color:var(--ink-700);max-width:80ch;font-weight:500}

/* ---------- Buiten het gebouw ----------
   Het donkere oppervlak komt uit .band-sectie in de gedeelde laag. Hier staat
   alleen wat van deze sectie is.

   Twee stroken onder elkaar, niet twee kolommen naast elkaar. De kandidaat en
   de franchisegever kijken niet naar elkaar maar allebei naar dezelfde
   werving, ieder door een eigen venster. Naast elkaar zou dat een
   tegenoverstelling zijn en dat is het niet. */
.crm-buiten-kop{max-width:62ch}
.crm-buiten-kop .titel-2{margin-top:var(--r5);max-width:18ch}
.crm-buiten-kop .lead{margin-top:var(--r5)}

.crm-strook{
  margin-top:clamp(34px,4vw,58px);display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}
/* De tweede strook draait om: het venster links, de tekst rechts. Twee keer
   dezelfde kant op zou een sjabloon worden en het zijn twee verschillende
   mensen die kijken. */
.crm-strook-om{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.crm-strook-om .crm-strook-zij{order:2}
.crm-strook-zij .mono{color:var(--band-lila)}
.crm-strook-zin{
  margin-top:var(--r3);font-size:var(--t-2xl);font-weight:600;
  color:#fff;line-height:1.2;letter-spacing:-.02em;
}
.crm-strook-zij p{margin-top:var(--r4);font-size:var(--t-md);line-height:1.7;color:var(--band-zacht);max-width:52ch}
.crm-strook-slot{
  margin-top:clamp(26px,3vw,40px);font-size:var(--t-md);line-height:1.7;
  color:var(--band-zacht);max-width:76ch;
}

/* Het portaal is een WIT vlak op het donkere oppervlak, want dat is wat het
   is: de pagina van de kandidaat in zijn eigen browser en niet een paneel in
   ons product. Alle inkt hierbinnen staat daarom weer op de lichte tokens. */
.crm-portaal{
  background:var(--wit);border-radius:var(--rond-lg);
  padding:clamp(20px,2.6vw,32px);box-shadow:var(--schaduw-3);
}
.crm-portaal-kop{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em;line-height:1.3}
.crm-portaal-fase{margin-top:var(--r2);font-size:var(--t-md);color:var(--ink-500)}
.crm-portaal-afspraak{
  margin-top:var(--r5);display:grid;gap:3px;
  padding:var(--r4);border-radius:var(--rond-sm);background:var(--papier-lila);
}
.crm-portaal-afspraak .mono{color:var(--lila)}
.crm-portaal-afspraak span:last-child{font-size:var(--t-md);font-weight:600;color:var(--ink-900)}
.crm-portaal-formule{margin-top:var(--r5);padding-top:var(--r5);border-top:1px solid var(--rand)}
.crm-portaal-formule-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r3)}
.crm-portaal-formule-kop .mono{color:var(--ink-900);font-size:var(--t-sm);letter-spacing:.06em}
.crm-portaal-formule-kop span:last-child{font-size:var(--t-md);color:var(--ink-500)}
.crm-cijfers{margin-top:var(--r4);display:grid;gap:0}
.crm-cijfers > div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--r3);
  align-items:baseline;padding:8px 0;border-bottom:1px solid var(--rand-zacht);
}
.crm-cijfers dt{font-size:var(--t-md);color:var(--ink-600)}
.crm-cijfers dd{margin:0;font-size:var(--t-md);font-weight:600;color:var(--ink-900);text-align:right}
.crm-portaal-keuze{margin-top:var(--r5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3)}
/* Ziet eruit als twee knoppen en is er geen. Zie de toelichting bij
   .crm-herstel-knop: een nagebouwd scherm belooft geen werkende bediening. */
.crm-keuzeknop{
  padding:9px 16px;border-radius:var(--rond-sm);
  background:var(--wit);border:1px solid var(--rand-sterk);
  font-size:var(--t-md);font-weight:600;color:var(--ink-700);
}
.crm-portaal-bij{font-size:var(--t-xs);color:var(--ink-500)}

/* De franchisegever krijgt géén wit vlak maar een paneel op het donkere
   oppervlak zelf. Dat verschil is inhoudelijk: hij kijkt in ons product mee,
   de kandidaat krijgt een eigen pagina. */
.crm-gever{
  border:1px solid var(--band-rand-sterk);border-radius:var(--rond-lg);
  padding:clamp(20px,2.6vw,32px);
}
.crm-gever-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r2) var(--r5)}
.crm-gever-kop .mono{color:var(--band-lila);font-size:var(--t-sm);letter-spacing:.08em}
.crm-gever-bij{font-size:var(--t-md);color:var(--band-zacht)}
.crm-tellers{
  margin-top:var(--r5);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--r4);
}
.crm-teller{display:grid;gap:var(--r1);padding-top:var(--r4);border-top:1px solid var(--band-rand)}
.crm-teller b{
  font-size:clamp(28px,3.2vw,40px);font-weight:600;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.crm-teller span{font-size:var(--t-xs);color:var(--band-zacht);line-height:1.4}
.crm-gever-noot{margin-top:var(--r5);font-size:var(--t-xs);color:var(--band-zacht)}

/* ---------- De grens ----------
   Vier blokken in twee rijen met een haarlijn erboven. Geen kruisjes: dit is
   geen lijst van wat er mis is maar van wat er bewust buiten blijft. */
.crm-nooit{background:var(--papier);border-top:1px solid var(--rand)}
.crm-nooit-kop{max-width:62ch}
.crm-nooit-kop .titel-2{margin-top:var(--r5);max-width:18ch}
.crm-nooit-kop .lead{margin-top:var(--r5)}
.crm-grenzen{
  margin-top:clamp(30px,3.6vw,50px);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,72px);row-gap:0;
}
.crm-grens{padding:var(--r6) 0;border-top:1px solid var(--rand-sterk)}
.crm-grens-wat{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
.crm-grens p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.7;color:var(--ink-600)}
.crm-nooit-slot{
  margin-top:var(--r6);padding-top:var(--r5);border-top:1px solid var(--rand-sterk);
  font-size:var(--t-md);line-height:1.7;color:var(--ink-700);max-width:76ch;font-weight:500;
}

/* De kolomnaam staat in ELKE cel en wordt op brede schermen alleen visueel
   weggehaald, niet uit de voorleesvolgorde. Met display:none zou een
   schermlezer vijftien losse standen krijgen zonder te weten waar ze bij
   horen. Op een telefoon is de kop boven de matrix er bovendien niet meer. */
.crm-punt-naam{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------------------
   SCHERMBREEDTES

   Alleen die van deze pagina. De kopbalk, het menupaneel en de voet hebben hun
   eigen omslagpunten in landing-gedeeld.css.
   --------------------------------------------------------------------------- */

@media (max-width:1180px){
  /* De trap wordt vlakker. Bij een container van nog geen duizend pixels is
     een trede van 68% zo'n 640 pixels breed en dan wordt een alinea van drie
     regels er zeven. Breder maken en de stap kleiner: de vorm blijft, de
     leesbaarheid wint. */
  .crm-trap{--trede-breed:80%;--trede-stap:5%}
}

@media (max-width:1080px){
  /* De opening en de twee stroken worden een kolom. Twee kolommen van nog geen
     vierhonderd pixels breken de uitleg af tot drie woorden per regel. */
  .crm-opening-spread{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .crm-opening .titel-1{max-width:18ch}
  .crm-opening .lead{max-width:62ch}
  .crm-opening-zij{padding-top:0}
  .crm-strook,.crm-strook-om{grid-template-columns:minmax(0,1fr);gap:var(--r7)}
  /* De omgekeerde strook zet de tekst weer bovenaan. Onder elkaar is de
     leesvolgorde die van de tekst en niet die van het plaatje. */
  .crm-strook-om .crm-strook-zij{order:0}
  .crm-strook-zij p{max-width:66ch}

  /* De kaart wordt drie regels in plaats van vier kolommen. De reden is hier
     de inhoud en die kreeg bij vier kolommen nog tweehonderd pixels. */
  .crm-kaart{grid-template-columns:minmax(0,1fr) auto;gap:var(--r1) var(--r3);align-items:baseline}
  .crm-kaart-naam{grid-column:1;grid-row:1}
  .crm-kaart-stand{grid-column:2;grid-row:1}
  .crm-kaart-fase{grid-column:1 / -1;grid-row:2}
  .crm-kaart-reden{grid-column:1 / -1;grid-row:3}
}

@media (max-width:940px){
  .crm-velden{grid-template-columns:minmax(0,1fr)}
  .crm-grenzen{grid-template-columns:minmax(0,1fr)}
  .crm-grens:last-child{border-bottom:1px solid var(--rand-sterk)}
  .crm-trap{--trede-breed:90%;--trede-stap:2.5%}
}

@media (max-width:860px){
  /* De matrix kantelt. Vijf kolommen van honderd pixels laten van
     Juridische volwassenheid vier regels over en dan is de kop breder dan de
     cel eronder. Elke formule wordt hier een blok met vijf benoemde regels. */
  .crm-matrix-kop{display:none}
  .crm-rij{grid-template-columns:minmax(0,1fr);gap:var(--r4)}
  .crm-punten{grid-template-columns:minmax(0,1fr);gap:var(--r1)}
  .pt{justify-content:space-between;text-align:left;min-height:0;padding:10px 13px;gap:var(--r3)}
  .crm-punt-naam{
    position:static;width:auto;height:auto;margin:0;padding:0;
    overflow:visible;clip:auto;white-space:normal;
    font-size:var(--t-md);color:var(--ink-700);
  }
  .crm-rij-uit{grid-column:1}
}

@media (max-width:760px){
  /* De trap wordt een stapel. Onder deze breedte is er geen ruimte meer voor
     een inspringing die nog iets betekent: een stap van vijftien pixels leest
     als een uitlijnfout en niet als een trede. De nummers dragen de volgorde
     dan alleen. */
  .crm-trap{--trede-breed:100%;--trede-stap:0%;--trede-overlap:0px}
  .trede + .trede{margin-top:var(--r5)}
  .trede{box-shadow:var(--schaduw-1)}
  .crm-tellers{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r5)}
}

@media (max-width:640px){
  /* Naam boven waarde in plaats van ernaast. Naast elkaar houdt de waarde hier
     honderdvijftig pixels over en dan breekt Ondernemerservaring in drie
     regels van een woord. */
  .crm-veld{grid-template-columns:minmax(0,1fr);gap:2px}
  .crm-woord{grid-template-columns:minmax(0,1fr);gap:var(--r2)}
  .crm-cijfers > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .crm-cijfers dd{text-align:left}
  .crm-voordracht-kop{gap:var(--r2)}
  /* De herstelregel wordt twee regels: de wijziging boven, de knop eronder.
     Met margin-left:auto zou de knop op deze breedte alleen zijn ingesprongen
     en dat leest als een fout in plaats van als uitlijning. */
  .crm-herstel-knop{margin-left:0}
}