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

   Alleen de voorpagina laadt dit bestand. Wat hier staat zijn de twaalf
   secties van / en niets anders: de basis, de bouwstenen, de kopbalk, het
   menupaneel, de voet, het donkere oppervlak en de vierkantjes-taal staan in
   landing-gedeeld.css en worden VOOR dit bestand geladen.

   DIE VOLGORDE IS LOAD-BEARING
   landing-tokens.css, dan landing-gedeeld.css, dan dit. Alles hieronder leest
   var(--blauw) en var(--r5) uit het eerste en verfijnt bouwstenen uit het
   tweede (.hero .titel-1, .band-sectie .lead). Een andere volgorde levert
   een pagina zonder kleur op. Of een sectie die zijn eigen verfijning verliest.

   WAAROM DIT EEN EIGEN BESTAND IS
   Tot 02-09-2026 stond dit in landing.css, samen met de gedeelde laag. Dat kon
   zolang er een publieke pagina was. Nu zijn er meer en zou elke bezoeker van
   /matching de opmaak van twaalf secties ophalen die daar niet bestaan.

   HET RITME VAN DEZE PAGINA staat bij .sectie in landing-gedeeld.css
   opgeschreven: vijf soorten moment en vier overgangen, elk precies een keer.
   Wie hier een sectie bijzet, kiest daar eerst een moment uit.

   DE INDELING, in paginavolgorde
     hero, stiltemoment, cijferstrook, platform, matching, bewijs, crm,
     het bord, modules, ai-assistent, marketing, licenties, slot
   En daaronder de schermbreedtes die bij deze secties horen.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   DE SECTIES
   --------------------------------------------------------------------------- */

/* De legenda. Staat één keer op de pagina, onderaan de matchingsectie: daar
   heeft de bezoeker de rasters in de hero en in het matchrapport gezien en is
   de vraag "wat betekenen die blokjes" net opgekomen. Eerder uitleggen is
   uitleg zonder aanleiding.

   Dit is tegelijk het grote moment dat uit vierkantjes is opgebouwd. Er staat
   geen displaytype in en dat is bewust: die schaal is op vier plekken vergeven
   (de hero-score, "één dossier" en de twee stiltemomenten) en een vijfde zou
   de afspraak breken die de andere vier hun gewicht geeft. Hier dragen de
   vormen het moment en niet de letters. */
.legenda{
  margin-top:clamp(46px,5.4vw,84px);
  padding-top:clamp(30px,3.4vw,46px);
  border-top:1px solid var(--rand);
}
.legenda-lead{
  margin-top:var(--r4);max-width:76ch;
  font-size:var(--t-lg);line-height:1.68;color:var(--ink-600);
}
.legenda-lijst{
  margin:clamp(30px,3.6vw,50px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(18px,2.4vw,36px);
}
.legenda-stand{display:grid;gap:var(--r3);align-content:start;min-width:0}
.legenda-naam{font-size:var(--t-md);font-weight:600;color:var(--ink-900)}
.legenda-uitleg{font-size:var(--t-sm);line-height:1.58;color:var(--ink-500)}

/* De scoreschijf. Conic-gradient, dus geen SVG en geen bibliotheek: een ring
   die precies op de genoemde waarde staat en een leesbaar cijfer in het midden.
   De maat komt uit een variabele, want dezelfde schijf staat groot in de hero
   en klein in een tabel. */
.schijf{
  --schijf-maat:96px;
  --schijf-waarde:91%;
  flex:0 0 auto;position:relative;width:var(--schijf-maat);height:var(--schijf-maat);
  border-radius:50%;
  background:conic-gradient(var(--blauw) 0 var(--schijf-waarde), var(--rand) var(--schijf-waarde) 100%);
  display:grid;place-items:center;
}
.schijf::before{content:"";position:absolute;inset:calc(var(--schijf-maat) / 13);border-radius:50%;background:var(--wit)}
.schijf::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed var(--blauw-rand)}
.schijf-getal{
  position:relative;font-family:var(--letter);font-weight:700;color:var(--blauw-diep);
  font-size:calc(var(--schijf-maat) / 4);line-height:1;font-variant-numeric:tabular-nums;
}

/* ---------- Het instrument ----------
   Tot 02-09-2026 stond hier een nagebouwd browservenster: een omlijnde doos met
   een schaduw, een kruimelpad en een zijrail. Dat werkte, maar het las als een
   afbeelding van software en niet als software zelf.

   Wat er is veranderd en waarom:

   - De doos is weg. Geen rand, geen schaduw, geen vlakvulling om het geheel
     heen. Wat overblijft zijn drie lagen die elkaar overlappen: de weging
     bovenin, de score die er onderdoor zakt en de bewijsstrook die naar rechts
     uit de kolom breekt. Diepte komt van de verschuiving tussen die lagen en
     niet van een slagschaduw.
   - De score staat op displayformaat in plaats van als cijfertje in een ring.
     Het is het enige getal in de hero en het mag zich dat aanmeten.
   - De weging is geen opmaak meer maar uitkomst. De 22 competenties en de 26
     eisen staan als gegevens in het script; de vakjes, de telling, de score en
     de blokkade worden daaruit afgeleid. Ze kunnen dus niet uit elkaar lopen,
     wat bij met de hand geplaatste vakjes wel kon en waar niemand achter komt.

   DE EINDTOESTAND STAAT VOLUIT IN DE HTML. Het script zet die aan het begin van
   de doorloop terug naar leeg en bouwt hem opnieuw op. Draait het script niet
   of staat prefers-reduced-motion aan, dan blijft precies staan wat er hoort te
   staan: een volledig rapport in plaats van een half beeld. */
.instrument{position:relative;z-index:2}

/* De modulerail zweeft links buiten het blok in plaats van in een eigen kolom
   met een achtergrond te staan. Hij blijft herkenbaar als de balk uit de CRM,
   maar hij draagt geen doos meer. Onder 1180px verdwijnt hij: daar staat de
   figuur op de volle breedte en zou hij de kantlijn in duwen. */
.mb-rail{
  position:absolute;right:100%;top:2px;margin-right:var(--r5);
  display:grid;gap:5px;justify-items:center;
}
.mb-glyf{
  width:34px;height:28px;border-radius:var(--rond-xs);display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-400);
  border:1px solid transparent;
}
.mb-glyf-aan{background:var(--blauw-zacht);border-color:var(--blauw-rand);color:var(--blauw-diep)}

/* De kop is een haarlijn met twee regels tekst en verder niets. Geen kruimelpad
   met mapjes, want dat was decor. Wat hier staat is wat er wordt vergeleken. */
.mb-kop{
  display:flex;align-items:baseline;gap:var(--r3) var(--r5);flex-wrap:wrap;
  padding-bottom:var(--r3);border-bottom:1px solid var(--rand);
}
.mb-paar{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-700);
}
.mb-paar i{font-style:normal;margin:0 7px;color:var(--ink-400)}
.mb-fase{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-400);white-space:nowrap;
}
.mb-fase-stip{
  width:7px;height:7px;border-radius:50%;background:var(--blauw);flex:0 0 auto;
  box-shadow:0 0 10px var(--blauw);
}
/* Zolang de engine rekent knippert de stip. Zodra het rapport gereed is stopt
   dat: een indicator die blijft knipperen terwijl er niets meer gebeurt liegt. */
.mb-fase[data-bezig] .mb-fase-stip{animation:fhBlink 1s ease-in-out infinite}

/* Drie lanen: kandidaat, score, formule. De verhouding elf tegen dertien is
   dezelfde als in de vakjesrasters zelf, want het verschil tussen 22 en 26 is
   precies wat dit beeld moet laten zien. */
.mb-weging{
  margin-top:var(--r5);display:grid;
  grid-template-columns:minmax(0,11fr) auto minmax(0,13fr);
  gap:clamp(10px,1.4vw,22px);align-items:start;
}
.mb-zijde{min-width:0}
.mb-zijde-kop{display:flex;align-items:baseline;gap:var(--r2)}
.mb-zijde-naam{font-size:var(--t-md);font-weight:600;color:var(--ink-900)}
.mb-zijde-tel{
  margin-left:auto;font-family:var(--mono);font-size:var(--t-2xs);
  color:var(--ink-700);font-variant-numeric:tabular-nums;
}
.mb-zijde .vakjes{margin-top:var(--r3)}

/* De score. Een los getal op displayformaat, geen ring eromheen. De bovenmarge
   laat het onder de koppen van de twee rasters uit zakken en dat is de overlap
   die de lagen uit elkaar houdt zonder dat er een kader nodig is. */
.mb-score{position:relative;padding-top:var(--r5);text-align:center;min-width:0}
.mb-cijfer{
  font-size:var(--t-display);font-weight:600;line-height:.82;letter-spacing:-.05em;
  color:var(--ink-900);font-variant-numeric:tabular-nums;
}
.mb-cijfer-bij{
  margin-top:var(--r3);font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-400);white-space:nowrap;
}
/* Eén haarlijn die volloopt in plaats van een balk met een achtergrondkleur.
   Een score is een positie op een lijn en geen gevuld vat. */
.mb-meter{margin-top:var(--r3);height:2px;background:var(--rand);border-radius:2px;overflow:hidden}
.mb-meter span{
  display:block;height:100%;width:91%;background:var(--blauw);border-radius:2px;
  transition:width var(--duur-lang) var(--soepel);
}

/* De uitleesregel. Wie een vakje aanwijst leest hier welke competentie het is
   en hoe die ervoor staat. Bewust een vaste regel en geen zwevende ballon: een
   ballon bij een vakje van achttien pixels valt half buiten het blok en op een
   aanraakscherm verschijnt hij nooit. De regel is aria-hidden en is verrijking,
   want de betekenis staat voluit in de telling onder elk raster. */
.mb-uitlees{
  margin-top:var(--r3);min-height:19px;line-height:1.6;
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.07em;color:var(--ink-400);
}
.mb-uitlees b{font-weight:400;color:var(--ink-700)}
/* Op een aanraakscherm valt de regel weg. "Wijs een vakje aan" is daar geen
   uitnodiging maar een opdracht die niemand kan uitvoeren. Een dode instructie
   is erger dan geen instructie. */
@media (hover:none){
  .mb-uitlees{display:none}
}

/* De bewijsstrook breekt naar rechts uit de kolom. Dat is de tweede laag: hij
   is breder dan de weging erboven en loopt de kantlijn van de hero in. De
   sectie heeft overflow:hidden, dus hij kan het document nooit breder maken dan
   het venster. Onder 1180px staat de figuur al op de volle breedte en vervalt
   de uitbraak, want daar zou hij wel buiten beeld lopen. */
.mb-bewijs{
  margin-top:var(--r6);display:grid;gap:7px;
  margin-right:clamp(-58px,-3.2vw,0px);
}
/* Een bewijsregel in de hero draagt ook zijn bron. Zonder bron telt een oordeel
   niet mee en dan mag het hier ook niet staan alsof het meetelt. */
.mb-regel{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:3px var(--r3);padding:11px 14px;border-radius:var(--rond-sm);
  border:1px solid var(--rand-zacht);background:var(--wit);
  font-size:var(--t-md);color:var(--ink-700);
  transition:opacity var(--duur) var(--soepel),transform var(--duur) var(--soepel),
             background var(--duur) var(--soepel),border-color var(--duur) var(--soepel);
}
.mb-regel-naam{font-weight:600;color:var(--ink-900)}
.mb-regel-stand{font-family:var(--mono);font-size:var(--t-2xs);white-space:nowrap;text-align:right}
.mb-regel-bron{grid-column:1 / -1;font-size:var(--t-xs);line-height:1.45;color:var(--ink-400)}
.mb-r-vast{background:var(--papier-mint);border-color:var(--mint-rand)}
.mb-r-vast .mb-regel-stand{color:var(--mint)}
.mb-r-open{background:var(--papier-amber);border-color:var(--amber-rand)}
.mb-r-open .mb-regel-stand{color:var(--amber)}
.mb-r-vrij{background:var(--blauw-zacht);border-color:var(--blauw-rand)}
.mb-r-vrij .mb-regel-stand{color:var(--blauw-diep)}
/* Een regel die het script nog niet heeft neergezet wordt onzichtbaar gemaakt
   en NOOIT weggehaald met display:none. Anders springt het blok bij elke regel
   die erbij komt en verschuift de halve hero onder de muis van de bezoeker. */
