/* Live sinds 22-09-2026: dit is de bron voor de live pagina's.
   public/proef-v7 is de werkplaats voor de volgende ontwerpronde;
   een goedgekeurde ronde wordt hierheen gekopieerd. */
/* ===========================================================================
   FRANCHISEHUB ONTWERP V7, LAAG 2: VORMEN

   Hier staan de bouwstenen die op meerdere pagina's terugkomen: de acht
   kaartsoorten, het lokale beeldkader met zijn figuren, de korrel, de
   documentonderdelen, de statusregels en de accentstrook.

   WAAROM HET BEELDKADER LOKAAL IS
   Versie 6 legde een masker over de hele leesband. Dat sneed een rechthoekig
   gat rond alle tekst en maakte de pagina vlak. Een beeldkader hoort bij een
   voorbeeld: het heeft een eigen lichte achtergrond, een begrensde
   decoratielaag met radius 28 en een lege bovenstrook waarin de compositie te
   zien is. Alleen die decoratielaag wordt begrensd. Tekst, documenten en
   focusringen worden nooit afgeknipt.
   =========================================================================== */

/* ===========================================================================
   1. KAARTEN EN BOXEN
   =========================================================================== */

/* Ingangskaart: witte inhoud met een gekleurde decoratiestrook erboven. De
   titel staat onder de strook op wit, nooit erop. */
.ingang{
  display:flex;flex-direction:column;
  background:var(--wit);
  /* De rand is 2 pixels in de randtint van de eigen familie: strook, rand en
     link uit één familie. Met een grijze rand van 1 pixel was de kaart een
     witte doos met een lint erboven. Afwijking van de bouwinstructie met
     toestemming van de eigenaar op 22-09. */
  border:2px solid var(--rand);
  border-radius:20px;
  overflow:hidden;
}
.ingang-blauw{border-color:var(--blauw-rand)}
.ingang-roze{border-color:var(--roze-rand)}
.ingang-lila{border-color:var(--rand-lila)}
/* De strook is 64 pixels (was 48) en draagt een diagonaal verloop van de
   middentint naar de diepere toon van dezelfde tint. Elke pixel houdt een
   verzadiging van minstens 0,39 en telt dus als sterker gekleurd. Een verloop
   naar een lichte tint zou de strook bleker maken en een verloop naar een
   andere tint wordt in het midden grauw (gemeten, zie ontwerp-basis.css). */