.mb-regel[data-leeg]{opacity:0;transform:translateY(7px)}

/* De bediening. Dit zijn echte knoppen en geen afbeelding van een knop: ze
   veranderen de toestand van het rapport en de score rekent opnieuw. De oude
   nagemaakte knop kreeg bewust geen hover, juist omdat er niets gebeurde. Die
   afweging draait hier om, want er gebeurt nu werkelijk iets. */
.mb-voet{
  margin-top:var(--r5);padding-top:var(--r4);border-top:1px solid var(--rand);
  display:flex;align-items:center;gap:var(--r4);flex-wrap:wrap;
}
.mb-oordeel{flex:1 1 250px;min-width:0;font-size:var(--t-sm);line-height:1.5;color:var(--ink-600)}
.mb-oordeel b{color:var(--amber);font-weight:700}
.mb-oordeel[data-vrij] b{color:var(--mint)}
.mb-knoppen{display:flex;gap:var(--r2);flex-wrap:wrap}
.mb-noot{margin-top:var(--r4);font-size:var(--t-xs);line-height:1.5;color:var(--ink-400)}

/* ---------- Hero ----------
   Deel 1 zette hier vier zwevende cijferkaartjes boven een organische vlek. Dat
   is precies het beeld dat elke moderne marketingpagina heeft en het laat het
   product niet zien. Nu staat het productvenster zelf in de hero, op ware
   grootte, met de weging erin. De cijfers zijn verhuisd naar de strook eronder,
   waar ze als gegevens leesbaar zijn in plaats van als decoratie zweven. */
/* overflow:hidden hoort bij elke sectie met een vlek of een wolk erin. Die
   steken bewust buiten hun kolom uit en zonder deze regel rekken ze de pagina
   op: het document werd zo drie procent breder dan het venster. `body` heeft
   wel overflow-x:hidden, dus je zág het niet, maar de pagina scrolde er intern
   wel degelijk van. Een koepel (clip-path) helpt hier niet: die snijdt de vorm
   van boven en onder, niet links en rechts. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  padding:clamp(52px,7vh,88px) var(--r-kant) clamp(56px,7vw,92px);
  background:
    radial-gradient(62% 52% at 8% 2%,   var(--blauw-waas) 0%, transparent 62%),
    radial-gradient(56% 48% at 94% 12%, var(--roze-waas) 0%, transparent 64%),
    radial-gradient(70% 60% at 58% 98%, var(--lila-waas) 0%, transparent 62%),
    linear-gradient(180deg,var(--wit) 0%,var(--papier) 76%,var(--papier) 100%);
}
.hero-raster{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-binnen{
  position:relative;z-index:2;width:100%;max-width:var(--breed);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,3.6vw,58px);align-items:center;
}
.hero-pil{
  display:inline-flex;align-items:center;gap:var(--r3);
  padding:7px 15px 7px 11px;border-radius:var(--rond-vol);
  border:1px solid var(--blauw-rand);background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--blauw-diep);
}
.hero-pil-stip{width:7px;height:7px;border-radius:50%;background:var(--blauw);box-shadow:0 0 12px var(--blauw);animation:fhBlink 2.4s ease-in-out infinite}
.hero .titel-1{margin-top:var(--r6);max-width:14ch}
.hero-lead{margin-top:var(--r6);font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--ink-500);max-width:46ch}
.hero-knoppen{margin-top:var(--r7);display:flex;flex-wrap:wrap;gap:var(--r3)}
/* Eén regel onder de knoppen die de bezwaren wegneemt. Bewust geen kaartje: een
   omlijnd vakje zou hier weer een blokje zijn. */
.hero-onder{
  margin-top:var(--r5);display:flex;flex-wrap:wrap;gap:var(--r2) var(--r4);
  font-size:var(--t-sm);color:var(--ink-400);
}
.hero-onder span{display:inline-flex;align-items:center;gap:7px}
.hero-vink{color:var(--mint);font-weight:700}

/* De figuur rechts. De twee zachte vlekken blijven staan en doen hier meer werk
   dan voorheen: nu de doos om het instrument heen weg is, zijn zij de enige
   ondergrond die de open compositie bij elkaar houdt. Ze zijn iets naar buiten
   geschoven zodat ze onder de uitbrekende bewijsstrook door lopen. */
.hero-figuur{position:relative}
.hero-vlek-a{left:-16%;top:-18%;width:64%;aspect-ratio:1/1.06;z-index:0}
.hero-vlek-b{right:-14%;bottom:-18%;width:60%;aspect-ratio:1/1.02;z-index:0}

/* ---------- Stiltemoment ----------
   Een zin op displayformaat en een regel eronder, in een sectie die verder leeg
   is. De verticale ruimte is bewust ongeveer drie keer die van een gewone
   sectie: dat is wat het moment maakt en niet de tekst zelf.

   Twee van deze blokken staan op de pagina en ze zijn met opzet niet gelijk.
   Het eerste is gecentreerd op wit, het tweede links uitgelijnd op papier met
   de rechterhelft leeg. Twee keer dezelfde stilte zou opnieuw een sjabloon
   opleveren. Dat is precies het probleem dat deze wijziging oplost. */
.stil{padding:clamp(96px,13vw,196px) var(--r-kant)}
/* De regelbreedte staat op de ZIN en niet op de omhullende doos. Dat is geen
   detail: ch rekent met de lettergrootte van het element zelf, dus 20ch op een
   doos van 15px is tweehonderd pixels breed en dan breekt een zin van 132px af
   tot een verticale kolom losse letters. Precies dat gebeurde hier bij de
   eerste meting. Op de zin zelf rekent dezelfde 15ch met 132px en klopt hij. */
.stil-binnen{max-width:var(--breed);margin:0 auto}
.stil-midden{background:var(--wit);text-align:center}
.stil-midden .stil-zin{max-width:15ch;margin-left:auto;margin-right:auto}
.stil-midden .stil-onder{max-width:54ch;margin-left:auto;margin-right:auto}
.stil-links{background:var(--papier)}
.stil-links .stil-zin{max-width:15ch}
.stil-links .stil-onder{max-width:46ch}
.stil-zin{
  font-size:var(--t-display);line-height:.92;letter-spacing:-.045em;
  font-weight:600;color:var(--ink-900);text-wrap:balance;
  /* Vangnet. De schaal is zo gekozen dat dit nooit nodig is, maar een woord dat
     toch breder wordt dan zijn kolom hoort af te breken en niet het hele
     document breder te maken dan het venster. */
  overflow-wrap:break-word;
}
.stil-onder{
  margin-top:var(--r8);font-size:var(--t-lg);line-height:1.62;color:var(--ink-500);
}

/* ---------- Cijferstrook ----------
   De vier cijfers uit de oude hero staan hier, op een donkere smalle band. Geen
   kaarten, geen omlijning: alleen haarlijnen tussen de kolommen. Dat is een
   ander soort blok dan alles eromheen en dat is precies de bedoeling. */
.strook{
  background:var(--band);color:var(--band-zacht);position:relative;isolation:isolate;
  overflow:hidden;padding:clamp(26px,3vw,38px) var(--r-kant);
}
/* Hier stond nog een regel die .band-waas op deze strook halveerde. Die waas
   is op 02-09-2026 van de hele pagina verdwenen, dus deze regel selecteerde
   niets meer. Weggehaald: dode opmaak laat een lezer zoeken naar een element
   dat er niet is. De strook draagt nu de kale band en verder niets, wat ook de
   regel is: hoogstens een sfeertechniek per donkere sectie. Deze heeft er geen
   nodig. */
.strook-binnen{max-width:var(--breed);margin:0 auto;position:relative;z-index:1}
.strook-cijfers{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2.4vw,36px);
}
.strook-vak{position:relative;min-width:0;padding-left:clamp(14px,2vw,28px)}
.strook-vak:first-child{padding-left:0}
/* Een haarlijn in plaats van een rand rondom: dit is één blok met vier
   kolommen, geen vier blokjes naast elkaar. */
.strook-vak+.strook-vak::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:linear-gradient(180deg,transparent,var(--band-rand-sterk) 30%,var(--band-rand-sterk) 70%,transparent);
}
.strook-cijfer{
  font-weight:600;color:#fff;font-size:clamp(26px,3vw,40px);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.strook-label{margin-top:var(--r3);font-size:var(--t-md);line-height:1.45;color:var(--band-zacht)}
.strook-branches{
  margin-top:clamp(22px,2.6vw,32px);padding-top:var(--r5);
  border-top:1px solid var(--band-rand);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3) var(--r5);
}
.strook-branches .mono{color:var(--band-zacht)}
.strook-branches-kop{color:#fff}
.strook-deel{color:rgba(255,255,255,.52)}

/* ---------- Platform, een redactionele spread ----------
   Hier stonden drie kaarten met een zegel, een kop, een alinea en een lijstje:
   precies het patroon dat op deze pagina zes keer terugkwam. Nu staat er één
   uitspraak groot links en staan rechts drie ingangen onder elkaar, gescheiden
   door haarlijnen, met hun kenletter in de kantlijn. Geen omlijning, geen
   schaduw, geen kaart. De rust komt van de witruimte en niet van een kader. */
.platform{background:var(--wit)}
.platform-gloed{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(900px,92vw);height:380px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 0%,var(--blauw-waas),transparent 70%);
}
.platform-spread{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(32px,5vw,84px);align-items:start;
}
/* De uitspraak blijft staan terwijl de drie ingangen eronderdoor lopen. Dat is
   niet alleen een aardigheid: de linkerkolom is ruim korter dan de rechter en
   liet anders een gat van driehonderd pixels achter. Alleen boven 1080px, want
   daaronder staan de kolommen onder elkaar en zou vastzetten juist storen. */
@media (min-width:1081px){
  .platform-vast{position:sticky;top:104px}
}
/* Groter dan een gewone kop en kleiner dan de titel van de hero: dit is een
   uitspraak, geen sectietitel. */
.platform-uitspraak{
  margin-top:var(--r5);font-weight:600;color:var(--ink-900);
  font-size:clamp(27px,3.3vw,46px);line-height:1.1;letter-spacing:-.032em;text-wrap:balance;
}
.platform-onder{margin-top:var(--r6);font-size:var(--t-lg);line-height:1.65;color:var(--ink-500);max-width:42ch}
.platform-bron{
  margin-top:var(--r7);padding-top:var(--r5);border-top:1px solid var(--rand);
  font-size:var(--t-md);line-height:1.6;color:var(--ink-400);max-width:40ch;
}

.ingangen{display:grid}
.ingang{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r3) clamp(16px,2.4vw,32px);
  padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--rand);
}
.ingang:first-child{border-top:0;padding-top:0}
.ingang-ken{
  grid-row:1/3;font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;
  color:var(--blauw);padding-top:6px;
}
.ingang-ken-roze{color:var(--roze)}
.ingang-ken-lila{color:var(--lila)}
.ingang-titel{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.ingang-tekst{margin-top:var(--r3);font-size:var(--t-md);line-height:1.65;color:var(--ink-500)}
/* De drie kernpunten staan op één regel, gescheiden door een punt. Als
   opsomming eronder zouden het weer drie lijstjes worden. */
.ingang-punten{margin-top:var(--r4);font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.06em;color:var(--ink-400)}
.ingang .verder{margin-top:var(--r4)}

/* ---------- Matching, het rapport als document ----------
   In de hero staat het SCHERM: vensterbalk, zijrail, een knop. Hier staat het
   RAPPORT: het document dat naar een franchisegever gaat. Dat onderscheid is
   bewust, anders staat hetzelfde beeld twee keer op één pagina. Wat hier te zien
   is zit niet in de hero: sterke punten, aandachtspunten, financiële
   geschiktheid en de aanbevolen vervolgstap. */
/* DE NAADLOZE OVERGANG.
   Hier stond een koepel. Nu loopt wit ongemerkt over in papier: geen lijn, geen
   vorm, geen zichtbaar moment. Dat is bewust de saaiste van de vier overgangen
   op deze pagina, want een overgang die je niet ziet is precies wat een rustig
   deel van de pagina nodig heeft. De verschuiving zit in de bovenste honderd
   pixels van de sectie zelf. */
.matching{
  background:linear-gradient(180deg,var(--wit) 0%,var(--papier) 110px,var(--papier) 100%);
  padding-top:var(--r-sectie);overflow:hidden;
}
.matching-kop{max-width:58ch}
.matching-kop .titel-2{margin-top:var(--r5);max-width:22ch}
.matching-kop .lead{margin-top:var(--r5)}
.matching-wolk-a{left:-8%;top:18%;width:44%;aspect-ratio:1/.92}
.matching-wolk-b{right:-8%;top:36%;width:42%;aspect-ratio:1/.95}

/* De baan: vier haltes op één horizontale lijn. Geen kaarten, geen kaders, geen
   genummerde blokjes. De lijn is de bovenrand van elke halte, dus hij loopt
   vanzelf door en hoeft niet apart te worden getekend. */
.baan{
  position:relative;z-index:1;margin-top:clamp(30px,4vw,50px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.baan-halte{position:relative;padding:var(--r6) clamp(14px,2vw,28px) 0 0;border-top:1px solid var(--rand-sterk)}
.baan-stip{
  position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--blauw);box-shadow:0 0 0 4px var(--papier);
}
.baan-stip-lila{background:var(--lila)}
.baan-stip-roze{background:var(--roze)}
.baan-stip-mint{background:var(--mint)}
.baan-nr{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;color:var(--ink-400);font-variant-numeric:tabular-nums}
.baan-titel{margin-top:var(--r3);font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.015em}
.baan-tekst{margin-top:var(--r2);font-size:var(--t-md);line-height:1.6;color:var(--ink-400)}

/* Het blad. Een document en geen paneel: een gekleurde kaplijn bovenaan, een
   regel met herkomst en datum en pas daaronder de inhoud. */
.blad{
  position:relative;z-index:2;margin-top:clamp(34px,4.4vw,60px);
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--rond-lg);
  box-shadow:var(--schaduw-4);overflow:hidden;
}
.blad-kap{height:4px;background:linear-gradient(90deg,var(--blauw),var(--lila) 54%,var(--roze))}
.blad-kop{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r5);
  padding:var(--r5) clamp(20px,2.6vw,36px);border-bottom:1px solid var(--rand-zacht);
}
.blad-klaar{margin-left:auto;font-family:var(--mono);font-size:var(--t-2xs);color:var(--mint)}
.blad-titelrij{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,32px);
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.6vw,36px);
}
.blad-partij{min-width:0}
.blad-partij .zijde-naam{margin-top:4px;font-size:var(--t-xl)}
.blad-partij .vakjes{margin-top:var(--r3);max-width:220px}
/* Dertien kolommen in dezelfde breedte als elf levert kleinere vakjes op en
   dan lijkt de formulekant fijner in plaats van breder. 220 x 13/11 = 260. */
.blad-partij .vakjes-26{max-width:260px}
.blad-maal{font-size:var(--t-2xl);color:var(--ink-300);flex:0 0 auto;align-self:center}
.blad-score{margin-left:auto;display:flex;align-items:center;gap:var(--r4);flex:0 0 auto}
.blad-score-tekst{font-size:var(--t-sm);line-height:1.5;color:var(--ink-400);max-width:19ch}

/* Drie vlakken achter elkaar, gescheiden door haarlijnen. Geen drie kaarten met
   een eigen rand en een eigen schaduw: dit is één document. */
.blad-vlakken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rand-zacht)}
.blad-vlak{padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,36px);border-left:1px solid var(--rand-zacht);min-width:0}
.blad-vlak:first-child{border-left:0}
.blad-vlak .mono{color:var(--ink-400)}
.blad-regels{margin-top:var(--r4);display:grid;gap:11px;font-size:var(--t-md);line-height:1.5}
.blad-regels li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-700)}
/* Een vinkje of een streepje in plaats van een bolletje: de stand van een regel
   moet ook zonder kleur te zien zijn. */
.blad-teken{flex:0 0 auto;font-weight:700;line-height:1.5}
.blad-teken-goed{color:var(--mint)}
.blad-teken-open{color:var(--amber)}
.blad-meter{margin-top:var(--r4)}
.blad-meter-baan{height:8px;border-radius:var(--rond-vol);background:var(--rand);overflow:hidden}
.blad-meter-baan span{display:block;height:100%;border-radius:var(--rond-vol);background:var(--mint)}
.blad-meter-tekst{margin-top:var(--r3);font-size:var(--t-md);line-height:1.5;color:var(--ink-700)}

/* Het advies onderaan, in de lila tint die op deze pagina bij de intelligentie
   hoort. De laatste regel is geen opmaakkeuze maar een bouwvoorschrift: werving
   en selectie valt onder de hoogrisicocategorie van de Europese AI-verordening
   en daar beslist altijd een mens. Dat hoort op het rapport zelf te staan. */
.blad-advies{
  border-top:1px solid var(--rand-zacht);background:var(--papier-lila);
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,36px);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r4) var(--r6);
}
.blad-advies-tekst{flex:1 1 340px;min-width:0}
.blad-advies-tekst .mono{color:var(--lila)}
.blad-advies-tekst p{margin-top:var(--r3);font-size:var(--t-lg);line-height:1.5;color:var(--ink-900);font-weight:600;letter-spacing:-.01em}
.blad-mens{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--r3);
  padding:11px 16px;border-radius:var(--rond-vol);background:var(--wit);
  border:1px solid var(--lila-rand);font-size:var(--t-sm);color:var(--ink-700);
}
.blad-mens-stip{width:8px;height:8px;border-radius:50%;background:var(--lila);flex:0 0 auto}

.matching-knoppen{margin-top:clamp(32px,4vw,52px);display:flex;flex-wrap:wrap;gap:var(--r3)}

/* ---------- Bewijs, de score ontleed ----------
   Het vlaggenschip van de pagina. Overal elders staat dát elk oordeel onderbouwd
   is; hier staat de onderbouwing er letterlijk, met de zin waar hij vandaan komt.

   Donker en niet voor de sier. Het maakt van deze sectie een hoofdstuk apart
   en het is de enige plek waar één getal groot in beeld mag staan, juist omdat
   er direct naast staat waar dat getal vandaan komt. Een totaalscore zonder de
   redenen erbij is op deze pagina verboden terrein. */
/* DE BIJNA ZWARTE KAMER.
   De bewijssectie was navy met stippen en gekleurde wolken, precies zoals de
   modules en de voet. Drie keer hetzelfde donker leest als een sjabloon en niet
   als regie. Deze sectie gaat naar bijna zwart en krijgt als enige randlicht:
   een strijklicht langs de boven- en onderrand, alsof het vlak van buitenaf
   wordt aangelicht. Verder niets. Geen stippen, geen wolken, geen korrel.

   Een sfeertechniek per donkere sectie. Per sectie een andere. Dat is de
   regel die deze pagina uit elkaar houdt. */
/* DE HARDE RAND.
   De vierde en laatste overgang op de pagina. Papier stopt hier en bijna zwart
   begint, met een rand van vier pixels over de volle vensterbreedte ertussen.
   Geen ronding, geen verloop, geen vorm die onder de vorige sectie door duikt.
   Dat is precies het tegenovergestelde van de naadloze overgang aan de BOVENkant
   van diezelfde matchingsectie. De twee uitersten staan dus boven en onder een
   en hetzelfde blok, met vijfhonderd pixels ertussen. Wie ze achter elkaar ziet
   merkt dat er iemand aan het stuur zat.

   De lila haalt 5,78 op wit en staat ruim boven de 3,0 die voor een
   betekenisdragende rand geldt; tegen bijna zwart is de verhouding groter nog.
   Hij is hier geen decoratie maar de aankondiging van de donkere kamer. */
.bewijs{
  background:var(--band-diep);color:var(--band-zacht);
  border-top:4px solid var(--lila);
  isolation:isolate;overflow:hidden;
}
.randlicht{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(107,79,206,.30) 0%,transparent 24%),
    linear-gradient(0deg,rgba(52,85,212,.24) 0%,transparent 20%),
    radial-gradient(130% 40% at 50% 0%,rgba(255,255,255,.055),transparent 72%);
}
.bewijs-spread{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,4.4vw,72px);align-items:start;
}
.bewijs .titel-2{color:#fff;max-width:16ch;margin-top:var(--r5)}
.bewijs-lead{margin-top:var(--r5);font-size:var(--t-lg);line-height:1.65;color:var(--band-zacht);max-width:44ch}

/* De score. Groot, maar nooit alleen: de vier posten staan er in dezelfde
   oogopslag naast. */
.bewijs-score{margin-top:clamp(30px,4vw,48px);display:flex;align-items:center;gap:var(--r5)}
.bewijs-getal{
  font-weight:700;color:#fff;line-height:.9;letter-spacing:-.05em;
  /* Was clamp(74px,9vw,132px), even groot als de score in de hero. Sinds de
     hero dat getal op displayformaat draagt is dit de tweede reus op dezelfde
     pagina en verzwakken ze elkaar. Een kopformaat is hier genoeg: het
     onderwerp van deze sectie is het grootboek eronder en niet het cijfer. */
  font-size:var(--t-h1);font-variant-numeric:tabular-nums;
}
.bewijs-getal-bij{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--band-lila);line-height:1.7}
.bewijs-getal-bij b{display:block;font-weight:400;color:rgba(255,255,255,.66)}
.bewijs-waarschuwing{
  margin-top:var(--r6);padding-left:var(--r4);border-left:2px solid var(--band-lila);
  font-size:var(--t-md);line-height:1.65;color:var(--band-zacht);max-width:42ch;
}

/* Het grootboek. Elke post is een oordeel met zijn bron eronder: de letterlijke
   zin, waar hij vandaan komt en wanneer. */
.grootboek{display:grid;gap:var(--r3)}
.post{
  border:1px solid var(--band-rand);border-radius:var(--rond);
  background:rgba(255,255,255,.045);padding:var(--r5);
  transition:opacity var(--duur-lang) var(--soepel),
             transform var(--duur-lang) var(--soepel),
             border-color var(--duur) var(--soepel),
             background var(--duur) var(--soepel);
}
.post-kop{display:flex;align-items:center;gap:var(--r3);flex-wrap:wrap}
.post-naam{font-size:var(--t-lg);font-weight:600;color:#fff;letter-spacing:-.015em}
.post-stand{
  margin-left:auto;font-family:var(--mono);font-size:var(--t-2xs);
  padding:5px 11px;border-radius:var(--rond-vol);white-space:nowrap;
}
.post-vast{background:rgba(143,210,180,.16);color:#8fd2b4;border:1px solid rgba(143,210,180,.34)}
.post-open{background:rgba(236,199,140,.15);color:#ecc78c;border:1px solid rgba(236,199,140,.34)}
.post-vrij{background:rgba(195,189,245,.16);color:var(--band-lila);border:1px solid rgba(195,189,245,.34)}
/* Het citaat is de kern van deze sectie: dit is de zin die iemand echt heeft
   opgeschreven en daar komt het oordeel vandaan. */
.post-citaat{
  margin-top:var(--r4);padding-left:var(--r4);border-left:2px solid var(--band-rand-sterk);
  font-size:var(--t-md);line-height:1.65;color:rgba(255,255,255,.82);
}
.post-bron{
  margin-top:var(--r3);font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.50);
}
/* Dezelfde omkering als elders: standaard staan de posten er gewoon. Pas als
   beweging mag zet het script `data-stil` en lossen ze één voor één op. */
.grootboek[data-stil] .post{opacity:0;transform:translateY(10px)}
.grootboek[data-stil].los .post{opacity:1;transform:none}
.grootboek[data-stil].los .post:nth-child(1){transition-delay:40ms}
.grootboek[data-stil].los .post:nth-child(2){transition-delay:220ms}
.grootboek[data-stil].los .post:nth-child(3){transition-delay:400ms}
.grootboek[data-stil].los .post:nth-child(4){transition-delay:580ms}

.bewijs-model{
  margin-top:clamp(34px,4vw,54px);padding-top:var(--r6);border-top:1px solid var(--band-rand);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,52px);
}
.bewijs-model .mono{color:var(--band-lila)}
.bewijs-model p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.6;color:var(--band-zacht);max-width:46ch}
.bewijs-chips{margin-top:var(--r4);display:flex;flex-wrap:wrap;gap:var(--r2)}
/* Chips op een donkere ondergrond. De lichte varianten uit het palet zijn voor
   wit gemaakt en zouden hier als vlekken oplichten. */