.ingang-strook{
  height:64px;position:relative;overflow:hidden;flex:none;
}
.ingang-strook::after{
  /* Een enkele afgeronde vorm in de strook, zonder pictogram. De vorm is een
     diepere toon van dezelfde kleur en geen wit vlek: een witte vorm haalt de
     kleur juist uit de strook die hem moet dragen. */
  content:'';position:absolute;right:22px;top:10px;width:96px;height:64px;
  border-radius:var(--blob-b);background:var(--strook-vorm);
}
.ingang-strook-blauw{background:linear-gradient(115deg,var(--mid-blauw),var(--mid-blauw-diep));--strook-vorm:rgba(52,85,212,.22)}
.ingang-strook-roze{background:linear-gradient(115deg,var(--mid-roze),var(--mid-roze-diep));--strook-vorm:rgba(194,42,114,.20)}
.ingang-strook-lila{background:linear-gradient(115deg,var(--mid-lila),var(--mid-lila-diep));--strook-vorm:rgba(107,79,206,.20)}
.ingang-lijf{padding:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.ingang-lijf > .verder-rij{margin-top:auto;padding-top:18px}
@media (max-width:599px){ .ingang-lijf{padding:20px} }

/* Werkkaart: wit met een rand van 2 pixels in de tint van de eigen familie, een
   genummerde cirkel en onderaan een eigen strook met de opbrengst.

   WAAROM WIT MET EEN FAMILIERAND EN GEEN PAPIER
   Tot 22-09 was de kaart effen papier (#F7F8FC) met een grijze rand op een wit
   hoofdstuk: gemeten 79 procent puur wit in het hoofdstuk en met het oog wit
   op wit. De eigenaar vroeg om kleurcombinaties. Nu draagt elke kaart drie
   tinten van één familie: de kopstrook in twee middentinten, de cirkel in de
   verzadigde merkkleur en de opbrengst in de lichte tint. Bereiken en Spreken
   zijn blauw, Onderzoeken is lila (onderbouwing) en Begeleiden roze. Dit
   wijkt af van de bouwinstructie (papier, grijze rand) met toestemming van de
   eigenaar op 22-09. Contrast doorgerekend: wit op lila 5,78, wit op roze
   5,43, leestekst op lichtlila 6,01 en op lichtroze 6,08. */
.werkkaart{
  display:flex;flex-direction:column;
  background:var(--wit);
  border:2px solid var(--rand);
  border-radius:20px;
  padding:28px;
}
@media (max-width:599px){ .werkkaart{padding:20px} }
.werkkaart-blauw{border-color:var(--blauw-rand);--nr:var(--blauw);--opbrengst:var(--blauw-licht)}
.werkkaart-lila{border-color:var(--rand-lila);--nr:var(--lila);--opbrengst:var(--lila-licht)}
.werkkaart-roze{border-color:var(--roze-rand);--nr:var(--roze);--opbrengst:var(--roze-licht)}
.werkkaart-nr{
  width:36px;height:36px;border-radius:999px;flex:none;
  background:var(--nr,var(--blauw));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;font-weight:500;
}
.werkkaart-kop{display:flex;align-items:center;gap:14px}
.werkkaart-soort{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--lila-diep)}
.werkkaart h3{margin-top:18px;font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.werkkaart p{margin-top:14px}
.werkkaart-opbrengst{
  margin-top:22px;background:var(--opbrengst,var(--blauw-licht));border-radius:12px;padding:16px;
  font-size:17px;line-height:1.65;color:var(--lees);
}
.werkkaart-opbrengst b{color:var(--inkt)}

/* Uitlegkaart: papierlila met een lila rand. */
.uitlegkaart{
  background:var(--lila-papier);border:1px solid var(--rand-lila);
  border-radius:20px;padding:28px;
}
@media (max-width:599px){ .uitlegkaart{padding:20px} }

/* Ervaringskaart: een brede gevulde kaart met twee tekstkolommen. */
.ervaringskaart{
  background:var(--lila-papier);border:1px solid var(--rand-lila);
  border-radius:20px;padding:32px;
}
@media (max-width:599px){ .ervaringskaart{padding:20px} }

/* Statusvergelijking: mintpapier en amberpapier met hun eigen rand. */
.statuspaneel{border-radius:20px;padding:28px}
@media (max-width:599px){ .statuspaneel{padding:20px} }
.statuspaneel h3{font-size:var(--t-kaart);font-weight:600;line-height:1.25}
.statuspaneel-vast{background:var(--mint-papier);border:1px solid var(--mint-rand)}
.statuspaneel-open{background:var(--amber-papier);border:1px solid var(--amber-rand)}

/* ---- Kopstroken, besluit van de eigenaar op 21-09 ----
   WAAROM ZE ER ZIJN
   Gemeten had de voorpagina 3,6 procent sterker gekleurd vlak tegen een doel
   van 6 tot 10. De eigenaar wilde het iets kleuriger, met meer
   kleurcombinaties, maar licht en niet te donker. De middentinten stonden
   alleen in de openingen en de drie ingangen; nu dragen ook de vier
   werkkaarten en de twee statuspanelen een gekleurde kop.

   Een kopstrook bevat alleen decoratie, net als de strook van een ingang. Er
   staat nooit tekst op en de korrel komt er niet op: die blijft op de drie
   plekken die de reviewer aanwees.

   De strook loopt tot de rand van de kaart door dezelfde ruimte terug te
   nemen die de kaart als binnenruimte heeft. Haar bovenhoeken zijn 19 pixels:
   de kaart heeft radius 20 met een rand van 1. Zo sluit zij zonder naad aan
   en hoeft de kaart zelf niets af te knippen. */
.kopstrook{
  display:block;position:relative;overflow:hidden;flex:none;
  height:48px;border-radius:19px 19px 0 0;
  background:var(--strook-kleur);
}
/* Op een werkkaart is de strook 64 pixels en de bovenhoek 18: de kaart heeft
   radius 20 met een rand van 2. De statuspanelen houden 48 en 19. Niet naar 88
   (dat was een open vraag): dat maakt van een strook een leeg vlak en de
   kleurdoelen worden gehaald met kleur die iets doet. Besluit van de eigenaar
   op 22-09. */
.werkkaart > .kopstrook{height:64px;border-radius:18px 18px 0 0}
/* De werkkaarten krijgen dezelfde ene afgeronde vorm als de ingangen erboven,
   in een diepere toon van hun eigen kleur. Zo lezen de zeven kaarten op de
   voorpagina als één familie. */
.kopstrook-vorm::after{
  content:'';position:absolute;right:22px;top:10px;width:96px;height:64px;
  border-radius:var(--blob-b);background:var(--strook-vorm);
}
/* De kleur volgt de rollen uit de kleurtabel van de reviewer: blauw voor het
   werk zelf, lila voor onderbouwing en roze voor begeleiding. Daardoor krijgen
   Bereiken en Spreken blauw, Onderzoeken lila en Begeleiden roze. */
/* Een diagonaal verloop van de middentint naar de diepere toon van dezelfde
   tint, hetzelfde als op de ingangen. De verzadiging blijft minstens 0,39,
   dus alles telt als sterker gekleurd; een verloop naar een andere tint werd
   in het midden grauw en zakte onder 0,25. */
.kopstrook-blauw{--strook-kleur:linear-gradient(115deg,var(--mid-blauw),var(--mid-blauw-diep));--strook-vorm:rgba(52,85,212,.22)}
.kopstrook-lila{--strook-kleur:linear-gradient(115deg,var(--mid-lila),var(--mid-lila-diep));--strook-vorm:rgba(107,79,206,.20)}
.kopstrook-roze{--strook-kleur:linear-gradient(115deg,var(--mid-roze),var(--mid-roze-diep));--strook-vorm:rgba(194,42,114,.20)}
/* De statuspanelen krijgen de middentint van hun EIGEN statusfamilie (de
   bestaande randkleur) en geen vorm. De reviewer schrijft voor dit blok:
   geen decoratieve roze of lila vorm, de statusteksten dragen de betekenis en
   mint en amber blijven bij bevestigd en open. Een lila of roze strook zou
   die regel breken; een blauwe zou een kleur zonder betekenis in een
   vergelijking zetten. Zie de VRAAG EIGENAAR hierover in NOTITIE.md. */
.kopstrook-mint{--strook-kleur:var(--mint-rand)}
.kopstrook-amber{--strook-kleur:var(--amber-rand)}

.werkkaart > .kopstrook,
.statuspaneel > .kopstrook{margin:-28px -28px 24px}
@media (max-width:599px){
  .werkkaart > .kopstrook,
  .statuspaneel > .kopstrook{margin:-20px -20px 20px}
}

/* Het vergelijkingsvlak op de bewijspagina. Het was papier op een wit
   hoofdstuk: 97 procent wit, het witste hoofdstuk van de drie pagina's, vlak
   voor het slot. Nu wit met een lila rand en een lila kopstrook (lila is de
   kleur van onderbouwing), zodat het bij de kaartfamilie hoort. De kolommen
   Wel en Niet houden gewone inkt en dezelfde achtergrond: geen statuskleur. */
.vergelijkvlak{
  background:var(--wit);border:1px solid var(--rand-lila);
  border-radius:20px;padding:32px;
}
.vergelijkvlak > .kopstrook{margin:-32px -32px 24px}
@media (max-width:599px){
  .vergelijkvlak{padding:20px}
  .vergelijkvlak > .kopstrook{margin:-20px -20px 20px}
}

/* Actievlak: effen lichtblauw, zonder rand en zonder schaduw, met bovenin een
   lege decoratiestrook.

   WAAROM DE STROOK
   Het actievlak is het slot en het enige conversiepunt van elke pagina. Het
   was een effen rechthoek van 1320 bij 220 met 2 procent kleur (alleen de
   knop). De strook krijgt dezelfde bouw als een beeldkader: een begrensde
   decoratielaag waarin het openingsmotief van die pagina in het klein
   terugkeert, met korrel. Kop, alinea en knop blijven op effen lichtblauw
   eronder; de decoratie komt nooit achter tekst. De maten van de figuren
   staan aan het eind van hoofdstuk 3, na de openingsmaten die zij
   overschrijven. */
.actievlak{
  --actie-strook:96px;
  position:relative;
  background:var(--blauw-licht);border-radius:28px;
  padding:calc(40px + var(--actie-strook)) 40px 40px;
}
.actievlak > .rij{position:relative;z-index:2}
.actievlak-decor{
  position:absolute;left:0;right:0;top:0;height:var(--actie-strook);
  border-radius:28px 28px 0 0;overflow:hidden;pointer-events:none;z-index:0;
}
@media (max-width:599px){
  .actievlak{--actie-strook:56px;border-radius:20px;padding:calc(24px + var(--actie-strook)) 24px 24px}
  .actievlak-decor{border-radius:20px 20px 0 0}
}

/* ===========================================================================
   2. DOCUMENTEN
   Het kandidaatverslag en het dossierfragment zijn de twee witte dragers.
   Zij blijven volledig ondoorzichtig, altijd.
   =========================================================================== */

.veld{
  background:var(--wit);border:1px solid var(--rand);
  border-radius:20px;overflow:hidden;position:relative;z-index:2;
}
/* Het kandidaatverslag leest als papier en niet als een kaart: kleinere
   radius, een bestaande schaduw en niets eromheen. */
.veld-verslag{border-radius:10px;box-shadow:var(--schaduw-2)}
.veld-kop{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;padding:14px 24px;background:var(--blauw-licht);
  border-bottom:1px solid var(--rand);
}
.veld-verslag .veld-kop{background:var(--wit)}
.veld-naam{font-weight:600;color:var(--inkt);font-size:15px}
.veld-stand{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--lees)}
.veld-lijf{padding:24px;display:grid;gap:20px}
.veld-lijf-krap{gap:14px}
@media (max-width:599px){
  .veld-kop{padding:12px 16px}
  .veld-lijf{padding:16px}
}
.veld-schaduw{box-shadow:var(--schaduw-2)}