.chip-donker{border-color:var(--band-rand-sterk);background:rgba(255,255,255,.07);color:#fff}
.chip-donker-stil{border-color:var(--band-rand);background:transparent;color:var(--band-zacht)}
.bewijs-knoppen{margin-top:clamp(30px,3.6vw,46px);display:flex;flex-wrap:wrap;gap:var(--r3)}
/* Een randknop op de donkere band. De witte variant zou hier oplichten en de
   aandacht van de gevulde knop wegnemen. */
.knop-rand-licht{background:transparent;border-color:var(--band-rand-sterk);color:#fff}
.knop-rand-licht:active{background:rgba(255,255,255,.10);transform:translateY(0) scale(.985)}
.knop-rand-licht:focus-visible{outline-color:#fff}
@media (hover:hover){
  .knop-rand-licht:hover{background:rgba(255,255,255,.10);border-color:#fff;color:#fff;transform:translateY(-2px)}
}

/* ---------- CRM, een scherm dat echt schakelt ----------
   Hier stonden drie kaarten met een mockup erin. Dat toont drie plaatjes; het
   toont niet dat dit één systeem is waarin je van scherm naar scherm gaat. Nu
   staat er één venster met tabbladen die het ook echt doen. Dat is de enige
   plek op de pagina waar de bezoeker iets kan bedienen en dat is bewust: een
   knop die niets doet is erger dan geen knop. */
/* DE OVERGANG DIE DOOR EEN INTERFACE WORDT GEMAAKT.
   Onder deze sectie begint de donkere modulesectie. In plaats van een vorm of
   een kleurwissel steekt het CRM-venster zelf door die grens heen: de onderste
   strook van het venster ligt op de donkere band.

   Daarvoor moesten drie dingen wijken. Twee daarvan zijn gemeten fouten en
   geen ontwerpkeuzes. De sectie schildert nu boven de volgende (z-index),
   anders verdwijnt het uitstekende deel achter de band. De twee knoppen zijn
   naar de kop verhuisd. En de strook "Verder in hetzelfde dossier" is de voet
   van het venster geworden in plaats van een regel eronder.

   Dat laatste was een echte fout: die strook stond ONDER het venster, dus de
   negatieve ondermarge trok hem eronder in plaats van het venster naar beneden
   te laten steken. Het venster heeft position:relative en schildert dus over
   hem heen; de strook was op de gemeten pagina volledig onzichtbaar. Alleen
   het LAATSTE element van de sectie kan uitsteken. */
.crm{background:var(--wit);position:relative;z-index:2;padding-bottom:0}
.crm-app{margin-bottom:calc(-1 * clamp(56px,7vw,116px))}
.crm-knoppen{margin-top:var(--r7);display:flex;flex-wrap:wrap;gap:var(--r3)}
.crm-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--r6)}
.crm-kop-tekst{flex:1 1 min(100%,58ch)}
.crm-kop .titel-2{margin-top:var(--r5);max-width:24ch}
.crm-kop .lead{margin-top:var(--r5)}
/* Een aanwijzing dat de tabbladen echt werken. Zonder die aanwijzing wordt er
   niet geklikt en is de hele interactie verspild werk. De pijl wijst naar
   beneden, want daar staan ze. */
.crm-hint{
  flex:0 0 auto;display:flex;align-items:center;gap:var(--r3);
  padding:11px 17px;border-radius:var(--rond-vol);
  border:1px dashed var(--blauw-rand);background:var(--blauw-zacht);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--blauw-diep);
}
.crm-hint-pijl{font-size:var(--t-md);line-height:1}
/* HET VENSTER VAN DE CRM-SECTIE.
   Deze chroom stond tot 02-09-2026 bij de bouwstenen, omdat de hero er ook
   een venster had. De hero heeft dat niet meer: daar staat nu een open
   compositie zonder doos. Wat overbleef is dit ene venster. Dan hoort de
   opmaak ervan bij de sectie die het gebruikt en niet in de gedeelde laag.
   Een bouwsteen met één gebruiker is geen bouwsteen.

   Hier is de doos wel de bedoeling. Deze sectie laat de CRM zien zoals hij
   op een scherm staat, met tabbladen die echt werken. Een venster met een
   rand is daar de eerlijke weergave; in de hero was het een omhulsel om iets
   dat zichzelf al genoeg was. */
.app{
  position:relative;border-radius:var(--rond-xl);background:var(--wit);
  border:1px solid var(--rand);box-shadow:var(--schaduw-4);
}
.app-balk{
  display:flex;align-items:center;gap:var(--r3);min-width:0;
  padding:11px var(--r4);border-bottom:1px solid var(--rand-zacht);
  background:linear-gradient(180deg,var(--papier) 0%,var(--wit) 100%);
  border-radius:var(--rond-xl) var(--rond-xl) 0 0;
}
.app-kruimel{
  display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-400);white-space:nowrap;
}
.app-kruimel b{font-weight:400;color:var(--ink-700)}
.app-kruimel-deel{color:var(--ink-400)}
.app-poppetjes{margin-left:auto;display:flex;align-items:center;flex:0 0 auto}
.app-poppetje{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--wit);
  background:var(--blauw-zacht);
}
.app-poppetje+.app-poppetje{margin-left:-7px;background:var(--roze-zacht)}
.crm-app{margin-top:clamp(30px,4vw,50px)}

.tabs{
  display:flex;gap:2px;padding:0 clamp(10px,1.6vw,18px);
  border-bottom:1px solid var(--rand-zacht);background:var(--papier);
  overflow-x:auto;scrollbar-width:none;
}
.tab{
  flex:0 0 auto;padding:14px 17px;border:0;background:transparent;
  font-size:var(--t-md);font-weight:600;color:var(--ink-400);white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color var(--duur-kort) var(--soepel),
             border-color var(--duur-kort) var(--soepel),
             background var(--duur-kort) var(--soepel);
}
.tab[aria-selected="true"]{color:var(--blauw-diep);border-bottom-color:var(--blauw);background:var(--wit)}
.tab:focus-visible{outline:2px solid var(--blauw);outline-offset:-3px;border-radius:var(--rond-xs)}
@media (hover:hover){
  .tab:hover{color:var(--ink-700);background:rgba(255,255,255,.6)}
  .tab[aria-selected="true"]:hover{color:var(--blauw-diep);background:var(--wit)}
}
.tabpaneel{padding:clamp(16px,2.1vw,26px)}
.tabpaneel:focus-visible{outline:2px solid var(--blauw);outline-offset:-4px}
.tabvoet{
  margin-top:var(--r5);padding-top:var(--r4);border-top:1px solid var(--rand-zacht);
  font-size:var(--t-sm);color:var(--ink-400);
}

/* Het bord. De kaarten zijn geen grijze blokjes meer maar echte kaartjes met een
   naam en een score erop: dat is wat een bezoeker in zijn eigen systeem zou zien. */
.pijplijn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fase{border:1px solid var(--rand-zacht);border-radius:var(--rond);background:var(--papier);padding:var(--r3);min-width:0}
.fase-kop{display:flex;align-items:center;justify-content:space-between;gap:var(--r2)}
.fase-telling{color:var(--ink-900);font-variant-numeric:tabular-nums}
.fase-kaarten{margin-top:var(--r3);display:grid;gap:7px}
.fase-kaart{
  border:1px solid var(--rand-zacht);border-left:3px solid var(--blauw);
  border-radius:var(--rond-xs);background:var(--wit);padding:9px 10px;
  display:grid;gap:5px;min-width:0;
}
.fase-kaart-naam{font-size:var(--t-sm);font-weight:600;color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fase-kaart-onder{display:flex;align-items:center;justify-content:space-between;gap:var(--r2);font-family:var(--mono);font-size:10px;color:var(--ink-400)}
.fase-kaart-score{color:var(--blauw-diep);font-variant-numeric:tabular-nums}
.fase-kaart-open{border-left-color:var(--amber)}
.fase-kaart-open .fase-kaart-score{color:var(--amber)}
.fase-kaart-klaar{border-left-color:var(--mint)}
.fase-kaart-klaar .fase-kaart-score{color:var(--mint)}
/* Een lege plek in de kolom: de plaats waar een kaart heen gesleept kan worden.
   Zonder deze stippellijn ziet een kolom met één kaart eruit als een fout. */
.fase-plek{
  height:38px;border-radius:var(--rond-xs);border:1px dashed var(--rand-sterk);
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-400);
}

/* ---------- HET BORD DAT LEEFT ----------
   Een nieuwe lead heeft nog geen score en krijgt er ook geen. Hier stond de
   verleiding om er een 0 of een streepje neer te zetten; allebei liegen. Nul is
   een oordeel dat er niet is en een streepje leest als een fout in de
   gegevens. Er staat dus wat er aan de hand is: nog geen score. Dezelfde regel
   die op het vakje "onbekend" van toepassing is. */
.fase-kaart-score-leeg{color:var(--ink-400);font-variant-numeric:normal}
.fase-kaart-nieuw{border-left-color:var(--lila)}
.fase-kaart[hidden]{display:none}

/* Een kaart die zojuist is verplaatst of binnengekomen. Twee en een halve
   seconde een gekleurde rand en een stip, daarna weer gewoon. Langer laten
   staan zou van elke wijziging een permanent merkteken maken en dan is het
   bord na een dag helemaal gemarkeerd. */
.fase-kaart[data-vers],.competentie[data-vers]{position:relative}
.fase-kaart[data-vers]::after,.competentie[data-vers]::after{
  content:"";position:absolute;top:-3px;right:-3px;
  width:8px;height:8px;border-radius:50%;
  background:var(--lila);box-shadow:0 0 0 2px var(--wit);
}
/* De stip is kleur en de kleur alleen zou hier de enige drager zijn. Daarom
   staat er voor een schermlezer een zin bij, die met het merkteken meekomt en
   er ook weer mee verdwijnt. */
.vers-melding{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Het dossier. */
.dossier{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(16px,2.2vw,28px)}
.dossier-zij{border:1px solid var(--rand-zacht);border-radius:var(--rond);background:var(--papier);padding:var(--r4);min-width:0}
.dossier-naam{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.dossier-chips{margin-top:var(--r3);display:flex;flex-wrap:wrap;gap:6px}
.dossier-zij .vakjes{margin-top:var(--r5)}
.dossier-lijst{display:grid;gap:7px;align-content:start;min-width:0}
.competentie{
  display:grid;grid-template-columns:minmax(0,1fr) 96px auto;align-items:center;gap:var(--r3);
  padding:10px 13px;border:1px solid var(--rand-zacht);border-radius:var(--rond-sm);
  background:var(--wit);font-size:var(--t-md);color:var(--ink-700);
}
.competentie-naam{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.niveau{display:flex;gap:3px}
/* Vijf blokjes in plaats van een balk: een niveau is een geheel getal van één
   tot vijf en een doorlopende balk suggereert een precisie die er niet is. */
.niveau i{flex:1;height:7px;border-radius:2px;background:var(--rand)}
.niveau i.aan{background:var(--blauw)}
.competentie-stand{font-family:var(--mono);font-size:var(--t-2xs);color:var(--mint);white-space:nowrap}
.competentie-open .competentie-stand{color:var(--amber)}
.competentie-open .niveau i.aan{background:var(--amber)}

/* De agenda. Vijf dagen naast elkaar met de blokken erin. */
.week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.dag{border:1px solid var(--rand-zacht);border-radius:var(--rond);background:var(--papier);padding:var(--r3);min-width:0}
.dag-kop{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r2)}
.dag-nr{color:var(--ink-900);font-variant-numeric:tabular-nums}
.dag-vandaag{border-color:var(--blauw-rand);background:var(--blauw-zacht)}
.dag-vandaag .dag-nr{color:var(--blauw-diep)}
.dag-blokken{margin-top:var(--r3);display:grid;gap:6px}
.blok{
  border-radius:var(--rond-xs);padding:8px 9px;font-size:var(--t-xs);line-height:1.35;
  background:var(--wit);border:1px solid var(--rand-zacht);border-left:3px solid var(--blauw);
  color:var(--ink-700);min-width:0;
}
.blok b{display:block;font-family:var(--mono);font-size:10px;font-weight:400;color:var(--ink-400);margin-bottom:2px}
.blok-lila{border-left-color:var(--lila)}
.blok-mint{border-left-color:var(--mint)}
.blok-roze{border-left-color:var(--roze)}
.dag-leeg{margin-top:var(--r3);font-family:var(--mono);font-size:10px;color:var(--ink-300)}
.dag-leeg[hidden]{display:none}
.blok[hidden]{display:none}

/* Wat er verder in zit, als één doorlopende regel in plaats van nog een raster
   met kaartjes. Sinds 02-09-2026 is dit de VOET van het venster en niet meer
   een losse regel eronder: het is het stuk dat door de sectiegrens heen in de
   donkere band steekt. Een tabbladinhoud kan dat niet doen, want die wisselt;
   deze strook staat er altijd en hoort bij het venster als geheel.

   De onderste hoeken volgen de radius van het venster. Zonder die regel steken
   de vierkante hoeken van de voet buiten de afgeronde vensterrand. Juist
   daar is de achtergrond donker, dus dat zou pas echt opvallen. */
.crm-verder{
  padding:clamp(16px,2.1vw,26px);
  border-top:1px solid var(--rand-zacht);
  background:var(--papier);
  border-radius:0 0 var(--rond-xl) var(--rond-xl);
  font-size:var(--t-md);color:var(--ink-500);
}

/* ---------- Acht modules, één dossier ----------
   Tot 02-09-2026 stonden hier acht gelijke kaarten in twee rijen van vier, met
   een balk ertussen. Dat beeld sprak de kop erboven tegen: acht omlijnde dozen
   naast elkaar tonen acht losse dingen, terwijl de hele claim van deze sectie is
   dat het er één is.

   Het is omgedraaid. Het dossier staat in het midden en is het ENIGE oppervlak
   in de sectie. De acht modules zijn labels aan de rand zonder eigen doos, vier
   links en vier rechts, om en om. Elke module hangt met een arm aan het dossier
   op de hoogte van precies de regel die hij erin schrijft. Tijdens de
   doorloop licht die arm op zodra hij aan de beurt is.

   Twee keuzes die het verschil maken:

   - Het dossier is geen kaart. Geen afgeronde hoeken, geen schaduw, geen
     vlakvulling met een rand eromheen. Twee haarlijnen aan de zijkant en een
     verticaal verloop, meer niet. Dat leest als een kolom in een grootboek en
     niet als een tegel tussen tegels.
   - De uitlijning doet het uitleggen. Modulelabel en dossierregel delen dezelfde
     rasterrij, dus de arm kan er per definitie niet naast wijzen. In de oude
     opzet stonden de armen los van de inhoud en zeiden ze niets.

   Zoals bij het instrument in de hero staat de EINDtoestand in de opmaak: alle
   acht regels aanwezig, de teller op acht. Het script haalt ze weg en zet ze
   terug. Zonder script staat het dossier dus vol. */
.modules{padding-top:calc(var(--r-sectie) + var(--r8))}
.mod-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--r6) clamp(24px,4vw,64px);align-items:end}
.mod-kop .lead{max-width:58ch;padding-bottom:var(--r2)}
/* De schaalbreuk. "Acht modules," blijft klein en grijsblauw, "één dossier."
   springt naar de displayschaal. Het verschil tussen die twee regels ís de
   boodschap, dus het mag geen verschil van één stap zijn maar een sprong. */
.mod-titel{
  margin-top:var(--r5);font-size:var(--t-xl);font-weight:400;
  letter-spacing:-.01em;color:var(--band-lila);
}
.mod-titel-groot{
  display:block;margin-top:var(--r1);overflow-wrap:break-word;
  font-size:var(--t-display);line-height:.86;letter-spacing:-.045em;
  font-weight:600;color:#fff;
}

/* ---------- Het dossierveld dat blijft staan terwijl je scrolt ----------
   De sectie beweert dat zestien modules in één dossier schrijven. Tot nu toe
   speelde dat zich af als een filmpje: het veld kwam in beeld, de acht regels
   landden op een vaste klok en daarna was het voorbij. Wie er halverwege langs
   scrolde zag een half dossier en wie terugscrolde zag niets meer gebeuren.

   Nu stuurt de scrollpositie zelf het opbouwen. Het veld blijft staan zolang
   de baan eronder door het venster loopt. Hoe ver je in die baan bent bepaalt
   hoeveel regels er staan. Terugscrollen haalt ze weer weg. Dat is het
   verschil tussen een animatie die je overkomt en een tekening die je zelf uit
   elkaar en weer in elkaar kunt schuiven.

   ALLES HANGT AAN data-vast OP DE SECTIE, EN DAT KENMERK ZET ALLEEN HET SCRIPT.
   Staat het er niet, dan doet geen enkele regel hieronder iets en is de sectie
   tot op de pixel de sectie van ervoor. Het script zet het pas na vier
   controles: geen prefers-reduced-motion, de browser kent overflow:clip, de
   brede weergave is actief en het veld past met marge in het venster. Elk
   geval dat afvalt krijgt daardoor de oude, volledige sectie in plaats van een
   halfbakken vastzetting. Eén kenmerk op één element, want twee schakelaars
   die allebei aan moeten staan is er een te veel om synchroon te houden. */

/* overflow:clip in plaats van het overflow:hidden dat .band-sectie geeft.
   Dit is geen smaakkwestie maar de voorwaarde: een voorouder met
   overflow:hidden is een scrollcontainer. Een vastgezet element meet zich af
   aan de dichtstbijzijnde scrollcontainer. Die van .band-sectie scrolt nooit,
   dus het vastzetten deed daarbinnen aantoonbaar niets. Gemeten: met hidden
   schuift het veld één op één met de pagina mee, met clip blijft het staan.

   clip knipt even hard af als hidden en beschermt de documentbreedte dus even
   goed; het maakt alleen geen scrollcontainer. Daarom staat het hier op
   .modules alleen en blijft .band-sectie zelf ongemoeid voor elke andere
   sectie die die klasse deelt. */
.modules[data-vast]{overflow:clip}

/* De baan is een venster hoog plus de afstand die het veld blijft staan. Die
   afstand komt van het script, want hij hangt af van het aantal regels: acht
   regels horen niet in dezelfde loop geperst te worden als er ooit een negende
   bij komt. */
.modules[data-vast] .ds-reis{height:calc(100vh + var(--ds-loop,0px))}
.modules[data-vast] .ds-reis-vast{
  position:sticky;top:0;height:100vh;
  /* align-content in plaats van flexbox, zodat .ds-veld zijn eigen auto-marges
     en max-width houdt en het rooster erbinnen onaangeroerd blijft. */
  display:grid;align-content:center;
}
/* De bovenmarge van het veld is er om het van de kop erboven te scheiden. Staat
   het veld vast en gecentreerd in het venster, dan is er geen kop meer om
   afstand van te houden en zou die marge de centrering scheeftrekken. */
.modules[data-vast] .ds-veld{margin-top:0}

/* De voortgangsstreep op de onderrand van de dossierkop. Ligt precies op de
   bestaande rand, dus hij voegt geen hoogte toe en het veld verspringt niet op
   het moment dat hij verschijnt. */
.ds-voortgang{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  display:none;overflow:hidden;
}
.modules[data-vast] .ds-voortgang{display:block}
.ds-voortgang-vul{
  display:block;height:100%;transform-origin:0 50%;
  /* De schaal komt van het script als kaal getal tussen 0 en 1. Schalen is
     goedkoper dan breedte zetten: het raakt de indeling niet en blijft dus
     binnen de tekenstap van de browser. */
  transform:scaleX(var(--ds-voort,0));
  background:linear-gradient(90deg,var(--band-lila),#fff);
}

.ds-veld{
  --ds-gap:clamp(14px,2.6vw,44px);
  margin-top:clamp(34px,4.4vw,60px);
  /* Smaller dan de kolom eromheen en gecentreerd. Op volle breedte zwommen de
     labels in tweehonderd pixels leegte aan de buitenkant en dan leest de
     compositie als een raster dat niet vol is geworden in plaats van als een
     bewuste marge. */
  max-width:1140px;margin-left:auto;margin-right:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) minmax(0,1fr);
  column-gap:var(--ds-gap);
}

/* Het oppervlak van het dossier. Een leeg element dat over alle rijen ligt,
   zodat de kolom één doorlopend vlak is terwijl de regels erin nog steeds
   afzonderlijke rasteritems zijn die met hun module uitlijnen. */
.ds-boek{
  grid-column:2;grid-row:1 / -1;
  border-left:1px solid var(--band-rand-sterk);
  border-right:1px solid var(--band-rand-sterk);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
}

.ds-kop{
  grid-column:2;grid-row:1;position:relative;z-index:1;
  display:flex;align-items:baseline;gap:var(--r3);flex-wrap:wrap;
  padding:var(--r4) clamp(14px,1.6vw,22px);
  border-bottom:1px solid var(--band-rand-sterk);
}
.ds-kop-naam{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
}
.ds-teller{
  margin-left:auto;font-family:var(--mono);font-size:var(--t-2xs);
  color:var(--band-lila);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Een regel in het dossier: tijdstip, de module die schreef en wat er is
   vastgelegd. Dat laatste is de kern: een dossier bewaart geen gebeurtenis maar
   een vastlegging. Daarom staat er nooit alleen "bijgewerkt". */
.ds-regel{
  grid-column:2;position:relative;z-index:1;min-width:0;
  /* Verticaal gecentreerd in zijn rij. De rijhoogte wordt bepaald door het
     modulelabel ernaast, dat hoger is; zonder centrering plakt elke regel
     bovenaan een te hoge rij en lijkt het dossier half leeg. */
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--r4) clamp(14px,1.6vw,22px);
  border-top:1px solid var(--band-rand);
  transition:opacity var(--duur) var(--soepel),transform var(--duur) var(--soepel);
}
.ds-regel.ds-r1{border-top:0}
.ds-regel-kop{display:flex;align-items:baseline;gap:var(--r3);flex-wrap:wrap}
.ds-tijd{font-family:var(--mono);font-size:var(--t-2xs);color:var(--band-lila);font-variant-numeric:tabular-nums}
.ds-bron{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:#fff;
}
.ds-wat{margin-top:5px;font-size:var(--t-md);line-height:1.45;color:var(--band-zacht)}
/* Nooit display:none voor een regel die nog moet komen. Dan zou de hele
   compositie bij elke nieuwe regel verspringen en schuift het beeld onder de
   ogen van de bezoeker weg. Hij houdt zijn ruimte en is alleen onzichtbaar. */
.ds-regel[data-leeg]{opacity:0;transform:translateY(8px)}

.ds-voet{
  grid-column:2;position:relative;z-index:1;
  padding:var(--r4) clamp(14px,1.6vw,22px);
  border-top:1px solid var(--band-rand-sterk);
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--band-zacht);
}

/* Een modulelabel. Geen rand, geen achtergrond, geen radius: alleen tekst die
   naar het dossier toe is uitgelijnd. Links rechtsuitgelijnd, rechts links, dus
   beide kanten kijken naar het midden. */