/* Documentinhoud blijft 15 pixels met regelhoogte 1,6. */
.verslag-regel{display:grid;gap:10px}
.verslag-veldnaam{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lila-diep);
}
.verslag-tekst{font-size:15px;line-height:1.6;color:var(--lees)}
.verslag-tekst + .verslag-tekst{margin-top:10px}

.oogopslag{display:grid;gap:8px}
.oogopslag li{
  display:grid;grid-template-columns:180px 1fr;gap:16px;
  font-size:15px;line-height:1.6;
  padding-bottom:8px;border-bottom:1px solid #eceff9;
}
.oogopslag li:last-child{border-bottom:0;padding-bottom:0}
.oogopslag li > span:first-child{color:var(--lees)}
.oogopslag li > span:last-child{color:var(--inkt);font-weight:500}
@media (max-width:599px){ .oogopslag li{grid-template-columns:1fr;gap:2px} }

/* Een dossierregel is een gewone regel in een document met een scheidingslijn,
   geen los kaartje. */
.dossier-rij{
  display:grid;grid-template-columns:144px 1fr 72px;gap:16px;align-items:start;
  padding:12px 0;border-bottom:1px solid #eceff9;font-size:15px;line-height:1.6;
}
.dossier-rij:last-child{border-bottom:0}
.dossier-soort{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--lila-diep);
}
.dossier-datum{font-family:var(--mono);font-size:12px;color:var(--lees);text-align:right}
.dossier-rij b{color:var(--inkt)}
@media (max-width:767px){
  .dossier-rij{grid-template-columns:1fr;gap:4px}
  .dossier-datum{text-align:left}
}