/* Ook het label staat verticaal gecentreerd, want de arm vertrekt op vijftig
   procent hoogte. Staat de tekst bovenaan en de arm in het midden, dan wijst
   de lijn naar niets. */
.ds-mod{
  position:relative;grid-column:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--r4) 0;text-align:right;
}
.ds-mod-rechts{grid-column:3;text-align:left}
.ds-mod-kop{display:flex;align-items:baseline;gap:var(--r3);justify-content:flex-end;flex-wrap:wrap}
.ds-mod-rechts .ds-mod-kop{justify-content:flex-start}
.ds-mod-nr{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;
  color:var(--band-lila);transition:color var(--duur) var(--soepel);
}
.ds-mod-naam{font-size:var(--t-lg);font-weight:600;color:#fff;letter-spacing:-.015em}
/* .ds-mod-punten is op 03-09-2026 verdwenen. Die drie punten per module waren
   dezelfde lijst als op /modules en hoorden daar thuis: daar staan alle zestien
   modules en niet alleen de acht die in dit veld passen. Terug te halen met
   git revert als deze sectie ooit weer een opsomming moet dragen. */

/* De arm en de stip waarmee een module in het dossier schrijft. Pseudo-elementen
   van het label zelf en geen losse lijnen: zo staat een arm altijd op de hoogte
   van zijn eigen regel en kan hij er nooit naast komen als de indeling
   verschuift. Dat ging in de vorige opzet mis. */
.ds-mod::after{
  content:"";position:absolute;top:50%;left:100%;
  width:var(--ds-gap);height:1px;background:var(--band-rand);
  transition:background var(--duur) var(--soepel);
}
.ds-mod::before{
  content:"";position:absolute;top:50%;margin-top:-3px;
  left:calc(100% + var(--ds-gap) - 3px);
  width:6px;height:6px;border-radius:50%;background:var(--band-rand-sterk);
  transition:background var(--duur) var(--soepel),box-shadow var(--duur) var(--soepel);
}
.ds-mod-rechts::after{left:auto;right:100%}
.ds-mod-rechts::before{left:auto;right:calc(100% + var(--ds-gap) - 3px)}
/* Alleen de module die op dit moment schrijft licht op. Een lijn die altijd
   gloeit zegt niets; het gloeien moet betekenen dat er nú iets wordt vastgelegd. */
.ds-mod[data-schrijft]::after{background:linear-gradient(90deg,var(--band-rand),#fff)}
.ds-mod-rechts[data-schrijft]::after{background:linear-gradient(270deg,var(--band-rand),#fff)}
.ds-mod[data-schrijft]::before{background:#fff;box-shadow:0 0 14px rgba(255,255,255,.85)}
.ds-mod[data-schrijft] .ds-mod-nr{color:#fff}

/* De rijen. Rij 1 is de kop van het dossier en rij 10 de voet. Daartussen
   liggen de acht paren van een modulelabel en de regel die het schrijft. Beide
   krijgen dezelfde rij, want die gedeelde hoogte is wat de arm laat kloppen. */
.ds-r1{grid-row:2}
.ds-r2{grid-row:3}
.ds-r3{grid-row:4}
.ds-r4{grid-row:5}
.ds-r5{grid-row:6}
.ds-r6{grid-row:7}
.ds-r7{grid-row:8}
.ds-r8{grid-row:9}
.ds-voet{grid-row:10}

.modules-knoppen{margin-top:clamp(30px,3.6vw,48px);display:flex;flex-wrap:wrap;gap:var(--r3)}
@media (hover:hover){
  .ds-mod:hover::before{background:var(--band-lila);box-shadow:0 0 10px rgba(195,189,245,.7)}
  .ds-mod:hover::after{background:var(--band-lila)}
}

/* ---------- AI-assistent, de werkbank ----------
   Dit was een chatbubbel: een vraag rechts, een antwoord links en verder een
   plaatje van software. Een chatbubbel toont een antwoord en verzwijgt precies
   wat dit product onderscheidt, namelijk dat de assistent bij het dossier kan
   en dat te bewijzen is.

   Nu voert hij zichtbaar een taak uit. Links de stappen die hij zet, rechts het
   antwoord dat eruit komt. Die stappen BLIJVEN staan als het antwoord er is.
   Dat is geen ontwerpgrap: bij een hoogrisicotoepassing hoort te zien te zijn
   waar een uitkomst vandaan komt. Die verantwoording hoort tijdens het
   oordeel te ontstaan en niet erna te worden gereconstrueerd.

   De drie vragen zijn een echte tablist met drie panelen, hetzelfde patroon als
   het CRM-venster hierboven. Elke vraag laat ANDER werk zien, want dat is het
   punt: welke stappen hij zet hangt af van wat er gevraagd wordt.

   Wat de stappen noemen komt uit de negen gereedschappen die de assistent echt
   heeft. Hun technische namen staan hier bewust NIET; op een publieke pagina
   horen geen interne functienamen. Er staat wat hij deed, in gewone taal.

   Dit is ook de enige sectie met een gecentreerde kop. Elke sectie opent hier
   anders en dat is de opdracht. */
.assistent{background:var(--papier);padding-top:calc(var(--r-sectie) + var(--r8))}
.assistent-kop{max-width:62ch;margin:0 auto;text-align:center}
.assistent-kop .etiket{justify-content:center}
.assistent-kop .titel-2{margin-top:var(--r5);max-width:22ch;margin-left:auto;margin-right:auto}
.assistent-kop .lead{margin-top:var(--r5);max-width:54ch;margin-left:auto;margin-right:auto}

.werkbank{max-width:1020px;margin:clamp(32px,4vw,54px) auto 0}
.werkbank-kop{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r4);
  padding-bottom:var(--r4);border-bottom:1px solid var(--rand);
}
.werkbank-live{display:flex;align-items:center;gap:var(--r2);margin-left:auto;font-family:var(--mono);font-size:var(--t-2xs);color:var(--blauw-diep)}
/* De stip knippert alleen terwijl er werk loopt. Een lampje dat altijd knippert
   zegt niets; een lampje dat aangaat als er iets gebeurt is een signaal. */
.werkbank-live-stip{width:6px;height:6px;border-radius:50%;background:var(--rand-sterk);flex:0 0 auto}
.werkbank[data-bezig] .werkbank-live-stip{background:var(--blauw);animation:fhBlink 1.4s ease-in-out infinite}

/* De drie vragen. Echte knoppen met alle vijf de toestanden en niet drie
   suggestiechips: hier kiest de bezoeker wat de assistent gaat doen. Dat is
   naast de hero de enige plek op deze pagina waar hij iets kan aansturen.

   Uitgeschakeld is hier geen sierstand maar een werkende: terwijl een vraag
   loopt staan de andere twee uit. Halverwege omschakelen zou de stappen van de
   ene vraag onder het antwoord van de andere zetten en dan liegt de
   verantwoording. */
.vraagkeuze{margin-top:var(--r5);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r3)}
.vraagknop{
  display:grid;gap:7px;align-content:start;text-align:left;width:100%;min-width:0;
  padding:14px 17px;border-radius:var(--rond);
  border:1px solid var(--rand);background:var(--wit);color:var(--ink-700);
  font-family:inherit;font-size:var(--t-md);line-height:1.45;cursor:pointer;
  transition:border-color var(--duur-kort) var(--soepel),
             background var(--duur-kort) var(--soepel),
             color var(--duur-kort) var(--soepel),
             transform var(--duur-kort) var(--soepel);
}
.vraagknop-nr{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;color:var(--ink-400)}
.vraagknop[aria-selected="true"]{
  border-color:var(--blauw);background:var(--blauw-zacht);color:var(--ink-900);
}
.vraagknop[aria-selected="true"] .vraagknop-nr{color:var(--blauw-diep)}
@media (hover:hover){
  .vraagknop:hover{border-color:var(--rand-sterk);background:var(--papier)}
  .vraagknop[aria-selected="true"]:hover{background:var(--blauw-zacht);border-color:var(--blauw-diep)}
  .vraagknop[disabled]:hover{border-color:var(--rand);background:var(--wit)}
}
.vraagknop:active{transform:translateY(1px)}
.vraagknop:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.vraagknop[disabled]{opacity:.5;cursor:not-allowed}

.werkpaneel{margin-top:clamp(26px,3vw,40px)}
.werkpaneel:focus-visible{outline:2px solid var(--blauw);outline-offset:4px;border-radius:var(--rond)}
.werk-spread{
  margin-top:var(--r5);display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(22px,3vw,46px);align-items:start;
}

/* De stappen. Elke stap is een regel met een merkteken, wat er is gedaan en
   waar dat vandaan kwam. Een stap die nog moet komen is een lege ring; een
   gezette stap is een gevuld vinkje. Vorm en niet alleen kleur, net als bij de
   vierkantjes en om dezelfde reden. */
.stappen-kop{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-400)}
.stappen{margin:var(--r4) 0 0;padding:0;list-style:none;display:grid;gap:var(--r4)}
.stap{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--r3);
  align-items:start;transition:opacity var(--duur) var(--soepel);
}
/* Een stap die nog niet gezet is houdt zijn plek maar is onzichtbaar. Er is
   bewust NIET voor demping met opacity gekozen: tekst op halve dekking haalt
   het vereiste contrast niet, ook niet als het maar twee seconden duurt.
   Onzichtbaar met behoud van ruimte lost allebei op, want de lijst verspringt
   dan ook niet en de uitkomst ernaast danst niet mee. */
.stap[data-leeg]{visibility:hidden}
.stap-merk{
  width:20px;height:20px;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:var(--mint);color:#fff;font-size:11px;line-height:1;
}
.stap-wat{display:block;font-size:var(--t-base);line-height:1.5;color:var(--ink-900)}
.stap-bij{display:block;margin-top:3px;font-size:var(--t-sm);line-height:1.5;color:var(--ink-500)}

/* De uitkomst verschijnt pas als alle stappen gezet zijn. Tot dat moment staat
   er een regel die zegt dat er nog gerekend wordt. Niet een leeg vlak: een leeg
   vlak leest als een fout. */
.zeg-ai[data-wacht]{display:none}
.werk-wacht{
  padding:var(--r6);border-radius:var(--rond);border:1px dashed var(--rand-sterk);
  background:var(--wit);font-size:var(--t-md);color:var(--ink-400);text-align:center;
}
.werk-wacht[hidden]{display:none}

/* De gestelde vraag. Was een bubbel rechts met een afgeknipte hoek. Die hoek
   maakte er een chatvenster van en dat is precies het beeld dat deze sectie
   moest kwijtraken: een chatvenster op een website kan iedereen bouwen. Nu
   staat de vraag als een aangehaalde regel boven het werk, met een streep in de
   accentkleur ervoor. */
.zeg-mens{
  padding:var(--r3) 0 var(--r3) var(--r5);
  border-left:3px solid var(--blauw);
  font-size:var(--t-lg);line-height:1.5;color:var(--ink-900);
}
/* De uitkomst. Ook geen bubbel meer maar een paneel naast de stappen. Het is
   bewust het enige vlak in deze sectie met een schaduw: het antwoord ligt
   boven het werk en niet ernaast. */
.zeg-ai{
  padding:var(--r5) var(--r6);border-radius:var(--rond-lg);
  background:var(--wit);border:1px solid var(--rand);box-shadow:var(--schaduw-2);
  font-size:var(--t-base);line-height:1.65;color:var(--ink-500);
}
.zeg-ai-open{font-size:var(--t-lg);color:var(--ink-700);line-height:1.55}
.scores{margin-top:var(--r5);display:grid;gap:9px}
.score-rij{display:flex;align-items:center;gap:var(--r3)}
.score-naam{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-400);width:92px;flex:0 0 auto}
.score-baan{flex:1;height:7px;border-radius:var(--rond-vol);background:var(--rand);overflow:hidden;min-width:0}
/* De balk loopt van nul naar zijn waarde zodra de uitkomst verschijnt. De
   overgang staat op width en niet op transform: een geschaalde balk zou zijn
   verloop meerekken en dan verschuift de kleur mee met de lengte. */
.score-baan span{
  display:block;height:100%;background:linear-gradient(90deg,var(--blauw),var(--lila));
  transition:width var(--duur-lang) var(--soepel);
}
.score-getal{font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-700);font-variant-numeric:tabular-nums}
.zeg-blokkade{
  margin-top:var(--r5);padding:var(--r4) var(--r5);border-radius:var(--rond-sm);
  background:var(--papier-amber);border:1px solid var(--amber-rand);
  font-size:var(--t-md);line-height:1.55;color:var(--ink-700);
}
.zeg-blokkade b{color:var(--amber);font-weight:700}
.zeg-voet{
  margin-top:var(--r4);padding-top:var(--r4);border-top:1px solid var(--rand-zacht);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2) var(--r4);
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--ink-400);
}

/* De harde grens. Een volle band over de hele breedte in plaats van een kaartje
   in een hoek: dit is de belangrijkste zin van de sectie en het is de enige
   belofte op deze pagina die in code is afgedwongen. */
.grens{
  margin-top:clamp(34px,4vw,54px);
  border-left:3px solid var(--mint);background:var(--papier-mint);
  border-radius:0 var(--rond) var(--rond) 0;
  padding:clamp(22px,2.6vw,32px) clamp(22px,2.8vw,38px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--r4) clamp(24px,4vw,56px);
  align-items:center;
}
.grens-kop{display:flex;align-items:center;gap:var(--r3)}
.grens-stip{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);flex:0 0 auto}
.grens-titel{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.grens p{font-size:var(--t-base);line-height:1.65;color:var(--ink-700)}
.grens p b{color:var(--ink-900)}

.vermogens{margin-top:clamp(28px,3.2vw,44px);font-size:var(--t-md);color:var(--ink-500)}
.assistent-knoppen{margin-top:clamp(28px,3.2vw,44px);display:flex;flex-wrap:wrap;gap:var(--r3)}

/* ---------- Marketing, de lus als hoofdbeeld ----------
   Hier stonden vier kaartjes met een kop en twee regels en daaronder een klein
   diagram. De vier kaartjes zeiden weinig dat het diagram niet al zegt, dus die
   zijn geen kaartjes meer maar vier korte kolommen met een haarlijn ertussen.
   Het diagram is het onderwerp geworden en is echt een LUS: er loopt een
   terugweg onderlangs, want dat is precies waar deze sectie over gaat. */
.marketing{background:var(--wit)}
.marketing-kop{max-width:60ch}
.marketing-kop .titel-2{margin-top:var(--r5);max-width:24ch}
.marketing-kop .lead{margin-top:var(--r5)}

.lus{
  position:relative;margin-top:clamp(34px,4.2vw,56px);
  padding:0 0 clamp(66px,7vw,96px);
}
.lus-rij{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(8px,1.6vw,20px);align-items:center;
}
.lus-knoop{
  padding:clamp(18px,2.2vw,28px);border-radius:var(--rond-lg);
  border:1px solid var(--rand);background:var(--papier);min-width:0;
}
.lus-knoop-aan{border-color:var(--blauw-rand);background:var(--blauw-zacht);box-shadow:var(--schaduw-2)}
.lus-knoop-nr{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;color:var(--ink-400)}
.lus-knoop-titel{margin-top:var(--r2);font-size:var(--t-xl);color:var(--ink-900);font-weight:600;letter-spacing:-.02em}
.lus-knoop-onder{margin-top:var(--r2);font-size:var(--t-md);line-height:1.5;color:var(--ink-400)}
.lus-knoop-aan .lus-knoop-onder{color:var(--blauw-diep)}
.lus-draad{
  position:relative;height:2px;border-radius:2px;min-width:34px;overflow:hidden;
  background:linear-gradient(90deg,rgba(52,85,212,.18),var(--blauw),rgba(107,79,206,.18));
}
.lus-vonk{
  position:absolute;top:-3px;left:0;width:26px;height:8px;border-radius:8px;
  background:var(--blauw);filter:blur(2px);animation:fhFlow 3.4s linear infinite;
}
.lus-vonk-later{animation-delay:1.7s;background:var(--lila)}

/* De terugweg. Een omgekeerde U onderlangs, opgebouwd uit drie randen van één
   element: dat is een echte lus en geen rij met een pijltje eraan. */
.lus-terug{
  position:absolute;left:11%;right:11%;bottom:var(--r5);height:clamp(40px,4.4vw,62px);
  border:1px solid var(--roze-rand);border-top:0;
  border-radius:0 0 var(--rond-xl) var(--rond-xl);
  pointer-events:none;
}
/* De aftakking omhoog aan beide uiteinden, zodat de lus zichtbaar in de knopen
   uitkomt in plaats van in het niets te eindigen. */
.lus-terug::before,.lus-terug::after{
  content:"";position:absolute;bottom:100%;width:1px;height:var(--r6);background:var(--roze-rand);
}
.lus-terug::before{left:-1px}
.lus-terug::after{right:-1px}
.lus-terug-tekst{
  position:absolute;left:50%;bottom:calc(var(--r5) - 11px);transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--r2);white-space:nowrap;
  padding:5px 14px;border-radius:var(--rond-vol);
  background:var(--wit);border:1px solid var(--roze-rand);
  font-family:var(--mono);font-size:var(--t-2xs);color:var(--roze-diep);
}
.lus-terug-stip{width:6px;height:6px;border-radius:50%;background:var(--roze);animation:fhBlink 1.8s ease-in-out infinite;flex:0 0 auto}

/* De vier ondersteunende punten: kolommen met een haarlijn ertussen, geen
   kaarten. Dezelfde inhoud, een kwart van het gewicht op de pagina. */
.marketing-punten{
  margin-top:clamp(30px,3.6vw,48px);padding-top:var(--r6);border-top:1px solid var(--rand);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);
}
.marketing-punt{position:relative;min-width:0;padding-left:clamp(16px,2vw,30px)}
.marketing-punt:first-child{padding-left:0}
.marketing-punt+.marketing-punt::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--rand);
}
.marketing-punt .mono{color:var(--roze)}
.marketing-punt-titel{margin-top:var(--r3);font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.015em}
.marketing-punt p{margin-top:var(--r2);font-size:var(--t-md);line-height:1.6;color:var(--ink-400)}
.marketing-knoppen{margin-top:clamp(30px,3.6vw,46px);display:flex;flex-wrap:wrap;gap:var(--r3)}

/* ---------- Licenties, een ladder in plaats van drie kaarten ----------
   Drie prijskaarten naast elkaar is het meest herkenbare beeld van het hele
   internet. Dit zijn drie treden onder elkaar: naam en prijsvorm links, wat je
   krijgt in het midden, de vervolgstap rechts. Je leest ze van boven naar
   beneden als een ladder in plaats van ze links en rechts te vergelijken en dat
   klopt ook beter: het zijn geen drie pakketten maar drie manieren van
   samenwerken. */
.licenties{background:var(--papier);overflow:hidden}
.licenties-kop{max-width:60ch}
.licenties-kop .titel-2{margin-top:var(--r5);max-width:24ch}
.licenties-kop .lead{margin-top:var(--r5)}
.ladder{position:relative;z-index:1;margin-top:clamp(30px,4vw,50px);display:grid;gap:var(--r4)}
.trede{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr) auto;
  gap:var(--r5) clamp(24px,3.4vw,56px);align-items:center;
  padding:clamp(22px,2.6vw,34px) clamp(22px,2.8vw,38px);
  border:1px solid var(--rand);border-radius:var(--rond-lg);background:var(--wit);
  transition:border-color var(--duur) var(--soepel),box-shadow var(--duur) var(--soepel),
             transform var(--duur) var(--soepel);
}
/* De middelste trede is de aanbevolen keuze en heeft daarom een accentrand aan
   de linkerkant plus een vlag. Geen tweede kleurvlak: de nadruk zit in één
   streep en één etiket, niet in een heel ander uiterlijk. */
.trede-uit{border-color:var(--blauw-rand);border-left:3px solid var(--blauw);box-shadow:var(--schaduw-3)}
.trede-naam{display:flex;flex-wrap:wrap;align-items:center;gap:var(--r3);min-width:0}
.trede-naam h3{font-size:var(--t-2xl);font-weight:600;color:var(--ink-900);letter-spacing:-.025em}
.trede-vorm{margin-top:var(--r3);font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400)}
.trede-vlag{
  padding:5px 11px;border-radius:var(--rond-vol);background:var(--blauw-zacht);
  border:1px solid var(--blauw-rand);font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blauw-diep);
}
.trede-tekst{min-width:0}
.trede-tekst p{font-size:var(--t-base);line-height:1.6;color:var(--ink-500)}
.trede-punten{margin-top:var(--r4);font-size:var(--t-md);color:var(--ink-400)}
.trede-actie{flex:0 0 auto}
/* De rij onder de ladder. Elke sectie met een eigen verdiepingspagina heeft
   zo'n rij; de licentiesectie was de laatste zonder en dat maakte /samenwerken
   een pagina waar alleen de voet naartoe wees. */
.licenties-knoppen{margin-top:clamp(30px,3.6vw,46px);display:flex;flex-wrap:wrap;gap:var(--r3);position:relative;z-index:1}
@media (hover:hover){
  .trede:hover{transform:translateY(-3px);border-color:var(--rand-sterk);box-shadow:var(--schaduw-3)}
  .trede-uit:hover{border-color:var(--blauw-rand);box-shadow:var(--schaduw-4)}
}

/* ---------- Slot ----------
   Licht, niet donker. De bewijssectie en de modules zijn allebei donker en een
   derde donkere sectie zou de pagina laten eindigen zoals hij halverwege al
   klonk. Dit sluitstuk spiegelt de hero: dezelfde ondergrond, dezelfde belofte,
   nu als vraag. */
.slot{
  background:
    radial-gradient(60% 60% at 18% 0%,  var(--blauw-waas) 0%, transparent 62%),
    radial-gradient(56% 56% at 84% 8%,  var(--roze-waas) 0%, transparent 64%),
    linear-gradient(180deg,var(--papier) 0%,var(--wit) 62%);
  overflow:hidden;text-align:center;
}
.slot-binnen{max-width:960px;margin:0 auto}
.slot .titel-1{margin-top:var(--r5);max-width:18ch;margin-left:auto;margin-right:auto}
.slot .etiket{justify-content:center}
.slot .lead{margin:var(--r6) auto 0;max-width:56ch}
.slot-knoppen{margin-top:var(--r7);display:flex;flex-wrap:wrap;gap:var(--r3);justify-content:center}
/* Het zegel: het motief van de pagina nog één keer, klein. Wie hier is
   aangekomen heeft het raster vier keer gezien en herkent het meteen. */
.slot-zegel{
  margin:clamp(34px,4vw,52px) auto 0;max-width:420px;
  padding-top:var(--r6);border-top:1px solid var(--rand);
}
.slot-zegel .vakjes{max-width:260px;margin:0 auto}
.slot-zegel .telling{text-align:center}
.slot-voet{margin-top:var(--r6);font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400)}

/* ---------------------------------------------------------------------------
   5. SCHERMBREEDTES
   --------------------------------------------------------------------------- */

/* MOBIEL IS EEN EIGEN ONTWERP, GEEN GESTAPELDE DESKTOP
   Dat is de opdracht en het verschil zit hieronder. Het productvenster wordt
   niet kleiner gemaakt maar anders ingedeeld: de weging draait van drie kolommen
   naar drie banden onder elkaar, de engine wordt een liggende strook in plaats
   van een staande en de zijrail verdwijnt omdat een navigatiekolom van 58 pixels
   op een telefoon alleen ruimte kost. */

/* De hero staat naast elkaar zolang beide kolommen ademruimte hebben. Het
   productvenster heeft daar meer breedte voor nodig dan de vier kaartjes uit
   deel 1, dus dit omslagpunt ligt hoger dan de 1080 die hier stond. */