.citaat{
  font-size:15px;line-height:1.6;color:var(--inkt);
  border-left:3px solid var(--rand-lila);padding-left:14px;
}
.citaat + .citaat{margin-top:10px}
/* Een citaat met een accentstrook heeft die strook links. De rand van het
   citaat zou daar dan bovenop komen, dus die vervalt in dat ene geval. */
.citaat[data-accent]{border-left:0;padding-left:16px}

/* Een paneel binnen een document. Het wisselt alleen wat er onder de keuzerij
   staat: de bevinding erboven blijft altijd in beeld. */
.paneel{
  background:var(--papier);border:1px solid var(--rand);
  border-radius:12px;padding:16px;
}
.paneel[hidden]{display:none}

/* Statusregels houden hun eigen vormgeving. Kleur is nooit de enige drager:
   de status staat er ook als woord. */
.regel{
  display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:start;
  border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.5;
  border:1px solid var(--rand);background:var(--wit);
}
.regel + .regel{margin-top:10px}
.regel-stand{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.vak-mini{width:16px;height:16px;border-radius:5px;margin-top:3px;flex:none;display:block}
.regel-bevestigd{background:var(--mint-papier);border-color:var(--mint-rand)}
.regel-bevestigd .vak-bevestigd{background:var(--mint)}
.regel-bevestigd .regel-stand{color:#0c6741}
.regel-open{background:var(--amber-papier);border-color:var(--amber-rand)}
.regel-open .vak-open{background:var(--amber)}
.regel-open .regel-stand{color:#6f4a11}
.regel-voorstel{background:var(--lila-papier);border-color:var(--rand-lila)}
.regel-voorstel .vak-voorstel{background:var(--lila)}
.regel-voorstel .regel-stand{color:var(--lila-diep)}
.regel-leeg{background:var(--papier);border-color:var(--rand)}
.regel-leeg .vak-leeg{background:#7d83a3}
.regel-leeg .regel-stand{color:var(--lees)}
@media (max-width:599px){
  .regel{grid-template-columns:18px 1fr;row-gap:6px}
  .regel-stand{grid-column:2}
}

/* Een lijst met genummerde of gestipte punten binnen een document. */
.werkblad-lijst{display:grid;gap:14px}
.werkblad-lijst li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.6}
.werkblad-lijst b{display:block;color:var(--inkt)}
.werkblad-nr{font-family:var(--mono);font-size:12px;color:var(--lila-diep);padding-top:3px}
.punt{width:8px;height:8px;border-radius:999px;background:var(--lila);margin-top:9px;display:block}

/* ===========================================================================
   3. HET BEELDKADER EN DE FIGUREN
   Alle vormen zijn CSS. Er wordt nergens een SVG of een canvas gebruikt, ook
   niet via een masker.
   =========================================================================== */

.kader{
  --kader-zij:24px;
  position:relative;
  background:var(--lila-licht);
  border-radius:28px;
  padding:var(--kader-strook) var(--kader-zij) var(--kader-zij);
}
.kader-inhoud{position:relative;z-index:2}
/* De decoratielaag is het ENIGE wat wordt begrensd. Zij reikt nooit tot aan de
   lopende tekst onder het document. */
.kader-decor{
  position:absolute;left:0;right:0;top:0;height:var(--decor-hoogte);
  border-radius:28px 28px 0 0;
  overflow:hidden;pointer-events:none;z-index:0;
}
.vorm{position:absolute;display:block}

/* Voorpagina: organische blauwe hoofdvorm, kleinere roze tegenvorm en een lila
   contour. De maten zijn afgeleid van een kader van 648 pixels breed en staan
   daarom in procenten, zodat de compositie meeschaalt. */
.kader-voor{--kader-strook:112px;--decor-hoogte:336px}
.vorm-voor-hoofd{
  left:27.8%;top:12px;width:67.9%;height:300px;
  border-radius:var(--blob-a);
  background:linear-gradient(135deg,var(--mid-blauw),var(--mid-lila));
}
.vorm-voor-tegen{
  left:5.6%;top:44px;width:33.9%;height:180px;
  border-radius:var(--blob-b);background:var(--mid-roze);
}
.vorm-voor-contour{
  left:46.3%;top:28px;width:46.3%;height:190px;
  border-radius:var(--blob-b);border:3px solid var(--lila);opacity:.75;
}

/* Bewijs: twee brede platen achter het document plus een open lila boog. */
/* De twee platen liggen 12 en 24 pixels hoger dan het document met een
   verschuiving naar rechts van 12 en 28 pixels. Hun breedte is 92 en 84
   procent van de documentbreedte. Omdat het document binnen de zijruimte van
   het kader staat, worden beide uit die zijruimte gerekend: zo kloppen de
   maten ook als het kader smaller wordt. De hoogte van de labelrij boven het
   document is 42 pixels. */
/* WAAROM DE PLATEN HOGER STAAN DAN DE INSTRUCTIE ZEGT
   Met 12 en 24 pixels boven het document was op 1600 maar 6 procent van de
   decoratielaag gekleurd (voorpagina 30, CRM 39) en was plaat twee als
   papierlila op lichtlila onzichtbaar (contrast 1,13). Nu komt plaat één 44
   pixels boven het document uit en plaat twee 88, met een verloop van
   middenblauw naar middenlila: de enige combinatie die op lichtlila draagt.
   De bovenstrook is 112, gelijk aan de voorpagina. Afwijking van de
   bouwinstructie met toestemming van de eigenaar op 22-09. */
.kader-bewijs{--kader-strook:112px;--decor-hoogte:312px;--labelrij:42px}
.plaat{position:absolute;border-radius:24px;height:220px}
.plaat-een{
  left:calc(var(--kader-zij) + 20px);
  top:calc(var(--kader-strook) + var(--labelrij) - 44px);
  width:calc((100% - var(--kader-zij) * 2) * .92);
  background:var(--mid-lila);
}
.plaat-twee{
  left:calc(var(--kader-zij) + 44px);
  top:calc(var(--kader-strook) + var(--labelrij) - 88px);
  width:calc((100% - var(--kader-zij) * 2) * .84);
  background:linear-gradient(120deg,var(--mid-blauw),var(--mid-lila));
}
.boog-open{
  position:absolute;left:18%;top:10px;width:58%;height:120px;
  border:4px solid var(--lila);border-bottom:0;
  border-radius:999px 999px 0 0;opacity:.75;
}

/* CRM en de pagina's die zijn figuur lenen (/matching, /modules, de
   verdiepingen van /crm, /matching, /ai-assistent en /marketing-analytics).

   WAAROM GEEN CAPSULES MEER
   Tot 22-09 was dit een brede, effen blauwe capsule met een kleinere lila
   capsule erachter en twee korte lijntjes erboven. De eigenaar en de regie
   zagen op de live site dat die vormen er kapot uitzien: een effen pil met
   harde ronde einden leest als een knop, een voortgangsbalk of een schuifje.
   De twee lijntjes lazen als een menupictogram. Onderaan /matching, in de
   opening en bij het oefenvoorbeeld stonden ze los in beeld.

   De opmaak (klassen capsule-hoofd en capsule-tegen) blijft, want een andere
   bouwer werkt in de HTML. Hier krijgen die twee dezelfde organische vorm en
   dezelfde kleuren als de figuur van de voorpagina: een hoofdvorm in een
   verloop van middenblauw naar middenlila en een roze tegenvorm. Zo spreekt
   elke pagina één vormtaal. De lijntjes vervallen overal. */
.kader-crm{--kader-strook:64px;--decor-hoogte:210px}
.capsule{position:absolute;border-radius:var(--blob-a)}
.capsule-hoofd{
  left:27.8%;top:12px;width:67.9%;height:300px;z-index:1;
  background:linear-gradient(135deg,var(--mid-blauw),var(--mid-lila));
}
.capsule-tegen{
  left:5.6%;top:44px;width:33.9%;height:180px;z-index:2;
  border-radius:var(--blob-b);background:var(--mid-roze);
}
.streep-paar{display:none}

/* Een vrij figuurvlak in gemeten lege ruimte naast de tekst: een eigen
   rasterkind ná de laatste regel van een kolom, dus nooit achter tekst. Alleen
   vanaf 1024 pixels; daaronder stapelt alles en is er geen lege ruimte. De
   figuren zelf staan per pagina in ontwerp-paginas.css. */
.vrijvorm{position:relative;display:none;pointer-events:none;margin-top:32px}
@media (min-width:1024px){ .vrijvorm{display:block} }
.vrijvorm .vorm,.vrijvorm .capsule{position:absolute}

@media (max-width:599px){
  /* Op telefoon lopen alleen de openingskaders tot de schermranden. Hun inhoud
     houdt 20 pixels buitenruimte, zodat een document bij een venster van 390
     pixels precies 350 pixels breed blijft. */
  .kader{
    --kader-zij:20px;
    margin-left:calc(var(--kant) * -1);
    margin-right:calc(var(--kant) * -1);
    border-radius:0;
  }
  .kader-decor{border-radius:0}
  .kader-voor{--kader-strook:56px;--decor-hoogte:150px}
  .kader-bewijs{--kader-strook:72px;--decor-hoogte:184px}
  .kader-crm{--kader-strook:40px;--decor-hoogte:120px}
  .plaat{height:150px}
  .plaat-een{top:calc(var(--kader-strook) + var(--labelrij) - 30px)}
  .plaat-twee{top:calc(var(--kader-strook) + var(--labelrij) - 58px)}

  .vorm-voor-hoofd{left:42%;top:8px;width:180px;height:72px}
  .vorm-voor-tegen{left:6%;top:26px;width:120px;height:60px}
  .vorm-voor-contour{display:none}

  .boog-open{left:28%;width:160px;height:64px;top:6px}

  .capsule-hoofd{left:42%;top:8px;width:180px;height:72px}
  .capsule-tegen{left:6%;top:26px;width:120px;height:60px}
}

/* ---- Het slotmotief ----
   De figuren van de opening keren terug in de strook van het actievlak,
   kleiner en rechts geplaatst, zo dat minstens twee derde van elke vorm in de
   strook zichtbaar is. Deze regels staan NA de openingsmaten en de
   telefoonmaten hierboven, zodat zij winnen. De platen en capsules krijgen
   hier een eigen breedte: hun openingsmaat rekent met --kader-zij en die
   bestaat in het actievlak niet. */
/* Alles is rechts uitgelijnd met een begrensde breedte, zodat geen vorm
   buiten het venster steekt: met een vaste breedte vanaf links stak de contour
   op 768 pixels 70 pixels over de rand (gemeten per element). */
.actievlak-decor .vorm-voor-hoofd{left:auto;right:8%;top:-24px;width:min(440px,48%);height:140px}
.actievlak-decor .vorm-voor-tegen{left:auto;right:40%;top:12px;width:min(220px,26%);height:96px}
.actievlak-decor .vorm-voor-contour{left:auto;right:0;top:-30px;width:min(260px,32%);height:120px}
.actievlak-decor .plaat{height:120px}
.actievlak-decor .plaat-een{left:auto;right:5%;top:36px;width:72%}
.actievlak-decor .plaat-twee{left:auto;right:9%;top:12px;width:64%}
.actievlak-decor .boog-open{left:auto;right:18%;top:4px;width:44%;height:80px}
/* De twee vormen van de CRM-figuur staan in de strook op precies de plek en
   maat van de figuur van de voorpagina hierboven: dezelfde vormtaal, dus
   hetzelfde slot (zie de uitleg bij .capsule). */
.actievlak-decor .capsule-hoofd{left:auto;right:8%;top:-24px;width:min(440px,48%);height:140px}
.actievlak-decor .capsule-tegen{left:auto;right:40%;top:12px;width:min(220px,26%);height:96px}
@media (max-width:599px){
  .actievlak-decor .vorm-voor-hoofd{left:auto;right:4%;top:-10px;width:170px;height:66px}
  .actievlak-decor .vorm-voor-tegen{left:auto;right:44%;top:10px;width:110px;height:52px}
  .actievlak-decor .plaat{height:70px}
  .actievlak-decor .plaat-een{right:4%;top:22px;width:70%}
  .actievlak-decor .plaat-twee{right:8%;top:8px;width:60%}
  .actievlak-decor .boog-open{right:20%;top:2px;width:44%;height:40px}
  .actievlak-decor .capsule-hoofd{left:auto;right:4%;top:-10px;width:170px;height:66px}
  .actievlak-decor .capsule-tegen{left:auto;right:44%;top:10px;width:110px;height:52px}
}

/* ===========================================================================
   4. DE KORREL
   Eén materiaal voor de hele site. Het puntenraster en de diagonale lijnenband
   uit versie 6 zijn vervallen. De tegel wordt nooit uitgerekt en staat nooit
   achter koppen, alinea's, labels, statusregels of bediening.
   =========================================================================== */

.korrel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  /* Absoluut pad: dit stijlblad wordt op meerdere paginaniveaus geladen,
     kort pad zoals /bewijs en lang pad zoals /landing/bewijs.html. Een
     relatief pad zou dan niet overal naar dezelfde tegel wijzen. */
  background-image:url('/img/korrel.png');
  background-repeat:repeat;background-size:128px 128px;
  opacity:.65;
}
.kader-decor.korrel::before{
  z-index:3;
  /* De korrel loopt in de onderste 30 procent van de laag uit. Zonder dat was
     op 768 tot 1280 rechts van het document een fijne horizontale rand te
     zien waar de laag ophoudt. Een CSS-masker met een verloop, geen SVG. */
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
}
.ingang-strook.korrel::before{z-index:1}
.overgang.korrel::before{z-index:1}
/* Sinds 22-09 ligt de korrel op ELKE lege decoratiestrook: kopstroken, de
   strook van het actievlak, de strook van de antwoordkaart en alle
   overgangen. Eén materiaal betekent overal en niet op drie van de dertien. */
.kopstrook.korrel::before{z-index:1}
.actievlak-decor.korrel::before{z-index:3}
.antwoordkaart-strook.korrel::before{z-index:1}

/* ===========================================================================
   5. DE ACCENTSTROOK EN DE VERBINDING
   Het blauwe vlak over de letters uit versie 6 is vervallen: het lag over de
   tekst en de verdediging dat gelijke tinting het contrast behoudt klopt niet.
   In plaats daarvan krijgt een bewegend voorbeeld een eigen strook van 16
   pixels BUITEN zijn leesvlak. Die strook neemt vooraf ruimte in, dus bij het
   afspelen verschuift er niets. Tekst en documentinhoud blijven volledig
   ondoorzichtig en veranderen niet.
   =========================================================================== */

[data-accent]{position:relative;padding-left:16px}
[data-accent]::before{
  content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;
  border-radius:999px;background:var(--rand-lila);
  transition:background-color var(--duur-lang) var(--soepel),
             width var(--duur-lang) var(--soepel);
}
[data-accent-aan]::before{width:6px;background:var(--lila)}

/* De verbindingslijn tussen onderdelen. Zij loopt in een eigen lege strook en
   nooit achter tekst. De actieve lijn is 6 pixels dik. */
.verbinding{position:absolute;pointer-events:none}
.verbinding > i{
  display:block;height:100%;width:0;background:var(--lila);border-radius:999px;
  transition:width var(--duur-lang) var(--soepel);
}
.verbinding-rust{background:var(--rand-lila);border-radius:999px}
[data-accent-aan] > i{width:100%}

/* ===========================================================================
   6. GEEN BINNENKOMST: INHOUD STAAT METEEN OP HAAR PLEK
   Tot 22-09 stond elk blok met de klasse komt-op op doorzichtigheid nul en 14
   pixels te laag, tot een waarnemer het in beeld zag. Gemeten na herladen
   midden op een pagina: de browser zet de scrollpositie pas terug NA de eerste
   meting van die waarnemer, dus na 250 milliseconden stonden er tot drie
   blokken in beeld onzichtbaar (/matching en /crm op 1280 en 1600). De pagina
   verscheen in stukjes; de eigenaar noemde het "bijna alle schermen herladen
   slecht".

   De regel sindsdien (van de reviewer): inhoud staat standaard volledig
   zichtbaar op haar plek. Een effect mag pas daarna starten, alleen met
   transform, hoogstens 8 pixels en 300 milliseconden, nooit met opacity op
   tekst of bediening en niets bij minder beweging of met de knop Beweging
   uit. Hier staat daarom geen enkele beginstand meer voor .komt-op. De klasse
   mag in de opmaak blijven staan: er hangt geen regel meer aan, dus een
   oude kopie van het script in de cache kan niets meer verbergen.

   Wat blijft is de accentstrook hieronder: een decoratieve streep BUITEN het
   leesvlak die na het tonen oplicht. Zij verandert niets aan tekst of
   bediening en neemt vooraf haar ruimte in.
   =========================================================================== */
html[data-beweging="uit"] [data-accent]::before{width:6px;background:var(--lila)}
html[data-beweging="uit"] .verbinding > i{width:100%}
@media (prefers-reduced-motion:reduce){
  [data-accent]::before{transition:none}
  .verbinding > i{transition:none;width:100%}
}