@media (max-width:1180px){
  .hero-binnen{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .hero .titel-1{max-width:18ch}
  .hero-lead{max-width:62ch}
  .hero-figuur{max-width:760px}
  .hero-vlek-a,.hero-vlek-b{display:none}
  /* De zwevende modulerail en de uitbraak van de bewijsstrook vervallen
     zodra de figuur de volle breedte pakt. Links is er dan geen ruimte meer
     naast het blok en rechts zou de strook buiten beeld lopen. */
  .mb-rail{display:none}
  .mb-bewijs{margin-right:0}
}

@media (max-width:1080px){
  /* Stappen en uitkomst onder elkaar. Naast elkaar krijgt de uitkomst hier
     kolommen van nog geen driehonderd pixels en breken de scorebalken af tot
     streepjes. De stappen blijven BOVEN de uitkomst staan: eerst wat er is
     gedaan, dan wat eruit kwam, in die volgorde. */
  .werk-spread{grid-template-columns:minmax(0,1fr);gap:var(--r7)}
  .mod-kop{grid-template-columns:minmax(0,1fr)}
  /* Het dossierveld houdt zijn drie lanen tot 900px. Daaronder kantelt het
     naar een verticale lijn; zie het blok verderop. */
  /* De uitspraak en de drie ingangen onder elkaar. De uitspraak houdt zijn
     grote formaat: hij is hier het openingsbeeld van de sectie. */
  .platform-spread{grid-template-columns:minmax(0,1fr);gap:var(--r9)}
  .platform-onder,.platform-bron{max-width:60ch}
  /* De score gaat van rechts naast de twee partijen naar een eigen regel
     eronder: op deze breedte drukt hij de twee rasters anders plat. */
  .bewijs-spread{grid-template-columns:minmax(0,1fr);gap:var(--r9)}
  .bewijs .titel-2,.bewijs-lead,.bewijs-waarschuwing{max-width:62ch}
  .bewijs-score{margin-top:var(--r7)}
}

/* De baan van vier naar twee haltes. Vier kolommen van 200 pixels leveren
   afgebroken woorden op en een procesdiagram dat je moet ontcijferen is geen
   procesdiagram meer. */
@media (max-width:940px){
  /* Vijf kolommen worden er drie en daarna een. Bij vijf kolommen op 900px is
     elke uitleg zo'n 150px breed en breekt "Nog niet gewogen" in drie regels
     van één woord. De vierkantjes blijven op 40px: het punt van deze maat is
     juist dat hij overal even groot is. */
  .legenda-lijst{grid-template-columns:repeat(3,minmax(0,1fr))}
  .baan{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--r7)}
  .blad-vlakken{grid-template-columns:minmax(0,1fr)}
  .blad-vlak{border-left:0;border-top:1px solid var(--rand-zacht)}
  .blad-vlak:first-child{border-top:0}
  .blad-score{margin-left:0;width:100%}
  .marketing-punten{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--r7)}
  .marketing-punt:nth-child(3){padding-left:0}
  .marketing-punt:nth-child(3)::before{display:none}
  .grens{grid-template-columns:minmax(0,1fr);gap:var(--r4)}
  /* De trede wordt twee regels: naam en tekst boven elkaar, knop eronder in de
     volle breedte. Drie kolommen van tweehonderd pixels breken de zinnen af. */
  .trede{grid-template-columns:minmax(0,1fr);gap:var(--r4)}
  .trede-actie .knop{width:100%;justify-content:center}
}

/* De weging draait van drie kolommen naar drie banden. Twee rasters van elf en
   dertien vakjes naast elkaar op een telefoonbreedte levert vakjes van vier
   pixels op: onleesbaar en dan is het weer versiering. */
@media (max-width:760px){
  /* De weging wordt één kolom. Twee rasters van elf en dertien vakjes naast
     elkaar op telefoonbreedte levert vakjes van vier pixels op: onleesbaar. En
     dan is het weer versiering.

     De score verhuist naar onderen en kantelt: het getal links, het bijschrift
     en de meter rechts ernaast. Gestapeld zou hij een halve telefoonhoogte
     innemen en de bewijsstrook onder de vouw duwen. */
  .mb-weging{grid-template-columns:minmax(0,1fr);gap:var(--r6)}
  .mb-score{
    order:3;padding-top:0;text-align:left;
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:var(--r4);align-items:end;
  }
  .mb-cijfer{grid-row:1 / 3;font-size:clamp(56px,17vw,92px)}
  .mb-cijfer-bij{grid-column:2;margin-top:0}
  .mb-meter{grid-column:2;margin-top:var(--r2);align-self:start}
  .strook-cijfers{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r6) var(--r5)}
  .strook-vak:nth-child(3){padding-left:0}
  .strook-vak:nth-child(3)::before{display:none}
  /* De baan wordt een verticale ketting: de lijn loopt niet meer horizontaal
     tussen de haltes maar verticaal ernaast, met de stip op de lijn. Dat is een
     andere tekening, geen gestapelde versie van dezelfde. */
  .baan{grid-template-columns:minmax(0,1fr);row-gap:0}
  .baan-halte{
    border-top:0;border-left:1px solid var(--rand-sterk);
    padding:0 0 var(--r7) var(--r6);
  }
  .baan-halte:last-child{padding-bottom:0;border-left-color:transparent}
  .baan-stip{left:-5px;top:4px}
  .bewijs-model{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  /* De drie vragen onder elkaar. Drie kolommen van tweehonderd pixels breken
     "Kandidaat-8492" af en dan leest de knop als drie losse woorden. */
  .vraagkeuze{grid-template-columns:minmax(0,1fr)}
  .blad-titelrij{gap:var(--r5)}
  .blad-maal{display:none}
  .ingang{grid-template-columns:minmax(0,1fr);gap:var(--r2)}
  .ingang-ken{grid-row:auto}
}

/* Op een telefoon telt elke pixel breedte mee voor de vakjes en die zijn hier
   het onderwerp. Wat wegvalt is alles wat eromheen staat. */
@media (max-width:560px){
  /* Op een telefoon staat het vierkantje naast zijn naam in plaats van erboven.
     Boven elkaar zou vijf keer een blok van veertig pixels met veel lucht
     eromheen opleveren en dan wordt de legenda langer dan de sectie erboven. */
  .legenda-lijst{grid-template-columns:minmax(0,1fr);gap:var(--r6)}
  .legenda-stand{grid-template-columns:40px minmax(0,1fr);column-gap:var(--r4);row-gap:var(--r1)}
  .legenda-stand .vak-groot{grid-row:span 2}
  /* De fase-aanduiding rechts in de kop breekt hier af naar een eigen regel en
     dan staat er een losse status boven een rapport dat nog moet beginnen. */
  .mb-fase{display:none}
  .mb-knoppen{width:100%}
  .mb-knoppen .knop{flex:1 1 0;justify-content:center}
  .hero-knoppen .knop{flex:1 1 100%;justify-content:center}
  /* De pil breekt hier af over twee regels. Met de letterafstand van 0,16em
     eindigt de tweede regel op één woord; krapper spatiëren houdt hem heel. */
  .hero-pil{letter-spacing:.08em;line-height:1.45;padding:8px 13px 8px 11px}
}

/* HET DOSSIERVELD KANTELT.
   Op een telefoon is een dossierkolom van driehonderd pixels met labels aan
   weerszijden onmogelijk: er blijft links en rechts vijftig pixels over en de
   tekening valt uit elkaar. Hier draait hij een kwartslag. De lijn loopt
   verticaal langs de linkerkant, elk modulelabel tapt er zijwaarts op aan en de
   regel die die module schrijft hangt er direct onder, ingesprongen en met een
   eigen vlak. Dat is een andere tekening van dezelfde gedachte en niet dezelfde
   tekening gestapeld.

   De rijindeling van de brede weergave wordt hier expliciet teruggezet naar
   auto. Dat kan zonder !important omdat dit blok verderop in het bestand staat
   en dezelfde specificiteit heeft. */
@media (max-width:900px){
  .ds-veld{
    --ds-arm:33px;
    grid-template-columns:minmax(0,1fr);position:relative;
    padding-left:var(--r8);column-gap:0;
  }
  .ds-veld::before{
    content:"";position:absolute;left:7px;top:12px;bottom:12px;width:1px;
    background:linear-gradient(180deg,transparent,var(--band-rand-sterk) 5%,var(--band-lila) 50%,var(--band-rand-sterk) 95%,transparent);
  }
  /* De doorlopende kolom vervalt; de verticale lijn hierboven neemt zijn rol
     over en elke regel krijgt zijn eigen vlak. */
  .ds-boek{display:none}
  .ds-kop,.ds-voet,.ds-regel,.ds-mod{grid-column:1;grid-row:auto}
  .ds-mod{text-align:left;padding:var(--r5) 0 var(--r2)}
  .ds-mod-kop,.ds-mod-rechts .ds-mod-kop{justify-content:flex-start}
  .ds-mod::after,.ds-mod-rechts::after{left:auto;right:100%;width:var(--ds-arm)}
  .ds-mod::before,.ds-mod-rechts::before{left:auto;right:calc(100% + var(--ds-arm) - 3px)}
  .ds-regel,.ds-regel.ds-r1{
    border-top:0;border-left:1px solid var(--band-rand-sterk);
    background:rgba(255,255,255,.055);
    padding:var(--r3) var(--r4);margin-bottom:var(--r4);
  }
  .ds-kop{border-bottom:0;padding:0 0 var(--r2)}
  .ds-voet{border-top:0;padding:var(--r5) 0 0}
}

@media (max-width:760px){
  .pijplijn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dossier{grid-template-columns:minmax(0,1fr)}
  .week{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* De lus kantelt mee: de drie knopen onder elkaar met de draden verticaal en
     de terugweg langs de linkerkant omhoog. Een liggende lus van driehonderd
     pixels breed is geen diagram meer. */
  .lus{padding:0 0 0 var(--r8)}
  .lus-rij{grid-template-columns:minmax(0,1fr);gap:var(--r3)}
  .lus-draad{height:26px;width:2px;justify-self:start;margin-left:26px;min-width:0}
  .lus-vonk{top:0;left:-3px;width:8px;height:24px;animation:none;opacity:.75}
  .lus-terug{
    left:-1px;right:auto;top:26px;bottom:26px;width:var(--r7);height:auto;
    border:1px solid var(--roze-rand);border-right:0;
    border-radius:var(--rond-lg) 0 0 var(--rond-lg);
  }
  .lus-terug::before,.lus-terug::after{
    bottom:auto;left:100%;width:var(--r5);height:1px;
  }
  .lus-terug::before{top:-1px}
  .lus-terug::after{top:auto;bottom:-1px}
  .lus-terug-tekst{
    left:0;bottom:auto;top:50%;
    transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;
  }
  .marketing-punten{grid-template-columns:minmax(0,1fr);row-gap:var(--r6)}
  .marketing-punt,.marketing-punt:nth-child(3){padding-left:0}
  .marketing-punt+.marketing-punt::before{display:none}
  .marketing-punt+.marketing-punt{padding-top:var(--r6);border-top:1px solid var(--rand)}
  .zeg-mens{font-size:var(--t-base)}
  .zeg-ai-open{font-size:var(--t-base)}
}

/* De pijplijn wordt één kolom in plaats van twee halve. Twee kolommen van
   honderdveertig pixels breken de namen af en een kaart met een afgebroken naam
   toont niet dat dit een werkend bord is. De agenda wordt een dagenlijst. */
@media (max-width:520px){
  .pijplijn{grid-template-columns:minmax(0,1fr)}
  .week{grid-template-columns:minmax(0,1fr)}
  .dag{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--r3);align-items:start}
  .dag-kop{flex-direction:column;align-items:flex-start;gap:0}
  .dag-blokken,.dag-leeg{margin-top:0}
  .competentie{grid-template-columns:minmax(0,1fr) 72px auto;gap:var(--r2)}
  .blad-titelrij{padding-bottom:var(--r5)}
  .slot-knoppen .knop{flex:1 1 100%;justify-content:center}
}